/* ==========================================================================
   Odin — official site design system
   Editorial/technical: near-black ground, thin rules, tight corners, one
   cold blue accent taken from the mod's own Click GUI default (rgb 50,150,220).
   Surfaces and hairlines do the work instead of shadows, glows or glass.
   ========================================================================== */

:root {
  --bg: #090a0c;
  --surface: #111318;
  --surface-2: #171a20;
  --border: #252932;
  --border-bright: #333844;

  --text: #f1f2f4;
  --text-2: #969ca6;
  /* Clears 4.5:1 on every surface it is used on, including --surface-2. */
  --text-3: #828896;

  /* Odin Click GUI default colour, and a lifted variant for text on dark. */
  --accent: #3296dc;
  --accent-hi: #5cb0ec;
  --accent-dim: rgba(50, 150, 220, 0.12);
  --accent-line: rgba(50, 150, 220, 0.32);

  --warn: #d8a13a;
  --warn-dim: rgba(216, 161, 58, 0.09);
  --warn-line: rgba(216, 161, 58, 0.3);
  --ok: #4c9f70;

  --r-sm: 2px;
  --r: 4px;
  --r-lg: 8px;

  --gut: clamp(1.15rem, 4vw, 2.5rem);
  --max: 1240px;
  --rule: 1px solid var(--border);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "cv05" 1, "ss01" 1;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
}

/* Author-level `display` on a class otherwise beats the UA [hidden] rule,
   which would leave JS-hidden controls (e.g. the checksum copy button)
   visible. */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.021em;
}

p {
  margin: 0 0 1em;
  color: var(--text-2);
}

ul,
ol {
  margin: 0;
  padding: 0;
}

code,
kbd,
.mono {
  font-family: var(--mono);
  font-variant-ligatures: none;
}

:focus-visible {
  outline: 2px solid var(--accent-hi);
  outline-offset: 2px;
}

::selection {
  background: rgba(50, 150, 220, 0.3);
}

/* ---------- type scale ---------- */

.h-display {
  font-size: clamp(2.1rem, 1.35rem + 3.1vw, 3.5rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
}

.h-section {
  font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2rem);
  letter-spacing: -0.024em;
}

.lede {
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.115rem);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 54ch;
}

.eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}

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

/* ---------- layout ---------- */

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
}

.band {
  border-top: var(--rule);
}

.band--pad {
  padding-block: clamp(3rem, 1.8rem + 5vw, 5.5rem);
}

.band--tight {
  padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
}

.band--surface {
  background: var(--surface);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem;
  left: 1rem;
  z-index: 200;
  background: var(--accent);
  color: #04101b;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: var(--r);
}

.skip-link:focus {
  top: 0.75rem;
}

/* Section heading with the rune-tick rule motif */
.sec-head {
  max-width: 60ch;
  margin-bottom: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem);
}

.sec-head p {
  margin-bottom: 0;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  padding: 0.78rem 1.15rem;
  border: 1px solid transparent;
  border-radius: var(--r);
  cursor: pointer;
  transition: background-color 0.16s var(--ease), border-color 0.16s var(--ease), color 0.16s var(--ease);
}

.btn svg {
  width: 1.05em;
  height: 1.05em;
  flex: none;
}

.btn--primary {
  background: var(--accent);
  color: #04101b;
}

.btn--primary:hover {
  background: var(--accent-hi);
}

.btn--secondary {
  border-color: var(--border-bright);
  color: var(--text);
  background: transparent;
}

.btn--secondary:hover {
  border-color: var(--accent);
  color: var(--accent-hi);
}

.btn--quiet {
  padding: 0.45rem 0;
  color: var(--accent-hi);
  font-size: 0.875rem;
  border: 0;
  background: none;
}

.btn--quiet:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn--lg {
  padding: 0.95rem 1.5rem;
  font-size: 0.97rem;
}

.btn--full {
  width: 100%;
}

.btn__sub {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.78em;
  opacity: 0.75;
}

/* ---------- header ---------- */

.hdr {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(9, 10, 12, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: var(--rule);
}

.hdr__in {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.7rem var(--gut);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--text);
  font-weight: 650;
  font-size: 1rem;
  letter-spacing: -0.02em;
  margin-right: auto;
}

/* Odin's own wordmark. Height is fixed and width follows the intrinsic
   ratio, so the logo can be regenerated at any resolution without touching
   the stylesheet. */
.brand__logo {
  display: block;
  height: 26px;
  width: auto;
  flex: none;
}

