/* ------------------------------------------------------------------
   Tokens
   ------------------------------------------------------------------ */
:root {
  /* colour */
  --ground: #fbfcfd;
  --paper: #ffffff;
  --ink: #15181d;
  --ink-soft: #4a5260;
  --heading: #0a3471;
  --link: #0b5bc0;
  --link-hover: #073f88;
  --zebra: #edf3fd;
  --edge: #c3cad3;
  --edge-strong: #9aa3ae;

  /* section fields: flat colour, never textured behind body text */
  --field-aqua: #d3e7fc;
  --field-sky: #eef6ff;
  --field-deep: #0c4a94;
  --field-deep-soft: #d6e6fb;

  --aqua-edge: #1f63b8;
  --aqua-ink: #04203f;
  --aqua-tint: #e3f1ff;
  --select: #2f69c9;

  /* textures: masthead, panel title strips and footer only */
  --pinstripe: repeating-linear-gradient(180deg, #f4f5f7 0 2px, #ebedf0 2px 4px);
  --brushed:
    repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 1px, rgba(0,0,0,.025) 1px 3px, rgba(255,255,255,.08) 3px 4px),
    linear-gradient(180deg, #eef0f2 0%, #dadee2 100%);

  /* gel */
  --gel-aqua: linear-gradient(180deg, #b5e0ff 0%, #74bdf9 46%, #4a9df0 54%, #72bcfc 100%);
  --gel-aqua-bright: linear-gradient(180deg, #d9f0ff 0%, #a2d5ff 46%, #78bdfb 54%, #a3d7ff 100%);
  --gel-aqua-down: linear-gradient(180deg, #86c6f7 0%, #4b9ae9 46%, #2a7bdc 54%, #4c9bec 100%);
  --gel-graphite: linear-gradient(180deg, #ffffff 0%, #eef0f2 46%, #dde1e6 54%, #f0f2f4 100%);
  --gel-graphite-down: linear-gradient(180deg, #e3e6ea 0%, #d3d8de 46%, #c3c9d0 54%, #d6dbe0 100%);

  /* type */
  --font-ui: "Istok Web", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", system-ui, sans-serif;
  --font-text: "Literata", Georgia, "Times New Roman", serif;
  --step-small: 1rem;                                           /* 16px */
  --step-tag: 0.9375rem;                                        /* 15px, tags only */
  --step-body: clamp(1.0625rem, 1.01rem + 0.25vw, 1.1875rem);   /* 17 → 19px */
  --step-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
  --step-h2: clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --step-h1: clamp(3rem, 2.1rem + 4.4vw, 5.5rem);

  /* space */
  --gutter: 16px;
  --measure: 40rem;
  --frame: calc(var(--measure) + 2 * var(--gutter));
  --section-gap: clamp(64px, 3rem + 5vw, 120px);
  --radius: 12px;

  /* motion */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

@media (min-width: 480px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }
@media (min-width: 1100px) { :root { --frame: 64rem; } }

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--step-body);
  line-height: 1.65;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-ui);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
  color: var(--link);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.18em;
  border-radius: 3px;
  transition: color 160ms ease, background-color 160ms ease;
}
a:active { background-color: var(--aqua-tint); }
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--link-hover); }
}

:focus-visible {
  outline: 3px solid var(--link);
  outline-offset: 3px;
}

::selection { background: #b9dcff; color: var(--ink); }

svg { display: block; max-width: 100%; height: auto; }
button { font: inherit; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip {
  position: absolute;
  left: 8px;
  top: -100px;
  padding: 10px 16px;
  background: var(--paper);
  font-family: var(--font-ui);
  z-index: 10;
}
.skip:focus { top: 8px; }

.nw { white-space: nowrap; }

/* ------------------------------------------------------------------
   Masthead: pinstripes live here, never behind body text
   ------------------------------------------------------------------ */
.masthead {
  background: var(--pinstripe);
  border-bottom: 1px solid var(--edge);
}

.bar {
  position: relative;
  max-width: var(--frame);
  margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  flex-wrap: wrap;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--ink);
  text-decoration: none;
}

/* a small aqua gel drop: original mark */
.wordmark__drop {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--gel-aqua);
  border: 1px solid var(--aqua-edge);
  box-shadow: 0 1px 2px rgba(13, 60, 130, .3);
  position: relative;
}
.wordmark__drop::before {
  content: "";
  position: absolute;
  left: 4px; right: 4px; top: 2px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.2));
}

