@font-face {font-family: 'CooperBlack';src: url('webfont/COOPBL.woff') format('woff');font-weight: normal;font-style: normal;}

/* BODY */
body {margin: auto;
  background-image: linear-gradient(160deg, rgb(25 248 255 / 76%) 0%, rgb(243 146 255 / 59%) 15%, rgb(243 146 255 / 59%) 15%, rgb(64 255 227 / 74%) 100%);
  background-repeat: no-repeat;
  cursor: url(/img/cursor-piano.png), default;
  overflow: hidden;}
body.pattern-drawing {-webkit-user-select: none;user-select: none;cursor: crosshair;}



body.is-column-resizing,
body.is-column-resizing * {
  cursor: e-resize !important;
  -webkit-user-select: none !important;user-select: none !important;
}

body.drag-cursor-locked,
body.drag-cursor-locked * {
  cursor:e-resize !important;
  -webkit-user-select: none;user-select: none;
}

body.is-map-scrolling .beat-grid-extra,
body.is-map-scrolling .map-line,
body.is-map-scrolling .map-handle {
  visibility: hidden;
}


.piano-bg {
  width: 1528px;
  position: fixed;
  left: 428px;
  top: 0;
  z-index: 0;
  transform: scale(1.3) scale(-1.2);

  transition: opacity 1s ease;
  pointer-events: none;
  -webkit-user-select: none;user-select: none;
}
.piano-bg-bottom {
  width: 1528px;
  position: fixed;
  left: 428px;
  top: 1587px;
  z-index: 0;
  transform: scale(1.3) scale(-1.2) scaleY(-1);
  transition: opacity 1s ease;
  pointer-events: none;
}

body.piano-fullscreen .piano-bg {
  opacity: 1 !important;
  pointer-events: auto;
  z-index:799;
}

.piano-bg,
.piano-bg-bottom{
  opacity: 1;
  transition: opacity 1s ease;
}

body.hide-piano-bg .piano-bg,
body.hide-piano-bg .piano-bg-bottom{
  opacity: 0;
  pointer-events: none;
}

.toggle-piano-bg-btn{
  position: relative;
  top: -9px;
  left: 8px;
  width: 42px;
  height: 42px;
  border: none;
  background: transparent;
  cursor: pointer;
  z-index: 5000;
  padding: 0;
  transition: transform 0.2s ease;
  filter: drop-shadow(0px 1px 4px grey);
  margin-bottom: 3px;
}

.toggle-piano-bg-btn:focus{
outline:none;
}


.toggle-piano-bg-btn img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-select: none;user-select: none;
}

body.piano-fullscreen .piano-bg{opacity:1;}
body.piano-fullscreen .parametric-piano {opacity: 1 !important;top: -245px;left: 223px;width: 1102px;height: 1018px;transform: scale(1.12);background: none;z-index: 800;transition:top 1s ease,left 1s ease,transform 1s ease,opacity 1s ease;}
body.piano-fullscreen .transport-controls {z-index: 820;left: 484px;top: 662px;width: 150px;}
body.piano-fullscreen .record-box {z-index: 820;background: none;left: 640px;top: 652px;}
body.piano-fullscreen #recPopup {top: 676px;left: 817px;}
body.piano-fullscreen .midi-select {display:none;}
body.piano-fullscreen #map-table-wrapper {z-index: 790;}
body.piano-fullscreen .switch-view-button  {z-index: 790;}

/* FULLSCREEN PIANO = on neutralise toute l’UI derrière */
body.piano-fullscreen > * {
  pointer-events: none;
}

/* on réactive seulement les éléments utiles du mode fullscreen */
body.piano-fullscreen .piano-bg,
body.piano-fullscreen .parametric-piano,
body.piano-fullscreen .parametric-piano *,
body.piano-fullscreen .transport-controls,
body.piano-fullscreen .transport-controls *,
body.piano-fullscreen .record-box,
body.piano-fullscreen .record-box *,
body.piano-fullscreen #recPopup,
body.piano-fullscreen #recPopup *,
body.piano-fullscreen #fullScreenBtn,
body.piano-fullscreen #fullScreenBtn *,
body.piano-fullscreen #communityBox,
body.piano-fullscreen #communityBox *{
  pointer-events: auto;
}


body.playing-midi .selection-table-2 {
  pointer-events: none;
  cursor: default;
}

input[type="checkbox"] {
  accent-color: #3a95ff; /* couleur moderne */
  cursor: pointer;
  box-shadow: 0 0 0 3px #54a3ff inset;
  transition: box-shadow 0.15s ease;
}

/* =========================================================
   GLOBAL CUSTOM TITLE TOOLTIP
========================================================= */

#custom-title-tooltip {

  background-color: #ffffff;
  color: #6bb0ff;
  border-radius: 13px;
  font-family: calibri;
  font-size: 13px;
  font-weight: normal;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  letter-spacing: 0.6px;
  box-shadow: -1px -1px 20px 11px #ffffffeb;
  position: absolute;
  top: 98px;
  left: 27px;
  z-index: 9999999;
  padding: 0px 2px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.4s ease, transform 0.14s ease;
  max-width: 340px;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: normal;
}

#custom-title-tooltip {
  width: max-content;
  max-width: 280px;
}

#custom-title-tooltip.visible {
  opacity: 1;

}



body.executing-log .compact-step-overlay {
  opacity: 0;
  pointer-events: none;
}



body.executing-log .map-button-cell {
  opacity: 0;
  pointer-events: none;
}

body.executing-log .map-chord-name {
  opacity: 0;
  pointer-events: none;
}

body.executing-log .beat-grid-extra {
  opacity: 0;
  pointer-events: none;
}

body.executing-log #currentPresetName {
  opacity: 0;
  pointer-events: none;
}

body.executing-log .col-resizer {
  opacity: 0;
  pointer-events: none;
}

body.executing-log .full-pattern-step-select {
  opacity: 0;
  pointer-events: none;
}



/* CONSOLE LOG BOX */
#midiBox  {position: fixed;top: 623px;left: 503px;width: 450px;max-height: 41px;color: #000000;font-family: monospace;font-size: 11px;z-index: 510;overflow-y: hidden;transform: rotate(7deg);margin-top: 0px;contain: content;}

/* MAIN LOADER + AUDIO ENGINE LOADER */
#loader {-webkit-user-select: none;user-select: none;position: fixed;inset: 0;background-image: linear-gradient(160deg, rgb(25, 131, 255) 0%, rgba(146, 240, 255, 1) 15%, rgba(146, 240, 255, 1) 15%, rgb(64 255 227) 100%);
color: #ffffff;font-family: courier; font-size:18px;z-index: 900;width:3000px;height:3000px;padding-top:8px;padding-left:12px;}
#loader.fade-out {opacity: 0;transition: opacity 0.6s ease-in;}
.loader-message {    animation: blink 0.5s infinite;}
@keyframes blink {0%, 100% { opacity: 1; } 50% { opacity: 0.4; }}
.audio-loader-text {
  position: fixed;

  z-index: 820;
  background: #ffffff;
  border: 2px solid rgb(255 145 44);
  border-radius: 15px;
  font-family: Calibri;
  font-size: 13.5px;
  font-weight: bold;
  padding: 0px 4px 0px 4px;
  letter-spacing: 1.5px;
  color: rgb(255 145 44);
  box-shadow: 4px 3px 7px 2px rgb(255 145 44 / 47%);
  -webkit-user-select: none;
  user-select: none;
  bottom: 681px;
  left: 1188px;
  animation: blink 0.5s infinite;
  width: max-content;
}

.log-box {   
  transform: rotate(-6deg);
  position: fixed;
  top: 80px;
  left: 34px;
  font-size: 11px;
  font-family: Calibri, sans-serif;
  color: #3d3c3c;
  padding: 0px 8px;
  border-radius: 6px;
  z-index: 780;
  letter-spacing: 1.5px;
  -webkit-user-select: none;user-select: none;
  text-align: center;
  width: 80px;
  background-color: white;
  box-shadow: 5px 6px 9px 0px white;
}
@keyframes zoomBounceIn {0%   { transform: scale(0.7); opacity: 0; }60%  { transform: scale(1.1); opacity: 1; }80%  { transform: scale(0.95); }100% { transform: scale(1); }}
@keyframes zoomBounceOut {0%   { transform: scale(1); opacity: 1; } 20%  { transform: scale(1.05); } 100% { transform: scale(0.7); opacity: 0; }}

