:root{--ink:#173f35;--muted:#67756d;--paper:#fbf9f1;--card:#fffefa;--line:#dce0d5;--soft:#eaf0e6;--gold:#a17a2c}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,-apple-system,"PingFang SC","Microsoft YaHei",sans-serif}header,main,footer{width:min(920px,calc(100% - 36px));margin:auto}header{display:flex;justify-content:space-between;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}a{color:inherit}header a{text-decoration:none;font-size:14px}.brand{font-size:1.4rem;font-weight:900;letter-spacing:-.05em}.brand span{color:var(--gold)}main{max-width:780px;min-height:75vh;padding-bottom:30px}.intro{margin:32px 0 24px}.eyebrow{font-size:12px;letter-spacing:.15em;font-weight:750;color:var(--muted);margin:0 0 8px}h1{font:500 2.5rem/1.2 Georgia,serif;margin:0 0 12px}h1 span{font:500 1.3rem system-ui;margin-left:15px}.intro>p:last-child{color:var(--muted);margin:0}.panel{background:var(--card);border:1px solid var(--line);padding:28px;border-radius:10px;scroll-margin-top:16px}h2{font-size:1.15rem;margin:0 0 18px}h3{font-size:15px;font-weight:650;margin:0}h3 span{font-weight:400;color:var(--muted);margin-left:6px}label{display:block;font-size:14px;font-weight:650;margin-bottom:8px}textarea{display:block;width:100%;resize:vertical;padding:14px;font-family:inherit;font-size:20px;line-height:1.7;color:var(--ink);border:1px solid #b8c5b9;border-radius:6px;background:white}button{font:inherit;padding:10px 17px;border:1px solid var(--line);border-radius:6px;color:var(--ink);background:var(--card);cursor:pointer;touch-action:manipulation}button:hover{background:var(--soft)}button:disabled{opacity:.45;cursor:default}.primary{background:var(--ink);color:white;border-color:var(--ink);font-weight:650}.primary:hover{background:#245a4b}button:focus-visible,a:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:3px}.input-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:14px}.input-bottom span{font-size:13px;color:var(--muted)}.examples{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:20px;font-size:13px;color:var(--muted)}.examples button{padding:5px 9px;font-size:13px}.message{min-height:1.5em;font-size:15px;margin:18px 0 0}.message:empty{display:none}.divider{border-top:1px solid var(--line);margin:24px 0}.tiles{display:flex;flex-wrap:wrap;gap:10px}.tile{font-size:1.4rem;padding:9px 17px;min-width:48px;min-height:50px;background:var(--soft);border:1px solid #b6c7b8;border-radius:7px}.preview .tile{font-size:1.1rem;padding:5px 13px;min-height:40px}.preview{margin-bottom:20px}details{margin-top:22px;border-top:1px solid var(--line);padding-top:16px}summary{font-size:14px;cursor:pointer;color:var(--muted)}.muted{color:var(--muted);font-size:14px}.start-row{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:20px}.start-row button{flex:none}#segments{font-size:17px;margin-bottom:12px}.practice-heading{display:flex;justify-content:space-between;align-items:center;gap:20px}.practice-heading h2{margin-bottom:0}.practice-heading+ p{margin:14px 0 24px}.quiet{font-size:14px;padding:6px 12px;flex:none}.answer-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:12px}.answer-label>span{font-size:13px;color:var(--muted)}.answer{padding:18px;min-height:110px;border:1px dashed #8da995;background:#f5f8f1;border-radius:7px;align-content:center}.answer .tile{background:var(--ink);color:white;border-color:var(--ink)}.empty{margin:0;color:var(--muted);font-size:14px}.bank-heading{margin:24px 0 12px}.bank{min-height:62px}.practice-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.success{color:#216b44;background:#edf5e9;padding:12px;border-radius:6px}.retry{color:#8d4d25;background:#fcf2e6;padding:12px;border-radius:6px}#reference{font-size:1.5rem;overflow-wrap:anywhere}#practice-title:focus{outline:none}footer{border-top:1px solid var(--line);padding:22px 0;color:var(--muted);font-size:13px}@media(max-width:550px){.panel{padding:20px 16px}.intro{margin:25px 0 20px}h1{font-size:2rem}h1 span{font-size:1.1rem;margin-left:8px}.start-row{display:block}.start-row button{width:100%}.tile{font-size:1.2rem;padding:8px 13px}.tiles{gap:8px}.practice-actions .primary{width:100%}.practice-actions>button:not(.primary){flex:1}.answer{padding:13px}.practice-heading{align-items:flex-start}.practice-heading h2{font-size:1.05rem}h3 span{display:none}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* Quiet, three-line learning cards. */
.display-controls{display:flex;align-items:center;justify-content:flex-end;gap:18px;margin:0 0 16px;color:var(--muted);font-size:13px}.display-controls>span{margin-right:auto}.display-controls label{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:500;cursor:pointer}.display-controls input{accent-color:var(--ink);width:16px;height:16px}
.tile{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:78px;max-width:230px;padding:12px 18px;border-color:#d1dccf;background:#f2f5ee;box-shadow:0 2px 3px #173f3505;text-align:center;overflow-wrap:anywhere;vertical-align:middle}.tile .pinyin{font-size:13px;line-height:1.4;letter-spacing:.025em;color:#61776b}.tile .hanzi{font-size:25px;line-height:1.5;font-weight:550}.tile .english{font-size:12px;line-height:1.45;color:#69776d;max-width:190px}.tile .pinyin:empty,.tile .english:empty{display:none}.preview .tile{padding:10px 15px}.answer .tile .pinyin,.answer .tile .english{color:#d6e4d9}.hide-pinyin .tile .pinyin,.hide-english .tile .english{display:none}.panel{box-shadow:0 8px 30px #173f3504;border-radius:14px}.answer{min-height:135px}.bank{align-items:stretch}.annotation-row{display:grid;grid-template-columns:70px 1fr 2fr;gap:10px;margin-top:10px;align-items:center}.annotation-row input{min-width:0;width:100%;font:14px/1.5 inherit;font-family:inherit;padding:9px;border:1px solid var(--line);border-radius:5px;color:var(--ink);background:white}.annotation-row strong{font-size:16px;overflow-wrap:anywhere}footer a{text-decoration:none}footer a:hover{text-decoration:underline}@media(max-width:550px){.tile{min-width:65px;max-width:100%;padding:10px 12px}.tile .hanzi{font-size:22px}.tile .english{max-width:145px;font-size:11px}.tile .pinyin{font-size:12px}.annotation-row{grid-template-columns:45px 1fr}.annotation-row input:last-child{grid-column:2}.display-controls{gap:14px}}
.display-controls{position:sticky;top:0;z-index:2;background:var(--paper);padding:12px 0}.panel{scroll-margin-top:58px}

/* Presentation mode: the sentence is the slide. */
body.presenting{background:#faf9f5}.presenting header,.presenting .intro,.presenting footer{display:none}.presenting main{width:min(1440px,94%);max-width:none;padding:20px 0;min-height:100vh}.presenting .display-controls{background:#faf9f5;margin:0;padding:8px 0 16px;font-size:14px}.presenting .display-controls>span{visibility:hidden}.presenting .panel{border:0;border-radius:0;box-shadow:none;background:none;padding:8px 0}.presenting .practice-heading .eyebrow,.presenting .practice-heading+p,.presenting .answer-label{display:none}.presenting .practice-heading{margin-bottom:28px}.presenting .practice-heading h2{font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:.06em}.presenting .quiet{border:0;background:transparent;color:var(--muted);font-size:13px}.presenting .answer{min-height:190px;padding:24px;border:1px dashed #c4cfbf;background:#f0f3eb;border-radius:16px;gap:16px}.presenting .tiles{gap:16px}.presenting .tile{min-width:100px;max-width:300px;padding:16px 22px;border-radius:12px;box-shadow:0 3px 8px #183c3208;background:#fffefa}.presenting .tile .hanzi{font-size:clamp(30px,3.2vw,48px);line-height:1.4;font-weight:500}.presenting .tile .pinyin{font-size:clamp(16px,1.65vw,24px)}.presenting .tile .english{font-size:clamp(14px,1.35vw,19px);max-width:250px}.presenting .answer .tile{background:var(--ink)}.presenting .empty{font-size:18px;color:#7a887b}.presenting .bank-heading{font-size:14px;font-weight:400;color:var(--muted);margin:30px 0 16px}.presenting .bank{min-height:125px}.presenting .practice-actions{margin-top:32px;gap:12px}.presenting .practice-actions button{font-size:14px;padding:10px 18px}.presenting #solution{border:0;margin-top:12px;padding-top:8px}.presenting #solution summary{font-size:12px}.presenting .message{font-size:17px}.presenting #reference{font-size:32px}@media(min-width:1100px){.presenting main{padding-top:28px}.presenting .practice-heading{margin-bottom:36px}.presenting .answer{min-height:215px}.presenting .bank-heading{margin-top:40px}}@media(max-width:550px){.presenting main{width:92%}.presenting .tile{min-width:68px;padding:12px;max-width:100%}.presenting .tiles{gap:10px}.presenting .answer{padding:14px;min-height:160px}.presenting .tile .hanzi{font-size:28px}.presenting .tile .english{max-width:150px;font-size:12px}.presenting .tile .pinyin{font-size:14px}}

.review-heading{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}.review-heading h2{margin:0 auto 0 0}.review-heading label{margin:0;color:var(--muted);font-size:12px}.review-heading select{max-width:100%;width:260px;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--ink);font:inherit;font-size:14px}#sentence-progress{font:400 14px/1.4 system-ui;letter-spacing:.02em;color:var(--muted);vertical-align:middle;margin-left:14px}#next-sentence{margin-left:auto;background:var(--ink);color:white;border-color:var(--ink)}.presenting .practice-actions{align-items:center}@media(max-width:550px){#next-sentence{flex-basis:100%;margin-left:0}.review-heading select{width:100%}}