:root{color-scheme:dark;--void:#000;--ink:#f3eef2;--dim:#8a8190;--faint:#4b4452;--mag:#ff2fa8;--line:rgba(243,238,242,.14);
--serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;--mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;--pad:clamp(22px,6vw,96px)}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;background:var(--void)}
body{background:transparent;color:var(--ink);font:400 16px/1.6 var(--serif);overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.nogl{background:radial-gradient(circle at 70% 45%,#2a0420 0,#000 45%)}
::selection{background:var(--mag);color:#000}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--mag);outline-offset:5px}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.grain{position:fixed;inset:0;z-index:5;pointer-events:none;opacity:.09;mix-blend-mode:screen;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
header{position:fixed;z-index:10;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:26px var(--pad);font:12px var(--mono);color:var(--dim);mix-blend-mode:difference}
header a:hover,.go:hover{color:var(--mag)}
.brand{font-size:14px;color:var(--ink);letter-spacing:.02em}.brand i{color:var(--mag);font-style:normal}
main,footer{position:relative;z-index:2}
section{min-height:100svh;padding:120px var(--pad);display:flex;flex-direction:column;justify-content:center}
.hero{justify-content:flex-end;padding-bottom:12vh}
h1{font-weight:400;font-size:clamp(46px,8.4vw,142px);line-height:.96;letter-spacing:-.045em;max-width:9.5em;text-shadow:0 0 40px #000}
.sub{margin:28px 0 36px;max-width:26ch;color:var(--dim);font-size:17px}
.go{align-self:flex-start;font:13px var(--mono);letter-spacing:.06em;padding:14px 0;border-bottom:1px solid var(--mag);transition:color .3s,padding .3s}
.go:hover{padding-right:34px}
.veil,.seal{align-items:center;text-align:center}
.big{font-size:clamp(34px,6.4vw,104px);line-height:1.04;letter-spacing:-.04em;text-shadow:0 0 50px #000,0 0 12px #000}
.cipher{margin:36px 0 18px;min-height:1.6em;font:13px var(--mono);letter-spacing:.32em;color:var(--ink);text-shadow:0 0 12px #000}
#decode,.d button,.note button{font:12px var(--mono);color:var(--mag);border-bottom:1px solid currentColor;padding-bottom:3px}
.trace{padding-top:160px;justify-content:flex-start}
h2{font-weight:400;font-size:clamp(38px,5.6vw,86px);line-height:1;letter-spacing:-.04em;max-width:11em;margin-bottom:64px}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line);background:rgba(0,0,0,.55);backdrop-filter:blur(14px)}
.d{min-height:190px;padding:24px;display:flex;flex-direction:column;gap:10px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.wide{grid-column:span 2}
dt{font:12px var(--mono);color:var(--mag)}
dd{margin:auto 0;font-size:clamp(22px,2.6vw,38px);line-height:1.1;letter-spacing:-.03em;overflow-wrap:anywhere}
.d small{font:12px/1.6 var(--mono);color:var(--dim)}
#sig-out{display:grid;gap:6px;margin:8px 0;font:12px var(--mono)}
#sig-out div{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line);padding-bottom:5px}
#sig-out span{color:var(--dim)}
.note{margin-top:26px;font:12px/1.8 var(--mono);color:var(--dim)}.note button{margin-left:12px}
.hint{margin-top:34px;font:13px var(--mono);color:var(--dim)}
kbd{font:inherit;color:var(--mag);border:1px solid var(--faint);padding:2px 8px}
footer{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:30px var(--pad);border-top:1px solid var(--line);font:12px var(--mono);color:var(--faint);background:#000}
#boot{position:fixed;inset:0;z-index:50;background:#000;display:flex;flex-direction:column;justify-content:center;padding:var(--pad);transition:opacity 1s,visibility 1s}
#boot.off{opacity:0;visibility:hidden}
#boot-log{font:14px/2 var(--mono);color:var(--ink);white-space:pre-wrap}
#boot-log b{color:var(--mag);font-weight:400}
.skip{position:absolute;bottom:28px;left:var(--pad);font:11px var(--mono);color:var(--faint)}
#term{position:fixed;z-index:60;left:var(--pad);right:var(--pad);bottom:var(--pad);max-width:720px;max-height:60svh;display:flex;flex-direction:column;background:rgba(0,0,0,.88);backdrop-filter:blur(18px);border:1px solid var(--mag);box-shadow:0 0 60px rgba(255,47,168,.25);font:13px/1.8 var(--mono)}
#term[hidden]{display:none}
#tlog{padding:18px 20px 4px;overflow-y:auto;white-space:pre-wrap;color:var(--ink)}
#tlog .u{color:var(--dim)}
#term label{display:flex;gap:10px;padding:8px 20px 16px}#term span{color:var(--mag)}
#tin{flex:1;background:none;border:0;color:var(--ink);font:inherit;outline:0}
@media(max-width:860px){.grid{grid-template-columns:1fr 1fr}.wide{grid-column:span 2}}
@media(max-width:560px){.grid{grid-template-columns:1fr}.wide{grid-column:auto}.d{min-height:140px}header a:last-child{display:none}.hero{padding-bottom:9vh}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
#sig-out b{font-weight:400}