/* LOGO */
#logoContainer { position: fixed;top: 0px;left: 0px;  z-index: 1;}
.site-logo img {    width: 138px;position: fixed;top: 18px;left: 11px;-webkit-user-select: none;user-select: none;cursor: pointer;filter: drop-shadow(-5px 0px 1px #0075ffbd);}
.typo-the img {    width: 98px;position: fixed;top: 14px;left: 137px;-webkit-user-select: none;user-select: none;pointer-events: none;}
.typo-melody img {       width: 178px;position: fixed;top: 15px;left: 235px;-webkit-user-select: none;user-select: none;pointer-events: none;}
.typo-jubilation img {        width: 259px;position: fixed;top: 64px;left: 148px;-webkit-user-select: none;user-select: none;pointer-events: none;}

/* FAKE CURSOR ANIMATION */
body.welcome-animation #fake-cursor {display: block;animation: spin-cursor 1s linear infinite;}
body.executing-log, body.playing-midi, body.welcome-animation {cursor: auto !important;}
#fake-cursor {    top: 264px;display: none;position: fixed;width: 68px;height: 68px;pointer-events: none;z-index: 880;background-image: url(/img/cursor-piano.png);
background-size: contain;background-repeat: no-repeat;transform-origin: center center;left: 267px;}
@keyframes spin-cursor {from { transform: rotate(0deg); } to   { transform: rotate(360deg); }}
body.executing-log #fake-cursor, body.playing-midi #fake-cursor {display: block; animation: spin-cursor 1s linear infinite;}

/* CHORD DISPLAY CIRCLES */
.circle_main{width: 845px;height: 845px;left: 300px;top: 300px;background-color: #ffffff9e;}
.circle-border-1{width: 232.5px;height: 232.5px;left: 300px;top: 300px;}
.circle-border-2{width: 357.5px;height: 357.5px;left: 300px;top: 300px;}
.circle-border-3{width: 470px;height: 470px;left: 300px;top: 300px;}
.circle-border-4{width: 582.5px;height: 582.5px;left: 300px;top: 300px;}
.circle-border-5{width: 695px;height: 695px;left: 300px;top: 300px;}
.circle-border-6{width: 805px;height: 805px;left: 300px;top: 300px;}
.circle_mask0 {z-index:150;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);width: 232.5px;height: 232.5px;left: 300px;top: 300px;background-color: rgb(146 240 255 / 46%);}
.circle_mask1 {display:none;z-index:140;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);width: 357.5px;height: 357.5px;left: 300px;top: 300px;background-color: rgb(255 255 255 / 50%);}
.circle_mask2 {display:none;z-index:130;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);width: 470px;height: 470px;left: 300px;top: 300px;background-color: rgb(255 255 255 / 50%);}
.circle_mask3 {display:none;z-index:120;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);width: 582.5px;height: 582.5px;left: 300px;top: 300px;background-color: rgb(255 255 255 / 50%);}
.circle_mask4 {display:none;z-index:110;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);width: 695px;height: 695px;left: 300px;top: 300px;background-color: rgb(255 255 255 / 50%);}
.circle_mask5 {display:none;z-index:100;position: absolute;border-radius: 50%;transform: translate(-50%, -50%);width: 805px;height: 805px;left: 300px;top: 300px;background-color: rgb(255 255 255 / 50%);}
.circle {position: absolute;border: 1px solid #0000002e;border-radius: 50%;transform: translate(-50%, -50%);}

/* CIRCLE POINTS */
.point{display:none;opacity: 0;z-index:210;  transition: opacity 0.05s ease-in-out, transform 0.05s ease-in-out;pointer-events: auto;}
.point::before {content: '';position: absolute;top: -8px;left: -8px;right: -8px;bottom: -8px;background: transparent;z-index: 200;}
.point.highlighted, .point.triad-highlighted, .point.map-triad-highlighted {opacity: 1;}
.point.hovered {opacity: 1;}
.point.hovered-table {filter:drop-shadow(1px 5px 5px #ffffff);}
.point.tetrad {position: absolute;width: 10px;height: 10px;transform: translate(-50%, -50%);z-index: 210;font-size: 20px;background-color: rgb(255 184 105);}
.point.base_tetrad {display:none;position: absolute;width: 15px;height: 15px;border-radius: 50%;transform: translate(-50%, -50%);z-index: 210;font-size: 20px;background-color: #ff7b00;}

/* COLORED SHAPES (TRIAD) */
td.t3-234.active, td.t3-234:hover, 
.t0-23.active, .triad-tree.t0-23:hover, 
.t0-34.active, .triad-tree.t0-34:hover, 
.t0-42.active, .triad-tree.t0-42:hover, 
.t0-24.active, .triad-tree.t0-24:hover, 
.t0-43.active, .triad-tree.t0-43:hover, 
.t0-32.active, .triad-tree.t0-32:hover {background-color: #fff08c;color: #ff7b00;}
.triad.t2-2342{position: absolute;transform: translate(-50%, -50%);width: 11px;height:11px;background: #fff08c;-moz-border-radius:12px 0 0 0;-webkit-border-radius: 12px 0 0 0;border-radius:12px 0 0 0;}
.shape_2342 {position:relative;top: 0px;left: 0px;width: 11px;height: 11px;background: #fff08c;-moz-border-radius: 12px 0 0 0;-webkit-border-radius: 12px 0 0 0;border-radius: 12px 0 0 0;}
td.t2-2342.active .shape_2342, td.t2-2342:hover .shape_2342{background: #ff7b00;}
td.t2-2342.active, td.t2-2342:hover {background-color: #fff08c;color: #ff7b00;}
.triad.t2-2432{position: absolute;transform: translate(-50%, -50%);width: 11px;height:11px;background: #fff08c;-moz-border-radius:0 0 12px 0;-webkit-border-radius: 0 0 12px 0;border-radius: 0 0 12px 0;}
.shape_2432 {position:relative;top: 0px;left: 0px;width: 11px;height: 11px;background: #fff08c;-moz-border-radius: 0 0 12px 0;-webkit-border-radius: 0 0 12px 0;border-radius: 0 0 12px 0;}
td.t2-2432.active .shape_2432, td.t2-2432:hover .shape_2432{background: #ff7b00;}
td.t2-2432.active, td.t2-2432:hover {background-color: #fff08c;color: #ff7b00;}

td.t3-126.active, td.t3-126:hover, 
.t0-12.active, .triad-tree.t0-12:hover, 
.t0-26.active, .triad-tree.t0-26:hover, 
.t0-61.active, .triad-tree.t0-61:hover, 
.t0-21.active, .triad-tree.t0-21:hover, 
.t0-16.active, .triad-tree.t0-16:hover, 
.t0-62.active, .triad-tree.t0-62:hover   {background-color: #57d5ff;color: rgb(255, 255, 255);}
.triad.t2-1261{position: absolute;transform: translate(-50%, -50%);border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 12px solid #57d5ff;}
.shape_1261 {position:relative;top: 0px;left: 0px;width:0;height:0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 12px solid #57d5ff;}
td.t2-1261.active .shape_1261, td.t2-1261:hover .shape_1261{border-bottom:12px solid rgb(255, 255, 255);}
td.t2-1261.active, td.t2-1261:hover {background-color: #57d5ff;color: rgb(255, 255, 255);}
.triad.t2-1621{position: absolute;transform: translate(-50%, -50%);border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #57d5ff;}
.shape_1621 {position:relative;top: 0px;left: 0px;width:0;height:0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 12px solid #57d5ff;}
td.t2-1621.active .shape_1621, td.t2-1621:hover .shape_1621{border-top:12px solid rgb(255, 255, 255);}
td.t2-1621.active, td.t2-1621:hover {background-color: #57d5ff;color: rgb(255, 255, 255);}

td.t3-135.active, td.t3-135:hover, 
.t0-13.active, .triad-tree.t0-13:hover, 
.t0-35.active, .triad-tree.t0-35:hover, 
.t0-51.active, .triad-tree.t0-51:hover, 
.t0-15.active, .triad-tree.t0-15:hover, 
.t0-53.active, .triad-tree.t0-53:hover, 
.t0-31.active, .triad-tree.t0-31:hover {background-color: #ff8cb3;color: rgb(255, 255, 255);}
.triad.t2-1351{position: absolute;transform: translate(-50%, -50%);border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-left: 12px solid rgb(255, 140, 179);}
.shape_1351 {position:relative;top: 0px;left: 0px;width:0;height:0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-left: 12px solid rgb(255, 140, 179);}
td.t2-1351.active .shape_1351, td.t2-1351:hover .shape_1351{border-left:12px solid rgb(255, 255, 255);}
td.t2-1351.active, td.t2-1351:hover {background-color: rgb(255, 140, 179);color: rgb(255, 255, 255);}
.triad.t2-1531{position: absolute;transform: translate(-50%, -50%);border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 12px solid rgb(255, 140, 179);}
.shape_1531 {position:relative;top: 0px;left: 0px;width:0;height:0;border-bottom: 6px solid transparent;border-top: 6px solid transparent;border-right: 12px solid rgb(255, 140, 179);}
td.t2-1531.active .shape_1531, td.t2-1531:hover .shape_1531{border-right:12px solid rgb(255, 255, 255);}
td.t2-1531.active, td.t2-1531:hover {background-color: rgb(255, 140, 179);color: rgb(255, 255, 255);}

td.t3-27.active, td.t3-27:hover, 
.t0-02.active, .triad-tree.t0-02:hover, 
.t0-27.active, .triad-tree.t0-27:hover, 
.t0-70.active, .triad-tree.t0-70:hover, 
.t0-07.active, .triad-tree.t0-07:hover, 
.t0-72.active, .triad-tree.t0-72:hover, 
.t0-20.active, .triad-tree.t0-20:hover {background-color: #82ffde;color: #ff7b00;}
.triad.t2-0270{position: absolute;transform: translate(-50%, -50%);border-top: 12px solid rgb(130, 255, 222);border-right: 12px solid transparent;}
.shape_0270 {position:relative;top: 0px;left: 0px;width:0;height:0;border-top: 12px solid rgb(130, 255, 222);border-right: 12px solid transparent;}
td.t2-0270.active .shape_0270, td.t2-0270:hover .shape_0270{border-top:12px solid #ff7b00;}
td.t2-0270.active, td.t2-0270:hover {background-color: rgb(130, 255, 222);color: #ff7b00;}
.triad.t2-0720{position: absolute;transform: translate(-50%, -50%);border-top: 12px solid rgb(130, 255, 222);border-left: 12px solid transparent;}
.shape_0720 {position:relative;top: 0px;left: 0px;width:0;height:0;border-top: 12px solid rgb(130, 255, 222);border-left: 12px solid transparent;}
td.t2-0720.active .shape_0720, td.t2-0720:hover .shape_0720{border-top:12px solid #ff7b00;}
td.t2-0720.active, td.t2-0720:hover {background-color: rgb(130, 255, 222);color: #ff7b00;}

td.t3-36.active, td.t3-36:hover, 
.t0-03.active, .triad-tree.t0-03:hover, 
.t0-36.active, .triad-tree.t0-36:hover, 
.t0-60.active, .triad-tree.t0-60:hover, 
.t0-06.active, .triad-tree.t0-06:hover, 
.t0-63.active, .triad-tree.t0-63:hover, 
.t0-30.active, .triad-tree.t0-30:hover {background-color: #a7ff98;color: #ff7b00;}
.triad.t2-0360{position: absolute;transform: translate(-50%, -50%);border-bottom: 12px solid #a7ff98;border-right: 12px solid transparent;}
.shape_0360 {position:relative;top: 0px;left: 0px;width:0;height:0;border-bottom: 12px solid #a7ff98;border-right: 12px solid transparent;}
td.t2-0360.active .shape_0360, td.t2-0360:hover .shape_0360{border-bottom:12px solid #ff7b00;}
td.t2-0360.active, td.t2-0360:hover {background-color: #a7ff98;color: #ff7b00;}
.triad.t2-0630{position: absolute;transform: translate(-50%, -50%);border-bottom: 12px solid #a7ff98;border-left: 12px solid transparent;}
.shape_0630 {position:relative;top: 0px;left: 0px;width:0;height:0;border-bottom: 12px solid #a7ff98;border-left: 12px solid transparent;}
td.t2-0630.active .shape_0630, td.t2-0630:hover .shape_0630{border-bottom:12px solid #ff7b00;}
td.t2-0630.active, td.t2-0630:hover {background-color: #b6ff6c;color: #ff7b00;}

td.t3-333.active, td.t3-333:hover, 
.t0-33.active, .triad-tree.t0-33:hover {background-color: #ffa8fe;color: #ffffff}
.triad.t2-3333{position: absolute;transform: translate(-50%, -50%);border-top: 12px solid #ffa8fe;border-right: 12px solid transparent;}
.shape_3333 {position:relative;top: 0px;left: 0px;width:0;height:0;border-top: 12px solid #ffa8fe;border-right: 12px solid transparent;}
td.t2-3333.active .shape_3333, td.t2-3333:hover .shape_3333{border-top:12px solid #ffffff}
td.t2-3333.active, td.t2-3333:hover {background-color: #ffa8fe;color: #ffffff;}

td.t3-225.active, td.t3-225:hover, 
.t0-22.active, .triad-tree.t0-22:hover, 
.t0-25.active, .triad-tree.t0-25:hover, 
.t0-52.active, .triad-tree.t0-52:hover {background-color: #a2a3ff;color: rgb(255, 255, 255);}
.triad.t2-2252{position: absolute;transform: translate(-50%, -50%);border-bottom: 12px solid #a2a3ff;border-right: 12px solid transparent;}
.shape_2252 {position:relative;top: 0px;left: 0px;width:0;height:0;border-bottom: 12px solid #a2a3ff;border-right: 12px solid transparent;}
td.t2-2252.active .shape_2252, td.t2-2252:hover .shape_2252{border-bottom:12px solid rgb(255, 255, 255);}
td.t2-2252.active, td.t2-2252:hover {background-color: #a2a3ff;color: rgb(255, 255, 255);}

td.t3-144.active, td.t3-144:hover, 
.t0-14.active, .triad-tree.t0-14:hover, 
.t0-44.active, .triad-tree.t0-44:hover, 
.t0-41.active, .triad-tree.t0-41:hover {background-color: #debfff;color: rgb(255, 255, 255);}
.triad.t2-1441{position: absolute;transform: translate(-50%, -110%);width: 0;height: 0;border: 8px solid transparent;border-bottom-color: rgb(222, 191, 255);top: -8px;}
.triad.t2-1441:after{content: '';position: absolute;left: -8px;top: 8px;width: 0;height: 0;border: 8px solid transparent;border-top-color: rgb(222, 191, 255);}
.losange {position:relative;top: -7px;left: 0px;width: 0;height: 0;border: 7px solid transparent;border-bottom-color: rgb(222, 191, 255);}
.losange::after{content: '';position: relative;left: -7px;top: 9px;width: 0;height: 0;border: 7px solid transparent;border-top-color: rgb(222, 191, 255);}
td.active .losange, td:hover .losange{border-bottom-color: rgb(255, 255, 255);}
td.t2-1441.active, td.t2-1441:hover {background-color: rgb(222, 191, 255);color: rgb(255, 255, 255);}
td.active .losange::after, td:hover .losange::after{border-top-color: white;}
.t0-999.active {background-color: #fffaf5;    color: #ff7b00;}



 
/* MAIN ELEMENTS */
.chord_name {width: auto;height: auto;font-family: calibri;color: #74b4ff;-webkit-user-select: none;user-select: none;pointer-events: auto;font-size:20px;letter-spacing: 1.3px;}
.chord_name.highlighted{ 
  display: unset;
  font-weight: bold;
  color: #0075ff;
  border: none;
  padding: 0px 5px 0px 5px;
  border-radius: 3px;
  font-size: 23px;
  letter-spacing: 1.5px;
  } 
.chord_name:hover ~ .point {pointer-events: none;     /* facultatif, mais rend l'interaction nette */}

.chord_name {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.chord-hover-degree {
  font-size: 27px;
  font-weight: bold;
  color: #ff7b00;
  background: #ffffff;
  border: 1px solid #ff7b00;
  border-radius: 8px;
  padding: 0 4px;
  pointer-events: none;
  filter: drop-shadow(1px 3px 3px #ff7b0066);
}

.chord_name.hover-degree-visible {
  opacity: 1;
}

.selection-table-1{       
  cursor: cell;
  position: absolute;
  top: 131px;
  left: 1240px;
  z-index: 510;
  transform: rotate(90deg);
  border: 1px solid #eeeeee;
  box-shadow: 5px -5px 9px 0px #0075FF;
  border-radius: 15px;
}

.selection-table-1 {display: none;}
.selection-table-1.visible {display: block;}
.selection-table-2{ cursor: cell;
  position: absolute;
  top: 11px;
  left: 1262px;
  z-index: 630;
  color: #0075ff;}
.selection-table-1, .selection-table-2 {transform-origin: center center;transition: transform 0.5s ease, opacity 0.5s ease;}
.rosace-1{   z-index: 1; cursor: auto;position: fixed;width: 600px;height: 600px;transform: scale(0.54);left: 355px;top: -26px;}
.rosace-2{z-index: 1; cursor: auto;position: fixed;width: 600px;height: 600px;transform: scale(0.54);left: 935px;top: -26px;}
table {border-collapse: collapse;margin:0px;font-family:calibri;font-size:12px;}
th, td {padding: 2.5px 2px;text-align: center;-webkit-user-select: none;user-select: none;font-weight:normal;min-width:10px;width:10px;white-space: nowrap;}
th { border: none;}
td.scale.active {background-color: #0b0a08;color: rgb(255, 255, 255);border: 1px solid #ff7b00;font-weight: normal;}
td.scale:hover {background-color: #ff7b00;color: rgb(255, 255, 255);font-weight: normal;}
button {font-size: 13px;background-color: rgb(255 255 255);color: #000000;border: 1px solid #ff7b00;cursor: pointer;}
table tr {height:0px;line-height: 8px;}
table tr .scale {       height: 0px;line-height: 30px;font-size: 10px;padding: 14px 2px 0px 2px;background-color: #ffffff;max-width: 10px;color: #0075ff;    border: 1px solid #00000012;}
.corner-top-left {         border-radius: 0px 0px 0px 7px; }
.corner-top-right { border-radius: 0px 0px 7px 0px; }
.corner-bottom-left {  border-radius: 7px 0px 0px 0px;}
.corner-bottom-right{    border-radius: 0px 7px 0px 0px;}
table tr .triad-tree {  border: 1px solid #00000012;
  padding: 3px;
  font-size: 10.5px;
  background-color: white;
  color: #0075ff;}
tr.triad-row  {    height: 0px;line-height: 8px;font-size: 10.5px;}
tr.sub-family-row {height:0px;line-height:20px;}
tr > th:first-child {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: right;border: none;}
.selection-table-1 tr:first-child th {   font-weight: normal;}
td[class^="t2-"] {vertical-align:top;}
.selection-table-1 th {    display:none;text-align: left;padding-left: 5px;font-size: 11px;font-weight: bold;}
.text-rotate {  transform: rotate(-90deg);}

/* MAP HANDLE + LINES */
.map-handle {position: absolute;top:12px;left:718px;width: 14px;height: 14px;background-color: rgb(255, 255, 255);border-radius: 50%;text-align: center;line-height: 14px;color: rgb(0, 0, 0);
  -webkit-user-select: none;user-select: none;z-index: 500;font-family:calibri;font-size: 11px;border:1px solid black;}
.map-handle.handle-sequence-playing {opacity:1;background-color: #0075ff;border: 2px solid #ffffff;color: #ffffff;font-weight: bold;transform: scale(1.2);z-index: 510;}
.map-line {    stroke-width: 0px;stroke: #50a1ff; }
.map-line.playing {
  stroke-width: 2px;
  stroke: #0075ff;
}

/* TRANSPORT CONTROLS */
.transport-controls {  
  z-index: 1;
  position: absolute;
  top: 116px;
  left: 196px;
  -webkit-user-select: none;user-select: none;
  display: inline-block;
  width: 150px;
}
.transport-button {border-radius: 20px;height: 22px;padding: 0px 8px;font-size: 13px;vertical-align: middle;-webkit-user-select: none;user-select: none;border:1px solid #0075FF;background-color: #ffffff;font-family: calibri;}
.playBtn    {  box-shadow: 3px 5px 1px 0px #0075FF;}
.playBtn:focus {
  outline: none;
}
.playBtn:disabled {background-color: #ccc;color: #666;opacity: 0.7;cursor: pointer;border:1px solid #86a8ff; box-shadow: 0px 0px 0px 0px #ffffff00;    top: 5px;position: relative;}
#stopBtn {
  background-color: #ccc;
  color: #666;
  opacity: 0.7;
  cursor: pointer;
  pointer-events: none;
  border: 1px solid #86a8ff;
  top: 2px;
  position: relative;

}
#stopBtn.active {background-color: #ffffff;color: #000000;border:1px solid #0075FF;cursor: pointer;pointer-events:all;opacity: 1;    box-shadow: 3px 5px 1px 0px #0075FF;    top: 0px;position: relative;}
.stopBtn .square {
  display: inline-block;
    width: 9px;
    height: 9px;
    background-color: black;
    margin-right: 6px;
}

#playBtn.transport-disabled,
#playBtn:disabled {
  filter: grayscale(1);
  pointer-events: none;
  background-color: #ccc;
  color: #666;
  opacity: 0.7;
  cursor: pointer;
  border: 1px solid #86a8ff;
  top: 5px;
  position: relative;
}

/* RECORD BOX */
.record-box {    top: 11px;
  position: fixed;
  left: 428px;
  z-index: 600;
  display: flex;
  padding: 5px 3px 0px 3px;
  background-repeat: no-repeat;
  border-radius: 53px;}
.rec-btn {background: none;border: none;padding: 0;cursor: pointer;}
.rec-btn img {width: 44px;height: 44px;pointer-events: none;-webkit-user-select: none;user-select: none;transition: transform 0.08s ease, filter 0.15s ease;filter: brightness(1.07);}
.rec-btn:not(.recording):hover img {filter: brightness(1.15);}
.rec-btn:not(.recording):active img {transform: scale(0.92);filter: brightness(1.15);}
.rec-btn.recording img {animation: recBlink 1s infinite ease-in-out;}
.rec-btn.recording:active img {transform: scale(0.92);}
@keyframes recBlink {0%   { filter: brightness(1.15)}50%  { filter: brightness(1.45)  }100% { filter: brightness(1.15)  }}
#recTimer {   font-family: calibri;font-size: 11px;color: #459aff;letter-spacing: 0.5px;text-shadow: 2px 2px 2px #ffffff;align-content: center;padding: 0px 0px 6px 2px;
  position: relative;top: -12px;left: -6px;-webkit-user-select: none;user-select: none;white-space: nowrap;}
#recPopup {position: fixed;top: 10px;left: 420px;transform: translateX(-50%) translateY(15px) rotate(6deg);padding: 5px 5px;background: rgb(0 0 0 / 70%);
color: white;border-radius: 8px;font-family: calibri;font-size: 13px;opacity: 0;pointer-events: none;transition: opacity .25s ease, transform .25s ease;z-index: 9999999;width: auto;}
#recPopup.show {opacity: 1;transform: translateX(-50%) translateY(0px) rotate(0deg);pointer-events: auto;}
#recYes    {  background: #ffffff;border: none;color: #0175ff;font-family: calibri;letter-spacing: 1.5px;margin: 0px 4px 0px 4px;border-radius: 5px;}
#recNo    { background: #d4fdff;border: none;color: #0175ff;font-family: calibri;margin: 0px 4px 0px 4px;padding: 0px 3px;}
.rec-btn:focus {outline: none;}
.rec-btn:focus-visible {outline: none;box-shadow: none;}


#autoscrollBtn {    

  left: 38px;
  width: 36px;
  -webkit-user-select: none;user-select: none;
  display: block;
  position: fixed;
  transform-origin: bottom left;
  bottom: 14px;
  z-index: 1000;
  height: 17px;
  border: none;
  color: #ffffff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  border-radius: 37px;
  }


.setup-random-toggle:focus {
  outline: none;
}

/* état setup */
.setup-random-toggle.mode-setup {
  position: fixed;
  top: 446px;
  left: 4px;
  z-index: 790;
  background: #ffffff;
  border: 2px solid #64abff;
  border-radius: 15px;
  font-family: Calibri;
  font-size: 13.5px;
  font-weight: bold;
  padding: 0px 8px 1px 10px;
  letter-spacing: 1.5px;
  color: #4b9bf7;
  box-shadow: 4px 3px 7px 2px #64abff;
  -webkit-user-select: none;
  user-select: none;
  top: 448px;
  left: 39px;
}


/* état generator */
.setup-random-toggle.mode-generator {
  position: fixed;
  top: 398px;
  left: 50px;
  z-index: 790;
  background: #ffffff;
  border: 2px solid rgb(255 145 44);
  border-radius: 15px;
  font-family: Calibri;
  font-size: 13.5px;
  font-weight: bold;
  padding: 0px 4px 0px 4px;
  letter-spacing: 1.5px;
  color: rgb(255 145 44);
  box-shadow: 4px 3px 7px 2px rgb(255 145 44 / 47%);
  -webkit-user-select: none;
  user-select: none;
  top: 448px;
  left: 29px;
}


/* état animé commun */
#setupBox,
#randomBox {
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

/* visible */
.box-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* caché */
.box-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

  /* SETUP AGENT*/

  #setupBox {
    z-index: 690;
    cursor: auto;
    position: fixed;
    top: 334px;
    left: 126px;
    width: 272px;
    background-color: #ffffff5e;
    color: #0c0c0c;
    border-radius: 9px;
    font-family: calibri;
    font-size: 14px;
    font-weight: normal;
    -webkit-user-select: none;user-select: none;
    text-align: center;
    letter-spacing: 1.5px;
    box-shadow: -1px -1px 20px 11px #ffffff5e;
    display: inline-grid;
    justify-items: flex-start;
    gap: 3px;
    height: 167px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-color: #b6d8ff #92f0ff00;
}

#setupBoxHelp {position: relative;top: 0px;left: 0;width: 100%;font-size: 17px;color: #0075ff87;text-align: center;pointer-events: none;opacity: 0.9;font-weight: bold;white-space: nowrap;
  text-shadow: 2px 1px 2px #ffffff;filter: drop-shadow(2px 4px 6px white);transition: opacity 0.15s ease;}


/* MIDI SETUP */
.midi-select {position: relative;top: 0px;left: 4px;-webkit-user-select: none;user-select: none;padding-top: 4px;padding-bottom: 4px;}
  .midi-setup {    font-family: calibri;font-size: 14px;letter-spacing: 1.5px;color: #54a3ff;}
      #midiInputSelect {   
        -webkit-user-select: none;user-select: none;
        width: 44px;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        appearance: none;
        padding-left: 6px;
        border-radius: 9px;
        border: 2px solid #54a3ff;
        font-weight: bold;
        font-family: calibri;
        color: #54a3ff;
        text-overflow: ellipsis;
        padding-left: 5px;
        padding-right: 5px;
      }
      #midiInputSelect:focus {outline: none;}
      #midiOutputSelect {    
        -webkit-user-select: none;user-select: none;
        width: 50px;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        appearance: none;
        border-radius: 9px;
        border: 2px solid #54a3ff;
        font-weight: bold;
        font-family: calibri;
        color: #54a3ff;
        text-overflow: ellipsis;
        text-align: center;
        padding-left: 5px;
        padding-right: 5px;
      }
      #midiOutputSelect:focus {outline: none;}

      #midiBassOutputSelect {
        -webkit-user-select: none;user-select: none;
        width: 37px;
        position: relative;
        cursor: pointer;
        font-size: 12px;
        appearance: none;
        border-radius: 9px;
        border: 2px solid #54a3ff;
        font-weight: bold;
        font-family: calibri;
        color: #54a3ff;
        text-overflow: ellipsis;
        text-align: center;
    }
    #midiBassOutputSelect:focus {outline: none;}

    .sequence-audio-delay-input {     display: inline-flex;
      align-items: center;
      position: relative;
      top: 0px;
      left: 5px;
      cursor: pointer;
      -webkit-user-select: none;user-select: none;
      gap: 2px;
      padding-bottom: 4px; }

    .sequence-audio-delay-input-label {      font-family: Calibri;
      font-size: 14px;
      color: #5aa6ff;
  }

    #sequenceAudioDelayInput {      -webkit-user-select: none;user-select: none;
      width: 46px;
      position: relative;
      cursor: pointer;
      font-size: 12px;
      appearance: none;
      padding-left: 6px;
      border-radius: 9px;
      border: 2px solid #54a3ff;
      font-weight: bold;
      font-family: calibri;
      color: #54a3ff;
      text-overflow: ellipsis;
      height: 17px;
    
    }

    .sequence-audio-delay-input:focus {outline: none;}

    .sequence-audio-delay-input-label:focus {outline: none;}

    #sequenceAudioDelayInput:focus {outline: none;}

      .control-row {display: inline-flex;align-items: center;position: relative;top: 0px;left: 5px;cursor: pointer;-webkit-user-select: none;user-select: none;gap: 2px;padding-bottom: 4px;}
      .control-row-label   {    font-family: Calibri;font-size: 14px;color: #5aa6ff;}
        #liveEchoVolumeInput {-webkit-user-select: none;user-select: none;width: 46px;position: relative;cursor: pointer;font-size: 12px;appearance: none;padding-left: 6px;border-radius: 9px;border: 2px solid #54a3ff;
          font-weight: bold;font-family: calibri;color: #54a3ff;text-overflow: ellipsis;height: 17px;}
      
      /* Force l'affichage des flèches */
      #liveEchoVolumeInput::-webkit-inner-spin-button,
      #liveEchoVolumeInput::-webkit-outer-spin-button {opacity: 1;display: block;margin: 0;}


      .load-auto-save-button     {
        display: inline-flex;
        align-items: center;
        position: relative;
        top: 0px;
        left: 5px;
        cursor: pointer;
        -webkit-user-select: none;user-select: none;
        gap: 2px;
        padding-bottom: 2px;
    }

    .load-auto-save-button-label {
      font-family: Calibri;
      font-size: 14px;
      color: #5aa6ff;
  }

      #loadAutosaveBtn { 
        background: none;
        border: none;
        position: relative;
        margin: 0;
        padding: 0;
        padding-left: 4px;
      }
      #loadAutosaveBtn:focus {
        outline: none;
      }
      .autosave-icon  { 
        width: 15pt;
        cursor: pointer;
        filter: saturate(10);
        transition: filter 0.25s ease, transform 0.25s ease;
        -webkit-user-select: none;user-select: none;
      }
      .autosave-icon.flash {filter: saturate(10) brightness(1.35) drop-shadow(0 0 6px #5cff9b);transform: scale(1.08);}

.toggle-midi-output {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
  }

  .toggle-midi-output-label {
    font-family: Calibri;
    font-size: 14px;
    color: #5aa6ff;
}

#toggleMidiOutput:focus {
    outline: none;
}

.toggle-correlated-humanization {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
  }

  .toggle-correlated-humanization-label {
    font-family: Calibri;
    font-size: 14px;
    color: #5aa6ff;
}

#toggleCorrelatedHumanization:focus {
    outline: none;
}

.toggle-drifting-humanization {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
  }

  .toggle-drifting-humanization-label {
    font-family: Calibri;
    font-size: 14px;
    color: #5aa6ff;
}

#toggleDriftingHumanization:focus {
    outline: none;
}

.toggle-midi-box {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
}

.toggle-midi-box-label {
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}

#toggleMidiBox:focus {
    outline: none;
}

.master-song-auto-commit {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
}

.master-song-auto-commit-label {
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}

#master-song-auto-commit:focus {
    outline: none;
}


.toggle-visual-mode  {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
}

.toggle-visual-mode-label {
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}

#visualModeToggle:focus {
    outline: none;
}

.absolute-time-toggle  {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
 }

 #absoluteClockToggle:focus {
  outline: none;
}      

.clock-label {      
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}

.auto-adjust-bass-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
 }

 #autoAdjustBassToChordToggle:focus {
  outline: none;
}      

.auto-adjust-bass-toggle-label {      
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}

.include-debussian {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
 }

 #includeDebussianBeat6:focus {
  outline: none;
}      

.include-debussian-label {      
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}



.beat6-bridge-enabled-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  top: 0px;
  left: 0px;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
  gap: 2px;
 }

 .beat6-bridge-enabled-label {      
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
}

 .beat6-bridge-enabled-toggle:focus {
  outline: none;
}      

.beat6-bridge-option-label {      
  font-family: Calibri;
  font-size: 14px;
  color: #5aa6ff;
  padding-left: 5px;
}





  /* RANDOMIZER AGENT*/

  #randomBox {
    z-index: 699;
    cursor: auto;
    position: fixed;
    top: 316px;
    left: 100px;
    width: 285px;
    color: #0c0c0c;
    font-family: calibri;
    font-size: 14px;
    font-weight: normal;
    -webkit-user-select: none;
    user-select: none;
    text-align: center;
    letter-spacing: 1.5px;
    scrollbar-color: #24d4ff #ffffff;
    height: 187px;
}

body.piano-roll-open #randomBox {
  position: fixed;
  left: 80px;
z-index:790;
  opacity:0;
}



body.piano-roll-open .misc-button-container {
  background-color: #ffffffbd;
  border-radius: 66px;
  box-shadow: -1px -1px 11px 6px #ffffffbd;
}

body.piano-roll-open .transport-controls {
  z-index: 820;
  position: fixed;
  left: 7px;
  top: 19px;
  width: 150px;
  background-color: #ffffff;
  border-radius: 70px;
  box-shadow: 12px 6px 12px 6px #ffffff;
}



body.piano-roll-open #randomBox:hover,
body.piano-roll-open #pianoRollToggle:hover ~ #randomBox {
  opacity: 1;
}

body.piano-roll-open #randomBox:hover {

  opacity:1;
}


body.piano-roll-open #pianoRollToggle {
  z-index: 999999;
}







#randomBoxHelp {
  position: fixed;
  top: 337px;
  left: 98px;
  width: 285px;
  font-size: 17px;
  color: #ff001f8c;
  text-align: center;
  pointer-events: none;
  opacity: 0.9;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 2px 1px 2px #ffffff;
  filter: drop-shadow(2px 4px 6px white);
  padding-bottom: 9px;

}

#randomBoxHelp {
  transition: opacity 0.15s ease;
}

  .misc-button-container {


    color: white;
    font-family: sans-serif;
    font-size: 14px;
    z-index: 501;
    width: 321px;
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 9px;
    padding: 20px 0px 3px 0px;
    gap: 4px 0px;
    justify-content: center;
    height: 190px;
    border-radius: 70px;
  }



  .misc-break, .misc-break2, .misc-break3, .misc-break4 {
    position: fixed;
    top:0px;
    left:0px;
    flex-basis: 100%;
    height: 0;
  }

  .random-box-separator {color: #ff7b00;

  font-weight: bold;
  padding: 0px 3px 0px 0px;
  font-size: 14px;
}

.separator1  {
  position: fixed;
  top: 369px;
  left: 262px;

} 

.random-box-separator-alt {
  position: fixed;
  top: 451px;
  left: 126px;
  color: #ff7b00;
  font-weight: bold;
  padding: 0px 3px 0px 0px;
  font-size: 14px;
}

.random-box-separator-straight {
    position: fixed;
    top: 487px;
    left: 275px;
  color: #ff7b00;
  padding: 0px 3px 0px 0px;
  font-size: 14px;
  font-family: calibri;
} 







.tempo-cat-switch {
  position: fixed;
  top: 368px;
  left: 281px;
  width: 48px;
  height: 19px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  border: 2px solid #fb8d28;
  margin-right: 3px;
}

.tempo-cat-knob {
  position: absolute;
  top: 1px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ff8617;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Calibri, sans-serif;
  font-size: 9px;
  font-weight: bold;
  transition: left 0.18s ease;
}

.tempo-cat-switch.slow .tempo-cat-knob {
  left: 2px;
}

.tempo-cat-switch.medium .tempo-cat-knob {
  left: 16px;
}

.tempo-cat-switch.fast .tempo-cat-knob {
  left: 29px;
}


#loadFullPatternsOnStepsBtn {
  position: fixed;
  top: 399px;
  left: 268px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(255, 145, 44);
  border: 2px solid #ffffff;
  border-radius: 15px;
  padding: 0px 10px;
  font-family: Calibri, sans-serif;
  font-size: 13.5px;
  font-weight: bold;
  letter-spacing: 1.5px;
  color: #ffffff;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  box-shadow: 0px 6px 10px 5px rgb(255 255 255 / 53%);
  transition: background-color 0.15s ease, transform 0.5s ease, box-shadow 0.15s ease;
  width: 74px;
  height: 21px;
}

#loadFullPatternsOnStepsBtn:hover {
  background: rgb(255 145 44);
  color: white;
  box-shadow: 0 3px 8px rgb(255 145 44 / 45%);
}

#loadFullPatternsOnStepsBtn:focus {
  outline: none;
}

/* toujours en dernier */
#loadFullPatternsOnStepsBtn:active,
#loadFullPatternsOnStepsBtn.pressed {
  transform: translateX(50px);
  background: rgb(239, 129, 28);
}



.full-pattern-load-mode-switch {

  width: 48px;
  height: 19px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: #fff;
  border: 2px solid #54a3ff;
  margin-right: 3px;
  -webkit-user-select: none;
  user-select: none;
  margin-left: 8px;

}

.full-pattern-load-mode-switch:focus {
  outline: none;
}

.full-pattern-load-mode-knob {
  position: relative;
  top: 1px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: #54a3ff;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Calibri, sans-serif;
  font-size: 8px;
  font-weight: bold;
  letter-spacing: 0.4px;
  transition: left 0.18s ease;
}

.full-pattern-load-mode-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #54a3ff;
  cursor: pointer;
  text-align: left;
  position: relative;
  top: -14px;
  left: 50px;
  width: 210px;
  letter-spacing: 1.5px;
  font-size: 14px;
  font-family: calibri;
  padding-left: 5px;
}

.full-pattern-load-mode-knob,
.tempo-cat-knob {
pointer-events: none;
}

.full-pattern-load-mode-switch.beat6 .full-pattern-load-mode-knob {
  left: 2px;
  top: 0px;
}

.full-pattern-load-mode-switch.long .full-pattern-load-mode-knob {
  left: 10px;
  top: 0px;
}

.full-pattern-load-mode-switch.all .full-pattern-load-mode-knob {
  left: 21px;
  top: 0px;
}

.full-pattern-load-mode-switch.random .full-pattern-load-mode-knob {
  left: 29px;
  top: 0px;
}



#loadRandomBassGridBtn {
  position: fixed;
  top: 399px;
  left: 215px;
  height: 21px;
  cursor: pointer;
  background: rgb(255 145 44);
  border: 2px solid #ffffff;
  border-radius: 15px;
  font-family: Calibri;
  font-size: 13.5px;
  font-weight: bold;
  padding: 0px 6px 0px 8px;
  letter-spacing: 1.5px;
  color: #ffffff;
  box-shadow: 0px 6px 10px 5px rgb(255 255 255 / 53%);
  -webkit-user-select: none;
  user-select: none;
}

#loadRandomBassGridBtn:hover {
  background: rgb(255 145 44);
  color: white;
  box-shadow: 0 3px 8px rgb(255 145 44 / 45%);
}

#loadRandomBassGridBtn:focus {
  outline: none;
}

#loadRandomBassGridBtn:active {
  transform: translateY(1px);
}

#loadRandomBassGridBtn.is-loaded {
  background: rgb(255 145 44);
  color: white;
  border-color: white;
  box-shadow: 0px 4px 9px 3px rgb(255 255 255 / 45%);
}

.demo-container {
  display: flex;
  position: fixed;
  top: 399px;
  left: 130px;
  cursor: pointer;
  z-index: 820;
}


.demo-box {
  background: #ffffff;
  border: 2px solid rgb(255 145 44);
  border-radius: 15px;
  font-family: Calibri;
  font-size: 13.5px;
  font-weight: bold;
  padding: 0px 2px 0px 6px;
  letter-spacing: 1.5px;
  color: rgb(255 145 44);
  box-shadow: 4px 3px 7px 2px rgb(255 145 44 / 47%);
  -webkit-user-select: none;
  user-select: none;
}




.demo-menu {
  display: none;
  position: fixed;
  top: 424px;
  left: 130px;
  min-width: 202px;
  background: white;
  border: 2px solid #fb8d28;
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, .18);
  overflow: hidden;

}

.demo-menu.open {
  display: block;
}

.demo-menu-item {
  padding: 5px 10px;
  font-family: Calibri;
  font-size: 13px;
  font-weight: bold;
  color: #4e4e4e;
  background: white;
  cursor: pointer;
  white-space: nowrap;
}

.demo-menu-item:hover {
  background: #fff0e3;
  color: #fb8d28;
}


.song-template-container {
  display: flex;
  align-items: center;
  cursor: pointer;
  z-index: 820;
  position: fixed;
  top: 366px;
  left: 175px;
}

.song-template-select {
  height: 23px;
  box-sizing: border-box;
  background: #ffffff;
  border: 2px solid rgb(255 145 44);
  border-radius: 15px;
  padding: 0 23px 0 8px;
  font-family: Calibri;
  font-size: 13.5px;
  font-weight: bold;
  letter-spacing: 1px;
  color: rgb(255 145 44);
  box-shadow: 4px 3px 7px 2px rgb(255 145 44 / 47%);
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgb(255 145 44) 50%), linear-gradient(135deg, rgb(255 145 44) 50%, transparent 50%);
  background-position: calc(100% - 12px) 9px, calc(100% - 8px) 9px;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  width: 33px;
}

.song-template-select:hover,
.song-template-select:focus {
  background-color: #fff8f1;
}

.song-template-select option {
  background: #ffffff;
  color: #4e4e4e;

  font-family: Calibri;
  font-size: 13px;
  font-weight: bold;
}

.song-template-select.has-template {
  background-color: #fff0e3;
}

.auto-randomizer  {        

  display: inline-flex;
  z-index: 700;
}
.auto-randomizer:focus  { outline:none;}

.auto-randomizer-control  { 
  position: fixed;
  top: 487px;
  left: 207px;
}


  .auto-randomizer-control:focus  { outline:none;}

#autoRandomizerIntervalMin, #autoRandomizerIntervalMax {
  width: 41px;
  background-color: white;
  cursor: pointer;
  border-radius: 15px;
  padding: 0px 3px 0px 8px;
  font-family: calibri;
  font-size: 12px;
  color: #ff7b00;
  border: 2px solid #fb8d28;
  align-content: center;
  font-weight: bold;


  -webkit-user-select: none;user-select: none;
  }

  #autoRandomizerIntervalMin {
    position: fixed;
    top: 487px;
    left: 231px;
    }


    #autoRandomizerIntervalMax {
      position: fixed;
      top: 487px;
      left: 283px;
      }

 #autoRandomizerIntervalMin:focus, #autoRandomizerIntervalMax:focus  { outline:none;}


  /* Force l'affichage des flèches */
#autoRandomizerInterval::-webkit-inner-spin-button,
#autoRandomizerInterval::-webkit-outer-spin-button {
  opacity: 1;
  display: block;
  margin: 0;
}





#autoRandomizerEnabled {       

  border: none;
  background: none;
  accent-color: #ff912c;
  cursor: pointer;
  box-shadow: 0 0 0 3px #ff912c inset;
  transition: box-shadow 0.15s ease;
}

#autoRandomizerEnabled:focus  { outline:none;}

.auto-randomizer-dropdown {
  position: fixed;
  top: 486px;
  left: 151px;
  display: inline-block;
  margin-right: 9px;
  z-index: 820;
}
.auto-randomizer-dropdown:focus  { outline:none;}

#autoRandomizerDropdownBtn {

  border: 2px solid #fb8d28;
  background: white;
  color: #ff7b00;
  border-radius: 15px;
  padding: 1px 10px;
  font-family: Calibri;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  position: fixed;
  top: 487px;
  left: 152px;
}

#autoRandomizerDropdownBtn:focus  { outline:none;}

#autoRandomizerDropdownBtn.is-open {
  background-color: #fff2e5;
  color: #ff7b00;
  border-color: #ff7b00;
}

.auto-randomizer-menu {
  
  display: none;
  z-index: 999999999;
  width: max-content;
  padding: 6px;
  background: white;
  border-radius: 10px;
  box-shadow: 0px 2px 18px 7px #ffb978;
  
}





.auto-randomizer-menu:focus  { outline:none;}

.auto-randomizer-menu.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 394px;
  bottom: calc(100vh - 526px);
}




.value-patterns, .value-degrees, .value-variations, .value-audiopresets {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Calibri;
  font-size: 12px;
  font-weight: bold;
  color: #4e4e4e;
  cursor: pointer;
  text-align: left;
}

.auto-randomizer-menu label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: Calibri;

  font-weight: bold;
  color: #4e4e4e;
  cursor: pointer;
  text-align: left;
}

.option-randomizer-menu {
  
  font-family: calibri;
  font-size: 11px;
  padding-left: 14px;
  color: #7fb9ff !important;
    
  }

.include-random-speed-beat1to4, 
.include-random-speed-beat5, 
.include-random-speed-beat6, 
.beatline-chord-inversion-toggle, 
.include-random-beat6-loop-grid,
.include-random-beat6-loop-units,
.include-random-beat6-octavizer-free-mode,
.include-random-beat6-octavizer-index, 
.beautify-after-patterns, 
.beautify-after-degrees, 
.beautify-after-chord-variations, 
.include-random-wheel-beat1-4, 
.include-random-wheel-beat5, 
.include-random-wheel-beat6, 
.include-random-beat8-treatment {       font-style: italic;        font-size: 11px;}


#includeRandomSpeedBeat1to4:focus, #includeRandomSpeedBeat5:focus, #includeRandomSpeedBeat6:focus, #beatlineChordInversionToggle:focus  {    outline:none;
}



.auto-randomizer-group 
{
  border: 1px solid #ffd4ad;
  border-radius: 7px;
  margin-bottom: 4px;
  background-color: #fff9f3;
  margin-left: 8px;
  margin-right: 8px;
  margin-top: 8px;
  padding: 1px 5px 1px 5px;
}

.auto-randomizer-main-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.auto-randomizer-sub-toggle {

  border: none;
  background: none;
  color: #fb8d28;
  font-weight: bold;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 6px;
}

.auto-randomizer-sub-toggle:focus {
  outline: none;
}

.auto-randomizer-subgroup {
  display: none;
  flex-direction: column;
  margin-bottom: 4px;
}

.auto-randomizer-subgroup.open {
  display: flex;
}


#skeletonModeBtn {   
  position: fixed;
  top:0px;
  left:0px;
   border: none;
  background: none;
  accent-color: #ff912c;
  cursor: pointer;
  box-shadow: 0 0 0 3px #ff912c inset;
  transition: box-shadow 0.15s ease;
}

.skeleton-reset-table {

    position: fixed;
    top:0px;
    left:0px;
}

  .skeleton-reset-table-btn  {        background: none;
    border: none;
    color: #ff7b00;
    font-family: calibri;
    font-weight: bold;
    font-size: 15px;
    display: none;
  }
  

#skeleton-mode-toggle {
  position: fixed;
  top:0px;
  left:0px;
  align-content: center;
  padding: 3px;
  padding: 0px 0px 0px 0px;
display:none;
}
#skeletonModeBtn:focus  { outline:none;}
#skeletonScaleBox {position: relative;top: 1px;left: 0px;align-content: center;    display: none;}
#skeletonScaleSelect{appearance: none;border-radius: 15px;font-family: calibri;font-size: 12px;padding: 1px 3px 1px 3px;width: 46px;text-align: center;color: #4e4e4e;border: 2px solid #fb8d28;    font-weight: bold;margin-right: 4px;-webkit-user-select: none;user-select: none;}
#skeletonScaleSelect:focus {outline: none;}


#skeleton-controls{ 
  position: relative;
  top: 0px;
  left: 0px;
  display: flex;
  gap: 9px;
  height: 23px;
  align-self: center;
  padding-left: 1px;
  padding-right: 3px;
  padding-top: 3px;
  display: none;
    }
.skeleton-btn{    background-color: white;cursor: pointer;border-radius: 15px;padding: 2px 3px 3px 3px;font-family: calibri;font-size: 12px;color: #4e4e4e;border: 2px solid #fb8d28;align-content: center;    font-weight: bold;}
.skeleton-btn:focus  { outline:none;}


.beat-global-random-btn {  
  position: fixed;
  top: 436px;
  left: 139px;

  border: none;
  background: none;
  cursor: help;
  -webkit-user-select: none;user-select: none;
}
.beat-global-random-btn:focus {outline: none;}
#beat-global-random-btn img.spin {animation: dice-spin 0.8s ease-out;transform-origin: 60% 50%;}
.random-degree-btn {width: 42px;}
.compact-random-degree-btn {       border: none;
  background: none;
  position: fixed;
  top: 435px;
  left: 180px;
  -webkit-user-select: none;user-select: none;
  cursor: help;}
.compact-random-degree-btn:focus {outline: none;}
#compact-random-degree-btn.spin {animation: dice-spin 0.8s ease-out;transform-origin: center center;}
@keyframes dice-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }}

/* RANDOMIZE ALL */
.logo-wrapper {        
  cursor: help;
  -webkit-user-select: none;user-select: none;
  width: 50px;
  position: fixed;
  top: 434px;
  left: 229px;
  height: 46px;
  margin-left: 6px;
}
.logo-wrapper img {    position: absolute;top: 0;left: 0;}
.logo-wrapper img.hover {opacity: 0;}
.logo-wrapper:hover img.hover {opacity: 1;}
.logo-wrapper:hover img.default {opacity: 0;}
.triggerRandomizeAllColumns {    display: none;background: none;border: none;font-size: 31px;position: relative;top: 0px;left: 0px;}
#tinyDice {
  vertical-align: text-top;
  position: fixed;
  top: 445px;
  left: 95px;
  -webkit-user-select: none;user-select: none;
  width: 28px;
  height: 28px;
  transform: none;
  z-index: 691;

}
@keyframes dice-spin {0%   { transform: rotate(0deg); }100%  { transform: rotate(-360deg); }}
/* Classe appliquée pendant le spin */
.logo-wrapper img.spin {animation: dice-spin 0.8s ease-out;transform-origin: center center; /* centre de l’image */}
@keyframes dice-spin-right {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }}
#triggerRandomizeAllColumnsBtn img.spin-right {animation: dice-spin-right 0.8s ease-out;transform-origin: center center;}

@keyframes spin-left {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}

@keyframes spin-right {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.random-preset-btn-img.spin-left {
  animation: spin-left 0.8s ease-out;
  transform-origin: center center;
}

.random-preset-btn-img.spin-right {
  animation: spin-right 0.8s ease-out;
  transform-origin: center center;
}
 

/* IMAGE TOGGLER FOR SMALL DICES & LOOP BUTTON */
.toggle-image-checkbox {  display: flex;position: absolute;width: 21px;height: 21px;left: 50%;transform: translateX(-50%);cursor: pointer;}
.toggle-image-checkbox input[type="checkbox"] {    opacity: 0;width: 100%;height: 100%;margin: 0;position: relative;left: -12px;top: 0;cursor: pointer;display: none;}
.toggle-image-checkbox .img-off,
.toggle-image-checkbox .img-on {position: absolute;top: 0;width: 100%;height: 100%;object-fit: contain;pointer-events: none;}
.toggle-image-checkbox input[type="checkbox"]:checked ~ .img-on {opacity: 1;  background-color: #ffb67285;
  border-radius: 13px;}
.toggle-image-checkbox input[type="checkbox"]:not(:checked) ~ .img-on {    opacity: 0;}
.toggle-image-checkbox input[type="checkbox"]:checked ~ .img-off {opacity: 0;}
.toggle-image-checkbox input[type="checkbox"]:not(:checked) ~ .img-off {opacity: 1;}

.toggle-loop-checkbox {  
  display: flex;position: absolute;width: 21px;height: 21px;left: 50%;transform: translateX(-50%);cursor: pointer;
  vertical-align: text-top;
  position: absolute;
  top: 3px;
  left: 135px;
}
.toggle-loop-checkbox input[type="checkbox"] {    opacity: 0;width: 100%;height: 100%;margin: 0;position: relative;left: -12px;top: 0;cursor: pointer;display: none;}
.toggle-loop-checkbox .img-off,
.toggle-loop-checkbox .img-on,
.toggle-loop-checkbox .img-song-part  {position: absolute;top: 0;width: 100%;height: 100%;object-fit: contain;pointer-events: none;}
.toggle-loop-checkbox input[type="checkbox"]:checked ~ .img-on {opacity: 1; }
.toggle-loop-checkbox input[type="checkbox"]:not(:checked) ~ .img-on {    opacity: 0;}
.toggle-loop-checkbox input[type="checkbox"]:checked ~ .img-off {opacity: 0;}
.toggle-loop-checkbox input[type="checkbox"]:not(:checked) ~ .img-off {opacity: 1;}

.toggle-autoscroll-checkbox {  display: flex;position: absolute;width: 21px;height: 21px;left: 50%;transform: translateX(-50%);cursor: pointer;}
.toggle-autoscroll-checkbox input[type="checkbox"] {    opacity: 0;width: 100%;height: 100%;margin: 0;position: relative;left: -12px;top: 0;cursor: pointer;display: none;}
.toggle-autoscroll-checkbox .img-off,
.toggle-autoscroll-checkbox .img-on {position: absolute;top: 0;width: 100%;height: 100%;object-fit: contain;pointer-events: none;}
.toggle-autoscroll-checkbox input[type="checkbox"]:checked ~ .img-on {opacity: 1; }
.toggle-autoscroll-checkbox input[type="checkbox"]:not(:checked) ~ .img-on {    opacity: 0;}
.toggle-autoscroll-checkbox input[type="checkbox"]:checked ~ .img-off {opacity: 0;}
.toggle-autoscroll-checkbox input[type="checkbox"]:not(:checked) ~ .img-off {opacity: 1;}

.toggle-bubble-checkbox {     display: flex;
  position: absolute;
  width: 30%;
  height: 24px;
  left: 50%;
  transform: translateX(-50%);
  cursor: pointer;
  margin: 0px;
  padding: 0px;}
.toggle-bubble-checkbox input[type="checkbox"] {    opacity: 0;width: 100%;height: 100%;margin: 0;position: relative;left: -12px;top: 0;cursor: pointer;display: none;}

.toggle-bubble-checkbox .img-on {
  position: absolute;
  top: 1px;
  width: 100%;
  height: 97%;
  object-fit: contain;
  pointer-events: none;
}

.toggle-bubble-checkbox .img-off {
  position: absolute;
  top: 1px;
  width: 100%;
  height: 86%;
  object-fit: contain;
  pointer-events: none;
  filter: drop-shadow(3px 3px 3px #ffb67240);
}

.toggle-bubble-checkbox input[type="checkbox"]:checked ~ .img-on {opacity: 1;background-color: #ffb67221;
  border-radius: 15px;
  filter: drop-shadow(5px 1px 6px #ffb67240);}
.toggle-bubble-checkbox input[type="checkbox"]:not(:checked) ~ .img-on {    opacity: 0;}
.toggle-bubble-checkbox input[type="checkbox"]:checked ~ .img-off {opacity: 0;}
.toggle-bubble-checkbox input[type="checkbox"]:not(:checked) ~ .img-off {opacity: 1;}

.loop-label {display: inline-flex;align-items: center;gap: 3px;margin-left: 0px;padding-top: 0px;position: absolute;top: 1px;left: 124px;font-size: 13px;font-family: calibri;}
      
#random-preset-btn  { 
  border: none;
  background: none;
  position: fixed;
  top: 433px;
  left: 278px;
  cursor: help;
  -webkit-user-select: none;user-select: none;
}
#random-preset-btn:focus {outline: none; }
.random-preset-btn-img {width: 48px;}

/* TOOLBAR */
.import-export-preset  {
  
  z-index: 1;
  position: fixed;
  top: 104px;
  left: -11px;
  background-color: #ffffffab;
  border-radius: 0px 12px 12px 0px;
  border: 1px solid #b8b8b8;
  display: grid;
  scale: 0.57;
  width: 58px;
  -webkit-user-select: none;
  user-select: none;
  height: max-content;
  grid-auto-rows: max-content;
}
.create-sequence {
  position: relative;
  border: none;
  background: none;
  font-size: 25px;
  top: 4px;
  left: -2px;

  padding-top: 5px;
}
#exportSequenceBtn {
  position: relative;
  border: none;
  background: none;
  font-size: 26px;
  top: 10px;
  left: -5px;

}
#importBtn {
  font-size: 31px;
  border: none;
  background: none;
  position: relative;
  top: 15px;
  left: -3px;

}


/* masque totalement le vrai input */
#logFile {
  display: none;
}

/* faux label visible */
#currentPresetName {
  position: fixed;
  top: 155px;
  left: 31px;
  z-index: 510;
  cursor: auto;
  font-family: calibri;
  font-size: 14.4px;
  font-weight: bold;
  letter-spacing: 2px;
  color: #ff797a;
  text-shadow: 2px 1px 2px #ffffff;
  filter: drop-shadow(2px 4px 6px white);
  text-align: center;
  width: 121px;
  text-overflow: ellipsis;
  overflow: hidden;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 0px 0px 2px 10px;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transform: rotate(-10deg);
}

#logSpeed {width: 60px;position: absolute;top: -19px;left: 386px;display:none;}


#toggleGridModeBtn.grid-mode-switch {
  position: fixed;
  top: 368px;
  left: 224px;
  width: 33px;
  height: 19px;
  padding: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgb(255 255 255);
  font-family: calibri, sans-serif;
  font-size: 10px;
  font-weight: bold;
  color: #000000;
  border: 2px solid #fb8d28;
  align-content: center;
  margin-right: 3px;
}

.grid-mode-knob {
  position: absolute;
  top: 1px;
  left: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  transition: left 0.18s ease, background 0.18s ease;
  z-index: 2;
  font-weight: bold;
}

#toggleGridModeBtn.binary .grid-mode-knob {
  left: 2px;
  background: #ff8617;
  position: absolute;
  top: 1px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  color: #ffffff;
  display: flex;
  justify-content: center;
  font-size: 11px;
  line-height: 1.5;
  transition: left 0.18s ease, background 0.18s ease;
  z-index: 2;
  font-weight: bold;
}

#toggleGridModeBtn.ternary .grid-mode-knob {
  left: 14px;
  background: #ff8617;
  align-items: center;
  font-size: 12px;
}

#toggleGridModeBtn.binary .grid-mode-label.left,
#toggleGridModeBtn.ternary .grid-mode-label.right {
  opacity: 1;
}
#toggleTheoryBoxBtn { 
  position: relative;
  cursor: pointer;
  top: 15px;
  left: 6px;
}
#toggleSelectionTableBtn  {
  background: none;
  border: none;
  position: relative;
  top: 27px;
  left: -4px;

}
#toggleSelectionTableBtn:focus {
  outline: none;
}
.export-mid-label  {     z-index: 800;background-color: #ffffff;font-family: calibri;font-weight: bold;font-size: 14px;letter-spacing: 1.5px;padding-left: 4px;position: fixed;top: 258px;left: 9px;}
#exportMidBtn  {    
  background: none;
  border: none;
  font-size: 28px;
  position: relative;
  top: 32px;
  left: -1px;
  margin-bottom: 49px;

}
#exportMidBtn:focus {
  outline: none;
}
.export-csv-label   { display:none;position: fixed;top: 270px;left: 9px;z-index: 800;background-color: #ffffff;font-family: calibri;font-weight: bold;font-size: 14px;letter-spacing: 1.5px;padding-left: 4px;}
#exportCsvBtn  { display:none;background: none;border: none;font-size: 28px;position: relative;top: -3px;left: -5px;padding-bottom: 12px;}





/* FILTER RINGS */
.filter-ring {position: absolute;top: 50%; left: 50%;transform: translate(-50%, -50%);border-radius: 50%;pointer-events: auto;cursor: pointer;}
.filter-ring.c1.active, .filter-ring.c1.hovered {background-color: rgb(255 223 193); }
.filter-ring.c2.active, .filter-ring.c2.hovered {background-color: rgb(255 205 157); }
.filter-ring.c3.active, .filter-ring.c3.hovered {background-color: rgb(255 186 123); }
.filter-ring.c4.active, .filter-ring.c4.hovered {background-color: rgb(255 166 89); }
.filter-ring.c5.active, .filter-ring.c5.hovered {background-color: rgb(255 145 53);}
.filter-ring.c6.active, .filter-ring.c6.hovered {background-color: rgb(255 123 0); }
#filterRingsContainer {    z-index: 190;position: relative;top: 0px;right: 0px;width: 600px;height: 600px;pointer-events: none;transform:scale(0.84);}
.filter-ring.c1 {width: 234px; height: 234px;z-index:160;}
.filter-ring.c2 {width: 195px; height: 195px;z-index:165;}
.filter-ring.c3 {width: 156px; height: 156px;z-index:170;}
.filter-ring.c4 {width: 117px; height: 117px;z-index:175;}
.filter-ring.c5 {width: 78px; height: 78px;z-index:180;}
.filter-ring.c6 {width: 39px; height: 39px;z-index:185;}

/* INFO BOX */
#infoBox{     letter-spacing: 1.5px;cursor: auto;position: fixed;top: 9px;right: 9px;background-color: #ffffffeb;color: #585858;border-radius: 14px;font-family: calibri;font-size: 14px;
white-space: pre-wrap;overflow: auto;padding: 5px 10px 5px 10px;font-weight: normal;-webkit-user-select: none;user-select: none;text-align: center;z-index: 600;border: 1px solid #d3d3d3;
box-shadow: 5px 6px 9px 0px #0075FF;min-width: 115px;max-width: 340px;width: max-content;}

#scalePage {     letter-spacing: 1.5px;cursor: auto;background-color: #ffffffeb;color: #585858;border-radius: 14px;font-family: calibri;font-size: 14px;
  white-space: pre-wrap;overflow: auto;padding: 5px 10px 5px 10px;font-weight: normal;-webkit-user-select: none;user-select: none;text-align: center;z-index: 600;border: 1px solid #d3d3d3;
  box-shadow: 5px 6px 9px 0px #0075FF;min-width: 115px;max-width: 340px;width: max-content;}

#infoBox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

#infoBox.visible {
  opacity: 1;
}

