#film-viewer {
  position: fixed; inset: 0; width: 100%; max-width: none;
  height: 100%; height: 100dvh; max-height: none; margin: 0; padding: 0;
  border: 0; color: #f6f6f6; background: #08090b;
  font-family: Geist, sans-serif; color-scheme: dark; overflow: hidden;
}
#film-viewer::backdrop { background: #08090b; }
#film-viewer[open] { --fv-sidebar: 0px; display: grid; grid-template-columns: minmax(0,1fr) var(--fv-sidebar); grid-template-rows: minmax(0,1fr) auto; }
#film-viewer.has-details { --fv-sidebar: min(400px,44vw); }
#film-viewer button { font: inherit; cursor: pointer; touch-action: manipulation; }
#film-viewer button:focus-visible { outline: 2px solid #19e6e6; outline-offset: 4px; }
#film-viewer .fv-close, #film-viewer .fv-arrow {
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0;
  flex-shrink: 0; border: 1px solid #ffffff26; border-radius: 50%;
  background: #181a1e; color: #f6f6f6; transition: background .18s;
}
#film-viewer .fv-close:hover, #film-viewer .fv-arrow:hover { background: #30343a; }
#film-viewer .fv-arrow { position: absolute; right: calc(var(--fv-sidebar) + 16px); z-index: 2; border: 0; background: transparent; }
#film-viewer .fv-prev { top: calc(50% - 52px); }
#film-viewer .fv-next { top: calc(50% + 4px); }
#film-viewer svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; }
#film-viewer .fv-close { position: absolute; top: max(16px,env(safe-area-inset-top)); right: calc(var(--fv-sidebar) + 20px); z-index: 2; width: 40px; height: 40px; }
#film-viewer .fv-stage { grid-column: 1; grid-row: 1; min-height: 0; min-width: 0; padding: 76px 88px 12px; }
#film-viewer .fv-frame { height: 100%; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center; position: relative; }
#film-viewer video { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 12px; }
#film-viewer .fv-status { position: absolute; top: 16px; left: 50%; transform: translateX(-50%); color: #f6f6f6; font-size: 14px; padding: 8px 12px; background: #181a1e; border-radius: 8px; text-align: center; }
#film-viewer [hidden] { display: none !important; }
#film-viewer .fv-footer { grid-column: 1; grid-row: 2; min-width: 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 16px 92px max(20px,env(safe-area-inset-bottom)); }
#film-viewer .fv-count { color: #b5bac3; font-size: 13px; font-variant-numeric: tabular-nums; }
#film-viewer .fv-toggle { position: absolute; right: calc(var(--fv-sidebar) + 18px); bottom: max(18px,env(safe-area-inset-bottom)); z-index: 4; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; color: #f6f6f6; background: #181a1e; border: 1px solid #ffffff26; border-radius: 50%; }
#film-viewer .fv-toggle:hover { background: #30343a; }
#film-viewer .fv-toggle[aria-expanded="true"] { color: #19e6e6; }
#film-viewer .fv-hint { justify-self: end; color: #b5bac3; font-size: 12px; }
#film-viewer .fv-details { grid-column: 2; grid-row: 1 / 3; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 32px 24px 28px; border-left: 1px solid #ffffff1f; background: #101216; scrollbar-color: #535963 #101216; }
#film-viewer .fv-title { margin: 0 0 10px; font-size: 22px; font-weight: 500; letter-spacing: -.02em; }
#film-viewer .fv-description { margin: 0; color: #b5bac3; font-size: 14px; line-height: 1.6; }
#film-viewer .fv-meta { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 0; font-size: 13px; color: #b5bac3; }
#film-viewer .fv-meta div { display: flex; gap: 8px; }
#film-viewer .fv-meta dt, #film-viewer .fv-meta dd { margin: 0; }
#film-viewer .fv-meta dd { color: #f6f6f6; font-variant-numeric: tabular-nums; }
body.film-viewer-open { overflow: hidden !important; }
body.film-viewer-open .bv-marquee-track { animation-play-state: paused !important; }
#workflow .bv-card[role="button"] { cursor: pointer; }
#workflow .bv-card[role="button"]:focus-visible { outline: 3px solid #19e6e6; outline-offset: -3px; }
#workflow .bv-marquee-track:focus-within { animation-play-state: paused; }
@media (max-width: 640px) {
  #film-viewer.has-details { --fv-sidebar: min(300px,calc(100vw - 72px)); }
  #film-viewer[open] { grid-template-columns: minmax(0,1fr); }
  #film-viewer .fv-stage { padding: 76px 64px 4px 8px; }
  #film-viewer .fv-arrow { right: calc(var(--fv-sidebar) + 8px); }
  #film-viewer .fv-close { right: calc(var(--fv-sidebar) + 12px); }
  #film-viewer .fv-footer { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px max(20px,env(safe-area-inset-bottom)); position: relative; z-index: 3; background: #08090b; }
  #film-viewer .fv-count { font-size: 12px; }
  #film-viewer .fv-toggle { position: fixed; right: 14px; bottom: max(16px,env(safe-area-inset-bottom)); padding: 0; }
  #film-viewer .fv-hint { display: none; }
  #film-viewer .fv-details { position: absolute; right: 0; top: 0; bottom: 96px; width: var(--fv-sidebar); padding: 28px 20px 24px; z-index: 1; }
  #film-viewer.has-details .fv-frame { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) { #film-viewer button { transition: none; } }

#film-viewer .fv-creator { display:flex; align-items:center; gap:12px; }
#film-viewer .fv-avatar { display:grid; place-items:center; flex-shrink:0; width:40px; height:40px; border-radius:50%; background:#34373d; }
#film-viewer .fv-avatar svg { width:28px; height:28px; }
#film-viewer .fv-creator-name { display:flex; flex-direction:column; gap:3px; font-size:14px; }
#film-viewer .fv-creator-name strong { font-weight:500; }
#film-viewer .fv-profile-likes { color:#a8adb7; font-size:13px; }
#film-viewer .fv-profile-actions { display:flex; flex-wrap:wrap; gap:8px; padding:18px 0 22px; margin-bottom:22px; border-bottom:1px solid #ffffff1f; }
#film-viewer .fv-profile-actions button { min-height:36px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:6px 12px; border-radius:20px; border:1px solid #ffffff26; color:#f6f6f6; background:transparent; font-size:12px; }
#film-viewer .fv-profile-actions svg { width:16px; height:16px; }
#film-viewer .fv-profile-actions .fv-follow { color:#101216; background:#f4f6f9; border-color:#f4f6f9; }
#film-viewer .fv-profile-actions .fv-follow[aria-pressed="true"] { color:#19e6e6; background:#14292c; border-color:#245457; }
#film-viewer .fv-title-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:18px; }
#film-viewer .fv-title-row .fv-title { margin:0; font-size:16px; flex:1; }
#film-viewer .fv-social { display:flex; gap:2px; align-items:center; }
#film-viewer .fv-social button { display:inline-flex; align-items:center; justify-content:center; gap:4px; min-width:32px; height:36px; padding:4px; border:0; background:transparent; color:#a8adb7; font-size:12px; border-radius:6px; }
#film-viewer .fv-social svg { width:18px; height:18px; }
#film-viewer .fv-social button:hover { color:#fff; background:#ffffff0d; }
#film-viewer .fv-social button[aria-pressed="true"] { color:#19e6e6; }
#film-viewer .fv-social button[aria-pressed="true"] svg { fill:#19e6e633; }
#film-viewer .fv-more svg { stroke-width:4; }
#film-viewer .fv-category { color:#a8adb7; font-size:12px; line-height:1.6; margin:14px 0 0; }
#film-viewer .fv-demo-note { margin:24px 0 0; font-size:11px; color:#a8adb7; }
#film-viewer .fv-menu { padding:6px; margin-bottom:16px; background:#1b1e24; border-radius:8px; }
#film-viewer .fv-menu button { display:block; padding:10px; width:100%; border:0; color:#f6f6f6; background:transparent; text-align:left; font-size:13px; }
#film-viewer .fv-menu button:hover { background:#30343a; }
#film-viewer .fv-feedback { margin:18px 0 0; padding:12px; font-size:12px; line-height:1.5; border-radius:8px; background:#1b1e24; color:#d3d7df; }