/* preset examples — the module page's "hear it" panel · all classes px- prefixed
   One example plays at a time: its wet loop and its source's dry loop run locked together, so the dry/wet control
   is a crossfade on one timeline, never a restart. Theme from custom properties; --px-hue is the module's colour. */
.px{
  --px-cream:#F4EFE5; --px-ink:#1A1814; --px-muted:#A39C8F; --px-rule:rgba(244,239,229,.13);
  --px-line:rgba(244,239,229,.42); --px-hover:rgba(244,239,229,.06); --px-hue:#C9A23A; --px-hue-ink:#E2BC55;
  font-family:'Inter Tight','Inter Tight Fallback',ui-sans-serif,system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;
  font-weight:500; color:var(--px-cream); background:var(--px-ink); text-transform:lowercase;
  -webkit-font-smoothing:antialiased; box-sizing:border-box; border-radius:2px; padding:28px 32px 32px;
  display:grid; gap:22px; position:relative;
}
.px *,.px *::before,.px *::after{box-sizing:border-box}
.px [hidden]{display:none!important}
.px-mono{font-family:'JetBrains Mono','JetBrains Mono Fallback',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:0}
.px-live{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.px-top{display:flex;align-items:center;gap:16px;padding-bottom:16px;border-bottom:1px solid var(--px-rule)}
.px-play{flex:none;width:56px;height:56px;border-radius:50%;border:0;background:var(--px-cream);color:var(--px-ink);cursor:pointer;
  display:grid;place-items:center;transition:transform 120ms ease, background 120ms ease}
.px-play:hover{transform:scale(1.05)} .px-play:focus-visible{outline:2px solid var(--px-hue-ink);outline-offset:3px}
.px-play svg{width:20px;height:20px}
.px-play .px-i-pause{display:none} .px.is-playing .px-play .px-i-play{display:none} .px.is-playing .px-play .px-i-pause{display:block}
.px-now{min-width:0;flex:1}
.px-eyebrow{font-size:12px;color:var(--px-muted);margin:0 0 4px}
.px-name{font-weight:600;font-size:24px;letter-spacing:-.015em;margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.px-model{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 7px;border-radius:6px;background:var(--px-hue);color:var(--px-ink);font-size:15px}
.px-time{font-size:12px;color:var(--px-muted);flex:none}

.px-wave{position:relative;height:120px;cursor:pointer;touch-action:none}
.px-wave canvas{position:absolute;inset:0;width:100%;height:100%}

.px-mixrow{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:14px}
.px-end{font-size:12px;color:var(--px-muted);width:28px}
.px-end:last-of-type{text-align:right}
.px-slider{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0}
.px-slider::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--px-line),var(--px-hue))}
.px-slider::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--px-line),var(--px-hue))}
.px-slider::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;background:var(--px-cream);border:3px solid var(--px-ink);box-shadow:0 0 0 2px var(--px-hue)}
.px-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--px-cream);border:3px solid var(--px-ink);box-shadow:0 0 0 2px var(--px-hue)}
.px-slider:focus-visible{outline:2px solid var(--px-hue-ink);outline-offset:4px}
.px-flip{display:inline-flex;border:1px solid var(--px-line);border-radius:999px;padding:3px;gap:2px}
.px-flip button{border:0;background:transparent;color:var(--px-muted);font:inherit;font-size:13px;padding:6px 14px;border-radius:999px;cursor:pointer;text-transform:lowercase}
.px-flip button[aria-pressed=true]{background:var(--px-cream);color:var(--px-ink)}
.px-flip button:focus-visible{outline:2px solid var(--px-hue-ink);outline-offset:2px}

.px-about{display:flex;gap:10px 18px;flex-wrap:wrap;align-items:baseline;font-size:14px;color:var(--px-muted);line-height:1.45;min-height:1.45em}
.px-src{color:var(--px-cream)}
.px-src::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--px-hue);margin-right:8px;vertical-align:1px}

.px-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;list-style:none;margin:0;padding:0}
.px-card{width:100%;text-align:left;font:inherit;color:inherit;background:transparent;border:1px solid var(--px-rule);border-radius:4px;
  padding:12px 14px;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;
  text-transform:lowercase;transition:background 120ms ease,border-color 120ms ease}
.px-card:hover{background:var(--px-hover)}
.px-card:focus-visible{outline:2px solid var(--px-hue-ink);outline-offset:2px}
.px-card[aria-pressed=true]{border-color:var(--px-hue);background:rgba(244,239,229,.04)}
.px-num{font-size:11px;color:var(--px-muted)}
.px-ctitle{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-cmodel{font-size:11px;color:var(--px-hue-ink)}
.px-csrc{grid-column:2 / 4;font-size:12px;color:var(--px-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-card[aria-pressed=true] .px-num{color:var(--px-hue-ink)}

.px-note{font-size:11px;color:var(--px-muted);margin:0}
.px-load{position:absolute;right:32px;top:28px;font-size:11px;color:var(--px-muted)}

.px.px--narrow{padding:20px 16px 22px;gap:18px}
.px--narrow .px-list{grid-template-columns:minmax(0,1fr)}
.px--narrow .px-name{font-size:20px}
.px--narrow .px-wave{height:90px}
.px--narrow .px-mixrow{grid-template-columns:auto minmax(0,1fr) auto}
.px--narrow .px-flip{grid-column:1 / -1;justify-self:center}
@media (prefers-reduced-motion:reduce){.px-play,.px-card{transition:none}}
.px.is-loading .px-time::after{content:' · loading';color:var(--px-hue-ink)}

/* in a module page's scene column (about 560-880 wide): two columns of cards and a shorter wave, so it fits one screen */
.px.px--mid{padding:22px 22px 24px;gap:16px}
.px--mid .px-list{grid-template-columns:repeat(2,minmax(0,1fr))}
.px--mid .px-wave{height:88px}
.px--mid .px-name{font-size:21px}
.px--mid .px-card{padding:10px 12px}
.px--mid .px-mixrow{grid-template-columns:auto minmax(0,1fr) auto auto}