/* ============================================================
   CBTI — Crypto Behavioral Type Indicator
   Design: Luxury editorial on black. Instrument Serif + Barlow.
           Liquid glass. Pill CTAs. Blur-in motion.
   ============================================================ */

:root {
  /* Surfaces */
  --bg: #050506;
  --bg-2: #0A0A0D;
  --fg: #FFFFFF;
  --fg-70: rgba(255, 255, 255, 0.70);
  --fg-60: rgba(255, 255, 255, 0.60);
  --fg-50: rgba(255, 255, 255, 0.50);
  --fg-40: rgba(255, 255, 255, 0.40);
  --fg-20: rgba(255, 255, 255, 0.20);
  --fg-10: rgba(255, 255, 255, 0.10);
  --fg-06: rgba(255, 255, 255, 0.06);

  /* Quadrant accents — tuned to sit on pure black */
  --sm-accent: #00E676;       /* Smart Money — terminal green */
  --dd-accent: #B24BF3;       /* Diamond Degen — electric purple */
  --ra-accent: #FFB800;       /* Rotating Andy — warning yellow */
  --ag-accent: #FF2E4C;       /* Absolute Gambler — neon red */

  /* Typography */
  --font-display: 'Instrument Serif', 'Noto Serif SC', ui-serif, Georgia, serif;
  --font-body: 'Barlow', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Radius */
  --r-pill: 9999px;
  --r-card: 20px;
  --r-card-sm: 12px;

  /* Spacing scale */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  /* Layout */
  --max-w: 680px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-short: 180ms;
  --dur-med: 280ms;
  --dur-long: 500ms;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Subtle ambient glow in the background — NOT a gradient slop, a real light source */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -20%, rgba(255,255,255,0.04), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 120%, rgba(255,255,255,0.02), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* Film grain — gives the black surface texture so it doesn't feel flat.
   Promoted to its own compositor layer (transform: translateZ) so the overlay
   mix-blend doesn't force repaints during the landing blur-in animation. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.5;
  pointer-events: none;
  mix-blend-mode: overlay;
  transform: translateZ(0);
  z-index: 1;
}

/* During the landing reveal (first 2s), drop grain opacity so the GPU isn't
   composing blend+blur at the same time — smoother framerate on weaker GPUs. */
body.screen-landing::after {
  opacity: 0.28;
  animation: grainReturn 1.2s var(--ease-out) 1.8s forwards;
}
@keyframes grainReturn {
  to { opacity: 0.5; }
}

/* Everything interactive sits above the grain */
.screen { position: relative; z-index: 2; }

/* ─────────────────────────────────────────────
   Background video (landing + quiz only)
   ─────────────────────────────────────────────*/

.bg-video-wrap {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity 600ms var(--ease-out);
}

.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  /* Dim the raw video so foreground content stays legible */
  opacity: 0.38;
  filter: contrast(1.05) brightness(0.95);
}

/* Gradient mask to make the top and bottom fade into pure black,
   strengthens text contrast at edges and hides any watermarks. */
.bg-video-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(5,5,6,0.55) 0%,
      rgba(5,5,6,0.20) 30%,
      rgba(5,5,6,0.20) 70%,
      rgba(5,5,6,0.95) 100%),
    radial-gradient(ellipse 80% 60% at 50% 50%,
      transparent 0%,
      rgba(5,5,6,0.25) 60%,
      rgba(5,5,6,0.6) 100%);
}

/* Hide the video on the result screen — the result is the focus and has its
   own ambient treatment. When landing or quiz is active, the video is visible. */
body:has(#result.active) .bg-video-wrap { opacity: 0; }
body:has(#result.active) .bg-video { visibility: hidden; }

/* Body-class fallback for browsers without :has() support
   (also toggled in app.js showScreen for explicit control). */
body.screen-result .bg-video-wrap { opacity: 0; }
body.screen-result .bg-video { visibility: hidden; }

/* ─────────────────────────────────────────────
   Liquid Glass — the signature surface treatment
   ─────────────────────────────────────────────*/

.glass {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.018);
  background-blend-mode: luminosity;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.08),
    0 1px 2px rgba(0, 0, 0, 0.4);
}

