:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#213b35;background:#f6f4ed;font-synthesis:none}*{box-sizing:border-box}body{margin:0}header,footer{max-width:1180px;margin:auto;padding:30px 40px;display:flex;justify-content:space-between;align-items:center}.brand{text-decoration:none;color:#213b35;font-weight:800;font-size:25px;letter-spacing:-1px}.brand span{color:#cf5439}.tag{font-size:13px;color:#69756a}main{max-width:1180px;margin:auto;padding:72px 40px 90px;min-height:calc(100vh - 175px)}.welcome{position:relative;padding-right:350px}.eyebrow{color:#a34c37;font-size:11px;letter-spacing:2.2px;font-weight:750;margin:0 0 28px}h1{font-size:clamp(34px,4.8vw,61px);line-height:1.13;letter-spacing:-2px;font-weight:650;margin:0 0 26px}h1 em{font-style:normal;color:#c7543c}.intro{font-size:18px;line-height:1.7;max-width:520px;color:#657269;margin-bottom:34px}button{border:0;border-radius:12px;background:#234f43;color:#fff;padding:18px 25px;font:600 16px system-ui;cursor:pointer;transition:background .2s,transform .2s}button:hover{background:#326553;transform:translateY(-2px)}button:focus-visible,a:focus-visible{outline:3px solid #cf5439;outline-offset:5px}#start span{margin-left:26px}.note{font-size:12px;color:#738075;margin-top:18px}.decoration{position:absolute;right:0;top:10px;width:290px;height:330px;border-radius:145px 145px 24px 24px;background:#e5eadb;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:serif;font-size:88px;color:#234f43;border:1px solid #d8dfcb}.decoration span{font:17px system-ui;letter-spacing:5px;margin-top:15px}.lesson{max-width:640px;margin:auto;text-align:center}.lesson h1{font-size:42px}.word-card{background:#fffdf8;border:1px solid #e2e5d9;border-radius:24px;padding:24px;margin:28px 0;box-shadow:0 15px 45px #213b3507}.characters{font-family:serif;font-size:100px;margin:0 0 8px;color:#234f43}.pinyin{font-size:24px;letter-spacing:3px;color:#c7543c;margin:0 0 16px}.translation{font-size:18px;margin:0;color:#657269}.explanation{line-height:1.8;color:#657269;margin-bottom:26px}.feedback{color:#234f43;min-height:24px}.text-button{background:transparent;color:#657269;padding:10px;font-size:14px}.text-button:hover{background:#e5eadb}footer{border-top:1px solid #e0e3d6;font-size:12px;color:#738075}[hidden]{display:none!important}@media(max-width:800px){header,footer{padding:24px}main{padding:38px 24px 60px}.welcome{padding-right:0}.decoration{position:static;margin:40px auto 0;width:230px;height:235px;font-size:70px}h1{letter-spacing:-1px}.intro{font-size:16px}footer{gap:20px}.lesson h1{font-size:34px}}@media(prefers-reduced-motion:reduce){button{transition:none}}
.practice{margin:32px 0;padding:28px;background:#fffdf8;border:1px solid #e2e5d9;border-radius:24px;text-align:left}.practice .eyebrow{margin-bottom:12px}.practice h2{font-size:28px;letter-spacing:-.5px;margin:0 0 12px}.practice p{line-height:1.65}.controls{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}.secondary{background:#e5eadb;color:#234f43}.secondary:hover{background:#d8e2cd}button:disabled{opacity:.55;cursor:wait;transform:none}#record-status{font-size:14px;color:#657269;min-height:24px}canvas{width:100%;height:auto;display:block;background:#f6f4ed;border-radius:14px}.legend{display:flex;gap:20px;color:#657269;font-size:12px;margin-top:10px}.legend span:first-child{color:#a56a48}.legend span:last-child{color:#234f43}.practice-note{font-size:12px;color:#738075;margin-bottom:0}.practice audio{width:100%;margin:6px 0}#feedback{font-weight:600}.lesson{max-width:720px}@media(max-width:500px){.practice{padding:20px}.controls button{width:100%}.characters{font-size:80px}}
.characters{font-size:clamp(28px,5vw,54px);line-height:1.5;overflow-wrap:anywhere}.pinyin{font-size:20px;letter-spacing:1px;line-height:1.6}.course-label{display:block;text-align:left;font-size:13px;color:#657269;margin-bottom:8px}select{width:100%;font:16px system-ui;padding:14px;border-radius:12px;border:1px solid #d8dfcb;background:#fffdf8;color:#234f43;margin-bottom:26px}.recognition-option{display:flex;gap:10px;align-items:center;font-size:14px}.recognition-option input{width:18px;height:18px}#transcript{background:#e5eadb;border-radius:12px;padding:14px}#transcript:empty{display:none}
.assessment{border-top:1px solid #e0e3d6;margin-top:26px;padding-top:24px}.assessment .eyebrow{margin-bottom:12px}.grade{display:flex;align-items:baseline;gap:10px;margin:22px 0}.grade strong{font-size:64px;line-height:1;color:#234f43}.grade span{font-size:18px;color:#657269}.metrics{display:grid;grid-template-columns:1fr auto;gap:10px;margin:0}.metrics dt{color:#657269}.metrics dd{margin:0;font-weight:700}.character-card{background:#f6f4ed;border-radius:12px;padding:14px;margin:12px 0}.character-card strong{font-size:26px}.character-card p{margin:5px 0;font-size:14px}.attempt-history{border-top:1px solid #e0e3d6;margin-top:26px;padding-top:20px}.attempt-history h3{margin-top:0}.attempt-history li{margin:8px 0}

.assessment-status:empty,#assessment-status:empty{display:none}.grade{justify-content:center;margin:24px 0 12px}.grade strong{font-size:80px}.assessment-info{margin-top:16px;font-size:13px;color:#657269}.assessment-info summary,.attempt-history summary{cursor:pointer}.attempt-history summary{font-size:14px;color:#657269}

.voice-comparison{margin:16px 0;color:#657269;font-size:13px}.voice-comparison summary{cursor:pointer;margin-bottom:12px}

.word-card h1{font-size:clamp(24px,4vw,36px);margin:0 0 18px;line-height:1.25}.word-card .characters{font-size:clamp(30px,5vw,48px);margin:0 0 14px}.word-card .pinyin{margin:0;font-size:21px;letter-spacing:0}

.family-panel{text-align:left;background:#e9eee2;border-radius:20px;padding:22px;margin-bottom:28px}.family-panel h2{margin:0;font-size:24px}.family-panel h3{font-size:16px;margin:22px 0 12px}.family-panel details{font-size:13px;margin:15px 0}.family-panel summary{cursor:pointer}.profile-buttons{display:flex;flex-wrap:wrap;gap:10px}.profile-buttons button{padding:12px 18px}.profile-buttons .selected{box-shadow:0 0 0 3px #a8beaa}.family-results{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.family-card{background:#fffdf8;border-radius:12px;padding:15px}.family-card p{font-size:20px;margin:12px 0}.family-card small{color:#657269;font-size:11px}.family-panel form{margin:14px 0}.family-panel label{display:block;margin:12px 0}.family-panel input{width:100%;padding:12px;border:1px solid #b8c8b5;border-radius:10px;font:16px system-ui}.family-panel form>button{padding:12px 20px}#family-status{font-size:13px;color:#657269}.voice-comparison h3{font-size:16px;margin:0 0 10px}@media(max-width:500px){.family-panel{padding:16px}.family-results{grid-template-columns:1fr}.family-card{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.family-card p{margin:0}.family-card small{width:100%}}

.family-card .rename-button{padding:8px 0;font-size:12px;display:block;margin-top:8px}#rename-form{padding:16px;background:#fffdf8;border-radius:12px}#rename-form input{margin-top:8px}

.grade-scale{max-width:330px;margin:18px auto 22px}.grade-track{height:10px;border-radius:10px;background:linear-gradient(90deg,#cf4545 0%,#e8863b 30%,#dac343 55%,#70ad49 78%,#27874b 100%);position:relative;margin:0 8px}.grade-marker{position:absolute;left:var(--grade-position,0%);top:50%;width:18px;height:18px;border-radius:50%;background:#fffdf8;border:3px solid #213b35;transform:translate(-50%,-50%);box-shadow:0 1px 4px #0002}.grade-labels{display:flex;justify-content:space-between;font-size:11px;color:#657269;margin-top:12px}

.account-quota{background:#fffdf8;border:1px solid #dde3d5;border-radius:14px;padding:16px;margin:18px 0 22px}.quota-heading{display:flex;justify-content:space-between;gap:12px;font-size:14px;flex-wrap:wrap}.quota-track{height:10px;border-radius:10px;background:#e0e5d9;overflow:hidden;margin:12px 0}.quota-track>div{width:0;height:100%;background:#32734f}.account-quota p{font-size:12px;color:#657269;margin:0 0 6px}.account-quota small{font-size:11px;color:#738075}.family-results{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}

header #open-account{padding:10px 14px;font-size:13px;margin-left:auto}#account-dialog{width:min(460px,calc(100% - 32px));border:1px solid #d8dfcb;border-radius:22px;padding:26px;color:#213b35;background:#fffdf8;max-height:90vh;overflow:auto}#account-dialog::backdrop{background:#213b3577}.account-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.account-heading h2{margin:0;font-size:26px}.account-tabs{display:flex;gap:10px;margin:18px 0}.account-tabs [aria-pressed=true]{box-shadow:0 0 0 2px #a8beaa}#account-dialog label{display:block;margin:16px 0 7px;font-size:14px}#account-dialog input{box-sizing:border-box;width:100%;padding:13px;border:1px solid #b8c8b5;border-radius:10px;font:16px system-ui;background:white}#account-dialog form>button{margin-top:18px;width:100%}#account-message{font-size:14px;line-height:1.5;color:#52675c}#account-message:empty{display:none}#account-dialog .practice-note{line-height:1.6}#account-dialog [hidden]{display:none}@media(max-width:500px){header .tag{display:none}#account-dialog{padding:20px}}
#account-dialog .account-heading{position:sticky;top:-26px;background:#fffdf8;z-index:1;padding:12px 0} @media(max-width:500px){#account-dialog .account-heading{top:-20px}}