:root{color-scheme:dark;--bg:#0a0a0e;--text:#eee;--border:#292930;--accent:#64b5f6;--text-mute:#aaa}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 Inter,system-ui,sans-serif}
a{color:var(--accent);text-underline-offset:4px}
a:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
main{max-width:1080px;margin:auto;padding:24px 28px 64px}
h1{font-size:clamp(24px,3.2vw,38px);line-height:1.2;letter-spacing:-.7px;margin:16px 0 24px;text-wrap:balance}
h2{font-size:19px;line-height:1.4;margin:12px 0 6px}
.breadcrumbs,.video-meta{font-size:13px;color:var(--text-mute)}
.watch-player{width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--border);border-radius:8px;overflow:hidden}
.watch-player iframe{display:block;width:100%;height:100%;border:0}
.description{max-width:800px;white-space:pre-line}
.related{display:flex;flex-wrap:wrap;gap:12px 28px;border-top:1px solid var(--border);margin-top:28px;padding-top:24px}
.video-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px 24px;margin-top:32px}
.video-grid article{min-width:0}
.video-grid a{text-decoration:none}
.video-grid a:hover h2{text-decoration:underline}
.video-grid img{width:100%;height:auto;aspect-ratio:4/3;display:block;border-radius:6px;background:#16161c}
.video-grid p{margin:6px 0}
.skip{position:absolute;top:-100px;left:12px;z-index:200;background:var(--bg);padding:10px}
.skip:focus{top:8px}
@media(max-width:760px){.video-grid{grid-template-columns:repeat(2,minmax(0,1fr))}main{padding:20px 18px 48px}}
@media(max-width:480px){.video-grid{grid-template-columns:1fr}main{padding:18px 12px 40px}h1{font-size:24px;margin:12px 0 20px}.related{flex-direction:column}}
