.fun-stage{gap:var(--space-s);flex-direction:column;display:flex;container-type:inline-size}.fun-body{gap:var(--space-s);grid-template-columns:minmax(0,1fr);align-items:start;display:grid}.fun-viewport{aspect-ratio:var(--fun-ratio,3 / 2);border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab, var(--muted) 26%, var(--background));position:relative;overflow:hidden}@container (width<34rem){.fun-viewport{aspect-ratio:var(--fun-ratio-narrow,1 / 1)}}.fun-split{gap:var(--space-2xs);grid-template-columns:repeat(2,minmax(0,1fr));min-inline-size:0;display:grid}@container (width<34rem){.fun-split{grid-template-columns:minmax(0,1fr)}}.fun-split .fun-viewport{aspect-ratio:var(--fun-split-ratio,4 / 5)}.fun-split[data-flat-first] .fun-viewport-flat{order:-1}.fun-canvas{touch-action:none;block-size:100%;inline-size:100%;display:block}.fun-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.fun-controls{gap:var(--space-xs);padding:var(--space-xs);border:1px solid var(--border);border-radius:var(--radius-lg);background:color-mix(in oklab, var(--muted) 20%, transparent);grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));align-items:start;display:grid}.fun-controls>.fun-toggles,.fun-controls>.fun-note,.fun-controls>.fun-readout,.fun-controls>.fun-legend{grid-column:1/-1}.fun-control{gap:var(--space-3xs);flex-direction:column;display:flex}.fun-control-head{justify-content:space-between;align-items:baseline;gap:var(--space-2xs);display:flex}.fun-control-label{color:var(--muted-foreground);font-size:var(--step--1);font-weight:var(--font-weight-medium)}.fun-control-value{color:var(--foreground);font-family:var(--font-mono);font-size:var(--step--1);font-variant-numeric:tabular-nums}.fun-note{color:var(--muted-foreground);font-size:var(--step--1);margin:0;line-height:1.45}.fun-range{block-size:1.5rem;inline-size:100%;accent-color:var(--accent);cursor:pointer;background:0 0;margin:0}.fun-range:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--radius-full)}@media (pointer:coarse){.fun-range{block-size:2rem}}.fun-select{inline-size:100%;min-block-size:var(--control-size);padding:var(--space-3xs) var(--space-2xs);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);color:var(--foreground);font-family:inherit;font-size:var(--step--1);cursor:pointer}.fun-select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.fun-toggles{gap:var(--space-3xs);flex-wrap:wrap;display:flex}.fun-toggle{align-items:center;gap:var(--space-3xs);min-block-size:var(--control-size-compact,2rem);padding-inline:var(--space-2xs);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);color:var(--muted-foreground);font-family:inherit;font-size:var(--step--1);cursor:pointer;transition:border-color var(--motion-duration-fast) var(--motion-ease), background-color var(--motion-duration-fast) var(--motion-ease), color var(--motion-duration-fast) var(--motion-ease);display:inline-flex}.fun-toggle[aria-pressed=true]{border-color:var(--interactive-border);background:var(--interactive-background);color:var(--foreground)}.fun-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:1px}@media (hover:hover) and (pointer:fine){.fun-toggle:hover{border-color:var(--accent);color:var(--foreground)}}@media (pointer:coarse){.fun-toggle{min-block-size:var(--control-size)}}.fun-formula-input{inline-size:100%;min-block-size:var(--control-size);padding:var(--space-3xs) var(--space-2xs);border:1px solid var(--border);border-radius:var(--radius-md);background:var(--background);color:var(--foreground);font-family:var(--font-mono);font-size:var(--step--1)}.fun-formula-input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}.fun-formula-input[aria-invalid=true]{border-color:var(--destructive)}.fun-formula-error{min-block-size:1.1em;color:var(--destructive);font-size:var(--step--1)}.fun-formula-error:empty{min-block-size:0}.fun-legend{gap:var(--space-3xs);flex-direction:column;margin:0;padding:0;list-style:none;display:flex}.fun-legend li{align-items:center;gap:var(--space-2xs);color:var(--muted-foreground);font-size:var(--step--1);display:flex}.fun-legend-swatch{border-radius:var(--radius-full);flex-shrink:0;block-size:.25rem;inline-size:.85rem}.fun-legend-swatch[data-tone=destructive]{background:var(--destructive)}.fun-legend-swatch[data-tone=accent]{background:var(--accent)}.fun-legend-swatch[data-tone=primary]{background:var(--primary)}.fun-readout{gap:var(--space-3xs);border-block-start:1px solid var(--border);flex-direction:column;margin:0;padding-block-start:var(--space-3xs);display:flex}.fun-readout-row{justify-content:space-between;align-items:baseline;gap:var(--space-2xs);display:flex}.fun-readout dt{color:var(--muted-foreground);font-size:var(--step--1)}.fun-readout dd{color:var(--foreground);font-family:var(--font-mono);font-size:var(--step--1);font-variant-numeric:tabular-nums;margin:0}.fun-hint{color:var(--muted-foreground);font-size:var(--step--1);margin:0}.fun-notes{gap:var(--space-2xs);color:var(--prose-foreground,var(--foreground));flex-direction:column;display:flex}.fun-notes p{margin:0;line-height:1.6}.fun-notes h2{font-size:var(--step-0);font-weight:var(--font-weight-semibold);margin:0}.fun-notes strong{font-weight:var(--font-weight-semibold)}.fun-gallery{gap:var(--space-l);flex-direction:column;display:flex}.fun-filters{gap:var(--space-2xs);flex-direction:column;display:flex}.fun-filter-row{align-items:flex-start;gap:var(--space-xs);display:flex}.fun-filter-label{min-inline-size:2.75rem;min-block-size:calc(var(--control-size-compact) + 2 * var(--space-3xs));color:var(--muted-foreground);font-size:var(--step--1);font-weight:var(--font-weight-medium);align-items:center;line-height:1.2;display:flex}.fun-filters .chip-filter-bar{gap:var(--space-3xs)}.chip-active-filter[hidden]{display:none}.fun-empty{padding:var(--space-l);border-radius:var(--radius-lg);background:color-mix(in oklab, var(--muted) 34%, transparent);text-align:center}.fun-empty[hidden]{display:none}.fun-empty h2,.fun-empty p{margin:0}.fun-empty h2{font-size:var(--step-1)}.fun-empty p{color:var(--muted-foreground);font-size:var(--step--1);margin-block-start:var(--space-3xs)}@media (width<40rem){.fun-filter-row{gap:var(--space-3xs);flex-direction:column}.fun-filter-label{min-block-size:0;min-inline-size:0}}.fun-group-head{margin-block-end:var(--space-xs)}.fun-group-head h2{margin:0 0 var(--space-3xs);font-size:var(--step-1);font-weight:var(--font-weight-semibold)}.fun-group-head p{color:var(--muted-foreground);font-size:var(--step--1);margin:0;line-height:1.5}.fun-card-head{align-items:center;gap:var(--space-2xs);display:flex}.fun-card-icon{color:var(--accent);flex-shrink:0}.fun-card-kind{color:var(--muted-foreground);font-family:var(--font-mono);font-size:var(--step--1);white-space:nowrap;flex-shrink:0;margin-inline-start:auto}