/* AQUA 303 : Y2K / Frutiger Aero
   Concept : deux vraies machines (basse en aluminium brossé, boîte à rythmes gris clair) posées dans une fenêtre de verre
   devant un paysage de ciel et de collines. Les machines sont matérielles et sobres ; l'aqua, le brillant et le verre
   restent autour (fenêtre, écran, bulles). Les réglages sont rangés en groupes sous des barres de titre sombres.
   Le plateau a une taille fixe (1500 px) mise à l'échelle par app.js : aucun défilement. */
:root {
  --ink: #06385f;
  --aqua-deep: #0a7fc4;
  --edge: rgba(255, 255, 255, .9);
  --font-display: 'Michroma', 'Segoe UI', sans-serif;
  --font-ui: 'Nunito', 'Segoe UI', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-ui); font-weight: 600; color: var(--ink); overflow: hidden;
  background: linear-gradient(#2c9fe0 0%, #78d3f6 55%, #b4ee86 100%);
  -webkit-tap-highlight-color: transparent;
}
body.stack { overflow: auto; height: auto; min-height: 100%; }
button, select { font: inherit; color: inherit; }

/* ---------- Décor ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
#bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
.bubble {
  position: absolute; bottom: -160px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, #fff 0 5%, rgba(255, 255, 255, 0) 15%),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .6) 0 6%, rgba(255, 255, 255, 0) 18%),
    radial-gradient(circle at 50% 50%, rgba(190, 240, 255, .06) 56%, rgba(190, 240, 255, .32) 72%, rgba(255, 255, 255, .8) 84%, rgba(110, 205, 255, .3) 100%);
  box-shadow: inset 0 0 14px rgba(255, 255, 255, .55), inset 7px -5px 13px rgba(255, 120, 210, .22), inset -7px 5px 13px rgba(70, 220, 255, .34), 0 0 12px rgba(120, 220, 255, .25);
  animation: rise linear infinite;
}
@keyframes rise { to { transform: translate(var(--sway, 30px), -125vh); } }

/* ---------- Plateau (échelle appliquée par app.js) ---------- */
.stage { position: absolute; left: 0; top: 0; width: 1500px; transform-origin: 0 0; }
body.stack .stage { position: relative; width: 100%; transform: none !important; }

