body.speaker-tester-page {
  color-scheme: light;
  --speaker-page: #f4f6f8;
  --speaker-surface: #ffffff;
  --speaker-surface-soft: #f6f8fa;
  --speaker-border: #d0d7de;
  --speaker-text: #1f2328;
  --speaker-muted: #57606a;
  --speaker-accent: #0969da;
  --speaker-accent-hover: #0757b5;
  --speaker-on-accent: #ffffff;
  --speaker-success: #1a7f37;
  --speaker-danger: #cf222e;
  --speaker-notice-text: #0550ae;
  --speaker-notice-bg: #ddf4ff;
  --speaker-notice-border: #b6e3ff;
  --speaker-stage-bg: #0d1117;
  --speaker-stage-border: #30363d;
  --speaker-stage-text: #f0f6fc;
  --speaker-stage-muted: #9da7b3;
  --speaker-signal: #58a6ff;
  --speaker-signal-soft: rgba(88, 166, 255, 0.2);
  --speaker-chart-grid: rgba(157, 167, 179, 0.18);
  --speaker-shadow: 0 14px 36px rgba(31, 35, 40, 0.07);
  --speaker-content-width: 1240px;
  --speaker-page-gutter: 40px;
  --speaker-mobile-gutter: 20px;
  --speaker-panel-radius: 12px;
  --speaker-control-radius: 8px;
  --speaker-control-height: 38px;
  --speaker-panel-padding: 18px;
  --speaker-panel-gap: 16px;
  --speaker-chart-height: 220px;
  --speaker-page-padding-block: 40px;
  --speaker-page-padding-block-mobile: 22px;
  --speaker-panel-padding-mobile: 14px;
  --speaker-heading-gap: 18px;
  --speaker-control-gap: 8px;
  --speaker-focus-ring: rgba(9, 105, 218, 0.22);
  --speaker-unit-bg: #161b22;
  --speaker-cone-center: #6e7681;
  --speaker-cone-middle: #21262d;
  --speaker-stage-min-height: 260px;
  --speaker-stage-min-height-mobile: 210px;
  --speaker-cone-size: 108px;
  --speaker-cone-size-mobile: min(86px, 22vw);
  --speaker-cone-border-width: 12px;
  --speaker-cone-border-width-mobile: 9px;
  min-block-size: 100vh;
  margin: 0;
  color: var(--speaker-text);
  background: var(--speaker-page);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* Page frame and shared layout primitives */
.speaker-tester,
.speaker-tester * {
  box-sizing: border-box;
}

.speaker-main {
  inline-size: min(var(--speaker-content-width), calc(100% - var(--speaker-page-gutter)));
  margin: 0 auto;
  padding-block: var(--speaker-page-padding-block);
}

.speaker-page-header {
  margin-block-end: 18px;
}

.speaker-page-title,
.speaker-panel-title {
  margin: 0;
}

.speaker-page-title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
}

.speaker-page-description {
  margin-block: 8px 0;
  color: var(--speaker-muted);
  line-height: 1.7;
}

.speaker-tester .breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--speaker-control-gap);
  margin-block-end: 12px;
  color: var(--speaker-muted);
  font-size: 0.9rem;
}

.speaker-tester a {
  color: var(--speaker-accent);
  font-weight: 700;
  text-decoration: none;
}

/* Panels and reusable row layouts */
.speaker-panel-shell {
  border: 1px solid var(--speaker-border);
  border-radius: var(--speaker-panel-radius);
  background: var(--speaker-surface);
  box-shadow: var(--speaker-shadow);
}

.speaker-section-stack > .speaker-panel-shell {
  margin-block-end: var(--speaker-panel-gap);
}

.speaker-notice {
  padding-block: 12px;
  padding-inline: 14px;
  color: var(--speaker-notice-text);
  border-color: var(--speaker-notice-border);
  background: var(--speaker-notice-bg);
  line-height: 1.65;
}

.speaker-panel {
  padding: var(--speaker-panel-padding);
}

.speaker-split-row {
  display: flex;
  justify-content: space-between;
  gap: var(--speaker-heading-gap);
}

.speaker-panel-heading {
  align-items: flex-start;
  margin-block-end: var(--speaker-panel-gap);
}

.speaker-panel-copy {
  min-inline-size: 0;
}

.speaker-panel-title {
  font-size: 1.08rem;
}

.speaker-panel-description {
  margin-block: 6px 0;
  color: var(--speaker-muted);
  line-height: 1.6;
}

