:root{--bg-color: #051105;--bg-gradient: radial-gradient(circle at center, #0a1a0a 0%, #051105 100%);--accent-color: #13ec13;--text-main: #ffffff;--text-main-inverted: #000;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--glow: rgba(19, 236, 19, .4)}.theme-dark{--bg-color: #0a0a0a;--bg-gradient: radial-gradient(circle at center, #1a1a1a 0%, #0a0a0a 100%);--accent-color: #ffffff;--text-main: #ffffff;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--glow: rgba(255, 255, 255, .3)}.theme-green{--bg-color: #051105;--bg-gradient: radial-gradient(circle at center, #0a1a0a 0%, #051105 100%);--accent-color: #13ec13;--text-main: #ffffff;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--glow: rgba(19, 236, 19, .4)}.theme-white{--bg-color: #f5f5f7;--bg-gradient: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);--accent-color: #1d1d1f;--text-main: #1d1d1f;--text-main-inverted: #fff;--text-dim: rgba(0, 0, 0, .4);--border-color: rgba(0, 0, 0, .1);--surface: rgba(0, 0, 0, .03);--glow: rgba(0, 0, 0, .2)}.theme-white-blue{--bg-color: #f5f5f7;--bg-gradient: linear-gradient(180deg, #ffffff 0%, #f5f5f7 100%);--accent-color: #007aff;--text-main: #1d1d1f;--text-main-inverted: #fff;--text-dim: rgba(0, 0, 0, .4);--border-color: rgba(0, 0, 0, .1);--surface: rgba(0, 0, 0, .03);--glow: rgba(0, 122, 255, .3)}.theme-gold{--bg-color: #0c0b05;--bg-gradient: radial-gradient(circle at center, #1a180a 0%, #0c0b05 100%);--accent-color: #ffd700;--text-main: #ffffff;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--glow: rgba(255, 215, 0, .5)}.theme-purple{--bg-color: #0f0514;--bg-gradient: radial-gradient(circle at center, #1a0a24 0%, #0f0514 100%);--accent-color: #d400ff;--text-main: #ffffff;--text-dim: rgba(255, 255, 255, .4);--border-color: rgba(255, 255, 255, .1);--surface: rgba(255, 255, 255, .05);--glow: rgba(212, 0, 255, .5)}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none;transition:background-color .3s,color .3s,border-color .3s,transform .2s}body{font-family:Space Grotesk,sans-serif}#chromatic-tuner-wrapper{--max-width: 420px;width:100%;font-size:4.4444444444444444vw;min-height:100dvh;display:flex;flex-direction:column;justify-content:center;background:var(--bg-gradient);background-color:var(--bg-color);color:var(--text-main)}.top-bar{display:flex;justify-content:space-between;padding:calc(24em / 19);position:relative;z-index:100;width:100%;max-width:var(--max-width);margin:0 auto}.power-toggle,.theme-toggle{background:var(--surface);border:1px solid var(--border-color);padding:calc(9.6em / 14);border-radius:50%;color:var(--text-dim);font-size:calc(14em / 19);font-weight:700;text-transform:uppercase;letter-spacing:.15em;cursor:pointer;display:flex;align-items:center;justify-content:center;width:calc(45em / 14);height:calc(45em / 14)}.power-toggle{border:2px solid var(--accent-color);color:var(--accent-color);box-shadow:0 0 15px var(--glow),inset 0 0 10px #ffffff0d;animation:power-pulse 2s ease-in-out infinite}@keyframes power-pulse{0%,to{box-shadow:0 0 15px var(--glow)}50%{box-shadow:0 0 25px var(--glow),0 0 35px var(--glow)}}.power-toggle:hover,.theme-toggle:hover{color:var(--text-main);border-color:var(--accent-color)}.power-toggle.active{background:var(--accent-color);border-color:var(--accent-color);color:var(--text-main-inverted);box-shadow:0 0 20px var(--glow);animation:none}.power-wrapper{display:flex;align-items:center;gap:calc(15em / 19)}.power-tooltip{background:var(--surface);border:1px solid var(--text-main);padding:calc(6.4em / 11.2) calc(12.8em / 11.2);border-radius:calc(19em / 11.2);color:var(--text-main);font-size:calc(11.2em / 19);font-weight:600;letter-spacing:.05em;white-space:nowrap;position:relative}.power-tooltip:before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:calc(5em / 11.2) solid transparent;border-right-color:var(--text-main)}.power-toggle.active+.power-tooltip{border-color:var(--border-color);color:var(--text-dim)}.power-toggle.active+.power-tooltip:before{border-right-color:var(--border-color)}.theme-popup{position:absolute;top:calc(60em / 19);right:0;background:#fff;padding:calc(10em / 19);border-radius:3em;display:none;gap:calc(15em / 19);box-shadow:0 calc(15em / 19) calc(40em / 19) #0006;animation:slideDown .2s ease-out}.theme-popup.active{display:flex}@keyframes slideDown{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.theme-opt{width:calc(42em / 19);height:calc(42em / 19);border-radius:50%;cursor:pointer;border:calc(2em / 19) solid #e0e0e0}.theme-opt:hover{transform:scale(1.15)}.theme-opt.active{border-color:#000}.top-bar-right{display:flex;align-items:center;gap:calc(12em / 19);position:relative}.a4-toggle{background:var(--surface);border:1px solid var(--border-color);padding:calc(6em / 14) calc(12em / 14);border-radius:calc(20em / 14);color:var(--text-dim);font-size:calc(12em / 19);font-weight:600;cursor:pointer;display:flex;align-items:center;gap:calc(4em / 14);font-family:inherit}.a4-toggle:hover{color:var(--text-main);border-color:var(--accent-color)}.a4-label{opacity:.6}.a4-value{color:var(--accent-color);font-weight:700}.a4-popup{position:absolute;top:calc(50em / 19);right:calc(55em / 19);background:#fff;padding:calc(8em / 19);border-radius:calc(12em / 19);display:none;flex-direction:column;gap:calc(4em / 19);box-shadow:0 calc(15em / 19) calc(40em / 19) #0006;animation:slideDown .2s ease-out;min-width:calc(70em / 19)}.a4-popup.active{display:flex}.a4-opt{padding:calc(8em / 19) calc(16em / 19);font-size:calc(14em / 19);font-weight:600;color:#333;text-align:center;cursor:pointer;border-radius:calc(8em / 19);font-family:inherit}.a4-opt:hover{background:#f0f0f0}.a4-opt.active{background:var(--accent-color);color:#000}.gauge-section{width:100%;max-width:calc(420em / 19);margin:1em auto;padding:0 calc(28em / 19)}.gauge-box{position:relative;height:calc(70em / 19);background:var(--surface);border:1px solid var(--border-color);border-radius:1em;overflow:hidden;margin-bottom:calc(15em / 19)}.gauge-scale{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;justify-content:space-between;align-items:center;padding:0 calc(28em / 19)}.tick{width:calc(1.5em / 19);height:calc(24em / 19);background:var(--text-dim);opacity:.15}.tick.center{height:calc(44em / 19);background:var(--accent-color);opacity:.6;width:calc(2.5em / 19)}#needle{position:absolute;top:50%;left:50%;width:calc(5em / 19);height:calc(48em / 19);background:var(--accent-color);border-radius:calc(4em / 19);transform:translate(-50%,-50%);box-shadow:0 0 calc(20em / 19) var(--accent-color);transition:left .12s cubic-bezier(.1,.8,.2,1);z-index:5}.labels{display:flex;justify-content:space-between;font-size:calc(12em / 19);font-weight:700;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}#status-text{color:var(--accent-color);font-weight:800;text-shadow:0 0 12px var(--glow);letter-spacing:.15em}#chromatic-tuner-wrapper main{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(10em / 19);margin:1em 0}#note-text{font-size:calc(208em / 19);font-weight:700;line-height:1;margin-bottom:calc(8em / 208)}#note-text .sharp{font-size:55%;font-weight:500;vertical-align:super;margin-left:-.1em}.note-info{text-align:center}#string-title{color:var(--accent-color);font-size:calc(24em / 19);font-weight:900;letter-spacing:.35em;text-transform:uppercase;display:block;margin-bottom:calc(10em / 19);transition:opacity .3s}#hz-text{font-size:calc(35em / 19);color:var(--text-dim);font-weight:300;letter-spacing:.05em}.string-grid{font-size:calc(17em / 19);display:flex;gap:1em;margin-top:calc(48em / 19);transition:opacity .3s}.string-box{width:calc(56em / 19);height:calc(56em / 19);background:var(--surface);border:1px solid var(--border-color);border-radius:calc(15em / 19);display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.string-num{position:absolute;top:calc(-28em / 19);font-size:calc(13em / 19);color:var(--text-dim);font-weight:800}.string-note{font-weight:800;font-size:calc(18em / 19)}.string-box.active{background:var(--accent-color);border-color:var(--accent-color);color:#000;box-shadow:0 0 calc(30em / 19) var(--accent-color);transform:translateY(calc(-4em / 19))}.string-box.active .string-num{color:var(--accent-color);font-size:calc(17em / 19);top:calc(-34em / 19)}#chromatic-tuner-wrapper footer{flex:1;display:flex;justify-content:center;align-items:flex-end;width:100%}.mode-list{display:flex;justify-content:center;gap:1.6em;list-style:none;padding:0 0 1.6em}.mode-item{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center}.mode-btn{background:none;border:none;font-family:inherit;font-size:calc(13em / 19);font-weight:800;text-transform:uppercase;color:var(--text-dim);letter-spacing:.15em;cursor:pointer;transition:color .2s}.mode-item.active .mode-btn{color:var(--text-main)}.mode-item:not(.active) .mode-btn:hover{color:#ffffffb3}.indicator{margin-top:calc(15em / 19);width:calc(48em / 19);height:calc(4em / 19);background:var(--accent-color);border-radius:calc(4em / 19);box-shadow:0 0 calc(15em / 19) var(--accent-color);opacity:0;transition:opacity .3s,transform .3s}.mode-item.active .indicator{opacity:1}.hidden{display:none!important}.invisible{opacity:0!important;pointer-events:none}#chromatic-tuner-wrapper.tuner-off .gauge-section,#chromatic-tuner-wrapper.tuner-off main,#chromatic-tuner-wrapper.tuner-off footer{opacity:.3;pointer-events:none}#chromatic-tuner-wrapper.tuner-off #status-text,#chromatic-tuner-wrapper.tuner-off .indicator,#chromatic-tuner-wrapper.tuner-off .string-box.active{box-shadow:none}#chromatic-tuner-wrapper.tuner-off .indicator{background:var(--text-dim)}#chromatic-tuner-wrapper.tuner-off #status-text{color:var(--text-dim);text-shadow:none}@media (min-width: 420px){#chromatic-tuner-wrapper{font-size:19px}#chromatic-tuner-wrapper footer{margin-top:3em;flex:none}}@media (max-aspect-ratio: 10/18){.gauge-section{margin:1.5em auto}#chromatic-tuner-wrapper main{margin:2em 0}}@media (max-aspect-ratio: 1/2){.gauge-section{margin:2em auto}#chromatic-tuner-wrapper main{margin:3em 0}}@media (max-aspect-ratio: 1/2.3){#chromatic-tuner-wrapper footer{margin-top:3em;flex:none}}