:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;--primary-color: #1a252f;--secondary-color: #2563eb;--success-color: #059669;--warning-color: #d97706;--danger-color: #dc2626;--background-color: #ffffff;--surface-color: #f8fafc;--surface-elevated: #ffffff;--text-color: #1a252f;--text-secondary: #475569;--text-muted: #64748b;--border-color: #cbd5e1;--border-strong: #94a3b8;--shadow-color: rgba(15, 23, 42, .08);--shadow-strong: rgba(15, 23, 42, .16);--focus-ring: rgba(37, 99, 235, .2);--tuning-perfect: #059669;--tuning-close: #0891b2;--tuning-off: #d97706;--tuning-very-off: #dc2626;--button-primary-bg: #2563eb;--button-primary-text: #ffffff;--button-primary-hover: #1d4ed8;--button-secondary-bg: transparent;--button-secondary-text: #2563eb;--button-secondary-border: #2563eb;--button-secondary-hover-bg: #2563eb;--button-secondary-hover-text: #ffffff;--meter-bg-gradient: linear-gradient(to right, var(--danger-color) 0%, var(--warning-color) 35%, var(--success-color) 45%, var(--success-color) 55%, var(--warning-color) 65%, var(--danger-color) 100%);--meter-needle: #1a252f;--meter-center-highlight: rgba(255, 255, 255, .3);--meter-tick: rgba(255, 255, 255, .8);color:var(--text-color);background-color:var(--background-color);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}[data-theme=dark]{color-scheme:dark;--primary-color: #f1f5f9;--secondary-color: #60a5fa;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #ef4444;--background-color: #0f172a;--surface-color: #1e293b;--surface-elevated: #334155;--text-color: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #475569;--border-strong: #64748b;--shadow-color: rgba(0, 0, 0, .2);--shadow-strong: rgba(0, 0, 0, .4);--focus-ring: rgba(96, 165, 250, .3);--tuning-perfect: #10b981;--tuning-close: #06b6d4;--tuning-off: #f59e0b;--tuning-very-off: #ef4444;--button-primary-bg: #3b82f6;--button-primary-text: #ffffff;--button-primary-hover: #2563eb;--button-secondary-bg: transparent;--button-secondary-text: #60a5fa;--button-secondary-border: #60a5fa;--button-secondary-hover-bg: #60a5fa;--button-secondary-hover-text: #0f172a;--meter-bg-gradient: linear-gradient(to right, var(--danger-color) 0%, var(--warning-color) 35%, var(--success-color) 45%, var(--success-color) 55%, var(--warning-color) 65%, var(--danger-color) 100%);--meter-needle: #f1f5f9;--meter-center-highlight: rgba(255, 255, 255, .2);--meter-tick: rgba(255, 255, 255, .6)}@media (prefers-color-scheme: dark){:root:not([data-theme]){color-scheme:dark;--primary-color: #f1f5f9;--secondary-color: #60a5fa;--success-color: #10b981;--warning-color: #f59e0b;--danger-color: #ef4444;--background-color: #0f172a;--surface-color: #1e293b;--surface-elevated: #334155;--text-color: #f1f5f9;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--border-color: #475569;--border-strong: #64748b;--shadow-color: rgba(0, 0, 0, .2);--shadow-strong: rgba(0, 0, 0, .4);--focus-ring: rgba(96, 165, 250, .3);--tuning-perfect: #10b981;--tuning-close: #06b6d4;--tuning-off: #f59e0b;--tuning-very-off: #ef4444;--button-primary-bg: #3b82f6;--button-primary-text: #ffffff;--button-primary-hover: #2563eb;--button-secondary-bg: transparent;--button-secondary-text: #60a5fa;--button-secondary-border: #60a5fa;--button-secondary-hover-bg: #60a5fa;--button-secondary-hover-text: #0f172a;--meter-bg-gradient: linear-gradient(to right, var(--danger-color) 0%, var(--warning-color) 35%, var(--success-color) 45%, var(--success-color) 55%, var(--warning-color) 65%, var(--danger-color) 100%);--meter-needle: #f1f5f9;--meter-center-highlight: rgba(255, 255, 255, .2);--meter-tick: rgba(255, 255, 255, .6)}}:root{--theme-transition-duration: .3s;--theme-transition-easing: cubic-bezier(.4, 0, .2, 1);--theme-transition-delay: 0s}@media (prefers-reduced-motion: reduce){:root{--theme-transition-duration: .01s;--theme-transition-delay: 0s}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important}}*,*:before,*:after{transition:background-color var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay),border-color var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay),color var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay),box-shadow var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay),fill var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay),stroke var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay)}.theme-fallback-light{background-color:#fff!important;color:#1a252f!important}.theme-fallback-light button{background-color:#2563eb!important;color:#fff!important;border:1px solid #2563eb!important}.theme-fallback-light .tuner-container,.theme-fallback-light .meter-container,.theme-fallback-light .controls{background-color:#f8fafc!important;color:#1a252f!important;border-color:#cbd5e1!important}.theme-fallback-dark{background-color:#0f172a!important;color:#f1f5f9!important}.theme-fallback-dark button{background-color:#3b82f6!important;color:#fff!important;border:1px solid #60a5fa!important}.theme-fallback-dark .tuner-container,.theme-fallback-dark .meter-container,.theme-fallback-dark .controls{background-color:#1e293b!important;color:#f1f5f9!important;border-color:#475569!important}@media (prefers-color-scheme: dark){.theme-fallback-mode:not([data-theme=light]){background-color:#0f172a;color:#f1f5f9}.theme-fallback-mode:not([data-theme=light]) button{background-color:#3b82f6;color:#fff;border:1px solid #60a5fa}}html{overflow-y:scroll}body{transition:background-color var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay);min-height:100vh;min-height:100dvh}#app{transition:background-color var(--theme-transition-duration) var(--theme-transition-easing) var(--theme-transition-delay);position:relative}.theme-toggle-button{flex-shrink:0;transition:all var(--theme-transition-duration) var(--theme-transition-easing),transform .2s cubic-bezier(.34,1.56,.64,1)}.theme-toggle-button .theme-icon{transition:transform var(--theme-transition-duration) var(--theme-transition-easing),opacity var(--theme-transition-duration) var(--theme-transition-easing);display:inline-block}.theme-switching .theme-toggle-button .theme-icon{transform:scale(1.1) rotate(180deg)}.theme-switching *{pointer-events:none}.theme-switching{transition:opacity .1s ease}#meter-container{transition:border-color var(--theme-transition-duration) var(--theme-transition-easing),box-shadow var(--theme-transition-duration) var(--theme-transition-easing),background var(--theme-transition-duration) var(--theme-transition-easing)}#meter-needle{transition:left .3s ease,background-color var(--theme-transition-duration) var(--theme-transition-easing),box-shadow var(--theme-transition-duration) var(--theme-transition-easing),color var(--theme-transition-duration) var(--theme-transition-easing)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;display:grid;grid-template-rows:1fr;grid-template-columns:1fr}#app{display:grid;grid-template-rows:auto 1fr;grid-template-columns:1fr;max-width:800px;margin:0 auto;padding:1rem;width:100%;min-height:100vh;gap:1rem}header{margin-bottom:2rem}.header-content{display:flex;justify-content:space-between;align-items:center;gap:1rem}h1{font-size:2.5rem;margin:0;color:var(--primary-color);font-weight:600;text-align:center;flex:1}.theme-toggle-button{background:var(--surface-elevated);border:2px solid var(--border-color);border-radius:50%;width:48px;height:48px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all var(--theme-transition-duration) var(--theme-transition-easing);padding:0;min-width:unset;flex-shrink:0}.theme-toggle-button:hover:not(:disabled){background:var(--border-color);border-color:var(--border-strong);transform:translateY(-1px);box-shadow:0 2px 8px var(--shadow-color)}.theme-toggle-button:focus,.theme-toggle-button:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}.theme-toggle-button .theme-icon{font-size:1.2rem;transition:transform var(--theme-transition-duration) var(--theme-transition-easing)}.theme-toggle-button:hover .theme-icon{transform:scale(1.1)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}main{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:1fr;gap:2rem;align-content:start}#status-display{text-align:center;padding:1rem;background:var(--surface-elevated);border-radius:8px;box-shadow:0 2px 4px var(--shadow-color);border:1px solid var(--border-color);transition:background-color var(--theme-transition-duration) var(--theme-transition-easing),border-color var(--theme-transition-duration) var(--theme-transition-easing),box-shadow var(--theme-transition-duration) var(--theme-transition-easing)}#status-message{margin:0;font-size:1.1rem;color:var(--secondary-color)}#tuning-display{display:grid;grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:1.5rem;padding:2rem;background:var(--surface-elevated);border-radius:12px;box-shadow:0 4px 8px var(--shadow-color);border:1px solid var(--border-color);justify-items:center;transition:background-color var(--theme-transition-duration) var(--theme-transition-easing),border-color var(--theme-transition-duration) var(--theme-transition-easing),box-shadow var(--theme-transition-duration) var(--theme-transition-easing)}#note-display{text-align:center}#detected-note{font-size:4rem;font-weight:700;color:var(--primary-color);display:inline-block;min-width:120px}#tuning-meter{display:flex;justify-content:center;margin:2rem 0}#meter-container{position:relative;width:300px;height:60px;background:var(--meter-bg-gradient);border-radius:30px;border:3px solid var(--border-strong);transition:border-color var(--theme-transition-duration) var(--theme-transition-easing),box-shadow var(--theme-transition-duration) var(--theme-transition-easing);overflow:hidden}#meter-container:before{content:"";position:absolute;top:0;left:45%;width:10%;height:100%;background:var(--meter-center-highlight);border-radius:inherit;pointer-events:none}#meter-needle{position:absolute;top:-5px;left:50%;transform:translate(-50%);width:4px;height:70px;background:var(--meter-needle);border-radius:2px;transition:left .3s ease,background-color var(--theme-transition-duration) var(--theme-transition-easing),box-shadow var(--theme-transition-duration) var(--theme-transition-easing);z-index:10}#meter-needle:before{content:"";position:absolute;top:-3px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid currentColor}#meter-needle:after{content:"";position:absolute;bottom:-3px;left:50%;transform:translate(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:8px solid currentColor}#meter-scale{position:absolute;top:65px;width:100%;display:flex;justify-content:space-between;padding:0 10px}.scale-mark{font-size:1.2rem;font-weight:700;text-shadow:1px 1px 2px rgba(0,0,0,.1)}.scale-mark.left{color:var(--danger-color)}.scale-mark.center{color:var(--success-color);font-size:1.4rem}.scale-mark.right{color:var(--danger-color)}#meter-container:after{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:2px;height:80%;background:var(--meter-tick);border-radius:1px;pointer-events:none}#cents-display{text-align:center;font-size:1.5rem;font-weight:500}#cents-value{color:var(--secondary-color);font-weight:700}#controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1rem;justify-content:center;align-self:end}button{border-radius:8px;border:2px solid var(--button-secondary-border);padding:.8rem 2rem;font-size:1.1rem;font-weight:600;font-family:inherit;background-color:var(--button-primary-bg);color:var(--button-primary-text);cursor:pointer;transition:all var(--theme-transition-duration) var(--theme-transition-easing);min-width:120px}button:hover:not(:disabled){background-color:var(--button-secondary-hover-bg);color:var(--button-secondary-hover-text);transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow-strong)}button:disabled{opacity:.5;cursor:not-allowed;background-color:var(--surface-color);border-color:var(--border-color);color:var(--text-muted);box-shadow:none;transform:none}button:focus,button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}@media (min-width: 768px){#app{padding:2rem}.header-content{flex-direction:row;justify-content:space-between}h1{font-size:3rem;text-align:left}.theme-toggle-button{width:52px;height:52px}.theme-toggle-button .theme-icon{font-size:1.3rem}#detected-note{font-size:5rem}#meter-container{width:350px;height:70px}#meter-needle{height:80px}#tuning-display{padding:3rem}#controls{flex-direction:row;justify-content:center}button{width:auto;min-width:140px}}@media (min-width: 1024px){#app{padding:3rem;max-width:900px}h1{font-size:3.5rem}.theme-toggle-button{width:56px;height:56px}.theme-toggle-button .theme-icon{font-size:1.4rem}#detected-note{font-size:6rem}#meter-container{width:400px;height:80px}#meter-needle{height:90px}#tuning-display{padding:4rem}button{min-width:160px;padding:1rem 2.5rem;font-size:1.2rem}}@media (max-width: 767px){#app{padding:1rem}header{margin-bottom:1.5rem}.header-content{flex-direction:column;gap:1rem;position:relative}h1{font-size:2.2rem;order:1}.theme-toggle-button{position:absolute;top:0;right:0;width:40px;height:40px;order:2}.theme-toggle-button .theme-icon{font-size:1rem}main{gap:1.5rem}#detected-note{font-size:3.5rem;min-width:100px}#meter-container{width:280px;height:55px}#meter-needle{height:65px}#tuning-display{padding:1.5rem;gap:1.2rem}#cents-display{font-size:1.3rem}#controls{flex-direction:column;align-items:center;gap:.8rem}button{width:100%;max-width:250px;padding:1rem 1.5rem}}@media (max-width: 480px){#app{padding:.8rem}h1{font-size:1.8rem}.theme-toggle-button{width:36px;height:36px}.theme-toggle-button .theme-icon{font-size:.9rem}#detected-note{font-size:2.8rem}#meter-container{width:240px;height:45px}#meter-needle{height:55px}#tuning-display{padding:1.2rem}#cents-display{font-size:1.1rem}button{max-width:200px;padding:.9rem 1.2rem;font-size:1rem}}@media (max-width: 360px){#app{padding:.5rem}h1{font-size:1.6rem}.theme-toggle-button{width:32px;height:32px}.theme-toggle-button .theme-icon{font-size:.8rem}#detected-note{font-size:2.4rem}#meter-container{width:200px;height:40px}#meter-needle{height:50px}#tuning-display{padding:1rem}#cents-display{font-size:1rem}#status-display{padding:.8rem}#status-message{font-size:1rem}}@media (max-width: 767px) and (orientation: landscape){body{min-height:100vh}#app{padding:.5rem}header{margin-bottom:1rem}.header-content{flex-direction:row;justify-content:space-between}h1{font-size:1.8rem;text-align:left}.theme-toggle-button{position:static;width:36px;height:36px}main{gap:1rem}#tuning-display{padding:1rem;gap:1rem}#detected-note{font-size:2.5rem}#meter-container{width:250px;height:40px}#meter-needle{height:50px}#cents-display{font-size:1.1rem}#controls{flex-direction:row;justify-content:center;gap:1rem}button{width:auto;max-width:120px;padding:.7rem 1rem;font-size:.9rem}}@media (max-width: 767px){button{min-height:48px;touch-action:manipulation}button:focus{outline:2px solid var(--secondary-color);outline-offset:2px}#status-message{line-height:1.4}#controls{padding-bottom:1rem}}.in-tune #detected-note{color:var(--tuning-perfect);text-shadow:0 0 4px color-mix(in srgb,var(--tuning-perfect) 30%,transparent)}.sharp #detected-note,.flat #detected-note{color:var(--tuning-very-off);text-shadow:0 0 4px color-mix(in srgb,var(--tuning-very-off) 30%,transparent)}.close-to-tune #detected-note{color:var(--tuning-close);text-shadow:0 0 4px color-mix(in srgb,var(--tuning-close) 30%,transparent)}.slightly-off #detected-note{color:var(--tuning-off);text-shadow:0 0 4px color-mix(in srgb,var(--tuning-off) 30%,transparent)}.in-tune #status-message{color:var(--tuning-perfect);font-weight:600}.close-to-tune #status-message{color:var(--tuning-close);font-weight:500}.slightly-off #status-message{color:var(--tuning-off);font-weight:500}.sharp #status-message,.flat #status-message{color:var(--tuning-very-off);font-weight:500}.in-tune #cents-value{color:var(--tuning-perfect)}.close-to-tune #cents-value{color:var(--tuning-close)}.slightly-off #cents-value{color:var(--tuning-off)}.sharp #cents-value,.flat #cents-value{color:var(--tuning-very-off)}.tuning-complete{animation:tuningComplete 1s ease-in-out}@keyframes tuningComplete{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.tuning-complete #detected-note{color:var(--tuning-perfect);text-shadow:0 0 10px color-mix(in srgb,var(--tuning-perfect) 50%,transparent)}.error #status-message{color:var(--danger-color);font-weight:600}#status-message.error-message{color:var(--danger-color);font-weight:600;background:color-mix(in srgb,var(--danger-color) 10%,var(--surface-color));border:2px solid color-mix(in srgb,var(--danger-color) 30%,transparent);border-radius:8px;padding:1rem;white-space:pre-line;line-height:1.6;animation:errorPulse .5s ease-in-out}@supports not (color: color-mix(in srgb,red 50%,blue)){#status-message.error-message{background:#dc26261a;border:2px solid rgba(220,38,38,.3)}[data-theme=dark] #status-message.error-message{background:#ef44441a;border:2px solid rgba(239,68,68,.3)}.in-tune #detected-note{text-shadow:0 0 4px rgba(5,150,105,.3)}[data-theme=dark] .in-tune #detected-note{text-shadow:0 0 4px rgba(16,185,129,.3)}.sharp #detected-note,.flat #detected-note{text-shadow:0 0 4px rgba(220,38,38,.3)}[data-theme=dark] .sharp #detected-note,[data-theme=dark] .flat #detected-note{text-shadow:0 0 4px rgba(239,68,68,.3)}.close-to-tune #detected-note{text-shadow:0 0 4px rgba(8,145,178,.3)}[data-theme=dark] .close-to-tune #detected-note{text-shadow:0 0 4px rgba(6,182,212,.3)}.slightly-off #detected-note{text-shadow:0 0 4px rgba(217,119,6,.3)}[data-theme=dark] .slightly-off #detected-note{text-shadow:0 0 4px rgba(245,158,11,.3)}.tuning-complete #detected-note{text-shadow:0 0 10px rgba(5,150,105,.5)}[data-theme=dark] .tuning-complete #detected-note{text-shadow:0 0 10px rgba(16,185,129,.5)}.tuning-complete-celebration #detected-note{text-shadow:0 0 20px rgba(5,150,105,.8)}[data-theme=dark] .tuning-complete-celebration #detected-note{text-shadow:0 0 20px rgba(16,185,129,.8)}@keyframes noteGlow{0%,to{text-shadow:0 0 10px rgba(5,150,105,.5)}50%{text-shadow:0 0 30px rgba(5,150,105,1)}}@keyframes noteGlowDark{0%,to{text-shadow:0 0 10px rgba(16,185,129,.5)}50%{text-shadow:0 0 30px rgba(16,185,129,1)}}[data-theme=dark] .tuning-complete-celebration #detected-note{animation:noteGlowDark 2s ease-in-out}.tuning-complete-celebration #meter-container{box-shadow:0 0 20px #05966999}[data-theme=dark] .tuning-complete-celebration #meter-container{box-shadow:0 0 20px #10b98199}@keyframes meterGlow{0%,to{box-shadow:0 0 10px #0596694d}50%{box-shadow:0 0 30px #059669cc}}@keyframes meterGlowDark{0%,to{box-shadow:0 0 10px #10b9814d}50%{box-shadow:0 0 30px #10b981cc}}[data-theme=dark] .tuning-complete-celebration #meter-container{animation:meterGlowDark 2s ease-in-out}.in-tune #meter-container{box-shadow:0 0 10px #0596694d}[data-theme=dark] .in-tune #meter-container{box-shadow:0 0 10px #10b9814d}.close-to-tune #meter-container{box-shadow:0 0 10px #0891b24d}[data-theme=dark] .close-to-tune #meter-container{box-shadow:0 0 10px #06b6d44d}.slightly-off #meter-container{box-shadow:0 0 10px #d977064d}[data-theme=dark] .slightly-off #meter-container{box-shadow:0 0 10px #f59e0b4d}.sharp #meter-container,.flat #meter-container{box-shadow:0 0 10px #dc26264d}[data-theme=dark] .sharp #meter-container,[data-theme=dark] .flat #meter-container{box-shadow:0 0 10px #ef44444d}}@keyframes errorPulse{0%{transform:scale(1);opacity:.8}50%{transform:scale(1.02);opacity:1}to{transform:scale(1);opacity:1}}#status-message.error-message:after{content:"";display:block;margin-top:.5rem;font-size:.9em;opacity:.8}.low-volume #status-message{color:var(--warning-color);font-style:italic}.waiting #detected-note{color:var(--border-color);opacity:.7}.in-tune #meter-container{border-color:var(--tuning-perfect);box-shadow:0 0 10px color-mix(in srgb,var(--tuning-perfect) 30%,transparent)}.close-to-tune #meter-container{border-color:var(--tuning-close);box-shadow:0 0 10px color-mix(in srgb,var(--tuning-close) 30%,transparent)}.slightly-off #meter-container{border-color:var(--tuning-off);box-shadow:0 0 10px color-mix(in srgb,var(--tuning-off) 30%,transparent)}.sharp #meter-container,.flat #meter-container{border-color:var(--tuning-very-off);box-shadow:0 0 10px color-mix(in srgb,var(--tuning-very-off) 30%,transparent)}@media (max-width: 767px){body{overflow-x:hidden}#app{grid-template-rows:auto 1fr;min-height:100vh;min-height:100dvh}#tuning-display{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}#note-display{order:1}#tuning-meter{order:2}#cents-display{order:3}#meter-container{position:relative;margin:0 auto}button{-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent}button:active{transform:translateY(1px);box-shadow:0 2px 4px #0003}}@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi){#meter-needle{border-radius:1px}#meter-container:after{width:1px}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}#meter-needle{transition:none!important}.theme-toggle-button,.theme-toggle-button .theme-icon{transition:none!important;animation:none!important}.tuning-complete,.tuning-complete-celebration,#status-message.error-message{animation:none!important}button:hover:not(:disabled),.theme-toggle-button:hover{transform:none!important}.tuning-complete #detected-note,.tuning-complete-celebration #detected-note,.tuning-complete-celebration #meter-container{animation:none!important;text-shadow:none!important;box-shadow:0 2px 4px var(--shadow-color)!important}}@media (prefers-contrast: high){:root{--primary-color: #000000;--secondary-color: #0066cc;--success-color: #008000;--warning-color: #cc6600;--danger-color: #cc0000;--background-color: #ffffff;--surface-color: #ffffff;--surface-elevated: #ffffff;--text-color: #000000;--text-secondary: #333333;--text-muted: #666666;--border-color: #666666;--border-strong: #333333;--shadow-color: rgba(0, 0, 0, .3);--shadow-strong: rgba(0, 0, 0, .5);--tuning-perfect: #008000;--tuning-close: #0066cc;--tuning-off: #cc6600;--tuning-very-off: #cc0000;--meter-needle: #000000;--meter-center-highlight: rgba(0, 0, 0, .2);--meter-tick: rgba(0, 0, 0, .8)}[data-theme=dark]{--primary-color: #ffffff;--secondary-color: #66b3ff;--success-color: #00ff00;--warning-color: #ffaa00;--danger-color: #ff3333;--background-color: #000000;--surface-color: #000000;--surface-elevated: #000000;--text-color: #ffffff;--text-secondary: #cccccc;--text-muted: #999999;--border-color: #999999;--border-strong: #cccccc;--shadow-color: rgba(255, 255, 255, .3);--shadow-strong: rgba(255, 255, 255, .5);--tuning-perfect: #00ff00;--tuning-close: #66b3ff;--tuning-off: #ffaa00;--tuning-very-off: #ff3333;--meter-needle: #ffffff;--meter-center-highlight: rgba(255, 255, 255, .2);--meter-tick: rgba(255, 255, 255, .8)}#meter-container{border-width:3px}#meter-needle{width:4px}button{border-width:3px}}@media (max-width: 767px){button:focus-visible{outline:3px solid var(--focus-ring);outline-offset:3px}}@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape){#app{max-width:100%;padding:1.5rem 3rem}main{grid-template-columns:1fr;max-width:700px;margin:0 auto}}@media (min-width: 1400px){#app{max-width:1000px}#tuning-display{padding:5rem}#meter-container{width:500px;height:90px}#meter-needle{height:100px}}@media (min-width: 1024px){button:hover:not(:disabled){background-color:var(--button-secondary-hover-bg);color:var(--button-secondary-hover-text);transform:translateY(-3px);box-shadow:0 6px 12px var(--shadow-strong)}#tuning-display{grid-template-rows:auto auto auto;justify-items:center;align-items:center}#meter-container{cursor:default;transition:all .3s ease}#meter-container:hover{transform:scale(1.02);box-shadow:0 6px 16px #00000026}button{cursor:pointer;transition:all .2s ease}button:active{transform:translateY(-1px)}#controls{gap:1.5rem}#status-message{font-size:1.2rem}#detected-note{transition:all var(--theme-transition-duration) var(--theme-transition-easing)}.in-tune #detected-note{transform:scale(1.05)}}@media (min-width: 1440px){#app{max-width:1200px;padding:4rem}header{margin-bottom:3rem}h1{font-size:4rem}main{gap:3rem}#tuning-display{padding:6rem;gap:2.5rem}#detected-note{font-size:7rem}#meter-container{width:600px;height:100px}#meter-needle{height:110px;width:5px}#cents-display{font-size:2rem}button{min-width:180px;padding:1.2rem 3rem;font-size:1.3rem}}@media (min-width: 1024px){main{grid-template-rows:auto 1fr auto;align-content:center;justify-content:center}#status-display{padding:1.5rem 2rem}#meter-scale{top:85px}.scale-mark{font-size:1.4rem}.scale-mark.center{font-size:1.6rem}#controls{grid-template-columns:repeat(2,minmax(160px,auto));justify-content:center;max-width:400px;margin:0 auto}}@media (hover: hover) and (pointer: fine){button:hover:not(:disabled){background-color:var(--button-secondary-hover-bg);color:var(--button-secondary-hover-text);transform:translateY(-2px);box-shadow:0 4px 8px var(--shadow-strong)}#tuning-display:hover{box-shadow:0 6px 12px var(--shadow-color)}#status-display:hover{box-shadow:0 3px 6px var(--shadow-color)}}@media (min-width: 768px){#app,main,#tuning-display,#controls{transition:all var(--theme-transition-duration) var(--theme-transition-easing)}#controls{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));max-width:500px;margin:0 auto}}@media (min-width: 1024px){#app{contain:layout style}#meter-container{will-change:transform}#meter-needle{will-change:left,background-color}}@media print{body{background:#fff;color:#000}#controls{display:none}#tuning-display{box-shadow:none;border:2px solid black}#meter-container{background:#fff;border:2px solid black}}#meter-container{width:var(--dynamic-width, 300px);height:var(--dynamic-height, 60px)}.mobile #tuning-display{padding:1rem}.tablet #tuning-display{padding:2rem}.desktop #tuning-display{padding:3rem}.large-desktop #tuning-display{padding:4rem}.wide-screen main{max-width:80%;margin:0 auto}.wide-screen #tuning-display{max-width:800px;margin:0 auto}.portrait.mobile main{gap:1.5rem}.landscape.mobile main{gap:1rem}.landscape.mobile #tuning-display{padding:1rem;gap:.8rem}.landscape.mobile #detected-note{font-size:2.2rem}.landscape.mobile #meter-container{width:220px;height:35px}.landscape.mobile #meter-needle{height:45px}.touch-device button{min-height:48px;padding:1rem 1.5rem}.no-touch button:hover{cursor:pointer}#keyboard-hints{margin-top:1rem;text-align:center}#keyboard-hints small{color:var(--text-color);opacity:.7;font-size:.9rem}.tuning-active #meter-needle{will-change:left}.tuning-active #detected-note{will-change:color,transform}.tuning-active #cents-value{will-change:color}@media (min-width: 768px){#app.transitioning *{transition:all .3s ease}}@supports (container-type: inline-size){#tuning-display{container-type:inline-size}@container (max-width: 400px){#detected-note{font-size:2.5rem}#meter-container{width:200px;height:40px}}@container (min-width: 600px){#detected-note{font-size:5rem}#meter-container{width:400px;height:80px}}}#instructions{background:var(--surface-elevated);border:1px solid var(--border-color);border-radius:12px;padding:2rem;box-shadow:0 4px 8px var(--shadow-color);margin-top:2rem;transition:all var(--theme-transition-duration) var(--theme-transition-easing)}#instructions.hidden,.hidden{display:none}#instructions h3{margin:0 0 1rem;color:var(--primary-color);font-size:1.5rem;text-align:center}#instructions h4{margin:1.5rem 0 1rem;color:var(--secondary-color);font-size:1.2rem;text-align:center}#instructions ol{margin:0 0 1.5rem;padding-left:1.5rem;line-height:1.6}#instructions li{margin-bottom:.5rem;color:var(--text-color)}#tuning-reference{background:var(--surface-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem;margin:1rem 0}.string-reference{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--border-color);transition:border-color var(--theme-transition-duration) var(--theme-transition-easing)}.string-reference:last-child{border-bottom:none}.string-number{font-weight:600;color:var(--text-color);min-width:3rem}.string-note{font-family:Courier New,monospace;color:var(--text-secondary);font-weight:500}.string-number{font-weight:700;color:var(--primary-color);min-width:3rem}.string-note{font-family:monospace;color:var(--secondary-color);font-weight:500}#toggle-instructions{width:100%;margin-top:1rem;background-color:var(--button-secondary-bg);border-color:var(--border-strong);color:var(--text-secondary)}#toggle-instructions:hover:not(:disabled){background-color:var(--border-strong);color:var(--surface-elevated)}#show-instructions{background-color:var(--button-secondary-bg);border:2px solid var(--border-strong);color:var(--text-secondary);font-size:.9rem;padding:.5rem 1rem;margin-top:1rem}#show-instructions:hover:not(:disabled){background-color:var(--border-strong);color:var(--surface-elevated)}@media (max-width: 767px){#instructions{padding:1.5rem;margin-top:1.5rem}#instructions h3{font-size:1.3rem}#instructions h4{font-size:1.1rem}#instructions ol{padding-left:1.2rem}#instructions li{font-size:.95rem}.string-reference{padding:.4rem 0}.string-number{min-width:2.5rem;font-size:.9rem}.string-note{font-size:.9rem}}.tuning-complete-celebration{animation:celebration 2s ease-in-out}@keyframes celebration{0%,to{transform:scale(1);filter:brightness(1)}25%{transform:scale(1.05);filter:brightness(1.2)}50%{transform:scale(1.1);filter:brightness(1.4)}75%{transform:scale(1.05);filter:brightness(1.2)}}.tuning-complete-celebration #detected-note{color:var(--tuning-perfect);text-shadow:0 0 20px color-mix(in srgb,var(--tuning-perfect) 80%,transparent);animation:noteGlow 2s ease-in-out}@keyframes noteGlow{0%,to{text-shadow:0 0 10px color-mix(in srgb,var(--tuning-perfect) 50%,transparent)}50%{text-shadow:0 0 30px var(--tuning-perfect)}}.tuning-complete-celebration #meter-container{border-color:var(--tuning-perfect);box-shadow:0 0 20px color-mix(in srgb,var(--tuning-perfect) 60%,transparent);animation:meterGlow 2s ease-in-out}@keyframes meterGlow{0%,to{box-shadow:0 0 10px color-mix(in srgb,var(--tuning-perfect) 30%,transparent)}50%{box-shadow:0 0 30px color-mix(in srgb,var(--tuning-perfect) 80%,transparent)}}.waiting-state #detected-note{animation:waitingPulse 2s ease-in-out infinite}@keyframes waitingPulse{0%,to{opacity:.5}50%{opacity:.8}}.waiting-state #status-message{animation:waitingDots 1.5s ease-in-out infinite}@keyframes waitingDots{0%,20%{content:"音程を検出中"}40%{content:"音程を検出中."}60%{content:"音程を検出中.."}80%,to{content:"音程を検出中..."}}