/* phones: without script the links wrap under the name; with script they live in a menu */
@media (max-width: 759px) {
  .nav {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 -12px;
    font-family: var(--font-ui);
    font-size: 1rem;
  }
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 999px;
  }
}

@media (min-width: 760px) {
  .nav {
    display: flex;
    gap: 4px;
    margin-right: -12px; /* link text lines up with the frame edge */
    font-family: var(--font-ui);
    font-size: var(--step-small);
  }
  .nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--ink);
    text-decoration: none;
    border-radius: 999px;
  }
  .nav a:active { background: var(--aqua-tint); }
}
@media (min-width: 760px) and (hover: hover) and (pointer: fine) {
  .nav a:hover { background: rgba(255,255,255,.75); color: var(--ink); }
}

.intro {
  max-width: var(--frame);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 88px) var(--gutter) clamp(40px, 6vw, 96px);
  display: grid;
  gap: 36px;
}

.intro h1 {
  font-size: var(--step-h1);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 20px;
}

.lede {
  font-size: clamp(1.1875rem, 1.05rem + 0.6vw, 1.5rem);
  line-height: 1.5;
  max-width: 35ch;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

@media (min-width: 680px) {
  .intro {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(24px, 4vw, 56px);
  }
}

/* ------------------------------------------------------------------
   Gel buttons
   ------------------------------------------------------------------ */
.gel {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 22px;
  border: 1px solid var(--aqua-edge);
  border-radius: 999px;
  background: var(--gel-aqua);
  box-shadow:
    inset 0 -3px 5px rgba(255, 255, 255, .35),
    0 2px 3px rgba(13, 60, 130, .28);
  color: var(--aqua-ink);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  transition: transform 140ms var(--ease-out), filter 160ms ease;
}

/* top highlight */
.gel::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 10px;
  right: 10px;
  top: 2px;
  height: 46%;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.15));
  pointer-events: none;
}

.gel:active {
  transform: scale(0.97);
  background: var(--gel-aqua-down);
}

.gel--graphite {
  border-color: var(--edge-strong);
  background: var(--gel-graphite);
  box-shadow:
    inset 0 -3px 5px rgba(255, 255, 255, .6),
    0 2px 3px rgba(30, 40, 55, .16);
  color: var(--ink);
}
.gel--graphite:active { background: var(--gel-graphite-down); }

.gel--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: var(--step-small);
}

@media (hover: hover) and (pointer: fine) {
  .gel:hover { filter: brightness(1.04) saturate(1.12); color: var(--aqua-ink); }
  .gel--graphite:hover { filter: brightness(1.02); color: var(--ink); }
}

.gel:focus-visible { outline-offset: 4px; }

/* ------------------------------------------------------------------
   Phone menu: three bars that open a dropdown of the sections
   ------------------------------------------------------------------ */
.menu-btn { display: none; gap: 10px; padding: 0 16px; }

.menu-btn__bars,
.menu-btn__bars::before,
.menu-btn__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}
.menu-btn__bars { position: relative; transition: background-color 0s 90ms; }
.menu-btn__bars::before,
.menu-btn__bars::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 220ms var(--ease-out);
}
.menu-btn__bars::before { transform: translateY(-6px); }
.menu-btn__bars::after { transform: translateY(6px); }

.menu-btn[aria-expanded="true"] .menu-btn__bars { background-color: transparent; transition-delay: 0s; }
.menu-btn[aria-expanded="true"] .menu-btn__bars::before { transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars::after { transform: rotate(-45deg); }

@media (max-width: 759px) {
  .has-js .menu-btn { display: inline-flex; }

  .has-js .nav {
    position: absolute;
    top: calc(100% - 2px);
    right: var(--gutter);
    z-index: 20;
    width: min(280px, calc(100% - 2 * var(--gutter)));
    margin: 0;
    padding: 6px;
    flex-direction: column;
    flex-wrap: nowrap;
    background: #fff;
    border: 1px solid var(--edge);
    border-radius: 14px;
    box-shadow:
      0 2px 6px rgba(20, 30, 45, .12),
      0 24px 44px -20px rgba(12, 50, 110, .45);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.97);
    transition: opacity 120ms ease-out, transform 120ms ease-out, visibility 0s linear 120ms;
  }
  .has-js .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 180ms ease-out, transform 220ms var(--ease-out), visibility 0s;
  }
  .has-js .nav a {
    display: flex;
    min-height: 48px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 1.0625rem;
    -webkit-tap-highlight-color: transparent;
  }
  /* menu highlight: the selected row turns aqua-selection blue */
  .has-js .nav a:active { background: var(--select); color: #fff; }
}
@media (max-width: 759px) and (hover: hover) and (pointer: fine) {
  .has-js .nav a:hover { background: var(--select); color: #fff; }
}
@media (max-width: 759px) and (prefers-reduced-motion: reduce) {
  .has-js .nav, .has-js .nav.is-open { transform: none; }
  .menu-btn__bars::before, .menu-btn__bars::after { transition: none; }
}

/* the default button breathes, like the old default button did */
.gel--default::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background: var(--gel-aqua-bright);
  opacity: 0;
  pointer-events: none;
}

