*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#140b0b;color:#f9e5ce;font-family:Arial,sans-serif}button,a,input{touch-action:manipulation}button{font:inherit;color:inherit;background:#1c1714;border:1px solid #ad8b5f60;padding:12px 16px;cursor:pointer}button:hover,a:hover{color:#fff;border-color:#edbe7a}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:3px}a{color:#eac49a}canvas#world{display:block;width:100%;height:100%;outline:none}#experience{width:100%;height:100%;position:relative}#loading{position:absolute;inset:0;display:grid;place-content:center;text-align:center;background:#160c0c;font:16px Consolas,monospace;letter-spacing:.18em;z-index:5}#loading span{display:block;letter-spacing:.05em;font-size:11px;margin-top:12px;opacity:.6}#loading[hidden]{display:none}#utility{position:absolute;bottom:18px;left:22px;display:flex;align-items:center;gap:12px}#utility button{background:#100c09aa;border:1px solid #fce3bc35;backdrop-filter:blur(6px);font:10px Consolas,monospace;letter-spacing:.08em;padding:10px 13px;min-height:36px}#utility button:last-child{font-size:19px;padding:4px 10px}#status{position:absolute;right:22px;bottom:23px;font:10px Consolas,monospace;letter-spacing:.1em;text-shadow:0 2px 5px #000;background:#100b07a0;padding:6px 10px;max-width:45%;text-align:right;pointer-events:none}#hint{position:absolute;left:50%;bottom:9%;transform:translateX(-50%);background:#0d0806d9;border:1px solid #ffd79f55;padding:10px 17px;font:12px Consolas,monospace;display:none;text-align:center;max-width:90%;pointer-events:none}#hint.visible{display:block}dialog{width:min(930px,94vw);max-height:90svh;overflow:auto;background:#120d0bee;color:#ffedd6;border:1px solid #a27d55;padding:26px;box-shadow:0 20px 120px #0008}dialog::backdrop{background:#08050490;backdrop-filter:blur(10px)}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:15px}.heading h1,.heading h2{font-size:24px;margin:0}.heading button{background:none;border:none;font:12px Consolas,monospace}dialog p{font-size:15px;line-height:1.6}dialog label{display:flex;align-items:center;gap:20px;margin:20px 0;justify-content:space-between}input[type=range]{accent-color:#f3c486;width:60%;max-width:500px}.actions{display:flex;gap:8px;flex-wrap:wrap}.actions button{font-size:13px}.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:22px 0}.tracks button{text-align:left;min-height:60px;font-size:13px}.tracks button.active{background:#ac7546;color:#fff}.note{font-size:12px!important;color:#c5ae95}.experiences{border-top:1px solid #806a53;padding-top:20px}#backstage img{width:80%;height:auto;opacity:.6;margin:20px 0}#memory-preview{width:100%;max-height:60vh}#memory-download{display:inline-block;margin-top:20px;padding:14px;border:1px solid #cdae81}#memory-download[hidden]{display:none}#fallback{padding:30px 6vw;max-height:100vh;overflow:auto}#fallback>img{max-width:600px;width:70%;height:auto}#fallback audio{width:100%}body.saving #experience{display:none}@media(max-width:700px){#utility{left:10px;bottom:10px;gap:5px}#utility button{font-size:9px;padding:8px}#status{right:10px;bottom:57px;max-width:80%;font-size:9px}.tracks{grid-template-columns:repeat(2,minmax(0,1fr))}dialog{padding:18px}.heading h1,.heading h2{font-size:20px}}
/* Explicit navigation is not a floating player: all music controls stay on the
   raycast 3D console. Persistent 44px targets work without hover or a keyboard. */
