:root {
  color-scheme: light dark;
  --brand: #6552d9;
  --brand-strong: #4f3fd0;
  --brand-soft: rgba(101, 82, 217, 0.13);
  --bg: #fcfcff;
  --bg-alt: #f4f3f9;
  --text: #242532;
  --muted: #656676;
  --border: #dedde8;
  --code-bg: #f4f3f9;
  --code-text: #292b36;
  --syntax-comment: #57606a;
  --syntax-keyword: #8250df;
  --syntax-string: #116329;
  --syntax-function: #0550ae;
  --syntax-constant: #953800;
  --syntax-variable: #b4232d;
  --header-height: 64px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.7 Inter, ui-sans-serif, system-ui, sans-serif; }
a { color: var(--brand-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

.site-header { position: sticky; top: 0; z-index: 10; height: var(--header-height); border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(12px); }
.header-inner { max-width: 1320px; height: 100%; margin: auto; padding: 0 28px; display: flex; align-items: center; gap: 26px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--text); font-weight: 750; font-size: 18px; }
.brand:hover { text-decoration: none; }
.brand img { width: 30px; height: 30px; }
.top-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.top-nav a, .github-link { color: var(--text); font-size: 14px; font-weight: 600; }
.search input { width: 160px; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; background: var(--bg-alt); color: var(--text); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }

.docs-layout { max-width: 1260px; margin: auto; display: grid; grid-template-columns: 240px minmax(0, 800px); gap: 64px; padding: 46px 28px 80px; }
.sidebar { position: sticky; top: calc(var(--header-height) + 28px); align-self: start; max-height: calc(100vh - var(--header-height) - 48px); overflow: auto; }
.sidebar section { margin-bottom: 24px; }
.sidebar h2 { margin: 0 0 6px; font-size: 13px; letter-spacing: .02em; }
.sidebar a { display: block; padding: 4px 10px; border-left: 2px solid transparent; color: var(--muted); font-size: 14px; }
.sidebar a.active { border-left-color: var(--brand); color: var(--brand); font-weight: 650; }

.doc-content, .home-content { min-width: 0; }
.doc-content h1 { margin: 0 0 24px; font-size: clamp(2rem, 5vw, 2.7rem); line-height: 1.15; letter-spacing: -.035em; }
.doc-content h2, .home-content h2 { margin: 48px 0 16px; line-height: 1.25; letter-spacing: -.02em; }
.doc-content h3 { margin-top: 32px; }
.doc-content p, .home-content p { margin: 16px 0; }
.doc-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }
.doc-content th, .doc-content td { padding: 10px 14px; border: 1px solid var(--border); text-align: left; }
.doc-content code:not(pre code), .home-content code:not(pre code) { padding: .15em .38em; border-radius: 5px; background: var(--brand-soft); font-size: .9em; }
pre { overflow-x: auto; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--code-bg) !important; color: var(--code-text); font-size: 14px; line-height: 1.55; }
pre code { color: inherit; }
pre .z-comment { color: var(--syntax-comment) !important; }
pre .z-keyword, pre .z-storage { color: var(--syntax-keyword) !important; }
pre .z-string, pre .z-quoted, pre .z-regexp { color: var(--syntax-string) !important; }
pre .z-variable { color: var(--syntax-variable) !important; }
pre .z-function, pre .z-entity, pre .z-support, pre .z-property-name, pre .z-attribute-name { color: var(--syntax-function) !important; }
pre .z-constant, pre .z-numeric, pre .z-bool { color: var(--syntax-constant) !important; }
pre .z-punctuation, pre .z-operator, pre .z-bracket { color: var(--code-text) !important; }
.callout { margin: 24px 0; padding: 16px 20px; border-left: 4px solid var(--brand); border-radius: 8px; background: var(--brand-soft); }
.callout.warning { border-left-color: #c78316; background: rgba(199, 131, 22, .13); }
.callout p { margin: 5px 0 0; }

.hero { max-width: 1180px; margin: auto; padding: 92px 28px 70px; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 70px; }
.eyebrow { color: var(--brand); font-weight: 700; }
.hero h1 { margin: 10px 0 22px; font-size: clamp(2.7rem, 6vw, 4.6rem); line-height: 1.03; letter-spacing: -.055em; }
.hero h1 span { color: var(--brand); }
.hero-copy > p:not(.eyebrow) { max-width: 650px; color: var(--muted); font-size: 19px; }
.hero-image { padding: 24px; border-radius: 50%; background: radial-gradient(circle, rgba(101, 82, 217, .2), transparent 68%); }
.hero-actions { display: flex; gap: 12px; margin-top: 30px; }
.button { display: inline-block; padding: 10px 18px; border: 1px solid var(--border); border-radius: 22px; color: var(--text); background: var(--bg-alt); font-weight: 650; }
.button.primary { border-color: var(--brand); color: white; background: var(--brand); }
.demo-button { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); color: var(--brand-strong); }
.button:hover { text-decoration: none; transform: translateY(-1px); }
.home-content { max-width: 820px; margin: 0 auto; padding: 20px 28px 90px; }

