/* ============================================================
   笔随 · Novel Studio — Landing Page styles
   Design language: paper, ink, serif — quietly literary
   ============================================================ */

:root {
  /* ── Paper palette ─────────────────────────────────────────── */
  --paper:        #F4ECDD;
  --paper-warm:   #EEE3CE;
  --paper-card:   #FBF6EA;
  --paper-deep:   #E5D8BD;
  --paper-veil:   rgba(244, 236, 221, 0.72);

  /* ── Ink palette ───────────────────────────────────────────── */
  --ink:          #1F1A12;
  --ink-2:        #2E2719;
  --ink-3:        #4A3F2A;
  --ink-mute:     #6E5F44;
  --ink-soft:     #9C8B6E;
  --ink-faint:    #BFB199;

  /* ── Sepia / brand ─────────────────────────────────────────── */
  --sepia:        #6F4A2B;
  --sepia-dark:   #4A2C1A;
  --brick:        #B5612C;     /* primary CTA */
  --brick-hover:  #A0521E;
  --brick-soft:   #E8C3A0;

  --sage:         #8FA875;
  --plum:         #B5604B;
  --gilt:         #C39A4A;

  /* ── Borders / shadow ──────────────────────────────────────── */
  --rule:         rgba(74, 44, 26, 0.12);
  --rule-strong:  rgba(74, 44, 26, 0.22);
  --shadow-soft:  0 1px 0 rgba(255,255,255,.7) inset, 0 18px 40px -20px rgba(74,44,26,.32);
  --shadow-card:  0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(74,44,26,.06), 0 12px 32px -16px rgba(74,44,26,.25);
  --shadow-deep:  0 1px 0 rgba(255,255,255,.6) inset, 0 28px 80px -30px rgba(31,26,18,.45), 0 2px 8px rgba(74,44,26,.08);

  /* ── Type ──────────────────────────────────────────────────── */
  --font-zh:      "Noto Serif SC", "Source Han Serif SC", "Songti SC", serif;
  --font-zh-sans: "Noto Sans SC", "PingFang SC", "Hiragino Sans GB", sans-serif;
  --font-en:      "Spectral", "EB Garamond", Georgia, serif;
  --font-en-head: "Cormorant Garamond", "EB Garamond", Georgia, serif;
  --font-mono:    "JetBrains Mono", "DM Mono", "SF Mono", ui-monospace, monospace;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-en), var(--font-zh);
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  overflow-x: clip;
  /* Anchor jumps clear the sticky nav (nav height ≈ 64px). */
  scroll-padding-top: 72px;
  /* Trap rubber-band/momentum within the page so trackpad inertia
     doesn't chain-trigger snap points or pull the parent frame. */
  overscroll-behavior-y: contain;
}

/* Hide scrollbar visually but keep scrolling functional.
   Firefox: scrollbar-width. WebKit/Blink: ::-webkit-scrollbar. */
html { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar { width: 0; height: 0; display: none; }
body::-webkit-scrollbar { width: 0; height: 0; display: none; }
body { font-size: 16px; line-height: 1.6; }
[lang="zh"] body, body[data-lang="zh"] {
  font-family: var(--font-zh), var(--font-en);
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: default; }

/* Paper texture — extremely subtle noise (drawn via SVG mask) */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 80% 60% at 20% 0%, rgba(255, 240, 210, .35), transparent 60%),
    radial-gradient(ellipse 60% 50% at 100% 100%, rgba(110, 70, 30, .06), transparent 60%);
  mix-blend-mode: multiply;
}
body::after {
  content: "";
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  opacity: .35;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' seed='4'/><feColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.30 0 0 0 0 0.16 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 240px 240px;
  mix-blend-mode: multiply;
}

/* The ink-trail canvas sits above paper but below everything */
#ink-trail {
  position: fixed; inset: 0; pointer-events: none;
  z-index: 1;
}

/* All real content sits above */
.page { position: relative; z-index: 2; }

/* ============================================================
   LAYOUT
   ============================================================ */
.shell {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
}
@media (max-width: 760px) { .shell { padding: 0 24px; } }

section { position: relative; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sepia);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px; height: 1px;
  background: currentColor;
  opacity: .5;
}

.h1, .h2, .h3 { margin: 0; font-weight: 600; color: var(--ink); }
.h1 { font-size: clamp(40px, 5.6vw, 76px); line-height: 1.05; letter-spacing: -.01em; }
.h2 { font-size: clamp(28px, 3.4vw, 44px); line-height: 1.18; letter-spacing: -.005em; }
.h3 { font-size: clamp(20px, 2vw, 26px); line-height: 1.3; }

[data-lang="zh"] .h1, [data-lang="zh"] .h2 {
  font-weight: 700;
  letter-spacing: .02em;
}

.kicker {
  font-size: 16px;
  color: var(--ink-mute);
  max-width: 56ch;
  line-height: 1.6;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .01em;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--brick);
  color: #FBF6EA;
  box-shadow:
    inset 0 1px 0 rgba(255, 220, 180, .25),
    0 1px 0 rgba(74, 44, 26, .15),
    0 10px 24px -10px rgba(181, 97, 44, .55);
}
.btn-primary:hover { background: var(--brick-hover); }

