*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--gf-chamfer-sm:4px;--gf-chamfer-md:6px;--gf-chamfer-lg:10px}html,body{background:var(--gf-shell-bg-page);width:100%;height:100%;color:var(--gf-shell-text-primary);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif}#app{flex-direction:column;width:100%;min-height:100%;padding:1.5rem 2rem;display:flex}#audio-demo-header{align-items:baseline;gap:1.5rem;margin-bottom:2rem;display:flex}#audio-demo-header h1{color:var(--gf-shell-accent-primary);font-size:1.5rem}.nav-link{color:var(--gf-shell-text-hint);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid #0000;padding:.25rem 0;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.75rem;text-decoration:none}.nav-link:hover{color:var(--gf-shell-accent-primary);border-bottom-color:var(--gf-shell-accent-primary)}.nav-link:focus-visible{outline:2px solid var(--gf-shell-accent-primary);outline-offset:2px}#audio-demo-content{flex:1}.bank-selector{align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.bank-selector label{color:#999;text-transform:uppercase;letter-spacing:.05em;font-size:.875rem}.bank-selector select{border:1px solid var(--gf-shell-border-medium);background:var(--gf-shell-bg-container);color:#ddd;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;border-radius:0;padding:.35rem .5rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.8125rem}.bank-selector select:hover{border-color:var(--gf-shell-accent-primary)}.bank-selector select:focus-visible{outline:2px solid var(--gf-shell-accent-primary);outline-offset:1px}.placeholder{color:#666;font-size:.875rem}.mixer-controls{margin-bottom:1.5rem}.mixer-controls h2{color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:1rem}.mixer-row{align-items:center;gap:.75rem;margin-bottom:.35rem;display:flex}.mixer-row label{color:#999;text-align:right;flex-shrink:0;width:5rem;font-size:.8125rem}.mixer-row input[type=range]{max-width:14rem;accent-color:var(--gf-shell-accent-primary);flex:1}.mixer-row input[type=range]:focus-visible{outline:2px solid var(--gf-shell-accent-primary);outline-offset:2px}.mixer-readout{color:#666;text-align:right;font-variant-numeric:tabular-nums;width:2rem;font-size:.75rem}.stress-controls{border:1px solid var(--gf-shell-border-subtle);border-left:2px solid var(--gf-shell-accent-primary);background:#161616;border-radius:0;margin-bottom:1.5rem;padding:1rem}.stress-controls h2{color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:1rem}.stress-row{align-items:center;gap:.75rem;margin-bottom:.35rem;display:flex}.stress-row label{color:#999;text-align:right;flex-shrink:0;width:5rem;font-size:.8125rem}.stress-row select{border:1px solid var(--gf-shell-border-medium);background:var(--gf-shell-bg-container);color:#ddd;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;border-radius:0;padding:.35rem .5rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.8125rem}.stress-row select:hover{border-color:var(--gf-shell-accent-primary)}.stress-row select:focus-visible{outline:2px solid var(--gf-shell-accent-primary);outline-offset:1px}.stress-row input[type=range]{max-width:14rem;accent-color:var(--gf-shell-accent-primary);flex:1}.stress-row input[type=range]:focus-visible{outline:2px solid var(--gf-shell-accent-primary);outline-offset:2px}.stress-readout{color:#666;text-align:right;font-variant-numeric:tabular-nums;width:3.5rem;font-size:.75rem}.stress-fire-btn{--ch:var(--gf-chamfer-md);background:var(--gf-shell-bg-container);color:#e57373;text-transform:uppercase;letter-spacing:.04em;cursor:pointer;clip-path:polygon(var(--ch)0%,100% 0%,100% calc(100% - var(--ch)),calc(100% - var(--ch))100%,0% 100%,0% var(--ch));border:1px solid #e57373;border-radius:0;margin-top:.5rem;padding:.5rem 1.5rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.875rem;font-weight:600}.stress-fire-btn:hover{background:#2a1a1a;border-color:#ef5350}.stress-fire-btn:active{background:#3a2020}.stress-fire-btn:focus-visible{filter:drop-shadow(0 0 3px #ef5350);outline:none}.demo-section{margin-bottom:1.5rem}.demo-section h2{color:#999;text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:1rem}.cue-grid,.sequence-grid{flex-wrap:wrap;gap:.5rem;margin-bottom:.5rem;display:flex}.cue-btn,.sequence-btn{--ch:var(--gf-chamfer-sm);border:1px solid var(--gf-shell-border-medium);background:var(--gf-shell-bg-container);color:#ddd;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;clip-path:polygon(var(--ch)0%,100% 0%,100% calc(100% - var(--ch)),calc(100% - var(--ch))100%,0% 100%,0% var(--ch));border-radius:0;padding:.4rem .75rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.8125rem}.cue-btn:hover,.sequence-btn:hover{border-color:var(--gf-shell-accent-primary);background:var(--gf-shell-bg-hud)}.cue-btn:active,.sequence-btn:active{background:var(--gf-shell-button-bg)}.cue-btn:focus-visible{filter:drop-shadow(0 0 3px var(--gf-shell-accent-primary));outline:none}.sequence-btn:focus-visible{filter:drop-shadow(0 0 3px var(--gf-shell-accent-primary));outline:none}.sequence-btn{border-color:var(--gf-shell-border-strong);color:var(--gf-shell-accent-primary);font-style:italic}.comparison-notes{border:1px solid var(--gf-shell-border-subtle);border-left:2px solid var(--gf-shell-accent-primary);background:#161616;border-radius:0;margin-bottom:1.5rem;padding:1rem}.comparison-notes-header{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.comparison-notes-header h2{color:#999;text-transform:uppercase;letter-spacing:.05em;font-size:1rem}.notes-clear-btn{--ch:var(--gf-chamfer-sm);border:1px solid var(--gf-shell-border-strong);background:var(--gf-shell-bg-container);color:#999;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;clip-path:polygon(var(--ch)0%,100% 0%,100% calc(100% - var(--ch)),calc(100% - var(--ch))100%,0% 100%,0% var(--ch));border-radius:0;padding:.25rem .75rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.75rem}.notes-clear-btn:hover:not(:disabled){color:#e57373;background:#2a1a1a;border-color:#e57373}.notes-clear-btn:focus-visible{filter:drop-shadow(0 0 3px #e57373);outline:none}.notes-clear-btn:disabled{opacity:.4;cursor:not-allowed}.notes-row{align-items:flex-start;gap:.75rem;margin-bottom:.35rem;display:flex}.notes-row label{color:#999;text-align:right;flex-shrink:0;width:5rem;padding-top:.35rem;font-size:.8125rem}.notes-row textarea{border:1px solid var(--gf-shell-border-medium);background:var(--gf-shell-bg-container);color:#ddd;resize:vertical;border-radius:0;flex:1;max-width:24rem;padding:.35rem .5rem;font-family:Courier New,Consolas,Liberation Mono,monospace;font-size:.8125rem}.notes-row textarea:focus-visible{border-color:var(--gf-shell-accent-primary);outline:2px solid var(--gf-shell-accent-primary);outline-offset:1px}