/* Spool website — shares the app's design tokens (src/styles/tokens.css)
   so the site and the product read as one object. English-first typography:
   Fraunces for display, Geist for body, generous measure and line-height.
   Scroll narrative + interactive demo styles live in the second half. */

@font-face {
  font-family: 'Geist';
  src: url('fonts/Geist.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Geist Mono';
  src: url('fonts/GeistMono.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Fraunces';
  src: url('fonts/Fraunces.ttf') format('truetype-variations');
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --paper:       #faf7f0;
  --paper-2:     #f3eee2;
  --paper-edge:  #ebe4d2;
  --ink:         #1c1a16;
  --ink-2:       #4a463d;
  --muted:       #8c8576;
  --line:        #e6dfcc;
  --line-strong: #d6cdb3;
  --accent:      #b45309;
  --accent-2:    #92400e;
  --accent-soft: #fef3c7;
  --highlight:   #fbbf24;
  --ok:          #6b7c5a;

  --font-ui:    'Geist', -apple-system, 'PingFang SC', sans-serif;
  --font-serif: 'Fraunces', 'Songti SC', serif;
  --font-mono:  'Geist Mono', ui-monospace, monospace;

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --shadow-card: 0 4px 12px -6px rgba(120, 80, 20, 0.15);
  --shadow-deep: 0 24px 60px -24px rgba(60, 40, 10, 0.35);
  --shadow-pop:  0 12px 40px -12px rgba(60, 40, 10, 0.3);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background:
    radial-gradient(circle at 20% 0%, rgba(180, 83, 9, 0.05), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(180, 83, 9, 0.03), transparent 35%),
    var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px; }

.wrap { max-width: 72rem; margin: 0 auto; padding: 0 1.5rem; }
.measure { max-width: 44rem; }

/* ---------- reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 700ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 700ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal.in-view { opacity: 1; transform: none; }
/* page chrome gets its own stacking context under the margin thread (z 3)
   and the nav (z 50) */
main, .nav-shell, footer { position: relative; z-index: 2; }
.reveal-stagger > * {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 600ms cubic-bezier(0.2, 0.6, 0.2, 1), transform 600ms cubic-bezier(0.2, 0.6, 0.2, 1);
}
.reveal-stagger.in-view > * { opacity: 1; transform: none; }
.reveal-stagger.in-view > *:nth-child(2) { transition-delay: 120ms; }
.reveal-stagger.in-view > *:nth-child(3) { transition-delay: 240ms; }
.reveal-stagger.in-view > *:nth-child(4) { transition-delay: 360ms; }

/* ---- the thread in the margins (built by main.js) ----
   A spool in each side margin pays its thread out down the page as the reader
   scrolls, and winds it back in on the way up. The two sides sit at different
   heights, sizes and rhythms on purpose, and each spool visibly empties: the
   wound band (the amber ring) thins away until only the bare spokes remain.
   Purely decorative: it lives in space the layout never uses, and only appears
   once the margins are wide enough that it can't crowd the text. */
.margin-thread {
  position: fixed;
  top: 0;
  width: 60px;
  height: 100vh;
  /* above the sections (their full-bleed tinted backgrounds would otherwise
     swallow the spools as they scroll past) but below the nav; horizontally
     it never overlaps content — only the empty margin */
  z-index: 3;
  pointer-events: none;
  display: none;
}
/* centred inside its own margin: margin width is (100vw - content)/2, so its
   midpoint sits at a quarter of the leftover, less half this element */
.margin-thread.left { left: calc((100vw - 72rem) / 4 - 30px); }
.margin-thread.right { right: calc((100vw - 72rem) / 4 - 30px); }
@media (min-width: 1240px) { .margin-thread { display: block; } }

/* the spool itself — size and position are per-side, set inline by main.js.
   Deliberately minimal: one rim, the amber band of wound thread (it thins as
   the page is read), the paying-out tail, a hub. Clicking a spool pulls more
   thread — the page glides down about one screen — so it alone takes clicks
   inside the otherwise pointer-transparent margin. */
.mt-spool { position: absolute; overflow: visible; pointer-events: auto; cursor: pointer; }
.mt-spool .mt-flange { fill: none; stroke: var(--line-strong); stroke-width: 1.4; }
.mt-spool .mt-wound { fill: none; stroke: var(--accent); opacity: 0.4; transition: opacity 150ms ease; }
.mt-spool:hover .mt-wound { opacity: 0.55; }
.mt-spool .mt-hub { fill: var(--accent); opacity: 0.8; }
.mt-spool .mt-tail { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; opacity: 0.8; }

.mt-curve {
  position: absolute;
  left: 0;
  width: 60px;
  overflow: visible;
}
.mt-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.42;
  /* dasharray/offset are set by main.js in the path's own user units */
}
/* reading-progress thread: pulled out across the top as you read */
.thread-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  z-index: 60;
  pointer-events: none;
}
.thread-progress .tp-line {
  height: 2px;
  margin-top: 1px;
  background: linear-gradient(90deg, var(--accent-2), var(--accent));
  transform-origin: left;
  transform: scaleX(0);
}
.thread-progress .tp-tip {
  position: absolute;
  top: -2px;
  left: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 2px rgba(180, 83, 9, 0.18);
  transform: translateX(-50%);
}

