* {
        box-sizing: border-box;
      }
      html,
      body {
        margin: 0;
        min-height: 100%;
      }
      body {
        background: #1511b9;
        color: #000;
        font-family: var(--synth-font);
        overflow-x: hidden;
        transition: background-color 0.12s linear;
      }
      .background {
        position: fixed;
        inset: 0;
        z-index: 0;
        overflow: hidden;
        pointer-events: none;
      }
      .background span {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        white-space: nowrap;
        font-size: clamp(120px, 20vw, 350px);
        font-weight: 400;
        letter-spacing: -0.085em;
        line-height: 0.72;
        color: #000;
      }
      .background .top {
        top: -24px;
      }
      .background .bottom {
        bottom: -20px;
      }
      .synth {
        position: relative;
        z-index: 1;
        width: min(94vw, 1440px);
        min-height: 100vh;
        margin: auto;
        padding: 10vh 0 7vh;
        display: grid;
        grid-template-columns: 1.1fr 1.1fr 0.84fr;
        grid-template-rows: minmax(325px, 1fr) minmax(310px, 0.86fr);
        gap: 18px;
      }
      .module {
        padding: 30px 34px;
        min-width: 0;
      }
      .lead {
        background: #d900f5;
      }
      .bass {
        background: #ff3513;
      }
      .drums {
        background: #ff0873;
        grid-area: 1/3/3/4;
      }
      .fx {
        background: #ffd900;
      }
      .output {
        background: #f5f5f3;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
      h2 {
        margin: 0 0 29px;
        text-align: center;
        font-size: clamp(42px, 4.5vw, 74px);
        font-weight: 400;
        letter-spacing: -0.07em;
        line-height: 0.9;
      }
      .lead h2 {
        color: #ff623f;
      }
      .bass h2 {
        color: #a900ff;
      }
      .drums h2 {
        color: #5f86ff;
      }
      .fx h2 {
        color: #ff66bd;
      }
      .label {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        letter-spacing: 0.05em;
        margin: 18px 0 8px;
      }
      .styles {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 7px;
      }
      .styles button,
      .toggle,
      .transport button {
        border: 2px solid #000;
        border-radius: 0;
        background: transparent;
        color: #000;
        font: inherit;
        font-size: 13px;
        cursor: pointer;
        padding: 12px 5px;
      }
      .styles button.active,
      .toggle.active,
      .transport button.active {
        background: #000;
        color: #fff;
      }
      .toggle.active {
        color: #ffd900;
      }
      .drums .toggle.active {
        color: #ff0873;
      }
      .toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        gap: 6px;
        padding: 12px 10px;
        min-height: 54px;
      }
      .toggle small {
        font-size: 11px;
      }
      .toggles {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }
      .slider {
        width: 100%;
        accent-color: #000;
        cursor: pointer;
      }
      .fx .hint {
        margin-top: 52px;
        font-size: clamp(18px, 2vw, 27px);
        line-height: 1.1;
        opacity: 1;
      }
      .hint {
        font-size: 12px;
        line-height: 1.4;
        opacity: 0.78;
        margin-top: 18px;
      }
      .meter {
        height: 76px;
        display: flex;
        gap: 8px;
        align-items: flex-end;
        margin-top: 18px;
      }
      .bar {
        height: 5px;
        flex: 1;
        background: #000;
      }
      .info {
        display: flex;
        justify-content: space-between;
        align-items: end;
        font-size: 13px;
      }
      .bpm {
        font-size: 35px;
        letter-spacing: -0.07em;
      }
      .status {
        font-size: 12px;
        margin: 12px 0;
      }
      .transport {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 9px;
      }
      .transport button {
        font-size: 17px;
        padding: 15px;
      }
      .styles button:focus-visible,
      .toggle:focus-visible,
      .transport button:focus-visible {
        outline: 3px solid #000;
        outline-offset: 3px;
      }
      @media (max-width: 950px) {
        .synth {
          grid-template-columns: 1fr 1fr;
          grid-template-rows: auto;
          padding: 65px 0;
        }
        .drums {
          grid-area: auto;
        }
        /* On tablet widths, OUTPUT occupies the whole grid row. */
        .output {
          grid-column: 1 / -1;
          width: 100%;
        }
        .module {
          min-height: 300px;
        }
      }
      @media (max-width: 620px) {
        .synth {
          display: flex;
          flex-direction: column;
          width: calc(100% - 28px);
          gap: 12px;
          padding: 30px 0;
        }
        .module {
          min-height: 0;
          padding: 28px;
        }
        .background span {
          font-size: 165px;
        }
        h2 {
          font-size: 56px;
        }
      }
      @media (prefers-reduced-motion: reduce) {
        body {
          transition: none;
        }
      }

      /* Sharp black sliders and uppercase labels, matching the reference */
      .label {
        font-size: clamp(17px, 2vw, 25px);
        letter-spacing: 0;
        font-weight: 400;
        margin: 22px 0 22px;
      }
      .slider {
        display: block;
        width: 100%;
        height: 36px;
        margin: 0 0 42px;
        padding: 0;
        background: transparent;
        appearance: none;
        -webkit-appearance: none;
        border: 0;
        border-radius: 0;
        cursor: pointer;
        accent-color: #000;
      }
      .slider::-webkit-slider-runnable-track {
        height: 6px;
        background: #000;
        border: 0;
        border-radius: 0;
      }
      .slider::-moz-range-track {
        height: 6px;
        background: #000;
        border: 0;
        border-radius: 0;
      }
      .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 36px;
        height: 36px;
        background: #000;
        border: 0;
        border-radius: 0;
        margin-top: -15px;
      }
      .slider::-moz-range-thumb {
        width: 36px;
        height: 36px;
        background: #000;
        border: 0;
        border-radius: 0;
      }
      .hint {
        font-size: clamp(15px, 1.5vw, 21px);
        font-weight: 400;
        line-height: 1.25;
        opacity: 1;
        text-transform: uppercase;
        margin: 0;
        letter-spacing: -0.025em;
      }

      /* Cyan spinning badge below the DRUMS caption */
      .drum-disc {
        width: min(100%, 220px);
        aspect-ratio: 1;
        margin: 34px auto 0;
        border-radius: 50%;
        background: #00FBFF;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
      }
      .drum-disc-word {
        display: block;
        font-size: clamp(25px, 3vw, 42px);
        letter-spacing: -.06em;
        font-weight: 400;
        line-height: 1;
        transform-origin: center;
      }
      body.music-playing .drum-disc-word {
        animation: drum-word-spin 2s linear infinite;
      }
      @keyframes drum-word-spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
      }
      @media (max-width: 620px) {
        .drum-disc { width: 190px; margin-top: 30px; }
      }

button, input { font-family: var(--synth-font); }