/*! StyloftCSS v0.1.0 | MIT License */ @layer sl.tokens{:root{--sl-font:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--sl-mono:ui-monospace, SFMono-Regular, Consolas, monospace;--sl-space-0:0;--sl-space-1:.25rem;--sl-space-2:.5rem;--sl-space-3:.75rem;--sl-space-4:1rem;--sl-space-6:1.5rem;--sl-space-8:2rem;--sl-space-12:3rem;--sl-space-16:4rem;--sl-text-sm:.875rem;--sl-text-base:1rem;--sl-text-lg:clamp(1.125rem, 1rem + .5vw, 1.375rem);--sl-text-xl:clamp(1.5rem, 1.2rem + 1vw, 2rem);--sl-text-2xl:clamp(2rem, 1.4rem + 2vw, 3rem);--sl-text-3xl:clamp(2.5rem, 1.5rem + 4vw, 5rem);--sl-radius:.65rem;--sl-radius-lg:1.2rem;--sl-measure:68ch;--sl-container:72rem;--sl-shadow:0 .5rem 2rem #00000014}:root,[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--sl-bg:#f8fafc;--sl-surface:#fff;--sl-text:#172033;--sl-muted:#475569;--sl-border:#64748b;--sl-accent:#3730a3;--sl-on-accent:#fff;--sl-accent-hover:#312e81;--sl-soft:#e0e7ff;--sl-danger:#b91c1c;--sl-success:#166534;--sl-focus:#3730a3}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sl-bg:#0f172a;--sl-surface:#1e293b;--sl-text:#f1f5f9;--sl-muted:#cbd5e1;--sl-border:#94a3b8;--sl-accent:#c7d2fe;--sl-on-accent:#1e1b4b;--sl-accent-hover:#e0e7ff;--sl-soft:#312e81;--sl-danger:#fca5a5;--sl-success:#86efac;--sl-focus:#c7d2fe}}[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sl-bg:#0f172a;--sl-surface:#1e293b;--sl-text:#f1f5f9;--sl-muted:#cbd5e1;--sl-border:#94a3b8;--sl-accent:#c7d2fe;--sl-on-accent:#1e1b4b;--sl-accent-hover:#e0e7ff;--sl-soft:#312e81;--sl-danger:#fca5a5;--sl-success:#86efac;--sl-focus:#c7d2fe}}@layer sl.reset{*,:before,:after{box-sizing:border-box}:where(body,h1,h2,h3,h4,p,figure,blockquote,dl,dd){margin:0}:where(img,picture,video,canvas,svg){max-inline-size:100%;display:block}:where(img,video){block-size:auto}:where(button,input,textarea,select){font:inherit}:where(button,select){text-transform:none}:where(textarea){resize:vertical}[hidden]{display:none!important}}@layer sl.base{html{font-family:var(--sl-font);-webkit-text-size-adjust:100%;line-height:1.6}body{background:var(--sl-bg);color:var(--sl-text);overflow-wrap:break-word}:where([data-theme]){background:var(--sl-bg);color:var(--sl-text)}:where(h1,h2,h3,h4){text-wrap:balance;line-height:1.15}h1{font-size:var(--sl-text-3xl)}h2{font-size:var(--sl-text-2xl)}h3{font-size:var(--sl-text-xl)}h4{font-size:var(--sl-text-lg)}a{color:var(--sl-accent);text-underline-offset:.18em}a:hover{text-decoration-thickness:.15em}:where(code,pre,kbd,samp){font-family:var(--sl-mono)}pre{background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:var(--sl-radius);padding:1rem;overflow:auto}:focus-visible{outline:2px solid var(--sl-focus);outline-offset:2px}:where([id]){scroll-margin-block-start:2rem}:where(button,summary,input[type=checkbox],input[type=radio]){cursor:pointer}:where(button:disabled,input:disabled,select:disabled,textarea:disabled){cursor:not-allowed;opacity:.65}@media (prefers-reduced-motion:no-preference){:where(a,button,input,textarea,select,summary){transition:color .18s,background-color .18s,border-color .18s,outline-color .18s}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}@media (forced-colors:active){:focus-visible{outline-color:highlight}.sl-btn{border-color:buttontext}}}@layer sl.layout{.sl-container{inline-size:min(100% - 2rem, var(--sl-container));margin-inline:auto}.sl-stack>*+*{margin-block-start:var(--sl-gap,1rem)}.sl-cluster{align-items:center;gap:var(--sl-gap,1rem);flex-wrap:wrap;display:flex}.sl-grid{--sl-cols:1;gap:var(--sl-gap,1rem);grid-template-columns:repeat(var(--sl-cols,1), minmax(0, 1fr));display:grid}.sl-grid>*,.sl-flex>*{min-inline-size:0}}@layer sl.components{.sl-btn{border-radius:var(--sl-radius);background:var(--sl-accent);min-block-size:2.75rem;color:var(--sl-on-accent);text-align:center;border:1px solid #0000;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.1rem;font-weight:650;line-height:1.3;text-decoration:none;display:inline-flex}.sl-btn:hover:not(:disabled){background:var(--sl-accent-hover)}.sl-btn--outline{color:var(--sl-accent);background:0 0;border-color:currentColor}.sl-btn--outline:hover:not(:disabled){background:var(--sl-soft)}.sl-help{font-size:var(--sl-text-sm);color:var(--sl-muted)}.sl-skip{z-index:100;position:fixed;inset-block-start:1rem;inset-inline-start:1rem;transform:translateY(-200%)}.sl-skip:focus{transform:none}.sl-btn--sm{min-block-size:2.25rem;padding:.4rem .7rem;font-size:.8rem}.sl-btn--ghost{color:var(--sl-accent);background:0 0}.sl-btn--soft,.sl-btn--ghost:hover:not(:disabled),.sl-btn--soft:hover:not(:disabled){background:var(--sl-soft);color:var(--sl-accent)}.sl-btn--icon svg,.sl-btn svg{flex-shrink:0;block-size:1.1em;inline-size:1.1em}.sl-btn--outline.sl-btn--ghost{border-color:#0000}.sl-link{text-underline-offset:.25em;align-items:center;gap:.4em;display:inline-flex}.sl-link svg{flex-shrink:0;block-size:1.1em;inline-size:1.1em}.sl-footer{background:var(--sl-surface);border-block-start:1px solid var(--sl-border);padding:2rem}.sl-hover-lift,.sl-hover-tilt,.sl-hover-glow,.sl-hover-zoom,.sl-hover-fill,.sl-hover-sheen{position:relative}.sl-hover-fill{background:linear-gradient(var(--sl-accent),var(--sl-accent)) 0 100% / 100% 0 no-repeat;color:var(--sl-accent);border:1px solid}.sl-link--underline{background:linear-gradient(currentColor,currentColor) 0 100%/0 2px no-repeat;padding-block-end:.2em;text-decoration:none}@media (prefers-reduced-motion:no-preference){:where(.sl-hover-lift,.sl-hover-tilt,.sl-hover-glow,.sl-hover-zoom,.sl-hover-fill,.sl-hover-sheen,.sl-link--underline){transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s,background-size .3s,color .3s}.sl-hover-fill:not(:disabled):is(:hover,:focus-visible){background-image:linear-gradient(var(--sl-accent),var(--sl-accent));color:var(--sl-on-accent);background-color:#0000;background-size:100% 100%}.sl-link--underline:is(:hover,:focus-visible){background-size:100% 2px}}.sl-btn[class*=sl-fx-]{isolation:isolate;border:1px solid var(--sl-accent);background:var(--sl-fx-bg,var(--sl-surface));min-block-size:3rem;color:var(--sl-fx-color,var(--sl-accent));padding:.8rem 1.4rem;position:relative;overflow:hidden}.sl-btn[class*=sl-fx-]:not(:disabled):is(:hover,:focus-visible){background:var(--sl-fx-bg,var(--sl-surface));color:var(--sl-fx-color,var(--sl-accent))}.sl-btn.sl-fx-orbit{border:2px solid #0000}.sl-btn.sl-fx-depth{box-shadow:0 6px 0 var(--sl-accent-hover)}@media (prefers-reduced-motion:no-preference){.sl-btn[class*=sl-fx-]{transition:color .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}}.sl-header__menu>a:not(.sl-btn){text-underline-offset:.3em}@media (hover:hover) and (pointer:fine) and (forced-colors:none){.sl-cursor-site,.sl-cursor-ring{--sl-cursor-small:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%228%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E) 16 16, auto;--sl-cursor-normal:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2210%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E) 16 16, auto;--sl-cursor-large:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%224%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%2212%22%20fill%3D%22none%22%20stroke%3D%22%2322d3ee%22%20stroke-width%3D%222%22%2F%3E%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%222%22%20fill%3D%22%2322d3ee%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%221%22%2F%3E%3C%2Fsvg%3E) 16 16, auto;cursor:var(--sl-cursor-normal)}.sl-cursor-site :where(a,button,summary,label[for],input[type=checkbox],input[type=radio]),.sl-cursor-action{cursor:url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2232%22%20height%3D%2232%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20d%3D%22M7%205v21l6-6%205%209%205-3-5-8h9Z%22%20fill%3D%22%23a78bfa%22%20stroke%3D%22%2306101d%22%20stroke-width%3D%222%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E) 7 5,pointer}.sl-cursor-site :where(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=button]):not([type=submit]),textarea,[contenteditable=true]),.sl-cursor-text{cursor:text}.sl-cursor-site :where(:disabled,[aria-disabled=true]){cursor:not-allowed}@media (prefers-reduced-motion:no-preference){.sl-cursor-pulse{animation:1.4s step-end infinite sl-cursor-breathe}}}.sl-select,select.sl-input{border:1px solid var(--sl-border);border-radius:var(--sl-radius);background-color:var(--sl-surface);min-block-size:2.75rem;inline-size:100%;color:var(--sl-text);font:inherit;appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='m4 6 4 4 4-4' fill='none' stroke='%23818ca4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right .8rem center;background-repeat:no-repeat;padding:.6rem 2.5rem .6rem .8rem;line-height:1.4}:is(.sl-select,select.sl-input):hover:not(:disabled){border-color:var(--sl-accent)}:is(.sl-select,select.sl-input):focus-visible{border-color:var(--sl-focus);outline:1px solid var(--sl-focus);outline-offset:1px}:is(.sl-select,select.sl-input) option,:is(.sl-select,select.sl-input) optgroup{background:var(--sl-surface);color:var(--sl-text)}:is(.sl-select,select.sl-input)[multiple]{background-image:none;min-block-size:9rem;padding:.5rem}:is(.sl-select,select.sl-input)[multiple] option{border-radius:.35rem;padding:.5rem .75rem}@supports (appearance:base-select){:is(.sl-select,select.sl-input):not([multiple]){appearance:base-select}:is(.sl-select,select.sl-input):not([multiple])::picker(select){appearance:base-select}:is(.sl-select,select.sl-input):not([multiple]){background-image:none;align-items:center;padding-inline-end:.8rem}:is(.sl-select,select.sl-input)::picker-icon{color:var(--sl-muted)}:is(.sl-select,select.sl-input):open::picker-icon{rotate:180deg}:is(.sl-select,select.sl-input)::picker(select){border:1px solid var(--sl-border);border-radius:var(--sl-radius);background:var(--sl-surface);color:var(--sl-text);box-shadow:var(--sl-shadow);max-block-size:18rem;margin-block-start:.4rem;padding:.35rem}:is(.sl-select,select.sl-input):not([multiple]) option{border-radius:.35rem;gap:.75rem;padding:.65rem .8rem}:is(.sl-select,select.sl-input) option:is(:hover,:focus-visible,:checked){background:var(--sl-soft);color:var(--sl-accent)}:is(.sl-select,select.sl-input) option::checkmark{color:var(--sl-accent)}@media (prefers-reduced-motion:no-preference){:is(.sl-select,select.sl-input)::picker-icon{transition:rotate .2s}:is(.sl-select,select.sl-input)::picker(select){opacity:0;transition:opacity .18s ease,translate .18s ease,display .18s allow-discrete,overlay .18s allow-discrete;translate:0 -.25rem}:is(.sl-select,select.sl-input):open::picker(select){opacity:1;translate:0}@starting-style{:is(.sl-select,select.sl-input):open::picker(select){opacity:0;translate:0 -.25rem}}:is(.sl-select,select.sl-input) option{transition:background-color .16s,color .16s}}}@media (prefers-reduced-motion:no-preference){.sl-select,select.sl-input{transition:border-color .18s,background-color .18s,color .18s,outline-color .18s}}@media (forced-colors:active){.sl-select,select.sl-input{appearance:auto;background-image:none}}}@layer sl.utilities{.sl-gap-2{--sl-gap:var(--sl-space-2);gap:var(--sl-space-2)}.sl-my-4{margin-block:var(--sl-space-4)}.sl-gap-6{--sl-gap:var(--sl-space-6);gap:var(--sl-space-6)}.sl-gap-8{--sl-gap:var(--sl-space-8);gap:var(--sl-space-8)}.sl-gap-12{--sl-gap:var(--sl-space-12);gap:var(--sl-space-12)}.sl-grid{display:grid}.sl-justify-between{justify-content:space-between}.sl-justify-center{justify-content:center}.sl-text-center{text-align:center}.sl-text-lg{font-size:var(--sl-text-lg)}.sl-text-xl{font-size:var(--sl-text-xl)}.sl-text-muted{color:var(--sl-muted)}.sl-cols-1{--sl-cols:1}@media (width>=48rem){.sl-md\:cols-2{--sl-cols:2}.sl-md\:cols-3{--sl-cols:3}.sl-md\:cols-4{--sl-cols:4}}}@property --sl-orbit{syntax:"";inherits:false;initial-value:0deg}@keyframes sl-cursor-breathe{0%,to{cursor:var(--sl-cursor-small)}33%,66%{cursor:var(--sl-cursor-normal)}50%{cursor:var(--sl-cursor-large)}}:root{--sl-container:76rem;--sl-accent:#5d49c0;--sl-accent-hover:#49369f;--sl-focus:#5d49c0;--sl-bg:#fcfbfd;--sl-surface:#fff;--sl-text:#292635;--sl-muted:#696574;--sl-border:#8e899e;--sl-soft:#eeebfa;--site-line:#e7e4ee;--site-lavender:#f2effa}html{scroll-padding-top:7rem}body{min-inline-size:0}a{text-decoration-thickness:1px}button,a,summary,input,select,textarea{-webkit-tap-highlight-color:transparent}svg{flex-shrink:0}hr{border:0;border-block-start:1px solid var(--site-line);margin-block:1rem}.announcement{color:#59516d;background:#efecf8;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;min-height:2.6rem;padding:.5rem 1rem;font-size:.75rem;display:flex}.announcement a{color:#4e3caa;margin-inline-start:.6rem;font-weight:650;text-decoration:none}.announcement-dot,.tiny-dot{background:#8976d7;border-radius:50%;flex-shrink:0;width:.38rem;height:.38rem;display:inline-block}.announcement-divider{color:#aaa1bd;margin-inline:.4rem}.site-header{z-index:30;border-block-end:1px solid var(--site-line);backdrop-filter:blur(16px);background:#fcfbfdf5;position:sticky;top:0}.header-inner{justify-content:space-between;align-items:center;gap:2rem;min-height:5.3rem;display:flex;position:relative}.brand{color:#292635;letter-spacing:-.065em;white-space:nowrap;align-items:center;gap:.65rem;font-size:1.4rem;font-weight:780;text-decoration:none;display:inline-flex}.brand-css{color:#8e80b2;margin-inline-start:-.65rem;font-weight:500}.desktop-nav{gap:2rem;display:flex}.desktop-nav a{color:#716b7d;font-size:.84rem;font-weight:550;text-decoration:none}.desktop-nav a:hover,.desktop-nav a[aria-current]{color:#4e3caa}.sl-btn{border-radius:.5rem;gap:.65rem;font-size:.88rem;font-weight:600}.header-cta{min-height:2.3rem;padding:.5rem .9rem;font-size:.76rem}.mobile-nav{display:none}.mobile-nav summary{gap:1rem;font-size:.88rem;font-weight:600;list-style:none;display:flex}.mobile-nav summary::-webkit-details-marker{display:none}.mobile-nav>div{inset-inline:0;border:1px solid var(--site-line);box-shadow:var(--sl-shadow);background:#fff;border-radius:.8rem;gap:1rem;padding:1.2rem;display:grid;position:absolute;top:100%}.mobile-nav a{text-decoration:none}.hero-actions .sl-btn{padding:.85rem 1.3rem}.hero-demo-card p.sl-text-muted{font-size:.69rem}.hero-demo-card .sl-btn{min-height:2.1rem;padding:.45rem;font-size:.68rem}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#8c7ab1;margin-bottom:1.1rem;font-size:.62rem;font-weight:700;display:block}.theme-pair .sl-btn{min-height:2rem;padding:.4rem;font-size:.66rem}.site-footer{border-top:1px solid var(--site-line);background:#f6f4f9}.footer-top{padding-block:3rem}.footer-top p{color:#8c8298;font-size:.8rem;line-height:1.8}.footer-version{color:#a096aa;font-size:.6rem}.footer-top h2{margin-bottom:1.1rem;font-size:.75rem;font-weight:650}.footer-top>div:not(:first-child) a{color:#8c8298;margin-block:.6rem;font-size:.75rem;text-decoration:none;display:block}.footer-top a:hover{text-decoration:underline}.footer-bottom{color:#9c91a7;border-top:1px solid #e5dfea;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding-block:1.1rem;font-size:.6rem;display:flex}.footer-bottom a{color:#8e7ba5;text-decoration:none}.docs-shell{grid-template-columns:13rem minmax(0,1fr);align-items:start;gap:3.5rem;display:grid}.docs-sidebar{border-right:1px solid var(--site-line);scrollbar-width:thin;max-height:calc(100dvh - 5.3rem);padding:2.5rem 1.1rem 2rem 0;position:sticky;top:5.3rem;overflow:auto}.sidebar-eyebrow{letter-spacing:.1em;text-transform:uppercase;color:#a194b1;margin:0 .65rem .7rem;font-size:.57rem;font-weight:650;display:block}.sidebar-link{color:#82768f;border-radius:.35rem;justify-content:space-between;align-items:center;gap:.5rem;padding:.42rem .65rem;font-size:.76rem;text-decoration:none;display:flex}.sidebar-link span,.sidebar-link small{color:#a293b7;font-size:.58rem}.sidebar-link:hover{color:#5d49a3;background:#f4f1fa}.sidebar-link.active{color:#6850b5;background:#eee9f8;font-weight:600}.sidebar-group{margin-top:1.6rem}.sidebar-tip{background:#f8f5fc;border:1px solid #e9e1f1;border-radius:.6rem;margin-top:2rem;padding:1rem .7rem}.sidebar-tip .sidebar-eyebrow{margin:0 0 .5rem;font-size:.5rem}.sidebar-tip p{color:#90819f;font-size:.7rem}.sidebar-tip a{margin-top:.75rem;font-size:.65rem;text-decoration:none;display:block}.docs-content{min-width:0;padding-block:2.7rem 5rem}.breadcrumbs{color:#aaa0b5;flex-wrap:wrap;gap:.6rem;margin-bottom:2rem;font-size:.65rem;display:flex}.breadcrumbs a{color:#8b7c9e;text-decoration:none}.docs-page-header{border-bottom:1px solid var(--site-line);margin-bottom:2.5rem;padding-bottom:2.5rem}.docs-page-header h1{letter-spacing:-.055em;font-size:clamp(2.3rem,4.5vw,3.7rem);font-weight:580;line-height:1.1}.docs-page-header>p{color:#8a7e96;max-width:40rem;margin-top:1.2rem;font-size:.95rem;line-height:1.8}.doc-tags{flex-wrap:wrap;gap:.6rem;margin-top:1.5rem;display:flex}.doc-tags span{color:#9686a5;background:#fff;border:1px solid #e9e1ef;border-radius:.3rem;padding:.2rem .5rem;font-size:.6rem}.examples-list{gap:3rem;display:grid}.example-heading{justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.1rem;display:flex}.example-heading h2{letter-spacing:-.025em;font-size:1.1rem;font-weight:600}.example-heading p{color:#9788a5;max-width:34rem;margin-top:.5rem;font-size:.75rem}.preview-label{color:#ab9ab8;white-space:nowrap;align-items:center;gap:.4rem;padding-top:.25rem;font-size:.55rem;display:flex}.preview-label>span{background:#a0b49f;border-radius:50%;width:.3rem;height:.3rem}.example-canvas{background:#f8f6fb;border:1px solid #e6dfed;border-radius:.7rem .7rem 0 0;min-width:0;padding:clamp(1rem,3vw,2rem)}.example-source{background:#fff;border:1px solid #e6dfed;border-top:0;border-radius:0 0 .7rem .7rem;overflow:hidden}.example-source>summary{color:#9b86ac;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1rem;font-size:.63rem;list-style:none;display:flex}.example-source>summary::-webkit-details-marker{display:none}.example-source>summary>span:first-child{align-items:center;gap:.5rem;display:flex}.example-source>summary>span:first-child:after{content:"+";margin-left:.3rem}.example-source[open]>summary>span:first-child:after{content:"−"}.source-hint{color:#b7a8c2;font-size:.55rem}.example-source pre{color:#d7cbe4;tab-size:2;background:#2d2739;border:0;border-radius:0;max-height:30rem;margin:0;padding:1.2rem;font-size:.7rem;line-height:1.8}.example-source code{user-select:all}.usage-note{background:#f6f1fb;border-left:3px solid #b6a0d2;border-radius:0 .5rem .5rem 0;margin-top:3rem;padding:1.2rem 1.5rem}.usage-note h2{color:#8c71a3;margin-bottom:.5rem;font-size:.8rem}.usage-note p{color:#9d87ae;font-size:.75rem;line-height:1.8}.docs-next{border-top:1px solid var(--site-line);flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:2.5rem;padding-top:1.5rem;display:flex}.docs-next a{color:#9e86b3;font-size:.73rem;text-decoration:none}.demo-header nav>a:not(.sl-btn){font-size:.8rem;text-decoration:none}.demo-wordmark{letter-spacing:-.06em;color:#4b3a5e;font-size:1.3rem;font-weight:700;text-decoration:none}.demo-wordmark>span{vertical-align:super;margin-left:.1rem;font-size:.5rem}.demo-footer-block{background:#fff;border:1px solid #e5dbea;border-radius:.6rem;padding:1.5rem}.demo-footer-block nav{font-size:.75rem}.theme-gallery .sl-text-xl{font-size:1.4rem}.framework-extension{color:#a690b8;border:1px dashed #d8c5e7;border-radius:.5rem;margin-block:1rem;padding:.8rem 1rem;font-size:.68rem}.examples-list{grid-template-columns:minmax(0,1fr)}.example-block,.example-heading>div,.catalog-card>div{min-width:0}.docs-page-header>p,.example-source>summary,.demo-kicker,.breadcrumbs,.catalog-card p{color:#746582}.eyebrow,.sidebar-eyebrow,.preview-label,.catalog-meta,.source-hint,.section-line>span,.doc-tags span,.breadcrumbs,.breadcrumbs a,.usage-note p,.usage-note h2,.docs-next a,.guide-section>p,.guide-section ul,.token-swatch p,.token-swatch code,.spacing-demo>div,.framework-extension{color:#746582}.catalog-card p,.catalog-card h3 span,.example-heading p,.sidebar-link,.sidebar-tip p,.sidebar-tip .sidebar-eyebrow,.sidebar-link small,.sidebar-link span{color:#776883}.footer-top p,.footer-top>div:not(:first-child) a,.footer-version,.footer-bottom,.footer-bottom a,.final-cta>p{color:#786b85}@media (width<=70rem){.docs-shell{grid-template-columns:11rem minmax(0,1fr);gap:2rem}.desktop-nav{gap:1.3rem}}@media (width<=52rem){.desktop-nav,.header-cta{display:none}.mobile-nav{display:block}.header-inner{min-height:4.5rem}.announcement{font-size:.63rem}.announcement a{margin-left:0}.docs-shell{display:block}.docs-sidebar{display:none}.docs-content{padding-top:2rem}.docs-page-header h1{font-size:clamp(2.5rem,7vw,3.5rem)}.docs-page-header>p{font-size:.85rem}.example-heading{flex-wrap:wrap;gap:.5rem}.footer-top{--sl-gap:2rem}}@media (width<=39.99rem){.header-inner{flex-wrap:wrap;gap:.75rem;padding-block:.75rem}.announcement-divider{display:none}.announcement{gap:.3rem;font-size:.58rem}.announcement>a{display:none}.brand{font-size:1.25rem}.hero-actions .sl-btn{padding:.8rem 1rem}.theme-pair .sl-btn{width:max-content;padding-inline:1rem}.footer-bottom{flex-direction:column;gap:.5rem}.docs-page-header{margin-bottom:2rem;padding-bottom:2rem}.docs-page-header h1{font-size:2.5rem}.catalog-card,.example-canvas{padding:1rem}.source-hint{display:none}.usage-note{padding:1rem}.demo-footer-block{padding:1rem}}@media (forced-colors:active){.brand-mark i,.announcement-dot,.tiny-dot,.demo-art span,.hero-card-art span,.component-tile,.catalog-card,.example-canvas,.example-source,.usage-note{border:1px solid canvastext}}.brand{letter-spacing:-.055em;color:var(--sl-text);gap:.55rem}.brand-image{object-fit:contain;flex-shrink:0;width:2.6rem;height:2.6rem}.brand-wordmark{white-space:nowrap;display:inline-block}.brand-css{color:#0000;background:linear-gradient(110deg,#007783,#155bce,#7131ce);-webkit-background-clip:text;background-clip:text;margin:0;font-weight:700}.header-actions{align-items:center;gap:1rem;margin-inline-start:auto;display:flex}.mode-switch{border:1px solid var(--site-line);min-width:2.5rem;min-height:2.5rem;color:var(--sl-text);background:var(--sl-surface);border-radius:.5rem;justify-content:center;align-items:center;gap:.45rem;padding:.45rem .65rem;font-size:.72rem;font-weight:600;text-decoration:none;display:inline-flex}.mode-switch:hover{border-color:var(--sl-accent)}.hero-brand-mark .brand-image{width:2rem;height:2rem}.desktop-nav{margin-inline-start:auto}:root[data-theme=light]{--sl-bg:#f7fafc;--sl-accent:#006c7a;--sl-accent-hover:#005563;--sl-focus:#006c7a;--sl-on-accent:#fff}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--sl-bg:#060b16;--sl-surface:#101a2c;--sl-text:#edf4ff;--sl-muted:#a7b7cf;--sl-border:#536681;--sl-accent:#67e8f9;--sl-accent-hover:#a5f3fc;--sl-on-accent:#062132;--sl-soft:#122a40;--sl-focus:#67e8f9;--sl-danger:#fca5a5;--sl-success:#86efac;--sl-shadow:0 16px 40px #0005;--site-line:#23334d;--site-lavender:#0e1729}:root[data-theme=dark] body{background:radial-gradient(ellipse at 72% 7%,#101b3d70,transparent 28%),var(--sl-bg)}:root[data-theme=dark] .brand-css{background-image:linear-gradient(110deg,#22d3ee,#38bdf8,#a78bfa)}:root[data-theme=dark] :is(.announcement,.metrics-band,.component-section,.site-footer){border-color:var(--site-line);background:#0a1221}:root[data-theme=dark] .announcement{color:#acb9d3}:root[data-theme=dark] .announcement a{color:#67e8f9}:root[data-theme=dark] .announcement-divider{color:#7588a5}:root[data-theme=dark] .announcement-dot,:root[data-theme=dark] .tiny-dot{background:#22d3ee;box-shadow:0 0 12px #22d3ee44}:root[data-theme=dark] .site-header{border-color:var(--site-line);background:#080f1fed}:root[data-theme=dark] .desktop-nav a{color:#b6c3d9}:root[data-theme=dark] :is(.desktop-nav a:hover,.desktop-nav a[aria-current]){color:#67e8f9}:root[data-theme=dark] :is(.mode-switch,.mobile-nav>div){color:var(--sl-text);background:#101b2e;border-color:#304461}:root[data-theme=dark] .mobile-nav summary{color:var(--sl-text)}:root[data-theme=dark] .mobile-nav a{color:#bfeaff}:root[data-theme=dark] :is(.eyebrow,.sidebar-eyebrow,.preview-label,.catalog-meta,.source-hint,.section-line>span,.doc-tags span,.breadcrumbs,.breadcrumbs a,.usage-note p,.usage-note h2,.docs-next a,.guide-section>p,.guide-section ul,.token-swatch p,.token-swatch code,.spacing-demo>div,.framework-extension,.demo-kicker){color:#abc0dc}:root[data-theme=dark] :is(.section-heading>p,.principles p,.section-copy,.theme-copy p,.docs-page-header>p){color:#adbed7}:root[data-theme=dark] :is(.cta-spark,.final-cta .eyebrow){color:#b6a0fa}:root[data-theme=dark] :is(.footer-top p,.footer-top>div:not(:first-child) a,.footer-version,.footer-bottom,.footer-bottom a,.final-cta>p){color:#a8b8d0}:root[data-theme=dark] .footer-bottom{border-color:var(--site-line)}:root[data-theme=dark] .sidebar-link{color:#b1bfd6}:root[data-theme=dark] :is(.sidebar-link span,.sidebar-link small){color:#a3b6d1}:root[data-theme=dark] .sidebar-link:hover{color:#caf7ff;background:#13233b}:root[data-theme=dark] .sidebar-link.active{color:#8fecf6;background:#123047}:root[data-theme=dark] .sidebar-tip{background:#0d2032;border-color:#2b4b63}:root[data-theme=dark] .sidebar-tip p,:root[data-theme=dark] .sidebar-tip .sidebar-eyebrow{color:#b2c6dd}:root[data-theme=dark] .doc-tags span{background:#0f1c30;border-color:#33445e}:root[data-theme=dark] :is(.catalog-card p,.catalog-card h3 span,.example-heading p){color:#adbed7}:root[data-theme=dark] .example-canvas{background:#0b1424;border-color:#2b3b55}:root[data-theme=dark] .example-source{background:#0f1c2e;border-color:#2b3b55}:root[data-theme=dark] .example-source>summary{color:#b3c9e4}:root[data-theme=dark] :is(.example-source pre,.guide-section pre){color:#cfdef0;background:#07101e}:root[data-theme=dark] .usage-note{background:#102038;border-left-color:#27b9d7}:root[data-theme=dark] .usage-note h2{color:#a5f3fc}:root[data-theme=dark] .framework-extension{border-color:#42617e}:root[data-theme=dark] :is(.demo-header,.demo-footer-block){background:#101c30;border-color:#34455f}:root[data-theme=dark] .demo-wordmark{color:#e2efff}@media (width<=70rem){.header-inner,.desktop-nav{gap:1rem}.header-actions{gap:.65rem}}@media (width<=52rem){.header-inner{gap:.7rem}.brand-image{width:2.3rem;height:2.3rem}.header-actions{margin-inline-start:auto}.header-actions .header-cta{display:none}}@media (width<=39.99rem){.mode-switch>span{display:none}.brand{gap:.35rem}.brand-image{width:2rem;height:2rem}.mode-switch{padding:.4rem}.header-actions{gap:0}}@media (forced-colors:active){.brand-css{color:linktext;background:0 0}.mode-switch{border-color:buttontext}}:root{--site-heading-font:"Clash Display", var(--sl-font)}h1,h2,h3,h4,h5,h6{font-family:var(--site-heading-font)}.hero-copy h1,.docs-page-header h1{letter-spacing:-.035em;font-weight:600}:root{--sl-font:"Switzer", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif}.example-heading p,.catalog-card p,.usage-note p{font-size:.9rem;line-height:1.75}@media (prefers-reduced-motion:no-preference){.sl-btn:not(.sl-skip):not([class*=sl-hover-]):not([class*=sl-fx-]),.mode-switch{transition:background-color .22s,color .22s,border-color .22s,box-shadow .22s,transform .22s cubic-bezier(.2,.7,.2,1)}.sl-btn:not(:disabled):not(.sl-skip):not([class*=sl-hover-]):not([class*=sl-fx-]):is(:hover,:focus-visible){transform:translateY(-2px);box-shadow:0 7px 18px #0000001f}.sl-btn:not(:disabled):not(.sl-skip):not([class*=sl-hover-]):not([class*=sl-fx-]):active{box-shadow:none;transform:translateY(0)}.mode-switch:hover{box-shadow:0 0 0 3px var(--sl-soft)}@supports (animation-timeline:view()) and (animation-range:entry 0% entry 30%){:is(.home-section>.section-heading,.principles>article,.component-tile,.build-section>div,.theme-teaser,.catalog-group,.example-block,.demo-scroll-reveal){animation:1s linear both sl-site-reveal;animation-timeline:view();animation-range:entry entry 30%}:is(.component-tile,.catalog-group,.example-block,.demo-scroll-reveal):focus-within{animation-play-state:paused}}@supports (animation-timeline:scroll()){.site-header:after{content:"";transform-origin:0;pointer-events:none;background:linear-gradient(90deg,#22d3ee,#3b82f6,#a855f7);block-size:2px;animation:1s linear both sl-reading-progress;animation-timeline:scroll(root);position:absolute;inset-block-end:-1px;inset-inline:0}}}@keyframes sl-site-reveal{0%{opacity:.65;translate:0 18px}to{opacity:1;translate:0}}@keyframes sl-reading-progress{0%{transform:scaleX(0)}to{transform:scaleX(1)}}@media (prefers-reduced-motion:reduce){.sl-btn:not(.sl-skip):not([class*=sl-hover-]):not([class*=sl-fx-]),.demo-feature-card,.demo-lift,.demo-glow,.catalog-card,.component-tile,.demo-animated-link span{transform:none}}.example-canvas .sl-btn--sm{font-size:.8rem}.example-canvas .sl-btn--md{font-size:1rem}.example-canvas .sl-btn--lg{font-size:1.125rem}.example-canvas .sl-nav .demo-wordmark{align-items:center;gap:.5rem;display:inline-flex}.example-canvas .sl-nav :where(nav,details){min-inline-size:0;max-inline-size:100%}.example-canvas .sl-hover-fill{background-color:#0000}.example-canvas .sl-btn svg{width:1.1em;height:1.1em}.example-canvas .sl-split{line-height:1.5}.code-editor{--code-border:var(--sl-border);background:var(--sl-surface);min-inline-size:0}.code-editor__bar{border-block:1px solid var(--code-border);background:var(--sl-bg);justify-content:space-between;align-items:center;gap:1rem;padding-inline-end:1rem;display:flex}.code-editor__file{border-inline-end:1px solid var(--code-border);border-block-start:2px solid var(--sl-accent);background:var(--sl-surface);font:.75rem var(--sl-mono);color:var(--sl-text);align-items:center;gap:.5rem;padding:.8rem 1rem;display:inline-flex}.code-editor__language{color:var(--sl-muted);font:.65rem var(--sl-mono)}.example-source .code-editor__code{max-block-size:28rem;font:.78rem/1.85 var(--sl-mono);tab-size:2;overscroll-behavior:contain;scrollbar-width:thin;margin:0;padding:1rem 0;overflow:auto}.example-source .code-editor__code code{counter-reset:code-line;user-select:text;min-inline-size:max-content;display:block}.code-editor__code .line{inline-size:100%;padding-inline-end:1.25rem;display:inline-block}.code-editor__code .line:before{counter-increment:code-line;content:counter(code-line);border-inline-end:1px solid var(--code-border);inline-size:3.5rem;color:var(--sl-muted);text-align:end;user-select:none;margin-inline-end:1rem;padding-inline:.75rem;display:inline-block}.code-editor__status{border-block-start:1px solid var(--code-border);color:var(--sl-muted);font:.65rem/1.6 var(--sl-mono);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.5rem;padding:.55rem 1rem;display:flex}@media (forced-colors:active){.code-editor__code span{color:canvastext!important}}.code-editor[data-ready]>:is(.code-editor__code,.code-editor__fallback){display:none}.playground__actions{border-block-end:1px solid var(--code-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.8rem 1rem;display:flex}.playground__auto{color:var(--sl-muted);align-items:center;gap:.4rem;font-size:.75rem;display:inline-flex}.playground__auto input{accent-color:var(--sl-accent)}.playground__panes{grid-template-columns:minmax(0,1fr);display:grid}.playground__pane{border-block-end:1px solid var(--code-border);min-inline-size:0;display:block}.playground__pane+.playground__pane{border-inline-start:1px solid var(--code-border)}.playground__pane-title{border-block-end:1px solid var(--code-border);font:600 .75rem var(--sl-mono);color:var(--sl-accent);align-items:center;gap:.5rem;padding:.65rem 1rem;display:flex}.playground__hint{font:.65rem var(--sl-mono);color:var(--sl-muted);margin-inline-start:auto}.playground__input{background:var(--sl-bg);block-size:19rem;min-inline-size:0;display:flex}.playground__gutter{border-inline-end:1px solid var(--code-border);color:var(--sl-muted);text-align:end;white-space:pre;user-select:none;font:.78rem/1.85 var(--sl-mono);flex:0 0 3rem;padding:1rem .6rem;overflow:hidden}.playground__input textarea{resize:none;block-size:100%;inline-size:100%;min-inline-size:0;color:var(--sl-text);font:.78rem/1.85 var(--sl-mono);tab-size:2;white-space:pre;background:0 0;border:0;border-radius:0;padding:1rem .8rem;display:block}.playground__input textarea:focus-visible{outline:1px solid var(--sl-focus);outline-offset:-2px}.playground__result-bar{color:var(--sl-muted);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding:.7rem 1rem;font-size:.75rem;display:flex}.playground__result-bar label{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.playground__result-bar select{border:1px solid var(--code-border);border-radius:var(--sl-radius);background-color:var(--sl-surface);max-inline-size:100%;color:var(--sl-text);font:inherit;padding:.35rem}.playground__result{resize:vertical;border-block-start:1px solid var(--code-border);block-size:24rem;min-block-size:12rem;max-block-size:60rem;inline-size:100%;min-inline-size:0;margin-inline:auto;overflow:hidden}.playground__result iframe{background:var(--sl-bg);border:0;block-size:100%;inline-size:100%;display:block}@media (width<=767px){.playground__panes{grid-template-columns:minmax(0,1fr)}.playground__pane+.playground__pane{border-inline-start:0}.playground__input{block-size:14rem}}