:root{color-scheme:light;--bg:#E7E4DF;--panel:#F5F2EB;--panel-2:#FBF9F4;--ink:#2E2A24;--edge:#33302A;--edge-w:2px;--radius:14px;--shadow:0 3px 0 rgba(51,48,42,.20);--muted:#6E675C;--line:#C7BFB0;--accent:#BC5428;--accent-ink:#8E3C18;--soft:#F1E4D8;--slate:#4E5566;--teal:#1E6B5A;--red:#B3382F;--blue:#2A5C9A;--amber:#8A6410;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;font-size:15px;color:var(--ink)}
*{box-sizing:border-box}body{margin:0;background:var(--bg)}button,input,select{font:inherit}button{cursor:pointer;transition:background .18s,color .18s,transform .18s}button:disabled{cursor:wait;opacity:.55}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button:active:not(:disabled){transform:translateY(1px)}[hidden]{display:none!important}h1,h2,h3,p{margin:0}h1{font-size:2rem;line-height:1.5;letter-spacing:-.025em;font-weight:650;text-wrap:balance}h2{font-size:1.2rem;font-weight:650}h3{font-size:.93rem}p{line-height:1.8}a{color:inherit;text-decoration:none}.muted{color:var(--muted);font-size:.93rem}.sidebar{position:fixed;inset:0 auto 0 0;width:228px;background:#fff;border-right:1px solid var(--line);padding:36px 22px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;font-size:1.35rem;font-weight:700;letter-spacing:-.02em}.brand small{display:block;font-size:.75rem;font-weight:400;letter-spacing:.1em;margin-top:4px;color:var(--muted)}.brandmark{background:var(--accent);color:#fff;width:40px;height:44px;border-radius:10px;display:grid;place-items:center;font-size:2rem}.sidebar nav{display:grid;gap:8px;margin-top:58px}.nav{border:0;background:transparent;color:var(--muted);padding:14px 16px;text-align:left;border-radius:8px}.nav:hover{background:var(--bg)}.nav.active{color:var(--accent);background:var(--soft);font-weight:600}.side-note{margin-top:auto;font-size:.78rem;color:var(--muted);line-height:1.8;padding:0 12px}.side-note small{display:block;margin-top:20px;line-height:2}.status-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#28734d;margin-right:4px}.version{display:block;font-size:.7rem;margin-top:18px}main{margin-left:228px;padding:0 48px;max-width:1600px}.topbar{height:84px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)}.badge,.tag{display:inline-flex;align-items:center;padding:5px 10px;border-radius:5px;font-size:.75rem;background:var(--soft);color:var(--accent)}.badge{background:transparent;border:1px solid var(--line);color:var(--muted)}.page{min-height:calc(100vh - 163px);padding:40px 0}.page-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:30px}.eyeline{color:var(--accent);font-size:.82rem;margin-bottom:8px}.page-heading .muted{margin-top:8px}.song-symbol{font-size:3.3rem;color:var(--accent);margin-right:24px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 288px;gap:24px;align-items:start}.score-sheet{background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.sheet-heading{padding:28px 30px 18px;display:flex;justify-content:space-between;align-items:center;gap:15px}.sheet-heading h2{font-size:1.8rem;margin-top:14px}.sheet-heading p{font-size:.8rem;margin-top:5px}.song-meta{display:flex;gap:24px;padding:0 30px 22px;border-bottom:1px solid var(--line);font-size:.8rem;color:var(--muted)}.score{padding:24px 30px 18px;display:grid;gap:8px}.phrase{display:grid;grid-template-columns:24px repeat(7,minmax(0,1fr));align-items:center;min-height:48px;gap:8px}.phrase-no{font-size:.68rem;color:var(--muted)}.note{font-family:Georgia,"Times New Roman",serif;font-size:1.6rem;text-align:center;padding:6px 0}.note.long::after{content:' −';color:var(--muted);font-size:1.1rem}.sheet-footer{border-top:1px solid var(--line);padding:17px 30px;display:flex;justify-content:space-between;gap:10px;font-size:.72rem;color:var(--muted)}.setup{padding:6px 0}.setup>.muted{margin:12px 0 22px}label{display:block;font-size:.8rem;font-weight:600;margin-bottom:9px}select,input:not([type=file]){height:43px;width:100%;border:1px solid #cdd0dd;border-radius:7px;background:#fff;color:var(--ink);padding:0 10px}input[type=file]{width:100%;font-size:.8rem}input::placeholder{color:var(--muted)}.primary,.secondary{border-radius:7px;min-height:42px;padding:10px 16px;font-weight:550;font-size:.85rem;white-space:normal}.primary{border:0;background:var(--accent);color:#fff}.primary:hover{background:#514096}.secondary{border:1px solid #cdd0dd;background:#fff;color:var(--ink)}.secondary:hover{background:var(--soft);border-color:var(--accent)}.full{width:100%;margin-top:12px}#start{margin-top:24px;min-height:48px}.level-label{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);margin-top:18px}meter{width:100%;height:10px;margin-top:5px}meter::-webkit-meter-bar{background:#e1e5ed;border:0}meter::-webkit-meter-optimum-value{background:var(--teal)}.calibration{border-top:1px solid var(--line);margin-top:22px;padding-top:20px}.calibration p{font-size:.78rem;color:var(--muted);margin-top:8px}.footnote{font-size:.72rem;color:var(--muted);margin-top:12px;line-height:1.8}.how{display:flex;gap:48px;margin-top:30px;padding:22px 0;border-top:1px solid var(--line)}.how div{display:flex;flex-direction:column;gap:7px}.how b{font-size:.85rem}.how span{font-size:.77rem;color:var(--muted)}footer{display:flex;justify-content:space-between;gap:16px;color:var(--muted);font-size:.7rem;padding:24px 0;border-top:1px solid var(--line)}.notice{background:#fff4e4;color:#704615;border:1px solid #dbc29a;padding:14px 18px;border-radius:8px;margin-top:18px;font-size:.9rem;line-height:1.7}.singing{text-align:center;padding:55px 20px}.singing h1{margin:20px 0 6px}.beats{display:flex;justify-content:center;gap:18px;margin:44px 0}.beats i{width:16px;height:16px;background:#dad5ea;border-radius:50%}.beats i.active{background:var(--accent);transform:scale(1.35)}.live-phrase{display:flex;gap:20px;justify-content:center;min-height:90px;align-items:center}.live-phrase span{font-family:Georgia,serif;font-size:3rem;padding:10px 15px;border-radius:8px}.live-phrase span.active{color:var(--accent);background:var(--soft)}.sing-progress{display:flex;align-items:center;gap:16px;max-width:550px;margin:40px auto 20px;font-variant-numeric:tabular-nums;font-size:.85rem;color:var(--muted)}progress{width:100%;height:5px;accent-color:var(--accent)}.singing>button{margin-top:28px}.analyzing{padding:60px 0;max-width:650px;margin:auto}.analyzing h1{margin:20px 0 12px}.skeleton{height:170px;background:#e5e2ee;margin-top:35px;border-radius:8px;animation:breathe 1.5s ease-in-out infinite alternate}.skeleton.short{width:70%;height:20px;margin-top:15px}@keyframes breathe{to{opacity:.4}}.report-title{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:26px}.report-title h1{margin:12px 0}.metrics{display:flex;border-block:1px solid var(--line);margin-bottom:28px;padding:22px 0}.metric{flex:1;padding:0 20px;border-right:1px solid var(--line)}.metric:first-child{padding-left:0}.metric:last-child{border:0}.metric dt{font-size:.8rem;color:var(--muted)}.metric dd{margin:8px 0 5px;font-size:1.7rem;font-weight:650;font-variant-numeric:tabular-nums}.metric small{font-size:.73rem;color:var(--muted)}.chart-panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px}.chart-heading{display:flex;justify-content:space-between;gap:16px;align-items:center}.legend{display:flex;gap:15px;flex-wrap:wrap;font-size:.72rem;color:var(--muted);margin:14px 0}.legend span::before{content:'';display:inline-block;width:12px;height:3px;background:var(--teal);margin-right:6px;vertical-align:middle}.legend .reference::before{background:#9b9caf}.legend .high::before{background:var(--red)}.legend .low::before{background:var(--blue)}.legend .unknown::before{background:var(--amber)}canvas.report-chart{width:100%;height:300px;display:block;cursor:crosshair}audio{width:100%;height:38px;margin-top:16px}.notes-heading{display:flex;justify-content:space-between;align-items:center;margin:28px 0 12px}.filter{display:flex;align-items:center;gap:8px;font-weight:400;margin:0;font-size:.8rem}.filter input{width:auto;height:auto}.note-table{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:auto}.note-row{display:grid;grid-template-columns:55px 55px 1fr 1fr 65px;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line);align-items:center;font-size:.8rem}.note-row:last-child{border:0}.note-row.head{background:#f7f7fa;color:var(--muted);font-size:.73rem}.note-row button{border:0;background:var(--soft);color:var(--accent);padding:7px;border-radius:5px}.note-row.selected{background:var(--soft)}.bad{color:var(--red)}.low{color:var(--blue)}.unknown{color:var(--amber)}.good{color:#28734d}.record{display:flex;justify-content:space-between;gap:20px;align-items:center;background:#fff;border-bottom:1px solid var(--line);padding:22px}.record p{font-size:.8rem;color:var(--muted);margin-top:5px}.record h3{margin-bottom:6px}.history-section{margin:28px 0 12px}.empty{text-align:center;padding:70px 22px;color:var(--muted)}.empty>span{display:block;font-size:2.6rem;color:var(--accent);margin-bottom:20px}.empty h2{color:var(--ink);margin-bottom:12px}.empty p{font-size:.85rem}.tools-layout{display:grid;grid-template-columns:285px minmax(0,1fr);gap:32px}.tool-form{background:#fff;border:1px solid var(--line);border-radius:10px;padding:24px}.tool-form label:not(:first-child),#engineField label{margin-top:20px}.tool-result{min-width:0}.tool-summary{background:#fff;border:1px solid var(--line);border-radius:10px;padding:26px}.tool-summary p{margin:12px 0}.key-values{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:20px}.key-values div{padding:12px 0;border-bottom:1px solid var(--line)}.key-values small{display:block;color:var(--muted);margin-bottom:6px}.key-values b{font-size:1.2rem}details{margin-top:18px;color:var(--muted);font-size:.8rem}pre{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.7;font-size:.75rem}summary{cursor:pointer}.tool-summary h3{margin-top:22px}
@media(min-width:1500px){main{padding-inline:64px}.score{padding-block:35px}.phrase{min-height:54px}}
@media(max-width:1150px){.sidebar{width:190px;padding-inline:16px}main{margin-left:190px;padding-inline:28px}.workspace{grid-template-columns:minmax(0,1fr) 250px;gap:20px}.sheet-heading{padding:24px 20px 18px}.score{padding:20px 15px}.song-meta{padding-inline:20px;gap:15px}.sheet-footer{padding:16px 20px}.sheet-heading .secondary{font-size:.75rem}.how{gap:24px}h1{font-size:1.7rem}}
@media(max-width:900px){.sidebar{position:static;width:auto;flex-direction:row;align-items:center;padding:18px 22px;border-right:0;border-bottom:1px solid var(--line);gap:20px}.sidebar nav{display:flex;margin:0 0 0 auto;gap:5px}.nav{padding:11px;font-size:.8rem}.side-note{display:none}main{margin:0;padding-inline:24px}.topbar{height:60px}.page{padding-top:28px}.workspace{grid-template-columns:minmax(0,1fr) 250px}.tools-layout{grid-template-columns:250px minmax(0,1fr)}}
@media(max-width:650px){.sidebar{padding:16px;flex-wrap:wrap}.brand{font-size:1.15rem}.brand small{font-size:.65rem}.brandmark{width:33px;height:36px}.sidebar nav{width:100%;justify-content:space-between;margin:0}.nav{flex:1;text-align:center}.badge{display:none}main{padding-inline:18px}.workspace,.tools-layout{grid-template-columns:1fr}.setup{background:#fff;border:1px solid var(--line);border-radius:12px;padding:24px}.page-heading{margin-bottom:22px}h1{font-size:1.45rem}.song-symbol{font-size:2.4rem;margin-right:0}.song-meta{gap:14px;font-size:.7rem}.sheet-heading h2{font-size:1.5rem}.note{font-size:1.35rem}.note.long::after{font-size:.85rem}.phrase{gap:2px}.sheet-footer{font-size:.66rem;flex-wrap:wrap}.how{gap:18px;justify-content:space-between}.how span{font-size:.7rem}.how b{font-size:.8rem}footer{flex-direction:column;font-size:.65rem}.live-phrase{gap:4px}.live-phrase span{font-size:2rem;padding:9px}.singing{padding:30px 0}.metric{padding-inline:10px}.metric dd{font-size:1.35rem}.metric dt,.metric small{font-size:.65rem}.chart-panel{padding:15px}.report-title{flex-wrap:wrap}.note-row{grid-template-columns:30px 30px 1fr 1fr 45px;gap:8px;padding:12px 10px;font-size:.7rem}.record{padding:18px;flex-wrap:wrap}.chart-heading{align-items:start}.chart-heading h2{font-size:1rem}.legend{gap:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.setup{position:sticky;top:24px}
/* ---- 报告页：错音标注 + 老师评语 ---- */
.sheet-panel{margin:22px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px 0 12px}
.sheet-panel .chart-heading{padding:0 24px}
.comment-panel{margin:22px 0;background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px 26px}
.comment-panel h2{margin-bottom:4px}
.cmt-headline{font-weight:650;color:var(--accent);margin-bottom:6px}
.cmt-sec{margin-top:16px}
.cmt-sec h3{font-size:.85rem;color:var(--muted);margin-bottom:6px;font-weight:650}
.cmt-sec ul{margin:0;padding-left:20px}
.cmt-sec li{line-height:1.9}
.cmt-good li::marker{color:var(--teal)}
.cmt-practice{background:var(--soft);border-radius:10px;padding:12px 18px}
@media(max-width:650px){.comment-panel{padding:18px 16px}.sheet-panel .chart-heading{padding:0 14px}}
.metronome-switch{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:.88rem;cursor:pointer}
.metronome-switch input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer}
.score-unit{font-size:.85rem;color:var(--muted);font-weight:400;margin-left:4px}.rhythm-detail{font-size:.75rem;color:var(--muted);margin-top:9px}.metric details{font-size:.75rem;line-height:1.8}.metric details p{margin-top:8px}.metric .badge{font-size:.65rem;padding:1px 5px}
@media(max-width:650px){.setup{position:static}}
.song-picker{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-bottom:24px}.song-picker>div{width:340px;max-width:100%}.song-picker p{flex:1;min-width:200px;font-size:.82rem}.song-picker select:disabled{opacity:.65}#start:disabled{cursor:not-allowed}
/* ==== v0.0.119 皮肤：暖米底 + 焦橙 + 粗描边（配色取自参考图「音通通 Intona」）====
   只改配色 / 描边 / 圆角 / 阴影；文字与功能不动；**谱面规则（.score-sheet .sheet-heading
   .score .phrase .note .live-phrase .jianpu …）与 score.css 一行未改**。 */
body{background:var(--bg);color:var(--ink)}
.sidebar{background:var(--panel)}
@media(min-width:901px){.sidebar{border-right:var(--edge-w) solid var(--edge)}}
@media(max-width:900px){.sidebar{border-right:0;border-bottom:var(--edge-w) solid var(--edge)}}
.brandmark{background:var(--accent);color:#FFF7EF;border:var(--edge-w) solid var(--edge);border-radius:12px}
.nav{border-radius:10px;color:var(--muted)}
.nav:hover{background:#EFEAE0;color:var(--ink)}
.nav.active{background:var(--ink);color:#FBF6EE;font-weight:650}
.topbar{margin:16px 0 4px;padding:0 20px;background:var(--slate);color:#EDE8DE;border:var(--edge-w) solid var(--edge);border-radius:var(--radius)}
@media(min-width:901px){.topbar{height:64px}}
.topbar .badge{background:transparent;border:1.5px solid #A9B0BE;color:#E7E2D8}
.eyeline{color:var(--accent-ink);font-weight:600;letter-spacing:.06em}
h1{font-weight:800;letter-spacing:-.01em}
h2{font-weight:700}
.tag{background:var(--soft);color:var(--accent-ink);border:1.5px solid var(--edge);border-radius:999px}
.badge{background:transparent;border:1.5px solid var(--edge);color:var(--muted)}
.primary,.secondary{border-radius:10px;border:var(--edge-w) solid var(--edge);box-shadow:var(--shadow)}
.primary{background:var(--accent);color:#FFF8F1}
.primary:hover{background:var(--accent-ink)}
.secondary{background:var(--panel-2);color:var(--ink)}
.secondary:hover{background:var(--soft);border-color:var(--edge)}
button:active:not(:disabled){transform:translateY(2px)}
select,input:not([type=file]){background:var(--panel-2);border:var(--edge-w) solid var(--edge);border-radius:10px;color:var(--ink)}
input::placeholder{color:#8B8478}
.chart-panel,.comment-panel,.sheet-panel,.tool-form,.tool-summary,.note-table{background:var(--panel);border:var(--edge-w) solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow)}
.note-row{border-bottom:1px solid #DCD5C8}
.note-row.head{background:#EFEAE0;color:var(--muted);border-bottom:1px solid var(--edge)}
.note-row:last-child{border:0}
.record{background:var(--panel);border:var(--edge-w) solid var(--edge);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:12px}
.history-section{letter-spacing:.02em}
.empty{background:var(--panel);border:var(--edge-w) dashed var(--edge);border-radius:var(--radius)}
.metrics{background:var(--panel);border:var(--edge-w) solid var(--edge);border-radius:var(--radius);padding:18px 14px;box-shadow:var(--shadow)}
.metric{border-right:1px dashed var(--edge)}
.metric dd{color:var(--accent);font-weight:750}
.notice{background:#FBEEDA;color:#6B4413;border:var(--edge-w) solid var(--edge);border-radius:12px}
.skeleton{background:#DED8CB}
.beats i{background:#D9D2C4}
meter::-webkit-meter-bar{background:#DDD6C8}
.cmt-practice{border:1.5px solid var(--edge)}
.cmt-good li::marker{color:var(--teal)}
.key-values div{border-bottom:1px solid #DCD5C8}
.side-note .version{letter-spacing:.06em}
@media(max-width:650px){.metrics{padding:14px 8px}.setup{background:var(--panel);border:var(--edge-w) solid var(--edge)}}
/* ---- v0.0.120「试听/校准音量」滑块：只影响试听旋律与校准节拍 ---- */
.metronome-switch input[type=range]{width:auto;flex:1;min-width:90px;height:20px;margin:0;padding:0;border:0;background:transparent;accent-color:var(--accent)}
.metronome-switch output{font-variant-numeric:tabular-nums;font-size:.78rem;color:var(--muted);min-width:34px;text-align:right}
/* ---- v0.0.122 登录页收尾：音乐标志 + 品牌名放大 + 右侧唱片贴图（只加视觉，不动任何文字与程序）----
   注：下面这些是"追加块"，媒体查询写在基础规则**之后**，避免被同优先级的后置规则顶掉。 */
.brandmark{width:46px;height:50px;border-radius:14px}
.brandmark svg{display:block}
.brand{font-size:1.45rem;gap:11px}
.brand small{font-size:.85rem}
.gate-grid{display:grid;grid-template-columns:minmax(0,620px) minmax(0,1fr);gap:36px;align-items:center}
.gate-main{min-width:0}
.gate-art img{display:block;width:100%;max-width:420px;height:auto;margin-left:auto;border:var(--edge-w) solid var(--edge);border-radius:18px;box-shadow:var(--shadow)}
@media(min-width:1151px){.sidebar{width:250px}main{margin-left:250px}}
@media(max-width:1150px){.brandmark{width:38px;height:42px}.brand{font-size:1.2rem;gap:9px}.brand small{font-size:.72rem}.gate-grid{grid-template-columns:1fr;gap:0}.gate-art{display:none}}
@media(max-width:650px){.brandmark{width:36px;height:40px;border-radius:12px}.brand{font-size:1.18rem}.brand small{font-size:.7rem}}