/* Study side: curriculum, module and lesson pages for the new courses.
   Layout borrowed from a frame + rail + card shell; colours and type are insideout's. */

:root {
  --frame: #E8E6E1;
  --card: #FCFBF8;
  --card-2: #F5F3EE;
  --inset: #EFEBE3;
  --ink: #1D1C1A;
  --ink-2: #5E5B55;
  --ink-3: #97938B;
  --rule: rgba(29, 28, 26, .10);
  --rule-2: rgba(29, 28, 26, .16);
  --orange: #FF5A1F;
  --orange-ink: #C2410C;
  --green: #23885A;
  --green-bg: rgba(35, 136, 90, .08);
  --red: #D23F2A;
  --red-bg: rgba(210, 63, 42, .07);
  --blue: #2F6BD8;
  --violet: #7B4FD3;
  --dark: #1D1C1A;
  --on-dark: #FCFBF8;
  --lift-1: 0 1px 1px rgba(60, 48, 30, .06), 0 2px 4px rgba(60, 48, 30, .06);
  --lift-2: 0 1px 2px rgba(60, 48, 30, .07), 0 4px 8px rgba(60, 48, 30, .07), 0 12px 24px rgba(60, 48, 30, .07);
  --sans: "Satoshi", ui-sans-serif, system-ui, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "JetBrains Mono Variable", "JetBrains Mono", ui-monospace, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --enter: cubic-bezier(.23, 1, .32, 1);
  --r-card: 22px;
  --r-box: 14px;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --frame: #121110;
  --card: #1C1B19;
  --card-2: #242320;
  --inset: #2A2825;
  --ink: #EEEBE4;
  --ink-2: #AFAAA0;
  --ink-3: #78736A;
  --rule: rgba(238, 235, 228, .09);
  --rule-2: rgba(238, 235, 228, .16);
  --orange-ink: #FF8A5B;
  --green: #4CC08A;
  --green-bg: rgba(76, 192, 138, .10);
  --red: #F07563;
  --red-bg: rgba(240, 117, 99, .10);
  --blue: #7EA6F0;
  --violet: #A98BEA;
  --dark: #EEEBE4;
  --on-dark: #1D1C1A;
  --lift-1: 0 1px 2px rgba(0, 0, 0, .3);
  --lift-2: 0 2px 6px rgba(0, 0, 0, .3), 0 12px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--frame);
  color: var(--ink);
  font: 400 15.5px/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  min-height: 100dvh;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Shell ---------- */
.st-shell {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 0 16px;
  padding: 16px 16px 16px 12px;
  min-height: 100dvh;
}
/* Wide screens: a narrow rail with each place named under its icon, Get Pro and Settings at the bottom.
   Phones turn it into the tab bar (see Responsive). */
.st-rail {
  position: sticky; top: 16px; z-index: 30;
  height: calc(100dvh - 32px);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 8px 0 4px;
}
.st-rail a.st-ri {
  width: 66px; height: 60px; border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  color: var(--ink-2);
  transition: background-color .16s var(--ease), color .16s var(--ease), opacity .16s var(--ease);
}
.st-rail a.st-ri[hidden] { display: none; }
.st-rail a.st-ri svg { width: 20px; height: 20px; }
.st-rail a.st-ri:hover { background: color-mix(in srgb, var(--card) 55%, transparent); color: var(--ink); }
.st-rail a.st-ri[aria-current="page"] { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
.st-rail .st-grow { flex: 1; }
/* Get Pro keeps the dark of the top-bar button it replaces; on /pricing it's the page you're on. */
.st-rail a.st-ri-pro:not([aria-current]) { background: var(--dark); color: var(--on-dark); }
.st-rail a.st-ri-pro:not([aria-current]):hover { opacity: .86; }
[data-page="dashboard"] .st-rail [data-getpro], [data-page="settings"] .st-rail [data-getpro] { display: none; }
@media (min-width: 901px) {
  /* The pinwheel sits right above the rail: half the rail, the gap, half the mark. */
  .st-top { margin-left: calc(-36px - 16px - 9.5px); }
  .st-top .st-getpro { display: none; }
  .st-rl { font-weight: 500; }
}
@media (max-width: 900px) { .st-rail a.st-ri.st-ri-pro { display: none; } } /* beats the tab bar's display: flex below */
/* Search: the wide search field in the top bar on wide screens; on phones a round icon beside light/dark, which
   keeps the tab bar to the five places (Learn, Tracks, Practice, Interview, Progress). */
.st-top .st-qbtn { display: none; }
@media (max-width: 900px) { .st-top .st-qbtn { display: grid; } }
/* Settings sits in the rail on wide screens. On phones it leaves the tab bar for the top bar's right end. */
.st-top .st-gear { display: none; }
.st-top .st-gear[aria-current="page"] { background: var(--dark); border-color: var(--dark); color: var(--on-dark); }
@media (max-width: 900px) { .st-top .st-gear { display: grid; } .st-rail a.st-ri[href="/settings.html"] { display: none; } }

.st-main { min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.st-top {
  display: flex; align-items: center; gap: 12px;
  height: 52px;
}
/* The path beside the wordmark: thin slanted slashes, the page you're on a shade darker. */
.st-crumbs { display: flex; align-items: center; gap: 13px; font-size: 15px; color: var(--ink-2); min-width: 0; }
.st-crumbs a { white-space: nowrap; transition: color .16s var(--ease); }
.st-crumbs a:hover { color: var(--ink); }
.st-crumbs .st-sep { flex: none; width: 1.5px; height: 17px; border-radius: 1px; background: var(--rule-2); transform: rotate(18deg); font-size: 0; }
.st-crumbs span:last-child { color: var(--ink); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-search {
  margin-left: auto;
  display: flex; align-items: center; gap: 10px;
  width: min(420px, 40vw); height: 42px; padding: 0 8px 0 16px;
  border-radius: 999px; border: 1px solid var(--rule);
  background: var(--card); color: var(--ink-3); cursor: text;
  font-size: 14px; text-align: left;
  transition: border-color .16s var(--ease);
}
.st-search:hover { border-color: var(--rule-2); }
.st-search svg { width: 16px; height: 16px; flex: none; }
.st-search > span:not(.st-kbd) { flex: 1; }
.st-kbd {
  font: 500 12px/1 var(--sans); color: var(--ink-2);
  padding: 5px 7px; border-radius: 7px; background: var(--card-2); border: 1px solid var(--rule);
}
.st-iconbtn {
  width: 42px; height: 42px; border-radius: 999px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-2);
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.st-iconbtn:hover { color: var(--ink); border-color: var(--rule-2); }
.st-iconbtn svg { width: 18px; height: 18px; }
.st-theme .st-moon { display: none; }
:root[data-theme="dark"] .st-theme .st-sun { display: none; }
:root[data-theme="dark"] .st-theme .st-moon { display: block; }

.st-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--lift-1);
}
.st-pad { padding: 32px 36px; }

/* ---------- Buttons ---------- */
.st-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 42px; padding: 0 20px; border-radius: 999px;
  font: 500 14.5px/1 var(--sans); cursor: pointer; white-space: nowrap;
  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink);
  transition: background-color .16s var(--ease), border-color .16s var(--ease), transform .09s var(--ease), opacity .16s var(--ease);
}
.st-btn:hover { background: var(--card-2); }
.st-btn:active { transform: translateY(1px); }
.st-btn.dark { background: var(--dark); color: var(--on-dark); border-color: var(--dark); }
.st-btn.dark:hover { opacity: .9; }
.st-btn.small { height: 34px; padding: 0 14px; font-size: 13.5px; }
.st-btn[disabled] { opacity: .4; cursor: not-allowed; transform: none; }
.st-link { color: var(--ink-2); font-size: 14px; border-bottom: 1px solid var(--rule-2); }
.st-link:hover { color: var(--ink); border-color: var(--ink-3); }

/* ---------- Headings ---------- */
.st-h1 {
  margin: 0; font: 380 clamp(32px, 4.2vw, 48px)/1.05 var(--serif);
  font-variation-settings: "opsz" 144; letter-spacing: -.02em;
}
.st-h1 i { font-style: italic; }
.st-lede { margin: 12px 0 0; max-width: 62ch; color: var(--ink-2); font-size: 17px; line-height: 1.55; }
.st-label { font-size: 13px; color: var(--ink-3); }

/* ---------- Curriculum ---------- */
.st-head { padding: 36px 36px 30px; }
.st-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.st-mod {
  display: flex; flex-direction: column;
  padding: 12px 12px 22px;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.st-mod:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.st-vis {
  background: var(--inset); border-radius: 14px;
  aspect-ratio: 16 / 9; display: grid; place-items: center; overflow: hidden;
  color: var(--ink);
}
.st-vis svg { width: 78%; height: 78%; overflow: visible; }
.st-mod .st-mod-body { padding: 18px 12px 0; display: flex; flex-direction: column; flex: 1; }
.st-mod h2, .st-mod h3 { margin: 4px 0 6px; font: 500 21px/1.2 var(--sans); letter-spacing: -.015em; }
.st-mod p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }
.st-mod .st-meta { margin-top: auto; padding-top: 16px; display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-3); }
.st-bar { flex: 1; height: 4px; border-radius: 4px; background: var(--rule); overflow: hidden; max-width: 120px; }
.st-bar i { display: block; height: 100%; background: var(--green); border-radius: 4px; }