/* hero thread: draws itself once, pulling the eye from the mark to the page */
.hero-thread { display: block; width: 64px; height: 88px; margin: -0.6rem auto 0; overflow: visible; }
.hero-thread path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-dasharray: 170;
  stroke-dashoffset: 170;
  animation: threadDraw 1.3s 500ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
@keyframes threadDraw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .thread-progress, .margin-thread { display: none; }
  .hero-thread path { animation: none; stroke-dashoffset: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-ring, .hero img.mark { animation: none !important; }
}

/* ---------- Chinese-mode typography ----------
   Applied when the language toggle sets <html lang="zh-CN">. The font system
   itself stays (Fraunces→宋体 display, Geist→苹方 body — the standard
   serif-title / sans-body pairing); what changes is what CJK glyphs actually
   need: no fake italics anywhere (CJK has no italic tradition — obliquing
   just breaks the strokes), zero tracking on display sizes (the Latin
   negative tracking makes square glyphs collide), and roomier line-heights.
   Punctuation in the zh copy itself is fullwidth (,→，etc.), normalised at
   the source in i18n.js / demo.js. */
html[lang="zh-CN"] body { line-height: 1.8; }
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3 { letter-spacing: 0; }
html[lang="zh-CN"] .hero h1 { line-height: 1.3; }
html[lang="zh-CN"] h2 { line-height: 1.42; }
html[lang="zh-CN"] .problem { letter-spacing: 0; line-height: 1.65; }
html[lang="zh-CN"] em,
html[lang="zh-CN"] blockquote,
html[lang="zh-CN"] .block-card .note,
html[lang="zh-CN"] .ab-line.muted-line { font-style: normal; }

