:root{--bg:#f5f4f0;--paper:#fff;--ink:#24332c;--muted:#66726b;--forest:#1b5e50;--green:#e7f3ec;--line:#dde3db;--gold:#ebbd67;--shadow:0 12px 36px rgba(20,57,43,.09);--radius:18px;color-scheme:light}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}body{margin:0;background:var(--bg);color:var(--ink)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.45}button:focus-visible,input:focus-visible{outline:3px solid #5cb9ac;outline-offset:2px}.app{max-width:1030px;margin:auto;min-height:100vh}.topbar{padding:20px 24px 13px;display:flex;justify-content:space-between;gap:12px;align-items:center}.brand{display:flex;align-items:center;gap:12px}.brandicon{background:var(--forest);color:#fff;border-radius:13px;width:44px;height:44px;display:grid;place-items:center;font-size:23px}.brand h1{margin:0;font-size:20px;letter-spacing:-.5px}.brand small{display:block;color:var(--muted);margin-top:1px}.streak{color:var(--forest);border-radius:18px;background:#e7f3ec;padding:8px 11px;font-weight:750;font-size:12px}.navigation{display:flex;gap:8px;padding:3px 24px 17px;overflow:auto}.nav{border:0;background:transparent;padding:9px 15px;color:var(--muted);border-radius:12px;font-weight:700;white-space:nowrap}.nav.active{background:var(--forest);color:white}main{padding:0 24px 90px}.pageheading{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,4vw,38px);font-weight:700;letter-spacing:-1px;margin:15px 0 5px}.sub{color:var(--muted);margin:0 0 18px;line-height:1.5}.eyebrow{font-size:11px;text-transform:uppercase;letter-spacing:1.8px;color:var(--forest);font-weight:800}.welcome{border-radius:23px;padding:28px;background:linear-gradient(126deg,#dcefe4,#f3e8d0);position:relative;overflow:hidden;display:flex;justify-content:space-between;gap:18px}.welcome h2{font-size:clamp(22px,4.5vw,33px);font-family:Georgia,serif;line-height:1.15;margin:8px 0;max-width:510px}.welcome p{max-width:490px;color:#425249;line-height:1.5}.action{border:0;border-radius:12px;background:var(--forest);color:#fff;padding:12px 18px;font-weight:800;display:inline-flex;align-items:center;gap:8px;justify-content:center}.action:hover{filter:brightness(1.08)}.action.secondary{background:#edf2eb;color:var(--forest)}.action.soft{background:#f8faf8;border:1px solid var(--line);color:var(--ink)}.action.small{padding:9px 12px;font-size:13px}.panel{background:white;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:17px 0 24px}.metric{padding:18px;background:#fff;border:1px solid var(--line);border-radius:16px}.metric span{display:block;color:var(--muted);font-size:12px}.metric strong{display:block;font-size:27px;margin:5px 0 1px;letter-spacing:-1px}.metric small{color:var(--muted)}.sectionrow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:20px 0 12px}.sectionrow h2{font-size:20px;margin:0}.sectionrow p{margin:5px 0;color:var(--muted)}.storygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.storycard{background:#fff;border:1px solid var(--line);border-radius:17px;overflow:hidden;transition:transform .15s,box-shadow .15s;text-align:left;padding:0;display:flex;flex-direction:column;color:inherit}.storycard:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.storythumb{width:100%;aspect-ratio:1.55;background:#e8ede5;overflow:hidden}.storythumb svg{width:100%;height:100%;display:block}.storyinfo{padding:13px 14px 16px}.storyinfo h3{font-size:15px;margin:5px 0;line-height:1.35}.storyinfo p{color:var(--muted);font-size:12px;margin:5px 0}.chip{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.3px;border-radius:14px;background:#eaf4ec;color:#32765b;padding:4px 8px}.chip.gold{background:#fff0ce;color:#8b6a26}.librarytools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:13px 0}.search{min-width:200px;flex:1;border-radius:12px;border:1px solid var(--line);background:white;padding:12px 13px;outline-offset:0}.select{border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px;max-width:100%}.back{padding:8px 0;margin:0 0 10px;background:none;border:0;color:var(--forest);font-weight:750}.readhead{display:flex;justify-content:space-between;align-items:start;gap:15px}.readhead h2{font:700 clamp(25px,4.5vw,37px) Georgia,serif;letter-spacing:-.7px;margin:8px 0 6px}.readhead small{color:var(--muted)}.progressbar{margin:13px 0;height:7px;background:#e2e9e2;border-radius:8px;overflow:hidden}.progressbar>div{height:100%;background:#3c9474;border-radius:8px;transition:width .2s}.reading{max-width:720px;margin:0 auto}.artframe{overflow:hidden;border-radius:18px;border:1px solid var(--line);background:#e5ebdc}.artframe svg{display:block;width:100%;height:auto;aspect-ratio:2.0;object-fit:cover}.passage{margin:15px 0 9px;padding:20px 21px;background:white;border:1px solid var(--line);border-radius:18px;min-height:95px;line-height:2.05;font-family:Georgia,serif;font-size:var(--reading-size,25px)}.word{font:inherit;line-height:inherit;padding:2px 1px;margin:0;border:0;background:transparent;border-radius:5px;color:inherit}.word:hover,.word:focus-visible{background:#e7f3ec}.word.chosen{background:#caecdd;box-shadow:0 2px 0 #71b594}.word.unknown{box-shadow:inset 0 -2px #e9b471}.word.known{box-shadow:inset 0 -1px #b3d9c3}.sentence-voice{font-family:inherit;font-size:inherit}.wordpanel{background:#fff;border:2px solid #d5e7da;border-radius:16px;padding:16px;margin:10px 0;box-shadow:0 10px 22px #1e524713}.wordpanel .chosenhead{display:flex;justify-content:space-between;gap:10px;align-items:center}.wordpanel h3{margin:0;font-size:23px}.wordpanel .meaning{font-size:16px;color:var(--muted);margin:6px 0 12px}.statusrow{display:flex;flex-wrap:wrap;gap:7px}.statusbtn{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 12px;font-weight:750;font-size:12px}.statusbtn.selected-known{background:#e4f4e8;border-color:#479466;color:#286544}.statusbtn.selected-learning{background:#fdf1d9;border-color:#d9a956;color:#775313}.statusbtn.selected-unknown{background:#fce8e1;border-color:#d57c61;color:#873d29}.translation{font-size:15px;padding:12px 14px;border-radius:12px;background:#f1f6f0;color:#50615a;line-height:1.5}.readerbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin:13px 0}.controls{display:flex;align-items:center;justify-content:space-between;gap:9px;margin:18px 0}.controls .action{min-width:108px}.pagecount{font-size:12px;color:var(--muted);text-align:center}.listenstatus{font-size:12px;color:#855b27;background:#fff4da;border-radius:10px;padding:10px 12px;margin:9px 0}.hint{font-size:12px;color:var(--muted);line-height:1.5}.linkbtn{border:0;background:none;color:var(--forest);font-weight:800}.phrasebox{display:flex;flex-wrap:wrap;gap:8px}.phrase{display:inline-flex;gap:6px;align-items:center;border-radius:22px;border:1px solid #d8e4d6;background:#f3f7f1;padding:7px 11px;font-size:13px;color:#345545}.phrase:hover{background:#e5f4e8}.empty{border:1px dashed #b8c8b9;border-radius:16px;padding:30px;text-align:center;color:var(--muted)}.vocrow{display:flex;justify-content:space-between;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:12px 0}.vocrow:last-child{border:0}.vocrow strong{display:block;font-size:16px}.vocrow small{color:var(--muted)}.vocrow .statusbtn{padding:7px 10px}.columns{display:grid;grid-template-columns:1fr 1fr;gap:14px}.barrow{display:flex;gap:8px;align-items:center;margin:10px 0;font-size:13px}.barrow>span{min-width:112px}.barrow>.rail{flex:1;border-radius:10px;background:#e9eee8;height:11px;overflow:hidden}.fill{height:100%;background:#429a72;border-radius:10px}.barrow b{width:42px;text-align:right}.settingsrow{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:14px 0;border-bottom:1px solid var(--line)}.settingsrow:last-child{border-bottom:0}.settingsrow small{color:var(--muted);display:block;line-height:1.5;margin-top:4px}.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#224f40;color:#fff;padding:13px 16px;border-radius:12px;box-shadow:var(--shadow);font-size:13px;max-width:90%;z-index:100}.foot{color:#7a867d;font-size:12px;text-align:center;padding:4px 20px 25px}.spacer{flex:1}.hidden{display:none!important}@media (max-width:740px){.topbar{padding:13px 14px 8px}.brand h1{font-size:18px}.navigation{padding:2px 12px 12px;gap:4px}.nav{padding:8px 11px;font-size:13px}main{padding:0 12px 85px}.welcome{padding:18px}.metrics{grid-template-columns:repeat(2,1fr);gap:9px;margin:12px 0 19px}.metric{padding:13px}.metric strong{font-size:25px}.storygrid{grid-template-columns:repeat(2,1fr);gap:9px}.storyinfo{padding:10px}.storyinfo h3{font-size:14px}.columns{grid-template-columns:1fr}.passage{font-size:var(--reading-size,24px);padding:15px;min-height:90px}.reading{max-width:100%}.artframe svg{aspect-ratio:1.58}.readhead h2{font-size:27px}.readerbar .action{padding:10px}.controls .action{min-width:90px;padding:11px}.streak{display:none}}@media(max-width:365px){.storygrid{grid-template-columns:1fr}.brand h1{font-size:17px}.readerbar{gap:5px}.readerbar .action{font-size:12px;padding:9px}}

/* v1.2 — vocabulary notebook */
.vocab-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:18px 0 12px}
.vocab-tab{border:1px solid var(--line);border-radius:13px;padding:11px 17px;background:#fff;color:var(--forest);font-weight:750}
.vocab-tab-active{background:var(--forest);color:#fff;border-color:var(--forest)}
.vocab-tools{margin-bottom:17px}
.vocab-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.vocab-card{border:1px solid var(--line);border-radius:17px;padding:15px;background:#fff;min-width:0}
.vocab-card-head{display:flex;gap:8px;justify-content:space-between;align-items:flex-start}
.vocab-card-head strong{font-size:21px;display:block;line-height:1.3}
.vocab-card-head small{font-size:11px;color:var(--muted)}
.vocab-card-actions{display:flex;align-items:center;gap:5px;flex-wrap:wrap;justify-content:flex-end}
.vocab-status-label{text-transform:capitalize;white-space:nowrap;padding:5px 8px;font-weight:700;border-radius:12px;font-size:11px;background:#f3f5f1;color:#53665b}
.vocab-status-label.known{background:#e4f4e8;color:#286544}
.vocab-status-label.learning{background:#fdf1d9;color:#775313}
.vocab-status-label.unknown{background:#fce8e1;color:#873d29}
.vocab-answer{margin-top:15px}
.vocab-label{font-weight:700;color:var(--muted);font-size:12px;display:block;margin-bottom:5px}
.vocab-answer-row{display:flex;gap:7px;align-items:stretch;flex-wrap:wrap}
.vocab-answer-row input{background:#fcfdfa;border:1px solid var(--line);border-radius:11px;padding:10px 11px;min-width:0;flex:1;max-width:100%;width:155px}
.vocab-answer-row .action{flex-shrink:0}
.vocab-definition{padding:11px 12px;border-radius:11px;background:#e9f5ec;margin:11px 0 0;line-height:1.4}
.vocab-definition small{display:block;color:var(--muted);font-size:11px;margin-top:4px}
.vocab-status-controls{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.vocab-status-controls .statusbtn{padding:7px 9px}
.vocab-pagination{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:18px 0 24px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.vocab-pagination>div{display:flex;gap:9px;align-items:center;flex-wrap:wrap}
@media(max-width:740px){.vocab-list{grid-template-columns:1fr}.vocab-card{padding:13px}.vocab-card-head strong{font-size:19px}.vocab-answer-row input{width:140px}}

/* v1.4 — optional focused recall practice */
.practice-launch{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:5px 0 18px}.practice-launch span{font-size:12px;color:var(--muted);max-width:580px;line-height:1.5}.practice-card{max-width:680px;margin:0 auto 24px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;box-shadow:var(--shadow)}.practice-top{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}.practice-card h3{font:700 clamp(32px,6vw,50px) Georgia,serif;margin:24px 0 15px;overflow-wrap:anywhere}.practice-card .vocab-label{margin:24px 0 8px}.practice-card input{display:block;width:100%;border:1px solid var(--line);border-radius:12px;padding:14px;font-size:18px;margin-bottom:14px}.practice-card .vocab-definition{margin:14px 0}.practice-foot{display:flex;justify-content:space-between;gap:10px;margin-top:26px}.practice-card .vocab-status-controls{margin-top:18px}@media(max-width:740px){.practice-card{padding:17px}.practice-foot .action{padding:10px 12px}}

/* v1.5 — real story examples for notebook and recall practice */
.vocab-context{border-left:3px solid #78aa8f;background:#f6f9f4;border-radius:0 12px 12px 0;padding:10px 12px;margin:13px 0 4px}
.vocab-context>small{color:var(--forest);font-weight:800;font-size:11px}
.vocab-context p{font:16px/1.55 Georgia,serif;margin:7px 0;overflow-wrap:anywhere}
.vocab-context .vocab-context-en{font-size:13px;line-height:1.45;font-family:inherit;color:var(--muted);margin:6px 0 10px}
.vocab-context-actions{display:flex;gap:7px;flex-wrap:wrap}
.vocab-context-actions .statusbtn{font-size:12px;padding:7px 9px;background:white}

/* v1.10 — optional pre-reading glossary. Hidden by default to keep reading uncluttered. */
.story-preview{margin:14px 0 18px;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden}
.story-preview-toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;border:0;background:#f0f7f1;color:var(--forest);font-weight:800;text-align:left;padding:13px 16px}
.story-preview-toggle:hover{background:#e5f1e8}
.story-preview-body{padding:15px 16px 18px}
.story-preview-body>.hint{margin:0 0 12px}
.story-preview-known{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);margin-bottom:14px;cursor:pointer}
.story-preview-known input{accent-color:var(--forest);width:17px;height:17px}
.story-preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:12px}
.story-preview-word{border:1px solid var(--line);border-radius:12px;padding:12px;min-width:0}
.story-preview-wordhead{display:flex;justify-content:space-between;gap:8px;align-items:center;flex-wrap:wrap}
.story-preview-wordhead strong{font-size:19px;overflow-wrap:anywhere}
.story-preview-actions,.story-preview-marks{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px}
.story-preview-actions .statusbtn,.story-preview-marks .statusbtn{padding:7px 9px;font-size:12px}
.story-preview-meaning{background:#e9f5ec;border-radius:8px;margin-top:9px;padding:8px 10px;line-height:1.45;font-size:14px}
@media(max-width:740px){.story-preview-grid{grid-template-columns:1fr}.story-preview-body{padding:12px}.story-preview-word{padding:10px}}

/* v1.12 — listen-and-repeat practice for multi-sentence pages. */
.sentence-practice{margin:12px 0 4px;padding:13px 15px;border:1px solid #d8e6db;border-radius:14px;background:#f6faf6}
.sentence-practice-heading{display:flex;align-items:baseline;justify-content:space-between;gap:9px;flex-wrap:wrap}
.sentence-practice-heading strong{color:var(--forest);font-size:14px}
.sentence-practice-heading small{color:var(--muted);font-size:12px}
.sentence-practice-buttons{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sentence-practice-buttons .action{min-height:39px}
@media(max-width:480px){.sentence-practice{padding:12px}.sentence-practice-buttons .action{flex:1;min-width:110px}}

/* v1.14 — sentence-level comprehension: individual meaning reveal without spoilers. */
.sentence-practice-list{display:grid;gap:10px;margin-top:13px}
.sentence-practice-item{background:#fff;border:1px solid #dce7dc;border-radius:12px;padding:12px 14px}
.sentence-practice-text{display:flex;align-items:baseline;gap:10px;font:17px/1.55 Georgia,serif;margin:0 0 10px;color:var(--ink);overflow-wrap:anywhere}
.sentence-number{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;background:#e8f3e9;border-radius:50%;width:23px;height:23px;font:700 12px system-ui,sans-serif;color:var(--forest)}
.sentence-practice-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.sentence-practice-actions .statusbtn{padding:9px 12px}
.sentence-meaning:not([hidden]){display:block;background:#eef6ee;color:#345b49;border-radius:9px;padding:10px 12px;margin:11px 0 0;font-size:14px;line-height:1.5}
@media(max-width:480px){.sentence-practice-item{padding:11px}.sentence-practice-text{font-size:16px}.sentence-practice-actions .action,.sentence-practice-actions .statusbtn{flex:1;min-width:120px}}


/* v1.15 — optional post-story active recall, integrated with My Words. */
.story-recall{margin:18px 0;border:1px solid #d7e4d9;border-radius:16px;background:#fff;overflow:hidden}
.story-recall-toggle{width:100%;display:flex;justify-content:space-between;gap:10px;text-align:left;padding:15px 17px;border:0;background:#edf5ed;color:var(--forest);font-weight:800}
.story-recall-toggle:hover{background:#e3f0e5}
.story-recall-body{padding:15px 18px 18px}
.story-recall-body>.hint{margin:0 0 12px}
.story-recall-card{max-width:540px;margin:0 auto;padding:15px;border:1px solid var(--line);border-radius:13px;background:#fbfdfb}
.story-recall-head,.story-recall-nav{display:flex;justify-content:space-between;align-items:center;gap:10px}
.story-recall-card h3{font:700 32px/1.3 Georgia,serif;margin:13px 0;overflow-wrap:anywhere}
.story-recall-actions{margin-bottom:15px}
.story-recall-answer{display:block;width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;margin:7px 0 12px;font-size:16px}
.story-recall-meaning{background:#e8f5e9;padding:12px;border-radius:10px;margin:11px 0;line-height:1.5}
.story-recall-marks{display:flex;flex-wrap:wrap;gap:7px;margin:15px 0}
.story-recall-nav{margin-top:18px}
.story-recall-done{text-align:center;padding:24px 10px}
.story-recall-done strong{font-size:19px;color:var(--forest)}
.story-recall-done p{color:var(--muted)}
@media(max-width:480px){.story-recall-body{padding:12px}.story-recall-card{padding:12px}.story-recall-card h3{font-size:28px}}

/* v1.16 — personalised story-context rereading, entirely optional. */
.story-focus{margin:16px 0 22px;border:1px solid #d7e4d9;border-radius:16px;background:#fff;overflow:hidden}
.story-focus-toggle{width:100%;display:flex;justify-content:space-between;gap:10px;text-align:left;padding:15px 17px;border:0;background:#edf5ed;color:var(--forest);font-weight:800}
.story-focus-toggle:hover{background:#e3f0e5}
.story-focus-body{padding:15px 18px 18px}
.story-focus-body>.hint{margin:0 0 14px}
.story-focus-card{background:#fbfdfb;border:1px solid var(--line);border-radius:13px;padding:15px;margin:11px 0}
.story-focus-top{display:flex;justify-content:space-between;gap:9px;flex-wrap:wrap;font-size:12px;font-weight:800;color:var(--forest)}
.story-focus-top small{font-size:12px;color:var(--muted)}
.story-focus-text{font:19px/1.6 Georgia,serif;margin:11px 0 14px;overflow-wrap:anywhere}
.focus-word{border-radius:4px;padding:0 2px;background:#ffe5bd;color:#543c24}
.focus-word.learning{background:#fff0c8}
.story-focus-actions{display:flex;gap:8px;flex-wrap:wrap}
.story-focus-english{margin:12px 0 0;padding:11px 13px;border-radius:9px;background:#e9f5ec;color:#345b49;line-height:1.5}
@media(max-width:480px){.story-focus-body{padding:12px}.story-focus-card{padding:12px}.story-focus-text{font-size:18px}.story-focus-actions .statusbtn{flex:1;min-width:110px}}

/* v2 platform foundation */
.save-status{font-size:12px;color:#4c675a;padding:7px 0}

/* v2.3 — reviewed progress import: decisions before writing to storage. */
.backup-review{margin-top:14px;border:2px solid #bbd9c7;background:#f9fcf8}
.backup-review[hidden]{display:none}
.backup-review h3{margin:2px 0 9px;color:var(--forest)}
.backup-compare{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin:14px 0}
.backup-compare span{background:white;border:1px solid var(--line);border-radius:11px;padding:11px;min-width:0;display:flex;flex-direction:column;gap:4px}
.backup-compare b{font-size:23px;color:var(--forest)}
.backup-compare small{font-size:11px;color:var(--muted)}
.backup-conflict-list{display:grid;gap:8px;max-height:360px;overflow:auto;margin:16px 0}
.backup-conflict{display:grid;grid-template-columns:minmax(90px,1fr) minmax(130px,2fr) minmax(165px,1fr);align-items:center;gap:8px;border:1px solid var(--line);border-radius:10px;background:white;padding:9px}
.backup-conflict small{color:var(--muted);overflow-wrap:anywhere}
.backup-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:620px){.backup-conflict{grid-template-columns:1fr}.backup-compare{gap:5px}.backup-compare span{padding:7px}.backup-compare b{font-size:19px}}

.save-status{display:inline-block;padding:5px 8px;border-radius:7px;font-size:12px;color:#1b5e50;background:#e6f4ec;margin-left:6px;align-self:center;}
.save-status.save-error{background:#ffebdc;color:#8f2d14;font-weight:700;}

/* Family accounts retain the reader's existing green, spacious interface. */
.family-field{display:flex;flex-direction:column;gap:8px;margin:18px 0;max-width:600px}
.family-field input,.family-field select{width:100%;box-sizing:border-box}
.family-actions{display:flex;gap:12px;flex-wrap:wrap;margin:20px 0}
.family-members{list-style:none;padding:0;max-width:600px}
.family-members li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid #deded5}
.family-carry{display:flex;align-items:center;gap:10px;margin:20px 0}
#familyMessage{color:#a33227;min-height:1.5em}
#familyConflictSection{margin:20px 0}