/* Pourquoi le MIDI, si le montage de samples marche déjà ? (midi.html#pourquoi-le-midi) */
.sm-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}
.sm-compare article{min-width:0;padding:20px;border-radius:14px;background:#f3f5fa;border:1px solid var(--line)}
.sm-compare small{font:10px 'DM Mono';letter-spacing:.06em;color:var(--blue)}
.sm-compare h3{margin:6px 0 8px;font-size:19px}
.sm-compare ul{margin:0;padding-left:18px;display:grid;gap:5px;font-size:14px;color:#434958}
.sm-lab-title{margin:28px 0 6px;font-size:21px;scroll-margin-top:110px}
.sm-lab{display:grid;gap:12px;margin:14px 0 18px;padding:16px;border-radius:18px;background:var(--ink);color:#fff}
.sm-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}
.sm-lab button[aria-pressed=true]{background:#1f2a40;border-color:#6f9bff}
.sm-lab button:disabled{opacity:.45;cursor:wait}
.sm-lab .sm-play{background:var(--mint);border-color:var(--mint);color:var(--ink);min-width:96px}
.sm-top{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.sm-seg{display:flex;flex-wrap:wrap;gap:5px}
.sm-tasks{display:grid;gap:6px;padding:10px 12px;border-radius:12px;background:#ffffff0a}
.sm-tasks small{font:9.5px 'DM Mono',monospace;letter-spacing:.08em;color:#ffd36e}
.sm-panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.sm-pane{min-width:0;padding:12px;border-radius:12px;border:1px solid}
.sm-pane.samples{border-color:#ffb35c55;background:#ffb35c0a}
.sm-pane.midi{border-color:#8aabff55;background:#8aabff0a}
.sm-pane header{display:grid;gap:2px;margin-bottom:8px}
.sm-pane header small{font:9.5px 'DM Mono',monospace;letter-spacing:.08em}
.sm-pane.samples header small{color:#ffb35c}.sm-pane.midi header small{color:#8aabff}
.sm-pane header b{font-size:13px}
.sm-kit{min-height:1.2em;font:600 11.5px 'DM Mono',monospace;color:#8be8bd}
.sm-grid{--p:-10%;display:grid;gap:4px}
.sm-lane{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:6px}
.sm-lane>b{font-size:11.5px;line-height:1.2}
.sm-lane>b small{display:block;font:400 9.5px 'DM Mono',monospace;color:#8f98aa}
.sm-cells{position:relative;height:30px;border-radius:6px;background:#151925;overflow:hidden}
.sm-cells>i{position:absolute;top:0;bottom:0;width:1px;background:#ffffff12}
.sm-cells>i.bar{background:#ffffff40}
.sm-cells:after{content:"";position:absolute;top:0;bottom:0;left:var(--p);width:2px;background:#ffd36e}
.sm-clip{position:absolute;top:3px;bottom:3px;border-radius:3px;opacity:var(--g);transition:background .15s}
.sm-clip.k1{background:#ffb35c;border:1px solid #ffd9a8}
.sm-clip.k2{background:#e05cff;border:1px solid #f3b8ff}
.sm-clip.rev{background:linear-gradient(90deg,transparent,#ff7048);border-color:#ff7048}
.sm-note{position:absolute;top:3px;bottom:3px;display:flex;align-items:flex-end;border-radius:2px;background:#8aabff33}
.sm-note em{display:block;width:100%;border-radius:2px;background:#8aabff;transition:height .2s}
.sm-note.rev em{background:#ff7048}
.sm-count{margin:8px 0 0;font-size:12.5px;color:#b7c0ce}
.sm-count span{font:700 16px 'DM Mono',monospace;color:#fff}
.sm-score{width:100%;border-collapse:collapse;font-size:13px}
.sm-score th{padding:6px 8px;text-align:left;font:9.5px 'DM Mono',monospace;letter-spacing:.06em;color:#8f98aa;border-bottom:1px solid #ffffff22}
.sm-score td{padding:6px 8px;border-bottom:1px solid #ffffff10;color:#e7ebf3}
.sm-score td:not(:first-child){font:600 13px 'DM Mono',monospace}
.sm-lab .sm-status{margin:0;min-height:3em;font-size:13.5px;line-height:1.5;color:#e7ebf3}
.sm-draw{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:12px 0}
.sm-draw article{min-width:0;padding:16px;border-radius:13px;background:#fff;border:1px solid var(--line)}
.sm-draw small{font:9.5px 'DM Mono';letter-spacing:.06em;color:var(--blue)}
.sm-draw b{display:block;margin:5px 0}
.sm-draw p{margin:0;font-size:13.5px;color:#434958}
@media(max-width:800px){.sm-panes,.sm-compare,.sm-draw{grid-template-columns:1fr}}
@media(max-width:480px){.sm-lane{grid-template-columns:64px 1fr}.sm-lane>b{font-size:10.5px}}