:root {
      --blue: #149bd7;
      --ink: #102131;
      --muted: #5c6b78;
      --paper: #fbfcfe;
      --panel: #ffffff;
      --line: #d8e2ea;
      --shadow: 0 12px 32px rgba(15, 33, 49, 0.12);
      --radius: 8px;
      --touch: 48px;
      --zoom: 1;
    }

    * { box-sizing: border-box; }

    html,
    body {
      min-height: 100%;
      margin: 0;
      color: var(--ink);
      background: #eef4f8;
      font-family: Arial, Helvetica, sans-serif;
      letter-spacing: 0;
      touch-action: manipulation;
    }

    body { overflow: hidden; }

    button,
    input,
    select { font: inherit; }

    button,
    select,
    input {
      min-height: var(--touch);
      border: 2px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      color: var(--ink);
      font-weight: 800;
    }

    button {
      padding: 0 14px;
      cursor: pointer;
      user-select: none;
      -webkit-tap-highlight-color: transparent;
      white-space: nowrap;
    }

    select,
    input {
      padding: 0 12px;
    }

    button:focus-visible,
    select:focus-visible,
    input:focus-visible,
    a:focus-visible {
      outline: 4px solid rgba(20, 155, 215, 0.35);
      outline-offset: 2px;
    }

    .app {
      display: grid;
      grid-template-rows: auto auto 1fr;
      height: 100vh;
      height: 100dvh;
      min-width: 320px;
    }

    .topbar {
      display: grid;
      grid-template-columns: minmax(190px, 1fr) auto;
      align-items: center;
      gap: 16px;
      padding: 12px 18px;
      background: #071018;
      color: #ffffff;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 14px;
      min-width: 0;
    }

    .brand-logo {
      display: inline-flex;
      border-radius: 6px;
      flex: 0 0 auto;
    }

    .brand img {
      width: 142px;
      height: auto;
      display: block;
      object-fit: contain;
    }

    h1 {
      margin: 0;
      font-size: clamp(1.25rem, 2vw, 2rem);
      line-height: 1.05;
      font-weight: 800;
    }
