/* be-vietnam-pro-vietnamese-400-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/be-vietnam-pro-vietnamese-400-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* be-vietnam-pro-latin-ext-400-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/be-vietnam-pro-latin-ext-400-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* be-vietnam-pro-latin-400-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(./files/be-vietnam-pro-latin-400-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* be-vietnam-pro-vietnamese-600-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/be-vietnam-pro-vietnamese-600-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* be-vietnam-pro-latin-ext-600-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/be-vietnam-pro-latin-ext-600-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* be-vietnam-pro-latin-600-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(./files/be-vietnam-pro-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* be-vietnam-pro-vietnamese-700-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/be-vietnam-pro-vietnamese-700-normal.woff2) format('woff2');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* be-vietnam-pro-latin-ext-700-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/be-vietnam-pro-latin-ext-700-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* be-vietnam-pro-latin-700-normal */
@font-face {
  font-family: 'Be Vietnam Pro';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(./files/be-vietnam-pro-latin-700-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}/* Hallmark · genre: editorial · theme: brand · redesign: full · v2.0.0 */
:root {
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem);
  --text-section: clamp(2rem, 2.5vw + 1rem, 3.5rem); --text-title: clamp(1.25rem, 0.75vw + 0.875rem, 1.625rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  --color-paper: #f5f4e9; --color-paper-2: #e9eee4; --color-paper-3: #d9e5d8;
  --color-ink: #143c31; --color-ink-2: #27483b; --color-muted: #536a5b;
  --color-rule: #c5d4c5;
  --color-accent: #126247; --color-accent-ink: #f5f4e9; --color-focus: #ae4e20;
  --font-display: "Be Vietnam Pro", system-ui, sans-serif; --font-body: "Be Vietnam Pro", system-ui, sans-serif; --font-outlier: var(--font-body);
  --radius-card: 4px; --radius-pill: 999px; --rule-hair: 1px; --shadow-card: none;
  --tracking-display: -0.02em;
  --legacy-color-1: #f6f5ed;
  --legacy-color-2: #fffef9;
  --legacy-color-3: #233e33;
  --legacy-color-4: #536357;
  --legacy-color-5: #245b43;
  --legacy-color-6: #17442f;
  --legacy-color-7: #e9eee1;
  --legacy-color-8: #d7dccf;
  --legacy-color-9: #ae4e20;
  --legacy-color-10: #fae5ce;
  --legacy-color-11: #963c32;
  --legacy-color-12: #fffef9;
  --legacy-color-13: #f9be70;
  --legacy-color-14: #f4bd78;
  --legacy-color-15: #f7ce98;
  --legacy-color-16: #83957b;
  --legacy-color-17: #233e3309;
  --legacy-color-18: #edf0e5;
  --legacy-color-19: #5e4028;
  --legacy-color-20: #e2e9db;
  --legacy-color-21: #f5f4e9;
  --legacy-color-22: #143c31;
  --legacy-color-23: #126247;
  --legacy-color-24: #e3eee2;
  --legacy-color-25: #b6502e;
  --legacy-color-26: #cfddcf;
  --legacy-color-27: #fffef9;
  --legacy-color-28: #148060;
  --legacy-color-29: #123e3020;
  --legacy-color-30: #123e32;
  --legacy-color-31: #e0eee4;
  --legacy-color-32: #153e32;
  --legacy-color-33: #d9eddf;
  --legacy-color-34: rgba(8,37,29,.84);
  --legacy-color-35: #c8ead2;
  --legacy-color-36: #d3e3d9;
  --legacy-color-37: #163b3010;
  --legacy-color-38: #163b301c;
  --legacy-color-39: #e6efe3;
  --legacy-color-40: #e6eee3;
  --legacy-color-41: rgba(8,37,29,.88);
  --legacy-color-42: rgba(8,37,29,.12);
  --legacy-color-43: #edf3e9;
  --legacy-color-44: #cfddd0;
  --legacy-color-45: #163b300b;
  --legacy-color-46: #4c6b5b;
  --legacy-color-47: #f4f8f0;
  --legacy-color-48: #e2e9dd;
  --dusk-night: #151e25; --dusk-panel: #202e34; --dusk-panel-deep: #18252c;
  --dusk-ink: #f5f5ed; --dusk-muted: #b7c8c2; --dusk-rule: #40535a;
  --dusk-green: #acd7c4; --dusk-green-deep: #173b31; --dusk-warm: #eac09d;
  --dusk-glass: rgba(24,35,43,.78); --dusk-glass-edge: rgba(240,250,245,.18);
  --dusk-glass-shadow: rgba(5,14,20,.34); --dusk-fog: rgba(248,239,224,.8);
  --dusk-fog-clear: rgba(248,239,224,0); --dusk-fade: rgba(21,30,37,0);
  --dusk-day-ink: #182b2b; --dusk-day-muted: #273e3b; --dusk-well: #e9f0e8;
  --dusk-well-ink: #29483d; --dusk-highlight: rgba(210,240,225,.1);
  --dusk-alert: #f0c1a0; --dusk-focus: #eac09d;
}
/* Hallmark · genre: editorial · theme: brand · redesign: full · v2.0.0 */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 22%, transparent); color: var(--color-ink); }
button:active, a:active { transform: translateY(1px); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 65ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.num, .figure, td.num { font-variant-numeric: tabular-nums; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* Hallmark · shape: Map / Diagram · genre: modern-minimal · theme: dusk (by request) · dusk: ridge/sage-apricot/glass · redesign: full · hero: Counter · nav: slab · footer: letter close · signature: interactive yard · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S5 R4 V4 · weakest: execution, preserve the teaching controls while simplifying their frame */
/* Public cẩm nang: cream paper, green signage, warm orange training car. */
:root {
  --paper:var(--legacy-color-1);
  --surface:var(--legacy-color-2);
  --ink:var(--legacy-color-3);
  --muted:var(--legacy-color-4);
  --green:var(--legacy-color-5);
  --green-hover:var(--legacy-color-6);
  --soft:var(--legacy-color-7);
  --line:var(--legacy-color-8);
  --orange:var(--legacy-color-9);
  --warm:var(--legacy-color-10);
  --danger:var(--legacy-color-11);
  --radius:18px;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  color-scheme:light;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--space-lg);
}
body {
  margin:0;
}
a {
  color:var(--green);
  text-decoration:none;
}
a:hover {
  text-decoration:underline;
  text-underline-offset:4px;
}
button,input {
  font:inherit;
}
button,a,input,summary {
  -webkit-tap-highlight-color:transparent;
}
button,summary {
  cursor:pointer;
}
button {
  color:inherit;
}
img {
  max-width:100%;
  height:auto;
  display:block;
}
figure {
  margin:0;
}
figcaption {
  font-size:13px;
  line-height:1.65;
  color:var(--muted);
  padding:var(--space-md) 0;
}
p,li {
  line-height:1.85;
}
p {
  color:var(--muted);
}
h1,h2,h3 {
  color:var(--ink);
  text-wrap:balance;
}
h1 {
  font-size:clamp(38px,4.6vw,64px);
  letter-spacing:-.055em;
  line-height:1.18;
  font-weight:700;
  margin:var(--space-lg) 0;
}
h2 {
  font-size:clamp(25px,3vw,36px);
  line-height:1.35;
  letter-spacing:-.04em;
  font-weight:600;
  margin:var(--space-xs) 0 20px;
}
h3 {
  font-size:20px;
  line-height:1.5;
  letter-spacing:-.025em;
  font-weight:600;
}
section {
  scroll-margin-top:var(--space-lg);
}
main>section:not(.hero):not(.article-hero) {
  margin-top:88px;
}
:focus-visible {
  outline:3px solid var(--orange);
  outline-offset:5px;
}
summary:focus-visible {
  outline-offset:0;
}
section[id],article[id],details[id] {
  scroll-margin-top:var(--space-lg);
}
.site-shell {
  max-width:1320px;
  margin:auto;
  padding:0 48px;
}
.skip {
  position:fixed;
  left:16px;
  top:-100px;
  z-index:10;
  padding:var(--space-sm) 20px;
  background:var(--ink);
  color:var(--legacy-color-12);
}
.skip:focus {
  top:16px;
}
.topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  min-height:108px;
  border-bottom:1px solid var(--line);
}
.wordmark {
  display:flex;
  align-items:center;
  gap:var(--space-sm);
  font-size:21px;
  font-weight:700;
  letter-spacing:-.04em;
  white-space:nowrap;
  line-height:1.3;
}
.wordmark:hover {
  text-decoration:none;
}
.wordmark small {
  display:block;
  font-size:11px;
  letter-spacing:.015em;
  color:var(--muted);
  font-weight:400;
  margin-top:var(--space-2xs);
}
.brand-mark {
  position:relative;
  display:grid;
  place-items:center;
  width:42px;
  height:46px;
  background:var(--green);
  color:var(--paper);
  border-radius:8px;
  font-size:27px;
  letter-spacing:-.1em;
  padding-right:var(--space-xs);
}
.brand-mark span {
  position:absolute;
  font-size:18px;
  right:5px;
  top:6px;
  color:var(--legacy-color-13);
}
.topbar nav {
  display:flex;
  gap:28px;
  font-size:13px;
  font-weight:600;
  align-items:center;
}
.topbar nav a {
  padding:var(--space-md) 0;
}
.header-action {
  font-size:13px;
  border:1px solid var(--green);
  border-radius:8px;
  padding:var(--space-sm) var(--space-md);
  white-space:nowrap;
  font-weight:600;
}
.header-action span {
  margin-left:var(--space-xs);
}
.header-action:hover {
  background:var(--soft);
  text-decoration:none;
}
.hero {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:48px;
  align-items:center;
  padding:36px 0 32px;
}
.eyebrow,.section-kicker {
  font-size:11px;
  letter-spacing:0;
  font-weight:700;
  color:var(--green);
  line-height:1.8;
}
.eyebrow {
  display:inline-flex;
  align-items:center;
  gap:var(--space-xs);
}
.eyebrow>span {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--orange);
}

