/* One full-screen GPU light simulation. Photons are traced through a real glass prism every frame; nothing here is a drawn rainbow. */
:root{--ink:#f3f1ec;--muted:#9a9ea6;--faint:#5d616b;--edge:rgba(255,255,255,.14);--serif:"Instrument Serif",Georgia,serif;--sans:Manrope,system-ui,sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{height:100%;margin:0;background:#000;color:var(--ink);overflow:hidden;font:400 15px/1.5 var(--sans)}
canvas{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas:active{cursor:grabbing}
canvas.over{z-index:3;mix-blend-mode:screen;pointer-events:none}
.title{display:none}
#next{position:fixed;inset:0;z-index:2;visibility:hidden;background:rgba(0,0,0,.62);display:flex;padding:calc(56px + env(safe-area-inset-top)) 20px calc(120px + env(safe-area-inset-bottom));
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
#next .inner{width:100%;max-width:52rem;margin:auto;display:flex;flex-direction:column;gap:18px}
#next .eyebrow{font:500 .7rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
#next h2{font:400 clamp(2rem,6.2vw,3.3rem)/1.02 var(--serif);margin:0;text-wrap:balance}
#next h2 em{font-style:italic;background:linear-gradient(90deg,#ff5a4e,#ff9f43,#ffe066,#5be08a,#4fa8ff,#a67cff);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
#next svg{display:block;width:100%;height:auto}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media (max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
.stat{border-top:1px solid var(--edge);padding-top:8px;display:flex;flex-direction:column}.stat b{font:400 1.8rem/1 var(--serif)}.stat span{font-size:.78rem;color:var(--muted)}
.ui{z-index:5}
#next [data-lit]{opacity:0}
#next .w[data-lit]{display:inline-block;filter:blur(7px);transform:translateY(.12em)}
#next .lit{opacity:1;transition:opacity .5s ease-out}
#next .w.lit{filter:blur(0);transform:none;transition:opacity .45s ease-out,filter .7s ease-out,transform .7s cubic-bezier(.2,.8,.2,1);animation:flash .9s ease-out}
@keyframes flash{0%{text-shadow:0 0 18px #fff,0 0 2px #fff}100%{text-shadow:0 0 0 transparent}}
#next path[data-lit]{opacity:1;stroke-dashoffset:var(--len)}
#next path.lit{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.3,.7,.2,1)}
#next circle[data-lit]{transform-box:fill-box;transform-origin:center;transform:scale(0)}
#next circle.lit{transform:scale(1);transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s}
#next .stat.lit b{animation:flash .9s ease-out}
.title{position:fixed;left:0;right:0;bottom:calc(92px + env(safe-area-inset-bottom));text-align:center;pointer-events:none}
.title h1{font:400 clamp(2.2rem,6.5vw,4.2rem)/1 var(--serif);margin:0;letter-spacing:-.01em}
.title h1 em{font-style:italic}
.ui{position:fixed;left:0;right:0;bottom:0;padding:10px 16px calc(14px + env(safe-area-inset-bottom));display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}
.ui button{font:500 .8rem var(--sans);color:var(--ink);background:rgba(255,255,255,.05);border:1px solid var(--edge);border-radius:999px;padding:.45rem .8rem;cursor:pointer}
.ui button.on{background:#fffdf7;color:#000;border-color:transparent}
.ui span{font:400 .72rem var(--mono);color:var(--faint);letter-spacing:.06em}
.tag{position:fixed;top:calc(14px + env(safe-area-inset-top));left:18px;font:500 .66rem var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
#err{position:fixed;inset:45% 20px auto;text-align:center;color:var(--muted)}