*{user-select:none;-webkit-tap-highlight-color:transparent;box-sizing:border-box}body{background:linear-gradient(145deg,#1a2a3a 0%,#0f1a24 100%);font-family:'Roboto',sans-serif;display:flex;justify-content:center;align-items:center;min-height:100vh;margin:0;padding:10px}.app-container{background:rgba(0,0,0,0.35);backdrop-filter:blur(4px);border-radius:20px;padding:12px 12px 20px;box-shadow:0 25px 45px rgba(0,0,0,0.5),inset 0 1px 1px rgba(255,255,255,0.1);width:100%;max-width:650px;margin:0 auto;position:relative;z-index:1}.main-panel{background:#1e2f3c;border-radius:18px;padding:12px}canvas{display:none;margin:0 auto;border-radius:50%;box-shadow:0 12px 28px rgba(0,0,0,0.5),inset 0 1px 2px rgba(255,255,255,0.2);cursor:pointer;width:100%;height:auto;background:#fef7e0;aspect-ratio:1 / 1}.controls,.metronome-panel,.instrument-panel{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:16px;margin-bottom:10px}button,.bpm-input,.instrument-input{background:#2c3e2f;border:none;font-weight:600;font-size:0.85rem;padding:8px 16px;border-radius:5px;color:#f0f3e8;font-family:inherit;backdrop-filter:blur(4px);background:#2c3e2f;box-shadow:0 4px 8px rgba(0,0,0,0.3);transition:0.1s linear;cursor:pointer;letter-spacing:0.3px}button:active{transform:scale(0.96);background:#1f2e22}.instrument-input{width:130px}.record-btn{background:#9e2d2f;box-shadow:0 0 8px rgba(220,60,60,0.6)}.record-btn.active{background:#d94a4c;animation:pulse 1.2s infinite;box-shadow:0 0 12px #ff6a6a}.play-pause-btn{background:#2c5f6e}.loop-active{background:#3f8f6b;box-shadow:0 0 8px #7acf9e}.file-btn{background:#4a3b2c}.export-audio{background:#784e2e}.metronome-btn{background:#4a6b5e}.metronome-btn.active{background:#f4a261;color:#1e2f3c}.bpm-input{background:#2c3e2f;width:80px;text-align:center;cursor:text}@keyframes pulse{0%{opacity:1;box-shadow:0 0 0 0 #ff8888}70%{opacity:0.9;box-shadow:0 0 0 8px rgba(255,100,100,0)}100%{opacity:1;box-shadow:0 0 0 0 rgba(255,100,100,0)}}.status-bar{background:#0d1c24;border-radius:6px;padding:6px 14px;text-align:center;color:#cfe6df;font-size:0.8rem;font-weight:500;margin-top:12px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;align-items:center}.badge{background:#2a4542;border-radius:36px;padding:3px 10px;font-family:monospace;font-size:0.75rem}input[type="file"]{display:none}#noteDisplay{font-family:monospace;font-size:0.8rem;background:#1e2f3c;color:#ffd966}hr{border:none;background:none;border-top:1px solid #32465a;margin-top:20px;margin-bottom:20px}h1{text-align:center;margin-top:0;color:#4a6070;font-size:1.8em;text-shadow:0 -2px #0c1922}h2{text-align:center;color:#4a6070;font-size:1.4em}p{text-align:center;color:#78756e;margin:0;padding:0}footer{color:#4e5e6a;margin-top:20px;padding-left:20px;font-size:0.9em}footer a{color:#457ca5}@media (max-width:550px){button,.bpm-input,.instrument-input{padding:6px 12px;font-size:0.7rem}.status-bar{font-size:0.7rem}.badge{font-size:0.65rem}.app-container{padding:8px}.main-panel{padding:8px}}