/* Speaker Test */

.speaker-page {
    overflow-x: clip;
}

.speaker-test-page {
    background: var(--color-background);
}

.speaker-hero {
    padding-block: clamp(var(--space-8), 4vw, var(--space-12)) var(--space-6);
}

.speaker-hero__inner {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
}

.speaker-hero__eyebrow {
    color: var(--color-mint);
    font-size: var(--text-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.speaker-hero h1 {
    max-width: 25ch;
    font-size: clamp(2.25rem, 4.2vw, 4rem);
}

.speaker-hero__support {
    max-width: 68ch;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.speaker-hero + .tool-methodology-link + .speaker-safety {
    margin-block: var(--space-4) var(--space-6);
}

.speaker-trust-links {
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
}

.speaker-tools {
    --tool-accent: var(--color-cyan);
    padding-block-end: var(--space-8);
}

.speaker-tools__layout {
    display: grid;
    gap: var(--space-4);
}

.speaker-tools__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.speaker-tool {
    --panel-accent: var(--color-cyan);
    position: relative;
    min-width: 0;
    padding: clamp(var(--space-5, 1.25rem), 2.4vw, var(--space-8));
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--panel-accent) 24%, var(--color-border));
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--panel-accent) 2.8%, var(--color-surface));
    box-shadow: 0 14px 38px rgb(0 0 0 / 0.17);
}

.speaker-tool::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--panel-accent), transparent 74%);
    opacity: 0.78;
}

.speaker-tool--channels {
    --panel-accent: var(--color-mint);
    padding: 0;
    border-color: color-mix(in srgb, var(--color-mint) 32%, var(--color-border));
    background: linear-gradient(145deg, color-mix(in srgb, var(--color-mint) 3.5%, var(--color-surface)) 0%, var(--color-surface) 58%);
}

.speaker-tool--phase {
    --panel-accent: color-mix(in srgb, var(--color-warning) 58%, var(--color-danger));
}

.speaker-tool--frequency {
    --panel-accent: #b878ff;
}

.speaker-tool--sweep {
    --panel-accent: var(--color-mint);
}

.speaker-tool--noise {
    --panel-accent: var(--color-warning);
}

.speaker-tool--high {
    --panel-accent: #ff62c7;
    grid-column: 1 / -1;
}

.speaker-tool__header {
    margin-block-end: var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.speaker-tool__header--primary {
    margin: 0;
    padding: var(--space-5, 1.25rem) clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-8));
    align-items: center;
    justify-content: space-between;
    border-block-end: 1px solid var(--color-border);
}

.speaker-tool__header--split {
    align-items: center;
    justify-content: space-between;
    gap: var(--space-8);
}

.speaker-tool__title {
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
}

.speaker-tool__header h2 {
    font-size: clamp(1.2rem, 2vw, 1.6rem);
}

.speaker-tool__header p {
    max-width: 60ch;
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.speaker-tool__asset,
.speaker-tool__icon {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--panel-accent) 32%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--panel-accent) 10%, var(--color-surface-elevated));
    color: var(--panel-accent);
}

.speaker-tool__asset img {
    width: 1.65rem;
    height: 1.65rem;
    object-fit: contain;
}

.speaker-tool__icon svg {
    width: 1.35rem;
    height: 1.35rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
}

.speaker-console__state {
    min-height: 2.5rem;
    padding-inline: var(--space-4);
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
}

.speaker-console__state-dot {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: var(--color-text-secondary);
}

.speaker-tools[data-playing="true"] .speaker-console__state {
    border-color: color-mix(in srgb, var(--color-mint) 46%, var(--color-border));
    color: var(--color-text);
}

.speaker-tools[data-playing="true"] .speaker-console__state-dot {
    background: var(--color-mint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-mint) 12%, transparent);
}

.channel-stage {
    min-height: 13.5rem;
    padding: clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-8));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    background:
        linear-gradient(90deg, transparent 49.9%, color-mix(in srgb, var(--color-border) 55%, transparent) 50%, transparent 50.1%),
        radial-gradient(circle at center, color-mix(in srgb, var(--color-cyan) 5%, transparent), transparent 44%);
}

