/* /design-styles/: the Style Studio. One component sheet, ten skins. Each skin is a set of tokens on .dsx[data-ds]
 * (plus a few overrides); components only ever read tokens. --h hue, --k depth (0-1), --rm roundness multiplier. */

/* ================= tokens: the neutral base ================= */
.dsx{
  --h:265;--k:.6;--rm:1;
  --acc:hsl(var(--h) 90% 62%);--acc-ink:#fff;
  --font:var(--body);
  --bg:#0f0f1f;--surf:rgba(255,255,255,.06);--surf-bd:1px solid rgba(255,255,255,.12);--surf-sh:none;--surf-bf:none;
  --ink:#f2f0fa;--dim:#c4bedb;
  --r:calc(12px*var(--rm));--r-lg:calc(20px*var(--rm));
  --btn-bg:var(--acc);--btn-ink:var(--acc-ink);--btn-bd:1px solid transparent;--btn-sh:none;--btn-sh-h:none;--btn-sh-a:none;
  --btn-tf-h:none;--btn-tf-a:none;--btn-font:600 15px/1 var(--font);--btn-ls:0;--btn-tt:none;--btn-ts:none;
  --btn2-bg:rgba(255,255,255,.1);--btn2-ink:var(--ink);--btn2-bd:1px solid rgba(255,255,255,.18);--btn2-sh:none;--btn2-sh-h:var(--btn2-sh);--btn2-bg-h:rgba(255,255,255,.18);
  --ghost-ink:var(--ink);--ghost-bd:1px solid transparent;
  --fld-bg:rgba(255,255,255,.06);--fld-bd:1px solid rgba(255,255,255,.18);--fld-sh:none;--fld-f:0 0 0 3px color-mix(in srgb,var(--acc) 38%,transparent);
  --tr-bg:rgba(255,255,255,.18);--tr-bd:1px solid transparent;--tr-sh:none;--tr-on:var(--acc);--kn-bg:#fff;--kn-sh:0 1px 4px rgba(0,0,0,.4);
  --seg-bg:rgba(255,255,255,.08);--seg-bd:1px solid transparent;--seg-sh:none;--seg-on-bg:rgba(255,255,255,.2);--seg-on-ink:var(--ink);--seg-on-sh:none;
  --chip-bg:rgba(255,255,255,.1);--chip-bd:1px solid rgba(255,255,255,.14);--chip-ink:var(--ink);
  --card-bg:rgba(255,255,255,.04);--card-bd:1px solid rgba(255,255,255,.1);--card-sh:none;
  --chk-ink:#fff;--pp:clamp(16px,2.4vw,24px);
  /* fills that carry text. Fallback is plain HSL; the @supports block below makes them equal-lightness so the hue slider never costs contrast */
  --f1:hsl(var(--h) 80% 42%);--f1d:hsl(var(--h) 80% 34%);--f2:hsl(calc(var(--h) + 50) 80% 40%);--f2d:hsl(calc(var(--h) + 50) 80% 32%);
  --fl1:hsl(var(--h) 95% 64%);--fl2:hsl(calc(var(--h) + 60) 95% 64%);--fl3:hsl(calc(var(--h) + 130) 95% 62%);--txt:hsl(var(--h) 55% 34%);
  --pic:linear-gradient(135deg,var(--f1),var(--f2));
}

/* ================= glass: frosted panels over colour ================= */
.dsx[data-ds="glass"]{
  --bg:linear-gradient(160deg,#0d0d24,#150f33 55%,#0b1330);
  --surf:linear-gradient(rgba(8,8,26,.4),rgba(8,8,26,.4)),rgba(255,255,255,calc(.05 + .14*var(--k)));
  --surf-bd:1px solid rgba(255,255,255,calc(.12 + .22*var(--k)));
  --surf-sh:0 14px 44px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.35);
  --surf-bf:blur(calc(6px + 26px*var(--k))) saturate(1.6);
  --r:calc(14px*var(--rm));--r-lg:calc(26px*var(--rm));
  --btn-bg:linear-gradient(135deg,color-mix(in srgb,var(--f1) 97%,transparent),color-mix(in srgb,var(--f2) 92%,transparent));
  --badge-bg:var(--f1);--badge-ink:#fff;
  --btn-ink:#fff;--btn-bd:1px solid rgba(255,255,255,.45);--btn-ts:0 1px 2px rgba(0,0,0,.35);
  --btn-sh:0 10px 28px hsl(var(--h) 92% 55% / .45),inset 0 1px 0 rgba(255,255,255,.55);
  --btn-sh-h:0 16px 36px hsl(var(--h) 92% 55% / .6),inset 0 1px 0 rgba(255,255,255,.7);
  --btn-tf-h:translateY(-2px);--btn-tf-a:translateY(1px) scale(.98);
  --btn2-bg:rgba(255,255,255,.14);--btn2-bd:1px solid rgba(255,255,255,.34);--btn2-sh:inset 0 1px 0 rgba(255,255,255,.4);--btn2-bg-h:rgba(255,255,255,.24);
  --fld-bg:rgba(255,255,255,.1);--fld-bd:1px solid rgba(255,255,255,.3);--fld-sh:inset 0 2px 6px rgba(0,0,0,.18);
  --tr-bg:rgba(255,255,255,.2);--tr-bd:1px solid rgba(255,255,255,.3);--tr-on:hsl(var(--h) 92% 62% / .95);--kn-bg:rgba(255,255,255,.97);
  --seg-bg:rgba(255,255,255,.1);--seg-bd:1px solid rgba(255,255,255,.22);--seg-on-bg:rgba(255,255,255,.2);--seg-on-sh:inset 0 1px 0 rgba(255,255,255,.5),0 4px 12px rgba(0,0,0,.2);
  --card-bg:rgba(255,255,255,.08);--card-bd:1px solid rgba(255,255,255,.26);--card-sh:inset 0 1px 0 rgba(255,255,255,.3);
  --chip-bg:rgba(255,255,255,.18);--chip-bd:1px solid rgba(255,255,255,.3);
}

/* ================= crystal: glossy, rounded, bright edges ================= */
.dsx[data-ds="crystal"]{
  --h:205;
  --bg:linear-gradient(160deg,#0b1226,#0f1c3a 60%,#0a1630);
  --surf:linear-gradient(rgba(6,12,32,.4),rgba(6,12,32,.4)),linear-gradient(150deg,rgba(255,255,255,calc(.1 + .1*var(--k))),rgba(255,255,255,.03));
  --surf-bd:1px solid rgba(255,255,255,.24);
  --surf-sh:0 20px 56px rgba(0,0,0,.4),inset 0 1.5px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.14),inset 1px 0 0 rgba(255,255,255,.18);
  --surf-bf:blur(calc(8px + 14px*var(--k))) saturate(1.9) brightness(1.1);
  --r:calc(22px*var(--rm));--r-lg:calc(34px*var(--rm));
  --btn-bg:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.02)),linear-gradient(135deg,color-mix(in srgb,var(--f1d) 97%,transparent),color-mix(in srgb,var(--f2d) 94%,transparent));
  --badge-bg:var(--f1);--badge-ink:#fff;
  --btn-ink:#fff;--btn-bd:1px solid rgba(255,255,255,.55);--btn-ts:0 1px 3px rgba(0,0,0,.4);
  --btn-sh:inset 0 1.5px 0 rgba(255,255,255,.8),inset 0 -10px 16px rgba(255,255,255,.1),0 12px 30px rgba(0,0,0,.32),0 0 30px hsl(var(--h) 95% 60% / .28);
  --btn-sh-h:inset 0 1.5px 0 #fff,inset 0 -10px 16px rgba(255,255,255,.16),0 16px 38px rgba(0,0,0,.36),0 0 46px hsl(var(--h) 95% 60% / .5);
  --btn-tf-h:translateY(-2px) scale(1.02);--btn-tf-a:scale(.97);
  --btn2-bg:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.05));--btn2-bd:1px solid rgba(255,255,255,.4);--btn2-sh:inset 0 1.5px 0 rgba(255,255,255,.6),0 8px 20px rgba(0,0,0,.25);--btn2-bg-h:rgba(255,255,255,.2);
  --fld-bg:rgba(255,255,255,.08);--fld-bd:1px solid rgba(255,255,255,.3);--fld-sh:inset 0 2px 8px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.15);
  --tr-bg:rgba(255,255,255,.14);--tr-bd:1px solid rgba(255,255,255,.35);--tr-sh:inset 0 2px 6px rgba(0,0,0,.3);--tr-on:linear-gradient(135deg,hsl(var(--h) 95% 60%),hsl(calc(var(--h) + 50) 95% 62%));
  --kn-bg:linear-gradient(180deg,#fff,#d8e6ff);--kn-sh:0 3px 8px rgba(0,0,0,.35),inset 0 -2px 4px rgba(120,160,255,.35);
  --seg-bg:rgba(255,255,255,.08);--seg-bd:1px solid rgba(255,255,255,.28);--seg-on-bg:linear-gradient(180deg,rgba(255,255,255,.24),rgba(255,255,255,.06));--seg-on-sh:inset 0 1.5px 0 rgba(255,255,255,.7),0 6px 14px rgba(0,0,0,.25);
  --card-bg:linear-gradient(150deg,rgba(255,255,255,.14),rgba(255,255,255,.03));--card-bd:1px solid rgba(255,255,255,.3);--card-sh:inset 0 1.5px 0 rgba(255,255,255,.55);
  --chip-bg:rgba(255,255,255,.16);--chip-bd:1px solid rgba(255,255,255,.4);
}

