*{box-sizing:border-box}body{color:#fff;background:radial-gradient(circle at top,#1d2638,#07090f 65%);justify-content:center;align-items:center;min-height:100vh;margin:0;font-family:Arial,Helvetica,sans-serif;display:flex;overflow:hidden}.app{text-align:center;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffff0f;border-radius:28px;width:min(920px,94vw);max-height:96vh;padding:28px;overflow-y:auto;box-shadow:0 20px 80px #00000073}h1{letter-spacing:-1px;margin:0 0 8px;font-size:clamp(28px,5vw,48px)}.subtitle{color:#aeb8cc;margin:0 0 28px;font-size:15px}.controls{flex-direction:column;justify-content:center;align-items:center;gap:18px;margin-bottom:34px;display:flex}.controls-fields,.controls-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}label{text-align:left;color:#cbd5e1;margin-bottom:6px;font-size:14px;display:block}input{color:#fff;text-align:center;background:#ffffff17;border:1px solid #ffffff2e;border-radius:14px;outline:none;width:140px;padding:13px 14px;font-size:22px}select{color:#fff;background:#ffffff17;border:1px solid #ffffff2e;border-radius:14px;outline:none;width:170px;padding:13px 14px;font-size:16px}select option{color:#fff;background:#111827}button{cursor:pointer;color:#07110b;background:#34d399;border:0;border-radius:14px;padding:15px 22px;font-size:16px;font-weight:700;transition:transform .15s,opacity .15s,box-shadow .15s}button:hover{transform:translateY(-1px)}button:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;transform:none}.recording-panel{background:#0f172a80;border:1px solid #ffffff1a;border-radius:18px;align-items:center;gap:12px;min-height:56px;padding:8px 12px;display:flex;box-shadow:inset 0 0 0 1px #ffffff05}.recording-label{text-align:left;flex-direction:column;align-items:flex-start;gap:2px;min-width:118px;display:flex}.recording-label strong{color:#fff;font-size:13px;line-height:1}.recording-label span{color:#94a3b8;font-size:11px;line-height:1.1}.recording-button-wrap{justify-content:center;align-items:center;display:flex}.record-icon-button{border-radius:14px;justify-content:center;align-items:center;width:44px;min-width:44px;height:44px;padding:0;display:inline-flex}.record-icon-button svg{width:21px;height:21px;display:block}.record-button{color:#fff;background:linear-gradient(135deg,#fb7185,#ef4444);box-shadow:0 10px 28px #ef444447}.stop-button{color:#1f1300;background:linear-gradient(135deg,#facc15,#f97316);display:none;box-shadow:0 10px 28px #facc1547}.recording-panel.is-recording{background:#7f1d1d3d;border-color:#f8717147;box-shadow:inset 0 0 0 1px #f8717114,0 0 28px #ef44441a}.recording-panel.is-recording .record-button{display:none}.recording-panel.is-recording .stop-button{display:inline-flex}.recording-live{color:#fecaca;opacity:.55;align-items:center;gap:9px;min-width:230px;font-size:13px;transition:opacity .15s;display:flex}.recording-panel.is-recording .recording-live{opacity:1}.recording-dot{width:9px;height:9px;box-shadow:none;background:#64748b;border-radius:50%}.recording-panel.is-recording .recording-dot{background:#ef4444;animation:.9s infinite recordingBlink;box-shadow:0 0 16px #ef4444f2}@keyframes recordingBlink{0%,to{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.72)}}.recording-status-text{color:#cbd5e1;text-align:left;min-width:69px;font-weight:700}.recording-panel.is-recording .recording-status-text{color:#fecaca}.recording-timer{color:#fff;font-variant-numeric:tabular-nums;text-align:left;min-width:44px;font-weight:800}.recording-eq{align-items:center;gap:3px;height:30px;padding:0 2px;display:flex}.recording-eq-bar{background:#94a3b88c;border-radius:999px;width:4px;height:5px;transition:height 45ms linear,background 45ms linear,box-shadow 45ms linear}.recording-panel.is-recording .recording-eq-bar{background:#fb7185;box-shadow:0 0 8px #fb71858c}.meter{justify-content:center;align-items:center;height:260px;margin-bottom:26px;display:flex;position:relative}.bars{align-items:center;gap:7px;display:flex;position:absolute;top:50%;transform:translateY(-50%)}.bars.left{flex-direction:row-reverse;right:calc(50% + 88px)}.bars.right{left:calc(50% + 88px)}.bar{background:#ef444421;border-radius:999px;width:13px;height:44px;transition:background 80ms,height 80ms,box-shadow 80ms}.bar.active{background:#ef4444;box-shadow:0 0 18px #ef4444cc}.bar:nth-child(2){height:58px}.bar:nth-child(3){height:74px}.bar:nth-child(4){height:92px}.bar:nth-child(5){height:112px}.center-light{background:#1f2937;border:8px solid #ffffff14;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;width:142px;height:142px;transition:background 80ms,box-shadow 80ms,transform 80ms;display:flex;box-shadow:inset 0 0 30px #00000059,0 0 #34d39900}.center-light.good{background:#22c55e;transform:scale(1.06);box-shadow:0 0 55px #22c55ee6,inset 0 0 25px #ffffff42}.center-light.waiting{background:#334155}.center-title{opacity:.8;text-transform:uppercase;letter-spacing:1px;font-size:13px}.center-value{margin-top:4px;font-size:30px;font-weight:800}.status{color:#cbd5e1;min-height:24px;margin:-6px 0 14px;font-size:14px}.visual-metronome{background:#ffffff0e;border:1px solid #ffffff14;border-radius:22px;width:min(560px,90%);margin:-4px auto 28px;padding:18px 20px 20px}.visual-metronome-title{color:#cbd5e1;text-transform:uppercase;letter-spacing:1.4px;margin-bottom:16px;font-size:13px}.metronome-track{background:#0f172ab8;border:1px solid #ffffff14;border-radius:999px;height:42px;position:relative;overflow:hidden}.metronome-center-line{background:#ffffff29;border-radius:999px;width:2px;position:absolute;top:8px;bottom:8px;left:50%;transform:translate(-50%)}.metronome-dot{background:#38bdf8;border-radius:50%;width:28px;height:28px;transition:transform 80ms linear,background 80ms,box-shadow 80ms;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:0 0 26px #38bdf8e6}.metronome-dot.pulse{background:#facc15;box-shadow:0 0 36px #facc15f2}.metronome-beat{color:#94a3b8;margin-top:12px;font-size:14px}.metronome-beat strong{color:#fff;font-size:18px}.stats{grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px;display:grid}.stat{background:#ffffff12;border:1px solid #ffffff17;border-radius:18px;padding:16px}.stat strong{margin-bottom:4px;font-size:26px;display:block}.stat span{color:#aeb8cc;font-size:13px}.recordings{text-align:left;background:#ffffff0e;border:1px solid #ffffff14;border-radius:22px;margin-top:18px;padding:18px}.recordings h2{color:#fff;margin:0 0 12px;font-size:18px}.recordings-empty{color:#94a3b8;margin:0;font-size:14px}.recording-list{flex-direction:column;gap:10px;display:flex}.recording-item{background:#0f172a94;border:1px solid #ffffff14;border-radius:16px;justify-content:space-between;align-items:center;gap:12px;padding:12px;display:flex}.recording-info{color:#cbd5e1;flex-direction:column;gap:4px;font-size:13px;display:flex}.recording-info strong{color:#fff;font-size:15px}.recording-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}audio{max-width:260px;height:34px}.download-link{color:#07110b;white-space:nowrap;background:#34d399;border-radius:12px;justify-content:center;align-items:center;padding:10px 13px;font-size:13px;font-weight:700;text-decoration:none;display:inline-flex}.tip{color:#8fa0b8;max-width:680px;margin:16px auto 0;font-size:13px;line-height:1.45}@media (width<=700px){body{overflow:auto}.meter{height:230px}.center-light{width:118px;height:118px}.bars.left{right:calc(50% + 72px)}.bars.right{left:calc(50% + 72px)}.bar{width:9px}.stats{grid-template-columns:1fr}.recording-panel{border-radius:22px;flex-wrap:wrap;justify-content:center;width:100%}.recording-label{text-align:center;align-items:center;min-width:100%}.recording-live{justify-content:center;width:100%;min-width:auto}.recording-item{flex-direction:column;align-items:flex-start}.recording-actions{justify-content:flex-start;width:100%}audio{width:100%;max-width:100%}}