:root{--text:#3b3645;--text-soft:#6b6375;--bg:#faf9f6;--bg-elevated:#fff;--bg-input:#fff;--bg-subtle:#f4f3f8;--border:#d0cdd6;--border-soft:#d1d5db;--accent:#aa3bff;--danger:#e0364c;--danger-bg:#fff0f0;--record-btn-bg:#f9fafb;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font:18px/1.5 system-ui,Segoe UI,Roboto,sans-serif}.dark{--text:#e2dff0;--text-soft:#9b96ab;--bg:#13111a;--bg-elevated:#1e1b28;--bg-input:#1e1b28;--bg-subtle:#27233a;--border:#3a3550;--border-soft:#3a3550;--accent:#c084fc;--danger:#f4566b;--danger-bg:#2a1018;--record-btn-bg:#1e1b28}body{margin:0}.modal-backdrop{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);z-index:100;background:#00000080;justify-content:center;align-items:center;animation:.15s fade-in;display:flex;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.modal{background:var(--bg-elevated);border-radius:18px;width:calc(100% - 48px);max-width:380px;padding:32px 28px 24px;animation:.18s slide-up;box-shadow:0 24px 60px #00000059}@keyframes slide-up{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.modal h2{color:var(--text);margin:0 0 10px;font-size:19px;font-weight:700}.modal p{color:var(--text-soft);margin:0 0 24px;font-size:15px;line-height:1.5}.modal-actions{justify-content:flex-end;gap:12px;display:flex}.modal-cancel{border:1.5px solid var(--border);cursor:pointer;color:var(--text);background:0 0;border-radius:10px;padding:10px 20px;font-size:15px;font-weight:500;transition:background .15s,border-color .15s}.modal-cancel:hover{background:var(--bg-subtle);border-color:var(--text-soft)}.modal-ok{cursor:pointer;background:var(--danger);color:#fff;border:none;border-radius:10px;padding:10px 20px;font-size:15px;font-weight:600;transition:background .15s,transform .1s}.modal-ok:hover{filter:brightness(.88);transform:translateY(-1px)}.help-modal{text-align:left;max-width:460px}.help-modal h2{color:var(--text);margin:0 0 16px;font-size:20px;font-weight:700}.help-modal h3{letter-spacing:.06em;text-transform:uppercase;color:var(--accent);margin:20px 0 10px;font-size:14px;font-weight:700}.help-steps,.help-tips{flex-direction:column;gap:8px;margin:0;padding-left:20px;display:flex}.help-steps li,.help-tips li{color:var(--text);font-size:15px;line-height:1.5}.help-tips{list-style:outside}.help-tips li{color:var(--text-soft)}.help-actions{justify-content:flex-end;margin-top:24px;display:flex}.help-actions .modal-ok{background:var(--accent)}.help-actions .modal-ok:hover{filter:brightness(.88)}.app{text-align:center;max-width:1000px;margin:0 auto;padding:48px 24px;position:relative}h1{letter-spacing:-1px;margin:0;font-size:42px;font-weight:600}.subtitle{color:var(--text-soft);margin:8px 0 40px}.toolbar{gap:8px;display:flex;position:absolute;top:20px;right:0}.theme-btn{border:1.5px solid var(--border);background:var(--bg-elevated);cursor:pointer;width:40px;height:40px;color:var(--text);border-radius:50%;justify-content:center;align-items:center;transition:background .2s,border-color .2s,transform .15s;display:flex}.theme-btn:hover{background:var(--bg-subtle);transform:rotate(20deg)}.help-icon{font-family:Georgia,serif;font-size:16px;font-weight:700;line-height:1}.controls{flex-direction:column;align-items:center;gap:20px;display:flex}.record-btn{border:3px solid var(--border-soft);background:var(--record-btn-bg);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;transition:border-color .2s,background .2s;display:flex}.record-btn:hover{border-color:var(--danger);background:var(--danger-bg)}.record-dot{background:var(--danger);border-radius:50%;width:32px;height:32px;transition:border-radius .15s,transform .15s}.record-btn.recording{border-color:var(--danger);background:var(--danger-bg);animation:1.5s ease-in-out infinite pulse}.record-btn.recording .record-dot{border-radius:4px;transform:scale(.85)}@keyframes pulse{50%{box-shadow:0 0 0 10px #e0364c26}}.record-label{color:var(--text);letter-spacing:.02em;text-transform:uppercase;opacity:0;font-size:14px;font-weight:500;transition:opacity .15s}:is(.controls:has(.record-btn:hover) .record-label,.controls:has(.record-btn.recording) .record-label){opacity:1}.live-note{font-variant-numeric:tabular-nums;min-height:72px;color:var(--accent);font-size:48px;font-weight:700}.error{color:var(--danger);margin-top:24px}.empty{color:var(--text-soft);margin-top:32px}.result{flex-direction:column;align-items:center;gap:24px;margin-top:40px;display:flex}.tempo{color:var(--text-soft);margin:0;font-size:15px}.title-field{flex-direction:column;align-items:center;gap:6px;width:100%;max-width:380px;display:flex}.title-field label{color:var(--text-soft);font-size:14px}.title-field input{border:1.5px solid var(--border);background:var(--bg-input);width:100%;color:var(--text);box-sizing:border-box;border-radius:10px;outline:none;padding:10px 16px;font-size:16px;transition:border-color .15s}.title-field input:focus{border-color:var(--accent)}.score{background:#fff;border-radius:12px;max-width:100%;padding:16px;overflow-x:auto;box-shadow:0 4px 16px #00000014}.dark .score{box-shadow:0 4px 24px #0006}.downloads{flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;margin-top:8px;display:flex}.play-btn{cursor:pointer;color:#15803d;letter-spacing:.04em;background:0 0;border:2px solid #15803d;border-radius:999px;padding:14px 32px;font-size:16px;font-weight:600;transition:background .2s,color .2s,transform .1s,box-shadow .2s}.play-btn:hover{color:#fff;background:#15803d;transform:translateY(-1px);box-shadow:0 4px 16px #16a34a59}.play-btn.playing{color:#fff;background:#15803d}.download-btn{cursor:pointer;color:#1a1200;letter-spacing:.06em;text-transform:uppercase;background:linear-gradient(135deg,#f5c842 0%,#e8a800 50%,#f5c842 100%) 0%/200% 200%;border:none;border-radius:14px;padding:16px 36px;font-size:16px;font-weight:700;transition:background-position .3s,transform .1s,box-shadow .2s;box-shadow:0 2px #b07d00,0 4px 12px #e8a80066}.download-btn:hover{background-position:100%;transform:translateY(-2px);box-shadow:0 2px #b07d00,0 8px 24px #e8a8008c}.download-btn:active{transform:translateY(0);box-shadow:0 1px #b07d00,0 2px 8px #e8a8004d}