.nav {
  display: flex;
  gap: 1.55rem;
  list-style: none;
}

.nav a {
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.885rem;
  font-weight: 500;
  padding-block: 0.3rem;
  transition: color 0.15s var(--ease);
}

.nav a:hover {
  color: var(--text);
}

.nav a[aria-current="page"] {
  color: var(--text);
}

.hdr__act {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.hdr__act .btn {
  padding: 0.58rem 0.95rem;
  font-size: 0.85rem;
}

.burger {
  display: none;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border-bright);
  border-radius: var(--r);
  color: var(--text);
  cursor: pointer;
}

.burger svg {
  width: 18px;
  height: 18px;
}

@media (max-width: 900px) {
  .burger {
    display: inline-flex;
  }

  .nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--surface);
    border-bottom: var(--rule);
    padding: 0.5rem var(--gut) 1rem;
    display: none;
  }

  .nav.open {
    display: flex;
  }

  .nav a {
    display: block;
    padding: 0.7rem 0;
    border-bottom: var(--rule);
    font-size: 0.95rem;
  }

  .hdr__act .btn--secondary {
    display: none;
  }
}

/* ---------- verified strip (authenticity) ---------- */

.verified {
  border-bottom: var(--rule);
  background: var(--bg);
  font-size: 0.78rem;
}

.verified__in {
  max-width: var(--max);
  margin-inline: auto;
  padding: 0.45rem var(--gut);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.4rem;
  color: var(--text-3);
}

.verified__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--text-2);
}

.verified__badge svg {
  width: 13px;
  height: 13px;
  color: var(--ok);
  flex: none;
}

.verified__links {
  display: flex;
  gap: 1.2rem;
  list-style: none;
  margin-left: auto;
  flex-wrap: wrap;
}

.verified__links a {
  color: var(--text-3);
  text-decoration: none;
  font-family: var(--mono);
  transition: color 0.15s var(--ease);
}

.verified__links a:hover {
  color: var(--accent-hi);
}

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

.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem) clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

/* Thin waypoint/coordinate grid — a structural motif, not a glow. */
.hero__grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  background-position: center;
  opacity: 0.28;
  mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 70% 40%, #000 20%, transparent 78%);
}

.hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(2rem, 1rem + 4vw, 4rem);
  align-items: center;
}

@media (max-width: 1000px) {
  .hero__in {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }
}

.hero h1 {
  margin-bottom: 1rem;
}

.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.75rem;
}

/* Once they stack, two buttons of different widths read as a mistake. */
@media (max-width: 520px) {
  .hero__cta {
    display: grid;
    grid-template-columns: 1fr;
  }

  .hero__cta .btn {
    width: 100%;
  }
}

.dl__status {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-3);
}

.hero__hint {
  margin: 1.1rem 0 0;
  font-size: 0.83rem;
  color: var(--text-3);
}

.hero__hint kbd {
  margin-inline: 0.15rem;
}

.hero__compat {
  margin: 1.1rem 0 0;
  font-family: var(--mono);
  font-size: 0.775rem;
  line-height: 1.7;
  color: var(--text-3);
}

.hero__compat b {
  color: var(--text-2);
  font-weight: 500;
}

/* ---------- release strip ---------- */

/* Six cells on desktop, folding to three then two — never wide enough to
   push the page into horizontal scroll on a 375px screen. */
.release {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  border-left: var(--rule);
}

@media (max-width: 1000px) {
  .release {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .release {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.release__cell {
  padding: 0.9rem clamp(0.75rem, 2vw, 1.35rem);
  border-right: var(--rule);
  min-width: 0;
}

.release__k {
  display: block;
  font-family: var(--mono);
  font-size: 0.67rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.3rem;
}

.release__v {
  font-family: var(--mono);
  font-size: 0.845rem;
  color: var(--text);
  overflow-wrap: anywhere;
}

.release__v a {
  color: var(--accent-hi);
  text-decoration: none;
}

.release__v a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- warning note ---------- */

.note {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.7rem 0.9rem;
  background: var(--warn-dim);
  border: 1px solid var(--warn-line);
  border-radius: var(--r);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-2);
}

.note svg {
  width: 15px;
  height: 15px;
  color: var(--warn);
  flex: none;
  margin-top: 0.18rem;
}

.note--inline {
  margin: 1.1rem 0 0;
}

/* ---------- walkthroughs (alternating, not cards) ---------- */

.walk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.75rem, 1rem + 3vw, 3.5rem);
  align-items: center;
  padding-block: clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
  border-top: var(--rule);
}