.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border-color: var(--rule-strong);
}
.btn-ghost:hover {
  background: rgba(74, 44, 26, .06);
  border-color: var(--ink-3);
}

.btn-link {
  background: transparent;
  color: var(--ink-2);
  padding: 0 4px;
  height: auto;
  border-bottom: 1px solid var(--rule-strong);
  border-radius: 0;
}
.btn-link:hover { color: var(--brick); border-color: var(--brick); }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 50;
  padding: 14px 0;
  background: var(--paper);
  transition: box-shadow .2s ease, border-color .2s ease;
}
.nav.scrolled {
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 32px;
}
.brand {
  display: flex; align-items: center; gap: 12px;
}
.brand-mark {
  width: 36px; height: 36px;
  border-radius: 6px;
  background: var(--sepia-dark);
  display: grid; place-items: center;
  color: #F0E2C7;
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -.02em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 4px 12px -4px rgba(74,44,26,.4);
}
.brand-name {
  font-family: var(--font-zh);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: .04em;
}
.brand-name small {
  display: block;
  font-family: var(--font-en);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-top: 2px;
}

.nav-links {
  display: flex; align-items: center; gap: 4px;
}
.nav-links a {
  padding: 8px 14px;
  font-size: 14px;
  color: var(--ink-3);
  border-radius: 6px;
  transition: background .15s ease, color .15s ease;
}
.nav-links a:hover { background: rgba(74, 44, 26, .06); color: var(--ink); }

.nav-right { display: flex; align-items: center; gap: 14px; }

.lang-toggle {
  display: inline-flex;
  background: rgba(74, 44, 26, .06);
  border-radius: 6px;
  padding: 3px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .1em;
}
.lang-toggle button {
  appearance: none; border: 0; background: transparent;
  padding: 5px 10px;
  border-radius: 4px;
  color: var(--ink-mute);
}
.lang-toggle button.active {
  background: var(--paper-card);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(74,44,26,.12);
}

@media (max-width: 860px) {
  .nav-links { display: none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 56px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr);
  gap: 56px;
  align-items: center;
}
.hero-copy { position: relative; }
.hero-title {
  margin: 0 0 32px;
}
.hero-title .line {
  display: block;
}
.hero-title .line .ink-stroke {
  background: linear-gradient(180deg, var(--ink) 65%, var(--sepia-dark) 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}

.hero-sub {
  font-size: 18px;
  color: var(--ink-mute);
  margin: 0;
  max-width: 38ch;
  line-height: 1.7;
}

.hero-ctas {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.dl-split {
  position: relative;
}
.dl-split .btn-ghost { padding-right: 14px; }
.dl-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 220px;
  background: var(--paper-card);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  padding: 6px;
  box-shadow: var(--shadow-card);
  opacity: 0; transform: translateY(-4px); pointer-events: none;
  transition: opacity .15s ease, transform .15s ease;
}
.dl-split[data-open="true"] .dl-menu {
  opacity: 1; transform: none; pointer-events: auto;
}
.dl-menu a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 12px;
  font-size: 14px;
  border-radius: 6px;
  color: var(--ink-2);
}
.dl-menu a:hover { background: rgba(74, 44, 26, .07); }
.dl-menu a small {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
}

.hero-meta {
  display: flex; align-items: center; gap: 22px;
  margin-top: 36px;
  color: var(--ink-soft);
  font-size: 13px;
}
.hero-meta .dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-faint);
}

/* Hero right — writing stage */
.hero-stage-wrap {
  position: relative;
}
.hero-stage {
  position: relative;
  /* let the shot run wider than the column, pushing toward the page edge */
  margin-right: calc((100vw - min(100vw, 1280px)) / -2 + 24px);
}
.write-stage {
  position: relative;
  aspect-ratio: 16 / 11;
  background: var(--paper-card);
  border-radius: 14px;
  box-shadow: var(--shadow-deep);
  overflow: hidden;
  border: 1px solid var(--rule);
}
.write-stage .traffic {
  position: absolute; top: 14px; left: 14px;
  display: flex; gap: 6px;
}
.write-stage .traffic i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #E5503B; display: block;
}
.write-stage .traffic i:nth-child(2) { background: #E6B73D; }
.write-stage .traffic i:nth-child(3) { background: #5BC25B; }

.write-page {
  position: absolute;
  top: 56px; bottom: 44px;
  left: 8%; right: 8%;
  display: flex; flex-direction: column;
}
.write-page h4 {
  margin: 0 0 22px;
  font-family: var(--font-zh);
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 700;
  color: var(--ink);
}
.write-page p {
  margin: 0;
  font-family: var(--font-zh);
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.95;
  color: var(--ink-2);
  letter-spacing: .04em;
  min-height: 7em;
}
[data-lang="en"] .write-page h4,
[data-lang="en"] .write-page p {
  font-family: var(--font-en);
  letter-spacing: 0;
  line-height: 1.7;
}
.caret {
  display: inline-block;
  width: 2px; height: 1.1em;
  background: var(--ink-2);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1.06s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

.write-foot {
  position: absolute;
  left: 8%; right: 8%; bottom: 14px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .08em;
}
.write-foot .group { display: flex; gap: 18px; }
.write-foot .group b {
  font-weight: 500;
  color: var(--ink-soft);
}

/* Quill SVG overlay */
.quill-overlay {
  position: absolute;
  right: -90px; top: -120px;
  width: 320px; height: 320px;
  pointer-events: none;
  filter: drop-shadow(0 18px 28px rgba(74,44,26,.22));
  z-index: 3;
}
.quill-overlay svg { width: 100%; height: 100%; }
.quill-overlay path,
.quill-overlay polyline,
.quill-overlay line {
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 980px) {
  .quill-overlay { width: 200px; height: 200px; right: -40px; top: -80px; }
}

/* Hero decorations */
.deco-feather {
  position: absolute;
  left: -120px; bottom: -80px;
  width: 320px;
  opacity: .07;
  pointer-events: none;
  transform: rotate(-12deg);
}

/* ============================================================
   PILLARS BELT
   ============================================================ */
.belt {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 38px 0;
  margin: 32px 0 0;
  background:
    linear-gradient(to right, transparent, rgba(255,250,235,.5), transparent);
}
.belt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.belt-item {
  display: flex; align-items: flex-start; gap: 16px;
}
.belt-item .num {
  font-family: var(--font-en-head);
  font-size: 36px;
  color: var(--sepia);
  line-height: 1;
  font-style: italic;
}
.belt-item h4 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink);
}
.belt-item p {
  margin: 0;
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.55;
}
@media (max-width: 760px) { .belt-grid { grid-template-columns: 1fr; gap: 24px; } }

/* ============================================================
   SECTION HEADERS (shared)
   ============================================================ */
.sec-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 32px;
  margin-bottom: 56px;
}
.sec-head .left { max-width: 720px; }
.sec-head .h2 { margin-top: 14px; }
.sec-head p { margin: 16px 0 0; color: var(--ink-mute); font-size: 16px; line-height: 1.6; }

