@import url("./brand.css");
@import url("./tokens.css");
@import url("./scene.css");

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--kl-page); scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; color: var(--kl-ink); background: var(--kl-wallpaper); font: 17px/1.55 var(--kl-font-sans); letter-spacing: -.011em; -webkit-font-smoothing: antialiased; }
img, svg { max-width: 100%; }
a { color: inherit; text-underline-offset: .2em; }
button, select { font: inherit; }
button, a, select { touch-action: manipulation; }
h1, h2, h3, p { margin-top: 0; }
h2 { margin-bottom: 0; font: 750 clamp(2rem, 4.6vw, 3.9rem)/1.03 var(--kl-font-display); letter-spacing: -.036em; text-wrap: balance; }
h3 { font-family: var(--kl-font-display); letter-spacing: -.02em; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 40; top: .75rem; left: .75rem; padding: .7rem 1rem; transform: translateY(-180%); border-radius: 999px; background: var(--kl-graphite); color: #fff; font-weight: 600; }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--kl-muted); }
.text-link { display: inline-flex; gap: .3rem; color: var(--kl-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--kl-line-strong); text-underline-offset: .3em; }
.text-link:hover { text-decoration-color: currentColor; }

/* Shared section grammar: a numbered mono eyebrow, display heading and an intro column. */
main { display: block; counter-reset: chapter; }
main > section { padding-inline: max(var(--gutter), calc((100% - var(--page)) / 2)); }
main > section + section { margin-top: var(--section-gap); }
.eyebrow { margin: 0 0 1.1rem; color: var(--kl-muted); font: 600 .72rem/1.3 var(--kl-font-mono); letter-spacing: .09em; text-transform: uppercase; }
.section-head { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: end; gap: 1.5rem 4rem; margin-bottom: clamp(2rem, 4vw, 3.4rem); padding-top: 1.6rem; border-top: 1px solid var(--kl-line-strong); }
.section-head .eyebrow::before, .engine-copy .eyebrow::before, .reproduce .eyebrow::before { counter-increment: chapter; content: counter(chapter, decimal-leading-zero) " — "; color: var(--kl-ink); }
.section-intro { margin: 0; max-width: 30rem; color: var(--kl-muted); font-size: 1.05rem; }

/* Header: a floating Liquid Glass capsule */
.site-header { position: sticky; top: 0; z-index: 30; padding: var(--header-top) var(--gutter) 0; pointer-events: none; }
.site-header-inner { width: min(100%, 980px); height: var(--header-height); margin: 0 auto; padding: 0 8px 0 18px; display: flex; align-items: center; gap: 1rem; border: 1px solid var(--kl-stroke); border-radius: 999px; background: var(--kl-sheen), rgba(250, 249, 246, .72); box-shadow: var(--kl-shadow); backdrop-filter: var(--kl-glass); pointer-events: auto; }
.site-header .brand { flex: none; }
/* The nav is a popover so phones get a menu sheet; wide screens reset the UA popover box to an inline row. */
.site-nav { position: static; display: flex; align-items: center; gap: .15rem; width: auto; height: auto; min-width: 0; margin: 0 0 0 auto; padding: 0; overflow: visible; border: 0; background: none; color: inherit; }
.site-nav a { padding: .45rem .8rem; border-radius: 999px; color: var(--kl-ink-2); font-size: .86rem; font-weight: 550; text-decoration: none; white-space: nowrap; }
.site-nav a:hover { background: var(--kl-surface-3); color: var(--kl-ink); }
.site-header-actions { display: flex; flex: none; align-items: center; gap: .4rem; }
.nav-cta { display: inline-flex; align-items: center; gap: .3rem; height: 40px; padding: 0 1.05rem; border-radius: 999px; background: var(--kl-graphite); color: #fff; font-size: .86rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.nav-cta:hover { background: var(--kl-graphite-3); }
.nav-toggle { display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--kl-line); border-radius: 50%; background: rgba(255, 255, 255, .7); color: var(--kl-ink); cursor: pointer; }
.nav-toggle:hover { background: #fff; }
.nav-toggle-bars { position: relative; width: 16px; height: 10px; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; width: 100%; height: 1.6px; border-radius: 2px; background: currentColor; transition: transform .3s var(--kl-ease); }
.nav-toggle-bars::before { top: 0; }
.nav-toggle-bars::after { bottom: 0; }
.site-header-inner:has(.site-nav:popover-open) .nav-toggle { background: #fff; }
.site-header-inner:has(.site-nav:popover-open) .nav-toggle-bars::before { transform: translateY(4.2px) rotate(45deg); }
.site-header-inner:has(.site-nav:popover-open) .nav-toggle-bars::after { transform: translateY(-4.2px) rotate(-45deg); }

/* Product opening: motivation, the live scene and a clear way in. */
.hero { display: grid; gap: 2rem; padding-top: clamp(2.5rem, 4.5vw, 4rem); }
.hero-head { min-width: 0; max-width: 62rem; margin-inline: auto; text-align: center; }
.hero-status { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.6rem; padding: .5rem .9rem; border: 1px solid var(--kl-stroke); border-radius: 999px; background: var(--kl-surface); box-shadow: var(--kl-shadow-sm); color: var(--kl-ink-2); font: 600 .68rem/1.3 var(--kl-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.status-dot { width: .5rem; height: .5rem; flex: none; border-radius: 50%; background: var(--kl-iris); box-shadow: 0 0 0 3px rgba(227, 166, 255, .2); }
h1 { margin: 0; font: 780 clamp(2.6rem, 6.5vw, 5.8rem)/.98 var(--kl-font-display); letter-spacing: -.055em; text-wrap: balance; }
.h1-break { display: block; }
h1 .kl-mark { background-size: 100% .07em; background-position: 0 98%; }
.hero-summary { max-width: 46rem; margin: 1.4rem auto 0; color: var(--kl-ink-2); font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; text-wrap: pretty; }
.hero-summary strong { color: var(--kl-ink); font-weight: 650; }
.hero-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .65rem; margin-top: 1.5rem; }
.hero-actions .kl-btn { min-height: 46px; padding: 0 1.35rem; font-size: .9rem; }
.hero-access { margin: 1.1rem 0 0; color: var(--kl-muted); font: .7rem/1.4 var(--kl-font-mono); letter-spacing: .05em; }
.stage { position: relative; grid-column: 1 / -1; margin: 0; padding: 10px; border: 1px solid var(--kl-stroke); border-radius: var(--kl-radius-xl); background: var(--kl-sheen), var(--kl-surface-2); box-shadow: var(--kl-shadow-lg); }
.scene-frame { position: relative; min-height: 260px; aspect-ratio: 2; overflow: hidden; border-radius: 24px; background: #f6f2ec; }
.cluster-poster { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; }
#cluster-scene .scene-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.stage-pins { display: flex; justify-content: center; flex-wrap: wrap; gap: .5rem; margin: 0; padding: .75rem 1rem .25rem; list-style: none; pointer-events: none; }
.stage-pins li { padding: .35rem .75rem; border: 1px solid var(--kl-stroke); border-radius: 999px; background: rgba(255, 255, 255, .72); color: var(--kl-muted); font-size: .76rem; box-shadow: var(--kl-shadow-sm); backdrop-filter: var(--kl-glass); }
.stage-pins b { color: var(--kl-ink); font-weight: 700; }
.scene-caption-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem .6rem .25rem; }
.scene-caption-row figcaption { display: grid; color: var(--kl-muted); font-size: .84rem; }
.caption-kicker { color: var(--kl-ink); font-weight: 650; }

.hero-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--kl-line-strong); }
.hero-facts li { display: grid; align-content: start; gap: .35rem; padding: 1.2rem 1.4rem 0 0; }
.hero-facts li + li { padding-left: 1.4rem; border-left: 1px solid var(--kl-line); }
.hero-facts strong { font: 700 1rem/1.25 var(--kl-font-display); letter-spacing: -.015em; }
.hero-facts span { color: var(--kl-muted); font-size: .88rem; line-height: 1.5; }

/* Anatomy: numbered steps beside a graphite terminal */
.anatomy-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
.anatomy-steps { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.anatomy-steps::before { content: ""; position: absolute; top: 1.2rem; bottom: 1.2rem; left: 1.15rem; width: 2px; border-radius: 2px; background: linear-gradient(180deg, var(--kl-peach), var(--kl-lilac), var(--kl-periwinkle)); }
.anatomy-steps li { position: relative; display: grid; grid-template-columns: 2.3rem minmax(0, 1fr); gap: 1.1rem; padding: .9rem 0 1.3rem; }
.step-no { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 1px solid var(--kl-stroke); border-radius: 50%; background: var(--kl-surface-solid); box-shadow: var(--kl-shadow); font: 700 .72rem/1 var(--kl-font-mono); }
.anatomy-steps h3, .method-rail h3 { margin: .3rem 0 .35rem; font-size: 1.15rem; }
.anatomy-steps p, .method-rail p { margin: 0; color: var(--kl-muted); font-size: .95rem; }
.terminal { min-width: 0; display: grid; border-radius: var(--kl-radius-xl); overflow: hidden; }
.code-card { min-width: 0; }
.code-card + .code-card { border-top: 1px solid var(--kl-graphite-line); }
.code-card header { display: flex; align-items: center; gap: .6rem; padding: 1rem 1.3rem 0; color: var(--kl-on-graphite-muted); font-size: .8rem; font-weight: 600; }
.code-tag { padding: .2rem .5rem; border-radius: 6px; background: var(--kl-iris); color: var(--kl-graphite); font: 700 .66rem/1.2 var(--kl-font-mono); letter-spacing: .06em; }
.code-card pre { margin: 0; padding: .9rem 1.3rem 1.4rem; overflow-x: auto; color: var(--kl-on-graphite); font: .8rem/1.7 var(--kl-font-mono); }
.tok-key { color: var(--tok-key); }
.tok-str { color: var(--tok-str); }
.tok-val { color: var(--tok-val); }

/* Data-shape bento */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(15.5rem, auto); gap: .9rem; }
.shape { position: relative; min-width: 0; display: flex; flex-direction: column; gap: .35rem; padding: 1.3rem 1.3rem 1.2rem; border: 1px solid var(--kl-stroke); border-radius: var(--kl-radius-lg); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow); color: var(--kl-ink); text-decoration: none; backdrop-filter: var(--kl-glass); transition: transform .3s var(--kl-ease), box-shadow .3s var(--kl-ease); }
.shape:hover { transform: translateY(-3px); box-shadow: var(--kl-shadow-lg); }
.shape--rows { grid-column: span 2; grid-row: span 2; }
.shape--vectors { grid-column: span 2; }
.shape-art { width: 100%; height: 4.6rem; margin-bottom: auto; fill: none; stroke: var(--kl-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.shape--rows .shape-art { height: auto; max-height: 15rem; margin-bottom: auto; stroke-width: 1.6; }
.shape-art * { vector-effect: non-scaling-stroke; }
.shape-art .fill { fill: url(#iris); stroke: none; }
.shape-art .head { fill: rgba(17, 18, 20, .06); stroke: none; }
.shape--rows .shape-art rect:not(.fill) { fill: none; }
.shape-art circle:not(.fill), .shape-art rect:not(.fill) { fill: rgba(255, 255, 255, .7); }
.shape-no { margin-top: 1.2rem; color: var(--kl-faint); font: 600 .7rem/1 var(--kl-font-mono); letter-spacing: .08em; }
.shape h3 { margin: 0; font-size: 1.2rem; }
.shape--rows h3 { font-size: clamp(1.4rem, 2.4vw, 2rem); letter-spacing: -.035em; }
.shape p { margin: 0; color: var(--kl-muted); font-size: .9rem; line-height: 1.5; }
.shape-link { margin-top: .5rem; color: var(--kl-ink-2); font-size: .8rem; font-weight: 600; }

/* Motivation: recognizable requirements lead to one coherent database. */
.thesis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .9rem; }
.thesis-card { min-width: 0; padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid var(--kl-stroke); border-radius: var(--kl-radius-xl); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow); backdrop-filter: var(--kl-glass); }
.thesis-card h3 { margin: 0 0 1.2rem; font-size: 1.35rem; }
.thesis-card { display: flex; flex-direction: column; }
.thesis-card .thesis-stack { flex: 1; grid-auto-rows: 1fr; }
.thesis-stack li { grid-template-columns: 1.7rem minmax(0, 1fr); align-content: center !important; padding-left: .85rem !important; }
.thesis-stack li > * { grid-column: 2; }
.thesis-stack li::before { position: static !important; grid-row: 1 / span 2; align-self: start; padding-top: .3rem; }
.thesis-card > p { margin: auto 0 0; padding-top: 1.2rem; color: var(--kl-muted); font-size: .92rem; }
.thesis-stack { counter-reset: requirement; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; }
.thesis-stack li { display: grid; align-content: start; gap: .1rem; min-width: 0; padding: .65rem .85rem; position: relative; padding-left: 2.5rem; border: 1px solid var(--kl-line); border-radius: var(--kl-radius); background: rgba(255, 255, 255, .5); color: var(--kl-muted); font: .72rem/1.4 var(--kl-font-mono); }
.thesis-stack li::before { counter-increment: requirement; content: counter(requirement, decimal-leading-zero); position: absolute; left: .8rem; top: .85rem; color: #8c6f9c; font: .6rem/1.3 var(--kl-font-mono); }
.card-eyebrow { margin: 0 0 .6rem !important; color: var(--kl-muted); font: .68rem/1.4 var(--kl-font-mono); letter-spacing: .07em; text-transform: uppercase; }
.thesis-card--one .card-eyebrow { color: var(--kl-on-graphite-muted); }
.thesis-stack b { color: var(--kl-ink-2); font: 650 .95rem/1.3 var(--kl-font-display); letter-spacing: -.01em; }
.thesis-card--one { border-color: var(--kl-graphite-line); background: linear-gradient(180deg, var(--kl-graphite-2) 0%, var(--kl-graphite) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 60px rgba(17, 18, 20, .22); color: var(--kl-on-graphite); }
.thesis-card--one h3 { color: #fff; }
.thesis-points { display: grid; gap: 1.15rem; margin: 0; padding: 0; list-style: none; }
.thesis-points li { display: grid; gap: .2rem; padding-left: 1rem; border-left: 2px solid transparent; border-image: linear-gradient(180deg, var(--kl-peach), var(--kl-lilac), var(--kl-periwinkle)) 1; color: var(--kl-on-graphite-muted); font-size: .92rem; }
.thesis-points b { color: #fff; font: 700 1.05rem/1.3 var(--kl-font-display); letter-spacing: -.015em; }
.thesis-points { margin-bottom: 1.8rem !important; }
.thesis-future { margin-top: auto; padding-top: 1.4rem; border-top: 1px solid var(--kl-graphite-line); }
.thesis-future-lead { margin: 0 0 .55rem; background: var(--kl-iris); -webkit-background-clip: text; background-clip: text; color: transparent; font: 760 clamp(1.6rem, 2.8vw, 2.2rem)/1.1 var(--kl-font-display); letter-spacing: -.035em; }
.thesis-future p:last-child { margin: 0; color: var(--kl-on-graphite-muted); font-size: .95rem; line-height: 1.6; }
.why-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.why-grid .shape-no { margin-top: 0; color: var(--kl-ink-2); }
.why-grid .shape-link { margin-top: auto; padding-top: .5rem; }

/* Engine cross-section on graphite */
.engine-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4.5rem); padding: clamp(1.6rem, 5vw, 4rem); border-radius: var(--kl-radius-xl); }
.engine .eyebrow, .engine .eyebrow::before, .reproduce .eyebrow::before { color: var(--kl-on-graphite-muted); }
.engine h2 { margin-bottom: 1.4rem; color: #fff; }
.engine-copy p { color: var(--kl-on-graphite-muted); }
.engine .text-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .3); }
.stack { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; counter-reset: layer; }
.layer { position: relative; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: .95rem 1.1rem; border: 1px solid var(--kl-graphite-line); border-radius: var(--kl-radius); background: rgba(255, 255, 255, .04); color: var(--kl-on-graphite); font-size: .92rem; }
.layer + .layer::before { content: ""; position: absolute; top: -.6rem; left: 50%; width: 1px; height: .6rem; background: var(--kl-iris); }
.layer-tag { color: var(--kl-on-graphite-muted); font: 600 .7rem/1.3 var(--kl-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.layer-body { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill { padding: .2rem .65rem; border: 1px solid var(--kl-graphite-line); border-radius: 999px; background: rgba(255, 255, 255, .06); font-size: .8rem; }
.layer--hosts { grid-template-columns: minmax(0, 1fr); background: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02)); }
.hosts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
.host { display: grid; gap: .15rem; padding: .8rem; border-radius: 12px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 2px 0 rgba(227, 166, 255, .55); font: .74rem/1.4 var(--kl-font-mono); color: var(--kl-on-graphite-muted); }
.host b { color: #fff; font: 700 .9rem/1.3 var(--kl-font-display); }
.host small { font-size: .7rem; }

/* Benchmarks */
/* One hue per case kind (validated categorical set); 1 node is the full gradient, 3 nodes the same hue lighter. */
#bench-results { --c1: #c9c9cf; --c2: var(--kl-graphite-3); }
[data-kind="write"] { --c1: #ffc2a3; --c2: #e8743b; }
[data-kind="read"] { --c1: #c4b8ff; --c2: #6f5cf0; }
[data-kind="query"] { --c1: #ecd39c; --c2: #b8862b; }
[data-kind="vector"] { --c1: #b7d2ff; --c2: #386bbb; }
[data-kind="queue"] { --c1: #afe5d0; --c2: #268461; }
[data-kind="mixed"] { --c1: #f2b3d6; --c2: #c2549a; }
.instrument { border: 1px solid var(--kl-stroke); border-radius: var(--kl-radius-xl); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow-lg); backdrop-filter: var(--kl-glass); overflow: clip; }
.bench-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--kl-line); }
.bench-kpis:empty { display: none; }
.kpi { display: grid; gap: .3rem; padding: clamp(1.1rem, 2.4vw, 1.8rem) clamp(1rem, 2.4vw, 2rem); }
.kpi + .kpi { border-left: 1px solid var(--kl-line); }
.kpi strong { justify-self: start; background: linear-gradient(100deg, #e8743b, #c2549a 55%, #6f5cf0); -webkit-background-clip: text; background-clip: text; color: transparent; font: 760 clamp(2rem, 4.2vw, 3.3rem)/1.05 var(--kl-font-display); letter-spacing: -.045em; }
.kpi span { color: var(--kl-muted); font-size: .86rem; }
.bench-controls { padding: 1.1rem clamp(1rem, 2.4vw, 2rem); border-bottom: 1px solid var(--kl-line); background: rgba(255, 255, 255, .42); }
.bench-controls fieldset { position: relative; min-width: 0; margin: 0; padding: 0 0 0 8.5rem; border: 0; }
.bench-controls legend { position: absolute; left: 0; top: .6rem; padding: 0; color: var(--kl-muted); font: 600 .68rem/1.2 var(--kl-font-mono); letter-spacing: .08em; text-transform: uppercase; }
.chip-row { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip span { display: inline-flex; align-items: center; gap: .45rem; min-height: 34px; padding: 0 .85rem; border: 1px solid var(--kl-line-strong); border-radius: 999px; background: rgba(255, 255, 255, .7); color: var(--kl-ink-2); font-size: .86rem; font-weight: 560; white-space: nowrap; transition: background-color .2s var(--kl-ease), color .2s var(--kl-ease), border-color .2s var(--kl-ease); }
.chip:hover span { border-color: var(--kl-muted); background: #fff; }
.chip input:checked + span { border-color: var(--kl-graphite); background: var(--kl-graphite); color: var(--kl-on-graphite); }
.chip input:focus-visible + span { outline: 2px solid var(--kl-accent); outline-offset: 2px; }
.chip small { min-width: 1.3rem; padding: .05rem .38rem; border-radius: 999px; background: var(--kl-surface-3); font: 650 .68rem/1.4 var(--kl-font-mono); text-align: center; }
.chip input:checked + span small { background: rgba(255, 255, 255, .16); }
.measurement-workspace { min-width: 0; padding: clamp(1rem, 2.4vw, 2rem); }
#bench-results { position: relative; display: grid; gap: clamp(2.2rem, 4vw, 3.2rem); min-width: 0; }
.empty-state { margin: 0; color: var(--kl-muted); font-size: .9rem; }
.bench-legend { position: absolute; top: .45rem; right: 0; display: flex; align-items: center; gap: .45rem; margin: 0; color: var(--kl-muted); font-size: .8rem; }
.bench-legend i { width: 1.4rem; height: 8px; border-radius: 0 3px 3px 0; }
.bench-legend i + * , .bench-legend i:not(:first-child) { margin-left: .5rem; }
.bench-legend i { background: linear-gradient(90deg, #e8743b, #c2549a, #6f5cf0); }
.bench-legend .n3 { opacity: .42; }
.bench-panel { min-width: 0; }
.bench-panel-head { display: grid; gap: .3rem; margin-bottom: 1.1rem; }
.bench-panel-head h3 { margin: 0; font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.03em; }
.bench-panel-head p { margin: 0; max-width: 44rem; color: var(--kl-muted); font-size: .86rem; }
.engine-name { display: grid; min-width: 0; margin: 0; line-height: 1.2; text-align: left; }
.engine-name strong { overflow: hidden; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.engine-name small { color: var(--kl-muted); font: .64rem/1.5 var(--kl-font-mono); letter-spacing: .05em; text-transform: uppercase; }
[hidden] { display: none !important; }
.engine-type { display: block; margin-top: .25rem; color: var(--kl-muted); font-size: .73rem; font-weight: 450; }
.not-applicable { color: var(--kl-faint); }
.no-data { color: var(--kl-faint); font-size: .76rem; font-weight: 500; }
/* A topology line is its value and change over a full-width rail; the bar fills its share of the type's best. */
.pair { display: grid; gap: .7rem; min-width: 0; }
.pair-line { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: .35rem .45rem; min-width: 0; white-space: nowrap; }
.pair-line:empty { display: none; }
.pair-line i { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--c1), var(--c2)) 0 0 / max(4px, var(--size)) 100% no-repeat, var(--kl-surface-3); }
.pair-line.n3 i { height: 4px; background-image: linear-gradient(90deg, color-mix(in srgb, var(--c1) 50%, transparent), color-mix(in srgb, var(--c2) 50%, transparent)); }
.pair-line b { font-size: .9rem; font-variant-numeric: tabular-nums; font-weight: 680; line-height: 1.15; }
.pair-line.n3 b { color: var(--kl-muted); font-size: .82rem; font-weight: 600; }
.pair-line small { color: var(--kl-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.pair-line .node-label { grid-column: 1 / -1; color: var(--kl-ink-2); font-size: .65rem; font-weight: 650; }
.pair-line small[title] { white-space: normal; }
.pair-line .limited { grid-column: 1 / -1; }
.pair-line:has(.no-data) { grid-template-columns: minmax(0, 1fr); gap: .1rem; white-space: normal; }
.pair-line .no-data, .no-data-reason { line-height: 1.3; }
.pair-line .no-data-reason { color: var(--kl-faint); font-size: .68rem; }
#bench-all .no-data-reason { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.table-scroll-hint { margin: 0 0 .6rem; color: var(--kl-muted); font-size: .75rem; }
/* Comparison table: the engine column stays pinned; every cell, header line and value starts on the same edges. */
.comparison-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: .5rem; scrollbar-color: var(--kl-line-strong) transparent; scrollbar-width: thin; }
.comparison-grid { --pin: 14.5rem; --col: 9.5rem; width: 100%; min-width: calc(var(--pin) + var(--columns, 8) * var(--col)); border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.comparison-grid > thead, .comparison-grid > tbody { display: block; }
.ov-head, .ov-row { display: grid; grid-template-columns: var(--pin) repeat(var(--columns, 8), minmax(var(--col), 1fr)); }
.comparison-grid th, .comparison-grid td { min-width: 0; padding: .95rem .75rem; font: inherit; text-align: left; }
.comparison-grid tr > :first-child { position: sticky; left: 0; z-index: 2; padding-left: .5rem; background: var(--row, var(--kl-surface-solid)); box-shadow: inset -1px 0 0 var(--kl-line); }
.ov-row .engine-name strong { white-space: normal; }
.ov-head { border-bottom: 1px solid var(--kl-line-strong); }
.ov-head > th { padding-top: 0; padding-bottom: .8rem; }
.ov-head > th:first-child { display: flex; align-items: flex-end; }
.ov-head > th:first-child { color: var(--kl-muted); font: 600 .66rem/1.3 var(--kl-font-mono); letter-spacing: .06em; text-transform: uppercase; }
.ov-head .sort-case { display: grid; grid-template-rows: auto 1fr; justify-items: start; gap: .2rem; width: 100%; height: 100%; min-height: 44px; border: 0; background: transparent; text-align: left; cursor: pointer; padding: .7rem 0 0; box-shadow: inset 0 2px 0 var(--c2); color: var(--kl-ink); font: 650 .9rem/1.2 var(--kl-font-sans); }
.ov-head .sort-case small { align-self: start; color: var(--kl-muted); font-size: .7rem; font-weight: 450; line-height: 1.35; }
.ov-head th[aria-sort="descending"] .sort-case small::after { content: ' ↓'; }
.ov-head th[aria-sort="ascending"] .sort-case small::after { content: ' ↑'; }
.ov-head .sort-case:focus-visible { outline: 2px solid var(--kl-accent); outline-offset: 3px; }
.ov-list { margin: 0; padding: 0; list-style: none; }
.ov-row { border-bottom: 1px solid var(--kl-line); transition: background-color .2s var(--kl-ease); }
.ov-row:hover { --row: color-mix(in srgb, #6f5cf0 5%, var(--kl-surface-solid)); background-color: var(--row); }

.is-keyload .engine-name strong { color: var(--kl-accent-ink); }
.is-keyload { --row: color-mix(in srgb, #e3a6ff 12%, var(--kl-surface-solid)); background-image: linear-gradient(90deg, rgba(227, 166, 255, .12), transparent 60%); }

.bench-foot { display: grid; gap: .7rem; padding-top: 1.4rem; border-top: 1px solid var(--kl-line-strong); }
.bench-foot > *, #bench-results > * { min-width: 0; }
.bench-meta { display: flex; flex-wrap: wrap; gap: .3rem 0; margin: 0; font-size: .82rem; }
.bench-meta > * + *::before { content: "·"; margin: 0 .55rem; color: var(--kl-faint); }
.bench-meta a { font-weight: 600; text-decoration-color: var(--kl-line-strong); }
.bench-note { margin: 0; color: var(--kl-muted); font-size: .8rem; }
.bench-details summary { display: inline-flex; align-items: center; gap: .5rem; min-height: 36px; padding: 0 1rem; border: 1px solid var(--kl-line-strong); border-radius: 999px; background: rgba(255, 255, 255, .7); font-size: .84rem; font-weight: 600; cursor: pointer; list-style: none; }
.bench-details summary::-webkit-details-marker { display: none; }
.bench-details summary::after { content: ""; width: 12px; height: 12px; background: currentColor; -webkit-mask: var(--chevron) center / contain no-repeat; mask: var(--chevron) center / contain no-repeat; transition: transform .3s var(--kl-ease); }
.bench-details[open] summary::after { transform: rotate(180deg); }
.bench-details[open] summary { margin-bottom: 1rem; }
/* Values fade into the pinned column once they pass beneath it and into the far edge while more columns remain. */
.scroll-frame { position: relative; min-width: 0; }
.scroll-frame::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; z-index: 3; width: min(4.5rem, 12vw); background: linear-gradient(to left, var(--kl-surface-solid) 8%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s var(--kl-ease); }
.bench-overview .scroll-frame::after { bottom: .5rem; }
.bench-details .scroll-frame::after { inset: 1px 1px 1px auto; border-radius: 0 var(--kl-radius) var(--kl-radius) 0; }
.scroll-frame.more-end::after { opacity: 1; }
.comparison-grid tr > :first-child::after, .pin-nodes::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: min(3rem, 9vw); background: linear-gradient(90deg, var(--row, var(--kl-surface-solid)) 10%, transparent); opacity: 0; pointer-events: none; transition: opacity .25s var(--kl-ease); }
.more-start .comparison-grid tr > :first-child::after, .more-start .pin-nodes::after { opacity: 1; }
/* Results table: engine and node count stay pinned while the values scroll. */
.table-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; border: 1px solid var(--kl-line); border-radius: var(--kl-radius); background: var(--kl-surface-solid); scrollbar-color: var(--kl-line-strong) transparent; scrollbar-width: thin; }
.table-scroll table { --pin-name: 11rem; width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8rem; }
.table-scroll caption { padding: .8rem .9rem; color: var(--kl-muted); font-size: .8rem; text-align: left; }
.table-scroll caption span { position: sticky; left: .9rem; }
.table-scroll th { padding: .6rem .6rem; border-bottom: 1px solid var(--kl-line-strong); color: var(--kl-muted); font: 600 .62rem/1.25 var(--kl-font-mono); letter-spacing: .05em; text-align: left; text-transform: uppercase; vertical-align: bottom; }
.table-scroll .num { text-align: right; }
.table-scroll td { padding: .55rem .6rem; border-bottom: 1px solid var(--kl-line); font-variant-numeric: tabular-nums; white-space: nowrap; transition: background-color .15s var(--kl-ease); }
.pin { position: sticky; left: 0; z-index: 1; background: var(--kl-surface-solid); }
.pin:first-child { width: var(--pin-name); min-width: var(--pin-name); }
.pin-nodes { left: var(--pin-name); box-shadow: inset -1px 0 0 var(--kl-line); }
.table-scroll th.pin-nodes, .table-scroll td.pin-nodes { padding-inline: .8rem; color: var(--kl-ink-2); text-align: center; }
.table-scroll td.pin:first-child { font-weight: 600; }
.table-scroll td.error-text { min-width: 14rem; max-width: 22rem; color: var(--kl-ink-2); font-size: .74rem; white-space: normal; overflow-wrap: anywhere; }
.table-scroll td.image { color: var(--kl-ink-2); font: .7rem/1.3 var(--kl-font-mono); }
.table-scroll tbody tr:hover { --row: color-mix(in srgb, #6f5cf0 10%, var(--kl-surface-solid)); }
.table-scroll tbody tr:hover td { background-color: var(--row); }
.table-scroll tr:last-child td { border-bottom: 0; }
.table-scroll td[data-value=""] { color: var(--kl-faint); }

/* Claims ledger */
.ledger-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-bottom: 1.4rem; }
.ledger-col { padding: 1.5rem; border-radius: var(--kl-radius-lg); }
.ledger-col h3 { margin: 0 0 1rem; font-size: 1.3rem; }
.ledger-col ul { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.ledger-col li { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr); gap: .6rem; padding: .7rem 0; border-top: 1px solid var(--kl-line); font-size: .95rem; }
.ledger-col li::before { display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; font: 700 .72rem/1 var(--kl-font-mono); }
.ledger-col--open { border: 1px solid var(--kl-stroke); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow); }
.ledger-col--open li::before { content: "✓"; background: var(--kl-graphite); color: #fff; }
.ledger-col--held { border: 1px dashed var(--kl-line-strong); background: transparent; }
.ledger-col--held li { color: var(--kl-ink-2); }
.ledger-col--held li::before { content: "–"; border: 1px solid var(--kl-line-strong); color: var(--kl-muted); }

/* Method rail */
.method-rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; margin: 0; padding: 0; list-style: none; }
.method-rail li { position: relative; display: grid; align-content: start; gap: .3rem; }
.method-rail li::after { content: ""; position: absolute; top: 1.15rem; left: 3rem; right: -1.6rem; height: 1px; background: var(--kl-line-strong); }
.method-rail li:last-child::after { display: none; }
.method-rail h3 { margin-top: .9rem; }

/* Reproduce terminal */
.reproduce-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: 2rem; padding: clamp(1.6rem, 4.5vw, 3.2rem); border-radius: var(--kl-radius-xl); }
.reproduce .eyebrow, .reproduce p { color: var(--kl-on-graphite-muted); }
.reproduce h2 { margin-bottom: 1rem; color: #fff; }
.reproduce p { margin: 0; }
.command-box { min-width: 0; display: flex; align-items: center; gap: .7rem; padding: .6rem .6rem .6rem 1.1rem; border: 1px solid var(--kl-graphite-line); border-radius: 16px; background: rgba(0, 0, 0, .35); }
.prompt { color: var(--kl-lilac); font: 700 .9rem var(--kl-font-mono); }
.command-box code { flex: 1; min-width: 0; overflow-x: auto; color: var(--kl-on-graphite); font: .82rem/1.5 var(--kl-font-mono); white-space: nowrap; scrollbar-width: none; }
.command-box button { flex: none; min-height: 38px; padding: 0 1rem; border: 0; border-radius: 10px; background: var(--kl-iris); color: var(--kl-graphite); font-size: .82rem; font-weight: 700; cursor: pointer; }

/* Closing credits: the people and projects behind the database. */
.status-links { display: flex; flex-wrap: wrap; gap: 1rem 2rem; }
.credits-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.credits-grid a { display: flex; align-items: center; gap: .8rem; min-width: 0; padding: 1.2rem; border: 1px solid var(--kl-stroke); border-radius: var(--kl-radius-lg); background: var(--kl-sheen), var(--kl-surface); box-shadow: var(--kl-shadow); text-decoration: none; }
.credits-grid a:hover { border-color: var(--kl-line-strong); background: #fff; }
.credits-grid a > span:last-child { margin-left: auto; color: var(--kl-muted); }
.credits-grid strong { display: block; font-size: .9rem; overflow-wrap: anywhere; }
.credits-grid small { display: block; margin-top: .2rem; color: var(--kl-muted); font-size: .76rem; }
.credit-symbol { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border: 1px solid #fff; border-radius: 12px; background: linear-gradient(140deg, #faf2ee, #eeeafb); box-shadow: inset 0 1px 1px #fff, 0 4px 8px rgba(80, 58, 92, .06); color: #56486c; font: 600 .8rem/1 var(--kl-font-mono); }
.license-note { margin: 1.5rem 0 0; color: var(--kl-muted); font-size: .8rem; }

/* Footer */
.site-footer { margin-top: var(--section-gap); padding: 0 max(var(--gutter), calc((100% - var(--page)) / 2)) 2rem; overflow: hidden; }
.footer-mark { margin: 0 0 -.06em; font: 800 clamp(4.5rem, 21vw, 18rem)/.8 var(--kl-font-display); letter-spacing: -.07em; color: transparent; background: linear-gradient(180deg, rgba(17, 18, 20, .14), rgba(17, 18, 20, 0)); -webkit-background-clip: text; background-clip: text; user-select: none; }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.4rem; border-top: 1px solid var(--kl-line-strong); }
.footer-links { display: flex; gap: 1.4rem; font-size: .9rem; }
.footer-links a { color: var(--kl-ink-2); text-decoration: none; }
.footer-links a:hover { color: var(--kl-ink); }
.made-by { margin: 0; color: var(--kl-muted); font-size: .9rem; }
.made-by a { color: var(--kl-ink); font-weight: 650; }

/* Responsive */
@media (max-width: 1080px) {
  .bench-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi:nth-child(3) { border-left: 0; }
  .kpi:nth-child(n + 3) { border-top: 1px solid var(--kl-line); }
  .hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-facts li:nth-child(3) { padding-left: 0; border-left: 0; }
  .hero-facts li:nth-child(n + 3) { margin-top: 1rem; border-top: 1px solid var(--kl-line); }
  .anatomy-grid, .engine-inner, .reproduce-inner { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thesis-grid, .why-grid { grid-template-columns: minmax(0, 1fr); }
  .credits-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .comparison-grid { --pin: 8.75rem; --col: 8.75rem; }
  .table-scroll table { --pin-name: 7.5rem; }
  .table-scroll td.pin:first-child { white-space: normal; }
  .bench-controls fieldset { padding-left: 0; }
  .bench-legend { position: static; margin-bottom: -1.2rem; }
  .bench-controls legend { position: static; margin-bottom: .45rem; }
  .chip-row { flex-wrap: nowrap; margin-inline: calc(-1 * clamp(1rem, 2.4vw, 2rem)); padding: 0 clamp(1rem, 2.4vw, 2rem) .2rem; overflow-x: auto; scrollbar-width: none; }
  .chip-row::-webkit-scrollbar { display: none; }
  .site-header-inner { justify-content: space-between; padding: 0 7px 0 14px; }
  .nav-toggle { display: inline-grid; }
  .site-nav { position: fixed; inset: calc(var(--header-top) + var(--header-height) + 10px) var(--gutter) auto; display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0; padding: .45rem; border: 1px solid var(--kl-stroke); border-radius: 24px; background: var(--kl-sheen), rgba(250, 249, 246, .9); box-shadow: var(--kl-shadow-lg); backdrop-filter: var(--kl-glass); opacity: 0; transform: translateY(-8px) scale(.98); transform-origin: top right; transition: opacity .2s var(--kl-ease), transform .3s var(--kl-ease), display .3s allow-discrete, overlay .3s allow-discrete; }
  .site-nav:popover-open { display: flex; opacity: 1; transform: none; }
  .site-nav::backdrop { background: transparent; }
  .site-nav a { padding: .95rem 1rem; border-radius: 16px; color: var(--kl-ink); font: 650 1.12rem/1.2 var(--kl-font-display); letter-spacing: -.02em; }
  .site-nav a + a { background: linear-gradient(var(--kl-line), var(--kl-line)) no-repeat top center / calc(100% - 2rem) 1px; }
  .site-nav a:hover, .site-nav a:focus-visible { background-color: var(--kl-surface-3); }
  @starting-style { .site-nav:popover-open { opacity: 0; transform: translateY(-8px) scale(.98); } }
  .section-head { grid-template-columns: minmax(0, 1fr); }
  .hero { gap: 2rem; }
  .stage { padding: 6px; border-radius: 24px; }
  .scene-frame { min-height: 0; aspect-ratio: 1.15; border-radius: 19px; }
  .stage-pins { position: static; flex-wrap: wrap; justify-content: flex-start; padding: .7rem .2rem 0; }
  .scene-caption-row { align-items: flex-start; flex-direction: column; }
  .method-rail { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .method-rail li::after { display: none; }
  .ledger-grid { grid-template-columns: minmax(0, 1fr); }
  .layer { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

@media (max-width: 480px) {
  body { font-size: 16px; }
  .hero-facts, .bento, .credits-grid { grid-template-columns: minmax(0, 1fr); }
  .thesis-stack { grid-template-columns: minmax(0, 1fr); }
  .hero-facts li, .hero-facts li + li { padding: 1rem 0 0; border-left: 0; }
  .hero-facts li + li { margin-top: 1rem; border-top: 1px solid var(--kl-line); }
  .shape--rows, .shape--vectors { grid-column: auto; grid-row: auto; }
  .bento { grid-auto-rows: auto; }
  .hosts { grid-template-columns: minmax(0, 1fr); }
  .command-box { flex-wrap: wrap; }
  .command-box code { flex-basis: calc(100% - 2rem); }
}

@media (max-width: 360px) {
  .site-header-inner { gap: .5rem; padding-left: 12px; }
  .nav-cta { padding: 0 .85rem; }
  .hero-status { font-size: .64rem; letter-spacing: .01em; }
}