.guitar-tuner-container{max-width:900px;margin:0 auto;padding:0 16px 48px}.tuner-gauge-wrapper{display:flex;justify-content:center;align-items:center;padding:16px 0}.tuner-gauge{position:relative;width:320px;height:200px;overflow:hidden}.tuner-gauge.active .gauge-scale .gauge-tick.center .tick-line{background:#52c41a;box-shadow:0 0 8px #52c41a66}.gauge-scale{position:absolute;width:100%;height:100%;top:0;left:0}.gauge-tick{position:absolute;top:0;left:50%;width:2px;height:100%;transform-origin:50% 90%;display:flex;flex-direction:column;align-items:center}.gauge-tick .tick-line{width:2px;height:16px;background:#d9d9d9;border-radius:1px;transition:background .2s,box-shadow .2s}.gauge-tick.center .tick-line{width:3px;height:24px;background:#8c8c8c}.gauge-tick.active .tick-line{background:#1890ff;box-shadow:0 0 6px #1890ff66}.gauge-tick .tick-label{font-size:10px;color:#8c8c8c;margin-top:4px;white-space:nowrap;user-select:none}.gauge-tick.center .tick-label{font-size:12px;font-weight:600;color:#595959}.gauge-needle{position:absolute;bottom:10%;left:calc(50% - 2px);width:4px;height:120px;border-radius:2px;transform-origin:50% 100%;z-index:10}.gauge-needle:after{content:"";position:absolute;bottom:-6px;left:50%;transform:translate(-50%);width:14px;height:14px;border-radius:50%;background:inherit;box-shadow:0 2px 8px #00000026}.gauge-center{position:absolute;bottom:8px;left:50%;transform:translate(-50%);text-align:center;z-index:5;min-width:140px}.gauge-center .detected-note{font-size:42px;font-weight:700;line-height:1;transition:color .15s}.gauge-center .detected-cents{font-size:16px;font-weight:500;margin-top:4px}.gauge-center .detected-status{font-size:14px;margin-top:2px;font-weight:500}.confidence-bar{position:absolute;bottom:0;left:50%;transform:translate(-50%);width:200px;display:flex;align-items:center;gap:8px}.confidence-bar .confidence-track{flex:1;height:4px;background:#f0f0f0;border-radius:2px;overflow:hidden}.confidence-bar .confidence-fill{height:100%;border-radius:2px;transition:width .2s,background .3s}.string-button{text-align:center;padding:12px 8px;border-radius:12px;border:2px solid #f0f0f0;cursor:pointer;transition:all .25s ease;background:#fafafa}.string-button:hover{border-color:#1890ff;background:#e6f7ff}.string-button.selected{border-color:#1890ff;background:#e6f7ff;box-shadow:0 2px 8px #1890ff33}.string-button.detected{border-color:#52c41a;background:#f6ffed;box-shadow:0 2px 8px #52c41a33;animation:pulse-green 1.5s infinite}.string-button .string-note{font-size:28px;font-weight:700;color:#262626;line-height:1}.string-button .string-octave{font-size:12px;color:#8c8c8c;margin-top:2px}.string-button .string-freq{font-size:11px;color:#bfbfbf;margin-top:4px}@keyframes pulse-green{0%,to{box-shadow:0 2px 8px #52c41a33}50%{box-shadow:0 2px 16px #52c41a66}}@media(max-width:576px){.tuner-gauge{width:260px;height:170px}.gauge-needle{height:95px}.gauge-center .detected-note{font-size:32px}.string-button .string-note{font-size:22px}}