.glass::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.35) 0%,
    rgba(255, 255, 255, 0.12) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.10) 80%,
    rgba(255, 255, 255, 0.30) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

.glass-strong {
  position: relative;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.02);
  background-blend-mode: luminosity;
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.18),
    0 4px 24px rgba(0, 0, 0, 0.35);
}

.glass-strong::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.2px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.22) 20%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0.20) 80%,
    rgba(255, 255, 255, 0.50) 100%
  );
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   Screens
   ─────────────────────────────────────────────*/

.screen { display: none; }
.screen.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
}

/* ─────────────────────────────────────────────
   LANDING
   ─────────────────────────────────────────────*/

#landing {
  justify-content: center;
  padding: var(--s-7) var(--s-5);
  text-align: center;
}

.landing-card {
  max-width: var(--max-w);
  width: 100%;
  position: relative;
  z-index: 10;
  /* Let pointer events fall through transparent card areas so the persona
     sphere behind us stays draggable. Interactive children re-enable below. */
  pointer-events: none;
  isolation: isolate;
}
.landing-card .btn-start,
.landing-card .btn-meet,
.landing-card .landing-credit a {
  pointer-events: auto;
}


.landing-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--fg-60);
  padding: 6px 14px;
  border-radius: var(--r-pill);
  margin-bottom: var(--s-6);
  position: relative;
}

.landing-eyebrow.glass,
.landing-eyebrow {
  /* inherit liquid glass via utility — but easier to inline here */
  background: rgba(255, 255, 255, 0.025);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--fg-10);
}

.landing-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
  margin-bottom: var(--s-6);
}

.landing-title em {
  font-style: italic;
  color: var(--fg);
}

/* Blur-in per-token animation.
   GPU-compositing (will-change + translate3d) prevents the main-thread paint
   stutter that a large filter:blur otherwise causes on serif display type. */
.blur-in {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 18px, 0);
  filter: blur(10px);
  will-change: filter, opacity, transform;
  animation: blurInUp 0.9s var(--ease-out) forwards;
}
.blur-in:nth-child(1) { animation-delay: 0.05s; }
.blur-in:nth-child(2) { animation-delay: 0.14s; }
.blur-in:nth-child(3) { animation-delay: 0.22s; }
.blur-in:nth-child(4) { animation-delay: 0.32s; }
.blur-in:nth-child(5) { animation-delay: 0.40s; }
.blur-in:nth-child(6) { animation-delay: 0.48s; }
.blur-in:nth-child(7) { animation-delay: 0.56s; }

@keyframes blurInUp {
  0%   { filter: blur(10px); opacity: 0;   transform: translate3d(0, 18px, 0); }
  60%  { filter: blur(2px);  opacity: 0.7; transform: translate3d(0, 4px, 0); }
  100% { filter: blur(0);    opacity: 1;   transform: translate3d(0, 0, 0); }
}

/* Once the initial reveal has played (set by app.js ~2.4s after page load),
   suppress the blur-in animations entirely. Without this, navigating Back to
   CBTI from #chase / #paper restarts every animation — and the elements with
   `backwards` fill mode (subtitle, btn-start, tagline, btn-meet, credit) sit
   at opacity 0 for up to 1.2s while the bg video plays underneath. Looks like
   "the page is missing." */
body.anim-done .blur-in,
body.anim-done .landing-subtitle,
body.anim-done .landing-fullname,
body.anim-done .landing-fullname-zh,
body.anim-done .btn-start,
body.anim-done .landing-tagline,
body.anim-done .landing-tease,
body.anim-done .btn-meet,
body.anim-done .landing-credit {
  animation: none;
  opacity: 1;
  transform: none;
  filter: none;
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  /* Also hide the background video — motion can be triggering */
  .bg-video-wrap { display: none; }
}

/* ─────────────────────────────────────────────
   CHASE — personal profile sub-page
   ─────────────────────────────────────────────*/

#chase,
#paper {
  padding: var(--s-7) var(--s-5);
  justify-content: flex-start;
}

.chase-container,
.paper-page {
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}

/* Hero */
.chase-hero {
  text-align: left;
  padding: var(--s-7) 0 var(--s-8);
  border-bottom: 1px solid var(--fg-06);
  margin-bottom: var(--s-8);
}

