*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --blue: #72dff3;
  --blue-dim: rgba(114,223,243,0.1);
  --muted: #a0a0a0;
  /* Code / terminal: SQL -- comments */
  --code-sql-comment: rgba(255, 255, 255, 0.4);
  --border: #333333;
  --border-faint: #333333;
  --bg: #080808;
  --bg-alt: #0a0a0a;
  --bg-footer: #0a101a;
  --font-mono: Menlo, ui-monospace, 'SF Mono', 'Space Mono', Consolas, 'Courier New', monospace;
  --font-display: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
  --font-sans: 'Menlo', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  /* Content column: max 1280px */
  --page-gutter-x: 32px;
  --page-max: 1280px;
  --page-pad-x: var(--page-gutter-x);
  /* Horizontal inset for full-bleed sections (viewport centering + inner page pad) */
  --align-pad-x: calc(max(0px, (100vw - var(--page-max)) / 2) + var(--page-pad-x));
  /* Main header row (padding + logo + border); preview strip is separate (.preview-banner) */
  --site-header-h: 64px;
  --hero-shift-up: 60px;
  /* Preview strip height when shown; --preview-banner-stack → 0 when dismissed — layout.css */
  --preview-banner-stack-visible: 44px;
  --preview-banner-stack: var(--preview-banner-stack-visible);

  /* ===== Typography: roles ===== */
  --font-heading: var(--font-display);
  --font-body: var(--font-sans);
  --font-ui: var(--font-mono);
  --font-code: Menlo, ui-monospace, 'SF Mono', 'Space Mono', monospace;

  /* ===== Type scale (desktop baseline) ===== */
  --t-overline: 10px;
  --t-caption: 11px;
  --t-label: 12px;
  --t-tab: 14px;
  --t-body-sm: 13px;
  --t-body: 16px;
  --t-body-lh: 24px;
  --t-prose-lh: 28px;
  --t-step-title: 16px;
  --t-step-title-lh: 24px;
  --t-terminal: 16px;
  --t-terminal-lh: 32px;
  --t-lead: 20px;
  --t-lead-lh: 28px;
  --t-brand: 20px;
  --t-card-title: 24px;
  --t-card-title-lh: 32px;
  --t-feature-sm: 24px;
  --t-feature-sm-lh: 32px;
  --t-feature-lg: 30px;
  --t-feature-lg-lh: 36px;
  --t-feature-xl: 36px;
  --t-feature-xl-lh: 40px;
  --t-h2: 48px;
  --t-h2-lh: 48px;
  --t-h2-ls: -2.4px;
  --t-display-cta: 72px;
  --t-display-cta-lh: 48px;
  --t-display-cta-ls: -4.8px;
  /* Hero title — matches Figma seekdb-D0-M0 node 26-5 */
  --t-display-hero: 120px;
  --t-display-hero-lh: 96px;
  --t-display-hero-ls: -4.8px;
}

/* Chinese: prefer system CJK sans alongside Inter to reduce metric jump */
html:lang(zh-CN) {
  --font-sans: 'Menlo', 'Inter', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', system-ui, sans-serif;
}

html {
  background: var(--bg);
  color: #fff;
  overscroll-behavior-y: none;
}

::selection {
  background-color: var(--blue);
  color: var(--bg);
}
::-moz-selection {
  background-color: var(--blue);
  color: var(--bg);
}

/* Hide until i18n is applied and revealI18nAfterFonts runs (waits document.fonts.ready, capped) */
html.i18n-pending [data-i18n] {
  visibility: hidden;
}
html.i18n-pending .hero-d0-img {
  visibility: hidden;
}

body {
  background: var(--bg);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--t-body-lh);
  letter-spacing: 0px;
  overflow-x: hidden;
  overscroll-behavior-y: none;
  padding-top: 48px;
}