/* ===== src/styles/01-tokens.css ===== */
/* ============================================================
   Feibing Neo · Design tokens — "The Honest Machine"
   Warm-paper editorial canvas · ember↔teal brand duotone ·
   engineering boot-log motif. Apple restraint, Claude warmth.
   ============================================================ */

:root {
  /* ---- paper / ink (warm light canvas) ---- */
  --paper:      #FAF6F0;   /* base ivory */
  --paper-2:    #F3ECE1;   /* recessed band */
  --paper-3:    #ECE2D4;   /* deeper fill */
  --card:       #FFFDFA;   /* raised surface */
  --ink:        #1B1611;   /* near-black warm */
  --ink-2:      #4C4339;   /* muted body */
  --ink-3:      #756A5D;   /* captions */
  --faint:      #9A8E7E;   /* hairline labels */

  /* legacy aliases so existing markup keeps working */
  --bg: var(--paper);
  --bg-gray: var(--paper-2);
  --bg-gray-2: var(--paper);
  --surface: var(--card);
  --surface-gray: var(--paper-2);
  --ink-deep: var(--night);
  --body: var(--ink-2);
  --muted: var(--ink-3);
  --border-strong: rgba(27,22,17,0.22);
  --orange: var(--ember);
  --orange-lt: var(--ember-lo);
  --orange-ink: var(--ember-deep);

  /* ---- night (dark stage sections) ---- */
  --night:      #15110C;
  --night-2:    #1F1810;
  --night-3:    #2A2116;
  --on-night:   #F4ECDF;
  --on-night-2: #B8AC99;
  --on-night-3: #7E7363;

  /* ---- brand duotone (from the logo gradients) ---- */
  --ember:      #FF7007;
  --ember-lo:   #FFA126;
  --ember-deep: #C24E0C;
  --teal:       #00A0A5;
  --teal-lo:    #00E5E1;
  --teal-deep:  #067A7E;

  --ember-tint: rgba(255,112,7,0.10);
  --teal-tint:  rgba(0,160,165,0.10);

  /* ---- lines ---- */
  --border:   rgba(27,22,17,0.12);
  --hairline: rgba(27,22,17,0.07);
  --border-night:   rgba(244,236,223,0.14);
  --hairline-night: rgba(244,236,223,0.08);

  /* ---- gradients ---- */
  --duo:        linear-gradient(104deg, #FF7007 0%, #FF9A2E 32%, #1AAEA4 76%, #00A0A5 100%);
  --grad-orange:linear-gradient(120deg, #FFA126, #FF7007 58%, #C24E0C);
  --grad-brand: var(--duo);

  /* ---- type ---- */
  --font-display: "Fraunces", "PingFang SC", "Hiragino Sans GB", "Songti SC", Georgia, serif;
  --font-sans:    "Hanken Grotesk", "PingFang SC", "Hiragino Sans GB", system-ui, -apple-system, sans-serif;
  --font-body:    var(--font-sans);
  --font-mono:    "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, monospace;

  /* ---- shape ---- */
  --radius-sm: 10px;
  --radius:    16px;
  --radius-lg: 22px;
  --radius-xl: 30px;
  --radius-2xl: 40px;

  /* ---- shadow (soft, warm, low) ---- */
  --shadow-sm: 0 1px 2px rgba(27,22,17,0.04), 0 2px 8px rgba(27,22,17,0.045);
  --shadow:    0 2px 6px rgba(27,22,17,0.05), 0 12px 34px rgba(27,22,17,0.08);
  --shadow-lg: 0 6px 18px rgba(27,22,17,0.07), 0 30px 70px rgba(27,22,17,0.14);
  --shadow-ember: 0 14px 40px rgba(255,112,7,0.22);

  /* ---- layout ---- */
  --maxw: 1240px;
  --wide: 1360px;
  --prose: 780px;
  --topbar-h: 66px;

  /* ---- motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}


/* ===== src/styles/02-base.css ===== */
/* ============================================================
   Base — reset, canvas, typography, sections, reveal, texture
   ============================================================ */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--paper);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv05";
}

a { color: inherit; text-decoration: none; }
button { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; }
img, svg { display: block; }
code, pre, .mono { font-family: var(--font-mono); }
::selection { background: rgba(255,112,7,0.22); color: var(--ink); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink); font-weight: 600;
  letter-spacing: -0.018em; line-height: 1.06;
  font-optical-sizing: auto;
}

/* ---- warm film-grain texture overlay (premium "质感") ---- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
}

.shell { position: relative; z-index: 2; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.container { width: min(var(--maxw), calc(100vw - 48px)); margin: 0 auto; }
.wide { width: min(var(--wide), calc(100vw - 48px)); margin: 0 auto; }
.narrow { width: min(var(--prose), calc(100vw - 40px)); margin: 0 auto; }

/* ---- accent text: the brand duotone, on key words only ---- */
.accent, .grad-text {
  background: var(--duo);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* ---- page (one per file) ---- */
.page { display: block; animation: page-in 0.5s var(--ease-out) both; }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---- sections / stages ---- */
.section { padding: clamp(72px, 9vw, 120px) 0; }
.section-band { background: var(--paper-2); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.stage-dark { background: var(--night); color: var(--on-night); position: relative; }
.stage-dark h1, .stage-dark h2, .stage-dark h3, .stage-dark .section-title { color: var(--on-night); }
.stage-dark .section-lead, .stage-dark .card-desc, .stage-dark .module-copy { color: var(--on-night-2); }
.stage-dark .kicker { color: var(--on-night-3); }
.stage-dark .kicker::before { background: var(--ember); }

/* ---- labels ---- */
.eyebrow {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em;
  font-weight: 500; color: var(--ember-deep);
  display: inline-flex; align-items: center; gap: 9px; text-transform: uppercase;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ember); box-shadow: 0 0 0 4px var(--ember-tint); }
.kicker {
  font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--faint); font-weight: 500;
  display: inline-flex; align-items: center; gap: 9px;
}
.kicker::before { content: ""; width: 16px; height: 1px; background: currentColor; opacity: 0.55; }

.section-head { max-width: 1000px; margin-bottom: clamp(40px, 5vw, 60px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-title { text-wrap: balance;
  margin: 18px 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px, 4.6vw, 58px); line-height: 1.04; letter-spacing: -0.025em; color: var(--ink);
}
.section-title .soft { color: var(--faint); font-style: italic; font-weight: 400; }
.section-lead { margin-top: 22px; font-size: 18px; line-height: 1.62; color: var(--ink-3); max-width: 900px; }
.section-head.center .section-lead { margin-left: auto; margin-right: auto; }

/* ---- scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.85s var(--ease), transform 0.85s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .page.active { animation: none; }
}


/* ===== src/styles/03-components.css ===== */
/* ============================================================
   Components — chrome, buttons, cards, metrics, boot-log,
   product window, harness diagram, footer
   ============================================================ */

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250,246,240,0.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.topbar.scrolled { border-bottom-color: var(--hairline); box-shadow: 0 1px 24px rgba(27,22,17,0.05); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--topbar-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; }
.brand-logo { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; transition: transform .4s var(--ease); }
.brand:hover .brand-logo { transform: rotate(-8deg) scale(1.05); }
.brand-logo svg { width: 100%; height: 100%; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.12; }
.brand-text { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; color: var(--ink); letter-spacing: -0.01em; }
.brand-sub { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; }

.nav { display: flex; gap: 2px; align-items: center; }
.nav .navlink {
  position: relative; font-size: 14px; font-weight: 500; color: var(--ink-3);
  padding: 8px 14px; border-radius: 999px; transition: color .18s;
}
.nav .navlink:hover { color: var(--ink); }
.nav .navlink.active { color: var(--ink); }
.nav .navlink.active::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 1px; height: 2px;
  border-radius: 2px; background: var(--duo);
}
.nav-actions { display: flex; align-items: center; gap: 12px; margin-left: 12px; }

.lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--border); }
.lang-switch button { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; padding: 4px 10px; border-radius: 999px; color: var(--faint); transition: color .18s, background .18s; }
.lang-switch button.active { color: var(--paper); background: var(--ink); }
.lang-switch button:not(.active):hover { color: var(--ink); }

.nav-toggle { display: none; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--border); align-items: center; justify-content: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 16px; height: 1.6px; background: var(--ink); border-radius: 2px; position: relative; transition: transform .3s; }
.nav-toggle span::before { position: absolute; top: -5px; } .nav-toggle span::after { position: absolute; top: 5px; }

/* ---------- Buttons ---------- */
.btn {
  height: 48px; padding: 0 24px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-sans); font-size: 15px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform .25s var(--ease), background .22s, color .22s, border-color .22s, box-shadow .25s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow); }
.btn-secondary { background: var(--paper-2); color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--paper-3); }
.btn-outline { border: 1px solid var(--border-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); background: rgba(27,22,17,0.03); }
/* ember CTA — the rare punctuation */
.btn-accent { background: var(--ember); color: #fff; box-shadow: var(--shadow-ember); }
.btn-accent:hover { background: #ED6606; box-shadow: 0 18px 46px rgba(255,112,7,0.30); }
.btn-ghost { color: var(--ink); padding: 0; height: auto; font-weight: 600; }
.btn-ghost:hover { color: var(--ember-deep); }
.btn-sm { height: 40px; padding: 0 18px; font-size: 14px; }
.btn-arrow { font-size: 16px; line-height: 1; transition: transform .25s var(--ease); }
.btn:hover .btn-arrow { transform: translateX(4px); }
/* tertiary text-link CTA (e.g. hero "or explore first") */
.hero-sublink { margin-top: 14px; }
.linklike { background: none; border: 0; padding: 0; font: inherit; font-size: 15px; color: var(--ink-3); cursor: pointer; transition: color .15s var(--ease); }
.linklike:hover { color: var(--ember); }
.stage-dark .btn-outline { border-color: var(--border-night); color: var(--on-night); }
.stage-dark .btn-outline:hover { border-color: var(--on-night); background: rgba(244,236,223,0.06); }
.stage-dark .btn-secondary { background: rgba(244,236,223,0.08); color: var(--on-night); border-color: var(--border-night); }

/* ---------- Pills / chips ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 500;
  padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-3);
}
.pill-accent { border-color: transparent; color: #fff; background: var(--ember); }
.pill-teal { border-color: transparent; color: #fff; background: var(--teal-deep); }
.chip { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; padding: 4px 10px; border-radius: 7px; background: var(--paper-3); color: var(--ink-3); }

/* Format chips — deliverable formats row (product · #prod-artifacts) */
.fmt-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.fmt-chip {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--paper-2); color: var(--ink-2);
}
.fmt-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); }