#infoBox {
  transform: translateY(5px);
}

#infoBox.visible {
  opacity: 1;
  transform: translateY(0);
}

#infoBox table {border-collapse: collapse;font-family: Calibri, sans-serif;font-size: 12px;color: #000000;background-color: #ffffff;border: 1px solid #cbcbcb;margin-left: auto;margin-right: auto;}
#infoBox th, #infoBox td {    border: 1px solid #cbcbcb;padding: 1px 4px;text-align: center;font-weight: normal;line-height: 11px;height: 13px;}
#infoBox th {font-weight: bold;}
#infoBox p {text-align: justify;}
#infoBox .triad-notes {        font-weight: bold;font-size: 12px;padding: 3px;}
#infoBox .triad-lines{     height:5px;min-height: 5px;line-height: 5px;font-size:5px;}
#infoBox .triad-text{ letter-spacing: 1.5px;font-size: 15px;height: 16px;min-height: 16px;line-height: 16px;text-align: left;} 
#infoBox .triad-infobox td , #infoBox .triad-infobox  {border:none ;   }
#infoBox .interval-digit {font-size: 21px;}
.enh-chord  {color:rgb(224 110 255);font-weight:bold;}
.scale-info-box-title {    font-weight: bold;font-size: 15px;color: #0075ff;margin-bottom: 4px;}
.accidental-pic  {transform:scale(1.3);margin-bottom:5px;}

/* THEORY BOX */
#theoryBox{   
  
  letter-spacing: 1.5px;
  cursor: auto;
  position: fixed;
  top: 9px;
  right: 9px;
  background-color: #fffffffa;
  color: #585858;
  border-radius: 22px;
  font-family: calibri;
  font-size: 14px;
  white-space: pre-wrap;
  overflow: auto;
  padding: 5px 10px 20px 10px;
  font-weight: normal;
  -webkit-user-select: none;user-select: none;
  text-align: center;
  z-index: 730;
  border: 1px solid #d3d3d3;
  box-shadow: 5px 6px 9px 0px #0075FF;
  max-height: 400px;
  scrollbar-color: #24d4ff #ffffff;
  display: none;
  min-width: 115px;
  max-width: 344px;
  width: max-content;

}
#theoryBox {transition: opacity 0.25s ease, transform 0.25s ease;}
#theoryBox[style*="block"] {opacity: 1;transform: scale(1);}
#theoryBox[style*="none"] {opacity: 0;transform: scale(0.97);}

