:root{--bg:#0a0618;--ink:#e8e6f0;--pink:#ff6ec7;--cyan:#5ff5e0;--butter:#ffe66d;--violet:#8b7bff;--font-pixel:"Press Start 2P", monospace;--font-terminal:"VT323", monospace}*{box-sizing:border-box;margin:0;padding:0}html,body,main{height:100%}body{background:var(--bg);color:var(--ink);font-family:var(--font-terminal);-webkit-font-smoothing:none;overflow:hidden}button{font:inherit;color:inherit;background:0 0;border:none}.cosmos{cursor:crosshair;touch-action:none;-webkit-user-select:none;user-select:none;position:fixed;inset:0}.cosmos canvas{width:100%;height:100%;image-rendering:pixelated;position:absolute;inset:0}.hud{z-index:30;pointer-events:none;justify-content:space-between;align-items:flex-start;gap:16px;padding:18px 20px;display:flex;position:fixed;top:0;left:0;right:0}.logo{font-family:var(--font-pixel);letter-spacing:1px;color:var(--butter);text-shadow:3px 3px #b3008f,6px 6px #0000008c;font-size:15px;line-height:1.7}.logo .blink{color:var(--cyan);animation:1.1s step-end infinite blink}@keyframes blink{50%{opacity:0}}.hud-buttons{pointer-events:auto;flex-wrap:wrap;justify-content:flex-end;gap:10px;display:flex}.pixel-btn{font-family:var(--font-pixel);color:var(--bg);background:var(--cyan);cursor:pointer;box-shadow:0 -3px 0 0 var(--cyan), 0 3px 0 0 var(--cyan), -3px 0 0 0 var(--cyan), 3px 0 0 0 var(--cyan), 5px 5px 0 0 #00000080;padding:11px 12px 9px;font-size:10px;line-height:1}.pixel-btn:nth-child(2){background:var(--pink);box-shadow:0 -3px 0 0 var(--pink), 0 3px 0 0 var(--pink), -3px 0 0 0 var(--pink), 3px 0 0 0 var(--pink), 5px 5px 0 0 #00000080}.pixel-btn:nth-child(3){background:var(--butter);box-shadow:0 -3px 0 0 var(--butter), 0 3px 0 0 var(--butter), -3px 0 0 0 var(--butter), 3px 0 0 0 var(--butter), 5px 5px 0 0 #00000080}.pixel-btn:active{transform:translate(3px,3px)}.hint{z-index:30;text-align:center;letter-spacing:2px;color:var(--violet);text-shadow:2px 2px #0009;pointer-events:none;font-size:22px;position:fixed;bottom:14px;left:0;right:0}.story-layer{z-index:20;overscroll-behavior:contain;touch-action:pan-y;scrollbar-width:none;position:fixed;inset:110px 0 56px;overflow-y:auto}.story-layer::-webkit-scrollbar{display:none}.story-content{position:relative}.story-word{font-family:var(--font-terminal);color:var(--ink);text-shadow:0 0 8px #8b7bff99,2px 2px #000000b3;pointer-events:auto;cursor:pointer;will-change:transform;white-space:pre;line-height:1;position:absolute}.story-word:hover{color:var(--cyan)}.story-word.popped{opacity:0;pointer-events:none;transition:transform .25s ease-in,opacity .25s ease-in;transform:scale(0)rotate(160deg)!important}.story-cursor{font-family:var(--font-terminal);color:var(--butter);pointer-events:none;line-height:1;animation:.7s step-end infinite blink;position:absolute}.scanlines{z-index:40;pointer-events:none;background:repeating-linear-gradient(0deg,#00000029 0 1px,#0000 1px 3px);transition:opacity .6s;position:fixed;inset:0}.cosmos[data-seq=glitch] canvas{animation:90ms steps(2,end) infinite seq-jitter}.cosmos[data-seq=glitch] .hud,.cosmos[data-seq=glitch] .hint{animation:.14s steps(3,end) infinite seq-glitch-text}@keyframes seq-jitter{0%{filter:none;transform:translate(0)}25%{filter:hue-rotate(90deg)saturate(2);transform:translate(-5px,3px)}50%{filter:invert(.08);transform:translate(4px,-3px)}75%{filter:hue-rotate(-60deg);transform:translate(-3px,-2px)}}@keyframes seq-glitch-text{0%{filter:none;transform:translate(2px,-2px)skew(3deg)}33%{filter:invert();transform:translate(-3px,1px)}66%{filter:hue-rotate(120deg);transform:translate(1px,2px)skew(-4deg)}}.cosmos[data-seq=crumble] .hud{pointer-events:none;animation:.9s ease-in .15s forwards seq-fall}.cosmos[data-seq=crumble] .hud .hud-buttons{pointer-events:none}.cosmos[data-seq=crumble] .hint{animation:.8s ease-in forwards seq-fall}.cosmos[data-seq=crumble] .scanlines,.cosmos[data-seq=void] .scanlines{opacity:0}@keyframes seq-fall{to{opacity:.5;transform:translateY(120vh)rotate(8deg)}}.cosmos[data-seq=void] .hud,.cosmos[data-seq=void] .hint{opacity:0}.cosmos[data-seq=void] .hud .hud-buttons{pointer-events:none}.cosmos[data-seq=reveal] .hud,.cosmos[data-seq=reveal] .hint{animation:.7s ease-out .35s both seq-rise}@keyframes seq-rise{0%{opacity:0;transform:translateY(-26px)}to{opacity:1;transform:translateY(0)}}@media (max-width:720px){.hud{flex-direction:column;align-items:stretch}.hud-buttons{justify-content:flex-start}.logo{font-size:12px}.story-layer{top:150px;bottom:48px}.hint{font-size:16px}}
