/* S-Curve Labs: engineer's computation pad. Green grid paper, ink, drafting blue,
   amber data-date line. One stylesheet for every page. */
:root {
  --pad: #E9F0E3;
  --pad-2: #E1EAD9;
  --grid: #CFDFC8;
  --grid-major: #B9CFB1;
  --ink: #16241D;
  --graphite: #51645A;
  --faint: #7C8F84;
  --blue: #2346A8;
  --blue-wash: rgba(35, 70, 168, .08);
  --amber: #A86A12;
  --rule: #16241D;
  --display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body: "Public Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --pad: #111915; --pad-2: #16201B; --grid: #1C2822; --grid-major: #25342C;
    --ink: #DCE7DE; --graphite: #9DB0A4; --faint: #6F8378;
    --blue: #86A2FF; --blue-wash: rgba(134, 162, 255, .10); --amber: #E3A546; --rule: #9DB0A4;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --pad: #111915; --pad-2: #16201B; --grid: #1C2822; --grid-major: #25342C;
  --ink: #DCE7DE; --graphite: #9DB0A4; --faint: #6F8378;
  --blue: #86A2FF; --blue-wash: rgba(134, 162, 255, .10); --amber: #E3A546; --rule: #9DB0A4;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--pad);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
  color: var(--ink);
  font: 400 1rem/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; top: 8px; padding: 8px 12px; background: var(--ink); color: var(--pad); z-index: 10; }
.skip:focus { left: 8px; }

.sheet { max-width: 1120px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 40px); padding-block: 0 40px; }

/* ── top strip ─────────────────────────────── */
.strip {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block: 22px; border-bottom: 2px solid var(--rule);
}
.mark { display: flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.mark svg { width: 38px; height: 38px; flex: none; }
.logo-frame { fill: none; stroke: currentColor; stroke-width: 2; }
.logo-curve { fill: none; stroke: var(--blue); stroke-width: 2.4; stroke-linecap: round; }
.logo-dd { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 2 2.5; }
.wordmark { font: 700 1.6rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.strip nav { display: flex; gap: 22px; flex-wrap: wrap; }
.strip nav a {
  font: 600 .95rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--graphite); text-decoration: none; padding-block: 4px; border-bottom: 2px solid transparent;
}
.strip nav a:hover { color: var(--blue); }
.strip nav a[aria-current] { color: var(--ink); border-bottom-color: var(--blue); }

/* ── hero ──────────────────────────────────── */
.hero {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 64px);
  align-items: center; padding-block: clamp(40px, 7vw, 88px) clamp(8px, 2vw, 24px);
}
.eyebrow {
  font: 600 .9rem/1 var(--display); letter-spacing: .18em; text-transform: uppercase; color: var(--graphite);
  display: flex; gap: 10px; align-items: center; margin: 0 0 18px;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--blue); }
h1 {
  font: 700 clamp(2.6rem, 6.2vw, 4.4rem)/.95 var(--display); letter-spacing: .005em; text-transform: uppercase;
  margin: 0 0 22px; text-wrap: balance;
}
h1 em { font-style: normal; color: var(--blue); }
.lede { font-size: 1.12rem; max-width: 34em; margin: 0 0 26px; color: var(--ink); }
.lede + .lede { margin-top: -12px; color: var(--graphite); font-size: 1rem; }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px;
  font: 600 1rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  border: 2px solid var(--ink); color: var(--ink); background: transparent;
}
.btn.primary { background: var(--ink); color: var(--pad); }
.btn:hover { border-color: var(--blue); }
.btn.primary:hover { background: var(--blue); color: var(--pad); }

