:root {
  color-scheme: dark;
  --bg: #0a0b0e;
  --surface: #131519;
  --surface-2: #1a1d23;
  --border: #262a33;
  --border-soft: #1e222a;
  --text: #e7e9ee;
  --muted: #99a1ae;
  --faint: #6b7280;
  --accent: #8b7cff;
  --accent-2: #34d399;
  --red: #f87171;
  --amber: #fbbf24;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", Menlo, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  --maxw: 1080px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
::selection { background: rgba(139, 124, 255, 0.3); }

/* custom scrollbars — thin, subtle, on-brand; applied site-wide and to every
   inner overflow container (code blocks, playground, tab strips). */
* { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border); border-radius: 8px;
  border: 2px solid transparent; background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* subtle top glow */
body::before {
  content: "";
  position: fixed;
  top: -40%; left: 50%; transform: translateX(-50%);
  width: 1000px; height: 700px;
  background: radial-gradient(ellipse at center, rgba(139,124,255,0.10), transparent 60%);
  pointer-events: none; z-index: 0;
}

/* nav */
nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10, 11, 14, 0.72);
  border-bottom: 1px solid var(--border-soft);
}
nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 60px; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 650; letter-spacing: -0.01em; }
.brand .shield { font-size: 18px; }
.nav-links { display: flex; align-items: center; gap: 26px; }
.nav-links a { color: var(--muted); font-size: 14.5px; transition: color .15s; }
.nav-links a:hover { color: var(--text); }
.nav-cta {
  padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text) !important; font-size: 14px;
}
.nav-cta:hover { border-color: var(--accent); }

