/* Мікшер: tactile radio controls (see mixer.mjs). Pixel canvases scale with image-rendering:pixelated;
   labels are hand-lettered on masking tape. */
.mx-hidden{display:none!important}
.mx-strip{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:18px;margin-top:16px;padding:14px 16px 12px;background:#44382e;border:2px solid #697e7d;border-radius:6px;box-shadow:inset 0 3px 8px #2a2017a6,0 2px 0 #30261e}
.mx-cell{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.mx-ctl{position:relative;display:block;touch-action:none;cursor:grab;outline:none;border-radius:50%;-webkit-tap-highlight-color:transparent}
.mx-ctl canvas{display:block;width:100%;height:100%;image-rendering:pixelated;pointer-events:none}
.mx-ctl.is-grabbed{cursor:grabbing}
.mx-ctl:focus-visible{outline:2px solid #e6bf8a;outline-offset:3px}
.mx-ctl.is-off{opacity:.4;cursor:not-allowed}
.mx-rotary{width:90px;height:90px}
.mx-timer .mx-ctl{width:116px;height:124px;border-radius:40% 40% 20% 20%}
.mx-knob{width:72px;height:72px}
.mx-fader{width:32px;height:132px;border-radius:3px}
.mx-tape{display:inline-block;padding:2px 8px 3px;background:#e6d7a7;background-image:repeating-linear-gradient(90deg,#0000 0 3px,#fff2 3px 4px);color:#3b3226;font:600 12px/1.15 "Segoe Print","Chalkboard SE","Comic Sans MS","Bradley Hand",cursive;letter-spacing:.01em;white-space:nowrap;transform:rotate(var(--tilt,-2deg));clip-path:polygon(0 12%,3% 0,7% 9%,12% 0,100% 0,97% 14%,100% 30%,97% 50%,100% 72%,96% 88%,100% 100%,9% 100%,5% 91%,0 100%,3% 70%,0 48%,3% 28%);box-shadow:0 1px 0 #0002;opacity:.96}
/* Tape counter */
.mx-counter-cell{align-items:stretch;gap:6px}
.mx-counter{padding:6px;background:#2f251d;border:2px solid #211a13;border-radius:4px;box-shadow:inset 0 2px 0 #0006,0 1px 0 #5f7472}
.mx-counter canvas{display:block;width:100%;max-width:258px;margin:auto;aspect-ratio:86/26;image-rendering:pixelated}
.mx-counter-foot{display:flex;align-items:center;gap:8px;min-height:32px;font:9px ui-monospace,monospace;letter-spacing:.08em;color:#b7c9c0;text-transform:uppercase}
.mx-section{padding:2px 6px;background:#d8d1bb;color:#2c332f;border-radius:1px;box-shadow:0 1px 0 #0004;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}
.mx-total{white-space:nowrap}
.mx-counter-foot #repeat-track{margin-left:auto;min-width:38px;min-height:32px;font-size:15px;border-radius:3px;background:#a7bab6;color:#3c402a;box-shadow:0 3px 0 #697e7c}
.mx-counter-foot #repeat-track[aria-pressed=true]{transform:translateY(2px);box-shadow:0 1px 0 #697e7c;background:#c4e1a3}
.mx-timer-read{font:10px ui-monospace,monospace;color:#c7d6cd;min-height:12px;white-space:nowrap}
/* Drawer handle */
.mx-drawer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-width:78px;min-height:92px;padding:8px 10px;background:#a7bab6;color:#3c402a!important;border-radius:3px;box-shadow:0 5px 0 #697e7c,inset 0 1px 0 #e0e6d9;font:600 12px Georgia,serif}
.mx-drawer small{font:9px ui-monospace,monospace;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.mx-drawer-grip{width:36px;height:7px;border:2px solid #56706e;border-top:0;border-radius:0 0 5px 5px}
.mx-drawer[aria-expanded=true]{transform:translateY(4px);box-shadow:0 1px 0 #697e7c,inset 0 1px 0 #e0e6d9}
.mx-drawer:hover .mx-drawer-grip{border-color:#8e3f55}
/* Printed credit label */
.has-mixer .song-credit{display:table;margin:10px auto 0;padding:4px 10px;background:#dcd5bf;color:#3c3f36;font:9px/1.5 ui-monospace,monospace;letter-spacing:.06em;border:1px solid #b3aa8e;border-radius:1px;box-shadow:0 2px 0 #30261e,inset 0 0 0 2px #e9e3cf;max-width:100%;text-align:center}
.has-mixer .song-credit:empty{display:none}
.mx-deck-credit{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px;padding:10px 6px 0;border-top:1px dashed #a6948555}
.has-mixer .mx-deck-credit .song-credit{margin:0}
:where(.mx-deck-credit) a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;margin-left:auto;border:1px solid #786555;border-radius:3px;padding:0 18px;font-size:10px;color:#d6d8c8;text-decoration:none}
.has-mixer .song-credit a{color:#6c3346}
.has-mixer .archive-credit{display:block;margin:8px 0 0;background:none;box-shadow:none;border:0;color:#b7c9c0;text-align:left}
/* The desk */
.mx-deck{margin-top:14px;padding:12px 14px 12px;background:linear-gradient(90deg,#5b4637 0 10px,#4e443b 10px calc(100% - 10px),#5b4637 calc(100% - 10px));border:2px solid #382d24;border-top:4px solid #7d6250;border-radius:4px;box-shadow:0 6px 0 #2c231c,inset 0 2px 0 #ffffff10}
.mx-deck.mx-anim{animation:mx-slide var(--mo-slow,333ms) var(--mo-steps-slow,steps(5))}
@keyframes mx-slide{from{transform:translateY(-15px);opacity:0;clip-path:inset(0 0 100% 0)}to{transform:none;opacity:1;clip-path:inset(0 0 0 0)}}
.mx-deck-top{display:flex;align-items:center;gap:14px;padding:0 6px 10px;border-bottom:1px dashed #a6948555}
.mx-reels{width:300px;height:96px;image-rendering:pixelated;flex:none}
.mx-deck-brand strong{display:block;font:italic 16px Georgia,serif;color:#dbe6d9}
.mx-deck-brand span{font:9px ui-monospace,monospace;letter-spacing:.14em;color:#a8bcb7;text-transform:uppercase}
.mx-desk{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:12px 6px 4px}
.mx-faders{display:flex;gap:6px;padding:10px 8px 8px;background:#44382e;border:2px solid #322821;border-radius:3px;box-shadow:inset 0 2px 5px #0006}
.mx-channel{display:flex;flex-direction:column;align-items:center;gap:6px;width:58px}
.mx-channel .mx-tape{font-size:11px;padding:2px 6px}
.mx-read{font:10px ui-monospace,monospace;color:#c7d6cd;min-height:12px}
.mx-right{display:flex;flex-direction:column;gap:12px;min-width:0}
.mx-knobs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:10px 6px;background:#44382e;border:2px solid #322821;border-radius:3px;box-shadow:inset 0 2px 5px #0006}
.mx-knob-cell{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.mx-knob-cell .mx-tape{font-size:11px}
.mx-knob-cell .mx-read{text-align:center;font-size:9px;white-space:nowrap}
.mx-keys{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:10px;align-items:stretch}
.mx-key,.mx-slot{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:76px;padding:8px 6px;background:#a7bab6;color:#3c402a!important;border-radius:3px;box-shadow:0 5px 0 #697e7c,inset 0 1px 0 #e0e6d9}
.mx-key:active:not(:disabled),.mx-key[aria-pressed=true]{transform:translateY(4px);box-shadow:0 1px 0 #697e7c,inset 0 1px 0 #e0e6d9}
.mx-key-cap{font-size:20px;line-height:1}
.mx-rec .mx-key-cap{color:#c4475d}
.mx-rec[aria-pressed=true]{background:#d9b4b4}
.mx-rec[aria-pressed=true] .mx-key-cap{animation:mx-blink 1s steps(1) infinite}
@keyframes mx-blink{50%{opacity:.25}}/* LED: 1 s, on .5 s / off .5 s (docs/MOTION.md) */
.mx-slot{background:#44382e;color:#dbe5df!important;box-shadow:inset 0 2px 5px #0006;border:2px solid #322821}
.mx-slot canvas{width:92px;height:32px;image-rendering:pixelated}
.mx-slot[aria-pressed=true]{border-color:#c4475d}
.mx-slot-read{font:9px ui-monospace,monospace;color:#b7c9c0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mx-deck-foot{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;padding:10px 6px 0;border-top:1px dashed #a6948555;margin-top:10px}
.mx-note{flex:1 1 260px;margin:0;font:italic 12px/1.5 Georgia,serif;color:#c3d0c8}
.mx-reset{min-height:36px;padding:0 10px;font-size:11px;color:#b7c9c0;text-decoration:underline;text-underline-offset:3px}
.mx-status{flex:1 1 100%;margin:0;font:10px/1.5 ui-monospace,monospace;color:#c4e1a3;min-height:15px}
.mx-save{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;background:#e6d7a7;color:#3b3226;font:600 12px "Segoe Print","Chalkboard SE","Comic Sans MS",cursive;text-decoration:none;box-shadow:0 3px 0 #8f8466;transform:rotate(-1deg)}
.mx-save:hover{background:#f0e3b8}
.mx-key:disabled,.mx-slot:disabled,.mx-reset:disabled{opacity:.4}
.mx-rec[aria-pressed=true]:disabled{opacity:1;cursor:progress}
.receiver.band-live .mx-deck .mx-knobs,.receiver.band-live .mx-keys{opacity:.45}
.reduced .mx-deck.mx-anim,.reduced .mx-rec[aria-pressed=true] .mx-key-cap{animation:none}
@media (prefers-reduced-motion:reduce){.mx-deck.mx-anim,.mx-rec[aria-pressed=true] .mx-key-cap{animation:none}}
@media (max-width:640px){
 .mx-strip{grid-template-columns:auto 1fr auto;gap:10px;padding:10px}
 .mx-counter-cell{grid-column:1/-1;order:-1}
 .mx-drawer{grid-column:auto;min-height:80px;min-width:0}
 .mx-rotary{width:60px;height:60px}
 .mx-deck{padding:10px 8px}
 .mx-reels{width:200px;height:64px}
 .mx-deck-top{flex-wrap:wrap;gap:8px}
 .mx-deck-brand strong{font-size:14px}
 .mx-desk{grid-template-columns:1fr;gap:12px;padding:10px 0 4px}
 .mx-faders{justify-content:space-between;padding:8px 4px}
 .mx-channel{width:auto;flex:1}
 .mx-knob{width:48px;height:48px}
 .mx-keys{grid-template-columns:1fr 1fr}
 .mx-slot{grid-column:1/-1;flex-direction:row;min-height:56px}
}