.channel-control,
.phase-controls button,
.tone-grid button,
.noise-control,
.high-frequency-grid button,
.stereo-sequence,
.sweep-button,
.speaker-stop,
.speaker-transport button {
    border: 1px solid var(--color-border);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.channel-control {
    position: relative;
    min-height: 10.5rem;
    padding: var(--space-5, 1.25rem);
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-surface-elevated) 82%, var(--color-surface));
}

.channel-control::after {
    content: "";
    position: absolute;
    inset: auto 12% 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
    opacity: 0;
}

.channel-control:hover,
.phase-controls button:hover,
.tone-grid button:hover,
.noise-control:hover,
.high-frequency-grid button:hover {
    border-color: color-mix(in srgb, var(--panel-accent) 48%, var(--color-border));
    transform: translateY(-2px);
}

.channel-control[aria-pressed="true"] {
    border-color: var(--color-mint);
    background: color-mix(in srgb, var(--color-mint) 9%, var(--color-surface-elevated));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-mint) 22%, transparent);
}

.channel-control[aria-pressed="true"]::after {
    opacity: 1;
}

.channel-control strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: 0.06em;
}

.channel-control small {
    max-width: 22ch;
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.channel-control__position {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
}

.channel-control__position img {
    width: 2.25rem;
    height: 2.25rem;
    display: block;
    object-fit: contain;
}

.channel-control__position--left img {
    transform: scaleX(-1);
}

.channel-control__center-dot {
    width: 0.78rem;
    height: 0.78rem;
    display: block;
    border: 2px solid var(--color-text);
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--color-mint) 10%, transparent);
}

.channel-control__waves {
    width: 72%;
    height: 2px;
    position: absolute;
    inset-block-start: 46%;
    inset-inline-start: 14%;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
}

.channel-control__waves i {
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background: var(--color-cyan);
    opacity: 0;
}

.channel-control[aria-pressed="true"] .channel-control__waves i {
    animation: speaker-channel-wave 1.1s var(--ease-standard) infinite;
}

.channel-control[aria-pressed="true"] .channel-control__waves i:nth-child(2) {
    animation-delay: 160ms;
}

.channel-control[aria-pressed="true"] .channel-control__waves i:nth-child(3) {
    animation-delay: 320ms;
}

.speaker-tool__primary-footer {
    padding: var(--space-4) clamp(var(--space-5, 1.25rem), 2.5vw, var(--space-8));
    display: grid;
    grid-template-columns: minmax(12rem, 0.75fr) minmax(16rem, 1.5fr) minmax(8rem, 0.5fr);
    align-items: center;
    gap: var(--space-5, 1.25rem);
    border-block-start: 1px solid var(--color-border);
}

.stereo-sequence,
.sweep-button {
    min-height: 3.25rem;
    padding-inline: var(--space-5, 1.25rem);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-cyan) 9%, var(--color-surface-elevated));
    font-weight: var(--font-weight-bold);
}

.stereo-sequence {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
}

.stereo-sequence > span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-size: var(--text-xs);
}

.stereo-sequence i {
    width: 0.8rem;
    height: 1px;
    display: inline-block;
    background: currentColor;
}

.stereo-sequence:hover,
.stereo-sequence[aria-pressed="true"] {
    border-color: var(--color-cyan);
}

.stereo-sequence[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-cyan) 15%, var(--color-surface-elevated));
}

.speaker-level {
    min-width: 0;
    display: grid;
    gap: var(--space-2);
}

.speaker-level > span {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
}

.speaker-level output {
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-weight: var(--font-weight-bold);
}

.speaker-level small {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    line-height: 1.35;
}

.speaker-level input {
    width: 100%;
    height: 1.5rem;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.speaker-level input::-webkit-slider-runnable-track {
    height: 0.32rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-mint) 0 var(--level-percent, 100%), var(--color-border) var(--level-percent, 100%) 100%);
}

.speaker-level input::-moz-range-track {
    height: 0.32rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--color-mint) 0 var(--level-percent, 100%), var(--color-border) var(--level-percent, 100%) 100%);
}

.speaker-level input::-webkit-slider-thumb {
    width: 1.25rem;
    height: 1.25rem;
    margin-block-start: -0.46rem;
    appearance: none;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 0 1px var(--color-mint);
}

