:root{
  --bg:#f4f7fb; --ink:#1e2a3a; --muted:#5a6a7d; --card:#ffffff; --line:#e3e9f2;
  --brand:#2b6cb0; --brand-d:#1f5a97; --accent:#f6ad3c; --read:#2f9e6e; --dl:#2b6cb0;
  --d:#7c3aed; --st:#0d9488;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:system-ui,"Segoe UI",Roboto,Arial,sans-serif;background:var(--bg);color:var(--ink);line-height:1.5}
a{color:var(--brand)}
img{max-width:100%}

/* ---------- Landing ---------- */
.landing{max-width:920px;margin:0 auto;padding:24px 18px 40px}
.hero{text-align:center;padding:34px 16px 10px}
.hero .mascot{font-size:70px;line-height:1}
.hero h1{font-size:2.4rem;margin:.2em 0 .1em}
.hero .year{font-size:1.25rem;color:var(--muted);margin:.1em 0}
.hero .lead{font-size:1.1rem;color:var(--muted);margin:.6em auto 0;max-width:32em}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:26px}
@media(max-width:620px){.choices{grid-template-columns:1fr}}
.choice{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:var(--ink);
  background:var(--card);border:2px solid var(--line);border-radius:22px;padding:30px 18px;transition:.15s;min-height:190px;justify-content:center}
.choice:hover,.choice:focus-visible{transform:translateY(-3px);box-shadow:0 10px 26px rgba(30,42,58,.13);outline:none}
.choice .cemo{font-size:58px;line-height:1}
.choice .ctitle{font-size:1.35rem;font-weight:800}
.choice .cname{font-size:1.05rem;color:#fff;padding:2px 14px;border-radius:999px}
.choice .cnum{font-size:.95rem;color:var(--muted)}
.choice.d{border-color:#ddd0fb}.choice.d .cname{background:var(--d)}.choice.d:hover{border-color:var(--d)}
.choice.st{border-color:#c7ede8}.choice.st .cname{background:var(--st)}.choice.st:hover{border-color:var(--st)}

/* ---------- Class pages ---------- */
.topbar{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;padding:16px 18px 22px;text-align:center}
.topbar .back{display:inline-block;color:#fff;text-decoration:none;font-weight:700;opacity:.95;margin-bottom:6px}
.topbar .back:hover{text-decoration:underline}
.topbar h1{margin:.1em 0;font-size:1.9rem}
.topbar .sub{margin:.2em 0 0;opacity:.95}
.grid{max-width:1080px;margin:0 auto;padding:22px 16px 40px;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.card h2{display:flex;align-items:center;gap:10px;margin:.1em 0 .5em;font-size:1.2rem}
.card h2 .emo{font-size:1.5rem}
.books{list-style:none;margin:0;padding:0}
.books li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--line)}
.books li:first-child{border-top:none}
.bt{font-weight:600;color:var(--muted);font-size:.98rem}
.lk{display:flex;gap:8px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:.9rem;padding:8px 12px;border-radius:10px;white-space:nowrap}
.btn.read{background:#e6f5ee;color:var(--read)}
.btn.dl{background:#e7f0fa;color:var(--dl)}
.btn:hover,.btn:focus-visible{filter:brightness(.94);outline:2px solid currentColor;outline-offset:1px}

.foot{max-width:1080px;margin:0 auto;padding:18px;color:var(--muted);font-size:.9rem;text-align:center}
.foot a{color:var(--brand)}

@media(prefers-color-scheme:dark){
  :root{--bg:#0f1620;--ink:#e7edf5;--muted:#9fb0c3;--card:#18222f;--line:#26323f}
  .btn.read{background:#12332568}.btn.dl{background:#12294068}
}

/* ================= READER (class pages) ================= */
.reader-body{margin:0;height:100vh;overflow:hidden}
.reader{display:flex;height:100vh}
.sidebar{width:330px;flex:0 0 330px;background:var(--card);border-right:1px solid var(--line);display:flex;flex-direction:column;overflow:hidden}
.sbhead{background:linear-gradient(135deg,var(--brand),var(--brand-d));color:#fff;padding:14px 16px 16px}
.sbhead .home{color:#fff;text-decoration:none;font-weight:700;opacity:.95;font-size:.9rem}
.sbhead .home:hover{text-decoration:underline}
.sbhead h1{margin:.25em 0 .1em;font-size:1.3rem}
.sbhead .who{margin:0;opacity:.9;font-size:.9rem}
.sblist{overflow-y:auto;padding:8px 8px 24px;flex:1}
details.subj{border-bottom:1px solid var(--line)}
details.subj>summary{cursor:pointer;list-style:none;padding:11px 8px;font-weight:700;display:flex;align-items:center;gap:9px}
details.subj>summary::-webkit-details-marker{display:none}
details.subj>summary .e{font-size:1.2rem}
details.subj>summary .cnt{margin-left:auto;background:var(--line);color:var(--muted);border-radius:999px;font-size:.75rem;padding:1px 8px}
details.subj[open]>summary{color:var(--brand)}
.bk{display:block;width:100%;text-align:left;background:none;border:none;border-radius:8px;padding:8px 10px 8px 34px;cursor:pointer;color:var(--ink);font-size:.92rem}
.bk:hover{background:var(--bg)}
.bk.active{background:#e7f0fa;color:var(--dl);font-weight:700}
@media(prefers-color-scheme:dark){.bk.active{background:#12294080}}

.viewer{flex:1;display:flex;flex-direction:column;min-width:0;background:#525659}
.vbar{display:flex;align-items:center;gap:10px;background:var(--card);border-bottom:1px solid var(--line);padding:8px 12px}
.vbar .menu{display:none;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--ink)}
.vtitle{font-weight:700;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}
.vact{display:flex;gap:6px}
.vact a{text-decoration:none;font-size:1.2rem;padding:4px 10px;border-radius:8px;background:var(--bg);color:var(--brand)}
.vact a:hover{filter:brightness(.95)}
#pdf{flex:1;width:100%;border:0}

/* mobile: sidebar becomes a drawer */
@media(max-width:820px){
  .sidebar{position:fixed;z-index:30;top:0;left:0;height:100vh;transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 30px rgba(0,0,0,.3)}
  .sidebar.open{transform:translateX(0)}
  .vbar .menu{display:inline-block}
}