:root {
  --mist: #eaefef;
  --paper: #f6f8f8;
  --sage: #b8cfce;
  --sage-deep: #4f7472;
  --slate: #7f8caa;
  --ink: #333446;
  --muted: #5b6178;
  --danger: #a33a3a;
  --line: color-mix(in srgb, var(--ink) 14%, transparent);
  --sans: "Bricolage Grotesque", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --radius: 14px;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --mist: #1d1f2b;
    --paper: #252837;
    --sage: #3c5655;
    --sage-deep: #9cc3c1;
    --slate: #9aa5c2;
    --ink: #e6ebeb;
    --muted: #a8aec2;
    --danger: #ef8b8b;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; margin: 0; }

body {
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  background: var(--mist);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
code, pre { font-family: var(--mono); font-variant-ligatures: none; }

:focus-visible { outline: 2px solid var(--sage-deep); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font: 600 1rem var(--sans);
  padding: .7em 1.2em;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  background: var(--ink);
  color: var(--mist);
  text-decoration: none;
  cursor: pointer;
}
.btn:hover { background: var(--sage-deep); border-color: var(--sage-deep); }
.btn:disabled { opacity: .5; cursor: progress; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink); }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem clamp(1rem, 4vw, 3rem);
}
.brand { font-weight: 700; font-size: 1.2rem; text-decoration: none; letter-spacing: -.01em; }
.brand span { color: var(--slate); }
.topbar nav { display: flex; align-items: center; gap: 1.25rem; }
.topbar nav a:not(.btn) { text-decoration: none; color: var(--muted); }
.topbar nav a:not(.btn):hover { color: var(--ink); }

/* ---------- Landing ---------- */

.landing main { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }

/* Ambient aurora: two slow-drifting blurred blobs behind everything, plus fine grain. */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before {
  inset: -20vmax;
  background:
    radial-gradient(40vmax 30vmax at 75% 20%, color-mix(in srgb, var(--sage) 70%, transparent), transparent 70%),
    radial-gradient(35vmax 28vmax at 15% 85%, color-mix(in srgb, var(--slate) 35%, transparent), transparent 70%);
  filter: blur(40px);
  animation: drift 26s ease-in-out infinite alternate;
}
body::after {
  inset: 0;
  opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift { to { transform: translate3d(-6vmax, 4vmax, 0) rotate(8deg); } }

.hero {
  padding: clamp(3rem, 8vw, 6rem) 0 4rem;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 2rem;
}
.hero h1 span { display: inline-block; animation: rise .8s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 span:nth-child(2) { animation-delay: .12s; }
.hero h1 span:nth-child(3) { animation-delay: .24s; }
.hero-copy > :not(h1) { animation: rise .8s .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.5em); } }

.switchboard { width: 100%; height: auto; overflow: visible; animation: fade 1.2s .5s both; }
@keyframes fade { from { opacity: 0; } }
.switchboard .wire { fill: none; stroke: var(--line); stroke-width: 1.5; transition: stroke .3s; }
.switchboard .wire.active { stroke: var(--sage-deep); stroke-width: 2.5; stroke-dasharray: 5 9; animation: flow .7s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -14; } }
.switchboard .src { fill: var(--ink); }
.switchboard .src-label { fill: var(--mist); font: 600 14px var(--sans); }
.switchboard .node circle { fill: var(--mist); stroke: var(--slate); stroke-width: 1.5; transition: fill .3s, r .3s; }
.switchboard .node text { fill: var(--muted); font: 500 15px var(--sans); transition: fill .3s; }
.switchboard .node.active circle { fill: var(--sage-deep); stroke: var(--sage-deep); r: 9; }
.switchboard .node.active text { fill: var(--ink); font-weight: 700; }

.hero h1 {
  font-size: clamp(2.6rem, 7.5vw, 5.6rem);
  line-height: .98;
  letter-spacing: -.035em;
  font-weight: 700;
  max-width: 13ch;
}
.hero-copy > p { margin-top: 1.5rem; max-width: 34rem; font-size: 1.2rem; color: var(--muted); }

.router {
  margin-top: 2.5rem;
  max-width: 44rem;
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.25rem 1rem;
}
.router label { display: block; font-size: .9rem; color: var(--muted); margin-bottom: .5rem; }
.router input {
  width: 100%;
  font: 500 1.15rem var(--mono);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--sage);
  padding: .4rem 0;
}
.router input:focus { outline: none; border-color: var(--sage-deep); }
.route-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin-top: 1rem; min-height: 1.6em; }
.route-line strong { font-size: 1.35rem; letter-spacing: -.01em; }
.route-line span { color: var(--muted); }
.hero .actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .75rem; }

