/* Binky — landing styles. Deep indigo dark, dry, editorial. No frameworks, no external assets. */

:root {
  --bg: #0c0a15;             /* near-black indigo — the brand ink pushed to the floor */
  --bg-soft: #100d1c;
  --surface: #16122a;        /* a lifted indigo panel */
  --surface-2: #1d1838;
  --ink: 232, 228, 248;      /* light channels — every wash below is built from it */
  --border: rgba(232, 228, 248, 0.10);
  --border-strong: rgba(232, 228, 248, 0.22);
  --fg: #ece9f7;             /* soft indigo-white */
  --fg-dim: #b7b1d3;
  --muted: #867fa6;
  --faint: #6d6798;          /* decorative + the dimmed half of the headline — never body text */
  --accent: #ff7a4d;         /* coral — a shade hotter so it sings on dark */
  --accent-soft: rgba(255, 122, 77, 0.14);
  --green: #34d399;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 16px 44px rgba(0, 0, 0, 0.55);
  --radius: 12px;
  --radius-lg: 16px;
  --maxw: 1080px;
  --gutter: 24px;
  --font: ui-sans-serif, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  /* a warm coral glow bleeding from the top edge — the one thing that keeps this
     from being just another inverted-to-black page */
  background-image: radial-gradient(ellipse 92% 55% at 50% -8%, rgba(255, 122, 77, 0.07), transparent 60%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--fg);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.01em;
}

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent-soft); color: var(--fg); }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ---------- nav ---------- */
/* ---------- the mark ---------- */
/* One file, binky.svg, pulled in as a mask rather than an <img>. The mark shows
   up in four different colours across these pages — ink in the nav, coral in the
   hero, muted in the footer, faint on the empty docs state — so `color` has to
   keep driving it. A mask throws away the file's own paint and keeps only its
   alpha, which is exactly that: the geometry lives in one place, the colour
   stays with whoever is using it. The coral baked into the file is for the two
   places that consume it directly, the favicon and the README. */
.rabbit {
  display: inline-block;
  flex: none;
  background-color: currentColor;
  -webkit-mask: url(binky.svg) center / contain no-repeat;
  mask: url(binky.svg) center / contain no-repeat;
}

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: saturate(140%) blur(12px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-inner {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: inline-flex; align-items: center; gap: 10px; }
.brand .rabbit { width: 22px; height: 22px; color: var(--fg); }
.brand .wordmark { font-family: var(--mono); font-size: 15px; letter-spacing: 0; color: var(--fg); }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  font-size: 14px;
  color: var(--fg-dim);
  padding: 7px 12px;
  border-radius: 8px;
  transition: color 0.2s ease, background 0.2s ease;
}
.nav-links a:hover { color: var(--fg); background: rgba(var(--ink), 0.05); }
.nav-links .gh { color: var(--muted); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 116px 0 104px;
  border-bottom: 1px solid var(--border);
}
.bg-motion { position: absolute; inset: -20% -10% 0; z-index: 0; pointer-events: none; overflow: hidden; }
/* Back over near-black, these read as glow rather than stain — so they carry the
   strength they were originally built for, not the muted values cream demanded. */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
  opacity: 0.9;
  will-change: transform;
}
.blob.b1 { width: 540px; height: 540px; left: -6%; top: -14%;
  background: radial-gradient(circle, rgba(255,122,77,0.34), transparent 68%);
  animation: drift1 34s ease-in-out infinite; }
.blob.b2 { width: 470px; height: 470px; right: -4%; top: 2%;
  background: radial-gradient(circle, rgba(52,211,153,0.20), transparent 68%);
  animation: drift2 42s ease-in-out infinite; }
.blob.b3 { width: 620px; height: 620px; left: 34%; top: 22%;
  background: radial-gradient(circle, rgba(139,124,255,0.24), transparent 70%);
  animation: drift3 50s ease-in-out infinite; }
.hero-grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 78%);
  opacity: 0.35;
}
.hero-inner { position: relative; z-index: 1; text-align: center; }
/* The hero mark is inline SVG, not the masked silhouette used elsewhere. It's
   filled and stroke-less: with no stroke, the overlapping ear and head paths
   simply union at the same colour, so nothing crosses the face. Translucency is
   applied at the element level (`opacity`), not per-fill — that flattens the
   shape first, so the ear/head overlap doesn't double up into a visible seam.
   The evenodd counters (ear insides, eyes, nose) stay hollow. */