/* ---------- Grids ---------- */
.grid { display: grid; gap: 22px; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.g5 { grid-template-columns: repeat(5, minmax(0,1fr)); }

/* ---------- Cards ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 30px; position: relative; overflow: hidden;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
.section-band .card { background: var(--card); }
.stage-dark .card { background: var(--night-2); border-color: var(--border-night); }
.card.linkish { cursor: pointer; }
.card.linkish:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--border-strong); }
/* anchor cards — reset link chrome, adopt the linkish lift */
a.card { text-decoration: none; color: inherit; cursor: pointer; display: block; }
a.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: var(--border-strong); }
/* hairline duotone accent that grows on hover */
.card.linkish::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--duo); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.card.linkish:hover::after { transform: scaleY(1); }
.card-kicker { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); font-weight: 500; }
.card-index { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.05em; color: var(--ember-deep); }
.card-title { margin-top: 18px; font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.2; color: var(--ink); letter-spacing: -0.015em; }
.stage-dark .card-title { color: var(--on-night); }
.card-desc { margin-top: 12px; font-size: 14.5px; line-height: 1.62; color: var(--ink-3); }
.stage-dark .card-desc { color: var(--on-night-2); }
.card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.icon-box {
  width: 46px; height: 46px; display: grid; place-items: center; border-radius: 13px;
  background: var(--paper-2); color: var(--ink); border: 1px solid var(--border);
  font-size: 18px; font-weight: 600; font-family: var(--font-display);
}
.stage-dark .icon-box { background: var(--night-3); border-color: var(--border-night); color: var(--on-night); }

.bullets { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 13.5px; color: var(--ink-3); }
.bullets li { display: flex; align-items: flex-start; gap: 11px; }
.bullets li::before { content: ""; width: 5px; height: 5px; border-radius: 999px; background: var(--ember); flex: 0 0 auto; margin-top: 8px; }
.checks li::before { content: "✓"; background: none; width: auto; height: auto; margin-top: 0; color: var(--teal-deep); font-weight: 700; font-size: 12px; }
.stage-dark .bullets { color: var(--on-night-2); }

