:root{--ease-spring:cubic-bezier(.34, 1.4, .4, 1);--duration-spring:.32s;--exp-stage:#f3f4f6;--exp-stage-line:#181b1e14;--exp-object:#fdfdfe;--exp-object-sunken:#eeeff1;--exp-object-line:#181b1e1a;--exp-object-line-strong:#181b1e38;--exp-ink:#181b1e;--exp-secondary:#404247;--exp-muted:#616368;--exp-shadow:#181b1e14;--exp-shadow-soft:#181b1e0a;--exp-glow-opacity:0;--demo-pad:1rem;--demo-radius:.5rem;--demo-radius-in:.375rem;--demo-control:1.75rem;--demo-hit:2.75rem}@supports (color:lab(0% 0 0)){:root{--exp-stage:lab(96.2787% -.162184 -1.12437);--exp-stage-line:lab(9.49083% -.351779 -2.95578/.08);--exp-object:lab(99.417% -.0547469 -.375164);--exp-object-sunken:lab(94.4227% -.162154 -1.12433);--exp-object-line:lab(9.49083% -.351779 -2.95578/.1);--exp-object-line-strong:lab(9.49083% -.351779 -2.95578/.22);--exp-ink:lab(9.49083% -.351779 -2.95578);--exp-secondary:lab(28.0529% -.389308 -2.9743);--exp-muted:lab(41.9736% -.401497 -2.98081);--exp-shadow:lab(9.49083% -.351779 -2.95578/.08);--exp-shadow-soft:lab(9.49083% -.351779 -2.95578/.04)}}@media (prefers-color-scheme:dark){:root{--exp-stage:#0c0d10;--exp-stage-line:#f0f2f41a;--exp-object:#141619;--exp-object-sunken:#0f1113;--exp-object-line:#f0f2f41f;--exp-object-line-strong:#f0f2f447;--exp-ink:#f0f2f4;--exp-secondary:#bcbec0;--exp-muted:#96989b;--exp-shadow:#00000073;--exp-shadow-soft:#00000047;--exp-glow-opacity:1}@supports (color:lab(0% 0 0)){:root{--exp-stage:lab(3.68413% -.173368 -1.66544);--exp-stage-line:lab(95.3507% -.162244 -1.12435/.1);--exp-object:lab(7.2027% -.288852 -2.53931);--exp-object-sunken:lab(4.82562% -.190511 -1.68655);--exp-object-line:lab(95.3507% -.162244 -1.12435/.12);--exp-object-line-strong:lab(95.3507% -.162244 -1.12435/.28);--exp-ink:lab(95.3507% -.162244 -1.12435);--exp-secondary:lab(76.7875% -.213951 -1.49783);--exp-muted:lab(62.8642% -.263989 -1.87023);--exp-shadow:lab(0% 0 0/.45);--exp-shadow-soft:lab(0% 0 0/.28)}}}@media (pointer:coarse),(max-width:640px){:root{--demo-control:2.5rem}}.demo-frame{border-radius:var(--demo-radius);background:var(--exp-object);width:100%;max-width:100%;box-shadow:inset 0 0 0 1px var(--exp-object-line);margin-block:2.5rem;margin-inline:0}.demo-frame :where(button,input,select,textarea,optgroup){font-family:inherit}.demo-frame button:not([data-chrome=own]),.demo-frame [data-slot=toggle-group-item],.demo-frame [data-slot=slider]{touch-action:manipulation}.demo-frame button:not([data-chrome=own]){transition:transform .14s var(--ease-out), color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), box-shadow var(--duration-ui) var(--ease-out), opacity var(--duration-ui) var(--ease-out)}.demo-frame button:not([data-chrome=own]):not([data-slot=toggle-group-item]):active:not(:disabled){transform:scale(.96)}.demo-frame button:disabled:not([data-chrome=own]){opacity:.4;cursor:not-allowed}.demo-frame button:focus-visible,.demo-frame [data-slot=slider-thumb]:focus-visible,.demo-frame [data-slot=toggle-group-item]:focus-visible{--tw-ring-shadow:0 0 #0000;--tw-ring-offset-shadow:0 0 #0000;outline:2px solid var(--exp-ink);outline-offset:2px}@media (forced-colors:active){.demo-frame button:focus-visible,.demo-frame [data-slot=slider-thumb]:focus-visible,.demo-frame [data-slot=toggle-group-item]:focus-visible{outline:2px solid canvastext}}.demo-frame-body :where([data-slot=button][data-variant=outline]:not([data-chrome=own])){background:var(--exp-object);border-color:var(--exp-object-line-strong);color:var(--exp-ink);box-shadow:none}@media (hover:hover) and (pointer:fine){.demo-frame-body :where([data-slot=button][data-variant=outline]:not([data-chrome=own])):hover{background:var(--exp-object);border-color:var(--exp-object-line-strong);color:var(--exp-ink)}}.demo-frame-body :where([data-slot=button][data-variant=default]){background:var(--exp-ink);color:var(--exp-object);border-color:var(--exp-ink);box-shadow:none}@media (hover:hover) and (pointer:fine){.demo-frame-body :where([data-slot=button][data-variant=default]):hover{background:var(--exp-ink);color:var(--exp-object);opacity:.88}}.demo-frame-body [data-slot=button]:not([data-chrome=own]):not([data-size^=icon]){height:var(--demo-control);min-height:var(--demo-control);border-radius:var(--demo-radius-in);font-size:var(--text-xs);font-weight:var(--weight-medium);letter-spacing:var(--tracking-tight);padding-inline:.625rem}.demo-frame-header{justify-content:space-between;align-items:center;gap:var(--space-md);min-height:calc(var(--demo-pad) + var(--demo-control));padding-block:var(--demo-pad) 0;padding-inline:var(--demo-pad);display:flex}.demo-frame-header-end{justify-content:flex-end;align-items:center;gap:var(--space-md);min-width:0;min-height:var(--demo-control);flex-wrap:wrap;display:flex}.demo-frame-title{min-width:0;font-size:var(--text-xs);font-weight:var(--weight-medium);color:var(--exp-muted);letter-spacing:var(--tracking-tight);align-items:baseline;gap:.5rem;display:inline-flex}.demo-frame-scripted{box-shadow:inset 0 0 0 1px var(--exp-object-line-strong);font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--exp-muted);white-space:nowrap;border-radius:999px;padding:0 .375rem;line-height:1.5}.demo-frame-controls{align-items:center;gap:var(--space-md);display:flex}.demo-frame-controls button,.demo-frame-run{appearance:none;font-family:inherit;font-size:var(--text-xs);color:var(--exp-muted);letter-spacing:var(--tracking-tight);cursor:pointer;white-space:nowrap;transition:color var(--duration-ui) var(--ease-out);background:0 0;border:0;padding:0;position:relative}.demo-frame-run{font-weight:var(--weight-medium);color:var(--exp-ink)}.demo-frame-controls button:after,.demo-frame-run:after{content:"";position:absolute;inset-block:-.75rem;inset-inline:-.375rem}@media (hover:hover) and (pointer:fine){.demo-frame-controls button:hover,.demo-frame-run:hover{color:var(--exp-ink)}}.demo-frame-controls button[aria-pressed=true],.demo-frame-controls button[data-state=on]{color:var(--exp-ink)}.demo-frame-controls [data-slot=toggle-group]{gap:var(--space-md)}.demo-frame-hint{padding-inline:var(--demo-pad);font-size:var(--text-xs);line-height:var(--leading-ui);color:var(--exp-muted);letter-spacing:var(--tracking-tight);text-wrap:pretty;margin:.375rem 0 0}.demo-frame-hint[data-gone]{opacity:0}@media (prefers-reduced-motion:no-preference){.demo-frame-hint{transition:opacity .4s var(--ease-out)}}.demo-frame-body{padding-block:var(--demo-pad);padding-inline:var(--demo-pad)}.demo-frame-caption{padding-block:0 var(--demo-pad);padding-inline:var(--demo-pad);font-size:var(--text-xs);font-weight:var(--weight-regular);color:var(--exp-muted);letter-spacing:var(--tracking-tight);line-height:var(--leading-ui);text-wrap:pretty;margin:0}.article-prose>.demo-frame[data-width=text]{grid-column:4/span 6}@media (max-width:1023px){.article-prose>.demo-frame[data-width=text]{grid-column:1/-1}}@media (max-width:640px){.demo-frame[data-phone-cap] .demo-frame-body{max-height:78svh;overflow-y:auto}}.demo-frame-placeholder .demo-frame-body{flex-direction:column;flex:1;display:flex}.demo-frame-placeholder{flex-direction:column;display:flex}.demo-frame-placeholder-stage{border-radius:var(--demo-radius-in);background:var(--exp-stage);min-height:12rem;box-shadow:inset 0 0 0 1px var(--exp-stage-line);flex:1}.demo-frame,.demo-frame *{scrollbar-width:thin;scrollbar-color:transparent transparent}.demo-frame ::-webkit-scrollbar{width:6px;height:6px}.demo-frame ::-webkit-scrollbar-track{background:0 0}.demo-frame ::-webkit-scrollbar-thumb{background:0 0;border-radius:3px}.demo-frame .is-scrolling,.demo-frame :hover,.demo-frame :focus-within{scrollbar-color:oklch(from var(--exp-ink) l c h / .28) transparent}.demo-frame .is-scrolling::-webkit-scrollbar-thumb{background:oklch(from var(--exp-ink) l c h / .28)}.demo-frame :hover::-webkit-scrollbar-thumb{background:oklch(from var(--exp-ink) l c h / .28)}.demo-frame :focus-within::-webkit-scrollbar-thumb{background:oklch(from var(--exp-ink) l c h / .28)}@media (hover:none){.demo-frame *{scrollbar-color:oklch(from var(--exp-ink) l c h / .28) transparent}.demo-frame ::-webkit-scrollbar-thumb{background:oklch(from var(--exp-ink) l c h / .28)}}@media (forced-colors:active){.demo-frame,.demo-frame *{scrollbar-color:auto}}