:root{--ink:#e9eef3;--ink-dim:#a9b4bf;--panel:#0e13199e;--panel-strong:#0a0e13d1;--line:#ffffff1f;--accent:#f0a53a;--accent-2:#4fc3f7;--ok:#55d68a;--warn:#ffb74d;--bad:#ff6b5e;--font:"HarmonyOS Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif;--mono:"JetBrains Mono", "Cascadia Mono", Consolas, monospace}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font);background:#0b0f14;margin:0;overflow:hidden}#app{position:fixed;inset:0}#gl{outline:none;width:100%;height:100%;display:block;position:absolute;inset:0}#hud{pointer-events:none;position:absolute;inset:0}#hud>*{pointer-events:auto}#debug{font:11px var(--mono);color:#ffffff8c;text-shadow:0 1px 2px #0009;pointer-events:none;position:absolute;bottom:8px;right:10px}#loader{z-index:50;background:radial-gradient(1200px 700px at 50% 45%,#1b2733 0%,#0b0f14 70%);place-items:center;transition:opacity .9s,visibility .9s;display:grid;position:absolute;inset:0}#loader.done{opacity:0;visibility:hidden}.loader-inner{text-align:center;width:min(560px,86vw)}.loader-kicker{letter-spacing:.32em;color:var(--accent);text-transform:uppercase;font-size:13px}.loader-title{letter-spacing:.08em;margin:14px 0 8px;font-size:clamp(30px,4.6vw,52px);font-weight:700}.loader-sub{color:var(--ink-dim);letter-spacing:.12em;font-size:15px}.loader-bar{background:#ffffff14;border-radius:2px;height:3px;margin:38px auto 12px;overflow:hidden}.loader-bar i{background:linear-gradient(90deg, var(--accent), #ffd08a);width:0;height:100%;transition:width .35s;display:block}.loader-status{font:12px var(--mono);color:var(--ink-dim)}.hud-top{pointer-events:none;background:linear-gradient(#080b0fb8,#080b0f00);align-items:center;gap:16px;height:56px;padding:0 18px;display:flex;position:absolute;top:0;left:0;right:0}.hud-top>*{pointer-events:auto}.brand{align-items:center;gap:12px;display:flex}.brand-mark{color:#1b1206;letter-spacing:-.02em;background:linear-gradient(135deg,#f0a53a,#d96c1a);border-radius:9px;place-items:center;width:34px;height:34px;font-size:15px;font-weight:800;display:grid;box-shadow:0 4px 14px #f0a53a59}.brand-title{letter-spacing:.06em;font-size:16px;font-weight:700}.brand-sub{color:var(--ink-dim);letter-spacing:.08em;margin-top:2px;font-size:11.5px}.mode-pill{border:1px solid var(--line);color:var(--ink);cursor:pointer;-webkit-user-select:none;user-select:none;background:#ffffff0f;border-radius:99px;margin-left:6px;padding:4px 10px;font-size:12px}.mode-pill.exam{color:#ffb3aa;border-color:#ff6b5e99}.top-spacer{flex:1}.top-tools{gap:8px;display:flex}.tbtn{border:1px solid var(--line);min-width:34px;height:34px;color:var(--ink);font:13px var(--font);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#141a229e;border-radius:9px;align-items:center;gap:6px;padding:0 12px;transition:background .15s,border-color .15s,transform .1s;display:inline-flex}.tbtn:hover{background:#283442cc;border-color:#ffffff3d}.tbtn:active{transform:translateY(1px)}.tbtn.on{border-color:var(--accent);color:#ffd79a;background:#f0a53a29}.tbtn .k{font:11px var(--mono);opacity:.6}.score-chip{font:12px var(--mono);border:1px solid var(--line);background:#00000059;border-radius:8px;padding:6px 10px}.steps{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px)saturate(1.2);backdrop-filter:blur(14px)saturate(1.2);border-radius:14px;width:252px;max-height:calc(100% - 330px);padding:12px;position:absolute;top:72px;left:16px;overflow:auto}.steps h3{letter-spacing:.2em;color:var(--ink-dim);margin:2px 4px 10px;font-size:12px;font-weight:600}.chapter{color:#cfd8e1;letter-spacing:.06em;margin:8px 0 4px;padding:0 4px;font-size:12.5px;font-weight:700}.step{color:var(--ink-dim);cursor:default;border-radius:8px;align-items:center;gap:9px;padding:7px 8px;font-size:13px;display:flex}.step .dot{border:1.5px solid #ffffff40;border-radius:50%;flex:none;place-items:center;width:18px;height:18px;font-size:10px;display:grid}.step.done{color:#b9c7d4}.step.done .dot{background:var(--ok);border-color:var(--ok);color:#06200f}.step.active{color:#fff;background:#f0a53a24}.step.active .dot{border-color:var(--accent);box-shadow:0 0 0 4px #f0a53a2e}.step.bad .dot{background:var(--bad);border-color:var(--bad);color:#2a0703}.task{background:var(--panel-strong);border:1px solid var(--line);-webkit-backdrop-filter:blur(16px)saturate(1.2);backdrop-filter:blur(16px)saturate(1.2);border-radius:16px;width:min(760px,100% - 640px);min-width:420px;padding:16px 20px;position:absolute;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 18px 50px #00000073}.task-kicker{letter-spacing:.22em;color:var(--accent);text-transform:uppercase;font-size:11.5px}.task-title{letter-spacing:.03em;margin:6px 0;font-size:19px;font-weight:700}.task-body{color:#d7e0e8;font-size:14px;line-height:1.75}.task-body b{color:#ffd79a;font-weight:600}.task-body .std{color:var(--accent-2);margin-top:6px;font-size:12px}.task-hint{color:#9fd5ef;align-items:flex-start;gap:8px;margin-top:10px;font-size:13px;display:flex}.task-hint:before{content:"提示";color:var(--accent-2);background:#4fc3f726;border-radius:5px;flex:none;padding:2px 6px;font-size:11px}.task-actions{flex-wrap:wrap;justify-content:flex-end;gap:10px;margin-top:14px;display:flex}.btn{border:1px solid var(--line);height:38px;color:var(--ink);font:14px var(--font);cursor:pointer;background:#ffffff12;border-radius:10px;padding:0 18px;transition:background .15s,border-color .15s,transform .1s}.btn:hover{background:#ffffff1f}.btn:active{transform:translateY(1px)}.btn.primary{color:#1c1204;background:linear-gradient(#f3b04d,#de8d22);border:none;font-weight:700}.btn.primary:hover{filter:brightness(1.07)}.btn:disabled{opacity:.45;cursor:not-allowed}.choice-list{gap:8px;margin-top:12px;display:grid}.choice{text-align:left;border:1px solid var(--line);color:var(--ink);font:14px/1.55 var(--font);cursor:pointer;background:#ffffff0a;border-radius:10px;padding:10px 14px}.choice:hover{background:#ffffff14;border-color:#ffffff4d}.choice.sel{border-color:var(--accent);background:#f0a53a1f}.choice.right{border-color:var(--ok);background:#55d68a1f}.choice.wrong{border-color:var(--bad);background:#ff6b5e1f}.explain{color:#cfeaf7;background:#4fc3f714;border:1px solid #4fc3f740;border-radius:10px;margin-top:10px;padding:10px 12px;font-size:13px;line-height:1.7}.field-row{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:12px;display:grid}.field label{color:var(--ink-dim);margin-bottom:4px;font-size:12px;display:block}.field input,.field select{border:1px solid var(--line);color:#fff;width:100%;height:36px;font:14px var(--mono);background:#00000059;border-radius:9px;outline:none;padding:0 10px}.field input:focus,.field select:focus{border-color:var(--accent)}.field .unit{color:var(--ink-dim);font-size:11px}.side{scrollbar-width:thin;background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px)saturate(1.2);backdrop-filter:blur(14px)saturate(1.2);border-radius:14px;width:360px;max-height:calc(100vh - 88px);padding:12px;position:absolute;top:72px;right:16px;overflow-y:auto}.side h3{letter-spacing:.2em;color:var(--ink-dim);justify-content:space-between;margin:2px 4px 10px;font-size:12px;font-weight:600;display:flex}.kv{grid-template-columns:auto 1fr;gap:6px 12px;padding:0 4px;font-size:13px;display:grid}.kv dt{color:var(--ink-dim)}.kv dd{color:#eaf1f7;font-family:var(--mono);text-align:right;margin:0}.scope-wrap{background:#06110b;border:1px solid #78ffaa2e;border-radius:10px;position:relative;overflow:hidden}.scope-wrap canvas{width:100%;height:auto;display:block}.scope-bar{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.scope-bar .tbtn{height:28px;padding:0 9px;font-size:12px}.toolbar{gap:8px;display:flex;position:absolute;bottom:196px;left:50%;transform:translate(-50%)}.tool{border:1px solid var(--line);width:74px;height:74px;color:var(--ink);cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0e1319c7;border-radius:14px;flex-direction:column;justify-content:center;align-items:center;gap:6px;font-size:11.5px;transition:border-color .15s,transform .1s,background .15s;display:flex}.tool:hover{border-color:#ffffff59}.tool.on{border-color:var(--accent);background:#f0a53a29}.tool svg{width:30px;height:30px}.toasts{pointer-events:none;gap:8px;display:grid;position:absolute;top:72px;left:50%;transform:translate(-50%)}.toast{border:1px solid var(--line);background:#0c1015e6;border-radius:10px;max-width:640px;padding:10px 16px;font-size:14px;animation:.25s toastIn;box-shadow:0 10px 30px #0006}.toast.ok{border-color:#55d68a8c}.toast.bad{border-color:#ff6b5e99}.toast.info{border-color:#4fc3f780}@keyframes toastIn{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.label3d{white-space:nowrap;border:1px solid var(--line);color:#fff;pointer-events:none;background:#0a0e13d1;border-radius:8px;padding:5px 9px;font-size:12.5px;position:absolute;transform:translate(-50%,-100%);box-shadow:0 6px 18px #00000059}.label3d:after{content:"";background:#fff6;width:1px;height:6px;position:absolute;bottom:-6px;left:50%}.label3d.accent{border-color:var(--accent);color:#ffe0ad}.label3d small{color:var(--ink-dim);margin-left:6px}.label3d.lead{margin-top:8px;transform:translate(calc(-100% - 16px),-50%)}.label3d.lead:after{width:16px;height:1px;inset:50% -16px auto auto}.label3d.bad{border-color:var(--bad);color:#ffc2b8}.modal-back{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:20;background:#0406098c;place-items:center;display:grid;position:absolute;inset:0}.modal{border:1px solid var(--line);background:#0e1319f2;border-radius:18px;width:min(860px,92vw);max-height:86vh;padding:22px 26px;overflow:auto;box-shadow:0 30px 80px #0009}.modal h2{letter-spacing:.04em;margin:0 0 6px;font-size:22px}.modal .sub{color:var(--ink-dim);margin-bottom:14px;font-size:13px}table.grid{border-collapse:collapse;width:100%;margin-top:8px;font-size:13.5px}table.grid th,table.grid td{border-bottom:1px solid var(--line);text-align:left;padding:8px 10px}table.grid th{color:var(--ink-dim);letter-spacing:.06em;font-size:12px;font-weight:600}table.grid td.mono{font-family:var(--mono)}.badge{border:1px solid var(--line);border-radius:99px;padding:2px 8px;font-size:12px;display:inline-block}.badge.c1{color:#7ff0ae;border-color:#55d68a80}.badge.c2{color:#b5e3ff;border-color:#4fc3f780}.badge.c3{color:#ffd08a;border-color:#ffb74d8c}.badge.c4{color:#ffb0a6;border-color:#ff6b5e99}.legend{background:var(--panel);border:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:14px;width:252px;padding:12px;font-size:12.5px;position:absolute;bottom:22px;left:16px}.legend .row{align-items:center;gap:8px;margin:4px 0;display:flex}.legend .sw{border-radius:3px;flex:none;width:14px;height:14px}.hidden,.only-narrow{display:none!important}@media (width<=1280px){.steps{width:220px}.side{width:320px}.task{width:min(680px,100% - 580px)}}@media (width<=1100px){.only-narrow{display:inline-flex!important}.brand-sub{display:none}.brand-title{font-size:14px}.steps{z-index:12;display:none;box-shadow:0 18px 50px #00000080}body.steps-open .steps{display:block}.task{width:auto;min-width:0;left:16px;right:16px;transform:none}body:has(.side:not(.hidden)) .task{right:352px}.side{width:320px}}@media (width<=860px){.brand-title{display:none}.top-tools{gap:6px}.tbtn{padding:0 9px;font-size:12.5px}}@media (width<=760px){.side{width:auto;max-height:42vh;top:64px;left:16px;right:16px}body:has(.side:not(.hidden)) .task{right:16px}.task{max-height:44vh;overflow-y:auto}.top-tools{max-width:calc(100vw - 110px);overflow-x:auto}}.cinema{pointer-events:none;z-index:15;position:absolute;inset:0}.cinema .bar{background:#000;height:0;transition:height .9s;position:absolute;left:0;right:0}.cinema .bar.t{top:0}.cinema .bar.b{bottom:0}.cinema.on .bar{height:9vh}.cinema .card{opacity:0;text-shadow:0 2px 18px #0000008c;max-width:70vw;transition:opacity 1.1s,transform 1.1s;position:absolute;bottom:17vh;left:7vw;transform:translateY(10px)}.cinema .card.show{opacity:1;transform:none}.cinema .card .k{letter-spacing:.32em;color:var(--accent);font-size:14px}.cinema .card .t{letter-spacing:.08em;color:#fff;margin:10px 0 8px;font-size:clamp(30px,4.4vw,58px);font-weight:800}.cinema .card .s{color:#e6edf3;letter-spacing:.06em;font-size:clamp(14px,1.4vw,19px)}.cinema .skip{pointer-events:auto;opacity:0;transition:opacity .6s;position:absolute;bottom:calc(9vh + 16px);right:3vw}.cinema.on .skip{opacity:.85}body.cinematic .hud-top,body.cinematic .steps{opacity:0;transition:opacity .6s}.hud-top,.steps{transition:opacity .6s}body.lab-open .steps,body.lab-open .legend{opacity:0;pointer-events:none}.lab .lab-sec{letter-spacing:.14em;color:var(--ink-dim);margin:12px 2px 6px;font-size:12px}.lab .seg{flex-wrap:wrap;gap:6px;display:flex}.lab .seg button{border:1px solid var(--line);color:#d7e0e8;min-width:56px;font:inherit;cursor:pointer;background:#ffffff0a;border-radius:8px;flex:auto;padding:6px 8px;font-size:13px}.lab .seg button:hover{border-color:#ffffff59}.lab .seg button.on{border-color:var(--accent);color:#ffe0ad;background:#ffb34729}.lab .rng{color:#d7e0e8;grid-template-columns:auto 1fr;align-items:center;gap:2px 10px;margin:8px 2px 0;font-size:13px;display:grid}.lab .rng b{color:#ffe0ad;font-variant-numeric:tabular-nums;justify-self:end;font-weight:600}.lab .rng input{width:100%;accent-color:var(--accent);grid-column:1/-1}.lab .rng input:disabled{opacity:.35}.lab .lab-note{color:#d7e0e8;background:#4fc3f714;border:1px solid #4fc3f740;border-radius:10px;margin-top:12px;padding:10px 12px;font-size:13px;line-height:1.7}.lab .lab-note b{color:#ffd79a}.chk{border:1px solid var(--line);cursor:pointer;background:#ffffff0a;border-radius:8px;align-items:center;gap:6px;padding:6px 12px;font-size:14px;display:inline-flex}.chk input{accent-color:var(--accent)}.sel{border:1px solid var(--line);color:#eaf1f7;width:100%;font:inherit;background:#0a0e13cc;border-radius:8px;padding:7px 10px;font-size:14px}.scope-bar .tbtn.on{border-color:var(--accent);color:#ffe0ad}.task-actions .hint-btn{color:#ffd79a;background:#f0a53a1a;border-color:#ffb3478c;align-items:center;gap:6px;margin-right:auto;display:inline-flex}.task-actions .hint-btn:hover{background:#f0a53a38}.hint-flash{outline-offset:3px;border-radius:8px;outline:2px solid #ffb347;animation:.7s ease-in-out infinite alternate hintPulse}@keyframes hintPulse{0%{outline-color:#ffb34773;box-shadow:0 0 #f0a53a00}to{outline-color:#ffc36b;box-shadow:0 0 20px 4px #f0a53a80}}
