:root{
  --ink:#dbe9f7;
  --dim:#7d93a8;
  --cy:#9fd8ff;
  --bg:#04070b;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);overflow:hidden}
body{font-family:"SF Mono",Menlo,Consolas,ui-monospace,monospace;color:var(--ink);cursor:crosshair}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block}

#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none}
.t{font-family:"SF Mono",Menlo,Consolas,ui-monospace,monospace;fill:#dbe9f7;letter-spacing:.14em}
.tiny{font-size:10px;fill:#8ea5ba;letter-spacing:.18em}
.small{font-size:12px;letter-spacing:.22em}
.dim{fill:#6d8499}
.big{font-size:26px;letter-spacing:.06em;fill:#eaf5ff}
#hud{transition:opacity .35s}

#hint{
  position:fixed;left:50%;bottom:18px;transform:translateX(-50%);
  font-size:10px;letter-spacing:.24em;color:#5d7488;opacity:0;
  transition:opacity .6s;pointer-events:none;white-space:nowrap
}
#hint.show{opacity:.85}