:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#080616;--surface:#161420;--surface-2:#1e1b2c;--primary:#7c5cff;--accent:#ff6b4a;--text:#f5f3ff;--muted:#9a94b3;--border:#c6c1da;--font-sans:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--space-1:.5rem;--space-2:1rem;--space-3:1.5rem;--space-4:2.5rem;--space-5:4rem;--space-6:6rem;--radius:12px;--radius-sm:8px;--text-xs:.8rem;--text-sm:.9rem;--text-base:1rem;--text-lg:1.25rem;--text-xl:1.75rem;--text-2xl:clamp(2.5rem, 6vw, 4.5rem);--container-pad:20px;--header-h:64px;--sidebar-w:260px;--font-mono:"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;--code-tag:#ff7ab6;--code-attr:#ffd479;--code-string:#9ece6a;--code-keyword:#c792ea;--code-function:#82aaff;--code-number:#f78c6c;--code-property:#7dcfff;--noise-texture:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--surface:#f5f4f9;--surface-2:#ececf3;--primary:#6428e0;--accent:#e2572f;--text:#16141f;--muted:#615c78;--border:#e2e0ea;--code-tag:#c2185b;--code-attr:#9a6a00;--code-string:#2f7d32;--code-keyword:#7c3aed;--code-function:#2a56c6;--code-number:#c2410c;--code-property:#0e7490}@media (prefers-color-scheme:light){:root:not([data-theme=dark]){--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--bg:#fff;--surface:#f5f4f9;--surface-2:#ececf3;--primary:#6428e0;--accent:#e2572f;--text:#16141f;--muted:#615c78;--border:#e2e0ea;--code-tag:#c2185b;--code-attr:#9a6a00;--code-string:#2f7d32;--code-keyword:#7c3aed;--code-function:#2a56c6;--code-number:#c2410c;--code-property:#0e7490}}*,:before,:after{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);-webkit-font-smoothing:antialiased;line-height:1.4}a{color:var(--primary)}.container{width:100%;padding:0 var(--container-pad);margin:0 auto}.flex{display:flex}.flex-center{justify-content:center;align-items:center;display:flex}.space{height:100vh}.gap-10{gap:10px}.gap-20{gap:20px}.gap-30{gap:30px}.c-primary{color:var(--primary)}.c-accent{color:var(--accent)}.note{padding:var(--space-2) var(--space-3);margin:var(--space-3) 0;border-radius:var(--radius);border:1px solid var(--border);border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);background:var(--surface);font-size:var(--text-sm);color:var(--muted);display:block}.site-header{z-index:100;justify-content:space-between;align-items:center;gap:var(--space-3);height:var(--header-h);padding:0 var(--container-pad);background:color-mix(in srgb, var(--bg) 97%, transparent);border-bottom:1px solid var(--border);display:flex;position:sticky;top:0}.site-header__brand{font-weight:700;font-size:var(--text-lg);color:var(--text);flex-shrink:0;align-items:center;gap:.5rem;text-decoration:none;display:flex}.site-header__brand .logo_text{width:80px;height:auto;display:block}.site-header__brand .logo_text--light{display:none}:root[data-theme=light] .site-header__brand .logo_text--light{display:block}:root[data-theme=light] .site-header__brand .logo_text--dark{display:none}.site-header__brand .logo_icon{width:30px;height:auto;display:block}.site-header__brand span{color:var(--primary)}.site-header__nav{align-items:center;gap:var(--space-4);height:100%;margin-right:auto;margin-left:var(--space-5);scrollbar-width:none;display:flex;overflow-x:auto}.site-header__nav::-webkit-scrollbar{display:none}.site-header__nav a{white-space:nowrap;height:100%;color:var(--muted);font-size:var(--text-sm);align-items:center;font-weight:600;text-decoration:none;display:flex;position:relative}.site-header__nav a:hover,.site-header__nav a.is-active{color:var(--text)}.site-header__nav a.is-active:after{content:"";background:var(--primary);border-radius:2px 2px 0 0;height:2px;position:absolute;bottom:0;left:0;right:0}.site-header__actions{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}.site-header__version{font-size:var(--text-xs);color:var(--muted);border:1px solid var(--border);white-space:nowrap;border-radius:999px;padding:.2rem .5rem;font-weight:600}.site-header__icon-btn{border-radius:var(--radius-sm);width:34px;height:34px;color:var(--muted);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;display:flex}.site-header__icon-btn:hover{color:var(--text);background:var(--surface)}.site-header__icon-btn svg{width:18px;height:18px}.site-header__icon-btn .icon-moon,:root[data-theme=light] .site-header__icon-btn .icon-sun{display:none}:root[data-theme=light] .site-header__icon-btn .icon-moon{display:block}.site-footer{border-top:1px solid var(--border);padding:var(--space-3) 0;color:var(--muted);font-size:var(--text-sm);text-align:center}.btn{align-items:center;gap:var(--space-1);border-radius:var(--radius);font-size:var(--text-base);cursor:pointer;border:1px solid #0000;padding:.75rem 1.5rem;font-weight:600;text-decoration:none;transition:background-color .15s,border-color .15s;display:inline-flex}.btn--primary{background:var(--primary);color:var(--bg)}.btn--ghost{border-color:var(--border);color:var(--text);background:0 0}.btn--ghost:hover{background:var(--surface);border-color:var(--primary)}.btn--sm{font-size:var(--text-sm);padding:.4rem .9rem}.noise{position:relative;overflow:hidden}.noise:after{content:"";background-image:var(--noise-texture);mix-blend-mode:overlay;pointer-events:none;background-repeat:repeat;position:absolute;inset:0}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3)}:not(pre)>code{font-family:var(--font-mono);background:var(--surface-2);color:var(--accent);border-radius:var(--radius-sm);padding:.15em .45em;font-size:.9em}.content-pane__attrs th:first-child,.content-pane__attrs td:first-child{width:1%;min-width:140px}.content-pane__attrs td:first-child{font-family:var(--font-mono);white-space:nowrap;font-size:.85em}.code-block-wrap{position:relative}.code-block{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius);padding:var(--space-3);overflow-x:auto}.code-block__copy{border:1px solid var(--border);border-top-right-radius:12px;border-bottom-left-radius:var(--radius-sm);background:var(--surface);width:30px;height:26px;color:var(--muted);cursor:pointer;opacity:0;justify-content:center;align-items:center;padding:0;transition:opacity .15s,color .15s,border-color .15s;display:flex;position:absolute;top:0;right:0}.code-block__copy svg{width:15px;height:15px}.code-block__copy .icon-check{display:none}.code-block-wrap:hover .code-block__copy,.code-block__copy:focus-visible{opacity:1}.code-block__copy:hover{color:var(--text);border-color:var(--primary)}.code-block__copy.is-copied{opacity:1;color:var(--primary);border-color:var(--primary)}.code-block__copy.is-copied .icon-copy{display:none}.code-block__copy.is-copied .icon-check{display:block}.code-block code{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--text);white-space:pre;background:0 0;line-height:1.6;display:block}.token.comment,.token.prolog,.token.doctype,.token.cdata{color:var(--muted);font-style:italic}.token.punctuation{color:var(--muted)}.token.tag,.token.tag .token.class-name,.token.selector,.token.doctype .token.name{color:var(--code-tag)}.token.attr-name{color:var(--code-attr)}.token.property{color:var(--code-property)}.token.attr-value,.token.string,.token.char,.token.url{color:var(--code-string)}.token.keyword,.token.rule,.token.important,.token.at-rule{color:var(--code-keyword)}.token.function{color:var(--code-function)}.token.number,.token.boolean,.token.unit,.token.color{color:var(--code-number)}.token.operator,.token.combinator{color:var(--muted)}.token.parameter,.token.variable{color:var(--code-property)}.token.important,.token.bold{font-weight:700}.badge{border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:var(--text-xs);border-radius:999px;align-items:center;padding:.15rem .55rem;font-weight:600;display:inline-flex}.callout{padding:var(--space-2) var(--space-3);margin:var(--space-3) 0;border-radius:var(--radius);border:1px solid var(--border);border-left:3px solid var(--primary);background:var(--surface);font-size:var(--text-sm);color:var(--muted)}.callout strong{color:var(--text)}.section-layout{grid-template-columns:var(--sidebar-w) minmax(0, 1fr);align-items:start;display:grid}.section-sidebar{top:var(--header-h);height:calc(100vh - var(--header-h));padding:var(--space-3) var(--space-2) var(--space-4) var(--container-pad);border-right:1px solid var(--border);position:sticky;overflow-y:auto}.section-sidebar__heading{padding:0 .75rem var(--space-1);margin:0 0 var(--space-1);font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.nav-tree{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.nav-tree__group summary{cursor:pointer;justify-content:space-between;align-items:center;gap:var(--space-1);border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text);padding:.5rem .75rem;font-weight:600;list-style:none;display:flex}.nav-tree__group summary::-webkit-details-marker{display:none}.nav-tree__group summary:hover{background:var(--surface)}.nav-tree__group summary:after{content:"";border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);flex-shrink:0;width:6px;height:6px;transition:transform .2s;transform:rotate(-45deg)}.nav-tree__group[open]>summary:after{transform:rotate(45deg)}.nav-tree__children{flex-direction:column;gap:1px;margin:0;padding:2px 0 6px;list-style:none;display:flex}.nav-tree__children a{border-left:2px solid var(--border);font-size:var(--text-sm);color:var(--muted);margin-left:.25rem;padding:.4rem .75rem .4rem 1.5rem;text-decoration:none;display:block}.nav-tree__children a:hover{color:var(--text)}.nav-tree__children a.is-active{color:var(--primary);border-left-color:var(--primary);font-weight:600}.nav-tree__flat{margin:0;padding:0;list-style:none}.nav-tree__flat a{border-radius:var(--radius-sm);font-size:var(--text-sm);color:var(--text);align-items:center;padding:.5rem .75rem;font-weight:600;text-decoration:none;display:flex}.nav-tree__flat a:hover{background:var(--surface)}.nav-tree__flat a.is-active{color:var(--primary);background:var(--surface)}.demo-sidebar{height:100vh;top:0}.demo-tabs{gap:var(--space-2);flex-direction:column;display:flex}.demo-tabs__nav{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);gap:2px;width:fit-content;padding:3px;display:inline-flex}.demo-tabs__btn{border-radius:calc(var(--radius-sm) - 3px);color:var(--muted);font-family:inherit;font-size:var(--text-sm);cursor:pointer;background:0 0;border:none;padding:.35rem .9rem;font-weight:600;transition:color .15s,background .15s}.demo-tabs__btn:hover{color:var(--text)}.demo-tabs__btn.is-active{background:var(--primary);color:var(--bg)}.demo-tabs__panel{display:none}.demo-tabs__panel.is-active{display:block}.demo-section{padding-bottom:var(--space-5);margin-bottom:var(--space-5);border-bottom:1px solid var(--border);scroll-margin-top:20px}.demo-section:last-child{border-bottom:none;margin-bottom:0}.demo-section h2{font-size:var(--text-lg);margin:0 0 var(--space-3)}.section-content{min-width:0;padding:var(--space-4) var(--container-pad) var(--space-6) var(--space-4)}.content-pane__eyebrow{margin-bottom:var(--space-1);color:var(--muted);font-size:var(--text-sm);font-weight:600;display:block}.content-pane h1{font-size:var(--text-xl);margin:0 0 var(--space-1)}.content-pane>p.content-pane__lead{color:var(--muted);margin:0 0 var(--space-3)}.content-pane h2{font-size:var(--text-lg);margin:var(--space-4) 0 var(--space-2)}.content-pane__panel{gap:var(--space-3);margin:var(--space-3) 0;flex-wrap:wrap;align-items:flex-start;display:flex}.install-picker-layout{gap:var(--space-3);margin:var(--space-3) 0;grid-template-columns:minmax(240px,340px) minmax(0,1fr);align-items:start;display:grid}.install-picker-output{flex-direction:column;gap:10px;min-width:0;display:flex}@media (width<=760px){.install-picker-layout{grid-template-columns:1fr}}.install-picker{gap:var(--space-3);padding:var(--space-3);border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);flex-direction:column;display:flex}.install-picker__hint{margin:var(--space-1) 0 0;font-size:var(--text-xs);color:var(--muted)}.install-picker__group .code-block-wrap{margin-top:var(--space-1)}.install-picker__label{margin:0 0 var(--space-1);font-size:var(--text-xs);color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-weight:600}.install-picker__mode{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm);gap:2px;padding:6px;display:inline-flex}.install-picker__mode .btn{border-radius:calc(var(--radius-sm) - 3px);border-color:#0000;transition:background-color .15s,color .15s}.install-picker__mode .btn:hover{background:var(--surface-2);color:var(--text);border-color:#0000}.install-picker__mode .btn.is-active{background:var(--primary);color:var(--bg);border-color:#0000}.install-picker__mode .btn.is-active:hover{background:var(--primary);color:var(--bg)}.install-picker__chips{gap:var(--space-2);flex-wrap:wrap;display:flex}.install-picker__chip{border:1px solid var(--border);background:var(--bg);font-size:var(--text-sm);opacity:.8;cursor:pointer;border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .8rem;transition:color .15s,border-color .15s;display:inline-flex}.install-picker__chip:has(input:checked){color:var(--text);border-color:var(--primary);background:color-mix(in srgb, var(--primary) 12%, var(--bg))}.install-picker__chip input{accent-color:var(--primary)}.install-picker__chip--all{border-style:dashed;font-weight:600}.install-picker__chip.is-disabled{opacity:.4;cursor:not-allowed}.install-picker__chip.is-disabled input{cursor:not-allowed}.demo-animate-box{min-width:64px;height:64px;padding:0 var(--space-2);border-radius:var(--radius);border:1px solid var(--border);background:linear-gradient(135deg, var(--surface), var(--primary) 180%);color:var(--text);font-family:var(--font-mono);font-size:var(--text-sm);justify-content:center;align-items:center;font-weight:600;display:flex;box-shadow:0 12px 24px -16px #00000073}.tl-demo{margin:var(--space-3) 0}.tl-demo__stage{align-items:center;gap:var(--space-2);flex-wrap:wrap;display:flex}.tl-demo__arrow{color:var(--muted);font-size:var(--text-lg);flex:none}.tl-demo__track{height:8px;margin:var(--space-4) var(--space-1) var(--space-2);background:var(--surface-2);border-radius:999px;position:relative}.tl-demo__track-fill{background:linear-gradient(90deg, var(--primary), var(--accent));border-radius:999px;width:0%;position:absolute;inset:0}.tl-demo__tick{background:var(--border);border-radius:1px;width:2px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%)}.tl-demo__tick--label{background:var(--accent);height:18px}.tl-demo__tick-text{font-size:var(--text-xs);color:var(--muted);white-space:nowrap;position:absolute;top:14px;left:50%;transform:translate(-50%)}.tl-demo__playhead{background:var(--text);width:12px;height:12px;box-shadow:0 0 0 2px var(--primary);border-radius:50%;position:absolute;top:50%;left:0%;transform:translate(-50%,-50%)}.tl-demo__status{font-family:var(--font-mono);font-size:var(--text-sm);color:var(--muted);margin-left:auto}.bp-demo-layout{gap:var(--space-3);margin:var(--space-3) 0;grid-template-columns:minmax(200px,380px) minmax(0,1fr);align-items:start;display:grid}@media (width<=640px){.bp-demo-layout{grid-template-columns:1fr}}.bp-demo-frame{width:360px;min-width:180px;max-width:100%;padding:var(--space-3);border:1px dashed var(--border);border-radius:var(--radius);background:var(--surface);resize:horizontal;overflow:auto}.content-pane__attrs{border-collapse:collapse;width:100%;margin-top:var(--space-2);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden}.content-pane__attrs th,.content-pane__attrs td{text-align:left;border-bottom:1px solid var(--border);font-size:var(--text-sm);padding:1rem}.content-pane__attrs th{color:var(--muted);background:var(--surface-2);font-weight:600}.content-pane__attrs tbody tr:nth-child(2n){background:var(--surface-2)}.content-pane__attrs tbody tr:last-child td{border-bottom:none}.content-pane__placeholder{padding:var(--space-4);border:1px dashed var(--border);border-radius:var(--radius);color:var(--muted);font-size:var(--text-sm)}.page-section{max-width:880px;padding:var(--space-5) 0 var(--space-6);margin:0 auto}.page-installation{max-width:80vw;margin-block:20px}.demo-stage{min-height:100vh}.demo-stage__title{font-size:var(--text-xl);margin:0 0 var(--space-4)}@media (width<=860px){.section-layout{grid-template-columns:1fr}.section-sidebar{border-right:none;border-bottom:1px solid var(--border);width:100%;height:auto;padding:var(--space-2) var(--container-pad);position:static}.section-content{padding:var(--space-3) var(--container-pad) var(--space-6)}}.ease-grid{gap:var(--space-4);margin-top:var(--space-3);grid-template-columns:1fr 1fr;align-items:start;display:grid}@media (width<=760px){.ease-grid{grid-template-columns:1fr}}.ease-demo{margin-bottom:var(--space-3)}.ease-demo__track{width:264px;max-width:100%;height:64px;position:relative}.ease-demo__box{position:absolute;top:0;left:0}.ease-chips{gap:var(--space-2);margin-top:var(--space-2);flex-wrap:wrap;display:flex}.ease-chip{border:1px solid var(--border);background:var(--surface);color:var(--text);font-family:var(--font-mono);font-size:var(--text-sm);cursor:pointer;border-radius:999px;align-items:center;padding:.4rem .9rem;transition:color .15s,border-color .15s,background-color .15s;display:inline-flex}.ease-chip:hover{border-color:var(--primary)}.ease-chip.is-active{background:var(--primary);border-color:var(--primary);color:var(--bg);font-weight:600}.showcase-hero{padding:var(--space-3) 0 var(--space-2);max-width:780px}.showcase-hero h1{font-size:var(--text-xl);margin:0 0 var(--space-1)}.showcase-hero p{color:var(--muted);margin:0}.showcase-search-bar{padding-top:var(--space-2)}.showcase-search{border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);width:100%;max-width:360px;color:var(--text);font-size:var(--text-base);padding:.6rem .9rem}.showcase-empty{padding:var(--space-4) 0;text-align:center;color:var(--muted)}.showcase-grid{gap:var(--space-3);padding:var(--space-4) 0 var(--space-6);grid-template-columns:repeat(auto-fill,minmax(600px,1fr));min-height:240px;display:grid}@media (width<=640px){.showcase-grid{grid-template-columns:1fr}}.showcase-card{aspect-ratio:16/9;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);position:relative;overflow:hidden}.showcase-card__link{text-decoration:none;display:block;position:absolute;inset:0}.showcase-card__code-btn{top:var(--space-2);right:var(--space-2);z-index:2;border-radius:var(--radius-sm);color:#fff;cursor:pointer;background:#00000073;border:none;justify-content:center;align-items:center;width:30px;height:30px;display:flex;position:absolute}.showcase-card__code-btn:hover{background:#000000b3}.showcase-code-dialog{gap:var(--space-2);flex-direction:column;width:90vw;height:92vh;display:flex;position:relative}pre{margin:0}.showcase-code-dialog h2{flex:none;margin:0;padding-right:72px}.showcase-code-dialog .demo-tabs{flex:1;min-height:0}.showcase-code-dialog .demo-tabs__nav{flex:none}.showcase-code-dialog__body{flex:1;min-height:0;overflow:auto}.showcase-code-dialog__body .code-block-wrap,.showcase-code-dialog__body .code-block{height:100%}.showcase-code-dialog .btn{top:var(--space-3);right:var(--space-3);flex:none;position:absolute}.showcase-card__media{object-fit:cover;will-change:transform;backface-visibility:hidden;width:100%;height:100%;transition:transform .4s;position:absolute;inset:0}.showcase-card:hover .showcase-card__media{transform:scale(1.01)}.showcase-card__tag{top:var(--space-2);left:var(--space-2);z-index:1;color:#fff;background:#00000073;border:none;position:absolute}.nav{color:#000}sx-slider-pagination[effect=number] .sx-slider-pagination-bullet{border:1px solid #fff}