/* GENERATED by scripts/build_web.py from static/css/app (all stylesheets). Do not edit. source-hash: 749b7da72ec252a8 */
/* fonts.css */
/* fonts.css — the interface uses the system font (SF Pro on Apple devices). Inter and JetBrains Mono are bundled
   (both SIL Open Font License, Latin subset) as the fallback so it looks the same on every machine, offline.
   The URLs are relative to dist/app.css so the app also works when it is hosted under a sub-path. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/inter-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 500; font-display: swap; src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2'); }

/* tokens.css */
/* tokens.css — every colour, font and size lives here. Change a token, change the whole app.

   Design language: Apple. White and system-gray surfaces, one blue accent, the system font set large and tight,
   hairline separators instead of boxes and shadows, pill buttons, grouped lists, and the molecule as the
   product shot. Colour is spent in one place per screen (the primary action); everything else is type and space.

   THE ACCENT: one token (--accent) fills the primary button; --link colours text links. The avatar menu swaps
   both at runtime (see ACCENTS in js/config.mjs).

   Note: the 3D stage reads --stage-haze, --protein, --peptide, --accent, --warn and --danger as plain
   hex colours, so keep those six as hex. --stage-haze must equal the page background. */

:root {
  /* ---- the accent ---- */
  --accent: #0071e3;
  --accent-ink: #ffffff;                      /* text on top of the accent */
  --link: #0066cc;                            /* text links (needs 4.5:1 on the page) */
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);

  /* ---- the two molecule colours (always the same: protein cool gray, peptide orange) ---- */
  --protein: #8593a8;
  --peptide: #ff9500;

  /* ---- light appearance (default follows the system; the avatar menu overrides it) ---- */
  --bg: #ffffff;
  --bg-2: #f5f5f7;                            /* the second page tone (bands below the first screenful) */
  --bg-image: none;
  --stage-haze: #ffffff;                      /* far parts of the protein fade towards this */
  --ink: #1d1d1f;                             /* label */
  --ink-2: #424245;                           /* secondary label */
  --ink-3: #6e6e73;                           /* tertiary label (still ≥ 4.5:1 on --bg and --group) */
  --line: rgba(0, 0, 0, 0.12);                /* hairline separator */
  --line-strong: rgba(0, 0, 0, 0.24);
  --group: #f5f5f7;                           /* grouped list / tile fill */
  --group-hover: #ebebf0;
  --glass: rgba(255, 255, 255, 0.78);         /* thin material: the nav bar, popovers */
  --glass-strong: var(--group);               /* legacy name: grouped surface */
  --field: rgba(118, 118, 128, 0.12);         /* control fill (fields, segmented track) */
  --field-on-group: #ffffff;                  /* a field that sits inside a grouped list */
  --thumb: #ffffff;                           /* the selected segment */
  --shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 12px 40px rgba(0, 0, 0, 0.14);
  --shadow-soft: none;
  --warn: #a35200;
  --danger: #d70015;
  --ok: #217a3a;
  --demo-bg: rgba(255, 149, 0, 0.16);
  --demo-ink: #8a4600;

  /* ---- type: the system font (SF Pro on Apple devices); Inter is bundled as the look-alike fallback ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Inter', system-ui, 'Segoe UI', Roboto, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, Consolas, monospace;

  /* ---- shape & motion ---- */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 980px;
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-sheet: cubic-bezier(0.32, 0.72, 0, 1);
  --t-fast: 150ms;
  --t-med: 260ms;
  --gutter: clamp(20px, 5vw, 48px);
  --maxw: 1180px;
  --nav-h: 48px;
}

/* ---- dark appearance: true black with elevated gray groups (what Apple does), not inverted colours ---- */
:root[data-theme='dark'] {
  color-scheme: dark;
  --protein: #a4b2c7;
  --peptide: #ff9f0a;
  --bg: #000000;
  --bg-2: #0a0a0c;
  --stage-haze: #000000;
  --ink: #f5f5f7;
  --ink-2: #d1d1d6;
  --ink-3: #98989f;
  --line: rgba(255, 255, 255, 0.16);
  --line-strong: rgba(255, 255, 255, 0.3);
  --group: #1c1c1e;
  --group-hover: #2c2c2e;
  --glass: rgba(29, 29, 31, 0.72);
  --field: rgba(118, 118, 128, 0.24);
  --field-on-group: #2c2c2e;
  --thumb: #636366;
  --shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.1), 0 16px 48px rgba(0, 0, 0, 0.7);
  --warn: #ffb340;
  --danger: #ff6961;
  --ok: #4cd964;
  --demo-bg: rgba(255, 179, 64, 0.18);
  --demo-ink: #ffcc80;
}

/* base.css */
/* base.css — reset, page background, typography, focus, reduced motion. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
[hidden] { display: none !important; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font: 400 17px/1.47 var(--font-sans);
  letter-spacing: -0.011em;
  background-color: var(--bg);
  background-image: var(--bg-image);
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--t-med) var(--ease), color var(--t-med) var(--ease);
}

/* The canvas sits behind the interface. Empty areas let clicks through to it (drag to rotate). */
#stage {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100vh;
  touch-action: pan-y;
  outline: none;
}
#stage:focus-visible { outline: 3px solid var(--accent-line); outline-offset: -4px; }
#app { position: relative; z-index: 1; min-height: 100vh; pointer-events: none; }
/* Interactive things (and the text blocks people want to select) catch clicks; everything else
   lets them fall through to the canvas so the protein can be dragged. Note `main` has
   tabindex="-1" for focus management, so it must NOT match the [tabindex] rule. */
#app :where(button, a, input, select, textarea, summary, label, .glass, .card, .start-card, .notice, .hero-copy, .page-head, .home-head, [tabindex]:not(#main), [role='dialog'], table) { pointer-events: auto; }
#topbar { pointer-events: auto; }

/* Type scale: large, tight, and few sizes. Weight and colour carry the hierarchy; there are no uppercase labels. */
h1, h2, h3, h4 { margin: 0; font-weight: 600; }
h1 { font-size: clamp(32px, 4.4vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.125; letter-spacing: -0.024em; }
h3 { font-size: 21px; line-height: 1.19; letter-spacing: -0.018em; }
.display { font-size: clamp(44px, 7.2vw, 88px); font-weight: 600; letter-spacing: -0.045em; line-height: 1.02; }
.serif { font-family: var(--font-sans); } /* legacy hook: everything is the system font */
p { margin: 0; }
.lede { font-size: clamp(19px, 1.9vw, 24px); line-height: 1.3; letter-spacing: -0.016em; color: var(--ink-3); max-width: 30ch; font-weight: 400; }
.small { font-size: 14px; }
.muted { color: var(--ink-3); }
.mono { font-family: var(--font-mono); font-size: 0.92em; letter-spacing: 0; }
.eyebrow { font-size: 15px; font-weight: 500; color: var(--ink-3); letter-spacing: -0.01em; } /* a plain secondary label (kept as a hook) */
.tech { display: block; font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: 0; line-height: 1.35; }
.nums { font-variant-numeric: tabular-nums; }

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; border-radius: 8px; }
::selection { background: var(--accent-soft); }

.skip-link {
  position: fixed; left: 12px; top: -60px; z-index: 100; padding: 10px 18px;
  background: var(--accent); color: var(--accent-ink); border-radius: var(--r-pill); text-decoration: none;
  transition: top var(--t-fast) var(--ease);
}
.skip-link:focus { top: 8px; }

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

#main:focus { outline: none; } /* the page container takes focus after in-app navigation; it is not a control, so no ring */
/* Guided shows plain-language help; Expert shows the technical detail. One attribute flips both. */
[data-mode='guided'] .expert-only { display: none !important; }
[data-mode='expert'] .guided-only { display: none !important; }
/* the technical captions under titles ("Receptor structure (PDB)", "ΔG") belong to Expert; Guided stays plain */
[data-mode='guided'] .tech { display: none; }