.chase-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 8vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: var(--s-5) 0 var(--s-5);
}

.chase-title em { font-style: italic; color: var(--fg); }

.chase-tagline {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--fg-70);
  max-width: 560px;
  margin-bottom: var(--s-3);
  animation: blurInUp 0.9s var(--ease-out) 0.5s backwards;
}
.chase-tagline-zh {
  font-family: var(--font-zh, 'Noto Serif SC', var(--font-display));
  font-size: 15px;
  color: var(--fg-60);
  line-height: 1.7;
  margin-top: 0;
  margin-bottom: var(--s-6);
  animation-delay: 0.62s;
}

.chase-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  animation: blurInUp 0.9s var(--ease-out) 0.75s backwards;
}

.chase-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--fg-70);
  text-decoration: none;
  background: rgba(255,255,255,0.022);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.chase-link:hover {
  color: var(--fg);
  border-color: var(--fg-20);
  transform: translateY(-1px);
}
.chase-link svg { opacity: 0.75; }
.chase-link:hover svg { opacity: 1; }

/* Section eyebrow (reused on #chase and #paper) */
.section-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: var(--s-5);
}

.chase-section {
  margin-bottom: var(--s-8);
}

/* Paper card — the intellectual anchor */
.paper-card {
  position: relative;
  padding: var(--s-7) var(--s-6);
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card);
  overflow: hidden;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.06),
    0 1px 2px rgba(0,0,0,0.4);
}

.paper-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--dd-accent) 20%,
    var(--dd-accent) 80%,
    transparent 100%);
  opacity: 0.55;
  pointer-events: none;
}

.paper-authors {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: var(--s-4);
}

.paper-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 5vw, 2.8rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--fg);
  margin-bottom: var(--s-5);
}
.paper-title-sub {
  display: block;
  font-size: 0.55em;
  color: var(--fg-70);
  margin-top: 8px;
  letter-spacing: -0.01em;
}

.paper-abstract {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg-70);
  margin-bottom: var(--s-6);
  max-width: 620px;
}
.paper-abstract em {
  color: var(--fg);
  font-style: italic;
  font-family: var(--font-display);
}

.paper-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
  margin-bottom: var(--s-6);
}
.paper-quote {
  padding: var(--s-4) var(--s-4);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15px;
  line-height: 1.45;
  letter-spacing: -0.005em;
  color: var(--fg-70);
  background: rgba(178,75,243,0.03);
  border: 1px solid rgba(178,75,243,0.12);
  border-left: 2px solid var(--dd-accent);
  border-radius: var(--r-card-sm);
}

.paper-viewer {
  margin: var(--s-6) 0;
  height: 70vh;
  max-height: 720px;
  min-height: 400px;
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card-sm);
  overflow: hidden;
  background: rgba(0,0,0,0.35);
}
.paper-viewer object {
  width: 100%;
  height: 100%;
  border: 0;
}
.paper-viewer-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: var(--s-5);
  color: var(--fg-50);
  font-size: 13px;
  text-align: center;
}

.paper-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.paper-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-70);
  text-decoration: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out);
}
.paper-action:hover {
  color: var(--fg);
  border-color: var(--fg-20);
  transform: translateY(-1px);
  background: rgba(255,255,255,0.04);
}
.paper-action svg { opacity: 0.7; transition: transform var(--dur-short) var(--ease-out); }
.paper-action:hover svg { opacity: 1; transform: translate(2px, -1px); }

.paper-action-primary {
  color: var(--fg);
  background: rgba(178,75,243,0.08);
  border-color: rgba(178,75,243,0.35);
}
.paper-action-primary:hover {
  background: rgba(178,75,243,0.14);
  border-color: rgba(178,75,243,0.6);
}

/* Writing grid — self-hosted essay cards from writings/index.json */
.writing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.writing-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--s-6) var(--s-6) var(--s-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.008));
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.writing-card-essay::before {
  /* hairline accent in the brand purple — signals "thinking" */
  content: '';
  position: absolute;
  left: 0; top: var(--s-6); bottom: var(--s-6);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--dd-accent, #B24BF3), transparent);
  opacity: 0.55;
}
.writing-card-essay:hover {
  border-color: rgba(178,75,243,0.32);
}

