/*
 * Vidi brand layer for signed-in pages (home and Video Motion), matching the public landing page.
 * A page opts in with <html data-vidi-appearance="brand">: app_appearance.py then leaves it alone,
 * and the shared shell takes the brand tokens below. Page content uses the scoped .vb classes.
 */
:root[data-vidi-appearance="brand"]:is([data-theme], :not([data-theme])) {
  color-scheme: dark;
  --vb-ink: #22242b; --vb-ink-2: #292b34; --vb-ink-3: #363842; --vb-ink-4: #1b1c22;
  --vb-paper: #f7f4f7; --vb-paper-2: #e2dbe4;
  --vb-hi: #ff83a8; --vb-hi-ink: #29121c; --vb-hi-tint: #3a2731; --vb-pen: #a52651; --vb-teal: #e6a7c0;
  --vb-muted: #c4bec9; --vb-muted-light: #5b5448; --vb-line: #3c3e48;
  --vb-display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --vb-body: "Familjen Grotesk", "Helvetica Neue", Arial, sans-serif;
  --vb-mono: "Martian Mono", ui-monospace, Consolas, monospace;
  --vb-pen-font: "Nanum Pen Script", "Segoe Print", cursive;
  --vb-raised: 10px 10px 25px #121318, -6px -6px 18px #30333c;
  /* The shared app shell reads these. */
  --v-bg: var(--vb-ink); --v-surface: var(--vb-ink-2); --v-sunk: var(--vb-ink-4);
  --v-ink: var(--vb-paper); --v-ink-2: var(--vb-muted); --v-ink-3: #a39dab;
  --v-line: var(--vb-ink-3); --v-line-strong: #55535f;
  --v-accent: var(--vb-hi); --v-accent-strong: #ffa5bf; --v-accent-text: #ff9fbc;
  --v-accent-tint: var(--vb-hi-tint); --v-focus: var(--vb-hi); --action-ink: var(--vb-hi-ink);
  --v-font: var(--vb-body); --v-mono: var(--vb-mono); --v-radius: 12px;
}
[data-vidi-appearance="brand"] body { background: var(--vb-ink); color: var(--vb-paper); }

/* Shared shell, in the landing's voice */
[data-vidi-appearance="brand"] .vidi-global-shell { background: #22242bf5; border-bottom-color: var(--vb-ink-3); }
[data-vidi-appearance="brand"] .vidi-shell-brand span { font: 900 25px/1 var(--vb-display); letter-spacing: .06em; text-transform: uppercase; }
[data-vidi-appearance="brand"] .vidi-shell-nav > a, [data-vidi-appearance="brand"] .vidi-menu > summary { color: var(--vb-muted); }
[data-vidi-appearance="brand"] .vidi-shell-nav > a[aria-current], [data-vidi-appearance="brand"] .vidi-menu > summary[aria-current] { color: var(--vb-paper); }
[data-vidi-appearance="brand"] :is(.vidi-create, .vidi-subscribe) { border-radius: 99px; background: var(--vb-hi); border-color: var(--vb-hi); color: var(--vb-hi-ink); font-weight: 600; }
[data-vidi-appearance="brand"] .vidi-balance { border-radius: 99px; font-family: var(--vb-mono); font-size: 12px; letter-spacing: .04em; }
[data-vidi-appearance="brand"] .vidi-menu-panel { border-radius: 16px; background: var(--vb-ink-2); }

/* Page primitives, scoped to .vb so the shell and other pages keep their own rules.
   Element resets use :where() so any page rule can override them. */
.vb { font: 400 17px/1.55 var(--vb-body); color: var(--vb-paper); -webkit-text-size-adjust: 100%; }
:where(.vb) *, :where(.vb) *::before, :where(.vb) *::after { box-sizing: border-box; }
.vb [hidden] { display: none !important; }
:where(.vb) :where(img, video) { display: block; max-width: 100%; }
:where(.vb) a { color: inherit; }
:where(.vb) :where(button, input, textarea, select) { font: inherit; color: inherit; }
:where(.vb) button { cursor: pointer; }
:where(.vb) :where(h1, h2, h3) { margin: 0; font-family: var(--vb-display); font-weight: 900; line-height: .92; letter-spacing: .005em; text-transform: uppercase; text-wrap: balance; }
:where(.vb) p { margin: 0; }
.vb :focus-visible { outline: 3px solid var(--vb-hi); outline-offset: 3px; }
.vb .wrap { width: 100%; max-width: 1280px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 48px); }
.vb .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; }
.vb .label, .vb .kicker, .vb .slate-line { font-family: var(--vb-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.vb .label { color: var(--vb-muted); }
.vb .kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--vb-hi); }
.vb .kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; }
.vb .slate-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--vb-muted); }
.vb .slate-sep { color: var(--vb-ink-3); }
.vb .rec { width: 10px; height: 10px; background: var(--vb-hi); animation: vb-blink 1.2s steps(2, jump-none) infinite; }
.vb .hl { position: relative; z-index: 0; color: var(--vb-ink); white-space: nowrap; }
.vb .hl::before { content: ""; position: absolute; z-index: -1; inset: .06em -.1em 0 -.1em; background: var(--vb-hi); transform: skewX(-8deg); }
.vb .grid-bg { background: linear-gradient(var(--vb-ink-2) 1px, transparent 1px) 0 0 / 100% 48px, linear-gradient(90deg, var(--vb-ink-2) 1px, transparent 1px) 0 0 / 48px 100%, var(--vb-ink); }

