@media (prefers-reduced-motion:reduce){[data-demo-run]:not([data-demo-optin]) .demo-qr-laser,[data-demo-run]:not([data-demo-optin]) .demo-ripple-ring,[data-demo-run]:not([data-demo-optin]) .demo-sweep{animation:none}}:root{--demo-ease-out:cubic-bezier(0.22,1,0.36,1);--demo-ease-io:cubic-bezier(0.65,0,0.35,1);--demo-ease-pop:cubic-bezier(0.34,1.56,0.64,1);--demo-screen-bg:#f5f7fb;--demo-screen-fg:#0f172a;--demo-screen-muted:#43506a;--demo-gold:#fbbc04;--demo-wa:#25d366}[data-demo-state=paused] *,[data-demo-state=paused] :after,[data-demo-state=paused] :before{animation-play-state:paused!important}[data-demo-ambient]{--ripple-iter:3;--laser-iter:3;--sweep-iter:1}.demo-shell{position:relative;container:demo/inline-size}.demo-stage{position:relative;aspect-ratio:var(--ar);overflow:hidden;contain:layout paint}@container demo (min-width: 480px){.demo-stage{aspect-ratio:var(--ar-md,var(--ar))}}@container demo (min-width: 720px){.demo-stage{aspect-ratio:var(--ar-lg,var(--ar-md,var(--ar)))}}.demo-scene{position:absolute;inset:0}.demo-toggle{position:absolute;right:.5rem;bottom:.5rem;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;padding:0;border:1px solid rgba(255,255,255,.18);border-radius:999px;background-color:rgba(15,23,42,.68);color:#ffffff;cursor:pointer;transition:background-color .15s ease-out}.demo-toggle:hover{background-color:rgba(15,23,42,.84)}.demo-toggle:focus-visible{outline:2px solid #ffffff;outline-offset:2px;box-shadow:0 0 0 4px rgba(15,23,42,.85)}.demo-toggle--ink{border-color:rgba(255,255,255,.55);background-color:rgba(255,255,255,.16)}.demo-toggle--ink:hover{background-color:rgba(255,255,255,.28)}.demo-phone{--demo-phone-w:var(--phone-w,40cqw);position:relative;width:var(--demo-phone-w);aspect-ratio:1/2.05;padding:.7em;border-radius:3.2em;font-size:calc(var(--demo-phone-w) / 20);line-height:1.25;background:linear-gradient(145deg,#3a4252,#12161e 45%,#262c38);box-shadow:0 2.2em 5em rgba(0,0,0,.4),inset 0 0 0 1.5px rgba(255,255,255,.12)}.demo-phone-screen{position:relative;display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:2.5em;background-color:var(--demo-screen-bg);color:var(--demo-screen-fg)}.demo-phone[data-screen=theme] .demo-phone-screen{background-color:var(--color-surface);color:var(--color-fg)}.demo-phone-island{position:absolute;top:.55em;left:50%;z-index:1;width:5.6em;height:1.5em;margin-left:-2.8em;border-radius:999px;background-color:#05070b}.demo-phone-status{justify-content:space-between;height:2.6em;padding:0 1.9em;font-size:.9em;font-weight:700}.demo-phone-bar,.demo-phone-status{display:flex;flex:none;align-items:center}.demo-phone-bar{gap:.4em;margin:.2em 1.1em .5em;padding:.45em .8em;border-radius:999px;background-color:rgba(10,22,40,.07);color:var(--demo-screen-muted);font-size:.85em;font-weight:600;white-space:nowrap}.demo-phone[data-screen=theme] .demo-phone-bar{background-color:color-mix(in oklab,var(--color-fg) 8%,transparent);color:var(--color-fg-soft)}.demo-phone-lock{flex:none;width:.95em;height:.95em}.demo-url{min-width:0;overflow:hidden;text-overflow:ellipsis}.demo-phone-body{position:relative;flex:1;min-height:0;overflow:hidden}.demo-window{--demo-win-w:var(--win-w,100cqw);display:flex;flex-direction:column;width:var(--demo-win-w);max-width:100%;overflow:hidden;border:1px solid var(--color-line);border-radius:.8em;font-size:var(--win-fs,calc(var(--demo-win-w) * .032));line-height:1.3;background-color:var(--color-surface);color:var(--color-fg);box-shadow:0 1.2em 3em rgba(0,0,0,.22)}.demo-window-bar{display:flex;flex:none;align-items:center;gap:.8em;padding:.55em .9em;border-bottom:1px solid var(--color-line);background-color:var(--color-surface-2)}.demo-window-dots{display:flex;flex:none;gap:.35em}.demo-window-dot{width:.65em;height:.65em;border-radius:50%;background-color:#ff5f57}.demo-window-dot:nth-child(2){background-color:#febc2e}.demo-window-dot:nth-child(3){background-color:#28c840}.demo-window-url{display:flex;flex:1;align-items:center;gap:.4em;min-width:0;max-width:28em;margin-inline:auto;padding:.3em .8em;border-radius:999px;background-color:color-mix(in oklab,var(--color-fg) 6%,transparent);color:var(--color-fg-soft);font-size:.8em;white-space:nowrap}.demo-window-body{position:relative;flex:1;min-height:0}.demo-plaque{position:relative;width:var(--plaque-w,100%)}.demo-plaque-face{position:relative;display:block;width:100%;height:auto}.demo-plaque-edge{position:absolute;inset:0;width:100%;height:100%;filter:brightness(.6) saturate(.7);transform:translate(calc(var(--e) * .35%),calc(var(--e) * .7%))}.demo-plaque-shadow{position:absolute;right:8%;bottom:-6%;left:8%;height:12%;border-radius:50%;background:radial-gradient(ellipse at center,rgba(0,0,0,.42),transparent 70%)}.demo-sweep-mask{position:absolute;inset:0;overflow:hidden;pointer-events:none}.demo-sweep{position:absolute;top:0;bottom:0;left:-50%;width:50%;opacity:0;background:linear-gradient(105deg,transparent,rgba(255,255,255,.55) 50%,transparent)}[data-demo-run] .demo-sweep{animation:demo-sweep var(--sweep-dur,4.5s) var(--demo-ease-io) var(--sweep-delay,0s) var(--sweep-iter,infinite)}@keyframes demo-sweep{12%{opacity:1}60%{opacity:1;transform:translateX(300%)}66%{opacity:0;transform:translateX(300%)}}.demo-ripples{position:relative;display:block;width:var(--ripple-size,4em);aspect-ratio:1;color:var(--ripple-color,var(--color-brand-500));pointer-events:none}.demo-ripple-ring{position:absolute;inset:0;border:2px solid;border-radius:50%;opacity:calc(.75 - var(--i) * .2);transform:scale(calc(.55 + var(--i) * .22))}[data-demo-run] .demo-ripple-ring{animation:demo-ripple var(--ripple-dur,1.6s) var(--demo-ease-out) var(--ripple-iter,infinite);animation-delay:calc(var(--i) * .28s)}@keyframes demo-ripple{8%{opacity:0;transform:scale(.35)}30%{opacity:.9}85%{opacity:0;transform:scale(1.45)}}.demo-qr-vf{position:relative;display:block;width:var(--vf-size,6em);aspect-ratio:1;color:var(--vf-color,var(--color-brand-500));pointer-events:none}.demo-qr-corner{position:absolute;width:24%;height:24%;border:0 solid}.demo-qr-corner[data-c=tl]{top:0;left:0;border-top-width:3px;border-left-width:3px;border-top-left-radius:18%}.demo-qr-corner[data-c=tr]{top:0;right:0;border-top-width:3px;border-right-width:3px;border-top-right-radius:18%}.demo-qr-corner[data-c=bl]{bottom:0;left:0;border-bottom-width:3px;border-left-width:3px;border-bottom-left-radius:18%}.demo-qr-corner[data-c=br]{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px;border-bottom-right-radius:18%}.demo-qr-laser{position:absolute;inset:8%;opacity:0}.demo-qr-laser:before{content:"";position:absolute;top:0;right:0;left:0;height:2px;border-radius:2px;background-color:currentColor;box-shadow:0 0 6px currentColor}[data-demo-run] .demo-qr-laser{animation:demo-laser var(--laser-dur,1.6s) var(--demo-ease-io) var(--laser-iter,infinite)}@keyframes demo-laser{10%{opacity:1;transform:translateY(0)}50%{opacity:1;transform:translateY(100%)}90%{opacity:1;transform:translateY(0)}}.demo-stars{display:inline-flex;gap:.18em}.demo-star{position:relative;display:block;width:1em;height:1em}.demo-star-base,.demo-star-fill{position:absolute;inset:0;width:100%;height:100%}.demo-star-base{fill:#d5dce8}.demo-star-fill{fill:var(--demo-gold);opacity:0}.demo-star[data-on] .demo-star-fill{opacity:1}.demo-cursor{position:absolute;top:0;left:0;z-index:3;width:1.6em;height:1.6em;pointer-events:none}.demo-cursor-arrow{position:relative;display:block;width:100%;height:100%;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}.demo-cursor-press{position:absolute;top:-.6em;left:-.6em;width:1.4em;height:1.4em;border-radius:50%;background-color:color-mix(in oklab,var(--color-brand-500) 40%,transparent);opacity:0;transform:scale(.4)}.demo-toast{display:inline-flex;align-items:center;gap:.5em;padding:.55em .9em;border:1px solid var(--color-line);border-radius:.7em;background-color:var(--color-surface);color:var(--color-fg);font-weight:600;line-height:1.25;box-shadow:0 .6em 1.6em rgba(0,0,0,.18)}.demo-toast-icon{flex:none;width:1.15em;height:1.15em;color:#10b981}.demo-toast[data-tone=neutral] .demo-toast-icon{color:var(--color-brand-500)}.demo-bars{display:flex;align-items:flex-end;gap:var(--bar-gap,3%);width:100%;height:100%}.demo-bar{flex:1 1 0;height:100%;border-radius:.15em .15em 0 0;background-color:var(--bar-color,var(--color-brand-500));transform:scaleY(var(--v));transform-origin:bottom}.demo-bars[data-orientation=horizontal]{flex-direction:column;align-items:stretch}.demo-bars[data-orientation=horizontal] .demo-bar{width:100%;border-radius:0 .15em .15em 0;transform:scaleX(var(--v));transform-origin:left}.demo-bars[data-has-hl] .demo-bar:not([data-hl]){opacity:.5}.demo-heat-grid{display:grid;grid-template-columns:auto repeat(24,minmax(0,1fr));gap:var(--heat-gap,2px)}.demo-heat-label{display:flex;align-items:center;padding-inline-end:.35em;color:var(--color-fg-soft);font-size:.7em;line-height:1}.demo-heat-cell{aspect-ratio:1;border-radius:2px;background-color:var(--color-brand-500)}.demo-heat-cell[data-empty]{background-color:var(--color-surface-2)}.demo-heat-cell[data-peak]{position:relative;z-index:1;outline:2px solid var(--color-fg);outline-offset:1px}.demo-heat-tick{min-width:0;overflow:hidden;font-size:.6em;white-space:nowrap}.demo-heat-legend,.demo-heat-tick{color:var(--color-fg-soft);line-height:1}.demo-heat-legend{display:flex;align-items:center;justify-content:flex-end;gap:.25em;margin-top:.5em;font-size:.65em}.demo-heat-swatch{width:1em;height:1em;border-radius:2px;background-color:var(--color-brand-500)}.demo-heat-swatch[data-empty]{background-color:var(--color-surface-2)}