/* ===========================================================================
   Achievement Labs — site stylesheet
   Technical/terminal modernism: Swiss typographic discipline crossed with
   early-computing UI. Flat, square, hairline-ruled, monospace-forward.

   Rules this sheet holds to:
     - border-radius is 0. No exceptions.
     - No box-shadow, no gradient, no blur.
     - Structure comes from 1px rules, not elevation.
     - Monospace is a UI typeface, not just a code typeface.
     - Display type lives at the weight extremes with negative tracking.
   =========================================================================== */

/* --- self-hosted faces --------------------------------------------------
   Both are SIL Open Font License 1.1 and variable, so one file covers every
   weight the design uses: Archivo 100-900, JetBrains Mono 400-700. Latin
   subset only, ~64 KB for the pair.

   Served same-origin, so the site's CSP needs no change: there is no font-src
   directive, and it falls back to default-src 'self'.
   ------------------------------------------------------------------------ */

@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("fonts/jetbrains-mono-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Dark ("terminal") — the default. */
  --bg:          #0b0b0d;
  --bg-panel:    #101014;
  --bg-inset:    #08080a;
  --line:        #23232a;
  --line-strong: #383842;
  --ink:         #c9c9d1;
  --ink-dim:     #8a8a96;
  --ink-faint:   #5a5a66;
  --accent:      #6ef08a;
  --accent-ink:  #05160b;
  /* Semantic, deliberately NOT tied to --accent: a red "ok" reads as a
     failure. Status colours stay fixed while the brand accent swaps. */
  --ok:          #6ef08a;
  --amber:       #f0b86e;
  --violet:      #c9b8ff;
  --red:         #ff8f84;

  --mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --sans: "Archivo", system-ui, -apple-system, "Segoe UI", Helvetica, sans-serif;

  --maxw: 1120px;
  --gut: 28px;
}

/* Light ("paper") — the TypeSafe end of the reference set. */
:root[data-theme="paper"] {
  --bg:          #c9c9c2;
  --bg-panel:    #d9d9d3;
  --bg-inset:    #bfbfb8;
  --line:        #8f8f88;
  --line-strong: #6b6b64;
  --ink:         #16160f;
  --ink-dim:     #4a4a42;
  --ink-faint:   #6e6e66;
  --accent:      #1c6b32;
  --accent-ink:  #eaeae2;
  --ok:          #1c6b32;
  --amber:       #8a5a11;
  --violet:      #5b46a8;
  --red:         #9b2c22;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 15px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gut);
}

/* --- shared type devices ------------------------------------------------ */

/* Small uppercase mono label. The single most characteristic element of the
   reference sites: wide tracking, tiny size, preceded by a rule. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-dim);
  margin: 0 0 22px;
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--line-strong);
  flex: none;
}

.eyebrow.accent { color: var(--accent); }
.eyebrow.accent::before { background: var(--accent); }

h1, h2, h3 { font-family: var(--sans); }

.display {
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .95;
  margin: 0;
}

/* Mono metadata, used for anything machine-ish: versions, counts, paths. */
.meta {
  font: 12px/1.7 var(--mono);
  color: var(--ink-dim);
  letter-spacing: .01em;
}

.tick { color: var(--ok); }

/* --- top bar ------------------------------------------------------------ */

.topbar {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 20;
}

.topbar .wrap {
  display: flex;
  align-items: stretch;
  gap: 0;
  height: 54px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 22px;
  font: 700 13px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}

.brand b { color: var(--accent); font-weight: 700; }

nav.tabs {
  display: flex;
  margin-right: auto;
  border-left: 1px solid var(--line);
}

nav.tabs a {
  display: flex;
  align-items: center;
  padding: 0 18px;
  border-right: 1px solid var(--line);
  font: 500 12px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
}

nav.tabs a:hover { color: var(--ink); background: var(--bg-panel); }

nav.tabs a[aria-current="page"] {
  color: var(--accent);
  background: var(--bg-panel);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 0;
  border-left: 1px solid var(--line);
}