.hero-copy>p {
  max-width:440px;
  font-size:16px;
  margin:var(--space-lg) 0 28px;
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:var(--space-lg);
  flex-wrap:wrap;
}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-lg);
  min-height:50px;
  background:var(--green);
  color:var(--legacy-color-2);
  border:1px solid transparent;
  border-radius:9px;
  padding:var(--space-md) var(--space-lg);
  font-size:14px;
  font-weight:600;
  line-height:1.6;
  transition:background .18s;
}
.button:hover {
  background:var(--green-hover);
  text-decoration:none;
}
.button-light {
  background:var(--legacy-color-14);
  color:var(--ink);
}
.button-light:hover {
  background:var(--legacy-color-15);
}
.text-link {
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px;
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:5px;
}
.hero-facts {
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-xs) var(--space-md);
  color:var(--muted);
  font-size:11px;
  margin-top:32px;
}
.hero-facts span+span:before {
  content:"/";
  margin-right:var(--space-md);
  color:var(--legacy-color-16);
}
.workspace {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  box-shadow:0 15px 42px var(--legacy-color-17);
}
.stage {
  position:relative;
  background:var(--legacy-color-18);
}
.stage>img {
  aspect-ratio:16/9;
  object-fit:cover;
}
.stage-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-xs);
  padding:var(--space-xs) var(--space-md);
  border-bottom:1px solid var(--line);
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
}
.stage-view-toggle {
  display:flex;
  gap:var(--space-2xs);
}
.stage-view-toggle button {
  border:0;
  border-radius:6px;
  padding:var(--space-xs) var(--space-sm);
  min-height:44px;
  background:transparent;
  color:var(--muted);
  font-size:11px;
  font-weight:600;
  letter-spacing:0;
}
.stage-view-toggle button[aria-pressed=true] {
  background:var(--green);
  color:var(--legacy-color-12);
}
.stage-index {
  position:absolute;
  bottom:12px;
  left:16px;
  padding:var(--space-xs) var(--space-xs);
  background:var(--surface);
  font-size:11px;
  font-weight:600;
  border-radius:5px;
}
.workspace-details {
  padding:var(--space-lg) var(--space-lg);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:var(--space-xs) var(--space-md);
}
.workspace-details>div {
  grid-column:1/-1;
}
.detail-meta {
  display:flex;
  justify-content:space-between;
  gap:var(--space-sm);
  font-size:10px;
  font-weight:700;
  letter-spacing:.07em;
  color:var(--muted);
}
#studio-access {
  color:var(--green);
  background:var(--soft);
  padding:var(--space-2xs) var(--space-xs);
  border-radius:4px;
  letter-spacing:0;
}
.workspace-details h2 {
  font-size:24px;
  margin:var(--space-xs) 0;
}
.workspace-details p {
  font-size:13px;
  margin:0 0 var(--space-xs);
  min-height:24px;
}
.workspace-details .button {
  font-size:12px;
  min-height:44px;
  padding:var(--space-xs) var(--space-md);
  white-space:nowrap;
}
.app-note {
  font-size:11px;
  line-height:1.7;
  color:var(--muted);
  margin:var(--space-xs) 0;
}
.workspace-details .app-note {
  margin:0;
  font-size:10px;
  max-width:145px;
}
.lesson-picks {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--line);
}
.lesson-picks button {
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:var(--space-xs);
  padding:var(--space-md) var(--space-2xs);
  font-size:11px;
  min-height:52px;
  white-space:nowrap;
}
.lesson-picks button:last-child {
  border-right:0;
}
.lesson-picks button span {
  font-size:10px;
  opacity:.8;
}
.lesson-picks button:hover {
  background:var(--soft);
}
.lesson-picks button[aria-pressed=true] {
  background:var(--soft);
  box-shadow:inset 0 -3px var(--green);
  font-weight:700;
}
.reading-strip {
  display:flex;
  justify-content:space-between;
  gap:var(--space-lg);
  align-items:center;
  padding:var(--space-lg) 0;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  font-size:12px;
}
.reading-strip b {
  font-weight:600;
}
.reading-strip p {
  font-size:11px;
  margin:0;
}
.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:var(--space-lg);
  margin-bottom:28px;
}
.section-heading h2 {
  margin-bottom:0;
}
.section-heading>p {
  font-size:12px;
  margin:0;
}
.lesson-table {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--line);
  column-gap:var(--space-xl);
}
.lesson-table article {
  display:grid;
  grid-template-columns:32px 1fr auto;
  align-items:start;
  gap:var(--space-md);
  padding:var(--space-lg) 0;
  border-bottom:1px solid var(--line);
}
.row-num {
  font-size:13px;
  line-height:2.1;
  color:var(--orange);
  font-weight:600;
}
.row-title h3 {
  font-size:16px;
  margin:0;
}
.row-title p {
  font-size:12px;
  line-height:1.7;
  margin:var(--space-2xs) 0 0;
  max-width:340px;
}
.row-title .text-link {
  font-size:11px;
  min-height:44px;
}
.row-title details {
  font-size:13px;
}
.row-title details summary {
  min-height:44px;
  display:flex;
  align-items:center;
}
.row-title details:not([open]):target {
  border-left:2px solid var(--green);
  padding-left:var(--space-sm);
}
.lesson-status {
  font-size:10px;
  color:var(--green);
  background:var(--soft);
  padding:var(--space-2xs) var(--space-xs);
  border-radius:4px;
  white-space:nowrap;
}
.fine-print {
  font-size:12px;
  max-width:900px;
}
.tactics-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.tactic-card {
  padding:var(--space-lg);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.tactic-num {
  font-size:11px;
  font-weight:600;
  color:var(--orange);
  letter-spacing:0;
}
.tactic-card h3 {
  margin:var(--space-md) 0 var(--space-sm);
}
.tactic-card p {
  font-size:13px;
  margin:0 0 var(--space-md);
}
.tactic-observe {
  background:var(--soft);
  border-radius:8px;
  padding:var(--space-md);
  margin-bottom:var(--space-md);
}
.tactic-observe b {
  font-size:11px;
  color:var(--green);
}
.tactic-observe p {
  margin:var(--space-2xs) 0 0;
}
.tactic-card>a {
  display:flex;
  justify-content:space-between;
  width:100%;
  font-size:12px;
  font-weight:600;
  margin-top:auto;
  padding:var(--space-md) 0 0;
  min-height:44px;
  border-top:1px solid var(--line);
}
.penalties-columns {
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:32px;
}
.penalty-box {
  background:var(--warm);
  border-radius:var(--radius);
  padding:28px;
}
.penalty-box h3 {
  margin:0 0 20px;
}
.penalty-box ul {
  margin:0;
  padding-left:var(--space-md);
  font-size:13px;
}
.penalty-box li {
  padding:0 0 var(--space-xs);
  color:var(--legacy-color-19);
}
.deduction-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border-bottom:1px solid var(--line);
  padding:var(--space-md) 0;
}
.deduction-row:first-child {
  padding-top:0;
}
.deduction-row b {
  font-size:13px;
}
.deduction-row p {
  font-size:12px;
  margin:var(--space-2xs) 0 0;
}
.deduction-row>strong {
  font-size:13px;
  color:var(--orange);
  white-space:nowrap;
}
.calc-widget {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:32px;
  background:var(--surface);
  padding:28px;
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.calc-items-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
}
.calc-item {
  display:flex;
  gap:var(--space-sm);
  align-items:start;
  padding:var(--space-md);
  border:1px solid var(--line);
  border-radius:8px;
  cursor:pointer;
  font-size:12px;
  line-height:1.7;
  min-height:64px;
}
.calc-item:hover,.calc-item:has(input:checked) {
  border-color:var(--green);
  background:var(--soft);
}
.calc-item input {
  width:18px;
  height:18px;
  flex:none;
  margin:var(--space-2xs) 0 0;
  accent-color:var(--green);
}
.calc-item small {
  display:block;
  color:var(--orange);
  font-size:11px;
  margin-top:var(--space-2xs);
}
.calc-reset {
  border:0;
  background:transparent;
  justify-self:start;
  padding:0;
  min-height:44px;
  font-family:var(--font-body);
  color:var(--green);
}
.calc-result-panel {
  background:var(--soft);
  padding:var(--space-lg);
  border-radius:12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.score-val {
  font-size:64px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:-.05em;
  margin:var(--space-xs) 0;
}
.score-val small {
  font-size:16px;
  letter-spacing:0;
  color:var(--muted);
}
.score-badge {
  font-size:12px;
  line-height:1.6;
  color:var(--green);
}
.score-badge.fail {
  color:var(--danger);
}
.calc-result-panel p {
  font-size:12px;
  margin:var(--space-xs) 0 0;
}
.faq-list {
  border-top:1px solid var(--line);
}
.faq-list details {
  border-bottom:1px solid var(--line);
}
.faq-list summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-lg);
  list-style:none;
  min-height:72px;
  padding:20px 0;
  font-size:15px;
  font-weight:600;
  line-height:1.7;
}
.faq-list summary::-webkit-details-marker {
  display:none;
}
.faq-list summary>span {
  font-size:22px;
  font-weight:400;
  flex:none;
  color:var(--green);
}
.faq-list details[open] summary>span {
  transform:rotate(45deg);
}
.faq-list p {
  font-size:14px;
  max-width:850px;
  margin:0 0 var(--space-lg);
}
.referral-close {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:32px;
  background:var(--green);
  color:var(--paper);
  padding:var(--space-xl);
  border-radius:var(--radius);
}
.referral-close .section-kicker {
  color:var(--legacy-color-14);
}
.referral-close h2 {
  color:var(--paper);
  font-size:30px;
  margin-bottom:var(--space-xs);
}
.referral-close p {
  color:var(--legacy-color-20);
  font-size:13px;
  margin:0;
}
.referral-close .button {
  flex:none;
}
.source-note {
  border-top:1px solid var(--line);
  padding-top:32px;
  max-width:900px;
}
.source-note h2 {
  font-size:25px;
}
.source-note p,.source-note li {
  font-size:12px;
}
.source-note ul {
  padding-left:var(--space-md);
}
.source-note a {
  text-decoration:underline;
  text-underline-offset:4px;
  display:inline-block;
  padding:var(--space-xs) 0;
}
.footer {
  display:flex;
  justify-content:space-between;
  gap:var(--space-xl);
  border-top:1px solid var(--line);
  margin-top:var(--space-2xl);
  padding:var(--space-xl) 0;
}
.footer-brand {
  font-size:21px;
  letter-spacing:-.04em;
  font-weight:700;
}
.footer-brand span {
  font-size:12px;
  margin-left:var(--space-xs);
  font-weight:400;
}
.footer p {
  font-size:11px;
  margin:var(--space-sm) 0;
}
.footer nav {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 28px;
  align-items:center;
  font-size:12px;
}
.footer nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.breadcrumbs {
  display:flex;
  gap:var(--space-sm);
  align-items:center;
  font-size:12px;
  margin-top:32px;
  color:var(--muted);
  flex-wrap:wrap;
}
.breadcrumbs a {
  min-height:44px;
  display:flex;
  align-items:center;
}
.article-hero {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:48px;
  padding:20px 0 var(--space-xl);
}
.article-hero h1 {
  font-size:clamp(32px,3.5vw,47px);
  letter-spacing:-.045em;
  margin:var(--space-md) 0;
}
.hero-subtitle {
  font-size:15px;
  margin:0 0 var(--space-lg);
}
.article-hero figure {
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--surface);
}
.article-hero figure img {
  aspect-ratio:16/9;
  object-fit:cover;
}
.article-hero figcaption {
  padding:var(--space-md) var(--space-md);
  font-size:11px;
}
.byline {
  font-size:11px;
  line-height:1.8;
  margin:var(--space-md) 0 0;
}
.article-layout {
  display:grid;
  grid-template-columns:minmax(0,850px) 220px;
  gap:var(--space-2xl);
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:32px;
}
.article-content>section {
  margin-top:56px;
}
.article-content h2 {
  font-size:28px;
}
.direct-answer-box {
  border-left:3px solid var(--green);
  padding:20px var(--space-lg);
  background:var(--soft);
  border-radius:0 12px 12px 0;
}
.direct-answer-box strong {
  font-size:12px;
  color:var(--green);
}
.direct-answer-box p {
  font-size:15px;
  margin:var(--space-xs) 0 0;
}
.specs-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--space-md);
  margin-top:var(--space-lg);
}
.specs-grid>div {
  padding:var(--space-md) 0;
  border-top:1px solid var(--line);
}
.specs-grid span {
  display:block;
  font-size:11px;
  color:var(--muted);
  margin-bottom:var(--space-xs);
}
.specs-grid b {
  font-size:13px;
  line-height:1.7;
  display:block;
}
.article-nav {
  position:sticky;
  top:24px;
  padding:var(--space-md) 0;
}
.article-nav nav {
  display:flex;
  flex-direction:column;
  margin:var(--space-md) 0;
}
.article-nav a {
  display:flex;
  align-items:center;
  min-height:44px;
  font-size:12px;
}
.article-nav p {
  font-size:11px;
  line-height:1.8;
  border-top:1px solid var(--line);
  padding-top:var(--space-md);
}
.observation-board {
  padding:20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.observation-diagram {
  width:100%;
  height:auto;
  display:block;
}
.observation-board figcaption {
  font-size:11px;
  padding:var(--space-sm) 0;
}
.observation-board ol {
  list-style:none;
  counter-reset:observations;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  padding:var(--space-md) 0 0;
  margin:0;
  border-top:1px solid var(--line);
}
.observation-board li {
  font-size:12px;
  counter-increment:observations;
}
.observation-board li:before {
  content:counter(observations);
  display:grid;
  place-items:center;
  background:var(--green);
  color:var(--legacy-color-12);
  border-radius:50%;
  width:24px;
  height:24px;
  margin-bottom:var(--space-xs);
  font-size:11px;
}
.photo-detail {
  border-bottom:1px solid var(--line);
  margin-top:var(--space-md);
}
.photo-detail summary {
  font-size:13px;
  font-weight:600;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  list-style:none;
}
.photo-detail summary::-webkit-details-marker {
  display:none;
}
.visual-figure img {
  border-radius:12px;
}
.steps-timeline {
  border-top:1px solid var(--line);
}
.timeline-step {
  display:flex;
  align-items:start;
  gap:var(--space-lg);
  padding:var(--space-lg) 0;
  border-bottom:1px solid var(--line);
}
.timeline-step>span {
  font-size:13px;
  color:var(--orange);
  font-weight:600;
  line-height:2;
  flex:none;
}
.timeline-step h3 {
  font-size:18px;
  margin:0 0 var(--space-xs);
}
.timeline-step p {
  font-size:15px;
  margin:0;
}
.troubleshoot-card {
  padding:var(--space-lg);
  margin:var(--space-md) 0;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:12px;
}
.troubleshoot-card h3 {
  font-size:17px;
  margin:0 0 var(--space-md);
}
.troubleshoot-card p {
  font-size:14px;
  margin:var(--space-sm) 0 0;
}
.troubleshoot-card b {
  color:var(--green);
}
.related-guides {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--space-2xs) var(--space-lg);
  margin-top:32px;
  padding-top:var(--space-lg);
  border-top:1px solid var(--line);
}
.related-guides a {
  font-size:12px;
  min-height:44px;
  display:flex;
  align-items:center;
}
.error-page {
  padding-top:100px;
}
[hidden] {
  display:none!important;
}
@media(min-width:1400px) {
  .hero {
    gap:var(--space-2xl);
    padding-top:var(--space-2xl);
  }
  .hero-copy h1 {
    font-size:66px;
  }
}
@media(max-width:1100px) {
  .site-shell {
    padding:0 32px;
  }
  .topbar {
    gap:20px;
  }
  .topbar nav {
    gap:20px;
  }
  .hero {
    gap:32px;
  }
  .hero-copy h1 {
    font-size:46px;
  }
  .workspace-details {
    padding:20px;
  }
  .workspace-details h2 {
    font-size:22px;
  }
  .workspace-details .app-note {
    max-width:115px;
  }
  .hero-actions {
    gap:var(--space-md);
  }
  .hero-facts {
    gap:var(--space-xs) var(--space-sm);
  }
  .hero-facts span+span:before {
    margin-right:var(--space-sm);
  }
  .tactic-card {
    padding:var(--space-lg);
  }
  .article-layout {
    grid-template-columns:minmax(0,1fr) 180px;
    gap:36px;
  }
  .article-hero {
    gap:32px;
  }
  .article-hero h1 {
    font-size:36px;
  }
  .calc-items-grid {
    grid-template-columns:1fr;
  }
  .calc-widget {
    grid-template-columns:1.3fr 1fr;
  }
}
@media(max-width:900px) {
  .topbar nav a:nth-child(2) {
    display:none;
  }
  .hero {
    gap:var(--space-lg);
    grid-template-columns:.95fr 1.05fr;
  }
  .hero-copy h1 {
    font-size:40px;
  }
  .hero-copy>p {
    font-size:14px;
  }
  .workspace-details {
    display:block;
  }
  .workspace-details .app-note {
    max-width:none;
    margin-top:var(--space-xs);
  }
  .lesson-picks button {
    font-size:10px;
    gap:var(--space-2xs);
  }
  .lesson-picks button span {
    display:none;
  }
  .reading-strip {
    display:block;
  }
  .reading-strip p {
    margin-top:var(--space-2xs);
  }
  .tactics-grid {
    grid-template-columns:1fr;
  }
  .tactic-card {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 var(--space-lg);
  }
  .tactic-card .tactic-num,.tactic-card h3,.tactic-card>a {
    grid-column:1/-1;
  }
  .tactic-observe {
    grid-row:3/5;
    grid-column:2;
    align-self:start;
  }
  .penalties-columns {
    gap:var(--space-lg);
  }
  .article-layout {
    display:block;
  }
  .article-nav {
    display:none;
  }
  .article-hero h1 {
    font-size:33px;
  }
}
@media(max-width:760px) {
  .site-shell {
    padding:0 20px;
  }
  .topbar {
    min-height:88px;
    flex-wrap:wrap;
    gap:var(--space-xs) var(--space-md);
    padding:var(--space-md) 0;
  }
  .wordmark {
    font-size:18px;
  }
  .brand-mark {
    width:36px;
    height:40px;
    font-size:24px;
  }
  .wordmark small {
    font-size:10px;
  }
  .header-action {
    padding:var(--space-xs) var(--space-sm);
    font-size:11px;
  }
  .header-action span {
    margin-left:var(--space-2xs);
  }
  .topbar nav {
    order:3;
    width:100%;
    justify-content:space-between;
    gap:var(--space-xs);
    border-top:1px solid var(--line);
    margin-top:var(--space-xs);
    padding-top:var(--space-2xs);
    font-size:11px;
  }
  .topbar nav a:nth-child(2) {
    display:inline-block;
  }
  .topbar nav a {
    min-height:44px;
    display:flex;
    align-items:center;
  }
  .hero {
    grid-template-columns:1fr;
    gap:32px;
    padding:36px 0 32px;
  }
  .hero-copy h1 {
    font-size:clamp(38px,8.8vw,54px);
    line-height:1.16;
    margin:var(--space-md) 0;
  }
  .hero-copy h1 {
    font-size:36px;
    text-wrap:initial;
  }
  .hero-copy>p {
    font-size:15px;
    margin:var(--space-md) 0 var(--space-lg);
    max-width:520px;
  }
  .hero-facts {
    display:none;
  }
  .hero-actions .text-link {
    font-size:12px;
  }
  .hero-actions {
    gap:20px;
  }
  .workspace-details {
    padding:20px;
  }
  .workspace-details h2 {
    font-size:24px;
  }
  .workspace-details>div {
    min-height:113px;
  }
  .workspace-details p {
    font-size:14px;
  }
  .workspace-details .app-note {
    display:inline-block;
    max-width:140px;
    font-size:10px;
    margin:0 0 0 var(--space-sm);
    vertical-align:middle;
  }
  .stage-top {
    padding:var(--space-xs) var(--space-sm);
  }
  .stage-view-toggle button {
    min-height:44px;
  }
  .lesson-picks button {
    font-size:11px;
    min-height:52px;
    white-space:normal;
  }
  .reading-strip {
    font-size:12px;
  }
  .reading-strip p {
    font-size:12px;
    line-height:1.7;
  }
  .section-heading {
    display:block;
    margin-bottom:var(--space-lg);
  }
  .section-heading>p {
    font-size:13px;
    margin-top:var(--space-md);
  }
  .section-heading p br {
    display:none;
  }
  .section-heading>a {
    margin-top:var(--space-sm);
  }
  .section-kicker,.eyebrow {
    font-size:10px;
  }
  main>section:not(.hero):not(.article-hero) {
    margin-top:56px;
  }
  .lesson-table {
    grid-template-columns:1fr;
  }
  .lesson-table article {
    grid-template-columns:25px minmax(0,1fr) auto;
    gap:var(--space-xs);
    padding:var(--space-lg) 0;
  }
  .row-title h3 {
    font-size:16px;
  }
  .row-title p {
    font-size:13px;
  }
  .row-title .text-link {
    font-size:12px;
    min-height:44px;
  }
  .lesson-status {
    font-size:9px;
    padding:var(--space-2xs) var(--space-2xs);
  }
  .row-title details summary {
    font-size:13px;
  }
  .tactic-card {
    display:flex;
    padding:var(--space-lg);
  }
  .tactic-card p {
    font-size:14px;
  }
  .tactic-card h3 {
    font-size:21px;
  }
  .tactic-card>a {
    font-size:13px;
  }
  .tactic-observe {
    margin-top:var(--space-2xs);
  }
  .penalties-columns,.calc-widget {
    grid-template-columns:1fr;
    gap:var(--space-lg);
  }
  .penalty-box {
    padding:var(--space-lg);
  }
  .penalty-box li {
    font-size:14px;
  }
  .deduction-row b {
    font-size:14px;
  }
  .deduction-row p {
    font-size:13px;
  }
  .calc-widget {
    padding:20px;
  }
  .calc-item {
    font-size:14px;
    padding:var(--space-md);
  }
  .calc-item small {
    font-size:12px;
  }
  .calc-result-panel p {
    font-size:13px;
  }
  .faq-list summary {
    font-size:15px;
    min-height:76px;
  }
  .faq-list p {
    font-size:15px;
  }
  .referral-close {
    padding:28px var(--space-lg);
    display:block;
  }
  .referral-close h2 {
    font-size:27px;
  }
  .referral-close p {
    font-size:14px;
  }
  .referral-close .button {
    margin-top:var(--space-lg);
    display:flex;
  }
  .source-note p,.source-note li {
    font-size:13px;
  }
  .source-note h2 {
    font-size:25px;
  }
  .footer {
    display:block;
    margin-top:44px;
    padding:32px 0;
  }
  .footer nav {
    margin-top:var(--space-lg);
    gap:0 var(--space-md);
  }
  .footer p {
    font-size:12px;
  }
  .footer nav a {
    font-size:12px;
  }
  .breadcrumbs {
    margin-top:var(--space-md);
  }
  .article-hero {
    grid-template-columns:1fr;
    gap:20px;
    padding-top:var(--space-sm);
    padding-bottom:var(--space-lg);
  }
  .article-hero h1 {
    font-size:35px;
    line-height:1.25;
  }
  .hero-subtitle {
    font-size:16px;
  }
  .article-hero .app-note {
    font-size:12px;
  }
  .byline {
    font-size:12px;
  }
  .article-hero figcaption {
    font-size:12px;
  }
  .article-layout {
    padding-top:var(--space-lg);
  }
  .direct-answer-box {
    padding:20px;
  }
  .direct-answer-box p {
    font-size:16px;
  }
  .specs-grid {
    grid-template-columns:1fr;
    gap:0;
  }
  .specs-grid>div {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:var(--space-md) 0;
  }
  .specs-grid span {
    margin:0;
    font-size:12px;
  }
  .specs-grid b {
    font-size:13px;
    text-align:right;
  }
  .article-content>section {
    margin-top:44px;
  }
  .article-content h2 {
    font-size:27px;
  }
  .observation-board {
    padding:var(--space-md);
  }
  .observation-board ol {
    grid-template-columns:1fr;
    gap:var(--space-md);
  }
  .observation-board li {
    display:flex;
    gap:var(--space-sm);
    align-items:start;
    font-size:14px;
    line-height:1.7;
  }
  .observation-board li:before {
    flex:none;
    margin:0;
  }
  .observation-board figcaption {
    font-size:12px;
  }
  .photo-detail summary {
    font-size:13px;
  }
  .timeline-step {
    gap:var(--space-md);
    padding:var(--space-lg) 0;
  }
  .timeline-step h3 {
    font-size:18px;
  }
  .timeline-step p {
    font-size:16px;
  }
  .troubleshoot-card {
    padding:20px;
  }
  .troubleshoot-card p {
    font-size:15px;
  }
  .related-guides {
    gap:0 20px;
  }
}
@media(max-width:370px) {
  .site-shell {
    padding:0 var(--space-md);
  }
  .hero-copy h1 {
    font-size:36px;
  }
  .wordmark {
    gap:var(--space-xs);
    font-size:16px;
  }
  .header-action {
    font-size:10px;
  }
  .workspace-details .app-note {
    display:block;
    margin:var(--space-xs) 0 0;
    max-width:none;
  }
  .hero-actions {
    gap:var(--space-sm);
  }
  .hero-actions .button {
    font-size:12px;
    padding:var(--space-sm) var(--space-md);
  }
  .hero-actions .text-link {
    font-size:11px;
  }
  .lesson-picks button {
    font-size:10px;
  }
  .article-hero h1 {
    font-size:30px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
  }
}
.row-title details summary {
  font-size:12px;
  font-weight:600;
  color:var(--green);
  justify-content:space-between;
  gap:var(--space-md);
  list-style:none;
}
.row-title details summary::-webkit-details-marker {
  display:none;
}
.row-title details summary span {
  font-size:16px;
}
.row-title details[open] summary span {
  transform:rotate(45deg);
}
@media(max-width:760px) {
  .hero-copy h1>br {
    display:none;
  }

}