.vb .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 22px; border: 2px solid var(--vb-hi); border-radius: 18px; background: transparent; color: var(--vb-paper); font: 600 16px/1 var(--vb-body); text-decoration: none; white-space: nowrap; box-shadow: 8px 8px 22px #121318aa, -4px -4px 14px #3b3e4855; transition: background-color .15s, color .15s, border-color .15s; }
.vb .btn span { transition: transform .15s; }
.vb .btn:hover span { transform: translateX(4px); }
.vb .btn-hi { background: var(--vb-hi); color: var(--vb-hi-ink); }
.vb .btn-hi:hover { background: var(--vb-paper); border-color: var(--vb-paper); }
.vb .btn-ghost { border-color: var(--vb-ink-3); background: #ffffff0d; }
.vb .btn-ghost:hover { border-color: var(--vb-hi); }
.vb .btn-small { padding: 10px 14px; font-size: 14px; }
.vb .text-link { font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.vb .text-link:hover { color: var(--vb-hi); }

.vb .sheet-paper { background: var(--vb-paper); color: var(--vb-ink); }
.vb .sheet-paper .kicker { color: var(--vb-pen); }
.vb .sheet-paper :focus-visible { outline-color: var(--vb-pen); }
.vb .section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.vb .section-head h2 { font-size: clamp(48px, 7vw, 96px); }
.vb .section-head-split { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: end; }
.vb .section-lede { max-width: 36em; font-size: 18px; color: var(--vb-muted-light); }

.vb .ticker { display: flex; overflow: hidden; background: var(--vb-hi); color: var(--vb-ink); border-block: 2px solid var(--vb-ink); }
.vb .ticker ul { display: flex; flex-shrink: 0; margin: 0; padding: 0; list-style: none; animation: vb-ticker 40s linear infinite; }
.vb .ticker li { padding: 14px 0; font: 900 clamp(22px, 2.6vw, 32px)/1 var(--vb-display); text-transform: uppercase; white-space: nowrap; }
.vb .ticker li::after { content: "/"; margin: 0 .7em; color: var(--vb-pen); }

.vb .closing { position: relative; background: var(--vb-ink); padding-bottom: clamp(64px, 8vw, 112px); }
.vb .clapper { height: 44px; margin-bottom: clamp(56px, 7vw, 96px); background: repeating-linear-gradient(-55deg, var(--vb-paper) 0 34px, var(--vb-ink) 34px 68px); border-bottom: 2px solid var(--vb-paper); }
.vb .closing-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 40px; align-items: end; }
.vb .closing h2 { font-size: clamp(52px, 7.4vw, 108px); line-height: .9; }
.vb .closing .slate-line { margin-bottom: 22px; }

@keyframes vb-blink { 50% { opacity: 0; } }
@keyframes vb-ticker { to { transform: translateX(-100%); } }
@media (max-width: 1020px) {
  .vb .section-head-split, .vb .closing-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .vb *, .vb *::before, .vb *::after { animation: none !important; transition: none !important; }
  .vb .ticker { overflow-x: auto; }
}