@font-face{font-family:NeueBit;src:url(/fonts/NeueBit-Regular.woff2) format("woff2");font-display:block}:root{--bg: #000;--text-hi: oklch(.93 0 0);--text-md: oklch(.55 0 0);--text-lo: oklch(.35 0 0);--line-hi: oklch(.75 0 0);--line-md: oklch(.4 0 0);--line-lo: oklch(.22 0 0);--title: 19px;--tracking: .12em}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text-md)}body{font-family:NeueBit,monospace;font-size:18px;letter-spacing:var(--tracking);line-height:1.5;overflow:hidden}#gallery{position:fixed;inset:0;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}#gallery::-webkit-scrollbar{display:none}section{position:relative;height:100vh;height:100dvh;scroll-snap-align:start}section canvas,section svg{position:absolute;inset:0;width:100%;height:100%;display:block}section svg{pointer-events:none}a{color:inherit}.welcome,.outro{display:flex;align-items:center;justify-content:center;text-align:center}.welcome{position:fixed;inset:0;z-index:5;padding:104px 0 64px;background:color-mix(in oklch,var(--bg) 55%,transparent)}.intro-body{position:relative;display:flex;flex-direction:column;align-items:center;max-width:520px;margin:0 36px}.welcome p,.outro p{position:relative;top:-1px;margin:0;color:var(--text-hi);font-size:32px;line-height:38px;letter-spacing:.02em}.welcome p.sub,.outro p.sub{margin-top:12px;color:var(--text-md);font-size:24px;line-height:30px;letter-spacing:.04em}.starts{display:flex;justify-content:center;gap:12px 48px;margin-top:32px}.start-btn{display:inline-flex;flex-direction:column;align-items:stretch;gap:4px;padding:6px 2px;color:var(--text-md);font-size:calc(var(--title) + 3px);letter-spacing:.14em}.start-btn .lbl{display:block;text-align:center}.start-btn .wave{display:block;width:0;min-width:100%;height:22px;overflow:visible}.start-btn .wave path{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round}.start-btn:not(.primary) .wave path{stroke-width:2;shape-rendering:crispEdges}.start-btn.primary,.start-btn:hover,.start-btn:focus-visible{color:var(--text-hi)}.start-btn:focus-visible{outline:1px dotted var(--line-md);outline-offset:4px}#rail{position:fixed;top:0;left:0;width:420px;max-width:100vw;height:100vh;height:100dvh;pointer-events:none;z-index:3}#rail-hit{position:fixed;top:0;left:0;width:56px;height:100%;z-index:4;touch-action:none;cursor:ns-resize}body:not(.started) #rail,body:not(.started) #rail-hit{display:none}#sr-nav{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@media(max-width:640px){.intro-body{margin:0 16px}.welcome p.sub,.outro p.sub{margin-top:10px;font-size:18px;line-height:24px}.starts{margin-top:24px;flex-direction:column;align-items:center;gap:14px}.welcome{padding:72px 0 48px}.welcome p,.outro p{font-size:24px;line-height:30px}body{font-size:16px}#rail{width:100vw}#rail-hit{width:40px}}#storm{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;z-index:1}#gallery{cursor:crosshair}button{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}#sound{position:fixed;right:32px;top:16.5px;z-index:2;display:block;padding:6px;margin:-6px;color:var(--text-lo)}#sound svg{display:block}#sound .tip{position:absolute;right:calc(100% + 6px);top:4px;bottom:-4px;display:flex;align-items:center;color:var(--text-md);white-space:pre;pointer-events:none}#sound:hover .tip,#sound:focus-visible .tip{color:var(--text-hi)}#sound svg{width:44px;height:40px}#prompt svg{width:64px;height:44px}body.sound-on #sound,#sound .drop{color:var(--text-md)}body.sound-on #sound .drop,#sound:hover,#sound:focus-visible{color:var(--text-hi)}body:not(.started) #storm{opacity:0}.welcome{transition:opacity .2s .55s,visibility 0s .75s}.intro-body h1{letter-spacing:.12em;font-size:32px;margin:0 0 12px;color:#fff}.intro-body p{margin-bottom:0;line-height:1}.start-btn{transition:transform .35s cubic-bezier(.7,0,.3,1) .2s,color .15s}body.started .start-btn{transform:scaleX(0)}body.started .welcome{opacity:0;visibility:hidden}.outro{cursor:auto;padding:104px 0 64px}.outro .home{position:relative;top:-1px;display:inline-block;color:var(--text-hi);font-size:32px;line-height:38px;letter-spacing:.02em;text-decoration:none}.outro .home:hover{color:var(--text-md)}@media(max-width:640px){.outro .home{font-size:24px;line-height:30px}}#storm{transition:opacity .4s}#prompt{position:fixed;right:16px;top:76px;z-index:2;display:flex;flex-direction:column;gap:16px;color:var(--text-md);white-space:pre}#prompt button{position:relative;display:block;color:var(--text-md)}#prompt svg{display:block}#prompt .tip{position:absolute;right:calc(100% + 12px);bottom:0;height:24px;display:flex;align-items:center;color:var(--text-md);pointer-events:none}#prompt .echo{color:var(--text-md)}#prompt button:hover .echo,#prompt button:focus-visible .echo,#prompt button[data-state=done] .echo{color:var(--text-hi)}#prompt button:hover,#prompt button:focus-visible,#prompt button[data-state=done]{color:var(--text-hi);outline:none}#prompt button[data-state=done] .tip{color:var(--text-hi)}#prompt[hidden]{display:none}@media(max-width:640px){#prompt{right:0;top:64px}}@media(max-width:640px){:root{--title: 17px}#sound{right:12px;top:4px}}section.inv canvas{filter:invert(1)}body.ui-hidden #rail,body.ui-hidden #rail-hit,body.ui-hidden #sound,body.ui-hidden #prompt,body.ui-hidden .outro .home{visibility:hidden}