@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}.agents{margin-top:32px;color:var(--text-md);text-decoration:none}.agents:hover,.agents:focus-visible{color:var(--text-hi);outline:none}#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}}#gallery.gliding section:not(.glide-to):not(.glide-from)>:is(canvas,svg){visibility:hidden}#gallery section.glide-from{z-index:1}#storm{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;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;bottom:24px;z-index:7;display:block;padding:6px;margin:-6px;color:var(--text-lo)}#sound svg{display:block}#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{text-transform:uppercase;font-size:32px;line-height:1;margin:0 0 12px;color:#fff;letter-spacing:.12em}.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;overflow:visible}#prompt .fly{color:var(--text-hi)}#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[hidden]{display:none}@media(max-width:640px){#prompt{right:3px;top:64px}}@media(max-width:640px){:root{--title: 17px}#sound{right:16px;bottom:12px}}#grid-btn{position:fixed;right:32px;top:16.5px;z-index:7;display:block;padding:6px;margin:-6px;color:var(--text-md)}#grid-btn svg{display:block;width:44px;height:40px}#grid-btn:hover,#grid-btn:focus-visible,#grid-btn[aria-expanded=true]{color:var(--text-hi);outline:none}@media(max-width:640px){#grid-btn{right:16px;top:4px}}#grid{--gap-y: 96px;--gap-x: 72px;position:fixed;inset:0;z-index:6;overflow-y:auto;padding:var(--gap-y) var(--gap-x);background:var(--bg);scrollbar-width:none}#grid::-webkit-scrollbar{display:none}#grid[hidden]{display:none}#grid ol{list-style:none;width:100%;max-width:1920px;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--gap-y) var(--gap-x)}#grid li button{display:block;width:100%}#grid .frame{position:relative;display:block;aspect-ratio:16 / 10;overflow:hidden;outline:1px solid var(--line-lo);cursor:zoom-in}#grid .frame canvas{position:absolute;left:0;top:0;width:100%;height:100%;display:block;will-change:transform}#grid .frame.inv canvas{filter:invert(1)}#grid li button:focus-visible{outline:none}#grid li button:hover .frame,#grid li button:focus-visible .frame{outline-color:var(--line-hi)}#grid li button[aria-current] .frame{outline:1px solid var(--line-hi);outline-offset:4px}@media(max-width:640px){#grid{--gap-y: 48px;--gap-x: 24px}#grid ol{grid-template-columns:repeat(2,1fr)}}section.inv canvas{filter:invert(1)}body.ui-hidden #rail,body.ui-hidden #rail-hit,body.ui-hidden #sound,body.ui-hidden #grid-btn,body.ui-hidden #prompt,body.ui-hidden .outro .home{visibility:hidden}#toast{position:fixed;left:50%;top:24px;z-index:8;transform:translate(-50%);pointer-events:none;color:var(--text-hi);white-space:nowrap;visibility:hidden}#toast.on{visibility:visible}#toast>span{display:block;background:#000;font-size:24px;line-height:38px;letter-spacing:.04em;padding:11px calc(20px - .04em) 7px 20px}@media(max-width:640px){#toast>span{font-size:24px;line-height:30px;padding:7px calc(16px - .04em) 5px 16px}}#announce{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
