/* =========================================================================
   Link Cortex page — loaded after styles.css, which still owns the nav
   chrome, the language toggle and the filing footer shared by every page.

   Two layouts live here:
   - the base rules are a plain, readable document (no script, reduced
     motion, or a script that failed to start);
   - `.lc-js` (set in the head) turns the hero, the product tour and the
     finale into pinned, scroll-driven scenes that js/cortex.js plays.
   ========================================================================= */

/* ----- Fonts -----------------------------------------------------------
   All self-hosted: the page must load the same inside mainland China.
   LC Song is Noto Serif SC cut down to the glyphs the copy actually uses
   (tools/build.py); edit the copy, re-run it. */
@font-face {
  font-family: 'LC Serif';
  src: url('../fonts/instrument-serif-400.woff2?v=5eb09b5a') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'LC Serif';
  src: url('../fonts/instrument-serif-400-italic.woff2?v=5a51946d') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'LC Song';
  src: url('../fonts/lc-song-600.woff2?v=9bb6a741') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'LC Song';
  src: url('../fonts/lc-song-900.woff2?v=4bdffb4d') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'LC Mono';
  src: url('../fonts/geist-mono-400.woff2?v=3f98383b') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Latin only: Geist also carries narrow forms of ，and 。 that would win
   over the Chinese font's full-width ones. */
@font-face {
  font-family: 'LC Sans';
  src: url('../fonts/geist-sans-400.woff2?v=e6ef6abb') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC,
                 U+2010-2015, U+2018-201F, U+2026, U+20AC, U+2122, U+2190-2193;
}
@font-face {
  font-family: 'LC Math';
  src: url('../fonts/lc-math.woff2?v=c0779ca6') format('woff2');
  font-display: swap;
}

/* ----- Tokens ---------------------------------------------------------- */
.page-lc {
  --bg: #050403;
  --ink: #efe8db;
  --ink-2: rgba(239, 232, 219, 0.74);
  --ink-3: rgba(239, 232, 219, 0.56);
  --ink-4: rgba(239, 232, 219, 0.18);
  --line: rgba(239, 232, 219, 0.1);
  --gold: #cfa86a;
  --gold-hi: #f0d29c;
  --gold-lo: #8a6a36;
  --serif-zh: 'LC Song', 'Noto Serif SC', 'Source Han Serif SC', 'Songti SC', 'STSong', serif;
  --serif-en: 'LC Serif', 'Times New Roman', serif;
  --sans: 'LC Sans', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', sans-serif;
  --mono: 'LC Mono', 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  --math: 'LC Math', 'STIX Two Math', 'Cambria Math', 'LC Serif', serif;
  --display: var(--serif-zh);
  --pad: clamp(1.25rem, 4.2vw, 4.5rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  line-height: 1.7;
}
html[lang="en"] .page-lc { --display: var(--serif-en); }
.page-lc ::selection { background: var(--gold); color: #140f08; }
.page-lc p { text-wrap: pretty; }
.page-lc h1, .page-lc h2, .page-lc h3 { font-family: var(--display); }
.page-lc a:focus-visible,
.page-lc button:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

/* Lenis (smooth scroll) expects these. The gutter stays reserved while the
   intro holds the scroll, so nothing shifts sideways when it lets go. */
html { scrollbar-gutter: stable; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ----- Field, grain, cursor -------------------------------------------- */
/* As wide as the page (the scrollbar gutter excluded, so the scene centres
   on the copy), as tall as the large viewport (a phone toolbar sliding
   away never uncovers an edge). */
.lc-field {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  pointer-events: none;
}
.lc-field-labels {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.lc-node-label {
  position: absolute;
  left: 0;
  top: 0;
  translate: -50% calc(-100% - 14px);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em;
  color: var(--gold);
  white-space: nowrap;
  opacity: 0;
  will-change: transform, opacity;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}
.lc-node-label.is-lit {
  color: var(--gold-hi);
  text-shadow: 0 0 14px rgba(240, 210, 156, 0.6);
}
.lc-node-label--you {
  translate: -50% 22px;
  color: var(--ink);
  letter-spacing: 0.32em;
}
/* A no-WebGL visit (or a lost context) still gets the light at the centre. */
.lc-nogl .lc-field,
.lc-nogl .lc-field-labels { display: none; }
.lc-nogl .lc-hero__pin {
  background: radial-gradient(circle at 50% 50%, rgba(207, 168, 106, 0.22), transparent 30%);
}

.lc-grain {
  position: fixed;
  inset: -100%;
  z-index: 40;
  pointer-events: none;
  opacity: 0.075;
  background: url('../assets/cortex/grain.png') repeat;
  animation: lc-grain 0.9s steps(5) infinite;
}
@keyframes lc-grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -4%, 0); }
  60%  { transform: translate3d(-4%, -1%, 0); }
  80%  { transform: translate3d(3%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.lc-cursor { display: none; }
.has-cursor .lc-cursor {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  pointer-events: none;
}
.has-cursor,
.has-cursor a,
.has-cursor button,
.has-cursor [data-cursor] { cursor: none; }
.lc-cursor__dot,
.lc-cursor__ring {
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  will-change: transform;
}
.lc-cursor__dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--gold);
}
.lc-cursor__ring {
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(207, 168, 106, 0.5);
  transition: width 0.5s var(--ease-out), height 0.5s var(--ease-out),
              margin 0.5s var(--ease-out), background 0.3s ease, border-color 0.3s ease;
}
.lc-cursor__label {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold-hi);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.25s ease;
}
.lc-cursor.is-link .lc-cursor__ring {
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border-color: var(--gold);
}
.lc-cursor.is-labelled .lc-cursor__ring {
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  border-color: var(--gold);
  background: rgba(10, 8, 5, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.lc-cursor.is-labelled .lc-cursor__label { opacity: 1; }
.lc-cursor.is-labelled .lc-cursor__dot { opacity: 0; }

/* ----- Nav and section rail -------------------------------------------- */
/* Frosted, fading out at the bottom edge, so the page dissolves beneath the
   nav instead of being cut by a bar. */
.page-lc .nav {
  padding: 1.3rem var(--pad);
  z-index: 30;
}
.page-lc .nav::before {
  content: '';
  position: absolute;
  inset: 0 0 -1.6rem;
  z-index: -1;
  background: linear-gradient(rgba(5, 4, 3, 0.82), rgba(5, 4, 3, 0.35) 70%, rgba(5, 4, 3, 0));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-mask-image: linear-gradient(#000 55%, transparent);
  mask-image: linear-gradient(#000 55%, transparent);
  pointer-events: none;
}
.page-lc .brand { font-family: var(--display); font-size: 1.05rem; }
.page-lc .lang-toggle { font-family: var(--mono); font-size: 0.75rem; }
.lc-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.3s ease;
}
.lc-mark:hover { color: var(--ink); }
.lc-mark img { width: 22px; height: 22px; border-radius: 6px; }
.lc-nav-actions { display: flex; align-items: center; gap: 1.1rem; }
.lc-motion {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.2rem;
  font: 400 0.75rem/1 var(--mono);
  letter-spacing: 0.15em;
  color: var(--ink-3);
  transition: color 0.2s ease;
}
.lc-motion:hover { color: var(--gold); }
.lc-motion i {
  width: 7px;
  height: 7px;
  border: 1px solid currentColor;
  border-radius: 50%;
}
.lc-motion[aria-pressed="true"] { color: var(--ink-2); }
.lc-motion[aria-pressed="true"] i { background: var(--gold); border-color: var(--gold); }

.lc-rail {
  position: fixed;
  right: calc(var(--pad) * 0.45);
  top: 50%;
  z-index: 30;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
}
/* Ticks are hairlines; the links around them are full-size targets. */
.lc-rail a {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  gap: 0.75rem;
  padding: 7px 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em;
  color: var(--ink-3);
}
.lc-rail i {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--ink-4);
  transition: width 0.45s var(--ease-out), background 0.45s ease;
}
.lc-rail span {
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.35s ease, transform 0.45s var(--ease-out), color 0.3s ease;
}
/* Names appear only while the rail is pointed at: the content runs right up
   to the page margin, and a standing label would sit on top of it. */
.lc-rail:hover span { opacity: 0.6; transform: none; }
.lc-rail a:hover span,
.lc-rail a:focus-visible span,
.lc-rail:hover a.is-active span { opacity: 1; transform: none; color: var(--ink); }
.lc-rail a.is-active i { width: 30px; background: var(--gold); }

/* ----- Shared section furniture ---------------------------------------- */
.lc { position: relative; z-index: 2; }
.lc-section {
  position: relative;
  max-width: 1680px;
  margin: 0 auto;
  padding: clamp(6rem, 15vh, 11rem) var(--pad);
}
.lc-sechead {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(2.5rem, 6vh, 4.5rem);
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lc-sechead__index { color: var(--gold); }
.lc-sechead__rule {
  flex: 1;
  height: 1px;
  background: var(--line);
  transform-origin: left center;
}
.lc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}
.lc-kicker__mark {
  width: 30px;
  height: 1px;
  background: currentColor;
  transform-origin: left center;
}
.lc-h2 {
  margin: 0;
  font-weight: 600;
  font-size: clamp(2.2rem, 5.2vw, 5.8rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
}
html[lang="en"] .lc-h2 {
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
}
.lc-lede {
  margin: 0;
  max-width: 34em;
  font-size: clamp(1rem, 1.12vw, 1.12rem);
  line-height: 1.95;
  color: var(--ink-2);
}
.lc-line { display: block; }
/* A term that must not break across lines. */
.lc-nobr { white-space: nowrap; }
/* A phrase that stays whole when its heading has to wrap. */
.lc-wd-line { display: inline-block; }
.page-lc h2 { text-wrap: balance; }
.lc-gold { color: var(--gold); }
/* Split text. Each character keeps a slice of one long gradient, so a gold
   line reads as one metal bar even though its glyphs move independently. */
.lc-ch { display: inline-block; }
.lc-wd { display: inline-block; white-space: nowrap; }
.lc-gold .lc-ch {
  background-image: linear-gradient(100deg, #9c7438 0%, #e9c88c 30%, #f6e2b8 46%, #cfa86a 62%, #8f6b35 100%);
  background-size: calc(var(--n, 1) * 100%) 100%;
  background-position: calc(var(--i, 0) / max(var(--n, 1) - 1, 1) * 100%) 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Before the script arms them, reveals are just text. */
.lc-js [data-reveal] { opacity: 0; transform: translateY(26px); }
.lc-js [data-split] { visibility: hidden; }
.lc-js [data-split].is-split { visibility: visible; }

/* ----- 01 · Hero ------------------------------------------------------- */
.lc-hero { position: relative; }
.lc-hero__pin { position: relative; }
.lc-hero__layer {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100vh;
  padding: 7rem var(--pad) 5rem;
}
.lc-hero__intro { align-items: center; gap: 2.2rem; text-align: center; }
.lc-hero__title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(3.2rem, 10.6vw, 11.6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--ink);
  text-shadow: 0 0 60px rgba(5, 4, 3, 0.6);
}
html[lang="en"] .lc-hero__title {
  font-weight: 400;
  font-size: clamp(3rem, 8.4vw, 9.4rem);
  line-height: 0.94;
  letter-spacing: -0.02em;
}
html[lang="en"] .lc-hero__title i { font-style: italic; }
.lc-hero__sub {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.45vw, 1.4rem);
  letter-spacing: 0.08em;
  color: var(--ink-2);
}
html[lang="en"] .lc-hero__sub { font-weight: 400; font-style: italic; letter-spacing: 0.02em; }

.lc-hero__swarm { align-items: flex-start; }
.lc-swarm__num {
  display: flex;
  align-items: flex-start;
  margin: 0;
  font-family: var(--serif-en);
  font-style: italic;
  font-size: clamp(8rem, 27vw, 30rem);
  line-height: 0.78;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.lc-swarm__plus {
  margin-left: 0.04em;
  font-size: 0.42em;
  line-height: 1.1;
  color: var(--gold);
}
.lc-swarm__label {
  margin: 1.4rem 0 0 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.5vw, 2.6rem);
  color: var(--ink);
}
html[lang="en"] .lc-swarm__label { font-weight: 400; font-style: italic; }
.lc-swarm__aside {
  max-width: 21em;
  margin: 2.5rem 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink-3);
}

.lc-hero__order { align-items: flex-start; gap: 1.5rem; }
.lc-order__title {
  max-width: 15em;
  margin: 0;
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 4rem);
  line-height: 1.16;
}
html[lang="en"] .lc-order__title {
  max-width: 13.5em;
  font-weight: 400;
  line-height: 1.02;
}
.lc-order__title em { font-style: normal; color: var(--gold); }
html[lang="en"] .lc-order__title em { font-style: italic; }
.lc-order__sub {
  max-width: 33em;
  margin: 0;
  font-size: clamp(0.92rem, 1.02vw, 1.04rem);
  line-height: 1.95;
  color: var(--ink-2);
}
/* The one idea the whole order rests on. */
.lc-order__sub em { font-style: normal; color: var(--gold); }

.lc-hud, .lc-hud__law, .lc-cue { display: none; }

/* One screen; its story plays on its own clock (js/cortex.js). */
.lc-js .lc-hero__pin {
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}
.lc-js .lc-hero__layer {
  position: absolute;
  inset: 0;
  min-height: 0;
  pointer-events: none;
}
.lc-js .lc-hero__swarm,
.lc-js .lc-hero__order { visibility: hidden; opacity: 0; }
.lc-js .lc-hero__swarm { padding-top: 6rem; }
.lc-js .lc-swarm__aside {
  position: absolute;
  right: calc(var(--pad) + 2.5rem);
  bottom: 16vh;
  margin: 0;
}
/* The copy ends well clear of the readout below it. */
.lc-js .lc-hero__order { justify-content: flex-end; padding-bottom: max(17vh, 12.5rem); }
.lc-js .lc-hud,
.lc-js .lc-hud__law { display: block; }
.lc-js .lc-cue { display: flex; }
.lc-hud {
  position: absolute;
  left: var(--pad);
  bottom: 2.1rem;
  width: 210px;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--ink-3);
}
.lc-hud__row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-top: 1px solid var(--line);
}
.lc-hud__row b { font-weight: 400; color: var(--ink); }
.lc-hud__row b.is-gold { color: var(--gold); }
.lc-hud__bar {
  height: 2px;
  margin: 0 0 0.6rem;
  background: var(--line);
}
.lc-hud__bar i {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--gold);
  transform: scaleX(0.06);
  transform-origin: left center;
}
.lc-hud__law {
  position: absolute;
  right: calc(var(--pad) + 2.5rem);
  bottom: 2rem;
  margin: 0;
  font-family: var(--math);
  font-size: 1.15rem;
  color: var(--ink-3);
}
/* The way on. A real button: it plays the opening on demand. */
.lc-cue {
  position: absolute;
  left: 50%;
  bottom: 1.7rem;
  transform: translateX(-50%);
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.9rem;
  color: var(--ink-2);
  transition: color 0.3s ease;
}
.lc-cue:hover { color: var(--gold); }
.lc-cue__mouse {
  position: relative;
  display: block;
  width: 22px;
  height: 34px;
  border: 1.5px solid currentColor;
  border-radius: 12px;
}
.lc-cue__mouse i {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold);
  animation: lc-wheel 1.8s var(--ease-out) infinite;
}
.lc-cue__text {
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
}
@keyframes lc-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  70%  { transform: translateY(11px); opacity: 0; }
  100% { transform: translateY(0); opacity: 0; }
}
/* The disclaimer: a quiet note in the opening's empty upper corner, two
   lines in light grey. */