/* ---------- Metric strip ---------- */
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.metric-val { font-family: var(--font-display); font-size: clamp(42px, 5vw, 64px); font-weight: 600; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.metric-val .u { font-size: 0.5em; color: var(--faint); font-weight: 500; }
.metric-label { margin-top: 12px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--ink-3); text-transform: uppercase; }
.metric-val em { font-style: normal; background: var(--duo); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Boot-log / snippet (the honesty motif) ---------- */
.snippet {
  border-radius: var(--radius); border: 1px solid var(--night-3);
  background: linear-gradient(180deg, #1A140D, #120D08);
  padding: 22px 24px;
  font-family: var(--font-mono); font-size: 12.5px; line-height: 1.85; color: #C9BCA6;
  overflow-x: auto; position: relative;
}
.snippet::before { content: "● ● ●"; position: absolute; top: 12px; right: 16px; font-size: 7px; letter-spacing: 3px; color: #4a3f30; }
.snippet .c-key { color: var(--ember-lo); }
.snippet .c-str { color: var(--teal-lo); }
.snippet .c-com { color: #6c5f4c; font-style: italic; }
.snippet .c-fn  { color: #FF9A4D; }
.snippet .c-ok  { color: #6fd49a; }

/* inline boot-log ticker line */
.bootline {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3);
  padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card);
}
.bootline .dotpulse { width: 7px; height: 7px; border-radius: 999px; background: var(--teal); box-shadow: 0 0 0 0 rgba(0,160,165,0.5); animation: pulse 2.4s var(--ease) infinite; }
.bootline b { color: var(--ink); font-weight: 700; }
.bootline .pass { color: var(--teal-deep); }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(0,160,165,0.45); } 70% { box-shadow: 0 0 0 8px rgba(0,160,165,0); } 100% { box-shadow: 0 0 0 0 rgba(0,160,165,0); } }

/* ---------- Module panel ---------- */
.module { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: clamp(32px, 5vw, 60px); position: relative; overflow: hidden; }
.section-band .module { background: var(--paper); }
.stage-dark .module { background: var(--night-2); border-color: var(--border-night); }
.module-head { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 44px; align-items: end; }
.module-copy { color: var(--ink-3); font-size: 16.5px; line-height: 1.7; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--border); background: var(--paper-2); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; padding: 72px 0 44px; }
.footer-brand .brand { margin-bottom: 18px; }
.footer-tag { font-size: 14px; color: var(--ink-3); line-height: 1.65; max-width: 290px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-weight: 500; margin: 0 0 16px; }
.footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.footer-col a { font-size: 14px; color: var(--ink-3); transition: color .18s; cursor: pointer; }
.footer-col a:hover { color: var(--ember-deep); }
.footer-bottom { border-top: 1px solid var(--border); padding: 22px 0 44px; display: flex; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.fb-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; }
.fb-icp { color: var(--faint); transition: color .15s; }
.fb-icp:hover { color: var(--ink-3); }

/* ---------- Sub-nav (product page) ---------- */
.subnav { position: sticky; top: var(--topbar-h); z-index: 40; background: rgba(250,246,240,0.82); backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border-bottom: 1px solid var(--hairline); }
.subnav-inner { display: flex; gap: 4px; padding: 11px 0; overflow-x: auto; scrollbar-width: none; }
.subnav-inner::-webkit-scrollbar { display: none; }
.subnav a { font-size: 13.5px; font-weight: 500; color: var(--ink-3); padding: 7px 15px; border-radius: 999px; white-space: nowrap; transition: color .18s, background .18s; cursor: pointer; }
.subnav a:hover, .subnav a.active { color: var(--ink); background: rgba(27,22,17,0.05); }

/* ============================================================
   Product window mock — the Apple "hero shot"
   ============================================================ */
.window {
  border-radius: var(--radius-xl); overflow: hidden; background: var(--night);
  border: 1px solid var(--night-3); box-shadow: var(--shadow-lg);
  font-family: var(--font-sans);
}
.win-bar { display: flex; align-items: center; gap: 8px; padding: 13px 18px; background: var(--night-2); border-bottom: 1px solid var(--night-3); }
.win-dot { width: 11px; height: 11px; border-radius: 999px; background: #3a2f22; }
.win-dot.r { background: #E0533B; } .win-dot.y { background: #E0A93B; } .win-dot.g { background: #4FB477; }
.win-title { margin-left: 10px; font-family: var(--font-mono); font-size: 11.5px; color: var(--on-night-3); }
.win-body { display: grid; grid-template-columns: 184px 1fr 232px; min-height: 420px; }
.win-side { background: var(--night); border-right: 1px solid var(--night-3); padding: 16px 14px; }
.win-side .wlabel { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-night-3); margin: 4px 0 10px; }
.wrow { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-radius: 9px; font-size: 12.5px; color: var(--on-night-2); }
.wrow.sel { background: var(--night-3); color: var(--on-night); }
.wrow .wdot { width: 7px; height: 7px; border-radius: 999px; background: var(--teal); flex: 0 0 auto; }
.wrow .wdot.e { background: var(--ember); }
.wmatrix { border: 1px solid var(--night-3); border-radius: 12px; padding: 11px; margin-bottom: 6px; }
.wmatrix-top { display: flex; align-items: center; gap: 8px; }
.wmatrix-av { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--ember), var(--teal)); color: #fff; font-size: 13px; }
.wmatrix-id { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.wmatrix-id b { font-size: 12px; color: var(--on-night); font-weight: 600; }
.wmatrix-id span { font-size: 10px; color: var(--on-night-3); }
.wmatrix-pulse { display: flex; align-items: baseline; gap: 5px; margin-top: 9px; font-size: 10.5px; color: var(--on-night-3); }
.wmatrix-pulse b { font-size: 13px; color: var(--on-night); font-family: var(--font-mono); }
.wmatrix-pulse i { font-style: normal; color: var(--teal); font-size: 10px; }
.wmatrix-conn { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 10.5px; color: var(--on-night-3); font-family: var(--font-mono); }
.wmatrix-conn .wdot { width: 7px; height: 7px; border-radius: 999px; background: var(--ember); flex: 0 0 auto; }
.win-canvas { padding: 22px; display: flex; flex-direction: column; gap: 14px; background: linear-gradient(180deg, #14100B, #110C07); }
.win-art { background: var(--night); border-left: 1px solid var(--night-3); padding: 18px; }

.msg { max-width: 92%; }
.msg .who { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--on-night-3); margin-bottom: 6px; }
.msg .bubble { background: var(--night-2); border: 1px solid var(--night-3); border-radius: 14px; padding: 12px 14px; font-size: 13px; line-height: 1.55; color: var(--on-night); }
.msg.user { margin-left: auto; }
.msg.user .bubble { background: var(--night-3); }
.toolblock { border: 1px solid var(--night-3); border-radius: 12px; overflow: hidden; }
.toolblock .tb-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--night-2); font-family: var(--font-mono); font-size: 11px; color: var(--on-night-2); }
.toolblock .tb-head .ok { color: #6fd49a; margin-left: auto; }
.toolblock .tb-body { padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: var(--on-night-3); }
.toolblock .tb-body .add { color: #6fd49a; }
.toolblock .tb-body .del { color: #e0796b; }
.win-meter { margin-top: auto; display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 10.5px; color: var(--on-night-3); padding-top: 6px; }
.win-meter .bar { flex: 1; height: 4px; border-radius: 999px; background: var(--night-3); overflow: hidden; }
.win-meter .bar i { display: block; height: 100%; width: 38%; background: var(--duo); border-radius: 999px; }

.art-card { background: var(--night-2); border: 1px solid var(--night-3); border-radius: 11px; padding: 12px; }
.art-card .a-t { font-family: var(--font-mono); font-size: 10px; color: var(--on-night-3); text-transform: uppercase; letter-spacing: 0.06em; }
.art-card .a-file { display: flex; align-items: center; gap: 9px; margin-top: 10px; font-size: 12.5px; color: var(--on-night); }
.art-card .a-file .fi { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 10px; font-family: var(--font-mono); color: #fff; background: var(--teal-deep); }
.art-card .a-file .fi.x { background: var(--ember-deep); }

/* ============================================================
   Harness / pillar diagram
   ============================================================ */
.harness { display: grid; gap: 14px; }
.h-layer {
  display: grid; grid-template-columns: 92px 1fr; align-items: center; gap: 22px;
  padding: 20px 24px; border-radius: var(--radius); border: 1px solid var(--border-night);
  background: var(--night-2); transition: transform .3s var(--ease), border-color .3s;
}
.h-layer:hover { transform: translateX(6px); border-color: var(--ember); }
.h-layer .h-tag { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--ember-lo); letter-spacing: 0.04em; }
.h-layer .h-name { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--on-night); }
.h-layer .h-desc { font-size: 13.5px; color: var(--on-night-2); margin-top: 3px; line-height: 1.5; }

/* pillar diagram (light) */
.pillar { text-align: center; }
.pillar .p-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; color: var(--ember-deep); text-transform: uppercase; }
.pillar .p-name { font-family: var(--font-display); font-size: clamp(22px, 2.6vw, 30px); font-weight: 600; color: var(--ink); margin-top: 6px; letter-spacing: -0.02em; }
.pillar .p-desc { margin-top: 10px; font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* hero aurora */
.aurora { position: absolute; inset: -10% -10% auto -10%; height: 620px; z-index: -1; pointer-events: none; filter: blur(60px); opacity: 0.55;
  background:
    radial-gradient(40% 60% at 22% 30%, rgba(255,112,7,0.35), transparent 60%),
    radial-gradient(42% 58% at 78% 24%, rgba(0,160,165,0.32), transparent 62%),
    radial-gradient(50% 50% at 50% 60%, rgba(255,161,38,0.18), transparent 70%); }

/* ============================================================
   v5 polish — constitution groups, metrics dividers, a11y focus
   ============================================================ */

/* -------- constitution ledger (philosophy · 28 D as articles) -------- */
.dledger {
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  background: var(--card); overflow: hidden; box-shadow: var(--shadow-sm);
}
.dl-sect {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  font-weight: 500; color: var(--ink-2); background: var(--paper-2);
  padding: 16px 28px 13px; border-top: 1px solid var(--border);
}
.dl-sect:first-child { border-top: 0; }
.dl-row {
  display: grid; grid-template-columns: 58px 230px 1fr; gap: 22px; align-items: baseline;
  padding: 15px 28px; border-top: 1px solid var(--hairline);
  transition: background .18s;
}
.dl-row:hover { background: var(--paper-2); }
.dl-id { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--ember-deep); font-variant-numeric: tabular-nums; }
.dl-name { font-family: var(--font-display); font-weight: 600; font-size: 16.5px; letter-spacing: -0.01em; color: var(--ink); }
.dl-rule { font-size: 14px; line-height: 1.6; color: var(--ink-3); }

/* -------- harness staircase (product · Model + L1–L5 as a stack) -------- */
.hstack { display: grid; gap: 11px; }
.hs-model, .hs-layer {
  display: grid; grid-template-columns: 68px 1fr; align-items: baseline; gap: 20px;
  padding: 17px 24px; border-radius: var(--radius);
  background: var(--card); border: 1px solid var(--border);
  transition: transform .3s var(--ease), border-color .3s;
}
.hs-model { background: var(--night); border-color: var(--night-3); }
.hs-model .hs-name { color: var(--on-night); }
.hs-model .hs-desc { color: var(--on-night-2); }
.hs-model .hs-tag { color: var(--teal-lo); }
.hs-layer:hover { transform: translateX(6px); border-color: var(--ember); }
.hs-layer:nth-child(2) { margin-left: 32px; }
.hs-layer:nth-child(3) { margin-left: 64px; }
.hs-layer:nth-child(4) { margin-left: 96px; }
.hs-layer:nth-child(5) { margin-left: 128px; }
.hs-layer:nth-child(6) { margin-left: 160px; }
.hs-tag { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--ember-deep); }
.hs-body { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.hs-name { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.hs-desc { font-size: 13.5px; line-height: 1.55; color: var(--ink-3); }

/* -------- microkernel concentric rings (product · P ⊃ X ⊃ K) -------- */
.krings .kring { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(16px, 2.4vw, 26px); }
.kring.p { background: var(--card); }
.kring.x { background: var(--paper-2); margin-top: 18px; }
.kring.k { background: var(--night); border-color: var(--night-3); margin-top: 18px; }
.kring-head { display: grid; grid-template-columns: 40px 170px 1fr; gap: 18px; align-items: baseline; }
.ktag {
  font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: var(--ember-deep);
  width: 32px; height: 32px; display: grid; place-items: center; align-self: start;
  border: 1px solid var(--border); border-radius: 9px; background: var(--paper);
}
.kring.k .ktag { background: var(--night-2); border-color: var(--night-3); color: var(--ember-lo); }
.kname { font-family: var(--font-display); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; color: var(--ink); }
.kdesc { font-size: 13.5px; line-height: 1.62; color: var(--ink-3); }
.kring.k .kname { color: var(--on-night); }
.kring.k .kdesc { color: var(--on-night-2); }
.krings-note {
  margin-top: 16px; text-align: center;
  font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink-3);
}
.krings-note::before, .krings-note::after { content: "—"; color: var(--faint); margin: 0 12px; }

/* -------- hero boot sequence (the machine proves itself on load) -------- */
.bootseq .bs { opacity: 0; animation: bs-in .45s var(--ease) forwards; }
.bootseq .bs:nth-of-type(1) { animation-delay: .25s; }
.bootseq .bs:nth-of-type(2) { animation-delay: .95s; }
.bootseq .bs:nth-of-type(3) { animation-delay: 1.65s; }
@keyframes bs-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.bcaret { width: 7px; height: 14px; background: var(--teal-deep); border-radius: 1px; animation: bc-blink 1.1s steps(1) infinite; }
@keyframes bc-blink { 50% { opacity: 0; } }

/* hero window token meter fills on load */
.hero-figure .win-meter .bar i { animation: meter-fill 2s var(--ease-out) .4s both; }
@keyframes meter-fill { from { width: 8%; } to { width: 38%; } }

/* metric strip — hairline dividers between figures */
.metrics > div { position: relative; }
.metrics > div + div::before {
  content: ""; position: absolute; left: -20px; top: 8%; bottom: 8%; width: 1px;
  background: var(--border);
}
@media (max-width: 860px) { .metrics > div + div::before { display: none; } }

/* keyboard a11y — visible focus ring in brand ink */
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn:focus-visible { outline-offset: 2px; }
.stage-dark :focus-visible, .newsletter :focus-visible { outline-color: var(--ember-lo); }

/* respect reduced motion for the boot-log pulse + hover lifts */
@media (prefers-reduced-motion: reduce) {
  .bootline .dotpulse { animation: none; }
  .btn:hover, .card.linkish:hover, .post-card:hover, .note-card:hover, .tier:hover, .featured:hover,
  .hs-layer:hover { transform: none; }
  .bootseq .bs { animation: none; opacity: 1; }
  .bcaret { animation: none; }
  .hero-figure .win-meter .bar i { animation: none; }
}

/* ── v6 · connector zero-config flow (Diagram ①) ───────────────── */
.zc-flow{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:22px;
  padding:24px;border:1px solid var(--hairline);border-radius:16px;margin-top:26px;
  background:var(--paper-2)}
.zc-cap{font-size:12px;color:var(--ink-3);letter-spacing:.02em}
.zc-fields{list-style:none;margin:10px 0 0;padding:0;font:12px/1.75 var(--font-mono)}
.zc-fields li{text-decoration:line-through;color:var(--ink-3);opacity:.7}
.zc-arrow{font:14px/1 var(--font-mono);color:var(--teal-deep);letter-spacing:3px}
.zc-token{display:inline-block;padding:10px 16px;border-radius:999px;
  background:var(--teal-tint);color:var(--teal-deep);font:600 13px var(--font-mono)}
.zc-note{grid-column:1/-1;margin:16px 0 0;font-size:12px;line-height:1.7;color:var(--ink-3)}
@media(max-width:640px){
  .zc-flow{grid-template-columns:1fr;text-align:center}
  .zc-arrow{transform:rotate(90deg)}
}

/* ── v6 · one engine, many devices (Diagram ②) ─────────────────── */
.dev-fan{display:grid;justify-items:center;gap:14px;padding:26px 24px;
  border:1px solid var(--hairline);border-radius:16px;margin-top:26px;background:var(--paper-2)}
.dev-nodes{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.dev-n{padding:9px 15px;border:1px solid var(--border);border-radius:10px;
  font:600 12px var(--font-mono);color:var(--ink-2);background:var(--paper)}
.dev-lines{width:1px;height:28px;background:linear-gradient(var(--teal),transparent)}
.dev-brain{padding:11px 20px;border-radius:12px;background:var(--ink);color:var(--paper);
  font:700 13px var(--font-mono);letter-spacing:.02em}
.dev-note{margin:8px 0 0;font-size:12px;line-height:1.7;color:var(--ink-3);text-align:center}

/* Download cards — equal height, CTA + meta pinned to the bottom edge */
.dl-cards { align-items: stretch; }
.dl-card { display: flex; flex-direction: column; }
.dl-card .hero-cta { margin-top: auto; padding-top: 20px; }


/* ===== src/styles/04-editorial.css ===== */
/* ============================================================
   Editorial — hero, covers, blog & research cards, reading view,
   community, newsletter, CTAs, page intros
   ============================================================ */

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(72px, 11vw, 132px) 0 56px; text-align: center; overflow: hidden; }
.hero-center { max-width: 940px; margin: 0 auto; position: relative; }
.hero h1 {
  margin: 26px 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(46px, 8vw, 104px); line-height: 0.98; letter-spacing: -0.035em; color: var(--ink);
}
.hero h1 .accent { font-style: italic; padding-right: 0.16em; }
.hero-lead { margin: 30px auto 0; font-size: clamp(18px, 2.1vw, 21px); line-height: 1.55; color: var(--ink-3); max-width: 600px; }
.hero-cta { display: flex; gap: 14px; align-items: center; justify-content: center; margin-top: 36px; flex-wrap: wrap; }
.hero-boot { margin: 28px auto 0; display: inline-flex; }

/* hero stage — the product window */
.hero-stage { margin-top: clamp(48px, 7vw, 84px); position: relative; }
.hero-stage::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 78%; height: 70%; background: var(--duo); filter: blur(90px); opacity: 0.16; z-index: -1; border-radius: 50%; }
.hero-figure { width: 100%; }

/* legacy orbital figure fallback styling (unused now but harmless) */
.hf-axis { stroke: rgba(27,22,17,0.1); stroke-dasharray: 2 7; }
.hf-node { fill: var(--card); stroke-width: 1.5; }
.hf-label { font-family: var(--font-mono); font-size: 8.5px; fill: var(--faint); letter-spacing: 0.14em; }

/* ---------- Statement (dark stage) ---------- */
.statement { text-align: center; padding: clamp(80px, 11vw, 130px) 0; }
.statement p { font-family: var(--font-display); font-weight: 500; font-size: clamp(28px, 4.4vw, 56px); line-height: 1.14; letter-spacing: -0.025em; color: var(--ink); margin: 0 auto; max-width: 1000px; }
.statement .soft { color: var(--ink-3); font-style: italic; }

/* ---------- Covers (duotone imagery) ---------- */
.cover { position: relative; overflow: hidden; background: var(--night);
  background-image:
    radial-gradient(120% 130% at 14% 6%, rgba(255,255,255,0.14), transparent 40%),
    linear-gradient(142deg, #1c140c 0%, var(--cc, #FF7007) 118%, var(--cc2, #00A0A5) 160%); }
.cover::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(255,255,255,0.16) 0.8px, transparent 0.9px); background-size: 13px 13px; opacity: 0.5; mix-blend-mode: overlay; }
.cover .cover-mark { position: absolute; left: 24px; bottom: 18px; font-family: var(--font-display); font-weight: 600; font-size: 34px; color: rgba(255,255,255,0.92); z-index: 1; }

/* ---------- Featured + post cards ---------- */
.featured { display: grid; grid-template-columns: 1.05fr 0.95fr; align-items: stretch;
  border: 1px solid var(--border); border-radius: var(--radius-2xl); overflow: hidden; background: var(--card); cursor: pointer; transition: box-shadow .35s var(--ease), transform .35s var(--ease); }
.featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.featured .cover { min-height: 400px; }
.featured-body { padding: clamp(32px, 4vw, 54px); display: flex; flex-direction: column; justify-content: center; }
.featured-body h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.2vw,42px); line-height: 1.08; letter-spacing: -0.025em; margin: 18px 0 0; color: var(--ink); }
.featured-body .excerpt { margin-top: 16px; font-size: 16.5px; line-height: 1.6; color: var(--ink-3); }

.post-meta { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-top: 22px; }
.post-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--faint); }
.post-meta .author { color: var(--ink-2); }