/* Skeleton placeholder while index.json loads */
.writing-card-skeleton {
  min-height: 260px;
  pointer-events: none;
}
.writing-card-skeleton::before { display: none; }
.writing-card-skeleton span {
  display: block;
  height: 14px;
  margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.08), rgba(255,255,255,0.04));
  background-size: 200% 100%;
  border-radius: 3px;
  animation: writingSkeleton 1.6s var(--ease-out) infinite;
}
.writing-card-skeleton span:nth-child(1) { width: 35%; }
.writing-card-skeleton span:nth-child(2) { width: 85%; height: 22px; margin-top: 18px; }
.writing-card-skeleton span:nth-child(3) { width: 70%; }
@keyframes writingSkeleton {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.writing-card-meta { margin-bottom: var(--s-3); }
.writing-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-50);
}
.writing-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.18;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.writing-card.lang-zh .writing-card-title {
  font-family: var(--font-display-zh, 'Noto Serif SC', var(--font-display));
  font-size: 24px;
  line-height: 1.32;
  letter-spacing: 0;
}
.writing-card-subtitle {
  margin: 8px 0 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 16px;
  line-height: 1.4;
  color: var(--fg-60);
}
.writing-card.lang-zh .writing-card-subtitle {
  font-family: var(--font-display-zh, 'Noto Serif SC', var(--font-display));
  font-style: normal;
  font-size: 14.5px;
}
.writing-card-quote {
  margin: var(--s-4) 0 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--fg-80, rgba(255,255,255,0.86));
  position: relative;
  padding-left: 14px;
}
.writing-card-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 2px;
  background: var(--dd-accent, #B24BF3);
  opacity: 0.6;
  border-radius: 1px;
}
.writing-card.lang-zh .writing-card-quote {
  font-family: var(--font-zh, 'Noto Serif SC', var(--font-display));
  font-style: normal;
  font-size: 14.5px;
  line-height: 1.7;
}
.writing-card-excerpt {
  margin: var(--s-4) 0 var(--s-5);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-60);
}
.writing-card.lang-zh .writing-card-excerpt {
  font-size: 13px;
  line-height: 1.75;
}
.writing-card-channels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--fg-06);
}
.writing-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-70, rgba(255,255,255,0.72));
  text-decoration: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              background var(--dur-short) var(--ease-out);
}
.writing-chip:hover {
  color: var(--fg);
  border-color: rgba(178,75,243,0.45);
  background: rgba(178,75,243,0.08);
}
.writing-chip-lang {
  font-weight: 700;
  color: var(--fg);
  letter-spacing: 0.08em;
}
.writing-chip-sep { opacity: 0.5; }
.writing-chip-arrow {
  margin-left: 2px;
  opacity: 0.7;
  transition: transform var(--dur-short) var(--ease-out);
}
.writing-chip:hover .writing-chip-arrow {
  transform: translate(2px, -2px);
  opacity: 1;
}

/* Empty / fetch-failed fallback */
.writing-card-fallback {
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  min-height: 200px;
  color: var(--fg-60);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.writing-card-fallback::before { display: none; }
.writing-card-fallback:hover {
  color: var(--fg);
  border-color: rgba(178,75,243,0.32);
}
.writing-card-fallback-text {
  display: block;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 18px;
  color: var(--fg-70, rgba(255,255,255,0.8));
}
.writing-card-fallback-arrow {
  display: block;
  margin-top: var(--s-3);
  font-size: 18px;
  opacity: 0.6;
}

/* Substack feature */
.substack-feature {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: var(--s-5) var(--s-6);
  background: rgba(255,255,255,0.018);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.substack-feature-text { flex: 1; }
.substack-feature-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: 6px;
}
.substack-feature-name {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--fg);
  margin-bottom: 4px;
}
.substack-feature-desc {
  font-size: 13.5px;
  color: var(--fg-60);
  line-height: 1.5;
}

/* Follow + back */
.chase-follow {
  text-align: center;
  padding: var(--s-6) 0;
  font-size: 14px;
  color: var(--fg-50);
  font-weight: 300;
  border-top: 1px solid var(--fg-06);
}
.chase-follow a {
  color: var(--fg-70);
  text-decoration: none;
  border-bottom: 1px solid var(--fg-20);
  padding-bottom: 1px;
}
.chase-follow a:hover { color: var(--fg); border-color: var(--fg-50); }

