.sr-intro{padding-bottom:2.8rem}.sr-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:3rem;margin-top:1.8rem}.sr-heading h1{font-size:clamp(3.4rem,8vw,7rem);line-height:.93;letter-spacing:-.06em;margin:0}.sr-heading h1 em{font-style:normal;color:var(--brass-ink)}.sr-heading p{margin:.4rem 0 1.1rem}.sr-heading .lead{font-size:1.6rem}.sr-heading a{font-size:.9rem;text-underline-offset:5px}
.sr-quickstart{border:1px solid #786849;border-radius:13px;padding:1.25rem 1.5rem;background:var(--ink-raise);margin-bottom:2rem}.sr-quickstart h2{font-size:clamp(1.35rem,2.5vw,1.8rem);margin:0 0 1rem;color:var(--stone)}.sr-quickstart ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;list-style:none;padding:0;margin:0}.sr-quickstart li{display:grid;gap:.25rem;line-height:1.45}.sr-quickstart strong{color:var(--brass-hi)}.sr-quickstart span{color:var(--stone-dim);font-size:.9rem}
.sr-room{background:var(--ink);color:var(--stone);padding:2.5rem 0 3rem}.sr-room button{font:inherit;cursor:pointer}.sr-room button:focus-visible,.sr-room input:focus-visible,.sr-grid-scroll:focus-visible{outline:3px solid var(--brass-hi);outline-offset:5px}.sr-room input[type=range]{accent-color:var(--brass-hi);cursor:pointer;min-height:32px}.sr-room-top,.sr-under-pads,.sr-workbench-top,.sr-actions{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}.sr-volume{display:flex;align-items:center;gap:.6rem;font-size:.85rem}.sr-volume input{width:100px}.sr-volume output{width:3ch}.sr-pads{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin:1.5rem 0 .7rem}.sr-pad{isolation:isolate;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;border:1px solid var(--paper-edge);border-radius:80px 80px 13px 13px;background:var(--paper);color:var(--print);min-height:224px;padding:26px 8px 20px;box-shadow:0 7px 0 #0005;touch-action:manipulation;transition:background .15s,box-shadow .15s}.sr-pad img{width:82px;height:82px;object-fit:contain;position:relative;z-index:1}.sr-pad strong{font-size:.83rem;margin-top:.35rem}.sr-key{position:absolute;top:13px;font-family:var(--data);font-size:.65rem;color:var(--print-mute)}.sr-noise{font-weight:800;font-size:1.8rem;line-height:1.2;position:relative;z-index:1;letter-spacing:-.04em}.sr-pad:hover{background:#fff9e9}.sr-pad.is-sounding{background:#e5c77d;box-shadow:0 3px 0 #0005}.sr-pad.is-sounding img{animation:sr-wiggle .4s ease-out}.sr-ripple{position:absolute;width:90px;height:90px;top:54px;border:2px solid #7a5e17;border-radius:50%;opacity:0;z-index:0}.sr-pad.is-sounding .sr-ripple{animation:sr-ring .42s ease-out}.sr-under-pads{align-items:baseline;font-size:.8rem;color:var(--stone-dim);min-height:42px;margin-bottom:1.7rem}.sr-under-pads p{margin:0}.sr-under-pads [role=status]{text-align:right;max-width:65%}
.sr-workbench{border:1px solid #786849;background:var(--ink-raise);border-radius:13px;padding:1.8rem}.sr-workbench h2{font-size:clamp(1.5rem,3vw,2.3rem);margin:.6rem 0 0;letter-spacing:-.04em;color:var(--stone)}.sr-workbench .mono,.sr-room-top .mono{color:var(--brass-hi);font-size:.7rem}.sr-transport{display:flex;align-items:center;gap:1.1rem;flex-wrap:wrap}.sr-transport .btn{min-width:192px;justify-content:center;border:1px solid var(--brass-hi);background:var(--brass-hi);color:var(--strike)}.sr-transport label{display:grid;grid-template-columns:1fr 1fr;gap:0 .5rem;font-size:.7rem}.sr-transport input{width:120px;grid-row:2;grid-column:1/-1}.sr-transport output{text-align:right;white-space:nowrap}.sr-hint{font-size:.88rem;color:var(--stone-dim);margin:1.3rem 0}.sr-grid-scroll{overflow-x:auto;padding:6px;margin:0 -6px}.sr-grid{min-width:490px}.sr-row{display:grid;grid-template-columns:150px repeat(8,minmax(36px,1fr));gap:7px;margin-bottom:8px}.sr-row-name{display:flex;align-items:center;gap:9px;text-align:left;background:none;border:0;padding:0 5px;color:var(--stone);font-size:.8rem!important}.sr-row-name img{width:32px;height:32px;object-fit:contain}.sr-step{height:45px;border:1px solid #85704e;border-radius:5px;background:#302824;display:grid;place-items:center;touch-action:manipulation}.sr-step span{width:7px;height:7px;border-radius:50%;background:#ac9980;pointer-events:none}.sr-step:nth-of-type(4n+2){border-left-width:3px}.sr-step:hover{background:#493b2d}.sr-step[aria-pressed=true]{background:var(--brass-hi);border-color:var(--brass-hi)}.sr-step[aria-pressed=true] span{width:16px;height:16px;background:var(--strike);border-radius:3px;transform:rotate(45deg)}.sr-step.is-current{outline:2px solid var(--stone);outline-offset:1px}.sr-beats{align-items:center;color:var(--stone-dim);font-size:.67rem;font-family:var(--data);text-align:center;margin-bottom:13px}.sr-beats>span:first-child{text-align:left;padding-left:8px}.sr-beats .is-current{background:var(--brass-hi);color:var(--strike);border-radius:4px}
.sr-presets{margin-top:1.5rem;border-top:1px solid #786849;padding-top:1.5rem}.sr-presets>div{display:flex;gap:8px;flex-wrap:wrap;margin-top:.7rem}.sr-presets button{border:1px solid #978160;color:var(--stone);background:transparent;border-radius:30px;padding:10px 16px;font-size:.83rem}.sr-presets button:hover{background:#40342a}.sr-actions{justify-content:flex-start;flex-wrap:wrap;gap:9px;margin-top:1.5rem}.sr-actions .btn{color:var(--stone);border-color:#978160;background:transparent;font-size:.76rem;padding:12px 15px;min-height:44px}.sr-actions .btn:disabled{opacity:.6;cursor:wait}.sr-actions>span{font-size:.75rem;color:var(--stone-dim);flex-basis:100%;margin-top:.5rem}.sr-share{display:block;margin-top:1rem;font-size:.8rem;color:var(--stone-dim)}.sr-share[hidden]{display:none}.sr-share input{display:block;width:100%;padding:12px;margin-top:8px;background:var(--paper);color:var(--print);border:1px solid var(--paper-edge)}.sr-game-notes{display:grid;grid-template-columns:1fr 1fr;gap:3rem;color:var(--stone-dim);font-size:.9rem;line-height:1.65;margin-top:1.6rem}.sr-game-notes strong{color:var(--stone)}.sr-after{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem}.sr-after h2{margin-top:1rem}.sr-after details{align-self:center;font-size:.9rem;line-height:1.7}.sr-after summary{cursor:pointer;font-weight:700;min-height:44px}.sr-after a{text-underline-offset:4px}
@keyframes sr-wiggle{0%{transform:rotate(-7deg)}40%{transform:rotate(4deg)}100%{transform:rotate(0)}}@keyframes sr-ring{0%{opacity:.8;transform:scale(.6)}100%{opacity:0;transform:scale(1.6)}}
@media(max-width:900px){.sr-pads{gap:8px}.sr-pad{min-height:185px}.sr-pad img{width:66px;height:66px}.sr-pad strong{font-size:.67rem}.sr-noise{font-size:1.5rem}.sr-workbench-top{align-items:start;flex-direction:column}.sr-transport{width:100%;justify-content:space-between}.sr-row{grid-template-columns:125px repeat(8,minmax(36px,1fr));gap:5px}.sr-row-name{font-size:.7rem!important;gap:5px}}
@media(max-width:600px){.sr-heading{grid-template-columns:1fr;gap:1.6rem}.sr-heading h1{font-size:4rem}.sr-quickstart ol{grid-template-columns:1fr}.sr-quickstart li{border-top:1px solid #786849;padding-top:.65rem}.sr-room-top{align-items:flex-start;flex-direction:column;gap:.5rem}.sr-pads{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 9px}.sr-pad{min-height:177px}.sr-pad strong{font-size:.75rem}.sr-under-pads{flex-direction:column;gap:5px;min-height:60px}.sr-under-pads [role=status]{max-width:100%;text-align:left}.sr-workbench{padding:1.1rem}.sr-row{grid-template-columns:97px repeat(8,minmax(38px,1fr))}.sr-row-name{flex-direction:column;gap:1px;align-items:flex-start;font-size:.67rem!important}.sr-row-name img{display:none}.sr-step{height:44px}.sr-beats{font-size:.6rem}.sr-transport{gap:.7rem}.sr-transport .btn{min-width:170px;font-size:.8rem}.sr-transport input{width:103px}.sr-game-notes,.sr-after{grid-template-columns:1fr;gap:1rem}.sr-presets button{padding:11px 12px}.sr-actions .btn{flex-grow:1}}
@media(prefers-reduced-motion:reduce){.sr-pad.is-sounding img,.sr-pad.is-sounding .sr-ripple{animation:none}.sr-pad{transition:none}}