/* Shared styles for every page.
   Palette: a competition pool. Each page sets its own --accent in a body class. */
:root {
  --deep: #07222e;
  --lane: #0d3447;
  --shallow: #1c5a73;
  --foam: #eaf6f8;
  --mist: #8fb1bd;
  --rope: #ff6a55;
  --line: rgba(143, 177, 189, 0.22);
  --accent: var(--rope);

  --display: 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif;
  --body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --pad: clamp(20px, 5vw, 56px);
  --max: 1240px;
  --nav-gutter: 0px; /* room kept clear for a page's side navigator */
}

/* topic accents */
.page-options     { --accent: #ff6a55; }
.page-risk        { --accent: #ffb14e; }
.page-optimizer   { --accent: #5fd3b0; }
.page-experience  { --accent: #7cc4ff; }
.page-results     { --accent: #ff6a55; }
.page-contact     { --accent: #ff6a55; }

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

html {
  background: var(--deep);
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
}
body {
  font: 400 1.0625rem/1.65 var(--body);
  color: var(--foam);
  background: var(--deep);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: inherit; }
img, canvas, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--accent); color: var(--deep); }
[tabindex="-1"]:focus { outline: none; }

/* Lane rope: red and white floats, the site's divider */
.rope {
  height: 8px;
  border: 0;
  background:
    radial-gradient(circle at 8px 4px, var(--rope) 0 2.6px, transparent 3px) 0 0 / 32px 8px repeat-x,
    radial-gradient(circle at 24px 4px, var(--foam) 0 2.6px, transparent 3px) 0 0 / 32px 8px repeat-x;
  opacity: 0.75;
}

/* text still waiting for your own words */
.todo { color: var(--mist); font-style: italic; }

/* ---------- Header ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: calc(18px + env(safe-area-inset-top, 0px)) var(--pad) 34px;
  background: linear-gradient(var(--deep) 35%, transparent);
  pointer-events: none;
}
.brand {
  pointer-events: auto;
  font: 800 1.35rem/1 var(--display);
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.01em;
}
.brand:hover { color: var(--accent); }
.page-home .brand { visibility: hidden; }
.brand .short { display: none; }
.nav nav {
  display: flex;
  gap: clamp(14px, 2.6vw, 30px);
  margin-left: auto;
  font-size: 0.95rem;
  font-weight: 500;
}
.nav nav a,
.nav nav button {
  pointer-events: auto;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: var(--mist);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.nav nav a:hover,
.nav nav button:hover { color: var(--foam); }
.nav nav a[aria-current="page"] {
  color: var(--foam);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 7px;
}

/* ---------- Buttons ---------- */
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.btn {
  display: inline-block;
  padding: 13px 22px;
  border: 1.5px solid var(--foam);
  border-radius: 4px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.btn:hover { background: var(--foam); border-color: var(--foam); color: var(--deep); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--deep); }
.btn.primary:hover { background: var(--foam); border-color: var(--foam); }

/* ---------- Inner pages ---------- */
.page {
  max-width: calc(var(--max) + 2 * var(--pad) + var(--nav-gutter));
  margin: 0 auto;
  padding: 116px calc(var(--pad) + var(--nav-gutter)) 0 var(--pad);
}
.kicker {
  font: 500 0.82rem/1.4 var(--mono);
  color: var(--accent);
  letter-spacing: 0.02em;
}
.page-title {
  margin-top: 14px;
  font: 800 clamp(3rem, 8.5vw, 7.6rem) / 0.86 var(--display);
  text-transform: uppercase;
  margin-left: -0.03em;
}
.page .lede {
  max-width: 40rem;
  margin-top: 24px;
  font-size: clamp(1.1rem, 1.5vw, 1.3rem);
  line-height: 1.5;
}

/* figures: live drawings with a caption, set between hairlines */
.figure { margin-top: clamp(36px, 5vw, 56px); }
.figure canvas,
.figure svg.fig {
  width: 100%;
  height: clamp(280px, 40vw, 470px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  touch-action: pan-y;
}
.figure figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 24px;
  margin-top: 12px;
  font: 400 0.8rem/1.6 var(--mono);
  color: var(--mist);
}
.figure figcaption b { color: var(--foam); font-weight: 500; }
.fig-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.chip {
  padding: 7px 14px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  background: none;
  font: 500 0.8rem/1 var(--mono);
  color: var(--mist);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.chip:hover { color: var(--foam); border-color: var(--mist); }
.chip[aria-pressed="true"] { color: var(--deep); background: var(--accent); border-color: var(--accent); }

/* content blocks, numbered like equations */
.block { padding-top: clamp(72px, 9vw, 116px); }
.block h2 {
  font: 800 clamp(2.2rem, 4.6vw, 3.8rem) / 0.95 var(--display);
  text-transform: uppercase;
}
.block h2 .no {
  display: block;
  margin-bottom: 12px;
  font: 500 0.85rem/1 var(--mono);
  color: var(--accent);
  letter-spacing: 0;
}
.block > p,
.block > ul,
.block > ol { max-width: 42rem; margin-top: 18px; }
.block > p + p { margin-top: 14px; }
.block li { margin-top: 8px; }
.block li::marker { color: var(--accent); }
.block .muted { color: var(--mist); }
.block code,
.page code { font: 400 0.9em/1 var(--mono); color: var(--foam); }

.eq {
  max-width: 42rem;
  margin-top: 22px;
  padding: 16px 20px;
  border-left: 2px solid var(--accent);
  background: rgba(13, 52, 71, 0.55);
  font: 400 0.98rem/1.9 var(--mono);
  overflow-x: auto;
  white-space: nowrap;
}
.eq sub, .eq sup { font-size: 0.72em; }

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1px;
  max-width: 56rem;
  margin-top: 28px;
  background: var(--line);
  border: 1px solid var(--line);
}
.facts > div { padding: 18px 20px; background: var(--deep); }
.facts dt { font: 400 0.78rem/1.4 var(--mono); color: var(--mist); }
.facts dd { margin: 6px 0 0; font: 800 clamp(1.5rem, 2.6vw, 2.1rem) / 1 var(--display); }
.facts dd small { display: block; margin-top: 6px; font: 400 0.85rem/1.4 var(--body); color: var(--mist); }

.table-wrap { max-width: 48rem; margin-top: 24px; overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.data th, .data td { padding: 12px 18px 12px 0; text-align: left; vertical-align: baseline; border-top: 1px solid var(--line); }
.data thead th { border-top: 0; font: 500 0.78rem/1.4 var(--mono); color: var(--mist); }
.data td.m { font-family: var(--mono); white-space: nowrap; }

.links-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 22px; font-weight: 600; }
.links-row a { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; }
.links-row a:hover { color: var(--accent); }

/* prev / next between pages */
.pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: clamp(80px, 10vw, 128px);
  padding: 28px 0 clamp(56px, 8vw, 96px);
  border-top: 1px solid var(--line);
}
.pager a { text-decoration: none; }
.pager span { display: block; font: 400 0.78rem/1.4 var(--mono); color: var(--mist); }
.pager strong {
  display: block;
  margin-top: 6px;
  font: 800 clamp(1.5rem, 3vw, 2.4rem) / 1 var(--display);
  text-transform: uppercase;
  transition: color 0.15s;
}
.pager a:hover strong { color: var(--accent); }
.pager .next { text-align: right; grid-column: 2; }

.foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  padding: 22px calc(var(--pad) + var(--nav-gutter)) 22px var(--pad);
  border-top: 1px solid var(--line);
  font-size: 0.85rem;
  color: var(--mist);
}

/* ---------- Home ---------- */
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 120px var(--pad) 56px;
  overflow: hidden;
}
#water { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to top, var(--deep) 0%, rgba(7, 34, 46, 0.88) 30%, transparent 62%);
}
.name {
  font: 800 clamp(3.6rem, 13.5vw, 13rem) / 0.84 var(--display);
  text-transform: uppercase;
  letter-spacing: -0.005em;
  margin-left: -0.04em;
}
.hero .lede { max-width: 34rem; margin-top: 28px; font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; }
.readout {
  position: absolute;
  right: var(--pad);
  bottom: 56px;
  text-align: right;
  font: 400 0.85rem / 1.8 var(--mono);
  color: var(--mist);
}
.readout b { color: var(--foam); font-weight: 500; }
.readout .hint { margin-top: 6px; font-family: var(--body); font-size: 0.85rem; }

