:root{--ink:#1c1917;--paper:#faf7f0;--card:#fffdf7;--line:#e5ded1;--muted:#78716c;--serif:'Source Serif Pro',Georgia,'Times New Roman',serif;--sans:system-ui,-apple-system,sans-serif}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65}
.topnav{display:flex;justify-content:space-between;align-items:center;padding:.9rem 5vw;background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.brand{font-family:var(--serif);font-size:1.6rem;font-weight:700;text-decoration:none;color:var(--ink)}
.brand span{color:#9333ea}
.navlinks{display:flex;gap:1.4rem;align-items:center;font-size:.95rem}
.navlinks a{color:var(--ink);text-decoration:none}
.searchbox input{padding:.45rem .8rem;border:1px solid var(--line);border-radius:8px;width:200px;background:var(--paper);font-family:inherit}
.searchbox.big input{width:min(480px,80vw);padding:.8rem 1.2rem;font-size:1.05rem}
#search-results{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:8px;max-width:340px;display:none}
#search-results a{display:block;padding:.55rem .9rem;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--line)}
main{max-width:860px;margin:0 auto;padding:3rem 5vw 4rem}
.hero{text-align:center;padding:3.5rem 0 2.5rem}
.hero h1{font-family:var(--serif);font-size:clamp(2rem,6vw,3.4rem);line-height:1.15}
.hero em{color:#9333ea;font-style:italic}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1rem;margin-top:1.5rem}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.2rem;text-decoration:none;color:var(--ink);transition:transform .15s;border-top:4px solid var(--accent)}
.card:hover{transform:translateY(-3px)}
.card .emoji{font-size:1.6rem}
.card h3{font-family:var(--serif);margin:.4rem 0 .3rem}
.card p{color:var(--muted);font-size:.88rem}
.card .count{display:inline-block;margin-top:.6rem;font-size:.75rem;color:var(--accent);font-weight:600}
h1,h2,h3{font-family:var(--serif);line-height:1.25}
article h2{margin:1.8rem 0 .6rem;font-size:1.45rem}
article p{margin:.7rem 0}
article ul{margin:.7rem 0 .7rem 1.4rem}
.subject-head{border-left:5px solid var(--accent);padding-left:1.2rem;margin-bottom:2rem}
.tagline{color:var(--muted);font-size:1.1rem}
.syllabus{list-style:none;counter-reset:t}
.topic{counter-increment:t;padding:.65rem .9rem;border-bottom:1px solid var(--line);display:flex;justify-content:space-before;align-items:center;gap:.8rem}
.topic::before{content:counter(t,upper-alpha) ".";font-weight:700;color:var(--muted);min-width:1.8rem}
.topic.done a{color:var(--ink);text-decoration:none;font-weight:600}
.topic.done a:hover{color:#9333ea}
.topic.soon span{color:var(--muted)}
.topic.soon em{margin-left:auto;font-size:.75rem;color:var(--muted);background:var(--paper);border:1px dashed var(--line);padding:.1rem .5rem;border-radius:99px}
.progress-wrap{margin-top:1rem}
.progress-bar{height:8px;background:var(--paper);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.progress-fill{height:100%;background:var(--accent,#9333ea);transition:width .4s}
.progress-label{font-size:.8rem;color:var(--muted)}
.art-head h1{font-size:clamp(1.7rem,4vw,2.4rem);margin:.4rem 0}
.crumb{color:var(--accent);text-decoration:none;font-weight:700;font-size:.9rem}
.learned-btn{float:right;border:1.5px solid var(--ink);background:transparent;padding:.35rem .8rem;border-radius:99px;cursor:pointer;font-family:inherit}
.learned-btn.on{background:#16a34a;border-color:#16a34a;color:#fff}
.quiz{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:1.4rem;margin:2rem 0}
.quiz button.opt{display:block;width:100%;text-align:left;margin:.4rem 0;padding:.55rem .9rem;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer;font-family:inherit}
.quiz button.opt.correct{border-color:#16a34a;background:#dcfce7}
.quiz button.opt.wrong{border-color:#dc2626;background:#fee2e2}
.artnav{display:flex;justify-content:space-between;margin-top:2.5rem}
.artnav a{color:#9333ea;text-decoration:none;font-weight:600}
footer{border-top:1px solid var(--line);padding:2rem 5vw;color:var(--muted);font-size:.85rem;text-align:center}
.howto li{margin:.4rem 0 .4rem 1.2rem}
@media(max-width:640px){.navlinks .searchbox input{width:110px}}