.demo{container-type:inline-size}.demo-screen{position:relative}.demo-callout{z-index:2;pointer-events:none;margin-left:24px;animation:.36s cubic-bezier(.23,1,.32,1) both demo-callout-slide,1.8s ease-in-out .36s infinite demo-callout-sway;position:absolute;transform:translateY(-50%)}.demo-callout>*{animation:.36s cubic-bezier(.23,1,.32,1) both demo-callout-fade}.demo-callout-shadow,.demo-callout-edge,.demo-callout-glass{position:absolute}.demo-callout-edge,.demo-callout-glass{top:0;left:0}.demo-callout-shadow,.demo-callout-edge{overflow:visible}.demo-callout-glass{-webkit-backdrop-filter:blur(14px)saturate(180%);backdrop-filter:blur(14px)saturate(180%);background:linear-gradient(#fffc,#ffffffa8)}.demo-callout-body{color:#1d1e22;text-align:left;flex-direction:column;gap:2px;max-width:250px;margin:0;padding:9px 13px 10px;font-size:13.5px;line-height:1.35;display:flex;position:relative}.demo-callout strong{font-weight:650}.demo-callout-body span{color:#45464b;font-size:12.5px;font-weight:500}@keyframes demo-callout-slide{0%{transform:translate(-6px,-50%)}}@keyframes demo-callout-sway{0%,to{translate:0}50%{translate:-5px}}@keyframes demo-callout-fade{0%{opacity:0}}.demo-panel{aspect-ratio:2;touch-action:manipulation;background:#6f86d9 url(../media/wallpaper.2g383qzoers_5.webp) 50% 30%/cover no-repeat;border-radius:22px;width:100%;position:relative;overflow:hidden;box-shadow:0 0 0 1px #1d1e221f,0 30px 70px -34px #1d1e2273}@container not (min-width:720px){.demo-panel{aspect-ratio:600/560;background-image:url(../media/wallpaper-small.07n52e50pdnjw.webp);border-radius:16px}}.demo-menubar{box-sizing:border-box;-webkit-backdrop-filter:blur(20px)saturate(170%);backdrop-filter:blur(20px)saturate(170%);color:#1d1e22e0;white-space:nowrap;pointer-events:none;background:#ffffff6b;align-items:center;font-family:system-ui,-apple-system,sans-serif;font-weight:500;display:flex;position:absolute;top:0;left:0}.demo-menubar-app{font-weight:700}.demo-menubar-status{align-items:center;margin-left:auto;display:flex}.demo-stage{transform-origin:0 0;position:absolute;top:0;left:0}@container not (min-width:1248px){.demo-stage:not([data-measured]){visibility:hidden}}.demo-world{width:0;height:0;position:absolute;top:0;left:0}:where(.demo) button{appearance:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;border:0;margin:0;padding:0}.demo button:disabled{cursor:default}.demo-button{justify-content:center;align-items:center;transition:transform .1s ease-out,opacity .1s ease-out;display:flex}.demo-button:active:not(:disabled){opacity:.85;transform:scale(.97)}.demo-cable{background:0 0}.demo-plug{animation:4s ease-in-out infinite demo-nudge;display:block}.demo-cable:disabled .demo-plug{animation:none}@media (hover:hover) and (pointer:fine){.demo-cable:not(:disabled):hover .demo-plug{transition:transform .2s cubic-bezier(.23,1,.32,1);animation:none;transform:translateY(-6px)}}@keyframes demo-nudge{0%,60%,to{transform:translateY(0)}70%{transform:translateY(-8px)}80%{transform:translateY(-1px)}90%{transform:translateY(-6px)}}.demo-panel :focus-visible{outline-offset:3px;outline:3px solid #ffffffe6}.demo-hint{min-height:28px;color:var(--muted);justify-content:center;align-items:center;gap:12px;margin:16px 0 0;font-size:15px;font-weight:500;display:none}@container not (min-width:720px){.demo-hint{flex-direction:column;gap:2px;display:flex}}.demo-hint-note{text-align:center;justify-content:center;min-height:20px;font-size:13px;display:flex}.demo-hint-line{justify-content:center;align-items:center;display:flex}.demo-hint-text{align-items:center;gap:8px;animation:.4s cubic-bezier(.23,1,.32,1) both demo-hint-in;display:inline-flex}@keyframes demo-hint-in{0%{opacity:0;transform:translateY(4px)}}.demo-actions{flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;display:none}@container not (min-width:480px){.demo-hint{flex-direction:column;gap:10px}.demo-hint-line{min-height:28px}.demo-actions{min-height:44px;display:flex}}.demo-action{white-space:nowrap;background:var(--sunken);height:44px;color:var(--ink);border-radius:22px;padding:0 18px;font-size:15px;font-weight:600}.demo-action.primary{background:var(--ink);color:var(--page)}.demo-action.danger{color:#fff;background:#ff375f}@media (prefers-reduced-motion:reduce){.demo-plug,.demo-hint-text,.demo-callout{animation:none}.demo-callout>*{animation-duration:.2s}.demo-button{transition:none}}.demo{font-family:system-ui,-apple-system,Segoe UI,sans-serif}.demo-panel{box-shadow:none;border-radius:0}@container not (min-width:720px){.demo-panel{border-radius:0}.demo-hint{margin:0;padding:16px 16px 4px}[data-demo-alone] .demo-hint{padding-bottom:20px}}.demo-poster{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.demo-poster.narrow{display:none}.demo-panel:has(>.demo-poster){background-position:-8px -8px;background-size:1px 1px}@container not (min-width:720px){.demo-poster.wide{display:none}.demo-poster.narrow{display:block}}.demo-hint [data-placeholder]{visibility:hidden}