@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(/fonts/geist-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(/fonts/geist-latin-600-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(/fonts/geist-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Geist";font-weight:600;font-display:swap;src:url(/fonts/geist-vietnamese-600-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:"Geist";font-weight:400;font-display:swap;src:url(/fonts/geist-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(/fonts/geist-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:500;font-display:swap;src:url(/fonts/geist-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Geist Mono";font-weight:400;font-display:swap;src:url(/fonts/geist-mono-vietnamese-400-normal.woff2) format("woff2");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

:root{
  --bg:#06080a;
  --panel:#0a0e12;
  --line:rgba(255,255,255,.075);
  --line-2:rgba(255,255,255,.14);
  --text:#e9eef1;
  --mute:#7b8790;
  --dim:#46515a;
  --ok:#35f2a6;
  --real:#4d8dff;
  --bad:#ff4a5c;
  --r:14px;
  --r-s:10px;
  --mono:"Geist Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-size:15px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:hidden}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
kbd{font-family:var(--mono);font-size:.78em;padding:1px 6px;border:1px solid var(--line-2);border-radius:6px;color:var(--text);background:rgba(255,255,255,.04)}

.bg{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(900px 520px at 22% -8%,rgba(53,242,166,.075),transparent 70%),
    radial-gradient(700px 500px at 100% 110%,rgba(255,74,92,.05),transparent 70%),
    linear-gradient(var(--line) 1px,transparent 1px) 0 0/56px 56px,
    linear-gradient(90deg,var(--line) 1px,transparent 1px) 0 0/56px 56px;
  -webkit-mask-image:radial-gradient(ellipse at 40% 20%,#000 0%,rgba(0,0,0,.25) 65%,transparent 100%);
  mask-image:radial-gradient(ellipse at 40% 20%,#000 0%,rgba(0,0,0,.25) 65%,transparent 100%)}

.app{position:relative;z-index:1;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;padding:18px 28px 20px;max-width:1880px;margin:0 auto}

/* header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center}
.logos{display:inline-flex;align-items:center;gap:.85rem}
.logos img{display:block;width:auto;object-fit:contain}
.logos .l-cld{height:2.2rem}
.logos .l-antv{height:1.35rem}
.logos .x{width:1px;height:1.6rem;background:rgba(255,255,255,.2)}
.top-right{display:flex;align-items:center;gap:14px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:var(--r-s);background:rgba(255,255,255,.02)}
.seg button{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;padding:6px 14px;border-radius:7px;font-size:13px;color:var(--mute);transition:color .2s,background .2s}
.seg button:hover{color:var(--text)}
.seg button.on{background:rgba(255,255,255,.09);color:var(--text)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:var(--r-s);border:1px solid var(--line-2);font-size:13px;font-weight:600;transition:transform .2s var(--ease),background .2s,border-color .2s}
.btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.24)}
.btn:active{transform:scale(.97)}

/* main */
.main{display:grid;grid-template-columns:minmax(0,1fr) minmax(400px,600px);gap:32px;min-height:0}
.stage-col{display:grid;grid-template-rows:minmax(0,1fr) auto;gap:14px;min-height:0;min-width:0}
.stage-wrap{container-type:size;min-height:0;display:grid;place-items:center}
.stage{--c:var(--line-2);position:relative;width:min(100cqw,100cqh);height:min(100cqw,100cqh);border-radius:var(--r);background:#04060808;background:#030507;border:1px solid var(--line);overflow:hidden;transition:border-color .5s,box-shadow .6s}
.stage[data-state=done][data-v=bad]{border-color:rgba(255,74,92,.45);box-shadow:0 0 60px -10px rgba(255,74,92,.35)}
.stage[data-state=done][data-v=ok]{border-color:rgba(77,141,255,.55);box-shadow:0 0 60px -10px rgba(77,141,255,.4)}
.viewport{position:absolute;inset:0;overflow:hidden;cursor:crosshair}
.layer{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s var(--ease);user-select:none;-webkit-user-drag:none}
.layer.base{transform-origin:center}
.stage:not([data-state=idle]) .layer.base{opacity:1}
.stage[data-state=scan] .layer.base{filter:saturate(.55) contrast(1.08) brightness(.8)}
.layer.ov{pointer-events:none}
.stage[data-view=focus] #ovFocus,.stage[data-view=noise] #ovNoise,.stage[data-view=spectrum] #ovSpectrum{opacity:1}
.stage[data-view=focus] #ovFocus{opacity:.9;mix-blend-mode:normal}
.stage[data-view=noise] .base,.stage[data-view=spectrum] .base{filter:brightness(.35)}
#ovSpectrum,#ovNoise{image-rendering:auto}

.grid-ov{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:linear-gradient(rgba(53,242,166,.16) 1px,transparent 1px) 0 0/36px 36px,linear-gradient(90deg,rgba(53,242,166,.16) 1px,transparent 1px) 0 0/36px 36px;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 85%);mask-image:radial-gradient(circle at 50% 50%,#000 20%,transparent 85%)}
.stage[data-state=scan] .grid-ov{opacity:1}
.beam{position:absolute;left:0;right:0;top:0;height:26%;opacity:0;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(53,242,166,.0) 10%,rgba(53,242,166,.22) 92%,rgba(190,255,230,.95) 100%);
  border-bottom:1px solid rgba(190,255,230,.95);box-shadow:0 8px 40px rgba(53,242,166,.5)}
.stage[data-state=scan] .beam{opacity:1;animation:sweep 1.5s cubic-bezier(.45,0,.55,1) infinite alternate}
@keyframes sweep{from{transform:translateY(-100%)}to{transform:translateY(285%)}}
.flash{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.22),transparent 70%)}
.flash.go{animation:flash .7s ease-out}
@keyframes flash{from{opacity:1}to{opacity:0}}

.corner{position:absolute;width:26px;height:26px;border:0 solid var(--ok);opacity:.9;pointer-events:none;transition:all .6s var(--ease);z-index:3}
.tl{top:12px;left:12px;border-top-width:2px;border-left-width:2px;border-top-left-radius:6px}
.tr{top:12px;right:12px;border-top-width:2px;border-right-width:2px;border-top-right-radius:6px}
.bl{bottom:12px;left:12px;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:6px}
.br{bottom:12px;right:12px;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:6px}
.stage[data-state=scan] .corner{width:40px;height:40px;top:22px;left:22px}
.stage[data-state=scan] .tr{left:auto;right:22px}
.stage[data-state=scan] .bl{top:auto;bottom:22px}
.stage[data-state=scan] .br{top:auto;left:auto;bottom:22px;right:22px}
.stage[data-v=bad][data-state=done] .corner{border-color:var(--bad)}
.stage[data-v=ok][data-state=done] .corner{border-color:var(--real)}

.stage[data-state=idle] .stage[data-state=scan] .stage[data-v=bad][data-state=done] .stage[data-v=ok][data-state=done] 
.cross{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .2s}
.viewport:hover .cross{opacity:1}
.stage[data-state=idle] .cross{display:none}
.cross i{position:absolute;background:rgba(255,255,255,.28)}
.cross .h{left:0;right:0;height:1px;top:var(--y,50%)}
.cross .v{top:0;bottom:0;width:1px;left:var(--x,50%)}
.cross span{position:absolute;left:var(--x,50%);top:var(--y,50%);margin:10px 0 0 12px;font-family:var(--mono);font-size:10.5px;padding:2px 6px;background:rgba(3,5,7,.8);border-radius:5px;color:var(--text);white-space:nowrap}

.markers{position:absolute;inset:0;pointer-events:none}
.mk{position:absolute;width:64px;height:64px;margin:-32px 0 0 -32px;opacity:0;transform:scale(1.8);transition:opacity .5s,transform .6s var(--ease)}
.mk.in{opacity:1;transform:none}
.mk::before{content:"";position:absolute;inset:0;border:1.5px solid var(--c,#fff);border-radius:50%;box-shadow:0 0 18px var(--c,#fff)}
.mk::after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--c,#fff)}
.mk em{position:absolute;left:72px;top:50%;transform:translateY(-50%);font-style:normal;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;white-space:nowrap;padding:2px 7px;background:rgba(3,5,7,.8);border:1px solid var(--c,#fff);border-radius:6px}
.mk.flip em{left:auto;right:72px}
.stage:not([data-view=focus]) .markers{opacity:0}
.markers{transition:opacity .3s}

/* drop zone */
.drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;z-index:4;cursor:pointer;transition:opacity .4s,visibility .4s;
  background:radial-gradient(circle at 50% 46%,rgba(53,242,166,.07),transparent 55%)}
.stage:not([data-state=idle]) .drop{opacity:0;visibility:hidden}
.drop h2{font-size:clamp(18px,2.1vw,26px);font-weight:600;letter-spacing:-.02em}
.drop p{color:var(--mute);font-size:14px}
.drop .keys{margin-top:10px;font-family:var(--mono);font-size:12px}
.stage.drag{border-color:var(--ok);box-shadow:0 0 0 1px var(--ok),0 0 60px -6px rgba(53,242,166,.5)}
.ring{position:relative;width:96px;height:96px;margin-bottom:14px}
.ring i{position:absolute;inset:0;border:1px solid rgba(53,242,166,.5);border-radius:50%;animation:ring 3.2s var(--ease) infinite}
.ring i:nth-child(2){animation-delay:1.05s}.ring i:nth-child(3){animation-delay:2.1s}
.ring::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:10px;margin:-5px;border-radius:50%;background:var(--ok);box-shadow:0 0 20px var(--ok)}
@keyframes ring{from{transform:scale(.25);opacity:1}to{transform:scale(1.5);opacity:0}}

.tabs{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:42px}
.hint{font-family:var(--mono);font-size:12px;color:var(--mute);text-align:right}
.tabs .seg button:disabled{opacity:.35;cursor:default}

/* report */
.report{position:relative;border:1px solid var(--line);border-radius:var(--r);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,.008));padding:30px 32px;min-height:0;overflow:hidden}
.pane{position:absolute;inset:0;padding:30px 32px;display:flex;flex-direction:column;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease),visibility .45s}
.report[data-mode=idle] .idle-pane,.report[data-mode=scan] .scan-pane,.report[data-mode=done] .result-pane,.report[data-mode=error] .error-pane{opacity:1;visibility:visible;transform:none}
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}
.idle-pane h1{margin-top:16px;font-size:clamp(34px,3.6vw,56px);line-height:1.02;letter-spacing:-.04em;font-weight:600}
.idle-pane h1 em{font-style:italic;color:var(--ok);font-weight:600}
.lede{margin-top:20px;color:var(--mute);max-width:46ch;font-size:15.5px;line-height:1.6}
.caps{list-style:none;margin-top:auto;border-top:1px solid var(--line)}
.caps li{display:flex;gap:16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.caps span{font-family:var(--mono);font-size:11.5px;color:var(--ok)}
.caps b{font-weight:400}

.scan-pane .scramble{margin-top:18px;font-family:var(--mono);font-size:clamp(56px,6vw,92px);font-weight:500;letter-spacing:-.05em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}
.scramble span{font-size:.4em;color:var(--mute);margin-left:4px;letter-spacing:0}
.steps{list-style:none;margin-top:auto;display:grid;gap:2px}
.steps li{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);font-family:var(--mono);font-size:13px;color:var(--dim);transition:color .3s}
.steps li i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--dim);flex:none;position:relative;transition:all .3s}
.steps li.run{color:var(--text)}
.steps li.run i{border-color:var(--ok);border-top-color:transparent;animation:spin .7s linear infinite}
.steps li.ok{color:var(--mute)}
.steps li.ok i{background:var(--ok);border-color:var(--ok)}
.steps li.ok i::after{content:"";position:absolute;left:4.5px;top:2px;width:4px;height:7px;border:solid #04110b;border-width:0 1.8px 1.8px 0;transform:rotate(40deg)}
.steps li em{margin-left:auto;font-style:normal;color:var(--dim);font-size:12px}
@keyframes spin{to{transform:rotate(360deg)}}

.verdict{margin-top:14px;font-size:clamp(30px,3.2vw,50px);font-weight:600;letter-spacing:-.04em;line-height:1.05;font-family:var(--sans)}
.report[data-v=ok] .verdict,.report[data-v=bad] .verdict{color:#fff;text-shadow:0 2px 30px rgba(0,0,0,.35)}
.report[data-v=ok]{background:linear-gradient(160deg,#1f5fe0 0%,#153f9c 55%,#0f2c70 100%);border-color:rgba(130,175,255,.55);box-shadow:0 0 80px -20px rgba(77,141,255,.55)}
.report[data-v=bad]{background:linear-gradient(160deg,#d6293f 0%,#9c1a2c 55%,#6b1120 100%);border-color:rgba(255,140,150,.55);box-shadow:0 0 80px -20px rgba(255,74,92,.55)}
.report[data-v] .eyebrow,.report[data-v] .score-label,.report[data-v] .scale,.report[data-v] dt,.report[data-v] .note{color:rgba(255,255,255,.78)}
.report[data-v] .metrics,.report[data-v] .metrics>div{border-color:rgba(255,255,255,.22)}
.report[data-v] .score .pct{color:rgba(255,255,255,.8)}
.report[data-v] .track{box-shadow:0 0 0 1px rgba(255,255,255,.25)}
.report[data-v] .sg{background:rgba(0,0,0,.22);border-color:rgba(255,255,255,.18)}
.score{margin-top:22px;display:flex;align-items:baseline;font-family:var(--mono);font-variant-numeric:tabular-nums}
.score .num{font-size:clamp(64px,7vw,110px);font-weight:500;letter-spacing:-.06em;line-height:.95}
.score .pct{font-size:clamp(22px,2.4vw,36px);color:var(--mute);margin-left:6px}
.score-label{margin-top:8px;font-size:13.5px;color:var(--mute)}
.meter{margin-top:26px}
.track{position:relative;height:10px;border-radius:99px;background:linear-gradient(90deg,var(--ok),#2b3a40 46%,#3a2c33 54%,var(--bad));opacity:.95}
.track .mid{position:absolute;left:50%;top:-5px;bottom:-5px;width:1px;background:var(--line-2)}
.needle{position:absolute;top:-8px;left:0;width:0;transition:left 1.3s var(--ease)}
.needle b{position:absolute;left:-2px;top:0;width:4px;height:26px;border-radius:3px;background:#fff;box-shadow:0 0 18px rgba(255,255,255,.9)}
.scale{display:flex;justify-content:space-between;margin-top:14px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.metrics{margin-top:auto;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line)}
.metrics div{padding:14px 0 12px;border-bottom:1px solid var(--line)}
.metrics div:nth-child(odd){padding-right:16px}
.metrics div:nth-child(even){padding-left:20px;border-left:1px solid var(--line)}
.metrics dt{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.metrics dd{margin-top:4px;font-family:var(--mono);font-size:21px;font-weight:500;letter-spacing:-.02em}
.note{margin-top:14px;font-size:12.5px;color:var(--dim);line-height:1.5}
.result-pane>*{opacity:0;transform:translateY(8px)}
.report[data-mode=done] .result-pane>*{animation:rise .6s var(--ease) forwards}
.report[data-mode=done] .result-pane>*:nth-child(2){animation-delay:.05s}
.report[data-mode=done] .result-pane>*:nth-child(3){animation-delay:.12s}
.report[data-mode=done] .result-pane>*:nth-child(4){animation-delay:.18s}
.report[data-mode=done] .result-pane>*:nth-child(5){animation-delay:.24s}
.report[data-mode=done] .result-pane>*:nth-child(6){animation-delay:.3s}
.report[data-mode=done] .result-pane>*:nth-child(7){animation-delay:.36s}
.report[data-mode=done] .result-pane>*:nth-child(8){animation-delay:.42s}
@keyframes rise{to{opacity:1;transform:none}}
.error-pane h2{margin-top:16px;font-size:30px;letter-spacing:-.03em}

/* sample bar */
.bar{display:grid;gap:10px}
.bar-head{display:flex;align-items:center;justify-content:space-between}
.bar-l{display:flex;align-items:center;gap:16px}
.kinds button{padding:5px 14px;font-size:12.5px}
.samples{display:grid;grid-template-columns:repeat(var(--n,10),minmax(0,1fr));gap:10px}
.sm{position:relative;aspect-ratio:1.45;border-radius:var(--r-s);overflow:hidden;border:1px solid var(--line);background:#0a0e12;transition:transform .3s var(--ease),border-color .3s,box-shadow .3s}
.sm img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.8) brightness(.78);transition:filter .3s,transform .6s var(--ease)}
.sm:hover{transform:translateY(-3px);border-color:var(--line-2)}
.sm:hover img{filter:none;transform:scale(1.06)}
.sm:active{transform:scale(.97)}
.sm .n{position:absolute;left:7px;top:6px;font-family:var(--mono);font-size:11px;padding:1px 6px;border-radius:5px;background:rgba(3,5,7,.72);backdrop-filter:blur(4px)}
.sm .tag{position:absolute;right:7px;top:8px;width:9px;height:9px;border-radius:50%;opacity:0;transform:scale(0);transition:all .4s var(--ease)}
.sm.ok .tag{background:var(--real);box-shadow:0 0 10px var(--real);opacity:1;transform:none}
.sm.bad .tag{background:var(--bad);box-shadow:0 0 10px var(--bad);opacity:1;transform:none}
.sm.active{border-color:#fff;box-shadow:0 0 0 1px #fff,0 8px 30px -8px rgba(255,255,255,.35)}
.sm.active img{filter:none}


/* video / audio */
.stage[data-vidfail] .vid{display:none}
.stage[data-vidfail][data-kind=video][data-view=original] .layer.base{opacity:1!important}
.layer.vid{object-fit:contain;background:#000;transition:opacity .5s var(--ease),filter .5s}
.stage[data-kind=video][data-view=original]:not([data-state=idle]) .vid{opacity:1}
.stage[data-kind=video][data-view=original] .layer.base{opacity:0!important}
.stage[data-kind=video][data-state=scan] .vid{filter:saturate(.55) contrast(1.08) brightness(.8)}
.stage[data-kind=audio] .layer.base{object-fit:fill}
.stage[data-kind=audio][data-state=scan] .layer.base{opacity:0!important}
.stage[data-kind=audio][data-view=original] #ovFocus{opacity:0!important}
.stage[data-kind=audio][data-view=focus] #ovFocus{opacity:1!important}
.stage[data-kind=audio] .layer.ov{object-fit:fill}
.stage[data-kind=audio]:not([data-state=idle]) .viewport{background:radial-gradient(circle at 50% 40%,rgba(53,242,166,.06),transparent 70%)}
.wave{position:absolute;left:0;right:0;bottom:0;width:100%;height:26%;opacity:0;pointer-events:none;transition:opacity .4s;background:linear-gradient(0deg,rgba(3,5,7,.82),transparent)}
.stage[data-kind=audio]:not([data-state=idle]) .wave{opacity:1}
.playhead{position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.9);opacity:0;pointer-events:none;transition:opacity .3s}
.stage[data-kind=audio][data-state=done] .playhead.on{opacity:.9}
.stage[data-kind=audio][data-state=done] .viewport,.stage[data-kind=video][data-state=done] .viewport{cursor:pointer}
.stage[data-kind=audio][data-state=scan] .grid-ov{opacity:.6}
.stage[data-kind=video] .cross,.stage[data-kind=audio] .cross{display:none}
.playbadge{position:absolute;z-index:3;left:50%;top:50%;width:64px;height:64px;margin:-32px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:rgba(3,5,7,.55);backdrop-filter:blur(6px);display:grid;place-items:center;opacity:0;transform:scale(.8);transition:all .3s var(--ease);pointer-events:none}
.playbadge::after{content:"";margin-left:4px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.stage[data-kind=audio][data-state=done][data-paused=true] .playbadge{opacity:1;transform:none}

.strip{display:none;margin-top:20px;gap:8px;align-items:stretch}
.report[data-kind=video] .strip,.report[data-kind=audio] .strip{display:flex}
.sg{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px;cursor:pointer;padding:0;text-align:left}
.sg img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:7px;border:1px solid var(--line);filter:saturate(.8) brightness(.85);transition:filter .3s,border-color .3s}
.sg:hover img{filter:none;border-color:var(--line-2)}
.sg .bar2{position:relative;width:100%;height:46px;border-radius:6px;background:rgba(255,255,255,.04);overflow:hidden}
.sg .bar2 i{position:absolute;left:0;right:0;bottom:0;height:0;border-radius:6px;transition:height 1s var(--ease)}
.sg.ok .bar2 i{background:linear-gradient(0deg,rgba(53,242,166,.25),var(--ok))}
.sg.bad .bar2 i{background:linear-gradient(0deg,rgba(255,74,92,.25),var(--bad))}
.sg b{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--mute);text-align:center}
.sg.bad b{color:var(--bad)}
.sg.cur img{border-color:#fff}
.report[data-kind=audio] .strip .bar2{height:64px}
.sm.aud{display:grid;place-items:center;background:linear-gradient(160deg,#0d1419,#080b0e)}
.sm.aud svg{width:70%;height:58%;opacity:.75;transition:opacity .3s,transform .5s var(--ease)}
.sm.aud:hover svg,.sm.aud.active svg{opacity:1;transform:scale(1.05)}
.sm .dur{position:absolute;right:7px;bottom:6px;font-family:var(--mono);font-size:10.5px;padding:1px 6px;border-radius:5px;background:rgba(3,5,7,.72)}

@media (max-width:1080px){
  body{overflow:auto}
  .app{height:auto;min-height:100dvh;padding:14px 16px 18px}
  .main{grid-template-columns:1fr;gap:18px}
  .stage-wrap{aspect-ratio:1;container-type:inline-size}
  .stage{width:100cqw;height:100cqw}
  .report{min-height:560px}
  .samples{grid-template-columns:repeat(5,1fr)!important}
  .tabs{flex-wrap:wrap}
}
@media (max-width:560px){
  .hint{display:none}
  .seg button{padding:6px 10px;font-size:12.5px}
  .report,.pane{padding:22px 20px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}