/* GOONS SX-2 « Blacklight » - façade (shared/js/goons-sx2.js)
 * Aluminium anodisé noir, joues en noyer, sérigraphie ivoire, LEDs ambre,
 * écrans OLED, afficheur plasma ambre. Dessinée à 1400 px de large puis mise
 * à l'échelle par le JS. Chaque sélecteur commence par .sx2 : sx-2.php les
 * préfixe par #sx2Studio pour passer devant la règle des boutons du header.
 */

.sx2-frame { position: relative; width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.sx2-sizer { position: relative; overflow: hidden; margin: 0 auto; }

.sx2 {
    --ink: #e7e0cf;
    --ink-dim: #8e887a;
    --amber: #ffae2b;
    --amber-dim: rgba(255, 174, 43, 0.14);
    --cyan: #2ee6ff;
    --green: #62ffb0;
    --yellow: #ffd400;
    --red: #ff3b30;
    --uv: #a98bff;
    --mod-bg: #17191d;
    --mod-line: #2a2c31;
    position: absolute;
    left: 0;
    top: 0;
    width: 1400px;
    display: flex;
    transform-origin: 0 0;
    font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif;
    color: var(--ink);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1.15;
}
.sx2 *, .sx2 *::before, .sx2 *::after { box-sizing: border-box; }
.sx2 button { font-family: inherit; color: inherit; cursor: pointer; margin: 0; }

/* ------------------------------------------------------------ châssis, joues */

.sx2-cheek {
    flex: none;
    width: 30px;
    background:
        repeating-linear-gradient(176deg, rgba(0, 0, 0, 0.16) 0 2px, transparent 2px 9px),
        repeating-linear-gradient(183deg, rgba(255, 210, 160, 0.05) 0 1px, transparent 1px 13px),
        linear-gradient(90deg, #3a1f10, #6d4024 34%, #5b341c 62%, #351b0d);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.5), inset 0 2px 0 rgba(255, 220, 180, 0.12);
}
.sx2-cheek--l { border-radius: 12px 0 0 12px; }
.sx2-cheek--r { border-radius: 0 12px 12px 0; }

.sx2-chassis {
    flex: 1;
    min-width: 0;
    padding: 16px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.013) 0 1px, transparent 1px 3px),
        linear-gradient(180deg, #141518, #0c0d0f);
    border-top: 2px solid #2a2c30;
    border-bottom: 3px solid #040405;
}

/* ------------------------------------------------------------ bandeau supérieur */

.sx2-top {
    display: grid;
    grid-template-columns: 238px minmax(0, 1fr) 262px 176px 150px;
    gap: 14px;
    align-items: stretch;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: linear-gradient(180deg, #0f1012, #0a0b0c);
    border: 1px solid #222428;
    border-radius: 7px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 1px 0 rgba(169, 139, 255, 0.18);
}
.sx2-brand { display: flex; flex-direction: column; gap: 6px; padding-top: 2px; }
.sx2-logo { font: 400 13px/1 'Michroma', sans-serif; letter-spacing: 0.42em; color: var(--ink-dim); }
.sx2-model { font: 400 34px/1 'Michroma', sans-serif; letter-spacing: 0.04em; color: var(--ink); display: flex; flex-direction: column; gap: 6px; }
.sx2-model b {
    font: 400 12px/1 'Michroma', sans-serif;
    letter-spacing: 0.5em;
    color: var(--amber);
    text-shadow: 0 0 10px rgba(255, 174, 43, 0.55);
}
.sx2-tagline { font: 600 9px/1.35 'Barlow Condensed', sans-serif; letter-spacing: 0.1em; color: var(--ink-dim); max-width: 220px; }
.sx2-status { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: auto; }
.sx2-pill { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-dim); }
.sx2-pill i { width: 7px; height: 7px; border-radius: 50%; background: #2a2622; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.7); transition: background 0.06s, box-shadow 0.06s; }
.sx2-pill.on[data-led="power"] i { background: var(--green); box-shadow: 0 0 7px 1px rgba(98, 255, 176, 0.85); }
.sx2-pill.on[data-led="gate"] i { background: var(--amber); box-shadow: 0 0 7px 1px rgba(255, 174, 43, 0.9); }
.sx2-pill.on[data-led="midi"] i { background: var(--cyan); box-shadow: 0 0 7px 1px rgba(46, 230, 255, 0.9); }
.sx2-pill.on[data-led="clip"] i { background: var(--red); box-shadow: 0 0 8px 2px rgba(255, 59, 48, 0.9); }

.sx2-scope-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sx2-scope { width: 100%; height: 132px; }
.sx2-scope-btns { display: flex; gap: 4px; }

.sx2-vfd-wrap { display: flex; flex-direction: column; gap: 7px; }
.sx2-vfd {
    position: relative;
    overflow: hidden;
    padding: 10px 12px 9px;
    border-radius: 4px;
    background: radial-gradient(120% 140% at 50% 0%, #1a0f04, #070401 70%);
    border: 1px solid #000;
    box-shadow: inset 0 0 18px rgba(0, 0, 0, 0.9), 0 0 0 3px #0b0c0e, 0 0 0 4px #2b2d31;
    font-family: 'Share Tech Mono', ui-monospace, monospace;
    color: #ffb547;
    text-shadow: 0 0 6px rgba(255, 160, 40, 0.85), 0 0 18px rgba(255, 110, 0, 0.35);
    white-space: pre;
}
.sx2-vfd::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 0, 0, 0.42) 32%, transparent 34%), linear-gradient(180deg, rgba(255, 255, 255, 0.07), transparent 40%);
    background-size: 3px 3px, 100% 100%;
    pointer-events: none;
}
.sx2-vfd-line1 { font-size: 19px; line-height: 24px; height: 24px; letter-spacing: 0.06em; }
.sx2-vfd-line2 { font-size: 12.5px; line-height: 16px; height: 16px; letter-spacing: 0.08em; opacity: 0.82; }
.sx2-preset-btns { display: flex; gap: 4px; }
.sx2-preset-btns > * { flex: 1; }
.sx2-preset-btns [data-preset-step] { flex: 0 0 30px; }
.sx2-preset-select {
    min-width: 0;
    height: 26px;
    padding: 0 6px;
    border-radius: 3px;
    border: 1px solid #33363c;
    background: #0c0d0f;
    color: var(--amber);
    font: 13px 'Share Tech Mono', ui-monospace, monospace;
    cursor: pointer;
}