.lc-disclaimer {
  position: absolute;
  left: var(--pad);
  top: clamp(6.6rem, 15vh, 9rem);
  z-index: 2;
  max-width: 40em;
}
.lc-disclaimer p { margin: 0; }
.lc-disclaimer__text {
  font-size: 13px;
  line-height: 2.05;
  letter-spacing: 0.05em;
  color: rgba(239, 232, 219, 0.46);
  /* Lifts the note off the swarm's lines passing behind it. */
  text-shadow: 0 0 14px #050403, 0 0 4px #050403;
}
html[lang="en"] .lc-disclaimer__text { letter-spacing: 0.01em; }
/* The footer's copy: three centred lines above the filings. */
.lc-disclaimer--foot {
  position: static;
  max-width: 40em;
  margin: 0 auto 2rem;
  text-align: center;
}
.lc-disclaimer--foot .lc-disclaimer__text { font-family: var(--sans); text-shadow: none; }
.lc-hud__phases { display: flex; gap: 0.95rem; margin-bottom: 0.75rem; }
.lc-hud__phases > span {
  display: inline-flex;
  gap: 0.4rem;
  color: var(--ink-4);
  transition: color 0.4s ease;
}
.lc-hud__phases b { font-weight: 400; }
.lc-hud__phases > span.is-on { color: var(--gold); }

