:root { color-scheme: light dark; --bg:#f7f7f5; --fg:#1d1d1f; --muted:#6b6b70; --card:#fff; --line:#e4e4e0; --accent:#2f6f5e; }
@media (prefers-color-scheme: dark) { :root { --bg:#141416; --fg:#ececee; --muted:#9a9aa2; --card:#1e1e22; --line:#2e2e34; --accent:#7cc4ad; } }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--fg); font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
main { max-width:1100px; margin:0 auto; padding:32px 20px 80px; }
a { color:var(--accent); }
h1 { font-size:2rem; line-height:1.2; margin:0 0 6px; }
.lede, .meta, .crumb { color:var(--muted); }
.crumb a { text-decoration:none; }
.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:20px; margin:24px 0 40px; }
.card { display:flex; flex-direction:column; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; color:inherit; text-decoration:none; padding-bottom:14px; transition:transform .12s, box-shadow .12s; }
.card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgb(0 0 0 / .12); }
.thumb { position:relative; aspect-ratio:16/9; background:#000; }
.thumb img { width:100%; height:100%; object-fit:cover; display:block; }
.dur { position:absolute; right:8px; bottom:8px; background:rgb(0 0 0 / .75); color:#fff; font-size:.8rem; padding:1px 7px; border-radius:6px; }
.card .title { font-weight:600; padding:4px 14px 0; line-height:1.3; }
.card .sub { color:var(--muted); font-size:.88rem; padding:0 14px; line-height:1.45; }
.card .count { color:var(--muted); font-size:.8rem; padding:0 14px; margin-top:auto; }
.cols { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:24px; }
.cols ul { padding-left:20px; }
.player { margin:24px 0; }
.player h2 { margin-bottom:8px; }
video { width:100%; max-height:80vh; background:#000; border-radius:10px; display:block; }
.readme { border-top:1px solid var(--line); margin-top:32px; padding-top:8px; max-width:820px; }
.readme table { border-collapse:collapse; display:block; overflow-x:auto; }
.readme th, .readme td { border:1px solid var(--line); padding:6px 10px; text-align:left; vertical-align:top; }
.readme pre { background:var(--card); border:1px solid var(--line); padding:12px; border-radius:8px; overflow-x:auto; }
.readme code { font-size:.9em; }