.site-footer { border-top: 1px solid var(--border); padding: 28px; color: var(--muted); text-align: center; font-size: 13px; }
.site-footer p { margin: 3px; }

.demo-page { max-width: 1180px; margin: auto; padding: 72px 28px 90px; }
.demo-intro { max-width: 760px; margin-bottom: 42px; }
.demo-intro h1 { margin: 8px 0 16px; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.02; letter-spacing: -.055em; }
.demo-intro h1 span { color: var(--brand); }
.demo-intro > p:last-child { color: var(--muted); font-size: 18px; }
.dashboard-demo { display: grid; grid-template-columns: 300px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; background: var(--bg-alt); box-shadow: 0 20px 60px color-mix(in srgb, var(--brand) 10%, transparent); }
.demo-controls { padding: 28px 22px; border-right: 1px solid var(--border); }
.control-kicker, .dashboard-label, .query-inspector p { margin: 0; color: var(--brand); font-size: 12px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }
.demo-controls h2 { margin: 8px 0 8px; font-size: 20px; line-height: 1.2; }
.demo-controls > p:not(.control-kicker) { min-height: 74px; margin: 0 0 20px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.layer-list { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.layer-list label { display: flex; gap: 10px; align-items: center; padding: 10px 8px; border-radius: 8px; cursor: pointer; }
.layer-list label:hover { background: var(--brand-soft); }
.layer-list input { width: 17px; height: 17px; accent-color: var(--brand); }
.layer-list span { display: grid; line-height: 1.25; }
.layer-list b { font-size: 14px; }.layer-list small { color: var(--muted); font-size: 12px; }
.role-control { margin: 18px 8px 0; }.role-control label { display: block; margin-bottom: 4px; font-size: 12px; color: var(--muted); }.role-control select { width: 100%; padding: 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); }
.reset-demo, .query-inspector button, .pager button, .mutation-actions button { border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; font-weight: 650; cursor: pointer; }.reset-demo { margin: 24px 8px 0; }.pager button:disabled, .mutation-actions button:disabled { opacity: .45; cursor: default; }
.dashboard-workspace { padding: 28px; background: var(--bg); }.dashboard-toolbar, .metric-row, .inspector-heading, .pager { display: flex; align-items: center; justify-content: space-between; gap: 20px; }.dashboard-toolbar h2 { margin: 2px 0 0; font-size: 25px; letter-spacing: -.03em; }.refresh-status { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12px; }.refresh-status span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }.refresh-status span:first-child.is-live { background: #30a46c; box-shadow: 0 0 0 4px rgba(48,164,108,.15); }
.mutation-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 22px; padding: 16px; border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); border-radius: 10px; background: color-mix(in srgb, var(--brand-soft) 55%, var(--bg)); }.mutation-bar p, .mutation-summary p { margin: 0; color: var(--brand); font-size: 11px; font-weight: 750; letter-spacing: .08em; text-transform: uppercase; }.mutation-bar h3 { margin: 2px 0 3px; font-size: 16px; }.mutation-bar > div > span { color: var(--muted); font-size: 12px; }.mutation-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }.mutation-actions button:first-child { border-color: var(--brand); color: white; background: var(--brand); }
.metric-row { margin: 24px 0; justify-content: stretch; }.metric-row div { flex: 1; padding: 13px 15px; border: 1px solid var(--border); border-radius: 9px; }.metric-row span, .metric-row strong { display: block; }.metric-row span { color: var(--muted); font-size: 12px; }.metric-row strong { font-size: 21px; letter-spacing: -.02em; }
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 9px; }.table-wrap table { width: 100%; border-collapse: collapse; font-size: 14px; }.table-wrap th, .table-wrap td { padding: 11px 14px; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }.table-wrap th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }.table-wrap tr:last-child td { border-bottom: 0; }.status { padding: 2px 7px; border-radius: 10px; font-size: 12px; font-weight: 650; }.status.open { background: rgba(47, 132, 255, .14); color: #1769c2; }.status.won { background: rgba(48,164,108,.15); color: #167549; }.status.lost { background: rgba(190,70,70,.14); color: #ad3131; }
.pager { margin-top: 12px; justify-content: flex-end; }.pager[hidden] { display: none; }.pager span { color: var(--muted); font-size: 13px; }.query-inspector { margin-top: 28px; padding: 19px; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: 10px; background: var(--bg-alt); }.inspector-heading h2 { margin: 2px 0 0; font-size: 16px; }
.mutation-summary { margin-top: 18px; padding: 15px 17px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-alt); }.summary-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }.summary-heading h2 { margin: 2px 0 0; font-size: 16px; }.summary-heading > span { border: 1px solid var(--border); border-radius: 12px; padding: 3px 8px; color: var(--muted); background: var(--bg); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 10px; }.summary-details { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 11px 0; color: var(--muted); font-size: 11px; }.summary-details code { border-radius: 5px; padding: 4px 7px; color: var(--code-text); background: var(--code-bg); font-size: 10px; white-space: nowrap; }.materialization-status { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.materialization-status div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 7px; background: var(--bg); font-size: 11px; }.materialization-status span { color: var(--muted); }.materialization-status strong { font-size: 10px; }
.query-tree { margin: 14px 0 10px; overflow-x: auto; }
.tree-list { position: relative; min-width: 390px; margin: 0; padding: 0; list-style: none; }
.tree-list .tree-list { min-width: 0; margin-left: 12px; padding-left: 18px; }
.tree-list .tree-list::before { position: absolute; top: 0; bottom: 17px; left: 0; border-left: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); content: ""; }
.query-tree-node { position: relative; padding-top: 4px; }
.tree-root > .query-tree-node { padding-top: 0; }
.tree-list .tree-list > .query-tree-node::before { position: absolute; top: 17px; left: -18px; width: 18px; border-top: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); content: ""; }
.tree-operation { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; min-height: 30px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); box-shadow: 0 2px 6px color-mix(in srgb, var(--brand) 4%, transparent); }
.query-tree-node.is-root > .tree-operation { border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); box-shadow: 0 3px 10px color-mix(in srgb, var(--brand) 8%, transparent); }
.tree-description { display: flex; min-width: 0; align-items: baseline; gap: 8px; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 12px; }.tree-description strong { color: var(--text); font-size: 12px; }.tree-description span { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.tree-metadata { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; }.tree-site { border-radius: 9px; padding: 1px 6px; background: var(--brand-soft); color: var(--brand-strong); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }.tree-site.catalog { background: rgba(48,164,108,.15); color: #167549; }.tree-site.runtime { background: rgba(231,159,55,.16); color: #9a5b00; }.tree-site.db { background: rgba(47,132,255,.14); color: #1769c2; }.tree-rows { color: var(--muted); font-size: 10px; white-space: nowrap; }
.query-inspector .inspector-note { color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.demo-close { max-width: 680px; margin: 76px auto 0; text-align: center; }.demo-close h2 { font-size: 29px; line-height: 1.2; letter-spacing: -.03em; }.demo-close p { color: var(--muted); }

@media (prefers-color-scheme: dark) {
  :root { --brand: #a899ff; --brand-strong: #b9adff; --brand-soft: rgba(168, 153, 255, .16); --bg: #10121d; --bg-alt: #171a29; --text: #e8e8ef; --muted: #aaaaba; --border: #35394d; --code-bg: #222637; --code-text: #f0f2f8; --syntax-comment: #b5bdc9; --syntax-keyword: #d7b3ff; --syntax-string: #94df9d; --syntax-function: #8bc8ff; --syntax-constant: #ffc078; --syntax-variable: #ff9da3; }
}

@media (max-width: 900px) {
  .top-nav, .github-link { display: none; }
  .search { margin-left: auto; }
  .docs-layout { grid-template-columns: 1fr; gap: 20px; }
  .sidebar { position: static; display: grid; grid-template-columns: repeat(3, 1fr); max-height: none; border-bottom: 1px solid var(--border); }
  .hero { grid-template-columns: 1fr; padding-top: 60px; }
  .hero-image { max-width: 520px; order: -1; }
  .dashboard-demo { grid-template-columns: 1fr; }.demo-controls { border-right: 0; border-bottom: 1px solid var(--border); }.demo-controls > p:not(.control-kicker) { min-height: 0; }.layer-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.mutation-bar { align-items: flex-start; flex-direction: column; }.mutation-actions { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .header-inner { padding: 0 16px; }
  .search input { width: 125px; }
  .docs-layout { padding: 30px 18px 60px; }
  .sidebar { grid-template-columns: 1fr; }
  .hero { padding: 42px 18px; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .home-content { padding-inline: 18px; }
  .demo-page { padding: 42px 18px 60px; }.dashboard-workspace { padding: 18px; }.metric-row { display: grid; grid-template-columns: 1fr 1fr; }.metric-row div:last-child { grid-column: span 2; }.layer-list { grid-template-columns: 1fr; }.inspector-heading { align-items: flex-start; }.dashboard-toolbar { align-items: flex-start; flex-direction: column; gap: 8px; }.tree-list { min-width: 350px; }.tree-list .tree-list { margin-left: 8px; padding-left: 14px; }.tree-list .tree-list > .query-tree-node::before { left: -14px; width: 14px; }.tree-operation { gap: 8px; }.tree-metadata { gap: 5px; }.materialization-status { grid-template-columns: 1fr; }.summary-details { align-items: flex-start; flex-direction: column; }.mutation-actions { display: grid; width: 100%; }.mutation-actions button { width: 100%; }
}