*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:#111;font-family:Arial,Helvetica,sans-serif}canvas{width:100%;height:100%;display:block;background:#fff}
#grain,#vignette{position:fixed;inset:0;pointer-events:none;z-index:5}#grain{opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:g .15s steps(2) infinite}@keyframes g{50%{transform:translate(1%,-1%)}}
#vignette{box-shadow:inset 0 0 180px rgba(0,0,0,.23)}
#intro{position:fixed;inset:0;z-index:30;background:#f8f8f6;display:grid;place-items:center}.introInner{width:min(720px,86vw)}.code{font:10px Consolas,monospace;letter-spacing:.35em;color:#777}.introInner h1{font-size:clamp(64px,11vw,160px);line-height:.78;letter-spacing:-.08em;margin:34px 0}.introInner p{font-size:16px;line-height:1.75;color:#666}.introInner button{margin-top:25px;border:1px solid #111;background:#111;color:#fff;padding:16px 23px;letter-spacing:.18em;cursor:pointer}.introInner small{display:block;margin-top:18px;color:#999;font:9px Consolas,monospace;letter-spacing:.13em}
#hud{position:fixed;inset:0;z-index:10;pointer-events:none;display:none;padding:22px;font:10px Consolas,monospace;letter-spacing:.18em}.top,.bottom{display:flex;justify-content:space-between}.top{color:#555}.bottom{position:absolute;bottom:22px;left:22px;right:22px;align-items:end}.count{text-align:right}.count small{display:block;color:#777;margin-bottom:6px}.count b{font-size:18px;font-weight:400;color:#111}
#reticle{position:absolute;left:50%;top:50%;width:18px;height:18px;transform:translate(-50%,-50%)}#reticle:before,#reticle:after{content:"";position:absolute;background:#111;opacity:.42}#reticle:before{width:8px;height:1px;left:5px;top:8px}#reticle:after{width:1px;height:8px;left:8px;top:5px}
#prompt{position:absolute;left:50%;top:57%;transform:translateX(-50%);background:rgba(255,255,255,.72);padding:7px 10px;opacity:0;transition:.2s}
#whisper{position:absolute;left:50%;top:24%;transform:translateX(-50%);font-family:Georgia,serif;font-size:clamp(18px,2.2vw,31px);letter-spacing:.05em;text-align:center;opacity:0;transition:opacity 1s;max-width:70vw}
#ending{position:fixed;inset:0;z-index:50;background:#050505;color:#eee;display:none;place-items:center;text-align:center}#wake{opacity:0}.date{font:10px Consolas,monospace;letter-spacing:.3em;color:#888}#wake h2{font:300 clamp(38px,6vw,80px) Georgia,serif;margin:25px}#wake p{color:#888}#last{display:none;font:11px Consolas,monospace;letter-spacing:.3em}
@media(max-width:600px){.bottom{font-size:8px}.count b{font-size:13px}}