.demo-phone{--demo-w:15rem;--demo-bezel:.5rem;inline-size:calc(var(--demo-w) + 2 * var(--demo-bezel));block-size:calc(var(--demo-w) * 16 / 9 + 2 * var(--demo-bezel));padding:var(--demo-bezel);background:var(--color-surface);border-radius:calc(var(--radius-lg) + var(--demo-bezel));box-shadow:var(--shadow-big);flex:none;position:relative}.demo-phone:has(:focus-visible){outline:3px solid var(--color-focus);outline-offset:4px}.demo-screen.sfy-stage{--sfy-w:var(--demo-w);--sfy-h:calc(var(--demo-w) * 16 / 9);border-radius:var(--radius-lg);margin:0;display:none}.demo-screen[data-index="0"]{display:block}.demo[data-selected] .demo-screen{display:none}.demo[data-selected="0"] .demo-screen[data-index="0"],.demo[data-selected="1"] .demo-screen[data-index="1"],.demo[data-selected="2"] .demo-screen[data-index="2"],.demo[data-selected="3"] .demo-screen[data-index="3"],.demo[data-selected="4"] .demo-screen[data-index="4"]{display:block}@supports selector(:has(*)){.demo:has(.demo-radio:checked) .demo-screen{display:none}.demo:has(.demo-radio[value="0"]:checked) .demo-screen[data-index="0"],.demo:has(.demo-radio[value="1"]:checked) .demo-screen[data-index="1"],.demo:has(.demo-radio[value="2"]:checked) .demo-screen[data-index="2"],.demo:has(.demo-radio[value="3"]:checked) .demo-screen[data-index="3"],.demo:has(.demo-radio[value="4"]:checked) .demo-screen[data-index="4"]{display:block}.demo:has(.demo-radio:checked) [data-demo-for]{display:none}.demo:has(.demo-radio[value="0"]:checked) [data-demo-for="0"],.demo:has(.demo-radio[value="1"]:checked) [data-demo-for="1"],.demo:has(.demo-radio[value="2"]:checked) [data-demo-for="2"],.demo:has(.demo-radio[value="3"]:checked) [data-demo-for="3"],.demo:has(.demo-radio[value="4"]:checked) [data-demo-for="4"]{display:inline-flex}}.demo-layer{position:absolute;inset:0}.demo-cover{z-index:1;transition:opacity var(--duration-slow) var(--ease-out)}.demo-live{z-index:0}.demo-overlay{z-index:2}.demo-screen[data-state=live] .demo-cover{opacity:0;visibility:hidden;pointer-events:none}.demo-screen[data-state=live] .demo-overlay{display:none}.demo-open{inline-size:100%;padding:0 0 calc(var(--v) * 9);border-radius:inherit;color:inherit;cursor:pointer;animation:demo-ready var(--duration-slow) var(--ease-out) both;background:0 0;border:0;place-items:end center;display:grid;position:absolute;inset:0}.demo-open:focus-visible{outline:3px solid var(--color-focus);outline-offset:-6px}@supports selector(:has(*)){.demo-open:focus-visible{outline:none}}.demo-open-pill{min-inline-size:calc(var(--u) * 46);padding:calc(var(--u) * 3.4) calc(var(--u) * 7);background:var(--t-accent,var(--color-accent));color:var(--t-bg,var(--color-ink));border-radius:calc(var(--u) * 10);box-shadow:0 0 0 calc(var(--u) * .8) var(--t-bg,transparent);font-family:var(--font-body);font-size:calc(var(--u) * 4.6);font-weight:var(--weight-bold);letter-spacing:.03em;transition:transform var(--duration-fast) var(--ease-out);line-height:1.2}.demo-open:hover .demo-open-pill{transform:scale(1.05)}.demo-open:active .demo-open-pill{transform:scale(.96)}.demo-open[aria-busy=true] .demo-open-pill{opacity:.75}@keyframes demo-ready{0%{opacity:0}to{opacity:1}}.demo-finale{justify-items:center;gap:calc(var(--u) * 3);padding:calc(var(--u) * 4);border:calc(var(--u) * .4) dashed currentColor;border-radius:calc(var(--u) * 3);font-family:var(--t-font-text,inherit);font-size:calc(var(--u) * 3.8);text-align:center;margin-block-start:calc(var(--u) * 6);line-height:1.35;display:grid}.demo-finale p{margin:0}.demo-finale a{min-block-size:calc(var(--u) * 12);padding:calc(var(--u) * 2) calc(var(--u) * 6);background:var(--t-ink,currentColor);color:var(--t-bg,#fff);border-radius:calc(var(--u) * 8);align-items:center;font-weight:700;text-decoration:none;display:inline-flex}.demo-status{justify-items:center;gap:var(--space-2);min-block-size:var(--tap-min);display:grid}.demo-status-alert{max-inline-size:22rem;color:var(--color-danger);font-size:var(--text-sm);text-align:center}.demo-button{min-block-size:var(--tap-min);padding-inline:var(--space-4);background:var(--color-surface);color:var(--color-text);border:var(--border-bold) solid var(--color-lavender-line);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-bold);cursor:pointer;transition:transform var(--duration-normal) var(--ease-out);align-items:center;display:inline-flex}.demo-button:hover{transform:translateY(-2px)}.demo-dialog{--demo-bar:3.25rem;background:var(--color-ink);block-size:100dvh;max-block-size:none;inline-size:100vw;max-inline-size:none;color:var(--color-bg);border:0;margin:0;padding:0;overflow:hidden}.demo-dialog::backdrop{background:var(--color-ink)}.demo-dialog-bar{justify-content:space-between;align-items:center;gap:var(--space-3);block-size:var(--demo-bar);padding-inline:var(--space-4) var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-bold);display:flex}.demo-dialog-bar p{text-overflow:ellipsis;white-space:nowrap;margin:0;overflow:hidden}.demo-dialog-close{min-block-size:var(--tap-min);padding-inline:var(--space-4);background:var(--color-accent);color:var(--color-on-accent);border-radius:var(--radius-pill);font-weight:var(--weight-bold);cursor:pointer;border:0;flex:none}.demo-dialog-close:focus-visible{outline-color:var(--color-bg)}.demo-dialog-stage.sfy-stage{--sfy-w:min(100vw, 30rem);--sfy-h:calc(100vh - var(--demo-bar))}@supports (height:100dvh){.demo-dialog-stage.sfy-stage{--sfy-h:calc(100dvh - var(--demo-bar))}}html:has(.demo-dialog[open]){overflow:hidden}.demo-switch{gap:var(--space-2);border:0;flex-wrap:wrap;min-inline-size:0;margin:0;padding:0;display:flex}.demo-switch legend{inline-size:100%;color:var(--color-text-muted);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-wide);text-transform:uppercase;margin-block-end:var(--space-2);padding:0}.demo-chip{display:inline-flex;position:relative}.demo-radio{opacity:0;cursor:pointer;block-size:100%;inline-size:100%;margin:0;position:absolute;inset:0}.demo-chip-face{align-items:center;gap:var(--space-2);min-block-size:var(--tap-min);padding-inline:var(--space-4);background:var(--color-surface);border:var(--border-bold) solid var(--color-lavender-line);border-radius:var(--radius-pill);font-size:var(--text-sm);font-weight:var(--weight-bold);transition:transform var(--duration-normal) var(--ease-out);display:inline-flex}.demo-radio:hover+.demo-chip-face{transform:translateY(-2px)}.demo-radio:checked+.demo-chip-face{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent);box-shadow:var(--shadow-cta)}.demo-radio:focus-visible+.demo-chip-face{outline:var(--border-bold) solid var(--color-focus);outline-offset:3px}.demo-chip-swatch{border:var(--border-hair) solid currentColor;border-radius:50%;flex:none;block-size:.9rem;inline-size:.9rem}