.post-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.post-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
.post-card .cover { height: 54px; }
.post-card .cover .cover-mark { left: 14px; bottom: 8px; font-size: 18px; }
.post-card .pc-body { padding: 24px; display: flex; flex-direction: column; flex: 1; }
.post-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.22; letter-spacing: -0.015em; margin: 14px 0 0; color: var(--ink); }
.post-card .excerpt { margin-top: 11px; font-size: 14px; line-height: 1.58; color: var(--ink-3); flex: 1; }

.cat-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
.cat-chip::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--cc, var(--ember)); }

.filter-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 36px; }
.filter-row button { font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--ink-3); padding: 8px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--card); transition: all .18s; }
.filter-row button:hover { border-color: var(--border-strong); color: var(--ink); }
.filter-row button.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Reading view ---------- */
.article-hero { padding: clamp(48px,7vw,80px) 0 36px; }
.article-title { font-family: var(--font-display); font-weight: 600; font-size: clamp(34px, 5vw, 58px); line-height: 1.06; letter-spacing: -0.03em; color: var(--ink); margin: 18px 0 0; }
.article-byline { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); margin-top: 22px; }
.article-byline .author { color: var(--ink-2); }
.article-byline .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--faint); }
.prose { font-size: 18.5px; line-height: 1.78; color: var(--ink-2); }
.prose > * + * { margin-top: 1.35em; }
.prose .lead { font-size: 22px; line-height: 1.5; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; font-family: var(--font-display); }
.prose h2 { font-family: var(--font-display); font-weight: 600; font-size: 27px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin-top: 1.9em; }
.prose h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); margin-top: 1.6em; }
.prose blockquote { margin: 1.8em 0; padding: 4px 0 4px 28px; border-left: 3px solid; border-image: var(--duo) 1;
  font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 24px; line-height: 1.4; color: var(--ink); letter-spacing: -0.015em; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-top: 0.5em; }
.prose strong { color: var(--ink); font-weight: 700; }
.prose code { font-family: var(--font-mono); font-size: 0.84em; background: var(--paper-3); border-radius: 5px; padding: 2px 6px; color: var(--ember-deep); }
.prose a { color: var(--ember-deep); border-bottom: 1px solid rgba(194,78,12,0.32); }
.prose a:hover { border-color: var(--ember-deep); }
.article-foot { margin-top: 64px; padding-top: 36px; border-top: 1px solid var(--border); }

/* ---------- Research note cards ---------- */
.note-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 30px; cursor: pointer; transition: transform .3s var(--ease), box-shadow .3s var(--ease); position: relative; overflow: hidden; }
.note-card::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--duo); transform: scaleY(0); transform-origin: top; transition: transform .35s var(--ease); }
.note-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.note-card:hover::after { transform: scaleY(1); }
.note-card .note-tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; font-weight: 500; }
.note-card h3 { font-family: var(--font-display); font-weight: 600; font-size: 21px; line-height: 1.22; letter-spacing: -0.02em; margin: 14px 0 0; color: var(--ink); }
.note-card .abstract { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }

/* ---------- Metric table ---------- */
.mtable-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--card); }
.mtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.mtable th, .mtable td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--hairline); }
.mtable th { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); font-weight: 500; background: var(--paper-2); }
.mtable th:last-child { background: rgba(255,112,7,0.10); color: var(--ember-deep); }
.mtable td.metric { font-family: var(--font-mono); color: var(--ember-deep); font-weight: 500; background: rgba(255,112,7,0.05); }
.mtable td .goal { font-family: var(--font-mono); color: var(--teal-deep); }
.mtable tr:last-child td { border-bottom: 0; }
.mtable tbody tr { transition: background .18s; }
.mtable tbody tr:hover { background: var(--paper-2); }

/* ---------- Community ---------- */
.tier { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; position: relative; transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.tier:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.tier.featured-tier { border-color: var(--ember); box-shadow: var(--shadow); }
.tier .tier-badge { position: absolute; top: -12px; left: 26px; }
.tier h3 { font-family: var(--font-display); font-weight: 600; font-size: 22px; color: var(--ink); margin: 0; letter-spacing: -0.015em; }
.tier .tier-sub { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }

.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(var(--ember), var(--teal)); border-radius: 2px; }
.tl-item { position: relative; padding-bottom: 30px; }
.tl-item::before { content: ""; position: absolute; left: -32px; top: 3px; width: 12px; height: 12px; border-radius: 999px; background: var(--paper); border: 2px solid var(--ember); }
.tl-ver { font-family: var(--font-mono); font-size: 13px; font-weight: 700; color: var(--ink); }
.tl-date { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-left: 10px; }
.tl-body { margin-top: 7px; font-size: 14.5px; color: var(--ink-3); line-height: 1.6; }

.avatar-row { display: flex; flex-wrap: wrap; gap: 12px; }
.avatar { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 600; font-size: 16px; color: #fff; border: 2px solid var(--paper); box-shadow: var(--shadow-sm); }

/* ---------- Newsletter (dark stage) ---------- */
.newsletter { position: relative; overflow: hidden; background: var(--paper-2); color: var(--ink); border-radius: var(--radius-2xl); padding: clamp(48px,7vw,76px) clamp(28px,5vw,52px); text-align: center; border: 1px solid var(--border); }
.newsletter::before { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 300px at 50% -30%, rgba(255,112,7,0.10), transparent 62%), radial-gradient(560px 280px at 82% 128%, rgba(0,160,165,0.09), transparent 62%); pointer-events: none; }
.newsletter > * { position: relative; }
.newsletter h2 { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.6vw,46px); margin: 0; letter-spacing: -0.025em; }
.newsletter p { color: var(--ink-3); margin: 16px auto 0; max-width: 500px; font-size: 16px; }
.nl-form { margin: 32px auto 0; display: flex; gap: 10px; max-width: 470px; }
.nl-form input { flex: 1; height: 52px; border-radius: 999px; border: 1px solid var(--border-night); background: rgba(244,236,223,0.06); color: var(--on-night); padding: 0 22px; font: inherit; font-size: 14.5px; }
.nl-form input::placeholder { color: var(--on-night-3); }
.nl-form input:focus { outline: none; border-color: var(--ember); }
.nl-note { margin-top: 16px; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.nl-form-light { margin: 0; }
.nl-form-light input { background: var(--paper-2); border: 1px solid var(--border); color: var(--ink); height: 48px; }
.nl-form-light input::placeholder { color: var(--faint); }
.nl-form-light input:focus { border-color: var(--ink); }

/* ---------- CTA box ---------- */
.cta-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-2xl); padding: clamp(32px,4vw,48px); }
.cta-box h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px,3.2vw,42px); letter-spacing: -0.025em; color: var(--ink); margin: 0; line-height: 1.06; }

/* ---------- Page intro ---------- */
.page-intro { position: relative; padding: clamp(72px,9vw,108px) 0 16px; overflow: hidden; }
/* ambient branded glow behind every secondary-page hero (echoes the home .aurora, quieter) */
.page-intro::before { content: ""; position: absolute; inset: -30% -8% auto -8%; height: 440px; z-index: -1; pointer-events: none; filter: blur(72px); opacity: 0.42;
  background:
    radial-gradient(38% 60% at 18% 16%, rgba(255,112,7,0.20), transparent 62%),
    radial-gradient(40% 56% at 84% 12%, rgba(0,160,165,0.18), transparent 64%); }
@media (prefers-reduced-motion: reduce) { .page-intro::before { opacity: 0.34; } }
.page-intro.center { text-align: center; }
.page-intro h1 { font-family: var(--font-display); font-weight: 600; font-size: clamp(42px, 6vw, 80px); line-height: 1.0; letter-spacing: -0.035em; color: var(--ink); margin: 20px 0 0; }
.page-intro h1 .accent { font-style: italic; padding-right: 0.16em; }
.page-intro p { margin-top: 24px; font-size: 19px; line-height: 1.6; color: var(--ink-3); max-width: 820px; }
.page-intro.center p { margin-left: auto; margin-right: auto; }

/* ---------- Signature equation · Agent = Model + Harness (recurring motif) ---------- */
.eq-wrap { margin: 32px 0 8px; text-align: center; }
.eq { display: inline-flex; align-items: flex-start; justify-content: center; gap: clamp(12px, 1.8vw, 22px); flex-wrap: wrap; }
.eq-term { display: flex; flex-direction: column; align-items: center; }
.eq-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; letter-spacing: -0.02em; }
.eq-op { font-family: var(--font-display); font-weight: 500; font-size: clamp(22px, 2.8vw, 34px); line-height: 1; color: var(--ink-3); margin-top: clamp(3px, 0.5vw, 7px); }
.eq-a .eq-name { color: var(--ink); }
.eq-m .eq-name { color: var(--teal-deep); font-style: italic; }
.eq-h .eq-name { color: var(--ember-deep); font-style: italic; }
.eq-sub { margin-top: 9px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .07em; color: var(--faint); white-space: nowrap; }
.eq-note { margin-top: 14px; font-size: 14px; color: var(--ink-3); }
.eq-note b { color: var(--ink-2); font-weight: 600; }

