/* Claude Desktop course, in the Guided path design of the Module 0 site (site/assets/site.css, 26 Oct 2026):
   light paper with navy bands, Fraunces / Inter / JetBrains Mono, amber for the next thing to do, green for done.
   A lesson keeps a "Your progress" card beside the reading column and lays its steps out as a path of stops.
   The home page is the same path, one stop per lesson.
   Motion, kept to what carries meaning: the home path draws itself once, a step's mark fills and the path turns
   green when you tick it, and copying or saving confirms itself. The step-through diagrams loop and can be paused.
   Everything holds still under prefers-reduced-motion. */

:root {
  --paper: #FAF7F1;
  --bone: #F4EFE6;
  --card: #FFFFFF;
  --navy: #0F1B2D;
  --navy-2: #16263D;
  --navy-3: #1D3150;
  --navy-line: #2A3B55;
  --on-navy: #F4EFE6;
  --on-navy-soft: #C9D1DC;
  --on-navy-muted: #A9B4C4;
  --ink: #0F1B2D;
  --text: #26344A;
  --muted: #56627A;
  --line: #E6DFD2;
  --line-2: #CFC4B1;
  --control: #847B6B;
  --amber: #F2A93B;
  --amber-hi: #F6BC63;
  --amber-ink: #8A5200;
  --amber-tint: #FCEFD9;
  --green: #5FCF8A;
  --green-ink: #1B6B3E;
  --step: #35588C;
  --step-tint: #E6ECF5;
  --red: #B4473A;

  /* the names the diagrams paint with */
  --surface: var(--card);
  --sunk: var(--bone);
  --ink-2: var(--muted);
  --amber-soft: var(--amber-tint);
  --good: var(--green-ink);
  --bad: var(--red);

  --serif: "Fraunces", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 160ms;
  --t-med: 300ms;
  --t-slow: 700ms;

  --wide: 1200px;
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 640px) { :root { --gutter: 28px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 24px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--text); font: 400 16px/1.65 var(--sans); overflow-wrap: break-word; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@media (min-width: 640px) { body { font-size: 17px; } }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 8px; }
.bar :focus-visible, .nav :focus-visible, .resume :focus-visible, .plan :focus-visible, .ifsee :focus-visible, .band :focus-visible, .skip:focus-visible { outline-color: var(--amber); }
::selection { background: var(--amber-tint); color: var(--ink); }
img, video { max-width: 100%; }

.gutter { padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); }
.inner { max-width: var(--wide); margin-inline: auto; }
.wrap { width: min(var(--wide), 100% - 2 * var(--gutter)); margin-inline: auto; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 10px; z-index: 60; display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; background: var(--amber); color: var(--navy); font-weight: 600; }
.skip:focus { left: 16px; }
.ic { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: var(--mono); }
.kicker, .eyebrow { margin: 0; font: 600 .74rem/1.35 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.wordmark { display: inline-flex; align-items: center; min-height: 44px; font: 600 1.3rem/1 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 50; color: var(--ink); text-decoration: none; white-space: nowrap; }
.wordmark em { font-style: italic; font-weight: 400; }
.ui { padding: .05em .4em; border: 1px solid var(--line); border-radius: 6px; background: var(--bone); font: 500 .84em var(--mono); color: var(--ink); white-space: nowrap; }

/* ------------------------------------------------------------ buttons */
button { font: inherit; }
.btn, [data-copy], [data-copy-from], [data-copy-plan] {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 999px;
  background: var(--amber); color: var(--navy); font: 600 .88rem/1.2 var(--sans);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background var(--t-fast), transform var(--t-fast) var(--ease);
}
.btn:hover, [data-copy]:hover, [data-copy-from]:hover, [data-copy-plan]:hover { background: var(--amber-hi); }
.btn:active, [data-copy]:active, [data-copy-from]:active, [data-copy-plan]:active { transform: scale(.97); }
.btn--lg { min-height: 48px; padding: 0 22px; font-size: .95rem; }
.btn--ghost { border: 1px solid var(--navy-line); background: transparent; color: var(--on-navy); }
.btn--ghost:hover { background: var(--navy-3); }
.is-copied { background: var(--green) !important; }
[data-anim-toggle] { min-height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--card); color: var(--ink); font: 600 .84rem/1 var(--sans); cursor: pointer; }
[data-anim-toggle]:hover { border-color: var(--ink); }

