:root {
  color-scheme:dark;
  --bg:#111315;
  --panel:#222527;
  --deep:#111315;
  --line:#060708;
  --text:#dddcd6;
  --muted:#91938e;
  --amber:#ffb331;
  --red:#ef3024;
  --orange:#f38327;
  --green:#b4d486;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  background:radial-gradient(ellipse at 50% 0,#292c2c 0,#17191b 48%,#0c0e10 100%);
  color:var(--text);
  font:12px var(--sans);
  min-height:100vh;
}

button,input,select {
  font:inherit;
}

button,select {
  cursor:pointer;
}

button {
  color:#bfc1bb;
  background:linear-gradient(#393d3e,#222526);
  border:1px solid #080a0b;
  border-radius:3px;
  box-shadow:inset 0 1px #ffffff12,0 1px 2px #0007;
  padding:6px 9px;
  font:10px var(--mono);
  letter-spacing:.03em;
  white-space:nowrap;
}

button:hover {
  color:#fff;
  background:linear-gradient(#494c4a,#2a2d2c);
}

button:active {
  transform:translateY(1px);
}

button.active,button[aria-pressed=true] {
  color:#1b1308;
  background:linear-gradient(#ffca60,#e89b26);
  box-shadow:inset 0 1px #ffe19a,0 0 8px #ffad2420;
}

button:disabled {
  opacity:.35;
  cursor:default;
}

input,select {
  border:1px solid #090b0c;
  background:#141718;
  color:#d4d5cb;
  border-radius:3px;
  padding:5px 6px;
  min-width:0;
}

input:focus-visible,select:focus-visible,button:focus-visible {
  outline:2px solid var(--amber);
  outline-offset:3px;
}

input[type=range] {
  padding:0;
  accent-color:var(--amber);
  height:12px;
  cursor:ew-resize;
  width:100%;
}

label {
  font:9px var(--mono);
  letter-spacing:.12em;
  color:var(--muted);
}

h1,h2,h3,p {
  margin:0;
}

h2 {
  font:11px var(--mono);
  font-weight:700;
  letter-spacing:.13em;
}

h3 {
  font:10px var(--mono);
  letter-spacing:.12em;
}

output {
  font:9px var(--mono);
}

.studio {
  max-width:1550px;
  margin:auto;
  padding:28px 28px 16px;
}

.masthead,.outside-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:9px var(--mono);
  letter-spacing:.14em;
  color:#8a8f8c;
  padding:0 5px 14px;
}

.masthead b {
  color:var(--amber);
  margin-left:12px;
}

.rack {
  border-radius:9px;
  padding:0 20px;
  background:repeating-linear-gradient(91deg,#0000 0 2px,#0002 2px 3px),linear-gradient(90deg,#321a12,#6e3824 1%,#2b1913 1.6%,#382217 2%,#503021 98%,#2a1811 98.7%,#70412d 99%,#301b12);
  box-shadow:0 22px 70px #0009,0 2px 5px #000,inset 1px 0 #a56a4450,inset -1px 0 #a56a4450;
  border:1px solid #19100a;
}

.panel {
  background:repeating-linear-gradient(0deg,#ffffff02 0 1px,transparent 1px 3px),linear-gradient(115deg,#2b2e2e,#1a1d1f);
  border:1px solid #080a0a;
  box-shadow:inset 0 1px #ffffff10,0 1px 2px #0008;
  border-radius:3px;
  position:relative;
}

.panel:before,.panel:after {
  content:'−';
  position:absolute;
  top:8px;
  width:8px;
  height:8px;
  border-radius:100%;
  background:linear-gradient(135deg,#777b77,#292c29);
  color:#161814;
  font:9px/7px var(--mono);
  text-align:center;
  box-shadow:0 1px 2px #000;
  pointer-events:none;
}

.panel:before {
  left:7px;
}

.panel:after {
  right:7px;
}

.master-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding:23px 22px 20px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(#292d2f,#191d1f);
  min-height:126px;
}

.brand {
  display:flex;
  align-items:center;
  gap:9px;
  flex-shrink:0;
}

.brand svg {
  width:49px;
  height:56px;
  fill:var(--red);
}

.brand h1 {
  font-size:36px;
  font-weight:850;
  letter-spacing:-2px;
  line-height:1;
}

.brand h1 span {
  font:9px var(--sans);
  vertical-align:top;
  letter-spacing:0;
  margin-left:3px;
}

.brand p {
  font:7px var(--mono);
  letter-spacing:.13em;
  margin-top:9px;
  color:#969c98;
}

.session-block {
  max-width:220px;
  flex:1;
}

.session-block>input {
  display:block;
  margin:6px 0 7px;
  width:100%;
  color:#d3c7a9;
  font:12px var(--mono);
}

.file-actions {
  display:flex;
  gap:5px;
}

.file-actions button {
  font-size:9px;
  padding:4px 8px;
  flex:1;
}

.clock-block {
  width:116px;
  flex-shrink:0;
}

.clock-block>label {
  display:block;
}

.led-display {
  font:28px var(--mono);
  color:var(--amber);
  text-shadow:0 0 9px #ffad2540;
  background:#0e120d;
  box-shadow:inset 0 2px 5px #000;
  margin:5px 0;
  width:116px;
  text-align:center;
  letter-spacing:.1em;
}

.swing-label {
  display:flex!important;
  justify-content:space-between;
  letter-spacing:.04em;
  margin:3px 0 4px;
  font-size:8px;
}

.swing-label output {
  color:var(--amber);
}

.transport {
  width:155px;
  flex-shrink:0;
}

.transport-keys {
  display:flex;
  gap:5px;
}

.transport-keys button {
  height:42px;
  flex:1;
  font-size:18px;
}

.transport-keys #play {
  color:#b8cf96;
}

.transport-keys #play[aria-pressed=true] {
  color:#171e0c;
  background:linear-gradient(#c6df9f,#8da85f);
}

.transport-keys #stop {
  font-size:15px;
}

.transport-status {
  display:flex;
  gap:6px;
  align-items:center;
  font:8px var(--mono);
  color:#9a9d94;
  margin-top:10px;
}

.transport-status #position {
  margin-left:auto;
  color:var(--amber);
  font-size:11px;
}

.led {
  display:inline-block;
  vertical-align:middle;
  width:5px;
  height:5px;
  border-radius:50%;
  background:#4c4c3a;
  box-shadow:inset 0 1px #0004;
}

.led.on {
  background:var(--amber);
  box-shadow:0 0 5px #ffb33190;
}

.session-options {
  width:160px;
  position:relative;
  padding-right:20px;
}

.session-options label {
  font-size:8px;
}

.session-options select {
  display:block;
  width:100%;
  font:10px var(--mono);
  margin:6px 0;
}

.session-options button {
  padding:4px 8px;
  font-size:9px;
}

.session-options .help-button {
  position:absolute;
  bottom:0;
  right:0;
  padding:4px 6px;
}

.rack-body {
  display:grid;
  grid-template-columns:minmax(0,1fr) 174px;
  gap:6px;
  padding:6px;
  background:#0c0f11;
}

.instruments {
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.synth {
  display:grid;
  grid-template-columns:142px minmax(0,1fr);
  min-height:190px;
}

.pattern-rail {
  border-right:1px solid #060809;
  background:linear-gradient(90deg,#1c2022,#141719);
  padding:21px 13px 12px;
}

.unit-title {
  font:12px var(--mono);
  letter-spacing:.12em;
  color:#ece9df;
  font-weight:700;
}

.unit-subtitle {
  font:7px var(--mono);
  letter-spacing:.06em;
  color:#828983;
  margin:5px 0 13px;
}

.pattern-rail .pattern-label {
  font:8px var(--mono);
  color:#777e77;
  display:flex;
  justify-content:space-between;
  margin-bottom:6px;
}

.pattern-keys {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:4px;
}

.pattern-keys button {
  font-size:9px;
  padding:4px 0;
}

.rail-actions {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  margin-top:9px;
}

.rail-actions button {
  font-size:7px;
  padding:4px 0;
}

.instrument-main {
  padding:19px 18px 12px;
  min-width:0;
}

.instrument-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.instrument-name {
  display:flex;
  align-items:baseline;
  gap:11px;
}

.instrument-name h2 {
  font-size:20px;
  letter-spacing:-.04em;
  color:#d9d8d0;
}

.instrument-name .tag {
  font:7px var(--mono);
  letter-spacing:.15em;
  color:#92978f;
}

.instrument-name .number {
  color:var(--red);
  font:21px var(--mono);
  margin-left:4px;
}

.mix-switches {
  display:flex;
  gap:4px;
}

.mix-switches button {
  font-size:8px;
  padding:4px 7px;
}

.mix-switches button.mute.active {
  background:var(--red);
  color:#fff;
}

.controls {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
  margin-top:14px;
}

.knob-control {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  min-width:47px;
  position:relative;
}

.knob-control label {
  font-size:7px;
  letter-spacing:.07em;
  white-space:nowrap;
  color:#a5a79c;
}

.knob {
  --angle:0deg;
  width:37px;
  height:37px;
  border-radius:50%;
  padding:0;
  touch-action:none;
  cursor:ns-resize;
  position:relative;
  background:repeating-conic-gradient(from 0deg,#ffffff05 0deg 5deg,#0002 5deg 10deg),radial-gradient(circle at 40% 30%,#565c59 0,#363c38 52%,#171b19 75%);
  border:2px solid #101310;
  box-shadow:0 2px 3px #000b,inset 0 0 0 1px #9b9e8b40;
  outline-offset:4px!important;
}

.knob:before {
  content:'';
  position:absolute;
  inset:-5px;
  border:1px solid #686c6038;
  border-bottom-color:transparent;
  border-radius:50%;
  pointer-events:none;
}

.knob:after {
  content:'';
  position:absolute;
  height:12px;
  width:2px;
  left:calc(50% - 1px);
  top:3px;
  background:#e5d7b3;
  border-radius:1px;
  transform-origin:center 14px;
  transform:rotate(var(--angle));
  box-shadow:0 0 3px #ffdb7520;
  pointer-events:none;
}

.knob:hover,.knob:active {
  background:radial-gradient(circle at 40% 30%,#646b63,#292e29 70%);
  transform:none;
}

.knob-control output {
  color:#bbae8d;
  font-size:8px;
  min-height:9px;
}

.knob-control.small {
  min-width:34px;
}

.small .knob {
  width:29px;
  height:29px;
}

.small .knob:after {
  height:9px;
  transform-origin:center 10px;
  top:3px;
}

.small label {
  font-size:7px;
}

.wave-select {
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-right:6px;
}

.wave-select button {
  font-size:9px;
  padding:4px 8px;
}

.mini-steps {
  display:grid;
  grid-template-columns:repeat(16,1fr);
  gap:4px;
  margin-top:14px;
}

.mini-step {
  font-size:7px;
  position:relative;
  border-radius:2px;
  min-width:0;
  height:22px;
  padding:0;
  background:linear-gradient(#292e2c,#171b19);
  color:#6b736a;
}

.mini-step.lit {
  color:#e2c68b;
  background:linear-gradient(#64502d,#3e3221);
  border-color:#7e612d;
}

.mini-step.accent:after {
  content:'';
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:var(--amber);
  top:2px;
  right:3px;
}

.mini-step.playhead {
  box-shadow:0 0 0 1px var(--amber),0 0 7px #ffab242b;
  color:#fff;
}

.mini-step:nth-child(4n+1) {
  border-left-color:#8d8270;
}

.instrument-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:8px;
  font:7px var(--mono);
  color:#8b9189;
  letter-spacing:.06em;
}

.instrument-bottom button {
  font-size:8px;
  padding:3px 9px;
}

.instrument-bottom .on-label {
  color:#a1b18a;
}

.drum-rack {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px;
  min-width:0;
}

.drum {
  padding:20px 17px 12px;
}

.drum .instrument-name h2 {
  font-size:24px;
  color:#e4aa5f;
}

.drum.dr909 .instrument-name h2 {
  color:#d4d9cc;
}

.drum .instrument-name .tag {
  font-size:7px;
  letter-spacing:.03em;
}

.drum-voice-strip {
  display:grid;
  grid-template-columns:repeat(11,1fr);
  gap:3px;
  margin:17px 0 11px;
}

.drum-voice-strip button {
  height:38px;
  padding:0;
  font-size:7px;
  border-top:3px solid #ad562b;
}

.drum-voice-strip button:nth-child(n+5) {
  border-top-color:#c18d36;
}

.drum-voice-strip button:nth-child(n+9) {
  border-top-color:#cac7ad;
}

.drum-controls {
  display:flex;
  gap:9px;
  align-items:center;
}

.drum-controls .knob-control {
  margin-left:2px;
}

.drum-controls .drum-description {
  font:7px/1.8 var(--mono);
  color:#898f85;
  flex:1;
  letter-spacing:.05em;
}

.drum-controls .edit-drums {
  font-size:8px;
  padding:8px;
}

.drum .mini-steps {
  gap:3px;
  margin-top:12px;
}

.drum .mini-step {
  height:17px;
}

.section-title {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:15px 18px;
  border-bottom:1px solid #080b0b;
}

.section-title h2 {
  font-size:10px;
}

.editor-tabs {
  display:flex;
  gap:4px;
  margin-left:auto;
}

.editor-tabs button {
  font-size:8px;
  padding:4px 8px;
}

.editor-toolbar {
  display:flex;
  align-items:center;
  gap:6px;
  padding:9px 18px;
  background:#181c1d;
  font:9px var(--mono);
  color:#969c90;
  flex-wrap:wrap;
}

.editor-toolbar strong {
  color:var(--amber);
  font-weight:400;
  margin-right:auto;
}

.editor-toolbar button {
  font-size:8px;
  padding:4px 7px;
}

.editor-toolbar select {
  font-size:9px;
}

.grid-scroll {
  overflow-x:auto;
  padding:0 18px 12px;
  overscroll-behavior-x:contain;
}

.sequence-grid {
  min-width:620px;
  display:grid;
  grid-template-columns:66px repeat(16,minmax(26px,1fr));
  gap:1px;
  background:#0b0f10;
  border:1px solid #0b0f10;
  user-select:none;
  touch-action:pan-y;
}

.grid-label {
  font:8px var(--mono);
  color:#92998b;
  background:#1e2322;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  min-height:16px;
  border:none;
  border-radius:0;
  box-shadow:none;
}

.grid-label.key-black {
  background:#121716;
  color:#b1b5a9;
}

.grid-label.key-c {
  color:var(--amber);
}

.grid-cell {
  height:16px;
  padding:0;
  border:0;
  border-radius:0;
  box-shadow:none;
  background:#242a27;
  min-width:0;
  position:relative;
}

.grid-cell:nth-child(17n+2),.grid-cell:nth-child(17n+3),.grid-cell:nth-child(17n+4),.grid-cell:nth-child(17n+5),.grid-cell:nth-child(17n+10),.grid-cell:nth-child(17n+11),.grid-cell:nth-child(17n+12),.grid-cell:nth-child(17n+13) {
  background:#2b312b;
}

.grid-cell.black-row {
  background:#1b211e;
}

.grid-cell.beat-start {
  border-left:1px solid #5c65554d;
}

.grid-cell.note-on,.grid-cell.note-on:hover {
  background:linear-gradient(#efbd61,#b17e2d);
  box-shadow:inset 0 0 0 1px #ffd48960;
  border-radius:2px;
}

.grid-cell.playhead {
  box-shadow:inset 0 0 0 1px #dfe9bd70;
  background-color:#4b503b;
}

.grid-cell.note-on.playhead {
  background:#ffe0a0;
}

.grid-cell.flag-on {
  background:#be8b35;
  color:#131711;
}

.grid-cell.drum-on {
  background:#ba7937;
  box-shadow:inset 0 0 0 1px #ffcc7c40;
}

.grid-cell.drum-accent {
  background:#edb957;
  box-shadow:inset 0 0 0 2px #ffdb9c;
}

.grid-cell.drum-accent:after {
  content:'•';
  color:#3a2a12;
}

.grid-cell.drum-cell {
  height:22px;
}

.grid-label.drum-label {
  font-size:8px;
  justify-content:flex-start;
  padding-left:9px;
}

.grid-label.number-label {
  height:20px;
  font-size:7px;
  background:#131816;
}

.grid-cell.flag-cell {
  height:19px;
  font:7px var(--mono);
}

.editor-hint {
  padding:0 18px 12px;
  color:#7f887c;
  font:8px/1.5 var(--mono);
}

.mode-switch {
  display:flex;
  gap:3px;
  margin-left:auto;
}

.mode-switch button,.arrangement .section-title>button {
  font-size:8px;
  padding:5px 8px;
}

#song-chain {
  display:flex;
  gap:6px;
  padding:12px 18px 7px;
  overflow:auto;
  align-items:center;
}

.song-slot {
  display:grid;
  grid-template-columns:1fr 1fr 17px;
  gap:4px;
  min-width:123px;
  padding:8px;
  border:1px solid #44493d;
  border-radius:3px;
  background:#1a201c;
  position:relative;
}

.song-slot.current {
  border-color:var(--amber);
  box-shadow:0 0 7px #ffb33120;
}

.song-slot>span {
  font:7px var(--mono);
  color:#7f8b78;
  grid-column:1/4;
}

.song-slot select {
  font:9px var(--mono);
  padding:4px;
}

.song-slot button {
  font-size:10px;
  padding:0;
}

.microhint {
  font:8px/1.7 var(--mono);
  color:#7c8479;
  padding:0 18px 12px;
}

.effects {
  padding:0 12px;
  min-width:0;
}

.effects:before {
  left:5px;
}

.effects:after {
  right:5px;
}

.fx-master {
  padding:21px 2px 15px;
  text-align:center;
}

.fx-master h2 {
  font-size:11px;
  letter-spacing:.17em;
  color:#d5cfb3;
}

.fx-subtitle {
  font:7px var(--mono);
  color:#7d8878;
  margin-top:5px;
}

.master-meter-section {
  display:flex;
  align-items:center;
  justify-content:space-evenly;
  margin:22px 0 13px;
}

.vu-meter {
  display:flex;
  align-items:flex-end;
  gap:4px;
  width:25px;
  height:104px;
  background:#0a0e0b;
  padding:4px;
  border:1px solid #3c4336;
  border-radius:2px;
}

.vu-track {
  height:100%;
  width:7px;
  position:relative;
  background:repeating-linear-gradient(to top,#2d3826 0 4px,#0e140c 4px 6px);
}

.vu-fill {
  position:absolute;
  bottom:0;
  width:100%;
  height:0;
  background:repeating-linear-gradient(to top,#a5c277 0 4px,transparent 4px 6px);
  max-height:100%;
  transition:height 60ms linear;
}

.fader-control {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.fader-control input {
  writing-mode:vertical-lr;
  direction:rtl;
  width:20px;
  height:103px;
  accent-color:#c6b997;
  cursor:ns-resize;
}

.fader-control output {
  color:var(--amber);
  font-size:8px;
}

.fx-block {
  border-top:1px solid #080c0a;
  box-shadow:0 -1px #ffffff08;
  padding:16px 0 14px;
}

.fx-block-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:3px;
  margin-bottom:14px;
}

.fx-block-header h3 {
  color:#c2c5b4;
  font-size:9px;
}

.fx-toggle {
  font-size:7px;
  padding:4px 5px;
  min-width:28px;
}

.fx-controls {
  display:flex;
  justify-content:space-around;
  gap:5px;
}

.fx-block .knob-control {
  min-width:35px;
}

.fx-block .knob {
  width:31px;
  height:31px;
}

.fx-block .knob:after {
  height:10px;
  transform-origin:center 11px;
}

.fx-block label {
  font-size:6px;
}

.fx-select {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font:7px var(--mono);
  color:#8a957f;
  margin:11px 0 0;
  gap:6px;
}

.fx-select select {
  font-size:8px;
  padding:3px;
  max-width:85px;
}

.fx-bottom {
  padding:17px 0;
  text-align:center;
  font:7px/1.8 var(--mono);
  letter-spacing:.1em;
  color:#677361;
}

.fx-bottom b {
  display:block;
  color:#929a83;
  font-size:8px;
  font-weight:400;
}

.rack-footer {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 17px;
  background:#131719;
  border:1px solid #080b0b;
  border-radius:0 0 4px 4px;
  font:7px var(--mono);
  letter-spacing:.13em;
  color:#737c72;
}

.rack-footer .led {
  margin-right:6px;
  width:4px;
  height:4px;
}

.outside-footer {
  padding:18px 4px 0;
  font-size:8px;
  letter-spacing:.07em;
}

.outside-footer button {
  font-size:8px;
  margin-left:15px;
  border:0;
  background:none;
  box-shadow:none;
  padding:0;
  color:#a2a993;
}

#notice {
  position:fixed;
  bottom:25px;
  left:50%;
  transform:translateX(-50%);
  max-width:min(550px,90vw);
  padding:12px 20px;
  border:1px solid #7a6535;
  border-radius:4px;
  color:#ead7ac;
  background:#20251ef5;
  box-shadow:0 7px 25px #0008;
  z-index:10;
  font:11px/1.5 var(--mono);
  opacity:0;
  pointer-events:none;
  transition:opacity .15s;
}

#notice.visible {
  opacity:1;
}

dialog {
  max-width:650px;
  width:calc(100vw - 40px);
  border:1px solid #5c624d;
  background:#1b201d;
  color:#c9cebd;
  border-radius:6px;
  padding:0 25px 22px;
  box-shadow:0 20px 80px #0009;
}

dialog::backdrop {
  background:#000b;
  backdrop-filter:blur(4px);
}

dialog .section-title {
  padding:20px 0;
}

dialog p {
  font-size:12px;
  line-height:1.7;
  margin-top:17px;
}

dialog dl {
  display:grid;
  grid-template-columns:115px 1fr;
  gap:13px;
  font-size:11px;
  line-height:1.65;
}

dialog dt {
  color:var(--amber);
  font-family:var(--mono);
}

dialog dd {
  margin:0;
}

dialog .help-note {
  font-size:10px;
  color:#929c87;
}

noscript {
  display:block;
  padding:30px;
  color:var(--amber);
}

@media(min-width:1450px) {
  .synth {
    min-height:200px;
  }
  .controls {
    margin-top:20px;
  }
  .knob-control {
    min-width:55px;
  }
  .knob {
    width:41px;
    height:41px;
  }
  .knob:after {
    transform-origin:center 16px;
    height:14px;
  }
  .instrument-main {
    padding-left:24px;
    padding-right:24px;
  }
  .mini-step {
    height:24px;
  }
  .drum-voice-strip button {
    font-size:8px;
  }
}

@media(max-width:1200px) {
  .studio {
    padding:20px 12px;
  }
  .master-header {
    gap:14px;
    padding:20px 17px;
  }
  .brand h1 {
    font-size:30px;
  }
  .brand svg {
    width:37px;
  }
  .brand p {
    font-size:6px;
  }
  .session-options {
    width:128px;
    padding-right:0;
  }
  .session-options .help-button {
    right:-9px;
    bottom:-1px;
  }
  .session-options #load-demo {
    margin-right:14px;
  }
  .session-block {
    max-width:165px;
  }
  .rack-body {
    grid-template-columns:minmax(0,1fr) 150px;
  }
  .synth {
    grid-template-columns:116px minmax(0,1fr);
  }
  .pattern-rail {
    padding:20px 10px 10px;
  }
  .unit-title {
    font-size:10px;
  }
  .instrument-main {
    padding:18px 12px 11px;
  }
  .instrument-name .tag {
    display:none;
  }
  .knob-control {
    min-width:36px;
  }
  .knob-control label {
    font-size:6px;
  }
  .knob {
    width:31px;
    height:31px;
  }
  .knob:after {
    transform-origin:center 11px;
    height:10px;
  }
  .controls {
    gap:5px;
  }
  .wave-select {
    margin-right:0;
  }
  .wave-select button {
    padding:4px 5px;
  }
  .drum {
    padding:18px 11px 10px;
  }
  .drum-voice-strip {
    gap:2px;
  }
  .drum-voice-strip button {
    font-size:6px;
  }
  .drum-controls {
    gap:6px;
  }
  .drum-description {
    display:none;
  }
  .drum-controls .edit-drums {
    margin-left:auto;
  }
  .effects {
    padding:0 9px;
  }
  .fx-block-header h3 {
    font-size:8px;
  }
  .section-title {
    gap:7px;
  }
  .editor-tabs button {
    font-size:7px;
    padding:4px 6px;
  }
}

@media(max-width:960px) {
  .master-header {
    flex-wrap:wrap;
    gap:18px;
  }
  .brand {
    width:180px;
  }
  .session-block {
    max-width:none;
    flex:1;
  }
  .session-options {
    display:flex;
    align-items:center;
    gap:10px;
    width:100%;
    padding-top:10px;
    border-top:1px solid #ffffff0c;
  }
  .session-options select {
    width:180px;
    margin:0;
  }
  .session-options .help-button {
    position:static;
    margin-left:auto;
  }
  .session-options label {
    font-size:7px;
  }
  .rack {
    padding:0 13px;
  }
  .rack-body {
    grid-template-columns:minmax(0,1fr) 137px;
  }
  .controls {
    flex-wrap:wrap;
    justify-content:flex-start;
    column-gap:18px;
    row-gap:9px;
  }
  .synth {
    min-height:224px;
  }
  .controls .knob-control {
    min-width:36px;
  }
  .instrument-name h2 {
    font-size:17px;
  }
  .drum-rack {
    grid-template-columns:1fr;
  }
  .drum-voice-strip button {
    font-size:8px;
  }
  .drum-controls .drum-description {
    display:block;
  }
  .drum .mini-step {
    height:19px;
  }
  .editor-tabs {
    flex-wrap:wrap;
    justify-content:flex-end;
  }
  .section-title h2 {
    font-size:9px;
  }
  .outside-footer>span:first-child {
    display:none;
  }
  .rack-footer {
    font-size:6px;
  }
}

@media(max-width:680px) {
  .studio {
    padding:12px 5px;
  }
  .masthead {
    font-size:6px;
    padding:0 9px 10px;
  }
  .rack {
    padding:0 8px;
  }
  .master-header {
    padding:18px 13px;
    gap:16px 12px;
  }
  .brand {
    width:46%;
  }
  .brand h1 {
    font-size:28px;
  }
  .session-block {
    flex-basis:45%;
  }
  .clock-block {
    width:112px;
  }
  .transport {
    width:154px;
    margin-left:auto;
  }
  .session-options {
    gap:7px;
    flex-wrap:wrap;
  }
  .session-options select {
    width:140px;
  }
  .session-options label {
    font-size:6px;
  }
  .session-options button {
    font-size:8px;
  }
  .rack-body {
    grid-template-columns:1fr;
    padding:4px;
    gap:4px;
  }
  .instruments {
    gap:4px;
  }
  .synth {
    grid-template-columns:89px minmax(0,1fr);
  }
  .pattern-rail {
    padding:21px 7px 8px;
  }
  .unit-title {
    font-size:9px;
    letter-spacing:.02em;
  }
  .unit-subtitle {
    font-size:5px;
    margin:5px 0 10px;
  }
  .pattern-rail .pattern-label {
    font-size:6px;
  }
  .pattern-keys {
    gap:3px;
  }
  .pattern-keys button {
    font-size:8px;
  }
  .rail-actions {
    gap:3px;
  }
  .rail-actions button {
    font-size:6px;
  }
  .instrument-main {
    padding:18px 9px 10px;
  }
  .instrument-name h2 {
    font-size:14px;
  }
  .instrument-name .number {
    font-size:16px;
  }
  .mix-switches button {
    font-size:7px;
    padding:4px 5px;
  }
  .controls {
    column-gap:13px;
    row-gap:8px;
    margin-top:14px;
  }
  .controls .knob-control {
    min-width:31px;
  }
  .knob-control label {
    font-size:6px;
  }
  .mini-steps {
    gap:2px;
  }
  .mini-step {
    height:19px;
    font-size:6px;
  }
  .instrument-bottom {
    font-size:6px;
    letter-spacing:0;
    gap:3px;
  }
  .instrument-bottom button {
    font-size:7px;
    padding:4px 5px;
  }
  .drum-rack {
    gap:4px;
  }
  .drum-voice-strip {
    margin-top:12px;
  }
  .drum-voice-strip button {
    font-size:7px;
  }
  .section-title {
    padding:14px 10px;
    flex-wrap:wrap;
  }
  .editor-tabs {
    gap:3px;
  }
  .editor-tabs button {
    padding:4px 5px;
  }
  .editor-toolbar {
    padding:8px 10px;
    gap:5px;
  }
  .grid-scroll {
    padding:0 10px 10px;
  }
  .editor-hint {
    padding:0 10px 10px;
    font-size:7px;
  }
  .effects {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding:0 13px;
    column-gap:16px;
  }
  .fx-master {
    grid-row:span 2;
  }
  .fx-block {
    padding:15px 0;
  }
  .fx-master h2 {
    font-size:11px;
  }
  .master-meter-section {
    margin-top:24px;
  }
  .fx-bottom {
    grid-column:1/3;
    padding:8px 0;
    border-top:1px solid #080c0a;
  }
  .fx-bottom b {
    display:inline;
    margin-right:12px;
  }
  .fx-controls {
    justify-content:space-evenly;
  }
  .rack-footer {
    padding:11px 10px;
    font-size:5px;
    letter-spacing:.03em;
  }
  .outside-footer {
    padding:14px 10px 0;
    font-size:7px;
    gap:6px;
  }
  .outside-footer button {
    margin-left:5px;
    font-size:7px;
  }
  .microhint {
    font-size:7px;
    padding:0 10px 10px;
  }
  #song-chain {
    padding:10px;
  }
  .mode-switch {
    margin-left:0;
  }
  .arrangement .section-title>button {
    margin-left:auto;
  }
  dialog {
    padding:0 17px 18px;
  }
  dialog dl {
    grid-template-columns:1fr;
    gap:6px;
  }
  dialog dd {
    margin-bottom:9px;
  }
}

@media(prefers-reduced-motion:reduce) {
  * {
    transition:none!important;
    scroll-behavior:auto!important;
  }
}

/* Keep the complete five-octave roll inside a compact, native scroll viewport. */
.piano-scroll {
  height:300px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-color:#7f795b #151b17;
  scrollbar-width:thin;
}
.piano-scroll .number-label {
  position:sticky;
  top:0;
  z-index:3;
}
.piano-scroll .flag-cell,
.piano-scroll .flag-label {
  position:sticky;
  z-index:3;
  border-top:1px solid #0b0f10;
}
.piano-scroll .flag-accent {
  bottom:20px;
}
.piano-scroll .flag-slide {
  bottom:0;
}
.piano-scroll .flag-label {
  height:19px;
}
.piano-scroll:focus-visible {
  outline:1px solid var(--amber);
  outline-offset:-1px;
}