/* Annexe : le synthé modulaire */
.mo-hero-art{display:grid;place-items:center;padding:20px;border-radius:20px;background:#151925}
.mo-hero-art svg{width:100%;max-width:340px;height:auto}
.mo-hero-art .case{fill:#0d111a;stroke:#4d5568;stroke-width:2}.mo-hero-art .mod rect{fill:#252b38;stroke:#ffffff22}
.mo-hero-art .kn circle{fill:#151925;stroke:#cfd5e1;stroke-width:2}.mo-hero-art .jk circle{fill:#0d111a;stroke:#8f98aa;stroke-width:2}
.mo-hero-art .tx text{font:700 10px 'DM Mono',monospace;fill:#8be8bd;text-anchor:middle}
.mo-hero-art path{fill:none;stroke-width:4;stroke-linecap:round}.mo-hero-art .c1{stroke:#ff7048}.mo-hero-art .c2{stroke:#ffd36e}.mo-hero-art .c3{stroke:#6f9bff}
.mo-lab{display:grid;gap:12px;margin:14px 0 18px;padding:16px;border-radius:18px;background:var(--ink);color:#fff}
.mo-lab button{font:inherit;cursor:pointer}
.mo-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.mo-top>button,.mo-seg button,.mo-trig{padding:8px 12px;border:1px solid #ffffff1c;border-radius:9px;background:#1b202b;color:#e7ebf3;font-size:13px;font-weight:700}
.mo-seg{display:flex;flex-wrap:wrap;gap:5px}.mo-seg button[aria-pressed=true]{background:#1f2a40;border-color:#6f9bff}
.mo-lab .mo-play{background:var(--mint);border-color:var(--mint);color:var(--ink);min-width:96px}
.mo-scroll{overflow-x:auto;padding-bottom:6px}
.mo-rack{position:relative;display:flex;gap:6px;min-width:940px;padding:10px 10px 78px;border-radius:12px;background:#0b0e15;border:2px solid #2a3040}
.mo-mod{flex:1 1 0;min-width:100px;display:flex;flex-direction:column;gap:8px;padding:10px 8px;border-radius:6px;background:#252b38;border:1px solid #ffffff14}
.mo-mod>b{font:700 10.5px 'DM Mono',monospace;letter-spacing:.08em;color:#8be8bd;text-align:center}
.mo-mod label{display:grid;gap:2px;font-size:11px;color:#cfd5e1}
.mo-mod output{font:600 10px 'DM Mono',monospace;color:#ffd36e}
.mo-mod input[type=range]{width:100%;accent-color:#ff7048}
.mo-steps{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;height:96px}
.mo-steps input{writing-mode:vertical-lr;direction:rtl;width:100%;height:100%;margin:0;accent-color:#8be8bd}
.mo-steps input.cur{accent-color:#ffd36e}
.mo-trig{font-size:11.5px!important;padding:6px 8px!important}
.mo-jacks{display:grid;grid-template-columns:1fr 1fr;gap:8px 4px;margin-top:auto;padding-top:8px;border-top:1px solid #ffffff14}
.mo-jack{display:grid;justify-items:center;gap:3px;padding:2px;border:0;background:none;color:#b7c0ce}
.mo-jack i{display:block;width:20px;height:20px;border-radius:50%;background:#0d111a;border:3px solid #8f98aa;box-sizing:border-box}
.mo-jack.out i{background:#8f98aa;border-color:#cfd5e1}
.mo-jack.gate i{border-color:#ffd36e}.mo-jack.out.gate i{background:#ffd36e}
.mo-jack span{font:600 8.5px 'DM Mono',monospace;letter-spacing:.04em;text-align:center}
.mo-jack.sel i{box-shadow:0 0 0 4px #6f9bff}
.mo-jack:focus-visible{outline:2px solid #6f9bff;border-radius:6px}
.mo-cables{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}
.mo-cables path{fill:none;stroke-width:4;stroke-linecap:round;opacity:.9}
.mo-lab .mo-status{margin:0;min-height:3em;font-size:13.5px;line-height:1.5;color:#e7ebf3}
.mo-mod[data-mod=seq]{flex:1.6 1 0;min-width:168px}
.mo-rack:after{content:"";position:absolute;left:10px;right:10px;bottom:10px;height:56px;border-radius:6px;background:repeating-linear-gradient(90deg,#ffffff06 0 2px,transparent 2px 12px)}
/* Modulaire et DAW */
.mr-key{display:inline-block;padding:1px 8px;border-radius:6px;font:600 11px 'DM Mono',monospace;color:#0d111a}
.mr-key.midi,.mr-route .midi{background:#b89cff}.mr-key.cv,.mr-route .cv{background:#ffb35c}.mr-key.audio,.mr-route .audio{background:#6f9bff}.mr-key.clk,.mr-route .clk{background:#8be8bd}
.mr-ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.mr-ways article{min-width:0;padding:18px;border-radius:14px;background:#f3f5fa;border:1px solid var(--line)}
.mr-ways small{font:9.5px 'DM Mono';letter-spacing:.06em;color:var(--blue)}
.mr-ways h3{margin:6px 0 10px;font-size:18px}
.mr-ways p{margin:10px 0 0;font-size:13.5px;color:#434958}
.mr-route{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:10px;border-radius:10px;background:#151925}
.mr-route span{padding:5px 8px;border-radius:6px;font:600 11px Manrope,sans-serif;color:#0d111a}
.mr-route .d{background:#e7ebf3}.mr-route .m{background:#3a4152;color:#fff}
.mr-route .midi,.mr-route .cv,.mr-route .audio,.mr-route .clk{font:600 10px 'DM Mono',monospace}
.mr-route i{font-style:normal;color:#8f98aa}
.cc-lab{display:grid;gap:12px;margin:14px 0 18px;padding:16px;border-radius:18px;background:var(--ink);color:#fff}
.cc-lab button{padding:8px 12px;border:1px solid #ffffff1c;border-radius:9px;background:#1b202b;color:#e7ebf3;font:inherit;font-size:13px;font-weight:700;cursor:pointer}
.cc-lab .cc-play{background:var(--mint);border-color:var(--mint);color:var(--ink)}
.cc-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.cc-check{display:flex;align-items:center;gap:7px;font-size:13px;color:#cfd5e1;cursor:pointer}.cc-check input{accent-color:var(--mint);width:16px;height:16px}
.cc-ctrls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 18px}
.cc-ctrls label{display:grid;gap:4px;font-size:12.5px;color:#cfd5e1}.cc-ctrls output{font:600 12px 'DM Mono',monospace;color:#ffd36e}.cc-ctrls input{width:100%;accent-color:#ffb35c}
.cc-oct{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.cc-oct div{position:relative;display:grid;gap:4px;padding:10px 12px 18px;border-radius:10px;background:#ffffff0a;border:1px solid transparent}
.cc-oct div.cur{border-color:#ffd36e}
.cc-oct small{font:9px 'DM Mono',monospace;letter-spacing:.06em;color:#8f98aa}
.cc-oct b{font:600 16px 'DM Mono',monospace}.cc-oct .ok b{color:#8be8bd}.cc-oct .mid b{color:#ffd36e}.cc-oct .bad b{color:#ff9a7e}
.cc-oct i{position:absolute;left:12px;right:12px;bottom:8px;height:4px;border-radius:2px;background:#151925}
.cc-oct i:after{content:"";position:absolute;top:-3px;left:calc(50% + var(--x) * 1%);width:3px;height:10px;margin-left:-1px;background:#fff}
.cc-oct i:before{content:"";position:absolute;top:-2px;left:50%;width:1px;height:8px;background:#8be8bd}
.cc-lab .cc-status{margin:0;min-height:3em;font-size:13.5px;line-height:1.5;color:#e7ebf3}
@media(max-width:760px){.mr-ways,.cc-ctrls{grid-template-columns:1fr}.cc-oct{grid-template-columns:1fr 1fr}}