*{box-sizing:border-box}body{color:#fff;background:#111827;margin:0;font-family:Arial,sans-serif}.app{text-align:center;min-height:100vh;padding:28px}h1{margin-bottom:10px;font-size:44px}p{color:#cbd5e1;margin-bottom:24px}h2{margin-top:35px;margin-bottom:18px}.controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:14px;margin-bottom:26px;display:flex}.control-btn{color:#fff;cursor:pointer;border:none;border-radius:12px;padding:13px 22px;font-size:16px;font-weight:700}.start{background:#16a34a}.stop{background:#dc2626}.clear{background:#475569}.preset{background:#7c3aed}.save{background:#0891b2}.load{background:#2563eb}.delete{background:#be123c}.hint{color:#94a3b8;margin-top:-12px;margin-bottom:18px;font-size:14px}.bpm-box,.preset-box{background:#1f2937;border-radius:12px;align-items:center;gap:8px;padding:10px 14px;display:flex}.bpm-box label,.preset-box label{color:#cbd5e1;font-weight:700}.bpm-box input{text-align:center;border:none;border-radius:8px;width:80px;padding:8px;font-size:16px;font-weight:700}.preset-box select{border:none;border-radius:8px;outline:none;padding:9px 12px;font-size:15px;font-weight:700}.volume-panel{background:#0f172a;border:1px solid #334155;border-radius:18px;grid-template-columns:repeat(4,1fr);gap:14px;max-width:980px;margin:0 auto 22px;padding:18px;display:grid}.volume-control{background:#1f2937;border-radius:14px;flex-direction:column;gap:8px;padding:14px;display:flex}.volume-control label{color:#e2e8f0;font-weight:700}.volume-control input{cursor:pointer;width:100%}.volume-control span{color:#94a3b8;font-size:14px}.sample-panel{background:#0f172a;border:1px solid #334155;border-radius:18px;max-width:980px;margin:0 auto 22px;padding:18px}.sample-panel h2{margin-top:0;margin-bottom:8px}.sample-note{color:#94a3b8;margin-bottom:18px;font-size:14px}.sample-grid{grid-template-columns:repeat(4,1fr);gap:14px;display:grid}.sample-card{text-align:left;background:#1f2937;border-radius:14px;flex-direction:column;gap:10px;min-width:0;padding:14px;display:flex;overflow:hidden}.sample-card strong{color:#e2e8f0}.sample-card input{color:#cbd5e1;font-size:13px}.sample-card input[type=file]{width:100%;max-width:100%}.sample-card span{color:#94a3b8;word-break:break-word;font-size:13px}.remove-sample{color:#fff;cursor:pointer;background:#be123c;border:none;border-radius:10px;padding:9px;font-weight:700}.sequencer{background:#0f172a;border:1px solid #334155;border-radius:18px;max-width:980px;margin:0 auto;padding:20px;overflow-x:auto}.step-numbers{grid-template-columns:90px repeat(16,38px);align-items:center;gap:8px;margin-bottom:8px;display:grid}.step-numbers span{color:#94a3b8;font-size:12px}.sequence-row{grid-template-columns:90px repeat(16,38px);align-items:center;gap:8px;margin-bottom:10px;display:grid}.sound-name{color:#e2e8f0;text-align:right;padding-right:8px;font-weight:700}.step{cursor:pointer;background:#334155;border:none;border-radius:10px;width:38px;height:38px}.step.active{background:#9333ea}.step.playing{outline:3px solid #facc15;transform:scale(1.08)}.step.active.playing{background:#22c55e}.pad-grid{justify-content:center;gap:16px;display:grid}.pad-grid.sixteen{grid-template-columns:repeat(4,130px)}.pad{color:#fff;cursor:pointer;background:linear-gradient(135deg,#2563eb,#9333ea);border:none;border-radius:18px;flex-direction:column;justify-content:center;gap:8px;height:105px;font-size:19px;font-weight:700;display:flex;box-shadow:0 10px 25px #00000059}.pad small{opacity:.75;font-size:13px}.pad:active,.control-btn:active,.step:active,.remove-sample:active{transform:scale(.95)}.record{background:#ea580c}.recording{background:#dc2626;animation:1s infinite pulseRecord}.clear-recording{background:#64748b}.step.recording-step{outline:3px solid #fb923c;transform:scale(1.08)}@keyframes pulseRecord{0%{box-shadow:0 0 #dc2626b3}70%{box-shadow:0 0 0 12px #dc262600}to{box-shadow:0 0 #dc262600}}@media (width<=900px){.sequencer{max-width:100%}.step-numbers,.sequence-row{grid-template-columns:80px repeat(16,34px);gap:6px}.step{width:34px;height:34px}}@media (width<=800px){.volume-panel,.sample-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=520px){.volume-panel,.sample-grid{grid-template-columns:1fr}}@media (width<=700px){.app{padding:18px}h1{font-size:30px}.pad-grid.sixteen{grid-template-columns:repeat(4,1fr)}.pad{border-radius:14px;height:82px;font-size:14px}}.export-wav{color:#fff;background:#9333ea}.export-wav:disabled{opacity:.65;cursor:not-allowed}.reset-mixer{color:#fff;background:#334155}.project-panel{background:#0f172a;border:1px solid #334155;border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:end;gap:14px;max-width:980px;margin:0 auto 22px;padding:18px;display:flex}.project-control{text-align:left;flex-direction:column;gap:6px;display:flex}.project-control label{color:#cbd5e1;font-size:14px;font-weight:700}.project-control input,.project-control select{border:none;border-radius:10px;outline:none;min-width:190px;padding:10px 12px;font-size:15px;font-weight:700}.project-save{color:#fff;background:#0f766e}.project-load{color:#fff;background:#2563eb}.project-delete{color:#fff;background:#be123c}@media (width<=700px){.project-panel{align-items:stretch}.project-control,.project-control input,.project-control select,.project-panel .control-btn{width:100%}}.project-export{color:#fff;background:#9333ea}.project-import{color:#fff;background:#0ea5e9}.step-count-box{background:#1f2937;border-radius:12px;align-items:center;gap:8px;padding:10px 14px;display:flex}.step-count-box label{color:#cbd5e1;font-weight:700}.step-count-box select{border:none;border-radius:8px;outline:none;padding:9px 12px;font-size:15px;font-weight:700}@media (width<=700px){.step-count-box{justify-content:center;width:100%}}.metronome-box{color:#cbd5e1;cursor:pointer;background:#1f2937;border-radius:12px;align-items:center;gap:8px;padding:12px 16px;font-weight:700;display:flex}.metronome-box input{cursor:pointer;width:18px;height:18px}.metronome-box input:disabled{cursor:not-allowed}.counting-in{background:#f59e0b;animation:1s infinite pulseRecord}.app{max-width:1280px;margin:0 auto}.controls{background:#0f172a;border:1px solid #334155;border-radius:20px;max-width:1180px;margin-left:auto;margin-right:auto;padding:16px}.control-btn{white-space:nowrap;min-height:44px;transition:transform .12s,opacity .12s,box-shadow .12s}.control-btn:hover{opacity:.92;box-shadow:0 8px 22px #00000040}.bpm-box,.preset-box,.step-count-box,.metronome-box{min-height:44px}.project-panel,.volume-panel,.sample-panel,.sequencer{box-shadow:0 14px 36px #00000047}.project-panel{align-items:center}.project-control input,.project-control select,.bpm-box input,.preset-box select,.step-count-box select{color:#111827;background:#e5e7eb}.sequencer{padding-bottom:24px}.step-numbers,.sequence-row{min-width:max-content}.step{transition:transform 80ms,outline 80ms,background 80ms}.step:hover{background:#475569}.step.active:hover{background:#a855f7}.sound-name{z-index:2;background:#0f172a;border-radius:8px;position:sticky;left:0}.pad{transition:transform .12s,box-shadow .12s}.pad:hover{box-shadow:0 14px 34px #00000073}.sample-card,.volume-control{transition:transform .12s,background .12s}.sample-card:hover,.volume-control:hover{background:#273449;transform:translateY(-2px)}.sample-card input[type=file]{background:#111827;border:1px solid #334155;border-radius:10px;padding:8px}h1{margin-top:0}.app>p{margin-bottom:18px}@media (width<=900px){.controls{justify-content:flex-start}.control-btn,.bpm-box,.preset-box,.step-count-box,.metronome-box{flex:150px;justify-content:center}.bpm-box input,.preset-box select,.step-count-box select{flex:1}.project-panel{justify-content:flex-start}}@media (width<=700px){.controls{gap:10px;padding:14px}.control-btn,.bpm-box,.preset-box,.step-count-box,.metronome-box{flex:100%;width:100%}.volume-panel,.sample-grid{grid-template-columns:1fr}.sequencer{padding:14px}.sound-name{min-width:80px}}