/* the home menu, laid out as a heat sheet: one lane per page */
.heats {
  max-width: calc(var(--max) + 2 * var(--pad));
  margin: 0 auto;
  padding: clamp(72px, 10vw, 128px) var(--pad) clamp(72px, 10vw, 120px);
}
.heats-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding-bottom: 14px;
  font: 400 0.8rem/1.4 var(--mono);
  color: var(--mist);
}
.heats ol { list-style: none; padding: 0; }
.heat { position: relative; }
.heat a {
  position: relative;
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1.2fr) minmax(0, 1.6fr) 2rem;
  align-items: baseline;
  gap: 8px 28px;
  padding: 30px 0 34px;
  text-decoration: none;
}
.heat .rope { position: absolute; left: 0; right: 0; bottom: 0; }
.heat .lane-no { font: 500 0.9rem/1 var(--mono); color: var(--mist); }
.heat .event {
  font: 800 clamp(2.4rem, 6vw, 5rem) / 0.9 var(--display);
  text-transform: uppercase;
  transition: color 0.2s, transform 0.2s;
}
.heat .what { color: var(--mist); }
.heat .go { font: 500 1.3rem/1 var(--mono); color: var(--mist); transition: transform 0.2s, color 0.2s; }
.heat .swimmer {
  position: absolute;
  left: 0;
  bottom: -9.5px; /* centred on the lane rope below */
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--rope);
  box-shadow: 0 0 0 2.5px var(--foam);
  opacity: 0;
  transition: left 0.9s cubic-bezier(.2,.7,.2,1), opacity 0.2s;
}
.heat a:hover .event,
.heat a:focus-visible .event { color: var(--rope); transform: translateX(6px); }
.heat a:hover .go { color: var(--rope); transform: translateX(6px); }
.heat a:hover .swimmer { left: calc(100% - 11px); opacity: 1; }