.lesson-select { display:flex; flex-direction:column; gap:var(--space-xs); align-items:flex-end; min-width:52px; min-height:58px; font-size:11px; font-weight:600; }

.hero-copy h1 > br {
  display:none;
}

/* The new route-and-car mark replaces the temporary letter tile. */
.brand-logo { width:48px; height:48px; flex:none; border-radius:10px; }
.footer-brand { display:inline-flex; align-items:center; gap:var(--space-xs); }
.footer-brand img { width:32px; height:32px; flex:none; border-radius:7px; }
@media(max-width:760px) { .brand-logo { width:42px; height:42px; } }

/* Knowledge entry points and readable mobile contents. */
.knowledge-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-md);margin-top:32px}
.knowledge-paths a,.knowledge-card{display:block;border:1px solid var(--line);border-radius:16px;padding:var(--space-lg);text-decoration:none;color:inherit;background:var(--legacy-color-2)}
.knowledge-paths b{display:block;font-size:18px;color:var(--legacy-color-5)}.knowledge-paths span{display:block;margin-top:var(--space-xs);font-size:14px;line-height:1.6}
.knowledge-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.knowledge-card h3{font-size:21px;line-height:1.5;margin:var(--space-sm) 0;color:var(--legacy-color-5)}.knowledge-card p{font-size:14px;line-height:1.8;margin:var(--space-sm) 0 20px}
.knowledge-card:hover,.knowledge-paths a:hover{border-color:var(--legacy-color-5)}.knowledge-card:focus-visible,.knowledge-paths a:focus-visible{outline:3px solid var(--legacy-color-9);outline-offset:4px}
.mobile-toc{display:none}.mobile-toc summary{padding:var(--space-md);cursor:pointer;font-weight:700}.mobile-toc nav{display:grid;padding:0 var(--space-md) var(--space-md);gap:var(--space-xs)}.mobile-toc a{display:flex;align-items:center;min-height:44px}
.error-index{display:grid;gap:var(--space-md)}.error-index article{border:1px solid var(--line);padding:20px;border-radius:12px}.error-index h3{margin-top:0}.error-index a{display:inline-flex;align-items:center;min-height:44px}
@media(max-width:1100px){.topbar{flex-wrap:wrap}.topbar nav{gap:var(--space-md)}.knowledge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.topbar nav a:nth-child(2){display:flex}.mobile-toc{display:block;border:1px solid var(--line);border-radius:12px;margin:var(--space-lg) 0}}
@media(max-width:760px){.knowledge-paths,.knowledge-grid{grid-template-columns:1fr}.knowledge-paths{gap:var(--space-sm)}.knowledge-card,.knowledge-paths a{padding:20px}.knowledge-card h3{font-size:19px}.topbar nav{flex-wrap:wrap;justify-content:flex-start;gap:0 20px}.topbar nav a{font-size:12px;min-height:44px}.hero-actions{flex-wrap:wrap}.article-hero h1{overflow-wrap:anywhere}}

