/* CalyxCash Developer API → How it works. Uses the console theme tokens from web.css
   and the api-* primitives from api.css; everything here is ins-* scoped. */
.ins{--ins-gold:#b88a2e;--ins-teal:#1f8f83;--ins-navy:#0b1020}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .ins{--ins-gold:#e0b25a;--ins-teal:#3fbfb0}}
:root[data-theme="dark"] .ins{--ins-gold:#e0b25a;--ins-teal:#3fbfb0}
.ins-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ins-eyebrow{font:600 11px/1.4 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--accent-2);margin:0 0 6px}
.ins-code{font:12px/1.4 var(--mono);background:var(--bg-3);color:var(--ink);border-radius:5px;padding:1px 6px;overflow-wrap:anywhere}
.ins-img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;background:var(--ins-navy)}
.ins-fine{font-size:12px;color:var(--ink-3);margin:8px 0 0;max-width:80ch}
.ins-warn{color:var(--warn)}
.ins-ctas{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

/* Hero */
.ins-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:center;margin:18px 0 14px}
.ins-hero h1{font:500 34px/1.15 var(--serif);letter-spacing:-.4px;margin:0;color:var(--ink)}
.ins-lede{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:12px 0 0;max-width:56ch}
.ins-hero-fig{margin:0;box-shadow:var(--shadow);border-radius:12px}

