:root{font-family:system-ui,"Segoe UI",Arial,sans-serif;color:#f0e9db;background:#050a17}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{touch-action:auto}
button{font:inherit;cursor:pointer}
button:disabled{opacity:.4;cursor:default}
button:focus-visible{outline:2px solid #a4eee4;outline-offset:4px}
[hidden]{display:none!important}
#view{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:radial-gradient(ellipse at 50% 15%,#132445,#060b19 72%)}
.topbar{position:fixed;z-index:3;top:calc(18px + env(safe-area-inset-top));left:0;right:0;display:none;text-align:center;pointer-events:none;text-shadow:0 2px 14px #000b}
body.experience-active .topbar{display:block}
#title{font:400 clamp(18px,2.2vw,27px)/1.2 Georgia,serif;letter-spacing:.015em}
.experience-menu{position:fixed;z-index:5;inset:0;display:grid;place-items:center;overflow-y:auto;overscroll-behavior:contain;background:linear-gradient(90deg,#050a17e8,#0a1021b8 45%,#09102055);touch-action:pan-y}
.intro-card{width:min(360px,calc(100vw - 36px));padding:24px 0;text-align:center}
.intro-card h1{font:400 clamp(34px,6vw,52px)/1.1 Georgia,serif;letter-spacing:0;margin:0 0 30px;color:#f0e9db}
.experience-choices{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.experience-choices button,#import-intro{min-height:52px;border:1px solid #9ccad250;background:#152d3cbd;color:#eff9f6;padding:12px 16px;border-radius:8px;font-size:15px;font-weight:600;backdrop-filter:blur(12px)}
.experience-choices button:hover:not(:disabled),#import-intro:hover{background:#234a5d;border-color:#a9efe2}
#import-intro{margin-top:12px;width:100%;font-size:13px}
#intro-status{min-height:20px;margin:18px 0 0;color:#bad3df;font-size:12px;line-height:1.5}
.iphone-install{display:none;margin:16px 0 0;color:#b5c7d5;font-size:12px;line-height:1.45}
@supports (-webkit-touch-callout:none){@media (pointer:coarse){.iphone-install{display:block}}}
.rotate-phone{position:fixed;z-index:6;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:24px;text-align:center;background:#050a17f5;color:#f0e9db}
.rotate-phone strong{font:400 28px/1.15 Georgia,serif}
.rotate-phone span{font-size:13px;color:#bad3df}
.rotate-icon{font-size:72px;line-height:1;transform:rotate(90deg);color:#9debf5}
.mobile-controls{position:fixed;z-index:3;left:calc(18px + env(safe-area-inset-left));right:calc(18px + env(safe-area-inset-right));bottom:calc(24px + env(safe-area-inset-bottom));display:none;justify-content:space-between;pointer-events:none;touch-action:none}
.mobile-controls>div{display:flex;align-items:flex-end;gap:12px}
.mobile-controls button{--control-accent:#9debf5;display:grid;place-items:center;width:68px;height:68px;padding:14px;pointer-events:auto;touch-action:none;-webkit-tap-highlight-color:transparent;user-select:none;border:1px solid #b8d5e14d;background:linear-gradient(155deg,#243a4bea,#0b1726eb);color:#edf7fa;border-radius:50%;box-shadow:inset 0 1px 0 #ffffff26,0 3px 10px #0005;transition:transform 80ms ease,border-color 80ms ease,background 80ms ease}
.mobile-controls svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.mobile-controls .control-rim{stroke:var(--control-accent);stroke-width:1.5;opacity:.6}
.mobile-controls .pedals button{border-radius:17px;height:70px;width:66px;padding:11px 13px;border-bottom:3px solid var(--control-accent)}
.mobile-controls button[data-key=s]{--control-accent:#f5b3a7;color:#f9d1c9}
.mobile-controls button[data-key=w]{height:82px;--control-accent:#84e9d5;color:#b7ffec}
.mobile-controls button.pressed{background:#b4f2ea;color:#102b36;border-color:#d9fff6;box-shadow:inset 0 0 0 2px #ffffff4d,0 0 14px #8ce9d533;transform:translateY(2px) scale(.97)}
.mobile-controls button[data-key=s].pressed{background:#f6c0b3;color:#44211d;border-color:#ffe1d8}
@media (pointer:coarse),(max-width:760px){body.experience-active:not(.automatic-mode) .mobile-controls{display:flex}}
@media (max-width:390px){.mobile-controls{left:10px;right:10px}.mobile-controls button{width:58px;height:58px}.mobile-controls .pedals button{width:58px;height:60px}.mobile-controls button[data-key=w]{height:72px}}
@media(prefers-reduced-motion:reduce){.mobile-controls button{transition:none}}

html{-webkit-touch-callout:none}
button,button *,.mobile-controls,.mobile-controls *,#view{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
button svg,button img{-webkit-user-drag:none;pointer-events:none}

#return-menu{display:none;position:fixed;z-index:7;top:calc(14px + env(safe-area-inset-top));right:calc(14px + env(safe-area-inset-right));width:44px;height:44px;padding:11px;border:1px solid #c8e4ef55;border-radius:50%;background:#102235dd;color:#f3f9ff;touch-action:manipulation;cursor:pointer}
body.experience-active #return-menu{display:grid;place-items:center}#return-menu svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}#return-menu:hover{background:#29445c}#return-menu:focus-visible{outline:2px solid #91fff0;outline-offset:3px}