:root{--paper:#faf9f6;--ink:#2a2a28;--ink-soft:#5a5854;--line:#d8d4cc;--panel:#faf9f6eb;--shadow:0 8px 28px #28241c14;--radius:14px;--ep:#3d8bfd;--ek:#ff6b3d;--eth:#e6b422;--ok:#2f9e6b;--warn:#c45c26;--font:"Source Han Sans SC", "Noto Sans SC", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--serif:"Source Han Serif SC", "Noto Serif SC", "Songti SC", Georgia, serif}*,:before,:after{box-sizing:border-box}html,body{background:var(--paper);height:100%;color:var(--ink);font-family:var(--font);margin:0;overflow:hidden}button,input,select{font:inherit;color:inherit}#app{grid-template-rows:auto minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr) 340px;gap:0;height:100%;display:grid}.topbar{border-bottom:1px solid var(--line);background:var(--paper);z-index:5;grid-column:1/-1;justify-content:space-between;align-items:center;gap:12px;padding:12px 18px;display:flex}.brand{flex-direction:column;gap:2px;display:flex}.brand h1{font-family:var(--serif);letter-spacing:.02em;margin:0;font-size:1.15rem;font-weight:650}.brand .sub{color:var(--ink-soft);font-size:.78rem}.top-actions{flex-wrap:wrap;gap:8px;display:flex}.btn{appearance:none;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:999px;padding:.45rem .95rem;transition:transform .12s,background .12s,border-color .12s}.btn:hover{background:#fffdf8;border-color:#cfc9bc}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}.btn.primary:hover{background:#111}.btn:disabled{opacity:.45;cursor:not-allowed}.stage-wrap{background:radial-gradient(ellipse at 50% 0%, #fff 0%, transparent 55%), var(--paper);border-right:1px solid var(--line);min-height:0;position:relative}#canvas-host{position:absolute;inset:0}#canvas-host canvas{display:block;width:100%!important;height:100%!important}.hud{pointer-events:none;flex-wrap:wrap;align-items:center;gap:10px;display:flex;position:absolute;bottom:14px;left:14px;right:14px}.hud>*{pointer-events:auto}.control-card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:999px;align-items:center;gap:8px;padding:8px 12px;display:flex}.control-card label{color:var(--ink-soft);white-space:nowrap;font-size:.78rem}.control-card input[type=range]{width:min(220px,36vw);accent-color:var(--ink)}.hint{color:var(--ink-soft);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:999px;padding:6px 12px;font-size:.75rem}.side{background:var(--paper);flex-direction:column;min-height:0;display:flex;overflow:auto}.panel{border-bottom:1px solid var(--line);padding:14px 16px}.panel h2{font-size:.92rem;font-family:var(--serif);margin:0 0 10px}.jars{gap:10px;display:grid}.jar{border:1px solid var(--line);border-radius:var(--radius);background:#fff;padding:10px 12px}.jar-head{justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:.82rem;display:flex}.jar-head .val{font-variant-numeric:tabular-nums;font-weight:650}.jar-track{background:#eeeae2;border-radius:999px;height:10px;overflow:hidden}.jar-fill{border-radius:inherit;width:0%;height:100%;transition:width 80ms linear}.jar.ep .jar-fill{background:var(--ep)}.jar.ek .jar-fill{background:var(--ek)}.jar.eth .jar-fill{background:var(--eth)}.total-line{color:var(--ink-soft);font-variant-numeric:tabular-nums;margin-top:10px;font-size:.8rem}.mcq{gap:8px;display:grid}.mcq-opt{text-align:left;border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:12px;padding:10px 12px}.mcq-opt:hover{border-color:#bdb7aa}.mcq-opt.selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}.mcq-opt.correct{border-color:var(--ok);background:#eef8f2}.mcq-opt.wrong{border-color:var(--warn);background:#fff4ee}.flap{border:1px dashed var(--line);background:#fff;border-radius:12px;margin-top:10px;overflow:hidden}.flap summary{cursor:pointer;padding:10px 12px;font-size:.85rem;list-style:none}.flap summary::-webkit-details-marker{display:none}.flap[open] summary{border-bottom:1px dashed var(--line);background:#f6f4ef}.flap .body{color:var(--ink-soft);padding:10px 12px;font-size:.82rem;line-height:1.55}.store-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.store-btn{border:1px solid var(--line);text-align:left;cursor:pointer;background:#fff;border-radius:12px;flex-direction:column;gap:2px;padding:8px;display:flex}.store-btn strong{font-size:.8rem}.store-btn span{color:var(--ink-soft);font-size:.7rem}.store-btn.active,.store-btn.found{border-color:var(--ok)}.store-btn.active{box-shadow:inset 0 0 0 1px var(--ok);background:#eef8f2}.discovery{color:var(--ink-soft);margin-top:10px;font-size:.8rem}.discovery strong{color:var(--ok)}.footer{border-top:1px solid var(--line);color:var(--ink-soft);flex-wrap:wrap;grid-column:1/-1;justify-content:space-between;gap:12px;padding:8px 16px;font-size:.72rem;display:flex}.drawer-backdrop{opacity:0;pointer-events:none;z-index:40;background:#1e1c1847;transition:opacity .2s;position:fixed;inset:0}.drawer-backdrop.open{opacity:1;pointer-events:auto}.drawer{background:var(--paper);border-left:1px solid var(--line);z-index:50;width:min(380px,92vw);height:100%;padding:18px;transition:transform .22s;position:fixed;top:0;right:0;overflow:auto;transform:translate(105%);box-shadow:-12px 0 40px #00000014}.drawer.open{transform:translate(0)}.drawer h2{font-family:var(--serif);margin:0 0 6px}.drawer .note{color:var(--ink-soft);margin-bottom:14px;font-size:.8rem;line-height:1.5}.field{gap:6px;margin-bottom:12px;display:grid}.field label{font-size:.8rem}.field input,.field select{border:1px solid var(--line);background:#fff;border-radius:10px;padding:8px 10px}.fallback{background:var(--paper);z-index:20;place-items:center;padding:24px;display:none;position:absolute;inset:0}.fallback.show{display:grid}.fallback-card{border:1px solid var(--line);max-width:420px;box-shadow:var(--shadow);background:#fff;border-radius:16px;padding:20px}.fallback-card h3{font-family:var(--serif);margin:0 0 8px}.fallback-card p{color:var(--ink-soft);margin:0;font-size:.9rem;line-height:1.55}.mode-tabs{border:1px solid var(--line);background:#fff;border-radius:999px;gap:4px;padding:3px;display:inline-flex}.mode-tabs button{cursor:pointer;background:0 0;border:0;border-radius:999px;padding:.35rem .8rem;font-size:.8rem}.mode-tabs button.active{background:var(--ink);color:var(--paper)}.store-caption{background:var(--panel);border:1px solid var(--line);max-width:min(360px,70%);box-shadow:var(--shadow);border-radius:12px;padding:10px 12px;font-size:.82rem;line-height:1.45;display:none;position:absolute;top:14px;left:14px}.store-caption.show{display:block}@media (width<=900px){#app{grid-template-rows:auto minmax(42vh,1fr) minmax(0,46vh) auto;grid-template-columns:1fr}.stage-wrap{border-right:0;border-bottom:1px solid var(--line)}}