:root {
  --ink: #101828;
  --ink-soft: #344054;
  --paper: #f6f2e9;
  --white: #fffdf8;
  --mint: #49dcb1;
  --mint-dark: #0d6b55;
  --yellow: #ffc857;
  --coral: #ff6b5f;
  --violet: #7067f0;
  --line: rgba(16, 24, 40, .14);
  --shadow: 0 24px 70px rgba(16, 24, 40, .12);
  --radius-lg: 2rem;
  --radius-md: 1.25rem;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.55;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--violet); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 20; background: var(--ink); color: white; padding: .8rem 1rem; }
.skip-link:focus { top: 1rem; }

.site-header {
  width: min(calc(100% - 3rem), var(--max));
  margin: 0 auto;
  min-height: 5.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.wordmark { display: inline-flex; align-items: center; gap: .65rem; color: inherit; text-decoration: none; font-weight: 900; letter-spacing: .08em; }
.wordmark-mark { display: block; width: 2.1rem; height: 2.1rem; border-radius: .65rem; }
.header-meta { display: flex; align-items: center; gap: .55rem; color: var(--ink-soft); font-size: .95rem; }
.status-dot { width: .65rem; height: .65rem; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 .3rem rgba(73, 220, 177, .15); }
.pilot-strip { width: min(calc(100% - 3rem), var(--max)); margin: 1rem auto 0; padding: .75rem 1rem; display: flex; align-items: center; justify-content: center; gap: .65rem; border: 1px solid var(--line); border-radius: 999px; background: rgba(255, 253, 248, .72); color: var(--ink-soft); font-size: .85rem; text-align: center; }
.pilot-strip strong { padding: .2rem .55rem; border-radius: 999px; background: var(--yellow); color: var(--ink); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }

.hero {
  width: min(calc(100% - 3rem), var(--max));
  margin: 0 auto;
  min-height: 42rem;
  padding: 5rem 0 6rem;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(28rem, 1.1fr);
  align-items: center;
  gap: 4rem;
}
.eyebrow { margin: 0 0 1rem; color: var(--mint-dark); text-transform: uppercase; letter-spacing: .13em; font-weight: 800; font-size: .8rem; }
h1, h2, h3, p { text-wrap: balance; }
h1 { margin: 0; max-width: 10ch; font-size: clamp(3.5rem, 7vw, 6.8rem); line-height: .92; letter-spacing: -.065em; }
.hero-lead { max-width: 38rem; margin: 1.75rem 0 2rem; font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--ink-soft); }
.primary-button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3.5rem; padding: 0 1.4rem; border-radius: 999px; background: var(--ink); color: white; text-decoration: none; font-weight: 800; box-shadow: 0 12px 30px rgba(16,24,40,.18); transition: transform .2s ease; }
.primary-button:hover { transform: translateY(-2px); }