.walk:first-of-type {
  border-top: 0;
}

.walk--flip .walk__media {
  order: -1;
}

@media (max-width: 900px) {
  .walk {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .walk--flip .walk__media {
    order: 0;
  }
}

.walk__body h3 {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
  margin-bottom: 0.6rem;
}

.walk__body p {
  font-size: 0.955rem;
}

.walk__facts {
  list-style: none;
  margin-top: 1.25rem;
  border-top: var(--rule);
}

.walk__facts li {
  display: grid;
  grid-template-columns: minmax(88px, 26%) 1fr;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: var(--rule);
  font-size: 0.83rem;
}

.walk__facts dt,
.walk__facts .k {
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-top: 0.12rem;
}

.walk__facts .v {
  color: var(--text-2);
}

/* ---------- screenshot frame / placeholder ---------- */

.shot {
  position: relative;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.shot__bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: var(--rule);
  background: var(--surface-2);
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
}

.shot__bar::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
  opacity: 0.7;
}

/* Never upscale past a screenshot's own resolution: a HUD crop captured at
   439px stays crisp at 439px and centres in the slot, while a full-resolution
   screenshot still scales down to fit. */
.shot img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* Honest placeholder: says exactly which asset is missing. */
.shot--missing .shot__slot {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  padding: clamp(1.5rem, 1rem + 3vw, 3rem) 1.25rem;
  text-align: center;
  aspect-ratio: 16 / 9;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 11px,
    rgba(255, 255, 255, 0.022) 11px 22px
  );
}

.shot__icon {
  width: 26px;
  height: 26px;
  color: var(--text-3);
}

.shot__label {
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}

.shot__needs {
  max-width: 46ch;
  font-size: 0.8rem;
  line-height: 1.55;
  color: var(--text-3);
  margin: 0;
}

.shot__path {
  font-family: var(--mono);
  font-size: 0.72rem;
  color: var(--text-3);
  background: var(--bg);
  border: var(--rule);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.45rem;
}

/* ---------- click GUI preview (signature interaction) ---------- */

.gui {
  border: var(--rule);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
}

.gui__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 0.6rem 0.85rem;
  border-bottom: var(--rule);
  background: var(--surface-2);
}

.gui__title {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--mono);
  font-size: 0.73rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
}

.gui__title svg {
  width: 13px;
  height: 13px;
  color: var(--accent);
}

.gui__key {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
}

kbd {
  display: inline-block;
  padding: 0.08rem 0.35rem;
  border: 1px solid var(--border-bright);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--bg);
  font-size: 0.92em;
  color: var(--text-2);
}

.gui__search {
  margin-left: auto;
  min-width: 0;
}

.gui__search input {
  width: clamp(140px, 22vw, 220px);
  font: inherit;
  font-family: var(--mono);
  font-size: 0.775rem;
  color: var(--text);
  background: var(--bg);
  border: var(--rule);
  border-radius: var(--r);
  padding: 0.34rem 0.6rem;
}

.gui__search input::placeholder {
  color: var(--text-3);
}

.gui__search input:focus-visible {
  border-color: var(--accent);
  outline-offset: 0;
}

.gui__tabs {
  display: flex;
  overflow-x: auto;
  border-bottom: var(--rule);
  scrollbar-width: none;
}

.gui__tabs::-webkit-scrollbar {
  display: none;
}

.gui__tab {
  flex: none;
  font: inherit;
  font-size: 0.83rem;
  font-weight: 500;
  color: var(--text-2);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 0.62rem 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.gui__tab:hover {
  color: var(--text);
}

.gui__tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--accent);
}

.gui__tab .n {
  font-family: var(--mono);
  font-size: 0.72em;
  color: var(--text-3);
  margin-left: 0.35rem;
}

.gui__body {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  min-height: 336px;
}

@media (max-width: 760px) {
  .gui__body {
    grid-template-columns: 1fr;
    min-height: 0;
  }
}

.gui__list {
  border-right: var(--rule);
  max-height: 336px;
  overflow-y: auto;
  list-style: none;
}

@media (max-width: 760px) {
  .gui__list {
    border-right: 0;
    border-bottom: var(--rule);
    max-height: 260px;
  }
}

.gui__mod {
  width: 100%;
  display: block;
  text-align: left;
  font: inherit;
  background: none;
  border: 0;
  border-bottom: var(--rule);
  padding: 0.6rem 0.85rem;
  cursor: pointer;
  color: var(--text-2);
  transition: background-color 0.13s var(--ease), color 0.13s var(--ease);
}

