/* Laowai resource system. Opt-in surfaces; article text, data and app state keep their contracts. */
@media screen {
[data-lw-system]{--lw-paper:#f3f0e8;--lw-surface:#faf8f1;--lw-ink:#24332c;--lw-forest:#244c3b;--lw-muted:#394b40;--lw-line:#c9c4b6;--lw-sage:#e8edda;--lw-blue:#e0ebf1;--lw-honey:#f4e4c3;--lw-pink:#f2e2e5;--lw-radius:16px;--lw-control-radius:12px;--lw-ui:var(--font-body,system-ui,sans-serif)}
[data-lw-system] [hidden]{display:none!important}
[data-lw-system] ::selection{background:#dce6b8;color:#24332c}
[data-lw-system] :is(input,textarea){caret-color:#244c3b}
[data-lw-system] :is(input,textarea)::placeholder{color:#5e6258;opacity:1}
[data-lw-system] :is(a,button,input,select,textarea,summary):focus-visible{outline:3px solid #244c3b;outline-offset:3px}
[data-lw-system] :is(a,summary){text-underline-offset:4px}
.lw-directory-header{display:block!important;padding:20px 0 16px!important;margin:0 0 16px!important;min-height:0!important}
[data-lw-system] .lw-directory-header h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;letter-spacing:-.025em;margin:0 0 12px}
[data-lw-system] .lw-directory-header>div>p,[data-lw-system] .lw-directory-header>p{max-width:70ch;font-size:1rem;line-height:1.55;margin:8px 0}
.lw-filter{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,280px);gap:12px;align-items:end;margin:16px 0 8px}
.lw-filter label{display:grid;gap:6px;min-width:0;font:500 .875rem/1.4 var(--lw-ui);color:var(--lw-muted)}
.lw-filter :is(input,select){width:100%;min-width:0;min-height:48px;padding:12px 14px;border:1px solid var(--lw-line);border-radius:var(--lw-control-radius);background:var(--lw-surface);color:var(--lw-ink);font:400 1rem/1.4 var(--lw-ui)}
.lw-filter select{padding-inline-end:40px}
.lw-filter-footer{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;align-items:center;margin:8px 0 16px}
.lw-filter-footer [role=status]{font-size:.875rem;line-height:1.5;margin:0;color:var(--lw-muted)}
.lw-reset{min-height:44px;padding:8px 0;border:0;background:transparent;color:var(--lw-forest);font:500 .875rem/1.4 var(--lw-ui);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.lw-notes{margin:16px 0;color:var(--lw-muted);font-size:.875rem;line-height:1.6}
.lw-notes>summary{min-height:44px;padding-block:10px;cursor:pointer;color:var(--lw-forest)}
.lw-notes>p{margin:8px 0;max-width:72ch}
/* Reading teasers: preserve real scales, subject summaries and existing filters. */
.lw-read .rl-main{max-width:1216px;padding:24px 24px 56px}
.lw-read .rl-library-nav{margin:0 0 16px;padding:0;gap:24px}
.lw-read .rl-heading{margin:0 0 20px;max-width:75ch}
.lw-read .rl-heading h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 12px}
.lw-read .rl-heading p{font-size:1rem;line-height:1.55;margin:0}
.lw-read .rl-filters{padding:0;border:0;gap:12px;align-items:end}
.lw-read .rl-filters label{font:500 .875rem/1.4 var(--lw-ui);gap:6px}
.lw-read .rl-filters :is(input,select){min-height:48px;font-size:1rem;border-radius:12px}
.lw-read .rl-more summary{font-size:.875rem;min-height:44px;padding:10px 0}
.lw-read .rl-status{margin:12px 0;font-size:.875rem}
.lw-read .rl-catalog{gap:10px 16px;margin:0}
.lw-read .rl-entry{border:0;border-radius:16px;background:linear-gradient(110deg,#faf8f1 30%,var(--lw-level,#f0ede4));overflow:hidden}
.lw-read .rl-entry>a{padding:18px 20px;min-height:132px}
.lw-read .rl-entry h2{font:600 1.1rem/1.35 var(--lw-ui)!important;margin:8px 0}
.lw-read .rl-entry p{font-size:.925rem;line-height:1.5;margin:6px 0}
.lw-read .rl-entry-meta{font-size:.8rem;line-height:1.5;color:#394b40}
.lw-read .rl-entry:is([data-scale=hsk20],[data-scale=hsk30],[data-scale=laowai])[data-level="1"]{--lw-level:var(--lw-sage)}
.lw-read .rl-entry:is([data-scale=hsk20],[data-scale=hsk30],[data-scale=laowai])[data-level="2"]{--lw-level:var(--lw-honey)}
.lw-read .rl-entry:is([data-scale=hsk20],[data-scale=hsk30],[data-scale=laowai])[data-level="3"]{--lw-level:var(--lw-blue)}
.lw-read .rl-entry:is([data-scale=hsk20],[data-scale=hsk30],[data-scale=laowai])[data-level="4"]{--lw-level:var(--lw-pink)}
.lw-read .rl-entry:is([data-scale=hsk20],[data-scale=hsk30])[data-level="5"]{--lw-level:#e7e3ef}
.lw-read .rl-entry:is([data-scale=hsk20],[data-scale=hsk30])[data-level="6"]{--lw-level:#eddfd4}
/* Guides are single linked items, with actual source thumbnails and one text stack. */
.lw-guides .guide-directory{max-width:1168px;margin:0 auto;padding-top:20px}
.lw-guides .feature-guide-header{margin-bottom:24px}
.lw-guides .feature-guide-header h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 12px}
.lw-guides .guide-intro{font-size:1rem;line-height:1.55;max-width:70ch;margin:0}
.lw-guides .guide-directory>section{margin:28px 0}
.lw-guides .guide-directory>section>h2{font-size:1.4rem!important;line-height:1.3;margin:0 0 12px}
.lw-guides .guide-list{display:grid;gap:8px;list-style:none;padding:0;margin:0}
.lw-guides .guide-list>li{padding:0;border:0;background:linear-gradient(110deg,#faf8f1 35%,var(--lw-group,#f0ede4));border-radius:16px}
.lw-guides .lw-guide-link{display:grid;grid-template-columns:96px minmax(0,1fr);gap:6px 16px;align-items:center;padding:16px;color:#24332c;text-decoration:none;min-height:96px}
.lw-guides .lw-guide-link:not(:has(img)){grid-template-columns:1fr}
.lw-guides .lw-guide-link img{grid-column:1;grid-row:1/3;display:block;width:96px;height:64px;object-fit:cover;border-radius:8px;margin:0}
.lw-guides .lw-guide-link>span{grid-column:2;grid-row:1;font:600 1rem/1.4 var(--lw-ui)}
.lw-guides .lw-guide-link>p{grid-column:2;grid-row:2;font:400 .875rem/1.5 var(--lw-ui);color:#394b40;margin:0;max-width:78ch}
.lw-guides .lw-guide-link:not(:has(img))>:is(span,p){grid-column:1}
.lw-guides .lw-guide-link:hover>span{text-decoration:underline}
.lw-guides [data-lw-group=words]{--lw-group:var(--lw-sage)}
.lw-guides [data-lw-group=reading]{--lw-group:var(--lw-blue)}
.lw-guides [data-lw-group=hsk]{--lw-group:var(--lw-honey)}
.lw-guides [data-lw-group=teaching]{--lw-group:var(--lw-pink)}
/* Vocabulary keeps native table, examples, word anchors and source links. */
.lw-vocabulary #vocabulary>h2{font-size:1.4rem!important;margin:0 0 8px}
.lw-vocabulary #vocabulary>p{font-size:.95rem;line-height:1.5;max-width:75ch;margin:0 0 16px}
.lw-vocabulary .vocab-table-wrap{overflow:visible}
.lw-vocabulary .vocab-table{width:100%;min-width:0;border-collapse:separate;border-spacing:0 8px;table-layout:fixed;margin:0}
.lw-vocabulary .vocab-table th{font:600 .8rem/1.5 var(--lw-ui);text-transform:none;letter-spacing:0;padding:8px 16px;text-align:left}
.lw-vocabulary .vocab-table :is(th,td):first-child{width:20%}
.lw-vocabulary .vocab-table :is(th,td):nth-child(2){width:22%}
.lw-vocabulary .vocab-table td{padding:16px;background:#faf8f1;border:0;vertical-align:top;overflow-wrap:anywhere;font-size:.95rem;line-height:1.5}
.lw-vocabulary .vocab-table td:first-child{border-radius:16px 0 0 16px}
.lw-vocabulary .vocab-table td:last-child{border-radius:0 16px 16px 0}
.lw-vocabulary .vocab-table td:first-child>a{display:inline-flex;align-items:center;min-height:44px;font-size:1.5rem;line-height:1.3;text-decoration:none}
.lw-vocabulary .vocab-table td:nth-child(2){font-size:.95rem;color:#394b40;padding-top:24px}
.lw-vocabulary .vocab-table details{margin-top:6px}
.lw-vocabulary .vocab-table summary{min-height:44px;padding-block:10px;font-size:.85rem;color:#244c3b;cursor:pointer}
.lw-vocabulary .vocab-table blockquote{margin:12px 0;padding:12px 16px;border-left:1px solid #c9c4b6}
.lw-vocabulary .vocab-table blockquote p{margin:8px 0;line-height:1.6}
/* Operate surfaces: controls and continuation, without changing state or reader body. */
.lw-workspace .study-hero{padding:20px 0 16px!important;margin:0 0 12px!important}
.lw-workspace .study-hero h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 12px}
.lw-workspace .study-hero p{font-size:1rem;line-height:1.5;margin:8px 0}
.lw-workspace [data-study-goal]{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:16px 20px!important;margin-bottom:16px!important;border-radius:16px;box-shadow:none!important}
.lw-workspace [data-study-goal]>h2{flex-basis:100%;font:600 1.15rem/1.4 var(--lw-ui)!important;margin:0}
.lw-workspace [data-study-goal]>p{flex-basis:100%;font-size:.875rem;line-height:1.5;margin:0;color:#394b40}
.lw-workspace [data-study-goal]>.learning-goal-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.lw-workspace [data-study-goal] button{min-height:44px;max-width:100%;font:500 .85rem/1.4 var(--lw-ui);padding:10px 14px}
.lw-workspace [data-study-goal]>a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 16px;border-radius:12px;background:#244c3b;color:#fff;text-decoration:none;font:600 .875rem/1.4 var(--lw-ui)}
.lw-workspace .study-tabs{margin-block:12px 20px!important}
.lw-workspace :is(.study-list-card,.study-panel,.study-preferences fieldset){border-radius:16px}
.lw-learning>main{max-width:1216px;padding:24px}
.lw-learning h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 16px}
.lw-learning [data-learning-status]{font-size:.875rem;line-height:1.5;margin:8px 0 16px}
.lw-learning [data-learning-status]:empty{display:none}
.lw-learning .learning-grid{gap:12px;margin:16px 0}
.lw-learning .learning-card{padding:20px;border:0;border-radius:16px;background:linear-gradient(110deg,#faf8f1 35%,var(--lw-kind,#f0ede4))}
.lw-learning .learning-card[data-kind=selected-goal]{--lw-kind:var(--lw-sage)}
.lw-learning .learning-card:is([data-kind=reading],[data-kind=book]){--lw-kind:var(--lw-blue)}
.lw-learning .learning-card[data-kind=review]{--lw-kind:var(--lw-honey);border-top:0}
.lw-learning .learning-card h2{font:600 1.15rem/1.4 var(--lw-ui);letter-spacing:0;margin:0 0 10px}
.lw-learning .learning-card p{font-size:.875rem;line-height:1.5;margin:0 0 12px}
.lw-learning .learning-card>a:first-of-type{padding:10px 16px;border-radius:12px;background:#244c3b;color:#fff;text-decoration:none}
.lw-learning .learning-start{margin-top:24px;padding-top:24px}
.lw-learning .lw-notes{margin-top:20px}
.lw-learning [data-learning-goal-load]{background:transparent;color:#244c3b;font-size:.875rem;margin-block:8px}
/* Tools and related resource packages use the same control metrics. */
.lw-tool .resource-hero,.lw-tool .pinyin-hero{display:block!important;padding:16px 0!important;margin:0 0 16px!important;min-height:0!important}
.lw-tool :is(.resource-hero,.pinyin-hero) h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 12px!important}
.lw-tool :is(.resource-hero,.pinyin-hero)>p,.lw-tool .pinyin-hero .intro{font-size:1rem;line-height:1.5;max-width:70ch;margin:8px 0!important}
.lw-tool .hsk-tool-nav{display:flex;flex-wrap:wrap;gap:8px 20px;padding:0!important;margin:12px 0 20px}
.lw-tool .hsk-tool-nav>a{display:inline-flex;align-items:center;min-height:44px}
.lw-tool .hsk-workshop{border-radius:16px}
.lw-tool .hsk-practice-quick:disabled{background:#e4e6dd;color:#4d5d50;border-color:#c9c4b6;opacity:1}
.lw-tool .pinyin-workspace{gap:20px}
.lw-tool .pinyin-panel{min-width:0}
.lw-tool .pinyin-panel textarea{min-height:140px;height:140px;resize:vertical;font:1.1rem/1.6 var(--lw-ui);border-radius:12px;padding:14px}
.lw-tool .pinyin-panel>label{font:600 .9rem/1.5 var(--lw-ui)}
.lw-tool .pinyin-actions{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.lw-tool .pinyin-status{margin:8px 0;font-size:.875rem;line-height:1.5}
.lw-tool .pinyin-examples{margin-block:12px}
.lw-tool .pinyin-examples button{min-height:44px}
.lw-tool .hsk-daily-index{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;padding:0}
.lw-tool .hsk-daily-index li{margin:0}
.lw-tool .hsk-daily-index a{display:block;padding:18px;border-radius:16px;background:linear-gradient(110deg,#faf8f1,#e8edda);min-height:100px;color:#24332c;text-decoration:none}
.lw-teachers .teacher-materials{gap:16px;margin-top:16px}
.lw-teachers .teacher-materials>article{padding:20px;gap:0;border:0;border-radius:16px;background:linear-gradient(110deg,#faf8f1,var(--lw-level,#f0ede4))!important}
.lw-teachers .teacher-materials>article[data-lw-level="1"]{--lw-level:var(--lw-sage)}
.lw-teachers .teacher-materials>article[data-lw-level="2"]{--lw-level:var(--lw-honey)}
.lw-teachers .teacher-materials h2{font:600 1.15rem/1.4 var(--lw-ui)!important;margin:8px 0 12px}
.lw-teachers .teacher-materials p{font-size:.925rem;line-height:1.5;margin:8px 0}
.lw-teachers .teacher-materials p:has(>a){margin:0}
.lw-teachers .teacher-materials p>a{display:inline-flex;align-items:center;min-height:44px;margin:0;font-weight:600}
.lw-teachers .lesson-downloads{display:flex;flex-wrap:wrap;gap:8px 16px;margin:8px 0 0}
.lw-teachers .lesson-downloads a{display:inline-flex;align-items:center;min-height:44px;font-size:.85rem}
.lw-learn .path-hero{gap:24px;align-items:start}
.lw-learn .path-hero>div>h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0 0 12px}
.lw-learn .path-hero>div>p{font-size:1rem;line-height:1.5}
.lw-learn .path-grid{gap:16px;margin-block:24px}
.lw-learn .path-card{padding:20px;border-radius:16px;background:#faf8f1!important}
.lw-learn .path-card .path-glyph{display:none}
.lw-learn .path-card h2{font:600 1.15rem/1.4 var(--lw-ui)!important;margin:0 0 10px}
.lw-learn .path-card p,.lw-learn .path-card li{font-size:.925rem;line-height:1.5}
.lw-learn .path-card ol{padding-left:20px;margin:12px 0 0}
.lw-learn .path-card li>a{display:inline-block;padding-block:8px}
.lw-learn .sentence-lab{border-radius:16px;padding:24px}
.lw-learn .sentence-lab h2{font-size:1.35rem!important}
.lw-learn .lab-choices button{min-height:44px}
.lw-marketing .opening-copy .eyebrow:empty{display:none}
.lw-data main{max-width:1168px}
.lw-data .grid{gap:16px}
.lw-data .card{border-radius:16px;box-shadow:none}
.lw-data .actions{display:flex;gap:8px;flex-wrap:wrap}
.lw-data .button{min-height:44px;border-radius:12px}
.lw-support .help-intro{padding-block:24px 32px}
.lw-support .help-answers{padding-top:28px}
.lw-support .help-question summary{min-height:48px}
/* The existing native language select needs an icon lane even at320px. */
.lw-dictionary #dictionary-fields .dictionary-language{min-width:164px}
.lw-dictionary #dictionary-language{width:100%;min-width:164px;padding-inline-end:36px!important}
.lw-article .quiz .paper-link.dark:is(:hover,:active,:focus-visible){background:#193c2c;color:#fff}
@media(max-width:760px){
 .lw-guides .lw-guide-link{grid-template-columns:76px minmax(0,1fr);padding:14px;gap:6px 12px}
 .lw-guides .lw-guide-link img{width:76px;height:56px}
 .lw-guides .guide-directory{padding-top:16px}
 .lw-workspace [data-study-goal]{padding:16px!important}
 .lw-workspace [data-study-goal]>.learning-goal-actions{align-items:center}
}
@media(max-width:600px){
 [data-lw-system] .lw-directory-header{padding:16px 0 12px!important;margin-bottom:12px!important}
 [data-lw-system] .lw-directory-header h1,.lw-tool :is(.resource-hero,.pinyin-hero) h1,.lw-workspace .study-hero h1,.lw-learn .path-hero>div>h1{font-size:2rem!important}
 .lw-filter{grid-template-columns:1fr;gap:10px}
 .lw-read .rl-main{padding:20px 18px 48px}
 .lw-read .rl-heading h1{font-size:2rem}
 .lw-read .rl-library-nav{gap:16px;margin-bottom:16px}
 .lw-read .rl-heading{margin-bottom:16px}
 .lw-read .rl-filters{padding:0;gap:10px}
 .lw-read .rl-filters :is(.rl-scale-field,.rl-level-field){flex:1 1 120px;min-width:0}
 .lw-read .rl-catalog{grid-template-columns:1fr;gap:8px}
 .lw-read .rl-entry>a{padding:16px;min-height:0}
 .lw-guides .lw-guide-link>span{font-size:.95rem}
 .lw-guides .lw-guide-link>p{font-size:.85rem}
 .lw-vocabulary .vocab-table{table-layout:auto}
 .lw-vocabulary .vocab-table thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%)}
 .lw-vocabulary .vocab-table tbody{display:grid;gap:8px}
 .lw-vocabulary .vocab-table tr{display:grid;grid-template-columns:minmax(72px,auto) 1fr;gap:4px 16px;padding:12px 16px;background:#faf8f1;border-radius:16px}
 .lw-vocabulary .vocab-table td,.lw-vocabulary .vocab-table td:nth-child(2){width:auto!important;padding:0;border-radius:0;background:transparent}
 .lw-vocabulary .vocab-table td:nth-child(2){align-self:center;justify-self:end}
 .lw-vocabulary .vocab-table td:last-child{grid-column:1/-1}
 .lw-learning>main{padding:20px 18px}
 .lw-learning h1{font-size:2rem;margin:0 0 12px}
 .lw-learning .learning-card{padding:18px}
 .lw-learning .learning-card h2{font-size:1.1rem}
 .lw-learning .learning-grid{grid-template-columns:1fr}
 .lw-tool .pinyin-panel textarea{min-height:112px;height:112px}
 .lw-tool .pinyin-actions .paper-link{padding:10px 12px;font-size:.875rem}
 .lw-tool .hsk-daily-index{grid-template-columns:1fr}
 .lw-learn .path-hero{display:flex;flex-direction:column;gap:16px}
 .lw-learn .path-hero>div,.lw-learn .sentence-lab{width:100%}
 .lw-learn .sentence-lab{padding:18px}
 .lw-dictionary #dictionary-fields{grid-template-columns:minmax(0,1fr) auto!important}
 .lw-dictionary #dictionary-fields .dictionary-input-wrap{grid-column:1/-1}
 .lw-dictionary #dictionary-fields .dictionary-language{grid-column:1;width:100%}
 .lw-dictionary #dictionary-fields .dictionary-submit{grid-column:2;align-self:end}
}
@media(max-width:380px){
 .lw-dictionary #dictionary-fields{grid-template-columns:minmax(0,1fr)!important}
 .lw-dictionary #dictionary-fields .dictionary-submit{grid-column:1;width:100%}
}
@media(prefers-reduced-motion:reduce){[data-lw-system] :is(.lw-guide-link,.rl-entry>a){transition:none}}
}