.hero-mark {
  width: 86px; height: 86px; display: block; margin: 0 auto 26px;
  fill: var(--accent);
  stroke: none;
  opacity: 0.9;
  mix-blend-mode: overlay;           /* Photoshop's "Sobrepor" — blends with the hero backdrop */
}
.eyebrow {
  display: inline-block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--muted);
  padding: 5px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  margin-bottom: 24px;
}
.hero h1 {
  font-size: clamp(2.4rem, 6vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 600;
  margin: 0 auto 20px;
  max-width: 15ch;
}
.hero h1 .dim { color: var(--faint); }
.hero .lede {
  font-size: clamp(1rem, 2.2vw, 1.2rem);
  color: var(--fg-dim);
  max-width: 60ch;
  margin: 0 auto 36px;
  line-height: 1.6;
}
.cta-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }

.cmd-chip {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--mono);
  font-size: 14.5px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--fg);
  box-shadow: var(--shadow);
  cursor: copy;
  transition: border-color 0.2s ease, transform 0.05s ease;
}
.cmd-chip:hover { border-color: var(--accent); }
.cmd-chip:active { transform: translateY(1px); }
.cmd-chip .prompt { color: var(--accent); }
.cmd-chip .copy { color: var(--faint); font-size: 12px; margin-left: 2px; }
.cmd-chip.copied .copy { color: var(--green); }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14.5px; font-weight: 500;
  padding: 11px 18px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  color: var(--fg);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;
}
.btn:hover { background: rgba(var(--ink), 0.05); border-color: var(--border-strong); }
.btn:active { transform: translateY(1px); }
.btn .arrow { transition: transform 0.2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- sections ---------- */
section { padding: 96px 0; border-bottom: 1px solid var(--border); }
.sec-label {
  font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 16px;
}
.sec-title {
  font-size: clamp(1.7rem, 3.6vw, 2.5rem); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.1; margin: 0 0 20px; max-width: 22ch;
}
.sec-lead { color: var(--fg-dim); font-size: 1.08rem; max-width: 62ch; margin: 0; }

.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: start; }
.split .prose p { color: var(--fg-dim); margin: 0 0 18px; }
.split .prose strong { color: var(--fg); font-weight: 600; }

.code-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow);
}
.code-card .cc-head {
  font-family: var(--mono); font-size: 12px; color: var(--muted);
  padding: 10px 16px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
pre { margin: 0; padding: 18px 16px; overflow-x: auto; }
code { font-family: var(--mono); font-size: 13px; line-height: 1.8; color: var(--fg-dim); }
.tok-key { color: var(--fg); }
.tok-str { color: var(--accent); }
.tok-cmt { color: var(--muted); }
.tok-sec { color: var(--green); }

/* feature grid */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 48px; }
.feat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
  transition: border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.feat:hover {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border-strong));
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 16px 40px rgba(0, 0, 0, 0.5),
    0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent);
}
.feat h3 { font-size: 1.02rem; font-weight: 600; margin: 0 0 8px; letter-spacing: -0.01em; }
.feat p { margin: 0; color: var(--muted); font-size: 0.94rem; line-height: 1.55; }
.feat .k { font-family: var(--mono); font-size: 11.5px; color: var(--accent); display: block; margin-bottom: 12px; letter-spacing: 0.04em; }

/* commands row */
.cmd-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 40px; }
.cmd-item { border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; background: var(--surface); box-shadow: var(--shadow); }
.cmd-item code { color: var(--fg); font-size: 13px; }
.cmd-item span { display: block; color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.cmd-group { grid-column: 1 / -1; font-family: var(--mono); font-size: 11.5px; color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 22px; }
.cmd-group:first-child { margin-top: 0; }
.cmd-group span { color: var(--muted); text-transform: none; letter-spacing: 0; margin-left: 8px; }

/* adapters */
.adapters { text-align: center; }
.adapter-strip {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px;
  max-width: 820px; margin-left: auto; margin-right: auto;
}
.chip {
  font-family: var(--mono); font-size: 13px; color: var(--fg-dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 15px;
  background: var(--surface); transition: color 0.2s ease, border-color 0.2s ease;
}
.chip:hover { color: var(--fg); border-color: var(--accent); }
.chip .star { color: var(--accent); }
.adapters .note { margin-top: 26px; color: var(--muted); font-size: 13px; font-family: var(--mono); }

/* ---------- footer ---------- */
footer { padding: 56px 0; border-bottom: none; }
.foot-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.foot-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--mono); font-size: 13px; }
.foot-brand .rabbit { width: 18px; height: 18px; color: var(--muted); }
/* the name means something; the footer is where it can say so without slowing the hero down */
.foot-brand .gloss { color: var(--faint); font-style: italic; }
@media (max-width: 620px) { .foot-brand .gloss { display: none; } }
.foot-links { display: flex; gap: 22px; }
.foot-links a { color: var(--muted); font-size: 13.5px; transition: color 0.2s ease; }
.foot-links a:hover { color: var(--fg); }

