:root {
  --ink: #17263d;
  --ink-2: #34445a;
  --paper: #fbfaf6;
  --white: #ffffff;
  --mist: #edf1f4;
  --line: #d5dce4;
  --coral: #ed6f55;
  --coral-pale: #fff0ea;
  --coral-dark: #963523;
  --teal: #117f7a;
  --teal-pale: #e5f6f3;
  --teal-dark: #075e5a;
  --gold: #f5c45b;
  --purple: #7656a8;
  --blue: #3e70b6;
  --shadow: 0 18px 46px rgba(18, 38, 61, .11);
  --radius: 22px;
  --max: 1180px;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 82px; }
body { margin: 0; background: var(--paper); color: var(--ink); line-height: 1.58; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-underline-offset: 3px; }
img, svg, canvas { max-width: 100%; }
p, ul, ol { margin-top: 0; }
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.1; letter-spacing: -.025em; }
h1 { max-width: 920px; font-size: clamp(2.8rem, 6vw, 5.7rem); }
h2 { font-size: clamp(2.25rem, 4.5vw, 4.5rem); }
h3 { font-size: clamp(1.45rem, 2.4vw, 2.15rem); }
h4 { font-size: 1.16rem; }
fieldset { min-width: 0; }

.shell { width: min(calc(100% - 40px), var(--max)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 200; left: 14px; top: 12px; min-height: 48px; padding: 11px 16px; transform: translateY(-150%); border-radius: 9px; background: var(--white); color: var(--ink); font-weight: 850; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.eyebrow, .kicker, .step-label { margin: 0 0 10px; color: var(--coral-dark); font-size: .76rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: var(--gold); }
.eyebrow--ink { color: var(--coral-dark); }
.lead { color: var(--ink-2); font-size: 1.08rem; }
.plain-list { padding-left: 20px; }
.plain-list li { margin-bottom: 7px; }

.button, .complete-button, .map-stage-controls button, .measure-controls button, .builder-controls button, .path-network-picker button, .path-starts button, .attack-controls button, .colour-limit button, .palette button, .bridge-question .choice-row button {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 10px 17px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: var(--white);
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
}
.button { transition: transform .18s ease, box-shadow .18s ease, background .18s ease; }
.button:hover { transform: translateY(-2px); }
.button--light { background: var(--white); }
.button--ghost-light { border-color: rgba(255,255,255,.5); background: transparent; color: var(--white); }
.button--dark { background: var(--ink); color: var(--white); }
.button--outline { border-color: var(--ink); background: transparent; }
.text-button { min-height: 48px; padding: 8px 3px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--ink); font-weight: 800; cursor: pointer; }
.text-button--light { color: var(--white); }

.hero { position: relative; min-height: 680px; overflow: hidden; display: grid; align-items: center; background: var(--ink); color: var(--white); }
.hero::after { content: ""; position: absolute; right: -8%; bottom: -185px; width: 68%; height: 330px; border-radius: 50% 50% 0 0; transform: rotate(-5deg); background: var(--coral); }
.hero__inner { position: relative; z-index: 2; padding-block: 88px 122px; }
.hero__pattern { position: absolute; z-index: 1; top: 35px; right: -35px; width: min(58vw, 760px); color: rgba(255,255,255,.12); }
.hero__lede { max-width: 780px; color: #dfe7f0; font-size: clamp(1.08rem, 1.8vw, 1.36rem); }
.hero__facts, .hero__actions { display: flex; flex-wrap: wrap; gap: 11px; }
.hero__facts { margin: 34px 0; }
.hero__facts span { display: inline-flex; align-items: baseline; gap: 7px; padding: 10px 14px; border: 1px solid rgba(255,255,255,.24); border-radius: 999px; background: rgba(255,255,255,.06); }
.hero__facts strong { color: var(--gold); font-size: 1.2rem; }
.save-note { min-height: 26px; margin: 19px 0 0; color: #cfdbe7; font-size: .88rem; }

.section-nav { position: sticky; z-index: 100; top: 0; border-bottom: 1px solid var(--line); background: rgba(251,250,246,.95); backdrop-filter: blur(14px); }
.section-nav__inner { display: flex; }
.section-tab { flex: 1 1 0; min-width: 0; min-height: 66px; padding: 9px 18px; border: 0; border-bottom: 4px solid transparent; background: transparent; color: var(--ink-2); font-weight: 850; cursor: pointer; }
.section-tab.is-active { border-color: var(--coral); color: var(--ink); }
.view[hidden] { display: none; }
.page-section { padding-block: clamp(58px, 7vw, 96px); }
.section-heading { margin-bottom: 38px; }
.section-heading--wide { max-width: 920px; }
.section-heading > p:last-child { max-width: 800px; color: var(--ink-2); font-size: 1.13rem; }

.workshop-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.workshop-choice { overflow: hidden; padding: 30px; border: 1px solid var(--line); border-radius: 26px; background: var(--white); box-shadow: 0 8px 26px rgba(23,38,61,.06); }
.workshop-choice__art { height: 180px; margin: -30px -30px 26px; display: grid; place-items: center; }
.workshop-choice__art svg { width: 84%; height: 88%; }
.workshop-choice__art path, .workshop-choice__art circle { fill: none; stroke: var(--ink); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
.workshop-choice--coral .workshop-choice__art { background: var(--coral-pale); }
.workshop-choice--teal .workshop-choice__art { background: var(--teal-pale); }
.workshop-choice--teal .workshop-choice__art circle { fill: var(--teal); stroke: var(--white); }
.mini-progress { height: 10px; overflow: hidden; margin-top: 24px; border-radius: 999px; background: var(--mist); }
.mini-progress span { display: block; width: 0; height: 100%; background: var(--coral); transition: width .25s ease; }
.mini-progress--teal span { background: var(--teal); }
.progress-label { margin: 7px 0 17px; color: var(--ink-2); font-size: .85rem; }
.how-to { margin: 78px 0; display: grid; grid-template-columns: .7fr 1.3fr; gap: 42px; align-items: start; }
.rhythm-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rhythm-list li { min-height: 160px; padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.rhythm-list li > span { float: right; color: var(--coral); font-size: 1.5rem; font-weight: 900; }
.rhythm-list strong { display: block; margin: 34px 0 6px; font-size: 1.18rem; }
.rhythm-list p { margin: 0; color: var(--ink-2); }
.materials { margin-top: 70px; }
.materials-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.materials-grid article { padding: 22px; border: 1px solid var(--line); border-radius: 17px; background: var(--white); }
.materials-grid article > span { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: var(--coral-pale); color: var(--coral-dark); font-size: 1.35rem; }
.materials-grid h4 { margin-top: 20px; }
.materials-grid p { margin-bottom: 0; color: var(--ink-2); }
.reset-panel { margin-top: 65px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px; border-radius: 18px; background: var(--mist); }
.reset-panel p { margin-bottom: 0; }

.workshop-banner--coral { background: var(--coral); }
.workshop-banner--teal { background: #82d3c7; }
.workshop-banner__inner { min-height: 340px; padding-block: 62px; display: flex; align-items: end; justify-content: space-between; gap: 55px; }
.workshop-banner .eyebrow { color: var(--ink); }
.workshop-banner__inner > div:first-child { max-width: 790px; }
.workshop-banner__inner > div:first-child p:last-child { max-width: 730px; font-size: 1.12rem; }
.workshop-banner__meta { flex: 0 0 175px; display: grid; gap: 8px; }
.workshop-banner__meta span { padding: 9px 13px; border: 1px solid rgba(23,38,61,.35); border-radius: 999px; background: rgba(255,255,255,.3); white-space: nowrap; }
.workshop-banner__meta strong { margin-right: 5px; }
.course-progress { position: sticky; z-index: 80; top: 66px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.95); backdrop-filter: blur(12px); }
.course-progress__inner { min-height: 76px; display: grid; grid-template-columns: auto minmax(180px, 390px); align-items: center; justify-content: space-between; gap: 30px; }
.course-progress__inner > div:first-child { display: grid; }
.course-progress__inner span { color: var(--ink-2); font-size: .82rem; }
.course-progress__track { height: 11px; overflow: hidden; border-radius: 999px; background: var(--mist); }
.course-progress__track span { display: block; width: 0; height: 100%; background: var(--coral); transition: width .25s ease; }
.course-progress--teal .course-progress__track span { background: var(--teal); }
.course-page { display: grid; gap: 28px; }
.learning-goals { display: grid; grid-template-columns: .65fr 1.35fr; gap: 34px; align-items: start; padding: 28px; border: 1px solid var(--line); border-radius: 20px; background: var(--white); }
.goal-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.goal-list li { position: relative; padding-left: 30px; }
.goal-list li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 21px; height: 21px; display: grid; place-items: center; border-radius: 50%; background: var(--teal-pale); color: var(--teal-dark); font-weight: 900; }
.course-map { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.course-map button { min-height: 74px; padding: 9px; border: 1px solid var(--line); border-radius: 13px; background: var(--white); cursor: pointer; font-size: .82rem; font-weight: 800; }
.course-map button span { width: 27px; height: 27px; margin: 0 auto 5px; display: grid; place-items: center; border-radius: 50%; background: var(--coral-pale); color: var(--coral-dark); }
.course-map button.is-complete { border-color: var(--teal); background: var(--teal-pale); }
.course-map button.is-complete span { background: var(--teal); color: var(--white); }
.course-map--teal { grid-template-columns: repeat(5, 1fr); }
.course-map--teal button span { background: var(--teal-pale); color: var(--teal-dark); }
.booklet-bar { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 24px 26px; border-radius: 18px; background: var(--coral-pale); }
.booklet-bar--teal { background: var(--teal-pale); }
.booklet-bar > div { display: flex; align-items: center; gap: 10px; }
.booklet-bar > div:first-child { display: grid; }
.booklet-bar span { color: var(--ink-2); }

.lesson-step { margin-top: 30px; overflow: hidden; border: 1px solid var(--line); border-top: 6px solid var(--coral); border-radius: 24px; background: var(--white); box-shadow: 0 14px 38px rgba(23,38,61,.07); }
.lesson-step--teal { border-top-color: var(--teal); }
.lesson-step > :not(.lesson-step__header) { margin-inline: 30px; }
.lesson-step > .step-finish, .lesson-step > .completion-card { margin-inline: 0; }
.lesson-step__header { min-height: 118px; padding: 26px 30px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); background: linear-gradient(100deg, var(--coral-pale), var(--white) 70%); }
.lesson-step--teal .lesson-step__header { background: linear-gradient(100deg, var(--teal-pale), var(--white) 70%); }
.lesson-step__header h3 { margin-bottom: 0; }
.step-state { flex: 0 0 auto; padding: 7px 11px; border-radius: 999px; background: var(--mist); color: var(--ink-2); font-size: .8rem; font-weight: 850; }
.step-state.is-complete { background: var(--teal); color: var(--white); }
.lesson-step > .lead { margin-top: 28px; max-width: 900px; }
.lesson-grid { margin-block: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.lesson-grid--story > div:first-child { padding: 25px; border-radius: 18px; background: var(--coral-pale); }
.booklet-prompt { margin-block: 24px; padding: 16px 18px; border-left: 4px solid var(--purple); border-radius: 8px; background: #f3ebfb; }
.step-finish { margin-top: 28px; padding: 22px 30px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-top: 1px solid var(--line); background: #f8fafb; }
.step-finish p { margin: 0; color: var(--ink-2); }
.complete-button { flex: 0 0 auto; border-color: var(--ink); background: var(--white); }
.complete-button[aria-pressed="true"] { border-color: var(--teal); background: var(--teal); color: var(--white); }
.break-card { margin: 12px 0; padding: 24px 30px; display: flex; align-items: center; gap: 18px; border-radius: 18px; background: #fff5ce; }
.break-card > span { width: 54px; height: 54px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--gold); font-size: 1.45rem; }
.break-card p { margin: 2px 0 0; }
.break-card--teal { background: var(--teal-pale); }

.quick-check { margin: 0; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: #fff9e8; }
.quick-check legend { padding: 0 7px; font-size: 1.1rem; font-weight: 900; }
.quick-check--inline { margin-block: 28px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.choice-row label, .choice-stack label { position: relative; cursor: pointer; }
.choice-row input, .choice-stack input { position: absolute; opacity: 0; pointer-events: none; }
.choice-row label span, .choice-stack label span { min-height: 48px; display: flex; align-items: center; padding: 10px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.choice-row input:checked + span, .choice-stack input:checked + span { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); font-weight: 800; }
.choice-row input:focus-visible + span, .choice-stack input:focus-visible + span { outline: 3px solid var(--gold); outline-offset: 3px; }
.choice-stack { display: grid; gap: 8px; margin: 16px 0; }
.feedback { min-height: 27px; margin: 12px 0 0; font-weight: 800; }
.feedback.is-correct { color: var(--teal-dark); }
.feedback.is-hint { color: var(--coral-dark); }
.activity-panel { margin-block: 28px; padding: 25px; border-radius: 22px; }
.activity-panel--coral { background: var(--coral-pale); }
.shape-stage { min-height: 280px; display: grid; grid-template-columns: minmax(190px, .75fr) 1.25fr; align-items: center; gap: 25px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); padding: 22px; }
.shape-stage svg { width: 100%; max-height: 230px; }
#shape-polygon { fill: rgba(237,111,85,.17); stroke: var(--coral); stroke-width: 5; stroke-linejoin: round; transition: all .25s ease; }
.shape-stage__label { margin-bottom: 4px; font-size: 1.7rem; font-weight: 900; }
.classification { display: inline-block; padding: 6px 10px; border-radius: 7px; background: var(--mist); font-size: .8rem; font-weight: 850; }
.shape-picker { margin-top: 9px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.shape-choice { min-height: 52px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); cursor: pointer; }
.shape-choice.is-active { border-color: var(--coral); background: var(--coral-pale); box-shadow: inset 0 0 0 1px var(--coral); font-weight: 850; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.teaching-pair { margin-block: 26px; align-items: stretch; }
.word-help, .builder-help { padding: 22px; border-radius: 16px; background: var(--teal-pale); }
.word-help p:last-child, .builder-help ol:last-child { margin-bottom: 0; }

.solid-explorer { margin-block: 28px; overflow: hidden; border: 1px solid #c8d0da; border-radius: 24px; background: #101c2e; color: var(--white); box-shadow: 0 24px 60px rgba(16,28,46,.22); }
.solid-picker { display: flex; gap: 7px; padding: 12px; overflow-x: auto; border-bottom: 1px solid rgba(255,255,255,.13); scrollbar-width: thin; }
.solid-choice { min-height: 48px; flex: 0 0 auto; padding: 8px 13px; border: 1px solid rgba(255,255,255,.23); border-radius: 999px; background: rgba(255,255,255,.06); color: #e2ebf3; cursor: pointer; font-size: .82rem; font-weight: 800; }
.solid-choice.is-active { border-color: var(--gold); background: var(--gold); color: var(--ink); }
.solid-stage { position: relative; height: clamp(390px, 44vw, 510px); background: radial-gradient(circle at 50% 38%, #2d4561 0, #172840 48%, #0d1929 100%); }
#solid-canvas { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#solid-canvas:active { cursor: grabbing; }
.solid-stage__hint { position: absolute; bottom: 14px; left: 50%; width: max-content; max-width: calc(100% - 24px); padding: 6px 10px; transform: translateX(-50%); border-radius: 99px; background: rgba(6,13,23,.68); color: #dce7f2; font-size: .76rem; pointer-events: none; }
.solid-controls, .solid-tools { min-height: 70px; padding: 10px 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 7px; border-top: 1px solid rgba(255,255,255,.12); }
.solid-controls button, .solid-tools button { min-width: 48px; min-height: 48px; padding: 8px 12px; border: 1px solid rgba(255,255,255,.24); border-radius: 10px; background: rgba(255,255,255,.07); color: var(--white); cursor: pointer; font-weight: 850; }
.solid-controls button:hover, .solid-tools button:hover { background: rgba(255,255,255,.16); }
.solid-controls .solid-reset { width: auto; }
.solid-controls__divider { width: 1px; height: 31px; margin: 0 4px; background: rgba(255,255,255,.2); }
.solid-zoom { width: 50px; color: #dce7f2; font-size: .78rem; text-align: center; }
.solid-tools { min-height: 62px; background: rgba(255,255,255,.03); }
.solid-tools > span { margin-right: 5px; color: #cdd9e5; font-size: .82rem; }
.solid-tools button[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.solid-readout { min-height: 68px; padding: 14px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.solid-readout span { color: #cdd9e5; font-size: .86rem; text-align: right; }
.net-lab { margin-block: 30px; padding: 25px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 25px; align-items: center; border: 1px solid var(--line); border-radius: 20px; background: var(--mist); }
.net-visual { position: relative; min-height: 300px; display: grid; place-items: center; border-radius: 16px; background: var(--white); }
.net-visual svg { position: absolute; width: 96%; height: 96%; transition: opacity .35s ease, transform .35s ease; }
.net-flat { opacity: 1; transform: scale(1); }
.net-folded { opacity: 0; transform: scale(.82); }
.net-visual[data-folded="true"] .net-flat { opacity: 0; transform: scale(.82); }
.net-visual[data-folded="true"] .net-folded { opacity: 1; transform: scale(1); }
.net-squares rect { fill: #ffe3db; stroke: var(--coral); stroke-width: 4; }
.net-labels text, .net-folded text { fill: var(--ink); font-size: 23px; font-weight: 900; text-anchor: middle; }
.net-folded polygon { fill: #f58972; stroke: var(--ink); stroke-width: 3; }
.net-folded polygon:nth-child(2) { fill: #d85840; }
.net-folded polygon:nth-child(3) { fill: #a73d2c; }

.measure-intro { margin-block: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.measure-intro > div { padding: 20px; border-radius: 15px; background: var(--coral-pale); }
.measure-intro strong { font-size: 1.2rem; }
.measure-intro p { margin: 4px 0 0; }
.measure-lab { margin-block: 28px; padding: 25px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 28px; border-radius: 22px; background: var(--ink); color: var(--white); }
.measure-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.measure-controls button { border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.08); color: var(--white); }
.measure-grid { width: max-content; max-width: 100%; display: grid; grid-template-columns: repeat(6, 50px); gap: 4px; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.09); }
.measure-cell { width: 50px; height: 50px; padding: 0; border: 1px solid rgba(255,255,255,.42); border-radius: 5px; background: rgba(255,255,255,.07); cursor: pointer; }
.measure-cell.is-filled { border-color: #ffe8ac; background: var(--gold); }
.measure-results { display: grid; align-content: center; gap: 12px; }
.measure-results .kicker { color: var(--gold); }
.measure-results > div { padding: 14px; display: grid; grid-template-columns: 1fr auto; align-items: baseline; border-radius: 12px; background: rgba(255,255,255,.08); }
.measure-results strong { font-size: 2rem; color: var(--gold); }
.measure-results small { grid-column: 1 / -1; color: #cdd9e5; }
.measure-results > p:last-child { color: #dce5ef; }
.challenge-note, .safety-note { margin-block: 24px; padding: 17px 19px; border-left: 4px solid var(--gold); border-radius: 9px; background: #fff7d9; }
.short-response { margin-block: 20px; display: grid; gap: 7px; font-weight: 850; }
.short-response textarea, .design-form input, .design-form select, .mystery-form input, .mystery-form select, .mystery-form textarea { width: 100%; min-height: 48px; padding: 11px 12px; border: 1px solid #aeb8c5; border-radius: 9px; background: var(--white); color: var(--ink); font-weight: 500; resize: vertical; }
.answer-reveal { margin-block: 24px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.answer-reveal summary { min-height: 54px; padding: 14px 17px; display: flex; align-items: center; background: var(--teal-pale); cursor: pointer; font-weight: 850; }
.answer-reveal > p { padding: 17px; margin: 0; }

.figure-spotlight { margin-block: 28px; padding: 24px; display: grid; grid-template-columns: 72px 1fr; gap: 20px; align-items: start; border: 1px solid var(--line); border-radius: 19px; background: linear-gradient(135deg, #fff7d9, #fff 72%); }
.figure-spotlight__mark { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--gold); font-size: 1.3rem; font-weight: 950; }
.source-note { margin-bottom: 0; color: var(--ink-2); font-size: .8rem; }
.design-form, .build-dashboard { margin-block: 28px; display: grid; grid-template-columns: .8fr 1.2fr; gap: 24px; align-items: start; }
.criterion-list { padding: 0; list-style: none; }
.criterion-list li { position: relative; padding: 0 0 12px 29px; }
.criterion-list li::before { content: "◇"; position: absolute; left: 0; color: var(--coral-dark); font-weight: 900; }
.form-card { padding: 23px; display: grid; gap: 14px; border-radius: 18px; background: var(--coral-pale); }
.form-card label, .mystery-form label { display: grid; gap: 6px; font-weight: 850; }
.safety-note { border-left-color: var(--coral); background: var(--coral-pale); }
.build-steps { padding: 0; list-style: none; }
.build-steps li { min-height: 50px; display: flex; align-items: center; gap: 12px; }
.build-steps span { width: 36px; height: 36px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--coral-pale); font-weight: 900; }
.criteria-card { padding: 23px; display: grid; gap: 9px; border-radius: 19px; background: var(--ink); color: var(--white); box-shadow: var(--shadow); }
.criteria-card .kicker { color: var(--gold); }
.criteria-card label { min-height: 48px; padding: 10px; display: flex; align-items: flex-start; gap: 11px; border-radius: 9px; background: rgba(255,255,255,.07); }
.criteria-card input { width: 24px; height: 24px; flex: 0 0 auto; accent-color: var(--gold); }
.criteria-card .text-button { justify-self: start; color: var(--white); }
.criteria-meter { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
.criteria-meter span { display: block; width: 0; height: 100%; background: var(--gold); transition: width .25s ease; }
.criteria-status { margin: 0; color: #dce5ef; font-size: .86rem; }
.response-pair { margin-top: 22px; }
.self-check-grid { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.self-check-grid li { margin-bottom: 8px; }
.completion-card { margin-top: 30px; padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 26px; background: var(--coral-pale); }
.completion-card--teal { background: var(--teal-pale); }
.completion-card p:last-child { margin-bottom: 0; }
.complete-button--final { border-color: var(--ink); background: var(--ink); color: var(--white); }

.map-story, .bridges-lab { margin-block: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--white); }
.map-stage-controls { padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.map-stage-controls button { border-color: var(--line); }
.map-stage-controls button.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); }
#map-story-svg, #bridges-svg { width: 100%; height: auto; display: block; }
.map-layer, .bridge-layer { opacity: 0; pointer-events: none; transition: opacity .35s ease; }
.map-layer.is-active, .bridge-layer.is-active { opacity: 1; pointer-events: auto; }
.town-place rect, .town-place circle, .town-place path { fill: #fff5d1; stroke: var(--ink); stroke-width: 3; }
.town-place text, .simple-place text { fill: var(--ink); font-size: 17px; font-weight: 850; text-anchor: middle; }
.simple-road line, .network-lines line { stroke: #8b98a9; stroke-width: 11; stroke-linecap: round; }
.simple-place rect { fill: var(--white); stroke: var(--teal); stroke-width: 4; rx: 12; }
.network-nodes circle { fill: var(--ink); stroke: var(--white); stroke-width: 4; }
.network-nodes text { fill: var(--white); font-size: 21px; font-weight: 900; text-anchor: middle; }
.network-lines line { stroke: var(--teal); }

.network-builder, .path-lab, .attack-lab, .colour-lab { margin-block: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 21px; background: var(--white); box-shadow: var(--shadow); }
.builder-controls, .attack-controls { padding: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; border-bottom: 1px solid var(--line); }
.builder-controls button, .attack-controls button { border-color: var(--line); }
.builder-controls button.is-active, .attack-controls button.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); }
#builder-svg, #attack-svg { width: 100%; min-height: 330px; display: block; background: radial-gradient(circle at center, #f8fbfa, #edf5f3); touch-action: none; }
.builder-edge, .attack-edge-visible { stroke: #8190a3; stroke-width: 8; stroke-linecap: round; }
.builder-node circle, .attack-node circle { fill: var(--ink); stroke: var(--white); stroke-width: 4; filter: drop-shadow(0 5px 7px rgba(23,38,61,.18)); }
.builder-node text, .attack-node text { fill: var(--white); font-size: 22px; font-weight: 900; text-anchor: middle; pointer-events: none; }
.builder-node { cursor: grab; }
.builder-node:active { cursor: grabbing; }
.builder-summary { padding: 16px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-top: 1px solid var(--line); }
.builder-summary p { margin: 0; font-weight: 800; text-align: right; }
.degree-list { display: flex; flex-wrap: wrap; gap: 6px; }
.degree-list span { padding: 6px 9px; border-radius: 7px; background: var(--teal-pale); font-weight: 850; }

.path-network-picker { padding: 12px; display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--line); }
.path-network-picker button { border-color: var(--line); }
.path-network-picker button.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); }
.path-workspace { padding: 20px; display: grid; justify-items: center; }
.path-starts { width: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.path-starts > div { display: flex; flex-wrap: wrap; gap: 7px; }
.path-starts button { min-width: 48px; border-color: var(--line); }
.path-starts button.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); }
.path-starts > button:last-child { margin-left: auto; }
.path-svg { width: min(100%, 520px); min-height: 300px; margin: 10px auto; }
.path-edge-visible { stroke: #98a5b5; stroke-width: 10; stroke-linecap: round; pointer-events: none; }
.path-edge-visible.is-used { stroke: var(--teal); }
.path-edge-hit, .attack-edge-hit { stroke: transparent; stroke-width: 44; stroke-linecap: round; vector-effect: non-scaling-stroke; cursor: pointer; }
.path-edge-hit:focus, .attack-edge-hit:focus { stroke: rgba(245,196,91,.42); outline: none; }
.builder-node .node-hit, .attack-node .node-hit { fill: transparent; stroke: none; }
.path-node circle { fill: var(--ink); stroke: var(--white); stroke-width: 4; }
.path-node text { fill: var(--white); font-size: 20px; font-weight: 900; text-anchor: middle; pointer-events: none; }
.path-node.is-current circle { fill: var(--coral); }
.path-status { min-height: 29px; margin: 0 0 13px; font-weight: 850; text-align: center; }
.degree-clue { width: 100%; margin-top: 14px; padding: 14px; border-radius: 10px; background: var(--teal-pale); text-align: center; font-weight: 800; }
.rule-cards { margin-block: 25px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.rule-cards article { padding: 20px; border: 1px solid var(--line); border-radius: 15px; background: var(--white); }
.rule-cards strong { color: var(--teal-dark); font-size: 1.12rem; }
.rule-cards p { margin: 6px 0 0; }

.drawn-bridges line { stroke: #9b6a36; stroke-width: 14; stroke-linecap: round; }
.bridge-layer text { fill: var(--ink); font-size: 18px; font-weight: 850; text-anchor: middle; }
.bridge-layer .network-nodes text { fill: var(--white); font-size: 21px; font-weight: 900; }
.bridge-layer[data-bridge-layer="land"] path, .bridge-layer[data-bridge-layer="land"] ellipse { fill: #e5f1cf; stroke: var(--teal); stroke-width: 3; }
.bridge-graph-lines path, .bridge-graph-lines line { fill: none; stroke: var(--teal); stroke-width: 8; stroke-linecap: round; }
.bridge-question { padding: 20px; border-top: 1px solid var(--line); }
.bridge-question .choice-row button { border-color: var(--line); }
.bridge-question .choice-row button.is-selected { border-color: var(--teal); background: var(--teal-pale); }
.bridge-question #bridge-degree-readout { margin: 15px 0 0; padding: 14px; border-radius: 10px; background: var(--teal-pale); }

.attack-edge-visible.is-removed { opacity: .12; stroke-dasharray: 10 10; }
.attack-edge-visible.is-repair { stroke: var(--gold); stroke-width: 10; }
.attack-node.is-removed { opacity: .18; }
.attack-node.is-group-a circle { fill: var(--blue); }
.attack-node.is-group-b circle { fill: var(--purple); }
.attack-status-split { color: var(--coral-dark); }
#attack-status { min-height: 56px; margin: 0; padding: 16px 20px; border-top: 1px solid var(--line); font-weight: 850; }
.pairing-idea { margin-block: 26px; padding: 24px; display: grid; grid-template-columns: .7fr 1.3fr; gap: 25px; align-items: center; border-radius: 19px; background: var(--teal-pale); }
.pairing-picture { border-radius: 15px; background: var(--white); }
.pairing-picture circle { fill: var(--ink); }
.pairing-picture line { stroke: var(--teal); stroke-width: 9; stroke-linecap: round; }
.pairing-picture path { fill: none; stroke: var(--coral); stroke-width: 5; stroke-linecap: round; }

.colour-tools { padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.colour-limit, .palette { display: flex; flex-wrap: wrap; gap: 7px; }
.colour-limit button, .palette button { border-color: var(--line); }
.colour-limit button.is-active { border-color: var(--teal); background: var(--teal); color: var(--white); }
.palette button { min-width: 74px; }
.palette button.is-active { box-shadow: inset 0 0 0 3px var(--ink); }
.palette button:disabled { opacity: .45; cursor: not-allowed; }
.swatch--coral { background: #ef816b !important; }
.swatch--teal { background: #62c7bd !important; }
.swatch--gold { background: #f5c45b !important; }
.swatch--purple { background: #9b7ac6 !important; color: #101b2c !important; }
.colour-stage { padding: 22px; display: grid; grid-template-columns: 1.2fr .8fr; gap: 24px; align-items: center; }
#colour-map { width: 100%; min-height: 420px; border-radius: 17px; background: #f6faf9; }
.map-region { stroke: var(--white); stroke-width: 7; cursor: pointer; transition: filter .18s ease; }
.map-region:hover, .map-region:focus { filter: brightness(.94); outline: none; }
.map-region.has-conflict { stroke: var(--coral-dark); stroke-width: 11; stroke-dasharray: 12 8; }
.map-region-label { fill: var(--ink); font-size: 25px; font-weight: 950; text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(255,255,255,.82); stroke-width: 5; }
.colour-instructions ol { padding-left: 22px; }
.colour-instructions li { margin-bottom: 8px; }
.colour-instructions .button { margin: 5px 5px 5px 0; }
#colour-status { min-height: 52px; margin-top: 14px; font-weight: 850; }

.mystery-maker { margin-block: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.mystery-form { padding: 23px; display: grid; gap: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--white); }
.mystery-preview { align-self: start; padding: 27px; border: 5px solid var(--teal); border-radius: 22px; background: var(--teal-pale); box-shadow: var(--shadow); }
.mystery-preview h4 { font-size: 1.55rem; }
.mystery-preview > div { margin-top: 17px; padding-top: 15px; border-top: 1px solid rgba(17,127,122,.28); }
.mystery-preview p { white-space: pre-wrap; }
.preview-type { display: inline-block; padding: 5px 9px; border-radius: 999px; background: var(--teal); color: var(--white); font-size: .78rem; font-weight: 850; }
.preview-answer { border-radius: 11px; background: rgba(255,255,255,.65); padding: 14px !important; }

.footer { margin-top: 30px; background: var(--ink); color: var(--white); }
.footer__inner { min-height: 190px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.footer p { margin-bottom: 3px; color: #dce5ef; }
.footer__actions { display: flex; flex-wrap: wrap; gap: 14px; }

@media (max-width: 980px) {
  .materials-grid { grid-template-columns: 1fr 1fr; }
  .how-to, .learning-goals, .net-lab, .design-form, .build-dashboard, .pairing-idea { grid-template-columns: 1fr; }
  .course-map { grid-template-columns: repeat(4, 1fr); }
  .course-map--teal { grid-template-columns: repeat(5, 1fr); }
  .measure-lab, .colour-stage { grid-template-columns: 1fr; }
  .measure-results { grid-template-columns: 1fr 1fr; }
  .measure-results .kicker, .measure-results > p:last-child { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .shell { width: min(calc(100% - 26px), var(--max)); }
  html { scroll-padding-top: 126px; }
  .hero { min-height: 650px; }
  .hero__inner { padding-block: 70px 105px; }
  .hero__pattern { width: 98vw; right: -150px; opacity: .72; }
  .section-tab { min-height: 62px; padding: 8px 5px; font-size: .78rem; line-height: 1.15; }
  .course-progress { top: 62px; }
  .course-progress__inner { min-height: 65px; grid-template-columns: 1fr 115px; gap: 13px; }
  .course-progress__inner span { display: none; }
  .workshop-choice-grid, .rhythm-list, .two-col, .self-check-grid, .mystery-maker { grid-template-columns: 1fr; }
  .workshop-choice { padding: 24px; }
  .workshop-choice__art { margin: -24px -24px 22px; }
  .materials-grid { grid-template-columns: 1fr; }
  .reset-panel, .booklet-bar, .step-finish, .completion-card, .footer__inner { align-items: flex-start; flex-direction: column; }
  .workshop-banner__inner { min-height: 360px; padding-block: 50px; align-items: flex-start; flex-direction: column; gap: 20px; }
  .workshop-banner__meta { flex: none; display: flex; flex-wrap: wrap; }
  .learning-goals, .lesson-step__header { padding: 22px; }
  .goal-list { grid-template-columns: 1fr; }
  .course-map, .course-map--teal { grid-template-columns: repeat(2, 1fr); }
  .booklet-bar > div { width: 100%; flex-direction: column; align-items: stretch; }
  .lesson-step > :not(.lesson-step__header) { margin-inline: 18px; }
  .lesson-step > .step-finish, .lesson-step > .completion-card { margin-inline: 0; }
  .lesson-step__header { min-height: 108px; align-items: flex-start; }
  .step-state { margin-top: 2px; }
  .step-finish, .completion-card { padding: 20px 18px; }
  .complete-button { width: 100%; }
  .shape-stage { grid-template-columns: 1fr; }
  .shape-stage svg { max-height: 190px; }
  .shape-picker { grid-template-columns: 1fr 1fr; }
  .solid-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
  .solid-choice { width: 100%; }
  .solid-stage { height: 410px; }
  .solid-readout { align-items: flex-start; flex-direction: column; gap: 4px; }
  .solid-readout span { text-align: left; }
  .solid-controls__divider { display: none; }
  .net-visual { min-height: 260px; }
  .measure-intro { grid-template-columns: 1fr; }
  .measure-lab { padding: 16px; }
  .measure-grid { grid-template-columns: repeat(6, minmax(44px, 1fr)); width: 100%; gap: 3px; }
  .measure-cell { width: 100%; min-width: 44px; height: auto; aspect-ratio: 1; }
  .measure-results { grid-template-columns: 1fr 1fr; }
  .figure-spotlight { grid-template-columns: 1fr; }
  .builder-summary { align-items: flex-start; flex-direction: column; }
  .builder-summary p { text-align: left; }
  #builder-svg, #attack-svg { min-height: 260px; }
  .path-workspace { padding: 14px; }
  .path-starts > button:last-child { margin-left: 0; }
  .path-svg { min-height: 260px; }
  .rule-cards { grid-template-columns: 1fr; }
  .colour-tools { align-items: flex-start; flex-direction: column; }
  #colour-map { min-height: 340px; }
  .palette button { min-width: 70px; }
  .footer__inner { padding-block: 40px; }
}

@media (max-width: 390px) {
  .hero__facts span { padding-inline: 10px; font-size: .88rem; }
  .course-progress__inner { grid-template-columns: 1fr 92px; }
  .course-map button { min-height: 70px; font-size: .76rem; }
  .lesson-step__header { gap: 10px; }
  .step-state { font-size: .7rem; }
  .shape-picker { grid-template-columns: 1fr; }
  .measure-grid { grid-template-columns: repeat(6, 44px); justify-content: center; }
  .measure-cell { width: 44px; height: 44px; }
}

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

@media print {
  @page { size: A4; margin: 14mm; }
  body { background: white; color: black; font-size: 10pt; }
  .hero, .section-nav, .course-progress, .course-map, .booklet-bar, .footer, .complete-button, .map-stage-controls, .solid-controls, .solid-tools, .builder-controls, .attack-controls, .colour-tools, .measure-controls { display: none !important; }
  .view[hidden] { display: none !important; }
  .page-section { padding: 0; }
  .workshop-banner { background: white; border-bottom: 2px solid black; }
  .workshop-banner__inner { min-height: 0; padding: 8mm 0; }
  .lesson-step { break-before: page; box-shadow: none; }
  .lesson-step > * { break-inside: avoid; }
}