/* ---------- Shared diagram kit (reused across page SVGs) ---------- */
.dgm { overflow-x: auto; margin: 8px 0 0; }
.dgm svg { display: block; width: 100%; height: auto; min-width: 640px; }
.dgm-cap { margin-top: 14px; font-size: 14px; color: var(--faint); font-family: var(--font-mono); letter-spacing: .04em; }
/* theme-color panel tints — 端/edge = 黄 (ember), 云/cloud = 绿 (teal) */
.dgm-solid { fill: var(--card); } .dgm-tint-t { fill: #E4F3F1; } .dgm-tint-e { fill: #FBE9D2; } .dgm-recess { fill: var(--paper-2); }
.dgm-s-solid { fill: none; stroke: var(--border-strong); stroke-width: 1.6; }
.dgm-s-hair { fill: none; stroke: var(--border); stroke-width: 1.2; }
.dgm-s-t { fill: none; stroke: var(--teal); stroke-width: 1.5; }
.dgm-s-e { fill: none; stroke: var(--ember); stroke-width: 1.5; }
.dgm-dash { stroke-dasharray: 7 5; }
.dgm-h { fill: var(--ink); font-family: var(--font-sans); font-weight: 800; font-size: 21px; letter-spacing: -0.01em; }
.dgm-lbl { font-family: var(--font-mono); font-weight: 600; font-size: 13px; letter-spacing: .12em; fill: var(--ink-3); }
.dgm-lbl-t { fill: var(--teal-deep); } .dgm-lbl-e { fill: var(--ember-deep); }
.dgm-txt { fill: var(--ink-2); font-family: var(--font-sans); font-weight: 500; font-size: 15px; }
.dgm-txt-sm { fill: var(--ink-2); font-family: var(--font-sans); font-weight: 500; font-size: 13.5px; }
.dgm-disc { fill: #fff; font-family: var(--font-sans); font-weight: 700; font-size: 15px; }
.dgm-chip { fill: rgba(27,22,17,0.045); }
.dgm-chip-t { fill: rgba(0,160,165,.10); } .dgm-chip-e { fill: rgba(255,112,7,.09); }
.dgm-chip-tx { fill: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: 14px; }
.dgm-cx { fill: var(--faint); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }
.dgm-num { fill: var(--ember); font-family: var(--font-display); font-weight: 600; font-size: 26px; }
.dgm-flow { fill: none; stroke: var(--border-strong); stroke-width: 1.6; }

/* Industry roster status badges */
.ind-card { position: relative; padding: 20px; }
.ind-card .card-kicker { padding-right: 76px; }
.ind-badge { position: absolute; top: 18px; right: 18px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ind-badge.live { background: rgba(255,112,7,0.12); color: var(--ember-deep); }
.ind-badge.wip  { background: rgba(0,160,165,0.13); color: var(--teal-deep); }
.ind-badge.plan { background: var(--paper-3); color: var(--ink-3); }
.ind-badge.open { background: transparent; color: var(--faint); border: 1px dashed var(--border-strong); }

/* Matrix "digital rain" glyphs (云 side of the Neo×Matrix diagram) */
.nm-rain text { font-family: var(--font-mono); font-weight: 500; font-size: 16px; }

/* ---------- Neo × Matrix product-architecture diagram (product page head) ---------- */
.nm-arch { margin: 8px 0 0; overflow-x: auto; }
.nm-arch svg { display: block; width: 100%; height: auto; min-width: 660px; }
.nm-arch .nm-cap { margin-top: 14px; font-size: 14px; color: var(--faint); font-family: var(--font-mono); letter-spacing: .04em; }
.nm-fill-m { fill: #E4F3F1; }              /* 云 · teal/green tint */
.nm-fill-n { fill: #FBE9D2; }              /* 端 · ember/yellow tint */
.nm-fill-bridge { fill: var(--paper); }
.nm-fill-chip-m { fill: rgba(0,160,165,.09); }
.nm-fill-chip-n { fill: rgba(255,112,7,.08); }
.nm-stroke-m { fill: none; stroke: var(--teal); stroke-width: 1.5; stroke-dasharray: 7 5; }   /* dashed = evolving */
.nm-stroke-n { fill: none; stroke: var(--border-strong); stroke-width: 1.6; }                  /* solid = GA */
.nm-stroke-hair { fill: none; stroke: var(--border); stroke-width: 1.2; }
.nm-title { fill: var(--ink); font-family: var(--font-sans); font-weight: 800; font-size: 30px; letter-spacing: -0.01em; }
.nm-side { font-family: var(--font-mono); font-weight: 600; font-size: 14px; letter-spacing: .14em; }
.nm-side-m { fill: var(--teal-deep); }
.nm-side-n { fill: var(--ember-deep); }
.nm-tag { fill: var(--ink-2); font-family: var(--font-sans); font-weight: 500; font-size: 17px; }
.nm-row { fill: var(--ink); font-family: var(--font-sans); font-weight: 600; font-size: 15.5px; }
.nm-row-m { fill: var(--teal-deep); }
.nm-row-n { fill: var(--ember-deep); }
.nm-src { fill: var(--faint); font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .04em; }
.nm-pill-t { font-family: var(--font-mono); font-weight: 600; font-size: 12px; letter-spacing: .1em; }
.nm-pill-m { fill: none; stroke: var(--teal); stroke-width: 1.3; }
.nm-pill-n { fill: none; stroke: var(--ember); stroke-width: 1.3; }
.nm-bridge-t { fill: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 14px; letter-spacing: .12em; }
.nm-bridge-sub { fill: var(--ink-3); font-family: var(--font-sans); font-weight: 500; font-size: 15px; }
.nm-flow { fill: none; stroke: var(--border-strong); stroke-width: 1.6; stroke-dasharray: 6 5; }
.nm-flow-m { stroke: var(--teal); } .nm-flow-n { stroke: var(--ember); }

/* ============================================================
   The Matrix — world-console mock (dark stage)
   ============================================================ */
.mtx-world { border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden;
  background: var(--card); box-shadow: var(--shadow);
  max-width: 100%; margin: 6px 0 24px; }
.mtx-topbar { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: var(--paper-2); border-bottom: 1px solid var(--border); }
.mtx-topbar .win-dot { width: 11px; height: 11px; border-radius: 999px; background: #D8CEC0; }
.mtx-topbar .win-dot.r { background: #E0533B; } .mtx-topbar .win-dot.y { background: #E0A93B; } .mtx-topbar .win-dot.g { background: #4FB477; }
.mtx-topbar .mtx-title { margin-left: 8px; font-family: var(--font-mono); font-size: 11.5px; color: var(--faint); }
.mtx-head { display: flex; align-items: center; gap: 16px; padding: 17px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.mtx-neo { display: flex; align-items: center; gap: 12px; }
.mtx-neo .mtx-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px; color: #fff; background: linear-gradient(140deg, var(--ember), var(--ember-deep)); box-shadow: 0 0 0 1px rgba(255,112,7,0.3), 0 8px 22px rgba(255,112,7,0.22); }
.mtx-neo .mtx-id b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; }
.mtx-neo .mtx-id span { font-size: 11px; color: var(--faint); font-family: var(--font-mono); }
.mtx-scn { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; border: 1px solid var(--border); border-radius: 999px; padding: 3px; }
.mtx-scn span { font-family: var(--font-mono); font-size: 11px; padding: 5px 13px; border-radius: 999px; color: var(--ink-3); transition: all .2s; }
.mtx-scn span.on { background: var(--paper-3); color: var(--ink); }
.mtx-scn span.on.real { color: var(--teal-deep); }
.mtx-feed { padding: 4px 0; }
.mtx-vr { display: flex; align-items: center; gap: 13px; padding: 12px 20px; border-bottom: 1px solid rgba(27,22,17,0.07); }
.mtx-vr:last-child { border-bottom: 0; }
.mtx-vr .mtx-role { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em; color: var(--faint); width: 128px; flex: 0 0 auto; text-transform: uppercase; }
.mtx-vr .mtx-role b { color: var(--ink-2); font-weight: 600; }
.mtx-vr .mtx-what { font-size: 12.5px; color: var(--ink-2); flex: 1; line-height: 1.5; }
.mtx-vr .mtx-what code { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.mtx-vr .mtx-score { font-family: var(--font-mono); font-size: 12px; flex: 0 0 auto; white-space: nowrap; }
.mtx-vr .mtx-score.pass { color: #2E9E63; } .mtx-vr .mtx-score.warn { color: var(--ember-deep); } .mtx-vr .mtx-score.mut { color: var(--faint); }
@media (max-width: 620px) {
  .mtx-vr { flex-wrap: wrap; gap: 5px 13px; }
  .mtx-vr .mtx-role { width: 100%; }
}

/* ============================================================
   Workflow step-flow (observe → operate → publish)
   ============================================================ */
.flowline { display: flex; align-items: stretch; gap: 0; flex-wrap: wrap; margin-top: 8px; }
.flowstep { flex: 1; min-width: 150px; position: relative; padding: 20px 20px 20px 0; }
.flowstep:not(:last-child)::after { content: "→"; position: absolute; right: 6px; top: 24px; color: var(--faint); font-size: 15px; }
.flowstep .fs-n { font-family: var(--font-mono); font-size: 11px; color: var(--ember-deep); font-weight: 600; letter-spacing: 0.04em; }
.flowstep .fs-t { font-family: var(--font-display); font-weight: 600; font-size: 16px; color: var(--ink); margin-top: 8px; letter-spacing: -0.01em; }
.flowstep .fs-d { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 7px; }
.flowstep .fs-tag { display: inline-block; margin-top: 10px; font-family: var(--font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 999px; }
.flowstep .fs-tag.gate { background: var(--ember-tint); color: var(--ember-deep); }
.flowstep .fs-tag.log { background: var(--teal-tint); color: var(--teal-deep); }
@media (max-width: 720px) {
  .flowstep { flex-basis: 100%; padding: 16px 0; border-bottom: 1px solid var(--hairline); }
  .flowstep:not(:last-child)::after { content: "↓"; right: auto; left: 0; top: auto; bottom: -10px; }
}

/* review-management mock: reuse .window vocabulary + a couple of store-ops bits */
.win-review { border: 1px solid var(--night-3); border-radius: 12px; overflow: hidden; }
.win-review .wr-head { display: flex; align-items: center; gap: 8px; padding: 10px 13px; background: var(--night-2); font-size: 12px; color: var(--on-night); }
.win-review .wr-head .stars { color: var(--ember-lo); font-size: 12px; letter-spacing: 1px; }
.win-review .wr-head .wr-meta { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--on-night-3); }
.win-review .wr-body { padding: 11px 13px; font-size: 12.5px; line-height: 1.6; color: var(--on-night-2); }
.win-reply { border: 1px solid var(--night-3); border-radius: 12px; overflow: hidden; }
.win-reply .wr-lbl { padding: 9px 13px; background: var(--night-2); font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--on-night-3); display: flex; align-items: center; gap: 8px; }
.win-reply .wr-lbl .draft { margin-left: auto; color: var(--ember-lo); }
.win-reply .wr-txt { padding: 12px 13px; font-size: 12.5px; line-height: 1.6; color: var(--on-night); }
.win-gate { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--ember-deep); border-radius: 12px; background: rgba(255,112,7,0.07); font-size: 12px; color: var(--on-night); }
.win-gate .g-ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--ember-tint); color: var(--ember-lo); font-size: 12px; flex: 0 0 auto; }
.win-gate .g-cta { margin-left: auto; display: flex; gap: 7px; }
.win-gate .g-cta span { font-family: var(--font-mono); font-size: 10.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--night-3); color: var(--on-night-3); }
.win-gate .g-cta span.ok { background: var(--ember); color: #fff; border-color: var(--ember); }

/* hero product-story (The Matrix / Neo) — sits above the hero interface */
.hero-story { max-width: 940px; margin: clamp(40px, 6vw, 74px) auto 0; text-align: center; }
.hero-story .section-title { font-size: clamp(28px, 3.8vw, 46px); }
.hero-story .section-lead { margin: 20px auto 0; }

/* hero headline: de-emphasize the counter-line so the top half leads */
.hero h1 .h1-sub { font-size: 0.56em; font-weight: 600; color: var(--ink-3); }

/* homepage: tighten the section rhythm a touch (hub reads more purposeful) */
#page-home .section { padding-top: clamp(54px, 6.5vw, 92px); padding-bottom: clamp(54px, 6.5vw, 92px); }

/* product · 整体展示 architecture overview */
.arch-overview .arch { margin-top: 8px; }
.arch-overview .ring { border-radius: 22px; padding: 22px 24px 26px; }
.arch-overview .ring .rh { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.arch-overview .rk { font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; font-weight: 700; }
.arch-overview .rt { font-weight: 650; font-size: 16px; color: var(--ink); }
.arch-overview .rn { margin-left: auto; font-size: 12.5px; color: var(--faint); font-family: var(--font-mono); }
.arch-overview .chips { display: flex; flex-wrap: wrap; gap: 9px; }
.arch-overview .achip { border-radius: 9px; padding: 8px 13px; font-size: 13.5px; border: 1px solid var(--border-strong); background: var(--paper); }
.arch-overview .achip b { font-weight: 640; }
.arch-overview .ring-p { background: var(--paper-2); border: 1px solid var(--border); }
.arch-overview .ring-p .rk { color: var(--teal-deep); }
.arch-overview .ring-x { background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow-sm); margin-top: 16px; }
.arch-overview .ring-x .rk { color: var(--ember-deep); }
.arch-overview .ring-x .achip { background: var(--paper-2); }
.arch-overview .ring-k { background: var(--night); color: var(--on-night); margin-top: 16px; border: 1px solid var(--night-3); }
.arch-overview .ring-k .rk { color: var(--ember-lo); }
.arch-overview .ring-k .rt { color: var(--on-night); }
.arch-overview .ring-k .rn { color: var(--on-night-3); }
.arch-overview .ring-k .achip { background: rgba(244,236,223,.06); border-color: var(--border-night); color: var(--on-night); font-family: var(--font-mono); font-size: 12px; }
.arch-overview .dir { text-align: center; margin-top: 16px; font-family: var(--font-mono); font-size: 12.5px; color: var(--faint); }
.arch-overview .dir b { color: var(--ink-2); }
.arch-overview .pillars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 44px; }
.arch-overview .pil { background: var(--card); border: 1px solid var(--border); border-radius: 16px; padding: 20px 18px; }
.arch-overview .pil .pk { font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: var(--faint); font-weight: 600; }
.arch-overview .pil .pn { font-family: var(--font-display); font-weight: 600; font-size: 21px; color: var(--ink); margin-top: 12px; }
.arch-overview .pil .pd { font-size: 13px; line-height: 1.55; color: var(--ink-3); margin-top: 8px; }
@media (max-width: 900px) { .arch-overview .pillars { grid-template-columns: repeat(2, 1fr); } }


/* ===== src/styles/08-demo-ui.css ===== */
/* Neo product-interface mock — extracted verbatim from the interactive
   media/cowork full-flow user-guide, scoped under .neo-ui so its generic
   class names (.left/.center/.pane/.stage/.chip…) cannot collide with the site. */
.neo-ui{--bg:#f4f3ec;--canvas:#fbfbf9;--sidebar:#f4f2ec;--surface:#fff;--surface-2:#faf9f5;--surface-3:#f0eee6; --ink:#23211d;--muted:#6f6b62;--faint:#9a958a;--line:#e3dfd4;--line-2:#d6d1c4; --accent:#d97757;--accent-hover:#c56646;--accent-soft:rgba(217,119,87,.10); --green:#3f7d58;--green-soft:#e8f2ea;--amber:#9a6a05;--amber-soft:#f7efd9; --blue:#3f6087;--blue-soft:#e9eff5;--red:#a74738;--red-soft:#f4e7e0; --serif:"Source Serif 4","Songti SC",ui-serif,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Noto Sans SC",sans-serif; --mono:"SF Mono",ui-monospace,Menlo,monospace;font:14px/1.58 var(--sans);color:var(--ink);background:var(--bg);}
.neo-ui *{box-sizing:border-box}
.neo-ui button{font:inherit;color:inherit;cursor:default}
.neo-ui .chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface-2);padding:4px 9px;font-size:11px;color:var(--muted);white-space:nowrap}
.neo-ui .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.neo-ui .chip.real::before{background:var(--green)}
.neo-ui .chip.accent{color:var(--accent);border-color:rgba(217,119,87,.28);background:var(--accent-soft)}
.neo-ui .chip.accent::before{background:var(--accent)}
.neo-ui .workbench{display:grid;grid-template-columns:248px minmax(460px,1fr) 390px;min-height:690px;background:var(--canvas);border:1px solid var(--line-2);border-radius:13px;overflow:hidden}
.neo-ui .left{background:var(--sidebar);border-right:1px solid var(--line);display:flex;flex-direction:column;min-width:0}
.neo-ui .matrix{margin:13px 12px 9px;padding:12px;background:var(--surface);border:1px solid var(--line);border-radius:11px}
.neo-ui .matrix__top{display:flex;align-items:center;gap:9px}
.neo-ui .matrix__mark{width:36px;height:36px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;font:600 14px/1 var(--serif)}
.neo-ui .matrix__name{font-weight:650;font-size:13px}
.neo-ui .matrix__role{font:10.5px/1.3 var(--mono);color:var(--muted);margin-top:3px}
.neo-ui .matrix__meta{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}
.neo-ui .matrix__quality{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.neo-ui .matrix__quality b{font:600 17px/1 var(--serif);color:var(--ink);margin-right:5px}
.neo-ui .primary{margin:0 12px 10px;border:1px solid var(--accent);border-radius:8px;background:var(--accent);color:#fff;padding:8px 11px;font-weight:650;cursor:pointer}
.neo-ui .primary:hover{background:var(--accent-hover)}
.neo-ui .navgroup{padding:3px 9px}
.neo-ui .navitem{width:100%;display:flex;align-items:center;gap:9px;border:0;border-radius:8px;background:transparent;padding:8px 10px;text-align:left;color:var(--muted);cursor:pointer}
.neo-ui .navitem:hover{background:rgba(20,20,19,.04)}
.neo-ui .navitem.on{background:var(--accent-soft);color:var(--accent);font-weight:650}
.neo-ui .navicon{width:16px;height:16px;display:grid;place-items:center;font:700 10px/1 var(--mono);border:1px solid currentColor;border-radius:4px}
.neo-ui .recent-title{display:flex;justify-content:space-between;padding:12px 15px 6px;font:600 10px/1 var(--mono);letter-spacing:.06em;color:var(--faint);text-transform:uppercase}
.neo-ui .recents{padding:0 8px 12px}
.neo-ui .recent{display:flex;gap:8px;align-items:flex-start;width:100%;border:0;border-radius:8px;background:transparent;padding:8px;text-align:left;cursor:pointer}
.neo-ui .recent:hover{background:rgba(20,20,19,.04)}
.neo-ui .recent.on{background:var(--accent-soft)}
.neo-ui .recent__dot{width:7px;height:7px;border-radius:50%;background:var(--faint);margin-top:5px;flex:none}
.neo-ui .recent.on .recent__dot{background:var(--accent)}
.neo-ui .recent__main{min-width:0;flex:1}
.neo-ui .recent__name{font-size:11.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.neo-ui .recent__meta{font:10px/1.3 var(--mono);color:var(--faint);margin-top:3px}
.neo-ui .left__foot{margin-top:auto;padding:10px 14px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
.neo-ui .center{display:flex;flex-direction:column;min-width:0;background:var(--canvas)}
.neo-ui .wbhead{height:52px;display:flex;align-items:center;gap:8px;padding:0 15px;border-bottom:1px solid var(--line)}
.neo-ui .wbtitle{font-weight:650;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.neo-ui .spacer{flex:1}
.neo-ui .views{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 9px;font-size:11.5px;cursor:pointer}
.neo-ui .editorial{display:grid;grid-template-columns:auto minmax(300px,1fr) auto;gap:14px;align-items:center;padding:9px 15px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.neo-ui .stage-now{min-width:86px}
.neo-ui .stage-now small{display:block;font:9.5px/1 var(--mono);color:var(--faint);margin-bottom:4px}
.neo-ui .stage-now b{font-size:12px}
.neo-ui .stageflow{display:grid;grid-template-columns:repeat(6,1fr);align-items:start}
.neo-ui .stage{position:relative;text-align:center;color:var(--faint);font-size:9.5px}
.neo-ui .stage::before{content:"";position:absolute;top:5px;left:0;right:0;height:1px;background:var(--line-2)}
.neo-ui .stage:first-child::before{left:50%}
.neo-ui .stage:last-child::before{right:50%}
.neo-ui .stage__dot{position:relative;z-index:1;width:11px;height:11px;border-radius:50%;display:block;margin:0 auto 4px;background:var(--canvas);border:2px solid var(--line-2)}
.neo-ui .stage.done{color:var(--green)}
.neo-ui .stage.done .stage__dot{background:var(--green);border-color:var(--green)}
.neo-ui .stage.active{color:var(--accent);font-weight:700}
.neo-ui .stage.active .stage__dot{background:var(--canvas);border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.neo-ui .product-menu{border:1px solid var(--line);background:var(--surface);border-radius:7px;padding:6px 9px;font-size:11px}
.neo-ui .chat{flex:1;padding:22px clamp(22px,6vw,68px) 14px;display:flex;flex-direction:column;gap:20px}
.neo-ui .guide-kicker{display:flex;align-items:center;gap:8px;color:var(--accent);font:700 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.neo-ui .guide-title{font:600 21px/1.35 var(--serif);margin-top:-8px}
.neo-ui .turn{max-width:740px}
.neo-ui .turn.user{align-self:flex-end;background:var(--surface-3);border-radius:13px 13px 4px 13px;padding:10px 13px;font-size:12.5px;max-width:72%}
.neo-ui .assistant{font-family:var(--serif);font-size:15px;line-height:1.66}
.neo-ui .assistant p{margin:0 0 10px}
.neo-ui .trace{font-family:var(--sans);border-left:2px solid var(--line-2);margin:12px 0 0 2px;padding-left:12px;display:grid;gap:7px}
.neo-ui .trace__row{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted)}
.neo-ui .trace__mark{width:16px;height:16px;border-radius:50%;background:var(--green-soft);color:var(--green);display:grid;place-items:center;font-size:10px;font-weight:700;flex:none}
.neo-ui .result{border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px;margin-top:13px;font-family:var(--sans);font-size:12px}
.neo-ui .result__head{display:flex;align-items:center;gap:8px;font-weight:700;margin-bottom:9px}
.neo-ui .result__head .state{margin-left:auto;font:600 9.5px/1 var(--mono);padding:3px 7px;border-radius:999px;background:var(--green-soft);color:var(--green)}
.neo-ui .result__head .state.wait{background:var(--amber-soft);color:var(--amber)}
.neo-ui .result__head .state.risk{background:var(--red-soft);color:var(--red)}
.neo-ui .result__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:7px}
.neo-ui .result__cell{background:var(--surface-2);border:1px solid var(--line);border-radius:7px;padding:8px}
.neo-ui .result__cell small{display:block;color:var(--faint);font:9.5px/1.2 var(--mono);margin-bottom:4px}
.neo-ui .choice{display:flex;gap:7px;flex-wrap:wrap}
.neo-ui .choice span{border:1px solid var(--line-2);border-radius:7px;background:var(--surface-2);padding:5px 8px}
.neo-ui .score-row{display:grid;grid-template-columns:74px 1fr 28px;align-items:center;gap:8px;margin:7px 0}
.neo-ui .score-bar{height:5px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.neo-ui .score-bar i{display:block;height:100%;background:var(--green);border-radius:99px}
.neo-ui .diff-del{background:var(--red-soft);color:var(--red);text-decoration:line-through;padding:2px 4px}
.neo-ui .diff-add{background:var(--green-soft);color:var(--green);padding:2px 4px}
.neo-ui .composer{margin:0 clamp(20px,5vw,54px) 17px;border:1px solid var(--line-2);border-radius:20px;background:var(--surface);padding:11px 13px}
.neo-ui .composer__placeholder{color:var(--faint);font-size:12px}
.neo-ui .composer__bar{display:flex;align-items:center;gap:6px;margin-top:12px;flex-wrap:wrap}
.neo-ui .composer__btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:5px 8px;font-size:10.5px;color:var(--muted)}
.neo-ui .composer__send{margin-left:auto;width:28px;height:28px;border:0;border-radius:50%;background:var(--accent);color:#fff;display:grid;place-items:center}
.neo-ui .pane{border-left:1px solid var(--line);background:var(--surface);display:flex;flex-direction:column;min-width:0}
.neo-ui .pane__head{height:52px;display:flex;align-items:center;gap:8px;padding:0 14px;border-bottom:1px solid var(--line)}
.neo-ui .pane__dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
.neo-ui .pane__title{font-weight:700;font-size:12.5px}
.neo-ui .pane__id{font:9.5px/1 var(--mono);color:var(--faint)}
.neo-ui .pane__body{padding:16px;overflow:auto}
.neo-ui .pane-section{margin-bottom:17px}
.neo-ui .pane-kicker{font:700 9.5px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
.neo-ui .pane-h{font:600 18px/1.35 var(--serif);margin:0 0 8px}
.neo-ui .pane-p{font-size:12px;color:var(--muted);margin:0 0 10px}
.neo-ui .pane-card{border:1px solid var(--line);border-radius:9px;padding:10px;background:var(--surface-2);margin-bottom:8px}
.neo-ui .pane-card b{font-size:12px}
.neo-ui .pane-card small{display:block;color:var(--muted);margin-top:3px}
.neo-ui .pane-row{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding:8px 0;font-size:11.5px}
.neo-ui .pane-row:last-child{border-bottom:0}
.neo-ui .pane-row .meta{margin-left:auto;color:var(--faint);font:9.5px/1 var(--mono)}
.neo-ui .status{display:inline-flex;align-items:center;gap:5px;font:600 9.5px/1 var(--mono);border-radius:999px;padding:4px 7px;background:var(--surface-3);color:var(--muted)}
.neo-ui .status.good{background:var(--green-soft);color:var(--green)}
.neo-ui .status.warn{background:var(--amber-soft);color:var(--amber)}
.neo-ui .status.bad{background:var(--red-soft);color:var(--red)}
.neo-ui .mono{font-family:var(--mono)}
@media(max-width:1180px){.neo-ui .workbench{grid-template-columns:220px minmax(420px,1fr) 330px}}
@media(max-width:900px){.neo-ui .workbench{grid-template-columns:210px minmax(0,1fr)}.neo-ui .pane{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);min-height:420px}.neo-ui .editorial{grid-template-columns:1fr}.neo-ui .product-menu{display:none}}
@media(max-width:650px){.neo-ui .workbench{display:block}.neo-ui .left{display:none}.neo-ui .center{min-height:700px}.neo-ui .turn.user{max-width:92%}}

/* guards: neutralize site-global leaks into the scoped subtree + 5-stage flow */
.neo-ui .chip{text-transform:none;letter-spacing:normal;font-family:var(--sans);font-weight:400}
.neo-ui .stageflow{grid-template-columns:repeat(5,1fr)}
.neo-ui .workbench{max-width:100%}

/* full-journey nav (from the guide's step tablist) — scoped */
.neo-ui .journey{background:var(--surface);border:1px solid var(--line-2);border-radius:12px;overflow:hidden;margin-bottom:12px}
.neo-ui .journey__head{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.neo-ui .journey__head b{font-size:12px}
.neo-ui .journey__progress{flex:1;height:4px;background:var(--surface-3);border-radius:99px;overflow:hidden}
.neo-ui .journey__progress i{display:block;height:100%;width:27%;background:var(--accent);border-radius:99px}
.neo-ui .journey__count{font:600 10.5px/1 var(--mono);color:var(--muted)}
.neo-ui .steps{display:grid;grid-template-columns:repeat(11,minmax(84px,1fr));overflow-x:auto;padding:8px}
.neo-ui .step{border:0;background:transparent;border-radius:8px;padding:8px 7px;text-align:left;min-width:84px}
.neo-ui .step[aria-selected="true"]{background:var(--accent-soft);color:var(--accent)}
.neo-ui .step__n{display:block;font:700 9.5px/1 var(--mono);color:var(--faint);margin-bottom:5px}
.neo-ui .step[aria-selected="true"] .step__n{color:var(--accent)}
.neo-ui .step__t{display:block;font-size:11.5px;font-weight:650;white-space:nowrap}
.neo-ui .step{cursor:pointer}
.neo-ui .step:hover{background:rgba(20,20,19,.045)}
.neo-ui .journey__progress i{transition:width .22s cubic-bezier(.2,0,0,1)}

/* workbench showcase tabs (product page) */
.wbtabs{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 20px}
.wbtab{font-family:var(--font-mono);font-size:12.5px;font-weight:500;color:var(--ink-3);padding:8px 16px;border-radius:999px;border:1px solid var(--border);background:var(--card);transition:all .18s;cursor:pointer}
.wbtab:hover{border-color:var(--border-strong);color:var(--ink)}
.wbtab.active{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.wbdemo-panel{display:none}
.wbdemo-panel.show{display:block;animation:wbfade .3s var(--ease,ease)}
@keyframes wbfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* mobile: the interactive mock is a self-contained, horizontally-scrollable
   desktop panel — it must never make the page body scroll sideways */
.neo-ui { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.neo-ui > .journey, .neo-ui > .workbench { min-width: 900px; }
@media (max-width: 940px) {
  .neo-ui .workbench { display: grid !important; grid-template-columns: 232px minmax(420px, 1fr) 320px !important; }
  .neo-ui .left, .neo-ui .pane { display: flex !important; }
  .neo-ui .editorial { grid-template-columns: auto minmax(280px, 1fr) auto !important; }
  .neo-ui .steps { overflow-x: visible; }
  .neo-ui .product-menu { display: block !important; }
}
/* wide comparison / metric tables scroll inside their own box on mobile */
.mtable-wrap { overflow-x: auto; }

/* keep the mock a true desktop 3-column panel on mobile (reset guide collapse) */
.neo-ui > .journey, .neo-ui > .workbench { min-width: 972px; }
@media (max-width: 940px) {
  .neo-ui .workbench { min-width: 972px; }
  .neo-ui .pane { grid-column: auto !important; border-left: 1px solid var(--line) !important; border-top: 0 !important; min-height: 0 !important; }
  .neo-ui .center { min-height: 0 !important; }
  .neo-ui .turn.user { max-width: 72% !important; }
}

/* page never scrolls sideways; wide mocks/tables scroll inside their own box.
   overflow-x:clip doesn't create a scroll container, so sticky subnav is safe. */
.page { overflow-x: clip; }
.neo-ui { max-width: 100%; }

/* accessibility: skip link + reduced-motion for the interactive mocks */
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 18px; border-radius: 9px; font-size: 14px; font-weight: 600; box-shadow: var(--shadow); transform: translateY(-160%); transition: transform .18s var(--ease, ease); }
.skip-link:focus { transform: translateY(0); outline: 2px solid var(--ember); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .neo-ui .journey__progress i, .wbdemo-panel.show, .neo-ui .step, .wbtab { transition: none !important; animation: none !important; }
}


/* ===== src/styles/06-channels.css ===== */
/* ============================================================
   Channels (专栏) — writing hub, channel directory, series
   collections, and the card refinements they share.
   Per-channel identity rides on --cc / --cc2 (set inline).
   ============================================================ */

.page-intro.wide h1 { max-width: 14ch; }

/* ---- shared card refinements (tags row + series tag) ---- */
.pc-tags { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.series-tag {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--ink-2);
  padding: 3px 9px; border-radius: 6px; border: 1px solid var(--border);
  background: color-mix(in srgb, var(--cc, var(--ember)) 9%, transparent);
}
.featured-flag {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.12em;
  color: #fff; background: var(--cc, var(--ember)); padding: 3px 9px; border-radius: 999px;
}
.cover.mini { height: 132px; }

/* ============================================================
   Channel directory (hub) — the five 专栏 as bold cards
   ============================================================ */
.channel-dir { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.channel-card {
  position: relative; overflow: hidden; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-xl);
  padding: 34px 34px 28px; display: flex; flex-direction: column;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s;
}
.channel-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(var(--cc, var(--ember)), var(--cc2, var(--teal)));
}
.channel-card::after {
  content: ""; position: absolute; right: -40px; top: -40px; width: 200px; height: 200px; border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, var(--cc, var(--ember)), transparent 70%);
  opacity: 0.07; transition: opacity .35s, transform .5s var(--ease);
}
.channel-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.channel-card:hover::after { opacity: 0.13; transform: scale(1.15); }
.cc-top { display: flex; align-items: center; justify-content: space-between; }
.cc-glyph {
  width: 48px; height: 48px; display: grid; place-items: center; border-radius: 14px;
  font-size: 22px; color: #fff; font-family: var(--font-display);
  background: linear-gradient(135deg, var(--cc, var(--ember)), var(--cc2, var(--teal)));
  box-shadow: 0 8px 22px -8px var(--cc, var(--ember));
}
.cc-count { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.06em; color: var(--faint); }
.cc-name {
  margin-top: 22px; font-family: var(--font-display); font-weight: 600; font-size: 28px;
  letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: baseline; gap: 12px;
}
.cc-name-alt { font-family: var(--font-mono); font-size: 12px; font-weight: 400; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
.cc-tag { margin-top: 12px; font-size: 14.5px; line-height: 1.6; color: var(--ink-3); }
.cc-latest { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--hairline); display: grid; gap: 10px; }
.cc-latest li { position: relative; padding-left: 16px; }
.cc-latest li::before { content: ""; position: absolute; left: 0; top: 9px; width: 5px; height: 5px; border-radius: 999px; background: var(--cc, var(--ember)); }
.cc-latest a { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); display: block; }
.cc-latest a:hover { color: var(--cc, var(--ember-deep)); }
.cc-go { margin-top: 22px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 500; color: var(--cc, var(--ember-deep)); letter-spacing: 0.02em; }

/* ============================================================
   Series collections (合集) — the depth dimension Claude lacks
   ============================================================ */
.series-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.series-collection {
  position: relative; overflow: hidden; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 30px;
  transition: box-shadow .3s var(--ease), transform .3s var(--ease);
}
.series-collection:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.se-head .se-kicker { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc, var(--ember-deep)); font-weight: 600; }
.se-head h3 { margin: 12px 0 0; font-family: var(--font-display); font-weight: 600; font-size: 23px; letter-spacing: -0.02em; color: var(--ink); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.se-count { font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--faint); }
.se-head p { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.se-steps { margin-top: 20px; display: grid; gap: 2px; counter-reset: step; }
.se-step {
  display: flex; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 11px;
  transition: background .18s; position: relative;
}
.se-step:hover { background: linear-gradient(90deg, color-mix(in srgb, var(--cc, var(--ember)) 8%, transparent), transparent); }
.se-n { font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--cc, var(--ember-deep)); flex: 0 0 auto; width: 22px; }
.se-t { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.se-step:hover .se-t { color: var(--ink); }
.se-step.more { color: var(--faint); font-family: var(--font-mono); font-size: 12.5px; padding-left: 48px; }
.se-step.more:hover { color: var(--cc, var(--ember-deep)); }

/* ============================================================
   Channel landing hero
   ============================================================ */
.channel-hero { position: relative; overflow: hidden; padding: clamp(56px,8vw,104px) 0 clamp(40px,5vw,56px);
  background:
    radial-gradient(60% 100% at 0% 0%, color-mix(in srgb, var(--cc, var(--ember)) 12%, transparent), transparent 70%),
    radial-gradient(50% 100% at 100% 0%, color-mix(in srgb, var(--cc2, var(--teal)) 10%, transparent), transparent 70%);
  border-bottom: 1px solid var(--hairline); }
.crumbs { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--faint); display: flex; gap: 9px; align-items: center; }
.crumbs a { color: var(--ink-3); } .crumbs a:hover { color: var(--cc, var(--ember-deep)); }
.ch-hero-row { display: flex; align-items: flex-start; gap: 26px; margin-top: 26px; }
.ch-hero-glyph {
  flex: 0 0 auto; width: 74px; height: 74px; display: grid; place-items: center; border-radius: 20px;
  font-size: 34px; color: #fff; font-family: var(--font-display);
  background: linear-gradient(135deg, var(--cc, var(--ember)), var(--cc2, var(--teal)));
  box-shadow: 0 14px 36px -12px var(--cc, var(--ember));
}
.ch-hero-name { font-family: var(--font-display); font-weight: 600; font-size: clamp(36px,5vw,62px); letter-spacing: -0.03em; color: var(--ink); margin: 0; line-height: 1; }
.ch-hero-alt { font-family: var(--font-mono); font-size: 0.32em; font-weight: 400; letter-spacing: 0.08em; color: var(--faint); text-transform: uppercase; vertical-align: middle; margin-left: 14px; }
.ch-hero-tag { margin: 18px 0 0; font-size: 18px; line-height: 1.6; color: var(--ink-3); max-width: 680px; }
.ch-hero-meta { margin-top: 16px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--cc, var(--ember-deep)); }
.channel-tools button.active { background: var(--cc, var(--ink)); border-color: var(--cc, var(--ink)); }

@media (max-width: 860px) {
  .channel-dir, .series-grid { grid-template-columns: 1fr; }
  .ch-hero-row { flex-direction: column; gap: 18px; }
}


/* ===== src/styles/07-article.css ===== */
/* ============================================================
   Static article pages (markdown deep-dives) — reading
   progress, 3-column reading layout (TOC · prose · series),
   richer prose for code/tables, and in-series navigation.
   Channel accent rides on --cc / --cc2 set on .article-doc.
   ============================================================ */

.article-doc { position: relative; }

/* ---- reading progress bar (top) ---- */
.read-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; background: transparent; pointer-events: none; }
.read-progress > i {
  display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--cc, var(--ember)), var(--cc2, var(--teal)));
}

/* ---- headline block ---- */
.article-top {
  padding: clamp(48px,6vw,84px) 0 clamp(28px,4vw,44px);
  background:
    radial-gradient(60% 120% at 0% 0%, color-mix(in srgb, var(--cc, var(--ember)) 9%, transparent), transparent 70%);
  border-bottom: 1px solid var(--hairline);
}
.article-headline { max-width: 820px; margin-top: 22px; }
.cat-chip.lg { font-size: 12px; gap: 8px; }
.cat-chip.lg::before { width: 8px; height: 8px; }
.series-chip {
  display: inline-flex; align-items: center; margin-left: 14px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--cc, var(--ember-deep));
  padding: 4px 11px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--cc, var(--ember)) 35%, var(--border));
  background: color-mix(in srgb, var(--cc, var(--ember)) 7%, transparent);
}
.article-headline .article-title {
  margin: 22px 0 0; font-family: var(--font-display); font-weight: 600;
  font-size: clamp(32px,4.6vw,56px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink);
}
.article-lede { margin: 22px 0 0; font-family: var(--font-display); font-size: clamp(19px,2.2vw,24px); font-weight: 400; line-height: 1.5; color: var(--ink-2); letter-spacing: -0.01em; max-width: 740px; }
.post-meta.byline { margin-top: 26px; }
.post-meta.byline .author { color: var(--ink-2); }

/* ---- 3-column reading layout ---- */
.article-grid {
  display: grid; grid-template-columns: 216px minmax(0, 1fr) 296px; gap: 48px;
  align-items: start; padding: clamp(40px,5vw,64px) 0 24px;
}
.article-rail, .article-aside { position: sticky; top: calc(var(--topbar-h) + 28px); }

/* table of contents */
.toc { font-size: 13.5px; }
.toc-head { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border); }
.toc li { margin: 0; }
.toc li a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; color: var(--ink-3); line-height: 1.4; transition: color .18s, border-color .18s; }
.toc li.toc-l3 a { padding-left: 28px; font-size: 12.5px; color: var(--faint); }
.toc li a:hover { color: var(--ink); }
.toc li a.active { color: var(--cc, var(--ember-deep)); border-left-color: var(--cc, var(--ember)); font-weight: 500; }