.speaker-level input::-moz-range-thumb {
    width: 0.95rem;
    height: 0.95rem;
    border: 3px solid var(--color-surface);
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 0 1px var(--color-mint);
}

.speaker-stop {
    min-height: 3.25rem;
    padding-inline: var(--space-5, 1.25rem);
    border-radius: var(--radius-md);
    background: transparent;
    font-weight: var(--font-weight-bold);
}

.speaker-stop:hover:not(:disabled) {
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.speaker-stop:disabled,
.speaker-transport button:disabled,
[data-audio-action]:disabled {
    cursor: not-allowed;
    opacity: 0.46;
}

.phase-controls,
.tone-grid,
.noise-controls,
.high-frequency-grid {
    display: grid;
    gap: var(--space-3);
}

.phase-controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.phase-controls button {
    min-height: 7.5rem;
    padding: var(--space-4);
    display: grid;
    align-content: center;
    justify-items: start;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    text-align: start;
}

.phase-controls button > span {
    color: var(--panel-accent);
    font-family: var(--font-measurement);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
}

.phase-controls button small,
.tone-grid button small,
.noise-control small,
.high-frequency-grid button small {
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    line-height: 1.35;
}

.phase-controls button[aria-pressed="true"],
.tone-grid button[aria-pressed="true"],
.noise-control[aria-pressed="true"],
.high-frequency-grid button[aria-pressed="true"] {
    border-color: var(--panel-accent);
    background: color-mix(in srgb, var(--panel-accent) 10%, var(--color-surface-elevated));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--panel-accent) 18%, transparent);
}

.tone-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tone-grid button {
    min-height: 5rem;
    padding: var(--space-3);
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-1);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
}

.tone-grid strong,
.high-frequency-grid strong {
    font-family: var(--font-measurement);
    font-variant-numeric: tabular-nums;
}

.speaker-tool__link {
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.speaker-tool__link a {
    color: var(--panel-accent);
    font-weight: var(--font-weight-semibold);
}

.sweep-visual {
    margin-block: var(--space-7, 1.75rem) var(--space-6);
    display: grid;
    gap: var(--space-2);
    color: var(--color-text-secondary);
    font-family: var(--font-measurement);
    font-size: var(--text-xs);
}

.sweep-visual__labels {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

.sweep-visual__instrument {
    height: 4.75rem;
    position: relative;
    overflow: hidden;
    border-block: 1px solid color-mix(in srgb, var(--panel-accent) 22%, var(--color-border));
    background: linear-gradient(180deg, color-mix(in srgb, var(--panel-accent) 4%, transparent), transparent 72%);
}

.sweep-visual__instrument::after {
    content: "LOW  →  HIGH";
    position: absolute;
    inset: auto var(--space-2) 0.32rem auto;
    color: color-mix(in srgb, var(--panel-accent) 62%, var(--color-text-secondary));
    font-size: 0.58rem;
    letter-spacing: 0.1em;
}

html[lang="de"] .sweep-visual__instrument::after {
    content: "TIEF  →  HOCH";
}

.sweep-visual__ticks {
    position: absolute;
    inset: auto 0 0;
    height: 100%;
    display: grid;
    grid-template-columns: repeat(9, 1fr);
    align-items: end;
}

.sweep-visual__ticks i {
    width: 1px;
    height: 0.52rem;
    justify-self: center;
    background: color-mix(in srgb, var(--panel-accent) 35%, var(--color-border));
}

.sweep-visual__ticks i:nth-child(odd) {
    height: 0.82rem;
}

.sweep-visual svg {
    width: 100%;
    height: calc(100% - 0.55rem);
    position: absolute;
    inset: 0 0 auto;
    overflow: visible;
}

.sweep-visual path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}

.sweep-visual__trace {
    stroke: color-mix(in srgb, var(--panel-accent) 30%, var(--color-border));
    stroke-width: 1.5;
}

.sweep-visual__progress {
    stroke: var(--panel-accent);
    stroke-width: 2.25;
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
}

.speaker-tool--sweep:has(.sweep-button[aria-pressed="true"]) .sweep-visual__progress {
    animation: speaker-sweep-trace 12s linear forwards;
    filter: drop-shadow(0 0 0.3rem color-mix(in srgb, var(--panel-accent) 58%, transparent));
}

.sweep-button {
    width: 100%;
    border-color: color-mix(in srgb, var(--panel-accent) 52%, var(--color-border));
    background: color-mix(in srgb, var(--panel-accent) 12%, var(--color-surface-elevated));
}

.sweep-button:hover,
.sweep-button[aria-pressed="true"] {
    border-color: var(--panel-accent);
    background: color-mix(in srgb, var(--panel-accent) 18%, var(--color-surface-elevated));
}

.noise-controls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.noise-control {
    min-height: 7.5rem;
    padding: var(--space-4) var(--space-3);
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-2);
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
    text-align: center;
}

