:root{font-family:"Source Sans 3",Microsoft YaHei,sans-serif;color:#202522;background:#f4f3ee;font-synthesis:none;--green: #2f6f65;--ink: #202522;--muted: #6d746f;--line: #dcded8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-width:320px;min-height:100vh;background:#f4f3ee;overflow-x:hidden}button,input,textarea{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,textarea:focus-visible,audio:focus-visible{outline:3px solid rgba(47,111,101,.3);outline-offset:3px}.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:70px;padding:0 max(24px,calc((100vw - 1240px)/2));display:flex;align-items:center;gap:42px;background:#fafaf7f0;border-bottom:1px solid #e1e2dd;position:sticky;top:0;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:10px;min-width:190px;color:inherit;text-decoration:none}.brand>span{width:39px;height:39px;display:grid;place-items:center;color:#fff;background:var(--green);font-family:"Noto Serif SC",serif;font-weight:700;font-size:21px}.brand div{display:flex;flex-direction:column;line-height:1.05}.brand strong{font-family:"Noto Serif SC",serif;font-size:18px;letter-spacing:0}.brand small{margin-top:5px;color:#7d827e;font-size:10px;letter-spacing:2px}nav{align-self:stretch;display:flex;gap:8px}nav button{border:0;background:transparent;padding:0 17px;display:flex;align-items:center;gap:7px;color:#6c726e;cursor:pointer;border-bottom:2px solid transparent}nav button.active{color:var(--green);border-bottom-color:var(--green);font-weight:600}.lesson-state{margin-left:auto;color:#606762;font-size:13px;display:flex;align-items:center;gap:8px}.lesson-state span{width:7px;height:7px;background:#4b9d70;border-radius:50%;box-shadow:0 0 0 4px #e2efe7}main{width:min(1240px,calc(100% - 48px));margin:0 auto;flex:1}.song-strip{min-height:154px;display:grid;grid-template-columns:92px minmax(260px,1fr) minmax(250px,420px);gap:22px;align-items:center;border-bottom:1px solid #d9dbd5}.song-art{width:80px;height:96px;position:relative;overflow:hidden;color:#f8f1df;background:#285c55;display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-size:31px;box-shadow:inset 0 0 0 1px #ffffff2e}.song-art:before,.song-art:after{content:"";position:absolute;left:-14px;right:-14px;height:32px;border:1px solid rgba(255,255,255,.22);border-radius:50%}.song-art:before{bottom:7px}.song-art:after{bottom:15px}.song-art span{z-index:1}.song-art i{position:absolute;width:28px;height:16px;border-top:1px solid #e5d7b6;border-radius:50%;top:18px;right:8px;transform:rotate(-18deg)}.eyebrow{color:var(--green);text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:2px}.song-meta h1{font-family:"Noto Serif SC",serif;font-size:27px;margin:7px 0 5px;letter-spacing:0}.song-meta h1 small{font-family:inherit;font-weight:600;color:#848983;font-size:13px;margin-left:8px}.song-meta p{margin:0;color:#777d78;font-size:13px}.notation{height:72px;position:relative;opacity:.6}.staff-lines{position:absolute;top:9px;right:0;bottom:9px;left:0;background:repeating-linear-gradient(to bottom,transparent 0 10px,#9ba19d 10px 11px)}.notes i{position:absolute;left:calc(var(--x) * 1%);top:calc(var(--y) * 1px);font-size:22px;font-style:normal;transform:rotate(-6deg)}.workspace{min-height:565px;display:grid;grid-template-columns:315px 1fr;background:#fbfbf8;margin-top:28px;border:1px solid #dedfd9;box-shadow:0 12px 32px #252f2a0f}.steps-panel{padding:38px 34px;border-right:1px solid #e1e2dc;background:#f0f0eb}.section-label{color:#8a8f8b;font-size:11px;font-weight:700;letter-spacing:2px}.steps-panel h2,.arrange-heading h2{font-family:"Noto Serif SC",serif;font-size:24px;line-height:1.45;margin:12px 0}.steps-panel>p,.arrange-heading p{color:#737a75;font-size:13px;line-height:1.8;margin:0}.steps{margin:34px 0;position:relative;display:grid;gap:25px}.steps:before{content:"";position:absolute;left:14px;top:18px;bottom:18px;border-left:1px dashed #bdc2bd}.steps>div{display:flex;align-items:center;gap:13px;position:relative;color:#959a96}.steps>div>span{flex:0 0 auto;width:29px;height:29px;border:1px solid #c8ccc8;background:#f0f0eb;border-radius:50%;display:grid;place-items:center;font-size:12px;z-index:1}.steps div.current,.steps div.complete{color:#303632}.steps div.current>span{background:var(--green);color:#fff;border-color:var(--green)}.steps div.complete>span{color:var(--green);border-color:var(--green)}.steps div div{display:flex;flex-direction:column}.steps strong{font-size:14px}.steps small{color:#969b97;margin-top:3px;font-size:11px}.privacy-note{display:flex;gap:10px;color:#65706a;background:#fff9;border-left:2px solid #8aa89d;padding:12px;font-size:11px;line-height:1.6}.privacy-note svg{flex:0 0 auto;margin-top:2px}.reference-audio{margin-top:20px;padding-top:15px;border-top:1px solid #d9dcd6}.reference-audio>div{display:flex;gap:9px;align-items:center;color:#68716b}.reference-audio>div span{display:flex;flex-direction:column}.reference-audio strong{font-size:11px}.reference-audio small{color:#959b96;font-size:9px;margin-top:2px}.reference-audio audio{width:100%;height:28px;margin-top:9px}.main-panel{position:relative;min-width:0}.record-stage,.analyzing-stage{min-height:565px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:40px;text-align:center}.wave-idle{width:min(460px,88%);height:74px;display:flex;gap:5px;align-items:center;justify-content:center;opacity:.45;-webkit-mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent);mask-image:linear-gradient(90deg,transparent,black 20%,black 80%,transparent)}.wave-idle i{width:2px;height:var(--h);background:#6e938b}.record-button{width:82px;height:82px;margin-top:-36px;z-index:1;border:8px solid #dce8e3;border-radius:50%;color:#fff;background:var(--green);display:grid;place-items:center;cursor:pointer;box-shadow:0 5px 14px #2f6f6533;transition:transform .2s,box-shadow .2s}.record-button:hover{transform:translateY(-2px);box-shadow:0 9px 24px #2f6f653d}.record-stage h3,.analyzing-stage h3{font-family:"Noto Serif SC",serif;font-size:20px;margin:22px 0 7px}.record-stage p,.analyzing-stage p{color:#888e89;font-size:13px;margin:0}.or{width:min(320px,80%);margin:26px 0 15px;height:1px;background:#e0e2dc;position:relative}.or span{position:absolute;top:-10px;left:50%;background:#fbfbf8;color:#a0a5a1;padding:0 12px;font-size:11px;transform:translate(-50%)}.upload-button,.primary-button,.play-button,.stop-button{border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px}.upload-button{background:transparent;color:var(--green);font-size:13px;padding:8px}.error-message{position:absolute;left:24px;right:24px;bottom:18px;background:#fbebe7;border:1px solid #eacbc3;color:#9b4232;padding:10px 14px;font-size:12px;text-align:center}.recording-stage{background:radial-gradient(circle at 50% 48%,#edf5f1 0,#fbfbf8 47%)}.live-wave{width:min(520px,90%);height:120px;display:flex;align-items:center;justify-content:center;gap:6px}.live-wave i{width:3px;height:28%;background:var(--green);animation:wave 1.3s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes wave{0%{height:12%;opacity:.35}to{height:86%;opacity:.9}}.record-time{font-variant-numeric:tabular-nums;font-size:36px;font-weight:600;margin-top:12px}.recording-label{color:#728079;display:flex;align-items:center;gap:7px;font-size:12px;margin:6px 0 26px}.recording-label i{width:7px;height:7px;background:#c94b3c;border-radius:50%;animation:blink 1s infinite}@keyframes blink{50%{opacity:.25}}.stop-button{background:#252a27;color:#fff;padding:11px 22px}.analyzing-stage svg{color:var(--green);animation:spin 1.2s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.results-stage{padding:28px 30px 24px}.result-summary{display:grid;grid-template-columns:104px 1fr auto;align-items:center;gap:20px;padding-bottom:22px;border-bottom:1px solid #e2e3dd}.result-summary h3{font-family:"Noto Serif SC",serif;font-size:20px;margin:5px 0}.result-summary p{margin:0;color:#707772;line-height:1.6;font-size:12px;max-width:590px}.score-ring{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--ring-color) calc(var(--score) * 1%),#dfe2dc 0);position:relative}.score-ring:after{content:"";position:absolute;top:7px;right:7px;bottom:7px;left:7px;border-radius:50%;background:#fbfbf8}.score-ring div{z-index:1;display:flex;flex-direction:column;align-items:center}.score-ring strong{font-size:26px}.score-ring span{color:#838984;font-size:9px}.icon-button{width:36px;height:36px;border:1px solid #d8dad5;background:transparent;display:grid;place-items:center;color:#69716c;cursor:pointer}.pitch-panel{height:120px;margin:17px 0 14px;position:relative;overflow:hidden;background:#f3f4ef;border-left:3px solid #8baa9f}.pitch-panel .pitch-meta{position:absolute;left:16px;top:12px;display:flex;flex-direction:column;z-index:1}.pitch-panel span{font-size:11px;font-weight:700}.pitch-panel small{color:#969b97;font-size:9px;margin-top:3px}.trace-legend{position:absolute;right:14px;top:12px;display:flex;gap:14px;z-index:1}.trace-legend span{display:flex;align-items:center;gap:6px;color:#767d78;font-size:9px;font-weight:600}.trace-legend span:before{content:"";width:18px;border-top:2px solid}.trace-legend .reference-key:before{border-color:#a4aaa6;border-top-style:dashed}.trace-legend .student-key:before{border-color:#2f7b70}.pitch-chart{width:100%;height:100%}.pitch-chart line{stroke:#d8dbd5;stroke-width:.35}.pitch-chart polyline{fill:none;vector-effect:non-scaling-stroke}.pitch-chart .reference-trace{stroke:#9da5a0;stroke-width:1;stroke-dasharray:4 3;opacity:.9}.pitch-chart .student-trace{stroke:#2f7b70;stroke-width:1.45}.pitch-panel span b{color:var(--green);font-weight:600}.analysis-switcher{display:inline-flex;height:30px;margin:16px 0 -1px;border:1px solid #d8dad5;background:#f2f3ee}.analysis-switcher button{min-width:62px;padding:0 14px;border:0;border-right:1px solid #d8dad5;background:transparent;color:#737a75;font-size:10px;cursor:pointer}.analysis-switcher button:last-child{border-right:0}.analysis-switcher button.active{background:var(--green);color:#fff;font-weight:700}.analysis-switcher+.pitch-panel{margin-top:0}.rhythm-chart{width:100%;height:100%}.rhythm-chart>line{stroke:#d9dcd6;stroke-width:.45}.rhythm-chart .reference-onset{stroke:#9da5a0;stroke-width:1.1;stroke-dasharray:2 1}.rhythm-chart .student-onset{stroke:#2f7b70;stroke-width:1.4}.rhythm-chart text{fill:#888f8a;font-size:4px;font-weight:700}.pitch-panel.mode-metrics{height:145px}.metric-detail-grid{position:absolute;top:42px;right:14px;bottom:12px;left:14px;display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid #dde0da}.metric-detail-grid>div{min-width:0;padding:12px 8px 0;display:flex;flex-direction:column;align-items:center;border-right:1px solid #dde0da}.metric-detail-grid>div:last-child{border-right:0}.metric-detail-grid strong{color:var(--green);font-size:18px;line-height:1}.metric-detail-grid strong small{color:inherit;font-size:9px;margin-left:2px}.metric-detail-grid span{color:#7d847f;font-size:9px;margin-top:8px;text-align:center}.feedback-grid{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e0e1dc}.feedback-item{padding:17px;min-width:0}.feedback-item+.feedback-item{border-left:1px solid #e0e1dc}.feedback-heading{display:flex;gap:9px;align-items:center}.feedback-icon{width:29px;height:29px;color:var(--green);background:#e5efeb;display:grid;place-items:center;font-family:"Noto Serif SC",serif;font-size:11px}.feedback-heading div{flex:1;display:flex;justify-content:space-between;align-items:baseline}.feedback-heading span{font-weight:700;font-size:13px}.feedback-heading strong{color:var(--green);font-size:18px}.feedback-item p{height:40px;color:#606863;font-size:11px;line-height:1.65;margin:12px 0}.advice{min-height:57px;display:flex;gap:7px;background:#f2f3ee;color:#737a75;padding:9px;font-size:10px;line-height:1.5}.advice svg{color:#b18137;flex:0 0 auto}.audio-comparison{margin-top:15px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.audio-comparison>div{min-width:0;padding:10px 12px;background:#f0f1ec;border:1px solid #dfe1db}.audio-comparison span{display:flex;align-items:center;gap:6px;color:#59635d;font-size:10px;font-weight:700;margin-bottom:7px}.audio-comparison audio{width:100%;height:32px;display:block}.result-actions{margin-top:12px;display:flex;justify-content:space-between;align-items:center;gap:15px}.result-actions>small{color:#969b97;font-size:9px}.primary-button{padding:11px 18px;background:var(--green);color:#fff;font-size:12px}.arrange-workspace{padding:42px 0 50px}.arrange-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:26px}.arrange-heading h2{margin:7px 0 5px}.mode-tag{display:flex;align-items:center;gap:8px;color:var(--green);border:1px solid #b8cbc4;padding:9px 13px;font-size:12px}.arrange-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(350px,.85fr);background:#fbfbf8;border:1px solid #dbddd7;min-height:520px}.controls-panel{padding:31px;border-right:1px solid #e0e1dc}.api-parameters>.control-block+.control-block{margin-top:22px}.api-field>label,.api-range label{color:#656d68;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}.api-field label span,.api-range label span{letter-spacing:1px}.api-field label code,.api-range label code{color:#929994;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-size:9px;font-weight:500;letter-spacing:0}.api-field>input,.api-field>textarea{width:100%;border:1px solid #cfd3ce;background:#fff;color:#303833;font-size:12px}.api-field>input{height:41px;padding:0 12px}.api-field>textarea{min-height:72px;padding:10px 12px;line-height:1.6;resize:vertical}.segmented-control{height:43px;display:grid;grid-template-columns:repeat(2,1fr);border:1px solid #cfd3ce;background:#f3f4ef}.segmented-control button{min-width:0;border:0;border-right:1px solid #cfd3ce;background:transparent;color:#69716c;display:flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;font-size:11px}.segmented-control button:last-child{border-right:0}.segmented-control button.selected{background:#e5efeb;color:var(--green);font-weight:700;box-shadow:inset 0 -2px var(--green)}.parameter-sliders{margin-top:24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.api-range>div{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.api-range label{min-width:0;align-items:flex-start;flex-direction:column;gap:3px}.api-range output{color:var(--green);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}.api-range>input{width:100%;accent-color:var(--green)}.generate-button{width:100%;height:43px;margin-top:27px;border:0;background:#273f3a;color:#fff;display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;font-size:12px;font-weight:700}.api-parameters :disabled{cursor:wait;opacity:.65}.spin{animation:spin 1.1s linear infinite}.generation-panel{min-width:0;padding:28px 30px;display:flex;flex-direction:column;background:#eff0eb;color:#626963}.generation-panel-top{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:18px;border-bottom:1px solid #d8dad4}.generation-panel-top>div>span{font-size:10px;color:#8b918d}.generation-panel-top h3{font-family:"Noto Serif SC",serif;margin:5px 0 0;font-size:17px}.generation-panel-top>svg{color:#68736e}.generation-state{min-height:390px;padding:40px 20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.generation-state-icon{width:72px;height:72px;margin-bottom:20px;border:1px solid #9bb0a9;border-radius:50%;color:var(--green);background:#ffffff8c;display:grid;place-items:center;font-size:24px;font-weight:700}.generation-panel.loading .generation-state-icon{color:#53766d;border-style:dashed}.generation-panel.error .generation-state-icon{color:#a24e3b;border-color:#d3a79d}.generation-state strong{color:#34443f;font-family:"Noto Serif SC",serif;font-size:16px}.generation-state p{max-width:310px;margin:8px 0 0;color:#858d88;font-size:11px;line-height:1.7;overflow-wrap:anywhere}.generation-result{padding-top:22px}.generation-success{display:flex;align-items:flex-start;gap:10px;padding:12px;border:1px solid #9ab7ae;background:#f7faf8;color:#285f55}.generation-success>span{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%}.generation-success strong{display:block;font-size:12px}.generation-success p{margin:3px 0 0;color:#527169;font-size:10px;line-height:1.5}.plan-result-meta{margin-top:12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.plan-result-meta span{min-width:0;padding:8px 9px;border-left:2px solid var(--green);background:#fff9;color:#40544e;font-size:10px;overflow-wrap:anywhere}.plan-result-meta b{display:block;margin-bottom:3px;color:#78847f;font-size:9px;font-weight:500}.result-style-tags{margin-top:7px;padding:9px 10px;border-left:2px solid var(--green);background:#fff9;color:#40544e;display:grid;gap:3px;font-size:10px;overflow-wrap:anywhere}.result-style-tags b{color:#78847f;font-size:9px;font-weight:500}.suno-result-list{margin-top:18px;display:grid;gap:10px}.suno-result{min-width:0;padding:12px;border:1px solid #d9ddd8;background:#ffffffad;display:grid;gap:10px}.suno-result-heading{min-width:0;display:flex;align-items:center;gap:10px}.suno-result-heading>span{width:28px;height:28px;flex:0 0 28px;display:grid;place-items:center;color:var(--green);background:#e4eeea;font-size:9px;font-weight:700}.suno-result-heading>div{min-width:0}.suno-result strong{display:block;color:#2d5048;font-size:11px}.suno-result small{display:block;margin-top:2px;color:#74807a;font-size:9px;overflow-wrap:anywhere}.suno-result audio{width:100%;height:34px;display:block}.song-processing{min-height:34px;color:#74807a;background:#ffffff73;display:flex;align-items:center;justify-content:center;gap:7px;font-size:10px}.arrange-error{position:static;margin-top:12px}.arrange-workspace .error-message{position:static}footer{min-height:52px;padding:0 max(24px,calc((100vw - 1240px)/2));display:flex;justify-content:space-between;align-items:center;border-top:1px solid #dcddd8;color:#929793;font-size:10px}@media(max-width:900px){.topbar{gap:15px}.brand{min-width:auto}.brand div{display:none}.song-strip{grid-template-columns:76px 1fr}.notation{display:none}.workspace{grid-template-columns:260px 1fr}.steps-panel{padding:28px 23px}.steps-panel h2{font-size:21px}.feedback-grid{grid-template-columns:1fr}.feedback-item+.feedback-item{border-left:0;border-top:1px solid #e0e1dc}.feedback-item p{height:auto}.results-stage{padding:22px}.arrange-grid{grid-template-columns:1fr}.controls-panel{border-right:0;border-bottom:1px solid #e0e1dc}.generation-panel{min-height:480px}}@media(max-width:650px){.topbar{height:62px;padding:0 12px;gap:8px}.brand{flex:0 0 auto}.brand>span{width:34px;height:34px;font-size:18px}.lesson-state{display:none}nav{margin-left:auto;gap:0;min-width:0}nav button{padding:0 8px;font-size:11px;white-space:nowrap}nav button svg{display:block;width:14px}main{width:calc(100% - 24px)}.song-strip{min-height:125px;grid-template-columns:60px 1fr;gap:14px}.song-art{width:58px;height:75px}.song-meta h1{font-size:21px}.song-meta p{font-size:10px}.workspace{margin-top:16px;display:block}.steps-panel{border-right:0;border-bottom:1px solid #e1e2dc;padding:22px}.steps-panel>p,.privacy-note{display:none}.steps-panel h2{margin-bottom:18px;font-size:19px}.steps{margin:0;display:flex;justify-content:space-between;gap:4px}.steps:before{left:30px;right:30px;top:14px;bottom:auto;border-top:1px dashed #bdc2bd;border-left:0}.steps>div{flex:1 1 33%;min-width:0;flex-direction:column;text-align:center;gap:5px}.steps>div>div{min-width:0}.steps div div small{display:none}.steps strong{font-size:10px;white-space:nowrap}.record-stage,.analyzing-stage{min-height:410px;padding:28px 18px}.record-stage p,.analyzing-stage p{max-width:100%;line-height:1.65;overflow-wrap:anywhere}.results-stage{padding:18px 14px}.result-summary{grid-template-columns:75px minmax(0,1fr) auto;gap:12px}.score-ring{width:70px;height:70px}.score-ring:after{top:5px;right:5px;bottom:5px;left:5px}.score-ring strong{font-size:21px}.result-summary h3{font-size:15px}.result-summary p{font-size:10px}.pitch-panel{height:118px}.trace-legend{top:auto;right:10px;bottom:8px}.audio-comparison{grid-template-columns:1fr}.result-actions{flex-direction:column;align-items:stretch}.result-actions>small{text-align:center}.primary-button{width:100%;max-width:none}.error-message{left:10px;right:10px}.reference-audio{margin-top:16px;display:flex;align-items:center;gap:10px}.reference-audio>div{min-width:115px}.reference-audio audio{margin:0;min-width:0}.analysis-switcher{width:100%}.analysis-switcher button{flex:1;min-width:0;padding:0 6px}.pitch-panel.mode-metrics{height:215px}.metric-detail-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr)}.metric-detail-grid>div:nth-child(3){border-right:0}.metric-detail-grid>div:nth-child(-n+3){border-bottom:1px solid #dde0da}.arrange-workspace{padding:27px 0}.arrange-heading{align-items:start}.arrange-heading h2{font-size:21px}.mode-tag{display:none}.arrange-grid{display:block}.controls-panel{padding:21px 16px}.parameter-sliders{grid-template-columns:1fr;gap:18px}.generation-panel{padding:24px 20px;min-height:440px}.generation-state{min-height:320px}.plan-result-meta{grid-template-columns:repeat(2,minmax(0,1fr))}footer{padding:0 16px}}