:root{--bg:#070d1a;--panel:#0f172a;--panel-2:#152238;--border:#1e293b;--line:#1e293b;--chip-bg:#070d1aeb;--text:#e2e8f0;--muted:#8a96ab;--accent:#4f8cff;--accent-2:#22d3ee;--accent-3:#a78bfa;--green:#34d399;--yellow:#fbbf24;--blue:#60a5fa;--danger:#ff5d73;--red:#ff5d73;--gutter:clamp(18px, 4vw, 48px);--suite-nav-h:44px;--radius-sm:8px;--radius:12px;--radius-lg:18px;--chip-radius:999px;--font-sans:"Segoe UI", system-ui, -apple-system, sans-serif;--font-mono:ui-monospace, Consolas, monospace;--font-size-chip:11px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-family:var(--font-sans)}*,:before,:after{box-sizing:border-box}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}html,body{margin:0}body{background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased}.suite-nav{z-index:70;height:var(--suite-nav-h);padding:0 var(--gutter);padding-left:max(var(--gutter), env(safe-area-inset-left));padding-right:max(var(--gutter), env(safe-area-inset-right));background:var(--chip-bg);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);align-items:center;gap:10px;display:flex;position:fixed;top:0;left:0;right:0}.suite-brand{color:var(--text);letter-spacing:.2px;white-space:nowrap;align-items:center;gap:9px;font-size:14px;font-weight:700;text-decoration:none;display:inline-flex}.suite-brand:hover .suite-brand-name{color:var(--accent-2)}.suite-logo{width:26px;height:26px;box-shadow:0 0 0 1px var(--border);border-radius:7px;flex:none}.suite-current{border-left:1px solid var(--border);color:var(--muted);letter-spacing:.2px;white-space:nowrap;align-items:center;gap:7px;margin-left:6px;padding-left:12px;font-size:12px;font-weight:600;display:inline-flex;overflow:hidden}.suite-current-icon{border-radius:5px;flex:none;width:18px;height:18px}.suite-current-name{text-overflow:ellipsis;overflow:hidden}.suite-actions{align-items:center;gap:8px;margin-left:auto;display:flex}.suite-menu{position:relative}.suite-menu summary{cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.3px;color:var(--muted);border:1px solid var(--border);border-radius:var(--chip-radius);background:var(--chip-bg);align-items:center;gap:6px;padding:6px 12px;font-size:12px;font-weight:600;list-style:none;transition:color .16s,border-color .16s;display:inline-flex}.suite-menu summary::-webkit-details-marker{display:none}.suite-menu summary:hover,.suite-menu[open] summary{color:var(--text);border-color:color-mix(in srgb, var(--accent) 55%, var(--border))}.suite-menu-list{background:var(--panel);border:1px solid var(--border);z-index:71;border-radius:12px;min-width:224px;max-height:min(72vh,520px);margin:0;padding:6px;list-style:none;position:absolute;top:calc(100% + 8px);right:0;overflow-y:auto;box-shadow:0 20px 50px #00000080}.suite-menu-list a{color:var(--text);white-space:nowrap;border-radius:8px;align-items:center;gap:10px;padding:8px 10px;font-size:13px;font-weight:500;text-decoration:none;display:flex}.suite-menu-list a:hover{background:color-mix(in srgb, var(--accent) 14%, transparent)}.suite-menu-list img{border-radius:5px;flex:none;width:18px;height:18px}.suite-menu-list li[data-current="1"] a{color:var(--accent-2);font-weight:700}.version-chip{top:calc(var(--suite-nav-h) + 12px);z-index:45;background:var(--chip-bg);border:1px solid var(--border);color:var(--muted);letter-spacing:.4px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none;cursor:default;border-radius:10px;flex-direction:column;padding:5px 10px;font-size:11px;font-weight:600;line-height:1.35;display:flex;position:fixed;left:12px}.version-chip-line{display:block}.version-chip-date{letter-spacing:.3px;opacity:.85;font-size:10px;font-weight:500}.hit-chip{top:calc(var(--suite-nav-h) + 58px);z-index:45;background:var(--chip-bg);border:1px solid var(--border);color:var(--muted);letter-spacing:.4px;border-radius:var(--chip-radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);-webkit-user-select:none;user-select:none;white-space:nowrap;padding:4px 10px;font-size:11px;font-weight:600;text-decoration:none;position:fixed;left:12px}.hit-chip:hover{border-color:var(--accent);color:var(--text)}.feedback-chip{top:calc(var(--suite-nav-h) + 80px);z-index:45;background:var(--chip-bg);border:1px solid var(--border);color:var(--muted);letter-spacing:.4px;border-radius:var(--chip-radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);white-space:nowrap;padding:4px 10px;font-size:11px;font-weight:600;text-decoration:none;position:fixed;left:12px}.feedback-chip:hover{border-color:var(--accent);color:var(--text)}.lang-select{top:calc(var(--suite-nav-h) + 114px);z-index:45;background:var(--chip-bg);border:1px solid var(--border);color:var(--muted);letter-spacing:.4px;border-radius:var(--chip-radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;outline:none;padding:3px 6px;font-size:11px;font-weight:600;position:fixed;left:12px}.lang-select:hover,.lang-select:focus{border-color:var(--accent);color:var(--text)}.lang-select option{background:var(--panel);color:var(--text)}.donate-btn{z-index:60;background:#fff;border-radius:14px;padding:8px;line-height:0;transition:transform .12s,box-shadow .12s;display:inline-block;position:fixed;bottom:18px;left:18px;box-shadow:0 6px 20px #00000059}.donate-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px #00000073}.donate-img{width:auto;height:47px;display:block}.app-footer{bottom:max(14px, env(safe-area-inset-bottom));z-index:40;max-width:calc(100vw - 2 * var(--gutter));background:var(--chip-bg);border:1px solid var(--border);border-radius:var(--chip-radius);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding:5px 14px;display:flex;position:fixed;left:50%;transform:translate(-50%)}.app-footer a,.app-footer span{color:var(--muted);letter-spacing:.4px;font-size:11px;font-weight:600;text-decoration:none}.app-footer a:hover,.app-footer a:focus-visible{color:var(--text);outline:none}.footer-sep{color:var(--border);font-size:11px}.app-footer-privacy,.privacy-indicator{letter-spacing:.4px;white-space:nowrap;align-items:center;gap:6px;font-size:11px;font-weight:600;display:inline-flex}.app-footer-privacy .dot,.privacy-indicator .dot{background:currentColor;border-radius:50%;flex:none;width:7px;height:7px;box-shadow:0 0 6px}.app-footer-privacy.privacy-green,.privacy-indicator.privacy-green{color:var(--green)}.app-footer-privacy.privacy-yellow,.privacy-indicator.privacy-yellow{color:var(--yellow)}.app-footer-privacy.privacy-blue,.privacy-indicator.privacy-blue{color:var(--blue)}@media (max-width:640px){.suite-brand-name{display:none}.suite-current-name{max-width:34vw}html body .app input,html body .app select,html body .app textarea,html body .app .lang-select{font-size:16px}html body .app td,html body .app th{overflow-wrap:anywhere}html body .app .btn{min-height:40px}.donate-btn{padding:6px;inset:calc(50% - 30px) auto auto 12px}.donate-img{height:32px}}@media (prefers-reduced-motion:reduce){.donate-btn{transition:none}}html,body,#root{min-height:100%;margin:0}body{background:var(--bg);color:var(--text)}.app{min-height:100vh;padding-top:var(--suite-nav-h)}.beat-app{--beat-accent:#f59e0b;--beat-accent-soft:#f59e0b6b}.beat-wrap{max-width:1180px;padding:26px var(--gutter) 108px;margin:0 auto}.beat-hero{text-align:center;margin-bottom:22px}.beat-hero h1{letter-spacing:-.6px;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:0 0 10px;font-size:clamp(26px,5vw,42px);display:inline-flex}.beat-hero p{max-width:820px;color:var(--muted);margin:0 auto;font-size:14px;line-height:1.65}.btn{border:1px solid var(--border);background:var(--panel-2);color:var(--text);cursor:pointer;border-radius:8px;padding:8px 14px;font-size:13px;font-weight:600;transition:border-color .12s,color .12s,background .12s,box-shadow .12s}.btn:hover{border-color:var(--beat-accent);color:#fff}.btn-ghost{background:0 0}.beat-transport{border:1px solid var(--border);background:#070d1a99;border-radius:16px;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:14px;padding:14px 18px;display:flex}.beat-transport-main{gap:8px;display:flex}.beat-play{border-color:var(--beat-accent);color:var(--beat-accent);min-width:118px}.beat-play:hover{background:var(--beat-accent);color:#120b02}.beat-slider{color:var(--muted);align-items:center;gap:10px;font-size:12px;display:flex}.beat-slider input[type=range]{width:150px;accent-color:var(--beat-accent)}.beat-slider output{font-family:var(--font-mono);color:var(--text);min-width:52px;font-size:12px}.beat-presets{flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:18px;display:flex}.beat-presets-label{letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:4px;font-size:11px;font-weight:700}.beat-clear{color:var(--danger);margin-left:auto}.beat-sequencer,.beat-palette-section,.beat-pads-section,.beat-io{border:1px solid var(--border);background:#070d1a99;border-radius:16px;margin-bottom:18px;padding:18px 20px}.beat-sequencer{overflow-x:auto}.beat-section-head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.beat-section-head h2{margin:0;font-size:18px}.beat-count{color:var(--muted);font-size:12px}.beat-hint{color:var(--muted);margin:6px 0 14px;font-size:12.5px;line-height:1.55}.beat-io .beat-hint{margin-bottom:0}.beat-io-actions{flex-wrap:wrap;gap:8px;display:flex}.beat-grid{flex-direction:column;gap:5px;min-width:700px;display:flex}.beat-grid-head,.beat-grid-row{grid-template-columns:132px repeat(16,minmax(0,1fr)) 112px;align-items:center;gap:5px;display:grid}.beat-step-num{text-align:center;font-family:var(--font-mono);color:var(--muted);font-size:10px}.beat-step-num.beat-beat-start{color:var(--text)}.beat-row-label{text-align:left;color:var(--muted);cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;padding:6px 8px 6px 4px;font-size:12px;font-weight:600;overflow:hidden}.beat-row-label:hover{color:var(--beat-accent)}.beat-cell{aspect-ratio:1;border:1px solid var(--border);background:var(--panel);cursor:pointer;border-radius:7px;width:100%;min-height:20px;padding:0;transition:background 80ms,box-shadow .12s,border-color 80ms}.beat-cell.beat-beat-start:not(.is-on){background:var(--panel-2);border-color:#2b384d}.beat-cell:hover{border-color:var(--beat-accent)}.beat-cell.is-on{background:var(--beat-accent);border-color:var(--beat-accent);box-shadow:0 0 10px var(--beat-accent-soft)}.beat-cell.is-playing{outline:2px solid var(--text);outline-offset:1px}.beat-cell:focus-visible,.beat-pad:focus-visible,.beat-row-label:focus-visible,.beat-tool:focus-visible,.beat-instr:focus-visible{outline:2px solid var(--beat-accent);outline-offset:2px}.beat-row-tools{justify-content:flex-end;gap:2px;display:flex}.beat-tool{color:var(--muted);cursor:pointer;background:0 0;border:none;border-radius:6px;width:22px;height:22px;padding:0;font-size:11px;line-height:1}.beat-tool:hover:not(:disabled){color:var(--beat-accent);background:var(--panel-2)}.beat-tool-danger:hover:not(:disabled){color:var(--danger)}.beat-tool:disabled{opacity:.3;cursor:default}.beat-palette{flex-direction:column;gap:12px;display:flex}.beat-palette-group{flex-direction:column;gap:6px;display:flex}.beat-palette-label{letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-size:11px;font-weight:700}.beat-palette-items{flex-wrap:wrap;gap:6px;display:flex}.beat-instr{padding:5px 10px;font-size:12px}.beat-instr:disabled{opacity:.35;cursor:default}.beat-instr:disabled:hover{border-color:var(--border);color:var(--text)}.beat-kit-reset{align-self:flex-start;margin-top:2px}.beat-pads{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;display:grid}.beat-pad{border:1px solid var(--border);background:linear-gradient(180deg, var(--panel-2), var(--panel));color:var(--text);cursor:pointer;border-radius:12px;padding:18px 12px;font-size:13px;font-weight:600;transition:background .1s,color .1s,transform 60ms,border-color .1s}.beat-pad:hover{border-color:var(--beat-accent)}.beat-pad.is-active{background:linear-gradient(180deg, #fbbf24, var(--beat-accent));color:#120b02;border-color:var(--beat-accent);transform:scale(.97)}.beat-note{color:var(--muted);margin:10px 0;font-size:12.5px;line-height:1.55}.beat-note.beat-green{color:var(--green)}.beat-toast{background:var(--chip-bg);border:1px solid var(--beat-accent);color:var(--text);z-index:60;border-radius:999px;padding:10px 16px;font-size:13px;position:fixed;bottom:22px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #00000073}@media (max-width:720px){.beat-slider input[type=range]{width:110px}.beat-grid-head,.beat-grid-row{grid-template-columns:84px repeat(16,minmax(0,1fr)) 96px;gap:4px}.beat-tool{width:20px;height:20px;font-size:10px}.beat-clear{margin-left:0}}