:root{
  --paper:#f4f6f8;--paper2:#ffffff;--rule:#d5dbe2;--rule2:#e6eaef;
  --ink:#171c23;--ink2:#3b4653;--dim:#7a8593;
  --signal:#0e7f6d;--signal2:#0a6357;--trace:#5b6875;--mark:#c9741a;
  --display:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Consolas,monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
a{color:var(--signal2)}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance;letter-spacing:-.01em}
:lang(zh-CN) h1,:lang(zh-CN) h2,:lang(zh-CN) h3{text-wrap:normal}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.mono{font-family:var(--mono)}
img,video{max-width:100%}
nav{display:flex;justify-content:space-between;align-items:center;padding-block:16px;border-bottom:1px solid var(--rule)}
.logo{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:.02em}
.logo small{font-family:var(--mono);font-weight:400;font-size:11px;color:var(--dim);margin-left:10px;letter-spacing:.08em}
nav .links{display:flex;gap:22px;font-size:14px}
nav .links a{color:var(--ink2);text-decoration:none}
/* hero */
.hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;padding-block:48px 36px}
.hero h1{font-size:clamp(34px,4.4vw,54px);font-weight:800;line-height:1.02;letter-spacing:-.03em;margin-top:14px}
.hero h1 span{color:var(--signal)}
.hero p.lead{font-size:17px;color:var(--ink2);max-width:34em;margin:18px 0 0}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px;align-items:center}
.btn{display:inline-block;padding:12px 20px;border-radius:4px;font-family:var(--display);font-weight:700;font-size:15px;text-decoration:none}
.btn.primary{background:var(--ink);color:var(--paper2)}
.btn.ghost{border:1px solid var(--rule);color:var(--ink);background:var(--paper2)}
.fine{font-family:var(--mono);font-size:12px;color:var(--dim)}
.screen{background:var(--paper2);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.screen video{display:block;width:100%;aspect-ratio:16/9;background:#111}
.screen .bar{display:grid;grid-template-columns:1fr auto;gap:12px;padding:10px 14px;font-family:var(--mono);font-size:11px;color:var(--ink2);border-top:1px solid var(--rule2);align-items:center}
.screen .bar b{font-family:var(--display);font-size:22px;color:var(--signal);font-weight:800;letter-spacing:-.02em}
.screen .bar .tag{color:var(--dim)}
/* strip */
.strip{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip > div{padding:18px 16px 18px 0;border-right:1px solid var(--rule);margin-right:16px}
.strip > div:last-child{border-right:0}
.strip .n{font-family:var(--display);font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.strip .l{font-size:13px;color:var(--ink2);margin-top:2px}
section{padding-block:64px;border-bottom:1px solid var(--rule)}
section h2{font-size:clamp(26px,3.2vw,38px);font-weight:700;margin-top:8px;max-width:20em}
section p.sub{color:var(--ink2);font-size:17px;max-width:40em;margin:14px 0 0}
/* trace */
.trace{background:var(--paper2);border:1px solid var(--rule);border-radius:6px;padding:18px 18px 14px;margin-top:28px}
.trace .hdr{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.04em;margin-bottom:8px}
.trace svg{width:100%;height:auto;display:block}
.trace .legend{display:flex;gap:18px;font-family:var(--mono);font-size:11px;color:var(--ink2);margin-top:8px}
.legend i{display:inline-block;width:18px;height:2px;vertical-align:middle;margin-right:6px}
.tr-o{stroke:var(--trace);stroke-width:1.6;fill:none}
.tr-b{stroke:var(--signal);stroke-width:2;fill:none;stroke-dasharray:1400;stroke-dashoffset:1400;animation:draw 2.2s .3s ease-out forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.tr-b{animation:none;stroke-dashoffset:0}}
.ax{stroke:var(--rule);stroke-width:1}
.axl{font-family:var(--mono);font-size:10px;fill:var(--dim)}
.band{fill:var(--rule2)}
.bandl{font-family:var(--mono);font-size:10px;fill:var(--ink2);text-anchor:middle}
/* compare slider */
.cmp{position:relative;margin-top:28px;border:1px solid var(--rule);border-radius:6px;overflow:hidden;background:#111;aspect-ratio:16/9;max-width:100%}
.cmp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cmp .top{clip-path:inset(0 50% 0 0)}
.cmp .div{position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--paper2);box-shadow:0 0 0 1px rgba(0,0,0,.25);pointer-events:none}
.cmp .div::after{content:"⇆";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--paper2);color:var(--ink);font-family:var(--mono);font-size:15px;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.cmp input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.cmp .lab{position:absolute;top:12px;font-family:var(--mono);font-size:11px;color:#fff;background:rgba(0,0,0,.55);padding:4px 8px;border-radius:3px;pointer-events:none}
.cmp .lab.l{left:12px}.cmp .lab.r{right:12px}
/* three columns: budget / guards / proof */
.rows{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:32px}
.row{border-top:2px solid var(--rule);padding-top:14px}
.row .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--signal)}
.row h3{font-size:17px;font-weight:700;margin-top:6px}
.row p{color:var(--ink2);font-size:14px;margin:8px 0 0}
/* tool */
.tool{display:grid;grid-template-columns:1fr;gap:28px;margin-top:28px;align-items:start}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.steps div{border-top:1px solid var(--rule);padding-top:14px}
.steps b{font-family:var(--mono);font-size:11px;color:var(--signal);letter-spacing:.1em}
.steps h3{font-size:17px;font-weight:700;margin-top:4px}
.steps p{color:var(--ink2);font-size:14px;margin:8px 0 0}
.shot{margin:0;padding:12px 12px 0;background:var(--paper2);border:1px solid var(--rule);border-radius:8px;overflow:hidden;box-shadow:0 20px 50px -30px rgba(23,28,35,.35)}
.shot img{display:block;width:100%;height:auto;border-radius:10px;box-shadow:0 0 0 1px rgba(23,28,35,.08)}
.shot-view{display:block;border-radius:10px;cursor:zoom-in}
.shot figcaption{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:14px 4px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.shot figcaption a{white-space:nowrap;text-decoration:none}
/* language switch */
nav .lang{display:flex;gap:12px;margin-left:22px;font-family:var(--mono);font-size:12px}
nav .lang a{color:var(--dim);text-decoration:none}
nav .lang a[aria-current]{color:var(--ink);font-weight:600}
nav .links{margin-left:auto}
/* table */
table{width:100%;border-collapse:collapse;margin-top:28px;font-size:14px}
th{font-family:var(--mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--dim);text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--rule)}
td{padding:11px 12px 11px 0;border-bottom:1px solid var(--rule2);vertical-align:middle;font-variant-numeric:tabular-nums}
td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
td .id{font-family:var(--mono);font-size:11px;color:var(--dim);display:block}
td.delta{font-family:var(--mono);color:var(--signal2);font-weight:500;text-align:right;white-space:nowrap}
.tbar{display:inline-block;height:8px;background:var(--signal);border-radius:1px;vertical-align:middle}
.tbar.o{background:var(--trace)}
.tablewrap{overflow-x:auto}
.note{font-family:var(--mono);font-size:12px;color:var(--dim);margin-top:14px}
/* gallery */
.gal{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:28px}
.gal figure{margin:0;background:var(--paper2);border:1px solid var(--rule);border-radius:6px;overflow:hidden}
.gal img{display:block;width:100%;aspect-ratio:1;object-fit:cover}
.gal figcaption{padding:10px 12px;font-size:12px;color:var(--ink2)}
.gal figcaption b{display:block;font-family:var(--display);font-size:20px;color:var(--signal2);letter-spacing:-.02em}
.gal figcaption small{display:block;font-family:var(--mono);font-size:10px;color:var(--dim);margin-top:2px}
/* two col */
.two{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:32px}
.two h3{font-size:18px;font-weight:700;margin-bottom:10px}
.two ul{margin:0;padding-left:18px;color:var(--ink2);font-size:15px;display:grid;gap:8px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;padding:3px 7px;border:1px solid var(--rule);border-radius:3px;margin-left:8px;vertical-align:middle}
.tag.exp{color:var(--mark);border-color:#e8c9a3}
/* spec */
.spec{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;margin-top:32px;align-items:start}
.spec p{color:var(--ink2);font-size:16px;margin:0 0 12px}
.renderer-copy{max-width:52em;margin-top:32px}
.renderer-copy p{color:var(--ink2);font-size:16px;margin:0 0 18px}
.renderer-copy p:last-child{margin-bottom:0}
#compatibility .tablewrap{margin-top:28px}
#compatibility th.num{text-align:right}
#compatibility td:last-child strong{color:var(--signal2)}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
#render-benchmark{scroll-margin-top:100px}
.bench-layout{display:grid;grid-template-columns:minmax(285px,.95fr) minmax(0,2fr);gap:34px;align-items:start}
.bench-copy{margin-top:22px}
.bench-copy p{font-size:15px;line-height:1.85;margin:0 0 18px;color:var(--ink2)}
.bench-copy p:last-child{margin-bottom:0}
.bench-copy strong{font-weight:650;color:var(--ink)}
.bench-results{min-width:0}
.bench-hardware{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px;font-family:var(--display);font-size:15px;font-weight:700}
.bench-hardware span{font-family:var(--mono);font-size:11px;font-weight:400;color:var(--dim)}
.bench-sheet{overflow-x:auto;border:1px solid var(--rule);border-radius:8px;background:rgba(255,255,255,.35)}
.bench-sheet:focus-visible{outline:2px solid var(--mark);outline-offset:3px}
.bench-overview{width:100%;min-width:680px;margin:0;table-layout:fixed;font-size:12px;line-height:1.45}
.bench-scene-column{width:112px}
.bench-overview th,.bench-overview td{padding:9px 6px;text-align:right;vertical-align:middle;letter-spacing:0;text-transform:none}
.bench-overview thead th{font-size:10px;font-family:var(--body);font-weight:600;color:var(--ink2)}
.bench-overview th[scope="row"],.bench-overview thead th[rowspan]:first-child{padding-left:12px;text-align:left}
.bench-overview tbody th[scope="row"]{font-family:var(--body);font-size:11px;font-weight:400;color:var(--ink2)}
.bench-overview a{color:inherit;text-decoration:none}
.bench-overview a:hover{color:var(--signal2);text-decoration:underline}
.bench-overview .bench-number{font-family:var(--mono);font-variant-numeric:tabular-nums;white-space:nowrap}
.bench-overview .bench-ours{font-weight:700;color:var(--signal2);background:rgba(14,127,109,.04)}
.bench-overview .bench-export{color:var(--dim)}
.bench-overview .bench-unavailable{font-size:10px;color:var(--dim);white-space:nowrap}
.bench-overview .bench-average th,.bench-overview .bench-average td{padding-top:12px;padding-bottom:12px;border-top:1px solid var(--rule);font-weight:600}
@media(max-width:1000px){.bench-layout{grid-template-columns:1fr;gap:26px}.bench-description{max-width:720px}}
@media(max-width:700px){.bench-overview th[scope="row"],.bench-overview thead th[rowspan]:first-child{position:sticky;left:0;z-index:1;background:#f3f7f5;box-shadow:1px 0 var(--rule)}}

.bench-export-column{width:98px}
.bench-overview tr>*:last-child{padding-right:18px}
.bench-overview thead tr:last-child>*:last-child{padding-right:6px}
.bench-overview .bench-frame-heading{text-align:center;font-size:11px;padding:12px 6px}
.bench-overview .bench-export-heading{font-size:10px}
.bench-overview small{display:block;font-size:9px;font-family:var(--body);font-weight:400;white-space:normal;margin-top:3px}
.bench-overview .bench-timeout{color:#a55b0b}
.bench-overview .bench-unsupported{color:#ba3636}
.bench-overview .bench-average .bench-export strong{color:var(--signal2)}
.bench-compatibility{margin-top:24px;scroll-margin-top:110px}
.bench-coverage{margin:0;font-size:12px}
.bench-coverage th,.bench-coverage td{padding:9px 5px;letter-spacing:0;text-transform:none;font-family:var(--body)}
.bench-coverage th:first-child{padding-left:0;text-align:left;font-size:12px;font-weight:400}
.bench-coverage th:not(:first-child),.bench-coverage td{text-align:right;white-space:nowrap}
.bench-coverage td strong{color:var(--signal2)}

.kvs{border-top:1px solid var(--rule)}
.kvs div{display:grid;grid-template-columns:1fr 1.3fr;gap:12px;padding-block:10px;border-bottom:1px solid var(--rule2);font-size:14px}
.kvs div span:first-child{font-family:var(--mono);font-size:12px;color:var(--dim);padding-top:2px}
.kvs div span:last-child{font-variant-numeric:tabular-nums}
/* roadmap */
.road{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:32px}
.road div{border-top:2px solid var(--rule);padding-top:12px}
.road div.now{border-top-color:var(--signal)}
.road div.big{border-top-color:var(--mark)}
.road .when{font-family:var(--mono);font-size:11px;color:var(--dim);letter-spacing:.1em}
.road h3{font-size:17px;font-weight:700;margin-top:6px}
.road p{color:var(--ink2);font-size:14px;margin:8px 0 0}
/* faq */
.faq{margin-top:28px;border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:16px 0;font-family:var(--display);font-weight:700;font-size:17px;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";font-family:var(--mono);color:var(--dim)}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:0;padding:0 0 18px;color:var(--ink2);font-size:15px;max-width:44em}
footer{padding-block:26px;font-family:var(--mono);font-size:12px;color:var(--dim);display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-block:32px 24px}
  .strip{grid-template-columns:repeat(2,1fr)}
  .strip > div:nth-child(2n){border-right:0}
  .tool,.steps{grid-template-columns:1fr}
  .rows{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .two,.spec,.road{grid-template-columns:1fr}
  nav .links{display:none}
  nav .lang{margin-left:auto}
}

/* Liquid glass: native CSS surfaces over a quiet, coloured light field. */
:root {
  --dim: #667482;
  --surface-edge: rgba(255, 255, 255, .88);
  --glass: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,255,255,.38) 48%, rgba(237,247,246,.58));
  --shadow-small: inset 0 1px 1px #fff, inset 0 -1px 1px rgba(52,101,93,.1), 0 8px 24px -18px rgba(27,66,63,.3);
  --shadow-display: inset 0 1px 1px #fff, 0 0 0 1px rgba(50,89,84,.07), 0 22px 54px -28px rgba(27,66,63,.32);
}
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body {
  background: radial-gradient(ellipse at 88% 0, #cce8e2 0, transparent 35%),
    radial-gradient(ellipse at 2% 18%, #e2e8f6 0, transparent 32%),
    radial-gradient(ellipse at 80% 75%, #e3efeb 0, transparent 35%), #f3f6f5;
}
nav {
  position: sticky; top: 14px; z-index: 20;
  margin-top: 14px; padding: 16px 22px; gap: 16px;
  border: 1px solid var(--surface-edge); border-radius: 999px;
  background: var(--glass); box-shadow: var(--shadow-small);
  -webkit-backdrop-filter: blur(24px) saturate(1.45); backdrop-filter: blur(24px) saturate(1.45);
}
nav .links { gap: 17px; }
.logo { white-space: nowrap; }
.strip {
  padding: 4px 24px; border: 1px solid var(--surface-edge); border-radius: 24px;
  background: var(--glass); box-shadow: var(--shadow-small);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.strip > div { border-color: rgba(64,105,98,.12); container-type: inline-size; }
.strip .n { color: #155f54; white-space: nowrap; }
html[lang="en"] .strip .n { font-size: clamp(14px, 10.5cqi, 30px); }
html[lang="zh-CN"] .hero h1 { line-height: 1.08; }

.screen, .cmp, .trace, .shot {
  border-color: var(--surface-edge);
  border-radius: 22px;
  box-shadow: var(--shadow-display);
}
.screen, .trace, .gal figure {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
}
.shot { background: var(--glass); }
.screen .bar, .shot figcaption {
  background: linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.2));
}
.screen .bar .tag {
  display: block;
  margin: 4px 0 0;
  padding: 0;
  border: 0;
  letter-spacing: .025em;
  line-height: 1.6;
}
.gal figure {
  border-color: var(--surface-edge);
  border-radius: 18px;
  box-shadow: var(--shadow-small);
  transition: border-color 180ms ease, box-shadow 220ms ease;
}
.gal figcaption { border-top: 1px solid rgba(37, 56, 72, .06); }
.trace { box-shadow: var(--shadow-small); }
.tr-o, .tr-b { stroke-linecap: round; stroke-linejoin: round; }
.tbar { border-radius: 2px; box-shadow: inset 0 1px rgba(255, 255, 255, .18); }
tbody tr { transition: background-color 160ms ease; }
.road .now .when { color: var(--signal2); }
.road .big .when { color: var(--mark); }

/* Feedback on existing controls; no added actions or content gates. */
.btn {
  border-radius: 999px;
  transition: background-color 160ms ease, border-color 160ms ease,
    box-shadow 180ms ease, transform 150ms ease;
}
.btn.primary {
  background: linear-gradient(155deg, #218f7b, #126454);
  border: 1px solid rgba(12,87,72,.35);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.55), inset 0 -1px 2px rgba(3,43,34,.16), 0 6px 18px -8px rgba(15,101,80,.6);
}
.btn.ghost { background: var(--glass); border-color: var(--surface-edge); box-shadow: var(--shadow-small); }
nav .links a {
  position: relative;
  transition: color 160ms ease;
}
nav .links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--signal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
nav .lang a { transition: color 160ms ease; }
nav .links a:focus-visible::after { transform: scaleX(1); }
.btn:active { transform: translateY(1px); }
.cmp .div::after {
  border: 1px solid rgba(23, 28, 35, .08);
  box-shadow: 0 1px 3px rgba(23, 28, 35, .16), 0 5px 14px rgba(23, 28, 35, .12);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.cmp:focus-within { outline: 2px solid var(--mark); outline-offset: 3px; }
.faq summary { transition: color 160ms ease, background-color 160ms ease; }
.faq summary::after { transition: color 160ms ease; }
.faq details[open] summary { color: var(--signal2); }
.faq details[open] p { animation: answer-in 170ms ease-out; }
@keyframes answer-in {
  from { opacity: .85; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translateY(-1px); }
  .btn:active { transform: translateY(1px); }
  .btn.primary:hover {
    box-shadow: inset 0 1px rgba(255, 255, 255, .16),
      0 2px 4px rgba(23, 28, 35, .12), 0 8px 16px -9px rgba(23, 28, 35, .4);
  }
  .btn.ghost:hover { border-color: #aebdc5; background: #f8fafb; }
  nav .links a:hover, nav .lang a:hover { color: var(--signal2); }
  nav .links a:hover::after { transform: scaleX(1); }
  .gal figure:hover {
    border-color: #b8c9c6;
    box-shadow: 0 2px 4px rgba(23, 28, 35, .04), 0 12px 24px -17px rgba(23, 28, 35, .25);
  }
  tbody tr:hover { background: rgba(14, 127, 109, .035); }
  .cmp:hover .div::after { transform: translate(-50%, -50%) scale(1.06); }
  .faq summary:hover { color: var(--signal2); background: rgba(14, 127, 109, .025); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, nav .links a, nav .links a::after, nav .lang a, .gal figure,
  tbody tr, .cmp .div::after, .faq summary, .faq summary::after { transition: none; }
  .faq details[open] p { animation: none; }
}
@media (max-width: 1050px) { nav .links { gap: 12px; font-size: 12px; } .logo small { display: none; } }
@media (max-width: 680px) {
  nav { top: 8px; padding: 12px 16px; gap: 8px; }
  nav .lang { margin-left: auto; }
  .strip { padding: 4px 16px; border-radius: 20px; }
  .strip > div { margin-right: 0; padding-right: 8px; }
  .strip .n { font-size: 24px; }
  .screen, .cmp, .trace, .shot { border-radius: 18px; }
}