/* hero */
section { position: relative; z-index: 1; }
.hero { padding: 96px 0 72px; text-align: center; }
.eyebrow {
  display: inline-block; font-family: var(--mono); font-size: 12.5px;
  color: var(--accent); border: 1px solid rgba(139,124,255,0.28);
  background: rgba(139,124,255,0.07); border-radius: 100px; padding: 5px 13px; margin-bottom: 26px;
}
h1 {
  font-size: clamp(38px, 6vw, 62px); line-height: 1.04; letter-spacing: -0.03em;
  font-weight: 720; margin-bottom: 22px;
}
h1 .grad {
  background: linear-gradient(120deg, #b9afff, #8b7cff 60%, #34d399);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lead { font-size: clamp(17px, 2.3vw, 20px); color: var(--muted); max-width: 640px; margin: 0 auto 34px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 550;
  padding: 12px 22px; border-radius: 10px; transition: all .15s; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #0a0b0e; }
.btn-primary:hover { background: #9d90ff; transform: translateY(-1px); }
.btn-ghost { background: var(--surface); border-color: var(--border); color: var(--text); }
.btn-ghost:hover { border-color: var(--muted); }

/* copy command */
.cmd {
  display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono); font-size: 14.5px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 11px 11px 11px 18px; margin: 30px auto 0; color: var(--text);
}
.cmd .dollar { color: var(--faint); }
.cmd button {
  font-family: var(--sans); font-size: 12px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 7px; padding: 5px 10px; cursor: pointer; transition: all .15s;
}
.cmd button:hover { color: var(--text); border-color: var(--accent); }

/* section heading */
.sec { padding: 64px 0; }
.sec-head { text-align: center; max-width: 660px; margin: 0 auto 44px; }
.sec-head .kicker { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-bottom: 12px; }
.sec-head h2 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.02em; font-weight: 680; margin-bottom: 14px; }
.sec-head p { color: var(--muted); font-size: 16.5px; }

/* problem strip */
.problem { text-align: center; border-top: 1px solid var(--border-soft); border-bottom: 1px solid var(--border-soft); background: var(--surface); }
.problem h2 { font-size: clamp(24px, 3.6vw, 34px); letter-spacing: -0.02em; max-width: 720px; margin: 0 auto 16px; font-weight: 640; }
.problem h2 em { color: var(--accent); font-style: normal; }
.problem p { color: var(--muted); max-width: 620px; margin: 0 auto; font-size: 16.5px; }

/* code cards */
.showcase { display: grid; gap: 26px; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
}
.card-split { display: grid; grid-template-columns: 1fr 1.35fr; align-items: stretch; }
.card-copy { padding: 34px 34px; display: flex; flex-direction: column; justify-content: center; }
.card-copy .tag { font-family: var(--mono); font-size: 12.5px; color: var(--accent-2); margin-bottom: 12px; }
.card-copy h3 { font-size: 23px; letter-spacing: -0.01em; margin-bottom: 12px; font-weight: 640; }
.card-copy p { color: var(--muted); font-size: 15.5px; }
.card-copy p + p { margin-top: 12px; }

.code {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.7; padding: 22px 24px;
  background: #0c0e12; border-left: 1px solid var(--border); overflow-x: auto; color: #cfd3db;
  white-space: pre; tab-size: 2;
}
.card-split .code { border-left: 1px solid var(--border); border-top: none; }
.code .k { color: #c4b5fd; }      /* keyword */
.code .s { color: #86efac; }      /* string */
.code .t { color: #7dd3fc; }      /* type */
.code .fn { color: #93c5fd; }     /* fn */
.code .n { color: #fbbf24; }      /* number */
.code .c { color: #5b6472; font-style: italic; } /* comment */
.code .err { color: var(--red); }
.code .ok { color: var(--accent-2); }
.code .mut { color: var(--faint); }
.code .hl { background: rgba(248,113,113,0.10); display: inline-block; width: 100%; }

/* TypeScript framework variant card (tabbed: Client / Next.js / Svelte) */
.ts-card { display: block; }
.ts-head { padding: 34px 34px 22px; }
.ts-head .tag { font-family: var(--mono); font-size: 12.5px; color: var(--accent-2); margin-bottom: 12px; }
.ts-head h3 { font-size: 23px; letter-spacing: -0.01em; margin-bottom: 12px; font-weight: 640; }
.ts-head p { color: var(--muted); font-size: 15.5px; max-width: 720px; }
.ts-tablist {
  display: flex; gap: 4px; padding: 0 24px; border-bottom: 1px solid var(--border-soft);
  background: #0f1116; overflow-x: auto;
}
.ts-tab {
  font-family: var(--mono); font-size: 13px; color: var(--muted); background: transparent;
  border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 12px 14px;
  cursor: pointer; white-space: nowrap; transition: color .15s, border-color .15s; margin-bottom: -1px;
}
.ts-tab:hover { color: var(--text); }
.ts-tab.active { color: var(--text); border-bottom-color: var(--accent); }
.ts-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 4px; }
.ts-panel .code { border-left: none; border-top: none; }
.ts-panel[hidden] { display: none; }

/* agent section */
.agent { border: 1px solid rgba(139,124,255,0.28); border-radius: 16px; background: linear-gradient(180deg, rgba(139,124,255,0.06), rgba(139,124,255,0.02)); padding: 40px; }
.agent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: center; }
.prompt-box {
  background: #0c0e12; border: 1px solid var(--border); border-radius: 12px; padding: 18px 20px;
  font-family: var(--mono); font-size: 13px; line-height: 1.65; color: #cbd0d9; position: relative;
}
.prompt-box .copy-prompt {
  position: absolute; top: 12px; right: 12px; font-family: var(--sans); font-size: 12px;
  color: var(--muted); background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 7px; padding: 5px 10px; cursor: pointer;
}
.prompt-box .copy-prompt:hover { color: var(--text); border-color: var(--accent); }
.agent h3 { font-size: 25px; letter-spacing: -0.02em; margin-bottom: 14px; }
.agent ul { list-style: none; margin-top: 18px; display: grid; gap: 11px; }
.agent li { color: var(--muted); font-size: 15px; padding-left: 26px; position: relative; }
.agent li::before { content: "→"; position: absolute; left: 0; color: var(--accent); }

/* features */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.feat {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px;
  transition: border-color .15s, transform .15s;
}
.feat:hover { border-color: rgba(139,124,255,0.4); transform: translateY(-2px); }
.feat .ico { font-size: 20px; margin-bottom: 12px; }
.feat h4 { font-size: 16.5px; margin-bottom: 7px; letter-spacing: -0.01em; }
.feat p { color: var(--muted); font-size: 14px; line-height: 1.55; }

/* install — brand/package link row */
.pkg-links { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 20px; }
.pkg-btn {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); transition: border-color .15s, transform .15s, background .15s;
}
.pkg-btn:hover { transform: translateY(-2px); }
.pkg-btn svg { width: 24px; height: 24px; flex: none; }
.pkg-btn span { display: flex; flex-direction: column; font-size: 14px; font-weight: 600; line-height: 1.25; min-width: 0; }
.pkg-btn em { font-style: normal; font-family: var(--mono); font-size: 11px; font-weight: 400; color: var(--faint); margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pkg-btn.npm svg { color: #cb3837; }        .pkg-btn.npm:hover { border-color: #cb3837; }
.pkg-btn.crates svg { color: #dea584; }      .pkg-btn.crates:hover { border-color: #dea584; }
.pkg-btn.docs svg { color: var(--accent-2); } .pkg-btn.docs:hover { border-color: var(--accent-2); }
.pkg-btn.gh svg { color: var(--text); }      .pkg-btn.gh:hover { border-color: var(--muted); }

/* install — published crate chips */
.crate-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.crate {
  display: flex; flex-direction: column; gap: 1px; padding: 9px 12px;
  border: 1px solid var(--border-soft); border-radius: 8px; background: var(--surface-2);
  transition: border-color .15s;
}
.crate:hover { border-color: var(--accent); }
.crate code { font-family: var(--mono); font-size: 12.5px; color: var(--accent); }
.crate span { font-size: 11px; color: var(--faint); }
.crate.solo { flex-direction: row; align-items: center; gap: 10px; grid-column: 1 / -1; }
.crate.solo svg { width: 18px; height: 18px; flex: none; color: var(--text); }
.crate.solo code { color: var(--text); }
.crate.gh-link span { margin-left: auto; }

/* install grid */
.install-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.install-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 22px 24px; }
.install-card .label { font-size: 13px; color: var(--muted); margin-bottom: 12px; display: flex; justify-content: space-between; align-items: center; }
.install-card .label .pill { font-family: var(--mono); font-size: 11px; color: var(--accent); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.install-card pre { font-family: var(--mono); font-size: 13.5px; color: var(--text); overflow-x: auto; }
.install-card pre .mut { color: var(--faint); }

/* terminal-styled command blocks in the install section */
.install-card .label { margin-bottom: 14px; }
.term {
  border: 1px solid var(--border-soft); border-radius: 8px; background: #0b0d11;
  overflow: hidden; font-family: var(--mono); font-size: 13px;
}
.term-head {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-bottom: 1px solid var(--border-soft); background: #0f1116;
}
.term-head .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); }
.term-head .term-title { margin-left: 6px; font-size: 11px; color: var(--faint); letter-spacing: .02em; }
.term-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; overflow-x: auto; }
.term-line { display: flex; align-items: baseline; gap: 10px; line-height: 1.75; }
.term-line.comment { color: var(--faint); }
.term-line .prompt { color: var(--accent-2); flex: none; user-select: none; }
.term-line code { flex: 1; min-width: 0; color: var(--text); font-family: var(--mono); white-space: pre; }
.term-line .term-copy {
  flex: none; font-family: var(--sans); font-size: 11px; color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 3px 9px; cursor: pointer; opacity: 0; transition: opacity .15s, color .15s, border-color .15s;
}
.term-line:hover .term-copy, .term-copy:focus-visible { opacity: 1; }
.term-copy:hover { color: var(--text); border-color: var(--accent); }
@media (hover: none) { .term-line .term-copy { opacity: 1; } }

/* faq */
.faq { display: grid; gap: 12px; max-width: 760px; margin: 0 auto; }
details.q { background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 4px 20px; }
details.q summary { cursor: pointer; padding: 16px 0; font-size: 16px; font-weight: 550; list-style: none; display: flex; justify-content: space-between; align-items: center; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary::after { content: "+"; color: var(--accent); font-size: 20px; }
details.q[open] summary::after { content: "−"; }
details.q p { color: var(--muted); font-size: 15px; padding: 0 0 18px; }
details.q p code, .card-copy code, .agent code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); padding: 2px 6px; border-radius: 5px; color: var(--text); }

/* footer */
footer { border-top: 1px solid var(--border-soft); padding: 44px 0; margin-top: 40px; }
footer .wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }
footer .cols { display: flex; gap: 30px; flex-wrap: wrap; }
footer a { color: var(--muted); font-size: 14px; }
footer a:hover { color: var(--text); }
footer .tiny { color: var(--faint); font-size: 13px; }

@media (max-width: 820px) {
  .card-split, .agent-grid, .feat-grid, .install-grid { grid-template-columns: 1fr; }
  .card-split .code { border-left: none; border-top: 1px solid var(--border); }
  .hero { padding: 64px 0 48px; }
  .nav-links a:not(.nav-cta) { display: none; }
}

/* ============================================================
   Modern layer — icons, motion, gradients, AI menu, playground
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
}

/* animated aurora behind the hero */
.hero { overflow: hidden; }
.aurora { position: absolute; inset: -30% -10% auto -10%; height: 620px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: .55; }
.aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; animation: drift 16s ease-in-out infinite; }
.aurora span:nth-child(1){ width: 440px; height: 440px; left: 12%; top: 0; background: radial-gradient(circle, #7c6cff, transparent 65%); }
.aurora span:nth-child(2){ width: 380px; height: 380px; right: 14%; top: 40px; background: radial-gradient(circle, #34d399, transparent 65%); animation-delay: -5s; }
.aurora span:nth-child(3){ width: 320px; height: 320px; left: 42%; top: 120px; background: radial-gradient(circle, #22a6ff, transparent 65%); animation-delay: -9s; }
@keyframes drift { 0%,100%{ transform: translate(0,0) scale(1);} 33%{ transform: translate(40px,30px) scale(1.08);} 66%{ transform: translate(-30px,10px) scale(.95);} }
@media (prefers-reduced-motion: reduce) { .aurora span { animation: none; } }

h1 .grad { background-size: 200% auto; animation: shimmer 6s linear infinite; }
@keyframes shimmer { to { background-position: 200% center; } }

/* dotted grid texture on alternating sections */
.grid-bg { position: relative; }
.grid-bg::before {
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 22px 22px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* SVG icon system */
svg.i { width: 1em; height: 1em; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; display: inline-block; vertical-align: -0.14em; }
.brand .mark { width: 26px; height: 26px; }
.brand .mark svg { width: 100%; height: 100%; }
.feat .ico {
  width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; margin-bottom: 16px;
  background: linear-gradient(160deg, rgba(139,124,255,0.16), rgba(52,211,153,0.10));
  border: 1px solid rgba(139,124,255,0.22); color: #b9afff;
}
.feat .ico svg.i { width: 21px; height: 21px; }

/* gradient hairline on cards */
.card, .agent, .feat, .install-card, details.q { position: relative; }
.card::after, .agent::after {
  content:""; position:absolute; inset:0; border-radius: inherit; padding:1px; pointer-events:none;
  background: linear-gradient(120deg, rgba(139,124,255,0.35), transparent 40%, transparent 60%, rgba(52,211,153,0.22));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity:.5;
}

/* nav: For-AI menu */
.ai { position: relative; }
.ai-btn {
  display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--text);
  background: linear-gradient(180deg, rgba(139,124,255,0.16), rgba(139,124,255,0.06));
  border: 1px solid rgba(139,124,255,0.32); border-radius: 8px; padding: 7px 12px; cursor: pointer;
}
.ai-btn:hover { border-color: var(--accent); }
.ai-btn svg.i { width: 15px; height: 15px; color: var(--accent); }
.ai-menu {
  position: absolute; right: 0; top: calc(100% + 8px); width: 268px; z-index: 60;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 7px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: all .16s ease;
}
.ai.open .ai-menu { opacity: 1; visibility: visible; transform: none; }
.ai-menu a, .ai-menu button {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; font-family: var(--sans);
  font-size: 13.5px; color: var(--text); background: none; border: none; border-radius: 8px;
  padding: 10px 11px; cursor: pointer;
}
.ai-menu a:hover, .ai-menu button:hover { background: var(--surface); }
.ai-menu .mi-sub { display: block; font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.ai-menu svg.i { width: 16px; height: 16px; color: var(--muted); flex: none; }
.ai-menu .sep { height: 1px; background: var(--border-soft); margin: 5px 4px; }

/* interactive playground / demo */
.demo { border: 1px solid var(--border); border-radius: 16px; overflow: hidden; background: var(--surface); }
.demo-tabs { display: flex; gap: 4px; padding: 12px 14px; border-bottom: 1px solid var(--border-soft); background: #0f1116; overflow-x: auto; }
.demo-tab {
  font-family: var(--mono); font-size: 12.5px; color: var(--muted); background: transparent;
  border: 1px solid transparent; border-radius: 8px; padding: 7px 13px; cursor: pointer; white-space: nowrap; transition: all .15s;
}
.demo-tab:hover { color: var(--text); }
.demo-tab.active { color: var(--text); background: var(--surface-2); border-color: var(--border); }
/* `minmax(0, …)`, not a bare fraction: an `auto` minimum is the content's
   min-content width, and the type region under the query holds a one-line
   `nowrap` echo of the statement. Left to itself that echo would widen the
   input column and squeeze the diagnostics out of the panel. */
.demo-body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); min-height: 260px; }
.demo-editor { padding: 20px 22px; border-right: 1px solid var(--border-soft); background: #0c0e12; }
.demo-editor .schema { font-family: var(--mono); font-size: 12px; color: #5b6472; line-height: 1.6; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.demo-editor .qline { font-family: var(--mono); font-size: 15px; line-height: 1.9; color: #d6dae2; }
.demo-editor .squig { border-bottom: 2px wavy var(--red); padding-bottom: 1px; animation: squig .4s ease both; }
.demo-editor .squig.warn { border-color: var(--amber); }
@keyframes squig { from { background: rgba(248,113,113,0.18);} to { background: transparent;} }
.demo-out { padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; }
.demo-out .muted-h { font-family: var(--mono); font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: .08em; }
/* playground diagnostics — a real editor "problems" panel, not chips:
   colored severity gutter + glyph, a subtle mono code badge, and a message
   with backtick field/table names rendered as colored code spans.
   `.diag-list` is the same component addressed by class, so /playground/ can
   render the site's problems panel instead of growing a second one. */
#demoDiag, .diag-list { display: flex; flex-direction: column; gap: 8px; }
.diag {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--border); border-left-width: 3px; border-radius: 8px;
  padding: 11px 13px; background: var(--surface-2); animation: rise .35s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px);} to { opacity:1; transform:none;} }
.diag.error { border-left-color: var(--red); }
.diag.warning { border-left-color: var(--amber); }
.diag.hint { border-left-color: var(--accent-2); }
.diag-icon {
  flex: none; width: 18px; height: 18px; margin-top: 1px; border-radius: 5px;
  display: grid; place-items: center; font-family: var(--mono);
  font-size: 12px; font-weight: 700; line-height: 1;
}
.diag.error .diag-icon { color: var(--red); background: rgba(248,113,113,0.13); }
.diag.warning .diag-icon { color: var(--amber); background: rgba(251,191,36,0.13); }
.diag.hint .diag-icon { color: var(--accent-2); background: rgba(52,211,153,0.13); }
.diag-body { min-width: 0; flex: 1; }
.diag-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.diag .code {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; line-height: 1.4;
  background: var(--surface); border: 1px solid var(--border); border-radius: 5px;
  padding: 1px 7px; white-space: nowrap; overflow: visible;
}
.diag.error .code { color: var(--red); }
.diag.warning .code { color: var(--amber); }
.diag.hint .code { color: var(--accent-2); }
.diag .sev { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); }
/* which pane a finding landed in — only shown for the schema pane, since the
   query pane is the default place to look */
.diag-pane { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--faint); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.diag[role="button"] { cursor: pointer; }
.diag[role="button"]:hover, .diag[role="button"]:focus-visible { background: var(--surface-2); border-radius: 7px; outline: none; }
.diag .msg { font-size: 13.5px; line-height: 1.5; color: var(--text); word-break: break-word; }
.diag .msg code { font-family: var(--mono); font-size: 0.92em; color: #e7c3ff; background: var(--surface); border-radius: 4px; padding: 1px 5px; }
.demo-out .pass, .pg-ok { color: var(--accent-2); font-size: 14px; display: flex; gap: 9px; align-items: center; padding: 4px 2px; }
.pg-ok svg.i { width: 17px; height: 17px; flex: none; }

@media (max-width: 820px) { .demo-body { grid-template-columns: minmax(0, 1fr); } .demo-editor { border-right: none; border-bottom: 1px solid var(--border-soft); } .ai-menu { width: 240px; } }

/* real playground: editable inputs */
.demo-inputs { padding: 18px 20px; border-right: 1px solid var(--border-soft); background: #0c0e12; display: flex; flex-direction: column; gap: 8px; }
.io-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--faint); }
.code-input {
  width: 100%; resize: vertical; font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
  color: #d6dae2; background: #0a0c10; border: 1px solid var(--border); border-radius: 9px;
  padding: 11px 13px; outline: none; transition: border-color .15s; tab-size: 2;
}
.code-input:focus { border-color: rgba(139,124,255,0.55); }
.code-input.schema-in { min-height: 208px; }
.code-input.query-in { min-height: 132px; }
.demo-status { margin-left: auto; font-family: var(--mono); font-size: 11.5px; color: var(--faint); align-self: center; }
.live-dot { color: var(--accent-2); }
.live-dot::before { content: "● "; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .35; } }
.demo-preset { font-family: var(--mono); font-size: 12px; color: var(--muted); background: transparent; border: 1px solid var(--border); border-radius: 7px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.demo-preset:hover { color: var(--text); border-color: var(--accent); }
@media (max-width: 820px) { .demo-inputs { border-right: none; border-bottom: 1px solid var(--border-soft); } }

/* ============================================================
   Restraint pass — strip the generic gradient look, flatten.
   ============================================================ */
.aurora { display: none !important; }
body::before { display: none; }

/* solid emphasis instead of gradient text */
h1 .grad {
  background: none; -webkit-background-clip: initial; background-clip: initial;
  -webkit-text-fill-color: currentColor; color: var(--accent); animation: none;
}

/* drop the gradient hairline borders on cards */
.card::after, .agent::after { display: none !important; }

/* flat surfaces, sharp borders */
.agent { background: var(--surface); }
.feat .ico {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--accent);
}
.eyebrow { background: transparent; }
.ai-btn { background: var(--surface); }
.ai-btn:hover { background: var(--surface-2); }

/* sharper corners read more "engineered", less soft/generic */
.card, .demo, .agent, .feat, .install-card, details.q, .code-input, .cmd { border-radius: 8px; }
.feat .ico { border-radius: 7px; }

/* ============================================================
   Live Guard hero + shared SurrealQL syntax highlighter
   ============================================================ */

/* shared token palette — mirrors the static .code colors, reused by the
   playground overlay (.sg-hl-pre) and the hero (.guard-code) */
.sg-hl-pre .k, .guard-code .k { color: #c4b5fd; }   /* keyword */
.sg-hl-pre .s, .guard-code .s { color: #86efac; }   /* string  */
.sg-hl-pre .t, .guard-code .t { color: #7dd3fc; }   /* type    */
.sg-hl-pre .fn, .guard-code .fn { color: #93c5fd; } /* fn call */
.sg-hl-pre .n, .guard-code .n { color: #fbbf24; }   /* number  */
.sg-hl-pre .c, .guard-code .c { color: #5b6472; font-style: italic; } /* comment */
.sg-hl-pre .p, .guard-code .p { color: #f0abfc; }   /* $param  */
.sg-hl-pre .r, .guard-code .r { color: #5eead4; }   /* record:id */

/* --- playground overlay: a highlighted <pre> exactly behind the textarea --- */
.sg-editor { position: relative; width: 100%; }
.sg-editor > .code-input,
.sg-editor > .sg-hl-pre {
  font-family: var(--mono); font-size: 13.5px; line-height: 1.65;
  padding: 11px 13px; border: 1px solid var(--border); border-radius: 8px;
  box-sizing: border-box; tab-size: 2; margin: 0;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: break-word;
}
.sg-editor > .sg-hl-pre {
  position: absolute; inset: 0; z-index: 1; overflow: hidden;
  border-color: transparent; background: #0a0c10; color: #d6dae2;
  pointer-events: none;
}
.sg-editor > .sg-hl-pre code { font: inherit; color: inherit; }
.sg-editor > .code-input {
  position: relative; z-index: 2; background: transparent;
  color: transparent; -webkit-text-fill-color: transparent; caret-color: #d6dae2;
  /* `block`, not the default inline-block: an inline textarea sits on a text
     baseline, so the wrapper came out ~8px taller than it and the mirror —
     stretched to the wrapper by `inset: 0` — painted a sliver of editor
     background below the textarea's own rounded border. */
  display: block;
}
.sg-editor > .code-input::selection { background: rgba(139,124,255,0.35); }

/* --- layer three: the statement-number badges -------------------------
   Absolutely positioned over the wrapper from live client rects, never
   inside the mirror: the mirror has to hold exactly the textarea's own
   characters or the caret stops lining up with what is drawn. The badges
   and the type region they point at are styled in
   /playground/types-panel.css, shared with the standalone playground. */

/* --- the hero "live Guard" panel --- */
.guard {
  margin: 40px auto 0; max-width: 720px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; overflow: hidden;
}
.guard-top {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border-bottom: 1px solid var(--border-soft); background: #0f1116;
  font-family: var(--mono); font-size: 11.5px;
}
.guard-badge { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); }
.guard-badge svg { width: 14px; height: 14px; }
.guard-schema { color: var(--faint); }
.guard-state { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; color: var(--faint); }
.guard-state::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.guard-state.booting::before { background: var(--amber); animation: pulse 1.4s ease-in-out infinite; }
.guard-state.analyzing::before { background: var(--accent); animation: pulse .9s ease-in-out infinite; }
.guard-state.accepted { color: var(--accent-2); } .guard-state.accepted::before { background: var(--accent-2); }
.guard-state.rejected { color: var(--red); } .guard-state.rejected::before { background: var(--red); }
.guard-state.warning { color: var(--amber); } .guard-state.warning::before { background: var(--amber); }
/* A hint is neither an acceptance nor a rejection, and saying either overstates
   what the engine found. */
.guard-state.hint { color: var(--accent-2); } .guard-state.hint::before { background: var(--accent-2); }

.guard-stage { position: relative; padding: 20px 20px 16px; min-height: 128px; }
.guard-code {
  font-family: var(--mono); font-size: 15px; line-height: 1.7; color: #d6dae2;
  white-space: pre-wrap; word-break: break-word; margin: 0; min-height: 26px;
}
.guard-caret {
  display: inline-block; width: 2px; height: 1.05em; background: var(--accent);
  vertical-align: -0.16em; margin-left: 1px; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.squiggle { text-decoration: underline; text-decoration-style: wavy; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.squiggle.err { text-decoration-color: var(--red); }
.squiggle.warn { text-decoration-color: var(--amber); }
.squiggle.hint { text-decoration-color: var(--accent-2); }

/* --- hover tooltip for a squiggle -------------------------------------
   The highlight overlay is pointer-events:none (it must be, or it would
   swallow clicks meant for the textarea), so hover is hit-tested against
   the squiggle's client rects and this tip is positioned in viewport
   coordinates. */
.sg-tip {
  position: fixed; z-index: 999; max-width: min(460px, calc(100vw - 24px));
  background: #12141a; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 11px; box-shadow: 0 10px 30px rgba(0,0,0,.55);
  font-size: 12.5px; line-height: 1.5; color: var(--text); pointer-events: none;
}
.sg-tip[hidden] { display: none; }
.sg-tip-row { display: flex; gap: 9px; align-items: baseline; }
.sg-tip-row + .sg-tip-row { margin-top: 7px; padding-top: 7px; border-top: 1px solid var(--border-soft); }
.sg-tip-code { font-family: var(--mono); font-size: 11.5px; font-weight: 700; flex: none; }
.sg-tip-code.err { color: var(--red); }
.sg-tip-code.warn { color: var(--amber); }
.sg-tip-code.hint { color: var(--accent-2); }
.sg-tip-msg code { font-family: var(--mono); font-size: 0.92em; color: #e7c3ff; }

.guard-diag { position: relative; margin-top: 15px; min-height: 18px; }
.guard-diag::before {
  content: ""; position: absolute; top: -9px; left: var(--x, 0); width: 8px; height: 8px;
  border-left: 1.5px solid var(--dc, var(--red)); border-top: 1.5px solid var(--dc, var(--red));
  transform: translateX(-4px) rotate(45deg); opacity: .75;
}
.guard-diag.ok::before { display: none; }
.gd { font-family: var(--mono); }
.gd-row { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.gd-code { font-size: 12px; font-weight: 600; }
.gd.error .gd-code { color: var(--red); }
.gd.warning .gd-code { color: var(--amber); }
.gd.hint .gd-code { color: var(--accent-2); }
.gd-msg { font-size: 13px; color: var(--text); }
.gd-msg code { color: #e7c3ff; font-family: var(--mono); }
.gd .more { font-size: 11px; color: var(--faint); }
.gd-help {
  max-height: 0; overflow: hidden; opacity: 0; font-size: 12.5px; color: var(--muted);
  transition: max-height .3s ease, opacity .3s ease, margin-top .3s ease;
}
.gd-help::before { content: "help: "; color: var(--accent); }
.guard.expanded .gd-help { max-height: 96px; opacity: 1; margin-top: 8px; }
.guard-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-2); font-family: var(--mono); font-size: 13px; }
.guard-ok svg { width: 16px; height: 16px; }

.guard-dots { display: flex; gap: 6px; padding: 0 20px 12px; }
.guard-dots i { width: 15px; height: 3px; border-radius: 2px; background: var(--border); cursor: pointer; transition: background .2s, width .2s; }
.guard-dots i:hover { background: var(--faint); }
.guard-dots i.on { background: var(--accent); width: 22px; }
.guard-hint { padding: 0 20px 14px; font-family: var(--mono); font-size: 11px; color: var(--faint); }
.guard.expanded .guard-hint::after { content: "  — frozen on hover"; color: var(--accent); }

/* static fallback (reduced-motion / small screens): stacked, all help shown */
.guard.static .guard-stage { min-height: 0; padding: 6px 20px 10px; }
.guard.static .guard-item { padding: 14px 0; border-top: 1px solid var(--border-soft); }
.guard.static .guard-item:first-child { border-top: none; }
.guard.static .guard-item .guard-code { font-size: 13.5px; }
.guard.static .gd-help { max-height: 120px; opacity: 1; margin-top: 8px; }
.guard.static .guard-diag::before { display: none; }
.guard.static .guard-dots, .guard.static .guard-hint, .guard.static .guard-caret { display: none; }

@media (prefers-reduced-motion: reduce) { .guard-caret { animation: none; } }
@media (max-width: 640px) {
  .guard { max-width: 100%; }
  .guard-code { font-size: 13.5px; }
  .guard-schema { display: none; }
  .guard-diag::before { display: none; }
}

/* pkg-links responsive */
@media (max-width: 820px) { .pkg-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .pkg-links { grid-template-columns: 1fr; } .crate-list { grid-template-columns: 1fr; } }

/* ============================================================
   Light theme — auto by system preference. Editor/terminal/code
   surfaces stay dark on purpose (an intentional "engineered"
   look); only the page chrome flips. Overrides the design tokens
   plus the few hardcoded chrome backgrounds that need it.
   ============================================================ */
/* Dark-only: the engineered look depends on the dark surfaces, and most
   panels (editor, terminal, code) are intentionally hardcoded dark. A light
   flip left those inconsistent, so the site renders dark regardless of the
   system theme (see `color-scheme: dark` on :root). */