/* ===== DMC SOUNDS — store-only components =================================
   Extends the site's css/style.css. Uses the same tokens (--black, --paper,
   --ink, --muted-dark, --muted-light, --line-dark, --line-light, --font,
   --pad, --maxw, --ease) and the same visual language (glass rims, .pill,
   .section.dark/.paper, .reveal). Nothing here redefines a site component;
   it only adds store-specific pieces (product price rows, bundle block,
   trust bar, faq, install steps, press). Load AFTER style.css.
   ========================================================================= */

/* ---------- store hero (a compact dark hero, not the full-screen home hero) ---------- */
.store-hero{background:var(--black);color:#fff;text-align:center;
  padding:clamp(130px,20vh,220px) var(--pad) clamp(56px,10vh,104px)}
.store-hero .kicker{font-weight:400;text-transform:uppercase;letter-spacing:.42em;
  font-size:12px;color:var(--muted-dark);opacity:.8;padding-left:.42em}
.store-hero h1{font-size:clamp(44px,8.5vw,120px);letter-spacing:-.045em;line-height:.95;
  margin:26px auto 0;max-width:14ch;text-wrap:balance}
.store-hero .lede{color:var(--muted-dark);font-size:clamp(16px,1.9vw,20px);
  max-width:60ch;margin:26px auto 0;line-height:1.6}
.store-hero .ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:44px}
.store-hero .micro{margin-top:24px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-dark);opacity:.7}

/* solid pill variant lives in style.css (.pill.solid); add a paper-side outline default via .pill already there */

/* ---------- trust strip ---------- */
.trust{background:var(--black);color:#fff;border-top:1px solid var(--line-dark);padding:20px var(--pad)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 38px;justify-content:center;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.trust b{color:#fff;font-weight:600}

/* ---------- product grid: even grid of glass-rim cover cards.
     Container carries .glass-grid so style.css's `.glass-grid .card .thumb`
     glass rim + hover sweep apply; layout is an even 3-up grid (not the
     home page's masonry columns) so price rows line up. ---------- */
.prod-grid{margin:clamp(40px,7vh,90px) auto 0;max-width:var(--maxw);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,3vw,48px)}
@media(max-width:980px){.prod-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.prod-grid{grid-template-columns:1fr}}
.prod-grid .card{margin:0;display:flex;flex-direction:column}
.prod-grid .card .thumb{aspect-ratio:1}
.prod-grid .card .thumb img{width:100%;height:100%;object-fit:cover}
.card .pmeta-row{margin-top:10px;display:flex;align-items:baseline;gap:12px}
.card .pprice{font-weight:600;font-size:clamp(15px,1.4vw,18px);letter-spacing:.01em;color:inherit}
.card .pprice.free{color:var(--muted-light)}
.dark .card .pprice.free{color:var(--muted-dark)}
.card .pshop{margin-left:auto;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;opacity:.6;transition:opacity .25s}
.card:hover .pshop{opacity:1}
.card .pdesc{margin-top:9px;font-weight:400;text-transform:none;letter-spacing:0;line-height:1.55;
  font-size:clamp(13.5px,1.05vw,15px);color:var(--muted-light)}
.dark .card .pdesc{color:var(--muted-dark)}
.card .ptags{margin-top:12px;display:flex;flex-wrap:wrap;gap:7px}
.ptag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-light);
  border:1px solid var(--line-light);border-radius:100px;padding:4px 11px}
.dark .ptag{color:var(--muted-dark);border-color:var(--line-dark)}

/* ---------- bundle block ---------- */
.bundle{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(30px,5vw,80px);align-items:center}
@media(max-width:820px){.bundle{grid-template-columns:1fr;text-align:center}}
.bundle h2{font-size:clamp(40px,7vw,96px);letter-spacing:-.045em;line-height:.95}
.bundle .kicker{display:block;text-transform:uppercase;letter-spacing:.42em;font-size:12px;
  color:var(--muted-dark);opacity:.85;margin-bottom:20px}
.bundle p{color:var(--muted-dark);font-size:clamp(15px,1.7vw,19px);line-height:1.6;margin:22px 0 0;max-width:46ch}
@media(max-width:820px){.bundle p{margin-inline:auto}}
.bundle .btags{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
@media(max-width:820px){.bundle .btags{justify-content:center}}
.btag{font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-dark);
  border:1px solid var(--line-dark);border-radius:100px;padding:5px 12px}
