.frame{position:relative;background:var(--graphite-sunk);border:1px solid var(--rule-dark-strong);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-xl)}.frame-bar{display:flex;align-items:center;gap:var(--sp-3);padding:.6rem .85rem;background:var(--graphite-raised);border-bottom:1px solid var(--rule-dark);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:.06em;color:var(--on-graphite-2);font-variant-numeric:tabular-nums}.frame-rec{display:inline-flex;align-items:center;gap:.4rem;color:var(--sodium);font-weight:600}.frame-rec::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--alert);animation:rec 2s steps(1,end) infinite}@keyframes rec{0%,50%{opacity:1}50.01%,100%{opacity:.2}}.frame-id{color:var(--on-graphite);font-weight:500}.frame-sep{color:var(--on-graphite-3)}.frame-clock{margin-left:auto;color:var(--on-graphite)}.frame-view{position:relative;aspect-ratio:4 / 3;overflow:hidden;background:var(--graphite-sunk)}.frame-view img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 28%;filter:saturate(.82) contrast(1.06)}.frame-grid{position:absolute;inset:0;background-image:linear-gradient(var(--rule-dark) 1px,transparent 1px),linear-gradient(90deg,var(--rule-dark) 1px,transparent 1px);background-size:44px 44px;pointer-events:none;opacity:.5}.det-box{position:absolute;border:1.5px solid var(--sodium);border-radius:2px;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(20,22,26,.35),0 0 0 1px rgba(20,22,26,.35);animation:boxIn .7s var(--ease-out) .5s both}@keyframes boxIn{from{opacity:0;transform:scale(1.05)}to{opacity:1;transform:scale(1)}}.det-box::before,.det-box::after{content:"";position:absolute;width:9px;height:9px;border:2px solid var(--sodium)}.det-box::before{top:-2px;left:-2px;border-right:none;border-bottom:none}.det-box::after{bottom:-2px;right:-2px;border-left:none;border-top:none}.det-label{position:absolute;top:0;left:0;display:flex;align-items:center;gap:.35rem;padding:.16rem .4rem;background:var(--sodium);color:#14161a;font-family:var(--font-mono);font-size:.62rem;font-weight:600;letter-spacing:.04em;white-space:nowrap;border-radius:1px 0 2px 0}.det-label--alert{background:var(--alert);color:#fff}.det-box--alert{border-color:var(--alert)}.det-box--alert::before,.det-box--alert::after{border-color:var(--alert)}.frame-foot{display:flex;align-items:center;gap:var(--sp-3);padding:.6rem .85rem;background:var(--graphite-raised);border-top:1px solid var(--rule-dark);font-family:var(--font-mono);font-size:var(--t-2xs);letter-spacing:.05em;color:var(--on-graphite-2)}.frame-foot .ok{color:var(--ok);font-weight:600}.frame-demo{margin-left:auto;padding:.1rem .4rem;border:1px solid var(--rule-dark-strong);border-radius:var(--r-xs);color:var(--on-graphite-3);text-transform:uppercase;letter-spacing:.1em}.tag{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--font-mono);font-size:var(--t-2xs);font-weight:500;text-transform:uppercase;letter-spacing:var(--track-label);color:var(--sodium-ink)}.section--dark .tag,.frame-bar .tag{color:var(--sodium)}@media (prefers-reduced-motion:reduce){.det-box,.frame-rec::before{animation:none}.det-box{opacity:1;transform:none}}