/* REWIND rhythm sampler: all hardware and interface styles are local. */
.rw-drums{--dr-ink:#f4e9db;--dr-muted:#b8a8b6;--dr-pink:#e58bbb;background:#211b23;color:var(--dr-ink);padding:42px 16px 48px;container-type:inline-size;scroll-margin-top:20px;font:400 14px/1.5 Arial,Helvetica,sans-serif}.rw-drums *{box-sizing:border-box}.rw-drums__inner{max-width:1100px;margin:auto}.rw-drums__intro{max-width:650px;margin:0 auto 28px;text-align:center}.rw-drums__eyebrow{color:var(--dr-pink);font-size:9px;letter-spacing:.18em;font-weight:600;margin:0 0 14px}.rw-drums h2{margin:0;color:inherit}.rw-drums__copy{color:var(--dr-muted);font-size:13px;line-height:1.65;margin:14px 0}.rw-drums__files{font-size:10px;color:#dbc8d4;margin:0;letter-spacing:.025em}.rw-drums__files>span{color:#a46d8e;margin:0 8px}.rw-drums rewind-drum-machine{display:block;max-width:820px;margin:auto}.rw-drums__hardware{position:relative;padding:22px 16px 15px;border:1px solid #71656e;border-radius:12px;background:linear-gradient(115deg,#514850,#393139 60%,#433841);box-shadow:inset 0 2px 1px #ffffff21,inset 0 -5px 0 #211c24,0 14px 25px #0b080b55}.rw-drums__screw{position:absolute;width:5px;height:5px;border-radius:50%;background:#1f1a20;box-shadow:0 1px #81717a}.rw-drums__screw:after{content:'';position:absolute;left:1px;right:1px;top:2px;height:1px;background:#73616e;transform:rotate(-35deg)}.rw-drums__screw--tl{top:8px;left:8px}.rw-drums__screw--tr{top:8px;right:8px}.rw-drums__screw--bl{bottom:10px;left:8px}.rw-drums__screw--br{bottom:10px;right:8px}.rw-drums__face{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 3px 15px}.rw-drums__model{font-size:17px;font-weight:700;letter-spacing:-.04em;color:#efb2d2;display:block}.rw-drums__machine-label{display:block;font-size:7px;letter-spacing:.19em;color:#d2bccb;margin-top:1px}.rw-drums__serial{font-size:8px;letter-spacing:.1em;color:#cbb9c5}.rw-drums__display{display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 8px;background:#211c24;border:1px solid #74616f;border-radius:3px;padding:11px 12px;margin-bottom:18px;box-shadow:inset 0 2px 5px #0005;color:#e7cfde}.rw-drums__display-label{font-size:7px;letter-spacing:.14em;color:#bca2b3;grid-column:1/-1}.rw-drums [data-drum-display]{font-size:13px;font-weight:600}.rw-drums__display-note{font-size:8px;color:#c2a5b7;grid-column:1/-1}.rw-drums__pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;background:#29232c;padding:8px;border-radius:5px;border:1px solid #221c24;box-shadow:inset 0 2px 5px #0006}.rw-drums button{font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}.rw-drums__pad{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:7px;aspect-ratio:1;min-height:58px;padding:7px 6px 10px;border:1px solid #8a7b88;border-bottom:4px solid #403541;border-radius:5px;background:#736572;color:#fff0e4;box-shadow:inset 0 1px #c4adc040,0 2px 2px #0006;font-size:9px;line-height:1.2;text-align:left;transition:background-color 140ms,transform 100ms,border-color 140ms}.rw-drums__pad-number{font-size:7px;color:#e2cedc;letter-spacing:.06em}.rw-drums__pad-led{position:absolute;top:8px;right:6px;width:3px;height:3px;background:#b18b9f;border-radius:50%}.rw-drums__pad.is-hit,.rw-drums__pad:active{background:#b12879;border-color:#ed99c9;border-bottom-color:#76214f;transform:translateY(2px);box-shadow:inset 0 1px #ffc9e550}.rw-drums__pad.is-hit .rw-drums__pad-led{background:#fff0dc}.rw-drums__foot{display:flex;justify-content:space-between;gap:8px;margin:14px 3px 0;color:#cbb5c3;font-size:7px;letter-spacing:.08em}.rw-drums__loops{padding:28px 2px 0}.rw-drums__loop-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:15px}.rw-drums h3{margin:0;color:inherit}.rw-drums__loop-header>span{max-width:110px;text-align:right;font-size:7px;letter-spacing:.12em;color:var(--dr-muted)}.rw-drums__loop-list{border-top:1px solid #b69cab3b}.rw-drums__loop-list button{display:flex;align-items:center;gap:13px;width:100%;min-height:48px;background:transparent;color:#dacbd5;border:0;border-bottom:1px solid #b69cab3b;text-align:left;font-size:12px;padding:10px 4px}.rw-drums__loop-list button>span:first-child{font-size:8px;color:#b59aa9}.rw-drums__loop-list button[aria-pressed=true]{color:#f2a8d0}.rw-drums__loop-dot{margin-left:auto;width:5px;height:5px;border-radius:50%;background:transparent}.rw-drums__loop-list button[aria-pressed=true] .rw-drums__loop-dot{background:#e58bbb}.rw-drums__transport{display:flex;align-items:center;gap:14px;padding:18px 3px 0}.rw-drums [data-drum-play]{display:grid;place-items:center;flex-shrink:0;width:44px;height:44px;border-radius:50%;background:transparent;border:1px solid #a17e94;color:#edb6d4;font-size:14px}.rw-drums [data-drum-play]:disabled{cursor:not-allowed;color:#947a8c;border-color:#6f5c69}.rw-drums__timeline{flex:1;min-width:0}.rw-drums [data-loop-title]{display:block;font-size:10px;margin-bottom:10px;color:#e6cedd}.rw-drums [data-drum-seek]{appearance:none;display:block;width:100%;height:2px;margin:0;background:#6f5365;opacity:1}.rw-drums [data-drum-seek]::-webkit-slider-thumb{appearance:none;width:5px;height:5px;background:#bd91ac;border-radius:50%}.rw-drums [data-loop-status]{font-size:8px;color:var(--dr-muted);margin:7px 0 0}.rw-drums :focus-visible{outline:2px solid #f4b5d9;outline-offset:4px}
@container(min-width:750px){.rw-drums__intro{margin-bottom:36px}.rw-drums__copy{font-size:14px}.rw-drums__hardware{padding:30px 36px 23px;border-radius:14px}.rw-drums__model{font-size:24px}.rw-drums__machine-label{font-size:8px}.rw-drums__serial{font-size:10px}.rw-drums__face{padding-bottom:20px}.rw-drums__display{grid-template-columns:120px 1fr auto;padding:14px 18px;margin-bottom:24px}.rw-drums__display-label,.rw-drums__display-note{grid-column:auto}.rw-drums__display-note{font-size:10px}.rw-drums__pads{gap:15px;padding:14px}.rw-drums__pad{aspect-ratio:1.45;min-height:94px;padding:12px 13px 16px;font-size:13px;border-radius:7px}.rw-drums__pad-number{font-size:9px}.rw-drums__pad-led{right:12px;top:13px;width:4px;height:4px}.rw-drums__foot{font-size:8px;margin-top:20px}.rw-drums__loops{padding-top:34px}.rw-drums__loop-header>span{max-width:none;font-size:8px}.rw-drums__loop-list{display:grid;grid-template-columns:1fr 1fr;column-gap:28px}.rw-drums__loop-list button{min-height:52px;font-size:13px}.rw-drums__transport{max-width:520px;margin:auto;padding-top:22px}}
@media(hover:hover){.rw-drums__pad:hover{border-color:#d5aec6}.rw-drums__loop-list button:hover{color:#f5b2d8}}
@media(prefers-reduced-motion:reduce){.rw-drums__pad{transition:none}.rw-drums__pad.is-hit,.rw-drums__pad:active{transform:none}}

.rw-drums__preview-label{font-size:9px;font-weight:600;line-height:1.5;letter-spacing:.08em;margin:0 0 9px;color:#ead3e1}
