*{margin:0;padding:0;box-sizing:border-box}body{background:#1a1e2e;color:#c8d0e0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;min-height:100vh}header{text-align:center;padding:2rem 1rem 1rem}header h1{font-size:2rem;font-weight:300;letter-spacing:.3em;color:#7eb8da}header .subtitle{font-size:.85rem;color:#5a6a7a;margin-top:.25rem}main{max-width:900px;margin:0 auto;padding:1rem}.upload-zone{border:2px dashed #3a4a5a;border-radius:12px;padding:4rem 2rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s}.upload-zone:hover,.upload-zone.drag-over{border-color:#7eb8da;background:#7eb8da0d}.upload-zone p{color:#5a7a9a;font-size:1.1rem}.upload-zone input[type=file]{display:none}.demo-buttons{margin-top:1.5rem;text-align:center;display:flex;align-items:center;justify-content:center;gap:.75rem}.demo-buttons span{color:#5a7a9a;font-size:.9rem}.demo-btn{background:#2a3a4a;border:1px solid #3a5a6a;color:#7eb8da;padding:.5rem 1rem;border-radius:6px;cursor:pointer;font-size:.9rem;transition:background .2s,border-color .2s}.demo-btn:hover{background:#3a4a5a;border-color:#7eb8da}.progress-container{margin-top:1.5rem;text-align:center}.progress-bar{height:4px;background:#2a3a4a;border-radius:2px;overflow:hidden;position:relative}.progress-bar:after{content:"";position:absolute;left:0;top:0;height:100%;width:var(--progress, 0%);background:#7eb8da;transition:width .3s}#progress-text{margin-top:.75rem;font-size:.9rem;color:#5a7a9a}#player-section{position:relative}.controls{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.5rem 0 .75rem}.canvas-container{display:flex;justify-content:center}#viz-canvas{max-width:900px;max-height:600px;width:100%;height:auto}.play-btn,.tune-btn{padding:.6rem 1.8rem;border:1px solid #3a5a7a;border-radius:6px;background:transparent;color:#7eb8da;font-size:.95rem;cursor:pointer;transition:background .2s,border-color .2s}.play-btn:hover,.tune-btn:hover{background:#7eb8da1a;border-color:#7eb8da}.play-btn.playing{background:#7eb8da26;border-color:#7eb8da}.time-display{font-size:.85rem;color:#5a7a9a;font-variant-numeric:tabular-nums}.separator{margin:0 .4rem;opacity:.4}.tune-panel{position:absolute;top:3.5rem;left:1rem;z-index:10;background:#232838f2;backdrop-filter:blur(8px);border:1px solid #2a3a4a;border-radius:10px;padding:1.25rem;width:320px;max-height:calc(100vh - 4.5rem);overflow-y:auto}.tune-panel h3{font-size:1rem;font-weight:500;color:#7eb8da;margin-bottom:1.25rem;text-align:center}.tune-panel label{display:block;font-size:.82rem;color:#8a9ab0;margin-bottom:1rem}.tune-panel input[type=range]{width:100%;margin-top:.3rem;accent-color:#7eb8da}.tune-panel select{width:100%;margin-top:.3rem;padding:.35rem .45rem;border:1px solid #3a4a5a;border-radius:5px;background:#1a1e2e;color:#a0b8d0}.range-labels{display:flex;justify-content:space-between;font-size:.72rem;color:#4a5a6a;margin-top:.15rem}.checkbox-group{margin:1rem 0;display:flex;flex-direction:column;gap:.5rem}.checkbox-group label{font-size:.82rem;color:#8a9ab0;margin-bottom:0;cursor:pointer}.checkbox-group input[type=checkbox]{accent-color:#7eb8da;margin-right:.4rem}.advanced-settings{border-top:1px solid #2a3a4a;border-bottom:1px solid #2a3a4a;margin:1rem 0;padding:.75rem 0 .25rem}.advanced-settings summary{color:#a0b8d0;cursor:pointer;font-size:.82rem;margin-bottom:.75rem}.stats{background:#1a1e2e;border-radius:6px;padding:.75rem 1rem;margin:1rem 0;font-size:.8rem;color:#5a7a9a;display:grid;grid-template-columns:1fr 1fr;gap:.35rem 1rem}.stats strong{color:#a0b8d0;font-weight:500}.panel-actions{display:flex;gap:.75rem;justify-content:center;margin-top:1rem}.panel-actions button{padding:.45rem 1.5rem;border:1px solid #3a4a5a;border-radius:5px;background:transparent;color:#8a9ab0;font-size:.82rem;cursor:pointer;transition:background .2s}.panel-actions button:hover{background:#7eb8da1a}