:root {
  --media-bg: #050608;
  --media-panel: #08090c;
  --media-line: #1c2430;
  --media-text: #c8d0d8;
  --media-dim: #697581;
  --media-cyan: #3dffd2;
  --media-magenta: #ff2d95;
  --media-mono: ui-monospace, Menlo, Consolas, monospace;
}

body[data-media-page] { background: var(--media-bg); color: var(--media-text); }
body[data-media-page]::before { display: none; }
body[data-media-page] [hidden] { display: none !important; }
.media-header { background: var(--media-bg); border-bottom: 1px solid var(--media-line); }
.media-header .topbar { background: rgba(5,6,8,.97); }
.media-header .topbar a, .media-header .theme-control { color: var(--media-text); }
.media-header .nav-menu-toggle { border-color: var(--media-line); color: var(--media-text); }

.media-page { width: 100%; margin: 0; padding: 0 8px 68px; font-family: var(--media-mono); }
.media-stage, .media-player-set { width: 100%; margin: 0; }
.media-player-set { background: var(--media-panel); }
.media-player { position: relative; width: 100%; height: calc(100dvh - var(--nav-height,64px) - 86px); min-height: 360px; overflow: hidden; border: 1px solid var(--media-line); background: #000; }
.media-player video { display: block; width: 100%; height: 100%; object-fit: contain; background: #000; }
.player-message { position: absolute; inset: auto 12px 12px; padding: 9px 11px; border: 1px solid var(--media-line); background: rgba(0,0,0,.88); color: var(--media-text); font-size: 11px; }

.media-caption { min-height: 78px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 14px 16px; border: 1px solid var(--media-line); border-top: 0; background: rgba(8,9,12,.78); }
.media-caption-copy { min-width: 0; max-width: 980px; }
.media-caption h1 { margin: 0; color: var(--media-text); font: 500 clamp(18px,2.3vw,28px)/1.12 var(--media-mono); letter-spacing: -.035em; }
.media-summary { max-width: 900px; margin: 9px 0 0; color: var(--media-text); font-size: 13px; line-height: 1.5; }
.media-description { max-width: 900px; margin-top: 9px; color: var(--media-dim); font-size: 12px; line-height: 1.62; }
.media-description p { margin: 0 0 8px; color: inherit; }
.category-link { appearance: none; margin: 0 0 9px; padding: 0; border: 0; background: transparent; color: var(--media-cyan); font: 500 9px/1 var(--media-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.category-link:hover, .category-link:focus-visible { color: var(--media-magenta); outline: none; }
.bezel-button { flex: 0 0 auto; appearance: none; padding: 8px 10px; border: 1px solid var(--media-line); background: transparent; color: var(--media-text); font: 500 9px/1 var(--media-mono); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; }
.bezel-button:hover, .bezel-button:focus-visible { border-color: var(--media-cyan); color: var(--media-cyan); outline: none; }

.fullscreen-nav, .fullscreen-bezel { display: none; }
.media-player-set:fullscreen, .media-player-set:-webkit-full-screen { width: 100vw; height: 100vh; display: flex; flex-direction: column; padding: 7px; overflow: hidden; background: var(--media-panel); }
.media-player-set:fullscreen .fullscreen-nav, .media-player-set:-webkit-full-screen .fullscreen-nav { flex: 0 0 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; min-width: 0; padding: 3px 5px; border: 1px solid var(--media-line); border-bottom: 0; font: 500 8px/1 var(--media-mono); letter-spacing: .08em; }
.fullscreen-nav a { color: var(--media-dim); text-decoration: none; white-space: nowrap; }
.fullscreen-nav a:hover, .fullscreen-nav a:focus-visible { color: var(--media-cyan); outline: none; }
.fullscreen-nav .fullscreen-brand { color: var(--media-cyan); letter-spacing: .13em; text-transform: uppercase; }
.fullscreen-nav div { display: flex; align-items: center; justify-content: flex-end; gap: clamp(8px,1.8vw,22px); min-width: 0; overflow: hidden; }
.media-player-set:fullscreen .media-player, .media-player-set:-webkit-full-screen .media-player { flex: 1 1 auto; height: auto; min-height: 0; }
.media-player-set:fullscreen .media-caption, .media-player-set:-webkit-full-screen .media-caption { display: none; }
.media-player-set:fullscreen .fullscreen-bezel, .media-player-set:-webkit-full-screen .fullscreen-bezel { flex: 0 0 31px; display: grid; grid-template-columns: minmax(100px,auto) minmax(0,1fr) auto; align-items: stretch; border: 1px solid var(--media-line); border-top: 0; overflow: hidden; }
.fullscreen-bezel > strong { display: flex; align-items: center; max-width: 28vw; padding: 0 9px; overflow: hidden; color: var(--media-text); font: 500 9px/1 var(--media-mono); letter-spacing: .05em; text-overflow: ellipsis; white-space: nowrap; }
.fullscreen-exit { border-width: 0 0 0 1px; }
.media-ticker { min-width: 0; overflow: hidden; border-left: 1px solid var(--media-line); background: rgba(8,9,12,.62); white-space: nowrap; }
.media-ticker-track { display: inline-flex; align-items: stretch; width: max-content; height: 100%; animation: media-ticker-scroll 110s linear infinite; }
.media-ticker:hover .media-ticker-track, .media-ticker:focus-within .media-ticker-track { animation-play-state: paused; }
.media-ticker button { appearance: none; padding: 0 10px; border: 0; border-right: 1px solid var(--media-line); background: transparent; color: var(--media-dim); font: 500 8px/1 var(--media-mono); letter-spacing: .07em; cursor: pointer; }
.media-ticker button:hover, .media-ticker button:focus-visible { color: var(--media-cyan); background: rgba(61,255,210,.08); outline: none; }
.media-ticker button.active { color: var(--media-magenta); background: rgba(255,45,149,.1); }
@keyframes media-ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-33.333%); } }
@media (prefers-reduced-motion: reduce) { .media-ticker-track { animation: none; } }
video::-webkit-media-controls-fullscreen-button { display: none; }

.category-panel { width: min(1160px,100%); margin: 34px auto 0; padding: 16px 0 4px; border-top: 1px solid var(--media-line); }
.category-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.category-panel h2 { margin: 0 0 9px; color: var(--media-text); font: 500 clamp(17px,2vw,24px)/1.1 var(--media-mono); letter-spacing: -.03em; }
.category-panel-head p { max-width: 850px; margin: 0 0 18px; color: var(--media-dim); font-size: 11px; line-height: 1.6; }
.category-close { appearance: none; padding: 3px; border: 0; background: transparent; color: var(--media-dim); font: 500 9px/1 var(--media-mono); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.category-close:hover { color: var(--media-cyan); }
.category-columns { display: grid; grid-template-columns: minmax(0,1fr) minmax(280px,.7fr); gap: 30px; }
.category-label { display: block; margin-bottom: 7px; color: var(--media-cyan); font-size: 8px; letter-spacing: .15em; text-transform: uppercase; }
.category-media-link, .category-work { display: block; padding: 8px 2px; border-top: 1px solid var(--media-line); color: var(--media-text); font-size: 11px; line-height: 1.35; text-decoration: none; }
.category-media-link:hover, .category-work:hover { color: var(--media-cyan); }
.category-work small { display: block; margin-top: 3px; color: var(--media-dim); font-size: 9px; }

.media-catalog { width: min(1320px,100%); margin: 46px auto 0; border-top: 1px solid var(--media-line); overflow-x: auto; }
.media-list { min-width: 720px; }
.media-row { display: grid; grid-template-columns: minmax(120px,170px) minmax(240px,.8fr) minmax(320px,1.45fr); align-items: center; min-height: 46px; border-bottom: 1px solid var(--media-line); color: var(--media-text); text-decoration: none; }
.media-row:hover, .media-row:focus-within { background: var(--media-panel); }
.media-row-category { appearance: none; align-self: stretch; overflow: hidden; padding: 0 11px; border: 0; border-right: 1px solid var(--media-line); background: transparent; color: var(--media-cyan); font: 500 8px/1 var(--media-mono); letter-spacing: .11em; text-align: left; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; cursor: pointer; }
.media-row-category:hover, .media-row-category:focus-visible { color: var(--media-magenta); outline: none; }
.media-row-link { display: contents; color: inherit; text-decoration: none; }
.media-row-title, .media-row-summary { min-width: 0; overflow: hidden; padding: 0 12px; text-overflow: ellipsis; white-space: nowrap; }
.media-row-title { color: var(--media-text); font-size: 12px; }
.media-row-summary { border-left: 1px solid var(--media-line); color: var(--media-dim); font-size: 10px; }
.media-row-link:hover .media-row-title { color: var(--media-cyan); }

.stream-trace { color: #3d4853 !important; font: 500 8px/1.3 var(--media-mono); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.stream-trace:hover, .stream-trace:focus-visible { color: var(--media-cyan); outline: none; }
.media-loading, .media-error { min-height: calc(100dvh - 180px); display: grid; place-content: center; text-align: center; color: var(--media-dim); }
.media-error h1 { color: var(--media-text); }
.media-error a { color: var(--media-cyan); }
body[data-media-page] .site-footer { margin-top: 0; border-color: var(--media-line); background: var(--media-bg); color: var(--media-dim); }
body[data-media-page] .site-footer a { color: var(--media-cyan); }

@media (max-width: 760px) {
  .media-player { height: auto; min-height: 0; aspect-ratio: 16/9; }
  .category-columns { grid-template-columns: 1fr; gap: 22px; }
}
@media (max-width: 560px) {
  .media-page { padding-left: 4px; padding-right: 4px; }
  .media-caption { padding: 12px; gap: 12px; }
  .media-player-set:fullscreen .fullscreen-nav, .media-player-set:-webkit-full-screen .fullscreen-nav { font-size: 7px; }
  .fullscreen-nav div { gap: 8px; overflow-x: auto; scrollbar-width: none; }
  .fullscreen-bezel > strong { max-width: 34vw; padding: 0 6px; font-size: 8px; }
}