:root {
  --paper: #f2f0ea;
  --paper-deep: #e8e5de;
  --ink: #1d1d1b;
  --muted: #6c6a64;
  --line: rgba(29, 29, 27, 0.15);
  --surface: #faf9f5;
  --surface-strong: #fdfcf9;
  --accent: #e85f3d;
  --accent-soft: #f7ddd5;
  --shadow: 0 24px 64px rgba(50, 44, 35, 0.13);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #161715;
    --paper-deep: #20211f;
    --ink: #f1f0eb;
    --muted: #aaa8a1;
    --line: rgba(241, 240, 235, 0.14);
    --surface: #1d1e1c;
    --surface-strong: #242522;
    --accent: #f27857;
    --accent-soft: #432a24;
    --shadow: 0 28px 72px rgba(4, 5, 4, 0.42);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-width: 320px;
  min-height: 100dvh;
  background: var(--paper);
  color: var(--ink);
  font-family: "Avenir Next", Avenir, "SF Pro Display", "PingFang SC", "Microsoft YaHei", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, a { color: inherit; font: inherit; }
button { border: 0; }
img { display: block; max-width: 100%; }
button:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: 250px 1fr auto;
  align-items: center;
  min-height: 68px;
  padding: 10px clamp(18px, 3vw, 44px);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--paper) 90%, transparent);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.site-header > p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.identity {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  width: max-content;
  color: inherit;
  text-decoration: none;
}
.identity-mark {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
  border-radius: 50%;
  background: transparent;
  object-fit: contain;
  object-position: center;
  box-shadow: 0 5px 16px rgba(29,29,27,.09);
}
.identity strong, .identity small { display: block; }
.identity strong { font-size: 14px; }
.identity small { margin-top: 2px; color: var(--muted); font-size: 10px; letter-spacing: 0.04em; }
.index-toggle {
  display: none;
  min-height: 38px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
}

.portfolio-layout {
  display: grid;
  grid-template-columns: clamp(220px, 20vw, 284px) minmax(0, 1fr);
  max-width: 1680px;
  margin: 0 auto;
}
.project-index {
  position: sticky;
  top: 68px;
  height: calc(100dvh - 68px);
  overflow-y: auto;
  padding: 30px 22px 44px clamp(20px, 3vw, 44px);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.index-intro { padding: 0 6px 24px; }
.index-intro strong { font-size: 22px; letter-spacing: -0.04em; }
.index-intro p { max-width: 24ch; margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.nav-group + .nav-group { margin-top: 28px; }
.nav-group h2 { margin: 0 0 9px 6px; color: var(--muted); font-size: 11px; font-weight: 650; }
.nav-items { display: grid; gap: 5px; }
.project-link {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 50px;
  padding: 7px 8px;
  border-radius: 14px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
}
.project-link:hover { background: var(--surface); }
.project-link:active { transform: scale(0.985); }
.project-link.is-active { background: var(--accent-soft); }
.project-link img {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--surface-strong);
}
.project-link span { min-width: 0; }
.project-link strong, .project-link small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-link strong { font-size: 12px; }
.project-link small { margin-top: 3px; color: var(--muted); font-size: 9px; }

.case-page { min-width: 0; padding: 46px clamp(24px, 5vw, 76px) 96px; }
.case-page:focus { outline: none; }
.case-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 32px;
  align-items: end;
  max-width: 1160px;
  margin: 0 auto 34px;
}
.case-kind { margin: 0 0 10px; color: var(--accent); font-size: 12px; font-weight: 760; }
.case-hero h1 {
  max-width: 11ch;
  margin: 0;
  font-size: clamp(42px, 6vw, 78px);
  line-height: 0.96;
  letter-spacing: -0.07em;
}
.case-summary { max-width: 650px; margin: 22px 0 0; color: var(--muted); font-size: clamp(15px, 1.6vw, 19px); line-height: 1.65; }
.hero-meta { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.project-pager { display: flex; gap: 6px; }
.project-pager button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  cursor: pointer;
}
.project-pager button:active { transform: translateY(1px); }

.demo-section { max-width: 1160px; margin: 0 auto; }
.demo-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; }
.demo-toolbar p { margin: 0; font-size: 13px; font-weight: 720; }
.demo-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.demo-controls button {
  min-height: 34px;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}
