:root{--bg: #101418;--bg-raised: #1a2027;--bg-inset: #0a0d10;--fg: #e8ecf1;--fg-dim: #8b95a1;--accent: #4da3ff;--accent-warm: #ffab40;--ok: #37c871;--danger: #ff5252;--band-stripe: #dfe6ee;--band-bg: #232b34;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;--font-mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;--radius: 10px;--gap: 12px}*{box-sizing:border-box}html,body{margin:0;height:100%}body{background:var(--bg);color:var(--fg);font-family:var(--font-ui);-webkit-font-smoothing:antialiased;overscroll-behavior:none}#app{height:100%}.shell{max-width:980px;margin:0 auto;padding:calc(env(safe-area-inset-top,0px) + 16px) 16px 24px}.topnav{display:flex;align-items:baseline;gap:var(--gap);margin-bottom:18px}.brand{font-weight:700;letter-spacing:.04em;margin-right:8px}.topnav a{color:var(--fg-dim);text-decoration:none;padding:2px 8px;border-radius:6px}.topnav a.active{color:var(--fg);background:var(--bg-raised)}.hint{color:var(--fg-dim);font-size:.85rem}.btn{background:var(--bg-raised);color:var(--fg);border:1px solid #2c3640;border-radius:var(--radius);padding:10px 16px;font-size:.95rem;cursor:pointer}.btn:disabled{opacity:.5;cursor:default}.btn:not(:disabled):hover{border-color:var(--accent)}.tuner-header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}.note-name{font-size:2.6rem;font-weight:700;line-height:1}.header-info{display:flex;gap:16px;color:var(--fg-dim);font-family:var(--font-mono);font-size:.85rem}.reference-wrap{position:relative}.reference-readout{background:none;border:none;color:inherit;font:inherit;cursor:pointer;padding:2px 4px;border-radius:6px}.reference-readout:hover{color:var(--fg);background:var(--bg-raised)}.reference-popover{position:absolute;top:calc(100% + 6px);right:0;z-index:20;min-width:220px;padding:12px 14px;background:var(--bg-raised);border:1px solid var(--band-bg);border-radius:var(--radius);box-shadow:0 8px 24px #00000073;display:flex;flex-direction:column;gap:10px}.reference-row{display:flex;align-items:center;justify-content:space-between;gap:12px;color:var(--fg)}.reference-offset{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0}.reference-link{color:var(--accent);text-decoration:none;white-space:nowrap}.reference-link:hover{text-decoration:underline}.strobe-stack{position:relative}.strobe-canvas{display:block;width:100%;border-radius:var(--radius)}.band-rows{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;pointer-events:none}.band-row{display:flex;align-items:center;justify-content:space-between;padding:0 14px}.band-row.band-inactive{opacity:.65}.band-label{display:flex;flex-direction:column;gap:2px;text-shadow:0 1px 3px rgb(0 0 0 / 70%)}.band-name{font-weight:700;font-size:1.15rem}.band-target{color:var(--fg-dim);font-family:var(--font-mono);font-size:.72rem}.band-readout{display:flex;align-items:baseline;gap:4px;font-family:var(--font-mono);text-shadow:0 1px 3px rgb(0 0 0 / 70%)}.band-cents{font-size:1.7rem;font-weight:600;min-width:4.2ch;text-align:right}.band-cents-unit{color:var(--fg-dim)}.band-hz{color:var(--fg-dim);font-size:.78rem;min-width:8ch;text-align:right}.band-row.band-held .band-cents{color:var(--fg-dim)}.controls{display:flex;gap:var(--gap);margin-top:18px;flex-wrap:wrap}.btn-primary{border-color:var(--accent)}.btn-small{padding:6px 12px;font-size:.82rem}.btn-toggled{border-color:var(--accent);color:var(--accent);font-weight:700}.note-selector{display:flex;align-items:center;gap:10px;margin-bottom:14px}.profile-picker{background:var(--bg-raised);color:var(--fg);border:1px solid #2c3640;border-radius:8px;padding:7px 8px;font-size:.85rem;max-width:170px}.note-strip{display:flex;gap:6px;overflow-x:auto;flex:1;padding:2px;scrollbar-width:thin}.note-chip{background:var(--bg-raised);color:var(--fg-dim);border:1px solid #2c3640;border-radius:999px;padding:6px 12px;font-size:.85rem;font-family:var(--font-mono);cursor:pointer;white-space:nowrap}.note-chip-ding{border-style:double;border-width:3px}.note-chip-active{background:var(--accent);color:#06121f;border-color:var(--accent);font-weight:700}.note-selector-free{flex-wrap:wrap;align-items:center}.note-selector-free>.btn{margin-left:auto}.pitch-grid-wrap{display:flex;gap:12px;order:3;flex-basis:100%;justify-content:center;margin-top:4px}.pitch-grid{display:grid;grid-template-columns:repeat(6,minmax(42px,64px));gap:6px}.note-selector-below{margin:12px 0 0;justify-content:center}.note-selector-below .pitch-grid-wrap{margin-top:0}.pitch-grid .note-chip{border-radius:8px;padding:7px 0;text-align:center}.pc-both{display:flex;flex-direction:column;line-height:1.15}.pc-alt{font-size:.68rem;opacity:.75}.pitch-grid .note-chip:disabled{opacity:.3;cursor:default}.octave-stepper{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}.octave-value{font-family:var(--font-mono);font-size:1.3rem;font-weight:700;min-width:2ch;text-align:center}.led{width:16px;height:16px;border-radius:50%;border:1px solid #2c3640;background:var(--bg-inset);cursor:pointer;padding:0;align-self:center}.led.led-signal{background:var(--ok);box-shadow:0 0 8px var(--ok)}.led.led-clip{background:var(--danger);box-shadow:0 0 8px var(--danger)}.frozen-badge{position:absolute;top:8px;right:10px;background:var(--bg-inset);color:var(--accent);border:1px solid var(--accent);border-radius:6px;padding:3px 10px;font-size:.75rem;font-weight:700;letter-spacing:.06em}.divider-group,.demo-group{display:inline-flex;gap:4px}.capture-msg{display:flex;align-items:center;gap:12px;color:var(--ok);font-size:.9rem;margin:10px 0}.capture-link{color:var(--accent);text-decoration:none}.layout-numbers .band-cents{font-size:3.4rem;font-weight:700;min-width:4.6ch}.layout-numbers .band-hz{font-size:.95rem}.layout-numbers .band-name{font-size:1.4rem}.settings{max-width:640px}.settings-group{background:var(--bg-raised);border-radius:var(--radius);padding:14px 16px;margin-bottom:16px}.settings-group h3{margin:0 0 10px;font-size:.95rem;color:var(--fg-dim);font-weight:600;text-transform:uppercase;letter-spacing:.05em}.settings-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #232b34}.settings-row:last-child{border-bottom:none}.settings-row>span:first-child{display:flex;flex-direction:column}.settings-hint{color:var(--fg-dim);font-size:.72rem;max-width:300px}.settings-inline{display:inline-flex;align-items:center;gap:8px}.settings select,.editor-sheet select{background:var(--bg-inset);color:var(--fg);border:1px solid #2c3640;border-radius:6px;padding:6px 8px}.stepper{display:inline-flex;align-items:center;gap:4px}.stepper-btn{width:34px;height:34px;border-radius:8px;border:1px solid #2c3640;background:var(--bg-inset);color:var(--fg);font-size:1.1rem;cursor:pointer;touch-action:none}.stepper-btn:hover{border-color:var(--accent)}.stepper-value{font-family:var(--font-mono);min-width:7ch;text-align:center}.stepper-value small{color:var(--fg-dim)}.editor-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}.editor-sheet{background:var(--bg-raised);border-radius:var(--radius);padding:18px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto}.editor-sheet h3{margin-top:0}.quick-picks{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.editor-table{width:100%;border-collapse:collapse;font-size:.9rem}.editor-table th{text-align:left;color:var(--fg-dim);font-weight:500;font-size:.75rem;padding:4px 6px}.editor-table td{padding:4px 6px}.editor-input{background:var(--bg-inset);color:var(--fg);border:1px solid #2c3640;border-radius:6px;padding:6px 8px;font-family:var(--font-mono);width:100%}.editor-input-narrow{width:72px}.editor-input-wide{width:100%}.editor-cents{font-family:var(--font-mono);color:var(--fg-dim);white-space:nowrap}.editor-actions-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0;flex-wrap:wrap}.convert-helper{display:inline-flex;align-items:center;gap:6px;color:var(--fg-dim);font-size:.85rem}.editor-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:8px}.editor-footer-buttons{display:inline-flex;gap:8px}.profile-list{list-style:none;margin:0;padding:0}.profile-item{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 8px;border-radius:8px}.profile-item-active{background:var(--bg-inset);outline:1px solid var(--accent)}.profile-name{background:none;border:none;color:var(--fg);text-align:left;cursor:pointer;padding:6px 0;font-size:.92rem;flex:1}.profile-name small{color:var(--fg-dim);font-family:var(--font-mono);font-size:.72rem}.profile-actions{display:inline-flex;gap:4px}.settings-row-block{flex-direction:column;align-items:stretch}.install-hint{display:flex;align-items:center;gap:10px;background:var(--bg-raised);border-radius:var(--radius);padding:10px 14px;color:var(--fg-dim);font-size:.85rem;margin-top:16px}.lissajous{margin-top:18px}.strobe-dock{position:relative;display:grid;grid-template-columns:88px 88px minmax(0,1fr) auto;gap:14px;align-items:stretch}.dock-wires{position:absolute;left:0;top:0;pointer-events:none}.dock-wires-right{position:absolute;left:-14px;top:0;pointer-events:none}.dock-wire{stroke:#3a4654;stroke-width:1}.dock-col{position:relative}.dock-fig{position:absolute;left:50%;transform:translate(-50%)}.dock-outer .dock-fig{left:auto;right:0;transform:none}.dock-fig-3d{position:relative;left:auto;transform:none}.dock-ratio{position:absolute;top:2px;left:5px;font-family:var(--font-mono);font-size:.65rem;color:var(--fg-dim);pointer-events:none}.dock-fig .lissajous-beat{position:absolute;bottom:2px;left:0;right:0;text-align:center;font-size:.65rem;pointer-events:none}.lissajous-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}.lissajous-layout-toggle{display:inline-flex;gap:4px}.lissajous-picker{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:10px}.lissajous-tiles{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}.lissajous-tile{display:flex;flex-direction:column;align-items:center;gap:4px}.lissajous-canvas{border-radius:var(--radius);background:var(--bg-inset)}.lissajous-label{font-family:var(--font-mono);font-size:.8rem}.lissajous-label small{color:var(--fg-dim)}.lissajous-beat{font-family:var(--font-mono);font-size:.75rem;color:var(--fg-dim);min-height:1.1em}.lissajous-beat.lissajous-locked{color:var(--ok);font-weight:700}.pipe-panel{margin-top:14px;padding:12px 14px;background:var(--bg-raised);border-radius:var(--radius);display:flex;flex-direction:column;gap:8px}.pipe-row{display:flex;align-items:center;gap:var(--gap);flex-wrap:wrap}.pipe-target{font-family:var(--font-mono);font-size:.95rem;min-width:9em}.pipe-modes{display:flex;gap:6px}.pipe-volume{display:flex;align-items:center;gap:6px}.pipe-volume input{width:110px;accent-color:var(--accent)}.spectrum{margin-top:18px}.spectrum-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}.spectrum-cursor{font-family:var(--font-mono);font-size:.8rem;color:var(--accent-warm);min-width:14ch;text-align:right}.spectrum-canvas{display:block;width:100%;border-radius:var(--radius);touch-action:none;cursor:crosshair}.spectrum-handle-row{position:relative;height:26px}.retune-handle{position:absolute;top:1px;transform:translate(-50%);display:flex;align-items:center;gap:4px;padding:2px 6px;border-radius:999px;background:var(--bg-raised);border:1px solid #2c3640;color:var(--accent);font-size:.7rem;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}.retune-handle:active{cursor:grabbing}.retune-dot{width:10px;height:10px;border-radius:50%;background:var(--accent)}@media(max-width:640px){.shell{padding-left:10px;padding-right:10px}.note-name{font-size:2rem}.band-cents{font-size:1.35rem}.layout-numbers .band-cents{font-size:2.4rem}.band-target{display:none}.controls{gap:8px}.settings-row{flex-wrap:wrap}}.diagnostics{margin-top:22px;color:var(--fg-dim);font-size:.85rem}.diagnostics summary{cursor:pointer;-webkit-user-select:none;user-select:none}.diag-warn-badge{display:inline-block;margin-left:8px;padding:0 8px;border-radius:999px;background:var(--accent-warm);color:#201607;font-weight:700}.diag-warning{color:var(--accent-warm);margin:8px 0}.diag-note{color:var(--fg-dim);margin:8px 0}.diag-table{margin-top:8px;border-collapse:collapse;font-family:var(--font-mono);font-size:.8rem}.diag-table td{padding:3px 14px 3px 0}.diag-table td:first-child{color:var(--fg-dim)}.diag-table td:last-child{color:var(--fg)}.bench-table{border-collapse:collapse;font-family:var(--font-mono);font-size:.85rem;margin-top:10px}.bench-table th,.bench-table td{border:1px solid #2c3640;padding:6px 10px;text-align:right}.bench-table th:first-child,.bench-table td:first-child{text-align:left}.bench-table tr.pass td:last-child{color:var(--ok)}.bench-table tr.fail td:last-child{color:var(--danger)}