:root{--bg: #000;--bg-card: #0a0a0a;--fg: #fff;--fg-dim: #666;--border: #222;--accent: #fff}*{box-sizing:border-box;margin:0;padding:0}body{font-family:SF Mono,Monaco,Inconsolata,Fira Mono,monospace;background:var(--bg);color:var(--fg);min-height:100vh;line-height:1.2;font-size:10px}#app{max-width:1200px;margin:0 auto;padding:.5rem}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.4rem;border-bottom:1px solid var(--border)}header h1{font-size:.8rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase}.subtitle{color:var(--fg-dim);font-size:.7rem;font-weight:400;margin-left:.4rem}.header-right{display:flex;align-items:center;gap:.75rem}.github-link{color:var(--fg-dim);text-decoration:none;font-size:.65rem}.github-link:hover{color:var(--fg)}.controls{display:flex;gap:.5rem;align-items:center;margin-bottom:.5rem}.control-group{display:flex;align-items:center;gap:.3rem}.control-group label{color:var(--fg-dim);font-size:.65rem}select{padding:.2rem .3rem;border:1px solid var(--border);background:var(--bg);color:var(--fg);font-family:inherit;font-size:.65rem;min-width:160px}select:disabled{opacity:.5}.status{display:flex;align-items:center;gap:.25rem;color:var(--fg-dim);font-size:.65rem}.indicator{width:5px;height:5px;background:var(--fg-dim);border-radius:50%}.indicator.active{background:#4f4}.masonry{columns:4;column-gap:.4rem}.card{background:var(--bg-card);border:1px solid var(--border);padding:.4rem;margin-bottom:.4rem;break-inside:avoid}.card-wide{column-span:all}.card-accent{border-left:2px solid var(--accent)}.card-header{font-size:.55rem;font-weight:500;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem}.card-row{display:flex;justify-content:space-between;align-items:center;font-size:.65rem;margin-bottom:.15rem}.card-row .label{color:var(--fg-dim)}.card-row .value{font-feature-settings:"tnum"}.card-sub{font-size:.55rem;color:var(--fg-dim);margin-top:.2rem}.waveform-container{column-span:all;margin-bottom:.4rem}#waveform-canvas{width:100%;height:40px;background:var(--bg);display:block}.shader-toys-row{column-span:all;display:grid;grid-template-columns:repeat(4,1fr);gap:.4rem;margin-bottom:.4rem}.shader-toy-card{background:var(--bg-card);border:1px solid var(--border);position:relative;aspect-ratio:1;overflow:hidden}.shader-toy-canvas{width:100%;height:100%}.shader-toy-canvas canvas{display:block;width:100%!important;height:100%!important}.shader-toy-label{position:absolute;bottom:.25rem;left:.3rem;font-size:.5rem;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;pointer-events:none;opacity:.7}@media (max-width: 900px){.shader-toys-row{grid-template-columns:repeat(2,1fr)}}@media (max-width: 400px){.shader-toys-row{grid-template-columns:1fr}}.bpm-display{display:flex;align-items:baseline;gap:.2rem;margin-bottom:.25rem}.bpm-value{font-size:1.4rem;font-weight:400;font-feature-settings:"tnum";line-height:1}.bpm-unit{font-size:.6rem;color:var(--fg-dim)}.meter-group{margin-bottom:.25rem}.meter-row{display:flex;align-items:center;gap:.25rem;margin-bottom:.15rem;font-size:.6rem}.meter-row .label{color:var(--fg-dim);width:2.5rem;flex-shrink:0}.meter-row .value{width:2rem;text-align:right;font-feature-settings:"tnum";flex-shrink:0}.meter{flex:1;height:3px;background:var(--border)}.meter-fill{height:100%;background:var(--fg);width:0%;transition:width .05s ease-out}.meter-fill.peak{background:var(--fg)}.meter-fill.crest{background:#5dade2}.meter-fill.brightness{background:#f9e79f}.meter-fill.zcr{background:#abebc6}.phase-track{width:100%;height:2px;background:var(--border);position:relative;margin-top:.25rem}.phase-marker{position:absolute;top:-2px;width:6px;height:6px;background:var(--fg);transform:translate(-50%);left:0%}.bands-container{display:flex;align-items:flex-start;gap:.5rem}.bands-title{writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);font-size:.55rem;font-weight:500;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em}.bands-row{display:flex;gap:.3rem;justify-content:space-between;align-items:center;flex:1}.band-dial{display:flex;flex-direction:column;align-items:center;flex:1}.dial{width:32px;height:32px;transform:rotate(-90deg)}.dial-bg{fill:none;stroke:var(--border);stroke-width:3}.dial-fill{fill:none;stroke:var(--fg);stroke-width:3;stroke-linecap:round;stroke-dasharray:87.96;stroke-dashoffset:87.96;transition:stroke-dashoffset .05s ease-out}.band-label{font-size:.5rem;color:var(--fg-dim);margin-top:.15rem}.balance-meter{display:flex;align-items:center;gap:.25rem;margin-bottom:.25rem}.balance-label{font-size:.55rem;color:var(--fg-dim)}.balance-track{flex:1;height:3px;background:linear-gradient(to right,#5dade2,var(--border),#f9e79f);position:relative}.balance-marker{position:absolute;top:-2px;width:6px;height:7px;background:var(--fg);transform:translate(-50%);left:50%}.brightness-value,.latency-value{font-size:1rem;font-feature-settings:"tnum";margin-bottom:.2rem}.onset-display{display:flex;align-items:center;justify-content:center;padding:.3rem;border:1px solid var(--border);margin-bottom:.25rem;position:relative;min-height:1.5rem}.onset-flash{position:absolute;inset:0;background:var(--fg);opacity:0}.onset-flash.active{animation:flash .1s ease-out}@keyframes flash{0%{opacity:.4}to{opacity:0}}.onset-type{font-size:.7rem;font-weight:500;z-index:1}.transition-display{display:flex;align-items:center;gap:.35rem;padding:.25rem;border:1px solid var(--border);margin-bottom:.25rem}.transition-indicator{width:5px;height:5px;background:var(--fg-dim);border-radius:50%}.transition-indicator.active{background:#f9e79f;box-shadow:0 0 4px #f9e79f}#transition-text{font-size:.65rem}.sparkline{width:100%;height:24px;background:var(--bg);display:block;margin-bottom:.2rem}@media (max-width: 900px){.masonry{columns:3}}@media (max-width: 600px){.masonry{columns:2}#app{padding:.3rem}}@media (max-width: 400px){.masonry{columns:1}}