:where(.deploy-card){border:1px solid var(--line);background:var(--bg-soft);max-width:34rem;box-shadow:0 2px 4px var(--shadow), 0 16px 36px var(--shadow);border-radius:14px;margin-top:.45rem;overflow:hidden}:where(.deploy-bar){background:var(--card);border-bottom:1px solid var(--line-soft);align-items:center;gap:.6rem;padding:.5rem .8rem;display:flex}:where(.deploy-lights){flex-shrink:0;gap:.32rem;display:inline-flex}:where(.deploy-lights i){background:color-mix(in oklab, var(--ink) 16%, transparent);border-radius:9999px;width:.5rem;height:.5rem}:where(.deploy-lights i:first-child){background:#ff5a4ecc}:where(.deploy-pill){background:var(--line-soft);border:1px solid var(--line-soft);min-width:0;font-family:var(--font-mono);color:var(--ink-soft);border-radius:9999px;flex:1;align-items:center;gap:.35rem;padding:.24rem .7rem;font-size:.64rem;display:inline-flex}:where(.deploy-pill svg){color:var(--ink-mute);flex-shrink:0}:where(.deploy-url){text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:where(.deploy-screen){height:17rem;position:relative;overflow:hidden}:where(.deploy-expand){border-radius:var(--radius-control);width:1.75rem;height:1.75rem;color:var(--ink-soft);cursor:pointer;background:0 0;border:1px solid #0000;flex:none;place-items:center;margin:-.2rem -.35rem -.2rem 0;transition:color .2s,border-color .2s,background-color .2s;display:grid}:where(.deploy-expand svg){fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;width:.95rem;height:.95rem}:where(.deploy-expand:hover){color:var(--ink);border-color:var(--line);background:var(--line-soft)}:where(.deploy-expand:focus-visible){outline:2px solid var(--accent);outline-offset:2px}:where(.deploy-fav){border-radius:3px;flex-shrink:0;width:.55rem;height:.55rem}:where(.dm-scale){transform-origin:0 0;width:1280px;font-family:var(--font-sans);font-size:15px;line-height:1.55}.demo-viewer{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;width:min(78rem,100vw - 2rem);max-width:none;height:min(56rem,100vh - 2rem);color:#edf2ec;--bg:#0a0d0b;--bg-soft:#161d15;--card:#10150f;--ink:#edf2ec;--ink-soft:#a9b3a8;--ink-mute:#7a867b;--accent:#34e089;--accent-strong:#63efa9;--on-accent:#06130b;--line:#edf2ec21;--line-soft:#edf2ec14;--shadow:#0000008c;background:0 0;border:0;height:min(56rem,100svh - 2rem);max-height:none;margin:auto;padding:0}.demo-viewer::backdrop{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#040806c7}.demo-viewer-panel{border-radius:var(--radius-panel);background:#0f1216;border:1px solid #edf2ec29;flex-direction:column;height:100%;display:flex;overflow:hidden;box-shadow:0 50px 120px -40px #000000e6}.demo-viewer[open] .demo-viewer-panel{animation:demo-viewer-in .5s var(--ease-expo)}@keyframes demo-viewer-in{0%{opacity:0;transform:translateY(18px)scale(.985)}}.demo-viewer-bar{padding:.6rem .75rem .6rem .9rem}.demo-viewer-bar .deploy-pill{color:var(--ink-soft)}.demo-viewer-bar .deploy-pill svg{color:var(--ink-mute)}.demo-viewer-note{color:var(--ink-mute);white-space:nowrap;text-overflow:ellipsis;margin-left:auto;font-size:.78rem;overflow:hidden}.demo-viewer-close{border:1px solid var(--line);width:2.25rem;height:2.25rem;color:var(--ink-soft);cursor:pointer;background:0 0;border-radius:9999px;flex:none;place-items:center;transition:color .25s,border-color .25s;display:grid}.demo-viewer-close:hover{color:var(--ink);border-color:var(--ink-soft)}.demo-viewer-close:focus-visible{outline:2px solid var(--accent);outline-offset:3px}.demo-viewer-close svg{fill:none;stroke:currentColor;stroke-width:2px;stroke-linecap:round;width:1rem;height:1rem}.demo-viewer-screen{z-index:0;overscroll-behavior:contain;flex:1;min-height:0;position:relative;overflow:auto}.demo-viewer-screen:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}.demo-viewer-sizer{z-index:-1;position:relative;overflow:hidden}@media (max-width:767px){.demo-viewer{width:100%;height:100vh;box-sizing:border-box;height:100svh;padding:0;padding:constant(safe-area-inset-top) constant(safe-area-inset-right) constant(safe-area-inset-bottom) constant(safe-area-inset-left);padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}.demo-viewer-panel{border:0;border-radius:0}.demo-viewer-note{display:none}.demo-viewer-close{margin-left:auto}}@media (prefers-reduced-motion:reduce){.demo-viewer[open] .demo-viewer-panel{animation:none}.demo-viewer-close{transition:none}}