/* ---------- nav ---------- */
.nav-shell {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(250, 247, 240, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms ease;
}
.nav-shell.scrolled { border-bottom-color: var(--line); }
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 0;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ink);
}
.nav-brand:hover { text-decoration: none; }
.nav-brand img { width: 28px; height: 28px; }
/* 思簿 marks are CJK in every language — never slanted (CJK has no italics) */
.nav-brand .zh { font-weight: 400; color: var(--muted); font-size: 1.05rem; }
.nav-links { display: flex; gap: 1.4rem; align-items: center; font-size: 0.95rem; }
.nav-links a { color: var(--ink-2); }
.nav-links a:hover { color: var(--accent); text-decoration: none; }
.nav-links .nav-cta {
  background: var(--accent);
  color: var(--paper);
  padding: 0.35rem 0.95rem;
  border-radius: var(--r-pill);
  font-weight: 550;
}
.nav-links .nav-cta:hover { background: var(--accent-2); color: var(--paper); }
.lang-toggle {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.85rem;
  background: none;
  color: var(--ink-2);
  cursor: pointer;
}
.lang-toggle:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 640px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- hero ---------- */
.hero {
  padding: 5rem 0 3.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.hero-mark-wrap { position: relative; display: inline-block; margin-bottom: 2rem; }
.hero img.mark { width: 104px; height: 104px; position: relative; z-index: 1; animation: heroFloat 7s ease-in-out infinite; }
@keyframes heroFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
.hero-ring {
  position: absolute;
  inset: -26px;
  border-radius: 50%;
  border: 1.5px dashed var(--line-strong);
  animation: ringSpin 40s linear infinite;
}
@keyframes ringSpin { to { transform: rotate(360deg); } }
.hero h1 {
  font-family: var(--font-serif);
  font-size: clamp(2.6rem, 6.5vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.018em;
  margin: 0 0 1.1rem;
}
.hero h1 .zh { font-weight: 400; color: var(--muted); font-size: 0.55em; vertical-align: 0.15em; margin-left: 0.35em; }
.hero .tagline {
  font-size: clamp(1.2rem, 2.6vw, 1.45rem);
  color: var(--ink-2);
  margin: 0 auto 1rem;
  max-width: 36rem;
  font-family: var(--font-serif);
  font-weight: 400;
}
.hero .sub { color: var(--ink-2); margin: 0 auto 2.4rem; max-width: 42rem; }
.cta-row { display: flex; gap: 0.9rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1rem; }
.btn {
  display: inline-block;
  padding: 0.72rem 1.6rem;
  border-radius: var(--r-pill);
  font-weight: 550;
  font-size: 1rem;
  transition: transform 130ms ease, box-shadow 130ms ease, background 130ms ease;
  cursor: pointer;
  border: none;
  font-family: var(--font-ui);
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--accent); color: var(--paper); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: var(--accent-2); color: var(--paper); box-shadow: var(--shadow-pop); }
.btn-ghost { color: var(--accent); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.4); }
.hero .fineprint { font-size: 0.85rem; color: var(--muted); }

/* ---------- sections ---------- */
section { padding: 4rem 0; }
section.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
h2 {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 4.2vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.22;
  margin: 0 0 0.8rem;
}
h3 { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem; }
.kicker {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.6rem;
}
p { margin: 0 0 1rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
.center .measure { margin-left: auto; margin-right: auto; }

/* problem statement */
.problem {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 3.6vw, 2.1rem);
  font-weight: 450;
  line-height: 1.4;
  letter-spacing: -0.008em;
  color: var(--ink);
  max-width: 50rem;
  margin: 0 auto;
}
.problem em { color: var(--accent); font-style: italic; }

/* ---------- loop rows ---------- */
.loop-row {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 3rem;
  align-items: center;
  padding: 2.2rem 0;
}
.loop-row.flip .loop-copy { order: 2; }
.loop-row .n {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--accent);
  letter-spacing: 0.14em;
  margin-bottom: 0.4rem;
}
.loop-row h3 { font-size: 1.55rem; }
.loop-row p { color: var(--ink-2); font-size: 1rem; margin-bottom: 0; }
@media (max-width: 800px) {
  .loop-row, .loop-row.flip .loop-copy { display: block; order: initial; }
  .loop-row .loop-visual { margin-top: 1.4rem; }
}

/* stylized mini-mock visuals for the loop rows */
.mock {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-card);
  padding: 1.1rem 1.25rem;
  font-size: 0.85rem;
}
.mock .mock-titlebar { display: flex; gap: 5px; margin-bottom: 0.8rem; }
.mock .mock-titlebar i { width: 9px; height: 9px; border-radius: 50%; background: var(--line-strong); }
.mock-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--accent-soft);
  color: var(--accent-2);
  border-radius: var(--r-pill);
  padding: 0.28rem 0.8rem;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}