.sx2-vu { width: 100%; height: auto; align-self: start; border-radius: 6px; box-shadow: 0 0 0 1px #000, 0 0 0 3px #26282c, inset 0 0 12px rgba(0, 0, 0, 0.6); }
.sx2-master { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; justify-items: center; align-items: end; gap: 4px 2px; }

/* ------------------------------------------------------------ modules */

.sx2-grid { display: grid; gap: 12px; margin-bottom: 12px; align-items: stretch; }
.sx2-grid--osc { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.12fr); }
.sx2-grid--filter { grid-template-columns: minmax(0, 1.72fr) repeat(3, minmax(0, 1fr)); }
.sx2-grid--mod { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1.12fr) minmax(0, 0.96fr) minmax(0, 1.16fr); }

.sx2-mod {
    --accent: var(--amber);
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 32px 14px 10px;
    border-radius: 7px;
    background:
        repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.012) 0 1px, transparent 1px 2px),
        linear-gradient(180deg, #1c1e22, #141518);
    border: 1px solid var(--mod-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 0 #050506, 0 6px 14px rgba(0, 0, 0, 0.35);
}
.sx2-filter, .sx2-voice { --accent: var(--cyan); }
.sx2-env { --accent: var(--green); }
.sx2-lfo { --accent: var(--yellow); }
.sx2-patch { --accent: #ff2bd6; }
.sx2-mod-head {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 24px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 0 20px;
    border-bottom: 1px solid #25272c;
}
.sx2-mod-head::before {
    content: '';
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
}
.sx2-mod-head h3 { margin: 0; font: 400 10.5px/1 'Michroma', sans-serif; letter-spacing: 0.15em; color: var(--ink); white-space: nowrap; }
.sx2-mod-head span { margin-left: auto; font-weight: 600; font-size: 9px; letter-spacing: 0.13em; color: var(--ink-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sx2-mod-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }
.sx2-mod-jacks {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px 12px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px dashed #2c2e34;
}
.sx2-screw { position: absolute; width: 8px; height: 8px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #a5a7ab, #3c3e42 72%); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.7); }
.sx2-screw::after { content: ''; position: absolute; left: 1px; right: 1px; top: 3.5px; height: 1px; background: #1b1c1e; transform: rotate(35deg); }
.sx2-screw.tl { top: 8px; left: 6px; }
.sx2-screw.tr { top: 8px; right: 6px; }
.sx2-screw.bl { bottom: 6px; left: 6px; }
.sx2-screw.br { bottom: 6px; right: 6px; }

.sx2-knobs { display: flex; justify-content: space-around; align-items: flex-start; gap: 4px; }
.sx2-row-inline { display: flex; gap: 14px; }

/* ------------------------------------------------------------ potards */

.sx2-knob {
    --d: 46px;
    --b: 0;
    --v: 0.5;
    position: relative;
    display: grid;
    grid-template-rows: var(--d) auto auto;
    justify-items: center;
    width: calc(var(--d) + 12px);
    cursor: ns-resize;
    touch-action: none;
    outline: none;
}
.sx2-knob--s { --d: 44px; }
.sx2-knob--m { --d: 56px; }
.sx2-knob--l { --d: 72px; }
.sx2-knob--xl { --d: 104px; }
.sx2-knob--bipolar { --b: 0.5; }
.sx2-knob-ring, .sx2-knob-moddot, .sx2-knob-cap { grid-area: 1 / 1; }
.sx2-knob-ring {
    width: var(--d);
    height: var(--d);
    border-radius: 50%;
    background: conic-gradient(from -135deg,
        var(--amber-dim) 0 calc(min(var(--v), var(--b)) * 270deg),
        var(--amber) 0 calc(max(var(--v), var(--b)) * 270deg),
        var(--amber-dim) 0 270deg,
        transparent 0);
    -webkit-mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3.5px)), repeating-conic-gradient(from -135deg, #000 0 6.5deg, transparent 0 9deg);
    -webkit-mask-composite: source-in;
    mask: radial-gradient(circle, transparent calc(50% - 4px), #000 calc(50% - 3.5px)), repeating-conic-gradient(from -135deg, #000 0 6.5deg, transparent 0 9deg);
    mask-composite: intersect;
    filter: drop-shadow(0 0 3px rgba(255, 174, 43, 0.55));
}
.sx2-knob-cap {
    place-self: center;
    position: relative;
    width: calc(var(--d) - 13px);
    height: calc(var(--d) - 13px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1), transparent 60%),
        repeating-conic-gradient(#0b0b0c 0 4deg, #2c2d31 4deg 8deg);
    box-shadow: 0 5px 9px rgba(0, 0, 0, 0.65), 0 1px 2px rgba(0, 0, 0, 0.8), inset 0 0 0 1px rgba(0, 0, 0, 0.8);
    transform: rotate(calc(-135deg + var(--v) * 270deg));
}
.sx2-knob-cap::before {
    content: '';
    position: absolute;
    inset: 19%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.9), transparent 38%),
        conic-gradient(from 20deg, #d9dbde, #8f9398, #eceded, #9a9ea3, #d0d2d5, #8b8f94, #d9dbde);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55), inset 0 -2px 3px rgba(0, 0, 0, 0.35);
}
.sx2-knob-cap i {
    position: absolute;
    left: 50%;
    top: 2px;
    width: 3px;
    height: 20%;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #fbf8f0;
    box-shadow: 0 0 3px rgba(255, 255, 255, 0.5);
}
.sx2-knob-moddot {
    position: relative;
    width: var(--d);
    height: var(--d);
    opacity: 0;
    transform: rotate(calc(-135deg + var(--m, var(--v)) * 270deg));
    pointer-events: none;
    z-index: 1;
}
.sx2-knob-moddot::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 50%;
    width: 7px;
    height: 7px;
    margin-left: -3.5px;
    border-radius: 50%;
    background: var(--cyan);
    box-shadow: 0 0 6px 2px rgba(46, 230, 255, 0.85);
}
.sx2-knob.is-modulated .sx2-knob-moddot { opacity: 1; }
.sx2-knob-label {
    margin-top: 5px;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    color: var(--ink);
    white-space: nowrap;
}
.sx2-knob-value {
    min-height: 12px;
    font: 10.5px/12px 'Share Tech Mono', ui-monospace, monospace;
    color: var(--amber);
    opacity: 0.55;
    white-space: nowrap;
    transition: opacity 0.12s;
}
.sx2-knob:hover .sx2-knob-value, .sx2-knob.is-active .sx2-knob-value, .sx2-knob:focus-visible .sx2-knob-value { opacity: 1; text-shadow: 0 0 6px rgba(255, 174, 43, 0.7); }
.sx2-knob:focus-visible .sx2-knob-cap { box-shadow: 0 0 0 2px var(--cyan), 0 5px 9px rgba(0, 0, 0, 0.65); }
.sx2-knob.is-disabled { opacity: 0.4; }

/* ------------------------------------------------------------ boutons, sélecteurs */

.sx2-sel { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sx2-sel-label { font-weight: 600; font-size: 9px; letter-spacing: 0.14em; color: var(--ink-dim); }
.sx2-sel-btns { display: flex; flex-wrap: wrap; gap: 3px; }
.sx2-sel button, .sx2-divs button, .sx2-scope-btns button, .sx2-preset-btns button, .sx2-patch-btns button,
.sx2-seq-tools button, .sx2-seq-root button, .sx2-oct button, .sx2-toggle, .sx2-cable-view button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 22px;
    padding: 3px 6px;
    border-radius: 3px;
    border: 1px solid #34373d;
    border-bottom-color: #0a0a0b;
    background: linear-gradient(180deg, #2b2d32, #1c1e22);
    box-shadow: 0 2px 0 #060607, inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.08em;
    line-height: 1;
    color: var(--ink);
    white-space: nowrap;
    transition: transform 0.05s, box-shadow 0.05s, color 0.1s;
}
.sx2-sel button:active, .sx2-divs button:active, .sx2 button:active { transform: translateY(1px); }
.sx2 button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
.sx2-sel button.on, .sx2-divs button.on, .sx2-scope-btns button.on, .sx2-cable-view button.on {
    color: #fff;
    background: linear-gradient(180deg, #33302a, #221f1a);
    box-shadow: 0 1px 0 #060607, inset 0 1px 0 rgba(255, 200, 120, 0.08);
    transform: translateY(1px);
}
.sx2-scope-btns button.on, .sx2-cable-view button.on { color: var(--amber); }
.sx2-led {
    flex: none;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #3d2c14;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6);
}
.sx2 .on > .sx2-led { background: var(--amber); box-shadow: 0 0 6px 1px rgba(255, 174, 43, 0.9); }
.sx2-divs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.sx2-divs button { padding: 3px 2px; font-size: 9.5px; }
.sx2-lfo:not(.is-sync) .sx2-divs { opacity: 0.42; }
.sx2-lfo.is-sync .sx2-knob[data-param$="Rate"] { opacity: 0.42; }

/* LEDs des VCO et des LFO */
.sx2-led-osc {
    position: absolute;
    top: 8px;
    right: 22px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    --glow: 0.1;
    background: radial-gradient(circle at 38% 32%, #ffd8cf, #ff3b30 45%, #6d0e09);
    opacity: calc(0.22 + var(--glow) * 0.78);
    box-shadow: 0 0 calc(var(--glow) * 12px) calc(var(--glow) * 3px) rgba(255, 59, 48, 0.85);
}
.sx2-vco .sx2-mod-head span { margin-right: 14px; }
.sx2-lfo-top { display: flex; align-items: center; gap: 10px; }
.sx2-lfo-oled { flex: 1; min-width: 0; height: 58px; }
.sx2-lfo-led {
    --glow: 0;
    flex: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 32%, #fff8c8, var(--yellow) 45%, #5c4a00);
    opacity: calc(0.2 + var(--glow) * 0.8);
    box-shadow: 0 0 calc(var(--glow) * 14px) calc(var(--glow) * 4px) rgba(255, 212, 0, 0.8);
}

/* ------------------------------------------------------------ écrans */

.sx2-oled {
    display: block;
    width: 100%;
    background: #020a07;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: 0 0 0 3px #0b0c0e, 0 0 0 4px #2b2d31, inset 0 0 10px rgba(0, 0, 0, 0.8);
}
.sx2-env-oled { height: 96px; }
.sx2-vco-oled { height: 44px; }
.sx2-filter-oled { flex: 1; min-width: 0; height: 104px; }
.sx2-filter-wrap { display: flex; gap: 14px; align-items: center; }
.sx2-filter-main { display: flex; gap: 6px; align-items: center; }
.sx2-faders { display: flex; justify-content: space-between; margin-top: 4px; }

/* ------------------------------------------------------------ prises, câbles */

.sx2-jack { display: flex; flex-direction: column-reverse; align-items: center; gap: 4px; cursor: crosshair; touch-action: none; }
.sx2-jack-nut {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background:
        radial-gradient(circle, transparent 55%, rgba(0, 0, 0, 0.25) 56%),
        repeating-conic-gradient(#d5d7da 0 12deg, #8f9297 12deg 24deg);
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.7), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
    transition: box-shadow 0.12s, transform 0.12s;
}
.sx2-jack-hole {
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: radial-gradient(circle, #000 42%, #2c2d30 58%, #111214 76%);
    box-shadow: 0 0 0 1.5px #55585d;
}
.sx2-jack em {
    font-style: normal;
    font-weight: 700;
    font-size: 9px;
    letter-spacing: 0.1em;
    line-height: 1;
    padding: 2px 3px;
    color: var(--ink);
    white-space: nowrap;
}
.sx2-jack--out em { background: var(--ink); color: #141518; border-radius: 2px; }
.sx2-jack:hover .sx2-jack-nut { box-shadow: 0 0 0 2px rgba(255, 174, 43, 0.65), 0 2px 3px rgba(0, 0, 0, 0.7); }
.sx2.is-patching .sx2-jack--in .sx2-jack-nut { box-shadow: 0 0 0 2px rgba(46, 230, 255, 0.55), 0 0 12px rgba(46, 230, 255, 0.4); animation: sx2-jack-call 0.9s ease-in-out infinite; }
.sx2.is-patching .sx2-jack--in.is-target .sx2-jack-nut { transform: scale(1.18); box-shadow: 0 0 0 3px var(--cyan), 0 0 18px rgba(46, 230, 255, 0.8); animation: none; }
.sx2.is-patching .sx2-jack--out { opacity: 0.45; }
@keyframes sx2-jack-call { 50% { box-shadow: 0 0 0 3px rgba(46, 230, 255, 0.9), 0 0 16px rgba(46, 230, 255, 0.6); } }

.sx2-cables { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; z-index: 20; }
.sx2-cable path { fill: none; stroke-linecap: round; }
.sx2-cable-shadow { stroke: rgba(0, 0, 0, 0.5); transform: translate(3px, 7px); }
.sx2-cable-shine { stroke: rgba(255, 255, 255, 0.32); transform: translate(-1px, -1.6px); }
.sx2-cable-hit { stroke: transparent; stroke-width: 10px; pointer-events: stroke; cursor: pointer; }
.sx2-cable.is-selected .sx2-cable-body { filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.75)); }
.sx2-cable.is-temp { opacity: 0.9; }
.sx2-plug { fill: #17181a; stroke: #6f7278; stroke-width: 2; }
.sx2-plug-tip { fill: #e2e2e2; }
.sx2[data-cables="dim"] .sx2-cables { opacity: 0.28; }
.sx2[data-cables="hide"] .sx2-cables { opacity: 0; }
.sx2[data-cables="dim"] .sx2-cable-hit, .sx2[data-cables="hide"] .sx2-cable-hit { pointer-events: none; }

.sx2-patch-info { min-height: 30px; font-size: 12px; letter-spacing: 0.03em; color: var(--ink); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sx2-patch-info b { color: #fff; font-weight: 700; }
.sx2-patch-edit { display: flex; gap: 10px; align-items: center; }
.sx2-patch-btns { display: flex; flex-direction: column; gap: 5px; flex: 1; }
.sx2-cable-view { display: flex; gap: 3px; }
.sx2-cable-view button { flex: 1; }
.sx2-cable-list { list-style: none; margin: 0; padding: 4px; max-height: 104px; overflow-y: auto; background: #0d0e10; border-radius: 4px; border: 1px solid #222428; scrollbar-width: thin; }
.sx2-cable-list:empty::before { content: 'No cable yet'; display: block; padding: 6px; font: 11px 'Share Tech Mono', monospace; color: var(--ink-dim); }
.sx2-cable-list li {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 3px 6px;
    border-radius: 3px;
    font: 11.5px/1.35 'Share Tech Mono', ui-monospace, monospace;
    color: var(--ink);
    cursor: pointer;
    white-space: nowrap;
}
.sx2-cable-list li:hover { background: rgba(255, 255, 255, 0.04); }
.sx2-cable-list li.on { background: rgba(255, 255, 255, 0.09); color: #fff; }
.sx2-cable-list li em { margin-left: auto; font-style: normal; color: var(--amber); }
.sx2-swatch { flex: none; display: inline-block; width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6), 0 0 6px rgba(255, 255, 255, 0.15); }

/* ------------------------------------------------------------ baie d'effets */

.sx2-fxrack {
    position: relative;
    padding: 10px 12px 12px;
    margin-bottom: 12px;
    border-radius: 7px;
    background: linear-gradient(180deg, #191a1d, #101113);
    border: 1px solid var(--mod-line);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 0 #050506;
}
.sx2-fxrack-head { display: flex; align-items: baseline; gap: 12px; margin: 0 4px 9px; }
.sx2-fxrack-head h3 { margin: 0; font: 400 10.5px/1 'Michroma', sans-serif; letter-spacing: 0.15em; }
.sx2-fxrack-head span { font-weight: 600; font-size: 9px; letter-spacing: 0.13em; color: var(--ink-dim); }
.sx2-fxrack-units { display: grid; grid-template-columns: 3.3fr 3fr 4fr 3fr 4fr 3.4fr 2.2fr 1.6fr; gap: 8px; }
.sx2-fx {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 7px 6px 6px;
    border-radius: 5px;
    background: #0e0f11;
    border: 1px solid #25272c;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.sx2-fx.is-on { border-color: rgba(255, 174, 43, 0.38); box-shadow: inset 0 0 22px rgba(255, 174, 43, 0.07); }
.sx2-fx:not(.is-on) .sx2-knobs, .sx2-fx:not(.is-on) .sx2-sel { opacity: 0.45; }
.sx2-fx .sx2-knob { --d: 38px; width: 44px; }
.sx2-fx .sx2-knob-label { font-size: 9px; }
.sx2-fx .sx2-knobs { justify-content: space-evenly; gap: 0; margin-top: auto; }
.sx2-fx .sx2-sel-label:empty { display: none; }
.sx2-fx .sx2-sel-btns { display: grid; grid-template-columns: repeat(4, 1fr); }
.sx2-fx .sx2-sel button { padding: 3px 1px; font-size: 9px; min-height: 19px; }
.sx2-fx-jacks { display: flex; justify-content: center; }
.sx2-toggle { width: 100%; justify-content: flex-start; gap: 7px; padding: 5px 7px; font: 400 9.5px/1 'Michroma', sans-serif; letter-spacing: 0.12em; }
.sx2-toggle .sx2-led { width: 7px; height: 7px; }
.sx2-toggle.on { color: #fff; }

/* ------------------------------------------------------------ séquenceur */

.sx2-seq {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr) 330px;
    gap: 12px;
    padding: 12px;
    margin-bottom: 12px;
    border-radius: 7px;
    background: linear-gradient(180deg, #17181b, #0f1012);
    border: 1px solid var(--mod-line);
}
.sx2-seq-left { display: flex; flex-direction: column; gap: 8px; }
.sx2-play {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    height: 46px;
    border-radius: 5px;
    border: 1px solid #3a3d43;
    border-bottom-color: #070708;
    background: linear-gradient(180deg, #2f3136, #1d1f23);
    box-shadow: 0 3px 0 #050506, inset 0 1px 0 rgba(255, 255, 255, 0.07);
    font: 400 13px/1 'Michroma', sans-serif;
    letter-spacing: 0.2em;
}
.sx2-play b { font-weight: 400; }
.sx2-play .sx2-led { width: 9px; height: 9px; background: #12301f; }
.sx2-play.on { transform: translateY(2px); box-shadow: 0 1px 0 #050506; }
.sx2-play.on .sx2-led { background: var(--green); box-shadow: 0 0 9px 2px rgba(98, 255, 176, 0.85); }
.sx2-seq-root { display: grid; grid-template-columns: auto 26px 1fr 26px; align-items: center; gap: 5px; font-weight: 600; font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-dim); }
.sx2-seq-root output { text-align: center; font: 15px 'Share Tech Mono', monospace; color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 43, 0.6); }
.sx2-seq-tools { display: flex; gap: 4px; }
.sx2-seq-tools button { flex: 1; }
.sx2-steps { display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); gap: 5px; }
.sx2-step {
    display: grid;
    grid-template-rows: 8px 30px 15px 16px 15px 17px 17px;
    gap: 3px;
    padding: 5px 4px;
    border-radius: 4px;
    background: #111215;
    border: 1px solid #222428;
    text-align: center;
}
.sx2-step.is-beat { background: #17181c; border-color: #2c2e33; }
.sx2-step-led { justify-self: center; width: 8px; height: 8px; border-radius: 50%; background: #3a0f0c; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.6); }
.sx2-step.is-current .sx2-step-led { background: var(--red); box-shadow: 0 0 9px 2px rgba(255, 59, 48, 0.9); }
.sx2-step.is-current { border-color: rgba(255, 59, 48, 0.55); }
.sx2-step button { padding: 0; border-radius: 3px; border: 1px solid #33363c; border-bottom-color: #0a0a0b; background: linear-gradient(180deg, #282a2f, #1b1d20); font-weight: 700; font-size: 10px; letter-spacing: 0.06em; color: var(--ink-dim); box-shadow: 0 1px 0 #060607; }
.sx2-step-on { font: 400 11px/1 'Michroma', sans-serif !important; }
.sx2-step.is-on .sx2-step-on { color: #1a1206; background: linear-gradient(180deg, #ffc65c, #ff9d1a); border-color: #ffb547; box-shadow: 0 0 12px rgba(255, 174, 43, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.sx2-step-up, .sx2-step-down { font-size: 8px !important; line-height: 1; }
.sx2-step-note { font: 12px/16px 'Share Tech Mono', monospace; color: var(--amber); text-shadow: 0 0 6px rgba(255, 174, 43, 0.5); }
.sx2-step:not(.is-on) .sx2-step-note { color: var(--ink-dim); text-shadow: none; }
.sx2-step-flag.on[data-flag="accent"] { color: #fff; background: linear-gradient(180deg, #b3261e, #7c140f); border-color: #ff5a4f; box-shadow: 0 0 8px rgba(255, 59, 48, 0.55); }
.sx2-step-flag.on[data-flag="slide"] { color: #031418; background: linear-gradient(180deg, #7cf3ff, #1fc6e0); border-color: #9cf6ff; box-shadow: 0 0 8px rgba(46, 230, 255, 0.55); }
.sx2-step:not(.is-on) .sx2-step-flag { opacity: 0.5; }

/* ------------------------------------------------------------ arpégiateur, mémoire d'accord */

.sx2-arp {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
    padding: 8px 10px 10px;
    border-radius: 5px;
    background: #111215;
    border: 1px solid #25272c;
}
.sx2-arp-head { display: flex; align-items: baseline; gap: 10px; }
.sx2-arp-head h3 { margin: 0; font: 400 10px/1 'Michroma', sans-serif; letter-spacing: 0.14em; }
.sx2-arp-head span { margin-left: auto; font-weight: 600; font-size: 9px; letter-spacing: 0.13em; color: var(--ink-dim); }
.sx2-arp-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.sx2-arp-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.sx2-arp-toggles { display: flex; gap: 4px; }
.sx2-arp .sx2-toggle { flex: 1; width: auto; justify-content: center; }
.sx2-arp .sx2-sel-btns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sx2-arp [data-param="chord"] .sx2-sel-btns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx2-arp .sx2-sel button { padding: 3px 1px; min-height: 19px; font-size: 9px; }
.sx2-arp .sx2-knob { --d: 40px; width: 48px; }
.sx2-toggle.is-tick .sx2-led { background: #fff3d6; box-shadow: 0 0 10px 3px rgba(255, 174, 43, 0.95); }

/* ------------------------------------------------------------ clavier, molettes */

.sx2-keys-row {
    display: grid;
    grid-template-columns: 172px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 7px;
    background: linear-gradient(180deg, #0e0f11, #08090a);
    border: 1px solid #1f2125;
    box-shadow: inset 0 14px 26px -18px rgba(169, 139, 255, 0.6);
}
.sx2-wheels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; align-content: start; justify-items: center; }
.sx2-wheel {
    --w: 0;
    position: relative;
    width: 36px;
    height: 124px;
    border-radius: 6px;
    overflow: hidden;
    cursor: ns-resize;
    touch-action: none;
    background:
        linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.55)),
        linear-gradient(180deg, rgba(0, 0, 0, 0.75), transparent 28%, transparent 72%, rgba(0, 0, 0, 0.75)),
        repeating-linear-gradient(180deg, #1a1a1c 0 3px, #2e2f33 3px 6px);
    background-position: 0 0, 0 0, 0 calc(var(--w) * -60px);
    box-shadow: 0 0 0 3px #050506, 0 0 0 4px #2a2c30, inset 0 0 6px rgba(0, 0, 0, 0.8);
}
.sx2-wheel i {
    position: absolute;
    left: 3px;
    right: 3px;
    height: 4px;
    top: calc(10px + (1 - var(--w)) * (100% - 24px));
    border-radius: 2px;
    background: var(--ink);
    box-shadow: 0 0 6px rgba(231, 224, 207, 0.6);
}
.sx2-wheel[data-wheel="mod"] i { background: var(--cyan); box-shadow: 0 0 8px rgba(46, 230, 255, 0.8); }
.sx2-wheel:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }
.sx2-wheel-labels { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; text-align: center; font-weight: 700; font-size: 9.5px; letter-spacing: 0.14em; color: var(--ink-dim); }
.sx2-oct { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 34px 1fr; gap: 5px; align-items: center; width: 100%; }
.sx2-oct output { text-align: center; font: 14px 'Share Tech Mono', monospace; color: var(--amber); }
.sx2-keyboard { position: relative; height: 176px; touch-action: none; }
.sx2-whites { display: flex; height: 100%; }
.sx2-key { cursor: pointer; }
.sx2-key--w {
    position: relative;
    flex: 1;
    margin-right: -1px;
    border: 1px solid #141414;
    border-radius: 0 0 5px 5px;
    background: linear-gradient(180deg, #ddd8cc, #f6f2e8 9%, #fffdf7 82%, #d8d2c4);
    box-shadow: inset 0 -5px 0 #cfc8b8, 0 3px 0 #050506;
}
.sx2-key--w em { position: absolute; left: 0; right: 0; bottom: 11px; text-align: center; font: 700 9.5px 'Barlow Condensed', sans-serif; letter-spacing: 0.08em; font-style: normal; color: #9a9384; }
.sx2-key--b {
    position: absolute;
    top: 0;
    width: 2.6%;
    height: 61%;
    z-index: 2;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(180deg, #050505, #2a2a2e 10%, #151517 85%, #050505);
    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.6), inset 0 -5px 0 #000, inset 1px 0 0 rgba(255, 255, 255, 0.08);
}
.sx2-key--w.is-down { background: linear-gradient(180deg, #cdc7ba, #e9e4d9 12%, #f1ede4); box-shadow: inset 0 -3px 0 var(--amber), inset 0 6px 10px rgba(0, 0, 0, 0.22); }
.sx2-key--b.is-down { background: linear-gradient(180deg, #000, #121214); box-shadow: inset 0 -3px 0 var(--amber), 0 2px 3px rgba(0, 0, 0, 0.6); }
.sx2-key--w.is-seq { box-shadow: inset 0 -7px 0 rgba(255, 174, 43, 0.85), 0 3px 0 #050506; }
.sx2-key--b.is-seq { box-shadow: inset 0 -6px 0 rgba(255, 174, 43, 0.85), 0 4px 5px rgba(0, 0, 0, 0.6); }

/* ------------------------------------------------------------ tablette et téléphone
   Sous 980 px, le JS retire la mise à l'échelle (sx2--fluid) : la façade garde sa taille réelle
   et ses modules passent en colonnes. Sous 620 px (sx2--narrow), une seule colonne. */

.sx2.sx2--fluid .sx2-cheek { width: 12px; }
.sx2.sx2--fluid .sx2-cheek--l { border-radius: 8px 0 0 8px; }
.sx2.sx2--fluid .sx2-cheek--r { border-radius: 0 8px 8px 0; }
.sx2.sx2--fluid .sx2-chassis { padding: 10px; }
.sx2.sx2--fluid .sx2-top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "brand vfd" "scope scope" "vu master";
    padding: 12px;
}
.sx2.sx2--fluid .sx2-brand { grid-area: brand; }
.sx2.sx2--fluid .sx2-scope-wrap { grid-area: scope; }
.sx2.sx2--fluid .sx2-vfd-wrap { grid-area: vfd; }
.sx2.sx2--fluid .sx2-vu { grid-area: vu; max-width: 220px; justify-self: center; }
.sx2.sx2--fluid .sx2-master { grid-area: master; grid-template-columns: repeat(4, auto); justify-content: center; align-items: center; gap: 4px 14px; }
.sx2.sx2--fluid .sx2-grid--osc,
.sx2.sx2--fluid .sx2-grid--filter,
.sx2.sx2--fluid .sx2-grid--mod { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx2.sx2--fluid .sx2-filter { grid-column: 1 / -1; }
.sx2.sx2--fluid .sx2-fxrack-units { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sx2.sx2--fluid .sx2-seq { grid-template-columns: minmax(0, 1fr); }
.sx2.sx2--fluid .sx2-seq-left { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
.sx2.sx2--fluid .sx2-steps { grid-template-columns: repeat(8, minmax(0, 1fr)); row-gap: 8px; }
.sx2.sx2--fluid .sx2-keys-row { grid-template-columns: minmax(0, 1fr); overflow-x: auto; scrollbar-width: thin; }
.sx2.sx2--fluid .sx2-wheels { grid-template-columns: 44px 44px auto; grid-template-rows: auto auto; justify-content: start; justify-items: start; gap: 6px 14px; }
.sx2.sx2--fluid .sx2-wheel { height: 96px; }
.sx2.sx2--fluid .sx2-wheel-labels { grid-column: 1 / 3; grid-row: 2; }
.sx2.sx2--fluid .sx2-oct { grid-column: 3; grid-row: 1; align-self: center; width: 180px; }
/* Trois octaves sur un téléphone : le clavier garde des touches jouables et défile de côté
   (un glissé horizontal fait défiler, un appui joue). */
.sx2.sx2--fluid .sx2-keyboard { width: 860px; max-width: none; height: 150px; touch-action: pan-x; }

.sx2.sx2--narrow .sx2-top { grid-template-columns: minmax(0, 1fr); grid-template-areas: "brand" "vfd" "scope" "vu" "master"; }
.sx2.sx2--narrow .sx2-grid--osc,
.sx2.sx2--narrow .sx2-grid--filter,
.sx2.sx2--narrow .sx2-grid--mod { grid-template-columns: minmax(0, 1fr); }
.sx2.sx2--narrow .sx2-filter-wrap { flex-wrap: wrap; justify-content: center; }
.sx2.sx2--narrow .sx2-filter-oled { flex-basis: 100%; }
.sx2.sx2--narrow .sx2-fxrack-units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sx2.sx2--narrow .sx2-arp-cols { grid-template-columns: minmax(0, 1fr); }
.sx2.sx2--narrow .sx2-seq-left { grid-template-columns: 1fr; }
.sx2.sx2--narrow .sx2-steps { gap: 4px 3px; }
.sx2.sx2--narrow .sx2-step { padding: 4px 2px; grid-template-rows: 8px 28px 15px 16px 15px 17px 17px; }
.sx2.sx2--narrow .sx2-step button { font-size: 9px; letter-spacing: 0.02em; }
.sx2.sx2--narrow .sx2-step-on { font-size: 10px !important; }
.sx2.sx2--narrow .sx2-step-note { font-size: 11px; }

@media (prefers-reduced-motion: reduce) {
    .sx2.is-patching .sx2-jack--in .sx2-jack-nut { animation: none; }
    .sx2 * { transition: none !important; }
}