:root {
  --ink: #171b24;
  --ink-soft: #596273;
  --paper: #ffffff;
  --paper-light: #ffffff;
  --blue: #2878df;
  --blue-dark: #1f5fae;
  --cyan: #35b9b1;
  --orange: #f05a47;
  --line: #dfe4ea;
  --mono: "IBM Plex Mono", monospace;
  --sans: "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: "Noto Sans TC", -apple-system, BlinkMacSystemFont, sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --max: 1440px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}
a { color: inherit; }
button { font: inherit; }
::selection { background: var(--orange); color: white; }

.skip-link {
  position: fixed;
  top: -5rem;
  left: 1rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: white;
  color: var(--ink);
}
.skip-link:focus { top: 1rem; }

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 40;
  height: 76px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 var(--gutter);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(14px);
  transition: background .3s ease, color .3s ease, box-shadow .3s ease;
}
.site-header.scrolled { box-shadow: 0 8px 24px rgba(22,28,38,.06); }
.brand { display: flex; align-items: center; gap: .7rem; width: max-content; text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid currentColor;
  font: 600 .78rem var(--mono);
}
.brand-copy { font: 500 .62rem/1.2 var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.site-nav { display: flex; gap: 2rem; }
.site-nav a { font: 600 .84rem var(--sans); text-decoration: none; opacity: .68; }
.site-nav a:hover, .site-nav a.active { opacity: 1; }
.print-button {
  justify-self: end;
  padding: .7rem 1rem;
  color: inherit;
  border: 1px solid currentColor;
  background: transparent;
  cursor: pointer;
  font: 600 .82rem var(--sans);
}
.print-button:hover { background: var(--orange); border-color: var(--orange); color: white; }

.hero {
  position: relative;
  min-height: 100svh;
  padding: 120px var(--gutter) 44px;
  overflow: hidden;
  color: var(--ink);
  background: #fff;
}
.hero-grid {
  position: absolute;
  inset: 0;
  opacity: .7;
  background-image:
    linear-gradient(rgba(40,120,223,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40,120,223,.07) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to bottom, black 0%, transparent 95%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 76px var(--gutter) 35px;
  border: 1px solid var(--line);
  pointer-events: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-kicker {
  position: relative;
  display: flex;
  justify-content: space-between;
  margin: 0 2.2rem;
  font: 600 .8rem var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.hero-content {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(380px, 1.08fr);
  align-items: end;
  gap: clamp(3rem, 8vw, 9rem);
  min-height: calc(100svh - 340px);
  max-width: var(--max);
  margin: 0 auto;
  padding: 7vh 2.2rem 3vh;
}
.eyebrow, .section-kicker {
  margin: 0 0 1.2rem;
  font: 600 .82rem var(--mono);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow::before, .section-kicker::before { content: ""; display: inline-block; width: 30px; height: 2px; margin: 0 .75rem .22rem 0; background: var(--orange); }
.section-kicker.light { color: var(--blue); }
.hero h1 {
  margin: 0;
  font: 800 clamp(3.7rem, 6.8vw, 7.6rem)/1.02 var(--sans);
  letter-spacing: -.055em;
}
.hero h1 em { color: var(--blue); font-style: normal; }
.hero-summary { padding-bottom: .7rem; }
.hero-visual { margin: 0 0 1.2rem; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #f5f7fa; box-shadow: 0 18px 50px rgba(28,46,72,.12); }
.hero-visual img { display: block; width: 100%; aspect-ratio: 1.5; object-fit: cover; object-position: center; }
.hero-visual figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem 1rem; color: var(--ink-soft); font: 600 .78rem var(--mono); }
.hero-visual figcaption span { color: var(--blue); }
.hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 8px; background: white; }
.hero-meta div { padding: 1rem; border-right: 1px solid var(--line); }
.hero-meta div + div { padding-left: 1rem; }
.hero-meta div:last-child { border: 0; }
.hero-meta strong { display: block; font: 600 1.45rem var(--mono); color: var(--blue); }
.hero-meta span { font-size: .78rem; color: var(--ink-soft); }
.hero-route {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  max-width: calc(var(--max) - 4.4rem);
  margin: 0 auto;
  padding: 1.1rem 1.3rem;
  background: var(--paper-light);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(28,46,72,.07);
  font: 600 clamp(.72rem, .85vw, .84rem) var(--mono);
}
.hero-route span { white-space: nowrap; }
.hero-route i { flex: 1; min-width: 18px; height: 1px; margin: 0 .75rem; background: var(--ink); opacity: .35; }
.hero-route i::after { content: ""; display: block; float: right; width: 5px; height: 5px; margin-top: -2px; border-top: 1px solid; border-right: 1px solid; transform: rotate(45deg); }
.hero-syllabus {
  position: relative;
  z-index: 4;
  max-width: calc(var(--max) - 4.4rem);
  margin: .8rem auto 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 10px 30px rgba(28,46,72,.06);
}
.hero-syllabus summary {
  display: grid;
  grid-template-columns: 170px 1fr auto 24px;
  align-items: center;
  gap: 1rem;
  min-height: 56px;
  padding: .8rem 1.2rem;
  cursor: pointer;
  list-style: none;
}
.hero-syllabus summary::-webkit-details-marker { display: none; }
.hero-syllabus summary:hover { background: #f7f9fc; }
.syllabus-label { color: var(--blue); font: 600 .75rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.hero-syllabus summary strong { font-size: .95rem; }
.syllabus-count { color: var(--ink-soft); font-size: .82rem; }
.hero-syllabus summary i { position: relative; width: 22px; height: 22px; border: 1px solid var(--ink); border-radius: 50%; }
.hero-syllabus summary i::before, .hero-syllabus summary i::after { content: ""; position: absolute; left: 5px; right: 5px; top: 10px; height: 1px; background: var(--ink); transition: transform .2s ease; }
.hero-syllabus summary i::after { transform: rotate(90deg); }
.hero-syllabus[open] summary i::after { transform: rotate(0deg); }
.hero-syllabus[open] summary { border-bottom: 1px solid var(--line); }
.syllabus-table { padding: 0 1.2rem 1.2rem; }
.syllabus-row { display: grid; grid-template-columns: minmax(180px,.65fr) 1.75fr minmax(130px,.55fr); gap: 1.4rem; align-items: start; padding: 1rem .4rem; border-bottom: 1px solid var(--line); }
.syllabus-row:last-child { border-bottom: 0; }
.syllabus-row > b { color: var(--blue); font: 600 .8rem var(--mono); }
.syllabus-row > span:last-child { color: var(--ink-soft); font-size: .82rem; }
.syllabus-row ul { display: flex; flex-wrap: wrap; gap: .35rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.syllabus-row li { font-size: .86rem; line-height: 1.55; }
.syllabus-row li::before { content: "•"; margin-right: .45rem; color: var(--orange); }
.syllabus-head { padding-block: .75rem; color: var(--ink-soft); background: #f9fafb; font: 600 .72rem var(--mono); }
.workshop-syllabus { background: rgba(240,90,71,.035); }
.scroll-cue { display: none; }

.reveal { opacity: 0; transform: translateY(18px); animation: reveal .8s cubic-bezier(.2,.7,.1,1) forwards; animation-delay: var(--delay, 0ms); }
@keyframes reveal { to { opacity: 1; transform: translateY(0); } }

.section {
  display: grid;
  grid-template-columns: minmax(130px, 15vw) 1fr;
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(6rem, 10vw, 10rem) var(--gutter);
}
.section-label { border-right: 1px solid var(--line); }
.section-label span { display: block; font: 500 3rem var(--mono); color: var(--blue); }
.section-label p { margin: .7rem 0; font: 600 .78rem var(--mono); letter-spacing: .08em; text-transform: uppercase; writing-mode: vertical-rl; }
.section-main { min-width: 0; padding-left: clamp(2rem, 6vw, 7rem); }
.section h2, .system-case h2, .agent-section h2, .insight-section h2, .week-nine h2, .closing h2 {
  margin: 0;
  font: 800 clamp(2.2rem, 4.4vw, 4.5rem)/1.22 var(--sans);
  letter-spacing: -.04em;
}

.overview-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(3rem, 8vw, 8rem); margin-top: 4rem; }
.lead-copy > p { margin: 0; font-size: 1.15rem; line-height: 2; color: var(--ink-soft); }
.lead-copy blockquote { margin: 3rem 0 0; padding: 1.7rem 0 1.7rem 1.7rem; border-left: 5px solid var(--orange); font: 700 clamp(1.45rem, 2.4vw, 2.3rem)/1.55 var(--serif); }
.lead-copy blockquote span { display: block; margin-bottom: .5rem; color: var(--orange); font: 600 .65rem var(--mono); letter-spacing: .1em; }
.loop-card { padding: 1.4rem; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; background: #f7f9fc; box-shadow: 14px 14px 0 #e8edf3; }
.loop-title { display: flex; justify-content: space-between; font: 600 .7rem var(--mono); }
.loop-title small { opacity: .7; }
.loop-visual { position: relative; min-height: 330px; }
.loop-visual span { position: absolute; z-index: 2; display: grid; place-items: center; width: 82px; height: 82px; border-radius: 50%; color: var(--ink); background: var(--cyan); text-align: center; font: 600 .68rem/1.2 var(--mono); }
.loop-visual span:nth-child(1) { left: 4%; top: 42%; }
.loop-visual span:nth-child(2) { left: 36%; top: 8%; }
.loop-visual span:nth-child(3) { right: 4%; top: 36%; }
.loop-visual span:nth-child(4) { left: 38%; bottom: 2%; background: var(--orange); color: white; }
.loop-visual svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 5 6; }
.loop-visual .loop-arrow { stroke-dasharray: 0; }
.duration-note { display: flex; gap: 1rem; align-items: flex-start; margin-top: 4rem; padding: 1rem 1.2rem; border: 1px dashed rgba(255,92,53,.65); background: rgba(255,92,53,.05); }
.duration-note p { margin: 0; font-size: .82rem; line-height: 1.7; }
.note-mark { display: grid; flex: 0 0 auto; place-items: center; width: 23px; height: 23px; border-radius: 50%; color: white; background: var(--orange); font: 600 .72rem var(--mono); }

.outcomes { background: #f7f9fc; }
.outcome-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 4rem; background: var(--line); border: 1px solid var(--line); }
.outcome-card { position: relative; min-height: 450px; padding: 2rem; overflow: hidden; background: var(--paper-light); }
.outcome-card.featured { color: var(--ink); background: #eef5ff; transform: translateY(-1.2rem); }
.card-number { font: 500 .72rem var(--mono); opacity: .55; }
.outcome-icon { position: relative; width: 100px; height: 100px; margin: 3.5rem 0 2rem; }
.outcome-icon span { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: var(--orange); }
.outcome-icon span:nth-child(1) { left: 3px; top: 46px; }
.outcome-icon span:nth-child(2) { left: 43px; top: 0; }
.outcome-icon span:nth-child(3) { right: 0; top: 55px; }
.outcome-icon span:nth-child(4) { left: 45px; bottom: 0; }
.outcome-icon::before, .outcome-icon::after { content: ""; position: absolute; inset: 10px; border: 1px solid currentColor; transform: rotate(45deg); opacity: .45; }
.outcome-icon::after { inset: 27px; }
.data-icon span { width: 74px; height: 20px; left: 13px !important; border: 1px solid var(--blue); border-radius: 0; background: transparent; }
.data-icon span:nth-child(1) { top: 7px; }
.data-icon span:nth-child(2) { top: 40px; }
.data-icon span:nth-child(3) { top: 73px; }
.data-icon::before, .data-icon::after { display: none; }
.action-icon span { width: 55px; height: 55px; border: 1px solid var(--orange); background: transparent; }
.action-icon span:nth-child(1) { left: 0; top: 22px; }
.action-icon span:nth-child(2) { left: 26px; top: 22px; }
.action-icon span:nth-child(3) { left: 52px; top: 22px; background: var(--orange); }
.action-icon::before, .action-icon::after { display: none; }
.outcome-card h3 { margin: 0 0 1.2rem; font: 800 1.65rem/1.2 var(--sans); }
.outcome-card > p { color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.outcome-card.featured > p { color: var(--ink-soft); }
.outcome-card ul { margin: 1.5rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--line); list-style: none; font-size: .9rem; line-height: 2; }
.outcome-card li::before { content: "+"; margin-right: .5rem; color: var(--orange); font-family: var(--mono); }

.visual-examples {
  max-width: var(--max);
  margin: 0 auto;
  padding: clamp(5rem, 9vw, 9rem) var(--gutter);
  border-top: 1px solid var(--line);
}
.visual-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 4rem; align-items: end; margin-bottom: 3rem; }
.visual-heading h2 { margin: 0; font: 800 clamp(2.1rem, 4vw, 4rem)/1.25 var(--sans); letter-spacing: -.04em; }
.visual-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 1rem; }
.visual-grid figure { margin: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; box-shadow: 0 10px 28px rgba(22,28,38,.07); }
.visual-grid .visual-large { grid-row: span 2; }
.visual-grid img { display: block; width: 100%; height: 280px; object-fit: cover; object-position: center; }
.visual-grid .visual-large img { height: calc(560px + 1rem + 55px); }
.visual-grid figcaption { display: flex; justify-content: space-between; gap: 1rem; align-items: center; min-height: 55px; padding: .85rem 1rem; border-top: 1px solid var(--line); }
.visual-grid figcaption strong { font-size: .95rem; }
.visual-grid figcaption span { color: var(--blue); font: 600 .78rem var(--mono); }

.system-case { position: relative; display: grid; grid-template-columns: .65fr 1.35fr; gap: 4rem; padding: clamp(5rem, 9vw, 9rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); overflow: hidden; color: var(--ink); border-block: 1px solid var(--line); background: #f7f9fc; }
.system-case::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(40,120,223,.18) 1px, transparent 1px); background-size: 22px 22px; opacity: .38; }
.case-copy, .case-map { position: relative; z-index: 1; }
.case-copy > p:not(.section-kicker) { max-width: 35rem; margin-top: 2rem; color: var(--ink-soft); font-size: 1rem; line-height: 1.9; }
.case-map { min-height: 450px; }
.case-map svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--blue); stroke-width: 4; }
.case-map svg .branch { stroke: #9aa5b4; stroke-width: 2; stroke-dasharray: 4 6; }
.system-node { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 112px; height: 112px; border: 1px solid var(--blue); border-radius: 50%; background: white; box-shadow: 0 8px 22px rgba(22,28,38,.08); font: 600 .8rem var(--mono); }
.system-node span { position: absolute; top: -8px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--blue); color: white; }
.rain { left: 3%; top: 34%; }.river { left: 25%; top: 25%; }.reservoir { left: 44%; top: 40%; }.intake { left: 64%; top: 24%; }.people { right: 0; top: 40%; }
.risk-node { position: absolute; z-index: 2; padding: .7rem .9rem; border: 1px dashed #9aa5b4; color: var(--ink-soft); background: white; font: 600 .72rem var(--mono); }
.flood { left: 7%; bottom: 4%; }.drought { left: 33%; bottom: 0; }.pollution { right: 3%; bottom: 2%; }
.framing-shift { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .9rem; margin-top: 2rem; }
.framing-shift > div { padding: 1rem; border: 1px solid var(--line); border-left: 3px solid var(--orange); border-radius: 6px; background: white; }
.framing-shift > div:last-child { border-left-color: var(--blue); }
.framing-shift small { color: var(--ink-soft); font: 600 .7rem var(--mono); }
.framing-shift p { margin: .35rem 0 0; font-size: .88rem; line-height: 1.65; }
.framing-shift > span { color: var(--blue); font: 600 1rem var(--mono); }

.teaching-details { max-width: var(--max); margin: 0 auto; padding: clamp(6rem, 10vw, 10rem) var(--gutter); }
.detail-heading { display: grid; grid-template-columns: .65fr 1.35fr; gap: 4rem; align-items: end; margin-bottom: 4rem; }
.detail-heading h2 { margin: 0; font: 800 clamp(2.2rem, 4.4vw, 4.5rem)/1.22 var(--sans); letter-spacing: -.04em; }
.detail-block { padding: clamp(1.3rem, 3vw, 2.2rem); border: 1px solid var(--line); border-radius: 8px; background: #f9fafb; }
.detail-intro { display: flex; gap: 1.2rem; align-items: flex-start; margin-bottom: 2rem; }
.detail-index { color: var(--blue); font: 500 2rem var(--mono); }
.detail-intro small { color: var(--blue); font: 600 .75rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.detail-intro h3 { margin: .35rem 0 0; font: 800 clamp(1.3rem, 2vw, 1.8rem) var(--sans); }
.data-matrix { overflow-x: auto; border-top: 1px solid var(--ink); }
.matrix-row { display: grid; grid-template-columns: .75fr 1.3fr 1.15fr .7fr .9fr; min-width: 720px; border-bottom: 1px solid var(--line); }
.matrix-row > * { padding: .85rem .7rem; border-right: 1px solid var(--line); font-size: .86rem; }
.matrix-row > *:last-child { border-right: 0; }
.matrix-row b { color: var(--blue); }
.matrix-head { background: #eef5ff; color: var(--ink-soft); font: 600 .72rem var(--mono); }
.detail-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem; }
.source-groups { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.source-groups div { padding: .9rem; border: 1px solid var(--line); border-radius: 5px; background: white; }
.source-groups b, .source-groups span { display: block; }
.source-groups b { margin-bottom: .35rem; font-size: .9rem; }
.source-groups span { color: var(--ink-soft); font-size: .78rem; line-height: 1.55; }
.ocr-flow { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-top: 1rem; padding: .9rem; border: 1px dashed #aab5c3; background: white; }
.ocr-flow span { color: var(--blue); font: 600 .68rem var(--mono); text-align: center; }
.ocr-flow i { color: var(--orange); font-style: normal; }
.grammar-levels { display: grid; gap: .6rem; }
.grammar-levels div { display: grid; grid-template-columns: 110px 1fr; gap: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 5px; background: white; }
.grammar-levels b { color: var(--blue); font: 600 .75rem var(--mono); }
.grammar-levels span { color: var(--ink-soft); font-size: .8rem; line-height: 1.55; }
.question-output { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: 1rem; }
.question-output span { padding: .65rem .75rem; border-left: 3px solid var(--cyan); background: white; font-size: .78rem; }
.question-output b { margin-right: .3rem; color: var(--ink); font-family: var(--mono); }
.scale-note { margin: 1rem 0 0; color: var(--ink-soft); font-size: .8rem; line-height: 1.65; }
.scale-note strong { color: var(--orange); }

.timeline-section { max-width: none; background: var(--paper-light); }
.timeline-heading { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.view-switch { display: flex; border: 1px solid var(--ink); }
.view-switch button { padding: .65rem 1rem; border: 0; color: var(--ink); background: transparent; cursor: pointer; font: 500 .68rem var(--mono); }
.view-switch button.active { color: white; background: var(--ink); }
.timeline { margin-top: 5rem; }
.timeline-item { display: grid; grid-template-columns: 105px 44px 1fr; }
.time { padding-top: .5rem; text-align: right; font-family: var(--mono); }
.time strong { display: block; color: var(--blue); font-size: .9rem; }
.time span { font-size: .62rem; opacity: .5; }
.timeline-marker { position: relative; }
.timeline-marker::before { content: ""; position: absolute; top: 8px; bottom: -8px; left: 22px; width: 1px; background: var(--line); }
.timeline-item:last-child .timeline-marker::before { bottom: 50%; }
.timeline-marker span { position: absolute; top: 7px; left: 16px; z-index: 1; width: 13px; height: 13px; border: 3px solid var(--paper-light); border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px var(--orange); }
.timeline-content { padding: 0 0 4rem 1.6rem; }
.part-tag { margin-bottom: .6rem; color: var(--blue); font: 600 .78rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.timeline-content h3 { margin: 0; font: 800 clamp(1.4rem, 2.5vw, 2.2rem) var(--sans); }
.timeline-content > p { max-width: 720px; margin: 1rem 0 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.8; }
.chapter-list { display: none; margin-top: 1.5rem; border-top: 1px solid var(--line); }
.timeline.show-details .chapter-list { display: block; }
.chapter-list div { display: grid; grid-template-columns: 68px 1fr auto; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.chapter-list b, .chapter-list small { font-family: var(--mono); }
.chapter-list b { color: var(--orange); }.chapter-list small { opacity: .55; }
.workshop-row .timeline-content { padding: 2rem; border: 2px solid var(--orange); background: rgba(255,92,53,.04); }

.agent-section { position: relative; display: grid; grid-template-columns: .7fr 1fr; align-items: center; gap: 5rem; padding: clamp(6rem, 10vw, 10rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); overflow: hidden; color: var(--ink); border-block: 1px solid var(--line); background: white; }
.agent-section::before { content: "AGENT"; position: absolute; right: -2vw; bottom: -10vw; color: transparent; -webkit-text-stroke: 1px rgba(40,120,223,.1); font: 900 20vw var(--sans); }
.agent-heading, .agent-loop, .responsibility-grid, .reproducibility-strip { position: relative; z-index: 1; }
.agent-heading > p:last-child { max-width: 550px; margin-top: 2rem; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.9; }
.agent-loop { width: min(41vw, 560px); aspect-ratio: 1; margin: auto; border: 1px dashed #aeb7c2; border-radius: 50%; animation: spin 70s linear infinite reverse; }
.agent-loop::before { content: ""; position: absolute; inset: 14%; border: 1px solid var(--line); border-radius: 50%; }
.agent-center { position: absolute; inset: 32%; display: grid; place-content: center; border-radius: 50%; background: var(--blue); color: white; text-align: center; animation: spin 70s linear infinite; }
.agent-center strong { font: 700 1.5rem var(--serif); }.agent-center span { font: 500 .55rem var(--mono); }
.agent-loop > span { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 92px; height: 40px; margin: -20px -46px; border: 1px solid var(--line); border-radius: 4px; background: white; box-shadow: 0 6px 18px rgba(22,28,38,.07); color: var(--blue); font: 600 .72rem var(--mono); transform: rotate(calc(var(--i) * 45deg)) translateX(clamp(140px, 16vw, 240px)) rotate(calc(var(--i) * -45deg)); }
.responsibility-grid { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid var(--line); background: var(--line); }
.responsibility-grid div { padding: 1.3rem; background: #f9fafb; }
.responsibility-grid span { color: var(--blue); font: 600 .78rem var(--mono); }
.responsibility-grid p { margin: .6rem 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.8; }
.reproducibility-strip { grid-column: 1 / -1; display: grid; grid-template-columns: 190px 1fr auto; gap: 1.2rem; align-items: center; padding: 1rem 1.2rem; border: 1px solid var(--blue); border-radius: 6px; background: #eef5ff; }
.reproducibility-strip span { color: var(--blue); font: 600 .75rem var(--mono); }
.reproducibility-strip p { margin: 0; color: var(--ink-soft); font-size: .84rem; }
.reproducibility-strip strong { font-size: .84rem; }

.workshop h2 { max-width: 900px; }
.workshop-intro { max-width: 780px; margin: 2rem 0 4rem; color: var(--ink-soft); line-height: 1.9; }
.workshop-checklist { display: flex; flex-wrap: wrap; gap: .55rem; margin: -2rem 0 4rem; padding: 0; list-style: none; counter-reset: workshop-step; }
.workshop-checklist li { counter-increment: workshop-step; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 5px; background: #f9fafb; font-size: .82rem; }
.workshop-checklist li::before { content: counter(workshop-step, decimal-leading-zero); margin-right: .5rem; color: var(--blue); font: 600 .68rem var(--mono); }
.deliverable-stack { border-top: 2px solid var(--ink); }
.deliverable-stack article { display: grid; grid-template-columns: 80px .9fr 1.1fr; align-items: center; gap: 2rem; min-height: 180px; padding: 2rem 0; border-bottom: 1px solid var(--line); }
.deliverable-number { font: 500 2.6rem var(--mono); color: var(--blue); }
.deliverable-stack small { color: var(--orange); font: 600 .76rem var(--mono); text-transform: uppercase; }
.deliverable-stack h3 { margin: .3rem 0; font: 800 1.55rem var(--sans); }
.deliverable-stack p { margin: .4rem 0 0; color: var(--ink-soft); font-size: .95rem; }
.mini-system { display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: white; }
.mini-system i { padding: .65rem; border: 1px solid var(--blue); color: var(--blue); font: normal 500 .68rem var(--mono); }
.mini-system b { color: var(--orange); }
.mini-table { display: grid; grid-template-columns: 1.3fr repeat(4, 1fr); border: 1px solid var(--ink); background: white; }
.mini-table span { min-width: 0; padding: .8rem .35rem; border-right: 1px solid var(--line); font: 500 .55rem var(--mono); text-align: center; }
.deliverable-stack blockquote { margin: 0; padding: 1.3rem; border-left: 5px solid var(--orange); background: white; font: 600 .9rem/1.8 var(--serif); }
.deliverable-stack blockquote strong { color: var(--blue); }

.insight-section { display: grid; grid-template-columns: .6fr 1.4fr; gap: 5rem; padding: clamp(6rem, 10vw, 10rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); background: #f7f9fc; }
.insight-questions { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin-top: 2rem; }
.insight-questions span { padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 4px; background: white; color: var(--blue); font: 600 .65rem var(--mono); }
.insight-questions i { color: var(--orange); font-style: normal; }
.insight-steps { display: grid; grid-template-columns: 1fr auto 1fr auto 1.5fr; align-items: stretch; }
.insight-steps > div { padding: 1.3rem; border: 1px solid var(--ink); background: var(--paper); }
.insight-steps > span { align-self: center; margin: 0 .6rem; color: var(--orange); font: 600 1.4rem var(--mono); }
.insight-steps small { color: var(--blue); font: 600 .75rem var(--mono); }
.insight-steps p { margin: 1rem 0 0; font-size: .92rem; line-height: 1.7; }
.insight-steps .insight-final { color: var(--ink); border-color: var(--blue); background: #eef5ff; }
.insight-steps .insight-final small { color: var(--blue); }
.guardrail { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; margin-top: 3rem; padding: 1.2rem; border: 1px solid var(--orange); }
.guardrail strong { color: var(--orange); font: 600 .9rem var(--mono); white-space: nowrap; }
.guardrail p { margin: 0; font-size: .78rem; }

.week-nine { position: relative; display: grid; grid-template-columns: .6fr 1.4fr; gap: 4rem; min-height: 650px; padding: clamp(6rem, 10vw, 10rem) max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter))); overflow: hidden; color: var(--ink); border-top: 1px solid var(--line); background: white; }
.week-nine::after { content: ""; position: absolute; right: -8vw; top: -16vw; width: 52vw; height: 52vw; border: 1px solid rgba(40,120,223,.2); border-radius: 50%; box-shadow: 0 0 0 8vw rgba(40,120,223,.025), 0 0 0 16vw rgba(40,120,223,.02); }
.week-nine-index { align-self: center; color: var(--blue); font: 500 clamp(8rem, 19vw, 18rem)/1 var(--mono); letter-spacing: -.1em; opacity: .2; }
.week-nine-copy { position: relative; z-index: 2; align-self: center; }
.week-nine-copy > p:not(.section-kicker) { max-width: 700px; margin: 2rem 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.9; }
.next-route { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin-top: 3rem; font: 500 .62rem var(--mono); }
.next-route span { padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 4px; background: #f9fafb; }
.next-route i { color: var(--orange); font-style: normal; }

.closing { padding: clamp(7rem, 12vw, 12rem) var(--gutter); text-align: center; background: var(--paper-light); }
.closing > p { color: var(--blue); font: 600 .72rem var(--mono); }
.closing h2 { margin: 1rem auto 3rem; }
.closing a { display: inline-flex; gap: 1rem; padding-bottom: .5rem; border-bottom: 1px solid; font: 500 .68rem var(--mono); text-decoration: none; }
footer { display: flex; justify-content: space-between; padding: 1.3rem var(--gutter); color: var(--ink-soft); border-top: 1px solid var(--line); background: white; font: 600 .72rem var(--mono); }

/* System → Action course architecture */
.course-flow { max-width: none; background: #fff; }
.course-flow > .section-main { max-width: calc(var(--max) - 130px); }
.flow-heading { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 3rem; }
.flow-heading h2 { max-width: 980px; }
.flow-lead { max-width: 780px; margin: 1.8rem 0 0; color: var(--ink-soft); font-size: 1.05rem; line-height: 1.9; }
.flow-controls { display: flex; border: 1px solid var(--ink); }
.flow-controls button { padding: .72rem 1rem; border: 0; background: white; color: var(--ink); cursor: pointer; font: 600 .7rem var(--mono); }
.flow-controls button + button { border-left: 1px solid var(--ink); }
.flow-controls button:hover, .flow-controls button:focus-visible { background: var(--ink); color: white; }

.flow-map { display: grid; grid-template-columns: repeat(6, 1fr); margin: 4rem 0 5rem; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #f7f9fc; list-style: none; overflow: hidden; }
.flow-map li { position: relative; min-width: 0; padding: 1.1rem; border-right: 1px solid var(--line); }
.flow-map li:last-child { border-right: 0; }
.flow-map li:not(:last-child)::after { content: ""; position: absolute; z-index: 2; right: -5px; top: 50%; width: 8px; height: 8px; border-top: 1px solid var(--blue); border-right: 1px solid var(--blue); background: #f7f9fc; transform: translateY(-50%) rotate(45deg); }
.flow-map span, .flow-map b, .flow-map small { display: block; }
.flow-map span { margin-bottom: 1.5rem; color: var(--blue); font: 600 .7rem var(--mono); }
.flow-map b { overflow: hidden; font: 600 clamp(.65rem, .78vw, .78rem) var(--mono); text-overflow: ellipsis; }
.flow-map small { margin-top: .4rem; color: var(--ink-soft); font: 500 .62rem var(--mono); }

.flow-parts { border-top: 1px solid var(--ink); }
.flow-part { border-bottom: 1px solid var(--line); }
.flow-part > summary { display: grid; grid-template-columns: 86px minmax(0,1fr) 125px; gap: 1.6rem; align-items: center; min-height: 188px; padding: 1.8rem 1.2rem; cursor: pointer; list-style: none; transition: background .25s ease; }
.flow-part > summary::-webkit-details-marker { display: none; }
.flow-part > summary:hover { background: #f7f9fc; }
.flow-part[open] > summary { background: #eef5ff; border-bottom: 1px solid var(--blue); }
.flow-part-number { color: var(--blue); font: 500 3rem var(--mono); letter-spacing: -.08em; }
.flow-summary-copy small { color: var(--blue); font: 600 .73rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.flow-summary-copy h3 { margin: .55rem 0 .65rem; font: 800 clamp(1.45rem, 2.4vw, 2.35rem)/1.3 var(--sans); letter-spacing: -.035em; }
.flow-summary-copy p { max-width: 820px; margin: 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.8; }
.flow-time { justify-self: end; text-align: right; font-family: var(--mono); }
.flow-time strong, .flow-time span { display: block; }
.flow-time strong { color: var(--blue); font-size: .82rem; }
.flow-time span { margin-top: .2rem; color: var(--ink-soft); font-size: .65rem; }
.flow-time i { position: relative; display: inline-block; width: 30px; height: 30px; margin-top: 1.1rem; border: 1px solid var(--ink); border-radius: 50%; }
.flow-time i::before, .flow-time i::after { content: ""; position: absolute; left: 7px; right: 7px; top: 14px; height: 1px; background: var(--ink); transition: transform .2s ease; }
.flow-time i::after { transform: rotate(90deg); }
.flow-part[open] .flow-time i::after { transform: rotate(0deg); }

.flow-part-body { position: relative; padding: 2.4rem 1.2rem 5rem 7.35rem; background-image: radial-gradient(rgba(40,120,223,.13) 1px, transparent 1px); background-size: 22px 22px; }
.flow-part-body::before { content: ""; position: absolute; left: 3.85rem; top: 0; bottom: 3rem; width: 1px; background: var(--line); }
.flow-answer { display: grid; grid-template-columns: 150px 1fr; gap: 1rem; align-items: baseline; margin-bottom: 2rem; padding: 1.2rem 1.3rem; border-left: 4px solid var(--orange); background: white; box-shadow: 0 8px 24px rgba(22,28,38,.05); }
.flow-answer span { color: var(--orange); font: 600 .7rem var(--mono); text-transform: uppercase; }
.flow-answer strong { font-size: 1.15rem; line-height: 1.65; }
.flow-chapters { margin-bottom: 2rem; border-top: 1px solid var(--ink); background: rgba(255,255,255,.92); }
.flow-chapters div { display: grid; grid-template-columns: 82px 1fr auto; gap: 1rem; padding: .9rem .35rem; border-bottom: 1px solid var(--line); }
.flow-chapters b, .flow-chapters small { font: 600 .78rem var(--mono); }
.flow-chapters b { color: var(--orange); }
.flow-chapters span { font-size: .9rem; }
.flow-chapters small { color: var(--ink-soft); }
.flow-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.system-detail { align-items: stretch; }
.system-detail > div:first-child { padding: 1.5rem; border: 1px solid var(--line); background: white; }
.flow-detail-label { margin: 0 0 .5rem; color: var(--blue); font: 600 .72rem var(--mono); text-transform: uppercase; }
.flow-part-body h4 { margin: 0; font: 800 clamp(1.5rem, 2.5vw, 2.25rem)/1.35 var(--sans); }
.system-detail > div:first-child > p:not(.flow-detail-label) { color: var(--ink-soft); line-height: 1.8; }
.system-chain { display: grid; grid-template-columns: repeat(9, auto); align-items: center; gap: .5rem; padding: 1.2rem; border: 1px solid var(--blue); background: #eef5ff; overflow-x: auto; }
.system-chain > div { display: grid; place-items: center; width: 92px; height: 92px; border: 1px solid var(--blue); border-radius: 50%; background: white; text-align: center; }
.system-chain > div span { color: var(--blue); font: 600 .6rem var(--mono); }
.system-chain > div b { font-size: .76rem; }
.system-chain > i { color: var(--orange); font-style: normal; }
.system-chain > p { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; margin: .8rem 0 0; }
.system-chain > p span { padding: .45rem .6rem; border: 1px dashed #aab5c3; background: white; color: var(--ink-soft); font: 500 .65rem var(--mono); }
.translation-path, .agent-path { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: 2rem 0; padding: 1rem; border: 1px solid var(--blue); background: #eef5ff; overflow-x: auto; }
.translation-path span, .agent-path span { flex: 0 0 auto; padding: .65rem .8rem; border: 1px solid var(--line); background: white; color: var(--blue); font: 600 .72rem var(--mono); }
.translation-path i, .agent-path i { color: var(--orange); font-style: normal; }
.data-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.data-method-card { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); background: white; }
.data-method-card header { display: grid; grid-template-columns: 50px 1fr; gap: 1rem; align-items: start; }
.data-method-card header > span { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid var(--blue); color: var(--blue); font: 600 1rem var(--mono); }
.data-method-card header small { color: var(--blue); font: 600 .66rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.data-method-card h4 { margin-top: .25rem; font-size: 1.35rem; }
.data-method-card > p:not(.method-guard) { margin: 1.2rem 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.75; }
.ai-method { border-color: rgba(240,90,71,.5); }
.ai-method header > span { border-color: var(--orange); color: var(--orange); }
.ai-method header small { color: var(--orange); }
.method-sequence { display: flex; align-items: center; gap: .45rem; margin: 1rem 0; overflow-x: auto; }
.method-sequence span { flex: 0 0 auto; padding: .5rem .6rem; border: 1px solid var(--line); background: #f7f9fc; font: 600 .64rem var(--mono); }
.method-sequence i { color: var(--orange); font-style: normal; }
.method-cases { display: grid; gap: .6rem; }
.method-cases > div { padding: .9rem; border-left: 3px solid var(--blue); background: #f7f9fc; }
.ai-method .method-cases > div { border-left-color: var(--orange); }
.method-cases b { font-size: .84rem; }
.method-cases p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .76rem; line-height: 1.65; }
.method-guard { margin: 1rem 0 0; padding-top: .9rem; border-top: 1px dashed #aab5c3; color: var(--ink-soft); font-size: .75rem; line-height: 1.65; }
.method-guard strong { color: var(--orange); }
.method-principles { display: grid; grid-template-columns: 110px 1fr; gap: .8rem 1rem; margin-top: 1rem; padding: 1rem; border: 1px solid var(--line); background: white; }
.method-principles span { color: var(--blue); font: 600 .68rem var(--mono); text-transform: uppercase; }
.method-principles p { margin: 0; color: var(--ink-soft); font-size: .78rem; line-height: 1.7; }
.method-principles b { color: var(--ink); }
.ocr-flow.extended { justify-content: flex-start; overflow-x: auto; }
.ocr-flow.extended span { flex: 1 0 auto; }
.flow-part .data-matrix, .flow-part .source-groups { background: white; }
.flow-visual-grid { margin-top: 1rem; }
.flow-visual-grid .visual-large img { height: 460px; }
.flow-visual-grid > figure:not(.visual-large) img { height: 200px; }
.representation-lab { margin-top: 2.5rem; padding-top: 2.5rem; border-top: 2px solid var(--ink); }
.representation-heading { display: grid; grid-template-columns: 160px 1fr; gap: 2rem; align-items: start; margin-bottom: 1.5rem; }
.representation-heading > div:first-child span, .representation-heading > div:first-child small { display: block; }
.representation-heading > div:first-child span { color: var(--orange); font: 600 1rem var(--mono); }
.representation-heading > div:first-child small { margin-top: .45rem; color: var(--blue); font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.representation-heading h4 { font-size: clamp(1.55rem, 2.7vw, 2.45rem); }
.representation-heading p { max-width: 800px; margin: .8rem 0 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.8; }
.trajectory-case, .chart-case { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); background: white; }
.trajectory-copy > span, .chart-case > div > span { color: var(--blue); font: 600 .68rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.trajectory-copy h5, .chart-case h5 { margin: .45rem 0 .8rem; font: 800 clamp(1.35rem, 2vw, 1.9rem) var(--sans); }
.trajectory-copy > p, .chart-case > div > p { max-width: 900px; margin: 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.8; }
.trajectory-copy ol { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: 1.2rem 0; padding: 0; list-style: none; }
.trajectory-copy li { padding: .8rem; border: 1px solid var(--line); background: #f7f9fc; }
.trajectory-copy li b, .trajectory-copy li span { display: block; }
.trajectory-copy li b { color: var(--orange); font: 600 .68rem var(--mono); }
.trajectory-copy li span { margin-top: .35rem; color: var(--ink-soft); font-size: .72rem; line-height: 1.55; }
.trajectory-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.trajectory-gallery figure, .chart-case figure { margin: 0; overflow: hidden; border: 1px solid var(--line); background: #f7f9fc; }
.trajectory-gallery img { display: block; width: 100%; height: 290px; object-fit: cover; }
.trajectory-gallery figcaption, .chart-case figcaption { display: flex; justify-content: space-between; gap: 1rem; padding: .8rem; border-top: 1px solid var(--line); }
.trajectory-gallery figcaption strong, .chart-case figcaption strong { font-size: .82rem; }
.trajectory-gallery figcaption span, .chart-case figcaption span { color: var(--blue); font: 600 .66rem var(--mono); }
.trajectory-guard { margin: 1rem 0 0; padding: .8rem 1rem; border-left: 4px solid var(--orange); background: rgba(240,90,71,.05); color: var(--ink-soft); font-size: .76rem; line-height: 1.65; }
.chart-case { display: grid; grid-template-columns: 1.15fr .85fr; gap: 1.5rem; margin-top: 1rem; align-items: stretch; }
.chart-case figure { display: grid; grid-template-rows: 1fr auto; }
.chart-case figure img { display: block; width: 100%; height: 100%; min-height: 360px; object-fit: cover; object-position: 66% center; }
.chart-vocabulary { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; margin-top: 1rem; }
.chart-vocabulary div { padding: .65rem; border-left: 3px solid var(--cyan); background: #f7f9fc; }
.chart-vocabulary b, .chart-vocabulary small { display: block; }
.chart-vocabulary b { color: var(--blue); font: 600 .7rem var(--mono); }
.chart-vocabulary small { margin-top: .25rem; color: var(--ink-soft); font-size: .7rem; }
.chart-note { margin-top: 1rem !important; padding-top: .8rem; border-top: 1px dashed #aab5c3; font-size: .73rem !important; }
.flow-part .insight-questions { margin: 0 0 2rem; }
.flow-part .insight-steps { background: white; }
.flow-part .guardrail { margin: 1rem 0 0; background: white; }
.flow-part .responsibility-grid { margin-top: 1rem; }
.flow-part .reproducibility-strip { margin-top: 1rem; }
.flow-part .workshop-intro { margin: 2.5rem 0 1rem; }
.flow-deliverables { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; border: 1px solid var(--line); background: var(--line); }
.flow-deliverables article { display: grid; grid-template-columns: 54px 1fr; align-items: start; gap: 1rem; min-height: 180px; padding: 1.4rem; border: 0; background: white; }
.flow-deliverables .deliverable-number { font-size: 1.6rem; }
.week-nine-bridge { display: grid; grid-template-columns: 145px 1fr auto 1fr; gap: 1rem; align-items: center; margin-top: 2rem; padding: 1.4rem; border: 1px solid var(--blue); background: #eef5ff; }
.week-nine-bridge > span { color: var(--blue); font: 600 .72rem var(--mono); text-transform: uppercase; }
.week-nine-bridge > i { color: var(--orange); font-style: normal; }
.week-nine-bridge > p { grid-column: 2 / -1; margin: 0; color: var(--ink-soft); font: 500 .68rem var(--mono); }
.flow-output { display: grid; grid-template-columns: 170px 1fr; gap: .4rem 1rem; align-items: baseline; margin-top: 2rem; padding: 1.1rem 1.3rem; color: white; background: var(--ink); }
.flow-output span { color: #aeb7c2; font: 600 .68rem var(--mono); text-transform: uppercase; }
.flow-output strong { color: var(--cyan); font: 700 1.1rem var(--mono); }
.flow-output p { grid-column: 2; margin: 0; color: #d9dee6; font-size: .82rem; line-height: 1.65; }
.action-part[open] > summary { background: rgba(240,90,71,.07); border-bottom-color: var(--orange); }

@media (max-width: 960px) {
  .site-header { grid-template-columns: 1fr auto; }.site-nav { display: none; }
  .hero-content { grid-template-columns: 1fr; gap: 2rem; padding-top: 5rem; }
  .hero h1 { font-size: clamp(3.3rem, 12vw, 6rem); }
  .hero-route { overflow-x: auto; }
  .hero-syllabus summary { grid-template-columns: 140px 1fr auto 24px; }
  .syllabus-row { grid-template-columns: 160px 1fr; }
  .syllabus-row > span:last-child { grid-column: 2; }
  .syllabus-head span:last-child { display: none; }
  .section { grid-template-columns: 70px 1fr; }
  .overview-layout, .system-case, .agent-section, .insight-section, .week-nine { grid-template-columns: 1fr; }
  .outcome-grid { grid-template-columns: 1fr; }.outcome-card { min-height: auto; }.outcome-card.featured { transform: none; }
  .visual-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .visual-grid { grid-template-columns: 1fr 1fr; }
  .visual-grid .visual-large { grid-column: 1 / -1; grid-row: auto; }
  .visual-grid .visual-large img { height: 440px; }
  .case-map { min-height: 410px; }
  .detail-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .detail-pair { grid-template-columns: 1fr; }
  .agent-loop { width: min(76vw, 500px); }
  .responsibility-grid { grid-column: auto; }
  .reproducibility-strip { grid-template-columns: 1fr; }
  .deliverable-stack article { grid-template-columns: 60px 1fr; }.deliverable-stack article > :last-child { grid-column: 2; }
  .insight-steps { grid-template-columns: 1fr; gap: 0; }.insight-steps > span { margin: .3rem auto; transform: rotate(90deg); }
  .guardrail { grid-column: auto; }
  .week-nine-index { position: absolute; right: 5vw; top: 3rem; opacity: .12; }
  .flow-heading { grid-template-columns: 1fr; gap: 1.5rem; }
  .flow-controls { width: max-content; }
  .flow-map { grid-template-columns: repeat(3, 1fr); }
  .flow-map li:nth-child(3) { border-right: 0; }
  .flow-map li:nth-child(-n+3) { border-bottom: 1px solid var(--line); }
  .flow-map li:nth-child(3)::after { display: none; }
  .flow-part > summary { grid-template-columns: 64px minmax(0,1fr) 105px; }
  .flow-part-body { padding-left: 5.6rem; }
  .flow-part-body::before { left: 2.9rem; }
  .flow-detail-grid { grid-template-columns: 1fr; }
  .data-methods { grid-template-columns: 1fr; }
  .representation-heading { grid-template-columns: 1fr; gap: 1rem; }
  .chart-case { grid-template-columns: 1fr; }
  .chart-case figure img { min-height: 320px; max-height: 480px; }
  .flow-deliverables { grid-template-columns: 1fr; }
  .flow-deliverables article { min-height: auto; }
  .week-nine-bridge { grid-template-columns: 130px 1fr auto 1fr; }
}

@media (max-width: 640px) {
  .site-header { height: 64px; }.brand-copy, .print-button span { display: none; }.print-button { padding: .55rem .7rem; }
  .hero { min-height: 900px; padding-top: 98px; }.hero::before { inset: 64px 1rem 1rem; }.hero-kicker { margin: 0 .5rem; gap: 1rem; }
  .hero-content { min-height: 620px; padding-inline: .5rem; }.hero-summary > p { font-size: .95rem; }.hero-meta span { font-size: .58rem; }
  .hero-route { margin-inline: .5rem; }.scroll-cue { display: none; }
  .hero-syllabus { margin-inline: .5rem; }
  .hero-syllabus summary { grid-template-columns: 1fr 24px; gap: .7rem; min-height: 60px; }
  .syllabus-label, .syllabus-count { display: none; }
  .hero-syllabus summary strong { font-size: .88rem; }
  .syllabus-table { padding-inline: .8rem; }
  .syllabus-row { display: block; padding: 1rem 0; }
  .syllabus-head { display: none; }
  .syllabus-row > b, .syllabus-row > span:last-child { display: block; }
  .syllabus-row ul { display: block; margin: .65rem 0; }
  .syllabus-row li + li { margin-top: .35rem; }
  .section { display: block; }.section-label { display: flex; align-items: center; gap: .8rem; margin-bottom: 2rem; border: 0; }.section-label span { font-size: 1.4rem; }.section-label p { writing-mode: initial; }
  .section-main { padding: 0; }.section h2, .system-case h2, .agent-section h2, .insight-section h2, .week-nine h2, .closing h2 { font-size: 2.15rem; }
  .overview-layout { margin-top: 2.5rem; }.loop-card { box-shadow: 10px 10px 0 #c9c6b8; }.loop-visual { min-height: 300px; }
  .visual-grid { grid-template-columns: 1fr; }.visual-grid .visual-large { grid-column: auto; }.visual-grid img, .visual-grid .visual-large img { height: 250px; }.visual-grid figcaption { display: block; }.visual-grid figcaption span { display: block; margin-top: .3rem; }
  .system-case { gap: 2rem; }.case-map { min-height: 580px; }.case-map svg { display: none; }
  .framing-shift { grid-template-columns: 1fr; }.framing-shift > span { transform: rotate(90deg); text-align: center; }
  .system-node { width: 90px; height: 90px; }.rain { left: 0; top: 0; }.river { right: 0; left: auto; top: 80px; }.reservoir { left: 5%; top: 190px; }.intake { right: 2%; left: auto; top: 280px; }.people { left: 10%; right: auto; top: 380px; }
  .risk-node { font-size: .55rem; }.flood { left: 0; bottom: 0; }.drought { left: auto; right: 0; bottom: 85px; }.pollution { right: 0; bottom: 0; }
  .teaching-details { padding-block: 5rem; }.detail-heading h2 { font-size: 2.15rem; }.detail-block { padding: 1rem; }.detail-intro { gap: .8rem; }.detail-index { font-size: 1.5rem; }
  .source-groups { grid-template-columns: 1fr; }.ocr-flow { flex-wrap: wrap; }.ocr-flow span { flex: 1 0 38%; }.ocr-flow i { flex: 0 0 auto; }.grammar-levels div { grid-template-columns: 1fr; gap: .35rem; }.question-output { grid-template-columns: 1fr; }
  .timeline-heading { display: block; }.view-switch { width: max-content; margin-top: 1.5rem; }
  .timeline { margin-top: 3rem; }.timeline-item { grid-template-columns: 62px 24px 1fr; }.time strong { font-size: .65rem; }.time span { font-size: .48rem; }.timeline-marker::before { left: 12px; }.timeline-marker span { left: 6px; }.timeline-content { padding-left: .8rem; }.chapter-list div { grid-template-columns: 52px 1fr; }.chapter-list small { grid-column: 2; }
  .agent-section { gap: 3rem; }.agent-loop { width: 88vw; max-width: 390px; }.agent-loop > span { width: 72px; margin-left: -36px; transform: rotate(calc(var(--i) * 45deg)) translateX(clamp(116px, 35vw, 168px)) rotate(calc(var(--i) * -45deg)); font-size: .52rem; }
  .responsibility-grid { grid-template-columns: 1fr; }
  .reproducibility-strip { padding: 1rem; }
  .deliverable-stack article { grid-template-columns: 48px 1fr; gap: 1rem; }.deliverable-number { font-size: 1.8rem; }.mini-system { gap: .3rem; overflow-x: auto; }.mini-system i { padding: .5rem; font-size: .55rem; }
  .mini-table span { font-size: .45rem; padding: .65rem .2rem; }
  .guardrail { display: block; }.guardrail p { margin-top: .7rem; }
  .week-nine { min-height: 580px; }.next-route { gap: .4rem; }
  .course-flow > .section-main { max-width: none; }
  .flow-heading h2 { font-size: 2.15rem; }
  .flow-controls { width: 100%; }
  .flow-controls button { flex: 1; }
  .flow-map { display: flex; margin: 2.5rem 0 3rem; overflow-x: auto; }
  .flow-map li { flex: 0 0 130px; border-bottom: 0 !important; }
  .flow-map li:nth-child(3) { border-right: 1px solid var(--line); }
  .flow-map li:nth-child(3)::after { display: block; }
  .flow-part > summary { grid-template-columns: 44px minmax(0,1fr); gap: .9rem; min-height: 0; padding: 1.4rem .6rem; }
  .flow-part-number { align-self: start; font-size: 1.8rem; }
  .flow-summary-copy small { font-size: .58rem; }
  .flow-summary-copy h3 { font-size: 1.35rem; }
  .flow-summary-copy p { font-size: .83rem; }
  .flow-time { grid-column: 2; justify-self: stretch; display: flex; align-items: center; gap: .5rem; text-align: left; }
  .flow-time strong, .flow-time span { display: inline; }
  .flow-time i { width: 24px; height: 24px; margin: 0 0 0 auto; }
  .flow-time i::before, .flow-time i::after { left: 6px; right: 6px; top: 11px; }
  .flow-part-body { padding: 1.2rem .6rem 3rem; }
  .flow-part-body::before { display: none; }
  .flow-answer { grid-template-columns: 1fr; }
  .flow-chapters div { grid-template-columns: 62px 1fr; }
  .flow-chapters small { grid-column: 2; }
  .data-method-card { padding: 1rem; }
  .method-principles { grid-template-columns: 1fr; }
  .representation-lab { padding-top: 2rem; }
  .trajectory-copy ol, .trajectory-gallery, .chart-vocabulary { grid-template-columns: 1fr; }
  .trajectory-gallery img { height: 220px; }
  .chart-case { padding: 1rem; }
  .chart-case figure img { height: 260px; min-height: 230px; }
  .system-chain { grid-template-columns: repeat(9, auto); }
  .translation-path, .agent-path { justify-content: flex-start; }
  .flow-visual-grid .visual-large img, .flow-visual-grid > figure:not(.visual-large) img { height: 230px; }
  .flow-output { grid-template-columns: 1fr; }
  .flow-output p { grid-column: 1; }
  .week-nine-bridge { grid-template-columns: 1fr; }
  .week-nine-bridge > p { grid-column: 1; }
  .week-nine-bridge > i { transform: rotate(90deg); }
  footer { display: block; line-height: 2; }
}

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

@media print {
  @page { margin: 14mm; }
  body { background: white; font-size: 10pt; }
  .site-header, .scroll-cue, .view-switch, .hero-grid, .hero-orbit { display: none !important; }
  .hero { min-height: auto; padding: 25mm 15mm; color: var(--ink) !important; background: white !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .hero::before { display: none; }.hero-content { min-height: auto; padding: 10mm 0; }.hero h1 { font-size: 48pt; }
  .hero-route { margin: 5mm 0 0; }.hero-syllabus { margin: 4mm 0 0; }.hero-syllabus > .syllabus-table { display: block !important; }.section, .system-case, .teaching-details, .agent-section, .insight-section, .week-nine { padding: 15mm 8mm; break-inside: avoid; }
  .chapter-list { display: block !important; }.timeline-content { padding-bottom: 8mm; }
  .flow-controls { display: none !important; }
  .flow-part:not([open]) > :not(summary) { display: block !important; }
  .flow-part-body { padding: 8mm 0; background: white; }
  .flow-part-body::before { display: none; }
  .agent-loop { animation: none; }.closing { padding: 20mm 8mm; }
}