:root{font-family:system-ui,sans-serif;background:#0f0f0f;color:#e0e0e0}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;justify-content:center;padding:2rem 1rem}#root{width:100%;max-width:900px}h1{font-size:1.8rem;margin-bottom:.25rem}.subtitle{color:#888;margin-bottom:2rem;font-size:.9rem}.upload-zone{border:2px dashed #444;border-radius:12px;padding:3rem 2rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;margin-bottom:2rem}.upload-zone:hover,.upload-zone.drag-over{border-color:#7c7cff;background:#7c7cff0d}.upload-zone input{display:none}.upload-zone .icon{font-size:3rem;margin-bottom:1rem}.upload-zone p{color:#888;font-size:.9rem;margin-top:.5rem}.status{text-align:center;color:#888;margin-bottom:1.5rem;font-size:.9rem}.status.error{color:#ff6b6b}.panel{background:#1a1a1a;border-radius:12px;padding:1.5rem;margin-bottom:1.5rem}.panel-title{font-size:1rem;font-weight:500;color:#aaa;margin-bottom:1rem}.axis-layout{display:flex;align-items:flex-start}.freq-labels{flex-shrink:0;width:40px;position:relative}.freq-label{position:absolute;right:6px;transform:translateY(-50%);font-size:.65rem;color:#666;white-space:nowrap}.note-freq-labels{position:absolute;left:100%;top:0;width:32px}.note-freq-label{position:absolute;left:4px;transform:translateY(-50%);font-size:.65rem;white-space:nowrap}.note-labels{flex-shrink:0;width:40px;display:flex;flex-direction:column;justify-content:space-between;padding:2px 0}.note-label{font-size:.7rem;color:#666;text-align:right;padding-right:6px;line-height:1}.canvas-scroll-wrapper{flex:1;min-width:0;position:relative}.canvas-scroll{flex:1;min-width:0;overflow-x:scroll;scrollbar-width:thin;scrollbar-color:#555 #222}.canvas-scroll::-webkit-scrollbar{height:8px}.canvas-scroll::-webkit-scrollbar-track{background:#222;border-radius:4px}.canvas-scroll::-webkit-scrollbar-thumb{background:#555;border-radius:4px}.canvas-scroll::-webkit-scrollbar-thumb:hover{background:#888}.canvas-stack{position:relative;display:inline-block}.cursor-canvas{position:absolute;top:0;left:0;pointer-events:none}canvas{display:block;border-radius:6px}.audio-player{width:100%;color-scheme:dark}.legend{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}.legend-item{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:#aaa}.legend-swatch{width:16px;height:16px;border-radius:3px}.file-info{font-size:.85rem;color:#888;margin-top:1rem;text-align:center}.mic-row{display:flex;justify-content:center;margin-top:-1rem;margin-bottom:2rem}.mic-btn{background:transparent;border:1px solid #555;border-radius:8px;color:#ccc;cursor:pointer;font-size:.9rem;padding:.5rem 1.25rem;transition:border-color .2s,color .2s}.mic-btn:hover:not(:disabled){border-color:#ff6b6b;color:#ff6b6b}.mic-btn:disabled{opacity:.4;cursor:default}.mic-display{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:4rem 2rem}.mic-indicator{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:#888;text-transform:uppercase;letter-spacing:.08em}.mic-dot{width:10px;height:10px;border-radius:50%;background:#f44;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.3}}.mic-note{font-size:8rem;font-weight:700;line-height:1;letter-spacing:-.02em;transition:color .1s}.mic-stop-btn{background:#222;border:1px solid #555;border-radius:8px;color:#ccc;cursor:pointer;font-size:.9rem;padding:.6rem 1.5rem;transition:border-color .2s,color .2s}.mic-stop-btn:hover{border-color:#ff6b6b;color:#ff6b6b}