*{box-sizing:border-box}:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--piano-width:32px;--time-axis-height:24px;--settings-panel-width:288px;background-color:#121212;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-weight:400;line-height:1.5}html,body,#root{width:100%;height:100%;margin:0;padding:0;overflow:hidden}button{font-family:inherit}.app{height:100vh;height:100dvh;display:flex;position:relative;overflow:hidden}.settings-toggle{z-index:100;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e1e1ee6;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;font-size:1.25rem;transition:background .2s,transform .2s,right .3s;display:flex;position:fixed;top:1rem;right:1rem}.settings-toggle.panel-collapsed{right:44px}.settings-toggle:hover{background:#323232f2;transform:scale(1.05)}.settings-panel{width:var(--settings-panel-width);background:#1a1a1a;border-left:1px solid #333;flex-shrink:0;height:100vh;padding:4rem 1rem 1rem;transition:width .3s,padding .3s,border .3s;overflow:hidden auto}.settings-panel.collapsed{border-left-color:#0000;width:0;padding:0;overflow:hidden}.settings-content{flex-direction:column;gap:.25rem;min-width:258px;display:flex}.audio-start-big{z-index:100;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#2563ebf2;border:none;border-radius:16px;flex-direction:column;align-items:center;gap:1rem;padding:2rem 3rem;transition:background .2s,transform .2s;display:flex;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.audio-start-big:hover:not(:disabled){background:#1d4ed8fa;transform:translate(-50%,-50%)scale(1.02)}.audio-start-big:disabled{opacity:.7;cursor:not-allowed}.audio-start-big.transitioning{pointer-events:none;animation:.35s ease-in-out forwards shrink-to-corner}@keyframes shrink-to-corner{0%{background:#2563ebf2;border-radius:16px;width:140px;height:140px;top:50%;left:50%;transform:translate(-50%,-50%)}to{background:#dc2626e6;border-radius:8px;width:40px;height:40px;top:1rem;left:1rem;transform:translate(0)}}.audio-start-big.transitioning .icon-stop{width:14px;height:14px}.icon-mic-big{background:currentColor;width:48px;height:48px;display:block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") 50%/contain no-repeat}.start-label{font-size:1.25rem;font-weight:600}.start-shortcut{opacity:.7;vertical-align:baseline;font-size:.875rem;font-weight:400;position:relative;top:-.15em}.start-error{color:#fca5a5;text-align:center;max-width:200px;font-size:.75rem}.icon-loading-big{border:3px solid;border-top-color:#0000;border-radius:50%;width:48px;height:48px;animation:.8s linear infinite spin;display:block}.frequency-readout{z-index:100;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;font-variant-numeric:tabular-nums;white-space:pre;contain:layout style;background:#1e1e1ee6;border-radius:8px;min-width:120px;padding:.75rem 1rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;position:fixed;top:4rem;left:1rem}.frequency-readout.hidden{opacity:0;pointer-events:none;transition:opacity .3s ease-out}.frequency-readout.no-buttons{top:1rem}.freq-value{color:#60a5fa;min-width:100px;font-size:1.25rem;font-weight:600}.freq-note{gap:.75rem;margin-top:.25rem;font-size:.875rem;display:flex}.note-name{color:#fff;font-weight:600}.cents-value{color:#a1a1aa}.pitch-meter{contain:layout style;width:100%;margin-top:.5rem}.pitch-meter-bar{background:linear-gradient(to right in oklch,#ff0909 0%,#2eff17 50%,#ff0909 100%);border-radius:4px;height:8px;position:relative;overflow:hidden}@supports (color:lab(0% 0 0)){.pitch-meter-bar{background:linear-gradient(to right in oklch,lab(54.4967% 81.621 70.0159) 0%,lab(88.167% -77.1608 80.3316) 50%,lab(54.4967% 81.621 70.0159) 100%)}}.pitch-meter-center{background:#ffffff80;width:2px;position:absolute;top:0;bottom:0;left:50%;transform:translate(-50%)}.pitch-meter-indicator{background:#ffffffe6;border-radius:3px;min-width:4px;height:14px;position:absolute;top:50%;transform:translate(-50%,-50%);box-shadow:0 0 4px #00000080}.pitch-meter-labels{color:#6b7280;justify-content:space-between;margin-top:2px;font-size:.625rem;display:flex}.screenshot-button{z-index:100;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e1e1ee6;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s,transform .2s;display:flex;position:fixed;top:1rem;left:4rem}.screenshot-button:hover{background:#323232f2;transform:scale(1.05)}.icon-camera{background:currentColor;width:18px;height:18px;display:block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/%3E%3Ccircle cx='12' cy='13' r='3'/%3E%3C/svg%3E") 50%/contain no-repeat}.fullscreen-button{z-index:100;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e1e1ee6;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s,transform .2s,right .3s;display:none;position:fixed;top:1rem;right:4rem}@media (max-width:768px){.fullscreen-button{display:flex}}.fullscreen-button:hover{background:#323232f2;transform:scale(1.05)}.fullscreen-button.panel-collapsed{right:6rem}.icon-fullscreen{background:currentColor;width:18px;height:18px;display:block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3H5a2 2 0 0 0-2 2v3'/%3E%3Cpath d='M21 8V5a2 2 0 0 0-2-2h-3'/%3E%3Cpath d='M3 16v3a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M16 21h3a2 2 0 0 0 2-2v-3'/%3E%3C/svg%3E") 50%/contain no-repeat}.icon-fullscreen-exit{background:currentColor;width:18px;height:18px;display:block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 3v3a2 2 0 0 1-2 2H3'/%3E%3Cpath d='M21 8h-3a2 2 0 0 1-2-2V3'/%3E%3Cpath d='M3 16h3a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M16 21v-3a2 2 0 0 1 2-2h3'/%3E%3C/svg%3E") 50%/contain no-repeat}.audio-toggle{z-index:100;color:#fff;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e1e1ee6;border:none;border-radius:8px;justify-content:center;align-items:center;width:40px;height:40px;transition:background .2s,transform .2s;display:flex;position:fixed;top:1rem;left:1rem}.audio-toggle:hover:not(:disabled){background:#323232f2;transform:scale(1.05)}.audio-toggle:disabled{opacity:.5;cursor:not-allowed}.audio-toggle.paused{background:#2563ebe6}.audio-toggle.paused:hover:not(:disabled){background:#1d4ed8f2}.audio-toggle.recording{background:#dc2626e6}.audio-toggle.recording:hover:not(:disabled){background:#b91c1cf2}.icon-stop{background:currentColor;border-radius:2px;width:14px;height:14px;display:block}.icon-loading{border:2px solid;border-top-color:#0000;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin;display:block}.icon-mic{background:currentColor;width:16px;height:16px;display:block;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") 50%/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z'/%3E%3Cpath d='M19 10v2a7 7 0 0 1-14 0v-2'/%3E%3Cline x1='12' x2='12' y1='19' y2='22'/%3E%3C/svg%3E") 50%/contain no-repeat}@keyframes spin{to{transform:rotate(360deg)}}[data-tooltip]:after{content:attr(data-tooltip);color:#fff;white-space:nowrap;opacity:0;pointer-events:none;z-index:10000;background:#000000e6;border-radius:6px;margin-top:8px;padding:6px 10px;font-size:12px;font-weight:500;transition:opacity .15s;display:none;position:absolute;top:100%;left:50%;transform:translate(-50%);box-shadow:0 2px 8px #0000004d}@media (hover:hover){[data-tooltip]:hover{z-index:10001}[data-tooltip]:hover:after{opacity:1;display:block}}[data-tooltip-pos=right]:after{margin:0 0 0 8px;inset:50% auto auto 100%;transform:translateY(-50%)}[data-tooltip-pos=left]:after{margin:0 8px 0 0;inset:50% 100% auto auto;transform:translateY(-50%)}[data-tooltip-pos=bottom-start]:after{margin-top:8px;top:100%;left:0;transform:none}[data-tooltip-pos=bottom-end]:after{margin-top:8px;top:100%;left:auto;right:0;transform:none}.spectrogram-area{padding-bottom:env(safe-area-inset-bottom,0px);flex:1;transition:margin-right .3s;display:flex;position:relative;overflow:hidden}.spectrogram-container{flex:1;position:relative}.time-axis{bottom:0;right:calc(-1*var(--piano-width));height:var(--time-axis-height);pointer-events:none;position:absolute;overflow:visible}.time-axis-border{height:1.5px;position:absolute;top:0;left:0;right:0}.time-axis-gap{background:#ff6464cc;width:3px;position:absolute;top:0;bottom:0}.time-label{white-space:nowrap;will-change:transform;margin-left:-24px;font:10px ui-monospace,SFMono-Regular,monospace;position:absolute;top:50%;left:0;transform:translateY(-50%)}.time-label:before{content:"";background:var(--tick-color);width:1px;height:7px;margin-bottom:2px;position:absolute;bottom:100%;left:50%;transform:translate(-50%)}.piano-keyboard{width:var(--piano-width);z-index:15;background:#111;flex-shrink:0;position:relative}.piano-key{box-sizing:border-box;cursor:pointer;position:absolute;left:0}.piano-tooltip{color:#fff;white-space:nowrap;pointer-events:none;z-index:20;background:#000000e6;border-radius:4px;margin-right:4px;padding:4px 8px;font-size:11px;font-weight:500;position:absolute;right:100%;transform:translateY(50%)}.white-key{z-index:1;background:linear-gradient(90deg,#d8d8d8,#f5f5f5);border-bottom:1px solid #aaa;width:100%}.white-key:hover{z-index:1;background:linear-gradient(90deg,#e8e8e8,#fff)}.black-key{z-index:10;background:linear-gradient(90deg,#111,#333);width:60%}.black-key:hover{z-index:10;background:linear-gradient(90deg,#222,#444)}.white-key.detected{background:linear-gradient(90deg,#93c5fd,#bfdbfe)}.black-key.detected{background:linear-gradient(90deg,#3b82f6,#60a5fa)}.black-key.detected .key-label{color:#fff}.key-label{color:#555;pointer-events:none;white-space:nowrap;-webkit-user-select:none;user-select:none;font-size:8px;font-weight:600;position:absolute;top:50%;right:3px;transform:translateY(-50%)}.pitch-line{pointer-events:none;z-index:10;background:#fff9;height:1px;position:absolute;left:0;right:0}.peak-indicator{pointer-events:none;z-index:11;align-items:center;height:2px;display:flex;position:absolute;left:0;right:0}.peak-line{flex:1;height:1px}.peak-marker{border-radius:50%;width:8px;height:8px;margin-left:-4px}.setting-group{margin-bottom:.625rem}.setting-label{color:#ccc;margin-bottom:.5rem;font-size:.875rem;display:block}.setting-value{color:#60a5fa;font-weight:500}.setting-group select,.setting-group input[type=range]{width:100%}.setting-group select{color:#fff;cursor:pointer;background:#2a2a2a;border:1px solid #444;border-radius:4px;padding:.375rem;font-size:.8125rem}.setting-group select:hover{border-color:#555}.setting-group select:focus{border-color:#2563eb;outline:none}.setting-group input[type=range]{appearance:none;cursor:pointer;background:#333;border-radius:3px;height:6px}.setting-group input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#2563eb;border-radius:50%;width:16px;height:16px;transition:background .2s}.setting-group input[type=range]::-webkit-slider-thumb:hover{background:#1d4ed8}.setting-group input[type=range]::-moz-range-thumb{cursor:pointer;background:#2563eb;border:none;border-radius:50%;width:16px;height:16px}.setting-hint{color:#666;margin-top:.25rem;font-size:.75rem;display:block}.checkbox-label{cursor:pointer;color:#ccc;align-items:center;gap:.2rem;font-size:.8125rem;display:flex;position:relative}.checkbox-label[data-tooltip]:after{white-space:normal;max-width:200px;margin:0 0 6px;top:auto;bottom:100%;left:0;transform:none}.checkbox-label input[type=checkbox]{cursor:pointer;accent-color:#2563eb;width:16px;height:16px}.settings-section{border-top:1px solid #ffffff1a;margin-top:.625rem;padding-top:.5rem}.section-toggle{color:#888;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;text-align:left;background:0 0;border:none;align-items:center;gap:.375rem;width:100%;padding:.375rem 0;font-size:11px;font-weight:500;display:flex}.section-toggle:hover{color:#bbb}.section-chevron{opacity:.6;font-size:10px;transition:transform .2s}.section-chevron.expanded{transform:rotate(90deg)}.section-content{padding-top:.5rem}.checkbox-grid{grid-template-columns:1fr 1fr;gap:.25rem .5rem;margin-bottom:.625rem;display:grid}.section-content .checkbox-label input[type=checkbox]{width:14px;height:14px}.reset-defaults-button{color:#ccc;cursor:pointer;background:#333;border:1px solid #444;border-radius:4px;margin-top:1.5rem;padding:.5rem 1rem;font-size:.875rem;transition:background .2s,color .2s}.reset-defaults-button:hover{color:#fff;background:#444}@media (max-width:768px){:root{--mobile-sidebar-width:240px}.app.panel-open .spectrogram-area{margin-right:var(--mobile-sidebar-width)}.settings-panel{height:100vh;height:100dvh;width:var(--mobile-sidebar-width);z-index:50;padding-bottom:calc(1rem + env(safe-area-inset-bottom,0px));position:fixed;top:0;right:0}.settings-panel.collapsed{width:0}.settings-content{min-width:calc(var(--mobile-sidebar-width) - 32px)}.settings-toggle,.audio-toggle{top:.75rem}.settings-toggle{right:.75rem}.settings-toggle.panel-collapsed{right:44px}.audio-toggle{left:.75rem}.audio-start-big{padding:1.5rem 2rem}.icon-mic-big{width:36px;height:36px}.start-label{font-size:1rem}.frequency-readout{padding:.5rem .75rem;top:3.5rem;left:.75rem}.frequency-readout.no-buttons{top:.75rem}.freq-value{font-size:1rem}.screenshot-button{top:.75rem;left:3.5rem}.fullscreen-button{top:.75rem;right:3.5rem}.fullscreen-button.panel-collapsed{right:5.5rem}.setting-group select{padding:.5rem;font-size:.875rem}.setting-group label,.checkbox-label{font-size:.875rem}.checkbox-grid{grid-template-columns:1fr}}.context-menu{z-index:10000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#1e1e1ef2;border:1px solid #444;border-radius:8px;min-width:220px;padding:4px 0;font-size:13px;position:fixed;box-shadow:0 4px 20px #00000080}.context-menu-item{cursor:pointer;justify-content:space-between;align-items:center;padding:8px 12px;transition:background .1s;display:flex}.context-menu-item:hover{background:#ffffff1a}.context-menu-item.disabled{opacity:.5;cursor:not-allowed}.context-menu-item.disabled:hover{background:0 0}.context-menu-item.selected{background:#2563eb33}.context-menu-shortcut{color:#888;margin-left:16px;font-size:11px}.context-menu-arrow{color:#888;font-size:10px}.context-menu-check{color:#60a5fa;margin-left:8px;font-size:12px}.context-menu-separator{background:#ffffff1a;height:1px;margin:4px 0}.context-menu-submenu{position:relative}.context-menu-submenu-panel{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#1e1e1ef2;border:1px solid #444;border-radius:8px;min-width:160px;padding:4px 0;position:absolute;top:-4px;left:calc(100% - 4px);box-shadow:0 4px 20px #00000080}.context-menu-submenu-panel.open-left{left:auto;right:calc(100% - 4px)}.context-menu-slider{padding:8px 12px}.context-menu-slider-label{color:#ccc;justify-content:space-between;margin-bottom:6px;font-size:12px;display:flex}.context-menu-slider input[type=range]{appearance:none;cursor:pointer;background:#444;border-radius:2px;width:100%;height:4px}.context-menu-slider input[type=range]::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#2563eb;border-radius:50%;width:12px;height:12px}.context-menu-slider input[type=range]::-moz-range-thumb{cursor:pointer;background:#2563eb;border:none;border-radius:50%;width:12px;height:12px}.context-menu-scale-toggle{justify-content:space-between;align-items:center;padding:8px 12px;display:flex}.context-menu-scale-label{color:#ccc;font-size:12px}.context-menu-scale-options{gap:4px;display:flex}.context-menu-scale-btn{color:#aaa;cursor:pointer;background:#333;border:1px solid #444;border-radius:4px;padding:4px 10px;font-size:11px;transition:background .1s,color .1s,border-color .1s}.context-menu-scale-btn:hover{background:#3a3a3a;border-color:#555}.context-menu-scale-btn.active{color:#fff;background:#2563eb4d;border-color:#2563eb}