:root{color-scheme:light;--paper:#f8f4ec;--cream:#fffdf7;--ink:#19362c;--muted:#526458;--line:#dedcd0;--green:#183b30;--lime:#dbebad;--coral:#a63f2e;--peach:#f9e7d9;--serif:Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.5 var(--sans)}
a{color:inherit}
button,select{font:inherit}
button,a,select{-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
button:disabled{opacity:.56;cursor:default}
:focus-visible{outline:3px solid var(--coral);outline-offset:4px}
h1,h2,h3,p{margin:0}
h1,h2,h3{line-height:1.08}
h1,h2{font-family:var(--serif);font-weight:normal}
p{color:var(--muted)}
svg{width:20px;height:20px;flex:none;vertical-align:middle}
.sr-only,.skip:not(:focus){position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip:focus{position:fixed;z-index:8;top:10px;left:10px;background:white;padding:8px}
.app{display:grid;grid-template-columns:222px minmax(0,1fr);min-height:100dvh}
.sidebar{background:#f2eee4;border-right:1px solid var(--line);padding:33px 20px;display:flex;flex-direction:column;gap:55px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;font:bold 36px/1 var(--serif);width:max-content;margin-left:8px}
.brand-mark{border-radius:11px;color:var(--cream);background:var(--coral);width:36px;height:36px;display:grid;place-items:center;font:700 22px/1 var(--sans)}
.brand-dot{color:var(--coral)}
#navigation{display:grid;gap:7px}
#navigation a{min-height:48px;border-radius:10px;text-decoration:none;display:flex;align-items:center;gap:13px;padding:10px 14px;color:var(--muted);font-size:14px;font-weight:650}
#navigation a:hover,#navigation a[aria-current="page"]{background:#e3e8d7;color:var(--ink)}
.sidebar-footer{margin-top:auto;padding:0 8px;font-size:12px}
.sidebar-footer a{font-weight:700;text-underline-offset:3px}
.sidebar-footer p{margin-top:8px}
.workspace{width:min(100%,1220px);margin:0 auto;padding:0 clamp(22px,5vw,72px)}
.topbar{height:96px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line)}
.edition,.eyebrow,.footer{font-size:11px;font-weight:760;letter-spacing:.13em}
.edition,.profile{display:flex;align-items:center;gap:9px}
.edition{min-width:0}
#language{min-width:0;max-width:min(42vw,180px);letter-spacing:normal;font-weight:650}
.edition-detail{color:var(--muted)}
.signal{width:8px;height:8px;border-radius:50%;background:var(--coral);flex:none}
.profile-label{font-size:13px;color:var(--muted)}
select{background:var(--cream);border:1px solid var(--line);border-radius:10px;color:var(--ink);padding:8px 8px 8px 10px;min-height:42px;font-size:14px}
main{padding:32px 0 30px;min-height:550px}
.footer{display:flex;justify-content:space-between;gap:10px;color:var(--muted);border-top:1px solid var(--line);padding:22px 0 28px}
.footer a{letter-spacing:0;text-transform:none;text-underline-offset:3px}
.hero{background:var(--green);color:var(--cream);position:relative;isolation:isolate;overflow:hidden;padding:clamp(26px,5vw,60px);border-radius:26px}
.hero-content{position:relative;z-index:1;width:min(100%,485px)}
.practice-choices{display:flex;flex-wrap:wrap;gap:10px}
.practice-choices .btn{min-width:110px}
.hero .eyebrow{color:var(--lime);margin-bottom:17px}
.hero h1{font-size:clamp(54px,8vw,102px);letter-spacing:-.07em;line-height:.9}
.hero h1 em{color:var(--lime);font-weight:normal}
.hero p:not(.eyebrow){color:#e6eadc;max-width:34ch;margin:20px 0 24px}
.hero-art{position:absolute;right:-10px;top:0;height:100%;width:min(49%,390px);pointer-events:none}
.hero-art svg{width:100%;height:100%;opacity:.95}
.btn{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;min-height:46px;padding:10px 16px;border:1px solid transparent;border-radius:10px;font-size:14px;font-weight:720;line-height:1.2;color:white;background:var(--green)}
.btn:hover{filter:brightness(1.13)}
.btn-accent{background:var(--lime);color:var(--ink)}
.btn-quiet{color:var(--ink);background:var(--cream);border-color:var(--line)}
.btn-text{background:transparent;border:0;color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.btn svg{width:17px;height:17px}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin:31px 0 14px}
.section-head h2{font-size:clamp(30px,4vw,41px);letter-spacing:-.045em}
.section-head .eyebrow,.page-head .eyebrow{color:var(--coral);margin-bottom:7px}
.page-head{margin:8px 0 24px}
.page-head h1{font-size:clamp(44px,7vw,74px);letter-spacing:-.065em}
.page-head p:last-child{margin-top:12px;max-width:57ch}
.cards,.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}
.practice-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
.card,.practice-card,.review-banner{background:var(--cream);border:1px solid var(--line);border-radius:16px}
.card{padding:19px;min-width:0}
.card h3{font-size:18px;margin:12px 0 7px}
.card p{font-size:14px}
.card .btn{margin-top:13px}
.card-icon{display:grid;place-items:center;width:37px;height:37px;background:#e9eed9;border-radius:11px;color:var(--ink)}
.card:nth-child(2) .card-icon{background:var(--peach);color:var(--coral)}
.card:nth-child(3) .card-icon{background:#ece6f5}
.review-banner{margin-top:16px;display:flex;align-items:center;justify-content:space-between;padding:13px 17px;gap:14px}
.review-banner p{font-size:13px}
.lessons{display:grid;gap:12px}
.lesson{display:grid;grid-template-columns:50px 1fr auto;gap:15px;align-items:center}
.lesson .card-icon{width:50px;height:50px;font:700 16px var(--sans);background:#e9eed9}
.lesson h3{margin:4px 0 5px}
.lesson .btn{margin:0}
.lesson-actions{display:flex;flex-wrap:wrap;gap:6px}
.lesson .eyebrow{color:var(--coral)}
.lesson details{grid-column:2/-1;color:var(--muted);font-size:14px}
.lesson summary{cursor:pointer}
.lesson-phrase{display:flex;gap:10px;align-items:center;margin-top:8px;flex-wrap:wrap}
.lesson-phrase strong{color:var(--ink)}
.lesson-phrase .btn{min-height:38px;padding:6px 10px}
.practice-shell{max-width:680px;margin:auto}
.practice-top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:13px}
.practice-top a{font-size:14px;text-underline-offset:3px}
.practice-card{padding:clamp(20px,5vw,45px);text-align:center}
.practice-card h1{font-size:clamp(36px,7vw,59px);letter-spacing:-.055em;margin:8px 0 12px}
.practice-card .eyebrow{color:var(--coral)}
.practice-card .lead{max-width:48ch;margin:0 auto 17px}
.actions{display:flex;flex-wrap:wrap;justify-content:center;gap:9px;margin-top:16px}
.listening-player{display:grid;justify-items:center;gap:8px}
.listening-play{width:60px;height:60px;padding:0;border-radius:50%}
.listening-play-icon{width:16px;height:18px;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%);transform:translateX(1px)}
.listening-play[data-playing="true"] .listening-play-icon{width:12px;height:15px;background:transparent;border-inline:4px solid currentColor;clip-path:none;transform:none}
.listening-speeds{display:flex;gap:6px}
.listening-speeds .btn{min-width:48px;min-height:44px;padding:6px 10px;font-variant-numeric:tabular-nums}
.listening-speeds .btn[aria-pressed="true"]{background:#e3e8d7;border-color:#9ba98d}
.answer{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.listening-player~#audio-status{min-height:1.5em}
.listen-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:min(100%,390px);margin:12px auto 0}
.listen-actions .btn{min-height:48px;padding:6px}
.listen-actions [data-action="reveal"]{grid-column:2}
.listen-ratings{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:630px){
  .practice-card:has(.listen-controls){padding-block:16px}
  .practice-card:has(.listen-controls) .lead{margin-bottom:10px;font-size:14px}
  .practice-card:has(.listen-controls) .answer{margin-top:12px;padding-top:10px}
}
@media(max-width:630px) and (max-height:700px){
  .listening-player{display:flex;justify-content:center;align-items:center;gap:12px}
}
.jyutping{color:var(--ink);font:normal clamp(36px,8vw,68px)/1.08 var(--serif);letter-spacing:-.055em;overflow-wrap:anywhere}
.hanzi{font-size:20px;color:var(--muted);margin:5px 0}
.gloss{font-weight:720;color:var(--ink)}
.note{margin:6px auto 0;max-width:48ch;font-size:14px}
.sample{background:var(--peach);border:1px solid #efd8c5;border-radius:13px;margin-top:16px;padding:14px}
.sample .eyebrow{letter-spacing:.05em}
.sample strong{font:normal 34px var(--serif);display:block;margin:3px 0}
.media-note{margin-top:9px;font-size:13px}
.speaking-card{display:flex;flex-direction:column;gap:14px;min-height:410px;padding:clamp(15px,4vw,30px)}
.speaking-phrase{display:grid;justify-items:center;gap:4px}
.speaking-card .speaking-phrase h1{margin:0;font-size:clamp(36px,7vw,56px);line-height:1.04}
.speaking-phrase .hanzi{margin:0;font-size:18px}
.speaking-phrase .gloss{font-weight:normal}
.speaking-example{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin-top:6px}
.speaking-example .btn{min-height:44px;padding:8px 11px;font-size:13px}
.speaking-audio-status{min-height:1.35em;font-size:12px}
.speaking-feedback{
  display:grid;justify-items:center;align-content:center;gap:4px;min-height:102px;
  padding:10px 12px;border-radius:11px;background:var(--paper);font-size:14px;overflow-wrap:anywhere;
}
.speaking-feedback[data-grade="great"]{background:#e4edce}
.speaking-feedback[data-grade="good"]{background:#e7eee4}
.speaking-feedback[data-grade="practice"]{background:var(--peach)}
.speaking-feedback .eyebrow{color:var(--muted);text-transform:uppercase;letter-spacing:.095em}
.speaking-feedback .speaking-rating{color:var(--ink);font:normal clamp(32px,7vw,42px)/1.05 var(--serif);letter-spacing:-.035em}
.speaking-status{color:var(--ink);font-size:16px;font-weight:700}
.speaking-privacy{max-width:37ch;font-size:13px}
.speaking-playback{font-size:13px;color:var(--muted)}
.speaking-playback details{width:fit-content;max-width:100%;margin-inline:auto}
.speaking-playback summary{min-height:44px;padding:11px 6px;cursor:pointer}
.speaking-controls{margin-top:auto}
.speaking-actions{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;width:min(100%,390px);margin-inline:auto}
.speaking-actions .btn{min-height:48px;padding:6px 14px}
audio{display:block;margin:12px auto;max-width:100%}
.stat{font:normal 48px/1 var(--serif);color:var(--ink);display:block;margin-bottom:8px}
.section-counts table{width:100%;border-collapse:collapse;text-align:left;font-size:14px}
.section-counts tr+tr,.section-counts tbody{border-top:1px solid var(--line)}
.section-counts th,.section-counts td{padding:9px 8px}
.section-counts th:first-child{padding-inline-start:0}
.section-counts th:not(:first-child),.section-counts td{text-align:right;font-variant-numeric:tabular-nums}
.section-counts tbody th{font-weight:600}
.progress-list{margin:0;padding:0;list-style:none}
.progress-list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.progress-list li:last-child{border:0}
.progress-list small{color:var(--muted)}
.reset{margin-top:21px}
.reference-nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.reference-nav a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:7px 13px;border:1px solid var(--line);border-radius:10px;color:var(--muted);background:var(--cream);font-size:14px;font-weight:700;text-decoration:none}
.reference-nav a:hover,.reference-nav a[aria-current="page"]{background:#e3e8d7;border-color:#9ba98d;color:var(--ink)}
.reference-nav span{font-variant-numeric:tabular-nums}
.reference-list,.reference-constituents{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.reference-sentence-head{display:flex;align-items:start;justify-content:space-between;flex-wrap:wrap;gap:10px 18px}
.reference-sentence-head .btn{margin:0}
.reference-sentence h2,.reference-word h2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;font-size:clamp(25px,4vw,35px);letter-spacing:-.025em;overflow-wrap:anywhere}
.reference-script{font:normal 16px/1.4 var(--sans);letter-spacing:normal;color:var(--muted)}
.reference-sentence p,.reference-word p,.reference-empty h2 + p{margin-top:5px}
.reference-sentence .reference-guide{margin-top:12px}
.reference-guide a{text-underline-offset:3px}
.reference-sentence h3{font-size:13px;margin:15px 0 8px}
.reference-constituents{grid-template-columns:repeat(auto-fit,minmax(min(145px,100%),1fr));gap:8px}
.reference-constituents li{padding:8px 10px;border-radius:8px;background:var(--paper);font-size:14px;overflow-wrap:anywhere}
.reference-constituents .reference-term{font-weight:700;margin-inline-end:8px}
.reference-constituents .reference-script{font-size:14px}
.reference-meaning{display:block;color:var(--muted)}
.concept-entry{background:#edf0e2}
.concept-shell{max-width:790px;margin:auto}
.concept-shell .page-head{padding:clamp(20px,4vw,38px);border-radius:20px;background:var(--green);color:var(--cream)}
.concept-shell .page-head .eyebrow{color:var(--lime)}
.concept-shell .page-head p:last-child{color:#e6eadc}
.concept-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.concept-rule{display:flex;flex-direction:column;gap:8px}
.concept-rule h3,.concept-comparison h3{margin:0}
.concept-word{display:flex;align-items:center;gap:12px}
.concept-word strong{font:normal 42px/1 var(--serif);letter-spacing:-.04em}
.concept-word span{font-size:19px;background:#e9eed9;border-radius:8px;padding:3px 8px}
.concept-rule:nth-child(2) .concept-word span{background:var(--peach)}
.concept-rule .concept-pattern{margin-top:auto;padding:9px 11px;background:var(--paper);border-radius:8px;font-weight:650;color:var(--ink)}
.concept-intro{margin-bottom:13px}
.concept-comparison + .concept-comparison{margin-top:10px}
.concept-comparison h3 + p{margin:6px 0 12px}
.concept-example{background:var(--paper);border-radius:10px;padding:12px 14px}
.concept-example .concept-jyutping,.concept-check .concept-jyutping{color:var(--ink);font:normal clamp(23px,3.2vw,31px)/1.15 var(--serif);letter-spacing:-.025em;overflow-wrap:anywhere}
.concept-example mark{background:var(--lime);color:var(--ink);border-radius:3px;padding:0 .12em}
.concept-hanzi{margin:4px 0 6px}
.concept-check fieldset{min-inline-size:0;margin:0 0 16px;padding:10px 14px 12px;border:1px solid var(--line);border-radius:10px}
.concept-check legend{padding-inline:5px;font-weight:650}
.concept-check > .btn{margin-top:0}
.concept-options{display:flex;flex-wrap:wrap;gap:8px}
.concept-options label{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 11px;border:1px solid var(--line);border-radius:8px;cursor:pointer;font-weight:650}
.concept-options input{accent-color:var(--green);margin:0}
.concept-options label:has(input:checked){background:#e9eed9;border-color:#788a69}
.concept-result:not(:empty){background:#e9eed9;border-radius:10px;margin-top:15px;padding:12px 14px;font-size:14px}
.concept-result h3{margin:0}
.concept-result ol{padding-inline-start:22px;margin:8px 0 0}
.concept-result li + li{margin-top:5px}
.concept-step:last-of-type{margin:24px 0;color:var(--muted);font-size:13px}
.concept-step:last-of-type h2{font:700 14px var(--sans);color:var(--ink)}
.concept-step:last-of-type ul{margin:6px 0 0;padding-inline-start:20px}
.concept-step:last-of-type a{text-underline-offset:3px}
@media(max-width:530px){.concept-grid{grid-template-columns:1fr;gap:8px}}
@media(max-width:820px){.app{grid-template-columns:166px minmax(0,1fr)}.sidebar{padding-inline:13px}.workspace{padding-inline:20px}.hero-art{opacity:.55}.card{padding:14px}.cards{gap:8px}}
@media(max-width:630px){.app{display:block}.sidebar{padding:13px 18px;display:block;border:0}.brand{margin:0;font-size:31px}.brand-mark{width:32px;height:32px;font-size:20px}.sidebar-footer{display:none}#navigation{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px;position:fixed;z-index:5;bottom:0;left:0;right:0;background:var(--paper);border-top:1px solid var(--line);padding:5px 8px calc(5px + env(safe-area-inset-bottom))}#navigation a{justify-content:center;gap:4px;flex-direction:column;min-height:49px;padding:5px 2px;font-size:11px;text-align:center}#navigation a svg{width:18px;height:18px}.workspace{padding:0 15px calc(66px + env(safe-area-inset-bottom))}.topbar{height:56px}.edition{font-size:10px}.edition-detail,.profile-label{display:none}main{padding-top:18px;min-height:0}.hero{border-radius:19px}.hero-art{width:57%;opacity:.4;right:-17%}.hero h1{font-size:clamp(55px,13vw,76px)}.hero p:not(.eyebrow){font-size:14px}.section-head{align-items:start;margin-top:23px}.section-head .btn{min-height:40px;padding-inline:9px}.cards{grid-template-columns:1fr}.cards .card{display:grid;grid-template-columns:37px 1fr;gap:0 10px}.cards .card-icon{grid-row:1/4}.cards h3{margin:1px 0 5px}.cards .btn{justify-self:start;grid-column:2;margin-top:9px}.stats{gap:5px}.stats .card{padding:9px}.stats p{font-size:12px}.stat{font-size:36px}.lesson{grid-template-columns:38px 1fr;gap:8px 11px}.lesson .card-icon{width:38px;height:38px}.lesson-actions{grid-column:2;justify-self:start}.footer{font-size:9px}.practice-top .eyebrow{font-size:10px}}
@media(max-width:630px){
  :root{
    --mobile-nav-height:calc(4.75rem + env(safe-area-inset-bottom));
    --practice-controls-height:3.875rem;
  }
  .app:has(:is(.listen-controls,.speaking-controls)) #navigation{height:var(--mobile-nav-height)}
  .workspace:has(:is(.listen-controls,.speaking-controls)){padding-bottom:calc(var(--mobile-nav-height) + var(--practice-controls-height))}
  html:has(:is(.listen-controls,.speaking-controls)){overflow-anchor:none}
  .speaking-card{min-height:0;gap:10px}
  .listen-controls,.speaking-controls{
    position:fixed;
    inset:auto 0 var(--mobile-nav-height);
    z-index:4;
    min-height:var(--practice-controls-height);
    display:grid;
    align-items:center;
    padding:6px max(15px,env(safe-area-inset-right)) 6px max(15px,env(safe-area-inset-left));
    border-top:1px solid var(--line);
    background:var(--paper);
  }
  .listen-controls .listen-actions{margin-top:0}
}

.account-screen{width:min(100%,460px);margin:clamp(12px,6vh,66px) auto}
.account-form,.invite-result{display:grid;gap:13px}
.account-form{padding:clamp(16px,4vw,30px)}
.account-form label,.invite-result label{display:grid;gap:6px;color:var(--ink);font-size:14px;font-weight:700}
.account-form input,.invite-result input{min-width:0;width:100%;min-height:44px;padding:8px 11px;border:1px solid #a4ada1;border-radius:8px;background:var(--cream);color:var(--ink);font:16px var(--sans)}
.account-form .btn{justify-self:start;margin-top:0}
.account-screen>.btn-text{margin-top:8px;padding-inline:0}
.form-message{font-size:14px;color:var(--coral);overflow-wrap:anywhere}
.form-message:empty{display:none}
.account-menu{position:relative;min-width:0;max-width:min(50%,230px);z-index:6}
.account-menu summary{display:block;min-height:42px;padding:10px 28px 10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--cream);color:var(--ink);font-size:14px;font-weight:690;cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account-menu summary::-webkit-details-marker{display:none}
.account-menu summary::after{content:'';position:absolute;inset:16px 12px auto auto;width:7px;height:7px;border-right:1.5px solid;border-bottom:1.5px solid;transform:rotate(45deg)}
.account-actions{position:absolute;inset:calc(100% + 5px) 0 auto auto;width:max-content;padding:5px;border:1px solid var(--line);border-radius:10px;background:var(--cream);box-shadow:0 6px 18px #19362c18}
.account-actions button{display:block;min-height:44px;width:100%;padding:8px 12px;border:0;border-radius:6px;background:transparent;text-align:start;color:var(--ink);font-size:14px;font-weight:650}
.account-actions button:hover,.account-actions button:focus-visible{background:#e3e8d7}
.invite-dialog{width:min(420px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:clamp(16px,5vw,28px);color:var(--ink)}
.invite-dialog::backdrop{background:#19362c69}
.invite-dialog h2{font-size:32px;margin-bottom:10px}
.invite-result{margin-top:16px;gap:5px}
.invite-result .btn{justify-self:start;margin-top:5px}
.invite-dialog .form-message{margin-top:8px}
.sync-notice{display:flex;justify-content:space-between;align-items:center;gap:5px 12px;flex-wrap:wrap;margin-top:10px;padding:6px 10px;background:var(--peach);border-radius:8px}
.sync-notice p{font-size:13px;color:var(--ink)}
.sync-actions{display:flex;gap:6px;flex-wrap:wrap}
.sync-actions .btn{min-height:38px;padding:6px 9px;font-size:12px}