.carousel-wrap{position:relative}.carousel{white-space:nowrap;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-marker-group:after;scrollbar-width:none;padding:6px 0 14px;scroll-padding-left:6px;display:block;overflow-x:auto}.carousel::-webkit-scrollbar{display:none}.carousel .card{vertical-align:top;white-space:normal;scroll-snap-align:start;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);width:280px;margin-right:14px;padding:18px;display:inline-block}.carousel .card .icon{color:var(--amber-soft);margin-bottom:10px;font-size:28px}.carousel .card h2{margin-bottom:6px;font-size:16px}.carousel .card p{color:var(--zinc-400);font-size:13px}.carousel .card code{font-size:.8em}.carousel::scroll-button(left),.carousel::scroll-button(right){z-index:10;background:var(--scroll-btn-bg);backdrop-filter:blur(6px);width:40px;height:40px;box-shadow:0 2px 12px var(--glass);color:var(--amber-soft);cursor:pointer;border:1px solid #f59e0b66;border-radius:50%;place-items:center;font-size:20px;transition:border-color .15s,background .15s,transform .12s;display:grid;position:absolute;top:50%;transform:translateY(-50%)}.carousel::scroll-button(left){content:"‹";left:8px}.carousel::scroll-button(right){content:"›";right:8px}.carousel::scroll-button(*):hover{border-color:var(--amber-500);background:var(--surface-2)}.carousel::scroll-button(*):active{transform:translateY(-50%)scale(.94)}.carousel::scroll-button(*):disabled{opacity:.25;pointer-events:none}.carousel::scroll-marker-group{white-space:normal;justify-content:center;gap:8px;padding-top:10px;display:flex}.carousel::scroll-marker{background:var(--zinc-700);border:1px solid var(--line);cursor:pointer;border-radius:50%;width:10px;height:10px;padding:0;transition:background .15s,transform .12s,border-color .15s}.carousel::scroll-marker:hover{background:var(--zinc-500)}.carousel::scroll-marker:target-current{background:var(--amber-500);border-color:var(--amber-300);transform:scale(1.3)}.carousel-dots{justify-content:center;gap:8px;padding-top:10px;display:flex}.carousel-dots .dot{background:var(--zinc-700);border:1px solid var(--line);cursor:pointer;border-radius:50%;width:10px;height:10px;text-decoration:none;transition:background .15s,transform .12s,border-color .15s}.carousel-dots .dot:hover{background:var(--zinc-500)}.carousel-dots .dot:target-current{background:var(--amber-500);border-color:var(--amber-300);transform:scale(1.3)}@supports not selector(:target-current){.carousel-dots .dot:first-child{background:var(--amber-500);border-color:var(--amber-300);transform:scale(1.3)}}.demo-grid{grid-template-columns:repeat(12,1fr);gap:14px;display:grid}.view-card{border:1px solid var(--line);background:var(--surface);border-radius:16px;flex-direction:column;justify-content:center;min-height:180px;padding:24px;animation:linear both reveal view();animation-range:entry cover 28%;display:flex}@keyframes reveal{0%{opacity:0;transform:translateY(14px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.view-card strong{color:var(--amber-soft)}.view-card p{color:var(--zinc-400);margin:8px 0 0;font-size:13px}@media (width<=760px){.view-card{min-height:140px;padding:18px}}.anchor-stage{flex-direction:column;gap:14px;display:flex}.anchor-row{flex-wrap:wrap;align-items:center;gap:16px;display:flex}.anchor-wrap{display:inline-block;position:relative}.anchor-wrap .anchor{anchor-name:var(--a)}.popover{background:var(--surface-2);width:260px;max-width:calc(100vw - 32px);color:var(--zinc-200);opacity:0;visibility:hidden;z-index:20;position-anchor:var(--a);position-area:bottom span-right;position-try-fallbacks:bottom span-left,top span-right,top span-left;border:1px solid #f59e0b4d;border-radius:12px;margin-top:10px;padding:12px 14px;font-size:13px;transition:opacity .15s,transform .15s,visibility .15s;position:absolute;transform:translateY(-4px)}.anchor-wrap:hover .popover,.anchor-wrap:focus-within .popover{opacity:1;visibility:visible;transform:translateY(0)}.popover b{color:var(--amber-soft)}.fallback-note{color:var(--zinc-500);font-size:12px}@media (width<=760px){.anchor-row{flex-direction:column;align-items:stretch;gap:10px}.anchor-wrap{display:block}.anchor-wrap .anchor{text-align:center;width:100%}}.faq{flex-direction:column;gap:8px;display:flex}.faq details{border:1px solid var(--line);background:var(--surface);interpolate-size:allow-keywords;border-radius:12px;padding:0 16px}.faq details::details-content{height:0;transition:height .3s ease,content-visibility .3s allow-discrete;overflow:hidden}.faq details[open]::details-content{height:auto}.faq summary{cursor:pointer;justify-content:space-between;align-items:center;gap:10px;padding:14px 0;font-size:15px;font-weight:600;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary .chev{color:var(--amber-soft);font-size:18px;transition:transform .2s}.faq details[open] summary .chev{transform:rotate(180deg)}.faq .content{color:var(--zinc-400);padding-bottom:14px;font-size:13px}.field-grid{grid-template-columns:repeat(2,1fr);gap:14px;display:grid}.field{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);flex-direction:column;gap:8px;min-width:0;padding:18px;display:flex}.field label{font-size:14px;font-weight:600}.field textarea,.field input{resize:none;width:100%;max-width:100%;color:var(--zinc-100);background:var(--bg-2);border:1px solid var(--line);field-sizing:content;border-radius:10px;padding:10px 12px;font-family:inherit;font-size:14px}.field textarea{resize:block;min-block-size:96px}.field .hint{color:var(--zinc-500);font-size:12px}@media (width<=760px){.field-grid{grid-template-columns:1fr}}.particles{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);height:220px;position:relative;overflow:hidden}.particles .p{left:random(5%,92%);top:random(5%,85%);width:random(--sz,6px,18px);height:random(--sz,6px,18px);background:var(--amber-500);opacity:random(.3,.9);scale:random(--sc,.6,1.4);animation:drift random(3s,7s) ease-in-out infinite alternate;animation-delay:random(0s,4s);border-radius:50%;position:absolute}@keyframes drift{to{transform:translateY(-18px)}}@supports not (width:random(0px,10px)){.particles .p:first-child{top:30%;left:8%}.particles .p:nth-child(2){top:60%;left:24%}.particles .p:nth-child(3){top:20%;left:40%}.particles .p:nth-child(4){top:70%;left:56%}.particles .p:nth-child(5){top:35%;left:72%}.particles .p:nth-child(6){top:55%;left:88%}.particles .p{opacity:.7;width:8px;height:8px;scale:1}}.selectors-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.demo-block{border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);padding:18px}.demo-block h2{color:var(--amber-soft);margin-bottom:8px;font-size:16px}.demo-block p{color:var(--zinc-400);margin-bottom:10px;font-size:13px}.demo-block .hint{color:var(--zinc-500);margin-top:10px;font-size:12px}.has-demo{flex-direction:column;gap:8px;display:flex}.has-demo .card-demo{border:1px solid var(--line);background:var(--bg-2);border-radius:10px;padding:12px}.has-demo .card-demo .badge{color:var(--amber-soft);font-size:18px}.has-demo .card-demo:has(.badge){background:#f59e0b14;border-color:#f59e0b80}.is-demo{flex-direction:column;gap:6px;display:flex}.is-demo :is(h4,p,a).target{color:var(--amber-soft);font-weight:600}.not-demo{flex-direction:column;gap:6px;list-style:none;display:flex}.not-demo li{border:1px solid var(--line);background:var(--bg-2);border-left:3px solid var(--amber-500);border-radius:8px;padding:8px 12px;font-size:13px}.not-demo li:not(.skip){border-left-color:var(--amber-500)}.not-demo li.skip{border-left-color:var(--zinc-700);opacity:.6}@media (width<=760px){.selectors-demo{grid-template-columns:1fr}}.clamp-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.clamp-text{letter-spacing:-.03em;color:var(--amber-soft);margin:10px 0;font-size:clamp(1rem,4vw,3rem);font-weight:900;line-height:1}.clamp-gap{gap:clamp(8px,2vw,24px);margin:10px 0;display:flex}.gap-box{aspect-ratio:1;border:1px solid var(--line);background:var(--amber-ghost);color:var(--amber-soft);border-radius:10px;flex:1;place-items:center;font-size:20px;font-weight:700;display:grid}.clamp-width{text-align:center;width:clamp(280px,50vw,600px);max-width:100%;color:var(--amber-soft);background:#f59e0b14;border:1px solid #f59e0b66;border-radius:10px;margin:10px 0;padding:16px;font-weight:600}@media (width<=760px){.clamp-demo{grid-template-columns:1fr}}.invoker-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.invoker-row{flex-wrap:wrap;gap:10px;margin-bottom:10px;display:flex}.invoker-popover{background:var(--surface-2);width:calc(100vw - 32px);max-width:320px;color:var(--zinc-200);border:1px solid #f59e0b66;border-radius:12px;padding:14px;font-size:13px;position:fixed;inset:120px auto auto 50%;transform:translate(-50%)}.invoker-popover b{color:var(--amber-soft)}.invoker-popover .btn-sm{margin-top:8px;padding:6px 12px;font-size:12px}.invoker-dialog{background:var(--surface);width:90vw;max-width:420px;color:var(--zinc-100);border:1px solid #f59e0b4d;border-radius:16px;margin:auto;padding:0}.invoker-dialog::backdrop{background:var(--glass);backdrop-filter:blur(4px)}.invoker-dialog-inner{text-align:center;padding:28px}.invoker-dialog-inner b{color:var(--amber-soft);margin-bottom:8px;font-size:18px;display:block}.invoker-dialog-inner p{color:var(--zinc-400);margin-bottom:18px;font-size:14px}.invoker-dialog{opacity:0;transition:opacity .25s ease,transform .25s ease,overlay .25s ease allow-discrete,display .25s ease allow-discrete;transform:scale(.92)}.invoker-dialog[open]{opacity:1;transform:scale(1)}.invoker-dialog::backdrop{opacity:0;transition:opacity .25s ease,overlay .25s ease allow-discrete,display .25s ease allow-discrete}.invoker-dialog[open]::backdrop{opacity:1}@starting-style{.invoker-dialog[open]{opacity:0;transform:scale(.92)}.invoker-dialog[open]::backdrop{opacity:0}}@media (width<=760px){.invoker-demo{grid-template-columns:1fr}}.select-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.select-row{margin:10px 0}.nice-select,.nice-select::picker(select){appearance:base-select}.nice-select{color:var(--zinc-100);background:var(--bg-2);border:1px solid var(--line);cursor:pointer;border-radius:10px;min-width:180px;padding:0;font-family:inherit;font-size:14px}.nice-select button{width:100%;font:inherit;color:inherit;cursor:pointer;background:0 0;border:none;align-items:center;gap:8px;padding:10px 14px;display:flex}.nice-select selectedcontent{text-align:left;flex:1}.nice-select .select-arrow{color:var(--amber-soft);flex-shrink:0;font-size:12px;transition:transform .2s}.nice-select:open .select-arrow{transform:rotate(180deg)}.nice-select::picker(select){background:var(--surface-2);box-shadow:0 8px 24px var(--glass);opacity:0;transform-origin:top;transition:opacity .25s ease,transform .25s ease,overlay .25s ease allow-discrete,display .25s ease allow-discrete;border:1px solid #f59e0b4d;border-radius:12px;margin-top:4px;padding:6px;transform:translateY(-8px)scale(.96)}.nice-select:open::picker(select){opacity:1;transform:translateY(0)scale(1)}@starting-style{.nice-select:open::picker(select){opacity:0;transform:translateY(-8px)scale(.96)}}.nice-select option{cursor:pointer;opacity:1;transition:background .15s,opacity .3s,transform .35s;transition-delay:calc(sibling-index() * 60ms);border-radius:8px;margin:2px 0;padding:10px 14px;transform:translate(0)}.nice-select option:hover{background:var(--bg-2)}.nice-select option:checked{background:var(--amber-ghost);color:var(--amber-soft)}@starting-style{.nice-select:open option{opacity:0;transform:translate(20px)}}@media (width<=760px){.select-demo{grid-template-columns:1fr}.nice-select{width:100%;min-width:0}}.scrollstate-demo{grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px;display:grid}.ss-stage{margin:0}.ss-stage h2{margin-bottom:4px}.ss-scroll{scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:thin;scrollbar-color:var(--amber-500) var(--bg-2);gap:16px;padding:14px 4px 18px;scroll-padding:4px;display:flex;overflow-x:auto}.ss-scroll::-webkit-scrollbar{height:6px}.ss-scroll::-webkit-scrollbar-track{background:var(--bg-2);border-radius:999px}.ss-scroll::-webkit-scrollbar-thumb{background:var(--amber-500);border-radius:999px}.ss-item{scroll-snap-align:center;flex:0 0 240px;container-type:scroll-state}.ss-item-inner{border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,#f59e0b1f,transparent),var(--surface);height:180px;color:var(--amber-soft);flex-direction:column;justify-content:center;align-items:center;gap:8px;transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1),border-color .4s,box-shadow .4s;display:flex}@container not scroll-state(snapped:x){.ss-item-inner{opacity:.2;border-color:var(--line);transform:scale(.92)}}.ss-item-inner b{letter-spacing:-.04em;font-size:36px;font-weight:900}.ss-item-inner span{color:var(--zinc-400);font-size:13px;font-weight:600}.ss-hint{color:var(--zinc-400);margin:6px 0 0;font-size:13px}@media (width<=760px){.scrollstate-demo{grid-template-columns:1fr}.ss-item{flex:0 0 75vw}}.sibling-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.sib-list{flex-direction:column;gap:6px;margin:10px 0;display:flex}.sib-item{border:1px solid var(--line);background:var(--bg-2);color:var(--amber-soft);opacity:1;transition:opacity .3s,transform .3s;transition-delay:calc(sibling-index() * .1s);border-radius:8px;padding:10px 14px;font-weight:700;transform:translate(0)}@starting-style{.sib-item{opacity:0;transform:translate(-12px)}}.sib-count{gap:4px;margin:10px 0;display:flex}.sib-bar{width:calc(100% / sibling-count());border:1px solid var(--line);background:var(--amber-ghost);height:40px;color:var(--amber-soft);opacity:1;transition:opacity .3s,transform .3s;transition-delay:calc(sibling-index() / sibling-count() * .4s);border-radius:8px;place-items:center;font-weight:700;display:grid;transform:translateY(0)}@starting-style{.sib-bar{opacity:0;transform:translateY(10px)}}@media (width<=760px){.sibling-demo{grid-template-columns:1fr}}.attr-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.attr-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0;display:grid}.attr-box{aspect-ratio:1;border:1px solid var(--line);background:attr(data-color type(<color>));color:var(--zinc-100);border-radius:12px;place-items:center;font-weight:700;display:grid}.attr-box:after{content:attr(data-label);text-transform:uppercase;letter-spacing:.05em;font-size:12px}@media (width<=760px){.attr-demo,.attr-grid{grid-template-columns:1fr}}.starting-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.starting-popover{background:var(--surface-2);width:calc(100vw - 32px);max-width:320px;color:var(--zinc-200);border:1px solid #f59e0b66;border-radius:12px;padding:14px;font-size:13px;inset:auto auto 80px}.starting-popover b{color:var(--amber-soft)}.starting-popover{opacity:1;transition:opacity .3s,transform .3s;transform:translateY(0)}@starting-style{.starting-popover{opacity:0;transform:translateY(10px)}}[popover]:not(:popover-open){display:none}[popover]{transition:opacity .3s ease,transform .3s ease,overlay .3s ease allow-discrete,display .3s ease allow-discrete;@starting-style{opacity:0;transform:translateY(10px)}}@media (width<=760px){.starting-demo{grid-template-columns:1fr}}.cq-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.cq-stage{margin:10px 0}.cq-resizer{border:1px dashed var(--line);border-radius:8px;width:100%;min-width:180px;max-width:100%;padding:4px}.cq-card{border:1px solid var(--line);background:var(--surface);border-radius:12px;flex-direction:column;gap:0;display:flex;overflow:hidden;container-type:inline-size}.cq-card-media{background:var(--amber-ghost);height:80px;color:var(--amber-soft);place-items:center;font-size:28px;display:grid}.cq-card-body{padding:14px}.cq-card-body b{color:var(--amber-soft);margin-bottom:4px;font-size:14px;display:block}.cq-card-body p{color:var(--zinc-400);margin:0;font-size:12px}@container (width>=320px){.cq-card{flex-direction:row}.cq-card-media{flex-shrink:0;width:80px;height:auto}.cq-card-body{flex-direction:column;justify-content:center;padding:16px;display:flex}}@media (width<=760px){.cq-demo{grid-template-columns:1fr}}.cs-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.cs-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin:10px 0;display:grid}.cs-box{aspect-ratio:1;border:1px solid var(--line);background:var(--amber-ghost);color:var(--amber-soft);text-align:center;place-items:center;font-size:11px;font-weight:600;display:grid}.cs-box span{padding:4px}.cs-round{border-radius:30%}.cs-scoop{corner-shape:scoop;border-radius:30%}.cs-bevel{corner-shape:bevel}.cs-notch{corner-shape:notch}.cs-super{corner-shape:superellipse(.6)}.cs-compare{justify-content:center;gap:16px;margin:14px 0;display:flex}.cs-icon-radius{border:1px solid var(--line);background:var(--amber-ghost);width:80px;height:80px;color:var(--amber-soft);text-align:center;border-radius:30%;place-items:center;font-size:10px;font-weight:600;display:grid}.cs-icon-squircle{border:1px solid var(--line);background:var(--amber-ghost);width:80px;height:80px;color:var(--amber-soft);text-align:center;corner-shape:superellipse(.7);place-items:center;font-size:10px;font-weight:600;display:grid}@media (width<=760px){.cs-demo,.cs-grid{grid-template-columns:1fr}}.oklch-demo{grid-template-columns:repeat(3,1fr);gap:14px;display:grid}.oklch-wheel{flex-wrap:wrap;gap:4px;margin:10px 0;display:flex}.oklch-swatch{border:1px solid var(--line);border-radius:8px;flex:1;min-width:40px;height:44px}.mix-grid{gap:6px;margin:10px 0;display:flex}.mix-box{border:1px solid var(--line);height:60px;color:var(--zinc-950);border-radius:10px;flex:1;place-items:center;font-size:11px;font-weight:600;display:grid}@media (width<=760px){.oklch-demo{grid-template-columns:1fr}}.sm-demo{flex-direction:column;gap:14px;display:flex}.sm-wrap{position:relative}.sm-toggle{opacity:0;clip:rect(0 0 0 0);pointer-events:none;width:1px;height:1px;position:absolute;overflow:hidden}.sm-list{flex-direction:column;gap:8px;margin:0 0 12px;padding:0;list-style:none;display:flex}.sm-list li{border:1px solid var(--glass-stroke,#ffffff14);background:var(--surface-2);color:var(--zinc-100);border-radius:10px;padding:10px 14px;font-size:14px}.sm-extra{display:none}.sm-wrap:has(.sm-toggle:checked) .sm-extra{display:block}.sm-btn{cursor:pointer;user-select:none;display:inline-flex}.sm-less,.sm-wrap:has(.sm-toggle:checked) .sm-more{display:none}.sm-wrap:has(.sm-toggle:checked) .sm-less{display:inline}