/* ---------- Module page ---------- */
.st-hero { display: grid; grid-template-columns: 1.1fr .9fr; gap: 32px; padding: 36px; align-items: center; }
.st-hero .st-vis { aspect-ratio: 4 / 3; }
.st-hero-actions { display: flex; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.st-facts { display: flex; gap: 28px; margin-top: 24px; flex-wrap: wrap; }
.st-facts div { font-size: 13px; color: var(--ink-3); max-width: 30ch; }
.st-facts strong { display: block; color: var(--ink); font-weight: 500; font-size: 14.5px; margin-bottom: 2px; }
.st-sec-title { margin: 12px 4px 0; font: 500 20px/1.2 var(--sans); letter-spacing: -.01em; }
.st-units { display: grid; gap: 12px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.st-unit {
  display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 20px;
  min-height: 150px;
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.st-unit:hover { box-shadow: var(--lift-2); transform: translateY(-2px); }
.st-unit .st-unum { font: 500 13px/1 var(--sans); color: var(--ink-3); font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 8px; }
.st-unit h3 { margin: 4px 0 0; font: 500 17px/1.3 var(--sans); letter-spacing: -.01em; }
.st-unit p { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.5; }
.st-unit .st-state { margin-top: auto; padding-top: 10px; font-size: 12.5px; color: var(--ink-3); }
.st-unit.is-done .st-state { color: var(--green); }
.st-unit.is-ready .st-state { color: var(--orange-ink); }
.st-tick { width: 16px; height: 16px; border-radius: 50%; display: none; place-items: center; background: var(--green); color: #fff; }
.st-tick svg { width: 10px; height: 10px; }
.st-unit.is-done .st-tick { display: inline-grid; }

/* ---------- Lesson page ---------- */
/* The lesson takes the full width. Its sections hide behind the Sections key in the lesson head (user, 2026-11-03:
   the always-on side panel repeated what the bar already shows). */
.st-lesson { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
.st-lhead { position: relative; z-index: 20; padding: 22px 28px; display: flex; flex-direction: column; gap: 14px; }
.st-lhead-row { display: flex; align-items: center; gap: 16px; }
.st-lhead-row h1 { margin: 0; font: 500 17px/1.3 var(--sans); flex: 1; min-width: 0; }
.st-count { font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums; }

.st-body { padding: 52px clamp(24px, 5vw, 64px) 40px; }
/* The reading column sits in the middle of the card, with the footer lined up under it. */
.st-prose, .st-body > .st-lfoot, .st-body > .st-report { max-width: 880px; margin-left: auto; margin-right: auto; }
.st-topic { font-size: 13px; color: var(--ink-3); margin: 0 0 8px; }
.st-body h2.st-h1 { font-size: clamp(30px, 3.6vw, 42px); margin-bottom: 24px; }
.st-sec[hidden] { display: none; }
@keyframes st-in { from { opacity: 0; transform: translateY(6px); } }
.st-prose p { margin: 0 0 18px; font-size: 17.5px; line-height: 1.72; color: var(--ink); }
.st-prose p strong { font-weight: 700; }
.st-prose code, .st-callout code, .st-predict code, .st-steps code {
  font: 13.5px/1.4 var(--mono); background: var(--card-2); border: 1px solid var(--rule);
  padding: 1px 5px; border-radius: 5px;
}
.st-prose h3 { margin: 32px 0 10px; font: 500 19px/1.3 var(--sans); }
.st-callout {
  margin: 0 0 24px; padding: 14px 18px; border-radius: 0 12px 12px 0;
  border-left: 3px solid var(--green); background: var(--green-bg);
  font-size: 15px; line-height: 1.6;
}

/* Two cards that tie a lesson to the world: how a real exchange does it, and the interview question it answers. */
.st-callout.real, .st-callout.interview {
  border: 1px solid var(--rule-2); border-radius: 12px; background: var(--card-2);
}
.st-callout.real .st-ctitle, .st-callout.interview .st-ctitle {
  display: block; margin-bottom: 6px; font: 600 14px var(--sans); /* sentence case, never tracked caps (DESIGN.md) */
}
.st-callout.real .st-ctitle { color: var(--blue); }
.st-callout.interview .st-ctitle { color: var(--orange-ink); }
.st-callout.real p, .st-callout.interview p { margin: 0; }

/* A way out of the lesson to a place on the site (lesson block "link"): a flat row, the arrow nudges on hover. */
.st-golink {
  display: flex; align-items: center; gap: 16px; margin: 8px 0 24px; padding: 16px 18px;
  border: 1px solid var(--rule-2); border-radius: 12px; background: var(--card);
  color: var(--ink); text-decoration: none; transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.st-golink:hover { border-color: var(--ink-3); box-shadow: var(--lift-1); }
.st-golink-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.st-golink-body strong { font: 600 15.5px/1.3 var(--sans); }
.st-golink-body span { font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.st-golink-go { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--dark); color: var(--on-dark); transition: transform .16s var(--ease); }
.st-golink-go svg { width: 16px; height: 16px; }
.st-golink:hover .st-golink-go { transform: translateX(3px); }

/* Step-through widget */
.st-box {
  margin: 28px 0; border: 1px solid var(--rule-2); border-radius: var(--r-box);
  background: var(--card); overflow: hidden;
}
.st-box-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--rule); }
.st-box-head strong { font-weight: 500; font-size: 15px; flex: 1; }
.st-stage {
  padding: 28px 22px; min-height: 140px; background: var(--card-2);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center;
}
.st-chip {
  font: 500 14px/1 var(--mono); padding: 9px 12px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--rule-2); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.st-chip.hot { border-color: var(--orange); color: var(--orange-ink); box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.st-chip.blue { border-color: rgba(47, 107, 216, .5); color: var(--blue); }
.st-chip.green { border-color: rgba(35, 136, 90, .5); color: var(--green); }
.st-chip.dim { opacity: .45; }
.st-arrow { color: var(--ink-3); font: 16px/1 var(--sans); }
.st-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center; width: 100%; }
.st-caption { padding: 16px 20px 4px; font-size: 15px; line-height: 1.6; min-height: 3.4em; }
.st-ctrl { display: flex; align-items: center; gap: 8px; padding: 12px 18px 16px; flex-wrap: wrap; }
.st-dots { display: flex; gap: 6px; margin: 0 auto; }
.st-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-2); transition: background-color .2s var(--ease); }
.st-dots i.on { background: var(--ink); }
.st-steps details { border-top: 1px solid var(--rule); padding: 12px 20px; font-size: 14.5px; color: var(--ink-2); }
.st-steps summary { cursor: pointer; color: var(--ink-2); }
.st-steps details ol { margin: 10px 0 0; padding-left: 20px; }
.st-steps details li { margin-bottom: 6px; }
.st-frame + .st-frame { border-top: 1px dashed var(--rule-2); }
.js .st-frame { display: none; }
.js .st-frame.on, .js .st-steps.show-all .st-frame { display: block; }
.js .st-steps.show-all .st-frame + .st-frame { border-top: 1px dashed var(--rule-2); }
.st-ctrl, .st-box-head .st-count { display: none; }
.js .st-ctrl { display: flex; }
.js .st-box-head .st-count { display: inline; }

/* Predict first */
.st-predict { padding: 22px 22px 20px; }
.st-eyebrow { font: 600 13px/1 var(--sans); color: var(--orange-ink); margin: 0 0 10px; }
.st-predict .st-q { margin: 0 0 16px; font-size: 16.5px; line-height: 1.55; font-weight: 500; }
.st-opts { display: grid; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.st-opt {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--rule-2); background: var(--card);
  font-size: 15px; line-height: 1.5;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.st-opt:hover { background: var(--card-2); }
.st-opt .st-letter {
  flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  font: 600 12px/1 var(--sans); border: 1px solid var(--rule-2); color: var(--ink-2);
}
.st-opt[aria-pressed="true"] { border-color: var(--ink); }
.st-opt[aria-pressed="true"] .st-letter { background: var(--ink); color: var(--card); border-color: var(--ink); }
.st-predict.locked .st-opt { cursor: default; }
.st-predict.locked .st-opt:hover { background: var(--card); }
.st-opt.right { border-color: var(--green); background: var(--green-bg) !important; }
.st-opt.right .st-letter { background: var(--green); border-color: var(--green); color: #fff; }
.st-opt.wrong { border-color: var(--red); background: var(--red-bg) !important; }
.st-opt.wrong .st-letter { background: var(--red); border-color: var(--red); color: #fff; }
.st-verdict { display: none; margin-top: 14px; padding: 14px 16px; border-radius: 11px; background: var(--card-2); font-size: 15px; line-height: 1.6; }
.st-predict.locked .st-verdict { display: block; animation: st-in .32s var(--enter); }
.st-verdict strong { display: block; margin-bottom: 2px; }
.st-verdict.is-right strong { color: var(--green); }

/* Code */
.st-code { margin: 24px 0; border-radius: var(--r-box); background: #1D1C1A; color: #E8E4DC; overflow: hidden; }
.st-code-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; font-size: 12.5px; color: #97938B; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.st-code-head button { background: none; border: 0; color: #97938B; cursor: pointer; font-size: 12.5px; padding: 2px 4px; }
.st-code-head button:hover { color: #E8E4DC; }
.st-code pre { margin: 0; padding: 16px 18px 18px; overflow-x: auto; font: 13.5px/1.7 var(--mono); font-variant-ligatures: none; }
.st-code pre code { font: inherit; color: inherit; background: none; border: 0; padding: 0; border-radius: 0; }
.st-code .kw { color: #FF9E64; }
.st-code .fn { color: #8FD18A; }
.st-code .str { color: #E8D5A3; }
.st-code .cm { color: #77726A; font-style: italic; }
.st-code .num { color: #D4A8CF; }

/* Labs */
.st-lab { margin: 28px 0; }
.st-lab .st-box-head .st-tag { font-size: 12.5px; color: var(--orange-ink); }
.st-lab-body { padding: 20px; background: var(--card-2); display: grid; gap: 18px; }
.st-lab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.st-lab canvas { width: 100%; height: auto; display: block; border-radius: 10px; background: var(--card); border: 1px solid var(--rule); }
.st-lab .st-cap { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.st-lab-ctrl { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.st-readout { font: 500 14px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--ink-2); }
.st-readout b { color: var(--ink); font-weight: 600; }
.st-slider { display: grid; grid-template-columns: 70px 1fr 56px; align-items: center; gap: 12px; font-size: 14px; }
.st-slider label { font: 500 14px var(--mono); }
.st-slider output { font: 500 14px var(--mono); text-align: right; font-variant-numeric: tabular-nums; }
.st-slider input[type="range"] { width: 100%; accent-color: var(--orange); }
.st-input {
  width: 100%; height: 44px; padding: 0 14px; border-radius: 10px;
  border: 1px solid var(--rule-2); background: var(--card); color: var(--ink);
  font: 15px var(--sans);
}
.st-input:focus { outline: none; border-color: var(--ink-3); }
.st-toks { display: flex; flex-wrap: wrap; gap: 6px; }
.st-tok { display: inline-flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px 5px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule-2); font: 14px/1 var(--mono); white-space: pre; }
.st-tok small { font: 500 11px/1 var(--mono); color: var(--ink-3); }
.st-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--card); border: 1px solid var(--rule); }
.st-tabs button { border: 0; background: none; padding: 6px 14px; border-radius: 999px; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.st-tabs button[aria-pressed="true"] { background: var(--dark); color: var(--on-dark); }
.st-neuron { display: flex; align-items: center; gap: 18px; justify-content: center; flex-wrap: wrap; }
.st-big { font: 600 34px/1 var(--mono); font-variant-numeric: tabular-nums; }

/* Lesson footer */
.st-lfoot { display: flex; align-items: center; gap: 10px; padding: 28px 0 0; margin-top: 44px; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.st-lfoot .st-next { margin-left: auto; }
.st-report { margin-top: 18px; font-size: 13px; color: var(--ink-3); }
.st-report a { border-bottom: 1px solid var(--rule-2); }
.st-report a:hover { color: var(--ink-2); }

/* Right TOC */
/* The sections sheet drops from the Sections key, over the lesson; Escape, a tap outside or picking a section closes it. */
.st-toc { position: absolute; right: 20px; top: calc(100% + 8px); width: 300px; padding: 22px 18px 18px; box-shadow: var(--lift-2); display: none; }
.st-toc.open { display: block; animation: st-in .18s var(--enter); }
.st-toc h2 { margin: 0 0 12px 6px; font: 500 15px/1.3 var(--sans); }
.st-toc ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.st-toc a {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 10px; border-radius: 10px;
  font-size: 14px; line-height: 1.4; color: var(--ink-2);
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.st-toc a:hover { background: var(--card-2); color: var(--ink); }
.st-toc a span { font-variant-numeric: tabular-nums; color: var(--ink-3); flex: none; width: 1.4em; }
.st-toc a[aria-current="true"] { background: var(--card-2); color: var(--ink); font-weight: 500; }
.st-toc a[aria-current="true"] span { color: var(--orange-ink); }
.st-toc a.is-seen span { color: var(--green); }
.st-toc .st-toc-foot { margin: 14px 6px 0; padding-top: 14px; border-top: 1px solid var(--rule); display: grid; gap: 8px; font-size: 13.5px; }
.st-toc .st-toc-foot a { padding: 0; color: var(--ink-2); }
.st-toc .st-toc-foot a:hover { background: none; color: var(--ink); }
.st-toc-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.st-toc-toggle svg { width: 16px; height: 16px; }
.st-toc-toggle[aria-expanded="true"] { background: var(--card-2); border-color: var(--ink-3); }
/* Phones: just the round list key, so the lesson title keeps its room. */
@media (max-width: 620px) {
  .st-toc-toggle { width: 42px; height: 42px; padding: 0; justify-content: center; border-radius: 999px; }
  .st-toc-toggle span { display: none; }
}

/* Unit being written */
.st-wip { display: grid; gap: 18px; }
.st-wip .st-buildbox { padding: 18px 20px; border-radius: var(--r-box); background: var(--card-2); }
.st-wip .st-buildbox strong { display: block; font-weight: 500; margin-bottom: 4px; }

/* Search modal */
.st-modal {
  position: fixed; inset: 0; z-index: 100; display: none;
  background: rgba(29, 28, 26, .32); padding: 12vh 16px 16px;
}
.st-modal.open { display: block; animation: st-fade .2s var(--ease); }
@keyframes st-fade { from { opacity: 0; } }
.st-modal-card { max-width: 620px; margin: 0 auto; background: var(--card); border-radius: 18px; box-shadow: var(--lift-2); overflow: hidden; }
.st-modal-card input {
  width: 100%; height: 58px; padding: 0 20px; border: 0; border-bottom: 1px solid var(--rule);
  background: none; color: var(--ink); font: 17px var(--sans);
}
.st-modal-card input:focus { outline: none; }
.st-results { max-height: 54vh; overflow-y: auto; padding: 8px; margin: 0; list-style: none; }
.st-results a { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 10px; }
.st-results a small { color: var(--ink-3); font-size: 13px; }
.st-results a[aria-selected="true"] { background: var(--card-2); }
.st-results .st-empty { padding: 18px 14px; color: var(--ink-3); font-size: 14.5px; }

/* Build on a phone: the whole screen says so instead (study.js). A laptop whose screen types the message, like src/phone.js. */
.st-desk {
  position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column;
  padding: calc(12px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom));
  background: var(--frame); text-align: center; overflow-y: auto; overscroll-behavior: contain;
  animation: st-rise .36s var(--enter);
}
@keyframes st-rise { from { opacity: 0; transform: translateY(24px); } }
.st-desk-open, .st-desk-open body { overflow: hidden; }
.st-desk-bar { display: flex; justify-content: flex-end; }
.st-desk-mid { flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 16px 0 28px; }
.st-desk-laptop { width: min(300px, 78%); margin: 0 auto 40px; }
.st-desk-lid {
  padding: 10px 10px 12px; border-radius: 16px 16px 0 0;
  background: linear-gradient(165deg, #E9E6E0 0%, #D8D4CC 55%, #CFCAC0 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 0 0 1px rgba(0, 0, 0, .06);
}
.st-desk-screen {
  aspect-ratio: 16 / 10; display: flex; align-items: center; padding: 0 18px; border-radius: 8px;
  background: #161512; box-shadow: inset 0 2px 8px rgba(0, 0, 0, .7); text-align: left;
}
.st-desk-line { font: 800 23px/1.3 "Doto", ui-monospace, monospace; letter-spacing: .02em; color: #FF5A1F; text-shadow: 0 0 8px rgba(255, 90, 31, .5); }
.st-desk-c { display: inline-block; width: 10px; height: 19px; margin-left: 4px; vertical-align: -3px; background: #FF5A1F; box-shadow: 0 0 8px rgba(255, 90, 31, .6); animation: st-blink 1.1s steps(1) infinite; }
@keyframes st-blink { 50% { opacity: 0; } }
.st-desk-base {
  position: relative; height: 13px; margin: 0 -9%; border-radius: 2px 2px 14px 14px;
  background: linear-gradient(#E4E0D8, #C9C4BA);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 16px 26px -14px rgba(29, 28, 26, .5);
}
.st-desk-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 20%; height: 5px; translate: -50% 0; border-radius: 0 0 8px 8px; background: rgba(29, 28, 26, .12); }
.st-desk h2 { margin: 0 0 12px; font: 380 34px/1.08 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.st-desk p { margin: 0 auto 26px; max-width: 34ch; color: var(--ink-2); font-size: 16px; line-height: 1.6; }
.st-desk-url { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--card); border: 1px solid var(--rule); }
.st-desk-url small { font-size: 13px; color: var(--ink-3); }
.st-desk-url strong { font: 500 17px/1.3 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.st-desk-acts { display: grid; gap: 10px; }
.st-desk-acts .st-btn { height: 52px; font-size: 16px; }
@media (max-height: 720px) {
  .st-desk-mid { padding: 4px 0 18px; }
  .st-desk-laptop { width: min(210px, 60%); margin-bottom: 24px; }
  .st-desk-line { font-size: 17px; }
  .st-desk-c { width: 8px; height: 14px; }
  .st-desk h2 { font-size: 28px; }
  .st-desk p { margin-bottom: 18px; font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .st-desk, .st-desk-c { animation: none; } }

/* ---------- Sign-up gate (2026-11-07, "A, the window"; study.js) ----------
   Practice, Projects, Interview and Progress while signed out. Wide screens: a window over the page under a light veil,
   the area's drawing on the left on its colour field (the home page's "More than lessons" field: its colour, light and
   grain), the words and the sign-in keys on paper on the right. Up to 959px the drawing sits on top; 640px and
   narrower it is a bottom sheet over the tab bar. The paper and keys follow the theme; the field keeps its colour, since
   each drawing's labels are drawn in it. "Not now" drops it, and the top bar's Sign in key (or Progress in a phone's tab
   bar) takes one soft ink pulse. The dashboard opened directly keeps its window (is-firm) under a stronger veil. */
.st-gate { position: fixed; inset: 0; z-index: 200; display: flex; padding: 24px; overflow-y: auto; overscroll-behavior: contain; }
.st-gate-open, .st-gate-open body { overflow: hidden; }
.st-gate-veil { position: fixed; inset: 0; background: rgba(29, 28, 26, .26); -webkit-backdrop-filter: blur(1.5px); backdrop-filter: blur(1.5px); opacity: 0; transition: opacity .24s var(--ease); }
.st-gate.is-firm .st-gate-veil { background: rgba(29, 28, 26, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
:root[data-theme="dark"] .st-gate-veil { background: rgba(0, 0, 0, .5); }
.st-gate.in .st-gate-veil { opacity: 1; }
.st-gate-win {
  position: relative; margin: auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: min(960px, 100%); height: 540px; overflow: hidden; border-radius: 24px; background: var(--card);
  box-shadow: 0 0 0 1px rgba(29, 28, 26, .07), 0 2px 4px rgba(40, 32, 20, .08), 0 12px 24px rgba(40, 32, 20, .10), 0 32px 64px rgba(40, 32, 20, .16), 0 64px 120px rgba(40, 32, 20, .10);
  opacity: 0; transform: translateY(16px) scale(.985);
  transition: transform .6s var(--enter), opacity .42s var(--enter);
}
:root[data-theme="dark"] .st-gate-win { box-shadow: 0 0 0 1px rgba(238, 235, 228, .08), 0 24px 64px rgba(0, 0, 0, .5), 0 64px 120px rgba(0, 0, 0, .35); }
.st-gate.in .st-gate-win { opacity: 1; transform: none; }
.st-gate-field {
  position: relative; min-width: 0; overflow: hidden; isolation: isolate;
  background-color: var(--gate-face);
  background-image: radial-gradient(ellipse 78% 62% at 50% 44%, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 72%), radial-gradient(rgba(29, 28, 26, .075) .8px, transparent 1px);
  background-size: auto, 4px 4px;
  box-shadow: inset -1px 0 0 rgba(29, 28, 26, .10);
}
.st-gate-practice { --gate-face: #B4C9B5; }
.st-gate-projects { --gate-face: #B3C2D6; }
.st-gate-interview { --gate-face: #DBBE9F; }
.st-gate-progress { --gate-face: #F1A995; }
.st-gate-draw { position: absolute; inset: 9% 8%; }
.st-gate-draw > svg { display: block; width: 100%; height: 100%; overflow: visible; animation: st-fade .3s var(--ease); }
.st-gate-progress .st-gate-draw { inset: 30% 25%; }
.st-gate-progress .st-gate-draw > svg { animation: none; }
.st-gate-draw .pulse { animation: st-pulse 2.8s ease-in-out infinite; }
.st-gate-words { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 44px; }
.st-gate h2 { margin: 0; font: 360 44px/1.04 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.028em; color: var(--ink); text-wrap: balance; }
.st-gate h2 i { font-style: italic; font-weight: 340; }
.st-gate-words p { margin: 14px 0 30px; font-size: 16.5px; line-height: 1.5; color: var(--ink-2); text-wrap: balance; }
.st-gate-progress h2 { font-size: 40px; }
.st-gate-progress .st-gate-words p { text-wrap: pretty; }
@media (min-width: 960px) { .st-gate:not(.st-gate-progress) .st-gate-words p { font-size: 16px; white-space: nowrap; } }
/* the keys: the sign-in page's white keycaps, dark keycaps in the dark theme */
.st-gate-keys { display: grid; gap: 10px; }
.st-gate-k {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%; height: 50px; padding: 0 18px;
  border-radius: 12px; font: 500 15.5px/1 var(--sans); color: #1D1C1A; text-decoration: none; white-space: nowrap; cursor: pointer;
  background: linear-gradient(#FFFFFF, #F8F6F1);
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .13), inset 0 -2px 0 rgba(29, 28, 26, .07), 0 1px 2px rgba(60, 48, 30, .08);
  transition: transform .09s var(--ease), background .16s var(--ease), box-shadow .16s var(--ease), opacity .16s var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.st-gate-k:hover { background: linear-gradient(#FFFFFF, #F3F0EA); }
.st-gate-k:active { transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .13), inset 0 -1px 0 rgba(29, 28, 26, .07); }
.st-gate-k svg { width: 18px; height: 18px; flex: none; }
.st-gate-k .st-gate-mail { color: #5E5B55; }
.st-gate-k.is-busy { opacity: .6; cursor: progress; }
:root[data-theme="dark"] .st-gate-k {
  color: #EEEBE4; background: linear-gradient(#2E2D2A, #252421);
  box-shadow: inset 0 0 0 1px rgba(238, 235, 228, .12), inset 0 1px 0 rgba(255, 255, 255, .05), inset 0 -2px 0 rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .3);
}
:root[data-theme="dark"] .st-gate-k:hover { background: linear-gradient(#33322F, #2A2926); }
:root[data-theme="dark"] .st-gate-k .st-gate-mail { color: #AFAAA0; }
/* keyboard focus only, and in ink: nothing wears a ring when it opens (the window takes the focus, not a key) */
.st-gate :focus { outline: none; }
.st-gate :focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.st-gate .st-gate-win:focus-visible { outline: none; }
.st-gate-later {
  display: block; margin: 16px auto 0; padding: 10px 8px; border: 0; background: none; cursor: pointer;
  font: 500 15px/1 var(--sans); color: var(--ink-2);
  text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 5px; text-decoration-thickness: 1.5px;
  transition: color .16s var(--ease), text-decoration-color .16s var(--ease);
}
.st-gate-later:hover { color: var(--ink); text-decoration-color: currentColor; }
/* the words follow the window, 60ms apart */
.st-gate-words > * { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.st-gate.in .st-gate-words > * { opacity: 1; transform: none; }
.st-gate.in .st-gate-words > :nth-child(2) { transition-delay: .06s; }
.st-gate.in .st-gate-words > :nth-child(3) { transition-delay: .12s; }
.st-gate.in .st-gate-words > :nth-child(4) { transition-delay: .18s; }
/* "Not now": it drops and fades, faster than it came; the Sign in key (or Progress) takes one pulse */
.st-gate.out .st-gate-veil { opacity: 0; transition-duration: .3s; }
.st-gate.out .st-gate-win { opacity: 0; transition: transform .42s cubic-bezier(.55, 0, .8, .4), opacity .3s .12s ease-in; }
@keyframes st-gate-land { from { box-shadow: 0 0 0 0 var(--gate-pulse, rgba(29, 28, 26, .35)); } to { box-shadow: 0 0 0 12px transparent; } }
:root[data-theme="dark"] .st-gate-landed { --gate-pulse: rgba(238, 235, 228, .35); }
.st-gate-landed { animation: st-gate-land .8s var(--ease); }
.st-signin.st-gate-landed { border-radius: 999px; }
/* the drawing's one action (study.js markArt finds the parts), then a slow drift */
@keyframes st-gate-settle { from { opacity: 0; transform: translate(-10px, -22px) rotate(-4deg); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
@keyframes st-gate-route { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes st-gate-pop { from { opacity: 0; transform: scale(.4); } 70% { transform: scale(1.12); } to { opacity: 1; transform: none; } }
@keyframes st-gate-rise { from { transform: scaleY(0); } to { transform: none; } }
@keyframes st-gate-drift { from { translate: 0 -3px; } to { translate: 0 4px; } }
.is-moving .st-gate-missed { transform-box: fill-box; transform-origin: 30% 80%; animation: st-gate-settle .8s var(--enter) .25s both; }
.is-moving .st-gate-route { animation: st-gate-route .9s cubic-bezier(.45, 0, .2, 1) 1s both; }
.st-gate-interview .is-moving .st-gate-route { animation-duration: 1.7s; animation-delay: .5s; }
.is-moving .st-gate-tip { transform-box: fill-box; transform-origin: center; animation: st-gate-pop .36s var(--enter) 1.85s both; }
.st-gate-interview .is-moving .st-gate-tip { animation-delay: 2.15s; }
.is-moving .st-gate-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: st-gate-rise .9s var(--enter) .5s both; }
.is-moving .st-gate-loss { animation: st-fade .4s ease 1.35s both; }
.st-gate-draw.is-moving { animation: st-gate-drift 9s ease-in-out 2.6s infinite alternate; }
@media (max-width: 959px) {
  .st-gate-win { grid-template-columns: minmax(0, 1fr); grid-template-rows: 300px auto; width: min(460px, 100%); height: auto; }
  .st-gate-field { box-shadow: inset 0 -1px 0 rgba(29, 28, 26, .10); }
  .st-gate-words { padding: 28px 28px 22px; text-align: center; }
  .st-gate h2 { font-size: 34px; }
  .st-gate-words p { margin: 10px auto 24px; max-width: 34ch; font-size: 16px; }
}
@media (max-width: 959px) and (max-height: 760px) { .st-gate-win { grid-template-rows: 210px auto; } }
/* a phone on its side: the drawing beside the words again, smaller, so the keys stay in view */
@media (min-width: 641px) and (max-height: 520px) {
  .st-gate { padding: 12px; }
  .st-gate-win { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: none; width: min(860px, 100%); height: auto; }
  .st-gate-field { box-shadow: inset -1px 0 0 rgba(29, 28, 26, .10); }
  .st-gate-words { padding: 20px 28px 14px; }
  .st-gate h2 { font-size: 30px; }
  .st-gate-words p { margin: 8px auto 16px; font-size: 15px; }
  .st-gate-keys { gap: 8px; }
  .st-gate-k { height: 44px; }
  .st-gate-later { margin-top: 4px; }
}
/* phones: a bottom sheet, flush with the bottom edge, over the tab bar */
@media (max-width: 640px) {
  .st-gate { padding: 0; }
  .st-gate-win {
    margin: auto 0 0; width: 100%; grid-template-rows: clamp(176px, 26svh, 230px) auto; border-radius: 26px 26px 0 0;
    opacity: 1; transform: translateY(100%); transition: transform .46s var(--enter);
    box-shadow: 0 -1px 0 rgba(29, 28, 26, .06), 0 -16px 48px rgba(20, 16, 10, .22);
  }
  :root[data-theme="dark"] .st-gate-win { box-shadow: 0 -1px 0 rgba(238, 235, 228, .08), 0 -16px 48px rgba(0, 0, 0, .5); }
  .st-gate.out .st-gate-win { opacity: 1; transform: translateY(100%); transition: transform .3s cubic-bezier(.55, 0, .8, .4); }
  .st-gate-draw { inset: 9% 12% 7%; }
  .st-gate-progress .st-gate-draw { inset: 14% 30% 10%; }
  .st-gate-words { padding: 24px 22px calc(8px + env(safe-area-inset-bottom)); }
  .st-gate h2 { font-size: 32px; }
  .st-gate-progress h2 { font-size: 28px; }
  .st-gate-words p { margin: 8px auto 22px; font-size: 15.5px; }
  .st-gate-later { margin-top: 8px; padding: 14px 8px; }
  .st-gate.is-firm .st-gate-words { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
}
/* reduced motion: fades only */
@media (prefers-reduced-motion: reduce) {
  .st-gate *, .st-gate *::before, .st-gate *::after { animation: none !important; }
  .st-gate .st-gate-win, .st-gate .st-gate-words > * { transform: none !important; transition: opacity .3s var(--ease) !important; }
  .st-gate .st-gate-win { opacity: 0; }
  .st-gate.in .st-gate-win { opacity: 1; }
  .st-gate.out .st-gate-win { opacity: 0; }
  .st-gate-landed { animation: none; }
}
/* ---------- end sign-up gate ---------- */


/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .st-grid, .st-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .st-shell { grid-template-columns: 1fr; padding: 10px 10px 84px; }
  .st-rail {
    position: fixed; top: auto; bottom: 10px; left: 10px; right: 10px; height: 60px; z-index: 60;
    flex-direction: row; justify-content: space-around; padding: 0 8px;
    background: var(--card); border-radius: 999px; box-shadow: var(--lift-2);
  }
  .st-rail .st-grow { display: none; }
  /* The wide search field gives way to the round search icon, which starts the right-hand group. */
  .st-top .st-search { display: none; }
  .st-top .st-qbtn { margin-left: auto; }
  .st-top .st-crumbs { display: none; }
  /* The wordmark sits in the middle. Get Pro, when shown, takes the left; light/dark and Settings the right. */
  .st-top { position: relative; }
  .st-top .st-wordmark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
  .st-top .st-getpro { order: -1; margin-right: auto; }
  .st-hero { grid-template-columns: 1fr; padding: 24px; }
  .st-pad, .st-head { padding: 24px; }
  .st-body { padding: 28px 22px 24px; }
  .st-lab-cols { grid-template-columns: 1fr; }
  /* Phones: the sheet rises above the tab bar, where the thumb is. */
  .st-toc { position: fixed; z-index: 70; top: auto; bottom: 80px; left: 10px; right: 10px; width: auto; max-height: 60vh; overflow-y: auto; }
}
@media (max-width: 620px) {
  .st-grid, .st-units { grid-template-columns: 1fr; }
  /* Next on top, full width. Back (or Previous) and Overview split the row under it, Back on the left. */
  .st-lfoot .st-next { order: -2; margin-left: 0; width: 100%; }
  .st-lfoot .st-next span { overflow: hidden; text-overflow: ellipsis; }
  .st-lfoot .st-btn:not(.st-next) { flex: 1 1 0; }
  .st-lfoot .st-btn:not(.st-next):not(:first-child) { order: -1; }
  .st-prose p { font-size: 16px; }
}
/* ---------- Top bar: account ---------- */
.st-signin { font-size: 14px; color: var(--ink-2); padding: 0 6px; white-space: nowrap; }
.st-signin:hover { color: var(--ink); }
.st-getpro[hidden] { display: none; }
.st-rl { display: block; font-size: 12px; line-height: 1; }

/* ---------- Free / Pro tags ---------- */
.st-tag {
  display: inline-flex; align-items: center; gap: 4px; flex: none;
  font: 500 12px/1 var(--sans); padding: 4px 8px; border-radius: 999px; white-space: nowrap;
}
.st-tag svg { width: 11px; height: 11px; }
.st-tag.is-free { color: var(--green); background: var(--green-bg); }
.st-tag.is-pro { color: var(--ink-2); background: var(--card-2); border: 1px solid var(--rule); }
.st-tag.is-best { color: var(--orange-ink); background: rgba(255, 90, 31, .08); }
.st-unit .st-unum .st-tag { margin-left: auto; }
.st-unit.is-pro:not(.is-done) .st-state { color: var(--ink-3); }

/* ---------- Home ---------- */
.st-h2 { margin: 0 0 18px; font: 380 clamp(26px, 3vw, 34px)/1.1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.st-h2 i { font-style: italic; }
.st-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-3); }
.st-center { text-align: center; }
.st-center .st-lede { margin-left: auto; margin-right: auto; }
.st-home-hero { display: grid; grid-template-columns: 1.25fr .75fr; gap: 32px; padding: 44px 40px; align-items: center; }
.st-home-hero .st-h1 { font-size: clamp(36px, 5vw, 60px); }
.st-start { background: var(--card-2); border-radius: 18px; padding: 22px; }
.st-start h2 { margin: 4px 0 12px; font: 500 19px/1.3 var(--sans); }
.st-start-list { margin: 0 0 14px; padding: 0; list-style: none; display: grid; gap: 2px; }
.st-start-list a { display: flex; gap: 10px; padding: 9px 10px; border-radius: 10px; font-size: 14.5px; transition: background-color .16s var(--ease); }
.st-start-list a:hover { background: var(--card); }
.st-start-list a span { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-start-list a.is-done span { color: var(--green); }
.st-sec-head { margin: 20px 4px 0; }
.st-sec-head .st-sec-title { margin: 0; }
.st-sec-head p { margin: 4px 0 0; color: var(--ink-2); font-size: 15px; }
.st-how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.st-how-grid h3 { margin: 16px 0 6px; font: 500 17px/1.3 var(--sans); }
.st-how-grid p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }
.st-how-vis { height: 132px; border-radius: 14px; background: var(--inset); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 16px; flex-wrap: wrap; }
.st-how-pred { flex-direction: column; align-items: stretch; justify-content: center; gap: 6px; }
.st-how-pred .st-eyebrow { margin: 0 0 2px; font-size: 12px; }
.st-mini-opt { font-size: 13px; padding: 7px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--rule-2); }
.st-mini-opt.is-on { border-color: var(--green); background: var(--green-bg); }
.st-how-lab { align-items: flex-end; gap: 6px; padding: 20px 28px; }
.st-how-lab i { flex: 1; max-width: 26px; border-radius: 4px 4px 0 0; background: var(--ink); opacity: .8; }
.st-how-lab i:first-child { background: var(--orange); opacity: 1; }
.st-plans-band { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.st-plan-col.is-pro { box-shadow: 0 0 0 1.5px var(--ink), var(--lift-1); }
.st-price { margin: 0 0 4px; font: 600 34px/1.1 var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.st-price small { font: 400 14px var(--sans); color: var(--ink-3); letter-spacing: 0; }
.st-ticks { margin: 16px 0 22px; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 15px; }
.st-ticks li { position: relative; padding-left: 24px; }
.st-ticks li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 11px; height: 6px; border-left: 2px solid var(--green); border-bottom: 2px solid var(--green); transform: rotate(-45deg); }

/* ---------- Pricing ---------- */
.st-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.st-plan { padding: 24px 22px; display: flex; flex-direction: column; }
.st-plan.is-best { box-shadow: 0 0 0 1.5px var(--ink), var(--lift-1); }
.st-plan-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.st-plan h2 { margin: 0; font: 500 18px/1.3 var(--sans); }
.st-plan-who { margin: 6px 0 22px; color: var(--ink-2); font-size: 14px; line-height: 1.5; min-height: 3em; }
.st-plan-bill { margin: 0 0 22px; color: var(--ink-3); font-size: 13.5px; }
.st-plan .st-btn { margin-top: auto; }

/* ---------- Locked Pro lesson ---------- */
.st-locked .st-topic { display: flex; align-items: center; gap: 6px; color: var(--orange-ink); }
.st-locked .st-topic svg { width: 14px; height: 14px; }
.st-locked .st-buildbox ol { margin: 8px 0 0; padding-left: 20px; color: var(--ink-2); }
.st-locked-msg { color: var(--ink-2); }
/* The free taste of a Pro lesson (2026-11-05): the next section's first lines fade out, then the way on. */
.st-cut-tease { max-height: 132px; overflow: hidden; pointer-events: none; user-select: none; margin-left: -14px; padding-left: 14px;
  -webkit-mask-image: linear-gradient(#000 30%, transparent); mask-image: linear-gradient(#000 30%, transparent); }
.st-cut-card { margin-top: 6px; padding: 26px 28px; border-radius: var(--r-box); background: var(--card-2); }
.st-cut-k { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-weight: 500; color: var(--orange-ink); }
.st-cut-k svg { width: 15px; height: 15px; }
.st-cut-msg { margin: 0 0 14px; color: var(--ink-2); }
.st-cut-left strong { display: block; font-weight: 500; }
.st-cut-left ol { margin: 6px 0 18px; padding-left: 22px; color: var(--ink-2); }
.st-cut-left li { margin: 2px 0; }
@media (max-width: 600px) { .st-cut-card { padding: 20px 18px; } }
.st-lhead-row .st-tag { margin-right: 4px; }

@media (max-width: 1180px) {
  .st-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .st-home-hero { grid-template-columns: 1fr; padding: 28px 24px; }
  .st-how-grid { grid-template-columns: 1fr; }
  .st-plans-band { grid-template-columns: 1fr; }
  .st-rail { height: 64px; padding: 0 6px; }
  .st-rail a.st-ri { width: auto; flex: 1; height: 54px; border-radius: 18px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
  .st-rail a.st-ri svg { width: 19px; height: 19px; }
  .st-rail a.st-ri[aria-current="page"] { background: var(--card-2); color: var(--ink); box-shadow: none; }
  .st-rl { display: block; font-size: 11px; line-height: 1; }
}
@media (max-width: 620px) {
  .st-plans { grid-template-columns: 1fr; }
  .st-signin { display: none; }
  .st-top { gap: 8px; }
  .st-plan-who { min-height: 0; }
  .st-plan.is-best { order: -1; }
}

/* ---------- Module covers: a folder on the module's colour, like the Build machines ---------- */
.st-cover-wrap { background: var(--card); }
.st-folder { position: relative; height: 82%; aspect-ratio: 240 / 300; display: block; }
.st-folder-tab { position: absolute; right: -9%; top: 9%; width: 12%; height: 40%; background: var(--fold-2); border-radius: 0 10px 10px 0; box-shadow: inset -1px 0 0 rgba(0, 0, 0, .05); }
.st-folder-face {
  position: absolute; inset: 0; border-radius: 5px 10px 10px 5px; overflow: hidden;
  background: var(--fold);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 40%), radial-gradient(rgba(29, 28, 26, .07) .8px, transparent 1px);
  background-size: auto, 4px 4px;
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .10), inset 4px 0 0 rgba(0, 0, 0, .05), 0 1px 2px rgba(60, 48, 30, .12), 0 10px 20px -6px rgba(60, 48, 30, .25);
  transform-origin: left center; transition: transform .26s var(--ease);
}
.st-vis .st-coversvg { width: 100%; height: 100%; display: block; }
.st-mod:hover .st-folder-face { transform: perspective(800px) rotateY(-6deg); }
.st-hero .st-folder { height: 78%; }
.st-coversvg .pulse { animation: st-pulse 2.8s ease-in-out infinite; }
@keyframes st-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }

.st-unit-build { font-size: 13px !important; color: var(--ink-3) !important; }
.st-unit.is-soon { opacity: .6; box-shadow: none; background: transparent; border: 1px dashed var(--rule-2); }
.st-unit.is-soon:hover { transform: none; box-shadow: none; }

/* ---------- Pricing (interactive) ---------- */
.st-checkout { padding: 64px 32px; }
@media (max-width: 900px) {
}
@media (max-width: 620px) {
}

.st-dash-col-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
@media (max-width: 900px) {
}
@media (max-width: 620px) {
}

/* ---------- Wordmark: the same as the landing page (brand/pinwheel.css) ---------- */
.st-wordmark { display: inline-flex; align-items: baseline; gap: .3em; flex: none; font: 400 21px/1 var(--serif); font-variation-settings: "opsz" 36; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; }
.st-wordmark i { font-style: italic; }
.st-wordmark .pw-mark { width: .9em; height: .9em; flex: none; overflow: visible; position: relative; top: .209em; }
.st-wsep { width: 1.5px; height: 22px; margin: 0 4px; border-radius: 1px; background: var(--rule-2); transform: rotate(18deg); flex: none; }
.st-rail { padding-top: 68px; }
@media (max-width: 900px) { .st-wsep { display: none; } .st-rail { padding-top: 0; } }

/* ---------- The member's pass on /pricing (src/pass.css) ---------- */
.st-pass-band { padding: 56px 40px 0; }
.st-pricing-faq { margin: 64px -40px 0; padding: 64px 40px 72px; border-top: 1px solid var(--rule); }
.st-pass-band .st-center { margin-bottom: 8px; }
.st-pass { margin-top: 40px; }
[data-theme="dark"] .st-pass .ps-switch, [data-theme="dark"] .st-pass .ps-act { --ps-ink: var(--ink); --ps-ink-2: var(--ink-2); --ps-ink-3: var(--ink-3); --ps-rule: var(--rule-2); }
[data-theme="dark"] .st-pass .ps-switch { --ps-tray: rgba(255, 255, 255, .04); }
[data-theme="dark"] .st-pass .ps-opt[aria-checked="true"] { background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
@media (max-width: 860px) { [data-theme="dark"] .st-pass .ps-back { --ps-ink: var(--ink); --ps-ink-2: var(--ink-2); --ps-ink-3: var(--ink-3); } } /* on narrow screens the back is a plain list on the page */
@media (max-width: 900px) { .st-pass-band { padding: 28px 18px 0; } .st-pricing-faq { margin: 40px -18px 0; padding: 40px 18px 44px; } }

/* ---------- Phones: swipe through modules instead of scrolling past seven tall cards ---------- */
@media (max-width: 620px) {
  .st-grid, .st-how-grid {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    gap: 12px; margin: 0 -10px; padding: 4px 10px 14px; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .st-grid::-webkit-scrollbar, .st-how-grid::-webkit-scrollbar { display: none; }
  .st-grid > * { flex: 0 0 84%; scroll-snap-align: center; }
  .st-how-grid > * { flex: 0 0 80%; scroll-snap-align: start; }
  .st-mod:hover { transform: none; }
  .st-mod .st-vis { aspect-ratio: 4 / 3; }
  .st-mod h2, .st-mod h3 { font-size: 19px; }
  .st-mod p { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
  .st-sec-head:has(+ .st-grid) p::after { content: " Swipe to see them all."; color: var(--ink-3); }
  .st-home-hero { padding: 24px 20px; gap: 20px; }
  .st-home-hero .st-h1 { font-size: 34px; }
  .st-home-hero .st-lede { font-size: 16px; }
  .st-home-hero .st-hero-actions .st-btn { flex: 1 1 100%; height: 48px; }
  .st-start { padding: 16px; }
  .st-start-list a { padding: 13px 10px; font-size: 15px; }
  .st-pad, .st-head { padding: 22px 20px; }
  .st-wordmark { font-size: 19px; }
  .st-top { min-width: 0; height: 48px; }
  .st-top .st-theme, .st-top .st-gear, .st-top .st-getpro, .st-top .st-qbtn { height: 36px; }
  .st-top .st-theme, .st-top .st-gear, .st-top .st-qbtn { width: 36px; }
}

/* ---------- Questions: quiet ruled rows, like a reference page. Heading beside them, or above them (.is-stack). ---------- */
/* Beside: the heading and the email line share the left column, the questions fill the right. */
.st-faqs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: 88px; align-items: start; }
.st-faqs > .st-faq-side { grid-column: 1; grid-row: 1; }
.st-faqs > .st-faq { grid-column: 2; grid-row: 1 / 4; }
.st-faqs > .st-faq-mail { grid-column: 1; grid-row: 2; margin-top: 6px; max-width: 30ch; }
.st-faq-side .st-h2 { margin: 0 0 14px; font-size: clamp(30px, 3.4vw, 44px); }
.st-faq-mail { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; max-width: 34ch; }
.st-faq-mail a { color: var(--ink); border-bottom: 1px solid var(--rule-2); }
.st-faq-mail a:hover { border-color: var(--ink-3); }
.st-faq { border-top: 1px solid var(--rule-2); }
.st-faq details { border-bottom: 1px solid var(--rule); }
.st-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 2px; font: 500 17.5px/1.35 var(--sans); letter-spacing: -.01em; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq-ic { flex: none; width: 9px; height: 9px; margin: 0 6px 5px 0; border-right: 1.6px solid var(--ink-3); border-bottom: 1.6px solid var(--ink-3); transform: rotate(45deg); transition: transform .3s var(--enter), border-color .16s var(--ease); }
.st-faq summary:hover .st-faq-ic { border-color: var(--ink); }
.st-faq details[open] .st-faq-ic { transform: translateY(5px) rotate(-135deg); border-color: var(--ink); }
.st-faq p { margin: -4px 0 0; padding: 0 56px 24px 2px; color: var(--ink-2); font-size: 16px; line-height: 1.65; max-width: 64ch; text-wrap: pretty; }
.st-faq details[open] p { animation: st-in .32s var(--enter); }
.st-faqs.is-stack { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 0; max-width: 820px; margin: 0 auto; }
.st-faqs.is-stack > .st-faq-side, .st-faqs.is-stack > .st-faq, .st-faqs.is-stack > .st-faq-mail { grid-column: 1; grid-row: auto; }
.st-faqs.is-stack .st-faq-side { margin-bottom: 26px; text-align: center; }
.st-faqs.is-stack .st-faq-mail { margin: 26px auto 0; text-align: center; max-width: none; }
@media (max-width: 900px) {
  /* One column: heading, questions, then the email line. */
  .st-faqs { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 22px; }
  .st-faqs > .st-faq-side, .st-faqs > .st-faq, .st-faqs > .st-faq-mail { grid-column: 1; grid-row: auto; }
  .st-faqs > .st-faq-mail { margin-top: 4px; max-width: none; }
  .st-faq summary { padding: 18px 2px; font-size: 16px; }
  .st-faq p { padding: 0 8px 18px 2px; font-size: 15.5px; }
}

/* ---------- One curriculum: Read + Code it ---------- */
.st-parts { display: flex; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.st-part { display: inline-flex; align-items: center; gap: 5px; font: 500 12.5px/1 var(--sans); padding: 6px 10px 6px 8px; border-radius: 999px; background: var(--card-2); color: var(--ink-2); }
.st-part svg { width: 14px; height: 14px; }
.st-sec-title svg { width: 20px; height: 20px; vertical-align: -3px; margin-right: 8px; color: var(--ink-3); }
.st-hero-actions .st-btn svg { width: 16px; height: 16px; }
.st-how-code { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; background: #1D1C1A; }
.st-how-code code { font: 13px/1.6 var(--mono); color: #E8E4DC; white-space: pre; }
.st-how-code .kw { color: #FF9E64; }
.st-how-code .fn { color: #8FD18A; }
@media (max-width: 1180px) { .st-how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Dashboard: tinted cards, like the original Learn page ---------- */
[data-page="dashboard"] .st-top .st-signin, [data-page="dashboard"] .st-top .st-getpro { display: none; }
.st-dash { display: grid; gap: 20px; max-width: 1240px; width: 100%; margin: 0 auto; padding: 24px 0 8px; }
.st-dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding: 0 4px; }
.st-big { margin: 0; font: 500 clamp(40px, 5vw, 64px)/1 var(--sans); letter-spacing: -.035em; }
.st-dash-sub { margin: 12px 0 0; font-size: 17px; color: var(--ink-2); }
.st-week .st-days { display: grid; grid-template-columns: repeat(7, 30px); gap: 8px; }
.st-day { display: grid; justify-items: center; gap: 6px; }
.st-day i { width: 30px; height: 30px; border-radius: 50%; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule-2); }
.st-day.on i { background: var(--green); box-shadow: none; }
.st-day.today i { box-shadow: inset 0 0 0 2px var(--ink); }
.st-day.on.today i { box-shadow: inset 0 0 0 2px var(--ink), inset 0 0 0 4px var(--card); }
.st-day.later i { opacity: .5; }
.st-day small { font-size: 11.5px; color: var(--ink-3); }
.st-tile { display: flex; gap: 22px; padding: 20px; border-radius: 20px; color: #1D1C1A; background: var(--tint, var(--card)); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .05); transition: transform .2s var(--ease), box-shadow .2s var(--ease); }
.st-tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06), var(--lift-2); }
.st-tile:hover .st-folder-face { transform: perspective(800px) rotateY(-6deg); }
.st-tile .st-folder { width: 96px; height: auto; align-self: flex-start; flex: none; }
.st-tile-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.st-tile-k { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(29, 28, 26, .6); margin-bottom: 4px; }
.st-tile-k svg { width: 14px; height: 14px; }
.st-tile-t { font: 380 23px/1.12 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.02em; }
.st-tile-t i { font-style: italic; }
.st-tile-s { margin-top: 6px; font-size: 14px; line-height: 1.45; color: rgba(29, 28, 26, .68); }
.st-tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; font-size: 13px; }
.st-tile-st { font-weight: 500; }
.st-tile-parts { display: inline-flex; gap: 10px; flex: none; white-space: nowrap; color: rgba(29, 28, 26, .6); }
.st-tile-parts span { display: inline-flex; align-items: center; gap: 4px; }
.st-tile-parts svg { width: 13px; height: 13px; }
.st-tile-bar { display: block; height: 4px; margin-top: 10px; border-radius: 2px; background: rgba(255, 255, 255, .6); overflow: hidden; }
.st-tile-bar i { display: block; height: 100%; background: #1D1C1A; border-radius: 2px; }
.st-tile-wide { padding: 26px; gap: 30px; }
.st-tile-wide .st-folder { width: 150px; }
.st-tile-wide .st-tile-t { font-size: clamp(28px, 3.2vw, 40px); font-variation-settings: "opsz" 144; }
.st-tile-wide .st-tile-s { font-size: 15.5px; }
.st-tile-wide .st-tile-foot { font-size: 14.5px; justify-content: flex-start; gap: 24px; }
.st-tile-go { font-weight: 600; }
.st-tile-wide .st-tile-bar { max-width: 420px; }
.st-dash-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 16px; }
.st-pills { display: inline-flex; gap: 2px; padding: 4px; border-radius: 999px; background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rule); }
.st-pills button { border: 0; background: none; padding: 9px 16px; border-radius: 999px; cursor: pointer; font-size: 14.5px; color: var(--ink-2); white-space: nowrap; }
.st-pills button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
.st-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.st-empty-note { color: var(--ink-3); }
@media (max-width: 1180px) { .st-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
  .st-tiles { grid-template-columns: 1fr; }
  .st-tile { gap: 16px; padding: 16px; }
  .st-tile .st-folder { width: 76px; }
  .st-tile-wide { flex-direction: column; }
  .st-tile-wide .st-folder { width: 110px; }
  .st-week, .st-week .st-days { width: 100%; }
  .st-week .st-days { grid-template-columns: repeat(7, 1fr); }
  .st-pills { width: 100%; overflow-x: auto; }
}

/* ---------- Tracks ---------- */
.st-jump { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 4px; }
.st-jump a { padding: 9px 16px; border-radius: 999px; background: var(--card); box-shadow: inset 0 0 0 1px var(--rule); font-size: 14.5px; color: var(--ink-2); transition: color .16s var(--ease); }
.st-jump a:hover { color: var(--ink); }
.st-track { display: grid; gap: 16px; scroll-margin-top: 20px; }
.st-track + .st-track { margin-top: 32px; }
.st-track .st-sec-head { margin: 8px 4px 0; }
.st-track .st-sec-title { font: 500 30px/1.1 var(--sans); letter-spacing: -.025em; }
.st-track .st-sec-head p { max-width: 70ch; }
/* Phones: the main button spans the width, and the two tracks become one tray that stays at the top
   while you scroll and shows which track you're in (study.js). */
@media (max-width: 620px) {
  .st-dash { padding-top: 12px; }
  .st-dash-head { gap: 20px; }
  .st-dash-head > div, .st-dash-head > .st-btn { width: 100%; }
  /* the page name in the display face, like the module names under it; the intro keeps its first sentence */
  .st-dash-head:has(> .st-btn) .st-big { font: 380 54px/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
  .st-dash-sub { margin-top: 10px; font-size: 16.5px; line-height: 1.5; text-wrap: pretty; }
  .st-dash-more { display: none; }
  .st-dash-head > .st-btn { height: 50px; font-size: 15px; }
  .st-dash-head > .st-btn span { overflow: hidden; text-overflow: ellipsis; }
  .st-jump {
    position: sticky; top: 8px; z-index: 20; display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
    margin: 2px 4px 0; padding: 4px; border-radius: 999px;
    background: var(--card-2); box-shadow: inset 0 0 0 1px var(--rule), var(--lift-1);
  }
  .st-jump a { padding: 10px 8px; border-radius: 999px; text-align: center; background: none; box-shadow: none; font-size: 14px; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
  .st-jump a[aria-current="true"] { background: var(--card); color: var(--ink); box-shadow: var(--lift-1); }
  .st-track { scroll-margin-top: 66px; }
}

/* ---------- Module and project header ---------- */
.st-mhero { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 44px; padding: 40px 44px; align-items: center; }
.st-mhero .st-h1 { margin: 10px 0 0; font-size: clamp(36px, 4.4vw, 56px); }
.st-mhero .st-lede { margin-top: 14px; }
.st-mhero .st-hero-actions { margin-top: 26px; }
.st-mhero-cover .st-vis { aspect-ratio: 1; border-radius: 18px; }

/* ---------- Lists: lessons in a module, units in a project ---------- */
.st-listcard { padding: 28px 32px 16px; }
.st-list-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.st-list-head .st-h2 { margin: 0; }
.st-list-head .st-note { margin: 0; max-width: 60ch; }
.st-list { list-style: none; margin: 0; padding: 0; }
.st-list li + li { border-top: 1px solid var(--rule); }
.st-li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 16px 12px; border-radius: 12px; color: var(--ink); transition: background-color .16s var(--ease); }
a.st-li:hover { background: var(--card-2); }
.st-li-n { display: inline-flex; align-items: center; gap: 6px; font: 500 14px var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-li-t { display: grid; gap: 3px; min-width: 0; }
.st-li-t b { font-weight: 500; font-size: 16px; }
.st-li-t small { font-size: 14px; line-height: 1.45; color: var(--ink-2); }
.st-li-meta { display: inline-flex; align-items: center; gap: 12px; }
.st-li .st-state { min-width: 80px; text-align: right; font-size: 13px; color: var(--ink-3); }
.st-li.is-ready .st-state { color: var(--orange-ink); }
.st-li.is-done .st-state { color: var(--green); }
.st-li.is-done .st-tick { display: inline-grid; }
.st-li.is-soon .st-li-t b { color: var(--ink-2); }

/* ---------- A module page on phones ----------
   A way back to Learn, the cover standing on its own above the name, one card holding the lesson to do
   next (study.js moves it on as you finish lessons), and the lessons as a short list of titles with Pro
   said once. Wider screens keep the hero card and the full list. Pro members see no Free or Pro tags. */
.st-mback, .st-upnext, .st-li-gate, .st-li-go, .st-list-all { display: none; }
.st-member .st-li .st-tag, .st-member .st-li-gate { display: none !important; }
@media (max-width: 900px) {
  [data-page="module"] .st-mhero, [data-page="module"] .st-upnext, [data-page="module"] .st-listcard { width: 100%; max-width: 640px; margin-left: auto; margin-right: auto; }
  .st-mback {
    display: inline-flex; align-self: flex-start; align-items: center; gap: 3px; height: 32px;
    margin: 0 0 -6px max(-4px, calc((100% - 640px) / 2 - 4px)); padding: 0 12px 0 6px; border-radius: 999px;
    font-size: 14.5px; color: var(--ink-2); transition: background-color .16s var(--ease), color .16s var(--ease);
  }
  .st-mback svg { width: 16px; height: 16px; }
  .st-mback:hover { color: var(--ink); background: var(--card); }
  [data-page="module"] .st-mhero { display: flex; flex-direction: column; align-items: center; gap: 0; padding: 0 6px; background: none; box-shadow: none; text-align: center; }
  [data-page="module"] .st-mhero-cover { max-width: none; margin: 0 0 22px; }
  [data-page="module"] .st-mhero-cover .st-vis { height: 150px; aspect-ratio: auto; background: none; overflow: visible; }
  [data-page="module"] .st-mhero-cover .st-folder { height: 100%; }
  [data-page="module"] .st-mhero .st-h1 { margin-top: 8px; font-size: 44px; line-height: 1; }
  [data-page="module"] .st-mhero .st-lede { margin: 12px auto 0; max-width: 34ch; font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
  [data-page="module"] .st-mhero .st-hero-actions { display: none; }
  .st-upnext { display: block; position: relative; margin-top: 12px; padding: 22px 20px 20px; }
  .st-upnext-mark { position: absolute; right: 22px; top: -5px; width: 18px; height: 40px; border-radius: 2px 2px 0 0; background: var(--orange); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); }
  .st-upnext-k { font-size: 13px; color: var(--ink-3); }
  .st-upnext h2 { margin: 8px 0 0; padding-right: 32px; font: 500 21px/1.25 var(--sans); letter-spacing: -.015em; }
  .st-upnext p { margin: 6px 0 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
  .st-upnext .st-btn { width: 100%; height: 50px; margin-top: 18px; font-size: 15.5px; }
  .st-upnext .st-btn span { overflow: hidden; text-overflow: ellipsis; }
  [data-page="module"] .st-listcard { margin-top: 18px; padding: 0; background: none; box-shadow: none; }
  [data-page="module"] .st-list-head { margin: 0 4px 12px; }
  [data-page="module"] .st-list-head .st-h2 { font-size: 26px; line-height: 1; }
  [data-page="module"] .st-list-head .st-note, [data-page="module"] .st-list-name { display: none; }
  [data-page="module"] .st-list-all { display: inline; }
  [data-page="module"] .st-list { padding: 2px 16px; border-radius: var(--r-card); background: var(--card); box-shadow: var(--lift-1); }
  [data-page="module"] .st-li { grid-template-columns: 30px minmax(0, 1fr) auto; gap: 12px; padding: 14px 2px; border-radius: 0; }
  [data-page="module"] a.st-li:hover { background: none; }
  [data-page="module"] .st-li-n { font-size: 13px; }
  [data-page="module"] .st-li.is-done .st-li-num { display: none; }
  [data-page="module"] .st-li-t small, [data-page="module"] .st-li .st-tag { display: none; }
  [data-page="module"] .st-li-meta { grid-column: auto; gap: 6px; color: var(--ink-3); }
  [data-page="module"] .st-li .st-state { min-width: 0; font-size: 12.5px; color: var(--ink-3); }
  [data-page="module"] .st-li.is-ready .st-state, [data-page="module"] .st-li.is-done .st-state { display: none; }
  .st-li-go { display: inline-grid; }
  .st-li-go svg { width: 15px; height: 15px; opacity: .7; }
  .st-li-gate { display: flex; align-items: center; gap: 7px; padding: 14px 2px 12px; font-size: 13px; color: var(--ink-3); }
  .st-li-gate svg { width: 14px; height: 14px; flex: none; }
  .st-li-gate a { margin-left: auto; color: var(--ink); font-weight: 500; text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: 3px; }
}

/* ---------- Posters: numbered, coloured entry points with a line drawing ---------- */
.st-posters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.st-poster {
  position: relative; display: flex; flex-direction: column; justify-content: space-between;
  aspect-ratio: 4 / 5.4; padding: 24px 24px 22px; border-radius: 18px; overflow: hidden;
  background: var(--pc); color: #1D1C1A; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.st-poster:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08), 0 2px 4px rgba(60, 48, 30, .08), 0 18px 34px rgba(60, 48, 30, .12); }
.st-poster-art { position: absolute; left: 12px; top: 16px; width: 58%; pointer-events: none; }
.st-poster-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-poster .pulse { animation: st-pulse 2.8s ease-in-out infinite; }
.st-poster-num { align-self: flex-end; display: grid; justify-items: end; gap: 10px; font: 500 64px/.85 var(--sans); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.st-poster-num small { max-width: 13ch; font: 600 10.5px/1.35 var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; }
.st-poster-foot { display: grid; gap: 6px; padding-right: 52px; }
.st-poster-t { font: 700 clamp(24px, 2.4vw, 34px)/1.02 var(--sans); letter-spacing: -.035em; }
.st-poster-s { font-size: 14px; line-height: 1.35; opacity: .82; }
.st-poster-go { position: absolute; right: 20px; bottom: 20px; width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .42); }
.st-poster-go svg { width: 17px; height: 17px; transition: transform .2s var(--ease); }
.st-poster:hover .st-poster-go svg { transform: translateX(2px); }
.st-posters-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.st-posters-2 .st-poster { aspect-ratio: auto; min-height: 290px; }
.st-posters-2 .st-poster-art { width: 32%; max-width: 200px; }
.st-posters-2 .st-poster-t { font-size: clamp(26px, 2.6vw, 38px); }
/* 2026-11-05 (user: a long title ran into the drawing): a smaller drawing, at most two lines of title, and room for both. */
.st-posters-2 .st-poster { min-height: 310px; }
.st-posters-2 .st-poster-art { width: 26%; max-width: 160px; }
.st-posters-2 .st-poster-t { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.06; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

@media (max-width: 1100px) {
  .st-posters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .st-mhero { grid-template-columns: 1fr; gap: 24px; padding: 26px 22px; }
  .st-mhero-cover { order: -1; max-width: 200px; }
}
@media (max-width: 700px) {
  .st-posters { gap: 10px; }
  .st-poster { padding: 14px 14px 13px; border-radius: 16px; }
  .st-poster-art { left: 8px; top: 10px; }
  .st-poster-num { font-size: 38px; gap: 6px; }
  .st-poster-num small { font-size: 8.5px; }
  .st-poster-t { font-size: 20px; }
  .st-poster-s { font-size: 12px; }
  .st-poster-foot { padding-right: 34px; gap: 4px; }
  .st-poster-go { width: 30px; height: 30px; right: 11px; bottom: 11px; }
  .st-posters-2 { grid-template-columns: 1fr; }
  .st-posters-2 .st-poster { min-height: 220px; }
  .st-listcard { padding: 20px 12px 10px; }
  .st-li { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; padding: 14px 6px; }
  .st-li-meta { grid-column: 2; }
  .st-li .st-state { min-width: 0; text-align: left; }
  .st-track .st-sec-title { font-size: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: 0s !important; }
}
@media print {
  .st-rail, .st-top, .st-toc, .st-lfoot, .st-lhead { display: none; }
  .st-sec[hidden] { display: block; }
}

/* The smallest phones: the three round buttons sit closer so they clear the centred wordmark. */
@media (max-width: 374px) { .st-top { gap: 5px; } .st-top .st-theme, .st-top .st-gear, .st-top .st-qbtn { width: 34px; height: 34px; } }

/* ---------------------------------------------------------------- closing section of an AI lesson (courses/build-study.js closingSection) */
.st-close { margin-top: 30px; }
.st-close:first-of-type { margin-top: 14px; }
.st-close > .st-eyebrow { margin: 0 0 12px; }
.st-map { display: grid; grid-template-columns: 1fr minmax(150px, 210px) 1fr; align-items: center; gap: 18px; }
.st-map-col { display: grid; gap: 14px; }
.st-map-n { position: relative; padding: 14px 16px; border: 1.5px solid var(--ink); border-radius: 12px; background: var(--card); }
.st-map-n b { display: block; margin-bottom: 6px; font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.st-map-n ul { margin: 0; padding-left: 16px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.st-map-n.l::after, .st-map-n.r::after { content: ""; position: absolute; top: 50%; width: 18px; border-top: 1.5px dashed var(--ink-3); }
.st-map-n.l::after { right: -19px; } .st-map-n.r::after { left: -19px; }
.st-map-c { display: grid; place-items: center; aspect-ratio: 1.35; padding: 12px; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--card); text-align: center; }
.st-map-c span { font: italic 300 20px/1.2 Fraunces, serif; color: var(--ink); }
.st-try { padding: 22px 24px; border: 1.5px solid var(--ink); border-radius: 16px; }
.st-try-h { margin: 0 0 8px; font: 400 22px/1.25 Fraunces, serif; color: var(--ink); }
.st-try p { margin: 0 0 10px; }
.st-try-need { font-size: 14px; color: var(--ink-2); }
.st-try-k { margin: 14px 0 6px !important; font: 600 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.st-try-look { margin: 0; padding-left: 18px; }
.st-try-look li { margin: 4px 0; }
.st-words { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; margin: 0; }
.st-words > div { padding: 12px 0; border-top: 1px solid var(--rule); }
.st-words dt { font: 400 19px/1.3 Fraunces, serif; color: var(--ink); }
.st-words dd { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.st-refs { list-style: none; margin: 0; padding: 0; }
.st-refs li { border-top: 1px solid var(--rule); }
.st-refs a { display: flex; align-items: flex-start; gap: 14px; padding: 12px 0; color: inherit; text-decoration: none; }
.st-refs a:hover b { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.st-ref-t b { display: block; font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.st-ref-t small { display: block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.st-ref-t em { display: block; margin-top: 4px; font-style: normal; font-size: 14px; color: var(--ink-2); }
.st-play { flex: none; position: relative; width: 34px; height: 34px; border: 1.5px solid var(--ink); border-radius: 50%; }
.st-play::after { content: ""; position: absolute; left: 13px; top: 10px; border-left: 11px solid var(--orange, #FF5A1F); border-top: 6.5px solid transparent; border-bottom: 6.5px solid transparent; }
@media (max-width: 760px) {
  .st-map { grid-template-columns: 1fr; } .st-map-c { order: -1; aspect-ratio: auto; border-radius: 999px; padding: 14px 20px; }
  .st-map-n.l::after, .st-map-n.r::after { display: none; }
  .st-words { grid-template-columns: 1fr; }
}

/* Lesson rows (2026-11-03): one status per row, about you. Free users see Free or Pro; once you've opened a lesson it
   says In progress, then Done, in place of the label. Pro members see no labels, only their own progress. Lessons not
   written yet say Coming soon. There is no "Ready". */
.st-li .st-state:empty { display: none; }
.st-li .st-state { min-width: 0; }
.st-li.is-ready .st-state { color: var(--ink-3); }
.st-li.is-progress .st-state { color: var(--orange-ink); font-weight: 500; }
.st-li.is-done .st-state { color: var(--green); font-weight: 500; }
.st-li.is-done .st-state::before { content: ""; display: inline-block; width: 9px; height: 5px; margin: 0 7px 3px 0; border: 1.8px solid currentColor; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.st-li.is-done .st-tag, .st-li.is-progress .st-tag { display: none; }
.st-li.is-soon .st-state { color: var(--ink-3); }
@media (max-width: 900px) { [data-page="module"] .st-li.is-progress .st-state, [data-page="module"] .st-li.is-done .st-state { display: inline; } }
.st-li.is-done .st-state::before { content: none; }
/* Phones: free users see a small lock in place of the arrow on each Pro lesson (no banner in the list). Pro members
   keep the arrows. Wider screens show the "Pro" tag with its lock. */
@media (max-width: 900px) {
  html:not(.st-member) [data-page="module"] .st-li.is-pro .st-li-go svg { display: none; }
  html:not(.st-member) [data-page="module"] .st-li.is-pro .st-li-go::before {
    content: ""; display: block; width: 15px; height: 15px; background: currentColor; opacity: .75;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='12' height='8.5' rx='2.2'/%3E%3Cpath d='M6.8 9V6.6a3.2 3.2 0 0 1 6.4 0V9'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.9' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='12' height='8.5' rx='2.2'/%3E%3Cpath d='M6.8 9V6.6a3.2 3.2 0 0 1 6.4 0V9'/%3E%3C/svg%3E") center / contain no-repeat;
  }
  html:not(.st-member) [data-page="module"] .st-li.is-pro.is-done .st-li-go::before, html:not(.st-member) [data-page="module"] .st-li.is-pro.is-progress .st-li-go::before { display: none; }
  html:not(.st-member) [data-page="module"] .st-li.is-pro.is-done .st-li-go svg, html:not(.st-member) [data-page="module"] .st-li.is-pro.is-progress .st-li-go svg { display: block; }
}

/* Module page on wider screens (user, 2026-11-03: "narrow it a bit, let it breathe"): one centred column, a calmer
   hero, and lesson rows with room around them; the label sits close to the title, not at the far edge. */
@media (min-width: 901px) {
  [data-page="module"] .st-mhero, [data-page="module"] .st-listcard { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; }
  [data-page="module"] .st-mhero { grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; padding: 52px 56px; margin-top: 12px; }
  [data-page="module"] .st-mhero .st-lede { max-width: 46ch; }
  [data-page="module"] .st-listcard { margin-top: 28px; padding: 44px 56px 28px; }
  [data-page="module"] .st-list-head { margin-bottom: 18px; }
  [data-page="module"] .st-li { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 20px; padding: 20px 16px; margin: 0 -16px; }
  [data-page="module"] .st-li-t { gap: 5px; }
  [data-page="module"] .st-li-t b { font-size: 17px; }
  [data-page="module"] .st-li-t small { font-size: 14.5px; }
  [data-page="module"] .st-li-meta { min-width: 96px; justify-content: flex-end; }
}


/* ---------------------------------------------------------------- a module's project (2026-11-04): "Build it yourself"
   at the end of the module page, in the module's colour (the card system: fixed light tint, dark text in both themes),
   its folder beside the brief; Copy the brief for a coding agent, Mark as built. */
.st-proj { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; padding: 36px 40px; background: var(--tint); color: #1D1C1A; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); }
[data-page="module"] .st-proj { width: 100%; max-width: 1040px; margin: 28px auto 0; }
.st-proj-art { position: relative; align-self: start; }
.st-proj-art .st-folder { width: 100%; height: auto; transform: rotate(-4deg); filter: drop-shadow(0 14px 16px rgba(60, 48, 30, .2)); }
.st-proj-tick { display: none; position: absolute; right: -6px; bottom: 6px; width: 34px; height: 34px; border-radius: 50%; background: #1D1C1A; }
.st-proj-tick::after { content: ""; position: absolute; left: 11px; top: 10px; width: 11px; height: 6px; border: 2.4px solid #FCFBF8; border-top: 0; border-right: 0; transform: rotate(-45deg); }
.st-proj.is-built .st-proj-tick { display: block; }
.st-proj-k { margin: 0; font: 600 11px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(29, 28, 26, .55); }
.st-proj-t { margin: 10px 0 0; font: 380 clamp(30px, 3vw, 40px)/1.08 var(--serif); letter-spacing: -.02em; color: #1D1C1A; }
.st-proj-t i { font-style: italic; }
.st-proj-what { margin: 12px 0 0; max-width: 60ch; font-size: 16.5px; line-height: 1.55; color: rgba(29, 28, 26, .78); }
.st-proj-steps { margin: 22px 0 0; padding: 0; list-style: none; counter-reset: ps; display: grid; gap: 10px; }
.st-proj-steps li { counter-increment: ps; position: relative; padding-left: 40px; font-size: 15.5px; line-height: 1.5; color: #1D1C1A; }
.st-proj-steps li::before { content: counter(ps); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .1); font: 600 12px var(--mono); color: rgba(29, 28, 26, .7); }
.st-proj-done { margin: 22px 0 0; padding: 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .55); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); font-size: 15px; line-height: 1.5; color: #1D1C1A; }
.st-proj-done b { display: block; margin-bottom: 4px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(29, 28, 26, .55); }
.st-proj-stack { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: rgba(29, 28, 26, .62); }
.st-proj-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 24px; }
.st-proj-acts .st-btn { height: 48px; padding: 0 22px; border-radius: 13px; font-size: 15px; }
.st-proj-acts .st-btn.dark { background: #1D1C1A; color: #FCFBF8; }
.st-proj-acts .st-btn:not(.dark) { background: rgba(255, 255, 255, .62); color: #1D1C1A; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .12); }
.st-proj-acts [data-proj-built][aria-pressed="true"] { box-shadow: inset 0 0 0 1.5px #1D1C1A; }
.st-proj-note { font-size: 14px; color: rgba(29, 28, 26, .7); }
@media (max-width: 760px) {
  .st-proj { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 24px 20px; }
  [data-page="module"] .st-proj { margin-top: 18px; max-width: 640px; }
  .st-proj-art { width: 96px; }
  .st-proj-acts .st-btn { flex: 1 1 auto; }
}

/* Code in lessons shows every character as typed: no font ligatures ("<=" stays two characters). */
/* !important: rules that set the "font" shorthand (.gl-d code, .dr-sheet code, ...) reset ligatures to normal; this must win
   everywhere (11-06: "<|im_start|>" showed as an arrow glyph). study.css loads on every page. */
pre, code, kbd, samp, .st-code, .st-pre, .dr-code { font-variant-ligatures: none !important; font-feature-settings: "liga" 0, "calt" 0 !important; }

/* Term boxes: a small "Key terms" label above the definition (the terms are bold in the text). */
.st-callout.is-term .st-ckey { display: block; margin-bottom: 4px; font: 600 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--green); background: none; }
/* 2026-11-05: the term itself heads the box, in sentence case (no tracked capitals). */
.st-callout.is-term .st-term { display: block; margin: 0 0 4px; font: 600 15.5px/1.3 var(--sans); letter-spacing: 0; text-transform: none; color: var(--green); background: none; }

/* ---------------------------------------------------------------- Projects (2026-11-05): every module's "Build it yourself"
   on one page, as Learn's tiles. The brief is long, so a tile shows three lines of it; a built one says so in ink. */
.st-proj-tiles .st-tile-s { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.st-tile.is-built .st-tile-st { color: #1D1C1A; font-weight: 600; }
.st-proj-t[id^="proj-"] { scroll-margin-top: 96px; }


/* ---------------------------------------------------------------- The lesson as the module's folder (2026-11-05,
   direction B, the card system; courses/build-study.js lessonPage). Objects on the desk: the opening (the folder card,
   its goals as dividers with staggered tabs), each part (a divider with the same tab, then its sheet), the end of the
   lesson and the Next lesson card. On the sheet: examples on graph paper with an exercise-book margin, rules on index
   cards, figures in ink, questions on tiles in the module's colour. Tinted objects keep their light tint and dark text
   in both themes (the light-ink islands below); the sheet, worksheets, index cards and page text follow the theme. */
body[data-page="lesson"] { background-image: radial-gradient(rgba(28, 27, 25, .10) 1px, transparent 1.2px); background-size: 22px 22px; }
:root[data-theme="dark"] body[data-page="lesson"] { background-image: radial-gradient(rgba(238, 235, 228, .06) 1px, transparent 1.2px); }
[data-page="lesson"] .st-lhead { width: 100%; max-width: 1060px; margin: 0 auto; padding: 0 4px; background: none; box-shadow: none; }
[data-page="lesson"] .st-lhead-row h1 { font: 500 15px/1.3 var(--sans); color: var(--ink-2); }

.st-b {
  --tab-w: 120px; --gtab-w: 76px; --b-r: 26px;
  --ws-bg: #FFFEFB; --ws-grid: rgba(29, 28, 26, .05); --ws-dash: rgba(29, 28, 26, .2); --ws-edge: rgba(29, 28, 26, .10);
  --ic-bg: #FFFEFB; --ic-line: rgba(29, 28, 26, .09); --ic-edge: rgba(29, 28, 26, .07);
  --code-bg: var(--card-2); --key: #F1EFEA;
  width: 100%; max-width: 1060px; margin: 4px auto 0; padding-bottom: 24px;
  font-size: 17.5px; line-height: 1.7; color: var(--ink);
}
:root[data-theme="dark"] .st-b {
  --ws-bg: #22211E; --ws-grid: rgba(238, 235, 228, .045); --ws-dash: rgba(238, 235, 228, .16); --ws-edge: rgba(238, 235, 228, .09);
  --ic-bg: #252420; --ic-line: rgba(238, 235, 228, .08); --ic-edge: rgba(238, 235, 228, .07);
  --code-bg: #161513; --key: #2A2825;
}
.st-b p { margin: 0 0 1.05em; }
.st-b strong { font-weight: 700; }
.st-b code { font: 500 .86em/1.4 var(--mono); background: var(--card-2); border: 1px solid var(--rule); padding: .06em .35em; border-radius: 5px; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.st-b :not(pre) > code { overflow-wrap: anywhere; }
.st-b .st-sheet > h3, .st-b .st-lbody > .st-sec > h3 { margin: 32px 0 10px; font: 600 19px/1.3 var(--sans); }
.st-b h2.st-h1 i, .st-b b i { font-style: italic; }
/* Tinted objects: the light theme's inks inside, whatever the page's theme. */
.st-b .st-open, .st-b .st-div, .st-b .st-predict, .st-b .st-nextcard, .st-b .st-cut-card, :root[data-theme="dark"] .st-b .st-plate {
  --ink: #1D1C1A; --ink-2: #5E5B55; --ink-3: #97938B; --rule: rgba(29, 28, 26, .10); --rule-2: rgba(29, 28, 26, .16);
  --card: #FCFBF8; --card-2: #F5F3EE; --orange-ink: #B9400F; --green: #1F7A50; --green-bg: rgba(31, 122, 80, .08);
  --red: #B8382A; --red-bg: rgba(184, 56, 42, .07); --dark: #1D1C1A; --on-dark: #FCFBF8;
  color: var(--ink); color-scheme: light;
}
.st-b .st-folder { height: auto; }
.st-b .st-folder-face > svg { display: block; width: 100%; height: 100%; }

/* The opening: the module's folder card */
.st-b .st-open { position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 56px; padding: 56px 60px 52px; background: var(--tint); border-radius: 30px; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); scroll-margin-top: 16px; }
.st-b .st-open.no-goals { padding-bottom: 56px; }
.st-open-art .st-folder { width: 230px; margin: 8px 0 0 6px; transform: rotate(-4deg); filter: drop-shadow(0 18px 20px rgba(60, 48, 30, .22)); }
.st-b .st-kicker { margin: 0 0 14px; font: 500 15px/1.4 var(--sans); color: rgba(29, 28, 26, .62); }
.st-b .st-open h2.st-h1 { margin: 0; font: 360 clamp(46px, 5.4vw, 78px)/1 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.025em; }
.st-b .st-open .st-sub { margin: 18px 0 0; font-size: 20px; line-height: 1.45; color: rgba(29, 28, 26, .72); }
.st-b .st-open .st-lead { margin: 22px 0 0; max-width: 58ch; }
.st-b .st-goals-h { grid-column: 1 / -1; margin: 44px 0 -2px; font: 700 15.5px/1.4 var(--sans); }
.st-b .st-goals { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; border: 0; }
.st-b .st-goals li { position: relative; margin-top: 32px; border: 0; }
.st-b .st-goals a { position: relative; display: flex; align-items: center; min-height: 58px; padding: 14px 22px; background: rgba(252, 251, 248, .78); border-radius: 14px; color: var(--ink); font-size: 17px; line-height: 1.45;
  box-shadow: 0 1px 0 rgba(29, 28, 26, .06), 0 6px 14px -8px rgba(60, 48, 30, .25); transition: background-color .16s var(--ease), transform .16s var(--ease); }
.st-b .st-goals li:first-child a { border-top-left-radius: 0; }
.st-b .st-goals li:last-child:not(:first-child) a { border-top-right-radius: 0; }
.st-b .st-goals .st-gn { position: absolute; left: calc(var(--k) * (100% - var(--gtab-w)) / var(--kn)); top: -28px; width: var(--gtab-w); height: 30px; display: grid; place-items: center; padding-bottom: 2px;
  background: rgba(252, 251, 248, .78); border-radius: 10px 10px 0 0; font: 700 15px/1 var(--sans); color: var(--orange-ink); font-variant-numeric: tabular-nums; transition: background-color .16s var(--ease); }
.st-b .st-goals a:hover { background: #FCFBF8; transform: translateY(-2px); }
.st-b .st-goals a:hover .st-gn { background: #FCFBF8; }

/* A part: its divider in the module's colour, the tab where its goal's tab was, then the sheet */
.st-b .st-lpart { position: relative; margin-top: 96px; scroll-margin-top: 70px; }
.st-b .st-div { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; min-height: 150px; padding: 34px 60px; background: var(--tint); border-radius: var(--b-r) var(--b-r) 0 0; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); }
.st-b .st-div.has-art { grid-template-columns: minmax(0, 1fr) 190px; min-height: 196px; }
.st-b .st-lpart.is-first .st-div { border-top-left-radius: 0; }
.st-b .st-lpart.is-last .st-div { border-top-right-radius: 0; }
.st-b .st-tab { position: absolute; top: -40px; left: calc(var(--k) * (100% - var(--tab-w)) / var(--kn)); width: var(--tab-w); height: 42px; display: grid; place-items: center; background: var(--tint); border-radius: 14px 14px 0 0;
  font: 700 18px/1 var(--sans); color: var(--orange-ink); font-variant-numeric: tabular-nums; }
.st-b .st-div h2.st-h1 { margin: 0; font: 380 clamp(34px, 4vw, 50px)/1.04 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.st-b .st-div-goal { margin: 12px 0 0; max-width: 46ch; font-size: 17.5px; line-height: 1.5; color: rgba(29, 28, 26, .72); }
.st-b .st-div-art { align-self: end; margin-bottom: -86px; z-index: 2; }
.st-b .st-div-art .st-folder { width: 168px; transform: rotate(4deg); filter: drop-shadow(0 18px 18px rgba(60, 48, 30, .24)); }
.st-b .st-sheet { padding: 64px 60px 60px; background: var(--card); border-radius: 0 0 var(--b-r) var(--b-r); box-shadow: var(--lift-2); }
.st-b .st-div:not(.has-art) + .st-sheet { padding-top: 52px; }
.st-b .st-sheet > * { max-width: none; }
.st-b .st-sheet > :last-child { margin-bottom: 0; }

/* Worksheet: an example on graph paper, an exercise-book margin in orange, the sum on the right, the answer boxed */
.st-b .st-ex { position: relative; max-width: none; margin: 30px -24px 36px; padding: 26px 30px 24px 92px; border-radius: 16px; background-color: var(--ws-bg);
  background-image: linear-gradient(var(--ws-grid) 1px, transparent 1px), linear-gradient(90deg, var(--ws-grid) 1px, transparent 1px); background-size: 22px 22px; background-position: -1px -1px;
  box-shadow: 0 0 0 1px var(--ws-edge), 0 1px 2px rgba(60, 48, 30, .06), 0 10px 22px -12px rgba(60, 48, 30, .22); }
.st-b .st-ex::before { content: ""; position: absolute; left: 70px; top: 0; bottom: 0; width: 1.5px; background: var(--orange); opacity: .55; }
.st-b .st-ex-h { margin-bottom: 10px; }
.st-b .st-ex-k { margin: 0; font: 700 13.5px/1.4 var(--sans); color: var(--orange-ink); }
.st-b .st-ex-t { margin: 3px 0 0; font: 400 26px/1.2 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; }
.st-b .st-ex-prob { margin: 0 0 16px; max-width: 62ch; }
.st-b .st-ex-steps { list-style: none; margin: 0; padding: 0; }
.st-b .st-ex-steps > li { position: relative; display: block; padding: 12px 0; border-top: 1px dashed var(--ws-dash); }
.st-b .st-ex-n { position: absolute; left: -62px; top: 11px; width: 32px; height: 32px; display: grid; place-items: center; background: none; box-shadow: none; border-radius: 0;
  font: 400 21px/1 var(--serif); font-variant-numeric: lining-nums; color: var(--ink-2); }
.st-b .st-ex-l { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 20px; }
.st-b .st-ex-do { font-weight: 700; font-size: 16.5px; line-height: 1.5; }
.st-b .st-ex-math { font: 500 19px/1.4 var(--sans); font-variant-numeric: tabular-nums; white-space: normal; }
.st-b .st-ex-why { margin: 3px 0 0; max-width: 60ch; font-size: 16.5px; line-height: 1.6; }
.st-b .st-ex-ans { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin: 0; padding-top: 16px; border-top: 1.5px solid var(--ink); }
.st-b .st-ex-ans span { margin: 0; font: 700 14px/1.4 var(--sans); color: var(--orange-ink); }
.st-b .st-ex-ans b { padding: 5px 14px; border: 1.6px solid var(--ink); border-radius: 8px 10px 8px 11px; background: var(--ws-bg); font: 700 19px/1.4 var(--sans); font-variant-numeric: tabular-nums; text-align: right; }
/* An older lesson's worked steps on the same worksheet: each step's numbers as small chips, then its sentence. */
.st-b .st-worked .st-ex-steps > li:last-child { padding-bottom: 2px; }
.st-b .st-worked .st-stage { display: block; min-height: 0; padding: 2px 0 0; margin: 0 0 6px; background: none; border: 0; }
.st-b .st-worked .st-row { justify-content: flex-start; gap: 6px; margin: 0 0 4px; }
.st-b .st-worked .st-chip { padding: 4px 9px; font-size: 14px; border-radius: 8px; background: var(--ws-bg); box-shadow: none; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.st-b .st-worked .st-chip.hot { box-shadow: 0 0 0 3px rgba(255, 90, 31, .12); }
.st-b .st-worked .st-arrow { font-size: 15px; color: var(--ink-3); }
.st-b .st-worked .st-label { font-size: 14px; color: var(--ink-2); }

/* Other boxes: a note on the sheet; a real or interview card, with an optional drawing on top */
.st-b .st-callout { margin: 28px 0; padding: 16px 20px; border: 0; border-radius: 14px; background: var(--card-2); font-size: 16.5px; line-height: 1.65; }
.st-b .st-callout .st-ctitle { display: block; margin: 0 0 4px; font: 700 16px/1.35 var(--sans); color: var(--ink); }
.st-b .st-callout p:last-child { margin-bottom: 0; }
.st-b .st-callout.real, .st-b .st-callout.interview { padding: 22px 24px 18px; border-radius: 20px; background: var(--card); box-shadow: 0 0 0 1px var(--rule-2); }
.st-b .st-callout.real .st-ctitle, .st-b .st-callout.interview .st-ctitle { font-size: 17px; color: var(--ink); }
.st-b .st-callout-art { margin: 0 0 14px; }
.st-b .st-callout-art svg { display: block; width: 100%; max-width: 250px; height: 170px; overflow: visible; }

/* Index card: a term or a rule. The term as its header over an orange line, the text on ruled lines, the formula last */
.st-b .st-ic { position: relative; margin: 30px 0 34px; padding: 16px 26px; background: var(--ic-bg); border: 0; border-radius: 4px; box-shadow: 0 0 0 1px var(--ic-edge), var(--lift-2); font-size: 17px; line-height: 1.7; }
.st-b .st-ic .st-term, .st-b .st-ic-t { display: block; margin: 0 0 12px; padding-bottom: 9px; border-bottom: 2px solid var(--orange); font: 400 23px/1.3 var(--serif); font-variation-settings: "opsz" 72; letter-spacing: -.01em; color: var(--ink); text-transform: none; }
.st-b .st-ic-x { margin: 0; font-size: 17px; line-height: 32px; background-image: repeating-linear-gradient(180deg, transparent 0 31px, var(--ic-line) 31px 32px); }
.st-b .st-ic .st-formula { margin: 0; padding-top: 4px; font: 500 22px/32px var(--sans); font-variant-numeric: tabular-nums; background-size: 100% 36px; background-image: linear-gradient(180deg, transparent 0 35px, var(--ic-line) 35px 36px); }
.st-b .st-ic code { font-size: .82em; }
/* Figures: ink drawings straight on the sheet */
.st-b .st-fig { margin: 34px 0 40px; max-width: 480px; }
.st-b .st-fig.is-wide { max-width: none; margin-left: -24px; margin-right: -24px; }
.st-b .st-fig-art svg { display: block; width: 100%; height: auto; overflow: visible; }
.st-b .st-fig-n { display: none; }
.st-b .st-fig figcaption { margin-top: 14px; max-width: 62ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.st-b .st-fig figcaption b { display: block; font-weight: 700; color: var(--ink); }
/* Dark: a drawing keeps its paper and ink on a plate in the module's colour, like a cover on its folder. */
:root[data-theme="dark"] .st-b .st-plate { padding: 20px 22px; border-radius: 18px; background: var(--tint); }
:root[data-theme="dark"] .st-b .st-callout-art { display: inline-block; padding: 14px 18px; }

/* Questions: a tile in the module's colour, with its own drawing on a small folder when it has one */
.st-b .st-predict { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; margin: 40px -24px 40px; padding: 30px 32px 28px; overflow: visible;
  background: var(--tint); border: 0; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); }
.st-b .st-predict.has-art { grid-template-columns: 112px minmax(0, 1fr); }
.st-b .st-predict:not(.has-art) { display: block; }
.st-b .st-q-art .st-folder { width: 104px; transform: rotate(-4deg); filter: drop-shadow(0 10px 12px rgba(60, 48, 30, .2)); }
.st-b .st-predict .st-eyebrow { margin: 0 0 4px; font: 700 14.5px/1.4 var(--sans); color: rgba(29, 28, 26, .6); }
.st-b .st-predict .st-q { margin: 0 0 18px; font: 400 23px/1.35 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.005em; }
.st-b .st-predict .st-q code { font-size: .74em; }
.st-b .st-predict .st-opts { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.st-b .st-predict.is-grid .st-opts { grid-template-columns: 1fr 1fr; }
.st-b .st-opt { width: 100%; min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .62); color: var(--ink); text-align: left; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .10), 0 1px 1px rgba(60, 48, 30, .05); font: 500 17px/1.4 var(--sans); font-variant-numeric: tabular-nums;
  transition: background-color .16s var(--ease), box-shadow .16s var(--ease), opacity .16s var(--ease), transform .09s var(--ease); }
.st-b .st-opt:hover { background: rgba(255, 255, 255, .92); }
.st-b .st-opt:active { transform: translateY(1px); }
.st-b .st-opt .st-letter { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(29, 28, 26, .07); font: 700 13px/1 var(--sans); color: rgba(29, 28, 26, .7); }
.st-b .st-opt code { font-size: .8em; }
.st-b .st-predict.locked .st-opt { cursor: default; transform: none; }
.st-b .st-predict.locked .st-opt:hover { background: rgba(255, 255, 255, .62); }
.st-b .st-predict.locked .st-opt:not(.right):not(.wrong) { opacity: .45; }
.st-b .st-opt.right, .st-b .st-predict.locked .st-opt.right:hover { background: #FCFBF8 !important; box-shadow: inset 0 0 0 2px var(--green); }
.st-b .st-opt.wrong { background: rgba(255, 255, 255, .62) !important; box-shadow: inset 0 0 0 2px var(--red); }
.st-b .st-opt.right .st-letter { background: var(--green); color: #fff; }
.st-b .st-opt.wrong .st-letter { background: var(--red); color: #fff; }
.st-b .st-verdict { display: none; margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: rgba(255, 255, 255, .62); font-size: 16.5px; line-height: 1.6; }
.st-b .st-predict.locked .st-verdict { display: block; animation: st-in .36s var(--enter); }
.st-b .st-verdict strong { display: block; margin-bottom: 2px; font-size: 16px; color: var(--red); }
.st-b .st-verdict.is-right strong { color: var(--green); }

/* Code: a card with its name and a Copy key, the code on the inset below */
.st-b .st-code { max-width: none; margin: 30px -24px 36px; padding: 6px; background: var(--card); color: var(--ink); border-radius: 22px; box-shadow: 0 0 0 1px var(--rule-2); }
.st-b .st-code-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 10px 8px 18px; border: 0; font: 700 15.5px/1.3 var(--sans); color: var(--ink); }
.st-b .st-code-head button { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--key); color: var(--ink); font: 500 13.5px var(--sans); cursor: pointer;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .5), var(--lift-1); transition: transform .09s var(--ease); }
.st-b .st-code-head button:hover { color: var(--ink); }
.st-b .st-code-head button:active { transform: translateY(1px); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .12), var(--lift-1); }
.st-b .st-code pre { margin: 0; padding: 18px 20px; background: var(--code-bg); border-radius: 16px; font: 400 14px/1.75 var(--mono); font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.st-b .st-code-note { margin: 12px 18px 8px; font-size: 16px; color: var(--ink-2); }
.st-b .st-code .kw { color: #B9400F; }
.st-b .st-code .fn { color: #1F7A50; }
.st-b .st-code .str { color: #8A5A12; }
.st-b .st-code .cm { color: var(--ink-3); font-style: normal; }
.st-b .st-code .num { color: #6E46B8; }
:root[data-theme="dark"] .st-b .st-code .kw { color: #FF9E64; }
:root[data-theme="dark"] .st-b .st-code .fn { color: #8FD18A; }
:root[data-theme="dark"] .st-b .st-code .str { color: #E8D5A3; }
:root[data-theme="dark"] .st-b .st-code .num { color: #D4A8CF; }
.st-b .st-sheet > .st-lab, .st-b .st-sheet > .st-golink { max-width: none; }
.st-b .st-sheet > .st-lab { margin: 32px -24px; }

/* The end of the lesson, on the desk */
.st-b .st-end { margin-top: 96px; scroll-margin-top: 70px; }
.st-b .st-end > h2.st-h1 { margin: 0 0 24px 4px; font: 380 clamp(32px, 3.6vw, 44px)/1.05 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.st-b .st-end-intro { margin: -12px 0 8px 4px; color: var(--ink-2); }
.st-b .st-end .st-predict { margin: 18px 0 0; }
.st-b .st-end > .st-code { margin: 20px 0 0; box-shadow: var(--lift-2); }
.st-b .st-end > p { margin: 20px 4px 0; }
.st-b .st-end > .st-callout:not(.st-ic) { margin: 20px 0 0; }
.st-b .st-meet { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.st-b .st-meet.is-one { grid-template-columns: minmax(0, 1fr); }
.st-b .st-meet .st-callout { margin: 0; padding: 26px 28px 20px; border-radius: 22px; background: var(--card); box-shadow: var(--lift-2); }
.st-b .st-meet + .st-meet { margin-top: 20px; }
.st-b .st-sheet > .st-meet { max-width: none; margin: 30px -24px 36px; }
.st-b .st-sheet > .st-meet .st-callout { box-shadow: 0 0 0 1px var(--rule-2); }
.st-b .st-remember { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 28px 26px; margin: 0; padding: 6px 4px 0; border: 0; }
.st-b .st-remember .st-ic { display: block; margin: 0; padding: 16px 26px; transition: transform .26s var(--ease); }
.st-b .st-remember .st-ic:nth-child(4n + 1) { transform: rotate(-1.1deg); }
.st-b .st-remember .st-ic:nth-child(4n + 2) { transform: rotate(.8deg) translateY(6px); }
.st-b .st-remember .st-ic:nth-child(4n + 3) { transform: rotate(.6deg); }
.st-b .st-remember .st-ic:nth-child(4n + 4) { transform: rotate(-.7deg) translateY(6px); }
.st-b .st-remember .st-ic:hover { transform: none; }
.st-b .st-remember .st-ic-t { display: flex; gap: 12px; align-items: baseline; }
.st-b .st-rn { font: 700 16px/1 var(--sans); color: var(--orange-ink); font-variant-numeric: lining-nums tabular-nums; }
.st-b a.st-rn:hover { text-decoration: underline; text-underline-offset: 4px; }
.st-b .st-remember .st-ic-x { font-size: 16.5px; }
.st-b .st-endsheet { padding: 40px 48px 36px; background: var(--card); border-radius: var(--b-r); box-shadow: var(--lift-2); }
.st-b .st-endsheet p { font-size: 16.5px; }

/* The Next lesson card closes the lesson */
.st-b .st-lfoot { display: block; margin-top: 80px; padding: 0; border: 0; }
.st-b .st-nextcard { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 36px; align-items: center; padding: 36px 44px; background: var(--tint); border-radius: var(--b-r); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); transition: transform .2s var(--ease); }
.st-b .st-nextcard:hover { transform: translateY(-2px); }
.st-b .st-nextcard-art .st-folder { width: 128px; transform: rotate(-4deg); filter: drop-shadow(0 14px 16px rgba(60, 48, 30, .22)); }
.st-b .st-nextcard small { display: block; font: 500 15px/1.4 var(--sans); color: rgba(29, 28, 26, .6); }
.st-b .st-nextcard b { display: block; margin: 4px 0 10px; font: 380 clamp(30px, 3.4vw, 42px)/1.05 var(--serif); font-variation-settings: "opsz" 144; letter-spacing: -.02em; }
.st-b .st-nextcard-br { display: block; max-width: 52ch; font-size: 16.5px; line-height: 1.55; color: rgba(29, 28, 26, .75); }
.st-b .st-nextcard-br:empty { display: none; }
.st-b .st-nextcard-go { height: 50px; padding: 0 22px; border-radius: 13px; font-size: 15.5px; }
.st-b .st-lfoot .st-btn.st-nextcard-go { order: 0; flex: none; margin-left: 0; }
.st-b .st-report { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 20px; margin: 18px 4px 0; font-size: 14.5px; color: var(--ink-2); }
.st-b .st-report a { color: var(--ink-2); }

/* A Pro lesson's free taste: part 2's divider, its first lines fading on the sheet, then the card with the way on */
.st-b .st-cut-tease { max-width: none; max-height: 150px; margin: 0 -24px; padding: 0 24px; overflow: hidden; pointer-events: none; user-select: none;
  -webkit-mask-image: linear-gradient(#000 25%, transparent); mask-image: linear-gradient(#000 25%, transparent); }
.st-b .st-cut-tease > * { max-width: 680px; margin-top: 0; }
.st-b .st-cut-tease > .st-ex, .st-b .st-cut-tease > .st-meet { max-width: none; }
.st-b .st-cut-card { max-width: none; display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 30px; margin: 8px -24px 0; padding: 30px 32px 28px; background: var(--tint); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .06); }
.st-b .st-cut-art .st-folder { width: 104px; transform: rotate(-4deg); filter: drop-shadow(0 10px 12px rgba(60, 48, 30, .2)); }
.st-b .st-cut-k { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 700 14.5px/1.4 var(--sans); color: var(--orange-ink); }
.st-b .st-cut-k svg { width: 15px; height: 15px; }
.st-b .st-cut-msg { margin: 0 0 20px; font: 400 23px/1.35 var(--serif); font-variation-settings: "opsz" 48; letter-spacing: -.005em; color: var(--ink); }
.st-b .st-cut-left strong { display: block; font: 700 14.5px/1.4 var(--sans); color: rgba(29, 28, 26, .6); }
.st-b .st-cut-left ol { list-style: none; display: grid; gap: 8px; margin: 10px 0 22px; padding: 0; color: var(--ink); }
.st-b .st-cut-left li { display: flex; align-items: center; gap: 12px; margin: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .62); box-shadow: inset 0 0 0 1px rgba(29, 28, 26, .08); font-size: 16.5px; line-height: 1.4; }
.st-b .st-cut-n { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 8px; background: rgba(29, 28, 26, .07); font: 700 13px/1 var(--sans); color: var(--orange-ink); }
.st-b .st-cut-card .st-hero-actions { margin-top: 0; }
/* A Pro lesson without a free taste, and Pro text saved before the card system: on a plain sheet */
.st-b .st-locked, .st-b .st-lbody > .st-sec:not(.st-lpart):not(.st-end) { margin-top: 40px; padding: 48px 60px; background: var(--card); border-radius: var(--b-r); box-shadow: var(--lift-2); }
.st-b .st-lbody > .st-sec:not(.st-lpart):not(.st-end) > * { max-width: none; }
.st-b .st-lbody > .st-sec:not(.st-lpart):not(.st-end) > h2.st-h1 { display: flex; align-items: baseline; gap: 16px; margin: 0 0 22px; font-size: clamp(32px, 3.4vw, 42px); }
.st-b .st-pn { flex: none; font: 500 .62em/1 var(--sans); color: var(--orange-ink); font-variant-numeric: lining-nums tabular-nums; }
.st-b .st-locked .st-buildbox { margin: 18px 0; padding: 18px 20px; border-radius: 14px; background: var(--card-2); }
.st-b .st-locked .st-buildbox strong { display: block; font-weight: 600; }
.st-b .st-lbody > .st-bridge { margin: 40px 4px 0; color: var(--ink-2); }
.st-b .st-sec > .st-topic { display: none; } /* Pro text saved before the change still carries a "Topic N" line */

@media (max-width: 900px) {
  [data-page="lesson"] .st-lhead { padding: 0 2px; }
  .st-b { --tab-w: 76px; --gtab-w: 58px; --b-r: 22px; font-size: 17px; }
  .st-b .st-open { display: block; padding: 28px 22px 26px; border-radius: 24px; }
  .st-b .st-open-art { position: absolute; right: 18px; top: 22px; }
  .st-b .st-open-art .st-folder { width: 84px; margin: 0; }
  .st-b .st-kicker { margin: 4px 0 70px; }
  .st-b .st-open h2.st-h1 { font-size: 46px; }
  .st-b .st-open .st-sub { margin-top: 14px; font-size: 18px; }
  .st-b .st-open .st-lead { margin-top: 18px; }
  .st-b .st-goals-h { margin: 18px 0 -2px; }
  .st-b .st-goals li { margin-top: 26px; }
  .st-b .st-goals a { min-height: 0; padding: 12px 16px; font-size: 16px; }
  .st-b .st-goals .st-gn { top: -24px; height: 26px; font-size: 14px; }
  .st-b .st-lpart { margin-top: 74px; scroll-margin-top: 50px; }
  .st-b .st-div { min-height: 0; padding: 24px 20px 26px; gap: 14px; }
  .st-b .st-div.has-art { grid-template-columns: minmax(0, 1fr) 84px; min-height: 0; }
  .st-b .st-tab { top: -32px; height: 34px; font-size: 16px; border-radius: 12px 12px 0 0; }
  .st-b .st-div h2.st-h1 { font-size: 31px; }
  .st-b .st-div-goal { margin-top: 10px; font-size: 15.5px; }
  .st-b .st-div-art { align-self: start; margin: -2px 0 -40px; }
  .st-b .st-div-art .st-folder { width: 82px; }
  .st-b .st-sheet { padding: 40px 20px 30px; }
  .st-b .st-div:not(.has-art) + .st-sheet { padding-top: 32px; }
  .st-b .st-ex { margin: 24px -12px 30px; padding: 20px 16px 18px 44px; border-radius: 14px; }
  .st-b .st-ex::before { left: 32px; }
  .st-b .st-ex-n { left: -40px; top: 12px; width: 30px; font-size: 18px; }
  .st-b .st-ex-t { font-size: 22px; }
  .st-b .st-ex-prob, .st-b .st-ex-why { font-size: 16px; }
  .st-b .st-ex-math { font-size: 18px; }
  .st-b .st-ex-ans b { font-size: 17px; }
  .st-b .st-ic { margin: 24px -4px 28px; padding: 14px 18px 12px; }
  .st-b .st-ic .st-term, .st-b .st-ic-t { font-size: 21px; }
  .st-b .st-ic-x { font-size: 16px; }
  .st-b .st-ic .st-formula { font-size: 19px; }
  .st-b .st-fig-w { display: none; }
  .st-b .st-fig-n { display: block; }
  .st-b .st-fig.is-wide { margin-left: -6px; margin-right: -6px; }
  .st-b .st-fig figcaption { font-size: 14.5px; }
  :root[data-theme="dark"] .st-b .st-plate { padding: 14px 12px; }
  .st-b .st-predict, .st-b .st-predict.has-art { grid-template-columns: minmax(0, 1fr) 70px; gap: 6px 14px; margin: 32px -12px 32px; padding: 22px 18px 20px; border-radius: 20px; }
  .st-b .st-predict:not(.has-art) { grid-template-columns: minmax(0, 1fr); }
  .st-b .st-q-art { grid-column: 2; grid-row: 1; }
  .st-b .st-q-art .st-folder { width: 64px; }
  .st-b .st-q-main { display: contents; }
  .st-b .st-predict .st-eyebrow { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .st-b .st-predict .st-q, .st-b .st-predict .st-opts, .st-b .st-predict .st-verdict, .st-b .st-predict noscript { grid-column: 1 / -1; }
  .st-b .st-predict .st-q { margin: 2px 0 12px; font-size: 21px; }
  .st-b .st-opt { font-size: 16.5px; }
  .st-b .st-verdict { margin-top: 6px; font-size: 16px; }
  .st-b .st-code { margin: 24px -12px 30px; border-radius: 18px; }
  .st-b .st-code pre { padding: 14px; border-radius: 13px; font-size: 12.5px; }
  .st-b .st-sheet > .st-lab { margin: 28px -12px; }
  .st-b .st-end { margin-top: 72px; scroll-margin-top: 50px; }
  .st-b .st-end > h2.st-h1 { margin-left: 2px; font-size: 32px; }
  .st-b .st-end .st-predict { margin: 14px 0 0; }
  .st-b .st-end > .st-code { margin: 14px 0 0; }
  .st-b .st-meet { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .st-b .st-meet .st-callout { padding: 22px 20px 16px; }
  .st-b .st-sheet > .st-meet { margin: 24px -12px 30px; }
  .st-b .st-sheet > .st-meet:first-child, .st-b .st-sheet > .st-lab:first-child { margin-top: 0; }
  .st-b .st-remember { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; }
  .st-b .st-remember .st-ic { margin: 0; padding: 14px 18px 12px; transform: none !important; }
  .st-b .st-endsheet { padding: 28px 20px 24px; }
  .st-b .st-lfoot { margin-top: 56px; }
  .st-b .st-nextcard { grid-template-columns: minmax(0, 1fr) 86px; gap: 16px; padding: 26px 22px; }
  .st-b .st-nextcard-art { grid-column: 2; grid-row: 1; }
  .st-b .st-nextcard-art .st-folder { width: 80px; }
  .st-b .st-nextcard { row-gap: 10px; }
  .st-b .st-nextcard-main { display: contents; }
  .st-b .st-nextcard small { grid-column: 1; grid-row: 1; align-self: end; }
  .st-b .st-nextcard b { grid-column: 1 / -1; margin: 0; }
  .st-b .st-nextcard-br { grid-column: 1 / -1; }
  .st-b .st-nextcard-go { margin-top: 8px; }
  .st-b .st-nextcard-go { grid-column: 1 / -1; width: 100%; }
  .st-b .st-cut-tease { margin: 0 -12px; padding: 0 12px; }
  .st-b .st-cut-card { grid-template-columns: minmax(0, 1fr) 70px; gap: 6px 14px; margin: 8px -12px 0; padding: 22px 18px 20px; border-radius: 20px; }
  .st-b .st-cut-art { grid-column: 2; grid-row: 1; }
  .st-b .st-cut-art .st-folder { width: 64px; }
  .st-b .st-cut-main { display: contents; }
  .st-b .st-cut-k { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .st-b .st-cut-msg, .st-b .st-cut-left, .st-b .st-cut-card .st-hero-actions { grid-column: 1 / -1; }
  .st-b .st-cut-msg { margin-top: 8px; }
  .st-b .st-cut-msg { font-size: 21px; }
  .st-b .st-cut-card .st-hero-actions .st-btn { flex: 1 1 100%; height: 48px; }
  .st-b .st-locked, .st-b .st-lbody > .st-sec:not(.st-lpart):not(.st-end) { padding: 32px 20px; }
}
.st-b .st-sheet > :first-child, .st-b .st-sheet > .st-meet:first-child, .st-b .st-sheet > .st-lab:first-child { margin-top: 0; }
@media (max-width: 600px) {
  .st-b .st-ex-l { flex-direction: column; gap: 0; }
  .st-b .st-predict .st-opts, .st-b .st-predict.is-grid .st-opts { grid-template-columns: minmax(0, 1fr); gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .st-b .st-goals a, .st-b .st-goals .st-gn, .st-b .st-remember .st-ic, .st-b .st-nextcard, .st-b .st-opt, .st-b .st-code-head button { transition: none; }
  .st-b .st-goals a:hover, .st-b .st-nextcard:hover { transform: none; }
  .st-b .st-predict.locked .st-verdict { animation: none; }
}

/* Text fills the page (11-06, user: keep the page size and let the text go to the right side). The lesson keeps its
   1,060px width; paragraphs, rule cards, example text and captions run the full width of their sheet. */
.st-b .st-ex-prob, .st-b .st-ex-why, .st-b .st-fig figcaption, .st-b .st-open .st-lead, .st-b .st-div-goal { max-width: none; }
/* The licence credit under lessons that adapt the Quant Finance Lectures (CC BY 4.0); it replaced the Credits page. */
.st-b .st-credit { margin: 10px 4px 0; font-size: 13px; color: var(--ink-3); }
.st-b .st-credit a { color: inherit; border-bottom: 1px solid var(--rule-2); }