/* TUTO BOX */
#tutoBox {    
  z-index: 760;
  position: fixed;
  top: 5px;
  left: 803px;
  width: 265px;
  max-height: 150px;
  color: #0c0c0c;
  border-radius: 14px;
  font-family: calibri;
  font-size: 13px;
  overflow: auto;
  padding: 8px;
  font-weight: normal;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  border: 1px solid #cccccc;
  letter-spacing: 1.9px;
  box-shadow: 5px 6px 9px 0px #0075FF;
  scrollbar-color: #24d4ff #ffffff;
  background-color: #fffaf5;

  min-width: 40px;
}

#tutoBox.flash {animation: tutoFlash 0.5s ease-in-out;}
@keyframes tutoFlash {
0%   { transform: scale(0.4); transform-origin:top center;}
50%  { transform: scale(1.09); transform-origin:top center;}
100% { transform: scale(1); transform-origin:top center; }}

#tutoBox {
  opacity: 1;
  transition: opacity 3000ms ease;
}

#tutoBox.typewriter-fadeout {
  opacity: 0;
  pointer-events: none;
}


#resetTutoBtn {
  position: sticky;
    top: 0;
    left: 0;
    cursor: pointer;
    -webkit-user-select: none;user-select: none;
    font-size: 14px;
    border: none;
    float: right;
    color: #0075ffcf;
    margin-right: 14px;
}



/* MAP TABLE WRAPPER */
#map-table-wrapper {            position: fixed;
  bottom: 6px;
  left: 5px;
  font-family: Calibri, sans-serif;
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
  height: 217px;
  background: linear-gradient(180deg, rgb(146 240 255 / 0%) 63%, rgba(255, 255, 255, 1) 87%, #ffffff00 100%);
  z-index: 790;

  
  }
#map-table-wrapper {    scrollbar-color:  #24d4ff  hsla(0, 0%, 100%, 0);}
#map-table-wrapper::-webkit-scrollbar {height: 10px;}
#map-table-wrapper::-webkit-scrollbar-track {background: #c4f7ff;border-radius: 5px;}
#map-table-wrapper::-webkit-scrollbar-thumb {background: #c4f7ff;border-radius: 5px;}
#map-table-wrapper::-webkit-scrollbar-thumb:hover {background: #c4f7ff;}
#map-table {border-collapse: collapse;}
#map-table tr:first-child td.map-label:first-child {border:none;}
#map-table-wrapper::-webkit-scrollbar-thumb:active {background: #24d4ff !important; }
#map-table .map-button-cell button { all: unset;font-family: Calibri, sans-serif;font-size: 21px;cursor: pointer;line-height: 1;padding: 0;margin: -4px 2px;font-weight: bold;color: #ff7b00;}
#map-table .map-button-cell input[type="checkbox"] {width: 11px;margin: 2px 0px 0px 0px;vertical-align: middle;}
#map-table td.map-label,
#map-table th.map-label {display:none;width: 90px;text-align: right;padding-right: 6px;font-weight: normal;background: none;border-left: none;border-top: none;border-bottom: none;color: #000000;}
#map-table th:first-child {background: none;border-top: none;border-left: none;}
#map-table {table-layout: fixed;
  width: 43px;
  position: relative;       top: 37px;}
#map-table td.map-cell {padding: 2.5px 0px;text-align:center;}
#map-table td.map-num, #map-table td.map-num:hover {font-size: 12px;background: none;border-top: none;border-left: none;border-right: none;color:black;height:8px;text-align:center;  }
#map-table td.map-button-cell {    background-color: #ffffff00;
  text-align: center;
  padding-left: 0px;
  position: relative;
  top: 0px;
  outline: none;}
#map-table td:hover:not(.map-chord-name):not(.map-button-cell):not(.map-num)    {font-weight:bold;    font-size: 14px;}
#map-table td.map-label {width: 90px;}
#map-table td.map-chord-name {     
  padding-left: 6px;
  padding-right: 1px;
  text-align: center;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 80px;
  border-radius: 15px;
  
  padding-top: 2px;
  letter-spacing: 1.5px;
    }
.map-scale-active {background-color: #ff7b00 !important; color: white !important;}
#map-table td.start_chord, #map-table td.start_chord:hover {   
  font-size: 15px;
  color: #ff4900;
  border-radius: 15px;
  font-weight: bold;
  padding-top: 3px;
}

#map-table td.map-chord-name.start_chord::after {
  content: " ▶";
  color: inherit;
  font-size: 12px;
  margin-left: 4px;
}

#map-table .octave-toggle {display:none;cursor: pointer;height: 10px;align-content: center;position: absolute;top: 35px;right: 1px;font-size: 13px;font-weight: normal;width: auto;padding: 4px;}
#map-table .chord-shift-toggle{display:none;cursor: pointer;height: 10px;align-content: center;position: absolute;top: 35px;left: 0px;font-size: 13px;font-weight: normal;width: auto;padding: 4px;}

#map-table td.map-chord-name.step-sequence-playing {
  font-size: 15px;font-weight: bold;color: #0075FF;text-shadow: -1px 1px 0px #ffffff;
background-color: #f6feff;outline:none;outline-offset: -4px;border-radius: 15px;    box-shadow: inset 1px -3px 6px 1px;
}


#map-table td.map-button-cell.step-sequence-playing {color: #0075FF;}
#map-table td.map-tempo {padding-left: 7px;text-align: left;border-top-left-radius: 43px; border-top-right-radius: 43px;    box-shadow: 1px -1px 0px 0px #ff7b00; }
#map-table td.map-pattern{padding-right: 8px;text-align: right;}
#map-table td.map-pattern{padding-right: 8px;text-align: right;border-bottom-left-radius: 43px; border-bottom-right-radius: 43px;     box-shadow: 1px 1px 0px 0px #ff7b00;}
td.map-col-highlight {border: 3px solid black !important;}
#map-lines {position: absolute;top: 0;left: 0;pointer-events: none;z-index:300;}
tr.tr-map-tempo {display:none;}
tr.tr-map-scale {display:none;}
tr.tr-map-degree {display:none;}
tr.tr-map-variant {display:none;}
tr.tr-map-bass {display:none;}
tr.tr-map-pattern {display:none;}
tr.tr-map-chord-name {   height: 20px;}

#map-table tr td.map-button-cell:nth-of-type(2) button.deleteColumnBtn {
  opacity: 0;
  pointer-events: none;
  cursor: default;
}

#map-table td[data-playback-preload="1"] {
  opacity: 0.25;
}

#map-table-wrapper[data-playback-has-preload="1"] 
#map-table td[data-playback-preload="1"] {
  opacity: 0.25;
}

.compact-map-overlay {
  position: absolute;
  top: -70px;
  left: 1px;
  width: max-content;
  height: 44px;
  pointer-events: none;
  z-index: 705;

}

.compact-step-overlay {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  padding-bottom: 2px;
  padding-top: 2px;
}

.compact-step-row.top,
.compact-step-row.bottom {
  width: 83px;
  box-sizing: border-box;
}

.compact-step-row.top {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

}

.compact-step-row.bottom {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;

}


.compact-mini {
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-family: Calibri, sans-serif;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-user-select: none;user-select: none;
  background: rgb(255 255 255 / 35%);
  align-content: center;
  box-sizing: border-box;
  min-width: 0;
  color: #59a5ff;
  outline: 1px solid #0075ff1a;

}

.compact-map-tempo,
.compact-map-bass,
.compact-map-scale,
.compact-map-degree,
.compact-map-variant {
  cursor: ns-resize;
}

.compact-chord-shift,
.compact-octave {
  cursor: pointer;
}

.compact-step-overlay.step-sequence-playing .compact-mini {
  background: #f6feff;
  color: #0075ff;
  font-weight: bold;
}

.compact-mini.compact-chord-shift,
.compact-mini.compact-octave {

  border: none;
  font: inherit;
  width: 100%;
  height: 100%;
  padding-left: 0;
  margin: 0;
  cursor: pointer;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-family: Calibri, sans-serif;
  font-size: 11px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -webkit-user-select: none;user-select: none;
  background: rgb(255 255 255 / 35%);
  align-content: center;
  box-sizing: border-box;
  min-width: 0;
  color: #59a5ff;
  outline: 1px solid #0075ff1a;

}

/* état CUSTOM (≠ valeur par défaut) */
.compact-mini.compact-chord-shift.is-custom,
.compact-mini.compact-octave.is-custom {

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;

}


.compact-chord-shift:focus {
  outline: none;
}
.compact-octave:focus {
  outline: none;
}




/* BUBBLE RESIZER */
.col-resizer {
  position: absolute;
  width: 3px;
  cursor: e-resize;
  top: 57px;
  border-left: 6px double rgb(255 182 114);
  z-index: 700;
    filter: drop-shadow(3px 4px 4px rgb(255 182 114));
}
#resizer-indicator {position: fixed;bottom:0px;color:#ff7b00;background-color:#ffffff;font-size:13px;font-family:calibri;padding:2px 6px; border-radius:6px;pointer-events: none;font-weight:bold;-webkit-user-select: none;user-select: none;z-index:9999999;}

/* BEAT GRID */
.beat-grid {     
  display: inline-flex;
  position: absolute;
  bottom: 0px;
  cursor: default;
  background-color: white;
  }
