:root{color-scheme:dark;--bg: #0b1422;--bg-deep: #08101a;--hud: #edf4ff;--muted: rgba(222, 230, 245, .7);--accent: #97ecff;--warning: #ff7f7f;--panel: rgba(10, 17, 29, .78);--line: rgba(151, 236, 255, .22);--shadow: 0 24px 80px rgba(0, 0, 0, .42);--radius: 20px;font-family:Trebuchet MS,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;background:radial-gradient(circle at 18% 12%,rgba(118,165,213,.24),transparent 32%),radial-gradient(circle at 82% 16%,rgba(255,155,102,.16),transparent 24%),linear-gradient(180deg,#13243c 0%,#0d1728 38%,var(--bg) 70%,var(--bg-deep) 100%)}body{color:var(--hud)}#app{position:relative}canvas{display:block;width:100%;height:100%}.boot-shell{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#04080e4d,#04080ee0),radial-gradient(circle at center,rgba(151,236,255,.1),transparent 42%)}.boot-card{width:min(92vw,720px);padding:28px 30px;border:1px solid rgba(151,236,255,.18);border-radius:28px;background:linear-gradient(180deg,#0f1929f5,#080d16f0),linear-gradient(135deg,rgba(151,236,255,.08),transparent 42%);box-shadow:var(--shadow)}.boot-eyebrow{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}.boot-card h1{margin:0 0 12px;font-weight:600;font-family:Palatino Linotype,Book Antiqua,serif;letter-spacing:.03em}.boot-card p{margin:0 0 16px;color:#f1f5ffeb;line-height:1.7}.boot-hint code{color:var(--accent)}.hud{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.crosshair{position:absolute;left:50%;top:50%;width:20px;height:20px;transform:translate(-50%,-50%);opacity:.88}.crosshair:before,.crosshair:after{content:"";position:absolute;background:#ffffffdb;box-shadow:0 0 12px #97ecff73}.crosshair:before{left:9px;top:0;width:2px;height:20px}.crosshair:after{left:0;top:9px;width:20px;height:2px}.objective,.stage-panel,.control-hint{position:absolute;padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#0f1827f0,#080e18c7);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow)}.objective{left:24px;top:24px;width:min(36vw,410px)}.stage-panel{right:24px;top:24px;width:min(31vw,348px)}.control-hint{right:24px;bottom:28px;width:min(31vw,348px);padding:12px 16px;font-size:13px;line-height:1.55;color:var(--muted)}.control-hint strong{display:block;margin-bottom:4px;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;font-size:11px}.objective-label{display:block;margin-bottom:6px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}.objective-text{font-size:15px;line-height:1.58}.stage-list{margin:0;padding:0;list-style:none;display:grid;gap:10px}.stage-item{position:relative;padding:12px 14px 12px 18px;border:1px solid rgba(255,255,255,.08);border-radius:16px;background:#ffffff08;overflow:hidden;transition:transform .16s ease,border-color .16s ease,background .16s ease,opacity .16s ease}.stage-item:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--stage-accent, var(--accent));opacity:.72}.stage-item.active{border-color:#ffffff29;background:linear-gradient(180deg,#1e2c42f2,#0c121eeb);transform:translate(-4px)}.stage-item.done{opacity:.82;background:linear-gradient(180deg,#122520c7,#0a1118c7)}.stage-step{display:inline-block;margin-bottom:5px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--stage-accent, var(--accent))}.stage-name{font-size:15px;font-weight:600}.stage-detail{margin-top:4px;font-size:13px;line-height:1.45;color:var(--muted)}.prompt{position:absolute;left:50%;bottom:40px;transform:translate(-50%);min-width:240px;max-width:min(80vw,540px);padding:12px 16px;border:1px solid rgba(255,255,255,.12);border-radius:999px;background:#080e18e6;text-align:center;font-size:14px;letter-spacing:.03em;color:var(--hud);opacity:0;transition:opacity .18s ease}.prompt.visible{opacity:1}.message{position:absolute;left:50%;top:96px;transform:translate(-50%);max-width:min(80vw,620px);padding:12px 18px;border:1px solid rgba(255,255,255,.1);border-radius:999px;background:#080e18eb;color:#f4f7ff;opacity:0;transition:opacity .18s ease;box-shadow:var(--shadow);text-align:center}.message.visible{opacity:1}.overlay,.note,.ending{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#04080e38,#04080edb),radial-gradient(circle at center,rgba(151,236,255,.12),transparent 45%);opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}.overlay.visible,.note.visible,.ending.visible{pointer-events:auto;opacity:1;visibility:visible}.panel-card{width:min(92vw,780px);padding:28px 30px;border:1px solid rgba(151,236,255,.18);border-radius:28px;background:linear-gradient(180deg,#0f1929f5,#080d16f0),linear-gradient(135deg,rgba(151,236,255,.08),transparent 42%);box-shadow:var(--shadow)}.eyebrow{display:block;margin-bottom:12px;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted)}.panel-card h1,.panel-card h2{margin:0 0 12px;font-weight:600;font-family:Palatino Linotype,Book Antiqua,serif;letter-spacing:.03em}.panel-card p{margin:0 0 16px;color:#f1f5ffeb;line-height:1.7}.overlay-copy{margin-bottom:18px;color:#f1f5ffeb;line-height:1.7}.route-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin:18px 0 22px}.route-card{position:relative;min-height:116px;padding:14px 16px 14px 18px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#ffffff08;overflow:hidden}.route-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--route-accent)}.route-orange{--route-accent: #ff9b66}.route-blue{--route-accent: #70d8ff}.route-purple{--route-accent: #d67aff}.route-green{--route-accent: #8dffa4}.route-red{--route-accent: #ff7d7d}.route-step{display:inline-block;margin-bottom:8px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--route-accent)}.route-name{display:block;font-size:15px;font-weight:600}.route-detail{display:block;margin-top:6px;font-size:13px;line-height:1.45;color:var(--muted)}.instruction-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-top:20px}.instruction-pill{padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:18px;background:#ffffff08}.instruction-pill strong{display:block;margin-bottom:4px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}.note .panel-card,.ending .panel-card{width:min(90vw,640px)}.note-body,.ending-body{white-space:pre-line}.panel-footer{margin-top:18px;font-size:13px;color:var(--muted)}.ending .panel-card{border-color:#ff7d7d47;background:linear-gradient(180deg,#1f0c10f5,#0c060af0),linear-gradient(135deg,rgba(255,125,125,.07),transparent 42%)}@media (max-width: 1100px){.objective,.stage-panel,.control-hint{width:min(42vw,340px)}}@media (max-width: 860px){.objective{left:16px;top:16px;right:16px;width:auto}.stage-panel{left:16px;right:16px;top:168px;width:auto}.control-hint{left:16px;right:16px;bottom:88px;width:auto}.prompt{bottom:24px;width:calc(100vw - 32px)}}@media (max-width: 700px){.boot-card,.panel-card{padding:22px 20px;border-radius:22px}.route-grid,.instruction-grid{grid-template-columns:1fr}}