.noise-control > span {
    width: 2.5rem;
    height: 1rem;
    border-radius: var(--radius-xs);
    background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--panel-accent) 80%, white) 0 2px, transparent 2px 4px);
    opacity: 0.72;
}

.noise-control--pink > span {
    filter: hue-rotate(300deg);
}

.noise-control--brown > span {
    filter: saturate(0.52) brightness(0.72);
}

.high-frequency-caution {
    max-width: 35rem !important;
    margin: 0 !important;
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-warning);
    flex: 0 1 35rem;
}

.high-frequency-caution strong {
    color: var(--color-warning);
}

.high-frequency-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.high-frequency-grid button {
    min-height: 6.75rem;
    padding: var(--space-4);
    position: relative;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-1);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-elevated);
}

.high-frequency-grid button i {
    width: 54%;
    height: 2px;
    margin-block-start: var(--space-3);
    display: block;
    background: linear-gradient(90deg, transparent, var(--panel-accent), transparent);
    opacity: 0.52;
}

.speaker-transport {
    position: fixed;
    z-index: 30;
    inset: auto 0 0;
    padding: var(--space-3) 0 max(var(--space-3), env(safe-area-inset-bottom));
    visibility: hidden;
    border-block-start: 1px solid color-mix(in srgb, var(--color-mint) 40%, var(--color-border));
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    box-shadow: 0 -16px 44px rgb(0 0 0 / 0.38);
    opacity: 0;
    transform: translateY(100%);
    transition: opacity var(--duration-standard) var(--ease-standard), transform var(--duration-standard) var(--ease-standard), visibility var(--duration-standard);
    backdrop-filter: blur(14px);
}

.speaker-tools[data-playing="true"] .speaker-transport {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.speaker-transport__inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
}

.speaker-transport__pulse {
    width: 0.65rem;
    height: 0.65rem;
    border-radius: 50%;
    background: var(--color-mint);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-mint) 12%, transparent);
}

.speaker-transport__inner div {
    min-width: 0;
    display: grid;
}

.speaker-transport small {
    color: var(--color-text-secondary);
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.speaker-transport strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.speaker-transport button {
    min-height: 2.75rem;
    padding-inline: var(--space-5, 1.25rem);
    border-color: color-mix(in srgb, var(--color-danger) 60%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface-elevated));
    color: var(--color-danger);
    font-weight: var(--font-weight-bold);
}

.speaker-intro {
    padding-block: clamp(var(--space-8), 5vw, var(--space-16));
    border-block-start: 1px solid var(--color-border);
}

.speaker-intro__inner {
    display: grid;
    gap: var(--space-8);
}

.speaker-intro__copy {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(20rem, 0.95fr);
    align-items: start;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.speaker-intro__copy > p {
    max-width: 66ch;
    color: var(--color-text-secondary);
}

.speaker-intro__copy > p + p {
    margin-block-start: 0;
}

.speaker-intro__lead {
    color: var(--color-text) !important;
    font-size: var(--text-lg);
}

.speaker-safety {
    padding: var(--space-5, 1.25rem);
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    border: 1px solid color-mix(in srgb, var(--color-warning) 34%, var(--color-border));
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--color-warning) 5%, var(--color-surface));
}

main .speaker-safety.container-tool {
    width: min(100% - (var(--page-gutter) * 2), var(--container-max));
    margin-block-end: var(--space-6);
}

.speaker-safety__signal {
    width: var(--space-3);
    height: var(--space-3);
    margin-block-start: 0.4rem;
    border: 2px solid var(--color-warning);
    border-radius: 50%;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning) 12%, transparent);
}

