/* /slow-down-audio/ page styles. Built from /assets/polyatic.css tokens only (no new colours or fonts). */
.nojs{margin:1.25rem 0 0;padding:0.875rem 1rem;border:1px solid var(--line);border-left:0.25rem solid var(--accent);border-radius:0.625rem;background:var(--surface);color:var(--ink);font-size:0.9375rem;line-height:1.6}
.sd-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;opacity:0}
.sd-head .sub{margin-bottom:1rem}
@media(max-width:520px){.sd-head h1{margin-bottom:0.25rem}.sd-head .sub{font-size:0.9375rem;margin-bottom:0.75rem}}
@media(min-width:920px){.sd-duo{grid-template-columns:minmax(0,1.3fr) minmax(21rem,.8fr)}}

.sd-stage,.sd-card{padding:1rem;display:grid;gap:0.875rem;align-content:start}
.sd-side{display:grid;gap:1rem;align-content:start}
.sd-fs{border:0;margin:0;padding:0;min-width:0;display:grid;gap:1rem}
.sd-fs:disabled .sd-card{opacity:.62}
@media(max-width:520px){.sd-stage,.sd-card{padding:0.75rem;gap:0.75rem}}
.sd-stage .k,.sd-card .k{font-family:var(--mono);font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.sd-h{margin:0;font-size:1.0625rem;font-weight:650;letter-spacing:-.01em}
.sd-help{margin:0;font-size:0.8125rem;line-height:1.5;color:var(--muted)}
.sd-dim{font-size:0.8125rem;color:var(--muted);font-family:var(--mono)}
#status:empty{display:none}
#status.bad{color:var(--bad);font-weight:600}
.sd-stage .chip:focus-visible,.sd-card .chip:focus-visible,.sd-drop:focus-within,.sd-wave:focus-visible{outline:3px solid var(--accent);outline-offset:2px}

/* drop zone (same component as the other polyatic file tools) */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.5rem;text-align:center;min-height:9rem;padding:1.25rem;border:2px dashed var(--line-2);border-radius:0.875rem;background:var(--surface-2);cursor:pointer;transition:border-color .15s,background .15s}
.drop:hover,.drop.drag{border-color:var(--accent);background:var(--accent-soft)}
.drop b{font-size:1.0625rem}
.drop small{color:var(--muted);max-width:44ch;line-height:1.5}
.sd-drop-icon{width:3.25rem;height:2.25rem;border-bottom:2px solid var(--ink);background:linear-gradient(90deg,transparent 0 10%,var(--ink) 10% 16%,transparent 16% 30%,var(--signal) 30% 36%,transparent 36% 50%,var(--ink) 50% 56%,transparent 56% 70%,var(--signal) 70% 76%,transparent 76%) bottom/100% 100% no-repeat;clip-path:polygon(0 60%,10% 30%,20% 70%,30% 0,40% 55%,50% 25%,60% 65%,70% 5%,80% 50%,90% 35%,100% 60%,100% 100%,0 100%)}
.has-file .drop{min-height:0;padding:0.625rem 1rem;flex-direction:row;gap:0.75rem}
.has-file .drop small{display:none}
.has-file .sd-drop-icon{width:2rem;height:1.5rem}
@media (prefers-reduced-motion:reduce){.drop{transition:none}}

.sd-preview{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:0.5rem}
.sd-preview li{padding:0.625rem 0.75rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--surface);font-size:0.875rem;line-height:1.45;color:var(--ink-2)}
.sd-preview li b{display:block;color:var(--ink);font-family:var(--mono);font-size:0.75rem;text-transform:uppercase;letter-spacing:.05em;margin-bottom:0.125rem}
.has-file .sd-preview{display:none}
@media(max-width:520px){.sd-preview{grid-template-columns:1fr 1fr}.sd-preview li{font-size:0.8125rem;padding:0.5rem 0.625rem}}

.sd-player{display:grid;gap:0.75rem}
.sd-player[hidden]{display:none}
.sd-file{margin:0;display:flex;flex-wrap:wrap;gap:0.25rem 0.5rem;align-items:baseline;overflow-wrap:anywhere}
.sd-wavebox{display:grid;gap:0.5rem}
.sd-wave{display:block;width:100%;height:150px;border:1px solid var(--line);border-radius:0.5rem;background:var(--surface-2);cursor:crosshair;touch-action:pan-y}
@media(min-width:920px){.sd-wave{height:190px}}
.sd-zoomrow,.sd-row,.sd-transport{display:flex;flex-wrap:wrap;gap:0.5rem;align-items:center}
.sd-zoomrow input[type=range]{flex:1;min-width:8rem}
.sd-sq{min-width:2.5rem;padding-left:0.5rem;padding-right:0.5rem;text-align:center}
.sd-play{min-width:7.5rem}
#play[aria-pressed=true]{background:var(--ink);color:var(--bg)}
.sd-time{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:0.9375rem}
.sd-badge{margin-left:auto;font-family:var(--mono);font-weight:650;font-size:0.875rem;padding:0.25rem 0.5rem;border-radius:0.375rem;background:var(--signal);color:var(--signal-ink);font-variant-numeric:tabular-nums}

.sd-cardhead{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;flex-wrap:wrap}
.sd-switch{display:inline-flex;align-items:center;gap:0.375rem;font-weight:600;font-size:0.875rem;cursor:pointer}
.sd-switch input{width:1.125rem;height:1.125rem;accent-color:var(--accent);margin:0}
.sd-pitchkeep{display:grid;gap:0.25rem}
.sd-sep{width:1px;align-self:stretch;background:var(--line)}
.sd-ab{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;gap:0.375rem 0.5rem;align-items:center}
.sd-set{font-variant-numeric:tabular-nums}
.sd-set b{font-family:var(--mono);font-weight:600;margin-left:0.25rem}
.sd-num{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.875rem;color:var(--ink-2)}
.sd-num input[type=number]{width:4.25rem;padding:0.375rem 0.5rem}
.sd-trainer{display:grid;gap:0.5rem;padding:0.625rem 0.75rem;border:1px solid var(--line);border-radius:0.625rem;background:var(--surface-2)}
.sd-markers{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.375rem}
.sd-markers:empty{display:none}
.sd-markers li{display:inline-flex;align-items:stretch;border:1px solid var(--line-2);border-radius:0.5rem;overflow:hidden;background:var(--surface)}
.sd-markers button{all:unset;cursor:pointer;padding:0.375rem 0.5rem;font-family:var(--mono);font-size:0.8125rem;color:var(--ink)}
.sd-markers button+button{border-left:1px solid var(--line);color:var(--muted)}
.sd-markers button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.sd-keys{padding:0 0.25rem}
.sd-keys kbd{font-family:var(--mono);font-size:0.75rem;padding:0 0.3rem;border:1px solid var(--line-2);border-radius:0.25rem;background:var(--surface)}
@media(hover:none){.sd-keys{display:none}}