.demo-launcher[hidden],.demo-launcher [hidden]{display:none!important}.demo-launcher{position:fixed;inset:0;z-index:1000;display:grid;background:color-mix(in srgb,var(--color-backdrop) 92%,transparent);color:var(--color-ink);backdrop-filter:blur(12px)}.demo-shell{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;width:100vw;height:100dvh;background:var(--color-canvas)}.demo-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;border-bottom:1px solid var(--color-line);padding:.7rem 1rem;background:var(--color-surface)}.demo-identity{display:flex;align-items:center;gap:.8rem}.demo-identity>strong{font-size:.9rem}.demo-identity>span,.demo-shared p{color:var(--color-muted);font-size:.72rem}.demo-identity small,.demo-shared small{display:block;color:var(--color-subtle);font:400 .72em/1.2 var(--font-mono)}.demo-shared{display:flex;align-items:center;justify-self:center;gap:.5rem}.demo-shared>span{width:.45rem;height:.45rem;border-radius:50%;background:var(--color-brand-500)}.demo-actions{display:flex;align-items:center;gap:.45rem}.demo-actions button,.demo-actions a,.demo-failure a,.demo-confirm button{border:1px solid var(--color-line);border-radius:999px;background:var(--color-panel);padding:.52rem .75rem;color:var(--color-ink);font-size:.68rem;font-weight:600;cursor:pointer}.demo-actions button:hover,.demo-actions a:hover,.demo-failure a:hover,.demo-confirm button:hover{border-color:var(--color-brand-500)}.demo-actions button:disabled,.demo-confirm button:disabled{opacity:.55;cursor:wait}.demo-guide{border-bottom:1px solid var(--color-line);padding:.52rem 1rem;color:var(--color-muted);font-size:.7rem;text-align:center}.demo-stage{position:relative;display:grid;place-items:center;box-sizing:border-box;min-width:0;min-height:0;overflow:hidden;background:var(--color-panel)}.demo-frame{display:block;width:max(100%,var(--demo-min-width,1200px));height:100%;border:0;background:#fff}.demo-shell--phone .demo-stage{padding:1rem}.demo-shell--phone .demo-frame{width:auto;height:auto;aspect-ratio:var(--demo-stage-ratio,444 / 894);max-width:100%;max-height:100%;border:1px solid var(--color-line);border-radius:24px;background:#fff;box-shadow:0 18px 48px #00000024}.demo-shell--phone[data-demo-canvas=desktop] .demo-frame{height:var(--demo-canvas-height,100%);width:calc(var(--demo-canvas-height,100%) * var(--demo-stage-width,444) / var(--demo-stage-height,894));max-height:none}.demo-shell--phone[data-demo-canvas=mobile] .demo-frame{height:calc(var(--demo-stage-height,894) * 1px);width:calc(var(--demo-stage-width,444) * 1px);max-height:100%;max-width:92vw;transform:scale(var(--demo-canvas-scale,1));transform-origin:center center}.demo-loading,.demo-slow,.demo-failure{position:absolute;inset:0;z-index:2;display:grid;place-content:center;gap:.8rem;background:var(--color-panel);text-align:center}.demo-loading span{width:2rem;height:2rem;margin:auto;border:2px solid var(--color-line);border-top-color:var(--color-brand-500);border-radius:50%;animation:demo-spin .8s linear infinite}.demo-loading p,.demo-slow p,.demo-failure p{color:var(--color-muted);font-size:.76rem}.demo-slow strong,.demo-failure strong{font-size:1rem}.demo-slow a,.demo-failure a{justify-self:center;margin-top:.4rem}.demo-status{min-height:1.8rem;border-top:1px solid var(--color-line);padding:.4rem 1rem;color:var(--color-muted);font-size:.68rem;text-align:center}.demo-confirm{position:absolute;inset:0;z-index:4;display:grid;place-items:center;background:color-mix(in srgb,var(--color-backdrop) 78%,transparent);padding:1rem;backdrop-filter:blur(6px)}.demo-confirm>div{width:min(100%,30rem);border:1px solid var(--color-line);border-radius:var(--radius-card);background:var(--color-surface);padding:1.5rem;box-shadow:var(--shadow-card)}.demo-confirm h2{margin-top:.8rem;font-size:1.05rem;line-height:1.6}.demo-confirm>div>div{display:flex;justify-content:flex-end;gap:.5rem;margin-top:1.4rem}.demo-confirm [data-demo-reset-confirm]{border-color:var(--color-brand-500);background:var(--color-brand-500);color:#fff}@keyframes demo-spin{to{transform:rotate(360deg)}}@media(max-width:900px){.demo-shared{display:none}}@media(max-width:768px){.demo-shell--phone .demo-bar{position:absolute;inset:0 0 auto;z-index:3;background:linear-gradient(var(--color-surface),color-mix(in srgb,var(--color-surface) 82%,transparent))}.demo-shell--phone .demo-identity,.demo-shell--phone .demo-actions a,.demo-shell--phone .demo-guide,.demo-shell--phone .demo-status{display:none}}.demo-shell--phone[data-demo-full-bleed=true] .demo-bar{display:none}.demo-shell--phone[data-demo-full-bleed=true] .demo-stage{height:100dvh;padding:0;background:#fff}.demo-shell--phone[data-demo-full-bleed=true] .demo-frame{width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;border:0;border-radius:0;box-shadow:none;transform:none}.demo-shell--phone[data-demo-full-bleed=true] .demo-float{position:absolute;top:max(.75rem,env(safe-area-inset-top));z-index:5}.demo-shell[data-demo-full-bleed=true] .demo-viewport-toggle{right:calc(max(.75rem,env(safe-area-inset-right)) + 3.1rem)}.demo-shell[data-demo-full-bleed=true] [data-demo-close]{right:max(.75rem,env(safe-area-inset-right));padding:0;width:2.6rem;height:2.6rem;justify-content:center;border-radius:999px;background:color-mix(in srgb,var(--color-surface) 88%,transparent);color:var(--color-ink);font-size:0;box-shadow:0 2px 10px #00000029}.demo-shell[data-demo-full-bleed=true] [data-demo-close] span{font-size:1rem}.demo-shell[data-demo-full-bleed=true] [data-demo-viewport-toggle]{padding:.5rem .7rem;box-shadow:0 2px 10px #00000029}@media(prefers-reduced-motion:reduce){.demo-loading span{animation-duration:1.6s}}