/* OP-1V's original instrument skin. Layout/audio behavior stays in the base app. */
:root {
    --ink: #252927;
    --muted: #6b716c;
    --canvas: #e7e5dd;
    --surface: #f2f0e9;
    --surface-raised: #faf8f2;
    --line: #cbcfc5;
    --rail: #202624;
    --lime: #b6cf9b;
    --violet: #a69bb9;
    --coral: #e27651;
    --blue: #88abb4;
    --device-orange: #d96b3f;
    --device-mint: #8db8a7;
    --device-amber: #e0b866;
    --device-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --shadow: 0 1px 0 #fff9 inset, 0 2px 3px #272e2510;
    --radius-lg: 10px;
    --radius-md: 7px;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

body { color: var(--ink); background: var(--canvas); }
.application-area { background: var(--canvas); }
button, input, select, summary, a { -webkit-tap-highlight-color: transparent; }
button { touch-action: manipulation; }
button:not(:disabled), select, .load-sample-button, .back-to-tape {
    transition: background-color 100ms ease, border-color 100ms ease, box-shadow 100ms ease, transform 70ms ease;
}
button:not(:disabled):active, .load-sample-button:active {
    transform: translateY(1px);
    box-shadow: 0 1px 2px #22291c18 inset;
}
button:focus-visible, input:focus-visible, select:focus-visible,
summary:focus-visible, a:focus-visible, .sound-browser:focus-visible {
    outline: 2px solid #477c73;
    outline-offset: 3px;
}
button:disabled, select:disabled { cursor: default; }
button:disabled { opacity: .4; box-shadow: none; }
select, input[type="number"], input[type="search"] {
    color: var(--ink);
    background-color: var(--surface-raised);
    border-color: var(--line);
    border-radius: 5px;
}
select { accent-color: var(--device-orange); }
input[type="range"] { accent-color: var(--ink); cursor: ew-resize; }
input[type="checkbox"] { accent-color: #497f6e; }
input[type="range"]:disabled { cursor: default; }
kbd { border-color: #c5c8bd; border-radius: 3px; background: #eeeee6; box-shadow: 0 1px 0 #fff9 inset; font-family: var(--device-mono); font-weight: 500; }

/* Compact physical control rail: mode keys, transport, and insert controls. */
.topbar {
    padding: 8px 12px;
    gap: 8px;
    border-bottom-color: #bfc4b9;
    background: #eae8df;
    box-shadow: 0 1px 0 #fff8 inset;
    backdrop-filter: none;
}
.view-navigation { gap: 4px; }
.brand { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; font: 800 12px/1 var(--device-mono); letter-spacing: -.04em; }
.brand svg { width: 17px; height: 17px; flex: 0 0 auto; }
.view-button {
    --mode-color: var(--device-orange);
    min-height: 28px;
    padding: 5px 8px;
    border: 1px solid #c2c5bb;
    border-radius: 5px;
    color: #62685e;
    background: #f5f3ec;
    box-shadow: 0 1px 0 #fff inset, 0 1px 0 #c5c9bd;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .015em;
}
.view-button[data-view="synth"] { --mode-color: var(--device-mint); }
.view-button[data-view="drum"] { --mode-color: var(--device-amber); }
.view-button.is-active { border-color: var(--ink); color: #faf9f1; background: var(--ink); box-shadow: 0 -2px 0 var(--mode-color) inset; }
.view-button:not(.is-active):hover { border-color: #899182; background: #fffdf7; }
.mode-index { margin-right: 4px; font: 500 8px/1 var(--device-mono); opacity: .65; }
.view-button.is-active .mode-index { color: var(--mode-color); opacity: 1; }
.help-button { width: 28px; }
.transport { gap: 5px; }
.transport-button { width: 33px; height: 33px; border-color: #bbc0b4; border-radius: 6px; background: #f8f6ee; box-shadow: 0 1px 0 #fff inset, 0 2px 0 #c9cdc1; }
.transport-button svg { width: 15px; }
.transport-button.is-playing { border-color: #6f9b83; color: #24493c; background: #c9ddca; box-shadow: 0 1px 0 #eef6e8 inset; }
.loop-button[aria-pressed="true"] { border-color: #af9257; color: #5c491f; background: #ecd6a5; box-shadow: 0 1px 0 #fff2d2 inset; }
.transport-button.is-recording { border-color: #be5d3d; color: #fff3e7; background: #eaa68a; box-shadow: 0 1px 0 #ffc6ab inset; }
.record-dot { width: 8px; height: 8px; background: #d56443; }
.transport-button.is-recording .record-dot { background: #a73824; }
.transport-time, .tempo-control { height: 34px; margin-left: 3px; border-color: #bdc5b8; border-radius: 4px; background: #dce2d4; box-shadow: 0 1px 2px #2533220d inset; }
.transport-time span, .tempo-control span, .master-control span { color: #697461; font: 600 8px/1.3 var(--device-mono); letter-spacing: .08em; }
.transport-time strong, .tempo-control input { color: #36452f; font: 700 11px/1.3 var(--device-mono); }
.transport-position-label { display: inline-flex; align-items: center; gap: 6px; }
.transport-time .transport-state-label { color: #658274; font: 700 7px/1 var(--device-mono); letter-spacing: .06em; }
.tap-tempo-button { height: 34px; border-color: #bfc4b8; border-radius: 5px; background: #efeee5; font: 600 9px/1 var(--device-mono); }
.topbar-actions { gap: 10px; }
.master-control { width: 92px; }
.audio-status { font: 500 9px/1.3 var(--device-mono); }
.audio-status::before { width: 5px; height: 5px; }
.audio-status[data-state="running"]::before { background: #62967c; box-shadow: 0 0 0 3px #8db8a723; }
.midi-connect-button, .panic-button { font: 600 9px/1 var(--device-mono); letter-spacing: normal; text-transform: none; }
.midi-connect-button { min-height: 29px; padding: 4px 8px; border-color: #aebfa9; border-radius: 5px; color: #426551; background: #e3ecdc; }
.midi-connect-button:hover, .midi-connect-button:focus-visible { border-color: #7f9f8d; background: #d5e6d5; }
.panic-button { min-height: 29px; padding: 4px 7px; border-color: #c5b7a8; border-radius: 5px; color: #955039; background: #eee4d7; }
.panic-button kbd { color: inherit; border-color: #d2c5b5; background: #f6eee3; font-size: 8px; }
.effects-rack { gap: 8px; padding: 7px 12px; border-bottom-color: #bcc2b5; background: #dcded4; box-shadow: 0 1px 0 #f8f8ef inset; }
.effects-caption { color: #73806b; font: 700 9px/1 var(--device-mono); letter-spacing: .12em; }
.effect-control { gap: 4px; }
.effect-control button { min-height: 22px; padding: 4px 6px; border-color: #bac1b1; border-radius: 4px; background: #e9ece2; color: #626e58; box-shadow: 0 1px 0 #f9fbf2 inset; font: 600 9px/1 var(--device-mono); letter-spacing: .02em; }
.effect-control button[aria-pressed="true"] { border-color: #628c77; color: #234f3e; background: #bdd4c0; }
.effect-control input { width: 44px; accent-color: #4b6554; }
.effect-control output { min-width: 28px; color: #6d7963; font: 500 8px/1 var(--device-mono); }
.instrument-volume { padding-right: 9px; border-right-color: #bcc3b3; }
.instrument-volume label { font: 600 9px/1 var(--device-mono); }
.instrument-volume label span { max-width: 80px; color: #59684e; font-size: 9px; }
.instrument-volume input { width: 52px; }

/* Surface architecture and information hierarchy. */
.workspace { padding-top: 20px; }
.module-card, .sound-group, .tape-beat-strip, .keyboard-dock,
.input-rack, .tape-machine, .clip-editor { border-color: var(--line); border-radius: 8px; box-shadow: var(--shadow); }
.module-card { background: var(--surface); }
.module-heading { border-bottom-color: #d2d6cb; }
.module-heading h2 { font-size: 12px; letter-spacing: -.025em; }
.module-index { border-color: #c7ccbf; border-radius: 3px; color: #6d7765; background: #e1e4d9; font-family: var(--device-mono); }
.module-hint, .keyboard-kicker, .view-kicker, .module-index,
.deck-track-selector > span, .record-bars-control, .input-source > label { font-family: var(--device-mono); }
.module-hint, .keyboard-kicker { color: #7a8274; letter-spacing: .08em; }
.view-kicker { gap: 8px; color: #75806c; font-size: 9px; letter-spacing: .08em; }
.view-kicker > span:first-child::before { width: 12px; height: 2px; background: var(--device-orange); }
.live-pill { padding: 3px 5px; border: 1px solid #b9cab4; border-radius: 3px; color: #4c7158; background: #dce8d4; font-size: 8px; }
#midi-library-state[data-state="off"] { color: #73786b; border-color: #c9cebf; background: #e4e7da; }
#midi-library-state[data-state="connected"], #midi-library-state[data-state="activity"] { color: #355e47; border-color: #a3bea1; background: #cfdfc4; }
#midi-library-state[data-state="activity"] { box-shadow: 0 0 0 2px #a3bea129; }
.view-heading h1, .sounds-heading h1, .tape-heading h1 { font-size: 25px; font-weight: 750; letter-spacing: -.055em; line-height: 1.05; }
.view-heading p { color: #737a6b; font-size: 11px; }
.view-heading { gap: 12px; }
.back-to-tape { padding: 7px 10px; border-radius: 5px; border-color: #c2c7ba; background: #efeee5; font: 600 10px/1.3 var(--device-mono); }

/* The reels remain the main surface. A flatter dark display replaces neon gloss. */
.tape-transport-display.tape-transport-display--main {
    --tape-accent: var(--device-mint);
    min-height: clamp(260px, 44dvh, 550px);
    border: 1px solid #1d2522;
    border-radius: 8px;
    color: #e3e8dc;
    background: linear-gradient(90deg, transparent 49.96%, #95a69c12 50%, transparent 50.04%), #222a26;
    box-shadow: 0 1px 0 #f9fbf633, 0 0 0 5px #d3d7cc, 0 0 0 6px #bcc3b5, 0 2px 5px #222a2114 inset;
}
.tape-screen-glow { opacity: .14; }
.tape-transport-display--main .tape-mechanism { inset: 38px 68px 42px; }
.tape-transport-display--main .tape-pack {
    border: 1px solid #65756a;
    background: repeating-radial-gradient(circle, transparent 0 5px, #bac9b414 5px 6px), #313c34;
    box-shadow: 0 0 0 5px #202823, 0 0 0 6px #536158;
}
.tape-transport-display--main .tape-wheel { border-color: #a6b4a5; background: radial-gradient(circle, #1c2420 0 17%, #d8dfd0 18% 23%, #465249 24% 100%); box-shadow: inset 0 0 0 4px #29342b; }
.tape-transport-display--main .tape-wheel i { width: 6px; margin-left: -3px; background: #d9e0d2; border-radius: 2px; box-shadow: none; }
.tape-transport-display--main .tape-display-readout { top: 18px; left: 22px; gap: 14px; }
.tape-transport-display--main .tape-display-readout strong { color: #e7eddf; font-size: 22px; letter-spacing: -.03em; font-weight: 600; }
.tape-transport-display--main .tape-display-readout span { color: #93a393; font-size: 9px; font-weight: 500; }
.tape-transport-display--main .tape-display-readout span:last-child { color: var(--tape-accent); }
.tape-transport-display--main .tape-display-readout .screen-index { min-width: auto; margin-right: 6px; color: #7e9382; font: 500 8px/1.3 var(--device-mono); letter-spacing: .08em; }
.tape-transport-display--main .tape-ribbon { border-top-color: #6d7b6d; border-bottom-color: #39473a; background: #273127; box-shadow: none; }
.tape-ribbon i:nth-child(1) { background: #b6cf9b; }
.tape-ribbon i:nth-child(2) { background: #a69bb9; }
.tape-ribbon i:nth-child(3) { background: #dd997d; }
.tape-ribbon i:nth-child(4) { background: #88abb4; }
.tape-transport-display--main .tape-head { border-color: #a7b3a4; border-radius: 3px; background: linear-gradient(90deg, #657565, #c6d0bd 48%, #83917e 52%); box-shadow: 0 3px 0 #15201970; }
.tape-transport-display--main .tape-speed-readout { top: 20px; right: 22px; }
.tape-speed-readout span, .tape-output-meter em { color: #8da18e; font-size: 8px; }
.tape-speed-readout strong { font-size: 10px; color: #c4d2bf; }
.tape-output-meter > span { width: 7px; border-color: #65775e; border-radius: 2px; }
.tape-output-meter i { border-radius: 1px; background: linear-gradient(#d98b63 0 15%, #d1c388 40%, #94bea1 100%); }
.tape-track-lights i.is-armed { box-shadow: 0 0 0 2px #b9c6b020; }
.tape-transport-display.tape-transport-display--main.is-recording { --tape-accent: #e49a77; border-color: #ad6d4f; box-shadow: 0 0 0 5px #d3d7cc, 0 0 0 6px #ad6d4f; }
body[data-transport-state="processing"] .transport-time { background: #e4d7b9; border-color: #b5a57b; }
body[data-transport-state="starting"] .transport-time { background: #e1decd; }
body[data-transport-state="recording"] .transport-state-label { color: #a0492e; }

/* Tape routing, tray and arrangement form one continuous working panel. */
.deck-track-selector { gap: 6px; padding-top: 15px; padding-bottom: 5px; }
.deck-track-selector > span { color: #737c6c; font-size: 9px; letter-spacing: .05em; }
.deck-track-selector button { min-height: 30px; padding: 6px 14px; border-color: #bfc5b6; border-radius: 5px; background: #f5f3eb; box-shadow: 0 1px 0 #fff inset, 0 1px 0 #c5cbbd; font: 600 10px/1 var(--device-mono); }
.deck-track-selector button[aria-pressed="true"] { border-color: #637b58; background: #c6d6b6; color: #334a2e; box-shadow: 0 1px 0 #e3efda inset; }
.record-bars-control { font-size: 9px; color: #748069; }
.record-bars-control select { border-radius: 4px; padding: 5px; border-color: #c4cabb; font: 600 10px/1 var(--device-mono); }
.deck-track-selector .deck-shortcuts { color: #7c8474; font-size: 9px; }
.input-rack { padding: 9px 12px; border-radius: 6px; background: #e7e6dd; border-color: #c7c9bd; box-shadow: 0 1px 0 #fbfcf6 inset; }
.input-source > label { color: #73816a; font-size: 8px; letter-spacing: .05em; }
.input-rack select { min-height: 30px; border-color: #bec6b4; border-radius: 4px; font-size: 11px; }
.input-connections > summary { font-size: 10px; }
.input-connections > summary span { font-size: 9px; }
.connection-grid { border-radius: 7px; background: #f2f3e9; border-color: #adbba4; box-shadow: 0 8px 24px #24341c25; }
.tape-beat-strip { gap: 8px; padding: 8px 11px; background: #edece3; border-radius: 6px; }
.tape-beat-strip > strong { font: 700 9px/1 var(--device-mono); text-transform: uppercase; letter-spacing: .04em; }
#tape-beat-name { font-size: 10px; }
.tape-beat-strip button, .tape-beat-strip select { min-height: 27px; border-color: #bec5b5; border-radius: 4px; background: #f8f6ed; box-shadow: 0 1px 0 #fff inset, 0 1px 0 #cbd0c0; font-size: 10px; }
.tape-beat-strip button[aria-pressed="true"] { border-color: #8a9860; background: #d8ddb5; }
.tape-beat-strip small { font-size: 9px; }
#tape-beat-position { font: 500 9px/1 var(--device-mono); }
#tape-beat-play[data-state="starting"], #drum-pattern-play[data-state="starting"] { color: #7c6634; border-color: #b5a476; background: #e7ddbd; border-style: dashed; }
.tape-editor { border-top-color: #b7c0ad; }
.tape-editor > summary { padding: 10px 2px; font: 600 10px/1.4 var(--device-mono); color: #5c6851; letter-spacing: .02em; }
.tape-actions button, .tape-actions select { min-height: 28px; border-radius: 4px; background: #f5f3e9; border-color: #c3cab7; font-size: 10px; }
.tape-actions .primary-action, .clip-editor .primary-action { color: #365a44; background: #d2e0c8; border-color: #9ab292; }
.tape-actions .danger-action { color: #935335; background: #f1e0cf; border-color: #d1ac91; }
.tape-machine { border-radius: 7px; background: #e1e6d9; box-shadow: 0 1px 2px #2c38251a inset; }
.tape-ruler span { color: #6a785e; font: 500 9px/1 var(--device-mono); }
.tape-track-head, .tape-track-controls { border-color: #c1cbb6; border-radius: 5px; background: #e8ebde; }
.track-number { border-radius: 3px; font-family: var(--device-mono); }
.tape-track-head strong { color: #4b5c40; }
.tape-track-head small { color: #75816c; font-family: var(--device-mono); }
.track-switches button { border-radius: 3px; background: #f3f5e9; font-family: var(--device-mono); }
.tape-lane { border-radius: 4px; border-color: #bbc7ac; background-color: #f1f3e6; }
.tape-lane.is-empty::before { color: #8b977c; font: 500 9px/1 var(--device-mono); }
.tape-region { border-radius: 4px; border-color: color-mix(in srgb, var(--track-color) 65%, #6a785f); box-shadow: 0 1px 0 #ffffefb0 inset; }
.tape-region.is-selected { outline: 1px solid #596a4b; outline-offset: 2px; }
.tape-playhead { background: var(--device-orange); }
.tape-footer-note { color: #78846c; font-size: 9px; }
.clip-editor { border-radius: 6px; background: #e9ecdf; }
.clip-editor h2 { color: #3f5134; font-size: 14px; }
.clip-editor label, .clip-timing-controls label { color: #647357; }
.clip-timing-controls button, .clip-editor input, .clip-editor select { border-color: #bdc9ae; border-radius: 4px; }

/* Sound keys: large clear original icons, with color confined to a signal edge. */
.sound-library { gap: 12px; }
.sound-group { padding: 12px; border-color: #c9ccbf; border-radius: 7px; background: #eeede5; box-shadow: 0 1px 0 #ffffff8a inset; }
.sound-group h2 { font: 700 10px/1.3 var(--device-mono); letter-spacing: .035em; text-transform: uppercase; color: #454e40; }
.sound-group-genres { margin: 4px 0 12px; font-size: 9px; color: #7e8874; }
.sound-group-icons { gap: 8px; }
.sound-choice { position: relative; padding: 14px; border: 1px solid #c5c9bc; border-bottom: 3px solid color-mix(in srgb, var(--sound-color) 60%, #9eaa91); border-radius: 6px; background: #faf8f1; box-shadow: 0 1px 0 #fff inset, 0 2px 0 #cdd1c3; color: #343d30; }
.sound-choice:hover { border-color: #87997a; background: #fffef5; box-shadow: 0 1px 0 #fff inset, 0 3px 0 #c1cbb3; }
.sound-choice svg { width: 76%; height: 76%; stroke-width: 1.45; }
.sound-choice.is-selected { color: #203c30; border-color: #58836a; border-bottom-color: #3f7259; background: #bcd3ba; box-shadow: 0 1px 3px #4463491f inset, 0 1px 0 #c1d2b9; }
.sound-choice.is-selected::after { position: absolute; top: 7px; right: 7px; width: 4px; height: 4px; border-radius: 50%; background: #315e47; content: ""; }
#sound-variations { gap: 6px; margin-top: 4px; }
#sound-variations button { min-height: 27px; padding: 5px 9px; border: 1px solid #bec8b2; border-radius: 4px; background: #f3f3e7; color: #596a4b; font: 500 9px/1.3 var(--device-mono); }
#sound-variations button[aria-pressed="true"] { color: #edf3e5; border-color: #485d3d; background: #586f4a; }
.sound-selection { padding: 9px 12px; border-radius: 5px; background: #e1e8d8; border-color: #b9c9ac; box-shadow: none; }
.sound-selection strong { color: #4a6340; font-size: 11px; }
.sound-selection #preset-name { color: #75856a; font-size: 10px; }
.status-pulse { background: #739d72; box-shadow: 0 0 0 3px #a7c29b38; }
.sound-selection #playing-notes { font: 500 9px/1 var(--device-mono); }

/* The piano is a permanent tactile playing surface, not another scrolling card. */
.sounds-view .keyboard-dock { margin-top: 10px; padding: 10px 12px; border-color: #bac3af; border-radius: 7px; background: #dadfd1; box-shadow: 0 1px 0 #f4f6ec inset; }
.keyboard-header { margin-bottom: 8px; }
.keyboard-kicker { font-size: 8px; color: #718364; }
.keyboard-header h2 { font-size: 11px; font-weight: 700; color: #465e38; }
.keyboard-header p { font-size: 9px; color: #718466; }
.keyboard-range-hint { margin-top: 6px; color: #718563; font: 500 8px/1.3 var(--device-mono); }
.octave-control button { width: 28px; height: 28px; border-color: #aebb9e; border-radius: 4px; background: #edf1e3; box-shadow: 0 1px 0 #f9fbf4 inset, 0 1px 0 #b7c6a5; }
.octave-control span, .octave-control strong { color: #647a53; font-family: var(--device-mono); }
.piano-viewport { border-radius: 5px; scrollbar-color: #8fa47e #c6d2ba; }
.piano { border-radius: 5px; border-color: #9eae8a; background: #b4c3a4; box-shadow: 0 2px 3px #2a3d2026 inset; }
.piano-key.is-white { background: #f7f8ef; border-right-color: #bfc9b1; border-radius: 0 0 3px 3px; box-shadow: 0 -4px 0 #d9dfce inset; }
.piano-key.is-black { background: #2c3728; border-color: #23301e; border-radius: 0 0 3px 3px; box-shadow: 0 -3px 0 #1b2517 inset; }
.piano-key.is-white.is-active { background: #b9d1ae; box-shadow: 0 -2px 0 #92ae81 inset; }
.piano-key.is-black.is-active { background: #5d8658; box-shadow: 0 -2px 0 #3c6038 inset; }

/* Drum machine: clear pad matrix and an integrated, restrained step display. */
.drum-heading { margin-bottom: 18px; }
.drum-key-map kbd { border-color: #cabca0; color: #89714e; background: #eee5d2; }
.drum-sequencer { padding: 14px; border-color: #c9c5b6; border-radius: 7px; background: #e8e6db; }
.drum-sequencer .module-heading h2 { font-size: 12px; }
.drum-pattern-toolbar { gap: 8px; }
.drum-pattern-toolbar label { font: 600 9px/1.3 var(--device-mono); color: #657454; }
.drum-pattern-toolbar button, .drum-pattern-toolbar select { min-height: 28px; padding: 5px 8px; border-color: #bdc6af; border-radius: 4px; background: #f5f4e9; font: 500 10px/1.3 var(--device-mono); box-shadow: 0 1px 0 #fff8 inset, 0 1px 0 #c6cfb8; }
#drum-pattern-play[aria-pressed="true"] { background: #d9d9ad; border-color: #969763; }
#drum-pattern-position { color: #6a7a59; font-size: 9px; }
.drum-pattern-caption { color: #7a866c; font-size: 9px; line-height: 1.5; }
.drum-pattern-grid { padding: 10px; border: 1px solid #c8c6b4; border-radius: 5px; background: #dfddcf; gap: 4px; }
.drum-pattern-grid > span { color: #7c8c6b; font-family: var(--device-mono); font-size: 8px; }
.drum-pattern-grid > .pattern-pad-name { color: #5d724c; }
.pattern-step { height: 24px; border-color: #c4c4b1; border-radius: 3px; background: #efeee0; box-shadow: 0 1px 0 #fffdf3 inset; }
.pattern-step.beat-start { border-left-color: #96aa83; }
.pattern-step[aria-pressed="true"] { background: #c8bd8a; border-color: #a59d70; box-shadow: 0 1px 0 #e7dfb7 inset; }
.pattern-step.is-accent[aria-pressed="true"] { background: #e0bd76; border-color: #b09660; }
.drum-pattern-grid .is-current { outline: 2px solid #bf704d; outline-offset: -2px; }
.pads-card, .sample-card { border-radius: 7px; background: #f1efe6; }
.drum-pads { gap: 9px; }
.drum-pad { min-height: 96px; border-color: #c4cbb7; border-radius: 6px; background: #f8f7ec; box-shadow: 0 3px 0 #bec9ae, 0 5px 8px #2534190d; }
.drum-pad::before { left: 10px; right: auto; top: 10px; width: 18px; height: 3px; border-radius: 1px; background: color-mix(in srgb, var(--pad-accent) 80%, #819274); }
.drum-pad-copy { padding-top: 8px; }
.drum-pad-copy strong { font-size: 12px; color: #405632; }
.drum-pad-copy small { color: #839077; font: 500 8px/1.3 var(--device-mono); }
.drum-pad.is-selected { border-color: #8ba077; box-shadow: 0 3px 0 #aebf98, 0 5px 8px #2534190d; }
.drum-pad.is-active { background: #d4dfc2; box-shadow: 0 1px 0 #a4b68d; transform: translateY(2px); }
.drum-pad kbd { border-color: #c4cdb5; background: #eff2e2; color: #667b52; font-size: 9px; }
.sample-identity strong { color: #4c5e3d; font-size: 15px; }
.sample-identity span, .sample-identity small { color: #7c896c; font-family: var(--device-mono); }
.sample-waveform { border-color: #4a5b44; border-radius: 5px; background: #242d23; }
.sample-controls label, .sampler-parameter span { color: #657653; }
.sample-controls output, .sampler-parameter output { color: #7e8e6d; font-family: var(--device-mono); }
.sample-actions button, .load-sample-button, .sample-toggles button, .melodic-options button { min-height: 29px; border-color: #c0cab2; border-radius: 4px; color: #536944; background: #f5f6e8; font-size: 10px; }
.sampler-controls { gap: 10px; }
.sampler-controls fieldset { border-color: #c9cfbc; border-radius: 5px; background: #eaeee0; }
.sampler-controls legend { color: #677e53; font: 600 9px/1 var(--device-mono); letter-spacing: .03em; }
.sampler-parameter input[type="number"] { border-color: #bdcbb0; border-radius: 3px; background: #f4f7e8; font-family: var(--device-mono); font-size: 10px; }
.sampler-edit-hint, .drop-note, .sample-toggles > span { color: #7c8a6d; font-size: 9px; }

.statusbar { border-top-color: #c6ccbc; color: #8b9680; background: #e0e4d6; font: 500 8px/1.4 var(--device-mono); }
.toast { border: 1px solid #718363; border-radius: 5px; color: #eff4e6; background: #3d5132; box-shadow: 0 4px 12px #24341c20; font-size: 11px; }
.shortcut-dialog { border-color: #9bab8b; border-radius: 8px; background: #eef1e3; }

@media (max-width: 1100px) {
    .topbar-actions { gap: 7px; }
    .audio-status { font-size: 8px; }
    .effect-control output { min-width: 24px; }
    .instrument-volume label span { max-width: 65px; }
    .tape-transport-display--main .tape-mechanism { left: 48px; right: 48px; }
}
@media (max-width: 700px) {
    .topbar { padding: 7px 8px; }
    .brand { margin-right: 5px; font-size: 11px; gap: 4px; }
    .brand svg { width: 14px; height: 14px; }
    .mode-index { display: none; }
    .view-button { min-height: 27px; padding: 4px 7px; }
    .transport { gap: 4px; }
    .transport-button { width: 30px; height: 30px; }
    .transport-time, .tempo-control, .tap-tempo-button { height: 30px; }
    .effects-rack { gap: 6px 8px; padding: 6px 8px; }
    .effect-control input { width: 34px; }
    .effect-control output { min-width: 24px; }
    .effect-control button { min-height: 21px; }
    .instrument-volume label span { max-width: 62px; }
    .workspace { padding: 14px 12px; }
    .tape-transport-display.tape-transport-display--main { min-height: clamp(210px, 36dvh, 340px); }
    .tape-transport-display--main .tape-mechanism { inset: 34px 24px 35px; }
    .tape-transport-display--main .tape-display-readout { top: 15px; left: 15px; gap: 8px; }
    .tape-transport-display--main .tape-display-readout strong { font-size: 17px; }
    .tape-transport-display--main .tape-display-readout span { font-size: 8px; }
    .tape-transport-display--main .tape-speed-readout { top: 16px; right: 15px; }
    .tape-transport-display--main .tape-output-meter { right: 15px; top: 62px; }
    .tape-transport-display--main .tape-output-meter > span { height: 80px; }
    .tape-transport-display--main .tape-display-readout .screen-index { display: none; }
    .deck-track-selector { gap: 5px; }
    .deck-track-selector button { padding: 6px 10px; }
    .tape-beat-strip { gap: 7px; }
    .tape-beat-strip small { flex-basis: 100%; }
    .sound-library { gap: 10px; }
    .sound-group { padding: 10px; }
    .sound-group-icons { gap: 7px; }
    .sound-choice { padding: 12px; }
    .sounds-view .keyboard-dock { padding: 8px; }
    .keyboard-header h2 { font-size: 10px; }
    .drum-pad { min-height: 80px; padding: 10px; }
    .drum-pad-copy strong { font-size: 11px; }
    .drum-pattern-grid { padding: 7px; }
}
@media (max-height: 600px) {
    .topbar { padding-block: 5px; }
    .effects-rack { padding-block: 4px; }
    .sounds-view .keyboard-dock { padding: 7px 9px; margin-top: 7px; }
    .sounds-view .keyboard-header { margin-bottom: 5px; }
    .sounds-view .piano { height: 76px; }
}
@media (pointer: coarse) {
    .transport-button { width: 36px; height: 36px; }
    .view-button, .effect-control button, .deck-track-selector button,
    .tape-beat-strip button, .sample-actions button,
    .load-sample-button, .sample-toggles button { min-height: 32px; }
    .pattern-step { height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    button, select, .load-sample-button, .back-to-tape,
    .tape-pack, .tape-output-meter i { transition: none; }
    .transport-button.is-recording .record-dot { animation: none; }
}
.drum-catalog-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0; }
.drum-catalog-row label { font: 700 9px var(--font-mono, monospace); text-transform: uppercase; letter-spacing: .07em; }
.drum-catalog-row select { flex: 1; min-width: 130px; max-width: 290px; padding: 5px 8px; font-size: 11px; }
.drum-catalog-row small { color: var(--muted); font-size: 10px; }

/* Keep the chosen sound and its variations in reach while browsing the bank. */
.sound-context {
    position: sticky;
    top: 0;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-bottom: 12px;
    padding: 7px 9px;
    border: 1px solid #b9c9ac;
    border-radius: 5px;
    background: #e1e8d8;
    box-shadow: 0 3px 8px #30432c12;
}
.sound-context .sound-selection { flex: 1 1 180px; min-width: 0; margin: 0; padding: 0; gap: 8px; border: 0; background: transparent; box-shadow: none; }
.sound-context .sound-selection > div { display: flex; flex-wrap: wrap; align-items: center; min-width: 0; gap: 3px 8px; }
.sound-context #playing-notes { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-context #sound-variations { flex: 0 1 auto; margin: 0; padding: 0; gap: 4px; }
.sound-context #sound-variations button { padding-inline: 7px; }

/* Native file inputs remain keyboard reachable; their labels carry the focus ring. */
.sample-actions { position: relative; }
.visually-hidden-file { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.visually-hidden-file:focus-visible + .load-sample-button { outline: 2px solid #477c73; outline-offset: 3px; }
.sample-identity { flex-wrap: wrap; gap: 8px 12px; }
.sample-identity > div:first-child { flex: 1 1 180px; min-width: 0; }
.sample-identity strong, .sample-identity small { overflow-wrap: anywhere; }
.sample-actions { flex-shrink: 0; flex-wrap: wrap; }

/* Pan the arrangement locally instead of clipping its lanes and faders. */
.tape-view .tape-machine { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
.tape-view .tape-tracks { min-width: 528px; }
.tape-view .tape-ruler { position: relative; display: block; min-width: 240px; min-height: 12px; }
.tape-view .tape-ruler span { position: absolute; top: 0; white-space: nowrap; }
.tape-view .tape-ruler span:first-child { left: 0; }
.tape-view .tape-ruler span:nth-child(2) { left: 25%; transform: translateX(-50%); }
.tape-view .tape-ruler span:nth-child(3) { left: 50%; transform: translateX(-50%); }
.tape-view .tape-ruler span:nth-child(4) { left: 75%; transform: translateX(-50%); }
.tape-view .tape-ruler span:last-child { right: 0; }
.tape-machine:focus-visible { outline: 2px solid #477c73; outline-offset: -3px; }
.connection-grid { max-height: min(560px, 70dvh); overflow-y: auto; }

.tape-end-warning { position: absolute; top: calc(50% - 28px); left: 50%; transform: translateX(-50%); z-index: 8; display: flex; align-items: center; justify-content: center; gap: clamp(3px, .6vw, 9px); max-width: 45%; padding: 5px 8px; border-radius: 20px; background: #17201bc0; pointer-events: none; }
.tape-end-warning[hidden] { display: none; }
.tape-end-warning i { display: block; width: 9px; height: 9px; flex: 0 1 9px; min-width: 4px; border-radius: 50%; border: 1px solid #ff786a80; background: #672d29; }
.tape-end-warning i.is-complete { background: #ed665b; opacity: .45; }
.tape-end-warning i.is-current { background: #ff7466; border-color: #ffb5ab; box-shadow: 0 0 9px #ff6159a0; animation: tape-end-blink var(--bar-blink, 1s) steps(2, jump-none) infinite; }
@keyframes tape-end-blink { from { opacity: 1; } to { opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .tape-end-warning i.is-current { animation: none; } }

.tape-bar-end-zone {
    position: absolute; top: 0; bottom: 0; z-index: 4; pointer-events: none;
    background: #d89a2730; border-right: 2px solid #bd7925;
    opacity: .45;
}
.tape-bar-cue {
    position: absolute; right: 6px; bottom: 6px; z-index: 5; pointer-events: none;
    max-width: calc(100% - 12px); padding: 5px 7px; border: 1px solid #89967c;
    border-radius: 3px; background: #f8faefeF; color: #45513d;
    font: 700 10px/1.2 var(--device-mono); letter-spacing: .02em;
}
.tape-lane.is-near-bar-end { border-color: #b8781e; box-shadow: inset 0 0 0 2px #dba83c70; }
.tape-lane.is-near-bar-end .tape-bar-end-zone { opacity: 1; background: #e5a42a50; }
.tape-lane.is-near-bar-end .tape-bar-cue { color: #4b2f08; border-color: #ba7c20; background: #ffe1a1; }

@media (max-width: 700px) {
    .effects-rack { min-width: 0; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: #8fa47e #c6d0ba; }
    .effects-rack > * { flex: 0 0 auto; }
    .connection-grid { position: static; width: 100%; max-width: none; max-height: none; margin-top: 6px; padding: 12px; grid-template-columns: minmax(0, 1fr); overflow: visible; box-shadow: var(--shadow); }
    .sound-context { gap: 5px 8px; padding: 6px 8px; }
}