:root{font-family:PingFang SC,Hiragino Sans GB,Noto Sans SC,sans-serif;line-height:1.4;color:#2d2d2d;background:linear-gradient(180deg,#f5f4ef,#efeeea)}*{box-sizing:border-box}body{margin:0;min-width:320px;background:transparent}.page{max-width:1100px;margin:0 auto;padding:16px}.header h1{margin:0;font-size:32px;color:#55534b}.header p{margin:4px 0 12px;color:#6d6a5d}.toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}.toolbar label,.custom-panel label{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid #d8d4c9;padding:8px 10px;border-radius:8px}.switch-wrap{gap:8px}select,button,input{font:inherit}.custom-panel{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px;margin-bottom:12px}.content{display:grid;grid-template-columns:240px 1fr;gap:14px}.strings-panel{display:flex;flex-direction:column;border:1px solid #c8c4b7;background:#ecebe6;border-radius:10px;overflow:hidden}.string-card{border:0;border-bottom:1px solid #d3d0c4;padding:12px;text-align:left;background:transparent;cursor:pointer}.string-card.active{background:#fff;border-left:6px solid #9d9876;padding-left:6px}.string-title{font-size:26px;color:#6e6d66}.string-note{font-size:24px;color:#444}.string-freq{color:#8a8779}.meter-panel{border-radius:12px;border:1px solid #d7d3c8;background:#f8f7f4;padding:28px 22px 24px;text-align:center}.freq-title{font-size:34px;margin-bottom:22px}.freq-value{font-size:60px;color:#8f8762;margin-bottom:22px}.target,.delta{font-size:26px;color:#4d4a40}.target{margin-bottom:16px}.gauge{width:min(500px,92%);margin-top:28px}.gauge-arc,.gauge-tick,.gauge-tick-mid,.gauge-tick-major{fill:none;stroke:#5f564d}.gauge-arc{stroke-width:1.3}.gauge-tick{stroke-width:.45;opacity:.4}.gauge-tick-mid{stroke-width:.7;opacity:.55}.gauge-tick-major{stroke-width:1.1}.gauge-label{fill:#5f564d;font-size:10px;font-weight:500}.gauge-unit{fill:#5f564d;font-size:12px;font-weight:500}.gauge-needle,.gauge-center{fill:#68403b}.gauge-center-dot{fill:#f8f7f4}.state-tag{width:fit-content;margin:24px auto 0;padding:9px 22px;border-radius:6px;color:#fff;font-size:24px}.state-tag.listening{background:#777}.state-tag.flat,.state-tag.sharp{background:#d1a625}.state-tag.in_tune{background:#2f9b58}.error{margin-top:8px;color:#b31616}.hint{margin-top:8px;color:#6d6a60}.diag{margin-top:10px;text-align:left;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px;font-size:13px;color:#555;background:#efeee8;border:1px solid #d4d0c3;border-radius:8px;padding:8px}@media(max-width:860px){.page{max-width:none;padding:0}.header,.toolbar,.custom-panel{margin-left:clamp(118px,31vw,180px);padding:10px 10px 0}.content{display:block}.strings-panel{position:fixed;left:0;top:0;width:clamp(118px,31vw,180px);height:100dvh;border-radius:0;border-left:0;z-index:3;overflow-y:auto}.string-card{min-height:calc(100dvh / 7);display:flex;flex-direction:column;justify-content:center;padding:10px 12px}.string-card.active{padding-left:6px}.string-title{font-size:18px}.string-note{font-size:17px}.string-freq{font-size:10px}.meter-panel{margin-left:clamp(118px,31vw,180px);min-height:100dvh;border-radius:0;border-left:0;border-right:0;border-bottom:0;padding:20px 10px 16px}.gauge{width:min(500px,98%)}.freq-title{font-size:24px}.freq-value{font-size:46px}.target,.delta{font-size:19px}.state-tag{font-size:18px}.diag{grid-template-columns:1fr}}