/* ============================================================
   FEATURE GRID  (Modules overview)
   ============================================================ */
.modules {
  padding: 120px 0 32px;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.feature-card {
  grid-column: span 4;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px 26px 0;
  overflow: hidden;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
.feature-card.wide { grid-column: span 8; }
.feature-card.tall { min-height: 420px; }

.feature-card .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sepia);
  margin-bottom: 14px;
}
.feature-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
}
.feature-card p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 44ch;
}
.feature-card .art {
  margin-top: 22px;
  margin-left: -26px; margin-right: -26px;
  margin-bottom: -1px;
}

@media (max-width: 980px) {
  .feature-card, .feature-card.wide { grid-column: span 12; }
}

/* Map atlas card art */
.art-atlas {
  position: relative;
  padding: 18px 26px 26px;
  background:
    linear-gradient(to bottom, transparent, rgba(229,216,189,.5));
}
.atlas-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.atlas-thumb {
  aspect-ratio: 1;
  border-radius: 8px;
  border: 1px solid var(--rule);
  background: var(--paper-warm);
  position: relative;
  overflow: hidden;
}
.atlas-thumb svg { width: 100%; height: 100%; }

/* Character card art */
.art-chars {
  display: flex; gap: 12px;
  padding: 18px 26px 26px;
}
.char-chip {
  flex: 1;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px;
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px;
}
.char-chip .avatar {
  width: 100%; aspect-ratio: 1;
  border-radius: 6px;
  background: linear-gradient(135deg, var(--paper-deep), var(--brick-soft));
  position: relative;
  overflow: hidden;
}
.char-chip .role {
  font-family: var(--font-mono);
  font-size: 9.5px; letter-spacing: .12em;
  color: var(--sepia);
  text-transform: uppercase;
}
.char-chip .name { font-weight: 600; color: var(--ink); font-size: 13px; }

/* Module tabs for screenshot */
.module-shot {
  margin: 24px -26px -1px;
  background: var(--paper);
  border-top: 1px solid var(--rule);
  padding: 20px;
  position: relative;
}

/* ============================================================
   WORKFLOW (写作 → 设定 → 引用)
   ============================================================ */
.workflow {
  padding: 96px 0;
}
.flow {
  display: grid;
  grid-template-columns: 1fr 60px 1fr 60px 1fr;
  gap: 16px;
  align-items: stretch;
}
.flow-step {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 28px;
  min-height: 360px;
  position: relative;
  display: flex; flex-direction: column;
}
.flow-step .step-num {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 56px;
  color: var(--paper-deep);
  line-height: .9;
  position: absolute;
  top: 18px; right: 24px;
}
.flow-step .step-tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sepia);
  margin-bottom: 12px;
}
.flow-step h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
}
.flow-step p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 14px;
  line-height: 1.6;
}
.flow-step .demo {
  margin-top: auto;
  padding-top: 22px;
}
.flow-arrow {
  display: grid; place-items: center;
  color: var(--ink-faint);
}
.flow-arrow svg { width: 60px; height: auto; }
@media (max-width: 980px) {
  .flow { grid-template-columns: 1fr; }
  .flow-arrow {
    padding: 8px 0;
    min-height: 32px;
  }
  .flow-arrow svg { width: 32px; transform: rotate(90deg); }
}

/* ============================================================
   BIG MOCKUP
   ============================================================ */