/* ---------- feature cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; margin-top: 2rem; }
.card {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 1.7rem;
  box-shadow: var(--shadow-card);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-pop); }
.card p { font-size: 0.96rem; color: var(--ink-2); margin-bottom: 0; }
.kbd {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  background: var(--accent-soft);
  color: var(--accent-2);
  border-radius: 5px;
  padding: 0.1rem 0.45rem;
}

/* ---------- screenshots ---------- */
.shot {
  border-radius: var(--r-lg);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-deep);
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}
.shot-caption { text-align: center; font-size: 0.85rem; color: var(--muted); margin-top: 0.9rem; }
/* 01 · SAVE — the real page (selection and all), with the real toast floating
   over its corner so it still reads as the popup it is */
.capture-scene { position: relative; margin: 0.4rem 0 0; }
.capture-scene .capture-page { border-radius: var(--r-lg); }
.capture-toast {
  position: absolute;
  top: -1.3rem;
  right: -1rem;
  width: min(56%, 21rem);
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-pop);
}
.capture-chip { position: absolute; left: 0.8rem; bottom: 0.8rem; box-shadow: var(--shadow-card); }
.capture-scene + .shot-caption { text-align: left; }
/* 03 · PASTE — the real Pack dialog, portrait, kept at readable width */
.pack-shot { max-width: 23rem; }
.pack-shot + .shot-caption { max-width: 23rem; margin-left: auto; margin-right: auto; }

.shot-group { margin-top: 2rem; }
.shot-group .shot-caption + .shot { margin-top: 1.6rem; }
.shot-strip { max-width: 60rem; }
.shot-note { font-size: 0.82rem; margin-top: 1.6rem; }
.shot-tabs { display: flex; gap: 0.5rem; justify-content: center; margin-bottom: 1.4rem; flex-wrap: wrap; }
.shot-tab {
  font-family: var(--font-ui);
  font-size: 0.9rem;
  padding: 0.4rem 1.1rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}
.shot-tab[aria-selected="true"] { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.shot-panel[hidden] { display: none; }
/* MCP screenshots read fine narrower than the full wrap — don't fill the screen */
#mcp .shot { max-width: 52rem; }

/* prev/next arrows on tabbed screenshot groups that ask for them */
.shot-group[data-arrows] { position: relative; }
.shot-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: 1.4rem;
  line-height: 1;
  padding: 0 0 0.2rem;
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: color 130ms ease, border-color 130ms ease, background 130ms ease;
}
.shot-arrow:hover { color: var(--accent); border-color: var(--accent); background: #fff; }
.shot-arrow.prev { left: max(0.3rem, calc(50% - 26rem - 3.4rem)); }
.shot-arrow.next { right: max(0.3rem, calc(50% - 26rem - 3.4rem)); }

/* ---------- privacy ---------- */
.privacy-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem 2rem; margin: 1.75rem 0; padding: 0; list-style: none; }
.privacy-points li { padding-left: 1.4rem; position: relative; color: var(--ink-2); font-size: 0.97rem; }
.privacy-points li::before { content: '●'; position: absolute; left: 0; top: 0.1em; color: var(--accent); font-size: 0.7em; }

/* ---------- brand moment / cta band ---------- */
.brand-moment { text-align: center; }
.brand-moment video { width: min(320px, 70vw); border-radius: var(--r-lg); box-shadow: var(--shadow-card); }
.cta-band { text-align: center; padding: 5rem 0; }
.cta-band h2 { font-size: clamp(1.9rem, 4.5vw, 2.6rem); }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 2.25rem 0 3rem; font-size: 0.9rem; color: var(--muted); }
footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
footer a { color: var(--ink-2); }

/* =====================================================================
   INTERACTIVE DEMO
   A scripted simulation of the capture → pack → re-brief → MCP loop.
   No network, no AI — all data below is designed for demonstration.
   ===================================================================== */

.demo-shell { max-width: 66rem; margin: 0 auto; }
.demo-frame {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-deep);
  overflow: hidden;
}
.demo-ribbon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.55rem 1.1rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.06em;
}
.demo-ribbon .reset-link { color: var(--muted); text-decoration: underline; cursor: pointer; background: none; border: none; font: inherit; padding: 0; }
.demo-ribbon .reset-link:hover { color: var(--accent); }

