:root {
  color-scheme: dark;
  --accent: #f4a05e;
  --ink: #191c1f;
  --angle: -113deg;
  --sweep: 22deg;
  --note-dot: 14px;
  font-family: Arial, Helvetica, sans-serif;
  font-synthesis: none;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  width: 100%; height: 100%; margin: 0;
  overflow: hidden; overscroll-behavior: none; background: var(--ink);
}
body { user-select: none; -webkit-user-select: none; touch-action: none; }
button { font: inherit; cursor: pointer; color: inherit; touch-action: manipulation; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
button:disabled { cursor: default; opacity: .3; }
[hidden] { display: none !important; }

#instrument {
  position: fixed; inset: 0; margin: auto;
  width: 100%; max-width: 1320px; height: 100%; height: 100dvh;
  display: flex; flex-direction: column; justify-content: center;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: var(--ink); overflow: hidden;
}
.controls {
  display: flex; align-items: center; justify-content: space-between;
  flex: 0 0 82px; min-height: 82px; gap: 14px;
  padding: 0 8px 9px; color: #a7aeb2; position: relative; z-index: 3;
}
.control-group { display: flex; align-items: center; gap: 14px; }
.switch { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: #111416; }
.icon-button {
  display: grid; place-items: center; width: 43px; height: 40px;
  padding: 8px; border: 0; border-radius: 6px; background: transparent; color: #899297;
}
.icon-button svg {
  width: 23px; height: 23px; fill: none; stroke: currentColor;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.icon-button.selected, .filter-button.selected { background: #343b3f; color: #f1f2f2; }
.projects-link { text-decoration: none; touch-action: manipulation; }
.projects-link:hover { color: #f1f2f2; background: #292f33; }
.transport { border-radius: 50%; width: 45px; height: 45px; background: #292f33; color: var(--accent); }
.transport .pause-icon { display: none; }
.transport.running .play-icon { display: none; }
.transport.running .pause-icon { display: block; }
.settings-controls { display: flex; align-items: center; gap: 18px; }
.key-filter { flex-shrink: 0; }
.filter-button { min-width: 36px; height: 34px; padding: 8px 9px; border: 0; border-radius: 6px; background: transparent; color: #899297; font-size: 12px; white-space: nowrap; }
.knobs { display: flex; gap: 18px; align-items: center; }
.knob-control {
  display: grid; grid-template-columns: 18px 46px; grid-template-rows: 46px 15px;
  align-items: center; gap: 0 7px;
}
.knob-symbol { width: 17px; height: 17px; fill: none; stroke: #929da3; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.knob-control output { grid-column: 2; text-align: center; color: #b4bec4; font-size: 11px; line-height: 15px; font-variant-numeric: tabular-nums; }
.dial {
  position: relative; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; cursor: ns-resize; touch-action: none;
  background: conic-gradient(from 225deg, var(--accent) 0deg, var(--accent) var(--sweep), #465159 var(--sweep), #465159 270deg, transparent 270deg);
}
.dial::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: var(--ink); }
.dial-face { position: relative; width: 36px; height: 36px; border-radius: 50%; background: #3b454b; box-shadow: inset 0 1px #ffffff15; }
.dial-needle { position: absolute; inset: 5px; transform: rotate(var(--angle)); }
.dial-needle::before { content: ''; position: absolute; left: calc(50% - 1px); top: 0; width: 2px; height: 9px; border-radius: 1px; background: #ebeee9; }
.dial.dragging .dial-face { background: #4e5c64; }
.knob-control.inactive { opacity: .25; }
.knob-control.inactive .dial { pointer-events: none; }

.key-bed {
  position: relative; flex: 0 1 auto; min-height: 0;
  height: auto; align-self: flex-start; max-width: 100%;
  padding-top: 6px;
}
.progress-track { position: absolute; height: 2px; left: 1px; right: 1px; top: 0; background: #252c30; overflow: hidden; }
#progress { height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; opacity: .65; }
.keyboard { display: block; width: 100%; height: 100%; min-height: 0; }
.keyboard-row {
  position: relative; display: flex; flex-direction: column; width: 100%; height: 100%; min-height: 0;
  isolation: isolate; overflow: hidden; background: #111518; border-radius: 3px; gap: 1px;
}
.key { position: relative; pointer-events: none; }
.key.white {
  flex: 1; min-width: 0; min-height: 0; border: 0; border-radius: 0 0 3px 3px;
  background: linear-gradient(#f0f1ed, #fafbf7 20%, #f8f9f5 95%, #d7ddd7 95%);
  box-shadow: inset 0 1px 3px #101b1525;
}
.key.black {
  position: absolute; z-index: 2; top: var(--key-position); right: 0; width: 61%; height: var(--key-thickness);
  background: linear-gradient(#333b40, #151b1f 88%, #080d10 88%);
  border: 1px solid #0b1013; border-top: 0; border-radius: 0 0 3px 3px;
  box-shadow: 1px 2px 2px #0004; transform: translateY(-50%);
}
.key.white.active { background: linear-gradient(#f2ebde, #fff2df 20%, #fff2df 95%, #dfc9a8 95%); }
.key.black.active { background: linear-gradient(#40474a, #222a2e 88%, #121a1e 88%); }
.key::after {
  content: ''; position: absolute; top: 50%; left: 18%;
  width: var(--note-dot); height: var(--note-dot); border-radius: 50%;
  background: var(--accent); transform: translateY(-50%); opacity: 0;
}
.key.active::after { opacity: 1; }
.error {
  position: absolute; z-index: 4; top: 12px; left: 50%; transform: translateX(-50%);
  max-width: 85%; padding: 9px 14px; border-radius: 6px; background: #802b25f2;
  color: white; font-size: 12px; line-height: 1.4; text-align: center; pointer-events: none;
}

@media (orientation: portrait) and (max-width: 760px) {
  .controls {
    display: grid; grid-template-columns: 1fr auto; grid-template-rows: 44px 58px;
    flex: 0 0 118px; min-height: 118px; gap: 8px 10px; padding: 0 4px 8px;
  }
  .control-group { gap: 10px; }
  .exercise-switch { justify-self: end; }
  .settings-controls { grid-column: 1 / -1; justify-content: center; gap: 12px; }
  .knobs { gap: 20px; }
  .knob-control { grid-template-columns: 17px 42px; grid-template-rows: 42px 14px; gap: 0 7px; }
  .dial { width: 42px; height: 42px; }
  .dial-face { width: 33px; height: 33px; }
  .knob-control output { font-size: 11px; line-height: 14px; }
}
@media (orientation: portrait) and (max-width: 600px) {
  #instrument { justify-content: flex-start; padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .key-bed { flex: 1 1 auto; height: auto; padding-top: 6px; }
}
@media (max-height: 450px) and (orientation: landscape) {
  .controls { flex-basis: 66px; min-height: 66px; padding: 0 5px 7px; }
  .icon-button { width: 39px; height: 36px; }
  .transport { width: 40px; height: 40px; }
  .control-group { gap: 10px; }
  .knob-control { grid-template-columns: 15px 40px; grid-template-rows: 40px 13px; gap: 0 5px; }
  .knob-symbol { width: 15px; height: 15px; }
  .knob-control output { font-size: 10px; line-height: 13px; }
  .dial { width: 40px; height: 40px; }
  .dial-face { width: 31px; height: 31px; }
}
@media (max-width: 360px) {
  :root { --note-dot: 12px; }
  #instrument { padding-left: 10px; padding-right: 10px; }
  .control-group { gap: 6px; }
  .icon-button { width: 37px; height: 37px; }
  .transport { width: 40px; height: 40px; }
  .controls { column-gap: 5px; }
}
@media (orientation: landscape) and (max-width: 650px) { :root { --note-dot: 12px; } }
@media (orientation: landscape) and (max-width: 760px) {
  .controls { gap: 10px; }
  .settings-controls { gap: 8px; }
  .knobs { gap: 10px; }
  .filter-button { font-size: 11px; padding: 8px 7px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

@media (orientation: portrait) and (max-width: 760px) {
  .controls {
    position: absolute;
    top: max(12px, env(safe-area-inset-top));
    left: calc(100% - max(12px, env(safe-area-inset-right))); right: auto; bottom: auto;
    width: calc(100dvh - max(12px, env(safe-area-inset-top)) - max(12px, env(safe-area-inset-bottom)));
    height: 76px; min-height: 76px; padding: 4px 8px;
    display: flex; flex-direction: row; justify-content: space-between;
    align-items: center; gap: 8px; transform-origin: top left; transform: rotate(90deg);
  }
  .control-group, .controls .switch, .settings-controls, .knobs { flex-direction: row; }
  .control-group { gap: 6px; }
  .settings-controls { gap: 10px; }
  .knobs { gap: 12px; }
  .key-bed { flex: 1 1 auto; max-width: calc(100% - 92px); }
}
@media (orientation: landscape) {
  .keyboard-row { flex-direction: row; }
  .key.black { top: 0; right: auto; left: var(--key-position); width: var(--key-thickness); height: 61%; transform: translateX(-50%); }
  .key::after { top: auto; bottom: 18%; left: 50%; transform: translateX(-50%); }
}