/* Learning studio: ink, paper white and a restrained cinnabar accent. */
:root{--green:#b43b32;--ink:#202a30;--muted:#68747b;--line:#e2e6e8;--mint:#f8eeeb;--white:#fff;color:var(--ink);background:#f7f8fa;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.65}
body{background:#f7f8fa}h1{font-size:clamp(2rem,3.4vw,3rem);font-weight:700;letter-spacing:-.045em;line-height:1.22}h2{font-weight:650}h3{font-weight:650}.eyebrow{font-size:.8125rem;letter-spacing:.13em;font-weight:650}.shell{grid-template-columns:224px minmax(0,1fr)}.sidebar{background:#1d292e;color:#fff;border:0;padding:2rem 1.1rem;gap:2.7rem}.brand{color:inherit;font-size:1.05rem;letter-spacing:-.025em;padding:0 .35rem;gap:.8rem;line-height:1.4}.brand-mark{border-radius:8px;background:#b43b32;width:42px;height:48px;font-family:"Songti SC",SimSun,serif;font-size:1.8rem}.nav{gap:.3rem}.nav a{color:#b9c3c7;font-weight:500;border-radius:7px;min-height:48px;padding:.8rem 1rem;gap:.85rem}.nav a.active{color:white;background:#354247;box-shadow:inset 3px 0 #e38c7c}.nav a:hover{color:#fff;background:#2b393f}.nav .icon{width:19px;height:19px;stroke-width:1.5}.side-bottom{color:#a7b5bb}.side-bottom a{color:#b9c3c7;text-decoration:none;font-size:.8125rem;margin-top:.65rem}.side-bottom a:hover{color:#fff}.tip{background:none;border-top:1px solid #3c494f;border-radius:0;padding:1.3rem .35rem 0;font-size:.875rem;line-height:1.8;margin-bottom:1.5rem}.tip strong{font-weight:500;color:#e6ebed}.topbar{background:#f7f8fa;min-height:84px;padding:1.2rem 3rem;border-bottom:1px solid var(--line)}.topbar .hint{display:flex;gap:.85rem;align-items:center;font-size:.875rem}.topbar .hint b{font-weight:500;color:var(--ink)}.topbar .hint i{color:#bcc5c9;font-style:normal}.topstats{gap:1rem;font-weight:500}.topstats>.fire{font-size:.8125rem;color:var(--muted)}.topstats>span:not(.fire){font-size:.8125rem}.topstats>.button{min-height:40px;font-size:.875rem;padding:.6rem 1rem}.content{padding:2.6rem 3rem 4rem;max-width:1400px}.page-head{margin-bottom:2rem;align-items:center}.page-head p{margin-top:.75rem;max-width:42rem}.page-head .eyebrow{display:block;margin-bottom:.65rem}.card{border-radius:12px;box-shadow:0 2px 3px #202a3002;padding:1.6rem}.button{border-radius:7px;font-weight:600;min-height:46px;padding:.8rem 1.1rem;background:var(--green);color:white;font-size:.9375rem}.button:hover{background:#942f28}.button.secondary{color:var(--ink);background:#fff;border-color:#d9e0e3}.button.secondary:hover{background:#f3f5f6;border-color:#aab7be}.iconbutton{border-radius:8px}.button:focus-visible,button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #3b7eaa;outline-offset:3px}.pill{font-size:.8125rem;font-weight:500;background:#eef1f3;padding:.3rem .7rem}.pill.green{color:#96372e;background:var(--mint)}.dashboard{grid-template-columns:minmax(0,1fr) 268px;gap:1.75rem}.dashboard>.stack{gap:2rem}.feature{position:relative;color:var(--ink);background:#fff;border:1px solid var(--line);padding:0;grid-template-columns:minmax(0,1fr) 176px;gap:0;overflow:hidden;min-height:290px}.feature-copy{padding:2rem}.feature .eyebrow{color:var(--green);font-size:.75rem}.feature h2{font-size:clamp(1.55rem,2.3vw,2rem);letter-spacing:-.035em;line-height:1.3;margin:.9rem 0 .8rem}.feature p{color:var(--muted);font-size:.9375rem;margin-bottom:1.4rem}.feature .button{color:#fff;background:var(--ink);border-color:var(--ink);font-weight:550}.feature .button:hover{background:#36464e}.feature-word{background:#f8eeeb;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.4rem;padding:1.5rem 1rem;border-left:1px solid #efdfdb;text-align:center}.feature-word .hanzi{font-family:"Songti SC","Noto Serif CJK SC",SimSun,serif;font-size:3.7rem;color:#aa3931;line-height:1.35;overflow-wrap:anywhere}.feature-word .pinyin{color:#a94c42;font-size:1rem}.feature-word small{font-size:.8125rem;color:#916760;max-width:140px}.feature-word .eyebrow{margin-top:1rem;font-size:.75rem;color:#916760;letter-spacing:.08em}.section-head{margin:0 0 1.2rem}.section-head h2{font-size:1.1rem;letter-spacing:-.015em}.lesson-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.lesson{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:1.1rem;padding:1.25rem;min-height:185px;border-radius:10px;transition:border-color .15s,background .15s}.lesson.current{padding:1.25rem;border:1px solid #26383f;background:#26383f;color:#fff}.lesson:hover{border-color:#8e9fa8;background:#fcfdfd}.lesson.current:hover{background:#31464f;border-color:#31464f}.lesson-top{display:flex;justify-content:space-between;align-items:center}.number{width:auto;height:auto;background:none;color:#89959b;border-radius:0;font-size:.8125rem;font-weight:550;letter-spacing:.06em}.current .number{color:#b8cacf;background:none}.done .number{background:none;color:#b43b32}.number .icon{height:17px;width:17px}.lesson-tag{font-size:.75rem;color:#718187;font-weight:450}.current .lesson-tag{color:#bbd0d5}.lesson h3{font-size:1rem;line-height:1.5}.lesson p{font-size:.875rem;margin-top:.4rem;font-weight:400;line-height:1.6}.lesson.current p{color:#bbccd2}.lesson-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:auto;padding-top:.3rem;font-size:.8125rem;color:#76848b}.current .lesson-bottom{color:#e0e9eb}.lesson-bottom .icon{height:17px;width:17px}.curriculum-note{font-size:.8125rem;margin-top:1rem;color:#7b868d}.aside{gap:1.2rem}.aside .card{padding:1.4rem}.aside h2{font-size:.9375rem;font-weight:600}.aside .metric{font-size:2.3rem;font-weight:550;margin:1.1rem 0 .9rem}.aside .small{font-size:.8125rem}.aside .button{font-size:.8125rem}.goal-label{color:var(--muted);display:block;font-size:.8125rem;margin-bottom:.6rem}.metric{font-weight:600;letter-spacing:-.04em}progress{height:5px;background:#eceff1}progress::-webkit-progress-bar{background:#eceff1}progress::-webkit-progress-value{background:var(--green)}.week{border-top:1px solid var(--line);padding-top:1rem;margin-top:1.3rem;gap:.1rem}.day{font-size:.75rem}.day span{width:25px;height:25px;font-size:.75rem;font-weight:500;background:#f3f5f6}.day.today span{outline:1px solid #b43b32;outline-offset:1px}.daily-card{background:#fff}.daily-word{padding:1rem 0}.daily-word .big{font-family:"Songti SC",SimSun,serif;font-size:3rem}.pinyin{color:#a64138}.daily-word p{font-size:.9375rem}.study{max-width:860px}.shell.is-studying .content{padding-top:2rem}.study-top{margin-bottom:2rem}.study-top .button{background:none;border:0;color:#71818a;padding:.5rem}.study-top progress{height:5px}.study>.section-head{margin:0 0 1.5rem}.study>.section-head h2{font-size:1rem;color:var(--muted);font-weight:500}.flashcard{min-height:430px;padding:2.4rem 2.2rem;gap:.8rem;border-radius:14px;box-shadow:0 10px 36px #26383f04}.flashcard .big{font-family:"Songti SC","Noto Serif CJK SC",SimSun,serif;font-size:clamp(4rem,9vw,6rem);line-height:1.4;letter-spacing:.1em}.flashcard .pinyin{font-size:1.3rem;margin-top:-.5rem}.flashcard .meaning{font-size:1.15rem;margin-bottom:.4rem;color:#566970}.flashcard>.row{justify-content:center;flex-wrap:wrap}.flashcard>.row .button{font-size:.8125rem;min-height:40px;background:#fff;padding:.6rem .8rem}.flashcard>.row .button .icon{width:17px;height:17px}.example-box{margin-top:1.1rem;background:#f7f8fa;border-radius:8px;border-left:2px solid #d9e1e5;padding:1.3rem;max-width:100%}.example-box .hanzi{font-size:1.4rem;margin-bottom:.4rem}.example-box p:not(.hanzi){font-size:.9375rem}.example-box .button{background:none;border-color:transparent;font-size:.8125rem;min-height:36px;padding:.4rem .65rem}.study-actions{margin-top:1.5rem}.study-actions .small{font-size:.8125rem}.answers{gap:1rem}.answer{border-width:1px;min-height:74px;padding:1.2rem;border-radius:9px;font-size:1rem;box-shadow:0 2px 0 #e6eaed}.answer.correct{color:#246344;background:#edf6ef;border-color:#82b495}.answer.wrong{color:#9a3934;background:#fcf0ee;border-color:#cb8b84}.feedback{color:#246344;background:#edf6ef;border:1px solid #cee3d5;border-radius:9px}.feedback.wrong{color:#903c36;background:#fcf0ee;border-color:#ecd3ce}.vocab-grid{gap:1.25rem}.vocab{padding:1.6rem}.vocab .hanzi{font-family:"Songti SC",SimSun,serif;font-size:2rem}.vocab .example .hanzi{font-size:1.25rem}.toolbar input,.toolbar select{min-height:46px;border-radius:7px}.mode-switch{display:flex;padding:.3rem;background:#edf0f2;border-radius:9px;gap:.25rem;max-width:100%}.mode-switch button{border:0;border-radius:6px;background:none;padding:.65rem 1rem;font-size:.875rem;min-height:42px;font-weight:500}.mode-switch button.active,.mode-switch button[aria-pressed=true]{background:#fff;color:var(--ink);box-shadow:0 1px 4px #182a3212}.practice>.mode-switch{margin-top:1.5rem;position:sticky;top:-1px;z-index:2}.practice>.mode-switch button{flex:1;white-space:nowrap}.practice>p.muted{font-size:.875rem}.stroke-panel{background:white;border:0;padding:0;margin:1.5rem 0}.stroke-panel>h3{font-size:1.25rem;letter-spacing:-.025em}.stroke-panel>p{font-size:.9375rem;color:var(--muted);margin:.5rem 0 1.1rem}.stroke-panel button{border:1px solid var(--line);border-radius:7px;min-height:44px;padding:.65rem 1rem;background:#fff;color:var(--ink);font-size:.875rem;font-weight:550}.stroke-panel button:hover{background:#f5f7f8}.stroke-panel button[aria-pressed=true]{background:#26383f;border-color:#26383f;color:#fff}.stroke-panel [data-char]{font-size:1.3rem;min-width:48px}.stroke-panel>.row{justify-content:center;flex-wrap:wrap}.stroke-panel .stroke-target{margin:1.4rem auto;border-color:#dce2e5;border-radius:0}.stroke-panel .stroke-status{padding:.9rem 1rem;background:#f7f8fa;border-radius:7px;margin:1.2rem 0 .5rem;font-size:.875rem}.stroke-panel>a{font-size:.75rem;color:var(--muted)}.free-canvas{border-top:1px solid var(--line);padding-top:1.25rem;margin-top:2rem}.free-canvas>summary{font-weight:550;font-size:.9375rem}.writing-board{border-color:#dce2e5}.practice textarea{border-radius:7px;background:#fcfdfd;line-height:1.9}.practice #conversation{margin-top:1.25rem;padding:1.2rem;background:#f7f8fa;border-radius:9px}.practice #conversation>.hanzi{font-size:2rem;margin:.5rem 0}.correction-card{border-left:3px solid #c5776c;background:white;border-radius:9px;padding:1.5rem}.result>.big{font-family:"Songti SC",SimSun,serif}.result h1{font-size:2rem}.result>.grid3>.card{background:#f7f8fa;border:0;border-radius:9px}.result>.grid3 .metric{font-size:1.9rem}.lesson-reflection>h2{font-size:1.3rem}.notice{border-radius:8px;background:#f0f4f6;border-color:#d5e0e5;color:#435d6b}.notice.error{background:#fcf0ee;color:#963b32}.notice.warning{background:#fbf4e8;color:#865824}.login-gate{margin:3rem auto;padding:2.4rem;box-shadow:0 12px 48px #1e303007}.login-gate .brand-mark{width:44px}.login-gate p{color:var(--muted)}dialog{padding:2rem;border-radius:14px;border:1px solid #e0e6e8;box-shadow:0 24px 100px #182a3233;width:min(94vw,720px)}dialog::backdrop{background:#14252c8c;backdrop-filter:blur(3px)}dialog h2{font-weight:600;font-size:1.4rem;letter-spacing:-.025em}.close{border:0;background:#f3f5f6;border-radius:50%;margin:0 0 1rem 1rem;width:36px;height:36px}#toast{border-radius:8px;box-shadow:0 8px 32px #15272d22;background:#26383f}th{font-size:.8125rem;text-transform:none;letter-spacing:0;font-weight:550}td,th{padding:1rem .75rem}.legal p{line-height:1.9}.legal h2{font-size:1.2rem}.mobile-brand{color:var(--ink)}.container{max-width:850px;margin:3rem auto;padding:0 1.5rem}.container h2{margin-top:2rem}.container p{margin:1rem 0}
@media(min-width:1500px){.content{padding-top:3rem}.feature{min-height:310px}.feature-copy{padding:2.4rem}}
@media(max-width:1180px){.shell{grid-template-columns:195px minmax(0,1fr)}.sidebar{padding:1.8rem .8rem}.content{padding:2rem}.topbar{padding:1.1rem 2rem}.dashboard{grid-template-columns:minmax(0,1fr) 235px;gap:1.2rem}.feature{grid-template-columns:minmax(0,1fr) 135px}.feature-copy{padding:1.5rem}.feature-word{padding:1rem .5rem}.feature-word .hanzi{font-size:3rem}.lesson-list{gap:.8rem}.lesson,.lesson.current{padding:1rem}.aside .card{padding:1.15rem}.brand{font-size:.95rem}.nav a{padding:.8rem .7rem;font-size:.875rem}}
@media(max-width:980px){.dashboard{grid-template-columns:1fr}.aside{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.aside .daily-card{display:none}.feature{grid-template-columns:minmax(0,1fr) 180px;min-height:260px}.feature-copy{padding:1.8rem}.feature-word .hanzi{font-size:3.6rem}.topbar .hint{display:none}.topbar{justify-content:flex-end}.lesson{min-height:175px}.topstats .fire{display:none}}
@media(max-width:700px){.shell{display:block}.sidebar{height:auto;background:#fff;border-top:1px solid #e0e5e8;padding:.35rem .2rem max(.35rem,env(safe-area-inset-bottom));gap:0}.sidebar>.brand,.side-bottom{display:none}.nav{display:flex;gap:0;overflow-x:auto;justify-content:space-around}.nav a{padding:.5rem .35rem;min-width:48px;min-height:50px;font-size:.75rem;color:#6b7b83;border-radius:7px;line-height:1.3}.nav a.active{background:#f8eeeb;color:#9e362e;box-shadow:none}.nav a:hover{background:#f4f5f6;color:#26383f}.nav .icon{width:19px;height:19px}.topbar{background:#fff;padding:.9rem 1.1rem;min-height:74px;justify-content:space-between}.topstats{gap:.5rem}.topstats>.button{min-height:36px;font-size:.8125rem;padding:.5rem .75rem}.topstats>span:not(.fire){display:none}.mobile-brand{display:flex;font-size:.875rem;gap:.6rem}.mobile-brand .brand-mark{width:32px;height:37px;border-radius:6px;font-size:1.45rem}.mobile-brand span:last-child{max-width:110px}.content{padding:1.8rem 1.1rem 7rem}.page-head{margin-bottom:1.5rem}.page-head h1{font-size:2rem}.page-head p{font-size:.9375rem;line-height:1.7;margin-top:.5rem}.page-head .eyebrow{font-size:.75rem;margin-bottom:.5rem}.page-head>.pill{display:none}.feature{grid-template-columns:minmax(0,1fr) 108px;min-height:250px}.feature-copy{padding:1.4rem 1rem}.feature .eyebrow{font-size:.75rem;letter-spacing:.07em}.feature h2{font-size:1.4rem;margin:.8rem 0 .6rem}.feature p{font-size:.875rem;line-height:1.7}.feature .button{font-size:.8125rem;padding:.7rem .85rem;min-height:42px}.feature-word .hanzi{font-size:2.8rem}.feature-word .pinyin{font-size:.875rem}.feature-word small{font-size:.75rem}.feature-word .eyebrow{display:none}.dashboard>.stack{gap:1.6rem}.lesson-list{gap:.75rem}.lesson,.lesson.current{min-height:190px;padding:1rem;gap:.85rem}.lesson h3{font-size:.9375rem}.lesson p{font-size:.8125rem}.lesson-bottom{font-size:.75rem}.lesson-tag,.number{font-size:.75rem}.section-head h2{font-size:1rem}.aside{grid-template-columns:1fr 1fr;gap:.8rem}.aside>.card{padding:1rem}.aside h2{font-size:.875rem}.aside .metric{font-size:1.9rem}.aside .metric small{font-size:.8125rem}.aside .small{font-size:.75rem}.aside .button{padding:.6rem;font-size:.75rem}.week{gap:0}.day span{width:20px;height:24px;font-size:.75rem}.day{font-size:.75rem}.card{padding:1.25rem}.study-top{margin-bottom:1.25rem}.study>.section-head{margin-bottom:1rem}.flashcard{min-height:420px;padding:1.8rem 1rem;gap:.7rem}.flashcard .big{font-size:4.5rem}.flashcard>.row{gap:.45rem}.flashcard>.row .button{padding:.55rem .65rem;font-size:.75rem}.flashcard .meaning{font-size:1.1rem}.example-box{padding:1rem;margin-top:1rem}.example-box .hanzi{font-size:1.25rem}.example-box p:not(.hanzi){font-size:.875rem}.study-actions{gap:.7rem}.study-actions>.small{flex-basis:100%;order:3;text-align:center;margin-top:.3rem}.study-actions .button{font-size:.875rem}.result{padding:1.3rem}.result h1{font-size:1.6rem}.result>.grid3 .metric{font-size:1.6rem}.answers{gap:.7rem}.answer{min-height:62px;padding:1rem}.mode-switch button{padding:.6rem .7rem;font-size:.8125rem}.practice>.mode-switch{gap:.1rem}.practice>.mode-switch button{padding:.6rem .35rem}.login-gate{padding:1.5rem;margin:1rem auto}.login-gate h1{font-size:1.8rem}dialog{width:calc(100% - 1rem);padding:1.4rem 1rem;border-radius:12px;max-height:94dvh}.stroke-panel button{font-size:.8125rem;padding:.6rem .8rem}.stroke-panel>h3{font-size:1.1rem}.stroke-panel>p{font-size:.875rem}.container{margin:2rem auto}}
@media(max-width:370px){.lesson-list,.aside{grid-template-columns:1fr}.lesson{min-height:160px}.feature{grid-template-columns:minmax(0,1fr) 90px}.feature-copy{padding:1.2rem .8rem}.feature-word .hanzi{font-size:2.4rem}.nav a{min-width:42px;font-size:.75rem}.content{padding-left:.85rem;padding-right:.85rem}}
@media(prefers-reduced-motion:no-preference){.button,.iconbutton,.nav a,.lesson{transition:background .16s,border-color .16s,color .16s}.content>.page-head{animation:appear .22s ease-out}@keyframes appear{from{opacity:.6;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}
/* Conversation practice */
.dialogue-card{margin-top:1rem;padding:1.2rem;border:1px solid #e7d7cd;border-radius:14px;background:#fffaf7}.dialogue-card h3{margin:.45rem 0}.dialogue-history{display:grid;gap:.55rem;margin:1.1rem 0}.dialogue-line{padding:.65rem .8rem;border-left:3px solid #d8c4bb;background:#fff}.dialogue-line.mine{border-left-color:#8f4650;background:#fff4ee}.dialogue-line .hanzi{font-size:1.2rem;margin:.15rem 0}.dialogue-current{padding:1rem;border-radius:12px;background:#f7eee9;border:1px solid #ead6ce}.dialogue-current.mine{background:#f4e5de;border-color:#bb8a78}.dialogue-current .hanzi{font-size:2rem;margin:.35rem 0}.role-picker{display:flex;align-items:center;gap:.45rem;margin-top:1rem}.role-picker button{min-width:2.25rem;padding:.45rem .7rem;border:1px solid #c9a99c;border-radius:999px;background:#fff;color:#642830}.role-picker button.active{background:#642830;color:#fff}.pronunciation-feedback{margin-top:.8rem;padding:.8rem 1rem;border-radius:10px;background:#eee4d5;color:#642830}.pronunciation-feedback p{margin-top:.35rem}.practice audio{width:100%;margin-top:.8rem}