.chase-back {
  text-align: center;
  padding: var(--s-5) 0 var(--s-6);
}
.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fg-50);
  text-decoration: none;
  background: transparent;
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.btn-back:hover {
  color: var(--fg);
  border-color: var(--fg-30, var(--fg-20));
}
.btn-back svg { opacity: 0.7; transition: transform var(--dur-short) var(--ease-out); }
.btn-back:hover svg { transform: translateX(-2px); opacity: 1; }

/* ─────────────────────────────────────────────
   CHASE — section headers (§ 01..04)
   ─────────────────────────────────────────────*/

.chase-section-header {
  margin-bottom: var(--s-6);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--fg-06);
}
.chase-section-header .section-eyebrow {
  margin-bottom: 10px;
  letter-spacing: 0.28em;
}
.chase-section-header .section-title {
  display: block;
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--fg);
  text-transform: none;
}
.chase-section-header .section-title::before { content: none; }
.subsection-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-top: var(--s-5);
  margin-bottom: var(--s-3);
}

/* ─── § 01 · Socials ─── */
.socials-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
}
.social-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.008));
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card-sm);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-decoration: none;
  color: var(--fg-70);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.social-card:hover {
  color: var(--fg);
  border-color: rgba(178,75,243,0.32);
}
.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--fg-10);
  color: var(--fg);
  transition: background var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.social-card:hover .social-icon {
  background: rgba(178,75,243,0.12);
  border-color: rgba(178,75,243,0.45);
}
.social-text { flex: 1; min-width: 0; }
.social-handle {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.social-platform {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-50);
}
.social-arrow {
  flex-shrink: 0;
  opacity: 0.55;
  transition: transform var(--dur-short) var(--ease-out), opacity var(--dur-short) var(--ease-out);
}
.social-card:hover .social-arrow {
  opacity: 1;
  transform: translate(2px, -2px);
}

/* ─── § 03 · Skills for Agents ─── */
.skills-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-5);
}
.skill-card {
  position: relative;
  padding: var(--s-6) var(--s-7);
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.008));
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.skill-card::before {
  content: '';
  position: absolute;
  left: 0; top: var(--s-6); bottom: var(--s-6);
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--dd-accent, #B24BF3), transparent);
  opacity: 0.55;
}
.skill-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.skill-card-meta { min-width: 0; }
.skill-card-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: 6px;
}
.skill-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 36px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--fg);
}
.skill-card-repo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  color: var(--fg-70);
  text-decoration: none;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
  flex-shrink: 0;
}
.skill-card-repo:hover {
  color: var(--fg);
  border-color: rgba(178,75,243,0.45);
}
.skill-card-desc {
  margin: 0 0 var(--s-5);
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fg-70);
}
.skill-card-desc em {
  font-style: italic;
  color: var(--fg);
}
.skill-list {
  list-style: none;
  margin: 0 0 var(--s-5);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  border-top: 1px solid var(--fg-06);
  padding-top: var(--s-5);
}
.skill-item {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--s-4);
  align-items: baseline;
}
.skill-cmd {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--dd-accent, #B24BF3);
  background: rgba(178,75,243,0.08);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid rgba(178,75,243,0.2);
  width: fit-content;
}
.skill-item-desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-60);
}
.skill-item-desc em {
  font-style: italic;
  color: var(--fg);
}
.skill-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/* ─── § 04 · Others ─── */
.others-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--s-4);
}
.other-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-5) var(--s-6);
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.005));
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card-sm);
  text-decoration: none;
  color: var(--fg-70);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.other-card:hover {
  color: var(--fg);
  border-color: rgba(178,75,243,0.32);
}
.other-card-meta { flex: 1; min-width: 0; }
.other-card-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: 6px;
}
.other-card-title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.other-card-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--fg-60);
}
.other-card-arrow {
  flex-shrink: 0;
  display: inline-flex;
  width: 36px; height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--fg-10);
  background: rgba(255,255,255,0.03);
  transition: background var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out),
              transform var(--dur-short) var(--ease-out);
}
.other-card:hover .other-card-arrow {
  background: rgba(178,75,243,0.12);
  border-color: rgba(178,75,243,0.45);
  transform: translateX(2px);
}

