/* CAK static theme. Layout, translations, navigation and article content stay with
   their existing generators. The marker keeps this layer out of the Vue app. */
html[data-cak-static] {
  --cak-bg: #111110;
  --cak-panel: #0b0b0a;
  --cak-surface: var(--cak-panel);
  --cak-surface-hover: #1e1e1b;
  --cak-text: #f4f1e9;
  --cak-soft: #d4d0c7;
  --cak-muted: #a6a399;
  --cak-border: #35352f;
  --cak-border-strong: #55554b;
  --cak-button: #f4f1e9;
  --cak-button-text: #232320;
  --cak-accent-soft: #24241f;
  --cak-nav: rgba(17, 17, 16, .94);
  --cak-code-bg: #0b0b0a;
  --cak-code-text: #eae7de;
  --cak-focus: #d8bc8a;
  --cak-serif: "Lora", Georgia, "Times New Roman", serif;
  color-scheme: dark;
}
html[data-cak-static][data-theme="light"] {
  --cak-bg: #faf9f5;
  --cak-panel: #fff;
  --cak-surface-hover: #f0eee7;
  --cak-text: #232320;
  --cak-soft: #4d4c45;
  --cak-muted: #66645c;
  --cak-border: #dedbd2;
  --cak-border-strong: #aaa69a;
  --cak-button: #232320;
  --cak-button-text: #faf9f5;
  --cak-accent-soft: #eeeae0;
  --cak-nav: rgba(250, 249, 245, .94);
  --cak-focus: #725126;
  color-scheme: light;
}
/* Both variable vocabularies are used by the existing static generators. */
html[data-cak-static][data-theme] {
  --bg: var(--cak-bg);
  --card: var(--cak-panel);
  --bg-card: var(--cak-panel);
  --card-hover: var(--cak-surface-hover);
  --bg-card-hover: var(--cak-surface-hover);
  --bd: var(--cak-border);
  --border: var(--cak-border);
  --bd-strong: var(--cak-border-strong);
  --border-strong: var(--cak-border-strong);
  --tx: var(--cak-text);
  --text: var(--cak-text);
  --sf: var(--cak-soft);
  --text-soft: var(--cak-soft);
  --mu: var(--cak-muted);
  --text-muted: var(--cak-muted);
  --ac: var(--cak-text);
  --accent: var(--cak-text);
  --ac-soft: var(--cak-accent-soft);
  --accent-soft: var(--cak-accent-soft);
  --gradient: var(--cak-button);
  --code-bg: var(--cak-code-bg);
  --green: var(--cak-soft);
  --blue: var(--cak-soft);
  --purple: var(--cak-soft);
  background: var(--cak-bg);
  color: var(--cak-text);
}
html[data-cak-static][data-theme] body {
  background: var(--cak-bg);
  color: var(--cak-text);
  -webkit-font-smoothing: antialiased;
}
html[data-cak-static][data-theme] :is(h1,h2,h3,h4,.serif,.section-title,.sh,.pname) {
  font-family: var(--cak-serif);
  font-weight: 400;
  color: var(--cak-text);
  text-wrap: balance;
}
html[data-cak-static][data-theme] :is(h1,h2,h3) .grad {
  background: none;
  color: inherit;
  -webkit-text-fill-color: currentColor;
}
html[data-cak-static][data-theme] :is(p,li,td,dd) { text-wrap: pretty; }
html[data-cak-static][data-theme] :is(.lead,.lede,.hero-sub,.section-desc,.disc,.note,.byline,.meta,.pd,.dur) {
  color: var(--cak-soft);
}
html[data-cak-static][data-theme] :is(a) { text-underline-offset: .2em; }
html[data-cak-static][data-theme] :is(a,button,input,select,textarea,summary):focus-visible {
  outline: 2px solid var(--cak-focus);
  outline-offset: 4px;
}
html[data-cak-static][data-theme] ::selection { background: var(--cak-button); color: var(--cak-button-text); }
/* Navigation sizing and menu breakpoints remain owned by each document family. */
html[data-cak-static][data-theme] body > nav,
html[data-cak-static][data-theme] body > header > nav {
  background: var(--cak-nav);
  border-color: var(--cak-border);
  box-shadow: none;
}
html[data-cak-static][data-theme] body:not(.cak-home) nav :is(.logo,.nav-links a,.nav-auth a,.nav-burger):not(.btn-primary):not(.user-pill) {
  color: var(--cak-text);
}
html[data-cak-static][data-theme] nav .logo-mark {
  background: var(--cak-button);
  color: var(--cak-button-text);
}
html[data-cak-static][data-theme] nav .logo {
  font-family: var(--cak-serif);
  font-weight: 400;
}
html[data-cak-static][data-theme] nav .nav-links.show-mobile {
  background: var(--cak-panel);
  border-color: var(--cak-border);
}
html[data-cak-static][data-theme] nav :is(.nav-links a:hover,.nav-links .active,.nav-links .cur) {
  background-color: var(--cak-accent-soft);
  color: var(--cak-text);
}
html[data-cak-static][data-theme] body :is(.btn-primary,.buy,.user-pill) {
  background: var(--cak-button);
  color: var(--cak-button-text);
  border-color: var(--cak-button);
  box-shadow: none;
}
html[data-cak-static][data-theme] body :is(.btn-primary,.buy):hover { filter: brightness(.92); }
html[data-cak-static][data-theme] body :is(.btn-ghost,.theme-toggle,.nav-burger,.llmbtn) {
  background: transparent;
  color: var(--cak-text);
  border-color: var(--cak-border-strong);
  box-shadow: none;
}
html[data-cak-static][data-theme] body :is(.btn-ghost,.theme-toggle,.nav-burger,.llmbtn):hover {
  background: var(--cak-accent-soft);
  color: var(--cak-text);
}
html[data-cak-static][data-theme] body :is(.card,.model-card,.plan,.tier,.qcard,.sib,.step,.faq-item,.author-box,.cta,.toc,.note,.warn,.ds-search,.badge,.tag-chip) {
  background-color: var(--cak-panel);
  border-color: var(--cak-border);
  color: var(--cak-text);
  box-shadow: none;
}
html[data-cak-static][data-theme] body :is(.card:hover,.qcard:hover,.sib:hover) { border-color: var(--cak-border-strong); }
html[data-cak-static][data-theme] body :is(.plan.featured,.tier.featured) { border-color: var(--cak-border-strong); }
html[data-cak-static][data-theme] body :is(.best-pill,.save-badge,.bonus,.section-tag,.card-icon) {
  background: var(--cak-accent-soft);
  color: var(--cak-text);
  border-color: var(--cak-border);
}
html[data-cak-static][data-theme] :is(.price-strike,.byline-role,.crumbs,.toc-h,.docs-toc .t,.docs-side .ds-sec summary,.tag-chip) { color: var(--cak-muted); }
html[data-cak-static][data-theme] :is(.docs-side,.docs-toc,.toc,.siblings,.pager,.faq,.faq-item,hr) { border-color: var(--cak-border); }
html[data-cak-static][data-theme] :is(.docs-side,.docs-toc) { background: var(--cak-bg); }
html[data-cak-static][data-theme] :is(.docs-side a,.docs-toc a,.toc a,.pager a) { color: var(--cak-soft); }
html[data-cak-static][data-theme] :is(.docs-side a.cur,.docs-side a:hover,.docs-toc a:hover,.toc a:hover) {
  background: var(--cak-accent-soft);
  color: var(--cak-text);
}
html[data-cak-static][data-theme] :is(table) { border-color: var(--cak-border); }
html[data-cak-static][data-theme] :is(th,td) { border-color: var(--cak-border); }
html[data-cak-static][data-theme] :is(th) { background: var(--cak-panel); color: var(--cak-soft); }
html[data-cak-static][data-theme] :is(tbody tr:hover) { background: var(--cak-accent-soft); }
html[data-cak-static][data-theme] :is(input,select,textarea) {
  background: var(--cak-panel);
  color: var(--cak-text);
  border-color: var(--cak-border-strong);
}
html[data-cak-static][data-theme] ::placeholder { color: var(--cak-muted); opacity: 1; }
/* Code intentionally keeps one dark surface so existing syntax tokens stay legible
   in both themes. No font-size or wrapping changes to copied commands. */