.speaker-safety h2 {
    font-size: var(--text-lg);
    letter-spacing: -0.015em;
}

.speaker-safety p {
    max-width: none;
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.speaker-safety > div {
    min-width: 0;
}

.speaker-copy-section,
.speaker-faq {
    padding-block: var(--section-space);
}

.speaker-copy-section--surface,
.speaker-faq {
    background: color-mix(in srgb, var(--color-cyan) 2%, var(--color-surface));
}

.speaker-copy-section .container-prose h2,
.speaker-split-copy h2,
.speaker-section-header h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}

.speaker-copy-section .container-prose > p,
.speaker-split-copy > div > p {
    margin-block-start: var(--space-5, 1.25rem);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.speaker-split-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(var(--space-8), 6vw, var(--space-20));
}

.speaker-split-copy--weighted {
    grid-template-columns: minmax(0, 1.15fr) minmax(18rem, 0.85fr);
    align-items: start;
}

.speaker-copy-section--high,
.speaker-copy-section--noise {
    padding-block: clamp(var(--space-12), 6vw, var(--space-24));
}

.speaker-high-layout {
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-6);
}

.speaker-high-layout__heading h2,
.speaker-noise-layout__copy h2 {
    font-size: clamp(2rem, 3vw, 3rem);
}

.speaker-high-layout__heading h2 {
    max-width: none;
}

.speaker-high-layout__copy {
    width: 100%;
    max-width: none;
}

.speaker-high-layout__copy p,
.speaker-noise-layout__copy p {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.speaker-high-layout__copy p {
    max-width: none;
}

.speaker-high-layout__copy p + p,
.speaker-noise-layout__copy p {
    margin-block-start: var(--space-5, 1.25rem);
}

.speaker-noise-layout {
    display: grid;
    grid-template-columns: minmax(20rem, 0.9fr) minmax(26rem, 1.1fr);
    align-items: center;
    gap: clamp(var(--space-10, 2.5rem), 7vw, var(--space-20));
}

.speaker-noise-layout__copy {
    max-width: 62ch;
}

.noise-spectrum {
    min-width: 0;
    padding-block: var(--space-6);
    border-block: 1px solid color-mix(in srgb, var(--color-cyan) 30%, var(--color-border));
}

.noise-spectrum__heading {
    margin-block-end: var(--space-5, 1.25rem);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--font-weight-semibold);
}

.noise-spectrum__axis {
    margin-inline-start: 5.5rem;
    margin-block-end: var(--space-3);
    display: flex;
    justify-content: space-between;
    color: var(--color-text-secondary);
    font-family: var(--font-measurement);
    font-size: 0.68rem;
    letter-spacing: 0.04em;
}

.noise-spectrum__row {
    min-width: 0;
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr);
    align-items: center;
    gap: var(--space-4);
}

.noise-spectrum__row + .noise-spectrum__row {
    margin-block-start: var(--space-4);
}

.noise-spectrum__row strong {
    font-size: var(--text-sm);
}

.noise-spectrum__bars {
    height: 2.75rem;
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    align-items: end;
    gap: clamp(0.2rem, 0.6vw, 0.4rem);
}

.noise-spectrum__bars i {
    height: 72%;
    display: block;
    border-radius: var(--radius-xs) var(--radius-xs) 0 0;
    background: color-mix(in srgb, var(--noise-color) 76%, white);
    opacity: 0.82;
}

.noise-spectrum__row--white {
    --noise-color: var(--color-cyan);
}

.noise-spectrum__row--pink {
    --noise-color: #ff62c7;
}

.noise-spectrum__row--brown {
    --noise-color: var(--color-warning);
}

