:root{--bg:#f7f8fa;--card:#fff;--text:#0f172a;--muted:#64748b;--line:#e2e8f0;--accent:#0f766e;--chip:#eef2f6;--shadow:0 1px 2px rgba(0,0,0,.05),0 8px 24px rgba(15,23,42,.06);
--Physics:#6366f1;--Chemistry:#d946ef;--Biology:#16a34a;--EarthSpace:#0284c7;--Technology:#f59e0b;--Health:#e11d48;--WorldNews:#b45309;--History:#92400e;--HealthPE:#e11d48;--WorldCultures:#ea580c;--BibleFaith:#7c2d12;--Math:#0891b2;--EnglishLiterature:#7c3aed;--ArtsMusic:#db2777;--Geography:#059669;--CivicsGovernment:#1d4ed8}
[data-theme=dark]{--bg:#0b1120;--card:#131c2e;--text:#e2e8f0;--muted:#94a3b8;--line:#1f2a40;--accent:#2dd4bf;--chip:#1a2438;--shadow:0 8px 24px rgba(0,0,0,.35)}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.bar{display:flex;gap:12px;align-items:center;max-width:1200px;margin:auto;padding:12px 16px}
.brand{font-weight:800;font-size:1.15rem;white-space:nowrap;display:flex;gap:6px;align-items:center}.logo{color:var(--accent);font-size:1.4rem}
.search{flex:1}.search input{width:100%;padding:10px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:16px;outline:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.icon-btn{border:1px solid var(--line);background:var(--card);color:var(--text);width:42px;height:42px;border-radius:50%;font-size:1.2rem;cursor:pointer}
.chips{display:flex;gap:8px;overflow-x:auto;max-width:1200px;margin:auto;padding:0 16px 12px;scrollbar-width:none}.chips::-webkit-scrollbar{display:none}
.chip{flex:none;border:1px solid var(--line);background:var(--chip);color:var(--text);padding:7px 14px;border-radius:999px;font-weight:600;font-size:.9rem;cursor:pointer;transition:all .2s}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:#fff}
[data-theme=dark] .chip[aria-pressed=true]{color:#042f2e}
main{max-width:1200px;margin:auto;padding:20px 16px 40px}
.head h1{margin:0;font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:-.02em}.muted{color:var(--muted)}.head p{margin:4px 0 18px}
.grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.grid{grid-template-columns:repeat(2,1fr)}}@media(min-width:1000px){.grid{grid-template-columns:repeat(3,1fr)}.grid .card.lead{grid-column:span 2}.card.lead h2{font-size:1.5rem}.card.lead .thumb{aspect-ratio:16/8}}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s;animation:in .35s ease both}
.card:hover{transform:translateY(-3px)}@keyframes in{from{opacity:0;transform:translateY(8px)}}
.thumb{aspect-ratio:16/9;background:var(--chip);overflow:hidden}.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.thumb.ph{display:grid;place-items:center;font-size:2.4rem;color:#fff;background:linear-gradient(135deg,var(--c),color-mix(in srgb,var(--c) 50%,#000))}
.body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.tags{display:flex;gap:8px;align-items:center;font-size:.78rem;color:var(--muted)}
.cat{color:var(--c);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.card h2{font-size:1.05rem;line-height:1.35;margin:0}.card p{margin:0;color:var(--muted);font-size:.92rem;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.src{margin-top:auto;font-size:.82rem;font-weight:600;color:var(--accent)}
.empty{text-align:center;padding:40px}.more{display:block;margin:24px auto;padding:10px 22px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:600;cursor:pointer}
.foot{max-width:1200px;margin:auto;padding:0 16px 32px;font-size:.82rem}
@media(max-width:520px){.brand .txt{display:none}.bar{gap:8px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.grade{display:flex;align-items:center;gap:6px;font-size:.8rem;font-weight:700;color:var(--muted)}
.grade select{padding:9px 10px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font-weight:700;font-size:15px}
@media(max-width:520px){.grade span{display:none}}
.card{cursor:pointer}.badge{font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:999px;background:#fef3c7;color:#92400e}
.badge.lvl{background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}
[data-theme=dark] .badge{background:#422006;color:#fcd34d}
/* article */
#article{max-width:1100px;animation:in .35s ease both}
.back{border:0;background:none;color:var(--accent);font-weight:700;font-size:.95rem;cursor:pointer;padding:6px 0;margin-bottom:8px}
.art-grid{display:grid;gap:20px}@media(min-width:900px){.art-grid{grid-template-columns:minmax(0,1fr) 320px;align-items:start}.side{position:sticky;top:130px}}
.art h1{font-size:clamp(1.5rem,4vw,2.3rem);line-height:1.2;letter-spacing:-.02em;margin:6px 0 14px}
.hero{border-radius:16px;overflow:hidden;aspect-ratio:16/9;background:var(--chip);margin-bottom:18px}.hero img{width:100%;height:100%;object-fit:cover}
.lede{font-size:1.15rem;line-height:1.7}.lvl-note{font-size:.85rem;color:var(--muted)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;box-shadow:var(--shadow)}
.creation{border-top:4px solid #b45309}.creation h3{margin:0 0 8px;font-size:1rem;display:flex;justify-content:space-between;gap:8px;align-items:center}
.creation p{margin:0;line-height:1.65}
.cite{margin-top:24px;font-size:.92rem}.cite h3{margin:0 0 6px;font-size:.95rem}.cite code{display:block;white-space:normal;font:inherit;color:var(--muted);margin-top:8px}
.cite .btn{display:inline-block;margin-top:10px;padding:9px 16px;border-radius:999px;background:var(--accent);color:#fff;font-weight:700}
[data-theme=dark] .cite .btn{color:#042f2e}
/* donate */
.donate{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card));border:1px solid var(--line);border-radius:16px;padding:18px 20px;margin:28px 0 20px;color:var(--text)}
.donate h3{margin:0 0 4px;font-size:1.05rem}.donate p{margin:0 0 12px;color:var(--muted);font-size:.9rem}
.amts{display:flex;flex-wrap:wrap;gap:8px}.amts a{padding:8px 16px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-weight:700;transition:all .2s}
.amts a:hover{background:var(--accent);color:#fff}
::view-transition-old(root),::view-transition-new(root){animation-duration:.28s}
.settings{position:absolute;right:16px;top:64px;width:min(360px,calc(100vw - 32px));z-index:20}
.set-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.set-head .back{margin:0}
.switch{display:flex;gap:12px;align-items:flex-start;cursor:pointer}.switch input{position:absolute;opacity:0}
.track{flex:none;width:44px;height:26px;border-radius:999px;background:var(--line);position:relative;transition:background .2s;margin-top:2px}
.track::after{content:"";position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .2s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.switch input:checked+.track{background:var(--accent)}.switch input:checked+.track::after{transform:translateX(18px)}
.switch input:focus-visible+.track{outline:2px solid var(--accent);outline-offset:2px}
.thumb{position:relative;margin:0}.thumb figcaption{position:absolute;right:6px;bottom:6px;font-size:.62rem;color:#fff;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:999px;max-width:80%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card.noimg{border-top:5px solid var(--c);background:linear-gradient(180deg,color-mix(in srgb,var(--c) 9%,var(--card)),var(--card) 55%)}
.card.noimg h2{font-size:1.2rem}.card.noimg p{-webkit-line-clamp:5}.card.lead.noimg h2{font-size:1.7rem}
.hero{margin:0 0 18px;aspect-ratio:auto;background:none;overflow:visible;border-radius:0}.hero img{aspect-ratio:16/9;height:auto;border-radius:16px;display:block}
.hero figcaption{font-size:.78rem;color:var(--muted);margin-top:6px}.hero figcaption a{color:var(--accent)}
.fc{font-size:.85rem;font-weight:600;color:#15803d;margin:-6px 0 14px}.fc a{text-decoration:underline}[data-theme=dark] .fc{color:#4ade80}
/* bookmarks */
.card{position:relative}.bm{border:0;background:rgba(255,255,255,.92);width:38px;height:38px;border-radius:50%;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .2s}
.card>.bm{position:absolute;top:10px;right:10px;z-index:2}.card.noimg>.bm{background:var(--chip)}
.bm svg{width:18px;height:18px;fill:none;stroke:#334155;stroke-width:2;transition:fill .25s,stroke .25s}
.bm[aria-pressed=true] svg{fill:var(--accent);stroke:var(--accent)}[data-theme=dark] .card.noimg>.bm svg,[data-theme=dark] .art .bm svg{stroke:#cbd5e1}
[data-theme=dark] .art .bm,[data-theme=dark] .card.noimg>.bm{background:var(--chip)}
.bm:hover{transform:scale(1.08)}.bm.pop{animation:pop .35s ease}@keyframes pop{40%{transform:scale(1.3)}100%{transform:scale(1)}}
.art .tags{align-items:center}.spacer{flex:1}.art .bm{box-shadow:none;border:1px solid var(--line)}
.card .body h2{padding-right:4px}.card.noimg .body{padding-right:56px}
/* sub nav, trending */
.subchips{display:flex;gap:8px;flex-wrap:wrap;margin:-6px 0 14px}.chip.sm{padding:5px 12px;font-size:.82rem}
.demo-note{font-size:.82rem;color:var(--muted);margin:-6px 0 14px}.badge.demo{background:#e0e7ff;color:#3730a3;margin-right:6px}[data-theme=dark] .badge.demo{background:#1e1b4b;color:#c7d2fe}
.strip{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:12px 14px;margin-bottom:16px;box-shadow:var(--shadow)}
.strip-h{display:flex;gap:10px;align-items:center;margin-bottom:8px}.strip-h a{margin-left:auto;color:var(--accent);font-weight:700;font-size:.85rem}
.strip-row{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
.tchip{flex:none;width:250px;display:flex;gap:10px;align-items:flex-start;font-size:.88rem;font-weight:600;line-height:1.35;padding:8px 10px;border-radius:12px;background:var(--chip);border-left:4px solid var(--c)}
.tchip .n{font-weight:800;color:var(--c);font-size:1.1rem}
.empty .big{display:block;font-size:2.4rem;margin-bottom:6px}
.hero figcaption em{font-style:normal;opacity:.8}
/* listen */
.listen{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--accent);background:var(--card);color:var(--accent);font-weight:700;padding:7px 14px;border-radius:999px;cursor:pointer;margin:0 0 14px;font-size:.9rem;transition:all .2s}
.listen.on{background:var(--accent);color:#fff}[data-theme=dark] .listen.on{color:#042f2e}
.cplay{position:absolute;top:10px;right:56px;z-index:2;border:0;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.92);color:#0f766e;font-size:.85rem;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.15);transition:transform .2s}
.cplay:hover{transform:scale(1.08)}.card.noimg>.cplay{background:var(--chip);color:var(--accent)}.card.noimg .body{padding-right:100px}
.sent{transition:background .25s;border-radius:4px}.sent.reading{background:color-mix(in srgb,#facc15 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,#facc15 45%,transparent)}
.player{position:fixed;left:50%;transform:translateX(-50%);bottom:max(12px,env(safe-area-inset-bottom));width:min(760px,calc(100vw - 20px));z-index:30;background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.25);padding:10px 12px;animation:in .3s ease both}
.pl-now{font-size:.85rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 4px 8px}
.pl-ctl{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.pl-btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--chip);color:var(--text);cursor:pointer;font-size:.95rem}
.pl-btn.main{background:var(--accent);border-color:var(--accent);color:#fff;width:46px;height:46px}.pl-btn:disabled{opacity:.4}
.pl-sel{display:flex;gap:4px;align-items:center;font-size:.75rem;font-weight:700;color:var(--muted)}.pl-sel select{padding:6px 8px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font-size:14px;max-width:150px}
.pl-voice{flex:1;min-width:0}.pl-voice select{width:100%;max-width:none}#plClose{margin-left:auto}
body.has-player main{padding-bottom:150px}
.art-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}.art-actions .listen{margin:0}
.pimg{font-size:.8rem;color:var(--muted);display:flex;gap:5px;align-items:center}.phint{font-size:.82rem;color:var(--muted);margin:-6px 0 12px}
#printSheet{display:none}
@media print{
 @page{size:letter;margin:0.6in}
 html,body{background:#fff!important;color:#000!important}
 body.print-article>*:not(#printSheet){display:none!important}
 body.print-article #printSheet{display:block!important;font:11.5pt/1.5 Georgia,"Times New Roman",serif;color:#000}
 #printSheet *{color:#000!important;background:none!important;box-shadow:none!important}
 .ps-head{display:flex;justify-content:space-between;font:600 8.5pt system-ui,sans-serif;border-bottom:1px solid #000;padding-bottom:4px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.05em}
 #printSheet h1{font:700 19pt/1.2 system-ui,sans-serif;margin:0 0 4px}.ps-meta{font:9pt system-ui,sans-serif;margin:0 0 12px}
 #printSheet figure{margin:0 0 12px;break-inside:avoid}#printSheet img{max-width:100%;max-height:2.8in;display:block;filter:grayscale(1)}#printSheet figcaption{font:8pt system-ui,sans-serif;margin-top:3px;word-break:break-all}
 .ps-sum{font-size:13pt;margin:0 0 14px}
 #printSheet h2{font:700 11pt system-ui,sans-serif;margin:0 0 4px}.ps-box{border:1px solid #000;padding:8px 12px;margin:0 0 14px;break-inside:avoid}.ps-box p{margin:0}
 .ps-q li{margin-bottom:10px;break-inside:avoid}.ps-q .ln{border-bottom:1px solid #777;height:22px}
 .ps-foot{display:flex;gap:16px;justify-content:space-between;align-items:flex-end;border-top:1px solid #000;padding-top:8px;margin-top:16px;font:8.5pt/1.45 system-ui,sans-serif;break-inside:avoid}
 .ps-foot .url{word-break:break-all}.qr{flex:none;width:1.1in;text-align:center}.qr svg{width:1.1in;height:1.1in;display:block}.qr small{font-size:7pt}
}
.votd{position:relative;margin:0 0 16px;padding:16px 20px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,#b45309 10%,var(--card)),var(--card) 70%);box-shadow:var(--shadow);animation:in .35s ease both}
.votd-k{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#b45309}[data-theme=dark] .votd-k{color:#fbbf24}
.votd blockquote{margin:6px 0 8px;font:italic 1.08rem/1.55 Georgia,"Times New Roman",serif}
.votd-f{display:flex;gap:12px;flex-wrap:wrap;align-items:center;font-size:.85rem}.votd-f a{color:var(--accent)}.votd .pw{margin-left:auto;font-size:.72rem;color:var(--muted)}
.about{border-top:1px solid var(--line);padding-top:14px;margin-bottom:12px}.about h3{margin:0 0 4px;font-size:.95rem;color:var(--text)}.about p{margin:0 0 6px;max-width:70ch}
.founder{color:var(--text)}.founder a{color:var(--accent);font-weight:600}
@media print{.ps-votd{font:italic 9pt/1.4 Georgia,serif;margin:14px 0 0}}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 2px}.filters label{font-size:.85rem;color:var(--muted);display:flex;gap:6px;align-items:center}.filters select{padding:6px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--text);font:inherit}
.devo{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;margin:0 0 18px}.devo h3{margin:0 0 4px}.devo p{margin:0 0 10px}.devo form{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}.devo label{display:flex;flex-direction:column;font-size:.85rem;gap:4px;flex:1 1 180px}.devo input{padding:9px 11px;border-radius:10px;border:1px solid var(--line);background:var(--bg,#fff);color:var(--text);font:inherit}.devo button{padding:10px 18px;border-radius:999px;border:0;background:var(--accent,#2f6b3f);color:#fff;font-weight:700;cursor:pointer}.devo .form-status{flex-basis:100%;margin:0;font-size:.9rem}.devo .form-status.error{color:#b42318}.devo-alt{font-size:.8rem;margin:8px 0 0!important}.opt{opacity:.7}.foot .devo{text-align:left;max-width:640px;margin:16px auto}.rooted{margin:10px 0}

.devo{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:linear-gradient(135deg,var(--card),var(--chip));border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:16px;padding:14px 18px;margin:0 0 18px;box-shadow:var(--shadow)}
.devo-txt{flex:1 1 300px;min-width:0}.devo-tag{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--accent)}
.devo h3{margin:2px 0 2px;font-size:1.05rem}.devo p{margin:0;color:var(--muted);font-size:.88rem}
.devo form{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:0 1 380px;margin:0}
.devo input{flex:1 1 200px;min-width:0;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit}
.devo button{padding:9px 16px;border:0;border-radius:10px;background:var(--accent);color:#fff;font-weight:600;font:inherit;font-weight:600;cursor:pointer}
.devo .form-status{flex-basis:100%;font-size:.8rem}.devo .form-status:empty{display:none}
.foot-devo,.rooted{margin:6px 0}
.devo form{flex:0 1 460px}.devo input.fn{flex:1 1 120px}