/* Explorables (static/explorables.js). Uses the tokens from style.css so both themes work. */
.explorable { max-width: 34rem; margin-inline: auto; }
.explorable-stage { display: none; }
.explorable.is-live .explorable-stage { display: block; }
.explorable.is-live .explorable-fallback { display: none; }
.explorable-fallback { font: .95rem/1.5 var(--sans); color: var(--muted); }
.explorable-svg { display: block; width: 100%; max-width: 34rem; height: auto; }
.explorable-vector { max-width: 22rem; cursor: crosshair; touch-action: none; }
.explorable-svg text { fill: var(--muted); font: 12px var(--sans); }
.explorable-svg .ex-label { fill: var(--text); }
.ex-grid line { stroke: var(--rule); stroke-width: 1; }
.ex-axis { stroke: var(--muted); stroke-width: 1.5; }
.ex-area { fill: var(--accent); fill-opacity: .22; stroke: none; }
.ex-line { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.ex-slope { fill: none; stroke: var(--track-physics); stroke-width: 2; stroke-dasharray: 5 3; }
.ex-probe { stroke: var(--text); stroke-width: 1.2; stroke-dasharray: 5 4; opacity: .6; }
.ex-dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.ex-comp { stroke-width: 4; stroke-linecap: round; }
.ex-comp-x { stroke: var(--track-physics); }
.ex-comp-y { stroke: var(--track-maths); }
.ex-head { fill: var(--accent); }
.ex-hit { fill: transparent; }
.ex-handle { cursor: grab; outline: none; }
.ex-handle:focus-visible .ex-dot { stroke: var(--text); stroke-width: 3; }
.ex-handle:focus-visible .ex-hit { stroke: var(--accent); stroke-width: 3; }
.explorable-controls { display: grid; gap: var(--space-1); margin-top: var(--space-1); font-family: var(--sans); }
.explorable-control { display: grid; grid-template-columns: 11rem 1fr 6.5rem; align-items: center; gap: var(--space-1); font-size: .95rem; }
.explorable-control input[type=range] { width: 100%; min-height: 2rem; accent-color: var(--accent); }
.explorable-control output { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
.explorable-readout { margin: var(--space-1) 0 0; font: 1rem/1.5 var(--sans); }
.explorable-hint { margin: .25rem 0 0; font: .85rem/1.5 var(--sans); color: var(--muted); }
@media (max-width: 34rem) { .explorable-control { grid-template-columns: 1fr 6rem; } .explorable-control label { grid-column: 1 / -1; } }
@media print { .explorable.is-live .explorable-stage { display: none; } .explorable.is-live .explorable-fallback { display: block; } }