:root{--space: #04070d;--ink: #eaf3ff;--muted: #8fa3bd;--cyan: #49e5ff;--teal: #2dd4bf;--gold: #ffd166;--violet: #9b8cff;--glass: rgba(10, 18, 32, .72);--line: rgba(142, 177, 222, .2)}*{box-sizing:border-box}html,body{height:100%}body{margin:0;overflow:hidden;background:var(--space);color:var(--ink);font-family:Space Grotesk,Noto Sans SC,sans-serif}button{font:inherit;color:inherit}#scene{position:fixed;top:0;right:0;bottom:0;left:0}#scene canvas{display:block;width:100%;height:100%}.intro{position:fixed;top:0;right:0;bottom:0;left:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:auto;background:radial-gradient(circle at 50% 44%,#0e182c00,#03060c57 42%,#020409eb),linear-gradient(180deg,#02050a29,#02050a9e);transition:opacity .9s ease,visibility .9s ease}.intro-vignette{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,rgba(4,9,18,.58),transparent 38%,transparent 62%,rgba(4,9,18,.58)),radial-gradient(circle at center,transparent 44%,rgba(1,3,7,.86) 100%);pointer-events:none}.intro-copy{position:relative;z-index:2;width:min(620px,calc(100vw - 40px));text-align:center}.intro-kicker{color:var(--gold);font-size:11px;font-weight:700;letter-spacing:0;text-transform:uppercase}.intro-title{margin:14px 0 10px;font-size:76px;font-weight:600;line-height:.92;letter-spacing:0;color:#f7fbff;text-shadow:0 0 28px rgba(73,229,255,.24),0 0 80px rgba(255,209,102,.12)}.intro-sub{margin:0 auto;max-width:440px;color:#9fb2ca;font-size:14px;line-height:1.7}.enter-btn{margin-top:28px;min-height:48px;padding:0 20px;display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(255,209,102,.55);border-radius:8px;background:linear-gradient(135deg,#ffd1662e,#f2a65a14);color:#fff0c4;font-size:13px;font-weight:700;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:background .2s ease,transform .2s ease}.enter-btn:hover{background:linear-gradient(135deg,#ffd16652,#f2a65a24);transform:translateY(-2px)}.intro-rule{width:1px;height:54px;margin:26px auto 0;background:linear-gradient(180deg,#ffd166e6,#ffd16600)}.intro-hint{display:block;color:#657a94;font-size:11px}body.entered .intro{opacity:0;visibility:hidden;pointer-events:none}.hud{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:2}.topbar{position:absolute;top:18px;left:20px;right:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .8s ease .15s,transform .8s ease .15s}body.entered .topbar{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark{width:30px;height:30px;flex:0 0 auto;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.9),transparent 18%),radial-gradient(circle at 65% 70%,rgba(73,229,255,.8),transparent 30%),radial-gradient(circle at 40% 45%,rgba(255,209,102,.7),transparent 32%),#0a1220;border:1px solid rgba(255,255,255,.45);box-shadow:0 0 28px #49e5ff73}.brand-name{font-size:13px;font-weight:700;letter-spacing:0}.brand-sub{margin-top:2px;font-size:10px;color:var(--muted);letter-spacing:0}.progress-pill{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:#040a14a8;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font-size:12px;white-space:nowrap}#progressCount{color:var(--gold);font-weight:700}.progress-sep{width:1px;height:18px;background:var(--line)}#progressLabel{color:var(--muted)}.lesson-panel{position:absolute;right:22px;bottom:22px;width:min(440px,calc(100vw - 32px));max-height:min(72vh,720px);overflow:auto;padding:20px;border:1px solid var(--line);border-radius:8px;background:var(--glass);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);box-shadow:0 28px 90px #00000080;pointer-events:none;scrollbar-width:thin;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .85s ease .35s,transform .85s ease .35s}body.entered .lesson-panel{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.panel-topline{display:flex;align-items:center;justify-content:space-between;gap:12px}.eyebrow{font-size:10px;letter-spacing:0;color:var(--cyan);font-weight:700}.status-badge{padding:4px 8px;border:1px solid rgba(73,229,255,.35);border-radius:999px;color:var(--cyan);font-size:10px;letter-spacing:0}.status-badge.locked{color:var(--muted);border-color:#8fa3bd40}.status-badge.complete{color:var(--gold);border-color:#ffd16666}h1{margin:12px 0 2px;font-size:26px;line-height:1.15;letter-spacing:0}.lesson-name{margin:0 0 16px;color:var(--gold);font-size:13px;font-weight:600}.dialogue{display:grid;gap:8px}.line{display:grid;grid-template-columns:30px 1fr auto;gap:10px;align-items:start;padding:10px;border:1px solid rgba(142,177,222,.13);border-radius:8px;background:#08101e80}.line-speaker{font-size:9px;font-weight:700;letter-spacing:0;color:var(--teal);padding-top:2px}.line-text{font-size:14px;line-height:1.45}.line-play{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(73,229,255,.25);border-radius:8px;background:transparent;cursor:pointer}.line-play:hover{background:#49e5ff1f}.icon{width:16px;height:16px;stroke-width:2}.focus-box{margin-top:14px;padding:12px;border:1px solid rgba(73,229,255,.3);border-radius:8px;background:linear-gradient(135deg,#2dd4bf14,#49e5ff0a)}.focus-title{display:flex;align-items:center;gap:7px;color:var(--cyan);font-size:11px;font-weight:700;letter-spacing:0}.focus-box p{margin:8px 0 0;font-size:14px}.focus-note{color:var(--muted);font-size:12px!important;line-height:1.55}.teacher-note{display:flex;gap:8px;align-items:flex-start;margin-top:12px;padding:10px 12px;border-left:2px solid var(--gold);background:#ffd1660f;color:#d8e4f2;font-size:12px;line-height:1.55}.teacher-note .icon{color:var(--gold);flex:0 0 auto}.actions{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:14px}.soft-btn,.primary-btn{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-size:13px;font-weight:700}.soft-btn{background:#49e5ff14;border-color:#49e5ff38}.primary-btn{background:linear-gradient(135deg,#ffd166,#f2a65a);color:#14100a;border-color:#ffd16680}.primary-btn:disabled{opacity:.45;cursor:not-allowed}.station-strip{position:absolute;left:22px;bottom:22px;display:flex;gap:10px;max-width:min(430px,calc(100vw - 460px));overflow:auto;pointer-events:none;scrollbar-width:none;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .85s ease .5s,transform .85s ease .5s}body.entered .station-strip{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.station-strip::-webkit-scrollbar{display:none}.station-chip{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:#060c16ad;color:var(--muted);cursor:pointer;font-size:11px;font-weight:700}.station-chip.current{color:#081018;background:var(--cyan);border-color:var(--cyan);box-shadow:0 0 20px #49e5ff80}.station-chip.complete{color:#14100a;background:var(--gold);border-color:var(--gold)}.station-chip.locked{cursor:not-allowed;opacity:.42}.toast{position:absolute;top:74px;left:50%;transform:translate(-50%) translateY(-16px);padding:9px 14px;border:1px solid rgba(255,209,102,.35);border-radius:8px;background:#08101cd1;color:#ffe7ad;font-size:12px;opacity:0;pointer-events:none;transition:opacity .24s ease,transform .24s ease}.toast.show{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:860px){.intro-title{font-size:44px}.topbar{top:12px;left:12px;right:12px}.brand-sub,#progressLabel{display:none}.lesson-panel{right:12px;bottom:12px;left:12px;width:auto;max-height:52vh;padding:16px}.station-strip{display:none}.actions{grid-template-columns:1fr}h1{font-size:22px}}