.top-actions,
    .toolbar,
    .control-group,
    .view-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    .top-actions { justify-content: end; }

    .icon-button {
      width: var(--touch);
      padding: 0;
      display: inline-grid;
      place-items: center;
      background: #122436;
      color: #ffffff;
      border-color: #263d51;
    }

    .icon-button:hover,
    .icon-button[aria-pressed="true"] {
      background: var(--blue);
      border-color: #8fd8f3;
      color: #06111a;
    }

    .icon {
      width: 24px;
      height: 24px;
      display: block;
      pointer-events: none;
    }

    .home-button {
      min-height: var(--touch);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border: 2px solid #263d51;
      border-radius: var(--radius);
      background: #122436;
      color: #ffffff;
      text-decoration: none;
      font-weight: 800;
      white-space: nowrap;
    }

    .home-button:hover {
      background: var(--blue);
      border-color: #8fd8f3;
      color: #06111a;
    }

    .toolbar {
      padding: 12px 18px;
      background: #ffffff;
      border-bottom: 1px solid var(--line);
      box-shadow: 0 6px 14px rgba(15, 33, 49, 0.06);
      z-index: 3;
    }

    .control-label {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 800;
    }

    .wide-button {
      min-height: var(--touch);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #f8fbfd;
      color: var(--ink);
    }

    .wide-button:hover,
    select:hover,
    input:hover {
      border-color: var(--blue);
      background: #e5f6fc;
    }

    .primary,
    .wide-button[aria-pressed="true"] {
      background: var(--blue);
      border-color: #0f80b3;
      color: #06111a;
    }

    .tool-menu { position: relative; }

    .tool-menu summary {
      min-height: var(--touch);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 0 14px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      background: #f8fbfd;
      color: var(--ink);
      cursor: pointer;
      font-weight: 800;
      list-style: none;
      white-space: nowrap;
      user-select: none;
    }

    .tool-menu summary::-webkit-details-marker { display: none; }

    .menu-panel {
      width: min(430px, calc(100vw - 36px));
      padding: 12px;
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 20;
      display: grid;
      gap: 10px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      box-shadow: var(--shadow);
    }

    .field {
      display: grid;
      gap: 5px;
    }

    .field span {
      color: var(--muted);
      font-size: 0.86rem;
      font-weight: 800;
    }

    .workspace {
      min-height: 0;
      overflow: auto;
      overscroll-behavior: contain;
      padding: 18px;
      background:
        linear-gradient(#dce8f0 1px, transparent 1px),
        linear-gradient(90deg, #dce8f0 1px, transparent 1px);
      background-size: 34px 34px;
    }

    .stage {
      width: min(1480px, 100%);
      min-width: calc(1120px * var(--zoom));
      margin: 0 auto;
      display: grid;
      gap: 12px;
      transform: scale(var(--zoom));
      transform-origin: top center;
    }

    .setup-panel,
    .calculation-panel,
    .model-panel {
      border: 2px solid var(--line);
      border-radius: var(--radius);
      background: rgba(255, 255, 255, 0.96);
      box-shadow: var(--shadow);
    }

    .setup-panel {
      display: grid;
      grid-template-columns: minmax(260px, 1fr) auto;
      gap: 10px;
      align-items: end;
      padding: 10px 12px;
    }

    .number-entry {
      display: grid;
      grid-template-columns: repeat(2, minmax(180px, 1fr));
      gap: 10px;
      min-width: 0;
    }

    .entry-field {
      display: grid;
      gap: 6px;
    }

    .entry-field label {
      color: var(--muted);
      font-size: 0.9rem;
      font-weight: 800;
    }

    .entry-field input {
      width: 100%;
      min-width: 0;
      font-size: clamp(1.2rem, 2vw, 1.6rem);
      text-align: right;
      font-variant-numeric: tabular-nums;
    }

    .action-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(112px, 1fr));
      gap: 8px;
      min-width: min(560px, 100%);
    }

    .action-grid .wide-button {
      width: 100%;
    }

    .sentence {
      display: none;
      padding: 10px 14px;
      border-top: 1px solid var(--line);
      color: var(--muted);
      font-size: clamp(1rem, 1.6vw, 1.25rem);
      font-weight: 900;
      min-height: 46px;
    }

    .work-grid {
      display: grid;
      grid-template-columns: minmax(360px, 0.72fr) minmax(640px, 1.28fr);
      gap: 12px;
      align-items: start;
    }

    .panel-header {
      min-height: 42px;
      padding: 8px 10px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      border-bottom: 1px solid var(--line);
      background: #fbfdff;
      font-weight: 900;
    }

    .panel-header.hidden-header {
      display: none;
    }

    .step-pill {
      padding: 5px 8px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      color: #0c5f86;
      font-size: 0.88rem;
      font-weight: 900;
    }

    .chart-shell {
      overflow: auto;
      padding: 4px;
    }

    .calculation-panel .chart-shell {
      overflow: hidden;
      position: relative;
    }

    .pv-chart {
      width: 100%;
      min-width: 0;
      border-collapse: collapse;
      table-layout: fixed;
      background: #ffffff;
      border: 2px solid #8d9ba6;
      font-variant-numeric: tabular-nums;
    }

    .pv-chart th,
    .pv-chart td {
      border-right: 1px solid var(--line);
      text-align: center;
      position: relative;
    }

    .pv-chart th:last-child,
    .pv-chart td:last-child { border-right: none; }

    .pv-chart th {
      height: 32px;
      padding: 2px;
      border-bottom: 1px solid var(--line);
      background: #f8fbfd;
      color: var(--muted);
      font-size: clamp(0.56rem, 0.86vw, 0.86rem);
      font-weight: 900;
      white-space: nowrap;
    }

    .pv-chart .op-cell {
      width: 18px;
      border-right: none;
      background: #fbfdff;
      color: var(--muted);
    }

    .pv-chart td {
      height: 54px;
      padding: 1px;
      font-size: clamp(1.28rem, 2.25vw, 2.35rem);
      font-weight: 900;
    }

    .pv-chart .exchange-top td,
    .pv-chart .exchange-bottom td {
      height: 32px;
      color: #b85618;
      font-size: clamp(0.92rem, 1.48vw, 1.38rem);
    }

    .algorithm-exchange-used {
      position: relative;
      display: inline-block;
      color: #7b3d12;
    }

    .algorithm-exchange-used::after {
      content: "";
      position: absolute;
      left: -0.18em;
      right: -0.18em;
      top: 50%;
      border-top: 3px solid currentColor;
      transform: rotate(-16deg);
      transform-origin: center;
    }

    .algorithm-top-struck {
      position: relative;
      display: inline-block;
      color: #5d6770;
    }

    .algorithm-top-struck::after {
      content: "";
      position: absolute;
      left: -0.18em;
      right: -0.18em;
      top: 50%;
      border-top: 3px solid currentColor;
      transform: rotate(-16deg);
      transform-origin: center;
    }

    .algorithm-compare-flash {
      display: inline-block;
      animation: compareFlash 1200ms ease-in-out 2 both;
    }

    .pv-chart .answer-row td {
      border-top: 3px solid #102131;
      color: #0c5f86;
    }

    .algorithm-total {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 1px;
      min-width: 1.7em;
      position: relative;
    }

    .algorithm-carry-digit {
      display: inline-grid;
      place-items: center;
      min-width: 0.78em;
      border-radius: 6px;
    }

    .algorithm-carry-digit.highlight {
      background: #fff0bf;
      color: #8a5600;
      box-shadow: 0 0 0 3px #f2b84b;
    }

    .algorithm-carry-digit.moving {
      position: absolute;
      left: 0;
      top: 0;
      width: 50%;
      z-index: 8;
      animation: moveAlgorithmCarry 2400ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .pv-chart .current {
      background: transparent;
      box-shadow: none;
    }

    .pv-chart .done {
      background: #eef9e8;
    }

    .algorithm-column-highlight {
      position: absolute;
      top: 4px;
      bottom: 4px;
      left: var(--algorithm-highlight-left, 0);
      width: var(--algorithm-highlight-width, 0);
      border: 3px solid #f2b84b;
      background: transparent;
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85);
      pointer-events: none;
      z-index: 0;
      display: none;
    }

    .algorithm-column-highlight.visible {
      display: block;
    }

    .decimal-marker::after {
      content: "";
      position: absolute;
      right: -5px;
      bottom: 10px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--ink);
      z-index: 2;
    }

    .model-chart {
      display: grid;
      grid-template-columns: repeat(var(--column-count), minmax(142px, 1fr));
      min-width: calc(var(--column-count) * 148px);
      border: 2px solid #8d9ba6;
      background: #ffffff;
    }

    .model-column {
      min-height: 548px;
      display: grid;
      grid-template-rows: 38px 1fr;
      border-right: 1px solid var(--line);
      position: relative;
      overflow: visible;
      container-type: inline-size;
    }

    .model-column:last-child { border-right: none; }

    .model-overlay {
      position: absolute;
      left: 4px;
      right: 4px;
      top: 38px;
      height: calc((100% - 38px) / 3);
      z-index: 36;
      pointer-events: none;
    }

    .model-column.current {
      background: #fff8e6;
      box-shadow: inset 0 0 0 3px #f2b84b;
      z-index: 2;
    }

    .model-column.current .model-head {
      background: #fff0bf;
      color: #6a4300;
    }

    .model-head {
      display: grid;
      place-items: center;
      padding: 3px;
      border-bottom: 1px solid var(--line);
      background: #f8fbfd;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 900;
      text-align: center;
    }

    .step-pill:empty {
      display: none;
    }

    .model-lane {
      display: grid;
      grid-template-rows: repeat(3, 1fr);
      gap: 3px;
      padding: 4px;
      min-height: 510px;
    }

    .model-group {
      position: relative;
      min-height: 158px;
      display: flex;
      align-content: center;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 3px;
      padding: 4px;
      border: 1px dashed #cbd8e1;
      border-radius: var(--radius);
      background: rgba(248, 251, 253, 0.74);
    }

    .model-group.answer-model {
      border-top: 3px solid #102131;
      padding-bottom: 34px;
    }

    .model-chart.base10-chart .model-column {
      min-height: 410px;
    }

    .model-chart.base10-chart .model-lane {
      min-height: 372px;
      grid-template-rows: repeat(3, minmax(112px, 1fr));
    }

    .model-chart.base10-chart .model-group {
      min-height: 112px;
      gap: 2px;
      padding: 3px;
    }

    .model-chart.base10-chart .model-group.answer-model {
      padding-bottom: 24px;
    }

    .answer-exchange-layer {
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 4px;
      height: 42px;
      z-index: 28;
      pointer-events: none;
    }

    .exchange-moving-piece {
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 29;
      animation: moveThenStack 3200ms cubic-bezier(.2, .82, .2, 1) both;
      transform-origin: center;
      outline: 3px solid transparent;
      outline-offset: 1px;
    }

    .subtraction-exchange-layer {
      position: absolute;
      inset: 5px;
      z-index: 28;
      pointer-events: none;
    }

    .addition-stack-layer {
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 4px;
      min-height: 86px;
      z-index: 31;
      pointer-events: none;
    }

    .subtraction-moving-piece,
    .subtraction-incoming-piece,
    .subtraction-stack-piece,
    .subtraction-arrived-piece,
    .addition-stack-piece {
      position: absolute;
      left: 50%;
      z-index: 29;
      transform-origin: center;
      outline: 3px solid #f2b84b;
      outline-offset: 1px;
      filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
    }

    .subtraction-moving-piece,
    .subtraction-incoming-piece,
    .subtraction-stack-piece,
    .subtraction-arrived-piece {
      top: 50%;
    }

    .subtraction-incoming-piece {
      animation: moveBorrowIntoColumn 3100ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .subtraction-arrived-piece {
      transform: translate(-50%, -50%);
    }

    .addition-stack-piece {
      bottom: 0;
      animation: stackIntoExchange 2400ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .subtraction-moving-piece {
      animation: moveBorrowCounter 3100ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .subtraction-stack-piece {
      animation: splitBorrowStack 3300ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .answer-carry-row {
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 4px;
      min-height: 28px;
      display: flex;
      align-items: end;
      justify-content: center;
      gap: 3px;
      pointer-events: none;
    }

    .answer-carry-row.carry-new {
      animation: revealCarry 2200ms ease both;
    }

    .counter {
      width: 50px;
      height: 50px;
      display: block;
      object-fit: contain;
      border: 0;
      border-radius: 50%;
      color: #ffffff;
      font-size: 0.76rem;
      font-weight: 900;
      box-shadow: none;
      animation: popIn 360ms cubic-bezier(.2, .9, .2, 1) both;
    }

    .counter-fallback {
      display: grid;
      place-items: center;
      border: 2px solid #102131;
      background: #0f8fb7;
      box-shadow: inset 0 -5px rgba(0, 0, 0, 0.14), inset 0 5px rgba(255, 255, 255, 0.16);
    }

    .model-piece {
      position: relative;
      display: inline-block;
      line-height: 0;
    }

    .model-piece.removed::after {
      content: "";
      position: absolute;
      left: -8%;
      right: -8%;
      top: 50%;
      border-top: 4px solid #102131;
      transform: rotate(-18deg);
      z-index: 40;
      pointer-events: none;
    }

    .counter.removed {
      opacity: 0.28;
      filter: grayscale(0.45);
      text-decoration: line-through;
    }

    .equipment.removed {
      opacity: 0.28;
      filter: grayscale(0.45);
    }

    .model-piece.removed > .counter,
    .model-piece.removed > .equipment {
      opacity: 0.28;
      filter: grayscale(0.45);
    }

    .subtract-cancel {
      animation: takeAwayPiece 900ms ease both;
      animation-delay: var(--cancel-delay, 0ms);
    }

    .subtract-cancel::after {
      content: "";
    }

    .compare-flash {
      animation: compareFlash 1200ms ease-in-out 2 both;
    }

    .exchange-highlight {
      filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
      outline: 3px solid #f2b84b;
      outline-offset: 1px;
      border-radius: 50%;
    }

    .exchange-slide-source {
      position: relative;
      z-index: 25;
      animation: slideSourceCounters 3000ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .exchange-slide-source.slide-only {
      animation-name: slideOnlyCounters;
      animation-duration: 2400ms;
    }

    .exchange-slide-source.stack-only {
      animation-name: stackOnlyCounters;
      animation-duration: 2400ms;
    }

    .equipment.exchange-highlight {
      border-radius: 4px;
    }

    .answer-carry-row .counter {
      width: 46px;
      height: 46px;
    }

    .answer-carry-row .unit-block { width: 46px; height: 46px; }
    .answer-carry-row .ten-rod { width: 48px; height: 146px; }
    .answer-carry-row .hundred-flat { width: 110px; height: 110px; }
    .answer-carry-row .thousand-cube { width: 98px; height: 98px; }

    .base10-chart .answer-carry-row .unit-block { width: 30px; height: 30px; }
    .base10-chart .answer-carry-row .ten-rod { width: 30px; height: 86px; }
    .base10-chart .answer-carry-row .hundred-flat { width: 64px; height: 64px; }
    .base10-chart .answer-carry-row .thousand-cube { width: 58px; height: 58px; }

    .equipment {
      animation: popIn 360ms cubic-bezier(.2, .9, .2, 1) both;
    }

    .counter.addition-stack-piece,
    .equipment.addition-stack-piece {
      animation: stackIntoExchange 2400ms cubic-bezier(.2, .82, .2, 1) both;
      animation-delay: 0ms !important;
    }

    .counter.subtraction-moving-piece,
    .equipment.subtraction-moving-piece {
      animation: moveBorrowCounter 3100ms cubic-bezier(.2, .82, .2, 1) both;
      animation-delay: 0ms !important;
    }

    .counter.subtraction-incoming-piece,
    .equipment.subtraction-incoming-piece {
      animation: moveBorrowIntoColumn 3100ms cubic-bezier(.2, .82, .2, 1) both;
      animation-delay: 0ms !important;
    }

    .counter.subtraction-stack-piece,
    .equipment.subtraction-stack-piece {
      animation: splitBorrowStack 3300ms cubic-bezier(.2, .82, .2, 1) both;
      animation-delay: 0ms !important;
    }

    .counter.subtraction-arrived-piece,
    .equipment.subtraction-arrived-piece {
      animation: none !important;
    }

    .quiet-update .counter,
    .quiet-update .equipment {
      animation: none !important;
      transition: none !important;
    }

    .exchange-moving-piece {
      animation: moveThenStack 3200ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .unit-block {
      width: 48px;
      height: 48px;
    }

    .ten-rod {
      width: 48px;
      height: 146px;
    }

    .hundred-flat {
      width: 112px;
      height: 112px;
    }

    .thousand-cube {
      width: 98px;
      height: 98px;
    }

    .equipment {
      display: block;
      object-fit: contain;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .decimal-small.unit-block { width: 38px; height: 38px; }
    .decimal-small.ten-rod { width: 40px; height: 122px; }
    .decimal-small.hundred-flat { width: 90px; height: 90px; }
    .decimal-small.thousand-cube { width: 78px; height: 78px; }

    .base10-chart .unit-block { width: 32px; height: 32px; }
    .base10-chart .ten-rod { width: 32px; height: 88px; }
    .base10-chart .hundred-flat { width: 68px; height: 68px; }
    .base10-chart .thousand-cube { width: 62px; height: 62px; }
    .base10-chart .decimal-small.unit-block { width: 26px; height: 26px; }
    .base10-chart .decimal-small.ten-rod { width: 28px; height: 78px; }
    .base10-chart .decimal-small.hundred-flat { width: 58px; height: 58px; }
    .base10-chart .decimal-small.thousand-cube { width: 52px; height: 52px; }

    .exchange-flight {
      position: absolute;
      left: 50%;
      top: 90px;
      z-index: 30;
      width: 118px;
      min-height: 78px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      gap: 3px;
      padding: 5px;
      border: 2px solid #f2b84b;
      border-radius: var(--radius);
      background: rgba(255, 248, 230, 0.95);
      box-shadow: 0 10px 22px rgba(15, 33, 49, 0.18);
      pointer-events: none;
    }

    .exchange-flight.moving {
      animation: flyExchange 2400ms cubic-bezier(.18, .8, .2, 1) both;
    }

    .exchange-flight.arrive {
      top: 266px;
      animation: arriveExchange 2200ms cubic-bezier(.2, .9, .2, 1) both;
    }

    .exchange-flight.add-moving {
      top: 430px;
      width: 132px;
      animation: slideAndCombineAddition 3000ms cubic-bezier(.2, .82, .2, 1) both;
    }

    .exchange-flight.add-arrive {
      top: 472px;
      animation: combineIntoCarry 3000ms cubic-bezier(.2, .9, .2, 1) both;
    }

    .exchange-flight .counter {
      width: 22px;
      height: 22px;
      font-size: 0.38rem;
    }

    .exchange-flight .unit-block {
      width: 20px;
      height: 20px;
    }

    .exchange-flight .ten-rod {
      width: 20px;
      height: 62px;
    }

    .exchange-flight .hundred-flat {
      width: 46px;
      height: 46px;
    }

    .exchange-flight .thousand-cube {
      width: 44px;
      height: 44px;
    }

    .exchange-note {
      display: none;
      min-height: 52px;
      margin: 0 12px 12px;
      padding: 10px 12px;
      border: 2px solid var(--line);
      border-radius: var(--radius);
      background: #ffffff;
      color: var(--ink);
      font-weight: 800;
      line-height: 1.3;
    }

    .exchange-note.good {
      border-color: #76b947;
      background: #eef9e8;
      color: #22510f;
    }

    .exchange-note.try {
      border-color: #f2b84b;
      background: #fff8e6;
      color: #6a4300;
    }

    .instructions-dialog {
      width: min(860px, calc(100vw - 32px));
      max-height: min(800px, calc(100vh - 32px));
      border: 0;
      border-radius: var(--radius);
      padding: 0;
      color: var(--ink);
      background: #ffffff;
      box-shadow: 0 24px 70px rgba(6, 17, 26, 0.28);
    }

    .instructions-dialog::backdrop { background: rgba(6, 17, 26, 0.5); }

    .instructions-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px;
      background: #071018;
      color: #ffffff;
    }

    .instructions-header h2 {
      margin: 0;
      font-size: 1.25rem;
      line-height: 1.15;
    }

    .instructions-body {
      max-height: calc(min(800px, 100vh - 32px) - 76px);
      overflow: auto;
      padding: 16px 18px 20px;
      line-height: 1.45;
    }

    .instructions-body h3 {
      margin: 16px 0 8px;
      font-size: 1.05rem;
    }

    .instructions-body h3:first-child { margin-top: 0; }
    .instructions-body p,
    .instructions-body ul,
    .instructions-body ol { margin: 0 0 10px; }
    .instructions-body li { margin-bottom: 6px; }

    @keyframes popIn {
      from { opacity: 0; transform: translateY(12px) scale(0.62); }
      to { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes takeAwayPiece {
      0% {
        opacity: 1;
        filter: none;
        transform: scale(1);
      }
      45% {
        opacity: 1;
        filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
        transform: scale(1.08);
      }
      100% {
        opacity: 0.24;
        filter: grayscale(0.55);
        transform: scale(0.9);
      }
    }

    @keyframes compareFlash {
      0%, 100% {
        filter: none;
        transform: scale(1);
      }
      50% {
        filter: drop-shadow(0 0 10px rgba(242, 184, 75, 1));
        transform: scale(1.08);
      }
    }

    @keyframes flyExchange {
      0% { opacity: 0; transform: translate(-50%, 10px) scale(0.7); }
      18% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      42% { opacity: 1; transform: translate(-50%, 0) scale(1.06); }
      82% { opacity: 1; transform: translate(calc(-50% + var(--exchange-x, -105%)), -40px) scale(0.82); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--exchange-x, -105%)), -40px) scale(0.74); }
    }

    @keyframes arriveExchange {
      0%, 46% { opacity: 0; transform: translate(-50%, -26px) scale(0.5); }
      70% { opacity: 1; transform: translate(-50%, -10px) scale(0.88); }
      88% { opacity: 1; transform: translate(-50%, 0) scale(1.1); }
      100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }

    @keyframes revealCarry {
      0%, 76% { opacity: 0; transform: scale(0.08); }
      88% { opacity: 1; transform: scale(1.12); }
      100% { opacity: 1; transform: translateY(0) scale(1); }
    }

    @keyframes moveAlgorithmCarry {
      0%, 18% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      100% {
        opacity: 1;
        transform: translate(var(--algorithm-x, -200%), 43px) scale(0.78);
      }
    }

    @keyframes slideSourceCounters {
      0%, 18% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      58% {
        opacity: 1;
        transform: translate(var(--exchange-x, -100cqw), 0) scale(1);
      }
      74% {
        opacity: 1;
        transform:
          translate(var(--exchange-x, -100cqw), var(--carry-y, 70px))
          translate(calc(var(--combine-x, 0px) * 0.55), calc(var(--combine-y, 0px) * 0.55))
          scale(0.64);
      }
      86% {
        opacity: 1;
        transform:
          translate(var(--exchange-x, -100cqw), var(--carry-y, 70px))
          translate(var(--combine-x, 0px), var(--combine-y, 0px))
          scale(0.28);
      }
      100% {
        opacity: 0;
        transform:
          translate(var(--exchange-x, -100cqw), var(--carry-y, 70px))
          translate(var(--combine-x, 0px), var(--combine-y, 0px))
          scale(0.08);
      }
    }

    @keyframes slideOnlyCounters {
      0%, 18% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
      }
      100% {
        opacity: 1;
        transform: translate(var(--exchange-x, -100cqw), 0) scale(1);
      }
    }

    @keyframes stackOnlyCounters {
      0%, 18% {
        opacity: 1;
        transform: translate(var(--exchange-x, -100cqw), 0) scale(1);
      }
      44% {
        opacity: 1;
        transform:
          translate(var(--exchange-x, -100cqw), var(--carry-y, 70px))
          translate(calc(var(--combine-x, 0px) * 0.45), calc(var(--combine-y, 0px) * 0.45))
          scale(0.72);
      }
      70% {
        opacity: 1;
        transform:
          translate(var(--exchange-x, -100cqw), var(--carry-y, 70px))
          translate(var(--combine-x, 0px), var(--combine-y, 0px))
          scale(0.3);
      }
      100% {
        opacity: 0;
        transform:
          translate(var(--exchange-x, -100cqw), var(--carry-y, 70px))
          translate(var(--combine-x, 0px), var(--combine-y, 0px))
          scale(0.08);
      }
    }

    @keyframes stackIntoExchange {
      0%, 18% {
        opacity: 1;
        transform: translate(calc(-50% + var(--start-x, 0px)), var(--start-y, 0px)) scale(1);
      }
      48% {
        opacity: 1;
        transform: translate(calc(-50% + var(--start-x, 0px) * 0.35), calc(var(--start-y, 0px) * 0.35)) scale(0.68);
      }
      76% {
        opacity: 1;
        transform: translate(-50%, 0) scale(0.32);
      }
      100% {
        opacity: 0;
        transform: translate(-50%, 0) scale(0.08);
      }
    }

    @keyframes moveThenStack {
      0%, 18% {
        opacity: 1;
        filter: none;
        outline-color: transparent;
        transform: translate(calc(-50% + var(--start-x, 0px)), calc(-50% + var(--start-y, 0px))) scale(1);
      }
      28% {
        opacity: 1;
        filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
        outline-color: #f2b84b;
        transform: translate(calc(-50% + var(--start-x, 0px)), calc(-50% + var(--start-y, 0px))) scale(1);
      }
      58% {
        opacity: 1;
        filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
        outline-color: #f2b84b;
        transform: translate(calc(-50% + var(--exchange-x, -100cqw) + var(--start-x, 0px)), calc(-50% + var(--start-y, 0px))) scale(1);
      }
      78% {
        opacity: 1;
        filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
        outline-color: #f2b84b;
        transform: translate(calc(-50% + var(--exchange-x, -100cqw)), -50%) scale(0.72);
      }
      92% {
        opacity: 1;
        filter: drop-shadow(0 0 7px rgba(242, 184, 75, 0.95));
        outline-color: #f2b84b;
        transform: translate(calc(-50% + var(--exchange-x, -100cqw)), -50%) scale(0.32);
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--exchange-x, -100cqw)), -50%) scale(0.08);
      }
    }

    @keyframes moveBorrowCounter {
      0%, 20% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
      58% {
        opacity: 1;
        transform: translate(calc(-50% + var(--exchange-x, 100cqw)), -50%) scale(1);
      }
      76% {
        opacity: 1;
        transform: translate(calc(-50% + var(--exchange-x, 100cqw)), -50%) scale(0.28);
      }
      100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--exchange-x, 100cqw)), -50%) scale(0.08);
      }
    }

    @keyframes moveBorrowIntoColumn {
      0%, 20% {
        opacity: 1;
        transform: translate(calc(-50% + var(--exchange-x, -100cqw)), -50%) scale(1);
      }
      82%, 100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }
    }

    @keyframes splitBorrowStack {
      0%, 14% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.08);
      }
      30% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.28);
      }
      48% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.72);
      }
      100% {
        opacity: 1;
        transform: translate(calc(-50% + var(--end-x, 0px)), calc(-50% + var(--end-y, 0px))) scale(1);
      }
    }

    @keyframes slideAndCombineAddition {
      0% { opacity: 0; transform: translate(-50%, 0) scale(0.78); }
      12% { opacity: 1; transform: translate(-50%, 0) scale(1); }
      34% { opacity: 1; transform: translate(-50%, 0) scale(1.05); }
      68% { opacity: 1; transform: translate(calc(-50% + var(--exchange-x, -105%)), 0) scale(1); }
      86% { opacity: 1; transform: translate(calc(-50% + var(--exchange-x, -105%)), 12px) scale(0.38); }
      100% { opacity: 0; transform: translate(calc(-50% + var(--exchange-x, -105%)), 18px) scale(0.16); }
    }

    @keyframes combineIntoCarry {
      0%, 72% { opacity: 0; transform: translate(-50%, -6px) scale(0.35); }
      86% { opacity: 1; transform: translate(-50%, 0) scale(1.18); }
      100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
    }

    @media (max-width: 980px) {
      body { overflow: auto; }
      .app { height: auto; min-height: 100vh; }
      .topbar,
      .setup-panel,
      .work-grid { grid-template-columns: 1fr; }
      .top-actions { justify-content: start; }
      .number-entry { grid-template-columns: 1fr; }
      .stage { min-width: 980px; }
    }

    @media print {
      @page { size: landscape; margin: 10mm; }

      html,
      body {
        min-height: auto;
        overflow: visible;
        background: #ffffff;
      }

      .app {
        display: block;
        height: auto;
        min-width: 0;
      }

      .topbar {
        display: block;
        padding: 0 0 10px;
        background: #ffffff;
        color: var(--ink);
      }

      .brand img { width: 145px; }
.top-actions,
      .toolbar,
      .setup-panel,
      .instructions-dialog { display: none; }

      .workspace {
        overflow: visible;
        padding: 0;
        background: #ffffff;
      }

      .stage {
        width: 100%;
        min-width: 0;
        transform: none;
      }

      .work-grid {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
      }

      .calculation-panel,
      .model-panel {
        box-shadow: none;
        page-break-inside: avoid;
      }

      .pv-chart {
        min-width: 0;
      }

      .pv-chart th { height: 34px; font-size: 8pt; }
      .pv-chart td { height: 38px; font-size: 18pt; }
      .model-chart { min-width: 0; }
      .model-column { min-height: 260px; }
      .model-lane { min-height: 220px; }
      .model-group { min-height: 44px; }
      .counter { width: 18px; height: 18px; font-size: 0.45rem; }
      .unit-block { width: 14px; height: 14px; }
      .ten-rod { width: 14px; height: 45px; }
      .hundred-flat { width: 34px; height: 34px; }
      .thousand-cube { width: 36px; height: 36px; box-shadow: 4px 4px 0 rgba(123, 63, 22, 0.22); }
    }