.ss-demo{margin-block:2.5rem 3rem}.ss-demo>.ss-fit{outline-offset:-1px;border-radius:.5rem;outline:1px solid oklch(0% 0 0/.1);overflow:hidden}.ss-demo{--demo-blue:#2563eb;--demo-blue-2:#4f7cff;--demo-violet:#7c3aed;--demo-pink:#db2777;--demo-orange:#f97316;--demo-yellow:#facc15;--demo-green:#16a34a;--demo-green-ink:#15803d;--demo-red:#dc2626;--demo-grid:oklch(0% 0 0/.045)}.ss-demo .ss-stage:not([data-theme=dark]){--ss-text:#636367;--ss-text-faint:#6c6c70}.ss-demo .ss-stage{--ss-font:var(--font-sans);--ss-accent:var(--demo-blue);--ss-accent-2:var(--demo-blue-2);--ss-shadow-card:0 0 0 1px oklch(0% 0 0/.05), 0 2px 6px oklch(0% 0 0/.05), 0 10px 24px -10px oklch(0% 0 0/.14);background:0 0;overflow:clip}.ss-demo>.ss-fit{background-color:#f6f6f7;background-image:linear-gradient(to right, var(--demo-grid) 1px, transparent 1px), linear-gradient(to bottom, var(--demo-grid) 1px, transparent 1px);background-position:-1px -1px;background-size:20px 20px}.ss-demo__hint{color:var(--color-muted-foreground);margin-top:.5rem;font-size:.75rem;line-height:1.4}.ss-demo button{cursor:pointer;font:inherit;color:inherit}.ss-demo button:disabled{cursor:default}.ss-demo .demo-seg{background:var(--ss-ink-1);border-radius:8px;padding:2px;display:inline-flex}.ss-demo .demo-seg button{height:26px;color:var(--ss-text);background:0 0;border:1px solid #0000;border-radius:6px;padding-inline:10px;font-size:12px;transition:background-color .15s ease-out,color .15s ease-out}.ss-demo .demo-seg button[aria-pressed=true]{background:linear-gradient(180deg, var(--demo-blue-2), var(--demo-blue));color:#fff;border-color:#1d4ed8;box-shadow:0 1px 2px oklch(35% .2 265/.3)}.ss-demo .demo-btn{border:1px solid var(--color-border-strong);height:30px;color:var(--ss-text-strong);background:var(--ss-surface);border-radius:999px;padding-inline:12px;font-size:13px;font-weight:500;transition:background-color .15s ease-out,scale .15s ease-out}@media (hover:hover){.ss-demo .demo-btn:hover:not(:disabled){background:var(--ss-canvas)}}@media (prefers-reduced-motion:no-preference){.ss-demo .demo-btn:active:not(:disabled){scale:.96}}.ss-demo .demo-btn[data-tone=primary]{color:#fff;background:linear-gradient(180deg, var(--demo-blue-2), var(--demo-blue));border-color:#1d4ed8;box-shadow:0 1px 2px oklch(35% .2 265/.3),inset 0 1px oklch(100% 0 0/.25)}@media (hover:hover){.ss-demo .demo-btn[data-tone=primary]:hover:not(:disabled){background:linear-gradient(180deg, var(--demo-blue-2), #1d4ed8)}}@keyframes demo-rise{0%{opacity:0;filter:blur(4px);translate:0 12px}}@keyframes demo-fade{0%{opacity:0}}.ss-demo[data-in] :is(.demo-card,.demo-rise){animation:.3s ease-out backwards demo-fade;animation-delay:var(--rise,0s)}@media (prefers-reduced-motion:no-preference){.ss-demo[data-in] :is(.demo-card,.demo-rise){animation:.45s cubic-bezier(.22,1,.36,1) backwards demo-rise;animation-delay:var(--rise,0s)}}.ss-demo .demo-card{border-radius:var(--ss-radius-lg);background:var(--ss-surface);box-shadow:var(--ss-shadow-card)}.ss-demo .demo-btn:disabled{opacity:.5}.ss-demo .demo-sr{clip-path:inset(50%);white-space:nowrap;border-width:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.logm>.ss-fit{background:#000}.logm .logm-board{position:absolute;inset:0}.logm .logm-shapes{touch-action:pan-y;cursor:crosshair;width:100%;height:100%;position:absolute;inset:0}.logm .logm-shapes circle,.logm .logm-shapes rect,.logm .logm-shapes polygon{fill:#0000;stroke:#fff;stroke-width:3.4px;pointer-events:all}@keyframes logm-draw{0%{stroke-dashoffset:1px}}@media (prefers-reduced-motion:no-preference){.logm [data-drawn] .logm-shapes :is(circle,rect,polygon){stroke-dasharray:1;animation:1.1s cubic-bezier(.65,0,.35,1) backwards logm-draw;animation-delay:calc(var(--i) * 45ms)}}.logm .logm-panel{backdrop-filter:blur(8px);color:#fff;background:oklch(0% 0 0/.75);border:1px solid oklch(100% 0 0/.25);border-radius:999px;align-items:center;gap:10px;padding:4px 4px 4px 14px;display:flex;position:absolute;bottom:16px;left:16px}.logm .logm-panel__label{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;font-size:12px}.logm .logm-seg{gap:2px;display:flex}.logm .logm-seg button{height:28px;font-family:var(--font-mono);color:#fff;background:0 0;border:1px solid #0000;border-radius:999px;padding:0 12px;font-size:12px;transition:background-color .15s ease-out,color .15s ease-out,scale .15s ease-out}@media (hover:hover){.logm .logm-seg button:hover:not([aria-pressed=true]){background:oklch(100% 0 0/.14)}}.logm .logm-seg button[aria-pressed=true]{color:#000;background:#fff;border-color:#fff}@media (prefers-reduced-motion:no-preference){.logm .logm-seg button:active{scale:.96}}