/* ---- prose: richer code + tables on top of editorial base ---- */
.article-doc .prose { font-size: 17.5px; }
.prose pre.code {
  margin: 1.7em 0; border-radius: var(--radius); overflow: auto;
  background: linear-gradient(180deg, #1A140D, #120D08); border: 1px solid var(--night-3);
  padding: 20px 22px; position: relative;
}
.prose pre.code code { font-family: var(--font-mono); font-size: 13px; line-height: 1.72; color: #D6C9B2; background: none; padding: 0; border-radius: 0; }
.prose pre.code[data-lang]:not([data-lang=""])::before {
  content: attr(data-lang); position: absolute; top: 10px; right: 14px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #6c5f4c;
}
.prose .table-wrap { margin: 1.7em 0; overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
.prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-family: var(--font-sans); }
.prose th, .prose td { text-align: left; padding: 12px 16px; border-bottom: 1px solid var(--hairline); line-height: 1.5; vertical-align: top; }
.prose th { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink); background: var(--paper-2); font-weight: 500; }
.prose tbody tr:last-child td { border-bottom: 0; }
.prose tbody tr:hover { background: var(--paper-2); }
.prose td code, .prose th code { font-size: 0.86em; }
.prose hr { border: 0; border-top: 1px solid var(--border); margin: 2.4em 0; }
.prose h2 { scroll-margin-top: calc(var(--topbar-h) + 24px); padding-top: 0.2em; }
.prose h3 { scroll-margin-top: calc(var(--topbar-h) + 24px); }
.prose h2::before { content: ""; display: block; width: 34px; height: 3px; border-radius: 2px; margin-bottom: 0.5em;
  background: linear-gradient(90deg, var(--cc, var(--ember)), var(--cc2, var(--teal))); }

/* ---- series box (right aside) ---- */
.series-box { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; }
.series-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc, var(--ember-deep)); font-weight: 600; }
.series-name { margin-top: 8px; font-family: var(--font-display); font-weight: 600; font-size: 18px; color: var(--ink); letter-spacing: -0.01em; }
.series-name .series-en { font-family: var(--font-mono); font-size: 11px; font-weight: 400; color: var(--faint); display: block; margin-top: 2px; letter-spacing: 0.04em; }
.series-blurb { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-3); }
.series-list { margin-top: 16px; display: grid; gap: 1px; border-top: 1px solid var(--hairline); padding-top: 12px; }
.series-step { display: flex; align-items: flex-start; gap: 11px; padding: 8px 8px; border-radius: 9px; transition: background .16s; }
.series-step:hover { background: var(--paper-2); }
.series-step.on { background: color-mix(in srgb, var(--cc, var(--ember)) 9%, transparent); }
.series-step .step-n { font-family: var(--font-mono); font-size: 11px; font-weight: 700; color: var(--cc, var(--ember-deep)); flex: 0 0 auto; width: 20px; padding-top: 1px; }
.series-step .step-t { font-size: 12.5px; line-height: 1.4; color: var(--ink-2); }
.series-step.on .step-t { color: var(--ink); font-weight: 500; }