.bprice-wrap{text-align:center}
.bprice{font-weight:800;font-size:clamp(64px,9vw,110px);letter-spacing:-.05em;line-height:.9}
.bwas{font-weight:400;font-size:20px;color:var(--muted-dark);text-decoration:line-through;
  margin-left:12px;letter-spacing:-.02em}
.bsave{margin-top:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#fff}
.bundle .bprice-wrap .pill{margin-top:28px}

/* ---------- free band (paper) ---------- */
.free-band{max-width:var(--maxw);margin:0 auto;border:2px solid var(--ink);border-radius:16px;
  padding:clamp(30px,4vw,54px);display:flex;align-items:center;justify-content:space-between;
  gap:30px;flex-wrap:wrap}
.free-band h3{font-size:clamp(26px,3.4vw,42px);letter-spacing:-.03em}
.free-band p{color:var(--muted-light);margin:12px 0 0;max-width:48ch;line-height:1.6}
.free-tag{font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-light);display:block;margin-bottom:14px}

/* ---------- faq ---------- */
.faq{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(28px,4vw,64px) clamp(40px,5vw,90px)}
@media(max-width:720px){.faq{grid-template-columns:1fr}}
.faq h4{font-size:19px;letter-spacing:-.02em;margin-bottom:10px}
.faq p{color:var(--muted-light);font-size:15px;line-height:1.65;margin:0}
.dark .faq p{color:var(--muted-dark)}
.faq a{border-bottom:1px solid var(--line-light)}
.dark .faq a{border-color:var(--line-dark)}
.faq a:hover{border-color:currentColor}

/* ---------- product detail page ---------- */
.pd-hero{background:var(--black);color:#fff;padding:clamp(120px,18vh,200px) var(--pad) clamp(40px,7vh,72px)}
.pd-hero .wrap{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:center}
@media(max-width:860px){.pd-hero .wrap{grid-template-columns:1fr;gap:34px}.pd-art{order:-1;max-width:460px;margin:0 auto}
  /* center the product hero once it stacks on mobile, to match the rest of the site */
  .pd-info{text-align:center}
  .pd-info .pd-price,.pd-info .pd-cta,.pd-info .pd-meta{justify-content:center}
  .pd-info .pd-lede{margin-left:auto;margin-right:auto}}
.pd-cat{font-weight:500;text-transform:uppercase;letter-spacing:.2em;font-size:12px;color:var(--muted-dark);opacity:.85;margin-bottom:18px}
.pd-hero h1{font-size:clamp(40px,6.5vw,92px);letter-spacing:-.035em;line-height:.96}
.pd-price{margin:24px 0 0;display:flex;align-items:baseline;gap:14px}
.pd-price .amt{font-weight:800;font-size:clamp(34px,4vw,52px);letter-spacing:-.03em}
.pd-price .was{font-size:18px;color:var(--muted-dark);text-decoration:line-through}
.pd-price .free{font-weight:800;font-size:clamp(30px,3.6vw,46px);letter-spacing:-.02em}
.pd-lede{color:var(--muted-dark);font-size:clamp(16px,1.5vw,20px);line-height:1.6;margin:22px 0 0;max-width:52ch}
.pd-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.pd-meta{margin-top:26px;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted-dark)}
.pd-meta b{color:#fff;font-weight:600}
/* the cover art in a glass rim (reuse the .about .portrait glass by using .card .thumb inside .glass-grid,
   but here a standalone frame is simpler) */
.pd-art{position:relative;border-radius:16px;padding:1px;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.9),rgba(255,255,255,.28) 16%,rgba(255,255,255,.08) 42%,
    rgba(255,255,255,.08) 60%,rgba(255,255,255,.3) 82%,rgba(255,255,255,.8)),linear-gradient(0deg,#171922,#171922);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 0 0 1px rgba(255,255,255,.1),
    0 20px 44px -24px rgba(0,0,0,.7),0 4px 14px -10px rgba(0,0,0,.55)}
.pd-art img{border-radius:15px;display:block;width:100%;height:auto}

