/* Siesta Audio · live plugin demo widget.
   Every page skins it with its own --sd-* tokens, so Adrift's demo stays
   paper and sea, Drown's stays ember on black, and so on. */
.sdemo{
  --sd-bg:#fff; --sd-fg:#111010; --sd-muted:#918a83; --sd-line:#e6e2db;
  --sd-accent:#c8563c; --sd-accent-fg:#fff; --sd-knob:#f1ede6; --sd-radius:12px;
  --sd-font:inherit; --sd-mono:"IBM Plex Mono",ui-monospace,monospace;
  background:var(--sd-bg);color:var(--sd-fg);border:1px solid var(--sd-line);border-radius:var(--sd-radius);
  padding:clamp(18px,3vw,30px);margin-top:clamp(20px,3.5vw,34px);font-family:var(--sd-font);
  position:relative;transition:box-shadow .2s;
  /* never let the widget widen the column it sits in (Memory Station's grid did) */
  min-width:0;max-width:100%;box-sizing:border-box;contain:inline-size
}
.sdemo:not(.sd-on){min-height:120px}
.sdemo.sd-drop{box-shadow:0 0 0 3px var(--sd-accent)}
.sdemo .sd-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.sdemo .sd-dot{width:9px;height:9px;border-radius:50%;background:var(--sd-muted);flex:none}
.sdemo.sd-playing .sd-dot{background:var(--sd-accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--sd-accent) 25%,transparent);animation:sdpulse 1.6s ease-in-out infinite}
@keyframes sdpulse{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--sd-accent) 8%,transparent)}}
@media (prefers-reduced-motion:reduce){.sdemo.sd-playing .sd-dot{animation:none}}
.sdemo .sd-title{flex:1 1 180px;min-width:0;font-family:var(--sd-mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
.sdemo .sd-state{margin-left:auto;text-align:right;font-family:var(--sd-mono);font-size:11px;letter-spacing:.06em;color:var(--sd-muted)}
.sdemo .sd-row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.sdemo .sd-lbl{font-family:var(--sd-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--sd-muted);min-width:64px}
.sdemo button{font:inherit;color:inherit;cursor:pointer}
.sdemo .sd-chip{font-family:var(--sd-mono);font-size:11.5px;letter-spacing:.04em;background:transparent;border:1px solid var(--sd-line);
  border-radius:999px;padding:7px 13px;line-height:1.1;transition:background .15s,border-color .15s}
.sdemo .sd-chip:hover{border-color:var(--sd-accent)}
.sdemo .sd-chip[aria-pressed="true"]{background:var(--sd-accent);border-color:var(--sd-accent);color:var(--sd-accent-fg)}
.sdemo .sd-knobs{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:18px 10px;margin:22px 0 18px;max-width:640px}
.sdemo .sd-k{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.sdemo .sd-dial{--a:0deg;--p:50%;width:72px;height:72px;border-radius:50%;position:relative;cursor:grab;touch-action:none;
  background:conic-gradient(from -135deg,var(--sd-accent) 0 var(--p),var(--sd-line) var(--p) 75%,transparent 75%);
  outline-offset:4px}
.sdemo .sd-dial:active{cursor:grabbing}
.sdemo .sd-dial::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--sd-knob);
  box-shadow:0 3px 8px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.25)}
.sdemo .sd-ptr{position:absolute;left:50%;top:10px;width:3px;height:22px;margin-left:-1.5px;border-radius:2px;background:var(--sd-fg);
  transform-origin:50% 26px;transform:rotate(var(--a))}
.sdemo .sd-dial:focus-visible{outline:2px solid var(--sd-accent)}
.sdemo .sd-kl{font-family:var(--sd-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;margin-top:8px}
.sdemo .sd-kv{font-family:var(--sd-mono);font-size:11px;color:var(--sd-muted)}
.sdemo .sd-kh{font-size:12px;color:var(--sd-muted);line-height:1.3}
.sdemo .sd-transport{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:18px}
.sdemo .sd-play{font-family:var(--sd-mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;background:var(--sd-accent);
  color:var(--sd-accent-fg);border:0;border-radius:calc(var(--sd-radius) / 2);padding:14px 26px;min-width:120px}
.sdemo .sd-btn{font-family:var(--sd-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;background:transparent;
  border:1px solid var(--sd-line);border-radius:calc(var(--sd-radius) / 2);padding:13px 18px}
.sdemo .sd-btn[aria-pressed="true"]{border-color:var(--sd-accent);color:var(--sd-accent)}
.sdemo .sd-freeze[aria-pressed="true"]{background:var(--sd-accent);color:var(--sd-accent-fg)}
.sdemo .sd-scope{flex:1 1 160px;min-width:140px;height:46px;border-bottom:1px solid var(--sd-line)}
.sdemo .sd-note{font-size:13.5px;line-height:1.55;color:var(--sd-muted);margin-top:16px;max-width:62ch}
.sdemo .sd-note b{color:var(--sd-fg)}
.sdemo .sd-live{border-left:3px solid var(--sd-accent);padding-left:12px;margin-top:6px}
@media (max-width:520px){
  .sdemo .sd-lbl{width:100%}
  .sdemo .sd-play{flex:1 1 100%}
  .sdemo .sd-dial{width:64px;height:64px}
  .sdemo .sd-ptr{height:19px;transform-origin:50% 22px}
}