/* Layout: a lab report bound as a product sheet. One reading column; figures
   break out to a wide band; every scene is a plate with picture, curve, table. */
:root {
  --paper: #f3f6f7;
  --panel: #ffffff;
  --ink: #121a1f;
  --muted: #56636c;
  --rule: #d3dbe0;
  --crystal: #0a8aa3;
  --crystal-soft: #d6eef2;
  --corona: #c9741f;
  --win: #1d7f56;
  --loss: #a8433a;
  --shade: rgba(10, 20, 26, .62);
  --display: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --col: 44rem;
  --wide: 76rem;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0d1215; --panel: #141b20; --ink: #e5ecef; --muted: #94a2ab; --rule: #25313a;
    --crystal: #3fc3da; --crystal-soft: #123039; --corona: #eda04f; --win: #49c08c; --loss: #e07a6e;
    --shade: rgba(0, 0, 0, .62); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0d1215; --panel: #141b20; --ink: #e5ecef; --muted: #94a2ab; --rule: #25313a;
  --crystal: #3fc3da; --crystal-soft: #123039; --corona: #eda04f; --win: #49c08c; --loss: #e07a6e;
  --shade: rgba(0, 0, 0, .62); color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.6 var(--body);
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 4rem;
}
h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.15; text-wrap: balance; margin: 0; }
h2 { font-size: clamp(1.45rem, 3.2vw, 2.1rem); }
h3 { font-size: .95rem; font-weight: 500; letter-spacing: .02em; }
p { margin: 0; }
a { color: var(--crystal); }
a:focus-visible, input:focus-visible { outline: 2px solid var(--crystal); outline-offset: 3px; }
.col { max-width: var(--col); margin-inline: auto; }
.wide { max-width: var(--wide); margin-inline: auto; }
.eyebrow { font: 500 .75rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.note { font-size: .85rem; color: var(--muted); }
section { padding-block: 3.5rem 0; }

/* hero */
.hero { padding-block: 2.5rem 0; display: grid; gap: 1.5rem; }
.brand { display: flex; flex-direction: column; align-items: flex-start; gap: .6rem; }
.brand h1 { font-size: clamp(2.6rem, 8vw, 5rem); letter-spacing: -.02em; }
.brand span { font: 500 .8rem var(--mono); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.thesis { font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.45; max-width: 40rem; }
.thesis b { color: var(--crystal); font-weight: 600; }
.hero-img { position: relative; aspect-ratio: 1200 / 800; max-width: 100%; overflow: hidden; border-radius: 4px; }
.hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-img .tag { left: .75rem; bottom: .75rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.facts div { background: var(--paper); padding: 1rem 1.1rem; display: grid; gap: .25rem; align-content: start; }
.facts strong { font: 700 1.9rem/1 var(--display); color: var(--crystal); font-variant-numeric: tabular-nums; }
.facts span { font-size: .9rem; color: var(--muted); }
.facts .even strong { color: var(--muted); }

/* tags on pictures */
.tag { position: absolute; font: 500 .75rem/1 var(--mono); color: #fff; background: var(--shade); padding: .4rem .55rem; border-radius: 3px; pointer-events: none; }

/* summary */
.summary { display: grid; gap: 1.5rem; }
.summary-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .summary-grid { grid-template-columns: minmax(0, 1fr); } }

/* charts */
.chart { width: 100%; height: auto; display: block; }
.chart .grid { stroke: var(--rule); stroke-width: 1; }
.chart .base { stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 3 3; }
.chart .tick, .chart .axis, .chart .label, .chart .value { fill: var(--muted); font: 400 12px var(--mono); }
.chart .label { fill: var(--ink); font: 500 13px var(--body); }
.chart .value { fill: var(--ink); font-weight: 500; }
.chart .axis { font-size: 11px; }
.chart .line { fill: none; stroke-width: 2.5; }
.chart .line.corona, .chart .dot.corona { stroke: var(--corona); }
.chart .line.crystal, .chart .dot.crystal { stroke: var(--crystal); }
.chart .dot { fill: var(--panel); stroke-width: 2.5; }
.chart .same { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 2 3; }
.chart .bar.win { fill: var(--crystal); }
.chart .bar.loss { fill: var(--corona); }
.legend { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font: 400 .8rem var(--mono); color: var(--muted); align-items: center; }
.key { display: inline-block; width: 1.4rem; height: 3px; vertical-align: middle; margin-right: .35rem; }
.key.corona { background: var(--corona); } .key.crystal { background: var(--crystal); }
.key.same { border-top: 1px dashed var(--muted); height: 0; }

/* tables */
table { width: 100%; border-collapse: collapse; font: 400 .9rem var(--mono); font-variant-numeric: tabular-nums; }
th { text-align: right; font-weight: 500; color: var(--muted); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; padding: .45rem .5rem; border-bottom: 1px solid var(--rule); }
td { text-align: right; padding: .45rem .5rem; border-bottom: 1px solid var(--rule); }
th:first-child, td:first-child { text-align: left; }
td.x { font-weight: 500; }
td.win { color: var(--win); } td.loss { color: var(--loss); }
tr.est td { color: var(--muted); }
.table-scroll { overflow-x: auto; }

/* method */
.method { display: grid; gap: 1rem; }
.method ol { margin: 0; padding-left: 1.3rem; display: grid; gap: .6rem; }
.kit { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem; }
.kit div { border-top: 3px solid var(--rule); padding-top: .6rem; display: grid; gap: .2rem; }
.kit div.cpu { border-color: var(--corona); } .kit div.gpu { border-color: var(--crystal); }
.kit b { font-family: var(--display); font-weight: 500; font-size: .95rem; }
.kit span { font-size: .9rem; color: var(--muted); }

/* scenes */
.scene { display: grid; gap: 1.5rem; border-top: 1px solid var(--rule); margin-top: 3.5rem; }
.scene-head { display: grid; gap: .5rem; max-width: var(--col); }
.about { color: var(--muted); }
.compare { position: relative; margin: 0; aspect-ratio: var(--ratio); width: min(100%, calc(85vh * var(--ratio))); max-width: 100%; justify-self: center; overflow: hidden; border-radius: 4px; background: var(--panel); --pos: 50%; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.compare img.top { clip-path: inset(0 0 0 var(--pos)); }
.compare::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); pointer-events: none; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.compare .tag.left { left: .6rem; top: .6rem; } .compare .tag.right { right: .6rem; top: .6rem; }
.compare figcaption { position: absolute; left: .6rem; bottom: .6rem; right: .6rem; font-size: .8rem; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); pointer-events: none; }
.scene-data { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 860px) { .scene-data { grid-template-columns: minmax(0, 1fr); } }
.chart-box, .table-box { display: grid; gap: .75rem; min-width: 0; }
.raw { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.raw div { position: relative; }
.raw img { width: 100%; display: block; border-radius: 3px; image-rendering: pixelated; }
.raw .tag.left { left: .5rem; top: .5rem; }
.raw figcaption { grid-column: 1 / -1; font-size: .85rem; color: var(--muted); }
@media (max-width: 560px) { .raw { grid-template-columns: minmax(0, 1fr); } }

/* features and roadmap */
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 1.5rem 2rem; }
.features div { display: grid; gap: .35rem; align-content: start; }
.features h3 { font-size: 1rem; }
.features p { color: var(--muted); font-size: .95rem; }
.road { display: grid; gap: 0; border-left: 2px solid var(--crystal); margin-left: .4rem; }
.road div { padding: 0 0 1.4rem 1.4rem; position: relative; display: grid; gap: .3rem; }
.road div::before { content: ""; position: absolute; left: -7px; top: .45rem; width: 12px; height: 12px; border-radius: 50%; background: var(--paper); border: 2px solid var(--crystal); }
.road .base-of { font: 400 .8rem var(--mono); color: var(--muted); }
.limits ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .45rem; }
footer { margin-top: 4rem; border-top: 1px solid var(--rule); padding-top: 1.2rem; font-size: .85rem; color: var(--muted); display: grid; gap: .4rem; }
@media (prefers-reduced-motion: no-preference) { .compare::after { transition: left .05s linear; } }

/* site chrome: shared by every page */
.nav { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; padding-block: 1rem; border-bottom: 1px solid var(--rule); }
.nav .logo { font: 700 1.1rem var(--display); color: var(--ink); text-decoration: none; margin-right: auto; }
.nav a { color: var(--muted); text-decoration: none; font-size: .95rem; }
.nav a:hover, .nav a[aria-current] { color: var(--ink); }
.nav .lang { font: 500 .8rem var(--mono); border: 1px solid var(--rule); border-radius: 3px; padding: .2rem .45rem; }
.btn { display: inline-block; padding: .8rem 1.3rem; border-radius: 4px; font: 600 1rem var(--body); text-decoration: none; border: 1px solid var(--crystal); }
.btn.primary { background: var(--crystal); color: #fff; }
.btn.ghost { color: var(--crystal); }
.actions { display: flex; gap: .75rem; flex-wrap: wrap; }
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.gallery figure { margin: 0; display: grid; gap: .4rem; }
.gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; display: block; }
.gallery figcaption { font-size: .85rem; color: var(--muted); }
.prose { display: grid; gap: 1rem; }
.prose h2 { margin-top: 1.5rem; }
.prose ul { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; }
.site-foot { display: flex; gap: 1rem; flex-wrap: wrap; }
td { white-space: nowrap; }
.nav .logo img { display: block; height: 32px; width: auto; }
.brand h1 img { display: block; height: clamp(3rem, 9vw, 5rem); width: auto; max-width: 100%; }
/* text tables (licenses): wrap and read left to right, unlike the numeric ones */
table.list th, table.list td { white-space: normal; text-align: left; vertical-align: top; }
/* supported integrations under the hero; product names stay text until there is permission to use their logos */
.works { display: grid; gap: .6rem; }
.works ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.works li { background: var(--panel); padding: 1rem 1.1rem; display: grid; gap: .2rem; }
.works b { font: 700 1.05rem var(--display); }
.works span { font-size: .85rem; color: var(--muted); }
.nav .logo { display: flex; align-items: center; gap: .5rem; }
.beta { display: inline-block; font: 500 .7rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: linear-gradient(90deg, #6366F1, #C026D3); padding: .3rem .45rem; border-radius: 3px; vertical-align: middle; margin-right: .5rem; }
.nav .beta { margin-right: 0; }
/* compatibility page: status chips and a section index */
.st { display: inline-block; font: 500 .72rem/1 var(--mono); padding: .3rem .45rem; border-radius: 3px; white-space: nowrap; }
.st.y { background: #dcf3e8; color: #13603f; }
.st.p { background: #e3ecfd; color: #1e4fae; }
.st.b { background: #ece7fd; color: #5a3fb8; }
.st.n { background: #f6e1df; color: #8f3029; }
.st.u { background: #eceff1; color: #4a565e; }
.legend .st { margin-right: .35rem; }
.toc { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .9rem; }
table.compat td:first-child { width: 34%; font-weight: 500; }
table.compat td:nth-child(2) { width: 1%; }
table.compat td { font-family: var(--body); }
@media (max-width: 640px) {
  table.compat thead { display: none; }
  table.compat tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .3rem .75rem; padding: .6rem 0; border-bottom: 1px solid var(--rule); }
  table.compat td { display: block; width: auto !important; padding: 0; border: 0; }
  table.compat td:nth-child(3) { grid-column: 1 / -1; color: var(--muted); font-size: .9rem; }
  table.compat td:nth-child(3):empty { display: none; }
}
table.compat td p { margin: 0; }
table.compat td p + p { margin-top: .3rem; }
table.compat .ok b { color: #13603f; font-weight: 600; }
table.compat .ko b { color: #8f3029; font-weight: 600; }