/* figure */
figure.fig { margin: 0; background: var(--pad); border: 2px solid var(--rule); padding: 18px 18px 14px; position: relative; }
figure.fig svg { display: block; width: 100%; height: auto; overflow: visible; }
.fig .axis { stroke: var(--ink); stroke-width: 1.5; fill: none; }
.fig .tick { stroke: var(--graphite); stroke-width: 1; }
.fig .gl { stroke: var(--grid-major); stroke-width: 1; }
.fig text { font-family: var(--mono); font-size: 11px; fill: var(--graphite); }
.fig .lab { font-family: var(--display); font-weight: 600; font-size: 13px; letter-spacing: .1em; fill: var(--ink); }
.fig text.ink { fill: var(--ink); }
.fig .planned { stroke: var(--graphite); stroke-width: 2; stroke-dasharray: 6 5; fill: none; }
.fig .actual { stroke: var(--blue); stroke-width: 3; fill: none; stroke-linecap: round; }
.fig .forecast { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 2 5; stroke-linecap: round; fill: none; }
.fig .dd { stroke: var(--amber); stroke-width: 1.5; }
.fig .ddtext { fill: var(--amber); font-weight: 500; }
.fig .dot { fill: var(--blue); stroke: var(--pad); stroke-width: 2; }
.fig .var { stroke: var(--ink); stroke-width: 1.25; }
figcaption {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  border-top: 1px solid var(--grid-major); margin-top: 10px; padding-top: 10px;
  font: 400 .78rem/1.4 var(--mono); color: var(--graphite);
}
/* interactive figure (fig.js): drag or arrow-key the data date, hover to read values */
.fig .hit { fill: transparent; cursor: crosshair; touch-action: pan-y; }
.fig.dragging .hit { cursor: ew-resize; }
.fig .grip { fill: var(--amber); }
.fig .ddh { outline: none; }
.fig .ddh:focus-visible .grip { stroke: var(--blue); stroke-width: 2; }
.fig .ddh:focus-visible .dd { stroke-width: 2.5; }
.fig .hl { stroke: var(--graphite); stroke-width: 1; stroke-dasharray: 1 3; }
.fig .hp { fill: var(--graphite); stroke: var(--pad); stroke-width: 1.5; }
.fig .ha { fill: var(--blue); stroke: var(--pad); stroke-width: 1.5; }
.fig .ha.f { fill: var(--amber); }
.fig .tip { fill: var(--pad); stroke: var(--rule); stroke-width: 1; }
.fig .hint { display: none; }
.fig.live .hint { display: inline; }
.fig .reset {
  margin-left: 6px; padding: 1px 6px; font: inherit; color: var(--blue); cursor: pointer;
  background: transparent; border: 1px solid currentColor; border-radius: 2px;
}
.fig .reset:hover { background: var(--blue-wash); }
.legend { display: flex; gap: 16px; flex-wrap: wrap; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid var(--blue); }
.legend i.p { border-top: 2px dashed var(--graphite); }
.legend i.f { border-top: 3px dotted var(--amber); }

@media (prefers-reduced-motion: no-preference) {
  .fig .actual { stroke-dasharray: 700; stroke-dashoffset: 0; animation: draw 1.6s cubic-bezier(.65,0,.35,1) .2s backwards; }
  .fig .forecast, .fig .dot { animation: fade .5s ease 1.6s backwards; }
  @keyframes draw { from { stroke-dashoffset: 700; } }
  @keyframes fade { from { opacity: 0; } }
}

/* ── section heads ─────────────────────────── */
.sec { padding-block: clamp(36px, 6vw, 64px) 0; }
.sec.first { padding-top: clamp(24px, 4vw, 48px); }
.sec-head {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: baseline;
  border-top: 2px solid var(--rule); padding-top: 14px; margin-bottom: 8px;
}
.sec-head h2 { font: 700 1.9rem/1 var(--display); text-transform: uppercase; letter-spacing: .04em; margin: 0; }
.sec-head p { margin: 0; color: var(--graphite); max-width: 44em; }

