:root{--blue:#4E8FA8;--rose:#A85E6C;--teal:#3D9189;--ink:#130E0C;--ink2:#4A3830;--muted:#746A66;--bg:#FDFAF8;--pale:#F5F1EF;--line:#E9E0DA;--white:#fff;--grad:linear-gradient(115deg,var(--blue),var(--rose) 56%,var(--teal))}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;min-width:320px;font-family:'Montserrat',Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}
button,select,input{font:inherit}button{cursor:pointer}button:disabled{opacity:.4;cursor:not-allowed}a{color:inherit}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.site-header{background:rgba(253,250,248,.97);border-bottom:1px solid var(--line);position:relative}.site-header::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--grad)}
.topbar{max-width:1300px;margin:auto;min-height:73px;padding:14px 42px;display:flex;align-items:center;gap:25px}
.logo{font-family:'DM Serif Display',Georgia,serif;font-size:1.43rem;text-decoration:none;line-height:1;white-space:nowrap;letter-spacing:-.3px}.logo em{font-weight:400;font-style:italic;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.nav-descriptor{border-left:1px solid var(--line);padding-left:24px;font-size:.68rem;font-weight:700;color:var(--muted);letter-spacing:.06em}.back-link{margin-left:auto;text-decoration:none;font-size:.75rem;font-weight:600;color:var(--ink2)}.back-link:hover{color:var(--blue)}
main{max-width:1300px;margin:auto;padding:0 42px 75px}.intro{padding:54px 0 35px}.eyebrow{margin:0 0 14px;color:var(--teal);font-size:.66rem;letter-spacing:.12em;font-weight:700}h1,h2,h3{font-family:'Montserrat',Arial,sans-serif}h1{font-size:clamp(2.25rem,4.3vw,3.95rem);line-height:1.12;letter-spacing:-.055em;font-weight:700;margin:0 0 17px}h1 em{font-style:normal;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.intro-sub{margin:0;color:var(--ink2);font-size:.86rem;max-width:665px;line-height:1.85}
.workspace{display:grid;grid-template-columns:minmax(250px,300px) minmax(0,1fr);gap:23px;align-items:start}
.settings{border-top:2px solid var(--teal);padding:23px 10px 16px 0}.settings-heading{margin-bottom:20px}.settings-heading h2{font-size:1.06rem;font-weight:700;letter-spacing:-.025em;margin:0 0 4px}.settings-heading p{margin:0;color:var(--muted);font-size:.72rem}.settings-heading.secondary{margin:0 0 14px}.selector-stack{display:flex;flex-direction:column;gap:8px}.selector-stack>label:not(.toggle-line){color:var(--muted);font-weight:700;font-size:.66rem;margin:8px 0 0}
select{width:100%;min-height:48px;border:1px solid #D9D3CF;background:white;color:var(--ink);font-weight:600;font-size:.79rem;border-radius:8px;padding:11px 12px}.course-note{color:var(--muted);font-size:.69rem;line-height:1.7;margin:5px 0 10px;min-height:14px}
.toggle-line{display:flex;align-items:flex-start;gap:10px;font-size:.76rem;color:var(--ink2);cursor:pointer}.toggle-line input{accent-color:var(--teal);width:16px;height:16px;margin:2px 0 0;flex:none}.model-option b{display:block;color:var(--ink);font-size:.78rem}.model-option small{display:block;font-size:.67rem;margin-top:3px;line-height:1.6;color:var(--muted)}.model-note{font-size:.69rem;color:var(--muted);margin:9px 0 7px;line-height:1.7}.model-state{font-size:.68rem;font-weight:600;color:var(--teal);min-height:10px;overflow-wrap:anywhere}.settings-divider{height:1px;background:var(--line);margin:22px 0}
.quiet-button{background:transparent;border:0;padding:9px 0;text-align:left;font-weight:700;font-size:.72rem;color:var(--blue)}.quiet-button:hover{text-decoration:underline}.calib-info{color:var(--muted);font-size:.67rem;margin:6px 0;line-height:1.6}.calib{border-top:1px solid var(--line);margin-top:8px;padding-top:14px}.calib p{font-size:.75rem;margin:0 0 8px}.calib-pinyin{font-size:1.45rem;color:var(--rose);font-weight:700;white-space:nowrap;margin-bottom:10px}.calib-desc{color:var(--muted);font-size:.67rem!important}.calib-actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.hidden{display:none!important}
.practice{background:white;border:1px solid var(--line);border-radius:12px;padding:25px clamp(18px,3vw,38px) 27px;min-width:0;box-shadow:0 12px 35px rgba(19,14,12,.025)}.practice-top{display:flex;justify-content:space-between;align-items:center;gap:20px;border-bottom:1px solid var(--line);padding-bottom:15px}.practice-caption{font-size:.61rem;font-weight:700;letter-spacing:.12em;color:var(--teal)}.nav{display:flex;align-items:center;gap:12px;font-size:.71rem;font-weight:700;color:var(--muted)}.nav-btn{border:1px solid var(--line);border-radius:8px;background:var(--bg);width:34px;height:32px;font-size:1.05rem;color:var(--ink);line-height:1}.nav-btn:hover:not(:disabled){background:#EDF5F7}
.word-stage{text-align:center;padding:35px 0 26px}.hz{font-family:'Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;font-size:clamp(3.7rem,7vw,5.8rem);line-height:1.3;font-weight:500;overflow-wrap:anywhere}.py{color:var(--rose);font-size:1.35rem;font-weight:600;margin:0 0 2px}.uk{color:var(--ink2);font-size:.84rem;margin-top:6px}.sandhi{font-size:.72rem;color:#7B6C45;line-height:1.7;margin-top:10px;min-height:14px}.sandhi:empty{display:none}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;text-align:center;min-height:44px;padding:10px 16px;border-radius:8px;border:1px solid transparent;text-decoration:none;font-size:.75rem;font-weight:700;white-space:nowrap;transition:background .15s,transform .15s}.btn:hover:not(:disabled){transform:translateY(-1px)}.btn-primary{background:var(--ink);border-color:var(--ink);color:white}.btn-primary:hover{background:#39302E}.btn-outline{background:#fff;border-color:#AFCFD7;color:#286781}.btn-outline:hover{background:#EBF5F8}.btn-subtle{background:var(--pale);border-color:var(--pale);color:var(--ink2)}.btn-text{background:transparent;color:var(--ink2)}.rec.on{background:var(--rose);border-color:var(--rose)}
.record-hint{font-size:.66rem;color:var(--muted);text-align:center;margin:13px 0 9px}.status{text-align:center;font-size:.72rem;color:var(--teal);min-height:20px;margin:8px 0;line-height:1.65;overflow-wrap:anywhere}.tone-results{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin:11px 0 4px}.syl{min-width:105px;max-width:100%;flex:1 1 110px;text-align:left;padding:12px;background:var(--bg);border-top:3px solid #DDD3CD;border-radius:6px;font-size:.7rem}.syl .s{font-size:1rem;font-weight:700;margin-bottom:3px}.syl .m{font-size:.69rem;color:var(--ink2);line-height:1.6}.syl.ok{border-top-color:var(--teal);background:#F1F9F6}.syl.bad{border-top-color:var(--rose);background:#FFF2F3}.syl.unsure{border-top-color:#C29A53;background:#FBF7EE}.syl.neutral,.syl.nodata{border-top-color:#B7B0AB}.syl small{font-size:.67rem}
.sound-results{margin:10px 0}.snd{font-size:.73rem;line-height:1.6;padding:10px 13px;border-left:3px solid var(--blue);background:#F0F7F9;border-radius:2px}.snd+.snd{margin-top:7px}.snd.bad{border-color:var(--rose);background:#FFF2F3}.snd.ok{border-color:var(--teal);background:#F1F9F6}.snd.unsure{border-color:#C29A53;background:#FBF7EE}
.chart-section{margin-top:26px;padding-top:23px;border-top:1px solid var(--line)}.chart-head{display:flex;justify-content:space-between;gap:10px;align-items:baseline;margin-bottom:8px}.chart-head h2{font-size:.9rem;letter-spacing:-.02em;margin:0}.chart-head span{font-size:.65rem;color:var(--muted)}canvas{display:block;width:100%;height:auto;border-radius:6px;background:#FBFAF9}.legend{display:flex;flex-wrap:wrap;gap:15px;font-size:.62rem;color:var(--muted);margin-top:9px}.legend>span{display:flex;align-items:center;gap:6px}.lg{display:inline-block;width:19px;height:3px;border-radius:3px}.lg.me{background:var(--rose)}.lg.nat{background:var(--blue)}.lg.tpl{background:repeating-linear-gradient(90deg,#938782 0 4px,transparent 4px 6px)}
.help{border-top:1px solid var(--line);margin-top:42px;padding-top:18px}.help details{max-width:900px}.help summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;font-weight:700;font-size:.8rem;list-style:none}.help summary::-webkit-details-marker{display:none}.help summary span{font-size:1.25rem;color:var(--blue)}.help details[open] summary span{transform:rotate(45deg)}.help-body{color:var(--ink2);font-size:.76rem;line-height:1.9;max-width:740px}.help-body p{margin:11px 0}.footer{border-top:1px solid var(--line);background:white}.footer-inner{max-width:1300px;margin:auto;padding:24px 42px;display:flex;align-items:center;gap:30px}.footer .logo{font-size:1.04rem}.credits{font-size:.61rem;line-height:1.75;color:var(--muted)}.credits a{text-underline-offset:2px}
@media(max-width:850px){main{padding:0 22px 55px}.topbar{padding:13px 22px}.intro{padding:36px 0 28px}.workspace{grid-template-columns:1fr;gap:14px}.settings{display:block;padding:18px 0 4px}.selector-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}.selector-stack>label:not(.toggle-line){grid-row:auto}.selector-stack select{grid-row:auto}.selector-stack .course-note,.selector-stack .toggle-line{grid-column:1/-1}.settings-divider{margin:15px 0}.practice{padding:22px 22px 24px}.word-stage{padding:25px 0}.footer-inner{padding:20px 22px}}
@media(max-width:550px){.topbar{min-height:64px;padding:14px 17px;gap:12px}.logo{font-size:1.18rem}.nav-descriptor{display:none}.back-link{font-size:.65rem}main{padding:0 15px 38px}.intro{padding:27px 0 18px}.eyebrow{font-size:.58rem;margin-bottom:9px}h1{font-size:clamp(2rem,9vw,2.65rem);line-height:1.16}.intro-sub{font-size:.74rem;line-height:1.75}.settings{padding-top:13px}.settings-heading{margin-bottom:12px}.settings-heading h2{font-size:.92rem}.selector-stack{grid-template-columns:1fr;gap:6px}.selector-stack>label:not(.toggle-line){margin-top:5px}.selector-stack select{min-height:43px;font-size:.74rem}.settings-divider{margin:14px 0}.model-note{font-size:.65rem}.practice{padding:15px 14px 19px;border-radius:9px}.practice-top{padding-bottom:11px}.word-stage{padding:25px 0 17px}.hz{font-size:3.8rem}.py{font-size:1.2rem}.uk{font-size:.78rem}.actions{gap:6px}.actions .btn{font-size:.68rem;flex:1 1 42%;min-height:43px;padding:9px 10px}.actions .btn:nth-child(3){flex:0 1 auto}.record-hint{font-size:.62rem}.chart-section{margin-top:18px;padding-top:17px}.chart-head{display:block}.chart-head span{display:block;margin-top:4px}.legend{gap:9px}.syl{flex-basis:calc(50% - 7px);min-width:0;padding:9px}.footer-inner{display:block;padding:19px 16px}.credits{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}}