/* ---------- reveal animation ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: none; }
.rise { opacity: 0; transform: translateY(14px); animation: riseIn 0.8s cubic-bezier(.2,.7,.2,1) forwards; }
.d1 { animation-delay: 0.05s; } .d2 { animation-delay: 0.13s; } .d3 { animation-delay: 0.21s; }
.d4 { animation-delay: 0.29s; } .d5 { animation-delay: 0.4s; }

@keyframes riseIn { to { opacity: 1; transform: none; } }
@keyframes drift1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(60px,40px) scale(1.12); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50px,30px) scale(1.08); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(30px,-40px) scale(1.1); } }

/* ---------- docs page ---------- */
.docs-main { min-height: 70vh; padding: 80px 0; }
.docs-shell { display: grid; grid-template-columns: 220px 1fr; gap: 48px; }
.docs-side { border-right: 1px solid var(--border); padding-right: 24px; }
.docs-side .grp { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 12px; }
.docs-side a { display: block; color: var(--muted); font-size: 14px; padding: 6px 0; }
.docs-side a:hover { color: var(--fg); }
.docs-empty { border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); padding: 64px 40px; text-align: center; color: var(--muted); }
.docs-empty h2 { color: var(--fg); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.docs-empty .rabbit { width: 40px; height: 40px; color: var(--faint); margin: 0 auto 22px; display: block; }

/* the sidebar tracks the reader; `.on` is set by the scrollspy in app.js */
.docs-side { position: sticky; top: 84px; align-self: start; max-height: calc(100vh - 108px); overflow-y: auto; }
.docs-side a { border-left: 1px solid transparent; padding-left: 12px; margin-left: -1px; transition: color 0.2s ease, border-color 0.2s ease; }
.docs-side a.on { color: var(--fg); border-left-color: var(--accent); }

/* ---------- docs prose ---------- */
.docs-body { min-width: 0; max-width: 70ch; }
.docs-body > section { padding: 0 0 8px; border-bottom: none; }
.docs-body .lede-xl { font-size: 1.12rem; color: var(--fg-dim); margin: 0 0 8px; }

/* scroll-margin keeps an anchored heading clear of the sticky nav */
.docs-body h2 { font-size: 1.6rem; font-weight: 600; letter-spacing: -0.025em; margin: 56px 0 14px; scroll-margin-top: 84px; }
.docs-body h2:first-child { margin-top: 0; }
.docs-body h3 { font-size: 1.05rem; font-weight: 600; letter-spacing: -0.015em; margin: 34px 0 10px; scroll-margin-top: 84px; }
.docs-body p { color: var(--fg-dim); margin: 0 0 16px; }
.docs-body strong { color: var(--fg); font-weight: 600; }
.docs-body a:not(.btn) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.docs-body a:not(.btn):hover { text-decoration-color: var(--accent); }
.docs-body ul { color: var(--fg-dim); margin: 0 0 16px; padding-left: 20px; }
.docs-body li { margin-bottom: 7px; }
.docs-body li::marker { color: var(--faint); }
.docs-body :not(pre) > code { font-size: 0.875em; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }

.docs-body pre {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 15px 16px; margin: 0 0 18px; overflow-x: auto; box-shadow: var(--shadow);
}
.docs-body pre code { font-size: 12.5px; line-height: 1.75; }
.tok-cmd { color: var(--fg); }
.tok-flag { color: var(--fg-dim); }
.tok-out { color: var(--muted); }

/* a callout, for the two or three things that actually bite people */
.docs-body .callout {
  border: 1px solid var(--border); border-left: 2px solid var(--accent);
  background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0;
  padding: 14px 18px; margin: 0 0 18px; box-shadow: var(--shadow);
}
.docs-body .callout p:last-child { margin-bottom: 0; }
.docs-body .callout .k { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); display: block; margin-bottom: 6px; }