/* ----- 02 · Position --------------------------------------------------- */
.lc-statement__text {
  max-width: 21.5em;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.75rem, 3.7vw, 4rem);
  line-height: 1.34;
  color: var(--ink);
}
html[lang="en"] .lc-statement__text {
  max-width: 20em;
  font-weight: 400;
  line-height: 1.1;
}
.lc-statement__text em { font-style: normal; color: var(--gold); }
html[lang="en"] .lc-statement__text em { font-style: italic; }

.lc-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: clamp(4.5rem, 12vh, 8rem) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}
.lc-fact {
  padding: 2.2rem 2rem 0.5rem 0;
  border-right: 1px solid var(--line);
}
.lc-fact + .lc-fact { padding-left: 2rem; }
.lc-fact:last-child { border-right: none; }
.lc-fact__glyph {
  display: block;
  margin-bottom: 1.8rem;
  font-family: var(--math);
  font-size: 2.1rem;
  line-height: 1;
  color: var(--gold);
}
.lc-fact h3 {
  margin: 0 0 0.75rem;
  font-weight: 600;
  font-size: 1.3rem;
  line-height: 1.3;
}
html[lang="en"] .lc-fact h3 { font-weight: 400; font-size: 1.55rem; }
.lc-fact p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.85;
  color: var(--ink-3);
}

/* ----- 03 · Engines ---------------------------------------------------- */
.lc-engines__eyebrow { margin-bottom: 1.8rem; }
.lc-engines__title {
  max-width: 17em;
  font-size: clamp(2.1rem, 4.5vw, 5.1rem);
  line-height: 1.12;
}
html[lang="en"] .lc-engines__title { max-width: 16em; line-height: 1.02; }
html[lang="en"] .lc-engines__title i { font-style: italic; }
.lc-engines__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 2.5rem clamp(2rem, 5vw, 6rem);
  /* The lede follows the title; the drawing runs on beside and below it. */
  align-items: start;
  margin-top: clamp(2.5rem, 7vh, 4.5rem);
}