/* ---- prev/next within series (below aside) ---- */
.snav { margin-top: 16px; display: grid; gap: 8px; }
.snav-item { display: block; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); transition: border-color .2s, transform .2s; }
.snav-item:hover { border-color: var(--cc, var(--ember)); transform: translateX(2px); }
.snav-item.next:hover { transform: translateX(-2px); }
.snav-item.empty { display: none; }
.snav-dir { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--cc, var(--ember-deep)); }
.snav-title { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.35; color: var(--ink); font-weight: 500; }
.snav-item.next { text-align: right; }

@media (max-width: 1020px) {
  .article-grid { grid-template-columns: minmax(0,1fr); gap: 32px; }
  .article-rail { position: static; }
  .article-rail .toc { display: none; }
  .article-aside { position: static; }
}


/* ===== src/styles/05-responsive.css ===== */
/* ============================================================
   Responsive
   ============================================================ */

@media (max-width: 1080px) {
  .module-head { grid-template-columns: 1fr; gap: 28px; }
  .featured { grid-template-columns: 1fr; }
  .featured .cover { min-height: 240px; }
  .g5 { grid-template-columns: repeat(3, 1fr); }
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px 24px; }
  .win-body { grid-template-columns: 150px 1fr; }
  .win-art { display: none; }
}