/* tables scroll on their own so the page never does */
.docs-body .tw { overflow-x: auto; margin: 0 0 18px; }
.docs-body table { border-collapse: collapse; width: 100%; font-size: 14px; }
.docs-body th, .docs-body td { text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.docs-body th { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); font-weight: 400; white-space: nowrap; }
.docs-body td { color: var(--fg-dim); }
.docs-body td code { white-space: nowrap; }
.docs-body td.num { text-align: right; font-family: var(--mono); font-size: 13px; white-space: nowrap; }
.docs-body th.num { text-align: right; }

/* ---------- demo walkthrough ---------- */
/* A fake editor on the left, caption + stepper on the right. Only one screen is
   ever `.is-active`; the rest are pulled out of flow so the panel sizes to the
   one on show. demo.js drives which, and types the leading command. */
.demo { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 44px; align-items: stretch; }
.demo:focus { outline: none; }
.demo-ide {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; min-width: 0;
}
.demo-bar { display: flex; align-items: center; gap: 7px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.demo-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--border-strong); }
.demo-tab { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-left: 10px; }
/* floored near the tallest screen (the binky.toml editor) so stepping between a
   long and a short screen barely shifts the panel height */
.demo-screens { position: relative; flex: 1; min-height: 420px; }
.demo-screen { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.28s ease; }
.demo-screen.is-active { opacity: 1; visibility: visible; position: relative; }
.demo-screen pre { padding: 20px 18px; }
.demo-screen code { font-size: 12.5px; line-height: 1.85; }
.term .prompt { color: var(--accent); margin-right: 2px; }
.tok-ok { color: var(--green); }
.tok-proj { color: var(--fg); font-weight: 600; }
/* while the command types in, hold everything after it back, and blink a caret */
.demo-screen.typing .term-body { visibility: hidden; }
.demo-screen.typing .cmd::after { content: "▋"; color: var(--accent); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }

.demo-side { display: flex; flex-direction: column; }
.demo-count { font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--accent); margin-bottom: 12px; }
.demo-title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.02em; margin: 0 0 10px; }
.demo-desc { color: var(--fg-dim); margin: 0; font-size: 0.98rem; line-height: 1.6; }
.demo-desc code { font-size: 0.85em; color: var(--fg); background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; }
.demo-doc {
  color: var(--accent); font-size: 14px; margin-top: 18px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--accent) 45%, transparent);
}
.demo-doc:hover { text-decoration-color: var(--accent); }
.demo-doc .arrow { transition: transform 0.2s ease; }
.demo-doc:hover .arrow { transform: translateX(3px); }
.demo-controls { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 26px; }
.demo-nav {
  width: 38px; height: 38px; border-radius: 9px; border: 1px solid var(--border-strong);
  background: var(--surface); color: var(--fg); font-size: 15px; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.demo-nav:hover:not(:disabled) { border-color: var(--accent); }
.demo-nav:disabled { opacity: 0.35; cursor: default; }
.demo-dots { display: flex; gap: 8px; flex: 1; justify-content: center; }
.demo-dots button { width: 8px; height: 8px; padding: 0; border-radius: 50%; border: none; background: var(--border-strong); cursor: pointer; transition: background 0.2s ease, transform 0.2s ease; }
.demo-dots button:hover { background: var(--muted); }
.demo-dots button.on { background: var(--accent); transform: scale(1.25); }

/* ---------- responsive ---------- */
@media (max-width: 820px) {
  .demo { grid-template-columns: 1fr; }
  .demo-screens { min-height: 360px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .grid3 { grid-template-columns: 1fr; }
  .docs-shell { grid-template-columns: 1fr; }
  .docs-side {
    position: static; max-height: none; overflow: visible;
    border-right: none; border-bottom: 1px solid var(--border); padding: 0 0 20px;
  }
  .docs-main { padding: 48px 0; }
  section { padding: 72px 0; }
  .nav-links .hide-sm { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .reveal, .rise { opacity: 1 !important; transform: none !important; }
}