@font-face{font-family:"Lexend";src:url(fonts/lexend-latin-wght-normal.woff2) format("woff2");font-weight:100 900;font-display:block}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:block}
@font-face{font-family:"Instrument Serif";src:url(fonts/instrument-serif-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:block}
@font-face{font-family:"Caveat";src:url(fonts/caveat-latin-wght-normal.woff2) format("woff2");font-weight:400 700;font-display:block}
:root{--ink:#0E1726;--ink2:#16233A;--line:#26364F;--paper:#F4EFE6;--muted:#A3AEC2;--faint:#5D6B83;--iris:#9D8CFF;--hl:#FFD23F;--ok:#3DDC84;--bad:#FF5468}
html,body{margin:0;height:100%;background:#070b12;overflow:hidden}
body[data-bg="green"]{background:#00B140}
body[data-bg="transparent"],html:has(body[data-bg="transparent"]){background:transparent}
#stage{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--ink)}
#stage[data-bg="green"]{background:#00B140}
#stage[data-bg="transparent"]{background:transparent}
#bg{position:absolute;inset:0;pointer-events:none}
#bg .rules{position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0 62px,rgba(244,239,230,.03) 62px 64px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 85%);mask-image:linear-gradient(90deg,#000 0,#000 60%,transparent 85%)}
#bg .glow{position:absolute;inset:0;background:radial-gradient(ellipse 55% 55% at 40% 55%,rgba(157,140,255,.075),transparent 70%),radial-gradient(ellipse 40% 50% at 88% 50%,rgba(255,210,63,.035),transparent 70%)}
#bg .margin{position:absolute;left:128px;top:0;bottom:0;width:2px;background:#FF5468;opacity:.22;transform-origin:top}
#bg .grain{position:absolute;inset:0;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#bg .vig{position:absolute;inset:0;background:radial-gradient(ellipse 85% 85% at 50% 50%,transparent 60%,rgba(3,6,12,.45) 100%)}
#stage[data-bg="green"] #bg,#stage[data-bg="transparent"] #bg{display:none}
#svg{position:absolute;left:0;top:0;width:1920px;height:1080px;overflow:visible}
svg text{font-family:"Lexend",system-ui,sans-serif;font-variant-numeric:tabular-nums}
.serif{font-family:"Instrument Serif",Georgia,serif !important}
.pen{font-family:"Caveat",cursive !important}
.lbl{font-size:18px;font-weight:560;letter-spacing:.16em;fill:#5D6B83;text-transform:uppercase}
#hud{position:fixed;z-index:10;left:12px;top:10px;display:flex;gap:14px;align-items:center;font:500 13px/1 "Lexend",sans-serif;color:#fff;background:rgba(0,0,0,.72);padding:8px 12px;border-radius:6px;opacity:0;transition:opacity .25s}
#hud.on{opacity:1}
#hud a{color:#fff}
#hud .hint{opacity:.75}