:root{color-scheme:dark;--ink:#010105;--light:#eafffb;--aqua:#64fff0}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:var(--ink)}
body{color:var(--light);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;touch-action:none;cursor:crosshair}
#mosaic,.veil,.grain{position:fixed;inset:0;width:100%;height:100%}
#mosaic{display:block;background:var(--ink);touch-action:none}
.veil{pointer-events:none;background:radial-gradient(circle at 50% 48%,transparent 0 42%,rgba(0,0,3,.16) 65%,rgba(0,0,3,.86) 110%);box-shadow:inset 0 0 12vmax rgba(0,0,0,.36)}
.grain{pointer-events:none;opacity:.055;mix-blend-mode:soft-light;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E")}
header{position:fixed;z-index:3;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;padding:max(1rem,env(safe-area-inset-top)) max(1rem,env(safe-area-inset-right)) 0 max(1rem,env(safe-area-inset-left));pointer-events:none}
header a,button{pointer-events:auto}
header a{display:grid;place-items:center;width:2.15rem;aspect-ratio:1;color:var(--aqua);text-decoration:none;border:1px solid rgba(100,255,240,.45);transform:rotate(45deg);font-size:.7rem;transition:opacity 1.4s ease,box-shadow .5s ease}
header a span{transform:rotate(-45deg)}
button{pointer-events:auto;border:1px solid rgba(100,255,240,.22);border-radius:999px;padding:.56rem .8rem;background:rgba(1,2,8,.32);color:rgba(232,255,251,.48);font:inherit;font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;backdrop-filter:blur(12px);transition:opacity 1.2s ease,color .3s,border-color .3s}
button.active{color:var(--aqua);border-color:rgba(100,255,240,.56)}button:disabled{display:none}
aside{position:fixed;z-index:3;left:max(1rem,env(safe-area-inset-left));bottom:max(1rem,env(safe-area-inset-bottom));pointer-events:none;text-transform:uppercase;letter-spacing:.2em;font-size:.58rem;color:rgba(232,255,251,.44);transition:opacity 1.5s ease,transform 1.5s ease}
aside p{margin:.35rem 0}#chapter{color:rgba(100,255,240,.84)}
body:not(.awake) header a,body:not(.awake) button{opacity:.12}body:not(.awake) aside{opacity:0;transform:translateY(.45rem)}
.pulse .veil{animation:rupture .9s cubic-bezier(.2,.8,.2,1)}
.failure{display:none;position:fixed;inset:0;place-items:center;padding:2rem;text-align:center;color:var(--aqua);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase}.failed .failure{display:grid}.failed header,.failed aside{display:none}
@keyframes rupture{0%{filter:hue-rotate(0);opacity:1}35%{filter:hue-rotate(110deg);opacity:.42}100%{filter:hue-rotate(0);opacity:1}}
@media(max-width:720px){header{padding-top:max(.8rem,env(safe-area-inset-top))}header a{width:1.85rem}button{font-size:.5rem;padding:.5rem .68rem}.instruction{display:none}.grain{opacity:.035}.veil{background:radial-gradient(circle at 50% 46%,transparent 0 38%,rgba(0,0,3,.12) 66%,rgba(0,0,3,.8) 115%)}}
@media(prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}