/*! 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-card{padding:var(--sl-space-6);background:var(--sl-surface);border:1px solid var(--sl-border);border-radius:var(--sl-radius-lg)}.sl-badge{font-size:var(--sl-text-sm);color:var(--sl-accent);border:1px solid;border-radius:100vmax;padding:.15rem .6rem;font-weight:600;display:inline-block}.sl-skip{z-index:100;position:fixed;inset-block-start:1rem;inset-inline-start:1rem;transform:translateY(-200%)}.sl-skip:focus{transform:none}@media (width<=39.99rem){.sl-table--responsive .sl-badge{white-space:normal}}.sl-btn--icon svg,.sl-btn svg{flex-shrink:0;block-size:1.1em;inline-size:1.1em}.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}}}}@layer sl.utilities{.sl-gap-4{--sl-gap:var(--sl-space-4);gap: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-items-center{align-items:center}.sl-justify-between{justify-content:space-between}.sl-justify-center{justify-content:center}.sl-w-full{inline-size:100%}.sl-text-muted{color:var(--sl-muted)}@media (width>=48rem){.sl-md\:cols-2{--sl-cols:2}.sl-md\:cols-3{--sl-cols:3}}}@property --sl-orbit{syntax:"<angle>";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}.home-hero{grid-template-columns:1.04fr 1fr;align-items:center;gap:2rem;padding-block:5.5rem 6rem;display:grid}.release-pill{color:#777081;background:#fff;border:1px solid #e1dbea;border-radius:10rem;align-items:center;gap:.7rem;padding:.35rem .7rem .35rem .35rem;font-size:.72rem;text-decoration:none;display:inline-flex}.release-pill>span:first-child{letter-spacing:.08em;color:#6653b1;background:#f0ebfa;border-radius:2rem;padding:.15rem .4rem;font-size:.58rem;font-weight:750}.hero-copy h1{letter-spacing:-.077em;max-width:8.5em;margin-block:1.7rem 1.6rem;font-size:clamp(3.25rem,6.4vw,6rem);font-weight:680;line-height:1.04;position:relative}.hero-copy h1 em{color:#7860cf;font-style:normal}.hero-asterisk{color:#c2b7e6;margin-inline-start:.13em;font-size:.67em;font-weight:400;display:inline-block;position:absolute;top:1.5em;transform:rotate(12deg)}.hero-copy>p{max-width:27rem;color:var(--sl-muted);font-size:1.03rem;line-height:1.8}.hero-actions{margin-block:2rem 1.7rem}.hero-actions .sl-btn{padding:.85rem 1.3rem}.hero-secondary{color:#55505f;align-items:center;gap:.6rem;font-size:.84rem;text-decoration:none;display:flex}.hero-footnote{color:#81798e;flex-wrap:wrap;gap:1rem;font-size:.68rem;display:flex}.hero-footnote span{align-items:center;gap:.35rem;display:flex}.hero-footnote svg{color:#8a78bc}.hero-playground{isolation:isolate;background:#f2f0f9;border:1px solid #ebe6f3;border-radius:1.5rem;place-items:center;min-height:35rem;display:grid;position:relative}.playground-grid{z-index:-1;border-radius:inherit;background-image:linear-gradient(#e2dded66 1px,#0000 1px),linear-gradient(90deg,#e2dded66 1px,#0000 1px);background-size:32px 32px;position:absolute;inset:0;-webkit-mask-image:linear-gradient(#000,#0000);mask-image:linear-gradient(#000,#0000)}.playground-caption{letter-spacing:.17em;color:#9a90ae;font-size:.56rem;font-family:var(--sl-mono);position:absolute;inset-block-start:1.3rem;inset-inline-start:1.5rem}.hero-demo-card{--sl-gap:.9rem;background:#fff;border-color:#e1dcea;border-radius:1rem;width:18.8rem;padding:1.1rem;transform:rotate(-4deg);box-shadow:0 18px 35px #4b3b7c12}.hero-demo-card .sl-badge{color:#8271aa;background:#f8f5ff;border:1px solid #e8e1f5;padding:.15rem .4rem;font-size:.54rem}.hero-demo-card .demo-avatar{border-radius:.5rem;width:1.8rem;height:1.8rem;font-size:.9rem}.hero-demo-card h2{letter-spacing:-.055em;margin-top:.45rem;font-size:1.6rem}.hero-demo-card p.sl-text-muted{font-size:.69rem}.hero-demo-card .sl-btn{min-height:2.1rem;padding:.45rem;font-size:.68rem}.hero-card-art{background:#e9e1f6;border-radius:.6rem;height:8rem;position:relative;overflow:hidden}.hero-card-art span{background:#c6b7e7;border-radius:50%;width:8rem;height:8rem;position:absolute;top:2.5rem;left:-1.5rem}.hero-card-art span:nth-child(2){background:#a28cce;width:7rem;height:7rem;top:1rem;left:4.6rem}.hero-card-art span:nth-child(3){background:#edd0be;width:9rem;height:9rem;top:3rem;left:10rem}.hero-card-art i{color:#fff8ef;font-size:3.7rem;font-style:normal;position:absolute;top:.15rem;right:2rem}.floating-note{z-index:3;background:#fff;border:1px solid #e8e2ef;border-radius:.6rem;align-items:center;gap:.5rem;padding:.75rem 1rem;font-size:.6rem;display:flex;position:absolute;top:3.9rem;right:-.8rem;transform:rotate(3deg);box-shadow:0 8px 18px #46317408}.floating-palette{z-index:3;background:#fff;border:1px solid #e2ddeb;border-radius:.65rem;padding:.85rem 1rem;position:absolute;bottom:5.5rem;right:-1rem;transform:rotate(7deg);box-shadow:0 8px 18px #4631740a}.palette-label{letter-spacing:.13em;color:#94899e;font-size:.5rem}.floating-palette>div{gap:.25rem;margin-block:.5rem;display:flex}.floating-palette i{background:var(--swatch);border-radius:.25rem;width:1.65rem;height:1.9rem}.floating-palette>span:last-child{color:#91869e;font-size:.48rem}.floating-code{z-index:4;color:#ded5ed;background:#332c48;border:1px solid #574a6c;border-radius:.7rem;padding:.8rem 1.1rem;position:absolute;bottom:2.1rem;left:-1.3rem;transform:rotate(-2deg);box-shadow:0 10px 25px #3f275f15}.floating-code code{font-size:.6rem}.floating-code b{color:#ada1c4;font-weight:400}.code-dot{background:#b6a1e9;border-radius:50%;width:.4rem;height:.4rem;margin-inline-end:.6rem;display:inline-block}.code-caption{color:#aa9dbd;margin-top:.25rem;padding-inline-start:1.1rem;font-size:.48rem;display:block}.playground-coordinate{font:.5rem var(--sl-mono);color:#aaa0bb;position:absolute;bottom:.8rem;right:1.1rem}.metrics-band{border-block:1px solid var(--site-line);background:#f9f8fb}.metrics-inner{grid-template-columns:repeat(4,1fr);padding-block:1.8rem;display:grid}.metrics-inner>div{border-inline-start:1px solid var(--site-line);gap:.15rem;padding-inline:2rem;display:grid}.metrics-inner>div:first-child{border:0;padding-inline-start:0}.metrics-inner strong{letter-spacing:-.05em;font-size:1.9rem;font-weight:550}.metrics-inner strong small{color:#81778f;letter-spacing:-.02em;font-size:.8rem;font-weight:450}.metrics-inner>div>span{color:#81798a;font-size:.7rem}.home-section{padding-block:6.5rem}.section-heading{justify-content:space-between;align-items:flex-end;gap:3rem;margin-bottom:3rem;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.16em;color:#8c7ab1;margin-bottom:1.1rem;font-size:.62rem;font-weight:700;display:block}.section-heading h2,.build-section h2,.theme-copy h2{letter-spacing:-.055em;font-size:clamp(2rem,3.3vw,3rem);font-weight:580;line-height:1.18}.section-heading h2 span,.build-section h2 span{color:#9790a4}.section-heading>p{color:#81798a;max-width:17rem;font-size:.86rem;line-height:1.8}.principles article{border-top:1px solid var(--site-line);padding:1.7rem 0 0;position:relative}.principle-number{font:.6rem var(--sl-mono);color:#aaa0b8;position:absolute;right:0}.principle-icon{color:#8b75c8;margin-bottom:1.3rem}.principles h3{letter-spacing:-.025em;margin-bottom:.75rem;font-size:1.05rem;font-weight:600}.principles p{color:#81798a;max-width:19rem;font-size:.8rem;line-height:1.85}.component-section{border-block:1px solid var(--site-line);background:#f4f2f8;padding-block:5rem}.text-link{color:#62528e;align-items:center;gap:.6rem;font-size:.82rem;font-weight:600;text-decoration:none;display:inline-flex}.text-link:hover{text-decoration:underline}.component-tile{color:var(--sl-text);background:#fff;border:1px solid #e4dfea;border-radius:.85rem;text-decoration:none;overflow:hidden}.tile-art{background:#eeebf4;place-items:center;min-height:12.5rem;padding:1.5rem;display:grid}.tile-description{justify-content:space-between;align-items:center;padding:1rem 1.2rem;display:flex}.tile-description h3{font-size:.85rem;font-weight:600}.tile-description>span{color:#9c8eb1}.tile-cards .tile-art{background:#f0e8e2}.tile-buttons .tile-art{background:#e9e6f6}.tile-accordions .tile-art{background:#e6eee9}.tile-tables .tile-art{background:#e8ebf1}.tile-animations .tile-art{background:#eee8f4}.mini-header{background:#fff;border:1px solid #e4ddeb;border-radius:.4rem;align-items:center;gap:.6rem;width:100%;padding:.75rem;font-size:.65rem;display:flex;box-shadow:0 5px 15px #66557b08}.mini-header>b{color:#7760bb;margin-right:auto;font-size:1rem}.mini-header>span{background:#e6e0ee;border-radius:1rem;width:1.5rem;height:.25rem}.mini-header i{color:#fff;background:#7561b9;border-radius:.2rem;padding:.35rem .5rem;font-size:.5rem;font-style:normal}.mini-card{background:#fff;border-radius:.6rem;gap:.5rem;width:8.5rem;padding:.6rem;display:grid;transform:rotate(-5deg);box-shadow:0 10px 18px #8b6e4c10}.mini-card>div{background:radial-gradient(circle at 20% 120%,#b5a0cd 40%,#0000 41%),radial-gradient(circle at 70% 70%,#ead3b9 40%,#ece4f3 41%);border-radius:.35rem;height:4rem}.mini-card>b{font-size:.6rem}.mini-card>span{background:#eae4ef;border-radius:1rem;height:.2rem}.mini-card>span:last-child{width:70%}.mini-buttons{text-align:center;gap:.75rem;font-size:.75rem;display:grid}.mini-buttons>b{color:#fff;background:#7b66bd;border:1px solid #6e58af;border-radius:.4rem;padding:.65rem 1.1rem;font-weight:550;box-shadow:0 5px #d2c8e8}.mini-buttons>span{color:#8a77af;background:#f5f2fc;border:1px solid #c8bddc;border-radius:.4rem;padding:.6rem}.mini-accordion{background:#fcfffc;border:1px solid #d3dfd5;border-radius:.6rem;gap:.5rem;width:100%;max-width:15rem;padding:1rem;display:grid}.mini-accordion b{font-size:.57rem;font-weight:550}.mini-accordion b:last-child{border-top:1px solid #e5ece5;margin-top:.35rem;padding-top:.75rem}.mini-accordion i{float:right;color:#839887;font-style:normal}.mini-accordion>span{background:#dfe8df;width:90%;height:.2rem}.mini-accordion>span:nth-child(3){width:70%}.mini-table{background:#fff;border:1px solid #dce0e7;border-radius:.5rem;width:100%;padding:.6rem}.mini-table>*{border-bottom:1px solid #eaeaf0;justify-content:space-between;gap:1rem;padding:.6rem .4rem;font-size:.54rem;display:flex}.mini-table i{font-style:normal}.mini-table>b{background:#f4f5f8;font-weight:550}.mini-table span i{color:#8e79b0;background:#f1edf8;border-radius:.2rem;padding-inline:.3rem}.mini-motion{place-items:center;gap:.6rem;display:grid}.mini-motion>span{color:#b5a0d5;font-size:4.5rem;line-height:1}.mini-motion>b{color:#9581b0;font-size:.6rem;font-weight:450}.section-copy{color:#81798a;max-width:26rem;font-size:.9rem;line-height:1.9}.home-code{color:#c4bbd7;background:#292536;border:1px solid #4c435e;border-radius:.9rem;overflow:hidden;box-shadow:0 15px 35px #3b2f5010}.code-window-bar{font:.58rem var(--sl-mono);color:#a399b7;border-bottom:1px solid #42394f;justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 1rem;display:flex}.code-window-bar>span:first-child{gap:.3rem;display:flex}.code-window-bar i{background:#655974;border-radius:50%;width:.35rem;height:.35rem}.code-window-bar i:first-child{background:#a28091}.code-window-bar i:nth-child(2){background:#a69b7f}.code-window-bar i:nth-child(3){background:#889b8b}.home-code pre{background:0 0;border:0;border-radius:0;margin:0;padding:1.5rem;font-size:.7rem;line-height:1.9}.home-code pre b{color:#c0a3e6;font-weight:500}.code-comment{color:#8b809e}.code-window-foot{color:#a399b7;border-top:1px solid #42394f;align-items:center;gap:.5rem;padding:.75rem 1.2rem;font-size:.55rem;display:flex}.theme-teaser{background:#f4f1f8;border:1px solid #e5deed;border-radius:1.2rem;grid-template-columns:.9fr 1.4fr;align-items:center;gap:3rem;padding:3rem;display:grid}.theme-copy p{color:#81798a;max-width:20rem;margin-block:1rem 1.3rem;font-size:.8rem}.theme-pair{grid-template-columns:1fr 1fr;gap:.85rem;display:grid;transform:rotate(-3deg)}.theme-pair .sl-card{--sl-gap:1rem;border-color:#ded7e9;padding:1.3rem;box-shadow:0 10px 20px #39295008}.theme-pair [data-theme=dark]{border-color:#344154;transform:translateY(1.2rem)}.theme-pair h3{letter-spacing:-.035em;font-size:1.25rem}.theme-pair p{font-size:.7rem}.theme-pair .sl-btn{min-height:2rem;padding:.4rem;font-size:.66rem}.theme-pair .sl-badge{font-size:.55rem}.final-cta{text-align:center;padding-block:7rem;position:relative}.cta-spark{color:#b8a6dc;margin-bottom:1.5rem;font-size:3rem;line-height:1;display:block}.final-cta h2{letter-spacing:-.055em;margin-bottom:2rem;font-size:clamp(2.3rem,4vw,3.6rem);font-weight:580}.download-link{color:#756887;align-items:center;gap:.5rem;font-size:.8rem;text-decoration:none;display:inline-flex}.final-cta>p{color:#958ba2;margin-top:1rem;font-size:.65rem}.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}.demo-kicker{color:#9f8bb8;letter-spacing:.13em;text-transform:uppercase;font-size:.57rem;font-weight:650}.demo-header nav>a:not(.sl-btn){font-size:.8rem;text-decoration:none}.theme-gallery .sl-card{--sl-gap:1.2rem;border-color:var(--sl-border)}.home-hero>*,.theme-teaser>*,.metrics-inner>div,.theme-pair>*{min-width:0}.hero-playground{grid-template-columns:minmax(0,1fr)}.hero-demo-card{min-width:0}.tile-art{overflow:hidden}.mini-card{max-width:100%}.hero-demo-card{max-width:calc(100% - 2rem)}.floating-code{max-width:calc(100% - 1rem)}.docs-page-header>p,.example-source>summary,.demo-kicker,.breadcrumbs,.catalog-card p{color:#746582}@media (prefers-reduced-motion:no-preference){.component-tile,.catalog-card{transition:transform .2s,box-shadow .2s,border-color .2s}.component-tile:hover,.catalog-card:hover{border-color:#c3afd6;transform:translateY(-3px);box-shadow:0 9px 20px #5b43700c}.tile-animations:hover .mini-motion>span{transform:rotate(35deg)}.mini-motion>span{transition:transform .4s}}.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}.footer-top p,.footer-top>div:not(:first-child) a,.footer-version,.footer-bottom,.footer-bottom a,.final-cta>p{color:#786b85}.hero-footnote,.section-heading>p,.principles p,.section-copy,.theme-copy p{color:#716778}@media (width<=70rem){.home-hero{gap:2rem}.hero-asterisk{display:none}.hero-demo-card{width:17rem}.floating-palette{right:-.3rem}.floating-note{font-size:.5rem;right:-.3rem}.floating-code{left:-.3rem}.desktop-nav{gap:1.3rem}.theme-teaser{gap:2rem;padding:2rem}.theme-pair{transform:none}}@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}.home-hero{grid-template-columns:1fr;gap:2.5rem;padding-block:3rem}.hero-copy h1{font-size:clamp(3.5rem,10vw,5.5rem)}.hero-copy>p{max-width:33rem}.hero-playground{width:min(100%,36rem);min-height:32rem;margin-inline:auto}.hero-demo-card{width:18rem}.floating-note{right:.7rem}.floating-palette{right:.5rem}.floating-code{left:.5rem}.metrics-inner>div{padding-inline:1rem}.metrics-inner strong{font-size:1.5rem}.metrics-inner>div>span{font-size:.6rem}.home-section{padding-block:4rem}.section-heading{align-items:start;gap:1.5rem}.section-heading>p{max-width:13rem}.theme-teaser{grid-template-columns:1fr}.theme-pair{width:min(100%,30rem)}.theme-copy p{max-width:30rem}.final-cta{padding-block:5rem}.footer-top{--sl-gap:2rem}}@media (width<=39.99rem){.header-inner{flex-wrap:wrap;gap:.75rem;padding-block:.75rem}.home-hero{grid-template-columns:minmax(0,1fr)}.release-pill{flex-wrap:wrap;max-width:100%}.playground-caption{inset-inline-end:1.5rem}.hero-demo-card,.floating-palette,.floating-note,.floating-code{transform:none}.announcement-divider{display:none}.announcement{gap:.3rem;font-size:.58rem}.announcement>a{display:none}.brand{font-size:1.25rem}.home-hero{padding-top:2rem}.release-pill{gap:.5rem;font-size:.6rem}.hero-copy h1{font-size:3.5rem}.hero-copy>p{font-size:.92rem}.hero-actions{gap:1.2rem}.hero-actions .sl-btn{padding:.8rem 1rem}.hero-secondary{font-size:.75rem}.hero-footnote{gap:.6rem;font-size:.57rem}.hero-playground{min-height:31rem}.hero-demo-card{width:16rem}.floating-note{font-size:.45rem;top:3rem;right:.4rem}.floating-palette{padding:.6rem;bottom:5rem;right:.3rem}.floating-palette i{width:1.25rem;height:1.4rem}.floating-palette>span:last-child{font-size:.42rem}.floating-code{padding:.65rem .7rem;bottom:1.8rem;left:.4rem}.floating-code code{font-size:.49rem}.code-caption{font-size:.4rem}.metrics-inner{grid-template-columns:1fr 1fr;gap:1.5rem 0}.metrics-inner>div:nth-child(3){border:0;padding-inline-start:0}.metrics-inner strong{font-size:1.7rem}.metrics-inner>div>span{font-size:.64rem}.section-heading{flex-direction:column;gap:1rem;margin-bottom:2rem}.section-heading h2,.build-section h2,.theme-copy h2{font-size:2rem}.section-heading>p{max-width:24rem}.principles{--sl-gap:2rem}.principles p{max-width:none}.component-section{padding-block:3rem}.tile-art{min-height:14rem}.mini-header{max-width:17rem}.mini-card{width:10rem}.mini-card>div{height:5rem}.mini-table{max-width:17rem}.theme-teaser{gap:1.5rem;padding:1.5rem}.theme-pair{grid-template-columns:1fr;gap:1rem}.theme-pair [data-theme=dark]{transform:none}.theme-pair .sl-card{padding:1.5rem}.theme-pair .sl-btn{width:max-content;padding-inline:1rem}.final-cta h2{font-size:2.3rem}.footer-bottom{flex-direction:column;gap:.5rem}.home-code pre{padding:1rem;font-size:.6rem}.home-code{min-width:0}.theme-gallery .sl-card{padding:1.2rem}}@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{place-items:center;width:2rem;height:2rem;display:grid}.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=light] .hero-copy h1 em{color:#006c7a}: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] .release-pill{color:#bdcbe0;background:#101a2d;border-color:#2c3c58}:root[data-theme=dark] .release-pill>span:first-child{color:#67e8f9;background:#153346}:root[data-theme=dark] .hero-copy h1 em{color:#67e8f9}:root[data-theme=dark] .hero-asterisk{color:#a78bfa}:root[data-theme=dark] .hero-copy>p{color:var(--sl-muted)}:root[data-theme=dark] .hero-secondary{color:#c5d2e7}:root[data-theme=dark] .hero-footnote{color:#a1b2cc}:root[data-theme=dark] .hero-footnote svg{color:#67e8f9}:root[data-theme=dark] .hero-playground{background:radial-gradient(at 45%,#1c2352 0%,#0a1528 70%);border-color:#253450;box-shadow:0 20px 100px #0b78b00c}:root[data-theme=dark] .playground-grid{background-image:linear-gradient(#34466b44 1px,#0000 1px),linear-gradient(90deg,#34466b44 1px,#0000 1px)}:root[data-theme=dark] :is(.playground-caption,.playground-coordinate){color:#9db1d0}:root[data-theme=dark] .hero-demo-card{background:#101d33;border-color:#3b4767;box-shadow:0 20px 50px #0005}:root[data-theme=dark] .hero-demo-card .sl-badge{color:#9deaf2;background:#143344;border-color:#346176}:root[data-theme=dark] .hero-card-art{background:linear-gradient(135deg,#112844,#2b2059)}:root[data-theme=dark] .hero-card-art span{background:#135ba0}:root[data-theme=dark] .hero-card-art span:nth-child(2){background:#7041cf}:root[data-theme=dark] .hero-card-art span:nth-child(3){background:#0aa9c4}:root[data-theme=dark] .hero-card-art i{color:#baf5ff}:root[data-theme=dark] :is(.floating-note,.floating-palette){color:#c5dcf0;background:#13213a;border-color:#3a4c6d;box-shadow:0 12px 28px #0004}:root[data-theme=dark] :is(.palette-label,.floating-palette>span:last-child){color:#bdcce2}:root[data-theme=dark] .floating-code{color:#86e7f2;background:#0a1426;border-color:#365274}:root[data-theme=dark] .floating-code b{color:#c4b5fd}:root[data-theme=dark] .code-caption{color:#a4b5cd}:root[data-theme=dark] .metrics-inner>div{border-color:#263752}:root[data-theme=dark] :is(.metrics-inner strong small,.metrics-inner>div>span){color:#a8b9d3}: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 h2 span,.build-section h2 span){color:#96abc8}: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] .principle-icon{color:#67e8f9}:root[data-theme=dark] .principle-number{color:#91a6c5}:root[data-theme=dark] :is(.text-link,.download-link){color:#9aeaf3}:root[data-theme=dark] .component-tile{color:var(--sl-text);background:#0f1b2e;border-color:#2a3b57}:root[data-theme=dark] .tile-art{background:#121c34}:root[data-theme=dark] .tile-cards .tile-art{background:#231d35}:root[data-theme=dark] .tile-buttons .tile-art{background:#14263b}:root[data-theme=dark] .tile-accordions .tile-art{background:#0d2a2c}:root[data-theme=dark] .tile-tables .tile-art{background:#111e32}:root[data-theme=dark] .tile-animations .tile-art{background:#201c39}:root[data-theme=dark] .tile-description>span{color:#9dcae2}:root[data-theme=dark] :is(.mini-header,.mini-card,.mini-accordion,.mini-table){color:#d3e0f3;background:#15233a;border-color:#334860}:root[data-theme=dark] .mini-header>b{color:#67e8f9}:root[data-theme=dark] :is(.mini-header>span,.mini-card>span,.mini-accordion>span){background:#40536d}:root[data-theme=dark] .mini-header i{color:#effaff;background:#24639b}:root[data-theme=dark] .mini-buttons>b{color:#09202b;background:#67e8f9;border-color:#22d3ee;box-shadow:0 5px #133e55}:root[data-theme=dark] .mini-buttons>span{color:#c2caff;background:#202644;border-color:#575480}:root[data-theme=dark] .mini-accordion b:last-child{border-color:#334860}:root[data-theme=dark] .mini-accordion i{color:#9de3cf}:root[data-theme=dark] .mini-table>*{border-color:#334860}:root[data-theme=dark] .mini-table>b{background:#21324b}:root[data-theme=dark] .mini-table span i{color:#d1c6ff;background:#343050}:root[data-theme=dark] .mini-motion>span{color:#a78bfa}:root[data-theme=dark] .mini-motion>b{color:#c6b5f8}:root[data-theme=dark] .home-code{color:#c8d9ed;background:#0b1425;border-color:#2c3d59}:root[data-theme=dark] :is(.code-window-bar,.code-window-foot){color:#a4b8d3;border-color:#263752}:root[data-theme=dark] .code-comment{color:#9aaec9}:root[data-theme=dark] .home-code pre b{color:#67e8f9}:root[data-theme=dark] .theme-teaser{background:#0e182b;border-color:#2b3956}: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)}@media (prefers-reduced-motion:no-preference){:root[data-theme=dark] :is(.component-tile:hover,.catalog-card:hover){border-color:#53728d;box-shadow:0 12px 30px #0005}}@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}.section-heading h2,.build-section h2,.theme-copy h2,.final-cta h2{letter-spacing:-.025em}@media (width<=767px){.hero-playground{overflow:clip}}@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)}.demo-feature-card,.demo-lift,.demo-glow,.catalog-card,.component-tile{transition:transform .28s cubic-bezier(.2,.7,.2,1),box-shadow .28s,border-color .28s,background-color .28s}.demo-feature-card:is(:hover,:focus-within),.catalog-card:is(:hover,:focus-within),.component-tile:is(:hover,:focus-within){border-color:var(--sl-accent);transform:translateY(-4px);box-shadow:0 12px 28px #0000001f}@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 svg{width:1.1em;height:1.1em}