:root{
  --ink:#eee9df;--muted:#aaa49b;--bg:#111214;--panel:#1b1c1e;--panel2:#292a2c;
  --line:rgba(255,255,255,.10);--line2:rgba(255,255,255,.18);
  --gold:#c9a66b;--gold2:#e5c48e;--jade:#54b59f;--green:#65d69e;--red:#b75b51;
  --font:"Songti SC","Noto Serif SC","Source Han Serif SC",STSong,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-family:"PingFang SC","Hiragino Sans GB",var(--font);color:var(--ink);background:var(--bg)
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}
html{min-height:100%;background:var(--bg)}
body{min-height:100vh;margin:0;color:var(--ink);background:radial-gradient(ellipse at 50% 5%,rgba(117,84,57,.20),transparent 42%),linear-gradient(180deg,#202124 0,#121315 70%,#0d0e0f 100%);-webkit-font-smoothing:antialiased}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.1;z-index:0;background-image:repeating-linear-gradient(90deg,transparent 0 3px,rgba(255,255,255,.03) 4px)}
button,select{font:inherit}button{cursor:pointer}

.tuner-header{min-height:68px;padding:8px clamp(16px,2.4vw,34px) 8px 72px;display:flex;align-items:center;gap:22px;position:sticky;top:0;z-index:20;background:linear-gradient(#303235,#202124);border-bottom:1px solid #08090a;box-shadow:inset 0 1px rgba(255,255,255,.08),0 4px 18px rgba(0,0,0,.42)}
.brand{display:flex;align-items:center;gap:10px;min-width:0;font-family:var(--font)}
.seal{width:40px;height:40px;flex:0 0 auto;display:grid;place-items:center;border:1px solid #8f7250;border-radius:7px;color:var(--gold2);background:linear-gradient(145deg,#5b2c27,#321c1b);box-shadow:inset 0 0 0 3px rgba(0,0,0,.22),0 1px rgba(255,255,255,.08);font:600 22px/1 var(--font)}
.brand h1{margin:0;color:#f0e9df;font:500 clamp(19px,2vw,25px)/1.15 var(--font);letter-spacing:.18em}
.brand p{margin:4px 0 0;color:var(--muted);font:9px/1.2 var(--font);letter-spacing:.14em;text-transform:uppercase}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.mode-tabs{padding:3px;display:flex;gap:2px;border:1px solid #403c35;border-radius:8px;background:#121315}
.mode-tabs button,.language-button{min-height:36px;padding:7px 14px;border:1px solid transparent;border-radius:6px;color:#bdb8b0;background:transparent;font:13px/1 var(--font);letter-spacing:.08em;transition:.14s}
.mode-tabs button:hover,.language-button:hover{color:#efe9df;border-color:#6b6d72;filter:brightness(1.1)}
.mode-tabs button.selected{border-color:#a07d52;color:#f5eee3;background:linear-gradient(#705238,#503824);box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.28)}
.language-button{border-color:#45474b;background:#25262a;box-shadow:inset 0 1px rgba(255,255,255,.06)}

.tuner-main{width:min(1120px,calc(100% - 32px));margin:18px auto 34px;position:relative;z-index:1}
.intro{min-height:34px;margin:0 3px 10px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.intro p{max-width:790px;margin:0;color:#b4aea5;font:13px/1.7 var(--font);letter-spacing:.035em}
.intro>span{display:flex;align-items:center;gap:8px;white-space:nowrap;color:#8f8a82;font:11px/1 var(--font);font-weight:400}
.intro>span i{width:7px;height:7px;border-radius:50%;background:#77736d;box-shadow:0 0 0 4px rgba(255,255,255,.04)}
.intro>span.listening{color:#8fd0aa}.intro>span.listening i{background:var(--green);animation:pulse 1s ease-in-out infinite alternate}

.control-card{padding:12px 14px;border:1px solid #343538;border-radius:10px;background:linear-gradient(145deg,#252628,#17181a);box-shadow:inset 0 1px rgba(255,255,255,.06),0 12px 32px rgba(0,0,0,.24)}
.string-picker{height:48px;display:grid;grid-template-columns:repeat(7,1fr);gap:7px}
.string-picker button{position:relative;border:1px solid #45474b;border-radius:6px;color:#c8c3ba;background:#202124;box-shadow:inset 0 1px rgba(255,255,255,.04);font:16px/1 var(--font);letter-spacing:.08em;transition:.14s}
.string-picker button span{margin-left:3px;color:#88847e;font-size:11px}.string-picker button:hover{filter:brightness(1.15);border-color:#806b4a;color:#efe9df}
.string-picker button.selected{border-color:#a07d52;color:#f5eee3;background:linear-gradient(#705238,#503824);box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.35)}
.string-picker button.selected span{color:#d7c3a4}.string-picker button.completed:after{content:"✓";margin-left:5px;color:#8fd0aa;font:12px/1 sans-serif}
.settings-row{display:flex;align-items:end;gap:12px;margin-top:10px}
.setting{min-height:38px;display:flex;align-items:center;gap:8px;color:#96918a;font:11px/1 var(--font);letter-spacing:.05em}.setting>span{white-space:nowrap}
.tuning-setting select{min-width:190px;height:36px;padding:0 30px 0 11px;border:1px solid #45474b;border-radius:6px;color:#ded8ce;background:#202124;color-scheme:dark}
.reference-setting{margin-left:auto}.reference-setting button{width:34px;height:34px;border:1px solid #45474b;border-radius:6px;color:#c8c3ba;background:#25262a;font:19px/1 sans-serif;box-shadow:inset 0 1px rgba(255,255,255,.05)}
.reference-setting strong{min-width:31px;color:#f0e9df;font:500 18px/1 var(--mono);text-align:right}.reference-setting em{font:10px/1 sans-serif}
.reference-tone{height:36px;padding:0 13px;display:flex;align-items:center;gap:7px;border:1px solid #806b4a;border-radius:6px;color:#e8d4ad;background:rgba(52,43,33,.82);font:12px/1 var(--font);letter-spacing:.06em}
.reference-tone span{font-size:16px}.reference-tone:hover{filter:brightness(1.16)}.reference-tone.playing{border-color:#a07d52;color:#f5eee3;background:linear-gradient(#705238,#503824)}.reference-tone.playing span{animation:pulse .7s infinite alternate}

.qin-stage{height:480px;margin-top:14px;padding:10px;position:relative;overflow:hidden;border:1px solid #343538;border-radius:12px;background:linear-gradient(145deg,#252628,#17181a);box-shadow:inset 0 1px rgba(255,255,255,.06),0 16px 40px rgba(0,0,0,.35)}
.qin-surface{position:absolute;inset:10px;overflow:hidden;border:2px solid #100c0b;border-radius:46px 12px 16px 38px;background:linear-gradient(160deg,#332820 0%,#1e1815 45%,#120f0d 100%);box-shadow:inset 0 5px 9px rgba(255,255,255,.035),inset 0 -18px 28px rgba(0,0,0,.55),0 7px 14px rgba(0,0,0,.45)}
.qin-surface:before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,transparent 0 4%,rgba(211,171,108,.05) 22%,transparent 50%,rgba(255,255,255,.035) 76%,transparent 100%);pointer-events:none}
.strings,.hui{position:absolute;inset:0}.string-line{position:absolute;left:4%;right:5%;height:1px;background:linear-gradient(90deg,rgba(219,197,158,.18),rgba(240,219,177,.72),rgba(208,179,129,.36));box-shadow:0 1px rgba(0,0,0,.45)}
.string-line.active{height:2px;background:linear-gradient(90deg,rgba(237,207,154,.2),#e6c388,#c59450);box-shadow:0 0 11px rgba(220,172,89,.42)}
.hui i{width:6px;height:6px;position:absolute;top:7%;border-radius:50%;background:#d4b478;box-shadow:0 0 4px rgba(229,195,131,.4)}
.qin-tail{position:absolute;right:2.2%;top:7%;bottom:7%;width:13px;border-left:1px solid rgba(218,191,145,.16);border-right:1px solid rgba(218,191,145,.10)}

.meter{--needle-angle:0deg;width:min(570px,72%);height:330px;padding:25px 25px 18px;position:absolute;z-index:5;left:48%;top:50%;transform:translate(-50%,-50%);border:1px solid #57524b;border-radius:12px;color:#eee4d3;background:linear-gradient(145deg,rgba(42,43,45,.96),rgba(23,24,26,.97));box-shadow:inset 0 1px rgba(255,255,255,.07),0 25px 60px rgba(0,0,0,.48);backdrop-filter:blur(10px)}
.meter-scale{height:130px;position:relative;border-bottom:1px solid rgba(218,191,145,.18)}.meter-scale:before{content:"";position:absolute;left:7%;right:7%;bottom:12px;height:72px;border-top:1px solid rgba(218,191,145,.32);border-radius:50%}
.meter-scale span{position:absolute;top:8px;color:#8c857b;font:10px/1.2 sans-serif;letter-spacing:.14em}.meter-scale .low{left:3%}.meter-scale .center{left:50%;transform:translateX(-50%);color:#bfb39e;opacity:0}.meter-scale .high{right:3%}
.center-line{width:1px;height:84px;position:absolute;left:50%;bottom:0;background:rgba(217,187,134,.28)}
.needle{width:2px;height:104px;position:absolute;left:50%;bottom:-1px;transform-origin:50% 100%;transform:rotate(var(--needle-angle));background:linear-gradient(#d8b777,#f1d69e);box-shadow:0 0 7px rgba(219,177,97,.32);transition:transform .13s ease-out}.needle:after{content:"";width:13px;height:13px;position:absolute;left:50%;bottom:-6px;transform:translateX(-50%);border-radius:50%;background:#ddbd80}
.reading{min-height:150px;display:grid;place-items:center;align-content:center;gap:7px;text-align:center}.reading>strong{font:400 30px/1.1 var(--font);letter-spacing:.12em}.reading>span{color:#bcb2a4;font:17px/1.1 Georgia,serif}.reading>p{margin:0;color:#aaa093;font:13px/1.5 var(--font)}
.target-readout{color:#837b70;font:11px/1.2 sans-serif;letter-spacing:.06em}.note-readout{display:flex;align-items:baseline;gap:20px}.note-readout strong{color:#ead1a2;font:600 48px/1 sans-serif;letter-spacing:0}.note-readout span{color:#c7bba8;font:30px/1 Georgia,serif}
.peg-direction{position:absolute;right:20px;bottom:34px;display:grid;place-items:center;gap:3px;color:#d39a91;font:10px/1 sans-serif}.peg-direction i{width:28px;height:28px;border:1px solid currentColor;border-radius:50%;position:relative}.peg-direction i:after{content:"↻";position:absolute;inset:0;display:grid;place-items:center;font-size:20px}.peg-direction.low i:after{content:"↺"}
.stability{height:3px;position:absolute;left:22px;right:22px;bottom:15px;background:rgba(255,255,255,.07)}.stability i{display:block;width:0;height:100%;background:#d0b273;transition:width .16s}
.meter.right{border-color:rgba(103,155,124,.72)}.meter.right .center{opacity:1;color:#8fd0aa}.meter.right .reading>strong,.meter.right .reading>span,.meter.right .note-readout strong,.meter.right .note-readout span{color:#8fd0aa}.meter.right .needle,.meter.right .stability i{background:#72ba91}
.meter.low,.meter.high{border-color:rgba(174,81,68,.65)}.meter.low .reading>strong,.meter.high .reading>strong,.meter.low .reading>span,.meter.high .reading>span{color:#e58276}.meter.low .scale-low,.meter.high .scale-high{color:#e58276}
.pluck-bead{width:40px;height:40px;display:grid;place-items:center;position:absolute;z-index:4;right:3.6%;top:14%;transform:translateY(-50%);border:1px solid rgba(232,198,136,.25);border-radius:50%;transition:top .2s}.pluck-bead i{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 32% 26%,#fff2cf,#d0a15d 65%,#614632);box-shadow:0 0 calc(8px + 16px * var(--sound-level,0)) rgba(216,165,80,.4)}.pluck-bead.listening{animation:bead .7s ease-in-out infinite alternate}

.actions{max-width:760px;margin:14px auto 0;display:grid;grid-template-columns:230px 1fr;gap:10px}.listen-button{min-height:48px;border:1px solid #a07d52;border-radius:6px;color:#f5eee3;background:linear-gradient(#705238,#503824);box-shadow:inset 0 1px rgba(255,255,255,.12),0 4px 10px rgba(0,0,0,.35);font:14px/1 var(--font);letter-spacing:.12em}.listen-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.listen-button.listening{border-color:#4a4c50;color:#c8c3ba;background:#25262a;transform:none}
.mic-check{min-height:48px;padding:0 14px;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;border:1px solid #343538;border-radius:6px;color:#8f8a82;background:#17181a;font:11px/1 var(--font)}.mic-check>i{height:4px;background:rgba(255,255,255,.07)}.mic-check>i b{display:block;width:3%;height:100%;background:var(--gold);transition:width .1s}.mic-check.receiving strong{color:#8fd0aa}
.privacy{margin:12px 0 0;color:#8f8a82;text-align:center;font:11px/1.55 var(--font);letter-spacing:.04em}.instructions{margin:22px auto 0;border-top:1px solid #343538;border-bottom:1px solid #343538;color:#aaa49b}.instructions summary{padding:14px 4px;cursor:pointer;color:#c8c3ba;font:13px/1 var(--font);letter-spacing:.08em}.instructions>div{padding:0 4px 15px;font:12px/1.8 var(--font)}.instructions ol{margin:0;padding-left:22px}.instructions p{margin:8px 0 0}
footer{position:relative;z-index:1;padding:18px;color:#706c66;text-align:center;font:9px/1.5 Georgia,serif;letter-spacing:.1em}
@keyframes pulse{to{opacity:.42}}@keyframes bead{to{transform:translateY(-50%) scale(1.09)}}

@media(max-width:760px){
  .tuner-header{min-height:112px;padding:10px 10px 10px 52px;display:grid;grid-template-columns:1fr;gap:8px}.header-actions{width:100%;margin:0;justify-content:space-between}.brand h1{font-size:20px}.seal{width:36px;height:36px;font-size:20px}
  .mode-tabs button,.language-button{padding-inline:10px;font-size:12px}.tuner-main{width:calc(100% - 16px);margin-top:10px}.intro{align-items:flex-start;gap:8px}.intro p{font-size:12px;line-height:1.55}.intro>span{font-size:10px}
  .control-card{padding:9px 8px}.string-picker{height:44px;gap:3px}.string-picker button{font-size:15px;padding:2px}.string-picker button span{display:none}.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.setting{min-height:37px}.tuning-setting select{min-width:0;width:100%;height:34px}
  .reference-setting{margin:0;justify-content:flex-end}.reference-setting>span{display:none}.reference-tone{grid-column:1/-1;justify-content:center}.qin-stage{height:420px;padding:6px;border-radius:10px}.qin-surface{inset:6px;border-radius:30px 8px 10px 24px}
  .meter{width:88%;height:320px;padding:16px 13px;left:46%;border-radius:10px}.meter-scale{height:125px}.reading>strong{font-size:27px}.reading>p{font-size:12px}.note-readout strong{font-size:43px}.note-readout span{font-size:27px}.pluck-bead{right:1%;width:34px;height:34px}.pluck-bead i{width:21px;height:21px}
  .actions{grid-template-columns:1fr;gap:7px}.listen-button{min-height:50px}.privacy{font-size:10px}.peg-direction{right:7px}.global-page-back{top:8px!important;left:8px!important}
}
@media(max-width:410px){
  .header-actions{gap:5px}.mode-tabs button{padding-inline:7px}.language-button{padding-inline:8px}.intro>span{display:none}.settings-row{grid-template-columns:1fr}.reference-setting{justify-content:center}.reference-tone{grid-column:auto}.qin-stage{height:400px}
  .meter{width:91%;height:305px}.meter-scale{height:115px}.reading{min-height:145px}.reading>strong{font-size:24px}.reading>span{font-size:15px}.target-readout{font-size:10px}.peg-direction{display:none!important}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

/* v2.17：单屏调音布局与自由调音入口 */
html,body{height:100%;min-height:0;overflow:hidden}
body{display:grid;grid-template-rows:auto minmax(0,1fr)}
.tuner-header{min-height:60px;padding-top:6px;padding-bottom:6px}
.brand p{display:none}
.header-actions{gap:8px}
.mode-button,.language-button{width:90px;min-width:90px;height:36px;padding:7px 10px;font-size:12px;letter-spacing:.08em}
.mode-button.selected{border-color:#a07d52;color:#f5eee3;background:linear-gradient(#705238,#503824);box-shadow:inset 0 1px rgba(255,255,255,.12),0 3px 8px rgba(0,0,0,.28)}
.tuner-main{height:100%;min-height:0;width:min(1120px,calc(100% - 28px));margin:0 auto;padding:10px 0 8px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:8px}
.intro{min-height:0;margin:0 3px;display:block}.intro p{max-width:none;font-size:12px;line-height:1.55}
.control-card{padding:9px 12px}.string-picker{height:42px}.settings-row{margin-top:7px}
.qin-stage{height:auto;min-height:0;margin-top:0}
.meter{height:min(330px,calc(100% - 24px));min-height:255px}
.reading{min-height:145px;gap:6px}
.status-line{min-height:38px;display:flex;align-items:center;justify-content:center;gap:12px;color:#eee4d3}
.status-line>strong{font:400 29px/1.1 var(--font);letter-spacing:.12em}
.meter-listen{width:min(210px,80%);min-height:43px;padding:0 18px;position:relative;z-index:2}
.meter-listen.listening{color:#d9d3ca;border-color:#57524b;background:linear-gradient(#36373a,#25262a)}
.peg-direction{position:static;display:inline-flex;grid-auto-flow:column;align-items:center;gap:7px;color:#d39a91;font:11px/1 var(--font);letter-spacing:.04em;white-space:nowrap}
.peg-direction i{flex:0 0 auto;width:27px;height:27px}.peg-direction b{font-weight:400}
.peg-direction.high i{animation:peg-clockwise 1.25s linear infinite}.peg-direction.low i{animation:peg-counter 1.25s linear infinite}
@keyframes peg-clockwise{to{transform:rotate(360deg)}}@keyframes peg-counter{to{transform:rotate(-360deg)}}
.mic-row{min-height:36px;display:grid;grid-template-columns:minmax(300px,1fr) auto;align-items:center;gap:14px}
.mic-check{min-height:36px}.privacy{margin:0;max-width:390px;text-align:right;font-size:10px;line-height:1.35}
.actions,.instructions{display:none!important}
footer{display:none}

@media(max-width:760px){
  .tuner-header{min-height:58px;padding:6px 8px 6px 44px;display:flex;gap:5px}.brand{gap:6px}.seal{width:34px;height:34px;font-size:19px}.brand h1{font-size:15px;letter-spacing:.09em;white-space:nowrap}
  .header-actions{width:auto;margin-left:auto;gap:4px}.mode-button,.language-button{width:70px;min-width:70px;height:34px;min-height:34px;padding:5px 5px;font-size:10px}
  .tuner-main{width:calc(100% - 12px);padding:6px 0;gap:6px}.intro{min-height:0}.intro p{font-size:10.5px;line-height:1.4}
  .control-card{padding:6px}.string-picker{height:38px}.settings-row{margin-top:5px;gap:5px}.setting{min-height:32px}.tuning-setting select{height:32px}.reference-setting button{width:31px;height:31px}.reference-tone{height:32px}
  .qin-stage{height:auto;min-height:0}.meter{height:min(305px,calc(100% - 12px));min-height:240px}.meter-scale{height:110px}.reading{min-height:124px;gap:4px}.status-line{min-height:32px;gap:8px}.status-line>strong{font-size:23px}.peg-direction{font-size:9px;gap:4px}.peg-direction i{width:23px;height:23px}.peg-direction i:after{font-size:17px}
  .meter-listen{min-height:38px;width:min(190px,78%);font-size:12px}.reading>p{font-size:10px}.target-readout{font-size:9px}.note-readout strong{font-size:36px}.note-readout span{font-size:23px}
  .mic-row{min-height:32px;grid-template-columns:minmax(160px,1fr) auto;gap:8px}.mic-check{min-height:32px;padding:0 8px;font-size:9px;gap:7px}.privacy{max-width:170px;font-size:8px}
}
@media(max-width:410px){
  .brand h1{font-size:14px}.mode-button,.language-button{width:66px;min-width:66px;padding-inline:4px;font-size:9.5px}.tuner-main{padding-top:5px}.intro p{font-size:10px}
  .settings-row{grid-template-columns:minmax(0,1fr) auto auto}.tuning-setting{grid-column:1/2}.reference-setting{grid-column:2/4}.reference-tone{grid-column:1/-1}
  .meter{width:92%;height:min(292px,calc(100% - 10px));min-height:226px}.meter-scale{height:102px}.reading{min-height:117px}.status-line>strong{font-size:21px}.peg-direction b{max-width:86px;white-space:normal;line-height:1.2}
  .mic-row{grid-template-columns:1fr}.privacy{display:none}.mic-check{width:100%}
}
@media(max-height:700px){
  .tuner-main{padding-top:5px;gap:5px}.intro p{font-size:10px}.control-card{padding:6px}.string-picker{height:36px}.settings-row{margin-top:4px}.qin-stage{padding:6px}.qin-surface{inset:6px}.meter{min-height:220px;height:calc(100% - 10px)}.meter-scale{height:96px}.reading{min-height:112px}.mic-row{min-height:30px}.mic-check{min-height:30px}
}

/* v2.18：按要求只精简指定元素，偏高／偏低恢复原尺寸与醒目红色。 */
.brand{gap:0}
.tuning-setting select{min-width:190px}
.free-tuner .tuning-setting{display:none!important}
.free-tuner .settings-row{margin-top:0;justify-content:flex-end}
.mic-row{display:block}.mic-check{width:100%}
.meter.low .status-line>strong,.meter.high .status-line>strong{font-size:31px;color:#e58276}
@media(max-width:760px){
  .brand{gap:0}.free-tuner .settings-row{display:flex;align-items:center}.free-tuner .reference-setting{margin-left:auto}.free-tuner .reference-tone{grid-column:auto}
  .meter.low .status-line>strong,.meter.high .status-line>strong{font-size:27px;color:#e58276}
}
@media(max-width:410px){
  .free-tuner .settings-row{display:flex}.meter.low .status-line>strong,.meter.high .status-line>strong{font-size:24px;color:#e58276}
}