/* VideoIntros.com Developer Center. Its own stylesheet (nothing here touches the marketing pages). The Video Intros
   system: Sora, Deep / Ultraviolet / Lavender / Haze. A light reading surface, Deep for the header, the hero and
   code. No inline styles anywhere (the site's CSP forbids them). */
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 400; font-display: swap; src: url('/assets/video-intros/brand/fonts/sora-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 500; font-display: swap; src: url('/assets/video-intros/brand/fonts/sora-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Sora'; font-style: normal; font-weight: 600; font-display: swap; src: url('/assets/video-intros/brand/fonts/sora-latin-600-normal.woff2') format('woff2'); }
:root {
  --uv: #5236FF; --uv-2: #3F25E6; --lav: #A99BFF; --deep: #0E0B2A; --deep-2: #17123F;
  --accent: #5236FF; --accent-2: #3F25E6; --haze: #F1EFFF; --ground: #FBFAFE; --card: #FFFFFF; --card-2: #F7F6FC; --chip: #EFEDF6; --block: #0E0B2A;
  --ink: #0E0B2A; --text: #3A3756; --muted: #615D7E; --line: #E7E4F3; --line-2: #D6D1EC;
  --ok: #14784E; --ok-bg: #E4F6EC; --ok-line: #BFE6D2; --warn: #8A5600; --warn-bg: #FFF2D9; --warn-line: #D99100; --bad: #B4213A; --bad-bg: #FDE9EC; --bad-line: #F3C7CF;
  --code-bg: #0E0B2A; --code-bar: #17123F; --code-line: rgba(14, 11, 42, .9); --shadow: rgba(14, 11, 42, .28);
  color-scheme: light;
  --font: 'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
  --ease: cubic-bezier(0.25, 1, 0.5, 1); --top: 60px; --navw: 276px; --gut: clamp(18px, 4vw, 44px);
}
/* DARK. The reader's choice (the toggle, remembered: dev-theme.js sets data-theme before the page paints) or, with no
   choice made and no script, their system's. The same tokens, on Deep: only these values change. */
:root[data-theme="dark"] {
  --accent: #B9AEFF; --accent-2: #D5CEFF; --haze: rgba(169, 155, 255, .14); --ground: #0E0B2A; --card: #15113B; --card-2: #1A1548; --chip: rgba(169, 155, 255, .16); --block: #1A1548;
  --ink: #FFFFFF; --text: #C9C3F0; --muted: #9C95CC; --line: rgba(169, 155, 255, .2); --line-2: rgba(169, 155, 255, .36);
  --ok: #6FE0AC; --ok-bg: rgba(31, 169, 113, .2); --ok-line: rgba(111, 224, 172, .4); --warn: #FFC98A; --warn-bg: rgba(255, 190, 110, .16); --warn-line: #E0A040; --bad: #FF9AAE; --bad-bg: rgba(255, 95, 122, .18); --bad-line: rgba(255, 154, 174, .42);
  --code-bg: #090720; --code-bar: #130F36; --code-line: rgba(169, 155, 255, .22); --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme]) {
  --accent: #B9AEFF; --accent-2: #D5CEFF; --haze: rgba(169, 155, 255, .14); --ground: #0E0B2A; --card: #15113B; --card-2: #1A1548; --chip: rgba(169, 155, 255, .16); --block: #1A1548;
  --ink: #FFFFFF; --text: #C9C3F0; --muted: #9C95CC; --line: rgba(169, 155, 255, .2); --line-2: rgba(169, 155, 255, .36);
  --ok: #6FE0AC; --ok-bg: rgba(31, 169, 113, .2); --ok-line: rgba(111, 224, 172, .4); --warn: #FFC98A; --warn-bg: rgba(255, 190, 110, .16); --warn-line: #E0A040; --bad: #FF9AAE; --bad-bg: rgba(255, 95, 122, .18); --bad-line: rgba(255, 154, 174, .42);
  --code-bg: #090720; --code-bar: #130F36; --code-line: rgba(169, 155, 255, .22); --shadow: rgba(0, 0, 0, .6);
  color-scheme: dark;
} }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top) + 20px); }
body.vd { margin: 0; background: var(--ground); color: var(--text); font: 400 1rem/1.6 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
[hidden] { display: none !important; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; } ul, ol { padding: 0; list-style: none; }
a { color: var(--accent); text-underline-offset: 3px; } a:hover { color: var(--accent-2); }
code, kbd, pre { font-family: var(--mono); }
:focus-visible { outline: 3px solid var(--lav); outline-offset: 2px; border-radius: 4px; }
.vd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.vd-skip { position: absolute; left: 12px; top: -80px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: #fff; color: var(--deep); font-weight: 600; text-decoration: none; }
.vd-skip:focus { top: 10px; }
.vd-dim { color: var(--muted); }

/* ---------------------------------------------------------------- header */
.vd-top { position: sticky; top: 0; z-index: 30; height: var(--top); background: var(--deep); color: #fff; box-shadow: 0 1px 0 rgba(169, 155, 255, .2); }
.vd-top-in { height: 100%; display: flex; align-items: center; gap: 18px; padding: 0 var(--gut); }
.vd-brand { display: flex; align-items: center; gap: 12px; flex: none; min-height: 44px; color: #fff; text-decoration: none; }
.vd-brand img { display: block; height: 19px; width: auto; }
.vd-brand b { padding-left: 12px; border-left: 1px solid rgba(169, 155, 255, .4); font-size: .9rem; font-weight: 500; color: var(--lav); }
.vd-toplinks { display: flex; gap: 4px; margin-left: 8px; }
.vd-toplinks a { padding: 8px 10px; border-radius: 8px; color: #C9C3F0; font-size: .86rem; font-weight: 500; text-decoration: none; }
.vd-toplinks a:hover { color: #fff; background: rgba(169, 155, 255, .12); }
.vd-search { position: relative; flex: 1 1 220px; max-width: 340px; margin-left: auto; }
.vd-search input { width: 100%; height: 40px; padding: 0 34px 0 12px; border: 1px solid rgba(169, 155, 255, .3); border-radius: 9px; background: rgba(255, 255, 255, .07); color: #fff; font: 400 .86rem var(--font); }
.vd-search input::placeholder { color: #9C95CC; }
.vd-search input:focus { outline: none; border-color: var(--lav); background: rgba(255, 255, 255, .12); }
.vd-search kbd { position: absolute; right: 8px; top: 10px; min-width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: rgba(169, 155, 255, .2); color: #C9C3F0; font-size: .72rem; }
.vd-results { position: absolute; left: 0; right: 0; top: 46px; max-height: min(60vh, 420px); overflow: auto; padding: 6px; border-radius: 12px; background: var(--card); box-shadow: 0 18px 50px var(--shadow), 0 0 0 1px var(--line-2); }
.vd-results a { display: grid; gap: 1px; padding: 9px 10px; border-radius: 8px; color: var(--ink); font-size: .9rem; font-weight: 500; text-decoration: none; }
.vd-results a small { color: var(--muted); font-size: .74rem; font-weight: 400; }
.vd-results a:hover, .vd-results a.is-active { background: var(--haze); }
.vd-results p { padding: 10px; color: var(--muted); font-size: .86rem; }
.vd-env { display: flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .28); font-size: .76rem; font-weight: 600; }
.vd-env span { display: flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.vd-env-on { background: #fff; color: var(--deep); } .vd-env-on i { width: 7px; height: 7px; border-radius: 50%; background: #1FA971; }
.vd-env-off { color: #8E87BD; cursor: not-allowed; } .vd-env-off small { font-size: .68rem; font-weight: 400; }
.vd-theme { appearance: none; border: 0; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .28); color: #C9C3F0; cursor: pointer; }
.vd-theme:hover { color: #fff; background: rgba(169, 155, 255, .16); } .vd-theme svg { display: block; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vd-theme .vd-sun, :root[data-theme="dark"] .vd-theme .vd-moon { display: none; } :root[data-theme="dark"] .vd-theme .vd-sun { display: block; }
.vd-nav .vd-theme { display: none; width: auto; height: 44px; padding: 0 14px; margin-bottom: 14px; gap: 10px; grid-auto-flow: column; background: var(--haze); box-shadow: none; color: var(--ink); font: 500 .88rem var(--font); }
.vd-back { flex: none; color: #C9C3F0; font-size: .82rem; text-decoration: none; white-space: nowrap; } .vd-back:hover { color: #fff; }
.vd-burger { appearance: none; border: 0; flex: none; width: 44px; height: 44px; margin-left: -10px; display: none; place-items: center; background: none; color: #fff; cursor: pointer; }
.vd-burger i { display: block; width: 20px; height: 2px; margin: 5px 0; border-radius: 2px; background: currentColor; }
.vd-preview { padding: 9px var(--gut); background: var(--haze); border-bottom: 1px solid var(--line); color: var(--text); font-size: .82rem; line-height: 1.45; }
.vd-preview b { margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: var(--uv); color: #fff; font-size: .7rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }

/* ---------------------------------------------------------------- layout + navigation */
.vd-layout { display: grid; grid-template-columns: var(--navw) minmax(0, 1fr); align-items: start; }
.vd-nav { position: sticky; top: var(--top); height: calc(100vh - var(--top)); overflow-y: auto; padding: 26px 14px 40px 18px; border-right: 1px solid var(--line); background: var(--card); scrollbar-width: thin; }
.vd-nav-group + .vd-nav-group { margin-top: 22px; }
/* on a phone the search lives at the top of the menu (there is no room for it in the header) */
.vd-nav .vd-search { display: none; max-width: none; margin: 0 0 18px; }
.vd-nav .vd-search input { border-color: var(--line-2); background: var(--card); color: var(--ink); } .vd-nav .vd-search input::placeholder { color: var(--muted); } .vd-nav .vd-search kbd { display: none; }
.vd-nav .vd-results { position: static; margin-top: 6px; max-height: none; box-shadow: 0 0 0 1px var(--line); }
.vd-nav h2 { margin: 0 10px 6px; font-size: .68rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vd-nav a { display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 5px 10px; border-radius: 8px; color: var(--text); font-size: .88rem; text-decoration: none; }
.vd-nav a:hover { background: var(--haze); color: var(--ink); }
.vd-nav a[aria-current] { background: var(--haze); color: var(--accent); font-weight: 600; }
.vd-nav-sub > p { margin: 8px 10px 2px; font-size: .74rem; font-weight: 600; color: var(--ink); }
.vd-nav-m { flex: none; width: 34px; font: 600 .6rem var(--mono); letter-spacing: .02em; color: var(--ok); } .vd-nav-m--post { color: var(--accent); }
.vd-nav-tag { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--warn-bg); color: var(--warn); font-size: .64rem; font-weight: 600; }
.vd-nav-back { margin: 26px 10px 0; padding-top: 16px; border-top: 1px solid var(--line); font-size: .82rem; } .vd-nav-back a { display: inline; padding: 0; color: var(--muted); }
.vd-main { min-width: 0; max-width: 880px; padding: clamp(28px, 4vw, 52px) var(--gut) 72px; }
.vd--wide .vd-main { max-width: 1240px; }
.vd--home .vd-layout { display: block; } .vd--home .vd-nav { display: none; } .vd--home .vd-main { max-width: none; padding: 0; }
.vd-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 28px; padding: 26px var(--gut); border-top: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .78rem; line-height: 1.5; }
.vd-foot p { max-width: 60em; } .vd-foot nav { display: flex; flex-wrap: wrap; gap: 0 18px; } .vd-foot a { color: var(--muted); }

/* ---------------------------------------------------------------- type + basics */
.vd-crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; font-size: .8rem; color: var(--muted); }
.vd-crumbs li + li::before { content: '/'; margin-right: 6px; color: var(--line-2); } .vd-crumbs a { color: var(--muted); text-decoration: none; } .vd-crumbs a:hover { color: var(--accent); }
.vd-kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; font-size: .72rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.vd-kicker--light { color: var(--lav); }
.vd-h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.08; font-weight: 600; letter-spacing: -0.03em; color: var(--ink); text-wrap: balance; }
.vd-lede { margin-top: 14px; max-width: 44em; font-size: clamp(1.02rem, 1.3vw, 1.16rem); line-height: 1.55; color: var(--text); text-wrap: pretty; }
.vd-head { margin-bottom: clamp(26px, 3.4vw, 40px); }
.vd-sec { margin-top: clamp(34px, 4.4vw, 56px); } .vd-split .vd-sec:first-child, .vd-head + .vd-sec { margin-top: 0; }
.vd-h2 { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; font-size: clamp(1.22rem, 1.8vw, 1.5rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.vd-h3 { margin: 18px 0 8px; font-size: 1rem; font-weight: 600; color: var(--ink); }
.vd-sec-lede { max-width: 46em; margin: -4px 0 18px; color: var(--text); }
.vd-split-l > p:first-child + .vd-sec { margin-top: 26px; }
.vd-main p + p, .vd-main p + .vd-list, .vd-main .vd-list + p, .vd-main p + .vd-code, .vd-main .vd-table-wrap + p, .vd-main .vd-callout + p, .vd-main .vd-flow + p, .vd-main .vd-fields + p { margin-top: 12px; }
.vd-main code { padding: 1px 6px; border-radius: 6px; background: var(--haze); color: var(--ink); font-size: .86em; overflow-wrap: anywhere; }
.vd-list { display: grid; gap: 6px; padding-left: 18px; list-style: disc; } .vd-list li::marker { color: var(--lav); }
.vd-steps { counter-reset: s; display: grid; gap: 14px; }
.vd-steps li { counter-increment: s; position: relative; display: grid; gap: 2px; padding-left: 42px; }
.vd-steps li::before { content: counter(s); position: absolute; left: 0; top: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--haze); color: var(--accent); font-size: .82rem; font-weight: 600; }
.vd-steps b { color: var(--ink); font-weight: 600; } .vd-steps span { color: var(--text); font-size: .95rem; }
.vd-badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--haze); color: var(--accent); font: 600 .68rem/1.5 var(--font); letter-spacing: .02em; text-transform: none; white-space: nowrap; }
.vd-badge--test, .vd-badge--ok, .vd-badge--guide { background: var(--ok-bg); color: var(--ok); }
.vd-badge--soon, .vd-badge--ctx-status { background: var(--warn-bg); color: var(--warn); }
.vd-badge--off, .vd-badge--dim, .vd-badge--ctx-none { background: var(--chip); color: var(--muted); }
.vd-badge--bad { background: var(--bad-bg); color: var(--bad); }
.vd-badge--ctx-milestone { background: var(--ok-bg); color: var(--ok); }
.vd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; font: 600 .9rem/1 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .2s var(--ease), box-shadow .2s var(--ease); }
.vd-btn--solid { background: var(--uv); color: #fff; } .vd-btn--solid:hover { background: var(--uv-2); color: #fff; }
.vd-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .55); } .vd-btn--ghost:hover { color: #fff; background: rgba(169, 155, 255, .14); }
.vd-btn--line { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); } .vd-btn--line:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--lav); }
.vd-btn--sm { min-height: 36px; padding: 6px 14px; font-size: .82rem; }
.vd-btn:disabled { opacity: .5; cursor: not-allowed; }
.vd-link { appearance: none; border: 0; min-height: 36px; padding: 4px 8px; background: none; color: var(--accent); font: 500 .84rem var(--font); cursor: pointer; } .vd-link--bad { color: var(--bad); }
.vd-callout { margin: 16px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); background: var(--card); font-size: .94rem; }
.vd-callout-t { margin-bottom: 4px; color: var(--ink); font-weight: 600; }
.vd-callout--rule { border-left-color: var(--ink); background: var(--haze); } .vd-callout--warn { border-left-color: var(--warn-line); background: var(--warn-bg); }
.vd-mock { margin: 0 0 22px; padding: 10px 14px; border-radius: 10px; background: var(--warn-bg); color: var(--warn); font-size: .88rem; } .vd-mock b { color: var(--warn); }
.vd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 64px; padding-top: 22px; border-top: 1px solid var(--line); }
.vd-pager a { display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-decoration: none; }
.vd-pager a:hover { border-color: var(--lav); } .vd-pager span { font-size: .72rem; color: var(--muted); } .vd-pager b { color: var(--ink); font-weight: 600; font-size: .94rem; } .vd-pager-next { text-align: right; }

/* ---------------------------------------------------------------- code */
.vd-split > *, .vd-two > *, .vd-tps > *, .vd-cards > *, .vd-paths > *, .vd-pg > *, .vd-ev > *, .vd-inds > *, .vd-envs > * { min-width: 0; }
.vd-code { min-width: 0; max-width: 100%; margin: 14px 0; border-radius: 14px; overflow: hidden; background: var(--code-bg); color: #E6E3FA; box-shadow: 0 0 0 1px var(--code-line); }
.vd-code-bar { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 4px 8px 4px 14px; background: var(--code-bar); font-family: var(--font); }
.vd-code-title { margin-right: auto; font-size: .74rem; font-weight: 500; color: #B7B0E6; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd-tabs { display: flex; gap: 2px; margin-left: auto; }
.vd-tabs button, .vd-copy { appearance: none; border: 0; min-height: 30px; padding: 4px 10px; border-radius: 7px; background: none; color: #9C95CC; font: 500 .74rem var(--font); cursor: pointer; }
.vd-tabs button[aria-selected="true"] { background: rgba(169, 155, 255, .2); color: #fff; } .vd-tabs button:hover, .vd-copy:hover { color: #fff; }
.vd-copy { margin-left: auto; box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .3); } .vd-tabs + .vd-copy { margin-left: 4px; } .vd-copy.is-done { color: #7FE3B4; }
.vd-pre { margin: 0; padding: 14px 16px 16px; overflow-x: auto; font-size: .8rem; line-height: 1.62; tab-size: 2; scrollbar-width: thin; scrollbar-color: #3A3170 transparent; }
.vd-pre code { padding: 0; background: none; color: inherit; font-size: inherit; overflow-wrap: normal; white-space: pre; }
.vd-pre[data-label]::before { content: attr(data-label); display: block; margin-bottom: 8px; font: 600 .66rem var(--font); letter-spacing: .1em; text-transform: uppercase; color: #8E87BD; }
.vd-js .vd-pre[data-label]::before { content: none; } .vd-js .vd-code .vd-pre:not(.is-on) { display: none; }
.vd-pre + .vd-pre { border-top: 1px solid rgba(169, 155, 255, .16); }
.t-k { color: #B9AEFF; } .t-s { color: #8FE3C0; } .t-n { color: #FFC27A; } .t-b, .t-w { color: #FF9CC2; } .t-p { color: #8E87BD; } .t-c { color: #7E78AE; font-style: italic; } .t-f { color: #FFC27A; } .t-m { color: #7FE3B4; font-weight: 600; }
.vd-method { display: inline-flex; align-items: center; justify-content: center; min-width: 46px; padding: 2px 8px; border-radius: 6px; background: var(--ok-bg); color: var(--ok); font: 600 .68rem/1.6 var(--mono); letter-spacing: .03em; }
.vd-method--post { background: var(--haze); color: var(--accent); } .vd-method--hook { background: var(--chip); color: var(--text); } .vd-method--err { background: var(--bad-bg); color: var(--bad); }
.vd-endpoint { display: flex; align-items: center; gap: 10px; margin-top: 16px; } .vd-endpoint code { background: none; padding: 0; font-size: 1.02rem; color: var(--ink); }

/* ---------------------------------------------------------------- fields, tables, split */
.vd-fields { border-top: 1px solid var(--line); }
.vd-field { padding: 12px 0; border-bottom: 1px solid var(--line); }
.vd-field-h { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; } .vd-field-h code { background: none; padding: 0; font-weight: 600; font-size: .88rem; color: var(--ink); }
.vd-type { font: 400 .76rem var(--mono); color: var(--muted); } .vd-req { font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--warn); }
.vd-field-d { margin-top: 3px; font-size: .92rem; }
.vd-children { margin-top: 8px; } .vd-children summary { width: fit-content; min-height: 32px; display: flex; align-items: center; cursor: pointer; font-size: .82rem; font-weight: 500; color: var(--accent); }
.vd-children .vd-fields { margin: 4px 0 0 4px; padding-left: 14px; border-top: 0; border-left: 2px solid var(--haze); } .vd-children .vd-field:last-child { border-bottom: 0; }
.vd-table-wrap { overflow-x: auto; margin: 12px 0; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.vd-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.vd-table th { padding: 10px 14px; background: var(--card-2); color: var(--muted); font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; }
.vd-table td { padding: 11px 14px; border-top: 1px solid var(--line); vertical-align: top; } .vd-table td small { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
.vd-table--compare td:first-child { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.vd-native { padding: 2px 8px; border-radius: 6px; background: var(--chip); color: var(--text); font: 500 .82rem var(--mono); }
.vd-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3vw, 44px); align-items: start; }
.vd-split-r { position: sticky; top: calc(var(--top) + 18px); } .vd-split-r .vd-code:first-child { margin-top: 0; }

/* ---------------------------------------------------------------- flows, cards, paths */
.vd-flow { display: grid; gap: 26px; }
.vd-flow-step { position: relative; display: grid; gap: 2px; padding: 12px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); text-align: center; }
.vd-flow-step b { color: var(--ink); font-size: .92rem; font-weight: 600; } .vd-flow-step span { font-size: .8rem; color: var(--muted); } .vd-flow-step code { font-size: .8rem; }
.vd-flow-step + .vd-flow-step::before { content: ''; position: absolute; left: 50%; top: -19px; width: 9px; height: 9px; margin-left: -5px; border-right: 2px solid var(--lav); border-bottom: 2px solid var(--lav); transform: rotate(45deg); }
.vd-flow-step--src { background: var(--card-2); } .vd-flow-step--tp { border-color: var(--lav); background: var(--haze); } .vd-flow-step--out { border-color: transparent; background: var(--uv); } .vd-flow-step--out b, .vd-flow-step--out span { color: #fff; }
.vd-flow--row { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 30px; align-items: stretch; margin: 16px 0; } .vd-flow--row .vd-flow-step { align-content: center; }
.vd-flow--row .vd-flow-step + .vd-flow-step::before { left: -20px; top: 50%; margin: -5px 0 0; transform: rotate(-45deg); }
.vd-flow--mini { gap: 22px; margin: 14px 0 12px; } .vd-flow--mini .vd-flow-step { padding: 7px 8px; border-radius: 9px; } .vd-flow--mini .vd-flow-step b { font-size: .76rem; } .vd-flow--mini .vd-flow-step + .vd-flow-step::before { left: -15px; width: 7px; height: 7px; }
.vd-flow--journey .vd-flow-step { padding: 14px 8px; } .vd-flow--journey .vd-flow-step b { font-size: .8rem; }
.vd-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } .vd-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vd-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vd-card { display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.vd-card:hover { border-color: var(--lav); box-shadow: 0 14px 34px -22px rgba(82, 54, 255, .6); transform: translateY(-2px); color: var(--text); }
.vd-card h3 { font-size: 1.06rem; font-weight: 600; color: var(--ink); } .vd-card p { font-size: .9rem; }
.vd-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: .74rem !important; color: var(--muted); }
.vd-card-cta { margin-top: auto; padding-top: 8px; color: var(--accent); font-size: .86rem; font-weight: 600; }
.vd-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 16px; }
.vd-path { display: flex; flex-direction: column; padding: clamp(18px, 2.4vw, 28px); border-radius: 20px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; transition: border-color .2s var(--ease), box-shadow .2s var(--ease), transform .2s var(--ease); }
.vd-path:hover { border-color: var(--uv); box-shadow: 0 20px 44px -26px rgba(82, 54, 255, .7); transform: translateY(-2px); color: var(--text); }
.vd-path--touch { border-color: var(--lav); background: linear-gradient(180deg, var(--haze) 0%, var(--card) 60%), var(--card); }
.vd-path-best { margin-bottom: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
.vd-path h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.vd-path > p:not(.vd-path-best):not(.vd-path-ep) { margin-top: 6px; font-size: .95rem; }
.vd-path-ep { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 6px; } .vd-path-ep code { background: none; padding: 0; font-size: .86rem; }

/* ---------------------------------------------------------------- home */
.vd-hero { background: radial-gradient(90% 120% at 100% 0%, #2A1E86 0%, rgba(42, 30, 134, 0) 60%), var(--deep); color: #fff; }
.vd-hero-in { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 72px); align-items: center; max-width: 1240px; margin: 0 auto; padding: clamp(40px, 7vh, 84px) var(--gut); }
.vd-hero h1 { font-size: clamp(2.1rem, min(4.6vw, 7vh), 3.7rem); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.vd-hero-lede { margin-top: 18px; max-width: 34em; font-size: clamp(1.02rem, 1.3vw, 1.18rem); line-height: 1.55; color: #C9C3F0; }
.vd-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.vd-hero-flow .vd-flow { gap: 22px; max-width: 380px; margin: 0 auto; }
.vd-hero-flow .vd-flow-step { border-color: rgba(169, 155, 255, .28); background: rgba(255, 255, 255, .06); } .vd-hero-flow .vd-flow-step b { color: #fff; } .vd-hero-flow .vd-flow-step span { color: #B7B0E6; }
.vd-hero-flow .vd-flow-step code { background: rgba(169, 155, 255, .2); color: #fff; } .vd-hero-flow .vd-flow-step + .vd-flow-step::before { top: -17px; }
.vd-hero-flow .vd-flow-step--tp { border-color: var(--lav); background: rgba(169, 155, 255, .16); } .vd-hero-flow .vd-flow-step--out { background: var(--uv); border-color: transparent; }
.vd-home { max-width: 1240px; margin: 0 auto; padding: clamp(8px, 2vw, 20px) var(--gut) 80px; }
.vd-home .vd-h2 { font-size: clamp(1.5rem, 2.6vw, 2.1rem); letter-spacing: -0.03em; }
.vd-inds { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vd-ind { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.6vw, 30px); border-radius: 20px; border: 1px solid var(--line); background: var(--card); }
.vd-ind h3 { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } .vd-ind .vd-btn { align-self: flex-start; margin-top: 8px; }
.vd-chips { display: flex; flex-wrap: wrap; gap: 6px; } .vd-chips li { padding: 4px 10px; border-radius: 999px; background: var(--haze); color: var(--ink); font-size: .78rem; font-weight: 500; }
.vd-finder { padding: clamp(20px, 2.6vw, 30px); border-radius: 20px; background: var(--block); color: #C9C3F0; } .vd-finder .vd-h2 { color: #fff; } .vd-finder .vd-sec-lede { color: #C9C3F0; } .vd-finder code { background: rgba(169, 155, 255, .2); color: #fff; }
.vd-finder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-finder-col { padding: 16px; border-radius: 14px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .22); }
.vd-finder-step { display: none; } .vd-finder-name { margin-bottom: 10px; color: #fff; font-size: 1.05rem; font-weight: 600; }
.vd-finder-crms { display: grid; gap: 6px; } .vd-finder-crms a { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: #fff; font-weight: 500; font-size: .94rem; text-decoration: none; }
.vd-finder-crms a:hover { background: var(--uv); } .vd-finder-crms a span { margin-left: auto; } .vd-finder-crms small { color: #B7B0E6; font-size: .72rem; font-weight: 400; }
.vd-js .vd-finder-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); } .vd-js .vd-finder-col { display: contents; }
.vd-js .vd-finder-ind { appearance: none; border: 0; grid-column: 1; min-height: 56px; padding: 12px 18px; border-radius: 14px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(169, 155, 255, .26); color: #fff; font: 600 1.02rem var(--font); text-align: left; cursor: pointer; }
.vd-js .vd-finder-ind[aria-pressed="true"] { background: var(--uv); box-shadow: none; } .vd-js .vd-finder-name { display: none; }
.vd-js .vd-finder-crms { grid-column: 2; grid-row: 1 / span 2; align-content: start; } .vd-js .vd-finder-col:not(.is-on) .vd-finder-crms { display: none; }
.vd-envs, .vd-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vd-envcard, .vd-two > div { padding: 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); } .vd-envcard h3, .vd-two h3 { margin: 8px 0 4px; font-size: 1.1rem; font-weight: 600; color: var(--ink); }
.vd-envcard--off { background: var(--card-2); border-style: dashed; } .vd-envcard small { color: var(--muted); font-size: .76rem; } .vd-two-a { border-color: var(--lav) !important; background: var(--haze) !important; }

/* ---------------------------------------------------------------- quickstart, concepts, guides */
.vd-qs { counter-reset: q; display: grid; gap: 30px; }
.vd-qs > li { counter-increment: q; position: relative; min-width: 0; padding-left: 56px; } .vd-qs > li::before { content: counter(q); position: absolute; left: 0; top: -4px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--uv); color: #fff; font-weight: 600; }
.vd-qs > li::after { content: ''; position: absolute; left: 18px; top: 42px; bottom: -26px; width: 2px; background: var(--line); } .vd-qs > li:last-child::after { display: none; }
.vd-resolved { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .vd-resolved li { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font-size: .86rem; font-weight: 500; }
.vd-vs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } .vd-vs > div { min-width: 0; padding: 14px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); font-size: .9rem; }
.vd-vs-t { margin-bottom: 2px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; } .vd-vs-bad { border-color: var(--bad-line) !important; } .vd-vs-bad .vd-vs-t { color: var(--bad); } .vd-vs-good { border-color: var(--ok-line) !important; } .vd-vs-good .vd-vs-t { color: var(--ok); }
.vd-eplist { display: grid; gap: 6px; } .vd-eplist a { display: grid; grid-template-columns: 58px minmax(0, auto) minmax(0, 1fr); align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--text); text-decoration: none; }
.vd-eplist a:hover { border-color: var(--lav); } .vd-eplist code { background: none; padding: 0; color: var(--ink); font-size: .88rem; font-weight: 600; } .vd-eplist span:last-child { font-size: .86rem; color: var(--muted); text-align: right; }
.vd-lane { margin-top: 26px; } .vd-lane-h { font-size: 1.05rem; font-weight: 600; color: var(--ink); } .vd-lane-p { margin: 2px 0 12px; font-size: .9rem; color: var(--muted); }
.vd-tps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vd-tp { padding: 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); } .vd-tp header { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .vd-tp h3 { font-size: 1rem; font-weight: 600; color: var(--ink); }
.vd-tp-slug { margin: 4px 0 10px; } .vd-tp dl { display: grid; gap: 8px; font-size: .88rem; } .vd-tp dt { font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vd-tp-ex { margin-top: 10px; } .vd-tp-ex summary { width: fit-content; min-height: 36px; display: flex; align-items: center; cursor: pointer; font-size: .84rem; font-weight: 500; color: var(--accent); } .vd-tp-ex .vd-code { margin-bottom: 0; }
.vd-any { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 34px; align-items: center; margin-bottom: 8px; padding: clamp(18px, 2.6vw, 30px); border-radius: 20px; background: var(--block); color: #C9C3F0; }
.vd-any-t { margin-bottom: 8px; font-size: .7rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lav); } .vd-any ul { display: grid; gap: 6px; } .vd-any li { padding: 7px 12px; border-radius: 9px; background: rgba(255, 255, 255, .07); color: #fff; font-size: .9rem; }
.vd-any-mid { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; } .vd-any-mid code { background: none; padding: 0; color: #0E0B2A; font-size: .86rem; font-weight: 600; }
.vd-any-mid::before, .vd-any-mid::after { content: ''; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-right: 2px solid var(--lav); border-bottom: 2px solid var(--lav); transform: rotate(-45deg); } .vd-any-mid::before { left: -22px; } .vd-any-mid::after { right: -20px; }
.vd-any-out { padding: 16px; border-radius: 14px; background: var(--uv); color: #fff; } .vd-any-out .vd-any-t { color: #fff; }

/* ---------------------------------------------------------------- console previews */
.vd-pg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(20px, 3vw, 36px); align-items: start; }
.vd-pg-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .vd-pg-env { display: flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted); }
.vd-seg, .vd-filters { display: inline-flex; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: var(--chip); }
.vd-seg button, .vd-filters button { appearance: none; border: 0; min-height: 38px; padding: 6px 14px; border-radius: 999px; background: none; color: var(--text); font: 500 .84rem var(--font); cursor: pointer; }
.vd-seg button[aria-pressed="true"], .vd-filters button[aria-pressed="true"] { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px var(--shadow); }
.vd-fs { min-width: 0; margin: 0 0 12px; padding: 14px 16px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); } .vd-fs legend { padding: 0 6px; font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.vd-fs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 12px; }
.vd-f { display: grid; gap: 4px; min-width: 0; font-size: .8rem; color: var(--text); } .vd-f--wide { grid-column: 1 / -1; } .vd-f small { color: var(--muted); font-size: .74rem; }
.vd-f input, .vd-f select, .vd-f textarea { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 9px; background: var(--card); color: var(--ink); font: 400 .88rem var(--font); }
.vd-f textarea { resize: vertical; line-height: 1.45; } .vd-f input[readonly] { background: var(--card-2); color: var(--muted); font-family: var(--mono); } .vd-f input:focus, .vd-f select:focus, .vd-f textarea:focus { outline: none; border-color: var(--uv); box-shadow: 0 0 0 3px rgba(82, 54, 255, .16); }
.vd-pg-send { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 4px; font-size: .82rem; color: var(--muted); }
.vd-pg-out { position: sticky; top: calc(var(--top) + 18px); } .vd-pg-out .vd-code:first-child { margin-top: 0; } .vd-pg-wait { padding: 18px; border-radius: 14px; border: 1px dashed var(--line-2); color: var(--muted); font-size: .88rem; text-align: center; }
.vd-pg-res.is-new .vd-code { animation: vd-pop .5s var(--ease); } @keyframes vd-pop { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.vd-ev { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 22px; align-items: start; } .vd-filters { margin-bottom: 10px; }
.vd-table--log td { white-space: nowrap; font-size: .84rem; } .vd-table--log tr.is-on td { background: var(--haze); } .vd-table--log tr[hidden] { display: none; }
.vd-rowbtn { appearance: none; border: 0; min-height: 32px; padding: 0; background: none; cursor: pointer; } .vd-rowbtn code { color: var(--accent); background: none; padding: 0; text-decoration: underline; text-decoration-color: var(--lav); text-underline-offset: 3px; }
.vd-ev-detail { position: sticky; top: calc(var(--top) + 18px); max-height: calc(100vh - var(--top) - 36px); overflow-y: auto; padding: 18px; border-radius: 16px; border: 1px solid var(--line); background: var(--card); }
.vd-ev-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .vd-ev-id code { background: none; padding: 0; font-weight: 600; color: var(--ink); } .vd-ev-time { font-size: .8rem; color: var(--muted); } .vd-ev-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.vd-ev-part { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: .9rem; } .vd-ev-part h3 { margin-bottom: 6px; font-size: .68rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .vd-ev-part .vd-code { margin: 0; }
.vd-kv { display: grid; gap: 6px; } .vd-kv dt { font-size: .76rem; color: var(--muted); }
.vd-keys { margin-bottom: 30px; } .vd-keys header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .vd-keys header .vd-h2 { margin: 0; } .vd-keys .vd-sec-lede { margin-top: 6px; }
.vd-keys--off { padding: 18px; border-radius: 16px; border: 1px dashed var(--line-2); background: var(--card-2); } .vd-empty { color: var(--muted); font-size: .9rem; } .vd-keyacts { white-space: nowrap; } tr.is-revoked td { color: var(--muted); } tr.is-revoked code { text-decoration: line-through; }
.vd-dialog { width: min(440px, calc(100vw - 32px)); padding: 22px; border: 0; border-radius: 18px; background: var(--card); color: var(--text); box-shadow: 0 30px 80px var(--shadow), 0 0 0 1px var(--line-2); } .vd-dialog::backdrop { background: rgba(14, 11, 42, .5); }
.vd-dialog h2 { margin-bottom: 14px; font-size: 1.2rem; font-weight: 600; color: var(--ink); } .vd-dialog p { margin-top: 10px; font-size: .9rem; } .vd-dialog-acts { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px !important; }
.vd-secret { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--code-bg); box-shadow: 0 0 0 1px var(--code-line); } .vd-secret code { flex: 1; min-width: 0; background: none; padding: 0; color: #8FE3C0; font-size: .82rem; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1180px) { .vd-toplinks { display: none; } .vd-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 1020px) {
  .vd-split, .vd-pg, .vd-ev { grid-template-columns: minmax(0, 1fr); } .vd-split-r, .vd-pg-out, .vd-ev-detail { position: static; max-height: none; }
  .vd-env-off small { display: none; }
}
@media (max-width: 900px) {
  .vd-layout { display: block; }
  .vd-nav { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .vd-js .vd-burger, .vd-js.vd--home .vd-burger { display: grid; }
  .vd-js .vd-nav, .vd-js.vd--home .vd-nav { display: block; position: fixed; z-index: 40; left: 0; top: var(--top); bottom: 0; width: min(320px, 88vw); height: auto; border-bottom: 0; clip-path: inset(0 100% 0 0); visibility: hidden; transition: clip-path .3s var(--ease), visibility 0s .3s; }
  .vd-js.is-drawer .vd-nav { clip-path: inset(0 -80px 0 0); box-shadow: 30px 0 60px rgba(14, 11, 42, .3); visibility: visible; transition-delay: 0s; } .vd-js.is-drawer { overflow: hidden; }
  .vd-js.is-drawer .vd-layout::before { content: ''; position: fixed; inset: var(--top) 0 0 0; z-index: 35; background: rgba(14, 11, 42, .45); }
  .vd-back { display: none; } .vd-brand b { display: none; }
  /* touch: every control is at least 40px tall */
  .vd-tabs button, .vd-copy, .vd-seg button, .vd-filters button, .vd-btn--sm, .vd-link, .vd-rowbtn { min-height: 40px; } .vd-children summary, .vd-tp-ex summary { min-height: 40px; }
  .vd-crumbs li { display: flex; align-items: center; } .vd-crumbs a, .vd-foot nav a { display: inline-flex; align-items: center; min-height: 40px; } .vd-crumbs ol { margin-bottom: 6px; }
  .vd-code-bar { min-height: 48px; }
  .vd-hero-in, .vd-paths, .vd-inds, .vd-envs, .vd-two, .vd-vs, .vd-tps, .vd-cards--3 { grid-template-columns: minmax(0, 1fr); }
  .vd-any { grid-template-columns: minmax(0, 1fr); gap: 30px; } .vd-any-mid { justify-self: center; } .vd-any-mid::before { left: 50%; top: -20px; margin: 0 0 0 -5px; transform: rotate(45deg); } .vd-any-mid::after { left: 50%; right: auto; top: auto; bottom: -18px; margin: 0 0 0 -5px; transform: rotate(45deg); }
  .vd-flow--row:not(.vd-flow--mini) { grid-auto-flow: row; gap: 26px; } .vd-flow--row:not(.vd-flow--mini) .vd-flow-step + .vd-flow-step::before { left: 50%; top: -19px; margin: 0 0 0 -5px; transform: rotate(45deg); }
  .vd-eplist a { grid-template-columns: 58px minmax(0, 1fr); } .vd-eplist span:last-child { grid-column: 1 / -1; text-align: left; }
}
@media (max-width: 640px) {
  .vd-top .vd-search, .vd-top .vd-theme { display: none; } .vd-nav .vd-theme { display: grid; } .vd-env { margin-left: auto; } .vd-brand img { height: 16px; } .vd-top-in { gap: 10px; } .vd-env span { padding: 5px 9px; }
  .vd-nav .vd-search { display: block; }
  .vd-cards, .vd-cards--4 { grid-template-columns: minmax(0, 1fr); } .vd-finder-grid, .vd-js .vd-finder-grid { grid-template-columns: minmax(0, 1fr); } .vd-js .vd-finder-ind, .vd-js .vd-finder-crms { grid-column: 1; grid-row: auto; }
  .vd-qs > li { padding-left: 0; padding-top: 48px; } .vd-qs > li::after { display: none; } .vd-pager { grid-template-columns: minmax(0, 1fr); } .vd-pager-next { text-align: left; }
  /* a table becomes a list of cards: each cell names its column */
  .vd-table-wrap { border: 0; background: none; overflow: visible; } .vd-table thead { display: none; }
  .vd-table, .vd-table tbody, .vd-table tr, .vd-table td { display: block; width: 100%; } .vd-table tr { margin-bottom: 10px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .vd-table td { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 10px; padding: 7px 0; border-top: 0; white-space: normal !important; } .vd-table td + td { border-top: 1px solid var(--line); }
  .vd-td { min-width: 0; overflow-wrap: anywhere; } .vd-native { display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
  .vd-table td { grid-template-columns: 96px minmax(0, 1fr); }
  .vd-preview span { display: none; }
  .vd-table td::before { content: attr(data-label); font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding-top: 3px; }
  .vd-table--log tr.is-on { border-color: var(--accent); } .vd-table--log tr.is-on td { background: none; }
}
@media (max-width: 360px) { .vd-brand img { height: 13px; } .vd-top-in { gap: 6px; padding: 0 12px; } .vd-env { font-size: .7rem; } .vd-env span { padding: 5px 7px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }
@media print { .vd-top, .vd-nav, .vd-pager, .vd-copy, .vd-tabs { display: none !important; } .vd-layout { display: block; } }
.vd-inline { min-height: 34px; padding: 4px 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--card); font: 400 .9rem var(--font); color: var(--ink); }