/* V31 / A light editorial library. Media first, with the existing AI AGENT identity. */
:root { --paper: #FFFFFF; --wash: #F6F7F9; --ink: #14171D; --muted: #526176; --blue: #2457E6; --line: #E3E7EE; --sidebar-width: 216px; --topbar-height: 76px; --ease: cubic-bezier(.2,.7,.2,1); }
* { box-sizing: border-box; }
html { color-scheme: light; scroll-padding-top: 200px; }
body { margin: 0; background: var(--wash); color: var(--ink); font-family: Manrope, 'Noto Sans SC', sans-serif; font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; }
button:disabled { cursor: default; opacity: .55; }
button, a, input, select, video { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { display: block; flex: none; width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.mono { font-family: 'JetBrains Mono', monospace; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 18px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.skip-link:focus { top: 14px; }
.explore-layout { min-height: 100dvh; }
.explore-sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar-width); padding: 26px 14px 21px; overflow-y: auto; border-right: 1px solid var(--line); background: var(--paper); scrollbar-width: thin; }
.brand { display: flex; align-items: center; gap: 10px; flex: none; min-width: 0; color: var(--ink); font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -.04em; }
.explore-sidebar > .brand, .sidebar-brand { margin: 0 10px 33px; }
.brand-mark { display: grid; place-items: center; flex: none; width: 37px; height: 37px; border-radius: 10px; background: var(--blue); color: #FFFFFF; }
.brand-mark > img { width: 100%; height: 100%; }
.brand-mark .icon { width: 22px; height: 22px; }
.brand > img, .sidebar-brand > img { flex: none; width: 36px; height: 36px; }
.brand small { display: block; margin-top: 5px; color: var(--muted); font-size: 14px; font-weight: 400; line-height: 1.5; letter-spacing: 0; }
.explore-nav { display: grid; gap: 5px; }
.explore-nav button, .side-category { display: flex; align-items: center; gap: 10px; width: 100%; min-width: 0; min-height: 44px; padding: 10px 13px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #526176; font-size: 15px; line-height: 1.55; text-align: left; }
.explore-nav button .icon { width: 20px; height: 20px; }
.explore-nav button.is-active, .explore-nav button[aria-pressed='true'], .explore-nav button[aria-current='page'] { background: #EDF2FE; color: var(--blue); font-weight: 600; }
.sidebar-section-label, .sidebar-label, .side-categories-heading { display: block; margin: 28px 13px 11px; color: #6C7788; font-size: 14px; font-weight: 500; line-height: 1.5; }
.explore-sidebar > .sidebar-label { margin-top: 0; }
.nav-count { margin-left: auto; color: #7387A7; font-size: 14px; font-variant-numeric: tabular-nums; }
.side-categories { display: grid; gap: 2px; }
.side-category { justify-content: space-between; gap: 8px; min-height: 41px; padding-block: 9px; font-size: 14px; }
.side-category-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.side-category-count { flex: none; min-width: 20px; color: #788397; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.side-category.is-active, .side-category[aria-pressed='true'] { background: #F0F3F9; color: #243A5C; }
.side-category.is-active .side-category-count { color: #5578B2; }
.sidebar-bottom { display: grid; gap: 9px; margin-top: auto; padding: 30px 12px 0; }
.sidebar-bottom > a { display: flex; align-items: center; gap: 9px; min-height: 38px; color: #526176; font-size: 14px; }
.sidebar-bottom > a .icon { width: 17px; height: 17px; }
.sidebar-bottom > a .external-icon { margin-left: auto; width: 14px; height: 14px; }
.prototype-note { display: flex; align-items: center; gap: 8px; }
.preview-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #8FA6C9; }
.sidebar-bottom > p, .sidebar-preview-note { margin: 10px 0 0; padding-top: 15px; border-top: 1px solid var(--line); color: #6D788B; font-size: 14px; line-height: 1.8; }
.sidebar-bottom .preview-badge { display: flex; align-items: center; gap: 7px; color: #61748F; font-size: 14px; }
.sidebar-bottom .preview-badge i { width: 5px; height: 5px; border-radius: 50%; background: #91A9CC; }
.explore-main { min-width: 0; min-height: 100dvh; margin-left: var(--sidebar-width); }
.explore-topbar { position: sticky; z-index: 25; top: 0; display: flex; align-items: center; gap: 25px; min-height: var(--topbar-height); padding: 14px 32px; border-bottom: 1px solid var(--line); background: #FFFFFFF5; backdrop-filter: blur(14px); }
.mobile-brand, .mobile-home { display: none; }
.page-identity { display: flex; align-items: center; gap: 12px; flex: none; }
.page-identity h1 { margin: 0; font-size: 22px; line-height: 1.5; font-weight: 700; letter-spacing: -.035em; }
.topbar-caption { color: #8190A5; font-size: 14px; }
.top-search { display: flex; align-items: center; gap: 10px; width: min(100%, 400px); min-width: 100px; min-height: 42px; margin-left: 7px; padding: 0 11px 0 13px; border: 1px solid #E3E8F0; border-radius: 9px; background: #F5F7FA; color: #7A889C; }
.top-search > .icon { width: 18px; height: 18px; }
.top-search input { flex: 1; width: 100%; min-width: 0; min-height: 40px; padding: 8px 0; border: 0; outline: none; background: transparent; color: var(--ink); font-size: 14px; }
.top-search input::placeholder { color: #738096; }
.top-search input::-webkit-search-cancel-button { display: none; }
.top-search:focus-within { border-color: #8AA8EF; box-shadow: 0 0 0 2px #2457E60A; }
.top-search input:focus-visible { outline: none; }
.top-search #search-clear { width: 30px; min-width: 30px; min-height: 30px; padding: 6px; }
.top-actions { display: flex; align-items: center; gap: 15px; flex: none; margin-left: auto; }
.language-switch { display: flex; align-items: center; flex: none; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); }
.language-switch button { min-width: 40px; min-height: 32px; padding: 5px 9px; border: 0; border-radius: 5px; background: transparent; color: #637087; font-size: 14px; font-weight: 600; line-height: 1.5; }
.language-switch button[aria-pressed='true'] { background: #EEF3FE; color: var(--blue); }
.manage-link { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 8px 12px; border: 1px solid #DDE5F1; border-radius: 8px; background: var(--paper); color: #3D5375; font-size: 14px; line-height: 1.5; white-space: nowrap; }
.manage-link .icon { width: 17px; height: 17px; }
.explore-toolbar { position: sticky; z-index: 20; top: var(--topbar-height); padding: 22px 32px 0; background: #F6F7F9F5; backdrop-filter: blur(14px); }
.category-filters { display: flex; align-items: center; gap: 8px; padding: 0 0 16px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.category-filters::-webkit-scrollbar { display: none; }
.category-filters button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; flex: none; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #526176; font-size: 15px; font-weight: 500; line-height: 1.5; white-space: nowrap; transition: background .25s, color .25s, border-color .25s; }
.category-filters button.is-active, .category-filters button[aria-pressed='true'] { border-color: #DFE5EF; background: var(--paper); color: var(--ink); font-weight: 600; }
.category-count { color: #8390A4; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400; }
.gallery-subbar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 51px; padding-bottom: 12px; }
.scope-tabs { display: flex; align-items: center; gap: 22px; min-width: 0; }
.scope-tabs button { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 0; border: 0; background: transparent; color: #68768C; font-size: 14px; font-weight: 500; white-space: nowrap; }
.scope-tabs button.is-active, .scope-tabs button[aria-pressed='true'] { color: var(--ink); font-weight: 700; }
.scope-tabs button.is-active::after, .scope-tabs button[aria-pressed='true']::after { content: ''; position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: var(--blue); }
.scope-tabs .icon { width: 17px; height: 17px; }
.gallery-tools { display: flex; align-items: center; justify-content: flex-end; gap: 16px; min-width: 0; }
#video-results { margin: 0; color: #718096; font-size: 14px; white-space: nowrap; }
.gallery-tools select { min-width: 104px; max-width: 185px; min-height: 36px; padding: 6px 25px 6px 10px; border: 1px solid #E2E7EF; border-radius: 7px; background: var(--paper); color: #526176; font-size: 14px; }
.compact-context { display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 18px; max-height: 60px; padding: 0 0 15px; overflow: hidden; }
.compact-context h2, #demo-heading { margin: 0; color: #394B65; font-size: 15px; font-weight: 600; line-height: 1.8; letter-spacing: -.015em; }
.compact-context p, #demo-intro { margin: 0; color: #68768C; font-size: 14px; line-height: 1.8; }
.compact-context h2, .compact-context p { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compact-context br { display: none; }
.gallery-section { min-width: 0; padding: 0 32px 36px; }
.video-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 12px; row-gap: 16px; align-items: start; }
.video-card { position: relative; min-width: 0; overflow: hidden; border: 1px solid #E5E9F0; border-radius: 13px; background: var(--paper); transition: transform .45s var(--ease), border-color .35s, box-shadow .45s; }
.video-preview { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; padding: 0; overflow: hidden; border: 0; background: #E9EEF5; color: #FFFFFF; text-align: left; }
.video-preview > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; transition: transform .6s var(--ease); }
.gallery-hover-preview { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; opacity: 0; pointer-events: none; transition: opacity .3s; }
.gallery-hover-preview.is-ready { opacity: 1; }
.poster-fallback { display: grid; place-items: center; width: 100%; height: 100%; background: #E9EEF5; color: #91A1B8; }
.poster-fallback .icon { width: 36px; height: 36px; stroke-width: 1.4; }
.preview-shade { position: absolute; z-index: 2; inset: 0; background: linear-gradient(180deg, #14203900 40%, #14203938); pointer-events: none; }
.preview-play { position: absolute; z-index: 3; left: 13px; bottom: 13px; display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #FFFFFF80; border-radius: 50%; background: #FFFFFFD9; color: #263D60; pointer-events: none; transition: background .3s; }
.preview-play .icon { width: 16px; height: 16px; margin-left: 2px; }
.video-duration { position: absolute; z-index: 3; right: 12px; bottom: 13px; padding: 2px 6px; border: 1px solid #FFFFFF20; border-radius: 4px; background: #18273DA8; color: #FFFFFF; font-family: 'JetBrains Mono', monospace; font-size: 14px; line-height: 1.5; pointer-events: none; }
.featured-tag { position: absolute; z-index: 3; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px; border: 1px solid #FFFFFF70; border-radius: 5px; background: #FFFFFFEC; color: #3B5F9B; font-size: 14px; font-weight: 500; line-height: 1.5; pointer-events: none; }
.featured-tag .icon { width: 14px; height: 14px; }
.save-video { position: absolute; z-index: 5; top: 9px; right: 9px; display: grid; place-items: center; width: 36px; height: 36px; padding: 9px; border: 1px solid #FFFFFF90; border-radius: 9px; background: #FFFFFFED; color: #536984; transition: background .25s, color .25s; }
.save-video .icon { width: 18px; height: 18px; }
.save-video.is-saved, .save-video[aria-pressed='true'] { background: #EDF3FF; color: var(--blue); border-color: #D6E2FF; }
.save-video.is-saved .icon, .save-video[aria-pressed='true'] .icon { fill: #2457E61C; }
.video-card-copy { min-width: 0; padding: 13px 14px 14px; }
.video-card h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.55; letter-spacing: -.02em; overflow-wrap: anywhere; }
.card-open { display: -webkit-box; width: 100%; padding: 0; overflow: hidden; border: 0; background: transparent; color: var(--ink); font-size: inherit; font-weight: inherit; line-height: inherit; letter-spacing: inherit; text-align: left; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.video-card-meta { display: flex; align-items: center; gap: 6px; min-width: 0; margin-top: 9px; color: #66758C; font-size: 14px; line-height: 1.5; }
.publisher-mark { display: grid; place-items: center; flex: none; width: 18px; height: 18px; overflow: hidden; border: 1px solid #DAE4F8; border-radius: 5px; background: #EFF4FF; color: var(--blue); }
.publisher-mark .icon { width: 12px; height: 12px; }
.publisher-mark > img { width: 100%; height: 100%; }
.publisher-name { flex: none; color: #526176; font-size: 14px; font-weight: 500; }
.video-card-label { min-width: 0; margin-left: auto; overflow: hidden; color: #7A8699; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.video-skeleton { min-width: 0; overflow: hidden; padding-bottom: 17px; border: 1px solid #E5E9F0; border-radius: 13px; background: var(--paper); }
.video-skeleton > div { aspect-ratio: 16 / 10; background: #E9EDF4; }
.video-skeleton > i { display: block; width: 60%; height: 12px; margin: 16px 14px 0; border-radius: 3px; background: #E9EDF4; }
.video-skeleton > i:last-child { width: 38%; height: 10px; margin-top: 11px; }
.video-skeleton:empty::before { content: ''; display: block; aspect-ratio: 16 / 10; margin-bottom: 30px; background: #E9EDF4; }
.gallery-end { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 36px 0 0; color: #7B8799; font-size: 14px; text-align: center; }
.gallery-end::before, .gallery-end::after { content: ''; width: 36px; height: 1px; background: #DDE3ED; }
.gallery-end > p { margin: 0; }
.library-empty { display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 12px; min-height: 330px; padding: 40px 24px; border: 1px dashed #D4DEEC; border-radius: 13px; background: var(--paper); text-align: center; }
.empty-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 5px; border: 1px solid #DFE7F3; border-radius: 13px; background: #F4F7FC; color: #8A9CB7; }
.empty-icon .icon { width: 25px; height: 25px; }
.library-empty h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.03em; }
.library-empty p { max-width: 460px; margin: 0 0 7px; color: var(--muted); font-size: 15px; overflow-wrap: anywhere; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 16px; border: 1px solid transparent; border-radius: 8px; font-size: 14px; font-weight: 600; line-height: 1.5; }
.button-light { border-color: #DCE4F0; background: var(--paper); color: #405C85; }
.button-blue { background: var(--blue); color: #FFFFFF; }
.button .icon { width: 18px; height: 18px; }
.icon-button { display: grid; place-items: center; flex: none; min-width: 44px; min-height: 44px; padding: 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: #526176; }
.icon-button .icon { width: 20px; height: 20px; }
.video-dialog { width: min(1080px, calc(100vw - 64px)); max-height: calc(100dvh - 64px); margin: auto; padding: 0; overflow: auto; border: 1px solid #DEE5F0; border-radius: 17px; background: var(--paper); color: var(--ink); box-shadow: 0 25px 100px -20px #0A122E70; }
.video-dialog::backdrop { background: #111A2CC2; backdrop-filter: blur(5px); }
.video-dialog[open] { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 1fr); }
.dialog-media { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 460px; background: #0B0F16; }
#preview-player { display: block; width: 100%; height: min(680px, calc(100dvh - 66px)); min-height: 320px; max-height: 80dvh; background: #0B0F16; object-fit: contain; }
.dialog-detail { display: flex; flex-direction: column; min-width: 0; padding: 55px 28px 27px; }
.dialog-detail header, .dialog-heading { min-width: 0; }
.detail-eyebrow { display: block; margin-bottom: 19px; color: #8591A3; font-size: 14px; }
#dialog-video-category, .dialog-category { display: inline-block; margin: 0 0 12px; color: var(--blue); font-size: 14px; font-weight: 500; line-height: 1.6; }
#dialog-video-title { margin: 0; color: var(--ink); font-size: 25px; font-weight: 600; line-height: 1.5; letter-spacing: -.035em; overflow-wrap: anywhere; }
#dialog-video-description, .dialog-description { margin: 19px 0 0; color: #526176; font-size: 15px; line-height: 1.9; white-space: pre-line; overflow-wrap: anywhere; }
.dialog-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 15px; margin-top: 21px; color: #7A8799; font-size: 14px; }
.dialog-detail .video-card-meta { margin-top: 24px; }
.dialog-publisher { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; color: #526176; font-size: 14px; }
.publisher-official { color: #7C90B0; font-size: 14px; }
.dialog-video-meta { margin: 20px 0 28px; color: #7A8799; font-size: 14px; line-height: 1.8; }
.dialog-actions { display: flex; align-items: stretch; flex-direction: column; gap: 11px; margin-top: auto; padding-top: 32px; }
#dialog-save { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: auto; padding: 10px 14px; border: 1px solid #DCE5F3; border-radius: 8px; background: #F6F8FC; color: #42618F; font-size: 14px; font-weight: 500; }
#dialog-save .icon { width: 18px; height: 18px; }
#dialog-save.is-saved, #dialog-save[aria-pressed='true'] { border-color: #C8DAFF; background: #EFF4FF; color: var(--blue); }
.dialog-manage-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; color: #6C7C94; font-size: 14px; }
.dialog-manage-link .icon { width: 16px; height: 16px; }
.detail-home-link { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin-top: 10px; color: #6C7C94; font-size: 14px; }
.detail-home-link .icon { width: 16px; height: 16px; }
#video-dialog-close { position: absolute; z-index: 5; top: 10px; right: 10px; width: 38px; height: 38px; min-width: 44px; min-height: 44px; border: 1px solid #DFE6F1; background: #FFFFFFF0; color: #526176; }
.player-error { margin: 15px 0 0; color: #A83E4D; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.dialog-media .player-error { position: absolute; right: 18px; bottom: 15px; left: 18px; margin: 0; padding: 10px 12px; border-radius: 7px; background: #1B2332E8; color: #FFD8DD; }
.noscript-note { margin: 0; padding: 20px; background: #EDF3FF; color: var(--ink); font-size: 14px; text-align: center; }
@media (hover: hover) and (pointer: fine) {
  .explore-nav button:hover, .side-category:hover { background: #F2F5FB; color: #2457E6; }
  .category-filters button:not(.is-active):hover { background: #ECEFF5; color: var(--ink); }
  .manage-link:hover, .icon-button:hover, .button-light:hover { border-color: #C7D6EE; background: #F2F6FF; color: var(--blue); }
  .video-card:hover { transform: translateY(-2px); border-color: #C9D5E8; box-shadow: 0 7px 20px -16px #2C4F8555; }
  .video-preview:hover > img { transform: scale(1.02); }
  .video-preview:hover .preview-play { background: #FFFFFF; }
  .save-video:hover { background: #FFFFFF; color: var(--blue); }
  .card-open:hover { color: var(--blue); }
}
@media (min-width: 1700px) { .explore-topbar, .explore-toolbar { padding-inline: 40px; } .gallery-section { padding-inline: 40px; } }
@media (max-width: 1100px) {
  :root { --sidebar-width: 208px; }
  .explore-topbar { gap: 17px; padding-inline: 24px; }
  .top-search { width: min(100%, 330px); margin-left: 0; }
  .top-actions { gap: 9px; }
  .manage-link { padding-inline: 10px; }
  .explore-toolbar, .gallery-section { padding-inline: 24px; }
  .topbar-caption { display: none; }
  .video-card-copy { padding-inline: 12px; }
  .video-card-meta { flex-wrap: wrap; gap: 5px; }
  .video-card-label { flex-basis: 100%; margin: 0; padding-left: 23px; }
  .scope-tabs { gap: 18px; }
}
@media (min-width: 801px) and (max-width: 960px) {
  .explore-topbar { flex-wrap: wrap; gap: 12px; }
  .page-identity h1 { font-size: 20px; }
  .top-search { order: 3; width: 100%; }
  :root { --topbar-height: 122px; }
  .gallery-subbar { flex-wrap: wrap; gap: 8px; }
  .gallery-tools { margin-left: auto; gap: 9px; }
  .gallery-tools select { max-width: 135px; }
  .video-card h3 { font-size: 15px; }
}
@media (max-width: 800px) {
  :root { --sidebar-width: 0px; --topbar-height: 132px; }
  html { scroll-padding-top: 255px; }
  .explore-sidebar { display: none; }
  .explore-main { margin-left: 0; }
  .explore-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 13px 12px; min-height: var(--topbar-height); padding: 14px 20px; }
  .mobile-brand { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: 17px; }
  .mobile-brand .brand-mark, .mobile-brand > img { width: 32px; height: 32px; border-radius: 9px; }
  .mobile-brand .brand-mark .icon { width: 19px; height: 19px; }
  .mobile-brand small { display: none; }
  .mobile-home { display: grid; place-items: center; min-width: 36px; min-height: 40px; color: #657790; }
  .mobile-home .icon { width: 19px; height: 19px; }
  .page-identity { display: flex; gap: 9px; }
  .page-identity h1 { font-size: 18px; line-height: 1.4; }
  .top-search { grid-column: 1 / -1; grid-row: 2; width: 100%; min-height: 43px; margin: 0; border-radius: 8px; }
  .top-search input { min-height: 41px; font-size: 16px; }
  .top-actions { gap: 8px; }
  .language-switch { padding: 3px; }
  .language-switch button { min-width: 36px; min-height: 34px; padding: 6px 7px; font-size: 14px; }
  .manage-link { gap: 5px; min-height: 40px; padding: 8px 9px; font-size: 14px; }
  .manage-link .icon { width: 16px; height: 16px; }
  .explore-toolbar { padding: 17px 20px 0; }
  .category-filters { gap: 5px; margin-inline: -5px; padding: 0 5px 13px; }
  .category-filters button { min-height: 39px; padding-inline: 13px; font-size: 14px; }
  .gallery-subbar { min-height: 48px; gap: 10px; padding-bottom: 12px; }
  .scope-tabs { gap: 20px; }
  .scope-tabs button { min-height: 36px; font-size: 14px; }
  .gallery-tools { gap: 10px; }
  .gallery-tools select { min-width: 98px; max-width: 150px; padding-left: 8px; }
  #video-results { font-size: 14px; }
  .compact-context { gap: 4px 13px; padding: 0 0 14px; }
  .compact-context h2, #demo-heading { font-size: 14px; }
  .compact-context p, #demo-intro { font-size: 14px; }
  .compact-context #demo-intro { display: none; }
  .gallery-section { padding: 0 20px 30px; }
  .video-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 16px; }
  .video-card { border-radius: 12px; }
  .video-card-copy { padding: 12px 12px 13px; }
  .video-card h3 { font-size: 15px; }
  .video-card-meta { gap: 5px; margin-top: 8px; }
  .video-card-label { flex-basis: 100%; padding-left: 23px; }
  .preview-play { left: 10px; bottom: 10px; width: 30px; height: 30px; }
  .preview-play .icon { width: 14px; height: 14px; }
  .video-duration { right: 9px; bottom: 10px; padding: 2px 5px; font-size: 14px; }
  .save-video { top: 7px; right: 7px; width: 34px; height: 34px; padding: 8px; border-radius: 8px; }
  .featured-tag { left: 8px; top: 8px; padding: 2px 6px; font-size: 14px; }
  .featured-tag .icon { display: none; }
  .gallery-end { margin-top: 28px; }
  .video-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 14px; }
  .video-dialog[open] { display: block; }
  .dialog-media { min-height: 250px; }
  #preview-player { height: min(520px, 56dvh); min-height: 250px; max-height: 56dvh; }
  .dialog-detail { padding: 24px; }
  #dialog-video-title { padding-right: 0; font-size: 23px; }
  .dialog-description, #dialog-video-description { font-size: 15px; }
  .dialog-actions { gap: 10px; padding-top: 24px; }
  #video-dialog-close { top: 8px; right: 8px; border-color: #FFFFFF75; background: #FFFFFFE8; }
}
@media (max-width: 500px) {
  .explore-topbar { padding-inline: 16px; }
  .explore-toolbar { padding-inline: 16px; }
  .gallery-section { padding-inline: 16px; }
  .gallery-subbar { flex-wrap: wrap; gap: 7px; }
  .gallery-tools { flex: none; justify-content: space-between; width: 100%; padding-top: 2px; }
  .scope-tabs { gap: 24px; }
  .gallery-tools select { min-height: 34px; }
  .video-grid { column-gap: 10px; }
  .video-card-copy { padding: 11px 10px 12px; }
  .video-card-meta { column-gap: 5px; }
  .publisher-mark { width: 16px; height: 16px; border-radius: 4px; }
  .publisher-name { font-size: 14px; }
  .video-card-label { padding-left: 21px; }
  .save-video { width: 32px; height: 32px; padding: 7px; }
  .save-video .icon { width: 17px; height: 17px; }
  .preview-play { width: 27px; height: 27px; left: 8px; bottom: 8px; }
  .preview-play .icon { width: 13px; height: 13px; }
  .video-duration { bottom: 8px; right: 7px; font-size: 14px; }
  .library-empty { min-height: 310px; padding-inline: 20px; }
  .dialog-detail { padding: 23px 20px; }
  html[lang='en'] .manage-link { width: 40px; min-width: 40px; padding: 8px; }
  html[lang='en'] .manage-link > span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
}
@media (max-width: 380px) {
  .explore-topbar { column-gap: 7px; padding-inline: 14px; }
  .mobile-brand { gap: 6px; font-size: 15px; }
  .mobile-brand .brand-mark, .mobile-brand > img { width: 29px; height: 29px; }
  .top-actions { gap: 5px; }
  .manage-link { padding-inline: 7px; }
  .manage-link .icon { display: none; }
  html[lang='en'] .manage-link .icon { display: block; }
  .language-switch button { min-width: 32px; padding-inline: 5px; }
  .explore-toolbar, .gallery-section { padding-inline: 14px; }
  .video-grid { column-gap: 9px; }
  .video-card-copy { padding-inline: 9px; }
  .featured-tag { left: 6px; top: 7px; }
  .video-card h3 { font-size: 14px; }
  .publisher-name { letter-spacing: -.025em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .video-card:hover, .video-preview:hover > img { transform: none; }
  .gallery-hover-preview { display: none !important; }
}
html.motion-paused *, html.motion-paused *::before, html.motion-paused *::after, html.demo-motion-paused *, html.demo-motion-paused *::before, html.demo-motion-paused *::after { animation: none !important; transition: none !important; }
html.motion-paused .video-card:hover, html.motion-paused .video-preview:hover > img, html.demo-motion-paused .video-card:hover, html.demo-motion-paused .video-preview:hover > img { transform: none; }
html.motion-paused .gallery-hover-preview, html.demo-motion-paused .gallery-hover-preview { display: none !important; }

/* Workbook taxonomy: four business groups, their topics, and a separate format axis. */
html { scroll-padding-top: var(--browse-offset, 250px); }
.explore-toolbar { top: var(--actual-topbar-height, var(--topbar-height)); }
.taxonomy-tools { display: flex; align-items: center; gap: 16px; min-width: 0; min-height: 40px; padding-bottom: 10px; }
.subcategory-hint { flex: 1; margin: 0; color: #64748B; font-size: 14px; }
.subcategory-filters { display: flex; align-items: center; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: thin; overscroll-behavior-x: contain; }
.subcategory-filters button { flex: none; min-height: 34px; padding: 5px 10px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: #526176; font-size: 14px; white-space: nowrap; }
.subcategory-filters button.is-active { border-color: #CFDBF7; background: #EDF2FE; color: #2457E6; }
.format-filter { position: relative; flex: none; margin-left: auto; font-size: 14px; }
.format-filter > summary { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 5px 12px; border: 1px solid #DDE4EF; border-radius: 7px; background: #FFFFFF; color: #405777; cursor: pointer; list-style: none; }
.format-filter > summary::-webkit-details-marker { display: none; }
.format-filter > summary .icon { width: 17px; height: 17px; }
.filter-chevron { width: 6px; height: 6px; margin-left: 4px; transform: rotate(45deg) translateY(-2px); border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; }
.format-filter[open] > summary, .format-filter.has-selection > summary { border-color: #AAC1F4; color: #2457E6; background: #F6F8FF; }
.format-filter[open] .filter-chevron { transform: rotate(225deg) translate(-1px, -1px); }
.format-filter-panel { position: absolute; z-index: 40; top: calc(100% + 8px); right: 0; width: min(540px, calc(100vw - 40px)); max-height: min(55dvh, 450px); padding: 18px 20px; overflow-y: auto; border: 1px solid #DDE5F1; border-radius: 12px; background: #FFFFFF; box-shadow: 0 16px 46px #21385D21; overscroll-behavior: contain; }
.format-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.format-panel-heading strong { font-size: 15px; font-weight: 600; }
.format-panel-heading button { min-height: 32px; padding: 3px 0; border: 0; background: transparent; color: #2457E6; font-size: 14px; }
.format-filter-panel > p { margin: 5px 0 18px; color: #64748B; font-size: 14px; line-height: 1.7; }
#video-formats fieldset { min-width: 0; margin: 0; padding: 14px 0; border: 0; border-top: 1px solid #ECF0F5; }
#video-formats legend { padding: 0 8px 0 0; color: #526176; font-weight: 600; }
#video-formats fieldset > div { display: flex; flex-wrap: wrap; gap: 8px 9px; }
#video-formats label { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 5px 9px; border: 1px solid #E0E6F0; border-radius: 6px; color: #405777; cursor: pointer; line-height: 1.5; }
#video-formats label:has(input:checked) { border-color: #ABC2F3; background: #EFF4FF; color: #2457E6; }
#video-formats input { flex: none; width: 15px; height: 15px; margin: 0; accent-color: #2457E6; }
.dialog-video-formats { margin: 15px 0 0; color: #4069AA; font-size: 14px; }
.dialog-video-formats:empty { display: none; }
@media (max-width: 800px) {
  .taxonomy-tools { gap: 9px; }
  .subcategory-filters { padding-bottom: 3px; }
  .subcategory-filters button { padding-inline: 9px; }
  .format-filter > summary { gap: 6px; padding-inline: 9px; }
  .format-filter > summary .icon { display: none; }
  .format-filter-panel { width: min(480px, calc(100vw - 40px)); padding: 16px; max-height: 48dvh; }
}
@media (max-width: 500px) {
  .taxonomy-tools { flex-wrap: wrap; gap: 7px; }
  .subcategory-filters { flex-basis: 100%; order: 0; }
  .format-filter { order: 1; }
  .subcategory-hint { font-size: 14px; }
  .format-filter-panel { width: calc(100vw - 32px); }
}

/* V35: the workbook's coverage topics are selectable children of each category. */
.taxonomy-hierarchy { display:grid; gap:6px; padding-bottom:9px; }
.taxonomy-level { display:flex; align-items:flex-start; gap:13px; min-width:0; min-height:40px; }
.taxonomy-level-label { flex:0 0 78px; padding-top:8px; color:#526176; font-size:14px; font-weight:600; line-height:1.6; }
.taxonomy-level > .subcategory-hint { align-self:center; line-height:1.7; }
.taxonomy-level .category-filters { flex:1; min-width:0; margin:0; padding:0; gap:6px; flex-wrap:wrap; overflow:visible; }
.taxonomy-level .category-filters button { min-height:36px; padding:6px 12px; font-size:14px; }
.hierarchy-options { display:flex; flex:1; flex-wrap:wrap; align-items:center; gap:5px; min-width:0; overflow:visible; }
.hierarchy-options button { flex:none; min-height:36px; max-width:100%; padding:6px 11px; border:1px solid transparent; border-radius:6px; background:transparent; color:#405777; font-size:14px; line-height:1.6; text-align:left; white-space:normal; overflow-wrap:anywhere; }
.hierarchy-options button:hover { background:#F0F3F9; }
.hierarchy-options button.is-active { border-color:#BDD0F6; background:#EDF2FE; color:#2457E6; }
.taxonomy-extras { min-height:36px; padding-top:5px; border-top:1px solid #E8EDF4; }
.taxonomy-path { flex:1; min-width:0; margin:0; color:#405777; font-size:14px; line-height:1.8; overflow-wrap:anywhere; }
.taxonomy-extras .format-filter { order:initial; }
html[lang='en'] .taxonomy-level-label { flex-basis:105px; }
@media (max-width:800px) {
  .explore-toolbar { position:static; }
  .taxonomy-hierarchy { gap:7px; }
  .taxonomy-level { gap:9px; }
  .taxonomy-level-label { flex-basis:60px; font-size:14px; }
  .taxonomy-level .category-filters { gap:4px; }
  .taxonomy-level .category-filters button { min-height:38px; padding:6px 9px; }
  .hierarchy-options { gap:3px 4px; }
  .hierarchy-options button { min-height:38px; padding:6px 9px; }
  .taxonomy-extras { align-items:center; flex-wrap:wrap; gap:7px; }
  .taxonomy-path { flex-basis:100%; }
  html[lang='en'] .taxonomy-level { display:block; }
  html[lang='en'] .taxonomy-level-label { display:block; padding:0 0 3px; font-size:13px; }
}