:root { --text:#343434; --muted:#6b6b6b; --line:#d8d8d8; --link:#1b4d78; --max:1035px; }
* { box-sizing:border-box; }
body { margin:0; color:var(--text); background:#fff; font-family:Arial, Helvetica, sans-serif; font-size:15px; line-height:1.55; }
a { color:var(--link); text-decoration:underline; }
a:hover { color:#000; }
.topbar { border-bottom:1px solid var(--line); box-shadow:0 1px 3px #00000012; }
.topbar-inner { max-width:var(--max); margin:auto; min-height:44px; display:flex; justify-content:space-between; align-items:center; }
.topnav { display:flex; gap:22px; font-size:13px; letter-spacing:.04em; }
.topnav a { color:var(--text); text-decoration:none; }
.rss { font-size:17px; }
.site-title { text-align:center; padding:26px 16px 20px; border-bottom:1px solid var(--line); box-shadow:0 1px 3px #00000012; }
.site-title h1 { margin:0 0 22px; font-size:31px; font-weight:400; letter-spacing:.01em; }
.site-nav { display:flex; justify-content:center; gap:28px; font-size:12px; font-weight:bold; text-transform:uppercase; }
.site-nav a { color:var(--text); text-decoration:none; }
.page { max-width:var(--max); margin:auto; padding:68px 0 100px; }
.hero { max-width:780px; margin:0 auto 22px; }
.hero img, .hero iframe { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border:0; }
.video-preview { position:relative; display:block; }
.video-preview::after { content:'▶  Watch on YouTube'; position:absolute; left:50%; bottom:14px; transform:translateX(-50%); padding:7px 11px; border-radius:3px; background:#000b; color:#fff; font-size:12px; white-space:nowrap; }
.page h1 { text-align:center; margin:0 auto 34px; padding:0 0 15px; max-width:780px; border-bottom:1px solid var(--text); font-size:32px; }
.content { max-width:780px; margin:auto; color:var(--muted); }
.content p { margin:0 0 20px; }
.content strong { color:var(--text); }
.content h2 { color:var(--text); text-align:center; border-top:1px solid var(--text); padding-top:28px; margin:38px 0 20px; font-size:27px; }
.content h3 { color:var(--text); margin:28px 0 10px; font-size:17px; }
.content ul { margin:0 0 24px; padding-left:28px; }
.content li { margin:0 0 9px; }
.meta { margin-top:28px; padding-top:18px; border-top:1px solid var(--line); }
.media-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:28px 0; }
.media-grid img { width:100%; aspect-ratio:570/350; object-fit:cover; }
.media-grid a { display:block; text-align:center; }
.code-videos { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin:0 auto 32px; max-width:780px; }
.code-videos img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; }
.code-videos a { text-align:center; }
.feature-columns { display:grid; grid-template-columns:1fr 1fr; gap:45px; border-top:1px solid var(--text); padding-top:24px; }
.download { text-align:center; border-top:1px solid var(--text); padding-top:27px; margin-top:34px; font-weight:bold; }
footer { background:#242424; color:#aaa; padding:22px max(20px, calc((100% - var(--max))/2)); font-size:12px; }
footer p { margin:0 0 5px; }
@media (max-width:760px) { .topbar-inner { width:calc(100% - 32px); } .site-title h1 { font-size:25px; } .page { width:calc(100% - 32px); padding-top:42px; } .media-grid, .code-videos { grid-template-columns:1fr 1fr; } .feature-columns { gap:20px; } }
@media (max-width:500px) { .topnav { gap:12px; } .site-nav { gap:15px; font-size:10px; } .site-title h1 { font-size:22px; } .media-grid, .code-videos, .feature-columns { grid-template-columns:1fr; } .page h1 { font-size:27px; } }