:root{color-scheme:dark;background:#080808;color:#f3f2ef;font-family:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;min-width:240px;min-height:100%;background:#080808}
body{min-height:100vh;min-height:100dvh}
main{width:100%;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:32px 0}
h1{margin:0;width:min(88vw,1840px);font-size:inherit;line-height:1}
.headline{appearance:none;border:0;background:transparent;color:inherit;padding:0;margin:0;width:100%;display:flex;align-items:center;justify-content:center;gap:4%;cursor:default;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.headline:focus-visible{outline:1px solid #666;outline-offset:24px;border-radius:2px}
.word{display:block;overflow:visible;flex:none;width:calc(var(--share)*96%);height:auto}
.letter{pointer-events:all;--delay:calc(var(--letter-index)*70ms)}
.hit{fill:transparent;stroke:none}
.ink{fill:currentColor;fill-opacity:1;stroke:currentColor;stroke-width:1.1px;stroke-opacity:0;vector-effect:non-scaling-stroke;transition:fill-opacity .42s ease,stroke-opacity .42s ease}
.active .ink{fill-opacity:0;stroke-opacity:.9;transition:fill-opacity .2s ease,stroke-opacity .2s ease}
.spectrum,.trace{pointer-events:none;opacity:0}
.spectrum{stroke:none}
.trace{fill:none;stroke-width:1.35px;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.intro .ink{animation:white-resolve 4000ms ease var(--delay) both}
.intro .spectrum{animation:prism-flow 4000ms ease var(--delay) both}
.intro .trace{animation:color-trace 4000ms cubic-bezier(.22,.65,.3,1) var(--delay) both}
.intro .stop-a{animation:aurora-a 4500ms ease both}
.intro .stop-b{animation:aurora-b 4500ms ease both}
.intro .stop-c{animation:aurora-c 4500ms ease both}
.intro .stop-d{animation:aurora-d 4500ms ease both}
.intro .stop-e{animation:aurora-e 4500ms ease both}
footer{position:fixed;left:0;right:0;bottom:max(26px,env(safe-area-inset-bottom));text-align:center;color:#72716d;font-size:10px;font-weight:400;letter-spacing:.26em;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes white-resolve{0%,64%{opacity:0}84%{opacity:.3}100%{opacity:1}}
@keyframes prism-flow{
 0%,12%{opacity:0;filter:hue-rotate(var(--hue)) brightness(1.05) drop-shadow(0 0 0 transparent)}
 28%{opacity:1;filter:hue-rotate(var(--hue)) brightness(1.1) drop-shadow(0 0 14px var(--accent))}
 50%{opacity:1;filter:hue-rotate(calc(var(--hue) + 80deg)) brightness(1.12) drop-shadow(0 0 24px var(--accent))}
 68%{opacity:1;filter:hue-rotate(calc(var(--hue) + 160deg)) brightness(1.15) drop-shadow(0 0 16px var(--accent))}
 85%{opacity:.6;filter:hue-rotate(calc(var(--hue) + 210deg)) brightness(1.35) drop-shadow(0 0 8px var(--accent))}
 100%{opacity:0;filter:hue-rotate(calc(var(--hue) + 230deg)) brightness(1.5) drop-shadow(0 0 0 transparent)}
}
@keyframes color-trace{0%{opacity:0;stroke-dashoffset:1}8%{opacity:1}34%{stroke-dashoffset:0;opacity:1}65%{stroke-dashoffset:0;opacity:.8}100%{stroke-dashoffset:0;opacity:0}}
@keyframes aurora-a{0%{stop-color:#32e9ff}35%{stop-color:#ff4bb8}70%{stop-color:#ffbb48}100%{stop-color:#b0ffb9}}
@keyframes aurora-b{0%{stop-color:#5471ff}35%{stop-color:#a349ff}70%{stop-color:#ff6a45}100%{stop-color:#44e9ee}}
@keyframes aurora-c{0%{stop-color:#c953ff}35%{stop-color:#41dcff}70%{stop-color:#f8ed72}100%{stop-color:#9d7dff}}
@keyframes aurora-d{0%{stop-color:#ff6aab}35%{stop-color:#7affb5}70%{stop-color:#ff73b8}100%{stop-color:#fdba6c}}
@keyframes aurora-e{0%{stop-color:#ffcb5e}35%{stop-color:#e6ff63}70%{stop-color:#9980ff}100%{stop-color:#67f3cb}}
@media(max-width:640px) and (orientation:portrait){
 h1{width:86vw}
 .headline{flex-direction:column;gap:22px}
 .word{width:calc(var(--mobile-width)*100%)}
 footer{font-size:9px;bottom:max(24px,env(safe-area-inset-bottom));letter-spacing:.22em}
}
@media(max-height:420px) and (orientation:landscape){h1{width:82vw}footer{bottom:14px;font-size:9px}}
@media(prefers-reduced-motion:reduce){
 .headline *{animation:none!important}
 .ink{transition:none}
 .intro .ink{opacity:1}
 .spectrum,.trace{display:none}
 .active .ink{fill-opacity:1;stroke-opacity:0}
}