:root {
  --ink: #17324d;
  --muted: #557086;
  --paper: #fffdf6;
  --navy: #145a7a;
  --teal: #159a8c;
  --mint: #dff4e8;
  --yellow: #ffd86b;
  --orange: #f27b4a;
  --red: #c84539;
  --shadow: 0 24px 72px rgb(20 58 78 / 22%);
  color-scheme: light;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #cfe8e4; color: var(--ink); }
button, input { font: inherit; touch-action: manipulation; }
button { cursor: pointer; }
.viewport { position: fixed; inset: 0; overflow: hidden; background: radial-gradient(circle at 12% 15%, rgb(255 216 107 / 42%), transparent 25%), radial-gradient(circle at 88% 78%, rgb(21 154 140 / 24%), transparent 29%), linear-gradient(135deg, #d7eeea, #fff8dc 54%, #cae8e3); }
.stage { position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden; background: var(--paper); box-shadow: var(--shadow); transform-origin: center; }
.slides { height: 100%; transition: transform 420ms cubic-bezier(.22, 1, .36, 1); }
.slides.is-scrubbing { transition: none; }
.slide { position: relative; display: grid; align-content: center; width: 100%; height: 1080px; padding: 82px 220px 104px 126px; overflow: hidden; background: radial-gradient(circle at 92% 10%, rgb(255 216 107 / 28%), transparent 23%), linear-gradient(150deg, #fffef8 0%, #f0faf6 100%); }
.slide::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 18px; background: linear-gradient(var(--teal), #67c7b7); }
.eyebrow { margin: 0 0 14px; color: var(--navy); font-size: 28px; font-weight: 900; letter-spacing: .12em; }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 1400px; margin-bottom: 30px; font-size: 96px; line-height: 1.1; }
h2 { margin-bottom: 34px; font-size: 62px; line-height: 1.16; }
h3 { margin: 0 0 16px; font-size: 38px; }
p, li { font-size: 34px; line-height: 1.48; }
.lead { max-width: 1260px; color: var(--muted); font-size: 43px; }
.hint { position: absolute; left: 126px; bottom: 37px; margin: 0; color: var(--muted); font-size: 23px; }
.source { position: absolute; top: 34px; right: 210px; color: var(--muted); font-size: 20px; font-weight: 650; opacity: .68; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: stretch; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.card { padding: 30px 34px; border: 3px solid rgb(20 90 122 / 12%); border-radius: 26px; background: rgb(255 255 255 / 86%); box-shadow: 0 12px 34px rgb(23 50 77 / 8%); }
.card p { margin-bottom: 0; font-size: 31px; }
.card.accent { border-color: rgb(21 154 140 / 34%); background: var(--mint); }
.number-scene { position: relative; min-height: 570px; border-radius: 42px; background: linear-gradient(145deg, #e3f6ef, #fff4c6); overflow: hidden; }
.factor { position: absolute; display: grid; place-items: center; width: 240px; height: 240px; border-radius: 42px; color: #fff; font-size: 96px; font-weight: 950; box-shadow: 0 22px 0 rgb(15 74 94 / 15%); }
.factor.a { left: 70px; top: 120px; background: var(--teal); transform: rotate(-5deg); }
.factor.b { left: 410px; top: 120px; background: var(--orange); transform: rotate(5deg); }
.times { position: absolute; left: 326px; top: 184px; font-size: 92px; font-weight: 900; }
.result-ribbon { position: absolute; left: 90px; right: 90px; bottom: 55px; padding: 20px; border-radius: 24px; background: var(--navy); color: white; font-size: 38px; font-weight: 800; text-align: center; }
.equation { display: inline-grid; grid-template-columns: repeat(5, auto); gap: 16px; align-items: center; padding: 20px 30px; border-radius: 24px; background: #fff; font-size: 50px; font-weight: 850; box-shadow: 0 12px 30px rgb(23 50 77 / 10%); }
.equation strong { color: var(--red); }
.action, .choice, .mini-action { min-height: 76px; padding: 14px 28px; border: 0; border-radius: 18px; background: var(--teal); color: #fff; font-size: 28px; font-weight: 850; }
.action:hover, .action:focus-visible, .choice:hover, .choice:focus-visible { background: #087a70; }
.secondary { background: var(--navy); }
.orange { background: var(--orange); }
.button-row { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 28px; }
.answer { margin-top: 24px; padding: 24px 30px; border-radius: 20px; background: var(--mint); font-size: 32px; font-weight: 700; }
[hidden] { display: none !important; }
.reveal { visibility: hidden; opacity: 0; transform: translateY(16px); transition: 250ms ease; }
.reveal.is-visible { visibility: visible; opacity: 1; transform: none; }
.vertical { display: inline-grid; min-width: 420px; padding: 28px 50px; border-radius: 28px; background: #fff; box-shadow: 0 16px 40px rgb(23 50 77 / 10%); font: 800 52px/1.28 ui-monospace, "SFMono-Regular", Consolas, monospace; text-align: right; }
.vertical .line { border-top: 4px solid var(--ink); }
.vertical .partial { color: var(--navy); }
.vertical .total { color: var(--red); }
.vertical .shift-tens { padding-right: 1ch; }
.carry-chip { display: inline-block; margin-right: 12px; padding: 5px 12px; border-radius: 12px; background: #ffe3a0; color: #7a4300; font-weight: 900; }
.place-note { display: flex; gap: 16px; align-items: center; margin: 18px 0; padding: 17px 22px; border-radius: 18px; background: #fff; font-size: 29px; }
.place-note b { display: grid; place-items: center; flex: 0 0 58px; height: 58px; border-radius: 50%; background: var(--yellow); }
.diagram { min-height: 450px; padding: 32px; border-radius: 30px; background: #fff; }
.split-bar { display: flex; height: 120px; margin: 30px 0; overflow: hidden; border: 4px solid var(--navy); border-radius: 20px; }
.split-bar > span { display: grid; place-items: center; font-size: 38px; font-weight: 850; }
.split-bar .tens { flex: 10; background: #72d1bc; }
.split-bar .ones { flex: 6; background: #ffd86b; }
.feedback { min-height: 76px; margin-top: 20px; padding: 18px 24px; border-radius: 18px; background: #edf4f6; font-size: 29px; font-weight: 800; }
.feedback.good { background: #d9f4df; color: #145a31; }
.feedback.try { background: #fff1cf; color: #754b00; }
.law-table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; border: 3px solid #abd8ce; border-radius: 22px; background: #fff; font-size: 34px; }
.law-table th, .law-table td { padding: 18px 24px; border-right: 2px solid #d5e9e4; border-bottom: 2px solid #d5e9e4; text-align: center; }
.law-table tr:last-child td { border-bottom: 0; }
.law-table th:last-child, .law-table td:last-child { border-right: 0; }
.law-table th { background: var(--mint); }
.big-result { margin: 24px 0 0; color: var(--red); font-size: 54px; font-weight: 900; }
.progress-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.progress-step { padding: 24px; border-radius: 22px; background: #e9f2f4; font-size: 27px; font-weight: 800; text-align: center; }
.progress-step.on { background: var(--yellow); }
.quiz { display: grid; gap: 18px; }
.choice-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quiz .choice, .choice-pair .choice { width: 100%; min-height: 88px; background: #fff; border: 3px solid #b8d7d1; color: var(--ink); text-align: left; }
.choice.selected-good { border-color: #2f9a57; background: #dff5e5; }
.choice.selected-bad { border-color: var(--orange); background: #fff0e7; }
.map { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.map .card { min-height: 210px; }
.badge { display: inline-block; margin-bottom: 14px; padding: 8px 18px; border-radius: 999px; background: var(--yellow); font-size: 25px; font-weight: 900; }
.timeline { position: absolute; z-index: 20; top: 34px; right: 2px; bottom: 96px; width: 174px; color: var(--muted); }
.timeline-list { display: grid; grid-template-rows: repeat(var(--page-count), 1fr); height: 100%; touch-action: none; user-select: none; }
.timeline-item { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 5px; align-items: center; min-width: 0; padding: 1px 3px; border: 0; border-radius: 8px; background: transparent; color: inherit; text-align: left; opacity: .64; cursor: pointer; }
.timeline-item::before { content: ""; position: absolute; left: 11px; top: -50%; bottom: 50%; width: 2px; background: rgb(85 112 134 / 32%); }
.timeline-item:first-child::before { top: 50%; }
.timeline-number { position: relative; z-index: 1; display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid rgb(85 112 134 / 52%); border-radius: 50%; background: var(--paper); font-size: 11px; font-weight: 850; }
.timeline-title { overflow: hidden; font-size: 13px; font-weight: 700; line-height: 1.12; text-overflow: ellipsis; white-space: nowrap; }
.timeline-item[aria-current="page"] { background: rgb(21 154 140 / 12%); color: var(--navy); opacity: 1; cursor: grab; }
.timeline-item[aria-current="page"] .timeline-number { border-color: var(--teal); background: var(--teal); color: #fff; }
.timeline.is-dragging .timeline-item[aria-current="page"] { cursor: grabbing; }
.fullscreen-button { position: absolute; z-index: 20; right: 16px; bottom: 26px; min-width: 192px; min-height: 58px; padding: 8px 20px; border: 2px solid rgb(23 50 77 / 18%); border-radius: 999px; background: rgb(255 255 255 / 96%); color: var(--ink); font-size: 24px; font-weight: 850; }
.fullscreen-button:disabled { cursor: not-allowed; opacity: .5; }
:focus-visible { outline: 5px solid #1769aa; outline-offset: 5px; }
@media (prefers-reduced-motion: reduce) { .slides, .reveal, .timeline-number { transition: none; } }