:root {
  --sr-ink: var(--fz-ink);
  --sr-deep: var(--fz-ink-deep);
  --sr-copy: var(--fz-ink-secondary);
  --sr-muted: var(--fz-ink-muted);
  --sr-paper: #f7f8fc;
  --sr-white: var(--fz-white);
  --sr-powder: var(--fz-powder);
  --sr-blue: var(--fz-blue);
  --sr-blue-deep: var(--fz-blue-deep);
  --sr-lilac: #e9e2f2;
  --sr-mint: #dcecdf;
  --sr-sun: #f4eab8;
  --sr-peach: #f1dfd6;
  --sr-line: rgba(10, 27, 61, .13);
  --sr-shadow: 0 24px 70px -42px rgba(6, 15, 38, .48);
  --sr-font-heading: var(--fz-font-editorial);
  --sr-font-body: var(--fz-font-body);
  --sr-font-code: var(--fz-font-mono);
  --sr-shell: min(1320px, calc(100% - 48px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--sr-deep); }
body {
  margin: 0;
  background: var(--sr-paper);
  color: var(--sr-ink);
  font-family: var(--sr-font-body);
  font-size: 16px;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
}

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: var(--sr-blue-deep); }
img, svg { max-width: 100%; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.shell { width: var(--sr-shell); margin-inline: auto; }
.eyebrow {
  margin: 0 0 12px;
  color: var(--sr-blue-deep);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}

h1, h2, h3, h4 {
  margin-top: 0;
  color: var(--sr-ink);
  font-family: var(--sr-font-heading);
  font-weight: 520;
  letter-spacing: -.035em;
  line-height: 1.02;
}

p { margin: 0 0 1em; }
strong { font-weight: 700; }

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 12px;
  left: 12px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #fff;
  color: var(--sr-ink);
  box-shadow: var(--fz-shadow-card);
  transform: translateY(-180%);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
  position: relative;
  z-index: 30;
  background: var(--sr-deep);
  color: #fff;
}

.header-inner {
  min-height: 68px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 28px;
}

.wordmark {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1em;
  text-decoration: none;
}
.wordmark small { color: var(--sr-powder); }
.wordmark-mark {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50% 50% 44% 56% / 53% 42% 58% 47%;
  background: var(--sr-blue);
  color: #fff;
  font: 600 22px/1 var(--sr-font-heading);
  transform: rotate(-6deg);
}

.header-course {
  margin: 0;
  color: rgba(255, 255, 255, .76);
  font-size: 14px;
  font-weight: 600;
}

.header-links { display: flex; align-items: center; gap: 22px; }
.header-links a { min-height: 44px; display: inline-flex; align-items: center; color: #fff; font-size: 14px; text-decoration: none; }
.header-links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.open-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(221, 235, 251, .13);
  color: var(--sr-powder);
  font-size: 12px;
  font-weight: 700;
}
.open-badge span { color: #70d4a7; font-size: 9px; }

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 116px) 0 54px;
  background:
    radial-gradient(circle at 82% 16%, rgba(77, 138, 234, .18), transparent 29%),
    radial-gradient(circle at 10% 85%, rgba(221, 235, 251, .8), transparent 34%),
    linear-gradient(180deg, #fff 0%, var(--sr-paper) 100%);
}

.hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.03fr) minmax(380px, .87fr);
  align-items: center;
  gap: clamp(48px, 7vw, 100px);
}

.hero-copy { max-width: 720px; }
.hero-copy .eyebrow { margin-bottom: 20px; }
.hero h1 {
  max-width: 14ch;
  margin-bottom: 26px;
  font-size: clamp(58px, 7.1vw, 108px);
  line-height: .88;
}
.hero h1 em { color: var(--sr-blue-deep); font-weight: 430; }
.hero-audience {
  max-width: 64ch;
  margin-bottom: 16px;
  color: var(--sr-ink);
  font-size: clamp(16px, 1.3vw, 19px);
  font-weight: 650;
  line-height: 1.55;
}
.hero-intro {
  max-width: 62ch;
  color: var(--sr-copy);
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.5;
}
.hero-promise {
  max-width: 65ch;
  padding-left: 20px;
  border-left: 4px solid var(--sr-blue);
  color: var(--sr-copy);
  font-size: 16px;
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 34px 0 40px; }
.button {
  min-height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 22px;
  border: 0;
  border-radius: 999px;
  font-weight: 750;
  text-decoration: none;
  transition: transform var(--fz-duration-fast), box-shadow var(--fz-duration-fast), background var(--fz-duration-fast);
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--sr-deep); color: #fff; box-shadow: 0 12px 24px -15px rgba(6, 15, 38, .8); }
.button-primary:hover { background: var(--sr-blue-deep); }
.button-quiet { background: var(--sr-powder); color: var(--sr-ink); }

.hero-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
}
.hero-meta div { padding-top: 12px; border-top: 1px solid var(--sr-line); }
.hero-meta dt { color: var(--sr-muted); font-size: 12px; font-weight: 700; }
.hero-meta dd { margin: 3px 0 0; color: var(--sr-copy); font-size: 13px; line-height: 1.4; }

.hero-orbit {
  position: absolute;
  z-index: 0;
  border: 1px solid rgba(42, 111, 219, .15);
  border-radius: 50%;
  pointer-events: none;
}
.hero-orbit-one { width: 640px; height: 640px; right: -190px; top: -230px; }
.hero-orbit-two { width: 420px; height: 420px; right: 80px; top: 80px; }

.hero-visual {
  position: relative;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: 112px 34px 112px 34px;
  background: var(--sr-deep);
  box-shadow: 0 34px 80px -34px rgba(6, 15, 38, .55);
  isolation: isolate;
}
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 14px;
  border: 1px solid rgba(255, 255, 255, .58);
  border-radius: 100px 25px 100px 25px;
  box-shadow: inset 0 0 70px rgba(6, 15, 38, .08);
  pointer-events: none;
}
.hero-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: 52% 50%;
}

.hero-freedom {
  position: relative;
  z-index: 2;
  margin-top: 48px;
  padding: 17px 24px;
  border-radius: 999px;
  background: var(--sr-deep);
  color: rgba(255,255,255,.88);
  font-size: 14px;
  text-align: center;
}

.orientation { padding-block: clamp(78px, 10vw, 138px); }
.section-intro { max-width: 780px; margin: 0 auto 56px; text-align: center; }
.section-intro h2, .kit-preview h2 { margin-bottom: 20px; font-size: clamp(42px, 5vw, 70px); }
.section-intro > p:last-child { color: var(--sr-copy); font-size: 18px; }
.dated-facts {
  max-width: 920px;
  margin: -28px auto 34px;
  padding: 13px 18px;
  border-left: 4px solid var(--sr-blue);
  background: rgba(221, 235, 251, .52);
  color: var(--sr-copy);
  font-size: 13px;
  line-height: 1.5;
}

.route-columns {
  max-width: 1080px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 58px);
  align-items: start;
  margin: 0 auto;
}
.route-column { min-width: 0; }
.route-chip {
  min-height: 188px;
  margin-bottom: 24px;
  padding: 22px 26px;
  border-radius: 24px 24px 24px 8px;
  background: var(--sr-powder);
}
.route-column:nth-child(2) .route-chip { border-radius: 24px 24px 8px 24px; background: var(--sr-lilac); }
.route-chip h3 { margin: 3px 0 0; font-size: 20px; }
.route-chip span { color: var(--sr-muted); font-size: 12px; font-weight: 700; }
.route-chip p { margin: 9px 0 0; color: var(--sr-copy); font-size: 14px; }

.checkpoint-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.checkpoint { min-width: 0; }
.checkpoint button {
  width: 100%;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 104px;
  padding: 18px 20px;
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--fz-shadow-card);
  text-align: left;
  cursor: pointer;
  transition: transform var(--fz-duration-fast), box-shadow var(--fz-duration-fast);
}
.checkpoint button:hover { transform: translateY(-3px); box-shadow: 0 20px 46px -28px rgba(6,15,38,.55); }
.checkpoint-number {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sr-powder);
  color: var(--sr-blue-deep);
  font: 700 13px var(--sr-font-code);
}
.route-column:nth-child(2) .checkpoint-number { background: var(--sr-lilac); }
.checkpoint-copy b { display: block; line-height: 1.25; }
.checkpoint-copy small { display: block; margin-top: 5px; color: var(--sr-muted); line-height: 1.35; }
.checkpoint-state { color: var(--sr-muted); font-size: 18px; }
.checkpoint.is-complete .checkpoint-number { background: var(--sr-mint); color: #176142; }
.checkpoint.is-complete .checkpoint-state { color: #297a5b; }

.kit-preview {
  padding-block: clamp(70px, 9vw, 120px);
  background: var(--sr-deep);
  color: #fff;
}
.kit-preview-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(420px, 1.2fr); gap: clamp(50px, 8vw, 110px); align-items: start; }
.kit-preview .eyebrow { color: #9ec4ff; }
.kit-preview h2 { color: #fff; }
.kit-preview header > p:not(.eyebrow) { color: rgba(255,255,255,.72); }
.kit-completion { margin-top: 26px !important; padding: 18px 20px; border-radius: 20px; background: rgba(221,235,251,.09); color: var(--sr-powder) !important; font-size: 14px; }
.kit-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: kit; }
.kit-list li {
  position: relative;
  min-height: 88px;
  padding: 18px 18px 18px 54px;
  border-radius: 22px;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-size: 14px;
  line-height: 1.42;
  counter-increment: kit;
}
.kit-list li::before {
  content: counter(kit, decimal-leading-zero);
  position: absolute;
  left: 18px;
  top: 19px;
  color: #9ec4ff;
  font: 700 11px var(--sr-font-code);
}

.course-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 5vw, 72px);
  padding-block: clamp(70px, 9vw, 120px);
}