.speaker-button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--speaker-control-gap);
}

/* Form controls and action states */
.speaker-tester .speaker-control:is(button, select, input),
.speaker-tester .speaker-range-control:is(input) {
  color: var(--speaker-text);
  font: inherit;
}

.speaker-tester .speaker-control:is(button, select, input) {
  min-block-size: var(--speaker-control-height);
  border: 1px solid var(--speaker-border);
  border-radius: var(--speaker-control-radius);
  background: var(--speaker-surface-soft);
}

.speaker-tester button {
  padding-block: 7px;
  padding-inline: 13px;
  font-weight: 700;
  cursor: pointer;
}

.speaker-tester button.speaker-control:is(:hover, :focus-visible):not(:disabled),
.speaker-tester :is(select.speaker-control, input.speaker-control, input.speaker-range-control):focus-visible {
  border-color: var(--speaker-accent);
  outline: 2px solid var(--speaker-focus-ring);
  outline-offset: 1px;
}

.speaker-tester button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.speaker-tester .speaker-primary-button {
  color: var(--speaker-on-accent);
  border-color: var(--speaker-accent);
  background: var(--speaker-accent);
}

.speaker-tester .speaker-primary-button:is(:hover, :focus-visible):not(:disabled) {
  color: var(--speaker-on-accent);
  background: var(--speaker-accent-hover);
}

/* Playback settings and current status */
.speaker-settings-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, minmax(150px, 1fr));
  gap: 12px;
}

