.MafsView{display:block;background:var(--mafs-bg);overflow:hidden;-webkit-user-select:none;user-select:none;font-family:inherit;font-variant-numeric:tabular-nums;touch-action:none;outline:0;--mafs-bg: black;--mafs-fg: white;--mafs-origin-color: var(--mafs-fg);--mafs-line-color: #555;--mafs-line-stroke-dash-style: 4, 3;--mafs-axis-stroke-width: 1px;--grid-line-subdivision-color: #222;--mafs-red: #f11d0e;--mafs-orange: #f14e0e;--mafs-yellow: #ffe44a;--mafs-green: #15e272;--mafs-blue: #58a6ff;--mafs-indigo: #7c58ff;--mafs-violet: #ae58ff;--mafs-pink: #ee00ab}.MafsView text{fill:var(--mafs-fg);cursor:default}.MafsView path{stroke:var(--mafs-fg)}.MafsView:focus-visible{border-radius:5px;outline:3px solid #58a6ff}@supports not selector(:focus-visible){.MafsView:focus{border-radius:5px;outline:3px solid #58a6ff}}.mafs-shadow{paint-order:stroke;stroke-width:3px;stroke:var(--mafs-bg);stroke-opacity:.75;stroke-linejoin:round}.mafs-movable-point{cursor:grab;touch-action:none}.mafs-movable-point-dragging{cursor:grabbing}.mafs-movable-point:focus{outline:0}.mafs-movable-point *{fill:none;stroke:none}.mafs-movable-point-hitbox{fill:transparent}.mafs-movable-point-focus{stroke:var(--movable-point-color);stroke-width:2;stroke-opacity:0;fill:none;transition:stroke-opacity .2s ease}.mafs-movable-point-ring{fill:var(--movable-point-color);fill-opacity:.25;stroke:none;transition:r .2s ease}.mafs-movable-point-point{fill:var(--movable-point-color);transition:r .2s ease}.mafs-movable-point:hover .mafs-movable-point-point,.mafs-movable-point:focus-visible .mafs-movable-point-point{r:calc(var(--movable-point-ring-size) - 2px)}.mafs-movable-point:hover .mafs-movable-point-ring,.mafs-movable-point:focus-visible .mafs-movable-point-ring{r:calc(var(--movable-point-ring-size) + 3px)}.mafs-movable-point.mafs-movable-point-dragging .mafs-movable-point-ring{r:var(--movable-point-ring-size)}.mafs-movable-point:focus-visible .mafs-movable-point-focus{stroke-opacity:1}:root{--black: #000000;--white: #FFFFFF;--gray-50: #FAFAFA;--gray-100: #F5F5F5;--gray-200: #E5E5E5;--gray-300: #D4D4D4;--gray-400: #A3A3A3;--gray-500: #737373;--gray-600: #525252;--gray-700: #404040;--gray-800: #262626;--gray-900: #171717;--bg: var(--white);--bg-secondary: var(--gray-50);--bg-tertiary: var(--gray-100);--border: var(--gray-200);--border-strong: var(--black);--text-primary: var(--black);--text-secondary: var(--gray-600);--text-muted: var(--gray-400);--accent: var(--black);--accent-hover: var(--gray-800);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 24px;--radius-full: 9999px;--shadow-sm: 0 1px 2px rgba(0,0,0,.05);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--shadow-lg: 0 12px 40px rgba(0,0,0,.12);--transition-fast: .12s ease;--transition-normal: .2s ease;--transition-smooth: .3s cubic-bezier(.4, 0, .2, 1);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "Space Mono", "Consolas", monospace}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background:var(--bg);color:var(--text-primary);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}:focus-visible{outline:3px solid var(--black);outline-offset:2px}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--gray-500)}.app-container{display:flex;flex-direction:column;height:100vh;max-width:1600px;margin:0 auto}header{padding:1rem 2.5rem;display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--black);background:var(--bg);position:sticky;top:0;z-index:100}.header-left{display:flex;align-items:center;gap:2rem}.header-right{display:flex;align-items:center;gap:1rem}.logo{font-size:1.6rem;font-weight:900;letter-spacing:-.5px;color:var(--black);display:flex;align-items:center;gap:.5rem;text-transform:uppercase;cursor:pointer;-webkit-user-select:none;user-select:none}.logo svg{animation:spin 8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.mode-toggle{display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border:2px solid var(--black);border-radius:var(--radius-full);font-weight:600;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;background:var(--bg);transition:all var(--transition-normal);-webkit-user-select:none;user-select:none}.mode-toggle:hover,.mode-toggle.active{background:var(--black);color:var(--white)}.mode-toggle .toggle-indicator{width:36px;height:20px;border-radius:10px;background:var(--gray-300);position:relative;transition:background var(--transition-normal)}.mode-toggle.active .toggle-indicator{background:var(--white)}.mode-toggle .toggle-indicator:after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--black);transition:transform var(--transition-smooth)}.mode-toggle.active .toggle-indicator:after{transform:translate(16px);background:var(--black)}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:380px;border-right:2px solid var(--black);padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;background:var(--bg)}.panel{border:2px solid var(--black);border-radius:var(--radius-md);padding:1.25rem;background:var(--bg);transition:box-shadow var(--transition-normal)}.panel:hover{box-shadow:4px 4px 0 var(--black)}.panel-title{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-secondary);margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}.btn{padding:.65rem 1.25rem;border:2px solid var(--black);border-radius:var(--radius-sm);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--transition-fast);display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-transform:uppercase;letter-spacing:.5px;font-family:var(--font-sans);background:var(--bg);color:var(--black)}.btn:hover{background:var(--black);color:var(--white);box-shadow:2px 2px 0 var(--gray-400)}.btn:active{transform:translate(1px,1px);box-shadow:none}.btn-primary{background:var(--black);color:var(--white)}.btn-primary:hover{background:var(--gray-800);box-shadow:3px 3px 0 var(--gray-300)}.btn-secondary{background:var(--bg);color:var(--black)}.btn-danger{border-color:var(--gray-300);color:var(--gray-500);padding:.5rem;background:transparent}.btn-danger:hover{border-color:var(--black);background:var(--black);color:var(--white)}.func-item{display:flex;align-items:center;gap:.75rem;padding:.75rem;border:2px solid var(--gray-200);border-radius:var(--radius-sm);margin-bottom:.5rem;cursor:pointer;transition:all var(--transition-fast);background:var(--bg)}.func-item:hover{border-color:var(--gray-400)}.func-item.active{border-color:var(--black);box-shadow:3px 3px 0 var(--black)}.func-color-input{width:24px;height:24px;padding:0;border:1px solid var(--gray-300);border-radius:4px;cursor:pointer;flex-shrink:0;background-color:transparent;align-self:center}.func-color-input::-webkit-color-swatch-wrapper{padding:0}.func-color-input::-webkit-color-swatch{border:none;border-radius:3px}.func-details{flex:1;display:flex;flex-direction:column;gap:.25rem;min-width:0}.func-expr-input{background:transparent;border:none;color:var(--black);font-family:var(--font-mono);font-size:1rem;font-weight:700;outline:none;width:100%}.func-expr-input::placeholder{color:var(--gray-400)}.func-instrument-row{display:flex;align-items:center;gap:.4rem;font-size:.75rem;color:var(--text-secondary);font-weight:500}.func-instrument-row .instrument-icon{font-size:1rem;line-height:1}.instrument-select{background:transparent;border:none;color:var(--text-secondary);font-size:.75rem;font-weight:600;font-family:var(--font-sans);padding:0;cursor:pointer;outline:none;text-transform:uppercase;letter-spacing:.5px}.instrument-select option{background:var(--bg);color:var(--black)}.range-panel{display:flex;flex-direction:column;gap:.75rem}.range-row{display:flex;align-items:center;gap:.5rem}.range-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);width:40px;flex-shrink:0}.range-input{flex:1;padding:.5rem .75rem;border:2px solid var(--gray-200);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.85rem;font-weight:700;color:var(--black);background:var(--bg);outline:none;transition:border-color var(--transition-fast);width:100%}.range-input:focus{border-color:var(--black)}.range-input::placeholder{color:var(--gray-400)}.keyboard-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4px}.keyboard-btn{background:var(--bg);border:2px solid var(--gray-200);color:var(--black);border-radius:var(--radius-sm);padding:.45rem .2rem;font-size:.85rem;font-family:var(--font-mono);font-weight:700;cursor:pointer;transition:all var(--transition-fast);-webkit-user-select:none;user-select:none}.keyboard-btn:hover{border-color:var(--black);background:var(--gray-100)}.keyboard-btn:active{background:var(--black);color:var(--white);border-color:var(--black)}.keyboard-btn.action-btn{background:var(--gray-100);border-color:var(--gray-300)}.viewport{flex:1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;background:var(--bg)}.graph-container{width:100%;height:100%;background:var(--bg);border-bottom:2px solid var(--black);overflow:hidden;position:relative}.playback-controls{position:absolute;bottom:1.5rem;left:50%;transform:translate(-50%);background:var(--white);padding:.75rem 1.5rem;border-radius:var(--radius-full);border:2px solid var(--black);display:flex;align-items:center;gap:1.5rem;box-shadow:4px 4px 0 var(--black);z-index:10}.play-btn{width:48px;height:48px;border-radius:50%;background:var(--black);color:var(--white);border:2px solid var(--black);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-smooth)}.play-btn:hover{transform:scale(1.08);box-shadow:0 0 0 3px var(--gray-300)}.play-btn svg{width:20px;height:20px}.volume-panel{display:flex;align-items:center;gap:.75rem}.volume-label{font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);white-space:nowrap}input[type=range]{-webkit-appearance:none;appearance:none;width:100%;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:16px;width:16px;border-radius:50%;background:var(--black);cursor:pointer;margin-top:-6px;border:2px solid var(--black);transition:box-shadow var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{box-shadow:0 0 0 4px #00000026}input[type=range]::-webkit-slider-runnable-track{width:100%;height:4px;cursor:pointer;background:var(--gray-200);border-radius:2px}input[type=range]::-moz-range-thumb{height:16px;width:16px;border-radius:50%;background:var(--black);cursor:pointer;border:2px solid var(--black)}input[type=range]::-moz-range-track{width:100%;height:4px;cursor:pointer;background:var(--gray-200);border-radius:2px}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;color:var(--text-muted);text-align:center;gap:.5rem}.empty-state svg{opacity:.3}.empty-state p{font-size:1rem;font-weight:500}.voice-indicator{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;border:2px solid var(--black);border-radius:var(--radius-full);font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;animation:pulse-border 2s ease-in-out infinite}.voice-indicator.listening{background:var(--black);color:var(--white)}@keyframes pulse-border{0%,to{box-shadow:0 0 #0000004d}50%{box-shadow:0 0 0 6px #0000001a}}.voice-indicator .pulse-dot{width:8px;height:8px;border-radius:50%;background:currentColor;animation:pulse-dot 1s ease-in-out infinite}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;gap:1.5rem;background:var(--bg)}.loading-screen .logo-large{font-size:3rem;font-weight:900;letter-spacing:-1px;text-transform:uppercase;display:flex;align-items:center;gap:.75rem}.loading-screen .logo-large svg{animation:spin 2s linear infinite}.loading-screen .tagline{font-size:1rem;color:var(--text-secondary);font-weight:500}.modebar-btn svg{width:24px!important;height:24px!important}.modebar-btn{padding:4px!important}.modebar-group{padding-left:10px!important}.eyes-closed-banner{background:var(--black);color:var(--white);text-align:center;padding:.6rem 1rem;font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1px;display:flex;align-items:center;justify-content:center;gap:.5rem}.eyes-closed-banner .pulse-dot{width:6px;height:6px;border-radius:50%;background:var(--white);animation:pulse-dot 1s ease-in-out infinite}.speak-toast{position:fixed;bottom:5rem;left:50%;transform:translate(-50%) translateY(20px);background:var(--black);color:var(--white);padding:.75rem 1.5rem;border-radius:var(--radius-lg);font-size:.85rem;font-weight:600;opacity:0;transition:all var(--transition-smooth);pointer-events:none;z-index:1000;max-width:600px;text-align:center;line-height:1.5;white-space:normal}.speak-toast.visible{opacity:1;transform:translate(-50%) translateY(0)}@media(max-width:900px){.main-content{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:2px solid var(--black);max-height:40vh}header{padding:.75rem 1.25rem}.playback-controls{bottom:.75rem;padding:.5rem 1rem;gap:1rem}}.walk-indicator{display:flex;align-items:center;gap:.4rem;padding:.4rem .85rem;border:2px solid var(--black);border-radius:var(--radius-full);font-size:.75rem;font-weight:700;font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.5px;background:var(--black);color:var(--white);animation:pulse-border 2s ease-in-out infinite}.walk-controls{display:flex;align-items:center;gap:4px;border-left:2px solid var(--gray-200);padding-left:1rem}.walk-btn{width:36px;height:36px;border-radius:50%;background:var(--white);color:var(--black);border:2px solid var(--black);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.walk-btn:hover{background:var(--black);color:var(--white)}.walk-btn:active{transform:scale(.92)}.speed-controls{display:flex;gap:4px}.speed-btn{flex:1;padding:.4rem .25rem;border:2px solid var(--gray-200);border-radius:var(--radius-sm);background:var(--bg);color:var(--text-secondary);font-family:var(--font-mono);font-size:.75rem;font-weight:700;cursor:pointer;transition:all var(--transition-fast);text-align:center}.speed-btn:hover{border-color:var(--black);color:var(--black)}.speed-btn.active{background:var(--black);color:var(--white);border-color:var(--black)}.overlay-backdrop{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:500;animation:fadeIn .2s ease}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.overlay-panel{background:var(--white);border:3px solid var(--black);border-radius:var(--radius-lg);padding:2rem;max-width:520px;width:90%;max-height:80vh;overflow-y:auto;box-shadow:8px 8px 0 var(--black);animation:slideUp .3s cubic-bezier(.4,0,.2,1)}@keyframes slideUp{0%{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.overlay-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:2px solid var(--black)}.overlay-header h2{font-size:1.4rem;font-weight:900;text-transform:uppercase;letter-spacing:-.5px}.shortcuts-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.5rem}.shortcut-row{display:flex;align-items:center;gap:1rem;padding:.5rem 0;border-bottom:1px solid var(--gray-100)}.shortcut-key{display:inline-flex;align-items:center;justify-content:center;min-width:70px;padding:.3rem .6rem;background:var(--gray-100);border:2px solid var(--gray-300);border-radius:var(--radius-sm);font-family:var(--font-mono);font-size:.75rem;font-weight:700;color:var(--black);text-align:center;white-space:nowrap}.shortcut-action{font-size:.85rem;color:var(--text-secondary);font-weight:500}.help-section{margin-top:1.25rem;padding-top:1rem;border-top:2px solid var(--gray-200)}.help-section h3{font-size:.85rem;font-weight:800;text-transform:uppercase;letter-spacing:1px;margin-bottom:.5rem}.help-section p{font-size:.85rem;color:var(--text-secondary);line-height:1.6}.help-section kbd{display:inline-block;padding:.15rem .4rem;background:var(--gray-100);border:1px solid var(--gray-300);border-radius:3px;font-family:var(--font-mono);font-size:.75rem;font-weight:700}.onboarding-subtitle{font-size:1rem;color:var(--text-secondary);margin-bottom:1.5rem;font-weight:500}.onboarding-features{display:flex;flex-direction:column;gap:1rem}.onboarding-feature{display:flex;align-items:flex-start;gap:1rem;padding:1rem;border:2px solid var(--gray-200);border-radius:var(--radius-md);transition:border-color var(--transition-fast)}.onboarding-feature:hover{border-color:var(--black)}.feature-icon{font-size:1.5rem;flex-shrink:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:2px solid var(--gray-200);border-radius:var(--radius-sm);background:var(--gray-50)}.onboarding-feature strong{display:block;font-size:.9rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;margin-bottom:.25rem}.onboarding-feature p{font-size:.8rem;color:var(--text-secondary);line-height:1.5;margin:0}.onboarding-feature kbd{display:inline-block;padding:.1rem .35rem;background:var(--gray-100);border:1px solid var(--gray-300);border-radius:3px;font-family:var(--font-mono);font-size:.7rem;font-weight:700}.instrument-emoji{font-size:1.1rem;line-height:1;flex-shrink:0}.MafsView{--mafs-bg: var(--white) !important;--mafs-fg: var(--black) !important;--mafs-origin-color: var(--black) !important;--mafs-grid-line-color: rgba(0,0,0,.1) !important;--mafs-font-math: var(--font-sans) !important;background:var(--mafs-bg)!important;font-family:var(--font-sans)!important;color:var(--mafs-fg)!important}.MafsView text{font-family:var(--font-sans)!important;fill:var(--mafs-fg)!important}.MafsView line,.MafsView path{transition:opacity .1s ease}