.section { padding: 4rem 0; border-top: 1.5px solid var(--line); }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -.025em; line-height: 1.1; max-width: 20ch; }
.section > p { margin-top: .75rem; max-width: 38rem; color: var(--muted); }

.agents { width: 100%; margin-top: 2rem; border-collapse: collapse; }
.agents th { text-align: left; font-weight: 500; font-size: .9rem; color: var(--muted); padding: 0 1rem .6rem 0; }
.agents td { padding: .9rem 1rem .9rem 0; border-top: 1px solid var(--line); vertical-align: top; }
.agents td:first-child { white-space: nowrap; }
.agents code { font-size: .95rem; background: var(--sage); padding: .1em .45em; border-radius: 6px; }
.agents td:nth-child(2) { font-weight: 600; white-space: nowrap; }
.agents .example {
  display: block;
  margin-top: .2rem;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: .85rem var(--mono);
  text-align: left;
  cursor: pointer;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}
.agents .example:hover { color: var(--ink); }

.steps { list-style: none; padding: 0; margin-top: 2rem; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1rem; border-top: 3px solid var(--ink); }
.steps li::before { content: counter(step); display: block; font-size: 2.2rem; font-weight: 700; line-height: 1; margin-bottom: .6rem; color: var(--slate); }
.steps h3 { font-size: 1.15rem; margin-bottom: .25rem; }
.steps p { color: var(--muted); }

.site-footer { max-width: 68rem; margin: 0 auto; padding: 2rem clamp(1rem, 4vw, 3rem) 3rem; color: var(--muted); font-size: .95rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }

@media (max-width: 640px) {
  .agents thead { display: none; }
  .agents tr { display: grid; grid-template-columns: auto 1fr; gap: .2rem .75rem; padding: .9rem 0; border-top: 1px solid var(--line); }
  .agents td { border: 0; padding: 0; }
  .agents td:last-child { grid-column: 1 / -1; }
  .topbar nav a:not(.btn) { display: none; }
}
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .switchboard { max-width: 26rem; }
}

/* ---------- Chat ---------- */

