.tool-panel.tuner-panel{max-width:none}
.tuner-panel{--tuner-teal:#26e0d0;--tuner-border:#284b61}
.tuner-actions{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 10px}
.tuner-panel button{min-height:44px}
.tuner-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;scroll-margin-top:8px}
.tuner-display,.tuner-settings{min-width:0;border:1px solid var(--tuner-border);border-radius:18px;background:radial-gradient(ellipse at 50% 0,#1b3545 0,#0b1b2a 45%,#07121f 100%);color:#e8f2fb}
.tuner-display{padding:12px;text-align:center;box-shadow:inset 0 1px 0 #76c8df33}
.tuner-specs{display:flex;justify-content:space-between;gap:10px;text-align:left;font-size:12px;font-weight:700}
.tuner-specs>span{padding:8px 10px;border:1px solid var(--tuner-border);border-radius:12px;background:#071421}
.tuner-specs small{display:block;margin-top:3px;color:#b7cddd;font-size:10px;font-weight:400;letter-spacing:2px}
.tuner-specs>span:last-child{text-align:right}
.tuner-gauge{display:block;width:100%;height:auto;margin:6px auto 0;max-width:1000px}
.tuner-gauge text{fill:#c1d8e9;font:14px sans-serif}
.tuner-tick{stroke:#9eb7c4;stroke-width:1}
.tuner-tick.major{stroke:#d6e5ed;stroke-width:2}
.tuner-zone{fill:none;stroke-width:5}
.tuner-zone.red{stroke:#ed6b72}.tuner-zone.amber{stroke:#f8d779}.tuner-zone.green{stroke:var(--tuner-teal)}
.tuner-center{stroke:#c4fff2;stroke-width:3}
#tunerNeedle{fill:var(--tuner-teal);transition:transform .12s linear}
.tuner-digital{display:flex;justify-content:center;align-items:center;gap:24px;margin:0 auto 12px;max-width:350px;border:1px solid #288c91;border-radius:18px;padding:10px;background:linear-gradient(#071420,#0b2836);box-shadow:inset 0 0 0 3px #071421,0 0 12px #13b9b51a}
.tuner-note{font-size:54px;font-weight:800;line-height:1.1;letter-spacing:-2px;color:#f3faff}
.tuner-note sub{font-size:.4em;letter-spacing:0;vertical-align:baseline;color:#bcd3e9}
.tuner-cents{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums;color:#d8e9f2}
.tuner-target{font-size:13px;color:#b7cddd;margin:6px 0}
.tuner-readout{min-height:20px;font-size:13px;color:#b7cddd;margin:6px 0}
.tuner-state{min-height:24px;font-size:16px;font-weight:700;margin:8px 0}
.tuner-display[data-state="tuned"] .tuner-note,.tuner-display[data-state="tuned"] .tuner-cents,.tuner-display[data-state="tuned"] .tuner-state{color:var(--tuner-teal)}
.tuner-display[data-stale="true"] .tuner-digital{opacity:.4}
.tuner-notice{font-size:12px;line-height:1.5;color:var(--muted)}
#tunerWarning:empty{display:none}
.tuner-mobile-stop{display:inline-flex;margin:4px 0}
.tuner-settings{padding:16px;text-align:center}
.tuner-settings h3{margin:0;font-size:19px}
.tuner-settings .tuner-notice{color:#b7cddd;margin:6px 0}
.tuner-guitar{display:block;width:100%;max-width:300px;height:330px;margin:auto}
.tuner-guitar [data-guitar-string]{stroke:#e1cba0;pointer-events:none}
.tuner-guitar [data-guitar-string].detected{stroke:var(--tuner-teal);stroke-width:4}
.tuner-guitar text{fill:#eaf5ff;font:13px sans-serif}
.tuner-guitar .tuner-peg-number{fill:#101d29;font-weight:800}
.tuner-guitar [data-tuner-peg]{cursor:pointer}
.tuner-guitar [data-tuner-peg][aria-pressed="true"] rect,.tuner-guitar [data-tuner-peg]:focus rect{stroke:var(--tuner-teal);stroke-width:3}
.tuner-string-hint{font-size:13px;color:var(--tuner-teal);margin:4px 0}
.tuner-mode-controls{display:flex;flex-wrap:wrap;gap:12px;align-items:start;padding:14px 0}
#tunerAuto[aria-pressed="true"]{border:1px solid var(--tuner-teal);border-radius:10px;color:var(--tuner-teal)}
.tuner-manual{flex:1 1 240px}
.tuner-manual summary{min-height:44px;padding:12px 8px;cursor:pointer;box-sizing:border-box;font-size:14px}
.tuner-strings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 0}
.tuner-strings button{display:grid;gap:4px;border:1px solid var(--line);border-radius:10px;padding:10px 6px;background:var(--surface-2);color:var(--text);font:inherit}
.tuner-strings small{font-size:11px;color:var(--muted)}
.tuner-strings button[aria-pressed="true"]{border-color:var(--tuner-teal)}
.tuner-panel button:focus-visible,.tuner-panel [role="button"]:focus-visible{outline:3px solid var(--tuner-teal);outline-offset:3px}
@media(min-width:760px){.tuner-layout{grid-template-columns:minmax(0,2.5fr) minmax(240px,1fr);align-items:stretch;gap:18px}.tuner-display{padding:18px}.tuner-specs{font-size:15px}.tuner-specs small{font-size:12px}.tuner-note{font-size:72px}.tuner-cents{font-size:27px}.tuner-state{font-size:19px}.tuner-guitar{height:360px;max-width:100%}.tuner-mobile-stop{display:none}}
@media(min-width:1400px){.tuner-guitar{height:430px}.tuner-display{padding:22px}.tuner-digital{margin-top:-6px}}
@media(prefers-reduced-motion:reduce){#tunerNeedle{transition:none}}

@media(min-width:760px){.tuner-gauge{max-height:300px}.tuner-digital{padding:6px}.tuner-note{font-size:60px}.tuner-guitar{height:340px}}

.tuner-actions{align-items:center}
.tuner-signal{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);margin-left:0}
.tuner-signal i{display:block;width:12px;height:12px;border-radius:50%;background:#243641;border:1px solid #67808b;box-shadow:inset 0 2px 3px #0008}
.tuner-signal[data-on="true"] i{background:#26e0d0;border-color:#b7fff6;box-shadow:0 0 7px #26e0d066,inset 0 1px 2px #fff9}
.tuner-footer{display:flex;flex-wrap:wrap;align-items:start;gap:10px;justify-content:space-between}
.tuner-help{flex:1 1 180px}
.tuner-help summary{cursor:pointer;min-height:44px;box-sizing:border-box;padding:12px 0;font-size:13px;color:var(--muted)}
@media(min-width:760px){
 .tool-panel.tuner-panel{padding:12px}
 .tuner-display{position:relative;padding:10px 14px}
 .tuner-specs{position:absolute;top:10px;left:12px;right:12px;pointer-events:none;font-size:12px}
 .tuner-specs>span{padding:6px 8px}
 .tuner-specs small{font-size:10px}
 .tuner-gauge{margin:8px auto 0;max-height:clamp(150px,24vh,240px)}
 .tuner-digital{margin:0 auto 4px;padding:4px;max-width:300px}
 .tuner-note{font-size:44px}.tuner-cents{font-size:21px}
 .tuner-target,.tuner-readout{margin:3px 0;font-size:12px}
 .tuner-state{margin:4px 0;min-height:22px;font-size:16px}
 .tuner-settings{padding:10px}.tuner-settings h3{font-size:17px}
 .tuner-settings .tuner-notice{margin:3px 0}
 .tuner-guitar{height:280px;max-width:300px}
 .tuner-string-hint{font-size:12px;margin:0}
 .tuner-mode-controls{padding:8px 0;gap:8px}
}