.hero-machine { position: relative; aspect-ratio: 1; max-width: 34rem; margin-inline: auto; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(circle at 50% 50%, rgba(112,103,240,.14), transparent 57%), repeating-radial-gradient(circle at center, transparent 0 3rem, rgba(16,24,40,.07) 3rem 3.08rem); }
.machine-core { position: relative; z-index: 3; width: 11rem; aspect-ratio: 1; display: grid; place-content: center; text-align: center; border: .8rem solid var(--ink); border-radius: 38% 62% 48% 52% / 52% 42% 58% 48%; background: var(--yellow); box-shadow: var(--shadow); animation: core-float 4s ease-in-out infinite; }
.core-number { font-size: 4rem; line-height: .9; font-weight: 950; letter-spacing: -.06em; }
.core-label { font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .12em; margin-top: .6rem; }
.machine-orbit { position: absolute; inset: 10%; border: 2px dashed rgba(16,24,40,.25); border-radius: 50%; animation: orbit-spin 18s linear infinite; }
.machine-orbit span { position: absolute; display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 1rem; background: var(--white); border: 2px solid var(--ink); font-weight: 900; box-shadow: 6px 7px 0 var(--ink); }
.machine-orbit span:nth-child(1) { top: 2%; left: 48%; }
.machine-orbit span:nth-child(2) { right: 3%; top: 58%; }
.machine-orbit span:nth-child(3) { left: 5%; bottom: 12%; }
.orbit-two { inset: 23%; animation-direction: reverse; animation-duration: 12s; border-style: solid; }
.orbit-two span { width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--mint); box-shadow: none; font-size: .8rem; }
.machine-beam { position: absolute; height: .75rem; width: 23%; background: var(--ink); top: calc(50% - .375rem); z-index: 1; }
.beam-left { left: 0; transform: rotate(12deg); }
.beam-right { right: 0; transform: rotate(-12deg); }
.machine-node { position: absolute; z-index: 2; display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border: .45rem solid var(--ink); border-radius: 1.2rem; font-size: 2.3rem; font-weight: 900; }
.node-left { left: 2%; top: 39%; background: var(--coral); transform: rotate(-8deg); }
.node-right { right: 2%; top: 39%; background: var(--mint); transform: rotate(8deg); }
.world-section { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto 6rem; }
.world-visual { position: relative; margin: 0; overflow: hidden; border-radius: var(--radius-lg); border: 2px solid var(--ink); background: var(--ink); box-shadow: 12px 14px 0 var(--ink); }
.world-visual :is(img, video) { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.world-visual figcaption { position: absolute; left: 1.25rem; bottom: 1.25rem; max-width: calc(100% - 2.5rem); padding: .8rem 1rem; border-radius: .9rem; background: rgba(16,24,40,.88); color: white; backdrop-filter: blur(12px); }
.world-visual figcaption span, .world-visual figcaption strong { display: block; }
.world-visual figcaption span { color: var(--mint); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.world-visual figcaption strong { margin-top: .2rem; }
.curriculum-section { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding: 1rem 0 7rem; }
.curriculum-heading { display: grid; grid-template-columns: 1fr minmax(18rem, .7fr); align-items: end; gap: 3rem; }
.curriculum-heading h2 { max-width: 11ch; }
.curriculum-heading > p { color: var(--ink-soft); font-size: 1.05rem; }
.curriculum-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.curriculum-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--white); }
.curriculum-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: .45rem; background: var(--violet); }
.curriculum-card.accent-mint::before { background: var(--mint); }
.curriculum-card.accent-yellow::before { background: var(--yellow); }
.curriculum-card.accent-coral::before { background: var(--coral); }
.curriculum-card.is-pilot { border: 2px solid var(--ink); box-shadow: 7px 8px 0 var(--ink); }
.curriculum-card summary { min-height: 6rem; padding: 1rem 1rem 1rem 1.35rem; display: grid; grid-template-columns: 3.2rem 1fr auto auto; align-items: center; gap: .8rem; list-style: none; cursor: pointer; }
.curriculum-card summary::-webkit-details-marker { display: none; }
.chapter-number { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: .9rem; background: var(--paper); font-size: 1.5rem; font-weight: 950; }
.chapter-summary-copy strong, .chapter-summary-copy small { display: block; }
.chapter-summary-copy strong { font-size: 1.05rem; }
.chapter-summary-copy small { margin-top: .2rem; color: var(--ink-soft); }
.chapter-toggle { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: rgba(16,24,40,.08); font-size: 1.2rem; font-weight: 900; transition: transform .2s; }
.curriculum-card[open] .chapter-toggle { transform: rotate(45deg); }
.playable-badge { padding: .25rem .5rem; border-radius: 999px; background: rgba(73,220,177,.25); color: var(--mint-dark); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.chapter-copy { padding: 0 1rem 1rem 1.35rem; }
.chapter-copy ul { margin: 0; padding: 0; list-style: none; }
.chapter-copy li { position: relative; padding: .6rem 0 .6rem 2.15rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .85rem; }
.chapter-copy li > span { position: absolute; left: 0; top: .65rem; width: 1.65rem; color: var(--ink); font-weight: 900; text-transform: uppercase; }
.chapter-copy li.is-playable { color: var(--ink); font-weight: 750; }
.chapter-copy li strong { display: inline-flex; margin-left: .4rem; padding: .15rem .4rem; border-radius: 999px; background: rgba(73,220,177,.25); color: var(--mint-dark); font-size: .62rem; text-transform: uppercase; letter-spacing: .06em; }
.curriculum-source { margin: 1.3rem 0 0; color: var(--ink-soft); font-size: .8rem; }

.game-shell { background: var(--ink); color: white; padding: 5rem max(1.5rem, calc((100vw - var(--max)) / 2)); }
.game-topline { display: flex; align-items: end; justify-content: space-between; gap: 2rem; }
.game-shell .eyebrow { color: var(--mint); }
h2 { margin: 0; font-size: clamp(2.35rem, 5vw, 4.7rem); line-height: 1; letter-spacing: -.05em; }
.score-display { min-width: 10rem; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.18); border-radius: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.score-label { color: rgba(255,255,255,.7); font-size: .8rem; }
.score-display strong { color: var(--yellow); font-size: 2rem; }
.flow-guide { margin: 1.5rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .65rem; list-style: none; }
.flow-guide li { display: flex; align-items: center; gap: .45rem; color: rgba(255,255,255,.62); font-size: .78rem; font-weight: 800; }
.flow-guide li span { width: 1.55rem; height: 1.55rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; }
.flow-guide li.is-active { color: var(--yellow); }
.chapter-tabs { margin: 3rem 0 1rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .85rem; }
.chapter-tab { min-height: 7rem; padding: 1rem 1.2rem; display: flex; align-items: center; gap: 1rem; border: 2px solid rgba(255,255,255,.16); border-radius: 1.25rem; background: rgba(255,255,255,.04); color: white; text-align: left; cursor: pointer; }
.chapter-tab.is-active { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }
.chapter-tab-number { flex: 0 0 auto; width: 3.8rem; height: 3.8rem; display: grid; place-items: center; border: 2px solid currentColor; border-radius: 1rem; font-size: 2rem; font-weight: 950; }
.chapter-tab strong, .chapter-tab small { display: block; }
.chapter-tab small { margin-top: .25rem; opacity: .65; }
.topic-tabs { margin: 0 0 1.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .6rem; }
.topic-tab { min-height: 6.5rem; padding: 1rem; display: flex; align-items: center; gap: 1rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1.15rem; background: rgba(255,255,255,.05); color: white; text-align: left; cursor: pointer; transition: background .2s, transform .2s; }
.topic-tab[hidden] { display: none; }
.topic-tab:hover { transform: translateY(-2px); background: rgba(255,255,255,.09); }
.topic-tab.is-active { background: var(--white); color: var(--ink); }
.topic-tab strong, .topic-tab small { display: block; }
.topic-tab small { margin-top: .2rem; opacity: .65; }
.active-route { margin: 0 0 1rem; padding: .8rem 1rem; display: flex; align-items: center; gap: .7rem; border: 1px solid rgba(255,255,255,.14); border-radius: 1rem; background: rgba(255,255,255,.06); }
.active-route > span { color: rgba(255,255,255,.62); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .07em; }
.active-route strong { margin-right: auto; }
.active-route button { padding: .45rem .7rem; border: 1px solid currentColor; border-radius: 999px; background: transparent; color: inherit; font-weight: 800; cursor: pointer; }
.topic-icon { flex: 0 0 auto; width: 3.25rem; height: 3.25rem; border-radius: .9rem; background-color: var(--mint); }
.icon-grid { background-image: linear-gradient(90deg, transparent 45%, var(--ink) 45% 55%, transparent 55%), linear-gradient(transparent 45%, var(--ink) 45% 55%, transparent 55%); }
.icon-split { position: relative; background: var(--yellow); }
.icon-split::before, .icon-split::after { content: ""; position: absolute; width: 1rem; height: 1rem; border: .25rem solid var(--ink); border-radius: 50%; top: 1rem; }
.icon-split::before { left: .45rem; } .icon-split::after { right: .45rem; }
.icon-rings { background: radial-gradient(circle, var(--ink) 0 .35rem, transparent .38rem .65rem, var(--ink) .68rem .82rem, transparent .85rem), var(--coral); }
.icon-bars { position: relative; background: var(--violet); }
.icon-bars::before { content: ""; position: absolute; inset: .7rem; background: linear-gradient(to top, var(--ink) 0 42%, transparent 42%) left bottom / .48rem 100% no-repeat, linear-gradient(to top, var(--ink) 0 72%, transparent 72%) center bottom / .48rem 100% no-repeat, linear-gradient(to top, var(--ink) 0 55%, transparent 55%) right bottom / .48rem 100% no-repeat; }
.icon-power, .icon-variable { display: grid; place-items: center; color: var(--ink); font-size: 1.15rem; font-weight: 950; }
.icon-power { background: var(--yellow); }
.icon-variable { background: var(--coral); font-size: 1.6rem; font-style: italic; }
.icon-measure { position: relative; background: var(--yellow); }
.icon-measure::before { content: ""; position: absolute; inset: .72rem .55rem; border: 2px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 .38rem, var(--ink) .4rem .48rem); }
.icon-space { position: relative; background: var(--coral); }
.icon-space::before { content: ""; position: absolute; width: 1.45rem; height: 1.45rem; left: .78rem; top: .68rem; border: 2px solid var(--ink); background: repeating-linear-gradient(90deg, transparent 0 .36rem, var(--ink) .38rem .43rem), repeating-linear-gradient(transparent 0 .36rem, var(--ink) .38rem .43rem); transform: skewY(-12deg); }
.icon-axis, .icon-reflection, .icon-point-reflection, .icon-rotation { position: relative; background: var(--violet); }
.icon-axis::before, .icon-reflection::before { content: ""; position: absolute; left: 50%; top: .45rem; bottom: .45rem; width: 2px; background: var(--ink); }
.icon-axis::after { content: ""; position: absolute; inset: .85rem .5rem; background: radial-gradient(circle at 20% 30%, var(--ink) 0 .24rem, transparent .27rem), radial-gradient(circle at 80% 30%, var(--ink) 0 .24rem, transparent .27rem), radial-gradient(circle at 20% 75%, var(--ink) 0 .24rem, transparent .27rem), radial-gradient(circle at 80% 75%, var(--ink) 0 .24rem, transparent .27rem); }
.icon-reflection::after { content: ""; position: absolute; width: .65rem; height: .65rem; left: .45rem; top: 1.25rem; border-radius: 50%; background: var(--yellow); box-shadow: 1.7rem 0 0 var(--coral); }
.icon-point-reflection::before { content: ""; position: absolute; left: 50%; top: 50%; width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink); transform: translate(-50%, -50%); }
.icon-point-reflection::after { content: ""; position: absolute; width: .7rem; height: .7rem; left: .45rem; top: .45rem; border-radius: 50%; background: var(--yellow); box-shadow: 1.65rem 1.65rem 0 var(--coral); }
.icon-rotation::before { content: "↻"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--ink); font-size: 2rem; font-weight: 950; }
.icon-net, .icon-view { position: relative; background: var(--coral); }
.icon-net::before { content: ""; position: absolute; inset: .45rem; background: linear-gradient(var(--ink), var(--ink)) 50% 0 / .7rem .7rem no-repeat, linear-gradient(var(--ink), var(--ink)) 0 50% / .7rem .7rem no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 50% / .7rem .7rem no-repeat, linear-gradient(var(--ink), var(--ink)) 100% 50% / .7rem .7rem no-repeat, linear-gradient(var(--ink), var(--ink)) 50% 100% / .7rem .7rem no-repeat; }
.icon-view::before { content: ""; position: absolute; left: .65rem; right: .65rem; bottom: .6rem; height: 2rem; background: linear-gradient(to top, var(--ink) 0 40%, transparent 40%) left bottom / .5rem 100% no-repeat, linear-gradient(to top, var(--ink) 0 100%, transparent 100%) center bottom / .5rem 100% no-repeat, linear-gradient(to top, var(--ink) 0 70%, transparent 70%) right bottom / .5rem 100% no-repeat; }
.workspace-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, .36fr); gap: 1.25rem; }
.lesson-steps { margin: 0 0 1.5rem; padding: .55rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; border-radius: 1rem; background: rgba(16,24,40,.07); }
.lesson-steps[hidden] { display: none; }
.lesson-step { min-height: 2.8rem; padding: .45rem .7rem; display: flex; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: .7rem; background: transparent; color: var(--ink-soft); font-weight: 800; cursor: pointer; }
.lesson-step span { width: 1.4rem; height: 1.4rem; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: .7rem; }
.lesson-step.is-active { background: var(--ink); color: var(--white); }
.activity-card, .coach-card { border-radius: var(--radius-lg); background: var(--white); color: var(--ink); }
.activity-card { min-width: 0; min-height: 39rem; padding: clamp(1.25rem, 3vw, 2.5rem); display: flex; flex-direction: column; scroll-margin-top: 1rem; outline: 0; }
.activity-panel { flex: 1; }
.activity-heading { max-width: 48rem; }
.level-pill { display: inline-flex; padding: .45rem .75rem; border-radius: 999px; background: rgba(73,220,177,.2); color: var(--mint-dark); font-size: .75rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.activity-heading h3 { margin: 1rem 0 .5rem; font-size: clamp(1.8rem, 3vw, 2.75rem); line-height: 1.05; letter-spacing: -.04em; }
.activity-heading p { margin: 0; color: var(--ink-soft); font-size: 1.05rem; }
.divisor-stage { min-height: 14rem; margin: 2.25rem 0; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: .8rem; }
.number-dot { width: 2.25rem; height: 2.25rem; border-radius: .7rem; background: var(--yellow); border: 2px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .25s, background .25s; }
.number-group { display: flex; flex-wrap: wrap; gap: .35rem; padding: .55rem; border: 2px solid var(--ink); border-radius: .8rem; background: rgba(73,220,177,.13); animation: group-in .35s ease both; }
.number-group .number-dot { width: 1.35rem; height: 1.35rem; border-width: 1px; box-shadow: none; }
.number-group.is-remainder { background: rgba(255,107,95,.16); border-color: var(--coral); }
.choice-row { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.choice-button { min-width: 4.2rem; min-height: 3.2rem; padding: .6rem 1rem; border: 2px solid var(--ink); border-radius: .85rem; background: white; font-weight: 900; font-size: 1.15rem; cursor: pointer; box-shadow: 4px 5px 0 var(--ink); transition: transform .15s, box-shadow .15s, background .15s; }
.choice-button:hover { transform: translate(1px, 1px); box-shadow: 3px 4px 0 var(--ink); }
.choice-button.is-correct { background: var(--mint); }
.choice-button.is-wrong { background: var(--coral); animation: shake .3s ease; }
.choice-button:disabled { cursor: default; opacity: .7; }
.answer-progress { margin: 1.25rem 0 0; color: var(--ink-soft); text-align: center; font-size: .88rem; font-weight: 750; }
.factor-stage { min-height: 16rem; margin: 2rem 0; display: grid; justify-items: center; align-content: center; }
.factor-source { display: grid; place-items: center; min-width: 5.5rem; height: 5.5rem; padding: 0 1rem; border: .5rem solid var(--ink); border-radius: 1.5rem; background: var(--yellow); font-size: 2.3rem; font-weight: 950; }
.factor-line { width: 2px; height: 2rem; background: var(--ink); }
.factor-chain { min-height: 3.6rem; display: flex; align-items: center; justify-content: center; gap: .5rem; }
.factor-chip { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--violet); color: white; border: 3px solid var(--ink); font-weight: 900; animation: group-in .3s ease both; }
.factor-times { font-weight: 900; color: var(--ink-soft); }
.factor-remaining { margin-top: 1rem; color: var(--ink-soft); }
.cycle-stage { position: relative; min-height: 16rem; margin: 2rem 0; display: grid; align-content: center; gap: 1.3rem; }
.cycle-track { display: grid; grid-template-columns: 3rem 1fr; align-items: center; gap: .8rem; }
.cycle-label { display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; background: var(--mint); border: 2px solid var(--ink); font-weight: 950; }
.track-b .cycle-label { background: var(--coral); }
.multiple-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.multiple-step { min-height: 2.8rem; display: grid; place-items: center; border-radius: .7rem; border: 1px solid var(--line); background: white; font-weight: 800; }
.multiple-step.is-sync { background: var(--yellow); border: 2px solid var(--ink); }
.sync-marker { position: absolute; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: var(--violet); opacity: 0; pointer-events: none; }
.cycle-stage.is-running .sync-marker { opacity: 1; animation: sync-run 1.6s ease-in-out both; }
.data-pill { background: rgba(112,103,240,.16); color: #4a42b5; }
.data-studio { min-height: 19rem; margin: 1.8rem 0 1rem; display: grid; grid-template-columns: minmax(12rem, .65fr) minmax(0, 1.35fr); gap: 1rem; }
.data-source { align-self: stretch; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 1rem; background: rgba(255,200,87,.2); }
.data-source-label { color: var(--ink-soft); font-size: .7rem; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.data-source h4 { margin: .5rem 0 1rem; font-size: 1.05rem; line-height: 1.2; }
.data-targets { display: grid; gap: .35rem; }
.data-target-row { padding: .55rem 0; display: flex; justify-content: space-between; gap: .75rem; border-top: 1px solid rgba(16,24,40,.15); font-size: .82rem; }
.data-target-row strong { white-space: nowrap; }
.chart-shell { min-width: 0; display: grid; grid-template-columns: 1.8rem 1fr; gap: .45rem; padding: 1rem .75rem .75rem; border: 1px solid var(--line); border-radius: 1rem; background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--line) calc(25% - 1px) 25%), var(--white); }
.chart-scale { height: 12rem; display: flex; flex-direction: column; justify-content: space-between; align-items: end; color: var(--ink-soft); font-size: .68rem; }
.bar-chart { min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(3.2rem, 1fr)); align-items: end; gap: .55rem; }
.bar-control { min-width: 0; display: grid; grid-template-rows: 1.3rem 12rem 2.4rem 2.4rem; justify-items: center; gap: .35rem; }
.bar-value { font-weight: 900; }
.bar-track { position: relative; width: min(100%, 3.6rem); height: 12rem; display: flex; align-items: end; border: 2px solid var(--ink); border-radius: .65rem .65rem .25rem .25rem; overflow: hidden; background: rgba(16,24,40,.04); }
.bar-fill { width: 100%; height: 0; background: var(--violet); transition: height .18s ease, background .18s ease; }
.bar-control.is-correct .bar-fill { background: var(--mint); }
.bar-label { max-width: 100%; align-self: center; overflow: hidden; text-overflow: ellipsis; font-size: .72rem; text-align: center; }
.bar-buttons { display: flex; gap: .3rem; }
.bar-buttons button { width: 2.1rem; height: 2.1rem; border: 2px solid var(--ink); border-radius: .55rem; background: var(--white); color: var(--ink); font-size: 1.25rem; font-weight: 900; cursor: pointer; box-shadow: 2px 3px 0 var(--ink); }
.bar-buttons button:active { transform: translate(1px, 1px); box-shadow: 1px 2px 0 var(--ink); }
.bar-buttons button:disabled { opacity: .45; cursor: default; }
.power-pill { background: rgba(255,200,87,.25); color: #735000; }
.power-stage { min-height: 15rem; margin: 2rem 0; display: flex; align-items: center; justify-content: center; gap: .75rem; }
.power-factor { display: flex; align-items: center; gap: .75rem; }
.power-factor strong { width: 5rem; height: 5rem; display: grid; place-items: center; border: 4px solid var(--ink); border-radius: 1.2rem; background: var(--yellow); box-shadow: 5px 6px 0 var(--ink); font-size: 2rem; }
.power-times { color: var(--ink-soft); font-size: 1.8rem; font-weight: 950; }
.power-stage.is-rule { gap: .45rem; }
.rule-token { min-width: 3.4rem; height: 4rem; padding: 0 .55rem; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: .8rem; background: var(--white); font-size: 1.6rem; font-weight: 950; }
.rule-token:nth-last-child(-n+3) { background: rgba(255,200,87,.45); }
.variable-pill { background: rgba(255,107,95,.18); color: #9d2b22; }
.variable-stage { min-height: 17rem; margin: 1.7rem 0 1rem; display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(12rem, 1.4fr) auto minmax(7rem, .8fr); align-items: center; gap: .7rem; }
.variable-node, .variable-machine { min-height: 8rem; padding: 1rem; display: grid; place-items: center; align-content: center; gap: .4rem; border: 3px solid var(--ink); border-radius: 1.2rem; background: var(--white); }
.variable-node span, .variable-machine span { color: var(--ink-soft); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.variable-node strong { font-size: 2.6rem; }
.variable-machine { background: var(--coral); box-shadow: 5px 6px 0 var(--ink); text-align: center; }
.variable-machine strong { font-size: 1.25rem; }
.variable-node.output { background: var(--mint); }
.variable-arrow { font-size: 2rem; font-weight: 950; }
.variable-buttons, .measure-buttons { display: flex; justify-content: center; gap: .65rem; }
.variable-buttons button, .measure-buttons button { width: 3.4rem; height: 3.4rem; border: 2px solid var(--ink); border-radius: .8rem; background: var(--white); box-shadow: 3px 4px 0 var(--ink); color: var(--ink); font-size: 1.6rem; font-weight: 950; cursor: pointer; }
.variable-buttons button:disabled, .measure-buttons button:disabled { opacity: .45; cursor: default; }
.measure-pill { background: rgba(255,200,87,.25); color: #735000; }
.measure-stage { margin: 1.7rem 0 1rem; padding: 1.2rem; border: 2px solid var(--ink); border-radius: 1.2rem; background: rgba(255,200,87,.12); }
.measure-context { display: flex; justify-content: space-between; gap: 1rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.measure-context-label { color: var(--ink-soft); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.measure-readout { margin: 1.4rem 0 .8rem; display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.measure-readout strong { font-size: clamp(2.2rem, 6vw, 4.5rem); line-height: 1; letter-spacing: -.06em; }
.measure-readout span { color: var(--ink-soft); font-weight: 750; }
.measure-track { height: 3rem; overflow: hidden; border: 3px solid var(--ink); border-radius: .8rem; background: var(--white); }
.measure-track span { display: block; width: 0; height: 100%; background: var(--violet); transition: width .15s ease; }
.measure-scale { margin: .35rem 0 .8rem; display: flex; justify-content: space-between; color: var(--ink-soft); font-size: .75rem; font-weight: 750; }
.measure-slider { width: 100%; accent-color: var(--violet); }
.measure-buttons { margin-top: 1rem; }
.space-pill { background: rgba(255,107,95,.18); color: #9d2b22; }
.space-stage { margin: 1.6rem 0 1rem; padding: 1.1rem; border: 2px solid var(--ink); border-radius: 1.2rem; background: rgba(255,107,95,.08); }
.space-context { margin-bottom: 1rem; display: flex; justify-content: space-between; gap: 1rem; }
.space-context span { color: var(--ink-soft); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.space-workbench { min-height: 14rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; }
.space-visual { width: min(100%, 22rem); min-height: 12rem; margin-inline: auto; display: grid; gap: .22rem; }
.space-visual.is-area { grid-template-columns: repeat(10, 1fr); }
.space-visual.is-area:has(.space-unit:nth-child(16):last-child) { grid-template-columns: repeat(4, 1fr); }
.space-visual.is-volume { grid-template-columns: repeat(5, 1fr); perspective: 28rem; }
.space-visual.is-capacity { min-height: 12rem; padding: .6rem; grid-template-columns: 1fr; align-content: end; border: 4px solid var(--ink); border-top-width: 2px; border-radius: .6rem .6rem 1.4rem 1.4rem; background: var(--white); }
.space-unit { min-width: 0; aspect-ratio: 1; border: 1px solid rgba(16,24,40,.35); border-radius: .18rem; background: var(--white); transition: background .16s, transform .16s; }
.space-visual.is-volume .space-unit { border: 2px solid var(--ink); background: var(--white); transform: skewY(-8deg); }
.space-visual.is-capacity .space-unit { height: 1.65rem; aspect-ratio: auto; border: 0; border-radius: .3rem; background: rgba(16,24,40,.08); }
.space-unit.is-filled { background: var(--violet); transform: translateY(-1px); }
.space-visual.is-volume .space-unit.is-filled { background: var(--yellow); transform: skewY(-8deg) translateY(-3px); }
.space-visual.is-capacity .space-unit.is-filled { background: var(--mint); transform: none; }
.space-value { min-width: 7rem; font-size: clamp(1.8rem, 4vw, 3.4rem); line-height: 1; text-align: right; }
.space-slider { width: 100%; accent-color: var(--coral); }
.space-buttons { margin-top: 1rem; display: flex; justify-content: center; gap: .65rem; }
.space-buttons button { width: 3.4rem; height: 3.4rem; border: 2px solid var(--ink); border-radius: .8rem; background: var(--white); box-shadow: 3px 4px 0 var(--ink); color: var(--ink); font-size: 1.6rem; font-weight: 950; cursor: pointer; }
.space-buttons button:disabled { opacity: .45; cursor: default; }
.symmetry-pill, .rotation-pill { background: rgba(112,103,240,.16); color: #4a42b5; }
.reflection-pill, .point-pill { background: rgba(255,200,87,.25); color: #735000; }
.axis-symmetry-stage { position: relative; width: min(100%, 24rem); aspect-ratio: 1; margin: 1.5rem auto; padding: 1.1rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: .28rem; border: 2px solid var(--ink); border-radius: 1.2rem; background: rgba(112,103,240,.07); }
.symmetry-cell { border-radius: .25rem; background: rgba(16,24,40,.05); }
.symmetry-cell.is-filled { background: var(--violet); border: 1px solid var(--ink); }
.axis-symmetry-stage::after { content: ""; position: absolute; z-index: 2; left: 50%; top: 50%; width: 0; height: 0; background: var(--coral); box-shadow: 0 0 0 2px var(--white); transform-origin: center; pointer-events: none; }
.axis-symmetry-stage[data-axis="vertical"]::after { width: 3px; height: calc(100% - 1rem); transform: translate(-50%, -50%); }
.axis-symmetry-stage[data-axis="horizontal"]::after { width: calc(100% - 1rem); height: 3px; transform: translate(-50%, -50%); }
.axis-symmetry-stage[data-axis="diagonal"]::after { width: 3px; height: 135%; transform: translate(-50%, -50%) rotate(-45deg); }
.rotation-stage { position: relative; min-height: 18rem; margin: 1.3rem 0 .5rem; display: grid; place-items: center; }
.rotation-core, .rotation-ghost { position: absolute; width: 12rem; height: 12rem; border-radius: 50%; transition: transform .25s ease; }
.rotation-ghost { opacity: .15; }
.rotation-arm { position: absolute; left: calc(50% - .65rem); top: 50%; width: 1.3rem; height: 5.4rem; border: 2px solid var(--ink); border-radius: 999px 999px .4rem .4rem; background: var(--violet); transform-origin: 50% 0; transform: rotate(var(--arm-angle)); }
.rotation-ghost .rotation-arm { background: var(--ink); }
.rotation-angle { position: absolute; z-index: 3; display: grid; place-items: center; width: 4.3rem; height: 4.3rem; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-size: 1.2rem; }
.rotation-buttons { display: flex; justify-content: center; gap: .7rem; }
.rotation-buttons button, .reflection-controls button { width: 3.4rem; height: 3.4rem; border: 2px solid var(--ink); border-radius: .8rem; background: var(--white); box-shadow: 3px 4px 0 var(--ink); color: var(--ink); font-size: 1.5rem; font-weight: 950; cursor: pointer; }
.rotation-buttons button:disabled, .reflection-controls button:disabled { opacity: .45; cursor: default; }
.reflection-stage { position: relative; width: min(100%, 25rem); aspect-ratio: 1; margin: 1.4rem auto 1rem; border: 3px solid var(--ink); border-radius: 1rem; background-color: var(--white); background-image: linear-gradient(rgba(16,24,40,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(16,24,40,.12) 1px, transparent 1px); background-size: 14% 14%; background-position: 8% 8%; }
.reflection-axis { position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--coral); transform: translateX(-50%); }
.reflection-original, .reflection-moving, .reflection-center { position: absolute; z-index: 2; transform: translate(-50%, -50%); }
.reflection-original, .reflection-moving { width: 2.3rem; height: 2.3rem; display: grid; place-items: center; border: 2px solid var(--ink); border-radius: 50%; font-weight: 950; transition: left .16s, top .16s; }
.reflection-original { background: var(--yellow); }
.reflection-moving { background: var(--violet); color: var(--white); }
.reflection-center { width: 1rem; height: 1rem; border: 3px solid var(--white); border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 2px var(--ink); }
.reflection-controls { width: 10.8rem; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 3.4rem); grid-template-rows: repeat(2, 3.4rem); gap: .3rem; }
.reflection-controls .move-up { grid-column: 2; }
.reflection-controls .move-left { grid-column: 1; grid-row: 2; }
.reflection-controls .move-down { grid-column: 2; grid-row: 2; }
.reflection-controls .move-right { grid-column: 3; grid-row: 2; }
.net-pill, .view-pill { background: rgba(255,107,95,.18); color: #9d2b22; }
.net-lab { margin: 1.5rem 0 .5rem; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(12rem, .65fr); gap: 1rem; }
.net-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.net-option { min-height: 14rem; padding: .6rem; border: 2px solid var(--ink); border-radius: 1rem; background: var(--white); box-shadow: 3px 4px 0 var(--ink); cursor: pointer; }
.net-option.is-correct { background: rgba(73,220,177,.2); }
.net-option.is-wrong { background: rgba(255,107,95,.18); animation: shake .3s ease; }
.net-option:disabled { opacity: .72; cursor: default; }
.net-grid { width: 100%; aspect-ratio: 5 / 4; display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(4, 1fr); gap: .16rem; }
.net-face { border: 2px solid var(--ink); border-radius: .2rem; background: hsl(calc(245 + var(--face-index) * 8) 78% calc(62% + var(--face-index) * 2%)); }
.net-preview { min-height: 14rem; padding: 1rem; display: grid; place-items: center; align-content: center; gap: 1rem; border: 2px dashed rgba(16,24,40,.35); border-radius: 1rem; color: var(--ink-soft); text-align: center; }
.net-preview strong { color: var(--ink); }
.folded-cube { position: relative; width: 6rem; height: 6rem; display: block; transform: rotate(-8deg); animation: fold-cube .55s ease both; }
.folded-cube i { position: absolute; width: 4rem; height: 4rem; border: 2px solid var(--ink); background: var(--violet); }
.folded-cube i:nth-child(1) { left: 0; top: 1.5rem; transform: skewY(28deg); }
.folded-cube i:nth-child(2) { right: 0; top: 1.5rem; background: var(--coral); transform: skewY(-28deg); }
.folded-cube i:nth-child(3) { left: 1rem; top: 0; height: 2.3rem; background: var(--yellow); transform: skewY(-28deg) skewX(45deg); }
.overlap-faces { position: relative; width: 5rem; height: 5rem; display: block; }
.overlap-faces i { position: absolute; inset: .5rem; border: 3px solid var(--ink); background: rgba(255,107,95,.75); }
.overlap-faces i:last-child { transform: translate(.8rem, .6rem) rotate(12deg); }
.body-lab { margin-top: 1.4rem; }
.body-stage { position: relative; width: min(100%, 27rem); min-height: 18rem; margin: 0 auto; display: grid; place-items: center; perspective: 40rem; }
.body-board { width: 17rem; height: 17rem; padding: 1rem; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: .45rem; border: 3px solid var(--ink); border-radius: 1rem; background: repeating-linear-gradient(45deg, rgba(16,24,40,.04) 0 .4rem, transparent .4rem .8rem), var(--white); transform: rotate(var(--body-turn)); transition: transform .35s ease; }
.cube-stack { min-width: 0; display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-start; }
.stack-cube { width: 2.5rem; height: 1.75rem; margin-top: -.35rem; border: 2px solid var(--ink); border-radius: .25rem; background: var(--violet); box-shadow: .32rem .32rem 0 rgba(16,24,40,.3); }
.cube-stack:nth-child(2n) .stack-cube { background: var(--yellow); }
.view-arrow { position: absolute; left: .4rem; bottom: 1rem; padding: .35rem .55rem; border-radius: .5rem; background: var(--ink); color: var(--white); font-size: .72rem; font-weight: 850; }
.body-rotate-row { display: flex; justify-content: center; align-items: center; gap: .7rem; }
.body-rotate-row button { min-height: 2.8rem; padding: 0 1rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 850; cursor: pointer; }
.body-rotate-row button:disabled { opacity: .45; cursor: default; }
.view-options { margin-top: 1.2rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; }
.view-option { min-height: 7rem; padding: .75rem; border: 2px solid var(--ink); border-radius: .9rem; background: var(--white); box-shadow: 3px 4px 0 var(--ink); cursor: pointer; }
.view-option.is-correct { background: rgba(73,220,177,.25); }
.view-option.is-wrong { background: rgba(255,107,95,.18); animation: shake .3s ease; }
.view-silhouette { height: 5rem; display: flex; align-items: end; justify-content: center; gap: .2rem; }
.view-silhouette i { width: 1.6rem; border: 2px solid var(--ink); border-bottom: 0; background: var(--coral); }
.icon-chance { border-radius: 50%; background: radial-gradient(circle at 35% 35%, var(--white) 0 .22rem, transparent .25rem), radial-gradient(circle at 65% 65%, var(--white) 0 .22rem, transparent .25rem), var(--violet); }
.chance-pill { background: rgba(112,103,240,.16); color: #4a42b5; }
.chance-lab { margin-top: 1.4rem; }
.chance-machine { min-height: 8rem; padding: 1rem; display: grid; grid-template-columns: auto 1fr 1fr; align-items: center; gap: 1rem; border: 3px solid var(--ink); border-radius: 1.2rem; background: rgba(112,103,240,.08); box-shadow: 5px 6px 0 var(--ink); }
.chance-symbol { width: 5rem; height: 5rem; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 1rem; background: var(--yellow); font-size: 2rem; font-weight: 950; }
.chance-machine div { min-width: 0; }
.chance-machine small, .chance-machine strong { display: block; }
.chance-machine small { margin-bottom: .25rem; color: var(--ink-soft); font-size: .7rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.chance-machine strong { font-size: clamp(1.2rem, 4vw, 2.1rem); }
.chance-controls { margin: 1.2rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.chance-controls button { min-height: 3rem; padding: .5rem .7rem; border: 2px solid var(--ink); border-radius: .75rem; background: var(--white); color: var(--ink); box-shadow: 2px 3px 0 var(--ink); font-weight: 850; cursor: pointer; }
.chance-controls button:last-child { background: var(--mint); }
.chance-controls button:disabled { opacity: .45; cursor: default; }
.chance-bars { display: grid; gap: .65rem; }
.chance-bar-row { display: grid; grid-template-columns: minmax(4.4rem, .75fr) minmax(7rem, 3fr) 3.4rem 2.3rem; align-items: center; gap: .55rem; }
.chance-bar-row strong { overflow: hidden; text-overflow: ellipsis; font-size: .82rem; }
.chance-bar-row b, .chance-bar-row small { text-align: right; }
.chance-bar-track { height: 1.7rem; overflow: hidden; border: 2px solid var(--ink); border-radius: 999px; background: var(--white); }
.chance-bar-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--violet); transition: width .25s ease; }
.chance-bar-row:nth-child(2n) .chance-bar-track i { background: var(--coral); }
.chance-bar-row:nth-child(3n) .chance-bar-track i { background: var(--yellow); }
.chance-conclusion { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.chance-conclusion > strong { display: block; margin-bottom: .8rem; }
.activity-actions { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .8rem 1rem; }
.task-feedback { display: none; }
.completion-banner { grid-column: 1 / -1; padding: .75rem .9rem; display: flex; align-items: center; gap: .55rem; border-radius: .8rem; background: rgba(73,220,177,.22); color: #173f35; }
.completion-banner[hidden] { display: none; }
.completion-banner strong { color: var(--ink); }
.text-button, .reset-button { border: 0; background: transparent; text-decoration: underline; text-underline-offset: .25rem; cursor: pointer; }
.next-button { min-height: 3.2rem; padding: 0 1.2rem; border: 0; border-radius: 999px; background: var(--ink); color: white; font-weight: 800; cursor: pointer; }
.next-button:disabled { opacity: .35; cursor: not-allowed; }
.coach-card { padding: 1.75rem; align-self: stretch; background: var(--mint); display: flex; flex-direction: column; }
.coach-avatar { width: 4.5rem; height: 4.5rem; border-radius: 1.35rem; border: 4px solid var(--ink); background: var(--white); display: flex; align-items: center; justify-content: center; gap: .55rem; box-shadow: 6px 7px 0 var(--ink); }
.coach-avatar span { width: .75rem; height: .75rem; border-radius: 50%; background: var(--ink); }
.coach-kicker { margin: 2rem 0 .6rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 900; font-size: .75rem; }
.coach-card h3 { margin: 0; font-size: 1.7rem; line-height: 1.05; letter-spacing: -.03em; }
.coach-card > p:not(.coach-kicker) { color: #173f35; }
.decision-log { margin-top: auto; padding: 1rem; border-radius: 1rem; background: rgba(255,255,255,.62); border: 1px solid rgba(16,24,40,.15); }
.decision-label, .decision-log strong { display: block; }
.decision-label { margin-bottom: .3rem; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.coach-tech { margin-top: 1rem; display: flex; align-items: center; gap: .5rem; font-size: .78rem; color: #174b3d; }
.tech-light { width: .55rem; height: .55rem; border-radius: 50%; background: var(--ink); }
.topic-transition { position: fixed; z-index: 50; inset: 0; padding: 1.25rem; display: grid; place-items: center; background: rgba(16,24,40,.78); backdrop-filter: blur(10px); }
.topic-transition[hidden] { display: none; }
.topic-transition-card { width: min(100%, 34rem); min-height: 23rem; padding: 2rem; display: grid; place-items: center; align-content: center; gap: .7rem; overflow: hidden; border: 3px solid var(--ink); border-radius: 2rem; background: var(--yellow); color: var(--ink); text-align: center; box-shadow: 12px 14px 0 rgba(0,0,0,.28); animation: transition-pop .38s cubic-bezier(.2,.85,.25,1.15) both; }
.topic-transition-number { width: 5.2rem; height: 5.2rem; display: grid; place-items: center; border: 3px solid var(--ink); border-radius: 1.35rem; background: var(--white); font-size: 2.25rem; font-weight: 950; transform: rotate(-4deg); }
.topic-transition-card p { margin: .6rem 0 0; font-size: .78rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.topic-transition-card strong { max-width: 12ch; font-size: clamp(2.4rem, 8vw, 4.5rem); line-height: .95; letter-spacing: -.055em; }
.topic-transition-card small { margin-top: .4rem; font-size: .9rem; font-weight: 800; }

.progress-section { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding: 6rem 0; }
.progress-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1rem; align-items: start; }
.progress-chapter { padding: 1.25rem; border-radius: var(--radius-md); background: var(--white); border: 1px solid var(--line); box-shadow: 0 12px 30px rgba(16,24,40,.06); }
.progress-chapter summary { display: grid; grid-template-columns: 3.2rem 1fr auto; align-items: center; gap: .9rem; list-style: none; cursor: pointer; }
.progress-chapter summary::-webkit-details-marker { display: none; }
.progress-chapter-number { width: 3.2rem; height: 3.2rem; display: grid; place-items: center; border-radius: .9rem; background: var(--ink); color: var(--white); font-size: 1.5rem; font-weight: 950; transition: background-color .25s ease, color .25s ease; }
.progress-chapter.is-started .progress-chapter-number { background: var(--yellow); color: var(--ink); }
.progress-chapter.is-complete .progress-chapter-number { background: var(--mint); color: var(--ink); }
.progress-chapter-copy strong, .progress-chapter-copy small, .progress-chapter-score strong, .progress-chapter-score small { display: block; }
.progress-chapter-copy small, .progress-chapter-score small { margin-top: .15rem; color: var(--ink-soft); font-size: .7rem; }
.progress-chapter-score { text-align: right; }
.progress-chapter-score strong { font-size: 2rem; line-height: 1; }
.progress-bar { height: .75rem; border-radius: 999px; background: rgba(16,24,40,.1); overflow: hidden; }
.progress-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--violet); transition: width .5s ease; }
.chapter-bar { margin-top: 1rem; }
.progress-chapter.is-started .chapter-bar span { background: var(--yellow); }
.progress-chapter.is-complete .chapter-bar span { background: var(--mint); }
.progress-details { margin-top: 1.1rem; padding-top: .4rem; border-top: 1px solid var(--line); }
.progress-detail { padding: .75rem 0; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: .35rem 1rem; color: var(--ink-soft); font-size: .85rem; }
.progress-detail > span strong { margin-right: .3rem; color: var(--ink); }
.progress-detail > b { color: var(--ink); font-size: 1rem; }
.progress-detail .progress-bar { grid-column: 1 / -1; height: .45rem; }
.progress-detail:nth-child(2n) .progress-bar span { background: var(--mint); }
.progress-actions { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.download-button { min-height: 3rem; padding: 0 1.1rem; border: 0; border-radius: 999px; background: var(--ink); color: white; font-weight: 800; cursor: pointer; }
.download-button:disabled { opacity: .35; cursor: not-allowed; }
.reset-button { color: var(--ink-soft); }
.site-footer { min-height: 6rem; padding: 1.5rem max(1.5rem, calc((100vw - var(--max)) / 2)); background: var(--ink); color: rgba(255,255,255,.68); display: flex; align-items: center; justify-content: space-between; gap: 2rem; font-size: .85rem; }
.site-footer a { color: var(--white); font-weight: 800; text-underline-offset: .2rem; }
.site-footer a:focus-visible { outline: 2px solid var(--mint); outline-offset: .25rem; border-radius: .2rem; }
.footer-settings { padding: 0; border: 0; background: transparent; color: var(--white); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: .2rem; cursor: pointer; }
.consent-panel { position: fixed; z-index: 1000; right: 1rem; bottom: 1rem; width: min(calc(100% - 2rem), 42rem); padding: 1.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem; border: 2px solid var(--ink); border-radius: 1.2rem; background: var(--white); color: var(--ink); box-shadow: 8px 10px 0 var(--ink); }
.consent-copy strong { font-size: 1.05rem; }
.consent-copy p { margin: .35rem 0 0; color: var(--ink-soft); font-size: .86rem; line-height: 1.45; }
.consent-actions { display: flex; gap: .55rem; }
.consent-actions button { min-height: 2.8rem; padding: .55rem .85rem; border: 2px solid var(--ink); border-radius: 999px; font-weight: 800; cursor: pointer; }
.consent-secondary { background: var(--white); color: var(--ink); }
.consent-primary { background: var(--ink); color: var(--white); }
.teacher-main { width: min(calc(100% - 3rem), var(--max)); margin: 0 auto; padding: 5rem 0 7rem; }
.teacher-hero { max-width: 58rem; }
.teacher-hero h1 { max-width: 11ch; margin: .4rem 0 1.2rem; }
.teacher-hero > p:not(.eyebrow) { max-width: 48rem; margin-bottom: 2rem; color: var(--ink-soft); font-size: 1.15rem; line-height: 1.65; }
.teacher-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.secondary-button { display: inline-flex; align-items: center; justify-content: center; gap: 1rem; min-height: 3.5rem; padding: 0 1.4rem; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 800; transition: transform .2s ease; }
.secondary-button:hover { transform: translateY(-2px); }
.teacher-grid { margin: 5rem 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.teacher-grid article { padding: 1.5rem; border: 2px solid var(--ink); border-radius: 1.2rem; background: var(--white); box-shadow: 4px 5px 0 var(--ink); }
.teacher-grid article > span { display: inline-grid; place-items: center; width: 2.8rem; height: 2.8rem; border-radius: .8rem; background: #5b52d4; color: var(--white); font-weight: 950; }
.teacher-grid article:nth-child(2) > span { background: var(--yellow); color: var(--ink); }
.teacher-grid article:nth-child(3) > span { background: var(--coral); color: var(--ink); }
.teacher-grid h2 { margin: 1.2rem 0 .6rem; font-size: 1.35rem; }
.teacher-grid p { margin: 0; color: var(--ink-soft); line-height: 1.55; }
.teacher-guide { margin-bottom: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); border: 2px solid var(--ink); border-radius: 1.5rem; background: var(--white); box-shadow: 8px 9px 0 var(--ink); }
.teacher-guide-heading { max-width: 49rem; }
.teacher-guide-heading h2 { margin: .3rem 0 1rem; }
.teacher-guide-heading > p:last-child { margin-bottom: 0; color: var(--ink-soft); font-size: 1.05rem; }
.teacher-guide-grid { margin-top: 2rem; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; }
.teacher-guide-grid article { padding: clamp(1.25rem, 3vw, 2rem); border-radius: 1.2rem; background: rgba(16,24,40,.05); }
.teacher-guide-grid h3 { margin: 0 0 1.25rem; font-size: 1.35rem; }
.teacher-steps { margin: 0; padding: 0; display: grid; gap: 1rem; list-style: none; }
.teacher-steps li { display: grid; grid-template-columns: 2.2rem 1fr; align-items: start; gap: .8rem; }
.teacher-steps li > span { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .7rem; background: var(--yellow); color: var(--ink); font-weight: 950; }
.teacher-steps p { margin: 0; color: var(--ink-soft); }
.teacher-steps strong { color: var(--ink); }
.report-guide { background: rgba(73,220,177,.16) !important; }
.report-guide dl { margin: 0; display: grid; gap: .8rem; }
.report-guide dl > div { padding-bottom: .8rem; border-bottom: 1px solid rgba(16,24,40,.14); }
.report-guide dt { font-weight: 900; }
.report-guide dd { margin: .2rem 0 0; color: var(--ink-soft); }
.report-note { margin: 1.2rem 0; color: var(--ink-soft); font-size: .9rem; }
.report-note strong { color: var(--ink); }
.teacher-check { padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.5rem; background: var(--mint); }
.teacher-check .eyebrow { color: var(--ink); }
.teacher-check h2 { margin: .3rem 0 1.5rem; }
.teacher-check ol { margin: 0; padding-left: 1.4rem; display: grid; gap: .8rem; }
.teacher-check li { padding-left: .35rem; line-height: 1.5; }
.teacher-gate { margin: 1.8rem 0 0; padding: 1rem; border: 1px solid rgba(16,24,40,.2); border-radius: .9rem; background: rgba(255,255,255,.6); }
.feedback-section { margin-top: 1.25rem; padding: clamp(1.5rem, 4vw, 3rem); display: grid; grid-template-columns: minmax(15rem, .62fr) minmax(0, 1.38fr); gap: clamp(2rem, 5vw, 5rem); border: 2px solid var(--ink); border-radius: 1.5rem; background: var(--white); box-shadow: 10px 12px 0 var(--ink); }
.feedback-intro { align-self: start; position: sticky; top: 1.5rem; }
.feedback-intro h2 { max-width: 8ch; }
.feedback-intro > p:last-child { color: var(--ink-soft); }
.feedback-form { display: grid; gap: 1.4rem; }
.feedback-form label, .feedback-form legend { font-weight: 800; }
.feedback-form :is(input[type="text"], input[type="email"], select, textarea) { width: 100%; margin-top: .45rem; padding: .8rem .9rem; border: 1.5px solid var(--ink); border-radius: .75rem; background: white; color: var(--ink); font: inherit; }
.feedback-form textarea { resize: vertical; }
.feedback-form :is(input, select, textarea):focus-visible { outline: 3px solid var(--violet); outline-offset: 2px; }
.feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.rating-fieldset, .recommendation-fieldset { margin: 0; padding: 0; border: 0; }
.rating-fieldset legend, .recommendation-fieldset legend { margin-bottom: .65rem; }
.rating-scale { display: grid; grid-template-columns: auto repeat(5, 2.8rem) auto; align-items: center; gap: .4rem; color: var(--ink-soft); font-size: .75rem; }
.rating-scale label, .recommendation-options label { cursor: pointer; }
.rating-scale input, .recommendation-options input { position: absolute; opacity: 0; pointer-events: none; }
.rating-scale label span { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 50%; background: white; color: var(--ink); font-size: 1rem; font-weight: 900; }
.rating-scale input:checked + span, .recommendation-options input:checked + span { background: var(--mint); box-shadow: 3px 4px 0 var(--ink); }
.rating-scale input:focus-visible + span, .recommendation-options input:focus-visible + span { outline: 3px solid var(--violet); outline-offset: 2px; }
.recommendation-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.recommendation-options label span { min-height: 3rem; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: .75rem; background: white; color: var(--ink); }
.feedback-check { display: flex; align-items: flex-start; gap: .7rem; color: var(--ink-soft); font-size: .9rem; font-weight: 650 !important; }
.feedback-check input { flex: 0 0 auto; width: 1.15rem; height: 1.15rem; margin-top: .2rem; accent-color: var(--mint-dark); }
.feedback-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.feedback-submit { display: flex; align-items: center; gap: 1rem; }
.feedback-submit .primary-button { border: 0; cursor: pointer; }
.feedback-submit .primary-button:disabled { opacity: .6; cursor: wait; }
.feedback-status { margin: 0; color: var(--ink-soft); font-size: .85rem; }
.feedback-status.is-success { color: var(--mint-dark); font-weight: 800; }
.feedback-status.is-error { color: #b42318; font-weight: 800; }
.feedback-privacy { margin: -.4rem 0 0; color: var(--ink-soft); font-size: .75rem; }

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes core-float { 50% { transform: translateY(-.7rem) rotate(2deg); } }
@keyframes group-in { from { transform: scale(.8); opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes sync-run { 0% { left: 8%; top: 28%; } 50% { left: 72%; top: 28%; } 55% { left: 72%; top: 66%; } 100% { left: 72%; top: 66%; transform: scale(1.8); background: var(--yellow); } }
@keyframes fold-cube { from { transform: scale(.65) rotate(-35deg); opacity: .25; } to { transform: scale(1) rotate(-8deg); opacity: 1; } }
@keyframes transition-pop { from { transform: scale(.82) translateY(1.5rem); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 2rem; padding-top: 3rem; }
  .hero-copy { text-align: center; }
  .hero-copy h1, .hero-lead { margin-inline: auto; }
  .hero-machine { width: min(100%, 30rem); }
  .workspace-layout { grid-template-columns: 1fr; }
  .coach-card { min-height: 22rem; }
  .topic-tabs { grid-template-columns: repeat(2, 1fr); }
  .chapter-tabs { grid-template-columns: 1fr; }
  .topic-tab { min-height: 4.8rem; }
  .curriculum-heading { grid-template-columns: 1fr; gap: 1rem; }
  .curriculum-grid { grid-template-columns: repeat(2, 1fr); }
  .progress-grid { grid-template-columns: 1fr; }
  .teacher-grid { grid-template-columns: 1fr; }
  .teacher-guide-grid { grid-template-columns: 1fr; }
  .feedback-section { grid-template-columns: 1fr; }
  .feedback-intro { position: static; }
  .feedback-intro h2 { max-width: 12ch; }
}

@media (max-width: 640px) {
  .site-header, .pilot-strip, .hero, .progress-section, .curriculum-section, .teacher-main { width: min(calc(100% - 2rem), var(--max)); }
  .world-section { width: min(calc(100% - 2rem), var(--max)); margin-bottom: 4rem; }
  .header-meta { display: none; }
  .pilot-strip { align-items: flex-start; flex-direction: column; border-radius: 1rem; text-align: left; }
  .hero { min-height: auto; padding-bottom: 4rem; }
  h1 { max-width: 100%; font-size: clamp(3rem, 14vw, 4rem); }
  .teacher-hero h1 { max-width: 100%; }
  .hero-machine { max-width: 22rem; }
  .machine-core { width: 7.5rem; border-width: .55rem; }
  .core-number { font-size: 2.8rem; }
  .machine-node { width: 3.5rem; height: 3.5rem; font-size: 1.8rem; }
  .machine-orbit span { width: 2.6rem; height: 2.6rem; border-radius: .8rem; }
  .world-visual { box-shadow: 7px 8px 0 var(--ink); }
  .world-visual :is(img, video) { aspect-ratio: 4 / 3; object-position: 56% center; }
  .game-shell { padding: 2rem 1rem 3rem; overflow: clip; background: #eef1f4; color: var(--ink); }
  .game-shell .eyebrow { color: var(--mint-dark); }
  .game-topline { align-items: start; flex-direction: column; gap: .8rem; }
  .game-topline h2 { max-width: 12ch; font-size: clamp(2rem, 10vw, 2.8rem); }
  .score-display { width: 100%; padding: .65rem .8rem; border-color: rgba(16,24,40,.16); background: rgba(255,255,255,.7); }
  .score-label { color: var(--ink-soft); }
  .score-display strong { font-size: 1.45rem; }
  .flow-guide { margin-top: 1rem; gap: .4rem .8rem; }
  .flow-guide li { color: var(--ink-soft); font-size: .7rem; }
  .flow-guide li.is-active { color: #745400; }
  .chapter-tabs { margin: 1.25rem 0 .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .chapter-tab { min-width: 0; min-height: 0; padding: .65rem; gap: .55rem; border: 1px solid rgba(16,24,40,.14); border-radius: .85rem; background: rgba(255,255,255,.7); color: var(--ink); }
  .chapter-tab-number { width: 2.35rem; height: 2.35rem; border-width: 1px; border-radius: .65rem; font-size: 1.15rem; }
  .chapter-tab strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
  .chapter-tab small { display: none; }
  .topic-tabs { margin-bottom: .65rem; grid-template-columns: 1fr; gap: .45rem; }
  .topic-tab { min-width: 0; min-height: 0; padding: .6rem .7rem; gap: .65rem; border-color: rgba(16,24,40,.14); border-radius: .85rem; background: rgba(255,255,255,.7); color: var(--ink); }
  .topic-icon { width: 2.6rem; height: 2.6rem; border-radius: .7rem; transform: scale(.82); }
  .topic-tab strong { font-size: .88rem; }
  .topic-tab small { font-size: .72rem; }
  .active-route { margin-bottom: .65rem; padding: .65rem .75rem; flex-wrap: wrap; gap: .25rem .55rem; border-color: rgba(16,24,40,.14); background: var(--white); }
  .active-route > span { width: 100%; color: var(--ink-soft); font-size: .62rem; }
  .active-route strong { min-width: 0; font-size: .84rem; }
  .active-route button { padding: .35rem .55rem; font-size: .7rem; }
  .workspace-layout { min-width: 0; gap: .7rem; }
  .activity-card { width: 100%; min-width: 0; min-height: 0; padding: 1.25rem; overflow: visible; border-radius: 1.1rem; scroll-margin-top: .5rem; }
  .activity-panel { min-width: 0; }
  .activity-heading h3 { margin-top: .7rem; font-size: clamp(1.45rem, 7vw, 1.85rem); }
  .activity-heading p { font-size: .9rem; line-height: 1.4; }
  .level-pill { padding: .35rem .55rem; font-size: .62rem; }
  .number-dot { width: 1.65rem; height: 1.65rem; border-radius: .5rem; box-shadow: 2px 2px 0 var(--ink); }
  .multiple-list { grid-template-columns: repeat(3, 1fr); }
  .lesson-steps { grid-template-columns: 1fr; }
  .divisor-stage, .factor-stage, .cycle-stage { min-height: 10rem; margin: 1rem 0; }
  .axis-symmetry-stage, .reflection-stage { width: min(100%, 15.5rem); margin-block: .75rem; }
  .axis-symmetry-stage { padding: .7rem; }
  .rotation-stage { min-height: 14rem; margin-top: .6rem; transform: scale(.88); }
  .body-stage { min-height: 16rem; transform: scale(.9); transform-origin: center; }
  .choice-row { gap: .45rem; }
  .choice-button { min-width: 0; min-height: 2.75rem; padding: .45rem .7rem; border-width: 1.5px; border-radius: .7rem; box-shadow: 2px 3px 0 var(--ink); font-size: .95rem; }
  .variable-stage { grid-template-columns: 1fr 1fr; }
  .variable-machine { grid-column: 1 / -1; grid-row: 1; }
  .variable-arrow { display: none; }
  .power-stage { min-height: 12rem; gap: .35rem; }
  .power-factor { gap: .35rem; }
  .power-factor strong { width: 3.4rem; height: 3.4rem; border-width: 3px; box-shadow: 3px 4px 0 var(--ink); font-size: 1.5rem; }
  .power-times { font-size: 1.2rem; }
  .power-stage.is-rule { width: 100%; min-width: 0; gap: .25rem; }
  .power-stage.is-rule .rule-token { flex: 1 1 0; min-width: 0; max-width: 3.4rem; height: 3.4rem; padding: 0 .15rem; border-radius: .65rem; font-size: 1.3rem; }
  .measure-context, .measure-readout { align-items: flex-start; flex-direction: column; }
  .space-context, .space-workbench { grid-template-columns: 1fr; }
  .space-context { flex-direction: column; }
  .space-value { text-align: center; }
  .net-lab { grid-template-columns: 1fr; }
  .net-options { grid-template-columns: 1fr; }
  .net-option { min-height: 10rem; }
  .view-options { grid-template-columns: 1fr; }
  .chance-machine { grid-template-columns: auto 1fr; }
  .chance-machine div:last-child { grid-column: 1 / -1; }
  .chance-controls { grid-template-columns: 1fr; }
  .chance-bar-row { grid-template-columns: 4.4rem minmax(5rem, 1fr) 3.2rem; }
  .chance-bar-row small { display: none; }
  .data-studio { grid-template-columns: 1fr; }
  .chart-shell { padding-inline: .45rem; }
  .bar-chart { gap: .3rem; }
  .bar-control { grid-template-rows: 1.3rem 10rem 2.4rem 2.4rem; }
  .bar-track { height: 10rem; }
  .chart-scale { height: 10rem; }
  .bar-buttons button { width: 1.9rem; }
  .activity-actions { margin-top: 1rem; padding-top: .8rem; grid-template-columns: 1fr; align-items: stretch; gap: .6rem; }
  .task-feedback { margin: 0; padding: .6rem .7rem; display: block; border-radius: .75rem; background: rgba(112,103,240,.09); color: var(--ink-soft); font-size: .76rem; line-height: 1.3; }
  .completion-banner { padding: 1rem; align-items: flex-start; flex-direction: column; gap: .25rem; font-size: .85rem; line-height: 1.4; overflow-wrap: anywhere; }
  .text-button { min-height: 2.5rem; text-align: left; }
  .next-button { width: 100%; }
  .coach-card { min-height: 0; padding: 1rem; border-radius: 1.1rem; }
  .coach-avatar, .coach-tech { display: none; }
  .coach-kicker { margin: 0 0 .35rem; }
  .coach-card h3 { display: none; }
  .coach-card > p:not(.coach-kicker) { margin: 0; font-size: .84rem; }
  .decision-log { margin-top: .7rem; padding: .7rem; }
  .topic-transition { padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
  .topic-transition-card { min-height: min(28rem, calc(100dvh - 2rem)); padding: 1.75rem 1.25rem; border-radius: 1.5rem; box-shadow: 7px 8px 0 rgba(0,0,0,.25); }
  .topic-transition-number { width: 4.5rem; height: 4.5rem; font-size: 1.8rem; }
  .topic-transition-card strong { max-width: 10ch; font-size: clamp(2.2rem, 12vw, 3.5rem); }
  .curriculum-grid { grid-template-columns: 1fr; }
  .curriculum-card summary { grid-template-columns: 3.2rem 1fr auto; }
  .playable-badge { display: none; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .consent-panel { left: 1rem; right: 1rem; grid-template-columns: 1fr; }
  .consent-actions { flex-direction: column-reverse; }
  .consent-actions button { width: 100%; }
  .feedback-section { box-shadow: 7px 8px 0 var(--ink); }
  .feedback-grid { grid-template-columns: 1fr; }
  .rating-scale { grid-template-columns: repeat(5, 1fr); }
  .rating-scale > label { grid-row: 1; }
  .rating-scale > span:first-child { grid-column: 1 / 3; grid-row: 2; }
  .rating-scale > span:last-child { grid-column: 4 / 6; grid-row: 2; text-align: right; }
  .rating-scale label span { width: 100%; max-width: 3rem; margin-inline: auto; }
  .feedback-submit { align-items: stretch; flex-direction: column; }
  .feedback-submit .primary-button { width: 100%; }
  .teacher-actions { align-items: stretch; flex-direction: column; }
  .teacher-actions :is(.primary-button, .secondary-button) { width: 100%; }
  .report-guide .secondary-button { width: 100%; }
}

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