:root { --accent: #65dbd4; --panel: #141f31; --border: #293c54; --muted: #aabed2; }
body { background: #0d1420; }
.hero { background: radial-gradient(ellipse at top right, #245968, #15253c 56%, #0c1527); }
.hero::before, .hero::after { display: none; }
.vr-wordmark { color: #75eee0; font-weight: 800; font-size: clamp(1rem, 3vw, 1.5rem); }

/* VR uses a horizontal navigation layout and its own visual hierarchy. */
.site-header { background: #101d2c; border-color: var(--border); }
.bar, .shell { max-width: 1480px; margin-inline: auto; }
.shell { display: block; padding-inline: clamp(14px, 4vw, 52px); }
.sidebar { position: static; padding: 10px 0; border-bottom: 1px solid var(--border); }
.sidebar nav { display: flex; position: static; flex-wrap: wrap; gap: 4px; }
.sidebar a, .sidebar a[aria-current] { min-height: 42px; gap: 8px; padding-inline: 12px; }
.sidebar .icon { width: 17px; height: 17px; }
main { padding-top: 20px; }
.vr-hero { display: grid; grid-template-columns: 3fr 2fr; align-items: center; gap: 24px; padding: clamp(22px, 5vw, 64px); border: 1px solid #315b70; border-radius: 22px; background: linear-gradient(120deg,#14253b,#173f4a); }
.vr-hero h1 { font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1.06; margin: 0 0 12px; }
.vr-hero p { color: var(--muted); margin: 0 0 22px; }
.vr-cta { display: inline-flex; gap: 10px; align-items: center; padding: 12px 18px; border-radius: 9px; background: #74e7df; color: #101d2c; font-weight: 700; }
.vr-hero-art { display: grid; place-items: center; background: repeating-radial-gradient(circle, #62d6cc22 0 1px, transparent 2px 20px); min-height: 190px; border-radius: 18px; }
.vr-hero-art img { width: min(55%, 160px); height: auto; }
.video-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.site-footer { background: #101d2c; border-color: var(--border); }
.sidebar a[aria-current], .audience-filter a[aria-current], .duration-filter a[aria-current],
.pagination a[aria-current="page"], .card .card-save[aria-pressed="true"], .save-video[aria-pressed="true"],
.directory-search button, .refine-search button, .selected-tags a, .watch-actions .watch-report:hover {
    color: #eaffff; background: #165457; border-color: #459b9c;
}
.primary:hover, .player button:hover, .selected-tags a:hover, .watch-topics .chips a:hover { background: #246469; }
.footer-report, .footer-age strong, .card-terms .category, .resource-eyebrow, .resource-cards span,
.resource-toc a:hover, .resource-article a, .resource-principles a, .category-editorial p a, .empty a,
.watch-path a:hover, .related-video:hover .related-title, .section-title a:hover, .card-video:hover h2,
.search-recovery a, .saved-card span { color: #91e8e3; }
:focus-visible, .watch-actions a:focus-visible { outline-color: var(--accent); }
.category-tiles a:hover, .footer-report, .footer-age strong, .resource-cards > a:hover,
.resource-header-nav a:hover, .watch-topics .chips a:hover, .save-video:hover, .remove-saved:hover,
#clear-saved:hover { border-color: #459b9c; }
.refine-panel, .thumb-placeholder, .category-gallery .category-photo { background: #17273b; border-color: #31566d; color: #aabed2; }
.refine-panel summary { color: #d3e6f6; }
@media (max-width: 760px) {
    .video-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .vr-hero { grid-template-columns: 1fr; }
    .vr-hero-art { display: none; }
    .sidebar { position: static; width: auto; }
}

/* The VR homepage puts audience and directory navigation in the opening panel. */
.site-header .brand-image img { width: 246px; height: auto; object-fit: contain; }
.site-header .bar { grid-template-columns: minmax(180px, 265px) minmax(0, 1fr) auto; }
.vr-home .vr-hero {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    gap: clamp(18px, 4vw, 64px);
    padding: clamp(20px, 5vw, 64px);
    margin-bottom: 32px;
    border-radius: 14px;
    background: linear-gradient(112deg, #123540, #102235 58%, #112034);
}
.vr-intro > img { display: block; margin-bottom: 14px; }
.vr-audiences { display: flex; flex-wrap: wrap; gap: 8px; }
.vr-audiences a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
    padding: 8px 14px; border-radius: 6px; background: #77e8de; color: #102235; font-weight: 700;
}
.vr-audiences .icon { width: 15px; height: 15px; }
.vr-explore { padding: 18px; border: 1px solid #365c70; border-radius: 10px; background: #0d1c2c; }
.vr-explore h2 { margin: 0 0 8px; font-size: 1.05rem; }
.vr-explore a { display: flex; align-items: center; min-height: 44px; gap: 10px; border-top: 1px solid #293e52; }
.vr-explore a span { margin-left: auto; color: #76eee2; }
.vr-explore a:hover { color: #76eee2; }
@media (min-width: 950px) {
    .vr-home .video-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .vr-home .video-grid > .card:nth-child(-n+2) { grid-column: span 2; }
}
@media (max-width: 760px) {
    .site-header .bar { grid-template-columns: minmax(0, 1fr) auto; }
    .vr-home .vr-hero { grid-template-columns: 1fr; }
}