/* Just a DEV · base: reset, type roles, focus, scrollbars, utilities (DEV-1; contract: web/DESIGN.md §3). Fonts come from
   /assets/fonts/fonts.css (--font-sans/-display Space Grotesk + Noto SC, --font-mono JetBrains Mono, --font-seg DSEG7). */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--grain) var(--bg); scrollbar-color: var(--line-2) transparent; }
body {
  margin: 0; min-height: 100vh; background: var(--grain) var(--bg); color: var(--text);
  font: 400 var(--fs-body)/1.55 var(--font-sans); font-synthesis: none;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; }
a { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
table { border-collapse: collapse; }
hr { border: 0; border-top: 1px dashed var(--line-2); margin: 0; }
sub { font-size: .62em; vertical-align: -.12em; line-height: 0; }
[hidden] { display: none !important; }
::selection { background: var(--lcd); color: var(--lcd-ink); }

/* focus: a 2 px ink ring, offset 3 px (never orange: the orange is the action, not the focus) */
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.focus-inset:focus-visible { outline-offset: -2px; }

/* scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--text-4); }
.scroll-x { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scroll-x::-webkit-scrollbar { display: none; }

/* type roles: 11 sizes, one role each (DESIGN.md §3). Chinese headings are Noto SC 600 (Latin inside falls to Space Grotesk
   700 via the stack); never rotate, skew or filter text. Labels: mono caps 11.5 (11 phone) is the floor, --text-3 or darker */
.t-display { font: 600 var(--fs-display)/1.02 var(--font-sans); letter-spacing: -.045em; }
.t-h1 { font: 600 var(--fs-h1)/1.06 var(--font-sans); letter-spacing: -.035em; }
.t-h2 { font: 600 var(--fs-h2)/1.12 var(--font-sans); letter-spacing: -.025em; }
.t-h2--d { font-weight: 700; }
.t-h3 { font: 600 var(--fs-h3)/1.2 var(--font-sans); letter-spacing: -.015em; }
.t-title { font: 600 var(--fs-title)/1.35 var(--font-sans); letter-spacing: -.01em; }
.t-lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--text-2); max-width: 56ch; }
.t-fig { font: 700 var(--fs-fig)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -.035em; }
.t-fig-m { font: 600 var(--fs-fig-m)/1.05 var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.t-body { font-size: var(--fs-body); line-height: 1.55; }
.t-small, .t-cap { font-size: var(--fs-small); line-height: 1.45; }
.t-data { font: 500 var(--fs-data)/1.45 var(--font-mono); font-variant-numeric: tabular-nums slashed-zero; letter-spacing: -.01em; }
.t-status { font-size: var(--fs-status); line-height: 1.4; color: var(--text-2); }
/* silk-screen label: mono caps printed on the plastic (MODEL DEV-1 · LOOT · BNB). .kicker is the v1 name of the same thing.
   Chinese silk is set larger and tighter (CJK caps do not exist; 11.5 px Han is below comfortable reading size) */
.lab, .kicker { font: 500 var(--fs-label)/1.25 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--text-3); }
:lang(zh) .lab, :lang(zh) .kicker { font-size: max(12px, var(--fs-label)); letter-spacing: .06em; }
.kicker--y::before, .lab--key::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 9px; vertical-align: 1px; border-radius: 1px; background: var(--key); box-shadow: inset 0 -1px 0 var(--key-d); }
.muted { color: var(--text-2); } .dim { color: var(--text-3); }
.num { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.up { color: var(--up); } .down { color: var(--down); }
.y, .accent { color: var(--accent-text); }
.nowrap { white-space: nowrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

kbd {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 5px;
  background: var(--cap), var(--key-n); color: var(--text-2); box-shadow: inset 0 1px 0 var(--hi), 0 2px 0 var(--key-n-sh), 0 3px 4px -2px rgba(40, 36, 28, .25);
  font: 600 11.5px/1 var(--font-mono);
}
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: fixed; left: 16px; top: -56px; z-index: 200; padding: 12px 16px; border-radius: var(--r-key);
  background: var(--key); color: var(--key-ink-s); font-weight: 600; box-shadow: 0 3px 0 var(--key-d); transition: top var(--t-fast);
}
.skip:focus { top: 12px; }

/* reduced motion: one composed still per animated element; numbers swap instantly */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
}
.rm *, .rm *::before, .rm *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }