:root{color-scheme:dark light;font-family:Inter,Segoe UI,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;line-height:1.6;font-size:16px;--bg: #0f172a;--surface: rgba(15, 23, 42, .72);--surface-strong: rgba(15, 23, 42, .92);--text: #f8fafc;--subtle: #cbd5f5;--primary: #38bdf8;--primary-dark: #0ea5e9;--accent: #a855f7;--border: rgba(148, 163, 184, .24)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top left,rgba(56,189,248,.25),transparent 45%),radial-gradient(circle at top right,rgba(168,85,247,.25),transparent 50%),linear-gradient(135deg,#0f172af5,#020617fa);color:var(--text);padding:48px 24px}#app{max-width:1200px;margin:0 auto}a{color:var(--primary);text-decoration:none}a:hover{color:var(--primary-dark)}.page{display:flex;flex-direction:column;gap:48px}section{background:#0f172a99;border:1px solid var(--border);border-radius:24px;padding:40px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 24px 48px #0f172a73}@media (max-width: 768px){body{padding:24px 12px}section{padding:32px 24px}}.tool-wrapper{padding:0;background:transparent;border:none;box-shadow:none}.bm-tool{background:var(--surface-strong);border:1px solid var(--border);border-radius:24px;padding:40px;display:flex;flex-direction:column;gap:32px}.bm-title-wrapper{display:flex;align-items:center;gap:16px;margin-bottom:12px}.bm-logo{width:48px;height:48px;object-fit:contain}.bm-header h2{margin:0;font-size:2.2rem;letter-spacing:.02em}.bm-header p{margin:0;color:var(--subtle);max-width:680px}.bm-badges{margin-top:18px;display:flex;flex-wrap:wrap;gap:12px}.bm-badges span{padding:8px 14px;border-radius:20px;border:1px solid rgba(148,163,184,.35);background:#0f172abf;font-size:.85rem;color:var(--subtle)}.bm-panel{display:flex;flex-direction:column;gap:24px}.bm-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;align-items:center}.bm-button{border:1px solid rgba(148,163,184,.4);border-radius:999px;padding:12px 20px;font-size:.95rem;font-weight:600;background:#0f172ae6;color:var(--text);cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease}.bm-button:hover:not(:disabled){transform:translateY(-1px);border-color:var(--primary);color:var(--primary)}.bm-button:disabled{opacity:.5;cursor:not-allowed}.bm-button.primary{background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#0b1120;border-color:transparent}.bm-button.primary:hover:not(:disabled){color:#0b1120}.bm-button.ghost{background:transparent}.bm-tempo{display:flex;flex-direction:column;gap:8px}.bm-tempo label{font-size:.9rem;color:var(--subtle)}.bm-tempo input[type=range]{width:100%;accent-color:var(--primary)}.bm-ai{display:flex;gap:12px;flex-wrap:wrap}.bm-ai input{flex:1;min-width:240px;border-radius:999px;border:1px solid rgba(148,163,184,.35);background:#0f172acc;color:var(--text);padding:12px 18px}.bm-ai input::placeholder{color:#e2e8f099}.bm-ai-config{border-radius:18px;border:1px solid rgba(148,163,184,.24);background:#0f172a99;padding:16px 20px}.bm-ai-config summary{cursor:pointer;font-weight:600;color:var(--subtle)}.bm-ai-config__content{margin-top:16px;display:flex;flex-direction:column;gap:12px}.bm-ai-config__content label{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em;color:#e2e8f0a6}.bm-ai-config__content input{border-radius:12px;border:1px solid rgba(148,163,184,.35);background:#0f172acc;color:var(--text);padding:12px 14px}.bm-ai-config__actions{display:flex;gap:12px}.bm-ai-config__hint{margin:0;font-size:.8rem;color:#e2e8f099}.bm-grid{display:flex;flex-direction:column;gap:16px}.bm-track{display:grid;grid-template-columns:110px 1fr;gap:12px;align-items:center}.bm-track__label{font-weight:600;color:#e2e8f0cc;text-transform:uppercase;letter-spacing:.06em}.bm-track__steps{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:8px}.bm-cell{width:100%;aspect-ratio:1 / 1;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:#0f172a99;cursor:pointer;transition:border .15s ease,transform .15s ease,box-shadow .15s ease}.bm-cell:hover{border-color:#38bdf899}.bm-cell.active{transform:translateY(-1px);box-shadow:0 12px 24px #38bdf859}.bm-track[data-track=openHat] .bm-cell.active{background:#38bdf859;border-color:#38bdf8cc}.bm-track[data-track=closedHat] .bm-cell.active{background:#818cf859;border-color:#818cf8cc}.bm-track[data-track=clap] .bm-cell.active{background:#f8717159;border-color:#f87171d9}.bm-track[data-track=kick] .bm-cell.active{background:#34d39959;border-color:#34d399d9}.bm-cell.playing{border-color:var(--accent);box-shadow:0 0 0 3px #a855f759}.bm-status{font-size:.85rem;color:#e2e8f099;min-height:20px}.bm-status[data-status=error]{color:#fca5a5}.is-loading .bm-status:after{content:"加载中...";margin-left:8px;font-style:italic;color:var(--primary)}@media (max-width: 768px){.bm-tool{padding:28px}.bm-track{grid-template-columns:1fr}.bm-track__steps{grid-template-columns:repeat(16,1fr);gap:4px}.bm-ai{flex-direction:column}.bm-ai input{width:100%}.bm-ai-config__actions{flex-direction:column}}.landing{display:flex;flex-direction:column;gap:48px;background:var(--surface);border-radius:24px;border:1px solid var(--border);padding:48px}.landing-hero h1{margin:0 0 16px;font-size:2.6rem;line-height:1.2}.landing-hero p{margin:0 0 24px;max-width:720px;color:#e2e8f0bf}.landing-cta{display:flex;gap:16px;flex-wrap:wrap}.cta{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;font-weight:600;border:1px solid transparent;transition:transform .15s ease,box-shadow .15s ease}.cta.primary{background:linear-gradient(135deg,var(--primary),var(--accent));color:#0b1120}.cta.primary:hover{transform:translateY(-1px);box-shadow:0 18px 24px #38bdf859}.cta.ghost{border-color:#94a3b859;color:var(--subtle)}.cta.ghost:hover{border-color:var(--primary);color:var(--primary)}.landing-section{background:#0f172a8c;border-radius:20px;border:1px solid rgba(148,163,184,.22);padding:32px;display:flex;flex-direction:column;gap:24px}.landing-section h2{margin:0;font-size:1.8rem}.landing-grid{display:grid;gap:20px}.landing-grid.three{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}.landing-grid.two{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.landing-grid article{padding:20px;border-radius:16px;border:1px solid rgba(148,163,184,.22);background:#0f172aa6;box-shadow:inset 0 1px #ffffff0a}.landing-grid article h3{margin-top:0;margin-bottom:12px;font-size:1.1rem}.landing-grid article p{margin:0;color:#e2e8f0b3}.landing-steps{margin:0;padding-left:20px;display:grid;gap:12px;color:#e2e8f0c7}.landing-steps li strong{color:var(--primary)}.landing-links{display:flex;flex-wrap:wrap;gap:12px;font-size:.9rem;color:#e2e8f0a6}.landing-links a{border-radius:999px;border:1px solid rgba(148,163,184,.22);padding:6px 14px;background:#0f172a8c}.landing-links a:hover{border-color:var(--primary)}.landing-faq details{border-radius:16px;border:1px solid rgba(148,163,184,.22);background:#0f172a99;padding:16px 20px}.landing-faq details+details{margin-top:12px}.landing-faq summary{cursor:pointer;font-weight:600;display:flex;justify-content:space-between;align-items:center}.landing-faq summary:after{content:"+";font-size:1.2rem;color:var(--accent)}.landing-faq details[open] summary:after{content:"−"}.landing-faq p{margin:12px 0 0;color:#e2e8f0b3}.landing-cta.landing-section{align-items:center;text-align:center}@media (max-width: 768px){.landing{padding:32px 20px}.landing-section{padding:24px}.landing-hero h1{font-size:2.1rem}.landing-grid.three,.landing-grid.two{grid-template-columns:1fr}.landing-steps{padding-left:18px}}