:root{font-family:'Segoe UI','Microsoft YaHei',sans-serif;color:#21353c;background:#f4f6f7;font-synthesis:none;--ink:#172d35;--muted:#62747a;--line:#dae2e5;--accent:#b8823e;--row:38px}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,select{cursor:pointer}button{touch-action:manipulation}button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid #449fbc;outline-offset:3px}main{max-width:1380px;margin:auto;padding:26px 40px 24px}header{display:flex;align-items:center;gap:28px;margin-bottom:28px}.brand{display:flex;align-items:center;gap:13px}.seal{width:48px;height:48px;display:grid;place-items:center;border:1px solid #a87639;color:#8c602a;border-radius:4px;font:29px 'KaiTi','SimSun',serif}h1{margin:0;font:32px 'KaiTi','SimSun',serif;letter-spacing:5px}h2{margin:0;font-size:18px;font-weight:600}.brand p{margin:5px 0 0;font-size:14px;color:var(--muted)}.header-note{margin-left:auto;font-size:14px;color:var(--muted)}.quiet{color:#41565e;background:white;border:1px solid #ccd7dc;border-radius:6px;padding:10px 16px;font-size:14px}.quiet:hover{background:#eaf0f2}.toolbar{display:flex;align-items:center;gap:24px;padding:18px 22px;background:var(--ink);color:#fff;border-radius:9px}.key-control{display:flex;align-items:center;gap:14px;flex-shrink:0}.key-control label{font-size:16px}.key-control label span{margin-left:15px;color:#c3d1d5}select{padding:10px 36px 10px 13px;border-radius:5px;border:1px solid #566b73;background:#283e47;color:#fff;font-size:16px;min-width:125px}option,optgroup{background:white;color:var(--ink)}.key-summary{display:flex;flex-direction:column;gap:5px;min-width:180px}.key-summary strong{font-size:16px;letter-spacing:2px;font-weight:500}.key-summary span{font-size:13px;color:#b3c6cc}.reference{margin-left:auto;font-size:13px;color:#b3c6cc;display:flex;flex-direction:column;gap:5px}.reference strong{font-weight:500;color:white;font-size:14px}.toolbar .quiet{background:transparent;border-color:#61757b;color:#eef3f5}.toolbar .quiet:hover{background:#354b54}.work-heading{display:flex;justify-content:space-between;align-items:center;margin:26px 0 14px}.work-heading>div{display:flex;align-items:center;gap:16px}.work-heading span,.work-heading p{font-size:14px;color:var(--muted);margin:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 256px;gap:20px;align-items:stretch}.strings-table{border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff;min-width:0}.table-heading,.string-row{display:grid;grid-template-columns:minmax(200px,1fr) 54px 76px 64px 140px;align-items:center}.table-heading{height:44px;background:#eef2f4;color:var(--muted);font-size:14px}.table-heading span:first-child{padding-left:22px}.table-heading span:not(:first-child){text-align:center}.string-row{height:var(--row);border-bottom:1px solid #edf1f3;transition:background .15s}.string-row:last-child{border:0}.string-row.selected{background:#eaf2f5}.string-row.modified .note{color:#925d20}.string-row button{border:0;background:transparent;color:inherit}.string-button{height:100%;position:relative;display:block;background:linear-gradient(90deg,#394148,#424c51 87%,#29393f 87%,#29393f 90%,#37454a 90%)!important;overflow:hidden;width:100%;padding:0}.string-row.selected .string-button{background:linear-gradient(90deg,#314653,#3b5764 87%,#a67b43 87%,#a67b43 90%,#374d57 90%)!important}.string-button:before{content:'';position:absolute;left:15px;right:20px;top:50%;height:1px;background:#c4bba9;box-shadow:0 1px 2px #161f24}.string-row.marker .string-button:before{background:#65c5ad;height:2px}.string-button:after{content:'';position:absolute;top:calc(50% - 4px);right:14px;width:7px;height:7px;border-radius:50%;border:1px solid #b0babd;background:#6c777b}.string-row.selected .string-button:before{background:#f2c68d;height:2px}.string-button:hover{filter:brightness(1.2)}.string-button.playing:before{animation:pluck .55s ease-out}.pluck-hint{position:absolute;left:15px;top:2px;color:#dbe5e8;font-size:12px;opacity:0}.selected .pluck-hint{opacity:1}.number{font-size:14px;font-variant-numeric:tabular-nums;display:grid;place-items:center;height:100%;width:100%;color:var(--muted)!important}.selected .number{color:#254f62!important;font-weight:700}.note{font-size:16px;font-weight:600;text-align:center;font-variant-numeric:tabular-nums}.jianpu{position:relative;text-align:center;line-height:1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;font-size:17px;font-weight:500}.dots{font-size:10px;height:9px;line-height:9px;letter-spacing:1px}.override{padding:3px 13px;position:relative}.override input{width:100%;height:30px;border:1px solid #d4dfe3;border-radius:5px;background:#fbfcfd;padding:3px 8px;font-size:14px;color:#21353c}.override input::placeholder{color:#89999e}.modified .override input{border-color:#c69b64;background:#fffaf1}.override input[aria-invalid=true]{border:2px solid #b34343;background:#fff1f1}.table-foot{min-height:39px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px;color:var(--muted);font-size:12px;background:#f9fbfc}.green-line{width:16px;height:2px;background:#268b74}.tuner{background:#fff;border:1px solid var(--line);border-radius:9px;padding:22px 22px 18px;display:flex;flex-direction:column;align-items:center;position:sticky;top:20px;max-height:890px;min-width:0}.tuner-heading{display:flex;flex-direction:column;align-items:center;gap:8px}.tuner-heading h2{font-size:17px}.tuner-heading span{font-size:12px;color:var(--muted)}.target{display:flex;align-items:center;flex-direction:column;gap:7px;margin:23px 0 20px}.target>span{font-size:13px;color:var(--muted)}.target strong{font-size:44px;font-weight:500;line-height:1.15;font-variant-numeric:tabular-nums}.primary{display:flex;align-items:center;justify-content:center;gap:9px;background:#214a5b;color:white;border:0;border-radius:6px;padding:12px 10px;width:100%;font-size:14px}.primary:hover{background:#326678}.primary:disabled{opacity:.6;cursor:wait}.primary.listening{background:#edf4f5;color:#214a5b;border:1px solid #c7d9df}.mic-message{color:var(--muted);text-align:center;font-size:13px;line-height:1.7;margin:12px 0 15px;min-height:44px}.meter{flex:1;min-height:210px;max-height:350px;width:150px;position:relative;margin:14px 0 16px}.meter-rail{position:absolute;top:0;bottom:0;left:60px;width:30px;background:linear-gradient(#f3eee7,#eaf0f3 30%,#eaf0f3 70%,#f3eee7);border:1px solid #d9e3e7;border-radius:18px}.center-zone{position:absolute;top:45%;height:10%;left:0;right:0;background:#c4e8dc}.center-line{position:absolute;top:50%;left:-8px;right:-8px;height:2px;background:#2c8c6d}.needle{position:absolute;top:50%;left:-19px;right:-19px;height:3px;background:#b07a35;transition:top .1s}.needle span{display:block;width:9px;height:9px;border-radius:50%;background:#b07a35;position:absolute;right:-3px;top:-3px}.meter.in-tune .needle,.meter.in-tune .needle span{background:#218568}.tick{position:absolute;left:10px;width:9px;height:1px;background:#9baeb5}.t1{top:10%}.t2{top:30%}.t3{top:70%}.t4{top:90%}.meter-label{position:absolute;left:0;color:var(--muted);font-size:14px;display:flex;flex-direction:column;gap:3px}.meter-label span{font-size:12px}.meter-label.top{top:-3px}.meter-label.bottom{bottom:-3px}.center-label{position:absolute;top:calc(50% - 10px);left:111px;font-size:14px;color:#258369}.reading{display:flex;flex-direction:column;align-items:center;gap:7px;min-height:92px}.reading strong{font-size:26px;font-weight:500;color:#92602b;font-variant-numeric:tabular-nums}.reading span{font-size:14px}.reading small{font-size:12px;color:var(--muted)}.tuner-foot{margin-top:15px;border-top:1px solid var(--line);padding-top:14px;text-align:center;font-size:12px;line-height:1.8;color:var(--muted);width:100%}footer{display:flex;justify-content:space-between;gap:16px;font-size:12px;color:var(--muted);margin-top:15px}#changeCount{color:#8b642d}dialog{border:1px solid var(--line);border-radius:12px;max-width:640px;width:calc(100% - 32px);padding:28px;color:var(--ink);max-height:85vh}dialog::backdrop{background:#13293480}.dialog-heading{display:flex;justify-content:space-between;align-items:center}.dialog-heading button{border:0;background:#edf2f4;border-radius:5px;font-size:26px;color:#536b75;line-height:1;padding:5px 9px}dialog li,dialog p{font-size:15px;line-height:1.85}dialog ol{padding-left:24px}dialog li{margin-bottom:12px}dialog p{color:var(--muted)}dialog a{color:#286781}code{padding:2px 5px;background:#edf2f4;border-radius:4px}@keyframes pluck{0%,30%,60%{transform:translateY(-2px)}15%,45%,75%{transform:translateY(2px)}100%{transform:translateY(0)}}
.playback-controls{display:flex;align-items:center;gap:18px;margin:0 0 15px;padding:12px 16px;background:#fff;border:1px solid var(--line);border-radius:7px;font-size:14px}.sound-label{color:var(--muted)}.sound-label strong{margin-left:8px;color:var(--ink);font-weight:500}#repeatStatus{color:var(--muted);font-size:13px}#repeatButton[aria-pressed=true]{background:#214a5b;color:#fff;border-color:#214a5b}.rows-surface{position:relative;background:#fff}.instrument-head{position:absolute;inset:0 auto 0 0;width:calc(100% - 334px);overflow:hidden;background:#79502d;pointer-events:none}.instrument-head svg{width:100%;height:100%;display:block}.string-row{position:relative}.string-button{background:transparent!important;border-bottom:0!important}.string-row.selected .string-button{background:#ffd8953d!important}.string-button:before,.string-button:after{display:none}.string-row.marker .number:before{content:'';position:absolute;width:4px;height:15px;background:#268b74;left:3px;border-radius:2px}.number{position:relative}.pluck-hint{background:#172d35b0;padding:2px 6px;border-radius:3px;top:6px;left:9px;color:#fff}.string-button:hover{background:#fff3!important;filter:none}.string-button.playing{animation:head-pluck .5s ease-out}@keyframes head-pluck{0%{background:#fff7}100%{background:transparent}}
@media(min-width:1440px){:root{--row:36px}}
@media(max-width:1050px){main{padding:20px}.workspace{grid-template-columns:minmax(0,1fr) 218px;gap:14px}.table-heading,.string-row{grid-template-columns:minmax(115px,1fr) 43px 68px 50px 112px}.override{padding:3px 8px}.toolbar{gap:18px}.reference{display:none}.toolbar>.quiet{margin-left:auto}.tuner{padding:20px 15px}.header-note{display:none}#helpButton{margin-left:auto}}
@media(max-width:720px){:root{--row:44px}main{padding:16px 12px}header{margin-bottom:18px;gap:12px}h1{font-size:28px}.seal{width:42px;height:42px}.toolbar{padding:14px;gap:12px;flex-wrap:wrap}.key-control{gap:9px}.key-control label span{margin-left:8px}.key-summary{min-width:130px;flex:1}.toolbar>.quiet{margin-left:0;padding:8px 12px}.work-heading>div{gap:5px;align-items:flex-start;flex-direction:column}.work-heading p{font-size:12px;max-width:145px;text-align:right}.workspace{grid-template-columns:1fr}.table-heading,.string-row{grid-template-columns:minmax(70px,1fr) 38px 60px 44px 92px}.table-heading{font-size:12px}.table-heading span:first-child{padding-left:9px}.override{padding:3px 6px}.override input{height:36px;padding:4px 6px}.table-foot{font-size:12px}.tuner{position:relative;top:0;max-height:none;display:grid;grid-template-columns:1fr 120px;grid-template-rows:auto auto auto auto auto;column-gap:18px;align-items:start;padding:20px}.tuner-heading{grid-column:1;align-items:flex-start}.target{grid-column:1;align-items:flex-start;margin:16px 0}.target strong{font-size:36px}.primary{grid-column:1;max-width:220px}.mic-message{grid-column:1;text-align:left;min-height:0;margin-bottom:0}.meter{grid-column:2;grid-row:1/5;height:235px;min-height:0;width:120px;margin:8px 0 0}.meter-rail{left:53px}.center-label{left:99px}.reading{grid-column:1/3;min-height:0;margin-top:20px;flex-direction:row;justify-content:center;flex-wrap:wrap}.reading small{flex-basis:100%;text-align:center}.tuner-foot{grid-column:1/3}footer{flex-direction:column;gap:5px;font-size:12px}dialog{padding:20px}}
@media(max-width:360px){.table-heading,.string-row{grid-template-columns:minmax(36px,1fr) 32px 54px 38px 86px}.table-heading span:first-child{font-size:12px}.note{font-size:14px}.override input{font-size:14px}.key-summary strong{font-size:14px;letter-spacing:1px}.key-summary span{font-size:12px}}
@media(max-width:1050px){.instrument-head{width:calc(100% - 273px)}}
@media(max-width:720px){.instrument-head{width:calc(100% - 234px)}.playback-controls{flex-wrap:wrap;gap:10px;padding:12px}#repeatStatus{flex-basis:100%}.work-heading>div span{font-size:12px}.pluck-hint{left:3px;font-size:12px;padding:2px}}
@media(max-width:360px){.instrument-head{width:calc(100% - 210px)}}
.string-row.selected{background:transparent}
.playback-controls{flex-wrap:wrap}
.repeat-control{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0}
.repeat-help{display:grid;place-items:center;width:24px;height:24px;padding:0;border:1px solid #b5c5cd;border-radius:50%;background:#f5f9fb;color:#426373;font:italic 600 15px Georgia,serif}
.repeat-help:hover{background:#e5eff3;border-color:#7197a7}
.repeat-tooltip{position:absolute;top:calc(100% + 12px);left:0;z-index:30;width:310px;max-width:calc(100vw - 50px);padding:14px 16px;background:#fff;border:1px solid #c6d7df;border-radius:8px;box-shadow:0 6px 22px #172d3526;color:#21353c;font-size:14px;line-height:1.75;visibility:hidden;opacity:0;transform:translateY(-4px);transition:opacity .12s,transform .12s}
.repeat-tooltip:before{content:'';position:absolute;top:-6px;left:var(--hint-arrow-left,24px);width:10px;height:10px;background:#fff;border-top:1px solid #c6d7df;border-left:1px solid #c6d7df;transform:rotate(45deg)}
.repeat-tooltip span{color:#62747a;font-size:13px}
.repeat-control:hover .repeat-tooltip,.repeat-control:focus-within .repeat-tooltip{visibility:visible;opacity:1;transform:none}
.repeat-control[data-dismissed=true] .repeat-tooltip{visibility:hidden;opacity:0}
@media(max-width:720px){.repeat-tooltip{width:285px}}
.string-row{border-bottom:0}
.string-row:not(:last-child):after{content:'';position:absolute;bottom:0;right:0;width:334px;height:1px;background:#edf1f3;pointer-events:none}
@media(max-width:1050px){.string-row:not(:last-child):after{width:273px}}
@media(max-width:720px){.string-row:not(:last-child):after{width:234px}}
@media(max-width:360px){.string-row:not(:last-child):after{width:210px}}
@media(prefers-reduced-motion:reduce){*,*:before{animation:none!important;transition:none!important}}

/* Language and reference-sound controls share the existing responsive layout. */
header{flex-wrap:wrap;gap:20px}.header-note{flex:1;text-align:right}
.language-control{display:flex;align-items:center;gap:8px;flex-shrink:0}
.language-control label{font-size:12px;color:var(--muted)}
.language-control select{font:inherit;color:var(--ink);background:#fff;border:1px solid #ccd7dc;border-radius:5px;padding:8px 10px;}

#tableFootText{text-align:center}
html[lang=en] h1{font:600 28px 'Segoe UI',sans-serif;letter-spacing:.5px}
html[lang=en] .table-heading{font-size:12px}html[lang=en] .key-summary strong{letter-spacing:1px}
html[lang=en] .key-summary{min-width:0;flex:1}html[lang=en] .key-summary span{line-height:1.5}
html[lang=en] .meter-label{font-size:12px}html[lang=en] .center-label{font-size:12px;left:103px;white-space:nowrap}
html[lang=en] .override input{font-size:12px}
html[lang=en] .work-heading>div{flex-direction:column;align-items:flex-start;gap:5px}
html[lang=en] .work-heading p{max-width:220px;text-align:right}
@media(max-width:1050px){header{gap:14px}#helpButton{margin-left:0}.language-control{margin-left:auto}}
@media(max-width:720px){header{gap:12px}.language-control{margin-left:auto}.language-control label{display:none}#helpButton{margin-left:auto}html[lang=en] .work-heading p{max-width:125px}html[lang=en] .center-label{left:90px}html[lang=en] .table-heading span:first-child{font-size:11px}html[lang=en] .key-summary{flex-basis:140px}}
@media(max-width:390px){html[lang=en] .brand p{font-size:12px}html[lang=en] h1{font-size:24px}.language-control select{padding-right:18px;font-size:13px}.repeat-control{max-width:100%}#repeatButton{padding:10px 12px}}

.mic-level{height:6px;overflow:hidden;border-radius:4px;background:#e6edef;margin:12px 0 0;width:100%;max-width:220px}
.mic-level span{display:block;height:100%;width:0;background:#348c77;transition:width .1s linear;border-radius:inherit}
@media(max-width:720px){.mic-level{grid-column:1}.meter{grid-row:1/6}html[lang=en] .center-label{left:99px;font-size:11px}}