@media (max-width: 860px) {
  .nav { position: fixed; inset: var(--topbar-h) 0 auto 0; flex-direction: column; align-items: stretch; gap: 2px;
    background: rgba(250,246,240,0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    padding: 14px 24px 22px; border-bottom: 1px solid var(--border); box-shadow: var(--shadow);
    transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform .3s var(--ease), opacity .3s; }
  .nav.open { transform: none; opacity: 1; pointer-events: auto; }
  .nav .navlink { font-size: 17px; padding: 13px 6px; text-align: left; }
  .nav .navlink.active::after { display: none; }
  .nav-actions { margin-left: 0; margin-top: 10px; justify-content: space-between; }
  .nav-toggle { display: inline-flex; }
  .g5, .g4, .g3, .g2 { grid-template-columns: 1fr; }
  .metrics { grid-template-columns: repeat(2, 1fr); gap: 32px 24px; }
  .hs-layer:nth-child(n) { margin-left: 0; }
  .kring-head { grid-template-columns: 40px 1fr; }
  .kring-head .kdesc { grid-column: 2; }
  .dl-row { grid-template-columns: 52px 1fr; gap: 8px 18px; padding: 14px 20px; }
  .dl-row .dl-rule { grid-column: 2; }
  .dl-sect { padding: 14px 20px 11px; }
  .module { padding: 32px; }
  .nl-form { flex-direction: column; }
  .nl-form input, .nl-form .btn { width: 100%; }
  .win-body { grid-template-columns: 1fr; min-height: 0; }
  .win-side { display: none; }
  .h-layer { grid-template-columns: 64px 1fr; gap: 16px; padding: 16px 18px; }
}

@media (max-width: 560px) {
  .container, .wide, .narrow { width: calc(100vw - 32px); }
  body { overflow-x: hidden; }
  .bootline { max-width: 100%; justify-content: center; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .statement p { font-size: clamp(26px, 8vw, 36px); }
  .newsletter, .cta-box { padding: 32px 22px; }
  .module { padding: 24px; border-radius: var(--radius-xl); }
  .featured-body { padding: 28px 24px; }
  .hero-boot { font-size: 11px; }
}