/* ================= neumorphic: pressed out of the page ================= */
.dsx[data-ds="neu"]{
  --o:calc(3px + 9px*var(--k));--bl:calc(var(--o)*2.2);--sd:#b2bacb;--sl:#ffffff;
  --bg:#e2e7ee;--surf:#e2e7ee;--surf-bd:0 solid transparent;
  --surf-sh:var(--o) var(--o) var(--bl) var(--sd),calc(var(--o)*-1) calc(var(--o)*-1) var(--bl) var(--sl);
  --ink:#394255;--dim:#586379;--acc-ink:#fff;
  --r:calc(14px*var(--rm));--r-lg:calc(28px*var(--rm));
  --btn-bg:#e2e7ee;--btn-ink:var(--txt);--badge-bg:var(--f1);--badge-ink:#fff;--btn-bd:0 solid transparent;--btn-font:700 15px/1 var(--font);
  --btn-sh:calc(var(--o)*.6) calc(var(--o)*.6) calc(var(--bl)*.6) var(--sd),calc(var(--o)*-.6) calc(var(--o)*-.6) calc(var(--bl)*.6) var(--sl);
  --btn-sh-h:calc(var(--o)*.85) calc(var(--o)*.85) calc(var(--bl)*.85) var(--sd),calc(var(--o)*-.85) calc(var(--o)*-.85) calc(var(--bl)*.85) var(--sl);
  --btn-sh-a:inset calc(var(--o)*.5) calc(var(--o)*.5) calc(var(--bl)*.5) var(--sd),inset calc(var(--o)*-.5) calc(var(--o)*-.5) calc(var(--bl)*.5) var(--sl);
  --btn-tf-a:scale(.985);
  --btn2-bg:#e2e7ee;--btn2-ink:#394255;--btn2-bd:0 solid transparent;--btn2-sh:var(--btn-sh);--btn2-sh-h:var(--btn-sh-h);--btn2-bg-h:#e2e7ee;
  --ghost-ink:#394255;
  --fld-bg:#e2e7ee;--fld-bd:0 solid transparent;
  --fld-sh:inset calc(var(--o)*.5) calc(var(--o)*.5) calc(var(--bl)*.5) var(--sd),inset calc(var(--o)*-.5) calc(var(--o)*-.5) calc(var(--bl)*.5) var(--sl);
  --fld-f:inset calc(var(--o)*.5) calc(var(--o)*.5) calc(var(--bl)*.5) var(--sd),inset calc(var(--o)*-.5) calc(var(--o)*-.5) calc(var(--bl)*.5) var(--sl),0 0 0 2px hsl(var(--h) 70% 60% / .7);
  --tr-bg:#e2e7ee;--tr-bd:0 solid transparent;--tr-sh:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl);--tr-on:#e2e7ee;
  --kn-bg:linear-gradient(145deg,#f6f8fb,#d3d9e3);--kn-sh:3px 3px 6px var(--sd),-2px -2px 5px var(--sl);
  --seg-bg:#e2e7ee;--seg-bd:0 solid transparent;--seg-sh:inset 3px 3px 6px var(--sd),inset -3px -3px 6px var(--sl);
  --seg-on-bg:#e2e7ee;--seg-on-ink:var(--txt);--seg-on-sh:3px 3px 6px var(--sd),-3px -3px 6px var(--sl);
  --card-bg:#e2e7ee;--card-bd:0 solid transparent;--card-sh:inset calc(var(--o)*.4) calc(var(--o)*.4) calc(var(--bl)*.4) var(--sd),inset calc(var(--o)*-.4) calc(var(--o)*-.4) calc(var(--bl)*.4) var(--sl);
  --chip-bg:#e2e7ee;--chip-bd:0 solid transparent;--chip-ink:#394255;--chk-ink:var(--txt);
}
.dsx[data-ds="neu"] .ds-tgl input:checked+.ds-tgl__ui::after{background:linear-gradient(145deg,hsl(var(--h) 75% 72%),hsl(var(--h) 70% 52%))}
.dsx[data-ds="neu"] .ds-prog i{background:linear-gradient(90deg,hsl(var(--h) 75% 72%),hsl(var(--h) 70% 52%))}
.dsx[data-ds="neu"] .ds-chip{box-shadow:2px 2px 5px var(--sd),-2px -2px 5px var(--sl)}
.dsx[data-ds="neu"] .ds-chk input:checked+.ds-chk__ui{background:#e2e7ee}

/* ================= clay: puffy and friendly ================= */
.dsx[data-ds="clay"]{
  --h:300;
  --bg:linear-gradient(160deg,#f6ebff,#ffe9f2 55%,#e8f3ff);
  --ink:#43305f;--dim:#5e4c7b;
  --r:calc(20px*var(--rm));--r-lg:calc(34px*var(--rm));
  --surf:linear-gradient(145deg,#ffffff,#f4ebff);--surf-bd:0 solid transparent;
  --surf-sh:0 calc(14px + 14px*var(--k)) calc(28px + 14px*var(--k)) -10px hsl(var(--h) 60% 45% / .35),inset 0 calc(-6px - 6px*var(--k)) 14px hsl(var(--h) 70% 82% / .55),inset 0 6px 12px #fff;
  --btn-bg:linear-gradient(160deg,var(--f1),var(--f1d));--btn-ink:#fff;--badge-bg:var(--f1);--badge-ink:#fff;--btn-bd:0 solid transparent;--btn-ts:0 1px 2px hsl(var(--h) 80% 25% / .55);--btn-font:700 15px/1 var(--font);
  --btn-sh:0 12px 20px -6px hsl(var(--h) 80% 40% / .55),inset 0 -6px 10px hsl(var(--h) 90% 26% / .35),inset 0 5px 8px rgba(255,255,255,.22);
  --btn-sh-h:0 18px 26px -6px hsl(var(--h) 80% 40% / .6),inset 0 -6px 10px hsl(var(--h) 90% 26% / .35),inset 0 5px 8px rgba(255,255,255,.3);
  --btn-sh-a:0 4px 8px -4px hsl(var(--h) 80% 40% / .5),inset 0 -3px 6px hsl(var(--h) 90% 30% / .35),inset 0 6px 12px rgba(0,0,0,.12);
  --btn-tf-h:translateY(-3px);--btn-tf-a:translateY(1px) scale(.94);
  --btn2-bg:linear-gradient(160deg,#ffffff,#f1e6ff);--btn2-ink:var(--ink);--btn2-bd:0 solid transparent;
  --btn2-sh:0 10px 18px -8px hsl(var(--h) 60% 45% / .4),inset 0 -5px 8px hsl(var(--h) 70% 80% / .5),inset 0 5px 8px #fff;--btn2-bg-h:#fff;
  --ghost-ink:var(--ink);
  --fld-bg:#fbf6ff;--fld-bd:0 solid transparent;--fld-sh:inset 0 4px 10px hsl(var(--h) 50% 60% / .25),inset 0 -2px 4px #fff;--fld-f:inset 0 4px 10px hsl(var(--h) 50% 60% / .25),0 0 0 3px hsl(var(--h) 80% 65% / .45);
  --tr-bg:hsl(var(--h) 40% 88%);--tr-bd:0 solid transparent;--tr-sh:inset 0 3px 8px hsl(var(--h) 50% 55% / .3);--tr-on:linear-gradient(160deg,hsl(var(--h) 80% 66%),hsl(var(--h) 72% 52%));
  --kn-bg:linear-gradient(160deg,#fff,#efe3ff);--kn-sh:0 4px 8px hsl(var(--h) 60% 40% / .4),inset 0 -3px 5px hsl(var(--h) 60% 80% / .6);
  --seg-bg:hsl(var(--h) 40% 90%);--seg-bd:0 solid transparent;--seg-sh:inset 0 3px 8px hsl(var(--h) 50% 55% / .3);
  --seg-on-bg:linear-gradient(160deg,#fff,#f1e6ff);--seg-on-sh:0 5px 10px -3px hsl(var(--h) 60% 45% / .45),inset 0 -3px 5px hsl(var(--h) 70% 80% / .5);
  --card-bg:linear-gradient(145deg,#ffffff,#f7efff);--card-bd:0 solid transparent;--card-sh:0 12px 22px -10px hsl(var(--h) 60% 45% / .4),inset 0 -6px 10px hsl(var(--h) 70% 82% / .45),inset 0 5px 8px #fff;
  --chip-bg:linear-gradient(160deg,#fff,#f1e6ff);--chip-bd:0 solid transparent;--chip-ink:var(--ink);
}
.dsx[data-ds="clay"] .ds-btn{transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
.dsx[data-ds="clay"] .ds-chip{box-shadow:0 4px 8px -2px hsl(var(--h) 60% 45% / .35),inset 0 -2px 4px hsl(var(--h) 70% 82% / .5)}
.dsx[data-ds="clay"] .ds-btn--primary::before{content:"";position:absolute;left:12%;right:12%;top:4px;height:34%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.3),rgba(255,255,255,0));pointer-events:none;z-index:-1}

/* ================= neo-brutalist: loud, flat, confident ================= */
.dsx[data-ds="brutal"]{
  --h:48;--font:"Space Grotesk",var(--body);
  --bg:#fff1c1;--surf:#ffffff;--surf-bd:3px solid #111;--surf-sh:calc(3px + 5px*var(--k)) calc(3px + 5px*var(--k)) 0 #111;
  --ink:#111;--dim:#3a3a3a;--acc:hsl(var(--h) 100% 66%);--acc-ink:#111;
  --r:calc(6px*var(--rm));--r-lg:calc(10px*var(--rm));
  --btn-bg:var(--acc);--btn-ink:#111;--btn-bd:3px solid #111;--btn-font:800 14px/1 var(--font);--btn-tt:uppercase;--btn-ls:.05em;
  --btn-sh:calc(2px + 3px*var(--k)) calc(2px + 3px*var(--k)) 0 #111;--btn-sh-h:calc(4px + 4px*var(--k)) calc(4px + 4px*var(--k)) 0 #111;--btn-sh-a:0 0 0 #111;
  --btn-tf-h:translate(-2px,-2px);--btn-tf-a:translate(5px,5px);
  --btn2-bg:#fff;--btn2-ink:#111;--btn2-bd:3px solid #111;--btn2-sh:var(--btn-sh);--btn2-sh-h:var(--btn-sh-h);--btn2-bg-h:#fff;
  --ghost-ink:#111;--ghost-bd:3px solid transparent;
  --fld-bg:#fff;--fld-bd:3px solid #111;--fld-sh:calc(2px + 3px*var(--k)) calc(2px + 3px*var(--k)) 0 #111;--fld-f:calc(2px + 3px*var(--k)) calc(2px + 3px*var(--k)) 0 var(--acc);
  --tr-bg:#fff;--tr-bd:3px solid #111;--tr-sh:none;--tr-on:var(--acc);--kn-bg:#111;--kn-sh:none;
  --seg-bg:#fff;--seg-bd:3px solid #111;--seg-sh:none;--seg-on-bg:var(--acc);--seg-on-ink:#111;--seg-on-sh:none;
  --card-bg:#fff;--card-bd:3px solid #111;--card-sh:calc(2px + 3px*var(--k)) calc(2px + 3px*var(--k)) 0 #111;
  --chip-bg:hsl(calc(var(--h) + 150) 100% 76%);--chip-bd:2px solid #111;--chip-ink:#111;--chk-ink:#111;
  --pic:repeating-linear-gradient(45deg,hsl(calc(var(--h) + 150) 100% 76%) 0 14px,#fff 14px 28px);
}
.dsx[data-ds="brutal"] .ds-btn{transition-duration:.1s}
.dsx[data-ds="brutal"] .dsx__h{justify-self:start;padding:4px 9px;background:#111;color:#fff}
.dsx[data-ds="brutal"] .ds-tgl__ui::after{border-radius:0}
.dsx[data-ds="brutal"] .ds-tgl input:checked+.ds-tgl__ui::after{background:#111}
.dsx[data-ds="brutal"] .ds-card__pic{border:3px solid #111}
.dsx[data-ds="brutal"] .ds-prog{border-radius:0}.dsx[data-ds="brutal"] .ds-prog i{border-radius:0;border-right:3px solid #111}

/* ================= aurora: glowing gradient mesh ================= */
.dsx[data-ds="aurora"]{
  --h:280;--acc:var(--fl1);--acc-ink:#08081a;
  --bg:#06061a;--surf:rgba(255,255,255,.05);--surf-bd:1px solid rgba(255,255,255,.12);--surf-sh:inset 0 1px 0 rgba(255,255,255,.08);--surf-bf:blur(calc(6px + 14px*var(--k)));
  --r:calc(14px*var(--rm));--r-lg:calc(24px*var(--rm));
  --btn-bg:linear-gradient(110deg,var(--fl1),var(--fl2),var(--fl3),var(--fl1));
  --btn-ink:#08081a;--btn-bd:0 solid transparent;--btn-font:700 15px/1 var(--font);
  --btn-sh:0 10px calc(20px + 30px*var(--k)) -10px hsl(var(--h) 95% 60% / .8);--btn-sh-h:0 14px calc(26px + 34px*var(--k)) -8px hsl(calc(var(--h) + 60) 95% 62% / .9);
  --btn-tf-h:translateY(-2px);--btn-tf-a:scale(.97);
  --btn2-bg:rgba(255,255,255,.07);--btn2-bd:1px solid rgba(255,255,255,.2);--btn2-bg-h:rgba(255,255,255,.14);
  --fld-bg:rgba(255,255,255,.05);--fld-bd:1px solid rgba(255,255,255,.2);
  --tr-bg:rgba(255,255,255,.14);--tr-on:linear-gradient(110deg,hsl(var(--h) 95% 64%),hsl(calc(var(--h) + 70) 95% 62%));
  --seg-on-bg:rgba(255,255,255,.18);--card-bg:rgba(255,255,255,.05);--card-bd:1px solid rgba(255,255,255,.12);
  --chip-bg:rgba(255,255,255,.1);--chk-ink:#08081a;
}
.dsx[data-ds="aurora"] .ds-btn--primary,.dsx[data-ds="aurora"] .ds-btn--icon.ds-btn--primary{background-size:300% 100%;background-position:0 0}
.dsx[data-ds="aurora"] .ds-btn--primary:hover:not(:disabled){background-position:100% 0;transition:background-position .9s var(--ease),transform .25s var(--ease),box-shadow .25s}
.dsx[data-ds="aurora"] .ds-prog i{background:linear-gradient(90deg,hsl(var(--h) 95% 64%),hsl(calc(var(--h) + 90) 95% 64%))}
.dsx[data-ds="aurora"] .dsx__bg i{opacity:.42;animation:dsDrift 16s ease-in-out infinite alternate}
.dsx[data-ds="aurora"] .dsx__bg i:nth-child(2){animation-duration:21s;animation-delay:-6s}
.dsx[data-ds="aurora"] .dsx__bg i:nth-child(3){animation-duration:26s;animation-delay:-11s}
@keyframes dsDrift{from{transform:translate(-6%,-4%) scale(1)}to{transform:translate(8%,10%) scale(1.25)}}

/* ================= neon: dark and electric ================= */
.dsx[data-ds="neon"]{
  --h:175;
  --bg:#05050b;--ink:#e6f6ff;--dim:hsl(var(--h) 40% 74%);--acc:hsl(var(--h) 100% 62%);--acc-ink:#05050b;
  --surf:rgba(255,255,255,.015);--surf-bd:1px solid hsl(var(--h) 100% 62% / .5);
  --surf-sh:0 0 calc(10px + 24px*var(--k)) hsl(var(--h) 100% 55% / .24),inset 0 0 calc(8px + 20px*var(--k)) hsl(var(--h) 100% 55% / .08);
  --r:calc(8px*var(--rm));--r-lg:calc(14px*var(--rm));
  --btn-bg:transparent;--btn-ink:hsl(var(--h) 100% 80%);--btn-bd:1.5px solid hsl(var(--h) 100% 62%);--btn-font:600 13px/1 var(--mono);--btn-tt:uppercase;--btn-ls:.1em;--btn-ts:0 0 8px hsl(var(--h) 100% 60% / .9);
  --btn-sh:0 0 calc(8px + 14px*var(--k)) hsl(var(--h) 100% 58% / .7),inset 0 0 calc(6px + 10px*var(--k)) hsl(var(--h) 100% 58% / .4);
  --btn-sh-h:0 0 calc(18px + 24px*var(--k)) hsl(var(--h) 100% 60%),inset 0 0 calc(10px + 16px*var(--k)) hsl(var(--h) 100% 60% / .6);
  --btn-tf-h:translateY(-1px);--btn-tf-a:scale(.97);
  --btn2-bg:transparent;--btn2-ink:hsl(calc(var(--h) + 150) 100% 80%);--btn2-bd:1.5px solid hsl(calc(var(--h) + 150) 100% 64%);
  --btn2-sh:0 0 12px hsl(calc(var(--h) + 150) 100% 58% / .55),inset 0 0 10px hsl(calc(var(--h) + 150) 100% 58% / .3);--btn2-sh-h:0 0 28px hsl(calc(var(--h) + 150) 100% 62%),inset 0 0 14px hsl(calc(var(--h) + 150) 100% 62% / .5);--btn2-bg-h:transparent;
  --ghost-ink:hsl(var(--h) 100% 80%);
  --fld-bg:rgba(255,255,255,.02);--fld-bd:1px solid hsl(var(--h) 100% 62% / .6);--fld-sh:inset 0 0 12px hsl(var(--h) 100% 55% / .15);--fld-f:0 0 0 1px hsl(var(--h) 100% 62%),0 0 18px hsl(var(--h) 100% 60% / .6);
  --tr-bg:rgba(255,255,255,.03);--tr-bd:1px solid hsl(var(--h) 100% 62% / .6);--tr-sh:inset 0 0 8px hsl(var(--h) 100% 55% / .2);--tr-on:hsl(var(--h) 100% 55% / .35);--kn-bg:hsl(var(--h) 100% 70%);--kn-sh:0 0 10px hsl(var(--h) 100% 62%);
  --seg-bg:transparent;--seg-bd:1px solid hsl(var(--h) 100% 62% / .5);--seg-on-bg:hsl(var(--h) 100% 55% / .22);--seg-on-ink:hsl(var(--h) 100% 82%);--seg-on-sh:0 0 12px hsl(var(--h) 100% 58% / .55);
  --card-bg:rgba(255,255,255,.02);--card-bd:1px solid hsl(var(--h) 100% 62% / .45);--card-sh:0 0 16px hsl(var(--h) 100% 55% / .2),inset 0 0 14px hsl(var(--h) 100% 55% / .08);
  --chip-bg:transparent;--chip-bd:1px solid hsl(calc(var(--h) + 150) 100% 64% / .8);--chip-ink:hsl(calc(var(--h) + 150) 100% 82%);--chk-ink:#05050b;
  --pic:linear-gradient(135deg,hsl(var(--h) 100% 50%),hsl(calc(var(--h) + 150) 100% 50%));
}
.dsx[data-ds="neon"] .dsx__h,.dsx[data-ds="neon"] .ds-chip{text-shadow:0 0 6px currentColor}
.dsx[data-ds="neon"] .ds-btn--primary:hover:not(:disabled){animation:dsFlicker .5s linear}
@keyframes dsFlicker{0%,100%{opacity:1}20%{opacity:.78}35%{opacity:1}55%{opacity:.86}}
.dsx[data-ds="neon"] .ds-tgl input:checked+.ds-tgl__ui{box-shadow:var(--tr-sh),0 0 14px hsl(var(--h) 100% 58% / .7)}
.dsx[data-ds="neon"] .ds-prog i{box-shadow:0 0 12px hsl(var(--h) 100% 60%)}

/* ================= skeuomorphic: real materials ================= */
.dsx[data-ds="skeuo"]{
  --h:215;
  --bg:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.03) 1px 3px),linear-gradient(180deg,#d9dce1,#b4bac3);
  --surf:linear-gradient(180deg,#f5f6f8,#d3d7dd);--surf-bd:1px solid #8c93a0;
  --surf-sh:inset 0 1px 0 #fff,0 calc(4px + 8px*var(--k)) calc(10px + 14px*var(--k)) -4px rgba(0,0,0,.4);
  --ink:#262b34;--dim:#414959;--r:calc(10px*var(--rm));--r-lg:calc(16px*var(--rm));
  --btn-bg:linear-gradient(180deg,var(--f1),var(--f1d));--btn-ink:#fff;--badge-bg:var(--f1);--badge-ink:#fff;--btn-ts:0 -1px 0 rgba(0,0,0,.45);--btn-bd:1px solid hsl(var(--h) 75% 26%);--btn-font:700 15px/1 var(--font);
  --btn-sh:inset 0 1px 0 rgba(255,255,255,.6),0 3px 0 hsl(var(--h) 75% 26%),0 8px 12px rgba(0,0,0,.35);
  --btn-sh-h:inset 0 1px 0 rgba(255,255,255,.7),0 3px 0 hsl(var(--h) 75% 26%),0 11px 16px rgba(0,0,0,.4);
  --btn-sh-a:inset 0 2px 6px rgba(0,0,0,.45),0 0 0 hsl(var(--h) 75% 26%);--btn-tf-a:translateY(3px);
  --btn2-bg:linear-gradient(180deg,#fdfdfe,#c8cdd5);--btn2-ink:#262b34;--btn2-bd:1px solid #858c99;
  --btn2-sh:inset 0 1px 0 #fff,0 3px 0 #98a0ac,0 8px 10px rgba(0,0,0,.22);--btn2-sh-h:inset 0 1px 0 #fff,0 3px 0 #98a0ac,0 11px 14px rgba(0,0,0,.28);--btn2-bg-h:linear-gradient(180deg,#fff,#d2d7de);
  --ghost-ink:#262b34;
  --fld-bg:linear-gradient(180deg,#c6cad2,#e8ebef);--fld-bd:1px solid #858c99;--fld-sh:inset 0 3px 6px rgba(0,0,0,.3);--fld-f:inset 0 3px 6px rgba(0,0,0,.3),0 0 0 3px hsl(var(--h) 80% 60% / .55);
  --tr-bg:linear-gradient(180deg,#9aa1ad,#cfd4db);--tr-bd:1px solid #7a8190;--tr-sh:inset 0 3px 6px rgba(0,0,0,.4);--tr-on:linear-gradient(180deg,hsl(150 70% 38%),hsl(150 70% 52%));
  --kn-bg:linear-gradient(180deg,#ffffff,#b9bfc9);--kn-sh:0 2px 3px rgba(0,0,0,.45),inset 0 1px 0 #fff;
  --seg-bg:linear-gradient(180deg,#b7bcc6,#d9dde3);--seg-bd:1px solid #7a8190;--seg-sh:inset 0 3px 6px rgba(0,0,0,.3);
  --seg-on-bg:linear-gradient(180deg,#fdfdfe,#c4c9d1);--seg-on-ink:#262b34;--seg-on-sh:inset 0 1px 0 #fff,0 2px 4px rgba(0,0,0,.35);
  --card-bg:linear-gradient(180deg,#fafbfc,#d6dae0);--card-bd:1px solid #8c93a0;--card-sh:inset 0 1px 0 #fff,0 6px 10px -4px rgba(0,0,0,.35);
  --chip-bg:linear-gradient(180deg,#fdfdfe,#cdd2d9);--chip-bd:1px solid #858c99;--chip-ink:#262b34;--chk-ink:#fff;
}
.dsx[data-ds="skeuo"] .ds-tgl input:checked+.ds-tgl__ui{box-shadow:var(--tr-sh),0 0 10px rgba(52,211,153,.55)}
.dsx[data-ds="skeuo"] .ds-btn--primary::before{content:"";position:absolute;left:0;right:0;top:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0));pointer-events:none;z-index:-1}

/* ================= minimal: quiet, sharp, typographic ================= */
.dsx[data-ds="minimal"]{
  --h:20;
  --bg:#f7f6f3;--surf:#ffffff;--surf-bd:1px solid #111;--surf-sh:none;
  --ink:#111;--dim:#555;--acc:hsl(var(--h) 85% 40%);--acc-ink:#fff;
  --r:calc(2px*var(--rm));--r-lg:calc(2px*var(--rm));
  --btn-bg:#111;--btn-ink:#fff;--btn-bd:1px solid #111;--btn-font:500 12px/1 var(--font);--btn-ls:.14em;--btn-tt:uppercase;
  --btn-tf-a:translateY(1px);
  --btn2-bg:transparent;--btn2-ink:#111;--btn2-bd:1px solid #111;--btn2-bg-h:#111;
  --ghost-ink:#111;--ghost-bd:1px solid transparent;
  --fld-bg:transparent;--fld-bd:1px solid #111;--fld-sh:none;--fld-f:0 0 0 2px var(--acc);
  --tr-bg:#fff;--tr-bd:1px solid #111;--tr-sh:none;--tr-on:#111;--kn-bg:#111;--kn-sh:none;
  --seg-bg:transparent;--seg-bd:1px solid #111;--seg-on-bg:#111;--seg-on-ink:#fff;
  --card-bg:transparent;--card-bd:1px solid #111;--card-sh:none;
  --chip-bg:transparent;--chip-bd:1px solid #111;--chip-ink:#111;--chk-ink:#fff;
  --pic:linear-gradient(135deg,#e9e5dc,#cfc8b8);
}
.dsx[data-ds="minimal"] .ds-btn--primary:hover:not(:disabled){background:#fff;color:#111}
.dsx[data-ds="minimal"] .ds-btn--secondary:hover:not(:disabled){color:#fff}
.dsx[data-ds="minimal"] .ds-tgl input:checked+.ds-tgl__ui::after{background:#fff}
.dsx[data-ds="minimal"] .ds-tgl__ui{border-radius:min(15px,calc(15px*var(--rm)*4))}
.dsx[data-ds="minimal"] .ds-prog{height:4px;border:0;background:#ddd}
.dsx[data-ds="minimal"] .dsx__h{letter-spacing:.2em}

/* ================= retro desktop: bevels and title bars ================= */
.dsx[data-ds="retro"]{
  --h:240;--font:var(--mono);
  --bg:#008080;--surf:#c0c0c0;--surf-bd:0 solid transparent;
  --surf-sh:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;
  --ink:#000;--dim:#262626;--acc:hsl(var(--h) 100% 25%);--acc-ink:#fff;
  --r:0px;--r-lg:0px;
  --btn-bg:#c0c0c0;--btn-ink:#000;--btn-bd:0 solid transparent;--btn-font:400 13px/1 var(--font);
  --btn-sh:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;--btn-sh-h:var(--btn-sh);
  --btn-sh-a:inset 1px 1px #0a0a0a,inset -1px -1px #fff,inset 2px 2px #808080,inset -2px -2px #dfdfdf;--btn-tf-a:translate(1px,1px);
  --btn2-bg:#c0c0c0;--btn2-ink:#000;--btn2-bd:0 solid transparent;--btn2-sh:var(--btn-sh);--btn2-sh-h:var(--btn-sh);--btn2-bg-h:#c0c0c0;
  --ghost-ink:#000;
  --fld-bg:#fff;--fld-bd:0 solid transparent;--fld-sh:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;--fld-f:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a,0 0 0 2px var(--acc);
  --tr-bg:#fff;--tr-bd:0 solid transparent;--tr-sh:inset -1px -1px #fff,inset 1px 1px #808080,inset -2px -2px #dfdfdf,inset 2px 2px #0a0a0a;--tr-on:#000080;
  --kn-bg:#c0c0c0;--kn-sh:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080;
  --seg-bg:#c0c0c0;--seg-bd:0 solid transparent;--seg-sh:inset 1px 1px #808080,inset -1px -1px #fff;--seg-on-bg:#fff;--seg-on-ink:#000;--seg-on-sh:inset -1px -1px #fff,inset 1px 1px #808080;
  --card-bg:#c0c0c0;--card-bd:0 solid transparent;--card-sh:inset -1px -1px #0a0a0a,inset 1px 1px #fff,inset -2px -2px #808080,inset 2px 2px #dfdfdf;
  --chip-bg:#c0c0c0;--chip-bd:0 solid transparent;--chip-ink:#000;--chk-ink:#000;
  --pic:linear-gradient(135deg,#000080,#1084d0);
}
.dsx[data-ds="retro"] .dsx__h{margin:calc(var(--pp)*-1) calc(var(--pp)*-1) 2px;padding:4px 8px;background:linear-gradient(90deg,#000080,var(--f1));color:#fff;font:700 12px/1.3 var(--font);letter-spacing:0;text-transform:none}
.dsx[data-ds="retro"] .ds-chip{box-shadow:inset -1px -1px #0a0a0a,inset 1px 1px #fff}
.dsx[data-ds="retro"] .ds-tgl__ui{border-radius:0}.dsx[data-ds="retro"] .ds-tgl__ui::after{border-radius:0;width:20px;height:20px;margin-top:-10px}
.dsx[data-ds="retro"] .ds-prog{border-radius:0}.dsx[data-ds="retro"] .ds-prog i{border-radius:0;background:repeating-linear-gradient(90deg,#000080 0 10px,transparent 10px 12px)}
.dsx[data-ds="retro"] .ds-chk input:checked+.ds-chk__ui{background:#fff}
.dsx[data-ds="retro"] .ds-btn:focus-visible{outline:1px dotted #000;outline-offset:-5px}

/* ================= equal-lightness fills =================
 * The hue slider turns HSL hue into a colour, but at the same HSL lightness yellow is far brighter than blue, so white text on a
 * yellow button would fail. Where relative colours are supported (all current browsers), every fill that carries text is rebuilt
 * from the same hue at a fixed OKLCH lightness: deep fills (white text) are capped at .48, light fills (dark text) floored at .66.
 * Chroma is capped so colours stay inside sRGB. Older browsers keep the HSL fallbacks defined at the top of the file. */
@supports (color:oklch(from red l c h)){
  .dsx{
    --acc:oklch(from hsl(var(--h) 90% 62%) clamp(.55,l,.7) min(c,.2) h);
    --f1:oklch(from hsl(var(--h) 90% 50%) min(l,.48) min(c,.17) h);
    --f1d:oklch(from hsl(var(--h) 90% 50%) min(l,.4) min(c,.15) h);
    --f2:oklch(from hsl(calc(var(--h) + 50) 90% 50%) min(l,.46) min(c,.17) h);
    --f2d:oklch(from hsl(calc(var(--h) + 50) 90% 50%) min(l,.4) min(c,.15) h);
    --fl1:oklch(from hsl(var(--h) 95% 64%) max(l,.66) min(c,.2) h);
    --fl2:oklch(from hsl(calc(var(--h) + 60) 95% 64%) max(l,.66) min(c,.2) h);
    --fl3:oklch(from hsl(calc(var(--h) + 130) 95% 62%) max(l,.66) min(c,.2) h);
    --txt:oklch(from hsl(var(--h) 55% 40%) min(l,.42) min(c,.12) h);
  }
  .dsx[data-ds="brutal"]{--acc:oklch(from hsl(var(--h) 100% 66%) max(l,.84) min(c,.2) h);--chip-bg:oklch(from hsl(calc(var(--h) + 150) 100% 76%) max(l,.84) min(c,.16) h)}
  .dsx[data-ds="neon"]{
    --acc:oklch(from hsl(var(--h) 100% 62%) max(l,.8) min(c,.2) h);
    --pic:linear-gradient(135deg,oklch(from hsl(var(--h) 100% 50%) max(l,.72) min(c,.22) h),oklch(from hsl(calc(var(--h) + 150) 100% 50%) max(l,.72) min(c,.22) h));
  }
  .dsx[data-ds="minimal"]{--acc:oklch(from hsl(var(--h) 85% 40%) min(l,.48) min(c,.17) h)}
  .dsx[data-ds="retro"]{--acc:oklch(from hsl(var(--h) 100% 25%) min(l,.42) min(c,.17) h)}
}

/* ================= the stage (layout) and the components ================= */
.dsx--stage{position:relative;isolation:isolate;overflow:hidden;padding:clamp(14px,3vw,32px);border-radius:32px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);font-family:var(--font);transition:background .5s}
.dsx__bg{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.dsx__bg i{position:absolute;display:block;border-radius:50%;filter:blur(56px);opacity:0;transition:opacity .6s}
.dsx__bg i:nth-child(1){left:3%;top:4%;width:260px;height:260px;background:hsl(var(--h) 95% 58%);background:oklch(from hsl(var(--h) 95% 58%) min(l,.62) min(c,.2) h)}
.dsx__bg i:nth-child(2){right:4%;top:26%;width:300px;height:300px;background:hsl(calc(var(--h) + 70) 95% 60%);background:oklch(from hsl(calc(var(--h) + 70) 95% 60%) min(l,.62) min(c,.2) h)}
.dsx__bg i:nth-child(3){left:38%;bottom:2%;width:240px;height:240px;background:hsl(calc(var(--h) - 70) 95% 58%);background:oklch(from hsl(calc(var(--h) - 70) 95% 58%) min(l,.62) min(c,.2) h)}
.dsx[data-ds="glass"] .dsx__bg i{opacity:.8}
.dsx[data-ds="crystal"] .dsx__bg i{opacity:.7}
.dsx[data-ds="glass"] .dsx__bg i:nth-child(3){bottom:-17%;left:30%}
/* on a phone the stage is one narrow column, so the glows shrink with it instead of washing behind every label */
@media (max-width:759px){
  .dsx__bg i:nth-child(n){width:58%;height:auto;aspect-ratio:1}
  .dsx[data-ds="glass"] .dsx__bg i,.dsx[data-ds="crystal"] .dsx__bg i{opacity:.55}
}
.dsx__grid{display:grid;gap:clamp(12px,2vw,20px);grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.dsx__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.dsx__grid{grid-template-columns:repeat(3,minmax(0,1fr))}.dsx__grid>.dsx__p:last-child{grid-column:span 2}}
.dsx__p{display:grid;gap:18px;align-content:start;min-width:0;padding:var(--pp);border-radius:var(--r-lg);background:var(--surf);border:var(--surf-bd);box-shadow:var(--surf-sh);-webkit-backdrop-filter:var(--surf-bf);backdrop-filter:var(--surf-bf);color:var(--ink)}
.dsx__h{margin:0;font:600 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dsx__row{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.dsx__col{display:grid;gap:16px}

.ds-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:11px 20px;border:var(--btn-bd);border-radius:var(--r);background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-sh);font:var(--btn-font);letter-spacing:var(--btn-ls);text-transform:var(--btn-tt);text-shadow:var(--btn-ts);cursor:pointer;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .3s,color .3s,filter .3s}
.ds-btn .i{width:18px;height:18px;stroke-width:2}
.ds-btn:hover:not(:disabled){transform:var(--btn-tf-h);box-shadow:var(--btn-sh-h)}
.ds-btn:active:not(:disabled){transform:var(--btn-tf-a);box-shadow:var(--btn-sh-a)}
.ds-btn--secondary{background:var(--btn2-bg);color:var(--btn2-ink);border:var(--btn2-bd);box-shadow:var(--btn2-sh);text-shadow:none}
.ds-btn--secondary:hover:not(:disabled){background:var(--btn2-bg-h);box-shadow:var(--btn2-sh-h)}
.ds-btn--ghost{background:transparent;color:var(--ghost-ink);border:var(--ghost-bd);box-shadow:none;text-shadow:none}
.ds-btn--ghost:hover:not(:disabled){background:var(--btn2-bg);box-shadow:none;transform:none}
.ds-btn--icon{width:46px;padding:0}
.ds-btn:disabled{opacity:.42;cursor:not-allowed;filter:saturate(.4)}
.ds-btn:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.dsx[data-ds="crystal"] .ds-btn--primary::before{content:"";position:absolute;left:8%;right:8%;top:2px;height:46%;border-radius:99px;background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,0));pointer-events:none;z-index:-1}

.ds-tgl{position:relative;display:flex;align-items:center;gap:12px;font:500 15px var(--font);cursor:pointer}
.ds-tgl input{position:absolute;left:0;top:50%;width:52px;height:30px;margin:0;opacity:0;transform:translateY(-50%);cursor:pointer}
.ds-tgl__ui{position:relative;flex:none;width:52px;height:30px;border-radius:min(15px,calc(15px*var(--rm)*1.5));background:var(--tr-bg);border:var(--tr-bd);box-shadow:var(--tr-sh);transition:background .3s,box-shadow .3s}
.ds-tgl__ui::after{content:"";position:absolute;left:3px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:inherit;background:var(--kn-bg);box-shadow:var(--kn-sh);transition:transform .35s var(--ease),background .3s}
.ds-tgl input:checked+.ds-tgl__ui{background:var(--tr-on)}
.ds-tgl input:checked+.ds-tgl__ui::after{transform:translateX(22px)}
.ds-tgl input:focus-visible+.ds-tgl__ui{outline:2px solid var(--acc);outline-offset:3px}

.ds-seg{display:inline-flex;justify-self:start;padding:4px;gap:4px;border-radius:calc(var(--r) + 4px);background:var(--seg-bg);border:var(--seg-bd);box-shadow:var(--seg-sh)}
.ds-seg label{position:relative;cursor:pointer}
.ds-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ds-seg span{display:block;padding:9px 16px;border-radius:var(--r);font:600 14px var(--font);color:var(--dim);transition:background .25s,color .25s,box-shadow .25s}
.ds-seg input:checked+span{background:var(--seg-on-bg);color:var(--seg-on-ink);box-shadow:var(--seg-on-sh)}
.ds-seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}

.ds-chk{position:relative;display:inline-flex;align-items:center;gap:10px;font:500 15px var(--font);cursor:pointer}
.ds-chk input{position:absolute;left:0;top:50%;width:22px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}
.ds-chk__ui{position:relative;flex:none;width:22px;height:22px;border-radius:calc(var(--r)*.45);background:var(--fld-bg);border:var(--fld-bd);box-shadow:var(--fld-sh);transition:background .25s,box-shadow .25s}
.ds-chk--r .ds-chk__ui{border-radius:50%}
.ds-chk__ui::after{content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;border:solid var(--chk-ink);border-width:0 2.5px 2.5px 0;transform:rotate(45deg) scale(0);transition:transform .25s var(--ease)}
.ds-chk--r .ds-chk__ui::after{left:50%;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border:0;border-radius:50%;background:var(--chk-ink);transform:scale(0)}
.ds-chk input:checked+.ds-chk__ui{background:var(--tr-on)}
.ds-chk input:checked+.ds-chk__ui::after{transform:rotate(45deg) scale(1)}
.ds-chk--r input:checked+.ds-chk__ui::after{transform:scale(1)}
.ds-chk input:focus-visible+.ds-chk__ui{outline:2px solid var(--acc);outline-offset:3px}

.ds-fld{display:grid;gap:8px;font:600 13px var(--font);color:var(--dim)}
.ds-in{width:100%;min-height:46px;padding:12px 14px;border-radius:var(--r);background:var(--fld-bg);border:var(--fld-bd);box-shadow:var(--fld-sh);color:var(--ink);font:400 16px var(--font);transition:box-shadow .25s,border-color .25s}
.ds-in::placeholder{color:color-mix(in srgb,var(--ink) 48%,transparent)}
.ds-in:focus{outline:0;box-shadow:var(--fld-f)}
.ds-rng{-webkit-appearance:none;appearance:none;width:100%;height:28px;margin:0;background:transparent;cursor:pointer}
.ds-rng::-webkit-slider-runnable-track{height:8px;border-radius:99px;background:var(--tr-bg);border:var(--tr-bd);box-shadow:var(--tr-sh)}
.ds-rng::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;margin-top:-9px;border-radius:50%;border:0;background:var(--kn-bg);box-shadow:var(--kn-sh)}
.ds-rng::-moz-range-track{height:8px;border-radius:99px;background:var(--tr-bg);border:var(--tr-bd);box-shadow:var(--tr-sh)}
.ds-rng::-moz-range-thumb{width:24px;height:24px;border-radius:50%;border:0;background:var(--kn-bg);box-shadow:var(--kn-sh)}
.ds-rng:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:99px}
.dsx[data-ds="retro"] .ds-rng::-webkit-slider-thumb{border-radius:0;width:16px;height:26px;margin-top:-9px}
.dsx[data-ds="retro"] .ds-rng::-moz-range-thumb{border-radius:0;width:16px;height:26px}
.dsx[data-ds="brutal"] .ds-rng::-webkit-slider-thumb{border-radius:0;border:3px solid #111;background:var(--acc)}
.dsx[data-ds="brutal"] .ds-rng::-moz-range-thumb{border-radius:0;border:3px solid #111;background:var(--acc)}
.ds-prog{height:12px;border-radius:99px;background:var(--tr-bg);border:var(--tr-bd);box-shadow:var(--tr-sh);overflow:hidden}
.ds-prog i{display:block;width:70%;height:100%;border-radius:inherit;background:var(--tr-on)}

.ds-card{display:grid;gap:14px;padding:12px;border-radius:var(--r-lg);background:var(--card-bg);border:var(--card-bd);box-shadow:var(--card-sh)}
.ds-card__pic{position:relative;aspect-ratio:16/10;border-radius:calc(var(--r-lg) - 6px);background:var(--pic);overflow:hidden}
.ds-card__pic .ds-chip{position:absolute;left:10px;top:10px}
.ds-card__b{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:0 4px}
.ds-card__b b{display:block;font:700 17px/1.25 var(--font)}
.ds-card__b small{display:block;margin-top:3px;color:var(--dim);font-size:13px;line-height:1.4}
.ds-card__price{font:700 17px var(--font)}
.ds-card .ds-btn{width:100%}
.ds-chip{display:inline-flex;align-items:center;padding:5px 12px;border-radius:99px;background:var(--chip-bg);border:var(--chip-bd);color:var(--chip-ink);font:600 12px var(--font);letter-spacing:.02em;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ds-badge{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 8px;border-radius:99px;background:var(--badge-bg,var(--acc));color:var(--badge-ink,var(--acc-ink));font:700 13px var(--font)}
.ds-av{position:relative;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--pic);color:#fff;font:700 16px var(--font)}
.ds-av i{position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#34d399;border:2px solid #fff}
.ds-toast{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:var(--r-lg);background:var(--card-bg);border:var(--card-bd);box-shadow:var(--card-sh)}
.ds-toast__dot{flex:none;width:10px;height:10px;border-radius:50%;background:#34d399;box-shadow:0 0 0 4px rgba(52,211,153,.25)}
.ds-toast b{display:block;font:700 15px/1.25 var(--font)}
.ds-toast small{color:var(--dim);font-size:13px}
.ds-toast .ds-btn{margin-left:auto;min-height:38px;padding:7px 14px}
.dsx[data-ds="retro"] .ds-av{border-radius:0}


/* tabs, status toasts, pagination and a few per-style fixes */
.ds-tabs{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid color-mix(in srgb,var(--ink) 20%,transparent)}
.ds-tabs label{position:relative;cursor:pointer}
.ds-tabs input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.ds-tabs span{display:block;margin-bottom:-1px;padding:10px 16px;border-bottom:2px solid transparent;font:600 14px var(--font);color:var(--dim);transition:color .25s,border-color .25s,background .25s}
.ds-tabs input:checked+span{color:var(--ink);border-bottom-color:var(--acc)}
.ds-tabs input:focus-visible+span{outline:2px solid var(--acc);outline-offset:-2px}
.ds-toast--warn .ds-toast__dot{background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.28)}
.ds-toast--err .ds-toast__dot{background:#ef4444;box-shadow:0 0 0 4px rgba(239,68,68,.28)}
.dsx__pg{gap:8px;margin-left:auto}
.dsx__pg .ds-btn--icon{min-height:42px;width:42px;font-size:14px}
.dsx[data-ds="crystal"] .dsx__bg i:nth-child(2){background:hsl(calc(var(--h) + 60) 90% 54%);background:oklch(from hsl(calc(var(--h) + 60) 90% 54%) min(l,.6) min(c,.2) h)}
.dsx[data-ds="crystal"] .dsx__bg i:nth-child(3){background:hsl(calc(var(--h) - 25) 90% 46%);background:oklch(from hsl(calc(var(--h) - 25) 90% 46%) min(l,.56) min(c,.2) h);bottom:-17%;left:30%}
.dsx[data-ds="brutal"] .ds-av{background:var(--acc);color:#111;border:3px solid #111}
.dsx[data-ds="brutal"] .ds-tabs{border-bottom:3px solid #111}
.dsx[data-ds="brutal"] .ds-tabs span{margin-bottom:0;border-bottom:0;color:#111}
.dsx[data-ds="brutal"] .ds-tabs input:checked+span{background:var(--acc)}
.dsx[data-ds="neon"] .ds-card__pic .ds-chip{background:rgba(5,5,11,.78)}
.dsx[data-ds="neon"] .ds-av{color:#000}
.dsx[data-ds="glass"] .ds-card__pic .ds-chip,.dsx[data-ds="crystal"] .ds-card__pic .ds-chip,.dsx[data-ds="aurora"] .ds-card__pic .ds-chip{background:rgba(8,8,26,.5)}
.dsx[data-ds="neon"] .ds-tabs input:checked+span{text-shadow:0 0 8px currentColor}
.dsx[data-ds="minimal"] .ds-av{background:#111;color:#fff}
.dsx[data-ds="retro"] .ds-tabs{border-bottom:2px solid #fff;gap:2px}
.dsx[data-ds="retro"] .ds-tabs span{margin-bottom:-2px;background:#c0c0c0;box-shadow:inset 1px 1px #fff,inset -1px 0 #0a0a0a,inset -2px 0 #808080;border-bottom:0}
.dsx[data-ds="retro"] .ds-tabs input:checked+span{background:#c0c0c0;color:#000;font-weight:700;padding-block:12px 10px}
.dsx[data-ds="neu"] .ds-tabs{border-bottom:0;box-shadow:0 2px 3px -2px var(--sd)}

/* ================= the selector cards (mini previews) ================= */
.dsb__out{min-height:1.5em;margin:14px 0 0;color:var(--dim);font-size:.95rem}
.dss{display:grid;gap:12px;grid-template-columns:repeat(2,minmax(0,1fr));margin:18px 0 22px}
@media (min-width:700px){.dss{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1000px){.dss{grid-template-columns:repeat(5,minmax(0,1fr))}}
.dss__c{position:relative;display:grid;gap:6px;align-content:start;padding:10px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.03);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:transform .35s var(--ease),border-color .25s,background .25s}
.dss__c:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.34)}
.dss__c[aria-checked="true"]{border:1px solid transparent;background:linear-gradient(#14142b,#14142b) padding-box,var(--grad) border-box}
.dss__c b{padding:4px 4px 0;font:700 15px/1.2 var(--display)}
.dss__c small{padding:0 4px 4px;color:var(--faint);font-size:12.5px;line-height:1.35}
.dss__tip{position:absolute;right:14px;top:14px;display:none;padding:3px 8px;border-radius:99px;background:var(--grad);color:#0b0b16;font:700 10px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;font-style:normal}
.dss__c.is-suggested{border-color:rgba(249,115,22,.65)}
.dss__c.is-suggested .dss__tip{display:block}
.dsm{position:relative;isolation:isolate;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:88px;padding:12px;border-radius:14px;overflow:hidden;background:var(--bg)}
.dsm__btn{display:inline-grid;place-items:center;min-width:54px;padding:8px 14px;border:var(--btn-bd);border-radius:min(var(--r),14px);background:var(--btn-bg);color:var(--btn-ink);box-shadow:var(--btn-sh);font:var(--btn-font);font-size:12px;letter-spacing:var(--btn-ls);text-transform:var(--btn-tt);text-shadow:var(--btn-ts)}
.dsm__tgl{position:relative;flex:none;width:36px;height:20px;border-radius:10px;background:var(--tr-on);border:var(--tr-bd);box-shadow:var(--tr-sh)}
.dsm__tgl::after{content:"";position:absolute;right:2px;top:50%;width:14px;height:14px;margin-top:-7px;border-radius:inherit;background:var(--kn-bg);box-shadow:var(--kn-sh)}
.dsm__ln{position:absolute;left:12px;right:12px;bottom:10px;height:6px;border-radius:3px;background:var(--surf);border:var(--surf-bd);box-shadow:var(--surf-sh);opacity:.9}
.dsm[data-ds="glass"]::before,.dsm[data-ds="crystal"]::before{content:"";position:absolute;left:6%;top:-40%;width:60%;height:130%;border-radius:50%;background:hsl(var(--h) 95% 58%);filter:blur(22px);opacity:.85;z-index:-1}
.dsm[data-ds="aurora"]::before{content:"";position:absolute;right:-10%;top:-30%;width:70%;height:130%;border-radius:50%;background:hsl(var(--h) 95% 55%);filter:blur(26px);opacity:.55;z-index:-1}
.dsm[data-ds="retro"] .dsm__tgl{border-radius:0}.dsm[data-ds="retro"] .dsm__tgl::after{border-radius:0}.dsm[data-ds="brutal"] .dsm__tgl::after{border-radius:0}

/* ================= controls bar and info row ================= */
.dsc{display:grid;gap:14px 24px;align-items:center;margin-bottom:16px;padding:16px 20px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
@media (min-width:1000px){.dsc{grid-template-columns:minmax(200px,1.1fr) repeat(3,minmax(0,1fr)) auto}}
.dsc__t h3{margin:0;font:700 1.3rem/1.2 var(--display);letter-spacing:-.02em}
.dsc__t p{margin:2px 0 0;color:var(--dim);font-size:.9rem}
.dsc__s{display:grid;gap:4px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.dsc__s input{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer}
.dsc__s input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.dsc__s input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:3px solid var(--orange);background:#fff}
.dsc__s input::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.dsc__s input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:3px solid var(--orange);background:#fff}
.dsc__s input:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:99px}
.dsc__s .dsc__hue::-webkit-slider-runnable-track{background:linear-gradient(90deg,hsl(0 90% 60%),hsl(60 90% 55%),hsl(120 80% 50%),hsl(180 90% 50%),hsl(240 90% 66%),hsl(300 90% 62%),hsl(360 90% 60%))}
.dsc__s .dsc__hue::-moz-range-track{background:linear-gradient(90deg,hsl(0 90% 60%),hsl(60 90% 55%),hsl(120 80% 50%),hsl(180 90% 50%),hsl(240 90% 66%),hsl(300 90% 62%),hsl(360 90% 60%))}
.dsi{display:grid;gap:16px 28px;margin-top:20px;padding:20px 22px;border-radius:24px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
@media (min-width:1000px){.dsi{grid-template-columns:repeat(3,minmax(0,1fr)) auto;align-items:start}}
.dsi h4{margin:0 0 6px;font:600 11px/1.3 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.dsi p{margin:0;font-size:.95rem;line-height:1.55;color:var(--text)}

/* /design-styles/: the button lab (twelve small interactions in the G&B look). */
.bl{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.bl__c{display:grid;gap:6px;justify-items:center;padding:22px 18px 20px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));text-align:center}
.bl__v{position:relative;display:grid;place-items:center;width:100%;min-height:104px}
.bl__c h3{margin:0;font:700 1rem/1.3 var(--display);letter-spacing:-.01em}
.bl__c p{margin:0;color:var(--dim);font-size:.9rem}

.lb{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 26px;border:0;border-radius:16px;background:var(--grad);color:#0b0b16;font:600 15px/1.1 var(--display);letter-spacing:-.005em;white-space:nowrap;cursor:pointer;overflow:hidden;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:0 14px 40px -16px rgba(249,115,22,.7);transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .3s,color .3s}
.lb .i{width:18px;height:18px}
.lb:focus-visible{outline:2px solid #fff;outline-offset:4px}
.lb:active{transform:scale(.97)}
.lb span{position:relative;z-index:1}

/* magnetic */
.lb--mag{transition:transform .25s var(--ease),box-shadow .35s}
.lb--mag:hover{box-shadow:0 22px 50px -16px rgba(238,79,147,.75)}

/* ripple */
.lb .rip{position:absolute;z-index:0;border-radius:50%;background:rgba(255,255,255,.65);transform:scale(0);opacity:1;pointer-events:none;animation:lbRip .7s ease-out forwards}
@keyframes lbRip{to{transform:scale(1);opacity:0}}

/* shine */
.lb--shine::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.7) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.lb--shine:hover::after{transform:translateX(120%)}

/* liquid fill */
.lb--liquid{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--orange)}
.lb--liquid::before{content:"";position:absolute;left:-15%;right:-15%;top:104%;z-index:0;height:170%;border-radius:42%;background:var(--grad);transition:top .7s var(--ease),border-radius .7s var(--ease)}
.lb--liquid:hover::before,.lb--liquid:focus-visible::before{top:-34%;border-radius:38%}
.lb--liquid span{transition:color .35s .1s}
.lb--liquid:hover span,.lb--liquid:focus-visible span{color:#0b0b16}

/* border beam */
@property --a{syntax:"<angle>";inherits:false;initial-value:0deg}
.lb--beam{border:1.5px solid transparent;border-radius:16px;background:linear-gradient(#12122a,#12122a) padding-box,conic-gradient(from var(--a),rgba(255,255,255,.12) 0 62%,var(--orange) 78%,var(--pink) 88%,var(--violet) 94%,rgba(255,255,255,.12)) border-box;color:var(--text);box-shadow:0 14px 40px -20px rgba(238,79,147,.6);animation:lbBeam 3.2s linear infinite}
@keyframes lbBeam{to{--a:360deg}}

/* loading to done, and copy */
.lb--load{min-width:200px}
.lb__t{display:inline-flex;align-items:center;gap:8px;transition:transform .4s var(--ease),opacity .3s}
.lb--load .lb__t--busy,.lb--load .lb__t--done,.lb--copy .lb__t--done{position:absolute;inset:0;justify-content:center;opacity:0;transform:translateY(100%)}
.lb--load[data-state="busy"] .lb__t--idle,.lb--load[data-state="done"] .lb__t--idle,.lb--copy[data-state="done"] .lb__t--idle{opacity:0;transform:translateY(-100%)}
.lb--load[data-state="busy"] .lb__t--busy,.lb--load[data-state="done"] .lb__t--done,.lb--copy[data-state="done"] .lb__t--done{opacity:1;transform:none}
.lb--load[data-state="done"],.lb--copy[data-state="done"]{background:#34d399;box-shadow:0 14px 40px -16px rgba(52,211,153,.7)}
.lb__spin{width:16px;height:16px;border-radius:50%;border:2.5px solid rgba(11,11,22,.25);border-top-color:#0b0b16;animation:lbSpin .8s linear infinite}
@keyframes lbSpin{to{transform:rotate(360deg)}}
.lb--copy{min-width:170px;background:#1b1b38;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.lb--copy .lb__t--idle .i{opacity:.85}
.lb--copy[data-state="done"]{color:#06251a;box-shadow:none}

/* hold to confirm */
.lb--hold{min-width:200px;background:#1b1b38;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2);touch-action:none}
.lb--hold::before{content:"";position:absolute;inset:0;z-index:0;background:var(--grad);transform:scaleX(0);transform-origin:left}
.lb--hold.is-holding::before{transform:scaleX(1);transition:transform 1s linear}
.lb--hold.is-done::before{transform:scaleX(1)}
.lb--hold.is-holding span,.lb--hold.is-done span{color:#0b0b16;transition:color .2s .4s}

/* text roll */
.lb--roll{background:var(--text);color:#0b0b16;box-shadow:0 14px 40px -18px rgba(255,255,255,.4)}
.lb__r{display:inline-block;position:relative;height:1.15em;overflow:hidden;line-height:1.15}
.lb__r b{display:block;font-weight:600;transition:transform .5s var(--ease)}
.lb__r::after{content:attr(data-text);content:attr(data-text) / "";position:absolute;left:0;top:100%;transition:transform .5s var(--ease);background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.lb--roll:hover .lb__r b,.lb--roll:focus-visible .lb__r b{transform:translateY(-100%)}
.lb--roll:hover .lb__r::after,.lb--roll:focus-visible .lb__r::after{transform:translateY(-100%)}

/* tilt and glare */
.lb--tilt{background:linear-gradient(135deg,#1b1b3e,#241a46);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),0 20px 40px -20px #000;transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .2s ease-out,box-shadow .3s}
.lb--tilt:active{transform:perspective(500px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) scale(.97)}
.lb__glare{position:absolute;inset:0;z-index:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),rgba(255,255,255,.55),transparent 55%);mix-blend-mode:soft-light;opacity:0;transition:opacity .3s;pointer-events:none}
.lb--tilt:hover .lb__glare{opacity:1}

/* burst */
.lb--burst{background:#1b1b38;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2)}
.lb--burst .i{transition:transform .4s var(--ease),fill .3s,color .3s}
.lb--burst[aria-pressed="true"]{color:var(--pink)}
.lb--burst[aria-pressed="true"] .i{fill:currentColor;transform:scale(1.15)}
.lb--burst span{display:inline-flex;align-items:center;gap:8px}
.spk{position:absolute;z-index:3;width:8px;height:8px;border-radius:50%;pointer-events:none}
.spk--a{background:var(--orange)}.spk--b{background:var(--pink)}.spk--c{background:var(--violet)}

/* add to order */
.lb-cart{position:relative;display:inline-grid;width:190px;height:52px}
.lb-cart>*{grid-area:1/1}
.lb--cartadd{width:100%;height:100%;transition:opacity .3s,transform .4s var(--ease)}
.lb-cart__step{display:flex;align-items:center;justify-content:space-between;padding:0 8px;border-radius:16px;background:#1b1b38;box-shadow:inset 0 0 0 1px var(--line-2);opacity:0;transform:scale(.9);pointer-events:none;transition:opacity .3s,transform .4s var(--ease)}
.lb-cart__step button{display:grid;place-items:center;width:38px;height:38px;border:0;border-radius:12px;background:var(--grad);color:#0b0b16;cursor:pointer;transition:transform .3s var(--ease)}
.lb-cart__step button:hover{transform:scale(1.08)}
.lb-cart__step button:active{transform:scale(.94)}
.lb-cart__step button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.lb-cart__step .i{width:16px;height:16px;stroke-width:2.4}
.lb-cart__step output{min-width:2ch;font:700 18px var(--display);text-align:center}
.lb-cart:not([data-qty="0"]) .lb--cartadd{opacity:0;transform:scale(.9);pointer-events:none}
.lb-cart:not([data-qty="0"]) .lb-cart__step{opacity:1;transform:none;pointer-events:auto}

@media (prefers-reduced-motion:reduce){.lb--beam{animation:none}.lb__spin{animation-duration:2s;animation-iteration-count:infinite}}

/* /motion/: kinetic hero, marquee, studio, particles, scroll story, easing playground, patterns, reels. */
.page-motion main{overflow-x:clip}

/* ================= kinetic headline ================= */
.kt{display:block}
.kw{position:relative;display:inline-block;white-space:nowrap}
.kl{display:inline-block;transform-origin:50% 100%;animation:klIn 1s var(--ease) both;animation-delay:calc(var(--i)*36ms + 120ms)}
@keyframes klIn{from{opacity:0;transform:translateY(.85em) rotate(9deg) scale(.88)}to{opacity:1;transform:none}}
.kw.is-grad .kl{padding-bottom:.06em;background:var(--grad);background-repeat:no-repeat;background-size:var(--gw,100%) 100%;background-position:calc(var(--gx,0px) * -1) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}

/* ================= marquee bands ================= */
.mq{display:grid;gap:10px;margin:clamp(14px,3vw,36px) 0 0;padding-block:8px;transform:rotate(-2deg) scale(1.04);transform-origin:center}
.mq__row{display:flex;width:max-content;white-space:nowrap;will-change:transform}
.mq__in{display:flex;flex:none;align-items:center;gap:clamp(18px,3vw,32px);padding-right:clamp(18px,3vw,32px)}
.mq__row span{font:700 clamp(2.2rem,6.4vw,4.8rem)/1 var(--display);letter-spacing:-.03em;text-transform:uppercase}
.mq__row span:nth-of-type(even){color:transparent;-webkit-text-stroke:1.5px var(--text)}
.mq__row i{display:grid;place-items:center;flex:none;width:clamp(26px,4vw,46px);color:var(--orange)}
.mq__row i .i{width:100%;height:auto;aspect-ratio:1;fill:currentColor;stroke:none}

/* ================= kinetic studio ================= */
.ks{display:grid;gap:18px}
@media (min-width:1000px){.ks{grid-template-columns:minmax(0,1.25fr) minmax(0,.95fr);align-items:stretch}}
.ks__stage{position:relative;display:grid;place-items:center;min-height:320px;padding:32px 22px;overflow:hidden;border-radius:32px;border:1px solid var(--line-2);background:radial-gradient(60% 70% at 50% 40%,rgba(139,92,246,.24),transparent 70%),radial-gradient(40% 50% at 8% 100%,rgba(249,115,22,.2),transparent 70%),#0d0d1f}
.ks__out{position:relative;display:block;width:max-content;max-width:100%;font:700 var(--fs,96px)/1.1 var(--display);letter-spacing:-.03em;text-align:center;white-space:nowrap;perspective:600px}
.kc{display:inline-block;transform-origin:50% 80%}
.ks__stage[data-look="white"] .kc,.ks__stage[data-look="white"] .ks__out{color:#fff}
.ks__stage[data-look="outline"] .kc{color:transparent;-webkit-text-stroke:2px #fff}
.ks__stage[data-look="gradient"] .kc{padding-bottom:.06em;background:var(--grad);background-repeat:no-repeat;background-size:var(--gw,100%) 100%;background-position:calc(var(--gx,0px) * -1) 0;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.ks__sp{display:inline-block;width:.3em}
.ks__caret{display:inline-block;width:.07em;height:.85em;margin-left:.05em;background:var(--orange);vertical-align:-.06em;animation:ksCaret 1s steps(1) infinite}
@keyframes ksCaret{50%{opacity:0}}
.ks__note{position:absolute;left:16px;right:16px;bottom:12px;margin:0;text-align:center;color:var(--faint);font-size:12.5px}
.ks__note[hidden]{display:none}
.ks__ctl{display:grid;gap:20px;align-content:start;padding:clamp(18px,3vw,26px);border-radius:28px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.ks__row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ks__rg{display:grid;flex:1 1 150px;gap:4px;font:600 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.ks__rg input{-webkit-appearance:none;appearance:none;width:100%;height:26px;margin:0;background:transparent;cursor:pointer}
.ks__rg input::-webkit-slider-runnable-track{height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.ks__rg input::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-7px;border-radius:50%;border:3px solid var(--orange);background:#fff}
.ks__rg input::-moz-range-track{height:6px;border-radius:3px;background:rgba(255,255,255,.2)}
.ks__rg input::-moz-range-thumb{width:14px;height:14px;border-radius:50%;border:3px solid var(--orange);background:#fff}
.ks__rg input:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:99px}
.ks__rg input:disabled{opacity:.45;cursor:not-allowed}
.ks__sw{position:relative;display:inline-flex;align-items:center;gap:10px;font-size:14.5px;color:var(--text);cursor:pointer}
.ks__sw input{position:absolute;left:0;top:50%;width:44px;height:26px;margin:-13px 0 0;opacity:0;cursor:pointer}
.ks__tg{position:relative;flex:none;width:44px;height:26px;border-radius:99px;background:rgba(255,255,255,.2);transition:background .3s}
.ks__tg::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .35s var(--ease)}
.ks__sw input:checked+.ks__tg{background:var(--green)}
.ks__sw input:checked+.ks__tg::after{transform:translateX(18px)}
.ks__sw input:focus-visible+.ks__tg{outline:2px solid var(--orange);outline-offset:3px}
.ks .field input[type="text"],.pt .field input[type="text"]{width:100%}

/* ================= particle logo ================= */
.pt{display:grid;gap:18px}
@media (min-width:1000px){.pt{grid-template-columns:minmax(0,1.5fr) minmax(0,.7fr);align-items:stretch}}
.pt__box{position:relative;height:clamp(300px,42vw,460px);overflow:hidden;border-radius:32px;border:1px solid var(--line-2);background:radial-gradient(55% 60% at 50% 50%,rgba(238,79,147,.16),transparent 70%),#0a0a18}
.pt__cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:pan-y;cursor:crosshair}
.pt__ctl{display:grid;gap:18px;align-content:start;padding:clamp(18px,3vw,26px);border-radius:28px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.pt__hint{margin:0;color:var(--dim);font-size:.92rem}

/* ================= scroll story ================= */
.ss{--p:1;--a:clamp(0,calc(var(--p)*4),1);--b:clamp(0,calc((var(--p) - .25)*4),1);--d:clamp(0,calc((var(--p) - .75)*4),1);
  --c1:clamp(0,calc((var(--p) - .5)*9),1);--c2:clamp(0,calc((var(--p) - .56)*9),1);--c3:clamp(0,calc((var(--p) - .62)*9),1);--c4:clamp(0,calc((var(--p) - .68)*9),1);--c5:clamp(0,calc((var(--p) - .74)*9),1);position:relative}
.ss.is-live{height:380vh}
.ss__stick{display:grid;align-items:center;padding-block:clamp(24px,5vw,56px)}
.ss.is-live .ss__stick{position:sticky;top:var(--hdr);height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr));padding-block:0;overflow:hidden}
.ss__in{display:grid;gap:clamp(18px,4vw,56px);align-items:center;justify-items:center}
@media (min-width:900px){.ss__in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ss__caps{display:grid;gap:18px;width:100%;max-width:520px}
.ss__c{display:grid;gap:6px}
.ss__c span{font:700 .95rem var(--mono);letter-spacing:.2em;color:var(--orange)}
.ss__c h3{margin:0;font:700 clamp(1.8rem,3.6vw,2.8rem)/1.05 var(--display);letter-spacing:-.03em}
.ss__c p{margin:0;color:var(--dim);font-size:clamp(1rem,1.4vw,1.15rem)}
.ss.is-live .ss__caps{position:relative;display:grid}
.ss.is-live .ss__c{--o:min(clamp(0,calc((var(--p) - var(--s))*14 + .5),1),clamp(0,calc((var(--e) - var(--p))*14 + .5),1));grid-area:1/1;opacity:var(--o);transform:translateY(calc((1 - var(--o))*16px));pointer-events:none}
.ss__c--1{--s:-.2;--e:.25}.ss__c--2{--s:.25;--e:.5}.ss__c--3{--s:.5;--e:.75}.ss__c--4{--s:.75;--e:1.3}
.ss__scene{display:grid;place-items:center;width:100%}
.ss__phone{position:relative;width:min(300px,64vw,calc((100svh - var(--hdr) - 150px)*.5));aspect-ratio:280/560;transform:perspective(1100px) rotateY(calc(var(--d)*-16deg)) rotateX(calc(var(--d)*5deg)) scale(calc(.96 + var(--d)*.06));filter:drop-shadow(0 calc(10px + var(--d)*34px) calc(18px + var(--d)*36px) rgba(0,0,0,.55))}
.ss__svg{display:block;width:100%;height:100%;overflow:visible}
.w{fill:none;stroke:rgba(255,255,255,.6);stroke-width:1.6}
.w--line{stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--a))}
.w--fill{fill:#15152e;fill-opacity:var(--b)}
.w--g1{fill:url(#ss-g);fill-opacity:var(--b)}
.w--g2{fill:url(#ss-img);fill-opacity:var(--b)}
.w--sun{fill:#fff;fill-opacity:calc(var(--b)*.9)}
.w--hill{fill:#5b21b6;fill-opacity:calc(var(--b)*.85)}
.ss__notch{fill:#000;opacity:var(--b)}
.w--bar1{opacity:calc(1 - var(--c1))}.w--bar2{opacity:calc(1 - var(--c2))}.w--bar3{opacity:calc(1 - var(--c3))}.w--bar4{opacity:calc(1 - var(--c4))}
.ss__ink{opacity:var(--c1);transform:translateY(calc((1 - var(--c1))*16px))}
.ss__ink--2{opacity:var(--c2);transform:translateY(calc((1 - var(--c2))*16px))}
.ss__ink--3{opacity:var(--c3);transform:translateY(calc((1 - var(--c3))*16px))}
.ss__ink--4{opacity:var(--c4);transform:translateY(calc((1 - var(--c4))*16px))}
.ss__ink--5{opacity:var(--c5);transform:translateY(calc((1 - var(--c5))*10px))}
.ss__t1{font:700 17px var(--display);fill:#fff}
.ss__t2{font:500 11px var(--body);fill:rgba(255,255,255,.75)}
.ss__t3{font:600 12px var(--display);fill:#fff}
.ss__t4{font:500 10px var(--body);fill:rgba(255,255,255,.62)}
.ss__p{fill:#fbbf24}
.ss__t5{font:700 14px var(--display);fill:#0b0b16}
.ss__glare{position:absolute;inset:2%;border-radius:15%;background:linear-gradient(115deg,transparent calc(var(--d)*130% - 30%),rgba(255,255,255,.32) calc(var(--d)*130% - 14%),transparent calc(var(--d)*130% + 6%));opacity:var(--d);mix-blend-mode:soft-light;pointer-events:none}
.ss__live{position:absolute;right:-6%;top:9%;padding:6px 12px;border-radius:99px;background:var(--green);color:#06251a;font:700 11px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:var(--d);transform:scale(calc(.5 + var(--d)*.5)) rotate(calc(var(--d)*7deg))}
.ss__prog{display:none}
.ss.is-live .ss__prog{position:absolute;left:var(--gut);right:var(--gut);bottom:18px;display:block;height:3px;border-radius:2px;background:rgba(255,255,255,.12)}
.ss__prog i{display:block;height:100%;width:calc(var(--p)*100%);border-radius:inherit;background:var(--grad)}

/* ================= easing playground ================= */
.ez{display:grid;gap:20px;align-items:start}
@media (min-width:1000px){.ez{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.ez__plot,.ez__side{padding:clamp(18px,3vw,26px);border-radius:28px;border:1px solid var(--line-2);background:rgba(255,255,255,.03)}
.ez__svg{display:block;width:100%;max-width:420px;height:auto;margin-inline:auto;touch-action:none;user-select:none}
.ez__gl{stroke:rgba(255,255,255,.06);fill:none}
.ez__ax{stroke:rgba(255,255,255,.32);fill:none}
.ez__hl{stroke:rgba(255,255,255,.4);stroke-dasharray:3 4;fill:none}
.ez__curve{fill:none;stroke:var(--orange);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.ez__end{fill:#fff}
.ez__h{fill:#0f0f1f;stroke-width:3.5;cursor:grab;touch-action:none}
.ez__h--1{stroke:var(--orange)}
.ez__h--2{stroke:var(--violet)}
.ez__h:active{cursor:grabbing}
.ez__hint{margin:12px 0 0;text-align:center;color:var(--faint);font-size:12.5px}
.ez__nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:14px}
.ez__nums label{display:grid;gap:4px;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.ez__nums input{width:100%;padding:9px 8px;border-radius:10px;border:1px solid var(--line-2);background:rgba(255,255,255,.045);color:var(--text);font:500 14px var(--mono)}
.ez__nums input:focus{outline:0;border-color:var(--orange);box-shadow:0 0 0 3px rgba(249,115,22,.2)}
.ez__side{display:grid;gap:18px}
.ez__tracks{display:grid;gap:12px}
.ez__tr{position:relative;height:38px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.05)}
.ez__ball{position:absolute;left:4px;top:4px;width:30px;height:30px;border-radius:50%;background:var(--grad)}
.ez__bar{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,rgba(249,115,22,.75),rgba(139,92,246,.75))}
.ez__tr--card{height:auto;padding:8px 10px;border-radius:18px;overflow:visible}
.ez__card{display:block;height:40px;border-radius:14px;background:var(--grad);opacity:0}
.ez__spring{display:grid;gap:12px}
.ez__spring[hidden]{display:none}
.ez__code{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line)}
.ez__code code{font:500 13px/1.5 var(--mono);color:#ffd2ac;overflow-wrap:anywhere}

/* ================= patterns ================= */
.pw{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.pw__c{display:grid;gap:6px;justify-items:center;padding:22px 18px 20px;border-radius:24px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));text-align:center}
.pw__v{display:grid;gap:14px;place-items:center;align-content:center;width:100%;min-height:210px}
.pw__c h3{margin:0;font:700 1rem/1.3 var(--display)}
.pw__c p{margin:0;color:var(--dim);font-size:.9rem}
/* skeleton */
.sk{display:grid;gap:10px;width:min(240px,100%);padding:12px;border-radius:18px;border:1px solid var(--line);background:rgba(255,255,255,.04)}
.sk__pic{height:92px;border-radius:12px}
.sk__ln{height:12px;border-radius:6px}
.sk__ln--b{width:62%}
.sk__pic,.sk__ln{background:linear-gradient(100deg,rgba(255,255,255,.06) 30%,rgba(255,255,255,.2) 50%,rgba(255,255,255,.06) 70%) 200% 0/200% 100%;animation:skSh 1.3s linear infinite}
@keyframes skSh{to{background-position:-200% 0}}
.sk__real{display:none;gap:2px}
.sk__real b{font:700 15px var(--display)}
.sk__real span{color:var(--dim);font-size:13px}
.sk[data-state="ready"] .sk__pic{animation:none;background:var(--grad)}
.sk[data-state="ready"] .sk__ln{display:none}
.sk[data-state="ready"] .sk__real{display:grid;animation:viewIn .6s var(--ease)}
/* scramble */
.scr{padding:14px 22px;border-radius:16px;border:1px solid var(--line-2);background:rgba(255,255,255,.04);color:var(--text);font:700 26px/1.2 var(--mono);letter-spacing:.03em;cursor:pointer;transition:border-color .25s,background .25s}
.scr:hover,.scr:focus-visible{border-color:var(--orange);background:rgba(249,115,22,.08)}
/* count up */
.cu{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;width:100%;text-align:center}
.cu b{display:block;font:700 clamp(1.7rem,3vw,2.2rem)/1.1 var(--display);letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.cu small{color:var(--dim);font-size:.8rem}
/* spotlight */
.sp{--mx:50%;--my:50%;position:relative;display:grid;gap:4px;place-content:center;width:min(260px,100%);height:150px;padding:18px;overflow:hidden;border-radius:20px;border:1px solid var(--line-2);background:radial-gradient(200px circle at var(--mx) var(--my),rgba(238,79,147,.38),transparent 62%),#14142b;text-align:center}
.sp::before{content:"";position:absolute;inset:0;padding:1px;border-radius:inherit;background:radial-gradient(150px circle at var(--mx) var(--my),rgba(255,255,255,.75),transparent 62%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.sp b{font:700 1.1rem var(--display)}
.sp span{color:var(--dim);font-size:.9rem}
.sp:focus-visible{outline:2px solid var(--orange);outline-offset:4px}
/* flip */
.fl{width:min(240px,100%);height:150px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;perspective:700px}
.fl__in{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .8s var(--ease)}
.fl[aria-pressed="true"] .fl__in{transform:rotateY(180deg)}
.fl__f,.fl__b{position:absolute;inset:0;display:grid;gap:4px;place-content:center;border-radius:20px;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.fl__f{background:var(--grad);color:#0b0b16}
.fl__b{border:1px solid var(--line-2);background:#14142b;color:var(--text);transform:rotateY(180deg)}
.fl b{font:700 1.2rem var(--display)}
.fl small{font-size:.85rem;opacity:.8}
.fl__f small{opacity:1}
.fl:focus-visible{outline:2px solid var(--orange);outline-offset:4px;border-radius:22px}
/* stagger */
.sg{display:grid;gap:8px;width:min(240px,100%);margin:0;padding:0;list-style:none;text-align:left}
.sg li{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);font-size:14px}
.sg li i{flex:none;width:8px;height:8px;border-radius:50%;background:var(--grad)}
.sg.is-anim li{opacity:0;transform:translateX(-20px)}
.sg.is-anim.is-in li{animation:sgIn .6s var(--ease) both;animation-delay:calc(var(--i)*120ms)}
@keyframes sgIn{to{opacity:1;transform:none}}
/* reels */
@media (min-width:900px){.reels--three{grid-template-columns:repeat(3,minmax(0,250px));justify-content:center}.reels--three .reel:nth-child(even){margin-top:44px}}
@media (prefers-reduced-motion:reduce){.ks__caret{animation:none}.sk__pic,.sk__ln{animation:none}}