.theme-toggle {
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-dim);
  font: 500 11px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 0 16px;
  align-self: stretch;
  cursor: pointer;
}

.theme-toggle:hover { color: var(--ink); background: var(--bg-panel); }

/* --- buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink);
  font: 600 12px/1 var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { border-color: var(--ink); }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}

.btn-primary:hover { background: var(--ink); border-color: var(--ink); }

.btn[aria-disabled="true"] {
  /* background must be reset too: .btn-primary sets it, and without this a
     disabled primary button keeps the accent fill and reads as enabled. */
  background: transparent;
  color: var(--ink-faint);
  border-color: var(--line);
  border-style: dashed;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-sm { padding: 9px 15px; font-size: 11px; }

/* --- hero --------------------------------------------------------------- */

.hero { padding: 84px 0 0; }

.hero h1 {
  font-size: clamp(42px, 8.5vw, 104px);
  max-width: 14ch;
}

.hero h1 em { font-style: normal; color: var(--accent); }

.hero .lede {
  margin: 28px 0 0;
  max-width: 56ch;
  font-size: 16px;
  color: var(--ink-dim);
}

.hero .actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 34px 0 0;
}

/* Spec strip: dense key/value row in place of big centred stat cards. */
.specstrip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border: 1px solid var(--line);
  border-bottom: 0;
  margin-top: 64px;
}

.specstrip div {
  padding: 16px 18px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.specstrip div:last-child { border-right: 0; }

.specstrip dt {
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 9px;
}

.specstrip dd {
  margin: 0;
  font: 700 26px/1 var(--mono);
  letter-spacing: -.02em;
}

.specstrip dd small {
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: 0;
}

/* --- terminal block ----------------------------------------------------- */

.terminal {
  border: 1px solid var(--line);
  background: var(--bg-inset);
  margin-top: 18px;
}

.terminal header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--line);
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.terminal header span:last-child { margin-left: auto; }

.terminal pre {
  margin: 0;
  padding: 16px 18px;
  font: 12.5px/1.85 var(--mono);
  color: var(--ink-dim);
  overflow-x: auto;
}

.terminal .p { color: var(--accent); }
.terminal .c { color: var(--ink-faint); }
.terminal .w { color: var(--amber); }
.terminal .v { color: var(--violet); }

/* --- sections ----------------------------------------------------------- */

section { padding: 84px 0; border-top: 1px solid var(--line); }
section.tight { padding: 56px 0; }

.sec-head { margin-bottom: 44px; }

.sec-head h2 {
  font-size: clamp(26px, 4vw, 40px);
  font-weight: 900;
  letter-spacing: -.035em;
  margin: 0;
  line-height: 1;
}

.sec-head p {
  margin: 16px 0 0;
  max-width: 62ch;
  color: var(--ink-dim);
}

/* --- index list (dotted leaders + figure numbers) ----------------------- */

.index { border-top: 1px solid var(--line); }

.index a, .index .row {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 4px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
}

/* .row is not a link - these six modules have no page of their own yet,
   so they are presented as content rather than as dead links. */
.index a:hover { background: var(--bg-panel); }

.index .no {
  font: 500 11px/1 var(--mono);
  color: var(--ink-faint);
  letter-spacing: .1em;
  flex: none;
  width: 34px;
}

.index a:hover .no { color: var(--accent); }

.index .name {
  font-weight: 700;
  letter-spacing: -.01em;
  flex: none;
}

.index .leader {
  flex: 1;
  /* --line-strong is ~1.5:1 against the page here, which makes a 1px dotted
     rule effectively invisible. The leader needs ink weight, not line weight. */
  border-bottom: 1px dotted var(--ink-faint);
  transform: translateY(-5px);
  min-width: 20px;
}

