@font-face {
  font-family: "Pixelify Sans";
  src: url("./assets/fonts/pixelify-sans-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  color-scheme: dark;
  --blue: #2e3cf4;
  --pink: #ec00d1;
  --yellow: #fff127;
  --unit: min(.06614vw, .10184vh);
  --gap: clamp(16px, 2.2vw, 34px);
  font-family: "Pixelify Sans", monospace;
  font-synthesis: none;
  background: #161616;
  color: white;
}
* { box-sizing: border-box; }
body { margin: 0; padding: 4.3svh 4.4vw; isolation: isolate; }
.particle-backdrop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; image-rendering: pixelated; }
button, input, output { font: inherit; }
button { cursor: pointer; border: 0; color: white; }
button:disabled { cursor: default; opacity: .45; }
button:focus-visible, input:focus-visible { outline: 3px solid white; outline-offset: 5px; }
button { -webkit-tap-highlight-color: transparent; }
button:hover { filter: brightness(1.08); }
button:active { transform: translateY(1px); }
[hidden] { display: none !important; }
.instrument { height: 91.4svh; display: grid; grid-template-rows: auto minmax(240px, 1fr) auto; gap: var(--gap); }
.controls { display: grid; grid-template-columns: 672fr 324fr 324fr; gap: clamp(16px,1.92vw,36px); min-width: 0; }
.panel { min-width: 0; height: calc(171 * var(--unit)); min-height: 146px; border-radius: clamp(14px,1.2vw,24px); }
.player { background: var(--blue); padding: calc(20 * var(--unit)); display: flex; flex-direction: column; justify-content: space-between; }
.player-heading { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: 16px; align-items: center; height: 31%; }
.play-wordmark { display: block; width: calc(72 * var(--unit)); min-width: 52px; }
.file-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: transparent; font-size: clamp(18px,1.85vw,34px); padding: 0; text-align: center; }
.kit-status { color: var(--yellow); font-size: clamp(17px,1.85vw,32px); white-space: nowrap; }
.transport { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; }
.transport-icons { display: flex; gap: calc(13 * var(--unit)); }
.square { width: calc(42 * var(--unit)); height: calc(42 * var(--unit)); min-width: 33px; min-height: 33px; padding: 5px; background: black; }
.square svg { width: 100%; height: 100%; display: block; }
#play { fill: var(--pink); }
#stop { fill: var(--yellow); }
.pause-icon, #play.is-playing .play-icon { display: none; }
#play.is-playing .pause-icon { display: block; }
.transport-actions { display: flex; gap: calc(12 * var(--unit)); }
.black-button { background: #000; height: calc(42 * var(--unit)); min-height: 33px; padding: 0 calc(17 * var(--unit)); font-size: clamp(15px,1.45vw,27px); white-space: nowrap; }
.progress { display: block; margin-top: calc(18 * var(--unit)); height: calc(9 * var(--unit)); min-height: 7px; }
.progress input { display: block; width: 100%; height: 100%; margin: 0; appearance: none; border-radius: 0; background: linear-gradient(to right,var(--yellow) var(--progress,0%),#ffffff29 var(--progress,0%)); cursor: pointer; }
.progress input::-webkit-slider-thumb { appearance: none; width: 1px; height: 16px; background: transparent; }
.progress input::-moz-range-thumb { width: 1px; height: 16px; background: transparent; border: 0; }
.progress input:disabled { cursor: default; }
.kit { background: var(--pink); padding: calc(12 * var(--unit)) calc(14 * var(--unit)); display: flex; flex-direction: column; }
.panel-heading { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; column-gap: 5px; height: calc(26 * var(--unit)); min-height: 20px; }
.panel-dots { display: flex; align-items: center; gap: clamp(6px,.85vw,14px); justify-self: start; }
.panel-dots:last-child { justify-self: end; }
.kit-wordmark { width: calc(94 * var(--unit)); min-width: 75px; }
.visual-wordmark { width: calc(65 * var(--unit)); min-width: 52px; }
.dot { display: block; width: calc(20 * var(--unit)); height: calc(20 * var(--unit)); min-width: 14px; min-height: 14px; border-radius: 50%; }
.blue { background: var(--blue); }
.pink { background: var(--pink); }
.green { background: #91ed79; }
.yellow { background: var(--yellow); }
.black { background: #000; }
.egg-button { border: 0; padding: 0; flex-shrink: 0; }
.egg-button[aria-pressed="true"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #0003; }
.knobs { display: grid; grid-template-columns: repeat(3,1fr); gap: calc(12 * var(--unit)); margin: auto 4px 0; }
.knob-control { display: grid; justify-items: center; gap: calc(10 * var(--unit)); font-size: clamp(17px,1.35vw,26px); }
.knob-face { display: block; position: relative; background: #000; width: 100%; max-width: calc(83 * var(--unit)); min-width: 61px; aspect-ratio: 1; border-radius: 50%; touch-action: none; }
.knob-face input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: ns-resize; z-index: 2; touch-action: none; }
.knob-face:has(input:focus-visible) { outline: 3px solid white; outline-offset: 4px; }
.knob-pointer { position: absolute; inset: 0; transform: rotate(var(--rotation,45deg)); pointer-events: none; }
.knob-pointer::before { content: ""; position: absolute; background: var(--yellow); width: 22%; height: 22%; border-radius: 50%; left: 39%; top: 10%; }
.knob-center { position: absolute; background: #2a2a2a; width: 10%; height: 10%; left: 45%; top: 45%; border-radius: 50%; pointer-events: none; }
.knob-value { opacity: 0; position: absolute; bottom: 12%; left: 0; right: 0; color: white; text-align: center; font-size: 11px; pointer-events: none; }
.knob-face:hover .knob-value, .knob-face:focus-within .knob-value { opacity: 1; }
.visual-controls { background: var(--yellow); color: #000; padding: calc(10 * var(--unit)) calc(14 * var(--unit)); display: flex; flex-direction: column; justify-content: space-between; }
.visual-row { display: grid; grid-template-columns: 88fr 88fr 107fr; gap: calc(6 * var(--unit)); }
.visual-row.second { grid-template-columns: 107fr 88fr 88fr; }
.visual-button { height: calc(51 * var(--unit)); min-height: 44px; padding: 4px; border-radius: calc(16 * var(--unit)); font-size: clamp(13px,1.08vw,21px); line-height: 1.18; }
.blue-button { background: var(--blue); color: white; }
.blue-button[aria-pressed="true"], .egg-button.blue[aria-pressed="true"] { background: var(--pink); color: white; }
.pink-button { background: var(--pink); color: white; }
.pill { border-radius: 100px; }
.visual-button[aria-pressed="false"].pill { opacity: .62; }
.stage { position: relative; min-height: 0; isolation: isolate; }
.canvas-host { position: absolute; inset: 0; }
.canvas-host canvas { width: 100% !important; height: 100% !important; display: block; }
.stage-voices { position: absolute; left: 2.05%; top: 7%; display: flex; gap: calc(12 * var(--unit)); z-index: 2; }
.stage-button { height: calc(35 * var(--unit)); min-height: 30px; padding: 0 calc(18 * var(--unit)); font-size: clamp(13px,1.05vw,21px); }
.stage-voices button[aria-pressed="true"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.stage-bottom-controls { position: absolute; left: 2.05%; bottom: 6%; z-index: 4; display: flex; align-items: center; gap: calc(12 * var(--unit)); }
.reset-button { width: calc(35 * var(--unit)); min-width: 30px; padding: 6px; display: grid; place-items: center; }
.reset-button svg { display: block; width: 100%; height: 100%; max-width: 24px; max-height: 24px; }
.playhead-hit { position: absolute; left: calc(var(--playhead, .414) * 100%); top: 0; bottom: 0; width: 34px; transform: translateX(-50%); z-index: 3; cursor: ew-resize; touch-action: none; }
.playhead-hit:focus-visible { outline: 2px dashed white; outline-offset: 4px; }
.drop-hint { display: none; position: absolute; inset: 14px; background: #161616dd; border: 4px dashed white; align-items: center; justify-content: center; font-size: 32px; z-index: 5; pointer-events: none; }
.stage.dragging .drop-hint { display: flex; }
.piano-panel { background: black; border: calc(3 * var(--unit)) solid #5a5a5a; border-radius: clamp(14px,1.2vw,24px); padding: calc(16 * var(--unit)) calc(26 * var(--unit)); min-width: 0; }
.piano-readouts { display: grid; grid-template-columns: 418fr 133fr 174fr 146fr auto; align-items: center; column-gap: clamp(12px,5.4vw,100px); margin-bottom: calc(20 * var(--unit)); }
.key-strip { display: flex; align-items: center; justify-content: space-between; gap: 5px; background: var(--yellow); color: black; height: calc(29 * var(--unit)); min-height: 26px; font-size: clamp(15px,1.55vw,28px); white-space: nowrap; }
.key-strip span:first-child { margin-right: auto; }
.key-strip span:not(:first-child) { width: 8%; text-align: center; }
.key-strip .sounding { background: black; color: var(--yellow); }
.readout { display: flex; align-items: center; justify-content: space-between; gap: 10px; white-space: nowrap; height: calc(29 * var(--unit)); min-height: 26px; padding: 0 2px; font-size: clamp(15px,1.55vw,28px); }
.readout output { overflow: hidden; text-overflow: ellipsis; }
.tune, .tone { background: var(--blue); }
.octave { background: var(--pink); }
.swatches { display: flex; gap: calc(12 * var(--unit)); }
.swatches button { border: 0; padding: 0; width: calc(18 * var(--unit)); height: calc(18 * var(--unit)); min-width: 12px; min-height: 12px; background: white; border-radius: 50%; }
.swatches button:nth-child(2) { background: var(--yellow); }
.swatches button:nth-child(3) { background: var(--pink); }
.piano-scroll { overflow-x: auto; scrollbar-width: thin; scrollbar-color: #555 #000; }
.piano { position: relative; display: flex; gap: calc(8 * var(--unit)); height: calc(86 * var(--unit)); min-height: 72px; user-select: none; touch-action: none; }
.piano-key { padding: 0; border: 0; border-radius: 0; touch-action: none; }
.white-key { flex: 1; position: relative; min-width: 0; height: 100%; background: white; color: #060606; }
.swatches button[aria-pressed="true"] { outline: 1px solid #777; outline-offset: 3px; }
.black-key { position: absolute; top: 0; z-index: 1; height: 65%; width: var(--black-width); background: var(--black-key-color, #060606); color: white; transform: translateX(-50%); }
.black-key:active { transform: translateX(-50%); }
.piano-key small { position: absolute; bottom: 5px; left: 5px; font-size: clamp(9px,.7vw,14px); pointer-events: none; }
.piano-key.pressed { background: var(--pink); color: white; }
.piano-key.midi-active { background: var(--yellow); color: black; }
.piano-key.pressed.midi-active { background: var(--pink); box-shadow: inset 0 -6px var(--yellow); }
body.full-view { padding: 16px; overflow: hidden; }
.full-view .instrument { height: calc(100svh - 32px); grid-template-rows: minmax(0,1fr); }
.full-view .controls, .full-view .piano-panel { display: none; }
.midi-dialog { width: min(520px, calc(100vw - 32px)); max-height: min(680px,85svh); background: #161616; color: white; border: 2px solid #575757; border-radius: 20px; padding: 24px; }
.midi-dialog::backdrop { background: #000a; backdrop-filter: blur(6px); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.dialog-heading h1 { margin: 0; font-size: 28px; font-weight: 400; }
.close-button { background: transparent; font-size: 32px; line-height: 1; }
.upload-midi { background: var(--blue); width: 100%; padding: 18px; text-align: left; font-size: 22px; border-radius: 10px; }
.upload-midi span { float: right; }
.footage-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #bbb; font-size: 19px; margin: 0 0 24px; }
.footage-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.footage-actions button { padding: 14px 10px; font-size: 18px; text-align: center; }
.footage-actions .pink-button { background: var(--pink); }
.footage-speed { display: grid; gap: 18px; margin: 28px 0; font-size: 22px; }
.footage-speed output { float: right; color: var(--yellow); }
.footage-speed input { width: 100%; margin: 0; accent-color: var(--pink); cursor: ew-resize; }
.footage-speed:has(input:disabled) { opacity: .4; }
#pause-footage { font-size: 18px; text-align: center; padding: 14px; }
.sample-heading { color: #aaa; margin: 24px 0 10px; font-size: 14px; }
.sample-list { display: grid; gap: 8px; }
.sample-list button { padding: 14px; background: #272727; text-align: left; border-radius: 8px; font-size: 18px; }
.sample-list button.selected { background: var(--pink); }
.notice { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: black; border: 1px solid #555; color: white; border-radius: 10px; max-width: min(600px,90vw); padding: 12px 20px; opacity: 0; pointer-events: none; z-index: 20; transition: opacity .15s; }
.notice.visible { opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 1150px) {
  :root { --unit: 1px; --gap: 20px; }
  body { padding: 24px; }
  .instrument { height: auto; min-height: calc(100svh - 48px); grid-template-rows: auto minmax(340px,55svh) auto; }
  .controls { grid-template-columns: 1fr 1fr; gap: 20px; }
  .player { grid-column: 1 / -1; height: 171px; }
  .panel { min-height: 171px; }
  .file-name, .kit-status { font-size: 26px; }
  .transport-actions { gap: 12px; }
  .black-button { font-size: 22px; }
  .visual-row { gap: 8px; }
  .visual-button { font-size: 17px; }
  .knob-control { font-size: 20px; }
  .piano-readouts { column-gap: 18px; grid-template-columns: 2.8fr 1fr 1.2fr 1fr; }
  .swatches { grid-column: 4; justify-content: flex-end; }
  .piano-readouts { row-gap: 12px; }
  .readout, .key-strip { font-size: 18px; }
  .piano { gap: 4px; min-width: 620px; }
}
@media (max-width: 600px) {
  body { padding: 16px 12px; }
  .instrument { gap: 16px; grid-template-rows: auto minmax(350px,56svh) auto; }
  .controls { grid-template-columns: 1fr; gap: 16px; }
  .player { grid-column: auto; padding: 15px; height: 175px; }
  .player-heading { gap: 10px; }
  .play-wordmark { width: 52px; }
  .file-name { font-size: 19px; }
  .kit-status { font-size: 18px; }
  .transport { gap: 10px; }
  .transport-icons { gap: 5px; }
  .square { width: 30px; height: 34px; min-width: 28px; padding: 4px; }
  .transport-actions { flex: 1; gap: 5px; }
  .black-button { flex: 1; padding: 0 6px; min-width: 0; font-size: 15px; height: 34px; }
  .panel { border-radius: 16px; }
  .kit, .visual-controls { padding: 12px 16px; height: 177px; }
  .knobs { margin: auto 6px 0; }
  .knob-face { width: 78px; }
  .stage-button { padding: 0 13px; }
  .reset-button { padding: 6px; }
  .piano-panel { padding: 15px 12px; }
  .piano-readouts { grid-template-columns: 1fr 1.25fr 1fr; gap: 12px; }
  .key-strip { grid-column: 1/-1; font-size: 22px; }
  .swatches { grid-column: 1/-1; justify-content: flex-end; }
  .readout { font-size: 18px; }
  .piano { gap: 4px; height: 100px; }
}
@media (min-width:1151px) and (max-height:650px) {
  body { padding: 16px 3vw; }
  .instrument { height: auto; min-height: calc(100svh - 32px); grid-template-rows: auto minmax(260px,1fr) auto; gap: 16px; }
}
@media (prefers-reduced-motion:reduce) { .notice { transition: none; } }