*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-text-size-adjust:100%;height:100%;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.skip-link{z-index:1000;color:#e2e8f0;background:#1e293b;border-radius:.25rem;padding:.5rem 1rem;font-size:.875rem;text-decoration:none;position:absolute;top:-100%;left:1rem}.skip-link:focus{top:.5rem}body{color:#e2e8f0;background:#0f172a;height:100%}#app{overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;width:100%;height:100%;padding-bottom:env(safe-area-inset-bottom);flex-direction:column;display:flex;overflow-y:auto}.app-header{border-bottom:1px solid #e2e8f01a;justify-content:flex-start;align-items:center;padding:.75rem 1rem;display:flex}.app-header h1{letter-spacing:.02em;color:#e2e8f0;font-size:1.25rem;font-weight:500}[data-platform=ios] .app-header{justify-content:center}[data-platform=ios] .app-header h1{letter-spacing:.04em;font-size:1.0625rem;font-weight:600}[data-platform=desktop] .app-header{justify-content:center}.tuner-main{flex-direction:column;flex:auto;justify-content:center;align-items:center;gap:1rem;padding:1rem;display:flex}.gauge-container{justify-content:center;align-items:center;width:100%;max-width:320px;display:flex}.note-display{text-align:center;justify-content:center;align-items:center;width:100%;display:flex}.tuner-controls{padding:1rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom));background:#0f172a;border-top:1px solid #e2e8f01a;flex-direction:column;gap:.75rem;min-height:120px;display:flex}.string-selector{flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;display:flex}.action-buttons{justify-content:center;align-items:center;gap:.75rem;display:flex}.string-selector button,.action-buttons button{cursor:pointer;min-width:44px;min-height:44px}@media (width>=768px){#app{max-width:600px;margin:0 auto}.gauge-container{max-width:400px}}@media (width>=1024px){#app{max-width:800px;padding-left:2rem;padding-right:2rem}.app-header{padding:1rem 2rem}.tuner-main{padding:2rem}.tuner-controls{padding:1.5rem 2rem;padding-bottom:calc(1.5rem + env(safe-area-inset-bottom))}}.pickers{flex-wrap:wrap;justify-content:center;gap:.5rem;width:100%;margin-bottom:.25rem;display:flex}.picker-select{appearance:none;color:#e2e8f0;cursor:pointer;background:#1e293b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%23a3a3a3' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .75rem center no-repeat;border:1px solid #e2e8f026;border-radius:8px;flex:140px;max-width:200px;min-height:44px;padding:.5rem 2rem .5rem .75rem;font-family:inherit;font-size:.875rem;transition:border-color .15s ease-out}.picker-select:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 2px #3b82f640}.string-buttons{flex-wrap:wrap;justify-content:center;align-items:center;gap:.375rem;width:100%;display:flex}.string-btn{color:#e2e8f0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#1e293b;border:2px solid #e2e8f026;border-radius:10px;justify-content:center;align-items:center;min-width:52px;min-height:52px;padding:.5rem .75rem;font-family:inherit;font-size:1rem;font-weight:600;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform 80ms ease-out;display:inline-flex;position:relative}.string-btn-label{pointer-events:none}.string-btn-dot{pointer-events:none;background:0 0;border-radius:50%;width:6px;height:6px;transition:background .15s ease-out;position:absolute;top:6px;right:6px}.string-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f680}.string-btn:hover{background:#283548;border-color:#e2e8f040}.string-btn:active{transform:scale(.97)}.string-btn.detected{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b66}.string-btn.selected{color:#fff;background:#0f766e;border-color:#14b8a6}.string-btn.selected.detected{border-color:#f59e0b;box-shadow:0 0 0 1px #f59e0b8c}.string-btn.playing{animation:1.4s ease-in-out infinite string-btn-pulse}.string-btn.in-tune .string-btn-dot{background:#2dd4bf;box-shadow:0 0 6px #2dd4bfb3}@keyframes string-btn-pulse{0%,to{box-shadow:0 0 #2dd4bf8c}50%{box-shadow:0 0 0 8px #2dd4bf00}}@media (prefers-reduced-motion:reduce){.string-btn.playing{animation:none;box-shadow:0 0 0 3px #2dd4bf8c}}.any-note-btn{color:#a3a3a3;letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:0 0;border:2px dashed #e2e8f040;border-radius:10px;justify-content:center;align-items:center;min-height:52px;margin-left:.25rem;padding:.5rem .875rem;font-family:inherit;font-size:.875rem;font-style:italic;font-weight:600;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out,box-shadow .15s ease-out,transform 80ms ease-out;display:inline-flex}.any-note-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f680}.any-note-btn:hover{color:#e2e8f0;background:#e2e8f00a;border-color:#e2e8f066}.any-note-btn:active{transform:scale(.97)}.any-note-btn.selected{color:#fff;background:#0f766e;border-style:solid;border-color:#14b8a6;font-style:normal}@media (width>=768px){.any-note-btn{min-height:60px;font-size:.9375rem}}@media (width<=374px){.string-btn{min-width:44px;min-height:44px;padding:.375rem .5rem;font-size:.875rem}.picker-select{padding:.375rem 1.75rem .375rem .5rem;font-size:.8125rem}}.app-header{position:relative}.menu-toggle{color:#a3a3a3;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:44px;height:44px;padding:0;transition:color .15s ease-out,background .15s ease-out;display:inline-flex;position:absolute;right:1rem}.menu-toggle:hover{color:#e2e8f0;background:#e2e8f014}.menu-toggle:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f680}.menu-toggle.active{color:#e2e8f0;background:#e2e8f01a}.menu-toggle svg{width:20px;height:20px}.menu-dropdown{z-index:100;opacity:0;transform-origin:100% 0;pointer-events:none;background:#1e293b;border:1px solid #e2e8f01f;border-radius:8px;min-width:260px;max-width:320px;transition:opacity .15s ease-out,transform .15s ease-out;position:absolute;top:100%;right:.5rem;transform:scale(.95);box-shadow:0 8px 24px #0006,0 2px 8px #0003}.menu-dropdown[hidden]{visibility:hidden;display:block}.menu-dropdown--open{opacity:1;pointer-events:auto;transform:scale(1)}[data-platform=ios] .menu-dropdown{border-radius:12px}[data-platform=desktop] .menu-toggle{left:1rem;right:auto}[data-platform=desktop] .menu-dropdown{transform-origin:0 0;left:.5rem;right:auto}.menu-section{padding:.75rem 1rem}.menu-section+.menu-section{border-top:1px solid #e2e8f014}.menu-section-header{text-transform:uppercase;letter-spacing:.05em;color:#a3a3a3;margin-bottom:.625rem;font-size:.75rem;font-weight:600}.menu-pitch-controls{flex-direction:column;align-items:center;gap:.625rem;display:flex}.menu-divider{background:#e2e8f014;height:1px}.menu-item{color:#e2e8f0;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;align-items:center;width:100%;min-height:44px;padding:.5rem 1rem;font-family:inherit;font-size:.875rem;font-weight:500;transition:background .15s ease-out;display:flex}a.menu-item{color:inherit;text-decoration:none}.menu-build-version{color:#94a3b8;padding:.25rem .75rem;font-size:.75rem}.settings-a4-label{color:#e2e8f0;align-items:center;gap:.25rem;font-size:.875rem;font-weight:600;display:flex}.settings-a4-input{color:#e2e8f0;text-align:center;-moz-appearance:textfield;background:#1e293b;border:1px solid #e2e8f026;border-radius:6px;width:3.5rem;padding:.25rem .375rem;font-family:inherit;font-size:.875rem;font-weight:600}.settings-a4-input::-webkit-inner-spin-button{opacity:1}.settings-a4-input::-webkit-outer-spin-button{opacity:1}.settings-a4-input:focus{border-color:#3b82f6;outline:none;box-shadow:0 0 0 2px #3b82f640}.settings-hz{color:#a3a3a3;font-size:.8125rem}.settings-a4-slider{appearance:none;cursor:pointer;background:#334155;border-radius:2px;outline:none;width:100%;max-width:240px;height:4px}.settings-a4-slider::-webkit-slider-thumb{-webkit-appearance:none;cursor:pointer;background:#3b82f6;border:2px solid #1e293b;border-radius:50%;width:18px;height:18px;transition:box-shadow .15s ease-out}.settings-a4-slider::-moz-range-thumb{cursor:pointer;background:#3b82f6;border:2px solid #1e293b;border-radius:50%;width:18px;height:18px}.settings-a4-slider:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #3b82f666}.settings-presets{gap:.375rem;display:flex}.settings-preset-btn{color:#a3a3a3;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#1e293b;border:1px solid #e2e8f026;border-radius:6px;min-height:30px;padding:.25rem .625rem;font-family:inherit;font-size:.75rem;font-weight:600;transition:background .15s ease-out,border-color .15s ease-out,color .15s ease-out}.settings-preset-btn:hover{color:#e2e8f0;background:#283548}.settings-preset-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f680}.settings-preset-btn.active{color:#fff;background:#1d4ed8;border-color:#3b82f6}.menu-divider{background:#e2e8f01a;height:1px;margin:.25rem 0}.menu-item{color:#e2e8f0;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;border:none;align-items:center;width:100%;min-height:48px;padding:.625rem 1rem;font-family:inherit;font-size:.9375rem;font-weight:500;transition:background .15s ease-out;display:flex}.menu-item:hover{background:#e2e8f014}.menu-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px #3b82f680}.menu-item:active{background:#e2e8f01f}@media (width>=768px){.string-buttons{gap:.5rem}.string-btn{min-width:60px;min-height:60px;font-size:1.0625rem}}.action-buttons{flex-direction:column;align-items:center;gap:.75rem;width:100%;margin-top:.5rem;display:flex}.pf-start-btn{color:#fff;letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#2563eb;border:none;border-radius:12px;justify-content:center;align-items:center;min-width:180px;min-height:52px;padding:.75rem 2rem;font-family:inherit;font-size:1.125rem;font-weight:700;transition:background .15s ease-out,transform .1s ease-out,box-shadow .15s ease-out;display:inline-flex;box-shadow:0 2px 12px #2563eb59}.pf-start-btn:hover{background:#1d4ed8;box-shadow:0 4px 18px #2563eb73}.pf-start-btn:active{background:#1e40af;transform:scale(.97)}.pf-start-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #3b82f680}.pf-stop-btn{color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#dc2626;border:none;border-radius:10px;justify-content:center;align-items:center;min-width:100px;min-height:44px;padding:.5rem 1.5rem;font-family:inherit;font-size:.9375rem;font-weight:600;transition:background .15s ease-out,transform .1s ease-out,box-shadow .15s ease-out;display:inline-flex;box-shadow:0 2px 8px #dc26264d}.pf-stop-btn:hover{background:#b91c1c}.pf-stop-btn:active{background:#991b1b;transform:scale(.97)}.pf-stop-btn:focus-visible{outline:none;box-shadow:0 0 0 3px #ef444480}.pf-status{text-align:center;color:#e2e8f0;margin:0;font-size:.9375rem;line-height:1.5}.pf-status--requesting{color:#94a3b8;animation:1.2s ease-in-out infinite pf-pulse}.pf-status--error{color:#fca5a5}.pf-message{text-align:center;flex-direction:column;align-items:center;gap:.75rem;max-width:320px;display:flex}.pf-retry-btn{color:#e2e8f0;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;background:#1e293b;border:1px solid #e2e8f033;border-radius:8px;justify-content:center;align-items:center;min-width:80px;min-height:44px;padding:.5rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:background .15s ease-out,border-color .15s ease-out;display:inline-flex}.pf-retry-btn:hover{background:#283548;border-color:#e2e8f04d}.pf-retry-btn:focus-visible{outline:none;box-shadow:0 0 0 2px #3b82f680}@keyframes pf-pulse{0%,to{opacity:1}50%{opacity:.5}}.gauge-wrapper{flex-direction:column;align-items:center;width:100%;max-width:420px;padding:.5rem 0;display:flex}.gauge-svg{width:100%;height:auto;display:block}.gauge-needle{transform-origin:200px 180px;transition:transform .15s ease-out}.gauge-arrow{transition:fill .15s ease-out,font-size .15s ease-out}.gauge-in-tune .gauge-svg{filter:drop-shadow(0 0 12px #2dd4bf4d)}.gauge-readout{text-align:center;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:.25rem .5rem;width:100%;margin-top:.25rem;display:flex}.gauge-target{color:#94a3b8;letter-spacing:.02em;opacity:0;width:100%;min-height:1.1em;font-size:.875rem;font-weight:600;transition:opacity .2s ease-out}.gauge-target.visible{opacity:1}.gauge-note-name{color:#f5f5f5;letter-spacing:-.02em;font-size:2.5rem;font-weight:700;line-height:1}.gauge-octave{color:#a3a3a3;margin-right:.25rem;font-size:1.25rem;font-weight:500}.gauge-direction-arrow{font-size:1.5rem;font-weight:700;line-height:1;transition:color .15s ease-out}.gauge-frequency{color:#a3a3a3;font-variant-numeric:tabular-nums;width:100%;font-size:.875rem}.gauge-cents{color:#a3a3a3;font-variant-numeric:tabular-nums;font-size:.875rem}.gauge-in-tune .gauge-note-name{color:#2dd4bf;transition:color .2s ease-out}
