:root{--bg:#f7f5ef;--paper:#fffefa;--ink:#233d35;--muted:#6c776e;--accent:#b75534;--line:#dcded1;--light:#e7ecdf;--serif:Georgia,'Songti SC','STSong',serif;--sans:Inter,-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei',sans-serif;--display:var(--sans);--radius:20px} *{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.65}button,a,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:default}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:4px}button{border:0;background:none}h1,h2,h3,p{margin:0}svg{vertical-align:middle}button.primary{background:var(--ink);color:var(--paper);padding:14px 24px;border-radius:7px;display:inline-flex;align-items:center;gap:24px;font-weight:600}button.text{padding:10px 0;border-bottom:1px solid currentColor}button.line{border:1px solid var(--line);padding:9px 17px;border-radius:6px}.wrap{max-width:1240px;margin:auto;padding:0 54px}.demo{background:#202823;color:#eef2e9;display:flex;align-items:center;justify-content:space-between;padding:10px 30px;gap:12px;min-height:62px;font-size:12px}.demo-caption{display:flex;align-items:center;gap:12px}.demo-caption b{letter-spacing:2px;font-weight:500}.demo-caption span{opacity:.6}.switches{display:flex;gap:8px;flex-wrap:wrap}.switches button{color:#cdd4ce;border:1px solid #485148;border-radius:5px;padding:7px 13px;font-size:12px}.switches button.active{background:#eef0e6;color:#253a31;border-color:#eef0e6}.demo button.view{border-style:dashed}.masthead{height:92px;display:flex;align-items:center;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;min-width:190px}.brand-mark{width:38px;height:38px;border-radius:50%;border:1px solid var(--ink);display:grid;place-items:center;font-family:var(--serif);font-size:21px}.brand-cn{font-size:22px;font-family:var(--serif);letter-spacing:4px;line-height:1.2}.brand-en{font-size:9px;letter-spacing:2.5px;color:var(--muted);margin-top:4px}.nav{display:flex;align-items:center;gap:23px;font-size:12px;white-space:nowrap}.nav button{padding:12px 0}.nav button.selected{border-bottom:2px solid var(--accent)}.nav .contact{margin-left:9px}.utilities{display:flex;align-items:center;gap:17px;font-size:12px}.lang{border:1px solid var(--line);padding:7px 11px;border-radius:5px}.mobile-menu{display:none}.eyebrow{font-size:11px;letter-spacing:2.3px;text-transform:uppercase;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:12px}.eyebrow:before{content:'';display:block;width:25px;height:1px;background:var(--accent)}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:48px;align-items:center;padding:64px 0 60px}.hero h1{font-family:var(--display);font-size:58px;line-height:1.2;letter-spacing:-2px;font-weight:550;margin:22px 0}.hero h1 em{color:var(--accent);font-style:normal}.hero .intro{font-size:15px;max-width:420px;color:var(--muted);line-height:1.95}.hero-actions{display:flex;align-items:center;gap:25px;margin-top:30px}.hero-actions .sub{font-size:12px}.footnote{font-size:11px;color:var(--muted);margin-top:21px}.art{position:relative;min-height:423px;display:flex;align-items:center;justify-content:center;background:var(--light);border-radius:var(--radius);overflow:hidden}.art:before{content:'';position:absolute;inset:29px;border:1px solid color-mix(in srgb,var(--ink) 12%,transparent);border-radius:50%}.art:after{content:'';position:absolute;width:380px;height:380px;border:1px solid color-mix(in srgb,var(--ink) 10%,transparent);border-radius:50%;right:-160px;bottom:-230px}.character-card{position:relative;width:265px;min-height:290px;background:var(--paper);border:1px solid var(--line);padding:32px 27px 22px;border-radius:10px;transform:rotate(-5deg);box-shadow:0 18px 40px #263e3010;z-index:1}.card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:var(--muted)}.hero-glyph{font-family:'Kaiti SC','STKaiti',var(--serif);font-size:104px;line-height:1.35;letter-spacing:5px;text-align:center;margin-top:16px;white-space:nowrap}.hero-pinyin{text-align:center;font-size:20px;letter-spacing:4px}.card-bottom{border-top:1px solid var(--line);margin-top:19px;padding-top:15px;font-size:11px;display:flex;justify-content:space-between}.small-note{position:absolute;right:22px;bottom:12px;z-index:2;font-size:11px}.small-note .small-cn{font-family:var(--serif);font-size:14px;color:var(--muted);letter-spacing:1px}.small-note .small-en{display:none}.art-label{position:absolute;top:24px;left:26px;color:var(--muted);font-size:10px;letter-spacing:2px}.seal{display:none}.level-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}.strip-title{font-size:11px;color:var(--muted);letter-spacing:1px}.levels{display:flex;gap:12px;flex:1;justify-content:flex-end}.level{padding:7px 17px;border:1px solid var(--line);border-radius:6px;min-width:90px;text-align:left;font-size:12px}.level small{display:block;font-size:9px;color:var(--muted);line-height:1.5}.level.current{background:var(--ink);color:var(--paper);border-color:var(--ink)}.level.current small{color:#d6dfd5}.section{padding:55px 0}.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:24px}.section h2{font-family:var(--display);font-size:29px;font-weight:500;letter-spacing:-.5px}.section-head p{color:var(--muted);font-size:12px;margin-top:7px}.section-head button{font-size:12px;white-space:nowrap}.lesson-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.lesson-card{border:1px solid var(--line);border-radius:var(--radius);padding:25px;background:var(--paper);text-align:left;transition:transform .2s}.lesson-card:hover{transform:translateY(-3px)}.lesson-card-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px}.lesson-no{font-family:var(--serif);font-size:30px;color:var(--accent);line-height:1}.tag{font-size:9px;padding:4px 8px;background:var(--light);border-radius:3px;color:var(--muted)}.lesson-card h3{font-size:19px;font-weight:500;margin-bottom:4px}.lesson-card .translation{font-size:12px;color:var(--muted)}.lesson-card-foot{margin-top:24px;border-top:1px solid var(--line);padding-top:14px;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.feature-section{background:var(--light);margin-top:10px}.features{display:grid;grid-template-columns:repeat(3,1fr);gap:50px;padding:40px 0}.features .num{font-size:10px;color:var(--accent);letter-spacing:2px}.features h3{font-weight:500;font-size:18px;margin:11px 0 8px}.features p{font-size:12px;color:var(--muted)}footer{padding:28px 0;font-size:10px;color:var(--muted);display:flex;justify-content:space-between;gap:20px}.breadcrumb{color:var(--muted);font-size:11px;padding:25px 0}.lesson-heading{padding:12px 0 32px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}.lesson-heading h1{font-family:var(--display);font-size:38px;font-weight:500;line-height:1.35;margin:12px 0 8px}.lesson-heading p{font-size:13px;color:var(--muted)}.lesson-layout{display:grid;grid-template-columns:205px 1fr;gap:45px;padding:35px 0 65px}.sidebar{border-right:1px solid var(--line);padding-right:25px}.sidebar-title{font-size:10px;color:var(--muted);letter-spacing:2px;margin-bottom:20px}.sidebar button{display:block;width:100%;text-align:left;padding:12px 11px;border-radius:5px;font-size:12px;margin:4px 0}.sidebar button.active{background:var(--light);color:var(--ink);font-weight:600}.sidebar .index{color:var(--muted);margin-right:10px;font-size:10px}.sidebar-note{border-top:1px solid var(--line);margin-top:28px;padding-top:20px;color:var(--muted);font-size:10px;line-height:1.9}.study-heading{font-size:25px;font-family:var(--display);font-weight:500;margin-bottom:6px}.study-intro{font-size:13px;color:var(--muted);margin-bottom:25px}.objectives{display:grid;grid-template-columns:1fr 1fr;gap:17px}.objective{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:25px}.objective .cn{font-size:35px;font-family:var(--serif);margin-bottom:20px}.objective h3{font-size:16px;font-weight:500}.objective p{font-size:12px;color:var(--muted);margin-top:9px}.inline-note{padding:17px 20px;background:var(--light);border-left:2px solid var(--accent);font-size:12px;margin:23px 0;color:var(--muted)}.text-header{display:flex;align-items:center;justify-content:space-between;margin:22px 0 15px;font-size:12px}.toggle{border:1px solid var(--line);padding:5px 10px;border-radius:4px;font-size:10px;margin-left:5px}.dialogue{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px}.speech{display:flex;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)}.speech:last-child{border:0}.avatar{min-width:35px;height:35px;border-radius:50%;background:var(--light);display:grid;place-items:center;font-family:var(--serif);font-size:17px}.speaker{font-size:10px;color:var(--muted)}.sentence{font-size:23px;margin:5px 0}.py,.en{font-size:12px;color:var(--muted)}.audio-note{font-size:10px;color:var(--muted);border:1px solid var(--line);padding:6px 10px;border-radius:4px}.words{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.word{background:var(--paper);border:1px solid var(--line);padding:20px;border-radius:10px;text-align:left}.word .hanzi{font-family:var(--serif);font-size:28px;margin-bottom:7px}.word small{font-size:11px;color:var(--muted);display:block}.word .gloss{font-size:11px;margin-top:11px;border-top:1px solid var(--line);padding-top:9px}.tip-card{padding:25px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);margin:16px 0}.tip-card h3{font-size:18px;font-weight:500}.tip-card p{font-size:13px;color:var(--muted);margin:8px 0}.pronounce{font-family:var(--serif);font-size:48px;letter-spacing:12px;margin:15px 0}.history-glyph{font-size:95px;font-family:var(--serif);line-height:1.3}.history-row{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}.history-stage{border:1px solid var(--line);border-radius:6px;text-align:center;padding:16px 5px;background:var(--paper)}.history-stage b{font-size:11px;font-weight:500;display:block}.history-stage span{display:block;color:var(--muted);font-size:10px;margin-top:15px}.history-stage .real{font-family:var(--serif);font-size:38px;color:var(--ink);line-height:1}.quiz-q{font-size:25px;font-family:var(--serif);margin:25px 0}.answers{display:flex;gap:15px}.answers button{border:1px solid var(--line);border-radius:7px;padding:15px 30px;background:var(--paper);font-size:20px}.feedback{padding:18px;background:var(--light);margin-top:22px;font-size:13px}.notice{font-size:11px;color:var(--muted);margin-top:18px}dialog{max-height:90vh;overflow-y:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);padding:30px;max-width:470px;width:calc(100% - 36px)}dialog::backdrop{background:#17291c66}dialog .close{float:right;font-size:22px;padding:0 5px}dialog h2{font-family:var(--serif);font-size:30px;margin:12px 0}dialog p{font-size:13px;color:var(--muted);margin:10px 0}.search-input{width:100%;padding:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:5px;margin:10px 0}.search-result{display:block;width:100%;text-align:left;border-bottom:1px solid var(--line);padding:12px 0;font-size:13px} html[data-theme=book]{--bg:#f4efe3;--paper:#fbf8f0;--ink:#243947;--muted:#797b73;--accent:#a33f2f;--line:#d8d0bd;--light:#e9e3d4;--display:var(--serif);--radius:2px}html[data-theme=book] body{background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.035' filter='url(%23n)'/%3E%3C/svg%3E")}html[data-theme=book] .brand-mark{border-radius:2px;background:var(--accent);color:var(--paper);border-color:var(--accent)}html[data-theme=book] .hero h1{font-size:60px;letter-spacing:0;line-height:1.28;font-weight:500}html[data-theme=book] .art{background:transparent;border:1px solid var(--line);border-top:3px double var(--line);border-bottom:3px double var(--line)}html[data-theme=book] .art:before{border-radius:0;inset:16px;border-color:var(--line)}html[data-theme=book] .art:after{display:none}html[data-theme=book] .character-card{transform:rotate(0);box-shadow:none;border-radius:0;background:transparent;border:0;width:280px}html[data-theme=book] .hero-glyph{font-size:113px;letter-spacing:15px}html[data-theme=book] .card-top{justify-content:center;gap:12px}html[data-theme=book] .small-note{transform:none;right:24px;bottom:24px;border:0;background:transparent;box-shadow:none;padding:0;writing-mode:vertical-rl;letter-spacing:3px;font-family:var(--serif)}html[data-theme=book] .small-note .small-cn{font-size:16px;color:var(--muted);margin:0 8px 0 0}html[data-theme=book] .small-note .small-en{display:none}html[data-theme=book] .seal{display:grid;place-items:center;position:absolute;top:57px;right:40px;width:29px;height:42px;border:1px solid var(--accent);color:var(--accent);font-family:var(--serif);font-size:15px;line-height:1.1}html[data-theme=book] .level,html[data-theme=book] button.primary{border-radius:2px}html[data-theme=book] .tag{background:transparent;border:1px solid var(--line)}html[data-theme=book] .lesson-no{font-size:33px}html[data-theme=book] .lesson-card{border-top:2px solid var(--ink)}html[data-theme=book] .features h3{font-family:var(--serif);font-size:20px}html[data-theme=book] .word{border-radius:2px}html[data-theme=book] .word .hanzi{font-size:32px}html[data-theme=book] .sidebar button{border-radius:0}html[data-theme=book] .history-stage{border-radius:0} @media(min-width:1500px){.wrap{max-width:1370px}.hero{gap:75px;padding-top:80px;padding-bottom:80px}.hero h1{font-size:66px}.art{min-height:470px}} @media(max-width:1050px){.wrap{padding:0 30px}.brand{min-width:140px}.nav{gap:14px}.hero{gap:30px}.hero h1,html[data-theme=book] .hero h1{font-size:45px}.hero-actions{gap:15px}.level{min-width:75px;padding:7px 10px}.levels{gap:8px}.utilities{gap:10px}.art{min-height:390px}.lesson-layout{grid-template-columns:165px 1fr;gap:25px}} @media(max-width:760px){.demo{padding:10px 16px;align-items:flex-start;flex-direction:column;gap:8px}.demo-caption span{display:none}.switches{gap:6px}.switches button{padding:5px 9px;font-size:10px}.wrap{padding:0 21px}.masthead{height:75px}.nav{display:none}.mobile-menu{display:block;font-size:18px}.brand{min-width:0}.brand-cn{font-size:20px}.brand-en{font-size:8px}.hero{grid-template-columns:1fr;gap:32px;padding:38px 0 33px}.hero h1,html[data-theme=book] .hero h1{font-size:43px;line-height:1.23;letter-spacing:-1px;margin:18px 0}.hero .intro{font-size:13px;max-width:100%}.hero-actions{gap:22px;margin-top:22px}.hero-actions .sub{font-size:11px}.hero-actions .primary{padding:12px 18px;font-size:13px;gap:14px}.art{min-height:330px}.character-card{width:225px;padding:22px;min-height:255px}.hero-glyph{font-size:85px}.small-note{bottom:12px;right:18px;padding:0}.art-label{font-size:9px}.footnote{margin-top:16px}.level-strip{align-items:flex-start;flex-direction:column;gap:13px}.levels{display:grid;grid-template-columns:repeat(3,1fr);width:100%}.level{min-width:0}.section{padding:35px 0}.section h2{font-size:25px}.section-head{align-items:center}.lesson-grid{grid-template-columns:1fr}.lesson-card{padding:21px}.lesson-card-top{margin-bottom:15px}.features{grid-template-columns:1fr;gap:25px;padding:30px 0}.features h3{margin:5px 0}.features .num{float:right}.feature-section{margin-top:0}footer{flex-direction:column;gap:6px;padding:20px 0}.lesson-heading{align-items:flex-start;flex-direction:column}.lesson-heading h1{font-size:30px}.lesson-layout{display:block;padding-top:15px}.sidebar{border-right:0;border-bottom:1px solid var(--line);padding:0 0 14px;display:flex;overflow:auto;gap:5px;margin-bottom:25px}.sidebar button{width:auto;white-space:nowrap;padding:8px 10px;font-size:11px}.sidebar-title,.sidebar-note,.sidebar .index{display:none}.study-heading{font-size:23px}.objectives{grid-template-columns:1fr}.words{grid-template-columns:repeat(2,1fr)}.word{padding:16px}.history-row{gap:4px}.history-stage{padding:13px 3px}.history-stage b{font-size:9px}.history-stage span{font-size:9px}.history-stage .real{font-size:29px}.speech{gap:12px}.dialogue{padding:17px}.sentence{font-size:20px}.en{font-size:11px}.audio-note{font-size:9px}.lesson-heading .primary{display:none}} @media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* Vocabulary detail and variable practice */ dialog{max-width:620px}dialog #modalBody>p{margin:5px 0}.word-audio{margin:10px 0}.word-audio audio{width:100%;height:40px}.audio-credit{font-size:11px;color:var(--muted);border-bottom:1px solid var(--line);padding:0 0 9px;margin-bottom:12px}.audio-credit summary{cursor:pointer}.audio-credit a{text-decoration:underline}.word-section-label{font-size:11px;letter-spacing:1px;color:var(--accent);margin:12px 0 8px}.component-list{border:1px solid var(--line)}.component-row{display:flex;align-items:center;gap:18px;padding:6px 15px;border-bottom:1px solid var(--line)}.component-row:last-child{border:0}.component-row>span{font-family:var(--serif);font-size:29px;min-width:35px}.component-row p{font-size:12px}.word-example{background:var(--light);padding:15px 18px}.word-example .sentence{font-size:21px}.component-list+.notice,.word-example+.notice{margin-top:9px}.word-example .py{line-height:1.8}.word-example .en{margin-top:6px}.phonetic-table>div{display:grid;grid-template-columns:145px 1fr;gap:15px;border-top:1px solid var(--line);padding:13px 0;font-size:12px}.phonetic-table b{font-weight:500}.phonetic-table span{color:var(--muted)}.answers button{font-size:16px}.answers button:disabled{opacity:1;cursor:default}.answers button[aria-pressed=true]{outline:2px solid var(--accent);outline-offset:2px}@media(max-width:760px){.phonetic-table>div{grid-template-columns:1fr;gap:5px}.quiz-q{font-size:22px}.answers button{padding:12px 17px}dialog{padding:23px}.word-example .sentence{font-size:20px}} @font-face{font-family:'Zhiyu Chinese';src:url(/assets/91be90cdec8f9c60d4ef.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Zhiyu Latin';src:url(/assets/c0aca45f6df0e1c50cb8.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:'Zhiyu Pinyin';src:url(/assets/2fc65c8c53101527d48f.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap} .account-nav{border:1px solid var(--line);background:transparent;padding:7px 12px;white-space:nowrap;font-size:12px}.portal-heading{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:45px 0 20px}.portal-heading h1{font:40px/1.3 var(--display);margin:12px 0}.portal-heading p{color:var(--muted)}.service-note{padding:12px 16px;border:1px solid var(--line);font-size:12px;color:var(--muted);background:var(--paper);margin:14px 0 26px}.portal-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0}.portal-stats>div{padding:20px 25px;border:1px solid var(--line);background:var(--paper)}.portal-stats b{font:34px/1.3 var(--display);display:block}.portal-stats span{font-size:12px;color:var(--muted)}.portal-card{border:1px solid var(--line);padding:26px;background:var(--paper);margin-bottom:24px;min-width:0}.portal-card h2{font:25px/1.4 var(--display);margin:0 0 15px}.portal-row{display:flex;align-items:center;justify-content:space-between;gap:20px}.portal-two{display:grid;grid-template-columns:1fr 1fr;gap:20px}.progress-track{height:6px;background:var(--light);margin:24px 0 14px}.progress-track span{height:100%;display:block;background:var(--accent)}.section-tags{display:flex;gap:14px;flex-wrap:wrap;font-size:12px}.portal-field{display:block;margin:0 0 16px}.portal-field>span{font-size:12px;display:block;font-weight:600;margin-bottom:6px}.portal-field input,.portal-field textarea,.portal-field select{display:block;width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;padding:11px 12px;border-radius:2px}.portal-field textarea{min-height:80px;resize:vertical}.portal-field input:focus,.portal-field textarea:focus,.portal-field select:focus{outline:2px solid var(--accent);outline-offset:2px}.form-error{color:#9a3026;white-space:pre-wrap}.text-link{padding:3px 0;border:0;background:none;text-decoration:underline;font-size:13px}.mail-plans{display:grid;gap:10px;margin:20px 0}.mail-plans>div{padding:14px 16px;background:var(--bg);border:1px solid var(--line);overflow-wrap:anywhere}.mail-plans b{display:block;font-size:14px}.mail-plans span{color:var(--muted);display:block;font-size:12px;margin-top:4px}.admin-layout{display:grid;grid-template-columns:180px minmax(0,1fr);gap:24px;align-items:start}.admin-nav{display:grid;gap:7px;position:sticky;top:20px}.admin-nav button{padding:13px 17px;background:transparent;border:1px solid transparent;text-align:left;font-size:14px}.admin-nav .active{background:var(--paper);border-color:var(--line);border-left:3px solid var(--accent)}.editor-word{border-top:1px solid var(--line);padding:15px 0}.editor-word summary{cursor:pointer;font-weight:600;list-style-position:inside}.editor-word summary>span{font-weight:400;color:var(--muted);font-size:13px}.editor-word[open] summary{margin-bottom:20px}.editor-actions{display:flex;flex-wrap:wrap;gap:12px;padding-top:15px;border-top:1px solid var(--line)}.editor-word .portal-field{margin-bottom:12px}.scroll-table{overflow-x:auto}table{border-collapse:collapse;width:100%;text-align:left;font-size:13px}th,td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top}th{font-weight:600;color:var(--muted)}.empty-state{color:var(--muted);padding:20px 0}.message-preview{border-top:1px solid var(--line);padding:16px 0}.message-preview h3{font-size:15px;margin:9px 0}.message-preview p,.message-body{white-space:pre-wrap;overflow-wrap:anywhere}.message-preview small{color:var(--muted)}.pill{display:inline-block;background:var(--light);padding:3px 9px;font-size:11px}.setup-steps{padding-left:22px}.setup-steps li{padding:8px 0}.honey{position:absolute;left:-9999px;opacity:0}.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:10000;background:var(--ink);color:var(--paper);padding:13px 22px;max-width:calc(100vw - 30px);box-shadow:0 5px 30px #0002;font-size:14px}.toast.error{background:#943d31}.lesson-save{border-top:1px solid var(--line);margin-top:20px;padding:15px 0}.lesson-save p{font-size:12px;color:var(--muted)}.lesson-save button{font-size:12px;width:100%;padding:10px 8px}.preview-banner{padding:12px;text-align:center;background:#ead4b3;position:sticky;top:0;z-index:99;font-size:13px}.preview-banner button{border:0;background:none;text-decoration:underline;margin-left:12px}.masthead{gap:14px}.brand{min-width:130px}.nav{gap:16px}.utilities{gap:10px}.utilities .account-nav{font-size:12px}@media(max-width:1100px){.nav{gap:10px}.nav button{font-size:12px}.utilities{gap:5px}.account-nav{padding:7px 8px}}@media(max-width:760px){.portal-heading{align-items:flex-start;padding-top:26px;flex-direction:column}.portal-heading h1{font-size:30px}.portal-stats{gap:8px}.portal-stats>div{padding:14px 10px}.portal-stats b{font-size:25px}.portal-stats span{font-size:11px}.portal-two{grid-template-columns:1fr;gap:0}.portal-card{padding:19px}.admin-layout{grid-template-columns:1fr;gap:14px}.admin-nav{position:static;display:flex;overflow-x:auto}.admin-nav button{white-space:nowrap;padding:9px 12px}.portal-row{align-items:flex-start;flex-wrap:wrap}.masthead{gap:8px}.brand{min-width:100px}.utilities .account-nav{font-size:11px;padding:6px}.lang{font-size:11px}.preview-banner{font-size:11px}.editor-actions button{flex:1 1 auto}} .five-course-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0}.five-course-grid .course-card{background:var(--paper);border:1px solid var(--line);padding:24px;text-align:left;min-height:190px}.five-course-grid .course-card:hover{border-color:var(--accent)}.course-num{font:26px var(--display);color:var(--accent)}.course-status{font-size:11px;color:var(--muted);margin:8px 0}.five-course-grid h3{font:23px var(--display);margin:12px 0}.five-course-grid p,.five-course-grid small{font-size:12px;color:var(--muted)}.dialogue-card{padding:24px 0;border-top:1px solid var(--line);margin-top:24px}.dialogue-card h3{font:27px var(--display);margin:14px 0}.dialogue-card audio,.tip-card audio{width:100%;margin:12px 0;height:40px}.scene{color:var(--muted);font-size:13px}.vocab-group{margin:26px 0 36px;scroll-margin-top:20px}.vocab-group h4{font-size:13px;margin-top:20px}.vocab{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}.word{border:1px solid var(--line);background:var(--paper);padding:20px 16px;text-align:left;display:flex;flex-direction:column;gap:7px;min-width:0}.word strong{font:29px var(--display)}.word .en{color:var(--muted);font-size:12px}.word:hover{border-color:var(--accent)}.grammar-pattern{font-size:16px;background:var(--light);padding:12px 16px;margin:16px 0}.tip-card .word-example{margin-top:14px}.stroke-tabs,.stroke-actions{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}.stroke-grid{width:200px;height:200px;border:1px solid #ded4c7;background:linear-gradient(90deg,transparent 49.7%,#e5ded4 50%,transparent 50.3%),linear-gradient(transparent 49.7%,#e5ded4 50%,transparent 50.3%);margin:12px 0}.lesson-neighbours{display:grid;gap:8px;margin:20px 0}.lesson-neighbours button{font-size:12px;padding:8px}.learning-course-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.learning-course-grid .portal-card{margin-bottom:0}.learning-course-grid{margin-bottom:24px}.editor-line{border-top:1px dashed var(--line);padding-top:14px;margin-top:16px}@media(max-width:760px){.five-course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.five-course-grid .course-card{padding:16px;min-height:180px}.five-course-grid h3{font-size:21px}.vocab{grid-template-columns:repeat(2,minmax(0,1fr))}.word{padding:16px 12px}.word strong{font-size:26px}.learning-course-grid{grid-template-columns:1fr}.dialogue-card h3{font-size:23px}} /* Study interface: real language content takes priority over decorative chrome. */ :root,html[data-theme=study],html[data-theme=book],html[data-theme=warm]{--bg:#fff;--paper:#fff;--ink:#273449;--muted:#59677d;--accent:#4f5fbf;--line:#dee5ef;--light:#e9edfa;--sans:'Avenir Next','PingFang SC','Microsoft YaHei',sans-serif;--serif:var(--sans);--display:var(--sans);--radius:10px} html{scroll-padding-top:24px}body,html[data-theme] body{background:#fff;background-image:none;color:var(--ink);font:16px/1.65 var(--sans)}button,input,textarea,select{font-family:inherit}button{transition:background-color .16s,color .16s,border-color .16s;touch-action:manipulation}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #4f5fbf;outline-offset:4px}button:disabled{opacity:.55}button[hidden],audio[hidden]{display:none!important}.wrap{max-width:1252px;padding:0 36px;margin:0 auto;width:100%}.demo,.eyebrow{display:none!important}.primary,.line{min-height:44px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600;line-height:1.4;padding:12px 20px}.primary{background:#4f5fbf;border:1px solid #4f5fbf;color:#fff}.primary:hover{background:#414fa7;border-color:#414fa7}.line{background:#fff;border:1px solid #cdd6e2;color:#293a52}.line:hover{background:#f1f5fc;border-color:#a9b9d0}h1,h2,h3,h4,p{letter-spacing:normal}h1,h2,h3{font-family:var(--sans);font-weight:650}.zh-header.masthead{height:94px;display:flex;align-items:center;gap:30px;border-bottom:1px solid var(--line);padding:0;margin:0;position:relative;z-index:2;background:white}.zh-brand{display:flex;align-items:center;gap:11px;border:0;background:transparent;padding:0;min-height:48px;text-align:left;flex-shrink:0}.zh-brand-symbol{width:38px;height:42px;color:#4f5fbf;display:grid;place-items:center}.zh-brand-symbol svg{width:33px;height:33px;stroke-width:1.65}.zh-brand b{font-size:21px;line-height:1.25;display:block;font-weight:700;letter-spacing:.06em}.zh-brand small{font-size:11px;display:block;letter-spacing:.03em;color:#59677d;line-height:1.7}.zh-level-nav{display:flex;align-self:stretch;align-items:center;gap:2px;flex:1;justify-content:center}.zh-level-nav :is(button,a){font-size:13px;font-weight:500;border:0;background:transparent;position:relative;padding:14px 11px;min-height:44px;color:#59677d;white-space:nowrap}.zh-level-nav :is(button,a).selected{color:#4f5fbf;font-weight:700}.zh-level-nav :is(button,a).selected:after{content:'';position:absolute;bottom:5px;left:11px;right:11px;height:2px;background:#4f5fbf;border-radius:2px}.zh-level-nav :is(button,a):hover{color:#4f5fbf;background:#f0f3fa}.zh-header-actions{display:flex;align-items:center;gap:12px;flex-shrink:0}.zh-header-actions button{min-height:44px;font-size:13px;font-weight:500;border:0;background:transparent;padding:8px 4px;white-space:nowrap}.zh-header-actions .zh-user-button{padding:10px 15px;background:#4f5fbf;border-radius:6px;color:white}.zh-header-actions .zh-user-button:hover{background:#414fa7}.zh-header-actions .zh-language{border-left:1px solid #dee5ef;padding-left:16px;margin-left:0;min-width:40px;color:#334155}.zh-icon-button{width:35px;display:grid;place-items:center;color:#45566c}.zh-home{padding-top:0}.zh-welcome{padding:62px 0 64px;display:grid;grid-template-columns:1.12fr .88fr;gap:84px;align-items:center}.zh-course-label{font-size:13px;display:inline-flex;align-items:center;color:#4f5fbf;font-weight:650;background:#e9edfa;padding:4px 10px;border-radius:4px;line-height:1.6}.zh-welcome h1{font-size:43px;line-height:1.4;letter-spacing:-.035em;margin:18px 0 18px;font-weight:650}.zh-welcome-copy>p{font-size:16px;line-height:1.9;color:#59677d;margin:0;max-width:520px}.zh-start-actions{display:flex;align-items:center;gap:23px;margin-top:28px}.zh-start-actions .primary{font-size:15px;padding:14px 24px;min-height:50px}.zh-browse{border:0;background:none;border-bottom:1px solid #9cacc2;padding:9px 0;color:#354961;font-size:14px}.zh-welcome-copy .zh-welcome-note{font-size:13px;margin-top:20px;color:#59677d}.zh-sound-sample{background:#e9edfa;border-radius:16px;padding:25px 30px 20px;position:relative;color:#1c3354;max-width:410px;min-width:0}.zh-sample-top{display:flex;justify-content:space-between;font-size:13px;color:#50678c}.zh-sample-top span:last-child{font-size:12px;border:1px solid #c7d7f2;padding:0 9px;border-radius:4px;line-height:24px}.zh-pinyin-sample{display:flex;justify-content:center;gap:60px;margin:20px 0 0;font-size:22px;color:#4f5fbf;line-height:1.6}.zh-hanzi-sample{text-align:center;white-space:pre;font:82px/1.4 'Kaiti SC','STKaiti','KaiTi',serif;letter-spacing:.05em;word-spacing:-.06em;color:#24456f;margin-top:0}.zh-meaning{text-align:center;font-size:18px;margin:0 0 26px;color:#50678c}.zh-sample-controls{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #cfdef6;padding-top:18px;gap:12px}.zh-listen-button{background:#4f5fbf;color:white;border:0;border-radius:7px;padding:10px 17px;min-height:44px;display:inline-flex;gap:8px;align-items:center;font-size:14px;font-weight:600}.zh-listen-button:hover{background:#414fa7}.zh-listen-button[aria-pressed=true]{background:#36448f}.zh-sample-link{display:inline-flex;align-items:center;gap:4px;background:none;border:0;font-size:13px;color:#335d96;min-height:44px}.zh-listen-note{margin:10px 0 0;color:#56709a;font-size:12px;min-height:22px;text-align:left}.zh-section-heading{display:flex;justify-content:space-between;gap:24px;align-items:flex-end;padding:0 0 20px;border-bottom:1px solid #dee5ef}.zh-section-heading h2{font-size:25px;line-height:1.4;margin:0 0 8px;letter-spacing:-.02em}.zh-section-heading p{font-size:14px;color:#59677d;margin:0}.zh-total{font-size:13px;color:#59677d;white-space:nowrap;padding-bottom:2px}.zh-catalog-layout{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:38px;margin:0 0 60px}.zh-course-list{min-width:0}.zh-course-row{width:100%;border:0;border-bottom:1px solid #e4e9f0;background:#fff;text-align:left;padding:24px 8px;display:grid;grid-template-columns:40px minmax(160px,1fr) minmax(70px,.72fr) 55px 20px;align-items:center;gap:15px;color:#273449;min-height:112px}.zh-course-row:hover{background:#f0f3fa}.zh-lesson-number{font-size:16px;font-weight:600;color:#7a8ba2;font-variant-numeric:tabular-nums}.zh-row-title{display:flex;flex-direction:column;gap:5px;min-width:0}.zh-row-title strong{font-size:19px;font-weight:600;line-height:1.6}.zh-row-title>span{font-size:13px;line-height:1.5;color:#59677d}.zh-row-topic{font-size:13px;line-height:1.6;color:#59677d}.zh-row-count{font-size:12px;color:#59677d;white-space:nowrap}.zh-row-go{color:#8092aa}.zh-study-help{padding:27px 0 0}.zh-study-help h3{font-size:15px;margin:0 0 18px;font-weight:650}.zh-study-help>:is(button,a){display:flex;gap:12px;align-items:flex-start;width:100%;border:0;padding:12px 0;background:none;text-align:left;min-height:68px;color:#4f5fbf}.zh-study-help :is(button,a) svg{margin-top:2px;flex-shrink:0}.zh-study-help :is(button,a) span{font-size:14px;color:#354961;font-weight:600}.zh-study-help :is(button,a) small{display:block;font-size:12px;font-weight:400;color:#59677d;line-height:1.7;margin-top:5px}.zh-help-note{margin-top:22px;padding:18px;background:#f0f3fa;border-radius:8px}.zh-help-note h4{font-size:14px;margin:0 0 9px;font-weight:600}.zh-help-note p{font-size:13px;line-height:1.9;color:#59677d;margin:0}.zh-later-lessons{font-size:13px;color:#59677d;margin-top:20px}.zh-later-lessons summary{padding:12px 0;cursor:pointer;min-height:44px}.zh-later-lessons>div{display:grid;grid-template-columns:35px 1fr 80px;gap:10px;font-size:13px;padding:12px 0;border-bottom:1px solid #edf0f5;align-items:start}.zh-later-lessons strong{font-weight:500}.zh-later-lessons small{font-size:12px;color:#7a8799;text-align:right}.zh-footer{border-top:1px solid #dee5ef;display:flex;align-items:center;gap:24px;padding:27px 0 32px;margin-top:28px;font-size:13px;color:#59677d}.zh-footer>div{display:flex;gap:10px;align-items:center}.zh-footer strong{font-size:15px;color:#354961;font-weight:600}.zh-footer>p{font-size:13px;margin:0;flex:1}.zh-footer>button{font-size:13px;color:#59677d;background:none;border:0;min-height:44px;padding:8px 0}.zh-footer span{font-size:12px}.breadcrumb.zh-breadcrumb{padding:22px 0 0;margin:0;display:flex;gap:12px;font-size:13px;align-items:center;color:#59677d}.zh-breadcrumb button{border:0;padding:8px 0;background:none;min-height:44px;color:#4f5fbf}.lesson-heading{padding:18px 0 26px;display:flex;justify-content:space-between;align-items:center;gap:24px;border-bottom:1px solid #dee5ef;margin:0 0 28px}.lesson-heading h1{font-size:31px;line-height:1.45;font-weight:650;margin:10px 0 8px;letter-spacing:-.025em}.lesson-heading p{margin:0;color:#59677d;font-size:15px}.lesson-heading>.line{font-size:13px;padding:10px 16px}.lesson-layout{display:grid;grid-template-columns:210px minmax(0,1fr);gap:46px;align-items:start;min-height:550px}.sidebar{position:sticky;top:20px;padding:0 0 25px;border:0;background:transparent;min-width:0}.sidebar-title{font-size:13px;letter-spacing:normal;padding:0 12px 12px;color:#59677d;font-weight:500}.sidebar>button{font-size:14px;border:0;border-radius:6px;margin:3px 0;padding:13px 14px;width:100%;text-align:left;background:none;min-height:46px;display:flex;align-items:center;gap:10px;color:#59677d}.sidebar>button.active{background:#e9edfa;color:#4f5fbf;font-weight:600}.sidebar .index{font-size:12px;font-weight:400;color:inherit;width:20px;flex-shrink:0;opacity:.75}.sidebar>button:hover{background:#f0f3fa}.sidebar>button.active:hover{background:#e9edfa}.lesson-neighbours{border-top:1px solid #e7ebf2;padding-top:18px;margin-top:22px;grid-template-columns:1fr 1fr;gap:8px}.lesson-neighbours .line{font-size:12px;font-weight:500;padding:7px 8px;border:0;background:#f0f3fa}.lesson-save{padding:18px 0 0;margin-top:0;border-top:0}.lesson-save p{font-size:12px;line-height:1.7;color:#59677d;margin:0 0 12px}.lesson-save .primary,.lesson-save .line{font-size:13px;min-height:44px;padding:10px}.zh-lesson-main{max-width:850px;min-width:0;padding:0 0 28px}.study-heading,.zh-goals h2{font:600 25px/1.45 var(--sans);margin:0 0 18px;letter-spacing:-.01em}.study-intro{font-size:14px;color:#59677d;line-height:1.8;margin:0 0 26px;max-width:72ch}.zh-goals>p{font-size:15px;color:#59677d;margin:0 0 24px}.zh-goals ul{list-style:none;padding:0;margin:0 0 28px}.zh-goals li{display:flex;gap:16px;align-items:flex-start;padding:20px 0;border-bottom:1px solid #edf0f5}.zh-goal-check{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:#eaf3ee;color:#287d72;font-size:14px;margin-top:2px;flex-shrink:0}.zh-goals li strong{font-size:17px;font-weight:550;line-height:1.6}.zh-goals li p{font-size:14px;color:#59677d;line-height:1.7;margin:6px 0 0}.zh-lesson-outline{font-size:13px;display:flex;gap:20px;flex-wrap:wrap;color:#59677d;margin-bottom:28px}.zh-dialogue-toolbar{display:flex;justify-content:space-between;align-items:center;gap:20px;padding-bottom:24px}.zh-dialogue-tabs{display:flex;background:#f1f4f8;padding:4px;border-radius:8px;gap:2px}.zh-dialogue-tabs button{border:0;background:none;min-height:40px;border-radius:5px;padding:9px 22px;font-size:14px;color:#59677d}.zh-dialogue-tabs button.active{background:#fff;color:#4f5fbf;box-shadow:0 1px 4px #172e5010;font-weight:600}.zh-reading-options{display:flex;gap:9px}.zh-reading-options button{border:1px solid #d9e1ed;border-radius:5px;min-height:38px;background:white;padding:7px 11px;font-size:12px;color:#59677d}.zh-reading-options button[aria-pressed=true]{border-color:#a8bfe9;background:#f4f7fe;color:#4f5fbf}.zh-dialogue-reading{border:1px solid #e1e7f0;border-radius:10px;padding:27px 30px 20px;background:#fff}.zh-dialogue-reading h3{font-size:22px;margin:0 0 9px;font-weight:600}.zh-dialogue-reading .scene{font-size:14px;line-height:1.8;margin:0 0 18px;color:#59677d}.zh-dialogue-reading audio{width:100%;height:42px;margin:4px 0 20px}.zh-dialogue-reading .dialogue{background:none;border:0;padding:0;margin:0}.zh-dialogue-reading .speech{display:grid;grid-template-columns:62px minmax(0,1fr);gap:19px;margin:0;padding:22px 0;border-bottom:1px solid #edf0f5}.zh-dialogue-reading .speech:last-child{border-bottom:0}.zh-speaker{font-size:13px;color:#59677d;padding-top:8px;line-height:1.6}.zh-utterance .sentence{font:500 25px/1.65 var(--sans);margin:0 0 7px;letter-spacing:.01em}.zh-utterance .py{font-size:15px;color:#4f5fbf;line-height:1.6;margin-top:3px}.zh-utterance .en{font-size:14px;line-height:1.7;color:#59677d;margin-top:6px}.zh-dialogue-bottom{border-top:1px solid #e6ebf2;padding-top:18px;display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:10px}.zh-dialogue-bottom .line{font-size:13px}.zh-text-button{border:0;background:none;color:#4f5fbf;min-height:44px;font-size:13px;display:flex;align-items:center;gap:3px;padding:8px 0}.vocab-group{margin:0 0 30px}.vocab-group:before{content:'';display:block;height:1px;background:#e7ebf2;margin:15px 0}.vocab{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:18px 0}.word{padding:20px;border:1px solid #dee5ef;border-radius:8px;background:white;gap:5px;min-height:150px}.word:hover{border-color:#9ab5e8;background:#f8faff}.word strong{font:500 28px/1.5 var(--sans);margin:0}.word .py{font-size:14px;color:#4f5fbf}.word .en{font-size:13px;color:#59677d;line-height:1.6}.vocab-group h4{font-size:13px;color:#59677d;font-weight:500}.tip-card{background:#fff;border:0;border-bottom:1px solid #e4e9f0;border-radius:0;margin:0 0 28px;padding:0 0 28px;box-shadow:none}.tip-card h3{font:600 20px/1.5 var(--sans);margin:0 0 16px}.tip-card>p{font-size:15px;color:#59677d;line-height:1.9}.grammar-pattern{font-size:15px;background:#e9edfa;color:#284b80;padding:14px 18px;margin:16px 0;border:0;border-radius:6px}.word-example{border:0;border-left:3px solid #d8e4fa;background:#f8faff;padding:14px 18px;border-radius:0;margin:14px 0}.word-example .sentence{font:500 21px/1.6 var(--sans)}.word-example .py{font-size:14px;color:#4f5fbf;line-height:1.7}.word-example .en{font-size:14px;color:#59677d;line-height:1.7}.phonetic-table>div{padding:12px 0;border-bottom:1px solid #edf0f5;display:grid;grid-template-columns:140px minmax(0,1fr);gap:18px}.phonetic-table b{font-size:14px;color:#32445f;font-weight:600}.phonetic-table span{font-size:14px;line-height:1.85;color:#59677d}.quiz-q{font-size:22px;line-height:1.6;margin:20px 0}.answers{display:flex;flex-direction:column;align-items:stretch;gap:12px;margin:24px 0}.answers button{min-height:54px;padding:13px 18px;border:1px solid #d6deea;border-radius:7px;font-size:17px;text-align:left;line-height:1.6;background:#fff}.answers button:hover:not(:disabled){background:#f1f6ff;border-color:#8daee8}.answers button:disabled{opacity:1}.feedback{background:#f1f6ff;border:0;padding:16px;font-size:14px;line-height:1.8;border-radius:6px;color:#354961}.notice{font-size:13px!important;line-height:1.85!important;color:#59677d!important}dialog{border:1px solid #e1e7f0;border-radius:12px;background:white;color:#273449;box-shadow:0 20px 75px #14274330;padding:30px;max-width:650px;width:calc(100vw - 36px);max-height:90vh;overflow:auto}dialog::backdrop{background:#1b2c4459;backdrop-filter:blur(2px)}dialog .close{position:absolute;right:13px;top:12px;width:36px;height:36px;border:0;background:#f1f4f8;border-radius:50%;font-size:24px;color:#59677d;display:grid;place-items:center;line-height:1}dialog h2{font-size:27px;font-weight:600;margin-top:10px;margin-bottom:24px}.zh-word-modal{max-width:800px;padding:28px 32px 20px}.zh-word-title{display:flex;gap:23px;align-items:center;padding:0 35px 8px 0}.zh-word-title h2{font:500 54px/1.3 'Kaiti SC','STKaiti','KaiTi',serif;margin:0;white-space:nowrap}.zh-word-title p{margin:2px 0}.zh-word-pinyin{font-size:21px;color:#4f5fbf}.zh-word-meaning{font-size:15px;color:#59677d}.word-audio{margin:14px 0 24px}.word-audio audio{height:40px}.zh-word-body{display:grid;grid-template-columns:225px minmax(0,1fr);gap:30px}.zh-word-body h3{font-size:15px;font-weight:600;margin:0 0 12px}.zh-stroke-panel{padding-right:0}.stroke-tabs{gap:7px;margin:0 0 10px}.stroke-tabs .line{min-width:40px;min-height:40px;padding:7px 12px;font-size:16px}.stroke-grid{width:200px;height:200px;margin:10px 0;background:linear-gradient(90deg,transparent 49.7%,#e4eaf3 50%,transparent 50.3%),linear-gradient(transparent 49.7%,#e4eaf3 50%,transparent 50.3%);border:1px solid #d9e2ee;border-radius:2px}#strokeProgress{font-size:12px;color:#59677d;min-height:20px}.stroke-actions{gap:7px;flex-wrap:wrap;margin:12px 0}.stroke-actions .primary,.stroke-actions .line{font-size:12px;min-height:40px;padding:10px 11px}.zh-word-notes{min-width:0}.zh-word-example{background:#f4f7fd;border-radius:7px;padding:17px 18px;margin-bottom:24px}.zh-word-example .sentence{font-size:22px;line-height:1.7;margin-bottom:7px}.zh-word-example .py{font-size:14px;color:#4f5fbf;line-height:1.8}.zh-word-example .en{font-size:14px;color:#59677d;line-height:1.7;margin-top:6px}.zh-components>div{display:flex;gap:13px;padding:9px 0;border-bottom:1px solid #edf0f5}.zh-components strong{font-size:22px;line-height:1.5;font-weight:500;min-width:26px}.zh-components p{font-size:13px;margin:0;line-height:1.85;color:#59677d}.zh-components .notice{margin-top:12px}.audio-credit{margin:24px 0 0;border:0;border-top:1px solid #e5eaf1;padding:13px 0 0;font-size:12px;line-height:1.85;color:#59677d}.audio-credit summary{cursor:pointer;min-height:30px}.audio-credit a{color:#4f5fbf}.search-input{font-size:16px;border:1px solid #d5deeb;border-radius:6px;padding:12px 14px;min-height:48px;margin-bottom:12px;width:100%;color:#273449;background:#fff}.search-result{font-size:18px;padding:15px 8px;border:0;border-bottom:1px solid #e5eaf1;background:#fff;min-height:60px}.search-result .py{font-size:13px;color:#59677d}.search-result small{font-size:12px;color:#59677d}.portal-heading{padding:32px 0 14px}.portal-heading h1{font:650 31px/1.4 var(--sans);margin:8px 0 9px;letter-spacing:-.025em}.portal-heading p{font-size:14px}.service-note{background:#f0f3fa;border:0;border-radius:6px;font-size:12px;padding:12px 16px;color:#59677d;margin:8px 0 25px}.portal-stats{gap:0;border:1px solid #e0e6ef;border-radius:8px;background:#fff;margin:20px 0 28px}.portal-stats>div{background:none;border:0;padding:18px 25px;border-right:1px solid #e4e9f1}.portal-stats>div:last-child{border-right:0}.portal-stats b{font:600 26px/1.5 var(--sans);color:#32445f}.portal-stats span{font-size:13px}.portal-card{padding:25px;border:1px solid #e0e6ef;border-radius:9px;background:#fff}.portal-card h2{font:600 22px/1.5 var(--sans);margin-bottom:12px}.portal-card p{font-size:14px}.learning-course-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.learning-course-grid .progress-track{height:5px;background:#e9eef6;border-radius:4px;margin:22px 0 12px}.progress-track span{background:#4f5fbf;border-radius:4px}.learning-course-grid .primary{font-size:13px;padding:10px 17px}.portal-field>span{font-size:13px;margin-bottom:7px;color:#354961}.portal-field input,.portal-field textarea,.portal-field select{font-size:15px;line-height:1.65;background:#fff;border:1px solid #cdd7e5;border-radius:6px;padding:10px 12px;min-height:46px}.portal-field input:focus,.portal-field textarea:focus,.portal-field select:focus{outline:2px solid #4f5fbf;outline-offset:2px}.admin-layout{gap:30px;grid-template-columns:190px minmax(0,1fr)}.admin-nav button{border:0;background:#fff;border-radius:6px;padding:13px 16px;min-height:46px;font-size:14px;color:#59677d}.admin-nav button.active{border:0;background:#e9edfa;color:#4f5fbf;font-weight:600}.editor-word{padding:16px 0;border-color:#e4e9f1}.editor-word summary{font-size:15px;font-weight:500;min-height:28px}.editor-word summary>span{font-size:13px}.editor-word[open] summary{font-weight:600;color:#4f5fbf}.editor-actions{position:relative;gap:10px}.editor-actions .primary,.editor-actions .line{font-size:13px}.pill{border-radius:4px;padding:3px 9px;font-size:12px;background:#e9edfa;color:#354e78}.scroll-table th,.scroll-table td{font-size:14px;padding:14px 12px}.mail-plans>div{border:0;border-radius:6px;background:#f0f3fa;padding:14px 16px}.mail-plans span{font-size:12px}.text-link{font-size:13px;color:#4f5fbf}.toast{font-size:14px;background:#263d62;border-radius:7px;padding:13px 20px;box-shadow:0 6px 25px #172e5020}.preview-banner{background:#fff4d7;color:#6d5219;font-size:13px;padding:13px;position:relative}.preview-banner button{min-height:36px;color:#6d5219}.portal-two{gap:20px}.message-body{font-size:15px!important}.form-error{font-size:14px!important}.empty-state{font-size:14px!important} @media(min-width:1440px){.zh-welcome{gap:100px}.zh-welcome h1{font-size:47px}.zh-sound-sample{max-width:420px;width:100%}} @media(max-width:1100px){.wrap{padding:0 28px}.zh-header.masthead{gap:17px}.zh-level-nav{gap:0}.zh-level-nav :is(button,a){padding:12px 7px;font-size:12px}.zh-header-actions{gap:8px}.zh-header-actions .zh-contact-button{display:none}.zh-brand b{font-size:19px}.zh-brand small{font-size:10px}.zh-welcome{gap:36px;padding:42px 0 48px}.zh-welcome h1{font-size:37px}.zh-sound-sample{padding:22px}.zh-catalog-layout{grid-template-columns:minmax(0,1fr) 205px;gap:28px}.zh-course-row{grid-template-columns:28px minmax(130px,1fr) 54px 18px;gap:12px;padding:21px 5px}.zh-row-topic{display:none}.lesson-layout{gap:28px;grid-template-columns:190px minmax(0,1fr)}.zh-dialogue-reading{padding:22px}.zh-dialogue-tabs button{padding:9px 15px}.zh-footer{gap:15px}.zh-footer>p{font-size:12px}} @media(max-width:820px){.zh-header.masthead{height:auto;min-height:86px;flex-wrap:wrap;gap:0;padding:16px 0 0}.zh-brand{flex:1}.zh-header-actions{gap:12px}.zh-header-actions button{font-size:12px}.zh-level-nav{order:3;width:100%;flex-basis:100%;justify-content:flex-start;margin-top:10px;border-top:1px solid #edf0f5;padding:0;gap:9px;overflow:auto}.zh-level-nav :is(button,a){padding:12px 11px;font-size:13px;min-height:44px}.zh-level-nav :is(button,a).selected:after{bottom:3px}.zh-welcome{grid-template-columns:1.05fr .95fr;gap:24px;padding:36px 0 40px}.zh-welcome h1{font-size:31px;margin:15px 0}.zh-welcome-copy>p{font-size:14px}.zh-welcome-copy .zh-welcome-note{font-size:12px}.zh-start-actions{gap:15px;align-items:flex-start;flex-direction:column;margin-top:23px}.zh-start-actions .primary{min-height:46px;font-size:14px;padding:12px 20px}.zh-browse{padding:5px 0;font-size:13px}.zh-sound-sample{padding:19px 20px}.zh-hanzi-sample{font-size:68px}.zh-pinyin-sample{font-size:20px;gap:40px}.zh-meaning{font-size:16px;margin-bottom:19px}.zh-sample-controls{flex-wrap:wrap;gap:4px}.zh-sample-link{font-size:12px}.zh-listen-button{font-size:13px;padding:9px 14px}.zh-catalog-layout{grid-template-columns:minmax(0,1fr);gap:0}.zh-study-help{display:grid;grid-template-columns:1fr 1fr;gap:0 25px;margin-top:22px;padding-top:22px;border-top:1px solid #e4e9f1}.zh-study-help h3{grid-column:1/-1}.zh-help-note{grid-column:1/-1;margin-top:18px}.zh-course-row{grid-template-columns:35px minmax(140px,1fr) minmax(80px,.7fr) 55px 20px;gap:14px}.zh-row-topic{display:block}.zh-section-heading p{font-size:13px}.zh-total{font-size:12px}.lesson-layout{grid-template-columns:175px minmax(0,1fr);gap:24px}.sidebar>button{padding:12px 9px;font-size:13px;gap:6px}.zh-dialogue-toolbar{flex-wrap:wrap;gap:14px}.zh-dialogue-reading .speech{grid-template-columns:48px minmax(0,1fr);gap:14px}.zh-utterance .sentence{font-size:22px}.zh-speaker{font-size:12px}.vocab{grid-template-columns:repeat(2,minmax(0,1fr))}.word{min-height:140px;padding:16px}.phonetic-table>div{grid-template-columns:100px minmax(0,1fr);gap:16px}.zh-footer{flex-wrap:wrap}.zh-footer>p{order:3;flex-basis:100%;margin:0}.zh-footer>button{margin-left:auto}.zh-word-body{gap:20px;grid-template-columns:215px minmax(0,1fr)}.zh-word-modal{padding:25px}.admin-layout{grid-template-columns:160px minmax(0,1fr);gap:20px}.admin-nav button{padding:12px;font-size:13px}} @media(max-width:600px){.wrap{padding:0 20px}.zh-header.masthead{padding-top:12px}.zh-header-actions{gap:8px}.zh-header-actions .zh-user-button{padding:9px 10px;font-size:12px}.zh-header-actions .zh-language{padding-left:9px;min-width:31px}.zh-header-actions .zh-admin-button{font-size:11px}.zh-brand{gap:5px}.zh-brand-symbol{width:28px}.zh-brand-symbol svg{width:26px}.zh-brand b{font-size:17px}.zh-brand small{font-size:9px}.zh-level-nav{gap:3px;margin-top:10px;justify-content:space-between}.zh-level-nav :is(button,a){padding:11px 9px;font-size:12px}.zh-level-nav :is(button,a).selected:after{left:9px;right:9px}.zh-welcome{display:flex;flex-direction:column;align-items:stretch;padding:30px 0 34px;gap:28px}.zh-welcome h1{font-size:33px;line-height:1.4;letter-spacing:-.03em;margin-top:14px}.zh-welcome-copy>p{font-size:15px;line-height:1.85}.zh-welcome-copy>p br{display:none}.zh-start-actions{flex-direction:row;align-items:center;gap:22px;margin-top:23px}.zh-welcome-copy .zh-welcome-note{font-size:12px;margin-top:17px}.zh-sound-sample{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) 130px;padding:18px 20px 14px;border-radius:12px}.zh-sample-top{grid-column:1/-1;font-size:12px}.zh-pinyin-sample{grid-column:1;grid-row:2;gap:32px;justify-content:flex-start;font-size:18px;margin-top:13px;padding-left:9px}.zh-hanzi-sample{grid-column:1;grid-row:3;font-size:56px;text-align:left;white-space:pre;letter-spacing:0;line-height:1.3}.zh-meaning{grid-column:1;grid-row:4;text-align:left;font-size:14px;margin:0 0 9px;padding-left:9px}.zh-sample-controls{grid-column:2;grid-row:2/5;display:flex;flex-direction:column;justify-content:center;align-items:center;border:0;padding:0;gap:4px}.zh-listen-button{min-height:44px;font-size:13px}.zh-sample-link{min-height:38px;font-size:12px}.zh-listen-note{grid-column:1/-1;border-top:1px solid #cfdef6;padding-top:10px;margin-top:7px;font-size:12px}.zh-course-label{font-size:12px}.zh-section-heading{align-items:flex-start;gap:12px;flex-direction:column;padding-bottom:12px}.zh-section-heading h2{font-size:23px;margin-bottom:6px}.zh-section-heading p{font-size:13px;line-height:1.7}.zh-total{font-size:12px}.zh-course-row{grid-template-columns:28px minmax(0,1fr) 20px;gap:11px;padding:20px 0;min-height:100px}.zh-row-title strong{font-size:18px;line-height:1.6}.zh-row-title>span{font-size:13px}.zh-row-topic{display:none}.zh-row-count{display:none}.zh-lesson-number{font-size:15px}.zh-row-go{grid-column:3}.zh-catalog-layout{margin-bottom:25px}.zh-study-help{gap:0 16px}.zh-study-help>:is(button,a){gap:8px;min-height:84px}.zh-study-help :is(button,a) span{font-size:13px}.zh-study-help :is(button,a) small{font-size:12px}.zh-study-help :is(button,a) svg{width:18px;height:18px}.zh-help-note{padding:15px}.zh-help-note p{font-size:13px}.zh-footer{padding:20px 0;margin-top:20px;gap:8px}.zh-footer span{font-size:11px}.zh-footer>div{gap:8px}.zh-footer strong{font-size:14px}.zh-footer>p{font-size:12px}.breadcrumb.zh-breadcrumb{padding-top:12px;gap:9px;font-size:12px}.lesson-heading{padding:10px 0 20px;margin-bottom:18px;align-items:flex-start;gap:12px}.lesson-heading h1{font-size:27px;margin:10px 0}.lesson-heading p{font-size:13px}.lesson-heading>.line{font-size:12px;padding:8px 11px;min-height:40px;flex-shrink:0;max-width:90px}.lesson-layout{display:block;min-height:400px}.sidebar{position:static;display:flex;flex-wrap:wrap;gap:7px;padding:0 0 20px;margin-bottom:22px;border-bottom:1px solid #e2e8f1}.sidebar-title{display:none}.sidebar>button{width:auto;flex:1 0 28%;font-size:12px;justify-content:center;border:1px solid #dee5ef;padding:10px 7px;margin:0;min-height:44px;gap:5px}.sidebar>button.active{border-color:#b7cbef}.sidebar .index{width:auto;font-size:11px}.sidebar .lesson-neighbours{display:none}.lesson-save{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 0 0;margin:0}.lesson-save p{margin:0;font-size:12px;line-height:1.6;flex:1}.lesson-save button{width:auto!important;max-width:165px;min-height:40px;font-size:12px!important}.study-heading,.zh-goals h2{font-size:23px;margin-bottom:18px}.study-intro{font-size:14px;line-height:1.8}.zh-goals li{padding:18px 0;gap:12px}.zh-goals li strong{font-size:16px}.zh-goals li p{font-size:14px}.zh-lesson-outline{font-size:12px;gap:12px}.zh-dialogue-toolbar{gap:13px;padding-bottom:18px}.zh-dialogue-tabs{padding:3px;flex:1}.zh-dialogue-tabs button{min-height:42px;padding:8px 12px;flex:1;font-size:13px}.zh-reading-options{gap:6px}.zh-reading-options button{font-size:12px;min-height:42px;padding:8px 9px}.zh-dialogue-reading{padding:20px 17px 16px;border-radius:8px}.zh-dialogue-reading h3{font-size:21px}.zh-dialogue-reading .scene{font-size:13px}.zh-dialogue-reading .speech{display:block;padding:19px 0}.zh-speaker{font-size:12px;padding:0 0 6px}.zh-utterance .sentence{font-size:22px;line-height:1.75}.zh-utterance .py{font-size:14px}.zh-utterance .en{font-size:14px}.zh-dialogue-bottom{flex-wrap:wrap;gap:9px;padding-top:15px}.zh-dialogue-bottom .line{width:100%;font-size:13px;padding:12px}.zh-dialogue-bottom .zh-text-button{margin-left:auto}.vocab{gap:10px}.word{padding:16px 13px;min-height:140px;border-radius:7px}.word strong{font-size:26px}.word .py{font-size:14px}.word .en{font-size:13px}.grammar-pattern{font-size:14px;padding:12px 14px}.tip-card h3{font-size:19px}.tip-card>p{font-size:15px}.phonetic-table>div{grid-template-columns:85px minmax(0,1fr);gap:12px}.phonetic-table span{font-size:14px}.phonetic-table b{font-size:13px}.word-example{padding:13px 15px}.word-example .sentence{font-size:20px}.quiz-q{font-size:20px}.answers button{font-size:16px;min-height:54px}.notice{font-size:12px!important}.zh-word-modal,dialog{padding:24px 20px 18px;width:calc(100vw - 24px);max-height:92vh;border-radius:11px}.zh-word-title{display:block;padding-right:30px}.zh-word-title h2{font-size:47px;margin-bottom:8px}.zh-word-title p{display:inline;line-height:1.8}.zh-word-pinyin{font-size:20px;margin-right:10px!important}.zh-word-meaning{font-size:14px}.zh-word-body{grid-template-columns:1fr;gap:22px}.zh-stroke-panel{display:grid;grid-template-columns:200px minmax(0,1fr);gap:0 12px;align-items:start}.zh-stroke-panel h3{grid-column:1/-1}.stroke-tabs{grid-column:1/-1;margin-bottom:6px}.stroke-grid{grid-column:1;grid-row:3/6}.zh-stroke-panel #strokeProgress{grid-column:2;grid-row:3;font-size:12px;padding-top:10px}.stroke-actions{grid-column:2;grid-row:4;display:flex;flex-direction:column;margin:0;gap:8px}.stroke-actions .primary,.stroke-actions .line{font-size:11px;padding:9px 7px;min-height:44px;width:100%}.zh-word-notes{border-top:1px solid #e4e9f0;padding-top:20px}.zh-word-example .sentence{font-size:21px}.zh-components p{font-size:13px}.audio-credit{font-size:12px}.portal-heading h1{font-size:27px}.portal-heading{padding-top:25px}.portal-heading p{font-size:13px}.service-note{font-size:12px;padding:11px 12px}.portal-stats>div{padding:14px 12px}.portal-stats b{font-size:23px}.portal-stats span{font-size:12px;line-height:1.6;display:block}.learning-course-grid{grid-template-columns:1fr}.portal-card{padding:20px}.portal-card h2{font-size:21px}.portal-two{grid-template-columns:1fr;gap:0}.portal-field input,.portal-field textarea,.portal-field select{font-size:16px;min-height:48px}.portal-field>span{font-size:13px}.admin-layout{display:block}.admin-nav{display:flex;position:static;overflow:auto;gap:7px;margin-bottom:20px;padding:0 0 4px}.admin-nav button{min-height:44px;font-size:13px;white-space:nowrap;padding:11px 14px}.editor-word summary{font-size:14px}.editor-actions{gap:9px}.editor-actions .primary,.editor-actions .line{font-size:12px;padding:12px}.scroll-table th,.scroll-table td{font-size:13px;padding:12px 9px}.mail-plans b{font-size:13px}.search-result{font-size:18px;min-height:64px}.search-result .py{display:block;font-size:13px;line-height:1.7;margin-top:5px}.toast{font-size:13px;bottom:16px}.zh-later-lessons>div{grid-template-columns:25px 1fr 65px;font-size:13px}} @media(max-width:370px){.wrap{padding:0 16px}.zh-brand small{display:none}.zh-header-actions{gap:4px}.zh-header-actions .zh-user-button{font-size:11px;padding:8px}.zh-header-actions .zh-language{padding-left:7px;min-width:28px}.zh-header-actions .zh-icon-button{width:28px}.zh-welcome h1{font-size:30px}.zh-start-actions{gap:15px}.zh-sound-sample{padding:15px;grid-template-columns:minmax(0,1fr) 115px}.zh-hanzi-sample{font-size:50px}.zh-stroke-panel{display:flex;flex-direction:column;gap:0}.stroke-actions{flex-direction:row;width:100%;margin-top:10px}.stroke-actions button{flex:1}.zh-dialogue-toolbar{flex-direction:column;align-items:stretch}.zh-reading-options{justify-content:flex-end}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}} /* Override the legacy button.primary rule and the legacy inline stroke-tab tint. */ button.primary{background:#4f5fbf;color:#fff;gap:8px;border-radius:7px}button.primary:hover{background:#414fa7}button[data-stroke-char][aria-pressed=true]{background:#e9edfa!important;color:#4f5fbf;border-color:#aac1ea} dialog .close{width:44px;height:44px;right:8px;top:8px}.audio-credit summary{min-height:36px;display:list-item;align-content:center}@media(max-width:600px){.zh-dialogue-tabs button,.zh-reading-options button,.stroke-tabs .line,.zh-sample-link,.audio-credit summary{min-height:44px}.stroke-tabs .line{min-width:44px}} .learning-course-grid .eyebrow{display:block!important;font-family:var(--sans);text-transform:none;letter-spacing:normal;font-size:12px;font-weight:500;color:#59677d;margin:0 0 10px} .zh-lesson-number,.zh-later-lessons small{color:#59677d}.sidebar .index{opacity:1} /* Calm bilingual reading palette — locally embedded fonts. */ :root,html[data-theme]{--bg:#f5f7fc;--paper:#fff;--ink:#273449;--muted:#59677d;--accent:#4f5fbf;--line:#dee5ef;--light:#e9edfa;--sans:'Zhiyu Latin','Zhiyu Chinese','PingFang SC','Microsoft YaHei',sans-serif;--serif:var(--sans);--display:var(--sans)} body,html[data-theme] body{background:#f5f7fc;color:var(--ink);font-family:var(--sans)} .zh-header.masthead{background:transparent}.zh-welcome{background:radial-gradient(ellipse at 85% 20%,#e9edfa 0,transparent 65%)} .zh-course-list{background:white;border-radius:12px;padding:0 20px}.zh-course-row{background:transparent}.zh-course-row:hover{background:#f0f3fa} .zh-sound-sample{background:#e9edfa}.zh-lesson-main{background:white;border:1px solid var(--line);border-radius:12px;padding:28px;max-width:850px} .zh-goals li strong,.tip-card>p,.phonetic-table span{font-size:18px;line-height:1.8} .zh-utterance .sentence{font-size:24px;line-height:1.8} .py,.zh-word-pinyin,.zh-pinyin-sample,.word-example .py,.zh-utterance .py,.zh-word-example .py{font-family:'Zhiyu Pinyin',sans-serif;font-size:18px;line-height:1.75;color:#4f5fbf;font-weight:400;letter-spacing:normal} .en,.zh-word-meaning,.zh-utterance .en,.zh-word-example .en{font-family:'Zhiyu Latin','Zhiyu Chinese',sans-serif;font-size:17px;line-height:1.75;color:#59677d} .zh-word-title h2{font-family:'Zhiyu Chinese',sans-serif;font-size:48px;font-weight:500} .zh-goal-check{background:#e7f3ef;color:#287d72}.portal-stats,.portal-card{background:#fff} @media(max-width:600px){.zh-lesson-main{padding:20px 16px}.zh-course-list{padding:0 12px}.zh-utterance .sentence{font-size:22px}.zh-utterance .py,.zh-word-example .py{font-size:17px}.zh-utterance .en,.zh-word-example .en{font-size:16px}.word .py{font-size:16px}.word .en{font-size:15px}.zh-pinyin-sample{font-size:18px}.zh-word-title h2{font-size:44px}} /* Impeccable refinement: clear entry, quiet supporting tools, uncluttered reading. */ :root{--space-section:48px;--space-group:24px;--text-body:18px;--text-caption:14px} ::selection{background:#dce3fc;color:#273449}input,textarea{caret-color:var(--accent)}a{text-underline-offset:4px}*{scrollbar-color:#b7c1d9 #f5f7fc;scrollbar-width:thin} h1,h2,h3{text-wrap:balance}p{overflow-wrap:break-word}button{cursor:pointer}button:disabled{cursor:default} .zh-header-actions .zh-user-button{background:transparent;border:1px solid #bbc5e0;color:var(--accent)}.zh-header-actions .zh-user-button:hover{background:var(--light)} .zh-welcome{background:none;grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);gap:64px;padding:52px 0 48px} .zh-welcome h1{font-size:44px;line-height:1.35;letter-spacing:-.025em;margin:0 0 22px;font-weight:700} .zh-welcome-copy>p{font-size:17px;line-height:1.85;max-width:34em}.zh-start-actions{margin-top:28px;gap:24px;flex-direction:row;align-items:center}.zh-start-actions .primary{font-size:16px;min-height:50px;padding:14px 26px} .zh-welcome-copy .zh-welcome-note{margin-top:20px;font-size:13px;line-height:1.8}.zh-browse{border:0;font-size:14px;min-height:44px;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#b7c1d9} .zh-sound-sample{padding:24px 28px 18px;border-radius:14px}.zh-sample-top{font-size:14px}.zh-sample-top span:last-child{border:0;padding:0;font-size:13px}.zh-pinyin-sample{margin-top:18px}.zh-sample-controls{padding-top:16px}.zh-hanzi-sample{font-size:78px}.zh-listen-note{font-size:13px;line-height:1.7} .zh-section-heading{align-items:flex-end;padding-bottom:20px;gap:16px}.zh-section-heading h2{font-size:28px;font-weight:700;margin:0 0 8px}.zh-section-heading p{font-size:15px;line-height:1.8}.zh-total{font-size:13px} .zh-catalog-layout{gap:40px}.zh-course-list{padding:0;background:transparent;border-radius:0}.zh-course-row{padding:23px 14px 23px 0;min-height:112px;background:transparent;border-bottom:1px solid var(--line);grid-template-columns:36px minmax(160px,1fr) minmax(90px,.6fr) 56px 20px;gap:18px}.zh-course-row:hover{background:var(--light)}.zh-row-title{gap:7px}.zh-row-title strong{font-size:21px;font-weight:600;line-height:1.5}.zh-row-title>span{font-size:15px;line-height:1.6}.zh-row-topic{font-size:14px}.zh-row-count{font-size:13px}.zh-lesson-number{font-size:14px;font-weight:500;font-variant-numeric:tabular-nums} .zh-study-help{padding-top:25px}.zh-study-help h3{font-size:16px;margin-bottom:12px}.zh-study-help :is(button,a) span{font-size:15px}.zh-study-help :is(button,a) small{font-size:13px}.zh-help-note{padding:20px 0 0;border-top:1px solid var(--line);border-radius:0;background:transparent;margin-top:20px}.zh-help-note p{font-size:14px;line-height:1.8} .lesson-heading{margin-bottom:32px;padding-bottom:24px}.lesson-heading h1{font-size:32px;font-weight:700;line-height:1.45}.lesson-heading .zh-course-label{display:none}.lesson-layout{gap:40px;grid-template-columns:190px minmax(0,1fr)} .zh-lesson-main{padding:0;border:0;background:transparent;border-radius:0}.study-heading,.zh-goals h2{font-size:27px;font-weight:650;margin-bottom:18px}.study-intro{font-size:16px;line-height:1.8;max-width:70ch}.zh-goals>p{font-size:17px}.zh-goals li{padding:22px 0}.zh-goals li p{font-size:16px;line-height:1.75}.sidebar>button{font-size:15px}.sidebar-title{font-size:13px} .zh-dialogue-toolbar{padding-bottom:20px}.zh-dialogue-reading{padding:28px 32px 22px;border:0;border-radius:12px;background:white}.zh-dialogue-reading h3{font-size:23px;margin-bottom:10px}.zh-dialogue-reading .scene{font-size:15px;line-height:1.8;margin-bottom:22px}.zh-dialogue-reading .speech{grid-template-columns:62px minmax(0,1fr);gap:18px;padding:25px 0}.zh-speaker{font-size:14px;line-height:1.7}.zh-utterance .sentence{font-size:25px;font-weight:500;line-height:1.65;margin-bottom:10px}.zh-utterance .py{margin-top:0;line-height:1.7}.zh-utterance .en{margin-top:6px;line-height:1.75}.zh-dialogue-reading audio{margin-bottom:10px}.zh-dialogue-bottom{padding-top:20px;margin-top:6px} .vocab-group{margin-bottom:36px}.word strong{font-weight:500}.zh-word-title{align-items:center;margin-bottom:22px}.zh-word-body h3{font-size:18px;font-weight:600;margin-bottom:16px}.zh-word-example{background:transparent;padding:0}.zh-word-example .sentence{font-size:24px;line-height:1.7;margin-bottom:10px}.zh-word-example .en{margin-top:8px}.zh-components{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}.zh-components p{font-size:15px;line-height:1.8}.audio-credit{margin-top:24px}.audio-credit summary{font-size:13px;color:var(--muted)} @media(max-width:1100px){.zh-welcome{gap:36px}.zh-welcome h1{font-size:38px}.zh-course-row{grid-template-columns:30px minmax(0,1fr) 55px 20px;gap:14px}.zh-row-topic{display:none}.zh-catalog-layout{gap:28px}.lesson-layout{grid-template-columns:170px minmax(0,1fr);gap:26px}} @media(max-width:820px){.zh-welcome{grid-template-columns:minmax(0,1fr) minmax(240px,.9fr);gap:28px;padding:40px 0}.zh-welcome h1{font-size:32px}.zh-welcome-copy>p{font-size:16px}.zh-start-actions{flex-wrap:wrap;gap:8px 20px}.zh-hanzi-sample{font-size:68px}.zh-sound-sample{padding:22px}.zh-course-row{grid-template-columns:30px minmax(0,1fr) 55px 20px}.zh-study-help{column-gap:28px}.zh-help-note{margin-top:18px}.zh-dialogue-reading{padding:24px}.zh-dialogue-reading .speech{gap:12px;grid-template-columns:48px minmax(0,1fr)}.sidebar>button{font-size:14px}} @media(max-width:600px){.zh-welcome{display:flex;padding:30px 0 36px;gap:28px}.zh-welcome h1{font-size:32px;line-height:1.4;margin-bottom:16px}.zh-welcome-copy>p{font-size:16px}.zh-start-actions{margin-top:22px;flex-wrap:nowrap;gap:18px}.zh-start-actions .primary{font-size:15px;padding:12px 20px}.zh-browse{font-size:13px}.zh-welcome-copy .zh-welcome-note{font-size:13px;margin-top:16px}.zh-sound-sample{padding:18px 20px 14px}.zh-hanzi-sample{font-size:56px}.zh-pinyin-sample{margin-top:12px}.zh-sample-controls{padding-top:0}.zh-section-heading{align-items:flex-start;gap:9px;padding-bottom:15px}.zh-section-heading h2{font-size:25px}.zh-section-heading p{font-size:14px}.zh-course-row{grid-template-columns:26px minmax(0,1fr) 18px;padding:21px 0;gap:10px}.zh-row-title strong{font-size:20px}.zh-row-title>span{font-size:14px}.zh-row-count{display:none}.zh-study-help>:is(button,a){min-height:86px}.zh-study-help :is(button,a) span{font-size:14px}.zh-study-help :is(button,a) small{font-size:13px}.zh-section-heading p{max-width:28em}.lesson-heading{margin-bottom:20px}.lesson-heading h1{font-size:28px}.sidebar>button{font-size:13px}.zh-lesson-main{padding:0}.study-heading,.zh-goals h2{font-size:25px}.zh-dialogue-reading{padding:22px 18px}.zh-dialogue-reading .speech{display:block;padding:22px 0}.zh-speaker{padding:0 0 8px;font-size:13px}.zh-utterance .sentence{font-size:22px;line-height:1.75;margin-bottom:8px}.zh-utterance .py{font-size:17px}.zh-utterance .en{font-size:16px}.zh-components p{font-size:15px}.zh-word-example .sentence{font-size:22px}.zh-word-notes{padding-top:22px}.zh-word-title{margin-bottom:18px}} @media(max-width:600px){.zh-level-nav{gap:0;overflow:visible;justify-content:space-between}.zh-level-nav :is(button,a){padding:11px 5px;flex:1;min-width:0}.sidebar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.sidebar>button{width:100%;min-width:0;white-space:normal;line-height:1.5;padding:10px 8px}.sidebar .lesson-save{grid-column:1/-1;margin-top:4px}.sidebar .lesson-neighbours{display:none}} .zh-footer>button{margin-left:auto} /* Keyboard navigation and semantic-link parity. */ .skip-content{position:fixed;top:8px;left:16px;z-index:10000;padding:12px 18px;background:#fff;color:#273449;border:2px solid var(--accent);transform:translateY(-160%)}.skip-content:focus{transform:none} a.zh-brand,a.zh-course-row,a.primary,a.line,a.zh-browse{color:inherit;text-decoration:none;cursor:pointer}a.primary{background:var(--accent);color:#fff}a.zh-browse{text-decoration:underline;text-underline-offset:5px}a.zh-course-row:hover{background:var(--light)}.zh-level-nav a{display:flex;align-items:center;font-size:13px;padding:14px 11px;color:var(--accent)} main:focus{outline:none}main h1:focus,main h2:focus{outline:2px solid var(--accent);outline-offset:6px}input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}dialog{overscroll-behavior:contain}button,a{-webkit-tap-highlight-color:#dce3fc}.form-error:focus{outline:2px solid var(--accent);outline-offset:4px} a.zh-brand:hover{color:var(--ink)}a.zh-brand{background:transparent;border:0}a.zh-course-row{display:grid}.zh-level-nav a{text-decoration:none;justify-content:center}.zh-level-nav a.selected{font-weight:700}.zh-study-help a{display:flex;text-decoration:none;color:var(--accent);min-height:68px}.zh-study-help a:hover{background:var(--light)} .zh-utterance [hidden]{display:none!important} /* Expanded bilingual navigation and reading-focused resource pages. */ .zh-header.masthead{display:grid;grid-template-columns:1fr auto;gap:12px 24px;height:auto;padding:20px 0 0}.zh-brand{grid-column:1;grid-row:1}.zh-header-actions{grid-column:2;grid-row:1}.zh-level-nav{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0;margin:0;width:100%;border-top:1px solid var(--line);overflow:visible;justify-content:stretch}.zh-level-nav :is(button,a){grid-column:span 1;justify-content:center;display:flex;padding:14px 6px;min-width:0;white-space:normal;text-align:center;align-items:center;text-decoration:none;font-size:13px;line-height:1.5}.zh-level-nav a.zh-resource-link{grid-column:span 2;color:var(--muted);font-weight:500}.zh-level-nav a.zh-resource-link.selected{color:var(--accent);background:var(--light);font-weight:700}.zh-level-nav .zh-resource-link:hover{background:var(--light);color:var(--accent)} .resource-page{max-width:850px;margin:0 auto;padding:48px 0 64px}.resource-page h1{font-size:36px;line-height:1.4;margin:0 0 22px}.resource-intro{font-size:18px;line-height:1.9;color:var(--muted);max-width:65ch;margin:0 0 40px}.resource-block{padding:28px 0;border-top:1px solid var(--line)}.resource-block h2{font-size:24px;margin:0 0 16px}.resource-block p{font-size:17px;line-height:1.9;margin:0 0 24px;max-width:70ch}.resource-block a.line{display:inline-flex} @media(max-width:820px){.zh-level-nav :is(button,a){grid-column:span 2}.zh-level-nav a.zh-resource-link{grid-column:span 4;min-height:52px}.zh-header.masthead{padding-top:16px;gap:12px}.resource-page{padding:32px 0 40px}.resource-page h1{font-size:30px}.resource-intro{font-size:17px;margin-bottom:30px}} @media(max-width:600px){.zh-level-nav :is(button,a){font-size:12px;padding:12px 4px}.zh-level-nav a.zh-resource-link{font-size:13px;padding:12px 6px}.resource-page h1{font-size:28px}.resource-block h2{font-size:22px}.resource-block p{font-size:16px}.zh-header-actions{gap:6px}} .daily-phrase{display:block;min-height:315px;padding:25px 28px 20px}.daily-phrase .zh-sample-top{align-items:center;gap:16px}.daily-phrase .zh-sample-top strong{font-size:16px;font-weight:600;color:var(--accent)}.daily-phrase .zh-sample-top span{font-size:13px;white-space:normal;text-align:right}.daily-content{padding:25px 0 26px;min-height:200px}.daily-hanzi{font:500 30px/1.7 'Zhiyu Chinese',sans-serif;margin:0 0 14px;color:var(--ink);overflow-wrap:anywhere}.daily-pinyin{font:400 18px/1.8 'Zhiyu Pinyin',sans-serif;color:var(--accent);margin:0 0 12px}.daily-english{font:400 17px/1.75 'Zhiyu Latin',sans-serif;margin:0;color:var(--muted)}.daily-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid #cbd3ee;padding-top:16px}.daily-bottom>span{font-size:12px;line-height:1.8;color:var(--muted)}.daily-bottom .line{flex-shrink:0;font-size:13px;padding:10px 14px;background:transparent;border-color:#b4bfdf} @media(max-width:600px){.daily-phrase{display:block;min-height:0;padding:20px}.daily-content{padding:22px 0;min-height:0}.daily-hanzi{font-size:27px;line-height:1.7}.daily-pinyin{font-size:17px}.daily-english{font-size:16px}.daily-bottom{gap:10px}} /* Main sections and course levels are different navigation depths. */ .zh-header.masthead{gap:16px 24px;padding:20px 0 0;isolation:isolate;z-index:5} .zh-level-nav{display:flex;align-items:stretch;justify-content:flex-start;gap:28px;overflow:visible;grid-template-columns:none;border-top:1px solid var(--line);padding:0;margin:0;width:100%} .zh-level-nav>a.zh-resource-link,.zh-hsk-menu>summary{display:flex;align-items:center;justify-content:center;gap:8px;position:relative;min-height:56px;padding:14px 8px;grid-column:auto;font:500 15px/1.5 var(--sans);white-space:nowrap;color:var(--muted);background:none;border:0;border-radius:0;text-decoration:none;cursor:pointer;list-style:none} .zh-hsk-menu>summary::-webkit-details-marker{display:none}.zh-hsk-menu>summary::marker{content:''}.zh-hsk-menu>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.zh-hsk-menu>summary.selected,.zh-level-nav>a.zh-resource-link.selected{background:transparent;color:var(--accent);font-weight:650} .zh-hsk-menu>summary.selected:after,.zh-level-nav>a.zh-resource-link.selected:after{content:'';position:absolute;bottom:0;left:8px;right:8px;height:2px;background:var(--accent)} .zh-level-nav>a.zh-resource-link:hover,.zh-hsk-menu>summary:hover{color:var(--accent);background:var(--light)}.zh-hsk-menu{position:relative;min-width:0}.zh-hsk-menu[open]>summary svg{transform:rotate(180deg)} .zh-hsk-levels{position:absolute;left:0;top:calc(100% + 8px);z-index:10;width:300px;padding:8px;background:white;border:1px solid var(--line);border-radius:12px} .zh-level-nav .zh-hsk-levels :is(a,button){display:flex;grid-column:auto;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:48px;padding:12px;border:0;background:transparent;text-decoration:none;text-align:left;border-radius:6px;color:var(--ink);font:500 14px/1.6 var(--sans);white-space:normal} .zh-level-nav .zh-hsk-levels :is(a,button):hover,.zh-level-nav .zh-hsk-levels a[aria-current]{background:var(--light);color:var(--accent)}.zh-level-nav .zh-hsk-levels small{font-size:12px;font-weight:400;color:var(--muted);text-align:right}.zh-hsk-levels span{white-space:nowrap} @media(min-width:1180px){.zh-header.masthead{grid-template-columns:auto 1fr auto;gap:20px;height:90px;padding:0}.zh-brand{grid-column:1;grid-row:1}.zh-level-nav{grid-column:2;grid-row:1;width:auto;border:0;justify-content:center;gap:14px}.zh-header-actions{grid-column:3;grid-row:1;gap:10px}.zh-level-nav>a.zh-resource-link,.zh-hsk-menu>summary{font-size:14px;min-height:56px;padding:14px 7px}} @media(max-width:600px){.zh-header.masthead{gap:12px;padding-top:14px}.zh-level-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 8px;padding:4px 0}.zh-level-nav>a.zh-resource-link,.zh-hsk-menu>summary{white-space:normal;font-size:14px;min-height:48px;padding:12px 8px;line-height:1.5;text-align:center}.zh-level-nav>a.zh-resource-link{grid-column:auto}.zh-hsk-menu>summary{width:100%}.zh-hsk-levels{width:min(300px,calc(100vw - 40px));top:calc(100% + 4px)}.zh-header-actions{gap:6px}.zh-hsk-menu>summary.selected:after,.zh-level-nav>a.zh-resource-link.selected:after{left:12px;right:12px}} @media(min-width:601px){.zh-level-nav{align-items:center;align-self:center}} .character-page{padding:42px 0 60px;max-width:1000px;margin:auto}.character-page h1{font-size:34px;margin:0 0 16px}.character-intro{font-size:18px;line-height:1.85;color:var(--muted);margin-bottom:26px}.character-toc{display:flex;gap:12px 28px;flex-wrap:wrap;padding:18px 0;border-block:1px solid var(--line)}.character-toc a{color:var(--accent);font-size:16px;padding:6px 0;text-underline-offset:5px;min-height:44px;display:inline-flex;align-items:center}.character-section{padding-top:44px;scroll-margin-top:24px}.character-section>h2{font-size:27px;margin:0 0 14px}.character-section>p{font-size:17px;line-height:1.85;color:var(--muted);max-width:75ch;margin:0 0 25px}.character-section h3{font-size:18px;margin:0 0 8px}.structure-list,.radical-list,.stroke-learning-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 32px}.structure-list article,.radical-list article,.stroke-learning-list article{padding:24px 0;border-top:1px solid var(--line);min-width:0}.structure-examples{font:500 32px/1.8 'Zhiyu Chinese',sans-serif;margin:12px 0}.structure-list p,.radical-list p,.stroke-learning-list p{font-size:16px;line-height:1.85;margin:5px 0}.structure-list .py{font-size:16px}.radical-list article{display:grid;grid-template-columns:65px minmax(0,1fr);gap:18px}.radical-symbol{font:500 44px/1.4 'Zhiyu Chinese',sans-serif;color:var(--accent)}.radical-pinyin{font-family:'Zhiyu Pinyin',sans-serif;color:var(--accent)}.radical-word{padding-top:10px}.radical-word span{margin-right:6px}.stroke-learning-list article{display:grid;grid-template-columns:130px minmax(0,1fr);gap:20px}.stroke-diagram svg{display:block;width:130px;height:130px;background:white;border:1px solid var(--line)}.stroke-guide{stroke:var(--line);stroke-width:1;fill:none}.basic-stroke-path{stroke:var(--ink);stroke-width:9;stroke-linecap:round;stroke-linejoin:round;fill:none}.stroke-start{fill:var(--accent)}.stroke-learning-list h3 span{font:400 16px/1.7 'Zhiyu Pinyin',sans-serif;color:var(--accent);margin-left:8px}.stroke-learning-list .line{margin-top:12px;font-size:14px}.character-page h2:focus{outline:2px solid var(--accent);outline-offset:6px} @media(max-width:700px){.character-page{padding-top:30px}.character-page h1{font-size:28px}.character-intro{font-size:17px}.structure-list,.radical-list,.stroke-learning-list{grid-template-columns:1fr}.character-section{padding-top:34px}.character-section>h2{font-size:24px}.stroke-learning-list article{grid-template-columns:110px minmax(0,1fr);gap:16px}.stroke-diagram svg{width:110px;height:110px}.character-toc{gap:8px 20px}.character-toc a{font-size:15px}.radical-list article{grid-template-columns:54px minmax(0,1fr)}.radical-symbol{font-size:40px}} .radical-symbol small{display:block;font-size:24px;margin-top:8px;color:var(--muted)}.radical-reading{color:var(--accent)}.radical-note{font-size:14px!important;color:var(--muted);padding-top:10px}.structure-examples{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}.structure-examples small,.structure-word small{font:400 14px/1.8 var(--sans);color:var(--muted)}.structure-word strong{font-size:21px;font-weight:500;margin-right:8px}.stroke-diagram svg{width:150px;height:150px}.stroke-learning-list article{grid-template-columns:150px minmax(0,1fr)} @media(max-width:700px){.stroke-diagram svg{width:110px;height:110px}.stroke-learning-list article{grid-template-columns:110px minmax(0,1fr)}} /* Consistent native disclosures for the three character topics. */ .character-page{max-width:1000px}.character-disclosure.character-section{padding:0;border-top:1px solid var(--line);scroll-margin-top:24px}.character-disclosure:last-child{border-bottom:1px solid var(--line)}.character-disclosure>summary{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;gap:20px;align-items:center;padding:25px 8px;min-height:80px;cursor:pointer;list-style:none}.character-disclosure>summary::-webkit-details-marker{display:none}.character-disclosure>summary::marker{content:''}.character-disclosure>summary h2{font-size:23px;line-height:1.5;margin:0;font-weight:600}.character-disclosure>summary>span{font-size:14px;color:var(--muted)}.character-disclosure>summary svg{color:var(--muted)}.character-disclosure[open]>summary svg{transform:rotate(180deg)}.character-disclosure>summary:hover{background:var(--light)}.character-disclosure>summary:focus-visible{outline:3px solid var(--accent);outline-offset:-3px}.character-panel{padding:4px 8px 28px}.character-panel>p{font-size:16px;line-height:1.9;color:var(--muted);margin:0 0 24px;max-width:75ch}.structure-examples{display:flex;gap:32px;margin:16px 0 0}.structure-examples>div{display:flex;flex-direction:column;align-items:center;gap:6px;min-width:48px}.structure-examples>div>span:first-child{font:500 36px/1.5 'Zhiyu Chinese',sans-serif}.structure-examples>div>span:last-child{font:400 17px/1.7 'Zhiyu Pinyin',sans-serif;color:var(--accent)}.stroke-learning-list article{align-items:stretch}.stroke-learning-list article>div:last-child{display:flex;flex-direction:column;align-items:flex-start}.stroke-learning-list article>div:last-child>p{margin:5px 0}.stroke-learning-list article .line{margin-top:auto;align-self:flex-start}.stroke-learning-list article>div:last-child>p:last-of-type{margin-bottom:16px} @media(max-width:700px){.character-disclosure>summary{padding:20px 4px;gap:14px;min-height:72px}.character-disclosure>summary h2{font-size:21px}.character-panel{padding:0 4px 24px}.character-disclosure>summary>span{font-size:13px}.structure-examples{gap:28px}} /* All component glyphs use the same locally bundled Chinese face. */ .radical-symbol{font-family:'Zhiyu Chinese',sans-serif;font-size:42px;font-weight:400;line-height:1.5;color:var(--ink);font-synthesis:none}.radical-symbol small{font-family:'Zhiyu Chinese',sans-serif;font-size:23px;font-weight:400;color:var(--muted)} @media(max-width:700px){.radical-symbol{font-size:38px}} /* Component forms: traditional teaching-style Kai, original accent color. */ .radical-symbol,.radical-symbol small{font-family:'Kaiti SC','STKaiti','KaiTi','楷体','Zhiyu Chinese',serif;font-weight:400;color:var(--accent);font-synthesis:none} .pinyin-page{padding:42px 0 60px}.pinyin-page h1{font-size:34px;margin:0 0 16px}.pinyin-intro{font-size:18px;color:var(--muted);line-height:1.8;max-width:70ch;margin-bottom:28px}.py-player{background:#fff;border-radius:12px;padding:26px 28px;margin-bottom:28px}.py-selection-heading{display:flex;justify-content:space-between;gap:24px;align-items:center}.py-large{font:500 46px/1.4 'Zhiyu Pinyin',sans-serif;color:var(--accent)}.py-selection-heading p{font-size:15px;margin:10px 0 0}.py-tone-buttons{display:flex;gap:10px}.py-tone-buttons button{min-width:80px;min-height:78px;border:1px solid var(--line);border-radius:8px;background:white;color:var(--ink);padding:12px}.py-tone-buttons button>span{display:block;font:400 24px/1.4 'Zhiyu Pinyin',sans-serif}.py-tone-buttons small{display:block;font-size:12px;margin-top:6px}.py-tone-buttons .active{background:var(--light);color:var(--accent);border-color:var(--accent)}.py-player audio{width:min(100%,530px);height:42px;margin-top:22px}.py-status,.py-spelling-note{font-size:14px;color:var(--muted);line-height:1.8;margin:12px 0 0}.py-filters{display:grid;grid-template-columns:2fr 1fr 1fr auto;gap:16px;align-items:end;margin-bottom:22px}.py-filters label{display:flex;flex-direction:column;gap:9px;font-size:14px;min-width:0}.py-filters input,.py-filters select{width:100%;min-width:0;height:46px;border:1px solid #bbc5dc;background:#fff;color:var(--ink);border-radius:7px;padding:10px 12px;font:16px/1.4 var(--sans)}.py-filters .line{height:46px}.py-table-scroll{max-width:100%;overflow:auto;max-height:650px;border:1px solid var(--line);background:white;overscroll-behavior:contain}.py-chart{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-family:'Zhiyu Pinyin',var(--sans)}.py-chart caption{text-align:left;font-size:14px;padding:14px;color:var(--muted)}.py-chart th,.py-chart td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);text-align:center;min-width:64px;height:49px;padding:3px}.py-chart th{font-size:14px;font-weight:600;background:#eef1fa;position:sticky;z-index:1}.py-chart thead th{top:0;z-index:2}.py-chart th:first-child{left:0;min-width:105px}.py-chart thead th:first-child{z-index:3}.py-chart td>span{color:#b2bac9;font-size:12px}.py-chart button,.py-mobile-list button{min-width:50px;min-height:42px;padding:8px;border:0;background:none;color:var(--ink);font:400 16px/1.5 'Zhiyu Pinyin',sans-serif;border-radius:5px}.py-chart button:hover,.py-mobile-list button:hover{background:var(--light);color:var(--accent)}.py-chart button[aria-pressed=true],.py-mobile-list button[aria-pressed=true]{background:var(--accent);color:white}.py-result-count,.py-scroll-note{font-size:14px;color:var(--muted);line-height:1.8}.py-mobile-list,.py-show-more{display:none}.py-notes{padding:20px 0;border-bottom:1px solid var(--line);font-size:15px;line-height:1.9}.py-notes summary{font-size:16px;min-height:44px;cursor:pointer;align-content:center;font-weight:600}.py-notes li{margin:12px 0}.py-notes a{color:var(--accent)}.py-empty{padding:24px;background:var(--light);line-height:1.8} @media(max-width:850px){.py-selection-heading{align-items:flex-start;flex-direction:column}.py-tone-buttons{width:100%}.py-tone-buttons button{flex:1}.py-filters{grid-template-columns:1fr 1fr}.py-filters label:first-child{grid-column:1/-1}.py-filters .line{grid-column:1/-1}} @media(max-width:700px){.pinyin-page{padding-top:30px}.pinyin-page h1{font-size:28px}.pinyin-intro{font-size:16px}.py-player{padding:20px}.py-large{font-size:38px}.py-tone-buttons{gap:7px}.py-tone-buttons button{min-width:0;min-height:74px;padding:10px 6px}.py-tone-buttons button>span{font-size:22px}.py-table-scroll,.py-scroll-note{display:none}.py-mobile-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.py-mobile-list button{border:1px solid var(--line);background:#fff;min-height:48px;min-width:0}.py-show-more{display:inline-flex;width:100%;margin-top:18px}.py-filters{gap:14px}.py-filters input,.py-filters select{font-size:16px}.zh-level-nav{grid-template-columns:repeat(6,minmax(0,1fr))}.zh-level-nav>.zh-hsk-menu,.zh-level-nav>a.zh-resource-link{grid-column:span 2;min-height:56px}.zh-level-nav>a.zh-resource-link:nth-last-child(-n+2){grid-column:span 3}} @media(min-width:701px){.py-show-more{display:none}} .py-inline-tones{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:12px 0 18px}.py-inline-tones>span{font-size:14px;color:var(--muted);margin-right:8px}.py-inline-tones button{border:1px solid var(--line);border-radius:6px;background:white;color:var(--ink);font:400 14px/1.5 var(--sans);min-height:44px;padding:9px 14px}.py-inline-tones button[aria-pressed=true]{background:var(--light);border-color:var(--accent);color:var(--accent)}.py-mobile-summary{display:none;font-size:13px;color:var(--muted)}@media(max-width:700px){.py-mobile-summary{display:block}.py-inline-tones{gap:6px}.py-inline-tones>span{width:100%}.py-inline-tones button{flex:1;padding:9px 6px}} main h1:focus:not(:focus-visible),main h2:focus:not(:focus-visible){outline:none} /* Four tones unfold at the selected syllable, without shifting chart cells. */ .py-tone-popover{position:fixed;inset:auto;margin:0;width:300px;max-width:calc(100vw - 24px);padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);box-shadow:0 8px 28px #27344924;overflow:visible} .py-tone-popover::backdrop{background:transparent}.py-popover-heading{display:flex;align-items:center;gap:10px;margin-bottom:14px}.py-popover-heading strong{font:500 22px/1.4 'Zhiyu Pinyin',sans-serif;color:var(--accent)}.py-popover-heading>span{font:400 12px/1.5 var(--sans);color:var(--muted)}.py-close{margin-left:auto;width:32px;height:32px;border:0;background:transparent;font-size:23px;color:var(--muted);cursor:pointer;border-radius:4px}.py-cell-tones{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.py-cell-tones button{min-width:0;min-height:72px;padding:8px 3px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);cursor:pointer}.py-cell-tones button>span{display:block;font:400 23px/1.5 'Zhiyu Pinyin',sans-serif}.py-cell-tones small{font:400 11px/1.5 var(--sans);display:block;color:var(--muted)}.py-cell-tones button:hover,.py-cell-tones button[aria-pressed=true]{background:var(--light);border-color:var(--accent);color:var(--accent)}.py-tone-popover .py-status{font-size:12px;min-height:22px;margin-top:12px}.py-chart button[aria-expanded=true],.py-mobile-list button[aria-expanded=true]{background:var(--accent);color:white}.py-tone-popover button:focus-visible{outline:3px solid var(--accent);outline-offset:2px} /* Reading aids: a tone-mark icon, a translation icon and explicit on/off state. */ .zh-reading-options{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.zh-reading-options .zh-reading-toggle{display:inline-flex;align-items:center;gap:9px;min-height:46px;padding:8px 11px;border:1px solid #c6cee2;border-radius:9px;background:#fff;color:var(--muted);font:500 14px/1.5 var(--sans);cursor:pointer;white-space:nowrap;transition:background-color 140ms ease,border-color 140ms ease}.zh-reading-icon{display:flex;align-items:center;justify-content:center;width:26px;height:26px;color:var(--accent);flex-shrink:0}.zh-reading-icon svg{width:24px;height:24px}.zh-reading-switch{display:inline-flex;align-items:center;width:28px;height:17px;padding:2px;background:#d5dbe8;border-radius:12px;flex-shrink:0}.zh-reading-switch>span{display:block;width:13px;height:13px;border-radius:50%;background:#fff;transform:translateX(0);transition:transform 140ms ease}.zh-reading-options .zh-reading-toggle[aria-pressed=true]{background:var(--light);border-color:var(--accent);color:var(--accent)}.zh-reading-toggle[aria-pressed=true] .zh-reading-switch{background:var(--accent)}.zh-reading-toggle[aria-pressed=true] .zh-reading-switch>span{transform:translateX(11px)}.zh-reading-options .zh-reading-toggle:hover{border-color:var(--accent);background:var(--light)}.zh-reading-options .zh-reading-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px}.zh-dialogue-toolbar{gap:16px;flex-wrap:wrap} @media(max-width:700px){.zh-dialogue-toolbar{align-items:flex-start;flex-direction:column}.zh-reading-options{width:100%;gap:10px}.zh-reading-options .zh-reading-toggle{flex:1;justify-content:flex-start;font-size:13px;padding:9px 10px;gap:7px}.zh-reading-switch{margin-left:auto}} @media(prefers-reduced-motion:reduce){.zh-reading-toggle,.zh-reading-switch>span{transition:none!important}} /* Route announcements focus static content without drawing a page-sized frame. */ main :is(h1,h2)[tabindex="-1"]:focus,main :is(h1,h2)[tabindex="-1"]:focus-visible{outline:none;box-shadow:none} /* A practical lesson entry replaces the promotional welcome copy. */ .zh-learning-entry{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:8px 0}.zh-learning-entry .zh-entry-kicker{margin:0 0 16px;font:500 14px/1.5 var(--sans);color:var(--muted)}.zh-learning-entry h1{font-size:38px;line-height:1.35;letter-spacing:0;margin:0 0 32px}.zh-entry-course{display:flex;align-items:center;gap:22px;padding:0;margin-bottom:30px}.zh-entry-index{font:400 54px/1 'Zhiyu Latin',sans-serif;color:#8b98c8;border-right:1px solid var(--line);padding-right:22px}.zh-learning-entry .zh-entry-level{font-size:13px;line-height:1.5;color:var(--accent);margin:0 0 6px}.zh-entry-course h2{font-size:25px;line-height:1.5;font-weight:600;margin:0 0 7px}.zh-learning-entry .zh-entry-description{font-size:15px;line-height:1.7;color:var(--muted);margin:0}.zh-entry-actions{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.zh-entry-actions .primary{display:inline-flex;align-items:center;gap:28px;min-height:48px;padding:12px 22px;font-size:15px}.zh-entry-actions svg{width:18px;height:18px}.zh-entry-pinyin{display:inline-flex;align-items:center;gap:8px;border:0;background:transparent;color:var(--muted);font:500 14px/1.5 var(--sans);min-height:44px;padding:8px 0;cursor:pointer}.zh-entry-pinyin:hover{color:var(--accent)}.zh-entry-progress{width:min(100%,330px);margin:0 0 24px}.zh-entry-progress .progress-track{margin:0 0 7px;height:4px}.zh-entry-progress>span{font-size:12px;color:var(--muted)}.zh-welcome{align-items:stretch}.zh-learning-entry+.daily-card{align-self:stretch} @media(max-width:700px){.zh-learning-entry h1{font-size:30px;margin-bottom:26px}.zh-entry-course{gap:16px;margin-bottom:26px}.zh-entry-index{font-size:44px;padding-right:16px}.zh-entry-course h2{font-size:22px}.zh-learning-entry .zh-entry-kicker{font-size:13px;margin-bottom:12px}.zh-entry-actions{gap:20px}.zh-learning-entry{padding:0 0 8px}} /* Learning feedback: shape, text and colour communicate the result together. */ .answers button{display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left} .answers button[aria-pressed=true]{outline:none} .answers button.answer-correct{color:#19614f;background:#eaf5ef;border:1px solid #73a58e;opacity:1} .answers button.answer-wrong{color:#963d39;background:#fcf0ee;border:1px solid #cd8e87;opacity:1} .answers button:disabled:not(.answer-correct):not(.answer-wrong){color:#657185;background:#f5f7fa;border-color:#e2e7ef;opacity:1} .answer-result{display:inline-flex;align-items:center;gap:6px;font-size:12px;flex-shrink:0} .answer-mark{width:22px;height:22px;flex-shrink:0;vertical-align:middle} .feedback.feedback-correct,.feedback.feedback-wrong{display:flex;align-items:flex-start;gap:12px;padding:18px 20px;border:0;border-radius:10px;outline:none;box-shadow:none} .feedback.feedback-correct{background:#eaf5ef;color:#19614f} .feedback.feedback-wrong{background:#fcf0ee;color:#963d39} .feedback strong{display:block;font-size:16px;line-height:1.6} .feedback p{margin:6px 0 0;color:inherit;font-size:15px;line-height:1.85} .feedback .answer-mark{margin-top:3px} .pronunciation-content{max-width:860px} .pronunciation-content .pronunciation-topic{padding:26px 28px;background:#edf1fa;border:0;border-radius:12px;margin:24px 0 32px} .pronunciation-topic h3{font-size:23px;line-height:1.5;margin:0 0 12px;color:#304478} .pronunciation-topic>p{font-size:17px;line-height:1.95;margin:0 0 24px;max-width:70ch;color:#485a75} .pronunciation-topic .phonetic-table{display:grid;gap:0} .pronunciation-topic .phonetic-table>div{grid-template-columns:minmax(120px, .28fr) minmax(0,1fr);gap:24px;padding:22px 0;border-top:1px solid #d5deed;align-items:start} .pronunciation-topic .phonetic-table b{font-size:17px;line-height:1.9;font-weight:650;color:#304478;overflow-wrap:anywhere} .pronunciation-topic .phonetic-table span{font-size:17px;line-height:2;color:#3f506b;white-space:pre-line;overflow-wrap:anywhere} @media(max-width:760px){ .pronunciation-content .pronunciation-topic{padding:22px 20px;margin:20px 0 26px} .pronunciation-topic h3{font-size:21px} .pronunciation-topic>p{font-size:16px;margin-bottom:20px} .pronunciation-topic .phonetic-table>div{grid-template-columns:1fr;gap:8px;padding:20px 0} .pronunciation-topic .phonetic-table :is(b,span){font-size:16px} .answer-result span{display:none} .feedback.feedback-correct,.feedback.feedback-wrong{padding:16px;gap:10px} } /* A quiet reading palette: one shared surface, one selected chapter. */ .lesson-layout{--study-paper:#f0f4f1;--study-nav:#e8eeea;--study-selected:#d5e2d9;--study-ink:#304b3d;--study-muted:#53675b;--study-edge:#8ba393} .lesson-layout .sidebar>button[data-study-section]{background:transparent;color:var(--study-muted);border:1px solid transparent;border-radius:8px;margin:0 0 7px;min-height:52px;padding:13px 14px;position:relative} .lesson-layout .sidebar>button[data-study-section] .index{color:inherit;opacity:.8} .lesson-layout .sidebar>button[data-study-section]:hover{background:var(--study-nav);color:var(--study-ink)} .lesson-layout .sidebar>button[data-study-section].active{background:var(--study-selected);border-color:var(--study-edge);color:var(--study-ink);font-weight:700} .lesson-layout .zh-lesson-main{background:var(--study-paper);border-radius:14px;padding:30px;min-width:0} .lesson-layout .zh-lesson-main>.study-heading,.lesson-layout .zh-lesson-main .pronunciation-content>.study-heading{color:var(--study-ink)} .lesson-layout .zh-lesson-main .tip-card{background:transparent} .lesson-layout .zh-lesson-main .pronunciation-topic{background:transparent;padding:22px 0;border-radius:0;border-bottom:1px solid #d2dfd6} .lesson-layout .pronunciation-topic :is(h3,.phonetic-table b){color:var(--study-ink)} .lesson-layout .pronunciation-topic>p,.lesson-layout .pronunciation-topic .phonetic-table span{color:#405a4c} .lesson-layout .pronunciation-topic .phonetic-table>div{border-color:#d2dfd6} .lesson-layout .zh-dialogue-reading{background:#f7f9f6;border-color:#d5e0d7} .lesson-layout .zh-lesson-main .word{background:#f7f9f6;border-color:#d5e0d7} @media(max-width:760px){ .lesson-layout .sidebar>button[data-study-section]{background:var(--study-nav);margin:0;min-height:48px;padding:11px 8px} .lesson-layout .sidebar>button[data-study-section].active{background:var(--study-selected)} .lesson-layout .zh-lesson-main{padding:22px 18px;border-radius:12px} .lesson-layout .zh-lesson-main .pronunciation-topic{padding:18px 0;margin:18px 0 24px} } .zh-brand .zh-brand-logo{display:block;width:148px;height:78px;object-fit:contain}.zh-brand{min-width:148px;padding:0}.zh-header.masthead{min-height:94px}@media(max-width:760px){.zh-brand .zh-brand-logo{width:112px;height:65px}.zh-brand{min-width:112px}}