/* The stack: you, the harness, the agents, the models. Drawn by cortex.js. */
.lc-stack { position: relative; margin: 0; }
.lc-stack__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-stack__top.is-harness { fill: url(#lc-harness); stroke: rgba(207, 168, 106, 0.8); stroke-width: 1.4; }
.lc-stack__side.is-harness.is-left { fill: #2b2011; stroke: rgba(207, 168, 106, 0.45); stroke-width: 1; }
.lc-stack__side.is-harness.is-right { fill: #19130b; stroke: rgba(207, 168, 106, 0.45); stroke-width: 1; }
.lc-stack__top.is-agents { fill: rgba(239, 232, 219, 0.045); stroke: rgba(239, 232, 219, 0.3); stroke-width: 1; }
.lc-stack__side.is-agents { fill: rgba(239, 232, 219, 0.07); }
.lc-stack__top.is-models { fill: rgba(239, 232, 219, 0.02); stroke: rgba(239, 232, 219, 0.2); stroke-width: 1; stroke-dasharray: 3 5; }
.lc-stack__side.is-models { fill: rgba(239, 232, 219, 0.035); }
.lc-stack__grid { stroke: rgba(239, 232, 219, 0.06); stroke-width: 1; }
.lc-stack__layer.is-harness { filter: drop-shadow(0 0 26px rgba(207, 168, 106, 0.3)); }
.lc-stack__layer.is-harness .lc-stack__grid { stroke: rgba(207, 168, 106, 0.16); }
.lc-stack__cube.is-top { fill: #efe8db; }
.lc-stack__cube.is-left { fill: #b7b0a4; }
.lc-stack__cube.is-right { fill: #8c857a; }
.lc-stack__cube.is-ghost { fill: rgba(207, 168, 106, 0.06); stroke: rgba(207, 168, 106, 0.75); stroke-width: 1; stroke-dasharray: 3 3; }
.lc-stack__print { font: 600 15px var(--mono); letter-spacing: 0.3em; fill: rgba(239, 232, 219, 0.3); }
.lc-stack__print.is-gold { fill: rgba(240, 210, 156, 0.88); }
.lc-stack__print.is-math { font: 400 21px var(--math); letter-spacing: 0.04em; fill: rgba(240, 210, 156, 0.62); }
.lc-stack__tag { font: 400 13px var(--mono); letter-spacing: 0.06em; fill: var(--ink-2); text-anchor: middle; }
.lc-stack__tag.is-ghost { fill: var(--gold); }
.lc-stack__beam { stroke: rgba(207, 168, 106, 0.55); stroke-width: 1.2; stroke-dasharray: 3 5; }
.lc-stack__spark { fill: #fff3dc; }
.lc-stack__spark.is-report { fill: var(--gold-hi); }
.lc-stack__halo { fill: rgba(207, 168, 106, 0.16); }
.lc-stack__you { fill: var(--gold-hi); filter: drop-shadow(0 0 10px rgba(240, 210, 156, 0.9)); }
.lc-stack__lead { stroke: rgba(239, 232, 219, 0.2); stroke-width: 1; stroke-dasharray: 2 4; }
.lc-stack__pin { fill: var(--gold); }
.lc-stack__title { font: 600 19px var(--display); fill: var(--ink); text-anchor: end; }
html[lang="en"] .lc-stack__title { font-weight: 400; font-size: 22px; }
.lc-stack__title.is-gold { fill: var(--gold); }
.lc-stack__sub { font: 400 12.5px var(--mono); letter-spacing: 0.03em; fill: var(--ink-3); text-anchor: end; }
.lc-stack__legend { display: none; }
.lc-marquee {
  margin: clamp(4rem, 11vh, 7rem) calc(var(--pad) * -1) clamp(3.5rem, 9vh, 6rem);
  padding: 1.8rem 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.lc-marquee__track {
  display: flex;
  align-items: center;
  gap: 3.2rem;
  width: max-content;
  padding-right: 3.2rem;
  animation: lc-marquee 72s linear infinite;
}
.lc-marquee span {
  font-family: var(--serif-en);
  font-size: clamp(3.4rem, 9.2vw, 9.6rem);
  line-height: 1.04;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1px rgba(239, 232, 219, 0.4);
  transition: color 0.6s ease, -webkit-text-stroke-color 0.6s ease;
}
.lc-marquee span:hover { color: var(--ink); -webkit-text-stroke-color: var(--ink); }
.lc-marquee .lc-marquee__next {
  font-family: var(--display);
  font-style: italic;
  -webkit-text-stroke-color: var(--gold);
}
.lc-marquee i {
  font-style: normal;
  font-size: clamp(1.4rem, 2.4vw, 2.4rem);
  color: var(--gold);
}
@keyframes lc-marquee { to { transform: translateX(-50%); } }

/* A label that rolls to its next value (cortex.js roll()). */
.lc-pill__roll {
  position: relative;
  display: inline-block;
  min-width: 0;
  height: 1.3em;
  overflow: hidden;
  vertical-align: middle;
}
/* On the narrowest phones a long name ends in an ellipsis, not mid-glyph. */
.lc-pill__roll b {
  display: block;
  overflow: hidden;
  font-weight: inherit;
  line-height: 1.3em;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lc-pill__roll b + b { position: absolute; left: 0; top: 0; }
.lc-card__caret {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: var(--gold);
  animation: lc-blink 1.05s steps(1) infinite;
}

/* The Link Cortex window in miniature: the app's own layout and
   proportions (packages/core/src/styles.css), dressed in the black-and-gold
   theme the app is moving to. Black-gold jewels are the app's primary-button
   language already; here they become the whole surface. */
.lc-app {
  --a-bg: #0e0c09;
  --a-panel: #15120d;
  --a-side: #0a0806;
  --a-raise: #1d1912;
  --a-text: #efe8db;
  --a-muted: #9d9486;
  --a-muted-2: #5e574c;
  --a-border: rgba(207, 168, 106, 0.12);
  --a-border-2: rgba(207, 168, 106, 0.24);
  --a-gold: #cfa86a;
  --a-gold-hi: #f0d29c;
  --a-run: #6fcf8a;
  --a-wait: #e9b949;
  --a-idle: #6f8fc0;
  display: grid;
  grid-template-columns: 236px minmax(0, 1fr);
  max-width: 1040px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 14px;
  background: var(--a-bg);
  color: var(--a-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 0 0 1px rgba(207, 168, 106, 0.28),
              inset 0 1px 0 rgba(255, 255, 255, 0.04),
              0 70px 160px -60px rgba(207, 168, 106, 0.42),
              0 40px 80px -40px rgba(0, 0, 0, 0.95);
}
.lc-app__side {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 12px;
  border-right: 1px solid var(--a-border);
  background: linear-gradient(180deg, #0c0a07, #080705);
}
.lc-app__brand { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.lc-app__brand img { width: 26px; height: 26px; border-radius: 7px; box-shadow: 0 0 0 1px rgba(207, 168, 106, 0.35); }
.lc-app__brand b { font-weight: 650; letter-spacing: 0.01em; }
.lc-app__tag {
  margin-left: auto;
  padding: 1px 8px;
  border: 1px solid var(--a-border-2);
  border-radius: 10px;
  font-size: 10.5px;
  color: var(--a-gold);
}
.lc-app__search {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border: 1px solid var(--a-border);
  border-radius: 9px;
  background: var(--a-panel);
  font-size: 12px;
  color: var(--a-muted-2);
}
.lc-app__search svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lc-app__machine {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  border-radius: 9px;
  background: rgba(207, 168, 106, 0.1);
  font-size: 12.5px;
}
.lc-app__machine img { width: 22px; height: 22px; border-radius: 6px; }
.lc-app__local {
  padding: 0 6px;
  border: 1px solid var(--a-border-2);
  border-radius: 8px;
  font-size: 10px;
  color: var(--a-gold);
}
.lc-app__persona {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border: 1px solid rgba(207, 168, 106, 0.42);
  border-radius: 9px;
  background: rgba(207, 168, 106, 0.05);
  font-size: 12.5px;
}
.lc-app__plus {
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 1px solid var(--a-border-2);
  border-radius: 5px;
  font-size: 12px;
  line-height: 1;
  color: var(--a-gold);
}
.lc-app__sessions {
  display: grid;
  gap: 3px;
  margin: 0 0 0 14px;
  padding: 0 0 0 8px;
  list-style: none;
  border-left: 1px solid var(--a-border-2);
}
.lc-app__sessions li {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--a-muted);
  white-space: nowrap;
  overflow: hidden;
  transition: background 0.35s ease, box-shadow 0.35s ease, color 0.35s ease;
}
.lc-app__sessions li span { overflow: hidden; text-overflow: ellipsis; }
.lc-app__sessions li.is-active {
  background: var(--a-raise);
  box-shadow: inset 2px 0 0 var(--a-gold), 0 0 0 1px var(--a-border);
  color: var(--a-text);
}
.lc-app__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--a-idle); }
.lc-app__dot.is-thinking { background: var(--a-run); box-shadow: 0 0 8px rgba(111, 207, 138, 0.6); }
.lc-app__dot.is-waiting { background: var(--a-wait); box-shadow: 0 0 8px rgba(233, 185, 73, 0.55); }
.lc-app__dot.is-idle { background: var(--a-idle); }
.lc-app__others {
  display: grid;
  gap: 4px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--a-border);
}
.lc-app__others span { display: flex; align-items: center; gap: 7px; padding: 3px 4px; font-size: 12px; color: var(--a-muted); }
.lc-app__others img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lc-app__others .lc-app__dot { margin-left: 2px; }
.lc-app__others span { border-radius: 6px; transition: color 0.4s ease, background 0.4s ease; }
.lc-app__others span.is-sending { background: rgba(207, 168, 106, 0.1); color: var(--a-gold-hi); }
.lc-app__main { display: flex; flex-direction: column; min-width: 0; background: var(--a-bg); }
.lc-app__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--a-border);
  background: linear-gradient(180deg, #16130d, #110f0b);
}
.lc-app__head > b { font-size: 14px; font-weight: 650; }
.lc-app__session { font-size: 12px; color: var(--a-muted); }
.lc-app__engine {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 4px 10px;
  border: 1px solid var(--a-border-2);
  border-radius: 999px;
  font-size: 12px;
  color: var(--a-gold-hi);
}
.lc-app__engine i { width: 7px; height: 7px; border-radius: 50%; background: var(--a-run); box-shadow: 0 0 8px rgba(111, 207, 138, 0.6); }
.lc-app__thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  min-height: 206px;
  padding: 16px 18px 6px;
}
/* What arrives is another agent's message, sent over the network from its
   own machine: who, from which persona, on which engine. */
.lc-app__via {
  align-self: flex-end;
  margin: 0 3px -3px 0;
  font: 400 9.5px/1 var(--mono);
  letter-spacing: 0.18em;
  color: var(--a-gold);
}
.lc-app__msg {
  align-self: flex-end;
  display: grid;
  gap: 6px;
  max-width: 78%;
  padding: 8px 13px 10px;
  border: 1px solid rgba(193, 158, 74, 0.55);
  border-radius: 14px 14px 4px 14px;
  background: linear-gradient(145deg, #2a2116, #15110b);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.lc-app__from {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-size: 11.5px;
  white-space: nowrap;
  color: var(--a-muted);
}
.lc-app__from img { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; }
.lc-app__from b { font-weight: 650; color: var(--a-text); }
.lc-app__from span { font: 400 10.5px/1 var(--mono); }
.lc-app__from em {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 2px 8px;
  border: 1px solid rgba(207, 168, 106, 0.4);
  border-radius: 20px;
  font-style: normal;
  font-size: 10.5px;
  color: var(--a-gold-hi);
}
.lc-app__from em i { width: 5px; height: 5px; border-radius: 50%; background: var(--a-run); }
.lc-app__text { margin: 0; font-size: 13px; line-height: 1.55; color: var(--a-gold-hi); }
.lc-app__reply {
  display: grid;
  gap: 7px;
  padding: 8px 10px 11px;
  border: 1px solid rgba(111, 207, 138, 0.5);
  border-radius: 12px;
  background: rgba(111, 207, 138, 0.04);
}
.lc-app__reply.is-waiting { border-color: rgba(233, 185, 73, 0.5); background: rgba(233, 185, 73, 0.05); }
.lc-app__state {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 5px 10px;
  border-radius: 6px;
  background: rgba(111, 207, 138, 0.1);
  font-size: 12px;
  font-weight: 650;
  color: var(--a-run);
}
.lc-app__reply.is-waiting .lc-app__state { background: rgba(233, 185, 73, 0.12); color: var(--a-wait); }
.lc-app__state i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: lc-blink 1.4s steps(1) infinite; }
.lc-app__tool { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0 4px; font-size: 12.5px; color: #cfc6b6; }
.lc-app__tool span { font-size: 9px; color: var(--a-gold); }
/* The real captures blur the detail of a step; so does this. */
.lc-app__blur {
  flex: 1;
  max-width: 150px;
  height: 9px;
  border-radius: 5px;
  background: linear-gradient(90deg, rgba(239, 232, 219, 0.12), rgba(239, 232, 219, 0.04));
}
.lc-app__ctx { display: flex; align-items: center; gap: 6px; padding: 2px 20px 4px; font-size: 11px; color: var(--a-muted); }
.lc-app__ctxbar { width: 44px; height: 5px; overflow: hidden; border-radius: 3px; background: rgba(207, 168, 106, 0.16); }
.lc-app__ctxbar i { display: block; width: 48%; height: 100%; border-radius: 3px; background: var(--a-gold); transition: width 0.6s ease; }
.lc-app__ctxpct { min-width: 30px; font-variant-numeric: tabular-nums; }
.lc-app__composer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 16px 16px;
  padding: 10px 12px;
  border: 1px solid var(--a-border-2);
  border-radius: 16px;
  background: var(--a-panel);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.lc-app__entry { display: flex; align-items: flex-start; gap: 10px; }
.lc-app__avatar { flex: none; width: 32px; height: 32px; border-radius: 10px; box-shadow: 0 0 0 1px rgba(207, 168, 106, 0.3); }
.lc-app__input { flex: 1; min-height: 42px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--a-text); }
.lc-app__ph { color: var(--a-muted-2); }
/* Atlas answers by addressing the next agent. */
.lc-app__to { margin-right: 6px; font-weight: 600; color: var(--a-gold); }
.lc-app__input:not(.is-typing) .lc-app__to { display: none; }
.lc-app__input.is-typing .lc-app__ph { display: none; }
.lc-app__caret {
  display: none;
  width: 1.5px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.2em;
  background: var(--a-gold);
  animation: lc-blink 1.05s steps(1) infinite;
}
.lc-app__input.is-typing .lc-app__caret { display: inline-block; }
.lc-app__bar { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lc-app__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px;
  height: 30px;
  border: 1px solid var(--a-border);
  border-radius: 8px;
  background: var(--a-raise);
  font-size: 16px;
  color: var(--a-muted);
}
.lc-app__btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.lc-app__select {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  padding: 3px 8px;
  border: 1px solid var(--a-border);
  border-radius: 20px;
  background: var(--a-raise);
  font-size: 11.5px;
  color: var(--a-muted);
  white-space: nowrap;
}
.lc-app__select.is-engine { border-color: rgba(207, 168, 106, 0.45); font-weight: 600; color: var(--a-gold-hi); }
.lc-app__select.is-model { color: var(--a-text); }
.lc-app__select svg { flex: none; width: 8px; height: 5px; fill: none; stroke: currentColor; stroke-width: 1.4; opacity: 0.7; }
.lc-app__stop {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  margin-left: auto;
  border: 1px solid rgba(255, 120, 100, 0.35);
  border-radius: 9px;
  background: linear-gradient(145deg, #a8352a, #7c2219);
  font-size: 11px;
  color: #ffe9e4;
}
.lc-app__stop.is-hidden { display: none; }
.lc-app__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 236, 190, 0.5);
  border-radius: 9px;
  background: linear-gradient(145deg, #f0d29c, #b8904a);
  box-shadow: 0 1px 6px rgba(207, 168, 106, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
  font-size: 14px;
  font-weight: 700;
  color: #1b1408;
}
.lc-app__stop.is-hidden + .lc-app__send { margin-left: auto; }
.lc-app__note {
  margin: 1.4rem 0 0;
  text-align: center;
  font: 400 10px/1.6 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
@keyframes lc-blink { 50% { opacity: 0; } }

/* ----- 04 · Evolution -------------------------------------------------- */
.lc-evolve__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 3rem clamp(2rem, 5vw, 6rem);
  align-items: start;
}
.lc-evolve__title { grid-column: 1 / -1; margin-bottom: clamp(0.5rem, 3vh, 2rem); }
.lc-evolve__grid > .lc-lede { padding-top: 2.6rem; }
.lc-chart { position: relative; margin: 0; padding-top: 2.4rem; }
.lc-chart__svg { display: block; width: 100%; height: auto; overflow: visible; }
.lc-chart__tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.35rem 0.6rem;
  border: 1px solid rgba(207, 168, 106, 0.4);
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.lc-chart__axis {
  position: absolute;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lc-chart__axis--y { left: 0; top: 0.3rem; }
.lc-chart__axis--x { right: 0; bottom: 4.2rem; }
.lc-chart__cap {
  margin-top: 1.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.7rem);
  color: var(--ink);
}
html[lang="en"] .lc-chart__cap { font-weight: 400; font-style: italic; }
.lc-chart__grid line { stroke: rgba(239, 232, 219, 0.07); stroke-width: 1; }
.lc-chart__grid .is-axis { stroke: rgba(239, 232, 219, 0.22); }
.lc-chart__lines path {
  fill: none;
  stroke: rgba(239, 232, 219, 0.38);
  stroke-width: 1.3;
  stroke-linejoin: round;
}
.lc-chart__lines circle { fill: var(--bg); stroke: rgba(239, 232, 219, 0.6); stroke-width: 1.2; }
.lc-chart__lines text,
.lc-chart__envelope text {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  fill: rgba(239, 232, 219, 0.55);
}
.lc-chart__envelope path {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 8px rgba(207, 168, 106, 0.55));
}
.lc-chart__envelope .lc-chart__area { stroke: none; fill: url(#lc-area); filter: none; }
.lc-chart__envelope text { fill: var(--gold); font-size: 14px; }
.lc-chart__envelope circle { fill: var(--gold-hi); filter: drop-shadow(0 0 10px rgba(240, 210, 156, 0.9)); }

/* ----- 05 · Reports ---------------------------------------------------- */
.lc-cast__head {
  display: grid;
  /* Wide enough for the title's first line to hold at every desktop width. */
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.75fr);
  gap: 1.8rem clamp(2rem, 5vw, 6rem);
  align-items: end;
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
.lc-cast__eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.5vw, 1.5rem);
  color: var(--gold);
}
html[lang="en"] .lc-cast__eyebrow { font-weight: 400; font-style: italic; }
.lc-cast__title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.6rem, 6.6vw, 7.6rem);
  line-height: 1.04;
}
html[lang="en"] .lc-cast__title { font-weight: 400; font-style: italic; line-height: 0.96; }

.lc-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr);
  gap: clamp(1rem, 1.8vw, 1.75rem);
  align-items: stretch;
}
.lc-stage__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 4px;
  background: #0e0b08;
  box-shadow: 0 0 0 1px rgba(239, 232, 219, 0.1), 0 60px 140px -60px rgba(207, 168, 106, 0.35);
}
.lc-stage__videos video,
.lc-stage__videos img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.07);
  transition: opacity 1.1s var(--ease-out), transform 7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.lc-stage__videos .is-active { opacity: 1; transform: scale(1); }
.lc-stage__corner {
  position: absolute;
  width: 18px;
  height: 18px;
  border: 0 solid rgba(255, 255, 255, 0.7);
  pointer-events: none;
}
.lc-stage__corner--tl { top: 14px; left: 14px; border-top-width: 1px; border-left-width: 1px; }
.lc-stage__corner--tr { top: 14px; right: 14px; border-top-width: 1px; border-right-width: 1px; }
.lc-stage__corner--bl { bottom: 14px; left: 14px; border-bottom-width: 1px; border-left-width: 1px; }
.lc-stage__corner--br { bottom: 14px; right: 14px; border-bottom-width: 1px; border-right-width: 1px; }
.lc-stage__rec {
  position: absolute;
  left: 26px;
  top: 22px;
  margin: 0;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}
.lc-stage__rec i {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 0.35rem;
  border-radius: 50%;
  background: #e5484d;
  vertical-align: 0;
  animation: lc-blink 1.4s steps(1) infinite;
}

.lc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 1.6rem 1.6rem 1.3rem;
  border: 1px solid rgba(207, 168, 106, 0.24);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(28, 22, 14, 0.94), rgba(12, 10, 7, 0.94));
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}
.lc-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.lc-card__name {
  font-family: var(--serif-en);
  font-size: 2.3rem;
  line-height: 1;
  color: var(--ink);
}
.lc-card__status {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: 400 11px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--gold);
  white-space: nowrap;
}
.lc-card__status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
  animation: lc-ping 1.8s ease-out infinite;
}
@keyframes lc-ping {
  0%   { box-shadow: 0 0 0 0 rgba(207, 168, 106, 0.65); }
  100% { box-shadow: 0 0 0 9px rgba(207, 168, 106, 0); }
}
.lc-card__meta {
  margin: 0.5rem 0 1.4rem;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.06em;
  color: var(--ink-3);
}
/* Underneath, the agent keeps changing; the identity on top does not. */
.lc-card__engine {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: -0.6rem 0 1.3rem;
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink-3);
}
.lc-card__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border: 1px solid rgba(207, 168, 106, 0.4);
  border-radius: 20px;
  letter-spacing: 0.04em;
  color: var(--gold-hi);
}
.lc-card__pill i { width: 5px; height: 5px; border-radius: 50%; background: #6fcf8a; }
.lc-card__keep { margin-left: auto; text-align: right; color: var(--gold); }
.lc-card__title {
  margin: 0 0 0.8rem;
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.4;
}
html[lang="en"] .lc-card__title { font-weight: 400; font-size: 1.4rem; }
.lc-card__body {
  flex: 1;
  min-height: 9.8em;
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.9;
  color: var(--ink-2);
}
.lc-card.is-done .lc-card__caret { visibility: hidden; animation: none; }
.lc-card__voice {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 1.1rem 0 1.2rem;
  font: 400 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.lc-card__wave { display: flex; align-items: center; gap: 3px; height: 22px; }
.lc-card__wave i {
  display: block;
  width: 2px;
  height: 100%;
  border-radius: 1px;
  background: var(--gold);
  transform: scaleY(0.12);
}
.lc-card.is-speaking .lc-card__wave i {
  animation: lc-wave 0.9s ease-in-out infinite;
  animation-delay: calc(var(--k, 0) * -71ms);
}
.lc-card:not(.is-speaking) .lc-card__voice-label { opacity: 0.4; }
@keyframes lc-wave {
  0%, 100% { transform: scaleY(0.14); }
  50%      { transform: scaleY(var(--h, 0.9)); }
}
.lc-card__actions {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
}
.lc-card__actions span {
  padding: 0.75rem 0.3rem;
  border: 1px solid rgba(207, 168, 106, 0.3);
  border-radius: 4px;
  background: #0b0906;
  text-align: center;
  font-size: 0.8rem;
  white-space: nowrap;
  color: var(--ink);
}

.lc-roster {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 1.5rem;
}
.lc-roster button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.45rem 1.1rem 0.45rem 0.45rem;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: var(--ink-2);
  text-align: left;
  transition: border-color 0.4s ease, background 0.4s ease;
}
.lc-roster button:hover { border-color: rgba(207, 168, 106, 0.4); }
.lc-roster button[aria-selected="true"] {
  border-color: rgba(207, 168, 106, 0.6);
  background: rgba(207, 168, 106, 0.08);
}
.lc-roster img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(0.6);
  transition: filter 0.4s ease;
}
.lc-roster button[aria-selected="true"] img,
.lc-roster button:hover img { filter: none; }
.lc-roster__text { display: grid; gap: 0.15rem; min-width: 0; }
.lc-roster__name { font-family: var(--serif-en); font-size: 1.2rem; line-height: 1; color: var(--ink); }
.lc-roster__calls {
  overflow: hidden;
  font: 400 10px/1.2 var(--mono);
  letter-spacing: 0.08em;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--ink-3);
}
.lc-roster__progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

