/* ===================================================================
   /sound-test - the speaker stage.

   --lvl (0..1) is written by SoundTest.js from the analyser on each
   output channel, so every movement here follows the real sound level
   of that side. Scoped under .st; nothing outside the tester is touched.
   =================================================================== */

.st {
    --st-accent: #3d8bff;
    --st-accent-2: #22d3ee;
    --st-ink: #10162b;
    --st-muted: #5b6275;
    --st-line: #e4e7ef;
    --st-volume: 70%;

    margin: 18px auto 24px;
    /* WebsiteTemplate style.css gives every <section> 60px of padding. */
    padding: 0;
    max-width: 980px;
    border-radius: 28px;
    background: #fff;
    border: 1px solid var(--st-line);
    box-shadow: 0 30px 60px -32px rgb(16 22 43 / 45%);
    overflow: hidden;
    text-align: left;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--st-ink);
}

.st *, .st *::before, .st *::after { box-sizing: border-box; }
.st button { font: inherit; }
.st svg { display: block; }

.st-visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- top bar: detected device ---------- */

.st-topbar {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
    padding: 14px 20px;
    background: linear-gradient(180deg, #151b33, #10162b);
    color: #cdd5ee;
}
.st-detected { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .9rem; font-weight: 500; }
.st-detected svg { width: 18px; height: 18px; color: var(--st-accent-2); }

.st-devices { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgb(255 255 255 / 8%); }
.st-devices button {
    border: 0; border-radius: 999px; padding: 6px 12px; min-height: 32px;
    background: transparent; color: #aeb8d6; font-size: .8rem; font-weight: 600; cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.st-devices button:hover { color: #fff; }
.st-devices button[aria-checked="true"] { background: #fff; color: var(--st-ink); }

/* ---------- the stage ---------- */

.st-stage {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: clamp(8px, 3vw, 40px);
    padding: clamp(28px, 5vw, 56px) clamp(14px, 4vw, 48px) clamp(24px, 4vw, 44px);
    background:
        radial-gradient(60% 70% at 50% 110%, rgb(61 139 255 / 28%), transparent 70%),
        radial-gradient(40% 50% at 15% 30%, rgb(34 211 238 / 10%), transparent 70%),
        radial-gradient(40% 50% at 85% 30%, rgb(34 211 238 / 10%), transparent 70%),
        linear-gradient(180deg, #10162b 0%, #1a2142 100%);
    isolation: isolate;
}
/* the floor the speakers stand on */
.st-stage::after {
    content: ""; position: absolute; left: 6%; right: 6%; bottom: 18px; height: 1px; z-index: -1;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 18%), transparent);
}

/* ---------- speakers ---------- */

.st-speaker {
    --lvl: 0;
    position: relative;
    justify-self: center;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    width: min(100%, 170px);
    padding: 0; border: 0; background: none; color: #dfe5f7; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: opacity .25s ease, filter .25s ease, transform .2s ease;
}
.st-speaker:focus-visible { outline: 3px solid var(--st-accent-2); outline-offset: 8px; border-radius: 22px; }
.st-speaker:hover .st-cabinet { transform: translateY(-3px); }

.st-cabinet {
    width: 100%; height: auto;
    filter: drop-shadow(0 22px 22px rgb(0 0 0 / 45%));
    transform: translateY(calc(var(--lvl) * -2px));
    transition: transform .2s ease;
}

.st-woofer, .st-tweeter, .st-cap {
    transform-box: fill-box; transform-origin: center;
}
.st-woofer { transform: scale(calc(1 + var(--lvl) * .075)); }
.st-tweeter { transform: scale(calc(1 + var(--lvl) * .05)); }
.st-cap { transform: scale(calc(1 + var(--lvl) * .22)); }

.st-led { fill: #3a4163; transition: fill .2s ease; }
.st-speaker.is-sounding .st-led { fill: #34f5a6; filter: drop-shadow(0 0 4px #34f5a6); }

.st-speaker-label {
    font-size: .95rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #e8ecfb;
}

.st-meter {
    width: 70%; height: 6px; border-radius: 999px; overflow: hidden;
    background: rgb(255 255 255 / 10%);
}
.st-meter-fill {
    display: block; width: 100%; height: 100%; border-radius: inherit;
    background: linear-gradient(90deg, #34f5a6, var(--st-accent-2) 55%, #ffb547 85%, #ff5f6d);
    transform-origin: left center; transform: scaleX(0);
}

/* Sound rings: they grow out of the woofer, and their strength follows --lvl. */
.st-waves {
    position: absolute; left: 50%; top: 64%; width: 0; height: 0; pointer-events: none;
}
.st-waves i {
    position: absolute; left: 0; top: 0;
    width: 150px; height: 150px; margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 2px solid var(--st-accent-2);
    opacity: 0; transform: scale(.5);
}
.st-speaker.is-sounding .st-waves i {
    animation: st-ring 1.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
.st-speaker.is-sounding .st-waves i:nth-child(2) { animation-delay: .53s; }
.st-speaker.is-sounding .st-waves i:nth-child(3) { animation-delay: 1.06s; }
@keyframes st-ring {
    0%   { opacity: calc(.15 + var(--lvl) * .85); transform: scale(.45); }
    100% { opacity: 0; transform: scale(1.55); }
}

/* The side that has been switched off is visibly off. */
.st[data-channel="left"] .st-speaker--right,
.st[data-channel="right"] .st-speaker--left { opacity: .38; filter: grayscale(.7) brightness(.8); }
.st[data-channel="left"] .st-speaker--left,
.st[data-channel="right"] .st-speaker--right { transform: scale(1.04); }
.st-speaker[aria-pressed="true"] .st-speaker-label { color: var(--st-accent-2); }

/* ---------- centre: device + play ---------- */

.st-center { display: flex; flex-direction: column; align-items: center; gap: 18px; }

.st-device { width: clamp(120px, 20vw, 220px); }
.st .st-device-art { display: none; width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgb(0 0 0 / 40%)); }
.st[data-device="laptop"]  .st-device-art--laptop,
.st[data-device="desktop"] .st-device-art--desktop,
.st[data-device="tablet"]  .st-device-art--tablet,
.st[data-device="phone"]   .st-device-art--phone { display: block; }

.st-dev-dot { fill: #5a6280; transition: fill .2s ease; }
.st.is-playing:not([data-channel="right"]) .st-dev-dot--l,
.st.is-playing:not([data-channel="left"])  .st-dev-dot--r { fill: #34f5a6; }

.st-play {
    position: relative;
    display: grid; place-items: center; gap: 2px;
    width: clamp(84px, 12vw, 108px); aspect-ratio: 1;
    border: 0; border-radius: 50%; cursor: pointer; color: #fff;
    background: radial-gradient(circle at 35% 30%, #6aa9ff, var(--st-accent) 55%, #2254c9);
    box-shadow: 0 16px 34px -10px rgb(61 139 255 / 70%), inset 0 -4px 10px rgb(0 0 0 / 22%), inset 0 3px 8px rgb(255 255 255 / 25%);
    transition: transform .15s ease, box-shadow .15s ease;
}
.st-play:hover { transform: translateY(-2px) scale(1.03); }
.st-play:active { transform: scale(.96); }
.st-play:focus-visible { outline: 3px solid var(--st-accent-2); outline-offset: 5px; }
.st-play svg { width: 34%; height: 34%; grid-area: 1 / 1; }
.st-play-text { position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); font-size: .85rem; font-weight: 600; color: #dfe5f7; white-space: nowrap; }
.st-icon-pause { opacity: 0; }
.st.is-playing .st-icon-play { opacity: 0; }
.st.is-playing .st-icon-pause { opacity: 1; }
.st-play-ring {
    position: absolute; inset: -8px; border-radius: 50%;
    border: 2px solid rgb(106 169 255 / 55%); opacity: 0;
}
.st.is-playing .st-play-ring { animation: st-pulse 1.8s ease-out infinite; }
@keyframes st-pulse {
    0% { opacity: .8; transform: scale(.94); }
    100% { opacity: 0; transform: scale(1.35); }
}

/* ---------- controls ---------- */

.st-controls {
    display: grid; grid-template-columns: auto auto minmax(260px, 1fr); gap: 18px 28px; align-items: end;
    padding: 26px clamp(16px, 4vw, 36px) 8px;
}
.st-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.st-group-label { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); }

.st-segmented { display: inline-flex; padding: 4px; gap: 4px; border-radius: 16px; background: #f1f3f8; border: 1px solid var(--st-line); }
.st-segmented button {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 42px; padding: 0 16px; border: 0; border-radius: 12px; cursor: pointer;
    background: transparent; color: var(--st-muted); font-weight: 600; font-size: .92rem; white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.st-segmented button svg { width: 16px; height: 16px; }
.st-segmented button:hover { color: var(--st-ink); }
.st-segmented button[aria-checked="true"] {
    background: #fff; color: var(--st-ink);
    box-shadow: 0 1px 2px rgb(16 22 43 / 10%), 0 6px 14px -8px rgb(16 22 43 / 35%);
}
.st-segmented button:focus-visible,
.st-devices button:focus-visible,
.st-step:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 2px; }

/* volume */
.st-volume { display: flex; align-items: center; gap: 10px; }
.st-step {
    display: grid; place-items: center; flex: none;
    width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
    border: 1px solid var(--st-line); background: #fff; color: var(--st-ink);
    box-shadow: 0 4px 10px -6px rgb(16 22 43 / 40%);
    transition: transform .12s ease, background-color .15s ease;
}
.st-step svg { width: 18px; height: 18px; }
.st-step:hover { background: #f4f7ff; }
.st-step:active { transform: scale(.9); }
.st-step.pop { animation: st-pop .25s ease; }
@keyframes st-pop { 50% { transform: scale(1.14); } }

.st-slider { position: relative; flex: 1; min-width: 120px; padding-top: 22px; }
.st-bars { position: absolute; left: 2px; right: 2px; top: 0; display: flex; align-items: flex-end; gap: 4px; height: 16px; }
.st-bars i {
    flex: 1; border-radius: 3px; background: #e3e7f1;
    transition: background-color .15s ease, transform .15s ease;
}
.st-bars i:nth-child(1)  { height: 25%; }
.st-bars i:nth-child(2)  { height: 33%; }
.st-bars i:nth-child(3)  { height: 41%; }
.st-bars i:nth-child(4)  { height: 49%; }
.st-bars i:nth-child(5)  { height: 57%; }
.st-bars i:nth-child(6)  { height: 65%; }
.st-bars i:nth-child(7)  { height: 73%; }
.st-bars i:nth-child(8)  { height: 81%; }
.st-bars i:nth-child(9)  { height: 90%; }
.st-bars i:nth-child(10) { height: 100%; }
.st-bars i.on { background: linear-gradient(180deg, var(--st-accent-2), var(--st-accent)); }
.st.is-playing .st-bars i.on { animation: st-eq 1s ease-in-out infinite alternate; }
.st.is-playing .st-bars i.on:nth-child(odd) { animation-delay: .35s; }
@keyframes st-eq { to { transform: scaleY(.72); } }
.st-bars i { transform-origin: bottom; }

.st-slider input[type="range"] {
    -webkit-appearance: none; appearance: none;
    width: 100%; height: 12px; margin: 0; border-radius: 999px; cursor: pointer;
    background: linear-gradient(90deg, var(--st-accent-2), var(--st-accent)) 0 / var(--st-volume) 100% no-repeat, #e3e7f1;
}
.st-slider input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none;
    width: 28px; height: 28px; border-radius: 50%;
    background: #fff; border: 3px solid var(--st-accent);
    box-shadow: 0 6px 14px -4px rgb(61 139 255 / 70%);
    transition: transform .12s ease;
}
.st-slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.15); }
.st-slider input[type="range"]::-moz-range-thumb {
    width: 24px; height: 24px; border-radius: 50%;
    background: #fff; border: 3px solid var(--st-accent);
    box-shadow: 0 6px 14px -4px rgb(61 139 255 / 70%);
}
.st-slider input[type="range"]::-moz-range-track { background: transparent; }
.st-slider input[type="range"]:focus-visible { outline: 3px solid var(--st-accent); outline-offset: 6px; }

.st-volume-value {
    min-width: 54px; text-align: right;
    font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--st-ink);
}
.st.is-muted .st-volume-value { color: #d23a4b; }

.st-status {
    margin: 18px clamp(16px, 4vw, 36px) 0; padding: 12px 16px;
    border-radius: 14px; background: #f4f7ff; border: 1px solid #dce6fb;
    font-weight: 600; color: #1d3a7a;
}
.st-hint { margin: 10px clamp(16px, 4vw, 36px) 24px; font-size: .92rem; color: var(--st-muted); }

/* ---------- responsive ---------- */

@media (max-width: 860px) {
    .st-controls { grid-template-columns: 1fr 1fr; }
    .st-group--volume { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
    .st { border-radius: 22px; margin-inline: -4px; }
    .st-topbar { padding: 12px 14px; }
    .st-devices { width: 100%; justify-content: space-between; }
    .st-devices button { flex: 1; padding: 6px 4px; }
    .st-stage { gap: 6px; padding-top: 30px; }
    .st-speaker { width: min(100%, 110px); gap: 8px; }
    .st-speaker-label { font-size: .78rem; }
    .st-waves i { width: 100px; height: 100px; margin: -50px 0 0 -50px; }
    .st-device { width: 96px; }
    .st-center { gap: 12px; }
    .st-controls { grid-template-columns: 1fr; gap: 16px; }
    .st-segmented { display: flex; }
    .st-segmented button { flex: 1; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .st *, .st *::before, .st *::after { animation: none !important; transition: none !important; }
}