/* ---------- Projects index ---------- */
.cards { margin-top: clamp(40px, 6vw, 72px); }
.card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 56px);
  align-items: center;
  padding: clamp(28px, 4vw, 44px) 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
}
.card:last-child { border-bottom: 1px solid var(--line); }
.card canvas { width: 100%; height: clamp(200px, 24vw, 300px); }
.card .no { font: 500 0.82rem/1.4 var(--mono); }
.card h2 {
  margin-top: 10px;
  font: 800 clamp(2.2rem, 4.4vw, 3.8rem) / 0.92 var(--display);
  text-transform: uppercase;
  transition: color 0.2s;
}
.card p { margin-top: 14px; color: var(--mist); max-width: 32rem; }
.card .tags { margin-top: 16px; font: 400 0.8rem/1.6 var(--mono); color: var(--mist); }
.card .more { display: inline-block; margin-top: 18px; font-weight: 600; text-decoration: underline; text-underline-offset: 5px; }
.card:hover h2 { color: var(--c); }
.card-options   { --c: #ff6a55; }
.card-risk      { --c: #ffb14e; }
.card-optimizer { --c: #5fd3b0; }
.card .no { color: var(--c); }

/* ---------- Experience ---------- */
.role-meta { margin-top: 10px; font: 400 0.85rem/1.6 var(--mono); color: var(--mist); }
.role-meta b { color: var(--accent); font-weight: 500; }
.gantt { display: block; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.gantt text { font: 400 11px var(--mono); fill: var(--mist); }
.gantt .bar { fill: var(--accent); }
.gantt .bar.past { fill: var(--shallow); }
.gantt .lbl { font: 600 12.5px var(--body); fill: var(--foam); }
.gantt .grid { stroke: var(--line); }

/* ---------- Results: the pool ---------- */
.pool {
  margin-top: clamp(36px, 5vw, 60px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(90deg, rgba(255, 106, 85, 0.0) 0 calc(100% - 64px), rgba(234, 246, 248, 0.04) calc(100% - 64px)),
    var(--lane);
}
.pool ol { list-style: none; padding: 0; }
.lane {
  position: relative;
  display: grid;
  grid-template-columns: 3rem minmax(0, 1.3fr) minmax(0, 1.4fr) auto;
  align-items: baseline;
  gap: 6px 24px;
  padding: 26px clamp(16px, 3vw, 32px) 30px;
}
.lane + .lane::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -4px;
  height: 8px;
  background:
    radial-gradient(circle at 8px 4px, var(--rope) 0 2.6px, transparent 3px) 0 0 / 32px 8px repeat-x,
    radial-gradient(circle at 24px 4px, var(--foam) 0 2.6px, transparent 3px) 0 0 / 32px 8px repeat-x;
  opacity: 0.6;
}
.lane .no { font: 500 0.85rem/1 var(--mono); color: var(--mist); }
.lane h2 { font: 800 clamp(1.7rem, 3.4vw, 2.8rem) / 0.95 var(--display); text-transform: uppercase; }
.lane p { color: var(--mist); }
.lane .rec { font: 500 1.05rem/1 var(--mono); white-space: nowrap; text-align: right; }
.lane .wake {
  position: absolute;
  left: 0;
  bottom: 10px;
  height: 2px;
  width: 0;
  background: linear-gradient(90deg, transparent, rgba(234, 246, 248, 0.5));
  pointer-events: none;
}
.lane .head {
  position: absolute;
  left: 0;
  bottom: 5px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--rope);
  box-shadow: 0 0 0 2.5px var(--foam);
  pointer-events: none;
}
.lane.touched .rec { color: var(--rope); }

/* ---------- Contact ---------- */
.page-contact .page { position: relative; min-height: 100svh; display: flex; flex-direction: column; }
.contact-body { position: relative; z-index: 1; padding-bottom: 40px; }
.contact-body .ask { max-width: 32rem; margin-top: 24px; color: var(--mist); font-size: 1.15rem; }
.email {
  display: inline-block;
  margin-top: 26px;
  font: 800 clamp(2.2rem, 7vw, 6rem) / 1 var(--display);
  text-decoration: none;
  overflow-wrap: anywhere;
  border-bottom: 3px solid var(--rope);
  transition: color 0.15s;
}
.email:hover { color: var(--rope); }
.string-wrap { position: relative; flex: 1; min-height: 220px; margin: 0 calc(-1 * var(--pad)); }
#string { position: absolute; inset: 0; width: 100%; height: 100%; }
.string-cap {
  position: absolute;
  left: var(--pad);
  bottom: 18px;
  font: 400 0.8rem/1.6 var(--mono);
  color: var(--mist);
}

/* ---------- Page navigator (pathnav.js) ----------
   A small figure fixed beside the page; on touch and narrower screens it
   becomes a bar along the bottom. */
.pnav {
  position: fixed;
  z-index: 25;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 156px;
  height: min(64vh, 520px);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}
.pnav.dragging { cursor: grabbing; }
.pnav-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pnav .decor { color: var(--mist); }
.pnav .path { fill: none; stroke: var(--accent); stroke-opacity: 0.6; stroke-width: 1.5; }
.pnav .node { fill: var(--deep); stroke: var(--mist); stroke-width: 1.2; transition: stroke 0.2s, fill 0.2s; }
.pnav .node.on { stroke: var(--accent); fill: var(--accent); }
.pnav .ghost { fill: none; stroke: var(--foam); stroke-width: 1.2; stroke-dasharray: 3 3; opacity: 0; transition: opacity 0.15s; }
.pnav.dragging .ghost { opacity: 0.9; }
.pnav .halo { fill: var(--foam); }
.pnav .core { fill: var(--accent); }
.pnav .particle-in { transition: transform 0.2s; transform-box: fill-box; transform-origin: center; }
.pnav.active .particle-in { transform: scale(1.3); }
.pnav ol { list-style: none; padding: 0; margin: 0; position: absolute; inset: 0; }
.pnav .well { position: absolute; display: block; text-decoration: none; cursor: inherit; }
.pnav .well:focus-visible { outline: none; }
.pnav .lbl {
  position: absolute;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
  padding: 3px 8px;
  border-radius: 3px;
  background: rgba(7, 34, 46, 0.9);
  font: 500 0.78rem / 1.3 var(--mono);
  color: var(--mist);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s, color 0.15s;
}
.pnav.intro .lbl,
.pnav.active .lbl,
.pnav:has(.well:focus-visible) .lbl { opacity: 1; }
@media (hover: hover) {
  .pnav:hover .lbl { opacity: 1; }
  .pnav:hover .particle-in { transform: scale(1.3); }
}
.pnav .well[aria-current] .lbl { color: var(--foam); }
.pnav .well.target .lbl { color: var(--accent); }
.pnav .well:focus-visible .lbl { outline: 2px solid var(--accent); outline-offset: 1px; }
.pnav-cap {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  left: 0;
  font: 400 0.74rem / 1.4 var(--mono);
  color: var(--mist);
  text-align: right;
  pointer-events: none;
}
.pnav-cap b { color: var(--foam); font-weight: 500; }
.pnav-name {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  font: 400 0.72rem / 1.4 var(--mono);
  color: var(--mist);
  pointer-events: none;
  white-space: nowrap;
}

@media (min-width: 1100px) and (pointer: fine) {
  .has-pnav { --nav-gutter: 190px; }
}
@media (max-width: 1099px), (pointer: coarse) {
  .pnav {
    top: auto;
    right: auto;
    left: 50%;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    width: min(520px, calc(100% - 32px));
    height: 60px;
    border: 1px solid rgba(143, 177, 189, 0.2);
    border-radius: 16px;
    background: rgba(7, 34, 46, 0.86);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    cursor: auto;
  }
  .pnav-cap, .pnav-name { display: none; }
  .pnav::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 6px);
    height: 30px;
    border: 1px solid rgba(143, 177, 189, 0.2);
    border-radius: 15px;
    background: rgba(7, 34, 46, 0.92);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
  }
  .pnav.intro::before,
  .pnav.active::before,
  .pnav:has(.well:focus-visible)::before { opacity: 1; }
  .pnav .lbl {
    right: auto;
    left: 50%;
    top: auto;
    bottom: calc(100% + 21px);
    transform: translate(-50%, 50%);
    padding: 0;
    background: none;
    font: 600 0.74rem / 1.2 var(--body);
  }
  /* there's room for one label on a phone: where you are, or where you'll land */
  .pnav.intro .lbl,
  .pnav.active .lbl { opacity: 0; transition: none; }
  .pnav.intro .well[aria-current] .lbl,
  .pnav.active:not(.dragging) .well[aria-current] .lbl,
  .pnav.dragging .well.target .lbl { opacity: 1; }
  .pnav li:first-child .lbl { left: calc(50% - 4px); transform: translate(0, 50%); }
  .pnav li:last-child .lbl { left: auto; right: calc(50% - 4px); transform: translate(0, 50%); }
  .has-pnav { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------- Site map overlay (site.js) ---------- */
.map {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(7, 34, 46, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 0.24s;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  outline: none;
}
.map.open { opacity: 1; }
.map:not(.open) { pointer-events: none; }
.map.dragging { cursor: grabbing; }
.map canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-eq {
  position: absolute;
  left: var(--pad);
  top: calc(18px + env(safe-area-inset-top, 0px));
  max-width: calc(100% - 2 * var(--pad) - 90px);
  font: 400 0.82rem / 1.8 var(--mono);
  color: var(--mist);
  pointer-events: none;
}
.map-read { color: var(--foam); white-space: pre; }
.map-hint {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.92rem;
  color: var(--mist);
  pointer-events: none;
}
.map-close {
  position: absolute;
  right: var(--pad);
  top: calc(16px + env(safe-area-inset-top, 0px));
  padding: 7px 14px;
  border: 1.5px solid rgba(143, 177, 189, 0.45);
  border-radius: 4px;
  background: none;
  font: 500 0.85rem / 1 var(--mono);
  color: var(--foam);
  cursor: pointer;
}
.map-close:hover { border-color: var(--foam); }
.map-wells { list-style: none; margin: 0; padding: 0; }
.map-well {
  position: absolute;
  width: 76px;
  height: 76px;
  margin: -38px 0 0 -38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--foam);
  cursor: inherit;
  -webkit-tap-highlight-color: transparent;
}
.map-well .name {
  position: absolute;
  top: calc(50% + 20px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font: 800 1.45rem / 1 var(--display);
  text-transform: uppercase;
  transition: color 0.15s;
}
.map-well .group,
.map-well.here .name::after {
  display: block;
  margin-top: 4px;
  font: 400 0.72rem / 1.3 var(--mono);
  text-transform: none;
  color: var(--mist);
}
.map-well.here .name::after { content: "you are here"; color: var(--rope); }
.map-well.target .name { color: var(--rope); }
.map-well:focus-visible { outline: 2px solid var(--rope); outline-offset: -10px; }
@media (hover: hover) { .map-well:hover .name { color: var(--rope); } }
@media (max-width: 640px) {
  .map-well .name { font-size: 1.1rem; }
  .map-eq { font-size: 0.72rem; }
}

/* ---------- Small screens ---------- */
@media (max-width: 820px) {
  .nav nav a:not(.keep) { display: none; }
  .brand .full { display: none; }
  .brand .short { display: inline; }
  .readout { position: static; text-align: left; margin-top: 28px; }
  .heat a { grid-template-columns: 2.6rem minmax(0, 1fr) 1.4rem; }
  .heat .what { grid-column: 2; }
  .heat .go { grid-row: 1; grid-column: 3; }
  .card { grid-template-columns: 1fr; }
  .lane { grid-template-columns: 2.2rem minmax(0, 1fr) auto; }
  .lane p { grid-column: 2 / -1; }
  .lane .rec { grid-row: 1; grid-column: 3; }
  .pager strong { font-size: 1.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Scroll stories (story.js) ----------
   A figure pinned on the left, explanation steps scrolling on the right.
   On narrow screens the figure pins to the top and the steps pass beneath. */
.story {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  margin-top: clamp(24px, 3vw, 40px);
}
.stage {
  position: sticky;
  top: 88px;
  align-self: start;
  height: min(calc(100svh - 120px), 640px);
  display: flex;
  flex-direction: column;
}
.stage canvas {
  flex: 1;
  width: 100%;
  min-height: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.stage-cap {
  min-height: 2.6em;
  margin-top: 10px;
  font: 400 0.78rem / 1.6 var(--mono);
  color: var(--mist);
}
.stage-cap b { color: var(--foam); font-weight: 500; }
.stage-cap .hot { color: var(--accent); font-weight: 500; }
.steps { padding-bottom: 18vh; }
.step {
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0.32;
  transition: opacity 0.35s;
}
.step:first-child { min-height: 64vh; justify-content: flex-start; padding-top: 6vh; }
.step.active { opacity: 1; }
.step-no { font: 500 0.78rem / 1.4 var(--mono); color: var(--accent); }
.step h3 {
  margin-top: 8px;
  font: 800 clamp(1.5rem, 2.4vw, 2rem) / 1 var(--display);
  text-transform: uppercase;
}
.step p { max-width: 34rem; margin-top: 14px; }
.step .eq { max-width: 34rem; font-size: 0.92rem; }

@media (max-width: 899px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .stage {
    top: 60px;
    z-index: 2;
    height: 46svh;
    margin: 0 calc(-1 * var(--pad));
    padding: 6px var(--pad) 0;
    background: var(--deep);
  }
  /* soften the edge where steps slide under the pinned figure */
  .stage::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 28px;
    background: linear-gradient(var(--deep), transparent);
    pointer-events: none;
  }
  .stage-cap { font-size: 0.72rem; min-height: 3.2em; margin-top: 6px; }
  .step { min-height: 64svh; justify-content: flex-start; padding-top: 5vh; }
  .step:first-child { min-height: 64svh; }
}
@media (prefers-reduced-motion: reduce) {
  .step { opacity: 1; }
}

/* a long story whose steps are grouped into chapters */
.story-long { margin-top: clamp(72px, 9vw, 116px); }
.story .chapter + .chapter { margin-top: 6vh; }
.story .chapter h2 {
  padding-top: 4vh;
  font: 800 clamp(2rem, 3.4vw, 3rem) / 0.95 var(--display);
  text-transform: uppercase;
}
.story .chapter h2 .no {
  display: block;
  margin-bottom: 10px;
  font: 500 0.85rem / 1 var(--mono);
  color: var(--accent);
}
/* math symbols inside uppercase headings keep their case */
.nt { text-transform: none; }

/* ---------- Math (KaTeX) ---------- */
.katex { font-size: 1.06em; text-transform: none; color: inherit; }
.eq {
  font-family: var(--body);
  white-space: normal;
  line-height: 1.5;
}
.eq .katex-display { margin: 0.1em 0; text-align: left; }
.eq .katex-display > .katex { text-align: left; font-size: 1.12em; }
.facts dd .katex { font-size: 0.82em; }
.data .katex { font-size: 1em; }
.chip .katex { font-size: 1em; }
.step .eq .katex-display > .katex { font-size: 1.02em; }

/* ---------- Icons, chips, stats ---------- */
.ico { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }
.chips { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li {
  margin: 0;
  padding: 4px 11px;
  border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, transparent);
  font: 500 0.76rem / 1.4 var(--mono);
  color: var(--foam);
}
.chips li::marker { content: none; }
.stats { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 18px; }
.stats div { display: flex; flex-direction: column-reverse; }
.stats dt { font: 400 0.74rem / 1.4 var(--mono); color: var(--mist); }
.stats dd {
  margin: 0;
  font: 800 clamp(1.6rem, 2.6vw, 2.1rem) / 1 var(--display);
  color: var(--c, var(--accent));
  font-variant-numeric: tabular-nums;
}
.stats dd sup { font-size: 0.55em; }

/* ---------- Projects: live cards ---------- */
.card { position: relative; }
.card-fig { position: relative; }
.card-fig canvas {
  width: 100%;
  height: clamp(220px, 26vw, 320px);
  border-radius: 6px;
  background: color-mix(in srgb, var(--c) 5%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  transition: border-color 0.25s, background 0.25s;
}
.card:hover .card-fig canvas { border-color: color-mix(in srgb, var(--c) 60%, transparent); background: color-mix(in srgb, var(--c) 9%, transparent); }
.fig-hint { display: block; margin-top: 8px; font: 400 0.72rem / 1.4 var(--mono); color: var(--mist); }
.card .no { display: inline-flex; align-items: center; gap: 8px; }
.card .no .ico { width: 1.6em; height: 1.6em; }
.card .more { display: inline-flex; align-items: center; gap: 6px; color: var(--c); }
.card .more .ico { transition: transform 0.2s; }
.card:hover .more .ico { transform: translateX(5px); }
.card h2 { transition: color 0.2s, transform 0.2s; }
.card:hover h2 { transform: translateX(4px); }

/* ---------- Experience: roles ---------- */
.role-mfe { --c: #7cc4ff; }
.role-nbf { --c: #ffb14e; }
.role-dat { --c: #5fd3b0; }
.role-ta  { --c: #c39bff; }
.role-bsc { --c: #ff6a55; }
.role { --accent: var(--c); position: relative; }
.role-icon {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--c);
  background: color-mix(in srgb, var(--c) 14%, transparent);
  color: var(--c);
}
.role-icon .ico { width: 24px; height: 24px; }
.role .role-meta b { color: var(--c); }

.gantt .gbar { cursor: pointer; }
.gantt .gbar .bar { transition: opacity 0.25s, filter 0.25s; }
.gantt .gbar use, .gantt .gbar .lbl { transition: opacity 0.25s; }
.gantt.has-on .gbar:not(.on) .bar { opacity: 0.35; }
.gantt.has-on .gbar:not(.on) use, .gantt.has-on .gbar:not(.on) .lbl { opacity: 0.45; }
.gantt .gbar.on .bar { filter: drop-shadow(0 0 6px currentColor); }
.gantt .gbar:hover .bar { opacity: 1; }
.gantt .gbar:focus-visible { outline: 2px solid var(--accent); }
.gantt .now { font: 400 10px var(--mono); fill: var(--foam); }

.skills-fig canvas { border: 0; }
.skill-groups dt { display: flex; align-items: center; gap: 8px; }
.skill-groups dt .ico { color: var(--accent); }

/* ---------- Tool marks ---------- */
.chips li.has-ico { display: inline-flex; align-items: center; gap: 6px; padding-left: 8px; }
.chips li.has-ico .ico { width: 1.25em; height: 1.25em; }

.skill-groups { margin-top: 28px; }
.skill-groups h3 {
  display: flex; align-items: center; gap: 8px;
  margin: 26px 0 12px;
  font: 500 0.78rem / 1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mist);
}
.skill-groups h3 .ico { color: var(--accent); width: 1.3em; height: 1.3em; }
.tools { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 10px; }
.tools.wide { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.tools li {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  margin: 0; padding: 12px 12px 14px;
  border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  border-radius: 10px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, transparent), color-mix(in srgb, var(--c) 3%, transparent));
  font: 500 0.82rem / 1.3 var(--body); color: var(--foam);
  transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
}
.tools li::marker { content: none; }
.tools li .ico { width: 26px; height: 26px; color: var(--c); flex: none; transition: transform 0.3s; }
.tools li[data-skill] { cursor: pointer; }
.tools li:hover, .tools li.on {
  transform: translateY(-3px);
  border-color: var(--c);
  box-shadow: 0 6px 22px -8px color-mix(in srgb, var(--c) 70%, transparent);
}
.tools li:hover .ico, .tools li.on .ico { transform: scale(1.12) rotate(-4deg); }
.tools.has-on li:not(.on) { opacity: 0.45; }
.tools .used { position: absolute; left: 12px; bottom: 5px; display: flex; gap: 3px; }
.tools .used i { width: 5px; height: 5px; border-radius: 50%; background: var(--r); }

.stack { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.stack li { margin: 0; display: inline-flex; align-items: center; gap: 5px; font: 400 0.72rem / 1.4 var(--mono); color: var(--mist); }
.stack li::marker { content: none; }
.stack .ico { color: var(--c); width: 1.35em; height: 1.35em; transition: transform 0.25s; }
.card:hover .stack .ico { transform: translateY(-2px); }
.card:hover .stack li:nth-child(2) .ico { transition-delay: 0.04s; }
.card:hover .stack li:nth-child(3) .ico { transition-delay: 0.08s; }
.card:hover .stack li:nth-child(4) .ico { transition-delay: 0.12s; }
.card:hover .stack li:nth-child(5) .ico { transition-delay: 0.16s; }
.card:hover .stack li:nth-child(6) .ico { transition-delay: 0.2s; }

/* ---------- Results ---------- */
.res-cheer { --c: #ff8fb8; }
.res-swim  { --c: #7cc4ff; }
.res-acad  { --c: #ffd166; }
.res-stats { margin: 22px 0 26px; }
.seasons .scol { cursor: pointer; outline: none; }
.seasons .scol .shade { fill: transparent; transition: fill 0.2s; }
.seasons .scol.on .shade, .seasons .scol:focus-visible .shade { fill: rgba(234, 246, 248, 0.06); }
.seasons .scol.on text { fill: var(--foam); }
.seasons .srow { transition: opacity 0.25s; }
.seasons.has-on .srow:not(.on) { opacity: 0.4; }
.seasons .srow.on .bar { filter: drop-shadow(0 0 5px currentColor); }
.seasons .srow, .seasons text.intl, .seasons path { pointer-events: none; }
.seasons .cap { font: 700 9px var(--mono); fill: #07222e; }
.seasons .intl { font: 400 10.5px var(--mono); fill: #ff8fb8; }
.race-fig canvas { width: 100%; display: block; }
.race-fig figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.years { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.years li {
  margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 10px; min-width: 78px; border-radius: 10px;
  border: 1px dashed color-mix(in srgb, var(--c) 30%, transparent);
  font: 400 0.75rem / 1 var(--mono); color: var(--mist);
}
.years li::marker { content: none; }
.years li .ico { width: 30px; height: 30px; color: color-mix(in srgb, var(--c) 30%, transparent); }
.years li.on { border-style: solid; border-color: var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); color: var(--foam); }
.years li.on .ico { color: var(--c); }
.seasons .place, .rec-fig .place { font: 700 10px var(--mono); }
.seasons .road { font: 400 10px var(--mono); fill: #ff8fb8; }
.record-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.rec-fig { display: block; width: 100%; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.rec-fig text { font: 400 11px var(--mono); fill: var(--mist); }
.rec-fig .grid { stroke: var(--line); }
.rec-fig .deg { font-size: 9.5px; opacity: 0.7; }
.rec-fig .city { font: 600 12px var(--body); fill: var(--foam); }
.rec-fig .yrs { font-size: 10.5px; fill: #ffd166; }
.rec-fig .city, .rec-fig .yrs { paint-order: stroke; stroke: var(--deep); stroke-width: 3px; stroke-linejoin: round; }
.rec-fig .land { fill: rgba(143, 177, 189, 0.08); }
.rec-fig .states { fill: none; stroke: rgba(143, 177, 189, 0.16); stroke-width: 0.6; }
.rec-fig .coast { fill: none; stroke: rgba(143, 177, 189, 0.42); stroke-width: 0.8; stroke-linejoin: round; }
.rec-fig .region { font: 500 8.5px var(--mono); letter-spacing: 0.22em; fill: var(--mist); opacity: 0.45; }
.rec-fig .trace { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.rec-fig .flight { fill: none; stroke: #ff8fb8; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: 0.85; }
.rec-fig .pt { opacity: 0; }
.rec-fig.go .trace { animation: draw-in 1.4s ease forwards; }
.rec-fig.go .flight { animation: draw-in 1s ease forwards; }
.rec-fig.go .pt { animation: pop-in 0.5s ease forwards; }
@keyframes draw-in { to { stroke-dashoffset: 0; } }
@keyframes pop-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .rec-fig .trace, .rec-fig .flight { stroke-dashoffset: 0; }
  .rec-fig .pt { opacity: 1; }
}
.tuck-fig canvas, .stroke-fig canvas { width: 100%; display: block; }

/* Results: tumble figure variable picker */
.tvars { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 6px; }
.tvars .chip { cursor: pointer; }
.tvars .chip[aria-pressed="true"] { background: rgba(255, 143, 184, 0.16); border-color: #ff8fb8; color: var(--foam, #eaf6f8); }
#tgraph { display: block; width: 100%; touch-action: pan-y; }

/* Results: Fig. 4 in 3D, with live counters */
.t3-stage { position: relative; }
.tuck-fig #tuck { height: clamp(320px, 44vw, 460px); touch-action: pan-y; cursor: grab; border-radius: 10px; background: radial-gradient(120% 90% at 50% 20%, rgba(124, 196, 255, 0.07), transparent 70%); }
.tuck-fig #tuck:active { cursor: grabbing; }
.tuck-fig #tuck.no3d { height: 0; }
.t3-time { position: absolute; left: 12px; top: 10px; margin: 0; font: 400 11px/1.35 "IBM Plex Mono", ui-monospace, monospace; color: var(--mist); pointer-events: none; }
.t3-time b { display: block; font-size: 15px; font-weight: 500; color: var(--foam); }
.t3-hud { position: absolute; right: 10px; top: 10px; display: grid; gap: 1px; min-width: 196px; padding: 7px 9px; border: 1px solid rgba(234, 246, 248, 0.12); border-radius: 8px; background: rgba(7, 34, 46, 0.72); backdrop-filter: blur(3px); }
.t3-hud .r { display: flex; justify-content: space-between; gap: 14px; padding: 2px 4px; border: 0; border-radius: 4px; background: none; font: 400 12px/1.3 "IBM Plex Mono", ui-monospace, monospace; color: var(--mist); cursor: pointer; text-align: left; }
.t3-hud .r b { font-weight: 500; color: var(--foam); font-variant-numeric: tabular-nums; }
.t3-hud .r:hover { background: rgba(234, 246, 248, 0.06); }
.t3-hud .r.on { background: rgba(255, 143, 184, 0.14); }
.t3-hud .r.on span, .t3-hud .r.on b { color: #ff8fb8; }
@media (max-width: 560px) {
  .t3-hud { position: static; margin-top: 8px; min-width: 0; grid-template-columns: 1fr 1fr; column-gap: 8px; padding: 5px 6px; }
  .t3-hud .r { font-size: 10.5px; gap: 6px; }
  .tuck-fig #tuck { height: 340px; }
}

/* ---------- Education ---------- */
.page-education { --accent: #c39bff; }
.cmap-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 14px; }
.cmap-key { display: inline-flex; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: none; font: 500 0.78rem/1.3 var(--mono); color: var(--mist); cursor: pointer; }
.cmap-key:hover, .cmap-key:focus-visible { color: var(--foam); }
.cmap-key i { width: 10px; height: 10px; border-radius: 2px; background: var(--c); }
.cmap-key span { color: var(--foam); }
.subj h2 .no { color: var(--c); }
.demo { margin-top: clamp(36px, 5vw, 52px); }
.demo .demo-course { font: 500 0.82rem/1.4 var(--mono); color: var(--c, var(--accent)); margin-bottom: 12px; }
.demo canvas { height: clamp(300px, 42vw, 440px); }
.demo-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 14px; font: 500 0.8rem/1.4 var(--mono); color: var(--mist); }
.demo-controls label { display: inline-flex; align-items: center; gap: 10px; }
.demo-controls .lbl { margin-right: -4px; }
.subj .chip[aria-pressed="true"] { background: var(--c); border-color: var(--c); }
.demo-note { max-width: 42rem; margin-top: 16px; color: var(--mist); font-size: 0.98rem; }
.also { margin-top: clamp(32px, 4vw, 44px); }
.also h3 { font: 500 0.82rem/1.4 var(--mono); color: var(--mist); margin-bottom: 10px; }
.also ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 4px 28px; }
.also li { display: flex; gap: 10px; margin: 0; padding: 7px 0; border-top: 1px solid var(--line); font-size: 0.95rem; line-height: 1.4; }
.also li span { flex: none; min-width: 5.8em; padding-top: 0.2em; font: 500 0.78rem/1.4 var(--mono); color: var(--c); }

/* prerequisite tree */
.page-education .cmap-legend { margin: clamp(28px, 4vw, 40px) 0 0; }
.tree-fig { margin-top: 14px; overflow-anchor: none; }
.tree, .tree * { overflow-anchor: none; }
.tree-head {
  position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 5; display: grid; align-items: end;
  padding: 10px 0 8px; background: var(--deep); border-bottom: 1px solid var(--line); box-shadow: 0 -70px 0 var(--deep);
  font: 500 0.72rem/1.2 var(--mono); color: var(--mist);
}
.tree-head span { padding: 0 2px; text-align: center; color: var(--c, var(--mist)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree svg { display: block; overflow: visible; }
.t-band { fill: rgba(143, 177, 189, 0.045); }
.t-year { font: 500 10px var(--mono); fill: var(--foam); }
.t-term { font: 400 10px var(--mono); fill: var(--mist); }
.t-stream { opacity: 0.09; }
.t-edge { fill: none; stroke-width: 1.4; stroke-opacity: 0.5; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-opacity 0.2s, stroke-width 0.2s; }
.t-node { cursor: pointer; outline: none; opacity: 0.28; transition: opacity 0.35s; }
.t-node.lit { opacity: 1; }
.t-node rect { fill: color-mix(in srgb, var(--c) 14%, var(--deep)); stroke: color-mix(in srgb, var(--c) 60%, transparent); stroke-width: 1; transition: fill 0.15s; }
.t-node.lit rect { stroke: var(--c); }
.t-node text { font-family: var(--mono); font-weight: 500; fill: var(--foam); text-anchor: middle; pointer-events: none; }
.t-node circle { fill: var(--c); stroke: var(--deep); stroke-width: 1.5; }
.t-node:hover rect, .t-node:focus-visible rect, .t-node.sel rect { fill: color-mix(in srgb, var(--c) 40%, var(--deep)); }
.t-node:focus-visible rect { stroke: var(--foam); stroke-width: 2; }
.focus .t-node { opacity: 0.16; }
.focus .t-node.on { opacity: 1; }
.focus .t-edge { stroke-opacity: 0.08; }
.focus .t-edge.on { stroke-opacity: 1; stroke-width: 2.2; stroke-dashoffset: 0 !important; }
.t-now { stroke: var(--rope); stroke-width: 1; stroke-dasharray: 3 4; opacity: 0.7; }
.t-nowtag { font: 500 10.5px var(--mono); fill: var(--rope); text-anchor: end; paint-order: stroke; stroke: var(--deep); stroke-width: 5px; stroke-linejoin: round; }
.tree-read {
  position: sticky; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 4; margin-top: 10px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: 6px; background: color-mix(in srgb, var(--deep) 92%, transparent);
  backdrop-filter: blur(6px); font-size: 0.92rem; line-height: 1.45; min-height: 3.2em;
}
.tree-read .muted { color: var(--mist); }
.tree-read .t-about { display: block; margin: 3px 0 2px; }
.tree-read .t-links { font-size: 0.85rem; }
.tree-read .chip { margin-left: 6px; padding: 2px 10px; font-size: 0.75rem; }

/* scroll gauges standing in for sliders */
.drive { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; max-width: 100%; }
.drive .track { position: relative; width: clamp(90px, 16vw, 150px); height: 4px; border-radius: 2px; background: var(--line); }
.drive .track i { position: absolute; inset: 0 auto 0 0; width: calc(var(--p, 0) * 100%); border-radius: 2px; background: var(--c, var(--accent)); }
.drive .track i::after { content: ""; position: absolute; right: -5px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--c, var(--accent)); }
.drive output { min-width: 7em; color: var(--foam); }
@media (max-width: 420px) { .drive output { min-width: 0; } }
.drive .how { padding: 1px 7px; border: 1px solid var(--line); border-radius: 9px; font-size: 0.68rem; color: var(--mist); }
.drive .how::before { content: "\2195\00a0"; }
.demo canvas { touch-action: pan-y; }


/* course tabs: one demo per course */
.dtabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: clamp(24px, 3vw, 34px); scroll-margin-top: 84px; }
.dtab {
  padding: 5px 10px; border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); border-radius: 3px; background: none;
  font: 500 0.74rem/1.2 var(--mono); color: var(--mist); cursor: pointer; transition: background 0.15s, color 0.15s;
}
.dtab:hover, .dtab:focus-visible { color: var(--foam); background: color-mix(in srgb, var(--c) 16%, transparent); }
.dtab[aria-selected="true"] { color: var(--deep); background: var(--c); border-color: var(--c); }
.dpanel .demo { margin-top: 18px; }
.demo-controls .hint { color: var(--mist); }

/* keyboard shortcut hints mean nothing on touch screens */
@media (hover: none) and (pointer: coarse) { .kbd-hint { display: none; } }