:root {
      --scale: 1;
      --column-size: 1.35;
      --column-scale: calc(var(--scale) * var(--column-size));
      --block-gap: calc(2px * var(--column-scale));
      --group-gap: calc(2px * var(--column-scale));
      --block-h: calc(18px * var(--column-scale));
      --column-pad: calc(6px * var(--column-scale));
      --column-w: calc(34px * var(--column-scale) + 2 * var(--column-pad) + 4px);
      --place-label-h: 5rem;
      --place-label-gap: 0.85rem;
      --place-label-font-size: calc(0.85rem * var(--column-scale));
      --place-digit-h: 1.25rem;
      --operand-foot: calc(
        (var(--place-label-h) + var(--place-label-gap) + var(--place-digit-h) + var(--place-label-gap)) * var(--column-scale)
      );
      --radix-slots: 9;
      --radix-slot-gaps: 8;
      --radix-group-gaps: 2;
      --column-body-h: calc(
        var(--radix-slots) * var(--block-h)
        + var(--radix-slot-gaps) * var(--block-gap)
        + var(--radix-group-gaps) * var(--group-gap)
        + 2 * var(--column-pad)
      );
      --carry-slot-h: calc(var(--block-h) + var(--block-gap));
      --sum-column-body-h: calc(var(--column-body-h) + var(--carry-slot-h));
      --overflow-block-scale: 0.5;
      --overflow-cap: 10;
      --overflow-stack-h: calc(
        (var(--overflow-cap) * var(--block-h)
          + (var(--overflow-cap) - 1) * var(--block-gap)
          + 4 * var(--group-gap))
        * var(--overflow-block-scale)
      );
      --column-shell-h: calc(var(--overflow-stack-h) + var(--block-gap) + var(--column-body-h));
      --sum-column-shell-h: calc(var(--overflow-stack-h) + var(--block-gap) + var(--sum-column-body-h));
      --place-name-lift: 40px;
      --place-words-lift: 12px;
      --place-words-bottom: calc(var(--operand-foot) + var(--sum-column-body-h) + var(--block-gap) + var(--place-words-lift));
      --equation-min-h: calc(var(--operand-foot) + var(--sum-column-shell-h));
      --triplet-h: calc(3 * var(--block-h) + 2 * var(--block-gap));
      --middle-group-center: calc(
        var(--column-pad) + var(--group-gap) + var(--triplet-h) / 2
      );
      --bg: #0f1419;
      --surface: #1a2332;
      --surface-2: #243044;
      --border: #2d3f56;
      --text: #e8edf4;
      --muted: #8b9cb3;
      --accent: #4ecdc4;
      --accent-dim: #2a8a84;
      --block-a: #5b8def;
      --block-a-edge: #3d6fc9;
      --block-b: #f4a261;
      --block-b-edge: #d4823f;
      --block-sum: #7dd87d;
      --block-sum-edge: #4fb84f;
      --block-carry: #e9c46a;
      --block-carry-edge: #c9a43a;
      --text-a: #9ec0f5;
      --text-b: #f7c59b;
      --text-sum: #a8e6a8;
      --empty: #1e2a3a;
      --slot: #151d28;
      --shadow: rgba(0, 0, 0, 0.45);
      --stage-panel-border: #3d5672;
      --stage-panel-border-glow: rgba(78, 205, 196, 0.22);
      --glow: rgba(78, 205, 196, 0.35);
      --magnitude-keep: 100%;
    }

    * { box-sizing: border-box; margin: 0; padding: 0; }

    html, body {
      height: 100%;
      height: 100dvh;
      overflow: hidden;
      overscroll-behavior: none;
    }

    @media (hover: none) and (pointer: coarse) {
      html, body {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
        overscroll-behavior: auto;
        -webkit-overflow-scrolling: touch;
        touch-action: auto;
      }
    }

    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      color-scheme: dark;
      background-color: #0f1419;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: #0f1419;
      background-image:
        radial-gradient(ellipse 80% 60% at 50% -10%, #1a2a40 0%, transparent 60%);
      color: var(--text);
      font-family: var(--font-family);
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      -webkit-tap-highlight-color: transparent;
    }


    .app {
      flex: 1 1 auto;
      min-height: 0;
      max-height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: calc(0.75rem * var(--scale));
      padding:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
      box-sizing: border-box;
      overflow: hidden;
    }

    @media (hover: none) and (pointer: coarse) {
      .app {
        max-height: none;
        min-height: 100dvh;
        overflow: visible;
      }

      .stage {
        overflow: visible;
      }

      .equation {
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
      }
    }

    .activity-header {
      display: flex;
      align-items: center;
      gap: calc(0.75rem * var(--scale));
      flex-shrink: 0;
    }

    .activity-home {
      flex-shrink: 0;
      font-size: calc(0.85rem * var(--scale));
      font-weight: 600;
      color: var(--muted);
      text-decoration: none;
      transition: color 0.15s;
    }

    .activity-home:hover {
      color: var(--accent);
    }

    .activity-title {
      font-size: calc(1.05rem * var(--scale));
      font-weight: 700;
      color: var(--text);
      letter-spacing: 0.02em;
    }

    .stage {
      position: relative;
      flex: 1;
      width: 100%;
      min-height: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: calc(16px * var(--scale));
      padding: calc(1.75rem * var(--scale)) calc(1.25rem * var(--scale)) calc(2.25rem * var(--scale));
      box-shadow: 0 12px 40px var(--shadow);
      overflow: hidden;
      --stacked-op-scale: 1.5;
      --notation-sign-width: 1.15em;
      --notation-carry-scale: 0.72;
      --notation-col-width: 1.12ch;
      --notation-comma-width: 0.38ch;
      --notation-pad-left: calc(0.65rem * var(--scale));
      --notation-pad-right: calc(1.25rem * var(--scale));
      --notation-num-pad-right: calc(0.45rem * var(--scale));
      --notation-row-height: calc(0.92rem * var(--stacked-op-scale) * var(--scale) * 1.35);
    }

    .stage-flight-layer {
      position: absolute;
      inset: 0;
      z-index: 100;
      pointer-events: none;
      overflow: hidden;
    }

    .stacked-op {
      position: absolute;
      top: calc(0.65rem * var(--scale));
      right: calc(0.65rem * var(--scale));
      z-index: 200;
      user-select: none;
      font-size: calc(0.92rem * var(--stacked-op-scale) * var(--scale));
      font-weight: 600;
      font-variant-numeric: tabular-nums;
      color: var(--text);
      line-height: 1.35;
      padding: calc(0.55rem * var(--scale)) var(--notation-pad-right) calc(0.55rem * var(--scale)) var(--notation-pad-left);
      border-radius: calc(10px * var(--scale));
      background: var(--surface-2);
      border: 2px solid var(--stage-panel-border);
      box-shadow:
        0 0 0 1px var(--stage-panel-border-glow),
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        0 4px 18px rgba(0, 0, 0, 0.38);
      box-sizing: border-box;
      cursor: grab;
      touch-action: none;
    }

    .stacked-op.is-dragging {
      cursor: grabbing;
      z-index: 201;
      border-color: var(--accent-dim);
      box-shadow:
        0 0 0 1px rgba(78, 205, 196, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 10px 28px rgba(0, 0, 0, 0.48);
    }

    .stacked-op.stage-panel-minimized {
      width: auto !important;
      min-width: 0;
      padding: calc(0.35rem * var(--scale)) calc(0.55rem * var(--scale));
      overflow: hidden;
    }

    .stacked-op.stage-panel-minimized > * {
      display: none;
    }

    .stacked-op.stage-panel-minimized::after {
      content: attr(data-panel-title);
      display: block;
      font-size: calc(0.62rem * var(--scale));
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      white-space: nowrap;
      line-height: 1;
    }

    .stacked-op-row {
      display: grid;
      grid-template-columns: var(--notation-sign-width) 1fr;
      align-items: center;
      column-gap: calc(0.15rem * var(--stacked-op-scale) * var(--scale));
      min-height: var(--notation-row-height);
    }

    .stacked-op-sign {
      text-align: center;
      color: var(--muted);
      font-weight: 400;
    }

    .stacked-op-sign:empty {
      visibility: hidden;
    }

    .stacked-op-num {
      text-align: right;
      white-space: nowrap;
      letter-spacing: 0.04ch;
      padding-right: var(--notation-num-pad-right);
    }

    .stacked-op.stacked-op-narrow .stacked-op-num {
      width: 100%;
    }

    .stacked-op-ghost {
      opacity: 0.28;
    }

    #stackedOpA .stacked-op-num { color: var(--text-a); }
    #stackedOpB .stacked-op-num { color: var(--text-b); }
    #stackedOpSum .stacked-op-num { color: var(--text-sum); }
    .stacked-op-row.stacked-op-carry {
      min-height: calc(var(--notation-row-height) * var(--notation-carry-scale));
    }

    .stacked-op-col {
      display: inline-block;
      width: var(--notation-col-width);
      text-align: right;
      vertical-align: baseline;
    }

    .stacked-op-comma {
      display: inline-block;
      width: var(--notation-comma-width);
      text-align: center;
    }

    .stacked-op-carry-digit {
      font-size: calc(0.92rem * var(--stacked-op-scale) * var(--notation-carry-scale) * var(--scale));
      color: var(--block-carry);
    }

    .stacked-op-carry-empty {
      opacity: 0;
    }

    .stacked-op-line {
      height: calc(2px * var(--stacked-op-scale));
      margin: calc(0.28rem * var(--stacked-op-scale) * var(--scale)) 0;
      margin-left: var(--notation-sign-width);
      width: calc(100% - var(--notation-sign-width));
      background: var(--text);
      opacity: 0.9;
    }

    .stacked-op-sum.hidden,
    .stacked-op-carry.hidden {
      visibility: hidden;
    }

    .equation {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      justify-content: center;
      gap: calc(0.85rem * var(--column-scale));
      flex: 0 0 auto;
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding: 0.25rem 0;
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -ms-overflow-style: none;
      position: relative;
    }

    .equation::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
    }

    .equation.is-scrollable {
      justify-content: flex-start;
    }

    .equation.merging { pointer-events: none; }

    .operand {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex-shrink: 0;
    }

    .places > .operand-words-layer {
      position: absolute;
      left: 0;
      right: 0;
      bottom: var(--place-words-bottom);
      pointer-events: none;
      user-select: none;
      z-index: 6;
      height: 0;
    }

    .operand-word-chunk {
      position: absolute;
      top: 0;
      font-size: var(--place-label-font-size);
      font-weight: 600;
      text-align: center;
      line-height: 1.2;
      text-transform: lowercase;
      padding: 0 calc(0.15rem * var(--column-scale));
      transform: translateY(-100%);
      white-space: normal;
      word-break: break-word;
    }

    #operandA .operand-word-chunk { color: var(--text-a); }
    #operandB .operand-word-chunk { color: var(--text-b); }
    #operandS .operand-word-chunk { color: var(--text-sum); }

    .operand-word-connectors {
      position: absolute;
      left: 0;
      right: 0;
      bottom: var(--place-words-bottom);
      height: 0;
      pointer-events: none;
      user-select: none;
      z-index: 3;
    }

    .operand-word-connector {
      position: absolute;
      top: 0;
      font-size: var(--place-label-font-size);
      font-weight: 600;
      text-transform: lowercase;
      color: var(--muted);
      line-height: 1.2;
      white-space: nowrap;
      transform: translate(-50%, -100%);
    }

    .places {
      display: flex;
      flex-direction: row;
      align-items: flex-end;
      gap: calc(0.45rem * var(--column-scale));
      position: relative;
      overflow: visible;
    }

    .place-wrap.comma-after {
      margin-right: calc(0.75rem * var(--column-scale));
    }

    .place-wrap.comma-after::after {
      content: ',';
      position: absolute;
      right: calc(-0.58rem * var(--column-scale));
      bottom: calc(
        (var(--place-label-h) + var(--place-label-gap)) * var(--column-scale)
      );
      transform: none;
      font-size: calc(1rem * var(--column-scale));
      font-weight: 700;
      color: var(--accent);
      line-height: 1;
      pointer-events: none;
    }

    .place-wrap.after-comma {
      margin-left: calc(0.45rem * var(--column-scale));
    }

    .op-sign {
      font-size: calc(1.75rem * var(--column-scale));
      font-weight: 300;
      color: var(--muted);
      flex-shrink: 0;
      align-self: flex-end;
      margin-bottom: calc(
        var(--operand-foot) + var(--middle-group-center) - (1.75rem * var(--column-scale)) / 2
      );
      user-select: none;
      line-height: 5.55;
    }

    .op-sign.op-equals {
      font-family: inherit;
      background: none;
      border: none;
      padding: calc(0.15rem * var(--column-scale)) calc(0.35rem * var(--column-scale));
      border-radius: calc(6px * var(--column-scale));
      cursor: pointer;
      transition: color 0.15s, background 0.15s, transform 0.1s;
    }

    .op-sign.op-equals:hover:not(:disabled) {
      color: var(--accent);
      background: rgba(78, 205, 196, 0.1);
    }

    .op-sign.op-equals:active:not(:disabled) {
      transform: scale(0.95);
    }

    .op-sign.op-equals:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .place-wrap {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: calc(var(--place-label-gap) * var(--column-scale));
      position: relative;
      flex-shrink: 0;
      width: var(--column-w);
      --magnitude-keep: 100%;
    }

    .place-wrap.hidden { display: none; }

    .place-wrap.ghost .place-digit {
      opacity: 0;
    }

    .places > .operand-words-layer.ghost-hidden {
      opacity: 0;
    }

    .place-wrap.ghost .column {
      border-style: dashed;
      border-color: #3a4f6a;
      background: rgba(21, 29, 40, 0.35);
    }

    .place-wrap.ghost .block.empty {
      background: rgba(30, 42, 58, 0.45);
      border-color: #2d3f56;
    }

    .place-wrap.ghost.ghost-dimmed {
      opacity: 0.06;
      pointer-events: none;
      transition: opacity 0.25s ease;
    }

    .column-shell {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      min-height: var(--column-shell-h);
      overflow: visible;
    }

    .place-wrap.place-sum .column-shell {
      min-height: var(--sum-column-shell-h);
    }

    .carry-slot {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin-bottom: var(--block-gap);
      flex-shrink: 0;
    }

    .carry-slot-block {
      width: calc(34px * var(--column-scale));
      height: calc(18px * var(--column-scale));
      border-radius: calc(8px * var(--column-scale));
      border: 2px solid var(--border);
      background: var(--slot);
      box-sizing: border-box;
      flex-shrink: 0;
      position: relative;
      transition: border-color 0.3s, box-shadow 0.3s, background 0.3s;
    }

    .carry-slot-block.empty {
      cursor: default;
      pointer-events: none;
    }

    .carry-slot-block.empty.solve-carry-target,


    .carry-slot-block.filled {
      border-color: var(--block-carry-edge);
      box-shadow: 0 0 10px rgba(233, 196, 106, 0.35);
    }

    .carry-slot-block.filled.outgoing {
      animation: overflow-wobble 0.5s ease-in-out infinite alternate;
    }

    .overflow-zone {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-end;
      min-height: var(--overflow-stack-h);
      width: 100%;
      margin-bottom: var(--block-gap);
      flex-shrink: 0;
      overflow: visible;
    }

    .overflow-count-mark {
      position: absolute;
      top: calc(var(--overflow-stack-h) + var(--block-gap));
      left: 50%;
      transform: translate(calc(-50% + 40px), calc(-50% - 15px));
      font-size: calc(0.55rem * var(--column-scale));
      font-weight: 700;
      color: var(--block-carry);
      opacity: 0;
      transition: opacity 0.3s;
      pointer-events: none;
      user-select: none;
      line-height: 1;
      white-space: nowrap;
    }

    .overflow-count-mark.visible {
      opacity: 1;
    }

    .overflow-stack {
      display: flex;
      flex-direction: column-reverse;
      align-items: center;
      justify-content: flex-start;
      gap: calc(var(--block-gap) * var(--overflow-block-scale));
      width: 100%;
      flex-shrink: 0;
      overflow: visible;
    }

    .overflow-stack .block {
      width: calc(34px * var(--column-scale) * var(--overflow-block-scale));
      height: calc(18px * var(--column-scale) * var(--overflow-block-scale));
      border-radius: calc(4px * var(--column-scale) * var(--overflow-block-scale));
    }

    .overflow-stack .block-group-gap {
      height: calc(var(--group-gap) * var(--overflow-block-scale));
    }

    .column {
      display: flex;
      flex-direction: column-reverse;
      gap: var(--block-gap);
      padding: var(--column-pad);
      background: var(--slot);
      border: 2px solid var(--border);
      border-radius: calc(8px * var(--column-scale));
      position: relative;
      transition: border-color 0.3s, box-shadow 0.3s;
    }

    .block-group-gap {
      flex-shrink: 0;
      height: var(--group-gap);
      width: 100%;
      pointer-events: none;
    }

    .column.overflowing {
      border-color: var(--block-carry);
      box-shadow: 0 0 16px rgba(233, 196, 106, 0.35);
    }

    .block.overflow {
      animation: overflow-wobble 0.5s ease-in-out infinite alternate;
      box-shadow: 0 0 10px rgba(233, 196, 106, 0.5);
    }

    @keyframes overflow-wobble {
      from { transform: translateY(0) rotate(-1deg); }
      to   { transform: translateY(-3px) rotate(1deg); }
    }

    .place-name-slot {
      width: 100%;
      height: calc(var(--place-label-h) * var(--column-scale));
      position: relative;
      overflow: visible;
      flex-shrink: 0;
      z-index: 5;
    }

    .place-name {
      position: absolute;
      left: 50%;
      top: calc(0.65rem * var(--column-scale) - var(--place-name-lift));
      font-size: var(--place-label-font-size);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      color: var(--muted);
      font-weight: 600;
      white-space: nowrap;
      line-height: 1.2;
      transform: rotate(52deg);
      transform-origin: left top;
      pointer-events: none;
      z-index: 1;
    }

    .place-wrap.ghost .place-name {
      color: rgba(58, 79, 106, 0.35);
      -webkit-text-stroke: 0.6px rgba(58, 79, 106, 0.65);
      paint-order: stroke fill;
      font-weight: 500;
      letter-spacing: 0.06em;
    }

    .place-digit {
      font-size: calc(1rem * var(--column-scale));
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      min-height: calc(var(--place-digit-h) * var(--column-scale));
      line-height: 1;
      color: var(--muted);
      flex-shrink: 0;
    }

    .place-wrap.place-a .place-digit { color: var(--text-a); }
    .place-wrap.place-b .place-digit { color: var(--text-b); }
    .place-wrap.place-sum .place-digit { color: var(--text-sum); }

    .column.carrying::after {
      content: "";
      position: absolute;
      inset: -2px;
      border-radius: calc(10px * var(--column-scale));
      border: 2px solid var(--block-carry);
      animation: carry-flash 0.6s ease;
      pointer-events: none;
    }

    @keyframes carry-flash {
      0%, 100% { opacity: 0; }
      50% { opacity: 1; box-shadow: 0 0 14px rgba(233, 196, 106, 0.5); }
    }

    .block {
      width: calc(34px * var(--column-scale));
      height: calc(18px * var(--column-scale));
      border-radius: calc(4px * var(--column-scale));
      cursor: pointer;
      transition: background 0.15s, transform 0.2s, box-shadow 0.2s;
      flex-shrink: 0;
      position: relative;
    }

    .block.empty {
      background: var(--empty);
      border: 1px solid #253040;
    }

    .operand-interactive .block.empty:hover {
      background: #253040;
      border-color: var(--accent-dim);
    }

    .operand-interactive .block:hover::after {
      content: attr(data-label);
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: calc(0.55rem * var(--column-scale));
      font-weight: 700;
      color: rgba(255, 255, 255, 0.9);
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
      pointer-events: none;
    }

    @media (hover: none) {
      .operand-interactive .block:hover::after {
        content: none;
      }
    }

    .operand-sum .block {
      cursor: default;
    }

    .operand-sum .block.empty:hover {
      background: var(--empty);
      border-color: #253040;
    }

    .operand-sum .block.filled:hover {
      transform: none;
    }

    .block.filled {
      border: 1px solid transparent;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.18),
        inset 0 -1px 0 rgba(0,0,0,0.15),
        0 1px 3px var(--shadow);
      transition: background 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
    }

    .block.filled.a {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--block-a) var(--magnitude-keep), black) 0%,
        color-mix(in srgb, var(--block-a-edge) var(--magnitude-keep), black) 100%
      );
    }

    .block.filled.b {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--block-b) var(--magnitude-keep), black) 0%,
        color-mix(in srgb, var(--block-b-edge) var(--magnitude-keep), black) 100%
      );
    }

    .block.filled.sum {
      background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--block-sum) var(--magnitude-keep), black) 0%,
        color-mix(in srgb, var(--block-sum-edge) var(--magnitude-keep), black) 100%
      );
    }

    .block.filled.carry {
      background: linear-gradient(180deg, var(--block-carry) 0%, var(--block-carry-edge) 100%);
    }

    .operand-interactive .block.filled:hover:not(.no-hover) { transform: scale(1.05); }

    .block.flying {
      position: absolute;
      z-index: 1;
      pointer-events: none;
      opacity: 1;
      transition: none;
    }

    .block.flying.fall {
      transition: none;
    }

    .result-footer {
      position: relative;
      z-index: 150;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: calc(0.6rem * var(--scale));
      flex: 0 0 auto;
      flex-shrink: 0;
      width: 100%;
    }

    .result-banner {
      flex: 1;
      min-width: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: calc(0.55rem * var(--scale));
      text-align: center;
      padding: calc(0.75rem * var(--scale)) calc(1.25rem * var(--scale));
      border-radius: calc(10px * var(--scale));
      background: var(--surface-2);
      border: 1px solid var(--border);
      font-size: calc(1.05rem * var(--scale));
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s;
    }

    .result-banner:hover {
      border-color: var(--accent-dim);
      background: #2a3a50;
    }

    .result-banner.is-paused,
    .result-banner.is-step-waiting {
      border-color: var(--accent-dim);
    }

    .banner-control-icon {
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      width: calc(1.15rem * var(--scale));
      height: calc(1.15rem * var(--scale));
      color: var(--accent);
    }

    .banner-control-icon svg {
      width: 100%;
      height: 100%;
    }

    .result-banner strong {
      color: var(--muted);
      font-weight: 700;
      font-size: calc(1.35rem * var(--scale));
      font-variant-numeric: tabular-nums;
    }

    .result-banner .banner-a { color: var(--text-a); }
    .result-banner .banner-b { color: var(--text-b); }
    .result-banner .banner-sum { color: var(--text-sum); }

    .result-banner .banner-radix {
      font-size: 0.62em;
      font-weight: 600;
      margin-left: 0.06em;
      opacity: 0.72;
      vertical-align: baseline;
      position: relative;
      top: 0.2em;
    }

    .result-footer-btn {
      position: relative;
      flex-shrink: 0;
      width: calc(2.85rem * var(--scale));
      height: calc(2.85rem * var(--scale));
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      border-radius: calc(10px * var(--scale));
      background: var(--surface-2);
      border: 1px solid var(--border);
      color: var(--muted);
      font-family: inherit;
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
    }

    .result-footer-btn::before,
    .result-footer-btn::after {
      position: absolute;
      left: 50%;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.15s ease, transform 0.15s ease;
      z-index: 300;
    }

    .result-footer-btn::after {
      content: attr(aria-label);
      bottom: calc(100% + 0.55rem * var(--scale));
      transform: translateX(-50%) translateY(4px);
      padding: calc(0.35rem * var(--scale)) calc(0.55rem * var(--scale));
      border-radius: calc(6px * var(--scale));
      background: var(--surface);
      border: 1px solid var(--border);
      color: var(--text);
      font-size: calc(0.72rem * var(--scale));
      font-weight: 600;
      line-height: 1.25;
      white-space: nowrap;
      box-shadow: 0 4px 12px var(--shadow);
    }

    .result-footer-btn::before {
      content: '';
      bottom: calc(100% + 0.2rem * var(--scale));
      transform: translateX(-50%) translateY(4px);
      border: calc(5px * var(--scale)) solid transparent;
      border-top-color: var(--border);
    }

    .result-footer-btn:hover::before,
    .result-footer-btn:hover::after,
    .result-footer-btn:focus-visible::before,
    .result-footer-btn:focus-visible::after {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }

    .result-footer-btn svg {
      width: calc(1.2rem * var(--scale));
      height: calc(1.2rem * var(--scale));
      display: block;
    }

    .result-footer-btn:hover:not(:disabled) {
      border-color: var(--accent-dim);
      background: #2a3a50;
      color: var(--text);
    }

    .result-footer-btn:active:not(:disabled) {
      transform: scale(0.97);
    }

    .result-footer-btn:disabled {
      opacity: 0.4;
      cursor: not-allowed;
    }

    .result-footer-btn.is-active {
      border-color: var(--accent-dim);
      color: var(--accent);
      background: #2a3a50;
    }

    .footer-options {
      position: relative;
      flex-shrink: 0;
    }

    .footer-options.is-open .result-footer-btn#btnFooterOptions {
      border-color: var(--accent-dim);
      color: var(--accent);
      background: #2a3a50;
    }

    .footer-options-panel {
      position: absolute;
      bottom: calc(100% + 0.45rem * var(--scale));
      left: 0;
      z-index: 400;
      display: flex;
      flex-direction: column;
      gap: calc(0.45rem * var(--scale));
      min-width: calc(11.5rem * var(--scale));
      padding: calc(0.55rem * var(--scale));
      border-radius: calc(10px * var(--scale));
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: 0 10px 28px var(--shadow);
    }

    .footer-options-panel[hidden] {
      display: none !important;
    }

    .footer-options-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: calc(0.55rem * var(--scale));
    }

    .footer-options-label {
      font-size: calc(0.72rem * var(--scale));
      font-weight: 600;
      color: var(--text);
      line-height: 1.2;
    }

    .result-footer-btn--compact {
      width: calc(2.35rem * var(--scale));
      height: calc(2.35rem * var(--scale));
      min-width: calc(2.35rem * var(--scale));
      min-height: calc(2.35rem * var(--scale));
    }

    .footer-options-panel .result-footer-btn::before,
    .footer-options-panel .result-footer-btn::after {
      display: none;
    }

    .footer-options-panel .base-control,
    .footer-options-panel .speed-control {
      width: 100%;
      flex: 1 1 auto;
      min-width: 0;
    }

    .speed-control {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: calc(0.2rem * var(--scale));
      width: calc(6.5rem * var(--scale));
      padding: calc(0.45rem * var(--scale)) calc(0.55rem * var(--scale));
      border-radius: calc(10px * var(--scale));
      background: var(--surface-2);
      border: 1px solid var(--border);
      box-sizing: border-box;
      isolation: isolate;
    }

    .speed-control-label {
      display: flex;
      flex-direction: column;
      gap: calc(0.2rem * var(--scale));
      cursor: pointer;
      user-select: none;
    }

    .speed-control-top {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: calc(0.35rem * var(--scale));
      margin-bottom: calc(0.15rem * var(--scale));
      background: var(--surface-2);
    }

    .speed-label {
      font-size: calc(0.62rem * var(--scale));
      font-weight: 600;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      line-height: 1;
    }

    .speed-value {
      font-size: calc(0.68rem * var(--scale));
      font-weight: 700;
      color: var(--text);
      font-variant-numeric: tabular-nums;
      line-height: 1;
    }

    .speed-control input[type="range"] {
      position: relative;
      z-index: 1;
      display: block;
      width: 100%;
      margin: 0;
      accent-color: var(--accent);
      cursor: pointer;
    }

    .mode-control {
      flex-shrink: 0;
      display: flex;
      gap: calc(0.2rem * var(--scale));
      padding: calc(0.28rem * var(--scale));
      border-radius: calc(10px * var(--scale));
      background: var(--surface-2);
      border: 1px solid var(--border);
    }





    .app.mode-solve .result-footer .speed-control,
    .app.mode-solve .result-footer #btnToggleStep,
    .app.mode-solve .result-footer #btnToggleMovement,






    .place-wrap.place-sum .place-digit:empty::before,
    .place-wrap.place-sum .place-digit {
      font-variant-numeric: tabular-nums;
    }

    .block.block-selected {
      outline: calc(2px * var(--column-scale)) solid var(--accent);
      outline-offset: calc(-1px * var(--column-scale));
      z-index: 2;
    }








    .app.is-solve-dragging,











    .base-control {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: calc(4.75rem * var(--scale));
      padding: calc(0.45rem * var(--scale)) calc(0.55rem * var(--scale));
      border-radius: calc(10px * var(--scale));
      background: var(--surface-2);
      border: 1px solid var(--border);
      box-sizing: border-box;
    }

    .base-control-label {
      display: flex;
      flex-direction: column;
      gap: calc(0.2rem * var(--scale));
      cursor: pointer;
      user-select: none;
    }

    .base-control-top {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: calc(0.35rem * var(--scale));
    }

    .base-label,
    .base-value {
      font-size: calc(0.62rem * var(--scale));
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .base-value {
      color: var(--text);
      text-transform: none;
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
    }

    .base-control select {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: calc(6px * var(--scale));
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-size: calc(0.75rem * var(--scale));
      padding: calc(0.15rem * var(--scale)) calc(0.25rem * var(--scale));
    }

    .result-footer-btn.is-disabled {
      opacity: 0.35;
      pointer-events: none;
    }

    .app.letters-hidden .operand-word-chunk,
    .app.letters-hidden .operand-word-connector,
    .app.letters-hidden .place-name {
      visibility: hidden;
    }

    .operand-word-connectors.is-hidden {
      display: none;
    }

    /* --- Responsive layout (auto-detected via layout-compact / layout-narrow classes) --- */

    html.layout-compact {
      --place-name-lift: 24px;
      --place-label-h: 2.35rem;
      --place-label-gap: 0.5rem;
    }

    html.layout-narrow {
      --place-name-lift: 18px;
      --place-label-h: 1.65rem;
      --place-label-gap: 0.35rem;
    }

    html.layout-narrow .app {
      padding:
        max(6px, env(safe-area-inset-top))
        max(6px, env(safe-area-inset-right))
        max(6px, env(safe-area-inset-bottom))
        max(6px, env(safe-area-inset-left));
    }

    * {
      scrollbar-width: none;
      -ms-overflow-style: none;
    }

    *::-webkit-scrollbar {
      display: none;
      width: 0;
      height: 0;
      background: transparent;
    }

    html.layout-compact .app {
      gap: calc(0.45rem * var(--scale));
    }

    html.layout-compact .activity-header {
      gap: calc(0.35rem * var(--scale));
      min-height: 0;
    }

    html.layout-compact .activity-title {
      font-size: calc(0.88rem * var(--scale));
      line-height: 1.1;
    }

    html.layout-narrow .activity-title {
      font-size: calc(0.8rem * var(--scale));
    }

    html.layout-compact .stage {
      padding: calc(0.65rem * var(--scale)) calc(0.55rem * var(--scale)) calc(0.8rem * var(--scale));
      --stacked-op-scale: 1;
      border-radius: calc(10px * var(--scale));
    }

    html.layout-narrow .stage {
      padding: calc(0.5rem * var(--scale)) calc(0.4rem * var(--scale)) calc(0.65rem * var(--scale));
      --stacked-op-scale: 0.92;
    }

    html.layout-compact .stacked-op {
      top: calc(0.35rem * var(--scale));
      right: calc(0.35rem * var(--scale));
      font-size: calc(0.74rem * var(--stacked-op-scale) * var(--scale));
      padding: calc(0.3rem * var(--scale)) var(--notation-pad-right) calc(0.3rem * var(--scale)) var(--notation-pad-left);
    }

    html.layout-compact .place-name {
      font-size: calc(0.62rem * var(--column-scale));
      top: calc(0.35rem * var(--column-scale) - var(--place-name-lift));
    }

    html.layout-compact .operand-word-chunk,
    html.layout-compact .operand-word-connector {
      font-size: calc(0.72rem * var(--column-scale));
    }

    html.layout-compact .result-footer {
      flex-wrap: wrap;
      align-items: center;
      justify-content: center;
      gap: calc(0.35rem * var(--scale));
    }

    html.layout-compact .result-banner {
      order: -1;
      flex: 1 1 100%;
      width: 100%;
      min-height: calc(2.35rem * var(--scale));
      padding: calc(0.5rem * var(--scale)) calc(0.65rem * var(--scale));
      font-size: calc(0.82rem * var(--scale));
    }

    html.layout-compact .result-banner strong {
      font-size: calc(0.98rem * var(--scale));
    }

    html.layout-compact .result-footer-btn {
      width: calc(2.35rem * var(--scale));
      height: calc(2.35rem * var(--scale));
      min-width: 0;
      min-height: 0;
    }

    html.layout-compact .result-footer-btn svg {
      width: calc(1rem * var(--scale));
      height: calc(1rem * var(--scale));
    }

    html.layout-compact .footer-options-panel .base-control,
    html.layout-compact .footer-options-panel .speed-control {
      width: 100%;
      flex: 1 1 auto;
      min-width: 0;
    }

    html.layout-compact .base-control select,
    html.layout-compact .speed-control input[type="range"],
    html.layout-compact .footer-options-label {
      font-size: max(16px, calc(0.75rem * var(--scale)));
    }

    html.layout-narrow .footer-options-panel {
      min-width: min(100vw - 2rem, calc(12rem * var(--scale)));
      max-width: calc(100vw - 1.5rem);
    }

    html.layout-narrow .result-banner strong {
      font-size: calc(0.88rem * var(--scale));
    }

    html.layout-narrow .equation {
      gap: calc(0.4rem * var(--column-scale));
    }


    html.layout-compact .op-sign {
      font-size: calc(1.35rem * var(--column-scale));
      margin-bottom: calc(
        var(--operand-foot) + var(--middle-group-center) - (1.35rem * var(--column-scale)) / 2
      );
    }

    /* Phone landscape: horizontal labels, room for text, single-row footer */
    html.layout-phone.layout-landscape {
      --place-label-h: 0.95rem;
      --place-label-gap: 0.32rem;
      --place-name-lift: 0px;
      --place-words-lift: 10px;
      --place-label-font-size: calc(0.78rem * var(--column-scale));
    }

    html.layout-phone.layout-landscape .activity-header {
      display: none;
    }

    html.layout-phone.layout-landscape .stage {
      padding: calc(0.5rem * var(--scale)) calc(0.75rem * var(--scale)) calc(0.6rem * var(--scale));
    }

    html.layout-phone.layout-landscape .place-name-slot {
      height: calc(var(--place-label-h) * var(--column-scale));
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: visible;
    }

    html.layout-phone.layout-landscape .place-name {
      position: static;
      left: auto;
      top: auto;
      transform: none;
      transform-origin: center;
      width: 100%;
      text-align: center;
      font-size: calc(0.58rem * var(--column-scale));
      letter-spacing: 0.02em;
      line-height: 1;
    }

    html.layout-phone.layout-landscape .operand-word-chunk {
      white-space: nowrap;
      word-break: normal;
      overflow: visible;
      font-size: var(--place-label-font-size);
      padding: 0 calc(0.25rem * var(--column-scale));
    }

    html.layout-phone.layout-landscape .operand-word-connector {
      font-size: var(--place-label-font-size);
    }

    html.layout-phone.layout-landscape .place-digit {
      min-height: calc(1rem * var(--column-scale));
      font-size: calc(0.92rem * var(--column-scale));
    }

    html.layout-phone.layout-landscape .result-footer {
      flex-wrap: nowrap;
      align-items: center;
      gap: calc(0.3rem * var(--scale));
    }

    html.layout-phone.layout-landscape .result-banner {
      order: 0;
      flex: 1 1 auto;
      width: auto;
      min-width: 0;
      min-height: 0;
      padding: calc(0.4rem * var(--scale)) calc(0.55rem * var(--scale));
      font-size: calc(0.78rem * var(--scale));
    }

    html.layout-phone.layout-landscape .result-banner strong {
      font-size: calc(0.9rem * var(--scale));
    }

    html.layout-phone.layout-landscape .result-footer-btn {
      width: calc(2.1rem * var(--scale));
      height: calc(2.1rem * var(--scale));
    }

    html.layout-phone.layout-landscape .equation {
      gap: calc(0.4rem * var(--column-scale));
    }

    html.layout-phone.layout-landscape .op-sign {
      font-size: calc(1.15rem * var(--column-scale));
      margin-bottom: calc(
        var(--operand-foot) + var(--middle-group-center) - (1.15rem * var(--column-scale)) / 2
      );
    }

    @media (max-width: 719px) {
      .result-footer {
        flex-wrap: wrap;
        justify-content: center;
      }

      .result-banner {
        order: -1;
        flex: 1 1 100%;
        width: 100%;
      }

      .result-footer-btn {
        min-width: 0;
        min-height: 0;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      .block.flying {
        animation: none !important;
        transition: none !important;
      }
    }