/* docs.vartalaap.si — a product-grade docs skin on MkDocs Material (2026-10-17).
   Shape borrowed from the reference docs (Stripe, Vercel, Resend, ElevenLabs): white header with search and a portal button, a slim
   section nav, quiet left sidebar, ~70-character prose with a right TOC, dark code blocks with tabs, hero landing, method badges.
   Brand: Manrope UI, Bricolage for the hero and h1, emerald accent, gold only on money. */
:root, [data-md-color-scheme="default"] {
  --md-text-font: "Manrope", system-ui, sans-serif; --md-code-font: "JetBrains Mono", ui-monospace, Menlo, monospace;
  --ink: #0B1F16; --ink-2: #3C4D45; --ink-3: #6F7F77; --rule: #E6EAE7; --paper: #F7F8F7; --emerald: #0F8A4C; --emerald-600: #0C7A42; --emerald-400: #22C472; --mint: #6FE3A4; --gold: #D9A63D; --gold-700: #9A6B00;
  --md-primary-fg-color: #ffffff; --md-primary-bg-color: var(--ink); --md-primary-bg-color--light: var(--ink-2);
  --md-accent-fg-color: var(--emerald); --md-accent-fg-color--transparent: rgba(15,138,76,.1);
  --md-default-fg-color: var(--ink); --md-default-fg-color--light: var(--ink-2); --md-default-fg-color--lighter: var(--ink-3); --md-default-fg-color--lightest: var(--rule);
  --md-default-bg-color: #ffffff; --md-typeset-a-color: var(--emerald);
  --md-code-bg-color: #04140E; --md-code-fg-color: #DFF5E8; --md-code-hl-color: rgba(111,227,164,.15);
  --md-typeset-table-color: var(--rule); --md-footer-bg-color: #06211A; --md-footer-bg-color--dark: #04140E;
}
[data-md-color-scheme="slate"] { --ink: #F3F6F4; --ink-2: #C7D1CB; --ink-3: #8A9892; --rule: #1E3328; --paper: #0A2419; --md-default-bg-color: #06211A; --md-default-fg-color: var(--ink); --md-default-fg-color--light: var(--ink-2); --md-default-fg-color--lighter: var(--ink-3); --md-default-fg-color--lightest: var(--rule); --md-typeset-a-color: var(--mint); --md-accent-fg-color: var(--mint); --md-primary-fg-color: #06211A; --md-primary-bg-color: #fff; --md-typeset-table-color: var(--rule); --md-code-hl-color: rgba(111,227,164,.2); }

/* ---------- header + section tabs ---------- */
.md-header { background: rgba(255,255,255,.88); backdrop-filter: blur(12px); color: var(--ink); box-shadow: none; border-bottom: 1px solid var(--rule); }
[data-md-color-scheme="slate"] .md-header { background: rgba(6,33,26,.9); }
.md-header__title { font: 700 .85rem/1 "Manrope", sans-serif; letter-spacing: -.01em; } .md-header__topic:first-child { font-weight: 700; }
.md-header__button.md-logo img { height: 1.3rem; width: auto; }
[data-md-color-scheme="slate"] .md-header__button.md-logo img, [data-md-color-scheme="slate"] .md-nav__button.md-logo img { content: url("vartalaap-lips-mark-nav-v3.svg"); }
.md-search__form { background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; box-shadow: none; } .md-search__input { color: var(--ink); font-size: .72rem; } .md-search__input::placeholder, .md-search__icon { color: var(--ink-3); }
.md-header__source { display: none; }
.portal-btn { align-self: center; margin: 0 .2rem 0 .6rem; font: 600 .65rem/1 "Manrope", sans-serif; color: #fff !important; background: linear-gradient(180deg, #13A05A, var(--emerald-600)); padding: .55rem .8rem; border-radius: 9px; white-space: nowrap; text-decoration: none; box-shadow: 0 6px 16px -8px rgba(12,122,66,.6); transition: transform .14s; } .portal-btn:hover { transform: translateY(-1px); }
.md-tabs { background: var(--md-default-bg-color); color: var(--ink); border-bottom: 1px solid var(--rule); }
.md-tabs__link { font: 600 .7rem/1 "Manrope", sans-serif; opacity: 1; color: var(--ink-3); margin-top: .7rem; padding-bottom: .55rem; border-bottom: 2px solid transparent; transition: color .14s, border-color .14s; }
.md-tabs__link:hover, .md-tabs__link--active { color: var(--ink); } .md-tabs__link--active { border-bottom-color: var(--emerald); } .md-tabs__item { height: auto; }

/* ---------- layout ---------- */
.md-grid { max-width: 80rem; } .md-main__inner { margin-top: 1.4rem; }
.md-sidebar--primary .md-nav__title { display: none; }
.md-nav { font-size: .68rem; } .md-nav__item { padding: 0; } .md-nav__link { margin-top: .35em; padding: .25em .5em; border-radius: 6px; color: var(--ink-2); transition: background .12s, color .12s; }
.md-nav__link:hover { background: var(--paper); color: var(--ink); } .md-nav__link--active, .md-nav__link--active:hover { color: var(--emerald); background: rgba(15,138,76,.08); font-weight: 700; }
[data-md-color-scheme="slate"] .md-nav__link--active { color: var(--mint); background: rgba(111,227,164,.1); }
.md-nav--primary .md-nav__item--section > .md-nav__link, .md-nav__item--section > label { font: 700 .6rem/1 "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin: 1.4em .5em .4em; }
.md-sidebar--secondary .md-nav__title { font: 700 .6rem/1 "Manrope", sans-serif; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); padding: 0 .5em .4em; box-shadow: none; }
.md-nav--secondary .md-nav__link { color: var(--ink-3); } .md-nav--secondary .md-nav__link--active { color: var(--emerald); background: none; font-weight: 600; }

/* ---------- prose ---------- */
.md-typeset { font-size: .78rem; line-height: 1.7; color: var(--ink-2); } .md-content__inner { max-width: 46rem; padding-bottom: 4rem; }
.md-typeset h1 { font: 700 2rem/1.15 "Bricolage Grotesque", "Manrope", sans-serif; letter-spacing: -.025em; color: var(--ink); margin: 0 0 .6em; }
.md-typeset h2 { font: 700 1.3rem/1.25 "Manrope", sans-serif; letter-spacing: -.015em; color: var(--ink); margin: 2.4em 0 .6em; padding-top: .6em; border-top: 1px solid var(--rule); }
.md-typeset h3 { font: 700 .95rem/1.3 "Manrope", sans-serif; color: var(--ink); margin: 1.8em 0 .5em; } .md-typeset h4 { font-weight: 700; color: var(--ink); }
.md-typeset p, .md-typeset li { color: var(--ink-2); } .md-typeset strong { color: var(--ink); } .md-typeset a { text-decoration: none; border-bottom: 1px solid rgba(15,138,76,.3); } .md-typeset a:hover { border-bottom-color: var(--emerald); }
.md-typeset code { font-size: .74em; background: var(--paper); color: var(--ink); border: 1px solid var(--rule); border-radius: 5px; padding: .1em .35em; } [data-md-color-scheme="slate"] .md-typeset code { background: #0E2A1F; }
.md-typeset pre > code { font-size: .72em; line-height: 1.6; border: 0; background: transparent; padding: 1em 1.1em; }
.md-typeset pre { border-radius: 10px; border: 1px solid #0F4A30; background: var(--md-code-bg-color); } .md-typeset .highlight { border-radius: 10px; } .md-typeset .highlight pre, .md-typeset .tabbed-content pre { background: var(--md-code-bg-color); }
.md-typeset .highlight .nt, .md-typeset .highlight .nf, .md-typeset .highlight .nx { color: #DFF5E8; } .md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2, .md-typeset .highlight .sa { color: #FFD978; } .md-typeset .highlight .k, .md-typeset .highlight .kn, .md-typeset .highlight .kd, .md-typeset .highlight .nb { color: #6FE3A4; } .md-typeset .highlight .c, .md-typeset .highlight .c1, .md-typeset .highlight .ch { color: rgba(255,255,255,.45); } .md-typeset .highlight .mi, .md-typeset .highlight .mf { color: #FFC66B; } .md-typeset .highlight .o, .md-typeset .highlight .p { color: rgba(223,245,232,.8); } .md-typeset .highlight .na { color: #9EE7C0; } .md-typeset .highlight .nv { color: #DFF5E8; }
.md-typeset .md-clipboard { color: rgba(255,255,255,.45); } .md-typeset .md-clipboard:hover { color: #fff; }
.md-typeset .tabbed-set { margin: 1em 0; border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; background: var(--paper); }
.md-typeset .tabbed-labels { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0 .4rem; box-shadow: none; } .md-typeset .tabbed-labels > label { font: 600 .66rem/1 "Manrope", sans-serif; color: var(--ink-3); padding: .7rem .7rem .6rem; } .md-typeset .tabbed-labels > label:hover { color: var(--ink); }
.md-typeset .tabbed-set > input:checked + .tabbed-labels > label, .md-typeset .tabbed-labels > label.tabbed-labels--active { color: var(--ink); } .md-typeset .tabbed-set .tabbed-labels::before { background: var(--emerald); height: 2px; }
.md-typeset .tabbed-content { padding: 0; } .md-typeset .tabbed-content pre, .md-typeset .tabbed-content .highlight { margin: 0; border: 0; border-radius: 0; } .md-typeset .tabbed-block > pre:only-child { margin: 0; }
.md-typeset table:not([class]) { font-size: .72rem; border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; box-shadow: none; display: table; width: 100%; }
.md-typeset table:not([class]) th { background: var(--paper); color: var(--ink-3); font: 600 .62rem/1.3 "Manrope", sans-serif; letter-spacing: .02em; padding: .7em .9em; border-bottom: 1px solid var(--rule); }
.md-typeset table:not([class]) td { padding: .65em .9em; border-top: 1px solid var(--rule); vertical-align: top; color: var(--ink-2); } .md-typeset table:not([class]) td code { white-space: nowrap; }
.md-typeset table:not([class]) tbody tr:hover { background: var(--paper); }
.md-typeset .admonition, .md-typeset details { border-radius: 10px; border-width: 1px; box-shadow: none; font-size: .72rem; } .md-typeset .admonition-title { font-weight: 700; }
.md-typeset .admonition.note, .md-typeset .admonition.tip { border-color: rgba(15,138,76,.35); } .md-typeset .note > .admonition-title, .md-typeset .tip > .admonition-title { background: rgba(15,138,76,.08); } .md-typeset .note > .admonition-title::before, .md-typeset .tip > .admonition-title::before { background-color: var(--emerald); }
.md-typeset .hi { font-family: "Noto Sans Devanagari", "Noto Sans", sans-serif; }
.md-typeset .badge { display: inline-block; font: 700 .55rem/1 "Manrope", sans-serif; letter-spacing: .08em; text-transform: uppercase; padding: .35em .55em; border-radius: 6px; vertical-align: middle; margin-left: .5em; color: #fff; }
.md-typeset .badge.post { background: var(--emerald); } .md-typeset .badge.get { background: #2F6FED; } .md-typeset .badge.ws { background: var(--gold-700); }
.md-typeset .price { font: 700 3rem/1 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; color: var(--gold-700); margin: 0 0 .6em; } [data-md-color-scheme="slate"] .md-typeset .price { color: #FFD978; }
.md-typeset .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .7rem; margin: 1rem 0; }
.md-typeset .cards > p { display: contents; margin: 0; }
.md-typeset .cards > a, .md-typeset .cards > p > a, .md-typeset .cards > div { display: block; border: 1px solid var(--rule); border-radius: 12px; padding: .9rem 1rem; color: inherit; text-decoration: none; background: var(--md-default-bg-color); transition: border-color .14s, transform .14s, box-shadow .2s; }
.md-typeset .cards > a:hover, .md-typeset .cards > p > a:hover { border-color: var(--emerald); transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(11,31,22,.35); }
.md-typeset .cards b { display: block; margin-bottom: .2rem; font-size: .8rem; color: var(--ink); } .md-typeset .cards small { color: var(--ink-3); font-size: .66rem; line-height: 1.5; display: block; }
.md-typeset .facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .7rem; margin: 1rem 0; } .md-typeset .facts > div { border-left: 3px solid var(--emerald-400); padding: .2rem .9rem; font-size: .74rem; } .md-typeset .facts p { margin: 0; }
.md-typeset .stat-row { display: flex; gap: 1.2rem; flex-wrap: wrap; margin: 1rem 0; } .md-typeset .stat-row div { flex: 1 1 140px; border-left: 3px solid var(--emerald-400); padding: .2rem .8rem; } .md-typeset .stat-row b { display: block; font: 700 1.5rem/1.1 "Bricolage Grotesque", sans-serif; color: var(--ink); } .md-typeset .stat-row small { color: var(--ink-3); }
.md-footer { background: #06211A; } .md-footer-meta { background: #04140E; } .md-copyright { color: rgba(255,255,255,.5); font-size: .62rem; } .md-copyright a { color: var(--mint); }
.md-content__button { display: none; }

/* ---------- landing ---------- */
.home .hero { background: radial-gradient(70% 90% at 15% 0%, rgba(34,196,114,.22), transparent 60%), radial-gradient(50% 60% at 95% 100%, rgba(217,166,61,.14), transparent 60%), linear-gradient(180deg, #0B3322, #06211A 70%, #04140E); color: #fff; margin: -1.4rem 0 0; padding: 4.5rem 1.2rem 3.4rem; }
.home .hero-in { max-width: 56rem; margin: 0 auto; }
.home .eyebrow { font: 600 .62rem/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--mint); margin: 0 0 1rem; }
.home h1 { font: 300 clamp(1.9rem, 4vw, 3.2rem)/1.08 "Bricolage Grotesque", sans-serif; letter-spacing: -.03em; margin: 0 0 1rem; color: #fff; } .home h1 span { font-weight: 700; background: linear-gradient(100deg, #fff 30%, #FFE9B0 50%, #fff 70%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.home .sub { font-size: .85rem; line-height: 1.6; color: rgba(255,255,255,.74); max-width: 42rem; margin: 0 0 1.4rem; } .home .sub b { color: #FFD978; font-weight: 700; }
.home .ctas { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 2.2rem; }
.home .btn { display: inline-flex; align-items: center; height: 2.4rem; padding: 0 1rem; border-radius: 10px; font: 600 .74rem/1 "Manrope", sans-serif; color: #fff; border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.07); text-decoration: none; transition: background .14s, transform .14s; }
.home .btn:hover { background: rgba(255,255,255,.14); transform: translateY(-1px); } .home .btn.primary { color: #2B1E06; background: linear-gradient(135deg, #FFD978, #E8B94A 60%, #C8942A); border-color: transparent; box-shadow: 0 10px 26px rgba(232,185,74,.28); } .home .btn.ghost { background: transparent; }
.home .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.4rem; }
.home .stats b { display: block; font: 700 1.6rem/1.1 "Bricolage Grotesque", sans-serif; letter-spacing: -.02em; color: #fff; } .home .stats small { color: rgba(255,255,255,.55); font-size: .64rem; line-height: 1.4; display: block; margin-top: .25rem; }
.home .home-body { max-width: 56rem; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; } .home .home-body h2 { border-top: 0; margin-top: 1.8em; }
@media (max-width: 76.2344em) { .portal-btn { display: none; } }
@media (max-width: 44.9844em) { .home .hero { padding: 3rem 1rem 2.4rem; } .md-typeset h1 { font-size: 1.6rem; } }
.md-typeset .endpoint { display: inline-flex; align-items: center; gap: .6rem; margin: -.2rem 0 1.2rem; padding: .4rem .5rem .4rem .4rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--paper); }
.md-typeset .endpoint .m { font: 700 .58rem/1 "Manrope", sans-serif; letter-spacing: .08em; padding: .4em .55em; border-radius: 6px; background: var(--emerald); color: #fff; } .md-typeset .endpoint code { border: 0; background: transparent; font-size: .74rem; }
/* code: explicit foreground + highlight tokens for the dark block, in both schemes */
:root, [data-md-color-scheme="default"], [data-md-color-scheme="slate"] { --md-code-fg-color: #DFF5E8; --md-code-hl-number-color: #FFC66B; --md-code-hl-special-color: #FF9E8A; --md-code-hl-function-color: #9EE7C0; --md-code-hl-constant-color: #B7A4FF; --md-code-hl-keyword-color: #6FE3A4; --md-code-hl-string-color: #FFD978; --md-code-hl-name-color: #DFF5E8; --md-code-hl-operator-color: rgba(223,245,232,.75); --md-code-hl-punctuation-color: rgba(223,245,232,.75); --md-code-hl-comment-color: rgba(255,255,255,.45); --md-code-hl-generic-color: #DFF5E8; --md-code-hl-variable-color: #DFF5E8; }
.md-typeset pre > code, .md-typeset .highlight code, .md-typeset .highlight span { color: var(--md-code-fg-color); } .md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2, .md-typeset .highlight .sa, .md-typeset .highlight .se, .md-typeset .highlight .si { color: var(--md-code-hl-string-color); } .md-typeset .highlight .k, .md-typeset .highlight .kn, .md-typeset .highlight .kd, .md-typeset .highlight .kc, .md-typeset .highlight .nb { color: var(--md-code-hl-keyword-color); } .md-typeset .highlight .c, .md-typeset .highlight .c1, .md-typeset .highlight .ch, .md-typeset .highlight .cm { color: var(--md-code-hl-comment-color); } .md-typeset .highlight .mi, .md-typeset .highlight .mf, .md-typeset .highlight .m { color: var(--md-code-hl-number-color); } .md-typeset .highlight .nf, .md-typeset .highlight .fm { color: var(--md-code-hl-function-color); } .md-typeset .highlight .nv, .md-typeset .highlight .vm { color: #B7E4CF; }
/* code blocks as windows: traffic lights + file name + copy, deep navy (2026-10-17) */
:root, [data-md-color-scheme="default"], [data-md-color-scheme="slate"] { --md-code-bg-color: #0C1020; --md-code-fg-color: #E6E8F0; }
.md-typeset .highlight { border-radius: 12px; overflow: hidden; background: #0C1020; box-shadow: 0 20px 50px -30px rgba(4,8,24,.8); }
.md-typeset .highlight pre, .md-typeset pre { border: 0; border-radius: 0; background: #0C1020; }
.md-typeset .highlight span.filename { display: flex; align-items: center; gap: 12px; height: 44px; margin: 0; padding: 0 3.2rem 0 16px; background: #0A0E1C; border-bottom: 1px solid rgba(255,255,255,.07); font: 500 .62rem/1 "JetBrains Mono", monospace; color: rgba(255,255,255,.55); border-radius: 0; }
.md-typeset .highlight span.filename::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: #FF5F57; box-shadow: 18px 0 0 #FEBC2E, 36px 0 0 #28C840; margin-right: 36px; flex: none; }
.md-typeset .highlight span.filename + pre { margin-top: 0; } .md-typeset .highlight pre > code { padding: 1.1em 1.3em 1.25em; font-size: .72em; line-height: 1.7; }
.md-typeset .md-clipboard { top: 11px; right: 10px; width: auto; height: 24px; padding: 0 10px; border-radius: 7px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.9); font: 600 .6rem/24px "Manrope", sans-serif; } .md-typeset .md-clipboard::after { content: "Copy"; -webkit-mask: none; mask: none; background: none; width: auto; height: auto; position: static; display: inline; } .md-typeset .md-clipboard:hover { background: rgba(255,255,255,.16); color: #fff; }
.md-typeset .highlight:not(:has(span.filename)) pre > code { padding-top: 1.3em; }
.md-typeset .tabbed-content .highlight { border-radius: 0; box-shadow: none; } .md-typeset .highlight .s, .md-typeset .highlight .s1, .md-typeset .highlight .s2 { color: #FFD978; } .md-typeset .highlight .k, .md-typeset .highlight .kn, .md-typeset .highlight .nb { color: #9EE7C0; }
.md-typeset .md-clipboard { display: none; }
.md-typeset .highlight span.filename { padding-right: 10px; } .md-typeset .highlight span.filename .win-copy { margin-left: auto; height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); font: 600 .62rem/28px "Manrope", sans-serif; cursor: pointer; transition: background .14s; } .md-typeset .highlight span.filename .win-copy:hover { background: rgba(255,255,255,.16); }
.md-typeset .highlight:not(:has(span.filename)) pre > code { padding-top: 1.1em; }
.md-typeset .md-code__nav, .md-typeset .md-code__button, .md-typeset .md-clipboard { display: none !important; }