/* ─────────────────────────────────────────────
   PAPER — full HTML reader
   ─────────────────────────────────────────────*/

.paper-page {
  max-width: 780px;
}

.paper-nav {
  margin-bottom: var(--s-7);
  display: flex;
}

.paper-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-60);
  text-decoration: none;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.paper-back:hover { color: var(--fg); border-color: var(--fg-20); }
.paper-back svg { opacity: 0.7; transition: transform var(--dur-short) var(--ease-out); }
.paper-back:hover svg { transform: translateX(-2px); opacity: 1; }

.paper-article {
  max-width: 680px;
  margin: 0 auto;
  padding-bottom: var(--s-8);
}

.paper-article-eyebrow {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--dd-accent);
  opacity: 0.85;
  margin-bottom: var(--s-5);
}

.paper-article-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--fg);
  margin-bottom: 10px;
}

.paper-article-subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 22px;
  line-height: 1.25;
  color: var(--fg-70);
  margin-bottom: var(--s-5);
}

.paper-article-authors {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-50);
  margin-bottom: var(--s-8);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--fg-06);
}

.paper-article-body {
  font-family: var(--font-body);
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--fg-70);
  letter-spacing: -0.002em;
}

.paper-article-body h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--fg);
  margin: var(--s-8) 0 var(--s-4);
}

.paper-article-body h3 {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--fg);
  margin: var(--s-6) 0 var(--s-3);
}

.paper-article-body p {
  margin-bottom: var(--s-4);
}

.paper-article-body em {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--fg);
}

.paper-article-body strong {
  color: var(--fg);
  font-weight: 500;
}

.paper-list {
  margin: 0 0 var(--s-5) var(--s-5);
  padding: 0;
}
.paper-list li {
  margin-bottom: var(--s-3);
  padding-left: 4px;
}
.paper-list li::marker { color: var(--fg-40); }

.paper-table-wrap {
  margin: var(--s-5) 0;
  overflow-x: auto;
  border: 1px solid var(--fg-10);
  border-radius: var(--r-card-sm);
  background: rgba(255,255,255,0.012);
}

.paper-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fg-70);
}
.paper-table th,
.paper-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fg-06);
  border-right: 1px solid var(--fg-06);
}
.paper-table th:last-child,
.paper-table td:last-child { border-right: none; }
.paper-table tr:last-child td { border-bottom: none; }
.paper-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  background: rgba(255,255,255,0.02);
  border-bottom-color: var(--fg-10);
}
.paper-table td strong { color: var(--fg); }

/* ─── Essay reader — extends .paper-article-body ─── */
.essay-page { max-width: 720px; }
.essay-article .paper-article-subtitle em {
  font-style: italic;
  color: var(--fg-70);
}
.essay-article-body { font-size: 18.5px; line-height: 1.72; }
.essay-article-body p { margin: 0 0 var(--s-4); }
.essay-article-body ul {
  margin: var(--s-4) 0;
  padding-left: 0;
  list-style: none;
}
.essay-article-body ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 10px;
  line-height: 1.65;
}
.essay-article-body ul li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.85em;
  width: 10px; height: 1px;
  background: var(--dd-accent, #B24BF3);
  opacity: 0.6;
}
.essay-article-body ul li strong { color: var(--fg); }
.essay-article-body a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid rgba(178,75,243,0.4);
  padding-bottom: 1px;
  transition: border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}
.essay-article-body a:hover {
  color: var(--dd-accent, #B24BF3);
  border-bottom-color: var(--dd-accent, #B24BF3);
}
.essay-article-body hr {
  margin: var(--s-7) auto;
  border: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--fg-20), transparent);
  max-width: 120px;
}

/* Figures with captions */
.essay-figure {
  margin: var(--s-6) 0;
  padding: 0;
  text-align: center;
}
.essay-figure img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  border-radius: var(--r-card-sm, 10px);
  border: 1px solid var(--fg-06);
  background: rgba(255,255,255,0.02);
}
.essay-figure figcaption {
  margin-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-50);
}

