:root{--paper:#f5f3ed;--surface:#fff;--ink:#20231f;--muted:#72776f;--line:#d9ddd4;--green:#176b50;--green-soft:#e1eee7;--shadow:0 18px 55px rgba(32,35,31,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI","PingFang SC",sans-serif;letter-spacing:0;transition:background .25s,color .25s}button,select{font:inherit}button{cursor:pointer}.app-shell{max-width:1440px;margin:auto;padding:0 42px 56px}.topbar{height:78px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:22px}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:800;font-size:20px;margin-right:auto}.brand-mark{display:grid;place-items:center;background:var(--green);color:#fff;width:34px;height:34px;border-radius:5px;font-family:Georgia,serif}.header-note{color:var(--muted);font-size:13px}.icon-button{border:1px solid var(--line);background:transparent;width:38px;height:38px;border-radius:50%;color:var(--ink)}.mobile-article-picker{display:none}
.hero{min-height:275px;display:flex;align-items:center;justify-content:space-between;padding:42px 7%;border-bottom:1px solid var(--line)}.eyebrow{font-size:11px;font-weight:800;letter-spacing:2px;color:var(--green);margin:0 0 10px}.hero h1{font-family:Georgia,"Songti SC",serif;font-size:clamp(34px,4.2vw,62px);line-height:1.08;margin:0;font-weight:500}.hero h1 em{color:var(--green);font-style:italic}.hero-copy{max-width:570px;color:var(--muted);line-height:1.8;margin:18px 0 0}.article-count{width:128px;height:128px;border:1px solid var(--line);display:flex;flex-direction:column;align-items:center;justify-content:center}.article-count strong{font-family:Georgia,serif;font-size:44px;color:var(--green);font-weight:500}.article-count span{font-size:12px;color:var(--muted)}
.workspace{display:grid;grid-template-columns:340px minmax(0,1fr);background:var(--surface);box-shadow:var(--shadow);margin-top:34px;border:1px solid var(--line);align-items:start}.lesson-panel{border-right:1px solid var(--line);padding:26px 0;position:sticky;top:0;max-height:100vh;overflow:auto}.section-heading{padding:0 22px 18px;display:flex;align-items:end;justify-content:space-between;gap:12px}.section-heading h2{font-family:Georgia,"Songti SC",serif;margin:0;font-size:24px;font-weight:600}.section-heading select,.article-toolbar select{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--muted);font-size:12px;padding:6px}.lesson-card{width:100%;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;padding:18px 22px;display:grid;grid-template-columns:36px 1fr auto;gap:12px;align-items:center;color:var(--ink)}.lesson-card:last-child{border-bottom:1px solid var(--line)}.lesson-card:hover,.lesson-card.active{background:var(--green-soft)}.lesson-card.active{box-shadow:inset 3px 0 var(--green)}.lesson-number{font-family:Georgia,serif;color:var(--muted);font-size:18px}.lesson-card strong{display:block;font-size:14px;margin-bottom:6px}.lesson-card small{color:var(--muted);font-size:11px}.level-pill{font-size:10px;border:1px solid var(--line);padding:4px 6px;border-radius:3px}
.article-panel{padding:50px clamp(32px,7vw,105px) 60px;min-width:0}.article-meta{display:flex;gap:20px;color:var(--green);font-size:11px;font-weight:700;letter-spacing:1px}.article-panel>h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(36px,4vw,54px);line-height:1.1;margin:14px 0 8px;font-weight:500}.topic{color:var(--muted);font-size:13px;margin:0}.article-toolbar{display:flex;align-items:center;gap:24px;margin:30px 0;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted);font-size:12px}.primary{border:0;background:var(--green);color:#fff;padding:10px 15px;border-radius:4px;min-width:116px}.reading-progress{margin-left:auto}.article-intro{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.7;color:var(--green);font-style:italic;padding:0 0 24px;border-bottom:1px solid var(--line)}.article-body{max-width:760px;margin:30px auto 0}.article-body p{font-family:Georgia,"Times New Roman",serif;font-size:19px;line-height:1.9;margin:0 0 24px;color:var(--ink)}.sentence{display:inline;margin:0;padding:2px 1px;border:0;border-radius:3px;background:transparent;color:inherit;font:inherit;line-height:inherit;text-align:left;cursor:pointer;transition:background .15s,color .15s}.sentence:hover,.sentence:focus-visible{background:var(--green-soft);outline:none}.sentence.speaking{background:var(--green-soft);color:var(--green);box-shadow:0 0 0 2px var(--green-soft)}.article-footer{display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);margin-top:36px;padding-top:18px;color:var(--muted);font-size:12px}.text-button{border:0;background:none;color:var(--green);padding:8px}
body.dark{--paper:#181b19;--surface:#212522;--ink:#f0efe9;--muted:#a4aaa2;--line:#3c433e;--green:#6fc09d;--green-soft:#293d34;--shadow:none}
@media(max-width:850px){.app-shell{padding:0 16px 32px}.hero{padding:30px 4%;min-height:230px}.article-count{display:none}.workspace{grid-template-columns:1fr}.lesson-panel{position:static;max-height:none;border-right:0;border-bottom:1px solid var(--line);padding-bottom:0;overflow:visible}.lesson-list{display:flex;overflow-x:auto}.lesson-card{min-width:250px;border-right:1px solid var(--line);border-bottom:0!important}.article-panel{padding:36px 28px 46px}.article-body p{font-size:18px}}
@media(max-width:640px){html,body{width:100%;max-width:100%;overflow-x:hidden}body{padding-bottom:env(safe-area-inset-bottom)}.app-shell,.workspace,.lesson-panel,.article-panel{width:100%;min-width:0;max-width:100%}.app-shell{padding:0;background:var(--surface);overflow:hidden}.topbar{position:sticky;top:0;z-index:10;width:100%;height:58px;padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));background:var(--surface)}.brand{font-size:18px}.brand-mark{width:30px;height:30px}.header-note{display:none}.icon-button{width:34px;height:34px;flex:0 0 34px}.hero{width:100%;min-height:0;padding:28px 20px 24px;background:var(--paper)}.hero h1{font-size:31px;line-height:1.14;overflow-wrap:anywhere}.hero-copy{font-size:14px;line-height:1.65;margin-top:14px}.workspace{margin:0;border:0;box-shadow:none;background:var(--surface);overflow:hidden}.lesson-panel{padding:18px 0;background:var(--paper);border-bottom:0}.section-heading{padding:0 20px 12px;align-items:center}.section-heading h2{font-size:20px}.section-heading .eyebrow{display:none}.section-heading select{font-size:13px;padding:7px 0;max-width:120px}.lesson-list{display:none}.mobile-article-picker{display:block;padding:0 20px}.mobile-article-picker label{display:block;margin-bottom:7px;color:var(--muted);font-size:12px}.mobile-article-picker select{display:block;width:100%;max-width:100%;height:46px;padding:0 38px 0 13px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--ink);font-size:16px}.article-panel{padding:28px 20px calc(34px + env(safe-area-inset-bottom));border-top:1px solid var(--line);overflow:hidden}.article-meta{gap:12px;font-size:10px;flex-wrap:wrap}.article-panel>h2{max-width:100%;font-size:32px;margin-top:12px;overflow-wrap:anywhere}.topic{font-size:12px}.article-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto;width:100%;gap:12px;margin:22px 0;padding:12px 0}.primary{min-width:0;width:100%;min-height:42px}.article-toolbar label{display:flex;align-items:center;gap:6px;white-space:nowrap}.article-toolbar select{max-width:82px}.reading-progress{grid-column:1/-1;margin:0;padding-top:8px;border-top:1px dashed var(--line)}.article-intro{max-width:100%;font-size:17px;line-height:1.6;padding-bottom:20px;overflow-wrap:anywhere}.article-body{width:100%;max-width:100%;margin-top:24px}.article-body p{width:100%;max-width:100%;font-size:18px;line-height:1.78;margin-bottom:22px;overflow-wrap:anywhere}.sentence{max-width:100%;padding:3px 1px;white-space:normal;overflow-wrap:anywhere;word-break:normal}.article-footer{margin-top:28px;padding-top:14px}.article-footer .text-button{font-size:12px}.toast{bottom:calc(18px + env(safe-area-inset-bottom));max-width:calc(100% - 32px);text-align:center}}