.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(1) { height: 100%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(2) { height: 94%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(3) { height: 87%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(4) { height: 80%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(5) { height: 73%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(6) { height: 66%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(7) { height: 59%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(8) { height: 52%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(9) { height: 45%; }
.noise-spectrum__row--pink .noise-spectrum__bars i:nth-child(10) { height: 38%; }

.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(1) { height: 100%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(2) { height: 86%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(3) { height: 72%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(4) { height: 59%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(5) { height: 48%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(6) { height: 38%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(7) { height: 30%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(8) { height: 23%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(9) { height: 18%; }
.noise-spectrum__row--brown .noise-spectrum__bars i:nth-child(10) { height: 14%; }

.speaker-copy-section--phase {
    padding-block: clamp(var(--space-10, 2.5rem), 5vw, var(--space-20));
}

.speaker-phase-layout {
    padding-block-start: var(--space-6);
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: var(--space-6);
    border-block-start: 1px solid color-mix(in srgb, var(--color-mint) 30%, var(--color-border));
}

.speaker-phase-layout__heading h2 {
    max-width: none;
    font-size: clamp(2rem, 3vw, 3rem);
}

.speaker-phase-layout__copy {
    width: 100%;
    max-width: none;
}

.speaker-phase-layout__copy p {
    max-width: none;
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.speaker-phase-layout__copy p + p {
    margin-block-start: var(--space-5, 1.25rem);
}

.speaker-text-link a,
.bass-crosslink a {
    color: var(--color-cyan);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.speaker-bass-section {
    padding-block: clamp(var(--space-8), 5vw, var(--space-12));
}

.bass-crosslink {
    width: 100%;
    padding: var(--space-6) 0;
    display: grid;
    grid-template-columns: minmax(18rem, 0.8fr) minmax(0, 1.35fr) auto;
    align-items: center;
    gap: clamp(var(--space-6), 4vw, var(--space-12));
    border-block: 1px solid var(--color-border);
}

.bass-crosslink h3 {
    max-width: 22ch;
    font-size: clamp(1.5rem, 2.2vw, 2rem);
}

.bass-crosslink p {
    color: var(--color-text-secondary);
}

.bass-crosslink a {
    min-height: 3rem;
    padding-inline: var(--space-4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--color-cyan) 48%, var(--color-border));
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-cyan) 6%, transparent);
    white-space: nowrap;
}

.bass-crosslink a:hover {
    border-color: var(--color-cyan);
    background: color-mix(in srgb, var(--color-cyan) 12%, transparent);
}

.speaker-section-header {
    max-width: 52rem;
    margin-block-end: var(--space-10, 2.5rem);
}

.speaker-section-header > p {
    margin-block-start: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

.speaker-steps {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-12);
    list-style: none;
}

.speaker-steps li {
    padding-block: var(--space-6);
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: var(--space-4);
    border-block-start: 1px solid var(--color-border);
}

.speaker-steps li > span {
    color: var(--color-cyan);
    font-family: var(--font-measurement);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-bold);
    font-variant-numeric: tabular-nums;
}

.speaker-steps h3 {
    font-size: var(--text-lg);
}

.speaker-steps p {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.speaker-result-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border-block-start: 1px solid var(--color-border);
}

.speaker-result-table th,
.speaker-result-table td {
    padding: var(--space-4) var(--space-5, 1.25rem);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-align: start;
    vertical-align: top;
}

.speaker-result-table thead th {
    color: var(--color-cyan);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.speaker-result-table tbody th {
    width: 24%;
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.speaker-limits {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-12);
}

.speaker-limits > div {
    padding-block: var(--space-6);
    border-block: 1px solid var(--color-border);
}

.speaker-limits h3 {
    font-size: var(--text-2xl);
}

.speaker-limits ul {
    margin: var(--space-5, 1.25rem) 0 0;
    padding-inline-start: 1.15rem;
}

.speaker-limits li {
    color: var(--color-text-secondary);
}

.speaker-limits li + li {
    margin-block-start: var(--space-3);
}

.speaker-limit-note {
    max-width: 62rem;
    margin-block-start: var(--space-8);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
}

.speaker-troubleshooting-layout {
    display: grid;
    grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.28fr);
    align-items: start;
    gap: clamp(var(--space-8), 6vw, var(--space-16));
}

.speaker-troubleshooting-layout .speaker-section-header {
    margin: 0;
    position: sticky;
    top: calc(var(--space-20) + var(--space-6));
}

.speaker-troubleshooting-list,
.speaker-faq__list {
    border-block-start: 1px solid var(--color-border);
}

.speaker-troubleshooting-list details,
.speaker-faq__list details {
    border-block-end: 1px solid var(--color-border);
}

.speaker-troubleshooting-list summary,
.speaker-faq__list summary {
    min-height: 4.5rem;
    padding-block: var(--space-4);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.5rem;
    align-items: center;
    gap: var(--space-4);
    color: var(--color-text);
    font-weight: var(--font-weight-semibold);
    list-style: none;
    cursor: pointer;
}

.speaker-troubleshooting-list summary::marker,
.speaker-troubleshooting-list summary::-webkit-details-marker,
.speaker-faq__list summary::marker,
.speaker-faq__list summary::-webkit-details-marker {
    content: "";
    display: none;
}

.speaker-troubleshooting-list summary > span:last-child,
.speaker-faq__list summary > span:last-child {
    width: 2.25rem;
    height: 2.25rem;
    display: grid;
    place-items: center;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    color: var(--color-cyan);
    font-size: var(--text-xl);
    font-weight: var(--font-weight-regular);
}

.speaker-troubleshooting-list details[open] summary > span:last-child,
.speaker-faq__list details[open] summary > span:last-child {
    transform: rotate(45deg);
}

.speaker-troubleshooting-list details p,
.speaker-faq__list details p {
    max-width: none;
    padding: var(--space-1) 4.25rem var(--space-6) 0;
    color: var(--color-text-secondary);
}

.speaker-related-tools {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-block-start: 1px solid var(--color-border);
}

.speaker-related-tools a {
    min-height: 10rem;
    padding: var(--space-6);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-content: start;
    gap: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.speaker-related-tools a:not(:nth-child(3n)) {
    border-inline-end: 1px solid var(--color-border);
}

.speaker-related-tools strong {
    font-family: var(--font-display);
    font-size: var(--text-lg);
}

.speaker-related-tools span {
    grid-column: 1 / -1;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.speaker-related-tools i {
    color: var(--color-cyan);
    font-style: normal;
    transition: transform var(--duration-fast) var(--ease-standard);
}

.speaker-related-tools a:hover {
    background: color-mix(in srgb, var(--color-cyan) 4%, transparent);
}

.speaker-related-tools a:hover i {
    transform: translateX(var(--space-1));
}

.speaker-faq__list {
    columns: 2;
    column-gap: var(--space-12);
}

.speaker-faq__list details {
    break-inside: avoid;
}

.speaker-faq__close {
    max-width: 56rem;
    margin-block-start: var(--space-10, 2.5rem);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
}

@keyframes speaker-channel-wave {
    0% { opacity: 0; transform: scale(0.45); }
    45% { opacity: 0.8; }
    100% { opacity: 0; transform: scale(1.85); }
}

@keyframes speaker-sweep-trace {
    from { stroke-dashoffset: 1; }
    to { stroke-dashoffset: 0; }
}

@media (max-width: 64rem) {
    .speaker-tool__header--split,
    .speaker-split-copy--weighted,
    .speaker-troubleshooting-layout {
        align-items: flex-start;
        grid-template-columns: 1fr;
    }

    .speaker-tool__header--split {
        flex-direction: column;
        gap: var(--space-4);
    }

    .high-frequency-caution {
        max-width: 60ch !important;
        width: 100%;
        flex: 0 1 auto;
    }

    .speaker-tool__primary-footer {
        grid-template-columns: minmax(12rem, 0.8fr) minmax(15rem, 1.2fr);
    }

    .speaker-stop {
        grid-column: 1 / -1;
    }

    .speaker-troubleshooting-layout .speaker-section-header {
        position: static;
    }

    .speaker-noise-layout {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .speaker-noise-layout__copy {
        max-width: 70ch;
    }
}

@media (max-width: 50rem) {
    .speaker-tools__grid,
    .speaker-split-copy,
    .speaker-phase-layout,
    .speaker-high-layout,
    .speaker-steps,
    .speaker-limits,
    .speaker-related-tools {
        grid-template-columns: 1fr;
    }

    .speaker-tool--high {
        grid-column: auto;
    }

    .channel-stage {
        min-height: auto;
    }

    .speaker-tool__primary-footer {
        grid-template-columns: 1fr;
    }

    .speaker-stop {
        grid-column: auto;
        width: 100%;
    }

    .high-frequency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .speaker-phase-layout__heading h2 {
        max-width: 18ch;
    }

    .speaker-high-layout__heading h2 {
        max-width: 18ch;
    }

    .bass-crosslink {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .bass-crosslink h3 {
        max-width: 24ch;
    }

    .bass-crosslink a {
        width: fit-content;
    }

    .speaker-related-tools a:not(:nth-child(3n)) {
        border-inline-end: 0;
    }

    .speaker-faq__list {
        columns: 1;
    }

    .speaker-result-table thead {
        display: none;
    }

    .speaker-result-table,
    .speaker-result-table tbody,
    .speaker-result-table tr,
    .speaker-result-table th,
    .speaker-result-table td {
        width: 100%;
        display: block;
    }

    .speaker-result-table tr {
        padding-block: var(--space-5, 1.25rem);
        border-block-end: 1px solid var(--color-border);
    }

    .speaker-result-table th,
    .speaker-result-table td {
        padding: var(--space-2) 0;
        border: 0;
    }

    .speaker-result-table th::before,
    .speaker-result-table td::before {
        content: attr(data-label);
        margin-block-end: var(--space-1);
        display: block;
        color: var(--color-cyan);
        font-size: 0.68rem;
        font-weight: var(--font-weight-bold);
        letter-spacing: 0.07em;
        text-transform: uppercase;
    }
}

@media (max-width: 40rem) {
    .speaker-hero {
        padding-block: var(--space-8) var(--space-5, 1.25rem);
    }

    .speaker-tools {
        padding-block-end: var(--space-6);
    }

    .speaker-tool {
        border-radius: var(--radius-lg);
    }

    .speaker-tool__header--primary {
        align-items: flex-start;
        flex-direction: column;
    }

    .speaker-console__state {
        max-width: 100%;
    }

    .speaker-console__state span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .channel-stage {
        grid-template-columns: 1fr;
        background: radial-gradient(circle at center, color-mix(in srgb, var(--color-cyan) 5%, transparent), transparent 44%);
    }

    .channel-control {
        min-height: 8rem;
    }

    .speaker-tool__primary-footer {
        padding-block: var(--space-5, 1.25rem);
    }

    .speaker-intro__copy {
        grid-template-columns: 1fr;
        gap: var(--space-4);
    }

    .noise-spectrum__axis {
        margin-inline-start: 4.75rem;
    }

    .noise-spectrum__row {
        grid-template-columns: 3.75rem minmax(0, 1fr);
        gap: var(--space-3);
    }

    .noise-spectrum__bars {
        height: 2.25rem;
        gap: 0.18rem;
    }

    .phase-controls,
    .tone-grid,
    .noise-controls {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .noise-control:last-child {
        grid-column: 1 / -1;
    }

    .speaker-tool--high .speaker-tool__header {
        margin-block-end: var(--space-4);
    }

    .high-frequency-caution {
        padding-inline-start: var(--space-3);
    }

    .high-frequency-grid button {
        min-height: 5.5rem;
        padding: var(--space-3);
    }

    .speaker-intro__lead,
    .speaker-copy-section .container-prose > p,
    .speaker-split-copy > div > p,
    .speaker-section-header > p {
        font-size: var(--text-base);
    }

    .speaker-troubleshooting-list details p,
    .speaker-faq__list details p {
        padding-inline-end: 0;
    }

    .speaker-transport__inner {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .speaker-transport button {
        min-width: 4.5rem;
        padding-inline: var(--space-3);
    }
}

@media (max-width: 23rem) {
    .phase-controls,
    .tone-grid,
    .noise-controls,
    .high-frequency-grid {
        grid-template-columns: 1fr;
    }

    .noise-control:last-child {
        grid-column: auto;
    }
}

@media (hover: none) {
    .channel-control:hover,
    .phase-controls button:hover,
    .tone-grid button:hover,
    .noise-control:hover,
    .high-frequency-grid button:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .channel-control[aria-pressed="true"] .channel-control__waves i {
        animation: none;
        opacity: 0.72;
    }

    .speaker-related-tools i,
    .speaker-transport {
        transition-duration: 0.01ms;
    }

    .speaker-tool--sweep:has(.sweep-button[aria-pressed="true"]) .sweep-visual__progress {
        animation: none;
        stroke-dashoffset: 0;
    }

}