:root{--bg:#000;--bg-card:#0a0a0a;--fg:#fff;--fg-dim:#666;--border:#222;--accent:#fff}*{box-sizing:border-box;margin:0;padding:0}body{background:var(--bg);color:var(--fg);min-height:100vh;font-family:SF Mono,Monaco,Inconsolata,Fira Mono,monospace;font-size:10px;line-height:1.2}#app{max-width:1200px;margin:0 auto;padding:.5rem}header{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;margin-bottom:.5rem;padding-bottom:.4rem;display:flex}header h1{letter-spacing:.05em;text-transform:uppercase;font-size:.8rem;font-weight:500}.subtitle{color:var(--fg-dim);margin-left:.4rem;font-size:.7rem;font-weight:400}.header-right{align-items:center;gap:.75rem;display:flex}.github-link,.npm-link{color:var(--fg-dim);font-size:.65rem;text-decoration:none}.github-link:hover,.npm-link:hover{color:var(--fg)}.controls{align-items:center;gap:.5rem;margin-bottom:.5rem;display:flex}.control-group{align-items:center;gap:.3rem;display:flex}.control-group label{color:var(--fg-dim);font-size:.65rem}select{border:1px solid var(--border);background:var(--bg);color:var(--fg);min-width:160px;padding:.2rem .3rem;font-family:inherit;font-size:.65rem}select:disabled{opacity:.5}.status{color:var(--fg-dim);align-items:center;gap:.25rem;font-size:.65rem;display:flex}.indicator{background:var(--fg-dim);border-radius:50%;width:5px;height:5px}.indicator.active{background:#4f4}.masonry{columns:4;column-gap:.4rem}.card{background:var(--bg-card);border:1px solid var(--border);break-inside:avoid;margin-bottom:.4rem;padding:.4rem}.card-wide{column-span:all}.card-accent{border-left:2px solid var(--accent)}.card-header{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;margin-bottom:.3rem;font-size:.55rem;font-weight:500}.card-row{justify-content:space-between;align-items:center;margin-bottom:.15rem;font-size:.65rem;display:flex}.card-row .label{color:var(--fg-dim)}.card-row .value{font-feature-settings:"tnum"}.card-sub{color:var(--fg-dim);margin-top:.2rem;font-size:.55rem}.waveform-container{column-span:all;margin-bottom:.4rem}#waveform-canvas{background:var(--bg);width:100%;height:40px;display:block}.shader-toys-row{column-span:all;grid-template-rows:auto;grid-template-columns:2fr 1fr 1fr;gap:.4rem;margin-bottom:.4rem;display:grid}.shader-toy-card{background:var(--bg-card);border:1px solid var(--border);aspect-ratio:1;position:relative;overflow:hidden}.shader-toy-card.shader-toy-large{aspect-ratio:1;grid-row:span 2}.shader-toy-canvas{width:100%;height:100%}.shader-toy-canvas canvas{display:block;width:100%!important;height:100%!important}.shader-toy-label{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;pointer-events:none;opacity:.7;font-size:.5rem;position:absolute;bottom:.25rem;left:.3rem}@media (width<=900px){.shader-toys-row{grid-template-columns:1fr 1fr}.shader-toy-card.shader-toy-large{aspect-ratio:2;grid-area:span 1/span 2}}@media (width<=500px){.shader-toys-row{grid-template-columns:1fr}.shader-toy-card.shader-toy-large{aspect-ratio:1;grid-column:span 1}}.bpm-display{align-items:baseline;gap:.2rem;margin-bottom:.25rem;display:flex}.bpm-value{font-feature-settings:"tnum";font-size:1.4rem;font-weight:400;line-height:1}.bpm-unit{color:var(--fg-dim);font-size:.6rem}.meter-group{margin-bottom:.25rem}.meter-row{align-items:center;gap:.25rem;margin-bottom:.15rem;font-size:.6rem;display:flex}.meter-row .label{color:var(--fg-dim);flex-shrink:0;width:2.5rem}.meter-row .value{text-align:right;font-feature-settings:"tnum";flex-shrink:0;width:2rem}.meter{background:var(--border);flex:1;height:3px}.meter-fill{background:var(--fg);width:0%;height:100%;transition:width 50ms 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{background:var(--border);width:100%;height:2px;margin-top:.25rem;position:relative}.phase-marker{background:var(--fg);width:6px;height:6px;position:absolute;top:-2px;left:0%;transform:translate(-50%)}.bands-container{align-items:flex-start;gap:.5rem;display:flex}.bands-title{writing-mode:vertical-rl;text-orientation:mixed;color:var(--fg-dim);text-transform:uppercase;letter-spacing:.08em;font-size:.55rem;font-weight:500;transform:rotate(180deg)}.bands-row{flex:1;justify-content:space-between;align-items:center;gap:.3rem;display:flex}.band-dial{flex-direction:column;flex:1;align-items:center;display:flex}.dial{width:32px;height:32px;transform:rotate(-90deg)}.dial-bg{fill:none;stroke:var(--border);stroke-width:3px}.dial-fill{fill:none;stroke:var(--fg);stroke-width:3px;stroke-linecap:round;stroke-dasharray:87.96;stroke-dashoffset:87.96px;transition:stroke-dashoffset 50ms ease-out}.band-label{color:var(--fg-dim);margin-top:.15rem;font-size:.5rem}.balance-meter{align-items:center;gap:.25rem;margin-bottom:.25rem;display:flex}.balance-label{color:var(--fg-dim);font-size:.55rem}.balance-track{background:linear-gradient(to right, #5dade2, var(--border), #f9e79f);flex:1;height:3px;position:relative}.balance-marker{background:var(--fg);width:6px;height:7px;position:absolute;top:-2px;left:50%;transform:translate(-50%)}.brightness-value,.latency-value{font-feature-settings:"tnum";margin-bottom:.2rem;font-size:1rem}.onset-display{border:1px solid var(--border);justify-content:center;align-items:center;min-height:1.5rem;margin-bottom:.25rem;padding:.3rem;display:flex;position:relative}.onset-flash{background:var(--fg);opacity:0;position:absolute;inset:0}.onset-flash.active{animation:.1s ease-out flash}@keyframes flash{0%{opacity:.4}to{opacity:0}}.onset-type{z-index:1;font-size:.7rem;font-weight:500}.transition-display{border:1px solid var(--border);align-items:center;gap:.35rem;margin-bottom:.25rem;padding:.25rem;display:flex}.transition-indicator{background:var(--fg-dim);border-radius:50%;width:5px;height:5px}.transition-indicator.active{background:#f9e79f;box-shadow:0 0 4px #f9e79f}#transition-text{font-size:.65rem}.words-display{min-height:1.2rem;color:var(--fg-dim);flex-wrap:wrap;align-items:baseline;gap:.3rem .5rem;font-size:.65rem;display:flex}.words-display .word{color:var(--fg);letter-spacing:.03em;font-size:.85rem;transition:opacity .15s ease-out}.sparkline{background:var(--bg);width:100%;height:24px;margin-bottom:.2rem;display:block}@media (width<=900px){.masonry{columns:3}}@media (width<=600px){.masonry{columns:2}#app{padding:.3rem}}@media (width<=400px){.masonry{columns:1}}#loading-overlay{z-index:9999;background:#000000f2;justify-content:center;align-items:center;transition:opacity .3s ease-out;display:flex;position:fixed;inset:0}#loading-overlay.hidden{opacity:0;pointer-events:none}.loading-content{text-align:center}.loading-spinner{border:2px solid var(--border);border-top-color:var(--fg);border-radius:50%;width:32px;height:32px;margin:0 auto 1rem;animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{color:var(--fg);margin-bottom:.5rem;font-size:.8rem}.loading-step{color:var(--fg-dim);font-size:.65rem}#loading-overlay.error .loading-spinner{border-color:#e74c3c;animation:none}#loading-overlay.error .loading-text{color:#e74c3c}.permission-content{text-align:center;max-width:320px}.permission-content.hidden{display:none}.permission-icon{color:var(--fg);margin-bottom:1.5rem}.permission-title{letter-spacing:.02em;margin-bottom:.75rem;font-size:1.1rem;font-weight:500}.permission-text{color:var(--fg-dim);margin-bottom:1.5rem;font-size:.75rem;line-height:1.5}.permission-button{background:var(--fg);color:var(--bg);cursor:pointer;letter-spacing:.02em;border:none;padding:.75rem 2rem;font-family:inherit;font-size:.8rem;font-weight:500;transition:opacity .15s}.permission-button:hover{opacity:.9}.permission-button:active{opacity:.8}.permission-button:disabled{opacity:.5;cursor:not-allowed}.permission-hint{color:var(--fg-dim);opacity:.7;margin-top:1rem;font-size:.6rem}#loading-overlay.show-permission .loading-content{display:none}#loading-overlay.show-permission .permission-content{display:block}.permission-divider{align-items:center;gap:.75rem;margin:1.25rem 0;display:flex}.permission-divider:before,.permission-divider:after{content:"";background:var(--border);flex:1;height:1px}.permission-divider span{color:var(--fg-dim);text-transform:uppercase;letter-spacing:.1em;font-size:.6rem}.demo-button{color:var(--fg);border:1px solid var(--border);cursor:pointer;letter-spacing:.02em;background:0 0;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1.5rem;font-family:inherit;font-size:.75rem;transition:all .15s;display:flex}.demo-button:hover{border-color:var(--fg-dim);background:#ffffff0d}.demo-button:active{background:#ffffff1a}.demo-button svg{opacity:.8}.source-toggle{margin-left:auto}.source-button{color:var(--fg-dim);border:1px solid var(--border);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;background:0 0;align-items:center;gap:.4rem;padding:.35rem .75rem;font-family:inherit;font-size:.65rem;transition:all .15s;display:inline-flex}.source-button:hover{color:var(--fg);border-color:var(--fg-dim)}.source-button.active{color:#68d391;background:#2d3748;border-color:#68d391}.source-button.active svg{fill:#68d391}.source-button svg{opacity:.7;transition:all .15s}.source-button:hover svg{opacity:1}