/* progress rail */
.demo-rail { display: flex; gap: 0.4rem; padding: 0.9rem 1.1rem 0; flex-wrap: wrap; }
.rail-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  font-family: var(--font-mono);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 0.22rem 0.75rem;
  background: #fff;
}
.rail-step.active { border-color: var(--accent); color: var(--accent-2); background: var(--accent-soft); }
.rail-step.done { color: var(--ok); border-color: var(--ok); }
.rail-step .tick { display: none; }
.rail-step.done .tick { display: inline; }

/* stage — right (mini-Spool with sidebar) gets the wider column */
.demo-stage {
  display: grid;
  grid-template-columns: 0.85fr 1.3fr;
  gap: 0;
  min-height: 430px;
}
@media (max-width: 800px) { .demo-stage { grid-template-columns: 1fr; } }

/* guide banner: the single "what to do now" instruction, updated per action.
   Quiet on purpose — the amber highlight belongs to the sentence you copy,
   not to this banner. */
.demo-guide {
  margin: 0.8rem 1.1rem 0.2rem;
  padding: 0.65rem 1rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink);
  min-height: 2.6em;
}
.demo-guide b { color: var(--accent-2); }
.demo-guide strong { color: var(--accent-2); }

/* pulsing cue on the next expected click target (one at a time) */
.cue { animation: cueRing 1.4s ease-out infinite; }
@keyframes cueRing {
  0% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.45); }
  75% { box-shadow: 0 0 0 9px rgba(180, 83, 9, 0); }
  100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cue { animation: none; outline: 2px solid var(--accent); outline-offset: 2px; }
}

/* left: "your screen" */
.demo-left { border-right: 1px solid var(--line); padding: 1.2rem; display: flex; flex-direction: column; gap: 0.9rem; background: #fff; }
@media (max-width: 800px) { .demo-left { border-right: none; border-bottom: 1px solid var(--line); } }

.fake-window { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; flex: 1; display: flex; flex-direction: column; }
.fake-window .fw-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.8rem;
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: 0.78rem;
  color: var(--muted);
}
.fake-window .fw-bar .dots { display: flex; gap: 4px; }
.fake-window .fw-bar .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--line-strong); }
.fake-window .fw-body { padding: 1rem; font-size: 0.88rem; line-height: 1.6; color: var(--ink-2); overflow-y: auto; flex: 1; }
.fake-window .fw-body h4 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--ink); font-family: var(--font-ui); }