.sub1 {
  width: 23px;
  height: 12px;
  border-left: 3px solid #2b2b2b;
  box-sizing: border-box;
  font-size: 11px;
  padding-left: 2px;
  font-weight: bold;
  color: #3c3c3c;
  -webkit-user-select: none;
  user-select: none;
}
.sub2 {
  width: 23px;
    height: 10px;
    border-left: 2px solid #696969;
    box-sizing: border-box;
    font-size: 11px;
    padding-left: 3px;
    font-weight: normal;
    color: #2f2f2f;
    -webkit-user-select: none;user-select: none;
}
.sub3 {width: 23px;height: 8px;border-left: 1px solid #8f8f8f;box-sizing: border-box;font-size: 10px;padding-left: 3px;color: #ffffff;-webkit-user-select: none;user-select: none;}
.mask-for-ternary {display:none;}
.dur-1-16 { width: 23px; }
.dur-2-16 { width: 46px; }
.dur-3-16 { width: 69px; }
.dur-4-16 { width: 92px; }
.dur-5-16 { width: 115px; }
.dur-6-16 { width: 138px; }
.dur-7-16 { width: 161px; }
.dur-8-16 { width: 184px; }
.dur-9-16 { width: 207px; }
.dur-10-16 { width: 230px; }
.dur-11-16 { width: 253px; }
.dur-12-16 { width: 276px; }
.dur-13-16 { width: 299px; }
.dur-14-16 { width: 322px; }
.dur-15-16 { width: 345px; }
.dur-16-16 { width: 368px; }
.dur-17-16 { width: 391px; }
.dur-18-16 { width: 414px; }
.dur-19-16 { width: 437px; }
.dur-20-16 { width: 460px; }
.dur-21-16 { width: 483px; }
.dur-22-16 { width: 506px; }
.dur-23-16 { width: 529px; }
.dur-24-16 { width: 552px; }
.dur-25-16 { width: 575px; }
.dur-26-16 { width: 598px; }
.dur-27-16 { width: 621px; }
.dur-28-16 { width: 644px; }
.dur-29-16 { width: 667px; }
.dur-30-16 { width: 690px; }
.dur-31-16 { width: 713px; }
.dur-32-16 { width: 736px; }
.dur-33-16 { width: 759px; }
.dur-34-16 { width: 782px; }
.dur-35-16 { width: 805px; }
.dur-36-16 { width: 828px; }
.dur-37-16 { width: 851px; }
.dur-38-16 { width: 874px; }
.dur-39-16 { width: 897px; }
.dur-40-16 { width: 920px; }
.dur-41-16 { width: 943px; }
.dur-42-16 { width: 966px; }
.dur-43-16 { width: 989px; }
.dur-44-16 { width: 1012px; }
.dur-45-16 { width: 1035px; }
.dur-46-16 { width: 1058px; }
.dur-47-16 { width: 1081px; }
.dur-48-16 { width: 1104px; }
.dur-49-16 { width: 1127px; }
.dur-50-16 { width: 1150px; }
.dur-51-16 { width: 1173px; }
.dur-52-16 { width: 1196px; }
.dur-53-16 { width: 1219px; }
.dur-54-16 { width: 1242px; }
.dur-55-16 { width: 1265px; }
.dur-56-16 { width: 1288px; }
.dur-57-16 { width: 1311px; }
.dur-58-16 { width: 1334px; }
.dur-59-16 { width: 1357px; }
.dur-60-16 { width: 1380px; }
.dur-61-16 { width: 1403px; }
.dur-62-16 { width: 1426px; }
.dur-63-16 { width: 1449px; }
.dur-64-16 { width: 1472px; }

/* BEAT GRID EXTRA */
 .beat-grid-extra-wrapper {    
  position: relative;
  bottom: -25px;
  z-index: 700;
}


  .shadow-container {
    position: absolute;
    bottom: auto;
    left: 0;
    top: 0;
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
    transition: opacity 120ms ease;
    z-index: 1;
  }

  body.is-map-scrolling .shadow-container {
    opacity: 1;
    visibility: visible;
  }

.beat-grid-extra-shadow {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  position: relative;
  height: 13.7px;
  color: white;
  border-top: 1px dotted #ffffff;
  box-sizing: border-box;
  border-right: 1px solid rgb(255 255 255);
  border-radius: 15px;
  overflow: hidden;
}
.beat-grid-extra-shadow1, .beat-grid-extra-shadow2, .beat-grid-extra-shadow3, .beat-grid-extra-shadow4 {    background-color: rgb(206 239 255);}
.beat-grid-extra-shadow5 {    background-color: rgb(196 251 255);}
.beat-grid-extra-shadow6 {    background-color: rgb(194 255 249);}
.beat-grid-extra-shadow-8, .beat-grid-extra-shadow-9 {    background-color: #f5e3ff;}



 .beat-grid-extra { border-radius: 7px;background-color: white;display: flex;flex-direction: row;align-items: stretch;position: relative;width: max-content;height: 13px;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='75%' y='55%' dominant-baseline='start' text-anchor='middle' font-size='16'>✏️</text></svg>") 16 16, crosshair;
  color: white;border-top: 1px dotted #ffffff;position: relative;
  bottom: 1px;}
.beat-line-1 .beat1to4-block {            
  background-image: linear-gradient(160deg, rgb(67 213 255) 0%, rgb(206 239 255) 100%);
}
.beat-line-2 .beat1to4-block{            
  background-image: linear-gradient(160deg, rgb(67 213 255) 0%, rgb(206 239 255) 100%);
  }
.beat-line-3 .beat1to4-block{         
  background-image: linear-gradient(160deg, rgb(67 213 255) 0%, rgb(206 239 255) 100%);
      }
.beat-line-4 .beat1to4-block{              
  background-image: linear-gradient(160deg, rgb(67 213 255) 0%, rgb(206 239 255) 100%);
  }
.beat-line-5 .beat-grid-extra-sub-6of16 {         background-color: rgb(137 246 255);}
.beat-line-6 .beat6-block {  background-color: rgb(61 255 237);}

.beat6-parts-box {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 2px;
  width: max-content;
  height: 100%;
  pointer-events: auto;
  padding-left: 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
  color: #0078ff;
  left: 20px;
  position: absolute;
  top: 0px;
  background-color: #ffffff;
  padding-top: 1px;
  z-index: 2;
  border-radius: 10px;
  box-shadow: 0px 0px 10px 6px white;
}



.beat6-part-prefix {
  font-weight: bold;
  color: #ff912c;
}


.beat6-part-wheel {
  text-align: center;
  height: 14px;
  padding: 0px 0px 0px 0px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  pointer-events: auto;
  -webkit-user-select: none;user-select: none;
  text-shadow: 2px 1px 3px rgb(255 255 255);
  cursor: help;
  overflow: hidden;
  letter-spacing: 1.2px;
  min-width: 30px;
}

.beat6-parts-separator {
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  color: #0078ff;
  position: relative;
  top: -2px;
}

.beat6-part-select {
  width: 40px;
  height: 12px;


  color: #0078ff;
  border-radius: 8px;
  font-family: calibri;
  font-size: 10px;

  cursor: pointer;
  border:none;
  outline:none;
}



.beat-line-7 .beat7-block { background: repeating-linear-gradient(90deg, white 0px, #e6bbff  28px, #e6bbff  94px);}

.beat1to4-block {  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20'>✖</text></svg>") 16 16, pointer;}

.beat-pattern-scale-switch {
  position: absolute;
  left: 17px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  padding: 0;
  cursor: pointer;
  z-index: 10;
  transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    background-color: #ffffff5c;
}

.beat-pattern-scale-switch:hover {
  transform: scale(1.1);
}

.beat-pattern-scale-beat6.scale-mode-1 {
  border: 1px solid #3192ff;
  left: 6px;
  top: 1.9px;
  background-color: rgb(61 255 237);
    box-shadow: -6px -1px rgb(61 255 237);
}

.beat-pattern-scale-beat6.scale-mode-2 {
  border: 1px solid #0078ff;
  left: 6px;
  top: 1.9px;
  background-color: rgb(61 255 237);
    box-shadow: -6px -1px rgb(61 255 237);
}

.beat-pattern-scale-beat6.scale-mode-3 {
  border: 1px solid #002bff;
  left: 6px;
  top: 1.9px;
  background-color: rgb(61 255 237);
    box-shadow: -6px -1px rgb(61 255 237);
}

.beat-pattern-scale-beat1to4.scale-mode-1 {
  border: 1px solid #3192ff;
}

.beat-pattern-scale-beat1to4.scale-mode-2 {
  border: 1px solid #0078ff;
}

.beat-pattern-scale-beat1to4.scale-mode-3 {
  border: 1px solid #002bff;
}

.beat-pattern-scale-beat5.scale-mode-1 {
  border: 1px solid #3192ff;
}

.beat-pattern-scale-beat5.scale-mode-2 {
  border: 1px solid #002bff;
}

.beat-grid-extra-step {position: relative;display: flex;flex-direction: row;height: 100%;box-sizing: border-box;}
.beat-grid-extra-sub {width: 23px;height: 100%;box-sizing: border-box;border-right: 1px solid rgb(255 255 255);    background-color: rgb(206 239 255);border-radius:15px;overflow: hidden;}
.beat-grid-extra-step::before {content: "";position: absolute;left: 0;top: 0;bottom: 0;width: 1px;background: rgba(255,255,255,0.35);}
.beat-grid-extra-sub-6of16 {position: absolute;box-sizing: border-box;border-left: 1px solid rgba(255,255,255,0.18);border-right: 1px solid rgba(255,255,255,0.18);}

.beat1-4-resize-handle {position: absolute;top: 0;bottom: 0;width: 12px;z-index: 11;cursor: e-resize;background: rgb(67 213 255);}
.beat5-resize-handle {position: absolute;top: 0;bottom: 0;width: 12px;z-index: 11;cursor: e-resize;    background: rgb(0 236 255);}

.beat5-resize-left {left: 0;    border-top-left-radius: 16px;
    border-bottom-left-radius: 16px;    border-right: 4px solid #ffffff40;}
.beat5-resize-right {right: 0;    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;}
    .beat8-9-resize-handle {position: absolute;
      top: 0;
      bottom: 0;
      width: 2px;
      z-index: 11;
      cursor: e-resize;
      background: #96e5ff00;border-right: none;}
.beat5-slot {border-radius:15px;box-sizing: border-box; background-color: rgb(196 251 255);border-left: 1px dashed rgba(255,255,255,0.12);border-right: 1px dashed rgba(255,255,255,0.12);}
.beat5-block {box-sizing: border-box;border-left: 1px solid rgba(255,255,255,0.25);border-right: 1px solid rgba(255,255,255,0.25);z-index: 2;overflow: hidden;cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20'>✖</text></svg>") 16 16, pointer;}



.beat6-slot { border-radius:15px;background-color: rgb(194 255 249);}
.beat6-block {cursor: default;overflow: hidden;cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20'>✖</text></svg>") 16 16, pointer;}

.beat7-slot { border-radius:15px;background-color: #f5e3ff;}
.beat7-block-silent {background: rgba(255, 255, 255, 1);outline: 1px solid rgba(255,255,255,0.25);    border-radius: 0px;cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20'>✖</text></svg>") 16 16, pointer;}

.beat7-block {  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20'>✖</text></svg>") 16 16, pointer;}

.beat6-loop-box {
  position: absolute;
  right: -1px;
  top: 0px;
  z-index: 99999999;
  display: flex;
  align-items: center;
  height: 13px;
  padding-left: 11px;
  border-radius: 6px;
  background-color: rgb(216 255 251);
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;

}

.beat6-loop-grid,
.beat6-loop-units {
  font-size: 13.8px;
  height: 19px;
  border: none;

  color: #0078ff;
  font-family: calibri;
  appearance: none;
  letter-spacing: 1.5px;
  text-align: center;
  background: none;
}


.beat6-loop-grid
{
  border-top-left-radius: 9px;
  border-bottom-left-radius: 9px;
  font-weight: bold;
  padding: 0 0px;
}

.beat6-loop-units {
  width: 26px;
  border-top-right-radius: 9px;
  border-bottom-right-radius: 9px;
  padding: 1.5px 3px;
  -webkit-user-select: none;
  user-select: none;
}

.beat6-loop-units:focus {
outline:none;
}






.beat6-octavizer-box {
  position: absolute;
  right: 54px;
  top: 0px;
  z-index: 99999999;
  width: 44px;
  height: 13px;
  padding: 0;
  border-radius: 6px;
  background-color: rgb(216 255 251);
  font-family: calibri;
  color: #0078ff;
  -webkit-user-select: none;
  user-select: none;
  z-index: 1;
}

.beat6-octavizer-select {
  position: absolute;
  right: 0;
  top: -3px;
  appearance: none;
  border: none;
  background: none;
  color: #0078ff;
  font-family: calibri;
  font-size: 13.8px;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-align: center;
  cursor: ns-resize;
  opacity: 0;
  width: 23px;
}

.beat6-octavizer-select:focus {
  outline: none;
}

.beat6-octavizer-toggle {
  position: absolute;
  right: 28px;
  top: -2px;
  padding: 0;
  background: none;
  border: none;
  color: #0078ff;
  font-size: 11px;
  font-weight: bold;
  line-height: 18px;
  cursor: pointer;
}

.beat6-octavizer-toggle.is-muted {
  opacity: 0.35;
}

.beat6-octavizer-label {
  position: absolute;
  right: 3px;
  top: -2.2px;
  width: 22px;
  height: 15px;
  text-align: center;
  pointer-events: none;
  font-size: 14px;
}


.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="2"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 46px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="4"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 92px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="8"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 184px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="12"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 276px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="16"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 368px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="20"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 460px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="24"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 552px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="28"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 644px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="B"][data-loop-units="32"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 736px);}

.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="3"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 69px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="6"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 138px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="9"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 207px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="12"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 276px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="15"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 345px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="18"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 414px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="21"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 483px);}
.beat-grid-extra-sub.beat6-block[data-loop-grid="T"][data-loop-units="24"] {background: repeating-linear-gradient(90deg, rgb(61 255 237) 0px, white 552px);}




.beat-grid-extra-8,
.beat-grid-extra-9 {
  position: relative;
  min-height: 13px;
  overflow: visible;
}

.bass-grid-step {
  position: relative;
  height: 100%;
}

.bass-grid-bg {
  background-color: #f5e3ff;
  background-size: 23px 100%;
}

.bass-grid-block {

  box-sizing: border-box;
  background-color: #d896ff;
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text x='50%' y='50%' dominant-baseline='middle' text-anchor='middle' font-size='20'>✖</text></svg>") 16 16, pointer;
}

.bass-grid-melody-block.melody-shift-neg-36 {
  background-color: #b96be4;
}

.bass-grid-melody-block.melody-shift-neg-24 {
  background-color: #c04aff;
}

.bass-grid-melody-block.melody-shift-neg-12 {
  background-color: #d183ff;
}

.bass-grid-melody-block.melody-shift-pos-0 {
  background-color: #d791ff;
}

.bass-grid-melody-block.melody-shift-pos-12 {
  background-color: #e3aeff;
}

.bass-grid-melody-block.melody-shift-pos-24 {
  background-color: #e7bcff;
}

.bass-grid-melody-block.melody-shift-pos-36 {
  background-color: #efceff;
}

.beat8-treatment-switch {
  position: absolute;
  right: 14px;
  top: 1px;
  z-index: 20;
  width: 26px;
  height: 9px;
  line-height: 7px;
  padding: 0 4px;
  border-radius: 8px;
  border: 1px solid #ffffffcc;
  background: #ffffff8a;
  color: #0075ff;
  font-family: Calibri, sans-serif;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
  font-weight: bold;

}



.bass-grid-wheel {
  position: absolute;
  left: -1px;
  width: 70%;
  font-size: 14px;
  line-height: 1;
  -webkit-user-select: none;user-select: none;
  cursor: ns-resize;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  color: #5b5b5b;
  pointer-events: auto;
  text-shadow: 2px 1px 3px rgb(255 255 255);
  letter-spacing: 1.4px;
}

.bass-grid-wheel-value {
  display: block;
  width: fit-content;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
  padding-left: 4px;
  padding-right: 4px;
  opacity: 0;
}

.bass-grid-offset-select {
  height: 16px;
  border: none;
  border-radius: 6px;
  top: -1px;
  left: 1px;
  display: block;
  text-overflow: ellipsis;
  padding-left: 4px;
  background-color: #ffffff00;
  padding-right: 4px;
  position: absolute;
  width: fit-content;
  font-size: 11px;
  line-height: 1;
  -webkit-user-select: none;user-select: none;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  color: #ffffff;
  pointer-events: auto;
  letter-spacing: 1.4px;
  appearance: none;
  font-family: calibri;
  font-weight: bold;

  
}

.bass-grid-offset-select option {
  font-size:11px;
  background-color:#ececec;
  color:rgb(130, 130, 130);
}


.bass-grid-offset-select option[value="0"], .bass-grid-offset-select option[value="7"], .bass-grid-offset-select option[value="12"],.bass-grid-offset-select option[value="19"] {

  background-color:#79b8ff;
  font-weight: bold;
  color:white;
}

.bass-grid-offset-select option[value="6"], .bass-grid-offset-select option[value="8"], .bass-grid-offset-select option[value="18"],.bass-grid-offset-select option[value="20"] {

  background-color:#c5e0ff;
  font-weight: bold;
  color:white;
}

.bass-grid-offset-select:focus {
  outline: none;
}


.beat-pattern-wheel {
  position: absolute;
  left: 27px;
  top: -4%;
  z-index: 10;
  height: 14px;
  padding: 0px 6px 0px 6px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 13px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
  border-radius: 4px;
  color: #0078ff;
  pointer-events: auto;
  -webkit-user-select: none;user-select: none;
  text-shadow: 2px 1px 3px rgb(255 255 255);
  cursor: help;
  overflow: hidden;
  background-color: #ffffff5c;
  letter-spacing: 1.2px;
}

.bass-grid-block-preview {
  outline: 1px dashed rgba(255,255,255,0.8);
}

.beat-pattern-random-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: 16px;
  height: 16px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #ffffff;
  color: #0075ff;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  cursor: pointer;
  -webkit-user-select: none;user-select: none;
}

.beat-pattern-random-btn:hover {
  transform: translateY(-50%) scale(1.08);
}


#beat-grid-extra-wrapper {
  position: relative;
}



/* ROTARY CONTROLS */
.rotary-controls {-webkit-user-select: none;user-select: none;position: fixed;top: 34px;left: 20px;background: #dbecff;padding: 8px;border-radius: 25px;font-family: sans-serif;font-size: 10px;z-index: 800;    
outline: 6px double #0075ff;box-shadow: 13px 9px 20px 0px #0075FF;width:480px;display:none;}
#tailRange {width: 150px;}
#presetSelector {padding: 0px 50px 10px 50px;display: flex;}
#prevPreset, #nextPreset {background: none;border: none;color: #0075ff;font-size: 13px;cursor: pointer;}
#presetName {min-width: 100px;align-content: center;text-align: center;font-size: 17px;font-weight: bold;font-family: calibri;color: #0075ff;}

.rotary-echo-type-status  {padding: 4px;  }
.echoTypeSelect   {padding: 4px;  }
.rotary-humanization-status  {    padding: 4px;    align-items: center;}
.humanization   {    padding: 4px;    align-items: center;}
.rotary-timing-mode-status  {    padding: 4px;    align-items: center;}
.timing-range {    padding: 4px;    align-items: center;}

.global-volume   {padding: 4px;    align-items: center;}
.bass-volume   {padding: 4px;    align-items: center;}
.chord-volume   {padding: 4px;    align-items: center;}
.tailControlContainer  {padding: 4px;    align-items: center;}
.echo-volume   {padding: 4px;    align-items: center;}
.fade-in-note {padding: 4px;    align-items: center;}
.fade-in-echo   {padding: 4px;    align-items: center;}
.fade-out-echo   {padding: 4px;   align-items: center;}
.echo-duration   {padding: 4px;    align-items: center;}
.duration-variation {    padding: 4px;    align-items: center;}
.volume-variation {    padding: 4px;    align-items: center;}

/* PARAMETRIC PIANO => SWITCHVIEW */
/* état par défaut : ROSACE */
body.view-rosace #rosace1,
body.view-rosace #rosace2 {opacity: 1;pointer-events: auto;}
body.view-rosace .parametric-piano {opacity: 0;pointer-events: none;}

/* état PIANO */
body.view-piano #rosace1,
body.view-piano #rosace2,
body.view-piano .map-handle {opacity: 0;pointer-events: none;}
body.view-piano #map-lines {opacity: 0;pointer-events: none;}

body.view-piano .parametric-piano {opacity: 1;pointer-events: auto;}
body.view-piano .visualize-box {opacity: 0;pointer-events: none;}
body.view-piano .visualize-icon {opacity: 0;pointer-events: none;}


/* animation */
#rosace1, #rosace2, .parametric-piano, .map-handle, #map-lines, .selection-table-1 {transition: opacity 0.8s ease;}
.switch-view-button {
  position: fixed;
  top: 441px;
  left: 1441px;
  width: 79px;
  cursor: pointer;
  z-index: 800;
  opacity: 0;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  transition: opacity 0.6s ease;
  height: 77.67px;
}
/* état visible */
body.piano-ready .switch-view-button {opacity: 1;pointer-events: auto;}

/* PARAMETRIC PIANO => MAIN ELEMENTS */
.parametric-piano     {
  position: fixed;
  top: -299px;
  left: 399px;
  width: 1102px;
  height: 1018px;
  transform: scale(0.96);
  -webkit-user-select: none;user-select: none;
  opacity: 0;
  transition: opacity 1s ease;
  z-index: 500;

  border-radius: 770px;
  padding-left: 10px;
  }
#fullScreenBtn  {    top: 641px;left: 869px;position: fixed;transform: rotate(18deg);z-index: 520;width: 34px;height: 43px;filter: hue-rotate(49deg) brightness(1.44) drop-shadow(4px 2px 7px grey);cursor: pointer;}

.sound-board-shadow  {  background-color: #0075ff;border-radius: 14px;position: absolute;top: 393px;left: 171px;width: 579px;transform: rotate(7deg);height: 183px;-webkit-user-select: none;user-select: none;   }
.sound-board-panel    {transform: scale(1.1);position: absolute;top: -60px;-webkit-user-select: none;user-select: none;   }
#soundBoard  {  position: absolute;top: 390px;left: 168px;width: 574px;transform: rotate(7deg);height: 181px;-webkit-user-select: none;user-select: none;    pointer-events: none;  }
#presetPad  {  position: absolute;top: 373px;left: 213px;width: 105px;transform: rotate(7deg);-webkit-user-select: none;user-select: none;   }
#presetGrid {position: absolute;top: 383px;left: 224px;width: 83px;height: 59px;transform: rotate(6.5deg);display: -webkit-inline-box;cursor:crosshair;-webkit-user-select: none;user-select: none;  }

.import-export-soundpreset { 
  position: relative;
  top: 369px;
  left: 199px;
  z-index: 840;
  display: inline-grid;
  justify-items: center;
  transform: rotate(7deg);
  border-radius: 5px;
  background-repeat: no-repeat;
  width: 25px;
  place-content: center;
  -webkit-user-select: none;user-select: none;
  }

  #saveAudioPresetBtn { 
    background: none;
    border: none;
    font-size: 19px;
    -webkit-user-select: none;user-select: none;
    filter: brightness(1.15) drop-shadow(4px 2px 5px white);
}

#saveAudioPresetBtn:focus {
  outline: none;
}

#recallFactoryPresetBtn { 
  background: none;
  border: none;
  font-size: 19px;
  -webkit-user-select: none;user-select: none;
  filter: brightness(1.4) drop-shadow(2px 2px 5px white);
}

#recallFactoryPresetBtn:focus {
  outline: none;
}



/* état normal */
.sound-board-shadow,
#soundBoard {
  opacity: 1;
  transition: opacity 0.3s ease;
}

/* ghost mode */
body.ghost-mode #pianoWhite {
    opacity: 1;
}


body.ghost-mode .ghost-piano-texture {
  opacity: 1;
  visibility: visible;
}




.piano-white {
  transition: opacity 500ms ease;
}

.ghost-toggle-btn {
  transition: all 0.2s ease;
  position: fixed;
  top: 458px;
  left: 446px;
  z-index: 999999999;
  border: none;
  background: none;
  transform: rotate(7deg);
  font-size: 15px;
  -webkit-user-select: none;user-select: none;
  opacity: 0.8;
  filter: brightness(1.15) drop-shadow(4px 2px 5px white);
}

.ghost-toggle-btn:focus {
    outline: none;
}

.ghost-toggle-btn.active {
  opacity: 1;
  filter: drop-shadow(0 0 6px #00aaff);
}

/* PARAMETRIC PIANO => PRESET SLOTS */
.preset-slot {width: 20.4px;height: 14.5px;     background-color: blue;opacity: 0.4;-webkit-user-select: none;user-select: none;   }
.preset-slot:hover {opacity: 0;}
.preset-slot.active {opacity: 0;}
.preset-slot.active , .preset-slot:hover {animation: activeBlink 1.5s infinite ease-in-out;}
@keyframes activeBlink {0%   { opacity: 0; } 50%  { opacity: 0.2; } 100% { opacity: 0; }}
.active-preset-name {position: relative;top: 439px;left: 223px;font-family: Calibri;font-size: 13px;color: #ff0000;text-shadow: 0 0 6px rgba(255, 0, 0, 0.6);background-color: #ffffff;transform: rotate(7deg);border-radius: 5px;
padding-left: 5px;padding-right: 5px;width: 63px;height: 14px;text-align: center; letter-spacing: 1.5px;z-index: 800;}

/* PARAMETRIC PIANO => KNOBS VALUE */
.knobValue { font-family: calibri;font-size: 10px;color: white;width: max-content;}
.knobLabel { font-family: CooperBlack ;font-size: 15px;color: white;width: max-content;}
.knob-glow {filter: drop-shadow(0 0 3px #ffffff) brightness(1.5);}
 
.swingRatioKnob  {position: absolute;top: 460px;left: 343px;transform: rotate(7deg);cursor: pointer;background-color: #1e1e1e;}
.globalVolumeKnob {position: absolute;top: 430px;left: 455px;transform: rotate(7deg);background-color: #1e1e1e;}
.bassVolumeKnob {    position: absolute;top: 422px;left: 520px;transform: rotate(8deg);background-color: #1e1e1e;width: 44px;height: 11px;}
.chordVolumeKnob {    position: absolute;top: 432px;left: 606px;transform: rotate(7deg);background-color: #1e1e1e;width: 44px;height: 11px;}
.echoVolumeKnob {position: absolute;top: 442px;left: 692px;transform: rotate(7deg);background-color: #1e1e1e;width: 44px;height: 11px;}
.fadeInMainNoteKnob {position: absolute;top: 546px;left: 369px;transform: rotate(7deg);background-color: #1e1e1e;}
.tailValueKnob {    position: absolute;top: 555px;left: 435px;transform: rotate(7deg);background-color: #1e1e1e;}
.fadeInEchoValueKnob {    position: absolute;top: 563px;left: 512px;transform: rotate(7deg);background-color: #1e1e1e;}
.fadeOutEchoValueKnob {    position: absolute;top: 571px;left: 581px;transform: rotate(7deg);background-color: #1e1e1e;}
.echoDurationValueKnob {    position: absolute;top: 581px;left: 663px;transform: rotate(7deg);background-color: #1e1e1e;}
.timingValueKnob {      position: absolute;top: 525px;left: 213px;transform: rotate(6.8deg);background-color: #1e1e1e;}
.durationVariationValueKnob {    position: absolute;top: 532px;left: 274px;transform: rotate(7deg);background-color: #1e1e1e;}
.volumeVariationValueKnob  {  position: absolute;top: 538px;left: 322px;transform: rotate(7deg);background-color: #1e1e1e;}

/* PARAMETRIC PIANO => KNOBS LABEL */
.swingLabel  {    position: absolute;top: 405px;left: 357px;transform: rotate(7deg);cursor:pointer;background-color: #1e1e1e;}
.globalVolumeLabel {        position: absolute;top: 393px;left: 400px;transform: rotate(6.8deg);background-color: #1e1e1e;}
.bassVolumeLabel {    position: absolute;top: 406px;left: 521px;transform: rotate(7deg);background-color: #1e1e1e;}
.chordVolumeLabel {    position: absolute;top: 417px;left: 596px;transform: rotate(7deg);background-color: #1e1e1e;}
.echoVolumeLabel {position: absolute;top: 427px;left: 691px;transform: rotate(7deg);background-color: #1e1e1e;}
.fadeInMainNoteLabel {     position: absolute;top: 473px;left: 365px;transform: rotate(7.3deg);background-color: #1e1e1e;}
.tailLabel {    position: absolute;top: 482px;left: 432px;transform: rotate(6.8deg);background-color: #1e1e1e;}
.fadeInEchoLabel {       position: absolute;top: 496px;left: 529px;transform: rotate(7deg);background-color: #1e1e1e;}
.fadeOutEchoLabel {        position: absolute;top: 510px;left: 535px;transform: rotate(7deg);font-size: 11px;background-color: #161616;width: 64px;text-align: center;    height: 13px;}
.echoDurationLabel { position: absolute;top: 510px;left: 664px;transform: rotate(7deg);background-color: #1e1e1e;}
.timingLabel {   position: absolute;top: 519px;left: 169px;transform: rotate(6deg);background-color: #1e1e1e;width: 44px;height: 15px;}
.durationVariationLabel {  position: absolute;top: 529px;left: 240px;transform: rotate(7deg);background-color: #1e1e1e;width: 44px;height: 15px;}
.volumeVariationLabel  {       position: absolute;top: 536px;left: 294px;transform: rotate(7deg);background-color: #1e1e1e;width: 44px;height: 15px;}
.swingLabel  {            position: absolute;top: 386.4px;left: 345px;transform: rotate(6.5deg);width: 46px;height: 17px;font-size: 13px;color: white;padding-left: 0px;font-family: CooperBlack;background-color: #1e1e1e;}
.humanLabel  {               position: absolute;top: 456.7px;left: 174px;transform: rotate(7deg);background-color: #1e1e1e;width: 86px;height: 17px;font-size: 13px;color: white;font-family: calibri;padding-left: 0px;}

/* PARAMETRIC PIANO => KNOBS POSITION */
#knobRow1-1  {position: absolute;top: 434px;left: 344px;width: 18px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow1-2  { position: absolute;top: 431px;left: 401px;width: 26px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow1-3  {  position: absolute;top: 443px;left: 515px;width: 27px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow1-4  {  position: absolute;top: 455px;left: 601px;width: 27px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow1-5  {position: absolute;top: 464px;left: 689px;width: 27px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-1  { position: absolute;top: 488px;left: 179px;width: 26px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-2  {  position: absolute;top: 505px;left: 246px;width: 18px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-3  {position: absolute;top: 512px;left: 301px;width: 18px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-4  { position: absolute;top: 510px;left: 367px;width: 25px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-5  {position: absolute;top: 519px;left: 438px;width: 25px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-6  {position: absolute;top: 528px;left: 510px;width: 25px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-7  {  position: absolute;top: 536px;left: 581px;width: 26px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}
#knobRow2-8  { position: absolute;top: 546px;left: 657px;width: 26px;cursor:pointer;    transform-origin: center center;  transition: transform 0.05s linear;}

/* PARAMETRIC PIANO => PIANO BRANDMARK */

body.ghost-mode .pianoLabel  {              font-size: 39px;
  text-shadow: 2px 3px 4px #000000;color: #ffffff;}


.pianoLabel  {                 font-size: 39px;text-shadow: 2px 3px 4px #ababab;color: #363636;}
.pianoLabelContainer   {                 position:fixed;top:2px;left:8px;cursor:pointer;} 
.letter-d  {                   top: 547px;left: 117px;position: absolute;transform: rotate(7deg);    padding-left: 10px;}
.letter-u  {             top: 550px;left: 147px;position: absolute;transform: rotate(9deg);    padding-left: 10px;}
.letter-k  {             top: 553px;left: 172px;position: absolute;transform: rotate(6deg);    padding-left: 10px;}
.letter-e  {       top: 555.4px;left: 198px;position: absolute;transform: rotate(6deg);    padding-left: 10px;}
.letter-dot  {              top: 558px;left: 217px;position: absolute;    padding-left: 10px;}

/* PARAMETRIC PIANO => TOGGLES STATUS */
.soundboard-swing-status {          position: absolute;top: -2px;left: 13px;transform: rotate(-3deg);background-color: #1e1e1e;}
.soundboard-humanization-status {       position: absolute;top: 0px;left: 15px;transform: rotate(-3deg);background-color: #1e1e1e;}
.soundboard-timing-mode-status {       position: absolute;top: 0px;left: 15px;transform: rotate(-2deg);    background-color: #1a181c;    padding-right: 8px;padding-bottom: 2px;}
.soundboard-echo-type-status {           position: absolute;top: 69px;left: -8px;transform: rotate(2deg);    width: 33px;text-align: center;background-color: #1e1e1e;}
 
/* PARAMETRIC PIANO => TOGGLES LAYOUT */
.toggle-anchor  {  width: 11px;position: absolute;top: 0px;left: 0px;cursor:pointer;}
.toggle-switch-high  { position: relative;top: -5px;left: -5px;width: 15px;cursor:pointer;display:none;}
.toggle-switch-middle  {  position: relative;top: 6px;left: -2px;width: 11px;display: none;cursor:pointer;display:none;    transform: rotate(69deg);}
.toggle-switch-low {     position: relative;top: 7px;left: -5px;width: 15px;display: none;cursor:pointer;display:none;}
#swingToggle  { position: absolute;top: 399px;left: 340px;transform: rotate(8deg);}
#humanToggle  {          position: absolute;top: 465px;left: 257px;transform: rotate(8deg);}
#positionToggle  {    position: absolute;top: 471px;left: 312px;transform: rotate(8deg);}

/* PARAMETRIC PIANO => SWITCHLIGHT LAYOUT */
.switchlight-button {position: absolute;top: 53px;left: -3px;width:28px;    transform: rotate(1deg);cursor:pointer;}
#echoSwitchToggle {position: absolute;top: 516px;left: 708px;transform: rotate(5deg);}  
.toggle-switchlight {width: 16px;}
#echoFirstSwitchLight  { position: absolute;top: -1px;left: 2px;display:none; }
#echoSecondSwitchLight  {  position: absolute;top: 10px;left: 2px;display:none; }
#echoThirdSwitchLight  {position: absolute;top: 22px;left: 2px;  display:none; }
#echoFourthSwitchLight  {  position: absolute;top: 35px;left: 2px;display:none; }

/* PARAMETRIC PIANO => PIANO KEYS */
.piano-keys-container   {      top: -30px;position: fixed;left: -340px;transform: rotate(7.3deg);transform-origin: center center;}
.piano-key {    position: absolute;
  width: 793px;
  height: 64px;
  top: 609px;
  left: 507px;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-repeat: no-repeat;
  mask-size: contain;
  transition: background-color 0.2s ease-out;}
.piano-key.no-bg-transition {transition: none !important;}
img.piano-key-canvas {
  position: absolute;
  width: 793px;
  top: 608.1px;
  left: 507.4px;
  opacity: 0.25;
  transition: opacity 0.3s ease-out;

}
.piano-solo   { background-color:  rgb(253, 255, 130) !important; }
.piano-bass-active    { background-color: #ff689a !important; }
.piano-chord1-active  { background-color: #6ec0ff !important; }
.piano-chord2-active  { background-color: #00fbff !important; }
.piano-chord3-active  { background-color: #00ffd5  !important; }
.piano-chord4-active  { background-color: #00ffbf !important; }
.piano-click-warning {position: fixed;top: 573px;right: 446px;transform: translateX(-50%);padding: 10px 18px;background: rgb(0 0 0 / 59%);color: white;border-radius: 8px;font-family: sans-serif;font-size: 14px;opacity: 0;
transition: opacity 0.3s ease-out;pointer-events: none;z-index: 9999999;transform: rotate(7deg);width: 280px;}

.credit-box {position: fixed;top: 573px;right: 446px;transform: translateX(-50%);padding: 10px 18px;background: rgb(0 0 0 / 59%);color: white;border-radius: 8px;font-family: sans-serif;font-size: 14px;opacity: 0;
transition: opacity 0.3s ease-out;pointer-events: none;z-index: 9999999;transform: rotate(7deg);width: 280px;}

.midi-input-mode-toggle {
  position: fixed;
  top: 100px;
  left: 1453px;
  z-index: 650;
  background: none;
  border: none;
  cursor: pointer;
  width: 67px;
  -webkit-user-select: none;user-select: none;
  height: 49px;

}

.midi-input-mode-toggle:focus {
outline:none;
}



.midi-input-mode-img {
  width: 100%;
  object-fit: contain;
  transition: opacity 160ms ease, transform 220ms ease, filter 220ms ease;
  height: 100%;
  filter: drop-shadow(15px 10px 11px white);
  -webkit-user-select: none;user-select: none;
}

.midi-input-mode-img:focus {
  outline:none;
  }

.midi-input-mode-img.switching {
  opacity: 0;
  transform: scale(0.82) rotate(-8deg);
  filter: blur(2px);
}


.piano-click-warning.visible {opacity: 1;}
.credit-box.visible {opacity: 1;}
.piano-key.note-21 {-webkit-mask-image: url('img/piano-keys/note21.png');mask-image: url('img/piano-keys/note21.png'); }
.piano-key.note-22 { -webkit-mask-image: url('img/piano-keys/note22.png');mask-image: url('img/piano-keys/note22.png');}
.piano-key.note-23 { -webkit-mask-image: url('img/piano-keys/note23.png');mask-image: url('img/piano-keys/note23.png');}
.piano-key.note-24 { -webkit-mask-image: url('img/piano-keys/note24.png');mask-image: url('img/piano-keys/note24.png');}
.piano-key.note-25 { -webkit-mask-image: url('img/piano-keys/note25.png');mask-image: url('img/piano-keys/note25.png');}
.piano-key.note-26 { -webkit-mask-image: url('img/piano-keys/note26.png');mask-image: url('img/piano-keys/note26.png');}
.piano-key.note-27 { -webkit-mask-image: url('img/piano-keys/note27.png');mask-image: url('img/piano-keys/note27.png');}
.piano-key.note-28 { -webkit-mask-image: url('img/piano-keys/note28.png');mask-image: url('img/piano-keys/note28.png');}
.piano-key.note-29 { -webkit-mask-image: url('img/piano-keys/note29.png');mask-image: url('img/piano-keys/note29.png');}
.piano-key.note-30 {-webkit-mask-image: url('img/piano-keys/note30.png');mask-image: url('img/piano-keys/note30.png'); }
.piano-key.note-31 { -webkit-mask-image: url('img/piano-keys/note31.png');mask-image: url('img/piano-keys/note31.png');}
.piano-key.note-32 {-webkit-mask-image: url('img/piano-keys/note32.png');mask-image: url('img/piano-keys/note32.png'); }
.piano-key.note-33 {-webkit-mask-image: url('img/piano-keys/note33.png');mask-image: url('img/piano-keys/note33.png'); }
.piano-key.note-34 {-webkit-mask-image: url('img/piano-keys/note34.png');mask-image: url('img/piano-keys/note34.png'); }
.piano-key.note-35 {-webkit-mask-image: url('img/piano-keys/note35.png');mask-image: url('img/piano-keys/note35.png'); }
.piano-key.note-36 { -webkit-mask-image: url('img/piano-keys/note36.png');mask-image: url('img/piano-keys/note36.png');}
.piano-key.note-37 {-webkit-mask-image: url('img/piano-keys/note37.png'); mask-image: url('img/piano-keys/note37.png');}
.piano-key.note-38 {-webkit-mask-image: url('img/piano-keys/note38.png'); mask-image: url('img/piano-keys/note38.png');}
.piano-key.note-39 {-webkit-mask-image: url('img/piano-keys/note39.png'); mask-image: url('img/piano-keys/note39.png');}
.piano-key.note-40 {-webkit-mask-image: url('img/piano-keys/note40.png'); mask-image: url('img/piano-keys/note40.png');}
.piano-key.note-41 {-webkit-mask-image: url('img/piano-keys/note41.png'); mask-image: url('img/piano-keys/note41.png');}
.piano-key.note-42 {-webkit-mask-image: url('img/piano-keys/note42.png'); mask-image: url('img/piano-keys/note42.png');}
.piano-key.note-43 {-webkit-mask-image: url('img/piano-keys/note43.png'); mask-image: url('img/piano-keys/note43.png');}
.piano-key.note-44 {-webkit-mask-image: url('img/piano-keys/note44.png'); mask-image: url('img/piano-keys/note44.png');}
.piano-key.note-45 {-webkit-mask-image: url('img/piano-keys/note45.png'); mask-image: url('img/piano-keys/note45.png');}
.piano-key.note-46 {-webkit-mask-image: url('img/piano-keys/note46.png'); mask-image: url('img/piano-keys/note46.png');}
.piano-key.note-47 {-webkit-mask-image: url('img/piano-keys/note47.png'); mask-image: url('img/piano-keys/note47.png');}
.piano-key.note-48 {-webkit-mask-image: url('img/piano-keys/note48.png'); mask-image: url('img/piano-keys/note48.png');}
.piano-key.note-49 {-webkit-mask-image: url('img/piano-keys/note49.png'); mask-image: url('img/piano-keys/note49.png');}
.piano-key.note-50 {-webkit-mask-image: url('img/piano-keys/note50.png'); mask-image: url('img/piano-keys/note50.png');}
.piano-key.note-51 {-webkit-mask-image: url('img/piano-keys/note51.png'); mask-image: url('img/piano-keys/note51.png');}
.piano-key.note-52 {-webkit-mask-image: url('img/piano-keys/note52.png'); mask-image: url('img/piano-keys/note52.png');}
.piano-key.note-53 {-webkit-mask-image: url('img/piano-keys/note53.png'); mask-image: url('img/piano-keys/note53.png');}
.piano-key.note-54 {-webkit-mask-image: url('img/piano-keys/note54.png'); mask-image: url('img/piano-keys/note54.png');}
.piano-key.note-55 {-webkit-mask-image: url('img/piano-keys/note55.png'); mask-image: url('img/piano-keys/note55.png');}
.piano-key.note-56 {-webkit-mask-image: url('img/piano-keys/note56.png'); mask-image: url('img/piano-keys/note56.png');}
.piano-key.note-57 {-webkit-mask-image: url('img/piano-keys/note57.png'); mask-image: url('img/piano-keys/note57.png');}
.piano-key.note-58 {-webkit-mask-image: url('img/piano-keys/note58.png'); mask-image: url('img/piano-keys/note58.png');}
.piano-key.note-59 {-webkit-mask-image: url('img/piano-keys/note59.png'); mask-image: url('img/piano-keys/note59.png');}
.piano-key.note-60 {-webkit-mask-image: url('img/piano-keys/note60.png'); mask-image: url('img/piano-keys/note60.png');}
.piano-key.note-61 {-webkit-mask-image: url('img/piano-keys/note61.png'); mask-image: url('img/piano-keys/note61.png');}
.piano-key.note-62 {-webkit-mask-image: url('img/piano-keys/note62.png'); mask-image: url('img/piano-keys/note62.png');}
.piano-key.note-63 {-webkit-mask-image: url('img/piano-keys/note63.png'); mask-image: url('img/piano-keys/note63.png');}
.piano-key.note-64 {-webkit-mask-image: url('img/piano-keys/note64.png'); mask-image: url('img/piano-keys/note64.png');}
.piano-key.note-65 {-webkit-mask-image: url('img/piano-keys/note65.png'); mask-image: url('img/piano-keys/note65.png');}
.piano-key.note-66 {-webkit-mask-image: url('img/piano-keys/note66.png'); mask-image: url('img/piano-keys/note66.png');}
.piano-key.note-67 {-webkit-mask-image: url('img/piano-keys/note67.png'); mask-image: url('img/piano-keys/note67.png');}
.piano-key.note-68 {-webkit-mask-image: url('img/piano-keys/note68.png'); mask-image: url('img/piano-keys/note68.png');}
.piano-key.note-69 {-webkit-mask-image: url('img/piano-keys/note69.png'); mask-image: url('img/piano-keys/note69.png');}
.piano-key.note-70 {-webkit-mask-image: url('img/piano-keys/note70.png'); mask-image: url('img/piano-keys/note70.png');}
.piano-key.note-71 {-webkit-mask-image: url('img/piano-keys/note71.png'); mask-image: url('img/piano-keys/note71.png');}
.piano-key.note-72 {-webkit-mask-image: url('img/piano-keys/note72.png'); mask-image: url('img/piano-keys/note72.png');}
.piano-key.note-73 {-webkit-mask-image: url('img/piano-keys/note73.png'); mask-image: url('img/piano-keys/note73.png');}
.piano-key.note-74 {-webkit-mask-image: url('img/piano-keys/note74.png'); mask-image: url('img/piano-keys/note74.png');}
.piano-key.note-75 {-webkit-mask-image: url('img/piano-keys/note75.png'); mask-image: url('img/piano-keys/note75.png');}
.piano-key.note-76 {-webkit-mask-image: url('img/piano-keys/note76.png'); mask-image: url('img/piano-keys/note76.png');}
.piano-key.note-77 {-webkit-mask-image: url('img/piano-keys/note77.png'); mask-image: url('img/piano-keys/note77.png');}
.piano-key.note-78 {-webkit-mask-image: url('img/piano-keys/note78.png'); mask-image: url('img/piano-keys/note78.png');}
.piano-key.note-79 {-webkit-mask-image: url('img/piano-keys/note79.png'); mask-image: url('img/piano-keys/note79.png');}
.piano-key.note-80 {-webkit-mask-image: url('img/piano-keys/note80.png'); mask-image: url('img/piano-keys/note80.png');}
.piano-key.note-81 {-webkit-mask-image: url('img/piano-keys/note81.png'); mask-image: url('img/piano-keys/note81.png');}
.piano-key.note-82 {-webkit-mask-image: url('img/piano-keys/note82.png'); mask-image: url('img/piano-keys/note82.png');}
.piano-key.note-83 {-webkit-mask-image: url('img/piano-keys/note83.png'); mask-image: url('img/piano-keys/note83.png');}
.piano-key.note-84 {-webkit-mask-image: url('img/piano-keys/note84.png'); mask-image: url('img/piano-keys/note84.png');}
.piano-key.note-85 {-webkit-mask-image: url('img/piano-keys/note85.png'); mask-image: url('img/piano-keys/note85.png');}
.piano-key.note-86 {-webkit-mask-image: url('img/piano-keys/note86.png'); mask-image: url('img/piano-keys/note86.png');}
.piano-key.note-87 {-webkit-mask-image: url('img/piano-keys/note87.png'); mask-image: url('img/piano-keys/note87.png');}
.piano-key.note-88 {-webkit-mask-image: url('img/piano-keys/note88.png'); mask-image: url('img/piano-keys/note88.png');}
.piano-key.note-89 {-webkit-mask-image: url('img/piano-keys/note89.png'); mask-image: url('img/piano-keys/note89.png');}
.piano-key.note-90 {-webkit-mask-image: url('img/piano-keys/note90.png'); mask-image: url('img/piano-keys/note90.png');}
.piano-key.note-91 {-webkit-mask-image: url('img/piano-keys/note91.png'); mask-image: url('img/piano-keys/note91.png');}
.piano-key.note-92 {-webkit-mask-image: url('img/piano-keys/note92.png'); mask-image: url('img/piano-keys/note92.png');}
.piano-key.note-93 {-webkit-mask-image: url('img/piano-keys/note93.png'); mask-image: url('img/piano-keys/note93.png');}
.piano-key.note-94 {-webkit-mask-image: url('img/piano-keys/note94.png'); mask-image: url('img/piano-keys/note94.png');}
.piano-key.note-95 {-webkit-mask-image: url('img/piano-keys/note95.png'); mask-image: url('img/piano-keys/note95.png');}
.piano-key.note-96 {-webkit-mask-image: url('img/piano-keys/note96.png'); mask-image: url('img/piano-keys/note96.png');}
.piano-key.note-97 {-webkit-mask-image: url('img/piano-keys/note97.png'); mask-image: url('img/piano-keys/note97.png');}
.piano-key.note-98 {-webkit-mask-image: url('img/piano-keys/note98.png'); mask-image: url('img/piano-keys/note98.png');}
.piano-key.note-99 {-webkit-mask-image: url('img/piano-keys/note99.png'); mask-image: url('img/piano-keys/note99.png');}
.piano-key.note-100 {-webkit-mask-image: url('img/piano-keys/note100.png'); mask-image: url('img/piano-keys/note100.png');}
.piano-key.note-101 {-webkit-mask-image: url('img/piano-keys/note101.png'); mask-image: url('img/piano-keys/note101.png');}
.piano-key.note-102 {-webkit-mask-image: url('img/piano-keys/note102.png'); mask-image: url('img/piano-keys/note102.png');}
.piano-key.note-103 {-webkit-mask-image: url('img/piano-keys/note103.png'); mask-image: url('img/piano-keys/note103.png');}
.piano-key.note-104 {-webkit-mask-image: url('img/piano-keys/note104.png'); mask-image: url('img/piano-keys/note104.png');}
.piano-key.note-105 {-webkit-mask-image: url('img/piano-keys/note105.png'); mask-image: url('img/piano-keys/note105.png');}
.piano-key.note-106 {-webkit-mask-image: url('img/piano-keys/note106.png'); mask-image: url('img/piano-keys/note106.png');}
.piano-key.note-107 {-webkit-mask-image: url('img/piano-keys/note107.png'); mask-image: url('img/piano-keys/note107.png');}
.piano-key.note-108 {-webkit-mask-image: url('img/piano-keys/note108.png'); mask-image: url('img/piano-keys/note108.png');}


/* =========================================================
   PIANO MAGIQUE — CONTENEUR GLOBAL
   ========================================================= */

.magic-piano-shell {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}


/* =========================================================
   GIF COSMIQUE MASQUÉ PAR LA SILHOUETTE DU PIANO
   ========================================================= */

.magic-piano-background {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url(/img/background-gif/1.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-mask-image: url(/img/soundboard/piano-white.png);
  mask-image: url(/img/soundboard/piano-white.png);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 99%;
  visibility: visible;
  filter: brightness(5);
  transition: opacity 500ms ease, visibility 500ms ease, filter 500ms ease;
  top: 35px;
  left: 7px;
  opacity: 0;
}

body.ghost-mode .magic-piano-background {
  opacity: 1;
}

/* =========================================================
   SQUELETTE BLANC AU-DESSUS
   ========================================================= */

.piano-white {
  position: absolute;
  inset: 0;
  width: 100%;
  object-fit: fill;
  z-index: 3;
  pointer-events: none;

  opacity: 1;
  

  top: 49px;
  left: 0px;
  width: 1100px;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
  padding-left: 10px;

filter: brightness(1.03) drop-shadow(21px 1px 20px #0075ffbd);

}



  .ghost-piano-texture {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background-image: url(/img/songpart-background.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    -webkit-mask-image: url(/img/soundboard/piano-white-frame.png);
    mask-image: url(/img/soundboard/piano-white-frame.png);
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 99%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 500ms ease, visibility 500ms ease;
    top: 17px;
    left: 6px;
    background-repeat: space;
    background-image: linear-gradient(62deg, rgb(0 255 94) 0%, rgb(255 255 193) 20%, rgb(255 203 154) 40%, rgb(128 252 255) 60%, rgb(255 170 225) 80%, rgb(0 39 255) 100%);
    background-repeat: no-repeat;
  }

/* =========================================================
   AUTRES ÉLÉMENTS DU PIANO AU PREMIER PLAN
   ========================================================= */

.midi-box,
.piano-keys-container,
.pianoLabelContainer,
.sound-board-panel,
.note-db-map-toggle {
  position: absolute;
  z-index: 3;
}


/* =========================================================
   ACTIVATION / DÉSACTIVATION DU GIF
   ========================================================= */

body.hide-piano-bg .magic-piano-background {
  opacity: 0;
  visibility: hidden;
}


/* =========================================================
   FLASH DU SQUELETTE
   ========================================================= */

.piano-white.flash {
  animation: pianoFlash 8000ms ease-out;
}

@keyframes pianoFlash {0% { filter: brightness(1.03) drop-shadow(21px 1px 20px #0075ffbd); } 50% { filter: brightness(1.05) drop-shadow(21px 1px 22px #0075ffbd); }100% { filter: brightness(1.03) drop-shadow(21px 1px 20px #0075ffbd); }}


/* =========================================================
   FLASH DU FOND COSMIQUE
   ========================================================= */

.magic-piano-background.flash {
  animation: magicPianoFlash 8000ms ease-out;
}

@keyframes magicPianoFlash {
  0% {
    opacity: 0.82;

    filter:
      brightness(0.9)
      saturate(1.1)
      contrast(1.05);
  }

  50% {
    opacity: 1;

    filter:
      brightness(1.18)
      saturate(1.45)
      contrast(1.08);
  }

  100% {
    opacity: 0.9;

    filter:
      brightness(0.9)
      saturate(1.15)
      contrast(1.05);
  }
}


/* =========================================================
   FLASH DU CANVAS DES TOUCHES
   ========================================================= */

.piano-key-canvas.flash {
  animation: canvasFlash 1000ms ease;
}

@keyframes canvasFlash {
  0% {
    opacity: 0.25;
  }

  50% {
    opacity: 0.35;
  }

  100% {
    opacity: 0.25;
  }
}




#midiDelayInput    { left: 0px;
position: fixed;
top: 0px;
z-index: 99999999;}

#audioDebugHud    { 
  display:none;
position:fixed;
right:20px;
bottom:20px;
z-index:999999;
width:320px;
padding:10px 12px;
font-family:Consolas, monospace;
font-size:12px;
line-height:1.35;
color:#bfffd4;
background:rgba(0,0,0,.82);
border:1px solid rgba(120,255,170,.5);
border-radius:8px;
pointer-events:none;
white-space:pre;}

.silent-range-box {
  width: 52px;
  font-family: calibri;
  font-size: 11px;
  color: white;
  -webkit-user-select: none;
  user-select: none;
  text-align: center;
  position: fixed;
  top: 419px;
  left: 326px;
}

.silent-range-header {
  position: fixed;
  width: 18px;
  margin: auto;
  cursor: pointer;
  top: 447px;
  left: 354px;
}

#silentAmountValue {
  color: #fb8d28;
  font-weight: normal;
  font-size: 12.2px;
  font-family: calibri;
  letter-spacing: 1.3px;
}

#randomizeSilentAmountBtn {
  cursor: pointer;
  border: none;
  background: none;
}

#randomizeSilentAmountBtn:focus {
outline:none;
}

.silent-range-slider {
  position: fixed;
  width: 18px;
  height: 61px;
  margin: auto;
  cursor: pointer;
  top: 437px;
  left: 339px;
}

.silent-range-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 4px;
  border-radius: 999px;
  background: rgb(255 206 207);
}

.silent-range-fill {
  position: absolute;
  left: 7px;
  width: 4px;
  border-radius: 999px;
  background: #fb8d28;
}

.silent-handle,
.silent-value-dot {
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  cursor: ns-resize;
}

.silent-handle {
  width: 12px;
  height: 12px;
  background: white;
  box-shadow: 0 0 4px rgba(0,0,0,0.5);
}

.silent-value-dot {
  width: 8px;
  height: 8px;
  background: #4aacff;
  box-shadow: 0 0 6px #4aacff;
  z-index: 3;
}

.silent-range-labels {
  opacity: 0.8;
  font-size: 11px;
  position: relative;
  top: -94px;
  left: 1px;
  color: #ff8687;
  height: 30px;
}




#randomSilentNotesToggle {
  border: none;
  background: none;
  accent-color: #ff912c;
  cursor: pointer;
  box-shadow: 0 0 0 3px #ff912c inset;
  transition: box-shadow 0.15s ease;
}

#randomSilentNotesToggle:focus {
outline:none;
}

.random-silent-notes-toggle {
  position: fixed;
  top: 490px;
  left: 360px;
}

.random-silent-notes-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.random-silent-notes-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

#randomSilentNotesToggleImg {
  display: block;
  pointer-events: none;
  user-select: none;
  width: 17px;
}


.cycle-duplicate-slot {
  
  position: absolute;
  top: -1px;
  width: 0;
  pointer-events: none;
  z-index: 5000;
}

.cycle-duplicate-slot:focus {
outline:none;
}

.cycle-duplicate-select {
  position: absolute;
  left: 3px;
  pointer-events: auto;
  background: none;
  border: none;
  background-color: #ffca98;
  font-family: calibri;
  letter-spacing: 1.5px;
  height: 12px;
  font-size: 11px;
  width: 17px;
  border-radius: 15px;
  color: #ffca98;
  -webkit-user-select: none;
  user-select: none;

}

.cycle-duplicate-select option {

  background-color:white;

  color:  #ff7b00;

}

.cycle-duplicate-select:focus {
  outline:none;
  }

  .cycle-duplicate-select.is-loading {
    opacity: 0.55;

    cursor: wait;
  }

  .cycle-bass-grid-select.is-loading {
    opacity: 0.55;

    cursor: wait;
  }

  .cycle-bass-grid-select {
    position: absolute;
    left: 26px;
    pointer-events: auto;
    background: none;
    border: none;
    background-color: #e6bfff;
    font-family: calibri;
    letter-spacing: 1.5px;
    height: 12px;
    font-size: 11px;
    width: 17px;
    border-radius: 15px;
    color: #e6bfff;
    -webkit-user-select: none;
    user-select: none;

}

.cycle-bass-grid-select option {

  background-color:white;

  color:  #d896ff;

}

.cycle-bass-grid-select:focus {
  outline:none;
  }


  #engine-warning-box {
    position: fixed;
    top: 113px;
    left: 154px;
    z-index: 999999;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(255, 120, 0, 0.95);
    color: white;
    font-family: Calibri, sans-serif;
    font-size: 14px;
    font-weight: bold;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }
  
  #engine-warning-box.visible {
    opacity: 1;
  }

  .sampler-disabled-ui {
    opacity: 0.4;
    pointer-events: none;
    filter: blur(1.2px);
  }

  .sampler-disabled-ui #autoRandomizerDropdownBtn {
    position: fixed;
    top: 1px;
    left: 0px;
    z-index: 810;
  }


  body.step-sampler-mode .col-resizer {
    display: none !important;
    pointer-events: none !important;
  }



  .piano-roll {
    position: fixed;
    top: 10px;
    left: 0px;
    height: 488px;
    z-index: 790;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #00cfff7a;
    box-shadow: 6px -1px 20px 5px #6cb0ff;
    overflow: hidden;

  }
  
  .piano-roll.hidden {
    display: none;
  }
  
  .piano-roll-viewport {
    display: flex;
    height: 488px;
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    border-radius: 10px;
  }

  .piano-roll-viewport {
    cursor: grab;
    -webkit-user-select:none; user-select: none;
  }
  
  .piano-roll-viewport.is-dragging {
    cursor: grabbing;
  }
  
  .piano-roll-keys {
    width: 30px;
    flex: 0 0 30px;
    position: relative;
    z-index: 999999;
  }

  .piano-roll-key {
z-index: 999999;
    font-weight: normal;
  }
  
  .piano-roll-key.is-c {
    color: #89bfff;
    font-weight: bold;
    display: unset;
  }
  
  .piano-roll-body {
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    margin-left: -30px;
  }

  .piano-roll-keys,
.piano-roll-body {
  direction: ltr;
}
  
  .piano-roll-note-row {
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    z-index: 0;
  }
  
  .piano-roll-note-row.white {
    background: #ffffff;
  }
  
  .piano-roll-note-row.black {
    background: #f1f1f1;
  }
  
  .piano-roll-key {
    
    
    position: absolute;
    left: 0px;
    width: 55%;
    height: 11px;
    font-size: 9.5px;
    line-height: 11px;
    font-family: calibri;
    color: #111;
    display: none;
    letter-spacing: 3px;
    margin-top: -2.5px;
    border: 1px solid #89bfff;
    padding-left: 5px;
  }
  

  
  .piano-roll-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgb(242 242 242);
    pointer-events: none;
    z-index: 1;
  }
  
  .piano-roll-beat-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(242 242 242);
    pointer-events: none;
    z-index: 2;
  }
  
  .piano-roll-step-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: rgb(233 233 233);
    pointer-events: none;
    z-index: 3;
  }
  
  .piano-roll-note {
    position: absolute;
    z-index: 10;
    height: 11px;
    line-height: 8px;
    border-radius: 8px;
    font-size: 11px;
    font-family: calibri;
    color: #000000;
    text-align: left;
    white-space: nowrap;
    padding-left: 2px;

  }
  
  .piano-roll-note.from-beat1to4 {
    background-color: rgb(181 237 255);
    border: 1px solid rgb(54 210 255);
    box-sizing: border-box;
  }
  
  .piano-roll-note.from-beat5 {
    background-color: rgb(178 249 255);
    border: 1px solid rgb(61 241 255);
    box-sizing: border-box;
  }
  
  .piano-roll-note.from-beat6 {
    background-color: rgb(181 255 248);
    border: 1px solid rgb(0 255 231);
    box-sizing: border-box;
  }
  
  .piano-roll-note.from-beat8,
  .piano-roll-note.from-beat9,
  .piano-roll-note.from-bass-grid {
    background-color: #ecccff;
    border: 1px solid #da9aff;
    box-sizing: border-box;
  }
  
  .piano-roll-note.from-unknown {
    background-color: #aaa;
  }
  
  #pianoRollToggle {
    position: fixed;
    top: 472px;
    left: 27px;
    background: none;
    border: none;
    z-index: 790;
    -webkit-user-select: none;
    user-select: none;
    filter: brightness(1.05);

  }

  #pianoRollToggle:focus {
outline:none;
  }

  .piano-roll-note-row.border-before-c,
  .piano-roll-note-row.border-before-f {
    box-shadow: inset 0 -1px 0 #dcdcdc;
  }

  .piano-roll-compact-option {
    position: fixed;
    top: 53px;
    left: 15px;
    z-index: 999999999;
    font-size: 11px;
    font-family: calibri;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background-color: #ffffff;
    font-weight: bold;
  }
  

  .piano-roll-option {
    position: fixed;
    top: 56px;
    left: 42px;
    z-index: 999999999;
    font-size: 11px;
    font-family: calibri;
    color: #666;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    background-color: #ffffff;
    font-weight: bold;
  }


  
  .piano-roll-option input {
    margin: 0;
  }



  #pianoRollNoteNamesToggle:focus {
outline:none;
  }

  body.piano-roll-compact .piano-roll-note {
    height: 5.5px;
    line-height: 5.5px;
    font-size: 8px;
    border-radius: 5px;
  }
  
  body.piano-roll-compact .piano-roll-key {
    height: 11px;
    line-height: 11px;
  }







  #communityBox {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 430px;
    z-index: 801;
    overflow: hidden;
    font-family: calibri;
    cursor: default;
    background-color: #ffffff;
    box-shadow: -2px -3px 15px 11px #ffffff;
    border-top-left-radius: 70px;
    border-top-right-radius: 70px;
    border-bottom-left-radius: 70px;

  }
  #communityBox.closed .community-body {
    display: none;
  }
  #communityBox.closed {
    width: 56px;
    min-height: 36px;
  }
  #communityResetProfile  {
    background: none;
    border: none;
    position: relative;
    color: #0075ff;
    top: -2px;
  }
  #communityCreateProfileBtn {
    background: none;
    border: none;
  }
  .community-profile {
    display: flex;
    gap: 3px;
    margin-bottom: 0px;
    justify-content: right;
    -webkit-user-select: none;
    user-select: none;

  }
  .community-username {
    letter-spacing: 3.5px;
    color: #0075ff;
    font-weight: bold;
    font-size: 16.5px;
  }
  .community-header {
    height: 31px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    font-weight: bold;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  .community-body {
    padding: 6px 12px 8px 12px;
  }
  .community-placeholder {
    opacity: 0.6;
    font-size: 13px;
  }
  #communityTagCloud {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 9px;
    justify-content: left;
    padding-left: 37px;
    -webkit-user-select: none;
    user-select: none;
  }
  .community-tag {
    border: none;
    border-radius: 999px;
    padding: 2px 7px;
    font-size: 9.5px;
    cursor: pointer;
    background: #fbfdff;
    color: #0075ff;
    letter-spacing: 1.5px;
    border: 1px solid #0075ff;
    border-radius: 11px;
  }
  .community-tag.active {
    background: #0075ff;
    color: white;
  }
  #communityFeed {
    position:relative;
    height: 343px;
    overflow-y: auto;
    padding-right: 4px;
  }
  
  #communityFeedWrapper {
    position: relative;
}

#communityFeed {
  height: 403px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-color: #4098ff #ffffff;
}

#communityFeedWrapper::before,
#communityFeedWrapper::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 34px;
  pointer-events: none;
  z-index: 20;
  width: 96%;
}

#communityFeedWrapper::before {
    top: -2px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 13%, rgba(255, 255, 255, 0) 100%);
}

#communityFeedWrapper::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 13%, rgba(255, 255, 255, 0) 100%);
}

  .community-post {
    
    border-radius: 46px;
    padding: 7px;
    margin-bottom: 8px;
    margin: 30px 15px 30px 10px;
  }

  
  .community-official-post .community-post-head strong::after {
    content: "TEAM";
    width: fit-content;
    font-size: 10px;
    color: white;
    background: #ff912c;
    border-radius: 999px;
    padding: 1px 6px;
    margin-left: 5px;
  }

  .community-post.post-style1

  {
    background-color: rgb(225 248 255);
    box-shadow: 6px 8px 11px 3px rgb(218 246 255);
    outline: 1px solid rgb(137 226 255);

  }

  .community-post.post-style2

  {
    background-color: rgb(231 253 255);
    box-shadow: 6px 8px 11px 3px rgb(211 251 255);
    outline: 1px solid rgb(135 246 255);
  }

  .community-post.post-style3

  {
    background-color: rgb(238 255 253);
    box-shadow: 6px 8px 11px 3px rgb(219 255 252);
    outline: 1px solid rgb(116 255 242);
  }

  .community-post.post-style4

  {
    background-color: #faf2ff;
    box-shadow: 6px 8px 11px 3px #f5e6ff;
    outline: 1px solid #dea6ff;
  }

  
  .community-post.community-official-post {
    background-color: #ffffff;
    box-shadow: 6px 8px 11px 3px  #d7e9ff;
    outline: 1px solid #b4d6ff;

  }

  .community-post-head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #0075ff;
    padding-left: 33px;
    letter-spacing: 3px;
    -webkit-user-select: none;
    user-select: none;
}
  
  .community-time {
    margin-left: auto;
    opacity: 0.45;
    font-size: 12px;
    font-style: italic;
    padding-right: 15px;
  }
  .community-post-text {
    font-size: 16px;
    margin: 10px 0px 15px 0px;
    color: #0075ff;
    padding-left: 10px;
    font-family: garamond;
    letter-spacing: 1px;
    overflow-wrap: break-word;
  }
  .community-post-tags {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin: 6px 0px 0px 0px;
    color: #0075ff;
    -webkit-user-select: none;
    user-select: none;
  }
  .community-post-tag {
    font-size: 13px;
    opacity: 0.65;
    margin-left: 14px;
  }
  .community-demo-btn {
    background: #ffffff00;
    border-radius: 15px;
    font-family: Calibri;
    font-size: 12.5px;
    font-weight: bold;
    cursor: pointer;
    padding: 0px 6px 0px 6px;
    -webkit-user-select: none;
    user-select: none;
    letter-spacing: 1.5px;
    color: #ffffff;
    border: 2px solid #ffffff;
    background-color: rgb(255 145 44);
    box-shadow: 0px 6px 10px 5px rgb(255 255 255 / 53%);
    margin-top: 10px;
    margin-left: 9px;
    margin-bottom: 9px;
    -webkit-user-select:none;
    user-select:none;
  }
  .community-demo-btn:focus {
    outline: none;
  }
  #communityComposer {
    display: flex;
    gap: 5px;
    margin: 8px;
    margin-bottom: -6px;
  }
  #communityPostInput {
    flex: 1;
    height: 48px;
    resize: none;
    border-radius: 24px;
    border: 1px solid #0075ff66;
    padding: 5px 17px;
    font-family: Calibri;
    font-size: 14px;
    color: #0075ff;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;


  }

  #communityPostInput::placeholder {
    color: #459aff;
    opacity: 1; /* Firefox notamment */
  }

  textarea:focus-visible {outline-offset:none;  }
  :focus-visible {outline:none;  }

  #communityPostBtn {
    border: none;
    border-radius: 12px;
    background: #0075ff;
    color: white;
    padding: 0 10px;
    cursor: pointer;
    height: 23px;
    position: relative;
    bottom: -13px;
    left: 3px;
    -webkit-user-select: none;
    user-select: none;
  }
  .community-replies {
    margin-top: 7px;
    padding-left: 14px;
    margin-right: 20px;
  }
  .community-reply {
    background: #ffffff63;
    border-radius: 18px;
    padding: 5px 7px;
    margin-top: 16px;
    margin-bottom: 4px;
}
  
  .community-reply-head {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #0075ff;
  }
  .community-reply-text {
    color: #0075ff;
    margin-top: 3px;
    margin-left: 13px;
    font-family: garamond;
    letter-spacing: 1px;
    overflow-wrap: break-word;
  }
  .community-reply-toggle {
    margin-top: 6px;
    border: none;
    background: none;
    color: #0075ff;
    cursor: pointer;
    font-size: 11px;
    font-weight: bold;
    margin-left: 31px;
    margin-bottom: 4px;
    -webkit-user-select: none;
    user-select: none;
    
  }
  .community-reply-box {
    display: flex;
    gap: 5px;
    margin-top: 6px;
    margin-left: 34px;
    margin-bottom: 5px;
    margin-right: 33px;
    -webkit-user-select: none;
    user-select: none;
  }
  .community-reply-box.hidden {
    display: none;
  }
  .community-reply-input {
    flex: 1;
    height: 28px;
    resize: none;
    border-radius: 38px;
    border: 1px solid #0075ff66;
    font-family: Calibri;
    font-size: 13px;
    color: #0075ff;
    padding: 5px 12px;
    min-height: 28px;
    max-height: 180px;
    resize: none;
    overflow-y: hidden;
    box-sizing: border-box;
  }

  .community-reply-input::placeholder {
    color: #459aff;
    opacity: 1; /* Firefox notamment */
  }


  .community-reply-send {
    border: none;
    border-radius: 10px;
    background: #0075ff;
    color: white;
    cursor: pointer;
    padding: 0 8px;
    height: 23px;
    position: relative;
    bottom: -12px;
    left: 3px;
    -webkit-user-select: none;
    user-select: none;
  }
  #communityGifPicker {
    display: flex;
    gap: 4px;
    margin: 9px 0;
  }
  .community-post-gif {
    width: 50%;
    max-height: 120px;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.45);
    margin-left: 13px;
  }
  .community-gif-option {
    border: none;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
  }
  .community-gif-option.active {
    outline: 2px solid #0075ff;
    box-shadow: 0 0 8px #0075ff66;
  }
  .community-gif-thumb {
    width: 20px;
    height: 20px;
    object-fit: cover;
  }
  .community-input-wrap {
    position: relative;
    flex: 1;
    -webkit-user-select: none;
    user-select: none;
  }
  #communityGifToggle {
    position: absolute;
    left: 288px;
    bottom: 20px;
    border: none;
    border-radius: 999px;
    color: #0075ff;
    font-size: 9.5px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
}
  
  #communityGifToggle:focus {
    outline:none;
  }
  #communityGifToggle.active {
    background: #0075ff;
    color:white;
  }
  #communityGifPicker.hidden {
    display: none;
  }
  #communityDemoToggle {
    position: relative;
    left: 237px;
    bottom: 20px;
    border: none;
    border-radius: 999px;
    color: #0075ff;
    font-size: 9.5px;
    font-weight: bold;
    cursor: pointer;
    padding: 2px 6px;
  }
  #communityDemoToggle:focus {
    outline:none;
  }
  #communityDemoToggle.active {
    background: #ff912c;
    color: white;
  }









  #beautifyShortPattern {
    cursor: pointer;
    background: #4caf50;
    color: white;
    border-color: #4caf50;
    background: none;
    border: none;
    position: fixed;
    top: 430px;
    left: 134px;

  }
  
  #beautifyShortPattern.active {
    cursor: pointer;
    background: #4caf50;
    color: white;
    border-color: #4caf50;
    background: none;
    border: none;
    position: relative;
    top: -88px;
    left: -85px;

  }

  #beautifyShortPattern img {
    width: 18px;
    height: 18px;
    display: block;
  }

  #beautifyShortPattern:focus {
outline:none
  }

  .beatline-chord-inversion-button {
    cursor: pointer;
    background: #4caf50;
    color: white;
    border-color: #4caf50;
    background: none;
    border: none;
    position: fixed;
    top: 457px;
    left: 266px;
    transform: rotate(8deg);
  }
  
  .beatline-chord-inversion-button input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  
  .beatline-chord-inversion-button img {
    width: 18px;
    height: 18px;
    display: block;
    transition:
      filter 0.15s ease,
      transform 0.15s ease,
      opacity 0.15s ease;

  }
  
  .beatline-chord-inversion-button:hover img {
    opacity: 1;
  }
  
  .beatline-chord-inversion-button input:checked + img {
    content: url("/img/magic-wand-active.png");
  }
  



  .full-pattern-step-select {
    position: absolute;
    top: -87px;
    left: 341px;
    z-index: 20;
    height: 15px;
    width: max-content;
    font-size: 12px;
    font-family: Calibri;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background: white;
    color: #333;
    pointer-events: auto;
    appearance: none;
    text-align: center;
    letter-spacing: 0.5px;
    padding: 0px 2px 0px 3px;
    -webkit-user-select:none;
    user-select:none;
    cursor:pointer;
  }

  .full-pattern-step-select.is-loading {
    opacity: 0.55;
    cursor: wait;
    pointer-events: none;
    filter: saturate(0.4);
  }

  .full-pattern-step-select:focus {
    outline:none
      }

  #full-pattern-select-layer {
    position: absolute;
    left: 0;
    top: -18px;
    width: 100%;
    height: 18px;
    z-index: 99999;
    pointer-events: none;
  }

  .full-pattern-step-select[data-step-tempo-cat="slow"] option.full-pattern-tempo-match {
    background-color: #eaf4ff;
    color: #0075ff;
    font-weight: bold;
  }
  
  .full-pattern-step-select[data-step-tempo-cat="medium"] option.full-pattern-tempo-match {
    background-color: #fff4d8;
    color: #c98200;
    font-weight: bold;
  }
  
  .full-pattern-step-select[data-step-tempo-cat="fast"] option.full-pattern-tempo-match {
    background-color: #ffe5e5;
    color: #d64040;
    font-weight: bold;
  }
  
  .full-pattern-step-select option.full-pattern-tempo-mismatch {
    background-color: #eeeeee;
    color: #999999;
  }

  .full-pattern-step-select[data-step-tempo-cat="slow"] {
    background-color: #eaf4ff;
    color: #3b95ff;
    border: 1px solid #62abff;
  }
  
  .full-pattern-step-select[data-step-tempo-cat="medium"] {
    background-color: #fff4d8;
    color: #ce9121;
    border: 1px solid #d1ac67;
  }
  
  .full-pattern-step-select[data-step-tempo-cat="fast"] {
    background-color: #ffe5e5;
    color: #d96a6a;
    border: 1px solid #dc7777;
  } 
  
  .compact-map-tempo[data-step-tempo-cat="slow"] {
    background-color: #eaf4ff;
    color: #3b95ff;

  }
  
  .compact-map-tempo[data-step-tempo-cat="medium"] {
    background-color: #fff4d8;
    color: #ce9121;

  }
  
  .compact-map-tempo[data-step-tempo-cat="fast"] {
    background-color: #ffe5e5;
    color: #d96a6a;

  } 

  .full-pattern-step-select.full-pattern-selected-mismatch {
    background-color: #eeeeee;
    color: #999999;
    border: 1px solid #999999;

  }

  .full-pattern-step-select {
    width: 18px;
    min-width: 18px;
  }
  
  .full-pattern-step-select.has-value {
    min-width: 85px;
  }

  .viewport-pruned-display {
    display: none !important;
  }

  .viewport-pruned-content > .viewport-prunable-content {
    display: none !important;
  }

  .map-button-cell.viewport-pruned-content > * {
    display: none !important;
  }

  .viewport-hard-pruned-content {

  }


  .song-part-marker-btn img.song-part-marker-icon {
    width: 22px;
    height: 22px;
    display: block;
    pointer-events: none;

  }
  
  .song-part-marker-btn.is-song-part-marker {
    filter: drop-shadow(-3px 3px 2px #ff7b00);
  }
  
  .song-part-container {
    display: grid;
    grid-template-columns: repeat(8, max-content);
    grid-auto-rows: 18px;
    gap: 2px 2px;
    position: fixed;
    left: 193px;
    top: 150px;
    z-index: 690;
    font-family: calibri;
    border-radius: 10px;
    padding: 4px 6px 4px 4px;
    align-items: center;
    box-shadow: -1px -1px 20px 11px #ffffffa6;
    background-color: #ffffffa6;
  }
  
  .songPart {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 18px;
    padding: 1px 1px;
    color: #ff7b00;
    font-size: 11px;
    font-weight: bold;
    user-select: none;
    box-sizing: border-box;
    border-radius: 10px;
    background-color: #ffe3c8;
  }

  .songPart:nth-child(8n) {
    border-right: none;
  }
  
  .song-part-container.is-playing-disabled {
    opacity: 0.35;
    filter: grayscale(1);
    pointer-events: none;
  }

  .song-part-marker-btn {
    position: absolute;
    top: 38px;
    right: 2px;
    z-index: 30;
    width: 18px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: none;
    color: #0075ff;
    font-size: 14.4px;
    line-height: 18px;
    text-align: center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    z-index: 999999999;
  }

  .song-part-limit-warning {
    position: absolute;
    left: 30px;
    top: calc(100% - 34px);
    padding: 3px 8px;
    border-radius: 8px;
    background: #ff7b00;
    color: white;
    font-family: calibri;
    font-size: 11px;
    font-weight: bold;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-3px);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  }
  
  .song-part-limit-warning.show {
    opacity: 1;
    transform: translateY(0);
  }

  .note-db-map-editor {
    position: fixed;
    left: 86px;
    top: 285px;
    z-index: 999999;
    background: white;
    border-radius: 18px;
    padding: 10px;
    box-shadow: 0 0 20px #0003;
    font-family: calibri, sans-serif;
    transform: rotate(7.1deg) scale(0.86);
    cursor:default;

  }
  
  .note-db-map-toolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 8px;
  }
  
  .note-db-map-bars {
    height: 180px;
    display: flex;
    align-items: flex-end;
    gap: 3px;
    border-bottom: 1px solid #ccc;
    user-select: none;
  }
  
  .note-db-slot {
    width: 7px;
    height: 180px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
    cursor: ns-resize;
  }
  
  .note-db-bar {
    background: #ff7b00;
    border-radius: 4px 4px 0 0;
  }
  
  .note-db-label {
    position: absolute;
    bottom: 185px;
    font-size: 18px;
    display: none;
    background-color: white;
    color: black;
    padding: 4px;
  }
  
  .note-db-slot:hover .note-db-label {
    display: block;
  }
  


  .note-db-map-select-row {
    height: 12px;
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
    user-select: none;
  }
  
  .note-db-select-cell {
    width: 7px;
    height: 10px;
    border-radius: 3px;
    background: #ddd;
    cursor: pointer;
  }
  
  .note-db-select-cell.is-selected {
    background: #ff7b00;
  }
  
  .note-db-slot.is-selected::before {
    content: "";
    position: absolute;
    top: 0;
    width: 7px;
    height: 100%;
    border-radius: 4px;
    background: rgba(255, 123, 0, 0.12);
    pointer-events: none;
  }

  .note-db-map-editor.is-factory-readonly .note-db-slot {
    cursor: not-allowed;
    opacity: 0.85;
  }


  .note-db-map-select-row {
    height: 18px;
    padding-bottom: 6px;
  }
  
  .note-db-select-cell {
    height: 18px;
  }

  #noteDbDeletePreset {
    color: #ff3b00;
  }


  .note-db-bar {
    background: linear-gradient(
      to top,
      transparent 0%,
      var(--note-color, #ff7b00) 100%
    );
    border-radius: 4px 4px 0 0;
  }
  
  .note-db-select-cell {
    width: 7px;
    height: 18px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--note-color, #ddd) 38%, white);
    cursor: pointer;
  }
  
  .note-db-select-cell.is-selected {
    background: var(--note-color, #ff7b00);
  }
  
  .note-db-slot.is-selected::before {
    content: "";
    position: absolute;
    top: 0;
    width: 7px;
    height: 100%;
    border-radius: 4px;
    background: var(--note-color-soft, rgba(255, 123, 0, 0.12));
    pointer-events: none;
  }

  .note-db-map-toggle {
    position: fixed;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    filter: brightness(1);
    transform: scale(1);
    transition: filter 180ms ease, transform 180ms ease;
    top: 570px;
    left: 260px;
    transform: rotate(7.9deg);
    filter: brightness(1.28) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
  }
  
  .note-db-map-toggle img {
    display: block;
    pointer-events: none;
    width: 86px;
  }


  body.ghost-mode .note-db-map-toggle {
    top: 310px;
    left: 415px;
    transform: rotate(7.9deg);
    filter: brightness(1.28) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
  }


  
  body.ghost-mode .note-db-map-toggle img {
    width: 160px;
  }
  

  .note-db-map-toggle.is-open {
    filter: brightness(1.28) drop-shadow(0 0 5px rgba(255, 255, 255, 0.9)) drop-shadow(0 0 12px rgba(255, 255, 255, 0.65));
    transform: rotate(7.1deg);
  }



  /*
  On anime le conteneur extérieur afin de ne pas écraser
  le transform: rotate(7.1deg) de .note-db-map-editor.
*/

#noteDbMapEditor {
  position: relative;
  z-index: 999999;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transform:
    translate(-34px, 20px)
    scale(0.08);

  transform-origin: 95px 392px;

  transition:
    opacity 140ms ease,
    transform 220ms cubic-bezier(0.4, 0, 0.8, 0.2),
    visibility 0s linear 220ms;
}

#noteDbMapEditor.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;

  transform:
    translate(0, 0)
    scale(1);

  transition:
    opacity 120ms ease,
    visibility 0s linear 0s;

  animation:
    noteDbMixerDeploy 480ms
    cubic-bezier(0.18, 0.89, 0.32, 1.28)
    both;
}

