:root{--sileo-spring-easing: linear( 0, .002 .6%, .007 1.2%, .015 1.8%, .025 2.4%, .057 3.7%, .104 5.2%, .151 6.5%, .208 7.9%, .455 13.6%, .566 16.3%, .619 17.7%, .669 19.1%, .715 20.5%, .755 21.8%, .794 23.2%, .829 24.6%, .861 26%, .889 27.4%, .914 28.8%, .937 30.3%, .956 31.8%, .974 33.4%, .987 34.8%, .997 36.2%, 1.014 39.2%, 1.024 42.5%, 1.028 46.3%, 1.026 51.9%, 1.01 66.1%, 1.003 74.9%, 1 85.2%, 1 );--sileo-duration: .6s;--sileo-height: 40px;--sileo-width: 350px;--sileo-state-success: oklch(.723 .219 142.136);--sileo-state-loading: oklch(.556 0 0);--sileo-state-error: oklch(.637 .237 25.331);--sileo-state-warning: oklch(.795 .184 86.047);--sileo-state-info: oklch(.685 .169 237.323);--sileo-state-action: oklch(.623 .214 259.815);--sileo-fill: #FFFFFF;--sileo-text: #1a1a1a}[data-sileo-toast]{position:relative;cursor:pointer;pointer-events:auto;touch-action:none;border:0;background:transparent;padding:0;width:var(--sileo-width);height:var(--_h, var(--sileo-height));opacity:0;transform:translateZ(0) scale(.95);transform-origin:center;contain:layout style;overflow:visible;color:var(--sileo-text)}[data-sileo-toast][data-state=loading]{cursor:default}[data-sileo-toast][data-ready=true]{opacity:1;transform:translateZ(0) scale(1);transition:transform calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),opacity calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-bottom calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),margin-top calc(var(--sileo-duration) * .66) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){transform:translateY(6px) scale(.95)}[data-sileo-toast][data-ready=true][data-exiting=true]{opacity:0;pointer-events:none}[data-sileo-viewport][data-position^=top] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(-6px) scale(.95)}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast][data-ready=true][data-exiting=true]{transform:translateY(6px) scale(.95)}[data-sileo-canvas]{position:absolute;left:0;right:0;pointer-events:none;transform:translateZ(0);contain:layout style;overflow:visible}[data-sileo-canvas][data-edge=top]{bottom:0;transform:scaleY(-1) translateZ(0)}[data-sileo-canvas][data-edge=bottom]{top:0}[data-sileo-svg]{overflow:visible}[data-sileo-pill],[data-sileo-body]{transform-box:fill-box;transform-origin:50% 0%;fill:var(--sileo-fill)}[data-sileo-pill]{transform:scaleY(var(--_sy, 1));width:var(--_pw);height:var(--_ph)}[data-sileo-body]{transform:scaleY(var(--_by, 0));opacity:var(--_by, 0)}[data-sileo-toast][data-ready=true] [data-sileo-pill]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),width var(--sileo-duration) var(--sileo-spring-easing),height var(--sileo-duration) var(--sileo-spring-easing),x var(--sileo-duration) var(--sileo-spring-easing),fill var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-toast][data-ready=true][data-expanded=true] [data-sileo-pill]{transition-delay:calc(var(--sileo-duration) * .08)}[data-sileo-toast][data-ready=true] [data-sileo-body]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),opacity var(--sileo-duration) var(--sileo-spring-easing),fill var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header]{position:absolute;z-index:20;display:flex;align-items:center;padding:.5rem;height:var(--sileo-height);overflow:hidden;left:var(--_px, 0px);transform:var(--_ht);max-width:var(--_pw)}[data-sileo-toast][data-ready=true] [data-sileo-header]{transition:transform var(--sileo-duration) var(--sileo-spring-easing),left var(--sileo-duration) var(--sileo-spring-easing),max-width var(--sileo-duration) var(--sileo-spring-easing)}[data-sileo-header][data-edge=top]{bottom:0}[data-sileo-header][data-edge=bottom]{top:0}[data-sileo-header-stack]{position:relative;display:inline-flex;align-items:center;height:100%}[data-sileo-header-inner]{display:flex;align-items:center;gap:.5rem;white-space:nowrap;opacity:1;filter:blur(0px);will-change:opacity,filter}[data-sileo-header-inner][data-layer=current]{animation:sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing) both}[data-sileo-header-inner][data-layer=prev]{position:absolute;left:0;top:0;pointer-events:none}[data-sileo-header-inner][data-exiting=true]{animation:sileo-header-exit .15s ease forwards}[data-sileo-badge]{display:flex;height:24px;width:24px;flex-shrink:0;align-items:center;justify-content:center;padding:2px;box-sizing:border-box;border-radius:9999px;color:var(--sileo-tone, currentColor);background-color:var(--sileo-tone-bg, transparent)}[data-sileo-title]{font-size:.825rem;line-height:1rem;font-weight:500;text-transform:capitalize;color:var(--sileo-tone, currentColor)}:is([data-sileo-badge],[data-sileo-title])[data-state]{--_c: var(--sileo-state-success);--sileo-tone: var(--_c);--sileo-tone-bg: color-mix(in oklch, var(--_c) 20%, transparent)}:is([data-sileo-badge],[data-sileo-title])[data-state=loading]{--_c: var(--sileo-state-loading)}:is([data-sileo-badge],[data-sileo-title])[data-state=error]{--_c: var(--sileo-state-error)}:is([data-sileo-badge],[data-sileo-title])[data-state=warning]{--_c: var(--sileo-state-warning)}:is([data-sileo-badge],[data-sileo-title])[data-state=info]{--_c: var(--sileo-state-info)}:is([data-sileo-badge],[data-sileo-title])[data-state=action]{--_c: var(--sileo-state-action)}[data-sileo-content]{position:absolute;left:0;z-index:10;width:100%;pointer-events:none;opacity:var(--_co, 0)}[data-sileo-content]:not([data-visible=true]){content-visibility:hidden}[data-sileo-toast][data-ready=true] [data-sileo-content]{transition:opacity calc(var(--sileo-duration) * .08) var(--sileo-spring-easing) calc(var(--sileo-duration) * .04)}[data-sileo-content][data-edge=top]{top:0}[data-sileo-content][data-edge=bottom]{top:var(--sileo-height)}[data-sileo-content][data-visible=true]{pointer-events:auto}[data-sileo-toast][data-ready=true] [data-sileo-content][data-visible=true]{transition:opacity var(--sileo-duration) var(--sileo-spring-easing) calc(var(--sileo-duration) * .25)}[data-sileo-description]{width:100%;text-align:left;padding:1rem;font-size:.875rem;line-height:1.25rem;contain:layout style;content-visibility:auto}[data-sileo-button]{display:flex;align-items:center;justify-content:center;height:1.75rem;padding:0 .625rem;margin-top:.75rem;border-radius:9999px;border:0;font-size:.75rem;font-weight:500;cursor:pointer;color:var(--sileo-btn-color, currentColor);background-color:var(--sileo-btn-bg, transparent);transition:background-color .15s ease}[data-sileo-button]:hover{background-color:var(--sileo-btn-bg-hover, transparent)}[data-sileo-button][data-state]{--_c: var(--sileo-state-success);--sileo-btn-color: var(--_c);--sileo-btn-bg: color-mix(in oklch, var(--_c) 15%, transparent);--sileo-btn-bg-hover: color-mix(in oklch, var(--_c) 25%, transparent)}[data-sileo-button][data-state=loading]{--_c: var(--sileo-state-loading)}[data-sileo-button][data-state=error]{--_c: var(--sileo-state-error)}[data-sileo-button][data-state=warning]{--_c: var(--sileo-state-warning)}[data-sileo-button][data-state=info]{--_c: var(--sileo-state-info)}[data-sileo-button][data-state=action]{--_c: var(--sileo-state-action)}[data-sileo-icon=spin]{animation:sileo-spin 1s linear infinite}@keyframes sileo-spin{to{rotate:360deg}}@keyframes sileo-header-enter{0%{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0px)}}@keyframes sileo-header-exit{0%{opacity:1;filter:blur(0px)}to{opacity:0;filter:blur(6px)}}[data-sileo-viewport]{position:fixed;z-index:50;display:flex;gap:.75rem;padding:.75rem;pointer-events:none;max-width:calc(100vw - 1.5rem);contain:layout style}[data-sileo-viewport][data-position^=top] [data-sileo-toast]:not([data-ready=true]){margin-bottom:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=bottom] [data-sileo-toast]:not([data-ready=true]){margin-top:calc(-1 * (var(--sileo-height) + .75rem))}[data-sileo-viewport][data-position^=top]{top:0;flex-direction:column-reverse}[data-sileo-viewport][data-position^=bottom]{bottom:0;flex-direction:column}[data-sileo-viewport][data-position$=left]{left:0;align-items:flex-start}[data-sileo-viewport][data-position$=right]{right:0;align-items:flex-end}[data-sileo-viewport][data-position$=center]{left:50%;transform:translate(-50%);align-items:center}@media(prefers-reduced-motion:no-preference){[data-sileo-toast][data-ready=true]:hover,[data-sileo-toast][data-ready=true][data-exiting=true]{will-change:transform,opacity,height}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms;animation-iteration-count:1;transition-duration:.01ms}}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}:root{color-scheme:light dark;--sileo-fill: light-dark(#1a1a1a, #FFFFFF);--sileo-text: light-dark(#e0e0e0, #1a1a1a)}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;min-height:100vh;background:light-dark(#f5f5f7,#0a0a0a);color:light-dark(#1a1a1a,#e0e0e0)}.playground{--surface: light-dark(#ffffff, #141414);--surface-hover: light-dark(#f0f0f0, #1a1a1a);--border: light-dark(#d4d4d8, #2a2a2a);--border-hover: light-dark(#a1a1aa, #444444);--text-muted: light-dark(#666666, #888888);max-width:640px;margin:0 auto;padding:3rem 1.5rem;min-height:100vh}.hero{text-align:center;margin-bottom:3rem}.hero h1{font-size:2.5rem;font-weight:700;background:linear-gradient(135deg,#a78bfa,#60a5fa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.hero p{color:var(--text-muted);font-size:1.1rem}.theme-controls{display:inline-flex;gap:.5rem;margin-top:1rem}.theme-toggle,.theme-reset{padding:.4rem 1rem;border:1px solid var(--border);border-radius:9999px;background:var(--surface);color:inherit;font-size:.8rem;cursor:pointer;transition:all .15s ease}.theme-toggle:hover,.theme-reset:hover{border-color:var(--border-hover);background:var(--surface-hover)}.theme-reset{color:var(--text-muted);font-size:.75rem}.controls{margin-bottom:2.5rem}.control-group label{display:block;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.75rem}.position-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}.pos-btn{padding:.5rem;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-muted);font-size:.75rem;cursor:pointer;transition:all .15s ease}.pos-btn:hover{border-color:var(--border-hover);color:inherit}.pos-btn.active{border-color:#60a5fa;color:#60a5fa;background:#60a5fa14}.demos h2{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin-bottom:.75rem}.btn-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:2rem}.demo-btn{padding:.75rem 1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:inherit;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .15s ease}.demo-btn:hover{background:var(--surface-hover);border-color:var(--border-hover);transform:translateY(-1px)}.demo-btn:active{transform:translateY(0)}.demo-btn.success{border-color:#22c55e44;color:light-dark(#16a34a,#4ade80)}.demo-btn.success:hover{background:#22c55e0d;border-color:#22c55e66}.demo-btn.error{border-color:#ef444444;color:light-dark(#dc2626,#f87171)}.demo-btn.error:hover{background:#ef44440d;border-color:#ef444466}.demo-btn.warning{border-color:#eab30844;color:light-dark(#ca8a04,#fbbf24)}.demo-btn.warning:hover{background:#eab3080d;border-color:#eab30866}.demo-btn.info{border-color:#3b82f644;color:light-dark(#2563eb,#60a5fa)}.demo-btn.info:hover{background:#3b82f60d;border-color:#3b82f666}.demo-btn.action{border-color:#8b5cf644;color:light-dark(#7c3aed,#a78bfa)}.demo-btn.action:hover{background:#8b5cf60d;border-color:#8b5cf666}.demo-btn.promise{border-color:#6366f144;color:light-dark(#4f46e5,#818cf8)}.demo-btn.promise:hover{background:#6366f10d;border-color:#6366f166}.clear-section{text-align:center}.demo-btn.clear{border-color:#ef444444;color:#f87171;width:100%}.demo-btn.clear:hover{background:#ef44440d;border-color:#ef444466}.divider{border:none;border-top:1px solid var(--border);margin:2rem 0}.docs h2{font-size:1.25rem;font-weight:600;margin:2rem 0 .75rem}.docs h2:first-child{margin-top:0}.doc-text{color:var(--text-muted);font-size:.9rem;line-height:1.6;margin-bottom:.75rem}.code-block{background:light-dark(#1e1e2e,#0d0d0d);color:#c9d1d9;padding:1rem 1.25rem;border-radius:10px;font-size:.8rem;line-height:1.6;overflow-x:auto;margin-bottom:1.5rem;border:1px solid light-dark(#2a2a3a,#1a1a1a)}.code-block code{font-family:SF Mono,Fira Code,Cascadia Code,monospace}.api-table-wrap{overflow-x:auto;margin-bottom:1.5rem;border:1px solid var(--border);border-radius:10px}.api-table{width:100%;border-collapse:collapse;font-size:.85rem}.api-table th{text-align:left;padding:.6rem 1rem;background:light-dark(#f5f5f7,#111111);font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);border-bottom:1px solid var(--border)}.api-table td{padding:.6rem 1rem;border-bottom:1px solid var(--border)}.api-table tr:last-child td{border-bottom:none}.api-table code{font-family:SF Mono,Fira Code,Cascadia Code,monospace;font-size:.8rem;background:light-dark(#f0f0f2,#1a1a1a);padding:.15rem .4rem;border-radius:4px}