.quote-target { background: var(--selection, #fef9c3); border-radius: 3px; padding: 0.05rem 0.2rem; position: relative; }
.copy-btn {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.82rem;
  padding: 0.35rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--accent);
  color: var(--accent);
  background: #fff;
  cursor: pointer;
  transition: background 120ms ease;
}
.copy-btn:hover { background: var(--accent-soft); }
.copy-btn.copied { background: var(--accent); color: #fff; }
.copy-btn:disabled { opacity: 0.45; cursor: default; }

.keycap-row { display: flex; align-items: center; gap: 0.7rem; justify-content: center; padding: 0.4rem 0; }
.keycap {
  font-family: var(--font-mono);
  font-size: 1.15rem;
  padding: 0.5rem 1.05rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  border-bottom-width: 3px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
  user-select: none;
  transition: transform 80ms ease, background 80ms ease;
}
.keycap:active, .keycap.pressed { transform: translateY(2px); border-bottom-width: 1px; background: var(--accent-soft); }
.keycap-hint { font-size: 0.8rem; color: var(--muted); }

/* AI chat bubbles (source #2 and re-brief scene) */
.chat { display: flex; flex-direction: column; gap: 0.7rem; }
.bubble { max-width: 92%; border-radius: var(--r-lg); padding: 0.65rem 0.9rem; font-size: 0.85rem; line-height: 1.55; }
.bubble.user { align-self: flex-end; background: var(--accent-soft); color: var(--ink); border-bottom-right-radius: 4px; }
.bubble.ai { align-self: flex-start; background: var(--paper-2); border: 1px solid var(--line); border-bottom-left-radius: 4px; color: var(--ink-2); }
.bubble.pasted { font-family: var(--font-mono); font-size: 0.78rem; color: var(--accent-2); }
.typing-dots::after { content: '···'; letter-spacing: 0.15em; animation: pulseDim 1.1s ease-in-out infinite; }
@keyframes pulseDim { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* tool-call chip (Claude-Desktop-style, used in the demo's MCP act) */
.tool-chip {
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 0.35rem 0.7rem;
  max-width: 96%;
}
.tool-chip .tool { color: var(--accent-2); }
.tool-chip .ret { color: var(--muted); }
.tool-chip .ok { color: var(--ok); }

/* story-page zh banner */
.zh-note {
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-md);
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  margin: 1.5rem 0 0;
}

/* structured AI reply: each point tagged with the fragment it came from */
.ai-brief { display: flex; flex-direction: column; gap: 0.45rem; }
.ai-brief > * { opacity: 0; transform: translateY(6px); transition: opacity 400ms ease, transform 400ms ease; }
.ai-brief > .on { opacity: 1; transform: none; }
.ab-line { font-size: 0.83rem; }
.ab-line.muted-line { color: var(--muted); font-style: italic; }
.ab-item {
  display: flex;
  gap: 0.55rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.5rem 0.65rem;
  font-size: 0.8rem;
  line-height: 1.5;
}
.ab-tag {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: var(--r-pill);
  padding: 0.14rem 0.55rem;
  white-space: nowrap;
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.ab-tag.you { background: var(--accent-soft); color: var(--accent-2); }
.ab-tag.ai { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line-strong); }
.ab-tag.ref { background: rgba(107, 124, 90, 0.14); color: var(--ok); }
@media (prefers-reduced-motion: reduce) { .ai-brief > * { transition: none; } }

/* right: mini-Spool */
.demo-right { background: var(--paper); display: flex; flex-direction: column; position: relative; }
.mini-body { display: flex; flex: 1; min-height: 0; }
.mini-side {
  width: 128px;
  flex-shrink: 0;
  border-right: 1px solid var(--line);
  background: var(--paper-2);
  padding: 0.65rem 0.45rem;
  overflow: hidden;
}
.mini-side .ms-label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0.45rem 0.5rem 0.15rem;
}
.mini-side .ms-item {
  font-size: 0.74rem;
  color: var(--ink-2);
  padding: 0.28rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-side .ms-item.active { background: #fff; color: var(--ink); font-weight: 550; }
.mini-side .ms-cap { display: block; font-family: var(--font-mono); font-size: 0.6rem; color: var(--accent-2); }
.mini-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@media (max-width: 560px) { .mini-side { display: none; } }
.mini-spool-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.mini-spool-bar .title { font-family: var(--font-serif); font-weight: 600; font-size: 0.95rem; }
.mini-spool-bar .title .zh { font-weight: 400; color: var(--muted); font-size: 0.85em; margin-left: 0.3em; }
.pack-btn {
  font-family: var(--font-ui);
  font-size: 0.83rem;
  font-weight: 550;
  padding: 0.3rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: all 150ms ease;
}
.pack-btn.armed {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-2);
  animation: packPulse 1.6s ease-in-out infinite;
}
@keyframes packPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(180, 83, 9, 0.25); }
  50% { box-shadow: 0 0 0 7px rgba(180, 83, 9, 0); }
}
.thread-meta { padding: 0.7rem 1rem 0.3rem; }
.thread-meta .tname { font-family: var(--font-serif); font-weight: 600; font-size: 1.05rem; }
.thread-meta .tsub { font-size: 0.75rem; color: var(--muted); }

.feed { flex: 1; overflow-y: auto; padding: 0.4rem 1rem 1rem; display: flex; flex-direction: column; gap: 0.65rem; min-height: 200px; max-height: 380px; }
.block-card {
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0.2rem 0.65rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--ink);
  animation: blockIn 480ms cubic-bezier(0.2, 0.7, 0.3, 1.05) both;
}
@keyframes blockIn {
  0% { opacity: 0; transform: translateY(14px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}
.block-card .bmeta { font-family: var(--font-mono); font-size: 0.7rem; color: var(--muted); margin-bottom: 0.25rem; display: flex; gap: 0.5rem; align-items: center; }
.block-card .bmeta .src { color: var(--accent-2); }
.block-card .bmeta .src.mcp { background: var(--accent-soft); border-radius: var(--r-pill); padding: 0.05rem 0.5rem; }
.block-card .note { font-style: italic; color: var(--ink-2); border-left: 2px solid var(--line-strong); padding-left: 0.6rem; margin-top: 0.4rem; font-size: 0.82rem; }
.feed-empty { color: var(--muted); font-size: 0.85rem; text-align: center; margin: auto; }

/* composer (capture #3: your own words) */
.composer { border-top: 1px solid var(--line); padding: 0.7rem 1rem; display: flex; gap: 0.6rem; }
.composer input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  padding: 0.5rem 0.8rem;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: #fff;
  color: var(--ink);
}
.composer input:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }
.composer button {
  font-family: var(--font-ui); font-size: 0.83rem; padding: 0.4rem 1rem;
  border-radius: var(--r-md); border: none; background: var(--accent); color: #fff; cursor: pointer;
}

