:root{
  --navy:#082546;--green:#2a5836;--gold:#c08b1f;--cream:#f8f3e7;--ink:#1b2a38;
  --card:#fffdf8;--line:#d9c79e;--muted:#6b6b64;--ok:#2f7b49;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--cream);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}
button{font:inherit}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;padding:10px 12px;background:linear-gradient(135deg,#071f3b,#0b3158);color:white;box-shadow:0 3px 14px #0003}
.brand{display:flex;flex-direction:column;min-width:0;flex:1}.brand strong{font-family:Georgia,serif;font-size:17px}.brand span{font-size:12px;opacity:.8}
.iconBtn,.installBtn{border:0;border-radius:12px;background:#ffffff18;color:white;padding:10px 12px}
.installBtn{background:var(--gold);color:#10253c;font-weight:800}
.view{padding:14px;max-width:1180px;margin:auto}.hidden{display:none!important}
.hero{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:white;box-shadow:0 8px 30px #2a24161a}.heroImg,.routeImg{display:block;width:100%;height:auto}
.homeActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.primary,.secondary,.completeBtn,.bottomNav button{border:0;border-radius:14px;padding:13px 14px;font-weight:800}
.primary{background:var(--navy);color:white}.secondary{background:var(--green);color:white}
.progressCard{padding:15px;border-radius:16px;background:linear-gradient(135deg,#fff,#f3ead6);border:1px solid var(--line);margin-bottom:14px}
.progressTrack{height:10px;background:#e2d8c2;border-radius:99px;overflow:hidden;margin-top:8px}.progressFill{height:100%;background:linear-gradient(90deg,var(--green),var(--gold))}
.lessonGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.lessonCard{position:relative;text-align:left;border:1px solid var(--line);background:var(--card);border-radius:16px;padding:14px;min-height:120px;box-shadow:0 6px 18px #0000000e}
.lessonCard.done{border-color:#7aa987;background:#f2f8f3}.lessonNum{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--green);color:white;font-weight:900}.lessonCard h3{font-family:Georgia,serif;margin:9px 0 0;font-size:17px}.doneMark{position:absolute;right:10px;top:10px;color:var(--ok);font-weight:900}
.lessonHeader{display:flex;gap:12px;justify-content:space-between;align-items:flex-start;margin:4px 0 12px}.lessonHeader h1{font-family:Georgia,serif;margin:6px 0;font-size:24px}.lessonBadge{display:inline-block;background:var(--green);color:white;border-radius:999px;padding:5px 10px;font-weight:800;font-size:13px}.completeBtn{background:#eee2c6;color:#573e0f}.completeBtn.done{background:var(--green);color:white}
.viewer{display:grid;grid-template-columns:44px minmax(0,1fr) 44px;align-items:center;gap:8px}
.navSide{height:74px;border:0;border-radius:16px;background:var(--navy);color:white;font-size:34px}
.imageFrame{position:relative;background:#111;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px #0003}.imageFrame img{display:block;width:100%;height:auto}.counter{position:absolute;right:9px;bottom:9px;background:#071f3bd9;color:white;border:1px solid #ffffff44;border-radius:999px;padding:5px 9px;font-size:12px}
.bottomNav{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;margin-top:12px}.bottomNav button{background:white;border:1px solid var(--line);color:var(--navy)}.bottomNav button:last-child{background:var(--navy);color:white}
.simpleHead{display:flex;align-items:center;gap:12px}.simpleHead h1{font-family:Georgia,serif}.backHome{border:0;background:var(--navy);color:white;border-radius:12px;padding:10px}
.routeImg{border-radius:18px;border:1px solid var(--line)}
.drawer{position:fixed;z-index:50;inset:0 auto 0 0;width:min(88vw,360px);background:#fdf8ed;transform:translateX(-105%);transition:.2s;box-shadow:8px 0 30px #0004;overflow:auto}.drawer.open{transform:none}.drawerHead{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:14px;background:var(--navy);color:white}.drawerLesson{display:block;width:100%;border:0;border-bottom:1px solid #e5dcc8;background:transparent;text-align:left;padding:13px}.drawerLesson.done{background:#edf5ee}.scrim{position:fixed;z-index:40;inset:0;background:#0008}
dialog{border:0;padding:0;background:#0a0a0a;width:100vw;height:100vh;max-width:none;max-height:none}dialog::backdrop{background:#000}.zoomWrap{width:100%;height:100%;overflow:auto;display:grid;place-items:start center;padding:54px 10px 20px}.zoomWrap img{width:max(100%,1400px);height:auto}.closeZoom{position:fixed;right:14px;top:14px;z-index:2;border:0;background:#fff;color:#111;width:38px;height:38px;border-radius:50%;font-size:24px}
@media(min-width:760px){.lessonGrid{grid-template-columns:repeat(3,1fr)}.view{padding:22px}.lessonHeader h1{font-size:30px}}
@media(max-width:520px){.homeActions{grid-template-columns:1fr}.lessonGrid{grid-template-columns:1fr}.viewer{grid-template-columns:34px minmax(0,1fr) 34px;gap:4px}.navSide{height:62px;font-size:28px}.bottomNav{grid-template-columns:1fr 1fr}.bottomNav #zoomBtn{grid-column:1/-1;grid-row:2}.lessonHeader{flex-direction:column}.completeBtn{width:100%}}
.readingCard{margin:0 0 16px;padding:17px;border-radius:18px;background:linear-gradient(135deg,#fffdf8,#f4ead5);border:1px solid var(--line);box-shadow:0 7px 22px #00000012}
.readingHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;border-bottom:1px solid #dfd1b2;padding-bottom:10px;margin-bottom:10px}
.readingHead h2{font-family:Georgia,serif;color:var(--navy);margin:4px 0 0;font-size:21px}.readingLabel{font-size:11px;font-weight:900;letter-spacing:.08em;color:var(--green)}
.readingToggle{border:1px solid var(--line);background:white;color:var(--navy);padding:8px 10px;border-radius:10px;font-weight:700}
.readingText{font-family:Georgia,serif;font-size:16px;line-height:1.65;color:#29343b}.readingText p{margin:0 0 11px}.readingText p:last-child{margin-bottom:0}
.viewerTitle{display:flex;justify-content:space-between;align-items:center;margin:5px 2px 9px;font-size:12px;color:var(--green);font-weight:900;letter-spacing:.04em}.viewerTitle strong{color:var(--navy);letter-spacing:0}
@media(max-width:520px){.readingText{font-size:15.5px;line-height:1.58}.readingHead{align-items:center}.readingToggle{font-size:12px}}