.index .note {
  font: 11px/1 var(--mono);
  color: var(--ink-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: none;
  text-align: right;
}

/* --- panel grid with crop marks ---------------------------------------- */

.panels {
  display: grid;
  /* Explicitly 2x2 rather than auto-fit: with exactly four panels, auto-fit
     resolves to three columns at common widths and orphans the fourth. */
  grid-template-columns: repeat(2, 1fr);
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.panel {
  padding: 26px 24px 30px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  position: relative;
}

.panel .fig {
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 16px;
}

.panel h3 {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.panel p {
  margin: 0;
  font-size: 14px;
  color: var(--ink-dim);
}

/* Crop marks, the "technical document" tell. Applied sparingly. */
.cropped { position: relative; padding: 30px; border: 0; }

.cropped::before,
.cropped::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 1px solid var(--line-strong);
}

.cropped::before { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.cropped::after { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.cropped.spaced { margin-top: 44px; }

/* --- spec table --------------------------------------------------------- */

table.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

table.spec th,
table.spec td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

table.spec thead th {
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--line-strong);
}

table.spec td:first-child {
  width: 210px;
  font: 12px/1.5 var(--mono);
  color: var(--ink-dim);
  letter-spacing: .02em;
}

table.spec td code {
  font-family: var(--mono);
  /* Violet marks a literal value, matching the version number in the terminal
     block. Green stays brand and success; amber stays warning. */
  color: var(--violet);
  font-size: 12.5px;
}

/* --- faq ---------------------------------------------------------------- */

.faq { border-top: 1px solid var(--line); }

.faq details { border-bottom: 1px solid var(--line); }

.faq summary {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  letter-spacing: -.01em;
}

.faq summary::-webkit-details-marker { display: none; }

.faq summary .q {
  font: 500 11px/1 var(--mono);
  color: var(--ink-faint);
  letter-spacing: .1em;
  flex: none;
  width: 34px;
}

.faq summary .sign {
  margin-left: auto;
  font: 400 15px/1 var(--mono);
  color: var(--ink-dim);
  flex: none;
}

.faq details[open] summary .sign { color: var(--accent); }
.faq details[open] summary .q { color: var(--accent); }

.faq .body {
  padding: 0 4px 22px 54px;
  max-width: 72ch;
  color: var(--ink-dim);
  font-size: 14.5px;
}

.faq .body p { margin: 0 0 10px; }
.faq .body p:last-child { margin: 0; }

/* --- status / callout --------------------------------------------------- */

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: var(--bg-panel);
  padding: 20px 22px;
}

.callout .tag {
  font: 600 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  display: block;
  margin-bottom: 11px;
}

.callout p { margin: 0 0 10px; font-size: 14.5px; color: var(--ink-dim); }
.callout p:last-child { margin: 0; }

/* --- games page --------------------------------------------------------- */

.toolbar {
  display: flex;
  gap: 0;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  margin-bottom: 20px;
}

.toolbar input {
  flex: 1 1 260px;
  min-width: 0;
  padding: 13px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: 500 13px/1 var(--mono);
  letter-spacing: .04em;
}

.toolbar input::placeholder { color: var(--ink-faint); }
.toolbar input:focus { outline: 0; background: var(--bg-panel); }

.filters { display: flex; }

.chip {
  padding: 13px 16px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-faint);
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}

.chip:last-child { border-right: 0; }
.chip:hover { color: var(--ink); background: var(--bg-panel); }
.chip[aria-pressed="true"] { color: var(--accent); background: var(--bg-panel); }

.resultcount {
  font: 500 11px/1 var(--mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 14px;
}

ol.gamelist {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

ol.gamelist li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 11px 4px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

ol.gamelist li:hover { background: var(--bg-panel); }

ol.gamelist .no {
  font: 500 10px/1 var(--mono);
  color: var(--ink-faint);
  letter-spacing: .08em;
  flex: none;
  width: 30px;
}

/* Status as a fixed-width mono token, so the column reads as a machine field. */
.gtag {
  font: 600 10px/1 var(--mono);
  letter-spacing: .1em;
  padding: 4px 7px;
  border: 1px solid currentColor;
  flex: none;
  width: 52px;
  text-align: center;
}

.gtag.supported { color: var(--ok); }
.gtag.coming-soon { color: var(--amber); }

.gname { flex: none; letter-spacing: -.005em; }

ol.gamelist .leader {
  flex: 1;
  border-bottom: 1px dotted var(--ink-faint);
  transform: translateY(-4px);
  min-width: 16px;
  opacity: .5;
}

.gplat {
  font: 11px/1 var(--mono);
  color: var(--ink-dim);
  letter-spacing: .04em;
  text-transform: uppercase;
  flex: none;
  text-align: right;
}

.empty {
  padding: 40px 4px;
  text-align: center;
  color: var(--ink-faint);
  font: 500 12px/1 var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--line);
}

/* --- list pagination ---------------------------------------------------- */

.pager {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.pagebtn {
  font: 600 11px/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 8px 11px;
  cursor: pointer;
}

.pagebtn:hover:not(:disabled) {
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--bg-panel);
}

.pagebtn.current {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

/* Disabled rather than hidden: the control keeps its place, so the row does
   not reflow as the reader moves between the first and last pages. */
.pagebtn:disabled {
  color: var(--ink-faint);
  cursor: default;
  opacity: .55;
}

.pagegap {
  font: 500 11px/1 var(--mono);
  color: var(--ink-faint);
  padding: 0 2px;
}

.pagenote {
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
  margin-left: auto;
}

@media (max-width: 640px) {
  .pagenote { margin-left: 0; width: 100%; padding-top: 8px; }
}

/* --- catalogue page ----------------------------------------------------- */

.gtag.free { color: var(--ok); }
.gtag.paid { color: var(--violet); width: auto; padding: 4px 9px; }

/* The catalogue row carries two more columns than the games row (title id and
   an action), so the dotted leader has to go and the name has to be the thing
   that gives. Without this, long titles push the row past the container. */
ol.gamelist.catalog li { gap: 12px; }

ol.gamelist.catalog .leader { display: none; }

ol.gamelist.catalog .gname {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

ol.gamelist.catalog .gplat {
  max-width: 34ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Title ID reads as a machine identifier, not prose. */
.tid {
  font: 500 11px/1 var(--mono);
  letter-spacing: .06em;
  color: var(--ink-faint);
  flex: none;
}

.getlink {
  font: 600 11px/1 var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  flex: none;
  width: 52px;
  text-align: right;
}

.getlink:hover { text-decoration: underline; }

.getlink.unavailable {
  color: var(--ink-faint);
  cursor: default;
}

/* --- roadmap board ------------------------------------------------------ */

.board-meta {
  margin: 0 0 20px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  color: var(--ink-faint);
}

.board {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(250px, 1fr);
  gap: 0;
  overflow-x: auto;
  align-items: start;
  border-left: 1px solid var(--line);
  border-top: 1px solid var(--line);
}

.column {
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  min-width: 0;
}

.column > header {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font: 600 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

.column > header .n { margin-left: auto; color: var(--ink-faint); letter-spacing: .06em; }

.column .dot { width: 7px; height: 7px; background: var(--ink-faint); flex: none; }
.column.is-planned  .dot { background: var(--amber); }
.column.is-progress .dot { background: var(--violet); }
.column.is-fixing   .dot { background: var(--ink-dim); }
.column.is-done     .dot { background: var(--ok); }

.ticket {
  display: block;
  padding: 14px;
  border-bottom: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}

.ticket:last-child { border-bottom: 0; }
a.ticket:hover { background: var(--bg-panel); }

.ticket .ref {
  margin: 0 0 8px;
  font: 500 10px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--ink-faint);
}

.ticket h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.015em;
  line-height: 1.35;
}

.ticket p {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-dim);
}

.labels { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 11px; }

.label {
  font: 500 10px/1 var(--mono);
  letter-spacing: .08em;
  padding: 3px 6px;
  border: 1px solid var(--line-strong);
  color: var(--ink-dim);
  text-transform: uppercase;
}

.label.feature { color: var(--ok); border-color: var(--ok); }
.label.bug     { color: var(--amber); border-color: var(--amber); }
.label.xbox, .label.xbox360 { color: var(--violet); border-color: var(--violet); }

.notice {
  border: 1px solid var(--line);
  border-left: 2px solid var(--amber);
  background: var(--bg-panel);
  padding: 18px 20px;
  color: var(--ink-dim);
  font-size: 14px;
  grid-column: 1 / -1;
}

.notice strong { color: var(--ink); }

/* --- download page ------------------------------------------------------ */

.dl-panel {
  display: flex;
  gap: 22px;
  align-items: center;
  flex-wrap: wrap;
  border: 1px solid var(--line);
  padding: 26px 24px;
}

.dl-meta { flex: 1 1 280px; min-width: 0; }
.dl-meta .fig {
  font: 500 10px/1 var(--mono);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.dl-meta h3 { margin: 0 0 8px; font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.dl-meta .meta { margin: 0; }

/* Numbered procedure. The rule down the left is the spine; the number sits on
   it, which is the technical-manual reading rather than a bulleted list. */
ol.steps {
  counter-reset: step;
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}

ol.steps > li {
  position: relative;
  padding: 22px 0 22px 62px;
  border-bottom: 1px solid var(--line);
}

ol.steps > li::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 24px;
  font: 500 11px/1 var(--mono);
  letter-spacing: .14em;
  color: var(--ink-faint);
}

ol.steps h3 { margin: 0 0 8px; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
ol.steps p { margin: 0 0 12px; color: var(--ink-dim); font-size: 14.5px; max-width: 70ch; }
ol.steps p:last-child { margin-bottom: 0; }
ol.steps b { color: var(--ink); }

pre.code {
  margin: 0;
  padding: 13px 15px;
  background: var(--bg-inset);
  border: 1px solid var(--line);
  border-left: 2px solid var(--violet);
  overflow-x: auto;
  font: 12.5px/1.7 var(--mono);
  color: var(--ink-dim);
}

/* --- footer ------------------------------------------------------------- */

footer.site {
  border-top: 1px solid var(--line);
  padding: 34px 0 60px;
}

footer.site .wrap {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: baseline;
  font: 11px/1.8 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

footer.site nav { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }
footer.site a { text-decoration: none; }
footer.site a:hover { color: var(--accent); }

/* --- responsive --------------------------------------------------------- */

@media (max-width: 760px) {
  :root { --gut: 18px; }

  .panels { grid-template-columns: 1fr; }
  .board { grid-auto-flow: row; grid-auto-columns: auto; }
  .toolbar input { flex-basis: 100%; border-right: 0; border-bottom: 1px solid var(--line); }
  ol.gamelist li { flex-wrap: wrap; gap: 8px 12px; }
  ol.gamelist .leader { display: none; }
  .gplat { width: 100%; text-align: left; padding-left: 44px; }
  .tid { order: 5; }
  .getlink { width: auto; text-align: left; }
  ol.steps > li { padding-left: 0; padding-top: 34px; }
  ol.steps > li::before { top: 14px; }

  .topbar .wrap { height: auto; flex-wrap: wrap; }
  .brand { height: 48px; }
  nav.tabs { width: 100%; order: 3; border-left: 0; border-top: 1px solid var(--line); overflow-x: auto; }
  nav.tabs a { padding: 13px 14px; }
  .topbar-right { margin-left: auto; }

  .hero { padding: 52px 0 0; }
  .hero h1 { max-width: none; }
  section { padding: 56px 0; }

  .index a, .index .row { flex-wrap: wrap; gap: 8px 14px; }
  .index .leader { display: none; }
  .index .note { width: 100%; text-align: left; padding-left: 50px; }

  table.spec td:first-child { width: 120px; }
  .faq .body { padding-left: 4px; }
}