/* Table — reuse paper-table visual, but ensure horizontal scroll on mobile */
.essay-table-wrap {
  margin: var(--s-5) 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-card-sm, 10px);
  border: 1px solid var(--fg-10);
}
.essay-table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
  font-size: 14px;
}
.essay-table th, .essay-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--fg-06);
  border-right: 1px solid var(--fg-06);
}
.essay-table th:last-child, .essay-table td:last-child { border-right: none; }
.essay-table tr:last-child td { border-bottom: none; }
.essay-table th {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg);
  font-weight: 500;
  background: rgba(255,255,255,0.03);
  border-bottom-color: var(--fg-10);
}

/* Closing pull-quote (Sang Hongyang) */
.essay-pullquote {
  margin: var(--s-6) 0;
  padding: var(--s-4) var(--s-5) var(--s-4) var(--s-5);
  border: 0;
  border-left: 3px solid var(--dd-accent, #B24BF3);
  background: rgba(178,75,243,0.04);
  border-radius: 0 6px 6px 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--fg);
}
.essay-pullquote p { margin: 0 0 8px; }
.essay-pullquote p:last-child { margin-bottom: 0; }
.essay-pullquote p strong { font-weight: 400; }
.essay-pullquote-cn {
  font-family: var(--font-zh, 'Noto Serif SC', var(--font-display));
  font-style: normal;
  font-size: 15px !important;
  letter-spacing: 0.04em;
  color: var(--fg-60);
}

@media (max-width: 768px) {
  .essay-article-body { font-size: 16.5px; line-height: 1.7; }
  .essay-figure { margin: var(--s-5) 0; }
  .essay-pullquote { font-size: 17px; padding: var(--s-4); }
}

.paper-article-footer {
  margin-top: var(--s-8);
  padding-top: var(--s-5);
  border-top: 1px solid var(--fg-06);
  font-size: 13px;
  color: var(--fg-50);
  text-align: center;
}
.paper-article-footer a {
  color: var(--fg-70);
  text-decoration: none;
  border-bottom: 1px solid var(--fg-20);
  padding-bottom: 1px;
}
.paper-article-footer a:hover { color: var(--fg); border-color: var(--fg-50); }
.paper-article-copy {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-40);
}

/* ─────────────────────────────────────────────
   Chase/Paper responsive
   ─────────────────────────────────────────────*/

@media (max-width: 768px) {
  #chase, #paper { padding: var(--s-5) var(--s-4); }
  .chase-hero { padding: var(--s-5) 0 var(--s-6); margin-bottom: var(--s-6); }
  .chase-section-header .section-title { font-size: 26px; }
  .paper-card { padding: var(--s-5) var(--s-4); }
  .paper-viewer { height: 55vh; min-height: 340px; }
  .substack-feature { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .paper-quotes { grid-template-columns: 1fr; }
  .paper-article-body { font-size: 16.5px; }
  .paper-article-body h2 { font-size: 24px; margin-top: var(--s-6); }
  .skill-card { padding: var(--s-5) var(--s-4); }
  .skill-card-title { font-size: 30px; }
  .skill-item { grid-template-columns: 1fr; gap: 8px; }
  .skill-card-head { flex-direction: column; align-items: flex-start; }
  .other-card { flex-direction: column; align-items: flex-start; }
  .other-card-arrow { align-self: flex-end; }
}

@media (max-width: 540px) {
  /* PDF viewer is notoriously unreliable on iOS Safari — swap to a download-only
     prompt so we never serve a broken-looking black box. */
  .paper-viewer { display: none; }
}

@media (max-width: 480px) {
  .chase-title { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .chase-section-header .section-title { font-size: 22px; }
  .paper-card { padding: var(--s-4); }
  .paper-actions { flex-direction: column; align-items: stretch; }
  .paper-action { justify-content: center; }
  .paper-article-title { font-size: clamp(2rem, 9vw, 2.6rem); }
  .paper-article-subtitle { font-size: 18px; }
  .writing-grid { grid-template-columns: 1fr; }
  .socials-grid { grid-template-columns: 1fr; }
  .skill-card-actions { flex-direction: column; align-items: stretch; }
  .skill-card-actions .paper-action { justify-content: center; }
  .node-cards { grid-template-columns: 1fr; }
  .node-block-num { font-size: clamp(3rem, 14vw, 4.5rem); }
}

/* ─────────────────────────────────────────────
   NODE — live ETH node status (#node screen)
   Reuses chase-* shell and .glass surface.
   ─────────────────────────────────────────────*/

.node-block-hero {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5) 0 var(--s-4);
}
.node-block-num {
  font-family: var(--font-display);
  font-size: clamp(4rem, 9vw, 7rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--fg);
  font-feature-settings: "tnum" 1;
  font-variant-numeric: tabular-nums;
}
.node-block-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-50);
}

