:root{--bg:#050c17;--card:#0a1628;--border:#ffffff1f;--aqua:#00D9FF;--green:#22CC66;--amber:#FFB400;--text:#fff;--muted:#ffffffb3;--dim:#ffffff8c;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif}
header,main,footer{max-width:960px;margin:0 auto;padding:12px 16px}
h1{font-size:1.4rem;margin:8px 0 4px;color:var(--aqua);letter-spacing:.02em}
.sub,.method{color:var(--dim);font-size:.85rem;margin:4px 0}
#stage{display:block;width:100%;height:46vh;min-height:220px;background:radial-gradient(ellipse at center,#0b1120f2 0%,#000000f7 100%);border:1px solid var(--border);border-radius:12px}
.panel{margin-top:12px;background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:6px 0}
fieldset{border:1px solid var(--border);border-radius:8px;padding:6px 10px}
legend{color:var(--muted);font-size:.8rem;padding:0 4px}
button{font:inherit;min-height:40px;padding:6px 16px;border-radius:999px;border:1px solid var(--aqua);background:transparent;color:var(--text);cursor:pointer}
button:disabled{opacity:.4;cursor:default}
#start{background:var(--aqua);color:var(--bg);font-weight:600}
input[type=number]{width:5.5em;font:inherit;background:var(--bg);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:4px}
label{display:inline-flex;gap:6px;align-items:center;min-height:36px}
.num{font-variant-numeric:tabular-nums;color:var(--muted)}
dialog{background:var(--card);color:var(--text);border:1px solid var(--aqua);border-radius:12px;max-width:min(560px,92vw)}
dialog::backdrop{background:#000c}
pre{white-space:pre-wrap;font-size:.8rem;color:var(--muted);max-height:30vh;overflow:auto}
#qr{background:#fff;display:inline-block;padding:8px;border-radius:8px;line-height:0}
#qr svg{width:min(280px,70vw);height:auto}