/* Reduce Motion: no movement, only instant changes (opacity fades are fine, so keep them short). */
@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; }
}

/* layout.css */
/* layout.css — the navigation bar, the screen container, and the "3D view + content" split. */

/* ---- the navigation bar: a thin translucent material, like apple.com's. A hairline appears once you scroll. ---- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px;
  height: var(--nav-h); padding: 0 var(--gutter);
  background: var(--bg);
  border-bottom: 1px solid transparent;
  transition: border-color var(--t-med) var(--ease), background-color var(--t-med) var(--ease);
}
/* the blur only exists once there is content scrolling under the bar; at the top there is nothing to blur,
   and a live blur over the animated 3D view is the most expensive thing on the page */
.topbar.scrolled { background: color-mix(in srgb, var(--bg) 78%, transparent); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom-color: var(--line); }
.brand {
  justify-self: start; display: inline-flex; align-items: center; gap: 8px;
  font: 600 17px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--ink); white-space: nowrap;
  background: none; border: 0; cursor: pointer; padding: 8px 4px; margin-left: -4px; border-radius: 8px;
}
.brand svg { color: var(--ink); }
.nav-links { justify-self: center; display: flex; align-items: center; gap: clamp(4px, 2vw, 28px); }
.nav-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-3); border-radius: 8px; text-decoration: none; transition: color var(--t-fast) var(--ease); }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a[aria-current='page'] { color: var(--ink); font-weight: 500; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 4px; }
.topbar .btn:not(.primary) { background: transparent; color: var(--ink-2); }
.topbar .btn:not(.primary):hover { background: var(--field); color: var(--ink); }
.topbar .seg { margin-right: 6px; }
.topbar .chip { background: none; padding: 4px 8px; font-size: 13px; color: var(--ink-3); }
.topbar button.chip:hover { background: var(--field); color: var(--ink); }

/* phones and small tablets: the three destinations move to a tab bar at the bottom, like an iPhone app */
.tabbar { display: none; }
@media (max-width: 900px) {
  .topbar { grid-template-columns: 1fr auto; }
  .topbar .nav-links { display: none; }
  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: flex; justify-content: space-around;
    padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--bg) 82%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid var(--line);
  }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 48px; font-size: 11px; font-weight: 500; letter-spacing: 0; color: var(--ink-3); text-decoration: none; border-radius: 10px; }
  .tabbar a[aria-current='page'] { color: var(--accent); }
  .tabbar a svg { width: 24px; height: 24px; }
  #main { padding-bottom: 0; }
}

.screen {
  width: min(100%, var(--maxw));
  margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) var(--gutter) 80px;
  animation: screen-in var(--t-med) var(--ease) both;
}
@keyframes screen-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Setup / Results: the model stays put on the left while the content scrolls on the right (like apple.com's buy flow).
   On narrow screens the content moves BELOW the 3D view. */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 440px); gap: clamp(24px, 5vw, 72px); align-items: start; }
.stage-slot { position: relative; min-height: clamp(380px, 62vh, 640px); pointer-events: none; }
.split > .stage-slot { position: sticky; top: calc(var(--nav-h) + 24px); height: calc(100vh - var(--nav-h) - 72px); min-height: 420px; max-height: 680px; }
.stage-slot .legend { position: absolute; left: 0; bottom: 0; display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--ink-3); }
.stage-slot .hint { position: absolute; left: 0; top: 0; font-size: 14px; color: var(--ink-3); max-width: 36ch; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.dot.protein { background: var(--protein); }
.dot.peptide { background: var(--peptide); }
.dot.box { background: transparent; border: 2px solid var(--accent); border-radius: 3px; }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .stage-slot, .split > .stage-slot { position: relative; top: auto; height: auto; min-height: clamp(260px, 42vh, 420px); max-height: none; }
}

/* a phone: a short bar (name, detail level, status dot, avatar); History and Help move into the avatar menu */
.menu-links { display: none; }
@media (max-width: 640px) {
  .topbar { gap: 8px; }
  .brand { font-size: 16px; white-space: nowrap; }
  .topbar .bar-only { display: none; }
  .topbar .badge-demo { font-size: 0; } /* "Demo mode" is shortened to "Demo" on a phone; the full words stay for screen readers */
  .topbar .badge-demo::before { content: 'Demo'; font-size: 12px; }
  .topbar .chip-text, .topbar .ram-pct { display: none; }
  .topbar .chip { padding: 4px; }
  .topbar .ram[data-on='true'] { width: 32px; height: 22px; }
  .topbar .btn.primary .label { display: none; } /* the run pill is just its play icon on a phone; its name stays for screen readers */
  .topbar .ram-bubble { position: fixed; top: calc(var(--nav-h) + 4px); left: 12px; right: 12px; width: auto; max-width: none; }
  .topbar .ram-bubble::before { display: none; }
  .topbar button.chip { min-width: 44px; min-height: 44px; justify-content: center; }
  .topbar .seg { margin-right: 0; }
  .menu-links { display: flex; gap: 8px; }
  .menu-links .btn { flex: 1; }
}
@media (max-width: 520px) { .brand { font-size: 0; gap: 0; } .brand svg { width: 28px; height: 28px; } .topbar { gap: 4px; } .topbar .seg button { padding: 0 10px; } .topbar-actions { gap: 0; } .topbar button.chip { padding: 4px; } }

@media (pointer: coarse) { :root { --nav-h: 56px; } .brand { min-height: 44px; min-width: 44px; justify-content: center; } .nav-links a { min-height: 44px; } }

/* components.css */
/* components.css — buttons, groups, fields, switches, segmented controls, lists, steps, sheets. */

/* ---- buttons ---- */
/* Default: a quiet gray pill. Primary: the one filled blue pill on a screen. Ghost: a plain blue text link. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 22px;
  font: 500 15px/1 var(--font-sans); letter-spacing: -0.01em; color: var(--ink);
  background: var(--field); border: 0; border-radius: var(--r-pill);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background var(--t-fast) var(--ease), opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn:hover { background: color-mix(in srgb, var(--field) 55%, var(--line-strong)); text-decoration: none; }
.btn:active { transform: scale(0.97); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.4; cursor: not-allowed; transform: none; }
.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent); filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--link); padding-inline: 12px; }
.btn.ghost:hover { background: transparent; text-decoration: underline; }
.btn.lg { min-height: 52px; padding: 0 30px; font-size: 17px; font-weight: 400; }
.btn.sm { min-height: 34px; padding: 0 16px; font-size: 14px; }
.btn.icon { width: 36px; min-height: 36px; padding: 0; border-radius: 50%; }
.btn.danger { color: var(--danger); }
.btn svg { flex: none; }
@media (pointer: coarse) { .btn.sm, .btn.icon { min-height: 44px; } .btn.icon { width: 44px; } }

/* ---- surfaces ---- */
/* .card = a grouped tile (a flat gray fill, no border, no shadow). .glass = thin material, used only for things that
   float: popovers and sheets. Content panels next to the 3D view are plain page, not boxes. */
.card { background: var(--group); border-radius: var(--r-md); }
.glass { background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(24px); backdrop-filter: saturate(180%) blur(24px); border-radius: var(--r-lg); box-shadow: var(--shadow); }
.panel { display: flex; flex-direction: column; gap: 28px; }
.panel.glass { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; }
.panel-title { scroll-margin-top: calc(var(--nav-h) + 24px); font: 600 clamp(28px, 3.2vw, 36px)/1.1 var(--font-sans); letter-spacing: -0.03em; }
.panel-title .tech { margin-top: 8px; font-size: 15px; letter-spacing: -0.01em; }
.compare-pep { max-width: 560px; gap: 8px; }
.panel-foot { display: flex; gap: 12px; justify-content: space-between; align-items: center; margin-top: 4px; }

/* "Why this matters" notes (Guided only): a footnote in plain gray, the way Apple writes under a grouped list */
.note { display: block; font-size: 15px; line-height: 1.45; color: var(--ink-3); }
.note > svg { display: none; }
.note b { color: var(--ink-2); font-weight: 600; }