/* Editorial identity and purpose-drawn lesson artwork. */
:root{--paper:var(--legacy-color-21);--surface:var(--legacy-color-2);--ink:var(--legacy-color-22);--green:var(--legacy-color-23);--soft:var(--legacy-color-24);--orange:var(--legacy-color-25);--line:var(--legacy-color-26)}
.topbar{min-height:94px}.header-action{background:var(--legacy-color-22);color:var(--legacy-color-27);border-radius:999px;padding:var(--space-md) 20px}.header-action:hover{background:var(--legacy-color-23);color:var(--legacy-color-12)}
.hero{gap:48px;padding-top:56px}.hero-copy h1{letter-spacing:-.065em}.button{border-radius:999px;padding-inline:var(--space-lg)}.workspace{border-radius:24px;box-shadow:0 24px 60px var(--legacy-color-29)}.stage>img{width:100%;aspect-ratio:600/410;object-fit:cover}.stage-top{background:var(--legacy-color-30);color:var(--legacy-color-31);border:0;padding:var(--space-md) 20px}.stage-index{background:var(--legacy-color-32);color:var(--legacy-color-12)}.lesson-picks button[aria-pressed=true]{background:var(--legacy-color-33)}
.hero-photo{height:330px;position:relative;border-radius:24px;overflow:hidden;margin:28px 0 0;background:var(--legacy-color-30)}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 58%}.hero-photo:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,var(--legacy-color-34),transparent 78%)}.hero-photo div{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;padding:clamp(var(--space-lg),5vw,var(--space-2xl));color:var(--legacy-color-27)}.hero-photo span{font-size:11px;letter-spacing:.14em;font-weight:700;color:var(--legacy-color-35)}.hero-photo strong{font-size:clamp(26px,3.5vw,46px);line-height:1.2;letter-spacing:-.04em;margin:var(--space-sm) 0}.hero-photo small{font-size:11px;color:var(--legacy-color-36)}
.knowledge-card,.knowledge-paths a{background:var(--legacy-color-27);border-radius:20px;box-shadow:0 8px 30px var(--legacy-color-37);transition:transform .2s,box-shadow .2s}.knowledge-card:hover,.knowledge-paths a:hover{transform:translateY(-3px);box-shadow:0 14px 34px var(--legacy-color-38);text-decoration:none}.lesson-thumb{width:100%;height:145px;object-fit:cover;border-radius:12px;margin-bottom:var(--space-md)}.article-hero figure img{width:100%;aspect-ratio:600/410}.step-figure{margin:var(--space-md) 0;background:var(--legacy-color-39);border-radius:16px;overflow:hidden}.step-art{display:block;width:100%;height:auto}.step-figure figcaption{padding:var(--space-sm) var(--space-md);font-size:11px}.timeline-step>div{min-width:0;flex:1}.timeline-step{gap:var(--space-lg)}.timeline-step>span{background:var(--legacy-color-40);border-radius:50%;width:42px;height:42px;display:grid;place-items:center;color:var(--legacy-color-23)}.timeline-step h3{padding-top:var(--space-xs)}
@media(max-width:760px){.hero{padding-top:32px}.hero-photo{height:250px;margin-top:var(--space-md)}.hero-photo:after{background:linear-gradient(90deg,var(--legacy-color-41),var(--legacy-color-42))}.lesson-thumb{height:120px}.timeline-step{gap:var(--space-md)}.timeline-step>span{width:34px;height:34px;font-size:11px}.timeline-step h3{padding-top:var(--space-2xs)}}