.speaker-setting {
  display: grid;
  align-content: center;
  gap: 7px;
  color: var(--speaker-muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.speaker-setting select,
.speaker-output-setting button {
  inline-size: 100%;
  padding-inline: 10px;
}

.speaker-range-row {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 48px;
  align-items: center;
  gap: 10px;
  min-block-size: var(--speaker-control-height);
}

.speaker-range-row output {
  color: var(--speaker-text);
  font-variant-numeric: tabular-nums;
  text-align: end;
}

.speaker-safety-text {
  margin-block: 10px 0;
  color: var(--speaker-muted);
  font-size: 0.84rem;
}

.speaker-status-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-block-start: 14px;
  overflow: hidden;
  border: 1px solid var(--speaker-border);
  border-radius: var(--speaker-control-radius);
}

.speaker-status-card {
  min-inline-size: 0;
  padding: 12px 14px;
  border-inline-end: 1px solid var(--speaker-border);
}

.speaker-status-card--last {
  border-inline-end: 0;
}

.speaker-status-card span {
  display: block;
  color: var(--speaker-muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.speaker-status-card strong {
  display: block;
  margin-block-start: 5px;
  overflow-wrap: anywhere;
  font-size: 1rem;
}

/* Left/right channel visualization */
.speaker-stage {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) 48px minmax(150px, 1fr);
  align-items: center;
  gap: 24px;
  min-block-size: var(--speaker-stage-min-height);
  padding: 28px;
  color: var(--speaker-stage-text);
  border: 1px solid var(--speaker-stage-border);
  border-radius: var(--speaker-control-radius);
  background:
    radial-gradient(circle at center, var(--speaker-signal-soft), transparent 42%),
    var(--speaker-stage-bg);
}

.speaker-unit {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 20px;
  color: var(--speaker-stage-muted);
  border: 1px solid var(--speaker-stage-border);
  border-radius: 16px;
  background: var(--speaker-unit-bg);
  transition:
    color 0.12s ease,
    border-color 0.12s ease,
    box-shadow 0.12s ease;
}

.speaker-unit.is-active {
  color: var(--speaker-stage-text);
  border-color: var(--speaker-signal);
  box-shadow: 0 0 0 4px var(--speaker-signal-soft), 0 0 28px var(--speaker-signal-soft);
}

.speaker-cone {
  inline-size: var(--speaker-cone-size);
  aspect-ratio: 1;
  border: var(--speaker-cone-border-width) solid var(--speaker-stage-border);
  border-radius: 50%;
  background:
    radial-gradient(
      circle,
      var(--speaker-cone-center) 0 17%,
      var(--speaker-cone-middle) 18% 55%,
      var(--speaker-stage-bg) 56%
    );
}

.speaker-unit.is-active .speaker-cone {
  border-color: var(--speaker-signal);
}

.speaker-listener {
  color: var(--speaker-signal);
  font-size: 1.5rem;
  text-align: center;
}

.speaker-test-buttons {
  justify-content: center;
  margin-block-start: 14px;
}

.speaker-balance {
  display: grid;
  gap: 6px;
  margin-block-start: 16px;
  color: var(--speaker-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.speaker-balance-labels {
  display: flex;
  justify-content: space-between;
}

/* Frequency, noise, and phase test layouts */
.speaker-frequency-controls {
  display: grid;
  grid-template-columns: 180px minmax(240px, 1fr) 80px;
  align-items: end;
  gap: 14px;
}

.speaker-frequency-number,
.speaker-frequency-slider {
  display: grid;
  gap: 6px;
  color: var(--speaker-muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.speaker-frequency-number > span {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--speaker-control-gap);
}

.speaker-frequency-number input {
  inline-size: 100%;
  padding-inline: 10px;
}

.speaker-frequency-controls output {
  min-block-size: var(--speaker-control-height);
  color: var(--speaker-text);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.speaker-frequency-presets {
  margin-block-start: 14px;
}

.speaker-frequency-presets button {
  min-inline-size: 64px;
}

.speaker-sweep-row {
  align-items: center;
  margin-block-start: 16px;
  padding-block-start: 14px;
  border-block-start: 1px solid var(--speaker-border);
}

.speaker-sweep-row span {
  display: block;
  margin-block-start: 4px;
  color: var(--speaker-muted);
  font-size: 0.86rem;
}

.speaker-two-column-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--speaker-panel-gap);
}

.speaker-test-pair {
  margin-block-end: var(--speaker-panel-gap);
}

/* Signal charts, safety guidance, and status messages */
.speaker-canvas-grid figure {
  min-inline-size: 0;
  margin: 0;
}

.speaker-canvas-grid figcaption {
  margin-block-end: 8px;
  color: var(--speaker-muted);
  font-weight: 700;
}

.speaker-canvas-grid canvas {
  display: block;
  inline-size: 100%;
  block-size: var(--speaker-chart-height);
  border: 1px solid var(--speaker-stage-border);
  border-radius: var(--speaker-control-radius);
  background: var(--speaker-stage-bg);
}

.speaker-guide-list {
  margin-block: 0;
  padding-inline-start: 24px;
  color: var(--speaker-muted);
  line-height: 1.75;
}

.speaker-message {
  min-block-size: 44px;
  margin: 0;
  padding: 12px 16px;
  color: var(--speaker-muted);
  border: 1px solid var(--speaker-border);
  border-radius: var(--speaker-control-radius);
  background: var(--speaker-surface-soft);
}

.speaker-message[data-type="success"] {
  color: var(--speaker-success);
}

.speaker-message[data-type="error"] {
  color: var(--speaker-danger);
  font-weight: 700;
}

.speaker-visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Responsive layout adjustments */
@media (max-width: 900px) {
  .speaker-settings-grid,
  .speaker-status-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .speaker-status-card--tablet-row-end {
    border-inline-end: 0;
  }

  .speaker-status-card--tablet-first-row {
    border-block-end: 1px solid var(--speaker-border);
  }
}

@media (max-width: 700px) {
  .speaker-main {
    inline-size: calc(100% - var(--speaker-mobile-gutter));
    padding-block: var(--speaker-page-padding-block-mobile);
  }

  .speaker-panel {
    padding: var(--speaker-panel-padding-mobile);
  }

  .speaker-split-row {
    align-items: stretch;
    flex-direction: column;
  }

  .speaker-actions > button,
  .speaker-sweep-row button {
    flex: 1;
  }

  .speaker-settings-grid,
  .speaker-status-grid,
  .speaker-two-column-grid,
  .speaker-frequency-controls {
    grid-template-columns: 1fr;
  }

  .speaker-status-card {
    border-inline-end: 0;
    border-block-end: 1px solid var(--speaker-border);
  }

  .speaker-status-card--last {
    border-block-end: 0;
  }

  .speaker-stage {
    grid-template-columns: 1fr 24px 1fr;
    gap: var(--speaker-control-gap);
    min-block-size: var(--speaker-stage-min-height-mobile);
    padding: var(--speaker-panel-padding-mobile);
  }

  .speaker-unit {
    padding: var(--speaker-panel-padding-mobile) var(--speaker-control-gap);
  }

  .speaker-cone {
    inline-size: var(--speaker-cone-size-mobile);
    border-width: var(--speaker-cone-border-width-mobile);
  }

  .speaker-frequency-controls output {
    min-block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .speaker-unit {
    transition: none;
  }
}