:root{--ink:#17212b;--muted:#64747b;--accent:#0d6977;--line:#dce4e8;--soft:#f1f6f5}*{box-sizing:border-box}body{margin:0;background:#f8faf9;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;line-height:1.7}a{color:var(--accent)}button,select{font:inherit}button{cursor:pointer;background:white;border:1px solid var(--line);border-radius:8px;padding:9px 14px;color:var(--accent)}button:hover{background:#eaf3f2}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #db9b37;outline-offset:4px}[hidden]{display:none!important}.wrap{width:min(1160px,calc(100% - 48px));margin:auto}header{background:#fff;border-bottom:1px solid var(--line)}.top{min-height:90px;display:flex;align-items:center;justify-content:space-between;gap:15px}.brand{text-decoration:none;color:var(--ink)}.brand b{font-size:24px;letter-spacing:.1em}.brand b span{font-size:15px;letter-spacing:.05em;margin-left:14px}.brand small{display:block;font-size:9px;letter-spacing:.15em;color:var(--muted)}.back{text-decoration:none;font-size:14px}.intro{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:center;padding:65px 0 55px}.eyebrow{font-size:12px;font-weight:750;color:var(--accent);letter-spacing:.12em}.intro h1{font-size:clamp(30px,4vw,49px);line-height:1.4;margin:18px 0;font-weight:750;letter-spacing:-.03em}.lead{color:var(--muted)}.intro-card{padding:26px 30px;background:var(--ink);border-radius:16px;color:#fff;box-shadow:0 16px 36px #17212b12}.intro-card>span{color:#9fced0;font-size:12px;letter-spacing:.12em}.intro-card strong{display:block;font-size:48px;line-height:1.5}.intro-card strong small{font-size:17px;font-weight:500}.intro-card p{font-size:13px;color:#c5d4d5;margin:6px 0}progress{width:100%;height:7px;accent-color:#72c2ca}.layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}.library{padding:23px 18px;border:1px solid var(--line);border-radius:14px;background:#fff}.library-title{display:flex;align-items:center;justify-content:space-between;gap:8px}.library-title h2{font-size:16px;margin:0}.library-title button{font-size:11px;padding:6px}.muted{color:var(--muted);font-size:13px}.small{font-size:12px;color:var(--muted)}.lesson-list{display:grid;gap:8px;margin:20px 0}.lesson{display:flex;align-items:center;gap:12px;text-align:left;padding:14px 10px;color:var(--ink);border-color:transparent;line-height:1.5}.lesson[aria-current="true"]{background:#eaf4f3;border-color:#b2d2d0}.lesson .num{color:var(--accent);font-size:13px;font-weight:700}.lesson .name{flex:1}.lesson small{display:block;color:var(--muted);font-size:10px}.lesson .check{color:var(--accent)}.reading{padding:36px 42px;background:#fff;border:1px solid var(--line);border-radius:16px;min-width:0;scroll-margin-top:20px}.lesson-heading h2{font-size:30px;margin:8px 0}.lesson-heading>p:last-child{color:var(--muted);margin-top:0;font-size:17px}.audio-box{background:var(--soft);border-radius:10px;padding:20px;margin:25px 0}.audio-box b{font-size:14px}.audio-box p{margin:5px 0}audio{width:100%;margin-top:14px}#audioTools{display:flex;gap:24px;align-items:center;font-size:13px;margin-top:10px}select{border:1px solid var(--line);border-radius:5px;background:white;color:var(--accent);padding:3px}.text-tools{display:flex;align-items:center;justify-content:space-between}.text-tools button{font-size:12px}h3{font-size:16px}.sentence{display:grid;grid-template-columns:27px 1fr;gap:14px;padding:21px 0;border-bottom:1px solid #edf0f0}.speaker{font-size:11px;border-radius:50%;background:#edf5f3;color:var(--accent);width:25px;height:25px;text-align:center;line-height:25px;margin-top:5px}.so{font-size:clamp(20px,2.4vw,25px);line-height:1.6;margin:0}.zh{font-size:14px;color:var(--muted);margin:7px 0 0}.sentence button{font-size:12px;margin-top:10px}.vocabulary{margin-top:28px}dl{display:grid;grid-template-columns:1fr 1fr;gap:12px}dl>div{padding:13px 16px;border:1px solid var(--line);border-radius:8px;min-width:0}dt{font-size:15px;color:var(--accent);font-weight:650}dd{font-size:13px;color:var(--muted);margin:4px 0 0}.practice{margin:25px 0;background:#faf5e9;border-left:3px solid #c5a363;padding:17px 20px}.practice p{margin:6px 0;font-size:14px}.primary{background:var(--accent);color:white;border-color:var(--accent);padding:12px 23px}.primary:hover{background:#08535f}.complete-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.pagination{border-top:1px solid var(--line);display:flex;justify-content:space-between;padding-top:22px;margin-top:25px}.notes{max-width:790px;margin:55px auto;color:var(--muted);font-size:13px}.notes h2{color:var(--ink);font-size:18px}summary{cursor:pointer;color:var(--accent)}footer{padding:25px 0;background:var(--ink);color:#c5d4d5;font-size:12px}footer .wrap{display:flex;justify-content:space-between;gap:18px}footer a{color:#a3d5d5}.skip{position:absolute;left:-9999px}.skip:focus{left:10px;top:10px;background:#fff;padding:10px;z-index:10}@media(max-width:900px){.intro{gap:25px}.layout{grid-template-columns:230px minmax(0,1fr);gap:16px}.reading{padding:28px}}@media(max-width:700px){.wrap{width:calc(100% - 28px)}.intro{grid-template-columns:1fr;padding:32px 0;gap:15px}.intro-card{padding:20px}.intro-card strong{font-size:32px}.layout{grid-template-columns:1fr}.lesson-list{display:flex;overflow-x:auto;margin:14px 0 0;padding-bottom:8px}.lesson{flex:0 0 170px}.library>.small{margin-bottom:0}.reading{padding:24px 19px}.lesson-heading h2{font-size:26px}.brand b{font-size:20px}.brand b span{font-size:13px}.brand small{font-size:7px}.back{font-size:12px}dl{grid-template-columns:1fr}.notes{margin:35px auto}footer .wrap{flex-direction:column;gap:7px}}
/* Allow the horizontal lesson strip to shrink inside a grid on narrow screens. */
.library,.intro>*,.layout>*{min-width:0}@media(max-width:700px){.layout{grid-template-columns:minmax(0,1fr)}}

.level-label{display:block;font-size:12px;color:var(--muted);margin:18px 0 6px}#levelSelect{width:100%;padding:10px;font-size:13px}.language-note,.comprehension{border-top:1px solid var(--line);margin-top:24px;padding-top:12px}.language-note p,.comprehension p{font-size:14px;color:var(--muted)}.comprehension details{padding:12px 16px;background:var(--soft);border-radius:8px}.comprehension summary{font-size:13px}.comprehension details p{color:var(--ink)}

.story-module{margin:0 0 40px}.story-module-heading{display:flex;justify-content:space-between;gap:24px;align-items:center}.story-module-heading h2{font-size:26px;margin:4px 0 20px}.story-module-heading>p{font-size:13px;color:var(--muted)}.story-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.story-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);border-top:3px solid #0d6977;border-radius:12px;padding:22px;color:var(--ink);transition:transform .15s}.story-card:hover{transform:translateY(-3px);border-color:var(--accent)}.story-card h3{font-size:20px;margin:10px 0 0}.story-card p{font-size:13px;color:var(--muted)}.story-card b{font-size:13px;color:var(--accent)}@media(max-width:700px){.story-module-heading{display:block}.story-cards{grid-template-columns:1fr}.story-module-heading h2{margin-bottom:8px}.story-card{padding:18px}}
/* Per-article notebook: beside the reading on wide screens, a drawer on small screens. */
.reading-notes{min-width:0;background:#fffdf6;border:1px solid #e3d9bc;border-radius:14px;padding:20px;position:sticky;top:20px;max-height:calc(100dvh - 40px);overflow:auto}
.note-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}.note-heading h2{font-size:18px;margin:0}.note-article{font-size:14px;color:var(--accent);margin:10px 0 18px}.reading-notes label{display:block;font-size:13px;margin-bottom:8px}.reading-notes textarea{display:block;width:100%;min-height:240px;max-height:55dvh;resize:vertical;border:1px solid #d8ceb1;border-radius:8px;padding:12px;background:#fffefb;color:var(--ink);font:inherit;font-size:16px;line-height:1.8;overflow-wrap:anywhere}.reading-notes textarea:focus-visible{outline:3px solid #db9b37;outline-offset:2px}.reading-notes .small{line-height:1.6}.reading-notes #noteStatus{min-height:2.6em}.notes-toggle{position:fixed;right:20px;bottom:24px;z-index:20;background:var(--accent);color:#fff;box-shadow:0 4px 20px #17212b30}.notes-toggle:hover{background:#08535f}
@media(min-width:1200px){.wrap{width:min(1480px,calc(100% - 48px))}.layout{grid-template-columns:220px minmax(0,1fr) 290px;gap:20px}.reading{padding:30px}.notes-toggle,#closeNotes{display:none}}
@media(max-width:1199px){.reading-notes{display:none;position:fixed;right:16px;bottom:84px;top:auto;width:min(380px,calc(100% - 32px));max-height:calc(100dvh - 112px);z-index:21;box-shadow:0 10px 40px #17212b30}.reading-notes.is-open{display:block}.reading-notes textarea{min-height:180px;max-height:38dvh}.notes-toggle{bottom:max(20px,env(safe-area-inset-bottom));right:16px}}

/* Translation controls wrap on narrow screens. */
.text-tools { flex-wrap: wrap; gap: 12px; }
.translation-label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.translation-label select { width: auto; max-width: 100%; padding: 7px 10px; }
.translation-disclosure { margin: 0 0 18px; }

.ui-language-control { display:flex; align-items:center; gap:8px; margin-left:auto; font-size:13px; }
.ui-language-control select { width:auto; padding:7px 10px; }
.top { flex-wrap:wrap; gap:14px; }
html[lang="en"] .intro h1 { font-size:clamp(32px,4vw,52px); }
html[lang="en"] .text-tools h3 { flex:1 1 150px; }
@media (max-width:600px) { .ui-language-control { margin-left:0; } .top .brand { flex-basis:100%; } }