.widget-slider{display:grid;gap:var(--space-3)}.widget-slider-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-3)}.widget-slider-label{font-weight:var(--font-weight-semibold)}.widget-slider-value{color:var(--color-accent);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums}@supports (background-clip: text) or (-webkit-background-clip: text){.widget-slider-value{background-image:var(--color-gradient);background-clip:text;-webkit-background-clip:text;color:transparent}}.widget-slider-input{inline-size:100%;-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer}.widget-slider-input::-webkit-slider-runnable-track{block-size:.5rem;background:var(--color-gradient);border-radius:var(--radius-sm)}.widget-slider-input::-moz-range-track{block-size:.5rem;background:var(--color-gradient);border-radius:var(--radius-sm)}.widget-slider-input::-webkit-slider-thumb{-webkit-appearance:none;inline-size:1.5rem;block-size:1.5rem;margin-block-start:-.5rem;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;box-shadow:var(--shadow-sm)}.widget-slider-input::-moz-range-thumb{inline-size:1.5rem;block-size:1.5rem;background:var(--color-accent);border:2px solid var(--color-bg);border-radius:50%;box-shadow:var(--shadow-sm)}.widget-slider-reset{justify-self:start;padding:var(--space-1) var(--space-2);font:inherit;font-size:var(--font-size-small);color:var(--color-text-muted);background:transparent;border:none;border-radius:var(--radius-sm);cursor:pointer}.widget-slider-reset:hover{color:var(--color-accent);text-decoration:underline}.widget-slider-viz{display:flex;align-items:center;justify-content:center;min-block-size:8rem;padding:var(--space-4);background:var(--color-bg);border-radius:var(--radius-sm)}@media(forced-colors:active){.widget-slider-value{background:none;color:CanvasText;-webkit-text-fill-color:currentcolor}.widget-slider-input::-webkit-slider-runnable-track{background:CanvasText}.widget-slider-input::-moz-range-track{background:CanvasText}.widget-slider-input::-webkit-slider-thumb{background:ButtonText;border-color:Canvas}.widget-slider-input::-moz-range-thumb{background:ButtonText;border-color:Canvas}}.widget-wrapper{margin-block:var(--space-8);padding:var(--space-6);background:var(--color-surface);border:2px solid transparent;border-image:var(--color-gradient) 1;border-radius:var(--radius-md);box-shadow:var(--shadow-widget)}.widget-wrapper-fallback{display:none;flex-direction:column;align-items:center;gap:var(--space-4);text-align:center}.widget-wrapper-fallback img{max-inline-size:100%;block-size:auto;border-radius:var(--radius-sm)}.widget-wrapper-note{margin-block:0;color:var(--color-text-muted);font-size:var(--font-size-small)}.widget-wrapper-noscript-img{max-inline-size:100%;block-size:auto;border-radius:var(--radius-sm)}.widget-wrapper.full-bleed .widget-wrapper-fallback{max-inline-size:var(--max-width-content);margin-inline:auto}@media(scripting:none){.widget-wrapper-live{display:none}}@media(forced-colors:active){.widget-wrapper{background:Canvas;color:CanvasText;border:1px solid CanvasText}}.widget-toggle{display:grid;gap:var(--space-3)}.widget-toggle-header{display:flex;align-items:center;gap:var(--space-3)}.widget-toggle-label{margin-inline-end:auto;font-weight:var(--font-weight-semibold)}.widget-toggle-state{color:var(--color-text-muted);font-size:var(--font-size-small)}.widget-toggle-switch{position:relative;flex-shrink:0;inline-size:2.75rem;block-size:1.5rem;padding:0;background:var(--color-text-muted);-webkit-appearance:none;appearance:none;border:none;border-radius:var(--radius-md);cursor:pointer;transition:background var(--duration-fast) var(--ease-out)}.widget-toggle-switch:before{content:"";position:absolute;inset-block-start:.1875rem;inset-inline-start:.1875rem;inline-size:1.125rem;block-size:1.125rem;background:var(--color-bg);border-radius:50%;box-shadow:var(--shadow-sm);transition:transform var(--duration-fast) var(--ease-out)}.widget-toggle-switch[aria-pressed=true]{background:var(--color-gradient)}.widget-toggle-switch[aria-pressed=true]:before{transform:translate(1.25rem)}.widget-toggle-viz{display:flex;align-items:center;justify-content:center;min-block-size:8rem;padding:var(--space-4);background:var(--color-bg);border-radius:var(--radius-sm)}@media(forced-colors:active){.widget-toggle-switch{background:Canvas;border:1px solid ButtonText}.widget-toggle-switch:before{background:ButtonText}}.widget-before-after{container-type:inline-size}.widget-before-after-tabs:not([hidden]){display:flex;gap:var(--space-2);margin-block-end:var(--space-4)}.widget-before-after-tab{min-block-size:2.75rem;padding-block:var(--space-2);padding-inline:var(--space-4);color:var(--color-text-muted);font:inherit;font-weight:var(--font-weight-semibold);-webkit-appearance:none;appearance:none;background:none;border:none;border-block-end:2px solid transparent;border-radius:var(--radius-sm) var(--radius-sm) 0 0;cursor:pointer;transition:color var(--duration-fast) var(--ease-out)}.widget-before-after-tab[aria-selected=true]{color:var(--color-text);border-block-end-color:var(--color-accent)}.widget-before-after-panels{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}@container (width < 48rem){.widget-before-after-panels{grid-template-columns:1fr}}.widget-before-after-panel:not([hidden]){display:flex;flex-direction:column;gap:var(--space-4);min-block-size:8rem;min-inline-size:0}.widget-before-after-panel-title{color:var(--color-text-muted);font-size:var(--font-size-small);font-weight:var(--font-weight-semibold)}.widget-before-after-result{display:flex;align-items:center;justify-content:center;min-block-size:6rem;margin-block-start:auto;padding:var(--space-4);background:var(--color-bg);border-radius:var(--radius-sm)}.widget-before-after-panel .expressive-code{margin-block:0}@media(forced-colors:active){.widget-before-after-tab[aria-selected=true]{border-block-end-color:Highlight}}.callout{container-type:inline-size;container-name:callout;margin-block:var(--space-8);padding-block:var(--space-4);padding-inline:var(--space-6);border-inline-start:4px solid transparent;border-image:var(--color-gradient) 1;border-radius:var(--radius-md);background:color-mix(in oklab,var(--callout-tint) 12%,var(--color-bg))}.callout-info{--callout-tint: var(--color-callout-info)}.callout-astuce{--callout-tint: var(--color-callout-astuce)}.callout-attention{--callout-tint: var(--color-callout-attention)}.callout-le-saviez-vous{--callout-tint: var(--color-callout-le-saviez-vous)}.callout-icon{display:flex;align-items:center;color:var(--callout-tint)}.callout-icon svg{inline-size:1.5em;block-size:1.5em}.callout-content{min-inline-size:0}.callout .callout-title{margin-block:0 var(--space-2);font-weight:var(--font-weight-bold)}.callout-body>:last-child{margin-block-end:0}.callout-layout{display:grid;gap:var(--space-3)}@container callout (inline-size >= 30rem){.callout-layout{grid-template-columns:auto 1fr;align-items:start}}@media(forced-colors:active){.callout{background:Canvas;color:CanvasText;border:1px solid CanvasText}}.tooltip-term{appearance:none;padding:0;border:0;background:none;color:inherit;text-decoration:underline dotted;text-underline-offset:.2em;cursor:help;interest-delay:var(--duration-smooth)}.tooltip-bubble{max-inline-size:min(30ch,90vw);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm);font-size:var(--font-size-small);line-height:1.4;opacity:0;transition:opacity var(--duration-normal) var(--ease-out),overlay var(--duration-normal) allow-discrete,display var(--duration-normal) allow-discrete}.tooltip-bubble:popover-open{opacity:1}@starting-style{.tooltip-bubble:popover-open{opacity:0}}@supports (position-area: block-start){.tooltip-bubble{margin:0;inset:auto;position-area:block-start;position-try-fallbacks:flip-block;margin-block-end:var(--space-1)}}@media(forced-colors:active){.tooltip-bubble{background:Canvas;color:CanvasText;border:1px solid CanvasText}}.figure{margin-block:var(--space-8)}.figure-trigger{display:block;inline-size:100%;padding:0;border:0;background:none;border-radius:var(--radius-md);cursor:zoom-in}.figure-trigger img{border-radius:var(--radius-md)}.figure-caption{margin-block-start:var(--space-2);color:var(--color-text-muted);font-size:var(--font-size-small);text-align:center}.figure-dialog{inset:0;margin:auto;inline-size:fit-content;max-inline-size:90dvw;max-block-size:90dvh;padding:0;border:0;background:transparent;--overlay: var(--color-overlay);opacity:0;transition:opacity var(--duration-smooth) var(--ease-out),overlay var(--duration-smooth) allow-discrete,display var(--duration-smooth) allow-discrete}.figure-dialog[open]{opacity:1}@starting-style{.figure-dialog[open]{opacity:0}}.figure-dialog img{display:block;max-inline-size:100%;max-block-size:90dvh;height:auto;border-radius:var(--radius-md)}.figure-dialog::backdrop{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0);transition:background var(--duration-smooth) var(--ease-out),-webkit-backdrop-filter var(--duration-smooth) var(--ease-out),backdrop-filter var(--duration-smooth) var(--ease-out),overlay var(--duration-smooth) allow-discrete,display var(--duration-smooth) allow-discrete}.figure-dialog[open]::backdrop{background:var(--overlay);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@starting-style{.figure-dialog[open]::backdrop{background:transparent;-webkit-backdrop-filter:blur(0);backdrop-filter:blur(0)}}.figure-close{position:absolute;inset-block-start:var(--space-2);inset-inline-end:var(--space-2);display:flex;align-items:center;justify-content:center;inline-size:2.5rem;block-size:2.5rem;padding:0;border:0;border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);box-shadow:var(--shadow-sm);cursor:pointer}.figure-close svg{inline-size:1.25rem;block-size:1.25rem}html:has(.figure-dialog[open]){overflow:hidden}@media(prefers-reduced-motion:reduce){.figure-dialog::backdrop{transition-property:opacity}}@media(forced-colors:active){.figure-dialog,.figure-close{background:Canvas;color:CanvasText;border:1px solid CanvasText}}.demo-flex-grow{display:flex;gap:var(--space-2);inline-size:100%}.demo-flex-grow .box{display:grid;place-items:center;flex-grow:1;padding:var(--space-3);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;color:var(--color-text);background:var(--color-surface);border-radius:var(--radius-sm);box-shadow:var(--shadow-sm)}.demo-flex-grow .box-grow,.demo-flex-grow .box-b{background:color-mix(in oklab,var(--color-accent) 18%,var(--color-surface))}.demo-flex-grow .box-grow{flex-grow:var(--flex-grow, 1)}.demo-flex-grow .box-b{flex-grow:2}.widget-toggle-viz.demo-equal .box{flex-grow:1}