/* ---- form fields ---- */
.field-label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 8px; letter-spacing: -0.01em; }
.field {
  width: 100%; min-height: 48px; padding: 12px 16px;
  font: 400 17px/1.3 var(--font-sans); letter-spacing: -0.011em; color: var(--ink);
  background: var(--field); border: 1px solid transparent; border-radius: var(--r-md);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
select.field { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1.5 5 5 5-5' fill='none' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; }
.field::placeholder { color: var(--ink-3); text-transform: none; }
.field:focus { outline: none; border-color: var(--accent); background-color: var(--bg); box-shadow: 0 0 0 4px var(--accent-soft); }
.field.mono, textarea.field.mono { font-family: var(--font-mono); font-size: 16px; letter-spacing: 0.04em; }
.field[aria-invalid='true'] { border-color: var(--danger); }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid-3 .field { padding-inline: 12px; }
input[type='range'] { width: 100%; accent-color: var(--accent); height: 28px; }

/* the iOS switch (every checkbox in the app is a switch) */
input[type='checkbox'] {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 51px; height: 31px; margin: 0; cursor: pointer;
  background: var(--line-strong); border-radius: 31px; transition: background var(--t-fast) var(--ease);
}
input[type='checkbox']::before { content: ''; position: absolute; left: 2px; top: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), 0 1px 1px rgba(0, 0, 0, 0.16); transition: transform var(--t-fast) var(--ease-sheet); }
input[type='checkbox']:checked { background: var(--accent); }
input[type='checkbox']:checked::before { transform: translateX(20px); }
input[type='checkbox']:focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; }
.check { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; gap: 16px; font-size: 16px; }
.check small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.35; }

/* ---- validation messages ---- */
.msg { display: flex; gap: 8px; font-size: 15px; align-items: flex-start; }
.msg svg { flex: none; margin-top: 3px; }
.msg.ok { color: var(--ok); }
.msg.warn { color: var(--warn); }
.msg.error, .msg.bad { color: var(--danger); }
.msg.empty { color: var(--ink-3); }

/* ---- chips & badges ---- */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 14px; font-weight: 400;
  color: var(--ink-2); background: var(--field); border: 0; border-radius: var(--r-pill);
  cursor: default; white-space: nowrap;
}
button.chip { cursor: pointer; font-family: inherit; }
button.chip:hover { color: var(--ink); background: color-mix(in srgb, var(--field) 55%, var(--line-strong)); }
.badge-demo { white-space: nowrap; display: inline-flex; align-items: center; padding: 2px 10px; font-size: 12px; font-weight: 600; color: var(--demo-ink); background: var(--demo-bg); border-radius: var(--r-pill); }

/* ---- segmented control (Guided / Expert, light / dark): a gray track, a raised white thumb ---- */
.seg { display: inline-flex; padding: 2px; gap: 0; background: var(--field); border-radius: 9px; }
.seg button {
  min-height: 28px; padding: 0 14px; font: 500 13px/1 var(--font-sans); letter-spacing: -0.005em; color: var(--ink);
  background: transparent; border: 0; border-radius: 7px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.seg button[aria-pressed='true'], .seg button[aria-checked='true'] { background: var(--thumb); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08); }
.seg button:not([aria-pressed='true']):not([aria-checked='true']):hover { background: color-mix(in srgb, var(--field) 80%, transparent); }
@media (pointer: coarse) { .seg button { min-height: 44px; } button.chip { min-height: 44px; padding-inline: 14px; } }

