:root{color-scheme:dark;font-family:system-ui,-apple-system,sans-serif;background:#0d1e23;color:#edf1e9;--mint:#b6dfb6;--gold:#e8bd78;--line:#ffffff18}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 85% 0%,#264f51,transparent 55%)}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid var(--line);background:#ffffff06;border-radius:12px;padding:12px 16px;transition:background .15s,transform .15s}button:hover{background:#ffffff12}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold);outline-offset:4px}button[aria-pressed=true]{background:var(--mint);color:#142c32;border-color:var(--mint)}.app{max-width:1160px;margin:auto;padding:32px 28px}header,.identity,.intro,.section-label,.transport-buttons,.languages,.master{display:flex;align-items:center;justify-content:space-between;gap:14px}.identity{justify-content:flex-start}h1{font-size:clamp(22px,3vw,34px);letter-spacing:-1px;margin:3px 0;font-weight:650}.eyebrow{font-size:9px;letter-spacing:2.2px;color:var(--mint);margin:0}.home{color:var(--mint);font-size:13px;text-underline-offset:5px}.intro{margin:20px 0 28px;color:#abc0bd}.intro p{font-size:15px}.languages{gap:4px}.languages button{padding:7px 9px;font-size:11px;border-radius:8px}.workspace{display:grid;grid-template-columns:390px 1fr;gap:20px}.panel{background:#142b30dd;border:1px solid var(--line);border-radius:24px;padding:24px;box-shadow:0 16px 45px #00000010}.section-label{font-size:10px;letter-spacing:1.8px;text-transform:uppercase;color:#b2c6c1}.transport{align-self:start;position:sticky;top:20px}.tempo{display:flex;align-items:center;justify-content:center;gap:18px;margin:25px 0 4px}.tempo button{width:40px;height:40px;border-radius:50%;padding:0;font-size:24px}.tempo label{text-align:center}.tempo input{display:block;width:145px;font-size:64px;line-height:1;font-weight:300;letter-spacing:-4px;text-align:center;background:none;border:0;color:#edf1e9;appearance:textfield}.tempo input::-webkit-inner-spin-button{appearance:none}.tempo small{display:block;font-size:10px;letter-spacing:3px;color:#abc0bd}.circle{position:relative;width:min(100%,320px);aspect-ratio:1;margin:12px auto 20px}#dial{position:absolute;inset:0;border:2px solid #5a7774;border-radius:50%;touch-action:none;cursor:grab;background:repeating-conic-gradient(from 0deg,#ffffff20 0deg .6deg,transparent .6deg 6deg);mask-image:radial-gradient(circle,transparent 65%,black 66%)}#dial i{position:absolute;inset:0;transform:rotate(var(--angle,-45deg))}#dial i:before{content:'';position:absolute;top:3px;left:calc(50% - 3px);height:16px;width:6px;border-radius:5px;background:var(--gold)}#segments{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}#segments g{pointer-events:auto;cursor:pointer;fill:#29474b;stroke:#0d1e23;stroke-width:2}#segments g[data-level="1"]{fill:#71987e}#segments g[data-level="0.4"]{fill:#1b353b}#segments g[data-level="0"]{fill:#102428}#segments g.active{fill:var(--gold)}#segments text{fill:#ecf0e6;stroke:none;font-size:17px;font-weight:500}.center{position:absolute;inset:30%;border-radius:50%;border:1px solid var(--line);background:radial-gradient(circle at 40% 30%,#315358,#193037);display:flex;align-items:center;justify-content:center;gap:7px}.center strong{font-size:48px;font-weight:300}.center span{color:#abc0bd;font-size:17px}#hand{position:absolute;inset:8%;pointer-events:none;transform:rotate(var(--beat-angle,0deg))}#hand:before{content:'';position:absolute;top:0;left:calc(50% - 3px);width:6px;height:15px;background:var(--gold);border-radius:5px;box-shadow:0 0 14px #e8bd7866}.transport-buttons button{flex:1}.primary{background:var(--mint);color:#142c32;font-weight:700}.primary:hover{background:#c8ebc8}.help,#status{font-size:12px;line-height:1.7;color:#abc0bd}.help{margin-top:22px}#status{min-height:20px;color:var(--gold)}.meter{padding-top:16px;border-top:1px solid var(--line)}.meter label{display:flex;justify-content:space-between;align-items:center;font-size:13px}.meter select{background:#0d1e23;border:1px solid var(--line);border-radius:9px;padding:8px 24px 8px 14px;color:#edf1e9}.right{display:grid;gap:20px}.badge{color:#779a94;font-size:10px}#genres{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin:18px 0 14px}#genres button{text-align:left;display:flex;flex-direction:column;gap:15px;padding:16px 12px}#genres button>span{font-size:10px;opacity:.6}#genres strong{font-size:17px;line-height:1.25;font-weight:550}#genres small{font-size:8px;letter-spacing:1px;opacity:.65}#variations{display:flex;gap:8px}#variations button{padding:8px 16px;font-size:12px}.kit{position:relative;height:215px;margin:14px 0}.pad{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;border-radius:50%;box-shadow:0 9px 0 #0003,0 15px 28px #0002}.pad span{font-size:40px;line-height:1}.pad small{font-size:10px;margin-top:4px}.cymbal{background:repeating-radial-gradient(ellipse,#a78750 0px,#a78750 3px,#927345 4px,#b79a60 6px);border:3px solid #c4a76f;color:#172b2d;width:125px;height:80px;transform:rotate(-12deg)}.hat{top:10px;left:7%}.ride{top:10px;right:5%;transform:rotate(12deg);width:145px;height:95px}.drum{background:radial-gradient(circle at 40% 30%,#dfdfc8,#9cafa0);border:5px double #536b6c;color:#253e40}.snare{width:110px;height:100px;left:17%;bottom:10px}.kick{width:135px;height:135px;right:19%;bottom:0;background:radial-gradient(circle,#193237,#0c1f26);border:6px double #9cb5ac;color:#bbd2bf}.pad.hit{filter:brightness(1.65);box-shadow:0 0 28px #e8bd7844;scale:1.045}.live-dot{width:7px;height:7px;border-radius:50%;background:var(--mint)}.pattern-title{font-size:10px;color:#91ada7;margin:20px 0 10px;letter-spacing:1px}.pattern{display:grid;gap:6px;overflow:auto}.pattern-row{display:grid;grid-template-columns:85px repeat(var(--steps),minmax(7px,1fr));align-items:center;gap:4px;font-size:9px;color:#abc0bd}.step{height:8px;border-radius:2px;background:#254147}.step.on{background:#7da58c}.step.current{box-shadow:0 0 0 1px var(--gold);background:var(--gold)}#tracks{display:grid;grid-template-columns:1fr 1fr;gap:15px;margin:18px 0 24px}.track{display:flex;align-items:center;gap:10px}.track button{font-size:10px;min-width:91px;padding:9px 5px}.track input{min-width:0;width:100%}input[type=range]{accent-color:var(--mint);cursor:pointer}.master{flex-wrap:wrap;border-top:1px solid var(--line);padding-top:17px;font-size:12px}.master output{color:var(--mint)}.master input{width:100%}footer{display:flex;justify-content:space-between;gap:20px;margin:26px 0 4px;color:#7f9d98;font-size:10px;line-height:1.6}footer span{font-size:8px;letter-spacing:1px;align-self:center}@media(max-width:850px){.workspace{grid-template-columns:1fr 1.25fr}.app{padding:22px 16px}.panel{padding:18px}.transport{position:static}#genres{gap:5px}#genres button{padding:12px 8px}#genres strong{font-size:14px}.ride{right:0}.hat{left:0}.kick{right:5%}.snare{left:5%}#tracks{grid-template-columns:1fr}}@media(max-width:650px){.app{max-width:520px}.workspace{grid-template-columns:1fr}.intro{align-items:flex-start}.intro p{max-width:170px}.transport{padding:23px}.right{gap:16px}header .identity img{width:40px;height:40px}.eyebrow{font-size:7px;letter-spacing:1px}h1{font-size:23px}.home{font-size:11px}.kit{max-width:380px;margin:15px auto}#genres strong{font-size:16px}#tracks{grid-template-columns:1fr 1fr}.ride{right:2%}.hat{left:3%}.kick{right:12%}.snare{left:12%}footer{flex-direction:column;gap:0}.circle{width:290px}.panel{border-radius:20px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}.pad.hit{scale:1}}
/* Expanded nine-piece kit: cymbals around the shells, with a compact mobile layout. */
.kit.expanded{height:380px;max-width:570px;margin:24px auto 16px}
.expanded .pad{transform:none;bottom:auto;right:auto;left:auto;top:auto}
.expanded .cymbal{width:22%;height:70px}.expanded .pad span{font-size:30px}.expanded .pad small{font-size:9px;max-width:90%;text-align:center;line-height:1.15}
.expanded .crash{left:0;top:8px;width:27%;height:85px;transform:rotate(-15deg)}
.expanded .splash{left:37%;top:0;width:20%;height:63px;transform:rotate(-5deg)}
.expanded .ride{right:0;top:7px;width:29%;height:94px;transform:rotate(14deg)}
.expanded .hat{left:0;top:139px;width:23%;transform:rotate(-10deg)}
.expanded .openhat{right:0;top:143px;width:23%;transform:rotate(10deg);border-style:double;border-width:6px}
.expanded .tom{left:27%;top:93px;width:21%;height:92px}
.expanded .floor{right:24%;top:111px;width:24%;height:112px}
.expanded .snare{left:12%;top:242px;width:25%;height:105px}
.expanded .kick{right:17%;top:240px;width:31%;height:134px}
.fills{margin-top:16px}.fills label{gap:12px}.fills select{max-width:65%;font-size:11px;padding-right:18px}
.track button{min-width:106px;font-size:9px}.track{gap:8px}.pattern-row{grid-template-columns:106px repeat(var(--steps),minmax(7px,1fr))}
@media(max-width:950px) and (min-width:651px){.workspace{grid-template-columns:320px minmax(0,1fr)}#tracks{grid-template-columns:1fr}.expanded .pad small{font-size:8px}.kit.expanded{height:345px}.expanded .snare{top:230px;height:85px}.expanded .kick{top:225px;height:108px}.expanded .tom{height:75px}.expanded .floor{height:90px}.expanded .cymbal{height:62px}.expanded .ride{height:78px}.expanded .crash{height:72px}}
@media(max-width:650px){.kit.expanded{height:335px}.expanded .pad small{font-size:8px}.expanded .pad span{font-size:25px}.expanded .crash{height:65px}.expanded .ride{height:75px}.expanded .splash{height:53px}.expanded .hat,.expanded .openhat{height:57px;top:133px}.expanded .tom{height:72px;top:85px}.expanded .floor{height:90px;top:96px}.expanded .snare{top:221px;height:80px}.expanded .kick{top:212px;height:107px}.track button{min-width:97px}.track{gap:6px}#tracks{gap:15px 10px}}
@media(max-width:370px){#tracks{grid-template-columns:1fr}.expanded .pad small{font-size:7px}}
#dial{overflow:hidden}
footer a{color:inherit;text-underline-offset:3px}
#variations{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}#variations button{padding:10px 5px;font-size:11px;white-space:normal;line-height:1.3}.pattern{min-width:0}.pattern-row{width:max(100%,calc(106px + var(--steps)*11px))}.right,.kit-panel{min-width:0}
@media(max-width:950px) and (min-width:651px){#variations{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:370px){#variations{grid-template-columns:repeat(2,minmax(0,1fr))}}
[hidden]{display:none!important}#variations{grid-template-columns:repeat(4,minmax(0,1fr))}#variations [data-variation="4"]{grid-column:1/-1;border-color:#e8bd7866;margin-top:3px}#customEditor{margin-top:25px;padding-top:20px;border-top:1px solid var(--line)}.editor-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.editor-heading h2{font-size:18px;margin:0;color:var(--mint);font-weight:500}#selectedInstrument{font-size:10px;color:var(--gold);text-align:right}.editor-controls,.editor-actions{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}.editor-controls label{display:flex;align-items:center;gap:10px;font-size:11px;color:#abc0bd}.editor-controls select,.editor-controls input{background:#0d1e23;color:#edf1e9;border:1px solid var(--line);border-radius:8px;padding:8px;font-size:12px}.fraction{display:flex;align-items:center;gap:7px}.fraction input{width:58px}.editor-actions button{font-size:11px;padding:9px 13px}.editor-actions button:disabled{opacity:.35;cursor:default}.drop-timeline{display:grid;grid-template-columns:repeat(var(--slots),minmax(82px,1fr));gap:7px;overflow:auto;padding:4px 3px 14px;max-width:100%}.drop-slot{border:1px dashed #658b80;border-radius:10px;min-height:100px;padding:8px;display:flex;flex-direction:column;gap:6px;cursor:pointer;background:#19353a}.drop-slot:hover{background:#254c4e}.slot-label{font-size:12px;color:var(--gold)}.slot-label small{font-size:9px;opacity:.6}.slot-plus{font-size:18px;color:#73958b;text-align:center;margin-top:auto}.note-chip{font-size:8px;padding:6px 4px;border-radius:6px;background:var(--mint);color:#142c32;cursor:grab;text-align:left}.editable .step{height:25px;border:1px solid #42625e;border-radius:4px;padding:0;min-width:18px;cursor:pointer}.editable .step:hover{background:#5e8a77}.editable .step[aria-pressed=true]{background:var(--mint)}.editable .pattern-row{grid-template-columns:106px repeat(var(--steps),minmax(24px,1fr));width:max(100%,calc(106px + var(--steps)*28px));gap:4px}.editable .pattern-row>span{position:sticky;left:0;background:#142b30;z-index:1;padding:7px 0}.downbeat{border-left:2px solid #e8bd7899!important}.pad[draggable=true]{cursor:grab}.pad[draggable=true][aria-pressed=true]{outline:2px solid var(--mint);outline-offset:5px}.pad[draggable=true]:active{cursor:grabbing}#fillHint{color:var(--gold);font-size:11px}
@media(max-width:420px){.editor-heading{align-items:flex-start;flex-direction:column}.editor-controls{flex-direction:column}.editor-controls label{justify-content:space-between}.editor-actions{gap:6px}.editor-actions button{font-size:10px;padding:8px}#variations button{font-size:10px}}
.language-switch{position:relative;display:flex;gap:2px;align-items:center;margin-left:auto;z-index:10}.language-switch button{display:none;border:1px solid var(--line);border-radius:9px;background:#19353a;color:var(--gold);padding:7px 8px;font-size:10px;font-weight:700}.language-switch button.selected{display:inline-flex}.language-switch:not(:has(.selected)) button:first-child{display:inline-flex}.language-switch:hover button,.language-switch:focus-within button{display:inline-flex}