.observation-board svg{display:block;width:100%;height:auto;border-radius:12px}

/* A calm, unified teaching canvas; motion is decorative and optional. */
.step-figure{background:var(--legacy-color-43);border:1px solid var(--legacy-color-44);box-shadow:0 12px 32px var(--legacy-color-45)}
.step-figure figcaption{color:var(--legacy-color-46);background:var(--legacy-color-47);font-size:12px;line-height:1.7;padding:var(--space-md) var(--space-md)}
.step-art .flow-chevron{animation:guide-pulse 2.4s ease-in-out infinite}
.step-art .flow-16{animation-delay:.3s}.step-art .flow-24{animation-delay:.6s}
@keyframes guide-pulse{0%,100%{opacity:.45}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){.step-art .flow-chevron{animation:none}}

/* Fixed course overview: preserve the complete map when it becomes portrait. */
.stage>img,.article-hero figure img{object-fit:contain;background:var(--legacy-color-48)}
.step-art{max-height:640px}

/* Hallmark redesign: the yard is the lead, the lessons read as an index. */
html,body{overflow-x:clip}
h1,h2,h3{overflow-wrap:break-word;min-width:0}
.site-shell{max-width:1320px}
.topbar{min-height:84px;border-bottom:2px solid var(--ink)}
.wordmark{letter-spacing:-.035em}.topbar nav{gap:32px}.header-action,.button{border-radius:2px;box-shadow:none}
.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-2xl);padding:44px 0 48px;align-items:center}
.hero-copy h1{font-size:clamp(48px,5.7vw,76px);line-height:1.08;max-width:10ch;letter-spacing:-.06em}
.hero-copy>p{font-size:18px;line-height:1.6;max-width:28ch;margin:var(--space-lg) 0}
.hero-facts{padding-top:20px;border-top:1px solid var(--line);font-size:13px}
.hero-facts span+span:before{content:"";margin:0}
.workspace{border:0;border-radius:0;box-shadow:none;background:var(--surface)}
.stage{border:0}.stage-top{background:var(--ink);padding:var(--space-sm) var(--space-md);letter-spacing:0;font-size:12px;text-transform:lowercase}
.stage>img{height:270px;width:100%;object-fit:contain;background:var(--soft)}
.stage-index{border-radius:0;background:var(--ink);color:var(--surface)}
.workspace-details{padding:var(--space-md) 20px;gap:var(--space-xs) var(--space-md)}.workspace-details h2{font-size:22px;margin:var(--space-2xs) 0}.workspace-details p{margin:0}
.workspace-details .button{border-radius:2px}.detail-meta{font-size:11px;letter-spacing:0;text-transform:lowercase}
.lesson-picks button{min-height:48px;letter-spacing:0}.lesson-picks button[aria-pressed=true]{box-shadow:inset 0 -3px var(--green)}
.hero-photo{height:380px;border-radius:0;margin-top:0}.hero-photo div{padding:48px}.hero-photo span{letter-spacing:0;text-transform:lowercase;font-size:13px}
.reading-strip{border-radius:0;border-block:1px solid var(--line);background:transparent;padding:var(--space-lg) 0}
.knowledge-paths{gap:0;border-block:1px solid var(--line);margin-top:32px}.knowledge-paths a{border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;padding:var(--space-lg) 20px}.knowledge-paths a:first-child{padding-left:0}.knowledge-paths a:last-child{border:0}
.knowledge-grid{display:block;border-top:2px solid var(--ink)}.knowledge-card{display:grid;grid-template-columns:minmax(0,.65fr) minmax(0,1fr) minmax(0,1fr) auto;gap:var(--space-lg);align-items:start;border:0;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;padding:var(--space-lg) 0}
.knowledge-card h3,.knowledge-card p{margin:0}.knowledge-card .text-link{white-space:nowrap}.knowledge-card:hover,.knowledge-paths a:hover{transform:none;box-shadow:none}
.section-heading{border-top:2px solid var(--ink);padding-top:var(--space-lg)}.section-heading h2{font-size:clamp(32px,3.5vw,48px)}
.section-kicker,.eyebrow,.detail-meta,.stage-top{letter-spacing:0;text-transform:lowercase}
.eyebrow>span{display:none}.knowledge-card .section-kicker{font-size:13px}
.lesson-table{gap:0 32px}.lesson-table article{border-radius:0}
.tactic-card,.penalty-box,.troubleshoot-card,.observation-board,.step-figure,.article-hero figure,.direct-answer-box,.calc-widget,.error-index article{border-radius:2px;box-shadow:none}
.article-hero{gap:48px}.article-hero h1{font-size:clamp(38px,4.1vw,58px)}.article-layout{gap:56px}.article-content p,.article-content li{font-size:16px}
.step-figure{background:var(--soft)}.step-figure figcaption{font-size:13px}
.referral-close{border-radius:0}.footer{border-top:2px solid var(--ink)}
button:active,.button:active{transform:translateY(1px)}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
@media(max-width:900px){.hero{gap:32px}.stage>img{height:230px}.knowledge-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.knowledge-card .text-link{justify-self:start}.article-hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:760px){.topbar{min-height:0}.hero{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);padding:36px 0}.hero-copy h1{font-size:clamp(42px,10vw,58px)}.hero-copy>p{font-size:16px}.stage>img{height:245px}.hero-photo{height:280px}.hero-photo div{padding:var(--space-lg)}.knowledge-paths{grid-template-columns:minmax(0,1fr)}.knowledge-paths a,.knowledge-paths a:first-child{padding:20px 0;border-right:0;border-bottom:1px solid var(--line)}.knowledge-card{grid-template-columns:minmax(0,1fr);gap:var(--space-xs)}.knowledge-card p{margin:0}.article-hero{grid-template-columns:minmax(0,1fr)}.section-heading h2{font-size:32px}}

