:root {
  --ink: #13211d;
  --paper: #f3efe3;
  --paper2: #e8e1d0;
  --green: #b9ef6a;
  --orange: #f08a4b;
  --blue: #60a7c7;
  --line: #a79f8d;
  --muted: #625f55;
  --dark: #0b1714;
  --serif: "Source Han Serif SC", "Songti SC", Iowan Old Style, serif;
  --sans: "Avenir Next Condensed", "DIN Condensed", "PingFang SC", sans-serif;
  --mono: "SFMono-Regular", Menlo, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--dark);
  font-family: var(--serif);
  line-height: 1.75;
}

.skip-link { position: fixed; left: 14px; top: 10px; z-index: 20; padding: 10px 14px; color: var(--dark); background: var(--green); font: 700 13px var(--sans); text-decoration: none; transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid #1477a8; outline-offset: 3px; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .09;
  z-index: 5;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.masthead {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 14px 28px;
  color: var(--paper);
  background: rgba(11, 23, 20, .94);
  border-bottom: 1px solid #34443e;
  backdrop-filter: blur(14px);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  font-family: var(--sans);
  font-size: 12px;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.brand b { color: var(--green); font-size: 16px; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--green);
  border-radius: 50%;
  color: var(--green);
  font: 700 14px var(--mono);
}

.mast-actions { display: flex; align-items: end; gap: 16px; }
.menu-toggle { display: none; }
.search {
  display: grid;
  color: #aebbb5;
  font: 10px var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.search input {
  width: min(32vw, 360px);
  border: 0;
  border-bottom: 1px solid #53655e;
  padding: 6px 0;
  color: white;
  background: transparent;
  font: 15px var(--serif);
  outline: 0;
}
.search input:focus { border-color: var(--green); }
.button {
  border: 1px solid #61726b;
  padding: 9px 14px;
  color: var(--paper);
  background: transparent;
  font: 12px var(--mono);
  cursor: pointer;
  text-decoration: none;
}
.button:hover { color: var(--dark); background: var(--green); border-color: var(--green); }
.library-button { align-self: end; }
.search-panel { position: fixed; z-index: 9; top: 76px; right: 26px; width: min(720px, calc(100vw - 52px)); max-height: 70vh; overflow: auto; padding: 18px; color: #e9efe9; background: #10241e; border: 1px solid #50675d; box-shadow: 14px 16px 0 rgba(0,0,0,.3); }
.search-panel[hidden] { display: none; }
.search-panel > header { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #50675d; }
.search-panel > header span { color: var(--green); font: 10px var(--mono); }
.search-panel > header b { font: 700 17px var(--sans); }
.search-panel > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: #40554c; }
.search-panel a { display: grid; min-height: 105px; padding: 15px; color: #e9efe9; background: #17352c; text-decoration: none; }
.search-panel a:hover { color: var(--dark); background: var(--green); }
.search-panel a span, .search-panel a small { font: 10px var(--mono); }
.search-panel a span { color: var(--orange); }
.search-panel a b { margin: 5px 0; font: 700 18px/1.2 var(--sans); }
.search-panel p { margin: 0; padding: 20px; background: #17352c; }
.rail-backdrop, .rail-mobile-head { display: none; }
.rail-search { display:none; }

.shell {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  max-width: 1500px;
  margin: auto;
  min-height: calc(100vh - 78px);
}
.rail {
  position: sticky;
  top: 77px;
  align-self: start;
  height: calc(100vh - 77px);
  overflow: auto;
  padding: 28px 22px;
  color: #d9dfd8;
  border-right: 1px solid #34443e;
  background: #0f1d19;
}
.progress-block { margin-bottom: 20px; font: 11px var(--mono); text-transform: uppercase; }
.progress-block strong { float: right; color: var(--green); }
.progress-track { height: 3px; margin-top: 10px; background: #33433d; }
.progress-track i { display: block; width: 0; height: 100%; background: var(--green); transition: width .3s; }
.library-link, .core-link, .home-link, .practice-link, .nomenclature-link {
  display: grid;
  gap: 5px;
  margin: 18px 0 10px;
  padding: 13px 12px;
  color: #dce6df;
  text-decoration: none;
  border: 1px solid #3f544b;
  background: #13251f;
}
.home-link { border-color: #596861; background: #192721; }
.practice-link { border-color: #724d39; background: #34261f; box-shadow: inset 4px 0 0 var(--orange); }
.nomenclature-link { background: #162823; }
.core-link { margin-bottom: 0; background: #1b342b; border-color: #536c61; box-shadow: inset 4px 0 0 var(--green); }
.library-link span, .core-link span, .home-link span, .practice-link span, .nomenclature-link span { color: var(--orange); font: 9px var(--mono); letter-spacing: .12em; }
.core-link span { color: var(--green); }
.library-link b, .core-link b, .home-link b, .practice-link b, .nomenclature-link b { font: 14px/1.35 var(--sans); }
.library-link:hover,
.library-link.active,
.core-link:hover,
.core-link.active,
.home-link:hover, .home-link.active,
.practice-link:hover, .practice-link.active,
.nomenclature-link:hover, .nomenclature-link.active { color: var(--dark); background: var(--green); border-color: var(--green); }
.library-link:hover span,
.library-link.active span,
.core-link:hover span,
.core-link.active span,
.home-link:hover span, .home-link.active span,
.practice-link:hover span, .practice-link.active span,
.nomenclature-link:hover span, .nomenclature-link.active span { color: #39512c; }
.stage-title {
  margin: 24px 0 6px;
  color: #7f9289;
  font: 10px var(--mono);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.week-link {
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  padding: 7px 5px;
  color: #bdc8c1;
  text-decoration: none;
  font-size: 13px;
  line-height: 1.35;
  border-left: 2px solid transparent;
}
.week-link span:first-child { color: #6f847a; font: 10px var(--mono); }
.week-link:hover,
.week-link.active { color: white; border-left-color: var(--green); background: #172923; }
.week-link.done span:first-child { color: var(--green); }

main { min-width: 0; padding: 52px clamp(28px, 6vw, 96px) 100px; background: var(--paper); }
#lesson > * { animation: rise-in .42s both; }
#lesson > *:nth-child(2) { animation-delay: .03s; }
#lesson > *:nth-child(3) { animation-delay: .06s; }
@keyframes rise-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.lesson-kicker {
  display: flex;
  gap: 12px;
  align-items: center;
  color: var(--muted);
  font: 11px var(--mono);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.lesson-kicker i { width: 40px; height: 1px; background: var(--orange); }
h1 {
  max-width: 950px;
  margin: 12px 0 18px;
  font: 700 clamp(40px, 6vw, 86px)/.98 var(--sans);
  letter-spacing: -.045em;
}
.dek { max-width: 830px; margin: 0 0 30px; color: #4b514c; font-size: 19px; }
.lesson-meta { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 36px; }
.chip { padding: 6px 10px; border: 1px solid var(--line); font: 11px var(--mono); background: rgba(255,255,255,.35); }
.complete { margin-left: auto; border-color: var(--ink); cursor: pointer; }
.core-concept-chip { color: #17352c; background: var(--green); border-color: #2f6554; text-decoration: none; }
.core-concept-chip:hover { color: #fff; background: #2f6554; }
.complete.is-done { background: var(--ink); color: var(--green); }

.dashboard-hero { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: clamp(30px,7vw,100px); min-height: 510px; align-items: center; margin: -52px calc(clamp(28px,6vw,96px) * -1) 0; padding: 70px clamp(28px,6vw,96px); color: #eef3eb; background: radial-gradient(circle at 78% 35%,#375a48 0 1px,transparent 2px),linear-gradient(127deg,#0d201a 0%,#17382d 68%,#274637 100%); background-size: 18px 18px,auto; border-bottom: 8px solid var(--green); }
.dashboard-hero > div > span { color: var(--orange); font: 10px var(--mono); letter-spacing: .12em; }
.dashboard-hero h1 { margin: 22px 0; color: #f4f0e4; font-size: clamp(50px,7vw,100px); }
.dashboard-hero p { max-width: 720px; color: #bfcfc7; font-size: 18px; }
.dashboard-hero aside { display: grid; align-content: center; min-height: 300px; padding: 30px; border: 1px solid #668072; background: rgba(9,22,18,.68); }
.dashboard-hero aside b { color: var(--green); font: 700 92px/.8 var(--sans); }
.dashboard-hero aside span, .dashboard-hero aside small { font: 10px var(--mono); }
.dashboard-hero aside i { position: relative; display: block; height: 8px; margin: 28px 0; background: #40594d; }
.dashboard-hero aside i::after { content:""; display:block; width:var(--dashboard-progress); height:100%; background:var(--orange); }
.dashboard-hero aside small { color: #bfcfc7; }
.continue-panel { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; margin: 0 0 54px; padding: 28px 32px; color: #152a23; background: var(--green); }
.continue-panel span { color: #476038; font: 10px var(--mono); }
.continue-panel h2 { margin: 4px 0; font: 750 30px var(--sans); }
.continue-panel p { margin: 0; max-width: 760px; }
.continue-panel a { padding: 14px 18px; color: #fff; background: #17352c; font: 700 13px var(--sans); text-decoration: none; }
.dashboard-actions { display: grid; grid-template-columns: repeat(4,1fr); gap: 1px; margin: 50px 0 70px; background: #8d968f; border: 1px solid #8d968f; }
.dashboard-actions a { display: grid; min-height: 180px; padding: 24px; color: #17352c; background: #fbf7ec; text-decoration: none; }
.dashboard-actions a:hover { color:#fff; background:#2f6554; }
.dashboard-actions i { color: var(--orange); font: 11px var(--mono); font-style: normal; }
.dashboard-actions span { margin-top: 24px; font: 10px var(--mono); }
.dashboard-actions b { font: 750 21px/1.25 var(--sans); }
.stage-roadmap, .case-spine { margin: 70px 0; }
.stage-roadmap > header, .case-spine > header, .checkpoint-grid > header, .lab-grid > header { display:grid; grid-template-columns:200px 1fr; gap:25px; align-items:start; margin-bottom:22px; border-bottom:4px solid #17352c; padding-bottom:15px; }
.stage-roadmap > header span, .case-spine > header span, .checkpoint-grid > header span, .lab-grid > header span { font: 10px var(--mono); }
.stage-roadmap > header h2, .case-spine > header h2, .checkpoint-grid > header h2, .lab-grid > header h2 { margin:0; font:750 34px/1.05 var(--sans); }
.stage-roadmap > div { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#8e978f; border:1px solid #8e978f; }
.stage-roadmap article { position:relative; min-height:270px; padding:25px; background:#fbf7ec; }
.stage-roadmap article i { position:absolute; right:20px; color:#d6d0bf; font:38px var(--mono); font-style:normal; }
.stage-roadmap article > b { color:var(--orange); font:11px var(--mono); }
.stage-roadmap h3 { margin:24px 0 8px; font:750 25px var(--sans); }
.stage-roadmap p { margin:0; color:#4d5851; }
.stage-roadmap small { display:block; margin:18px 0; color:#2f6554; font-weight:700; }
.stage-roadmap a { color:#17352c; font:11px var(--mono); }
.case-spine > header p { grid-column:2; margin:0; color:#59655d; }
.case-spine > div { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.case-spine a { display:grid; min-height:290px; padding:24px; color:#eaf0e9; background:#17352c; border-top:7px solid var(--orange); text-decoration:none; }
.case-spine a:hover { background:#285345; }
.case-spine a > span { color:var(--green); font:10px var(--mono); }
.case-spine h3 { margin:25px 0 0; font:750 25px var(--sans); }
.case-spine a > b { color:#f2a171; font:11px var(--mono); }
.case-spine p { color:#c0cec7; }
.case-spine small { align-self:end; color:var(--green); }
.case-spine ol { padding-left:20px; color:#c0cec7; }
.dashboard-rule { display:grid; grid-template-columns:170px 1fr; gap:25px; padding:28px; color:#f2f4ed; background:#4d2921; border-left:8px solid var(--orange); }
.dashboard-rule b { color:#f2a171; font:11px var(--mono); }
.dashboard-rule p { margin:0; font-size:17px; }

.diagnostic-block { margin:50px 0 75px; border:1px solid #697c72; }
.diagnostic-block > header { padding:28px; color:#edf3ec; background:#17352c; }
.diagnostic-block > header span { color:var(--green); font:10px var(--mono); }
.diagnostic-block h2 { margin:5px 0; font:750 32px var(--sans); }
.diagnostic-block > header p { margin:0; color:#bdcbc4; }
.diagnostic-block > ol { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin:0; padding:1px; list-style-position:inside; background:#a6ad9e; }
.diagnostic-block > ol li { min-height:100px; padding:20px; background:#fbf7ec; }
.diagnostic-block > div { display:grid; grid-template-columns:130px repeat(3,1fr); gap:1px; background:#60736a; color:#eef3ed; }
.diagnostic-block > div > * { padding:16px; background:#24463a; }
.diagnostic-block > div b { color:var(--green); font:10px var(--mono); }
.checkpoint-grid, .lab-grid { margin:75px 0; }
.checkpoint-grid > div { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.checkpoint-grid article { padding:25px; background:#edf2e5; border-top:5px solid #2f6554; }
.checkpoint-grid article > span { color:var(--orange); font:10px var(--mono); }
.checkpoint-grid h3 { margin:8px 0; font:750 24px var(--sans); }
.checkpoint-grid ul { display:grid; grid-template-columns:repeat(2,1fr); gap:6px; padding:0; list-style:none; }
.checkpoint-grid li { padding:8px; background:#fffdf5; font-size:13px; }
.lab-grid > header p { grid-column:2; margin:0; }
.lab-grid > div { display:grid; gap:22px; }
.lab-grid article { display:grid; grid-template-columns:240px 1fr; overflow:hidden; border:1px solid #7b867f; background:#fbf7ec; }
.lab-grid article > header { grid-row:1/5; padding:25px; color:#eef3ed; background:#17352c; }
.lab-grid article > header span { color:var(--green); font:10px var(--mono); }
.lab-grid article > header h3 { margin:30px 0 0; font:750 28px/1.05 var(--sans); }
.lab-question { margin:0; padding:22px 25px 0; font-size:18px; font-weight:700; }
.lab-grid dl { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin:20px 25px 0; background:#b5b9ae; }
.lab-grid dl div { padding:12px; background:#f0ebdc; }
.lab-grid dt { color:var(--orange); font:9px var(--mono); }
.lab-grid dd { margin:5px 0 0; font-size:13px; }
.lab-grid article > ol { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:20px 25px; padding-left:20px; }
.lab-grid article > footer { grid-column:2; display:flex; gap:8px; padding:0 25px 22px; }
.lab-grid article > footer a { padding:8px 10px; color:#17352c; background:var(--green); font:10px var(--mono); text-decoration:none; }
.review-loop { margin:75px 0; padding:30px; color:#eff4ed; background:#17352c; }
.review-loop > span { color:var(--green); font:10px var(--mono); }
.review-loop h2 { margin:5px 0 22px; font:750 32px var(--sans); }
.review-loop > div { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:#54685e; }
.review-loop article { padding:20px; background:#24463a; }
.review-loop b { color:var(--orange); font:16px var(--mono); }
.review-loop p { margin:8px 0 0; color:#c3d0c9; }
.supplement-strip { margin:65px 0; }
.supplement-strip > header { display:grid; grid-template-columns:180px 1fr; gap:20px; border-bottom:4px solid #17352c; }
.supplement-strip > header span { font:10px var(--mono); }
.supplement-strip > header h2 { margin:0 0 12px; font:750 30px var(--sans); }
.supplement-strip > div { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.supplement-strip article { padding:24px; color:#edf3ec; background:#17352c; border-top:5px solid var(--orange); }
.supplement-strip article > span { color:var(--green); font:9px var(--mono); }
.supplement-strip h3 { margin:12px 0; font:750 25px var(--sans); }
.supplement-strip code { display:block; padding:12px; color:var(--green); background:#0e211a; font-size:14px; }
.supplement-strip ul { margin-bottom:0; padding-left:20px; color:#c4d1ca; }
.lesson-pagination { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:70px; background:#63756c; border:1px solid #63756c; }
.lesson-pagination a { display:grid; min-height:90px; padding:18px 22px; color:#eef3ec; background:#17352c; text-decoration:none; }
.lesson-pagination a:last-child { text-align:right; }
.lesson-pagination a:hover { color:#17352c; background:var(--green); }
.lesson-pagination span { color:var(--orange); font:9px var(--mono); }
.lesson-pagination b { font:750 19px var(--sans); }

.hero-figure {
  margin: 34px 0 50px;
  padding: 24px;
  background: var(--dark);
  color: var(--paper);
  box-shadow: 14px 14px 0 var(--paper2);
}
.hero-figure svg { display: block; width: 100%; height: auto; min-height: 270px; }
.hero-figure figcaption { margin-top: 12px; color: #9fb0a8; font: 11px var(--mono); }
.objectives {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 30px 0 50px;
  background: var(--line);
  border: 1px solid var(--line);
}
.objective { padding: 22px; background: #faf7ed; }
.objective b { display: block; margin-bottom: 7px; color: var(--orange); font: 12px var(--mono); }

.big-idea {
  position: relative;
  margin: 0 0 56px;
  padding: 38px 42px 38px 120px;
  color: var(--paper);
  background: #17352c;
  overflow: hidden;
}
.big-idea::before {
  content: "“";
  position: absolute;
  left: 28px;
  top: -28px;
  color: var(--green);
  font: 150px/1 Georgia, serif;
}
.eyebrow { margin-bottom: 9px; color: var(--green); font: 10px var(--mono); letter-spacing: .14em; }
.big-idea p { max-width: 850px; margin: 0; font-size: 24px; line-height: 1.65; }
.section-heading { margin-bottom: 20px; }
.section-heading span { color: #64716a; font: 10px var(--mono); letter-spacing: .14em; }
.section-heading h2 { margin: 3px 0 6px; font: 700 34px/1.15 var(--sans); }
.section-heading p { max-width: 760px; margin: 5px 0; color: #566059; }
.visual-explainer { margin: 0 0 36px; }
.deep-figure { margin: 0; border: 1px solid #a8b1aa; background: #e8efe2; box-shadow: 10px 10px 0 #d8d0bf; }
.deep-figure svg { display: block; width: 100%; height: auto; }
.deep-figure figcaption { padding: 16px 22px; border-top: 1px solid #abb5ae; color: #425048; background: #f8f4e9; font-size: 14px; }

.formula-card {
  display: grid;
  grid-template-columns: 150px minmax(230px, .85fr) 1.3fr;
  align-items: stretch;
  margin: 46px 0 54px;
  color: var(--paper);
  background: var(--dark);
  border-top: 5px solid var(--orange);
}
.formula-label { padding: 24px; color: #a5b3ac; font: 10px var(--mono); letter-spacing: .12em; border-right: 1px solid #405049; }
.formula-expression {
  display: grid;
  place-items: center;
  min-height: 145px;
  padding: 20px;
  color: var(--green);
  font: 700 clamp(23px, 3vw, 38px)/1.2 Georgia, var(--serif);
  text-align: center;
  border-right: 1px solid #405049;
}
.formula-copy { padding: 22px 28px; }
.formula-copy b { color: #fff; font-size: 17px; }
.formula-copy p { margin: 8px 0 0; color: #bcc8c1; font-size: 14px; }

.section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.concept { position: relative; padding: 26px; background: #fbf8ef; border-top: 4px solid var(--ink); }
.concept h2 { margin: 0 0 10px; font: 700 25px/1.15 var(--sans); }
.concept p { margin: 0; color: #343b36; }
.concept .number { position: absolute; right: 17px; top: 12px; color: #cdc4b2; font: 34px var(--mono); }

.walkthrough { margin: 56px 0 0; }
.step-track { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--ink); border: 1px solid var(--ink); }
.step-card { position: relative; min-height: 230px; padding: 26px 24px; background: #f8f4e9; }
.step-card::after {
  content: "→";
  position: absolute;
  right: -15px;
  top: 45%;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: var(--dark);
  background: var(--green);
  border-radius: 50%;
  font: 18px var(--mono);
}
.step-card:last-child::after { display: none; }
.step-card i { color: var(--orange); font: 12px var(--mono); font-style: normal; }
.step-card h3 { margin: 16px 0 8px; font: 700 27px var(--sans); }
.step-card p { margin: 0; color: #465049; }

.case,
.assignment,
.reading { margin-top: 42px; padding: 30px; border: 1px solid var(--line); }
.case { background: var(--paper2); border-left: 8px solid var(--orange); }
.assignment { background: #dfead2; border-left: 8px solid #72963e; }
.reading { background: #e1e9e8; border-left: 8px solid var(--blue); }
h2.section-title { margin: 0 0 18px; font: 700 31px var(--sans); }
.case p,
.assignment p { max-width: 850px; }
.judgement-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 42px; }
.pitfalls,
.bridge { padding: 28px 30px; border-top: 5px solid; }
.pitfalls { color: #f6eee6; background: #4b2820; border-color: var(--orange); }
.bridge { color: #edf4ea; background: #183a32; border-color: var(--green); }
.callout-label { font: 10px var(--mono); letter-spacing: .14em; opacity: .75; }
.pitfalls h2,
.bridge h2 { margin: 5px 0 14px; font: 700 27px var(--sans); }
.pitfalls ul { margin: 0; padding-left: 20px; }
.pitfalls li + li { margin-top: 8px; }
.bridge p { margin: 0; }
.questions { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; padding: 0; counter-reset: q; }
.questions li { list-style: none; padding: 14px 16px; background: rgba(255,255,255,.55); counter-increment: q; }
.questions li::before { content: "Q" counter(q); display: block; color: #55742f; font: 10px var(--mono); }
.takeaways { display: flex; flex-wrap: wrap; gap: 10px; margin: 42px 0; }
.takeaway { max-width: 310px; padding: 14px 16px; color: var(--paper); background: var(--ink); font-size: 14px; }

.study-sources { margin-top: 60px; padding-top: 34px; border-top: 1px solid var(--line); }
.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.source-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 310px;
  padding: 28px 22px 22px;
  color: var(--ink);
  text-decoration: none;
  background: #f8f3e7;
  border: 1px solid var(--line);
  border-left: 9px solid #2d5c4d;
  box-shadow: 5px 5px 0 #d9d0bd;
  transition: transform .2s, box-shadow .2s;
}
.source-card:nth-child(3n+2) { border-left-color: var(--orange); }
.source-card:nth-child(3n) { border-left-color: var(--blue); }
.source-card:hover { transform: translateY(-5px); box-shadow: 8px 10px 0 #d9d0bd; }
.source-index { position: absolute; right: 17px; top: 15px; color: #b8ae99; font: 30px var(--mono); }
.source-type { width: max-content; padding: 4px 7px; color: #f5f2e9; background: var(--ink); font: 9px var(--mono); letter-spacing: .1em; }
.source-card h3 { position: relative; z-index: 1; margin: 28px 0 6px; padding-top: 17px; font: 700 23px/1.15 var(--sans); }
.source-card p { margin: 0 0 15px; color: #586159; font-size: 13px; }
.source-card small { display: block; color: #3e4842; font-size: 13px; line-height: 1.6; }
.source-card > b { margin-top: auto; padding-top: 20px; color: #2d6653; font: 11px var(--mono); }
.reading-note { margin: -10px 0 18px; color: #586761; font-size: 14px; }
.refs { display: grid; gap: 10px; }
.ref { display: grid; grid-template-columns: 36px 1fr; gap: 10px; color: var(--ink); text-decoration: none; padding: 10px; border-bottom: 1px solid #b8c5c2; }
.ref span:first-child { color: #4c7484; font: 11px var(--mono); }
.ref:hover { background: #f5faf8; }

.library-principles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 48px 0; background: var(--ink); border: 1px solid var(--ink); }
.library-principles article { padding: 28px; background: #faf6ec; }
.library-principles b { color: var(--orange); font: 12px var(--mono); }
.library-principles h2 { margin: 8px 0 5px; font: 700 27px var(--sans); }
.library-principles p { margin: 0; color: #4a554e; }
.library-route { margin: 58px 0; }
.route-line { display: flex; align-items: center; gap: 10px; padding: 28px 24px; color: var(--paper); background: var(--dark); overflow: auto; }
.route-line span { flex: 0 0 auto; padding: 9px 12px; border: 1px solid #53675e; font: 12px var(--mono); }
.route-line i { position: relative; display: block; flex: 1 0 28px; min-width: 28px; height: 2px; background: var(--green); }
.route-line i::after { content: ""; position: absolute; right: -1px; top: -4px; border-left: 7px solid var(--green); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.library-sources .source-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.library-sources .source-card { min-height: 330px; }
.copyright-note { margin-top: 48px; padding: 25px 28px; background: #e7dfcf; border-left: 7px solid var(--ink); }
.copyright-note b { font: 700 20px var(--sans); }
.copyright-note p { margin: 6px 0 0; }

.textbook-bench {
  margin: 58px 0 72px;
  border: 1px solid #1d3b33;
  background: #ede7d8;
  box-shadow: 12px 12px 0 #d7cebc;
}
.textbook-bench-header { display: grid; grid-template-columns: 155px 1fr; gap: 8px 28px; padding: 30px 32px 26px; color: #edf4ec; background: #17352c; }
.textbook-bench-header > div { grid-row: span 2; display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid #496158; }
.textbook-bench-header span { color: var(--green); font: 9px var(--mono); letter-spacing: .14em; }
.textbook-bench-header b { color: #6e897f; font: 38px var(--mono); }
.textbook-bench-header h2 { margin: 0; font: 700 31px/1.12 var(--sans); }
.textbook-bench-header p { max-width: 760px; margin: 0; color: #b8c8c0; font-size: 13px; }
.textbook-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #8d958d; }
.textbook-column { display: flex; flex-direction: column; min-height: 305px; padding: 28px 30px; color: var(--ink); background: #fbf7ec; text-decoration: none; }
.textbook-column span { width: max-content; padding: 4px 7px; color: #fff; font: 9px var(--mono); letter-spacing: .1em; background: #2f6554; }
.organic-column span { background: #a44e2d; }
.textbook-column h3 { margin: 20px 0 10px; font: 700 24px/1.18 var(--sans); }
.textbook-column ul { margin: 0; padding-left: 20px; color: #465149; font-size: 14px; }
.textbook-column li + li { margin-top: 10px; }
.textbook-column > b { margin-top: auto; padding-top: 20px; color: #2d6653; font: 10px var(--mono); }
.textbook-column:hover { background: #fffdf6; box-shadow: inset 0 -5px 0 var(--green); }
.organic-column:hover { box-shadow: inset 0 -5px 0 var(--orange); }
.textbook-worked { display: grid; grid-template-columns: .75fr 1.25fr; gap: 22px 28px; padding: 26px 30px 30px; background: #dfe7d4; border-top: 1px solid #aeb8aa; }
.textbook-worked > div { grid-row: span 2; padding-right: 24px; border-right: 1px solid #a0ad9e; }
.textbook-worked span { color: #6c744e; font: 9px var(--mono); letter-spacing: .1em; }
.textbook-worked h3 { margin: 5px 0 0; font: 700 24px/1.2 var(--sans); }
.textbook-worked > p { margin: 0; color: #3f4c44; }
.textbook-worked > p b { display: block; color: #9f4c2d; font: 10px var(--mono); }
.textbook-worked details { padding: 10px 13px; background: rgba(255,255,255,.5); border-left: 4px solid #2f6554; }
.textbook-worked summary { cursor: pointer; font: 700 13px var(--sans); }
.textbook-worked details p { margin: 8px 0 0; color: #48544c; font-size: 14px; }

.nomenclature-chip { color: #9f431e; border-color: var(--orange); background: #fff0df; }
.nomenclature-lab {
  position: relative;
  margin: 78px 0;
  padding: clamp(24px, 4vw, 48px);
  border: 1px solid #8f9b92;
  background-color: #eef1e7;
  background-image: linear-gradient(rgba(23,53,44,.055) 1px, transparent 1px), linear-gradient(90deg, rgba(23,53,44,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow: 16px 16px 0 #d9d0bd;
}
.nomenclature-lab::before {
  content: "POSITION · LOCANT · SUBSTITUENT";
  position: absolute;
  right: -1px;
  top: -28px;
  padding: 6px 12px;
  color: #d9e8dd;
  background: #17352c;
  font: 9px var(--mono);
  letter-spacing: .12em;
}
.nomenclature-header { display: grid; grid-template-columns: 92px 1fr; gap: 24px; align-items: start; margin-bottom: 30px; }
.nomenclature-mark { display: grid; place-items: center; width: 86px; height: 86px; color: #17352c; background: var(--green); border: 2px solid #17352c; border-radius: 50%; font: 700 20px var(--mono); }
.module-kicker { color: #7a573e; font: 10px var(--mono); letter-spacing: .14em; }
.nomenclature-header h2 { margin: 5px 0 8px; font: 700 clamp(36px, 5vw, 62px)/1 var(--sans); letter-spacing: -.035em; }
.nomenclature-header p { max-width: 850px; margin: 0; color: #435048; font-size: 17px; }
.paired-course { display: grid; grid-template-columns: 130px 1fr auto; gap: 18px; align-items: center; margin: 30px 0 54px; padding: 18px 20px; color: #f5f2e8; background: #17352c; border-left: 8px solid var(--orange); text-decoration: none; }
.paired-course > span { color: var(--orange); font: 10px var(--mono); letter-spacing: .1em; }
.paired-course div { display: grid; }
.paired-course b { color: #fff; font: 700 20px var(--sans); }
.paired-course small { color: #b9c8c0; font-size: 12px; }
.paired-course i { color: var(--green); font: 11px var(--mono); font-style: normal; }
.paired-course:hover { background: #234b40; }
.naming-section-title { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; margin: 58px 0 18px; border-bottom: 1px solid #91a096; padding-bottom: 12px; }
.naming-section-title > span { color: var(--orange); font: 30px var(--mono); }
.naming-section-title div { display: grid; }
.naming-section-title b { font: 700 29px var(--sans); }
.naming-section-title small { color: #5d6962; }
.naming-workflow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: #17352c; border: 1px solid #17352c; }
.naming-workflow article { position: relative; min-height: 220px; padding: 22px 18px; background: #faf7ed; }
.naming-workflow article::after { content: "→"; position: absolute; right: -12px; top: 45%; z-index: 1; width: 24px; height: 24px; color: #17352c; background: var(--green); border-radius: 50%; text-align: center; font: 16px/24px var(--mono); }
.naming-workflow article:last-child::after { display: none; }
.naming-workflow i { color: var(--orange); font: 11px var(--mono); font-style: normal; }
.naming-workflow h3 { margin: 20px 0 8px; font: 700 22px/1.1 var(--sans); }
.naming-workflow p { margin: 0; color: #4c5650; font-size: 13px; }
.naming-examples { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.naming-example { overflow: hidden; background: #fbf8ee; border: 1px solid #a8b0a9; }
.naming-example:nth-child(3) { grid-column: 1 / -1; }
.naming-example figure { margin: 0; border-bottom: 1px solid #b6beb7; }
.naming-example svg { display: block; width: 100%; height: auto; }
.example-copy { padding: 18px 22px 22px; }
.example-copy > span { color: #8b583a; font: 10px var(--mono); text-transform: uppercase; }
.example-copy h3 { margin: 4px 0 6px; font: 700 25px var(--sans); }
.example-copy p { margin: 0; color: #4c5750; font-size: 14px; }
.naming-rules { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.naming-rules article { position: relative; padding: 23px 24px 23px 67px; background: rgba(251,248,238,.92); border-top: 3px solid #17352c; }
.naming-rules i { position: absolute; left: 20px; top: 20px; color: var(--orange); font: 13px var(--mono); font-style: normal; }
.naming-rules h3 { margin: 0 0 7px; font: 700 21px var(--sans); }
.naming-rules p { margin: 0; color: #465149; font-size: 14px; }
.substituent-atlas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.substituent-category-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 26px; }
.substituent-category-nav a { padding: 7px 10px; color: #17352c; background: #dce7d2; border: 1px solid #9ba996; font: 10px var(--mono); text-decoration: none; }
.substituent-category-nav a:hover { color: #fff; background: #17352c; }
.substituent-groups { display: grid; gap: 38px; }
.substituent-group { scroll-margin-top: 95px; }
.substituent-group > header { display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; margin-bottom: 12px; padding: 10px 13px; color: #eef4ef; background: #17352c; border-left: 7px solid var(--orange); }
.substituent-group > header span, .substituent-group > header b { font: 10px var(--mono); }
.substituent-group > header span { color: var(--green); }
.substituent-group > header b { color: #aebfb7; }
.substituent-group > header h3 { margin: 0; font: 700 22px var(--sans); }
.substituent-card { display: grid; grid-template-rows: auto 1fr; min-height: 330px; overflow: hidden; background: #fbf8ee; border: 1px solid #aab2ab; box-shadow: 4px 4px 0 #d2d8ce; }
.substituent-card figure { margin: 0; background: #fbf8ee; border-bottom: 1px solid #bdc3bd; }
.substituent-card svg { display: block; width: 100%; height: auto; }
.substituent-card > div { position: relative; padding: 16px 18px 19px; }
.substituent-card div > span { position: absolute; right: 16px; top: 13px; color: #8f9a92; font: 16px var(--mono); }
.substituent-card h3 { margin: 0; font: 700 23px var(--sans); }
.substituent-card b { color: #8a5536; font: 11px var(--mono); }
.substituent-card p { margin: 10px 0 0; color: #4b5650; font-size: 13px; }
.generic-clarifier { display: grid; grid-template-columns: 155px 1fr auto; gap: 20px; align-items: center; margin-bottom: 22px; padding: 22px 24px; color: #f7efe6; background: #4b2820; border-left: 8px solid var(--orange); text-decoration: none; }
.generic-clarifier > span { color: #f3a475; font: 9px var(--mono); letter-spacing: .1em; }
.generic-clarifier div { display: grid; }
.generic-clarifier b { color: #fff; font: 700 21px var(--sans); }
.generic-clarifier p { margin: 4px 0 0; color: #dbc9bf; font-size: 13px; }
.generic-clarifier i { color: var(--green); font: 10px var(--mono); font-style: normal; }
.generic-clarifier:hover { background: #5b3025; }
.drug-series-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.drug-series-card { display: flex; flex-direction: column; overflow: hidden; background: #fbf8ee; border: 1px solid #98a39b; box-shadow: 6px 6px 0 #d2d8ce; }
.drug-series-card > header { padding: 23px 24px 18px; border-top: 6px solid #17352c; }
.drug-series-card > header span { color: var(--orange); font: 10px var(--mono); }
.drug-series-card > header b { display: block; color: #657169; font: 10px var(--mono); }
.drug-series-card > header h3 { margin: 7px 0 0; font: 700 25px/1.15 var(--sans); }
.drug-series-card figure { margin: 0; background: #fbf8ee; border-block: 1px solid #b8c0b9; }
.drug-series-card figure svg { display: block; width: 100%; height: auto; }
.drug-series-compounds { display: grid; gap: 1px; background: #c8cec8; }
.drug-series-compounds div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; padding: 11px 15px; background: #eef1e7; }
.drug-series-compounds b { font: 700 14px var(--sans); }
.drug-series-compounds span { color: #4d5a52; font: 11px var(--mono); }
.drug-series-card > p { margin: 0; padding: 18px 22px; color: #465149; font-size: 14px; }
.drug-series-card > footer { display: flex; flex-wrap: wrap; gap: 7px; margin-top: auto; padding: 0 22px 22px; background: transparent; }
.drug-series-card > footer a { padding: 5px 8px; color: #17352c; background: #dce7d2; font: 9px var(--mono); text-decoration: none; }
.drug-series-card > footer a:hover { color: #fff; background: #17352c; }
.naming-check-practice { display: grid; grid-template-columns: .85fr 1.15fr; gap: 16px; margin-top: 54px; }
.naming-checklist, .naming-practice { padding: 28px; border-top: 6px solid; }
.naming-checklist { color: #eef5ef; background: #17352c; border-color: var(--green); }
.naming-practice { background: #f7efe2; border-color: var(--orange); }
.naming-checklist h3, .naming-practice h3 { margin: 4px 0 16px; font: 700 28px var(--sans); }
.naming-checklist ul { margin: 0; padding: 0; list-style: none; }
.naming-checklist li { position: relative; padding: 9px 0 9px 28px; border-bottom: 1px solid #3b5a50; }
.naming-checklist li::before { content: "□"; position: absolute; left: 0; color: var(--green); }
.naming-practice details { border-top: 1px solid #bcae98; }
.naming-practice summary { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 13px 0; cursor: pointer; font-weight: 700; }
.naming-practice summary i { color: var(--orange); font: 11px var(--mono); font-style: normal; }
.naming-practice details p { margin: 0 0 16px 42px; color: #4c5650; }
.naming-sources { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 30px; padding-top: 20px; border-top: 1px solid #95a096; font: 10px var(--mono); }
.naming-sources > span { color: #68756d; }
.naming-sources a { padding: 6px 9px; color: #17352c; background: #dce7d2; text-decoration: none; }
.naming-sources a:hover { color: #fff; background: #17352c; }

.deep-dive-chip { color: #17352c; border-color: #2f6554; background: #dcebd2; }
.deep-dive-lab {
  position: relative;
  margin: 76px 0;
  padding: 34px;
  background: #efe9da;
  border: 1px solid #87938a;
  box-shadow: 12px 12px 0 #d1c7b5;
}
.deep-dive-lab::before { content: ""; position: absolute; inset: 8px; pointer-events: none; border: 1px solid rgba(23,53,44,.17); }
.deep-dive-header { position: relative; display: grid; grid-template-columns: 108px 1fr 85px; gap: 26px; align-items: start; padding-bottom: 30px; border-bottom: 5px solid #17352c; }
.deep-dive-mark { display: grid; width: 98px; min-height: 118px; color: #17352c; background: var(--green); border: 2px solid #17352c; text-align: center; }
.deep-dive-mark span { padding: 8px; border-bottom: 1px solid #17352c; font: 12px var(--mono); }
.deep-dive-mark b { align-self: center; font: 800 18px/1.05 var(--sans); letter-spacing: .08em; }
.deep-dive-header h2 { max-width: 850px; margin: 7px 0 12px; font: 750 clamp(35px,4.5vw,58px)/1.03 var(--sans); letter-spacing: -.035em; }
.deep-dive-header p { max-width: 890px; margin: 0; color: #435048; font-size: 16px; }
.deep-dive-header aside { display: grid; grid-template-columns: 1fr; justify-items: end; padding-left: 14px; border-left: 1px solid #9ca69f; }
.deep-dive-header aside b { color: #9f4c2d; font: 800 31px var(--mono); line-height: 1; }
.deep-dive-header aside span { margin: 2px 0 13px; color: #6d756e; font: 9px var(--mono); letter-spacing: .12em; }
.deep-pathway { display: grid; grid-template-columns: repeat(5,1fr); margin: 24px 0 46px; border: 1px solid #8b958e; background: #17352c; }
.deep-pathway div { position: relative; display: grid; grid-template-columns: 30px 1fr; align-items: center; min-height: 72px; padding: 12px 16px; color: #eff5ed; border-right: 1px solid #4d625a; }
.deep-pathway div:last-child { border-right: 0; }
.deep-pathway div:not(:last-child)::after { content: "→"; position: absolute; right: -9px; z-index: 1; color: var(--green); background: #17352c; font: 16px var(--mono); }
.deep-pathway i { color: var(--green); font: 10px var(--mono); font-style: normal; }
.deep-pathway span { font: 700 14px var(--sans); }
.deep-section-heading { display: grid; grid-template-columns: 165px 1fr; gap: 4px 22px; align-items: end; margin: 48px 0 18px; }
.deep-section-heading span { grid-row: span 2; align-self: stretch; padding: 9px 12px; color: #eef5ef; background: #17352c; font: 10px var(--mono); letter-spacing: .08em; }
.deep-section-heading h3 { margin: 0; font: 750 30px/1.1 var(--sans); }
.deep-section-heading p { margin: 0; color: #637068; font-size: 13px; }
.deep-lessons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #7c887f; border-left: 1px solid #7c887f; }
.deep-lesson-card { position: relative; min-height: 245px; padding: 28px 30px 28px 74px; background: #fbf7ec; border-right: 1px solid #7c887f; border-bottom: 1px solid #7c887f; }
.deep-lesson-card:nth-child(4n+2), .deep-lesson-card:nth-child(4n+3) { background: #e3ead8; }
.deep-lesson-card > i { position: absolute; left: 24px; top: 30px; display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: #ef8450; border-radius: 50%; font: 10px var(--mono); font-style: normal; }
.deep-lesson-card h3 { margin: 0 0 12px; font: 750 23px/1.18 var(--sans); }
.deep-lesson-card p { margin: 0; color: #48544d; font-size: 14px; line-height: 1.75; }
.deep-figure-gallery { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.deep-dive-figure { margin: 0; overflow: hidden; background: #fffaf0; border: 1px solid #7b877f; box-shadow: 5px 5px 0 #d3c9b7; }
.deep-dive-figure:first-child { grid-column: 1/-1; }
.deep-dive-figure svg { display: block; width: 100%; height: auto; }
.deep-dive-figure figcaption { display: grid; grid-template-columns: 72px 1fr; gap: 15px; padding: 15px 18px; color: #46524b; border-top: 1px solid #8d978f; font-size: 13px; }
.deep-dive-figure figcaption b { color: #9f4c2d; font: 10px var(--mono); letter-spacing: .08em; }
.deep-case-lab { display: grid; grid-template-columns: .85fr 1.15fr; border: 1px solid #687970; background: #17352c; box-shadow: 7px 7px 0 #c7bcaa; }
.deep-case-lab > header { grid-column: 1/-1; padding: 22px 27px; color: #eef4ec; border-bottom: 1px solid #52665e; }
.deep-case-lab header span, .deep-glossary header span, .deep-self-test header span { color: var(--green); font: 9px var(--mono); letter-spacing: .11em; }
.deep-case-lab header h3 { margin: 4px 0 0; font: 750 29px/1.1 var(--sans); }
.case-scenario, .case-evidence { padding: 25px 27px; color: #d7e0da; }
.case-scenario { border-right: 1px solid #52665e; }
.case-scenario > b, .case-evidence > b { color: var(--green); font: 10px var(--mono); }
.case-scenario p { margin: 10px 0 0; }
.case-evidence ol { margin: 10px 0 0; padding-left: 22px; }
.case-evidence li + li { margin-top: 7px; }
.deep-case-lab details { grid-column: 1/-1; color: #263831; background: #dce7d2; border-top: 1px solid #52665e; }
.deep-case-lab summary { padding: 16px 27px; cursor: pointer; color: #17352c; font: 750 14px var(--sans); }
.deep-case-lab details p { margin: 0; padding: 0 27px 24px; }
.deep-reference-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 1px; margin-top: 48px; background: #8b958e; border: 1px solid #8b958e; }
.deep-glossary, .deep-self-test { background: #fbf7ec; }
.deep-glossary header, .deep-self-test header { padding: 24px 26px; color: #eef5ef; background: #17352c; }
.deep-glossary header h3, .deep-self-test header h3 { margin: 3px 0 0; font: 750 25px var(--sans); }
.deep-glossary dl { margin: 0; padding: 8px 26px 24px; }
.deep-glossary dl div { display: grid; grid-template-columns: 102px 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid #c0b8a8; }
.deep-glossary dt { color: #9f4c2d; font: 750 14px var(--sans); }
.deep-glossary dd { margin: 0; color: #4b5750; font-size: 13px; }
.deep-self-test { padding-bottom: 20px; }
.deep-self-test details { margin: 0 25px; border-bottom: 1px solid #c0b8a8; }
.deep-self-test summary { display: grid; grid-template-columns: 34px 1fr; gap: 8px; padding: 15px 0; cursor: pointer; font-weight: 700; line-height: 1.45; }
.deep-self-test summary i { color: #ef8450; font: 10px var(--mono); font-style: normal; }
.deep-self-test details p { margin: 0 0 16px 42px; color: #4b5750; font-size: 13px; }
.deep-practicum { margin-top: 34px; border: 1px solid #7b877f; background: #f7f1e3; }
.deep-practicum > header { display: grid; grid-template-columns: 180px 1fr; gap: 3px 20px; padding: 22px 26px; color: #edf4ec; background: #17352c; }
.deep-practicum > header span { grid-row: span 2; color: var(--green); font: 9px var(--mono); letter-spacing: .1em; }
.deep-practicum > header h3 { margin: 0; font: 750 26px/1.1 var(--sans); }
.deep-practicum > header p { margin: 0; color: #b9c8c1; font-size: 13px; }
.deep-practicum > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.deep-practicum article { position: relative; min-height: 180px; padding: 25px 26px 25px 72px; border-right: 1px solid #a9a18f; border-bottom: 1px solid #a9a18f; }
.deep-practicum article:nth-child(2n) { border-right: 0; }
.deep-practicum article:nth-last-child(-n+2) { border-bottom: 0; }
.deep-practicum article i { position: absolute; left: 24px; top: 27px; color: #ef8450; font: 11px var(--mono); font-style: normal; }
.deep-practicum article b { font: 750 20px var(--sans); }
.deep-practicum article p { margin: 9px 0 0; color: #4a564f; font-size: 13px; }

.core-causal-figure { margin: 40px 0 65px; overflow: hidden; background: #102820; border: 1px solid #51675e; box-shadow: 10px 10px 0 #d2c9b7; }
.core-causal-figure svg { display: block; width: 100%; height: auto; }
.core-causal-figure figcaption { padding: 17px 22px; color: #d9e3dc; background: #17352c; border-top: 1px solid #51675e; font-size: 13px; }
.core-principles { margin: 65px 0; border: 1px solid #17352c; background: #17352c; }
.core-principles > header { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; padding: 23px 28px; color: #f3f7f1; border-bottom: 1px solid #557066; }
.core-principles > header span { color: var(--green); font: 10px var(--mono); letter-spacing: .1em; }
.core-principles > header h2 { margin: 0; font: 750 30px var(--sans); }
.core-principles > div { display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: #63766e; }
.core-principles article { min-height: 255px; padding: 28px 24px; background: #f7f2e7; }
.core-principles article:nth-child(even) { background: #dce8d2; }
.core-principles article i { color: #ef8450; font: 11px var(--mono); font-style: normal; }
.core-principles article h3 { margin: 35px 0 10px; font: 750 22px/1.15 var(--sans); }
.core-principles article p { margin: 0; color: #4a5650; font-size: 13px; }
.core-section-title { display: grid; grid-template-columns: 190px 1fr; gap: 5px 25px; margin: 70px 0 22px; padding-bottom: 17px; border-bottom: 5px solid #17352c; }
.core-section-title span { grid-row: span 2; align-self: start; padding: 9px 11px; color: #f1f6ef; background: #17352c; font: 9px var(--mono); letter-spacing: .1em; }
.core-section-title h2 { margin: 0; font: 750 37px/1.08 var(--sans); letter-spacing: -.02em; }
.core-section-title p { margin: 0; color: #617068; font-size: 13px; }
.atom-chapter { margin: 28px 0 52px; border: 1px solid #819087; background: #f8f3e7; box-shadow: 8px 8px 0 #d0c7b6; }
.atom-chapter > header { display: grid; grid-template-columns: 105px 1fr; min-height: 105px; color: #eff5ee; background: #17352c; }
.atom-chapter > header > b { display: grid; place-items: center; color: #13211d; background: var(--green); border-right: 1px solid #5d7168; font: 800 58px var(--sans); }
.atom-chapter > header > div { padding: 18px 25px; }
.atom-chapter > header span { color: #9cb2a8; font: 9px var(--mono); letter-spacing: .12em; }
.atom-chapter > header h3 { margin: 4px 0 0; font: 750 29px/1.08 var(--sans); }
.atom-chapter > figure { margin: 0; border-bottom: 1px solid #819087; }
.atom-chapter > figure svg { display: block; width: 100%; height: auto; }
.atom-chapter > figure figcaption { padding: 12px 20px; color: #657068; background: #ebe4d5; font-size: 12px; }
.atom-state-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 1px; background: #9da69e; }
.atom-state-grid section { position: relative; min-height: 230px; padding: 25px; background: #fbf7ec; }
.atom-state-grid section i { position: absolute; top: 19px; right: 20px; color: #ef8450; font: 10px var(--mono); font-style: normal; }
.atom-state-grid h4 { margin: 0 0 9px; padding-right: 28px; font: 750 21px var(--sans); }
.atom-state-grid code { display: block; width: max-content; max-width: 100%; margin-bottom: 15px; padding: 4px 7px; color: #17352c; background: #dfe9d6; font: 12px var(--mono); }
.atom-state-grid section > b { display: block; color: #9d4b2e; font: 700 13px var(--sans); }
.atom-state-grid p { margin: 8px 0 0; color: #4c5851; font-size: 13px; }
.atom-n > header > b { background: #60a7c7; }
.atom-o > header > b { color: white; background: #ef8450; }
.esp-method-lab { margin:70px 0; }
.esp-contrast { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:#718078; border:1px solid #718078; }
.esp-contrast article { min-height:220px; padding:27px; background:#fbf7ec; }
.esp-contrast article:last-child { color:#edf5ef; background:#17352c; }
.esp-contrast span, .esp-protocol header span, .esp-structure-cases header span { color:#e36f3d; font:10px var(--mono); letter-spacing:.1em; }
.esp-contrast article:last-child span { color:var(--green); }
.esp-contrast h3 { margin:27px 0 8px; font:750 26px var(--sans); }
.esp-contrast p { margin:0; color:#526058; }
.esp-contrast article:last-child p { color:#bdcbc4; }
.esp-contrast b { display:block; margin-top:19px; padding-top:12px; border-top:1px solid #aeb7ae; font:700 13px var(--sans); }
.esp-contrast article:last-child b { color:#f4a171; border-color:#52675f; }
.esp-protocol { display:grid; grid-template-columns:240px 1fr; border:1px solid #718078; border-top:0; }
.esp-protocol header { padding:25px; background:#e0e9d8; }
.esp-protocol h3 { margin:12px 0 0; font:750 24px/1.15 var(--sans); }
.esp-protocol ol { margin:0; padding:24px 28px 20px 50px; background:#fbf7ec; }
.esp-protocol li + li { margin-top:8px; }
.esp-protocol code { grid-column:1/-1; padding:14px 20px; color:#dce8e0; background:#10231d; white-space:normal; font:12px/1.55 var(--mono); }
.esp-comparisons { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-top:18px; }
.esp-comparisons article { position:relative; min-height:200px; padding:24px 25px 22px 68px; background:#e4eadb; border-top:4px solid #2f6554; }
.esp-comparisons i { position:absolute; top:27px; left:24px; color:#e36f3d; font:11px var(--mono); font-style:normal; }
.esp-comparisons h3 { margin:0 0 7px; font:750 22px var(--sans); }
.esp-comparisons p { margin:0; color:#4f5b55; font-size:13px; }
.esp-comparisons b { display:block; margin-top:14px; font:700 12px var(--sans); }
.esp-structure-cases { display:grid; grid-template-columns:repeat(3,1fr); margin-top:18px; border:1px solid #718078; }
.esp-structure-cases header { grid-column:1/-1; padding:20px 24px; color:#edf5ef; background:#17352c; }
.esp-structure-cases header span { color:var(--green); }
.esp-structure-cases header h3 { margin:5px 0 0; font:750 25px var(--sans); }
.esp-structure-cases a { display:grid; grid-template-columns:60px 1fr 16px; gap:10px; align-items:start; min-height:155px; padding:22px; color:#25362f; background:#fbf7ec; border-right:1px solid #a9b1a7; text-decoration:none; }
.esp-structure-cases a:last-child { border-right:0; }
.esp-structure-cases a:hover { background:var(--green); }
.esp-structure-cases a>b { color:#e36f3d; font:12px var(--mono); }
.esp-structure-cases a span { display:grid; gap:7px; }
.esp-structure-cases strong { font:750 17px var(--sans); }
.esp-structure-cases small { color:#5d6962; line-height:1.55; }
.esp-structure-cases i { color:#2f6554; font-style:normal; }
.interaction-atlas > div { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); border-top: 1px solid #7c8981; border-left: 1px solid #7c8981; }
.interaction-atlas article { position: relative; min-height: 235px; padding: 28px 30px 25px 78px; background: #fbf7ec; border-right: 1px solid #7c8981; border-bottom: 1px solid #7c8981; }
.interaction-atlas article:nth-child(4n+2), .interaction-atlas article:nth-child(4n+3) { background: #e0e9d8; }
.interaction-atlas article i { position: absolute; left: 25px; top: 31px; color: #fff; background: #ef8450; padding: 5px 7px; font: 10px var(--mono); font-style: normal; }
.interaction-atlas h3 { margin: 0 0 9px; font: 750 25px var(--sans); }
.interaction-atlas p { margin: 0; color: #4b5750; font-size: 14px; }
.interaction-atlas article > b { display: block; margin-top: 17px; padding-top: 11px; color: #285b4c; border-top: 1px solid #b2b9b0; font: 700 12px var(--sans); }
.isomer-atlas > figure { margin: 0; overflow: hidden; border: 1px solid #819087; box-shadow: 7px 7px 0 #d2c9b7; }
.isomer-atlas > figure svg { display: block; width: 100%; height: auto; }
.isomer-atlas > figure figcaption { padding: 13px 18px; color: #526058; background: #faf6ec; border-top: 1px solid #819087; font-size: 12px; }
.isomer-atlas > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-top: 22px; }
.isomer-atlas article { min-height: 190px; padding: 23px; background: #17352c; border-top: 5px solid var(--green); }
.isomer-atlas article i { color: #ef8450; font: 10px var(--mono); font-style: normal; }
.isomer-atlas article h3 { margin: 20px 0 8px; color: #f1f5ef; font: 750 21px var(--sans); }
.isomer-atlas article p { margin: 0; color: #b9c8c1; font-size: 13px; }
.core-week-jump { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding: 18px 22px; color: #17352c; background: var(--green); border: 1px solid #17352c; text-decoration: none; }
.core-week-jump span { font: 9px var(--mono); letter-spacing: .1em; }
.core-week-jump b { font: 750 17px var(--sans); }
.hetero-question { margin: 75px 0; padding: 32px; background: #e1ead9; border: 1px solid #73847b; box-shadow: 11px 11px 0 #c9bfad; }
.hetero-question > header { display: grid; grid-template-columns: 180px 1fr; gap: 7px 25px; padding-bottom: 25px; border-bottom: 5px solid #17352c; }
.hetero-question > header span { grid-row: span 2; align-self: start; padding: 8px 10px; color: #eff5ed; background: #17352c; font: 9px var(--mono); }
.hetero-question > header h2 { margin: 0; font: 750 39px/1.05 var(--sans); }
.hetero-question > header p { margin: 0; color: #46554d; }
.hetero-question > figure { margin: 26px 0 18px; border: 1px solid #7e8d85; }
.hetero-question > figure svg { display: block; width: 100%; height: auto; }
.hetero-question > figure figcaption { padding: 13px 17px; color: #526058; background: #f9f5eb; border-top: 1px solid #7e8d85; font-size: 12px; }
.hetero-case-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 1px; background: #89968f; border: 1px solid #89968f; }
.hetero-case-grid article { position: relative; min-height: 220px; padding: 25px 27px 24px 70px; background: #fbf7ec; }
.hetero-case-grid article:last-child { grid-column: 1/-1; min-height: 170px; }
.hetero-case-grid i { position: absolute; left: 25px; top: 28px; color: #ef8450; font: 11px var(--mono); font-style: normal; }
.hetero-case-grid h3 { margin: 0 0 9px; font: 750 21px/1.15 var(--sans); }
.hetero-case-grid b { color: #285b4c; font: 750 13px var(--sans); }
.hetero-case-grid p { margin: 9px 0 0; color: #4a5650; font-size: 13px; }
.hetero-checklist { display: grid; grid-template-columns: 180px 1fr; gap: 22px; margin-top: 18px; padding: 22px 25px; color: #edf5ef; background: #17352c; }
.hetero-checklist span { color: var(--green); font: 9px var(--mono); letter-spacing: .1em; }
.hetero-checklist ol { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px 30px; margin: 0; padding-left: 22px; font-size: 13px; }
.design-gates > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 14px; }
.design-gates article { min-height: 245px; padding: 27px; color: #edf4ec; background: #17352c; border: 1px solid #536a61; box-shadow: 5px 5px 0 #cfc5b3; }
.design-gates article > span { color: var(--green); font: 9px var(--mono); letter-spacing: .12em; }
.design-gates h3 { margin: 28px 0 9px; font: 750 29px var(--sans); }
.design-gates p { margin: 0; color: #bccac3; font-size: 14px; }
.design-gates article > b { display: block; margin-top: 18px; padding-top: 12px; color: #f2a171; border-top: 1px solid #52675f; font: 700 13px var(--sans); }
.core-week-map { margin: 70px 0 40px; border: 1px solid #77857d; }
.core-week-map > header { display: grid; grid-template-columns: 180px 1fr; gap: 20px; align-items: center; padding: 20px 24px; color: #edf4ec; background: #17352c; }
.core-week-map header span { color: var(--green); font: 9px var(--mono); }
.core-week-map header h2 { margin: 0; font: 750 29px var(--sans); }
.core-week-map > div { display: grid; grid-template-columns: repeat(3,1fr); }
.core-week-map a { display: grid; grid-template-columns: 55px 1fr 20px; gap: 8px; align-items: center; min-height: 90px; padding: 15px 18px; color: #263831; background: #fbf7ec; border-right: 1px solid #b7b0a1; border-bottom: 1px solid #b7b0a1; text-decoration: none; }
.core-week-map a:hover { color: #fff; background: #2f6554; }
.core-week-map a b { color: #ef8450; font: 12px var(--mono); }
.core-week-map a span { font: 700 14px/1.35 var(--sans); }
.core-week-map a i { color: var(--green); font-style: normal; }
.core-sources { margin: 45px 0 0; }
.core-sources > header { display: grid; grid-template-columns: 200px 1fr; align-items: center; padding-bottom: 15px; border-bottom: 4px solid #17352c; }
.core-sources header span { font: 9px var(--mono); letter-spacing: .1em; }
.core-sources header h2 { margin: 0; font: 750 27px var(--sans); }
.core-sources > div { display: grid; grid-template-columns: repeat(2,1fr); gap: 1px; background: #8b958e; border: 1px solid #8b958e; }
.core-sources a { display: grid; grid-template-columns: 35px 1fr 20px; gap: 10px; align-items: center; min-height: 105px; padding: 17px; color: #263831; background: #fbf7ec; text-decoration: none; }
.core-sources a:hover { background: #e1ead8; }
.core-sources i { color: #ef8450; font: 10px var(--mono); font-style: normal; }
.core-sources a span { display: grid; }
.core-sources a b { font: 700 14px/1.3 var(--sans); }
.core-sources a small { color: #667169; }
.core-sources em { color: #2f6554; font-style: normal; }

footer { display: flex; justify-content: space-between; padding: 20px 30px; color: #71817a; background: #07100e; font: 10px var(--mono); letter-spacing: .08em; }

@media (max-width: 1150px) {
  .dashboard-actions { grid-template-columns:repeat(2,1fr); }
  .stage-roadmap > div { grid-template-columns:repeat(2,1fr); }
  .source-grid,
  .library-sources .source-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .formula-card { grid-template-columns: 120px 1fr; }
  .formula-copy { grid-column: 1 / -1; border-top: 1px solid #405049; }
  .formula-expression { border-right: 0; }
  .naming-workflow { grid-template-columns: repeat(3, 1fr); }
  .naming-workflow article:nth-child(3)::after { display: none; }
  .substituent-atlas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .deep-dive-header { grid-template-columns: 96px 1fr; }
  .deep-dive-header aside { grid-column: 2; grid-template-columns: auto auto auto auto; justify-content: start; justify-items: start; gap: 7px; padding: 0; border-left: 0; }
  .deep-dive-header aside b { font-size: 20px; }
  .deep-dive-header aside span { margin-right: 12px; }
  .core-principles > div { grid-template-columns: repeat(2,1fr); }
  .core-principles article:last-child { grid-column: 1/-1; min-height: 190px; }
  .atom-state-grid { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .masthead { min-height:72px; align-items:center; padding:10px 14px; }
  .brand-mark { width:42px; height:42px; }
  .mast-actions { display:flex; align-items:center; gap:8px; }
  .mast-actions .search, .mast-actions .library-button, .mast-actions #print { display:none; }
  .menu-toggle { display:block; min-height:44px; }
  .rail { position: fixed; z-index:12; left:0; top:0; width:min(88vw,360px); height:100dvh; max-height:none; padding:16px 20px 32px; border-right:1px solid #52665e; border-bottom:0; transform:translateX(-105%); transition:transform .25s ease-out; }
  .rail-open .rail { transform:translateX(0); }
  .rail-mobile-head { position:sticky; z-index:1; top:-16px; display:flex; justify-content:space-between; align-items:center; margin:-16px -20px 18px; padding:14px 20px; color:#edf3ec; background:#0f1d19; border-bottom:1px solid #40544b; }
  .rail-mobile-head b { font:700 17px var(--sans); }
  .rail-mobile-head button { width:44px; height:44px; color:#edf3ec; background:transparent; border:1px solid #53665e; font-size:27px; }
  .rail-search { display:grid; margin-bottom:18px; color:#9baba3; font:9px var(--mono); letter-spacing:.12em; }
  .rail-search input { min-height:44px; margin-top:5px; padding:8px 11px; color:#eef4ef; background:#152820; border:1px solid #52665e; font:15px var(--serif); }
  .rail-backdrop { position:fixed; z-index:11; inset:0; display:block; width:100%; height:100%; border:0; background:rgba(2,10,7,.72); }
  .rail-backdrop[hidden] { display:none; }
  .week-link { min-height:44px; align-items:center; }
  .home-link, .core-link, .practice-link, .nomenclature-link, .library-link { min-height:62px; }
  .section-grid,
  .objectives,
  .judgement-grid,
  .library-principles { grid-template-columns: 1fr; }
  main { padding: 36px 20px 80px; }
  h1 { font-size: 48px; }
  .questions { grid-template-columns: 1fr; }
  .big-idea { padding: 28px 24px 28px 70px; }
  .big-idea::before { left: 13px; font-size: 105px; }
  .big-idea p { font-size: 20px; }
  .step-track { grid-template-columns: 1fr; }
  .step-card { min-height: 0; }
  .step-card::after { right: auto; left: 45%; top: auto; bottom: -15px; transform: rotate(90deg); }
  .hero-figure svg { min-height: 0; }
  .deep-figure { box-shadow: 6px 6px 0 #d8d0bf; }
  .nomenclature-lab { margin: 65px 0; box-shadow: 8px 8px 0 #d9d0bd; }
  .naming-workflow { grid-template-columns: 1fr; }
  .naming-workflow article { min-height: 0; }
  .naming-workflow article::after, .naming-workflow article:nth-child(3)::after { display: block; right: auto; left: 47%; top: auto; bottom: -12px; transform: rotate(90deg); }
  .naming-workflow article:last-child::after { display: none; }
  .naming-rules, .naming-check-practice { grid-template-columns: 1fr; }
  .drug-series-grid { grid-template-columns: 1fr; }
  .generic-clarifier { grid-template-columns: 1fr; }
  .textbook-bench-header, .textbook-worked { grid-template-columns: 1fr; }
  .textbook-bench-header > div, .textbook-worked > div { grid-row: auto; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid #496158; }
  .textbook-worked > div { border-color: #a0ad9e; }
  .deep-dive-lab { margin: 65px 0; padding: 25px; box-shadow: 8px 8px 0 #d1c7b5; }
  .deep-pathway { grid-template-columns: 1fr; }
  .deep-pathway div { border-right: 0; border-bottom: 1px solid #4d625a; }
  .deep-pathway div:not(:last-child)::after { content: "↓"; right: 48%; bottom: -14px; }
  .deep-lessons, .deep-figure-gallery, .deep-reference-grid, .deep-case-lab { grid-template-columns: 1fr; }
  .deep-practicum > div { grid-template-columns: 1fr; }
  .deep-practicum article, .deep-practicum article:nth-child(2n), .deep-practicum article:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid #a9a18f; }
  .deep-practicum article:last-child { border-bottom: 0; }
  .deep-dive-figure:first-child { grid-column: auto; }
  .case-scenario { border-right: 0; border-bottom: 1px solid #52665e; }
  .core-principles > header, .core-section-title, .hetero-question > header, .core-week-map > header, .core-sources > header { grid-template-columns: 1fr; }
  .core-principles > header span, .core-section-title span, .hetero-question > header span { grid-row: auto; width: max-content; }
  .core-principles > div, .atom-state-grid, .esp-contrast, .esp-comparisons, .esp-structure-cases, .interaction-atlas > div, .isomer-atlas > div, .hetero-case-grid, .design-gates > div, .core-week-map > div, .core-sources > div { grid-template-columns: 1fr; }
  .esp-protocol { grid-template-columns:1fr; }
  .esp-protocol code, .esp-structure-cases header { grid-column:auto; }
  .esp-structure-cases a { border-right:0; border-bottom:1px solid #a9b1a7; }
  .core-principles article:last-child, .hetero-case-grid article:last-child { grid-column: auto; }
  .core-principles article, .interaction-atlas article { min-height: 0; }
  .hetero-checklist { grid-template-columns: 1fr; }
  .dashboard-hero { grid-template-columns:1fr; min-height:0; margin:-36px -20px 0; padding:55px 24px; }
  .dashboard-hero aside { min-height:210px; }
  .continue-panel { grid-template-columns:1fr; padding:24px; }
  .continue-panel a { justify-self:start; min-height:44px; }
  .stage-roadmap > header, .case-spine > header, .checkpoint-grid > header, .lab-grid > header { grid-template-columns:1fr; }
  .case-spine > header p, .lab-grid > header p { grid-column:auto; }
  .case-spine > div { grid-template-columns:1fr; }
  .diagnostic-block > div { grid-template-columns:1fr; }
  .lab-grid article { grid-template-columns:1fr; }
  .lab-grid article > header { grid-row:auto; }
  .lab-grid article > footer { grid-column:auto; }
  .review-loop > div { grid-template-columns:repeat(2,1fr); }
  .search-panel { top:72px; right:14px; width:calc(100vw - 28px); }
}

@media (max-width: 600px) {
  main { padding-left:16px; padding-right:16px; }
  h1 { font-size:42px; }
  .dashboard-hero { margin-left:-16px; margin-right:-16px; }
  .dashboard-hero h1 { font-size:52px; }
  .dashboard-hero aside b { font-size:72px; }
  .dashboard-actions, .stage-roadmap > div, .checkpoint-grid > div, .diagnostic-block > ol, .supplement-strip > div, .lesson-pagination { grid-template-columns:1fr; }
  .dashboard-actions a { min-height:140px; }
  .dashboard-rule { grid-template-columns:1fr; }
  .lab-grid dl, .lab-grid article > ol { grid-template-columns:1fr; }
  .review-loop > div { grid-template-columns:1fr; }
  .lesson-pagination a:last-child { text-align:left; }
  .search-panel > div { grid-template-columns:1fr; }
  .source-grid,
  .library-sources .source-grid { grid-template-columns: 1fr; }
  .source-card { min-height: 270px; }
  .formula-card { grid-template-columns: 1fr; }
  .formula-label,
  .formula-expression { border-right: 0; }
  .formula-label { border-bottom: 1px solid #405049; }
  .formula-expression { min-height: 110px; }
  .section-heading h2 { font-size: 29px; }
  .route-line { padding: 22px 18px; }
  .deep-figure figcaption { padding: 13px 15px; }
  .judgement-grid { gap: 12px; }
  .nomenclature-header { grid-template-columns: 1fr; }
  .nomenclature-mark { width: 65px; height: 65px; }
  .paired-course { grid-template-columns: 1fr; }
  .naming-examples, .substituent-atlas { grid-template-columns: 1fr; }
  .naming-example:nth-child(3) { grid-column: auto; }
  .naming-section-title { grid-template-columns: 45px 1fr; }
  .naming-section-title b { font-size: 24px; }
  .substituent-group > header { grid-template-columns: 34px 1fr; }
  .substituent-group > header b { grid-column: 2; }
  .drug-series-compounds div { grid-template-columns: 1fr; gap: 2px; }
  .textbook-columns { grid-template-columns: 1fr; }
  .textbook-bench { box-shadow: 6px 6px 0 #d7cebc; }
  .textbook-bench-header, .textbook-column, .textbook-worked { padding-left: 21px; padding-right: 21px; }
  .deep-dive-lab { padding: 18px; }
  .deep-dive-header { grid-template-columns: 1fr; }
  .deep-dive-mark { width: 78px; min-height: 88px; }
  .deep-dive-header aside { grid-column: auto; }
  .deep-section-heading { grid-template-columns: 1fr; }
  .deep-section-heading span { grid-row: auto; }
  .deep-lesson-card { min-height: 0; padding: 24px 22px 24px 66px; }
  .deep-lesson-card h3 { font-size: 21px; }
  .deep-dive-figure figcaption { grid-template-columns: 1fr; gap: 5px; }
  .deep-glossary dl div { grid-template-columns: 1fr; gap: 4px; }
  .deep-practicum > header { grid-template-columns: 1fr; }
  .deep-practicum > header span { grid-row: auto; }
  .atom-chapter > header { grid-template-columns: 78px 1fr; }
  .atom-chapter > header > b { font-size: 43px; }
  .atom-chapter > header h3 { font-size: 23px; }
  .hetero-question { padding: 18px; }
  .hetero-checklist ol { grid-template-columns: 1fr; }
  .core-week-jump { align-items: flex-start; flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #lesson > * { animation: none; }
  .source-card { transition: none; }
}

@media print {
  .masthead,
  .rail,
  .search-panel,
  .rail-backdrop,
  footer,
  .complete,
  .noise { display: none; }
  .shell { display: block; }
  main { padding: 0; background: white; }
  .hero-figure,
  .deep-figure { break-inside: avoid; box-shadow: none; }
  .concept,
  .case,
  .assignment,
  .reading,
  .formula-card,
  .step-card,
  .pitfalls,
  .bridge,
  .source-card { break-inside: avoid; }
  .nomenclature-lab, .naming-example, .substituent-card, .drug-series-card, .substituent-group > header { break-inside: avoid; }
  .textbook-bench, .textbook-column, .textbook-worked { break-inside: avoid; box-shadow: none; }
  .deep-dive-lab { box-shadow: none; }
  .deep-lesson-card, .deep-dive-figure, .deep-case-lab, .deep-glossary dl div, .deep-self-test details, .deep-practicum article { break-inside: avoid; }
  .atom-chapter, .atom-state-grid section, .interaction-atlas article, .isomer-atlas article, .hetero-case-grid article, .design-gates article { break-inside: avoid; }
  #lesson > * { animation: none; }
  .source-grid { grid-template-columns: repeat(2, 1fr); }
}