.sv-mixer{--svm-ink:#203b3f;--svm-teal:#146658;box-sizing:border-box;container-type:inline-size;margin:28px 0 36px;padding:0;background:#f5f4ee;border:1px solid #d9dfd7;border-radius:18px;color:var(--svm-ink);font:14px/1.5 "Open Sans",Arial,sans-serif;overflow:hidden;box-shadow:0 6px 24px #183e3110;text-align:left;clear:both}
.sv-mixer *{box-sizing:border-box}
.sv-mixer .svm-head{padding:18px 24px;background:linear-gradient(120deg,#123e39,#1e5f53);color:#fff}
.sv-mixer .svm-head h2{font-family:inherit;font-size:22px;line-height:1.3;font-weight:750;color:#fff;margin:0;padding:0;letter-spacing:-.3px;text-transform:none;border:0}
.sv-mixer button{font-family:inherit;font-size:12px;line-height:1.3;font-weight:650;text-transform:none;letter-spacing:0;min-height:38px;border-radius:8px;border:1px solid #ccd7d0;color:var(--svm-ink);background:#fff;padding:7px 11px;cursor:pointer;box-shadow:none;margin:0;transition:background .15s,border-color .15s;touch-action:manipulation}
.sv-mixer button:hover{background:#edf3ee;border-color:#83a795;color:#173c34}
.sv-mixer button:focus-visible,.sv-mixer input:focus-visible,.sv-mixer summary:focus-visible{outline:3px solid #d0a348;outline-offset:3px}
.sv-mixer button:disabled{opacity:.6;cursor:wait}
.sv-mixer .svm-console{display:grid;grid-template-columns:138px minmax(120px,1fr) 120px;gap:23px;align-items:center;padding:23px 24px 18px}
.sv-mixer .svm-play{background:#145d50;color:#fff;border-color:#145d50;min-height:49px;font-size:14px;display:flex;align-items:center;justify-content:center;gap:10px}
.sv-mixer .svm-play:hover{background:#0b473c;color:#fff}
.sv-mixer .svm-play [data-play-icon]{font-size:13px}
.sv-mixer[data-playback=playing] .svm-play [data-play-icon]{font-size:18px;line-height:1}
.sv-mixer .svm-tempo>div:first-child{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:11px;font-weight:650}
.sv-mixer .svm-tempo output{font-size:20px;font-weight:750;color:#173e37;font-variant-numeric:tabular-nums}
.sv-mixer .svm-tempo small{font-size:9px;color:#536960}
.sv-mixer .svm-tempo-input{display:flex;align-items:center;gap:9px}
.sv-mixer .svm-tempo-input button{min-height:30px;min-width:30px;padding:2px;font-size:19px;border-radius:50%}
.sv-mixer input[type=range]{appearance:auto;accent-color:var(--svm-teal);padding:0;border:0;box-shadow:none;width:100%;min-width:0;height:24px;margin:0;background:transparent;cursor:pointer}
.sv-mixer fieldset{border:0;margin:0;padding:0;min-width:0}
.sv-mixer legend{font-family:inherit;font-size:11px;font-weight:650;border:0;margin:0 0 8px;padding:0;line-height:1}
.sv-mixer .svm-clave>div{display:flex;gap:3px;background:#e5eae2;padding:3px;border-radius:9px}
.sv-mixer .svm-clave button{padding:7px 10px;flex:1;border-color:transparent;background:transparent;min-height:32px}
.sv-mixer .svm-clave button[aria-pressed=true]{background:#fff;color:#144d40;box-shadow:0 1px 4px #193c3820}
.sv-mixer .svm-beat-row{display:flex;align-items:center;gap:20px;padding:0 24px 20px;border-bottom:1px solid #dde2d8}
.sv-mixer .svm-beat-row>span{font-size:10px;font-weight:600;color:#5d7066;white-space:nowrap}
.sv-mixer .svm-beats{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;flex:1}
.sv-mixer .svm-beats span{display:grid;place-items:center;border:1px solid #d6ded3;border-radius:7px;height:29px;background:#fff;font-size:12px;font-weight:700;color:#66796c;font-variant-numeric:tabular-nums}
.sv-mixer .svm-beats span:nth-child(5){margin-left:6px}
.sv-mixer .svm-beats span.is-current{color:#fff;background:#246e5c;border-color:#246e5c}
.sv-mixer .svm-toolbar{padding:14px 24px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sv-mixer .svm-toolbar>span{font-size:11px;color:#52685b;font-weight:600}
.sv-mixer .svm-toolbar>div{display:flex;gap:5px}
.sv-mixer .svm-toolbar button{font-size:10px;min-height:29px;padding:5px 9px;background:transparent;border-color:#d4dcd0}
.sv-mixer .svm-instruments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:11px;padding:0 24px 18px}
.sv-mixer .svm-instrument{background:#fff;border:1px solid #dce2d8;border-radius:12px;padding:11px 12px 9px;min-width:0;box-shadow:0 2px 4px #1c472505}
.sv-mixer .svm-toggle{display:grid;grid-template-columns:60px 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;border:0;padding:0;width:100%;text-align:left;background:transparent;min-height:54px}
.sv-mixer .svm-toggle:hover{background:transparent}
.sv-mixer .svm-toggle img{display:block;width:60px;height:60px;max-width:none;object-fit:contain;margin:0;grid-row:1/3;filter:drop-shadow(0 2px 1px #2f452511)}
.sv-mixer .svm-instrument-name{font-size:14px;line-height:1.2;font-weight:750;align-self:end;padding:0 0 5px;color:#213a36}
.sv-mixer .svm-switch{display:flex;gap:5px;align-items:center;align-self:start;font-size:9px;color:#496956}
.sv-mixer .svm-switch i{position:relative;width:24px;height:14px;background:#3d775d;border-radius:12px}
.sv-mixer .svm-switch i:after{content:"";position:absolute;width:10px;height:10px;top:2px;right:2px;border-radius:50%;background:#fff}
.sv-mixer .svm-toggle[aria-pressed=false] .svm-switch i{background:#87918b}
.sv-mixer .svm-toggle[aria-pressed=false] .svm-switch i:after{right:12px}
.sv-mixer .svm-mini-pattern{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:3px;height:13px;align-items:center;margin:10px 0 8px}
.sv-mixer .svm-mini-pattern i{background:#eceee8;border-radius:2px;height:4px}
.sv-mixer .svm-mini-pattern i.is-hit{height:8px;background:var(--svm-accent);opacity:.55}
.sv-mixer .svm-mini-pattern i.is-current{height:13px;background:var(--svm-accent);opacity:1}
.sv-mixer .svm-track-controls{display:flex;align-items:center;gap:8px}
.sv-mixer .svm-track-controls input{accent-color:var(--svm-accent);flex:1}
.sv-mixer .svm-track-controls button{padding:5px 8px;font-size:10px;min-height:29px;border-color:#e0e5db;background:#fafbf7}
.sv-mixer .svm-track-controls button[aria-pressed=true]{background:#245e50;color:#fff;border-color:#245e50}
.sv-mixer .svm-instrument.is-muted{background:#eeefe9}
.sv-mixer .is-muted .svm-mini-pattern,.sv-mixer .is-muted img{opacity:.38}
.sv-mixer .svm-instrument.is-sounding:not(.is-muted){border-color:var(--svm-accent)}
.sv-mixer .svm-status:not(.is-visible){position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.sv-mixer .svm-status.is-visible{padding:0 24px 18px;margin:0;font-size:12px;line-height:1.6;color:#8c382b}
.sv-mixer .svm-about{border-top:1px solid #dce2d8;padding:0 24px;background:#efefe7}
.sv-mixer .svm-about summary{padding:13px 0;cursor:pointer;font-size:11px;font-weight:650;color:#415b4c}
.sv-mixer .svm-about>div{padding:0 0 10px}
.sv-mixer .svm-about p,.sv-mixer .svm-about li{font-size:12px;line-height:1.65;margin:0 0 12px;color:#496252}
.sv-mixer .svm-about ul{padding-left:20px;margin:0}
.sv-mixer .svm-about a{color:#195f4e;text-decoration:underline}
@container (max-width:570px){.sv-mixer .svm-console{grid-template-columns:1fr 1fr;gap:17px}.sv-mixer .svm-tempo{grid-column:1/-1;grid-row:2}.sv-mixer .svm-clave{justify-self:end;min-width:120px}.sv-mixer .svm-instruments{grid-template-columns:repeat(2,minmax(0,1fr))}.sv-mixer .svm-head h2{font-size:20px}.sv-mixer .svm-beat-row{gap:10px}.sv-mixer .svm-beats{gap:4px}}
@container (max-width:365px){.sv-mixer .svm-head{padding:16px}.sv-mixer .svm-console{padding:18px 16px 15px}.sv-mixer .svm-instruments{padding:0 12px 16px;gap:8px}.sv-mixer .svm-instrument{padding:9px 8px}.sv-mixer .svm-toggle{column-gap:5px;grid-template-columns:38px 1fr}.sv-mixer .svm-toggle img{width:38px}.sv-mixer .svm-instrument-name{font-size:12px}.sv-mixer .svm-beat-row,.sv-mixer .svm-toolbar,.sv-mixer .svm-status.is-visible{padding-left:16px;padding-right:16px}.sv-mixer .svm-beat-row>span{display:none}.sv-mixer .svm-toolbar{flex-wrap:wrap}.sv-mixer .svm-mini-pattern{gap:2px}.sv-mixer .svm-about{padding:0 16px}}
@media(prefers-reduced-motion:reduce){.sv-mixer *{transition:none!important}.sv-mixer .svm-instrument.is-sounding:not(.is-muted){border-color:#dce2d8}}

.sv-mixer button{color:var(--svm-ink)!important}
.sv-mixer .svm-play,.sv-mixer .svm-play:hover,.sv-mixer .svm-track-controls button[aria-pressed=true]{color:#fff!important}