:root{--g:#39ff14;--bg:#050a06;--p:0}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--bg)}
body{color:var(--g);font-family:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;overflow-x:hidden}
#rain{position:fixed;inset:0;width:100%;height:100%;z-index:0}
#logo{position:fixed;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
#logo img{width:min(140vmin,1400px);opacity:.09;filter:drop-shadow(0 0 30px rgba(57,255,20,.35));will-change:transform}
#scan{position:fixed;inset:0;z-index:3;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
#scan::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.75))}
#hud{position:fixed;left:14px;bottom:12px;z-index:4;font-size:11px;opacity:.6;letter-spacing:.15em}
#track{position:relative;height:1300vh;z-index:2}
.stage{position:sticky;top:0;height:100vh;height:100svh;display:grid;place-items:center;padding:6vw;text-align:center}
#q{font-size:clamp(2rem,8vw,6.5rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;max-width:14ch;text-shadow:0 0 18px rgba(57,255,20,.55)}
#q span[data-ch]{display:inline-block;opacity:0;transform:translateY(.4em) scale(1.6);filter:blur(8px);transition:opacity .35s,transform .45s cubic-bezier(.2,.9,.2,1.3),filter .35s}
#q span[data-ch].on{opacity:1;transform:none;filter:none}
#q span.sp{width:.3em}
.hint{position:absolute;bottom:8vh;font-size:12px;letter-spacing:.4em;animation:pulse 1.6s infinite}
@keyframes pulse{50%{opacity:.2}}
.aside{position:absolute;top:12vh;font-size:clamp(.75rem,2.4vw,1rem);letter-spacing:.2em;opacity:0;transition:opacity .4s}
.aside.on{opacity:.7}
body.glitch #q,body.glitch #logo{animation:jit .18s steps(2) infinite}
@keyframes jit{0%{transform:translate(3px,-2px);text-shadow:-4px 0 #ff0040,4px 0 #00ffe1}50%{transform:translate(-4px,2px) skewX(8deg)}100%{transform:translate(0)}}
#end{position:relative;z-index:5;min-height:100vh;min-height:100svh;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4vh;padding:8vh 6vw}
#eye{width:min(60vmin,420px);aspect-ratio:2/1;background:#000;border:3px solid var(--g);border-radius:50%/50%;clip-path:ellipse(50% 0% at 50% 50%);transition:clip-path 1.2s cubic-bezier(.7,0,.2,1);position:relative;overflow:hidden;box-shadow:0 0 40px rgba(57,255,20,.5),inset 0 0 40px rgba(57,255,20,.25)}
#eye.open{clip-path:ellipse(50% 50% at 50% 50%)}
#iris{position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;margin:-23% 0 0 -23%;border-radius:50%;background:radial-gradient(circle,#0b2a06 0 30%,var(--g) 31% 60%,#1a7a08 61% 100%);transition:transform .08s linear}
#pupil{position:absolute;left:50%;top:10%;width:16%;height:80%;margin-left:-8%;background:#000;border-radius:50%}
#term{font-size:clamp(.72rem,2.6vw,.95rem);line-height:1.6;white-space:pre-wrap;max-width:62ch;width:100%;min-height:14em}
#rewind{background:transparent;color:var(--g);border:1px solid var(--g);padding:.8em 1.6em;font:inherit;letter-spacing:.2em;cursor:pointer}
#rewind:hover{background:var(--g);color:var(--bg)}
body.crash #track{filter:invert(1) hue-rotate(180deg)}
@media (prefers-reduced-motion:reduce){
 #q span[data-ch]{transition:opacity .6s;transform:none;filter:none}
 .hint{animation:none}
 #eye{transition:none}
 body.glitch #q,body.glitch #logo{animation:none}
}
#q .w{display:inline-block;white-space:nowrap}
.prompt::after{content:"█";animation:blink 1s steps(1) infinite;margin-left:.2em}
.prompt:empty::after{content:""}
@keyframes blink{50%{opacity:0}}
.choice{background:transparent;color:var(--g);border:1px solid var(--g);font:inherit;padding:.2em .9em;margin:0 .4em;cursor:pointer}
@media (prefers-reduced-motion:reduce){.prompt::after{animation:none}}

/* oracle */
.oracle{display:flex;flex-wrap:wrap;gap:.5em;align-items:center;max-width:62ch;width:100%;font-size:clamp(.8rem,2.6vw,.95rem)}
.oracle label{white-space:nowrap}
.oracle input{flex:1 1 12em;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--g);color:var(--g);font:inherit;font-size:16px;padding:.3em 0;outline:none;caret-color:var(--g)}
.oracle button{background:transparent;color:var(--g);border:1px solid var(--g);font:inherit;padding:.3em 1em;cursor:pointer}
/* transition into the eye, scrubbed by --x (0..1) */
:root{--x:0}
#track .stage{filter:blur(calc(var(--x)*6px)) saturate(calc(1 + var(--x)));opacity:calc(1 - var(--x)*.9)}
#end{box-shadow:0 -40vh 40vh -10vh var(--bg)}
#end::before{content:"";position:absolute;left:0;right:0;top:calc((1 - var(--x))*100%);height:3px;background:var(--g);box-shadow:0 0 24px 6px rgba(57,255,20,.6),-6px 0 0 #ff0040,6px 0 0 #00ffe1;opacity:calc((1 - var(--x))*1.2);pointer-events:none;mix-blend-mode:screen}
#end::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(57,255,20,.07) 0 2px,transparent 2px 4px);opacity:calc(1 - var(--x))}
#eye{transform:scale(.6);filter:blur(10px);opacity:.3;transition:clip-path 1.4s cubic-bezier(.7,0,.2,1),transform 1.4s cubic-bezier(.2,.9,.2,1),filter 1.2s,opacity 1s}
#eye.open{transform:none;filter:none;opacity:1}
@media (prefers-reduced-motion:reduce){#track .stage{filter:none}#end::before,#end::after{display:none}#eye{transform:none;filter:none;opacity:1;transition:none}}

/* detailed eye */
#eyewrap{position:relative;display:grid;place-items:center;width:min(78vmin,560px);aspect-ratio:1.6/1}
#ring{position:absolute;width:115%;left:-7.5%;top:50%;transform:translateY(-50%);aspect-ratio:1;fill:var(--g);font-size:7px;letter-spacing:2px;opacity:.45;animation:spin 40s linear infinite;filter:drop-shadow(0 0 3px var(--g))}
#ring{height:auto}
@keyframes spin{to{transform:translateY(-50%) rotate(360deg)}}
#eye{background:radial-gradient(ellipse at center,#031a03 0,#000 70%)}
#eye::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(57,255,20,.06) 0 1px,transparent 1px 3px),radial-gradient(ellipse at 10% 50%,rgba(57,255,20,.18),transparent 40%),radial-gradient(ellipse at 90% 50%,rgba(57,255,20,.18),transparent 40%);pointer-events:none}
#iris{background:
 radial-gradient(circle,transparent 0 28%,rgba(0,0,0,.55) 29% 31%,transparent 32% 58%,rgba(0,0,0,.7) 60% 62%,transparent 63%),
 repeating-conic-gradient(from 0deg,rgba(0,0,0,.35) 0 2deg,transparent 2deg 5deg),
 repeating-radial-gradient(circle,transparent 0 6px,rgba(5,40,5,.5) 6px 7px),
 radial-gradient(circle,#0b2a06 0 26%,#7dff5a 30%,var(--g) 42%,#1a7a08 72%,#062b02 100%);
 box-shadow:0 0 30px rgba(57,255,20,.6),inset 0 0 20px #000;animation:glow 4s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 55px rgba(57,255,20,.9),inset 0 0 14px #000;filter:brightness(1.15)}}
#pupil{transition:transform .5s cubic-bezier(.2,.9,.2,1);transform:scaleX(var(--dil,1));box-shadow:0 0 12px #000}
.glint{position:absolute;left:62%;top:22%;width:12%;height:9%;border-radius:50%;background:rgba(230,255,220,.85);filter:blur(1px)}
#lid{position:absolute;inset:0;background:#000;transform:scaleY(0);transform-origin:50% 50%;border-radius:50%}
#eye.open #lid{animation:blink 7s infinite 2s}
@keyframes blink{0%,94%,100%{transform:scaleY(0)}96.5%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){#ring,#iris,#eye.open #lid{animation:none}#pupil{transition:none}}
.aside.sig{font-size:clamp(.82rem,2.6vw,1.1rem);text-shadow:0 0 8px rgba(57,255,20,.55)}
.aside.sig.on{opacity:.85}