.demo-controls button.is-active { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.demo-surface {
  min-height: 570px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.demo-surface.is-phone { padding: clamp(18px, 4vw, 48px); }
.phone-experience { display: grid; grid-template-columns: minmax(300px, 390px) minmax(250px, 1fr); gap: clamp(24px, 5vw, 72px); align-items: center; max-width: 900px; margin: 0 auto; }
.phone-frame {
  position: relative;
  width: min(390px, 100%);
  height: 760px;
  margin: 0 auto;
  padding: 9px;
  border: 1px solid #343632;
  border-radius: 43px;
  background: #171916;
  box-shadow: 0 22px 60px rgba(16, 18, 15, 0.25), inset 0 0 0 1px rgba(250, 249, 245, 0.08);
}
.device-island { position: absolute; z-index: 8; top: 17px; left: 50%; width: 86px; height: 23px; transform: translateX(-50%); border-radius: 999px; background: #090a09; }
.phone-screen { position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 34px; background: #f7f5f0; color: #20211e; }
.phone-screen iframe { display: block; width: 100%; height: 100%; border: 0; background: #f7f5f0; }
.phone-status { position: absolute; z-index: 7; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 20px; font-size: 10px; font-weight: 800; pointer-events: none; }
.phone-head { display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; min-height: 78px; padding: 33px 15px 9px; border-bottom: 1px solid rgba(32,33,30,.09); background: rgba(247,245,240,.94); backdrop-filter: blur(14px); }
.phone-head img { width: 38px; height: 38px; border-radius: 11px; object-fit: cover; }
.phone-head strong, .phone-head small { display: block; }
.phone-head strong { font-size: 13px; }
.phone-head small { margin-top: 2px; color: #85827d; font-size: 9px; }
.phone-head button { width: 30px; height: 30px; border-radius: 50%; background: #ebe8e2; cursor: pointer; }
.phone-body { height: calc(100% - 78px); overflow-y: auto; scrollbar-width: none; }
.phone-body::-webkit-scrollbar { display: none; }
.experience-copy h2 { max-width: 12ch; margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1.08; letter-spacing: -0.05em; }
.experience-copy > p { max-width: 36ch; margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.interaction-guide { display: grid; gap: 11px; margin-top: 28px; }
.guide-row { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; }
.guide-row span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 10px; font-weight: 800; }
.guide-row p { margin: 2px 0 0; font-size: 12px; line-height: 1.55; }
.runtime-proof { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 12px; margin-top: 24px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-strong); }
.runtime-proof span { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .12em; }
.runtime-proof b { justify-self: end; font-size: 12px; }
.runtime-proof small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; letter-spacing: .08em; }

/* IF line */
.if-cover { position: relative; height: 230px; overflow: hidden; }
.if-cover img { width: 100%; height: 100%; object-fit: cover; object-position: center 23%; }
.if-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 30%, rgba(8,14,22,.9)); }
.if-cover-copy { position: absolute; z-index: 2; left: 17px; right: 17px; bottom: 16px; color: #f8f6f1; }
.if-cover-copy small { font-size: 9px; letter-spacing: .08em; }
.if-cover-copy h3 { margin: 6px 0 3px; font-family: "Songti SC", serif; font-size: 21px; }
.if-cover-copy p { margin: 0; color: rgba(248,246,241,.72); font-size: 9px; }
.story-panel { padding: 16px 17px 30px; }
.npc-row { display: flex; align-items: center; gap: 9px; }
.npc-row img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.npc-row strong, .npc-row small { display: block; }
.npc-row strong { font-size: 12px; }
.npc-row small { margin-top: 2px; color: #928f89; font-size: 9px; }
.chapter-progress { display: flex; gap: 5px; margin: 14px 0 12px; }
.chapter-progress i { flex: 1; height: 3px; border-radius: 9px; background: #dedad1; }
.chapter-progress i.is-active { background: #e85f3d; }
.story-panel > h4 { margin: 0 0 7px; font-family: "Songti SC", serif; font-size: 16px; }
.story-panel > p { margin: 0 0 12px; color: #5f5c56; font-family: "Songti SC", serif; font-size: 12px; line-height: 1.85; }
.voice-player { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; width: 100%; padding: 10px; border-radius: 14px; background: #252724; color: #f7f5f0; text-align: left; cursor: pointer; }
.voice-player b { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e85f3d; font-size: 10px; }
.voice-player strong, .voice-player small { display: block; }
.voice-player strong { font-size: 10px; }
.voice-player small { margin-top: 2px; color: #b9b7b1; font-size: 8px; }
.voice-player em { color: #9b9e98; font-size: 9px; font-style: normal; }
.story-actions { display: flex; gap: 8px; margin-top: 12px; }
.story-actions button { flex: 1; min-height: 36px; border-radius: 999px; background: #e9e5dd; color: #4f4d48; font-size: 10px; cursor: pointer; }
.story-actions button:last-child { background: #e85f3d; color: #faf8f3; }

/* Roam */
.roam-tabs { display: grid; grid-template-columns: repeat(3, 1fr); padding: 9px 13px 0; }
.roam-tabs button { padding: 9px 2px; border-bottom: 2px solid transparent; background: transparent; color: #8d8981; font-size: 10px; cursor: pointer; }
.roam-tabs button.is-active { border-color: #e85f3d; color: #252622; font-weight: 800; }
.roam-pane { padding: 12px 14px 28px; }
.roam-search-box { padding: 11px 12px; border-radius: 13px; background: #e9e6df; color: #77736d; font-size: 10px; }
.roam-feature { margin-top: 12px; overflow: hidden; border-radius: 16px; background: #243033; color: #f8f4ed; }
.roam-feature img { width: 100%; height: 155px; object-fit: cover; object-position: center 25%; opacity: .78; }
.roam-feature div { padding: 12px 13px 14px; }
.roam-feature small { color: #ffc1ac; font-size: 8px; }
.roam-feature h3 { margin: 5px 0; font-size: 14px; line-height: 1.35; }
.roam-feature p { margin: 0; color: #bfc4c1; font-size: 9px; }
.roam-list { display: grid; gap: 8px; margin-top: 10px; }
.roam-item { padding: 12px; border: 1px solid #dedad2; border-radius: 14px; background: #fbfaf6; }
.roam-item small, .roam-item strong, .roam-item p { display: block; }
.roam-item small { color: #96928a; font-size: 8px; }
.roam-item strong { margin-top: 5px; font-size: 11px; line-height: 1.4; }
.roam-item p { margin: 6px 0 0; color: #77736d; font-size: 9px; line-height: 1.55; }
.search-history button { width: 100%; padding: 12px 0; border-bottom: 1px solid #e3dfd7; background: transparent; text-align: left; font-size: 11px; cursor: pointer; }
.search-history small { display: block; margin-top: 4px; color: #9b978f; font-size: 8px; }
.anonymous-post h3 { margin: 8px 0; font-size: 17px; line-height: 1.35; }
.anonymous-post p { color: #5f5d57; font-size: 11px; line-height: 1.75; }
.anonymous-post footer { display: flex; justify-content: space-between; color: #99958d; font-size: 9px; }

/* Elsewhen */
.world-cover { position: relative; height: 390px; overflow: hidden; background: #121d29; }
.world-cover img { width: 100%; height: 100%; object-fit: cover; }
.world-cover::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 34%, rgba(10,18,29,.96)); }
.world-copy { position: absolute; z-index: 2; left: 18px; right: 18px; bottom: 18px; color: #f3ead7; }
.world-copy small { color: #d7b57e; font-size: 9px; }
.world-copy h3 { margin: 7px 0 8px; font-family: "Songti SC", serif; font-size: 22px; line-height: 1.25; }
.world-copy p { margin: 0; color: #c2bfb6; font-family: "Songti SC", serif; font-size: 10px; line-height: 1.6; }
.world-chapter { padding: 17px 18px 30px; background: #121d29; color: #ede6d7; }
.world-chapter small { color: #bd9b6f; font-size: 9px; }
.world-chapter h4 { margin: 8px 0; font-family: "Songti SC", serif; font-size: 16px; }
.world-chapter p { margin: 0; color: #bcbab3; font-family: "Songti SC", serif; font-size: 11px; line-height: 1.75; }
.world-chapter button { width: 100%; min-height: 38px; margin-top: 14px; border: 1px solid #66543e; border-radius: 999px; background: #1c2939; color: #e4c793; font-size: 10px; cursor: pointer; }

/* Heart park */
.park-media { position: relative; height: 100%; min-height: 520px; background: #e8e0f0; }
.park-media img { width: 100%; height: 100%; min-height: 520px; object-fit: cover; }
.park-card { position: absolute; left: 15px; right: 15px; bottom: 16px; padding: 14px; border-radius: 18px; background: rgba(250,249,245,.92); backdrop-filter: blur(12px); }
.park-card small { color: #806f88; font-size: 9px; }
.park-card h3 { margin: 6px 0 9px; color: #413945; font-size: 17px; }
.park-card p { margin: 0 0 9px; color: #6e6870; font-size: 10px; line-height: 1.55; }
.park-card button { width: 100%; min-height: 38px; margin-top: 7px; border-radius: 999px; background: #7f638c; color: #faf8f3; font-size: 10px; cursor: pointer; }
.park-choice { background: rgba(250,249,245,.94) !important; color: #5d4f63 !important; border: 1px solid #d6c8da !important; }
.park-ticket { padding: 20px 18px 34px; text-align: center; }
.park-ticket img { width: 190px; margin: 0 auto; filter: drop-shadow(0 12px 18px rgba(70,55,77,.18)); }
.park-ticket h3 { margin: 12px 0 5px; color: #493c4d; font-size: 17px; }
.park-ticket p { margin: 0; color: #817684; font-size: 10px; line-height: 1.6; }
.park-ticket button { min-height: 36px; margin-top: 12px; padding: 0 18px; border-radius: 999px; background: #7f638c; color: #faf8f3; font-size: 10px; cursor: pointer; }

/* Psst */
.psst-profile { display: flex; align-items: center; gap: 9px; padding: 12px 14px 9px; }
.psst-profile img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; object-position: center 18%; }
.psst-profile strong, .psst-profile small { display: block; }
.psst-profile strong { font-size: 12px; }
.psst-profile small { margin-top: 2px; color: #99958e; font-size: 8px; }
.psst-shot { position: relative; height: 390px; margin: 0 12px; overflow: hidden; border-radius: 18px; background: #e7e1dc; }
.psst-shot img { width: 100%; height: 100%; object-fit: cover; }
.psst-shot button { position: absolute; top: 50%; display: grid; place-items: center; width: 32px; height: 48px; transform: translateY(-50%); border-radius: 14px; background: rgba(24,23,22,.46); color: #f9f7f2; font-size: 20px; cursor: pointer; }
.psst-shot button:first-of-type { left: 8px; }
.psst-shot button:last-of-type { right: 8px; }
.psst-shot span { position: absolute; right: 9px; bottom: 9px; padding: 5px 8px; border-radius: 999px; background: rgba(24,23,22,.58); color: #f9f7f2; font-size: 8px; }
.psst-text { padding: 12px 16px 8px; }
.psst-text p { min-height: 38px; margin: 0; font-family: "Songti SC", serif; font-size: 12px; line-height: 1.6; }
.psst-actions { display: flex; gap: 8px; padding: 6px 14px 14px; }
.psst-actions button { flex: 1; min-height: 38px; border: 1px solid #e1d5d2; border-radius: 999px; background: #fbfaf6; color: #554b48; font-size: 10px; cursor: pointer; }
.psst-actions button.is-liked { background: #efcad3; color: #9c3452; }
.album-strip { display: flex; gap: 6px; padding: 0 14px 24px; }
.album-strip button { flex: 1; aspect-ratio: 1; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 11px; background: #eee; cursor: pointer; }
.album-strip button.is-active { border-color: #d75b78; }
.album-strip img { width: 100%; height: 100%; object-fit: cover; }

/* Web tools */
.web-demo { min-height: 650px; background: #d9d8d4; }
.browser-bar { display: grid; grid-template-columns: 70px minmax(120px, 1fr) 32px; align-items: center; gap: 12px; height: 48px; padding: 0 14px; border-bottom: 1px solid rgba(28,29,27,.12); background: #f0eee8; color: #31322e; }
.traffic { display: flex; gap: 5px; }
.traffic i { width: 9px; height: 9px; border-radius: 50%; background: #bab7af; }
.browser-address { overflow: hidden; padding: 8px 13px; border-radius: 999px; background: #fbfaf7; color: #77746d; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.browser-bar a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fbfaf7; text-decoration: none; }
.web-demo iframe { display: block; width: 100%; height: 602px; border: 0; background: #f7f6f2; }

/* Jude */
.jude-demo { padding: clamp(18px, 3vw, 36px); }
.jude-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(250px, .7fr); gap: 24px; align-items: start; }
.jude-screen { overflow: hidden; border-radius: 18px; background: #20211f; }
.jude-screen img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.jude-flow { padding: 6px 2px; }
.jude-flow h2 { margin: 0; font-size: 30px; letter-spacing: -0.05em; }
.jude-flow > p { margin: 10px 0 22px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.voice-runner { width: 100%; min-height: 48px; border-radius: 999px; background: var(--ink); color: var(--paper); font-weight: 750; cursor: pointer; }
.voice-runner.is-running { background: var(--accent); }
.voice-steps { display: grid; gap: 10px; margin-top: 18px; }
.voice-step { display: grid; grid-template-columns: 26px 1fr; gap: 9px; opacity: .38; transition: opacity 240ms ease, transform 240ms ease; }
.voice-step.is-active { opacity: 1; transform: translateX(4px); }
.voice-step b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--paper-deep); font-size: 9px; }
.voice-step strong, .voice-step small { display: block; }
.voice-step strong { font-size: 11px; }
.voice-step small { margin-top: 3px; color: var(--muted); font-size: 9px; line-height: 1.45; }

/* Growth cases */
.growth-demo { padding: clamp(20px, 4vw, 48px); }
.metrics-line { display: flex; flex-wrap: wrap; gap: clamp(24px, 6vw, 84px); margin-bottom: 28px; }
.metric { min-width: 120px; }
.metric strong { display: block; color: var(--accent); font-size: clamp(30px, 4vw, 54px); line-height: 1; letter-spacing: -0.06em; }
.metric span { display: block; margin-top: 7px; color: var(--muted); font-size: 10px; }
.growth-system-demo { min-height: 620px; }
.growth-funnel { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--line); }
.growth-funnel article { position: relative; min-height: 210px; padding: 24px 20px; background: var(--surface-strong); }
.growth-funnel article::after { content: ""; position: absolute; top: 50%; right: -7px; z-index: 2; width: 13px; height: 13px; border-top: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--surface-strong); transform: translateY(-50%) rotate(45deg); }
.growth-funnel article:last-child::after { display: none; }
.growth-funnel article > span { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; }
.growth-funnel h3 { margin: 42px 0 8px; font-size: 17px; letter-spacing: -.03em; }
.growth-funnel p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.channel-contribution { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 18px; }
.channel-contribution > article { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-strong); }
.channel-contribution small { color: var(--accent); font-size: 9px; font-weight: 800; letter-spacing: .1em; }
.channel-contribution h3 { margin: 8px 0 18px; font-size: 24px; letter-spacing: -.04em; }
.channel-contribution dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; }
.channel-contribution dl div { min-width: 0; }
.channel-contribution dt { color: var(--muted); font-size: 9px; }
.channel-contribution dd { margin: 5px 0 0; font-size: 14px; font-weight: 800; }
.channel-contribution footer { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; background: var(--accent-soft); }
.channel-contribution footer span { font-size: 10px; }
.channel-contribution footer strong { font-size: 16px; }
.channel-contribution footer b { color: var(--accent); font-size: 28px; letter-spacing: -.05em; }
.growth-boundary { display: grid; grid-template-columns: 120px 1fr; gap: 20px; margin-top: 18px; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: var(--paper); }
.growth-boundary b { color: var(--accent); font-size: 11px; letter-spacing: .08em; }
.growth-boundary p { margin: 0; font-size: 11px; line-height: 1.7; opacity: .78; }
.event-ledger { overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--surface-strong); }
.event-ledger > * { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 20px; padding: 17px 20px; border-bottom: 1px solid var(--line); }
.event-ledger > *:last-child { border-bottom: 0; }
.event-ledger header { background: var(--ink); color: var(--paper); font-size: 10px; font-weight: 800; letter-spacing: .07em; }
.event-ledger div span { min-width: 0; overflow-wrap: anywhere; font-size: 11px; }
.event-ledger div span:first-child { color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.event-ledger div span:not(:first-child) { color: var(--muted); }

.landing-stage { position: relative; min-height: 610px; overflow: hidden; border-radius: 24px; background: #151515; color: #fff; isolation: isolate; }
.landing-stage > img { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.landing-backdrop { position: absolute; z-index: -1; inset: 0; background-image: linear-gradient(90deg, rgba(10,10,10,.84) 0 36%, rgba(10,10,10,.2) 68%, rgba(10,10,10,.55)), var(--landing-image); background-position: center; background-size: cover; filter: saturate(.9); }
.my-corner-stage > img { left: auto; right: 4%; width: min(54%, 580px); height: calc(100% - 54px); margin: 27px 0; border-radius: 18px; object-fit: cover; object-position: top center; box-shadow: 0 24px 70px rgba(0,0,0,.45); }
.landing-copy { position: absolute; z-index: 2; left: clamp(24px, 5vw, 68px); bottom: clamp(28px, 7vw, 74px); width: min(42%, 430px); }
.landing-copy small { color: #ffb19e; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.landing-copy h2 { margin: 12px 0 10px; font-size: clamp(34px, 5vw, 68px); line-height: .98; letter-spacing: -.065em; }
.landing-copy p { margin: 0 0 20px; color: rgba(255,255,255,.75); font-size: 13px; line-height: 1.7; }
.landing-copy button { min-height: 46px; padding: 0 24px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.landing-copy em { display: block; margin-top: 14px; color: rgba(255,255,255,.52); font-size: 9px; font-style: normal; line-height: 1.6; }

.playlet-stage > img { opacity: .82; object-position: center 22%; }
.playlet-stage::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.84), rgba(0,0,0,.18) 70%), linear-gradient(0deg, rgba(0,0,0,.72), transparent 70%); }
.playlet-progress { position: absolute; top: 24px; left: 24px; right: 24px; display: flex; gap: 6px; }
.playlet-progress i { flex: 1; height: 3px; border-radius: 99px; background: rgba(255,255,255,.28); }
.playlet-progress i.is-active { background: #fff; }

.moment-stage { position: relative; min-height: 650px; overflow: hidden; border-radius: 28px; background: #080808; color: #fff; }
.moment-hero { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.moment-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 35%, rgba(0,0,0,.94)); }
.moment-npc { position: absolute; top: 24px; left: 24px; display: flex; align-items: center; gap: 9px; padding: 6px 11px 6px 6px; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(14px); }
.moment-npc img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.moment-npc span { font-size: 11px; font-weight: 800; }
.moment-npc b { color: rgba(255,255,255,.65); }
.moment-story { position: absolute; right: clamp(24px, 6vw, 70px); bottom: clamp(28px, 6vw, 66px); left: clamp(24px, 6vw, 70px); }
.moment-story > small { color: #ffbaa8; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.moment-story > h2 { max-width: 11ch; margin: 12px 0 9px; font-size: clamp(38px, 5vw, 66px); line-height: 1; letter-spacing: -.06em; }
.moment-story > p { max-width: 48ch; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.7; }
.moment-card, .moment-pass { width: min(430px, 100%); margin-top: 22px; padding: 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 18px; background: rgba(16,16,16,.62); backdrop-filter: blur(18px); }
.moment-card > b, .moment-card > span { display: block; }
.moment-card > span { margin-top: 3px; color: rgba(255,255,255,.5); font-size: 9px; }
.moment-card p { font-size: 13px; }
.moment-card footer { color: rgba(255,255,255,.62); font-size: 10px; }
.moment-pass { display: grid; grid-template-columns: 1fr auto; gap: 8px 20px; }
.moment-pass span { grid-column: 1 / -1; color: #ffbaa8; font-size: 9px; letter-spacing: .12em; }
.moment-pass strong { font-size: 18px; }
.moment-pass b { font-size: 24px; }
.moment-pass button { grid-column: 1 / -1; min-height: 42px; border-radius: 999px; background: #fff; color: #111; font-size: 11px; font-weight: 800; cursor: pointer; }

.activity-stage { position: relative; min-height: 650px; overflow: hidden; border-radius: 26px; background: linear-gradient(160deg, #8372ff, #351991 55%, #180b4d); color: #fff; }
.activity-stage > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center top; filter: drop-shadow(0 26px 44px rgba(21,3,69,.38)); }
.activity-nav { position: absolute; top: 20px; right: 20px; display: flex; gap: 5px; padding: 5px; border-radius: 999px; background: rgba(24,8,70,.52); backdrop-filter: blur(12px); }
.activity-nav button { min-height: 30px; padding: 0 12px; border-radius: 999px; background: transparent; color: rgba(255,255,255,.7); font-size: 9px; }
.activity-nav button.is-active { background: #fff; color: #3d248f; }
.activity-panel { position: absolute; right: 24px; bottom: 24px; width: min(380px, calc(100% - 48px)); padding: 22px; border: 1px solid rgba(255,255,255,.26); border-radius: 22px; background: rgba(33,13,84,.72); backdrop-filter: blur(18px); }
.activity-panel small { color: #ffd764; font-size: 9px; font-weight: 800; letter-spacing: .11em; }
.activity-panel h2 { margin: 9px 0 7px; font-size: clamp(28px, 4vw, 48px); letter-spacing: -.05em; }
.activity-panel p { color: rgba(255,255,255,.72); font-size: 11px; line-height: 1.7; }
.activity-panel button { min-height: 42px; padding: 0 22px; border-radius: 999px; background: #ffd65d; color: #321e72; font-size: 11px; font-weight: 850; cursor: pointer; }
.media-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; align-items: start; }
.media-grid figure { grid-column: span 4; margin: 0; }
.media-grid figure:first-child { grid-column: span 8; }
.media-grid.is-portraits figure, .media-grid.is-many figure { grid-column: span 3; }
.media-grid.is-portraits figure:first-child, .media-grid.is-many figure:first-child { grid-column: span 6; }
.media-grid.is-feed figure:first-child { grid-column: span 5; }
.media-grid.is-feed figure:last-child { grid-column: span 7; }
.media-grid.is-feed figure:last-child img { aspect-ratio: 16 / 10; object-fit: cover; }
.media-grid img { width: 100%; max-height: 620px; border-radius: 18px; object-fit: cover; background: var(--paper-deep); }
.media-grid figure:first-child img { max-height: 680px; }
.media-grid figcaption { margin-top: 8px; color: var(--muted); font-size: 10px; }
.media-error { min-height: 240px; border: 1px dashed var(--line); border-radius: 18px; background: var(--paper-deep); }
.system-story { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 30px; overflow: hidden; border-radius: 18px; background: var(--line); }
.system-story article { min-height: 150px; padding: 22px; background: var(--surface-strong); }
.system-story small { color: var(--accent); font-size: 10px; }
.system-story h3 { margin: 9px 0 7px; font-size: 17px; }
.system-story p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }

.case-notes { max-width: 1160px; margin: 70px auto 0; }
.outcome-block { max-width: 860px; }
.outcome-block p { margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 750; }
.outcome-block h2 { margin: 0; font-size: clamp(27px, 4vw, 50px); line-height: 1.18; letter-spacing: -0.055em; }
.notes-grid { display: grid; grid-template-columns: .8fr 1.2fr 1fr; gap: clamp(24px, 5vw, 70px); margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--line); }
.notes-grid h3 { margin: 0 0 17px; font-size: 12px; }
.capability-list { display: flex; flex-wrap: wrap; gap: 7px; }
.capability-list span { padding: 8px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 10px; }
.pipeline-list, .demo-points { margin: 0; padding: 0; list-style: none; }
.pipeline-list { counter-reset: pipeline; }
.pipeline-list li { counter-increment: pipeline; display: grid; grid-template-columns: 27px 1fr; gap: 9px; margin-bottom: 14px; font-size: 11px; line-height: 1.6; }
.pipeline-list li::before { content: counter(pipeline); display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 9px; font-weight: 800; }
.pipeline-list b { display: block; font-size: 11px; }
.pipeline-list span { display: block; color: var(--muted); }
.demo-points li { position: relative; margin-bottom: 13px; padding-left: 15px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.demo-points li::before { content: ""; position: absolute; top: .62em; left: 0; width: 7px; height: 2px; background: var(--accent); }
.evidence { margin-top: 48px; padding: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.evidence summary { display: flex; justify-content: space-between; cursor: pointer; font-size: 12px; font-weight: 730; }
.evidence summary::after { content: "+"; }
.evidence[open] summary::after { content: "−"; }
.evidence p { max-width: 800px; margin: 16px 0 0; color: var(--muted); font-size: 12px; line-height: 1.7; }

@media (max-width: 1100px) {
  .site-header { grid-template-columns: 220px 1fr auto; }
  .case-page { padding-inline: 28px; }
  .phone-experience { grid-template-columns: minmax(290px, 350px) minmax(220px, 1fr); gap: 28px; }
  .project-index { padding-left: 18px; padding-right: 14px; }
  .notes-grid { gap: 28px; }
}

@media (max-width: 820px) {
  .site-header { grid-template-columns: 1fr auto; }
  .site-header > p { display: none; }
  .index-toggle { display: inline-flex; align-items: center; }
  .portfolio-layout { display: block; }
  .project-index {
    position: fixed;
    z-index: 25;
    top: 68px;
    right: 0;
    bottom: 0;
    left: 0;
    height: auto;
    padding: 24px 18px 52px;
    border-right: 0;
    background: var(--paper);
    transform: translateY(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform 280ms cubic-bezier(.16,1,.3,1), opacity 180ms ease;
  }
  .project-index.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .project-index nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .nav-group + .nav-group { margin-top: 0; }
  .case-page { padding: 34px 18px 70px; }
  .case-hero { grid-template-columns: 1fr; align-items: start; gap: 20px; }
  .hero-meta { justify-content: space-between; }
  .phone-experience { grid-template-columns: 1fr; }
  .experience-copy { order: -1; }
  .experience-copy h2 { max-width: 15ch; }
  .phone-frame { height: 680px; }
  .jude-grid { grid-template-columns: 1fr; }
  .growth-funnel { grid-template-columns: 1fr; }
  .growth-funnel article { min-height: auto; }
  .growth-funnel article::after { display: none; }
  .growth-funnel h3 { margin-top: 20px; }
  .channel-contribution { grid-template-columns: 1fr; }
  .channel-contribution footer { grid-column: auto; }
  .my-corner-stage > img { right: 3%; width: 66%; opacity: .64; }
  .landing-copy { width: min(66%, 430px); }
  .media-grid figure, .media-grid figure:first-child, .media-grid.is-portraits figure, .media-grid.is-portraits figure:first-child, .media-grid.is-many figure, .media-grid.is-many figure:first-child, .media-grid.is-feed figure:first-child, .media-grid.is-feed figure:last-child { grid-column: span 6; }
  .system-story { grid-template-columns: 1fr; }
  .notes-grid { grid-template-columns: 1fr 1fr; }
  .notes-grid article:last-child { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .site-header { min-height: 62px; padding: 8px 14px; }
  .identity small { display: none; }
  .project-index { top: 62px; }
  .project-index nav { grid-template-columns: 1fr; }
  .case-page { padding: 28px 12px 64px; }
  .case-hero { margin-bottom: 24px; padding-inline: 4px; }
  .case-hero h1 { font-size: 46px; }
  .case-summary { margin-top: 16px; font-size: 15px; }
  .demo-toolbar { align-items: flex-start; }
  .demo-controls { max-width: 66%; }
  .demo-surface { min-height: 520px; border-radius: 18px; }
  .demo-surface.is-phone { padding: 22px 8px 30px; }
  .experience-copy { padding: 0 8px; }
  .experience-copy h2 { font-size: 28px; }
  .phone-frame { width: min(350px, calc(100vw - 42px)); height: 670px; }
  .jude-demo, .growth-demo { padding: 14px; }
  .metrics-line { gap: 18px; }
  .channel-contribution dl { grid-template-columns: 1fr; }
  .channel-contribution footer { grid-template-columns: 1fr; gap: 7px; }
  .metric { min-width: 92px; }
  .event-ledger > * { grid-template-columns: 1fr; gap: 5px; }
  .event-ledger header { display: none; }
  .landing-stage, .moment-stage, .activity-stage { min-height: 560px; border-radius: 18px; }
  .my-corner-stage > img { inset: 0; width: 100%; height: 100%; margin: 0; border-radius: 0; opacity: .44; }
  .landing-backdrop { background: linear-gradient(0deg, rgba(8,8,8,.92), rgba(8,8,8,.08) 78%); }
  .landing-copy { right: 22px; left: 22px; width: auto; }
  .activity-panel { right: 14px; bottom: 14px; left: 14px; width: auto; }
  .media-grid { gap: 10px; }
  .media-grid figure, .media-grid figure:first-child, .media-grid.is-portraits figure, .media-grid.is-portraits figure:first-child, .media-grid.is-many figure, .media-grid.is-many figure:first-child, .media-grid.is-feed figure:first-child, .media-grid.is-feed figure:last-child { grid-column: 1 / -1; }
  .web-demo { min-height: 600px; }
  .web-demo iframe { height: 552px; }
  .notes-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .notes-grid article:last-child { grid-column: auto; }
  .case-notes { margin-top: 54px; padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}