/* feature list on a product page */
.pd-features{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(18px,2.4vw,36px)}
@media(max-width:820px){.pd-features{grid-template-columns:1fr}}
.pd-feat{border:1px solid var(--line-dark);border-radius:16px;padding:clamp(24px,3vw,36px);
  background:rgba(255,255,255,.02)}
.paper .pd-feat{border-color:var(--line-light);background:transparent}
.pd-feat h3{font-size:clamp(17px,1.6vw,22px);margin:0 0 10px;font-weight:600;text-transform:none;letter-spacing:0}
.pd-feat p{color:var(--muted-dark);font-size:clamp(14px,1.1vw,16px);line-height:1.6;margin:0}
.paper .pd-feat p{color:var(--muted-light)}
/* preset / spec chips */
.chips{max-width:var(--maxw);margin:clamp(26px,4vh,44px) auto 0;display:flex;flex-wrap:wrap;gap:9px;justify-content:center}
.chip{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-dark);
  border:1px solid var(--line-dark);border-radius:100px;padding:7px 15px}
.paper .chip{color:var(--muted-light);border-color:var(--line-light)}

/* cross-sell strip: small cover row linking other plugins */
.xsell{max-width:var(--maxw);margin:0 auto;display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(14px,1.8vw,26px)}
@media(max-width:820px){.xsell{grid-template-columns:repeat(3,1fr)}}
@media(max-width:520px){.xsell{grid-template-columns:repeat(2,1fr)}}
.xcard{display:block;color:inherit}
.xcard .xthumb{border-radius:12px;overflow:hidden;aspect-ratio:1;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.xcard img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.xcard:hover img{transform:scale(1.05)}
.xcard .xname{margin-top:10px;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-dark)}
.xcard .xprice{margin-top:3px;font-size:12px;font-weight:600;color:#fff}
@media(prefers-reduced-motion:reduce){.xcard img,.xcard:hover img{transition:none;transform:none}}

/* ---------- install / press: numbered steps ---------- */
.steps{max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:clamp(20px,3vh,34px)}
.step{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;
  border-top:1px solid var(--line-dark);padding-top:clamp(20px,3vh,34px)}
.paper .step{border-color:var(--line-light)}
.step-n{font-weight:800;font-size:clamp(22px,3vw,34px);letter-spacing:-.02em;line-height:1;opacity:.85;
  font-variant-numeric:tabular-nums}
.step h3{font-size:clamp(18px,1.8vw,24px);margin:0 0 8px;font-weight:600;text-transform:none;letter-spacing:0}
.step p{color:var(--muted-dark);font-size:clamp(14px,1.15vw,16px);line-height:1.65;margin:0 0 8px}
.paper .step p{color:var(--muted-light)}
.step code{font-family:"SFMono-Regular",ui-monospace,Menlo,Consolas,monospace;font-size:.9em;
  background:rgba(255,255,255,.08);padding:2px 7px;border-radius:5px;letter-spacing:0}
.paper .step code{background:rgba(0,0,0,.06)}
.step ul{margin:8px 0 0;padding-left:20px;color:var(--muted-dark);font-size:clamp(13.5px,1.1vw,15px);line-height:1.6}
.paper .step ul{color:var(--muted-light)}

/* support / brief form on dark (reuse .cform from style.css where possible) */
.note-card{max-width:760px;margin:clamp(30px,5vh,56px) auto 0;border:1px solid var(--line-dark);
  border-radius:16px;padding:clamp(24px,3.4vw,40px);background:rgba(255,255,255,.02)}
.note-card h3{font-size:clamp(19px,2vw,26px);margin:0 0 10px;font-weight:600;text-transform:none;letter-spacing:0}
.note-card p{color:var(--muted-dark);line-height:1.6;margin:0 0 8px;font-size:15px}

/* thanks panel (?sent=1) */
.thanks{max-width:640px;margin:0 auto;text-align:center;border:1px solid var(--line-dark);
  border-radius:16px;padding:clamp(30px,5vw,54px);background:rgba(255,255,255,.03)}
.thanks h2{font-size:clamp(28px,4vw,48px);letter-spacing:-.03em;margin-bottom:14px}
.thanks p{color:var(--muted-dark);line-height:1.6}

/* ---------- notify-me capture (e.g. VoxMIDI): a dark pill field that reads as a
   pair with the adjacent .pill button — same 100px radius + height, site type ---------- */
.notify-form{align-items:center}
.notify-form input[type="email"]{
  -webkit-appearance:none;appearance:none;
  background:rgba(255,255,255,.05);
  border:2px solid var(--line-dark);
  border-radius:100px;
  color:#fff;
  font-family:var(--font);
  font-size:14px;letter-spacing:.01em;
  padding:19px 28px;min-width:250px;
  outline:none;
  transition:border-color .3s var(--ease),background .3s var(--ease),box-shadow .3s var(--ease);
}
.notify-form input[type="email"]::placeholder{color:#8b8b93;text-transform:none;letter-spacing:0}
.notify-form input[type="email"]:focus{
  border-color:#fff;background:rgba(255,255,255,.09);
  box-shadow:0 0 0 4px rgba(255,255,255,.08);
}

/* ============================================================
   Live plugin illumination — the "See the interface" showcase.
   No card/box: on the black section, a soft gradient of the
   plugin's own colors glows from BEHIND the plugin and pulsates,
   like backlight. The plugin image itself stays still and sharp
   (shown at native resolution). Colors set per page via
   --stage-accent / --stage-accent2.
   ============================================================ */
.live-stage{
  --a:var(--stage-accent,#b98bff);
  --a2:var(--stage-accent2,var(--a));
  position:relative; isolation:isolate;   /* no overflow:clip — it hard-cut the glow; sideways page scroll is already held by html{overflow-x:clip} */
  display:flex; justify-content:center;
  padding:clamp(46px,9vw,120px) 0;
}
.live-stage::before{                 /* two-color illuminating halo, larger than the plugin */
  content:""; position:absolute; z-index:-1;
  left:50%; top:50%; transform:translate(-50%,-50%);
  width:min(150%,1560px,90vw); aspect-ratio:1/.82;  /* box big enough to fade out in; 90vw keeps it inside the viewport at every width (even at the 1.08x breathe) */
  background:
    radial-gradient(48% 52% at 45% 42%, color-mix(in srgb,var(--a) 64%,transparent), transparent 60%),
    radial-gradient(50% 54% at 57% 60%, color-mix(in srgb,var(--a2) 60%,transparent), transparent 62%);
  filter:blur(72px);
  animation:stageGlow 6.4s ease-in-out infinite;
}
@keyframes stageGlow{           /* medium: a visible, gentle breathe */
  0%,100%{opacity:.38; transform:translate(-50%,-50%) scale(.95) rotate(0deg)}
  50%    {opacity:.7;  transform:translate(-50%,-50%) scale(1.08) rotate(3deg)}
}
.live-stage .shot{                   /* site glass frame: dark glass body + corner glints */
  position:relative; display:block; width:max-content; max-width:100%; margin:0;
  border-radius:16px; padding:1px; overflow:hidden;
  background:
    linear-gradient(135deg,
      rgba(255,255,255,.9) 0%, rgba(255,255,255,.28) 16%,
      rgba(255,255,255,.08) 42%, rgba(255,255,255,.08) 60%,
      rgba(255,255,255,.3) 82%, rgba(255,255,255,.8) 100%),
    linear-gradient(0deg,#171922,#171922);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.22),
    0 0 0 1px rgba(255,255,255,.1),
    0 24px 50px -24px rgba(0,0,0,.75),
    0 4px 14px -10px rgba(0,0,0,.55);
  transition:box-shadow .5s var(--ease);
}
.live-stage .shot img{
  display:block; width:auto; max-width:100%; height:auto; border-radius:15px;
}
.live-stage .shot::after{            /* rim sheen that sweeps on hover (site behavior) */
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:16px;
  padding:1px;
  background:linear-gradient(120deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 62%);
  background-size:260% 100%; background-position:100% 0;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0; transition:opacity .5s var(--ease),background-position .9s var(--ease);
}
.live-stage .shot:hover::after{opacity:1; background-position:0 0}
.live-stage .shot:hover{box-shadow:
  inset 0 0 0 1px rgba(255,255,255,.4), 0 0 0 1px rgba(255,255,255,.2),
  0 0 22px -2px rgba(220,230,255,.32), 0 24px 50px -22px rgba(0,0,0,.75)}
@media(prefers-reduced-motion:reduce){
  .live-stage::before{animation:none; opacity:.8}
}

/* ---- inline icons replacing ✓ / → glyphs (modern, not emoji) ---- */
.ico{width:1em;height:1em;flex:none;vertical-align:-.14em}
.trust .ico-check{width:15px;height:15px;margin-right:7px;vertical-align:-3px;color:var(--a-check,#8b5cf6)}
.pshop .ico-arr{width:15px;height:15px;margin-left:6px;vertical-align:-2px;transition:transform .3s var(--ease)}
.card:hover .pshop .ico-arr,.xcard:hover .pshop .ico-arr{transform:translateX(3px)}

/* ---- No grey text: force muted text to pure white on dark contexts ----
   (paper sections keep --muted-light so text stays readable on light) */
.pd-cat,.pd-lede,.pd-meta,.pd-meta span,.trust .wrap,.store-hero .lede,
.section.dark .sec-sub,.section.dark .copy,.section.dark .chip,
.section.dark .step p,.section.dark .step ul,.section.dark .pd-feat p,
.section.dark .note-card p,.section.dark .thanks p,.section.dark .faq p,
.section.dark .pdesc,.section.dark .ptag,.section.dark .xname,
.bundle p,.bundle .btag,.bundle .kicker,.bundle .bwas,
.free-band.dark p{color:#fff;opacity:1}

/* ---- HUD mesh demo player ("Hear it") ---- */
.demo-stage{position:relative;max-width:1120px;margin:clamp(30px,6vh,64px) auto 0;text-align:center;
  background:none;border:0;padding:0;overflow:visible;isolation:isolate}
.demo-stage::before{content:"";position:absolute;left:50%;top:54%;transform:translate(-50%,-50%);
  width:82%;height:150%;z-index:-1;
  background:radial-gradient(46% 52% at 34% 50%,color-mix(in srgb,var(--dc1,#b98bff) 34%,transparent),transparent 70%),
             radial-gradient(48% 54% at 66% 50%,color-mix(in srgb,var(--dc2,#6b8cff) 30%,transparent),transparent 72%);
  filter:blur(50px);opacity:.6;pointer-events:none}
.demo-top{display:flex;justify-content:center;align-items:baseline;gap:16px;flex-wrap:wrap}
.demo-title{font-weight:800;font-size:clamp(24px,3.4vw,40px);color:#fff;letter-spacing:.01em}
.demo-tag{font-size:clamp(12px,1.3vw,14px);letter-spacing:.2em;text-transform:uppercase;color:#fff;opacity:.62}
.demo-viz{display:block;width:100%;height:clamp(220px,34vw,360px);margin-top:6px;
  -webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.demo-audio{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);opacity:0;pointer-events:none}
.demo-play{display:inline-flex;align-items:center;gap:9px;margin:4px auto 0}
.demo-play svg{width:15px;height:15px;flex:none}
.demo-play .ico-pause{display:none}
.demo-play.is-playing .ico-play{display:none}
.demo-play.is-playing .ico-pause{display:inline-block}
.demo-cap{color:#fff!important;opacity:1!important;font-size:13px;margin-top:16px}

/* ============================================================
   Shared plugin-UI kit — faithful, animated recreations of the
   real plugin interfaces (VocalClean/Spin/VoxMIDI/SampleChopper).
   Per-instance colors via --v (primary) / --am (secondary).
   ============================================================ */
.pu{--v:#b98bff;--am:#f4ac52;--ink:#ece9f5;--mut:#9a94ac;--line:rgba(255,255,255,.10);--fld:#161220;
  width:min(742px,100%);margin:0 auto;text-align:left;font-family:var(--font,Poppins),sans-serif;color:var(--ink);
  background:radial-gradient(125% 130% at 28% 0%,#181426,#110e1a);
  border:1px solid var(--line);border-radius:15px;
  box-shadow:0 26px 70px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05);
  padding:22px clamp(18px,2.6vw,28px) 26px;overflow:hidden}
.pu-title{margin:0;font-weight:800;font-size:23px;letter-spacing:.02em;color:#fff}
.pu-sub{margin:3px 0 0;font-size:11px;font-weight:600;letter-spacing:.06em;color:var(--am)}
.pu-sub.mut{color:var(--mut);font-weight:500;letter-spacing:.02em}
.pu-knob{display:flex;flex-direction:column;align-items:center;gap:7px}
.pu-knob .dial{--sz:58px;width:var(--sz);height:var(--sz);border-radius:50%;position:relative;
  background:radial-gradient(circle at 50% 38%,#2b2638,#17131f);
  box-shadow:inset 0 3px 6px rgba(0,0,0,.6),0 2px 5px rgba(0,0,0,.5)}
.pu-knob .dial::before{content:"";position:absolute;inset:-7px;border-radius:50%;
  background:conic-gradient(from 218deg,var(--kc,var(--v)) var(--fill,140deg),transparent 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));
          mask:radial-gradient(farthest-side,transparent calc(100% - 6px),#000 calc(100% - 5px));opacity:.92}
.pu-knob .ind{position:absolute;left:50%;top:7px;width:3px;height:calc(var(--sz)*.32);margin-left:-1.5px;
  background:#fff;border-radius:2px;transform-origin:50% calc(var(--sz)*.5 - 7px);
  transform:rotate(var(--a,0deg));animation:puWob var(--t,5s) ease-in-out var(--d,0s) infinite}
@keyframes puWob{0%,100%{transform:rotate(calc(var(--a,0deg) - 3deg))}50%{transform:rotate(calc(var(--a,0deg) + 4deg))}}
.pu-knob .kl{font-size:9.5px;font-weight:600;letter-spacing:.09em;color:var(--mut)}
.pu-knob .kv{font-size:12px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.pu-sel{border:1px solid var(--line);border-radius:8px;padding:8px 12px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;background:var(--fld);font-size:13px;font-weight:600;color:var(--ink)}
.pu-sel svg{width:13px;height:13px;color:var(--mut)}
.pu-lab{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pu-slider{position:relative;height:6px;border-radius:6px;background:rgba(255,255,255,.10)}
.pu-slider>i{position:absolute;left:0;top:0;bottom:0;border-radius:6px;background:var(--sc,var(--v));width:var(--p,40%);
  animation:puFill var(--t,6s) ease-in-out infinite}
.pu-slider>span{position:absolute;top:50%;left:var(--p,40%);width:14px;height:14px;border-radius:50%;background:#fff;
  transform:translate(-50%,-50%);box-shadow:0 1px 4px rgba(0,0,0,.5);animation:puThumb var(--t,6s) ease-in-out infinite}
@keyframes puFill{0%,100%{width:calc(var(--p,40%) - 3%)}50%{width:calc(var(--p,40%) + 3%)}}
@keyframes puThumb{0%,100%{left:calc(var(--p,40%) - 3%)}50%{left:calc(var(--p,40%) + 3%)}}
.pu-btn{border:1px solid var(--line);border-radius:8px;padding:11px 16px;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--ink);background:var(--fld);display:inline-flex;align-items:center;gap:7px}
.pu-btn.on{background:var(--v);border-color:transparent;color:#12101a}
.pu-btn.ghost{background:transparent}
.pu-wave{display:block;width:100%;height:100%}
@media(prefers-reduced-motion:reduce){.pu-knob .ind,.pu-slider>i,.pu-slider>span{animation:none}}

/* ---- Mobile reflow for the rebuilt plugin UIs (avoid clipped content) ---- */
@media(max-width:600px){
  .pu{padding:18px 16px 22px}
  .pu-title{font-size:20px}
  .sc .sc-r1,.sc .sc-r2,.sc .sc-seq{flex-wrap:wrap}
  .sc .sc-zoom,.sc .sc-exp{margin-left:0}
  .sc .sc-sens{order:3}
  .spin .ctrl{flex-wrap:wrap;gap:14px}
  .spin .ctrl>button:last-child{margin-left:0;width:100%;justify-content:center}
  .spin .chords .c,.spin .foot .c{font-size:13px}
}
@media(max-width:480px){
  .vox .vox-selrow{grid-template-columns:1fr}
  .pu .pu-knob .dial{--sz:50px}
}
/* belt-and-suspenders: no page can scroll sideways from decorative overflow */
html{overflow-x:clip}