.drum-intro{padding:46px 0 28px}.drum-intro .eyebrow{margin-bottom:15px}.drum-intro h1{font-size:clamp(43px,5.8vw,83px);max-width:900px}.drum-intro .lead{max-width:700px;font-size:17px;margin-top:20px}.drum-stage{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);border:1px solid var(--navy);margin:12px 0 24px}.drum-instrument{background:var(--blue);color:var(--cream);padding:30px 35px 26px;display:flex;flex-direction:column;align-items:center;position:relative;overflow:hidden}.drum-stage-label{display:flex;justify-content:space-between;align-items:center;width:100%;font-size:10px;letter-spacing:.1em;gap:15px}.drum-stage-label span:last-child{color:var(--acid)}.drum-face{display:flex;flex-direction:column;align-items:center;justify-content:center;width:min(330px,78vw);aspect-ratio:1;border-radius:50%;border:3px solid var(--navy);outline:1px solid #eff4c85e;outline-offset:14px;background:var(--acid);color:var(--navy);box-shadow:0 11px 0 var(--navy),inset 0 0 0 13px var(--acid),inset 0 0 0 14px #07152f5e;margin:42px 0 35px;padding:35px;touch-action:manipulation;transition:transform .12s ease,box-shadow .12s ease;-webkit-user-select:none;user-select:none}.drum-face:focus-visible{outline:4px solid white;outline-offset:14px}.drum-face:disabled{opacity:1;cursor:wait}.drum-face.is-hit{transform:translateY(7px);box-shadow:0 4px 0 var(--navy),inset 0 0 0 13px var(--acid),inset 0 0 0 14px #07152f5e}.drum-face:disabled .drum-symbol{opacity:.65}.drum-symbol{font-family:var(--head);font-size:108px;font-weight:700;line-height:.9;letter-spacing:-10px;padding-right:8px}.drum-face .drum-name{font-size:11px;font-weight:700;letter-spacing:.2em;margin:19px 0 22px}.drum-face .tap-label{font-size:12px;font-weight:600;line-height:1.5;min-height:18px}.drum-sound{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:600;cursor:pointer;min-height:44px}.drum-sound input{width:18px;height:18px;accent-color:var(--acid);cursor:pointer}.drum-sound input:focus-visible{outline-color:white}.drum-sound-note{font-size:10px;color:#d7defd;margin-top:4px;text-align:center}.drum-readout{background:var(--paper);padding:36px;display:flex;flex-direction:column;justify-content:center;min-width:0}.drum-stat{padding:19px 0 26px;border-bottom:1px solid var(--line)}.drum-stat:first-child{padding-top:0}.drum-stat>span{display:block;font-size:10px;letter-spacing:.12em;font-weight:700;color:var(--muted);margin-bottom:14px}.drum-stat strong{display:block;font-family:var(--head);font-size:clamp(45px,5.2vw,76px);font-weight:500;letter-spacing:-.06em;line-height:1.05;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.drum-stat small{display:block;font-size:10px;color:var(--muted);line-height:1.6;margin-top:12px}.drum-stat-here{padding-top:25px}.drum-stat-here strong{font-size:44px;color:var(--blue)}.drum-readout .drum-status{font-size:13px;line-height:1.6;min-height:63px;margin:23px 0 15px;border-left:3px solid var(--blue);padding-left:14px}.drum-readout .plain{align-self:flex-start;font-size:12px;padding:7px 0}.drum-context{display:flex;justify-content:space-between;align-items:flex-start;gap:30px;margin:0 0 38px}.drum-context p{max-width:760px;font-size:11px;color:var(--muted)}.drum-context>a{font-size:11px;white-space:nowrap}.drum-next{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0 60px}.drum-next article{border:1px solid var(--line);border-top:4px solid var(--blue);padding:27px;background:var(--paper)}.drum-next article:last-child{border-top-color:var(--green)}.drum-next .eyebrow{margin-bottom:15px;color:var(--green)}.drum-next h2{font-size:34px;margin-bottom:16px}.drum-next p{font-size:13px;line-height:1.7}.drum-next a{font-size:12px;font-weight:600}.drum-next .actions{gap:18px;margin-bottom:0}.drum-noscript{border:1px solid var(--line);padding:20px;margin:20px 0}
@media(max-width:760px){.drum-intro{padding:30px 0 21px}.drum-intro h1{font-size:clamp(39px,10.3vw,65px)}.drum-intro .lead{font-size:15px;margin-top:17px}.drum-stage{grid-template-columns:1fr;margin:6px 0 18px}.drum-instrument{padding:20px 22px 20px}.drum-stage-label{font-size:8px}.drum-face{width:min(235px,65vw);margin:30px 0 24px;padding:24px;outline-offset:10px;box-shadow:0 8px 0 var(--navy),inset 0 0 0 10px var(--acid),inset 0 0 0 11px #07152f5e}.drum-face:focus-visible{outline-offset:10px}.drum-symbol{font-size:80px;letter-spacing:-8px}.drum-face .drum-name{font-size:9px;margin:14px 0 17px}.drum-face .tap-label{font-size:11px}.drum-readout{padding:25px}.drum-stat strong{font-size:56px}.drum-stat-here strong{font-size:38px}.drum-stat{padding-bottom:20px}.drum-stat-here{padding-top:20px}.drum-readout .drum-status{min-height:0;font-size:12px;margin-top:20px}.drum-context{flex-direction:column;gap:12px;margin-bottom:28px}.drum-context p{font-size:10px}.drum-next{grid-template-columns:1fr;margin:0 0 40px;gap:12px}.drum-next article{padding:23px}.drum-next h2{font-size:30px}.drum-next p{font-size:12px}}
@media(prefers-reduced-motion:reduce){.drum-face{transition:none}.drum-face.is-hit{transform:none}}
@media print{.drum-instrument{display:none}.drum-stage{grid-template-columns:1fr}.drum-readout{padding:20px}.drum-next{display:block}}