.ten-frame-activity{gap:var(--space-xl);min-width:0;display:grid}.ten-frame-activity__header{justify-items:start;gap:var(--space-sm);max-width:43rem;display:grid}.ten-frame-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}.ten-frame-workspace{align-items:center;gap:var(--space-xl);grid-template-columns:minmax(0,1fr);display:grid}.ten-frame{border-block-start:var(--rule-frame) solid var(--color-frame);border-inline-start:var(--rule-frame) solid var(--color-frame);background:var(--color-surface);grid-template-columns:repeat(5,minmax(0,1fr));width:min(100%,35rem);display:grid}.ten-frame__cell{aspect-ratio:1;border-inline-end:var(--rule-frame) solid var(--color-frame);border-block-end:var(--rule-frame) solid var(--color-frame);min-width:0;transition:opacity var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out);place-items:center;display:grid}.ten-frame[data-five-structure=visible] .ten-frame__cell:nth-child(-n+5){border-block-end-width:.375rem}.ten-frame__counter,.source-counter>span{aspect-ratio:1;border-radius:var(--radius-counter);width:72%;display:block}.ten-frame__counter{animation:counter-arrive var(--dur-short) var(--ease-out) both}.ten-frame__counter--a{border:var(--rule-frame) solid var(--color-group-a-deep);background:var(--color-group-a)}.ten-frame__counter--b,.source-counter>span{border:var(--rule-frame) dashed var(--color-group-b-deep);background:var(--color-group-b)}.ten-frame[data-counting-step=visible] .ten-frame__cell:nth-child(6) .ten-frame__counter{outline:.1875rem solid var(--color-focus);outline-offset:.125rem;transform:scale(1.08)}.counter-source{justify-items:start;gap:var(--space-sm);min-width:0;display:grid}.counter-source p,.answer-choices legend{margin:0;font-weight:700}.counter-source__items{gap:var(--space-sm);flex-wrap:wrap;display:flex}.source-counter{width:3.5rem;min-width:3.5rem;height:3.5rem;padding:var(--space-2xs);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-control);background:var(--color-surface);cursor:grab;transition:background-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);place-items:center;display:grid}.source-counter:active{cursor:grabbing;transform:translateY(.0625rem)}.answer-area{align-items:end;gap:var(--space-lg);display:grid}.answer-choices{border:0;min-width:0;padding:0}.answer-choices legend{font-size:var(--text-md);margin-block-end:var(--space-sm);padding:0}.answer-choices__grid{gap:var(--space-xs);grid-template-columns:repeat(auto-fit,minmax(2.75rem,1fr));width:min(100%,36rem);display:grid}.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}.answer-choice input{opacity:0;block-size:1px;inline-size:1px;position:absolute}.answer-choice:has(input:checked){border-style:solid;border-color:var(--color-group-a-deep);background:var(--color-group-a)}.answer-choice:has(input:focus-visible),.source-counter:focus-visible,.primary-action:focus-visible,.text-action:focus-visible{outline:.1875rem solid var(--color-focus);outline-offset:.1875rem}.primary-action,.text-action{white-space:nowrap;cursor:pointer;width:fit-content;min-height:2.75rem}.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}.primary-action:active,.text-action:active{transform:translateY(.0625rem)}.primary-action:disabled,.text-action:disabled,.source-counter:disabled{opacity:.55;cursor:not-allowed;background:var(--color-disabled)}.primary-action[data-state=loading]{cursor:wait;opacity:.72}.primary-action[data-state=error]{outline:var(--rule-thin) dashed var(--color-error);outline-offset:.1875rem}.primary-action[data-state=success]{background:var(--color-success);color:var(--color-paper)}.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}.learning-feedback,.hint-panel{max-width:42rem;padding-block:var(--space-md);padding-inline:var(--space-md);border:var(--rule-thin) solid var(--color-rule);border-radius:var(--radius-panel);margin:0}.learning-feedback[data-tone=neutral]{border-style:dashed;border-color:var(--color-error);background:var(--color-error-surface);color:var(--color-error)}.learning-feedback[data-tone=correct]{border-color:var(--color-success);background:var(--color-success-surface);color:var(--color-success);font-weight:700}.hint-area{justify-items:start;gap:var(--space-sm);display:grid}.hint-panel{background:var(--color-hint-surface);color:var(--color-ink)}.hint-panel h2,.hint-panel p{margin:0}.hint-panel h2{font-family:var(--font-display);font-size:var(--text-base);margin-block-end:var(--space-2xs);font-style:normal}@keyframes counter-arrive{0%{opacity:0;transform:translateY(-.5rem)}to{opacity:1;transform:none}}@media (hover:hover) and (pointer:fine){.source-counter:hover,.answer-choice:hover{background:var(--color-surface-raised)}.primary-action:hover{transform:translateY(-.0625rem)}.text-action:hover{color:var(--color-focus)}}@media (width>=40rem){.ten-frame-workspace{grid-template-columns:minmax(0,2.4fr) minmax(10rem,1fr)}.answer-area{grid-template-columns:minmax(0,1fr) auto}}@media (pointer:coarse){.source-counter,.answer-choice,.primary-action,.text-action{min-height:3rem}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}.ten-frame__counter,.ten-frame[data-counting-step=visible] .ten-frame__cell:nth-child(6) .ten-frame__counter{transform:none}}
