/* @superjackfruit/vibekit: vibekit.bundle.css. fonts.css + vibekit.css, every @import inlined. Fonts: SIL OFL 1.1, see ../fonts/licenses. */
/* @font-face only. A browser downloads a font when a page uses it, so only the active vibe's fonts load. */
/* Bricolage and Newsreader with their optical-size axis, as the approved mockups draw them (display sizes get the display cut). */
/* bricolage-grotesque-vietnamese-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/bricolage-grotesque-vietnamese-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* bricolage-grotesque-latin-ext-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* bricolage-grotesque-latin-opsz-normal */
@font-face {
  font-family: 'Bricolage Grotesque Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* figtree-latin-ext-wght-normal */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/figtree-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* figtree-latin-wght-normal */
@font-face {
  font-family: 'Figtree Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 300 900;
  src: url(../fonts/figtree-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* newsreader-vietnamese-opsz-normal */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-vietnamese-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* newsreader-latin-ext-opsz-normal */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-ext-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* newsreader-latin-opsz-normal */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* newsreader-vietnamese-opsz-italic */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-vietnamese-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* newsreader-latin-ext-opsz-italic */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-ext-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* newsreader-latin-opsz-italic */
@font-face {
  font-family: 'Newsreader Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/newsreader-latin-opsz-italic.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* geist-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* geist-cyrillic-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* geist-vietnamese-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-vietnamese-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* geist-latin-ext-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* geist-latin-wght-normal */
@font-face {
  font-family: 'Geist Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/geist-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* The width axis too, so Studio's font-stretch (72% to 85%) draws real condensed glyphs. */
/* archivo-vietnamese-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-vietnamese-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* archivo-latin-ext-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-ext-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* archivo-latin-wdth-normal */
@font-face {
  font-family: 'Archivo Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url(../fonts/archivo-latin-wdth-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* azeret-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Azeret Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/azeret-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* azeret-mono-latin-wght-normal */
@font-face {
  font-family: 'Azeret Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/azeret-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* martian-mono-cyrillic-ext-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/martian-mono-cyrillic-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F;
}

/* martian-mono-cyrillic-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/martian-mono-cyrillic-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* martian-mono-latin-ext-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/martian-mono-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* martian-mono-latin-wght-normal */
@font-face {
  font-family: 'Martian Mono Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(../fonts/martian-mono-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* atkinson-hyperlegible-next-latin-ext-400-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-next-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* atkinson-hyperlegible-next-latin-400-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(../fonts/atkinson-hyperlegible-next-latin-400-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-next-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* atkinson-hyperlegible-next-latin-ext-700-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-next-latin-ext-700-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* atkinson-hyperlegible-next-latin-700-normal */
@font-face {
  font-family: 'Atkinson Hyperlegible Next';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(../fonts/atkinson-hyperlegible-next-latin-700-normal.woff2) format('woff2'), url(../fonts/atkinson-hyperlegible-next-latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* The one stylesheet a product imports. Load fonts.css separately (it declares @font-face only). */
@layer vk.tokens, vk.base, vk.components;
@layer vk.tokens {
/* -------------------------------------------
 *  Autogenerated by ⛋ Terrazzo. DO NOT EDIT!
 * ------------------------------------------- */

:root {
  color-scheme: light;
  --vk-color-accent: #3a6fc8;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-text: #376abd;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-bg: #fff8ee;
  --vk-color-danger: #b4233c;
  --vk-color-danger-fg: #fff8ee;
  --vk-color-danger-wash: #fce1e4;
  --vk-color-faint: #756a63;
  --vk-color-ground: #f0dccf;
  --vk-color-line: #f0dccf;
  --vk-color-muted: #5c5568;
  --vk-color-primary: #23233a;
  --vk-color-primary-fg: #fff8ee;
  --vk-color-raised: #fff1e6;
  --vk-color-rule: #f0dccf;
  --vk-color-signal: #e2502e;
  --vk-color-signal-text: #a8361a;
  --vk-color-signal-wash: #ffe3d6;
  --vk-color-stage-text: #1d5a35;
  --vk-color-success: #7fd3a0;
  --vk-color-success-text: #1d5a35;
  --vk-color-success-wash: #cdefd9;
  --vk-color-surface: #fff;
  --vk-color-text: #23233a;
  --vk-face-ink: #23233a;
  --vk-font-body: "Figtree Variable", system-ui, sans-serif;
  --vk-font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Figtree Variable", system-ui, sans-serif;
  --vk-lift: 3px;
  --vk-mood-done: #ffefa8;
  --vk-mood-needs: #ffd9c2;
  --vk-mood-resting: #ece6f5;
  --vk-mood-thinking: #dcebff;
  --vk-mood-working: #cdefd9;
  --vk-motion-base: 280ms;
  --vk-motion-easing: cubic-bezier(0.3, 1.4, 0.5, 1);
  --vk-motion-fast: 160ms;
  --vk-product-accounts-bg: #ddefc6;
  --vk-product-accounts-fg: #2e5212;
  --vk-product-agentpod-bg: #dcebff;
  --vk-product-agentpod-fg: #1e3e66;
  --vk-product-superlibrary-bg: #ffd9c2;
  --vk-product-superlibrary-fg: #7a2e14;
  --vk-product-supermessage-bg: #e6deff;
  --vk-product-supermessage-fg: #3e2f86;
  --vk-product-superpipeline-bg: #ffefa8;
  --vk-product-superpipeline-fg: #5e4a00;
  --vk-product-superwitness-bg: #cdefd9;
  --vk-product-superwitness-fg: #1d5a35;
  --vk-radius-lg: 24px;
  --vk-radius-md: 18px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 12px;
  --vk-sky-dawn-bottom: #ffe3d3;
  --vk-sky-dawn-sun: #ffc2a8;
  --vk-sky-dawn-text: #23233a;
  --vk-sky-dawn-top: #f7c6d9;
  --vk-sky-dusk-bottom: #f7c9d2;
  --vk-sky-dusk-sun: #ff8e6b;
  --vk-sky-dusk-text: #23233a;
  --vk-sky-dusk-top: #b9a6ee;
  --vk-sky-golden-bottom: #ffe6c7;
  --vk-sky-golden-sun: #ffb04d;
  --vk-sky-golden-text: #23233a;
  --vk-sky-golden-top: #ffcf8f;
  --vk-sky-morning-bottom: #eaf3ff;
  --vk-sky-morning-sun: #ffd66b;
  --vk-sky-morning-text: #23233a;
  --vk-sky-morning-top: #cfe3ff;
  --vk-sky-night-bottom: #3b4080;
  --vk-sky-night-sun: #f4eedb;
  --vk-sky-night-text: #f5efe6;
  --vk-sky-night-top: #232860;
  --vk-sky-noon-bottom: #e3f1ff;
  --vk-sky-noon-sun: #ffe58a;
  --vk-sky-noon-text: #23233a;
  --vk-sky-noon-top: #bfe0ff;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #f0dccf;
  --vk-stage-2: #e3cdbe;
  --vk-stage-3: #cdefd9;
  --vk-stage-4: #a6e0bc;
  --vk-stage-5: #7fd3a0;
  --vk-stage-6: #4f9e6e;
  --vk-stage-7: #1d5a35;
  --vk-target-min: 44px;
}

[data-vibe="daylight"][data-theme="light"] {
  color-scheme: light;
  --vk-color-accent: #3a6fc8;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-text: #376abd;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-bg: #fff8ee;
  --vk-color-danger: #b4233c;
  --vk-color-danger-fg: #fff8ee;
  --vk-color-danger-wash: #fce1e4;
  --vk-color-faint: #756a63;
  --vk-color-ground: #f0dccf;
  --vk-color-line: #f0dccf;
  --vk-color-muted: #5c5568;
  --vk-color-primary: #23233a;
  --vk-color-primary-fg: #fff8ee;
  --vk-color-raised: #fff1e6;
  --vk-color-rule: #f0dccf;
  --vk-color-signal: #e2502e;
  --vk-color-signal-text: #a8361a;
  --vk-color-signal-wash: #ffe3d6;
  --vk-color-stage-text: #1d5a35;
  --vk-color-success: #7fd3a0;
  --vk-color-success-text: #1d5a35;
  --vk-color-success-wash: #cdefd9;
  --vk-color-surface: #fff;
  --vk-color-text: #23233a;
  --vk-face-ink: #23233a;
  --vk-font-body: "Figtree Variable", system-ui, sans-serif;
  --vk-font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Figtree Variable", system-ui, sans-serif;
  --vk-lift: 3px;
  --vk-mood-done: #ffefa8;
  --vk-mood-needs: #ffd9c2;
  --vk-mood-resting: #ece6f5;
  --vk-mood-thinking: #dcebff;
  --vk-mood-working: #cdefd9;
  --vk-motion-base: 280ms;
  --vk-motion-easing: cubic-bezier(0.3, 1.4, 0.5, 1);
  --vk-motion-fast: 160ms;
  --vk-product-accounts-bg: #ddefc6;
  --vk-product-accounts-fg: #2e5212;
  --vk-product-agentpod-bg: #dcebff;
  --vk-product-agentpod-fg: #1e3e66;
  --vk-product-superlibrary-bg: #ffd9c2;
  --vk-product-superlibrary-fg: #7a2e14;
  --vk-product-supermessage-bg: #e6deff;
  --vk-product-supermessage-fg: #3e2f86;
  --vk-product-superpipeline-bg: #ffefa8;
  --vk-product-superpipeline-fg: #5e4a00;
  --vk-product-superwitness-bg: #cdefd9;
  --vk-product-superwitness-fg: #1d5a35;
  --vk-radius-lg: 24px;
  --vk-radius-md: 18px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 12px;
  --vk-sky-dawn-bottom: #ffe3d3;
  --vk-sky-dawn-sun: #ffc2a8;
  --vk-sky-dawn-text: #23233a;
  --vk-sky-dawn-top: #f7c6d9;
  --vk-sky-dusk-bottom: #f7c9d2;
  --vk-sky-dusk-sun: #ff8e6b;
  --vk-sky-dusk-text: #23233a;
  --vk-sky-dusk-top: #b9a6ee;
  --vk-sky-golden-bottom: #ffe6c7;
  --vk-sky-golden-sun: #ffb04d;
  --vk-sky-golden-text: #23233a;
  --vk-sky-golden-top: #ffcf8f;
  --vk-sky-morning-bottom: #eaf3ff;
  --vk-sky-morning-sun: #ffd66b;
  --vk-sky-morning-text: #23233a;
  --vk-sky-morning-top: #cfe3ff;
  --vk-sky-night-bottom: #3b4080;
  --vk-sky-night-sun: #f4eedb;
  --vk-sky-night-text: #f5efe6;
  --vk-sky-night-top: #232860;
  --vk-sky-noon-bottom: #e3f1ff;
  --vk-sky-noon-sun: #ffe58a;
  --vk-sky-noon-text: #23233a;
  --vk-sky-noon-top: #bfe0ff;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #f0dccf;
  --vk-stage-2: #e3cdbe;
  --vk-stage-3: #cdefd9;
  --vk-stage-4: #a6e0bc;
  --vk-stage-5: #7fd3a0;
  --vk-stage-6: #4f9e6e;
  --vk-stage-7: #1d5a35;
  --vk-target-min: 44px;
}

[data-vibe="daylight"][data-theme="dark"] {
  color-scheme: dark;
  --vk-color-accent: #5f92e7;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-text: #6595e6;
  --vk-color-accent-wash: #1d2d46;
  --vk-color-bg: #17162a;
  --vk-color-danger: #ff9dae;
  --vk-color-danger-fg: #1b1a2e;
  --vk-color-danger-wash: #4a2030;
  --vk-color-faint: #9c96b0;
  --vk-color-ground: #0c0b1a;
  --vk-color-line: #36355a;
  --vk-color-muted: #b7b0c6;
  --vk-color-primary: #ffe9c7;
  --vk-color-primary-fg: #1b1a2e;
  --vk-color-raised: #2d2c47;
  --vk-color-rule: #36355a;
  --vk-color-signal: #ff8466;
  --vk-color-signal-text: #ffb898;
  --vk-color-signal-wash: #4a2a22;
  --vk-color-stage-text: #aee6c3;
  --vk-color-success: #9fd9b4;
  --vk-color-success-text: #aee6c3;
  --vk-color-success-wash: #1f3b2c;
  --vk-color-surface: #232239;
  --vk-color-text: #f5efe6;
  --vk-face-ink: #23233a;
  --vk-font-body: "Figtree Variable", system-ui, sans-serif;
  --vk-font-display: "Bricolage Grotesque Variable", system-ui, sans-serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Figtree Variable", system-ui, sans-serif;
  --vk-lift: 3px;
  --vk-mood-done: #f2dc7e;
  --vk-mood-needs: #ffb898;
  --vk-mood-resting: #c4beda;
  --vk-mood-thinking: #a9c8f2;
  --vk-mood-working: #9fd9b4;
  --vk-motion-base: 280ms;
  --vk-motion-easing: cubic-bezier(0.3, 1.4, 0.5, 1);
  --vk-motion-fast: 160ms;
  --vk-product-accounts-bg: #26391a;
  --vk-product-accounts-fg: #c6e8a6;
  --vk-product-agentpod-bg: #1e2f4a;
  --vk-product-agentpod-fg: #b9d6ff;
  --vk-product-superlibrary-bg: #4a2a22;
  --vk-product-superlibrary-fg: #ffc2a3;
  --vk-product-supermessage-bg: #2f2850;
  --vk-product-supermessage-fg: #d3c7ff;
  --vk-product-superpipeline-bg: #4a3f12;
  --vk-product-superpipeline-fg: #ffe48a;
  --vk-product-superwitness-bg: #1f3b2c;
  --vk-product-superwitness-fg: #aee6c3;
  --vk-radius-lg: 24px;
  --vk-radius-md: 18px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 12px;
  --vk-sky-dawn-bottom: #1c1830;
  --vk-sky-dawn-sun: #ffc2a8;
  --vk-sky-dawn-text: #f5efe6;
  --vk-sky-dawn-top: #3b2643;
  --vk-sky-dusk-bottom: #1a1730;
  --vk-sky-dusk-sun: #ff8e6b;
  --vk-sky-dusk-text: #f5efe6;
  --vk-sky-dusk-top: #2e2350;
  --vk-sky-golden-bottom: #1e1830;
  --vk-sky-golden-sun: #ffb04d;
  --vk-sky-golden-text: #f5efe6;
  --vk-sky-golden-top: #4a2e2a;
  --vk-sky-morning-bottom: #1a1d33;
  --vk-sky-morning-sun: #ffd66b;
  --vk-sky-morning-text: #f5efe6;
  --vk-sky-morning-top: #1f3354;
  --vk-sky-night-bottom: #161530;
  --vk-sky-night-sun: #f4eedb;
  --vk-sky-night-text: #f5efe6;
  --vk-sky-night-top: #0b0f2a;
  --vk-sky-noon-bottom: #1b2036;
  --vk-sky-noon-sun: #ffe58a;
  --vk-sky-noon-text: #f5efe6;
  --vk-sky-noon-top: #21406b;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #36355a;
  --vk-stage-2: #45446b;
  --vk-stage-3: #1f3b2c;
  --vk-stage-4: #2e5a40;
  --vk-stage-5: #5c9f76;
  --vk-stage-6: #7fc79b;
  --vk-stage-7: #9fd9b4;
  --vk-target-min: 44px;
}

[data-vibe="paper"][data-theme="light"] {
  color-scheme: light;
  --vk-color-accent: #4e71ab;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-text: #4b6ca3;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-bg: #fbf8f2;
  --vk-color-danger: #a3202f;
  --vk-color-danger-fg: #fbf8f2;
  --vk-color-danger-wash: #f6dedd;
  --vk-color-faint: #736d63;
  --vk-color-ground: #e7e1d6;
  --vk-color-line: #e2dacb;
  --vk-color-muted: #5e5a52;
  --vk-color-primary: #1c1b18;
  --vk-color-primary-fg: #fbf8f2;
  --vk-color-raised: #f3eee4;
  --vk-color-rule: #1c1b18;
  --vk-color-signal: #c9411b;
  --vk-color-signal-text: #a8361a;
  --vk-color-signal-wash: #fbe9e2;
  --vk-color-stage-text: #3a5e44;
  --vk-color-success: #4f7a5a;
  --vk-color-success-text: #3a5e44;
  --vk-color-success-wash: #e3ede4;
  --vk-color-surface: #fffdf9;
  --vk-color-text: #1c1b18;
  --vk-face-ink: #23233a;
  --vk-font-body: "Geist Variable", system-ui, sans-serif;
  --vk-font-display: "Newsreader Variable", "Georgia", serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Newsreader Variable", "Georgia", serif;
  --vk-lift: 0px;
  --vk-mood-done: #ffefa8;
  --vk-mood-needs: #ffd9c2;
  --vk-mood-resting: #ece6f5;
  --vk-mood-thinking: #dcebff;
  --vk-mood-working: #cdefd9;
  --vk-motion-base: 400ms;
  --vk-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --vk-motion-fast: 200ms;
  --vk-product-accounts-bg: #ddefc6;
  --vk-product-accounts-fg: #2e5212;
  --vk-product-agentpod-bg: #dcebff;
  --vk-product-agentpod-fg: #1e3e66;
  --vk-product-superlibrary-bg: #ffd9c2;
  --vk-product-superlibrary-fg: #7a2e14;
  --vk-product-supermessage-bg: #e6deff;
  --vk-product-supermessage-fg: #3e2f86;
  --vk-product-superpipeline-bg: #ffefa8;
  --vk-product-superpipeline-fg: #5e4a00;
  --vk-product-superwitness-bg: #cdefd9;
  --vk-product-superwitness-fg: #1d5a35;
  --vk-radius-lg: 10px;
  --vk-radius-md: 8px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 4px;
  --vk-sky-dawn-bottom: #fbf1ee;
  --vk-sky-dawn-sun: #c9411b;
  --vk-sky-dawn-text: #1c1b18;
  --vk-sky-dawn-top: #fbf1ee;
  --vk-sky-dusk-bottom: #f6f0f2;
  --vk-sky-dusk-sun: #c9411b;
  --vk-sky-dusk-text: #1c1b18;
  --vk-sky-dusk-top: #f6f0f2;
  --vk-sky-golden-bottom: #fbf2e4;
  --vk-sky-golden-sun: #c9411b;
  --vk-sky-golden-text: #1c1b18;
  --vk-sky-golden-top: #fbf2e4;
  --vk-sky-morning-bottom: #f7f8f6;
  --vk-sky-morning-sun: #c9411b;
  --vk-sky-morning-text: #1c1b18;
  --vk-sky-morning-top: #f7f8f6;
  --vk-sky-night-bottom: #f2f1f4;
  --vk-sky-night-sun: #c9411b;
  --vk-sky-night-text: #1c1b18;
  --vk-sky-night-top: #f2f1f4;
  --vk-sky-noon-bottom: #fbf8f2;
  --vk-sky-noon-sun: #c9411b;
  --vk-sky-noon-text: #1c1b18;
  --vk-sky-noon-top: #fbf8f2;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #e2dacb;
  --vk-stage-2: #cfc6b4;
  --vk-stage-3: #bdb29e;
  --vk-stage-4: #8f8676;
  --vk-stage-5: #5e5a52;
  --vk-stage-6: #3a5e44;
  --vk-stage-7: #1c1b18;
  --vk-target-min: 44px;
}

[data-vibe="paper"][data-theme="dark"] {
  color-scheme: dark;
  --vk-color-accent: #7194cb;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-text: #7596cb;
  --vk-color-accent-wash: #232d3e;
  --vk-color-bg: #1a1916;
  --vk-color-danger: #f2a0a6;
  --vk-color-danger-fg: #1a1916;
  --vk-color-danger-wash: #45221f;
  --vk-color-faint: #8e877b;
  --vk-color-ground: #0f0e0c;
  --vk-color-line: #33302a;
  --vk-color-muted: #a39c90;
  --vk-color-primary: #ede7dc;
  --vk-color-primary-fg: #1a1916;
  --vk-color-raised: #2b2924;
  --vk-color-rule: #ede7dc;
  --vk-color-signal: #f06a43;
  --vk-color-signal-text: #f59a7c;
  --vk-color-signal-wash: #3a2219;
  --vk-color-stage-text: #a9cdb2;
  --vk-color-success: #8fb89a;
  --vk-color-success-text: #a9cdb2;
  --vk-color-success-wash: #1f2b22;
  --vk-color-surface: #22201c;
  --vk-color-text: #ede7dc;
  --vk-face-ink: #23233a;
  --vk-font-body: "Geist Variable", system-ui, sans-serif;
  --vk-font-display: "Newsreader Variable", "Georgia", serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Newsreader Variable", "Georgia", serif;
  --vk-lift: 0px;
  --vk-mood-done: #f2dc7e;
  --vk-mood-needs: #ffb898;
  --vk-mood-resting: #c4beda;
  --vk-mood-thinking: #a9c8f2;
  --vk-mood-working: #9fd9b4;
  --vk-motion-base: 400ms;
  --vk-motion-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --vk-motion-fast: 200ms;
  --vk-product-accounts-bg: #26391a;
  --vk-product-accounts-fg: #c6e8a6;
  --vk-product-agentpod-bg: #1e2f4a;
  --vk-product-agentpod-fg: #b9d6ff;
  --vk-product-superlibrary-bg: #4a2a22;
  --vk-product-superlibrary-fg: #ffc2a3;
  --vk-product-supermessage-bg: #2f2850;
  --vk-product-supermessage-fg: #d3c7ff;
  --vk-product-superpipeline-bg: #4a3f12;
  --vk-product-superpipeline-fg: #ffe48a;
  --vk-product-superwitness-bg: #1f3b2c;
  --vk-product-superwitness-fg: #aee6c3;
  --vk-radius-lg: 10px;
  --vk-radius-md: 8px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 4px;
  --vk-sky-dawn-bottom: #1e1a19;
  --vk-sky-dawn-sun: #f06a43;
  --vk-sky-dawn-text: #ede7dc;
  --vk-sky-dawn-top: #1e1a19;
  --vk-sky-dusk-bottom: #1b181a;
  --vk-sky-dusk-sun: #f06a43;
  --vk-sky-dusk-text: #ede7dc;
  --vk-sky-dusk-top: #1b181a;
  --vk-sky-golden-bottom: #1d1a15;
  --vk-sky-golden-sun: #f06a43;
  --vk-sky-golden-text: #ede7dc;
  --vk-sky-golden-top: #1d1a15;
  --vk-sky-morning-bottom: #191a19;
  --vk-sky-morning-sun: #f06a43;
  --vk-sky-morning-text: #ede7dc;
  --vk-sky-morning-top: #191a19;
  --vk-sky-night-bottom: #17161a;
  --vk-sky-night-sun: #f06a43;
  --vk-sky-night-text: #ede7dc;
  --vk-sky-night-top: #17161a;
  --vk-sky-noon-bottom: #1a1916;
  --vk-sky-noon-sun: #f06a43;
  --vk-sky-noon-text: #ede7dc;
  --vk-sky-noon-top: #1a1916;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #33302a;
  --vk-stage-2: #48443c;
  --vk-stage-3: #5e594f;
  --vk-stage-4: #7a7468;
  --vk-stage-5: #a39c90;
  --vk-stage-6: #a9cdb2;
  --vk-stage-7: #ede7dc;
  --vk-target-min: 44px;
}

[data-vibe="studio"][data-theme="light"] {
  color-scheme: light;
  --vk-color-accent: #3f6db9;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-text: #3c67af;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-bg: #f6f3ec;
  --vk-color-danger: #b01e2e;
  --vk-color-danger-fg: #f6f3ec;
  --vk-color-danger-wash: #f5dcda;
  --vk-color-faint: #6b655b;
  --vk-color-ground: #e6e1d5;
  --vk-color-line: #d8d2c5;
  --vk-color-muted: #5c564d;
  --vk-color-primary: #15130f;
  --vk-color-primary-fg: #f6f3ec;
  --vk-color-raised: #fbf9f4;
  --vk-color-rule: #15130f;
  --vk-color-signal: #e8461c;
  --vk-color-signal-text: #b2300c;
  --vk-color-signal-wash: #fbe5da;
  --vk-color-stage-text: #2b3f8c;
  --vk-color-success: #354e92;
  --vk-color-success-text: #233772;
  --vk-color-success-wash: #e4e8f4;
  --vk-color-surface: #eeeae0;
  --vk-color-text: #15130f;
  --vk-face-ink: #15130f;
  --vk-font-body: "Archivo Variable", system-ui, sans-serif;
  --vk-font-display: "Archivo Variable", system-ui, sans-serif;
  --vk-font-mono: "Azeret Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Newsreader Variable", "Georgia", serif;
  --vk-lift: 2px;
  --vk-mood-done: #fff;
  --vk-mood-needs: #ffb398;
  --vk-mood-resting: #c7c2b8;
  --vk-mood-thinking: #e4e8f4;
  --vk-mood-working: #d3dbef;
  --vk-motion-base: 200ms;
  --vk-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --vk-motion-fast: 120ms;
  --vk-product-accounts-bg: #ddefc6;
  --vk-product-accounts-fg: #2e5212;
  --vk-product-agentpod-bg: #dcebff;
  --vk-product-agentpod-fg: #1e3e66;
  --vk-product-superlibrary-bg: #ffd9c2;
  --vk-product-superlibrary-fg: #7a2e14;
  --vk-product-supermessage-bg: #e6deff;
  --vk-product-supermessage-fg: #3e2f86;
  --vk-product-superpipeline-bg: #ffefa8;
  --vk-product-superpipeline-fg: #5e4a00;
  --vk-product-superwitness-bg: #cdefd9;
  --vk-product-superwitness-fg: #1d5a35;
  --vk-radius-lg: 4px;
  --vk-radius-md: 2px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 2px;
  --vk-sky-dawn-bottom: #f6f3ec;
  --vk-sky-dawn-sun: #ff9f8a;
  --vk-sky-dawn-text: #15130f;
  --vk-sky-dawn-top: #f6f3ec;
  --vk-sky-dusk-bottom: #f6f3ec;
  --vk-sky-dusk-sun: #b9a6ee;
  --vk-sky-dusk-text: #15130f;
  --vk-sky-dusk-top: #f6f3ec;
  --vk-sky-golden-bottom: #f6f3ec;
  --vk-sky-golden-sun: #ffb04d;
  --vk-sky-golden-text: #15130f;
  --vk-sky-golden-top: #f6f3ec;
  --vk-sky-morning-bottom: #f6f3ec;
  --vk-sky-morning-sun: #9ec9ff;
  --vk-sky-morning-text: #15130f;
  --vk-sky-morning-top: #f6f3ec;
  --vk-sky-night-bottom: #f6f3ec;
  --vk-sky-night-sun: #6b7bd6;
  --vk-sky-night-text: #15130f;
  --vk-sky-night-top: #f6f3ec;
  --vk-sky-noon-bottom: #f6f3ec;
  --vk-sky-noon-sun: #ffe58a;
  --vk-sky-noon-text: #15130f;
  --vk-sky-noon-top: #f6f3ec;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #c9d3ec;
  --vk-stage-2: #a9b9e0;
  --vk-stage-3: #879dd3;
  --vk-stage-4: #6680c2;
  --vk-stage-5: #4a65ad;
  --vk-stage-6: #354e92;
  --vk-stage-7: #233772;
  --vk-target-min: 44px;
}

[data-vibe="studio"][data-theme="dark"] {
  color-scheme: dark;
  --vk-color-accent: #638fd8;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-text: #6c96dc;
  --vk-color-accent-wash: #202d41;
  --vk-color-bg: #14130f;
  --vk-color-danger: #ff9a9a;
  --vk-color-danger-fg: #14130f;
  --vk-color-danger-wash: #3f1c1c;
  --vk-color-faint: #8f887d;
  --vk-color-ground: #0c0b09;
  --vk-color-line: #36332c;
  --vk-color-muted: #aaa398;
  --vk-color-primary: #f1ede4;
  --vk-color-primary-fg: #14130f;
  --vk-color-raised: #23211c;
  --vk-color-rule: #f1ede4;
  --vk-color-signal: #ff6a3d;
  --vk-color-signal-text: #ff8d68;
  --vk-color-signal-wash: #351f15;
  --vk-color-stage-text: #a3b6ec;
  --vk-color-success: #93a7da;
  --vk-color-success-text: #a3b6ec;
  --vk-color-success-wash: #23283a;
  --vk-color-surface: #1c1b17;
  --vk-color-text: #f1ede4;
  --vk-face-ink: #14130f;
  --vk-font-body: "Archivo Variable", system-ui, sans-serif;
  --vk-font-display: "Archivo Variable", system-ui, sans-serif;
  --vk-font-mono: "Azeret Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Newsreader Variable", "Georgia", serif;
  --vk-lift: 2px;
  --vk-mood-done: #e6e2d8;
  --vk-mood-needs: #ff8d68;
  --vk-mood-resting: #837d72;
  --vk-mood-thinking: #9aa6c6;
  --vk-mood-working: #7f8fb8;
  --vk-motion-base: 200ms;
  --vk-motion-easing: cubic-bezier(0.2, 0, 0, 1);
  --vk-motion-fast: 120ms;
  --vk-product-accounts-bg: #26391a;
  --vk-product-accounts-fg: #c6e8a6;
  --vk-product-agentpod-bg: #1e2f4a;
  --vk-product-agentpod-fg: #b9d6ff;
  --vk-product-superlibrary-bg: #4a2a22;
  --vk-product-superlibrary-fg: #ffc2a3;
  --vk-product-supermessage-bg: #2f2850;
  --vk-product-supermessage-fg: #d3c7ff;
  --vk-product-superpipeline-bg: #4a3f12;
  --vk-product-superpipeline-fg: #ffe48a;
  --vk-product-superwitness-bg: #1f3b2c;
  --vk-product-superwitness-fg: #aee6c3;
  --vk-radius-lg: 4px;
  --vk-radius-md: 2px;
  --vk-radius-pill: 999px;
  --vk-radius-sm: 2px;
  --vk-sky-dawn-bottom: #14130f;
  --vk-sky-dawn-sun: #ff9f8a;
  --vk-sky-dawn-text: #f1ede4;
  --vk-sky-dawn-top: #14130f;
  --vk-sky-dusk-bottom: #14130f;
  --vk-sky-dusk-sun: #b9a6ee;
  --vk-sky-dusk-text: #f1ede4;
  --vk-sky-dusk-top: #14130f;
  --vk-sky-golden-bottom: #14130f;
  --vk-sky-golden-sun: #ffb04d;
  --vk-sky-golden-text: #f1ede4;
  --vk-sky-golden-top: #14130f;
  --vk-sky-morning-bottom: #14130f;
  --vk-sky-morning-sun: #9ec9ff;
  --vk-sky-morning-text: #f1ede4;
  --vk-sky-morning-top: #14130f;
  --vk-sky-night-bottom: #14130f;
  --vk-sky-night-sun: #6b7bd6;
  --vk-sky-night-text: #f1ede4;
  --vk-sky-night-top: #14130f;
  --vk-sky-noon-bottom: #14130f;
  --vk-sky-noon-sun: #ffe58a;
  --vk-sky-noon-text: #f1ede4;
  --vk-sky-noon-top: #14130f;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #2a3864;
  --vk-stage-2: #33467d;
  --vk-stage-3: #3f5797;
  --vk-stage-4: #5470b4;
  --vk-stage-5: #7189c8;
  --vk-stage-6: #93a7da;
  --vk-stage-7: #bccaee;
  --vk-target-min: 44px;
}

[data-vibe="quiet"][data-theme="light"] {
  color-scheme: light;
  --vk-color-accent: #4a75bb;
  --vk-color-accent-fg: #fff;
  --vk-color-accent-text: #456daf;
  --vk-color-accent-wash: #ebf2ff;
  --vk-color-bg: #fff;
  --vk-color-danger: #111113;
  --vk-color-danger-fg: #fff;
  --vk-color-danger-wash: #f4f4f5;
  --vk-color-faint: #63636b;
  --vk-color-ground: #d4d4d8;
  --vk-color-line: #d4d4d8;
  --vk-color-muted: #52525b;
  --vk-color-primary: #111113;
  --vk-color-primary-fg: #fff;
  --vk-color-raised: #e4e4e7;
  --vk-color-rule: #111113;
  --vk-color-signal: #c2410c;
  --vk-color-signal-text: #c2410c;
  --vk-color-signal-wash: #fff1e8;
  --vk-color-stage-text: #15803d;
  --vk-color-success: #15803d;
  --vk-color-success-text: #15803d;
  --vk-color-success-wash: #ecfdf3;
  --vk-color-surface: #f4f4f5;
  --vk-color-text: #111113;
  --vk-face-ink: #23233a;
  --vk-font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --vk-font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --vk-lift: 0px;
  --vk-mood-done: #ffefa8;
  --vk-mood-needs: #ffd9c2;
  --vk-mood-resting: #ece6f5;
  --vk-mood-thinking: #dcebff;
  --vk-mood-working: #cdefd9;
  --vk-motion-base: 0ms;
  --vk-motion-easing: cubic-bezier(0, 0, 1, 1);
  --vk-motion-fast: 0ms;
  --vk-product-accounts-bg: #ddefc6;
  --vk-product-accounts-fg: #2e5212;
  --vk-product-agentpod-bg: #dcebff;
  --vk-product-agentpod-fg: #1e3e66;
  --vk-product-superlibrary-bg: #ffd9c2;
  --vk-product-superlibrary-fg: #7a2e14;
  --vk-product-supermessage-bg: #e6deff;
  --vk-product-supermessage-fg: #3e2f86;
  --vk-product-superpipeline-bg: #ffefa8;
  --vk-product-superpipeline-fg: #5e4a00;
  --vk-product-superwitness-bg: #cdefd9;
  --vk-product-superwitness-fg: #1d5a35;
  --vk-radius-lg: 6px;
  --vk-radius-md: 4px;
  --vk-radius-pill: 6px;
  --vk-radius-sm: 2px;
  --vk-sky-dawn-bottom: #fff;
  --vk-sky-dawn-sun: #fff;
  --vk-sky-dawn-text: #111113;
  --vk-sky-dawn-top: #fff;
  --vk-sky-dusk-bottom: #fff;
  --vk-sky-dusk-sun: #fff;
  --vk-sky-dusk-text: #111113;
  --vk-sky-dusk-top: #fff;
  --vk-sky-golden-bottom: #fff;
  --vk-sky-golden-sun: #fff;
  --vk-sky-golden-text: #111113;
  --vk-sky-golden-top: #fff;
  --vk-sky-morning-bottom: #fff;
  --vk-sky-morning-sun: #fff;
  --vk-sky-morning-text: #111113;
  --vk-sky-morning-top: #fff;
  --vk-sky-night-bottom: #fff;
  --vk-sky-night-sun: #fff;
  --vk-sky-night-text: #111113;
  --vk-sky-night-top: #fff;
  --vk-sky-noon-bottom: #fff;
  --vk-sky-noon-sun: #fff;
  --vk-sky-noon-text: #111113;
  --vk-sky-noon-top: #fff;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #e4e4e7;
  --vk-stage-2: #d4d4d8;
  --vk-stage-3: #a1a1aa;
  --vk-stage-4: #71717a;
  --vk-stage-5: #52525b;
  --vk-stage-6: #15803d;
  --vk-stage-7: #111113;
  --vk-target-min: 44px;
}

[data-vibe="quiet"][data-theme="dark"] {
  color-scheme: dark;
  --vk-color-accent: #638cce;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-text: #6f96d6;
  --vk-color-accent-wash: #212d40;
  --vk-color-bg: #0e0e10;
  --vk-color-danger: #fafafa;
  --vk-color-danger-fg: #0e0e10;
  --vk-color-danger-wash: #18181b;
  --vk-color-faint: #a1a1aa;
  --vk-color-ground: #000;
  --vk-color-line: #3f3f46;
  --vk-color-muted: #b4b4bc;
  --vk-color-primary: #fafafa;
  --vk-color-primary-fg: #0e0e10;
  --vk-color-raised: #27272a;
  --vk-color-rule: #fafafa;
  --vk-color-signal: #fb923c;
  --vk-color-signal-text: #fb923c;
  --vk-color-signal-wash: #2a1a0f;
  --vk-color-stage-text: #4ade80;
  --vk-color-success: #4ade80;
  --vk-color-success-text: #4ade80;
  --vk-color-success-wash: #0f2a1a;
  --vk-color-surface: #18181b;
  --vk-color-text: #fafafa;
  --vk-face-ink: #23233a;
  --vk-font-body: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --vk-font-display: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --vk-font-mono: "Martian Mono Variable", ui-monospace, monospace;
  --vk-font-serif: "Atkinson Hyperlegible Next", system-ui, sans-serif;
  --vk-lift: 0px;
  --vk-mood-done: #f2dc7e;
  --vk-mood-needs: #ffb898;
  --vk-mood-resting: #c4beda;
  --vk-mood-thinking: #a9c8f2;
  --vk-mood-working: #9fd9b4;
  --vk-motion-base: 0ms;
  --vk-motion-easing: cubic-bezier(0, 0, 1, 1);
  --vk-motion-fast: 0ms;
  --vk-product-accounts-bg: #26391a;
  --vk-product-accounts-fg: #c6e8a6;
  --vk-product-agentpod-bg: #1e2f4a;
  --vk-product-agentpod-fg: #b9d6ff;
  --vk-product-superlibrary-bg: #4a2a22;
  --vk-product-superlibrary-fg: #ffc2a3;
  --vk-product-supermessage-bg: #2f2850;
  --vk-product-supermessage-fg: #d3c7ff;
  --vk-product-superpipeline-bg: #4a3f12;
  --vk-product-superpipeline-fg: #ffe48a;
  --vk-product-superwitness-bg: #1f3b2c;
  --vk-product-superwitness-fg: #aee6c3;
  --vk-radius-lg: 6px;
  --vk-radius-md: 4px;
  --vk-radius-pill: 6px;
  --vk-radius-sm: 2px;
  --vk-sky-dawn-bottom: #0e0e10;
  --vk-sky-dawn-sun: #0e0e10;
  --vk-sky-dawn-text: #fafafa;
  --vk-sky-dawn-top: #0e0e10;
  --vk-sky-dusk-bottom: #0e0e10;
  --vk-sky-dusk-sun: #0e0e10;
  --vk-sky-dusk-text: #fafafa;
  --vk-sky-dusk-top: #0e0e10;
  --vk-sky-golden-bottom: #0e0e10;
  --vk-sky-golden-sun: #0e0e10;
  --vk-sky-golden-text: #fafafa;
  --vk-sky-golden-top: #0e0e10;
  --vk-sky-morning-bottom: #0e0e10;
  --vk-sky-morning-sun: #0e0e10;
  --vk-sky-morning-text: #fafafa;
  --vk-sky-morning-top: #0e0e10;
  --vk-sky-night-bottom: #0e0e10;
  --vk-sky-night-sun: #0e0e10;
  --vk-sky-night-text: #fafafa;
  --vk-sky-night-top: #0e0e10;
  --vk-sky-noon-bottom: #0e0e10;
  --vk-sky-noon-sun: #0e0e10;
  --vk-sky-noon-text: #fafafa;
  --vk-sky-noon-top: #0e0e10;
  --vk-space-1: 4px;
  --vk-space-2: 8px;
  --vk-space-3: 12px;
  --vk-space-4: 16px;
  --vk-space-5: 24px;
  --vk-space-6: 32px;
  --vk-space-7: 48px;
  --vk-stage-1: #27272a;
  --vk-stage-2: #3f3f46;
  --vk-stage-3: #52525b;
  --vk-stage-4: #71717a;
  --vk-stage-5: #a1a1aa;
  --vk-stage-6: #4ade80;
  --vk-stage-7: #fafafa;
  --vk-target-min: 44px;
}
}
@layer vk.tokens {
/* Generated by scripts/build-accents.ts from tokens/source/accents.ts and the OKLCH stage formula. Do not edit. */

[data-vibe="daylight"][data-theme="light"][data-accent="gold"],
[data-vibe="daylight"][data-theme="light"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #866f00;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #f8f1d3;
  --vk-color-accent-text: #806b00;
}

[data-vibe="daylight"][data-theme="light"][data-accent="moss"],
[data-vibe="daylight"][data-theme="light"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #557c00;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #e8f6d9;
  --vk-color-accent-text: #527700;
}

[data-vibe="daylight"][data-theme="light"][data-accent="jade"],
[data-vibe="daylight"][data-theme="light"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #008249;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #dcf9e5;
  --vk-color-accent-text: #007c46;
}

[data-vibe="daylight"][data-theme="light"][data-accent="teal"] {
  --vk-color-accent: #007f7c;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #d3f9f7;
  --vk-color-accent-text: #007a77;
}

[data-vibe="daylight"][data-theme="light"][data-accent="azure"] {
  --vk-color-accent: #007aa2;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #dff4ff;
  --vk-color-accent-text: #00759c;
}

[data-vibe="daylight"][data-theme="light"][data-accent="cobalt"],
[data-vibe="daylight"][data-theme="light"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #3a6fc8;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-accent-text: #376abd;
}

[data-vibe="daylight"][data-theme="light"][data-accent="violet"],
[data-vibe="daylight"][data-theme="light"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #7561c5;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #efeeff;
  --vk-color-accent-text: #6f5cbb;
}

[data-vibe="daylight"][data-theme="light"][data-accent="plum"],
[data-vibe="daylight"][data-theme="light"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #aa4f99;
  --vk-color-accent-fg: #fff8ee;
  --vk-color-accent-wash: #ffe8f9;
  --vk-color-accent-text: #a04b90;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="gold"],
[data-vibe="daylight"][data-theme="dark"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #ac9000;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #352c09;
  --vk-color-accent-text: #ae9319;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="moss"],
[data-vibe="daylight"][data-theme="dark"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #759d37;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #253114;
  --vk-color-accent-text: #7ca243;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="jade"],
[data-vibe="daylight"][data-theme="dark"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #33a566;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #143421;
  --vk-color-accent-text: #42a96e;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="teal"] {
  --vk-color-accent: #00a39f;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #003433;
  --vk-color-accent-text: #00a8a4;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="azure"] {
  --vk-color-accent: #009cce;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #093141;
  --vk-color-accent-text: #08a1d4;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="cobalt"],
[data-vibe="daylight"][data-theme="dark"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #5f92e7;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #1d2d46;
  --vk-color-accent-text: #6595e6;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="violet"],
[data-vibe="daylight"][data-theme="dark"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #9585e4;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #2c2845;
  --vk-color-accent-text: #9788e2;
}

[data-vibe="daylight"][data-theme="dark"][data-accent="plum"],
[data-vibe="daylight"][data-theme="dark"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #ca73b8;
  --vk-color-accent-fg: #17162a;
  --vk-color-accent-wash: #3c2237;
  --vk-color-accent-text: #c977b8;
}

[data-vibe="paper"][data-theme="light"][data-accent="gold"],
[data-vibe="paper"][data-theme="light"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #83701f;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #f5f0dd;
  --vk-color-accent-text: #7c6a1f;
}

[data-vibe="paper"][data-theme="light"][data-accent="moss"],
[data-vibe="paper"][data-theme="light"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #5e7936;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #ebf4e1;
  --vk-color-accent-text: #5a7435;
}

[data-vibe="paper"][data-theme="light"][data-accent="jade"],
[data-vibe="paper"][data-theme="light"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #357e53;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #e3f6e9;
  --vk-color-accent-text: #357950;
}

[data-vibe="paper"][data-theme="light"][data-accent="teal"] {
  --vk-color-accent: #007e7b;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #ddf6f5;
  --vk-color-accent-text: #007976;
}

[data-vibe="paper"][data-theme="light"][data-accent="azure"] {
  --vk-color-accent: #19799d;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #dff4ff;
  --vk-color-accent-text: #1c7496;
}

[data-vibe="paper"][data-theme="light"][data-accent="cobalt"],
[data-vibe="paper"][data-theme="light"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #4e71ab;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-accent-text: #4b6ca3;
}

[data-vibe="paper"][data-theme="light"][data-accent="violet"],
[data-vibe="paper"][data-theme="light"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #7368aa;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #efeeff;
  --vk-color-accent-text: #6d63a1;
}

[data-vibe="paper"][data-theme="light"][data-accent="plum"],
[data-vibe="paper"][data-theme="light"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #985d8c;
  --vk-color-accent-fg: #fbf8f2;
  --vk-color-accent-wash: #fceaf7;
  --vk-color-accent-text: #905985;
}

[data-vibe="paper"][data-theme="dark"][data-accent="gold"],
[data-vibe="paper"][data-theme="dark"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #a3914c;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #322c18;
  --vk-color-accent-text: #a59453;
}

[data-vibe="paper"][data-theme="dark"][data-accent="moss"],
[data-vibe="paper"][data-theme="dark"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #809b5d;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #28301d;
  --vk-color-accent-text: #849e63;
}

[data-vibe="paper"][data-theme="dark"][data-accent="jade"],
[data-vibe="paper"][data-theme="dark"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #5fa076;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #1f3225;
  --vk-color-accent-text: #66a47c;
}

[data-vibe="paper"][data-theme="dark"][data-accent="teal"] {
  --vk-color-accent: #3ca19e;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #163231;
  --vk-color-accent-text: #48a4a1;
}

[data-vibe="paper"][data-theme="dark"][data-accent="azure"] {
  --vk-color-accent: #4e9bbe;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #1a303a;
  --vk-color-accent-text: #579fc0;
}

[data-vibe="paper"][data-theme="dark"][data-accent="cobalt"],
[data-vibe="paper"][data-theme="dark"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #7194cb;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #232d3e;
  --vk-color-accent-text: #7596cb;
}

[data-vibe="paper"][data-theme="dark"][data-accent="violet"],
[data-vibe="paper"][data-theme="dark"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #938ac9;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #2c2a3c;
  --vk-color-accent-text: #958dc8;
}

[data-vibe="paper"][data-theme="dark"][data-accent="plum"],
[data-vibe="paper"][data-theme="dark"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #b980ac;
  --vk-color-accent-fg: #1a1916;
  --vk-color-accent-wash: #372633;
  --vk-color-accent-text: #b983ad;
}

[data-vibe="studio"][data-theme="light"][data-accent="gold"],
[data-vibe="studio"][data-theme="light"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #826c00;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #f7f0d9;
  --vk-color-accent-text: #7c6700;
  --vk-stage-1: #dad4b9;
  --vk-stage-2: #c5ba90;
  --vk-stage-3: #af9e60;
  --vk-stage-4: #96812e;
  --vk-stage-5: #7d6800;
  --vk-stage-6: #625100;
  --vk-stage-7: #483b00;
  --vk-color-stage-text: #7c6700;
  --vk-color-success: #625100;
  --vk-color-success-text: #7c6700;
  --vk-color-success-wash: #f7f0d9;
}

[data-vibe="studio"][data-theme="light"][data-accent="moss"],
[data-vibe="studio"][data-theme="light"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #557813;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #eaf5de;
  --vk-color-accent-text: #517214;
  --vk-stage-1: #ccd8bf;
  --vk-stage-2: #afc19a;
  --vk-stage-3: #8fa970;
  --vk-stage-4: #708e47;
  --vk-stage-5: #557520;
  --vk-stage-6: #405e00;
  --vk-stage-7: #2d4400;
  --vk-color-stage-text: #517214;
  --vk-color-success: #405e00;
  --vk-color-success-text: #517214;
  --vk-color-success-wash: #eaf5de;
}

[data-vibe="studio"][data-theme="light"][data-accent="jade"],
[data-vibe="studio"][data-theme="light"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #007e46;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #e0f7e7;
  --vk-color-accent-text: #047844;
  --vk-stage-1: #c2dbc9;
  --vk-stage-2: #9dc5aa;
  --vk-stage-3: #73ae88;
  --vk-stage-4: #489566;
  --vk-stage-5: #1b7d4a;
  --vk-stage-6: #006337;
  --vk-stage-7: #004926;
  --vk-color-stage-text: #047844;
  --vk-color-success: #006337;
  --vk-color-success-text: #047844;
  --vk-color-success-wash: #e0f7e7;
}

[data-vibe="studio"][data-theme="light"][data-accent="teal"] {
  --vk-color-accent: #007b79;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #d9f7f6;
  --vk-color-accent-text: #007572;
  --vk-stage-1: #b9dbd9;
  --vk-stage-2: #8ec6c3;
  --vk-stage-3: #58afac;
  --vk-stage-4: #009693;
  --vk-stage-5: #007976;
  --vk-stage-6: #005f5d;
  --vk-stage-7: #004644;
  --vk-color-stage-text: #007572;
  --vk-color-success: #005f5d;
  --vk-color-success-text: #007572;
  --vk-color-success-wash: #d9f7f6;
}

[data-vibe="studio"][data-theme="light"][data-accent="azure"] {
  --vk-color-accent: #00759c;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #dff4ff;
  --vk-color-accent-text: #007096;
  --vk-stage-1: #bcd8e7;
  --vk-stage-2: #94c1d8;
  --vk-stage-3: #64a8c9;
  --vk-stage-4: #2e8eb5;
  --vk-stage-5: #007399;
  --vk-stage-6: #005b79;
  --vk-stage-7: #004259;
  --vk-color-stage-text: #007096;
  --vk-color-success: #005b79;
  --vk-color-success-text: #007096;
  --vk-color-success-wash: #dff4ff;
}

[data-vibe="studio"][data-theme="light"][data-accent="cobalt"],
[data-vibe="studio"][data-theme="light"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #3f6db9;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #e8f1ff;
  --vk-color-accent-text: #3c67af;
  --vk-stage-1: #c6d4ec;
  --vk-stage-2: #a4bbdf;
  --vk-stage-3: #809fd3;
  --vk-stage-4: #5d83c1;
  --vk-stage-5: #3f68ac;
  --vk-stage-6: #295192;
  --vk-stage-7: #173972;
  --vk-color-stage-text: #3c67af;
  --vk-color-success: #295192;
  --vk-color-success-text: #3c67af;
  --vk-color-success-wash: #e8f1ff;
}

[data-vibe="studio"][data-theme="light"][data-accent="violet"],
[data-vibe="studio"][data-theme="light"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #7161b7;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #efeeff;
  --vk-color-accent-text: #6b5cad;
  --vk-stage-1: #d2d0ea;
  --vk-stage-2: #b8b4dd;
  --vk-stage-3: #9d96d0;
  --vk-stage-4: #8277bd;
  --vk-stage-5: #695ba8;
  --vk-stage-6: #53448d;
  --vk-stage-7: #3d2f6e;
  --vk-color-stage-text: #6b5cad;
  --vk-color-success: #53448d;
  --vk-color-success-text: #6b5cad;
  --vk-color-success-wash: #efeeff;
}

[data-vibe="studio"][data-theme="light"][data-accent="plum"],
[data-vibe="studio"][data-theme="light"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #9f5190;
  --vk-color-accent-fg: #f6f3ec;
  --vk-color-accent-wash: #ffe9f9;
  --vk-color-accent-text: #974e88;
  --vk-stage-1: #e3cbdd;
  --vk-stage-2: #d2acc9;
  --vk-stage-3: #c08bb3;
  --vk-stage-4: #a96a9c;
  --vk-stage-5: #924c84;
  --vk-stage-6: #78366c;
  --vk-stage-7: #5b2251;
  --vk-color-stage-text: #974e88;
  --vk-color-success: #78366c;
  --vk-color-success-text: #974e88;
  --vk-color-success-wash: #ffe9f9;
}

[data-vibe="studio"][data-theme="dark"][data-accent="gold"],
[data-vibe="studio"][data-theme="dark"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #a58c26;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #332c13;
  --vk-color-accent-text: #ab9337;
  --vk-stage-1: #473a00;
  --vk-stage-2: #584800;
  --vk-stage-3: #6c5900;
  --vk-stage-4: #87710a;
  --vk-stage-5: #9e8a3e;
  --vk-stage-6: #b8a86f;
  --vk-stage-7: #d5cba4;
  --vk-color-stage-text: #ab9337;
  --vk-color-success: #b8a86f;
  --vk-color-success-text: #ab9337;
  --vk-color-success-wash: #332c13;
}

[data-vibe="studio"][data-theme="dark"][data-accent="moss"],
[data-vibe="studio"][data-theme="dark"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #769945;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #26311a;
  --vk-color-accent-text: #7fa151;
  --vk-stage-1: #2f420f;
  --vk-stage-2: #3a5311;
  --vk-stage-3: #496619;
  --vk-stage-4: #607f32;
  --vk-stage-5: #7a9753;
  --vk-stage-6: #9ab27d;
  --vk-stage-7: #c0d2ad;
  --vk-color-stage-text: #7fa151;
  --vk-color-success: #9ab27d;
  --vk-color-success-text: #7fa151;
  --vk-color-success-wash: #26311a;
}

[data-vibe="studio"][data-theme="dark"][data-accent="jade"],
[data-vibe="studio"][data-theme="dark"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #439e69;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #1b3323;
  --vk-color-accent-text: #52a773;
  --vk-stage-1: #0c4728;
  --vk-stage-2: #0c5832;
  --vk-stage-3: #146c3f;
  --vk-stage-4: #318656;
  --vk-stage-5: #569d71;
  --vk-stage-6: #80b793;
  --vk-stage-7: #b0d5bc;
  --vk-color-stage-text: #52a773;
  --vk-color-success: #80b793;
  --vk-color-success-text: #52a773;
  --vk-color-success-wash: #1b3323;
}

[data-vibe="studio"][data-theme="dark"][data-accent="teal"] {
  --vk-color-accent: #009f9b;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #0e3332;
  --vk-color-accent-text: #00a8a4;
  --vk-stage-1: #004543;
  --vk-stage-2: #005553;
  --vk-stage-3: #006966;
  --vk-stage-4: #008481;
  --vk-stage-5: #2a9e9b;
  --vk-stage-6: #6ab8b5;
  --vk-stage-7: #a3d6d3;
  --vk-color-stage-text: #00a8a4;
  --vk-color-success: #6ab8b5;
  --vk-color-success-text: #00a8a4;
  --vk-color-success-wash: #0e3332;
}

[data-vibe="studio"][data-theme="dark"][data-accent="azure"] {
  --vk-color-accent: #2199c7;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #14303d;
  --vk-color-accent-text: #36a0cb;
  --vk-stage-1: #004158;
  --vk-stage-2: #00516d;
  --vk-stage-3: #006485;
  --vk-stage-4: #007ea7;
  --vk-stage-5: #4096bc;
  --vk-stage-6: #73b2d0;
  --vk-stage-7: #a8d2e7;
  --vk-color-stage-text: #36a0cb;
  --vk-color-success: #73b2d0;
  --vk-color-success-text: #36a0cb;
  --vk-color-success-wash: #14303d;
}

[data-vibe="studio"][data-theme="dark"][data-accent="cobalt"],
[data-vibe="studio"][data-theme="dark"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #638fd8;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #202d41;
  --vk-color-accent-text: #6c96dc;
  --vk-stage-1: #213a64;
  --vk-stage-2: #29497c;
  --vk-stage-3: #355a97;
  --vk-stage-4: #4b73b4;
  --vk-stage-5: #678cc7;
  --vk-stage-6: #8caada;
  --vk-stage-7: #b7ccee;
  --vk-color-stage-text: #6c96dc;
  --vk-color-success: #8caada;
  --vk-color-success-text: #6c96dc;
  --vk-color-success-wash: #202d41;
}

[data-vibe="studio"][data-theme="dark"][data-accent="violet"],
[data-vibe="studio"][data-theme="dark"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #9083d4;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #2c2940;
  --vk-color-accent-text: #968ad8;
  --vk-stage-1: #3b3361;
  --vk-stage-2: #4a3f79;
  --vk-stage-3: #5b4e93;
  --vk-stage-4: #7366af;
  --vk-stage-5: #8a81c3;
  --vk-stage-6: #a7a0d7;
  --vk-stage-7: #c9c5ec;
  --vk-color-stage-text: #968ad8;
  --vk-color-success: #a7a0d7;
  --vk-color-success-text: #968ad8;
  --vk-color-success-wash: #2c2940;
}

[data-vibe="studio"][data-theme="dark"][data-accent="plum"],
[data-vibe="studio"][data-theme="dark"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #bf75b0;
  --vk-color-accent-fg: #14130f;
  --vk-color-accent-wash: #3a2535;
  --vk-color-accent-text: #c37db4;
  --vk-stage-1: #542a4b;
  --vk-stage-2: #68335e;
  --vk-stage-3: #7f4173;
  --vk-stage-4: #9a588d;
  --vk-stage-5: #b074a3;
  --vk-stage-6: #c896bc;
  --vk-stage-7: #e1bed8;
  --vk-color-stage-text: #c37db4;
  --vk-color-success: #c896bc;
  --vk-color-success-text: #c37db4;
  --vk-color-success-wash: #3a2535;
}

[data-vibe="quiet"][data-theme="light"][data-accent="gold"],
[data-vibe="quiet"][data-theme="light"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #8a7300;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #f8f2dc;
  --vk-color-accent-text: #806b00;
}

[data-vibe="quiet"][data-theme="light"][data-accent="moss"],
[data-vibe="quiet"][data-theme="light"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #5d7f29;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #ecf6e1;
  --vk-color-accent-text: #587726;
}

[data-vibe="quiet"][data-theme="light"][data-accent="jade"],
[data-vibe="quiet"][data-theme="light"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #248551;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #e3f8e9;
  --vk-color-accent-text: #217c4b;
}

[data-vibe="quiet"][data-theme="light"][data-accent="teal"] {
  --vk-color-accent: #008380;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #dcf9f7;
  --vk-color-accent-text: #007b79;
}

[data-vibe="quiet"][data-theme="light"][data-accent="azure"] {
  --vk-color-accent: #007ea7;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #e2f5ff;
  --vk-color-accent-text: #00759c;
}

[data-vibe="quiet"][data-theme="light"][data-accent="cobalt"],
[data-vibe="quiet"][data-theme="light"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #4a75bb;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #ebf2ff;
  --vk-color-accent-text: #456daf;
}

[data-vibe="quiet"][data-theme="light"][data-accent="violet"],
[data-vibe="quiet"][data-theme="light"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #786ab9;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #f1f0ff;
  --vk-color-accent-text: #6e62ac;
}

[data-vibe="quiet"][data-theme="light"][data-accent="plum"],
[data-vibe="quiet"][data-theme="light"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #a45c95;
  --vk-color-accent-fg: #ffffff;
  --vk-color-accent-wash: #ffebfa;
  --vk-color-accent-text: #98548a;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="gold"],
[data-vibe="quiet"][data-theme="dark"][data-accent="product"][data-product="superpipeline"] {
  --vk-color-accent: #a18a31;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #332c15;
  --vk-color-accent-text: #a99442;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="moss"],
[data-vibe="quiet"][data-theme="dark"][data-accent="product"][data-product="accounts"] {
  --vk-color-accent: #769649;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #27301b;
  --vk-color-accent-text: #81a057;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="jade"],
[data-vibe="quiet"][data-theme="dark"][data-accent="product"][data-product="superwitness"] {
  --vk-color-accent: #489a69;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #1c3224;
  --vk-color-accent-text: #59a576;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="teal"] {
  --vk-color-accent: #009c99;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #113332;
  --vk-color-accent-text: #29a7a4;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="azure"] {
  --vk-color-accent: #3096c0;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #16303c;
  --vk-color-accent-text: #439fc7;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="cobalt"],
[data-vibe="quiet"][data-theme="dark"][data-accent="product"][data-product="agentpod"] {
  --vk-color-accent: #638cce;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #212d40;
  --vk-color-accent-text: #6f96d6;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="violet"],
[data-vibe="quiet"][data-theme="dark"][data-accent="product"][data-product="supermessage"] {
  --vk-color-accent: #8d82cc;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #2c293f;
  --vk-color-accent-text: #968cd3;
}

[data-vibe="quiet"][data-theme="dark"][data-accent="plum"],
[data-vibe="quiet"][data-theme="dark"][data-accent="product"][data-product="superlibrary"] {
  --vk-color-accent: #b974aa;
  --vk-color-accent-fg: #0e0e10;
  --vk-color-accent-wash: #392534;
  --vk-color-accent-text: #c07fb2;
}
}
@layer vk.tokens {
/* Derived tokens (component spec §3.4). They mix other tokens, so they cannot be DTCG hex.
   They are declared on every element that carries a look ([data-vibe]), not only :root, so a nested vibe
   (a preview, a story) mixes its own colours: a custom property is computed where it is declared. */

:root,
[data-vibe][data-theme="light"] {
  --vk-scrim: color-mix(in oklch, var(--vk-color-text) 42%, transparent);
  --vk-shadow-pop: 0 12px 32px -12px color-mix(in oklch, var(--vk-color-text) 22%, transparent);
  --vk-shadow-dialog: 0 24px 60px color-mix(in oklch, var(--vk-color-text) 28%, transparent);
  --vk-shadow-drawer: -24px 0 64px color-mix(in oklch, var(--vk-color-text) 22%, transparent);
  --vk-shadow-sheet: 0 -12px 32px -8px color-mix(in oklch, var(--vk-color-text) 18%, transparent);
  /* The browser's own placeholder grey, said out loud so a product's reset cannot recolour a Field's placeholder. */
  --vk-color-placeholder: rgb(117 117 117);
}

[data-vibe][data-theme="dark"] {
  --vk-scrim: color-mix(in oklch, var(--vk-color-bg) 74%, transparent);
  --vk-shadow-pop: 0 12px 32px -12px color-mix(in oklch, var(--vk-color-bg) 80%, transparent);
  --vk-shadow-dialog: 0 24px 60px color-mix(in oklch, var(--vk-color-bg) 80%, transparent);
  --vk-shadow-drawer: -24px 0 64px color-mix(in oklch, var(--vk-color-bg) 80%, transparent);
  --vk-shadow-sheet: 0 -12px 32px -8px color-mix(in oklch, var(--vk-color-bg) 80%, transparent);
  --vk-color-placeholder: darkgray;
}

:root,
[data-vibe] {
  --vk-shadow-rail: 0 12px 32px -12px var(--vk-color-ground), 0 var(--vk-lift) 0 var(--vk-color-ground);
  --vk-live-halo: color-mix(in oklch, var(--vk-color-success) 35%, transparent);
  --vk-color-select: color-mix(in oklch, var(--vk-color-text) 6%, var(--vk-color-bg));
  --vk-hatch-blocked: repeating-linear-gradient(135deg, var(--vk-stage-5) 0 1.5px, transparent 1.5px 4px);
  --vk-sky-glass: color-mix(in oklch, var(--vk-color-surface) 55%, transparent);
  --vk-sky-glass-hover: color-mix(in oklch, var(--vk-color-surface) 45%, transparent);
  /* Inline code and pre in every product. */
  --vk-code-bg: var(--vk-color-raised);
  /* Warning rows in logs: the only emphasis wash that is not the signal. */
  --vk-warn-row: color-mix(in oklch, var(--vk-mood-done) 35%, transparent);
}

[data-vibe="studio"][data-theme="light"] { --vk-scrim: color-mix(in oklch, var(--vk-color-text) 45%, transparent); }
[data-vibe="studio"][data-theme="dark"] { --vk-scrim: color-mix(in oklch, var(--vk-color-ground) 72%, transparent); }
[data-vibe="paper"][data-theme="light"] { --vk-shadow-dialog: 0 24px 60px color-mix(in oklch, var(--vk-color-text) 20%, transparent); }
[data-vibe="paper"][data-theme="dark"] { --vk-shadow-dialog: 0 24px 60px color-mix(in oklch, var(--vk-color-bg) 80%, transparent); }
[data-vibe="paper"][data-theme] { --vk-hatch-blocked: repeating-linear-gradient(135deg, var(--vk-color-faint) 0 2px, transparent 2px 5px); }
[data-vibe="quiet"][data-theme] { --vk-shadow-pop: none; --vk-shadow-dialog: none; --vk-shadow-drawer: none; --vk-shadow-sheet: none; }
}
@layer vk.tokens {
/* The type scale (component spec §2.5). Components use these font shorthands instead of literal sizes.
   Declared per [data-vibe], so var(--vk-font-*) resolves against that element's look. */

:root,
[data-vibe="daylight"] {
  --vk-type-h1: 700 34px/1.1 var(--vk-font-display);
  --vk-type-h1-stretch: 100%;
  --vk-type-h2: 700 22px/1.2 var(--vk-font-display);
  --vk-type-eyebrow: 700 12px/1.2 var(--vk-font-body);
  --vk-type-meta: 400 14px/1.4 var(--vk-font-body);
  --vk-type-mono: 400 12px/1.4 var(--vk-font-mono);
  --vk-type-quote: 400 17px/1.55 var(--vk-font-body);
  --vk-type-body: 400 16px/1.5 var(--vk-font-body);
}

[data-vibe="paper"] {
  --vk-type-h1: 500 46px/1.04 var(--vk-font-display);
  --vk-type-h1-stretch: 100%;
  --vk-type-h2: 600 28px/1.15 var(--vk-font-display);
  --vk-type-eyebrow: 600 12px/1 var(--vk-font-body);
  --vk-type-meta: 400 14px/1.4 var(--vk-font-body);
  --vk-type-mono: 400 12px/1.4 var(--vk-font-mono);
  --vk-type-quote: 400 20px/1.6 var(--vk-font-display);
  --vk-type-body: 400 16px/1.5 var(--vk-font-body);
}

[data-vibe="studio"] {
  --vk-type-h1: 800 44px/1.02 var(--vk-font-display);
  --vk-type-h1-stretch: 82%;
  --vk-type-h2: 800 16px/1.2 var(--vk-font-body);
  --vk-type-eyebrow: 700 12px/1.25 var(--vk-font-body);
  --vk-type-meta: 500 12px/1.4 var(--vk-font-mono);
  --vk-type-mono: 500 12.5px/1.4 var(--vk-font-mono);
  --vk-type-quote: 400 19px/1.42 var(--vk-font-serif);
  --vk-type-body: 400 14px/1.45 var(--vk-font-body);
}

[data-vibe="quiet"] {
  --vk-type-h1: 700 34px/1.2 var(--vk-font-body);
  --vk-type-h1-stretch: 100%;
  --vk-type-h2: 700 24px/1.3 var(--vk-font-body);
  --vk-type-eyebrow: 700 16px/1.4 var(--vk-font-body);
  --vk-type-meta: 400 16px/1.5 var(--vk-font-body);
  --vk-type-mono: 400 14px/1.4 var(--vk-font-mono);
  --vk-type-quote: 400 18px/1.55 var(--vk-font-body);
  --vk-type-body: 400 18px/1.6 var(--vk-font-body);
}
}
@layer vk.base {
:root {
  --vk-text-sm: clamp(0.8125rem, 0.78rem + 0.15vw, 0.875rem);
  --vk-text-md: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  --vk-text-lg: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --vk-text-xl: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
}

/* On every element with a look, so a nested vibe draws the ring in its own accent. */
:root,
[data-vibe] {
  --vk-focus: 0 0 0 3px var(--vk-color-bg), 0 0 0 5px var(--vk-color-accent);
}

html {
  background: var(--vk-color-bg);
  color: var(--vk-color-text);
  font-family: var(--vk-font-body);
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-size: var(--vk-text-md);
  line-height: 1.5;
}

:focus-visible {
  /* The outline is the ring that always shows: a component's own box-shadow cannot replace it. */
  outline: 2px solid var(--vk-color-accent);
  outline-offset: 2px;
  box-shadow: var(--vk-focus);
}

/* Read by screen readers, not drawn. */
.vk-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A label on a button, tab, labelled icon button or chip never wraps and never shrinks; the row wraps instead. */
.vk-button, .vk-tabs__item, .vk-iconbutton--labelled, .vk-chip {
  white-space: nowrap;
  flex-shrink: 0;
}

/* A control drawn smaller than 44px keeps a 44px target (component spec §2.1). */
.vk-hit { position: relative; }
.vk-hit::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: max(100%, var(--vk-target-min));
  height: max(100%, var(--vk-target-min));
  transform: translate(-50%, -50%);
}

/* Hidden until focused: the skip link. */
.vk-visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A link in the product's accent. */
.vk-link {
  color: var(--vk-color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.vk-link:hover { text-decoration-thickness: 2px; }

@media (prefers-reduced-motion: reduce) {
  :root {
    --vk-motion-fast: 0ms;
    --vk-motion-base: 0ms;
  }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0ms !important;
    scroll-behavior: auto !important;
  }
}

[data-motion="reduce"],
[data-motion="reduce"] *,
[data-motion="reduce"]::before,
[data-motion="reduce"]::after,
[data-motion="reduce"] *::before,
[data-motion="reduce"] *::after {
  --vk-motion-fast: 0ms;
  --vk-motion-base: 0ms;
  animation: none !important;
  transition-duration: 0ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-contrast: more) {
  :root {
    --vk-color-line: var(--vk-color-text);
    --vk-color-faint: var(--vk-color-muted);
  }
}

@media (forced-colors: active) {
  :focus-visible {
    outline: 2px solid CanvasText;
    box-shadow: none;
  }
}
}
@layer vk.components {
/* Usable with or without Svelte: the Svelte components render exactly these classes.
   One file per component, imported here in alphabetical order. All of it sits in @layer vk.components (vibekit.css). */
/* AgentName (component spec §2.4/29). The face is decoration beside the name; a person's initials replace it. */
.vk-agentname { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
.vk-agentname__face { display: inline-flex; flex: none; }
.vk-agentname__role { color: var(--vk-color-muted); font-size: 14px; }
.vk-agentname__name { min-width: 0; color: var(--vk-color-text); font-weight: 700; overflow-wrap: anywhere; }
a.vk-agentname__name { display: inline-flex; align-items: center; min-height: var(--vk-target-min); text-decoration: none; }
a.vk-agentname__name:hover { text-decoration: underline; text-underline-offset: 3px; }
.vk-agentname__initials { flex: none; display: inline-grid; place-items: center; inline-size: var(--_size, var(--_initials)); block-size: var(--_size, var(--_initials)); border-radius: 50%; background: var(--vk-mood-resting); color: var(--vk-face-ink); font: 800 13px / 1 var(--vk-font-body); }
.vk-agentname-stack { display: inline-flex; align-items: center; }
.vk-agentname-stack > * + * { margin-left: -6px; }

/* Person initials per vibe (component spec §2.4/29); an explicit size prop sets --_size and wins. */
.vk-agentname--daylight { --_initials: 40px; }
.vk-agentname--paper { --_initials: 32px; }
.vk-agentname--studio { --_initials: 32px; }
.vk-agentname--quiet { --_initials: 24px; }

/* Paper: an italic Newsreader name; a hairline round the face instead of the mood ring. */
.vk-agentname--paper .vk-agentname__name { font: italic 500 16px / 1.3 var(--vk-font-display); }
.vk-agentname--paper .vk-face,
.vk-agentname--paper .vk-face.vk-face--picture[data-mood] { border-radius: 50%; box-shadow: 0 0 0 1px var(--vk-color-line); }
.vk-agentname--paper .vk-agentname__initials { background: var(--vk-color-raised); color: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-line); font-family: var(--vk-font-display); }

/* Studio: agents round, people square ink. */
.vk-agentname--studio .vk-agentname__name { font: 700 14px / 1.3 var(--vk-font-body); }
.vk-agentname--studio .vk-agentname__role { font: 400 14px / 1.3 var(--vk-font-body); }
.vk-agentname--studio .vk-agentname__initials { border-radius: 0; background: var(--vk-color-text); color: var(--vk-color-bg); font: 800 12px / 1 var(--vk-font-body); }

/* Quiet: a linked name is underlined; initials are an outlined box. */
.vk-agentname--quiet a.vk-agentname__name { text-decoration: underline; text-underline-offset: 4px; }
.vk-agentname--quiet .vk-agentname__initials { border-radius: var(--vk-radius-sm); background: transparent; color: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-text); font-size: 12px; }
/* AgentQuote (component spec §2.4/31). Verbatim agent text: line breaks kept, wraps anywhere, never markup. */
.vk-agentquote { min-width: 0; margin: 0; }
.vk-agentquote__figure { display: flex; flex-direction: column; gap: var(--vk-space-2); min-width: 0; margin: 0; }
.vk-agentquote__by { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vk-agentquote__face { display: inline-flex; flex: none; }
.vk-agentquote__heading { margin: 0; }
.vk-agentquote__meta { color: var(--vk-color-muted); }
.vk-agentquote__text { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.vk-agentquote__text[data-clamped="true"] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--_lines); line-clamp: var(--_lines); overflow: hidden; }
.vk-agentquote__more { align-self: flex-start; min-height: var(--vk-target-min); padding: 0; border: 0; background: transparent; color: var(--vk-color-text); font: 600 var(--vk-text-sm) / 1 var(--vk-font-body); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }

/* Daylight: a speech bubble beside the face; signal wash when a person is needed. */
.vk-agentquote--daylight { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--vk-space-3); align-items: start; }
.vk-agentquote--daylight:not(:has(> .vk-agentquote__face)) { grid-template-columns: minmax(0, 1fr); }
.vk-agentquote--daylight .vk-agentquote__figure { padding: var(--vk-space-4) var(--vk-space-5); border-radius: 6px var(--vk-radius-lg) var(--vk-radius-lg) var(--vk-radius-lg); background: var(--vk-color-raised); }
.vk-agentquote--daylight[data-tone="needs"] .vk-agentquote__figure { background: var(--vk-color-signal-wash); }
.vk-agentquote--daylight[data-tone="done"] .vk-agentquote__figure { background: var(--vk-color-success-wash); }
.vk-agentquote--daylight .vk-agentquote__by { font: 700 var(--vk-text-sm) / 1.2 var(--vk-font-body); }
.vk-agentquote--daylight[data-tone="needs"] .vk-agentquote__by { color: var(--vk-color-signal-text); }
.vk-agentquote--daylight .vk-agentquote__meta { margin-left: auto; font-weight: 600; }
.vk-agentquote--daylight .vk-agentquote__text { font: 400 17px / 1.55 var(--vk-font-body); }

/* Paper: a letter; a signal rule only when a person is needed. */
.vk-agentquote--paper .vk-agentquote__figure { gap: var(--vk-space-3); }
.vk-agentquote--paper .vk-agentquote__heading { color: var(--vk-color-muted); font: 600 12.5px / 1.2 var(--vk-font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.vk-agentquote--paper[data-tone="needs"] .vk-agentquote__figure { padding-left: var(--vk-space-4); border-left: 2px solid var(--vk-color-signal); }
.vk-agentquote--paper[data-tone="needs"] .vk-agentquote__heading { color: var(--vk-color-signal-text); }
.vk-agentquote--paper .vk-agentquote__text { font: 400 1.25rem / 1.6 var(--vk-font-display); }
.vk-agentquote--paper .vk-agentquote__by { gap: var(--vk-space-3); }
.vk-agentquote--paper .vk-agentquote__who { font: italic 500 1.2rem / 1.2 var(--vk-font-display); }
.vk-agentquote--paper .vk-agentquote__meta { font-size: var(--vk-text-sm); }
.vk-agentquote--paper .vk-agentquote__more { font: italic 400 16px / 1 var(--vk-font-display); }
.vk-agentquote--paper .vk-face,
.vk-agentquote--paper .vk-face.vk-face--picture[data-mood] { border-radius: 50%; box-shadow: 0 0 0 1px var(--vk-color-line); }

/* Studio: a 4px rule in the tone, Newsreader words. */
.vk-agentquote--studio .vk-agentquote__figure { padding: 2px 0 0 18px; border-left: 4px solid var(--vk-color-text); }
.vk-agentquote--studio[data-tone="needs"] .vk-agentquote__figure { border-left-color: var(--vk-color-signal); }
.vk-agentquote--studio[data-tone="done"] .vk-agentquote__figure { border-left-color: var(--vk-stage-7); }
.vk-agentquote--studio[data-tone="off"] .vk-agentquote__figure { border-left-color: var(--vk-color-line); }
.vk-agentquote--studio .vk-agentquote__by { flex-wrap: nowrap; align-items: baseline; color: var(--vk-color-text); font: 800 14px / 1.3 var(--vk-font-body); }
.vk-agentquote--studio[data-tone="needs"] .vk-agentquote__by { color: var(--vk-color-signal-text); }
.vk-agentquote--studio .vk-agentquote__meta { margin-left: auto; color: inherit; font: 500 12px / 1.3 var(--vk-font-mono); }
.vk-agentquote--studio .vk-agentquote__text { font: 400 19px / 1.42 var(--vk-font-serif); }
.vk-agentquote--studio .vk-agentquote__more { font: 700 13.5px / 1 var(--vk-font-body); text-decoration-thickness: 1.5px; }

/* Quiet: a 3px signal box when a person is needed; otherwise a plain quote. */
.vk-agentquote--quiet { font: 400 18px / 1.55 var(--vk-font-body); }
fieldset.vk-agentquote--quiet { min-inline-size: 0; margin: 0; padding: 12px 16px 16px; border: 3px solid var(--vk-color-signal); border-radius: var(--vk-radius-sm); }
.vk-agentquote--quiet .vk-agentquote__heading { color: var(--vk-color-text); font: 700 20px / 1.3 var(--vk-font-body); }
legend.vk-agentquote__heading { padding: 0 4px; }
.vk-agentquote--quiet[data-tone="needs"] .vk-agentquote__heading { color: var(--vk-color-signal-text); }
.vk-agentquote--quiet:not([data-tone="needs"]) .vk-agentquote__text { padding-left: 16px; border-left: 2px solid var(--vk-color-line); }
.vk-agentquote--quiet .vk-agentquote__by { font-weight: 700; }
.vk-agentquote--quiet .vk-agentquote__more { font: 400 17px / 1 var(--vk-font-body); text-underline-offset: 4px; }
/* AppearancePicker (Accent-Picker and the Appearance dialog mockup artboards; D14). Nested looks are restyled with
   `.vk-viberoot[data-vibe=…] > …`, never a descendant [data-vibe], which would also match the page's <html>. */
.vk-appearancepicker { display: flex; flex-direction: column; gap: 20px; color: var(--vk-color-text); font-family: var(--vk-font-body); }
.vk-appearancepicker__intro, .vk-appearancepicker__hint, .vk-appearancepicker__means { margin: 4px 0 0; font-size: 14px; color: var(--vk-color-muted); }
.vk-appearancepicker__hint strong { color: var(--vk-color-text); }
.vk-appearancepicker__group { min-width: 0; margin: 0; padding: 0; border: 0; }
.vk-appearancepicker__legend { display: block; padding: 0; font: 700 16px / 1.3 var(--vk-font-display); color: var(--vk-color-text); }
.vk-appearancepicker .vk-segmented { margin-top: 10px; }

/* Vibe cards: each drawn in its own vibe. */
.vk-appearancepicker__vibes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 12px; }
.vk-appearancepicker__vibes > .vk-viberoot { display: grid; }
.vk-appearancepicker__vibe { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 10px 10px 14px; border-radius: var(--vk-radius-md); background: var(--vk-color-bg); color: var(--vk-color-text); box-shadow: inset 0 0 0 2px var(--vk-color-line); font-family: var(--vk-font-body); cursor: pointer; }
.vk-appearancepicker__vibe[data-checked="true"] { box-shadow: inset 0 0 0 3px var(--vk-color-text); }
.vk-appearancepicker__vibe input, .vk-appearancepicker__swatch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.vk-appearancepicker__vibe:focus-within, .vk-appearancepicker__swatch:focus-within { outline: 2px solid var(--vk-color-accent); outline-offset: 3px; }
.vk-appearancepicker__art { display: flex; flex-direction: column; gap: 6px; height: 128px; padding: 0 0 8px; overflow: hidden; border-radius: calc(var(--vk-radius-md) - 6px); background: var(--vk-color-bg); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-appearancepicker__art-top { flex: none; height: 30px; background: var(--vk-color-raised); }
.vk-appearancepicker__art-row { display: flex; align-items: center; gap: 6px; margin: 0 8px; padding: 4px; border-radius: 5px; background: var(--vk-color-surface); }
.vk-appearancepicker__art-row i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--vk-mood-working); }
.vk-appearancepicker__art-row[data-needs="true"] { box-shadow: inset 2px 0 0 var(--vk-color-signal); }
.vk-appearancepicker__art-row[data-needs="true"] i { background: var(--vk-mood-needs); }
.vk-appearancepicker__art-row s { flex: 1; height: 4px; border-radius: 2px; background: var(--vk-color-line); text-decoration: none; }
.vk-appearancepicker__art-ramp { display: none; }
.vk-appearancepicker__name { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; font: 700 19px / 1.1 var(--vk-font-display); }
.vk-appearancepicker__tick { display: grid; place-items: center; width: 24px; height: 24px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--vk-color-faint); color: transparent; }
.vk-appearancepicker__vibe[data-checked="true"] .vk-appearancepicker__tick { border-color: var(--vk-color-text); background: var(--vk-color-text); color: var(--vk-color-bg); }
.vk-appearancepicker__swatches { display: flex; gap: 4px; padding: 0 4px; }
.vk-appearancepicker__swatches i { width: 18px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-appearancepicker__swatches [data-k="bg"] { background: var(--vk-color-bg); }
.vk-appearancepicker__swatches [data-k="surface"] { background: var(--vk-color-surface); }
.vk-appearancepicker__swatches [data-k="primary"] { background: var(--vk-color-primary); }
.vk-appearancepicker__swatches [data-k="accent"] { background: var(--vk-color-accent); }
.vk-appearancepicker__swatches [data-k="signal"] { background: var(--vk-color-signal); }
.vk-appearancepicker__desc { padding: 0 4px; font-size: 13px; line-height: 1.4; color: var(--vk-color-muted); }
.vk-appearancepicker__desc b { color: var(--vk-color-text); font-weight: 600; }
/* A product's own picture fills the frame; it draws its own padding. */
.vk-appearancepicker__art--product { gap: 0; padding: 0; }

.vk-viberoot[data-vibe="daylight"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-top { background: linear-gradient(180deg, var(--vk-sky-noon-top), var(--vk-sky-noon-bottom)); }
.vk-viberoot[data-vibe="paper"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-top { height: 22px; background: transparent; border-bottom: 3px double var(--vk-color-text); }
.vk-viberoot[data-vibe="paper"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row { background: transparent; border-radius: 0; box-shadow: inset 0 -1px 0 var(--vk-color-line); }
.vk-viberoot[data-vibe="paper"] > .vk-appearancepicker__vibe .vk-appearancepicker__name { font-weight: 500; font-style: italic; font-size: 21px; }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-top { height: 22px; background: transparent; border-bottom: 1.5px solid var(--vk-color-rule); }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row { border-radius: 0; background: transparent; }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row i { border-radius: 0; background: var(--vk-stage-6); }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row[data-needs="true"] i { background: var(--vk-color-signal); }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-ramp { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: auto 8px 0; }
.vk-appearancepicker__art-ramp i { height: 6px; }
.vk-appearancepicker__art-ramp i:nth-child(1) { background: var(--vk-stage-1); }
.vk-appearancepicker__art-ramp i:nth-child(2) { background: var(--vk-stage-2); }
.vk-appearancepicker__art-ramp i:nth-child(3) { background: var(--vk-stage-3); }
.vk-appearancepicker__art-ramp i:nth-child(4) { background: var(--vk-stage-4); }
.vk-appearancepicker__art-ramp i:nth-child(5) { background: var(--vk-stage-5); }
.vk-appearancepicker__art-ramp i:nth-child(6) { background: var(--vk-stage-6); }
.vk-appearancepicker__art-ramp i:nth-child(7) { background: var(--vk-stage-7); }
.vk-viberoot[data-vibe="quiet"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-top { height: 18px; background: transparent; border-bottom: 2px solid var(--vk-color-text); }
.vk-viberoot[data-vibe="quiet"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row { border-radius: 0; background: transparent; box-shadow: inset 2px 0 0 var(--vk-color-line); }
.vk-viberoot[data-vibe="quiet"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row[data-needs="true"] { box-shadow: inset 2px 0 0 var(--vk-color-signal); }
.vk-viberoot[data-vibe="quiet"] > .vk-appearancepicker__vibe .vk-appearancepicker__art-row i { display: none; }

/* The accent section. */
.vk-appearancepicker__accent { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; margin-top: 12px; }
.vk-appearancepicker__accent-main { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vk-appearancepicker__swatchgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.vk-appearancepicker__swatchgrid > .vk-viberoot { display: grid; }
.vk-appearancepicker__swatch { position: relative; display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 8px 12px; border-radius: var(--vk-radius-md); background: var(--vk-color-bg); color: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-line); font-family: var(--vk-font-body); cursor: pointer; }
.vk-appearancepicker__swatch[data-checked="true"] { box-shadow: inset 0 0 0 3px var(--vk-color-text); }
.vk-appearancepicker__chip { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--vk-color-accent); color: var(--vk-color-accent-fg); }
.vk-appearancepicker__chip .vk-icon { opacity: 0; }
.vk-appearancepicker__swatch[data-checked="true"] .vk-appearancepicker__chip .vk-icon { opacity: 1; }
.vk-appearancepicker__swatch-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vk-appearancepicker__swatch-name { font: 700 15px / 1.2 var(--vk-font-body); overflow-wrap: anywhere; }
.vk-appearancepicker__swatch-sub { font-size: 12.5px; line-height: 1.3; color: var(--vk-color-muted); }
.vk-appearancepicker__wash { align-self: stretch; width: 10px; margin-left: auto; border-radius: var(--vk-radius-sm); background: var(--vk-color-accent-wash); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-appearancepicker__others { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-size: 14px; color: var(--vk-color-muted); }
.vk-appearancepicker__other { display: inline-flex; align-items: center; gap: 8px; color: var(--vk-color-text); }
.vk-appearancepicker__other b { font-weight: 600; }
.vk-appearancepicker__others > .vk-viberoot { display: contents; }
.vk-appearancepicker__mark { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--vk-color-accent); }
.vk-appearancepicker__note { display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 10px 12px; border-radius: var(--vk-radius-sm); background: var(--vk-color-raised); font-size: 14px; }
.vk-appearancepicker__note .vk-icon { flex: none; margin-top: 1px; }
.vk-viberoot:not([data-vibe="daylight"]) > .vk-appearancepicker__swatch .vk-appearancepicker__chip,
.vk-viberoot:not([data-vibe="daylight"]) > .vk-appearancepicker__other .vk-appearancepicker__mark { border-radius: var(--vk-radius-sm); }

/* The preview, in the page's vibe and the chosen accent. */
.vk-appearancepicker__preview { display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: var(--vk-radius-md); background: var(--vk-color-bg); color: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-appearancepicker__pv-eyebrow { font: 600 12px / 1 var(--vk-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vk-color-muted); }
.vk-appearancepicker__pv-top { display: flex; align-items: center; gap: 10px; font: 700 16px / 1 var(--vk-font-display); }
.vk-appearancepicker__pv-mark { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--vk-radius-sm); background: var(--vk-color-accent); color: var(--vk-color-accent-fg); }
.vk-appearancepicker__pv-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.vk-appearancepicker__pv-ni { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; border-radius: var(--vk-radius-md); font: 600 13px / 1 var(--vk-font-body); color: var(--vk-color-muted); white-space: nowrap; }
.vk-appearancepicker__pv-ni[data-on="true"] { background: var(--vk-color-accent-wash); color: var(--vk-color-accent-text); box-shadow: inset 0 0 0 2px var(--vk-color-accent); }
.vk-appearancepicker__pv-bub { min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: var(--vk-radius-pill); background: var(--vk-color-signal-text); color: var(--vk-color-primary-fg); font: 700 11px / 18px var(--vk-font-body); font-style: normal; text-align: center; }
.vk-appearancepicker__pv-tabs { display: flex; align-self: flex-start; gap: 4px; padding: 3px; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); }
.vk-appearancepicker__pv-tabs span { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: var(--vk-radius-pill); font: 600 13px / 1 var(--vk-font-body); color: var(--vk-color-muted); }
.vk-appearancepicker__pv-tabs span[data-on="true"] { background: var(--vk-color-accent-wash); color: var(--vk-color-accent-text); box-shadow: inset 0 0 0 2px var(--vk-color-accent); }
.vk-appearancepicker__pv-line { font-size: 14px; }
.vk-appearancepicker__pv-link { color: var(--vk-color-accent-text); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.vk-appearancepicker__pv-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.vk-appearancepicker__pv-btn { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: var(--vk-radius-md); background: var(--vk-color-primary); color: var(--vk-color-primary-fg); font: 700 14px / 1 var(--vk-font-body); outline: 2px solid var(--vk-color-accent); outline-offset: 3px; white-space: nowrap; }
.vk-appearancepicker__pv-chip { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: var(--vk-radius-pill); background: var(--vk-color-signal-wash); color: var(--vk-color-signal-text); box-shadow: inset 0 0 0 1px var(--vk-color-signal); font: 700 12px / 1 var(--vk-font-body); white-space: nowrap; }
.vk-appearancepicker__pv-cap { font-size: 12px; color: var(--vk-color-muted); }
.vk-appearancepicker__pv-ramp { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.vk-appearancepicker__pv-ramp i { height: 18px; }
.vk-appearancepicker__pv-ramp i:nth-child(1) { background: var(--vk-stage-1); }
.vk-appearancepicker__pv-ramp i:nth-child(2) { background: var(--vk-stage-2); }
.vk-appearancepicker__pv-ramp i:nth-child(3) { background: var(--vk-stage-3); }
.vk-appearancepicker__pv-ramp i:nth-child(4) { background: var(--vk-stage-4); }
.vk-appearancepicker__pv-ramp i:nth-child(5) { background: var(--vk-stage-5); }
.vk-appearancepicker__pv-ramp i:nth-child(6) { background: var(--vk-stage-6); }
.vk-appearancepicker__pv-ramp i:nth-child(7) { background: var(--vk-stage-7); }
.vk-viberoot[data-vibe="paper"] > .vk-appearancepicker__preview .vk-appearancepicker__pv-ni[data-on="true"] { background: transparent; box-shadow: none; color: var(--vk-color-accent-text); font: italic 500 16px / 1 var(--vk-font-display); text-decoration: underline; text-decoration-color: var(--vk-color-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__preview .vk-appearancepicker__pv-ni { border-radius: 0; }
.vk-viberoot[data-vibe="studio"] > .vk-appearancepicker__preview .vk-appearancepicker__pv-ni[data-on="true"] { background: var(--vk-color-surface); color: var(--vk-color-text); box-shadow: inset 4px 0 0 var(--vk-color-accent); }
.vk-viberoot[data-vibe="quiet"] > .vk-appearancepicker__preview .vk-appearancepicker__pv-ni { padding: 0 4px; color: var(--vk-color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.vk-viberoot[data-vibe="quiet"] > .vk-appearancepicker__preview .vk-appearancepicker__pv-ni[data-on="true"] { background: transparent; color: var(--vk-color-text); font-weight: 700; text-decoration: none; box-shadow: inset 0 -3px 0 var(--vk-color-accent); }
.vk-viberoot:not([data-vibe="daylight"]) > .vk-appearancepicker__preview .vk-appearancepicker__pv-tabs { align-self: stretch; gap: 18px; padding: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--vk-color-line); }
.vk-viberoot:not([data-vibe="daylight"]) > .vk-appearancepicker__preview .vk-appearancepicker__pv-tabs span { padding: 0; border-radius: 0; }
.vk-viberoot:not([data-vibe="daylight"]) > .vk-appearancepicker__preview .vk-appearancepicker__pv-tabs span[data-on="true"] { background: transparent; color: var(--vk-color-text); box-shadow: inset 0 -3px 0 var(--vk-color-accent); }
.vk-viberoot[data-vibe="paper"] > .vk-appearancepicker__preview .vk-appearancepicker__pv-tabs span { font-variant-caps: all-small-caps; letter-spacing: 0.08em; font-size: 14px; }

/* Light or dark, time, location, readout. */
.vk-appearancepicker__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.vk-appearancepicker__col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.vk-appearancepicker__switch { display: flex; align-items: center; gap: 14px; min-height: var(--vk-target-min); margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--vk-color-text); font: 600 15px / 1.3 var(--vk-font-body); text-align: left; cursor: pointer; }
.vk-appearancepicker__track { position: relative; flex: none; width: 52px; height: 30px; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); box-shadow: inset 0 0 0 2px var(--vk-color-faint); }
.vk-appearancepicker__track i { position: absolute; top: 4px; left: 4px; width: 22px; height: 22px; border-radius: 50%; background: var(--vk-color-faint); }
.vk-appearancepicker__switch[aria-checked="true"] .vk-appearancepicker__track { background: var(--vk-color-primary); box-shadow: none; }
.vk-appearancepicker__switch[aria-checked="true"] .vk-appearancepicker__track i { left: 26px; background: var(--vk-color-primary-fg); }
.vk-appearancepicker__means { display: flex; gap: 10px; margin-top: 8px; padding: 10px 12px; border-radius: var(--vk-radius-sm); background: var(--vk-color-raised); color: var(--vk-color-text); }
.vk-appearancepicker__readout .vk-sky { min-height: 74px; border-radius: var(--vk-radius-md); }
.vk-appearancepicker__readout .vk-sky__content { display: flex; flex-direction: column; gap: 2px; padding: 14px 18px; }
.vk-appearancepicker__readout .vk-sky__sun { top: 18px; right: 18px; width: 34px; height: 34px; }
.vk-appearancepicker__readout b { font: 700 17px / 1.2 var(--vk-font-display); }
.vk-appearancepicker__now { font-size: var(--vk-text-sm); }
:where([data-vibe="studio"]) .vk-appearancepicker__readout b { font: 800 18px / 1.2 var(--vk-font-body); font-stretch: 85%; }
:where([data-vibe="paper"]) .vk-appearancepicker__readout b { font-style: italic; font-weight: 500; }
:where([data-vibe="paper"], [data-vibe="quiet"]) .vk-appearancepicker__readout .vk-sky { box-shadow: inset 0 0 0 1px var(--vk-color-line); }

@media (max-width: 639.98px) {
  .vk-appearancepicker__vibes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vk-appearancepicker__accent, .vk-appearancepicker__row { grid-template-columns: minmax(0, 1fr); }
  .vk-appearancepicker__swatchgrid { grid-template-columns: minmax(0, 1fr); }
}

.vk-appearancepicker__means > .vk-icon { flex: none; }
/* AppNav (component spec §2.4/3), drawn to the approved Superpipeline shells (the approved shell mockups, 2026-10-12).
   Count badges are signal-text under primary-fg, which holds 4.5:1 at 12px (§3.5). */
.vk-appnav { --_tile-bg: var(--vk-color-accent); --_tile-fg: var(--vk-color-accent-fg); box-sizing: border-box; font-family: var(--vk-font-body); }
/* The Daylight tile is the product's own tile colour (as on the suite's product tiles); outside a product it is the accent. */
:where([data-product="superpipeline"]) .vk-appnav { --_tile-bg: var(--vk-product-superpipeline-bg); --_tile-fg: var(--vk-product-superpipeline-fg); }
:where([data-product="agentpod"]) .vk-appnav { --_tile-bg: var(--vk-product-agentpod-bg); --_tile-fg: var(--vk-product-agentpod-fg); }
:where([data-product="superlibrary"]) .vk-appnav { --_tile-bg: var(--vk-product-superlibrary-bg); --_tile-fg: var(--vk-product-superlibrary-fg); }
:where([data-product="superwitness"]) .vk-appnav { --_tile-bg: var(--vk-product-superwitness-bg); --_tile-fg: var(--vk-product-superwitness-fg); }
:where([data-product="supermessage"]) .vk-appnav { --_tile-bg: var(--vk-product-supermessage-bg); --_tile-fg: var(--vk-product-supermessage-fg); }
.vk-appnav *, .vk-appnav *::before, .vk-appnav *::after { box-sizing: border-box; }
.vk-appnav__list { margin: 0; padding: 0; list-style: none; }
.vk-appnav__item { position: relative; color: inherit; text-decoration: none; }
.vk-appnav__mark { text-decoration: none; }
.vk-appnav__mark > svg { flex: 0 0 auto; }
.vk-appnav__glyph { display: inline-grid; place-items: center; }
.vk-appnav__account { padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
.vk-appnav__crew { min-width: 0; }
.vk-appnav__crew b { font-weight: 700; color: var(--vk-color-text); }

/* Daylight: a floating 88px rail; destinations are 64px squares, the current one ringed in ink. */
.vk-appnav--daylight { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 88px; flex: 0 0 88px; padding: 12px 0 14px; border-radius: var(--vk-radius-lg); background: var(--vk-color-surface); box-shadow: var(--vk-shadow-rail); }
.vk-appnav--daylight .vk-appnav__mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: var(--vk-radius-md); background: var(--_tile-bg); color: var(--_tile-fg); font: 800 20px / 1 var(--vk-font-display); }
.vk-appnav--daylight .vk-appnav__list { display: flex; flex-direction: column; gap: 6px; }
.vk-appnav--daylight .vk-appnav__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; width: 64px; height: 64px; border-radius: var(--vk-radius-md); color: var(--vk-color-muted); font: 600 13px / 1 var(--vk-font-body); letter-spacing: -0.01em; white-space: nowrap; }
.vk-appnav--daylight .vk-appnav__item:hover { background: var(--vk-color-raised); color: var(--vk-color-text); }
.vk-appnav--daylight .vk-appnav__item[aria-current="page"] { background: var(--vk-color-raised); color: var(--vk-color-text); font-weight: 700; box-shadow: inset 0 0 0 2px var(--vk-color-primary); }
.vk-appnav--daylight .vk-appnav__count { position: absolute; top: 3px; right: 3px; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--vk-radius-pill); background: var(--vk-color-signal-text); color: var(--vk-color-primary-fg); font: 800 12px / 20px var(--vk-font-body); letter-spacing: 0; text-align: center; box-shadow: 0 0 0 2px var(--vk-color-surface); }
.vk-appnav--daylight .vk-appnav__crew { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 64px; margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--vk-color-line); color: var(--vk-color-muted); font-size: 12px; line-height: 1.25; text-align: center; }
.vk-appnav--daylight .vk-appnav__crew b { display: block; }
.vk-appnav--daylight .vk-appnav__foot { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: auto; padding-top: 12px; }
.vk-appnav--daylight .vk-appnav__account { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; }
.vk-appnav--daylight .vk-appnav__who { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--vk-mood-resting); color: var(--vk-face-ink); font: 800 14px / 1 var(--vk-font-body); }
.vk-appnav--daylight .vk-iconbutton { --_bg: var(--vk-color-raised); --_fg: var(--vk-color-text); border-radius: 50%; }
.vk-appnav--daylight .vk-iconbutton:hover { box-shadow: inset 0 0 0 2px var(--vk-color-line); }

/* Paper (the Paper shell mockup .mh-top, .mh-sections): the nameplate row on an ink rule (name, dateline, crew, the quiet controls), then the
   section bar between two hairlines (sections, Live). A flex row that wraps; the rule element is the line break and the bar's top rule. */
.vk-appnav--paper { display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; border-top: 1px solid var(--vk-color-text); border-bottom: 1px solid var(--vk-color-line); font-size: 14px; }
.vk-appnav--paper .vk-appnav__mark { order: 0; display: inline-flex; align-items: center; min-height: 48px; margin: 6px auto 6px 0; color: var(--vk-color-text); font: 600 32px / 1 var(--vk-font-display); font-variant-caps: all-small-caps; letter-spacing: 0.07em; }
.vk-appnav--paper .vk-appnav__dateline { order: 1; margin: 0; color: var(--vk-color-muted); font: italic 400 17px / 1.45 var(--vk-font-display); }
.vk-appnav--paper .vk-appnav__crew { order: 2; display: flex; align-items: center; gap: 8px; color: var(--vk-color-muted); font-size: 14px; }
.vk-appnav--paper .vk-appnav__crew b { margin-right: 4px; }
.vk-appnav--paper .vk-appnav__foot { order: 3; display: flex; flex-wrap: wrap; align-items: center; }
/* One hairline, before the account (the Paper shell mockup .mh-acct); the text controls before it sit unruled. */
.vk-appnav--paper .vk-appnav__foot > * + .vk-appnav__account { border-left: 1px solid var(--vk-color-line); }
.vk-appnav--paper .vk-appnav__rule { order: 4; flex: 1 0 100%; height: 0; border-top: 1px solid var(--vk-color-line); }
.vk-appnav--paper .vk-appnav__list { order: 5; display: flex; flex-wrap: wrap; align-items: center; }
.vk-appnav--paper .vk-appnav__list li + li { border-left: 1px solid var(--vk-color-line); }
.vk-appnav--paper .vk-appnav__live { order: 6; display: inline-flex; align-items: center; margin-left: auto; color: var(--vk-color-muted); font: 400 12.5px / 1.45 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; white-space: pre; }
.vk-appnav--paper .vk-live { gap: 8px; }
.vk-appnav--paper .vk-live--live { color: var(--vk-color-success-text); font-weight: 700; }
.vk-appnav--paper .vk-live--live .vk-live__dot { box-shadow: 0 0 0 3px var(--vk-color-success-wash); }
.vk-appnav--paper .vk-live--reconnecting { color: var(--vk-color-muted); }
.vk-appnav--paper .vk-live--reconnecting .vk-live__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--vk-color-muted); }
.vk-appnav--paper .vk-live--offline { color: var(--vk-color-text); }
.vk-appnav--paper .vk-live--offline .vk-live__dot { background: var(--vk-color-text); }
.vk-appnav--paper .vk-appnav__item { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 20px; color: var(--vk-color-muted); font: 400 15px / 1.45 var(--vk-font-body); }
.vk-appnav--paper li:first-child .vk-appnav__item { padding-left: 0; }
.vk-appnav--paper .vk-appnav__item:hover { color: var(--vk-color-text); }
.vk-appnav--paper .vk-appnav__item[aria-current="page"] { color: var(--vk-color-text); font: italic 400 18px / 1.45 var(--vk-font-display); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.vk-appnav--paper .vk-appnav__count { color: var(--vk-color-signal-text); font: normal 700 14px / 1.45 var(--vk-font-body); }
.vk-appnav--paper .vk-appnav__account { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; color: var(--vk-color-text); font-size: 14px; }
.vk-appnav--paper .vk-appnav__account:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Studio: an ink rail of 44px icon squares; the current one is cut out of the ink. Labels show in a ruled tooltip. */
.vk-appnav--studio { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 64px; padding: 16px 0; background: var(--vk-color-text); color: var(--vk-color-bg); }
.vk-appnav--studio .vk-appnav__mark { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 16px; background: var(--vk-color-bg); color: var(--vk-color-text); font: 900 20px / 1 var(--vk-font-display); font-stretch: 75%; }
.vk-appnav--studio .vk-appnav__list { display: flex; flex-direction: column; gap: 4px; }
.vk-appnav--studio .vk-appnav__item { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 2px; color: var(--vk-color-bg); }
.vk-appnav--studio .vk-appnav__item:hover { outline: 1px solid var(--vk-color-bg); outline-offset: -1px; }
.vk-appnav--studio .vk-appnav__item[aria-current="page"] { background: var(--vk-color-bg); color: var(--vk-color-text); }
.vk-appnav--studio .vk-appnav__count { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 4px; background: var(--vk-color-signal-text); color: var(--vk-color-primary-fg); font: 800 12px / 18px var(--vk-font-body); text-align: center; }
.vk-appnav--studio .vk-appnav__tip { display: none; position: absolute; top: 50%; left: 54px; z-index: 2; align-items: center; gap: 8px; padding: 6px 10px; transform: translateY(-50%); border: 1px solid var(--vk-color-rule); background: var(--vk-color-bg); color: var(--vk-color-text); font: 700 13px / normal var(--vk-font-body); white-space: nowrap; pointer-events: none; }
.vk-appnav--studio .vk-appnav__item:hover .vk-appnav__tip, .vk-appnav--studio .vk-appnav__item:focus-visible .vk-appnav__tip { display: inline-flex; }
.vk-appnav--studio .vk-appnav__crew { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 44px; margin-top: 12px; padding-top: 12px; border-top: 1px solid color-mix(in srgb, var(--vk-color-bg) 40%, transparent); font: 700 12px / 1.2 var(--vk-font-body); text-align: center; }
.vk-appnav--studio .vk-appnav__crew b { display: block; color: inherit; }
.vk-appnav--studio .vk-appnav__foot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: auto; }
.vk-appnav--studio .vk-appnav__account { width: 44px; height: 44px; margin-top: 4px; border: 1.5px solid var(--vk-color-bg); border-radius: 2px; color: var(--vk-color-bg); font: 800 14px / 1 var(--vk-font-body); }
/* An IconButton on the ink rail draws in the rail's ink colours. */
.vk-appnav--studio .vk-iconbutton { --_fg: var(--vk-color-bg); border-radius: 2px; }
.vk-appnav--studio .vk-iconbutton:hover { --_bg: transparent; --_fg: var(--vk-color-bg); outline: 1px solid var(--vk-color-bg); outline-offset: -1px; }

/* Quiet (the Quiet shell mockup's first row): one row of plain links, the product's name first. The rule under the shell's rows is AppShell's. */
.vk-appnav--quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-5); min-height: 60px; padding: var(--vk-space-1) var(--vk-space-6); font: 400 18px / 1.4 var(--vk-font-body); }
.vk-appnav--quiet .vk-appnav__mark { display: inline-flex; align-items: center; min-height: 44px; margin-right: var(--vk-space-3); color: var(--vk-color-text); font-weight: 700; }
.vk-appnav--quiet .vk-appnav__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-5); }
.vk-appnav--quiet .vk-appnav__item { display: inline-flex; align-items: center; min-height: 44px; color: var(--vk-color-text); text-decoration: underline; text-underline-offset: 4px; }
.vk-appnav--quiet .vk-appnav__item:hover { text-decoration-thickness: 2px; }
.vk-appnav--quiet .vk-appnav__item[aria-current="page"] { font-weight: 700; text-decoration: none; }
.vk-appnav--quiet .vk-appnav__count { margin-left: 0.3em; color: var(--vk-color-signal-text); font-weight: 700; }
.vk-appnav--quiet .vk-appnav__crew { margin-left: auto; color: var(--vk-color-muted); font-size: 17px; }
.vk-appnav--quiet .vk-appnav__crew b { margin-right: 0.3em; }
.vk-appnav--quiet .vk-appnav__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-5); margin-left: auto; }
.vk-appnav--quiet .vk-appnav__crew + .vk-appnav__foot { margin-left: 0; }
.vk-appnav--quiet .vk-appnav__account { display: inline-flex; align-items: center; min-height: 44px; color: var(--vk-color-text); text-decoration: underline; text-underline-offset: 4px; }
.vk-appnav--quiet .vk-appnav__account:hover { text-decoration-thickness: 2px; }
/* Quiet: the account and what follows it read as one phrase, "Avery Kim — Sign out" (the Quiet shell mockup .qn-end). */
.vk-appnav--quiet .vk-appnav__dash { color: var(--vk-color-muted); }
/* AppShell (component spec §2.4/2). The DOM order is the same in every vibe; the grid places the rails. */
.vk-appshell { box-sizing: border-box; min-height: var(--vk-appshell-min, 100dvh); }
.vk-appshell__skip { position: absolute; left: 12px; top: 8px; z-index: 20; display: inline-flex; align-items: center; min-height: var(--vk-target-min); padding: 0 var(--vk-space-4); border-radius: var(--vk-radius-sm); background: var(--vk-color-surface); color: var(--vk-color-text); box-shadow: inset 0 0 0 2px var(--vk-color-text); }
/* Hidden until focused, it takes no target size: the visually hidden rule cannot beat min-height from the base layer. */
.vk-appshell__skip:not(:focus):not(:focus-within) { min-height: 0; padding: 0; }
.vk-appshell__top { grid-area: top; min-width: 0; }
.vk-appshell__nav { grid-area: nav; min-width: 0; }
.vk-appshell__main { grid-area: main; min-width: 0; }
.vk-appshell__main:focus { outline: none; }
.vk-appshell__aside { grid-area: aside; min-width: 0; }
.vk-appshell__status { grid-area: status; min-width: 0; }

/* Daylight: a floating 88px rail beside the page (a 12px column gap, no row gap: the page sits flush under the masthead); the aside column (and its gap) exists only when there is an aside. */
.vk-appshell--daylight { display: grid; grid-template-columns: 88px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "nav top" "nav main" "nav status"; column-gap: 12px; padding: 12px; }
.vk-appshell--daylight.vk-appshell--aside { grid-template-columns: 88px minmax(0, 1fr) auto; grid-template-areas: "nav top aside" "nav main aside" "nav status aside"; }
.vk-appshell--daylight .vk-appshell__nav { display: flex; }

/* Paper (the Paper shell mockup): the nameplate and the section bar, then the masthead, in one 1328px column (56px gutters at 1440). */
.vk-appshell--paper { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; grid-template-areas: "nav" "top" "main" "status"; column-gap: 32px; max-width: 1440px; margin-inline: auto; padding: 16px 56px 0; }
.vk-appshell--paper.vk-appshell--aside { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nav nav" "top top" "main aside" "status status"; }

/* Studio: the 64px ink rail runs the full height; the aside is ruled off. */
.vk-appshell--studio { display: grid; grid-template-columns: 64px minmax(0, 1fr); grid-template-rows: auto 1fr auto; grid-template-areas: "nav top" "nav main" "nav status"; }
.vk-appshell--studio.vk-appshell--aside { grid-template-columns: 64px minmax(0, 1fr) auto; grid-template-areas: "nav top aside" "nav main aside" "nav status aside"; }
.vk-appshell--studio .vk-appshell__nav { display: flex; }
.vk-appshell--studio .vk-appshell__main { padding: 0 40px; }
/* bleed: the page runs to the shell's edges (only Studio's main has a gutter). */
.vk-appshell--studio.vk-appshell--bleed .vk-appshell__main { padding: 0; }
.vk-appshell--studio .vk-appshell__aside { border-left: 1px solid var(--vk-color-rule); }

/* Quiet (the Quiet shell mockup): full-width ruled rows, the nav row first, then the board row; everything in reading order. */
.vk-appshell--quiet { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "nav" "top" "main" "aside" "status"; align-content: start; }
.vk-appshell--quiet .vk-appshell__top { border-bottom: 1px solid var(--vk-color-line); }

/* Phone, every vibe: header, page, tab bar. */
.vk-appshell--phone { display: flex; flex-direction: column; }
.vk-appshell--phone .vk-appshell__main { flex: 1; }
/* Badge: a count beside a navigation item (Devices 1). In the signal only when a person is needed (data-needs);
   otherwise a quiet count. The number is aria-hidden and followed by visually hidden words. Daylight puts primary-fg on
   signal-text, the pair that holds 4.5:1 at 12px (component spec §3.5). */
.vk-badge { box-sizing: border-box; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); color: var(--vk-color-text); font: 800 12px/1 var(--vk-font-body); font-variant-numeric: tabular-nums; }
.vk-badge[data-needs] { background: var(--vk-color-signal-text); color: var(--vk-color-primary-fg); }
@media (forced-colors: active) { .vk-badge { border: 1px solid CanvasText; } }

:where([data-vibe="paper"]) .vk-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; font: normal 700 12px/1 var(--vk-font-body); }
:where([data-vibe="paper"]) .vk-badge[data-needs] { background: var(--vk-color-signal); color: var(--vk-color-bg); }
:where([data-vibe="studio"]) .vk-badge { min-width: 18px; height: 18px; padding: 0 4px; border-radius: 0; font: 700 11px/18px var(--vk-font-mono); }
:where([data-vibe="studio"]) .vk-badge[data-needs] { background: var(--vk-color-signal); color: var(--vk-face-ink); }
:where([data-vibe="quiet"]) .vk-badge { display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; font: 700 .875rem/1 var(--vk-font-body); }
:where([data-vibe="quiet"]) .vk-badge[data-needs] { background: var(--vk-color-signal-wash); color: var(--vk-color-signal-text); }
/* Button (component spec §2.4/8). Colours come from private variables, set by variant, vibe and state. */
.vk-button {
  --_bg: var(--vk-color-primary);
  --_fg: var(--vk-color-primary-fg);
  --_edge: transparent;
  --_edge-w: 0px;
  --_lift: 0 var(--vk-lift) 0 var(--vk-color-ground);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vk-space-2);
  min-height: var(--vk-target-min);
  /* A short word ("Move", "All 2") still draws a 44px-wide target. */
  min-width: 44px;
  padding: 0 var(--vk-space-5);
  border: 0;
  border-radius: var(--vk-radius-md);
  /* Important inside a layer beats every normal declaration outside it, so a container's colour rule for links cannot repaint a
     button (Review Focus 3). Variants and states change the private variables, never these two properties. */
  color: var(--_fg) !important;
  background: var(--_bg) !important;
  box-shadow: inset 0 0 0 var(--_edge-w) var(--_edge), var(--_lift);
  font: 600 var(--vk-text-md) / 1 var(--vk-font-body);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform var(--vk-motion-fast) var(--vk-motion-easing), box-shadow var(--vk-motion-fast) var(--vk-motion-easing);
}

/* Per vibe, before the variants, so a variant's own padding still wins. */
:where([data-vibe="paper"]) .vk-button { padding: 0 16px; border-radius: var(--vk-radius-sm); font: 600 15px / 1 var(--vk-font-body); }
/* Annual report's ink slab has no lift. */
:where([data-vibe="studio"]) .vk-button { --_lift: 0 0 0 transparent; padding: 0 16px; font: 800 14px / 1 var(--vk-font-body); }
:where([data-vibe="quiet"]) .vk-button { min-height: 48px; padding: 0 20px; border-radius: var(--vk-radius-sm); font: 700 17px / 1 var(--vk-font-body); }

.vk-button--primary { --_bg: var(--vk-color-primary); --_fg: var(--vk-color-primary-fg); }
.vk-button--secondary { --_bg: var(--vk-color-surface); --_fg: var(--vk-color-text); --_edge: var(--vk-color-line); --_edge-w: 2px; }
.vk-button--quiet { --_bg: transparent; --_fg: var(--vk-color-text); --_lift: 0 0 0 transparent; padding: 0 var(--vk-space-2); text-decoration: underline; text-underline-offset: 4px; }
/* text: a shell's plain text control, no box (the Paper shell mockup .mh-q, the Quiet shell mockup .qn-link, the Studio shell mockup .ar-lk). */
.vk-button--text { --_bg: transparent; --_fg: var(--vk-color-text); --_lift: 0 0 0 transparent; --_edge-w: 0px; gap: 6px; padding: 0; font-weight: 400; }
.vk-button--text:hover { text-decoration: underline; text-underline-offset: 4px; }
.vk-button--signal { --_bg: var(--vk-color-signal-wash); --_fg: var(--vk-color-signal-text); --_edge: var(--vk-color-signal); --_edge-w: 2px; }
.vk-button--danger { --_bg: var(--vk-color-surface); --_fg: var(--vk-color-text); --_edge: var(--vk-color-text); --_edge-w: 2px; --_lift: 0 0 0 transparent; }
/* ghost: the muted hairline for a secondary action beside the main ones (the Paper board mockup .pp-btn.ghost). */
.vk-button--ghost { --_bg: transparent; --_fg: var(--vk-color-muted); --_edge: var(--vk-color-line); --_edge-w: 1px; --_lift: 0 0 0 transparent; }
.vk-button--ghost:hover { --_fg: var(--vk-color-text); --_edge: var(--vk-color-text); }
/* tool: an overlay head's labelled tool, 44px on a hairline (the Daylight card mockup's Open in new window). The references draw a real
   border outside their padding; the edge here is drawn inside, so each padding is the reference's plus its border. Per vibe below. */
.vk-button--tool { --_bg: transparent; --_fg: var(--vk-color-text); --_edge: var(--vk-color-line); --_edge-w: 1px; --_lift: 0 0 0 transparent; padding: 0 15px; border-radius: var(--vk-radius-pill); font-size: var(--vk-text-sm); }
.vk-button--tool:hover { --_bg: var(--vk-color-raised); }
.vk-button--sm { min-height: 36px; padding: 0 var(--vk-space-3); font-size: var(--vk-text-sm); }

:where([data-vibe="paper"]) .vk-button--secondary { --_bg: transparent; --_edge: var(--vk-color-text); --_edge-w: 1px; }
/* The Paper board mockup's .pp-btn, for signal (its reply) and ghost: a 1px border outside 16px of padding (17px here, the
   edge being drawn inside), 6px gaps, the page's 1.45 line, and the signal on a 1px edge. Paper's secondary keeps 0.0.3's
   form (16px, 8px gaps), which the other Paper mockups draw. */
:where([data-vibe="paper"]) .vk-button--signal, :where([data-vibe="paper"]) .vk-button--ghost { gap: 6px; padding: 0 17px; line-height: 1.45; }
:where([data-vibe="paper"]) .vk-button--signal { --_edge-w: 1px; --_lift: 0 0 0 transparent; }
:where([data-vibe="paper"]) .vk-button--sm { padding: 0 var(--vk-space-3); }
:where([data-vibe="studio"]) .vk-button--secondary { --_bg: transparent; --_edge: var(--vk-color-rule); --_edge-w: 1.5px; font-weight: 700; }
:where([data-vibe="studio"]) .vk-button--secondary:hover { --_bg: var(--vk-color-text); --_fg: var(--vk-color-bg); }
:where([data-vibe="studio"]) .vk-button--danger { --_bg: transparent; --_edge: var(--vk-color-rule); --_edge-w: 2.5px; }
:where([data-vibe="studio"]) .vk-button--sm { gap: 6px; min-height: 32px; padding: 0 12px; font-size: 13px; font-weight: 700; }
:where([data-vibe="studio"]) .vk-button--secondary.vk-button--sm { --_edge-w: 1px; padding: 0 13px; }
:where([data-vibe="quiet"]) .vk-button--secondary { --_edge: var(--vk-color-text); }
/* tool, per vibe: Paper's underlined 15px on a 1px line (the Paper card mockup .pp-icon), Studio's 1px rule (.ar-btn2), Quiet's 2px ink edge (.qt-x). */
:where([data-vibe="paper"]) .vk-button--tool { gap: 6px; padding: 0 13px; border-radius: var(--vk-radius-sm); font-size: 15px; line-height: 1.5; text-decoration: underline; text-underline-offset: 3px; }
:where([data-vibe="studio"]) .vk-button--tool { --_edge: var(--vk-color-rule); padding: 0 15px; border-radius: 2px; font-weight: 700; font-size: 14px; }
:where([data-vibe="studio"]) .vk-button--tool:hover { --_bg: var(--vk-color-text); --_fg: var(--vk-color-bg); }
:where([data-vibe="quiet"]) .vk-button--tool { --_bg: var(--vk-color-surface); --_edge: var(--vk-color-text); --_edge-w: 2px; gap: 6px; min-height: var(--vk-target-min); padding: 0 14px; border-radius: var(--vk-radius-sm); font-size: 16px; }

.vk-button:active { transform: translateY(1px); }
.vk-button:disabled, .vk-button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.vk-button[aria-busy="true"] { opacity: 1; --_bg: var(--vk-color-raised); --_fg: var(--vk-color-muted); --_edge: var(--vk-color-line); --_edge-w: 2px; }
.vk-button[aria-pressed="true"] { --_bg: var(--vk-color-primary); --_fg: var(--vk-color-primary-fg); }

/* text, per vibe. Pressed is the ink word, never a filled box. */
.vk-button--text[aria-pressed="true"] { --_bg: transparent; --_fg: var(--vk-color-text); }
.vk-button--text:active { transform: none; }
:where([data-vibe="daylight"]) .vk-button--text { padding: 0 8px; font-weight: 600; font-size: 15px; }
:where([data-vibe="paper"]) .vk-button--text { --_fg: var(--vk-color-muted); padding: 0 12px; font: 400 14px / 1 var(--vk-font-body); }
:where([data-vibe="paper"]) .vk-button--text:hover, :where([data-vibe="paper"]) .vk-button--text[aria-pressed="true"] { --_fg: var(--vk-color-text); }
:where([data-vibe="studio"]) .vk-button--text { padding: 0 8px 0 0; font: 700 13.5px / 1 var(--vk-font-body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
:where([data-vibe="quiet"]) .vk-button--text { min-height: var(--vk-target-min); padding: 0; font: 400 18px / 1.4 var(--vk-font-body); text-decoration: underline; text-underline-offset: 4px; }
:where([data-vibe="quiet"]) .vk-button--text:hover { text-decoration-thickness: 2px; }
:where([data-vibe="quiet"]) .vk-button--text[aria-pressed="true"] { font-weight: 700; text-decoration: none; }
/* Focus adds the ring to the button's own edge and lift, so focus never loses them. */
.vk-button:focus-visible { box-shadow: var(--vk-focus), inset 0 0 0 var(--_edge-w) var(--_edge), var(--_lift); }

.vk-button__icon { display: inline-grid; place-items: center; }
.vk-button__stack { display: inline-grid; }
.vk-button__stack > * { grid-area: 1 / 1; }
.vk-button__text[data-shown="false"] { visibility: hidden; }

@media (forced-colors: active) {
  .vk-button { border: 1px solid ButtonText; }
}
.vk-button--busy { pointer-events: none; }
/* Choice (component spec §2.4/14). Native controls; the card and pick forms draw their state with :has(). */
.vk-choice { display: inline-flex; align-items: flex-start; gap: 10px; min-height: var(--vk-target-min); font: 400 var(--vk-text-md) / 1.4 var(--vk-font-body); cursor: pointer; }
.vk-choice__input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--vk-color-primary); }
.vk-choice__text { display: flex; flex-direction: column; gap: 2px; }
.vk-choice__label { font-weight: 600; }
.vk-choice__desc { font-size: 14px; color: var(--vk-color-muted); }
.vk-choice--card { display: flex; box-sizing: border-box; padding: 10px 12px; border-radius: var(--vk-radius-md); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-choice--card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--vk-color-primary); background: var(--vk-color-raised); }
:where([data-vibe="paper"], [data-vibe="studio"], [data-vibe="quiet"]) .vk-choice--card { border-radius: var(--vk-radius-sm); }
:where([data-vibe="studio"]) .vk-choice--card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-choice { font-size: 18px; }
:where([data-vibe="quiet"]) .vk-choice--card:has(input:checked) { box-shadow: inset 0 0 0 2px var(--vk-color-text); }
/* After the vibe rules: a picker row is marked by its left ink edge in every vibe. */
.vk-choice--pick:has(input:checked) { box-shadow: inset 3px 0 0 var(--vk-color-text); background: var(--vk-color-raised); }
/* Slots: chips after the label, a face before the description, a count at the end. */
.vk-choice__label--chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vk-choice__desc--face { display: flex; align-items: center; gap: 6px; }
.vk-choice__count { flex: none; display: flex; align-items: center; gap: 8px; margin-left: auto; font-size: 13px; color: var(--vk-color-muted); }
/* stage: a move picker's row. A dot on the board's line (2px, through the rows), 56px rows, the checked row ringed in ink, the stage it is in now a large primary dot. */
.vk-choice--stage { position: relative; display: grid; box-sizing: border-box; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 56px; padding: 6px 12px 6px 6px; border-radius: var(--vk-radius-sm); font: 400 16px/1.45 var(--vk-font-body); }
.vk-choice--stage .vk-choice__input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.vk-choice__mark { position: relative; display: grid; place-items: center; width: 28px; height: 100%; }
.vk-choice__mark::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: 13px; width: 2px; background: var(--vk-color-line); }
.vk-choice--stage:first-child .vk-choice__mark::before { top: 50%; }
.vk-choice--stage:last-child .vk-choice__mark::before { bottom: 50%; }
.vk-choice__dot { position: relative; width: 16px; height: 16px; border-radius: 50%; background: var(--vk-color-surface); box-shadow: inset 0 0 0 2px var(--vk-color-faint); }
:where([data-vibe="studio"]) .vk-choice__dot { border-radius: 0; }
.vk-choice--stage .vk-choice__text { display: block; gap: 0; }
.vk-choice--stage .vk-choice__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 16px; }
.vk-choice--stage .vk-choice__desc { display: flex; align-items: center; gap: 6px; margin-top: 1px; font-size: 13px; }
.vk-choice--stage .vk-choice__count { margin: 0; }
.vk-choice--stage:hover { background: var(--vk-color-raised); }
.vk-choice--stage:has(.vk-choice__input:focus-visible) { outline: 2px solid var(--vk-color-text); outline-offset: 2px; }
.vk-choice--stage:has(input:checked) { background: var(--vk-color-raised); box-shadow: inset 0 0 0 2px var(--vk-color-text); }
.vk-choice--stage:has(input:checked) .vk-choice__dot { background: var(--vk-color-text); box-shadow: 0 0 0 3px var(--vk-color-surface); }
.vk-choice--stage[data-here="true"] { background: transparent; cursor: default; }
.vk-choice--stage[data-here="true"] .vk-choice__dot { width: 20px; height: 20px; background: var(--vk-color-primary); box-shadow: 0 0 0 4px var(--vk-color-raised); }
.vk-choice[data-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
/* CodeField: a one-time code. ONE real input (inputmode numeric, autocomplete one-time-code) is the field; the boxes are
   drawing only (aria-hidden). With boxes on, the input lies over them, invisible but focusable and typeable, so paste,
   Backspace and the phone's code suggestion are the browser's own. Without the enhancement (no script) it is a plain
   mono field. Boxes are the vibe's choice in Daylight and Studio; data-variant="boxes" or "single" forces one. */
.vk-codefield__control { position: relative; display: inline-flex; max-width: 100%; }
.vk-codefield__input {
  box-sizing: border-box; width: 220px; max-width: 100%; min-height: 56px; padding: 0 14px;
  border: 2px solid var(--vk-color-faint); border-radius: var(--vk-radius-md); background: var(--vk-color-surface); color: var(--vk-color-text);
  font: 600 max(1.5rem, 16px) / 1 var(--vk-font-mono); letter-spacing: .3em;
}
.vk-codefield__input:focus-visible { box-shadow: var(--vk-focus); }
.vk-codefield__input:disabled { opacity: 0.55; cursor: not-allowed; }
.vk-codefield[data-invalid="true"] .vk-codefield__input, .vk-codefield[data-invalid="true"] .vk-codefield__box { border-color: var(--vk-color-signal); }
.vk-codefield__boxes { display: none; }
.vk-codefield__box { box-sizing: border-box; display: grid; place-items: center; width: 56px; height: 64px; border: 2px solid var(--vk-color-faint); border-radius: var(--vk-radius-md); background: var(--vk-color-surface); color: var(--vk-color-text); font: 600 1.5rem/1 var(--vk-font-mono); }
.vk-codefield__sep { width: 6px; overflow: hidden; color: transparent; }

/* Boxes on: forced, or the vibe's own choice. */
.vk-codefield[data-enhanced][data-variant="boxes"] .vk-codefield__boxes,
:where([data-vibe="daylight"], [data-vibe="studio"]) .vk-codefield[data-enhanced][data-variant="auto"] .vk-codefield__boxes { display: flex; gap: var(--_gap, 10px); }
.vk-codefield[data-enhanced][data-variant="boxes"] .vk-codefield__input,
:where([data-vibe="daylight"], [data-vibe="studio"]) .vk-codefield[data-enhanced][data-variant="auto"] .vk-codefield__input {
  position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; letter-spacing: 0; caret-color: transparent;
}
/* The box the next digit goes into carries the focus ring while the field has focus. */
.vk-codefield__input:focus-visible + .vk-codefield__boxes .vk-codefield__box[data-active], .vk-codefield__box.is-focus { outline: 2px solid var(--vk-color-accent); outline-offset: 2px; box-shadow: var(--vk-focus); }

:where([data-vibe="studio"]) .vk-codefield__box { border: 1px solid var(--vk-color-rule); border-radius: 0; background: var(--vk-color-raised); font: 500 28px var(--vk-font-mono); }
:where([data-vibe="studio"]) .vk-codefield__sep { width: 16px; display: grid; place-items: center; color: var(--vk-color-muted); font: 500 20px var(--vk-font-mono); }
:where([data-vibe="studio"]) .vk-codefield { --_gap: 8px; }
:where([data-vibe="studio"]) .vk-codefield__input { border: 1px solid var(--vk-color-rule); border-radius: 0; background: var(--vk-color-raised); font-weight: 500; }

:where([data-vibe="paper"]) .vk-codefield__input { display: block; width: 280px; min-height: 56px; padding: 0 2px; border: 0; border-bottom: 2px solid var(--vk-color-text); border-radius: 0; background: transparent; font: 500 28px/1 var(--vk-font-mono); letter-spacing: .4em; }
:where([data-vibe="paper"]) .vk-codefield__box { border: 0; border-bottom: 2px solid var(--vk-color-text); border-radius: 0; background: transparent; font: 500 28px/1 var(--vk-font-mono); }

:where([data-vibe="quiet"]) .vk-codefield__input { width: 100%; max-width: 220px; min-height: 48px; padding: 0 14px; border: 2px solid var(--vk-color-text); border-radius: var(--vk-radius-sm); background: var(--vk-color-surface); font: 400 max(1.5rem, 16px) / normal var(--vk-font-mono); letter-spacing: .3em; }
:where([data-vibe="quiet"]) .vk-codefield__control { display: flex; }
:where([data-vibe="quiet"]) .vk-codefield__box { border: 2px solid var(--vk-color-text); border-radius: var(--vk-radius-sm); font-weight: 400; }
/* CommandField (component spec §2.4/15), drawn to the approved Superpipeline shells (the approved shell mockups, 2026-10-12).
   Daylight and Studio draw a search field; Paper and Quiet draw the mockups' Search button. The shortcut is one key pill. */
.vk-commandfield {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--vk-target-min);
  border: 0;
  background: transparent;
  color: var(--vk-color-muted);
  font: 400 16px / 1 var(--vk-font-body);
  text-align: start;
  white-space: nowrap;
  cursor: text;
}
.vk-commandfield__text { flex: 1 1 auto; }
.vk-commandfield > svg { flex: 0 0 auto; }

/* Daylight (.dy-search): a 48px surface pill on the sky, the key pill pushed to the end. */
.vk-commandfield--daylight { min-width: 280px; min-height: 48px; padding: 0 8px 0 16px; border-radius: var(--vk-radius-pill); background: var(--vk-color-surface); box-shadow: 0 var(--vk-lift) 0 var(--vk-color-ground); font: 500 15px / 1 var(--vk-font-body); cursor: pointer; }
.vk-commandfield--daylight:focus-visible { box-shadow: var(--vk-focus), 0 var(--vk-lift) 0 var(--vk-color-ground); }
.vk-commandfield--daylight .vk-commandfield__kbd { margin-left: auto; }
.vk-commandfield--daylight .vk-kbd__key { padding: 4px 9px; }

/* Paper (.mh-btn): a 44px hairline button, "Search" and the ruled key. */
.vk-commandfield--paper { gap: 8px; min-height: 44px; padding: 0 14px; border: 1px solid var(--vk-color-line); border-radius: var(--vk-radius-sm); color: var(--vk-color-text); font: 600 15px / 1 var(--vk-font-body); cursor: pointer; }
.vk-commandfield--paper:hover { border-color: var(--vk-color-text); }
.vk-commandfield--paper .vk-commandfield__text { flex: 0 0 auto; }

/* Studio (.ar-cmd): a 44px field ruled underneath at 1.5px. */
.vk-commandfield--studio { min-width: 420px; min-height: 44px; padding: 0 10px; border-bottom: 1.5px solid var(--vk-color-rule); font: 500 16px / normal var(--vk-font-body); }
/* The text sits where the mockup's input draws its placeholder: 2px in. */
.vk-commandfield--studio .vk-commandfield__text { padding: 0 2px; }

/* Quiet (.qn-btn): a 44px button in a 2px ink edge, "Search" and the shortcut in plain mono. */
.vk-commandfield--quiet { gap: var(--vk-space-2); padding: 0 var(--vk-space-4); border: 2px solid var(--vk-color-text); border-radius: var(--vk-radius-sm); background: var(--vk-color-surface); color: var(--vk-color-text); font: 700 17px / 1.4 var(--vk-font-body); cursor: pointer; }
.vk-commandfield--quiet .vk-commandfield__text { flex: 0 0 auto; }
/* CommandPalette (component spec §2.4/16), inside a bare lg Dialog. */
.vk-commandpalette { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.vk-commandpalette__input { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 20px; border-bottom: 1px solid var(--vk-color-line); color: var(--vk-color-muted); }
.vk-commandpalette__input:focus-within { box-shadow: inset 0 -2px 0 var(--vk-color-text); }
.vk-commandpalette__field { box-sizing: border-box; flex: 1; padding: 0; min-width: 0; height: 52px; border: 0; background: transparent; color: var(--vk-color-text); font: 500 19px/1 var(--vk-font-body); }
.vk-commandpalette__field:focus-visible { outline: none; box-shadow: none; }
.vk-commandpalette__field::placeholder { color: var(--vk-color-faint); }
.vk-commandpalette__count { padding: 10px 20px 0; font-size: 13px; line-height: 1.45; color: var(--vk-color-muted); }
.vk-commandpalette__clear { flex: none; }
.vk-commandpalette__list { box-sizing: border-box; max-height: 590px; overflow: auto; padding: 4px 10px 10px; }
.vk-commandpalette__heading { display: flex; justify-content: space-between; gap: 12px; padding: 12px 10px 6px; font: 700 12px/1 var(--vk-font-display); letter-spacing: 0.04em; text-transform: uppercase; color: var(--vk-color-muted); }
.vk-commandpalette__item { box-sizing: border-box; display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 10px; border-radius: var(--vk-radius-sm); color: var(--vk-color-text); cursor: pointer; }
.vk-commandpalette__item[data-selected] { background: var(--vk-color-raised); box-shadow: inset 3px 0 0 var(--vk-color-text); }
.vk-commandpalette__icon { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--vk-color-raised); color: var(--vk-color-muted); }
.vk-commandpalette__icon:has(> .vk-face) { background: transparent; }
.vk-commandpalette__item[data-selected] .vk-commandpalette__icon:not(:has(> .vk-face)) { background: var(--vk-color-surface); }
.vk-commandpalette__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.vk-commandpalette__label { font-size: 15px; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.vk-commandpalette__label mark { padding: 0; border-radius: 3px; background: var(--vk-mood-done); color: var(--vk-face-ink); }
.vk-commandpalette__hint { font-size: 13px; line-height: 1.45; color: var(--vk-color-muted); overflow-wrap: anywhere; }
.vk-commandpalette__meta { flex: none; font: 11px/1.3 var(--vk-font-mono); color: var(--vk-color-faint); }
.vk-commandpalette__enter { display: none; flex: none; padding: 6px 8px; border: 1px solid var(--vk-color-line); border-radius: 6px; background: var(--vk-color-surface); color: var(--vk-color-text); font: 500 12px/1 var(--vk-font-mono); }
.vk-commandpalette__item[data-selected] .vk-commandpalette__enter { display: inline-block; }
.vk-commandpalette__empty { padding: 28px 20px 34px; color: var(--vk-color-muted); }
.vk-commandpalette__footer > span { display: inline-flex; gap: 6px; align-items: center; }
.vk-commandpalette__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; padding: 8px 14px; border-top: 1px solid var(--vk-color-line); font-size: 14px; color: var(--vk-color-text); }
.vk-commandpalette__footer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 12px 20px; border-top: 1px solid var(--vk-color-line); background: var(--vk-color-bg); font-size: 13px; color: var(--vk-color-muted); }

:where([data-vibe="paper"]) .vk-commandpalette__heading { font: italic 500 14px/1 var(--vk-font-display); letter-spacing: 0; text-transform: none; }
:where([data-vibe="studio"]) .vk-commandpalette__heading { font-family: var(--vk-font-body); letter-spacing: 0.1em; }
:where([data-vibe="quiet"]) .vk-commandpalette__item[data-selected] { background: transparent; box-shadow: inset 0 0 0 2px var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-commandpalette__label mark { background: none; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; }

/* form="switcher" (the board switcher): the field is a boxed input inside the panel; each row is name over count, a badge, and a 92px "when" column. */
.vk-dialog.vk-commandpalette-dialog--switcher { border-radius: var(--vk-radius-md); }
:where([data-vibe="studio"]) .vk-dialog.vk-commandpalette-dialog--switcher { border-radius: 2px; }
:where([data-vibe="paper"]) .vk-dialog.vk-commandpalette-dialog--switcher { border-radius: var(--vk-radius-sm); }
.vk-commandpalette--switcher .vk-commandpalette__input { gap: 10px; margin: 12px; padding: 0 6px 0 14px; border: 2px solid var(--vk-color-text); border-radius: var(--vk-radius-sm); box-shadow: var(--vk-focus); }
.vk-commandpalette--switcher .vk-commandpalette__input:focus-within { box-shadow: var(--vk-focus); }
.vk-commandpalette--switcher .vk-commandpalette__field { height: 44px; font: 500 16px/1 var(--vk-font-body); }
.vk-commandpalette--switcher .vk-commandpalette__list { max-height: 572px; padding: 0 8px 8px; }
:where([data-vibe="paper"]) .vk-commandpalette--switcher .vk-commandpalette__list { max-height: 430px; }
:where([data-vibe="quiet"]) .vk-commandpalette--switcher .vk-commandpalette__list { max-height: 520px; }
.vk-commandpalette--switcher .vk-commandpalette__heading { padding: 10px 10px 6px; letter-spacing: 0.05em; }
:where([data-vibe="paper"]) .vk-commandpalette--switcher .vk-commandpalette__heading { letter-spacing: 0; }
:where([data-vibe="studio"]) .vk-commandpalette--switcher .vk-commandpalette__heading { letter-spacing: 0.1em; }
.vk-commandpalette--switcher .vk-commandpalette__item { display: grid; grid-template-columns: minmax(0, 1fr) auto 92px; gap: 10px; min-height: 46px; padding: 4px 10px; }
:where([data-vibe="quiet"]) .vk-commandpalette--switcher .vk-commandpalette__item { text-decoration: underline; text-underline-offset: 3px; }
:where([data-vibe="quiet"]) .vk-commandpalette--switcher .vk-commandpalette__item[data-selected] { background: var(--vk-color-raised); box-shadow: inset 3px 0 0 var(--vk-color-text); }
.vk-commandpalette--switcher .vk-commandpalette__text { gap: 0; }
.vk-commandpalette--switcher .vk-commandpalette__hint { font-size: 12px; }
.vk-commandpalette--switcher .vk-commandpalette__meta { font: 12px/1.45 var(--vk-font-body); color: var(--vk-color-muted); text-align: right; }
.vk-commandpalette--switcher .vk-commandpalette__meta--current { font-weight: 700; color: var(--vk-color-text); }
.vk-commandpalette-dialog--switcher .vk-commandpalette__footer { gap: 12px; padding: 10px 14px 14px; border-top: 0; background: transparent; font-size: 12px; color: var(--vk-color-muted); }
/* CopyId (component spec §2.4/18). The id wraps anywhere, so a long id never widens its row (Review Focus 4). */
.vk-copyid { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 6px; max-width: 100%; }
.vk-copyid__id { min-width: 0; font: 400 12px / 1.4 var(--vk-font-mono); color: var(--vk-color-muted); overflow-wrap: anywhere; }
.vk-copyid__button { flex-shrink: 0; white-space: nowrap; }

/* Daylight: a 44px icon button that does not grow the line (its negative margin keeps the line height). */
.vk-copyid--daylight .vk-copyid__button { margin: -12px -10px -12px -6px; }

/* Paper and Quiet: an underlined text button, in the accent as a link (controller ruling R21). */
.vk-copyid--paper .vk-copyid__button,
.vk-copyid--quiet .vk-copyid__button { min-height: var(--vk-target-min); padding: 0 6px; border: 0; background: transparent; color: var(--vk-color-accent-text); font: 400 14px / 1 var(--vk-font-body); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.vk-copyid--quiet .vk-copyid__button { font-size: 16px; }

/* Studio: "Copy session id", drawn small with a 44px target. */
.vk-copyid--studio .vk-copyid__id { font: 500 12.5px / 1.4 var(--vk-font-mono); }
.vk-copyid--studio .vk-copyid__button { padding: 0; border: 0; background: transparent; color: var(--vk-color-text); font: 700 13.5px / 1 var(--vk-font-body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; cursor: pointer; }
.vk-copyid__button:hover { text-decoration-thickness: 2px; }
/* DataTable (component spec §2.4/21). The title link covers its row; the row itself is never the click target. */
.vk-datatable { min-width: 0; }
.vk-datatable__table { width: 100%; border-collapse: collapse; }
.vk-datatable__table thead th { text-align: start; white-space: nowrap; }
.vk-datatable__table tr[data-row] { position: relative; }
.vk-datatable__table tr[data-row]:focus { outline: none; }
/* J/K focuses the row itself when it has no link: show it, inside the row so the table never clips it. */
.vk-datatable__table tr[data-row]:focus-visible { outline: 3px solid var(--vk-color-accent); outline-offset: -3px; box-shadow: none; }
.vk-datatable__open { color: inherit; text-decoration: none; overflow-wrap: anywhere; }
.vk-datatable__open::after { content: ""; position: absolute; inset: 0; }
.vk-datatable__open:hover { text-decoration: underline; }
.vk-datatable__sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.vk-datatable__sort[data-on="false"] .vk-icon { opacity: 0.55; }
.vk-datatable__num { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.vk-datatable__end { text-align: end; }
/* The title column takes the width the others leave; it wraps, it is never squeezed to an equal share. */
.vk-datatable__title { width: 100%; min-width: 12ch; }
.vk-datatable__ix { width: 3.5ch; }
.vk-datatable__group th { text-align: start; }
.vk-datatable__count { color: var(--vk-color-muted); }
.vk-datatable__keys { margin: var(--vk-space-3) 0 0; font: var(--vk-type-meta); color: var(--vk-color-muted); }

.vk-datatable__cards { margin: 0; padding: 0; list-style: none; }
.vk-datatable__card { position: relative; padding: 12px 0; border-bottom: 1px solid var(--vk-color-line); }
.vk-datatable__card dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 12px; margin: 0; }
.vk-datatable__card .vk-datatable__open { display: inline-flex; align-items: center; min-height: 44px; }
.vk-datatable__card dt { font: var(--vk-type-meta); color: var(--vk-color-muted); }
.vk-datatable__card dd { margin: 0; overflow-wrap: anywhere; }
.vk-datatable__card[data-needs="true"] { padding-left: 12px; box-shadow: inset 4px 0 0 var(--vk-color-signal); }
.vk-datatable__card[data-selected="true"] { background: var(--vk-color-raised); }

.vk-datatable--daylight thead th { position: sticky; top: 0; padding: 8px 12px; border-bottom: 2px solid var(--vk-color-line); background: var(--vk-color-bg); font: 700 13px/1.3 var(--vk-font-body); color: var(--vk-color-muted); }
.vk-datatable--daylight td { padding: 12px; border-bottom: 1px solid var(--vk-color-line); vertical-align: middle; }
.vk-datatable--daylight tr[data-row]:hover td { background: var(--vk-color-raised); }
.vk-datatable--daylight tr[data-selected="true"] td { background: var(--vk-color-raised); }
.vk-datatable--daylight tr[data-needs="true"] td:first-child { box-shadow: inset 4px 0 0 var(--vk-color-signal); }
.vk-datatable--daylight .vk-datatable__open { font-weight: 600; }
.vk-datatable--daylight td.vk-datatable__num { font: 500 13px/1.3 var(--vk-font-mono); }
.vk-datatable--daylight .vk-datatable__group th { padding: 24px 12px 8px; font: 700 var(--vk-text-md) / 1.2 var(--vk-font-display); }
.vk-datatable--daylight .vk-datatable__count { font: 500 14px var(--vk-font-mono); }

.vk-datatable--paper thead th { padding: 8px 12px 8px 0; border-bottom: 1px solid var(--vk-color-text); font: italic 400 15px/1.3 var(--vk-font-display); }
.vk-datatable--paper td { padding: 16px 12px 16px 0; border-bottom: 1px solid var(--vk-color-line); vertical-align: top; }
.vk-datatable--paper .vk-datatable__open { font: 500 1.25rem/1.25 var(--vk-font-display); }
.vk-datatable--paper tr[data-row]:hover .vk-datatable__open { text-decoration: underline; }
.vk-datatable--paper tr[data-selected="true"] td { background: var(--vk-color-raised); }
.vk-datatable--paper tr[data-needs="true"] td:first-child { padding-left: 12px; box-shadow: inset 3px 0 0 var(--vk-color-signal); }
.vk-datatable--paper .vk-datatable__group th { padding: 32px 0 8px; border-bottom: 1px solid var(--vk-color-line); font: 600 1.625rem/1.2 var(--vk-font-display); }
.vk-datatable--paper .vk-datatable__count { font: italic 400 16px var(--vk-font-display); }

.vk-datatable--studio thead th { height: 30px; padding: 0 10px 0 0; border-bottom: 1px solid var(--vk-color-rule); font: 700 12px/1.3 var(--vk-font-body); color: var(--vk-color-muted); }
.vk-datatable--studio td { height: 36px; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--vk-color-line); font-size: 14px; vertical-align: top; overflow-wrap: break-word; }
.vk-datatable--studio tr[data-row]:hover td { background: var(--vk-color-select); }
.vk-datatable--studio tr[data-selected="true"] td { background: var(--vk-color-select); }
.vk-datatable--studio tr[data-selected="true"] td:first-child { padding-left: 8px; box-shadow: inset 3px 0 0 var(--vk-color-text); }
.vk-datatable--studio .vk-datatable__open { font-weight: 700; }
/* 36px rows, 44px hit area: the link's cover reaches 4px past the row's edges. */
.vk-datatable--studio .vk-datatable__open::after { inset: -4px 0; }
.vk-datatable--studio td.vk-datatable__num { font: 500 12.5px/1 var(--vk-font-mono); }
.vk-datatable--studio td.vk-datatable__ix { font: 500 12.5px var(--vk-font-mono); color: var(--vk-color-muted); }
.vk-datatable--studio .vk-datatable__group th { height: 44px; padding: 0 10px 0 0; border-bottom: 1.5px solid var(--vk-color-rule); font: 800 16px/1.2 var(--vk-font-body); vertical-align: bottom; }
.vk-datatable--studio .vk-datatable__count { margin-left: 8px; font: 900 28px/1 var(--vk-font-display); font-stretch: 72%; color: var(--vk-color-text); }
.vk-datatable--studio .vk-datatable__keys { font: 500 12px/1.4 var(--vk-font-mono); }
/* Studio: the State column's signal square says "needs"; the row has no edge. */
.vk-datatable--studio .vk-datatable__card[data-needs="true"] { padding-left: 0; box-shadow: none; }

.vk-datatable--quiet .vk-datatable__table { font-size: 17px; }
.vk-datatable--quiet thead th { padding: 0 8px; border-bottom: 2px solid var(--vk-color-line); font: 700 16px/1.3 var(--vk-font-body); }
.vk-datatable--quiet .vk-datatable__sort { min-height: 48px; text-decoration: underline; text-underline-offset: 4px; }
.vk-datatable--quiet .vk-datatable__sort[data-on="true"] { text-decoration: none; }
.vk-datatable--quiet .vk-datatable__sort .vk-icon { display: none; }
/* Quiet says the sort in words: the hidden ", sorted descending" is shown. */
.vk-datatable--quiet .vk-datatable__sort .vk-visually-hidden { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip-path: none; white-space: nowrap; }
.vk-datatable--quiet td { padding: 12px 8px; border-bottom: 1px solid var(--vk-color-line); }
.vk-datatable--quiet .vk-datatable__open { text-decoration: underline; text-underline-offset: 3px; }
.vk-datatable--quiet tr[data-selected="true"] td { background: var(--vk-color-raised); }
.vk-datatable--quiet tr[data-needs="true"] td:first-child { padding-left: 16px; box-shadow: inset 5px 0 0 var(--vk-color-signal); }
.vk-datatable--quiet .vk-datatable__group th { padding: 24px 8px 8px; font: 700 20px/1.3 var(--vk-font-body); }
/* Disclosure (component spec §2.4/19). Native details; the marker is ours. */
.vk-disclosure__summary { list-style: none; display: flex; align-items: center; gap: var(--vk-space-3); min-height: var(--vk-target-min); cursor: pointer; }
.vk-disclosure__summary::-webkit-details-marker { display: none; }
.vk-disclosure__meta { color: var(--vk-color-muted); font: 400 var(--vk-text-sm) / 1.2 var(--vk-font-body); }
.vk-disclosure__mark { margin-left: auto; display: inline-grid; place-items: center; color: var(--vk-color-muted); }
.vk-disclosure__body { padding: var(--vk-space-3) 0; }
.vk-disclosure--inline > .vk-disclosure__summary { display: inline-flex; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* Daylight: a 56px raised row; the chevron turns 180°. */
.vk-disclosure--daylight.vk-disclosure--section > .vk-disclosure__summary { min-height: 56px; padding: 0 16px; border-radius: var(--vk-radius-md); background: var(--vk-color-raised); font: 700 17px / 1.2 var(--vk-font-display); }
.vk-disclosure--daylight .vk-disclosure__mark .vk-icon { transition: transform var(--vk-motion-fast) var(--vk-motion-easing); }
.vk-disclosure--daylight[open] .vk-disclosure__mark .vk-icon { transform: rotate(180deg); }

/* Paper: an enclosure on a 1px ink rule; italic meta. */
.vk-disclosure--paper.vk-disclosure--section > .vk-disclosure__summary { min-height: 56px; border-top: 1px solid var(--vk-color-text); font: 500 1.2rem / 1.2 var(--vk-font-display); }
.vk-disclosure--paper .vk-disclosure__meta { font: italic 400 16px / 1.2 var(--vk-font-display); }

/* Studio: a ruled 60px row with a mono +/– at the right; inline is an underlined 700 13.5px toggle. */
.vk-disclosure--studio.vk-disclosure--section > .vk-disclosure__summary { min-height: 60px; border-top: 1.5px solid var(--vk-color-rule); font: 800 14px / 1.2 var(--vk-font-body); }
.vk-disclosure--studio .vk-disclosure__meta { font: 500 12px / 1 var(--vk-font-mono); }
.vk-disclosure--studio .vk-disclosure__mark { font: 500 16px / 1 var(--vk-font-mono); color: var(--vk-color-text); }
.vk-disclosure--studio.vk-disclosure--inline > .vk-disclosure__summary { font: 700 13.5px / 1 var(--vk-font-body); text-decoration-thickness: 1.5px; }

/* Quiet: a bold 44px row in ruled rows, with "Show"/"Hide". */
.vk-disclosure--quiet > .vk-disclosure__summary { border-top: 1px solid var(--vk-color-line); font-weight: 700; }
.vk-disclosure--quiet .vk-disclosure__mark { color: var(--vk-color-accent-text); font-weight: 400; text-decoration: underline; text-underline-offset: 4px; }
/* EmptyState (component spec §2.4/37). */
.vk-emptystate { box-sizing: border-box; width: 100%; }
.vk-emptystate__title, .vk-emptystate__body { margin: 0; overflow-wrap: anywhere; }
.vk-emptystate__action { margin-top: var(--vk-space-2); }

.vk-emptystate--daylight { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--vk-space-6); border-radius: var(--vk-radius-md); background: var(--vk-color-surface); box-shadow: inset 0 0 0 2px var(--vk-color-line); color: var(--vk-color-muted); text-align: center; }
/* The product mark is the accent (D4). */
.vk-emptystate--daylight .vk-emptystate__mark { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--vk-radius-md); background: var(--vk-color-accent); color: var(--vk-color-accent-fg); }
.vk-emptystate--daylight .vk-emptystate__title { font: 700 var(--vk-text-lg) / 1.2 var(--vk-font-display); color: var(--vk-color-text); }

.vk-emptystate--paper { padding: var(--vk-space-5) 0; border-top: 1px solid var(--vk-color-line); font: italic 400 1.25rem / 1.4 var(--vk-font-display); color: var(--vk-color-muted); text-align: center; }
.vk-emptystate--paper .vk-emptystate__title { font: inherit; color: var(--vk-color-text); }

.vk-emptystate--studio { padding: 24px 0; border-bottom: 1px solid var(--vk-color-line); font: 400 17px / 1.45 var(--vk-font-serif); color: var(--vk-color-muted); }
.vk-emptystate--studio .vk-emptystate__title { font: inherit; color: var(--vk-color-text); }
.vk-emptystate--studio[data-size="page"] { border-top: 1.5px solid var(--vk-color-rule); }
.vk-emptystate--studio[data-size="page"] .vk-emptystate__title { font: 800 34px / 1.05 var(--vk-font-display); font-stretch: 82%; }

.vk-emptystate--quiet { padding: 16px 0; border-top: 1px solid var(--vk-color-line); font: 400 18px / 1.5 var(--vk-font-body); }
.vk-emptystate--quiet .vk-emptystate__title { font-weight: 700; }
.vk-face { flex: none; display: inline-block; inline-size: var(--vk-face-size, 44px); block-size: var(--vk-face-size, 44px); line-height: 0; }
.vk-face svg, .vk-face img { inline-size: 100%; block-size: 100%; border-radius: 50%; object-fit: cover; }
.vk-face--picture, .vk-face--mood { border-radius: 50%; box-shadow: 0 0 0 3px var(--vk-face-ring, var(--vk-mood-working)); }
:is(.vk-face--picture, .vk-face--mood)[data-mood="thinking"] { --vk-face-ring: var(--vk-mood-thinking); }
:is(.vk-face--picture, .vk-face--mood)[data-mood="needs"] { --vk-face-ring: var(--vk-color-signal); }
:is(.vk-face--picture, .vk-face--mood)[data-mood="done"] { --vk-face-ring: var(--vk-mood-done); }
:is(.vk-face--picture, .vk-face--mood)[data-mood="resting"] { --vk-face-ring: var(--vk-mood-resting); }

/* A ring separates overlapping faces in a stack. */
.vk-face--ring { border-radius: 50%; box-shadow: 0 0 0 2px var(--vk-color-surface); }
.vk-face--picture.vk-face--ring { box-shadow: 0 0 0 3px var(--vk-face-ring, var(--vk-mood-working)), 0 0 0 5px var(--vk-color-surface); }
/* Quiet: faces stay, quieter. */
:where([data-vibe="quiet"]) .vk-face svg, :where([data-vibe="quiet"]) .vk-face img { filter: grayscale(0.6); }
/* FactList (component spec §2.4/22). max-content terms replace the mockups' fixed label widths. */
.vk-factlist { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--vk-space-4); margin: 0; }
.vk-factlist[data-layout="stack"] { grid-template-columns: minmax(0, 1fr); }
.vk-factlist__term, .vk-factlist__value { margin: 0; }
.vk-factlist__value { overflow-wrap: anywhere; }
.vk-factlist__note { display: block; font: var(--vk-type-meta); color: var(--vk-color-muted); }

:where([data-vibe="daylight"]) .vk-factlist__term { font: 600 var(--vk-text-sm) / 1.5 var(--vk-font-body); color: var(--vk-color-muted); }
:where([data-vibe="daylight"]) .vk-factlist__term, :where([data-vibe="daylight"]) .vk-factlist__value { padding: 6px 0; }

:where([data-vibe="paper"]) .vk-factlist__term { padding: 6px 0; font: 600 12px / 1.6 var(--vk-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--vk-color-muted); }
:where([data-vibe="paper"]) .vk-factlist__value { padding: 6px 0; border-bottom: 1px solid var(--vk-color-line); }

:where([data-vibe="studio"]) .vk-factlist__term, :where([data-vibe="studio"]) .vk-factlist__value { padding: 9px 0; border-top: 1px solid var(--vk-color-line); }
:where([data-vibe="studio"]) .vk-factlist__term { font: 700 12px / 1.6 var(--vk-font-body); }
:where([data-vibe="studio"]) .vk-factlist__value { font-size: 13.5px; }
/* Stacked, the value sits under its own term, so only the term draws the rule. */
:where([data-vibe="studio"]) .vk-factlist[data-layout="stack"] .vk-factlist__value { border-top: 0; padding-top: 0; }

:where([data-vibe="quiet"]) .vk-factlist { font-size: 18px; }
:where([data-vibe="quiet"]) .vk-factlist__term { font-weight: 700; }
:where([data-vibe="quiet"]) .vk-factlist__term, :where([data-vibe="quiet"]) .vk-factlist__value { padding: 4px 0; }
/* Field (component spec §2.4/13). One DOM; each vibe changes border, radius, background, height and type. */
.vk-field { display: flex; flex-direction: column; gap: var(--vk-space-2); }
.vk-field__label { font: 600 var(--vk-text-sm) / 1.3 var(--vk-font-body); }
.vk-field__hint { margin: 0; font-size: var(--vk-text-sm); color: var(--vk-color-muted); }
.vk-field__input {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--vk-target-min);
  padding: 0 var(--vk-space-4);
  border: 2px solid var(--vk-color-faint);
  border-radius: var(--vk-radius-sm);
  background: var(--vk-color-surface);
  color: var(--vk-color-text);
  font-family: var(--vk-font-body);
  font-size: max(1rem, 16px);
}
.vk-field__input--textarea { min-height: 88px; padding: 10px var(--vk-space-4); resize: vertical; }
/* A compact textarea (the Daylight card's gate note) keeps the input's box: its 44px floor, padding and line. */
.vk-field__input--compact { resize: vertical; }
/* The control owns its line and its placeholder. Important inside the vk layer beats a product's unlayered reset (Tailwind's
   preflight sets line-height: inherit and recolours ::placeholder), as Button guards its colours. The placeholder keeps the
   browser's own grey (--vk-color-placeholder). */
.vk-field__input { line-height: var(--_lh, normal) !important; }
.vk-field__input--textarea { --_lh: 1.5; }
/* A select sits on the page's 1.5 line, as 0.0.4 drew it in a product (and as the references draw it); Studio's 1.45 still wins. */
:where(.vk-field__select) .vk-field__input { --_lh: 1.5; }
.vk-field__input::placeholder { color: var(--vk-color-placeholder) !important; opacity: 1 !important; }
.vk-field__select { position: relative; display: block; }
.vk-field__select .vk-field__input { appearance: none; padding-right: 40px; }
/* The chevron is a mask filled with currentColor: no colour of its own. */
.vk-field__select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 14px;
  width: 16px;
  height: 16px;
  transform: translateY(-50%);
  background-color: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  pointer-events: none;
}
.vk-field__input:focus-visible { box-shadow: var(--vk-focus); }
.vk-field__input:disabled { opacity: 0.55; cursor: not-allowed; }
.vk-field__count { align-self: flex-end; margin: 0; font: var(--vk-type-mono); color: var(--vk-color-muted); }
.vk-field__error { display: flex; align-items: flex-start; gap: 6px; margin: 0; font-size: var(--vk-text-sm); color: var(--vk-color-signal-text); }
.vk-field__error .vk-icon { flex: none; margin-top: 1px; }

:where([data-vibe="paper"]) .vk-field__input { border-width: 1px; border-color: var(--vk-color-text); font-size: 16px; }
:where([data-vibe="paper"]) .vk-field--inline .vk-field__input { padding-inline: 0; border-width: 0 0 1.5px; border-radius: 0; background: transparent; }
:where([data-vibe="studio"]) .vk-field__label { font: 700 12px / 1.3 var(--vk-font-body); color: var(--vk-color-muted); }
:where([data-vibe="studio"]) .vk-field__input { --_lh: 1.45; padding: 0 10px; border: 1px solid var(--vk-color-rule); border-radius: 0; background: var(--vk-color-raised); font: 400 16px / 1.45 var(--vk-font-body); }
:where([data-vibe="studio"]) .vk-field__input--textarea { --_lh: 1.5; padding: 10px; }
:where([data-vibe="quiet"]) .vk-field__label { font: 700 16px / 1.3 var(--vk-font-body); }
:where([data-vibe="quiet"]) .vk-field__input { min-height: 48px; border-color: var(--vk-color-text); background: var(--vk-color-bg); font-size: 18px; }

/* After the vibe rules: invalid always wins the border colour. */
.vk-field[data-invalid="true"] .vk-field__input { border-color: var(--vk-color-signal); }
:where([data-vibe="studio"]) .vk-field[data-invalid="true"] .vk-field__input { border-width: 2px; }

/* type="date": the browser's control on the field's box. The picker follows the vibe root's color-scheme; the calendar glyph is muted until hovered. */
.vk-field__input[type="date"]::-webkit-datetime-edit { padding: 0; }
.vk-field__input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; }
.vk-field__input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
/* FigureRow (component spec §2.4/25). The value is drawn above its label; the DOM keeps term before definition. */
.vk-figurerow { min-width: 0; }
.vk-figurerow__list { margin: 0; }
.vk-figurerow__cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vk-figurerow__label, .vk-figurerow__value, .vk-figurerow__meter { margin: 0; }
.vk-figurerow__value { order: 1; overflow-wrap: anywhere; }
.vk-figurerow__label { order: 2; }
.vk-figurerow__meter { order: 3; }
.vk-figurerow__cell[data-tone="needs"] .vk-figurerow__value { color: var(--vk-color-signal-text); }

.vk-figurerow--daylight .vk-figurerow__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vk-figurerow--daylight .vk-figurerow__cell { padding: 14px 16px; border-radius: var(--vk-radius-md); background: var(--vk-color-raised); }
.vk-figurerow--daylight .vk-figurerow__value { font: 700 28px / 1.1 var(--vk-font-display); }
.vk-figurerow--daylight .vk-figurerow__label { font-size: 14px; color: var(--vk-color-muted); }

.vk-figurerow--paper .vk-figurerow__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.vk-figurerow--paper .vk-figurerow__cell { padding: 0 16px; border-left: 1px solid var(--vk-color-line); }
.vk-figurerow--paper .vk-figurerow__cell:first-child { padding-left: 0; border-left: 0; }
.vk-figurerow--paper .vk-figurerow__value { font: 500 2.6rem / 1 var(--vk-font-display); }
.vk-figurerow--paper .vk-figurerow__label { font-size: 14px; color: var(--vk-color-muted); }

.vk-figurerow--studio { --_s: 40px; }
.vk-figurerow--studio[data-size="lg"] { --_s: 52px; }
.vk-figurerow--studio[data-size="sm"] { --_s: 30px; }
.vk-figurerow--studio .vk-figurerow__list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border-top: 1.5px solid var(--vk-color-rule); border-bottom: 1px solid var(--vk-color-line); }
.vk-figurerow--studio .vk-figurerow__cell { padding: 12px 16px; border-left: 1px solid var(--vk-color-line); }
.vk-figurerow--studio .vk-figurerow__cell:first-child { padding-left: 0; border-left: 0; }
.vk-figurerow--studio .vk-figurerow__value { font: 900 var(--_s) / 0.9 var(--vk-font-display); font-stretch: 72%; letter-spacing: -0.03em; }
.vk-figurerow--studio .vk-figurerow__unit { margin-left: 2px; font: 700 17px / 1 var(--vk-font-body); letter-spacing: 0; }
.vk-figurerow--studio .vk-figurerow__cell[data-zero="true"] .vk-figurerow__value { font-weight: 300; color: var(--vk-color-muted); }
/* A large figure counting people needed: the signal itself (large text, 3:1). */
.vk-figurerow--studio .vk-figurerow__cell[data-tone="needs"] .vk-figurerow__value { color: var(--vk-color-signal); }
.vk-figurerow--studio .vk-figurerow__label { font: 700 13px / 1.3 var(--vk-font-body); }
/* AgentPod's tiles: a 6px stage cap, cycling through stages 4, 3, 5, 6, 7. */
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__list { column-gap: 12px; border: 0; }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__cell { gap: 8px; padding: 8px 0 0; border-left: 0; border-top: 6px solid var(--vk-stage-4); }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__cell:nth-child(5n + 2) { border-top-color: var(--vk-stage-3); }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__cell:nth-child(5n + 3) { border-top-color: var(--vk-stage-5); }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__cell:nth-child(5n + 4) { border-top-color: var(--vk-stage-6); }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__cell:nth-child(5n + 5) { border-top-color: var(--vk-stage-7); }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__value { padding-bottom: 8px; border-bottom: 1px solid var(--vk-color-rule); font-size: 48px; }
.vk-figurerow--studio[data-cap="true"] .vk-figurerow__label { font: 600 13px / 1.3 var(--vk-font-body); color: var(--vk-color-muted); }

.vk-figurerow--quiet .vk-figurerow__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vk-figurerow--quiet .vk-figurerow__cell { padding: 12px 16px; border-radius: var(--vk-radius-sm); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-figurerow--quiet .vk-figurerow__value { font: 700 26px / 1.2 var(--vk-font-body); }
.vk-figurerow--quiet .vk-figurerow__label { font-size: 16px; color: var(--vk-color-muted); }

/* After the per-vibe `font` shorthands, which would reset it. */
.vk-figurerow .vk-figurerow__value { font-variant-numeric: tabular-nums; }
/* Footnotes and FootnoteRef (component spec §2.4/32). The same facts in every vibe; Studio and Paper link them. */
.vk-fnref { line-height: 0; }
.vk-fnref a { text-decoration: none; }
/* Daylight and Quiet draw no refs: the facts are a plain list. */
.vk-fnref--daylight, .vk-fnref--quiet { display: none; }
.vk-fnref--studio { margin-left: 2px; color: var(--vk-color-stage-text); font: 600 11px / 1 var(--vk-font-mono); vertical-align: super; }
.vk-fnref--studio a { color: var(--vk-color-stage-text); }
.vk-fnref--paper { margin-left: 1px; font: italic 600 13px / 1 var(--vk-font-display); vertical-align: super; }
.vk-fnref--paper a { color: var(--vk-color-accent-text); }

.vk-footnotes { min-width: 0; }
.vk-footnotes__title { margin: 0; }
.vk-footnotes__list { margin: 0; padding: 0; list-style: none; }
.vk-footnotes__item { min-width: 0; }
.vk-footnotes__text { min-width: 0; overflow-wrap: anywhere; }
.vk-footnotes__back { color: var(--vk-color-muted); text-decoration: none; }

/* Studio: two columns of mono keys and Newsreader notes under a hairline. */
.vk-footnotes--studio .vk-footnotes__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 10px; padding-top: 10px; border-top: 1px solid var(--vk-color-line); }
.vk-footnotes--studio .vk-footnotes__item { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 8px; font: 400 14.5px / 1.45 var(--vk-font-serif); }
.vk-footnotes--studio .vk-footnotes__key { color: var(--vk-color-stage-text); font: 600 11.5px / 1.9 var(--vk-font-mono); }

/* Paper: "Notes" under an ink rule, italic numerals. */
.vk-footnotes--paper .vk-footnotes__title { padding-bottom: var(--vk-space-2); border-bottom: 1px solid var(--vk-color-text); font: italic 500 1.2rem / 1.2 var(--vk-font-display); }
.vk-footnotes--paper .vk-footnotes__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto auto; align-items: baseline; column-gap: 8px; padding: var(--vk-space-2) 0; border-top: 1px solid var(--vk-color-line); font: 400 16px / 1.5 var(--vk-font-body); }
.vk-footnotes--paper .vk-footnotes__list > .vk-footnotes__item:first-child { border-top: 0; }
.vk-footnotes--paper .vk-footnotes__key { color: var(--vk-color-muted); font: italic 600 16px / 1.5 var(--vk-font-display); }

/* Daylight: plain muted lines. */
.vk-footnotes--daylight .vk-footnotes__list { display: flex; flex-direction: column; gap: 4px; }
.vk-footnotes--daylight .vk-footnotes__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: var(--vk-color-muted); font-size: 15px; line-height: 1.45; }

/* Quiet: a heading and plain lines. */
.vk-footnotes--quiet .vk-footnotes__title { margin-bottom: var(--vk-space-2); font: 700 20px / 1.3 var(--vk-font-body); }
.vk-footnotes--quiet .vk-footnotes__list { display: flex; flex-direction: column; gap: 6px; }
.vk-footnotes--quiet .vk-footnotes__item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 17px; line-height: 1.5; }

@media (max-width: 639.98px) {
  .vk-footnotes--studio .vk-footnotes__list { grid-template-columns: minmax(0, 1fr); }
  .vk-footnotes--studio .vk-footnotes__item { grid-template-columns: 20px minmax(0, 1fr) auto auto; font-size: 14px; }
}
/* Hero (component spec §2.4/24). Studio's figure; the other vibes use PageHead with a lead. */
.vk-hero { min-width: 0; }
/* Outside Studio the Hero is a PageHead; these forms only carry the vibe class the styles test looks for. */
.vk-hero--daylight, .vk-hero--paper, .vk-hero--quiet { display: block; }

.vk-hero--studio { --vk-hero-size: 184px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 28px; align-items: end; padding-top: 28px; }
.vk-hero--studio[data-size="section"] { --vk-hero-size: 120px; }
.vk-hero--studio[data-size="phone"] { --vk-hero-size: 96px; column-gap: 16px; }
.vk-hero--studio .vk-hero__figure { max-width: 100%; font: 900 var(--vk-hero-size) / 0.78 var(--vk-font-display); font-stretch: 72%; letter-spacing: -0.04em; color: var(--vk-color-text); overflow-wrap: anywhere; }
/* A large figure counting people needed is drawn in the signal: 3:1 on the page as large text (tests/contrast.test.ts). */
.vk-hero--studio[data-tone="needs"] .vk-hero__figure { color: var(--vk-color-signal); }
.vk-hero--studio .vk-hero__unit { font-size: 0.5em; letter-spacing: 0; }
.vk-hero--studio .vk-hero__text { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding-bottom: 4px; }
.vk-hero--studio .vk-hero__kicker { margin: 0; font: 700 12px / 1.25 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--vk-color-muted); }
.vk-hero--studio .vk-hero__headline { margin: 0; font: 800 44px / 1.02 var(--vk-font-display); font-stretch: 82%; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.vk-hero--studio[data-size="phone"] .vk-hero__headline { font-size: 26px; }
.vk-hero--studio .vk-hero__lede { margin: 0; max-width: 560px; font: 400 18px / 1.45 var(--vk-font-serif); }

/* On a phone the page and section figures sit above the text and shrink to fit; the phone size already sits beside it. */
@media (max-width: 480px) {
  .vk-hero--studio:not([data-size="phone"]) { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .vk-hero--studio:not([data-size="phone"]) .vk-hero__figure { font-size: min(var(--vk-hero-size), 36vw); }
  .vk-hero--studio .vk-hero__headline { font-size: 32px; }
  .vk-hero--studio[data-size="phone"] .vk-hero__headline { font-size: 26px; }
}
/* IconButton (component spec §2.4/9). Colours come from private variables, set by vibe and state. */
.vk-iconbutton {
  --_bg: transparent;
  --_fg: var(--vk-color-muted);
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--vk-radius-sm);
  /* Important inside a layer beats every normal declaration outside it, so a container's colour rule for links cannot repaint an
     icon link (Review Focus 3). State changes the private variables, never these two properties. */
  color: var(--_fg) !important;
  background: var(--_bg) !important;
  font: 600 var(--vk-text-sm) / 1 var(--vk-font-body);
  text-decoration: none;
  cursor: pointer;
}
.vk-iconbutton[aria-expanded="true"] { --_fg: var(--vk-color-text); box-shadow: inset 0 0 0 2px var(--vk-color-text); }
.vk-iconbutton[aria-expanded="true"]:focus-visible { box-shadow: var(--vk-focus), inset 0 0 0 2px var(--vk-color-text); }
.vk-iconbutton--daylight:hover, .vk-iconbutton--paper:hover { --_bg: var(--vk-color-raised); --_fg: var(--vk-color-text); }
.vk-iconbutton--studio:hover { --_bg: var(--vk-color-text); --_fg: var(--vk-color-bg); }
.vk-iconbutton--labelled { display: inline-flex; align-items: center; width: auto; padding: 0 12px; gap: 8px; }
.vk-iconbutton__glyph { display: inline-grid; place-items: center; }

/* Quiet: the label is the control, underlined like a link. */
.vk-iconbutton--quiet {
  --_fg: var(--vk-color-text);
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  min-width: var(--vk-target-min);
  min-height: var(--vk-target-min);
  padding: 0 4px;
  font: 400 16px / 1.2 var(--vk-font-body);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.vk-iconbutton--quiet:hover { text-decoration-thickness: 2px; }

@media (forced-colors: active) {
  .vk-iconbutton[aria-expanded="true"] { border: 2px solid ButtonText; }
}

/* raised: Daylight's round search on the sky (a surface disc on its lift); Paper's and Studio's ruled square. */
.vk-iconbutton--daylight.vk-iconbutton--raised { --_bg: var(--vk-color-surface); --_fg: var(--vk-color-text); border-radius: 50%; box-shadow: 0 var(--vk-lift) 0 var(--vk-color-ground); }
.vk-iconbutton--daylight.vk-iconbutton--raised:focus-visible { box-shadow: var(--vk-focus), 0 var(--vk-lift) 0 var(--vk-color-ground); }
.vk-iconbutton--paper.vk-iconbutton--raised { --_fg: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-iconbutton--studio.vk-iconbutton--raised { --_fg: var(--vk-color-text); border-radius: 2px; box-shadow: inset 0 0 0 1px var(--vk-color-rule); }
/* Kbd (component spec §2.4/17). The outer kbd takes the text around it; each key is styled per vibe. */
.vk-kbd { font: inherit; white-space: nowrap; }
.vk-kbd__key { display: inline-block; padding: 2px 8px; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); color: var(--vk-color-muted); font: 500 12px / 1.2 var(--vk-font-mono); }
:where([data-vibe="paper"]) .vk-kbd__key { padding: 1px 6px; border: 1px solid var(--vk-color-line); border-radius: var(--vk-radius-sm); background: transparent; color: var(--vk-color-faint); font: 400 12px / 1.4 var(--vk-font-mono); }
:where([data-vibe="studio"]) .vk-kbd__key { padding: 2px 5px; border: 1px solid currentColor; border-radius: 2px; background: transparent; color: inherit; font: 500 11px / 1 var(--vk-font-mono); }
:where([data-vibe="quiet"]) .vk-kbd__key { padding: 0; border: 0; background: transparent; color: var(--vk-color-muted); font: 400 14px / 1 var(--vk-font-mono); }
/* Loading (component spec §2.4/38). One breath (1.6s) by default; Paper fades, Studio shimmers, Quiet is still. */
/* Paper and Studio only change timing and shape; they rely on base.css's global reduced-motion stop (animation: none !important) to hold still. */
.vk-loading--skeleton { display: grid; gap: 10px; width: 100%; }
.vk-loading__line { display: block; height: 14px; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); animation: vk-breathe 1.6s ease-in-out infinite; }
.vk-loading__line--head { width: 62%; height: 26px; }
.vk-loading__line:last-child:not(.vk-loading__line--head) { width: 78%; }
.vk-loading__spinner { display: block; box-sizing: border-box; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--vk-color-raised); border-top: 4px solid var(--vk-color-primary); animation: vk-rot 1s linear infinite; }
.vk-loading--bar { position: relative; width: 100%; height: 6px; overflow: hidden; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); }
.vk-loading__fill { display: block; height: 100%; border-radius: inherit; background: var(--vk-color-primary); }
.vk-loading__fill--indeterminate { width: 40%; animation: vk-slide 1.4s var(--vk-motion-easing) infinite alternate; }

/* The caption ("Loading"): Studio's dash and capitals, Quiet's plain line; hidden in Daylight and Paper. */
.vk-loading__caption { display: none; }
:where([data-vibe="studio"]) .vk-loading__caption { justify-self: end; display: inline-flex; align-items: center; gap: 10px; font: 600 12px var(--vk-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--vk-color-muted); }
:where([data-vibe="studio"]) .vk-loading__caption::before { content: ""; width: 18px; height: 2px; background: var(--vk-color-muted); }
:where([data-vibe="quiet"]) .vk-loading__caption { display: block; }
:where([data-vibe="quiet"]) .vk-loading__caption::after { content: "…"; }
:where([data-vibe="quiet"]) .vk-loading__caption ~ .vk-loading__line { display: none; }

@keyframes vk-breathe { 50% { opacity: 0.55; } }
@keyframes vk-rot { to { transform: rotate(360deg); } }
@keyframes vk-slide { to { transform: translateX(150%); } }
@keyframes vk-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }

:where([data-vibe="paper"]) .vk-loading__line { height: 12px; border-radius: 2px; animation-duration: 2.4s; }
:where([data-vibe="paper"]) .vk-loading__line--head { height: 26px; }
:where([data-vibe="studio"]) .vk-loading__line { border-radius: 0; background: linear-gradient(90deg, var(--vk-color-select) 40%, var(--vk-color-line) 50%, var(--vk-color-select) 60%); background-size: 300% 100%; animation: vk-shimmer 1.4s linear infinite; }
:where([data-vibe="studio"]) .vk-loading--bar { height: 4px; border-radius: 0; }
:where([data-vibe="studio"]) .vk-loading__fill { background: var(--vk-stage-7); }
:where([data-vibe="quiet"]) .vk-loading, :where([data-vibe="quiet"]) .vk-loading * { animation: none; }
/* LoadMore (component spec §2.4/39). */
.vk-loadmore { position: relative; box-sizing: border-box; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: var(--vk-space-5) 0; }
.vk-loadmore__count { margin: 0; font-size: var(--vk-text-sm); color: var(--vk-color-muted); }
:where([data-vibe="paper"]) .vk-loadmore { border-top: 1px solid var(--vk-color-line); }
:where([data-vibe="studio"]) .vk-loadmore { align-items: flex-end; }
:where([data-vibe="studio"]) .vk-loadmore__count { font: 500 12px / 1.4 var(--vk-font-mono); }
:where([data-vibe="quiet"]) .vk-loadmore { align-items: stretch; }
:where([data-vibe="quiet"]) .vk-loadmore .vk-button { width: 100%; }
.vk-loadmore .vk-button { max-width: 100%; white-space: normal; text-align: center; padding-block: var(--vk-space-2); }
.vk-loadmore > .vk-visually-hidden { top: 0; left: 1px; }
/* Masthead (component spec §2.4/4) and its live indicator (P25), drawn to the approved Superpipeline shells (the approved shell mockups, 2026-10-12).
   One DOM order in every vibe (head, dateline, command, live, actions); `order` places the live indicator where each mockup has it. */
.vk-masthead { box-sizing: border-box; min-width: 0; }
.vk-masthead__bar { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; }
.vk-masthead__head { display: grid; gap: 4px; min-width: 0; }
.vk-masthead__eyebrow, .vk-masthead__dateline { margin: 0; }
.vk-masthead__h1 { margin: 0; font: inherit; }
.vk-masthead__title { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: start; white-space: nowrap; }
button.vk-masthead__title { cursor: pointer; }
.vk-masthead__command { flex: 1 1 auto; display: flex; justify-content: flex-end; }
.vk-masthead__actions { display: flex; flex-wrap: wrap; gap: var(--vk-space-2); }
.vk-masthead__tabs { box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; }

.vk-live { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.vk-live__detail { color: var(--vk-color-muted); font-weight: 400; white-space: pre; }
.vk-live__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vk-color-success); }

/* Daylight: the top bar and the sub-bar on the sky (the app wraps the masthead in Sky; outside one it falls back to the page text).
   The title, then Live, then the command pill pushed right, then the actions. */
.vk-masthead--daylight .vk-masthead__bar { gap: 12px 14px; min-height: 72px; padding: 12px 16px 6px; color: var(--vk-sky-text, var(--vk-color-text)); }
.vk-masthead--daylight .vk-live { order: 1; }
.vk-masthead--daylight .vk-masthead__command { order: 2; }
.vk-masthead--daylight .vk-masthead__actions { order: 3; }
.vk-masthead--daylight .vk-masthead__title { font: 700 28px / 1.1 var(--vk-font-display); letter-spacing: -0.015em; }
.vk-masthead--daylight button.vk-masthead__title { min-height: 48px; padding: 0 12px 0 6px; border-radius: var(--vk-radius-md); }
.vk-masthead--daylight button.vk-masthead__title:hover { background: var(--vk-sky-glass-hover); }
.vk-masthead--daylight .vk-masthead__dateline { font: 400 14px / 1.4 var(--vk-font-body); opacity: 0.8; }
.vk-masthead--daylight .vk-live { min-height: 30px; padding: 0 12px 0 10px; border-radius: var(--vk-radius-pill); background: var(--vk-color-success-wash); color: var(--vk-color-success-text); font: 700 14px / 1 var(--vk-font-body); }
.vk-masthead--daylight .vk-live--live .vk-live__dot { box-shadow: 0 0 0 3px var(--vk-live-halo); }
.vk-masthead--daylight .vk-live--reconnecting, .vk-masthead--daylight .vk-live--offline { background: var(--vk-color-raised); }
.vk-masthead--daylight .vk-masthead__tabs { gap: 10px 12px; padding: 6px 16px 14px; font-size: 16px; line-height: 1.45; color: var(--vk-sky-text, var(--vk-color-text)); }
/* The switcher's chevron, as the mockup draws it (22px at 1.8). */
.vk-masthead--daylight .vk-masthead__title > .vk-icon { width: 22px; height: 22px; stroke-width: 1.8; }
/* Buttons on the sky are pills (the Daylight shell mockup .dy-new, .dy-filter): the lead action 48px, the sub-bar's 44px; a secondary one
   is the surface pill on its lift, with no edge. */
.vk-masthead--daylight .vk-button { padding: 0 16px; border-radius: var(--vk-radius-pill); font-size: 15px; font-weight: 600; line-height: 1; }
.vk-masthead--daylight .vk-masthead__actions .vk-button { min-height: 48px; padding: 0 22px; }
.vk-masthead--daylight .vk-button--secondary { --_edge-w: 0px; }

/* Paper: the edition title with "Change board" beside it, the actions pushed right; the sub-bar closes on a double rule. */
.vk-masthead--paper .vk-masthead__bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 20px; padding: 22px 0 10px; }
.vk-masthead--paper .vk-masthead__head { display: block; margin-right: auto; }
.vk-masthead--paper .vk-masthead__dateline { flex: 1 0 100%; order: -1; color: var(--vk-color-muted); font: italic 400 17px / 1.3 var(--vk-font-display); }
.vk-masthead--paper .vk-masthead__title { font: 500 46px / 1.05 var(--vk-font-display); letter-spacing: -0.012em; }
.vk-masthead--paper .vk-masthead__h1--sm .vk-masthead__title { font-size: 30px; }
.vk-masthead--paper button.vk-masthead__title { align-items: flex-end; gap: 20px; white-space: normal; }
.vk-masthead--paper .vk-masthead__change { display: inline-flex; align-items: center; min-height: 44px; color: var(--vk-color-muted); font: 400 14px / 1 var(--vk-font-body); letter-spacing: 0; text-decoration: underline; text-underline-offset: 4px; }
.vk-masthead--paper button.vk-masthead__title:hover .vk-masthead__change { color: var(--vk-color-text); }
.vk-masthead--paper .vk-masthead__command { flex: 0 1 auto; }
.vk-masthead--paper .vk-live { align-self: center; color: var(--vk-color-muted); font: 400 12.5px / 1 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-masthead--paper .vk-live--live { color: var(--vk-color-success-text); font-weight: 700; }
.vk-masthead--paper .vk-live--live .vk-live__dot { box-shadow: 0 0 0 3px var(--vk-color-success-wash); }
/* The edition line's buttons (the Paper shell mockup .mh-btn): 44px, 14px in from a 1px edge; a hairline for secondary, and the lead
   action (primary) in an ink edge and the italic display face (.mh-btn--write). */
.vk-masthead--paper .vk-masthead__actions .vk-button { min-height: 44px; padding: 0 15px; gap: var(--vk-space-2); line-height: 1; }
.vk-masthead--paper .vk-masthead__actions .vk-button--secondary { --_edge: var(--vk-color-line); }
.vk-masthead--paper .vk-masthead__actions .vk-button--secondary:hover { --_edge: var(--vk-color-text); }
.vk-masthead--paper .vk-masthead__actions .vk-button--primary { --_bg: transparent; --_fg: var(--vk-color-text); --_edge: var(--vk-color-text); --_edge-w: 1px; --_lift: 0 0 0 transparent; font: italic 500 17px / 1 var(--vk-font-display); }
.vk-masthead--paper .vk-masthead__tabs { gap: 4px 28px; border-bottom: 3px double var(--vk-color-text); }
.vk-masthead--paper .vk-masthead__tabs .vk-tabs--paper { border-bottom: 0; }

/* Studio: Annual report's top bar, ruled underneath: kicker over the board, the command field right, then Live and the action. */
.vk-masthead--studio .vk-masthead__bar { gap: 20px; min-height: 76px; padding: 0 24px 0 40px; border-bottom: 1px solid var(--vk-color-rule); }
.vk-masthead--studio .vk-masthead__head { gap: 2px; }
.vk-masthead--studio .vk-masthead__eyebrow { color: var(--vk-color-muted); font: 700 12px / 1.2 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-masthead--studio .vk-masthead__title { font: 800 28px / 1 var(--vk-font-body); font-stretch: 80%; letter-spacing: -0.01em; }
.vk-masthead--studio button.vk-masthead__title { min-height: 44px; }
.vk-masthead--studio button.vk-masthead__title:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vk-masthead--studio .vk-masthead__dateline { color: var(--vk-color-muted); font: 500 12px / 1.4 var(--vk-font-mono); }
.vk-masthead--studio .vk-masthead__command { flex: 1 1 auto; max-width: 480px; margin-left: auto; }
.vk-masthead--studio .vk-masthead__command > * { flex: 1 1 auto; }
.vk-masthead--studio .vk-live { gap: 6px; font: 700 12px / normal var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-masthead--studio .vk-live__dot { border-radius: 0; background: var(--vk-color-stage-text); }
.vk-masthead--studio .vk-live--reconnecting .vk-live__dot { background: transparent; }
.vk-masthead--studio .vk-live--offline .vk-live__dot { background: var(--vk-color-text); }
.vk-masthead--studio .vk-masthead__tabs { gap: 4px 24px; min-height: 48px; padding: 0 40px; border-bottom: 1px solid var(--vk-color-line); }
.vk-masthead--studio .vk-masthead__tabs .vk-tabs--studio { border-bottom: 0; }

/* Quiet (the Quiet shell mockup's board row): plain text and links in one ruled row that wraps item by item: "Board: name — Change board",
   Live, the command and actions, then the views, the filter and the note. The bar and the sub-bar lend their children to the row
   (display: contents), so each wraps on its own as the mockup's do. The rule under the row is AppShell's. */
.vk-masthead--quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-5); min-height: 60px; padding: var(--vk-space-1) var(--vk-space-6); border-top: 1px solid var(--vk-color-line); font: 400 18px / 1.4 var(--vk-font-body); }
.vk-masthead--quiet .vk-masthead__bar, .vk-masthead--quiet .vk-masthead__tabs { display: contents; }
.vk-masthead--quiet .vk-live { order: 1; }
.vk-masthead--quiet .vk-masthead__command { order: 2; flex: 0 1 auto; }
.vk-masthead--quiet .vk-masthead__actions { order: 3; }
.vk-masthead--quiet .vk-masthead__tabs > * { order: 4; }
.vk-masthead--quiet .vk-masthead__head { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-2); }
.vk-masthead--quiet .vk-masthead__eyebrow { font: inherit; }
.vk-masthead--quiet .vk-masthead__title { font: inherit; }
.vk-masthead--quiet button.vk-masthead__title { gap: var(--vk-space-2); min-height: 44px; }
.vk-masthead--quiet .vk-masthead__name { font-weight: 700; }
.vk-masthead--quiet .vk-masthead__change { text-decoration: underline; text-underline-offset: 4px; }
.vk-masthead--quiet .vk-masthead__change::before { content: "—" / ""; display: inline-block; margin-right: var(--vk-space-2); color: var(--vk-color-muted); text-decoration: none; white-space: pre; }
.vk-masthead--quiet .vk-masthead__dateline { color: var(--vk-color-muted); }
.vk-masthead--quiet .vk-live { color: var(--vk-color-success-text); font-size: 17px; font-weight: 700; }
.vk-masthead--quiet .vk-live__dot { display: none; }
.vk-masthead--quiet .vk-masthead__tabs .vk-tabs__item { font-size: 18px; line-height: 1.4; }
/* The board row's buttons are the row's height, 44px (the Quiet shell mockup .qn-btn), inside Quiet's usual 2px ink edge. */
.vk-masthead--quiet .vk-masthead__actions .vk-button { min-height: 44px; padding: 0 18px; font: 700 17px / 1.4 var(--vk-font-body); }

/* Not live: never the signal. Reconnecting is muted with an empty dot; offline is ink. */
.vk-masthead .vk-live--reconnecting { color: var(--vk-color-muted); }
.vk-masthead .vk-live--reconnecting .vk-live__dot { background: transparent; box-shadow: inset 0 0 0 2px var(--vk-color-muted); }
.vk-masthead .vk-live--offline { color: var(--vk-color-text); }
.vk-masthead .vk-live--offline .vk-live__dot { background: var(--vk-color-text); box-shadow: none; }

/* Phone widths: the command field's own minimum (320px, Studio's 420px) gives way to the bar, so the page never scrolls sideways. */
@media (max-width: 480px) {
  .vk-masthead__command { min-width: 0; max-width: 100%; }
  .vk-masthead__command > .vk-commandfield { min-width: min(320px, 100%); }
  .vk-masthead--studio .vk-masthead__bar { padding-left: 24px; }
}
/* A Quiet text control in the board row (Filter) is at least 44px wide, its words left where they were. Inline text links elsewhere keep their width. */
.vk-masthead--quiet .vk-button--text { min-width: var(--vk-target-min); justify-content: flex-start; }
/* Menu (component spec §2.4/20). The panel is restyled per vibe; danger items are ink with their words. */
.vk-menu { box-sizing: border-box; max-width: calc(100vw - 32px); z-index: calc(50 + 2 * var(--vk-layer-top, 0)); padding: 6px; border-radius: var(--vk-radius-md); background: var(--vk-color-surface); box-shadow: 0 0 0 1px var(--vk-color-line), var(--vk-shadow-pop); }
.vk-menu--inline { position: static; }
.vk-menu__heading { padding: 8px 14px 4px; font: var(--vk-type-eyebrow); color: var(--vk-color-muted); }
.vk-menu__item { display: flex; align-items: center; gap: 10px; min-height: var(--vk-target-min); padding: 0 14px; border-radius: var(--vk-radius-sm); color: var(--vk-color-text); font: 600 var(--vk-text-md) / 1.2 var(--vk-font-body); white-space: nowrap; cursor: pointer; }
.vk-menu__item[data-highlighted], .vk-menu__item:hover:not([data-disabled]) { background: var(--vk-color-raised); }
.vk-menu__item[data-disabled] { opacity: 0.5; cursor: not-allowed; }
.vk-menu__item--danger { font-weight: 700; }
.vk-menu__kbd { margin-left: auto; font: 400 12px / 1 var(--vk-font-mono); color: var(--vk-color-muted); }
.vk-menu__sep { height: 1px; margin: 4px 6px; background: var(--vk-color-line); }

:where([data-vibe="paper"]) .vk-menu { border: 1px solid var(--vk-color-text); border-radius: var(--vk-radius-sm); box-shadow: none; }
:where([data-vibe="paper"]) .vk-menu__item[data-highlighted], :where([data-vibe="paper"]) .vk-menu__item:hover:not([data-disabled]) { background: transparent; text-decoration: underline; text-underline-offset: 4px; }
:where([data-vibe="studio"]) .vk-menu { border: 1px solid var(--vk-color-rule); border-radius: 0; box-shadow: var(--vk-shadow-pop); }
:where([data-vibe="studio"]) .vk-menu__item { border-radius: 0; }
:where([data-vibe="studio"]) .vk-menu__item[data-highlighted], :where([data-vibe="studio"]) .vk-menu__item:hover:not([data-disabled]) { background: var(--vk-color-text); color: var(--vk-color-bg); }
:where([data-vibe="studio"]) .vk-menu__item[data-highlighted] .vk-menu__kbd, :where([data-vibe="studio"]) .vk-menu__item:hover:not([data-disabled]) .vk-menu__kbd { color: inherit; }
:where([data-vibe="quiet"]) .vk-menu { border: 2px solid var(--vk-color-text); box-shadow: none; }
:where([data-vibe="quiet"]) .vk-menu__item[data-highlighted], :where([data-vibe="quiet"]) .vk-menu__item:hover:not([data-disabled]) { background: transparent; text-decoration: underline; text-underline-offset: 4px; }

@media (forced-colors: active) {
  .vk-menu { border: 1px solid CanvasText; }
  .vk-menu__item[data-highlighted] { outline: 2px solid Highlight; outline-offset: -2px; background: Highlight; color: HighlightText; }
}

/* Checked items (menuitemcheckbox, menuitemradio): the tick sits at the end, after any shortcut. */
.vk-menu__icon { display: inline-grid; place-items: center; }
.vk-menu__tick { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: auto; color: inherit; }
.vk-menu__kbd + .vk-menu__tick { margin-left: 0; }
/* Meter (component spec §2.4/40). A picture of a value the consumer also states in words. */
.vk-meter { box-sizing: border-box; width: 100%; overflow: hidden; }
.vk-meter__fill { display: block; height: 100%; }

.vk-meter--daylight { height: 8px; border-radius: var(--vk-radius-pill); background: var(--vk-color-line); }
.vk-meter--daylight .vk-meter__fill { border-radius: inherit; background: var(--vk-color-primary); }
.vk-meter--daylight[data-tone="good"] .vk-meter__fill { background: var(--vk-color-success); }

.vk-meter--paper { height: 4px; background: var(--vk-color-line); }
.vk-meter--paper .vk-meter__fill { background: var(--vk-color-text); }

.vk-meter--studio { height: 10px; box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-meter--studio .vk-meter__fill { background: var(--vk-stage-6); }
.vk-meter--studio.vk-meter--segmented { display: grid; grid-template-columns: repeat(var(--seg), minmax(0, 1fr)); gap: 2px; height: 8px; box-shadow: none; overflow: visible; }
.vk-meter__seg { height: 8px; box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-meter__seg[data-on="true"] { background: var(--vk-stage-7); box-shadow: none; }

.vk-meter--quiet { height: 8px; border-radius: var(--vk-radius-sm); box-shadow: inset 0 0 0 1px var(--vk-color-text); }
.vk-meter--quiet .vk-meter__fill { background: var(--vk-color-text); }

@media (forced-colors: active) {
  .vk-meter { border: 1px solid CanvasText; }
  .vk-meter--segmented { border: 0; }
  .vk-meter__seg { border: 1px solid CanvasText; }
  .vk-meter__fill, .vk-meter__seg[data-on="true"] { background: CanvasText; }
}
/* Notice (component spec §2.4/36). The signal only for needs and secret; error is ink. */
.vk-notice { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; padding: 12px var(--vk-space-4); border-radius: var(--vk-radius-sm); color: var(--vk-color-text); font-size: var(--vk-text-sm); line-height: 1.45; overflow-wrap: anywhere; }
.vk-notice__icon { display: grid; justify-items: center; padding-top: 1px; }
.vk-notice__title { display: block; font-weight: 700; }
.vk-notice__action { margin-top: var(--vk-space-2); }
.vk-notice__action :is(a, button) { color: inherit; text-decoration: underline; text-underline-offset: 3px; display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.vk-notice--needs { background: var(--vk-color-signal-wash); box-shadow: inset 0 0 0 2px var(--vk-color-signal); }
.vk-notice--needs .vk-notice__title { color: var(--vk-color-signal-text); }
.vk-notice--error { background: var(--vk-color-surface); box-shadow: inset 0 0 0 2px var(--vk-color-text); }
.vk-notice--ok { background: var(--vk-color-success-wash); color: var(--vk-color-success-text); }
.vk-notice--info { background: var(--vk-color-raised); }
.vk-notice--secret { background: var(--vk-color-signal-wash); box-shadow: inset 4px 0 0 var(--vk-color-signal); }

:where([data-vibe="paper"]) .vk-notice { border-radius: 0; }
:where([data-vibe="paper"]) .vk-notice--needs { box-shadow: none; border-left: 3px solid var(--vk-color-signal); }
:where([data-vibe="paper"]) .vk-notice--error { background: transparent; box-shadow: none; border-left: 3px solid var(--vk-color-text); }
:where([data-vibe="paper"]) .vk-notice--ok { background: transparent; color: var(--vk-color-text); border-top: 2px solid var(--vk-color-success); }

:where([data-vibe="studio"]) .vk-notice { border-radius: 0; }
:where([data-vibe="studio"]) .vk-notice--needs { background: transparent; box-shadow: none; border-left: 4px solid var(--vk-color-signal); }
:where([data-vibe="studio"]) .vk-notice--error { background: var(--vk-color-bg); box-shadow: inset 0 0 0 1.5px var(--vk-color-rule); }
:where([data-vibe="studio"]) .vk-notice--error .vk-notice__title { font-weight: 800; }
:where([data-vibe="studio"]) .vk-notice--inverse { background: var(--vk-color-text); color: var(--vk-color-bg); box-shadow: none; font: 800 14px / 1.3 var(--vk-font-body); }

:where([data-vibe="quiet"]) .vk-notice { font-size: 17px; }
:where([data-vibe="quiet"]) .vk-notice--needs { background: transparent; box-shadow: none; border: 3px solid var(--vk-color-signal); }
:where([data-vibe="quiet"]) .vk-notice--error { background: transparent; box-shadow: none; border: 3px solid var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-notice--ok { border: 2px solid var(--vk-color-success-text); }
/* Overlays (component spec §2.4/34). One scrim token; per-vibe panels. */
/* --_layer: 0 for the first open overlay, 1 for one opened above it, and so on (set by the component). */
.vk-scrim { position: fixed; inset: 0; z-index: calc(40 + 2 * var(--_layer, 0)); background: var(--vk-scrim); }
.vk-dialog, .vk-drawer, .vk-sheet {
  position: fixed;
  z-index: calc(41 + 2 * var(--_layer, 0));
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: var(--vk-color-surface);
  color: var(--vk-color-text);
  /* bits-ui sets contain: layout style inline; it snaps a fractional-height panel to different pixels than the plain markup. */
  contain: none !important;
}
.vk-overlay__head { display: flex; align-items: flex-start; gap: var(--vk-space-3); }
.vk-overlay__titles { flex: 1; min-width: 0; }
.vk-overlay__eyebrow { margin: 0 0 4px; font: var(--vk-type-eyebrow); color: var(--vk-color-muted); }
.vk-overlay__title { margin: 0; overflow-wrap: anywhere; }
.vk-overlay__description { margin: 6px 0 0; color: var(--vk-color-muted); }
.vk-overlay__tools { display: flex; gap: 4px; }
.vk-overlay__close { margin: -10px -10px 0 auto; }
.vk-overlay__body { padding-top: var(--vk-space-4); overflow-wrap: anywhere; }
.vk-overlay__consequences h3 { margin: var(--vk-space-4) 0 var(--vk-space-2); font: 700 12px/1.2 var(--vk-font-body); letter-spacing: 0.06em; text-transform: uppercase; color: var(--vk-color-muted); }
.vk-overlay__consequences ul { margin: 0; padding-left: 20px; }
.vk-overlay__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--vk-space-2); padding-top: var(--vk-space-4); }
.vk-overlay__lead { margin-right: auto; }

.vk-dialog { inset: 0; margin: auto; width: min(var(--_w, 560px), calc(100% - 32px)); height: fit-content; max-height: calc(100% - 32px); padding: var(--vk-space-5); }
.vk-dialog--sm { --_w: 420px; }
.vk-dialog--lg { --_w: 720px; }
.vk-dialog--bare { padding: 0; }
.vk-dialog--bare .vk-overlay__body { padding-top: 0; }
/* frame="sectioned" (the product dialogs): the head, body and a ruled foot carry their own padding.
   Knobs: --vk-dialog-x (side inset, 28px), --vk-dialog-close-x (close button's right inset, 24px), --vk-dialog-foot-y (foot rhythm, 18px). */
.vk-dialog--sectioned { --_x: var(--vk-dialog-x, 28px); --_cx: var(--vk-dialog-close-x, 24px); --_fy: var(--vk-dialog-foot-y, 18px); padding: 0; }
.vk-dialog--sectioned > .vk-overlay__head { padding: 22px var(--_cx) 4px var(--_x); }
.vk-dialog--sectioned > .vk-overlay__head .vk-overlay__close { margin: 0 0 0 auto; }
.vk-dialog--sectioned > .vk-overlay__head .vk-overlay__description { margin-top: 4px; font-size: 14px; line-height: 1.45; }
.vk-dialog--sectioned > .vk-overlay__body { padding: 4px var(--_x) 0; }
.vk-dialog--sectioned > .vk-overlay__actions { align-items: center; gap: 12px; margin-top: var(--_fy); padding: var(--_fy) var(--_x) calc(var(--_fy) + 4px); border-top: 1px solid var(--vk-color-line); }
/* The lead takes the free room and wraps its own words; it drops to its own line only under 12em. */
.vk-dialog--sectioned > .vk-overlay__actions > .vk-overlay__lead { flex: 1 1 0; min-width: 12em; }
/* The dialog frame follows the product dialog mockups (operator ruling): a line ring and a 0 28px 70px lift, deeper in dark. */
.vk-dialog--daylight { border-radius: var(--vk-radius-lg); box-shadow: 0 0 0 1px var(--vk-color-line), 0 28px 70px color-mix(in oklch, var(--vk-color-text) 26%, transparent); }
.vk-dialog--daylight .vk-overlay__title { font: 700 var(--vk-text-lg) / 1.2 var(--vk-font-display); }
.vk-dialog--paper { border-radius: var(--vk-radius-sm); box-shadow: 0 0 0 1px var(--vk-color-line), 0 28px 70px color-mix(in oklch, var(--vk-color-text) 26%, transparent); }
:where([data-theme="dark"]) .vk-dialog--daylight, :where([data-theme="dark"]) .vk-dialog--paper { box-shadow: 0 0 0 1px var(--vk-color-line), 0 28px 70px color-mix(in oklch, var(--vk-color-bg) 80%, transparent); }
.vk-dialog--paper .vk-overlay__title { font: 500 24px/1.2 var(--vk-font-display); }
.vk-dialog--paper .vk-overlay__consequences h3 { font: italic 400 14px/1.2 var(--vk-font-display); letter-spacing: 0; text-transform: none; }
.vk-dialog--studio { border-radius: 2px; box-shadow: 0 0 0 1.5px var(--vk-color-rule), 0 28px 70px color-mix(in srgb, var(--vk-color-text) 24%, transparent); }
.vk-dialog--studio .vk-overlay__eyebrow { font: 700 12px/1.25 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-dialog--studio .vk-overlay__title { font: 800 28px/1.05 var(--vk-font-display); font-stretch: 82%; letter-spacing: -0.015em; }
.vk-dialog--quiet { border-radius: var(--vk-radius-lg); box-shadow: 0 0 0 2px var(--vk-color-text); }
.vk-dialog--quiet .vk-overlay__title { font: 700 24px/1.2 var(--vk-font-body); }

.vk-drawer { inset: 0 0 0 auto; width: min(var(--_w), 100%); padding: var(--vk-space-5); }
.vk-drawer--daylight { --_w: 680px; border-radius: var(--vk-radius-lg) 0 0 var(--vk-radius-lg); box-shadow: 0 0 0 1px var(--vk-color-line), var(--vk-shadow-drawer); }
.vk-drawer--daylight .vk-overlay__title { font: 700 var(--vk-text-lg) / 1.2 var(--vk-font-display); }
/* The Paper card sheet: a 1px line ring outside the sheet, under its lift. */
.vk-drawer--paper { --_w: 780px; inset: 32px 0 auto 0; margin: 0 auto; max-height: calc(100% - 64px); border-radius: var(--vk-radius-sm); box-shadow: 0 0 0 1px var(--vk-color-line), var(--vk-shadow-dialog); }
.vk-drawer--paper .vk-overlay__title { font: 500 23px/1.2 var(--vk-font-display); }
.vk-drawer--studio { --_w: 420px; background: var(--vk-color-bg); border-left: 1.5px solid var(--vk-color-rule); }
.vk-drawer--studio.vk-drawer--capped { border-top: 6px solid var(--vk-color-text); }
.vk-drawer--studio .vk-overlay__eyebrow { font: 700 12px/1.25 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-drawer--studio .vk-overlay__title { font: 800 26px/1.1 var(--vk-font-display); font-stretch: 82%; }
.vk-drawer--quiet { --_w: 1120px; border-left: 2px solid var(--vk-color-text); }
.vk-drawer--quiet .vk-overlay__title { font: 700 24px/1.3 var(--vk-font-body); }

.vk-sheet { inset: auto 0 0 0; max-height: 90%; padding: 0 var(--vk-space-4) var(--vk-space-4); }
.vk-sheet .vk-overlay__head { padding-top: var(--vk-space-3); }
.vk-sheet .vk-overlay__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.vk-sheet .vk-overlay__actions .vk-button { width: 100%; min-height: 52px; }
.vk-sheet--dock { position: sticky; bottom: 0; }
.vk-sheet__grab { flex: none; width: 44px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: var(--vk-color-faint); }
.vk-sheet--daylight { border-radius: var(--vk-radius-lg) var(--vk-radius-lg) 0 0; box-shadow: var(--vk-shadow-sheet); }
.vk-sheet--daylight .vk-overlay__title { font: 700 20px/1.2 var(--vk-font-display); }
.vk-sheet--paper { background: var(--vk-color-bg); border-top: 3px double var(--vk-color-text); }
.vk-sheet--paper .vk-overlay__title { font: 500 21px/1.2 var(--vk-font-display); }
.vk-sheet--studio { background: var(--vk-color-bg); border-top: 6px solid var(--vk-color-text); }
.vk-sheet--studio .vk-overlay__head { min-height: 52px; align-items: center; padding-top: 0; border-bottom: 1px solid var(--vk-color-rule); }
.vk-sheet--studio .vk-overlay__title { font: 800 20px/1.1 var(--vk-font-display); font-stretch: 85%; }
.vk-sheet--quiet { background: var(--vk-color-bg); border-top: 3px solid var(--vk-color-text); }
.vk-sheet--quiet .vk-overlay__title { font: 700 20px/1.3 var(--vk-font-body); }

/* The eyebrow over an inline head, in every overlay (the product dialogs' .eyebrow): the display face at 13px, Paper's italic, Studio's caps. */
:is(.vk-dialog, .vk-drawer, .vk-sheet):not(.vk-overlay--stacked) .vk-overlay__eyebrow { font: 600 13px/1.2 var(--vk-font-display); letter-spacing: 0.01em; text-transform: none; color: var(--vk-color-muted); }
:is(.vk-dialog--paper, .vk-drawer--paper, .vk-sheet--paper):not(.vk-overlay--stacked) .vk-overlay__eyebrow { font: italic 500 14px/1.2 var(--vk-font-display); }
:is(.vk-dialog--studio, .vk-drawer--studio, .vk-sheet--studio):not(.vk-overlay--stacked) .vk-overlay__eyebrow { font: 700 12px/1.2 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }

/* titleForm="object": the title is the name of the thing acted on, under its eyebrow (the Move dialog's card title). */
:is(.vk-dialog, .vk-drawer, .vk-sheet).vk-overlay--object .vk-overlay__eyebrow { margin: 0; }
:is(.vk-dialog, .vk-drawer, .vk-sheet).vk-overlay--object .vk-overlay__title { margin: 6px 0 0; font: 600 18px/1.3 var(--vk-font-display); font-stretch: normal; letter-spacing: 0; }
:is(.vk-dialog--paper, .vk-drawer--paper, .vk-sheet--paper).vk-overlay--object .vk-overlay__title { font-weight: 500; font-size: 20px; }
:is(.vk-dialog, .vk-drawer, .vk-sheet).vk-overlay--object .vk-overlay__description { font-size: 14px; line-height: 1.45; }
/* A description snippet (words with a face or a chip) is a wrapping row. */
.vk-overlay__description--row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

/* stacked: the card-family head (each vibe's card mockup, each vibe's phone card mockup). A bar (back or Daylight's eyebrow, tools, close), then
   the eyebrow and the title with its aside. Per vibe below; the frame paddings are the references' drawer paddings. */
.vk-overlay--stacked .vk-overlay__head { flex-direction: column; align-items: stretch; gap: var(--vk-space-3); }
.vk-overlay__bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-2) var(--vk-space-3); min-height: var(--vk-target-min); }
.vk-overlay__back { display: flex; flex-wrap: wrap; align-items: center; gap: var(--vk-space-2) var(--vk-space-3); min-width: 0; }
.vk-overlay__bar .vk-overlay__eyebrow { margin: 0; min-width: 0; }
.vk-overlay__bar .vk-overlay__tools { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.vk-overlay--stacked .vk-overlay__titles { display: flex; flex-direction: column; gap: var(--vk-space-3); }
.vk-overlay--stacked .vk-overlay__eyebrow { margin: 0; }
.vk-overlay__eyebrow:has(> .vk-overlay__mark) { display: inline-flex; align-items: center; gap: 8px; }
.vk-overlay--stacked .vk-overlay__description { margin: 0; }
.vk-overlay__titlerow { display: flex; align-items: flex-start; gap: var(--vk-space-3); }
.vk-overlay__titlerow .vk-overlay__title { flex: 1 1 0; min-width: 0; text-wrap: pretty; }
.vk-overlay__aside { display: flex; flex: none; align-items: center; gap: 4px; }
.vk-overlay--stacked .vk-overlay__close { margin: 0; }
/* The body follows a stacked head at the head's own gap, so a card can carry the head's rhythm into its first rows. */
.vk-overlay--stacked .vk-overlay__body { padding-top: var(--vk-space-3); }

/* Daylight: the eyebrow row with its tools, a 1.6rem title under it; the round close sits out on its 44px target. */
.vk-drawer--daylight.vk-overlay--stacked { padding: var(--vk-space-5) var(--vk-space-6); }
.vk-overlay--stacked:is(.vk-drawer--daylight, .vk-dialog--daylight, .vk-sheet--daylight) .vk-overlay__eyebrow { font: 700 var(--vk-text-sm) / 1.2 var(--vk-font-body); letter-spacing: 0.02em; color: var(--vk-color-muted); }
.vk-overlay--stacked:is(.vk-drawer--daylight, .vk-dialog--daylight, .vk-sheet--daylight) .vk-overlay__title { font: 700 1.6rem / 1.2 var(--vk-font-display); letter-spacing: -0.01em; }
.vk-overlay--stacked:is(.vk-drawer--daylight, .vk-dialog--daylight, .vk-sheet--daylight) .vk-overlay__close { --_fg: var(--vk-color-text); margin: -10px -10px -10px 0; border-radius: var(--vk-radius-pill); }
.vk-overlay--stacked:is(.vk-drawer--daylight, .vk-dialog--daylight, .vk-sheet--daylight) .vk-overlay__aside { margin-top: -6px; }
.vk-overlay--stacked:is(.vk-drawer--daylight, .vk-dialog--daylight, .vk-sheet--daylight) .vk-overlay__aside .vk-iconbutton { --_fg: var(--vk-color-text); border-radius: var(--vk-radius-pill); }

/* Paper: the back link and tools, 24px, then a signal kicker with its dot over a 2.1rem Newsreader title. */
.vk-drawer--paper.vk-overlay--stacked { padding: var(--vk-space-5) var(--vk-space-7) var(--vk-space-6); }
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__head { gap: var(--vk-space-5); }
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__body { padding-top: var(--vk-space-5); }
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__eyebrow { display: inline-flex; align-items: center; gap: var(--vk-space-2); font: 600 12px / 1 var(--vk-font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--vk-color-muted); }
/* Only a kicker that says the card needs you (eyebrowTone="needs") takes the signal and its dot (the Paper card mockup's "A letter that needs a reply"). */
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__eyebrow[data-tone="needs"] { color: var(--vk-color-signal-text); }
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__eyebrow[data-tone="needs"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vk-color-signal); }
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__title { font: 500 2.1rem / 1.15 var(--vk-font-display); }
.vk-overlay--stacked:is(.vk-drawer--paper, .vk-dialog--paper, .vk-sheet--paper) .vk-overlay__close { --_fg: var(--vk-color-text); }

/* Studio: a 60px ruled bar edge to edge (32px in, 20px at the close), then 24px down a kicker over an 800 34px title. */
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) { padding: 0; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__head { gap: 0; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__bar { gap: 8px 14px; min-height: 44px; padding: 8px 20px 8px 32px; border-bottom: 1px solid var(--vk-color-rule); }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__bar .vk-overlay__tools { gap: 8px; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__titles { gap: 14px; padding: 24px 32px 0; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__titlerow { gap: 16px; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__eyebrow { font: 700 12px / 1.2 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__title { font: 800 34px / 1.04 var(--vk-font-display); font-stretch: 82%; letter-spacing: -0.015em; text-wrap: wrap; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__body { padding: 28px 32px 32px; }
.vk-overlay--stacked:is(.vk-drawer--studio, .vk-dialog--studio, .vk-sheet--studio) .vk-overlay__actions { padding: 0 32px 32px; }
.vk-overlay--stacked.vk-drawer--studio.vk-drawer--capped { border-top: 0; }

/* Quiet: the back link and two worded tools on 2px ink, then a 28px title and its line, 16px apart. */
.vk-drawer--quiet.vk-overlay--stacked { padding: var(--vk-space-5) var(--vk-space-6) var(--vk-space-6); }
.vk-overlay--stacked:is(.vk-drawer--quiet, .vk-dialog--quiet, .vk-sheet--quiet) .vk-overlay__head { gap: var(--vk-space-4); }
.vk-overlay--stacked:is(.vk-drawer--quiet, .vk-dialog--quiet, .vk-sheet--quiet) .vk-overlay__titles { gap: var(--vk-space-4); }
.vk-overlay--stacked:is(.vk-drawer--quiet, .vk-dialog--quiet, .vk-sheet--quiet) .vk-overlay__body { padding-top: var(--vk-space-4); }
.vk-overlay--stacked:is(.vk-drawer--quiet, .vk-dialog--quiet, .vk-sheet--quiet) .vk-overlay__bar .vk-overlay__tools { gap: 8px; }
.vk-overlay--stacked:is(.vk-drawer--quiet, .vk-dialog--quiet, .vk-sheet--quiet) .vk-overlay__title { font: 700 28px / 1.25 var(--vk-font-body); }
.vk-overlay--stacked:is(.vk-drawer--quiet, .vk-dialog--quiet, .vk-sheet--quiet) .vk-overlay__description { font-size: 17px; line-height: 1.55; }

/* Keys inside any overlay are one keycap in every vibe (the product dialogs' .kbd); Studio squares it off. */
:is(.vk-dialog, .vk-drawer, .vk-sheet) .vk-kbd { display: inline-flex; gap: 6px; align-items: center; }
:is(.vk-dialog, .vk-drawer, .vk-sheet) .vk-kbd__gap { display: none; }
:is(.vk-dialog, .vk-drawer, .vk-sheet) .vk-kbd__key { padding: 4px 6px; border: 1px solid var(--vk-color-line); border-radius: 6px; background: var(--vk-color-raised); color: var(--vk-color-muted); font: 500 11px/1 var(--vk-font-mono); }
:is(.vk-dialog--studio, .vk-drawer--studio, .vk-sheet--studio) .vk-kbd__key { border-color: currentColor; border-radius: 2px; background: transparent; }
/* PageHead (component spec §2.4/23, P30, §2.5). One DOM order in every vibe; the layout is CSS. */
.vk-pagehead { display: flex; flex-direction: column; gap: var(--vk-space-3); min-width: 0; }
.vk-pagehead__crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-2); margin: 0; padding: 0; list-style: none; font-size: 15px; color: var(--vk-color-muted); }
.vk-pagehead__crumbs li { display: inline-flex; align-items: center; gap: var(--vk-space-2); }
.vk-pagehead__crumbs a { display: inline-flex; align-items: center; min-height: var(--vk-target-min); color: var(--vk-color-accent-text); text-decoration: underline; text-underline-offset: 3px; }
.vk-pagehead__row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--vk-space-4) var(--vk-space-5); }
.vk-pagehead__text { display: flex; flex-direction: column; gap: var(--vk-space-2); min-width: 0; flex: 1 1 360px; }
.vk-pagehead__eyebrow { margin: 0; font: var(--vk-type-eyebrow); color: var(--vk-color-muted); }
.vk-pagehead__title { margin: 0; font: var(--vk-type-h1); font-stretch: var(--vk-type-h1-stretch); overflow-wrap: anywhere; }
.vk-pagehead__lead { font-weight: inherit; }
.vk-pagehead__lead[data-tone="needs"] { color: var(--vk-color-signal-text); }
.vk-pagehead__lede { margin: 0; max-width: 62ch; color: var(--vk-color-text); }
.vk-pagehead__actions { display: flex; flex-flow: row wrap; gap: var(--vk-space-2); align-items: center; max-width: 100%; min-width: 0; }
/* Each action stays on one line and has a 44px hit area, drawn outside the words. */
.vk-pagehead__actions .vk-link { position: relative; white-space: nowrap; flex-shrink: 0; }
.vk-pagehead__actions .vk-link::after { content: ""; position: absolute; inset: 50% -6px auto; height: max(100%, var(--vk-target-min)); transform: translateY(-50%); }

/* Daylight: a friendly heading, not uppercase. */
.vk-pagehead--daylight .vk-pagehead__eyebrow { letter-spacing: 0.02em; }
.vk-pagehead--daylight .vk-pagehead__lede { font: 400 18px/1.5 var(--vk-font-body); }

/* Paper: a masthead with the action in its own column. */
.vk-pagehead--paper .vk-pagehead__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, auto); align-items: end; padding-bottom: var(--vk-space-4); border-bottom: 2px solid var(--vk-color-rule); }
.vk-pagehead--paper .vk-pagehead__eyebrow { letter-spacing: 0.12em; text-transform: uppercase; }
.vk-pagehead--paper .vk-pagehead__lede { font: italic 400 20px/1.45 var(--vk-font-display); }

@media (max-width: 480px) { .vk-pagehead--paper .vk-pagehead__row { grid-template-columns: minmax(0, 1fr); } }

/* Studio: the kicker and an editorial lede in the serif. */
.vk-pagehead--studio .vk-pagehead__crumbs ol { font: 700 13.5px/1 var(--vk-font-body); }
.vk-pagehead--studio .vk-pagehead__eyebrow { letter-spacing: 0.1em; text-transform: uppercase; }
.vk-pagehead--studio .vk-pagehead__title { letter-spacing: -0.02em; }
.vk-pagehead--studio .vk-pagehead__lede { font: 400 18px/1.45 var(--vk-font-serif); }

/* Quiet: one column, actions under the words. */
.vk-pagehead--quiet .vk-pagehead__row { flex-direction: column; align-items: flex-start; }
.vk-pagehead--quiet .vk-pagehead__text { flex-basis: auto; }
.vk-pagehead--quiet .vk-pagehead__lede { font: 400 20px/1.5 var(--vk-font-body); }
/* PhoneHeader (component spec §2.4/7), drawn to the approved phone shells (2026-10-12): the eyebrow row (eyebrow, Live,
   eyebrow actions), the title row (the title or its switch, the actions), the dateline, the links, and what sits below. */
.vk-phoneheader { box-sizing: border-box; justify-self: stretch; position: relative; display: flex; flex-direction: column; gap: 4px; }
.vk-phoneheader *, .vk-phoneheader *::before, .vk-phoneheader *::after { box-sizing: border-box; }
.vk-phoneheader__back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: var(--vk-target-min); color: inherit; }
.vk-phoneheader__top { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vk-phoneheader__eyebrow { flex: 1 1 auto; min-width: 0; margin: 0; }
.vk-phoneheader__eyebrow-actions { flex: none; display: flex; align-items: center; gap: 8px; }
.vk-phoneheader__row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vk-phoneheader__title { flex: 1; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.vk-phoneheader__switch { display: flex; align-items: center; gap: 4px; width: 100%; min-height: 48px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; }
.vk-phoneheader__switch > span:first-child { overflow-wrap: anywhere; }
.vk-phoneheader__switch > .vk-icon { flex: none; }
.vk-phoneheader__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.vk-phoneheader__dateline { margin: 0; }
.vk-phoneheader__links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 16px; }
.vk-phoneheader__link { display: inline-flex; align-items: center; min-height: var(--vk-target-min); padding: 0; border: 0; background: transparent; color: var(--vk-color-text); font: inherit; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.vk-phoneheader__below { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.vk-phoneheader__greeting { min-width: 0; }

/* Daylight (.greet): a sky card 8px in, the switch on the title, a raised search and the New card pill; Live ends the row below. */
.vk-phoneheader--daylight { overflow: hidden; gap: 12px; margin: 8px 8px 0; padding: 8px 12px 18px; border-radius: var(--vk-radius-lg); }
.vk-phoneheader--daylight .vk-phoneheader__sun { position: absolute; top: 128px; right: -28px; width: 80px; height: 80px; border-radius: 50%; box-shadow: 0 0 36px 10px color-mix(in oklch, var(--vk-sky-sun) 45%, transparent); }
.vk-phoneheader--daylight > :not(.vk-phoneheader__sun) { position: relative; }
.vk-phoneheader--daylight .vk-phoneheader__back { font: 600 15px / 1 var(--vk-font-body); text-decoration: none; }
.vk-phoneheader--daylight .vk-phoneheader__eyebrow { font: 700 12px / 1.2 var(--vk-font-body); letter-spacing: 0.02em; opacity: 0.8; }
.vk-phoneheader--daylight .vk-phoneheader__row { gap: 6px; }
.vk-phoneheader--daylight .vk-phoneheader__title { font: 700 22px / 1.1 var(--vk-font-display); letter-spacing: -0.01em; }
.vk-phoneheader--daylight .vk-phoneheader__switch .vk-icon { stroke-width: 2; }
.vk-phoneheader--daylight .vk-phoneheader__dateline { font: 400 14px / 1.4 var(--vk-font-body); opacity: 0.8; }
.vk-phoneheader--daylight .vk-phoneheader__actions { gap: 6px; }
.vk-phoneheader--daylight .vk-phoneheader__actions .vk-button { min-height: 44px; padding: 0 16px; gap: 6px; border-radius: var(--vk-radius-pill); font: 700 16px / 1 var(--vk-font-body); }
.vk-phoneheader--daylight .vk-phoneheader__live { margin-left: auto; }
.vk-phoneheader--daylight .vk-live { gap: 6px; min-height: 28px; padding: 0 10px; border-radius: var(--vk-radius-pill); background: var(--vk-color-success-wash); color: var(--vk-color-success-text); font: 700 13px / 1 var(--vk-font-body); }
.vk-phoneheader--daylight .vk-live__dot { width: 7px; height: 7px; }
.vk-phoneheader--daylight .vk-phoneheader__below .vk-button { min-height: 44px; padding: 0 12px; gap: 6px; border-radius: var(--vk-radius-pill); --_edge-w: 0px; font: 600 15px / 1 var(--vk-font-body); }

/* Paper (.pm): full bleed with 16px gutters; the nameplate row between an ink rule and a hairline (nameplate, Live, search),
   the headline, its dateline and links, then what sits below on a double rule. */
.vk-phoneheader--paper { gap: 0; padding: 0 16px; }
.vk-phoneheader--paper .vk-phoneheader__top { gap: 4px; margin-top: 10px; border-top: 1px solid var(--vk-color-text); border-bottom: 1px solid var(--vk-color-line); }
.vk-phoneheader--paper .vk-phoneheader__back { font: italic 400 17px / 1 var(--vk-font-display); }
.vk-phoneheader--paper .vk-phoneheader__eyebrow { display: inline-flex; align-items: center; min-height: 44px; color: var(--vk-color-text); font: 600 25px / 1 var(--vk-font-display); font-variant-caps: all-small-caps; letter-spacing: 0.07em; }
.vk-phoneheader--paper .vk-live { gap: 6px; padding-right: 6px; color: var(--vk-color-success-text); font: 700 11.5px / 1.45 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-phoneheader--paper .vk-live__dot { width: 7px; height: 7px; }
.vk-phoneheader--paper .vk-phoneheader__eyebrow-actions { gap: 4px; }
.vk-phoneheader--paper .vk-phoneheader__row { padding-top: 16px; }
.vk-phoneheader--paper .vk-phoneheader__title { font: 500 34px / 1.1 var(--vk-font-display); }
.vk-phoneheader--paper .vk-phoneheader__dateline { margin-top: 2px; color: var(--vk-color-muted); font: italic 400 17px / 1.45 var(--vk-font-display); }
.vk-phoneheader--paper .vk-phoneheader__links { margin-top: 2px; padding-bottom: 4px; font: 400 15px / 1.45 var(--vk-font-body); }
.vk-phoneheader--paper .vk-phoneheader__links .vk-button--text { --_fg: var(--vk-color-text); gap: 6px; padding: 0; font: italic 400 17px / 1.45 var(--vk-font-display); text-decoration: underline; text-underline-offset: 4px; }
.vk-phoneheader--paper .vk-button--secondary { --_edge: var(--vk-color-line); gap: 6px; padding: 0 11px; font: 600 15px / 1.45 var(--vk-font-body); }
.vk-phoneheader--paper .vk-phoneheader__below { gap: 18px; border-bottom: 3px double var(--vk-color-text); }
.vk-phoneheader--paper .vk-phoneheader__below .vk-tabs--paper { gap: 18px; border-bottom: 0; }
.vk-phoneheader--paper .vk-phoneheader__below .vk-tabs__item { padding: 0 1px 2px; letter-spacing: 0.08em; }
/* 44px, the target size (the Paper phone mockup draws it 40px). */
.vk-phoneheader--paper .vk-phoneheader__below .vk-button { min-height: var(--vk-target-min); margin: 0 0 0 auto; }

/* Studio (.ph-top): the kicker row (kicker, Live, the ruled search square), the switch at 24px with New card; the sub-bar may sit
   outside the rule. */
.vk-phoneheader--studio { gap: 4px; padding: 10px 16px 12px; border-bottom: 1px solid var(--vk-color-rule); }
.vk-phoneheader--studio .vk-phoneheader__back { font: 700 13.5px / 1 var(--vk-font-body); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.vk-phoneheader--studio .vk-phoneheader__eyebrow { flex: 0 1 auto; color: var(--vk-color-muted); font: 700 12px / 1.2 var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-phoneheader--studio .vk-phoneheader__live { margin-left: auto; }
.vk-phoneheader--studio .vk-live { gap: 6px; font: 700 12px / normal var(--vk-font-body); letter-spacing: 0.1em; text-transform: uppercase; }
.vk-phoneheader--studio .vk-live__dot { border-radius: 0; background: var(--vk-color-stage-text); }
.vk-phoneheader--studio .vk-phoneheader__row { gap: 10px; }
.vk-phoneheader--studio .vk-phoneheader__title { font: 800 24px / 1 var(--vk-font-body); font-stretch: 80%; letter-spacing: -0.01em; white-space: normal; }
.vk-phoneheader--studio .vk-phoneheader__switch { gap: 8px; min-height: 44px; }
.vk-phoneheader--studio .vk-phoneheader__switch .vk-icon { width: 18px; height: 18px; stroke-width: 1.75; }
.vk-phoneheader--studio .vk-phoneheader__actions .vk-button { padding: 0 12px; }
.vk-phoneheader__below--studio { gap: 18px; padding: 0 16px; border-bottom: 1px solid var(--vk-color-line); }
.vk-phoneheader__below--studio .vk-tabs--studio { gap: 0 18px; border-bottom: 0; }
.vk-phoneheader__below--studio > .vk-button, .vk-phoneheader__below--studio > :last-child.vk-button { margin-left: auto; }

/* Quiet (.pq): plain words; "Board: name — Change board" on one line, the rows below; Live for screen readers. */
.vk-phoneheader--quiet { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 2px 0.28em; padding: 6px 16px 10px; border-bottom: 1px solid var(--vk-color-line); font: 400 17px / 1.5 var(--vk-font-body); }
.vk-phoneheader--quiet > .vk-phoneheader__back, .vk-phoneheader--quiet > .vk-phoneheader__dateline, .vk-phoneheader--quiet > .vk-phoneheader__links, .vk-phoneheader--quiet > .vk-phoneheader__below { flex: 1 0 100%; }
.vk-phoneheader--quiet .vk-phoneheader__top, .vk-phoneheader--quiet .vk-phoneheader__row { display: contents; }
.vk-phoneheader--quiet .vk-phoneheader__back { color: var(--vk-color-accent-text); text-decoration: underline; text-underline-offset: 4px; }
.vk-phoneheader--quiet .vk-phoneheader__eyebrow { flex: none; color: var(--vk-color-text); }
/* The title shrinks and wraps, so a long board name never widens the page. */
.vk-phoneheader--quiet .vk-phoneheader__title { flex: 0 1 auto; min-width: 0; overflow-wrap: anywhere; display: inline-flex; align-items: center; min-height: 44px; font: 700 17px / 1.5 var(--vk-font-body); }
.vk-phoneheader--quiet .vk-phoneheader__dash { color: var(--vk-color-muted); }
.vk-phoneheader--quiet .vk-phoneheader__below { flex-direction: column; align-items: stretch; gap: 2px; }
.vk-phoneheader--quiet .vk-phoneheader__below .vk-button { min-height: 44px; padding: 0 16px; font: 700 17px / 1.5 var(--vk-font-body); }
.vk-phoneheader--quiet .vk-phoneheader__below .vk-button--quiet, .vk-phoneheader--quiet .vk-phoneheader__below .vk-button--text { padding: 0; font-weight: 400; }
.vk-phoneheader--quiet .vk-commandfield--quiet { padding: 0 14px; }
.vk-phoneheader--quiet .vk-tabs__item { line-height: 1.5; }
/* Quiet's Filter (a text control) is at least 44px wide, its words left where they were. */
.vk-phoneheader--quiet .vk-button--text { min-width: var(--vk-target-min); justify-content: flex-start; }
.vk-phonetabbar {
  position: sticky;
  bottom: 0;
  z-index: 5;
  box-sizing: border-box;
  justify-self: stretch;
  display: grid;
  grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
}
.vk-phonetabbar__item { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; color: var(--vk-color-muted); text-decoration: none; }
.vk-phonetabbar__item:hover { color: var(--vk-color-text); }
.vk-phonetabbar__icon { position: relative; display: grid; place-items: center; }

/* Daylight: a floating card (the Daylight phone shell mockup); the current item is ringed in ink. */
.vk-phonetabbar--daylight { bottom: 12px; gap: 4px; margin: auto 12px 12px; padding: 6px; border-radius: var(--vk-radius-lg); background: var(--vk-color-surface); box-shadow: 0 0 0 1px var(--vk-color-line), 0 12px 28px -8px var(--vk-color-ground); }
.vk-phonetabbar--daylight .vk-phonetabbar__item { min-height: 58px; flex-direction: column; border-radius: var(--vk-radius-md); font: 600 13px / 1.45 var(--vk-font-body); }
.vk-phonetabbar--daylight .vk-phonetabbar__item[aria-current="page"] { background: var(--vk-color-raised); color: var(--vk-color-text); font-weight: 700; box-shadow: inset 0 0 0 2px var(--vk-color-primary); }
.vk-phonetabbar--daylight .vk-phonetabbar__count { position: absolute; top: 3px; left: calc(50% + 6px); box-sizing: border-box; min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--vk-radius-pill); background: var(--vk-color-signal-text); color: var(--vk-color-primary-fg); font: 800 12px / 20px var(--vk-font-body); text-align: center; box-shadow: 0 0 0 2px var(--vk-color-surface); }

/* Paper: a double rule and small capitals; the current item is an italic, underlined in ink. */
.vk-phonetabbar--paper { background: var(--vk-color-bg); border-top: 3px double var(--vk-color-text); }
.vk-phonetabbar--paper .vk-phonetabbar__item { min-height: 56px; font: 600 16px / 1.45 var(--vk-font-body); font-variant-caps: all-small-caps; letter-spacing: 0.05em; }
.vk-phonetabbar--paper .vk-phonetabbar__item + .vk-phonetabbar__item { border-left: 1px solid var(--vk-color-line); }
.vk-phonetabbar--paper .vk-phonetabbar__item[aria-current="page"] { color: var(--vk-color-text); font: italic 500 18px / 1.45 var(--vk-font-display); font-variant-caps: normal; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.vk-phonetabbar--paper .vk-phonetabbar__count { color: var(--vk-color-signal-text); font: 700 14px / 1 var(--vk-font-body); font-variant-caps: normal; letter-spacing: 0; }

/* Studio: an ink bar; the current item is cut out of it (the Studio phone shell mockup). */
.vk-phonetabbar--studio { background: var(--vk-color-text); color: var(--vk-color-bg); }
.vk-phonetabbar--studio .vk-phonetabbar__item { min-height: 60px; flex-direction: column; color: var(--vk-color-bg); font: 500 11px / normal var(--vk-font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.vk-phonetabbar--studio .vk-phonetabbar__item:hover { color: var(--vk-color-bg); text-decoration: underline; }
.vk-phonetabbar--studio .vk-phonetabbar__item[aria-current="page"] { background: var(--vk-color-bg); color: var(--vk-color-text); }
.vk-phonetabbar--studio .vk-phonetabbar__count { position: absolute; top: -6px; right: -12px; box-sizing: border-box; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 0; background: var(--vk-color-signal-text); color: var(--vk-color-primary-fg); font: 800 12px / 18px var(--vk-font-body); letter-spacing: 0; text-align: center; text-transform: none; }

/* Quiet: underlined words in ink, no icons; the current one is bold. */
.vk-phonetabbar--quiet { padding: 0 4px; background: var(--vk-color-bg); border-top: 2px solid var(--vk-color-text); }
.vk-phonetabbar--quiet .vk-phonetabbar__item { min-height: 52px; color: var(--vk-color-text); font: 400 16px / 1.5 var(--vk-font-body); text-align: center; text-decoration: underline; text-underline-offset: 4px; }
.vk-phonetabbar--quiet .vk-phonetabbar__item:hover { color: var(--vk-color-text); text-decoration-thickness: 2px; }
.vk-phonetabbar--quiet .vk-phonetabbar__item[aria-current="page"] { font-weight: 700; text-decoration: none; }
.vk-phonetabbar--quiet .vk-phonetabbar__count { color: var(--vk-color-signal-text); font-weight: 700; }

/* A menu tab (the phone's "You") is a button drawn like the other tabs. */
button.vk-phonetabbar__item { width: 100%; margin: 0; padding: 0; border: 0; background: transparent; font: inherit; cursor: pointer; }
.vk-phonetabbar__caret { flex: none; }
/* Deprecated: StatusPill's classes. StateLabel replaces them in 0.0.1; removed in 0.1.0. */
.vk-pill {
  display: inline-flex;
  align-items: center;
  padding: var(--vk-space-1) var(--vk-space-3);
  border-radius: var(--vk-radius-pill);
  font: 700 var(--vk-text-sm) / 1.2 var(--vk-font-body);
  color: var(--vk-face-ink);
}
.vk-pill--working { background: var(--vk-mood-working); }
.vk-pill--thinking { background: var(--vk-mood-thinking); }
.vk-pill--needs { background: var(--vk-mood-needs); box-shadow: inset 0 0 0 2px var(--vk-color-signal); }
.vk-pill--done { background: var(--vk-mood-done); }
.vk-pill--resting { background: var(--vk-mood-resting); }
/* QuickFilter (component spec §2.4/12). The checked filter follows the accent table; a needs count is the signal text. */
.vk-quickfilter { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.vk-quickfilter__item { appearance: none; display: inline-flex; align-items: center; min-height: var(--vk-target-min); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.vk-quickfilter__item:disabled { cursor: not-allowed; opacity: 0.5; }
.vk-quickfilter__face { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.vk-quickfilter__count { font-variant-numeric: tabular-nums; }

/* Daylight: pill chips. */
.vk-quickfilter--daylight .vk-quickfilter__item { padding: 0 16px; border-radius: var(--vk-radius-pill); background: var(--vk-color-surface); color: var(--vk-color-text); box-shadow: inset 0 0 0 2px var(--vk-color-line); font-weight: 600; }
.vk-quickfilter--daylight .vk-quickfilter__count { font-weight: 700; color: var(--vk-color-muted); }
.vk-quickfilter--daylight .vk-quickfilter__item[data-zero="true"] .vk-quickfilter__count { font-weight: 400; color: var(--vk-color-faint); }
.vk-quickfilter--daylight .vk-quickfilter__item[data-state="checked"] { background: var(--vk-color-accent-wash); color: var(--vk-color-accent-text); box-shadow: inset 0 0 0 2px var(--vk-color-accent); }
.vk-quickfilter--daylight .vk-quickfilter__item[data-state="checked"] .vk-quickfilter__count:not([data-tone="needs"]) { color: var(--vk-color-accent-text); }
.vk-quickfilter--daylight .vk-quickfilter__item:focus-visible { box-shadow: var(--vk-focus), inset 0 0 0 2px var(--vk-color-line); }

/* Paper: text tabs on a rule. */
.vk-quickfilter--paper { gap: 0; border-bottom: 1px solid var(--vk-color-line); }
.vk-quickfilter--paper .vk-quickfilter__item { min-height: 48px; padding: 0 16px; margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--vk-color-muted); font-weight: 500; }
.vk-quickfilter--paper .vk-quickfilter__item:first-child { padding-left: 2px; }
.vk-quickfilter--paper .vk-quickfilter__item:hover { color: var(--vk-color-text); }
.vk-quickfilter--paper .vk-quickfilter__count { font: 500 1rem / 1 var(--vk-font-display); }
.vk-quickfilter--paper .vk-quickfilter__item[data-zero="true"] .vk-quickfilter__count { color: var(--vk-color-faint); }
.vk-quickfilter--paper .vk-quickfilter__item[data-state="checked"] { color: var(--vk-color-text); font-weight: 700; border-bottom-color: var(--vk-color-accent); }

/* Studio: SmallMultiples draws it. */
.vk-quickfilter--studio { display: block; }

/* Quiet: underlined words; the checked one is bold with a thick underline. */
.vk-quickfilter--quiet { gap: 4px 20px; }
.vk-quickfilter--quiet .vk-quickfilter__item { color: var(--vk-color-text); text-decoration: underline; text-underline-offset: 4px; }
.vk-quickfilter--quiet .vk-quickfilter__face { gap: 4px; }
.vk-quickfilter--quiet .vk-quickfilter__item[data-zero="true"] { color: var(--vk-color-muted); }
.vk-quickfilter--quiet .vk-quickfilter__item[data-state="checked"] { font-weight: 700; text-decoration-thickness: 3px; }

/* Last, so it wins over the checked colours: the count of people waiting is always the signal text. */
.vk-quickfilter .vk-quickfilter__count[data-tone="needs"] { color: var(--vk-color-signal-text); }

/* Phones: one scrolling row. It is positioned so the radios' hidden names scroll with it instead of widening the page. */
@media (max-width: 639.98px) {
  .vk-quickfilter--daylight, .vk-quickfilter--paper, .vk-quickfilter--quiet { flex-wrap: nowrap; position: relative; overflow-x: auto; scrollbar-width: none; padding: 2px 16px 6px; }
}
/* SectionHeader (component spec §2.4/33). A real h2/h3; the ordinal is decoration. */
.vk-sectionheader { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; min-width: 0; }
.vk-sectionheader__title { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.vk-sectionheader__meta { color: var(--vk-color-muted); }
.vk-sectionheader__meta, .vk-sectionheader__action { margin-left: auto; }
.vk-sectionheader__action { flex-shrink: 0; white-space: nowrap; }
.vk-sectionheader__action :is(a, button) { position: relative; padding: 0; border: 0; background: transparent; color: var(--vk-color-text); font: 600 14px / 1 var(--vk-font-body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.vk-sectionheader__action :is(a, button)::after { content: ""; position: absolute; inset: 50% -6px auto; height: max(100%, var(--vk-target-min)); transform: translateY(-50%); }
.vk-sectionheader--studio .vk-sectionheader__action :is(a, button) { font: 700 13.5px / 1 var(--vk-font-body); text-decoration-thickness: 1.5px; }
.vk-sectionheader__meta + .vk-sectionheader__action { margin-left: 0; }

/* Daylight: a display title and a mono count, no rule. */
.vk-sectionheader--daylight .vk-sectionheader__title { font: 700 var(--vk-text-lg) / 1.2 var(--vk-font-display); }
.vk-sectionheader--daylight .vk-sectionheader__count { color: var(--vk-color-muted); font: 500 14px / 1.2 var(--vk-font-mono); }

/* Paper: an optional kicker, then the title on an ink rule. */
.vk-sectionheader--paper { display: block; }
.vk-sectionheader--paper .vk-sectionheader__kicker { margin: 0 0 4px; font: 600 12.5px / 1.2 var(--vk-font-body); letter-spacing: 0.12em; text-transform: uppercase; }
.vk-sectionheader--paper .vk-sectionheader__row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; padding-bottom: 6px; border-bottom: 1px solid var(--vk-color-text); }
.vk-sectionheader--paper .vk-sectionheader__title { font: 600 28px / 1.15 var(--vk-font-display); }
.vk-sectionheader--paper :is(.vk-sectionheader__meta, .vk-sectionheader__count) { color: var(--vk-color-muted); font: italic 400 16px / 1.3 var(--vk-font-display); }

/* Studio: a mono ordinal and an ink rule above an 800 16px title. */
.vk-sectionheader--studio { gap: 6px 12px; padding-top: 10px; border-top: 1.5px solid var(--vk-color-rule); }
.vk-sectionheader--studio .vk-sectionheader__no { color: var(--vk-color-muted); font: 500 12px / 1 var(--vk-font-mono); }
.vk-sectionheader--studio .vk-sectionheader__title { font: 800 16px / 1.2 var(--vk-font-body); }
.vk-sectionheader--studio :is(.vk-sectionheader__meta, .vk-sectionheader__count) { color: var(--vk-color-muted); font: 500 12px / 1.2 var(--vk-font-mono); }

/* Quiet: a plain 24px title (canonical over 22 and 26), the count in muted words, no rule. */
.vk-sectionheader--quiet .vk-sectionheader__title { font: 700 24px / 1.3 var(--vk-font-body); }
.vk-sectionheader--quiet .vk-sectionheader__count { color: var(--vk-color-muted); font: 400 18px / 1.3 var(--vk-font-body); }
/* Segmented (component spec §2.4/11): one choice of a few, a bits-ui radio group. Checked items carry data-state="checked". */
.vk-segmented { display: inline-flex; flex-wrap: wrap; align-items: center; }
.vk-segmented__item { --_ring: 0 0 0 0 transparent; display: inline-flex; align-items: center; gap: 8px; min-height: var(--vk-target-min); padding: 0; border: 0; background: transparent; color: var(--vk-color-text); font: inherit; white-space: nowrap; cursor: pointer; }
.vk-segmented__item:disabled { opacity: 0.5; cursor: not-allowed; }

/* Daylight: the pill track; the checked pill is the accent wash and ring (accent table). */
.vk-segmented--daylight { gap: var(--vk-space-1); padding: var(--vk-space-1); border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); }
.vk-segmented--daylight .vk-segmented__item { padding: 0 var(--vk-space-4); border-radius: var(--vk-radius-pill); font: 400 16px / 1 var(--vk-font-body); }
.vk-segmented--daylight .vk-segmented__item:hover { background: var(--vk-color-surface); }
.vk-segmented--daylight .vk-segmented__item[data-state="checked"] { --_ring: inset 0 0 0 2px var(--vk-color-accent); background: var(--vk-color-accent-wash); color: var(--vk-color-text); box-shadow: var(--_ring); }

/* Daylight sm (a control in a form or a toolbar, the product dialogs): 14px semibold; the checked one takes the accent's text colour. */
.vk-segmented--daylight.vk-segmented--sm .vk-segmented__item { font: 600 var(--vk-text-sm) / 1 var(--vk-font-body); }
.vk-segmented--daylight.vk-segmented--sm .vk-segmented__item[data-state="checked"] { color: var(--vk-color-accent-text); }

/* Paper: underlined words; the checked one bold, underlined in the accent. */
.vk-segmented--paper { gap: 18px; }
.vk-segmented--paper .vk-segmented__item { color: var(--vk-color-muted); font: 500 16px / 1 var(--vk-font-body); text-decoration: none; }
/* Text-width items are narrower than 44px: an invisible hit area widens the target, the drawn look unchanged. */
.vk-segmented--paper .vk-segmented__item { position: relative; }
.vk-segmented--paper .vk-segmented__item::after { content: ""; position: absolute; inset: 50% auto auto 50%; width: max(100%, var(--vk-target-min)); height: max(100%, var(--vk-target-min)); transform: translate(-50%, -50%); }
.vk-segmented--paper .vk-segmented__item:hover { color: var(--vk-color-text); }
.vk-segmented--paper .vk-segmented__item[data-state="checked"] { color: var(--vk-color-text); font-weight: 700; text-decoration: underline; text-decoration-color: var(--vk-color-accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Studio, run-in: words divided by hairlines; the checked one underlined 3px in the accent. */
.vk-segmented--studio .vk-segmented__item { padding: 0 14px; border-left: 1px solid var(--vk-color-line); color: var(--vk-color-muted); font: 700 14px / 1 var(--vk-font-body); }
.vk-segmented--studio .vk-segmented__item:first-of-type { padding-left: 0; border-left: 0; }
.vk-segmented--studio .vk-segmented__item:hover { color: var(--vk-color-text); }
.vk-segmented--studio .vk-segmented__item[data-state="checked"] { color: var(--vk-color-text); text-decoration: underline; text-decoration-color: var(--vk-color-accent); text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* Studio, box: a ruled box, small capitals, the checked item filled with ink (36px drawn, 44px target). */
.vk-segmented--studio.vk-segmented--box { flex-wrap: nowrap; border: 1px solid var(--vk-color-rule); }
.vk-segmented--studio.vk-segmented--box .vk-segmented__item { min-height: 36px; padding: 0 12px; border-left: 0; color: var(--vk-color-text); font: 700 12px / 1 var(--vk-font-body); letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; }
.vk-segmented--studio.vk-segmented--box .vk-segmented__item + .vk-segmented__item { border-left: 1px solid var(--vk-color-rule); }
.vk-segmented--studio.vk-segmented--box .vk-segmented__item[data-state="checked"] { background: var(--vk-color-text); color: var(--vk-color-bg); }

/* Quiet: words after a radio ring; checked fills the ring and the word is bold. Ink only. */
.vk-segmented--quiet { gap: 20px; }
.vk-segmented--quiet .vk-segmented__item { font: 400 17px / 1 var(--vk-font-body); text-decoration: underline; text-underline-offset: 4px; }
.vk-segmented--quiet .vk-segmented__item::before { content: ""; flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--vk-color-text); }
.vk-segmented--quiet .vk-segmented__item[data-state="checked"] { font-weight: 700; text-decoration: none; }
.vk-segmented--quiet .vk-segmented__item[data-state="checked"]::before { box-shadow: inset 0 0 0 6px var(--vk-color-text); }

/* Focus adds the ring to the checked item's own edge. */
.vk-segmented__item[data-state="checked"]:focus-visible { box-shadow: var(--vk-focus), var(--_ring); }

@media (forced-colors: active) {
  .vk-segmented__item { border: 1px solid ButtonText; }
}

/* Daylight pill (the phone header on the sky): a translucent track, 2px apart; the checked one a raised surface pill in ink. */
.vk-segmented--daylight.vk-segmented--pill { gap: 2px; padding: 3px; background: color-mix(in oklch, var(--vk-color-surface) 55%, transparent); }
.vk-segmented--daylight.vk-segmented--pill .vk-segmented__item { padding: 0 11px; color: inherit; font: 600 15px / 1 var(--vk-font-body); }
.vk-segmented--daylight.vk-segmented--pill .vk-segmented__item[data-state="checked"] { --_ring: 0 var(--vk-lift) 0 var(--vk-color-ground); background: var(--vk-color-surface); color: var(--vk-color-text); font-weight: 700; box-shadow: var(--_ring); }
.vk-sky {
  --vk-sky-top: var(--vk-sky-noon-top);
  --vk-sky-bottom: var(--vk-sky-noon-bottom);
  --vk-sky-text: var(--vk-sky-noon-text);
  --vk-sky-sun: var(--vk-sky-noon-sun);
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--vk-sky-top), var(--vk-sky-bottom));
  color: var(--vk-sky-text);
}
.vk-sky[data-phase="dawn"] { --vk-sky-top: var(--vk-sky-dawn-top); --vk-sky-bottom: var(--vk-sky-dawn-bottom); --vk-sky-text: var(--vk-sky-dawn-text); --vk-sky-sun: var(--vk-sky-dawn-sun); }
.vk-sky[data-phase="morning"] { --vk-sky-top: var(--vk-sky-morning-top); --vk-sky-bottom: var(--vk-sky-morning-bottom); --vk-sky-text: var(--vk-sky-morning-text); --vk-sky-sun: var(--vk-sky-morning-sun); }
.vk-sky[data-phase="golden"] { --vk-sky-top: var(--vk-sky-golden-top); --vk-sky-bottom: var(--vk-sky-golden-bottom); --vk-sky-text: var(--vk-sky-golden-text); --vk-sky-sun: var(--vk-sky-golden-sun); }
.vk-sky[data-phase="dusk"] { --vk-sky-top: var(--vk-sky-dusk-top); --vk-sky-bottom: var(--vk-sky-dusk-bottom); --vk-sky-text: var(--vk-sky-dusk-text); --vk-sky-sun: var(--vk-sky-dusk-sun); }
.vk-sky[data-phase="night"] { --vk-sky-top: var(--vk-sky-night-top); --vk-sky-bottom: var(--vk-sky-night-bottom); --vk-sky-text: var(--vk-sky-night-text); --vk-sky-sun: var(--vk-sky-night-sun); }
/* Dark at dusk, Daylight's sun is the night sun, its glow smaller (the Daylight phone mockup, dark). Daylight only: Studio keeps its own sun. */
[data-theme="dark"] .vk-sky[data-phase="dusk"]:where([data-vibe="daylight"] *) { --vk-sky-sun: var(--vk-sky-night-sun); }
.vk-sky__sun {
  position: absolute;
  top: var(--vk-space-5);
  right: var(--vk-space-6);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--vk-sky-sun);
  box-shadow: 0 0 48px 12px color-mix(in oklch, var(--vk-sky-sun) 45%, transparent);
}
.vk-sky__content { position: relative; padding: var(--vk-space-5); }
[data-time="subtle"] .vk-sky { background: color-mix(in oklch, var(--vk-sky-top) 30%, var(--vk-color-bg)); color: var(--vk-color-text); }
[data-time="subtle"] .vk-sky__sun { display: none; }
[data-time="off"] .vk-sky { background: var(--vk-color-bg); color: var(--vk-color-text); }
[data-time="off"] .vk-sky__sun { display: none; }
[data-vibe="studio"] .vk-sky__sun { width: 10px; height: 10px; box-shadow: 0 0 10px 2px var(--vk-sky-sun); }
[data-vibe="quiet"] .vk-sky__sun, [data-vibe="paper"] .vk-sky__sun { display: none; }
[data-theme="dark"] .vk-sky[data-phase="dusk"]:where([data-vibe="daylight"] *) .vk-sky__sun { box-shadow: 0 0 24px 4px color-mix(in oklch, var(--vk-sky-sun) 30%, transparent); }
/* SmallMultiples (component spec §2.4/26, P20, P21). No colour carries meaning alone: hatch for blocked,
   filled for done, outline for queued, and the summary sentence says it all. */
.vk-smallmultiples { margin: 0; min-width: 0; }
.vk-smallmultiples__caption { margin: 0 0 12px; font: var(--vk-type-meta); color: var(--vk-color-muted); }
.vk-smallmultiples__grid { margin: 0; padding: 0; list-style: none; }
.vk-smallmultiples__item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vk-smallmultiples__pick {
  appearance: none; display: flex; flex-direction: column; gap: 8px; min-height: var(--vk-target-min); padding: 0; border: 0;
  background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer;
}
.vk-smallmultiples__pick:disabled { cursor: not-allowed; opacity: 0.5; }
.vk-smallmultiples__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.vk-smallmultiples__note { font: 400 13px / 1.35 var(--vk-font-body); color: var(--vk-color-muted); overflow-wrap: anywhere; }

/* Studio: columns of squares under a ramp band. */
.vk-smallmultiples--studio .vk-smallmultiples__grid { display: grid; grid-template-columns: repeat(var(--_cols, var(--_count)), minmax(0, 1fr)); column-gap: 12px; row-gap: 20px; }
.vk-smallmultiples--studio .vk-smallmultiples__band { display: block; height: 6px; background: var(--vk-stage-1); }
.vk-smallmultiples--studio .vk-smallmultiples__band[data-stage="2"] { background: var(--vk-stage-2); }
.vk-smallmultiples--studio .vk-smallmultiples__band[data-stage="3"] { background: var(--vk-stage-3); }
.vk-smallmultiples--studio .vk-smallmultiples__band[data-stage="4"] { background: var(--vk-stage-4); }
.vk-smallmultiples--studio .vk-smallmultiples__band[data-stage="5"] { background: var(--vk-stage-5); }
.vk-smallmultiples--studio .vk-smallmultiples__band[data-stage="6"] { background: var(--vk-stage-6); }
.vk-smallmultiples--studio .vk-smallmultiples__band[data-stage="7"] { background: var(--vk-stage-7); }
.vk-smallmultiples--studio .vk-smallmultiples__lb { display: flex; flex-direction: column; gap: 1px; }
.vk-smallmultiples--studio .vk-smallmultiples__no { font: 500 12px / 1.2 var(--vk-font-mono); color: var(--vk-color-muted); }
.vk-smallmultiples--studio .vk-smallmultiples__name { overflow: hidden; font: 700 14px / 1.2 var(--vk-font-body); white-space: nowrap; text-overflow: ellipsis; }
.vk-smallmultiples--studio .vk-smallmultiples__count { font: 900 72px / 0.9 var(--vk-font-display); font-stretch: 72%; letter-spacing: -0.03em; }
.vk-smallmultiples--studio .vk-smallmultiples__item[data-zero="true"] .vk-smallmultiples__count { font-weight: 300; color: var(--vk-color-muted); }
.vk-smallmultiples--studio .vk-smallmultiples__units { display: flex; flex-wrap: wrap; gap: 4px; min-height: 18px; padding: 8px 0; border-bottom: 1px solid var(--vk-color-rule); }
.vk-smallmultiples--studio .vk-smallmultiples__unit { flex: none; width: 18px; height: 18px; }
.vk-smallmultiples__unit[data-state="needs"] { background: var(--vk-color-signal); }
.vk-smallmultiples__unit[data-state="working"] { background: var(--vk-stage-6); }
.vk-smallmultiples__unit[data-state="thinking"] { background: var(--vk-stage-4); }
.vk-smallmultiples__unit[data-state="done"] { background: var(--vk-stage-7); }
.vk-smallmultiples__unit[data-state="queued"] { box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
.vk-smallmultiples__unit[data-state="blocked"] { background: var(--vk-hatch-blocked); box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
.vk-smallmultiples__unit[data-state="stopped"] { box-shadow: inset 0 0 0 1.5px var(--vk-color-text); }
.vk-smallmultiples__unit[data-state="failed"] {
  box-shadow: inset 0 0 0 1.5px var(--vk-color-text);
  background:
    linear-gradient(45deg, transparent calc(50% - 0.75px), var(--vk-color-text) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--vk-color-text) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}
.vk-smallmultiples__unit[data-state="off"], .vk-smallmultiples__unit[data-state="resting"] { box-shadow: inset 0 0 0 1.5px var(--vk-color-muted); }
.vk-smallmultiples--studio .vk-smallmultiples__pick[data-state="checked"] .vk-smallmultiples__name { text-decoration: underline; text-decoration-color: var(--vk-color-accent); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.vk-smallmultiples--studio .vk-smallmultiples__share { display: grid; column-gap: 3px; row-gap: 8px; margin-top: 20px; }
.vk-smallmultiples--studio .vk-smallmultiples__sharelab { display: flex; align-items: baseline; gap: 8px; min-width: 0; font: 700 14px / 1.2 var(--vk-font-body); }
.vk-smallmultiples--studio .vk-smallmultiples__sharelab b { font: 900 48px / 0.9 var(--vk-font-display); font-stretch: 72%; letter-spacing: -0.02em; }
.vk-smallmultiples--studio .vk-smallmultiples__sharelab[data-state="needs"] { color: var(--vk-color-signal-text); }
.vk-smallmultiples--studio .vk-smallmultiples__sharelab[data-state="needs"] b { color: var(--vk-color-signal); }
.vk-smallmultiples--studio .vk-smallmultiples__sharebar { display: block; height: 14px; }
.vk-smallmultiples__sharebar[data-state="needs"] { background: var(--vk-color-signal); }
.vk-smallmultiples__sharebar[data-state="blocked"] { background: var(--vk-hatch-blocked); box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
.vk-smallmultiples__sharebar[data-state="done"] { background: var(--vk-stage-7); }
.vk-smallmultiples__sharebar[data-state="working"] { background: var(--vk-stage-6); }
.vk-smallmultiples__sharebar[data-state="queued"], .vk-smallmultiples__sharebar[data-state="off"] { box-shadow: inset 0 0 0 1.5px var(--vk-color-muted); }
@media (max-width: 639.98px) {
  .vk-smallmultiples--studio { --_cols: 4; }
  .vk-smallmultiples--studio .vk-smallmultiples__grid { column-gap: 4px; }
  .vk-smallmultiples--studio .vk-smallmultiples__count { font-size: 36px; }
  .vk-smallmultiples--studio .vk-smallmultiples__band { height: 5px; }
  .vk-smallmultiples--studio .vk-smallmultiples__sharelab { flex-direction: column; align-items: flex-start; gap: 2px; overflow-wrap: anywhere; }
  .vk-smallmultiples--studio .vk-smallmultiples__sharelab b { font-size: 32px; }
}

/* Daylight: lane-head chips; the share is one pill bar. */
.vk-smallmultiples--daylight .vk-smallmultiples__grid { display: flex; flex-wrap: wrap; gap: 12px; }
.vk-smallmultiples--daylight .vk-smallmultiples__item { gap: 4px; }
.vk-smallmultiples--daylight .vk-smallmultiples__chip { display: inline-flex; align-items: center; gap: 8px; min-height: var(--vk-target-min); padding: 0 16px; border-radius: var(--vk-radius-md); background: var(--vk-color-raised); font: 700 17px / 1 var(--vk-font-display); }
.vk-smallmultiples--daylight .vk-smallmultiples__count { font: 700 15px / 1 var(--vk-font-body); font-variant-numeric: tabular-nums; color: var(--vk-color-muted); }
.vk-smallmultiples--daylight .vk-smallmultiples__item[data-zero="true"] .vk-smallmultiples__count { font-weight: 400; }
.vk-smallmultiples--daylight .vk-smallmultiples__pick[data-state="checked"] .vk-smallmultiples__chip { background: var(--vk-color-accent-wash); color: var(--vk-color-accent-text); box-shadow: inset 0 0 0 2px var(--vk-color-accent); }
.vk-smallmultiples--daylight .vk-smallmultiples__pick[data-state="checked"] .vk-smallmultiples__count { color: var(--vk-color-accent-text); }
.vk-smallmultiples--daylight .vk-smallmultiples__share { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.vk-smallmultiples--daylight .vk-smallmultiples__sharetrack { display: flex; gap: 3px; height: 10px; overflow: hidden; border-radius: var(--vk-radius-pill); }
.vk-smallmultiples--daylight .vk-smallmultiples__sharebar { display: block; flex-basis: 0; }
.vk-smallmultiples--daylight .vk-smallmultiples__sharebar[data-state="done"] { background: var(--vk-color-success); }
.vk-smallmultiples--daylight .vk-smallmultiples__legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 14px; color: var(--vk-color-muted); }
.vk-smallmultiples--daylight .vk-smallmultiples__legend [data-state="needs"] { color: var(--vk-color-signal-text); font-weight: 700; }

/* Paper: ruled columns. */
.vk-smallmultiples--paper .vk-smallmultiples__grid { display: grid; grid-template-columns: repeat(var(--_count), minmax(0, 1fr)); }
.vk-smallmultiples--paper .vk-smallmultiples__item { gap: 3px; padding: 0 12px; border-left: 1px solid var(--vk-color-line); }
.vk-smallmultiples--paper .vk-smallmultiples__item:first-child { padding-left: 0; border-left: 0; }
.vk-smallmultiples--paper .vk-smallmultiples__body { gap: 3px; }
.vk-smallmultiples--paper .vk-smallmultiples__no { font: 600 12px / 1.2 var(--vk-font-body); font-variant-caps: all-small-caps; letter-spacing: 0.08em; color: var(--vk-color-muted); }
.vk-smallmultiples--paper .vk-smallmultiples__name { font: 500 20px / 1.2 var(--vk-font-display); overflow-wrap: anywhere; }
.vk-smallmultiples--paper .vk-smallmultiples__count { font: 500 2rem / 1 var(--vk-font-display); font-variant-numeric: tabular-nums; }
.vk-smallmultiples--paper .vk-smallmultiples__item[data-zero="true"] .vk-smallmultiples__count { color: var(--vk-color-muted); }
.vk-smallmultiples--paper .vk-smallmultiples__pick[data-state="checked"] .vk-smallmultiples__name { text-decoration: underline; text-decoration-color: var(--vk-color-accent); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vk-smallmultiples--paper .vk-smallmultiples__sentence { margin: 16px 0 0; font: italic 400 18px / 1.45 var(--vk-font-display); }

/* Quiet: a plain list. */
.vk-smallmultiples--quiet .vk-smallmultiples__grid { display: flex; flex-direction: column; gap: 4px; font-size: 18px; }
.vk-smallmultiples--quiet .vk-smallmultiples__item { gap: 0; }
.vk-smallmultiples--quiet .vk-smallmultiples__item[data-zero="true"] { color: var(--vk-color-muted); }
.vk-smallmultiples--quiet .vk-smallmultiples__pick { justify-content: center; text-decoration: underline; text-underline-offset: 4px; }
.vk-smallmultiples--quiet .vk-smallmultiples__pick[data-state="checked"] { font-weight: 700; text-decoration-thickness: 3px; }
.vk-smallmultiples--quiet .vk-smallmultiples__sentence { margin: 12px 0 0; font-size: 18px; }
/* StageTrack (component spec §2.4/27). Each step says its state in words; the bars are decoration (aria-hidden). */
.vk-stages { inline-size: 100%; margin: 0; padding: 0; list-style: none; }
.vk-stages__step { position: relative; min-width: 0; }

/* Daylight (the Daylight card mockup .dl-track): 8px pill bars, every step numbered, only the current one named and widened; a done step
   carries a check. The current name may wrap onto two lines (the Daylight card-states mockup, cell C), never more, and never past its step. */
.vk-stages--daylight { display: flex; gap: var(--vk-space-1); }
.vk-stages--daylight .vk-stages__step { flex: 1 1 0; display: flex; flex-direction: column; gap: 6px; font: 600 var(--vk-text-sm) / 1.2 var(--vk-font-body); color: var(--vk-color-muted); }
.vk-stages--daylight .vk-stages__name { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vk-stages--daylight .vk-stages__name > .vk-icon { flex: none; }
.vk-stages--daylight [aria-current="step"] .vk-stages__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; white-space: normal; overflow-wrap: anywhere; }
.vk-stages--daylight .vk-stages__bar { height: 8px; border-radius: var(--vk-radius-pill); background: var(--vk-color-line); }
.vk-stages--daylight [data-state="done"] .vk-stages__bar { background: var(--vk-color-success); }
.vk-stages--daylight [aria-current="step"] { flex-grow: 2.6; color: var(--vk-color-text); font-weight: 800; }
.vk-stages--daylight [data-state="current"] .vk-stages__bar { background: var(--vk-color-primary); outline: 2px solid var(--vk-color-text); outline-offset: 1px; }
.vk-stages--daylight [data-state="stopped"] { color: var(--vk-color-signal-text); }
.vk-stages--daylight [data-state="stopped"] .vk-stages__bar { background: var(--vk-color-signal); outline: 2px solid var(--vk-color-signal-text); outline-offset: 1px; }
.vk-stages--daylight [data-state="failed"] .vk-stages__bar { background: var(--vk-color-text); outline: 2px solid var(--vk-color-text); outline-offset: 1px; }
/* The phone names every step, as 0.0.4 did. */
.vk-stages--daylight.vk-stages--phone .vk-stages__step { font: 400 13px / 1.2 var(--vk-font-body); }
.vk-stages--daylight.vk-stages--phone [aria-current="step"] { font-weight: 700; }
.vk-stages--daylight.vk-stages--phone [data-state="done"] .vk-stages__name::before { content: "✓ "; content: "✓ " / ""; }
/* cell (the Daylight card-states mockup .ds-track): 7px bars, 3px apart, 12px numbers, no outline. */
.vk-stages--daylight.vk-stages--cell { gap: 3px; }
.vk-stages--daylight.vk-stages--cell .vk-stages__step { gap: 4px; font-size: 12px; }
.vk-stages--daylight.vk-stages--cell .vk-stages__bar { height: 7px; outline: 0; }
.vk-stages--daylight.vk-stages--cell [aria-current="step"] { flex-grow: 2.8; }
/* page (the Daylight card page mockup .dp-track): equal columns, every step named, 10px bars on the sky. */
.vk-stages--daylight.vk-stages--page { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 6px; }
.vk-stages--daylight.vk-stages--page .vk-stages__step { color: var(--vk-color-text); opacity: 0.78; }
.vk-stages--daylight.vk-stages--page :is([data-state="done"], [aria-current="step"]) { opacity: 1; }
.vk-stages--daylight.vk-stages--page .vk-stages__name { overflow: visible; white-space: normal; overflow-wrap: anywhere; }
.vk-stages--daylight.vk-stages--page .vk-stages__bar { height: 10px; background: color-mix(in oklch, var(--vk-color-surface) 70%, transparent); }
.vk-stages--daylight.vk-stages--page [data-state="done"] .vk-stages__bar { background: var(--vk-color-success); }
.vk-stages--daylight.vk-stages--page [data-state="current"] .vk-stages__bar { background: var(--vk-color-primary); }
.vk-stages--daylight.vk-stages--page [data-state="stopped"] .vk-stages__bar { background: var(--vk-color-signal); }
.vk-stages--daylight.vk-stages--page [data-state="failed"] .vk-stages__bar { background: var(--vk-color-text); }
.vk-stages--daylight.vk-stages--page [data-state="stopped"] { color: var(--vk-color-text); }

/* Paper (the Paper card page mockup .pg-track): ruled columns under a hairline, a spaced capital number that says where the card is, over a
   Newsreader name; the current name italic and underlined (signal when stopped), a done name muted. */
.vk-stages--paper { container-type: inline-size; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: var(--vk-space-3); border-top: 1px solid var(--vk-color-line); }
/* The column padding gives way in a narrow cell, so eight columns never widen it. */
.vk-stages--paper .vk-stages__step { display: flex; flex-direction: column; gap: 4px; padding: 0 min(var(--vk-space-3), 1.2cqi); border-left: 1px solid var(--vk-color-line); color: var(--vk-color-muted); }
.vk-stages--paper .vk-stages__step:first-child { padding-left: 0; border-left: 0; }
.vk-stages--paper .vk-stages__bar { display: none; }
.vk-stages--paper .vk-stages__no { font: 600 11px / 1 var(--vk-font-body); letter-spacing: 0.12em; text-transform: uppercase; overflow-wrap: anywhere; }
.vk-stages--paper [aria-current="step"] .vk-stages__no { color: var(--vk-color-signal-text); }
.vk-stages--paper .vk-stages__name { color: var(--vk-color-text); font: 400 1.05rem / 1.25 var(--vk-font-display); overflow-wrap: anywhere; }
.vk-stages--paper [data-state="done"] .vk-stages__name { color: var(--vk-color-muted); }
.vk-stages--paper [aria-current="step"] .vk-stages__name { font-style: italic; font-weight: 600; text-decoration: underline; text-decoration-color: var(--vk-color-text); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.vk-stages--paper :is([data-state="stopped"], [data-state="failed"]) .vk-stages__name { text-decoration-color: var(--vk-color-signal); }
.vk-stages--paper.vk-stages--phone { gap: 3px; padding-top: 0; border-top: 0; }
.vk-stages--paper.vk-stages--phone .vk-stages__step { padding: 0; border-left: 0; }
.vk-stages--paper.vk-stages--phone .vk-stages__bar { display: block; height: 3px; background: var(--vk-color-line); }
.vk-stages--paper.vk-stages--phone [data-state="done"] .vk-stages__bar { background: var(--vk-color-text); }
.vk-stages--paper.vk-stages--phone [data-state="stopped"] .vk-stages__bar { height: 5px; background: var(--vk-color-signal); }
.vk-stages--paper.vk-stages--phone .vk-stages__no { display: none; }
/* The phone keeps 0.0.4's 17px names, a tick after a done one. */
.vk-stages--paper.vk-stages--phone .vk-stages__name { font-size: 17px; line-height: 1.2; max-height: none; }
.vk-stages--paper.vk-stages--phone [data-state="done"] .vk-stages__name { color: var(--vk-color-text); }
.vk-stages--paper.vk-stages--phone [data-state="done"] .vk-stages__name::after { content: " ✓"; content: " ✓" / ""; }
.vk-stages--paper.vk-stages--phone .vk-stages__step:not([aria-current]) .vk-stages__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Studio: the stage ramp at 30% up to done; the current step taller, a vermilion foot when it needs a person. */
.vk-stages--studio { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); column-gap: 10px; }
.vk-stages--studio .vk-stages__step { display: flex; flex-direction: column; gap: 6px; }
.vk-stages--studio .vk-stages__bar { height: 8px; background: var(--_band); opacity: 0.3; }
.vk-stages--studio :is([data-state="done"], [aria-current="step"]) .vk-stages__bar { opacity: 1; }
.vk-stages--studio [aria-current="step"] .vk-stages__bar { height: 14px; margin-top: -6px; }
.vk-stages--studio [data-state="stopped"] .vk-stages__bar { box-shadow: inset 0 -4px 0 var(--vk-color-signal); }
.vk-stages--studio .vk-stages__label { display: flex; align-items: baseline; gap: 6px; padding-top: 6px; border-top: 1px solid var(--vk-color-rule); color: var(--vk-color-muted); font: 500 12.5px / 1.3 var(--vk-font-body); }
.vk-stages--studio .vk-stages__no { font: 500 11.5px / 1.3 var(--vk-font-mono); }
.vk-stages--studio [aria-current="step"] .vk-stages__name { color: var(--vk-color-text); font-weight: 600; text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
.vk-stages--studio [data-state="stopped"] .vk-stages__name { color: var(--vk-color-signal-text); }

/* Studio card (the Studio card mockup .ar-track): mono numbers and names under the ramp's bars, 3px apart; the current bar taller, a
   vermilion foot when it needs a person. cell (the Studio card-states mockup) names the current step only, across two columns. */
.vk-stages--studio-card { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 3px; }
.vk-stages--studio-card .vk-stages__step { display: flex; flex-direction: column; gap: 6px; color: var(--vk-color-muted); font: 500 11.5px / 1.25 var(--vk-font-mono); }
.vk-stages--studio-card .vk-stages__bar { height: 8px; background: var(--_band); opacity: 0.3; }
.vk-stages--studio-card [data-state="done"] .vk-stages__bar { opacity: 1; }
.vk-stages--studio-card [aria-current="step"] { color: var(--vk-color-text); font-weight: 600; }
.vk-stages--studio-card [aria-current="step"] .vk-stages__bar { opacity: 1; height: 14px; margin-top: -6px; }
.vk-stages--studio-card [data-state="stopped"] { color: var(--vk-color-signal-text); }
.vk-stages--studio-card [data-state="stopped"] .vk-stages__bar { box-shadow: inset 0 -4px 0 var(--vk-color-signal); }
.vk-stages--studio-card .vk-stages__name { min-width: 0; overflow-wrap: anywhere; }
.vk-stages--studio-card.vk-stages--cell .vk-stages__step { font-size: 11px; }
.vk-stages--studio-card.vk-stages--cell [aria-current="step"] { grid-column: span 2; }
.vk-stages--studio-card.vk-stages--cell .vk-stages__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }

/* Quiet: a numbered line of words; the current one bold, a stop said out loud. */
.vk-stages--quiet { display: flex; flex-wrap: wrap; gap: 4px 16px; counter-reset: vk-stage; color: var(--vk-color-text); font: 400 17px / 1.5 var(--vk-font-body); }
.vk-stages--quiet .vk-stages__step { counter-increment: vk-stage; }
.vk-stages--quiet .vk-stages__step::before { content: counter(vk-stage) ". "; content: counter(vk-stage) ". " / ""; }
.vk-stages--quiet [aria-current="step"] { font-weight: 700; }
.vk-stages--quiet .vk-stages__said { display: inline-block; margin-left: 0.4ch; }
.vk-stages--quiet [data-state="stopped"] .vk-stages__said { color: var(--vk-color-signal-text); }
/* page (the Quiet card page mockup .qp-stages, where its .qp ol rule wins): one step a line, 6px apart, the list's own numbers in a 1.4em gutter, the page's 18px type. */
.vk-stages--quiet.vk-stages--page { box-sizing: border-box; flex-direction: column; gap: 6px; padding-left: 1.4em; list-style: decimal; font: 400 1.125rem / 1.55 var(--vk-font-body); }
.vk-stages--quiet.vk-stages--page .vk-stages__step { counter-increment: none; }
.vk-stages--quiet.vk-stages--page .vk-stages__step::before { content: none; }
/* The phone draws the card's bars alone (the Studio phone card mockup): the words stay for screen readers. */
.vk-stages--studio-card.vk-stages--phone .vk-stages__step { font-size: 0; }

/* Every form: a step name takes two lines at most and never runs into its neighbour (the 0.0.5 ruling). */
.vk-stages--daylight.vk-stages--page .vk-stages__name, .vk-stages--paper .vk-stages__name, .vk-stages--studio .vk-stages__name, .vk-stages--studio-card:not(.vk-stages--cell) .vk-stages__name { max-height: 2lh; overflow: hidden; overflow-wrap: anywhere; }
/* StateLabel (component spec §2.4/28). Only `needs` takes the signal; failed and stopped are ink with a word and a glyph. */
.vk-statelabel { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; vertical-align: middle; }
.vk-statelabel__icon { display: inline-grid; place-items: center; }

/* Daylight: a mood-filled pill. */
.vk-statelabel--daylight { padding: 4px 12px; border-radius: var(--vk-radius-pill); background: var(--vk-color-raised); color: var(--vk-face-ink); font: 700 var(--vk-text-sm) / 1.2 var(--vk-font-body); }
.vk-statelabel--daylight[data-state="working"] { background: var(--vk-mood-working); }
.vk-statelabel--daylight[data-state="thinking"] { background: var(--vk-mood-thinking); }
.vk-statelabel--daylight[data-state="needs"] { background: var(--vk-mood-needs); box-shadow: inset 0 0 0 2px var(--vk-color-signal); }
.vk-statelabel--daylight[data-state="done"] { background: var(--vk-mood-done); font-weight: 600; }
.vk-statelabel--daylight[data-state="resting"] { background: var(--vk-mood-resting); }
.vk-statelabel--daylight[data-state="blocked"] { background: var(--vk-color-bg); color: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-statelabel--daylight:is([data-state="stopped"], [data-state="failed"]) { background: var(--vk-color-surface); color: var(--vk-color-text); box-shadow: inset 0 0 0 2px var(--vk-color-text); font-weight: 600; }
.vk-statelabel--daylight:is([data-state="queued"], [data-state="off"]) { background: var(--vk-color-raised); color: var(--vk-color-muted); }
.vk-statelabel--daylight.vk-statelabel--marker { width: 9px; height: 9px; padding: 0; border-radius: 50%; box-shadow: none; }
.vk-statelabel--daylight.vk-statelabel--marker[data-state="blocked"] { box-shadow: inset 0 0 0 1px var(--vk-color-line); }
.vk-statelabel--daylight.vk-statelabel--marker[data-state="needs"] { background: var(--vk-color-signal); }
.vk-statelabel--daylight.vk-statelabel--marker[data-state="stopped"] { background: transparent; box-shadow: inset 0 0 0 2px var(--vk-color-muted); }
.vk-statelabel--daylight.vk-statelabel--marker[data-state="failed"] { background: var(--vk-color-text); }

/* Paper: an uppercase word; needs has a signal dot, stopped is italic. */
.vk-statelabel--paper { color: var(--vk-color-text); font: 600 12.5px / 1.2 var(--vk-font-body); letter-spacing: 0.08em; text-transform: uppercase; }
.vk-statelabel--paper[data-state="needs"] { color: var(--vk-color-signal-text); }
.vk-statelabel--paper[data-state="needs"]::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--vk-color-signal); }
.vk-statelabel--paper[data-state="stopped"] { font: italic 400 16px / 1.2 var(--vk-font-display); letter-spacing: 0; text-transform: none; }
.vk-statelabel--paper[data-state="done"] { color: var(--vk-color-success-text); }
.vk-statelabel--paper:is([data-state="queued"], [data-state="off"], [data-state="resting"]) { color: var(--vk-color-muted); }
.vk-statelabel--paper.vk-statelabel--marker { width: 8px; height: 8px; border-radius: 50%; background: var(--vk-color-faint); }
.vk-statelabel--paper.vk-statelabel--marker::before { content: none; }
.vk-statelabel--paper.vk-statelabel--marker[data-state="needs"] { background: var(--vk-color-signal); }
.vk-statelabel--paper.vk-statelabel--marker[data-state="done"] { background: var(--vk-color-success); }
.vk-statelabel--paper.vk-statelabel--marker:is([data-state="stopped"], [data-state="failed"]) { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vk-color-text); }

/* Studio: an 11px square on the ramp, then the word. */
.vk-statelabel--studio { gap: 7px; color: var(--vk-color-text); font: 700 13px / 1.3 var(--vk-font-body); }
.vk-statelabel__sq { flex: none; width: 11px; height: 11px; box-shadow: inset 0 0 0 1.5px var(--vk-color-muted); }
.vk-statelabel--studio[data-state="needs"] { color: var(--vk-color-signal-text); }
.vk-statelabel--studio[data-state="needs"] .vk-statelabel__sq { background: var(--vk-color-signal); box-shadow: none; }
.vk-statelabel--studio[data-state="working"] .vk-statelabel__sq { background: var(--vk-stage-6); box-shadow: none; }
.vk-statelabel--studio[data-state="thinking"] .vk-statelabel__sq { background: var(--vk-stage-4); box-shadow: none; }
.vk-statelabel--studio[data-state="done"] .vk-statelabel__sq { background: var(--vk-stage-7); box-shadow: none; }
.vk-statelabel--studio[data-state="blocked"] .vk-statelabel__sq { background: var(--vk-hatch-blocked); box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
.vk-statelabel--studio[data-state="queued"] .vk-statelabel__sq { box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
.vk-statelabel--studio[data-state="stopped"] .vk-statelabel__sq { box-shadow: inset 0 0 0 1.5px var(--vk-color-text); }
.vk-statelabel--studio[data-state="failed"] { font-weight: 800; }
/* An outlined ink square with an X: Superwitness's failed glyph. */
.vk-statelabel--studio[data-state="failed"] .vk-statelabel__sq {
  box-shadow: inset 0 0 0 1.5px var(--vk-color-text);
  background:
    linear-gradient(45deg, transparent calc(50% - 0.75px), var(--vk-color-text) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px)),
    linear-gradient(-45deg, transparent calc(50% - 0.75px), var(--vk-color-text) calc(50% - 0.75px) calc(50% + 0.75px), transparent calc(50% + 0.75px));
}

/* Quiet: the word alone, bold. */
.vk-statelabel--quiet { color: var(--vk-color-text); font-weight: 700; }
.vk-statelabel--quiet[data-state="needs"] { color: var(--vk-color-signal-text); }
/* StatusLine (component spec §2.4/5). */
.vk-statusline { display: flex; flex-wrap: wrap; align-items: center; margin: 0; color: var(--vk-color-muted); }
.vk-statusline__sep { white-space: pre; }
.vk-statusline__end { display: flex; flex-wrap: wrap; align-items: center; margin-left: auto; }
.vk-statusline__item[data-tone="needs"] { color: var(--vk-color-signal-text); font-weight: 600; }

.vk-statusline--daylight, .vk-statusline--paper, .vk-statusline--quiet { margin-top: var(--vk-space-7); padding: var(--vk-space-5) 0; border-top: 1px solid var(--vk-color-line); font: 400 var(--vk-text-sm) / 1.4 var(--vk-font-body); }
.vk-statusline--paper { border-top-color: var(--vk-color-text); }
.vk-statusline--quiet { font-size: 16px; }
.vk-statusline--studio { box-sizing: border-box; min-height: 32px; gap: 4px 20px; padding: 0 40px; border-top: 1px solid var(--vk-color-rule); font: 500 12px / 1.4 var(--vk-font-mono); }
.vk-statusline--studio .vk-statusline__end { gap: 16px; }
/* Steps: a labelled steps indicator. One DOM; each vibe draws it its own way. Done steps carry a check and "Done:" for
   screen readers, the current one aria-current="step". The number is a counter: 3 (Daylight), iii. (Paper), 03 (Studio), none (Quiet). */
.vk-steps { counter-reset: vk-step; display: flex; gap: 6px; margin: 0; padding: 6px; list-style: none; border-radius: var(--vk-radius-pill); background: var(--vk-color-surface); box-shadow: 0 var(--vk-lift) 0 var(--vk-color-ground); }
.vk-steps__step { counter-increment: vk-step; flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; border-radius: var(--vk-radius-pill); font-size: var(--vk-text-sm); font-weight: 600; color: var(--vk-color-muted); white-space: nowrap; }
.vk-steps__step[data-state="done"] { color: var(--vk-color-success-text); }
.vk-steps__step[data-state="current"] { background: var(--vk-color-primary); color: var(--vk-color-primary-fg); font-weight: 700; }
.vk-steps__band, .vk-steps__check { display: none; }
.vk-steps__lb { display: contents; }
.vk-steps__mark { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 2px currentColor; font-size: 12px; font-weight: 800; }
.vk-steps__step[data-state="done"] .vk-steps__mark { background: var(--vk-color-success-wash); box-shadow: none; }
.vk-steps__num::before { content: counter(vk-step); }
.vk-steps__of { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:where([data-vibe="paper"]) .vk-steps { flex-wrap: wrap; gap: 0; padding: 0; border-radius: 0; background: none; box-shadow: none; border-top: 1px solid var(--vk-color-line); border-bottom: 1px solid var(--vk-color-line); }
:where([data-vibe="paper"]) .vk-steps__step { flex: none; justify-content: flex-start; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 0; font-size: 15px; font-weight: 400; color: var(--vk-color-muted); }
:where([data-vibe="paper"]) .vk-steps__step:first-child { padding-left: 0; }
:where([data-vibe="paper"]) .vk-steps__step + .vk-steps__step { border-left: 1px solid var(--vk-color-line); }
:where([data-vibe="paper"]) .vk-steps__step[data-state="done"] { color: var(--vk-color-text); }
:where([data-vibe="paper"]) .vk-steps__step[data-state="current"] { background: none; color: var(--vk-color-text); font-family: var(--vk-font-display); font-style: italic; font-size: 19px; font-weight: 400; text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }
:where([data-vibe="paper"]) .vk-steps__mark { display: contents; }
:where([data-vibe="paper"]) .vk-steps__check { display: block; width: 16px; height: 16px; stroke-width: 2.2; }
:where([data-vibe="paper"]) .vk-steps__tick { display: none; }
:where([data-vibe="paper"]) .vk-steps__num { font: italic 500 17px/1 var(--vk-font-display); }
:where([data-vibe="paper"]) .vk-steps__num::before { content: counter(vk-step, lower-roman) "."; }

:where([data-vibe="studio"]) .vk-steps { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 0 6px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
:where([data-vibe="studio"]) .vk-steps__step { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 8px; min-width: 0; min-height: 0; border-radius: 0; font-size: inherit; font-weight: inherit; color: inherit; white-space: normal; }
:where([data-vibe="studio"]) .vk-steps__step[data-state] { background: none; color: inherit; }
:where([data-vibe="studio"]) .vk-steps__band { display: block; height: 8px; box-shadow: inset 0 0 0 1.5px var(--vk-color-rule); }
:where([data-vibe="studio"]) .vk-steps__step[data-state="done"] .vk-steps__band { background: var(--vk-stage-7); box-shadow: none; }
:where([data-vibe="studio"]) .vk-steps__step[data-state="current"] .vk-steps__band { background: repeating-linear-gradient(135deg, var(--vk-stage-5) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
:where([data-vibe="studio"]) .vk-steps__lb { display: flex; align-items: center; gap: 6px; font: 700 13.5px var(--vk-font-body); color: var(--vk-color-muted); }
:where([data-vibe="studio"]) .vk-steps__step[data-state="done"] .vk-steps__lb, :where([data-vibe="studio"]) .vk-steps__step[data-state="current"] .vk-steps__lb { color: var(--vk-color-text); }
:where([data-vibe="studio"]) .vk-steps__step[data-state="current"] .vk-steps__name { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 5px; }
:where([data-vibe="studio"]) .vk-steps__mark { display: contents; }
:where([data-vibe="studio"]) .vk-steps__check { display: block; flex: none; width: 14px; height: 14px; stroke-width: 2.4; }
:where([data-vibe="studio"]) .vk-steps__tick { display: none; }
:where([data-vibe="studio"]) .vk-steps__num { font: 500 11.5px var(--vk-font-mono); }
:where([data-vibe="studio"]) .vk-steps__num::before { content: counter(vk-step, decimal-leading-zero); }

:where([data-vibe="quiet"]) .vk-steps { flex-wrap: wrap; gap: 4px 22px; padding: 0; border-radius: 0; background: none; box-shadow: none; }
:where([data-vibe="quiet"]) .vk-steps__step { display: inline-flex; flex: none; justify-content: flex-start; gap: 0; min-height: 44px; border-radius: 0; font-size: inherit; font-weight: inherit; color: var(--vk-color-muted); white-space: normal; }
:where([data-vibe="quiet"]) .vk-steps__step[data-state="done"] { color: var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-steps__step[data-state="current"] { background: none; color: var(--vk-color-text); font-weight: 700; box-shadow: inset 0 -3px 0 var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-steps__lb { display: block; }
:where([data-vibe="quiet"]) .vk-steps__mark { display: inline; width: auto; height: auto; border-radius: 0; box-shadow: none; font: inherit; }
:where([data-vibe="quiet"]) .vk-steps__step[data-state="done"] .vk-steps__mark { background: none; }
:where([data-vibe="quiet"]) .vk-steps__tick::after { content: "\00a0"; }
:where([data-vibe="quiet"]) .vk-steps__num { display: none; }
:where([data-vibe="quiet"]) .vk-steps__of { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
/* Switch: a real switch (button role="switch", aria-checked) with its state written beside it in words, On or Off.
   Disabled keeps its state visible (a dashed or hatched track) and points at the reason written next to it.
   The knob slides with translate (motion tokens, scaled; still under reduced motion); Quiet's does not travel. */
.vk-switch {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer;
  font: inherit; font-weight: 700;
}
.vk-switch:disabled { cursor: not-allowed; }
.vk-switch__track { position: relative; flex: none; box-sizing: border-box; width: 56px; height: 32px; border-radius: 16px; background: var(--vk-color-line); box-shadow: inset 0 0 0 2px var(--vk-color-faint); transition: background-color var(--vk-d-fast, 160ms) var(--vk-ease-standard, ease); }
.vk-switch__knob { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--vk-color-surface); box-shadow: 0 2px 0 var(--vk-color-ground); transition: translate var(--vk-d-fast, 160ms) var(--vk-ease-enter, ease-out), background-color var(--vk-d-fast, 160ms) var(--vk-ease-standard, ease); }
.vk-switch[aria-checked="true"] .vk-switch__track { background: var(--vk-color-primary); box-shadow: none; }
.vk-switch[aria-checked="true"] .vk-switch__knob { translate: 24px 0; }
.vk-switch:disabled .vk-switch__track { opacity: .55; }
.vk-switch__state { min-width: 28px; text-align: left; }
.vk-switch__reason { color: var(--vk-color-muted); font-size: var(--vk-text-sm); }
@media (forced-colors: active) { .vk-switch__track { border: 1px solid ButtonText; } .vk-switch__knob { background: ButtonText; } }

:where([data-vibe="paper"]) .vk-switch { padding: 0 4px; color: var(--vk-color-text); font-size: 16px; font-weight: 600; }
:where([data-vibe="paper"]) .vk-switch__track { width: 52px; height: 28px; border: 1.5px solid var(--vk-color-text); border-radius: 14px; background: transparent; box-shadow: none; }
:where([data-vibe="paper"]) .vk-switch__knob { top: 3px; left: 3px; width: 19px; height: 19px; background: var(--vk-color-text); box-shadow: none; }
:where([data-vibe="paper"]) .vk-switch[aria-checked="true"] .vk-switch__track { background: var(--vk-color-text); }
:where([data-vibe="paper"]) .vk-switch[aria-checked="true"] .vk-switch__knob { translate: 24px 0; background: var(--vk-color-bg); }
:where([data-vibe="paper"]) .vk-switch__state { width: 28px; min-width: 0; }
:where([data-vibe="paper"]) .vk-switch:disabled { color: var(--vk-color-muted); }
:where([data-vibe="paper"]) .vk-switch:disabled .vk-switch__track { opacity: 1; border-style: dashed; border-color: var(--vk-color-muted); }
:where([data-vibe="paper"]) .vk-switch:disabled[aria-checked="true"] .vk-switch__track { background: var(--vk-color-muted); }

:where([data-vibe="studio"]) .vk-switch { padding: 0 2px; font: 800 14px var(--vk-font-body); }
:where([data-vibe="studio"]) .vk-switch__track { width: 48px; height: 26px; border-radius: 0; background: var(--vk-color-raised); box-shadow: inset 0 0 0 1.5px var(--vk-color-rule); }
:where([data-vibe="studio"]) .vk-switch__knob { top: 4px; left: 4px; width: 18px; height: 18px; border-radius: 0; background: var(--vk-color-muted); box-shadow: none; }
:where([data-vibe="studio"]) .vk-switch[aria-checked="true"] .vk-switch__track { background: var(--vk-stage-7); box-shadow: none; }
:where([data-vibe="studio"]) .vk-switch[aria-checked="true"] .vk-switch__knob { translate: 22px 0; background: var(--vk-color-bg); }
:where([data-vibe="studio"]) .vk-switch__state { min-width: 26px; }
:where([data-vibe="studio"]) .vk-switch:disabled .vk-switch__track { opacity: 1; background: repeating-linear-gradient(135deg, var(--vk-color-line) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px var(--vk-color-muted); }
:where([data-vibe="studio"]) .vk-switch:disabled[aria-checked="true"] .vk-switch__track { background: repeating-linear-gradient(135deg, var(--vk-stage-5) 0 1.5px, transparent 1.5px 4px); box-shadow: inset 0 0 0 1.5px var(--vk-stage-5); }
:where([data-vibe="studio"]) .vk-switch:disabled[aria-checked="true"] .vk-switch__knob { background: var(--vk-stage-7); }

:where([data-vibe="quiet"]) .vk-switch { gap: 10px; color: var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-switch__track { width: 52px; height: 30px; border: 2px solid var(--vk-color-text); border-radius: 15px; background: var(--vk-color-surface); box-shadow: none; }
:where([data-vibe="quiet"]) .vk-switch__knob { top: 3px; left: 3px; width: 20px; height: 20px; background: var(--vk-color-text); box-shadow: none; transition: none; }
:where([data-vibe="quiet"]) .vk-switch[aria-checked="true"] .vk-switch__track { background: var(--vk-color-text); }
:where([data-vibe="quiet"]) .vk-switch[aria-checked="true"] .vk-switch__knob { translate: 22px 0; background: var(--vk-color-bg); }
:where([data-vibe="quiet"]) .vk-switch__state { min-width: 2.2em; }
:where([data-vibe="quiet"]) .vk-switch:disabled { color: var(--vk-color-muted); }
:where([data-vibe="quiet"]) .vk-switch:disabled .vk-switch__track { opacity: 1; border-style: dashed; border-color: var(--vk-color-muted); }
:where([data-vibe="quiet"]) .vk-switch:disabled[aria-checked="true"] .vk-switch__track { background: var(--vk-color-muted); }
:where([data-vibe="quiet"]) .vk-switch__reason { font-size: inherit; }
/* Tabs (component spec §2.4/10). One selected state for both modes: aria-current (links) or aria-selected (panels). */
.vk-tabs__item { position: relative; display: inline-flex; align-items: center; gap: 7px; min-height: var(--vk-target-min); border: 0; background: transparent; color: var(--vk-color-text); font: inherit; text-decoration: none; cursor: pointer; }
.vk-tabs__item:disabled { opacity: 0.5; cursor: not-allowed; }

/* Daylight: pills on a translucent track; the selected pill is the accent wash and ring. */
.vk-tabs--daylight { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: var(--vk-radius-pill); background: var(--vk-sky-glass); }
.vk-tabs--daylight .vk-tabs__item { padding: 0 16px; border-radius: var(--vk-radius-pill); font: 600 15px / 1 var(--vk-font-body); }
.vk-tabs--daylight .vk-tabs__item:hover { background: var(--vk-color-surface); }
.vk-tabs--daylight .vk-tabs__item:is([aria-current="page"], [aria-selected="true"]) { background: var(--vk-color-accent-wash); color: var(--vk-color-accent-text); box-shadow: inset 0 0 0 2px var(--vk-color-accent); }
.vk-tabs--daylight .vk-tabs__item:is([aria-current="page"], [aria-selected="true"]):focus-visible { box-shadow: var(--vk-focus), inset 0 0 0 2px var(--vk-color-accent); }
.vk-tabs--daylight .vk-tabs__count { font: 500 12px / 1 var(--vk-font-mono); color: var(--vk-color-muted); }

/* Paper: small capitals on a rule; the selected tab is ink, a 2px ink edge under it (the Paper shell mockup .mh-tab). */
.vk-tabs--paper { display: flex; flex-wrap: wrap; gap: 24px; border-bottom: 1px solid var(--vk-color-line); }
.vk-tabs--paper .vk-tabs__item { box-sizing: border-box; padding: 0 2px 2px; color: var(--vk-color-muted); font: 600 17px / 1.45 var(--vk-font-body); font-variant-caps: all-small-caps; letter-spacing: 0.09em; }
.vk-tabs--paper .vk-tabs__item:hover { color: var(--vk-color-text); }
.vk-tabs--paper .vk-tabs__item:is([aria-current="page"], [aria-selected="true"]) { color: var(--vk-color-text); box-shadow: inset 0 -2px 0 var(--vk-color-text); }
.vk-tabs--paper .vk-tabs__count { font: italic 400 15px / 1 var(--vk-font-display); font-variant-caps: normal; letter-spacing: 0; }

/* Studio: bold words on a rule; the selected tab has a 3px ink bar (the Studio shell mockup .ar-tab). */
.vk-tabs--studio { display: flex; flex-wrap: wrap; gap: 0 24px; border-bottom: 1px solid var(--vk-color-line); }
.vk-tabs--studio .vk-tabs__item { gap: 6px; min-height: 48px; padding: 0; color: var(--vk-color-muted); font: 700 14px / normal var(--vk-font-body); white-space: nowrap; }
.vk-tabs--studio .vk-tabs__item:hover { color: var(--vk-color-text); }
.vk-tabs--studio .vk-tabs__item:is([aria-current="page"], [aria-selected="true"]) { color: var(--vk-color-text); }
.vk-tabs--studio .vk-tabs__item:is([aria-current="page"], [aria-selected="true"])::before { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--vk-color-text); }
.vk-tabs--studio .vk-tabs__count { font: 500 12px / normal var(--vk-font-mono); }

/* Quiet: "View:", then underlined words in ink, dot-separated; the selected one is bold and not underlined (the Quiet shell mockup .qn-view). */
.vk-tabs__label { color: var(--vk-color-text); }
.vk-tabs--quiet { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--vk-space-2); }
.vk-tabs--quiet .vk-tabs__item { padding: 0; color: var(--vk-color-text); font: 400 17px / 1.4 var(--vk-font-body); text-decoration: underline; text-underline-offset: 4px; }
/* The dot sits outside the link (absolutely placed, so the link's underline and gap never reach it), 8px either side. */
.vk-tabs--quiet .vk-tabs__item + .vk-tabs__item { margin-left: calc(0.24em + var(--vk-space-2)); }
.vk-tabs--quiet .vk-tabs__item + .vk-tabs__item::before { content: "·" / ""; position: absolute; right: calc(100% + var(--vk-space-2)); color: var(--vk-color-muted); }
.vk-tabs--quiet .vk-tabs__item:hover { text-decoration-thickness: 2px; }
.vk-tabs--quiet .vk-tabs__item:is([aria-current="page"], [aria-selected="true"]) { font-weight: 700; text-decoration: none; }

.vk-tabs__panel { padding-top: var(--vk-space-4); }
.vk-tabs__end { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.vk-tabs__list { display: contents; }
/* Toast (component spec §2.4/35). bad is ink in every vibe; the signal never appears on a toast. */
.vk-toast {
  --_spin: var(--vk-color-primary-fg);
  display: inline-flex;
  align-items: center;
  gap: var(--vk-space-3);
  max-width: 100%;
  min-height: var(--vk-target-min);
  padding: 0 var(--vk-space-5);
  font: 600 var(--vk-text-sm) / 1.2 var(--vk-font-body);
}
.vk-toast__text { display: flex; flex-direction: column; min-width: 0; }
.vk-toast__message, .vk-toast__detail { overflow-wrap: anywhere; }
.vk-toast__detail { font-size: 13px; font-weight: 400; line-height: 1.3; color: color-mix(in oklch, currentColor 85%, transparent); }
.vk-toast__icon { flex: none; display: inline-grid; place-items: center; }
.vk-toast__busy { font-weight: 700; }
.vk-toast__action { flex-shrink: 0; min-height: var(--vk-target-min); padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; cursor: pointer; }
/* On the toast the outline takes the toast's text colour, which reads on the toast in every look. */
.vk-toast__action:focus-visible { outline-color: currentColor; box-shadow: var(--vk-focus); }
.vk-toast__spinner { flex: none; box-sizing: border-box; width: 16px; height: 16px; border-radius: 50%; border: 2px solid color-mix(in oklch, var(--_spin) 35%, transparent); border-top-color: var(--_spin); animation: vk-toast-spin 900ms linear infinite; }
@keyframes vk-toast-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vk-toast__spinner { animation: none; } }
[data-motion="reduce"] .vk-toast__spinner { animation: none; }

.vk-toast--daylight { border-radius: var(--vk-radius-pill); background: var(--vk-color-primary); color: var(--vk-color-primary-fg); }
.vk-toast--daylight[data-tone="bad"] { background: var(--vk-color-surface); color: var(--vk-color-text); box-shadow: inset 0 0 0 2px var(--vk-color-text); }

.vk-toast--paper { --_spin: var(--vk-color-text); border-radius: var(--vk-radius-sm); background: var(--vk-color-surface); color: var(--vk-color-text); box-shadow: inset 0 0 0 1px var(--vk-color-text), var(--vk-shadow-pop); }
.vk-toast--paper[data-tone="bad"] { box-shadow: inset 0 0 0 2px var(--vk-color-text), var(--vk-shadow-pop); }

.vk-toast--studio { --_spin: var(--vk-color-text); gap: 14px; min-height: 0; padding: 4px 0 4px 14px; border-left: 4px solid var(--vk-color-text); background: var(--vk-color-bg); color: var(--vk-color-text); font: 400 17px / 1.4 var(--vk-font-serif); }
.vk-toast--studio .vk-toast__action { font: 700 14px / 1 var(--vk-font-body); text-decoration-thickness: 1.5px; }
.vk-toast--studio[data-tone="bad"] { padding-right: 14px; box-shadow: inset 0 0 0 2px var(--vk-color-text); }

.vk-toast--quiet { padding: 0 var(--vk-space-4); border: 2px solid var(--vk-color-text); border-radius: var(--vk-radius-sm); background: var(--vk-color-bg); color: var(--vk-color-text); font: 400 17px / 1.4 var(--vk-font-body); }
.vk-toast--quiet[data-tone="bad"] { box-shadow: inset 0 0 0 2px var(--vk-color-text); }

.vk-toaster { position: fixed; inset: auto 0 var(--vk-space-5) 0; z-index: calc(50 + 2 * var(--vk-layer-top, 0)); display: flex; flex-direction: column; align-items: center; padding: 0 var(--vk-space-4); max-width: 100%; box-sizing: border-box; pointer-events: none; }
/* Real boxes, not display: contents, so the live-region roles survive in older Safari. Empty ones take no space. */
.vk-toaster__polite, .vk-toaster__assertive { display: flex; flex-direction: column; align-items: center; gap: var(--vk-space-2); max-width: 100%; }
.vk-toaster__polite:not(:empty) + .vk-toaster__assertive:not(:empty) { margin-top: var(--vk-space-2); }
.vk-toaster .vk-toast { pointer-events: auto; }

@media (forced-colors: active) {
  .vk-toast { border: 1px solid CanvasText; }
}
/* Wordmark: the Super Jackfruit Labs bulb and words, linking home. One DOM; each vibe shows its own bulb and type.
   The bulb's colours are tokens, so a product or a nested look can recolour it without touching the SVG. */
.vk-wordmark {
  --vk-wordmark-body: var(--vk-sky-noon-sun); --vk-wordmark-ink: var(--vk-face-ink); --vk-wordmark-leaf: var(--vk-mood-done); --vk-wordmark-seed: var(--vk-color-bg);
  position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none;
  color: var(--vk-sky-text, var(--vk-color-text)); font: 700 1.125rem/1 var(--vk-font-display); letter-spacing: -.01em;
}
.vk-wordmark__bulb { flex: none; display: none; }
.vk-wordmark__words { white-space: nowrap; }
.vk-wordmark__bulb--daylight { display: block; }
.vk-wordmark__bulb--daylight .vk-wordmark__body { fill: var(--vk-wordmark-body); stroke: var(--vk-wordmark-ink); stroke-width: 1.4; }
.vk-wordmark__bulb--daylight .vk-wordmark__seg { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 1.2; stroke-linecap: round; }
.vk-wordmark__bulb--daylight .vk-wordmark__leaf { fill: var(--vk-wordmark-leaf); stroke: var(--vk-wordmark-ink); stroke-width: 1.2; }
.vk-wordmark__bulb--paper .vk-wordmark__stem { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 1.4; stroke-linecap: round; }
.vk-wordmark__bulb--paper .vk-wordmark__body { fill: var(--vk-wordmark-body); stroke: var(--vk-wordmark-ink); stroke-width: 1.3; }
.vk-wordmark__bulb--paper .vk-wordmark__seg { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 1.1; stroke-linecap: round; }
.vk-wordmark__bulb--studio .vk-wordmark__body { fill: var(--vk-wordmark-body); }
.vk-wordmark__bulb--studio .vk-wordmark__stem { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 1.6; stroke-linecap: round; }
.vk-wordmark__bulb--studio .vk-wordmark__seeds { fill: var(--vk-wordmark-seed); }
.vk-wordmark__bulb--quiet .vk-wordmark__body { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 2; }
.vk-wordmark__bulb--quiet .vk-wordmark__seg { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 1.6; stroke-linecap: round; }
.vk-wordmark__bulb--quiet .vk-wordmark__stem { fill: none; stroke: var(--vk-wordmark-ink); stroke-width: 2; }

:where([data-vibe="paper"]) .vk-wordmark {
  --vk-wordmark-body: var(--vk-mood-done); --vk-wordmark-ink: var(--vk-color-text);
  gap: 10px; min-height: 48px; color: inherit; font-family: var(--vk-font-display); font-variant-caps: all-small-caps; font-size: 24px; font-weight: 600; letter-spacing: .06em; line-height: 1;
}
:where([data-vibe="paper"]) .vk-wordmark--sm { gap: 8px; min-height: 44px; font-size: 20px; }
:where([data-vibe="studio"]) .vk-wordmark {
  --vk-wordmark-body: var(--vk-stage-5); --vk-wordmark-ink: var(--vk-color-text); --vk-wordmark-seed: var(--vk-color-bg);
  color: inherit; font: 800 17px/1 var(--vk-font-body); font-stretch: 85%; letter-spacing: -.01em; white-space: nowrap;
}
:where([data-vibe="studio"]) .vk-wordmark--sm { gap: 8px; font-size: 15px; }
:where([data-vibe="quiet"]) .vk-wordmark { --vk-wordmark-ink: var(--vk-color-text); color: var(--vk-color-text); font: inherit; font-weight: 700; letter-spacing: normal; }
:where([data-vibe="paper"]) .vk-wordmark__bulb--daylight, :where([data-vibe="studio"]) .vk-wordmark__bulb--daylight, :where([data-vibe="quiet"]) .vk-wordmark__bulb--daylight { display: none; }
:where([data-vibe="paper"]) .vk-wordmark__bulb--paper, :where([data-vibe="studio"]) .vk-wordmark__bulb--studio, :where([data-vibe="quiet"]) .vk-wordmark__bulb--quiet { display: block; }
:where([data-vibe="quiet"]) .vk-wordmark__bulb--quiet { height: 22px; width: auto; }
}
@layer vk.components {
/* Vibekit motion: tokens, keyframes and utility classes (docs/motion.md).
   Rules: animate transform (via translate/scale), opacity and clip-path only; every animation fills `backwards`, so the resting state
   is the element's own style and a screenshot with animations disabled is pixel-identical to one without this file.
   Reduced motion (prefers-reduced-motion or [data-motion="reduce"]) sets --vk-motion-scale to 0, and base.css's !important block stops
   every animation and transition as the backstop. */

/* ---- Tokens. Daylight is the default; each vibe overrides. --vk-motion-scale is the kill switch and speed multiplier. ---- */
:root {
  --vk-motion-scale: 1;
  --vk-dur-instant: 80ms; --vk-dur-fast: 160ms; --vk-dur-base: 280ms; --vk-dur-slow: 420ms; --vk-dur-count: 700ms;
  --vk-ease-standard: cubic-bezier(0.2, 0, 0, 1); --vk-ease-enter: cubic-bezier(0.3, 1.4, 0.5, 1); --vk-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --vk-dist-sm: 4px; --vk-dist-md: 12px; --vk-dist-lg: 100%;
  --vk-enter-scale: 0.94; --vk-press-scale: 0.96; --vk-stagger: 40ms;
}
[data-vibe="daylight"] {
  --vk-dur-instant: 80ms; --vk-dur-fast: 160ms; --vk-dur-base: 280ms; --vk-dur-slow: 420ms; --vk-dur-count: 700ms;
  --vk-ease-standard: cubic-bezier(0.2, 0, 0, 1); --vk-ease-enter: cubic-bezier(0.3, 1.4, 0.5, 1); --vk-ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --vk-dist-sm: 4px; --vk-dist-md: 12px; --vk-dist-lg: 100%;
  --vk-enter-scale: 0.94; --vk-press-scale: 0.96; --vk-stagger: 40ms;
}
[data-vibe="paper"] {
  --vk-dur-instant: 80ms; --vk-dur-fast: 200ms; --vk-dur-base: 380ms; --vk-dur-slow: 560ms; --vk-dur-count: 0ms;
  --vk-ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --vk-ease-enter: cubic-bezier(0.25, 0.1, 0.25, 1); --vk-ease-exit: cubic-bezier(0.4, 0, 0.6, 1);
  --vk-dist-sm: 2px; --vk-dist-md: 6px; --vk-dist-lg: 100%;
  --vk-enter-scale: 1; --vk-press-scale: 1; --vk-stagger: 60ms;
}
[data-vibe="studio"] {
  --vk-dur-instant: 80ms; --vk-dur-fast: 120ms; --vk-dur-base: 200ms; --vk-dur-slow: 300ms; --vk-dur-count: 900ms;
  --vk-ease-standard: cubic-bezier(0.2, 0, 0, 1); --vk-ease-enter: cubic-bezier(0.16, 1, 0.3, 1); --vk-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --vk-dist-sm: 0px; --vk-dist-md: 8px; --vk-dist-lg: 100%;
  --vk-enter-scale: 1; --vk-press-scale: 0.98; --vk-stagger: 25ms;
}
/* Quiet: a ~100ms opacity fade and nothing else. */
[data-vibe="quiet"] {
  --vk-dur-instant: 0ms; --vk-dur-fast: 100ms; --vk-dur-base: 100ms; --vk-dur-slow: 100ms; --vk-dur-count: 0ms;
  --vk-ease-standard: linear; --vk-ease-enter: linear; --vk-ease-exit: linear;
  --vk-dist-sm: 0px; --vk-dist-md: 0px; --vk-dist-lg: 0px;
  --vk-enter-scale: 1; --vk-press-scale: 1; --vk-stagger: 0ms;
}
/* Scaled durations: what consumers use. Declared on every vibe root so a nested vibe recomputes them. */
:root, [data-vibe] {
  --vk-d-instant: calc(var(--vk-dur-instant) * var(--vk-motion-scale));
  --vk-d-fast: calc(var(--vk-dur-fast) * var(--vk-motion-scale));
  --vk-d-base: calc(var(--vk-dur-base) * var(--vk-motion-scale));
  --vk-d-slow: calc(var(--vk-dur-slow) * var(--vk-motion-scale));
  --vk-d-count: calc(var(--vk-dur-count) * var(--vk-motion-scale));
  --vk-d-stagger: calc(var(--vk-stagger) * var(--vk-motion-scale));
}
@media (prefers-reduced-motion: reduce) {
  :root, [data-vibe] { --vk-motion-scale: 0; }
}
[data-motion="reduce"], [data-motion="reduce"] [data-vibe] { --vk-motion-scale: 0; }

/* ---- Keyframes (individual translate/scale compose with a component's own transform). ---- */
@keyframes vk-motion-in { from { opacity: 0; translate: 0 var(--vk-dist-md); scale: var(--vk-enter-scale); } }
@keyframes vk-motion-out { to { opacity: 0; translate: 0 calc(var(--vk-dist-sm) * -1); scale: var(--vk-enter-scale); } }
@keyframes vk-motion-fade-in { from { opacity: 0; } }
@keyframes vk-motion-fade-out { to { opacity: 0; } }
@keyframes vk-motion-pop-in { from { opacity: 0; translate: 0 calc(var(--vk-dist-sm) * -1); scale: var(--vk-enter-scale); } }
@keyframes vk-motion-drawer-in { from { opacity: 0; translate: var(--vk-dist-lg) 0; } }
@keyframes vk-motion-drawer-out { to { opacity: 0; translate: var(--vk-dist-lg) 0; } }
@keyframes vk-motion-sheet-in { from { opacity: 0; translate: 0 var(--vk-dist-lg); } }
@keyframes vk-motion-sheet-out { to { opacity: 0; translate: 0 var(--vk-dist-lg); } }
@keyframes vk-motion-rise-in { from { opacity: 0; translate: 0 var(--vk-dist-md); } }
@keyframes vk-motion-ink { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes vk-motion-shimmer { from { translate: -100% 0; } to { translate: 100% 0; } }
@keyframes vk-motion-breathe { from { opacity: 0.5; } to { opacity: 1; } }
@keyframes vk-motion-flash { from { background-color: var(--vk-color-signal-wash); } }
@keyframes vk-motion-flash-bar { from { box-shadow: inset 3px 0 0 var(--vk-color-signal); } to { box-shadow: inset 3px 0 0 transparent; } }
@keyframes vk-motion-bump { 50% { scale: 1.25; } }
@keyframes vk-motion-fadebump { from { opacity: 0.3; } }
@keyframes vk-motion-indet { from { translate: -100% 0; } to { translate: 250% 0; } }
@keyframes vk-motion-slide-from { from { translate: var(--_from-x, 0) 0; scale: var(--_from-w, 1) 1; } }

/* ---- Utilities ---- */
/* Enter, staggered by --i (capped at 6 by the caller). */
.vk-enter { animation: vk-motion-in var(--vk-d-base) var(--vk-ease-enter) backwards; animation-delay: calc(min(var(--i, 0), 6) * var(--vk-d-stagger)); }
:where([data-vibe="paper"]) .vk-enter.vk-ink { animation-name: vk-motion-ink; }
.vk-exit { animation: vk-motion-out var(--vk-d-fast) var(--vk-ease-exit) forwards; pointer-events: none; }
:where([data-vibe="quiet"]) .vk-enter { animation-name: vk-motion-fade-in; }
:where([data-vibe="quiet"]) .vk-exit { animation-name: vk-motion-fade-out; }

/* Skeleton: shimmer (Daylight, Studio), breathe (Paper), still (Quiet). Pair with aria-busy on the region. */
.vk-skeleton { position: relative; overflow: hidden; display: block; height: 12px; margin: 8px 0; border-radius: var(--vk-radius-sm); background: var(--vk-color-line); }
.vk-skeleton::after { content: ""; position: absolute; inset: 0; translate: -100% 0; background: linear-gradient(90deg, transparent, color-mix(in oklch, var(--vk-color-surface) 70%, transparent), transparent); animation: vk-motion-shimmer calc(1400ms * var(--vk-motion-scale)) linear infinite; }
:where([data-vibe="paper"], [data-vibe="quiet"]) .vk-skeleton::after { display: none; }
:where([data-vibe="paper"]) .vk-skeleton { animation: vk-motion-breathe calc(1600ms * var(--vk-motion-scale)) ease-in-out infinite alternate; }

/* Press: scale on :active (Daylight, Studio; Paper and Quiet press-scale is 1). */
.vk-press { transition: scale var(--vk-d-instant) var(--vk-ease-standard); }
.vk-press:active { scale: var(--vk-press-scale); }

/* Live update: a wash (Studio: an edge bar), once. Restart by re-adding the class (flash() helper). Never the only signal. */
.vk-flash { animation: vk-motion-flash calc(1200ms * var(--vk-motion-scale)) var(--vk-ease-standard) backwards; }
:where([data-vibe="studio"]) .vk-flash { animation-name: vk-motion-flash-bar; }
.vk-bump { animation: vk-motion-bump var(--vk-d-base) var(--vk-ease-enter); }
:where([data-vibe="paper"], [data-vibe="studio"], [data-vibe="quiet"]) .vk-bump { animation-name: vk-motion-fadebump; }

/* Tab / segmented indicator, positioned by the indicator() action. */
.vk-indicator { position: absolute; left: 0; transform-origin: left; transition: translate var(--vk-d-base) var(--vk-ease-enter), width var(--vk-d-base) var(--vk-ease-enter); }

/* Progress: scaleX, never width. Set --p from 0 to 1. */
.vk-bar { overflow: hidden; height: 8px; border-radius: var(--vk-radius-pill); background: var(--vk-color-line); }
.vk-bar > i { display: block; height: 100%; background: var(--vk-color-signal); transform-origin: left; scale: var(--p, 0) 1; transition: scale var(--vk-d-slow) var(--vk-ease-standard); }
.vk-bar--indeterminate > i { width: 40%; scale: 1; animation: vk-motion-indet calc(1200ms * var(--vk-motion-scale)) var(--vk-ease-standard) infinite; }

/* Expand / collapse: grid rows 0fr to 1fr. Not inside sticky regions (fade there instead). */
.vk-reveal { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--vk-d-base) var(--vk-ease-standard); }
.vk-reveal > * { overflow: hidden; min-height: 0; }
.vk-reveal[data-open="true"] { grid-template-rows: 1fr; }
.vk-chevron { display: inline-block; transition: rotate var(--vk-d-fast) var(--vk-ease-enter); }
[aria-expanded="true"] > .vk-chevron { rotate: 90deg; }

/* Drag lift. */
.vk-lifted { position: relative; z-index: 2; box-shadow: 0 8px 20px rgb(0 0 0 / 0.18); }

/* Number fade swap (Paper, Quiet), set by countUp(). */
.vk-number-swap { animation: vk-motion-fadebump var(--vk-d-base) var(--vk-ease-standard); }

/* ---- Components animate by default. bits-ui waits for these exits (getAnimations) before unmounting. ---- */
.vk-scrim[data-state="open"] { animation: vk-motion-fade-in var(--vk-d-base) var(--vk-ease-standard) backwards; }
.vk-scrim[data-state="closed"] { animation: vk-motion-fade-out var(--vk-d-fast) var(--vk-ease-exit) forwards; }
.vk-dialog[data-state="open"], .vk-drawer--paper[data-state="open"] { animation: vk-motion-in var(--vk-d-base) var(--vk-ease-enter) backwards; }
.vk-drawer[data-state="open"]:not(.vk-drawer--paper) { animation: vk-motion-drawer-in var(--vk-d-slow) var(--vk-ease-standard) backwards; }
.vk-sheet[data-state="open"] { animation: vk-motion-sheet-in var(--vk-d-slow) var(--vk-ease-standard) backwards; }
.vk-dialog[data-state="closed"], .vk-drawer--paper[data-state="closed"] { animation: vk-motion-out var(--vk-d-fast) var(--vk-ease-exit) forwards; }
.vk-drawer[data-state="closed"]:not(.vk-drawer--paper) { animation: vk-motion-drawer-out var(--vk-d-fast) var(--vk-ease-exit) forwards; }
.vk-sheet[data-state="closed"] { animation: vk-motion-sheet-out var(--vk-d-fast) var(--vk-ease-exit) forwards; }
.vk-menu[data-state="open"]:not(.vk-menu--inline) { transform-origin: var(--bits-dropdown-menu-content-transform-origin, top left); animation: vk-motion-pop-in var(--vk-d-fast) var(--vk-ease-enter) backwards; }
.vk-menu[data-state="closed"]:not(.vk-menu--inline) { animation: vk-motion-fade-out var(--vk-d-fast) var(--vk-ease-exit) forwards; }
.vk-toaster .vk-toast { animation: vk-motion-rise-in var(--vk-d-base) var(--vk-ease-enter) backwards; }
:where([data-vibe="quiet"]) :is(.vk-dialog, .vk-drawer, .vk-sheet, .vk-menu, .vk-toaster .vk-toast)[data-state] { animation-name: vk-motion-fade-in; }
:where([data-vibe="quiet"]) :is(.vk-dialog, .vk-drawer, .vk-sheet, .vk-menu)[data-state="closed"] { animation-name: vk-motion-fade-out; }

/* Button press and tabs: transitions only (no resting change). */
.vk-button { transition: transform var(--vk-d-fast) var(--vk-motion-easing), box-shadow var(--vk-d-fast) var(--vk-motion-easing), scale var(--vk-d-instant) var(--vk-ease-standard); }
:where([data-vibe="daylight"], [data-vibe="studio"]) .vk-button:not(.vk-button--text):active { scale: var(--vk-press-scale); }
.vk-tabs__item { transition: background-color var(--vk-d-fast) var(--vk-ease-standard), color var(--vk-d-fast) var(--vk-ease-standard), box-shadow var(--vk-d-fast) var(--vk-ease-standard); }
/* Studio's bar slides in from the previous tab: tabs.svelte sets --_from-x / --_from-w on the newly selected tab. */
.vk-tabs--studio .vk-tabs__item[data-vk-slide]::before { transform-origin: left; animation: vk-motion-slide-from var(--vk-d-base) var(--vk-ease-enter) backwards; }

/* ======== 0.0.12: the gaps (docs/motion.md, "Is this all the motion the UI needs?") ======== */
/* Every rule below: resting style unchanged (backwards fill, or the animated layer is invisible at rest), reduced motion = none
   (base.css backstop; scroll-driven and view transitions stopped explicitly below), Quiet = fades only. */

@keyframes vk-motion-reveal { from { opacity: 0; translate: 0 calc(var(--vk-dist-sm) * -1); } }
@keyframes vk-motion-busy { 0% { opacity: 0; translate: -100% 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; translate: 100% 0; } }
@keyframes vk-motion-pulse { from { outline-offset: 0; outline-color: color-mix(in oklch, var(--_pulse, var(--vk-color-success)) 60%, transparent); } to { outline-offset: 6px; outline-color: transparent; } }
@keyframes vk-motion-attention { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--vk-color-signal) 35%, transparent); } }
@keyframes vk-motion-attention-fade { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes vk-motion-reject { 20% { translate: calc(var(--vk-dist-sm) * -1) 0; } 50% { translate: var(--vk-dist-sm) 0; } 80% { translate: calc(var(--vk-dist-sm) * -0.5) 0; } }
@keyframes vk-motion-reject-wash { from { background-color: var(--vk-color-signal-wash); } }
@keyframes vk-motion-focus { from { outline-offset: 5px; outline-color: transparent; } }
@keyframes vk-motion-collapse { to { translate: 0 var(--vk-collapse-shift, -12px); opacity: var(--vk-collapse-opacity, 0); } }
@keyframes vk-motion-page-out { to { opacity: 0; translate: calc(var(--vk-dist-md) * -1) 0; } }
@keyframes vk-motion-page-in { from { opacity: 0; translate: var(--vk-dist-md) 0; } }

/* Busy button: a sweep along the bottom edge, invisible at rest; the label swap cross-fades. The button never changes size. */
.vk-button[aria-busy="true"] { position: relative; overflow: hidden; }
.vk-button[aria-busy="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: currentColor; opacity: 0; pointer-events: none; animation: vk-motion-busy calc(1200ms * var(--vk-motion-scale)) var(--vk-ease-standard) infinite; }
:where([data-vibe="quiet"]) .vk-button[aria-busy="true"]::after { display: none; }
.vk-button__text[data-shown="true"] { animation: vk-motion-fade-in var(--vk-d-fast) var(--vk-ease-standard) backwards; }

/* Popovers, selects, comboboxes (any bits-ui Content with data-state): add .vk-pop. Tooltips: .vk-tip (delay is the trigger's). */
.vk-pop[data-state="open"] { transform-origin: var(--bits-popover-content-transform-origin, var(--bits-select-content-transform-origin, var(--bits-combobox-content-transform-origin, top left))); animation: vk-motion-pop-in var(--vk-d-fast) var(--vk-ease-enter) backwards; }
.vk-pop[data-state="closed"] { animation: vk-motion-fade-out var(--vk-d-fast) var(--vk-ease-exit) forwards; }
.vk-tip:is([data-state="delayed-open"], [data-state="instant-open"], [data-state="open"]) { animation: vk-motion-fade-in var(--vk-d-fast) var(--vk-ease-standard) backwards; }
.vk-tip[data-state="closed"] { animation: vk-motion-fade-out var(--vk-d-instant) linear forwards; }
:where([data-vibe="quiet"]) .vk-pop[data-state="open"] { animation-name: vk-motion-fade-in; }

/* Field: the error message reveals; the border and ring change colour over a fast transition. No shake. */
.vk-field__error { animation: vk-motion-reveal var(--vk-d-base) var(--vk-ease-standard) backwards; }
:where([data-vibe="quiet"]) .vk-field__error { animation-name: vk-motion-fade-in; }
.vk-field__input { transition: border-color var(--vk-d-fast) var(--vk-ease-standard), box-shadow var(--vk-d-fast) var(--vk-ease-standard); }

/* Focus ring: settles in from a wider offset, over the instant duration (Quiet: 0). The ring itself is the same. */
:where(a, button, input, select, textarea, summary, [tabindex]):where(:focus-visible) { animation: vk-motion-focus var(--vk-d-instant) var(--vk-ease-standard) backwards; }

/* Copy confirmation: the button's "Copied" state fades in (CopyId sets data-copied). */
.vk-copyid[data-copied="true"] .vk-copyid__button { animation: vk-motion-fadebump var(--vk-d-base) var(--vk-ease-standard); }

/* Live: a ring leaves the dot every 2s while live (Daylight, Studio); Paper breathes; Quiet stays still. Invisible at rest. */
.vk-live--live .vk-live__dot { outline: 2px solid transparent; animation: vk-motion-pulse calc(2000ms * var(--vk-motion-scale)) var(--vk-ease-exit) infinite; --_pulse: var(--vk-color-success); }
:where([data-vibe="paper"]) .vk-live--live .vk-live__dot { animation-name: vk-motion-breathe; animation-direction: alternate; animation-timing-function: ease-in-out; }
:where([data-vibe="quiet"]) .vk-live--live .vk-live__dot { animation: none; }

/* Needs you: a gentle pulse, 3 times (about 5s), then still. Never the only signal: pair with the count and words. */
.vk-attention { animation: vk-motion-attention calc(1800ms * var(--vk-motion-scale)) ease-in-out 3 backwards; }
:where([data-vibe="paper"], [data-vibe="quiet"]) .vk-attention { animation-name: vk-motion-attention-fade; }
:where([data-vibe="quiet"]) .vk-attention { animation-iteration-count: 1; animation-duration: var(--vk-d-base); }

/* Optimistic rollback: the item nudges back (Daylight, Studio) or washes (Paper, Quiet). Set by optimistic(). */
.vk-reject { animation: vk-motion-reject var(--vk-d-slow) var(--vk-ease-standard), vk-motion-reject-wash calc(1200ms * var(--vk-motion-scale)) var(--vk-ease-standard) backwards; }
:where([data-vibe="paper"], [data-vibe="quiet"]) .vk-reject { animation: vk-motion-reject-wash calc(1200ms * var(--vk-motion-scale)) var(--vk-ease-standard) backwards; }

/* Drag and drop (sortable action): the placeholder ghost, the floating lifted copy, the drop target. */
.vk-ghost { opacity: 0.4; outline: 2px dashed var(--vk-color-line); outline-offset: -2px; }
.vk-drag-float { position: fixed; z-index: 100; margin: 0; pointer-events: none; box-shadow: 0 12px 28px rgb(0 0 0 / 0.22); scale: 1.02; transition: scale var(--vk-d-fast) var(--vk-ease-enter); }
:where([data-vibe="paper"], [data-vibe="quiet"]) .vk-drag-float { scale: 1; }
.vk-drop-target { transition: background-color var(--vk-d-fast) var(--vk-ease-standard), outline-color var(--vk-d-fast) var(--vk-ease-standard); outline: 2px dashed transparent; outline-offset: -2px; }
.vk-drop-target[data-over="true"] { background-color: var(--vk-color-accent-wash); outline-color: var(--vk-color-accent); }

/* Lane collapse: columns 0fr to 1fr (horizontal reveal). */
.vk-reveal--x { grid-template-rows: none; grid-template-columns: 0fr; transition: grid-template-columns var(--vk-d-base) var(--vk-ease-standard); }
.vk-reveal--x[data-open="true"] { grid-template-columns: 1fr; }
.vk-reveal--x > * { min-width: 0; }

/* Collapsing header, scroll-linked. Name the scroller (.vk-scroller) and put .vk-scroll-scope on an ancestor of both, so the
   timeline never binds to whatever overflow box is nearest. Only translate and opacity move: the sticky box keeps its height,
   so the scroll position never shifts. No support: collapseOnScroll() sets data-collapsed from an IntersectionObserver. */
.vk-scroll-scope { timeline-scope: --vk-scroll; }
.vk-scroller { scroll-timeline: --vk-scroll block; }
@supports (animation-timeline: scroll()) {
  .vk-collapse { animation: vk-motion-collapse linear both; animation-timeline: --vk-scroll; animation-range: 0 var(--vk-collapse-range, 80px); }
}
.vk-collapse[data-collapsed] { transition: translate var(--vk-d-base) var(--vk-ease-standard), opacity var(--vk-d-base) var(--vk-ease-standard); }
.vk-collapse[data-collapsed="true"] { translate: 0 var(--vk-collapse-shift, -12px); opacity: var(--vk-collapse-opacity, 0); }
@media (prefers-reduced-motion: reduce) { .vk-collapse { animation: none; } }
[data-motion="reduce"] .vk-collapse { animation: none; }

/* Page transitions (viewTransition / vkNavigate): the content area only. Give it .vk-page (view-transition-name). */
.vk-page { view-transition-name: vk-page; }
::view-transition-old(vk-page) { animation: vk-motion-page-out var(--vk-d-fast) var(--vk-ease-exit) both; }
::view-transition-new(vk-page) { animation: vk-motion-page-in var(--vk-d-base) var(--vk-ease-enter) both; }
:where([data-vibe="quiet"])::view-transition-old(vk-page) { animation-name: vk-motion-fade-out; }
:where([data-vibe="quiet"])::view-transition-new(vk-page) { animation-name: vk-motion-fade-in; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
[data-motion="reduce"]::view-transition-group(*), [data-motion="reduce"]::view-transition-old(*), [data-motion="reduce"]::view-transition-new(*) { animation: none !important; }
}