.mockup {
  padding: 96px 0;
  position: relative;
}
.mockup-frame {
  position: relative;
  background: var(--paper-card);
  border-radius: 16px;
  border: 1px solid var(--rule-strong);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.mockup-frame::before {
  content: "";
  position: absolute; inset: 0; border-radius: 16px;
  border: 1px solid rgba(255,255,255,.6);
  pointer-events: none;
  z-index: 2;
}
.mockup-bar {
  display: flex; align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--paper-warm);
}
.mockup-bar .dots { display: flex; gap: 6px; margin-right: 16px; }
.mockup-bar .dots i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #E5503B; display: block;
}
.mockup-bar .dots i:nth-child(2) { background: #E6B73D; }
.mockup-bar .dots i:nth-child(3) { background: #5BC25B; }
.mockup-bar .crumb {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-soft);
}

/* Mockup legend (below the screenshot) */
.mockup-legend {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 24px;
  padding: 0 4px;
}
.legend-item {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 13px;
  color: var(--ink-mute);
}
.legend-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--sepia);
  letter-spacing: .12em;
  padding-top: 2px;
  flex-shrink: 0;
}
.legend-text { line-height: 1.5; }
@media (max-width: 760px) { .mockup-legend { grid-template-columns: 1fr 1fr; } }

/* ============================================================
   AI AGENT block
   ============================================================ */
.agent {
  padding: 96px 0;
}
.agent-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.agent-chat {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 22px;
  box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 480px;
}
.bubble {
  max-width: 88%;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
}
.bubble.user {
  align-self: flex-end;
  background: var(--sepia-dark);
  color: #F0E2C7;
  border-bottom-right-radius: 4px;
}
.bubble.bot {
  align-self: flex-start;
  background: var(--paper-warm);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  border-bottom-left-radius: 4px;
}
.bubble .ref {
  display: inline-flex;
  align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: rgba(181, 97, 44, .12);
  border: 1px solid rgba(181, 97, 44, .22);
  color: var(--sepia-dark);
  padding: 2px 8px;
  border-radius: 4px;
  margin: 0 2px;
}
.agent-input {
  display: flex; align-items: center; gap: 10px;
  margin-top: auto;
  padding: 10px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink-soft);
  font-size: 13.5px;
}
.agent-input .send {
  margin-left: auto;
  width: 28px; height: 28px;
  border-radius: 6px;
  background: var(--brick);
  display: grid; place-items: center;
  color: #FBF6EA;
}

@media (max-width: 980px) { .agent-grid { grid-template-columns: 1fr; } }

/* ============================================================
   DOWNLOAD / CTA block
   ============================================================ */
.cta-block {
  padding: 120px 0;
  text-align: center;
  position: relative;
}
.cta-block::before, .cta-block::after {
  content: "";
  position: absolute; left: 50%; transform: translateX(-50%);
  width: 80px; height: 1px;
  background: linear-gradient(to right, transparent, var(--sepia), transparent);
}
.cta-block::before { top: 64px; }
.cta-block::after  { bottom: 64px; }
.cta-block h2 { max-width: 22ch; margin: 16px auto 18px; }
.cta-block p {
  max-width: 52ch; margin: 0 auto 36px;
  color: var(--ink-mute); font-size: 16px;
}
.cta-row {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap;
}
.platform-row {
  display: flex; justify-content: center; gap: 36px;
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink-soft);
  text-transform: uppercase;
}
.platform-row span { display: inline-flex; align-items: center; gap: 8px; }

/* ============================================================
   FULLPAGE SCROLL · JS-driven
   CSS scroll-snap is removed — Chrome's mouse-wheel + mandatory
   snap has a long-standing bug where momentum settles between
   sections. fullpage-scroll.js hijacks wheel/touch/keyboard and
   animates with rAF instead. CSS here only declares the layout
   side: each section is at least viewport-tall, and we kill the
   browser's native smooth-scroll so it doesn't fight our rAF.
   ============================================================ */
html[data-fullpage="1"] {
  scroll-behavior: auto;             /* JS controls the animation */
}
html[data-fullpage="1"] body {
  /* Sections themselves carry overflow: hidden; body just needs
     room for window.scrollTo to land on each section's offsetTop. */
  overflow-x: clip;
}

