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