:root { --bg:#10110f; --panel:#191a17; --ink:#f4f0e5; --muted:#aaa99f; --line:#30312b; --lime:#d7ea77; --font:Inter, ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html { background:var(--bg); }
body { margin:0; min-width:320px; color:var(--ink); background:var(--bg); font-family:var(--font); }
a { color:inherit; text-decoration:none; }
.site-header { max-width:1240px; min-height:76px; margin:auto; padding:0 28px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-size:.83rem; font-weight:800; letter-spacing:.15em; }
.brand span { color:var(--lime); padding-left:3px; }
.site-note { color:var(--muted); font-size:.78rem; letter-spacing:.05em; }
.back:hover { color:var(--lime); }
.shell,.watch-shell { max-width:1240px; margin:auto; padding:54px 28px 80px; }
.intro { max-width:660px; margin-bottom:42px; }
.eyebrow { color:var(--lime); font-size:.7rem; letter-spacing:.14em; font-weight:800; margin:0 0 12px; }
h1,h2,p { margin-top:0; }
h1 { max-width:720px; margin-bottom:18px; font-size:clamp(2.65rem,7vw,6.3rem); line-height:.91; letter-spacing:-.07em; }
.lede { max-width:420px; color:var(--muted); line-height:1.55; }
.filters { display:flex; gap:8px; overflow-x:auto; padding-bottom:22px; margin-bottom:8px; scrollbar-width:none; }
.filter { cursor:pointer; flex:none; border:1px solid var(--line); color:var(--muted); background:transparent; padding:9px 13px; font:700 .72rem var(--font); letter-spacing:.06em; text-transform:uppercase; }
.filter:hover,.filter[aria-pressed="true"] { border-color:var(--lime); color:var(--bg); background:var(--lime); }
.video-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; }
.video-card { min-width:0; background:var(--panel); border:1px solid var(--line); transition:transform .18s,border-color .18s; }
.video-card:hover { transform:translateY(-3px); border-color:var(--lime); }
.cover { position:relative; min-height:220px; aspect-ratio:3/4; overflow:hidden; background:linear-gradient(145deg,hsl(var(--hue) 43% 33%),hsl(calc(var(--hue) + 38) 48% 10%)); }
.cover-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.cover.has-image::before,.cover.has-image::after { display:none; }
.cover::before,.cover::after { content:""; position:absolute; border-radius:999px; opacity:.32; filter:blur(2px); }
.cover::before { width:70%; aspect-ratio:1; left:-20%; top:13%; background:hsl(calc(var(--hue) + 55) 76% 70%); }
.cover::after { width:58%; aspect-ratio:1; right:-16%; bottom:-9%; background:hsl(calc(var(--hue) + 10) 60% 55%); }
.play { position:absolute; z-index:1; bottom:14px; right:14px; display:grid; place-items:center; width:36px; height:36px; padding-left:2px; border-radius:50%; background:var(--lime); color:var(--bg); font-size:.77rem; }
.episode { position:absolute; z-index:1; top:14px; left:14px; color:var(--ink); font-size:.68rem; font-weight:800; letter-spacing:.1em; }
.card-copy { min-height:136px; padding:16px; }
.category { color:var(--lime); margin-bottom:8px; font-size:.65rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.card-copy h2 { margin-bottom:13px; font-size:1rem; line-height:1.18; letter-spacing:-.025em; }
.tags { display:flex; flex-wrap:wrap; gap:6px; }
.tag { color:var(--muted); border:1px solid var(--line); padding:4px 6px; font-size:.63rem; line-height:1; }
.watch-shell { max-width:1020px; padding-top:38px; }
.player-frame { width:100%; aspect-ratio:16/9; overflow:hidden; background:#060706; border:1px solid var(--line); }
.player-frame iframe { width:100%; height:100%; border:0; }
.watch-details { margin:28px 0 20px; }
.watch-details h1 { max-width:740px; margin:0 0 16px; font-size:clamp(2rem,5vw,4.2rem); }
.watch-nav { display:flex; gap:10px; border-top:1px solid var(--line); padding-top:20px; }
.nav-link { flex:1; min-height:50px; display:flex; align-items:center; padding:0 15px; border:1px solid var(--line); color:var(--muted); font-size:.83rem; font-weight:800; }
.nav-link:hover { border-color:var(--lime); color:var(--ink); }
.next { justify-content:flex-end; }
.is-hidden { visibility:hidden; pointer-events:none; }
@media (max-width:960px) { .video-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } .cover { min-height:180px; } }
@media (max-width:640px) { .site-header { min-height:64px; padding:0 16px; } .shell,.watch-shell { padding:34px 16px 58px; } .intro { margin-bottom:30px; } .video-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .cover { min-height:150px; } .card-copy { min-height:126px; padding:12px; } .card-copy h2 { font-size:.9rem; } .watch-shell { padding-top:22px; } .watch-details { margin-top:20px; } }
@media (orientation:landscape) and (max-height:600px) { .watch-shell { max-width:none; padding:18px max(18px,calc((100vw - 900px)/2)); } .watch-details { margin:14px 0; } .watch-details h1 { font-size:1.45rem; } .site-header { min-height:52px; } }