html[data-cak-static][data-theme] body:not(.cak-home) :is(pre,.codeblock,.terminal) {
  background: var(--cak-code-bg);
  color: var(--cak-code-text);
  border-color: #35352f;
}
html[data-cak-static][data-theme] body:not(.cak-home) :is(pre code) { background: transparent; color: inherit; }
html[data-cak-static][data-theme] :is(.cb-bar,.terminal-bar,.pre-copy,.cb-copy) {
  background: #171714;
  color: #d4d0c7;
  border-color: #35352f;
}
html[data-cak-static][data-theme] body:not(.cak-home) :is(p,li,td,h2,h3) > code {
  background: var(--cak-accent-soft);
  color: var(--cak-text);
  border-color: var(--cak-border);
}
html[data-cak-static][data-theme] footer {
  background: var(--cak-bg);
  color: var(--cak-muted);
  border-color: var(--cak-border);
}
html[data-cak-static][data-theme] footer a { color: var(--cak-soft); }
/* Existing promo blocks use a few inline cream/ink values. Match only those known
   values; do not flatten semantic status colors or syntax highlighting. */
html[data-cak-static][data-theme] [style*="background:#fdf7f0"],
html[data-cak-static][data-theme] [style*="background:#faf3ea"],
html[data-cak-static][data-theme] [style*="background:#faf5ef"] {
  background: var(--cak-panel) !important;
  border-color: var(--cak-border-strong) !important;
}
html[data-cak-static][data-theme] [style*="color:#4a4a46"],
html[data-cak-static][data-theme] [style*="color:#1a1a18"] { color: var(--cak-soft) !important; }
html[data-cak-static][data-theme] [style*="background:#1a1a18"] {
  background: var(--cak-button) !important;
  color: var(--cak-button-text) !important;
}
html[data-cak-static][data-theme="dark"] .theme-toggle .theme-moon,
html[data-cak-static][data-theme="light"] .theme-toggle .theme-sun { display: none; }
html[data-cak-static][data-theme="dark"] .theme-toggle .theme-sun,
html[data-cak-static][data-theme="light"] .theme-toggle .theme-moon { display: inline-block; }
@media (prefers-reduced-motion: reduce) {
  html[data-cak-static] *,html[data-cak-static] *::before,html[data-cak-static] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* One navigation format and one logo asset for every CAK marketing template. */
html[data-cak-static] body > nav {
  height: 80px; min-height: 80px; border-bottom: 1px solid var(--cak-border);
  z-index: 60; box-sizing: border-box;
}
html[data-cak-static] body > nav > :is(.container,.wrap) {
  width: 86%; max-width: 1680px; height: 100%; margin: 0 auto; padding: 0;
  display: flex; align-items: center; gap: 20px; box-sizing: border-box;
}
html[data-cak-static] body > nav .logo {
  display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto;
  font-family: var(--cak-serif); font-weight: 400; font-size: 27px;
  letter-spacing: -.035em; line-height: 1.2; white-space: nowrap;
}
html[data-cak-static] .cak-logo-image { display: block; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 8px; }
html[data-cak-static] body > nav .nav-links { gap: 4px; margin-left: auto; align-items: center; }
html[data-cak-static] body > nav .nav-links > a {
  font-family: Inter,system-ui,sans-serif; font-size: 14px; line-height: 1.3;
  padding: 9px 11px; border-radius: 8px; white-space: nowrap;
  text-decoration: none; transition: color 140ms ease, background-color 140ms ease;
}
html[data-cak-static] body > nav .nav-links > a[href$="/models/"] { order: 1; }
html[data-cak-static] body > nav .nav-links > :is(a[href$="/plans/"],a[href="#plans"]) { order: 2; }
html[data-cak-static] body > nav .nav-links > a[href$="/docs/"] { order: 3; }
html[data-cak-static] body > nav .nav-links > a[href$="/learn/"] { order: 4; }
html[data-cak-static] body > nav .nav-links > :is(a[href$="/tools/"],a[href$="/blog/"],a[href$="/topup/"]) { order: 5; }
html[data-cak-static] body > nav .nav-links > :is(.nav-m,.cak-mobile-link[href="/login"],.cak-shared-mobile-theme,.cak-mobile-theme) { order: 6; }
html[data-cak-static] body > nav .nav-auth { display: flex; align-items: center; gap: 12px; margin-left: 12px; flex: 0 0 auto; }
html[data-cak-static] body > nav .nav-auth :is(.btn,.cak-nav-cta,.cak-login-link,.user-pill) { font-size: 14px; line-height: 1.3; padding: 10px 14px; border-radius: 9px; white-space: nowrap; }
html[data-cak-static] body > nav .nav-auth .theme-toggle { width: 36px; height: 38px; padding: 0; border: 0; }
html[data-cak-static] body > nav .nav-burger { width: 36px; height: 38px; border-radius: 8px; flex: 0 0 auto; }
html[data-cak-static] body > nav .cak-shared-mobile-theme { display: none; }
html[data-cak-static] body > nav .nav-links > :is(a[href$="#features"],a[href$="#pricing"]) { display: none !important; }
html[data-cak-static] .cak-docs-toggle { display: none; }
@media(max-width:900px) {
  html[data-cak-static] .docs-side:not(.cak-docs-open) { display: none; }
  html[data-cak-static] .docs-side.cak-docs-open { display: block; }
  html[data-cak-static] .cak-docs-toggle {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 15px 18px; margin: 18px 0; width: 100%;
    background: var(--cak-panel); color: var(--cak-text); border: 1px solid var(--cak-border);
    border-radius: 10px; font: inherit; font-size: 14px; text-align: left; cursor: pointer;
  }
  html[data-cak-static] .cak-docs-toggle::after { content: '+'; font-size: 20px; }
  html[data-cak-static] .cak-docs-toggle[aria-expanded="true"]::after { content: '−'; }
}
@media(min-width:1101px) {
  html[data-cak-static] body > nav .nav-links { display: flex !important; }
  html[data-cak-static] body > nav .nav-burger { display: none !important; }
  html[data-cak-static] body > nav .nav-links > :is(a[href$="/tools/"],a[href$="/blog/"],a[href$="/topup/"],.nav-m,.cak-mobile-link,.cak-mobile-theme) { display: none !important; }
}
@media(max-width:1100px) {
  html[data-cak-static] body > nav .nav-links:not(.show-mobile) { display: none !important; }
  html[data-cak-static] body > nav .nav-links.show-mobile {
    display: flex !important; position: absolute; top: 72px; left: 7%; right: 7%; width: auto;
    margin: 0; padding: 10px; gap: 2px; flex-direction: column; align-items: stretch;
    border: 1px solid var(--cak-border); border-radius: 12px;
    background: var(--cak-panel); box-shadow: 0 12px 24px #0002;
  }
  html[data-cak-static] body > nav .nav-links.show-mobile > a { display: block !important; font-size: 14px; padding: 12px; }
  html[data-cak-static] body > nav .nav-auth { margin-left: auto; }
  html[data-cak-static] body > nav .nav-burger { display: inline-flex !important; align-items: center; justify-content: center; }
}
@media(max-width:699px) {
  html[data-cak-static] body > nav { height: 72px; min-height: 72px; }
  html[data-cak-static] body > nav > :is(.container,.wrap) { width: calc(100% - 36px); gap: 8px; }
  html[data-cak-static] body > nav .logo { font-size: 23px; gap: 8px; }
  html[data-cak-static] .cak-logo-image { width: 27px; height: 27px; flex-basis: 27px; }
  html[data-cak-static] body > nav .nav-auth { gap: 4px; }
  html[data-cak-static] body > nav .nav-auth :is(.btn-primary,.cak-nav-cta,.user-pill) { padding: 10px 12px; font-size: 12px; }
  html[data-cak-static] body > nav .nav-auth :is(.btn-ghost,.cak-login-link,.theme-toggle) { display: none !important; }
  html[data-cak-static] body > nav .nav-links.show-mobile { top: 65px; left: 18px; right: 18px; }
  html[data-cak-static] body > nav .nav-links.show-mobile :is(.cak-shared-mobile-theme,.cak-mobile-theme) { display: flex !important; width: 100%; height: 42px; align-items: center; padding: 12px; border: 0; font-size: 14px; }
}
@media(max-width:380px) {
  html[data-cak-static] body > nav > :is(.container,.wrap) { width: calc(100% - 28px); gap: 6px; }
  html[data-cak-static] body > nav .logo { font-size: 21px; gap: 6px; }
  html[data-cak-static] .cak-logo-image { width: 24px; height: 24px; flex-basis: 24px; }
  html[data-cak-static] body > nav .nav-auth :is(.btn-primary,.cak-nav-cta,.user-pill) { padding: 9px 10px; font-size: 11px; }
}
/* Hover changes color or border, never text contrast or the layout's position. */
html[data-cak-static][data-theme] body :is(.btn-primary,.buy,.user-pill,.cak-button-primary,.cak-nav-cta):hover {
  background: var(--cak-button) !important; color: var(--cak-button-text) !important;
  filter: none !important; transform: none !important; box-shadow: inset 0 0 0 2px var(--cak-border-strong) !important;
}
html[data-cak-static][data-theme] body :is(.card,.plan,.tier,.qcard,.card-hover,.model-card,.sib):hover {
  transform: none !important; box-shadow: none !important; border-color: var(--cak-border-strong);
}
html[data-cak-static][data-theme] body :is(.btn,.btn-ghost,.cak-button-secondary):hover { transform: none !important; }
html[data-cak-static][data-theme] body > nav :is(.nav-links a,.btn-ghost,.cak-login-link):hover {
  background: var(--cak-accent-soft); color: var(--cak-text); text-decoration: none;
}

/* terminal brand mark (owner 2026-10-10: orange >_ everywhere, not the A) */
html[data-cak-static] .cak-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; color: #c9795b; }
html[data-cak-static] .cak-brand-mark svg { display: block; width: 100%; height: 100%; }
@media (max-width: 699px) { html[data-cak-static] .cak-brand-mark { width: 27px; height: 27px; flex-basis: 27px; } }
@media (max-width: 380px) { html[data-cak-static] .cak-brand-mark { width: 24px; height: 24px; flex-basis: 24px; } }