:is(html:has(.band-page),body:has(.band-page)){background:#11151a;padding-bottom:0}.band-page{--band-line:#3c424a;--band-muted:#a8b0ba;color:#f5f2eb;min-height:100dvh;padding:0 24px max(32px, env(safe-area-inset-bottom));background:#11151a}.band-shell{max-width:1240px;margin:auto}.band-page :is(button,input){font:inherit}.band-page button{color:inherit;cursor:pointer;border:1px solid var(--band-line);touch-action:manipulation;background:#2b3139;border-radius:7px;min-height:36px;padding:9px 13px;font-size:12px;font-weight:600}.band-page button:hover:not(:disabled){background:#353d47;border-color:#a8b0ba}.band-page button:disabled{opacity:.4;cursor:not-allowed}.band-page :is(button,input,a,[tabindex]):focus-visible{outline-offset:3px;outline:2px solid #7dcec0}.band-header{border-bottom:1px solid var(--band-line);justify-content:space-between;align-items:center;gap:16px;min-height:76px;display:flex}.band-header strong{font-size:17px}.band-header strong span{color:var(--band-muted);margin-left:8px;font-weight:500}.band-back,.band-dj-link{font-size:13px;font-weight:600}.band-dj-link{color:#7dcec0}.band-intro{justify-content:space-between;align-items:center;gap:16px;padding:32px 0 26px;display:flex}.band-intro h1{letter-spacing:-1.5px;margin-bottom:8px;font-size:clamp(28px,4vw,42px);font-weight:750}.band-intro p,.band-section-heading p{color:var(--band-muted);font-size:13px;line-height:1.7}.band-loop-label{white-space:nowrap;color:var(--band-muted);font-size:12px}.band-library{padding-bottom:10px}.band-section-heading{justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;display:flex}.band-section-heading h2{font-size:16px;font-weight:650}.band-section-heading>span{color:var(--band-muted);font-size:11px}.band-segments{flex-shrink:0;gap:4px;display:flex}.band-page .band-segments button{background:0 0;border-color:#0000}.band-page .band-segments button[aria-pressed=true]{color:#bce4dc;background:#35403e;border-color:#607872}.band-templates{grid-template-columns:repeat(3,1fr);gap:10px;display:grid}.band-template{background:#20252b;border:1px solid #303740;border-left:3px solid #525b68;border-radius:6px;padding:16px}.band-template.is-selected{background:#2b292a;border-left-color:#f58d72}.band-template-title{justify-content:space-between;align-items:center;gap:8px;display:flex}.band-template h3{font-size:14px;font-weight:650}.band-template-title>span{color:#d1bcb3;white-space:nowrap;font-variant-numeric:tabular-nums;font-size:10px}.band-template p{color:var(--band-muted);min-height:18px;margin-top:6px;font-size:11px;line-height:1.6}.band-template-bottom{justify-content:space-between;align-items:center;gap:16px;margin-top:15px;display:flex}.band-template-bottom button{flex-shrink:0;min-height:32px;padding:5px 10px}.band-rhythm{align-items:center;gap:3px;height:20px;display:flex}.band-rhythm i{background:#4a5059;border-radius:1px;width:5px;height:5px}.band-rhythm i[data-hit=true]{background:#ed9b82;height:18px}.band-rhythm i[data-snare=true]{background:#7dcec0;height:12px}.band-library-footer{justify-content:space-between;align-items:center;gap:12px;padding:10px 0;display:flex}.band-library-footer p{color:var(--band-muted);font-size:11px}.band-library-footer button{flex-shrink:0}.band-transport{z-index:5;background:#242a32;border:1px solid #46515c;border-radius:10px;align-items:center;gap:12px;padding:14px;display:flex;position:sticky;top:8px;box-shadow:0 6px 20px #0004}.band-page .band-play{color:#211b18;background:#f58d72;border-color:#f58d72;padding:12px 20px;font-weight:750}.band-page .band-play:hover:not(:disabled){background:#ffa88e;border-color:#ffa88e}.band-tempo{color:#c4ccd5;white-space:nowrap;font-size:11px}.band-tempo input{color:#f5f2eb;background:#11151a;border:1px solid #46515c;border-radius:5px;width:65px;margin:0 5px;padding:8px 4px 8px 8px;font-size:15px;font-weight:700}.band-transport-status{grid-template-columns:7px auto;align-items:center;gap:3px 7px;margin-right:auto;font-size:12px;display:grid}.band-transport-status>span{background:#828b97;border-radius:50%;width:6px;height:6px}.band-transport-status>span.is-playing{background:#7dcec0}.band-transport-status small{color:var(--band-muted);grid-column:2;font-size:10px}.band-notice{color:#bac6cf;min-height:42px;padding:14px 2px;font-size:12px;line-height:1.5}.band-error{color:#ffb2b2;background:#451d29;border-radius:6px;margin-top:12px;padding:12px}.band-workspace{background:#1b2026;border:1px solid #343b43;border-radius:10px;overflow:hidden}.band-instruments{border-bottom:1px solid #343b43;gap:6px;padding:12px;display:flex;overflow-x:auto}.band-page .band-instruments button{white-space:nowrap;background:0 0;border-color:#0000;align-items:center;gap:8px;display:flex}.band-page .band-instruments button[aria-pressed=true]{border-color:var(--instrument);background:#30363e}.band-instruments i{background:var(--instrument);border-radius:50%;width:7px;height:7px}.band-instruments button>span{color:var(--band-muted);font-size:10px}.band-editor{grid-template-columns:270px minmax(0,1fr);display:grid}.band-pad-section{border-right:1px solid #343b43;padding:22px 20px}.band-pads{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.band-page .band-pads button{aspect-ratio:1;-webkit-user-select:none;user-select:none;background:#343a44;border-bottom:3px solid #5b5d60;flex-direction:column;justify-content:center;align-items:center;gap:7px;min-height:52px;padding:6px 2px;font-size:10px;display:flex}.band-page .band-pads button.is-hit,.band-page .band-pads button:active{background:var(--instrument);color:#171b20;border-color:var(--instrument)}.band-pads kbd{font:inherit;opacity:.6;font-size:9px}.band-pad-hint{color:var(--band-muted);margin-top:10px;font-size:10px;line-height:1.7}.band-muted-hint{color:#f5c17d;margin-top:8px;font-size:11px}.band-recording{flex-wrap:wrap;gap:6px;margin-top:22px;display:flex}.band-recording button{padding:7px 9px;font-size:10px}.band-page .is-recording{background:#882c3a;border-color:#d25d6e}.band-sequence-section{min-width:0;padding:22px}.band-follow{color:var(--band-muted);align-items:center;gap:6px;font-size:10px;display:flex}.band-follow input{accent-color:#7dcec0}.band-bars{gap:5px;margin-bottom:8px;display:flex}.band-bars button{min-height:30px;padding:6px 13px;font-size:10px}.band-page .band-bars button[aria-pressed=true]{border-color:var(--instrument);color:var(--instrument)}.band-grid-scroll{padding-bottom:5px;overflow-x:auto}.band-grid{min-width:480px}.band-grid-row{grid-template-columns:46px repeat(16,minmax(21px,1fr));align-items:center;gap:4px;margin-bottom:4px;display:grid}.band-grid-row>span{color:var(--band-muted);font-size:9px}.band-grid-labels>span{text-align:center}.band-page .band-grid-row>button{background:#272d35;border:1px solid #3d4650;border-radius:3px;height:26px;min-height:26px;padding:0}.band-page .band-grid-row>button[data-beat=true]{background:#353d48}.band-page .band-grid-row>button[aria-pressed=true]{background:var(--instrument);border-color:var(--instrument)}.band-page .band-grid-row>button[data-current=true]{border-color:#fff;box-shadow:inset 0 0 0 2px #fff}.band-melodies{flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px;display:flex}.band-melodies>span{color:var(--band-muted);margin-right:4px;font-size:10px}.band-melodies>button{min-height:28px;padding:5px 8px;font-size:10px}.band-mixer{margin-top:30px}.band-channel-grid{background:#20252b;border:1px solid #343b43;border-radius:8px;grid-template-columns:repeat(6,1fr);display:grid;overflow:hidden}.band-channel{border-right:1px solid #343b43;border-top:2px solid var(--instrument);min-width:0;padding:18px 14px}.band-channel:last-child{border-right:0}.band-channel h3{color:var(--instrument);margin-bottom:18px;font-size:11px;font-weight:600}.band-slider{min-width:0;display:block}.band-slider>span{color:#bfc8d2;justify-content:space-between;gap:5px;font-size:10px;display:flex}.band-channel .band-slider>span{font-size:0}.band-slider output{color:#e7ebef;font-variant-numeric:tabular-nums;font-size:11px}.band-slider input{width:100%;height:30px;accent-color:var(--instrument,#7dcec0);cursor:pointer}.band-channel-buttons{gap:5px;margin-top:6px;display:flex}.band-channel-buttons button{flex:1;min-width:0;min-height:30px;padding:6px 5px;font-size:10px}.band-page .band-channel-buttons button[aria-pressed=true]{background:var(--instrument);color:#11151a;border-color:var(--instrument)}.band-master-controls{grid-template-columns:repeat(4,1fr);gap:30px;padding:22px 6px;display:grid}.band-footer{color:var(--band-muted);border-top:1px solid #343b43;flex-wrap:wrap;justify-content:space-between;gap:10px;padding-top:22px;font-size:11px;line-height:1.7;display:flex}.band-footer a{color:#7dcec0;text-underline-offset:3px;text-decoration:underline}@media (max-width:1000px){.band-editor{grid-template-columns:230px minmax(0,1fr)}.band-pad-section{padding:18px 12px}.band-channel-grid{grid-template-columns:repeat(3,1fr)}.band-channel:nth-child(3){border-right:0}.band-transport{flex-wrap:wrap;gap:8px}.band-rhythm{gap:2px}.band-rhythm i{width:4px}.band-template{padding:12px}}@media (max-width:760px){.band-page{padding-inline:14px}.band-templates{grid-template-columns:repeat(2,1fr)}.band-editor{grid-template-columns:1fr}.band-pad-section{border-bottom:1px solid #343b43;border-right:0;padding:18px}.band-pads{grid-template-columns:repeat(8,1fr)}.band-recording{margin-top:12px}.band-sequence-section{padding:18px}.band-transport{position:static}.band-loop-label{display:none}.band-master-controls{grid-template-columns:repeat(2,1fr);gap:18px}}@media (max-width:480px){.band-header{gap:8px;min-height:64px}.band-header strong{font-size:13px}.band-header strong span{margin:2px 0 0;font-size:9px;display:block}.band-back,.band-dj-link{font-size:11px}.band-intro{padding:25px 0}.band-intro h1{letter-spacing:-.9px;font-size:29px}.band-intro p{font-size:11px}.band-library>.band-section-heading{flex-direction:column;align-items:start;gap:8px}.band-template-title{flex-direction:column;align-items:start;gap:5px}.band-template h3{font-size:12px}.band-template p{min-height:48px;font-size:10px}.band-template-bottom{flex-wrap:wrap;gap:8px;margin-top:8px}.band-template-bottom button{width:100%;margin-top:3px}.band-transport{padding:10px}.band-page .band-play{padding:11px 14px}.band-transport-status{order:4;width:100%;padding:4px;display:flex}.band-transport-status small{margin-left:auto}.band-pads{grid-template-columns:repeat(4,1fr)}.band-page .band-pads button{aspect-ratio:1.25;min-height:58px;font-size:11px}.band-channel{padding:14px 9px}.band-channel h3{min-height:26px;font-size:10px}.band-section-heading h2{font-size:14px}.band-mixer .band-section-heading{align-items:start}.band-mixer .band-section-heading>button{flex-shrink:0;padding:6px 8px;font-size:10px}}