/* ----- 06 · Kernel ----------------------------------------------------- */
.lc-formula {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.1em 0.34em;
  margin: clamp(2.6rem, 7vh, 4.5rem) 0 clamp(3rem, 8vh, 5rem);
  font-family: var(--math);
  font-size: clamp(1.6rem, 4.15vw, 4.9rem);
  line-height: 1.2;
  color: var(--ink);
}
.lc-formula > span { display: inline-block; }
.lc-formula i { font-style: italic; }
.lc-formula__arrow,
.lc-formula__loop { color: var(--gold); white-space: nowrap; }
.lc-formula__arrow sub { font-size: 0.42em; }
.lc-kernel__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3rem clamp(2rem, 5vw, 6rem);
  align-items: start;
  padding-top: 3rem;
  border-top: 1px solid var(--line);
}
.lc-fractal__chain {
  margin: 0 0 1.8rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.2vw, 2.2rem);
}
html[lang="en"] .lc-fractal__chain { font-weight: 400; font-style: italic; }
.lc-fractal__chain b {
  margin: 0 0.2em;
  font-family: var(--math);
  font-style: normal;
  font-weight: 400;
  color: var(--gold);
}
.lc-fractal__expr {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.2em 0.5em;
  margin: 0 0 1.6rem;
  font-family: var(--math);
  font-size: clamp(1.1rem, 1.7vw, 1.6rem);
  color: var(--ink);
}
.lc-fractal__lhs { font-family: var(--display); font-size: 0.85em; line-height: 1.7; color: var(--ink-2); }
/* Units stand in a row with their state glyph above them; the operators sit
   on the units' line, not the glyphs'. */
