:root{
  --bg:#08090b;--surface:#0f1114;--raise:#161920;--line:#23272f;--line2:#2f343e;
  --text:#ecedf0;--dim:#9aa0ac;--faint:#6b7280;--accent:#e8b04a;--accent-ink:#17120a;
  --ok:#6fd49a;--warn:#e8b04a;--bad:#f0746e;
  --font:ui-sans-serif,-apple-system,"SF Pro Text","Segoe UI",Inter,Roboto,sans-serif;
  --display:ui-sans-serif,-apple-system,"SF Pro Display","Segoe UI",Inter,Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --chrome:104px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--bg);color-scheme:dark}
body{margin:0;min-height:100dvh;display:flex;flex-direction:column;background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.skip{position:absolute;left:12px;top:-60px;background:var(--accent);color:var(--accent-ink);padding:8px 14px;border-radius:8px;z-index:20;font-weight:600}
.skip:focus{top:12px}

.top{display:flex;align-items:center;justify-content:space-between;padding:14px clamp(16px,3vw,32px);height:56px}
.wordmark{display:flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;font:600 15px var(--display);letter-spacing:-.01em}
.mark{width:18px;height:18px;border-radius:50%;border:2px solid var(--accent);position:relative}
.mark::after{content:"";position:absolute;right:-4px;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
nav{display:flex;gap:4px}
.link{background:none;border:0;color:var(--dim);padding:8px 12px;border-radius:8px;cursor:pointer;transition:color .15s,background .15s}
.link:hover{color:var(--text);background:var(--surface)}

main{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0 clamp(12px,3vw,32px) 8px;min-height:0}
.frame{width:min(100%,calc((100dvh - var(--chrome) - 56px) * 16 / 9));min-width:min(100%,320px)}
.stage{position:relative;aspect-ratio:16/9;width:100%;background:#000;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 30px 80px -30px #000,0 0 0 1px #000;isolation:isolate}
.stage:fullscreen{border:0;border-radius:0;aspect-ratio:auto;width:100vw;height:100vh;box-shadow:none}
.stage iframe{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000;z-index:1}

.screen{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:clamp(16px,4vw,48px);text-align:center;
  background:radial-gradient(120% 90% at 50% 0%,#1b1810 0%,#0c0d10 55%,#08090b 100%);animation:in .4s ease both}
@keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.screen.out{animation:out .25s ease both}
@keyframes out{to{opacity:0}}
h1{margin:0;font:650 clamp(1.8rem,5vw,3.4rem)/1.05 var(--display);letter-spacing:-.035em}
h2{margin:0;font:600 1.25rem var(--display);letter-spacing:-.02em}
.tagline{margin:0;color:var(--dim);max-width:34ch;font-size:clamp(.95rem,1.6vw,1.1rem)}
.tag{margin:0;font:600 11px var(--font);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:4px 10px;border-radius:99px}
.reqs{list-style:none;display:flex;flex-wrap:wrap;gap:6px 14px;justify-content:center;margin:6px 0 0;padding:0;color:var(--faint);font-size:.8rem}
.reqs li{display:flex;align-items:center;gap:6px}
.reqs li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ok)}
.reqs li.bad::before{background:var(--bad)}.reqs li.warn::before{background:var(--warn)}
.warn{margin:0;color:var(--warn);font-size:.85rem;max-width:46ch}
.hint{margin:0;color:var(--faint);font-size:.78rem}
kbd{font:500 .85em var(--mono);background:var(--raise);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 6px;color:var(--dim)}

.primary{background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:12px 34px;font-weight:650;font-size:1rem;cursor:pointer;margin-top:6px;transition:transform .12s,filter .15s}
.primary:hover{filter:brightness(1.08)}.primary:active{transform:scale(.98)}
.ghost{background:transparent;border:1px solid var(--line2);color:var(--text);border-radius:9px;padding:7px 14px;cursor:pointer;font-size:.88rem;transition:border-color .15s,background .15s}
.ghost:hover:not(:disabled){border-color:var(--dim);background:var(--surface)}
.ghost:disabled{opacity:.4;cursor:default}
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.loading{gap:12px}
.stage-label{margin:0;color:var(--dim);font-size:.9rem}
.bar{width:min(360px,70%);height:3px;background:var(--line);border-radius:3px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .25s ease}
.bar.indet i{width:35%;animation:slide 1.2s ease-in-out infinite}
@keyframes slide{0%{transform:translateX(-100%)}100%{transform:translateX(300%)}}
.pct{margin:0;font:500 .8rem var(--mono);color:var(--faint);min-height:1.2em}
.failed p{margin:0;color:var(--dim);max-width:48ch}

.toast{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5;margin:0;background:var(--raise);border:1px solid var(--line2);padding:8px 14px;border-radius:10px;font-size:.85rem;max-width:90%;text-align:center}

.meta{width:min(100%,calc((100dvh - var(--chrome) - 56px) * 16 / 9));display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:14px 2px 6px;min-height:var(--chrome);min-height:0}
.who{display:flex;align-items:center;gap:10px}
.who strong{font:600 .95rem var(--display)}
.pill{font:600 10px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent);padding:2px 8px;border-radius:99px}
.fps{font:500 .78rem var(--mono);color:var(--faint)}
.controls{list-style:none;display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0;color:var(--faint);font-size:.82rem}
.controls b{font-weight:500;color:var(--dim);margin-right:6px}
.actions{display:flex;gap:8px}

footer{padding:12px clamp(16px,3vw,32px) 18px;color:var(--faint);font-size:.76rem;text-align:center}

dialog{border:1px solid var(--line2);background:var(--surface);color:var(--text);border-radius:16px;padding:0;width:min(440px,calc(100vw - 24px));box-shadow:0 40px 100px -20px #000;margin:auto}
dialog.wide,.dlg.wide{width:100%}
dialog:has(.wide){width:min(560px,calc(100vw - 24px))}
dialog::backdrop{background:rgba(4,5,6,.7);backdrop-filter:blur(3px)}
.dlg{display:grid;gap:16px;padding:20px 22px 22px;max-height:calc(100dvh - 40px);overflow:auto}
.dlg>header{display:flex;justify-content:space-between;align-items:center}
.dlg>footer{padding:0;text-align:left}
.x{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--dim);cursor:pointer;border-radius:8px;width:34px;height:34px}
.x:hover{background:var(--raise);color:var(--text)}
.dlg label{display:grid;gap:6px;color:var(--dim);font-size:.88rem}
.dlg label.check{display:flex;align-items:center;gap:10px}
select{background:var(--bg);border:1px solid var(--line2);border-radius:9px;padding:9px 10px;color:var(--text)}
input[type=range]{accent-color:var(--accent);width:100%}
input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px}
.note{margin:0;color:var(--faint);font-size:.8rem}
.verdict{margin:0;padding:10px 12px;border-radius:10px;background:var(--bg);border:1px solid var(--line);font-size:.88rem}
.verdict.ok{border-color:color-mix(in srgb,var(--ok) 40%,transparent)}.verdict.bad{border-color:color-mix(in srgb,var(--bad) 50%,transparent)}
table.diag{width:100%;border-collapse:collapse;font-size:.85rem}
caption{text-align:left;font:600 11px var(--font);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding-bottom:6px}
.diag td{padding:7px 0;border-top:1px solid var(--line);color:var(--dim)}
.diag td:last-child{text-align:right;color:var(--text);font-variant-numeric:tabular-nums}
.diag .ok{color:var(--ok)}.diag .no{color:var(--bad)}.diag .opt{color:var(--faint)}
.noscript{padding:24px;text-align:center}

@media (max-width:720px){
  :root{--chrome:150px}
  .frame,.meta{width:100%}
  .stage{aspect-ratio:3/4;max-height:calc(100dvh - 210px)}
  .controls{display:none}
  .meta{padding-top:10px}
}
@media (max-height:520px) and (orientation:landscape){.top{display:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}