:root{--optical-bg: #071426;--optical-surface: #0c223a;--optical-border: #365d7e;--optical-text: #e8f4ff;--optical-muted: #b9d7ee;--optical-primary: #76d8fa;--optical-primary-text: #042034;font-family:Microsoft YaHei,system-ui,sans-serif;color:var(--optical-text);background:var(--optical-bg)}:root[data-theme=dark][data-palette=aurora]{--optical-bg: #17142b;--optical-surface: #201b3a;--optical-border: #625699;--optical-text: #f7f8ff;--optical-muted: #b9b5d9;--optical-primary: #36ddff;--optical-primary-text: #07111f}:root[data-theme=dark][data-palette=sunset]{--optical-bg: #301422;--optical-surface: #431b2b;--optical-border: #91475b;--optical-text: #fff5ed;--optical-muted: #e0b7b6;--optical-primary: #ff9b4a;--optical-primary-text: #351507}:root[data-theme=dark][data-palette=forest]{--optical-bg: #142b23;--optical-surface: #1c3a2d;--optical-border: #467e5e;--optical-text: #f2fff5;--optical-muted: #b6d4c0;--optical-primary: #4ed69c;--optical-primary-text: #062317}:root[data-theme=dark][data-palette=ocean]{--optical-bg: #0f233f;--optical-surface: #143052;--optical-border: #3e79a6;--optical-text: #f2fbff;--optical-muted: #b0cfdf;--optical-primary: #36c5df;--optical-primary-text: #062039}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,color-mix(in srgb,var(--optical-primary) 30%,transparent),var(--optical-bg) 58%)}main{width:min(94vw,680px);margin:0 auto;padding:14px 0 18px;text-align:center}p{color:var(--optical-muted)}#setup{display:grid;gap:14px;max-width:520px;margin:20px auto;text-align:left}.setup-tip{margin:-8px 0 0;font-size:12px}label{display:grid;gap:7px;color:var(--optical-muted);font-size:14px}input,select{width:100%;color:var(--optical-text);background:var(--optical-surface);border:1px solid var(--optical-border);border-radius:9px;padding:12px;font:inherit}button{color:var(--optical-primary-text);background:var(--optical-primary);border:0;border-radius:9px;padding:13px 18px;font:700 16px inherit;cursor:pointer}button:disabled{cursor:wait;opacity:.58}button.secondary{color:var(--optical-text);background:transparent;border:1px solid var(--optical-border);margin-top:0}#stage{padding:12px;border:1px solid var(--optical-border);border-radius:12px;background:var(--optical-surface);box-shadow:inset 0 1px color-mix(in srgb,var(--optical-text) 9%,transparent)}#qr{display:block;width:min(480px,100%);margin:0 auto;border-radius:8px;background:#fff;image-rendering:pixelated;height:auto}#metrics{margin:10px 0 0;color:var(--optical-text);font-variant-numeric:tabular-nums}#capture{max-width:560px;margin:18px auto}video{width:100%;border-radius:12px;background:#000}.progress{height:14px;overflow:hidden;margin-top:14px;background:var(--optical-surface);border:1px solid var(--optical-border);border-radius:7px}.progress div{width:0;height:100%;background:var(--optical-primary);transition:width .2s}.muted{font-size:13px;color:var(--optical-muted)}#result h2{color:var(--optical-primary)}