.gui__mod:hover {
  background: var(--surface-2);
  color: var(--text);
}

.gui__mod[aria-current="true"] {
  background: var(--accent-dim);
  color: var(--text);
  box-shadow: inset 2px 0 0 var(--accent);
}

.gui__mod-name {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
}

.gui__mod-desc {
  display: block;
  font-size: 0.765rem;
  color: var(--text-3);
  margin-top: 0.1rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gui__empty {
  padding: 1.25rem 0.9rem;
  font-size: 0.82rem;
  color: var(--text-3);
}

.gui__detail {
  padding: 1rem 1.1rem;
  min-width: 0;
}

.gui__detail h4 {
  font-size: 1rem;
  margin-bottom: 0.3rem;
}

.gui__detail-desc {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: 1rem;
}

.gui__setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-top: var(--rule);
  font-size: 0.83rem;
}

.gui__setting-label {
  color: var(--text-2);
  min-width: 0;
}

.gui__setting-val {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
  flex: none;
}

/* Static, non-interactive representations of Odin's own control types */
.sw {
  width: 26px;
  height: 15px;
  border-radius: 8px;
  border: 1px solid var(--border-bright);
  background: var(--bg);
  position: relative;
  flex: none;
}

.sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--text-3);
  transition: transform 0.16s var(--ease), background-color 0.16s var(--ease);
}

.sw.on {
  border-color: var(--accent);
  background: var(--accent-dim);
}

.sw.on::after {
  transform: translateX(11px);
  background: var(--accent);
}

.bar {
  width: 82px;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  position: relative;
  flex: none;
}

.bar span {
  position: absolute;
  inset: 0 auto 0 0;
  background: var(--accent);
  border-radius: inherit;
}

.chip {
  font-family: var(--mono);
  font-size: 0.73rem;
  padding: 0.12rem 0.42rem;
  border: var(--rule);
  border-radius: var(--r-sm);
  color: var(--text-2);
}

.dot-color {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid var(--border-bright);
  flex: none;
}

.gui__foot {
  padding: 0.55rem 0.85rem;
  border-top: var(--rule);
  background: var(--surface-2);
  font-size: 0.735rem;
  color: var(--text-3);
}

/* ---------- download / verify ---------- */

.dl {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.5rem, 1rem + 3vw, 3rem);
  align-items: start;
}

@media (max-width: 900px) {
  .dl {
    grid-template-columns: 1fr;
  }
}

.spec {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.855rem;
}

.spec th,
.spec td {
  text-align: left;
  padding: 0.62rem 0;
  border-bottom: var(--rule);
  vertical-align: top;
}

.spec th {
  width: 38%;
  font-family: var(--mono);
  font-size: 0.71rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 500;
  padding-right: 0.75rem;
}

.spec td {
  font-family: var(--mono);
  color: var(--text);
  overflow-wrap: anywhere;
}

.spec td a {
  color: var(--accent-hi);
  text-decoration: none;
}

.spec td a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hash {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.copy {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font: inherit;
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--text-2);
  background: var(--surface-2);
  border: 1px solid var(--border-bright);
  border-radius: var(--r-sm);
  padding: 0.2rem 0.45rem;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease);
}

.copy:hover {
  border-color: var(--accent);
  color: var(--accent-hi);
}

.copy svg {
  width: 11px;
  height: 11px;
}

/* ---------- FAQ ---------- */

.faq {
  border-top: var(--rule);
  max-width: 78ch;
}

.faq__item {
  border-bottom: var(--rule);
}

.faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 0.95rem 0;
  cursor: pointer;
  font-size: 0.955rem;
  font-weight: 500;
  list-style: none;
}

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

.faq__item summary::after {
  content: "+";
  flex: none;
  font-family: var(--mono);
  font-size: 1.05rem;
  line-height: 1.2;
  color: var(--accent);
}

.faq__item[open] summary::after {
  content: "−";
}

.faq__item p {
  padding-bottom: 1rem;
  margin: 0;
  font-size: 0.9rem;
  max-width: 72ch;
}

/* ---------- steps ---------- */

.steps {
  list-style: none;
  counter-reset: s;
  border-top: var(--rule);
  max-width: 82ch;
}

.steps > li {
  counter-increment: s;
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: 1rem;
  padding: 1.05rem 0;
  border-bottom: var(--rule);
}

.steps > li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--accent);
  padding-top: 0.15rem;
}