@keyframes noteDbMixerDeploy {
  0% {
    opacity: 0;
    filter: brightness(1.8) blur(2px);
    transform:
      translate(-34px, 20px)
      scale(0.08);
  }

  54% {
    opacity: 1;
    filter: brightness(1.14) blur(0);
    transform:
      translate(0, 0)
      scale(1.055);
  }

  74% {
    transform:
      translate(0, 0)
      scale(0.982);
  }

  89% {
    transform:
      translate(0, 0)
      scale(1.014);
  }

  100% {
    opacity: 1;
    filter: brightness(1);
    transform:
      translate(0, 0)
      scale(1);
  }
}

/* Petit éclat à l’ouverture */

#noteDbMapEditor.is-open .note-db-map-editor {
  animation: noteDbMixerGlow 520ms ease-out both;
}

@keyframes noteDbMixerGlow {
  0% {
    box-shadow:
      0 0 0 rgba(255, 123, 0, 0),
      0 0 20px #0003;
  }

  45% {
    box-shadow:
      0 0 25px 5px rgba(255, 160, 65, 0.44),
      0 0 20px #0003;
  }

  100% {
    box-shadow:
      0 0 0 rgba(255, 123, 0, 0),
      0 0 20px #0003;
  }
}

@media (prefers-reduced-motion: reduce) {
  #noteDbMapEditor,
  #noteDbMapEditor.is-open,
  #noteDbMapEditor.is-open .note-db-map-editor {
    animation: none;
    transition-duration: 0.01ms;
  }
}