.symbolic-addition-activity{gap:var(--space-xl);min-width:0;display:grid}.symbolic-addition-activity__header{justify-items:start;gap:var(--space-sm);max-width:46rem;display:grid}.symbolic-addition-activity h1{min-width:0;font-family:var(--font-display);font-size:clamp(var(--text-lg), 3vw + .75rem, var(--text-2xl));letter-spacing:-.025em;overflow-wrap:anywhere;margin:0;font-style:normal;font-weight:700;line-height:1.12}.symbolic-addition__equation{justify-content:center;align-items:center;gap:clamp(var(--space-xs), 3vw, var(--space-lg));min-width:0;padding-block:var(--space-lg);font-family:var(--font-display);font-size:clamp(var(--text-xl), 9vw, 4.5rem);font-variant-numeric:tabular-nums;flex-wrap:nowrap;font-weight:700;line-height:1;display:flex}.symbolic-addition__equation>span:not(.symbolic-addition__operator){aspect-ratio:1;border:var(--rule-frame) solid var(--color-group-a-deep);border-radius:var(--radius-control);background:var(--color-group-a);width:clamp(2.75rem,14vw,5rem);color:var(--color-paper);place-items:center;display:grid}.symbolic-addition__equation>span:nth-child(3){border-style:dashed;border-color:var(--color-group-b-deep);background:var(--color-group-b);color:var(--color-ink)}.symbolic-addition__operator{color:var(--color-frame)}.symbolic-addition__result{border-color:var(--color-success)!important;background:var(--color-success-surface)!important;color:var(--color-ink)!important}.symbolic-addition__result--empty{border-style:dashed!important;border-color:var(--color-rule)!important;background:var(--color-surface)!important;color:var(--color-muted)!important}.symbolic-addition__bridge{min-width:0;min-height:10.5rem;padding-block:var(--space-sm) var(--space-lg);position:relative}.symbolic-addition__bridge--compact{min-height:6.5rem;padding-block-start:0}.symbolic-addition__bridge-title{margin:0 0 var(--space-sm);font-weight:700}.symbolic-addition__bridge-track{height:var(--rule-frame);background:var(--color-frame);position:absolute;inset-block-start:6.25rem;inset-inline:0}.symbolic-addition__bridge--compact .symbolic-addition__bridge-track{inset-block-start:2.75rem}.symbolic-addition__bridge-ticks{grid-template-columns:repeat(11,minmax(0,1fr));min-width:0;margin:0;padding:0;list-style:none;display:grid;position:relative}.symbolic-addition__bridge-tick{align-content:end;justify-items:center;gap:var(--space-xs);min-width:0;min-height:7.5rem;font-size:var(--text-md);font-variant-numeric:tabular-nums;font-weight:700;display:grid;position:relative}.symbolic-addition__bridge--compact .symbolic-addition__bridge-tick{min-height:4.75rem;font-size:var(--text-sm)}.symbolic-addition__bridge-mark{width:var(--rule-thin);background:var(--color-frame);height:1.25rem;display:block}.symbolic-addition__bridge-tick--landmark .symbolic-addition__bridge-mark{width:var(--rule-frame);height:1.75rem}.symbolic-addition__bridge-marker{z-index:3;max-width:5.25rem;padding:var(--space-2xs) var(--space-xs);border:var(--rule-thin) solid var(--color-group-a-deep);border-radius:var(--radius-control);background:var(--color-group-a);color:var(--color-paper);font-size:var(--text-sm);text-align:center;font-weight:700;line-height:1.1;position:absolute;inset-block-start:0}.symbolic-addition__bridge-marker--landing{border-color:var(--color-group-b-deep);background:var(--color-group-b);color:var(--color-ink);border-style:dashed;inset-block-start:2rem}.symbolic-addition__bridge-jumps{pointer-events:none;position:absolute;inset:0}.symbolic-addition__bridge-jump{width:var(--jump-width);border-block-start:var(--rule-frame) solid var(--color-group-a-deep);border-inline-end:var(--rule-frame) solid var(--color-group-a-deep);height:1.5rem;animation:symbolic-jump-arrive var(--dur-short) var(--ease-out) both;border-radius:0 1.5rem 0 0;position:absolute;inset-block-start:3.75rem;inset-inline-start:var(--jump-left);transform:translate(50%)}.symbolic-addition__bridge--compact .symbolic-addition__bridge-jump{inset-block-start:.75rem}.symbolic-addition__bridge-jump:after{border-block:.3rem solid #0000;border-inline-start:.5rem solid var(--color-group-a-deep);content:"";width:0;height:0;position:absolute;inset-block-end:-.15rem;inset-inline-end:-.35rem}.symbolic-addition__bridge-jump>span{color:var(--color-group-a-deep);font-weight:700;position:absolute;inset-block-start:-1.5rem;inset-inline:50%;transform:translate(-50%)}.symbolic-addition__answer-area,.symbolic-addition__hint-area{justify-items:start;gap:var(--space-sm);display:grid}.symbolic-addition__answer-choices{border:0;min-width:0;padding:0}.symbolic-addition__answer-choices legend{margin-block-end:var(--space-sm);padding:0;font-weight:700}.symbolic-addition__answer-grid{gap:var(--space-xs);grid-template-columns:repeat(auto-fit,minmax(2.75rem,1fr));width:min(100%,36rem);display:grid}.symbolic-addition__answer-choice{border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-surface);cursor:pointer;min-width:2.75rem;min-height:2.75rem;font-size:var(--text-md);font-variant-numeric:tabular-nums;transition:background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);place-items:center;font-weight:700;display:grid;position:relative}.symbolic-addition__answer-choice input{opacity:0;block-size:1px;inline-size:1px;position:absolute}.symbolic-addition__answer-choice:has(input:checked){border-color:var(--color-success);background:var(--color-success-surface)}.symbolic-addition__primary-action,.symbolic-addition__text-action{white-space:nowrap;cursor:pointer;width:fit-content;min-height:2.75rem}.symbolic-addition__primary-action{padding:var(--space-sm) var(--space-lg);border:var(--rule-thin) solid var(--color-ink);border-radius:var(--radius-control);background:var(--color-ink);color:var(--color-paper);transition:background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);font-weight:700}.symbolic-addition__primary-action:active,.symbolic-addition__text-action:active,.symbolic-addition__answer-choice:active{transform:translateY(.0625rem)}.symbolic-addition__primary-action:disabled,.symbolic-addition__text-action:disabled,.symbolic-addition__answer-choice:has(input:disabled){opacity:.55;cursor:not-allowed}.symbolic-addition__primary-action[data-state=loading]{cursor:wait;opacity:.72}.symbolic-addition__primary-action[data-state=error]{outline:var(--rule-thin) dashed var(--color-error);outline-offset:.1875rem}.symbolic-addition__primary-action[data-state=success]{background:var(--color-success)}.symbolic-addition__text-action{padding:var(--space-xs) 0;border:0;border-block-end:var(--rule-thin) solid currentColor;color:var(--color-hint);background:0 0;border-radius:0;font-weight:700}.symbolic-addition__answer-choice:has(input:focus-visible),.symbolic-addition__primary-action:focus-visible,.symbolic-addition__text-action:focus-visible{outline:.1875rem solid var(--color-focus);outline-offset:.1875rem}.symbolic-addition__feedback,.symbolic-addition__hint-panel{max-width:42rem;padding:var(--space-md);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-panel);margin:0}.symbolic-addition__feedback[data-tone=neutral]{border-style:dashed;border-color:var(--color-error);background:var(--color-error-surface);color:var(--color-error)}.symbolic-addition__feedback[data-tone=correct]{border-color:var(--color-success);background:var(--color-success-surface);color:var(--color-success);font-weight:700}.symbolic-addition__hint-panel{background:var(--color-hint-surface)}.symbolic-addition__hint-panel h2,.symbolic-addition__hint-panel p{margin:0}.symbolic-addition__hint-panel h2{font-family:var(--font-display);font-size:var(--text-base);margin-block-end:var(--space-2xs);font-style:normal}@keyframes symbolic-jump-arrive{0%{opacity:0;transform:translate(50%)translateY(-.35rem)}to{opacity:1;transform:translate(50%)}}@media (hover:hover) and (pointer:fine){.symbolic-addition__answer-choice:hover{background:var(--color-surface-raised)}.symbolic-addition__primary-action:hover{transform:translateY(-.0625rem)}.symbolic-addition__text-action:hover{color:var(--color-focus)}}@media (width>=40rem){.symbolic-addition__answer-area{grid-template-columns:minmax(0,1fr) auto;align-items:end}}@media (pointer:coarse){.symbolic-addition__answer-choice,.symbolic-addition__primary-action,.symbolic-addition__text-action{min-height:3rem}}@media (prefers-reduced-motion:reduce){.symbolic-addition *,.symbolic-addition :before,.symbolic-addition :after,.symbolic-addition__primary-action,.symbolic-addition__text-action,.symbolic-addition__answer-choice{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}
