/* ============================================================
   Bidirectional Landing — 向上 Designer / 向下 Programmer
   Uses DS tokens from styles.css. Kit-local styles only.
   ============================================================ */

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--bg-page); }

/* ---------- loader overlay ---------- */
.ld-loader { position: fixed; inset: 0; z-index: 200; background: var(--bg-page);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  transition: opacity .45s var(--ease-out); }
.ld-loader.is-done { opacity: 0; pointer-events: none; }
.ld-loader__bar { width: 180px; height: 2px; background: var(--void-600); border-radius: 2px; overflow: hidden; }
.ld-loader__bar span { display: block; height: 100%; width: 0; background: var(--void-050);
  border-radius: 2px; transition: width .25s var(--ease-out); }
.ld-loader__pct { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: .08em; }

/* ---------- fixed chrome ---------- */
.ld-brand { position: fixed; top: 22px; left: 28px; z-index: 60;
  font-family: var(--font-label); font-weight: 600; font-size: 13px; letter-spacing: .02em;
  color: var(--text-muted); mix-blend-mode: difference; filter: invert(1) grayscale(1); }
/* minimal top-right nav — keeps the landing clean */
.ld-top-nav { position: fixed; top: 20px; right: 28px; z-index: 60; display: flex; gap: 18px; }
.ld-top-nav a { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint);
  text-decoration: none; letter-spacing: .04em; transition: color var(--dur) var(--ease-out); }