/* capture overlay chip */
.overlay-chip {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: var(--ink);
  color: var(--paper);
  font-size: 0.8rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-toast, 0 8px 24px -8px rgba(60, 40, 10, 0.25));
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 220ms ease, transform 220ms ease;
}
.overlay-chip.show { opacity: 1; transform: none; }
.overlay-chip .src { color: var(--highlight); font-family: var(--font-mono); font-size: 0.72rem; }

/* pack modal (inside demo frame) */
.pack-modal {
  position: absolute;
  inset: 8% 6%;
  z-index: 10;
  background: #fff;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-deep);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  pointer-events: none;
  transition: opacity 240ms ease, transform 240ms ease;
}
.pack-modal.show { opacity: 1; transform: none; pointer-events: auto; }
.pack-modal .pm-head { padding: 0.8rem 1.1rem 0.5rem; border-bottom: 1px solid var(--line); }
.pack-modal .pm-head h4 { margin: 0; font-family: var(--font-serif); font-size: 1.05rem; }
.pack-modal .pm-head .pm-sub { font-size: 0.75rem; color: var(--muted); }
.pack-modal pre {
  flex: 1;
  margin: 0;
  padding: 0.9rem 1.1rem;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.6;
  color: var(--ink-2);
  background: var(--paper);
  white-space: pre-wrap;
}
.pack-modal .pm-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 0.8rem;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--line);
  font-size: 0.78rem; color: var(--muted);
}
.pm-foot .pm-actions { display: flex; gap: 0.6rem; }
.pm-btn {
  font-family: var(--font-ui); font-size: 0.85rem; font-weight: 550;
  padding: 0.42rem 1.1rem; border-radius: var(--r-pill); cursor: pointer; border: none;
}
.pm-btn.primary { background: var(--accent); color: #fff; }
.pm-btn.primary:hover { background: var(--accent-2); }
.pm-btn.ghost { background: none; border: 1px solid var(--line-strong); color: var(--ink-2); }

/* MCP trace */
.mcp-trace {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.9;
  color: var(--ink-2);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 0.7rem 0.95rem;
}
.mcp-trace .tl { opacity: 0; transform: translateX(-6px); transition: opacity 300ms ease, transform 300ms ease; display: block; }
.mcp-trace .tl.on { opacity: 1; transform: none; }
.mcp-trace .ok { color: var(--ok); }
.mcp-trace .tool { color: var(--accent-2); }
.mcp-trace .ret { color: var(--muted); }
.mcp-trace.static .tl { opacity: 1; transform: none; }

/* demo finale */
.demo-finale {
  display: none;
  padding: 1.1rem 1.2rem;
  border-top: 1px solid var(--line);
  background: var(--accent-soft);
  text-align: center;
  font-size: 0.95rem;
}
.demo-finale.show { display: block; }
.demo-finale .btn { margin-top: 0.6rem; }

/* next-step nudge inside left panel */
.next-nudge {
  align-self: center;
  font-size: 0.85rem;
  color: var(--paper);
  background: var(--accent);
  border: none;
  border-radius: var(--r-pill);
  padding: 0.5rem 1.3rem;
  cursor: pointer;
  font-family: var(--font-ui);
  font-weight: 550;
}
.next-nudge:hover { background: var(--accent-2); }

/* =====================================================================
   ARTICLE PAGES (story / privacy)
   ===================================================================== */

.article { padding: 3rem 0 4rem; }
.article h1 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 2.8rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}
.article .lede { font-size: 1.15rem; color: var(--ink-2); margin-bottom: 2.5rem; }
.article h2 { margin-top: 2.75rem; }
.article h3 { margin-top: 1.75rem; }
.article ul, .article ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.article li { margin-bottom: 0.4rem; }
.article blockquote {
  margin: 1.5rem 0;
  padding: 0.2rem 0 0.2rem 1.25rem;
  border-left: 3px solid var(--accent);
  color: var(--ink-2);
  font-style: italic;
  font-family: var(--font-serif);
  font-size: 1.08rem;
}
.article code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.08em 0.35em;
}
.article pre {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 1rem 1.25rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.55;
}
.article pre code { background: none; border: none; padding: 0; }
.article table { border-collapse: collapse; width: 100%; font-size: 0.92rem; margin: 1.25rem 0; }
.article th, .article td { text-align: left; padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.article th { font-weight: 600; color: var(--ink-2); border-bottom: 1px solid var(--line-strong); }
.article .shot { margin: 1.75rem auto; }
.article hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.zh-block { border-top: 1px solid var(--line-strong); margin-top: 3rem; padding-top: 2rem; }

/* story layout: sticky TOC on wide screens */
.story-grid { display: grid; grid-template-columns: 13rem minmax(0, 44rem); gap: 3.5rem; justify-content: center; }
.story-toc { position: sticky; top: 5rem; align-self: start; font-size: 0.85rem; line-height: 2; }
.story-toc .toc-title { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.4rem; }
.story-toc a { color: var(--ink-2); display: block; border-left: 2px solid var(--line); padding-left: 0.8rem; }
.story-toc a:hover { color: var(--accent); text-decoration: none; border-left-color: var(--accent); }
@media (max-width: 900px) { .story-grid { display: block; } .story-toc { display: none; } }

/* numbered story sections */
.article.numbered { counter-reset: sec; }
.article.numbered h2 { counter-increment: sec; }
.article.numbered h2::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.72em;
  color: var(--accent);
  margin-right: 0.7rem;
  vertical-align: 0.12em;
}

