*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0e27;color:#e0e6ff;min-height:100vh;padding:32px;margin:0}.App{width:100%;display:flex;flex-direction:column;gap:24px}header{display:flex;flex-direction:column;gap:12px}h1{font-size:clamp(2.2rem,4vw,3.4rem);font-weight:700;letter-spacing:.04em}main{display:flex;flex-direction:column;gap:20px}.visualizer{display:flex;flex-direction:column;gap:24px}.control-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;align-items:center}.primary{background:linear-gradient(135deg,#4c8dff,#62f0ff);color:#0a0e27;border:none;padding:14px 24px;font-weight:700;border-radius:999px;cursor:pointer;font-size:1rem;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 8px 20px #4c8dff4d}.primary:hover{transform:translateY(-1px);box-shadow:0 12px 28px #62f0ff59}.slider{display:flex;flex-direction:column;gap:8px;background:#ffffff0f;padding:12px 16px;border-radius:16px}.slider label{font-size:.9rem;color:#b4c7ff}.slider input{width:100%}.tempo-card{display:flex;flex-direction:column;gap:6px;padding:12px 16px;background:#ffffff14;border-radius:16px}.tempo-label{font-size:.9rem;color:#b4c7ff}.tempo-value{font-size:1.6rem;font-weight:700}.tempo-confidence{font-size:.85rem;color:#98b1ff}.error{background:#ff50501f;color:#ff9aa6;padding:10px 16px;border-radius:12px;border:1px solid rgba(255,80,80,.35)}.canvas-grid{display:grid;grid-template-columns:1fr;gap:24px}.panel{background:#0c122cbf;border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;min-height:220px}.panel.wide{grid-column:1 / -1}.panel h2{font-size:1rem;text-transform:uppercase;letter-spacing:.08em;color:#9fb7ff}.chart-frame{position:relative;width:100%;height:180px}.panel.wide .chart-frame{height:400px}canvas{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;border-radius:12px;border:1px solid rgba(255,255,255,.08)}canvas.overlay{background:transparent;border:none;cursor:crosshair}canvas.overlay.line-hovered{cursor:pointer}.overlay-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:5}.bpm-line{stroke:#0fc;stroke-width:2px;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 6px rgba(0,255,204,.6));transition:stroke .2s,stroke-width .2s,filter .2s;pointer-events:all;cursor:pointer}.bpm-line.hovered{stroke:#0ff;stroke-width:6px;filter:drop-shadow(0 0 15px rgba(0,255,255,1))}.chart-labels{pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;color:#c8dcffd9;font-size:.72rem;text-shadow:0 1px 3px rgba(0,0,0,.9),0 0 8px rgba(0,0,0,.6);font-weight:500}.chart-labels .axis-y{position:absolute;left:6px;top:6px;bottom:20px;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}.chart-labels .axis-x{position:absolute;left:6px;right:6px;bottom:4px;display:flex;flex-direction:row;justify-content:space-between}