*{margin:0;padding:0;box-sizing:border-box}html{font-size:16px}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}.app.dark{--bg-primary: #0a0a14;--bg-secondary: #12121f;--bg-tertiary: #1c1c30;--bg-card: #161628;--text-primary: #f0f0f5;--text-secondary: #9090a8;--text-muted: #5a5a72;--border-color: #2a2a44;--accent-color: #6366f1;--success-color: #22c55e;--warning-color: #eab308;--error-color: #ef4444}.app.light{--bg-primary: #f5f7fa;--bg-secondary: #ffffff;--bg-tertiary: #e8ecf0;--bg-card: #ffffff;--text-primary: #1a1a2e;--text-secondary: #5a6478;--text-muted: #8892a4;--border-color: #d0d5dd;--accent-color: #4f46e5;--success-color: #16a34a;--warning-color: #ca8a04;--error-color: #dc2626}.app{min-height:100vh;background:var(--bg-primary);color:var(--text-primary);display:flex;flex-direction:column}.app-header{background:var(--bg-secondary);padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);flex-shrink:0}.app-title{font-size:1.25rem;font-weight:700;color:var(--accent-color);letter-spacing:-.02em}.header-controls{display:flex;align-items:center;gap:.75rem}.tuning-selector{display:flex;align-items:center;gap:.4rem}.tuning-selector label{font-size:1.1rem}.tuning-selector select{background:var(--bg-tertiary);color:var(--text-primary);border:1px solid var(--border-color);border-radius:.5rem;padding:.4rem .6rem;font-size:.8rem;cursor:pointer;outline:none;transition:border-color .2s}.tuning-selector select:focus{border-color:var(--accent-color)}.theme-toggle{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:.5rem;padding:.4rem .5rem;font-size:1.1rem;cursor:pointer;transition:transform .2s;line-height:1}.theme-toggle:hover{transform:scale(1.1)}.app-main{flex:1;display:flex;flex-direction:column;align-items:center;padding:1rem 1rem 2rem;gap:1.25rem;max-width:480px;margin:0 auto;width:100%;position:relative}.error-message,.permission-message{background:#ef444414;border:1px solid rgba(239,68,68,.3);border-radius:.75rem;padding:1rem;text-align:center;width:100%}.error-message{color:var(--error-color);display:flex;align-items:center;justify-content:center;gap:.5rem;font-size:.9rem}.permission-message{color:var(--text-secondary)}.permission-hint{font-size:.8rem;color:var(--text-muted);margin-top:.25rem}.retry-btn{margin-top:.75rem;background:var(--accent-color);color:#fff;border:none;border-radius:.5rem;padding:.5rem 1.5rem;font-size:.875rem;font-weight:600;cursor:pointer;transition:opacity .2s}.retry-btn:hover{opacity:.9}.string-selector{width:100%;display:flex;flex-direction:column;align-items:center;gap:.5rem}.strings-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.5rem;width:100%}.string-btn{background:var(--bg-card);border:2px solid var(--border-color);border-radius:.85rem;padding:.6rem .2rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;cursor:pointer;transition:all .2s ease;position:relative;color:var(--text-primary)}.string-btn:hover{border-color:var(--accent-color);background:#6366f114}.string-btn.selected{background:var(--accent-color);border-color:var(--accent-color);color:#fff;transform:scale(1.05);box-shadow:0 4px 14px #6366f159}.string-btn.active-string:not(.selected){border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color)}.string-btn.confirmed{border-color:var(--success-color)}.string-btn.confirmed:not(.selected){background:#22c55e14}.string-btn .string-num{font-size:.6rem;color:var(--text-muted)}.string-btn.selected .string-num{color:#ffffffb3}.string-btn .string-note{font-size:1.4rem;font-weight:700}.string-btn.selected .string-note{color:#fff}.string-btn .check-mark{position:absolute;top:-4px;right:-4px;background:var(--success-color);color:#fff;width:16px;height:16px;border-radius:50%;font-size:.55rem;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 1px 3px #0000004d}.selected-hint{font-size:.75rem;color:var(--text-muted);text-align:center;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;justify-content:center}.auto-hint{color:var(--text-muted);opacity:.7}.auto-btn{background:none;border:1px solid var(--border-color);border-radius:.4rem;padding:.15rem .5rem;font-size:.7rem;color:var(--accent-color);cursor:pointer;transition:background .2s}.auto-btn:hover{background:#6366f11a}.tuner-display{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1.25rem;padding:1.5rem 1rem;width:100%;min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;transition:border-color .3s,box-shadow .3s}.tuner-display.tuner-perfect{border-color:var(--success-color);box-shadow:0 0 30px #22c55e26}.note-display{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.15rem;position:relative}.note-display .string-number{font-size:.75rem;color:var(--text-muted);font-weight:500}.note-display .note-letter{font-size:4.5rem;font-weight:800;line-height:1;transition:color .2s,transform .2s}.note-display .waiting-icon{font-size:3rem;opacity:.3}.note-display.waiting .note-letter{color:var(--text-muted)}.note-display .note-info{font-size:1rem;font-weight:500}.note-display.perfect .note-letter{animation:gentlePulse 1.5s ease-in-out infinite}.confirmed-badge{position:absolute;top:-4px;right:-20px;color:var(--success-color);font-size:1.5rem;font-weight:800;animation:popIn .3s ease-out}@keyframes gentlePulse{0%,to{transform:scale(1)}50%{transform:scale(1.04)}}@keyframes popIn{0%{transform:scale(0);opacity:0}70%{transform:scale(1.2)}to{transform:scale(1);opacity:1}}.status-message{font-size:.9rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;transition:color .2s}.status-message.perfect{animation:statusGlow 1.5s ease-in-out infinite}@keyframes statusGlow{0%,to{opacity:1}50%{opacity:.7}}.needle-container{width:100%;max-width:260px;display:flex;flex-direction:column;align-items:center}.needle-labels{display:flex;justify-content:space-between;width:90%;padding:0;margin-bottom:0}.needle-labels .label-flat,.needle-labels .label-sharp{font-size:1rem;font-weight:700;opacity:.5}.needle-labels .label-flat{color:#3b82f6}.needle-labels .label-center{color:var(--success-color);font-weight:700;opacity:0}.needle-labels .label-sharp{color:#ef4444}.needle-svg{width:100%;height:auto}.perfect-ring{animation:ringPulse 1.5s ease-in-out infinite}@keyframes ringPulse{0%,to{r:16;opacity:.3}50%{r:22;opacity:.6}}.cent-display{font-size:.9rem;font-weight:600;margin-top:.25rem;font-variant-numeric:tabular-nums;transition:color .2s}.cent-display.perfect{animation:statusGlow 1.5s ease-in-out infinite}.frequency-display{display:flex;flex-direction:column;align-items:center;gap:.1rem}.frequency-display .frequency{font-size:1.1rem;font-weight:600;font-variant-numeric:tabular-nums;transition:color .2s}.frequency-display .target-frequency{font-size:.75rem;color:var(--text-muted)}.volume-meter{width:100%;height:4px;background:var(--bg-tertiary);border-radius:2px;overflow:hidden}.volume-bar{height:100%;border-radius:2px;transition:width .06s linear}.tune-confirmed-overlay{position:fixed;top:0;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:100;animation:overlayFade 2s ease-out forwards}.tune-confirmed-content{display:flex;flex-direction:column;align-items:center;gap:.5rem;animation:confirmPop .4s ease-out}.tune-confirmed-check{width:64px;height:64px;border-radius:50%;background:var(--success-color);color:#fff;display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:800;box-shadow:0 0 40px #22c55e80}.tune-confirmed-text{color:var(--success-color);font-size:1.1rem;font-weight:700;text-shadow:0 1px 4px rgba(0,0,0,.3)}@keyframes overlayFade{0%,60%{opacity:1}to{opacity:0}}@keyframes confirmPop{0%{transform:scale(.5);opacity:0}70%{transform:scale(1.1)}to{transform:scale(1);opacity:1}}.all-tuned-message{background:#22c55e1a;border:1px solid var(--success-color);color:var(--success-color);border-radius:.75rem;padding:.75rem 1.5rem;font-weight:700;font-size:1rem;text-align:center;width:100%;animation:confirmPop .4s ease-out}.string-buttons{background:var(--bg-card);border:1px solid var(--border-color);border-radius:1rem;padding:.75rem;width:100%}.string-buttons h3{font-size:.8rem;color:var(--text-muted);text-align:center;margin-bottom:.5rem;font-weight:500}.buttons-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:.4rem}.string-button{background:var(--bg-tertiary);border:1px solid var(--border-color);border-radius:.6rem;padding:.5rem .15rem;display:flex;flex-direction:column;align-items:center;gap:.15rem;cursor:pointer;transition:all .2s;color:var(--text-primary)}.string-button:hover{border-color:var(--accent-color);background:#6366f114}.string-button.active{background:var(--accent-color);border-color:var(--accent-color);color:#fff;box-shadow:0 2px 8px #6366f166}.string-button .string-number{font-size:.55rem;color:var(--text-muted)}.string-button.active .string-number{color:#ffffffb3}.string-button .string-note{font-size:1.1rem;font-weight:700}.string-button.active .string-note{color:#fff}.string-button .string-freq{font-size:.5rem;color:var(--text-muted)}.string-button.active .string-freq{color:#ffffffb3}@media (min-width: 640px){.app-main{padding:1.5rem}.note-display .note-letter{font-size:6rem}.needle-container{max-width:300px}.string-button{padding:.75rem .3rem}.string-button .string-note{font-size:1.3rem}}@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}button:focus-visible,select:focus-visible{outline:2px solid var(--accent-color);outline-offset:2px}