:root {
  --bg: #000; --panel: #07090c; --line: #1c232c; --ink: #e6eef8; --bone2: #b4c0ce; --mid: #8a99ab; --ice: #8fd3ff;
  --display: "Doto", ui-monospace, Menlo, monospace;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --out: cubic-bezier(.22, 1, .36, 1);
  --gx: max(32px, env(safe-area-inset-left)); --bar: calc(46px + env(safe-area-inset-bottom));
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15px/1.55 var(--mono); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--ice); color: #000; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font: 600 15px/1 var(--mono); letter-spacing: .02em; color: var(--ink); }
.brand img { display: block; }
:focus-visible { outline: 1px solid var(--ice); outline-offset: 3px; }
.k { color: var(--bone2); } .s { color: var(--ink); } .n { color: var(--ice); } .p { color: var(--mid); }
@media (max-width: 640px) { :root { --gx: max(16px, env(safe-area-inset-left)); } }