/* Auto Researcher — public pages (landing, enterprise) in a Monet light.
   Layout: a painted water-lily pond opens the page with the live sample run floating on frosted glass;
   below it, calm misty paper with hairline structure and serif headings. The pond is the one bold move. */
body.monet {
  /* Nymphéas palette: mist paper, violet-ink shadows, pond blue, lilac, lily pink, low sun.
     No green anywhere, the painted pond included (its pads are blue-violet greys). A gold mark (dot, tag, ring,
     fill) means a decision the user makes: .lx-decide::before, .lx-gtag and the sample run's waiting card and
     status. Illustrations use pond, lilac and lily; gold appears elsewhere only as a faint watercolour wash. */
  --paper: #f4f5f9; --ink: #262a4a; --ink-2: #4b5072; --ink-3: #6c7193;
  --pond: #5679b4; --lilac: #9a8bcf; --lily: #e0939f; --sun: #e9bd5f;
  --display: "Instrument Serif", "Noto Serif SC", "Songti SC", "STSong", Georgia, serif;
  /* the shared system tokens, re-pointed so nav, buttons, badges and the footer follow the light */
  --bg: var(--paper); --surface: #ffffff; --surface-2: #eef1f7; --surface-3: #e2e7f0;
  --text: var(--ink); --text-2: var(--ink-2); --muted: var(--ink-3); --border: #e0e4ee; --border-strong: #cbd2e1;
  --accent: #3e66a3; --accent-2: #2f5791; --accent-soft: #e5ecf7; --accent-ink: #ffffff; --glow: var(--pond);
  --success: #3e66a3; --success-soft: #e6edf8; --gate: #86610f; --gate-soft: #fbf0d4; --highlight: var(--sun);
  --warn: #9c4c2a; --warn-soft: #f6e6dc; --danger: #b84b66; --danger-soft: #f8e3e9; --code-bg: #eef1f7;
  --shadow: 0 1px 2px rgba(38, 42, 74, .05), 0 8px 24px rgba(38, 42, 74, .06);
  --shadow-lg: 0 2px 6px rgba(38, 42, 74, .05), 0 30px 80px rgba(52, 62, 110, .16);
  color-scheme: light;
}
html:has(body.monet) { background: #f4f5f9; }
/* opaque: page content never shows through the sticky bar */
body.monet .nav { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: rgba(38, 42, 74, .06); }

@keyframes lx-grad { to { background-position: 100% 0; } }
@keyframes lx-flow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes lx-marquee { to { transform: translateX(-50%); } }
@keyframes lx-breathe { 50% { box-shadow: 0 0 0 1px var(--sun), 0 0 26px rgba(233, 189, 95, .45); } }

.lx-label { font: 500 .7rem/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:lang(zh) .lx-label { letter-spacing: .04em; }

/* ---------- buttons ---------- */
.lx-btn { display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: 999px; font: 600 .98rem var(--font);
  color: #fff; background: var(--ink); border: 1px solid var(--ink); box-shadow: 0 10px 28px rgba(38, 42, 74, .22);
  transition: transform .2s var(--ease), box-shadow .2s, background .3s; }
.lx-btn:hover { text-decoration: none; transform: translateY(-1px); background: #33386a; box-shadow: 0 14px 36px rgba(38, 42, 74, .3); }
.lx-btn span { transition: transform .2s var(--ease); } .lx-btn:hover span { transform: translateX(3px); }
.lx-btn.ghost { color: var(--ink); background: rgba(255, 255, 255, .62); border-color: rgba(38, 42, 74, .14); box-shadow: none; backdrop-filter: blur(10px); }
.lx-btn.ghost:hover { background: #fff; }

/* ---------- hero: the pond ---------- */
.lx-hero { position: relative; overflow: hidden; isolation: isolate; padding: 84px 0 104px; background: linear-gradient(180deg, #eef2f9, #dde4f2); }
.lx-pond { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
/* morning mist over the copy so the type stays crisp; the pond shows fully behind the sample run */
.lx-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(244, 245, 249, .9) 0%, rgba(244, 245, 249, .72) 34%, rgba(244, 245, 249, 0) 60%),
              linear-gradient(0deg, var(--paper) 0%, rgba(244, 245, 249, 0) 18%); }
.lx-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 56px; align-items: center; }
@media (max-width: 960px) {
  .lx-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; } .lx-hero { padding: 44px 0 72px; }
  .lx-hero::before { background: linear-gradient(180deg, rgba(244, 245, 249, .9) 0%, rgba(244, 245, 249, .74) 40%, rgba(244, 245, 249, .1) 62%, rgba(244, 245, 249, .1) 88%, var(--paper) 100%); }
}
.lx-brandline { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.lx-brandline em { font: italic 400 1.7rem/1 "Instrument Serif", var(--serif); color: var(--ink); }
.lx-brandline span { font: 500 .7rem var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
:lang(zh) .lx-brandline span { letter-spacing: .06em; }
.lx-hero h1 { font: 500 clamp(2.5rem, 4.4vw, 4rem)/1.08 var(--display); letter-spacing: -.01em; margin: 18px 0 22px; color: var(--ink); }
@media (max-width: 960px) { .lx-hero h1 { font-size: clamp(2.4rem, 9vw, 4rem); } }
.lx-grad { background: linear-gradient(100deg, var(--pond) 0%, var(--lilac) 34%, var(--lily) 66%, var(--sun) 100%); background-size: 210% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: lx-grad 9s ease-in-out infinite alternate; }
/* headline words in deeper ink versions of pond, lilac and lily, so they stay legible over the mist (no gold: gold means a decision) */
.lx-hero h1 .lx-grad { background-image: linear-gradient(100deg, #3e66a3 0%, #6a5cae 50%, #a4506b 100%); }
.lx-hero .lead { font-size: 1.08rem; color: var(--ink-2); max-width: 32em; margin-bottom: 30px; }
/* who pays and the default cap, under the buttons; the demo note under that when the site runs in demo mode */
.lx-cost { margin: 20px 0 0; max-width: 34rem; font-size: .9rem; line-height: 1.55; color: var(--ink-2); }
.lx-cost a { color: var(--accent); font-weight: 500; white-space: nowrap; }
/* The dot before 查看定价 is an inline box drawn by its padding (an inline-block always lets the line break before
   it): with the word joiner before it, the dot stays with the word before it, so a wrapped line never starts with it. */
.lx-cost .msep { display: inline; font-size: 0; padding: 1.2px; margin: 0 .2rem 0 .45rem; vertical-align: middle; }
.lx-demo-note { margin: 10px 0 0; max-width: 34rem; font-size: .85rem; line-height: 1.55; color: var(--ink-3); }
.lx-demo-note .badge { height: 20px; margin-right: 4px; vertical-align: 1px; }

/* ---------- sample run on frosted glass ---------- */
.lx-tree { position: relative; border-radius: 22px; padding: 14px 16px 12px; container: lxtree / inline-size;
  background: rgba(255, 255, 255, .56); backdrop-filter: blur(18px) saturate(1.25); -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 30px 80px rgba(52, 62, 110, .2), inset 0 1px 0 #fff; }
.lx-tree::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(140deg, rgba(154, 139, 207, .75), transparent 34%, transparent 66%, rgba(224, 147, 159, .75));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.lx-tree-head, .lx-tree-foot { display: flex; align-items: center; gap: 10px; font: 500 .66rem var(--mono); letter-spacing: .1em; color: var(--ink-3); }
.lx-tree-head { padding-bottom: 11px; border-bottom: 1px solid rgba(38, 42, 74, .08); }
.lx-mark { display: inline-flex; gap: 3px; } .lx-mark i { width: 6px; height: 6px; border-radius: 50%; background: var(--pond); }
.lx-mark i:nth-child(2) { background: var(--lily); } .lx-mark i:nth-child(3) { background: var(--lilac); }
.lx-status { margin-left: auto; letter-spacing: .02em; color: var(--ink-2); display: inline-flex; align-items: center; gap: 7px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lx-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pond); --c: var(--pond); animation: pulse 1.6s infinite; flex: none; }
.lx-status.wait { color: var(--gate); } .lx-status.wait::before { background: var(--sun); --c: var(--sun); }
.lx-stage { position: relative; aspect-ratio: 16 / 10; margin: 12px 2px; }
.lx-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lx-wires.v { display: none; }
/* landing.js rescales the 0–100 paths to pixels so pathLength-based dashes stay exact */
.lx-wires path { fill: none; stroke: rgba(38, 42, 74, .22); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease); }
.lx-wires path.on { stroke-dashoffset: 0; }
html:not(.js) .lx-wires path { vector-effect: non-scaling-stroke; stroke-dasharray: none; }
.lx-wires path.flow { stroke: var(--lilac); stroke-width: 2.2; stroke-dasharray: .08 .92; opacity: 0; transition: opacity .4s; }
.lx-wires path.flow.on { opacity: .95; animation: lx-flow 1.6s linear infinite; }
.lx-node { position: absolute; display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; font-size: .72rem; line-height: 1.35;
  background: rgba(255, 255, 255, .9); border: 1px solid rgba(38, 42, 74, .09); box-shadow: 0 4px 16px rgba(52, 62, 110, .07);
  opacity: 0; transform: translateY(-50%) scale(.94); transition: opacity .5s var(--ease), transform .5s var(--ease), border-color .4s, box-shadow .4s; z-index: 1; }
.lx-node.on { opacity: 1; transform: translateY(-50%); }
.lx-node small { font: 500 .58rem var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
:lang(zh) .lx-node small { letter-spacing: .04em; }
.lx-node b { font-size: .8rem; font-weight: 600; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lx-node i { font: normal .64rem var(--mono); color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-idea { left: 0; top: 50%; width: 22%; }
.n-lit { left: 27%; top: 50%; width: 20%; }
.n-h1, .n-h2, .n-h3 { left: 53%; width: 22%; } .n-h1 { top: 15%; } .n-h2 { top: 50%; } .n-h3 { top: 85%; }
.n-paper { left: 80%; top: 50%; width: 20%; }
.lx-node.hyp em { font-style: normal; display: none; }
.lx-node.hyp .r { display: none; } .lx-node.hyp.done .r, .lx-node.hyp.done em { display: inline; }
.lx-node.hyp.done .w { display: none; }
.lx-node.hyp.done.supported { border-color: rgba(86, 121, 180, .6); box-shadow: 0 6px 22px rgba(86, 121, 180, .18); }
.lx-node.hyp.done.supported small { color: var(--success); }
.lx-node.hyp.done.refuted { opacity: .62; } .lx-node.hyp.done.refuted small { color: var(--danger); }
.lx-node.hyp.done.inconclusive { border-color: var(--border-strong); border-style: dashed; } .lx-node.hyp.done.inconclusive small { color: var(--ink-2); }
.lx-gtag { position: absolute; top: -9px; right: 8px; font: 600 .56rem var(--mono); letter-spacing: .02em; padding: 2px 6px; border-radius: 5px; background: var(--sun); color: #3a2a00;
  opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; white-space: nowrap; }
.lx-node.gate { z-index: 2; border-color: var(--sun); animation: lx-breathe 1.4s ease-in-out infinite; }
.lx-node.gate .lx-gtag { opacity: 1; transform: none; }
/* the middle hypothesis carries the plan-and-budget tag, centred so it never runs off a narrow card */
.n-h2 .lx-gtag { right: auto; left: 50%; transform: translate(-50%, 4px); }
.lx-node.n-h2.gate .lx-gtag { transform: translateX(-50%); }
.n-paper .dec { color: var(--success); font-weight: 600; opacity: 0; transition: opacity .4s; }
.n-paper.reviewed .dec { opacity: 1; }
.n-paper.done { border-color: rgba(86, 121, 180, .55); box-shadow: 0 8px 30px rgba(86, 121, 180, .22); }
.lx-tree-foot { padding-top: 10px; border-top: 1px solid rgba(38, 42, 74, .08); letter-spacing: .04em; }
.lx-tree-foot b { color: var(--ink); font-weight: 600; }
.lx-meter { flex: 1; height: 4px; border-radius: 4px; background: rgba(38, 42, 74, .08); overflow: hidden; }
/* the same reading as the app's spend bar: pond, rust from 80%, rose from 95% (landing.js sets the class) */
.lx-meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--pond); transition: width .6s var(--ease), background .3s; }
.lx-meter i.warn { background: var(--warn); } .lx-meter i.danger { background: var(--danger); }
.lx-tree-foot > span:first-child, .lx-tree-foot > .muted { white-space: nowrap; }
.lx-node.hyp .p { white-space: nowrap; }
/* the idea and the review verdict are the point of the sample: let them wrap rather than cut them off */
.n-idea b { -webkit-line-clamp: 6; }
.n-paper i { white-space: normal; }
/* The tree turns vertical whenever the panel itself is narrow (side column on laptops, or phones). The three
   hypothesis cards then stack their parts (verdict, effect, p-value) on their own lines instead of cutting them off. */
@container lxtree (max-width: 540px) {
  .lx-stage { aspect-ratio: auto; height: 470px; }
  .lx-wires.h { display: none; } .lx-wires.v { display: block; }
  .n-idea { left: 8%; width: 84%; top: 9%; }
  .n-lit { left: 20%; width: 60%; top: 31%; }
  .n-h1, .n-h2, .n-h3 { width: 31.5%; top: 58%; } .n-h1 { left: 1%; } .n-h2 { left: 34.25%; } .n-h3 { left: 67.5%; }
  .n-paper { left: 8%; width: 84%; top: 86%; }
  .lx-node { padding: 7px 8px; } .lx-node b { font-size: .76rem; }
  .lx-node.hyp .sep { display: none; }
  .lx-node.hyp.done small em, .lx-node.hyp .r .p { display: block; }
  .lx-node.hyp b { -webkit-line-clamp: 3; }
  .lx-node.hyp .r { white-space: normal; }
  /* H1–H3 share one height, so they share their top and bottom edges too (each card is centred on the row);
     9.4em fits the tallest card (verdict, a two- or three-line statement, effect and p-value) in either language */
  .lx-node.hyp { min-height: 9.4em; justify-content: flex-start; }
  .n-idea b { -webkit-line-clamp: 3; }
  /* the spend meter gets its own full-width line under the text instead of shrinking to a stub */
  .lx-tree-foot { flex-wrap: wrap; row-gap: 6px; }
  .lx-tree-foot > .muted { margin-left: auto; }
  .lx-meter { order: 3; flex: 1 0 100%; }
}
.lx-brand { white-space: nowrap; }
/* phones: the status line ('Waiting for you to approve the plan & budget') needs the whole header */
@container lxtree (max-width: 420px) { .lx-brand { display: none; } }

/* ---------- built-on strip ---------- */
.lx-strip { border-bottom: 1px solid var(--border); padding: 18px 0; }
.lx-strip .container { display: flex; align-items: center; gap: 28px; }
.lx-marquee { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lx-marquee > div { display: flex; width: max-content; animation: lx-marquee 40s linear infinite; }
.lx-marquee span { padding-right: 52px; font: 400 1.25rem var(--display); color: var(--ink-3); white-space: nowrap; }
.lx-strip:hover .lx-marquee > div { animation-play-state: paused; }

/* ---------- figures ---------- */
.lx-stats { border-bottom: 1px solid var(--border); }
.lx-stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lx-stats-grid > div { padding: 44px 32px 46px 0; }
.lx-stats-grid > div + div { padding-left: 32px; border-left: 1px solid var(--border); }
.lx-big { font: 400 clamp(3.2rem, 6vw, 4.6rem)/1 var(--display); color: var(--ink); margin-bottom: 14px; }
.lx-stats-grid > div:first-child .lx-big { background: linear-gradient(100deg, var(--pond), var(--lilac) 60%, var(--lily)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lx-stats p { margin: 10px 0 0; color: var(--ink-2); font-size: .92rem; max-width: 24em; }
@media (max-width: 760px) { .lx-stats-grid { grid-template-columns: 1fr; } .lx-stats-grid > div, .lx-stats-grid > div + div { padding: 28px 0; border-left: 0; }
  .lx-stats-grid > div + div { border-top: 1px solid var(--border); } }

/* ---------- sections ---------- */
.lx-section { position: relative; padding: 100px 0; border-top: 1px solid var(--border); }
.lx-stats + .lx-section { border-top: 0; }
@media (max-width: 640px) { .lx-section { padding: 68px 0; } }
.lx-head { max-width: 780px; margin-bottom: 42px; }
.lx-head h2 { font: 500 clamp(2rem, 3.8vw, 2.9rem)/1.12 var(--display); color: var(--ink); margin: 12px 0 14px; letter-spacing: -.005em; }
.lx-head p { color: var(--ink-2); font-size: 1.04rem; margin: 0; }
.ph { display: inline-block; }
/* sections settle in from a visible resting state; nothing waits hidden for the observer */
html.js .lx-reveal:not(.in) { transform: translateY(12px); opacity: .55; }
.lx-reveal { transition: opacity .8s var(--ease), transform .8s var(--ease); }

/* ---------- research areas ---------- */
.lx-areas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1000px) { .lx-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .lx-areas { grid-template-columns: 1fr; } }
.lx-area { padding: 14px 14px 20px; border-radius: 18px; border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow);
  transition: transform .25s var(--ease), box-shadow .25s, opacity .8s var(--ease); }
.lx-area:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.lx-area .badge { margin: 4px 0 10px; }
/* availability · requirement; the enterprise ones are a neutral link to the form, never gold */
.lx-area a.badge { text-decoration: none; transition: color .15s, box-shadow .15s; }
.lx-area a.badge:hover { color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.lx-area h3 { font: 500 1.35rem/1.2 var(--display); color: var(--ink); margin-bottom: 6px; }
.lx-area p { color: var(--ink-2); font-size: .88rem; margin: 0; }
/* each drawing sits on its own little watercolor wash */
.lx-art { display: block; width: 100%; max-width: 100%; height: auto; margin-bottom: 14px; border-radius: 12px;
  background: radial-gradient(60% 70% at 18% 25%, rgba(154, 139, 207, .2), transparent 70%), radial-gradient(55% 65% at 85% 75%, rgba(224, 147, 159, .18), transparent 70%),
              radial-gradient(45% 55% at 62% 18%, rgba(233, 189, 95, .12), transparent 70%), #f6f7fb; }
.lx-art .lab { font: 500 8px var(--mono); fill: var(--ink-3); letter-spacing: .04em; }
.lx-art .lab.g { fill: var(--pond); }
.lx-art .grid { stroke: rgba(38, 42, 74, .07); }
@keyframes lx-tok { 0% { transform: scaleX(0); } 35%, 100% { transform: scaleX(1); } }
@keyframes lx-mk { 0%, 32% { opacity: 0; } 42%, 100% { opacity: 1; } }
.llm .bub { fill: #fff; stroke: rgba(38, 42, 74, .08); } .llm .ln { fill: rgba(38, 42, 74, .35); }
.llm .bub2 { fill: rgba(255, 255, 255, .8); stroke: rgba(38, 42, 74, .07); }
.llm .av.a1 { fill: var(--pond); } .llm .av.a2 { fill: var(--lilac); } .llm .av.a3 { fill: var(--lily); }
.llm .tok { fill: rgba(38, 42, 74, .3); transform-box: fill-box; transform-origin: left center; animation: lx-tok 4.8s var(--ease) infinite; }
.llm .mk { font: 700 12px var(--mono); animation: lx-mk 4.8s infinite; } .llm .mk.ok { fill: var(--success); } .llm .mk.no { fill: var(--danger); }
@keyframes lx-draw { 0% { stroke-dashoffset: 1; } 60%, 100% { stroke-dashoffset: 0; } }
@keyframes lx-tip { 0%, 55% { opacity: 0; transform: scale(.4); } 65%, 100% { opacity: 1; transform: scale(1); } }
.curves .base { fill: none; stroke: rgba(38, 42, 74, .3); stroke-width: 1.5; stroke-dasharray: 4 4; }
.curves .cand { fill: none; stroke: var(--pond); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; animation: lx-draw 4.4s var(--ease) infinite; }
.curves .tip { fill: var(--lily); transform-box: fill-box; transform-origin: center; animation: lx-tip 4.4s infinite; }
@keyframes lx-arm1 { 0%, 100% { transform: rotate(-14deg); } 42%, 62% { transform: rotate(38deg); } }
@keyframes lx-arm2 { 0%, 100% { transform: rotate(-34deg); } 42%, 62% { transform: rotate(-9deg); } }
@keyframes lx-cube { 0%, 40%, 66%, 100% { fill: #e6e9f2; } 46%, 60% { fill: var(--lilac); } }
.robot .floor { stroke: rgba(38, 42, 74, .2); } .robot .base { fill: #b9c1d6; }
.robot .link { fill: #d3d9e8; stroke: rgba(38, 42, 74, .18); }
.robot .joint { fill: #fff; stroke: var(--lilac); stroke-width: 2; } .robot .joint.hot { stroke: var(--pond); }
.robot .grip { stroke: var(--ink-2); stroke-width: 2; stroke-linecap: round; }
.robot .cube { fill: #e6e9f2; stroke: rgba(38, 42, 74, .25); animation: lx-cube 5s ease-in-out infinite; }
.robot .arm1 { transform-origin: 70px 104px; animation: lx-arm1 5s ease-in-out infinite; }
.robot .arm2 { transform-origin: 70px 58px; animation: lx-arm2 5s ease-in-out infinite; }
@keyframes lx-atom { 50% { transform: scale(1.28); } }
.mol .orbit { fill: none; stroke: rgba(38, 42, 74, .1); }
.mol .ring { transform-origin: 120px 65px; animation: spin 28s linear infinite; }
.mol .bond { stroke: rgba(38, 42, 74, .28); stroke-width: 2; }
.mol .atom { fill: var(--pond); transform-box: fill-box; transform-origin: center; animation: lx-atom 2.4s ease-in-out infinite; }
.mol .atom.o { fill: var(--lily); } .mol .atom.n { fill: var(--lilac); }
.mol .e { fill: var(--pond); } .mol .e.v { fill: var(--lilac); }

/* ---------- four phases ---------- */
.lx-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; background: #fff; box-shadow: var(--shadow); }
.lx-step { padding: 22px; }
.lx-step + .lx-step { border-left: 1px solid var(--border); }
@media (max-width: 1000px) { .lx-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lx-step:nth-child(3) { border-left: 0; } .lx-step:nth-child(n+3) { border-top: 1px solid var(--border); } }
@media (max-width: 560px) { .lx-steps { grid-template-columns: 1fr; } .lx-step + .lx-step { border-left: 0; border-top: 1px solid var(--border); } }
.lx-step { display: flex; flex-direction: column; }
/* the phase on the left, its typical duration on the right (wraps under it in a narrow card) */
.lx-step-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px 10px; margin-bottom: 6px; }
/* four narrow columns: always two lines, so one long duration doesn't push only its own heading down */
@media (min-width: 1001px) { .lx-step-meta { flex-direction: column; align-items: flex-start; } }
.lx-step h3 { font: 500 1.35rem/1.2 var(--display); color: var(--ink); margin: 6px 0 6px; }
.lx-step p { color: var(--ink-2); font-size: .88rem; margin: 0; }
/* what the user decides in this phase: plain text after a small sun dot (the dot is the decision colour, the words are not) */
.lx-step .lx-decide { display: flex; gap: 8px; align-items: baseline; margin-top: auto; padding-top: 14px; font-size: .84rem; font-weight: 500; color: var(--ink); }
.lx-decide::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--sun); transform: translateY(-2px); }
.lx-viz { position: relative; height: 140px; margin-bottom: 18px; padding: 12px; border-radius: 12px; overflow: hidden; background: #f6f7fb; font: .66rem/1.45 var(--mono); color: var(--ink-2); }
.v-define .pl { display: flex; align-items: center; gap: 8px; width: calc(100% - 92px); margin-bottom: 11px; }
.v-define .pl span { font-size: .6rem; color: #6a5bb0; background: rgba(154, 139, 207, .18); padding: 1px 5px; border-radius: 4px; flex: none; }
.v-define .pl i { display: block; height: 5px; width: var(--w); border-radius: 3px; background: rgba(38, 42, 74, .13); transition: width .9s var(--ease); }
.v-define .pl:nth-child(2) i { transition-delay: .1s; } .v-define .pl:nth-child(3) i { transition-delay: .2s; } .v-define .pl:nth-child(4) i { transition-delay: .3s; }
.v-define .pl.hot i { background: linear-gradient(90deg, var(--pond), rgba(86, 121, 180, .25)); }
.v-define .pl.hot::after { content: ""; flex: 1; border-top: 1px dashed rgba(86, 121, 180, .6); }
/* the gap is something found, not a decision: pond blue and still (pulsing gold means 'you decide') */
.v-define .gap { position: absolute; right: 14px; top: 50%; width: 72px; height: 72px; margin-top: -36px; border-radius: 50%; border: 1.5px dashed var(--pond);
  display: grid; place-items: center; color: var(--accent); background: radial-gradient(circle, rgba(86, 121, 180, .14), transparent 70%); }
/* the first column fits 'HYPOTHESES' as well as 假设; no label can run into the next one */
.v-design .tr { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr) 34px; gap: 6px; padding: 3px 4px; border-bottom: 1px solid rgba(38, 42, 74, .07); }
.v-design .tr span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-design .tr span:last-child { text-align: right; }
.v-design .th { color: var(--ink-3); font-size: .58rem; text-transform: uppercase; letter-spacing: .06em; }
.v-design .tr:not(.th) span:first-child { color: #6a5bb0; }
/* the experiment estimate against the cap: both labelled, the bar at its true share (with a visible minimum) in pond */
.v-design .budget { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 8px; margin-top: 9px; padding: 0 4px; }
.v-design .budget span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); }
.v-design .budget span + span { color: var(--ink-3); }
.v-design .budget b { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(38, 42, 74, .08); overflow: hidden; }
.v-design .budget b i { display: block; height: 100%; width: max(var(--w, 2%), 4px); background: var(--pond); border-radius: inherit; transition: width .9s var(--ease) .3s; }
.v-run { display: flex; align-items: flex-end; justify-content: space-around; padding-bottom: 26px; }
.v-run .b { position: relative; width: 22%; height: 100%; display: flex; align-items: flex-end; }
.v-run .b i { display: block; width: 100%; height: var(--h); border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, rgba(38, 42, 74, .16), rgba(38, 42, 74, .05));
  transform-origin: bottom; transition: transform 1s var(--ease); }
.v-run .b:nth-child(2) i { background: linear-gradient(180deg, var(--pond), var(--lilac) 70%, rgba(224, 147, 159, .5)); box-shadow: 0 8px 24px rgba(86, 121, 180, .28); transition-delay: .15s; }
.v-run .b:nth-child(3) i { transition-delay: .3s; }
.v-run .b::after { content: ""; position: absolute; left: calc(50% - 5px); width: 10px; bottom: calc(var(--h) - 9%); height: 18%; border-block: 1.5px solid rgba(38, 42, 74, .5);
  background: linear-gradient(rgba(38, 42, 74, .5), rgba(38, 42, 74, .5)) center / 1.5px 100% no-repeat; transition: opacity .4s 1s; }
.v-run .b em { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-style: normal; color: var(--ink-3); }
.v-publish { display: flex; gap: 12px; align-items: stretch; }
.v-publish .page { width: 44%; flex: none; padding: 10px; border-radius: 6px; background: #fff; box-shadow: 0 10px 26px rgba(52, 62, 110, .16); transform: rotate(-2deg); }
.v-publish .page b { display: block; height: 6px; width: 82%; border-radius: 3px; background: var(--ink); margin-bottom: 9px; }
.v-publish .page i { display: block; height: 3px; border-radius: 2px; background: #d3d8e4; margin-bottom: 6px; } .v-publish .page i.s { width: 66%; }
.v-publish .revs { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.v-publish .revs span { padding: 4px 8px; border-radius: 6px; background: #fff; border: 1px solid rgba(38, 42, 74, .07); transition: opacity .4s, transform .4s var(--ease); }
.v-publish .revs span:nth-child(2) { transition-delay: .15s; } .v-publish .revs span:nth-child(3) { transition-delay: .3s; } .v-publish .revs span:nth-child(4) { transition-delay: .5s; }
.v-publish .revs .dec { background: var(--success-soft); color: var(--success); border-color: transparent; font-weight: 600; }
html.js .lx-step:not(.in) .v-define .pl i { width: 12%; }
html.js .lx-step:not(.in) .v-design .budget b i { width: 0; }
html.js .lx-step:not(.in) .v-run .b i { transform: scaleY(.2); }
html.js .lx-step:not(.in) .v-run .b::after { opacity: 0; }
html.js .lx-step:not(.in) .v-publish .revs span { opacity: .3; transform: translateX(6px); }

/* ---------- engine: the loop and its notebook ---------- */
.lx-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
@media (max-width: 960px) { .lx-split { grid-template-columns: minmax(0, 1fr); gap: 36px; } }
.lx-loop { list-style: none; margin: 0; padding: 0; }
.lx-loop li { position: relative; padding: 10px 0 14px 24px; margin-left: 5px; border-left: 1px solid var(--border-strong); }
.lx-loop li:last-child { border-left-color: transparent; }
.lx-loop li::before { content: ""; position: absolute; left: -6px; top: 14px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pond); }
.lx-loop li:nth-child(2)::before { border-color: var(--lily); } .lx-loop li:nth-child(3)::before { border-color: var(--lilac); } .lx-loop li:nth-child(4)::before { border-color: var(--accent); }
.lx-loop b { display: block; color: var(--ink); font-size: .98rem; margin-top: 2px; }
.lx-loop p { color: var(--ink-2); font-size: .86rem; margin: 2px 0 0; }
.lx-term { border-radius: 16px; overflow: hidden; background: #fff; border: 1px solid var(--border); font: .78rem/1.5 var(--mono); box-shadow: var(--shadow-lg); }
.lx-term-head { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-bottom: 1px solid var(--border); background: #f8f9fc; color: var(--ink-3); font-size: .7rem; }
.lx-term-head i { width: 9px; height: 9px; border-radius: 50%; background: var(--lily); } .lx-term-head i:nth-child(2) { background: var(--lilac); } .lx-term-head i:nth-child(3) { background: var(--pond); }
.lx-term-head span { margin-left: 8px; }
.lx-term-body { padding: 14px 16px 18px; min-height: 272px; }
.lx-term-body::after { content: "▍"; display: block; margin: 4px 0 0 24px; color: var(--pond); animation: blink 1s steps(1) infinite; }
.lx-term .ln { display: grid; grid-template-columns: 16px 124px minmax(0, 1fr); gap: 8px; padding: 3px 0; transition: opacity .35s, transform .35s var(--ease); }
.lx-term .ln:not(.on) { opacity: 0; transform: translateY(4px); }
.lx-term .w { color: var(--ink-3); } .lx-term .t { color: var(--ink-2); }
.lx-term .ok .m { color: var(--success); } .lx-term .no .m, .lx-term .no .t { color: var(--danger); }
.lx-term .redo .m { color: var(--warn); } .lx-term .go .m { color: #6a5bb0; }
/* the drawn loop-back arrow (a font's ↺ renders as a speck); in the log it fills the mark column on its own */
.ic-redo { vertical-align: -.15em; margin-right: 4px; flex: none; }
.lx-term .m .ic-redo { margin-right: 0; }
.lx-term .ln:last-child .t { color: var(--success); font-weight: 600; }
@media (max-width: 560px) { .lx-term { font-size: .72rem; } .lx-term .ln { grid-template-columns: 14px minmax(0, 1fr); } .lx-term .w, .lx-term .t { grid-column: 2; } .lx-term .t { margin-top: -4px; } }

/* ---------- principles ---------- */
.lx-principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; }
@media (max-width: 860px) { .lx-principles { grid-template-columns: 1fr; } }
.lx-principles > div { background: #fff; padding: 26px 24px; transition: background .25s, opacity .8s var(--ease), transform .8s var(--ease); }
.lx-principles > div:hover { background: #fafbfe; }
.lx-idx { font: 500 .72rem var(--mono); color: var(--pond); }
.lx-principles h3 { color: var(--ink); font-size: 1rem; margin: 10px 0 6px; }
.lx-principles p { color: var(--ink-2); font-size: .87rem; margin: 0; }

/* ---------- pricing ---------- */
.lx-prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 860px) { .lx-prices { grid-template-columns: 1fr; } }
.lx-price { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border-radius: 20px; border: 1px solid var(--border); background: #fff; }
.lx-price h3 { color: var(--ink-2); font-size: .95rem; font-weight: 500; margin: 0; }
.lx-price .amount { font: 400 2.5rem/1.1 var(--display); color: var(--ink); margin: 6px 0 14px; }
.lx-price ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.lx-price li { position: relative; padding: 5px 0 5px 22px; color: var(--ink-2); font-size: .9rem; }
.lx-price li::before { content: "✓"; position: absolute; left: 0; color: var(--success); font-weight: 600; }
.lx-price.hot { border-color: transparent; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(140deg, var(--pond), var(--lilac) 50%, var(--lily)) border-box;
  box-shadow: 0 30px 80px rgba(86, 121, 180, .16); }
/* without demo mode there is no free card: the two paid plans share the row */
@media (min-width: 861px) { .lx-prices.two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lx-price .amount small { display: block; margin-top: 6px; font: 500 .84rem/1.4 var(--font); color: var(--ink-2); }
/* '上限 $20': the word in the price slot, so the figure reads as a cap and not as the plan's price */
.lx-price .amount .pre { font: 500 .9rem var(--font); color: var(--ink-2); vertical-align: middle; }
.lx-price .lx-note { margin: -8px 0 18px; font-size: .86rem; color: var(--ink-2); }
.lx-price-note { margin: 20px 0 0; font-size: .92rem; color: var(--ink-2); }
/* model rates, folded */
.lx-rates { margin-top: 14px; color: var(--ink-2); font-size: .9rem; }
.lx-rates summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; color: var(--accent); font-weight: 500; list-style: none; }
.lx-rates summary::-webkit-details-marker { display: none; }
.lx-rates summary::after { content: ""; width: 7px; height: 7px; border: solid currentColor; border-width: 0 1.6px 1.6px 0; transform: translateY(-2px) rotate(45deg); transition: transform .2s var(--ease); }
.lx-rates[open] summary::after { transform: translateY(1px) rotate(-135deg); }
.lx-rates-body { margin-top: 12px; max-width: 100%; overflow-x: auto; }
.lx-rates table { border-collapse: collapse; min-width: 22rem; }
.lx-rates th, .lx-rates td { padding: 7px 18px 7px 0; text-align: left; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.lx-rates th { font-weight: 500; font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.lx-rates td { color: var(--ink); }
.lx-rates p { margin: 10px 0 0; font-size: .85rem; max-width: 62ch; }

/* ---------- FAQ ---------- */
.lx-faq details { border-bottom: 1px solid var(--border); }
.lx-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; font-size: 1.02rem; font-weight: 500; color: var(--ink); }
.lx-faq summary::-webkit-details-marker { display: none; }
.lx-faq summary:hover { color: var(--accent); }
.lx-faq .pm { position: relative; width: 12px; height: 12px; flex: none; transition: transform .25s var(--ease); }
.lx-faq .pm::before, .lx-faq .pm::after { content: ""; position: absolute; background: var(--pond); border-radius: 1px; }
.lx-faq .pm::before { left: 0; right: 0; top: 5px; height: 2px; } .lx-faq .pm::after { top: 0; bottom: 0; left: 5px; width: 2px; }
.lx-faq details[open] .pm { transform: rotate(45deg); }
.lx-faq details p { color: var(--ink-2); margin: -4px 0 20px; max-width: 62ch; font-size: .94rem; animation: rise .35s var(--ease); }

/* ---------- closing ---------- */
.lx-cta { position: relative; overflow: hidden; isolation: isolate; text-align: center; padding: 120px 0 130px; border-top: 1px solid var(--border); }
.lx-wash { position: absolute; inset: 0; z-index: -1; pointer-events: none; filter: blur(8px);
  background: radial-gradient(34% 50% at 28% 40%, rgba(154, 139, 207, .32), transparent 70%), radial-gradient(30% 46% at 70% 58%, rgba(224, 147, 159, .3), transparent 70%),
              radial-gradient(26% 40% at 52% 22%, rgba(233, 189, 95, .22), transparent 70%), radial-gradient(36% 50% at 50% 92%, rgba(86, 121, 180, .16), transparent 70%); }
.lx-cta h2 { font: 500 clamp(2.1rem, 4.6vw, 3.3rem)/1.12 var(--display); color: var(--ink); }
.lx-cta p { color: var(--ink-2); margin-bottom: 30px; }

/* ---------- enterprise page: the same pond, the homepage's headings, a loop you can read as a loop ---------- */
.lx-hero.lite { padding: 70px 0 64px; }
.lx-hero.lite h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); max-width: 15em; }
.lx-hero.lite .lead { margin-bottom: 26px; }
/* No glass card here, so the copy carries its own mist; the pond stays clear on the right (desktop) or in a
   strip below (phones). The 300px stop tracks the right edge of the headline in the 1120px container. */
.lx-hero.lite::before { background: linear-gradient(90deg, rgba(244, 245, 249, .92) 0%, rgba(244, 245, 249, .86) calc(50% + 300px), rgba(244, 245, 249, 0) calc(50% + 480px)),
                                    linear-gradient(0deg, var(--paper) 0%, rgba(244, 245, 249, 0) 18%); }
@media (max-width: 960px) {
  .lx-hero.lite { padding-bottom: 140px; }
  .lx-hero.lite::before { background: linear-gradient(180deg, rgba(244, 245, 249, .92) 0%, rgba(244, 245, 249, .86) calc(100% - 150px), rgba(244, 245, 249, .1) calc(100% - 70px), var(--paper) 100%); }
}
.section.lx-ent { padding: 56px 0; }
.section.lx-ent + .section.lx-ent { padding-top: 24px; }
body.monet .card { box-shadow: var(--shadow); }
/* the R&D loop: two rows of five with arrows in the gaps; card 09 says where the loop goes back to */
.loop-line.ten { list-style: none; margin: 0; padding: 0; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.loop-line.ten > li { position: relative; padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow); }
.loop-line.ten > li:not(:nth-child(5n))::after { content: "→"; position: absolute; right: -12px; top: 16px; width: 10px; text-align: center; font: 500 .75rem var(--mono); color: var(--pond); }
.loop-line.ten > li:nth-child(9) { border-color: color-mix(in srgb, var(--lilac) 55%, var(--border)); }
.loop-line.ten .back { margin-top: 8px; font-size: .8rem; font-weight: 500; color: var(--accent); }
@media (max-width: 900px) {
  /* phones and tablets: one timeline, in the style of the homepage's engine steps */
  .loop-line.ten { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .loop-line.ten > li { padding: 8px 0 14px 24px; margin-left: 5px; border: 0; border-left: 1px solid var(--border-strong); border-radius: 0; background: none; box-shadow: none; }
  .loop-line.ten > li:last-child { border-left-color: transparent; }
  .loop-line.ten > li:not(:nth-child(5n))::after { content: none; }
  .loop-line.ten > li::before { content: ""; position: absolute; left: -6px; top: 12px; width: 11px; height: 11px; border-radius: 50%; background: var(--paper); border: 2px solid var(--pond); }
  .loop-line.ten > li:nth-child(9)::before { border-color: var(--lilac); }
  .loop-line.ten .who { display: inline; margin-right: 8px; }
  .loop-line.ten h4 { display: inline; margin: 0; }
  .loop-line.ten p { margin-top: 2px; }
}
.lx-ent-split { align-items: start; gap: 40px; }
@media (max-width: 860px) { .lx-ent-split { grid-template-columns: minmax(0, 1fr); } }
.lx-ent-split .lx-head { margin-bottom: 22px; }
.lx-ent-example { margin-top: 20px; } .lx-ent-example p { margin: 6px 0 0; }
/* the lead form */
#lead { padding: 26px; border-radius: 20px; }
#lead h3 { font: 500 1.7rem/1.2 var(--display); letter-spacing: -.005em; color: var(--ink); margin: 0 0 6px; }
body.monet #lead select { height: 46px; appearance: none; -webkit-appearance: none; padding-right: 38px;
  background: var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236c7193' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 14px center; }
body.monet #lead select:invalid { color: var(--muted); }
body.monet #lead select option { color: var(--text); }
body.monet #lead textarea { min-height: 112px; }
#lead .lx-btn[disabled] { opacity: .6; cursor: progress; transform: none; }
@media (max-width: 560px) { #lead { padding: 20px; } #lead .grid.cols-2 { grid-template-columns: minmax(0, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  html.js .lx-reveal:not(.in), html.js .lx-step:not(.in) * { opacity: 1 !important; transform: none !important; }
  /* the still robot reads as "picking up a block": arm frozen in its grip pose, cube lit */
  .robot .arm1 { transform: rotate(38deg); } .robot .arm2 { transform: rotate(-9deg); } .robot .cube { fill: var(--lilac); }
}