:root{color-scheme:light;--paper:#f2f0e9;--ink:#252922;--muted:#76776e;--orange:#eb7846;--line:#d9dad0;--green:#bed69a;--mono:'Courier New',monospace;--font:'DM Sans',sans-serif;--display:'Manrope',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.45}a{color:inherit;text-decoration:none}:where(.drum-app,#help-dialog) :is(button,a,input,select,[tabindex]):focus-visible{outline:3px solid var(--orange);outline-offset:4px}svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;vertical-align:middle}.icon-library{position:absolute;width:0;height:0;overflow:hidden}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.skip-link{position:fixed;top:-100px;left:20px;z-index:20;background:var(--orange);padding:12px}.skip-link:focus{top:12px}[hidden]{display:none!important}
.site-header{max-width:1440px;margin:auto;min-height:94px;padding:0 64px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;font-family:var(--display);font-size:24px;font-weight:800;letter-spacing:-1.3px}.brand>span:not(.brand-mark):not(.brand-dot){font-weight:500}.brand-dot{font:9px var(--font);align-self:flex-start;margin:6px 0 0 3px}.brand-mark{display:flex;align-items:center;gap:3px;margin-right:12px;height:26px}.brand-mark i{width:5px;background:var(--ink);height:13px;border-radius:1px}.brand-mark i:nth-child(2){height:25px}.brand-mark i:nth-child(3){height:19px}.brand-mark i:nth-child(4){height:9px}.site-header nav{display:flex;gap:30px;align-items:center}.site-header nav a{font-size:12px;font-weight:600}.site-header nav a svg{margin-left:12px;width:17px}.header-divider{height:17px;width:1px;background:#cdcec4}.header-note{font:9px var(--mono);letter-spacing:1.4px}main{max-width:1440px;margin:auto;padding:0 64px}.intro{display:flex;justify-content:space-between;align-items:center;padding:46px 0 36px}.eyebrow{font:10px var(--mono);letter-spacing:1.5px;display:flex;align-items:center;gap:9px;margin:0 0 15px}.eyebrow>span{width:6px;height:6px;background:var(--orange);border-radius:50%}.eyebrow b{font-weight:400;color:#aaa99f;margin:0 5px}h1{font:700 clamp(38px,5vw,68px)/1.12 var(--display);letter-spacing:-3.8px;margin:0 0 15px}h1 em{font-family:Georgia,serif;font-weight:400;color:#788269;letter-spacing:-3px}.intro-copy{font-size:13px;color:var(--muted);margin:0;letter-spacing:.1px}.intro-badge{display:flex;align-items:center;gap:19px;margin-right:14px;transform:rotate(-6deg)}.badge-orbit{font:80px/1 Georgia,serif;color:#ea7a48}.intro-badge div{font:700 10px/1.5 var(--mono);letter-spacing:1px}.intro-badge small{display:block;font:11px var(--font);letter-spacing:0;margin-top:9px;color:var(--muted)}
.drum-room{border:1px solid #313832;border-radius:15px;overflow:hidden;box-shadow:0 16px 36px #2d322510;background:#191f1d;isolation:isolate}.room-topbar{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;padding:12px 26px;border-bottom:1px solid #ffffff0c;color:#dddcd3;background:#1b211e}.room-title{display:flex;align-items:center;gap:10px}.live-dot,.status-light{display:block;width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 10px #bddd8633}.room-title strong{font:600 11px var(--display);letter-spacing:1.8px}.room-edition{font:8px var(--mono);letter-spacing:.9px;color:#818b80;margin-left:14px}.kit-selector{display:flex;gap:3px;background:#111712;border:1px solid #30362e;border-radius:7px;padding:3px}.kit-selector button{border:0;background:none;color:#8e978b;font-size:11px;padding:8px 20px;border-radius:4px;transition:.2s}.kit-selector button[aria-pressed=true]{background:#d3dec3;color:#27331e;box-shadow:0 1px 3px #0004}.view-actions{display:flex;gap:18px}.icon-button{display:flex;align-items:center;gap:7px;padding:4px;border:0;background:none;color:#a5ad9f;font-size:10px}.icon-button[aria-pressed=false]{color:#687162}.icon-button svg{width:17px;height:17px}.kit-stage{position:relative;overflow:hidden;background:radial-gradient(ellipse at 52% 34%,#46504233,transparent 62%),linear-gradient(125deg,#202722,#161c19 50%,#202722);aspect-ratio:1100/553}.kit-stage:before{content:'';pointer-events:none;position:absolute;inset:0;opacity:.21;background-image:repeating-linear-gradient(0deg,transparent 0 3px,#77877212 3px 4px),repeating-linear-gradient(90deg,transparent 0 3px,#77877215 3px 4px)}.stage-topline,.stage-bottomline{position:absolute;left:26px;right:26px;display:flex;justify-content:space-between;align-items:center;z-index:2;pointer-events:none;font:8px var(--mono);letter-spacing:1.4px;color:#99a18e}.stage-topline{top:24px}.stage-hint{font-size:7px;color:#737e70}.stage-bottomline{bottom:20px}.stage-watermark{position:absolute;left:34px;top:80px;font:800 clamp(24px,4vw,56px)/.99 var(--display);letter-spacing:-2px;color:#c6d2b208;transform:rotate(-90deg);transform-origin:65px 70px;pointer-events:none}.sound-status{display:flex;align-items:center;gap:8px;font-family:var(--font);letter-spacing:.2px;font-size:10px}.status-light{background:#777f71;box-shadow:none;width:5px;height:5px}.status-light.ready{background:var(--green);box-shadow:0 0 8px #bed69a55}.output-meter{display:flex;align-items:center;gap:9px;font-size:7px;letter-spacing:1px}#meter-bars{display:flex;gap:3px}#meter-bars i{width:3px;height:12px;border-radius:1px;background:#3a4635;transition:background 70ms}#meter-bars i.lit{background:#bed69a}#meter-bars i.lit:nth-last-child(-n+3){background:var(--orange)}#drum-kit{position:absolute;inset:0;width:100%;height:100%;stroke:none;fill:none;overflow:visible;touch-action:none;user-select:none}.drum-hit{cursor:pointer;outline:none}.drum-hit .hit-glow{opacity:0;stroke:var(--orange);stroke-width:3;fill:none;transition:opacity .22s}.drum-hit:hover .hit-glow,.drum-hit:focus-visible .hit-glow{opacity:.6}.drum-hit.is-hit .hit-glow{opacity:1;stroke-width:5}.drum-hit .drum-body{transform-box:fill-box;transform-origin:center;transition:filter .13s}.drum-hit.is-hit .drum-body{filter:brightness(1.28)}.drum-hit.is-hit .cymbal-body{animation:cymbal-hit .32s ease-out}.drum-hit.is-hit .head-surface{animation:head-hit .16s ease-out}.kit-label{pointer-events:all;font:600 9px var(--font);fill:#e8eade;letter-spacing:1px}.kit-label rect{fill:#161d19eb;stroke:#bac5a933;stroke-width:1}.kit-label .key-name{font:10px var(--mono);fill:#d3e3bc;letter-spacing:0}.hide-keys .kit-label{opacity:0}.hide-keys .key-pad kbd{visibility:hidden}.kick-brand{font:700 13px var(--display);letter-spacing:2px;fill:#d5d8c7}.kick-sub{font:7px var(--mono);letter-spacing:3px;fill:#8b9582}.kick-star{font:40px Georgia;fill:#b7c49c}.kick-text{pointer-events:none}.kit-stage[data-kit=vintage]{background:radial-gradient(ellipse at 50% 35%,#75624344,transparent 65%),#211f19}.kit-stage[data-kit=arena]{background:radial-gradient(ellipse at 50% 35%,#32557044,transparent 65%),#171f24}
.performance-strip{display:flex;align-items:center;gap:25px;min-height:87px;padding:15px 25px;background:#252d26;border-top:1px solid #ffffff08;border-bottom:1px solid #0004;color:#dde1d5}.tempo-control{display:flex;flex-direction:column;gap:6px;padding-right:21px;border-right:1px solid #ffffff13}.tempo-control label,.mix-control label{font:8px var(--mono);letter-spacing:1px;color:#a2ad99}.tempo-control>div{display:flex;align-items:center;gap:5px}.tempo-control button{border:1px solid #46513f;background:none;color:#bac5af;border-radius:3px;width:22px;height:22px;padding:0}.tempo-control input{appearance:textfield;-moz-appearance:textfield;width:42px;padding:0;border:0;background:none;color:#f2f3e9;font:600 20px var(--display);text-align:center}.tempo-control input::-webkit-inner-spin-button{appearance:none}.tempo-control div>span{font:8px var(--mono);color:#9aa790;margin-right:8px}.metronome{display:flex;align-items:center;gap:8px;border:0;color:#b2bda8;background:none;font-size:11px;padding:8px 0}.metronome svg{width:17px}.metro-light{width:5px;height:5px;border-radius:50%;background:#53604b}.metronome[aria-pressed=true]{color:var(--green)}.metronome[aria-pressed=true] .metro-light{background:var(--green)}.metronome.beat .metro-light{box-shadow:0 0 12px #ceeeb0;background:#fff}.mix-control{flex:1;min-width:90px;max-width:180px}.mix-control label{display:flex;align-items:center;gap:6px;margin-bottom:8px}.mix-control label svg{width:13px;height:13px}.mix-control output{margin-left:auto;letter-spacing:0;color:#d6dfcd}input[type=range]{display:block;width:100%;height:4px;appearance:none;background:#4c5646;border-radius:8px;margin:4px 0;cursor:pointer;accent-color:var(--green)}input[type=range]::-webkit-slider-thumb{appearance:none;width:11px;height:11px;border:2px solid #283020;border-radius:50%;background:#d2e3b6;box-shadow:0 0 0 1px #91a078}input[type=range]::-moz-range-thumb{width:9px;height:9px;border:1px solid #283020;border-radius:50%;background:#d2e3b6}.record-controls{margin-left:auto;display:flex;align-items:center;gap:10px}.record-controls button{border:1px solid #697258;border-radius:6px;background:#343e2c;color:#e0e6d4;font-size:11px;padding:11px 16px;display:flex;align-items:center;gap:8px;white-space:nowrap}.record-dot{width:7px;height:7px;background:#ee815d;border-radius:50%}#record[aria-pressed=true]{border-color:#e57d59;background:#704431}#record[aria-pressed=true] .record-dot{background:#ffa27a;animation:record-pulse 1s infinite}#record-time{font:10px var(--mono)}.download{font-size:10px;color:#d0e2b7;display:flex;gap:6px;align-items:center}.download svg{width:14px}
.key-rack{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:1px;padding:14px 20px;background:#e6e7dc}.key-pad{min-height:44px;border:0;background:none;padding:3px;display:flex;flex-direction:column;align-items:center;gap:7px;color:#666d5d;border-right:1px solid #cbd0c1;touch-action:none;user-select:none}.key-pad:last-child{border:0}kbd{font:10px var(--mono);display:inline-block;border:1px solid #ccd0c3;border-radius:4px;background:#f4f5ed;padding:4px 7px;box-shadow:0 2px 0 #ced1c3;color:#59634c}.key-pad kbd{min-width:27px;transition:.12s}.key-pad span{font-size:9px;white-space:nowrap}.key-pad.is-hit kbd{background:var(--orange);color:#281f15;border-color:var(--orange);box-shadow:0 0 12px #ee815d66;transform:translateY(2px)}.under-kit{display:flex;justify-content:space-between;align-items:center;margin:16px 0 44px;color:#797d70}.under-kit p{display:flex;gap:8px;align-items:center;font-size:10px;margin:0}.under-kit p>svg{width:16px}.under-kit p>span{margin-left:5px}.under-kit kbd{font-size:8px;padding:2px 4px;box-shadow:none}.under-kit button{display:flex;align-items:center;gap:6px;background:none;border:0;color:#696e60;font-size:10px}.under-kit button svg{width:14px;height:14px}
.groove-section{border:1px solid #d7d9cd;border-radius:12px;padding:26px 28px 16px;background:#f6f5ef}.groove-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:24px}.groove-heading .eyebrow{font-size:8px;letter-spacing:1.3px;margin-bottom:8px;color:#878e7b}h2{font:700 25px/1.2 var(--display);letter-spacing:-1px;margin:0 0 8px}.groove-heading p:not(.eyebrow){font-size:11px;color:#85897b;margin:0}.groove-actions{display:flex;align-items:center;gap:10px}.groove-actions select{border:1px solid #d5d8cc;background:var(--paper);border-radius:6px;padding:12px 32px 12px 12px;color:#515c42;font-size:11px}.primary-button{display:flex;align-items:center;gap:7px;border:1px solid #313a2b;border-radius:6px;background:#323e29;color:#e6eedb;padding:11px 15px;font-size:11px;min-width:115px}.primary-button svg{width:17px;height:17px}.primary-button[aria-pressed=true]{background:#b8ca9e;border-color:#adbf91;color:#27321f}.sequencer{display:grid;grid-template-columns:88px repeat(16,minmax(16px,1fr));gap:5px}.seq-count{font:9px var(--mono);color:#838978;text-align:center;padding:0 0 7px}.seq-count.downbeat{color:#35402c;font-weight:700}.seq-label{display:flex;align-items:center;color:#777f6c;font-size:9px;padding:0;gap:8px;border:0;background:none;text-align:left}.seq-label:before{content:'';width:4px;height:4px;border-radius:50%;background:var(--row-color)}.step{height:22px;border:1px solid #dcded4;background:#eaede3;border-radius:3px;padding:0;position:relative}.step.bar-start{margin-left:5px}.step[aria-pressed=true]{background:var(--row-color);border-color:var(--row-color)}.step:hover{filter:brightness(.91)}.step.current{box-shadow:0 0 0 2px #273520;z-index:1}.step.current:after{content:'';position:absolute;inset:4px;background:#fff8;border-radius:1px}.seq-count.current{color:#ca6439;font-weight:bold}.sequencer-footer{display:flex;justify-content:space-between;align-items:center;margin-top:17px;color:#898f7f;font-size:9px}.sequencer-footer>span{display:flex;align-items:center;gap:7px}.sequencer-footer>span i{width:4px;height:4px;background:#a0ab8f;border-radius:50%}.sequencer-footer>div{display:flex;gap:22px;align-items:center}.sequencer-footer div>span{font:8px var(--mono);letter-spacing:.7px}.sequencer-footer button{font-size:9px;color:#6f7862;border:0;background:none;padding:3px}.closing-note{display:flex;align-items:center;gap:19px;padding:35px 4px 40px}.closing-star{font:55px Georgia;color:#93a47e}.closing-note p{font-size:12px;line-height:1.65;color:#929784;margin:0}.closing-note strong{font-weight:500;color:#505b43}.closing-note>a{margin-left:auto;font-size:11px;line-height:1.8;color:#898f7c}.closing-note a svg{width:15px;height:15px;margin-left:4px}footer{display:flex;align-items:center;justify-content:space-between;margin:0 auto;padding:23px 64px;max-width:1440px;border-top:1px solid var(--line);font-size:10px;color:#838977}.footer-brand{font-weight:700;font-size:14px;letter-spacing:-.5px;color:#555f49}footer>span{font:8px var(--mono);letter-spacing:1.2px}dialog{border:1px solid #b9c0ae;border-radius:15px;padding:38px;max-width:510px;width:calc(100% - 30px);background:var(--paper);color:var(--ink);box-shadow:0 30px 100px #0005}dialog::backdrop{background:#141a15b3;backdrop-filter:blur(5px)}dialog p:not(.eyebrow){font-size:13px;line-height:1.7;color:#68715e}.dialog-close{position:absolute;right:14px;top:9px;font-size:26px;background:none;border:0;color:#656f59}.help-keys{display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:11px;color:#667358;margin:23px 0}.help-keys kbd{margin-right:8px;min-width:29px;text-align:center}.no-script{position:fixed;bottom:0;padding:20px;background:var(--orange);width:100%;text-align:center}.room-expanded{position:fixed;inset:12px;z-index:10;display:flex;flex-direction:column;box-shadow:0 0 0 30px #101611e8}.room-expanded .kit-stage{flex:1;aspect-ratio:auto;min-height:0}.room-expanded #drum-kit{object-fit:contain}.room-expanded .room-topbar,.room-expanded .performance-strip,.room-expanded .key-rack{flex-shrink:0}body.focus-mode{overflow:hidden}
@keyframes cymbal-hit{0%{transform:rotate(0)}25%{transform:rotate(-2deg) scaleY(.96)}65%{transform:rotate(1.5deg)}100%{transform:rotate(0)}}@keyframes head-hit{35%{transform:scale(.975)}100%{transform:scale(1)}}@keyframes record-pulse{50%{opacity:.3}}
@media(min-width:1500px){.kit-stage{max-height:620px}}
@media(max-width:1150px){.site-header{padding:0 32px}main{padding:0 32px}footer{padding-left:32px;padding-right:32px}.room-edition{display:none}.performance-strip{gap:18px;padding-left:20px;padding-right:20px}.room-control{max-width:120px}.intro{padding:36px 0 30px}}
@media(max-width:860px){.header-note,.header-divider{display:none}.intro-badge{gap:8px;margin-right:0}.badge-orbit{font-size:60px}.intro-badge div{font-size:8px}.room-topbar{padding:12px 17px;gap:12px}.kit-selector button{padding:7px 15px}.view-actions{gap:10px}.performance-strip{gap:16px;flex-wrap:wrap;padding:17px 20px}.tempo-control{padding-right:16px}.mix-control{max-width:140px}.room-control{max-width:110px}.record-controls{margin-left:0}.metronome span:not(.metro-light){display:none}.under-kit p>span{display:none}.groove-section{padding:22px 20px 16px}.groove-heading h2{font-size:23px}.key-rack{padding:13px 10px}.key-pad span{font-size:8px}.stage-topline{top:18px}.stage-bottomline{bottom:14px}.stage-topline,.stage-bottomline{left:19px;right:19px}.stage-hint{display:none}}
@media(max-width:620px){.site-header{min-height:72px;padding:0 20px}.brand{font-size:21px}.brand-mark{transform:scale(.85);margin-right:7px}.site-header nav a{font-size:10px}.site-header nav a svg{width:13px;margin-left:3px}main{padding:0 14px}.intro{padding:30px 5px 25px}.intro .eyebrow{font-size:8px;gap:5px;letter-spacing:.9px;margin-bottom:12px}h1{font-size:40px;letter-spacing:-2px;margin-bottom:11px}h1 em{letter-spacing:-2px}.intro-copy{font-size:11px;max-width:260px;line-height:1.6}.intro-badge{display:none}.drum-room{border-radius:11px}.room-topbar{flex-wrap:wrap;gap:12px;min-height:95px;padding:14px 15px}.room-title{order:0}.room-title strong{font-size:10px}.kit-selector{order:2;width:100%;justify-content:center}.kit-selector button{flex:1;padding:7px 10px}.view-actions{order:1;margin-left:auto;gap:16px}.kit-stage{aspect-ratio:1.18;min-height:285px}.stage-topline{top:16px;left:16px;font-size:7px}.stage-watermark{display:none}#drum-kit{width:112%;max-width:none;left:-6%;top:9px;height:94%}.kit-label{font-size:10px}.kit-label .key-name{font-size:11px}.stage-bottomline{left:15px;right:15px;bottom:13px}.sound-status{font-size:9px}.output-meter{gap:5px}#meter-bars{gap:2px}#meter-bars i{height:9px;width:2px}.performance-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px 22px;padding:16px}.tempo-control{border:0;padding:0}.tempo-control>div{gap:7px}.tempo-control input{width:41px}.metronome{justify-self:end;gap:6px}.metronome span:not(.metro-light){display:block;font-size:10px}.mix-control{max-width:none;width:100%;min-width:0}.room-control{max-width:none}.record-controls{grid-column:1/-1;display:flex;justify-content:center;border-top:1px solid #ffffff12;padding-top:12px}.record-controls button{justify-content:center;min-width:135px;padding:9px}.key-rack{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:15px;padding:15px 9px}.key-pad:nth-child(5){border:0}.key-pad{gap:6px;padding:0 2px}.key-pad span{font-size:9px}.key-pad kbd{padding:4px 7px}.under-kit{margin:14px 3px 28px;gap:10px}.under-kit p{font-size:9px;gap:5px}.under-kit button{font-size:9px;white-space:nowrap;gap:4px}.under-kit button svg{display:none}.groove-section{padding:20px 15px 15px}.groove-heading{flex-direction:column;align-items:flex-start;gap:17px;margin-bottom:20px}.groove-heading .eyebrow{font-size:7px}.groove-actions{width:100%}.groove-actions select{flex:1;min-width:0}.primary-button{justify-content:center;min-width:113px}.sequencer-wrap{overflow-x:auto;padding:2px 2px 6px}.sequencer{min-width:365px;grid-template-columns:56px repeat(16,minmax(13px,1fr));gap:3px}.step{height:23px}.step.bar-start{margin-left:2px}.seq-label{font-size:8px;gap:4px}.seq-count{font-size:8px}.sequencer-footer{font-size:8px;align-items:flex-start;gap:8px;line-height:1.5}.sequencer-footer>span{align-items:flex-start;max-width:140px}.sequencer-footer>span i{margin-top:4px;flex-shrink:0}.sequencer-footer>div{gap:6px;flex-direction:column;align-items:flex-end}.sequencer-footer div>span{font-size:7px}.closing-note{padding:27px 6px 29px;gap:11px;flex-wrap:wrap}.closing-star{font-size:43px}.closing-note p{font-size:11px}.closing-note>a{font-size:10px;margin-left:auto}footer{padding:20px;gap:18px;flex-wrap:wrap}footer>span{order:2;width:100%;font-size:7px}dialog{padding:30px 22px}.room-expanded{inset:5px}.room-expanded .kit-stage{min-height:160px}.room-expanded .key-rack{grid-template-columns:repeat(10,minmax(0,1fr));padding:10px 5px;gap:2px}.room-expanded .key-pad span{display:none}.room-expanded .key-pad kbd{min-width:0;font-size:9px;padding:3px 5px}.room-expanded .performance-strip{gap:10px 18px;padding:10px 15px}.room-expanded .record-controls{padding-top:8px}.room-expanded #drum-kit{width:100%;left:0;top:0;height:100%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

/* Beat building and custom kit workspace. */
html{scroll-behavior:smooth;scroll-padding-top:22px}h1{word-spacing:.06em}.session-bar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 16px;padding:12px 3px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.session-links,.quick-groove{display:flex;align-items:center;gap:18px}.session-links>a,.session-links>button{display:flex;align-items:center;gap:8px;background:none;border:0;font-size:12px;font-weight:600;color:#4a5940;padding:9px 0;white-space:nowrap}.session-links .builder-link{color:#35422c}.mini-grid{font-size:22px;font-weight:400;line-height:1}.quick-groove{gap:10px}.quick-groove>label{font:8px var(--mono);letter-spacing:1px;color:#7b846e}.quick-groove select{border:0;background:transparent;color:#56644a;padding:8px 18px 8px 2px;font-size:12px;min-width:0}.quick-groove .primary-button{white-space:nowrap}.key-rack{grid-template-columns:repeat(11,minmax(0,1fr))}.under-kit{margin-bottom:27px}.custom-section{padding:25px 27px 18px;margin:0 0 24px;border:1px solid #d5dacc;border-radius:12px;background:#e9ecdf}.custom-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.custom-heading .eyebrow{font-size:8px;letter-spacing:1.3px;color:#7b896d;margin-bottom:8px}.custom-heading h2{font-size:22px;margin-bottom:7px}.custom-heading p:not(.eyebrow){font-size:11px;color:#76806a;margin:0;line-height:1.5}.outline-button{border:1px solid #aeb99e;background:#f1f3e9;border-radius:6px;padding:11px 15px;color:#4b5c3b;font-size:11px;white-space:nowrap}.outline-button:disabled{cursor:default}.custom-empty{display:flex;align-items:center;gap:15px;border:1px dashed #bdc7ac;border-radius:8px;padding:19px;background:#f3f5ec88}.custom-empty-icon{width:40px;height:40px;border:1px solid #c1cab2;display:grid;place-items:center;border-radius:50%;font-size:24px;color:#8e9e7b;flex-shrink:0}.custom-empty p{font-size:11px;line-height:1.8;color:#7e8b6f;margin:0}.custom-empty strong{font-weight:500;color:#657456}.local-badge{margin-left:auto;font:7px var(--mono);letter-spacing:.8px;color:#8b987d;white-space:nowrap}.custom-message{margin:12px 0 0;font-size:9px;color:#78866a;line-height:1.6}.custom-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.custom-card{position:relative;min-width:0;background:#f8f8ef;border:1px solid #c7d0bb;border-radius:9px;padding:14px;box-shadow:0 3px 5px #4a5b3907}.custom-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;color:#8a967b;font:8px var(--mono);letter-spacing:1px}.remove-custom{background:none;border:0;font:20px/1 var(--font);color:#8b957e;padding:0 3px}.custom-pad{position:relative;min-height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px;border:1px solid #c6cfb8;border-radius:7px;background:radial-gradient(ellipse at 50% 15%,#e6edda,#d4dfc5);color:#50643f;touch-action:none;user-select:none}.custom-pad .pad-disc{position:absolute;width:70px;height:70px;border-radius:50%;border:1px solid #768a5550;box-shadow:0 0 0 5px #84976818,0 0 0 10px #aaba8d18;top:12px;left:calc(50% - 35px);pointer-events:none}.custom-pad kbd{position:relative;z-index:1;min-width:28px;text-align:center;background:#e9efdf;border-color:#b3c29c;box-shadow:0 2px #b5c1a2}.custom-pad-name{position:relative;max-width:100%;z-index:1;font-weight:600;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:#dee8d0bb;padding:0 3px}.custom-pad.is-hit{background:#e9b28d;border-color:#c88153;box-shadow:0 0 0 3px #dc99654d}.custom-pad.is-hit .pad-disc{transform:scale(.94)}.custom-card label.sound-label{display:block;font:8px var(--mono);letter-spacing:1px;color:#899779;margin:14px 0 6px}.custom-source{width:100%;min-width:0;border:1px solid #d5dccb;padding:9px 7px;border-radius:5px;background:#f2f4e9;font-size:11px;color:#5b6e4a}.upload-button{position:relative;display:flex;gap:5px;justify-content:center;align-items:center;border:1px dashed #c3cdb5;border-radius:5px;margin-top:9px;font-size:10px;padding:10px;color:#6d7e59;cursor:pointer;background:#fbfcf6}.upload-button:focus-within{outline:3px solid var(--orange);outline-offset:2px}.custom-upload{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.custom-status{color:#8b957e;font-size:9px;min-height:27px;line-height:1.5;margin:9px 0 0;overflow-wrap:anywhere}.custom-status.error{color:#a04e38}.preset-shelf{border-top:1px solid #dce0d3;padding-top:17px;margin-bottom:20px}.preset-shelf>p{font:8px var(--mono);letter-spacing:1px;color:#8a927d;margin:0 0 10px}.preset-list{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.preset-chip{text-align:left;border:1px solid #d9dece;background:#f0f2e7;border-radius:6px;padding:10px;color:#647456;line-height:1.4}.preset-chip strong{font-size:10px;font-weight:600;display:block;white-space:nowrap}.preset-chip small{font:8px var(--mono);display:block;margin-top:4px;color:#909d81}.preset-chip[aria-pressed=true]{background:#e1e9d3;border-color:#98ac80;color:#3e562d}.preset-chip:hover{border-color:#9fb288}.beat-tools{display:flex;gap:14px;align-items:center;margin-bottom:18px}.capture-button{display:flex;align-items:center;gap:7px;padding:10px 13px;font-size:11px;border:1px solid #d6ad8f;background:#f8ecdf;color:#94613e;border-radius:6px;white-space:nowrap}.capture-dot{width:6px;height:6px;border-radius:50%;background:#be8059}.capture-button[aria-pressed=true]{background:#da8b5d;border-color:#bd7146;color:#331f12}.capture-button[aria-pressed=true] .capture-dot{background:#fff2de;animation:record-pulse 1s infinite}.beat-tools p{font-size:10px;color:#8a927e;margin:0;line-height:1.6}.text-button{margin-left:auto;font-size:10px;border:0;background:none;color:#6f7f5e;white-space:nowrap}.groove-section{scroll-margin-top:18px}.sequencer{grid-template-columns:105px repeat(16,minmax(16px,1fr))}.seq-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.seq-label:before{flex-shrink:0}.seq-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.step{height:24px}.beat-edited{color:#b27551;font:8px var(--mono)}
@media(max-width:1050px){.quick-groove>label{display:none}.preset-list{grid-template-columns:repeat(4,minmax(0,1fr))}.custom-empty .local-badge{display:none}.custom-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.session-links{gap:14px}}
@media(max-width:720px){.session-bar{flex-direction:column;align-items:stretch;gap:8px;padding:8px 4px 14px}.session-links{justify-content:space-between}.session-links>a,.session-links>button{font-size:11px}.quick-groove{justify-content:space-between;gap:8px}.quick-groove>label{display:block;font-size:7px}.quick-groove select{flex:1;font-size:11px;padding-right:0}.quick-groove .primary-button{padding:10px;font-size:10px;min-width:100px}.key-rack{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px 1px}.key-pad:nth-child(5){border-right:1px solid #cbd0c1}.key-pad:nth-child(6),.key-pad:last-child{border-right:0}.beat-tools{flex-wrap:wrap;gap:10px}.beat-tools p{order:2;width:100%}.text-button{margin-left:auto}.custom-heading h2{font-size:20px}.custom-section{padding:20px 15px 15px}.custom-empty{padding:14px;gap:10px}.custom-empty p{font-size:10px}.custom-empty-icon{width:30px;height:30px}.custom-heading{align-items:flex-start;gap:12px}.custom-heading .outline-button{font-size:10px;padding:9px 10px}.custom-heading p:not(.eyebrow){font-size:10px}.custom-card{padding:10px}.custom-source{font-size:10px}.preset-chip{padding:8px}.preset-chip strong{font-size:9px}.preset-chip small{font-size:7px}.sequencer{min-width:500px;grid-template-columns:79px repeat(16,minmax(19px,1fr));gap:4px}.step{height:28px}.seq-label{font-size:9px}.sequencer-wrap{overflow-x:auto;padding:3px 3px 8px}.room-expanded .key-rack{grid-template-columns:repeat(11,minmax(0,1fr));gap:1px}.room-expanded .key-pad{border:0}.room-expanded .key-pad kbd{padding:3px;font-size:8px}.room-expanded .key-pad span{display:none}}
@media(max-width:370px){.quick-groove>label{display:none}.custom-heading{flex-wrap:wrap}.custom-pads{grid-template-columns:1fr}.key-rack{grid-template-columns:repeat(4,minmax(0,1fr))}.key-pad:nth-child(4),.key-pad:nth-child(8){border-right:0}.key-pad:nth-child(6){border-right:1px solid #cbd0c1}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* A tuned cowbell rack for melodic phonk beats. */
.phonk-section{margin:0 0 24px;border:1px solid #555143;border-radius:12px;background:radial-gradient(ellipse at 100% 0,#80634b26,transparent 65%),#292c25;padding:25px 27px 18px;color:#e7e4d4}.phonk-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.phonk-heading .eyebrow{font-size:8px;color:#c79f79;margin-bottom:9px;letter-spacing:1.4px}.phonk-heading .eyebrow>span{width:5px;height:5px;background:#cf9c70}.phonk-heading h2{color:#eee8d9;font-size:25px}.phonk-heading p:not(.eyebrow){font-size:11px;color:#a9aa97;line-height:1.5;margin:0}.phonk-demos{display:flex;gap:8px}.phonk-demos button{display:flex;align-items:center;gap:8px;text-align:left;border:1px solid #6a6753;background:#3a3d31;color:#e6d5b7;padding:10px 13px;border-radius:6px}.phonk-demos button:hover{background:#4c4b38;border-color:#b29b72}.phonk-demos button svg{width:16px;height:16px;color:#cbb084}.phonk-demos button span{font-size:10px}.phonk-demos button small{display:block;font:7px var(--mono);letter-spacing:1px;margin-top:4px;color:#a59f86}.phonk-pads{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}.phonk-pad{min-width:0;border:1px solid #645e48;background:linear-gradient(140deg,#444337,#32372d);color:#ddd4b9;border-radius:8px;padding:11px 13px 13px;position:relative;touch-action:none;user-select:none;overflow:hidden;transition:border-color .12s,background .12s}.phonk-pad:hover{border-color:#c8ad7c}.phonk-pad:focus-visible{outline:2px solid #d1aa77;outline-offset:3px}.phonk-pad-top{display:flex;align-items:center;justify-content:space-between;font:7px var(--mono);letter-spacing:.7px;color:#a9a58a;gap:4px;min-width:0}.phonk-pad-top>span{white-space:nowrap}.phonk-pad kbd{background:#292e25;border-color:#63684f;color:#d7d5b9;font-size:10px;padding:3px 6px;box-shadow:0 2px #151d13}.phonk-pad>svg{width:100%;height:88px;display:block;margin:3px auto 1px;max-width:135px;fill:none;stroke:none;pointer-events:none}.phonk-pad-bottom{display:flex;align-items:center;justify-content:space-between;gap:5px}.phonk-pad-bottom strong{font:600 19px var(--display);letter-spacing:-.7px;color:#e5d6b3}.phonk-pad-bottom>span{font-size:9px;color:#a9a991}.phonk-pad:nth-child(2){background:linear-gradient(140deg,#4c4033,#35362b)}.phonk-pad:nth-child(3){background:linear-gradient(140deg,#43463b,#2c342b)}.phonk-pad:nth-child(4){background:linear-gradient(140deg,#4b403a,#34332b)}.phonk-pad:last-child{background:linear-gradient(140deg,#333d37,#282f29);border-color:#4d6253}.phonk-pad.is-hit{background:#7d633d;border-color:#edd4a1;box-shadow:inset 0 0 28px #ebcc9055,0 0 0 2px #d0a96e44}.phonk-pad.is-hit>svg{transform:translateY(2px)}.phonk-pad:last-child.is-hit{background:#4b6144;border-color:#becf9d}.phonk-footer{display:flex;justify-content:space-between;align-items:center;margin-top:15px;gap:15px}.phonk-footer>span{display:flex;align-items:center;gap:5px;font:7px var(--mono);letter-spacing:.6px;color:#979c85}.phonk-footer kbd{padding:1px 4px;font-size:8px;border-color:#61654f;background:none;color:#babc9c;box-shadow:none}.phonk-footer i{font:9px var(--font);letter-spacing:0;margin-left:4px}.phonk-footer a{font-size:9px;color:#ceb68c;white-space:nowrap}.phonk-footer a svg{width:13px;height:13px;margin-left:5px}.preset-list{grid-template-columns:repeat(5,minmax(0,1fr))}.preset-chip[data-preset^=phonk]{background:#efe6d5;border-color:#d9c5a4}.preset-chip[data-preset^=phonk][aria-pressed=true]{background:#dcc5a5;border-color:#a1855c;color:#5c482c}
@media(max-width:860px){.phonk-heading{align-items:flex-start;flex-wrap:wrap;gap:14px}.phonk-demos{margin-left:auto}.phonk-pad{padding:9px}.phonk-pad-top>span{font-size:6px}.phonk-footer>span>i{display:none}.preset-list{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:620px){.phonk-section{padding:20px 15px 15px}.phonk-heading{display:block;margin-bottom:16px}.phonk-heading h2{font-size:23px}.phonk-heading p:not(.eyebrow){font-size:10px;max-width:270px}.phonk-demos{margin:14px 0 0;display:grid;grid-template-columns:1fr 1fr}.phonk-demos button{padding:10px}.phonk-pads{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.phonk-pad{grid-column:span 2;padding:9px 8px}.phonk-pad:nth-last-child(-n+2){grid-column:span 3}.phonk-pad-top{font-size:6px}.phonk-pad-top kbd{font-size:9px;padding:2px 4px}.phonk-pad>svg{height:74px;max-width:110px;margin:4px auto}.phonk-pad-bottom strong{font-size:16px}.phonk-pad-bottom>span{font-size:8px}.phonk-pad-top>span{font-size:5.5px;letter-spacing:0}.phonk-footer{flex-wrap:wrap;gap:11px}.phonk-footer>span{font-size:7px}.phonk-footer a{font-size:9px}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-chip{padding:9px 11px}.preset-chip strong{font-size:10px}.preset-chip small{font-size:8px}}