:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5}*{box-sizing:border-box}html,body,#root{margin:0;min-height:100vh;background:#0f0f1a;color:#fafafa}.app{min-height:100vh;display:flex;flex-direction:column;align-items:center;padding:2rem 1rem;background:linear-gradient(135deg,#0f0f1a,#1a0a2e,#0a1628)}.app-header{text-align:center;margin-bottom:2rem}.app-header h1{margin:0;font-size:2rem;font-weight:700;background:linear-gradient(135deg,#a78bfa,#60a5fa,#34d399);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.app-header p{margin:.25rem 0 0;color:#ffffff73;font-size:.9rem}.record-section{display:flex;flex-direction:column;align-items:center;gap:.75rem;margin-bottom:2rem}.record-btn{width:80px;height:80px;border-radius:50%;border:none;cursor:pointer;position:relative;background:linear-gradient(135deg,#7c3aed,#a78bfa);box-shadow:0 4px 24px #7c3aed66;transition:transform .15s,box-shadow .15s}.record-btn:hover{transform:scale(1.05);box-shadow:0 6px 32px #7c3aed99}.record-btn.recording{background:linear-gradient(135deg,#ef4444,#f87171);box-shadow:0 4px 24px #ef444480;animation:pulse-ring 1.2s ease-in-out infinite}.record-btn .icon{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:28px;height:28px;fill:#fff}.record-label{font-size:.8rem;color:#ffffff80;font-weight:500}.timer{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:1.1rem;color:#f87171;letter-spacing:.05em}@keyframes pulse-ring{0%{box-shadow:0 4px 24px #ef444480,0 0 #ef44444d}70%{box-shadow:0 4px 24px #ef444480,0 0 0 12px #ef444400}to{box-shadow:0 4px 24px #ef444480,0 0 #ef444400}}.notes-section{width:100%;max-width:480px}.notes-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.notes-header h2{margin:0;font-size:1.1rem;font-weight:600;color:#ffffffd9}.note-count{font-size:.75rem;padding:.2rem .6rem;border-radius:999px;background:#a78bfa26;color:#a78bfa;font-weight:600}.empty-state{text-align:center;padding:3rem 1rem;color:#ffffff40;font-size:.9rem}.empty-state .empty-icon{font-size:2.5rem;margin-bottom:.5rem;opacity:.4}.note-card{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);border-radius:1rem;padding:1rem 1.25rem;margin-bottom:.75rem;transition:border-color .2s,background .2s}.note-card:hover{border-color:#a78bfa33;background:#ffffff0f}.note-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.note-meta{display:flex;flex-direction:column;gap:.15rem}.note-title{font-size:.95rem;font-weight:600;color:#ffffffe6}.note-date{font-size:.72rem;color:#ffffff4d}.note-actions{display:flex;gap:.4rem}.note-action-btn{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,transform .1s}.note-action-btn:hover{transform:scale(1.1)}.play-btn{background:linear-gradient(135deg,#34d399,#6ee7b7);color:#064e3b}.play-btn:hover{box-shadow:0 2px 12px #34d39966}.play-btn.playing{background:linear-gradient(135deg,#fbbf24,#fcd34d);color:#78350f}.delete-btn{background:#ef44441f;color:#f87171}.delete-btn:hover{background:#ef444440}.note-action-btn svg{width:14px;height:14px;fill:currentColor}.progress-bar-container{height:4px;background:#ffffff14;border-radius:999px;overflow:hidden;margin-bottom:.5rem}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,#34d399,#60a5fa,#a78bfa);transition:width .1s linear}.color-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:.4rem;flex-shrink:0}.note-top-left{display:flex;align-items:center;gap:.5rem}.duration-badge{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.7rem;color:#fff6;background:#ffffff0d;padding:.15rem .45rem;border-radius:.25rem}.visualizer{display:flex;align-items:center;justify-content:center;gap:3px;height:32px;margin-bottom:.5rem}.visualizer-bar{width:3px;border-radius:999px;background:linear-gradient(to top,#a78bfa,#f87171);transition:height .1s ease}