/* Dusk: a twilight yard, smoked glass and sage signals. */
:root{--paper:var(--dusk-night);--surface:var(--dusk-panel);--ink:var(--dusk-ink);--muted:var(--dusk-muted);--green:var(--dusk-green);--green-hover:var(--dusk-green-deep);--soft:var(--dusk-panel-deep);--line:var(--dusk-rule);--orange:var(--dusk-warm);--warm:var(--dusk-panel);--danger:var(--dusk-alert);--color-focus:var(--dusk-focus)}
body{position:relative;background:var(--dusk-night);color:var(--dusk-ink)}
body:has(.hero)::before{content:"";position:absolute;inset:0 0 auto;height:920px;pointer-events:none;background-image:linear-gradient(to bottom,var(--dusk-fade) 40%,var(--dusk-night) 100%),url('/illustrations/yard-dusk-v1.webp');background-size:cover;background-position:center top}
.site-shell{position:relative;z-index:1}
.topbar{border-bottom:1px solid var(--dusk-glass-edge)}
.topbar a,.wordmark small{color:var(--dusk-ink)}
body:has(.hero) .topbar a,body:has(.hero) .wordmark small{color:var(--dusk-day-ink)}
.topbar .header-action,body:has(.hero) .topbar .header-action{background:var(--dusk-green);color:var(--dusk-green-deep);border:0;border-radius:999px}
.header-action:hover,.button:hover{background:var(--dusk-well);color:var(--dusk-green-deep)}
h1,h2,h3{color:var(--dusk-ink);font-weight:600}p{color:var(--dusk-muted)}a{color:var(--dusk-green)}
.hero{min-height:650px;gap:var(--space-2xl);align-items:center}
.hero-copy{position:relative;isolation:isolate}
.hero-copy::before{content:"";position:absolute;z-index:-1;inset:-20% -30%;background:radial-gradient(ellipse at center,var(--dusk-fog),var(--dusk-fog-clear) 72%);pointer-events:none}
.hero-copy h1{color:var(--dusk-day-ink);font-weight:600;letter-spacing:-.045em}
.hero-copy>p,.hero-copy .text-link,.hero-facts{color:var(--dusk-day-muted)}
.hero-facts{border-color:var(--dusk-glass-edge)}
.button{background:var(--dusk-green);color:var(--dusk-green-deep);border:0;border-radius:999px}
.button-light{background:var(--dusk-green);color:var(--dusk-green-deep)}
.workspace{background:var(--dusk-glass);border:1px solid var(--dusk-glass-edge);border-radius:22px;box-shadow:inset 0 1px 0 var(--dusk-glass-edge),0 28px 70px var(--dusk-glass-shadow);backdrop-filter:blur(22px) saturate(1.2);-webkit-backdrop-filter:blur(22px) saturate(1.2);overflow:hidden}
.stage{background:transparent}.stage-top{background:transparent;border:0;color:var(--dusk-muted);padding:var(--space-md) 20px;text-transform:none}
.stage>img{height:250px;width:calc(100% - 40px);margin:0 20px;border-radius:12px;object-fit:contain;background:var(--dusk-well)}
.stage-index{left:32px;bottom:12px;border-radius:999px;background:var(--dusk-panel-deep);color:var(--dusk-ink)}
.workspace-details{padding:20px var(--space-lg)}.workspace-details h2{color:var(--dusk-ink)}.workspace-details p,.workspace-details .app-note,.detail-meta{color:var(--dusk-muted)}
#studio-access{background:var(--dusk-highlight);color:var(--dusk-green);border-radius:999px}
.lesson-picks{border-color:var(--dusk-glass-edge)}.lesson-picks button{color:var(--dusk-muted);border-color:var(--dusk-glass-edge);background:transparent}
.lesson-picks button[aria-pressed=true]{background:var(--dusk-highlight);color:var(--dusk-ink);box-shadow:inset 0 -2px var(--dusk-green)}
.hero-photo{border-radius:20px;overflow:hidden}.hero-photo strong{color:var(--dusk-ink)}
.reading-strip,.section-heading,.knowledge-paths,.footer{border-color:var(--dusk-rule)}
.reading-strip{color:var(--dusk-ink)}.knowledge-paths a,.knowledge-card{background:transparent;border-color:var(--dusk-rule);color:var(--dusk-ink)}
.knowledge-paths b,.knowledge-card h3,.section-kicker,.eyebrow,.row-title details summary{color:var(--dusk-green)}
.knowledge-card:hover,.knowledge-paths a:hover{background:var(--dusk-highlight);border-color:var(--dusk-rule)}
.lesson-thumb{background:var(--dusk-well);border-radius:10px}
.lesson-status,.tactic-observe,.calc-result-panel,.direct-answer-box{background:var(--dusk-panel-deep);color:var(--dusk-ink)}
.tactic-card,.penalty-box,.calc-widget,.troubleshoot-card,.observation-board,.error-index article,.mobile-toc{background:var(--dusk-panel);border:1px solid var(--dusk-rule);border-radius:16px}
.penalty-box li,.troubleshoot-card b,.direct-answer-box strong{color:var(--dusk-ink)}
.calc-item:hover,.calc-item:has(input:checked){background:var(--dusk-highlight);border-color:var(--dusk-green)}
.score-badge.fail{color:var(--dusk-alert)}.score-badge.pass{color:var(--dusk-green)}
.referral-close{background:var(--dusk-panel);border:1px solid var(--dusk-rule);border-radius:20px;color:var(--dusk-ink)}
.referral-close h2{color:var(--dusk-ink)}.referral-close p{color:var(--dusk-muted)}
.article-hero figure{border-radius:16px;background:var(--dusk-well)}.article-hero figcaption{color:var(--dusk-well-ink)}
.step-figure{background:var(--dusk-well);border-color:var(--dusk-rule);border-radius:16px}.step-figure figcaption{background:var(--dusk-well);color:var(--dusk-well-ink)}
.timeline-step>span{background:var(--dusk-panel);color:var(--dusk-green)}
.stage>img,.article-hero figure img{background:var(--dusk-well)}
:focus-visible{outline-color:var(--dusk-focus)}
@media(max-width:900px){.hero{min-height:0}}
@media(max-width:760px){body:has(.hero)::before{height:1000px;background-position:40% top}.topbar nav{border-color:var(--dusk-glass-edge)}.hero{padding:var(--space-xl) 0 48px;gap:28px}.hero-copy::before{inset:-20% -10%}.hero-copy h1{font-size:clamp(42px,10vw,58px)}.workspace{border-radius:18px}.stage>img{height:220px}.workspace-details{padding:20px}.lesson-picks button{font-size:11px}.hero-photo{height:270px}.knowledge-paths a,.knowledge-paths a:first-child{border-color:var(--dusk-rule)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

.workspace-details .button{border-radius:999px}
.hero-actions .text-link{background:var(--dusk-fog);color:var(--dusk-day-ink);padding:0 var(--space-md);border-radius:999px;text-decoration:none}
.hero-facts{color:var(--dusk-ink)}
@media(max-width:760px){.topbar nav{flex-wrap:nowrap;overflow-x:auto;justify-content:flex-start;gap:20px;scrollbar-width:none}.topbar nav::-webkit-scrollbar{display:none}.topbar nav a{white-space:nowrap;flex:none;padding:0;min-height:44px}.hero-copy>p{max-width:28ch}.hero-actions{gap:var(--space-sm)}}

.skip{background:var(--dusk-panel-deep);color:var(--dusk-ink)}
.observation-board li:before{background:var(--dusk-green);color:var(--dusk-green-deep)}