.steps h3 {
  font-size: 0.98rem;
  margin-bottom: 0.25rem;
}

.steps p {
  margin: 0;
  font-size: 0.895rem;
}

.steps code {
  font-size: 0.855em;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--r-sm);
  padding: 0.08rem 0.35rem;
  color: var(--text);
}

/* ---------- prose ---------- */

.prose {
  max-width: 74ch;
}

/* When .prose/.page-head sit on the same element as .wrap, their narrower
   max-width would replace the wrap's and get centred by its auto margins.
   Keep the wrap full width and constrain the children instead, so text
   stays left-aligned to the page grid. */
.wrap.prose,
.wrap.page-head {
  max-width: var(--max);
}

.wrap.prose > *,
.wrap.page-head > * {
  max-width: 74ch;
}

.wrap.page-head > h1 {
  max-width: 20ch;
}

.prose h2 {
  font-size: 1.2rem;
  margin: 2.15rem 0 0.65rem;
  padding-top: 1.35rem;
  border-top: var(--rule);
}

.prose h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.prose h3 {
  font-size: 1rem;
  margin: 1.5rem 0 0.4rem;
}

.prose ul,
.prose ol {
  padding-left: 1.15rem;
  margin-bottom: 1rem;
}

.prose ul {
  list-style: square;
}

.prose ol {
  list-style: decimal;
}

.prose li {
  color: var(--text-2);
  margin-bottom: 0.4rem;
}

.prose li::marker {
  color: var(--text-3);
}

.prose code {
  font-size: 0.86em;
  background: var(--surface);
  border: var(--rule);
  border-radius: var(--r-sm);
  padding: 0.08rem 0.35rem;
  color: var(--text);
}

.prose a {
  color: var(--accent-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

/* ---------- changelog ---------- */

.rel {
  display: grid;
  grid-template-columns: minmax(120px, 15%) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding: 1.6rem 0;
  border-top: var(--rule);
}

@media (max-width: 700px) {
  .rel {
    grid-template-columns: 1fr;
    gap: 0.6rem;
  }
}

.rel__meta {
  font-family: var(--mono);
  font-size: 0.78rem;
}

.rel__v {
  display: block;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}

.rel__d {
  color: var(--text-3);
}

.rel__group + .rel__group {
  margin-top: 1rem;
}

.rel__h {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-hi);
  margin-bottom: 0.45rem;
}

.rel__group ul {
  list-style: none;
}

.rel__group li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.875rem;
  color: var(--text-2);
  margin-bottom: 0.3rem;
}

.rel__group li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 4px;
  height: 1px;
  background: var(--text-3);
}

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

.ftr {
  border-top: var(--rule);
  padding-block: 2.5rem 2rem;
  margin-top: 3rem;
}

.ftr__in {
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gut);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 2rem;
}

@media (max-width: 760px) {
  .ftr__in {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

.ftr__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 0.6rem;
}

.ftr__brand .brand__logo {
  height: 22px;
}

.ftr__note {
  font-size: 0.79rem;
  color: var(--text-3);
  max-width: 44ch;
  margin: 0;
}

.ftr__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1.5rem;
}

.ftr__h {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}

.ftr__cols ul {
  list-style: none;
}

.ftr__cols li {
  margin-bottom: 0.4rem;
}

.ftr__cols a {
  font-size: 0.855rem;
  color: var(--text-2);
  text-decoration: none;
}

.ftr__cols a:hover {
  color: var(--accent-hi);
}

.ftr__legal {
  max-width: var(--max);
  margin: 2rem auto 0;
  padding: 1.15rem var(--gut) 0;
  border-top: var(--rule);
  font-size: 0.755rem;
  color: var(--text-3);
}

.ftr__legal p {
  margin: 0 0 0.35rem;
  font-size: inherit;
  color: inherit;
}

/* ---------- breadcrumbs / page head ---------- */

.crumbs {
  padding-top: 1.35rem;
}

.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  list-style: none;
  font-family: var(--mono);
  font-size: 0.74rem;
  color: var(--text-3);
}

.crumbs a {
  color: var(--text-3);
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--accent-hi);
}

.crumbs li:not(:last-child)::after {
  content: "/";
  margin-left: 0.35rem;
  color: var(--border-bright);
}

.crumbs [aria-current="page"] {
  color: var(--text-2);
}

.page-head {
  padding-block: clamp(1.5rem, 1rem + 2vw, 2.5rem) clamp(1.5rem, 1rem + 2vw, 2.25rem);
  max-width: 68ch;
}

