.tool{display:flex;flex-direction:column;gap:var(--space-6);align-items:center}.tool__stage{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-5);width:100%;min-height:320px;padding:var(--space-8);background:var(--surface-card);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.tool__readout{margin:0;font-size:var(--text-h2);font-weight:var(--weight-heavy);color:var(--text-strong);text-align:center;min-height:1.4em}.tool__controls{display:flex;flex-wrap:wrap;gap:var(--space-4);align-items:flex-end;justify-content:center}.tool__select{display:block;margin-top:var(--space-1);min-height:var(--hit-min);padding:var(--space-2) var(--space-3);font-family:var(--font-ui);font-size:var(--text-body);border:var(--border-w) solid var(--action-secondary-border);border-radius:var(--radius-md);background:var(--white);color:var(--text-strong)}.tool__select:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tool-dice{display:flex;flex-wrap:wrap;gap:var(--space-5);justify-content:center}.tool-die{--die: 104px;width:var(--die);height:var(--die);display:grid;place-items:center;background:var(--white);border:3px solid var(--text-strong);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}.tool-die--rolling{animation:tool-die-pop var(--dur-slow) var(--ease-pop)}@keyframes tool-die-pop{0%{transform:scale(.82) rotate(-8deg)}to{transform:none}}.tool-die__pips{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:8px;width:70%;height:70%}.tool-die__pip{background:var(--text-strong);border-radius:50%}.tool-die__numeral{font-size:calc(var(--die) * .44);color:var(--text-strong)}.tool-spinner{position:relative;width:280px;height:280px}.tool-spinner__wheel{position:absolute;inset:0;border-radius:50%;border:3px solid var(--text-strong)}.tool-spinner__label{position:absolute;inset:0;display:grid;place-items:start center;padding-top:14px;font-family:var(--font-ui);font-weight:var(--weight-heavy);font-size:var(--text-h4);color:var(--text-inverse);transform:rotate(var(--angle))}.tool-spinner__pointer{position:absolute;inset:0;transform:rotate(0);transition:transform 1.4s cubic-bezier(.15,.85,.2,1)}.tool-spinner__pointer:before{content:"";position:absolute;top:-14px;left:50%;width:0;height:0;transform:translate(-50%);border-left:14px solid transparent;border-right:14px solid transparent;border-top:26px solid var(--text-strong)}@media(prefers-reduced-motion:reduce){.tool-spinner__pointer{transition-duration:1ms}}.tool-line{position:relative;width:100%;padding:var(--space-10) var(--space-6) var(--space-6)}.tool-line__rule{position:absolute;left:var(--space-6);right:var(--space-6);top:var(--space-10);height:3px;background:var(--text-strong)}.tool-line__ticks{position:relative;list-style:none;margin:0;padding:0;height:72px}.tool-line__ticks>li{position:absolute;left:var(--at);transform:translate(-50%)}.tool-line__tick{display:flex;flex-direction:column;align-items:center;gap:var(--space-1);min-width:var(--hit-min);min-height:var(--hit-min);padding:var(--space-1);background:none;border:0;font-family:var(--font-ui);font-size:var(--text-body);color:var(--text-strong);cursor:pointer}.tool-line__tick:before{content:"";width:3px;height:14px;background:var(--text-strong)}.tool-line__tick:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}.tool-line__tick--from span,.tool-line__tick--to span{background:var(--action-primary);color:var(--text-inverse);border-radius:var(--radius-pill);padding:2px 10px}.tool-line__jump{position:absolute;left:calc(var(--space-6) + var(--from));width:calc(var(--to) - var(--from));top:var(--space-4);height:var(--space-6);border:3px solid var(--action-primary);border-bottom:0;border-radius:999px 999px 0 0}[data-mode=projector] .tool-die{--die: 176px}[data-mode=projector] .tool-spinner{width:440px;height:440px}[data-mode=projector] .tool__readout{font-size:var(--text-hud)}[data-mode=projector] .tool__stage{min-height:520px}@media print{.tool{display:none}}.tool-fraction{display:flex;flex-direction:column;gap:var(--space-5, 1.25rem);width:100%}.tool-fraction__row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:var(--space-4, 1rem)}.tool-fraction__bar{display:flex;width:100%;height:var(--fraction-bar, 56px);border:2px solid var(--text-strong);border-radius:var(--radius-sm);overflow:hidden}.tool-fraction__part{flex:1 1 0;min-width:0;border:0;border-right:1px solid var(--text-strong);background:var(--white);cursor:pointer;padding:0}.tool-fraction__part:last-child{border-right:0}.tool-fraction__part.is-shaded{background:var(--action-primary)}.tool-fraction__part:focus-visible{outline:3px solid var(--text-strong);outline-offset:-3px}.tool-fraction__value{display:inline-flex;flex-direction:column;align-items:center;line-height:1;min-width:2.5ch}.tool-fraction__rule{display:block;width:100%;height:2px;background:currentColor;margin-block:2px}.tool-base{display:flex;flex-direction:row;gap:var(--space-6, 1.5rem);align-items:flex-end;justify-content:center;flex-wrap:wrap}.tool-base__column{text-align:center}.tool-base__blocks{display:flex;flex-wrap:wrap;gap:4px;align-items:flex-end;justify-content:center;max-width:260px;min-height:124px}.tool-base__fill{fill:var(--action-primary)}.tool-base__grid line{stroke:var(--white);stroke-width:1;opacity:.65}.tool-base__edge{fill:none;stroke:var(--text-strong);stroke-width:2}.tool-base__count{font-size:var(--text-h3, 1.5rem);margin:var(--space-2) 0 0}.tool-base__label{font-size:var(--text-label);color:var(--text-muted);margin:0}.tool-chart{display:grid;grid-template-columns:repeat(10,1fr);gap:2px;width:100%;max-width:560px;margin-inline:auto}.tool-chart__cell{aspect-ratio:1;border:1px solid var(--gray-400);background:var(--white);font:inherit;font-size:var(--chart-num, .95rem);cursor:pointer;padding:0}.tool-chart__cell.is-skip{background:var(--action-primary);color:var(--white);font-weight:700}.tool-chart__cell.is-marked{outline:3px solid var(--text-strong);outline-offset:-3px}.tool-chart__cell:focus-visible{outline:3px solid var(--text-strong);outline-offset:-1px}.tool-clock{width:min(360px,80vw);height:auto;touch-action:none}.tool-clock__face{fill:var(--white);stroke:var(--text-strong);stroke-width:3}.tool-clock__tick{stroke:var(--gray-400);stroke-width:1.5}.tool-clock__tick--major{stroke:var(--text-strong);stroke-width:3}.tool-clock__numeral{font-size:15px;font-weight:700;fill:var(--text-strong)}.tool-clock__pin{fill:var(--text-strong)}.tool-clock__hand{stroke-linecap:round;cursor:grab}.tool-clock__hand--hour{stroke:var(--text-strong);stroke-width:8}.tool-clock__hand--minute{stroke:var(--action-primary);stroke-width:5}.tool-clock__words{text-align:center;color:var(--text-muted);margin:0}.tool-geo{width:min(360px,80vw);height:auto}.tool-geo__peg{fill:var(--gray-700);cursor:pointer}.tool-geo__peg.is-used{fill:var(--text-strong)}.tool-geo__peg.is-closer{fill:var(--action-primary);stroke:var(--text-strong);stroke-width:2}.tool-geo__peg:focus-visible{outline:3px solid var(--text-strong)}.tool-geo__band{fill:color-mix(in srgb,var(--action-primary) 30%,transparent);stroke:var(--action-primary);stroke-width:4;stroke-linejoin:round}.tool-geo__band--open{fill:none;stroke-dasharray:8 6}.tool-geo__note{font-size:var(--text-label);color:var(--text-muted);text-align:center;margin:0}.tool-timer{text-align:center}.tool-timer__readout{font-size:var(--timer-size, clamp(4rem, 18vw, 9rem));line-height:1;margin:0;font-variant-numeric:tabular-nums}.tool-timer__state{color:var(--text-muted);margin:var(--space-2) 0 0}.tool-timer.is-finished .tool-timer__readout{color:var(--action-primary)}.tool-picker{text-align:center}.tool-picker__name{font-size:var(--picker-size, clamp(2.5rem, 11vw, 6rem));line-height:1.1;margin:0;overflow-wrap:anywhere}.tool-picker__state{color:var(--text-muted);margin:var(--space-2) 0 0}.tool-picker__list{max-width:40ch;margin:var(--space-6, 1.5rem) auto 0;text-align:left}.tool-picker__input{width:100%;font:inherit;padding:var(--space-3);border:var(--border-w, 2px) solid var(--gray-400);border-radius:var(--radius-sm)}.tool-picker__note{font-size:var(--text-label);color:var(--text-muted);margin:var(--space-2) 0 0}[data-mode=projector] .tool-fraction{--fraction-bar: 104px}[data-mode=projector] .tool-chart{max-width:900px;--chart-num: 1.5rem}[data-mode=projector] .tool-clock,[data-mode=projector] .tool-geo{width:min(560px,70vw)}[data-mode=projector] .tool-timer__readout{--timer-size: clamp(6rem, 26vw, 15rem)}[data-mode=projector] .tool-picker__name{--picker-size: clamp(4rem, 16vw, 10rem)}[data-mode=projector] .tool-picker__list{display:none}