.lc-fractal__expr [data-kernel-expr] {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.2em 0.42em;
}
.lc-unit { display: inline-flex; flex-direction: column; align-items: center; gap: 0.15em; line-height: 1.7; }
.lc-unit i { font-style: normal; font-size: 0.55em; line-height: 1; color: var(--gold); transition: color 0.4s ease; }
.lc-unit i.is-off { color: var(--ink-4); }
.lc-op { line-height: 1.7; color: var(--gold); transition: opacity 0.3s ease; }
.lc-op.is-flip { opacity: 0.2; }
.lc-fractal__glyphs { display: none; }
.lc-fractal__legend {
  margin: 0;
  font-family: 'LC Mono', 'LC Math', var(--sans);
  font-size: 11px;
  line-height: 1.9;
  letter-spacing: 0.06em;
  color: var(--ink-3);
}

/* ----- 07 · Yield ------------------------------------------------------ */
.lc-yield__card {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 6rem);
  align-items: center;
}
.lc-yield__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: 0 0 0 1px rgba(239, 232, 219, 0.1);
}
/* The script settles the image into its frame on arrival, so hover only
   lifts the light instead of competing for the transform. */
.lc-yield__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.86) saturate(0.95);
  transition: filter 0.8s var(--ease-out);
}
.lc-yield__card:hover .lc-yield__media img { filter: brightness(1.04) saturate(1.05); }
.lc-yield__eyebrow {
  display: block;
  margin-bottom: 1.4rem;
  font: 400 11px/1.4 var(--mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
}
.lc-yield__title {
  display: block;
  margin-bottom: 1.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.1vw, 4.3rem);
  line-height: 1.1;
}
html[lang="en"] .lc-yield__title { font-weight: 400; line-height: 1; }
html[lang="en"] .lc-yield__title i { font-style: italic; }
.lc-yield__body {
  display: block;
  margin-bottom: 2.2rem;
  line-height: 1.9;
  color: var(--ink-2);
}
/* The proof that it is a product and not a course. */
.lc-yield__body b { font-weight: 600; color: var(--gold); }
.lc-yield__cta {
  display: inline-flex;
  gap: 0.6rem;
  padding-bottom: 0.45rem;
  border-bottom: 1px solid var(--gold);
  font: 400 13px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--ink);
}
.lc-yield__cta span { transition: transform 0.5s var(--ease-out); }
.lc-yield__card:hover .lc-yield__cta span { transform: translateX(6px); }