.window {
  position: relative; border-radius: 16px; border: 1px solid var(--edge); overflow: hidden; padding-bottom: 8px;
  background: linear-gradient(rgba(255, 255, 255, .42), rgba(170, 228, 255, .3));
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  box-shadow: 0 24px 60px rgba(0, 60, 120, .42), inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .3);
}
.titlebar {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 6px 14px; color: #fff;
  background: linear-gradient(#58d6f7, #1aa6e0 52%, #0b86c9 54%, #38c4ee);
  border-bottom: 1px solid rgba(255, 255, 255, .75); text-shadow: 0 1px 2px rgba(0, 60, 110, .7);
}
.titlebar::after { content: ''; position: absolute; inset: 0 0 50% 0; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, .55), rgba(255, 255, 255, .08)); }
.logo { font-family: var(--font-display); font-size: 16px; letter-spacing: .08em; }
.logo b { margin-left: 4px; color: #eaffb8; }
.tag { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; opacity: .95; }
.wbtns { margin-left: auto; display: flex; gap: 6px; }
.wbtns i { width: 22px; height: 16px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .85); background: linear-gradient(rgba(255, 255, 255, .7), rgba(120, 210, 245, .5)); box-shadow: 0 1px 2px rgba(0, 50, 100, .4); }
.wbtns i.x { background: linear-gradient(#ffb09a, #e5482b 55%, #ff7d5c); width: 38px; }
.wbtns i { position: relative; display: block; }
.wbtns i::after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-weight: 800; font-size: 11px; line-height: 1; text-shadow: 0 1px 2px rgba(0, 50, 100, .7); }
.wbtns i:nth-child(1)::after { content: "\2013"; }
.wbtns i:nth-child(2)::after { content: "\25A1"; }
.wbtns i.x::after { content: "\2715"; font-size: 12px; text-shadow: 0 1px 2px rgba(120, 20, 0, .8); }

.deck { display: flex; flex-direction: column; gap: 14px; padding: 12px 14px 2px; }
.machine { position: relative; border-radius: 10px; padding: 8px 20px 12px; display: flex; flex-direction: column; gap: 8px; }

/* ---------- Basse : aluminium brossé, flancs noirs, sérigraphie ---------- */
.m303 {
  color: #1f2327; border: 1px solid #7f858b; border-left: 12px solid #26282c; border-right: 12px solid #26282c;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .24) 0 1px, rgba(0, 0, 0, .035) 1px 2px),
    linear-gradient(#eceff1 0%, #cfd3d7 35%, #bcc1c6 70%, #cdd1d5 100%);
  box-shadow: 0 10px 22px rgba(0, 40, 80, .45), inset 0 1px 0 #fff, inset 0 -3px 0 #8a9096;
}
.m303 .mhead { border-bottom: 2px solid #1f2327; padding-bottom: 6px; }
.m303 .brand b { font-family: var(--font-display); font-size: 17px; letter-spacing: .08em; color: #1f2327; font-weight: 400; }
.m303 .brand span { margin-left: 10px; font-size: 13px; font-weight: 800; letter-spacing: .24em; color: #e4531f; }
.m303 .brand em { margin-left: 14px; font-style: normal; font-size: 9px; letter-spacing: .22em; font-weight: 800; color: #4b5157; }
.m303 .klabel { color: #1f2327; }
.m303 .plabel { color: #1f2327; }

/* ---------- Boîte à rythmes : coque gris clair, liseré orange, touches de couleur ---------- */
.m909 {
  color: #2a2a26; border: 1px solid #8c897d; border-top: 6px solid #ee5a2a;
  background:
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .018) 0 1px, rgba(255, 255, 255, .06) 1px 2px),
    linear-gradient(#efede6, #dcd9cd 50%, #cfccc0);
  box-shadow: 0 10px 22px rgba(0, 40, 80, .45), inset 0 1px 0 #fff, inset 0 -4px 0 #aeab9f;
}
.m909 .mhead { border-bottom: 2px solid #2a2a26; padding-bottom: 6px; }
.m909 .brand b { font-family: var(--font-display); font-size: 17px; letter-spacing: .1em; font-weight: 400; color: #2a2a26; }
.m909 .brand span { margin-left: 10px; font-size: 11px; font-weight: 800; letter-spacing: .22em; color: #6a685d; }
.m909 .bar9 { display: inline-block; vertical-align: middle; width: 54px; height: 7px; margin-left: 12px; background: linear-gradient(90deg, #e8352a 0 25%, #ff8a2b 25% 50%, #ffd23a 50% 75%, #f7f4ea 75%); border: 1px solid #5d5b50; }
.m909 .klabel { color: #2a2a26; }
.m909 .dial .t { background: #7a776c; }

.mhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.mhead .brand { margin-right: auto; white-space: nowrap; }
.mbtns { display: flex; gap: 6px; flex-wrap: wrap; }

.screw { position: absolute; width: 9px; height: 9px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fafafa, #9a9ea3 60%, #5f6368); box-shadow: 0 1px 1px rgba(0, 0, 0, .5), inset 0 0 0 .5px rgba(0, 0, 0, .35); }
.screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 4px; height: 1.2px; background: rgba(0, 0, 0, .55); transform: rotate(35deg); }
.screw.a { left: 6px; top: 6px; } .screw.b { right: 6px; top: 6px; } .screw.c { left: 6px; bottom: 6px; } .screw.d { right: 6px; bottom: 6px; }

/* ---------- Touches matérielles ---------- */
.pill {
  padding: 4px 10px; border-radius: 3px; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: #26272a;
  border: 1px solid #6c6f74; background: linear-gradient(#fbfbf8, #d9d9d3 55%, #c3c3bb);
  box-shadow: 0 2px 0 #6b6e73, 0 3px 4px rgba(0, 0, 0, .3), inset 0 1px 0 #fff; transition: transform .06s, box-shadow .06s;
}
.pill:hover { filter: brightness(1.04); }
.pill:active, .pill.on { transform: translateY(1px); box-shadow: 0 1px 0 #6b6e73, inset 0 1px 2px rgba(0, 0, 0, .25); }
.pill.on { background: linear-gradient(#ffd9a0, #ffa13a); border-color: #b8650f; color: #3a1d00; }
@keyframes blink { 50% { filter: brightness(1.3); } }

/* ---------- Groupes de réglages : barre de titre sombre, potards avec le nom au-dessus ---------- */
.band { display: flex; align-items: flex-start; gap: 4px; padding-bottom: 6px; }
.grp { display: flex; flex-direction: column; min-width: 0; }
.tb { background: #3b3f43; color: #ff8a3d; font-size: 10px; letter-spacing: .08em; font-weight: 800; text-align: center; padding: 3px 2px; border-radius: 1px; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18); }
.kg { display: grid; gap: 8px 4px; padding: 8px 2px 2px; justify-items: center; align-items: end; }
.wavebox { display: flex; flex-direction: column; gap: 6px; align-items: center; align-self: center; }
.wavebtns { display: flex; gap: 6px; }
.plabel { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; }

/* ---------- Potards ---------- */
.knobrow { display: flex; align-items: flex-end; gap: 14px; }
.knob { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 66px; outline: none; touch-action: none; user-select: none; -webkit-user-select: none; cursor: ns-resize; }
.dial { position: relative; width: 52px; height: 52px; border-radius: 50%; }
.dial .t { position: absolute; left: 50%; top: 50%; width: 2px; height: 4px; margin: -2px -1px; border-radius: 1px; background: #5d6670; }
.dial .t:nth-child(1), .dial .t:nth-child(6), .dial .t:nth-child(11) { height: 6px; width: 2.5px; background: #1f2327; }
.cap {
  position: absolute; inset: 9px; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, transparent 62%, rgba(0, 0, 0, .55) 100%), repeating-conic-gradient(from 0deg, #17181b 0deg 3deg, #34363b 3deg 6deg);
  box-shadow: 0 5px 6px rgba(0, 0, 0, .5), 0 1px 1px rgba(0, 0, 0, .6), inset 0 1px 1px rgba(255, 255, 255, .28);
}
.cap::before {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 42%), conic-gradient(from 20deg, #3b3d42, #787b82, #3b3d42 22%, #1e1f23 40%, #5f6269 58%, #2a2b2f 78%, #3b3d42);
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset 0 -2px 3px rgba(0, 0, 0, .6), 0 1px 2px rgba(0, 0, 0, .6);
}
.cap::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; background: radial-gradient(circle at 40% 30%, #4a4d54, #17181b 80%); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .8), 0 1px 0 rgba(255, 255, 255, .15); }
.cap .mark { position: absolute; left: 50%; top: 1px; width: 3px; height: 11px; margin-left: -1.5px; border-radius: 2px; z-index: 2; background: linear-gradient(#fff, #e7edf2); box-shadow: 0 0 3px rgba(255, 255, 255, .7), 0 1px 1px rgba(0, 0, 0, .6); }
.knob.alt .cap::before { background: radial-gradient(circle at 34% 24%, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 42%), conic-gradient(from 20deg, #aeb2b8, #f1f3f5, #aeb2b8 22%, #7d8188 40%, #d9dce0 58%, #9a9ea5 78%, #aeb2b8); }
.knob.alt .cap::after { background: radial-gradient(circle at 40% 30%, #fafbfc, #a4a8af 80%); }
.knob.alt .cap .mark { background: #1b1c1f; box-shadow: none; }
.klabel { order: -2; font-size: 9.5px; letter-spacing: .06em; font-weight: 800; text-transform: uppercase; text-align: center; line-height: 1.05; }
.dial { order: -1; }
.kval { display: none; }
.knob.sm { width: 66px; }
.knob.md .dial { width: 66px; height: 66px; }
.knob.md .cap { inset: 11px; }
.knob.md .cap::after { inset: 13px; }
.knob.md .cap .mark { height: 14px; }
.knob.vol { width: 108px; }
.knob.vol .dial { width: 96px; height: 96px; }
.knob.vol .dial .t { height: 6px; }
.knob.vol .dial .t:nth-child(1), .knob.vol .dial .t:nth-child(6), .knob.vol .dial .t:nth-child(11) { height: 9px; width: 3px; }
.knob.vol .cap { inset: 15px; background: radial-gradient(circle at 50% 50%, transparent 66%, rgba(0, 0, 0, .6) 100%), repeating-conic-gradient(from 0deg, #0c0c0e 0deg 2deg, #232427 2deg 4deg); box-shadow: 0 7px 9px rgba(0, 0, 0, .55), 0 1px 1px #000, inset 0 1px 1px rgba(255, 255, 255, .22); }
.knob.vol .cap::before { inset: 5px; background: radial-gradient(circle at 36% 26%, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 46%), radial-gradient(circle, #2b2c30, #131316 85%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .3), inset 0 -3px 4px rgba(0, 0, 0, .8), 0 1px 2px #000; }
.knob.vol .cap::after { inset: 15px; background: radial-gradient(circle at 40% 30%, #1d1e21, #0b0b0d 85%); }
.knob.vol .cap .mark { top: 1px; height: 20px; width: 4px; margin-left: -2px; background: #fff; }

/* ---------- Basse : clavier de notes, touches de fonction, 16 pas ---------- */
.entry { display: grid; grid-template-columns: 480px 156px minmax(0, 1fr); gap: 16px; align-items: end; padding-top: 4px; border-top: 1px solid rgba(31, 35, 39, .35); }
.piano { display: grid; grid-template-columns: repeat(16, 1fr); grid-template-rows: 26px 34px; gap: 4px 0; padding-top: 8px; }
.pk {
  margin: 0 2px; padding: 0; border: 1px solid #101114; border-radius: 3px; color: #f0f1f2; font-size: 10px; font-weight: 800; cursor: pointer;
  background: linear-gradient(#5a5d63, #34363b 55%, #26282c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #0a0a0c;
}
.pk.b { background: linear-gradient(#383a3f, #1d1f23 55%, #111214); }
.pk:hover { filter: brightness(1.2); }
.pk:active { transform: translateY(1px); box-shadow: 0 1px 0 #0a0a0c; }
.ctl { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding-top: 8px; }
.ctl .run { grid-column: 1 / -1; }
.steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px; padding-top: 8px; }
.stp { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.stp.g { margin-left: 4px; }
.led { width: 10px; height: 5px; border-radius: 1px; background: #4d1d1a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); transition: background .05s; }
.led.now { background: #3dff5a; box-shadow: 0 0 8px 2px rgba(60, 255, 90, .9); }
.skey {
  position: relative; width: 100%; height: 56px; padding: 0; cursor: pointer; border: 1px solid #101114; border-radius: 4px; color: #f4f4f4; font-weight: 800;
  background: linear-gradient(#55585e, #34363b 55%, #26282c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 0 #0a0a0c;
}
.skey .nt { display: block; font-size: 15px; margin-top: 6px; }
.skey .ox { position: absolute; top: 4px; right: 4px; font-size: 8px; color: #8fc8ff; }
.skey .la, .skey .ls { position: absolute; bottom: 5px; width: 7px; height: 7px; border-radius: 50%; background: #3a2a28; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7); }
.skey .la { left: 7px; } .skey .ls { right: 7px; }
.skey .la.on { background: #ff5a3c; box-shadow: 0 0 6px 2px rgba(255, 80, 50, .9); }
.skey .ls.on { background: #6be04a; box-shadow: 0 0 6px 2px rgba(100, 230, 70, .9); }
.skey.has { background: linear-gradient(#6d7178, #484b53 55%, #34363b); }
.skey.sel { outline: 2px solid #ffa13a; outline-offset: 1px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 0 #0a0a0c, 0 0 12px rgba(255, 161, 58, .85); }
.skey:hover { filter: brightness(1.15); }
.sn { font-size: 9px; font-weight: 800; opacity: .75; transition: color .1s, opacity .1s; }
.sn.now { opacity: 1; color: #e4531f; text-shadow: 0 0 6px rgba(255, 120, 40, .8); }

/* ---------- Boîte à rythmes : bandeau central ---------- */
.mid { display: flex; align-items: center; gap: 22px; padding: 4px 0; border-top: 1px solid rgba(42, 42, 38, .3); }
.bank { display: grid; grid-template-columns: repeat(4, 30px); gap: 12px 16px; margin-left: 6px; }
.ab { width: 30px; height: 30px; padding: 0; cursor: pointer; border-radius: 4px; border: 1px solid #6d4a1c; background: linear-gradient(#d9b27a, #a67c3e); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #5a3d14; font-size: 12px; font-weight: 800; color: #2a1a05; }
.ab:active { transform: translateY(1px); }
.ab.on { background: linear-gradient(#ffd99a, #ff9a2e); box-shadow: inset 0 1px 0 #fff, 0 0 10px rgba(255, 150, 40, .9); }
.disp { width: 450px; padding: 8px 12px; border: 1px solid #9a9a92; border-radius: 3px; background: linear-gradient(#ebebe4, #dcdcd3); display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 1px 0 #fff; }
.lcd { position: relative; height: 56px; border-radius: 5px; overflow: hidden; border: 2px solid #6a6c70; box-shadow: inset 0 3px 10px rgba(0, 20, 50, .85), 0 1px 0 #fff; background: linear-gradient(#08304f, #04192e); }
.lcd canvas { width: 100%; height: 100%; display: block; }
.lcd::after { content: ''; position: absolute; inset: 0 0 52% 0; background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, 0)); pointer-events: none; }
.lcdtext { position: absolute; left: 8px; top: 4px; font-family: var(--font-display); font-size: 9px; letter-spacing: .1em; color: #8df1ff; text-shadow: 0 0 8px rgba(40, 220, 255, .9); }
.lcdtext em { font-style: normal; margin-left: 8px; color: #d6ff93; text-shadow: 0 0 8px rgba(160, 255, 60, .9); }
.lcdtext em.kit { color: #ffd699; text-shadow: 0 0 8px rgba(255, 170, 60, .9); }
.row2 { display: flex; gap: 10px; }
.sel { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 9px; font-weight: 800; letter-spacing: .14em; color: #2a2a26; }
.sel select { width: 100%; padding: 4px 22px 4px 8px; border-radius: 3px; border: 1px solid #6c6f74; cursor: pointer; color: #26272a; font-size: 12px; font-weight: 800; background: linear-gradient(#fbfbf8, #d9d9d3 55%, #c3c3bb); box-shadow: 0 2px 0 #6b6e73, inset 0 1px 0 #fff; }
.mid .knobrow { margin-left: 8px; }
.btn2 { display: flex; gap: 12px; margin-left: auto; }
.b4 { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 62px; }
.b4 .tb { width: 100%; font-size: 9.5px; }
.sq { width: 34px; height: 34px; padding: 0; cursor: pointer; border-radius: 3px; border: 1px solid #5a5d62; background: linear-gradient(#f1f1ec, #c9c9c0); box-shadow: inset 0 0 0 5px #bcbcb2, inset 0 0 0 6px rgba(0, 0, 0, .25), 0 2px 0 #62656a; }
.sq:active { transform: translateY(1px); }
#rec.on { background: linear-gradient(#ff9a86, #e23a22); box-shadow: inset 0 0 0 5px #c9301d, inset 0 0 0 6px rgba(0, 0, 0, .25), 0 0 12px rgba(255, 70, 40, .85); animation: blink 1.1s steps(2) infinite; }

/* ---------- Boîte à rythmes : START / STOP, choix d'instrument, 16 touches ---------- */
.bot { display: flex; gap: 20px; align-items: flex-end; border-top: 1px solid rgba(42, 42, 38, .3); padding-top: 10px; }
.tr { display: flex; gap: 12px; padding-bottom: 20px; }
.tbtn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font-size: 10px; font-weight: 800; letter-spacing: .1em; color: #2a2a26; }
.tbtn i { position: relative; display: block; width: 62px; height: 58px; border-radius: 5px; border: 2px solid #111; background: linear-gradient(#fbfbf5, #e6e4d4 70%, #d4d2c2); box-shadow: 0 3px 0 #62656a, inset 0 2px 0 #fff; transition: transform .06s, box-shadow .06s; }
.tbtn i::after { content: ''; position: absolute; right: 7px; top: 7px; width: 8px; height: 8px; border-radius: 50%; background: #14391a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .7); }
.tbtn:active i { transform: translateY(2px); box-shadow: 0 1px 0 #62656a, inset 0 2px 0 #fff; }
.tbtn.on i { transform: translateY(2px); box-shadow: 0 1px 0 #62656a, inset 0 2px 3px rgba(0, 0, 0, .25); }
.tbtn.on i::after { background: #4dff5a; box-shadow: 0 0 9px 2px rgba(80, 255, 90, .95); }
.seq { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.isel { display: flex; align-items: center; gap: 14px; }
.inst { display: flex; gap: 6px; flex: 1; }
.ikey {
  position: relative; flex: 1 1 0; min-width: 0; height: 34px; padding: 11px 0 0; border-radius: 3px; border: 1px solid #5a5d62; cursor: pointer;
  background: linear-gradient(#fbfbf8, #d7d7d1 55%, #bdbdb5); box-shadow: 0 2px 0 #62656a, inset 0 1px 0 #fff; font-weight: 800; font-size: 11px; letter-spacing: .08em; color: #2a2a26;
  transition: transform .05s;
}
.ikey .il { position: absolute; left: 50%; top: 5px; width: 10px; height: 5px; margin-left: -5px; border-radius: 1px; background: #4d1d1a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.ikey.used .il { background: #a52a1c; }
.ikey.sel { transform: translateY(1px); box-shadow: 0 1px 0 #62656a, inset 0 1px 2px rgba(0, 0, 0, .25); background: linear-gradient(#ffd9a0, #ffa13a); border-color: #b8650f; }
.ikey.sel .il { background: #ff2a1a; box-shadow: 0 0 8px 2px rgba(255, 50, 30, .95); }
.ikey.hit .il { background: #fff3a0; box-shadow: 0 0 10px 3px rgba(255, 240, 140, .95); }
.ikey.muted { opacity: .45; text-decoration: line-through; }
.ibtns { display: flex; gap: 6px; }

.keys { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 4px 6px; }
.dcol { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.dcol.g { margin-left: 6px; }
.m909 .sn { color: #2a2a26; }
.m909 .sn.now { color: #e8352a; }
.dkey {
  position: relative; width: 100%; height: 44px; padding: 0; cursor: pointer; border-radius: 3px; border: 1px solid rgba(0, 0, 0, .5);
  background: linear-gradient(#f4f1e8, #d6d3c8 55%, #bdbaae); box-shadow: 0 3px 0 #84817a, 0 4px 5px rgba(40, 30, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .9);
}
.dkey.q0 { background: linear-gradient(#ff7a6c, #e8352a 55%, #b3170f); }
.dkey.q1 { background: linear-gradient(#ffb36b, #ff8a2b 55%, #d8600c); }
.dkey.q2 { background: linear-gradient(#ffe88a, #ffd23a 55%, #d9a90f); }
.dkey.q3 { background: linear-gradient(#ffffff, #ece9de 55%, #cdc9bc); }
.dkey::before { content: ''; position: absolute; left: 50%; top: 6px; width: 14px; height: 6px; margin-left: -7px; border-radius: 1px; background: #4d1d1a; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .6); }
.dkey.on { transform: translateY(2px); box-shadow: 0 1px 0 #84817a, inset 0 1px 0 rgba(255, 255, 255, .6); filter: brightness(.97); }
.dkey.on::before { background: #ff2a1a; box-shadow: 0 0 10px 3px rgba(255, 50, 30, .95), inset 0 1px 1px rgba(255, 230, 210, .9); }
.dkey.now { box-shadow: 0 3px 0 #84817a, 0 0 0 2px #fff, 0 0 12px 3px rgba(255, 255, 255, .95); filter: brightness(1.12); }
.dkey.now.on { box-shadow: 0 1px 0 #84817a, 0 0 0 2px #fff, 0 0 12px 3px rgba(255, 255, 255, .95); }

.foot { display: flex; flex-direction: column; gap: 2px; margin: 6px 18px 0; font-size: 10.5px; line-height: 1.4; color: #0e4a75; text-align: center; text-shadow: 0 1px 0 rgba(255, 255, 255, .6); }
.foot b { color: #06385f; }

#toast {
  position: fixed; left: 50%; bottom: 22px; transform: translate(-50%, 30px); opacity: 0; pointer-events: none; z-index: 20;
  padding: 10px 20px; border-radius: 999px; border: 1px solid #fff; color: #fff; font-weight: 800; letter-spacing: .06em; text-shadow: 0 1px 2px rgba(0, 60, 110, .7);
  background: linear-gradient(#8ceaff, #19c3e8 50%, #0a8fc9 52%, #4fe0ff); box-shadow: 0 6px 18px rgba(0, 70, 130, .45); transition: opacity .25s, transform .25s;
}
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Écrans étroits : machines empilées, défilement permis ---------- */
body.stack .window { margin: 8px; border-radius: 12px; }
body.stack .deck { padding: 10px 8px 2px; }
body.stack .machine { padding: 10px 10px 12px; overflow-x: auto; }
body.stack .m303, body.stack .m909 { border-left-width: 6px; border-right-width: 6px; }
body.stack .band, body.stack .mid, body.stack .bot, body.stack .entry { min-width: 900px; }
body.stack .tag { display: none; }
@media (prefers-reduced-motion: reduce) { .bubble, #rec.on { animation: none; } }

/* ---------- Lisibilité dans un cadre réduit (itch.io) : textes et potards plus grands ---------- */
.logo { font-size: 18px; }
.tag { font-size: 13px; }
.m303 .brand b, .m909 .brand b { font-size: 21px; }
.m303 .brand span { font-size: 16px; }
.m909 .brand span { font-size: 13px; }
.m303 .brand em { font-size: 11px; }
.pill { font-size: 12px; padding: 5px 12px; }
.tb { font-size: 12px; padding: 4px 2px; }
.klabel { font-size: 12px; letter-spacing: .03em; }
.plabel { font-size: 11px; }
.knob.sm { width: 74px; }
.dial { width: 58px; height: 58px; }
.knob.md .dial { width: 72px; height: 72px; }
.knob.vol .dial { width: 104px; height: 104px; }
.knob.vol { width: 116px; }
.pk { font-size: 12px; }
.skey { height: 62px; }
.skey .nt { font-size: 19px; }
.sn { font-size: 11px; }
.ab { font-size: 14px; }
.sel { font-size: 11px; }
.sel select { font-size: 14px; }
.lcdtext { font-size: 11px; }
.tbtn { font-size: 12px; }
.b4 .tb { font-size: 11px; }
.ikey { font-size: 13px; }
.foot { font-size: 12px; }
.knob.vol { width: 104px; }
.knob.vol .dial { width: 90px; height: 90px; }

/* Gain de hauteur : l'embed doit tenir dans la fenêtre sans défilement */
.knob.vol .dial { width: 74px; height: 74px; }
.knob.vol { width: 96px; }
.knob.vol .cap { inset: 12px; }
.knob.vol .cap::after { inset: 12px; }
.disp { padding: 6px 12px; gap: 6px; }
.lcd { height: 46px; }
.mid { padding: 2px 0; gap: 20px; }
.deck { gap: 10px; padding-top: 10px; }
.machine { padding-top: 6px; padding-bottom: 10px; gap: 6px; }
.foot { margin-top: 2px; }
.klabel { font-size: 13px; }
.tb { font-size: 13px; }

/* pas de cercle de sélection autour des potards */
.knob, .knob:focus, .knob:focus-visible, .knob .dial { outline: none; }
.knob:focus .dial, .knob:focus-visible .dial { box-shadow: none; }

/* STOP allumé (voyant rouge) quand rien ne joue */
.tbtn.stop.on i::after { background: #ff3b2a; box-shadow: 0 0 9px 2px rgba(255, 60, 40, .95); }
.pill.stop.on { background: linear-gradient(#ffb7a8, #f0452d); border-color: #a2200e; color: #fff; }