.practice-page { overflow-x: hidden; }
.practice-page .page-shell { --stage-min-height: clamp(410px, calc(100svh - 530px), 590px); }
.practice-page #division-form { grid-template-columns: minmax(180px, 1fr) auto minmax(150px, .72fr) auto auto; }
.practice-workspace { grid-template-columns: minmax(0, 1fr) 260px; }
.practice-board { grid-template-rows: 155px minmax(var(--stage-min-height), auto) auto auto; }
.practice-instruction { height: 100%; min-height: 0; align-items: flex-start; }
body[data-task="stage"] .practice-instruction,
body[data-task="verify"] .practice-instruction,
body[data-task="finish"] .practice-instruction { align-items: center; }
.practice-instruction .instruction-copy { width: 100%; }
.practice-instruction #step-count { padding-top: 2px; }
.prompt-answer[hidden] { display: none; }
.prompt-answer { margin-top: 10px; }
.anticipation-prompt { display: flex; flex-wrap: wrap; align-items: center; gap: 9px 24px; }
.prompt-equation { display: flex; align-items: center; gap: 8px; color: var(--navy); font-family: "DejaVu Sans Mono", Consolas, monospace; font-size: clamp(1rem, 1.7vw, 1.28rem); font-weight: 850; white-space: nowrap; }
.prompt-conclusion { display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: .95rem; font-weight: 750; white-space: nowrap; }
.answer-input { border: 2px solid #aebdce; border-radius: 9px; color: var(--ink); background: #fff; font-family: "DejaVu Sans Mono", Consolas, monospace; font-weight: 850; text-align: center; outline: none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.answer-input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(11,103,178,.13); }
.answer-input.is-wrong { border-color: #c43b4d; color: #9f2033; background: #fff2f3; box-shadow: 0 0 0 4px rgba(196,59,77,.12); animation: wrong-answer .28s ease; }
.answer-input:disabled { opacity: .78; }
.inline-answer { width: clamp(64px, 9vw, 104px); height: 40px; font-size: 1rem; }
.digit-count-answer { width: 46px; height: 40px; font-size: 1.05rem; border-color: var(--orange); }
.accepted-answer { display: inline-grid; min-width: 68px; min-height: 38px; place-items: center; padding: 3px 9px; border: 2px solid var(--teal); border-radius: 9px; color: var(--teal); background: var(--teal-soft); }
.accepted-answer.compact { min-width: 42px; }
@keyframes wrong-answer { 40% { transform: translateX(3px); } 75% { transform: translateX(-3px); } }

.practice-stage { min-height: var(--stage-min-height); padding: 18px 22px 12px; overflow: hidden; }
.practice-stage .long-division { width: min(100%, 790px); grid-template-columns: minmax(0, 1fr) var(--potence-width, 142px); }
.practice-stage .potence { grid-column: 2; grid-row: 1; }
.practice-work-column { position: relative; min-width: 0; padding: 4px 12px 4px 0; }
.practice-work-column { grid-column: 1; grid-row: 1; }
.practice-work-column .digit-row { min-width: 0; }
.practice-work-column .digit-row.is-ghost { visibility: visible; opacity: .2; }
.muted-division-digit { opacity: .42; }
.used-division-digit { opacity: .5; }
.lowered-source { color: var(--teal); }
.digit.pending.falling-source { opacity: 1; }
.grid-answer, .grid-placeholder { --practice-cell-size: min(38px, calc(var(--column-width, 48px) - 5px), calc(var(--row-height, 48px) - 5px)); z-index: 2; align-self: center; width: var(--practice-cell-size); height: var(--practice-cell-size); min-width: 0; min-height: 0; justify-self: center; border-radius: 8px; }
.grid-answer { display: grid; place-items: center; }
.grid-placeholder { border: 2px dashed #9fb1c4; background: rgba(240,244,248,.55); }
.grid-placeholder.remainder-placeholder { border-color: #ab91c6; background: var(--violet-soft); }
.operation-answer { width: var(--practice-cell-size); height: var(--practice-cell-size); min-width: 0; max-width: 100%; max-height: 100%; padding: 0; font-size: var(--digit-size, 30px); line-height: 1; }
.product-answer .operation-answer { border-color: #75879a; }
.remainder-answer .operation-answer { border-color: var(--violet); color: var(--violet); background: #fffafd; }
.completed-digit { animation: reveal-answer .3s ease both; }
.partial-digit { color: var(--blue); background: var(--blue-soft); border-radius: 7px; }
.final-remainder { color: var(--violet); }
@keyframes reveal-answer { from { opacity: .35; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } }
.practice-work-column .subtraction-rule { z-index: 1; }
.practice-work-column .product-row:has(.grid-answer) .subtraction-rule { border-color: #53667b; }

.practice-lower-arrow { position: absolute; z-index: 6; top: calc(100% + 4px); left: 50%; width: 0; border-left: 2px solid var(--teal); pointer-events: none; animation: practice-arrow .82s ease both; }
.practice-lower-arrow::after { content: ""; position: absolute; left: -5px; bottom: 0; width: 8px; height: 8px; border-right: 2px solid var(--teal); border-bottom: 2px solid var(--teal); transform: rotate(45deg); }
@keyframes practice-arrow { 0% { opacity: 0; transform: translateY(-4px); } 16%, 78% { opacity: .95; } 100% { opacity: .2; transform: translateY(0); } }

.practice-quotient { width: 100%; max-width: 100%; gap: .12em; }
.practice-quotient .quotient-slot { width: .92em; min-width: .92em; height: 1.08em; min-height: 1.08em; overflow: hidden; border-radius: .22em; }
.practice-quotient .quotient-slot.is-empty { border: 2px dashed rgba(245,130,32,.48); background: rgba(255,242,230,.56); }
.practice-quotient .quotient-slot.is-filled { border: 2px solid rgba(245,130,32,.5); background: var(--orange-soft); }
.practice-quotient .is-active-slot { min-width: .92em; }
.quotient-answer { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: 0; border-color: var(--orange); border-radius: inherit; color: var(--orange); font-size: var(--quotient-size, 30px); line-height: 1; }
.written-answer { color: var(--orange); }
.quotient-waiting { display: grid; min-width: 44px; min-height: 38px; place-items: center; border: 2px dashed rgba(245,130,32,.48); border-radius: 9px; color: rgba(245,130,32,.58); background: var(--orange-soft); }
.is-locked-slot { opacity: .52; }

.practice-relation { width: min(100%, 720px); margin-top: 12px; grid-template-columns: minmax(96px, 1fr) auto minmax(96px, 1fr) auto minmax(96px, 1fr) auto minmax(88px, 1fr); }
.practice-relation:not(.is-active, .is-complete) .role-card.quotient,
.practice-relation:not(.is-active, .is-complete) .role-card.remainder { opacity: .5; }
.practice-relation.is-active { padding: 5px; border-radius: 14px; background: #f7f9fc; }
.practice-relation.is-complete .role-card { box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.relation-digit-group { width: min(100%, var(--group-width, 92px)); display: grid; grid-template-columns: repeat(var(--digit-count), minmax(0, 32px)); justify-content: center; gap: 3px; margin-inline: auto; }
.relation-digit-answer { width: 100%; min-width: 0; height: 36px; padding: 0; border-color: var(--role-color); border-radius: 7px; color: var(--role-color); font-size: clamp(.68rem, 1.8vw, 1.08rem); }

.practice-actions { min-height: 64px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 11px 2px 4px; border-top: 1px solid #e7edf4; }
.feedback { min-width: 0; margin: 0; color: var(--muted); font-size: .88rem; font-weight: 700; line-height: 1.3; text-align: center; }
.feedback.is-error { color: #a22c38; }
.feedback.is-hint { color: var(--navy); }
.feedback.is-success { color: #087c76; }
.practice-progress { height: 5px; margin: 7px 2px 0; overflow: hidden; border-radius: 999px; background: #e9eef5; }
.practice-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--teal), var(--blue)); transition: width .3s ease; }

.practice-table { height: auto; min-height: 0; align-self: stretch; }
.practice-table-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.practice-table-heading > div { min-width: 0; }
.practice-table-heading h2 { white-space: nowrap; }
.table-toggle { min-height: 38px; padding: 7px 10px; font-size: .76rem; white-space: nowrap; }
.practice-multiples strong { color: #9aa7b6; }
.practice-table.is-revealed .practice-multiples strong { color: var(--ink); }
.practice-table.is-revealed .multiple.is-active strong { color: var(--orange); }

@media (max-width: 1100px) {
  .practice-page #division-form { grid-template-columns: minmax(150px, 1fr) auto minmax(130px, .72fr) auto auto; }
  .practice-workspace { grid-template-columns: minmax(0, 1fr) 235px; }
  .practice-relation { gap: 6px; }
  .practice-relation .role-card { min-width: 0; }
}

@media (max-width: 930px) {
  .practice-page #division-form { grid-template-columns: 1fr auto 1fr auto auto; }
  .practice-workspace { grid-template-columns: 1fr; }
  .practice-table { min-height: 0; }
  .practice-table:not(.is-open) .practice-multiples { display: none; }
  .practice-table .practice-multiples { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(38px, auto)); }
}

@media (max-width: 780px) {
  .practice-page .page-shell { --stage-min-height: 440px; }
  .practice-page .header-actions .button-light { display: none; }
  .practice-page #division-form { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .practice-page #division-form .button-secondary { grid-column: 1 / 2; }
  .practice-page #division-form .button-primary { grid-column: 2 / 4; }
  .practice-board { grid-template-rows: 168px minmax(var(--stage-min-height), auto) auto auto; }
  .practice-instruction { padding: 12px 13px; }
  .anticipation-prompt { gap: 8px 14px; }
  .practice-stage { min-height: var(--stage-min-height); padding: 15px 4px 11px; overflow: hidden; }
  .practice-stage .long-division { min-width: 0; grid-template-columns: minmax(0, 1fr) var(--potence-width, 108px); }
  .practice-relation { width: 100%; grid-template-columns: minmax(58px, 1fr) auto minmax(58px, 1fr) auto minmax(58px, 1fr) auto minmax(58px, 1fr); gap: 3px; }
  .practice-relation .relation-sign { display: block; font-size: 1rem; }
  .practice-relation .role-card { min-width: 0; padding: 6px 3px; }
  .practice-relation .role-card strong { font-size: 1rem; }
  .practice-relation .role-card small { font-size: .53rem; letter-spacing: .02em; }
  .relation-digit-group { gap: 2px; }
  .relation-digit-answer { height: 32px; border-width: 1.5px; }
  .practice-page .help-button, .practice-page .table-toggle { display: inline-flex; }
}

@media (max-width: 520px) {
  .practice-page .page-shell { width: calc(100% - 12px); }
  .practice-page .site-header { min-height: 82px; padding-inline: 3px; }
  .practice-page .brand { width: 100px; }
  .practice-page .back-link { font-size: .66rem; }
  .practice-page .title-lockup h1 { font-size: 1.14rem; }
  .practice-page .controls-card { padding: 10px; border-radius: 17px; }
  .practice-page #division-form { gap: 7px; }
  .practice-page .number-field input { height: 43px; padding-inline: 8px; font-size: 1.03rem; }
  .practice-page #division-form .button { min-height: 42px; padding: 7px 10px; font-size: .82rem; }
  .practice-board { grid-template-rows: 184px minmax(var(--stage-min-height), auto) auto auto; padding: 10px; border-radius: 18px; }
  .practice-instruction { gap: 6px; }
  .practice-instruction h2 { font-size: .91rem; }
  .practice-instruction .step-detail { font-size: .76rem; }
  .practice-instruction #step-count { font-size: .7rem; }
  .prompt-equation { gap: 5px; font-size: .94rem; }
  .inline-answer { width: clamp(58px, 19vw, 82px); height: 38px; }
  .digit-count-answer { width: 42px; height: 38px; }
  .prompt-conclusion { gap: 5px; font-size: .83rem; }
  .practice-stage { padding-top: 12px; }
  .practice-work-column { padding-right: 7px; }
  .practice-relation { margin-top: 9px; }
  .practice-relation .role-card small { font-size: .49rem; }
  .relation-digit-answer { height: 30px; font-size: clamp(.56rem, 2.7vw, .9rem); }
  .practice-actions { min-height: 104px; grid-template-columns: 1fr 1fr; gap: 8px; }
  .practice-actions .feedback { grid-column: 1 / -1; grid-row: 1; min-height: 35px; font-size: .8rem; }
  .practice-actions .help-button { grid-column: 1; grid-row: 2; }
  .practice-actions .validate-button { grid-column: 2; grid-row: 2; }
  .practice-actions .button { min-height: 44px; padding-inline: 7px; font-size: .79rem; }
  .practice-table { padding: 12px; border-radius: 18px; }
  .practice-table .practice-multiples { grid-template-columns: 1fr; grid-template-rows: none; }
  .practice-page .site-footer { padding-top: 15px; }
}

@media (max-width: 350px) {
  .practice-page .brand { width: 88px; }
  .practice-page .title-lockup h1 { font-size: 1.02rem; }
  .practice-board { padding-inline: 7px; }
  .practice-instruction { padding-inline: 10px; }
  .prompt-equation { gap: 4px; }
  .inline-answer { width: 56px; }
  .practice-relation .role-card { padding-inline: 1px; }
  .practice-relation .role-card strong { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .practice-lower-arrow, .completed-digit, .answer-input.is-wrong { animation: none !important; }
}