/* ── catalogue (drawing index) ─────────────── */
.index { margin-top: 18px; border: 2px solid var(--rule); background: var(--pad); }
.index-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 90px 150px 28px; gap: 16px; align-items: center;
  padding: 16px 20px; border-top: 1px solid var(--grid-major); color: var(--ink); text-decoration: none;
}
.index-row.head {
  border-top: 0; padding-block: 10px; background: var(--pad-2);
  font: 600 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint);
}
a.index-row:hover { background: var(--blue-wash); }
a.index-row:hover .go { transform: translateX(3px); color: var(--blue); }
.series { font: 700 1.5rem/1 var(--display); letter-spacing: .06em; }
.index-title b { display: block; font: 600 1.15rem/1.3 var(--body); }
.index-title span { display: block; color: var(--graphite); font-size: .95rem; margin-top: 2px; }
.index-title code { font: 400 .86em var(--mono); color: var(--ink); }
.count { font: 500 1rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.status { display: inline-flex; align-items: center; gap: 7px; font: 600 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; }
.status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
.status.wip { color: var(--graphite); }
.status.wip::before { background: transparent; border: 1.5px dashed var(--amber); }
.go { font: 500 1.2rem/1 var(--mono); color: var(--graphite); transition: transform .15s ease; }
.index-row.muted { color: var(--graphite); }
.index-row.muted .series { color: var(--faint); }

/* ── crumb + aside ─────────────────────────── */
.crumb { display: flex; gap: 10px; align-items: center; padding-top: 22px; margin: 0; font: 400 .85rem/1 var(--mono); color: var(--graphite); }
.crumb a { color: var(--graphite); }
.crumb a:hover { color: var(--blue); }
.hero.top { padding-top: clamp(24px, 4vw, 48px); align-items: start; }
.aside { border: 2px solid var(--rule); background: var(--pad); padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.aside h2 { font: 700 1.3rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.aside p { margin: 0; color: var(--graphite); font-size: .96rem; }
.aside .step { font: 600 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 4px 0 -6px; }
.aside .big-link { font: 500 1.15rem/1.3 var(--mono); overflow-wrap: anywhere; }
pre.snippet {
  margin: 0; padding: 12px 14px; background: var(--pad-2); border: 1.5px solid var(--ink);
  font: 400 .84rem/1.5 var(--mono); overflow-x: auto; color: var(--ink);
}

/* ── tool register ─────────────────────────── */
.register { list-style: none; margin: 0; padding: 0; }
.tool {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) 290px; gap: 18px 32px;
  padding-block: 26px; border-bottom: 1px solid var(--grid-major);
}
.tool:last-child { border-bottom: 2px solid var(--rule); }
.tool-id { display: flex; flex-direction: column; gap: 8px; }
.tool-name { font: 500 1.45rem/1.1 var(--mono); letter-spacing: -.01em; margin: 0; }
.tag {
  align-self: flex-start; font: 600 .82rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: var(--blue); border: 1.5px solid currentColor; padding: 5px 8px 4px;
}
.q { font: 600 1.28rem/1.3 var(--body); margin: 0 0 8px; text-wrap: balance; letter-spacing: -.005em; }
.d { margin: 0; color: var(--graphite); max-width: 60ch; }
.tool-use { display: flex; flex-direction: column; gap: 10px; }
.cmd { display: flex; align-items: stretch; border: 1.5px solid var(--ink); background: var(--pad-2); }
.cmd code {
  flex: 1; min-width: 0; padding: 9px 10px; font: 400 .88rem/1.35 var(--mono);
  white-space: pre-wrap; overflow-wrap: anywhere; user-select: all;
}
.cmd code::before { content: "$ "; color: var(--faint); }
.cmd button {
  flex: none; border: 0; border-left: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 .78rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase; padding: 0 10px; cursor: pointer;
}
.cmd button:hover { background: var(--ink); color: var(--pad); }
.links { display: flex; gap: 16px; font: 400 .85rem/1 var(--mono); }

/* ── principles ────────────────────────────── */
.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; border: 2px solid var(--rule); background: var(--pad); }
.principle { padding: 22px 22px 24px; border-left: 1px solid var(--grid-major); }
.principle:first-child { border-left: 0; }
.principle h3 { font: 700 1.3rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; }
.principle p { margin: 0; color: var(--graphite); font-size: .96rem; }
.principle code { font: 400 .86em var(--mono); color: var(--ink); background: var(--pad-2); padding: 1px 4px; }

/* ── curve note ────────────────────────────── */
.note {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; align-items: center;
  margin-top: clamp(36px, 6vw, 64px); padding: 22px 24px; border: 1.5px dashed var(--graphite); background: var(--pad);
}
.note svg { width: 100%; height: auto; }
.note svg path { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.note svg line { stroke: var(--graphite); stroke-width: 1.5; }
.note p { margin: 0; max-width: 64ch; }
.note b { font-family: var(--display); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; font-size: 1.08rem; }

/* ── title block footer ────────────────────── */
.titleblock {
  margin-top: clamp(40px, 7vw, 80px); margin-left: auto; max-width: 720px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 1px; background: var(--rule); border: 2px solid var(--rule);
}
.tb { padding: 8px 12px 10px; background: var(--pad); min-width: 0; }
.tb small { display: block; font: 600 .7rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 6px; }
.tb span { font: 500 .88rem/1.3 var(--mono); overflow-wrap: anywhere; }
.tb.big { grid-row: span 2; display: flex; flex-direction: column; justify-content: center; }
.tb.big span { font: 700 1.7rem/1 var(--display); letter-spacing: .06em; text-transform: uppercase; }
.tb.wide { grid-column: span 2; }
.foot-links { display: flex; justify-content: flex-end; gap: 18px; flex-wrap: wrap; margin-top: 12px; font: 400 .82rem/1 var(--mono); }
.foot-links a { color: var(--graphite); }

/* ── long-form pages (privacy, support, help) ─ */
.policy { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; margin-top: 18px; }
.toc { position: sticky; top: 16px; align-self: start; border: 2px solid var(--rule); background: var(--pad); padding: 14px 16px; }
.toc p { font: 600 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 10px; }
.toc ol { margin: 0; padding-left: 20px; font-size: .95rem; }
.toc li { margin: 4px 0; }
.clauses { border: 2px solid var(--rule); background: var(--pad); min-width: 0; }
.clause { padding: 20px 24px 22px; border-top: 1px solid var(--grid-major); scroll-margin-top: 16px; }
.clause:first-child { border-top: 0; }
.clause h2 { font: 700 1.3rem/1.1 var(--display); text-transform: uppercase; letter-spacing: .05em; margin: 0 0 10px; display: flex; gap: 12px; align-items: baseline; }
.clause h2 span { font: 500 .9rem/1 var(--mono); color: var(--faint); letter-spacing: 0; }
.clause h3 { font: 600 1.05rem/1.3 var(--body); margin: 16px 0 6px; }
.clause p { margin: 0 0 10px; max-width: 70ch; }
.clause p:last-child { margin-bottom: 0; }
.clause ul, .clause ol { margin: 0 0 10px; padding-left: 20px; max-width: 70ch; }
.clause ul:last-child, .clause ol:last-child { margin-bottom: 0; }
.clause li { margin: 5px 0; }
.clause code { font: 400 .86em var(--mono); background: var(--pad-2); padding: 1px 4px; }
.clause kbd { font: 500 .84em var(--mono); border: 1px solid var(--graphite); border-bottom-width: 2px; padding: 0 4px; border-radius: 2px; }
.summary { border-left: 4px solid var(--blue); padding-left: 14px; font-size: 1.08rem; }
.empty { border: 1.5px dashed var(--graphite); padding: 12px 14px; color: var(--graphite); font-size: .95rem; }

/* ── 404 ───────────────────────────────────── */
.lost { padding-block: clamp(48px, 9vw, 110px) 0; max-width: 40em; }
.lost .code { font: 500 1rem/1 var(--mono); color: var(--amber); margin: 0 0 14px; }

/* ── visit counts (/stats/, preview only) ──── */
.periods { display: flex; gap: 14px; flex-wrap: wrap; font: 400 .85rem/1 var(--mono); color: var(--faint); }
.periods a[aria-current] { color: var(--ink); font-weight: 500; text-decoration: none; }
.kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 18px; }
.kpi { border: 2px solid var(--rule); background: var(--pad); padding: 10px 16px 12px; min-width: 160px; }
.kpi small { display: block; font: 600 .7rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 8px; }
.kpi span { font: 500 1.6rem/1 var(--mono); font-variant-numeric: tabular-nums; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.stat { border: 2px solid var(--rule); background: var(--pad); padding: 14px 16px 16px; min-width: 0; }
.stat h2 { font: 700 1.1rem/1 var(--display); letter-spacing: .08em; text-transform: uppercase; margin: 0 0 10px; }
.stat table { width: 100%; border-collapse: collapse; font: 400 .86rem/1.3 var(--mono); }
.stat td { padding: 5px 0; border-top: 1px solid var(--grid-major); vertical-align: middle; overflow-wrap: anywhere; }
.stat td.bar { width: 38%; padding-inline: 10px; }
.stat td.n { width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.stat meter { display: block; width: 100%; height: 10px; }
.stats-note { margin-top: 18px; }

/* ── responsive ────────────────────────────── */
@media (max-width: 960px) {
  .tool { grid-template-columns: minmax(0, 1fr) 280px; }
  .tool-id { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 14px; flex-wrap: wrap; }
}
@media (max-width: 820px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .principles { grid-template-columns: minmax(0, 1fr); }
  .principle { border-left: 0; border-top: 1px solid var(--grid-major); }
  .principle:first-child { border-top: 0; }
  .policy { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
}
@media (max-width: 680px) {
  .tool { grid-template-columns: minmax(0, 1fr); }
  .sec-head { grid-template-columns: minmax(0, 1fr); }
  .note { grid-template-columns: minmax(0, 1fr); }
  .note svg { max-width: 120px; }
  .clause { padding: 18px 16px 20px; }
  .index-row.head { display: none; }
  .index-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "s st go" "t t t" "c c c"; gap: 8px 14px; }
  .index-row .series { grid-area: s; }
  .index-row .index-title { grid-area: t; }
  .index-row .count { grid-area: c; font-size: .85rem; color: var(--graphite); }
  .index-row .count::after { content: " tools"; }
  .index-row .count.none { display: none; }
  .index-row .status { grid-area: st; }
  .index-row .go { grid-area: go; }
  .titleblock { grid-template-columns: 1fr 1fr; }
  .tb.big { grid-column: 1 / -1; grid-row: auto; }
  .tb.wide, .tb.reg { grid-column: 1 / -1; }
  .strip nav { gap: 10px 12px; }
  .strip nav a { font-size: .88rem; letter-spacing: .06em; }
}

/* ── MCP playground (/mcp/try/, try.js) ────── */
:root { --amber-wash: rgba(168, 106, 18, .10); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --amber-wash: rgba(227, 165, 70, .12); } }
:root[data-theme="dark"] { --amber-wash: rgba(227, 165, 70, .12); }
.aside .try-fiction { color: var(--ink); border-left: 3px solid var(--amber); padding-left: 10px; }
.try-noscript { margin-top: 18px; border: 1.5px dashed var(--graphite); background: var(--pad); padding: 14px 16px; }
.try-noscript p { margin: 0 0 8px; }
.try-noscript ul { margin: 0; padding-left: 20px; font-size: .95rem; }
.try-noscript a { font-family: var(--mono); font-size: .88em; overflow-wrap: anywhere; }
.try { margin-top: 18px; }
.try-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; background: var(--rule); border: 2px solid var(--rule); }
.try-tabs button {
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start; min-width: 0;
  padding: 11px 14px 10px; border: 0; background: var(--pad); color: var(--ink); cursor: pointer; text-align: left;
}
.try-tabs .nm { font: 500 1.08rem/1.1 var(--mono); }
.try-tabs .tg { font: 600 .7rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); }
.try-tabs button:hover { background: var(--blue-wash); }
.try-tabs button[aria-selected="true"] { background: var(--ink); color: var(--pad); }
.try-tabs button[aria-selected="true"] .tg { color: var(--grid-major); }
.try-tabs button:focus-visible { outline: 2px solid var(--blue); outline-offset: -5px; }
.try-panel { border: 2px solid var(--rule); border-top: 0; background: var(--pad); padding: 18px 22px 22px; }
.try-panel:focus { outline: none; }
.try-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.try-for { margin: 0; color: var(--graphite); max-width: 72ch; }
.try-badge {
  display: inline-block; flex: none; white-space: nowrap; color: var(--amber); border: 1.5px dashed currentColor;
  font: 600 .72rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; padding: 5px 8px 4px;
}
.try-files h3, .try-qs h3, .try-label {
  display: block; font: 600 .74rem/1 var(--display); letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin: 0 0 8px;
}
.try-files { margin-top: 16px; }
.try-files ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.try-files li { display: flex; flex-wrap: wrap; gap: 2px 12px; align-items: baseline; font-size: .92rem; }
.try-files a { font: 400 .85rem/1.4 var(--mono); overflow-wrap: anywhere; }
.try-files span { color: var(--graphite); }
.try-body {
  display: grid; grid-template-columns: minmax(0, 310px) minmax(0, 1fr); gap: 26px;
  margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--grid-major);
}
.try-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.try-list button {
  display: flex; flex-direction: column; gap: 5px; width: 100%; text-align: left; cursor: pointer;
  padding: 9px 12px; border: 1.5px solid var(--grid-major); background: transparent; color: var(--ink); font: inherit;
}
.try-list .qq { font: 500 .95rem/1.35 var(--body); }
.try-list .tl { font: 400 .76rem/1 var(--mono); color: var(--faint); }
.try-list button:hover { border-color: var(--blue); background: var(--blue-wash); }
.try-list button:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.try-list button[aria-pressed="true"] { border-color: var(--ink); background: var(--pad-2); box-shadow: inset 4px 0 0 var(--blue); }
.try-run { min-width: 0; }
.try-q { font: 600 1.25rem/1.3 var(--body); margin: 0 0 14px; text-wrap: balance; }
.try-pre {
  margin: 0; padding: 12px 14px; background: var(--pad-2); border: 1.5px solid var(--ink); color: var(--ink);
  font: 400 .8rem/1.5 var(--mono); white-space: pre; overflow: auto; max-height: 440px; tab-size: 2;
}
.try-pre:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.try-req { max-height: 280px; }
.try-tool { margin-top: 8px; color: var(--graphite); font-size: .92rem; }
.try-tool summary { cursor: pointer; font: 400 .8rem/1.4 var(--mono); color: var(--blue); }
.try-tool p { margin: 6px 0 0; max-width: 70ch; }
.try-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 16px; margin: 16px 0; }
button.btn { cursor: pointer; font: inherit; }
.try-go[aria-disabled="true"] { opacity: .55; cursor: progress; }
.try-status { font: 400 .84rem/1.4 var(--mono); color: var(--graphite); }
.try-status.busy::before {
  content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: -1px;
  border: 2px solid var(--blue); border-right-color: transparent; border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .try-status.busy::before { animation: try-spin .8s linear infinite; }
}
@keyframes try-spin { to { transform: rotate(360deg); } }
.try-error { color: var(--amber); font-weight: 600; margin: 0 0 8px; }
.try-result { border-top: 2px solid var(--rule); padding-top: 10px; }
.try-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.try-bar .try-label { margin: 0; }
.try-rawbtn {
  flex: none; cursor: pointer; padding: 6px 10px; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  font: 600 .76rem/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
}
.try-rawbtn:hover { border-color: var(--blue); }
.try-rawbtn:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.try-rawbtn[aria-pressed="true"] { background: var(--ink); color: var(--pad); }
.try-note { margin: 12px 0 0; padding-left: 10px; border-left: 3px solid var(--amber); max-width: 70ch; }
.try-rec { margin: 14px 0 0; font: 400 .78rem/1.6 var(--mono); color: var(--graphite); }
.try-rec .try-badge { margin-right: 4px; }
.try-facts { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0 0 12px; }
.try-facts div { min-width: 0; max-width: 100%; }
.try-facts dt { font: 600 .66rem/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.try-facts dd { margin: 0; font: 400 .82rem/1.4 var(--mono); overflow-wrap: anywhere; }
.try-scroll { overflow: auto; max-height: 600px; border: 1.5px solid var(--grid-major); background: var(--pad); }
.try-scroll:focus-visible, .try-json:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.try-scroll > svg { display: block; }
.try-meta { margin: 6px 0 0; font: 400 .76rem/1.45 var(--mono); color: var(--faint); }
/* table */
.try-table { border-collapse: collapse; width: 100%; font: 400 .79rem/1.4 var(--mono); }
.try-table th { position: sticky; top: 0; z-index: 1; padding: 0; text-align: left; background: var(--pad-2); border-bottom: 1.5px solid var(--ink); }
.try-table th.n { text-align: right; }
.try-table th button {
  display: block; width: 100%; padding: 8px 10px 7px; border: 0; background: none; cursor: pointer; text-align: inherit; white-space: nowrap;
  font: 600 .72rem/1.1 var(--display); letter-spacing: .1em; text-transform: uppercase; color: var(--graphite);
}
.try-table th button:hover { color: var(--blue); }
.try-table th button:focus-visible { outline: 2px solid var(--blue); outline-offset: -3px; }
.try-table th[aria-sort="ascending"] button::after { content: " \25B2"; }
.try-table th[aria-sort="descending"] button::after { content: " \25BC"; }
.try-table td { padding: 5px 10px; border-top: 1px solid var(--grid-major); vertical-align: top; white-space: nowrap; }
.try-table td.long { white-space: normal; min-width: 20em; max-width: 36em; }
.try-table td.code { white-space: pre; max-width: none; }
.try-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.try-table td.nil { color: var(--faint); }
.try-table td.obj { color: var(--graphite); }
.try-table .flag-bad { color: var(--amber); font-weight: 500; }
.try-table .flag-warn { color: var(--ink); font-weight: 500; }
.try-table .flag-ok { color: var(--blue); }
.try-table tbody tr:hover { background: var(--blue-wash); }
/* gantt */
.try-gantt text { font-family: var(--mono); font-size: 11px; fill: var(--graphite); }
.try-gantt text.id { fill: var(--ink); }
.try-gantt .band { fill: var(--pad-2); }
.try-gantt .gl { stroke: var(--grid); stroke-width: 1; }
.try-gantt .gl.yr { stroke: var(--grid-major); stroke-width: 1.5; }
.try-gantt .sep { stroke: var(--rule); stroke-width: 1; }
.try-gantt .crit { fill: var(--blue); }
.try-gantt .near { fill: var(--amber); }
.try-gantt .norm { fill: var(--pad); stroke: var(--graphite); stroke-width: 1.5; }
.try-gantt .done { fill: var(--faint); }
.try-gantt text.tf { fill: var(--faint); font-size: 10px; }
.try-gantt .dd { stroke: var(--amber); stroke-width: 1.5; stroke-dasharray: 4 3; }
.try-gantt .ddtext, .try-curve .ddtext { fill: var(--amber); font-weight: 500; }
.try-legend { margin: 8px 0 0; font: 400 .76rem/1.4 var(--mono); color: var(--graphite); }
.try-legend i { width: 14px; height: 10px; border: 0; }
.try-legend i.k-crit { background: var(--blue); }
.try-legend i.k-near { background: var(--amber); }
.try-legend i.k-norm { background: var(--pad); border: 1.5px solid var(--graphite); }
.try-legend i.k-done { background: var(--faint); }
.try-legend i.k-dd { width: 2px; height: 12px; background: var(--amber); }
.try-legend i.k-planned { width: 22px; height: 0; border-top: 2px dashed var(--graphite); }
.try-legend i.k-actual { width: 22px; height: 0; border-top: 3px solid var(--blue); }
.try-legend i.k-forecast { width: 22px; height: 0; border-top: 3px dotted var(--amber); }
.try-legend i.k-ac { width: 22px; height: 0; border-top: 3px solid var(--amber); }
.try-legend i.k-other { width: 22px; height: 0; border-top: 2px solid var(--ink); }
/* s-curve (shares the .fig drawing style) */
figure.try-fig { padding: 12px 12px 8px; }
.try-curve .line { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.try-curve .line.planned { stroke: var(--graphite); stroke-width: 2; stroke-dasharray: 6 5; }
.try-curve .line.actual { stroke: var(--blue); stroke-width: 3; }
.try-curve .line.forecast { stroke: var(--amber); stroke-width: 2.5; stroke-dasharray: 2 5; }
.try-curve .line.ac { stroke: var(--amber); stroke-width: 2.5; }
.try-curve .line.other { stroke: var(--ink); stroke-width: 1.5; }
.try-curve .hit { outline: none; }
.try-curve .hit:focus-visible { stroke: var(--blue); stroke-width: 2; }
/* graph */
.try-graph .edge { fill: none; stroke: var(--graphite); stroke-width: 1.25; }
.try-graph .edge.on { stroke: var(--blue); stroke-width: 2.4; }
.try-graph marker path { fill: var(--graphite); }
.try-graph .node { outline: none; cursor: default; }
.try-graph .node rect { fill: var(--pad); stroke: var(--ink); stroke-width: 1.5; }
.try-graph .node text { font-family: var(--mono); font-size: 12px; fill: var(--ink); }
.try-graph .node.focus rect { fill: var(--ink); }
.try-graph .node.focus text { fill: var(--pad); }
.try-graph .node.col rect { fill: var(--pad-2); stroke: var(--graphite); }
.try-graph .node.root rect { stroke: var(--blue); }
.try-graph .node.orphan rect { stroke: var(--amber); stroke-dasharray: 4 3; }
.try-graph .node:hover rect, .try-graph .node:focus-visible rect { stroke: var(--blue); stroke-width: 3; }
/* changes */
.try-hunk { margin-top: 12px; }
.try-hunk:first-child { margin-top: 0; }
.try-hunk h4 { margin: 0 0 4px; font: 500 .8rem/1.35 var(--mono); color: var(--ink); overflow-wrap: anywhere; }
.try-diff { margin: 0; padding: 6px 0; background: var(--pad-2); border: 1.5px solid var(--ink); font: 400 .8rem/1.5 var(--mono); overflow: auto; max-height: 360px; }
.try-diff:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.try-diff span { display: block; padding: 0 12px; white-space: pre; min-width: max-content; }
.try-diff .add { background: var(--blue-wash); color: var(--blue); }
.try-diff .del { background: var(--amber-wash); color: var(--amber); }
.try-diff .hunk { color: var(--faint); }
.try-diff .file { color: var(--graphite); font-weight: 500; }
/* json tree */
.try-json, .try-json ul { list-style: none; margin: 0; padding: 0 0 0 16px; }
.try-json { padding: 10px 12px; border: 1.5px solid var(--grid-major); max-height: 600px; overflow: auto; font: 400 .79rem/1.6 var(--mono); }
.try-json summary { cursor: pointer; }
.try-json summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.try-json .k { color: var(--graphite); }
.try-json .str { color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.try-json .num { color: var(--blue); }
.try-json .bool, .try-json .nil { color: var(--amber); }
.try-json .meta { color: var(--faint); margin-left: 4px; }
/* install list */
.try-install { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px 28px; }
.try-install li { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.try-install a.tool-name { font-size: 1.1rem; color: var(--ink); text-decoration: none; }
.try-install a.tool-name:hover { color: var(--blue); }
@media (max-width: 820px) {
  .try-body { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .try-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .try-tabs button:last-child { grid-column: span 2; }
  .try-tabs button { padding: 9px 10px 8px; }
  .try-panel { padding: 14px 14px 18px; }
  .try-head { flex-direction: column; }
}