.ld-top-nav a:hover { color: var(--text-strong); }
.ld-top-nav.is-dark a { color: #7a7a74; }
.ld-top-nav.is-dark a:hover { color: #e8e8e2; }

/* rail */
.ld-rail { position: fixed; right: 26px; top: 50%; transform: translateY(-50%); z-index: 60;
  display: flex; flex-direction: column; align-items: center; gap: 14px; }
.ld-rail a { display: block; width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--void-400); transition: all var(--dur) var(--ease-out); }
.ld-rail a.is-active { background: var(--void-100); border-color: var(--void-100); transform: scale(1.25); }
.ld-rail a:hover { border-color: var(--void-100); }
.ld-rail .ld-rail__lab { font-family: var(--font-mono); font-size: 9px; color: var(--void-300); letter-spacing: .08em; }
/* dark-context override via .is-dark on rail */
.ld-rail.is-dark a { border-color: #5a5a5a; }
.ld-rail.is-dark a.is-active { background: #e6e6e6; border-color: #e6e6e6; }
.ld-rail.is-dark .ld-rail__lab { color: #6e6e6e; }
.ld-brand.is-dark { color: #9a9a9a; }

/* ============================================================
   HERO — a tall scroll-scrub zone with a sticky stage.
   Scroll progress drives the character video's timeline.
   ============================================================ */
.ld-hero-zone { position: relative; height: 340vh; }
.ld-hero { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: space-between; gap: 0; padding: 26px 0 0; text-align: center; overflow: hidden; }
/* dark GROUND under the character's feet — he stands on the code world */
.ld-hero__ground { width: 100%; background: #1a1a1c; display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 48px 0 16px; }
.ld-hero__ground .ld-hero__byline { padding: 0; color: #9c9c96; }
.ld-hero__ground .ld-hero__byline em { color: #f2f2ee; }
.ld-hero__ground .ld-hero__arrow { border-color: #454545; color: #e8e8e2; }
.ld-hero__ground .ld-hero__hint:hover .ld-hero__arrow { border-color: #e8e8e2; background: #2a2a2c; }
.ld-hero__stage { position: relative; z-index: 2; flex: 1; width: 100%; min-height: 0;
  display: flex; align-items: flex-end; justify-content: center; }
.ld-hero__bigtext { position: absolute; top: 4%; left: 50%; transform: translateX(-50%);
  width: 100%; margin: 0; z-index: 0; user-select: none; pointer-events: none;
  font-family: var(--font-display); font-weight: 800; text-transform: uppercase;
  font-size: clamp(56px, 10.5vw, 158px); line-height: .84; letter-spacing: -.045em;
  color: var(--void-050); }
/* hand-made disclaimer — small, faint, bottom-right corner of the hero */
.ld-hero__handmade { position: absolute; right: clamp(16px, 3vw, 44px); bottom: 16px;
  z-index: 3; margin: 0; text-align: right;
  font-family: var(--font-mono); font-size: 12px; line-height: 1.8; letter-spacing: .03em;
  color: var(--text-faint); opacity: .8; pointer-events: none; }

.ld-hero__video { position: relative; z-index: 1; height: min(72vh, 660px); max-width: 92vw;
  aspect-ratio: 3/4; will-change: opacity; }
.ld-hero__byline { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint);
  letter-spacing: .04em; padding: 14px 0 16px; }
.ld-hero__byline em { font-style: normal; color: var(--text-strong); }
.ld-hero__hint { display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.ld-hero__hint:hover { color: var(--text-strong); transform: translateY(-2px); }
.ld-hero__hint--down:hover { transform: translateY(2px); }
.ld-hero__arrow { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--border);
  display: grid; place-items: center; font-size: 17px; line-height: 1;
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out); }
.ld-hero__hint:hover .ld-hero__arrow { border-color: var(--void-100); background: var(--surface); }
.ld-hero__hint b { font-family: var(--font-label); font-weight: 700; font-size: 13px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--text-strong); }
.ld-hero__hint span { font-family: var(--font-body); font-size: 13px; color: var(--text-faint); }

/* ============================================================
   DESIGNER — light, Apple-premium, Unreal Blueprint editor air
   ============================================================ */
.ld-design { position: relative; background: var(--bg-page);
  /* blueprint dot grid */
  background-image: radial-gradient(color-mix(in oklch, var(--void-400) 34%, transparent) 1px, transparent 1px);
  background-size: 26px 26px; }
.ld-design__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }

/* ambient sky — single dark ink, denser toward the top (空 → 深空 → 宇宙) */
.ld-sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(to top, transparent 52%, color-mix(in oklch, var(--void-050) 6%, transparent) 100%); }
.ld-sky .ld-star { position: absolute; border-radius: 50%; background: #1a1a1c; will-change: transform; }
.ld-sky .ld-moon { position: absolute; top: 5%; right: 13%; width: clamp(72px, 9vw, 128px);
  aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #1a1a1c; opacity: .16;
  box-shadow: inset -14px 10px 0 -2px color-mix(in oklch, var(--bg-app) 100%, transparent); }
.ld-design > *:not(.ld-sky) { position: relative; z-index: 1; }

/* intro strip — compact so intro + its interactive panel fit ONE screen */
.ld-zone-intro { display: flex; flex-direction: column; justify-content: center;
  align-items: center; text-align: center; gap: 12px; padding: 48px 24px 30px; }
.ld-zone-intro .ld-eyebrow { font-family: var(--font-label); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; font-size: 12px; color: var(--text-faint); }
.ld-zone-intro h2 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(48px, 6.9vw, 81px); line-height: 1.05; color: var(--text-strong); margin: 0; }
.ld-zone-intro p { max-width: 56ch; font-size: 16px; line-height: 1.7; color: var(--text-muted); margin: 0; text-wrap: pretty; }
.ld-zone-intro .zh { font-family: var(--font-serif); font-style: italic; }

/* blueprint node card */
.ld-node { background: var(--surface); border: 1px solid var(--border-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden; }
.ld-node__head { display: flex; align-items: center; gap: 10px; padding: 12px 18px;
  border-bottom: 1px solid var(--border-soft); background: var(--surface-raised); }
.ld-node__pin { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--void-300); flex: none; }
.ld-node__pin--out { margin-left: auto; background: var(--void-100); border-color: var(--void-100); }
.ld-node__title { font-family: var(--font-mono); font-size: 12px; color: var(--text-muted); letter-spacing: .02em; }

/* design project layout */
.ld-proj { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px);
  align-items: center; padding: clamp(48px, 7vw, 96px) 0; }
.ld-proj__media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/11; display: block; }
.ld-proj__body h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: clamp(26px, 3vw, 36px); color: var(--text-strong); margin: 0 0 6px; }
.ld-proj__body .ld-sub { font-family: var(--font-mono); font-size: 13px; color: var(--text-faint); }
.ld-proj__body p { font-size: 16px; line-height: 1.75; color: var(--text-muted); margin: 18px 0 0; text-wrap: pretty; }
.ld-proj__body .zh { font-family: var(--font-serif); font-style: italic; color: var(--text-body); }
.ld-proj--flip .ld-proj__media { order: 2; }
/* connecting wire between nodes (blueprint bezier feel, pure CSS) */
.ld-wire { width: 2px; height: clamp(40px, 7vh, 80px); margin: 0 auto;
  background: linear-gradient(var(--void-400), var(--void-500)); border-radius: 2px; opacity: .5; }

/* top endcap of design zone */
.ld-design__cap { min-height: 56vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 16px; text-align: center; padding: 88px 24px 56px; }
.ld-design__cap .q { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4; color: var(--text-strong); max-width: 30ch; text-wrap: balance; }
.ld-design__cap .q-en { font-family: var(--font-serif); font-style: italic; font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6; color: var(--text-faint); max-width: 52ch; text-wrap: balance; }
.ld-design__cap .back { font-family: var(--font-mono); font-size: 12px; color: var(--text-faint);
  text-decoration: none; margin-top: 18px; }
.ld-design__cap .back:hover { color: var(--text-strong); }

/* ============================================================
   PROGRAMMER — dark, Visual Studio editor air
   ============================================================ */
.ld-code { background: #1a1a1c; color: #c9c9c4; position: relative; }
.ld-code__inner { max-width: 1100px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px);
  display: flex; flex-direction: column; row-gap: clamp(36px, 5vw, 60px); }

/* ambient strata — single light ink, denser toward the bottom (地表 → 岩层 → 地核) */
.ld-strata { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  background: linear-gradient(to bottom, transparent 62%, rgba(0,0,0,.28) 100%); }
.ld-strata .ld-strat { position: absolute; height: 1px; background: #f2f2ee; will-change: transform; }
.ld-strata .ld-core { position: absolute; left: 50%; bottom: -62vw; transform: translateX(-50%);
  width: 124vw; aspect-ratio: 1; border-radius: 50%; border: 1px solid rgba(242,242,238,.12);
  box-shadow: 0 0 90px 20px rgba(242,242,238,.04) inset; }
.ld-strata .ld-core--2 { bottom: -78vw; width: 156vw; border-color: rgba(242,242,238,.06); box-shadow: none; }
.ld-code > *:not(.ld-strata) { position: relative; z-index: 1; }
/* order: LeetCode panel first, Wuxia editor below it, then projects */
.ld-code__inner > .ld-lc-wrap { order: 1; }
.ld-code__inner > .ld-editor { order: 2; }
.ld-code__inner > .ld-code__projects { order: 3; }
.ld-code .ld-zone-intro .ld-eyebrow { color: #7a7a74; }
.ld-code .ld-zone-intro h2 { color: #f2f2ee; }
.ld-code .ld-zone-intro p { color: #9c9c96; }

/* editor window */
.ld-editor { background: #1e1e1e; border: 1px solid #333; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: 0 24px 70px -20px rgba(0,0,0,.6); font-family: var(--font-mono); }
.ld-editor__tabs { display: flex; background: #252526; border-bottom: 1px solid #333; }
.ld-editor__tab { padding: 9px 18px; font-size: 12px; color: #8a8a86; border-right: 1px solid #333; }
.ld-editor__tab.is-active { background: #1e1e1e; color: #e8e8e2; border-top: 1.5px solid #e8e8e2; }
.ld-editor__body { display: flex; padding: 18px 0; font-size: 13.5px; line-height: 1.75; overflow-x: auto; }
.ld-editor__lines { padding: 0 14px 0 20px; text-align: right; color: #4e4e4e; user-select: none; flex: none; }
.ld-editor__src { padding-right: 24px; white-space: pre; }
.ld-editor__status { display: flex; gap: 18px; padding: 6px 16px; background: #252526;
  border-top: 1px solid #333; font-size: 11px; color: #7a7a74; }
/* VS Dark+ syntax */
.tok-k { color: #569cd6; } .tok-t { color: #4ec9b0; } .tok-f { color: #dcdcaa; }
.tok-s { color: #ce9178; } .tok-n { color: #b5cea8; } .tok-c { color: #6a9955; }
.tok-m { color: #c586c0; } .tok-v { color: #9cdcfe; }

/* repo rows (ls -la vibe) */
.ld-repo { border: 1px solid #333; border-radius: var(--radius-md); overflow: hidden; margin-top: 56px; }
.ld-repo__head { padding: 10px 18px; background: #252526; border-bottom: 1px solid #333;
  font-family: var(--font-mono); font-size: 12px; color: #8a8a86; }
.ld-repo__row { display: grid; grid-template-columns: 22px 1fr auto; gap: 14px; align-items: baseline;
  padding: 14px 18px; border-bottom: 1px solid #2a2a2a; font-family: var(--font-mono); font-size: 13.5px;
  color: #c9c9c4; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); }
.ld-repo__row:last-child { border-bottom: none; }
.ld-repo__row:hover { background: #232324; }
.ld-repo__row .ic { color: #569cd6; }
.ld-repo__row .desc { color: #8a8a86; font-size: 12.5px; }
.ld-repo__row .meta { color: #5e5e58; font-size: 12px; }
.ld-repo__row.is-todo .ic { color: #6a9955; }
.ld-repo__row.is-todo .name::after { content: "  // TODO(next)"; color: #6a9955; }

/* stack chips */
.ld-stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.ld-stack span { font-family: var(--font-mono); font-size: 12.5px; color: #9c9c96;
  border: 1px solid #3a3a3a; border-radius: var(--radius-pill); padding: 6px 13px; }

/* 3D object field — FULL-BLEED (no side borders), objects spread edge to edge */
/* 3D object field — sticky full-viewport layer spanning the WHOLE designer
   section, layered ABOVE the intro text (z 4) so objects float in FRONT of the
   "Designer 想象力是反重力的" heading and fly off the top, instead of vanishing
   below it. #id selector so it beats `.ld-design > *:not(.ld-sky)`. */
#objField.ld-objfield { position: sticky; top: 0; height: 100vh; width: 100vw; z-index: 4;
  margin-left: calc(50% - 50vw); pointer-events: none; }
.ld-objfield canvas { pointer-events: auto; }
.ld-objfield-wrap { position: relative; z-index: 2; margin: 0 0 88px; width: 100vw; margin-left: calc(50% - 50vw); max-width: none; }
html, body { overflow-x: clip; }
.ld-objfield-wrap > .ld-panel-eyebrow { padding: 0 clamp(24px, 5vw, 64px); }
.ld-objfield canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ld-objfield__tip { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; background: var(--surface, #fff); border: 1px solid var(--border);
  box-shadow: 0 6px 20px rgba(20, 20, 22, .08); pointer-events: none; white-space: nowrap; }
.ld-objfield__tip[hidden] { display: none; }
.ld-objfield__tip b { font-family: var(--font-label); font-size: 13px; letter-spacing: .02em;
  color: var(--text-strong); }
.ld-objfield__tip span:last-child { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-faint); }

/* focus panel — gentle translucent card, pinned to the RIGHT EDGE of the
   viewport (same y as the focused object); fixed so nothing can occlude it */
.ld-obj-focus { position: fixed; z-index: 80; right: clamp(72px, 14vw, 240px); top: 50%;
  transform: translate(24px, -50%); width: min(400px, 42%);
  background: rgba(255, 255, 255, .58); backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid rgba(26, 26, 28, .10); border-radius: 16px;
  box-shadow: 0 24px 70px rgba(20, 20, 22, .14), inset 0 1px 0 rgba(255, 255, 255, .65);
  padding: 30px 32px 28px; display: flex; flex-direction: column;
  opacity: 0; pointer-events: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .3, 1); }
.ld-obj-focus.is-on { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.ld-obj-focus__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px;
  border: 1px solid rgba(26, 26, 28, .12); border-radius: 50%; background: rgba(255, 255, 255, .5);
  color: var(--text-muted); font-size: 13px; cursor: pointer; }
.ld-obj-focus__close:hover { color: var(--text-strong); background: rgba(255, 255, 255, .85); }
.ld-obj-focus__tag { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .06em;
  color: var(--text-faint); margin-bottom: 10px; }
.ld-obj-focus h3 { font-family: var(--font-display); font-weight: 800; letter-spacing: -.02em;
  font-size: 26px; color: var(--text-strong); margin: 0 0 10px; }
.ld-obj-focus p { font-size: 14.5px; line-height: 1.7; color: var(--text-muted); margin: 0 0 12px; text-wrap: pretty; white-space: pre-line; }
.ld-obj-focus__cn { margin-bottom: 26px !important; }
.ld-obj-focus__btn { display: inline-block; align-self: flex-end; font-family: var(--font-label); font-weight: 700;
  font-size: 13px; letter-spacing: .06em; color: var(--surface, #fff); background: var(--void-100, #1a1a1c);
  padding: 11px 20px; border-radius: 999px; text-decoration: none; }
.ld-obj-focus__btn:hover { opacity: .85; }
.ld-obj-focus__btn[hidden] { display: none; }

/* ============================================================
   PROJECT DETAIL OVERLAY — "一镜到底" sheet. Expands over the
   floating field on the same page; close → back in the scene.
   ============================================================ */
html.ld-proj-lock, html.ld-proj-lock body { overflow: hidden; }
.ld-proj-ov { position: fixed; inset: 0; z-index: 120; pointer-events: none; }
.ld-proj-ov__back { position: absolute; inset: 0; background: rgba(20, 20, 22, .32);
  opacity: 0; transition: opacity .4s ease; }
.ld-proj-ov__sheet { position: absolute; inset: 5vh 6vw; overflow-y: auto; overscroll-behavior: contain;
  background: rgba(255, 255, 255, .88); backdrop-filter: blur(26px) saturate(1.15);
  border: 1px solid rgba(26, 26, 28, .1); box-shadow: 0 40px 120px rgba(20, 20, 22, .28);
  padding: clamp(28px, 5vw, 72px); border-radius: 18px;
  opacity: 0; transform: translateY(26px) scale(.965);
  transition: opacity .45s ease, transform .45s cubic-bezier(.22, .8, .3, 1); }
.ld-proj-ov.is-on { pointer-events: auto; }
.ld-proj-ov.is-on .ld-proj-ov__back { opacity: 1; }
.ld-proj-ov.is-on .ld-proj-ov__sheet { opacity: 1; transform: none; }
.ld-proj-ov__close { position: absolute; top: 18px; right: 18px; width: 36px; height: 36px;
  border: 1px solid rgba(26, 26, 28, .14); border-radius: 50%; background: rgba(255, 255, 255, .6);
  font-size: 14px; color: var(--text-muted); cursor: pointer; }
.ld-proj-ov__close:hover { background: #fff; color: var(--text-strong); }
.ld-proj-ov__tag { font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
  color: var(--text-faint); margin-bottom: 12px; }
.ld-proj-ov__title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(36px, 5vw, 64px); line-height: 1.02; color: var(--text-strong); margin: 0 0 18px; }
.ld-proj-ov__en { font-size: 16.5px; line-height: 1.75; color: var(--text-muted); max-width: 68ch; margin: 0 0 10px; white-space: pre-line; }
.ld-proj-ov__cn { font-size: 15.5px; line-height: 1.85; color: var(--text-faint); max-width: 68ch; margin: 0 0 34px; white-space: pre-line; }
.ld-proj-ov__media { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-bottom: 30px; }
.ld-proj-ov__media image-slot { width: 100%; aspect-ratio: 16 / 9; }
.ld-proj-ov__link { display: inline-block; font-family: var(--font-label); font-weight: 700;
  font-size: 13.5px; padding: 12px 24px; background: var(--text-strong, #1a1a1c); color: #f4f2ec;
  text-decoration: none; }
.ld-proj-ov__link:hover { opacity: .85; }
.ld-proj-ov__link[hidden] { display: none; }
@media (max-width: 900px) { .ld-proj-ov__sheet { inset: 3vh 3vw; } }
@media (max-width: 900px) {
  .ld-obj-focus { right: 12px; left: 12px; width: auto; top: auto; bottom: 16px; transform: translateY(16px);
    max-height: 44vh; overflow-y: auto; overscroll-behavior: contain; }
  .ld-obj-focus.is-on { transform: none; }
  .ld-rail { display: none; } /* side dots — too tight on phones */
}

/* dark variant — trophy cabinet. Bigger type, pulled in toward center; sits
   above the fullscreen focus canvas (z 95). */
.ld-obj-focus--dark {
  z-index: 10000; right: clamp(28px, 8vw, 132px); width: min(480px, 42%);
  background: rgba(16, 16, 19, .82); border: 1px solid rgba(232, 232, 226, .16);
  box-shadow: 0 24px 90px rgba(0, 0, 0, .6); backdrop-filter: blur(14px) saturate(1.05); }
.ld-obj-focus__role { font-family: var(--font-label); font-size: 13px; font-weight: 600;
  letter-spacing: .04em; color: var(--text-faint, #8a8a84); margin: -4px 0 14px; }
.ld-obj-focus__role[hidden] { display: none; }
.ld-obj-focus--dark .ld-obj-focus__role { color: #8a8a84; }
.ld-obj-focus--dark h3 { color: #e8e8e2; font-size: 34px; margin-bottom: 14px; }
.ld-obj-focus--dark p { color: #b4b4ae; font-size: 16.5px; line-height: 1.78; white-space: pre-line; }
.ld-obj-focus--dark .ld-obj-focus__tag { color: #8a8a84; font-size: 12.5px; margin-bottom: 14px; }
.ld-obj-focus--dark .ld-obj-focus__btn { font-size: 14px; padding: 13px 26px; }
.ld-obj-focus--dark .ld-obj-focus__btn + .ld-obj-focus__btn { margin-left: 10px; }
.ld-obj-focus--dark .ld-obj-focus__close { border-color: rgba(232, 232, 226, .16);
  background: rgba(232, 232, 226, .06); color: #a8a8a2; }
.ld-obj-focus--dark .ld-obj-focus__close:hover { color: #e8e8e2; background: rgba(232, 232, 226, .14); }
@media (max-width: 900px) {
  .ld-obj-focus--dark { right: 8px; left: 8px; top: auto; bottom: 8px; width: auto; transform: translateY(16px);
    max-height: 46vh; overflow-y: auto; overscroll-behavior: contain; }
  .ld-obj-focus--dark.is-on { transform: none; }
}

/* fight sequence — pinned scroll-scrub · projects pop per exchange */
.ld-fight-zone { position: relative; height: 420vh; }
.ld-fight-pin { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.ld-fight-stage { position: relative; width: min(1120px, 94vw); }
#fightCanvas { width: 100%; height: auto; display: block; }
.ld-fight-callout { position: absolute; top: 6%; width: min(300px, 28vw);
  border: 1px solid #26262a; background: rgba(13, 13, 15, .93); padding: 14px 16px;
  opacity: 0; transform: translateY(14px); transition: opacity .3s ease, transform .3s ease;
  pointer-events: none; }
.ld-fight-callout.is-on { opacity: 1; transform: none; }
.ld-fight-callout[data-side="left"] { left: 0; }
.ld-fight-callout[data-side="right"] { right: 0; }
.ld-fight-callout .tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: #8a8a86; margin-bottom: 8px; }
.ld-fight-callout .name { font-family: var(--font-mono); font-size: 15px; font-weight: 700; color: #e8e8e2; }
.ld-fight-callout p { font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: #8a8a86; margin: 6px 0 0; }
.ld-fight-progress { width: 220px; height: 2px; background: #26262a; }
.ld-fight-progress span { display: block; width: 0; height: 100%; background: #e8e8e2; }
@media (max-width: 900px) {
  .ld-fight-zone { height: auto; }
  .ld-fight-pin { position: static; height: auto; overflow: visible; padding: 48px 0; }
  .ld-fight-callout { position: static; width: auto; margin: 12px 16px 0; opacity: 1; transform: none; }
  .ld-fight-progress { display: none; }
}

/* grounded strip — school / work / teaching · these LANDED (full-bleed) */
.ld-grounded { position: relative; width: 100vw; margin: 72px 0 64px calc(50% - 50vw); }
.ld-grounded > .ld-panel-eyebrow { padding: 0 clamp(24px, 5vw, 64px); }
.ld-grounded__row { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; padding: 42px clamp(24px, 5vw, 64px) 0; }
.ld-grounded__item { border: 1px solid #26262a; background: #111113; padding: 18px 20px 16px;
  min-width: 0; flex: 1 1 0; }
.ld-grounded__item .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: #55554f; margin-bottom: 8px; }
.ld-grounded__item b { display: block; font-family: var(--font-label); font-size: 15px;
  letter-spacing: .01em; color: #e8e8e2; }
.ld-grounded__item span { display: block; font-family: var(--font-mono); font-size: 12px;
  line-height: 1.6; color: #8a8a86; margin-top: 6px; }
.ld-grounded__ground { height: 0; border-top: 2px solid #2e2e32; }
@media (prefers-reduced-motion: no-preference) {
  .ld-grounded__item { opacity: 0; transform: translateY(-30px);
    transition: opacity .5s ease, transform .55s cubic-bezier(.3, 1.2, .4, 1); }
  .ld-grounded.is-set .ld-grounded__item { opacity: 1; transform: none; }
  .ld-grounded.is-set .ld-grounded__item:nth-child(2) { transition-delay: .1s; }
  .ld-grounded.is-set .ld-grounded__item:nth-child(3) { transition-delay: .2s; }
  .ld-grounded.is-set .ld-grounded__item:nth-child(4) { transition-delay: .3s; }
}
@media (max-width: 900px) { .ld-grounded__row { flex-wrap: wrap; } .ld-grounded__item { flex: 1 1 45%; } }

/* trophy cabinet — honors on display */
.ld-cabinet { position: relative; height: 620px; margin-top: 30px; }
.ld-cabinet canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* focus mode — canvas goes FULLSCREEN so a model can be freely rotated with
   no edge-clipping; the description panel floats over it near center. */
.ld-cabinet.is-focus { position: fixed; inset: 0; width: 100vw; height: 100vh;
  margin: 0; z-index: 9999;
  background: radial-gradient(130% 130% at 32% 42%, #14141a, #060608); }
.ld-cabinet.is-focus canvas { cursor: grab; }
.ld-cabinet .ld-objfield__tip { background: rgba(13, 13, 15, .95); border-color: #2e2e32;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }
.ld-cabinet .ld-objfield__tip b { color: #e8e8e2; }
.ld-cabinet .ld-objfield__tip span:last-child { color: #8a8a86; }
.ld-grounded__row--plaques { padding-top: 18px; }
/* big centered section titles — Resume (cabinet) · Projects (designer field).
   Matched to .ld-zone-intro h2 (same family/size/tracking) so they sit in the
   same type system as "Designer 想象力是反重力的" instead of shouting over it. */
.ld-section-title { font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(32px, 4.6vw, 54px); line-height: 1.05; text-align: center; margin: 0; }
.ld-objfield-wrap .ld-section-title { color: var(--text-strong, #1a1a1c); padding: 22px 0 6px; }
.ld-grounded .ld-section-title { color: #e8e8e2; padding: 6px 0 0; }
@media (max-width: 900px) { .ld-cabinet { height: clamp(240px, 82vw, 400px); margin-top: 12px; } }

/* code zone footer */
.ld-code__foot { padding: 88px 24px 72px; text-align: center; }
.ld-code__foot .q { font-family: var(--font-serif); font-style: italic; font-size: clamp(22px, 3vw, 32px);
  line-height: 1.4; color: #e8e8e2; max-width: 30ch; margin: 0 auto 14px; text-wrap: balance; }
.ld-code__foot .q-en { font-family: var(--font-serif); font-style: italic; font-size: clamp(14px, 1.6vw, 17px);
  line-height: 1.6; color: #8a8a86; max-width: 52ch; margin: 0 auto 44px; text-wrap: balance; }
.ld-code__foot .prompt { font-family: var(--font-mono); font-size: 14px; color: #8a8a86; }
.ld-code__foot .prompt a { color: #e8e8e2; text-decoration: none; border-bottom: 1px solid #4e4e4e; }
.ld-code__foot .prompt a:hover { border-color: #e8e8e2; }
.ld-code__foot .cursor { display: inline-block; width: 8px; height: 16px; background: #e8e8e2;
  vertical-align: -2px; animation: ld-blink 1.1s steps(1) infinite; }
@keyframes ld-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ld-code__foot .cursor { animation: none; } }

/* zone paddings */
.ld-code__projects { padding: 0 0 clamp(48px, 7vw, 96px); }

/* ---------- responsive ---------- */
/* ============================================================
   INTERACTIVE PANELS — UE5 Blueprint mock (designer zone) and
   VS-style LeetCode editor (programmer zone).
   ============================================================ */
.ld-panel-eyebrow { font-family: var(--font-label); font-weight: 600; letter-spacing: .16em;
  text-transform: uppercase; font-size: 12px; color: var(--text-faint); margin-bottom: 14px; }
.ld-panel-eyebrow--dark { color: #7a7a74; }
.ld-panel-cap { font-family: var(--font-mono); font-size: 12.5px; color: var(--text-faint); margin: 12px 0 0; }
.ld-bp-wrap { padding: 0 0 44px; }

/* ---- pinned scroll-scrub screens (intro + panel pairs) ---- */
.ld-pin-zone { position: relative; height: 210vh; }
.ld-pin-zone--code { height: 155vh; } /* engineer intro — half the original 110vh of pinned travel: still zooms & sticks, reaches the cabinet twice as fast */
.ld-pin-zone--design { height: 135vh; } /* designer intro — zoom-in on arrival only; no shrink-out and no dead travel above */
.ld-pin { position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; }
.ld-pin__fx { width: 100%; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: clamp(20px, 3vw, 36px);
  transform-origin: 50% 50%; will-change: transform, opacity; }
.ld-pin__fx > * { min-width: 0; }
.ld-pin .ld-zone-intro { padding-top: 26px; padding-bottom: 22px; }
.ld-pin .ld-bp-wrap, .ld-pin .ld-lc-wrap { width: min(1100px, 100%); margin: 0 auto;
  padding-left: clamp(20px, 5vw, 56px); padding-right: clamp(20px, 5vw, 56px); box-sizing: border-box; }
.ld-pin .ld-bp-wrap { padding-bottom: 0; }
@media (max-width: 900px) {
  .ld-pin-zone { height: auto; }
  .ld-pin { position: static; height: auto; overflow: visible; }
  .ld-pin__fx { flex-direction: column; transform: none !important; opacity: 1 !important; }
}

/* ---- Blueprint window (authentic UE5 graph darks) ---- */
.bp-window { background: #1f1f1f; border: 1px solid #000; border-radius: var(--radius-md);
  overflow: hidden; box-shadow: var(--shadow-xl); user-select: none; }
.bp-head { display: flex; align-items: center; gap: 12px; background: #141414; padding: 0 12px; }
.bp-head__tab { font-family: var(--font-body); font-size: 12.5px; color: #e8d67a; background: #383838;
  padding: 7px 16px; border-radius: 4px 4px 0 0; margin-top: 6px; }
.bp-head__bp { font-family: var(--font-mono); font-size: 11.5px; color: #9a9a9a; }
.bp-reset { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: #bdbdbd;
  background: #2c2c2c; border: 1px solid #454545; border-radius: 3px; padding: 4px 12px; cursor: pointer; }
.bp-reset:hover { background: #383838; color: #fff; }
.bp-body { display: grid; grid-template-columns: 240px 1fr; }
.bp-dt { background: #262626; border-right: 1px solid #141414; padding: 12px; }
.bp-dt__title { font-family: var(--font-body); font-size: 12px; color: #d8d8d8; margin-bottom: 10px; }
.bp-dt table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 10.5px; }
.bp-dt th { text-align: left; color: #8a8a8a; font-weight: 500; padding: 4px 6px; background: #1d1d1d; }
.bp-dt td { color: #c9c9c4; padding: 4px 6px; border-top: 1px solid #1d1d1d; white-space: nowrap; }
.bp-dt tr.is-hot td { background: #21324a; color: #cfe3ff; }
.bp-dt__hint { font-family: var(--font-body); font-size: 11px; color: #7a7a74; margin-top: 12px; line-height: 1.6; }
.bp-graph { position: relative; height: 420px; overflow: hidden;
  background: #2a2a2a;
  background-image:
    linear-gradient(#242424 1px, transparent 1px), linear-gradient(90deg, #242424 1px, transparent 1px),
    linear-gradient(#202020 1px, transparent 1px), linear-gradient(90deg, #202020 1px, transparent 1px);
  background-size: 16px 16px, 16px 16px, 128px 128px, 128px 128px; }
.bp-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.bp-wire { fill: none; stroke-width: 2.5; opacity: .95; }
.bp-wire--temp { stroke-dasharray: 6 4; opacity: .7; }
.bp-wire.is-pulse { stroke-dasharray: 10 6; animation: bp-flow .5s linear infinite; }
@keyframes bp-flow { to { stroke-dashoffset: -16; } }
.bp-node { position: absolute; min-width: 200px; background: rgba(20,20,20,.94);
  border: 1px solid #000; border-radius: 8px; box-shadow: 0 10px 26px -8px rgba(0,0,0,.7);
  font-family: var(--font-body); }
.bp-node__head { display: flex; align-items: baseline; gap: 8px; color: #fff; font-size: 13px;
  font-weight: 600; padding: 7px 12px; border-radius: 7px 7px 0 0; cursor: grab;
  background-image: linear-gradient(rgba(255,255,255,.14), transparent); }
.bp-node__head:active { cursor: grabbing; }
.bp-node__ic { font-size: 11px; opacity: .9; }
.bp-node__sub { font-size: 10px; font-weight: 400; color: rgba(255,255,255,.55); margin-left: auto; }
.bp-node__body { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0 12px; }
.bp-node__col { display: flex; flex-direction: column; gap: 9px; }
.bp-node__col--out { margin-left: auto; }
.bp-pinrow { display: flex; align-items: center; gap: 7px; padding: 0 10px; font-size: 11.5px; color: #cfcfcf; }
.bp-pinrow--out { justify-content: flex-end; }
.bp-pinrow__lab { display: flex; align-items: center; gap: 6px; }
.bp-chip { font-family: var(--font-mono); font-style: normal; font-size: 10px; color: #dcdcdc;
  background: #2e2e2e; border: 1px solid #4a4a4a; border-radius: 3px; padding: 2px 7px; }
.bp-pin { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 2px solid var(--c);
  background: transparent; cursor: crosshair; transition: box-shadow .15s, background .15s; }
.bp-pin--exec { border-radius: 2px; clip-path: polygon(0 0, 55% 0, 100% 50%, 55% 100%, 0 100%); border: none; background: var(--c); opacity: .85; }
.bp-pin:hover { box-shadow: 0 0 8px var(--c); }
.bp-pin.is-linked { background: var(--c); opacity: 1; }
.bp-pin.is-bad { animation: bp-shake .35s; box-shadow: 0 0 8px #ff4040; }
@keyframes bp-shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.bp-log { position: absolute; left: 10px; right: 10px; bottom: 10px; max-height: 92px; overflow: auto;
  font-family: var(--font-mono); font-size: 11px; line-height: 1.7; color: #b7d2a8;
  background: rgba(10,10,10,.82); border: 1px solid #000; border-radius: 4px; padding: 6px 10px;
  pointer-events: none; }
.bp-log:empty { display: none; }
.bp-log__line.is-ok { color: #7ee2a8; }
.bp-log__line.is-pass { color: #4ade80; font-weight: 700; }

/* ---- LeetCode / VS panel ---- */
.ld-lc-wrap { padding: 0; }
.lc-window { display: grid; grid-template-columns: 0.9fr 1.1fr; background: #1e1e1e;
  border: 1px solid #333; border-radius: var(--radius-md); overflow: hidden;
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.6); }
.lc-problem { padding: 20px 22px; border-right: 1px solid #333; font-family: var(--font-body);
  color: #c9c9c4; font-size: 14px; line-height: 1.7; }
.lc-problem__head { font-size: 17px; font-weight: 700; color: #f2f2ee; margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px; }
.lc-problem__no { color: #8a8a86; font-weight: 500; }
.lc-badge { font-size: 11px; font-weight: 600; color: #00b8a3; background: rgba(0,184,163,.14);
  border-radius: var(--radius-pill); padding: 3px 10px; }
.lc-problem code { font-family: var(--font-mono); font-size: 12.5px; background: #2c2c2c;
  border-radius: 4px; padding: 1px 6px; color: #e8e8e2; }
.lc-ex { margin-top: 14px; }
.lc-ex b { color: #e8e8e2; font-size: 13px; }
.lc-ex pre { font-family: var(--font-mono); font-size: 12.5px; color: #b9c2cc; background: #262626;
  border-radius: 6px; padding: 10px 12px; margin: 6px 0 0; white-space: pre-wrap; }
.lc-stats { display: flex; gap: 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid #333;
  font-size: 12px; color: #8a8a86; }
.lc-stats b { color: #e8e8e2; font-weight: 600; }
.lc-editor { display: flex; flex-direction: column; min-height: 420px; }
.lc-editor__tabs { display: flex; align-items: center; background: #252526; border-bottom: 1px solid #333; }
.lc-tab { font-family: var(--font-mono); font-size: 12px; color: #8a8a86; padding: 9px 18px;
  border-right: 1px solid #333; }
.lc-tab.is-active { background: #1e1e1e; color: #e8e8e2; border-top: 1.5px solid #e8e8e2; }
.lc-lang { margin-left: auto; padding-right: 14px; font-family: var(--font-mono); font-size: 11px; color: #6e6e6e; }
.lc-editor__body { position: relative; flex: 1; display: flex; overflow: hidden; }
.lc-lines { padding: 14px 10px 14px 18px; text-align: right; font-family: var(--font-mono);
  font-size: 13px; line-height: 1.65; color: #4e4e4e; user-select: none; overflow: hidden; white-space: pre; }
.lc-code { flex: 1; resize: none; border: 0; outline: 0; background: transparent; color: #d4d4d4;
  font-family: var(--font-mono); font-size: 13px; line-height: 1.65; padding: 14px 16px 14px 6px;
  white-space: pre; caret-color: #e8e8e2; }
.lc-code::selection { background: #264f78; }
.lc-editor__bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  background: #252526; border-top: 1px solid #333; }
.lc-btn { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; color: #c9c9c4;
  background: #2c2c2c; border: 1px solid #454545; border-radius: 5px; padding: 6px 16px; cursor: pointer; }
.lc-btn:hover { background: #383838; }
.lc-btn--primary { background: #2ea043; border-color: #2ea043; color: #fff; }
.lc-btn--primary:hover { background: #36b24d; }
.lc-note { font-family: var(--font-mono); font-size: 11.5px; color: #7ee2a8; opacity: 0;
  transition: opacity .3s var(--ease-out); }
.lc-note.is-on { opacity: 1; }

@media (max-width: 900px) {
  .bp-body { grid-template-columns: 1fr; }
  .bp-dt { border-right: 0; border-bottom: 1px solid #141414; }
  .lc-window { grid-template-columns: 1fr; }
  .lc-problem { border-right: 0; border-bottom: 1px solid #333; }
}

@media (max-width: 800px) {
  .ld-proj { grid-template-columns: 1fr; }
  .ld-proj--flip .ld-proj__media { order: 0; }
  .ld-rail { right: 14px; }
  .ld-editor__body { font-size: 12px; }
}