/* ---- choices ---- */
/* "Quick / Half / Full" is a full-width segmented control; "I know where / Find it for me" is a list of rows. */
.choice-grid { display: grid; }
.choice-grid.three { grid-template-columns: repeat(3, 1fr); padding: 3px; background: var(--field); border-radius: 12px; gap: 2px; }
.choice-grid.two { grid-template-columns: minmax(0, 1fr); background: var(--group); border-radius: var(--r-md); overflow: hidden; }
.choice {
  position: relative; display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 12px 16px;
  font: 500 16px/1.25 var(--font-sans); letter-spacing: -0.01em; color: var(--ink);
  background: none; border: 0; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.choice small { font-weight: 400; font-size: 13px; color: var(--ink-3); }
.choice-grid.three .choice { align-items: center; text-align: center; border-radius: 10px; padding: 9px 8px; }
.choice-grid.three .choice small { color: var(--ink-2); }
.choice-grid.three .choice[aria-checked='true'] small { color: var(--ink); }
.choice-grid.three .choice[aria-checked='true'] { background: var(--thumb); box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.04), 0 3px 8px rgba(0, 0, 0, 0.12), 0 1px 1px rgba(0, 0, 0, 0.08); }
.choice-grid.two .choice + .choice::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.choice-grid.two .choice:hover { background: var(--group-hover); }
.choice-grid.two .choice[aria-checked='true']::after { content: ''; position: absolute; right: 20px; top: 50%; width: 6px; height: 12px; margin-top: -9px; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.choice-grid.two .choice[aria-checked='true'] { color: var(--link); }

/* ---- the step indicator: four thin bars ("Step 2 of 4"), because the content really is a sequence ---- */
.steps { display: flex; gap: 6px; list-style: none; margin: 0 0 clamp(24px, 3vw, 40px); padding: 0; }
.steps li { flex: 1; display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 400; color: var(--ink-3); }
.steps li::before { content: ''; height: 4px; border-radius: 2px; background: var(--field); transition: background var(--t-med) var(--ease); }
.steps .num { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.steps li.done::before { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.steps li[aria-current='step'] { color: var(--ink); font-weight: 600; }
.steps li[aria-current='step']::before { background: var(--accent); }
@media (max-width: 640px) { .steps li .name { display: none; } .steps li[aria-current='step'] .name { display: inline; } }

/* ---- the protein list: an inset grouped list ---- */
.pick-list { display: flex; flex-direction: column; max-height: 360px; overflow-y: auto; background: var(--group); border-radius: var(--r-md); }
.pick {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; padding: 12px 16px; min-height: 60px;
  font: 500 17px/1.25 var(--font-sans); letter-spacing: -0.011em; color: var(--ink); background: none; border: 0; cursor: pointer;
  transition: background var(--t-fast) var(--ease);
}
.pick + .pick::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.pick-main { min-width: 0; }
.pick-meta { flex: none; display: inline-flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-3); }
.pick small { display: block; font: 400 13px/1.4 var(--font-sans); letter-spacing: 0; color: var(--ink-3); margin-top: 2px; }
.pick:hover { background: var(--group-hover); }
.pick[aria-checked='true'] svg { color: var(--accent); }
.pick svg { flex: none; }
.pick-list > p { padding: 16px; }

/* ---- key/value summary ---- */
.summary { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0; font-size: 16px; background: var(--group); border-radius: var(--r-md); }
.summary dt, .summary dd { padding: 12px 0; border-top: 1px solid var(--line); }
.summary dt:first-of-type, .summary dd:first-of-type { border-top: 0; }
.summary dt { color: var(--ink-3); padding-left: 16px; padding-right: 24px; }
.summary dd { margin: 0; font-weight: 500; word-break: break-word; padding-right: 16px; text-align: right; }

/* ---- command preview (Expert) ---- */
.cmd { position: relative; margin: 0; padding: 16px; padding-right: 52px; font: 400 13px/1.7 var(--font-mono); letter-spacing: 0; color: var(--ink); background: var(--group); border-radius: var(--r-md); overflow-x: auto; white-space: pre; }
.cmd-wrap { position: relative; }
.cmd-wrap .btn { position: absolute; right: 8px; top: 8px; }

/* a disclosure is one grouped row that opens into a list of settings */
details.adv { background: var(--group); border-radius: var(--r-md); overflow: hidden; }
details.adv > summary { cursor: pointer; font-weight: 500; font-size: 16px; padding: 14px 16px; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::after { content: ''; flex: none; width: 7px; height: 7px; margin-right: 3px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
details.adv[open] > summary::after { transform: rotate(-135deg); }
details.adv .stack { display: flex; flex-direction: column; }
/* settings: the label on the left, the control on the right, one hairline between rows (iOS Settings) */
details.adv .stack > div, details.adv .stack > label.check { padding: 12px 16px; border-top: 1px solid var(--line); }
details.adv .stack > div { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 4px 16px; align-items: center; }
details.adv .stack > div > .field-label { margin: 0; font-weight: 500; font-size: 16px; }
details.adv .stack .field { min-height: 36px; padding: 6px 12px; font-size: 15px; background-color: var(--field-on-group); border-radius: 9px; text-align: right; }
details.adv .stack select.field { text-align: left; }
details.adv .stack .field:focus { background-color: var(--bg); }

/* ---- sheets and dialogs (native <dialog>: focus trap + Esc come free). They slide with the iOS curve. ---- */
dialog { color: var(--ink); border: 0; background: color-mix(in srgb, var(--bg) 94%, transparent); -webkit-backdrop-filter: saturate(180%) blur(30px); backdrop-filter: saturate(180%) blur(30px); box-shadow: var(--shadow); padding: 0; }
dialog::backdrop { background: rgba(0, 0, 0, 0.32); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
dialog.drawer { margin: 0 0 0 auto; height: 100vh; max-height: 100vh; width: min(440px, 100vw); border-radius: var(--r-lg) 0 0 var(--r-lg); animation: drawer-in var(--t-med) var(--ease-sheet); }
dialog.modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 48px); border-radius: var(--r-lg); margin: auto; animation: screen-in var(--t-med) var(--ease-sheet); }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.dialog-head { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px 8px; }
.dialog-head h2 { font-size: 24px; font-weight: 600; letter-spacing: -0.024em; }
.dialog-head .btn.icon { width: 30px; min-height: 30px; background: var(--field); color: var(--ink-3); }
.dialog-body { padding: 8px 24px 28px; overflow-y: auto; max-height: calc(100vh - 140px); }

/* ---- toasts: a small dark capsule (like a system HUD) ---- */
.toasts { position: fixed; z-index: 60; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { padding: 12px 20px; font-size: 15px; background: color-mix(in srgb, var(--ink) 92%, transparent); color: var(--bg); border-radius: var(--r-pill); box-shadow: var(--shadow); animation: screen-in var(--t-med) var(--ease); }
@media (max-width: 900px) { .toasts { bottom: 84px; } }

/* ---- the menu behind the avatar ---- */
.swatches { display: flex; gap: 10px; }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 0; cursor: pointer; box-shadow: 0 0 0 1px var(--line-strong) inset; }
.swatch[aria-pressed='true'] { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--ink-3); }
.popover { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; padding: 16px; display: flex; flex-direction: column; gap: 16px; min-width: 240px; border-radius: 14px; }
.popover .menu-row { display: flex; flex-direction: column; gap: 8px; }
.popover .menu-row > .small { font-weight: 500; color: var(--ink-3); }
.popover .field { min-height: 40px; font-size: 16px; }
.rel { position: relative; }

.avatar { display: grid; place-items: center; width: 30px; height: 30px; font: 600 12px/1 var(--font-sans); letter-spacing: 0; color: var(--accent-ink); background: var(--accent); border: 0; border-radius: 50%; cursor: pointer; margin-left: 4px; }

/* ---- tables: hairline rows inside a grouped list ---- */
.table-wrap { max-height: 320px; overflow-y: auto; border-radius: var(--r-md); background: var(--group); }
table.poses { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
table.poses th { position: sticky; top: 0; text-align: left; padding: 10px 16px; font-size: 13px; font-weight: 500; color: var(--ink-3); background: var(--group); border-bottom: 1px solid var(--line); }
table.poses td { padding: 12px 16px; border-top: 1px solid var(--line); }
table.poses tbody tr:first-child td { border-top: 0; }
table.poses tr[data-rank] { cursor: pointer; }
table.poses tr[data-rank]:hover td { background: var(--group-hover); }
table.poses tr[aria-selected='true'] td { background: var(--accent-soft); font-weight: 600; color: var(--link); }
table.poses td.num, table.poses th.num { text-align: right; }

/* ---- live status popover (what this machine can do) ---- */
.env-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.env-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.env-row .dot { margin: 6px 0 0; flex: none; }
.env-row b { font-weight: 500; }
.env-machine { font-size: 15px; font-weight: 600; }
.env-memory { display: flex; flex-direction: column; gap: 2px; margin: 8px 0 12px; }

/* ---- the memory tank: a dot while idle; a tank of liquid while a prediction runs ---- */
.status-chip { gap: 8px; }
.ram-wrap { display: inline-flex; align-items: center; gap: 6px; }
.ram { --liq: hsl(215 10% 60%); --fill: 0%; position: relative; flex: none; width: 10px; height: 10px; transition: width 440ms var(--ease-sheet), height 440ms var(--ease-sheet); }
.ram-glass { position: absolute; inset: 0; overflow: hidden; border-radius: 50%; background: var(--liq); box-shadow: inset 0 0 0 1px transparent; transition: border-radius 440ms var(--ease-sheet), background 300ms var(--ease), box-shadow 300ms var(--ease); }
.ram-liquid { position: absolute; left: 0; right: 0; bottom: 0; height: var(--fill); background: var(--liq); opacity: 0; transition: height 900ms var(--ease-sheet), background 600ms var(--ease), opacity 300ms var(--ease); }
.ram-liquid::before { content: ''; position: absolute; left: 0; right: 0; top: -4px; height: 5px; background: var(--liq); transition: background 600ms var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 5'%3E%3Cpath d='M0 5V2.5C2.8 0 5.7 0 8.5 2.5S14.2 5 17 2.5V5Z'/%3E%3C/svg%3E") repeat-x 0 0 / 17px 5px;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 5'%3E%3Cpath d='M0 5V2.5C2.8 0 5.7 0 8.5 2.5S14.2 5 17 2.5V5Z'/%3E%3C/svg%3E") repeat-x 0 0 / 17px 5px;
  animation: ram-wave 1.7s linear infinite; }
@keyframes ram-wave { to { -webkit-mask-position: 17px 0; mask-position: 17px 0; } }
.ram-pct { font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-2); max-width: 0; overflow: hidden; opacity: 0; white-space: nowrap; transition: max-width 440ms var(--ease-sheet), opacity 300ms var(--ease); }
/* running: the dot widens into a tank */
.ram[data-on='true'] { width: 42px; height: 24px; }
.ram[data-on='true'] .ram-glass { border-radius: 8px; background: var(--field); box-shadow: inset 0 0 0 1px var(--line-strong); }
.ram[data-on='true'] .ram-liquid { opacity: 1; }
.ram[data-on='true'] + .ram-pct { max-width: 3.2em; opacity: 1; }
/* nearly full: the liquid slops over the rim */
.ram-foam { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; opacity: 0; }
.ram-foam i { position: absolute; top: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--liq); }
.ram-foam i:nth-child(1) { left: 6px; animation: ram-drip 1.5s ease-in infinite; }
.ram-foam i:nth-child(2) { left: 19px; width: 4px; height: 4px; animation: ram-drip 1.5s ease-in 0.5s infinite; }
.ram-foam i:nth-child(3) { left: 31px; animation: ram-drip 1.5s ease-in 1s infinite; }
@keyframes ram-drip { 0% { transform: translateY(-4px) scale(0.6); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(14px) scale(1); opacity: 0; } }
.ram[data-level='full'][data-on='true'] .ram-foam { opacity: 1; }
.ram[data-level='full'][data-on='true'] .ram-liquid { height: 112%; }
/* the warning bubble under the chip */
.ram-bubble { position: absolute; top: calc(100% + 12px); right: -4px; z-index: 30; display: flex; gap: 10px; align-items: flex-start; width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 12px 10px 12px 14px; border-radius: 16px; background: var(--bg); color: var(--ink); box-shadow: var(--shadow), 0 0 0 1px var(--line); font-size: 14px; line-height: 1.35; animation: bubble-in 360ms var(--ease-sheet) both; }
.ram-bubble[hidden] { display: none; }
.ram-bubble::before { content: ''; position: absolute; top: -6px; right: 24px; width: 12px; height: 12px; background: var(--bg); transform: rotate(45deg); box-shadow: -1px -1px 0 0 var(--line); }
.ram-bubble > svg { flex: none; margin-top: 1px; color: var(--warn); }
.ram-bubble-text b { font-weight: 600; }
.ram-bubble-x { flex: none; display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: var(--field); color: var(--ink-3); cursor: pointer; }
@keyframes bubble-in { from { opacity: 0; transform: translateY(-6px) scale(0.92); transform-origin: 90% 0; } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ram-liquid::before, .ram-foam i, .ram-bubble { animation: none; } }


/* Touch: Apple's 44 pt minimum tap target for the small round controls too */
@media (pointer: coarse) { .avatar { width: 44px; height: 44px; } }

/* Touch: a text link that is the only thing to press still gets a 44 pt target */
@media (pointer: coarse) { a.tap { display: inline-flex; align-items: center; min-height: 44px; } }

/* a named example peptide: what it is in words first, the letters last */
.pep-list { display: flex; flex-direction: column; background: var(--group); border-radius: var(--r-md); overflow: hidden; }
.pep-pick { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 16px; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; position: relative; }
.pep-pick + .pep-pick::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.pep-pick:hover, .pep-pick:focus-visible { background: var(--group-hover); }
.pep-pick-name { font-weight: 500; font-size: 16px; }
.pep-pick-about { font-size: 14px; color: var(--ink-2); line-height: 1.35; }
.pep-pick-seq { font-size: 13px; color: var(--ink-2); word-break: break-all; }
.pep-name b { color: var(--ink); font-weight: 600; }
@media (pointer: coarse) { .pep-pick { min-height: 44px; } }

/* screens.css */
/* screens.css — the layout of each individual screen. */

/* ================= Home ================= */
/* The hero is the product shot: the molecule floats on the right, the words sit on the left, nothing is boxed. */
.hero-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: clamp(8px, 3vw, 48px);
  min-height: clamp(460px, calc(100vh - var(--nav-h) - 220px), 700px);
}
.hero-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; padding-block: 24px; }
.hero-copy .display { margin: 0; }
.hero-copy .lede { margin: 0; }
.hero-copy .row { gap: 8px; margin-top: 8px; }
.hero-copy .pep { color: var(--ink); font-weight: 500; }
.hero-slot { align-self: stretch; min-height: 360px; }
@media (max-width: 900px) {
  .hero-card { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-slot { order: -1; min-height: 300px; }
}

/* the numbers: four figures in one soft panel, with hairlines between them */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 8px 0 clamp(48px, 7vw, 88px); padding: 28px 8px; border-radius: 28px; background: var(--group); }
.stat { padding: 4px 28px; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat .value { font: 600 clamp(28px, 3.4vw, 40px)/1.05 var(--font-sans); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; order: 1; }
.stat .value small { font: 400 15px var(--font-sans); color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.stat { display: flex; flex-direction: column; gap: 6px; }
.stat .label { font-size: 14px; font-weight: 400; color: var(--ink-3); order: 2; }
.stats-note { grid-column: 1 / -1; font-size: 13px; color: var(--ink-3); margin: 14px 28px 0; }
.stats-note:empty { display: none; }
@media (max-width: 760px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-left: 0; }
  .stat:nth-child(n+3) { margin-top: 20px; }
}

.section-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 16px; }
.section-head h2 { font-size: clamp(28px, 3.2vw, 40px); letter-spacing: -0.03em; }
.section-head .btn { margin-left: auto; }