.chat-page { height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.chat-page .brand { color: var(--slate); font-size: 1.5rem; font-weight: 600; }
.chat-page .topbar nav a:not(.btn) { color: var(--slate); font: 600 1rem var(--sans); }
.chat-page .topbar nav a:not(.btn):hover { color: var(--ink); }

.workspace {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1rem clamp(1rem, 3vw, 2rem) 0;
}

.thread { overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem 1rem; scrollbar-width: thin; }

.msg {
  max-width: 75%;
  padding: .9rem 1.2rem;
  border-radius: 16px;
  background: var(--sage);
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  box-shadow: 0 1px 3px rgb(0 0 0 / .08);
}
.msg { animation: pop .35s cubic-bezier(.2, .8, .3, 1.2) both; }
.msg.user { align-self: flex-end; border-bottom-right-radius: 0; transform-origin: bottom right; }
.msg.bot { align-self: flex-start; border-bottom-left-radius: 0; font-family: var(--mono); font-size: .95rem; transform-origin: bottom left; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.96); } }
.msg.error { background: transparent; border: 1.5px solid var(--danger); color: var(--danger); box-shadow: none; }
.msg.trace { align-self: flex-start; max-width: 88%; padding: 0 .25rem; background: none; box-shadow: none; font: .8rem var(--mono); color: var(--slate); white-space: normal; }
.msg.trace summary { cursor: pointer; list-style: none; }
.msg.trace summary::-webkit-details-marker { display: none; }
.msg.trace summary::before { content: "▸ "; display: inline-block; transition: transform .2s; }
.msg.trace[open] summary::before { transform: rotate(90deg); }
.msg.trace pre { margin-top: .4rem; padding: .6rem .8rem; border-left: 2px solid var(--sage); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--muted); font-size: .75rem; }
.msg.pending { display: flex; gap: 5px; padding: 1.1rem 1.2rem; font-size: 0; }
.msg.pending::before, .msg.pending::after, .msg.pending span { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage-deep); animation: dot 1s infinite ease-in-out; }
.msg.pending span { animation-delay: .15s; }
.msg.pending::after { animation-delay: .3s; }
@keyframes dot { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.result-body > * { animation: fade .5s both; }

/* Rendered markdown (thread bubbles and output panel) */
.md { white-space: normal; font-family: var(--sans); font-size: 1rem; }
.msg.md { max-width: min(46rem, 88%); }
.md > * + * { margin-top: .6em; }
.md h3, .md h4, .md h5, .md h6 { font-size: 1.05em; line-height: 1.3; }
.md ul, .md ol { padding-left: 1.3em; }
.md code { font: .88em var(--mono); background: color-mix(in srgb, var(--ink) 9%, transparent); padding: .1em .35em; border-radius: 5px; }
.md a { color: var(--sage-deep); }
.msg.streaming > :last-child::after { content: ""; display: inline-block; width: .5em; height: 1em; margin-left: 2px; vertical-align: -.15em; background: var(--sage-deep); animation: caret .9s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.code-block { border-radius: 10px; overflow: hidden; background: #191b26; color: #e3e8ee; box-shadow: 0 6px 20px -10px rgb(0 0 0 / .5); }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: .35rem .5rem .35rem .9rem; background: #232636; font: .75rem var(--mono); color: #9aa5c2; }
.code-copy { font: .75rem var(--mono); color: #c9d2e3; background: transparent; border: 1px solid #3a3e52; border-radius: 6px; padding: .2rem .55rem; cursor: pointer; }
.code-copy:hover { background: #33374a; }
.code-block pre { margin: 0; padding: .9rem 1rem; overflow-x: auto; white-space: pre; font-size: .85rem; line-height: 1.55; }
.code-block code { background: none; padding: 0; font-size: inherit; color: inherit; }
.result-body .code-block pre { white-space: pre; }

.result { position: relative; display: flex; flex-direction: column; min-height: 0; border-left: 2px solid var(--sage); color: var(--muted); }
.result h2 { padding: 1.2rem 1rem 0; font: 500 .85rem var(--mono); color: var(--slate); }
.result-body { flex: 1; overflow: auto; padding: .75rem 1rem 3rem; font-family: var(--mono); scrollbar-width: thin; }
.result-body pre, .result-body .text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .9rem; line-height: 1.55; }
.copy-btn { position: absolute; right: .75rem; bottom: .5rem; background: none; border: 0; font-size: 1.1rem; padding: .3rem .5rem; cursor: pointer; }
.copy-btn:hover { transform: scale(1.2); }
.sources { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--line); font: .85rem var(--sans); }
.sources ol { padding-left: 1.2rem; margin-top: .25rem; }

.bars { display: grid; gap: .6rem; }
.bar { display: grid; grid-template-columns: minmax(4rem, 8rem) 1fr auto; align-items: center; gap: .75rem; font-size: .9rem; }
.bar .track { height: 1.1rem; background: color-mix(in srgb, var(--sage) 45%, transparent); border-radius: 4px; overflow: hidden; }
.bar .fill { height: 100%; background: linear-gradient(90deg, var(--slate), var(--sage-deep)); border-radius: 4px; transform-origin: left; animation: grow .8s cubic-bezier(.2, .7, .2, 1) both; }
.bar:nth-child(2) .fill { animation-delay: .06s; }
.bar:nth-child(3) .fill { animation-delay: .12s; }
.bar:nth-child(n+4) .fill { animation-delay: .18s; }
@keyframes grow { from { transform: scaleX(0); } }
.bar .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar .num { font-family: var(--mono); }

.composer { padding: .75rem clamp(1rem, 3vw, 2rem) 1rem; }
.composer form { display: flex; gap: .7rem; align-items: center; }
.composer textarea {
  flex: 1;
  resize: none;
  min-height: 60px;
  max-height: 10rem;
  font: 1rem/1.5 var(--mono);
  color: var(--muted);
  background: transparent;
  border: 0;
  border-bottom: 2px solid var(--sage);
  padding: .75rem 1rem;
}
.composer textarea:focus { outline: none; border-color: var(--slate); }
.send-btn { background: none; border: 0; padding: .75rem 1.25rem; font: 600 1.05rem var(--sans); color: var(--muted); cursor: pointer; }
.send-btn:hover { color: var(--ink); }
.send-btn:disabled { opacity: .5; cursor: progress; }
.hint { margin: .4rem 1rem 0; font-size: .8rem; color: var(--slate); }


@media (max-width: 820px) {
  .chat-page { height: auto; min-height: 100dvh; overflow: visible; }
  .workspace { grid-template-columns: 1fr; }
  .thread { max-height: 55dvh; }
  .result { max-height: 45dvh; border-left: 0; border-top: 2px solid var(--sage); }
  .msg { max-width: 90%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}