/* What it took: the roles a company would hire to build The Link, and the
   one person who covers them all. Animated, each role waits dim and lights
   up in turn (cortex.js sets the order), then the sum arrives. */
.lc-org {
  margin-top: clamp(4.5rem, 10vh, 7.5rem);
  padding-top: 2.6rem;
  border-top: 1px solid var(--line);
}
.lc-org__lead {
  margin: 0 0 2.4rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.15rem, 1.7vw, 1.6rem);
  line-height: 1.4;
  color: var(--ink-2);
}
html[lang="en"] .lc-org__lead { font-weight: 400; font-style: italic; }
.lc-org__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2rem clamp(1rem, 2vw, 2rem);
}
.lc-org__dept h3 {
  margin: 0 0 0.9rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--line);
  font: 400 10.5px/1.4 var(--mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
.lc-org__dept ul { margin: 0; padding: 0; list-style: none; }
.lc-org__dept li {
  font-size: 0.95rem;
  line-height: 2.1;
  color: var(--ink-2);
}
.lc-js .lc-org__dept li {
  opacity: 0.14;
  transition: opacity 0.5s ease;
  transition-delay: calc(var(--k, 0) * 38ms);
}
.lc-js .lc-org.is-lit .lc-org__dept li { opacity: 1; }
.lc-org__sum {
  margin: clamp(2.6rem, 6vh, 4rem) 0 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.6rem, 3.2vw, 3.3rem);
  line-height: 1.3;
  color: var(--ink);
}
html[lang="en"] .lc-org__sum { font-weight: 400; }
.lc-org__sum b { font-weight: inherit; font-variant-numeric: tabular-nums; }
/* Roles, then the agents that take them over, then the one person. Each
   step holds together; the line breaks between steps. */
.lc-org__step { white-space: nowrap; }
.lc-org__step.is-mid { color: var(--ink-2); }
.lc-org__step.is-gold { color: var(--gold); }
.lc-org__sum i { margin: 0 0.12em; font-style: normal; color: var(--ink-3); }
.lc-js .lc-org__sum > * {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.8s ease, transform 1s var(--ease-out);
}
.lc-js .lc-org.is-lit .lc-org__sum > * { opacity: 1; transform: none; }
.lc-js .lc-org.is-lit .lc-org__sum > :nth-child(1) { transition-delay: 1.5s; }
.lc-js .lc-org.is-lit .lc-org__sum > :nth-child(2) { transition-delay: 2.3s; }
.lc-js .lc-org.is-lit .lc-org__sum > :nth-child(3) { transition-delay: 2.5s; }
.lc-js .lc-org.is-lit .lc-org__sum > :nth-child(4) { transition-delay: 3.3s; }
.lc-js .lc-org.is-lit .lc-org__sum > :nth-child(5) { transition-delay: 3.5s; }

