/* quiz.megalecture.com: the indexable subject pages (9 Oct 2026). Same tokens as the quiz app. */
:root { --bg:#F6FAFB; --surface:#fff; --ink:#0E1B2A; --ink-2:#43556A; --ink-3:#566779; --line:#DAE4EA; --cyan-ink:#08759A; --tint:#E6F7FC; --yellow:#FFC93C; --good:#14774A; --good-bg:#E3F4EC; --font:"Montserrat","Segoe UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; }
a { color:var(--cyan-ink); }
.wrap { max-width:780px; margin:0 auto; padding-inline:18px; }
.top { background:var(--surface); border-bottom:1px solid var(--line); border-top:4px solid #3AD5F8; }
.top__in { display:flex; align-items:center; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-block:10px; }
.top__logo img { display:block; height:auto; }
.top__nav { display:flex; gap:6px 18px; flex-wrap:wrap; font-size:14px; font-weight:600; }
.top__nav a { color:var(--ink); text-decoration:none; padding:6px 0; } .top__nav a:hover { text-decoration:underline; }
.crumb { font-size:13.5px; color:var(--ink-3); padding-block:18px 0; } .crumb a { color:var(--ink-3); } .crumb b { color:var(--ink); font-weight:600; }
main section { margin-block:34px; }
.hero { margin-block:14px 30px; }
h1 { font-size:clamp(27px, 6vw, 38px); line-height:1.18; margin:0 0 14px; letter-spacing:-.01em; text-wrap:balance; }
h2 { font-size:22px; line-height:1.3; margin:0 0 10px; text-wrap:balance; } h2 a { color:inherit; }
p { margin:0 0 12px; max-width:68ch; }
.lead { font-size:17px; color:var(--ink-2); }
.facts { font-size:15px; color:var(--ink-2); } .facts b { color:var(--ink); font-size:17px; } .facts i { font-style:normal; color:var(--line); margin-inline:4px; }
.cta { display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; margin-top:18px; }
.btn { display:inline-block; background:var(--yellow); color:#0E1B2A; font-weight:700; text-decoration:none; padding:14px 26px; border-radius:99px; font-size:16px; }
.btn:hover { filter:brightness(.96); } .btn:focus-visible, a:focus-visible { outline:3px solid var(--cyan-ink); outline-offset:2px; }
.link { font-weight:600; }
.chap { margin:14px 0 0; padding:0; list-style:none; counter-reset:c; display:flex; flex-direction:column; gap:8px; }
.chap li { counter-increment:c; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 14px 11px 48px; position:relative; }
.chap li::before { content:counter(c); position:absolute; left:12px; top:11px; width:26px; height:26px; border-radius:50%; background:var(--tint); color:var(--cyan-ink); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center; }
.chap .n { font-size:13px; color:var(--ink-3); white-space:nowrap; margin-left:6px; } .chap .subs { display:block; font-size:14px; color:var(--ink-2); line-height:1.5; margin-top:2px; }
.q { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:16px 18px; margin-block:14px; }
.q h3 { font-size:16.5px; font-weight:600; line-height:1.5; margin:0 0 12px; } .q h3 span { color:var(--cyan-ink); font-weight:700; }
.opts { list-style:none; margin:0 0 12px; padding:0; display:flex; flex-direction:column; gap:6px; }
.opts li { display:flex; gap:10px; align-items:flex-start; border:1px solid var(--line); border-radius:8px; padding:8px 12px; font-size:15px; line-height:1.45; }
.opts li > span { flex:0 0 24px; height:24px; border-radius:50%; background:var(--tint); color:var(--cyan-ink); font-weight:700; font-size:12.5px; display:inline-flex; align-items:center; justify-content:center; }
.opts li.ok { border-color:var(--good); background:var(--good-bg); } .opts li.ok > span { background:var(--good); color:#fff; }
.ans { margin:0; font-size:14.5px; color:var(--ink-2); background:var(--bg); border-radius:8px; padding:10px 12px; max-width:none; } .ans b { color:var(--good); }
.q code, .ans code { font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.92em; background:#EEF2F6; border-radius:4px; padding:1px 5px; }
.q img { max-width:100%; height:auto; }
.ways { margin:0 0 12px; padding-left:20px; display:flex; flex-direction:column; gap:6px; max-width:68ch; }
.faq { font-size:16.5px; margin:16px 0 4px; }
.subj { list-style:none; margin:12px 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:8px; }
.subj a { display:block; background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 14px; text-decoration:none; color:var(--ink); height:100%; }
.subj a:hover { border-color:var(--cyan-ink); } .subj span { display:block; font-size:13.5px; color:var(--ink-3); }
.chips { display:flex; flex-wrap:wrap; gap:8px; max-width:none; } .chips a { background:var(--surface); border:1px solid var(--line); border-radius:99px; padding:6px 14px; font-size:14.5px; text-decoration:none; font-weight:600; }
.foot { border-top:1px solid var(--line); background:var(--surface); margin-top:44px; padding-block:22px; font-size:14px; } .foot p { max-width:none; } .foot__small { color:var(--ink-3); font-size:13px; margin:0; }
.q, .chap li, .opts li { overflow-wrap:anywhere; }