.chapter-rail {
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 30px;
  background: #fff;
  box-shadow: var(--fz-shadow-card);
}
.rail-head { padding: 22px 22px 18px; border-bottom: 1px solid var(--sr-line); }
.rail-head p { margin: 0; color: var(--sr-muted); font-size: 12px; font-weight: 700; }
.rail-head strong { display: block; margin-top: 3px; font-size: 14px; }
.progress-track { width: 100%; height: 5px; display: block; margin-top: 12px; overflow: hidden; border: 0; border-radius: 999px; background: #e9edf4; appearance: none; }
.progress-track::-webkit-progress-bar { border-radius: 999px; background: #e9edf4; }
.progress-track::-webkit-progress-value { border-radius: 999px; background: var(--sr-blue); }
.progress-track::-moz-progress-bar { border-radius: 999px; background: var(--sr-blue); }
.chapter-rail nav { overflow-y: auto; padding: 10px; scrollbar-width: thin; }
.rail-link {
  width: 100%;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px 11px;
  border: 0;
  border-radius: 16px;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.rail-link:hover { background: var(--sr-paper); }
.rail-link[aria-current="step"] { background: var(--sr-powder); }
.rail-link-number { color: var(--sr-blue-deep); font: 700 11px var(--sr-font-code); }
.rail-link b { display: block; overflow: hidden; font-size: 12px; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
.rail-link small { display: block; margin-top: 2px; color: var(--sr-muted); font-size: 10px; }
.rail-link-state { color: var(--sr-muted); font-size: 13px; }
.rail-link.is-complete .rail-link-state { color: #297a5b; }
.field-kit-link {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 10px;
  align-items: center;
  margin: 0 10px 10px;
  padding: 14px;
  border: 0;
  border-radius: 18px;
  background: var(--sr-deep);
  color: #fff;
  text-align: left;
  cursor: pointer;
}
.field-kit-link b, .field-kit-link small { display: block; }
.field-kit-link small { margin-top: 2px; color: rgba(255,255,255,.62); font-size: 10px; }

.chapter-stage, .field-kit-stage { min-width: 0; }
.chapter-head {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .72fr);
  gap: 34px;
  align-items: center;
  margin-bottom: 54px;
  padding: clamp(34px, 5vw, 62px);
  border-radius: 44px 44px 18px 44px;
  background: linear-gradient(135deg, #fff, var(--sr-powder));
  box-shadow: var(--sr-shadow);
}
.chapter-head.no-figure,
.chapter-head.figure-tool-map,
.chapter-head.figure-terminal-session { grid-template-columns: minmax(0, 1fr); }
.chapter-head::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -110px;
  top: -110px;
  border: 32px solid rgba(42,111,219,.08);
  border-radius: 50%;
}
.chapter-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.chapter-kicker span { padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.72); color: var(--sr-blue-deep); font-size: 11px; font-weight: 750; }
.chapter-head h2 { margin-bottom: 18px; font-size: clamp(44px, 5.2vw, 72px); }
.chapter-hook { color: var(--sr-copy); font-size: 18px; line-height: 1.52; }
.chapter-outcome { margin: 22px 0 0; padding: 16px 18px; border-radius: 18px; background: rgba(255,255,255,.72); color: var(--sr-copy); font-size: 14px; }
.chapter-outcome strong { color: var(--sr-ink); }

.chapter-mini-art {
  position: relative;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  border-radius: 46% 54% 58% 42% / 38% 42% 58% 62%;
  background: linear-gradient(145deg, var(--sr-lilac), var(--sr-mint));
}
.chapter-mini-art::before,
.chapter-mini-art::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.chapter-mini-art::before { width: 150px; height: 150px; left: 16%; top: 13%; border: 18px solid rgba(255,255,255,.75); }
.chapter-mini-art::after { width: 170px; height: 70px; right: 4%; bottom: 22%; background: rgba(42,111,219,.75); transform: rotate(-16deg); }
.chapter-mini-art span { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 24px; padding: 12px 15px; border-radius: 16px; background: rgba(255,255,255,.9); font-size: 12px; line-height: 1.35; }
.chapter-mini-art.concept-map {
  min-height: 380px;
  display: grid;
  align-content: center;
  gap: 14px;
  padding: 24px;
  border-radius: 34px 34px 12px 34px;
  background: linear-gradient(160deg, var(--sr-deep), var(--sr-blue-deep));
  color: #fff;
}
.chapter-mini-art.concept-map::before,
.chapter-mini-art.concept-map::after { display: none; }
.chapter-mini-art.concept-map span { position: static; left: auto; right: auto; bottom: auto; }
.concept-map-heading > span { display: block; margin-bottom: 3px; padding: 0; border-radius: 0; background: none; color: #9ec4ff; font: 700 10px var(--sr-font-code); letter-spacing: .08em; text-transform: uppercase; }
.concept-map-heading strong { display: block; color: #fff; font-size: 18px; }
.concept-map-flow { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.concept-map-flow li { position: relative; display: grid; grid-template-columns: 36px minmax(0,1fr); gap: 11px; align-items: center; padding: 12px; border-radius: 15px; background: rgba(255,255,255,.1); }
.concept-map-flow li > span { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #b9d4ff; font: 700 10px var(--sr-font-code); }
.concept-map-flow b,
.concept-map-flow small { display: block; }
.concept-map-flow b { color: #fff; font-size: 13px; }
.concept-map-flow small { margin-top: 2px; color: rgba(255,255,255,.67); font-size: 10px; line-height: 1.35; }
.chapter-mini-art.concept-map figcaption { color: rgba(255,255,255,.66); font-size: 10px; line-height: 1.45; }

.chapter-mini-art.tool-map-figure,
.chapter-mini-art.terminal-session {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(10, 27, 61, .1);
  border-radius: 28px 28px 10px 28px;
  background: rgba(255,255,255,.84);
  color: var(--sr-ink);
  box-shadow: 0 18px 50px -42px rgba(6,15,38,.55);
}
.chapter-mini-art.tool-map-figure::before,
.chapter-mini-art.tool-map-figure::after,
.chapter-mini-art.terminal-session::before,
.chapter-mini-art.terminal-session::after { display: none; }
.tool-map-heading,
.terminal-heading { display: grid; gap: 3px; padding: 20px 22px; border-bottom: 1px solid var(--sr-line); }
.tool-map-heading span,
.terminal-heading span { position: static; padding: 0; border-radius: 0; background: none; color: var(--sr-blue-deep); font: 750 10px var(--sr-font-code); letter-spacing: .08em; text-transform: uppercase; }
.tool-map-heading strong,
.terminal-heading strong { font-size: 20px; }
.tool-map-heading small,
.terminal-heading small { color: var(--sr-muted); font-size: 11px; line-height: 1.45; }
.tool-map-scroll { overflow-x: auto; }
.tool-map-figure table { width: 100%; border-collapse: collapse; font-size: 12px; line-height: 1.45; }
.tool-map-figure th,
.tool-map-figure td { padding: 14px 16px; border-bottom: 1px solid var(--sr-line); text-align: left; vertical-align: top; }
.tool-map-figure thead th { color: var(--sr-muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.tool-map-figure tbody th { width: 23%; color: var(--sr-ink); }
.tool-map-figure tbody td:nth-child(2) { width: 29%; }
.tool-map-figure tbody td:last-child { color: var(--sr-copy); }
.tool-map-source-list { display: grid; justify-items: start; gap: 5px; }
.tool-map-source-list a,
.tool-map-source-list > span {
  position: static;
  display: inline-flex;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--sr-blue-deep);
  font-size: 12px;
  font-weight: 750;
}
.tool-map-source-list a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tool-map-source-list a:hover { color: var(--sr-accent); }
.tool-map-source-list a:focus-visible {
  border-radius: 4px;
  outline: 3px solid var(--sr-focus);
  outline-offset: 3px;
}
.tool-map-figure figcaption { padding: 12px 16px; color: var(--sr-muted); font-size: 10px; }
.terminal-window { display: grid; gap: 1px; padding: 12px; background: var(--sr-deep); }
.terminal-line { display: grid; grid-template-columns: 100px minmax(0,1fr); gap: 14px; align-items: start; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,.055); }
.terminal-line > span { position: static; padding: 0; border-radius: 0; background: none; color: #9ec4ff; font: 750 10px var(--sr-font-code); text-transform: uppercase; }
.terminal-line code { overflow-wrap: anywhere; color: rgba(255,255,255,.88); font: 500 12px/1.55 var(--sr-font-code); }
.terminal-line.is-permission { background: rgba(244,234,184,.13); }

.chapter-intro {
  max-width: 760px;
  margin: 0 auto 62px;
  color: var(--sr-copy);
  font-size: 18px;
  line-height: 1.72;
}
.chapter-drop-cap {
  float: left;
  margin: 6px 10px 0 0;
  color: var(--sr-blue-deep);
  font: 600 58px/.76 var(--sr-font-heading);
  letter-spacing: -.06em;
}

.teaching-flow { display: grid; gap: 48px; }
.teaching-section {
  max-width: 900px;
  padding: 0 clamp(12px, 4vw, 46px);
}
.teaching-section:nth-child(even) { margin-left: auto; }
.teaching-section h3 { margin-bottom: 18px; font-size: clamp(32px, 3.6vw, 48px); }
.teaching-section p { max-width: 72ch; color: var(--sr-copy); font-size: 17px; line-height: 1.72; }
.teaching-section ul { max-width: 72ch; display: grid; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.teaching-section li { position: relative; padding-left: 28px; color: var(--sr-copy); }
.teaching-section li::before { content: "→"; position: absolute; left: 0; color: var(--sr-blue); font-weight: 800; }
.model-family-board {
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--sr-line);
  border-radius: 30px 30px 12px 30px;
  background: rgba(255,255,255,.8);
  box-shadow: 0 20px 52px -44px rgba(6,15,38,.62);
}
.model-family-board-heading { display: grid; gap: 4px; padding: 22px 24px; border-bottom: 1px solid var(--sr-line); background: linear-gradient(135deg, var(--sr-powder), rgba(255,255,255,.92)); }
.model-family-board-heading span { color: var(--sr-blue-deep); font: 750 10px var(--sr-font-code); letter-spacing: .08em; text-transform: uppercase; }
.model-family-board-heading strong { color: var(--sr-ink); font-size: 20px; }
.model-family-board-heading small { color: var(--sr-muted); font-size: 11px; line-height: 1.45; }
.model-family-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.model-family-card { padding: 22px; border-right: 1px solid var(--sr-line); }
.model-family-card:last-child { border-right: 0; }
.model-family-card h4 { margin-bottom: 14px; color: var(--sr-ink); font-size: 18px; }
.model-family-card dl { display: grid; gap: 14px; margin: 0; }
.model-family-card dl div { padding-top: 14px; border-top: 1px solid rgba(10,27,61,.08); }
.model-family-card dl div:first-child { padding-top: 0; border-top: 0; }
.model-family-card dt { color: var(--sr-blue-deep); font-size: 13px; font-weight: 800; line-height: 1.35; }
.model-family-card dd { margin: 4px 0 0; color: var(--sr-copy); font-size: 12px; line-height: 1.5; }
.section-callout {
  max-width: 72ch;
  margin-top: 26px;
  padding: 20px 22px;
  border-radius: 22px 22px 22px 6px;
  background: var(--sr-sun);
}
.section-callout strong { display: block; margin-bottom: 5px; }
.section-callout p { margin: 0; color: #544922; font-size: 14px; }

.token-context-visual {
  max-width: 72ch;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  margin: 28px 0 0;
  overflow: hidden;
  border: 1px solid rgba(35,80,151,.12);
  border-radius: 28px 28px 28px 8px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(8,25,59,.08);
}
.token-demo,
.context-demo { padding: 24px; }
.token-demo { background: var(--sr-powder); }
.visual-kicker { display: block; margin-bottom: 7px; color: var(--sr-blue-deep); font: 700 10px var(--sr-font-code); letter-spacing: .07em; text-transform: uppercase; }
.token-context-visual .token-source { margin: 0 0 20px; color: var(--sr-ink); font-size: 16px; font-weight: 700; line-height: 1.45; }
.token-pieces { display: flex; flex-wrap: wrap; gap: 6px; }
.token-piece {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 10px;
  border: 1px solid rgba(42,111,219,.16);
  border-radius: 10px;
  background: #fff;
  color: var(--sr-copy);
  font: 650 13px var(--sr-font-code);
  white-space: pre;
}
.token-piece small { margin-right: 5px; color: var(--sr-blue); font-size: 8px; }
.context-heading { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; margin-bottom: 12px; }
.context-heading strong { color: var(--sr-ink); font-size: 15px; }
.context-heading span { color: var(--sr-muted); font: 650 10px var(--sr-font-code); }
.context-scale-note { margin: -2px 0 14px; color: var(--sr-copy); font-size: 11px; line-height: 1.5; }
.context-meter { display: flex; width: 100%; height: 28px; overflow: hidden; border-radius: 999px; background: #edf1f7; }
.context-meter > span { min-width: 2px; }
.context-segment-1 { flex: 6; background: var(--sr-blue); }
.context-segment-2 { flex: 14; background: #7c62c7; }
.context-segment-3 { flex: 28; background: #38a887; }
.context-segment-free { flex: 16; background: repeating-linear-gradient(135deg, #f4f6fa 0, #f4f6fa 7px, #e5eaf2 7px, #e5eaf2 14px); }
.context-legend { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px 16px; margin-top: 16px; }
.context-legend > div { display: grid; grid-template-columns: 12px minmax(0,1fr); gap: 8px; align-items: start; }
.context-legend i { width: 12px; height: 12px; margin-top: 2px; border-radius: 4px; }
.context-legend b,
.context-legend small { display: block; }
.context-legend b { color: var(--sr-copy); font-size: 11px; }
.context-legend small { margin-top: 1px; color: var(--sr-muted); font: 600 9px var(--sr-font-code); }
.token-context-visual figcaption {
  grid-column: 1 / -1;
  padding: 13px 20px;
  border-top: 1px solid rgba(35,80,151,.1);
  color: var(--sr-muted);
  font-size: 11px;
  line-height: 1.5;
}

.mental-model {
  margin: 66px 0;
  padding: clamp(34px, 5vw, 58px);
  border-radius: 42px 42px 42px 14px;
  background: var(--sr-deep);
  color: #fff;
}
.mental-model h3 { color: #fff; font-size: clamp(34px, 4vw, 52px); }
.mental-model > p { max-width: 72ch; color: rgba(255,255,255,.7); }
.model-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-top: 30px; }
.model-step { min-height: 150px; padding: 20px; border-radius: 24px; background: rgba(255,255,255,.08); }
.model-step span { display: block; margin-bottom: 14px; color: #9ec4ff; font: 700 11px var(--sr-font-code); }
.model-step b { display: block; margin-bottom: 7px; }
.model-step p { margin: 0; color: rgba(255,255,255,.68); font-size: 13px; line-height: 1.5; }

.examples-section { margin: 68px 0; }
.examples-section > h3 { font-size: clamp(34px, 4vw, 50px); }
.examples-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.example-card { padding: 24px; border-radius: 28px; background: #fff; box-shadow: var(--fz-shadow-card); }
.example-card:nth-child(3n+2) { background: var(--sr-powder); }
.example-card:nth-child(3n+3) { background: var(--sr-lilac); }
.example-card h4 { margin-bottom: 14px; font-family: var(--sr-font-body); font-size: 18px; font-weight: 750; letter-spacing: -.02em; line-height: 1.25; }
.example-card dl { margin: 0; }
.example-card dt { margin-top: 12px; color: var(--sr-muted); font-size: 11px; font-weight: 800; }
.example-card dd { margin: 3px 0 0; color: var(--sr-copy); font-size: 13px; line-height: 1.5; }

.activity-block {
  position: relative;
  margin: 72px 0;
  padding: clamp(30px, 5vw, 58px);
  border-radius: 46px 46px 18px 46px;
  background: #fff;
  box-shadow: var(--sr-shadow);
}
.activity-block.is-lead-activity { margin-top: 0; margin-bottom: 56px; }
.activity-label { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--sr-blue-deep); font-size: 12px; font-weight: 800; }
.activity-label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sr-blue); box-shadow: 0 0 0 6px var(--sr-powder); }
.activity-block > header h3 { margin-bottom: 14px; font-size: clamp(38px, 4.7vw, 60px); }
.activity-benefit { max-width: 72ch; color: var(--sr-copy); font-size: 18px; }
.activity-instruction { max-width: 72ch; padding: 14px 18px; border-radius: 18px; background: var(--sr-paper); color: var(--sr-copy); font-size: 14px; }
.activity-ui { margin-top: 32px; }
.activity-block.is-compact-activity .activity-ui { margin-top: 22px; }

.control-label { display: block; margin-bottom: 8px; color: var(--sr-ink); font-size: 13px; font-weight: 750; }
.control-hint { display: block; margin-top: 6px; color: var(--sr-muted); font-size: 11px; }
.input, .select, .textarea {
  width: 100%;
  border: 1px solid rgba(10,27,61,.2);
  border-radius: 16px;
  background: #fff;
  color: var(--sr-ink);
}
.input, .select { min-height: 48px; padding: 10px 13px; }
.textarea { min-height: 130px; padding: 14px; resize: vertical; line-height: 1.55; }
.voice-textarea { display: grid; gap: 7px; }
.voice-input-tools { display: flex; justify-content: flex-end; }
.voice-input-button {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border: 1px solid rgba(46,106,220,.24);
  border-radius: 999px;
  background: var(--sr-powder);
  color: var(--sr-blue-deep);
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.voice-input-button:hover { border-color: var(--sr-blue); background: #fff; }
.voice-input-button:focus-visible { outline: 3px solid var(--sr-blue); outline-offset: 3px; }
.voice-input-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.voice-input-button small { padding-left: 7px; border-left: 1px solid rgba(46,106,220,.24); color: var(--sr-muted); font-size: 8px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.range { width: 100%; accent-color: var(--sr-blue); }

.chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.chip-button, .choice-button, .soft-button, .solid-button {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: transform var(--fz-duration-fast), background var(--fz-duration-fast), color var(--fz-duration-fast);
}
.chip-button, .choice-button { background: var(--sr-paper); color: var(--sr-copy); font-size: 13px; font-weight: 700; }
.chip-button:hover, .choice-button:hover { transform: translateY(-1px); background: var(--sr-powder); }
.chip-button[aria-pressed="true"], .choice-button[aria-pressed="true"], .chip-button.is-active { background: var(--sr-blue-deep); color: #fff; }
.soft-button { background: var(--sr-powder); color: var(--sr-ink); font-weight: 750; }
.solid-button { background: var(--sr-deep); color: #fff; font-weight: 750; }
.solid-button:hover { background: var(--sr-blue-deep); transform: translateY(-1px); }
.small-button { min-height: 38px; padding: 8px 12px; font-size: 12px; }
.icon-action { min-width: 40px; min-height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--sr-paper); cursor: pointer; }
.icon-action:disabled { opacity: .35; cursor: not-allowed; }

.feedback-panel {
  margin-top: 22px;
  padding: 20px 22px;
  border-radius: 22px;
  background: var(--sr-powder);
  color: var(--sr-copy);
}
.feedback-panel[data-tone="good"] { background: var(--sr-mint); }
.feedback-panel[data-tone="warn"] { background: var(--sr-sun); }
.feedback-panel[data-tone="risk"] { background: var(--sr-peach); }
.feedback-panel strong { display: block; margin-bottom: 5px; color: var(--sr-ink); }
.feedback-panel p:last-child { margin-bottom: 0; }
.feedback-panel ul { margin-bottom: 0; }

.prediction-layout { display: grid; grid-template-columns: minmax(220px, .58fr) minmax(0, 1.42fr); gap: 14px; align-items: stretch; }
.prediction-source { padding: 22px; border-radius: 24px 24px 8px 24px; background: var(--sr-powder); }
.prediction-source > span { display: block; color: var(--sr-blue-deep); font: 750 9px var(--sr-font-code); letter-spacing: .08em; text-transform: uppercase; }
.prediction-source > b { display: block; margin-top: 9px; overflow-wrap: anywhere; font: 700 15px var(--sr-font-code); }
.prediction-source > p { margin: 18px 0 0; color: var(--sr-copy); font-size: 13px; line-height: 1.55; }
.prediction-board { padding: clamp(22px,4vw,34px); border-radius: 30px 30px 10px 30px; background: var(--sr-deep); color: #fff; }
.prediction-context-note { margin: 0 0 8px; color: #9ec4ff; font: 750 10px var(--sr-font-code); letter-spacing: .06em; text-transform: uppercase; }
.prediction-context-note b { color: inherit; }
.sentence-preview { min-height: 52px; margin: 0 0 24px; color: #fff; font-size: clamp(23px,3vw,34px); font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.prediction-cursor { display: inline-block; width: 2px; height: .95em; margin-left: 5px; background: #8db8ff; vertical-align: -.1em; }
.probability-list { display: grid; gap: 9px; }
.probability-choice { width: 100%; display: grid; grid-template-columns: minmax(72px,110px) 1fr 42px; align-items: center; gap: 12px; min-height: 48px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.1); border-radius: 15px; background: rgba(255,255,255,.065); color: #fff; text-align: left; cursor: pointer; }
.probability-choice:hover { border-color: rgba(141,184,255,.7); background: rgba(141,184,255,.12); }
.probability-choice:focus-visible { outline: 3px solid #8db8ff; outline-offset: 3px; }
.probability-choice > span { font: 700 13px var(--sr-font-code); }
.probability-choice > b { text-align: right; font-size: 12px; }
.probability-bar { width: 100%; height: 13px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); appearance: none; }
.probability-bar::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.12); }
.probability-bar::-webkit-progress-value { border-radius: 999px; background: #8db8ff; }
.probability-bar::-moz-progress-bar { border-radius: 999px; background: #8db8ff; }
.prediction-context-usage { margin-top: 24px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.11); }
.prediction-context-head { display: flex; justify-content: space-between; gap: 14px; align-items: baseline; }
.prediction-context-head strong { font-size: 12px; }
.prediction-context-head span { color: rgba(255,255,255,.64); font: 650 10px var(--sr-font-code); }
.prediction-context-bar { width: 100%; height: 12px; margin: 10px 0 14px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); appearance: none; }
.prediction-context-bar::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.12); }
.prediction-context-bar::-webkit-progress-value { border-radius: 999px; background: #74d2a6; }
.prediction-context-bar::-moz-progress-bar { border-radius: 999px; background: #74d2a6; }
.prediction-context-usage ul { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; margin: 0; padding: 0; list-style: none; }
.prediction-context-usage li { padding: 9px 10px; border-radius: 12px; background: rgba(255,255,255,.065); }
.prediction-context-usage li span,
.prediction-context-usage li b { display: block; }
.prediction-context-usage li span { color: rgba(255,255,255,.59); font-size: 9px; line-height: 1.3; }
.prediction-context-usage li b { margin-top: 3px; font: 700 12px var(--sr-font-code); }
.prediction-finish { padding: 18px; border-radius: 18px; background: rgba(116,210,166,.14); }
.prediction-finish strong { display: block; color: #b9efd2; font-size: 14px; }
.prediction-finish p { margin: 7px 0 14px; color: rgba(255,255,255,.75); font-size: 12px; line-height: 1.55; }
.simulation-note { margin: 16px 0 0; color: rgba(255,255,255,.54); font-size: 10px; line-height: 1.45; }
.basics-lab { display: grid; gap: 24px; }
.basics-station { display: grid; gap: 24px; }

.filter-panel { display: grid; grid-template-columns: minmax(280px, 310px) minmax(0, 1fr); gap: 30px; align-items: start; }
.filter-controls { align-self: start; display: grid; gap: 20px; padding: 24px; border: 1px solid var(--sr-line); border-radius: 30px 30px 14px 30px; background: rgba(255,255,255,.76); box-shadow: 0 18px 50px -42px rgba(6,15,38,.58); }
.filter-intro h4 { margin: 0 0 8px; font-family: var(--sr-font-body); font-size: 19px; font-weight: 800; letter-spacing: -.025em; }
.filter-intro p { margin: 0; color: var(--sr-copy); font-size: 12px; line-height: 1.5; }
.filter-group { min-width: 0; margin: 0; padding: 0; border: 0; }
.filter-group legend { width: 100%; margin-bottom: 10px; color: var(--sr-ink); font-size: 13px; font-weight: 800; line-height: 1.35; }
.filter-helper { margin: -5px 0 10px; color: var(--sr-muted); font-size: 10px; }
.filter-options { display: grid; gap: 7px; }
.filter-option { min-height: 46px; display: grid; grid-template-columns: 19px minmax(0,1fr); gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(10,27,61,.1); border-radius: 15px; background: var(--sr-paper); color: var(--sr-copy); font-size: 11px; line-height: 1.35; cursor: pointer; transition: border-color var(--fz-duration-fast), background var(--fz-duration-fast), transform var(--fz-duration-fast); }
.filter-option:hover { border-color: rgba(46,106,220,.36); transform: translateY(-1px); }
.filter-option:has(input:checked) { border-color: rgba(46,106,220,.54); background: var(--sr-powder); color: var(--sr-ink); }
.filter-option:has(input:focus-visible) { outline: 3px solid var(--sr-blue); outline-offset: 2px; }
.filter-option input { width: 18px; height: 18px; margin: 0; accent-color: var(--sr-blue); cursor: pointer; }
.filter-option input:focus-visible { outline: 2px solid var(--sr-blue); outline-offset: 3px; }
.filter-option span, .filter-option small { display: block; }
.filter-option small { margin-top: 3px; color: var(--sr-muted); font-size: 9px; line-height: 1.4; }
.filter-clear { min-height: 44px; padding: 9px 14px; border: 1px solid var(--sr-line); border-radius: 999px; background: transparent; color: var(--sr-blue-deep); font-size: 11px; font-weight: 800; cursor: pointer; }
.filter-clear:hover { border-color: var(--sr-blue); background: var(--sr-powder); }
.filter-clear:focus-visible { outline: 3px solid var(--sr-blue); outline-offset: 3px; }
.filter-test-note { margin: 0; }
.provider-results { min-width: 0; }
.provider-status { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 16px; color: var(--sr-muted); font-size: 12px; }
.provider-status span:first-child { color: var(--sr-ink); font-weight: 800; }
.provider-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.provider-card { display: grid; gap: 16px; padding: 24px; border: 1px solid rgba(10,27,61,.08); border-radius: 30px 30px 14px 30px; background: rgba(255,255,255,.82); box-shadow: 0 20px 55px -48px rgba(6,15,38,.62); }
.provider-card.is-selected { border-color: var(--sr-blue); outline: 2px solid var(--sr-blue); outline-offset: -2px; background: linear-gradient(145deg, #fff, var(--sr-powder)); }
.provider-card header { display: flex; justify-content: space-between; gap: 16px; align-items: start; }
.provider-card h4 { margin: 0 0 3px; font-family: var(--sr-font-body); font-size: 21px; font-weight: 850; letter-spacing: -.03em; }
.provider-card p { margin: 0; color: var(--sr-copy); font-size: 13px; line-height: 1.55; }
.provider-card .provider-summary { color: var(--sr-ink); font-size: 14px; }
.provider-match { display: grid; gap: 5px; padding: 13px 15px; border-radius: 17px; background: var(--sr-mint); color: var(--sr-ink); }
.provider-match.is-conditional { background: var(--sr-sun); }
.provider-match b { font-size: 11px; }
.provider-match span { color: var(--sr-copy); font-size: 10px; line-height: 1.45; }
.provider-capabilities, .provider-practical { display: grid; gap: 8px; }
.provider-capabilities > b, .provider-practical > b { color: var(--sr-muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.provider-tags, .provider-fit-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.provider-tags li, .provider-fit-tags li { display: inline-flex; align-items: center; gap: 4px; min-height: 30px; padding: 5px 10px; border-radius: 999px; background: var(--sr-paper); color: var(--sr-copy); font-size: 10px; line-height: 1.2; }
.provider-fit-tags li { border: 1px solid rgba(10,27,61,.09); background: transparent; }
.provider-tags li.is-match, .provider-fit-tags li.is-match { border-color: var(--sr-blue); background: var(--sr-blue); color: #fff; }
.provider-tags small, .provider-fit-tags small { color: inherit; font-size: 8px; font-weight: 800; opacity: .72; text-transform: uppercase; }
.provider-watch { padding-top: 14px; border-top: 1px solid var(--sr-line); }
.provider-card a { justify-self: start; font-size: 11px; font-weight: 800; }
.provider-empty { padding: 34px; border: 1px dashed rgba(46,106,220,.44); border-radius: 30px; background: var(--sr-powder); text-align: center; }
.provider-empty h4 { margin-bottom: 8px; font-size: 28px; }
.provider-empty p { color: var(--sr-copy); }
.provider-empty .soft-button { width: auto; margin-top: 8px; }
.compare-tray { margin-top: 20px; padding: 24px; border-radius: 30px 30px 30px 14px; background: var(--sr-deep); color: #fff; }
.compare-heading { display: flex; justify-content: space-between; gap: 18px; align-items: start; }
.compare-heading h4 { margin: 0 0 7px; color: #fff; font-family: var(--sr-font-body); font-size: 17px; font-weight: 800; }
.compare-heading p, .compare-tray > p { max-width: 64ch; margin: 0; color: rgba(255,255,255,.65); font-size: 11px; line-height: 1.55; }
.compare-heading > span { min-width: 46px; min-height: 36px; display: grid; place-items: center; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 11px; font-weight: 800; }
.comparison-scroll { margin-top: 18px; overflow-x: auto; border-radius: 17px; }
.comparison-table { width: 100%; min-width: 520px; border-collapse: collapse; background: rgba(255,255,255,.05); font-size: 11px; }
.comparison-table th, .comparison-table td { padding: 11px 12px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; }
.comparison-table thead th { color: rgba(255,255,255,.7); font-size: 10px; }
.comparison-table tbody th { color: #fff; font-weight: 650; }
.comparison-table tr:last-child th, .comparison-table tr:last-child td { border-bottom: 0; }
.comparison-status { display: inline-flex; min-width: 52px; justify-content: center; padding: 4px 8px; border-radius: 999px; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.comparison-status.is-yes { background: rgba(116,210,166,.2); color: #a6ebc7; }
.comparison-status.is-check { background: rgba(244,234,184,.16); color: #f4eab8; }
.comparison-status.is-no { background: rgba(255,255,255,.08); color: rgba(255,255,255,.48); }
.source-shelf { margin-top: 24px; }
.source-shelf summary { cursor: pointer; color: var(--sr-blue-deep); font-size: 13px; font-weight: 750; }
.source-shelf ul { columns: 2; padding-left: 20px; }
.source-shelf li { margin: 9px 0; break-inside: avoid; font-size: 11px; }
.source-shelf li a,
.source-shelf li span { display: block; }
.source-shelf li span { margin-top: 1px; color: var(--sr-muted); font-size: 9px; }

.mode-grid { display: grid; grid-template-columns: minmax(260px, .75fr) minmax(0, 1.25fr); gap: 26px; }
.mode-questions { display: grid; gap: 18px; padding: 22px; border-radius: 26px; background: var(--sr-paper); }
.toggle-row { display: flex; justify-content: space-between; gap: 18px; align-items: center; }
.toggle-row label { color: var(--sr-copy); font-size: 13px; }
.switch-button { min-width: 64px; min-height: 36px; border: 0; border-radius: 999px; background: #dce1eb; cursor: pointer; }
.switch-button::before { content: "No"; color: var(--sr-muted); font-size: 11px; font-weight: 800; }
.switch-button[aria-pressed="true"] { background: var(--sr-blue); }
.switch-button[aria-pressed="true"]::before { content: "Yes"; color: #fff; }
.mode-result { min-height: 100%; padding: 30px; border-radius: 30px; background: linear-gradient(145deg, var(--sr-powder), var(--sr-lilac)); }
.mode-result .mode-icon { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--sr-blue-deep); font-size: 24px; }
.mode-result h4 { margin: 20px 0 12px; font-size: 36px; }
.mode-result p { color: var(--sr-copy); }
.mode-result ol { padding-left: 20px; color: var(--sr-copy); }

.xray-layout { display: grid; grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); gap: 24px; }
.xray-controls { display: grid; gap: 16px; }
.xray-toggles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.xray-preview { position: sticky; top: 20px; align-self: start; padding: 26px; border-radius: 28px; background: var(--sr-deep); color: #fff; }
.xray-preview h4 { color: #9ec4ff; font-family: var(--sr-font-body); font-size: 12px; font-weight: 800; letter-spacing: .02em; }
.prompt-preview { min-height: 250px; color: rgba(255,255,255,.86); font: 400 13px/1.7 var(--sr-font-code); white-space: pre-wrap; }
.quality-meter { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 18px; }
.quality-track { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); appearance: none; }
.quality-track::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.12); }
.quality-track::-webkit-progress-value { border-radius: 999px; background: #74d2a6; }
.quality-track::-moz-progress-bar { border-radius: 999px; background: #74d2a6; }
.assumption-list { display: grid; gap: 8px; margin-top: 16px; }
.assumption { padding: 10px 12px; border-radius: 13px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); font-size: 11px; }

.context-layout { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 24px; }
.context-library { display: grid; gap: 10px; }
.context-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 18px; background: var(--sr-paper); }
.context-item b, .context-item small { display: block; }
.context-item small { margin-top: 3px; color: var(--sr-muted); font-size: 10px; }
.context-item.is-added { background: var(--sr-powder); }
.context-window { position: relative; min-height: 430px; display: flex; flex-direction: column; padding: 26px; border-radius: 32px; background: var(--sr-deep); color: #fff; }
.capacity-head { display: flex; justify-content: space-between; gap: 15px; font-size: 12px; }
.capacity-track { width: 100%; height: 12px; margin: 12px 0 20px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); appearance: none; }
.capacity-track::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.12); }
.capacity-track::-webkit-progress-value { border-radius: 999px; background: #76b4ff; }
.capacity-track::-moz-progress-bar { border-radius: 999px; background: #76b4ff; }
.capacity-track.is-full::-webkit-progress-value { background: #e1b151; }
.capacity-track.is-full::-moz-progress-bar { background: #e1b151; }
.capacity-track.is-over::-webkit-progress-value { background: #dc766c; }
.capacity-track.is-over::-moz-progress-bar { background: #dc766c; }
.packed-items { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; flex: 1; }
.packed-item { max-width: 100%; padding: 10px 12px; border-radius: 14px; background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); font-size: 11px; }
.packed-item.size-small { flex: 1 1 24%; }
.packed-item.size-medium { flex: 1 1 38%; }
.packed-item.size-large { flex: 1 1 55%; }
.packed-item.is-sensitive { outline: 2px solid #e6b3aa; }
.context-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }

.workflow-list { display: grid; gap: 9px; max-width: 850px; }
.workflow-step { display: grid; grid-template-columns: 44px minmax(0,1fr) 155px auto; gap: 12px; align-items: center; padding: 13px 14px; border-radius: 20px; background: var(--sr-paper); }
.workflow-step.is-review { background: var(--sr-mint); }
.workflow-handle { display: grid; place-items: center; color: var(--sr-muted); font: 700 12px var(--sr-font-code); }
.workflow-step b { font-size: 13px; }
.workflow-movers { display: flex; gap: 5px; }
.workflow-feedback { max-width: 850px; }

.budget-layout { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(240px,.8fr); gap: 24px; }
.feature-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.feature-button { min-height: 86px; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 15px; border: 0; border-radius: 20px; background: var(--sr-paper); text-align: left; cursor: pointer; }
.feature-button[aria-pressed="true"] { background: var(--sr-powder); outline: 3px solid var(--sr-blue); outline-offset: -3px; }
.feature-button b, .feature-button small { display: block; }
.feature-button small { margin-top: 4px; color: var(--sr-muted); font-size: 10px; }
.feature-cost { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--sr-blue-deep); font: 700 12px var(--sr-font-code); }
.budget-meter { position: sticky; top: 20px; align-self: start; padding: 26px; border-radius: 30px; background: var(--sr-deep); color: #fff; }
.budget-number { display: flex; align-items: baseline; gap: 8px; margin: 12px 0; }
.budget-number strong { font: 520 58px/1 var(--sr-font-heading); }
.budget-number span { color: rgba(255,255,255,.6); }
.budget-bar { width: 100%; height: 12px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.12); appearance: none; }
.budget-bar::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.12); }
.budget-bar::-webkit-progress-value { border-radius: 999px; background: #79b4ff; }
.budget-bar::-moz-progress-bar { border-radius: 999px; background: #79b4ff; }
.product-diagnostic { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--sr-line); }

.version-layout { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(0,1.3fr); gap: 24px; }
.version-timeline { position: relative; display: grid; gap: 9px; }
.version-timeline::before { content: ""; position: absolute; left: 19px; top: 22px; bottom: 22px; width: 2px; background: var(--sr-line); }
.version-button { position: relative; z-index: 1; display: grid; grid-template-columns: 40px 1fr; gap: 10px; align-items: center; padding: 10px; border: 0; border-radius: 18px; background: transparent; text-align: left; cursor: pointer; }
.version-button:hover, .version-button[aria-pressed="true"] { background: var(--sr-powder); }
.version-dot { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #fff; border: 2px solid var(--sr-blue); font: 700 10px var(--sr-font-code); }
.version-button.is-broken .version-dot { border-color: var(--fz-error); color: var(--fz-error); }
.version-button b, .version-button small { display: block; }
.version-button small { color: var(--sr-muted); font-size: 10px; }
.version-stage { min-height: 420px; padding: 28px; border-radius: 30px; background: var(--sr-deep); color: #fff; }
.version-stage h4 { color: #fff; font-size: 34px; }
.version-stage p { color: rgba(255,255,255,.7); }
.version-diff { display: grid; gap: 6px; margin: 20px 0; font: 400 11px/1.5 var(--sr-font-code); }
.diff-line { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.07); }
.diff-line.add { background: rgba(92,180,132,.2); }
.diff-line.remove { background: rgba(220,118,108,.2); }
.version-actions { display: flex; flex-wrap: wrap; gap: 8px; }

.api-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); gap: 24px; }
.key-destinations { display: grid; gap: 9px; }
.key-target { width: 100%; display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 0; border-radius: 20px; background: var(--sr-paper); text-align: left; cursor: pointer; }
.key-target[aria-pressed="true"] { outline: 3px solid var(--sr-blue); outline-offset: -3px; background: var(--sr-powder); }
.key-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.key-target b, .key-target small { display: block; }
.key-target small { color: var(--sr-muted); font-size: 10px; }
.key-risk { font-size: 11px; font-weight: 800; }
.cost-simulator { align-self: start; padding: 26px; border-radius: 30px; background: var(--sr-deep); color: #fff; }
.cost-simulator h4 { color: #fff; font-family: var(--sr-font-body); font-size: 18px; font-weight: 750; }
.cost-control { margin-top: 18px; }
.cost-control label { display: flex; justify-content: space-between; gap: 10px; color: rgba(255,255,255,.72); font-size: 12px; }
.cost-total { margin: 26px 0 8px; font: 520 44px/1 var(--sr-font-heading); }
.cost-simulator > p { color: rgba(255,255,255,.6); font-size: 11px; }

.deployment-layout { display: grid; gap: 16px; }
.deployment-track { display: grid; grid-template-columns: repeat(6,minmax(100px,1fr)); gap: 8px; overflow-x: auto; padding-bottom: 8px; }
.deployment-step { min-height: 110px; padding: 14px; border: 0; border-radius: 20px; background: var(--sr-paper); text-align: left; cursor: pointer; }
.deployment-step[aria-pressed="true"] { background: var(--sr-powder); outline: 3px solid var(--sr-blue); outline-offset: -3px; }
.deployment-step span { color: var(--sr-blue-deep); font: 700 10px var(--sr-font-code); }
.deployment-step b { display: block; margin-top: 12px; font-size: 12px; line-height: 1.35; }
.deployment-detail { min-height: 230px; padding: 26px; border-radius: 28px; background: linear-gradient(145deg,var(--sr-powder),var(--sr-lilac)); }
.deployment-detail h4 { font-size: 34px; }
.deployment-detail dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; margin: 20px 0 0; }
.deployment-detail dt { color: var(--sr-muted); font-size: 11px; font-weight: 800; }
.deployment-detail dd { margin: 4px 0 0; color: var(--sr-copy); font-size: 12px; }
.failure-detective { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--sr-line); }
.failure-grid { display: grid; grid-template-columns: minmax(220px,.8fr) minmax(0,1.2fr); gap: 18px; }

.trust-layout { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.2fr); gap: 24px; }
.trust-controls { display: grid; gap: 15px; padding: 22px; border-radius: 26px; background: var(--sr-paper); }
.trust-result { min-height: 420px; padding: 30px; border-radius: 32px; background: var(--sr-mint); }
.trust-result[data-level="verify"] { background: var(--sr-sun); }
.trust-result[data-level="escalate"] { background: var(--sr-peach); }
.risk-dial { width: 112px; height: 112px; display: grid; place-items: center; border: 12px solid rgba(255,255,255,.75); border-radius: 50%; background: rgba(255,255,255,.45); font: 520 36px var(--sr-font-heading); }
.trust-result h4 { margin: 22px 0 12px; font-size: 38px; }
.trust-actions { display: grid; gap: 8px; margin-top: 18px; padding: 0; list-style: none; }
.trust-actions li { padding-left: 24px; position: relative; color: var(--sr-copy); }
.trust-actions li::before { content: "✓"; position: absolute; left: 0; font-weight: 800; }

.repair-layout { display: grid; gap: 28px; }
.feature-map { position: relative; min-height: 330px; padding: 26px; border-radius: 32px; background: var(--sr-deep); color: #fff; }
.feature-map h4 { color: #fff; font-family: var(--sr-font-body); font-size: 17px; font-weight: 750; }
.feature-nodes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-top: 24px; }
.feature-node { min-height: 90px; display: grid; place-items: center; padding: 14px; border: 2px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); text-align: center; font-size: 12px; }
.feature-node.is-changed { border-color: #8db8ff; background: rgba(77,138,234,.22); color: #fff; }
.feature-node.is-test { border-color: #e6c761; background: rgba(230,199,97,.17); color: #fff; }
.bug-builder { display: grid; grid-template-columns: minmax(0,1fr) 260px; gap: 24px; }
.bug-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.bug-fields .wide { grid-column: 1 / -1; }
.diagnosis-meter { align-self: start; padding: 24px; border-radius: 28px; background: var(--sr-powder); }
.diagnosis-meter strong { display: block; font: 520 48px/1 var(--sr-font-heading); }
.diagnosis-meter span { color: var(--sr-muted); font-size: 11px; }

.mission-block {
  margin: 78px 0 56px;
  padding: clamp(30px,5vw,58px);
  border: 2px solid var(--sr-blue);
  border-radius: 46px 46px 18px 46px;
  background: #fff;
  box-shadow: var(--sr-shadow);
}
.mission-block > header { max-width: 760px; }
.mission-block h3 { margin-bottom: 14px; font-size: clamp(36px,4.4vw,58px); }
.mission-block header > p:last-child { color: var(--sr-copy); font-size: 16px; }
.mission-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 30px 0; padding: 0; list-style: none; }
.mission-steps li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; padding: 18px; border-radius: 20px; background: var(--sr-paper); }
.mission-steps li > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--sr-powder); color: var(--sr-blue-deep); font: 750 10px var(--sr-font-code); }
.mission-steps b { display: block; margin-top: 4px; font-size: 13px; line-height: 1.35; }
.mission-steps p { margin: 5px 0 0; color: var(--sr-copy); font-size: 12px; line-height: 1.5; }
.mission-commands,
.mission-prompt { margin-top: 18px; }
.mission-prompt-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 18px; align-items: start; }
.mission-prompt-options .mission-prompt { min-width: 0; margin-top: 0; padding: 20px; border: 1px solid var(--sr-line); border-radius: 24px 24px 8px 24px; background: var(--sr-paper); }
.prompt-route { display: block; color: var(--sr-blue-deep); font: 750 9px var(--sr-font-code); letter-spacing: .08em; text-transform: uppercase; }
.mission-prompt-option h4 { margin: 7px 0 5px; font-family: var(--sr-font-body); font-size: 18px; font-weight: 800; line-height: 1.25; }
.mission-prompt-option > p { margin: 0; color: var(--sr-copy); font-size: 11px; line-height: 1.45; }
.mission-commands pre,
.mission-prompt pre { overflow-x: auto; margin: 7px 0 10px; padding: 18px; border-radius: 18px; background: var(--sr-deep); color: #fff; white-space: pre-wrap; }
.mission-prompt-option pre { min-height: 350px; margin-top: 16px; }
.mission-commands code,
.mission-prompt code { font: 500 12px/1.65 var(--sr-font-code); }
.mission-links { display: flex; flex-wrap: wrap; gap: 9px 18px; margin-top: 20px; }
.mission-links a { font-size: 12px; font-weight: 750; }
.mission-success { margin: 24px 0 0; padding: 16px 18px; border-radius: 18px; background: var(--sr-mint); color: #24533f; font-size: 13px; }

.prompt-evaluator-mission > header { max-width: 900px; }
.prompt-evaluator-input { margin-top: 30px; padding: 24px; border-radius: 28px 28px 12px 28px; background: var(--sr-paper); }
.prompt-evaluator-input .textarea { min-height: 190px; }
.evaluator-input-heading { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.evaluator-input-heading .control-label { margin-bottom: 8px; }
.evaluator-input-heading > span { color: var(--sr-muted); font-size: 10px; font-weight: 750; }
.evaluator-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 16px; }
.evaluator-actions > span { margin-left: auto; color: var(--sr-muted); font-size: 10px; }
.prompt-evaluator-output { margin-top: 28px; }
.prompt-evaluator-result { display: grid; gap: 18px; }
.evaluator-verdict { padding: 26px; border-radius: 30px 30px 12px 30px; background: var(--sr-peach); }
.evaluator-verdict[data-level="close"] { background: var(--sr-sun); }
.evaluator-verdict[data-level="ready"] { background: var(--sr-mint); }
.evaluator-verdict > div { display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
.evaluator-verdict > div span { color: var(--sr-copy); font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.evaluator-verdict > div strong { color: var(--sr-ink); font: 520 48px/1 var(--sr-font-heading); }
.evaluator-verdict h4 { margin: 14px 0 7px; font-size: clamp(30px,4vw,44px); }
.evaluator-verdict p { max-width: 68ch; margin: 0; color: var(--sr-copy); }
.evaluator-verdict progress { width: 100%; height: 10px; margin-top: 20px; overflow: hidden; border: 0; border-radius: 999px; background: rgba(255,255,255,.56); appearance: none; }
.evaluator-verdict progress::-webkit-progress-bar { border-radius: 999px; background: rgba(255,255,255,.56); }
.evaluator-verdict progress::-webkit-progress-value { border-radius: 999px; background: var(--sr-blue); }
.evaluator-verdict progress::-moz-progress-bar { border-radius: 999px; background: var(--sr-blue); }
.evaluator-checks { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.evaluator-checks article { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 10px; padding: 15px; border: 1px solid var(--sr-line); border-radius: 18px; background: #fff; }
.evaluator-checks article > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--sr-sun); color: var(--sr-ink); font-weight: 850; }
.evaluator-checks article.is-ready > span { background: var(--sr-mint); color: #176142; }
.evaluator-checks b { display: block; font-size: 12px; }
.evaluator-checks p { margin: 3px 0 0; color: var(--sr-copy); font-size: 10px; line-height: 1.45; }
.evaluator-advice { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.evaluator-advice section { min-width: 0; padding: 20px; border-radius: 22px 22px 8px 22px; background: var(--sr-paper); }
.evaluator-advice section:nth-child(2) { background: var(--sr-powder); }
.evaluator-advice section:nth-child(3) { background: var(--sr-lilac); }
.evaluator-advice h4 { margin: 0 0 10px; font-family: var(--sr-font-body); font-size: 15px; font-weight: 850; letter-spacing: -.02em; }
.evaluator-advice ul { margin: 0; padding-left: 18px; color: var(--sr-copy); }
.evaluator-advice li { margin: 8px 0; font-size: 11px; line-height: 1.5; }
.evaluator-rewrite { padding: 24px; border-radius: 28px 28px 28px 10px; background: var(--sr-deep); color: #fff; }
.evaluator-rewrite > div span { color: #9ec4ff; font: 750 9px var(--sr-font-code); letter-spacing: .08em; text-transform: uppercase; }
.evaluator-rewrite h4 { margin: 7px 0 14px; color: #fff; font-family: var(--sr-font-body); font-size: 22px; font-weight: 800; }
.evaluator-rewrite pre { max-width: 100%; overflow-x: auto; margin: 0 0 14px; padding: 18px; border-radius: 18px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.88); white-space: pre-wrap; }
.evaluator-rewrite code { font: 500 11px/1.65 var(--sr-font-code); }

.access-scope-lab { display: grid; gap: 22px; }
.scope-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.scope-option { min-height: 98px; display: flex; justify-content: space-between; gap: 12px; align-items: start; padding: 16px; border: 1px solid var(--sr-line); border-radius: 18px; background: #fff; text-align: left; cursor: pointer; }
.scope-option[aria-pressed="true"] { border-color: var(--sr-blue); background: var(--sr-powder); }
.scope-option b,
.scope-option small { display: block; }
.scope-option b { font-size: 13px; line-height: 1.35; }
.scope-option small { margin-top: 4px; color: var(--sr-muted); font-size: 10px; line-height: 1.45; }
.scope-option em { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: var(--sr-mint); color: #24533f; font-size: 9px; font-style: normal; font-weight: 750; }
.injection-panel { padding: 22px; border-radius: 22px; background: var(--sr-paper); }
.injection-panel blockquote { margin: 12px 0 16px; padding: 16px 18px; border-left: 4px solid var(--sr-blue); background: #fff; color: var(--sr-copy); font-size: 14px; }
.injection-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.injection-options .choice-button { width: 100%; text-align: left; }

.artifact-block {
  margin: 78px 0 56px;
  display: grid;
  grid-template-columns: minmax(250px,.72fr) minmax(0,1.28fr);
  gap: 34px;
  padding: clamp(30px,5vw,58px);
  border-radius: 18px 46px 46px 46px;
  background: var(--sr-lilac);
}
.artifact-block.artifact-trophy { grid-template-columns: minmax(0,1fr); background: var(--sr-mint); }
.artifact-trophy header { max-width: 760px; }
.trophy-summary { padding: 20px 22px; border-left: 4px solid #297a5b; background: rgba(255,255,255,.55); color: #24533f !important; font-size: 16px; font-weight: 700; }
.artifact-block h3 { font-size: clamp(36px,4vw,52px); }
.artifact-block header p { color: var(--sr-copy); }
.artifact-done { padding: 15px 17px; border-radius: 18px; background: rgba(255,255,255,.55); color: var(--sr-copy); font-size: 13px; }
.artifact-editor { display: grid; gap: 12px; }
.artifact-editor textarea { min-height: 360px; background: rgba(255,255,255,.88); }
.artifact-actions { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; }
.saved-note { color: var(--sr-muted); font-size: 11px; }
.artifact-checklist { margin: 6px 0 0; padding: 0; list-style: none; }
.artifact-checklist li { position: relative; margin: 8px 0; padding-left: 25px; color: var(--sr-copy); font-size: 12px; }
.artifact-checklist li::before { content: "○"; position: absolute; left: 0; color: var(--sr-blue-deep); font-weight: 800; }

.glossary-block { margin: 56px 0; }
.glossary-block h3 { font-size: 36px; }
.glossary-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px 28px; margin: 0; }
.glossary-list div { padding: 16px 0; border-bottom: 1px solid var(--sr-line); }
.glossary-list dt { font-weight: 800; }
.glossary-list dd { margin: 4px 0 0; color: var(--sr-copy); font-size: 13px; }

.chapter-controls { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 66px; padding-top: 26px; border-top: 1px solid var(--sr-line); }
.chapter-controls .previous { justify-self: start; }
.chapter-controls .next { justify-self: end; }
.chapter-controls button { border: 0; cursor: pointer; }
.complete-toggle { min-height: 48px; padding: 11px 18px; border-radius: 999px; background: var(--sr-mint); color: #176142; font-weight: 800; }
.complete-toggle.is-complete { background: var(--sr-deep); color: #fff; }
.chapter-jump { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 0; background: transparent; color: var(--sr-blue-deep); font-weight: 750; }

.field-kit-stage {
  padding: clamp(34px,5vw,60px);
  border-radius: 44px;
  background: #fff;
  box-shadow: var(--sr-shadow);
}
.field-kit-stage > header h1,
.field-kit-stage > header h2 { font-size: clamp(48px,6vw,82px); }
.field-kit-stage > header p { max-width: 70ch; color: var(--sr-copy); font-size: 17px; }
.field-kit-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 38px; }
.kit-entry { padding: 22px; border-radius: 24px; background: var(--sr-paper); }
.kit-entry.has-draft { background: var(--sr-powder); }
.kit-entry span { color: var(--sr-blue-deep); font: 700 11px var(--sr-font-code); }
.kit-entry h3 { margin: 12px 0 8px; font-family: var(--sr-font-body); font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.kit-entry pre { max-height: 170px; overflow: auto; margin: 0; color: var(--sr-copy); font: 400 11px/1.5 var(--sr-font-code); white-space: pre-wrap; }
.kit-entry p { color: var(--sr-muted); font-size: 12px; }
.finish-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.next-run { margin-top: 32px; padding: 24px; border-radius: 24px; background: var(--sr-mint); color: #24533f; }

.mobile-chapter-button { display: none; }
.chapter-dialog {
  width: min(620px, calc(100% - 24px));
  max-height: calc(100dvh - 24px);
  padding: 0;
  border: 0;
  border-radius: 30px;
  background: #fff;
  box-shadow: 0 34px 100px rgba(6,15,38,.42);
}
.chapter-dialog::backdrop { background: rgba(6,15,38,.65); backdrop-filter: blur(4px); }
.dialog-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 18px; align-items: start; padding: 24px 24px 18px; background: #fff; border-bottom: 1px solid var(--sr-line); }
.dialog-head h2 { margin: 0; font-size: 34px; }
.icon-button { width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--sr-paper); font-size: 24px; cursor: pointer; }
.chapter-dialog nav { display: grid; gap: 7px; padding: 14px; }
.dialog-link { width: 100%; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; padding: 13px; border: 0; border-radius: 18px; background: var(--sr-paper); text-align: left; cursor: pointer; }
.dialog-link[aria-current="step"] { background: var(--sr-powder); }
.dialog-link b, .dialog-link small { display: block; }
.dialog-link small { color: var(--sr-muted); font-size: 10px; }
.dialog-kit-link { width: calc(100% - 28px); min-height: 48px; margin: 0 14px 14px; border: 0; border-radius: 18px; background: var(--sr-deep); color: #fff; font-weight: 800; cursor: pointer; }

.site-footer { padding: 58px 0; background: var(--sr-deep); color: #fff; }
.footer-inner { display: grid; grid-template-columns: 1fr auto; gap: 42px; align-items: end; }
.footer-wordmark { margin-bottom: 14px; }
.footer-inner p { max-width: 52ch; margin: 0; color: rgba(255,255,255,.62); font-size: 13px; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: end; gap: 18px; }
.footer-links a, .footer-links button { min-height: 44px; display: inline-flex; align-items: center; border: 0; background: transparent; color: rgba(255,255,255,.74); font-size: 12px; text-decoration: none; cursor: pointer; }
.footer-links a:hover, .footer-links button:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; }
.noscript { margin: 0; padding: 16px; background: var(--sr-sun); color: var(--sr-ink); text-align: center; }
.toast { position: fixed; z-index: 100; right: 20px; bottom: 20px; max-width: 340px; padding: 13px 18px; border-radius: 999px; background: var(--sr-deep); color: #fff; box-shadow: var(--sr-shadow); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity var(--fz-duration-fast), transform var(--fz-duration-fast); }
.toast.is-visible { opacity: 1; transform: translateY(0); }
.clipboard-helper { position: fixed; left: -9999px; top: 0; opacity: 0; pointer-events: none; }

@media (max-width: 1120px) {
  .hero-grid { grid-template-columns: minmax(0,1fr) minmax(330px,.8fr); gap: 44px; }
  .course-shell { grid-template-columns: 260px minmax(0,1fr); gap: 34px; }
  .chapter-head { grid-template-columns: 1fr; }
  .chapter-mini-art { min-height: 220px; }
  .activity-block { padding: 36px; }
  .provider-grid { grid-template-columns: 1fr; }
  .deployment-track { grid-template-columns: repeat(6,150px); }
}

@media (max-width: 900px) {
  :root { --sr-shell: min(100% - 34px, 760px); }
  body { padding-bottom: 68px; }
  .header-inner { grid-template-columns: auto 1fr; }
  .header-course { display: none; }
  .header-links { justify-self: end; }
  .open-badge { display: none; }
  .hero { padding-top: 64px; }
  .hero-grid { grid-template-columns: 1fr; }
  .hero-copy { max-width: none; }
  .hero h1 { max-width: 12ch; }
  .hero-visual { width: min(100%, 630px); aspect-ratio: 16 / 10; justify-self: center; border-radius: 72px 24px 72px 24px; }
  .hero-visual::after { border-radius: 61px 17px 61px 17px; }
  .hero-meta { grid-template-columns: 1fr; }
  .hero-freedom { border-radius: 22px; }
  .kit-preview-grid { grid-template-columns: 1fr; }
  .course-shell { display: block; }
  .chapter-rail { display: none; }
  .mobile-chapter-button {
    position: fixed;
    z-index: 50;
    left: 12px;
    right: 12px;
    bottom: 10px;
    min-height: 54px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 18px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: var(--sr-deep);
    color: #fff;
    box-shadow: 0 18px 50px rgba(6,15,38,.34);
    font-size: 12px;
    cursor: pointer;
  }
  .mobile-chapter-button span:last-child { color: #9ec4ff; font-weight: 800; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-links { justify-content: start; }
}

@media (max-width: 720px) {
  :root { --sr-shell: calc(100% - 26px); }
  .header-inner { min-height: 60px; }
  .header-links a { font-size: 12px; }
  .hero { padding-top: 52px; }
  .hero h1 { font-size: clamp(50px,15vw,72px); }
  .hero-actions { display: grid; }
  .button { width: 100%; }
  .route-columns { grid-template-columns: 1fr; gap: 46px; }
  .route-chip { min-height: 0; }
  .checkpoint button { min-height: 92px; border-radius: 24px; }
  .kit-list { grid-template-columns: 1fr; }
  .route-chip, .route-column:nth-child(2) .route-chip { border-radius: 22px; }
  .chapter-head { margin-bottom: 42px; padding: 28px; border-radius: 32px 32px 14px 32px; }
  .chapter-head h2 { font-size: clamp(42px,12vw,60px); }
  .chapter-mini-art { order: -1; min-height: 190px; }
  .chapter-mini-art.concept-map { min-height: 0; }
  .chapter-mini-art.tool-map-figure,
  .chapter-mini-art.terminal-session { order: initial; }
  .chapter-intro { font-size: 17px; }
  .teaching-section { padding: 0; }
  .model-family-grid { grid-template-columns: 1fr; }
  .model-family-card { border-right: 0; border-bottom: 1px solid var(--sr-line); }
  .model-family-card:last-child { border-bottom: 0; }
  .token-context-visual { grid-template-columns: 1fr; }
  .token-context-visual figcaption { grid-column: auto; }
  .mental-model { padding: 30px; border-radius: 30px 30px 30px 12px; }
  .model-steps { grid-template-columns: 1fr; }
  .activity-block { padding: 26px 20px; border-radius: 32px 32px 14px 32px; }
  .prediction-layout, .filter-panel, .mode-grid, .xray-layout, .context-layout, .budget-layout, .version-layout, .api-layout, .trust-layout, .failure-grid, .artifact-block, .bug-builder { grid-template-columns: 1fr; }
  .filter-controls { padding: 21px; }
  .provider-status { flex-wrap: wrap; }
  .provider-card { padding: 21px; }
  .xray-preview, .budget-meter { position: static; }
  .provider-grid { grid-template-columns: 1fr; }
  .compare-list { grid-template-columns: 1fr; }
  .source-shelf ul { columns: 1; }
  .workflow-step { grid-template-columns: 36px minmax(0,1fr) auto; }
  .workflow-step select { grid-column: 2 / -1; }
  .feature-list { grid-template-columns: 1fr; }
  .deployment-detail dl { grid-template-columns: 1fr; }
  .artifact-block { gap: 22px; padding: 28px 22px; border-radius: 14px 32px 32px 32px; }
  .mission-block { padding: 28px 22px; border-radius: 32px 32px 14px 32px; }
  .mission-steps,
  .mission-prompt-options,
  .scope-options,
  .injection-options { grid-template-columns: 1fr; }
  .mission-prompt-option pre { min-height: 0; }
  .evaluator-checks,
  .evaluator-advice { grid-template-columns: 1fr; }
  .evaluator-actions > span { width: 100%; margin-left: 0; }
  .artifact-editor textarea { min-height: 310px; }
  .glossary-list, .field-kit-summary { grid-template-columns: 1fr; }
  .chapter-controls { grid-template-columns: 1fr 1fr; }
  .complete-toggle { grid-column: 1 / -1; grid-row: 1; }
  .chapter-controls .previous { grid-column: 1; }
  .chapter-controls .next { grid-column: 2; text-align: right; }
  .bug-fields { grid-template-columns: 1fr; }
  .bug-fields .wide { grid-column: auto; }
}

@media (max-width: 430px) {
  :root { --sr-shell: calc(100% - 20px); }
  .wordmark { font-size: 13px; }
  .wordmark-mark { width: 31px; height: 31px; }
  .hero h1 { font-size: 48px; }
  .hero-audience { font-size: 16px; }
  .hero-intro { font-size: 17px; }
  .hero-promise { padding-left: 14px; }
  .hero-visual { aspect-ratio: 4 / 3; border-radius: 48px 16px 48px 16px; }
  .hero-visual::after { inset: 9px; border-radius: 40px 11px 40px 11px; }
  .section-intro h2, .kit-preview h2 { font-size: 40px; }
  .checkpoint button { grid-template-columns: 40px 1fr auto; gap: 10px; padding: 14px; }
  .checkpoint-number { width: 40px; height: 40px; }
  .chapter-head { padding: 22px; }
  .chapter-mini-art { min-height: 150px; }
  .chapter-mini-art.concept-map { padding: 16px; }
  .concept-map-flow li { grid-template-columns: 32px minmax(0,1fr); padding: 9px; }
  .concept-map-flow li > span { width: 32px; height: 32px; }
  .chapter-mini-art span { left: 14px; right: 14px; bottom: 14px; }
  .tool-map-figure table,
  .tool-map-figure thead,
  .tool-map-figure tbody,
  .tool-map-figure tr,
  .tool-map-figure th,
  .tool-map-figure td { display: block; }
  .tool-map-figure thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .tool-map-figure tr { padding: 14px 16px; border-bottom: 1px solid var(--sr-line); }
  .tool-map-figure th,
  .tool-map-figure td { width: auto !important; padding: 0; border: 0; }
  .tool-map-figure tbody th { margin-bottom: 8px; }
  .tool-map-figure tbody td:nth-child(2) { margin-bottom: 8px; }
  .terminal-line { grid-template-columns: 1fr; gap: 4px; }
  .chapter-hook { font-size: 16px; }
  .token-demo, .context-demo { padding: 20px; }
  .context-heading { align-items: start; flex-direction: column; gap: 3px; }
  .context-legend { grid-template-columns: 1fr; }
  .activity-block > header h3 { font-size: 38px; }
  .prompt-evaluator-input { padding: 18px; }
  .evaluator-verdict { padding: 21px; }
  .evaluator-verdict > div strong { font-size: 40px; }
  .voice-input-button small { display: none; }
  .basics-next { justify-content: stretch; }
  .basics-next .solid-button { width: 100%; }
  .provider-card header { flex-direction: column; align-items: stretch; }
  .provider-card header .chip-button { align-self: start; }
  .compare-heading { align-items: center; }
  .xray-toggles { grid-template-columns: 1fr; }
  .probability-choice { grid-template-columns: 70px 1fr 36px; gap: 8px; }
  .prediction-context-usage ul { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .feature-nodes { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field-kit-stage { padding: 24px 18px; border-radius: 30px; }
  .toast { left: 12px; right: 12px; bottom: 76px; border-radius: 18px; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media print {
  body { padding: 0; background: #fff; }
  .site-header, .hero, .orientation, .kit-preview, .chapter-rail, .chapter-stage, .mobile-chapter-button, .site-footer, .toast, .finish-actions { display: none !important; }
  .course-shell { display: block; width: 100%; padding: 0; }
  .field-kit-stage { display: block !important; box-shadow: none; }
  .field-kit-summary { grid-template-columns: 1fr; }
  .kit-entry { break-inside: avoid; }
}