: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:clip}
#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:6000vh;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}

/* the eye profiles you */
#eyelog{position:fixed;z-index:6;right:14px;bottom:34px;width:min(46ch,calc(100vw - 28px));font-size:12px;line-height:1.5;background:rgba(2,8,3,.78);border:1px solid rgba(57,255,20,.35);box-shadow:0 0 18px rgba(57,255,20,.18);padding:.6em .8em;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);transition:opacity .5s,transform .5s;pointer-events:none}
#eyelog.away{opacity:0;transform:translateY(12px)}
#eyelog .eh{font-size:10px;letter-spacing:.2em;opacity:.65;margin-bottom:.3em;display:flex;align-items:center;gap:.5em}
#eyelog .eh i{width:7px;height:7px;border-radius:50%;background:var(--g);box-shadow:0 0 6px var(--g);animation:pulse 1.4s infinite}
#eyelog pre{white-space:pre-wrap;font:inherit;min-height:1.5em;text-shadow:0 0 6px rgba(57,255,20,.4)}
#eyelog pre div{animation:fadein .3s}
#eyelog pre div:not(:last-child){opacity:.55}
#eyelog .ef{font-size:9px;opacity:.38;margin-top:.35em;letter-spacing:.08em}
#eyelog.flick{animation:flick .6s steps(2) 2}
@keyframes flick{0%{opacity:1}25%{opacity:.25;filter:blur(1px)}50%{opacity:.9;transform:translateX(2px)}75%{opacity:.15}100%{opacity:1}}
@keyframes fadein{from{opacity:0}}
@media (max-width:600px){#eyelog{left:10px;right:10px;width:auto;bottom:calc(30px + env(safe-area-inset-bottom));font-size:11px}}
@media (prefers-reduced-motion:reduce){#eyelog,#eyelog.flick,#eyelog .eh i{animation:none}}
.forget{font-size:10px;opacity:.35;letter-spacing:.08em}
#eyelog.away.peek{opacity:1;transform:translateY(calc(-1 * (var(--h0,100svh) - 150px)))}
#end{overflow-x:clip}html{overflow-x:hidden}

/* stable layout: nothing grows the document while text types */
html{overflow-anchor:none}
#track{height:calc(var(--h0,100svh) * 40)}
.stage{height:var(--h0,100svh)}
#end{height:var(--h0,100svh);min-height:0;overflow:hidden;justify-content:flex-start;gap:1.5vh;padding:3vh 6vw calc(1.5vh + env(safe-area-inset-bottom))}
#eyewrap{flex:0 0 auto;width:min(70vmin,500px,calc(var(--h0,100svh) * .42))}
#term{flex:1 1 0;min-height:0;overflow-y:auto;overflow-anchor:none;overscroll-behavior:contain;scrollbar-width:none;-webkit-mask-image:linear-gradient(transparent,#000 2.2em);mask-image:linear-gradient(transparent,#000 2.2em);padding-top:2em}
#term::-webkit-scrollbar{display:none}
#slot{flex:0 0 auto;height:6.6em;width:100%;max-width:62ch;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.7em}
#slot .oracle{flex:0 0 auto}
#rewind.off{visibility:hidden;opacity:0}
#rewind{transition:opacity .4s}
.oracle input::placeholder{color:rgba(57,255,20,.45);animation:pulse 1.6s infinite}
body.typing .oracle{position:fixed;left:0;right:0;bottom:var(--kb,0px);z-index:20;max-width:none;padding:.8em 4vw calc(.8em + env(safe-area-inset-bottom));background:#020803;border-top:1px solid rgba(57,255,20,.5);box-shadow:0 -10px 30px rgba(0,0,0,.8)}
body.typing #eyelog{opacity:0!important}
#eyelog pre{height:6em;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
@media (prefers-reduced-motion:reduce){.oracle input::placeholder{animation:none}}

/* the eye, darker */
.aside .wd{transition:color .6s}
.aside .wd.sw{color:#c8ffb8;text-shadow:0 0 10px rgba(255,0,64,.35)}
#ghost{position:fixed;left:0;top:0;z-index:30;width:12px;height:18px;pointer-events:none;opacity:.28;clip-path:polygon(0 0,0 100%,30% 75%,55% 100%,70% 92%,48% 68%,85% 68%);background:var(--g);filter:blur(.3px);will-change:transform}
#eyelog pre div.jev{color:#ff3b5c;text-shadow:0 0 6px rgba(255,40,80,.5)}
body[data-act="3"] #eyelog{border-color:rgba(255,59,92,.4)}
body.turned #scan{background:repeating-linear-gradient(0deg,rgba(0,0,0,.4) 0 1px,transparent 1px 3px)}
#dump{position:fixed;inset:0;z-index:50;background:#000;color:#9cff8a;overflow:hidden;padding:4vh 4vw;font-size:clamp(10px,1.6vw,13px);line-height:1.45}
#dump pre{white-space:pre-wrap;word-break:break-all;font:inherit}
body.broke #rain,body.broke #logo{visibility:hidden}
@media (prefers-reduced-motion:no-preference){body[data-act="3"] #q{animation:jit .2s steps(2) 1}}
#q.re span[data-ch]{transition:none}

/* chaos by depth */
:root{--c:0}
#chaos{position:fixed;inset:0;z-index:4;pointer-events:none;overflow:hidden}
.frag{position:absolute;left:0;top:0;opacity:0;font-size:clamp(11px,2vw,18px);letter-spacing:.1em;color:var(--g);text-shadow:1px 0 rgba(255,0,64,.35),-1px 0 rgba(0,255,225,.3);white-space:nowrap;will-change:transform,opacity}
.frag:nth-child(7n){color:#b8c7b0;font-size:clamp(14px,3vw,28px)}
.frag:nth-child(5n){font-size:clamp(20px,5vw,48px)}
.stage{will-change:transform}
.qghost{position:absolute;inset:0;display:grid;place-items:center;padding:6vw;text-align:center;pointer-events:none;font-size:clamp(2rem,8vw,6.5rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;opacity:0;will-change:transform,opacity}
.qghost.g0{color:#ff0040;mix-blend-mode:screen}.qghost.g1{color:#00ffe1;mix-blend-mode:screen}
.eyeghost{position:absolute;inset:0;opacity:0;pointer-events:none;mix-blend-mode:screen;filter:hue-rotate(140deg);will-change:transform,opacity}
.eyeghost.e1{filter:hue-rotate(260deg)}
.eyeghost #ring,.eyeghost svg{display:none}
#eyewrap{will-change:translate}
.termghost{position:absolute;left:6vw;right:6vw;top:calc(3vh + min(70vmin,500px,calc(var(--h0,100svh)*.42))/1.6 + 1.5vh);max-width:62ch;margin:0 auto;height:calc(var(--h0,100svh)*.4);overflow:hidden;font-size:clamp(.72rem,2.6vw,.95rem);line-height:1.6;white-space:pre-wrap;color:#ff3b5c;opacity:0;pointer-events:none;mix-blend-mode:screen;display:flex;flex-direction:column;justify-content:flex-end}
body.rgbsplit .stage,body.rgbsplit #eyewrap{filter:drop-shadow(3px 0 rgba(255,0,64,.4)) drop-shadow(-3px 0 rgba(0,255,225,.35))}
body.quantum #term{text-shadow:3px 0 rgba(255,0,64,.6),-3px 0 rgba(0,255,225,.5)}
body.quantum #eye{box-shadow:0 0 50px rgba(57,255,20,.45),inset 0 0 40px rgba(57,255,20,.3)}
#scan{opacity:calc(.8 + var(--c)*.2)}
#rain{filter:hue-rotate(calc(var(--c)*-20deg)) saturate(calc(1 - var(--c)*.35)) brightness(calc(1 - var(--c)*.25))}
/* reduced motion: static distortion only */
body.chaos-rm #q{text-shadow:calc(2px + var(--c)*8px) 0 rgba(255,0,64,.6),calc(-2px - var(--c)*8px) 0 rgba(0,255,225,.5)}
body.chaos-rm .stage{transform:skewX(calc(var(--c)*-6deg))}
body.chaos-rm.chaos-hi #term{text-shadow:2px 0 rgba(255,0,64,.6),-2px 0 rgba(0,255,225,.5)}
@keyframes trapjolt{0%{transform:translate(0,0)}20%{transform:translate(-14px,8px) skewX(-6deg)}40%{transform:translate(12px,-10px) skewX(5deg)}60%{transform:translate(-8px,-4px)}80%{transform:translate(6px,6px)}100%{transform:none}}
body.trapjolt #end{animation:trapjolt .28s steps(2) 2}

#oslot{flex:0 0 auto;width:100%;max-width:62ch;display:flex;justify-content:center}
#oslot:empty{display:none}

#reveal{position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:8vw;background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.55),rgba(0,0,0,.94));opacity:0;transition:opacity .5s,transform .7s;pointer-events:none}
#reveal.on{opacity:1}
#reveal.out{opacity:0;transform:scale(.35) translateY(30vh);filter:blur(4px)}
#reveal p{max-width:22ch;text-align:center;font-size:clamp(1.4rem,5.2vw,3.2rem);line-height:1.25;color:#ff2a4d;text-shadow:3px 0 rgba(0,255,225,.6),-3px 0 rgba(255,0,64,.8),0 0 24px rgba(255,0,64,.6);letter-spacing:.02em}
body.revealing #eye{transform:scale(1.25)!important;transition:transform .4s}
body.revealing #pupil{transform:scale(1.8)}
@media (prefers-reduced-motion:reduce){#reveal,#reveal.out{transition:opacity .3s;transform:none;filter:none}}

body.frozen *,body.frozen *::before,body.frozen *::after{animation-play-state:paused!important;transition:none!important}
#halt{position:fixed;inset:0;z-index:45;display:grid;place-items:center;padding:6vw;text-align:center;background:rgba(0,0,0,.92);transition:opacity .5s}
#halt.out{opacity:0}
#halt h2{font-size:clamp(2rem,8vw,6.5rem);line-height:1.05;font-weight:800;letter-spacing:-.02em;max-width:14ch;color:var(--g);text-shadow:0 0 18px rgba(57,255,20,.55);margin:0}
#halt .w{display:inline-block;white-space:nowrap}
#halt span.sp{display:inline-block;width:.3em}
#halt 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!important}
#halt span[data-ch].on{opacity:1;transform:none;filter:none}

#icorow{display:flex;flex-wrap:wrap;justify-content:center;gap:18px 28px;max-width:62ch;margin:1.4em auto 0;padding:0 6vw;pointer-events:none;position:relative;z-index:21}
.ico{display:block;width:26px;height:26px;opacity:.22;background:#39ff14;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;transition:none}

.ico{pointer-events:auto;cursor:crosshair}.ico:hover{opacity:.6}.ico.out,.ico.cut{pointer-events:none;opacity:0}.ico.hot{opacity:.55;filter:drop-shadow(2px 0 rgba(255,0,64,.7)) drop-shadow(-2px 0 rgba(0,255,225,.6))}
@keyframes icf{0%,100%{translate:0 0}25%{translate:9px -7px}50%{translate:-6px -12px}75%{translate:-10px 4px}}
@media (prefers-reduced-motion:reduce){.ico{animation:none;transition:none}}

/* the eye, rendered. js/eyegl.js adds .eye.gl and a canvas when webgl is available; the css eye above is the fallback.
   class selectors so chaos.js's id-stripped .eyeghost clones keep the same box */
#eye.gl,.eye.gl{width:96%;aspect-ratio:2/1;position:relative;background:none;border:0;border-radius:0;box-shadow:none;clip-path:none;overflow:visible}
#eye.gl::before{display:none}
.eye.gl>div,.eye.gl .glint{display:none}
.eye.gl .eyecv{position:absolute;inset:0;width:100%;height:100%;display:block}
#eye.gl{transform:scale(.72);filter:blur(3px);opacity:.6;transition:transform 1.2s steps(7),filter 1.2s steps(7),opacity .9s steps(5)}
#eye.gl.open{transform:none;filter:none;opacity:1}
body.quantum #eye.gl{box-shadow:none}
.eyeghost{display:grid;place-items:center}
@media (prefers-reduced-motion:reduce){#eye.gl{transform:none;filter:none;opacity:1;transition:none}}

/* the dossier: the file it kept on you. js/dossier.js. a tab slides out from under the eye, the card is drawn on a canvas in-browser */
#ring{pointer-events:none} /* the ring's box reaches below the eye and would swallow taps on the file tab */
.dossier{display:flex;flex-direction:column;align-items:flex-start;gap:.25em;background:rgba(2,8,3,.85);color:var(--g);border:1px solid rgba(57,255,20,.55);border-left:4px solid var(--g);font:inherit;font-size:clamp(.72rem,2.4vw,.9rem);text-align:left;padding:.7em 1.1em .7em .9em;cursor:pointer;position:relative;box-shadow:0 0 18px rgba(57,255,20,.18);opacity:0;transform:translateY(-38px) scaleY(.2);transform-origin:50% 0;transition:opacity .5s steps(5),transform .6s steps(7)}
.dossier.on{opacity:1;transform:none}
.dossier:hover,.dossier:focus-visible{background:rgba(57,255,20,.1);outline:none}
.dossier .dtag{font-size:.72em;letter-spacing:.22em;opacity:.7;display:flex;align-items:center;gap:.6em}
.dossier .dtag i{width:7px;height:7px;background:#ff2a4d;box-shadow:0 0 6px rgba(255,42,77,.7);animation:pulse 1.2s infinite}
.dossier .dcta{letter-spacing:.06em}
.dossier .dsub{font-size:.7em;opacity:.45;letter-spacing:.08em}
.dossier::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.25) 0 1px,transparent 1px 3px)}
#dossier{position:fixed;inset:0;z-index:44;display:grid;place-items:center;padding:4vw;background:rgba(0,0,0,.9);opacity:0;transition:opacity .3s steps(3)}
#dossier.on{opacity:1}
.dcard{width:min(92vw,560px);max-height:92svh;display:flex;flex-direction:column;gap:.7em;color:var(--g);font-size:clamp(.72rem,2.4vw,.9rem)}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:1em;font-size:.75em;letter-spacing:.2em;opacity:.8}
.dfmt{display:flex;gap:.4em}
.dfmt button{background:transparent;color:var(--g);border:1px solid rgba(57,255,20,.4);font:inherit;padding:.2em .6em;cursor:pointer;letter-spacing:.1em;opacity:.6}
.dfmt button.on{opacity:1;background:rgba(57,255,20,.15);border-color:var(--g)}
.dimg{position:relative;display:grid;place-items:center;min-height:30vh;border:1px solid rgba(57,255,20,.35);box-shadow:0 0 30px rgba(57,255,20,.18);background:#020803}
.dimg img{display:block;width:100%;height:auto;max-height:62svh;object-fit:contain;opacity:0;transition:opacity .4s steps(4)}
.dimg img.on{opacity:1}
.dwait{position:absolute;letter-spacing:.3em;opacity:.6;animation:pulse 1.2s infinite}
.dnote{font-size:.85em;letter-spacing:.05em;opacity:.75}
.dact{display:flex;flex-wrap:wrap;gap:.6em}
.dact button{background:transparent;color:var(--g);border:1px solid var(--g);font:inherit;padding:.5em 1.1em;cursor:pointer;letter-spacing:.15em}
.dact button:hover{background:var(--g);color:var(--bg)}
.dact .dburn{border-color:rgba(255,42,77,.6);color:#ff6b84;margin-left:auto}
.dact .dburn:hover{background:#ff2a4d;color:#000}
@media (prefers-reduced-motion:reduce){.dossier,#dossier,.dimg img{transition:none}.dossier .dtag i,.dwait{animation:none}}
.nudge{opacity:.32;font-size:.78em;letter-spacing:.08em;margin-left:.4em;animation:nblink 1.4s steps(1) infinite}
@keyframes nblink{50%{opacity:0}}
.nudge:empty{display:none}
@media (prefers-reduced-motion:reduce){.nudge{animation:none}}
.oracle .logged{display:block;flex-basis:100%;opacity:.35;font-size:.7em;letter-spacing:.06em;margin-top:.35em}

/* floating log, styled like omarchy's default terminal (ghostty, tokyo night, jetbrainsmono nerd font) */
#eyelog{font-family:"JetBrainsMono Nerd Font","JetBrainsMono NF","JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:rgba(26,27,38,.94);border:1px solid #414868;border-radius:0;box-shadow:0 6px 24px rgba(0,0,0,.55);color:#c0caf5;padding:.55em .9em .6em}
#eyelog .eh{color:#7aa2f7;opacity:.85;border-bottom:1px solid #292e42;padding-bottom:.3em}
#eyelog .eh i{background:#9ece6a;box-shadow:0 0 6px #9ece6a}
#eyelog pre{text-shadow:none;color:#c0caf5}
#eyelog pre div:not(:last-child){opacity:.5;color:#a9b1d6}
#eyelog .ef{color:#565f89;opacity:1}
@media (max-width:600px){#term{font-size:clamp(.84rem,3.4vw,1rem)}}