:root {
  --bg: #0e0d0b; --bg2: #141210; --card: #191714; --card2: #1f1c18; --rule: #2b2823; --rule2: #38342d;
  --ink: #f3eee4; --ink2: #c9c2b5; --muted: #8f8779; --accent: #f2b632; --accent-ink: #0e0d0b;
  --good: #6cc28f; --bad: #e0795f; --blue: #6ea1ea; --d-cc: #5a8ad6; --d-ki: #b98319;
  --term: #15120f; --term-ink: #efe9dd; --term-dim: #8a8174;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display: Georgia, "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2,.7,.2,1);
  --r: 18px;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #f7f4ee; --bg2: #f1ede5; --card: #ffffff; --card2: #f6f2ea; --rule: #e6e0d4; --rule2: #d6cfc0;
  --ink: #1b1813; --ink2: #3b362e; --muted: #6f685d; --accent: #d99a0b; --accent-ink: #1b1813;
  --good: #2f8f5b; --bad: #c4553a; --blue: #2e63c2; --d-cc: #2e63c2; --d-ki: #b07a00;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: var(--mono); font-size: .92em; background: var(--card2); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 6px; }
.wrap { width: min(1120px, calc(100% - 32px)); margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* background grid */
.bgfx { position: fixed; inset: 0; z-index: -1; pointer-events: none; background:
  radial-gradient(900px 500px at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
  linear-gradient(var(--rule) 1px, transparent 1px) 0 0 / 100% 64px,
  linear-gradient(90deg, var(--rule) 1px, transparent 1px) 0 0 / 64px 100%; opacity: .45;
  -webkit-mask-image: linear-gradient(#000 0, #000 60vh, transparent 110vh); mask-image: linear-gradient(#000 0, #000 60vh, transparent 110vh); }

/* top bar */
.top { position: sticky; top: 0; z-index: 20; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom: 1px solid transparent; transition: border-color .3s; }
.top.scrolled { border-color: var(--rule); }
.top .wrap { display: flex; align-items: center; gap: 22px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; }
.brand img { width: 24px; height: 24px; }
.nav { display: flex; gap: 22px; margin-left: 14px; font-size: 14px; color: var(--muted); }
.nav a:hover { color: var(--ink); text-decoration: none; }
.topright { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.ghbtn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--rule2); border-radius: 10px; font-size: 13px; font-weight: 500; background: var(--card); }
.ghbtn:hover { text-decoration: none; border-color: var(--ink2); }
.ghbtn svg { width: 16px; height: 16px; fill: currentColor; }
.ghbtn b { font-family: var(--mono); font-weight: 500; color: var(--muted); }
.iconbtn { width: 36px; height: 36px; border: 1px solid var(--rule2); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.iconbtn svg { width: 17px; height: 17px; }
.sun { display: none; }
:root[data-theme="light"] .sun { display: block; } :root[data-theme="light"] .moon { display: none; }
@media (max-width: 1020px) { .nav { gap: 16px; } .nav a[href="#features"] { display: none; } }
@media (max-width: 760px) { .nav { display: none; } .ghbtn span { display: none; } }

/* hero: copy on the left, the same test log both ways on the right */
.hero { position: relative; isolation: isolate; padding: 76px 0 8px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 12.5px; color: var(--ink2); border: 1px solid var(--rule2); background: var(--card); border-radius: 999px; padding: 6px 14px 6px 10px; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 22%, transparent); flex: none; }
.pill.news { max-width: 100%; transition: border-color .2s; }
.pill.news:hover { text-decoration: none; border-color: var(--accent); }
.pill.news b { font-weight: 500; color: var(--accent); text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.pill.news span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.news .arr { flex: none; color: var(--muted); transition: transform .2s var(--ease); }
.pill.news:hover .arr { transform: translateX(3px); color: var(--accent); }
h1 { font-family: var(--display); font-weight: 400; font-size: clamp(42px, 7.2vw, 88px); line-height: 1.02; letter-spacing: -0.02em; margin: 26px auto 0; max-width: 14ch; }
h1 em { font-style: italic; color: var(--accent); white-space: nowrap; }
.hero h1 { font-size: clamp(36px, 4.4vw, 58px); line-height: 1.04; margin: 24px 0 0; max-width: none; text-wrap: balance; }
.hero h1 .rot { display: block; transition: opacity .35s var(--ease), transform .35s var(--ease); }
.hero h1 .rot.out { opacity: 0; transform: translateY(-.22em); }
.hero h1 .rot.pre { opacity: 0; transform: translateY(.22em); transition: none; }
.lede { font-size: clamp(17px, 2vw, 20px); color: var(--ink2); max-width: 58ch; margin: 24px auto 0; }
.hero .lede { margin: 22px 0 0; font-size: clamp(16.5px, 1.6vw, 18.5px); }
.cta { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.hero .cta { justify-content: flex-start; margin-top: 28px; }
.btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 12px; border: 1px solid var(--rule2); background: var(--card); color: var(--ink); font-weight: 500; font-size: 15px; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--ink2); }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: 0 10px 30px -12px var(--accent); }
.btn svg { width: 16px; height: 16px; fill: currentColor; }
.cmd { margin: 22px auto 0; display: inline-flex; align-items: center; gap: 14px; max-width: 100%; background: var(--term); color: var(--term-ink); border: 1px solid var(--rule2); border-radius: 12px; padding: 10px 10px 10px 16px; font-family: var(--mono); font-size: 13.5px; }
.cmd span { overflow: auto; white-space: nowrap; scrollbar-width: none; }
.cmd span::before { content: "❯ "; color: var(--accent); }
.cmd span b { font-weight: inherit; white-space: nowrap; }
.hero .cmd { margin: 18px 0 0; }
.copy { white-space: nowrap; font: 500 12px/1 var(--sans); padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.04); color: var(--term-ink); cursor: pointer; }
.copy:hover { background: rgba(255,255,255,.1); }
.copy.ok { color: var(--good); border-color: var(--good); }

/* faint Kiasi lines drifting behind the hero */
.drift { position: absolute; inset: 0 -16px; z-index: -1; overflow: hidden; pointer-events: none; font-family: var(--mono); font-size: 12.5px; color: var(--ink); opacity: .085;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
:root[data-theme="light"] .drift { opacity: .12; }
.drift span { position: absolute; left: 0; top: var(--y); white-space: nowrap; animation: drift var(--s, 80s) linear infinite; animation-delay: var(--t, 0s); }
@keyframes drift { from { transform: translateX(100vw); } to { transform: translateX(-100%); } }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; } }

/* product shot */
.stage { margin: 64px auto 0; max-width: 980px; }
.term { background: var(--term); color: var(--term-ink); border-radius: 16px; overflow: hidden; border: 1px solid var(--rule2); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset; }
.term .bar, .tterm .bar { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-family: var(--mono); font-size: 12px; color: var(--term-dim); }
.term .bar i, .tterm .bar i { width: 10px; height: 10px; border-radius: 50%; background: #3d3731; flex: none; }
.term .bar i:first-child, .tterm .bar i:first-child { background: #e0795f; } .term .bar i:nth-child(2), .tterm .bar i:nth-child(2) { background: #f2b632; } .term .bar i:nth-child(3), .tterm .bar i:nth-child(3) { background: #6cc28f; }
.term .bar .lbl, .tterm .bar .lbl { font-style: normal; margin-left: 6px; }
.term .bar span { margin-left: auto; }
.term .rec { display: block; width: 100%; height: auto; }

/* numbers belt */
.belt { margin-top: 36px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); overflow: hidden; }
.belt > div { padding: 22px 24px; border-right: 1px solid var(--rule); min-width: 0; }
.belt > div:last-child { border-right: 0; }
.belt b { display: block; font-family: var(--display); font-weight: 600; font-size: clamp(28px, 3.4vw, 40px); line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
.belt b small { font-size: .5em; color: var(--muted); font-weight: 500; margin-left: 2px; }
.belt > div > span { display: block; margin-top: 8px; font-size: 13px; color: var(--muted); line-height: 1.4; }
.belt .live b { color: var(--accent); }
.beltnote { font-family: var(--mono); font-size: 12px; color: var(--muted); margin: 12px 4px 0; }
.beltnote a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .belt { grid-template-columns: 1fr; } .belt > div { border-right: 0; border-bottom: 1px solid var(--rule); } .belt > div:last-child { border-bottom: 0; } }

/* sections */
section { padding: 96px 0 0; }
.head { max-width: 760px; }
.eyebrow { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 14px; }
.h2 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.6vw, 52px); line-height: 1.02; letter-spacing: -0.03em; margin: 0; }
.h2 em { font-style: italic; color: var(--muted); }
.sub { font-size: 17px; color: var(--ink2); margin: 18px 0 0; max-width: 60ch; }