canvas#world{touch-action:none}
#utility{bottom:max(18px,env(safe-area-inset-bottom));gap:8px;z-index:2}
#utility button{min-height:44px;font:11px Arial,sans-serif;font-weight:600;letter-spacing:.04em;padding:10px 14px}
#utility #console-open{background:#e2c49a;color:#21150d;border-color:#f3d9b4;box-shadow:0 3px 24px #0005}
#utility #console-open[data-active=true]{background:#c09d70}
#utility kbd{margin-left:9px;font:10px Consolas,monospace;opacity:.6;border:1px solid currentColor;border-radius:3px;padding:2px 4px}
#control-tip{position:absolute;bottom:max(66px,calc(env(safe-area-inset-bottom) + 49px));left:22px;margin:0;padding:10px 13px;color:#fff0d7;background:#160e09e6;border-left:3px solid #d4b478;max-width:calc(100% - 320px);font:700 13px/1.4 Arial,sans-serif;letter-spacing:.035em;pointer-events:none}
body.console-view #control-tip{color:#fff0db}
@media(max-width:700px){#utility{left:10px;right:10px;gap:5px;bottom:max(10px,env(safe-area-inset-bottom))}#utility button{padding:9px 10px;font-size:10px}#utility #console-open{flex:1}#utility kbd{display:none}#control-tip{left:10px;bottom:62px;max-width:calc(100% - 20px);font-size:10px}#status{bottom:87px;right:10px;max-width:90%}#utility button:last-child{min-width:44px}}
@media(pointer:coarse){#utility kbd{display:none}input[type=range]{min-height:44px}dialog button{min-height:44px}}
@media(max-width:350px){#utility button{padding-left:7px;padding-right:7px;font-size:9px}}
/* Safari safe-area/short landscape guardrails; no body scrolling in 3D. */
html,body{overscroll-behavior:none}
#experience{height:100dvh}
#utility{left:max(22px,env(safe-area-inset-left));bottom:calc(18px + env(safe-area-inset-bottom))}
#control-tip{left:max(22px,env(safe-area-inset-left));bottom:calc(66px + env(safe-area-inset-bottom))}
#status{right:max(22px,env(safe-area-inset-right));bottom:calc(23px + env(safe-area-inset-bottom))}
#utility button[hidden]{display:none}
#fallback{max-height:100dvh;padding-bottom:calc(30px + env(safe-area-inset-bottom))}
#loading a{font:12px Arial,sans-serif;letter-spacing:0;margin-top:28px;padding:12px}
@media(max-width:700px),(max-height:500px){
  #utility{left:max(10px,env(safe-area-inset-left));right:max(10px,env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));gap:5px}
  #utility button{font-size:10px;padding:9px 10px}#utility kbd{display:none}
  #utility #console-open{flex:1}
  #control-tip{left:max(10px,env(safe-area-inset-left));bottom:calc(62px + env(safe-area-inset-bottom));font-size:10px;max-width:90%}
  #status{bottom:calc(87px + env(safe-area-inset-bottom));right:max(10px,env(safe-area-inset-right));max-width:90%;font-size:9px}
}
@media(max-height:500px){#control-tip{display:none}#status{bottom:calc(60px + env(safe-area-inset-bottom))}}
/* Two unmistakable, stable destinations; the player itself stays in 3D. */
#utility #console-open,#utility #home{font-size:13px;font-weight:800;min-height:48px;padding:12px 20px;border:1px solid #ffe0aa}
#utility #home{background:#303c39ed;color:#fff}
#utility #home[aria-pressed=true]{box-shadow:inset 0 -3px #f5c77f}
#utility #console-open{background:#f0cd91;color:#1b160e}
#utility #console-open[aria-pressed=true]{background:#f0cd91;box-shadow:inset 0 -3px #fff}
#help [data-command=play]{background:#f0cd91;color:#1b160e;font-size:17px;font-weight:800;min-height:48px;min-width:150px}
.accessible-player{padding:15px 0;border-bottom:1px solid #a27d5555}
.accessible-player label{margin:12px 0}.accessible-player input{min-height:44px;width:70%}
#playback-state{display:block;font-size:15px}#playback-time{font-variant-numeric:tabular-nums}
@media(max-width:700px),(max-height:500px){#utility{flex-wrap:wrap}#utility #console-open,#utility #home{flex:1;font-size:12px;padding:10px 12px}#utility #help-open{font-size:10px}#control-tip{display:none}}
.dj-effects{border-bottom:1px solid #a27d5555;padding:12px 0 18px}.dj-effects h2{font-size:20px}.dj-effects label{gap:12px;margin:8px 0;font-size:14px}.dj-effects input{min-height:44px;width:55%}.dj-effects output{min-width:58px;text-align:right;font-size:12px}.dj-effects button{min-height:44px;font-weight:700}
@media(max-width:700px){#utility #console-open,#utility #home{flex:1 1 40%;order:0}#utility #help-open{order:1;flex:1;min-height:38px}#utility #full{order:1;min-height:38px}#status{bottom:calc(105px + env(safe-area-inset-bottom));font-size:9px}}
/* A small real-club still paints before WebGL; no simulated download percent. */
#loading{position:fixed;overflow:hidden;display:flex;align-items:center;text-align:left;letter-spacing:0;background:#251511;opacity:1;transition:opacity .85s ease;isolation:isolate}
.loading-preview{position:absolute;inset:-1%;width:102%;height:102%;object-fit:cover;object-position:center;filter:blur(3px);opacity:.8;z-index:-2}
#loading:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#160e0de8 0%,#160e0db0 38%,#160e0d15 82%),linear-gradient(0deg,#160e0d90,transparent 55%);z-index:-1}
.loading-card{width:min(560px,88vw);margin-left:clamp(24px,7vw,140px);padding:30px 0 64px}
#loading .loading-eyebrow{color:#e4c39d;font:11px Arial,sans-serif;letter-spacing:.24em;margin:0 0 26px}
#loading h1{font:900 clamp(40px,5.5vw,80px)/.98 Arial,sans-serif;letter-spacing:-.055em;color:#fff1dd;margin:0 0 35px}
#loading-stage{font:14px Arial,sans-serif;line-height:1.5;min-height:42px;margin:0 0 14px;color:#f4dfc4}
#loading-progress{display:block;appearance:none;-webkit-appearance:none;border:0;width:100%;height:4px;border-radius:2px;overflow:hidden;background:#fff2d026;accent-color:#ffd49b}
#loading-progress::-webkit-progress-bar{background:#fff2d026}#loading-progress::-webkit-progress-value{background:#ffd49b;transition:width .6s ease}#loading-progress::-moz-progress-bar{background:#ffd49b}
.loading-meta{display:flex;justify-content:space-between;gap:15px;margin-top:14px}
#loading .loading-meta span{display:inline;font:10px Arial,sans-serif;letter-spacing:.1em;margin:0;color:#f3d9b7;opacity:1}
#loading #loading-note{font:13px/1.6 Arial,sans-serif;color:#d5bfa9;max-width:390px;margin:25px 0 8px}
#loading a{display:inline-flex;align-items:center;min-height:44px;padding:10px 0;margin:0;color:#ffdda9;font:13px Arial,sans-serif;text-underline-offset:5px}
#loading.is-ready{opacity:0;pointer-events:none}
#legal-links{position:fixed;right:max(18px,env(safe-area-inset-right));bottom:env(safe-area-inset-bottom);z-index:8;display:flex;align-items:center;gap:3px;background:#170f0bd9;border-radius:4px;font:11px Arial,sans-serif;color:#e2d5c7}
#legal-links a{display:inline-flex;align-items:center;min-height:44px;padding:8px;color:#e2d5c7;text-decoration:none}#legal-links a:hover{text-decoration:underline;color:white}
#status{bottom:calc(48px + env(safe-area-inset-bottom))}
#fallback{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
@media(max-width:700px){#utility{bottom:calc(49px + env(safe-area-inset-bottom))}#legal-links{right:max(10px,env(safe-area-inset-right))}#status{display:none}.loading-card{margin:0 7vw;padding-bottom:48px}#loading:after{background:linear-gradient(90deg,#160e0dd9,#160e0d55),linear-gradient(0deg,#160e0d90,transparent)}.loading-preview{object-position:59% center}#loading h1{font-size:clamp(42px,12vw,72px)}}
@media(max-height:500px){.loading-card{padding:12px 0 38px;width:min(520px,80vw)}#loading h1{font-size:38px;margin-bottom:14px}#loading .loading-eyebrow{margin-bottom:12px}#loading-stage{min-height:0;margin-bottom:8px}#loading #loading-note{margin-top:12px}#loading .loading-meta{margin-top:8px}#status{display:none}}
@media(prefers-reduced-motion:reduce){#loading,#loading-progress::-webkit-progress-value{transition:none}.loading-preview{filter:blur(2px)}}
#crowd-status{display:block;margin:12px 0}
#help>a{display:inline-flex;align-items:center;min-height:44px}
#utility #full{min-width:44px}
.channel-links{margin:22px 0;padding:18px 0;border-top:1px solid #a27d5555}.channel-links h2{font-size:20px;margin:0}.channel-links p{font-size:13px}.channel-links nav{display:flex;gap:10px;flex-wrap:wrap}.channel-links a{display:inline-flex;align-items:center;min-height:44px;padding:10px 16px;border:1px solid #cdae8180;text-decoration:none}