/* ── Release cards (4-up grid under the CTA buttons) ─────────── */
.rel-block {
  margin: 56px auto 0;
  max-width: 880px;
}
.rel-block__head {
  display: flex; align-items: center; gap: 18px;
  margin: 0 auto 22px;
  max-width: 520px;
}
.rel-block__line {
  flex: 1; height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-strong), transparent);
}
.rel-block__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  color: var(--ink-soft);
  text-transform: uppercase;
  white-space: nowrap;
}
.rel-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  text-align: left;
}
.rel-card {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px 22px 18px;
  min-height: 138px;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.rel-card:hover {
  transform: translateY(-2px);
  border-color: var(--rule-strong);
  background: var(--paper-card);
  box-shadow: var(--shadow-card);
}
.rel-card:hover .rel-card__arrow { color: var(--brick); transform: translateY(2px); }
.rel-card__top {
  display: flex; align-items: center; justify-content: space-between;
}
.rel-card__os {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
  font-weight: 600;
}
.rel-glyph {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ink-faint);
  padding: 3px 7px;
  border: 1px solid var(--rule);
  border-radius: 4px;
}
.rel-card__name {
  font-family: var(--font-serif, "Noto Serif SC", serif);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  letter-spacing: .01em;
}
.rel-card__foot {
  margin-top: auto;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: .05em;
}
.rel-card__size { color: var(--ink-mute); }
.rel-card__ext  { color: var(--ink-soft); }
.rel-card__arrow {
  margin-left: auto;
  display: inline-flex;
  color: var(--ink-soft);
  transition: color .18s ease, transform .18s ease;
}
.rel-all {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 28px auto 0;
  padding: 6px 2px;
  font-family: var(--font-serif, "Noto Serif SC", serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  transition: color .18s ease, border-color .18s ease, gap .18s ease;
}
.rel-all:hover { color: var(--brick); border-color: var(--brick); gap: 12px; }

@media (max-width: 720px) {
  .rel-grid { grid-template-columns: 1fr; }
  .rel-card__name { font-size: 19px; }
}

/* ============================================================
   FAQ
   ============================================================ */
.faq {
  padding: 64px 0 96px;
}
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 56px;
}
.faq-item {
  border-bottom: 1px solid var(--rule);
  padding: 22px 0;
  cursor: default;
}
.faq-item summary {
  list-style: none;
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 24px;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--rule-strong);
  display: grid; place-items: center;
  color: var(--ink-mute);
  flex-shrink: 0;
  transition: transform .2s ease, background .2s ease;
}
.faq-item[open] .plus { transform: rotate(45deg); background: var(--paper-warm); }
.faq-item .ans {
  margin-top: 14px;
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.65;
  max-width: 58ch;
}
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; gap: 0; } }

/* ============================================================
   FOOTER
   ============================================================ */
.foot {
  border-top: 1px solid var(--rule);
  padding: 64px 0 32px;
  background: var(--paper-warm);
  position: relative;
}
.foot-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--rule);
}
.foot-col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--sepia);
  margin: 0 0 16px;
}
.foot-col a {
  display: block;
  padding: 6px 0;
  color: var(--ink-3);
  font-size: 14px;
}
.foot-col a:hover { color: var(--brick); }
.foot-col p {
  margin: 12px 0 18px;
  font-size: 13.5px;
  color: var(--ink-mute);
  line-height: 1.55;
  max-width: 36ch;
}
.foot-bot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--ink-soft);
}
@media (max-width: 860px) {
  .foot-top { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TWEAK MODE: feature-heavy vs immersive
   ============================================================ */
[data-mode="feature"] .hero { padding-top: 40px; padding-bottom: 64px; }
[data-mode="feature"] .hero-grid { grid-template-columns: 1fr 1.15fr; gap: 48px; }
[data-mode="feature"] .modules { padding-top: 56px; }
[data-mode="feature"] .belt { display: none; }
[data-mode="feature"] .feature-strip { display: grid; }

[data-mode="immersive"] .modules { padding-top: 140px; }
[data-mode="immersive"] .feature-strip { display: none; }
[data-mode="immersive"] .hero { padding-top: 90px; padding-bottom: 140px; }

/* Feature strip — visible only in feature mode, between hero and belt */
.feature-strip {
  display: none;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
  padding: 32px 0 0;
}
.fstrip-cell {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 16px 14px;
  text-align: center;
}
.fstrip-cell .ico { 
  width: 28px; height: 28px; margin: 0 auto 8px; 
  color: var(--sepia-dark); 
}
.fstrip-cell .label {
  font-size: 12.5px; font-weight: 600; color: var(--ink-2);
}
.fstrip-cell .sub {
  font-size: 11px; color: var(--ink-soft); margin-top: 2px;
  font-family: var(--font-mono); letter-spacing: .06em;
}
@media (max-width: 860px) { .feature-strip { grid-template-columns: repeat(3, 1fr); } }

/* ============================================================
   ICON DEFAULTS
   ============================================================ */
svg.icon { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* ============================================================
   PIC SLOT — universal image placeholder
   Renders <img> if available; falls back to a labeled "plate"
   showing what should be dropped here.
   ============================================================ */
.pic-slot {
  position: relative;
  width: 100%;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  isolation: isolate;
}
.pic-slot[data-loaded="1"] { border-color: var(--rule-strong); }

.pic-slot > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.pic-slot__plate {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(74, 44, 26, 0.045) 0 1px,
      transparent 1px 14px
    ),
    linear-gradient(180deg, var(--paper-warm), var(--paper-deep));
}

.pic-slot__corner {
  position: absolute;
  width: 12px; height: 12px;
  border-color: rgba(74, 44, 26, 0.35);
  border-style: solid;
  border-width: 0;
}
.pic-slot__corner--tl { top: 10px;    left: 10px;    border-top-width: 1px;    border-left-width: 1px; }
.pic-slot__corner--tr { top: 10px;    right: 10px;   border-top-width: 1px;    border-right-width: 1px; }
.pic-slot__corner--bl { bottom: 10px; left: 10px;    border-bottom-width: 1px; border-left-width: 1px; }
.pic-slot__corner--br { bottom: 10px; right: 10px;   border-bottom-width: 1px; border-right-width: 1px; }

.pic-slot__meta {
  text-align: center;
  max-width: 36ch;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pic-slot__tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sepia);
}
.pic-slot__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--brick);
  box-shadow: 0 0 0 3px rgba(181, 97, 44, .15);
}
.pic-slot__label {
  font-family: var(--font-zh);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  margin-top: 2px;
}
[data-lang="en"] .pic-slot__label { font-family: var(--font-en-head); font-weight: 600; }
.pic-slot__hint {
  font-size: 12.5px;
  color: var(--ink-mute);
  line-height: 1.55;
}
.pic-slot__path {
  margin-top: 8px;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  background: rgba(74, 44, 26, .06);
  padding: 4px 10px;
  border-radius: 4px;
}
.pic-slot__path code {
  font-family: inherit;
  color: var(--sepia-dark);
}
.pic-slot__path-arrow { font-size: 13px; line-height: 1; color: var(--brick); }