.node-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
.node-card {
  border-radius: var(--r-card);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.node-card-head {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.node-card-title {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--fg);
}
.node-card-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-50);
}
.node-card-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--s-4);
  row-gap: var(--s-2);
  margin: 0;
}
.node-card-grid dt {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-50);
  align-self: center;
}
.node-card-grid dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
}

.pulse-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg-40);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  flex: 0 0 auto;
  animation: pulseDot 2s ease-out infinite;
}
.pulse-dot.is-synced  { background: var(--sm-accent); }
.pulse-dot.is-syncing { background: var(--ra-accent); animation-duration: 1.2s; }
.pulse-dot.is-offline { background: var(--ag-accent); animation: none; }
.pulse-dot.is-unknown { background: var(--fg-40); animation: none; }

@keyframes pulseDot {
  0%   { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  70%  { box-shadow: 0 0 0 10px rgba(0, 0, 0, 0); opacity: 0.85; }
  100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); opacity: 1; }
}
.pulse-dot.is-synced  { color: rgba(0, 230, 118, 0.45); }
.pulse-dot.is-syncing { color: rgba(255, 184, 0, 0.50); }

@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none !important; }
}

.node-meta {
  margin-top: var(--s-5);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-40);
  text-align: left;
}


/* ─────────────────────────────────────────────
   Language toggle (top-right fixed pill)
   ─────────────────────────────────────────────*/

.lang-toggle {
  position: fixed;
  top: var(--s-4);
  right: var(--s-4);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-50);
  background: rgba(20,20,24,0.6);
  border: 1px solid var(--fg-10);
  border-radius: var(--r-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  cursor: pointer;
  transition: color var(--dur-short) var(--ease-out),
              border-color var(--dur-short) var(--ease-out);
}
.lang-toggle:hover {
  color: var(--fg-70);
  border-color: var(--fg-20);
}
.lang-opt {
  cursor: pointer;
  padding: 0 2px;
  transition: color var(--dur-short) var(--ease-out);
}
.lang-toggle[data-active="en"] .lang-opt-en,
.lang-toggle[data-active="zh"] .lang-opt-zh {
  color: var(--fg);
  font-weight: 700;
}
.lang-sep {
  opacity: 0.4;
  pointer-events: none;
}

/* Single chase-screen wrapper (replaces .screen visibility logic) */
.chase-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: var(--s-7) var(--s-5);
  position: relative;
  z-index: 2;
}

/* Hero CTA buttons inherit .paper-action — already defined.
   Add a touch of breathing room above the button row. */
.chase-hero .chase-links {
  margin-top: var(--s-5);
}

/* Mobile responsive overrides (chasewang.me-specific) */
@media (max-width: 768px) {
  .chase-screen { padding: var(--s-6) var(--s-4); }
  .chase-title { font-size: clamp(2.4rem, 9vw, 3.6rem); }
  .chase-section-header .section-title { font-size: 26px; }
  .paper-card { padding: var(--s-5) var(--s-4); }
  .paper-viewer { height: 60vh; min-height: 320px; }
}

@media (max-width: 480px) {
  .lang-toggle {
    top: var(--s-3);
    right: var(--s-3);
    font-size: 10px;
    padding: 6px 12px;
  }
  .chase-hero { padding: var(--s-5) 0 var(--s-7); }
  .chase-section { margin-bottom: var(--s-7); }
  .substack-feature { flex-direction: column; align-items: flex-start; gap: var(--s-4); }
  .paper-actions { flex-direction: column; }
  .paper-action { width: 100%; justify-content: center; }
}