*{box-sizing:border-box}html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#020309;overscroll-behavior:none}body{position:fixed;inset:0;-webkit-user-select:none;user-select:none;touch-action:none}canvas{display:block;width:100%;height:100%;touch-action:none;outline:none;cursor:crosshair}canvas:active{cursor:grabbing}button{position:fixed;bottom:max(18px,env(safe-area-inset-bottom));width:42px;height:42px;padding:11px;border:1px solid #ffffff18;border-radius:50%;background:#080b1670;color:#e4f8ff80;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;transition:opacity .7s,color .2s,background .2s;opacity:.45;z-index:2}button:hover,button:focus-visible{color:#fff;opacity:1;background:#263045a0;outline:1px solid #a1ddff80}button svg{width:100%;height:100%;display:block;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}button[data-on='true']{color:#a2ffe6}#audio{left:max(18px,env(safe-area-inset-left))}#evolve{left:calc(max(18px,env(safe-area-inset-left)) + 53px)}#full{right:max(18px,env(safe-area-inset-right))}body.quiet button{opacity:0}body.quiet button:focus-visible,body.quiet button:hover{opacity:1}
#sound-gate{position:fixed;inset:0;z-index:5;display:grid;place-items:center;background:radial-gradient(circle at center,#03071800 0 16%,#02030a26 43%,#02030980 100%);transition:opacity .55s ease,visibility .55s ease;touch-action:manipulation}#sound-gate.leaving{opacity:0;visibility:hidden;pointer-events:none}#sound-start{position:relative;inset:auto;width:clamp(92px,18vw,136px);height:clamp(92px,18vw,136px);padding:13px;opacity:1;color:#eaffff;border:1px solid #b8fff68c;background:radial-gradient(circle at 35% 25%,#44f5e64f,#672bff3d 54%,#070913a8 76%);box-shadow:0 0 0 1px #7fffe718 inset,0 0 32px #55ffe84d,0 0 110px #7b43ff4a;backdrop-filter:blur(20px) saturate(1.6);-webkit-backdrop-filter:blur(20px) saturate(1.6);animation:gate-float 2.5s ease-in-out infinite}body.quiet #sound-start,#sound-start:hover,#sound-start:focus-visible{opacity:1;color:#fff;background:radial-gradient(circle at 35% 25%,#65fff078,#7542ff61 54%,#080b17c7 76%);box-shadow:0 0 0 1px #fff4 inset,0 0 45px #55ffe87a,0 0 150px #7b43ff69}#sound-start:focus-visible{outline:2px solid #fff;outline-offset:7px}#sound-start:active{transform:scale(.94)}#sound-start svg{stroke-width:2}.gate-ring{stroke:#dfffff;stroke-dasharray:7 5;animation:gate-spin 9s linear infinite;transform-origin:center}.gate-wave{stroke:#80ffe8;filter:drop-shadow(0 0 4px #4effdc)}.gate-play{fill:#fff;stroke:#fff;filter:drop-shadow(0 0 7px #8bfff1)}
#tutorial{position:fixed;z-index:4;left:50%;top:max(58px,9vh);width:min(1100px,92vw);pointer-events:none;opacity:0;visibility:hidden;transform:translate(-50%,-12px) scale(.98);transition:opacity .38s ease,transform .55s cubic-bezier(.16,1,.3,1),visibility .38s;text-align:center;color:#fff}#tutorial.visible{opacity:1;visibility:visible;transform:translate(-50%,0) scale(1)}#tutorial.done{opacity:0;visibility:hidden;transform:translate(-50%,-18px) scale(1.025)}#tutorial-text{font-family:Arial Black,Arial Rounded MT Bold,ui-rounded,system-ui,sans-serif;font-size:clamp(25px,4.4vw,66px);font-weight:950;line-height:.98;letter-spacing:-.055em;text-wrap:balance;text-shadow:0 2px 0 #0006,0 5px 20px #000b,0 0 44px #c9fff759;-webkit-text-stroke:clamp(.15px,.04vw,.65px) #fff}
@keyframes gate-float{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}@keyframes gate-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){button{transition:none}#sound-start,.gate-ring{animation:none}#sound-gate,#tutorial{transition:none}}

#sound-status{position:absolute;top:calc(50% + 90px);left:50%;transform:translateX(-50%);width:min(360px,86vw);margin:0;color:#fff;font:600 16px/1.5 system-ui,sans-serif;text-align:center;text-wrap:balance;text-shadow:0 2px 12px #000}#sound-status:empty{display:none}#sound-start:disabled{cursor:wait}

#mode{left:calc(max(18px,env(safe-area-inset-left)) + 106px);opacity:.85}body.quiet #mode{opacity:.4}#mode[data-on='true']{color:#ff9bf3;border-color:#ff7add66;background:#40134399}

#membrane{position:fixed;inset:0;pointer-events:none;z-index:1}#mode[data-world='2']{color:#9fffe0;border-color:#71e7ca66;background:#163c3b99}

#constellation{position:fixed;inset:0;pointer-events:none;z-index:1}#previous-world,#next-world{opacity:.8;width:42px;height:42px;color:#e8f6ff;background:#0b152dcc}#previous-world{left:calc(50% - 48px)}#next-world{left:calc(50% + 6px)}body.quiet #previous-world,body.quiet #next-world{opacity:.42}@media(max-width:420px){#previous-world{left:calc(50% - 32px)}#next-world{left:calc(50% + 16px)}}

#chrome{position:fixed;inset:0;pointer-events:none;z-index:1}

#ink{position:fixed;inset:0;pointer-events:none;z-index:1}



#bubbles{position:fixed;inset:0;pointer-events:none;z-index:1}

#racer{position:fixed;inset:0;pointer-events:none;z-index:1}

#bloom{position:fixed;inset:0;pointer-events:none;z-index:1}

#selectors{position:fixed;left:50%;transform:translateX(-50%);bottom:max(18px,env(safe-area-inset-bottom));z-index:3;display:flex;align-items:center;gap:24px;width:min(620px,calc(100vw - 270px))}
#genre-nav,#visual-nav{display:grid;grid-template-columns:36px minmax(0,1fr) 36px;align-items:center;gap:6px;flex:1;min-width:0}
#selectors .selector-label{grid-column:1/-1;text-align:center;font:500 14px/1.3 system-ui,-apple-system,sans-serif;color:#b3c0d1;text-shadow:0 2px 10px #000;margin-bottom:2px;pointer-events:none}
#selectors button{position:static;inset:auto;flex:0 0 36px;width:36px;height:36px;padding:9px;opacity:.8;color:#e8f6ff;background:#0b152dcc}
#genre-name,#visual-nav span{flex:1;min-width:0;text-align:center;font:600 14px/1.3 system-ui,-apple-system,sans-serif;color:#e5eef7;text-shadow:0 2px 10px #000;pointer-events:none}
body.quiet #selectors{opacity:.6}#selectors:hover,#selectors:focus-within{opacity:1}
@media(max-width:850px){#selectors{width:calc(100vw - 24px);gap:12px;bottom:calc(max(18px,env(safe-area-inset-bottom)) + 54px)}}
@media(max-width:480px){#selectors{gap:8px;width:calc(100vw - 16px)}#genre-nav,#visual-nav{gap:2px;grid-template-columns:30px minmax(0,1fr) 30px}#selectors button{flex-basis:30px;width:30px;height:40px;padding:7px}#genre-name,#visual-nav span{font-size:14px;overflow-wrap:anywhere}}

@media(pointer:coarse),(max-width:640px){#selectors{bottom:max(12px,env(safe-area-inset-bottom))}#full{bottom:auto;top:max(18px,env(safe-area-inset-top));left:max(18px,env(safe-area-inset-left));right:auto}#audio{left:auto;right:max(18px,env(safe-area-inset-right));top:max(18px,env(safe-area-inset-top));bottom:auto;width:44px;height:44px;opacity:.85}body.quiet #audio{opacity:.6}#evolve{display:none}}

body[data-tutorial='music'] #selectors,body[data-tutorial='visual'] #selectors{opacity:1}
body[data-tutorial='music'] #genre-nav button,body[data-tutorial='visual'] #visual-nav button{opacity:1;color:#b7fff0;border-color:#75f5d8;background:#16433f;box-shadow:0 0 0 2px #73f4d52e,0 0 22px #4ff3cf88;animation:tutorial-glow 1.6s ease-in-out infinite}
@keyframes tutorial-glow{0%,100%{box-shadow:0 0 0 2px #73f4d52e,0 0 15px #4ff3cf66}50%{box-shadow:0 0 0 4px #73f4d540,0 0 28px #4ff3cfa0}}
@media(prefers-reduced-motion:reduce){body[data-tutorial] #selectors button{animation:none}}