/* Variant styling */
.pic-slot--mood     .pic-slot__plate { background: linear-gradient(180deg, #4a3f2a 0%, #2a1f12 100%); }
.pic-slot--mood     .pic-slot__corner { border-color: rgba(255, 240, 210, 0.3); }
.pic-slot--mood     .pic-slot__tag    { color: #d9b88a; }
.pic-slot--mood     .pic-slot__label  { color: #f0e2c7; }
.pic-slot--mood     .pic-slot__hint   { color: rgba(240, 226, 199, 0.7); }
.pic-slot--mood     .pic-slot__path   { background: rgba(255, 240, 210, 0.1); color: rgba(240, 226, 199, 0.7); }
.pic-slot--mood     .pic-slot__path code { color: #d9b88a; }

.pic-slot--portrait .pic-slot__plate {
  background:
    radial-gradient(ellipse 70% 50% at 50% 35%, rgba(255, 240, 210, .8), transparent),
    linear-gradient(180deg, var(--paper-card), var(--paper-warm));
}

.pic-slot--desk     .pic-slot__plate {
  background:
    repeating-linear-gradient(135deg, rgba(74,44,26,.06) 0 1px, transparent 1px 18px),
    linear-gradient(180deg, var(--paper-card), var(--paper-warm));
}

/* ============================================================
   HERO SHOT — wraps PicSlot for the hero image, with hint footer
   ============================================================ */
.hero-shot {
  position: relative;
  aspect-ratio: 16/10;
  background: var(--paper-card);
  border-radius: 12px;
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.hero-shot__img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}
.hero-shot__fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
}
.hero-shot__hint {
  position: absolute;
  left: 14px; right: 14px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  background: rgba(31, 26, 18, 0.88);
  color: #f0e2c7;
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  z-index: 4;
}
.hero-shot__hint code { color: var(--brick-soft); font-family: inherit; text-transform: none; letter-spacing: 0; }
.hero-shot__hint small {
  margin-left: auto;
  letter-spacing: 0;
  text-transform: none;
  font-family: var(--font-zh);
  color: rgba(240, 226, 199, .75);
  font-size: 11px;
}

/* ─── HeroProseFallback (a faux writing-app inside the hero shot) ─── */
.hero-fallback {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: var(--paper-card);
}
.hero-fallback__chrome {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 16px;
  background: var(--paper-warm);
  border-bottom: 1px solid var(--rule);
}
.hero-fallback__traffic { display: flex; gap: 6px; }
.hero-fallback__traffic i {
  width: 11px; height: 11px; border-radius: 50%;
  background: #E5503B;
}
.hero-fallback__traffic i:nth-child(2) { background: #E6B73D; }
.hero-fallback__traffic i:nth-child(3) { background: #5BC25B; }
.hero-fallback__crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: .04em;
}
.hero-fallback__page {
  flex: 1;
  padding: 36px 10% 24px;
  display: flex; flex-direction: column;
}
.hero-fallback__page h4 {
  margin: 0 0 22px;
  font-family: var(--font-zh);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .02em;
}
.hero-fallback__page p {
  margin: 0;
  font-family: var(--font-zh);
  font-size: clamp(14px, 1.15vw, 16px);
  line-height: 2.0;
  color: var(--ink-2);
  letter-spacing: .04em;
}
[data-lang="en"] .hero-fallback__page h4,
[data-lang="en"] .hero-fallback__page p {
  font-family: var(--font-en);
  letter-spacing: 0;
  line-height: 1.7;
}
.hero-fallback__foot {
  display: flex; gap: 14px;
  padding: 10px 16px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-faint);
  letter-spacing: .06em;
}

/* ============================================================
   BELT · 三块碑文 — option B (watermark) overrides earlier
   ============================================================ */
.belt {
  border-top: none;
  padding: 24px 0 80px;
  margin: 0;
  background: transparent;       /* unify with hero — no color block */
  position: relative;
}
.belt::before, .belt::after { display: none; }

/* Override the shell width inside the belt so the three steles
   stretch to fill more of the viewport (avoids empty side gutters). */
.belt > .shell.belt-grid {
  max-width: min(1640px, calc(100vw - 64px));
  padding: 0;
}

.belt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;                              /* zero gap; cards separate via inner padding + dividers */
  position: relative;
}

.belt-stele {
  position: relative;
  padding: 14px 36px 18px 36px;
  min-height: 240px;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: none;                        /* clean old border-left */
}
/* Soft vertical divider between cards (skip the first) */
.belt-stele + .belt-stele::before {
  content: "";
  position: absolute;
  left: 0; top: 18%; bottom: 18%;
  width: 1px;
  background: var(--rule-strong);
  opacity: .5;
  z-index: 2;
}

/* The dramatic 壹/贰/叁 watermark sitting behind everything */
.belt-stele__watermark {
  position: absolute;
  right: -32px;
  bottom: -68px;
  font-family: var(--font-zh);
  font-weight: 700;
  font-size: clamp(180px, 22vw, 300px);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--sepia);
  opacity: 0.085;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
[data-lang="en"] .belt-stele__watermark {
  font-family: var(--font-en-head);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(200px, 24vw, 340px);
}

/* Everything else floats on top of the watermark */
.belt-stele > *:not(.belt-stele__watermark) {
  position: relative;
  z-index: 1;
}

.belt-stele__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 18px;
}
.belt-stele__head::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--sepia);
  opacity: .55;
}
.belt-stele__roman {
  font-family: var(--font-en-head);
  font-style: italic;
  font-size: 18px;
  letter-spacing: .14em;
  color: var(--sepia);
}

