:root{--bg: #0a0e18;--bg-soft: #111827;--panel: rgba(22, 30, 48, .72);--line: rgba(120, 150, 200, .16);--text: #e8eefc;--muted: #8695b5;--cyan: #38e8d6;--violet: #8ca0ff;--pink: #ff8ac8;--amber: #ffd166;--ar: 16 / 9}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:var(--text);background:radial-gradient(1100px 620px at 12% -10%,rgba(56,232,214,.13),transparent 60%),radial-gradient(900px 620px at 92% 0%,rgba(140,160,255,.14),transparent 62%),var(--bg);min-height:100%;-webkit-font-smoothing:antialiased}.app{max-width:1400px;margin:0 auto;padding:18px 22px 30px;display:flex;flex-direction:column;gap:16px;min-height:100vh}.topbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:.3px}.brand .dot{width:9px;height:9px;border-radius:50%;background:var(--cyan);box-shadow:0 0 0 4px #38e8d626,0 0 14px var(--cyan);animation:pulse 2.4s ease-in-out infinite}@keyframes pulse{50%{opacity:.45}}.modes{display:flex;gap:6px;padding:5px;border-radius:999px;background:#121a2abf;border:1px solid var(--line);margin-left:auto}.mode-btn{appearance:none;border:0;background:transparent;color:var(--muted);font-size:13.5px;font-family:inherit;padding:8px 16px;border-radius:999px;cursor:pointer;transition:color .18s,background .18s,box-shadow .18s;white-space:nowrap}.mode-btn:hover{color:var(--text)}.mode-btn.active{color:#06231f;background:linear-gradient(135deg,var(--cyan),#7ae0ff);box-shadow:0 4px 18px #38e8d652;font-weight:600}.perf{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;min-width:62px;text-align:right}.perf span{color:var(--cyan);font-weight:600}.layout{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:16px;align-items:start;flex:1}.stage{position:relative;width:100%;aspect-ratio:var(--ar);border-radius:18px;overflow:hidden;background:#060a12;border:1px solid var(--line);box-shadow:0 24px 60px #00000073,inset 0 1px #ffffff0a;isolation:isolate}.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.stage video{object-fit:cover;transform:scaleX(-1);filter:saturate(1.05) contrast(1.02)}#overlay,#fx{pointer-events:none}.stage:after{content:"";position:absolute;inset:0 0 auto;height:90px;background:linear-gradient(to bottom,rgba(6,10,18,.55),transparent);pointer-events:none}.stage-hint{position:absolute;left:16px;top:14px;z-index:5;font-size:12.5px;color:#e8eefcd1;background:#080e1880;backdrop-filter:blur(8px);padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.08);max-width:calc(100% - 32px)}.boot{position:absolute;inset:0;z-index:10;display:grid;place-content:center;justify-items:center;gap:14px;background:#060a12eb;backdrop-filter:blur(6px);transition:opacity .35s;text-align:center;padding:24px}.boot[hidden]{display:none}.boot.fade{opacity:0;pointer-events:none}.boot p{font-size:13.5px;color:var(--muted);max-width:340px;line-height:1.65}.spinner{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(56,232,214,.18);border-top-color:var(--cyan);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.retry{appearance:none;border:1px solid rgba(56,232,214,.4);background:#38e8d61f;color:var(--cyan);font-family:inherit;font-size:13px;padding:8px 20px;border-radius:999px;cursor:pointer}.retry:hover{background:#38e8d638}.panel{display:flex;flex-direction:column;gap:12px}.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:15px 16px;backdrop-filter:blur(10px)}.card h3{font-size:11.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.kv{display:grid;grid-template-columns:auto 1fr;gap:9px 12px;font-size:13px}.kv dt{color:var(--muted)}.kv dd{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}.readout{font-size:13px;line-height:1.9}.muted{color:var(--muted);font-size:12.5px}.metric{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 0}.metric+.metric{border-top:1px dashed rgba(120,150,200,.1)}.metric .label{color:var(--muted);font-size:12.5px}.metric .value{font-variant-numeric:tabular-nums;font-weight:600;color:var(--cyan)}.bar{height:5px;border-radius:3px;background:#7896c829;overflow:hidden;margin-top:6px}.bar>i{display:block;height:100%;width:0%;border-radius:3px;background:linear-gradient(90deg,var(--cyan),var(--violet));transition:width .1s linear}.tip{font-size:12.5px;line-height:1.8;color:var(--muted)}.tip b{color:var(--text);font-weight:600}.score-badge{display:inline-flex;align-items:baseline;gap:6px;font-size:26px;font-weight:700;color:var(--amber);font-variant-numeric:tabular-nums}.score-badge small{font-size:12px;color:var(--muted);font-weight:500}@media(max-width:980px){.app{padding:14px 14px 24px}.layout{grid-template-columns:1fr}.modes{order:3;width:100%;margin-left:0;justify-content:space-between}.mode-btn{flex:1;padding:9px 8px}.panel{flex-direction:row;flex-wrap:wrap}.card{flex:1 1 200px}}