:root{color-scheme:dark;--background:#030303;--ink:#b8c1e3;--muted:#7b8299;--line:#303442;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--background);overflow:hidden}
button{font:inherit;color:inherit}
button:focus-visible,canvas:focus-visible{outline:1px solid var(--ink);outline-offset:6px}
#experience{height:100vh;height:100dvh;position:relative;isolation:isolate;color:var(--ink);overflow:hidden;min-height:320px}
.masthead{position:absolute;top:calc(32px + env(safe-area-inset-top));left:40px;right:40px;display:flex;justify-content:space-between;align-items:center;pointer-events:none;z-index:2}
.wordmark{margin:0;display:flex;gap:0;font-size:20px;font-weight:900;line-height:1;letter-spacing:-2px;transform:rotate(-12deg)}
.wordmark span:nth-child(2){transform:translateY(4px)}
.wordmark span:nth-child(3){transform:translateY(8px)}
.edition{font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:12px;letter-spacing:.08em;color:var(--muted)}
.slash{padding:0 10px;color:#474c5f}
#scene{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline-offset:-12px;cursor:grab}
#scene:active{cursor:grabbing}
.instruments{position:absolute;bottom:calc(42px + env(safe-area-inset-bottom));left:40px;right:40px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;z-index:2}
.readouts{display:flex;gap:36px}
.readout{min-width:102px;display:grid;grid-template-columns:15px 1fr;font:12px/1.4 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.axis{color:var(--muted)}
.gauge{position:relative;grid-column:1/-1;margin-top:7px;width:102px;height:7px;border-top:1px solid #60677e}
.gauge:before,.gauge:after{content:"";position:absolute;top:0;width:1px;height:4px;background:#60677e}
.gauge:before{left:0}.gauge:after{right:0}
.gauge i{position:absolute;left:50%;top:-2px;width:1px;height:9px;background:var(--ink)}
.controls{display:flex;align-items:center;gap:22px}
.controls button{display:flex;align-items:center;gap:8px;border:0;background:none;padding:8px 0;cursor:pointer;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.05em;color:var(--muted);min-height:36px;transition:color .2s}
.controls button:hover,.controls button[aria-pressed=true]{color:var(--ink)}
.controls button[hidden]{display:none}
.play-indicator{display:block;width:6px;height:7px;border-left:2px solid currentColor;border-right:2px solid currentColor}
button[aria-pressed=false] .play-indicator{border:0;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid currentColor}
#fullscreen{padding:8px;width:32px;justify-content:center}
#fullscreen svg{width:16px;height:16px;stroke:currentColor;stroke-width:1}
.interaction-hint{position:absolute;bottom:calc(13px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);color:#5d6479;white-space:nowrap;font:12px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.08em;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.phone-setup{position:absolute;bottom:calc(104px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);z-index:3;width:min(320px,calc(100% - 50px));text-align:center}
.phone-setup[hidden]{display:none}
.phone-setup p{font-size:14px;line-height:1.5;margin:0 0 12px;color:var(--muted)}
.phone-setup button{min-height:44px;padding:10px 17px;border:1px solid #5d6580;background:#07080c;color:var(--ink);font:14px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em;cursor:pointer}
.phone-setup button:disabled{opacity:.65;cursor:wait}
.phone-setup[data-active=true]{bottom:calc(96px + env(safe-area-inset-bottom))}
.phone-setup[data-active=true] p{display:none}
.phone-setup[data-active=true] button{min-height:36px;font-size:12px;padding:8px 13px;border-color:#303442;background:transparent}
@media(max-height:480px){.phone-setup{bottom:90px;right:25px;left:auto;transform:none;width:220px}.phone-setup[data-active=true]{bottom:78px}.phone-setup p{font-size:12px}}
@media(max-width:600px){.masthead{top:calc(27px + env(safe-area-inset-top));left:25px;right:25px}.edition{font-size:12px;letter-spacing:0}.slash{padding:0 5px}.instruments{left:25px;right:25px;bottom:calc(49px + env(safe-area-inset-bottom));gap:12px}.readouts{gap:18px}.readout{min-width:65px}.gauge{width:65px}.controls{gap:16px}#fullscreen{display:none}.sensor-button{position:absolute;bottom:42px;right:0}.wordmark{font-size:17px}.interaction-hint{bottom:calc(18px + env(safe-area-inset-bottom))}}
@media(max-height:480px){.masthead{top:18px}.instruments{bottom:34px}.interaction-hint{bottom:8px}}