/* shared by /api and /docs: same acid + black + Anybody + Martian Mono as the site */
@font-face { font-family: "Anybody"; src: url(/fonts/anybody.woff2) format("woff2"); font-weight: 100 900; font-stretch: 50% 150%; font-display: block; }
@font-face { font-family: "Martian Mono"; src: url(/fonts/martian.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }
:root { --acid: #d4ff00; --dim: #809800; --mid: #a9cc00; --line: #2a3300; --line2: #1d2400; --disp: "Anybody", "Arial Narrow", sans-serif; --mono: "Martian Mono", ui-monospace, Menlo, monospace; --out: cubic-bezier(.22, 1, .36, 1); }
* { box-sizing: border-box; }
html { background: #000; color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: #000; color: var(--acid); font: 400 13px/1.55 var(--mono); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
::selection { background: var(--acid); color: #000; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
.top { display: flex; align-items: center; gap: 18px; height: 64px; padding: 0 max(24px, env(safe-area-inset-right)) 0 max(24px, env(safe-area-inset-left)); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; background: #000; }
.top .id { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font: 900 25px/1 var(--disp); font-stretch: 56%; letter-spacing: .04em; text-transform: uppercase; }
.top .id svg { height: 22px; width: auto; display: block; }
.top nav { display: flex; gap: 4px; margin-left: 14px; }
.top nav a { display: inline-grid; place-items: center; height: 44px; padding: 0 16px; text-decoration: none; font: 900 20px/1 var(--disp); font-stretch: 62%; letter-spacing: .05em; text-transform: uppercase; transition: font-stretch 200ms var(--out); }
.top nav a:hover, .top nav a:focus-visible { font-stretch: 110%; outline: none; }
.top nav a[aria-current] { background: var(--acid); color: #000; }
.top .sp { margin-left: auto; font: 500 12px/1 var(--mono); letter-spacing: .06em; color: var(--dim); }
.btn { appearance: none; -webkit-appearance: none; border: 0; border-radius: 0; margin: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; background: var(--acid); color: #000; text-decoration: none; font: 900 23px/1 var(--disp); font-stretch: 58%; letter-spacing: .04em; text-transform: uppercase; transition: font-stretch 200ms var(--out), background 140ms var(--out), color 140ms var(--out); }
.btn:hover, .btn:focus-visible { font-stretch: 110%; outline: none; }
.btn:focus-visible { outline: 2px solid var(--acid); outline-offset: 3px; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: none; color: var(--acid); box-shadow: inset 0 0 0 2px var(--acid); }
.btn.ghost:hover, .btn.ghost:focus-visible { background: var(--acid); color: #000; }
.btn.sm { height: 38px; padding: 0 14px; font-size: 19px; }
pre, code { font-family: var(--mono); }
pre { margin: 0; padding: 16px 18px; overflow-x: auto; background: #090c00; border: 1px solid var(--line); font: 400 12px/1.66 var(--mono); font-stretch: 81%; color: var(--mid); white-space: pre; scrollbar-width: thin; scrollbar-color: #3a4600 transparent; }
pre b { font-weight: 700; color: var(--acid); }
pre u { text-decoration: none; color: #6f8200; }
pre i { font-style: normal; color: #e8ff6a; }
pre em { font-style: normal; color: var(--acid); opacity: .65; }
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 760px) { .top { gap: 10px; height: 58px; padding: 0 16px; } .top .id { font-size: 22px; } .top nav { margin-left: 0; } .top nav a { padding: 0 10px; font-size: 18px; } .top .sp { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