/* ----- Finale ---------------------------------------------------------- */
.lc-finale { position: relative; }
.lc-finale__pin {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2.2rem;
  min-height: 100vh;
  padding: 6rem var(--pad);
  text-align: center;
}
.lc-finale__title {
  margin: 0;
  font-weight: 900;
  font-size: clamp(2.8rem, 8.2vw, 9.2rem);
  line-height: 1.04;
}
html[lang="en"] .lc-finale__title { font-weight: 400; line-height: 0.96; }
html[lang="en"] .lc-finale__title i { font-style: italic; }
.lc-finale__sub {
  margin: 0;
  font: 400 12px/1.6 var(--mono);
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
}
.lc-finale__back {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--ink-3);
  transition: color 0.3s ease, border-color 0.3s ease;
}
.lc-finale__back:hover { color: var(--ink); border-color: var(--gold); }
.lc-finale__point {
  display: block;
  width: 1px;
  height: clamp(4.5rem, 13vh, 8.5rem);
  margin: -1.2rem 0;
}

.page-lc .foot {
  position: relative;
  z-index: 2;
  background: var(--bg);
  font-family: var(--mono);
  font-size: 0.72rem;
}

/* ----- Tablet and phone ------------------------------------------------ */
@media (max-width: 1100px) {
  .lc-org__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lc-fact:nth-child(2) { border-right: none; }
  .lc-fact:nth-child(3) { padding-left: 0; }
  .lc-fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .lc-stage { grid-template-columns: minmax(0, 1fr); }
  .lc-card__body { min-height: 7.6em; }
  .lc-rail { display: none; }
}

@media (max-width: 760px) {
  .lc-mark span { display: none; }
  .lc-hero__layer { padding-left: 1.4rem; padding-right: 1.4rem; }
  .lc-hero__intro { gap: 1.6rem; }
  .lc-js .lc-swarm__aside { position: static; margin: 2rem 0 0 0.4rem; }
  .lc-js .lc-hero__order { padding-bottom: 11vh; }
  /* Lines set for a wide screen; a phone lets them run on. */
  .lc-order__sub .lc-line,
  .lc-statement__text .lc-line { display: inline; }
  html:not([lang="en"]) .lc-hero__title { font-size: clamp(3.2rem, 15.4vw, 6rem); }
  /* The readout moves under the nav as one line, out of the copy's way. */
  .lc-disclaimer { top: 4.95rem; left: 1.4rem; right: 1.4rem; max-width: none; }
  .lc-disclaimer__text { font-size: 10.5px; line-height: 1.8; letter-spacing: 0; }
  .page-lc .foot { padding-left: 1.4rem; padding-right: 1.4rem; }
  .lc-hud {
    top: 8.2rem;
    bottom: auto;
    left: 1.4rem;
    right: 1.4rem;
    width: auto;
    gap: 1.1rem;
    font-size: 9px;
  }
  .lc-js .lc-hud { display: flex; }
  .lc-hud__row { flex: 1; border-top: none; border-bottom: 1px solid var(--line); }
  .lc-hud__bar { display: none; }
  .lc-hud__law { display: none !important; }
  .lc-js .lc-hud { flex-wrap: wrap; }
  .lc-hud__phases { flex-basis: 100%; margin-bottom: 0.3rem; }
  .lc-cue { bottom: 1.2rem; }

  .lc-facts { grid-template-columns: minmax(0, 1fr); }
  .lc-fact,
  .lc-fact + .lc-fact { padding: 1.8rem 0 1.4rem; border-right: none; }
  .lc-fact + .lc-fact { border-top: 1px solid var(--line); }
  .lc-fact__glyph { margin-bottom: 1rem; }

  .lc-engines__grid,
  .lc-evolve__grid,
  .lc-cast__head,
  .lc-kernel__grid,
  .lc-yield__card { grid-template-columns: minmax(0, 1fr); }
  /* The drawing's own type is too small here; the list below it speaks. */
  .lc-stack { overflow: hidden; }
  .lc-stack__svg { width: 150%; margin-left: -40%; }
  .lc-stack__labels,
  .lc-stack__tag,
  .lc-stack__print { display: none; }
  .lc-stack__legend {
    display: grid;
    gap: 0.9rem;
    margin: 1.2rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: layer;
  }
  .lc-stack__legend li { display: grid; gap: 0.2rem; padding-left: 1.6rem; position: relative; }
  .lc-stack__legend li::before {
    counter-increment: layer;
    content: '0' counter(layer);
    position: absolute;
    left: 0;
    top: 0.2rem;
    font: 400 10px/1.6 var(--mono);
    color: var(--gold);
  }
  .lc-stack__legend b { font-family: var(--display); font-weight: 600; color: var(--ink); }
  .lc-stack__legend li.is-gold b { color: var(--gold); }
  .lc-stack__legend span { font: 400 11px/1.6 var(--mono); color: var(--ink-3); }
  .lc-app { grid-template-columns: minmax(0, 1fr); }
  .lc-app__side { display: none; }
  .lc-app__head { padding: 10px 14px; }
  .lc-app__thread { min-height: 214px; padding: 14px 14px 6px; }
  .lc-app__msg { max-width: 94%; }
  .lc-app__from span { display: none; }
  .lc-app__composer { margin: 4px 10px 10px; }
  /* Engine and model are the story; the buttons and the effort pill give
     way on a phone, so even the longest pair fits whole. */
  .lc-app__bar .lc-app__btn,
  .lc-app__select:not(.is-engine):not(.is-model) { display: none; }
  .lc-app__select { padding: 3px 6px; }
  .lc-chart__axis--x { bottom: 3.6rem; }

  .lc-card { padding: 1.3rem 1.2rem 1.1rem; }
  .lc-card__name { font-size: 1.9rem; }
  .lc-roster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem; }
  .lc-roster button { padding-right: 0.9rem; }
  .lc-roster img { width: 32px; height: 32px; }
  .lc-org__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem 1.2rem; }
  .lc-org__dept li { font-size: 0.9rem; line-height: 1.85; }
}

/* ----- Reduced motion --------------------------------------------------
   Keyed on the missing `lc-js` too: motion is on unless the visitor turned
   it off, and only then do the remaining loops honour the system setting. */
@media (prefers-reduced-motion: reduce) {
  html:not(.lc-js) .lc-grain,
  html:not(.lc-js) .lc-marquee__track,
  html:not(.lc-js) .lc-stage__rec i,
  html:not(.lc-js) .lc-card__status i,
  html:not(.lc-js) .lc-app__state i,
  html:not(.lc-js) .lc-app__caret,
  html:not(.lc-js) .lc-card__caret { animation: none; }
  html:not(.lc-js) .lc-marquee { overflow-x: auto; }
  html:not(.lc-js) .lc-stage__videos video { transition: opacity 0.2s linear; transform: none; }
  html:not(.lc-js) .lc-yield__media img { transition: none; }
}

/* Static page: the field is a backdrop for the opening screen only, behind
   the title, where names would only peek out between its glyphs. */
.lc-static .lc-field { position: absolute; height: 100vh; }
.lc-static .lc-field-labels { display: none; }