/* ------------------------------------------------------------ navy top bar (lessons) */
.bar { background: var(--navy); color: var(--on-navy); }
.bar .inner { display: flex; align-items: center; gap: 16px 24px; min-height: 68px; flex-wrap: wrap; }
.bar a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px 0 14px; border-radius: 999px; background: var(--navy-2); color: var(--on-navy); text-decoration: none; font-weight: 600; font-size: .9rem; white-space: nowrap; transition: background var(--t-fast); }
.bar a::before { content: "←"; font-weight: 400; }
.bar a:hover { background: var(--navy-3); }
.where { display: flex; align-items: center; gap: 16px; margin-left: auto; font-size: .88rem; color: var(--on-navy-muted); }
.dots { display: flex; align-items: center; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dots li { width: 12px; height: 12px; border: 1.5px solid #6B7C94; border-radius: 50%; }
.dots li.on { border-color: var(--green); background: var(--green); }
.dots li.on:not(:has(+ li.on)) { border-color: var(--amber); background: var(--amber); box-shadow: 0 0 0 3px var(--navy), 0 0 0 5px var(--amber); }

/* ------------------------------------------------------------ lesson head */
.head { padding-block: 40px 32px; }
.head .inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.head h1 { max-width: 20ch; font: 500 clamp(2.4rem, 6vw, 3.8rem)/1.02 var(--serif); letter-spacing: -.03em; font-variation-settings: "SOFT" 30; color: var(--ink); }
.goal { max-width: 62ch; font-size: 1.1rem; color: var(--text); }
.need { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; max-width: 900px; margin: 10px 0 0; padding: 0; list-style: none; }
.need li { display: grid; gap: 4px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font-size: .94rem; }
.need b { font: 600 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.recall { max-width: 900px; padding: 14px 18px; border: 1px solid #F1D9AE; border-radius: 16px; background: var(--amber-tint); display: grid; gap: 6px; }
.recall .k { font: 600 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
.recall details summary { cursor: pointer; min-height: 32px; font-weight: 600; color: var(--ink); }
.recall details p { margin-top: 6px; color: var(--text); }

/* ------------------------------------------------------------ lesson body: column and progress card */
.body { padding-block: 8px 80px; }
.body .inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px 56px; align-items: start; }
.rail { order: 2; position: sticky; top: 20px; display: grid; gap: 0; padding: 22px 22px 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 24px 48px -36px rgba(15, 27, 45, .45); }
.rail::before { content: "Your progress"; margin-bottom: 8px; font: 500 1.4rem/1.2 var(--serif); color: var(--ink); }
.rail a { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; }
.rail a:first-of-type { border-top: 0; }
.rail a:hover { text-decoration: underline; text-underline-offset: .2em; }
.rail a i { position: relative; width: 24px; height: 24px; border: 2px solid var(--control); border-radius: 50%; background: var(--card); transition: background var(--t-med) var(--ease), border-color var(--t-med), transform var(--t-med) var(--ease); }
.rail a.s i { border-color: var(--amber); }
.rail a.d i { border-color: var(--step); }
.rail a.done i { border-color: var(--green); background: var(--green); transform: scale(1.08); }
.rail a.done i::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border: solid var(--navy); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.meter { display: grid; gap: 8px; margin-top: 10px; padding-top: 14px; border-top: 1px solid var(--line); font: 600 .84rem/1.2 var(--sans); color: var(--muted); }
.meter span { display: block; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.meter span i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width var(--t-slow) var(--ease); }

.main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 72px; min-width: 0; }

/* ------------------------------------------------------------ parts */
.part { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; scroll-margin-top: 24px; }
.part-head { display: grid; gap: 10px; }
.part h2 { font: 500 clamp(1.7rem, 3vw, 2.2rem)/1.12 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.part .lead { max-width: 62ch; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tag { padding: 5px 11px; border-radius: 999px; font: 600 .7rem/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.tag.s { background: var(--amber-tint); color: var(--amber-ink); }
.tag.d { background: var(--step-tint); color: var(--step); }
.tag.skill { border: 1px solid var(--line-2); color: var(--muted); }

.card { display: grid; gap: 14px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.card h3 { font: 600 1.05rem/1.35 var(--sans); color: var(--ink); }
label.q { font-weight: 600; color: var(--ink); }
.hint { font-size: .92rem; color: var(--muted); }
.note { font-size: .88rem; color: var(--muted); }
.carry { font-size: .95rem; color: var(--muted); }
.carry span { font-weight: 600; color: var(--ink); }
.carry span.empty { font-weight: 400; font-style: italic; color: var(--muted); }
.saved { min-height: 1em; font: 500 .74rem/1.2 var(--mono); color: var(--green-ink); }
.fields { display: grid; gap: 12px; }

textarea, input[type=text] { width: 100%; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: 1rem; resize: vertical; transition: border-color var(--t-fast), background var(--t-fast); }
textarea { min-height: 92px; }
textarea:focus, input[type=text]:focus { outline: 3px solid var(--amber); outline-offset: 1px; border-color: var(--amber); background: var(--card); }

.choices { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.choices legend { margin-bottom: 10px; padding: 0; font-weight: 600; color: var(--ink); }
.choice { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 12px; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.choice:hover { border-color: var(--line-2); }
.choice input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--amber-ink); }
.choice:has(input:checked) { border-color: var(--amber); background: var(--amber-tint); }
.choice span { display: grid; gap: 2px; }
.choice small { font-size: .9rem; color: var(--muted); }
.advice { padding: 12px 16px; border-radius: 12px; background: var(--amber-tint); font-size: .95rem; color: var(--text); }

details.reveal { border: 1px solid var(--line); border-radius: 14px; background: var(--bone); }
details.reveal summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 10px 16px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
details.reveal summary::-webkit-details-marker { display: none; }
details.reveal summary::after { content: ""; flex: none; width: 8px; height: 8px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg); transition: transform var(--t-med) var(--ease); }
details.reveal[open] summary::after { transform: rotate(-135deg); }
details.reveal > :not(summary) { margin: 0; padding: 0 16px 14px; }
details.reveal[open] > :not(summary) { animation: unfold var(--t-med) var(--ease); }
.quiz { display: grid; gap: 10px; }

/* ------------------------------------------------------------ Do: the steps as a path of stops */
.steps { position: relative; margin: 0; padding: 0; list-style: none; counter-reset: n; }
.step { counter-increment: n; position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 20px; padding-bottom: 18px; }
.step::before, .step::after { content: ""; position: absolute; left: 23px; top: 52px; width: 2px; }
.step::before { bottom: 0; background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 12px); }
.step::after { height: 0; background: var(--green); transition: height var(--t-slow) var(--ease); }
.step:has(.tick input:checked)::after { height: calc(100% - 52px); }
.step:last-child::before, .step:last-child::after { display: none; }
.tick { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border: 2px dashed var(--line-2); border-radius: 50%; background: var(--paper); color: var(--muted); font: 600 1.05rem/1 var(--sans); cursor: pointer; transition: background var(--t-med) var(--ease), border-color var(--t-med), color var(--t-med); }
.tick::before { content: counter(n); }
.tick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.tick:has(input:focus-visible) { outline: 3px solid var(--navy); outline-offset: 3px; }
.step:first-child:not(:has(.tick input:checked)) .tick,
.step:has(.tick input:checked) + .step:not(:has(.tick input:checked)) .tick { border: 2px solid var(--amber); background: var(--amber); color: var(--navy); box-shadow: 0 0 0 6px var(--amber-tint); }
.step:has(.tick input:checked) .tick { border: 2px solid var(--green); background: var(--green); color: var(--navy); animation: pop var(--t-med) var(--ease); }
.step:has(.tick input:checked) .tick::before { content: ""; width: 9px; height: 16px; margin-top: -4px; border: solid var(--navy); border-width: 0 3px 3px 0; transform: rotate(45deg); animation: draw var(--t-med) var(--ease) both; }
.txt { display: grid; gap: 10px; min-width: 0; padding: 16px 20px 18px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color var(--t-med); }
.txt > p:first-child { font-weight: 600; font-size: 1.05rem; color: var(--ink); }
.txt p { max-width: 62ch; }
.step:has(.tick input:checked) .txt { border-color: #BFE3CB; }
.copyline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.copyline code { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bone); font: 500 .88rem var(--mono); color: var(--ink); }

/* "If you see this instead" sits on navy, like the site's "Where it goes wrong" */
.ifsee { display: grid; gap: 16px; padding: 26px 28px 28px; border-radius: 20px; background: var(--navy); color: var(--on-navy-soft); }
.ifsee h3 { font: 500 1.5rem/1.2 var(--serif); color: var(--on-navy); }
.ifsee dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin: 0; counter-reset: trap; }
.ifsee dl > div { padding: 16px 18px; border: 1px solid var(--navy-line); border-radius: 16px; background: var(--navy-2); counter-increment: trap; }
.ifsee dt { font-weight: 600; color: var(--on-navy); }
.ifsee dt::before { content: counter(trap, decimal-leading-zero); display: block; margin-bottom: 8px; font: 500 .78rem/1 var(--mono); color: var(--amber); }
.ifsee dd { margin: 6px 0 0; font-size: .93rem; line-height: 1.6; }
.ifsee .ui { border-color: var(--navy-line); background: #0B1422; color: var(--on-navy); white-space: normal; }

/* ------------------------------------------------------------ text to paste into Claude */
.prompt { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label btn" "text text"; align-items: center; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: linear-gradient(var(--bone) 0 56px, var(--line) 56px 57px, var(--card) 57px); }
.prompt::before { content: "Prompt"; grid-area: label; display: flex; align-items: center; height: 56px; padding-left: 18px; font: 600 .74rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.prompt > button { grid-area: btn; margin: 6px 6px 6px 0; }
.prompt > span, .prompt > p { grid-area: text; padding: 16px 20px 18px; font: 400 .86rem/1.7 var(--mono); color: var(--ink); white-space: pre-wrap; }
.pass { display: grid; gap: 6px; font-size: .95rem; }
.pass b { color: var(--green-ink); }

/* ------------------------------------------------------------ practice files and asides */
.kit { display: grid; gap: 12px; padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--bone); }
.kit h3 { font: 500 1.3rem/1.2 var(--serif); color: var(--ink); }
.kit p { font-size: .95rem; color: var(--text); }
.files { display: grid; margin: 0; padding: 0; list-style: none; }
.files li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; min-height: 44px; padding: 8px 0; border-top: 1px solid var(--line-2); font-size: .9rem; }
.files a { font: 500 .84rem/1.3 var(--mono); }
.files span { color: var(--muted); font-size: .84rem; }
.aside { display: grid; gap: 4px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); font-size: .95rem; }
.aside b { font: 600 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------ the plan card */
.plan { display: grid; gap: 18px; padding: 32px 36px; border: 1px solid var(--navy-line); border-radius: 24px; background: var(--navy-2); color: var(--on-navy); scroll-margin-top: 24px; }
.plan .eyebrow { color: var(--amber); }
.plan h2 { font: 500 clamp(1.7rem, 3vw, 2.2rem)/1.1 var(--serif); letter-spacing: -.015em; color: var(--on-navy); }
.plan dl { display: grid; grid-template-columns: minmax(140px, 220px) minmax(0, 1fr); gap: 0 20px; margin: 0; }
.plan dt, .plan dd { padding: 10px 0; border-top: 1px solid var(--navy-line); }
.plan dt { padding-top: 13px; font: 600 .7rem/1.5 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--on-navy-muted); }
.plan dd { margin: 0; color: var(--on-navy); border-radius: 6px; }
.plan dd.empty { font-style: italic; color: var(--on-navy-muted); }
.plan dd.flash { animation: flash 1.2s var(--ease); }
.plan .row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.plan .note { color: var(--on-navy-muted); }

/* ------------------------------------------------------------ next and previous */
.next { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.next > a, .next > span { display: flex; align-items: center; min-height: 64px; padding: 14px 20px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; line-height: 1.35; transition: border-color var(--t-fast); }
.next > a:hover { border-color: var(--muted); }
.next > :last-child { justify-content: flex-end; text-align: right; }
.next > a:last-child::after { content: "→"; display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-left: 12px; border-radius: 50%; background: var(--amber); color: var(--navy); font-weight: 400; }
.next > a:first-child:not(:last-child)::before { content: "←"; margin-right: 12px; color: var(--muted); font-weight: 400; }
.next > span { color: var(--muted); }
.soon { font: 500 .78rem/1 var(--mono); color: var(--muted); }

/* ------------------------------------------------------------ diagrams */
.diagram { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.diagram svg { display: block; width: 100%; height: auto; overflow: hidden; }
.dg-wrap { overflow-x: auto; overflow-y: hidden; contain: paint; }
@media (max-width: 640px) { .dg-wrap svg { min-width: 600px; } }
.diagram figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--muted); }
.diagram figcaption b { margin-right: 8px; font: 600 .7rem/1.3 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--amber-ink); }
.dg text { font-family: var(--sans); fill: var(--ink); }
.dg .t2 { fill: var(--ink-2); }
.dg .ta { fill: var(--amber-ink); }
.dg .tm { font-family: var(--mono); }
.dg .on-pill { fill: var(--paper); }
.dg .on-amber { fill: #0F1B2D; }
.dg .box, .dg .frame-box { fill: var(--surface); stroke: var(--line); }
.dg .edge { fill: var(--surface); stroke: var(--ink); stroke-width: 2; }
.dg .sunk { fill: var(--sunk); }
.dg .soft { fill: var(--amber-soft); stroke: var(--amber); }
.dg .soft-hi { fill: var(--amber-soft); stroke: var(--amber); stroke-width: 2; }
.dg .pill { fill: var(--ink); }
.dg .amber { fill: var(--amber); }
.dg .knob { fill: var(--surface); }
.dg .doc { fill: var(--step); }
.dg .wire { stroke: var(--amber); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg .rule { stroke: var(--line); fill: none; }
.dg .dashed { fill: none; stroke: var(--ink-2); stroke-width: 1.5; stroke-dasharray: 5 4; }
.dg .cut { stroke: var(--bad); stroke-width: 2; fill: none; stroke-dasharray: 4 4; }
.dg .cut-dot { fill: var(--surface); stroke: var(--bad); stroke-width: 2; }
.dg .cut-x { stroke: var(--bad); stroke-width: 2; }
.dg .tick { stroke: var(--good); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.dg .dot { fill: var(--line); }
.diagram.anim .frame { opacity: .3; animation: dg-step 4.5s infinite; }
.diagram.anim .dot { animation: dg-dot 4.5s infinite; }
.diagram.anim .f2 { animation-delay: 1.5s; }
.diagram.anim .f3 { animation-delay: 3s; }
.diagram.anim.paused .frame { animation: none; opacity: 1; }
.diagram.anim.paused .dot { animation: none; }

/* ------------------------------------------------------------ home: nav, continue, the path */
.nav { background: var(--navy); color: var(--on-navy); }
.nav-in { display: flex; align-items: center; gap: 28px; min-height: 68px; }
.nav .wordmark { color: var(--on-navy); }
.nav-links { display: flex; gap: 4px; margin-left: 12px; }
.nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; color: var(--on-navy-muted); text-decoration: none; font-size: .92rem; font-weight: 500; }
.nav-links a:hover { color: var(--on-navy); }
.nav-links a[aria-current] { background: var(--navy-2); color: var(--on-navy); }
.nav-prog { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 8px 14px; border: 1px solid var(--navy-line); border-radius: 999px; font-size: .86rem; color: var(--on-navy-muted); white-space: nowrap; }
.nav-prog .ic { color: var(--green); }

.resume { padding: 20px 0 56px; background: var(--navy); color: var(--on-navy); border-top: 1px solid var(--navy-2); }
.resume-k { margin: 0 0 16px; font: 600 .78rem/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--on-navy-muted); }
.resume-card { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); border: 1px solid var(--navy-line); border-radius: 24px; background: var(--navy-2); overflow: hidden; }
.resume-main { padding: 36px 40px 40px; }
.resume-where { font-size: .92rem; color: var(--on-navy-muted); }
.resume-title { max-width: 22ch; margin-top: 10px; text-wrap: balance; font: 500 clamp(1.8rem, 3.4vw, 2.75rem)/1.08 var(--serif); letter-spacing: -.02em; font-variation-settings: "SOFT" 40; color: var(--on-navy); }
.resume-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; padding: 0; list-style: none; font-size: .92rem; color: var(--on-navy-muted); }
.resume-meta li { display: inline-flex; align-items: center; gap: 8px; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.resume-side { display: flex; flex-direction: column; justify-content: center; gap: 22px; padding: 36px; border-left: 1px solid var(--navy-line); background: rgba(11, 20, 34, .35); }
.resume-done { display: flex; align-items: center; gap: 12px; font-weight: 500; color: var(--on-navy); }
.resume-done .ic { width: 24px; height: 24px; color: var(--amber); }
.resume-left { font-size: .9rem; color: var(--on-navy-muted); }
.resume-left b { color: var(--on-navy); }
.mini-path { position: relative; display: flex; justify-content: space-between; margin: 0; padding: 0; list-style: none; }
.mini-path::before { content: ""; position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; background: var(--navy-line); transform-origin: left; }
.mp { position: relative; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font: 600 .82rem/1 var(--sans); }
.mp .ic { display: none; width: 16px; height: 16px; stroke-width: 3; }
.mp--done { background: var(--green); color: var(--navy); }
.mp--done .mp-n { display: none; }
.mp--done .ic { display: block; }
.mp--next { background: var(--amber); color: var(--navy); box-shadow: 0 0 0 4px rgba(242, 169, 59, .25); }
.mp--todo { border: 1.5px dashed #6B7C94; background: var(--navy-2); color: var(--on-navy-muted); }

.track { padding-top: 64px; }
.track-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 32px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.track-head h2 { font: 500 clamp(1.75rem, 3.2vw, 2.4rem)/1.08 var(--serif); letter-spacing: -.02em; color: var(--ink); }
.track-blurb { max-width: 44ch; margin: 0 0 4px auto; color: var(--muted); text-align: right; }
.path-sec { padding: 48px 0 24px; }
.path-grid { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 72px; }
.mod-info { align-self: start; position: sticky; top: 28px; display: grid; gap: 4px; }
.mod-h { font: 500 clamp(2.2rem, 4vw, 3.1rem)/1 var(--serif); letter-spacing: -.025em; color: var(--ink); }
.mod-h--sm { font-size: clamp(1.8rem, 3vw, 2.3rem); }
.mod-sub { margin-top: 6px; font: italic 400 1.25rem/1.3 var(--serif); color: var(--muted); }
.mod-note { margin-top: 14px; color: var(--text); }
.progress { height: 8px; margin-top: 22px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--green); transition: width var(--t-slow) var(--ease); }
.mod-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: .86rem; color: var(--muted); }

.path { position: relative; margin: 0; padding: 0; list-style: none; }
.stop { position: relative; padding-bottom: 18px; }
.stop::before { content: ""; position: absolute; left: 23px; top: 48px; bottom: 0; width: 2px; background: repeating-linear-gradient(to bottom, var(--line-2) 0 6px, transparent 6px 12px); transform-origin: top; }
.stop:last-child::before { display: none; }
.stop--done::before { background: var(--green); }
.stop-link { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 22px; align-items: start; color: inherit; text-decoration: none; border-radius: 18px; }
.stop-mark { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; font: 600 1.05rem/1 var(--sans); }
.stop-mark .ic { display: none; width: 22px; height: 22px; stroke-width: 3; }
.stop--done .stop-num { display: none; }
.stop--done .stop-mark .ic { display: block; }
.stop--done .stop-mark { background: var(--green); color: var(--navy); }
.stop--next .stop-mark { background: var(--amber); color: var(--navy); box-shadow: 0 0 0 6px var(--amber-tint); }
.stop--todo .stop-mark { border: 2px dashed var(--line-2); background: var(--paper); color: var(--muted); }
.stop-card { display: block; padding: 14px 20px 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card); transition: border-color var(--t-fast), box-shadow var(--t-med); }
.stop--next .stop-card { padding: 20px 24px 22px; border-color: var(--amber); box-shadow: 0 18px 40px -26px rgba(15, 27, 45, .45); }
.stop--todo .stop-card { border-style: dashed; border-color: var(--line-2); background: transparent; }
a.stop-link:hover .stop-card { border-color: var(--muted); }
a.stop-link:hover .stop-title { text-decoration: underline; text-underline-offset: .2em; }
.stop-state { display: block; font: 600 .72rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stop--done .stop-state { color: var(--green-ink); }
.stop--next .stop-state { color: var(--amber-ink); }
.st { display: none; align-items: center; gap: 6px; }
.st .ic { width: 15px; height: 15px; }
.stop--done .st-done, .stop--next .st-next, .stop--todo .st-todo { display: inline-flex; }
.stop-title { display: block; margin-top: 4px; text-wrap: balance; font: 600 1.08rem/1.32 var(--sans); color: var(--ink); }
.stop--next .stop-title { font: 500 1.6rem/1.15 var(--serif); letter-spacing: -.01em; }
.stop-meta { display: block; margin-top: 3px; font-size: .88rem; color: var(--muted); }
.stop-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.stop-tags span { padding: 3px 9px; border: 1px solid var(--line-2); border-radius: 999px; font: 600 .68rem/1.3 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.stop-cta { display: none; margin-top: 16px; }
.stop--next .stop-cta { display: inline-flex; }

/* the four parts, on navy */
.band { margin-top: 56px; padding: 64px 0 72px; background: var(--navy); color: var(--on-navy-soft); }
.band h2 { font: 500 clamp(1.9rem, 3.4vw, 2.5rem)/1.1 var(--serif); color: var(--on-navy); }
.band-intro { max-width: 60ch; margin-top: 10px; color: var(--on-navy-muted); }
.parts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.parts li { padding: 22px 24px; border: 1px solid var(--navy-line); border-radius: 18px; background: var(--navy-2); }
.parts h3 { font: 600 1.04rem/1.35 var(--sans); color: var(--on-navy); }
.parts h3 span { display: block; margin-bottom: 10px; font: 500 .8rem/1 var(--mono); color: var(--amber); }
.parts li.do h3 span { color: #8FAAD3; }
.parts p { margin-top: 8px; font-size: .94rem; line-height: 1.6; }

.home-plan { padding: 64px 0 24px; }
.foot { margin-top: 48px; padding: 28px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.foot p { max-width: 70ch; }

/* ------------------------------------------------------------ motion */
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes draw { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes unfold { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@keyframes flash { 0% { background: rgba(242, 169, 59, .35); } 100% { background: transparent; } }
@keyframes dg-step { 0%, 8% { opacity: .3; } 12%, 38% { opacity: 1; } 44%, 100% { opacity: .3; } }
@keyframes dg-dot { 0%, 8% { fill: var(--line); } 12%, 38% { fill: var(--amber); } 44%, 100% { fill: var(--line); } }
@keyframes grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 6px var(--amber-tint); } 50% { box-shadow: 0 0 0 12px rgba(252, 239, 217, .55); } }

/* The home path draws itself once, stop by stop, when it scrolls into view. Without script nothing waits. */
.js .path:not(.in) .stop { opacity: 0; }
.path.in .stop { animation: rise 560ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.path.in .stop::before { animation: grow-y 700ms var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 200ms); }
.path.in .stop--next .stop-mark { animation: ring 1.8s var(--ease) 900ms 3; }
.js .mini-path:not(.in) .mp { opacity: 0; }
.mini-path.in::before { animation: grow-x 900ms var(--ease) both; }
.mini-path.in .mp { animation: rise 420ms var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms + 150ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .diagram.anim .frame { animation: none !important; opacity: 1; }
  .diagram.anim .dot { animation: none !important; }
  .diagram [data-anim-toggle] { display: none; }
}

/* Boxes that hold running text are held to the column width, so a long label can't push a card past the screen. */
.txt, .card, .kit, .ifsee, .plan, .recall, .aside, .pass, .quiz, .fields, .part-head, .advice { grid-template-columns: minmax(0, 1fr); }
.txt > *, .card > *, .kit > *, .files li > * { min-width: 0; }
code, details.reveal summary, .recall summary { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }
.diagram, .dg-wrap, details.reveal, details.reveal > * { min-width: 0; max-width: 100%; }

/* ------------------------------------------------------------ smaller screens */
@media (max-width: 1023px) {
  .body .inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .rail { order: 0; position: static; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 8px; padding: 16px; }
  .rail::before { grid-column: 1 / -1; font-size: 1.15rem; }
  .rail a { grid-template-columns: 1fr; justify-items: center; gap: 6px; padding: 8px 0; border-top: 0; text-align: center; font-size: .85rem; }
  .meter { grid-column: 1 / -1; }
  .path-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .mod-info { position: static; }
  .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 779px) {
  .resume-card { grid-template-columns: minmax(0, 1fr); }
  .resume-side { border-left: 0; border-top: 1px solid var(--navy-line); }
  .track-blurb { margin-left: 0; text-align: left; flex-basis: 100%; }
}
@media (max-width: 639px) {
  .nav-links { display: none; }
  .nav-in { gap: 12px; min-height: 60px; }
  .bar .inner { min-height: 60px; padding-block: 8px; }
  .where > span { display: none; }
  .ui { white-space: normal; overflow-wrap: anywhere; }
  .head { padding-block: 28px 24px; }
  .resume { padding: 18px 0 32px; }
  .resume-main { padding: 22px 20px 24px; }
  .resume-title { font-size: 1.75rem; }
  .resume-actions .btn { flex: 1 1 100%; }
  .resume-side { gap: 16px; padding: 20px; }
  .mp { width: 30px; height: 30px; }
  .stop-link, .step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; }
  .stop-mark, .tick { width: 40px; height: 40px; font-size: .95rem; }
  .stop::before, .step::before, .step::after { left: 19px; top: 44px; }
  .step:has(.tick input:checked)::after { height: calc(100% - 44px); }
  .stop--next .stop-card { padding: 16px 18px 18px; }
  .stop--next .stop-title { font-size: 1.35rem; }
  .stop-cta { width: 100%; }
  .card { padding: 18px; }
  .txt { padding: 14px 16px; }
  .ifsee { padding: 22px 18px; }
  .plan { padding: 24px 20px; }
  .plan dl { grid-template-columns: minmax(0, 1fr); }
  .plan dt { padding-bottom: 0; }
  .plan dd { padding-top: 4px; border-top: 0; }
  .parts { grid-template-columns: minmax(0, 1fr); }
  .next { grid-template-columns: minmax(0, 1fr); }
  .next > :last-child { justify-content: space-between; text-align: left; }
}