/* A compact listening instrument for the Sidechain project introduction. */
.product-emblem.sidechain-demo {
    --sc-kick: #946018;
    --sc-bridge: #245c68;
    --sc-bass: #75609b;
    --sc-dot: #c4c9c6;
    --sc-button-ink: #fff;
    display: block;
    place-items: normal;
    width: 100%;
    max-width: none;
    min-width: 0;
    aspect-ratio: auto;
    margin: 0;
    background-image: none;
    color: var(--ink);
}
.product-emblem.sidechain-demo::before,
.product-emblem.sidechain-demo::after { display: none; }

html[data-theme="dark"] .product-emblem.sidechain-demo {
    --sc-kick: #e9b05c;
    --sc-bridge: #90c8d0;
    --sc-bass: #baa2e5;
    --sc-dot: #35414c;
    --sc-button-ink: #111923;
    background-image: none;
}

.sc-demo-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding-block: 0 17px;
    border-bottom: 1px solid var(--line);
    color: var(--muted);
}
.sc-demo-heading .mono { font-size: 9px; letter-spacing: 1.2px; }
.sc-demo-rate { font: 9px/1.6 var(--mono); letter-spacing: .4px; white-space: nowrap; }
.sc-demo-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px 19px;
    padding-block: 17px 9px;
    font: 9px/1.5 var(--mono);
    letter-spacing: .2px;
    color: var(--muted);
}
.sc-demo-legend > span { display: inline-flex; align-items: center; gap: 7px; }
.sc-demo-legend i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.sc-demo-legend > span:nth-child(1) i { background: var(--sc-kick); }
.sc-demo-legend > span:nth-child(2) i { background: var(--sc-bridge); }
.sc-demo-legend > span:nth-child(3) i { background: var(--sc-bass); }

.product-emblem.sidechain-demo .sc-demo-plot {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: visible;
    background-image: radial-gradient(var(--sc-dot) .65px, transparent .65px);
    background-size: 19px 19px;
    color: var(--project-accent);
    touch-action: pan-y pinch-zoom;
    user-select: none;
    -webkit-user-select: none;
}
.sidechain-demo .sc-demo-plot [data-handle] { cursor: ew-resize; touch-action: none; }
.sidechain-demo .sc-demo-plot:focus-visible,
.sidechain-demo .sc-demo-plot [data-handle]:focus-visible {
    outline: 1px dashed var(--project-accent);
    outline-offset: 4px;
}
.sidechain-demo button:focus-visible,
.sidechain-demo input:focus-visible { outline: 2px solid var(--project-accent); outline-offset: 3px; }

.sc-demo-transport {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    padding-block: 14px;
    border-bottom: 1px solid var(--line);
}
.sc-demo-views {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 24px;
}
.sc-demo-view,
.sc-demo-audio,
.sc-demo-motion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 13px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--muted);
    font: 10px/1.4 var(--sans);
    white-space: nowrap;
    cursor: pointer;
    transition: color .16s, background .16s, border-color .16s;
}
.sc-demo-view { border-radius: 20px; }
.sc-demo-view:hover { color: var(--ink); background: var(--project-tint); }
.sc-demo-view[aria-pressed="true"] { background: var(--project-accent); color: var(--sc-button-ink); }
.sc-demo-audio {
    min-width: 74px;
    margin-left: auto;
    border-color: var(--project-accent);
    border-radius: 3px;
    color: var(--project-accent);
}
.sc-demo-audio:hover,
.sc-demo-audio[aria-pressed="true"] { background: var(--project-accent); color: var(--sc-button-ink); }
.sc-demo-motion {
    width: 36px;
    flex: 0 0 36px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 50%;
    color: var(--project-accent);
}
.sc-demo-motion:hover { background: var(--project-tint); border-color: var(--project-accent); }
.sc-demo-motion[aria-pressed="true"] { background: var(--project-tint); border-color: var(--project-accent); }
.sc-demo-transport button svg { width: 13px; height: 13px; display: block; flex-shrink: 0; }
.sidechain-demo button:disabled { cursor: default; opacity: .55; }

.sc-demo-controls {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 15px 23px;
    padding-block: 18px 14px;
    border-bottom: 1px solid var(--line);
}
.sc-demo-param {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px 9px;
    min-width: 0;
    color: var(--muted);
}
.sc-demo-param-title { font-size: 10px; line-height: 1.5; }
.sc-demo-param output { color: var(--ink); font: 10px/1.5 var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sc-demo-param input[type="range"] {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 32px;
    margin: 0;
    padding: 0;
    accent-color: var(--project-accent);
    background: transparent;
    cursor: ew-resize;
}
.sc-demo-param-wide { grid-column: 1 / -1; }
.sc-demo-note {
    margin: 13px 0 0;
    color: var(--muted);
    font-size: 10px;
    line-height: 1.7;
}
.sc-demo-status {
    min-height: 16px;
    margin: 6px 0 0;
    color: var(--project-accent);
    font-size: 10px;
    line-height: 1.6;
}
.sc-demo-status:empty { margin-top: 0; min-height: 0; }

@media (max-width: 1100px) and (min-width: 761px) {
    .sc-demo-transport { gap: 7px; }
    .sc-demo-views { padding: 2px; }
    .sc-demo-view { padding-inline: 10px; font-size: 9px; }
    .sc-demo-audio { min-width: 65px; padding-inline: 10px; font-size: 9px; }
    .sc-demo-controls { column-gap: 17px; }
    .sc-demo-param-title, .sc-demo-param output { font-size: 9px; }
}

@media (max-width: 760px) {
    .product-emblem.sidechain-demo { max-width: none; width: 100%; margin-top: 8px; }
    .sc-demo-heading { padding-bottom: 15px; }
    .sc-demo-legend { gap: 9px 18px; padding-top: 15px; }
    .sc-demo-view, .sc-demo-audio { min-height: 40px; padding-inline: 14px; }
    .sc-demo-motion { width: 40px; min-height: 40px; flex-basis: 40px; }
    .sc-demo-controls { padding-block: 18px 12px; gap: 12px 23px; }
    .sc-demo-param input[type="range"] { min-height: 40px; }
    .sc-demo-note { font-size: 10px; }
}

@media (max-width: 380px) {
    .sc-demo-transport { gap: 7px; }
    .sc-demo-views { padding: 2px; }
    .sc-demo-view { padding-inline: 10px; }
    .sc-demo-audio { min-width: 66px; padding-inline: 10px; }
    .sc-demo-controls { column-gap: 16px; }
    .sc-demo-param-title, .sc-demo-param output { font-size: 9px; }
    .sc-demo-legend { gap: 8px 14px; font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sc-demo-view, .sc-demo-audio, .sc-demo-motion { transition: none; }
}