/* architecture diagram */
.arch-svg { width: 100%; height: auto; margin: 1.5rem 0; }
.arch-svg text { font-family: var(--font-ui); }
.arch-svg .lbl { font-size: 13px; fill: var(--ink); font-weight: 550; }
.arch-svg .sub { font-size: 10.5px; fill: var(--muted); }
.arch-svg .mono { font-family: var(--font-mono); font-size: 10px; fill: var(--accent-2); }
.arch-svg .box { fill: #fff; stroke: var(--line-strong); rx: 8; }
.arch-svg .box-accent { fill: var(--accent-soft); stroke: var(--accent); }
.arch-svg .flow { stroke: var(--line-strong); stroke-width: 1.5; fill: none; marker-end: url(#arrow); }
.arch-svg .flow-accent { stroke: var(--accent); }

/* ---------- print (story → one-pager PDF) ---------- */
@media print {
  body { background: #fff; font-size: 11pt; }
  .nav-shell, footer, .no-print, .story-toc { display: none; }
  .story-grid { display: block; }
  .article { padding: 0; }
  .shot { box-shadow: none; max-width: 70%; }
  a { color: inherit; }
  section { padding: 1rem 0; }
}

@media (max-width: 640px) {
  .hero { padding: 3.2rem 0 2.5rem; }
  section { padding: 2.8rem 0; }
}