/* Quoin screen tokens (light on paper; dark set from the Build or Drain animated page). System fonts only: no third-party requests. */
:root {
  --paper: #F3F1EF; --card: #FCFBF9; --ink: #2B2926; --ink2: #6A625A; --rule: #D2CCC3; --signature: #A57C2C; --link: #0084A9;
  --sans: "Avenir Next", "Helvetica Neue", system-ui, sans-serif;
  --mono: "IBM Plex Mono", Menlo, ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --paper: #0E1C2B; --card: #19293B; --ink: #E8E2D6; --ink2: #A8A296; --rule: #2D4152; --signature: #CFA24E; --link: #6CC3DD; color-scheme: dark; }
}
:root[data-theme="dark"] { --paper: #0E1C2B; --card: #19293B; --ink: #E8E2D6; --ink2: #A8A296; --rule: #2D4152; --signature: #CFA24E; --link: #6CC3DD; color-scheme: dark; }
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
body { min-height: 100vh; }
.tab { position: absolute; top: 0; left: max(16px, calc(50% - 324px)); width: 44px; height: 14px; background: var(--signature); }
main { max-width: 680px; margin: 0 auto; padding: 96px 16px 64px; }
.kicker { font-family: var(--mono); font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); margin: 0 0 12px; border-bottom: 2px solid var(--ink); padding-bottom: 10px; }
h1 { font-size: clamp(36px, 7vw, 56px); line-height: 1.15; margin: 16px 0 12px; letter-spacing: -0.01em; }
.lede { font-size: 20px; line-height: 1.5; color: var(--ink); max-width: 60ch; }
.links { list-style: none; padding: 0; margin: 32px 0 0; display: flex; flex-wrap: wrap; gap: 12px 28px; font-size: 18px; }
a { color: var(--link); text-underline-offset: 3px; }