:root{--bg:#f4f1e8;--card:#fff;--ink:#22301f;--mute:#667260;--green:#2f5d3a;--accent:#d97b29;--line:#e1dccb}
@media (prefers-color-scheme:dark){:root{--bg:#161d15;--card:#212b20;--ink:#eef0e6;--mute:#a3ae9b;--green:#7fb98a;--accent:#f0a05a;--line:#33402f}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.5 system-ui,-apple-system,sans-serif;padding-bottom:env(safe-area-inset-bottom)}
header{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 16px;position:sticky;top:0;background:var(--bg);z-index:5;border-bottom:1px solid var(--line)}
h1{font-size:1.4rem;margin:0;cursor:pointer;flex:1;color:var(--green)}
nav{display:flex;gap:4px}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:999px;padding:6px 14px}
button.on{background:var(--green);color:#fff;border-color:var(--green)}
#offline{font-size:.85rem}
main{max-width:980px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.card{background:var(--card);border-radius:14px;overflow:hidden;border:1px solid var(--line);cursor:pointer;padding:0;text-align:left;display:block}
.card img{width:100%;aspect-ratio:1;object-fit:cover;display:block;background:var(--line)}
.card span{display:block;padding:8px 10px;font-weight:600}
.hero{width:100%;max-height:340px;object-fit:cover;border-radius:14px;background:var(--line)}
.back{margin-bottom:12px}
h2{margin:.6em 0 0}.latin{color:var(--mute);font-style:italic;margin:0}
.tip{background:var(--card);border-left:4px solid var(--accent);padding:10px 14px;border-radius:8px;margin:14px 0}
.clip{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin:8px 0}
.play{width:48px;height:48px;border-radius:50%;padding:0;background:var(--green);color:#fff;border:0;font-size:1.2rem;flex:none}
.clip .meta{flex:1;min-width:0}.clip b{text-transform:capitalize}
.clip small{color:var(--mute);display:block}
.bar{height:5px;background:var(--line);border-radius:3px;margin-top:6px;overflow:hidden}.bar i{display:block;height:100%;width:0;background:var(--accent)}
.quiz{text-align:center}
.quiz .play{width:96px;height:96px;font-size:2.4rem;margin:18px auto}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.choices button{border-radius:12px;padding:14px 8px}
.choices .right{background:#2e8b4a;color:#fff}.choices .wrong{background:#b6402f;color:#fff}
.score{color:var(--mute)}
footer{text-align:center;padding:24px;font-size:.85rem}footer a{color:var(--mute)}
.credits li{margin:6px 0;font-size:.9rem}.credits a{color:var(--green)}
@media(max-width:480px){#offline{width:100%}}