.multiples-example { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); margin: 24px 0; }
.multiples-example div { display: flex; padding: 11px 14px; align-items: center; justify-content: space-between; border: 2px solid #d8e4eb; border-radius: 11px; background: #fff; }
.multiples-example span { color: #60747d; font-size: .78rem; }
.multiples-example strong { color: #09539d; font: 700 .96rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.long-rule ol { display: grid; gap: 11px; grid-template-columns: 1fr 1fr; margin: 0; padding: 0; list-style: none; }
.long-rule li { display: grid; gap: 10px; grid-template-columns: 30px 1fr; padding: 12px 13px; align-items: center; border-radius: 11px; background: #eef5fb; }
.long-rule li > span { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 50%; background: #116e93; color: #fff; font-size: .78rem; }
.long-rule p { margin: 0; font-size: .9rem; line-height: 1.42; }
.reading-pair { display: grid; gap: 18px; grid-template-columns: 1fr 1fr; margin: 24px 0; }
.reading-pair article { padding: 18px 20px; border: 2px solid #d9e4eb; border-left: 5px solid #5d91b0; border-radius: 14px; background: #fff; }
.reading-pair article:nth-child(2) { border-left-color: #d99a20; }
.reading-pair h2 { margin: 0 0 8px; color: #173849; font-size: 1.06rem; }
.reading-pair p { margin: 0; color: #41535c; font-size: .91rem; line-height: 1.5; }
.leading-choice { display: flex; gap: 10px; margin: 12px 0; align-items: center; justify-content: center; color: #5a6d75; font: 700 .92rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.leading-choice span, .leading-choice strong { padding: 8px 11px; border-radius: 9px; background: rgba(255, 255, 255, .72); }
.leading-choice strong { background: #f1cf78; color: #664006; box-shadow: inset 0 0 0 2px #d99a20; }
.leading-choice i { color: #9a6717; font-style: normal; }

.zero-quotient-example { display: grid; gap: 24px; grid-template-columns: minmax(230px, .72fr) 1.28fr; margin: 24px 0 14px; padding: 20px 22px; align-items: center; border: 2px solid #d9e4eb; border-radius: 15px; background: #fff; }
.zero-quotient-layout { --zero-cell: 42px; display: grid; width: calc(58px + 4 * var(--zero-cell)); margin: 0 auto; grid-template-columns: 58px repeat(4, var(--zero-cell)); grid-template-rows: 38px 48px; color: #173849; font: 700 1.25rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.zero-quotient-layout__answer { display: grid; grid-row: 1; grid-column: 3 / 6; grid-template-columns: repeat(3, var(--zero-cell)); color: #09539d; }
.zero-quotient-layout__answer span, .zero-quotient-layout__answer strong, .zero-quotient-layout__dividend span { display: grid; place-items: center; }
.zero-quotient-layout__answer strong { margin: 2px 3px; border: 2px solid #d99a20; border-radius: 10px; background: #fff2c9; color: #80540f; }
.zero-quotient-layout__divisor { display: grid; grid-row: 2; grid-column: 1; padding-right: 11px; place-items: center end; }
.zero-quotient-layout__dividend { display: grid; grid-row: 2; grid-column: 2 / 6; grid-template-columns: repeat(4, var(--zero-cell)); border-top: 3px solid #173849; border-left: 3px solid #173849; border-radius: 13px 0 0; }
.zero-quotient-example ol { display: grid; gap: 10px; margin: 0; padding-left: 22px; color: #41535c; }
.zero-quotient-example li { padding-left: 3px; line-height: 1.45; }

@media (max-width: 680px) {
    .zero-quotient-example { grid-template-columns: 1fr; }
}

.long-scene { position: relative; min-height: 520px; margin: 24px 0 8px; overflow-anchor: none; }
.long-scene.is-ready { height: var(--scene-height); min-height: var(--scene-min-height); }
.long-scene__sticky { position: absolute; top: 0; right: 0; left: 0; display: grid; height: min(650px, calc(100vh - 84px)); min-height: 520px; box-sizing: border-box; grid-template-rows: auto minmax(0, 1fr) auto auto; overflow: hidden; border: 2px solid #c9dce8; border-radius: 22px; background: linear-gradient(180deg, #fbfdff, #f2f8fc); box-shadow: 0 12px 30px rgba(20, 57, 78, .14); contain: layout paint; overflow-anchor: none; will-change: transform; }
.long-scene__sticky.is-pinned { position: fixed; right: auto; z-index: 900; transform-origin: top left; }
.long-scene__heading { margin: 0; padding: 17px 24px 9px; color: #173849; font: 700 1.35rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; text-align: center; }
.long-stage { display: flex; min-height: 0; gap: 18px; padding: 14px 22px; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(rgba(93, 145, 176, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(93, 145, 176, .07) 1px, transparent 1px), #eaf3f8; background-size: 26px 26px; }

.long-board { --cell: 43px; --cols: 5; --board-pad-top: 13px; --quotient-height: 44px; --dividend-height: 50px; --work-row-height: 38px; --work-offset: -6px; --cursor-pad: 7px; position: relative; display: grid; width: calc(var(--cols) * var(--cell) + 76px); padding: var(--board-pad-top) 15px 16px; border-radius: 16px; background: #fff; box-shadow: 0 7px 20px rgba(23, 56, 73, .12); color: #173849; font: 700 1.28rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.long-board__quotient { display: grid; margin-left: 60px; grid-template-columns: repeat(var(--cols), var(--cell)); min-height: var(--quotient-height); }
.long-board__division { display: grid; grid-template-columns: 60px 1fr; align-items: stretch; }
.long-board__divisor { display: grid; place-items: center end; padding-right: 12px; }
.long-board__dividend { position: relative; display: grid; min-height: var(--dividend-height); grid-template-columns: repeat(var(--cols), var(--cell)); border-top: 3px solid #173849; border-left: 3px solid #173849; border-radius: 14px 0 0 0; }
.long-board__work { margin-top: var(--work-offset); margin-left: 60px; }
.long-board__row { position: relative; display: grid; min-height: var(--work-row-height); grid-template-columns: repeat(var(--cols), var(--cell)); }
.long-board__cell { position: relative; z-index: 2; display: grid; min-width: 0; place-items: center; border-radius: 7px; opacity: 0; will-change: opacity, transform; }
.long-board__cell--given { opacity: 0; }
.long-board__cell--answer { color: #09539d; }
.long-board__cell--product { color: #7a4f12; }
.long-board__cell--remainder { color: #3c5662; }
.long-board__minus { position: absolute; left: -16px; top: 11px; color: #9a5e12; opacity: 0; }
.long-board__cursor { position: absolute; z-index: 1; box-sizing: border-box; border: 2px solid #d99a20; border-radius: 13px; background: #fff2c9; opacity: 0; pointer-events: none; will-change: left, top, width, height, opacity; }
.long-board__subtraction-line { position: absolute; z-index: 3; bottom: -2px; height: 2px; background: #52666f; opacity: 0; transform: scaleX(0); transform-origin: right center; will-change: opacity, transform; }
.long-board__point { position: absolute; z-index: 4; width: 12px; text-align: center; opacity: 0; }
.long-board__point--answer { top: calc(var(--board-pad-top) + (var(--quotient-height) - 1em) / 2); left: calc(75px + var(--point) * var(--cell) - 6px); color: #09539d; }
.long-board__point--given { top: calc(var(--board-pad-top) + var(--quotient-height) + (var(--dividend-height) - 1em) / 2); left: calc(75px + var(--point) * var(--cell) - 6px); }
.long-board__appended { color: #6c7d85; }
.long-board__continuation { position: absolute; top: calc(var(--board-pad-top) + (var(--quotient-height) - 1em) / 2); left: calc(75px + var(--cols) * var(--cell) - 3px); color: #09539d; font-size: 1.2rem; opacity: 0; will-change: opacity, transform; }
.long-board--dense { --cell: 39px; --board-pad-top: 9px; --quotient-height: 32px; --dividend-height: 38px; --work-row-height: 25px; --work-offset: -6.5px; --cursor-pad: 2px; padding-bottom: 10px; font-size: 1.06rem; }
.long-board--dense .long-board__minus { top: 3px; }
.long-board--very-dense { --quotient-height: 28px; --dividend-height: 34px; --work-row-height: 20px; --work-offset: -7px; font-size: .9rem; }
.long-board--very-dense .long-board__minus { top: 2px; }
.long-stage.is-invalid { color: #687b84; }
.long-stage.is-invalid::after { padding: 14px 18px; border: 2px dashed #b8cbd7; border-radius: 13px; background: rgba(255, 255, 255, .86); content: "Enter a dividend and a two-digit divisor"; font-weight: 700; }

.multiples-crib { display: grid; width: 172px; box-sizing: border-box; gap: 4px; padding: 12px; border: 2px solid #c8dae4; border-radius: 14px; background: rgba(255, 255, 255, .92); box-shadow: 0 6px 16px rgba(23, 56, 73, .1); }
.multiples-crib__title { margin: 0 0 4px; color: #52666f; font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-align: center; text-transform: uppercase; }
.multiples-crib__item { --lit: 0; position: relative; display: flex; padding: 4px 7px; justify-content: space-between; border-radius: 6px; color: #52666f; font: 700 .72rem/1.1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.multiples-crib__item::before { position: absolute; inset: 0; z-index: 0; border-radius: inherit; background: #fff2c9; box-shadow: inset 0 0 0 2px #d99a20; content: ""; opacity: var(--lit); pointer-events: none; }
.multiples-crib__item > * { position: relative; z-index: 1; }
.multiples-crib__factor b { font: inherit; }

.long-scene__caption { display: grid; height: 7.6em; box-sizing: border-box; padding: 12px 28px 6px; align-content: center; text-align: center; }
.long-scene__caption h2 { margin: 0 0 5px; color: #09539d; font-size: 1.08rem; }
.long-scene__caption p { max-width: 680px; margin: 0 auto; color: #344b56; font-size: .92rem; line-height: 1.45; }
.long-scene__progress { display: flex; gap: 7px; padding: 0 20px 15px; justify-content: center; }
.long-scene__dot { width: 8px; height: 8px; border-radius: 50%; background: #c6d4dc; transition: width .2s ease, border-radius .2s ease, background-color .2s ease; }
.long-scene__dot.is-current { width: 25px; border-radius: 999px; background: #116e93; }
.long-scene__dot.is-past { background: #6c9bb0; }

.long-scene__inputs { display: flex; gap: 16px; padding: 17px 24px 10px; align-items: center; justify-content: center; }
.long-scene__number-field { display: grid; gap: 5px; }
.long-scene__number-field > span, .long-scene__answer-mode legend { color: #41535c; font-size: .76rem; font-weight: 700; letter-spacing: .035em; }
.long-scene__inputs > span { margin-top: 18px; color: #b86821; font-size: 1.65rem; font-weight: 700; }
.long-scene__inputs input { width: 170px; box-sizing: border-box; padding: 9px 13px; border: 2px solid #b8cbd7; border-radius: 11px; outline: none; background: #fff; color: #173849; font: 700 1.12rem/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; text-align: center; }
.long-scene__inputs input[data-divisor-input] { width: 105px; }
.long-scene__inputs input:focus { border-color: #116e93; box-shadow: 0 0 0 4px rgba(17, 110, 147, .12); }
.long-scene__inputs input[aria-invalid="true"] { border-color: #a3352b; background: #fffafa; }
.long-scene__answer-mode { display: grid; gap: 5px; margin: 0; padding: 0; border: 0; }
.long-scene__answer-mode legend { padding: 0; }
.long-scene__answer-mode > div { display: flex; padding: 3px; border: 2px solid #b8cbd7; border-radius: 11px; background: #fff; }
.long-scene__answer-mode label { position: relative; cursor: pointer; }
.long-scene__answer-mode input { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); }
.long-scene__answer-mode span { display: block; padding: 7px 10px; border-radius: 7px; color: #52666f; font-size: .78rem; font-weight: 700; }
.long-scene__answer-mode input:checked + span { background: #116e93; color: #fff; }
.long-scene__answer-mode input:focus-visible + span { box-shadow: 0 0 0 3px rgba(17, 110, 147, .22); }

@media (prefers-reduced-motion: reduce) {
    .long-board__cell, .long-board__minus, .long-board__cursor, .long-board__subtraction-line, .multiples-crib__item, .long-scene__dot { transition: none; }
}