/*!
 * Sonic — Sound · Audio · Acoustics
 * © 2026 Durand R. Begault & Michael Cohen. All rights reserved.
 * Companion site to the 1996 Sonic CD-ROM (Academic Press Professional).
 * https://mcohen.info/spatial-media/Sonic/
 */:root{--color-bg: #f8f9fa;--color-surface: #ffffff;--color-surface-alt: #f0f2f5;--color-text: #1a1a2e;--color-text-secondary: #4a4a6a;--color-text-muted: #646488;--color-primary: #0d7377;--color-primary-light: #11999e;--color-primary-dark: #094f52;--color-accent: #e84545;--color-accent-light: #ff6b6b;--color-border: #e0e2e8;--color-border-light: #eef0f4;--color-code-bg: #f4f5f7;--color-highlight: #fff3cd;--color-warning-bg: #fff3cd;--color-warning-text: #856404;--color-success: #28a745;--color-link: #0d7377;--color-link-hover: #11999e;--color-nav-bg: #1a1a2e;--color-nav-text: #ccc;--color-nav-active: #11999e;--color-wave-primary: #11999e;--color-wave-secondary: #e84545;--color-wave-grid: #e0e2e8;--color-wave-bg: #1a1a2e;--color-panel-rule: rgba(13, 115, 119, .35);--color-focus-ring: var(--color-primary-light);--shadow-sm: 0 1px 3px rgba(0,0,0,.08);--shadow-md: 0 4px 12px rgba(0,0,0,.1);--shadow-lg: 0 8px 30px rgba(0,0,0,.12);--shadow-glow: 0 0 20px rgba(17, 153, 158, .15);--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-heading: "Space Grotesk", var(--font-body);--font-mono: "JetBrains Mono", "Fira Code", "Consolas", monospace;--font-size-xs: .75rem;--font-size-sm: .875rem;--font-size-base: 1rem;--font-size-md: 1.125rem;--font-size-lg: 1.25rem;--font-size-xl: 1.5rem;--font-size-2xl: 2rem;--font-size-3xl: 2.5rem;--font-size-4xl: 3.5rem;--line-height: 1.7;--space-xs: .25rem;--space-sm: .5rem;--space-md: 1rem;--space-lg: 1.5rem;--space-xl: 2rem;--space-2xl: 3rem;--space-3xl: 4rem;--content-width: 780px;--nav-width: 280px;--border-radius: 8px;--border-radius-lg: 12px;--border-radius-xl: 16px;--transition-fast: .15s ease;--transition-base: .25s ease;--transition-slow: .4s ease}[data-theme=dark]{--color-bg: #0f0f1a;--color-surface: #1a1a2e;--color-surface-alt: #16213e;--color-text: #e8e8f0;--color-text-secondary: #b0b0cc;--color-text-muted: #a0a0bd;--color-border: #2a2a45;--color-border-light: #222240;--color-code-bg: #16213e;--color-highlight: #3d3200;--color-warning-bg: #3d3200;--color-warning-text: #ffc107;--color-link: #11999e;--color-link-hover: #40c4c9;--color-nav-bg: #0a0a15;--color-wave-grid: #2a2a45;--shadow-sm: 0 1px 3px rgba(0,0,0,.3);--shadow-md: 0 4px 12px rgba(0,0,0,.4);--shadow-lg: 0 8px 30px rgba(0,0,0,.5);--shadow-glow: 0 0 20px rgba(17, 153, 158, .25);--color-panel-rule: rgba(17, 153, 158, .4)}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:var(--font-body);font-size:var(--font-size-base);line-height:var(--line-height);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading);line-height:1.3;color:var(--color-text);margin-bottom:var(--space-md)}h1{font-size:var(--font-size-3xl);font-weight:700}h2{font-size:var(--font-size-2xl);font-weight:700}h3{font-size:var(--font-size-xl);font-weight:600}h4{font-size:var(--font-size-lg);font-weight:600}p{margin-bottom:var(--space-lg);color:var(--color-text-secondary)}a{color:var(--color-link);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--color-link-hover);text-decoration:underline}em{font-style:italic}strong{font-weight:600}sup,sub{text-transform:none;margin-left:-.12em;padding-left:0;line-height:0}.term{color:var(--color-accent);font-weight:600;cursor:help;border-bottom:1px dashed var(--color-accent);text-decoration:none}a.term:hover{color:var(--color-accent);background:color-mix(in srgb,var(--color-accent) 12%,transparent);border-bottom-style:solid;text-decoration:none}.glossary-index a{color:var(--color-accent);text-decoration:none;padding:0 .15em}.glossary-index a:hover{text-decoration:underline}.glossary-group{margin-bottom:var(--space-2xl)}.glossary-letter{color:var(--color-accent);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-xs);margin-bottom:var(--space-md)}.glossary-list{margin:0}.glossary-list dt{font-weight:600;margin-top:var(--space-md);scroll-margin-top:var(--space-xl)}.glossary-list dd{margin:0 0 var(--space-xs) 0;color:var(--color-text-secondary);font-size:var(--font-size-sm)}[id^=term-anchor-]{scroll-margin-top:var(--space-xl)}.demo-container[id],.harmonic-figure[id],.harmonics-decomp-figure[id]{scroll-margin-top:var(--space-2xl)}.section-title[id],.demo-title[id],.figure-anchor{scroll-margin-top:var(--space-xl)}.site-wrapper{min-height:100vh}.sidebar{position:fixed;top:0;left:0;width:var(--nav-width);height:100vh;height:100dvh;background:var(--color-nav-bg);color:var(--color-nav-text);overflow-y:auto;-webkit-overflow-scrolling:touch;z-index:100;display:flex;flex-direction:column;border-right:1px solid var(--color-border);transition:transform var(--transition-base)}.sidebar-header{padding:var(--space-xl) var(--space-lg);border-bottom:1px solid rgba(255,255,255,.08)}.sidebar-logo{display:flex;align-items:center;gap:var(--space-sm);text-decoration:none;color:#fff}.sidebar-logo svg{width:36px;height:36px}.sidebar-logo-text{font-family:var(--font-heading);font-size:var(--font-size-xl);font-weight:700;letter-spacing:-.02em}.sidebar-logo-sub{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.1em;display:block;margin-top:2px}.sidebar-nav{flex:1;padding:var(--space-lg) 0;overflow-y:auto;-webkit-overflow-scrolling:touch}@media (max-width: 900px){.sidebar-nav{padding:var(--space-sm) 0}.nav-section-label{padding:var(--space-sm) var(--space-lg) calc(var(--space-xs) / 2)}.nav-item{padding:var(--space-xs) var(--space-lg)}}.nav-section-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.12em;color:var(--color-text-muted);padding:var(--space-md) var(--space-lg) var(--space-sm);font-weight:600}.nav-item{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);color:var(--color-nav-text);text-decoration:none;font-size:var(--font-size-sm);transition:all var(--transition-fast);border-left:3px solid transparent;position:relative}.nav-item:hover{background:#ffffff0d;color:#fff;text-decoration:none}.nav-item.active{color:var(--color-nav-active);border-left-color:var(--color-nav-active);background:#11999e14}.nav-item .nav-number{font-family:var(--font-mono);font-size:var(--font-size-xs);opacity:.5;min-width:1.5em}.nav-progress{position:absolute;right:var(--space-lg);width:8px;height:8px;border-radius:50%;background:var(--color-primary);opacity:0;transition:opacity var(--transition-fast)}.nav-item.completed .nav-progress{opacity:1;background:var(--color-success)}.sidebar-footer{padding:var(--space-lg);border-top:1px solid rgba(255,255,255,.08)}.theme-toggle{display:flex;align-items:center;gap:var(--space-sm);background:none;border:1px solid rgba(255,255,255,.15);color:var(--color-nav-text);padding:var(--space-sm) var(--space-md);border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-sm);width:100%;transition:all var(--transition-fast)}.theme-toggle:hover{background:#ffffff14;border-color:#ffffff40}.mobile-nav-toggle{display:flex;position:fixed;top:var(--space-md);left:var(--space-md);z-index:200;background:var(--color-nav-bg);border:1px solid var(--color-border);color:#fff;width:44px;height:44px;border-radius:var(--border-radius);cursor:pointer;align-items:center;justify-content:center;font-size:1.2rem;transition:transform var(--transition-base)}.theme-toggle-fab{display:flex;position:fixed;top:var(--space-md);right:var(--space-md);z-index:250;background:var(--color-primary-light);border:2px solid var(--color-primary-dark);color:#fff;width:48px;height:48px;border-radius:50%;cursor:pointer;align-items:center;justify-content:center;font-size:1.5rem;line-height:1;box-shadow:0 2px 8px #00000040;transition:transform var(--transition-fast),background var(--transition-fast)}.theme-toggle-fab:hover{background:var(--color-primary-dark);transform:scale(1.08)}.theme-toggle-fab:active{transform:scale(.95)}.sidebar{transition:transform var(--transition-base)}body.sidebar-collapsed .sidebar{transform:translate(-100%)}body.sidebar-collapsed .main-content{margin-left:0}@media (max-width: 900px){.sidebar{transform:translate(-100%)}body.sidebar-open .sidebar{transform:translate(0);box-shadow:var(--shadow-lg)}}.main-content{margin-left:var(--nav-width);min-height:100vh;transition:margin-left var(--transition-base)}@media (max-width: 900px){.main-content{margin-left:0}}.chapter-content{max-width:var(--content-width);margin:0 auto;padding:var(--space-3xl) var(--space-xl)}@media (max-width: 900px){.chapter-content{padding:calc(var(--space-3xl) + 44px) var(--space-lg) var(--space-3xl)}}@media (min-width: 1200px){:root{--content-width: 920px}}@media (min-width: 1500px){:root{--content-width: 1040px}}@media (min-width: 1800px){:root{--content-width: 1160px}}@media (min-width: 2200px){:root{--content-width: 1280px}}body.sidebar-collapsed{--content-width: 1080px}@media (min-width: 1500px){body.sidebar-collapsed{--content-width: 1200px}}@media (min-width: 1800px){body.sidebar-collapsed{--content-width: 1360px}}.chapter-header{margin-bottom:var(--space-3xl);padding-bottom:var(--space-xl);border-bottom:1px solid var(--color-border)}.chapter-number{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-primary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-sm);display:block}.chapter-title{font-size:var(--font-size-3xl);font-weight:700;line-height:1.2;margin-bottom:var(--space-md)}.chapter-subtitle{font-size:var(--font-size-md);color:var(--color-text-muted);max-width:720px}.section-title{font-size:var(--font-size-xl);margin-top:var(--space-3xl);margin-bottom:var(--space-lg);padding-top:var(--space-xl);border-top:1px solid var(--color-border-light)}.subsection-title{font-size:var(--font-size-lg);margin-top:var(--space-2xl);margin-bottom:var(--space-md)}.figure{margin:var(--space-2xl) 0;text-align:center}.figure img{max-width:100%;height:auto;border-radius:var(--border-radius);box-shadow:var(--shadow-sm)}[data-theme=dark] .figure img{filter:invert(.88) hue-rotate(180deg)}.figure-caption{margin-top:var(--space-sm);font-size:var(--font-size-sm);color:var(--color-text-muted)}.figure-caption strong{color:var(--color-text-secondary)}.data-table{width:100%;border-collapse:collapse;margin:var(--space-xl) 0;font-size:var(--font-size-sm);border-radius:var(--border-radius);overflow:hidden;box-shadow:var(--shadow-sm)}.data-table thead th{background:var(--color-primary-dark);color:#fff;padding:var(--space-sm) var(--space-md);text-align:left;font-weight:600;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.05em}.data-table tbody td{padding:var(--space-sm) var(--space-md);border-bottom:1px solid var(--color-border-light);background:var(--color-surface)}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover td{background:var(--color-surface-alt)}.de-gloss{display:none}:root[data-de=on] .de-gloss{display:inline}.de-gloss{font-style:italic}dt .de-gloss{font-weight:400;font-style:italic;color:var(--color-text-muted);font-size:.92em;margin-left:.35em}.de-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;margin-top:6px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;width:100%;justify-content:center}.de-toggle:hover{background:var(--color-surface-alt)}.de-toggle[aria-pressed=true]{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.jp-gloss{display:none}:root[data-jp=on] .jp-gloss{display:inline}.jp-gloss ruby{font-size:inherit}.jp-gloss rt{font-size:.55em;color:var(--color-text-muted);letter-spacing:.05em;line-height:1.1}.glossary-popup strong{line-height:2;display:inline-block}.glossary-popup ruby rt{font-size:.55em;color:var(--color-text-muted);letter-spacing:.05em}dt .jp-gloss{font-weight:400;color:var(--color-text-muted);font-size:.92em;margin-left:.35em}.jp-toggle{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;margin-top:6px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);font-size:var(--font-size-sm);cursor:pointer;width:100%;justify-content:center}.jp-toggle:hover{background:var(--color-surface-alt)}.jp-toggle[aria-pressed=true]{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.sonic-src-select{font:14px Inter,system-ui,sans-serif;padding:5px 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);cursor:pointer;min-width:200px;max-width:100%}.sonic-src-select:hover,.sonic-src-select:focus{border-color:var(--color-primary);outline:none}.slider-end-labels{display:flex;justify-content:space-between;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:1px;padding:0 9px;letter-spacing:.03em;pointer-events:none}.slider-end-labels .slider-end-min{text-align:left}.slider-end-labels .slider-end-max{text-align:right}.btn-with-kbd{display:inline-block;position:relative;vertical-align:middle}.btn-kbd-hint{position:absolute;bottom:100%;left:50%;transform:translate(-50%);margin-bottom:2px;font-size:.65em;padding:1px 5px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);color:var(--color-text-muted);font-family:var(--font-mono, ui-monospace, monospace);white-space:nowrap;line-height:1.2;pointer-events:none}.dd-source{display:block;font-size:.85em;color:var(--color-text-muted);margin-top:.3em}.bib-entry{display:flex;gap:var(--space-md);align-items:flex-start;margin-bottom:var(--space-md)}.bib-cover{width:100px;max-width:100px;flex-shrink:0;height:auto;border-radius:4px;box-shadow:0 2px 8px #0003;background:var(--color-surface-2, #f4f4f6)}.bib-text{flex:1;min-width:0}.bib-text>p{margin:0}@media (max-width: 540px){.bib-cover{width:70px;max-width:70px}}.app-icon{width:44px;height:44px;border-radius:10px;margin-right:10px;vertical-align:middle;box-shadow:0 1px 3px #00000026;background:var(--color-surface-2, #f4f4f6);flex-shrink:0}.site-icon{width:18px;height:18px;vertical-align:-4px;margin-right:4px;border-radius:3px;background:var(--color-surface-2, #f4f4f6);object-fit:contain;flex-shrink:0}.snd-matrix{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:var(--space-md);margin:var(--space-md) 0}.snd-matrix-title{font-weight:700;font-size:var(--font-size-lg);color:var(--color-primary);margin-bottom:var(--space-xs)}.snd-matrix-desc{font-size:var(--font-size-sm);color:var(--color-text-muted);margin:0 0 var(--space-sm)}.snd-matrix-grid{display:grid;gap:4px 8px;align-items:center}.snd-matrix-colhead{text-align:center;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);letter-spacing:.04em;border-bottom:1px solid var(--color-border);padding-bottom:4px}.snd-matrix-rowhead{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);padding-right:var(--space-sm);border-right:1px solid var(--color-border)}.snd-matrix-rowhead-sub{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted)}.snd-matrix-cell{display:flex;justify-content:center}.snd-matrix-cell a,.snd-matrix-cell button{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:4px 10px;border:none;border-radius:6px;background:var(--color-surface-alt);color:var(--color-primary);font-size:15px;line-height:1;text-decoration:none;cursor:pointer;transition:background .12s,transform .08s}.snd-matrix-cell a:hover,.snd-matrix-cell a:focus,.snd-matrix-cell button:hover,.snd-matrix-cell button:focus{background:var(--color-primary);color:#fff}.snd-matrix-cell a:active,.snd-matrix-cell button:active{transform:scale(.96)}.snd-matrix-baseline{grid-column:1 / -1;margin-bottom:var(--space-xs);font-size:var(--font-size-sm);color:var(--color-text-muted)}.play-icon-btn,a.audio-link.play-icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:36px;min-height:30px;padding:3px 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-primary);font-size:15px;line-height:1;text-decoration:none;cursor:pointer;transition:background .12s,color .12s,border-color .12s,transform .08s}.play-icon-btn:hover,.play-icon-btn:focus{background:var(--color-primary);color:#fff;border-color:var(--color-primary);text-decoration:none}.play-icon-btn:active{transform:scale(.96)}.play-pill,a.audio-link.play-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 12px;border:1px solid var(--color-border);border-radius:999px;background:var(--color-surface);color:var(--color-text);font-weight:500;text-decoration:none;cursor:pointer;transition:background .12s,color .12s,border-color .12s,transform .08s}.play-pill .play-glyph{color:var(--color-primary);font-size:14px;line-height:1}.play-pill:hover,.play-pill:focus{background:var(--color-primary);color:#fff;border-color:var(--color-primary);text-decoration:none}.play-pill:hover .play-glyph,.play-pill:focus .play-glyph{color:#fff}.play-pill:active{transform:scale(.97)}.same-pitch-spectra{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-sm);margin:var(--space-sm) 0}@media (max-width: 720px){.same-pitch-spectra{grid-template-columns:repeat(3,1fr)}}@media (max-width: 380px){.same-pitch-spectra{grid-template-columns:repeat(2,1fr)}}.sps-cell{display:flex;flex-direction:column;gap:4px;min-width:0}.sps-cell .sps-btn{width:100%;display:inline-flex;flex-direction:column;align-items:center;gap:2px;padding:6px 4px}.sps-cell .sps-btn[aria-pressed=true]{background:var(--color-primary);color:#fff}.sps-cell .sps-sub{font-size:.7em;font-weight:400;opacity:.75;font-style:italic;letter-spacing:0;text-transform:none}.sps-spec{width:100%;height:80px;background:#0e1a26;border-radius:4px;display:block}.fig76-play-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-md);margin:var(--space-xs) 0 var(--space-sm)}.fig76-play-row .fig76-play{width:100%}.fig711-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg);margin:var(--space-md) 0}@media (max-width: 640px){.fig711-pair{grid-template-columns:1fr}}.fig711-grid{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:var(--space-md)}.fig711-grid-title{font-weight:700;font-size:var(--font-size-lg);color:var(--color-primary);margin-bottom:var(--space-xs)}.fig711-original{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-bottom:var(--space-sm)}.fig711-original a{font-weight:600}.fig711-matrix{display:grid;grid-template-columns:auto 1fr 1fr;gap:4px 8px;align-items:center}.fig711-colhead{text-align:center;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-muted);text-transform:lowercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border);padding-bottom:4px}.fig711-rowhead{display:flex;flex-direction:column;align-items:flex-start;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);padding-right:var(--space-sm);border-right:1px solid var(--color-border)}.fig711-amp{font-size:var(--font-size-xs);font-weight:500;color:var(--color-text-muted)}.fig711-cell{display:flex;justify-content:center}.fig711-cell a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:36px;padding:4px 10px;border-radius:6px;background:var(--color-surface-alt);color:var(--color-primary);font-size:17px;line-height:1;text-decoration:none;transition:background .12s,transform .08s}.fig711-cell a:hover,.fig711-cell a:focus{background:var(--color-primary);color:#fff}.fig711-cell a:active{transform:scale(.96)}.audio-player{display:flex;align-items:center;gap:var(--space-md);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-sm) var(--space-md);margin:var(--space-md) 0;transition:all var(--transition-base);box-shadow:var(--shadow-sm)}.audio-player:hover{box-shadow:var(--shadow-md);border-color:var(--color-primary-light)}.audio-player.playing{border-color:var(--color-primary);box-shadow:var(--shadow-glow)}.audio-play-btn{width:40px;height:40px;border-radius:50%;background:var(--color-primary);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all var(--transition-fast)}.audio-play-btn:hover{background:var(--color-primary-light);transform:scale(1.05)}.audio-play-btn svg{width:18px;height:18px}.audio-info{flex:1;min-width:0}.audio-label{font-size:var(--font-size-sm);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.audio-sublabel{font-size:var(--font-size-xs);color:var(--color-text-muted)}.audio-waveform-mini{width:120px;height:32px;flex-shrink:0}.audio-progress-bar{flex:1;height:4px;background:var(--color-border);border-radius:2px;overflow:hidden;cursor:pointer}.audio-progress-fill{height:100%;background:var(--color-primary);border-radius:2px;width:0%;transition:width .1s linear}.audio-time{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-text-muted);flex-shrink:0}.audio-group{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-sm);margin:var(--space-lg) 0}.audio-group .audio-player{margin:0}button.audio-link,button.play-icon-btn,button.play-pill{font:inherit;background:transparent;border:none;margin:0;padding:0;line-height:inherit;text-align:inherit;color:inherit;cursor:pointer;appearance:none;-webkit-appearance:none}.app-store-region-chip{display:inline-block;font-family:var(--font-mono, ui-monospace, monospace);font-size:.7em;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);text-decoration:none;padding:1px 5px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface);vertical-align:.1em;transition:background .12s,color .12s,border-color .12s}.app-store-region-chip:hover,.app-store-region-chip:focus-visible{background:var(--color-primary);color:#fff;border-color:var(--color-primary);text-decoration:none}.source-selector{font:inherit;font-size:var(--font-size-sm);padding:6px 10px;border:1px solid var(--color-border);border-radius:6px;background:var(--color-surface);color:var(--color-text);cursor:pointer;min-width:240px;max-width:100%;appearance:menulist;-webkit-appearance:menulist}.source-selector:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.source-selector optgroup{font-weight:600;font-style:normal}.control-label [data-value],[data-value-host]{display:inline-block;font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}.audio-link{color:var(--color-primary);font-weight:600;cursor:pointer;border-bottom:2px solid var(--color-primary-light);transition:all var(--transition-fast);padding:0 2px}.audio-link:hover{background:#11999e1a;text-decoration:none}.audio-link.playing{background:#11999e26;color:var(--color-primary-dark)}.demo-container{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:0;margin:var(--space-2xl) 0;box-shadow:var(--shadow-sm);overflow:hidden}.demo-header{display:grid;grid-template-columns:auto 1fr auto;align-items:baseline;column-gap:var(--space-md);padding:var(--space-md) var(--space-lg);border-bottom:1px solid var(--color-panel-rule);background:linear-gradient(180deg,transparent,rgba(13,115,119,.03))}.demo-header>.demo-title:first-child{grid-column:1 / 3}.demo-header>.demo-description{order:1;grid-column:1 / -1;margin-block:var(--space-xs) 0}.demo-title{font-family:var(--font-heading);font-size:var(--font-size-lg);font-weight:600;color:var(--color-text);letter-spacing:-.01em;margin:0}.demo-figno{font-family:var(--font-mono);font-size:var(--font-size-xs);font-weight:500;letter-spacing:.06em;color:var(--color-primary);white-space:nowrap}.demo-figno:after{content:"";display:none;width:2em;border-top:1px solid var(--color-panel-rule);vertical-align:middle;margin:0 .5em}@media (min-width: 640px){.demo-figno:after{display:inline-block}.demo-header{padding:var(--space-md) var(--space-xl)}}@media (max-width: 480px){.demo-header{grid-template-columns:1fr;row-gap:var(--space-xs)}}.demo-body{padding:var(--space-md)}@media (min-width: 640px){.demo-body{padding:var(--space-lg) var(--space-xl) var(--space-xl)}}.demo-badge{display:none}.viz-canvas{width:100%;height:200px;background:var(--color-wave-bg);border-radius:var(--border-radius);display:block}.demo-controls{display:grid;grid-template-columns:1fr;gap:var(--space-md);margin-top:var(--space-lg);align-items:start}@media (min-width: 640px){.demo-controls{grid-template-columns:repeat(12,1fr);column-gap:var(--space-md)}}.control-group{display:flex;flex-direction:column;gap:var(--space-xs);min-width:0}@media (min-width: 640px){.control-group{grid-column:span 6}.control-group--full{grid-column:1 / -1}.control-group--third{grid-column:span 4}.control-group--quarter{grid-column:span 3}}.control-label{font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:500;letter-spacing:normal;color:var(--color-text-secondary);text-transform:none;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 var(--space-md);margin:0}.control-label .ord{display:inline;white-space:nowrap}.control-label .ord sup{font-size:.72em;vertical-align:super;line-height:0}.control-label [data-value],.control-label .sonic-active-label,[data-value]{font-family:var(--font-mono);font-weight:500;color:var(--color-primary);font-variant-numeric:tabular-nums;font-feature-settings:"tnum";text-transform:none;letter-spacing:normal;margin-left:auto}.control-value{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--color-primary)}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-border);border-radius:3px;outline:none;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid #fff;box-shadow:var(--shadow-sm);transition:transform var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.15)}input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);cursor:pointer;border:2px solid #fff;box-shadow:var(--shadow-sm)}input[type=range]:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:4px;border-radius:3px}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px #11999e33,var(--shadow-sm)}@media (pointer: coarse){input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}}@media (prefers-reduced-motion: reduce){input[type=range]::-webkit-slider-thumb{transition:none}input[type=range]::-webkit-slider-thumb:hover{transform:none}}.waveform-selector{display:flex;gap:var(--space-xs);flex-wrap:wrap}.waveform-btn,.spat-source-btn,.spat-reverb-btn,.spec3d-src-btn,.spec3d-axis-btn,.spec3d-song-btn,.vu-src-btn,.vu-mode-btn,.sonic-src-btn,.sp-wave-btn,.sp-polarity-btn,.rmsp-wave-btn,.flt-type-btn,.pc-curve-btn,.cents-mode-btn,.sm-tech-btn,.shepard-dir-btn,.cc-wave-a-btn,.cc-wave-b-btn,.spec-scale-btn{padding:var(--space-xs) var(--space-md);border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);border-radius:var(--border-radius);cursor:pointer;font-size:var(--font-size-sm);font-family:var(--font-body);transition:all var(--transition-fast)}.waveform-btn,.sp-wave-btn,.rmsp-wave-btn,.mod-wave-btn,.pc-curve-btn,.cc-wave-a-btn,.cc-wave-b-btn{display:inline-flex;align-items:center;gap:var(--space-xs)}.nc-mf{font-size:1.22em;line-height:1;vertical-align:-.05em}.wave-icon{width:24px;height:12px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.waveform-btn:hover,.spat-source-btn:hover,.spat-reverb-btn:hover,.spec3d-src-btn:hover,.spec3d-axis-btn:hover,.spec3d-song-btn:hover,.vu-src-btn:hover,.vu-mode-btn:hover,.sonic-src-btn:hover,.cc-wave-a-btn:hover,.cc-wave-b-btn:hover,.spec-scale-btn:hover{border-color:var(--color-primary-light);color:var(--color-primary)}.waveform-btn.active,.spat-source-btn.active,.spat-reverb-btn.active,.spec3d-src-btn.active,.spec3d-axis-btn.active,.spec3d-song-btn.active,.vu-src-btn.active,.vu-mode-btn.active,.sonic-src-btn.active,.sp-wave-btn.active,.sp-polarity-btn.active,.rmsp-wave-btn.active,.flt-type-btn.active,.pc-curve-btn.active,.cents-mode-btn.active,.sm-tech-btn.active,.shep-style-btn.active,.shep-style-preset.active,.shepard-dir-btn.active,.geq-preset.active,.mod-matrix-preset.active,.cc-wave-a-btn.active,.cc-wave-b-btn.active,.spec-scale-btn.active,.mod-wave-btn.active,.btn.btn-outline.active.shep-style-btn,.btn.btn-outline.active.shep-style-preset,.btn.btn-outline.active.shep-spokes-btn,.btn.btn-outline.active.shep-mode-btn,.btn.btn-outline.geq-preset.active,.btn.btn-outline.mod-matrix-preset.active,.btn.btn-outline.mod-wave-btn.active{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.shep-style-slider-wrap .shep-slider-row .shep-style-slider{height:28px;cursor:pointer}.shep-style-presets .shep-style-preset{padding:4px 10px;font-size:var(--font-size-sm)}@media (max-width: 600px){.shep-style-presets{flex-wrap:wrap;justify-content:flex-start!important;row-gap:6px}.shep-style-presets .shep-style-preset-cell{flex:1 1 calc(33.333% - 4px)!important;min-width:80px}}@media (max-width: 380px){.shep-style-presets .shep-style-preset-cell{flex:1 1 calc(50% - 4px)!important}}.sonic-src-divider{display:inline-block;align-self:stretch;width:1px;margin:0 var(--space-xs);background:var(--color-border);opacity:.55}.harm-header{display:flex;align-items:center;justify-content:space-between;gap:var(--space-xs)}.harm-toggles{display:inline-flex;gap:2px}.harm-toggle{width:30px;height:26px;padding:0;border:1px solid var(--color-border);background:transparent;color:var(--color-text-muted);border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background var(--transition-fast),border-color var(--transition-fast),color var(--transition-fast);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;touch-action:manipulation}.harm-toggle .harm-icon{display:inline-flex;align-items:center;justify-content:center;pointer-events:none;font-size:18px;line-height:1;text-align:center}.harm-toggle:hover{border-color:var(--color-primary-light);color:var(--color-text)}.harm-toggle.long-pressing{background:#ffc85738;border-color:#ffc857;transform:scale(1.08);transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast)}.harm-toggle.harm-mute.active{background:#e84545;border-color:#e84545;color:#fff}.harm-toggle.harm-af.active{background:#ffc85740;border-color:#ffc857;color:#ffc857}.harm-toggle.harm-solo.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.harm-control.is-muted>input[type=range]{opacity:.35}.harm-control.is-soloed>input[type=range]{accent-color:var(--color-primary)}.fs-narrowcast-grid .harm-toggle.fs-narrowcast-btn{width:100%;min-width:0;height:20px;font-size:11px;padding:0;line-height:1}.fs-narrowcast-grid .harm-toggle.fs-narrowcast-btn .harm-icon{width:auto;height:auto;font-size:11px}.harm-control.is-soloed .control-label{color:var(--color-primary)}kbd{display:inline-block;padding:1px 5px;font:600 11px/1.4 var(--font-mono);background:var(--color-surface);border:1px solid var(--color-border);border-bottom-width:2px;border-radius:3px;color:var(--color-text)}.mod-live-preset.is-closest{border-color:var(--color-primary);background:#11999e1a;color:var(--color-primary);font-weight:600}.spat-az-dist-row{display:flex!important;flex-direction:row!important;gap:var(--space-md);flex-wrap:wrap;align-items:flex-start}.spat-az-col,.spat-dist-col{display:flex;flex-direction:column;flex:1 1 240px;gap:var(--space-xs);min-width:0}.spat-flip-row{display:flex;gap:var(--space-xs);align-items:center;margin-top:var(--space-xs);flex-wrap:wrap}.spat-flip-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}.spat-flip-mode-grp{display:inline-flex;border:1px solid var(--color-border);border-radius:var(--border-radius);overflow:hidden}.spat-flip-mode-btn{padding:4px 10px;background:transparent;border:none;color:var(--color-text-secondary);cursor:pointer;font:500 var(--font-size-xs) var(--font-body);transition:background .15s,color .15s}.spat-flip-mode-btn:not(:last-child){border-right:1px solid var(--color-border)}.spat-flip-mode-btn:hover{background:#11999e14}.spat-flip-mode-btn.active{background:var(--color-primary);color:#fff}.btn[data-shepard-preset].active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.shep-stair-wrap{display:flex;justify-content:center;margin:var(--space-sm) 0}.shep-staircase-svg{width:100%;max-width:440px;height:auto;display:block}.shep-staircase-svg .step{cursor:pointer}.shep-staircase-svg .step-marker{fill:#e74c3c8c;stroke:#fff;stroke-width:1.8;transition:fill .15s,stroke-width .15s}.shep-staircase-svg .step:hover .step-marker{fill:#e74c3ce6;stroke-width:2.5}.shep-staircase-svg .step.active .step-marker{fill:#e74c3c;stroke-width:3}.shep-staircase-svg .step-num{font-family:Inter,system-ui,sans-serif;fill:#fff;pointer-events:none}.shep-staircase-svg .step.disabled{opacity:.28;cursor:default}.shep-staircase-svg .step.disabled .step-marker{fill:#777}.shep-staircase-svg .ball{fill:#ffd166;stroke:#7a1a14;stroke-width:2;transition:opacity .25s ease,fill .25s ease}.shep-staircase-svg .ball.resting{opacity:.4;fill:#d9a44a}.shep-staircase-svg .shep-merge-poly{fill:#9bfacc;stroke:none;pointer-events:none}.shep-mode-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs);margin:var(--space-sm) 0;font-size:var(--font-size-sm)}.shep-mode-btn{padding:4px 12px;border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);border-radius:var(--border-radius);cursor:pointer;font:500 var(--font-size-sm) var(--font-body);transition:all .15s}.shep-mode-btn:hover{border-color:var(--color-primary-light);color:var(--color-text)}.shep-mode-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.shep-mode-hint{color:var(--color-text-muted);font-size:var(--font-size-xs)}.shep-linear-kbd-wrap{max-width:480px;margin:var(--space-xs) auto;padding:2px;background:#222;border-radius:8px;box-shadow:0 3px 6px #00000040}.shep-linear-kbd{width:100%;height:auto;display:block;background:#ececec;border-radius:6px;touch-action:none}.shep-key{cursor:pointer}.shep-key rect{stroke:#555;stroke-width:1;transition:fill .1s}.shep-key--white rect{fill:#fff;stroke:#888}.shep-key--white[data-pc="0"] rect{fill:#f1d0d0}.shep-key--white[data-pc="2"] rect{fill:#f1e0d0}.shep-key--white[data-pc="4"] rect{fill:#f1f1d0}.shep-key--white[data-pc="5"] rect{fill:#d3f1d0}.shep-key--white[data-pc="7"] rect{fill:#d0f1f1}.shep-key--white[data-pc="9"] rect{fill:#d0d0f1}.shep-key--white[data-pc="11"] rect{fill:#e5d0f1}.shep-key--white:hover rect{filter:brightness(.95)}.shep-key--white[data-pc="0"].active rect,.shep-key--white[data-pc="0"].pressed rect{fill:#ec9393}.shep-key--white[data-pc="2"].active rect,.shep-key--white[data-pc="2"].pressed rect{fill:#ecbf93}.shep-key--white[data-pc="4"].active rect,.shep-key--white[data-pc="4"].pressed rect{fill:#ecec93}.shep-key--white[data-pc="5"].active rect,.shep-key--white[data-pc="5"].pressed rect{fill:#9dec93}.shep-key--white[data-pc="7"].active rect,.shep-key--white[data-pc="7"].pressed rect{fill:#93ecec}.shep-key--white[data-pc="9"].active rect,.shep-key--white[data-pc="9"].pressed rect{fill:#9393ec}.shep-key--white[data-pc="11"].active rect,.shep-key--white[data-pc="11"].pressed rect{fill:#cd93ec}.shep-key--black rect{fill:#222;stroke:#000}.shep-key--black:hover rect{fill:#444}.shep-key--black.active rect,.shep-key--black.pressed rect{fill:#46a}.shep-key-label{font:600 12px Inter,system-ui,sans-serif;fill:#555;pointer-events:none;user-select:none}.shep-key-label--black{font-size:10px;fill:#ddd}.shep-key.disabled{opacity:.32;cursor:default;pointer-events:none}.shep-radial-wrap{display:flex;justify-content:center;margin:var(--space-xs) 0}The breakpoint is 1500 px rather than 1200,and the side column 440 px rather than 560,because of arithmetic that has to come out right: the content column is 920 px until 1500,and 920 less its padding,less the gap,less a 560 px side column leaves 262 px for the keyboard \2014  barely half what it had stacked. tools/layout-test.js caught exactly that and named it shrinks-when-wider. At 1500 the content column is 1040,which leaves 504 px,and every step above that is wider again. */ @media (min-width: 1500px){.shep-stage-grid{display:flex;align-items:flex-start;gap:var(--space-xl)}.shep-col-main{flex:1 1 0;min-width:0}.shep-col-side{flex:0 0 440px}.shep-col-main .shep-linear-kbd-wrap{max-width:100%}.shep-col-side .shep-radial-kbd{max-width:400px}}.shep-radial-kbd{width:100%;max-width:280px;display:block;touch-action:none}.shep-radial-wedge{cursor:pointer;transition:opacity .18s ease,fill-opacity .1s,stroke-width .1s;-webkit-tap-highlight-color:transparent;outline:none}.shep-radial-wedge:hover{fill-opacity:.85}.shep-radial-wedge.active{fill-opacity:.95;stroke-width:2}.shep-radial-wedge.pressed{fill-opacity:1;stroke-width:3;stroke:#fff}.shep-radial-wedge.disabled{opacity:.25;cursor:default;pointer-events:none}.shep-radial-wedge.morphing,.shep-radial-label.morphing{opacity:0}.shep-radial-label.disabled{opacity:.35}.shep-radial-label{transition:opacity .18s ease}.shep-key-kbd,.shep-key-kbd-radial{font:italic 700 13px ui-monospace,Menlo,monospace;fill:#ffe082;fill-opacity:.95;paint-order:stroke;stroke:#000000b3;stroke-width:2.5;stroke-linejoin:round;pointer-events:none;dominant-baseline:middle}.shep-tri-vlabel{font:700 14px Inter,system-ui,sans-serif;fill:#ffe082;fill-opacity:1;paint-order:stroke;stroke:#000000d9;stroke-width:3;stroke-linejoin:round;pointer-events:none}.shep-tri-vlabel-aux{font-size:11px;font-weight:500;fill-opacity:.78}.shep-key-kbd-radial{font-size:11px}.shep-key{-webkit-tap-highlight-color:transparent}.shep-radial-pointer{display:none!important}.btn-icon{font-size:.95em;line-height:1;display:inline-block;transform:translateY(-1px)}.btn{display:inline-flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);border:none;border-radius:var(--border-radius);font-family:var(--font-body);font-size:var(--font-size-sm);font-weight:600;cursor:pointer;transition:all var(--transition-fast)}.btn-primary{background:var(--color-primary);color:#fff}.btn-primary:hover{background:var(--color-primary-light);transform:translateY(-1px);box-shadow:var(--shadow-md)}.btn-outline{background:transparent;border:1px solid var(--color-border);color:var(--color-text-secondary)}.btn-outline:hover{border-color:var(--color-primary);color:var(--color-primary)}.callout{padding:var(--space-md) var(--space-lg);border-radius:var(--border-radius);margin:var(--space-lg) 0;display:flex;align-items:flex-start;gap:var(--space-md)}.callout-warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-text);color:var(--color-warning-text)}.callout-info{background:#11999e14;border:1px solid var(--color-primary-light);color:var(--color-text-secondary)}.callout-icon{font-size:var(--font-size-xl);flex-shrink:0;line-height:1}.callout-text{font-size:var(--font-size-sm);margin:0;color:inherit}.hero{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:var(--space-3xl) var(--space-xl);position:relative;overflow:hidden}.hero-bg-canvas{position:absolute;top:0;left:0;width:100%;height:100%;opacity:.15;pointer-events:none}.hero-content{position:relative;z-index:1;max-width:700px}.hero h1{font-size:var(--font-size-4xl);font-weight:800;line-height:1.1;margin-bottom:var(--space-lg);background:linear-gradient(135deg,var(--color-primary-dark),var(--color-primary-light));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.hero-tagline{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin-bottom:var(--space-2xl);max-width:550px;margin-left:auto;margin-right:auto}.hero-actions{display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap}.hero-actions .btn{padding:var(--space-md) var(--space-2xl);font-size:var(--font-size-base)}.hero-viz{width:100%;max-width:600px;height:120px;margin:var(--space-2xl) auto 0;border-radius:var(--border-radius-lg);overflow:hidden}.chapters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--space-lg);padding:var(--space-3xl) var(--space-xl);max-width:1100px;margin:0 auto}.chapter-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius-lg);padding:var(--space-xl);text-decoration:none;color:inherit;transition:all var(--transition-base);display:flex;flex-direction:column}.chapter-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--color-primary-light);text-decoration:none;color:inherit}.chapter-card-number{font-family:var(--font-mono);font-size:var(--font-size-xs);color:var(--color-primary);text-transform:uppercase;letter-spacing:.1em;margin-bottom:var(--space-sm)}.chapter-card h3{font-size:var(--font-size-md);margin-bottom:var(--space-sm)}.chapter-card p{font-size:var(--font-size-sm);color:var(--color-text-muted);flex:1}.chapter-nav{display:flex;justify-content:space-between;margin-top:var(--space-3xl);padding-top:var(--space-xl);border-top:1px solid var(--color-border);gap:var(--space-md)}.chapter-nav a{display:flex;flex-direction:column;padding:var(--space-md) var(--space-lg);border:1px solid var(--color-border);border-radius:var(--border-radius);text-decoration:none;transition:all var(--transition-base);max-width:45%}.chapter-nav a:hover{border-color:var(--color-primary-light);box-shadow:var(--shadow-sm);text-decoration:none}.chapter-nav-label{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.1em;color:var(--color-text-muted);margin-bottom:var(--space-xs)}.chapter-nav-title{font-weight:600;color:var(--color-text);font-size:var(--font-size-sm)}.chapter-nav .next{margin-left:auto;text-align:right}.audio-demo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:var(--space-sm);margin:var(--space-lg) 0}.audio-demo-grid.compact{grid-template-columns:repeat(var(--cols, 7),minmax(0,1fr))}.audio-demo-btn{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--border-radius);padding:var(--space-sm) var(--space-md);cursor:pointer;text-align:center;font-family:var(--font-body);font-size:var(--font-size-sm);color:var(--color-text-secondary);transition:all var(--transition-fast)}.audio-demo-btn:hover{border-color:var(--color-primary-light);color:var(--color-primary);background:#11999e0d}.audio-demo-btn.playing{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.audio-demo-btn .play-stop-icon:before{content:"\25b6";font-size:.9em}.audio-demo-btn.playing .play-stop-icon:before{content:"\25a0"}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.harmonic-figure{position:relative;display:block}.harmonic-figure>img,.harmonic-figure>svg{width:100%;aspect-ratio:685 / 475;height:auto;display:block}.harmonic-figure-buttons{position:absolute;top:35.625%;bottom:11.875%;right:1%;width:13%;display:grid;grid-template-rows:repeat(9,1fr)}.harmonic-figure-buttons>.harmonic-row{align-self:center;justify-self:center;display:flex;gap:4px;align-items:center}.harm-master-controls{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap;margin:var(--space-md) 0 var(--space-sm)}.harm-master-controls .harm-master-play{white-space:nowrap}.harm-freq-control{display:flex;flex-direction:column;gap:var(--space-xs);flex:1 1 220px}.harm-freq-control input[type=range]{width:100%;max-width:320px}.harm-master-hint{font-size:var(--font-size-xs);color:var(--color-text-muted);font-style:italic}#fig3-2-svg .envelope{transition:stroke .25s}.harmonic-figure.is-bowed #fig3-2-svg .envelope{stroke:#b16a2c}.is-muted{opacity:.28}.is-shadow{opacity:.55;filter:saturate(.4)}.harm-source-toggle{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap;margin:var(--space-sm) 0;font-size:var(--font-size-sm)}.harm-source-label{color:var(--color-text-muted)}.harm-source-btn{padding:4px 10px;border:1px solid var(--color-border);background:transparent;color:var(--color-text-secondary);border-radius:var(--border-radius);cursor:pointer;font:500 var(--font-size-sm) var(--font-body);transition:all var(--transition-fast)}.harm-source-btn:hover{border-color:var(--color-primary-light);color:var(--color-text)}.harm-source-btn.active{background:var(--color-primary);border-color:var(--color-primary);color:#fff}.harmonics-decomp-figure{position:relative;display:block}.harmonics-decomp-figure>img{width:100%;display:block}.harmonics-decomp-playbar{display:flex;align-items:center;gap:var(--space-sm);flex-wrap:wrap;margin:var(--space-xs) 0 var(--space-sm)}.preset-row{display:flex;gap:var(--space-xs);align-items:center;flex-wrap:wrap;row-gap:var(--space-xs)}.preset-row>.btn,.preset-row>button{flex-shrink:0;white-space:nowrap}.preset-row-header{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-sm);margin-bottom:var(--space-xs);flex-wrap:wrap}.preset-row-header .preset-label{font-size:var(--font-size-sm);color:var(--color-text-muted)}.polar-presets-table{border-collapse:collapse;margin:var(--space-xs) 0;font-size:var(--font-size-sm);font-variant-numeric:tabular-nums}.polar-presets-table th,.polar-presets-table td{padding:2px var(--space-sm);text-align:left;border:none}.polar-presets-table thead th{color:var(--color-text-muted);font-weight:600;font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--color-border, rgba(255,255,255,.1))}.polar-presets-table td:first-child{padding-left:0}.polar-presets-table tbody td{vertical-align:middle}.polar-presets-table tbody td .btn{white-space:nowrap}.polar-presets-table th:nth-child(2),.polar-presets-table td:nth-child(2){max-width:18em;padding-right:var(--space-xs)}.polar-presets-table th:nth-child(3),.polar-presets-table td:nth-child(3){padding-left:var(--space-xs)}.harmonics-decomp-hint{font-size:var(--font-size-xs);color:var(--text-secondary)}.harmonics-decomp-figure>.harmonics-decomp-buttons{position:absolute;top:9.8%;bottom:16.4%;right:.5%;width:80px;display:grid;grid-template-rows:repeat(6,1fr)}.harmonics-decomp-figure>.harmonics-decomp-buttons>.harmonic-row{align-self:center;justify-self:end;display:flex;gap:4px;align-items:center}.harmonic-row.is-muted .harmonic-play{opacity:.35;cursor:not-allowed}.harmonic-row.is-soloed .harmonic-play{border-color:var(--color-primary)}.fig-clickable{position:relative;display:block}.fig-clickable>img{width:100%;display:block}.fig-clickable>.fig-clickable-region{position:absolute;background:transparent;border:1px solid transparent;border-radius:var(--border-radius);padding:0;cursor:pointer;transition:background var(--transition-fast),border-color var(--transition-fast)}.fig-clickable>.fig-clickable-region:after{content:"\25b6";position:absolute;bottom:4px;right:6px;font-size:13px;line-height:1;color:#11999e8c;transition:color var(--transition-fast),transform var(--transition-fast);pointer-events:none}.fig-clickable>.fig-clickable-region:hover{background:#11999e0f;border-color:#11999e80}.fig-clickable>.fig-clickable-region:hover:after{color:var(--color-primary);transform:scale(1.25)}.fig-clickable>.fig-clickable-region.playing{background:#11999e24;border-color:var(--color-primary)}.fig-clickable>.fig-clickable-region.playing:after{color:var(--color-primary)}.modulation-presets{border-collapse:collapse;margin:var(--space-lg) 0;width:100%;max-width:580px}.modulation-presets th,.modulation-presets td{padding:var(--space-xs) var(--space-sm);vertical-align:middle}.modulation-presets thead th{font-size:var(--font-size-sm);font-weight:600;text-align:center;color:var(--color-text-secondary);border-bottom:1px solid var(--color-border);padding-bottom:var(--space-sm)}.modulation-presets thead th.corner{text-align:left;font-style:italic;color:var(--color-text-muted);font-weight:500}.modulation-presets tbody th{text-align:right;font-size:var(--font-size-sm);font-weight:600;color:var(--color-text-secondary);white-space:nowrap}.modulation-presets td{text-align:center}.modulation-presets td .audio-demo-btn{width:100%;min-width:64px;padding:var(--space-sm) var(--space-sm)}.text-center{text-align:center}.text-muted{color:var(--color-text-muted)}.mt-0{margin-top:0}.mb-0{margin-bottom:0}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes pulse{0%,to{opacity:.4}50%{opacity:1}}.loading{animation:pulse 1.5s ease-in-out infinite}@keyframes cd-spin-cw{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes cd-spin-ccw{0%{transform:rotate(0)}to{transform:rotate(-360deg)}}.cd-rom-hero{margin:0 auto var(--space-xl);text-align:center}.cd-flip-btn{display:inline-block;background:transparent;border:none;padding:0;margin:0 auto var(--space-md);cursor:pointer;position:relative;width:min(420px,70vw);aspect-ratio:1 / 1;border-radius:50%;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}.cd-flip-btn:focus-visible{outline:3px solid var(--color-primary);outline-offset:6px}.cd-rom-hero img.cd-spin{display:block;position:absolute;inset:0;width:100%;height:100%;animation:cd-spin-cw 30s linear infinite;will-change:transform,opacity;transition:opacity .6s ease}.cd-rom-hero img.cd-spin--data{animation:cd-spin-ccw 30s linear infinite;opacity:0}.cd-flip-btn.flipped img.cd-spin--label{opacity:0}.cd-flip-btn.flipped img.cd-spin--data{opacity:1}.cd-rom-hero .cd-dad-photo{display:none;margin:0 auto var(--space-md);max-width:min(560px,90vw);cursor:pointer}.cd-rom-hero .cd-dad-photo img{display:block;width:100%;height:auto;border-radius:6px;filter:drop-shadow(0 8px 24px rgba(0,0,0,.25))}.cd-rom-hero .cd-dad-photo figcaption{font-size:var(--font-size-sm);color:var(--color-text-muted);margin-top:var(--space-xs);font-style:italic}.cd-rom-hero.show-photo .cd-flip-btn,.cd-rom-hero.show-photo .cd-flip-hint{display:none}.cd-rom-hero.show-photo .cd-dad-photo{display:block}.cd-rom-hero figcaption{font-size:var(--font-size-sm);color:var(--color-text-muted)}.cd-flip-hint{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0 0 var(--space-md);font-style:italic}@media (prefers-reduced-motion: reduce){.cd-rom-hero img.cd-spin{animation:none}}.authors-group-photo{margin:var(--space-2xl) auto;max-width:640px;text-align:center}.authors-group-photo img{display:block;width:100%;height:auto;border-radius:6px;margin:0 auto var(--space-sm);filter:drop-shadow(0 6px 20px rgba(0,0,0,.22))}.authors-group-photo figcaption{font-size:var(--font-size-sm);color:var(--color-text-muted)}@media print{.sidebar,.mobile-nav-toggle,.demo-container,.audio-player,.theme-toggle{display:none}.main-content{margin-left:0}body{color:#000;background:#fff}}.site-search-trigger{display:flex;align-items:center;gap:6px;margin-top:var(--space-sm);padding:6px 10px;background:var(--color-surface-alt);color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:6px;font:500 13px/1 Inter,system-ui,sans-serif;cursor:pointer;width:100%;text-align:left;transition:background .12s,color .12s,border-color .12s}.site-search-trigger:hover{background:var(--color-surface);color:var(--color-text);border-color:var(--color-primary)}.site-search-trigger .search-trigger-label{flex:1}.site-search-trigger .search-trigger-kbd{font:600 11px JetBrains Mono,monospace;padding:2px 5px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-bg);color:var(--color-text-muted)}.site-search-modal{position:fixed;inset:0;background:#0000008c;display:none;align-items:flex-start;justify-content:center;z-index:9000;padding:80px 16px 16px;backdrop-filter:blur(3px)}.site-search-modal.open{display:flex}.site-search-modal-inner{width:min(720px,100%);max-height:80vh;overflow:auto;background:var(--color-surface);color:var(--color-text);border-radius:10px;box-shadow:0 16px 40px #0006;padding:18px}.site-search-modal .site-search-hint{margin:12px 0 0;font:12px JetBrains Mono,monospace;color:var(--color-text-muted)}.site-search-modal .site-search-hint kbd{padding:1px 5px;border:1px solid var(--color-border);border-radius:3px;background:var(--color-surface-alt)}.site-search-modal{--pagefind-ui-primary: var(--color-primary);--pagefind-ui-text: var(--color-text);--pagefind-ui-background: var(--color-surface);--pagefind-ui-border: var(--color-border);--pagefind-ui-tag: var(--color-surface-alt);--pagefind-ui-border-width: 1px;--pagefind-ui-border-radius: 6px;--pagefind-ui-image-border-radius: 6px;--pagefind-ui-image-box-ratio: 3 / 2;--pagefind-ui-font: Inter, system-ui, sans-serif}.site-search-modal .pagefind-ui__search-input,.site-search-modal .pagefind-ui__search-input:focus,.site-search-modal input[type=text]{color:var(--color-text)!important;background:var(--color-surface)!important;caret-color:var(--color-primary)}.site-search-modal .pagefind-ui__search-input::placeholder{color:var(--color-text-muted)!important}.site-search-modal .pagefind-ui__result-title,.site-search-modal .pagefind-ui__result-title a,.site-search-modal .pagefind-ui__result-link,.site-search-modal .pagefind-ui__result-excerpt,.site-search-modal .pagefind-ui__message{color:var(--color-text)!important}.site-search-modal .pagefind-ui__result-tags,.site-search-modal .pagefind-ui__filter-name{color:var(--color-text-secondary)!important}.site-search-modal mark{background:#ffd16659;color:inherit}.site-search-modal .pf-focused-result{outline:2px solid var(--color-primary);outline-offset:2px;border-radius:4px}body.site-search-open{overflow:hidden}.kbd-shortcut-hint{display:inline-flex;align-items:center;flex-wrap:wrap;gap:.25em}p.kbd-shortcut-hint{display:block;line-height:1.75}.kbd-shortcut-hint kbd{font-family:JetBrains Mono,ui-monospace,Menlo,monospace;font-size:.85em;padding:1px 5px;border-radius:3px;background:var(--color-surface, rgba(0,0,0,.08));border:1px solid var(--color-border, rgba(0,0,0,.18));color:var(--color-text)}@media (hover: none) and (pointer: coarse){:root:not(.has-keyboard) .kbd-shortcut-hint{display:none}}.nc-stage{position:relative;width:100%;aspect-ratio:4 / 3;max-height:65vh;background:#0e1a26;border-radius:8px;border:1px solid var(--color-border);overflow:hidden;cursor:default;touch-action:none}.nc-stage svg{width:100%;height:100%;display:block}.nc-icon{cursor:grab;user-select:none}.nc-icon.dragging{cursor:grabbing}.nc-particle{fill:#ffc857;stroke:#ffc857;opacity:.85;pointer-events:none}.nc-particle.percussion{fill:#ff6b6b;stroke:#ff6b6b}.nc-particle.harmony{fill:#9d8df1;stroke:#9d8df1}.nc-particle.melody{fill:#11999e;stroke:#11999e}.nc-particle.pink{fill:#ffc857;stroke:#ffc857}.nc-particle.click{fill:#fafafa;stroke:#fafafa}.nc-vector{stroke:#ffffff2e;stroke-dasharray:4 5;fill:none;pointer-events:none}.nc-source-body{fill:#11999e2e;stroke:#11999e;stroke-width:1.5}.nc-source-body.muted{fill:#e845451a;stroke:#e84545}.nc-source-body.soloed{fill:#ffc85738;stroke:#ffc857;stroke-width:2.2}.nc-source-body.silenced{fill:#ffffff0a;stroke:#ffffff2e;stroke-dasharray:3 3}.nc-sink-body{fill:#9d8df12e;stroke:#9d8df1;stroke-width:1.5}.nc-sink-body.deafened{fill:#e845451a;stroke:#e84545}.nc-sink-body.attended{fill:#ffc85738;stroke:#ffc857;stroke-width:2.2}.nc-sink-body.silenced{fill:#ffffff0a;stroke:#ffffff2e;stroke-dasharray:3 3}.nc-sink-nose{fill:#ffc857;stroke:#00000059;stroke-width:.75;cursor:grab}.nc-nose-stalk{stroke:#ffc857;stroke-width:3;stroke-linecap:round;pointer-events:stroke;cursor:grab}.nc-label{fill:#ffffffc7;font:12px/1 Inter,system-ui,sans-serif;pointer-events:none;user-select:none}.nc-label.small{fill:#ffffff80;font-size:10px}.nc-tag{font-size:10px;padding:1px 5px;border-radius:3px;background:#ffffff0f;color:var(--color-text-muted);font-family:var(--font-mono, ui-monospace, monospace)}.nc-tag.audible{background:#11999e40;color:#fff}.nc-tag.silenced{background:#e8454540;color:#fff}.ht-emoji{display:inline-block;width:1.1em;height:1em;overflow:hidden;position:relative;vertical-align:-.18em;line-height:1}.ht-emoji>span{position:absolute;font-size:1.7em;line-height:1;top:-.08em;left:50%;transform:translate(-50%);pointer-events:none}.nc-card{padding:6px 0}.nc-card+.nc-card{border-top:1px solid var(--color-border);margin-top:4px}.nc-card-top,.nc-card-bottom{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.nc-card-bottom{margin-top:4px}.nc-inline{vertical-align:middle}.nc-tag.hearing{background:#11999e40;color:#fff}.nc-tag.deafened{background:#e8454540;color:#fff}.nc-swatch{border:1px solid rgba(128,128,128,.55);box-sizing:content-box}.nc-stage.nc-egofocus #ncVectors{display:none!important}.nc-stage.nc-egofocus #ncSources g[data-src]:not([data-autofocus-active]){opacity:0;pointer-events:none;transition:opacity .4s ease}.nc-sink-nose,.nc-nose-stalk{transition:opacity .3s ease}.nc-icon[data-omni=true][data-src] .nc-sink-nose,.nc-icon[data-omni=true][data-src] .nc-nose-stalk,.nc-source-subj-label,.nc-sink-subj-label{opacity:0}.nc-del{background:transparent;border:1px solid var(--color-border);color:var(--color-text-muted);border-radius:50%;width:20px;height:20px;line-height:18px;padding:0;font-size:11px;cursor:pointer}.nc-del:hover{background:#e845452e;color:#e84545;border-color:#e84545}.nc-add{margin-top:6px;background:transparent;border:1px dashed var(--color-border);color:var(--color-text-muted);border-radius:6px;padding:3px 10px;font-size:var(--font-size-xs);cursor:pointer}.nc-add:hover:not(:disabled){background:#11999e1a;color:var(--color-text);border-color:var(--color-text-muted)}.nc-add:disabled{opacity:.4;cursor:not-allowed}.spec3d-legend{display:flex;flex-wrap:wrap;gap:4px 14px;justify-content:center;max-width:640px;margin:8px auto 0;font-size:.78rem;color:var(--color-text-secondary)}.spec3d-legend:empty{display:none}.spec3d-legend-item{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}.spec3d-swatch{width:11px;height:11px;border-radius:2px;border:1px solid rgba(0,0,0,.28);flex:0 0 auto}.demo-share{display:inline-flex;align-items:center;gap:8px}.demo-header .demo-share{justify-self:end;align-self:center}@media (max-width: 640px){.demo-header{grid-template-columns:auto 1fr}.demo-header .demo-share{grid-column:1 / -1;justify-self:start;margin-top:6px}.demo-header>.demo-description{order:0}}.demo-share-status{font-size:.76rem;color:var(--color-text-secondary)}.demo-container>.demo-share,.figure>.demo-share{margin:0 0 var(--space-sm) 0}