/* A band directly after a page head does not need its full top padding: the
   head already separates them, and stacking both pushed the primary action on
   /download/ to the vertical middle of the viewport. */
.page-head + .band--pad {
  padding-block-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.page-head h1 {
  font-size: clamp(1.85rem, 1.4rem + 1.9vw, 2.7rem);
  margin-bottom: 0.7rem;
}

/* ---------- 404 ---------- */

.nf {
  padding-block: clamp(4rem, 2rem + 9vw, 8rem);
  max-width: 60ch;
}

.nf__code {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--accent);
  margin-bottom: 0.9rem;
}

.nf ul {
  list-style: none;
  margin-top: 1.75rem;
  border-top: var(--rule);
}

.nf li {
  border-bottom: var(--rule);
}

.nf li a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 0;
  text-decoration: none;
  color: var(--text-2);
  font-size: 0.9rem;
  transition: color 0.15s var(--ease);
}

.nf li a:hover {
  color: var(--accent-hi);
}

.nf li span {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text-3);
}

/* ---------- utility ---------- */

.stack-sm > * + * {
  margin-top: 0.5rem;
}

.mt-lg {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.text-mono {
  font-family: var(--mono);
}

.linklist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.4rem;
  list-style: none;
  font-size: 0.875rem;
}

.linklist a {
  color: var(--accent-hi);
  text-decoration: none;
}

.linklist a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- prose layout + contents rail ---------- */

/* The prose column keeps its 74ch measure; the contents rail occupies the
   space that measure leaves over on wide screens instead of nothing. */
.prose-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 1rem + 3vw, 4rem);
  align-items: start;
}

@media (min-width: 1000px) {
  .prose-layout {
    grid-template-columns: minmax(0, 74ch) minmax(180px, 1fr);
  }

  .toc {
    position: sticky;
    /* Clears the sticky header, which is ~4.1rem tall. */
    top: 5.4rem;
  }
}

/* Above that breakpoint the rail is a sidebar; below it, it reads as a
   contents block at the top of the page, so it comes first in the source and
   is re-ordered rather than duplicated. */
.toc {
  order: -1;
  padding-bottom: 1.25rem;
  border-bottom: var(--rule);
}

@media (min-width: 1000px) {
  .toc {
    order: 0;
    padding-bottom: 0;
    border-bottom: 0;
    padding-left: 1.5rem;
    border-left: var(--rule);
  }
}

.toc__h {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  margin: 0 0 0.75rem;
}

.toc ol {
  list-style: none;
  counter-reset: toc;
}

.toc li {
  counter-increment: toc;
  margin-bottom: 0.15rem;
}

.toc a {
  display: block;
  padding: 0.28rem 0;
  font-size: 0.815rem;
  line-height: 1.45;
  color: var(--text-2);
  text-decoration: none;
  transition: color 0.15s var(--ease);
}

.toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.66rem;
  color: var(--text-3);
  margin-right: 0.6rem;
}

.toc a:hover {
  color: var(--text);
}

/* Set by script.js as the reader moves through the page. */
.toc a[aria-current="true"] {
  color: var(--accent-hi);
}

.toc a[aria-current="true"]::before {
  color: var(--accent);
}

/* Anchor jumps must clear the sticky header. */
.prose h2[id] {
  scroll-margin-top: 5.4rem;
}

/* ---------- site map ---------- */

/* One column per group at full width, so no group wraps under a taller
   neighbour and leaves the row beside it empty. Explicit counts rather than
   auto-fit, because auto-fit sizes to the widest column and lands on three. */
.smap {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}

@media (min-width: 620px) {
  .smap {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .smap {
    grid-template-columns: repeat(4, 1fr);
  }
}

.smap__h {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
  padding-bottom: 0.7rem;
  margin: 0;
  border-bottom: 1px solid var(--border-bright);
}

.smap__list {
  list-style: none;
}

.smap__item {
  padding: 0.95rem 0;
  border-bottom: var(--rule);
}

.smap__link {
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  letter-spacing: -0.015em;
}

.smap__link:hover {
  color: var(--accent-hi);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.smap__path {
  display: block;
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--text-3);
  margin-top: 0.2rem;
}

.smap__desc {
  margin: 0.45rem 0 0;
  font-size: 0.83rem;
  line-height: 1.55;
  color: var(--text-2);
}

/* ---------- motion: only where it explains state ---------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

@media (min-width: 1600px) {
  :root {
    --max: 1360px;
  }
}