.belt-stele__title {
  margin: 0;
  font-family: var(--font-zh);
  font-size: 26px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: .04em;
}
[data-lang="en"] .belt-stele__title {
  font-family: var(--font-en-head);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: 0;
}

.belt-stele__rule {
  margin: 14px 0 16px;
  height: 1px;
  width: 36px;
  background: var(--rule-strong);
}

.belt-stele__body {
  margin: 0;
  font-size: 14px;
  color: var(--ink-mute);
  line-height: 1.78;
  max-width: 32ch;
}

@media (max-width: 760px) {
  .belt-grid { grid-template-columns: 1fr; }
  .belt-stele { padding: 18px 24px 14px; min-height: 0; }
  .belt-stele + .belt-stele::before {
    left: 18%; right: 18%; top: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .belt-stele__watermark { right: -10px; bottom: -40px; font-size: 180px; }
}

/* ============================================================
   BENTO MODULES GRID
   ============================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.bento-grid .feature-card {
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.bento-grid .feature-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card);
  border-color: var(--rule-strong);
}
.feature-card__head {
  padding: 28px 26px 18px;
}
.feature-card__head .tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sepia);
  margin-bottom: 14px;
}
.feature-card__head h3 {
  margin: 0 0 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: .02em;
}
[data-lang="zh"] .feature-card__head h3 { font-family: var(--font-zh); }
.feature-card__head p {
  margin: 0;
  color: var(--ink-mute);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 44ch;
}
.feature-card__shot {
  margin: 14px 14px 14px;
  flex: 1;
  display: flex;
}
.feature-card__shot .pic-slot {
  width: 100%;
  border-radius: 10px;
}

/* Bento column spans */
.feature-card--cols-4  { grid-column: span 4; }
.feature-card--cols-6  { grid-column: span 6; }
.feature-card--cols-8  { grid-column: span 8; }
.feature-card--cols-12 { grid-column: span 12; }

.feature-card--wide-row { grid-column: span 12; }
.feature-card--wide-row .feature-card__head { padding-bottom: 0; }
.feature-card--wide-row .feature-card__shot {
  margin-top: 4px;
}

/* Tall card (Atlas + Cast in the top row align in height) */
.feature-card--tall { min-height: 460px; }

@media (max-width: 980px) {
  .feature-card--cols-4,
  .feature-card--cols-6,
  .feature-card--cols-8,
  .feature-card--cols-12,
  .feature-card--wide-row { grid-column: span 12; }
  .feature-card--tall { min-height: 0; }
}

/* ============================================================
   WORKFLOW DEMO ART (new compact mini-mocks)
   ============================================================ */
.wf-demo {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink-2);
}
[data-lang="zh"] .wf-demo { font-family: var(--font-zh); letter-spacing: .04em; line-height: 1.85; }
[data-lang="en"] .wf-demo { font-family: var(--font-en); line-height: 1.6; }

.wf-demo__line { font-size: 13.5px; }
.wf-demo__hi {
  background: rgba(181, 97, 44, .22);
  padding: 0 4px; border-radius: 2px;
}
.wf-demo__caret {
  display: inline-block;
  width: 2px; height: 1em;
  background: var(--ink-2);
  vertical-align: -2px;
  margin-left: 2px;
  animation: blink 1.06s steps(1) infinite;
}
.wf-demo__kbd {
  margin-top: 10px;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--sepia);
  background: rgba(181, 97, 44, .08);
  border: 1px solid rgba(181, 97, 44, .18);
  border-radius: 4px;
  padding: 3px 8px;
  letter-spacing: .04em;
}

