/* Tokens follow unpopulardev.com's STYLE.md so the two sites read as one. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-latin-wght.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/fonts/inter-tight-latin-wght.woff2") format("woff2"); }
:root {
  --paper: #FBFBFA; --paper-2: #F2F2F0; --ink: #101010; --ink-2: #3A3A3A; --ink-3: #6E6E6E;
  --rule: #E3E3E0; --rule-strong: #111111; --accent: #C0341A; --accent-bg: #FBE9E4;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Inter Tight", "Inter", system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) { :root {
  --paper: #0E0E0E; --paper-2: #1A1A19; --ink: #F2F2F0; --ink-2: #C9C9C5; --ink-3: #8A8A86;
  --rule: #262625; --rule-strong: #F2F2F0; --accent: #FF6B47; --accent-bg: #2A140F;
} }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink-2); font: 17px/1.65 var(--font); }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:where(a, button, input, select, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: var(--s4); top: -96px; background: var(--paper); color: var(--ink); padding: var(--s2) var(--s4); border: 1px solid var(--rule-strong); z-index: 10; }
.skip:focus { top: var(--s4); }
.wrap { width: min(1080px, 100% - 32px); margin: 0 auto; }
.micro { font: 600 11px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.masthead { padding: var(--s5) 0 var(--s4); border-bottom: 1px solid var(--rule-strong); }
.top { display: flex; align-items: baseline; gap: var(--s4); flex-wrap: wrap; }
.word { font: 700 20px/1 var(--display); color: var(--ink); text-decoration: none; letter-spacing: -.01em; margin-right: auto; }
.lede { color: var(--ink-3); padding: var(--s6) 0; margin: 0; }

/* index */
.bar { display: flex; gap: var(--s3) var(--s5); flex-wrap: wrap; align-items: center; padding: var(--s4) 0; }
.bar input[type=search] { flex: 1 1 220px; min-width: 0; font: inherit; font-size: 15px; color: var(--ink); background: var(--paper-2); border: 1px solid var(--rule); border-radius: 2px; padding: var(--s2) var(--s3); }
.seg { display: flex; gap: var(--s4); flex-wrap: wrap; }
.seg button, .link { font: 600 11px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-3); background: none; border: 0; padding: 6px 0; cursor: pointer; border-bottom: 2px solid transparent; text-decoration: none; }
.seg button[aria-pressed=true] { color: var(--accent); border-bottom-color: var(--accent); }
.seg button:hover, .link:hover { color: var(--ink); }
.chk { display: flex; gap: 6px; align-items: center; font-size: 13px; color: var(--ink-3); }
.count { font-size: 13px; color: var(--ink-3); }
.notice { border-left: 2px solid var(--accent); padding: var(--s3) var(--s4); margin: 0 0 var(--s4); background: var(--paper-2); font-size: 15px; }
.notice p { margin: 0 0 var(--s2); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); border-top: 1px solid var(--rule); margin: 0 0 var(--s8); padding: 0; list-style: none; }
.grid li { border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); content-visibility: auto; contain-intrinsic-size: auto 112px; }
.tile { display: block; padding: var(--s3) var(--s2) var(--s2); color: var(--ink); text-decoration: none; }
.tile:hover { background: var(--paper-2); }
.tile .sv { display: block; aspect-ratio: 1; }
.tile svg { width: 100%; height: 100%; display: block; }
.tile .micro { display: block; margin-top: var(--s2); text-align: center; }

/* sign page */
.nav { display: flex; gap: var(--s4); align-items: center; padding-top: var(--s4); flex-wrap: wrap; }
.detail { display: grid; grid-template-columns: minmax(260px, 380px) minmax(0, 1fr); gap: var(--s7); padding: var(--s6) 0 var(--s8); }
.detail > div { min-width: 0; }
.stage svg { width: 100%; aspect-ratio: 1; display: block; background: var(--paper-2); border-radius: 2px; color: var(--ink); }
.guides line { stroke: var(--rule); stroke-width: .05; stroke-dasharray: .3 .3; }
.ctrl { display: flex; gap: var(--s2); align-items: center; margin-top: var(--s3); }
.ctrl button { font: inherit; font-size: 15px; color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: 2px; width: 40px; height: 36px; cursor: pointer; flex: none; }
.ctrl button:hover { border-color: var(--ink-3); }
.ctrl .play { width: auto; padding: 0 var(--s4); font: 600 11px/1 var(--font); letter-spacing: .09em; text-transform: uppercase; }
.ctrl input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); }
.ctrl select { font: inherit; font-size: 13px; color: var(--ink-2); background: var(--paper); border: 1px solid var(--rule); height: 36px; flex: none; }
.strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: var(--s2); margin-top: var(--s4); }
.strip button { padding: 0; border: 1px solid var(--rule); background: var(--paper); cursor: pointer; border-radius: 2px; color: var(--ink); }
.strip button[aria-current=step] { border-color: var(--accent); }
.strip svg { width: 100%; aspect-ratio: 1; display: block; }
.order { font-size: 13px; line-height: 1.5; color: var(--ink-3); margin-top: var(--s3); }
h1 { font: 700 clamp(28px, 5vw, 40px)/1.15 var(--display); color: var(--ink); letter-spacing: -.025em; margin: var(--s2) 0 var(--s5); text-wrap: balance; }
dl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s5) var(--s6); margin: 0; }
dl div { border-top: 1px solid var(--rule); padding-top: var(--s3); }
dl .wide { grid-column: 1 / -1; }
dt { margin-bottom: var(--s2); }
dd { margin: 0; color: var(--ink); font-size: 15px; overflow-wrap: anywhere; }
dd.small { color: var(--ink-3); font-size: 13px; line-height: 1.5; }
pre { margin: 0; background: var(--paper-2); padding: var(--s3) var(--s4); font: 13px/1.5 var(--mono); color: var(--ink); overflow-x: auto; border-radius: 2px; }
.footer { border-top: 1px solid var(--rule); padding: var(--s5) 0 var(--s7); font-size: 13px; line-height: 1.5; color: var(--ink-3); }
.footer p { margin: 0 0 var(--s2); max-width: 46em; }
.footer a { color: var(--ink-3); }
@media (max-width: 760px) {
  .detail { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
  dl { grid-template-columns: minmax(0, 1fr); }
}