/* how: chapters on the left, the terminal they drive on the right */
.tour { margin-top: 40px; display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 18px; align-items: stretch; }
.chapters { position: relative; display: grid; gap: 6px; align-content: start; }
.chap { position: relative; overflow: hidden; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 2px 10px; padding: 14px 16px; text-align: left; font: inherit; color: var(--muted); background: transparent; border: 1px solid transparent; border-radius: 14px; cursor: pointer; transition: background .25s, border-color .25s, color .25s; }
.chap .n { grid-row: span 2; padding-top: 4px; font-family: var(--mono); font-size: 12px; color: var(--muted); transition: color .25s; }
.chap b { font-family: var(--display); font-weight: 400; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink2); transition: color .25s; }
.chap .d { font-size: 13.5px; line-height: 1.45; }
.chap:hover { border-color: var(--rule); color: var(--ink2); }
.chap.on { background: var(--card); border-color: var(--rule2); color: var(--ink2); }
.chap.on b { color: var(--ink); }
.chap.on .n { color: var(--accent); }
.chap:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.chap .prog { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.chap.run .prog { animation: prog 7s linear forwards; }
.tour.manual .chap .prog { display: none; }
@keyframes prog { to { transform: scaleX(1); } }
.tterm { display: flex; flex-direction: column; min-width: 0; min-height: 430px; background: var(--term); color: var(--term-ink); border: 1px solid var(--rule2); border-radius: 16px; overflow: hidden; box-shadow: 0 30px 70px -40px rgba(0,0,0,.8); }
.tpane { display: none; flex: 1; flex-direction: column; padding: 18px 20px 20px; }
.tpane.on { display: flex; }
.tpane pre { margin: 0 0 18px; font-family: var(--mono); font-size: 13px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; }
.tpane .t { display: block; }
.tour.js .tpane .t { opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
.tour.js .tpane .t.on { opacity: 1; transform: none; }
.tpane .k { color: var(--term-dim); } .tpane .g { color: #6cc28f; } .tpane .y { color: #f2b632; } .tpane .r { color: #e0795f; } .tpane .m { color: #6cc28f; } .tpane .p { color: #f2b632; }
.tcap { margin: auto 0 0; padding-top: 14px; border-top: 1px dashed rgba(255,255,255,.12); font-size: 14px; line-height: 1.5; color: var(--term-dim); }
@media (max-width: 860px) {
  .tour { grid-template-columns: 1fr; }
  .chapters { grid-auto-flow: column; grid-auto-columns: minmax(190px, 70%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
  .chapters::-webkit-scrollbar { display: none; }
  .chap { scroll-snap-align: start; border-color: var(--rule); }
  .chap .d { display: none; }
  .tterm { min-height: 520px; }
}

/* bento */
.bento { margin-top: 40px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.tile { position: relative; padding: 24px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); min-width: 0; display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s; }
.tile:hover { border-color: var(--rule2); }
.tile h3 { font-family: var(--display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; margin: 0 0 8px; }
.tile p { margin: 0; color: var(--ink2); font-size: 14.5px; }
.tile code { display: inline-block; margin-top: auto; padding: 16px 0 0; background: none; border: 0; font-size: 12px; color: var(--muted); }
.tile .ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); margin-bottom: 16px; }
.tile .ic svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.t-2 { grid-column: span 2; }
.t-3 { grid-column: span 3; }
@media (max-width: 960px) { .t-2, .t-3 { grid-column: span 3; } }
@media (max-width: 640px) { .cmd { flex-wrap: wrap; justify-content: center; } .cmd span { white-space: normal; overflow: visible; overflow-wrap: break-word; text-align: left; } .cmd span::after { display: none; } .term .bar span { display: none; } .pill { font-size: 11px; } .bento { grid-template-columns: 1fr; } .t-2, .t-3 { grid-column: span 1; } }

/* week simulator */
.sim { position: relative; }
.simtop { display: flex; justify-content: space-between; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.simtitle { margin: 0; font-family: var(--display); font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.bigcap { color: var(--muted); font-size: 13.5px; margin: 8px 0 0; }
.modes { display: inline-flex; background: var(--bg); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; gap: 2px; }
.mode { font: 500 13px/1 var(--sans); padding: 8px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color .2s, background .2s; }
.mode:hover { color: var(--ink); }
.mode.on { background: var(--card2); color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.tracks { margin-top: 22px; display: grid; gap: 18px; position: relative; }
.track { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: end; }
.track .rwho { font-family: var(--mono); font-size: 11.5px; color: var(--muted); line-height: 1.35; }
.track .rwho b { display: block; font: 500 14px/1.2 var(--sans); color: var(--ink); margin-bottom: 3px; }
.rail { grid-column: 1 / -1; position: relative; height: 30px; border-radius: 8px; background: var(--bg); border: 1px solid var(--rule); overflow: hidden; }
.rail .fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 8px; transition: width .42s var(--ease); }
.track.a .fill { background: linear-gradient(90deg, color-mix(in srgb, var(--bad) 55%, var(--accent)), var(--bad)); }
.track.b .fill { background: linear-gradient(90deg, color-mix(in srgb, var(--good) 60%, var(--accent)), var(--good)); }
.rail.hit { animation: hit .5s var(--ease); }
@keyframes hit { 0% { transform: translateX(0); } 30% { transform: translateX(-3px); } 60% { transform: translateX(3px); } 100% { transform: translateX(0); } }
.out { font: 500 14px/1.3 var(--sans); text-align: right; min-height: 2.6em; }
.out small { display: block; font: 11.5px/1.4 var(--mono); color: var(--muted); margin-top: 3px; }
.track.a .out { color: var(--bad); } .track.b .out { color: var(--good); }
.days ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(7, 1fr); font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.days li { transition: color .2s; }
.days li.now { color: var(--ink); }
.cursor { position: absolute; top: -8px; bottom: -8px; width: 1px; background: var(--accent); left: 0; opacity: 0; transition: left .42s var(--ease), opacity .3s; pointer-events: none; }
.cursor::after { content: ""; position: absolute; top: -4px; left: -3.5px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.simfoot { display: flex; justify-content: space-between; align-items: center; gap: 14px 16px; margin-top: 18px; flex-wrap: wrap; color: var(--muted); }
.simfoot p { margin: 0; max-width: 46ch; font-size: 12px; line-height: 1.5; }
.simfoot a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.play { display: inline-flex; align-items: center; gap: 8px; font: 500 13px/1 var(--sans); padding: 10px 16px; border-radius: 999px; border: 1px solid var(--rule2); background: var(--bg); color: var(--ink); cursor: pointer; }
.play:hover { border-color: var(--ink2); }
.play svg { width: 12px; height: 12px; fill: currentColor; }
.hsim { padding: 22px 22px 18px; }
@media (max-width: 640px) { .cursor { display: none; } }

/* benchmark footer */
.bfoot { margin-top: 22px; display: flex; justify-content: space-between; align-items: center; gap: 16px 24px; flex-wrap: wrap; }
.bfoot p { margin: 0; max-width: 62ch; font-size: 14px; color: var(--muted); }
.bfoot p a { color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.bfoot .cmd { margin: 0; }

/* proof */
.proof { margin-top: 40px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; align-items: center; }
.shot { border-radius: var(--r); overflow: hidden; border: 1px solid var(--rule2); box-shadow: 0 40px 90px -40px rgba(0,0,0,.8); background: var(--card); }
.shot img { display: block; width: 100%; height: auto; aspect-ratio: 2800 / 1580; }
.shot img.light, :root[data-theme="light"] .shot img.dark { display: none; }
:root[data-theme="light"] .shot img.light { display: block; }
.pcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.padd { align-self: flex-start; font-family: var(--mono); font-size: 13px; color: var(--ink2); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
.padd:hover { text-decoration: none; color: var(--ink); }
.proof3 { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.proof3 > div { padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.proof3 b { display: block; font-family: var(--display); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.proof3 span { display: block; color: var(--ink2); font-size: 14px; margin-top: 4px; }
@media (max-width: 860px) { .proof, .proof3 { grid-template-columns: 1fr; } }

/* results */
.results { margin-top: 28px; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.rcard { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r); padding: 22px 22px 18px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rcard .rmeta { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-family: var(--mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.rcard .rhead b { display: block; font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--good); }
.rcard .rhead.flat b { color: var(--ink); }
.rcard .rhead span { display: block; margin-top: 6px; font-size: 14.5px; color: var(--ink2); }
.rcard .rrows { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; border-top: 1px solid var(--rule); padding-top: 14px; }
.rcard .rrows div { min-width: 0; }
.rcard .rrows em { display: block; font-style: normal; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.rcard .rrows b { display: block; font-family: var(--display); font-weight: 600; font-size: 19px; line-height: 1.15; margin-top: 3px; overflow-wrap: anywhere; letter-spacing: -0.01em; }
.rcard .rrows small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.rcard .rnote { font-size: 14px; line-height: 1.5; color: var(--ink2); margin: 0; }
.rcard .rwho { font-family: var(--mono); font-size: 12px; color: var(--muted); margin-top: auto; }
.rcard.add { border-style: dashed; background: transparent; justify-content: center; gap: 10px; }
.rcard.add:hover { text-decoration: none; border-color: var(--accent); }
.rcard.add b { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; }
.rcard.add span { font-size: 14px; line-height: 1.5; color: var(--muted); }


/* faq */
.faq { margin-top: 36px; border-top: 1px solid var(--rule); max-width: 820px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 4px; font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.015em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--muted); font-size: 20px; transition: transform .25s var(--ease); flex: none; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq .a { padding: 0 4px 22px; color: var(--ink2); font-size: 15.5px; max-width: 66ch; }
.faq .a p { margin: 0 0 10px; } .faq .a p:last-child { margin: 0; }
.faq .a a { text-decoration: underline; text-underline-offset: 3px; }

/* install */
.inst { margin-top: 40px; display: grid; grid-template-columns: 1fr 1.15fr; gap: 28px; align-items: start; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: s; display: grid; gap: 18px; }
.steps li { position: relative; padding-left: 48px; counter-increment: s; }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 2px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, transparent); }
.steps b { display: block; font-family: var(--display); font-weight: 600; font-size: 18px; letter-spacing: -0.015em; }
.steps p { margin: 6px 0 0; color: var(--ink2); font-size: 15px; }
.tty { background: var(--term); color: var(--term-ink); border-radius: 16px; font-family: var(--mono); font-size: 13px; line-height: 1.7; border: 1px solid var(--rule2); box-shadow: 0 30px 70px -40px rgba(0,0,0,.8); }
.tty .lbar { display: flex; gap: 8px; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.tty pre { margin: 0; padding: 16px 18px 18px; white-space: pre-wrap; min-height: 230px; font-family: inherit; }
.tty .tabs { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255,255,255,.06); }
.tty .tab { font: 500 11.5px/1 var(--sans); padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--term-dim); cursor: pointer; }
.tty .tab.on { background: rgba(255,255,255,.12); color: var(--term-ink); }
.tty .pane { display: none; } .tty .pane.on { display: block; }
.vsbtn { display: flex; align-items: center; gap: 12px; margin: 18px 18px 0; padding: 12px 16px; border-radius: 10px; background: var(--accent); color: #0e0d0b; font: 500 14px/1.3 var(--sans); }
.vsbtn:hover { text-decoration: none; }
.vsbtn svg { width: 22px; height: 22px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.vsbtn small { display: block; font-size: 11.5px; font-weight: 400; opacity: .8; margin-top: 3px; }
.tty .k { color: var(--term-dim); }
.tty .t { display: block; opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s var(--ease); }
.tty .t.on { opacity: 1; transform: none; }
.tty .ok { color: var(--good); }
.trust2 { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.trust2 > div { padding: 18px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.trust2 svg { width: 20px; height: 20px; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.trust2 b { display: block; margin-top: 10px; font-family: var(--display); font-weight: 600; font-size: 15.5px; letter-spacing: -0.01em; }
.trust2 span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--ink2); }
@media (max-width: 860px) { .inst { grid-template-columns: 1fr; } .trust2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .trust2 { grid-template-columns: 1fr; } }

/* footer */
.foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 40px 0 48px; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }

/* hero: the same test log, as each side sends it */
.hcmp { --d-cc: #5a8ad6; --d-ki: #b98319; min-width: 0; }
.hcmp .side { padding: 14px 18px 12px; }
.hcmp .side + .side { border-top: 1px dashed rgba(255,255,255,.12); }
.hcmp .shead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6px; font-family: var(--mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--term-dim); }
.hcmp .shead b { font-weight: 500; color: var(--term-ink); }
.hcmp .shead i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.hcmp .cc .shead i { background: var(--d-cc); } .hcmp .ki .shead i { background: var(--d-ki); }
.hcmp pre { margin: 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.7; }
.hcmp .t { display: block; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.hcmp .t.cut { margin: 4px 0; padding: 2px 0; border-block: 1px dashed rgba(255,255,255,.14); color: var(--term-dim); font-style: italic; white-space: normal; text-align: center; }
.hcmp .dim { color: var(--term-dim); } .hcmp .g { color: #6cc28f; } .hcmp .y { color: #f2b632; } .hcmp .r { color: #e0795f; }
.hmeter { padding: 14px 18px 16px; border-top: 1px solid rgba(255,255,255,.08); background: rgba(255,255,255,.025); }
.mrow { display: grid; grid-template-columns: 128px minmax(0, 1fr) 54px; gap: 12px; align-items: center; font-family: var(--mono); font-size: 11.5px; color: var(--term-dim); }
.mrow + .mrow { margin-top: 7px; }
.mrow i { display: block; height: 10px; }
.mrow u { display: block; height: 100%; width: var(--w); border-radius: 0 4px 4px 0; transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease) .5s; }
.hcmp.go .mrow u { transform: none; }
.mrow.cc u { background: var(--d-cc); } .mrow.ki u { background: var(--d-ki); }
.mrow b { font-weight: 500; color: var(--term-ink); text-align: right; }
.mbig { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin: 14px 0 0; }
.mbig b { font-family: var(--display); font-weight: 400; font-size: 30px; line-height: 1; letter-spacing: -0.02em; color: var(--term-ink); white-space: nowrap; }
.mbig span { flex: 1 1 220px; font-size: 13px; line-height: 1.45; color: var(--term-dim); }
.mbig a { color: var(--term-ink); text-decoration: underline; text-underline-offset: 3px; }
.hero + .belt { margin-top: 64px; }
@media (max-width: 640px) { .hcmp .side, .hmeter { padding-left: 14px; padding-right: 14px; } .hcmp pre { font-size: 11.5px; } .mrow { grid-template-columns: 100px minmax(0, 1fr) 46px; gap: 8px; } }

/* a model week */
.week { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
@media (max-width: 980px) { .week { grid-template-columns: 1fr; gap: 32px; } }

/* benchmark: diverging rows on a log scale around 1× */
.dchart { position: relative; margin: 40px 0 0; padding: 22px 24px 12px; border: 1px solid var(--rule); border-radius: var(--r); background: var(--card); }
.dlegend { display: flex; justify-content: space-between; align-items: center; gap: 8px 18px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; color: var(--ink2); }
.dlegend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; vertical-align: -1px; }
.dlegend .cc i { background: var(--d-cc); } .dlegend .ki i { background: var(--d-ki); }
.dlegend .dscale { color: var(--muted); font-size: 11.5px; }
.drow, .daxis { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr) 96px; column-gap: 20px; }
.daxis { margin-top: 18px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dticks { position: relative; height: 20px; }
.dticks span { position: absolute; top: 0; transform: translateX(-50%); }
.drows { list-style: none; margin: 0; padding: 0; }
.drow { border-top: 1px solid var(--rule); border-radius: 6px; outline: none; transition: background .2s; }
.drow:hover, .drow:focus-visible { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.drow:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.dname { padding: 11px 0 11px 6px; min-width: 0; }
.dname b { display: block; font: 500 14px/1.3 var(--sans); color: var(--ink); }
.dname span { display: block; margin-top: 3px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.dplot { position: relative; min-height: 44px; background: linear-gradient(var(--rule2), var(--rule2)) 50% 0 / 1px 100% no-repeat; }
.dplot .gl { position: absolute; top: 0; bottom: 0; border-left: 1px dashed var(--rule); }
.dplot u { position: absolute; top: 50%; height: 12px; margin-top: -6px; transform: scaleX(0); transition: transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 60ms + 150ms); }
.dchart.go .dplot u { transform: none; }
.drow.ki u { background: var(--d-ki); border-radius: 0 4px 4px 0; transform-origin: left; }
.drow.cc u { background: var(--d-cc); border-radius: 4px 0 0 4px; transform-origin: right; }
.drow.same u { height: 8px; margin-top: -4px; border-radius: 50%; background: var(--muted); }
.dval { align-self: center; padding-right: 6px; text-align: right; font: 500 13px/1.2 var(--mono); color: var(--ink); white-space: nowrap; }
.drow.same .dval { color: var(--muted); }
.dfail { padding: 16px 6px; color: var(--muted); }
.dfail a { color: var(--ink2); text-decoration: underline; }
.dtip { position: absolute; z-index: 3; width: 320px; max-width: calc(100% - 16px); padding: 12px 14px; border: 1px solid var(--rule2); border-radius: 12px; background: var(--card2); box-shadow: 0 18px 40px -20px rgba(0,0,0,.6); font-size: 13px; line-height: 1.45; color: var(--ink2); pointer-events: none; }
.dtip[hidden] { display: none; }
.dtip > b { display: block; margin-bottom: 6px; font-weight: 500; color: var(--ink); }
.dtip dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; }
.dtip dt { padding-top: 2px; font-family: var(--mono); font-size: 11px; color: var(--muted); }
.dtip dd { margin: 0; }
@media (max-width: 640px) {
  .dchart { padding: 18px 12px 8px; }
  .drow, .daxis { grid-template-columns: minmax(0, 1fr) 82px; column-gap: 10px; }
  .daxis > span:first-child { display: none; }
  .dname { grid-column: 1 / -1; padding: 10px 6px 0; }
  .dplot { min-height: 34px; }
}
#install > .cta { justify-content: flex-start; margin-top: 28px; }
.foot a { color: var(--ink2); }

/* type: serif display at regular weight, mono for controls */
.h2, .brand, .belt b, .tile h3, .proof3 b, .rcard .rhead b, .rcard .rrows b, .rcard.add b, .faq summary, .steps b, .trust2 b { font-weight: 400; letter-spacing: -0.01em; }
.btn, .nav, .ghbtn, .mode, .play, .copy, .tab, .pill { font-family: var(--mono); }
.btn { font-size: 14px; }

/* micro-animations */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes ping { 0% { transform: scale(1); opacity: .6; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes spin { to { transform: rotate(360deg); } }
.hcopy > *, .hero > .hcmp, main > .stage { animation: rise .8s var(--ease) both; }
.hcopy > :nth-child(2) { animation-delay: .08s; } .hcopy > :nth-child(3) { animation-delay: .16s; } .hcopy > :nth-child(4) { animation-delay: .24s; } .hcopy > :nth-child(5) { animation-delay: .32s; } .hcopy > :nth-child(6) { animation-delay: .38s; }
.hero > .hcmp { animation-delay: .3s; animation-duration: 1s; } main > .stage { animation-delay: .5s; animation-duration: 1s; }
.pill i { position: relative; }
.pill i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--accent); animation: ping 2.2s var(--ease) infinite; }
.cmd span::after { content: ""; display: inline-block; width: 8px; height: 1em; margin-left: 6px; vertical-align: -2px; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
.btn.primary { position: relative; overflow: hidden; }
.btn.primary::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg) translateX(0); transition: transform .7s var(--ease); }
.btn.primary:hover::after { transform: skewX(-18deg) translateX(420%); }
.btn:active { transform: translateY(0) scale(.98); }
.tile, .proof3 > div, .rcard, .trust2 > div, .belt > div { position: relative; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s; }
.tile::before, .rcard::before, .proof3 > div::before, .trust2 > div::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--accent) 12%, transparent), transparent 65%); }
.tile:hover::before, .rcard:hover::before, .proof3 > div:hover::before, .trust2 > div:hover::before { opacity: 1; }
.tile:hover, .rcard:hover, .proof3 > div:hover, .trust2 > div:hover { transform: translateY(-3px); border-color: var(--rule2); box-shadow: 0 18px 40px -24px rgba(0,0,0,.6); }
.belt > div:hover b { color: var(--accent); transition: color .3s; }
.belt b { transition: color .3s; }
.nav a { position: relative; transition: color .2s; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 1px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav a:hover::after, .nav a.on::after { transform: scaleX(1); }
.nav a.on { color: var(--ink); }
.iconbtn svg { transition: transform .5s var(--ease); }
.iconbtn.spin svg { animation: spin .6s var(--ease); }
.iconbtn:hover svg { transform: rotate(20deg); }
.copy.ok { animation: pop .4s var(--ease); }
.faq .a { animation: rise .35s var(--ease) both; }
.faq summary::after { transition: transform .3s var(--ease), color .2s; }
.faq details[open] summary::after { color: var(--accent); }
.mode, .tab, .play { transition: color .2s, background .2s, transform .2s var(--ease); }
.mode:active, .tab:active, .play:active, .chap:active { transform: scale(.98); }
.results .rcard { animation: rise .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.term { transition: transform .6s var(--ease), box-shadow .6s; }
.term:hover { box-shadow: 0 50px 110px -40px rgba(0,0,0,.85), 0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent); }
@media (prefers-reduced-motion: reduce) {
  .hcopy > *, .hero > .hcmp, main > .stage, .faq .a, .results .rcard, .pill i::after, .cmd span::after, .iconbtn.spin svg, .copy.ok, .rail.hit { animation: none; }
  .drift { display: none; }
  .btn.primary::after { display: none; }
  .tile:hover, .rcard:hover, .proof3 > div:hover, .trust2 > div:hover { transform: none; }
  .hero h1 .rot { transition: none; }
}

/* reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s var(--ease), transform .6s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .tty .t, .tour.js .tpane .t { opacity: 1; transform: none; transition: none; }
  .dplot u, .mrow u { transform: none; transition: none; }
  .rail .fill, .cursor { transition: none; }
}