/* BeziSync site: the app's design tokens (frontend/src/styles.css), IBM Plex, light and dark. */
@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-display: swap; src: url(/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-display: swap; src: url(/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'); }

:root {
  color-scheme: light dark;
  --bg: light-dark(#f3f4f7, #0a0e16);
  --surface: light-dark(#ffffff, #111725);
  --subtle: light-dark(#f7f8fa, #151c2c);
  --hover: light-dark(#eceef3, #1a2234);
  --line: light-dark(#e1e4ea, #232c3e);
  --line-strong: light-dark(#c8cdd6, #344057);
  --ink: light-dark(#0f1420, #e7ebf3);
  --ink-2: light-dark(#333b4b, #c2c9d6);
  --muted: light-dark(#596273, #929cb0);
  --accent: light-dark(#2552e8, #7d9bff);
  --accent-hover: light-dark(#1a3fc0, #a2b8ff);
  --accent-soft: light-dark(#e7edfd, #1b2546);
  --accent-ink: light-dark(#1a3fc0, #b9c9ff);
  --on-accent: light-dark(#ffffff, #08102a);
  --code-bg: light-dark(#0f1320, #070a11);
  --code-ink: #dce3f5;
  --nav-bg: light-dark(#0e1422, #070a11);
  --radius: 10px;
  --sans: 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
  --wide: 1200px;
}
:root[data-theme='light'] { color-scheme: light; }
:root[data-theme='dark'] { color-scheme: dark; }

* { box-sizing: border-box; }
html { scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
code { font-family: var(--mono); font-size: 0.875em; }
img { max-width: 100%; }

/* Buttons */
.button { display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 600; border: 1px solid transparent; transition: background .15s; }
.button:hover { background: var(--accent-hover); color: var(--on-accent); text-decoration: none; }
.button.ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.button.ghost:hover { background: var(--hover); color: var(--ink); }
.button.small { padding: 7px 14px; font-size: 14px; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.top-inner { max-width: var(--wide); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.docs-page .top-inner { max-width: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 600; font-size: 18px; }
.brand:hover { color: var(--ink); text-decoration: none; }
.top-nav { display: flex; align-items: center; gap: 20px; font-size: 15px; }
.top-nav > a:not(.button) { color: var(--ink-2); }
.top-nav > a:not(.button):hover, .top-nav a[aria-current] { color: var(--ink); }
.icon-link { display: inline-flex; align-items: center; gap: 6px; }
.icon-link svg { width: 18px; height: 18px; }
.theme { display: inline-grid; place-items: center; background: none; border: 1px solid var(--line); color: var(--ink-2); border-radius: 8px; width: 34px; height: 34px; cursor: pointer; }
.theme:hover { background: var(--hover); }
@media (max-width: 720px) { .top-nav > a:not(.button):not([href="/docs/"]) { display: none; } .top-nav { gap: 12px; } }

/* Landing */
.home main section { padding: 88px 24px; }
.section-head { max-width: 760px; margin: 0 auto 48px; text-align: center; }
.section-head h2, .final h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 16px; }
.section-head p, .final p { color: var(--muted); font-size: 18px; margin: 0; }
.hero { padding-top: 72px !important; overflow: hidden; background: radial-gradient(1200px 500px at 50% -10%, var(--accent-soft), transparent 70%); }
.hero-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.eyebrow { display: inline-block; margin: 0 0 20px; padding: 4px 14px; border: 1px solid var(--line-strong); border-radius: 99px; color: var(--muted); font-size: 14px; background: var(--surface); }
.hero h1 { font-size: clamp(38px, 6.5vw, 64px); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 24px; font-weight: 600; }
.hero h1 em { font-style: normal; color: var(--accent); }
.lead { font-size: clamp(17px, 2vw, 20px); color: var(--ink-2); margin: 0 auto 32px; max-width: 720px; }
.cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: 14px; margin-top: 16px; }
.shot { margin: 0; border-radius: 14px; border: 1px solid var(--line-strong); overflow: hidden; background: var(--surface); box-shadow: 0 30px 80px -30px rgb(10 20 60 / 0.45); }
.shot img { display: block; width: 100%; height: auto; }
.hero-shot { max-width: 1100px; margin: 56px auto 0; }
.band { background: var(--surface); border-block: 1px solid var(--line); }
.story { max-width: var(--wide); margin: 0 auto 72px; display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: center; }
.story:last-child { margin-bottom: 0; }
.story.flip { grid-template-columns: 7fr 5fr; }
.story.flip .story-text { order: 2; }
.story h3 { font-size: 26px; margin: 0 0 12px; letter-spacing: -0.01em; }
.story p { color: var(--ink-2); font-size: 17px; margin: 0; }
@media (max-width: 900px) { .story, .story.flip { grid-template-columns: 1fr; gap: 24px; } .story.flip .story-text { order: 0; } }
.grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feature { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; }
.feature .icon { font-size: 26px; }
.feature h3 { font-size: 17px; margin: 12px 0 8px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }
.chips-row { max-width: 980px; margin: 0 auto 24px; display: grid; grid-template-columns: 140px 1fr; gap: 16px; align-items: start; }
.chips-row > p { margin: 6px 0 0; font-weight: 600; color: var(--muted); text-transform: uppercase; font-size: 13px; letter-spacing: 0.06em; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips span { padding: 6px 14px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
@media (max-width: 640px) { .chips-row { grid-template-columns: 1fr; } }
.how { background: var(--surface); border-block: 1px solid var(--line); }
.diagram { max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 15px; }
.diagram .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.diagram .node { padding: 14px 20px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg); text-align: center; font-weight: 500; }
.diagram .node small { display: block; font-weight: 400; color: var(--muted); font-size: 13px; }
.diagram .node.accent { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-ink); }
.diagram .arrow, .diagram .link { color: var(--muted); font-size: 20px; }
.start-grid { max-width: var(--wide); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.start-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; }
.start-card h3 { margin: 0 0 6px; }
.start-card > p { color: var(--muted); margin: 0 0 16px; }
.start-card .small { font-size: 14px; margin: 12px 0 0; }
.start-card.lab { background: linear-gradient(160deg, var(--accent-soft), var(--surface)); justify-content: space-between; }
.start-card.lab .button { align-self: flex-start; }
.final { text-align: center; }
.final p { margin-bottom: 28px; }

/* Code */
.code { position: relative; margin: 0 0 20px; }
.code pre { margin: 0; padding: 16px 18px; background: var(--code-bg); color: var(--code-ink); border-radius: 8px; overflow-x: auto; font-size: 14px; line-height: 1.55; }
.code pre code { font-size: inherit; }
.copy { position: absolute; top: 8px; right: 8px; background: rgb(255 255 255 / 0.08); color: #c2c9d6; border: 1px solid rgb(255 255 255 / 0.12); border-radius: 6px; font: 500 12px var(--sans); padding: 3px 9px; cursor: pointer; opacity: 0; transition: opacity .15s; }
.code:hover .copy, .copy:focus-visible { opacity: 1; }
.hljs-comment, .hljs-quote { color: #7f8aa3; }
.hljs-keyword, .hljs-selector-tag, .hljs-literal { color: #c3a6ff; }
.hljs-string, .hljs-attr + .hljs-string, .hljs-addition { color: #9fe0a6; }
.hljs-number, .hljs-built_in, .hljs-type { color: #ffcf86; }
.hljs-attr, .hljs-attribute, .hljs-property, .hljs-variable, .hljs-template-variable { color: #8ec5ff; }
.hljs-title, .hljs-section, .hljs-name { color: #ffa2c0; }
.hljs-meta, .hljs-deletion { color: #ff8a80; }

/* Docs */
.docs { display: grid; grid-template-columns: 280px minmax(0, 1fr) 240px; min-height: calc(100vh - 60px); }
.side { border-right: 1px solid var(--line); background: var(--surface); }
.side-inner { position: sticky; top: 60px; max-height: calc(100vh - 60px); overflow-y: auto; padding: 20px 16px 40px; }
.side-toggle { display: none; }
.version { font-size: 13px; color: var(--muted); margin: 0 8px 16px; }
.side-group > p { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 16px 8px 6px; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li a { display: block; padding: 5px 8px; border-radius: 6px; color: var(--ink-2); font-size: 14px; line-height: 1.4; }
.side li a:hover { background: var(--hover); color: var(--ink); text-decoration: none; }
.side li a[aria-current] { background: var(--accent-soft); color: var(--accent-ink); font-weight: 500; }
.search { position: relative; margin: 0 0 12px; }
.search input { width: 100%; padding: 9px 12px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: 14px var(--sans); }
.results { position: absolute; z-index: 10; left: 0; right: 0; top: 42px; margin: 0; padding: 6px; list-style: none; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 12px 30px -10px rgb(0 0 0 / 0.35); max-height: 60vh; overflow-y: auto; }
.results a { display: block; padding: 8px; border-radius: 6px; color: var(--ink); font-size: 14px; }
.results a span { display: block; color: var(--muted); font-size: 12px; }
.results a:hover, .results a.active { background: var(--hover); text-decoration: none; }
.content { padding: 40px 56px 64px; min-width: 0; }
.prose { max-width: 780px; }
.prose h1 { font-size: 36px; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 24px; }
.prose h2 { font-size: 26px; margin: 48px 0 16px; padding-top: 8px; letter-spacing: -0.01em; }
.prose h3 { font-size: 20px; margin: 36px 0 12px; }
.prose h4 { font-size: 16px; margin: 28px 0 8px; }
.prose h2, .prose h3, .prose h4 { position: relative; }
.prose .anchor { position: absolute; left: -22px; color: var(--muted); opacity: 0; font-weight: 400; }
.prose :is(h2, h3, h4):hover .anchor { opacity: 1; text-decoration: none; }
.prose p, .prose li { color: var(--ink-2); }
.prose li { margin: 4px 0; }
.prose :not(pre) > code { background: var(--subtle); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; color: var(--ink); }
.prose blockquote { margin: 20px 0; padding: 12px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 8px 8px 0; }
.prose blockquote p { margin: 0; }
.table { overflow-x: auto; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 8px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14px; }
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { background: var(--subtle); font-weight: 600; }
.prose tr:last-child td { border-bottom: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-bottom: 24px; }
.card { display: block; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
.card:hover { border-color: var(--accent); text-decoration: none; color: var(--ink); }
.card strong { display: block; margin-bottom: 4px; }
.card span { color: var(--muted); font-size: 14px; }
.pager { max-width: 780px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 56px; }
.pager a { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); font-weight: 500; }
.pager a:hover { border-color: var(--accent); text-decoration: none; }
.pager span { display: block; font-size: 13px; color: var(--muted); font-weight: 400; }
.pager .next { text-align: right; grid-column: 2; }
.edit { max-width: 780px; margin-top: 24px; font-size: 14px; }
.toc { padding: 40px 16px; }
.toc > p { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 8px; }
.toc ul { position: sticky; top: 80px; list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.toc a { display: block; padding: 4px 12px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.toc a:hover, .toc a.active { color: var(--accent); text-decoration: none; }
@media (max-width: 1180px) { .docs { grid-template-columns: 260px minmax(0, 1fr); } .toc { display: none; } }
@media (max-width: 860px) {
  .docs { grid-template-columns: 1fr; }
  .side { border-right: 0; border-bottom: 1px solid var(--line); }
  .side-toggle { display: block; width: 100%; padding: 12px 24px; background: none; border: 0; color: var(--ink); font: 500 15px var(--sans); text-align: left; cursor: pointer; }
  .side-inner { display: none; position: static; max-height: none; }
  .side.open .side-inner { display: block; }
  .content { padding: 24px 20px 48px; }
}

/* Plain pages and footer */
main.plain { max-width: 780px; margin: 0 auto; padding: 80px 24px; min-height: 50vh; }
.foot { border-top: 1px solid var(--line); background: var(--surface); padding: 40px 24px 24px; }
.foot-inner { max-width: var(--wide); margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.foot-inner p { color: var(--muted); font-size: 14px; margin: 10px 0 0; }
.foot-links { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; }
.foot-links a { color: var(--ink-2); }
.foot-note { max-width: var(--wide); margin: 24px auto 0; color: var(--muted); font-size: 13px; }