.drumkit-app *,.drumkit-app *:before,.drumkit-app *:after{box-sizing:border-box}.drumkit-app{--rail-width: 58px;--safe-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));--safe-right: var(--safe-area-inset-right, env(safe-area-inset-right, 0px));--safe-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px));--safe-left: var(--safe-area-inset-left, env(safe-area-inset-left, 0px));--glass-bg: rgba(255, 255, 255, .7);--glass-border: rgba(255, 255, 255, .5);--accent-pink: #FF4D97;--accent-blue: #4D96FF;--accent-green: #6BCB77;--accent-yellow: #FFD93D;--ink: #0f172a;--ink-soft: #64748b;--ink-faint: #94a3b8}.drumkit-app{margin:0;height:100%}.drumkit-app{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;background:#f8fafc;background-image:radial-gradient(at 0% 0%,rgba(77,150,255,.12) 0px,transparent 50%),radial-gradient(at 100% 0%,rgba(255,77,151,.12) 0px,transparent 50%),radial-gradient(at 100% 100%,rgba(107,203,119,.12) 0px,transparent 50%),radial-gradient(at 0% 100%,rgba(255,217,61,.12) 0px,transparent 50%);min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;color:var(--ink);overflow-x:hidden}.drumkit-app [hidden]{display:none!important}.drumkit-app #pixi-root{position:absolute;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:auto}.drumkit-app #pixi-root canvas{display:block}.drumkit-app .pixiholder{position:relative;width:100%;height:100%;aspect-ratio:612 / 385}.drumkit-app .pixiholder canvas{display:block}.drumkit-app.has-pixi:has(.pixiholder){min-height:0;padding:0;overflow:hidden;display:block;container-type:inline-size}@container (max-width: 480px){.drumkit-app .pixiholder{aspect-ratio:4 / 5}.drumkit-app.has-pixi .pixiholder~.vitreous-card{--rail-width: 44px;padding:10px}.drumkit-app.has-pixi .pixiholder~.vitreous-card>header{margin-bottom:10px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .app-title-name{font-size:14px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .app-kit{font-size:9px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .plan-badge{font-size:8px;padding:1px 6px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .tool-rail{gap:4px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .tool-btn{padding:5px 3px 4px;border-radius:12px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .tool-btn svg{width:17px;height:17px}.drumkit-app.has-pixi .pixiholder~.vitreous-card .tool-label{font-size:6.5px}}.drumkit-app.has-pixi .pixiholder~.vitreous-card{position:absolute;top:0;right:0;bottom:0;left:0;max-width:none;border-radius:inherit;padding:16px}.drumkit-app.has-pixi:has(.pixiholder){background:none}.drumkit-app.has-pixi .vitreous-card{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;border-color:transparent;box-shadow:none;pointer-events:none}.drumkit-app.has-pixi .refraction-overlay{display:none}.drumkit-app.has-pixi header,.drumkit-app.has-pixi .drawer,.drumkit-app.has-pixi .drawer-backdrop.open,.drumkit-app.has-pixi .pro-overlay{pointer-events:auto}.drumkit-app.is-dragging-pad header,.drumkit-app.is-dragging-pad .app-content{pointer-events:none}.drumkit-app .vitreous-card{position:relative;z-index:1;width:100%;max-width:420px;background:var(--glass-bg);backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid var(--glass-border);box-shadow:0 20px 40px #0000000a,inset 0 0 0 1px #fff6;border-radius:40px;padding:32px;overflow:hidden}.drumkit-app .refraction-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,#fff6,#fff0,#ffffff1a);pointer-events:none}.drumkit-app .vitreous-card>header{position:relative;display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.drumkit-app .app-logo-wrap{position:relative;display:inline-block;background:none;border:0;padding:0;cursor:pointer}.drumkit-app .app-logo-wrap:active{transform:scale(.93)}.drumkit-app .app-logo-wrap.is-pro{cursor:default}.drumkit-app .app-logo-wrap.is-pro:active{transform:none}.drumkit-app .app-logo{width:var(--rail-width);height:auto;display:block}.drumkit-app .plan-badge{position:absolute;bottom:-4px;right:-6px;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:999px;background:var(--ink);color:#fff;box-shadow:0 2px 6px #0f172a40}.drumkit-app .app-title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;line-height:1.1;color:#1e293b;white-space:nowrap;pointer-events:none}.drumkit-app .app-title-name{font-weight:800;font-size:15px;letter-spacing:-.02em}.drumkit-app .app-kit{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}.drumkit-app .app-kit:empty{display:none}.drumkit-app .hero-stage{position:relative;padding:24px 0 16px;text-align:center;user-select:none;-webkit-user-select:none}.drumkit-app .hero-caption{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint)}.drumkit-app .hero-value{font-family:JetBrains Mono,monospace;font-size:68px;line-height:1;font-weight:700;color:#1e293b;letter-spacing:-.04em;margin-top:8px}.drumkit-app .session-timer{font-family:JetBrains Mono,monospace;font-size:22px;font-weight:700;letter-spacing:.08em;text-align:center;color:#1e293b;height:48px;line-height:48px;margin-top:24px;opacity:.4}.drumkit-app .session-timer.is-running{opacity:1;color:var(--accent-blue)}.drumkit-app .stat-card{position:relative;background:#fff9;border:1px solid #ffffff;border-radius:24px;padding:14px 16px}.drumkit-app .stat-label{font-size:10px;font-weight:700;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.1em}.drumkit-app .stat-value{font-family:JetBrains Mono,monospace;font-size:18px;font-weight:700;color:#1e293b;letter-spacing:-.03em}.drumkit-app .stat-card.is-disabled{opacity:.45;filter:blur(1.5px);pointer-events:none}.drumkit-app .pro-lock{display:none;position:absolute;top:0;right:0;bottom:0;left:0;align-items:center;justify-content:center;gap:8px;border-radius:inherit;background:#ffffff8c;font-size:12px;font-weight:700;color:var(--ink-soft)}.drumkit-app .pro-locked.is-locked{cursor:pointer}.drumkit-app .pro-locked.is-locked .pro-lock{display:flex}.drumkit-app .pro-locked.is-locked .stat-value{filter:blur(5px)}.drumkit-app .pro-lock-icon{font-size:14px}.drumkit-app .tap-button{border-radius:24px;font-weight:700;padding:16px 20px;border:none;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px}.drumkit-app .btn-icon{width:17px;height:17px;flex:0 0 auto;display:block}.drumkit-app .btn-icon-slot{display:inline-flex;align-items:center}.drumkit-app .record-export.is-locked{opacity:.55}.drumkit-app .tap-button:active{transform:scale(.96)}.drumkit-app .tap-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.drumkit-app .btn-primary-solid{background:var(--ink);color:#fff;box-shadow:0 10px 24px #0f172a2e}.drumkit-app .btn-primary-solid:hover:not(:disabled){background:#1e293b;color:#fff}.drumkit-app .btn-primary-solid .dot{background:var(--accent-pink);width:8px;height:8px;border-radius:50%}.drumkit-app .btn-outline{background:#fff;color:var(--ink);border:1px solid #e2e8f0;box-shadow:0 8px 20px #0f172a0f}.drumkit-app .btn-outline:hover:not(:disabled){background:#f8fafc}.drumkit-app .btn-soft{background:#ffffff8c;color:var(--ink-soft);border:1px solid #e2e8f0}.drumkit-app .btn-soft:hover:not(:disabled){background:#fff;color:var(--ink)}.drumkit-app .status{display:block;flex:0 0 auto;align-self:flex-start;max-width:min(340px,100%);margin-top:8px;padding:9px 14px;border-radius:14px;font-size:12px;line-height:1.25;font-weight:600;box-sizing:border-box;visibility:hidden;opacity:0}.drumkit-app .status.visible{visibility:visible;opacity:1}.drumkit-app .status.analyzing{background:#fef3c7;color:#92400e}.drumkit-app .status.error{background:#fee2e2;color:#991b1b}.drumkit-app .status.success{background:#dcfce7;color:#166534}.drumkit-app .about-view{font-size:13px;line-height:1.5}.drumkit-app .about-view h2{font-size:20px;margin-bottom:1rem}.drumkit-app .about-view p{margin-bottom:10px}.drumkit-app .about-view hr{margin:1rem 0}.drumkit-app .about-view .tap-button{width:100%;margin-bottom:8px}.drumkit-app .about-label{font-size:11px;color:var(--ink-soft)}.drumkit-app .about-version{color:var(--ink-soft)}.drumkit-app .about-benefits{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}.drumkit-app .about-benefits li{padding:8px 12px;border-radius:12px;background:#0f172a0d}.drumkit-app .site-view{font-size:13px;line-height:1.5}.drumkit-app .site-view h2{font-size:20px;margin-bottom:4px}.drumkit-app .site-lead{color:var(--ink-soft);margin-bottom:12px}.drumkit-app .site-carousel{margin:0 0 14px}.drumkit-app .site-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px}.drumkit-app .site-track::-webkit-scrollbar{display:none}.drumkit-app .site-track{cursor:grab}.drumkit-app .site-track.is-dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}.drumkit-app .site-slide img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;pointer-events:none}.drumkit-app .site-slide{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;margin:0;border-radius:14px;overflow:hidden;background:#0f172a0d}.drumkit-app .site-slide img{display:block;width:100%;aspect-ratio:2 / 1;object-fit:cover;object-position:top;background:#fff}.drumkit-app .site-slide figcaption{padding:10px 12px}.drumkit-app .site-slide strong{display:block;font-size:13px}.drumkit-app .site-slide span{font-size:12px;color:var(--ink-soft)}.drumkit-app .site-dots{display:flex;justify-content:center;gap:6px;margin-top:10px}.drumkit-app .site-dot{width:8px;height:8px;padding:0;border:0;border-radius:4px;background:#0f172a33;cursor:pointer}.drumkit-app .site-dot.is-active{width:20px;background:#29b6f6}.drumkit-app .site-view .tap-button{width:100%;margin-bottom:8px}.drumkit-app .site-note{font-size:12px;color:var(--ink-soft);margin:6px 0 0}.drumkit-app .menu-link-site{background:#29b6f6;color:#fff;border-color:transparent}.drumkit-app .menu-button{background:transparent;border:0;padding:8px;width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:5px;cursor:pointer;border-radius:8px}.drumkit-app .menu-button:hover,.drumkit-app .menu-button:focus-visible{background:#0f172a0f;outline:none}.drumkit-app .menu-button span{display:block;width:22px;height:2px;background:var(--ink);border-radius:1px}.drumkit-app .menu-button[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}.drumkit-app .menu-button[aria-expanded=true] span:nth-child(2){opacity:0}.drumkit-app .menu-button[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}.drumkit-app .menu-nav{margin-top:24px;display:flex;flex-direction:column;gap:12px}.drumkit-app .menu-link,.drumkit-app .back-link{text-decoration:none;width:100%}.drumkit-app .menu-link.active{background:#fff;color:var(--ink);border-color:#cbd5e1}.drumkit-app .back-link{margin-top:16px}.drumkit-app .upgrade-btn{margin-top:8px}.drumkit-app .drawer-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;background:#0f172a2e;backdrop-filter:blur(6px) saturate(120%);-webkit-backdrop-filter:blur(6px) saturate(120%);z-index:20;opacity:0;pointer-events:none}.drumkit-app .drawer-backdrop.open{opacity:1;pointer-events:auto}.drumkit-app .drawer{position:absolute;left:var(--safe-left);right:var(--safe-right);bottom:calc(var(--safe-bottom) + var(--ad-banner-pad, 0px));max-height:min(85%,calc(100% - var(--safe-top) - var(--safe-bottom) - var(--ad-banner-pad, 0px) - 8px));background:#fffffffa;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top-left-radius:24px;border-top-right-radius:24px;box-shadow:0 -10px 40px #00000014;padding:24px 24px 40px;z-index:21;transform:translateY(calc(100% + var(--safe-bottom) + var(--ad-banner-pad, 0px)));overflow-y:auto}.drumkit-app .drawer.open{transform:translateY(0)}.drumkit-app .drawer.is-cramped{padding-top:12px}.drumkit-app .drawer.is-cramped .drawer-handle{margin-bottom:2px}.drumkit-app .drawer.is-cramped .kits-title,.drumkit-app .drawer.is-cramped .mixer-title,.drumkit-app .drawer.is-cramped .effects-title,.drumkit-app .drawer.is-cramped .record-title,.drumkit-app .drawer.is-cramped .menu-title,.drumkit-app .drawer.is-cramped .site-view h2,.drumkit-app .drawer.is-cramped .about-title{font-size:13px;margin-bottom:4px}.drumkit-app .drawer.is-cramped .site-slide img{aspect-ratio:3 / 1}.drumkit-app .drawer.is-cramped .kits-hint,.drumkit-app .drawer.is-cramped .mixer-hint,.drumkit-app .drawer.is-cramped .effects-hint,.drumkit-app .drawer.is-cramped .record-hint{display:none}.drumkit-app .drawer-handle{width:72px;height:22px;margin:-6px auto 8px;display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:none}.drumkit-app .drawer-handle:before{content:"";width:40px;height:4px;background:#cbd5e1;border-radius:2px}.drumkit-app .drawer.is-dragging{cursor:grabbing}.drumkit-app .drawer.is-dragging .drawer-handle:before{background:#94a3b8}.drumkit-app .drawer-close{position:absolute;top:2px;right:6px;background:transparent;border:0;font-size:28px;line-height:1;color:var(--ink);cursor:pointer;padding:4px 10px;border-radius:8px}.drumkit-app .drawer-close:hover,.drumkit-app .drawer-close:focus-visible{background:#0f172a0f;outline:none}.drumkit-app .pro-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:1999;display:flex;align-items:center;justify-content:center;padding:20px;background:#0f172a8c;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);animation:pro-overlay-fade .25s ease}@keyframes pro-overlay-fade{0%{opacity:0}to{opacity:1}}.drumkit-app .pro-overlay-card{background:#fffffff2;border:1px solid #ffffff;border-radius:28px;padding:28px 24px 20px;max-width:360px;width:100%;text-align:center;box-shadow:0 30px 80px #0f172a40;animation:pro-overlay-pop .3s cubic-bezier(.2,.9,.3,1.2)}@keyframes pro-overlay-pop{0%{transform:scale(.85);opacity:0}to{transform:scale(1);opacity:1}}.drumkit-app .pro-overlay-icon{font-size:44px;line-height:1;margin-bottom:10px}.drumkit-app .pro-overlay-title{font-size:24px;font-weight:800;color:#1e293b;letter-spacing:-.02em;margin:0 0 6px}.drumkit-app .pro-overlay-sub{color:var(--ink-soft);font-size:14px;margin:0 0 18px}.drumkit-app .pro-overlay-pitch{color:#1e293b;font-size:14px;font-weight:600;margin:0 0 8px}.drumkit-app .pro-overlay-benefits{list-style:none;padding:0;margin:0 0 20px;text-align:left;display:inline-block}.drumkit-app .pro-overlay-benefits li{font-size:14px;color:#334155;padding:4px 0}.drumkit-app .pro-overlay-card .tap-button{width:100%}.drumkit-app .pro-overlay-dismiss{background:none;border:none;color:var(--ink-faint);font-size:13px;font-weight:600;margin-top:10px;padding:8px 16px;cursor:pointer}.drumkit-app .pro-overlay-dismiss:hover{color:#475569}.drumkit-app.native{padding:0;align-items:flex-start;min-height:100vh;min-height:100dvh}.drumkit-app.native .vitreous-card{max-width:none;border-radius:0;padding:max(16px,var(--safe-top)) max(16px,var(--safe-right)) calc(max(50px,var(--safe-bottom)) + var(--ad-banner-pad, 0px)) max(16px,var(--safe-left));height:100vh;height:100dvh;overflow:hidden;display:flex;flex-direction:column}.drumkit-app.has-ad-banner{--ad-banner-pad: var(--ad-banner-h, 60px)}.drumkit-app.native .app-content{flex:1 1 0;min-height:0;display:flex;flex-direction:column}.drumkit-app .content-fill{display:flex;flex-direction:column;flex:1 1 0;min-height:0}.drumkit-app .pane{display:flex;flex-direction:column;min-width:0;min-height:0}.drumkit-app .pane-main{flex:1 1 0}.drumkit-app .pane-side{flex:0 0 auto;margin-top:8px}.drumkit-app.native .hero-stage{flex:1 1 0;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0}.drumkit-app.native .hero-value{font-size:clamp(40px,9dvh,68px);line-height:clamp(40px,9dvh,68px)}.drumkit-app.native .hero-caption{font-size:clamp(10px,1.5dvh,12px)}.drumkit-app.native .session-timer{margin-top:clamp(8px,1.8dvh,24px);height:clamp(28px,5dvh,48px);line-height:clamp(28px,5dvh,48px);font-size:clamp(16px,2.8dvh,22px)}@media (orientation: landscape){.drumkit-app.native .content-fill{flex-direction:row;gap:16px}.drumkit-app.native .pane-main{flex:1 1 58%;justify-content:center}.drumkit-app.native .pane-side{flex:1 1 42%;margin-top:0;justify-content:center;overflow-y:auto;min-height:0}.drumkit-app.native .pane-side>*{width:100%;max-width:420px;margin-left:auto;margin-right:auto}.drumkit-app.native header{margin-bottom:12px!important}.drumkit-app.native .vitreous-card{padding:12px max(20px,var(--safe-right)) calc(16px + var(--ad-banner-pad, 0px)) max(20px,var(--safe-left))}.drumkit-app.native .hero-value{font-size:clamp(44px,12dvh,96px);line-height:1}.drumkit-app.native .session-timer{margin-top:clamp(6px,2dvh,20px);height:auto;line-height:1.4}}@media (max-height: 500px){.drumkit-app .pro-overlay{padding:10px}.drumkit-app .pro-overlay-card{padding:16px 20px 12px;max-width:460px;max-height:100%;overflow-y:auto}.drumkit-app .pro-overlay-icon{font-size:26px;margin-bottom:4px}.drumkit-app .pro-overlay-title{font-size:19px}.drumkit-app .pro-overlay-sub{font-size:13px;margin-bottom:10px}.drumkit-app .pro-overlay-pitch{margin-bottom:4px}.drumkit-app .pro-overlay-benefits{margin-bottom:12px}.drumkit-app .pro-overlay-benefits li{font-size:13px;padding:2px 0}.drumkit-app .pro-overlay-dismiss{margin-top:4px;padding:6px 16px}.drumkit-app .drawer{max-height:min(92%,calc(100% - var(--safe-top) - var(--safe-bottom) - var(--ad-banner-pad, 0px) - 8px));padding:14px 20px 20px}.drumkit-app .drawer-handle{margin-bottom:10px}.drumkit-app .menu-nav{margin-top:14px;gap:10px}.drumkit-app .tap-button{padding:12px 20px}}@media (orientation: landscape) and (max-height: 500px){.drumkit-app .menu-nav{display:grid;grid-template-columns:1fr 1fr;align-content:start}.drumkit-app .about-view{column-count:2;column-gap:24px}.drumkit-app .about-view h2{column-span:all}.drumkit-app .about-view .back-link{break-inside:avoid}.drumkit-app .site-view{max-width:640px;margin-inline:auto}}.drumkit-app .tool-rail{align-self:flex-start;display:flex;flex-direction:column;gap:6px;pointer-events:auto}.drumkit-app .tool-btn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:var(--rail-width);padding:8px 4px 6px;border:0;border-radius:16px;background:#ffffffd1;color:var(--ink);font-family:inherit;cursor:pointer;box-shadow:0 4px 14px #0f172a1a;touch-action:manipulation}.drumkit-app .tool-btn svg{width:22px;height:22px}.drumkit-app .tool-label{font-size:8px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-faint);line-height:1.1}.drumkit-app .tool-btn:active{background:#fffffff2;transform:scale(.96)}.drumkit-app .tool-btn.is-active{background:var(--ink);color:#fff}.drumkit-app .tool-btn.is-active .tool-label{color:#ffffffb8}.drumkit-app.embed .menu-button,.drumkit-app.embed .tool-btn[data-route=record],.drumkit-app.embed .tool-btn[data-action=remote],.drumkit-app .tool-btn-edit{display:none}.drumkit-app.is-editing-kit .tool-btn:not(.tool-btn-edit){display:none}.drumkit-app.is-editing-kit .tool-btn-edit{display:flex}.drumkit-app .tool-btn-edit#kitAddBtn svg{stroke-width:2.6}.drumkit-app .edit-hint{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;width:max-content;max-width:calc(100% - 2 * (var(--rail-width) + 18px));margin:0;text-align:center;font-size:11px;line-height:1.3;font-weight:600;color:var(--ink-faint);pointer-events:none}.drumkit-app.is-editing-kit .app-title{display:none}.drumkit-app.is-editing-kit .edit-hint{display:block}.drumkit-app .mixer-title{font-size:20px;margin-bottom:4px}.drumkit-app .mixer-hint{font-size:12px;color:var(--ink-faint);margin-bottom:14px}.drumkit-app .mixer-empty{font-size:13px;color:var(--ink-faint);padding:20px 0}.drumkit-app .mixer-strips{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none}.drumkit-app .mixer-strips::-webkit-scrollbar{display:none}.drumkit-app .mixer-strip{flex:1 0 66px;max-width:110px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;border-radius:14px;background:#0f172a0a}.drumkit-app .mixer-name{display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;border:0;background:transparent;padding:2px 0;cursor:pointer;font-family:inherit}.drumkit-app .mixer-dot{width:14px;height:14px;border-radius:50%;box-shadow:0 1px 3px #0f172a40}.drumkit-app .mixer-label{font-size:10px;font-weight:700;color:var(--ink);line-height:1.1;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drumkit-app .mixer-name:active .mixer-dot{transform:scale(.88)}.drumkit-app .mixer-readout{font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;font-weight:700;color:var(--ink-faint)}.drumkit-app .mixer-knobs{display:flex;flex-direction:column;align-items:center;gap:2px;margin-top:2px}.drumkit-app .mixer-knob-cell{display:flex;flex-direction:column;align-items:center}.drumkit-app .mixer-knob-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}.drumkit-app .knob{display:flex;flex-direction:column;align-items:center;gap:1px;touch-action:none;cursor:ns-resize;user-select:none;-webkit-user-select:none;border-radius:50%}.drumkit-app .knob>*{pointer-events:none}.drumkit-app .knob:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.drumkit-app .knob-dial{width:40px;height:40px;overflow:visible}.drumkit-app .knob-track{fill:none;stroke:#0f172a21;stroke-width:3.5;stroke-linecap:round}.drumkit-app .knob-value{fill:none;stroke:var(--ink);stroke-width:3.5;stroke-linecap:round}.drumkit-app .knob-pointer{stroke:var(--ink);stroke-width:2.5;stroke-linecap:round}.drumkit-app .knob.is-turning .knob-value,.drumkit-app .knob.is-turning .knob-pointer{stroke:var(--accent-blue)}.drumkit-app .knob-readout{font-family:JetBrains Mono,ui-monospace,monospace;font-size:10px;font-weight:700;color:var(--ink-faint)}.drumkit-app .kits-title{font-size:20px;margin-bottom:4px}.drumkit-app .kits-hint{font-size:12px;color:var(--ink-faint);margin-bottom:14px}.drumkit-app .kits-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.drumkit-app .kit-row{display:flex;align-items:center;width:100%;border-radius:14px;background:#0f172a0d;overflow:hidden}.drumkit-app .kit-row.is-playing{background:var(--ink);color:#fff}.drumkit-app .kit-row-pick{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:1 1 auto;min-width:0;padding:14px 4px 14px 16px;border:0;background:none;color:inherit;font-family:inherit;cursor:pointer;text-align:left}.drumkit-app .kit-row-pick:active{background:#0f172a1c}.drumkit-app .kit-row.is-playing .kit-row-pick:active{background:#ffffff24}.drumkit-app .kit-row-name{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drumkit-app .kit-row-state{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint)}.drumkit-app .kit-row.is-playing .kit-row-state{color:#ffffffb3}.drumkit-app .kit-row-lock{white-space:nowrap}.drumkit-app .kit-row-preview{display:flex;align-items:center;justify-content:center;flex:0 0 auto;align-self:stretch;width:44px;padding:0;border:0;background:none;color:inherit;cursor:pointer}.drumkit-app .kit-row-preview:active{background:#0f172a1c}.drumkit-app .kit-row.is-playing .kit-row-preview:active{background:#ffffff24}.drumkit-app .kit-row-preview-icon{width:0;height:0;margin-left:3px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:10px solid currentColor}.drumkit-app .kit-row.is-previewing .kit-row-preview-icon{width:11px;height:11px;margin-left:0;border:0;border-radius:2px;background:currentColor}.drumkit-app .kit-row.is-preview-loading .kit-row-preview-icon{width:13px;height:13px;margin-left:0;border:2px solid rgba(15,23,42,.2);border-top-color:currentColor;border-radius:50%;background:none;animation:kit-spin .7s linear infinite}.drumkit-app .kit-row.is-playing.is-preview-loading .kit-row-preview-icon{border-color:#ffffff4d;border-top-color:#fff}@media (prefers-reduced-motion: reduce){.drumkit-app .kit-row-preview-icon{animation:none}}.drumkit-app .effects-title{font-size:20px;margin-bottom:4px}.drumkit-app .effects-hint{font-size:12px;color:var(--ink-faint);margin-bottom:14px}.drumkit-app .effects-sections{display:flex;flex-direction:column;gap:12px}.drumkit-app .effects-section{padding:12px 14px 14px;border-radius:14px;background:#0f172a0a}.drumkit-app .effects-section-title{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:2px}.drumkit-app .effects-section-hint{font-size:11px;color:var(--ink-faint);margin-bottom:10px}.drumkit-app .effects-knobs{display:flex;gap:18px}.drumkit-app .effects-knob-cell{display:flex;flex-direction:column;align-items:center}.drumkit-app .effects-knob-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}.drumkit-app .effects-reset{margin-top:14px}.drumkit-app .side-drawer{position:absolute;top:var(--safe-top);bottom:calc(var(--safe-bottom) + var(--ad-banner-pad, 0px));right:var(--safe-right);width:min(320px,82%);display:flex;flex-direction:column;background:#fffffffa;backdrop-filter:blur(20px) saturate(180%);-webkit-backdrop-filter:blur(20px) saturate(180%);border-top-left-radius:24px;border-bottom-left-radius:24px;box-shadow:-10px 0 40px #00000014;padding:16px 18px;z-index:22;transform:translate(calc(100% + var(--safe-right)));pointer-events:auto}.drumkit-app .side-drawer.open{transform:translate(0)}.drumkit-app .side-drawer-head{display:flex;align-items:center;gap:8px;margin-bottom:14px;flex:0 0 auto}.drumkit-app .side-drawer-dot{width:14px;height:14px;border-radius:50%;flex:0 0 auto;box-shadow:0 1px 3px #0f172a40}.drumkit-app .side-drawer-dot[hidden]{display:none}.drumkit-app .side-drawer-title{flex:1 1 auto;font-size:15px;font-weight:800;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.drumkit-app .side-drawer-close{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;padding:0;border:0;border-radius:50%;background:#0f172a12;color:var(--ink);cursor:pointer}.drumkit-app .side-drawer-close svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.drumkit-app .side-drawer-close:active{background:#0f172a29}.drumkit-app .side-drawer-body{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none}.drumkit-app .side-drawer-body::-webkit-scrollbar{display:none}.drumkit-app .side-drawer-label{display:block;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}.drumkit-app .side-drawer-readout{font-family:JetBrains Mono,ui-monospace,monospace;letter-spacing:0;color:var(--ink)}.drumkit-app .chip-grid{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}.drumkit-app .sample-chip{border:0;border-radius:999px;padding:8px 13px;background:#0f172a0f;color:var(--ink);font-family:inherit;font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer}.drumkit-app .sample-chip:active{background:#0f172a29}.drumkit-app .sample-chip.is-current{background:var(--ink);color:#fff}.drumkit-app .pad-size{width:100%;accent-color:var(--ink);touch-action:none;cursor:pointer}.drumkit-app .kit-loading{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:#fffffff0;box-shadow:0 8px 24px #0f172a29;font-size:12px;font-weight:700;color:var(--ink);white-space:nowrap;z-index:19;pointer-events:none}.drumkit-app .kit-loading[hidden]{display:none}.drumkit-app .kit-loading-spinner{width:15px;height:15px;border-radius:50%;border:2px solid rgba(15,23,42,.15);border-top-color:var(--ink);animation:kit-spin .7s linear infinite}@keyframes kit-spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.drumkit-app .kit-loading-spinner{animation:none}}.drumkit-app .remote-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:calc(20px + var(--safe-top)) calc(20px + var(--safe-right)) calc(20px + var(--safe-bottom) + var(--ad-banner-pad, 0px)) calc(20px + var(--safe-left));background:#0f172a8c;backdrop-filter:blur(12px) saturate(140%);-webkit-backdrop-filter:blur(12px) saturate(140%);animation:pro-overlay-fade .25s ease;pointer-events:auto}.drumkit-app .remote-card{position:relative;background:#fff;border-radius:28px;padding:34px 28px 24px;max-width:400px;width:100%;text-align:center;box-shadow:0 30px 80px #0f172a40;animation:pro-overlay-pop .3s cubic-bezier(.2,.9,.3,1.2)}.drumkit-app .remote-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border:0;border-radius:50%;background:none;font-size:24px;line-height:1;color:var(--ink-faint);cursor:pointer}.drumkit-app .remote-close:hover{background:#0f172a0f;color:var(--ink)}.drumkit-app .remote-eyebrow{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-blue);margin:0 0 10px}.drumkit-app .remote-heading{font-size:26px;font-weight:800;letter-spacing:-.02em;color:#1e293b;margin:0 0 22px}.drumkit-app .code-input{display:flex;justify-content:center;gap:10px;margin-bottom:22px}.drumkit-app .code-box{flex:0 1 52px;min-width:0;aspect-ratio:1 / 1.15;padding:0;font-family:JetBrains Mono,ui-monospace,monospace;font-size:24px;font-weight:700;text-align:center;color:var(--ink);background:#fff;border:2px solid #e2e8f0;border-radius:14px}.drumkit-app .code-box:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px #4d96ff2e}.drumkit-app .code-box:disabled{background:#f8fafc;color:var(--ink-soft);border-color:#eef2f7}.drumkit-app .remote-join{display:block;width:100%;padding:15px 20px;border:0;border-radius:14px;background:var(--accent-blue);color:#fff;font-family:inherit;font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}.drumkit-app .remote-join:hover:not(:disabled){background:#3b82f6}.drumkit-app .remote-join:disabled{opacity:.45;cursor:default}.drumkit-app .remote-join.is-live{background:var(--ink)}.drumkit-app .remote-join.is-live:hover{background:#1e293b}.drumkit-app .remote-status{font-size:12.5px;font-weight:600;line-height:1.5;margin:14px 0 0;color:var(--ink-soft)}.drumkit-app .remote-status:empty{display:none}.drumkit-app .remote-how{display:block;margin:12px auto 0;padding:4px 8px;border:0;background:none;font-family:inherit;font-size:12px;font-weight:700;color:var(--accent-blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}.drumkit-app .remote-how[aria-expanded=true]{color:var(--ink-soft)}.drumkit-app .remote-how-panel{margin-top:10px;padding:12px 14px;border-radius:14px;background:#0f172a0d;text-align:left;font-size:12.5px;line-height:1.5;color:var(--ink-soft)}.drumkit-app .remote-how-panel[hidden]{display:none}.drumkit-app .remote-how-panel ol{margin:0 0 8px;padding-left:18px}.drumkit-app .remote-how-panel li{margin-bottom:4px}.drumkit-app .remote-how-panel li::marker{font-weight:700;color:var(--ink)}.drumkit-app .remote-how-panel p{margin:0}.drumkit-app .remote-how-panel a{color:var(--accent-blue);font-weight:700}.drumkit-app .remote-status.is-ok{color:#166534}.drumkit-app .remote-status.is-bad{color:#991b1b}.drumkit-app .remote-status.is-busy{color:var(--ink-soft)}.drumkit-app .tool-btn.is-connected{color:#15803d;background:#16a34a1f}.drumkit-app .tool-btn.is-connected svg{color:#15803d}.drumkit-app .record-title{font-size:20px;margin-bottom:4px}.drumkit-app .record-hint{font-size:12px;color:var(--ink-faint);margin-bottom:14px}.drumkit-app .record-row{display:flex;align-items:center;gap:10px;margin-bottom:12px}.drumkit-app .record-btn{display:flex;align-items:center;gap:8px;border:0;border-radius:999px;padding:10px 18px;background:var(--ink);color:#fff;font-family:inherit;font-size:13px;font-weight:800;cursor:pointer}.drumkit-app .record-dot{width:10px;height:10px;border-radius:50%;background:#ef4444}.drumkit-app .record-btn.is-recording .record-dot{animation:record-pulse 1s ease-in-out infinite}@keyframes record-pulse{50%{opacity:.25}}.drumkit-app .record-time{font-family:JetBrains Mono,ui-monospace,monospace;font-size:15px;font-weight:700;color:var(--ink)}.drumkit-app .record-meta,.drumkit-app .record-status{font-size:11px;color:var(--ink-faint);margin-bottom:10px}.drumkit-app .record-play{min-width:84px}.drumkit-app .record-pos{font-family:JetBrains Mono,ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--ink)}.drumkit-app .wave-wrap{position:relative;margin-bottom:8px;border-radius:12px;background:#0f172a0d;overflow:hidden;cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.drumkit-app .wave-wrap:focus-visible{outline:2px solid var(--accent-blue);outline-offset:2px}.drumkit-app .wave{display:block;width:100%;height:72px;color:var(--ink);pointer-events:none}.drumkit-app .wave-playhead{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--accent-blue);pointer-events:none}.drumkit-app .wave-wrap.is-scrubbing .wave-playhead{width:4px;margin-left:-2px;box-shadow:0 0 0 3px #4d96ff33}.drumkit-app.is-recording .tool-btn[data-route=record]{background:#ef4444;color:#fff;animation:record-pulse 1.4s ease-in-out infinite}.drumkit-app.is-recording .tool-btn[data-route=record] .tool-label{color:#ffffffd9}.drumkit-app.is-recording .app-logo-wrap:after{content:"";position:absolute;top:-2px;right:-2px;width:10px;height:10px;border-radius:50%;background:#ef4444;box-shadow:0 0 0 2px #fff;animation:record-pulse 1s ease-in-out infinite}.drumkit-app .scroll-hide::-webkit-scrollbar{display:none}.drumkit-app .scroll-hide{scrollbar-width:none}@media (orientation: landscape) and (max-height: 500px){.drumkit-app{--rail-width: 50px}.drumkit-app .mixer-title,.drumkit-app .effects-title,.drumkit-app .kits-title{font-size:16px;margin-bottom:2px}.drumkit-app .mixer-hint,.drumkit-app .effects-hint,.drumkit-app .kits-hint{font-size:11px;margin-bottom:8px}.drumkit-app .mixer-strip{flex:1 0 62px;padding:5px 4px 6px;gap:1px}.drumkit-app .mixer-name{gap:2px}.drumkit-app .drawer{padding-bottom:16px}.drumkit-app .mixer-knobs{gap:0}.drumkit-app .mixer-knobs .knob-dial{width:28px;height:28px}.drumkit-app .mixer-knob-label{font-size:8px}.drumkit-app .effects-sections{flex-direction:row;gap:10px}.drumkit-app .effects-section{flex:1 1 0;padding:10px 10px 12px}.drumkit-app .effects-knobs{gap:10px;justify-content:center}.drumkit-app .effects-reset{margin-top:10px}.drumkit-app .kits-list{grid-template-columns:repeat(4,minmax(0,1fr))}.drumkit-app .kit-row-pick{padding:10px 4px 10px 14px}.drumkit-app .kit-row-preview{width:38px}.drumkit-app .tool-rail{gap:4px}.drumkit-app .tool-btn{padding:5px 3px 4px;gap:1px;border-radius:12px}.drumkit-app .tool-btn svg{width:18px;height:18px}.drumkit-app .tool-label{font-size:7px}.drumkit-app .remote-card{padding:22px 20px 16px}.drumkit-app .remote-heading{font-size:20px}.drumkit-app .code-input{gap:8px;margin-bottom:14px}.drumkit-app .code-box{flex-basis:42px;font-size:19px}.drumkit-app .remote-join{padding:12px 16px}.drumkit-app .remote-how{margin-top:8px;font-size:11px}.drumkit-app .remote-how-panel{font-size:11.5px;padding:10px 12px}.drumkit-app .remote-card{max-height:100%;overflow-y:auto}.drumkit-app .record-title{font-size:16px;margin-bottom:2px}.drumkit-app .record-hint{font-size:11px;margin-bottom:8px}.drumkit-app .record-row{margin-bottom:8px}.drumkit-app .wave{height:52px}.drumkit-app .side-drawer{width:min(300px,60%)}.drumkit-app .side-drawer-head{margin-bottom:10px}.drumkit-app .side-drawer-title{font-size:14px}.drumkit-app .sample-chip{padding:6px 11px;font-size:11px}.drumkit-app .chip-grid{margin-bottom:12px}}