*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:#e5e7eb;background:radial-gradient(1200px 600px at 50% -10%,#16301f,#0b1220 60%)}.app{max-width:880px;margin:0 auto;padding:40px 20px 80px}.header{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.brand{display:flex;align-items:center;gap:14px}.logo{width:44px;height:44px;border-radius:12px;background:conic-gradient(from 210deg,#22c55e,#052e16,#4ade80,#166534,#22c55e);box-shadow:0 0 24px #4ade8059}.header h1{margin:0;font-size:2rem;letter-spacing:-1px;color:#4ade80}.tagline{margin:4px 0 0;font-size:.9rem;color:#9ca3af}.shortcuts{list-style:none;display:flex;gap:14px;margin:0;padding:0;font-size:.75rem;color:#6b7280;flex-wrap:wrap}.shortcuts kbd{font-family:ui-monospace,monospace;font-size:.68rem;color:#d1d5db;background:#111827;border:1px solid #374151;border-bottom-width:2px;border-radius:5px;padding:2px 6px;margin-right:3px}.upload-zone{margin-top:48px;padding:48px 24px;text-align:center;border:2px dashed #374151;border-radius:16px;background:#11182780}.upload-zone h2{margin:0 0 8px}.upload-zone p{color:#9ca3af;line-height:1.5}.upload-btn{margin-top:24px;padding:12px 24px;font-size:1rem;font-weight:600;color:#052e16;background:#4ade80;border:none;border-radius:10px;cursor:pointer;transition:transform .1s ease,background .2s ease}.upload-btn:hover:not(:disabled){background:#86efac;transform:translateY(-1px)}.upload-btn:disabled{opacity:.5;cursor:not-allowed}.player{margin-top:28px;padding:24px;border-radius:16px;background:#111827b3;border:1px solid #1f2937;box-shadow:0 20px 60px #00000059}.track-name{margin:0 0 16px;font-size:1.1rem;font-weight:500;color:#d1d5db;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.waveform{height:160px;border-radius:10px;overflow:hidden;background:#03071299;cursor:pointer}.waveform-canvas{display:block;width:100%;height:100%}.player-controls{display:flex;align-items:center;gap:16px;margin-top:16px}.play-btn{flex:0 0 auto;min-width:96px;padding:10px 18px;font-size:.95rem;font-weight:600;color:#f9fafb;background:#16a34a;border:none;border-radius:10px;cursor:pointer;transition:background .2s ease}.play-btn:hover:not(:disabled){background:#22c55e}.play-btn:disabled{opacity:.4;cursor:not-allowed}.time{font-family:SF Mono,ui-monospace,monospace;font-size:.9rem;color:#9ca3af;white-space:nowrap}.seek-bar{flex:1;accent-color:#4ade80;height:6px;cursor:pointer}.balance{margin-top:20px}.balance-labels{display:flex;justify-content:space-between;font-size:.78rem;color:#6b7280;margin-bottom:4px}.balance input{width:100%;accent-color:#fbbf24;cursor:pointer}.balance.dimmed{opacity:.4}.balance.dimmed input{cursor:not-allowed}.hint{margin:8px 0 0;font-size:.78rem;color:#6b7280;text-align:right}.stem-modes{margin-top:20px;display:flex;align-items:center;gap:14px}.group-label{font-size:.85rem;font-weight:600;color:#d1d5db;white-space:nowrap}.stem-modes .toggle-row{display:flex;gap:8px;flex-wrap:wrap}.stem-modes .toggle-btn{margin:0}.tempo{margin-top:20px}.control-label{display:flex;justify-content:space-between;align-items:baseline;font-size:.85rem;font-weight:600;color:#d1d5db;margin-bottom:8px}.tempo-value{font-size:1rem;font-weight:700;color:#4ade80}.tempo-row{display:flex;align-items:center;gap:12px}.tempo-row button,.loop-row button{padding:7px 12px;font-size:.82rem;font-weight:600;color:#e5e7eb;background:#1f2937;border:1px solid #374151;border-radius:8px;cursor:pointer;transition:background .15s ease,transform .1s ease}.tempo-row button:hover:not(:disabled){background:#374151}.tempo-row button:disabled{opacity:.4;cursor:not-allowed}.tempo-row .reset-btn{margin-left:auto;color:#d1d5db}.tempo-slider{flex:1;accent-color:#4ade80;cursor:pointer}.loop{margin-top:20px}.loop-status{font-size:.78rem;font-weight:600;color:#6b7280}.loop-row{display:flex;align-items:center;gap:10px}.mark-btn{min-width:38px}.mark-btn.set{background:#16a34a;border-color:#22c55e;color:#052e16}.mark-time{font-family:SF Mono,ui-monospace,monospace;font-size:.82rem;color:#9ca3af;min-width:42px}.toggle-btn{margin-left:auto;min-width:58px}.toggle-btn.active{background:#f59e0b;border-color:#fbbf24;color:#451a03}.downloads{margin-top:22px;display:flex;align-items:center;gap:14px}.download-row{display:flex;gap:8px;flex-wrap:wrap}.download-btn{display:inline-block;padding:8px 14px;font-size:.82rem;font-weight:600;color:#4ade80;background:#4ade8014;border:1px solid #166534;border-radius:8px;text-decoration:none;cursor:pointer;transition:background .15s ease,color .15s ease}.download-btn:hover{background:#4ade802e;color:#86efac}.drum-grid{margin-top:20px}.drum-head{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.drum-title{font-size:.72rem;font-weight:700;letter-spacing:.14em;color:#7dd3fc}.link-btn{background:none;border:1px solid rgba(148,163,184,.35);border-radius:8px;color:#cbd5e1;font-size:.78rem;padding:5px 12px;cursor:pointer;transition:border-color .15s ease,color .15s ease}.link-btn:hover{border-color:#7dd3fc;color:#7dd3fc}.drum-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:.78rem;color:#9ca3af;margin-bottom:6px}.drum-legend .chip{display:inline-flex;align-items:center;gap:6px}.drum-legend .swatch{width:10px;height:10px;border-radius:3px}.drum-grid-stage{height:190px;border-radius:10px;overflow:hidden;background:#03071299;cursor:pointer}.drum-grid-canvas{display:block;width:100%;height:100%}.drum-grid-stage{position:relative}.drum-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#64748b;font-size:.85rem;text-align:center;padding:0 16px}.drum-count{margin-left:auto;color:#7dd3fc}.drum-tip{color:#64748b;font-style:italic}.status-message.warn{color:#fbbf24;border-left:3px solid #fbbf24}.status-message{margin-top:20px;text-align:center;color:#9ca3af}.status-message.error{color:#f87171;font-weight:600}