.canvas-experiment{--canvas-check-size: 1rem;--canvas-checkbox-gap: var(--space-2);--canvas-control-accent: var(--color-accent-2);--canvas-control-gap: var(--space-2);--canvas-control-grid-min: 8rem;--canvas-control-inner-gap: var(--space-1);--canvas-control-label-default: var(--color-muted);--canvas-control-label-error: #b3261e;--canvas-control-label-gap: var(--space-2);--canvas-control-label-warning: var(--color-accent);--canvas-control-size-narrow: 7rem;--canvas-control-size-wide: 16rem;--canvas-control-value-color: var(--color-text);--canvas-control-vertical-range: 14rem;--canvas-control-vertical-track: 1.5rem;--canvas-controls-gap: var(--space-2);--canvas-controls-padding: var(--space-3);--canvas-debug-gap: var(--space-2);--canvas-debug-metric-bg: color-mix(in srgb, var(--color-surface) 56%, transparent);--canvas-debug-metric-border: var(--border);--canvas-debug-metric-gap: var(--space-2);--canvas-debug-metric-padding: var(--space-1) var(--space-2);--canvas-debug-metric-radius: var(--radius-small);--canvas-debug-padding: var(--space-3) var(--space-4);--canvas-experiment-bg: var(--color-code-bg);--canvas-experiment-border: var(--border);--canvas-experiment-margin: 0px;--canvas-experiment-margin-block: var(--space-6);--canvas-experiment-radius: var(--radius);--canvas-experiment-tab-active: var(--color-accent-2);--canvas-experiment-tab-border-width: var(--border-tab-width);--canvas-experiment-tab-gap: var(--space-3);--canvas-experiment-tab-padding: 0 0 var(--space-2);--canvas-experiment-tabs-bg: color-mix(in srgb, var(--color-surface) 68%, transparent);--canvas-experiment-tabs-padding: var(--space-3) var(--space-4) 0;--canvas-group-gap: var(--space-2);--canvas-group-label-indent: var(--space-3);--canvas-link-toggle-active-bg: color-mix(in srgb, var(--color-accent-2) 16%, transparent);--canvas-link-toggle-active-color: var(--color-accent-2);--canvas-link-toggle-color: var(--color-muted);--canvas-link-toggle-size: 1.25rem;--canvas-radio-gap: var(--space-3);background:var(--canvas-experiment-bg);border:var(--canvas-experiment-border);border-radius:var(--canvas-experiment-radius);inline-size:100%;margin:var(--canvas-experiment-margin-block) 0;max-width:100%;overflow:hidden;position:relative;transition:background-color var(--motion-duration) var(--motion-ease),border-color var(--motion-duration) var(--motion-ease)}@media(prefers-color-scheme:dark){.canvas-experiment{--canvas-control-label-error: #ffb4ab}}.canvas-experiment canvas{aspect-ratio:16 / 9;background:transparent;display:block;inline-size:100%;max-width:100%;transition:opacity var(--motion-duration) var(--motion-ease)}.canvas-experiment--with-image canvas{aspect-ratio:auto;opacity:0}.canvas-experiment__fallback{border-radius:var(--canvas-experiment-radius);display:block;block-size:auto;inline-size:100%;max-inline-size:100%;transition:opacity var(--motion-duration) var(--motion-ease)}.canvas-experiment__fallback[hidden]{display:none}.canvas-experiment[data-ready=true] canvas{opacity:1}.canvas-experiment[data-ready=true] .canvas-experiment__fallback{opacity:0;pointer-events:none;position:absolute}.canvas-experiment__tabs{background:var(--canvas-experiment-tabs-bg);border-bottom:var(--canvas-experiment-border);display:flex;flex-wrap:wrap;gap:var(--canvas-experiment-tab-gap);padding:var(--canvas-experiment-tabs-padding)}.canvas-experiment__tab{background:transparent;border:0;border-block-end:var(--canvas-experiment-tab-border-width) solid transparent;color:var(--canvas-control-label-default);cursor:pointer;font-family:var(--font-accent);font-size:var(--text-xs);padding:var(--canvas-experiment-tab-padding)}.canvas-experiment__tab[aria-selected=true]{border-color:var(--canvas-experiment-tab-active);color:var(--color-text)}.canvas-experiment__controls{align-items:start;border-top:var(--canvas-experiment-border);display:grid;gap:var(--canvas-controls-gap);grid-template-columns:1fr;padding:var(--canvas-controls-padding)}.canvas-experiment__controls[hidden]{display:none}.canvas-experiment__group,.canvas-experiment__details{background:transparent;border:0;border-radius:0;display:grid;gap:var(--canvas-group-gap);min-inline-size:0;padding:0}.canvas-experiment__group--plain{padding:0}.canvas-experiment__group-header,.canvas-experiment__details>summary{min-inline-size:0}.canvas-experiment__group-label{align-items:center;color:var(--canvas-control-label-default);display:flex;font-family:var(--font-accent);font-size:var(--text-xs);font-weight:700;gap:var(--space-2);letter-spacing:.04em;margin:0;padding:0;text-transform:uppercase}.canvas-experiment__group-label:before,.canvas-experiment__group-label:after{background:var(--color-border);block-size:1px;content:""}.canvas-experiment__group-label:before{flex-shrink:0;inline-size:var(--canvas-group-label-indent)}.canvas-experiment__group-label:after{flex:1}.canvas-experiment__group-body,.canvas-experiment__details-body{display:grid;gap:var(--canvas-control-gap);min-inline-size:0}.canvas-controls-layout--grid>:is(.canvas-experiment__group-body,.canvas-experiment__details-body){align-items:end;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--canvas-control-grid-min)),1fr))}.canvas-controls-layout--row>:is(.canvas-experiment__group-body,.canvas-experiment__details-body){align-items:end;display:flex;flex-wrap:wrap;gap:var(--canvas-control-gap)}.canvas-controls-layout--column>:is(.canvas-experiment__group-body,.canvas-experiment__details-body){grid-template-columns:1fr}.canvas-controls-layout--cluster>:is(.canvas-experiment__group-body,.canvas-experiment__details-body){align-items:center;display:flex;flex-wrap:wrap;gap:var(--canvas-control-gap)}.canvas-controls-layout--fill>:is(.canvas-experiment__group-body,.canvas-experiment__details-body){align-items:end;display:flex;flex-wrap:wrap;gap:var(--canvas-control-gap)}.canvas-controls-layout--fill>:is(.canvas-experiment__group-body,.canvas-experiment__details-body)>.canvas-control{flex:1 1 var(--canvas-control-grid-min);inline-size:auto;max-inline-size:none;min-inline-size:0}.canvas-experiment__details>summary{cursor:pointer;list-style:none}.canvas-experiment__details>summary::-webkit-details-marker{display:none}.canvas-experiment__chevron{block-size:.45rem;border-block-end:1.5px solid currentColor;border-inline-end:1.5px solid currentColor;display:inline-block;inline-size:.45rem;transform:rotate(-45deg);transition:transform var(--motion-duration) var(--motion-ease)}.canvas-experiment__details[open]>summary .canvas-experiment__chevron{transform:rotate(45deg)}.canvas-experiment__details-body{margin-block-start:var(--canvas-group-gap)}.canvas-control{border:0;color:var(--canvas-control-label-default);display:grid;font-family:var(--font-accent);font-size:var(--text-xs);gap:var(--canvas-control-inner-gap);margin:0;min-inline-size:0;padding:0}.canvas-control--checkbox{align-items:center;display:flex;gap:var(--canvas-checkbox-gap)}.canvas-control--narrow{inline-size:min(100%,var(--canvas-control-size-narrow))}.canvas-control--wide{inline-size:min(100%,var(--canvas-control-size-wide))}.canvas-control--full{grid-column:1 / -1;inline-size:100%}.canvas-control--vertical{align-items:center;inline-size:auto;justify-items:center}.canvas-control--vertical .canvas-control__label-row{align-items:center;justify-content:center;text-align:center}.canvas-control--vertical input[type=range]{direction:rtl;height:var(--canvas-control-vertical-range);inline-size:auto;margin-block:var(--space-1);width:var(--canvas-control-vertical-track);writing-mode:vertical-lr}.canvas-control--vertical output{text-align:center}.canvas-control__label-row{align-items:center;display:flex;gap:var(--canvas-control-label-gap);justify-content:space-between}.canvas-control__label{align-items:center;display:inline-flex;gap:var(--space-1);min-inline-size:0}.canvas-control output{color:var(--canvas-control-value-color);font-variant-numeric:tabular-nums}.canvas-control input,.canvas-control select{accent-color:var(--canvas-control-accent);inline-size:100%}.canvas-control input[type=checkbox],.canvas-control input[type=radio]{block-size:var(--canvas-check-size);inline-size:var(--canvas-check-size)}.canvas-experiment__radio-group{display:flex;flex-wrap:wrap;gap:var(--canvas-radio-gap)}.canvas-experiment__radio-group label{align-items:center;display:flex;gap:var(--canvas-checkbox-gap)}.canvas-experiment__linked-pair{align-items:end;display:grid;gap:var(--canvas-control-gap);grid-column:1 / -1;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);min-inline-size:0}.canvas-experiment__linked-pair>.canvas-control{inline-size:auto;max-inline-size:100%}.canvas-experiment__link-toggle{align-items:center;background:transparent;block-size:var(--canvas-link-toggle-size);border:0;border-radius:var(--radius-pill);color:var(--canvas-link-toggle-color);cursor:pointer;display:inline-flex;inline-size:var(--canvas-link-toggle-size);justify-content:center;padding:0}.canvas-experiment__link-toggle--between{margin-block-end:.35rem}.canvas-experiment__link-toggle--trailing{justify-self:center;margin-block-start:var(--space-1)}.canvas-experiment__link-toggle:hover{color:var(--canvas-link-toggle-active-color)}.canvas-experiment__link-toggle[aria-pressed=true]{background:var(--canvas-link-toggle-active-bg);color:var(--canvas-link-toggle-active-color)}.canvas-experiment__link-toggle svg{block-size:.9rem;display:block;inline-size:.9rem}.canvas-label-color--default{color:var(--canvas-control-label-default)}.canvas-label-color--warning{color:var(--canvas-control-label-warning)}.canvas-label-color--error{color:var(--canvas-control-label-error)}.canvas-label-color--custom{color:var(--canvas-label-color-custom, var(--canvas-control-label-default))}.canvas-experiment__debug{border-top:var(--canvas-experiment-border);display:flex;flex-wrap:wrap;gap:var(--canvas-debug-gap);padding:var(--canvas-debug-padding)}.canvas-experiment__debug[hidden]{display:none}.canvas-experiment__debug-metric{align-items:baseline;background:var(--canvas-debug-metric-bg);border:var(--canvas-debug-metric-border);border-radius:var(--canvas-debug-metric-radius);display:flex;gap:var(--canvas-debug-metric-gap);padding:var(--canvas-debug-metric-padding)}.canvas-experiment__debug-metric span{font-family:var(--font-accent);font-size:var(--text-xs)}.canvas-experiment__debug-metric strong{color:var(--color-text);font-family:var(--font-code);font-size:var(--text-xs);font-weight:400}