:root {
  --ink: #101214;
  --paper: #f1f0eb;
  --muted: #737875;
  --line: rgba(16, 18, 20, 0.16);
  --signal: #d9ff3f;
  --signal-dark: #5d7600;
  --panel: #191d1d;
  --panel-soft: #222827;
  --white: #f8f8f2;
  --mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.55;
}
a { color: inherit; }
a:hover { color: var(--signal-dark); }

.site-shell { display: grid; grid-template-columns: 18rem 1fr; min-height: 100vh; }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 2rem 1.5rem;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: var(--white);
  overflow: auto;
}
.brand { text-decoration: none; display: inline-flex; align-items: center; gap: .7rem; margin-bottom: 4rem; }
.brand-mark { display: grid; place-items: center; width: 2rem; height: 2rem; background: var(--signal); color: var(--ink); font: 700 1rem/1 var(--mono); }
.brand-name { font: 700 .95rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.eyebrow { color: var(--signal-dark); font: 600 .68rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.sidebar p { color: #a8aeaa; font-size: .86rem; max-width: 14rem; }
.nav { margin-top: 2.5rem; display: grid; gap: .55rem; }
.nav a { color: #b6bbb7; text-decoration: none; font: .82rem var(--mono); padding: .42rem 0; border-bottom: 1px solid transparent; }
.nav a:hover, .nav a.active { color: var(--signal); border-color: var(--signal); }
.nav > a[href="reckoning.html"] { margin-top: .35rem; color: var(--white); font-size: 1rem; font-weight: 600; }
.nav > a.nav-section-link { margin-top: .2rem; color: var(--white); font-size: .95rem; font-weight: 600; border-bottom: 0; }
.nav-group { display: grid; gap: .55rem; width: 100%; margin-top: 1.1rem; }
.nav-group summary { display: flex; justify-content: space-between; cursor: pointer; list-style: none; padding-bottom: .35rem; border-bottom: 1px solid rgba(168,174,170,.2); color: #a8aeaa; font: 600 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nav-group summary::marker, .nav-group summary::-webkit-details-marker { display: none; content: ""; }
.nav-toggle::before { content: "[+]"; }
.nav-group[open] .nav-toggle::before { content: "[-]"; }
.nav-group > a { display: block; }
.nav-group > .nav-section-link { margin-top: .2rem; }
.nav-group > .nav-child { margin-left: .9rem; }
.nav-label { margin-top: 1.1rem; padding-bottom: .35rem; border-bottom: 1px solid rgba(168,174,170,.2); color: #a8aeaa; font: 600 .72rem var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.nav a.nav-child { padding-left: .9rem; border-left: 2px solid rgba(168,174,170,.2); }
.nav a.nav-child:hover, .nav a.nav-child.active { border-left-color: var(--signal); }
.nav a[href="classification.html"],
.nav a[href="tool-calls.html"],
.nav a[href="thinking.html"],
.nav a[href="antares-cli.html"],
.nav a[href="grace.html"],
.nav a[href="sketches.html"],
.nav a[href="antares.html"],
.nav a[href*="nanocode-deliverance"],
.nav a[href="jq4.html"],
.nav a[href="http-api.html"],
.nav a[href="llmon.html"],
.nav a[href="airlock.html"] { padding-left: .9rem; border-left: 2px solid rgba(168,174,170,.2); }
.nav a[href="classification.html"]:hover,
.nav a[href="classification.html"].active,
.nav a[href="tool-calls.html"]:hover,
.nav a[href="tool-calls.html"].active,
.nav a[href="thinking.html"]:hover,
.nav a[href="thinking.html"].active,
.nav a[href="antares-cli.html"]:hover,
.nav a[href="antares-cli.html"].active,
.nav a[href="grace.html"]:hover,
.nav a[href="grace.html"].active,
.nav a[href="sketches.html"]:hover,
.nav a[href="sketches.html"].active,
.nav a[href="antares.html"]:hover,
.nav a[href="antares.html"].active,
.nav a[href*="nanocode-deliverance"]:hover,
.nav a[href*="nanocode-deliverance"].active,
.nav a[href="jq4.html"]:hover,
.nav a[href="jq4.html"].active,
.nav a[href="http-api.html"]:hover,
.nav a[href="http-api.html"].active,
.nav a[href="llmon.html"]:hover,
.nav a[href="llmon.html"].active,
.nav a[href="airlock.html"]:hover,
.nav a[href="airlock.html"].active { border-left-color: var(--signal); }
.sidebar-foot { margin-top: auto; color: #747c77; font: .65rem var(--mono); }

.main { min-width: 0; }
.topline { display: flex; justify-content: space-between; gap: 1rem; padding: 1.3rem 4.5rem; border-bottom: 1px solid var(--line); color: var(--muted); font: .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.page { max-width: 92rem; padding: 5rem 4.5rem 7rem; }
.page:not(.article-page) { padding-top: 2.5rem; }
.article-page { padding-top: 2.5rem; }
.hero { min-height: 28rem; display: flex; flex-direction: column; justify-content: flex-start; border-bottom: 1px solid var(--line); padding-bottom: 3rem; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: 2rem; bottom: 2rem; width: 15rem; height: 15rem; border: 1px solid var(--line); border-radius: 50%; box-shadow: 0 0 0 2rem transparent, 0 0 0 2.1rem var(--line), 0 0 0 4.4rem transparent, 0 0 0 4.5rem var(--line); opacity: .55; pointer-events: none; }
.hero::after { z-index: 0; }
.hero > * { position: relative; z-index: 1; }
h1, h2, h3 { line-height: 1.05; margin: 0; font-weight: 600; letter-spacing: -.045em; }
h1 { max-width: 10ch; font-size: clamp(3.2rem, 6.5vw, 7rem); }
h2 { font-size: clamp(2rem, 4vw, 4.2rem); }
h3 { font-size: 1.2rem; }
.hero h1 { margin: 0 0 1.6rem; }
.hero h1 span { color: var(--signal-dark); }
.lede { max-width: 39rem; color: #515854; font-size: clamp(1.08rem, 1.6vw, 1.35rem); }
.button-row { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 2rem; }
.button { display: inline-block; padding: .8rem 1rem; background: var(--ink); color: var(--white); text-decoration: none; font: .72rem var(--mono); text-transform: uppercase; letter-spacing: .06em; }
.button:hover { color: var(--ink); background: var(--signal); }
.button.ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.button.ghost:hover { background: var(--ink); color: var(--white); }

.section { padding: 4.5rem 0; border-bottom: 1px solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(12rem, .6fr) 1fr; gap: 2rem; margin-bottom: 2.5rem; }
.section-heading p { max-width: 38rem; color: #515854; margin: 0; }
.project-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.project-card { min-height: 16rem; padding: 1.5rem; background: var(--paper); text-decoration: none; display: flex; flex-direction: column; justify-content: space-between; }
.project-card:hover { background: var(--signal); color: var(--ink); }
.project-card p { max-width: 27rem; color: #59605b; }
.project-card:hover p { color: var(--ink); }
.project-meta { display: flex; justify-content: space-between; gap: 1rem; font: .65rem var(--mono); text-transform: uppercase; }
.project-meta span:last-child { color: var(--muted); }
.project-card:hover .project-meta span:last-child { color: var(--ink); }
.status-line { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.status { background: var(--paper); padding: 1.2rem; }
.status strong { display: block; font: 1.25rem var(--mono); }
.status span { display: block; margin-top: .35rem; color: var(--muted); font: .65rem var(--mono); text-transform: uppercase; }

.article-head { max-width: 58rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.article-head > .eyebrow { display: none; }
.article-head h1 { max-width: 16ch; margin: 0 0 1rem; font-size: clamp(2.4rem, 4vw, 4.8rem); }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 15rem; gap: 4rem; max-width: 70rem; padding-top: 2rem; }
.article { max-width: 47rem; font-size: 1.05rem; }
.article h2 { margin: 3rem 0 1rem; font-size: 2.1rem; }
.article h3 { margin: 2rem 0 .6rem; }
.article p { color: #414845; }
.article ul { color: #414845; padding-left: 1.2rem; }
.toc { font: .68rem var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.toc strong { display: block; margin-bottom: .8rem; }
.toc a { display: block; color: var(--muted); text-decoration: none; border-left: 1px solid var(--line); padding: .45rem .7rem; }
.toc a:hover { color: var(--ink); border-color: var(--signal-dark); }
pre { overflow: auto; padding: 1.3rem; background: var(--panel); color: var(--white); font: .78rem/1.65 var(--mono); border-left: 3px solid var(--signal); }
.example-output { margin: -.8rem 0 1.8rem; padding: .75rem 1rem; background: var(--panel-soft); color: var(--signal); font: .78rem/1.5 var(--mono); border-left: 3px solid var(--signal-dark); }
.example-output strong { color: #a8aeaa; font-weight: 400; }
.example-output strong.signal-label { color: var(--signal); }
code { font-family: var(--mono); font-size: .9em; }
:not(pre) > code { padding: .12rem .28rem; background: rgba(16,18,20,.08); }
.note { padding: 1.2rem 1.4rem; margin: 2rem 0; border-left: 3px solid var(--signal-dark); background: rgba(217,255,63,.18); }
.note p { margin: 0; }
.browser-capture { margin: 2rem 0; }
.browser-capture img { display: block; width: 100%; height: auto; border: 1px solid var(--line); }
.browser-capture figcaption { margin-top: .7rem; color: var(--muted); font: .68rem var(--mono); }
.console-user { color: #8eb4e8; }
.console-thinking { color: #d4b85c; }
.console-assistant { color: var(--signal); }
.journal-list { display: grid; gap: 0; border-top: 1px solid var(--line); }
.journal-item { display: grid; grid-template-columns: 9rem 1fr 6rem; gap: 1.5rem; padding: 1.4rem 0; border-bottom: 1px solid var(--line); text-decoration: none; }
.journal-item:hover { color: var(--signal-dark); }
.journal-item time, .journal-item span { color: var(--muted); font: .68rem var(--mono); text-transform: uppercase; }
.journal-item h3 { font-size: 1.35rem; }
.journal-item p { margin: .4rem 0 0; color: var(--muted); font-size: .9rem; }

.footer { padding: 2rem 4.5rem; background: var(--ink); color: #a8aeaa; font: .68rem var(--mono); display: flex; justify-content: space-between; gap: 1rem; }
.footer a { color: var(--signal); }

@media (max-width: 850px) {
  .site-shell { display: block; }
  .sidebar { position: relative; height: auto; padding: 1rem 1.2rem; display: block; }
  .brand { margin: 0; }
  .sidebar > p, .sidebar-foot { display: none; }
  .nav { display: grid; width: 100%; gap: .55rem; margin: 1.5rem 0 0; }
  .nav-group { display: grid; flex-basis: 100%; gap: .55rem; margin-top: .8rem; }
  .nav a { border: 0; padding: .35rem 0; }
  .nav-label { display: none; }
  .topline { padding: .8rem 1.2rem; }
  .page { padding: 3rem 1.2rem 5rem; }
  .hero { min-height: 29rem; }
  .hero::after { right: -5rem; bottom: 1rem; }
  .section-heading, .article-layout { grid-template-columns: 1fr; gap: 1rem; }
  .status-line { grid-template-columns: repeat(2, 1fr); }
  .toc { order: -1; }
  .footer { padding: 1.5rem 1.2rem; flex-direction: column; }
}
@media (max-width: 560px) {
  .project-grid { grid-template-columns: 1fr; }
  .journal-item { grid-template-columns: 1fr; gap: .35rem; }
  .journal-item span { display: none; }
  h1 { font-size: clamp(3.5rem, 19vw, 6rem); }
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: pulse 9s ease-in-out infinite alternate; }
  @keyframes pulse { from { transform: scale(.92); opacity: .35; } to { transform: scale(1.08); opacity: .7; } }
}

.palette-orange {
  --signal: #f26b2d;
  --signal-dark: #b94f25;
  --ink: #101d2b;
  --paper: #f6f1e8;
  --line: rgba(194, 89, 42, 0.28);
}

.palette-orange .hero::after {
  opacity: 1;
  animation: none;
  border-color: #f26b2d;
  box-shadow: 0 0 0 2rem transparent,
    0 0 0 2.1rem #ff8a3d,
    0 0 0 4.4rem transparent,
    0 0 0 4.5rem #f26b2d;
}