.eq-page .hero { max-width: 860px; padding-bottom: 32px; }
.eq-page .hero h1 { max-width: 20ch; }
.eq-demo { margin-bottom: 44px; padding: 32px; border: 1px solid #426166; border-radius: 15px; background: linear-gradient(145deg, #223034, #242424 48%); }
.eq-demo-heading { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-bottom: 15px; }
.eq-demo-heading .eyebrow { margin-bottom: 9px; font-size: 10px; }
.eq-demo-heading h2 { margin-bottom: 0; }
.eq-badge { flex-shrink: 0; border: 1px solid #48767a; border-radius: 100px; padding: 6px 12px; color: #9ae4e8; font-size: 12px; font-weight: 650; }
.eq-demo #demo-instructions { max-width: none; font-size: 15px; }
.eq-transport { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 4px; }
.eq-transport #eq-play { min-width: 145px; }
.eq-demo button:disabled { opacity: .5; cursor: default; }
.eq-demo #eq-toggle[aria-pressed="true"] { border-color: #46c8d1; color: #9ff3f8; background: #234448; }
.eq-track { display: flex; flex-direction: column; margin-left: 8px; line-height: 1.5; }
.eq-track strong { font-size: 14px; }
.eq-track span { color: #adbabc; font-size: 12px; }
.eq-playback { display: flex; align-items: center; gap: 12px; margin-top: 17px; }
.eq-playback progress { appearance: none; width: 100%; min-width: 0; height: 4px; background: #425054; color: #64dbe3; border: none; border-radius: 10px; overflow: hidden; }
.eq-playback progress::-webkit-progress-bar { background: #425054; }
.eq-playback progress::-webkit-progress-value { background: #64dbe3; }
.eq-playback progress::-moz-progress-bar { background: #64dbe3; }
#eq-time { flex-shrink: 0; min-width: 80px; color: #b9c6c8; font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.eq-demo .eq-status { margin: 9px 0 19px; min-height: 23px; font-size: 12px; color: #b9c6c8; }
.eq-chart { padding: 16px 18px 3px; background: #161e20; border: 1px solid #3f5054; border-radius: 10px; margin-bottom: 23px; overflow: hidden; }
.eq-chart-label { display: flex; justify-content: space-between; gap: 10px; color: #b7c4c6; font-size: 11px; }
#eq-curve-state { color: #7ee3eb; }
.eq-chart svg { display: block; width: 100%; height: auto; max-height: 192px; overflow: hidden; }
.eq-chart text { fill: #aababc; font: 10px system-ui, sans-serif; }
.eq-grid { fill: none; stroke: #35464a; stroke-width: 1; }
#eq-response { fill: none; stroke: #50d5df; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.eq-chart.is-bypassed #eq-response { stroke: #a2b5b7; stroke-dasharray: 5 4; }
.eq-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px 24px; padding: 0; border: 0; margin: 0 0 7px; }
.eq-controls legend { margin-bottom: 13px; color: #dce7e8; font-size: 13px; font-weight: 600; }
.eq-band { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 6px; padding: 11px 13px 0; border: 1px solid #4b585b; border-radius: 9px; background: #20282a; }
.eq-band label { display: flex; flex-direction: column; cursor: pointer; line-height: 1.5; }
.eq-band strong { font-size: 13px; }
.eq-band label span { color: #aebec1; font-size: 11px; }
.eq-band output { color: #82e4eb; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.eq-band input[type="range"] { grid-column: 1 / -1; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; accent-color: #54d4dd; cursor: pointer; }
.eq-band input[type="range"]::-webkit-slider-runnable-track { height: 4px; background: #577276; border-radius: 3px; }
.eq-band input[type="range"]::-webkit-slider-thumb { appearance: none; width: 19px; height: 19px; border: 3px solid #20282a; border-radius: 50%; background: #63e0e8; box-shadow: 0 0 0 1px #63e0e8; margin-top: -7.5px; }
.eq-band input[type="range"]::-moz-range-track { height: 4px; background: #577276; border-radius: 3px; }
.eq-band input[type="range"]::-moz-range-thumb { width: 13px; height: 13px; border: 3px solid #20282a; border-radius: 50%; background: #63e0e8; box-shadow: 0 0 0 1px #63e0e8; }
.eq-demo #eq-keyboard-help { font-size: 11px; margin-bottom: 20px; }
.eq-examples > span { display: block; margin-bottom: 9px; font-size: 12px; color: #c1cdd0; }
.eq-preset-buttons { display: flex; gap: 9px; flex-wrap: nowrap; }
.eq-preset-buttons .button { min-height: 44px; padding: 8px 12px; font-size: 12px; }
.eq-label-full { white-space: nowrap; }
.eq-label-short { display: none; white-space: nowrap; }
.eq-demo .eq-demo-note { font-size: 11px; margin: 13px 0 17px; }
.eq-demo .eq-credit { max-width: none; padding-top: 16px; margin-bottom: 0; border-top: 1px solid #485557; font-size: 11px; }
.eq-demo .eq-credit p { margin: 0; font-size: 12px; }
.eq-credit-links { display: flex; flex-wrap: nowrap; gap: 10px; margin: 10px 0; }
.eq-credit-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 7px 12px; border: 1px solid #56666a; border-radius: 6px; white-space: nowrap; font-size: 12px; text-decoration: none; }
.eq-credit-links a:hover { background: #2b3b3e; border-color: #64dbe3; }
.eq-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media (max-width: 680px) {
  .eq-demo { padding: 22px 18px; margin-bottom: 30px; }
  .eq-demo-heading { gap: 12px; align-items: flex-start; }
  .eq-demo-heading h2 { font-size: 25px; }
  .eq-badge { font-size: 10px; padding: 5px 8px; }
  .eq-demo #demo-instructions { font-size: 14px; }
  .eq-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .eq-track { flex-basis: 100%; margin-left: 0; margin-top: 2px; }
  .eq-chart { padding: 13px 10px 0; }
  .eq-chart-label { font-size: 10px; }
  .eq-chart svg { min-height: 104px; }
  .eq-demo .eq-status { font-size: 11px; }
  .eq-preset-buttons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
  .eq-preset-buttons .button { min-width: 0; padding: 8px 3px; font-size: 12px; }
  .eq-label-full { display: none; }
  .eq-label-short { display: inline; }
}
@media (max-width: 360px) {
  .eq-demo-heading { flex-direction: column; }
  .eq-band { padding-inline: 9px; }
  .eq-transport { gap: 8px; }
  .eq-transport #eq-play { min-width: 0; }
  .eq-preset-buttons .button { font-size: 11px; }
  .eq-credit-links { gap: 8px; }
  .eq-credit-links a { padding-inline: 10px; }
}