.wf-demo__head {
  font-family: var(--font-mono);
  font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sepia);
  margin-bottom: 8px;
}
.wf-demo__title {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
  font-size: 14px;
}
.wf-demo__desc {
  color: var(--ink-mute);
  font-size: 12.5px;
  line-height: 1.55;
}
.wf-demo__tags {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.wf-demo__tag {
  font-family: var(--font-mono);
  font-size: 10.5px;
  padding: 2px 8px;
  background: var(--paper-warm);
  border: 1px solid var(--rule);
  border-radius: 3px;
  color: var(--ink-3);
  letter-spacing: .04em;
}

.wf-demo__chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 7px;
  border-radius: 3px;
  background: rgba(181, 97, 44, .14);
  color: var(--sepia-dark);
  border: 1px solid rgba(181, 97, 44, .22);
  font-family: var(--font-mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.wf-demo__rule {
  border-top: 1px dashed var(--rule-strong);
  margin: 12px 0 8px;
}
.wf-demo__small {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-soft);
  letter-spacing: .06em;
}

/* ============================================================
   Tweak-mode helpers — now only the feature-strip is gone, but
   keep a no-op rule so old CSS doesn't show feature strip
   ============================================================ */
.feature-strip { display: none !important; }

/* ============================================================
   DIVIDERS — decorative section breaks
   ============================================================ */
.divider {
  display: flex; align-items: center; justify-content: center;
  padding: 36px 24px;
  color: var(--sepia);
}
.divider svg { width: 100%; max-width: 360px; height: auto; }

/* A · brush */
.divider--brush svg { max-width: 380px; }

/* B · dots */
.divider-dots__row {
  display: flex; align-items: center; gap: 18px;
  width: 100%; max-width: 460px;
}
.divider-dots__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-strong), transparent);
}
.divider-dots__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--sepia);
  opacity: .55;
}
.divider-dots__row .divider-dots__dot:nth-child(3) {
  width: 5px; height: 5px;
  opacity: .75;
}

/* C · seal */
.divider-seal__row {
  display: flex; align-items: center; gap: 22px;
  width: 100%; max-width: 520px;
}
.divider-seal__line {
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent);
}
.divider-seal__stamp {
  display: block;
  width: 56px;
  height: auto;
  transform: rotate(-2deg);
  filter: drop-shadow(0 1px 0 rgba(74, 44, 26, 0.18));
  user-select: none;
}

/* D · chapter marker */
.divider-chapter__row {
  display: flex; align-items: center; gap: 22px;
  width: 100%; max-width: 640px;
}
.divider-chapter__line {
  flex: 1;
  height: 1px;
  background: var(--rule-strong);
  opacity: .55;
}
.divider-chapter__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--sepia);
  white-space: nowrap;
}

/* E · wave */
.divider--wave svg { max-width: 360px; opacity: .8; }

/* ============================================================
   Mockup-frame override — let the PicSlot fill the frame body
   ============================================================ */
.mockup-frame .pic-slot { border-radius: 0; border: 0; }

/* ============================================================
   SCENE DIVIDER · full-bleed cinematic banner
   ============================================================ */
.scene-divider {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  height: clamp(420px, var(--sd-h, 60vh), 720px);
  overflow: hidden;
  background: #1a140a;
  isolation: isolate;
}
.scene-divider__media {
  position: absolute; inset: 0;
}
.scene-divider__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.95);
}
.scene-divider__placeholder {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px;
  background:
    repeating-linear-gradient(135deg, rgba(255,240,210,.04) 0 1px, transparent 1px 14px),
    linear-gradient(180deg, #2a2014 0%, #14100a 100%);
  color: rgba(240, 226, 199, .8);
}
.scene-divider__placeholder .pic-slot__tag { color: rgba(217, 184, 138, .9); }
.scene-divider__placeholder .pic-slot__path {
  background: rgba(255, 240, 210, .08);
  color: rgba(240, 226, 199, .85);
}
.scene-divider__placeholder .pic-slot__path code { color: var(--brick-soft); }

.scene-divider__veil {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%),
    linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, transparent 60%);
}
.scene-divider__veil[data-side="right"] {
  background:
    linear-gradient(180deg, rgba(0,0,0,.0) 30%, rgba(0,0,0,.55) 100%),
    linear-gradient(270deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 35%, transparent 60%);
}

.scene-divider__cap {
  position: relative;
  z-index: 2;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px 56px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.scene-divider__cap--right {
  align-items: flex-end;
  text-align: right;
}
.scene-divider__chapter {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: rgba(217, 184, 138, 0.92);
  margin-bottom: 18px;
  display: inline-flex; align-items: center; gap: 10px;
}
.scene-divider__chapter::before {
  content: ""; width: 28px; height: 1px;
  background: rgba(217, 184, 138, .6);
}
.scene-divider__cap--right .scene-divider__chapter::before { display: none; }
.scene-divider__cap--right .scene-divider__chapter::after {
  content: ""; width: 28px; height: 1px;
  background: rgba(217, 184, 138, .6);
}
.scene-divider__quote {
  margin: 0;
  font-family: var(--font-zh);
  font-weight: 500;
  font-size: clamp(22px, 2.4vw, 34px);
  line-height: 1.55;
  letter-spacing: .04em;
  color: #f4ead0;
  max-width: 24ch;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.7);
}
[data-lang="en"] .scene-divider__quote {
  font-family: var(--font-en-head);
  font-weight: 500;
  letter-spacing: 0;
  font-style: italic;
  max-width: 30ch;
}

@media (max-width: 760px) {
  .scene-divider { height: clamp(340px, 60vh, 520px); }
  .scene-divider__cap { padding: 0 24px 36px; }
}