:root{font-family:'DM Sans',Arial,sans-serif;color:#f4f8f9;background:#0a1620;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #b1ff7e;outline-offset:3px}#scene{position:fixed;inset:0;background:linear-gradient(#97c8da,#d4ddc8 60%,#718876)}#scene canvas{display:block;width:100%;height:100%;touch-action:none}.vignette{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(4,15,24,.39),transparent 27%,transparent 64%,rgba(4,15,24,.5));z-index:1}.app-shell{position:relative;height:100%;width:100%;z-index:2;pointer-events:none}.app-shell button{pointer-events:auto}.topbar{height:86px;padding:0 3.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.18);gap:12px}.identity{display:flex;align-items:center;gap:13px}.identity-symbol{width:37px;height:35px;position:relative}.identity-symbol span{position:absolute;left:2px;width:30px;height:7px;border:3px solid #eaffde;border-radius:2px;transform:skewY(-27deg) rotate(0deg)}.identity-symbol span:nth-child(1){top:4px}.identity-symbol span:nth-child(2){top:14px;width:23px}.identity-symbol span:nth-child(3){top:24px;width:15px}.identity-copy{display:flex;flex-direction:column;gap:2px}.identity-copy strong{font-family:'Space Grotesk',Arial,sans-serif;font-weight:700;letter-spacing:.105em;font-size:19px;line-height:1}.identity-copy .dot,.lesson-header h2 span{color:#baff8a}.identity-copy small{font-size:8.5px;font-weight:700;letter-spacing:.23em;color:#d0dedf}.top-center{font-size:10px;font-weight:700;letter-spacing:.15em;color:#e0e8e7}.pulse{display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#b3fc7a;box-shadow:0 0 9px #95e66b}.top-divider{opacity:.5;padding:0 10px}.top-actions{display:flex;gap:8px}.button{border:1px solid rgba(255,255,255,.24);border-radius:8px;background:rgba(14,26,34,.5);color:#fff;backdrop-filter:blur(15px);padding:11px 14px;font-size:11px;font-weight:700;letter-spacing:.03em;transition:background .15s}.button:hover{background:rgba(24,45,55,.8)}.flight-hud{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:30px 3.2% 20px;height:calc(100% - 154px)}.left-stack{flex:0 0 187px}.caption-label{color:#d5e9e3;font-size:9px;font-weight:700;letter-spacing:.18em}.detail-light{color:#b7ff87}.telemetry-card,.mode-card,.right-stack{border:1px solid rgba(255,255,255,.23);border-radius:13px;background:rgba(5,19,27,.63);backdrop-filter:blur(19px);box-shadow:0 20px 70px rgba(3,16,18,.13)}.telemetry-card{margin-top:12px;padding:15px 17px}.stat>span{font-size:9px;letter-spacing:.17em;color:#b4c1c6;font-weight:700}.stat>div{display:flex;align-items:baseline;gap:8px;margin:3px 0}.stat strong{font-family:'Space Grotesk',sans-serif;font-size:39px;line-height:1.25;font-weight:500;letter-spacing:-.055em;font-variant-numeric:tabular-nums}.stat small{color:#abffc0;font-size:12px;font-weight:700}.card-rule{height:1px;background:rgba(255,255,255,.14);margin:12px 0}.mode-card{margin-top:12px;padding:16px 13px 13px}.segmented{display:flex;margin:13px 0 8px;border:1px solid rgba(255,255,255,.14);border-radius:7px;padding:3px}.segmented button{flex:1;background:transparent;color:#c3d0d4;border:0;border-radius:5px;font-size:10px;padding:9px 5px;font-weight:700;letter-spacing:.05em}.segmented button.selected{background:#b5fb8d;color:#132820}.mode-card small{display:block;color:#afbfc1;font-size:10px;line-height:1.45}.center-hud{pointer-events:none;position:absolute;inset:104px 0 90px;display:flex;flex-direction:column;align-items:center;justify-content:center}.heading-tape{position:absolute;top:8%;display:flex;align-items:center;gap:12px;font-family:'Space Grotesk',sans-serif;font-size:11px;letter-spacing:.18em;color:#f7fff9;text-shadow:0 2px 15px #3a5157}.tape-line{display:block;width:28px;height:1px;background:rgba(255,255,255,.68)}.reticle{display:flex;align-items:center;gap:14px;opacity:.92}.wing{width:35px;height:8px;border-bottom:2px solid #f3fff6;position:relative}.wing-left{border-left:2px solid #f3fff6;transform:skewY(-9deg)}.wing-right{border-right:2px solid #f3fff6;transform:skewY(9deg)}.target-center{width:5px;height:5px;border:1px solid #f3fff6;border-radius:100%}.waypoint{position:absolute;bottom:22%;font-size:11px;letter-spacing:.12em;font-weight:700;text-align:center;text-shadow:0 2px 10px #0b2c33}.right-stack{width:305px;padding:22px 20px 17px;pointer-events:auto}.lesson-header{display:flex;justify-content:space-between;align-items:center;gap:5px}.lesson-header h2{font-family:'Space Grotesk',sans-serif;font-size:21px;letter-spacing:-.05em;line-height:1.2;margin:8px 0 12px}.level-tag{border:1px solid rgba(183,255,146,.44);color:#c8ffa8;padding:6px 7px;border-radius:5px;font-size:8px;font-weight:700;letter-spacing:.06em;white-space:nowrap}.lesson-progress{height:4px;border-radius:10px;background:rgba(255,255,255,.14);margin:5px 0 21px;overflow:hidden}.lesson-progress>div{height:100%;width:0;background:#bdff82;transition:width .3s}.lesson-list{display:flex;flex-direction:column;gap:8px}.lesson-row{display:flex;align-items:center;gap:12px;padding:12px;border-radius:8px;background:rgba(255,255,255,.06);border:1px solid transparent}.lesson-row.active{background:rgba(188,255,136,.12);border:1px solid rgba(189,255,135,.45)}.lesson-row.done{opacity:.75}.lesson-index{flex:0 0 27px;width:27px;height:27px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.25);border-radius:6px;font-family:'Space Grotesk',sans-serif;font-size:11px}.active .lesson-index,.done .lesson-index{color:#183522;background:#b6f98b;border:0}.lesson-copy strong{font-size:12px;display:block;margin-bottom:2px}.lesson-copy small{font-size:10px;color:#bac6c9}.lesson-foot{display:flex;justify-content:space-between;padding:17px 2px;font-size:10px;color:#b3c3c7;gap:5px}.lesson-foot>span:last-child{color:#b9fa93}.secondary-wide{width:100%;display:flex;justify-content:space-between;align-items:center;padding:13px 12px;font-size:10px;letter-spacing:.11em}.secondary-wide span{font-size:15px}.bottom-panel{height:68px;position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;border-top:1px solid rgba(255,255,255,.15);padding:0 3.2%;background:rgba(5,18,24,.57);backdrop-filter:blur(12px);gap:10px}.status,.controller-status{font-size:10px;font-weight:700;letter-spacing:.1em;display:flex;gap:10px;align-items:center}.status-ring{display:block;border:1px solid #b3ff83;border-radius:50%;width:13px;height:13px;position:relative}.status-ring:before{content:'';position:absolute;inset:3px;background:#b3ff83;border-radius:50%}.controller-dot{width:7px;height:7px;background:#b6c5cf;border-radius:50%}.controller-dot.connected{background:#bbff8b;box-shadow:0 0 8px #b3ff83}.shortcut-hint{display:flex;align-items:center;gap:8px;font-size:10px;color:#c1cbd0}.shortcut-hint kbd,.control-rows kbd{border:1px solid rgba(255,255,255,.34);border-radius:4px;padding:5px 6px;color:white;font-size:10px;font-family:inherit;font-weight:700}#toast{position:absolute;bottom:100px;left:50%;transform:translate(-50%,10px);padding:12px 20px;border-radius:9px;background:rgba(8,30,35,.88);border:1px solid rgba(180,254,133,.6);font-size:12px;font-weight:700;letter-spacing:.04em;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none;max-width:80%;text-align:center}#toast.show{opacity:1;transform:translate(-50%,0)}.dialog-backdrop{position:fixed;inset:0;background:rgba(3,13,20,.72);z-index:20;backdrop-filter:blur(13px);align-items:center;justify-content:center;display:none;padding:20px}.dialog-backdrop.visible{display:flex}.welcome-dialog,.help-dialog,.finish-dialog{color:#eef7f2;background:#101e29;border:1px solid rgba(255,255,255,.15);border-radius:15px;box-shadow:0 30px 150px #0007;max-width:510px;width:100%;padding:40px 42px 29px;position:relative}.eyebrow{font-size:10px;letter-spacing:.18em;font-weight:700;color:#baff8e}.eyebrow-line{display:inline-block;margin:0 6px;width:14px;border-top:1px solid #baff8e;vertical-align:middle}.intro-symbol{height:67px;width:82px;margin:35px 0 0;position:relative}.intro-symbol span{display:block;width:68px;height:10px;border:4px solid #baff8e;position:absolute;transform:skewY(-22deg);border-radius:3px;left:1px}.intro-symbol span:nth-child(1){top:0}.intro-symbol span:nth-child(2){top:19px;width:55px}.intro-symbol span:nth-child(3){top:38px;width:42px}.intro-symbol span:nth-child(4){top:57px;width:27px}.welcome-dialog h1{font-family:'Space Grotesk',sans-serif;font-size:43px;letter-spacing:-.06em;line-height:1.1;margin:25px 0 15px}.welcome-dialog h1 em{color:#b9ff94;font-style:normal}.welcome-dialog p,.help-dialog>p,.finish-dialog p{font-size:13px;color:#c0ced0;line-height:1.75}.intro-details{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid #35454c;border-bottom:1px solid #35454c;margin:28px 0}.intro-details>div{padding:17px 0;display:flex;flex-direction:column;gap:4px}.intro-details strong{font-family:'Space Grotesk',sans-serif;font-size:23px}.intro-details span{font-size:9px;letter-spacing:.12em;color:#a5b9b8;font-weight:700}.primary-cta{width:100%;background:#bbfb91;color:#11221a;border:0;border-radius:8px;padding:16px 17px;text-align:left;display:flex;justify-content:space-between;font-size:11px;font-weight:800;letter-spacing:.15em}.primary-cta:hover{background:#e4ffcf}.primary-cta>span{font-size:18px}.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:21px}.intro-bottom>span,.disclaimer{font-size:9px;font-weight:700;color:#829ca6;letter-spacing:.07em}.intro-bottom button{background:none;border:0;color:#e9f1ec;font-size:9px;font-weight:700;letter-spacing:.07em}.help-dialog h2,.finish-dialog h2{font-family:'Space Grotesk',sans-serif;font-size:30px;letter-spacing:-.05em;margin:18px 0 10px}.close-dialog{position:absolute;right:20px;top:17px;border:0;background:transparent;color:white;font-size:30px}.control-rows{display:flex;flex-direction:column;gap:12px;margin:24px 0}.control-rows>div{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #31434b;padding:0 0 11px;gap:15px}.control-rows span{color:#cedddb;font-size:12px;text-align:right}.control-rows kbd{white-space:nowrap}.help-dialog .help-note{font-size:10px}.finish-dialog{text-align:center}.finish-dialog .medal{color:#baff8e;font-size:90px;padding:15px}.finish-dialog .disclaimer{display:block;margin-top:20px}.touch-ui{position:fixed;z-index:10;bottom:90px;left:17px;right:17px;display:none;justify-content:space-between;pointer-events:none}.stick-wrapper{display:flex;flex-direction:column;align-items:center;gap:7px;pointer-events:auto}.stick-label{font-size:8px;letter-spacing:.11em;font-weight:700;color:#fff;text-shadow:0 2px 10px #000}.joystick{width:120px;height:120px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(6,27,32,.29);display:flex;align-items:center;justify-content:center;touch-action:none;position:relative;backdrop-filter:blur(3px)}.joystick:before,.joystick:after{content:'';position:absolute;background:rgba(255,255,255,.18)}.joystick:before{width:80%;height:1px}.joystick:after{height:80%;width:1px}.stick-knob{width:47px;height:47px;border-radius:50%;background:rgba(186,255,144,.62);border:2px solid #c8ffaa;box-shadow:0 3px 10px #0003;position:relative;z-index:1;transform:translate(0,0)}@media (pointer:coarse){.touch-ui{display:flex}.shortcut-hint{display:none}.top-center{display:none}.right-stack{width:258px;padding:17px}.center-hud{inset:89px 0 75px}.left-stack{flex-basis:137px}.stat strong{font-size:30px}.telemetry-card{padding:13px}.mode-card{padding:10px}.bottom-panel{height:65px}#toast{bottom:225px}}
@media (max-width:850px){.topbar{height:70px;padding:0 17px}.identity-copy strong{font-size:16px}.identity-copy small{font-size:7px}.top-actions .desktop-label{display:none}.button.ghost{min-width:38px;padding:8px}.flight-hud{padding:16px;height:calc(100% - 135px)}.left-stack{flex:0 0 130px}.right-stack{width:235px;padding:13px}.lesson-header h2{font-size:17px}.lesson-row{padding:8px;gap:7px}.lesson-copy strong{font-size:11px}.lesson-copy small{font-size:9px}.mode-card{display:none}.stat strong{font-size:27px}.stat>span{font-size:8px}.card-rule{margin:7px 0}.bottom-panel{padding:0 16px}.status,.controller-status{font-size:9px}.waypoint{bottom:28%}}
@media (max-width:600px){.flight-hud{padding:10px}.topbar{height:64px}.identity-symbol{width:26px;transform:scale(.72);transform-origin:left center;margin-right:-9px}.identity-copy strong{font-size:14px}.identity-copy small{font-size:6px}.top-actions{gap:3px}.left-stack{flex:0 0 105px}.telemetry-card{padding:9px 10px;margin-top:5px;border-radius:8px}.stat strong{font-size:25px}.right-stack{width:146px;padding:9px;border-radius:9px}.lesson-header h2{font-size:14px;margin:4px 0}.level-tag{display:none}.lesson-row{padding:7px 5px}.lesson-index{display:none}.lesson-copy strong{font-size:10px}.lesson-copy small{font-size:8px}.lesson-list{gap:3px}.lesson-progress{margin:3px 0 8px}.lesson-foot{font-size:8px;padding:8px 1px}.secondary-wide{padding:8px;font-size:8px}.caption-label{font-size:8px}.center-hud{top:65px}.heading-tape{top:10%}.waypoint{font-size:8px;max-width:42%;bottom:34%}.bottom-panel{height:48px;padding:0 10px}.controller-status{display:none}.status{font-size:8px}.welcome-dialog,.help-dialog,.finish-dialog{padding:24px 20px}.welcome-dialog h1{font-size:34px}.welcome-dialog p{font-size:12px}.intro-symbol{transform:scale(.7);transform-origin:left center;margin:12px 0 -7px}.intro-details{margin:17px 0}.intro-details strong{font-size:18px}.intro-details span{font-size:8px}.intro-bottom{align-items:flex-start}.intro-bottom>span,.intro-bottom button{font-size:8px}.touch-ui{bottom:65px;left:8px;right:8px}.joystick{width:104px;height:104px}.stick-knob{width:42px;height:42px}.stick-label{font-size:7px}#toast{bottom:190px;font-size:10px}.reticle{gap:6px}.wing{width:22px}}
@media(max-height:680px){.telemetry-card{padding:8px 12px}.stat strong{font-size:27px}.stat>div{margin:0}.card-rule{margin:5px 0}.lesson-list{gap:3px}.lesson-row{padding:7px}.right-stack{padding:12px}.mode-card{display:none}.welcome-dialog{padding-top:16px;padding-bottom:16px}.welcome-dialog h1{font-size:32px;margin:10px 0}.welcome-dialog p{line-height:1.4}.intro-symbol{display:none}.intro-details{margin:13px 0}.topbar{height:60px}}
