/* chrome:begin — the rules between these markers are also served as chrome.css, the site chrome on pages the store and connector libraries render */
@font-face { font-family: "DM Sans"; font-style: normal; font-weight: 100 1000; font-display: swap;
  src: url(/fonts/dm-sans-latin.woff2?h=b6511d71) format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400 800; font-display: optional;
  src: url(/fonts/jetbrains-mono-latin.woff2?h=b6511d71) format("woff2"); }

:root {
  --bg: #0c1014; --bg-card: #111518; --bg-surface: #161b22; --bg-hover: #1c2428;
  --text: #e8edf2; --text-bright: #ffffff; --text-subtle: #8a9aa8; --text-quiet: #aebbc7;
  --border: #1c2428; --border-bright: #2a3640;
  --blue: #818cf8; --orange: #f59e0b; --gold: #daa04a; --green: #22c55e;
  --red: #f85149; --cyan: #22d3ee; --pink: #f472b6; --purple: #a78bfa;
  --on-accent: #0c1014;
  --glow-blue: rgba(129, 140, 248, 0.16); --glow-cyan: rgba(34, 211, 238, 0.10); --glow-gold: rgba(218, 160, 74, 0.10);
  --grid-line: rgba(138, 154, 168, 0.07);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -22px rgba(0, 0, 0, 0.8);
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --gutter: 20px;
  --radius: 12px;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* chrome:begin */
.muted { color: var(--text-subtle); }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.skip { position: absolute; left: 16px; top: -80px; z-index: 60; padding: 10px 16px; border-radius: 8px; background: var(--blue); color: var(--on-accent); font-weight: 600; }
.skip:focus { top: 12px; }
.wrap { max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }

/* chrome:begin */
/* ---- chrome */
.anav { --anav-bg: color-mix(in srgb, var(--bg) 84%, transparent); --anav-fg: var(--text-bright); --anav-accent: var(--blue); --anav-muted: var(--text-subtle);
  --anav-border: var(--border); --anav-font: var(--font-sans); --anav-fs: 16px; --anav-h: 64px; --anav-max: 1200px; }
.anav { position: sticky; top: 0; z-index: 40; backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); }
.anav .anav-wrap { padding-inline: var(--gutter); }
.anav .anav-cb { display: none; }
.anav ul, .anav li { margin: 0; padding: 0; list-style: none; }
.anav details, .anav summary { margin: 0; }
.anav summary::after { display: none; }
@media (max-width: 860px) { .anav .anav-burger { display: inline-flex; width: 44px; height: 44px; margin: 0; } }
.anav .nav-cta { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; background: var(--blue); color: var(--on-accent);
  font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.anav .nav-cta:hover { background: var(--text-bright); color: var(--bg); }
@media (max-width: 480px) { .anav .nav-cta { display: none; } }

.attribution { border-top: 1px solid var(--border); background: var(--bg-card); }
.attribution-row { display: flex; gap: 14px; align-items: flex-start; padding-block: 20px; font-size: 15px; color: var(--text-quiet); }
.attribution-row .icon { color: var(--green); margin-top: 2px; }
.attribution-row a { white-space: normal; }
.anav-footer { --anav-fg: var(--text); --anav-muted: var(--text-subtle); --anav-accent: var(--blue); --anav-border: var(--border); --anav-font: var(--font-sans); --anav-max: 1200px; --anav-bg: var(--bg); }
/* Pico lays out every <nav> and its list as a flex bar with padded items; the
   footer's columns are navs too and must keep anav's own layout. */
.anav-footer nav.anav-footer-col { display: block; }
.anav-footer nav ul.anav-footer-list { align-items: flex-start; justify-content: flex-start; margin: 0; }
.anav-footer nav li { display: list-item; padding: 0; list-style: none; }
.anav-footer nav li a { display: inline-block; margin: 0; padding: 4px 0; }
.anav-footer .anav-footer-h { margin: 0 0 10px; }
.anav-footer .anav-footer-grid { padding-inline: var(--gutter); }


/* chrome:begin */
/* ---- CJK typography (translation review 2026-09-15) */
/* Korean and Chinese punctuation and text use system CJK fonts before DM Sans
   (DM Sans has no CJK glyphs and draws "——" as two Latin dashes). */
:lang(ko) { --font-sans: "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans CJK KR", "Malgun Gothic", "DM Sans", system-ui, sans-serif; }
:lang(zh) { --font-sans: "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", "Hiragino Sans GB", "DM Sans", system-ui, sans-serif; }
/* Korean breaks between words, never inside a syllable block. */
:lang(ko) body, :lang(ko) h1, :lang(ko) h2, :lang(ko) h3, :lang(ko) p, :lang(ko) li, :lang(ko) dd, :lang(ko) .card { word-break: keep-all; overflow-wrap: anywhere; }
/* Chinese: strict line breaking; headings balance their lines. (keep-all is
   wrong for Chinese: unspaced text becomes one unbreakable run.) */
:lang(zh) body { line-break: strict; }
:lang(zh) h1, :lang(zh) h2 { text-wrap: balance; }
/* site.js wraps each Chinese word of a heading (Intl.Segmenter) in .nw. */
.nw { white-space: nowrap; }

/* chrome:begin */
/* The price's VAT basis on store pages (storefilter.go). */
.lh-price .brreg-vat { display: block; margin: .35rem 0 0; font: 500 0.875rem/1.35 var(--font-sans); color: var(--text-quiet); letter-spacing: 0; }
.brreg-card-pay { margin: 0 0 1rem; }
/* Five plans across one row leave each card ~200 px: the figure must not break
   inside "kr" or "/mnd". */
@media (min-width: 1180px) { .lh-featured-5 .lh-price { font-size: 1.35rem; } }
.lh-price { overflow-wrap: normal; }
.lh-price > small:not(.brreg-vat) { white-space: nowrap; }
.lh-foot-lang { display: inline-flex; flex-wrap: wrap; gap: .4rem 1rem; }