/* ------------------------------------------------------------------
   Boot picker: the hero's one live thing
   ------------------------------------------------------------------ */
.picker {
  container: picker / inline-size;
  width: 100%;
  max-width: 440px;
  padding: 14px;
  background: var(--brushed);
  border: 1px solid #a9b1bb;
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 #fff,
    0 2px 4px rgba(20, 30, 45, .08),
    0 24px 44px -26px rgba(12, 50, 110, .55);
}
@media (min-width: 680px) { .picker { justify-self: end; } }

.picker__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin-bottom: 12px;
}

.picker__title {
  margin: 0;
  padding-left: 4px;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

/* segmented control */
.seg {
  display: inline-flex;
  border: 1px solid #8f99a5;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(20, 30, 45, .14);
}
.seg[hidden] { display: none; }
.seg button {
  min-height: 44px;
  padding: 0 14px;
  border: 0;
  background: var(--gel-graphite);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: filter 160ms ease;
}
.seg button + button { border-left: 1px solid #9aa3ae; }
.seg button[aria-pressed="true"] {
  background: var(--gel-aqua);
  color: var(--aqua-ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.seg button:active { filter: brightness(.92); }
.seg button:focus-visible { outline-offset: -3px; }

/* the drive shelf */
.drives {
  list-style: none;
  margin: 0;
  padding: 14px 6px 12px;
  display: flex;
  justify-content: center;
  gap: 4px;
  border-radius: 12px;
  background: #e2effd;
  box-shadow: inset 0 1px 3px rgba(15, 40, 80, .2);
}
.drives[hidden] { display: none; }
.drives > li { flex: 0 1 33.333%; min-width: 0; }

.drive {
  width: 100%;
  min-height: 44px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 2px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--ink);
  font-family: var(--font-ui);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.drive__art {
  display: grid;
  place-items: center;
  width: 80px;
  height: 76px;
  border-radius: 12px;
  transition: background-color 160ms ease;
}
.drive svg {
  width: 70px;
  height: 70px;
  color: var(--led);
  transition: transform 200ms var(--ease-out);
}

.drive__label {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
/* one pill per line when a name wraps, like old Finder labels */
.drive__name {
  padding: 1px 7px;
  border-radius: 999px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color 160ms ease, color 160ms ease;
}

.drive:active svg { transform: scale(0.93); }
.drive[aria-pressed="true"] .drive__art { background: rgba(10, 40, 80, .13); }
.drive[aria-pressed="true"] .drive__name { background: var(--select); color: #fff; }

@media (hover: hover) and (pointer: fine) {
  .drive:hover svg { transform: translateY(-3px); }
  .drive:active svg { transform: scale(0.93); }
}

/* narrow picker: drives become a list, icon left, name right */
@container picker (max-width: 359px) {
  .drives {
    flex-direction: column;
    justify-content: flex-start;
    gap: 2px;
    padding: 6px;
    min-height: calc(3 * 56px + 2 * 2px + 12px);
  }
  .drives > li { flex: none; }
  .drive {
    flex-direction: row;
    gap: 10px;
    padding: 2px 6px;
    min-height: 56px;
  }
  .drive__art { width: 56px; height: 52px; flex: none; }
  .drive svg { width: 48px; height: 48px; }
  .drive__label { text-align: left; white-space: nowrap; font-size: 1rem; }
}

.picker__status {
  display: grid;
  gap: 10px;
  margin-top: 12px;
  padding: 0 4px;
}
.picker__status p {
  margin: 0;
  min-height: 1.5em;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.5;
}

/* Aqua-style progress bar with moving stripes */
.progress {
  position: relative;
  height: 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, #c9d0d8, #eef1f4);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .25);
  overflow: hidden;
}
.progress[hidden] { display: none; }
.progress__fill {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: var(--gel-aqua);
  clip-path: inset(0 100% 0 0 round 999px);
}
.progress__fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -32px;
  right: 0;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.45) 0 8px, rgba(255,255,255,0) 8px 16px);
}
.progress.is-booting .progress__fill { clip-path: inset(0 0 0 0 round 999px); }
@media (prefers-reduced-motion: no-preference) {
  .progress.is-booting .progress__fill { transition: clip-path 1400ms var(--ease-in-out); }
}
.progress.is-done .progress__fill { clip-path: inset(0 0 0 0 round 999px); }

/* ------------------------------------------------------------------
   Reading column and coloured sections
   ------------------------------------------------------------------ */
.col {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding-block: var(--section-gap); }
.field-paper { background: var(--paper); }
.field-aqua { background: var(--field-aqua); }
.field-sky { background: var(--field-sky); }
.field-deep { background: var(--field-deep); color: #fff; }

/* main rig and home server share one field, so they read as a pair */
.field-aqua + .field-aqua { padding-top: 0; }

.section h2 {
  font-size: var(--step-h2);
  color: var(--heading);
  margin-bottom: 20px;
}
.field-deep h2 { color: #fff; }
.field-deep p { color: var(--field-deep-soft); }

.section h3 {
  font-size: var(--step-h3);
  color: var(--heading);
  margin: 48px 0 12px;
}

/* ------------------------------------------------------------------
   Spec sheet: the page's object
   ------------------------------------------------------------------ */
.sheet {
  margin-top: 28px;
  background: var(--paper);
  border: 1px solid #b4c3d6;
  border-radius: var(--radius);
  box-shadow:
    0 1px 2px rgba(20, 30, 45, .06),
    0 14px 30px -16px rgba(12, 50, 110, .35);
  overflow: hidden;
}

.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 12px 16px;
  background: var(--brushed);
  border-bottom: 1px solid var(--edge-strong);
}

.sheet__title {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.0625rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
}

.specs { margin: 0; }

.specs > div {
  display: grid;
  gap: 2px;
  padding: 12px 16px;
  transition: background-color 160ms ease;
}
.specs > div:nth-child(even) { background: var(--zebra); }
@media (hover: hover) and (pointer: fine) {
  .specs > div:hover { background: #dcebfd; }
}

.specs dt {
  font-family: var(--font-ui);
  font-size: var(--step-small);
  font-weight: 700;
  color: var(--ink-soft);
}

.specs dd {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  line-height: 1.45;
}

@media (min-width: 30em) {
  .specs > div {
    grid-template-columns: 8.5rem minmax(0, 1fr);
    gap: 16px;
    align-items: baseline;
  }
  .specs > div:has(.tags) { align-items: start; }
  .specs > div:has(.tags) dt { padding-top: 4px; }
}

/* ------------------------------------------------------------------
   Tags: small glossy lozenges
   ------------------------------------------------------------------ */
.tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px;
  border: 1px solid var(--edge-strong);
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #f1f3f5 48%, #e2e6ea 52%, #eef0f3 100%);
  box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(20, 30, 45, .1);
  font-family: var(--font-ui);
  font-size: var(--step-tag);
  font-weight: 700;
  line-height: 1.35;
  color: var(--ink);
}

.tag--aqua {
  border-color: #6aa6e6;
  background: linear-gradient(180deg, #f2f9ff 0%, #d9edff 48%, #c3e1ff 52%, #dbefff 100%);
  color: #0a3a7a;
}

/* ------------------------------------------------------------------
   Local AI
   ------------------------------------------------------------------ */
.plain { margin: 28px 0 0; }
.plain > div + div { margin-top: 16px; }
.plain dt {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.0625rem;
}
.plain dd { margin: 2px 0 0; }

/* the second live thing: 30 tokens a second, played back */
.speed {
  margin-top: 36px;
  padding: 16px;
  border-radius: var(--radius);
  background: var(--brushed);
  border: 1px solid #b4c3d6;
  box-shadow: 0 14px 30px -18px rgba(12, 50, 110, .35);
}

.speed__head {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--step-small);
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, .8);
  margin-bottom: 10px;
}

/* inset text field, Aqua style */
.speed__out {
  display: grid;
  padding: 14px 16px;
  background: var(--paper);
  border: 1px solid var(--edge-strong);
  border-radius: 8px;
  box-shadow: inset 0 1px 3px rgba(20, 30, 45, .14);
}
.speed__out > p { grid-area: 1 / 1; margin: 0; }
.speed__ghost { visibility: hidden; }
.speed__text.is-streaming::after {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--link);
  border-radius: 2px;
}

.speed__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  margin-top: 14px;
}
.speed__meta {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--step-small);
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

/* model entries: smaller spec labels */
.model {
  margin-top: 20px;
  padding: 18px 16px 20px;
  background: var(--paper);
  border: 1px solid #c4d3e6;
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(20, 30, 45, .06), 0 10px 24px -18px rgba(12, 50, 110, .3);
}
.model + .model { margin-top: 16px; }

.model__name {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.3;
}
.model__by {
  margin: 2px 0 12px;
  font-family: var(--font-ui);
  font-size: var(--step-small);
  color: var(--ink-soft);
}
.model .tags { margin-bottom: 14px; }
.model p:not([class]) { margin-bottom: 0; }
.model .gel { margin-top: 18px; }

@media (min-width: 480px) {
  .speed { padding: 20px; }
  .model { padding: 22px 24px 24px; }
  .specs > div, .sheet__head { padding-left: 20px; padding-right: 20px; }
}

/* ------------------------------------------------------------------
   Footer
   ------------------------------------------------------------------ */
.foot {
  background: var(--pinstripe);
  border-top: 1px solid var(--edge);
  font-family: var(--font-ui);
  font-size: var(--step-small);
}
.foot__inner {
  max-width: var(--frame);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
}
.foot p { margin: 0; color: var(--ink-soft); }
.foot a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* ------------------------------------------------------------------
   Motion. Content is always visible without it.
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  /* first screen arrives in order */
  .intro__text > *,
  .picker {
    animation: rise 560ms var(--ease-out) both;
  }
  .intro__text > :nth-child(2) { animation-delay: 60ms; }
  .intro__text > :nth-child(3) { animation-delay: 120ms; }
  .picker { animation-delay: 180ms; }

  .drives > li { animation: rise 480ms var(--ease-out) both; }
  .drives > li:nth-child(1) { animation-delay: 260ms; }
  .drives > li:nth-child(2) { animation-delay: 320ms; }
  .drives > li:nth-child(3) { animation-delay: 380ms; }
  .drives.is-switching > li { animation-name: shelf; animation-duration: 320ms; }
  .drives.is-switching > li:nth-child(1) { animation-delay: 0ms; }
  .drives.is-switching > li:nth-child(2) { animation-delay: 50ms; }
  .drives.is-switching > li:nth-child(3) { animation-delay: 100ms; }

  /* default button throb */
  .gel--default::after { animation: throb 1.8s ease-in-out 1s infinite alternate; }

  .progress.is-booting .progress__fill::after { animation: pole 700ms linear infinite; }

  /* the LED of the chosen drive blinks while it boots */
  .drive.is-booting svg { animation: blink 260ms steps(2, jump-none) infinite; }

  /* sections: each block rises once as it comes into view */
  .js .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 560ms var(--ease-out), transform 560ms var(--ease-out);
  }
  .js .reveal.is-in { opacity: 1; transform: none; }

  /* spec rows and tags cascade in after their sheet */
  .js .sheet.reveal .specs > div,
  .js .model.reveal .tag {
    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 420ms var(--ease-out) calc(var(--i, 0) * 60ms + 160ms),
      transform 420ms var(--ease-out) calc(var(--i, 0) * 60ms + 160ms),
      background-color 160ms ease;
  }
  .js .sheet.reveal.is-in .specs > div,
  .js .model.reveal.is-in .tag { opacity: 1; transform: none; }
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes shelf {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  to { opacity: 1; transform: none; }
}
@keyframes throb {
  from { opacity: 0; }
  to { opacity: .9; }
}
@keyframes pole {
  to { transform: translateX(22.63px); }
}
@keyframes blink {
  from { opacity: 1; }
  to { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .gel, a, .drive svg { transition: none; }
  .gel:active, .drive:active svg { transform: none; }
}