.function-canvas[data-v-fae30a82]{display:block;width:100%;height:100%}:root{--bg: #0a0b0f;--panel: #0f1116;--border: rgba(255, 255, 255, .06);--border-strong: rgba(255, 255, 255, .14);--text: #d6dbe3;--muted: #6b7380;--faint: #3b4250;--accent: #4fe0c9;--accent-dim: rgba(79, 224, 201, .16);--accent-2: #f6a94d;--danger: #f07b7b;--track: rgba(255, 255, 255, .1);--font-mono: "JetBrains Mono", "SF Mono", "Cascadia Code", ui-monospace, Menlo, Consolas, monospace;--radius: 6px;--gap: 14px}*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-mono);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}#app{min-height:100vh}.app{max-width:1080px;margin:0 auto;padding:40px 24px 64px;display:flex;flex-direction:column;gap:var(--gap)}.header{text-align:center;padding:16px 0 8px}.title{margin:0;font-size:clamp(19px,3.2vw,30px);font-weight:500;letter-spacing:.16em;color:var(--text)}.subtitle{margin:10px 0 0;font-size:13px;letter-spacing:.05em;color:var(--muted)}.stage{position:relative;height:clamp(340px,52vh,640px);border:1px solid var(--border);border-radius:var(--radius);background:var(--bg);overflow:hidden}.stage canvas{display:block;width:100%;height:100%}.control-bar{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px}.panel__label{display:block;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}.transport{display:flex;flex-direction:column;gap:18px}.transport__play{display:flex;align-items:center;gap:16px}.transport__status{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted)}.status-dot{width:8px;height:8px;border-radius:50%;background:var(--faint)}.status-dot.on{background:var(--accent);box-shadow:0 0 8px var(--accent)}.transport__meta{font-size:11px;color:var(--faint);border-top:1px solid var(--border);padding-top:12px}.btn{font-family:var(--font-mono);font-size:13px;color:var(--text);background:transparent;border:1px solid var(--border-strong);border-radius:var(--radius);padding:8px 14px;cursor:pointer;transition:border-color .15s ease,background .15s ease,color .15s ease}.btn:hover{border-color:var(--accent)}.btn:focus-visible{outline:1px solid var(--accent);outline-offset:2px}.btn--primary{min-width:128px;padding:12px 20px;font-size:14px;letter-spacing:.08em;border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.btn--primary:hover{background:#4fe0c938}.btn--primary.is-playing{border-color:var(--accent-2);color:var(--accent-2);background:#f6a94d1f}.btn__glyph{margin-right:6px}.selector__options{display:flex;flex-wrap:wrap;gap:8px}.btn--preset{padding:7px 12px}.btn--preset.active{border-color:var(--accent);color:var(--accent);background:var(--accent-dim)}.param{display:flex;flex-direction:column;gap:8px}.param__label{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.param__row{display:flex;align-items:center;gap:12px}.preset-row{display:flex;flex-wrap:wrap;gap:6px}.chip{font-family:var(--font-mono);font-size:12px;color:var(--muted);background:transparent;border:1px solid var(--border);border-radius:4px;padding:3px 9px;cursor:pointer;transition:color .15s ease,border-color .15s ease}.chip:hover{color:var(--text);border-color:var(--border-strong)}.chip.active{color:var(--accent);border-color:var(--accent)}.readout{font-size:13px;color:var(--text);white-space:nowrap;min-width:56px;text-align:right}.readout .unit{color:var(--muted);margin-left:3px;font-size:11px}.readout--fixed{min-width:46px}input[type=range].slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex:1;min-width:0;height:2px;background:var(--track);border-radius:1px;outline:none;cursor:pointer}input[type=range].slider::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--text);border:1px solid var(--bg);cursor:pointer}input[type=range].slider::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--text);border:1px solid var(--bg);cursor:pointer}input[type=range].slider:focus-visible{box-shadow:0 0 0 2px var(--accent-dim)}.harmonics__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.harmonics__header .panel__label{margin-bottom:0}.toggle{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--muted);cursor:pointer}.toggle input{accent-color:var(--accent);cursor:pointer}.harmonic-grid{display:flex;flex-direction:column}.harmonic-row{display:grid;grid-template-columns:46px 1fr 1fr 1fr;align-items:center;gap:14px;padding:8px 0;border-top:1px solid var(--border)}.harmonic-row--head{border-top:none;padding:4px 0 8px}.harmonic-row__index{font-size:12px;color:var(--muted)}.harmonic-row--head .harmonic-row__field,.harmonic-row--head .harmonic-row__index{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}.harmonic-row__field{display:flex;align-items:center;gap:10px;min-width:0}.footer{display:flex;flex-direction:column;gap:6px;padding-top:4px;text-align:center}.formula{font-size:13px;color:var(--text);overflow-wrap:anywhere}.meta{font-size:11px;color:var(--muted);letter-spacing:.04em}.error{font-size:12px;color:var(--danger)}@media (max-width: 760px){.app{padding:24px 14px 48px}.control-bar{grid-template-columns:1fr}.stage{height:46vh}.harmonic-row--head{display:none}.harmonic-row{display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}.harmonic-row__field{width:100%}}.back-link{align-self:flex-start;font-size:12px;letter-spacing:.08em;color:var(--muted);text-decoration:none}.back-link:hover{color:var(--accent)}.selector-stack{display:flex;flex-direction:column;gap:var(--gap)}.keyboard{display:flex;gap:2px;align-items:flex-end}.key{flex:1;min-width:0;height:92px;border-radius:0 0 4px 4px;border:1px solid var(--border-strong);background:linear-gradient(180deg,#2a2f3a,#161922);color:var(--text);font-family:var(--font-mono);font-size:9px;cursor:pointer;padding:6px 2px;display:flex;align-items:flex-end;justify-content:center;-webkit-user-select:none;user-select:none;transition:background .08s ease,border-color .08s ease}.key:hover{background:linear-gradient(180deg,#333a48,#1d2230);border-color:var(--accent)}.key:active{background:var(--accent-dim)}.key--black{height:58px;background:#0a0b0f;border-color:#000;color:var(--muted)}.key--black:hover{background:#141821}.key__name{line-height:1}.param__hint{font-size:11px;color:var(--faint);margin:0}.seo-section{padding:20px 22px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}.seo-section h2{margin:0 0 12px;font-size:15px;font-weight:500;letter-spacing:.04em;color:var(--text)}.seo-section p{margin:0 0 12px;font-size:13px;line-height:1.7;color:var(--muted)}.seo-section p:last-child{margin-bottom:0}.seo-section strong{color:var(--text);font-weight:500}