/* Live stats */
.ins-stats-wrap{margin:0 0 30px}
.ins-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0}
.ins-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.ins-stat dt{font-size:12px;color:var(--ink-3);margin:0 0 2px}
.ins-stat dd{margin:0;font:500 30px/1.15 var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.ins-stat span{font-size:12px;color:var(--ink-3)}
.ins-stamp{font-size:12px;color:var(--ink-3);margin:8px 2px 0}
.ins-stamp:empty{display:none}

/* Sections */
.ins-section{margin:0 0 40px}
.ins-section>h2,.ins-final h2{font:500 24px/1.25 var(--serif);letter-spacing:-.2px;margin:0 0 6px;color:var(--ink)}
.ins-sub{color:var(--ink-2);margin:0 0 18px;max-width:72ch;line-height:1.55}

/* Value cards */
.ins-values{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ins-value{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.ins-value h3{font:600 14.5px/1.35 var(--sans);margin:10px 0 4px;color:var(--ink)}
.ins-value p{font-size:13px;line-height:1.55;color:var(--ink-2);margin:0}
.ins-ico{width:26px;height:26px;color:var(--ins-teal);padding:6px;border-radius:9px;background:var(--bg-2);box-sizing:content-box}

/* Trace chain */
.ins-chain{list-style:none;padding:0;margin:0 0 18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;position:relative}
.ins-link{position:relative;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px 14px 12px;display:grid;gap:4px;align-content:start;min-width:0}
.ins-link small{font-size:11.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.ins-link strong{font-size:14px;color:var(--ink);line-height:1.35}
.ins-link .ins-code{justify-self:start;font-size:11.5px}
.ins-link:not(:last-child)::after{content:"";position:absolute;right:-17px;top:50%;width:12px;height:12px;border-top:2px solid var(--ins-gold);border-right:2px solid var(--ins-gold);transform:translateY(-50%) rotate(45deg)}
.ins-link:first-child{border-color:var(--ins-gold)}
.ins-link:last-child{border-color:var(--ins-teal)}
.ins-link-n{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ins-gold);color:#1b1404;font:700 11.5px var(--sans)}

/* Annotated response */
.ins-anatomy{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:16px;align-items:start}
.ins-json-wrap{border:1px solid var(--line);border-radius:12px;background:var(--bg-2);overflow:hidden;min-width:0}
.ins-json-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 8px 6px 12px;background:var(--bg-3);border-bottom:1px solid var(--line);font:12px var(--mono);color:var(--ink-2)}
.ins-json{margin:0;padding:12px 0;font:12px/1.65 var(--mono);color:var(--ink);overflow-x:auto;white-space:pre;max-height:none;background:transparent;border:0}
.ins-json-wrap .ins-fine{padding:0 12px 10px}
.ins-line{display:inline-block;min-width:100%;padding:0 14px;box-sizing:border-box;border-left:3px solid transparent}
.ins-line.on{background:var(--accent-soft);border-left-color:var(--accent)}
.ins-mark{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;border:0;background:var(--ins-gold);color:#1b1404;font:700 11px var(--sans);cursor:pointer;vertical-align:1px}
.ins-mark:hover,.ins-mark:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.ins-mark.static{cursor:inherit;flex:none;margin-top:1px}
.ins-notes{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ins-note{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:9px 11px;cursor:pointer;font:inherit;color:inherit}
.ins-note>span:last-child{display:grid;gap:2px}
.ins-note strong{font-size:13px;color:var(--ink)}
.ins-note span span{font-size:12.5px;line-height:1.5;color:var(--ink-2)}
.ins-notes li.on .ins-note{border-color:var(--accent);background:var(--accent-soft)}

/* Pipeline */
.ins-flow{display:none}
.ins-steps{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin:0 0 12px;counter-reset:s}
.ins-steps button{display:flex;align-items:center;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--card);font:600 13px var(--sans);color:var(--ink-2);cursor:pointer;position:relative;min-width:0}
.ins-steps button[aria-selected=true]{border-color:var(--ins-gold);color:var(--ink);box-shadow:0 0 0 1px var(--ins-gold) inset}
.ins-steps button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ins-step-n{flex:none;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;border:1.5px solid var(--line-2);font:700 11px var(--sans)}
.ins-steps button.done .ins-step-n{background:var(--ins-teal);border-color:var(--ins-teal);color:#fff}
.ins-steps button[aria-selected=true] .ins-step-n{background:var(--ins-gold);border-color:var(--ins-gold);color:#1b1404}
.ins-stage{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:24px;align-items:center;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px}
.ins-stage:focus-visible{outline:2px solid var(--accent)}
.ins-stage-fig{margin:0}
.ins-stage-text h3{font:500 22px/1.2 var(--serif);margin:0 0 8px;color:var(--ink)}
.ins-stage-text>p{font-size:14px;line-height:1.6;color:var(--ink-2);margin:0 0 10px}
.ins-why{background:var(--bg-2);border-radius:10px;padding:10px 12px}
.ins-why strong{color:var(--ink)}
.ins-fields{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ins-fields>span{font-size:12px;color:var(--ink-3);width:100%}
.ins-stage-nav{display:flex;justify-content:space-between;gap:8px;margin-top:14px}

/* Clocks */
.ins-clocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;position:relative;padding-top:18px}
.ins-clocks::before{content:"";position:absolute;left:12px;right:12px;top:24px;height:2px;background:linear-gradient(90deg,var(--ins-teal),var(--ins-gold))}
.ins-clock{position:relative;display:grid;gap:4px;padding:22px 14px 0 12px;align-content:start}
.ins-clock-dot{position:absolute;top:0;left:12px;width:14px;height:14px;border-radius:50%;background:var(--card);border:3px solid var(--ins-teal)}
.ins-clock.cut .ins-clock-dot{border-color:var(--ins-gold);background:var(--ins-gold)}
.ins-clock strong{font-size:14px;color:var(--ink)}
.ins-clock>span:not(.ins-clock-dot){font-size:12.5px;color:var(--ink-2);line-height:1.45}
.ins-clock .ins-code{justify-self:start;font-size:11px}

/* Data map */
.ins-families{display:grid;gap:8px}
.ins-family{background:var(--card);border:1px solid var(--line);border-radius:12px}
.ins-family>summary{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 16px;cursor:pointer;list-style:none}
.ins-family>summary::-webkit-details-marker{display:none}
.ins-family>summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin:0 4px 4px 0;transition:transform .15s;grid-column:3}
.ins-family[open]>summary::after{transform:rotate(225deg);margin:4px 4px 0 0}
.ins-family>summary strong{display:block;font-size:14px;color:var(--ink)}
.ins-family>summary small{font-size:12px;color:var(--ink-3)}
.ins-count{font-size:12px;color:var(--ink-2);white-space:nowrap;font-variant-numeric:tabular-nums}
.ins-family-text{margin:0;padding:0 16px 8px;font-size:13px;color:var(--ink-2)}
.ins-sources{list-style:none;margin:0;padding:4px 16px 12px;display:grid;gap:2px}
.ins-sources li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line)}
.ins-sources strong{font-size:13px;font-weight:500;color:var(--ink)}
.ins-sources .ins-code{font-size:11px;color:var(--ink-3)}

/* Comparison */
.ins-cmp th[scope=row]{font-weight:600;color:var(--ink);white-space:normal}
.ins-cmp td,.ins-cmp th{vertical-align:top}
.ins-cmp .ins-us{background:var(--accent-soft);color:var(--ink)}
.ins-cmp thead .ins-us{color:var(--accent-ink)}

/* Lifecycle */
.ins-life{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.ins-life li{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;display:grid;gap:4px;align-content:start;position:relative}
.ins-life li:last-child{border-color:var(--good)}
.ins-life strong{font-size:13.5px;color:var(--ink)}
.ins-life span:not(.ins-link-n){font-size:12px;line-height:1.45;color:var(--ink-2)}
.ins-fail{background:var(--good-soft);color:var(--ink);border-radius:10px;padding:10px 14px;font-size:13px;margin:0 0 16px}
.ins-section .api-table td.num{white-space:nowrap}
.ins-connect .api-tabs{flex-wrap:wrap}
.ins-cap{caption-side:top;text-align:left;font-size:12.5px;color:var(--ink-3);padding:0 0 8px}

/* Connect */
.ins-connect{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:20px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.ins-connect h3{font:600 15px var(--sans);margin:0 0 6px;color:var(--ink)}
.ins-connect p{font-size:13.5px;color:var(--ink-2);line-height:1.55;margin:0 0 10px}
.ins-snippet{margin:0;padding:12px 14px;font:12px/1.6 var(--mono);white-space:pre;overflow-x:auto;background:transparent;border:0;max-height:none}
.ins-prompts{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ins-prompts li{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;background:var(--bg-2);border-radius:10px;padding:9px 10px 9px 12px;font-size:13px;color:var(--ink);line-height:1.45}

/* Limits + final */
.ins-limits{margin:0;padding:0 0 0 18px;display:grid;gap:8px;max-width:80ch}
.ins-limits li{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.ins-limits strong{color:var(--ink)}
.ins-final{text-align:center;background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:28px 20px;margin:0 0 20px}
.ins-final p{color:var(--ink-2);margin:0}
.ins-final .ins-ctas{justify-content:center}

/* Responsive */
@media(max-width:1100px){.ins-steps{grid-template-columns:repeat(3,minmax(0,1fr))}.ins-life{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){
 .ins-hero,.ins-anatomy,.ins-stage,.ins-connect{grid-template-columns:minmax(0,1fr)}
 .ins-hero h1{font-size:28px}
 .ins-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ins-values{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ins-chain{grid-template-columns:minmax(0,1fr);gap:18px}
 .ins-link:not(:last-child)::after{right:auto;left:22px;top:auto;bottom:-14px;transform:rotate(135deg)}
 .ins-clocks{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:18px}
 .ins-clocks::before{display:none}
}
@media(max-width:600px){
 .ins-values,.ins-stats{grid-template-columns:minmax(0,1fr)}
 .ins-steps,.ins-life{grid-template-columns:repeat(2,minmax(0,1fr))}
 .ins-clocks{grid-template-columns:minmax(0,1fr)}
 .ins-sources li{grid-template-columns:minmax(0,1fr)}
 .ins-sources .ins-code{display:none}
 .ins-cmp thead{display:none}
 .ins-cmp,.ins-cmp tbody,.ins-cmp tr,.ins-cmp th,.ins-cmp td{display:block;width:auto}
 .ins-cmp tr{border:1px solid var(--line);border-radius:12px;margin:0 0 10px;overflow:hidden;background:var(--card)}
 .ins-cmp th[scope=row]{padding:10px 12px 4px;border:0}
 .ins-cmp td{border:0;padding:6px 12px}
 .ins-cmp td::before{content:attr(data-label);display:block;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3)}
 .ins-cmp td.ins-us{padding-bottom:10px}
 .ins-for{display:none}
}
@media(prefers-reduced-motion:reduce){.ins-family>summary::after{transition:none}}