.synth-shell {
  min-height: calc(100svh - 72px);
  padding: clamp(24px, 4vw, 60px);
  background:
    radial-gradient(circle at 88% 10%, rgba(255,42,168,.18), transparent 26rem),
    radial-gradient(circle at 4% 82%, rgba(74,224,116,.16), transparent 31rem),
    linear-gradient(rgba(85,222,244,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(85,222,244,.035) 1px, transparent 1px),
    var(--black);
  background-size: auto, auto, 34px 34px, 34px 34px, auto;
}

.synth-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(24px, 4vw, 48px); }
.synth-header p { margin: 0 0 12px; color: var(--cyan); font-size: .7rem; font-weight: 800; }
.synth-header h1 { margin: 0; font-size: clamp(4rem, 9vw, 9rem); font-weight: 950; letter-spacing: -.095em; line-height: .66; text-shadow: 7px 4px 0 var(--pink), -4px -2px 0 var(--cyan); }
.synth-header h1 span { display: block; }
.synth-header .lab-return { margin-bottom: 24px; }
.power-state { min-width: 175px; padding: 13px 15px; display: flex; align-items: center; gap: 10px; border: 1px solid #393844; background: #08080c; color: var(--muted); font: 800 .65rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.power-state i { width: 9px; height: 9px; border-radius: 50%; background: #5a5862; box-shadow: 0 0 0 3px #25242b; }
body.audio-live .power-state { color: var(--toxic); border-color: rgba(131,243,157,.55); }
body.audio-live .power-state i { background: var(--toxic); box-shadow: 0 0 14px var(--toxic); animation: power-pulse 1s steps(2) infinite; }

.synth-panel {
  padding: clamp(12px, 2vw, 24px);
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, .75fr);
  grid-template-areas:
    "scope engine"
    "patch engine"
    "keys keys"
    "sequence sequence";
  gap: 14px;
  border: 3px solid #34323d;
  background: linear-gradient(145deg, #17151f, #08080d 52%, #0c1410);
  box-shadow: 0 0 0 2px #020203, 0 0 0 4px rgba(85,222,244,.26), 0 36px 90px rgba(0,0,0,.7);
}
.module { min-width: 0; border: 1px solid rgba(255,251,220,.34); background: rgba(4,4,7,.82); }
.module-label { min-height: 38px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-bottom: 1px solid rgba(85,222,244,.37); color: var(--cyan); font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.module-label b { color: var(--toxic); font-weight: 800; }

.scope-module { grid-area: scope; position: relative; min-height: 300px; overflow: hidden; }
#scope { width: 100%; height: 260px; display: block; background: radial-gradient(circle at 50% 50%, rgba(255,42,168,.13), transparent 42%), #030306; }
.scope-scale { position: absolute; inset: 53px 10px 14px 10px; pointer-events: none; display: flex; flex-direction: column; justify-content: space-between; color: #55535d; font: 700 .55rem/1 ui-monospace, monospace; }

.engine-module { grid-area: engine; }
.engine-grid { padding: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 14px; }
.engine-grid label, .octave-control > span { color: #9a98a4; font: 800 .62rem/1.3 ui-monospace, monospace; letter-spacing: .1em; }
.engine-grid label { display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.engine-grid output { color: var(--toxic); }
.engine-grid input[type="range"] { grid-column: 1 / -1; width: 100%; }
select { width: 100%; min-height: 42px; grid-column: 1 / -1; padding: 0 10px; border: 1px solid #44414e; border-radius: 0; background: #08080c; color: var(--cream); font: 800 .7rem/1 ui-monospace, monospace; }
.octave-control > div { min-height: 42px; margin-top: 9px; display: grid; grid-template-columns: 38px 1fr 38px; border: 1px solid #44414e; }
.octave-control button { border: 0; background: #111018; color: var(--cyan); cursor: pointer; font-size: 1.2rem; }
.octave-control b { display: grid; place-items: center; border-inline: 1px solid #44414e; color: var(--cream); font: 900 1rem/1 ui-monospace, monospace; }
.master-control { grid-column: 1 / -1; padding-top: 4px; color: var(--pink) !important; }
input[type="range"] { height: 5px; appearance: none; border: 0; background: linear-gradient(90deg, var(--pink), var(--cyan)); accent-color: var(--toxic); cursor: ew-resize; }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 15px; height: 20px; border: 1px solid var(--cream); border-radius: 0; background: #0a0a0d; box-shadow: 2px 2px 0 var(--pink); }

.patch-module { grid-area: patch; }
.patches { padding: 14px; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 9px; }
.patches button { min-height: 66px; padding: 10px; border: 1px solid #393843; background: #0b0a0f; color: var(--muted); cursor: pointer; font: 850 .63rem/1.25 ui-monospace, monospace; letter-spacing: .08em; }
.patches button:hover, .patches button:focus-visible, .patches button.active { border-color: var(--pink); background: rgba(255,42,168,.12); color: var(--cream); box-shadow: inset 0 -4px 0 var(--pink); }

.keys-module { grid-area: keys; }
.keyboard { height: clamp(190px, 22vw, 290px); padding: 16px; display: grid; grid-template-columns: repeat(13, minmax(30px,1fr)); gap: 5px; background: linear-gradient(#100d14, #050507); }
.key { min-width: 0; padding: 11px 4px; position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; border-radius: 0; cursor: pointer; user-select: none; touch-action: none; }
.key.white { height: 100%; border: 1px solid #d9d2c4; background: linear-gradient(#fffbdc, #c9c2b4); color: #08080b; }
.key.black { height: 64%; z-index: 2; border: 1px solid #423d4a; background: linear-gradient(#15121a, #030304); color: var(--cream); box-shadow: 0 7px 0 #000; }
.key span { font: 900 .76rem/1 ui-monospace, monospace; }
.key small { opacity: .54; font: 750 .58rem/1 ui-monospace, monospace; }
.key.active, .key:active { transform: translateY(4px); background: var(--pink); color: var(--cream); box-shadow: inset 0 0 25px rgba(255,255,255,.25); }

.sequencer-module { grid-area: sequence; }
.transport { padding: 14px; display: grid; grid-template-columns: auto auto auto minmax(180px,1fr); gap: 10px; align-items: center; }
.transport label { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; color: var(--muted); font: 800 .63rem/1 ui-monospace, monospace; letter-spacing: .1em; }
.step-grid { padding: 0 14px 16px; display: grid; grid-template-columns: repeat(16, minmax(28px,1fr)); gap: 6px; }
.step { min-height: 66px; padding: 7px 2px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border: 1px solid #393743; background: #09090c; color: #676571; cursor: pointer; font: 800 .57rem/1 ui-monospace, monospace; }
.step::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #34323b; }
.step[aria-pressed="true"] { border-color: var(--pink); color: var(--cream); background: rgba(255,42,168,.12); }
.step[aria-pressed="true"]::before { background: var(--pink); box-shadow: 0 0 12px var(--pink); }
.step.playing { border-color: var(--yellow); background: rgba(244,241,65,.16); transform: translateY(-3px); }
.step.playing::before { background: var(--yellow); box-shadow: 0 0 14px var(--yellow); }

@keyframes power-pulse { 50% { opacity: .3; } }

@media (max-width: 940px) {
  .synth-panel { grid-template-columns: 1fr; grid-template-areas: "scope" "engine" "patch" "keys" "sequence"; }
  .keyboard { height: 220px; overflow-x: auto; grid-template-columns: repeat(13, minmax(54px,1fr)); }
  .step-grid { overflow-x: auto; grid-template-columns: repeat(16, minmax(48px,1fr)); }
}
@media (max-width: 620px) {
  .synth-shell { padding: 28px 12px; }
  .synth-header { align-items: flex-start; flex-direction: column; }
  .synth-header h1 { font-size: clamp(3.7rem, 19vw, 5.4rem); }
  .power-state { min-width: 0; }
  .synth-panel { padding: 8px; gap: 9px; }
  .scope-module { min-height: 230px; }
  #scope { height: 190px; }
  .engine-grid { padding: 14px 11px; grid-template-columns: 1fr; }
  .master-control { grid-column: auto; }
  .patches { grid-template-columns: 1fr; }
  .keyboard { height: 190px; padding: 10px; }
  .transport { grid-template-columns: 1fr 1fr; }
  .transport label { grid-column: 1 / -1; }
  .transport .lab-button { min-width: 0; padding: 0 8px; }
  #clearPattern { grid-column: 1 / -1; }
}