/* recent predictions: one inset grouped list */
.recent { margin-bottom: clamp(40px, 6vw, 72px); }
.recent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--group); border-radius: var(--r-md); overflow: hidden; }
.recent-card { position: relative; display: flex; align-items: center; gap: 8px; padding: 0 12px 0 0; }
.recent-card + .recent-card::before { content: ''; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--line); }
.recent-card:hover, .recent-card:focus-within { background: var(--group-hover); }
.recent-open { flex: 1; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; align-items: center; text-align: left; padding: 16px 0 16px 20px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.recent-open .name { font-weight: 500; font-size: 17px; word-break: break-word; }
.recent-open .when { font-size: 14px; color: var(--ink-3); grid-column: 1; }
.recent-open .val { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 600 24px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.recent-open .val small { display: block; margin-top: 4px; font: 400 12px var(--font-sans); letter-spacing: 0; color: var(--ink-3); }
.recent-dl { flex: none; }

/* why it matters: three plain steps under the stats */
.why { margin: 0 0 clamp(48px, 7vw, 88px); }
.why h2 { font-size: clamp(24px, 2.6vw, 32px); font-weight: 600; letter-spacing: -0.03em; margin-bottom: 16px; }
.why-steps { list-style: none; counter-reset: why; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 0; margin: 0; }
.why-steps li { counter-increment: why; padding: 24px 28px; border-radius: 28px; background: var(--group); color: var(--ink-3); font-size: 17px; line-height: 1.4; }
.why-steps li::before { content: counter(why); display: block; margin-bottom: 8px; font-size: 28px; font-weight: 600; color: var(--ink); }
.why-steps li b { display: block; margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.why-note { margin: 14px 4px 0; font-size: 14px; color: var(--ink-3); }
@media (max-width: 760px) { .why-steps { grid-template-columns: minmax(0, 1fr); } }

/* start something new: three big rounded tiles, like apple.com's "Get started". The first one is the loud one. */
.start-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.start-card { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; min-height: 300px; padding: 32px 32px 28px; border-radius: 28px; background: var(--group); text-align: left; color: inherit; cursor: pointer; transition: transform var(--t-med) var(--ease); }
.start-card:hover { transform: scale(1.012); }
.start-card.dark { background: #000; color: #f5f5f7; }
:root[data-theme='dark'] .start-card.dark { background: #1d1d1f; }
.start-card h3 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.1; font-weight: 600; letter-spacing: -0.03em; }
.start-card p { color: var(--ink-3); font-size: 19px; line-height: 1.32; max-width: 22ch; }
.start-card.dark p { color: #a1a1a6; }
.start-card .tech { display: none; }
.start-card .btn { margin-top: auto; background: var(--bg); color: var(--ink); }
.start-card .btn:hover { background: var(--bg); filter: brightness(0.96); }
.start-card.dark .btn { background: #f5f5f7; color: #1d1d1f; }
.start-card.dark .btn:hover { background: #fff; filter: none; }

/* the home headline is a plain sentence, so it runs a little smaller than the biggest display size */
.home-title { font-size: clamp(38px, 4.9vw, 64px); line-height: 1.04; }
.hero-copy .lede { max-width: 36ch; }

/* the example, in words: its name, its letters, the protein */
.example-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 4px 0 0; font-size: 17px; }
.example-line .eyebrow { margin-right: 4px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; }
.example-line .pep { font-size: 15px; }
.get-app { max-width: 60ch; display: flex; flex-direction: column; gap: 10px; }
.get-app p { margin: 0; }
.get-app .cmd { font-size: 12.5px; white-space: pre-wrap; word-break: break-all; padding-right: 16px; align-self: stretch; }
.get-app .cmd-wrap { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.get-app .cmd-wrap .btn { position: static; }
@media (max-width: 860px) {
  .start-row { grid-template-columns: minmax(0, 1fr); }
  .start-card { min-height: 0; padding: 26px 24px 22px; }
  .start-card .btn { margin-top: 16px; }
}

/* ================= Setup ================= */
.site-meter { padding: 12px 16px; border-radius: var(--r-md); background: var(--group); }
.coords { font-family: var(--font-mono); font-size: 14px; }
.coords-note { font-size: 14px; color: var(--ink-3); }

/* ================= Running ================= */
.running { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.run-slot { width: 100%; min-height: clamp(280px, 46vh, 520px); }
.run-panel { width: min(100%, 720px); display: flex; flex-direction: column; gap: 32px; }
.run-panel h1 { font-size: clamp(32px, 4vw, 44px); }
.track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; list-style: none; padding: 0; margin: 0; }
.track li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-top: 28px; font-size: 15px; font-weight: 500; color: var(--ink-3); }
.track li .tech { font-weight: 400; font-size: 13px; }
.track li::before {
  content: ''; position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%;
  background: var(--field); transition: background var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.track li.done { color: var(--ink); }
.track li.done::before { background: var(--accent); }
.track li.done::after { content: ''; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid var(--accent-ink); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.track li.active { color: var(--ink); }
.track li.active::before { background: var(--bg); box-shadow: 0 0 0 2px var(--accent) inset; animation: pulse 1.8s var(--ease) infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 2px var(--accent) inset, 0 0 0 5px var(--accent-soft); } }
.bar { height: 4px; border-radius: 4px; background: var(--field); overflow: hidden; }
.bar > i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 4px; transition: width 300ms linear; }
.run-meta { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; }
.run-meta .times { display: flex; gap: 40px; font-variant-numeric: tabular-nums; }
.run-meta .times b { display: block; margin-top: 2px; font-size: 28px; font-weight: 600; letter-spacing: -0.03em; }
@media (max-width: 640px) { .track { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } }

/* ================= Results ================= */
.result-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.result-head .eyebrow { font-size: 19px; color: var(--ink-3); }
.big-number { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.big-number .n { font: 600 clamp(72px, 10vw, 120px)/0.92 var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: -0.055em; color: var(--ink); }
.big-number .unit { font-size: 19px; color: var(--ink-3); letter-spacing: -0.01em; }
.err-line { font-size: 17px; color: var(--ink-3); }
.err-line b { color: var(--ink); font-weight: 500; }
.guide-line { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--ink-3); }
/* downloads: a short list of rows, like a share sheet */
.downloads { display: flex; flex-direction: column; background: var(--group); border-radius: var(--r-md); overflow: hidden; }
.downloads .btn { justify-content: flex-start; min-height: 52px; padding: 0 16px; border-radius: 0; background: none; font-size: 16px; font-weight: 500; position: relative; width: 100%; }
.downloads .btn + .btn::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.downloads .btn:hover { background: var(--group-hover); }
.downloads .btn svg { color: var(--link); margin-right: 4px; }
.pose-note { font-size: 14px; color: var(--ink-3); }
.pose-picker-title { display: flex; justify-content: space-between; align-items: baseline; }
.tabs { display: inline-flex; gap: 6px; }

/* ΔΔG bar (Compare results) */
.ddg-card { display: flex; flex-direction: column; gap: 12px; }
.ddg-bar { position: relative; height: 54px; margin: 6px 0 2px; }
.ddg-bar .axis { position: absolute; left: 0; right: 0; top: 30px; height: 2px; background: var(--line-strong); border-radius: 1px; }
.ddg-bar .zero { position: absolute; top: 12px; bottom: 6px; width: 2px; background: var(--ink-3); }
.ddg-bar .zero-label { position: absolute; top: -8px; transform: translateX(-50%); font-size: 13px; color: var(--ink-3); white-space: nowrap; }
.ddg-bar .ci { position: absolute; top: 24px; height: 14px; border-radius: 8px; background: var(--accent-soft); box-shadow: 0 0 0 1.5px var(--accent-line) inset; }
.ddg-bar .est { position: absolute; top: 20px; width: 4px; height: 22px; margin-left: -2px; border-radius: 2px; background: var(--accent); }
.ddg-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-3); }
.verdict { display: flex; gap: 12px; align-items: flex-start; padding: 20px; border-radius: var(--r-md); background: var(--group); }
.verdict.target { background: var(--accent-soft); }
.verdict.offtarget { background: color-mix(in srgb, var(--warn) 12%, transparent); }
.verdict h3 { font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: -0.024em; margin-bottom: 4px; }
.two-dg { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.two-dg .card { padding: 16px 20px; }
.two-dg .card .v { font: 600 32px/1.1 var(--font-sans); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.two-dg .target-card { box-shadow: 0 0 0 1.5px var(--accent-line) inset; }

/* ================= Compare ================= */
.screen > .note { margin-bottom: 20px; max-width: 60ch; }
.page-head { display: flex; flex-direction: column; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.page-head h1 { letter-spacing: -0.035em; }
.page-head .lede { max-width: 40ch; }
.vs-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(220px, 0.8fr) minmax(280px, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; margin: 24px 0; }
.pcard { background: none; border-radius: 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 16px; }
.pcard.target { border-top: 2px solid var(--accent); padding-top: 19px; }
.pcard .tag { align-self: flex-start; font-size: 19px; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.pcard.target .tag { color: var(--link); }
.vs-slot { min-height: 320px; align-self: stretch; display: grid; place-items: end center; }
.vs-slot .legend { position: static; justify-content: center; }
@media (max-width: 1000px) { .vs-grid { grid-template-columns: minmax(0, 1fr); } .vs-slot { order: -1; min-height: 260px; } }

/* ================= Score ================= */
.drop { display: flex; flex-direction: row; gap: 14px; align-items: center; padding: 16px 20px; text-align: left; font: inherit; color: inherit; border: 0; border-radius: var(--r-md); background: var(--group); cursor: pointer; transition: background var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); width: 100%; }
.drop > svg { flex: none; color: var(--link); }
.drop-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.drop b { font-size: 17px; font-weight: 500; word-break: break-word; }
.drop:hover { background: var(--group-hover); }
.drop.over { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent) inset; }
.drop.has-file { box-shadow: 0 0 0 1.5px var(--accent-line) inset; }

/* ================= History sheet ================= */
.hist-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--group); border-radius: var(--r-md); overflow: hidden; }
.hist-list > li { position: relative; }
.hist-list > li + li::before { content: ''; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--line); }
.hist-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; width: 100%; text-align: left; padding: 14px 16px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.hist-item:hover { background: var(--group-hover); }
.hist-item .name { font-weight: 500; font-size: 16px; word-break: break-word; }
.hist-item .when { font-size: 13px; color: var(--ink-3); }
.hist-item .val { grid-row: 1 / span 2; grid-column: 2; align-self: center; text-align: right; font: 600 22px/1 var(--font-sans); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.hist-item .val small { display: block; margin-top: 3px; font: 400 11px var(--font-sans); letter-spacing: 0; color: var(--ink-3); }
.empty-state { text-align: center; padding: 48px 12px; color: var(--ink-3); }

/* ================= Help ================= */
.glossary { display: grid; gap: 20px; margin: 0; }
.glossary dt { font-weight: 600; font-size: 17px; }
.glossary dd { margin: 4px 0 0; color: var(--ink-3); font-size: 16px; }

/* ================= Errors ================= */
.error-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; background: var(--group); border-radius: var(--r-md); }
.error-card h2 { color: var(--ink); }
.error-card .cmd { background: var(--field); padding-right: 16px; white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }

/* links inside running text are never told apart by colour alone */
.notice a, .hero-copy p a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* a short factual notice: what is wrong or what to expect, in a flat gray block */
.notice { padding: 14px 16px; border-radius: var(--r-md); background: var(--group); font-size: 15px; line-height: 1.45; color: var(--ink-2); max-width: 52ch; }
.notice b { color: var(--ink); font-weight: 600; }
.notice ul { margin: 6px 0 8px; padding-left: 18px; }
.notice code { font-size: 13px; background: var(--field); padding: 1px 6px; border-radius: 6px; word-break: break-word; }

/* ================= Guide ================= */
/* An app, not a manual: a grid of short lessons, and inside one a single card per step. */
.guide { max-width: 1040px; }
.guide :focus { outline: none; } /* a heading focused after a jump needs no ring */
.guide a:focus-visible, .guide button:focus-visible, .guide summary:focus-visible, .guide pre:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.guide-head { margin: 12px 0 36px; }
.guide-head h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.07; letter-spacing: -0.035em; }
.guide-head h1 .dim { color: var(--ink-3); }
.guide-head.compact { margin: 4px 0 20px; }
.guide-head .lede { max-width: 40ch; margin-top: 8px; }
.guide-progress { margin: 12px 0 0; font-size: 15px; color: var(--ink-3); }
.guide-foot { margin-top: 28px; }

/* the lessons: apple.com's "Highlights" grid. Big rounded tiles, light and dark, the first one the loudest. */
.lessons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(236px, auto); gap: 16px; }
.lesson { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 28px 28px 24px; border-radius: 28px; overflow: hidden; background: var(--group); color: var(--ink); text-decoration: none; isolation: isolate; transition: transform var(--t-med) var(--ease), background var(--t-fast) var(--ease); }
.lesson:hover { text-decoration: none; transform: scale(1.012); }
.lesson:active { transform: scale(0.99); }
.lesson.dark { background: #000; color: #f5f5f7; }
:root[data-theme='dark'] .lesson.dark { background: #1d1d1f; }
.lesson.hero { grid-column: span 2; grid-row: span 2; padding: 40px 40px 36px; background: linear-gradient(160deg, #1d1d1f 0%, #000 70%); color: #f5f5f7; }
.lesson-icon { display: grid; margin-bottom: 8px; color: var(--accent); }
.lesson.dark .lesson-icon { color: #2997ff; }
.lesson-title { font-size: 26px; line-height: 1.12; font-weight: 600; letter-spacing: -0.024em; max-width: 12em; }
.lesson.hero .lesson-title { font-size: clamp(34px, 4.4vw, 56px); line-height: 1.05; letter-spacing: -0.035em; max-width: 8em; }
.lesson-blurb { font-size: 17px; line-height: 1.35; color: var(--ink-3); max-width: 20em; }
.lesson.dark .lesson-blurb { color: #a1a1a6; }
.lesson.hero .lesson-blurb { font-size: clamp(19px, 2vw, 24px); }
.lesson-foot { margin-top: auto; padding-top: 18px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; z-index: 2; }
.lesson-meta { font-size: 14px; color: var(--ink-3); }
.lesson.dark .lesson-meta { color: #86868b; }
.lesson-go, .lesson-done { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; transition: background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); }
.lesson-go { background: var(--ink); color: var(--bg); }
.lesson.dark .lesson-go { background: #f5f5f7; color: #1d1d1f; }
.lesson:hover .lesson-go { background: var(--accent); color: #fff; }
.lesson-done { background: var(--ok); color: #fff; }
.lesson.dark .lesson-done { background: #30d158; color: #000; }
.lesson-cover { position: absolute; right: 0; bottom: 0; width: 64%; z-index: 1; pointer-events: none; }
.lesson-cover.shot img { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 820; border-radius: 18px 0 0 0; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 -12px 60px rgba(0, 0, 0, 0.5); margin-bottom: -24px; margin-right: -12px; transform: translateY(14%); }
.lesson-cover.term { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 22px; width: 58%; border-radius: 18px 0 0 0; background: #2c2c2e; box-shadow: 0 -12px 60px rgba(0, 0, 0, 0.5); font-size: 13px; line-height: 1.5; color: #f5f5f7; transform: translate(6%, 12%); }
.lesson-cover.term code { font: 13px/1.5 var(--font-mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-cover.term code.ok { color: #30d158; }
.lesson-cover.term .term-bar { display: flex; gap: 7px; padding: 0 0 8px; background: none; }
.lesson.hero .lesson-foot { margin-top: 0; position: absolute; left: 40px; bottom: 36px; width: auto; gap: 14px; }

/* inside a lesson */
.guide-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 16px -12px; }
.step-count { font-size: 15px; color: var(--ink-3); }
.step-bars { display: flex; gap: 6px; margin-bottom: 16px; }
.step-bar { flex: 1; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.step-bar::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 4px; border-radius: 2px; background: var(--field); transition: background var(--t-med) var(--ease); }
.step-bar.on::before { background: var(--accent); }
.step-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(16px, 3vw, 28px); border-radius: 28px; background: var(--group); min-height: 360px; }
.step-card.swap { animation: step-in var(--t-med) var(--ease-sheet) both; }
@keyframes step-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
.step-shot img { display: block; width: 100%; height: auto; aspect-ratio: 1100 / 820; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--line), 0 10px 30px rgba(0, 0, 0, 0.08); background: var(--bg); }
.step-shot.plain { display: grid; place-items: center; aspect-ratio: 1100 / 820; border-radius: var(--r-md); background: var(--accent-soft); }
.step-shot.terminal { display: flex; flex-direction: column; min-height: 240px; border-radius: var(--r-md); background: #1d1d1f; color: #f5f5f7; overflow: hidden; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); }
.term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 14px; background: #2c2c2e; font-size: 13px; color: #a1a1a6; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.term-bar i:nth-child(2) { background: #febc2e; }
.term-bar i:nth-child(3) { background: #28c840; margin-right: 8px; }
.terminal .cmd-wrap { flex: 1; display: flex; align-items: center; }
.terminal .cmd { width: 100%; background: transparent; color: #f5f5f7; font-size: clamp(12px, 1.5vw, 15px); padding: 20px 76px 20px 24px; white-space: pre-wrap; word-break: break-all; }
.terminal .cmd-wrap .btn { top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.16); color: #fff; }
.terminal .cmd-wrap .btn:hover { background: rgba(255, 255, 255, 0.26); }
.plain-icon { width: 112px; height: 112px; display: grid; place-items: center; border-radius: 32px; background: var(--accent); color: var(--accent-ink); }
.step-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; min-width: 0; }
.step-num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-soft); color: var(--link); font-size: 16px; font-weight: 600; }
.step-text h2 { font-size: clamp(26px, 3vw, 34px); line-height: 1.12; }
.step-body { margin: 0; font-size: 19px; line-height: 1.42; color: var(--ink-2); max-width: 34ch; }
.step-body strong { color: var(--ink); font-weight: 600; }
.step-body code, .step-tip code, .info-row code, .qa code { font-size: 0.88em; background: var(--field); padding: 1px 6px; border-radius: 6px; word-break: break-word; }
.step-text .cmd-wrap { align-self: stretch; }
.step-text .cmd { font-size: 13px; }
.step-tip { display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 12px 14px; border-radius: var(--r-md); background: var(--bg); font-size: 15px; line-height: 1.4; color: var(--ink-3); }
.step-tip svg { flex: none; margin-top: 2px; color: var(--link); }
.step-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 20px; }
.step-nav .btn.primary { margin-left: auto; min-width: 120px; }
.step-nav .btn[hidden] { display: none; }

/* lists: a grouped list, like Settings */
.info-list, .qa-list { border-radius: var(--r-lg); background: var(--group); overflow: hidden; }
.info-row { display: flex; gap: 16px; align-items: flex-start; padding: 18px 20px; }
.info-row + .info-row, .qa + .qa { border-top: 1px solid var(--line); }
.info-icon { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: var(--accent-soft); color: var(--link); }
.info-row h3 { font-size: 17px; margin-bottom: 2px; }
.info-row p, .qa p { margin: 0; font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.info-row p strong, .qa p strong { color: var(--ink); font-weight: 600; }
.qa > summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 20px; font-size: 17px; font-weight: 500; }
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after { content: ''; flex: none; width: 7px; height: 7px; border: solid var(--ink-3); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-fast) var(--ease); }
.qa[open] > summary::after { transform: rotate(-135deg); }
.qa > p { padding: 0 20px 18px; }

@media (max-width: 760px) {
  .step-card { grid-template-columns: minmax(0, 1fr); min-height: 0; border-radius: 22px; }
  .step-body { max-width: none; }
  .step-shot.plain, .step-shot.terminal { aspect-ratio: auto; min-height: 150px; }
  .step-shot.plain { aspect-ratio: 16 / 9; }
  .plain-icon { width: 88px; height: 88px; }
  .lessons { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .lesson, .lesson.hero { grid-column: auto; grid-row: auto; padding: 24px 24px 20px; }
  .lesson.hero { min-height: 420px; padding-bottom: 80px; }
  .lesson.hero .lesson-title { font-size: 34px; }
  .lesson-cover { width: 70%; }
  .lesson.hero .lesson-foot { left: 24px; bottom: 22px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .lessons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lesson.hero { grid-column: span 2; grid-row: auto; min-height: 460px; }
}
@media (prefers-reduced-motion: reduce) { .step-card.swap { animation: none; } }

/* the footer on every screen, in apple.com's small gray type */
.site-foot { position: relative; width: min(100%, var(--maxw)); margin: 0 auto; padding: 28px var(--gutter) 40px; font-size: 12px; line-height: 1.5; color: var(--ink-3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.site-foot::before { content: ''; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); height: 1px; background: var(--line); }
.site-foot p { margin: 0; max-width: 70ch; }
.site-foot nav { display: flex; gap: 20px; }
.site-foot a { color: var(--ink-3); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 900px) { .site-foot { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } }
@media (pointer: coarse), (max-width: 900px) { .site-foot a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; } .site-foot { gap: 0 32px; } }

/* ================= Home: the carousel of diseases we have worked on ================= */
.hero-card { align-items: start; }
.hero-copy { padding-block: clamp(8px, 4vw, 48px) 8px; }
.hero-copy .lede { max-width: 34ch; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.38; }
.cta-row { flex-wrap: wrap; gap: 10px; }
.cta-row .btn.primary { gap: 10px; }
.btn-sub { margin-left: 8px; padding-left: 10px; border-left: 1px solid var(--line-strong); font-weight: 400; color: var(--ink-3); font-size: 14px; }
.where { max-width: 44ch; margin: 2px 0 0; }

.catalog { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.catalog-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.catalog-title { font-size: clamp(20px, 2vw, 26px); font-weight: 600; letter-spacing: -0.03em; margin: 0; }
.catalog-sub { margin: 2px 0 0; font-size: 14px; color: var(--ink-3); }
.catalog-nav { display: flex; align-items: center; gap: 8px; flex: none; }
.catalog-count { font-size: 14px; color: var(--ink-3); min-width: 4.5em; text-align: center; }
.btn.circle { width: 40px; height: 40px; border-radius: 50%; padding: 0; background: var(--field); }
.btn.circle:hover:not(:disabled) { background: var(--group-hover); }
.btn.circle:disabled { opacity: 0.35; cursor: default; }
.catalog-slot { min-height: clamp(220px, 30vh, 320px); height: clamp(220px, 30vh, 320px); }

/* the cards: a scroll-snap row (swipe, trackpad and arrow keys work natively) */
.catalog-track {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
  border-radius: 28px; outline-offset: 4px;
}
.catalog-track::-webkit-scrollbar { display: none; }
.slide {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 18px; padding: 26px 26px 22px; background: var(--group); border-radius: 28px;
}
.slide-head h3 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.05; font-weight: 650; letter-spacing: -0.035em; margin: 8px 0 6px; }
.slide-head .plain, .slide > .plain { color: var(--ink-3); font-size: 16px; line-height: 1.4; margin: 0; max-width: 42ch; }
.chip.disease { background: color-mix(in srgb, var(--accent) 8%, transparent); color: color-mix(in srgb, var(--link) 78%, var(--ink)); font-weight: 500; }
.chip.known { background: color-mix(in srgb, var(--ok) 10%, transparent); color: color-mix(in srgb, var(--ok) 78%, var(--ink)); font-size: 12px; padding: 2px 9px; margin-left: 8px; font-weight: 500; }
.slide-label { margin: 0 0 8px; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); font-weight: 500; }

.binders { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.binder { display: flex; align-items: stretch; gap: 8px; }
.binder-open {
  flex: 1; min-width: 0; display: grid; gap: 4px; text-align: left; padding: 12px 14px; font: inherit; color: inherit;
  background: var(--bg); border: 0; border-radius: 16px; cursor: pointer; transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.binder-open:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent-line); }
.binder-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.binder-name { font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.binder-dg { font: 650 20px/1 var(--font-sans); letter-spacing: -0.03em; white-space: nowrap; }
.binder-dg small { margin-left: 4px; font: 400 12px var(--font-sans); color: var(--ink-3); letter-spacing: 0; }
.binder-seq { font-size: 12.5px; color: var(--ink-3); overflow-wrap: anywhere; }
.meter { display: block; height: 6px; border-radius: 3px; background: var(--field); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 3px; background: var(--accent); transition: width var(--t-med) var(--ease); }
.meter.wide { height: 8px; min-width: 60px; }
.pin {
  flex: none; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 72px;
  font: 500 12px/1 var(--font-sans); color: var(--ink-2); background: var(--bg); border: 0; border-radius: 16px; cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.pin:hover { color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.pin[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); }

.run-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 14px; padding-top: 4px; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 16px; }
.run-opts { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.run-poses .seg button { min-width: 44px; }
.pep-select { max-width: 260px; min-width: 190px; height: 36px; }
.run-go { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; margin-left: auto; }
.run-eta { font-size: 13px; color: var(--ink-3); }

.catalog-dots { display: flex; justify-content: center; gap: 4px; }
.dot-btn { width: 24px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; position: relative; }
.dot-btn::after { content: ''; position: absolute; inset: 9px; border-radius: 50%; background: var(--line-strong); transition: all var(--t-med) var(--ease); }
.dot-btn.on::after { inset: 8px -2px; background: var(--ink); border-radius: 4px; }
/* on a touch screen the arrows, a swipe and the "n of 8" counter do the job, and eight dots cannot all be 44 px wide */
@media (pointer: coarse) { .catalog-dots { display: none; } .btn.circle { width: 44px; height: 44px; } }

/* side by side */
.tray { padding: 18px 20px 16px; border-radius: 24px; background: var(--group); }
.tray-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tray-head h3 { font-size: 17px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.tray-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tray-rows li { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto; align-items: center; gap: 14px; }
.tray-name { font-size: 15px; font-weight: 500; overflow-wrap: anywhere; }
.tray-name small { color: var(--ink-3); font-weight: 400; font-size: 14px; }
.tray-dg { font: 650 17px/1 var(--font-sans); letter-spacing: -0.02em; min-width: 3.6em; text-align: right; }
.tray-rows li.best .meter i { background: var(--ok); }
.tray-verdict { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.grip-strong { background: color-mix(in srgb, var(--ok) 10%, transparent); color: color-mix(in srgb, var(--ok) 78%, var(--ink)); }
.grip-moderate { background: color-mix(in srgb, var(--accent) 8%, transparent); color: color-mix(in srgb, var(--link) 78%, var(--ink)); }

@media (max-width: 900px) {
  .hero-card { gap: 28px; }
  .hero-copy { padding-top: 0; }
  .catalog-slot { min-height: 220px; height: 220px; }
}
@media (max-width: 520px) {
  .slide { padding: 20px 18px 18px; }
  .binder-top { flex-direction: column; gap: 4px; }
  .run-go { align-items: stretch; width: 100%; margin-left: 0; }
  .run-go .btn { width: 100%; justify-content: center; }
  .run-eta { text-align: center; }
  .tray-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .tray-rows li .meter { grid-column: 1 / -1; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .binder-open, .meter i, .dot-btn::after { transition: none; } }

/* guide: every lesson tile carries its number, so the order is plain */
.lesson { position: relative; }
.lesson-num { position: absolute; top: 18px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; font: 600 14px/1 var(--font-sans); background: var(--field); color: var(--ink-2); }
.lesson.dark .lesson-num, .lesson.hero .lesson-num { background: rgba(255, 255, 255, 0.16); color: #f5f5f7; }
.lesson.hero .lesson-num { top: 28px; right: 32px; width: 34px; height: 34px; font-size: 16px; }