*{box-sizing:border-box}body{margin:0;background:#e9e5dc;color:#30362e;font-family:Arial,'Microsoft YaHei',sans-serif}header{display:flex;justify-content:space-between;align-items:center;padding:24px 5vw;border-bottom:1px solid #b9bbae;font-size:11px;letter-spacing:2px}button{font:inherit;cursor:pointer;border:1px solid #727f68;background:transparent;color:inherit;padding:11px 18px;border-radius:24px}button:not(.drum):hover{background:#d6ddc9}main{max-width:1120px;margin:auto;padding:36px 36px 20px}.eyebrow{font-size:10px;letter-spacing:3px;color:#6f7867}.intro h1{font-family:Georgia,serif;font-weight:normal;font-size:90px;letter-spacing:-6px;margin:2px 0}.intro h1 span{color:#d66537}.intro p{font-size:13px;color:#6b7266}.instruments{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:28px 0 40px}.label{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid #a4ad99;padding-top:14px}.label h2{font-size:15px;letter-spacing:3px;font-weight:normal}.label span{font-size:10px;color:#77816c}.drum{position:relative;display:block;width:100%;aspect-ratio:1;margin:0 auto 8px;border:0;border-radius:0;padding:0;outline:none;box-shadow:none;background: url(assets/tabla-drums-transparent-v2.png?v=2) left center / 200% 100% no-repeat;touch-action:none;user-select:none;cursor:crosshair}.drum:hover{background-color:transparent}.high .drum{background-position:right center}.drum:focus-visible{outline:1px solid #77816c;outline-offset:4px}.drum:before{display:none}.drum.hit{animation:hit .22s ease-out}.drum i{position:absolute;left:var(--x,50%);top:var(--y,50%);width:25px;height:25px;border:2px solid #e07742;border-radius:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none}.drum:active i{opacity:1}@keyframes hit{0%{transform:translateY(1px) scale(.996)}100%{transform:scale(1)}}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.controls label{font-size:10px;letter-spacing:1px}.controls output{float:right;color:#8b6440}input{width:100%;margin:15px 0 0;accent-color:#697e4e;cursor:ew-resize}.pressure{height:3px;background:#cbd0c1;margin-top:18px}.pressure div{height:100%;width:0;background:#d56a3c;transition:width .06s}footer{display:flex;justify-content:space-between;gap:25px;border-top:1px solid #b9bbae;padding-top:22px;font-size:11px}footer b{font-weight:normal;color:#535f47}footer p{line-height:1.9;color:#7d8276}@media(max-width:650px){main{padding:24px 20px}.intro h1{font-size:65px}.instruments{gap:20px}.drum{width:100%;border:0}.controls{grid-template-columns:1fr;gap:10px}.label h2{font-size:11px}.label span{display:none}footer{flex-direction:column}header{padding:16px 20px;font-size:9px}}

.bols{display:flex;gap:7px;margin:0 0 22px;justify-content:center}.bols button{font-size:11px;padding:7px 12px}.bols button[aria-pressed=true]{background:#5e704d;color:#faf7ed;border-color:#5e704d}

.midiPanel{border-top:1px solid #b9bbae;padding:18px 0 24px;font-size:11px}.midiPanel summary{cursor:pointer;letter-spacing:2px}.midiToolbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px;align-items:center}.midiToolbar select{max-width:100%;padding:10px;background:#e9e5dc;border:1px solid #727f68;border-radius:6px;color:inherit}.midiPanel p{line-height:1.8;color:#6b7266}.midiMap{display:flex;flex-wrap:wrap;gap:8px}.midiMap span{border:1px solid #b9bbae;padding:7px 12px;border-radius:4px}button:disabled{opacity:.5;cursor:default}

.drum i{width:32px;height:22px;box-shadow:0 0 12px #e0774266}.bols{flex-wrap:wrap}.label{position:relative;z-index:1}.instruments{gap:50px}@media(max-width:650px){.instruments{gap:16px}.bols{gap:4px}.bols button{padding:6px 9px}}

.drum{mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 2%,#000 97%,transparent);mask-composite:intersect}

.fxPanel{border-top:1px solid #b9bbae;padding:18px 0 28px;font-size:11px}.fxPanel summary{cursor:pointer;letter-spacing:2px}.fxHelp{color:#6b7266;line-height:1.8;margin:12px 0 20px}#fxControls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}.fxHead{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:20px;letter-spacing:1px}.fxHead button{padding:5px 10px;font-size:10px}.fxHead button[aria-pressed=true]{background:#5e704d;color:#faf7ed}.fxCard label{display:block;margin-top:15px;color:#535f47}.fxCard output{float:right;color:#8b6440}.fxCard input{display:block;margin-top:9px}@media(max-width:650px){#fxControls{grid-template-columns:1fr;gap:24px}.fxCard+.fxCard{border-top:1px solid #cbd0c1;padding-top:20px}}

/* Shared instrument heading geometry keeps tab switches visually stable. */
body{background:#eee9df}main{max-width:1160px;padding-left:36px;padding-right:36px}.intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,340px);align-items:center;column-gap:28px;min-height:176px;padding:0 0 24px}.intro .eyebrow{display:block;font-size:10px;letter-spacing:3px;line-height:16px;color:#7a8172}.intro h1{font:normal 100px/1.1 Georgia,serif;letter-spacing:-6px;margin:3px 0 0}.intro h1 span{color:#c66b3d}.intro p{margin:0;color:#7a8172;font-size:13px;line-height:2}.instruments{margin-top:0}@media(max-width:650px){main{padding-left:18px;padding-right:18px}.intro{grid-template-columns:1fr;grid-template-rows:auto 52px;gap:14px;min-height:208px;padding-bottom:20px}.intro .eyebrow{font-size:8px}.intro h1{font-size:78px}.intro p{margin:0;align-self:start}}

.drum{mask-image:none}