/* V8.7 — full content-aware holographic system.
   Each page owns an independent desktop and mobile composition.
   V6 copy and interaction data are intentionally untouched. */

:root {
  --v87-bg: #020d1c;
  --v87-ink: #f3fdff;
  --v87-soft: #c9eef7;
  --v87-cyan: #64edff;
  --v87-blue: #4f91ff;
  --v87-violet: #9274ff;
  --v87-halo: rgba(0, 10, 27, .92);
  color-scheme: dark;
}

body,
.app-shell,
.stage { background: var(--v87-bg); color: var(--v87-ink); }

.topbar {
  border-bottom-color: rgba(91, 224, 255, .23);
  background: linear-gradient(90deg, rgba(2, 13, 29, .94), rgba(3, 24, 48, .84));
  box-shadow: 0 10px 34px rgba(0, 4, 13, .32);
  backdrop-filter: blur(18px) saturate(1.18);
}

.brand,
.brand small,
.chapter-nav button,
.system-state { color: #dff9ff; }
.brand-mark { border-color: rgba(100, 237, 255, .62); background: radial-gradient(circle, rgba(75, 219, 244, .24), rgba(1, 17, 36, .72)); }
.chapter-nav button b { color: var(--v87-cyan); }
.chapter-nav button:hover,
.chapter-nav button.is-active {
  color: #fff;
  border-color: rgba(100, 237, 255, .38);
  background: rgba(22, 111, 151, .26);
  box-shadow: inset 0 0 16px rgba(107, 237, 255, .10), 0 0 16px rgba(54, 213, 239, .10);
}

.stage { scrollbar-width: thin; scrollbar-color: rgba(86, 224, 246, .48) rgba(1, 12, 27, .45); }
.scroll-scene { position: relative; min-height: max(var(--app-height), 720px); overflow: hidden; isolation: isolate; background: var(--v87-bg); }
.scene-media,
.scene-media img,
.scene-shade,
.ambient-grid {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
.scene-media {
  background: #020d1c !important;
  background-image: none !important;
}
.scene-media img {
  opacity: 1 !important;
  object-fit: cover;
  object-position: center;
  filter: saturate(1.05) contrast(1.06) brightness(.92);
}
.scene-shade,
.home-shade {
  background:
    linear-gradient(90deg, rgba(0, 7, 19, .42), transparent 35%, rgba(0, 8, 20, .10) 70%, rgba(0, 7, 18, .26)),
    linear-gradient(180deg, rgba(0, 8, 20, .16), transparent 34%, transparent 72%, rgba(0, 7, 18, .32));
}
.ambient-grid {
  opacity: .055;
  background-image:
    linear-gradient(rgba(84, 218, 244, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84, 218, 244, .22) 1px, transparent 1px);
  background-size: 48px 48px;
}

.stage-frame,
.home-frame { min-height: inherit; }

.screen-heading { color: var(--v87-ink); }
.screen-heading-copy {
  border-left-color: rgba(100, 237, 255, .76);
  background: linear-gradient(90deg, rgba(1, 12, 29, .90), rgba(2, 25, 49, .54) 72%, transparent);
  box-shadow: none;
  backdrop-filter: blur(3px);
}
.screen-no { color: rgba(131, 237, 255, .48); text-shadow: 0 0 22px rgba(67, 213, 241, .38); }
.screen-heading p { color: var(--v87-cyan); }
.screen-heading h2 { color: #fff; text-shadow: 0 3px 16px rgba(0, 4, 13, .96); }
.screen-heading .section-desc {
  color: #dff8ff;
  font-size: clamp(12px, .95vw, 14px);
  line-height: 1.5;
  text-shadow: 0 2px 10px rgba(0, 4, 13, .96);
}

/* Frameless content nodes: the local dark halo belongs to the scene, not a panel. */
.holo-surface,
[data-layout="community-loop"] .holo-surface {
  color: var(--v87-ink);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  overflow: visible;
  isolation: isolate;
  padding: 14px 18px 15px;
}
.holo-surface::before,
[data-layout="community-loop"] .holo-surface::before {
  content: "";
  position: absolute;
  inset: -15px -20px;
  z-index: -1;
  border: 0;
  border-radius: 48%;
  background: radial-gradient(ellipse, rgba(0, 7, 20, .95) 0%, rgba(0, 18, 39, .78) 48%, rgba(2, 39, 69, .30) 69%, transparent 82%);
  filter: blur(5px);
  pointer-events: none;
}
.holo-surface::after,
[data-layout="community-loop"] .holo-surface::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  bottom: 6px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(111, 240, 255, .95), transparent);
  box-shadow: 0 0 13px rgba(64, 220, 246, .72);
  transform-origin: center;
  animation: v87Signal 5.2s ease-in-out infinite;
  animation-delay: var(--v87-delay, 0s);
}
.holo-surface:hover,
.holo-surface:focus-visible,
[data-layout="community-loop"] .holo-surface:hover,
[data-layout="community-loop"] .holo-surface:focus-visible {
  outline: none;
  transform: translateY(-3px);
  box-shadow: none;
  filter: drop-shadow(0 0 13px rgba(75, 225, 249, .50));
}
.holo-surface:focus-visible {
  border-radius: 20px;
  outline: 1px solid rgba(154, 246, 255, .86);
  outline-offset: 4px;
}
.node-ring { display: none; }
.module-action {
  top: 10px;
  right: 9px;
  width: 22px;
  height: 22px;
  border-color: rgba(114, 238, 255, .50);
  color: #eaffff;
  background: rgba(4, 39, 67, .42);
  font-size: 11px;
  opacity: .72;
}
.node-icon,
[data-layout="community-loop"] .node-icon {
  position: relative;
  width: 38px;
  height: 38px;
  color: #e8fdff;
  border-color: rgba(123, 241, 255, .76);
  background: radial-gradient(circle, rgba(60, 207, 235, .35), rgba(2, 25, 49, .64));
  box-shadow: inset 0 0 12px rgba(225, 253, 255, .16), 0 0 16px rgba(54, 218, 243, .44);
}
.node-icon::before {
  content: "";
  position: absolute;
  inset: -7px;
  border: 1px solid rgba(114, 238, 255, .45);
  border-radius: 50%;
  animation: v87Pulse 5.2s ease-out infinite;
  animation-delay: var(--v87-delay, 0s);
}
.module-index,
[data-layout="community-loop"] .module-index { color: #8ef2ff; font-size: 9px; }
.module-title,
[data-layout="community-loop"] .module-title {
  color: #fff;
  font-size: clamp(17px, 1.25vw, 20px);
  text-shadow: 0 2px 10px rgba(0, 3, 12, 1), 0 0 10px rgba(64, 218, 242, .30);
}
.module-summary,
[data-layout="community-loop"] .module-summary {
  color: #e4f9ff;
  font-size: 12px;
  font-weight: 720;
  line-height: 1.45;
  text-shadow: 0 2px 8px rgba(0, 3, 12, 1);
}
.module-tags i,
[data-layout="community-loop"] .module-tags i {
  color: #d9f8ff;
  border-color: rgba(99, 226, 247, .34);
  background: rgba(1, 25, 46, .55);
  font-size: 8.5px;
}

/* Beat all legacy page-specific glass-card rules. */
.content-stage[data-layout] .holo-surface {
  color:var(--v87-ink);
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  overflow:visible;
}
.content-stage[data-layout] .holo-surface::before {
  inset:-15px -20px;
  border:0;
  border-radius:48%;
  background:radial-gradient(ellipse,rgba(0,7,20,.96) 0%,rgba(0,18,39,.82) 50%,rgba(2,39,69,.30) 70%,transparent 83%);
  filter:blur(5px);
}
.content-stage[data-layout] .holo-surface::after {
  inset:auto 18% 6px;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(111,240,255,.95),transparent);
  box-shadow:0 0 13px rgba(64,220,246,.72);
}
.content-stage[data-layout] .module-index { color:#8ef2ff; }
.content-stage[data-layout] .module-title {
  color:#fff;
  text-shadow:0 2px 10px rgba(0,3,12,1),0 0 10px rgba(64,218,242,.30);
}
.content-stage[data-layout] .module-summary {
  color:#e4f9ff;
  font-weight:720;
  text-shadow:0 2px 8px rgba(0,3,12,1);
}
.content-stage[data-layout] .module-tags i {
  color:#d9f8ff;
  border-color:rgba(99,226,247,.34);
  background:rgba(1,25,46,.55);
}

[data-layout="convergence"] .convergence-core,
[data-layout="community-loop"] .community-core,
[data-layout="value-streams"] .value-origin {
  color:#fff;
  border-color:rgba(113,239,255,.58);
  background:radial-gradient(circle,rgba(66,216,241,.32),rgba(0,22,47,.78) 68%,transparent 72%);
  box-shadow:inset 0 0 20px rgba(136,241,255,.08),0 0 38px rgba(60,216,241,.25);
}
[data-layout="convergence"] .convergence-core span,
[data-layout="convergence"] .convergence-core small,
[data-layout="community-loop"] .community-core span,
[data-layout="community-loop"] .community-core small,
[data-layout="value-streams"] .value-origin span { color:#d4f7fc; }
[data-layout="convergence"] .convergence-core strong,
[data-layout="community-loop"] .community-core strong,
[data-layout="value-streams"] .value-origin strong { color:#fff; text-shadow:0 0 12px rgba(82,227,248,.52); }

[data-layout="participation"] .step-rail span {
  color:#e7fbff;
  border-color:rgba(103,230,251,.30);
  background:rgba(0,22,46,.66);
  box-shadow:0 0 18px rgba(61,214,239,.10);
}
[data-layout="participation"] .contact-terminal {
  color:#fff;
  border-color:rgba(105,232,252,.44);
  background:rgba(0,18,39,.78);
  box-shadow:0 0 22px rgba(54,214,240,.16);
}
[data-layout="participation"] .contact-terminal span { color:#8fefff; }
[data-layout="participation"] .contact-terminal a { color:#fff; }

.module-trigger:nth-of-type(4n+1) { --v87-delay: .1s; }
.module-trigger:nth-of-type(4n+2) { --v87-delay: 1.0s; }
.module-trigger:nth-of-type(4n+3) { --v87-delay: 1.9s; }
.module-trigger:nth-of-type(4n+4) { --v87-delay: 2.8s; }
.module-trigger { scroll-margin-top: calc(var(--topbar-height) + 20px); }

@keyframes v87Pulse {
  0%, 62%, 100% { opacity: .14; transform: scale(.92); }
  76% { opacity: .58; transform: scale(1.15); }
  89% { opacity: 0; transform: scale(1.34); }
}
@keyframes v87Signal {
  0%, 62%, 100% { opacity: .15; transform: translateX(-24%) scaleX(.58); }
  77% { opacity: .76; transform: translateX(0) scaleX(1); }
  91% { opacity: .05; transform: translateX(24%) scaleX(.58); }
}

.logic-caption {
  color: #dbfaff;
  border-color: rgba(95, 225, 247, .30);
  background: rgba(0, 17, 37, .62);
  box-shadow: 0 0 16px rgba(55, 213, 239, .10);
}
.deck-controls {
  border-color: rgba(102, 229, 250, .34);
  background: rgba(1, 17, 36, .78);
  box-shadow: inset 0 0 16px rgba(96, 232, 253, .07), 0 12px 32px rgba(0, 3, 12, .34);
}
.deck-controls > button { color: #dcfbff; background: rgba(29, 117, 153, .24); }
.page-counter { color: #a9dbe6; }
.page-counter b { color: #fff; }
.page-dots button { background: rgba(132, 218, 235, .28); }
.page-dots button.is-active { background: var(--v87-cyan); }

/* Home is an overview portal: copy and metrics sit in the scene rather than on cards. */
.home-frame {
  grid-template-columns: minmax(440px, .9fr) minmax(370px, .62fr);
  padding-top: calc(var(--topbar-height) + 48px);
}
.home-copy {
  max-width: 650px;
  padding: 34px 32px;
  border: 0;
  border-radius: 44%;
  color: #fff;
  background: radial-gradient(ellipse at 35% 48%, rgba(0, 8, 23, .96), rgba(1, 19, 42, .72) 60%, transparent 78%);
  box-shadow: none;
  backdrop-filter: none;
}
.kicker { color: var(--v87-cyan); text-shadow: 0 0 12px rgba(72, 221, 246, .32); }
.home-copy h1 { color: #fff; text-shadow: 0 4px 24px rgba(0, 3, 12, .98); }
.home-copy h1 span { color: #bff6ff; }
.positioning,
.home-trio span { color: #e0f7fc; text-shadow: 0 2px 10px rgba(0, 3, 12, .98); }
.primary-cta {
  color: #fff;
  border-color: rgba(104, 233, 252, .50);
  background: rgba(1, 28, 51, .62);
}
.home-stats { gap: 18px; }
.stat-card {
  position: relative;
  min-height: 126px;
  border-color: rgba(115, 238, 255, .48);
  color: #fff;
  background: radial-gradient(circle, rgba(25, 151, 190, .34), rgba(0, 17, 39, .72) 65%, rgba(0, 8, 21, .20));
  box-shadow: inset 0 0 24px rgba(129, 240, 255, .08), 0 0 30px rgba(54, 215, 241, .18);
  backdrop-filter: blur(2px);
  animation: v87MetricFloat 6s ease-in-out infinite;
}
.stat-card:nth-child(2) { animation-delay: -1.5s; }
.stat-card:nth-child(3) { animation-delay: -3s; }
.stat-card:nth-child(4) { animation-delay: -4.5s; }
.stat-card strong { color: #fff; text-shadow: 0 0 13px rgba(91, 230, 251, .42); }
.stat-card span { color: #d4f4fa; }
@keyframes v87MetricFloat { 50% { transform: translateY(-5px); box-shadow: inset 0 0 26px rgba(129,240,255,.12), 0 0 38px rgba(54,215,241,.24); } }
.source-panel {
  color: #b7e3ec;
  text-shadow: 0 2px 8px rgba(0, 3, 12, .98);
}
.source-panel summary { color: #8fefff; }

/* Desktop: content nodes map to the environmental anchors of each page. */
@media (min-width: 900px) and (orientation: landscape) {
  .layout-host { inset: calc(var(--topbar-height) + 104px) 2.5% calc(var(--control-height) + 8px); }
  .chain-path,
  .convergence-field,
  .community-orbit,
  .network-map,
  .value-routes,
  .participation-path {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: 1500px;
    margin: 0 auto;
  }
  .holo-surface { width: clamp(180px, 16vw, 238px); min-height: 116px; }
  .holo-surface .module-tags i:nth-child(n+2) { display: none; }

  /* 01 · industrial chain */
  .chain-rail { left: 7%; right: 7%; top: 52%; transform: rotate(-7deg); background: linear-gradient(90deg, transparent, rgba(72,220,244,.8) 12%, #e9ffff 48%, rgba(91,115,255,.72) 86%, transparent); }
  .chain-node { aspect-ratio: auto; text-align: left; }
  .chain-node .node-icon { margin: 0; }
  .chain-node .module-tags { justify-content: flex-start; }
  .chain-node-1 { left: 2%; top: 42%; }
  .chain-node-2 { left: 27%; top: 8%; }
  .chain-node-3 { left: 55%; top: 41%; }
  .chain-node-4 { right: 1%; top: 8%; }

  /* 02 · three forces converge */
  .convergence-field .driver-node { aspect-ratio: auto; text-align: left; }
  .driver-node .node-icon { margin: 0; }
  .driver-node-1 { left: 1%; top: 35%; }
  .driver-node-2 { left: 26%; top: 3%; }
  .driver-node-3 { right: 2%; top: 8%; }
  .convergence-core {
    left: 56%; top: 48%; width: 162px; aspect-ratio: 1; transform: translate(-50%,-50%);
    color: #fff; border-color: rgba(111,238,255,.54);
    background: radial-gradient(circle, rgba(74,220,243,.34), rgba(0,24,50,.72) 68%, transparent 72%);
    box-shadow: 0 0 38px rgba(62,217,242,.28);
  }
  .convergence-core span,.convergence-core small { color:#bceff7; }
  .convergence-core strong { color:#fff; }
  .beam { left: 56%; top: 48%; background: linear-gradient(90deg, rgba(236,255,255,.95), rgba(76,218,244,.68), transparent); }
  .pain-node { right: 7%; bottom: 2%; width: clamp(250px, 22vw, 330px); min-height: 108px; border-radius: 0; }

  /* 03 · community operations */
  [data-layout="community-loop"] .community-core {
    left: 52%; top: 51%; width: 150px; min-height: 150px; transform: translate(-50%,-50%);
    color:#fff; border-color:rgba(117,240,255,.64);
    background: radial-gradient(circle, rgba(58,208,235,.30), rgba(0,20,44,.72) 68%, transparent 72%);
  }
  [data-layout="community-loop"] .community-core span,
  [data-layout="community-loop"] .community-core small { color:#d5f6fb; font-size: 11px; font-weight: 760; }
  [data-layout="community-loop"] .community-core strong { color:#fff; }
  [data-layout="community-loop"] .orbit-line { left:54%; top:50%; width:55%; height:62%; opacity:.32; }
  [data-layout="community-loop"] .orbit-node { width: clamp(175px, 15vw, 224px); min-height: 118px; }
  [data-layout="community-loop"] .orbit-node-1 { left: 2%; top: 20%; }
  [data-layout="community-loop"] .orbit-node-2 { right: 1%; top: 12%; }
  [data-layout="community-loop"] .orbit-node-3 { left: 4%; top: auto; bottom: 17%; }
  [data-layout="community-loop"] .orbit-node-4 { right: 1%; top: auto; bottom: 17%; }
  [data-layout="community-loop"] .data-strip {
    left: 17%; right: 14%; bottom: -2px; width:auto; transform:none; gap:8px;
    background:transparent; border:0;
  }
  [data-layout="community-loop"] .data-point {
    border-top:1px solid rgba(112,238,255,.65); background:linear-gradient(180deg,rgba(8,93,128,.24),transparent);
  }

  /* 04 · regional network */
  .network-lines { opacity:.26; }
  .hub-node { left: 42%; top: 36%; width: clamp(190px, 17vw, 250px); aspect-ratio:auto; text-align:left; }
  .hub-node .node-icon { margin:0; }
  .hub-node .module-tags { justify-content:flex-start; }
  .satellite-node { right: 2%; top: 5%; width: clamp(230px, 21vw, 300px); min-height:116px; border-radius:0; }
  .access-node { left: 2%; bottom: 8%; width: clamp(210px, 19vw, 280px); min-height:116px; border-radius:0; }
  .expansion-node { right: 3%; bottom: 5%; width: clamp(220px, 20vw, 290px); min-height:116px; border-radius:0; }
  .satellite-labels { left: 3%; top: 7%; width: 38%; grid-template-columns:repeat(3,1fr); }
  .satellite-labels span {
    color:#dbf9ff; border-color:rgba(100,230,250,.28); background:rgba(0,18,39,.60);
    box-shadow:none; text-shadow:0 2px 7px rgba(0,2,10,1);
  }

  /* 05 · four value routes */
  .value-origin {
    left: 36%; top: 43%; width: 170px; aspect-ratio:1; transform:translate(-50%,-50%);
    color:#fff; border-color:rgba(114,239,255,.58);
    background:radial-gradient(circle,rgba(65,216,241,.30),rgba(0,21,45,.74) 68%,transparent 72%);
    box-shadow:0 0 38px rgba(59,216,241,.24);
  }
  .value-origin span { color:#bcf1f8; }
  .value-origin strong { color:#fff; }
  .route-stack { position:absolute; inset:0; display:block; }
  .value-route { position:absolute; inset:0; pointer-events:none; }
  .value-route .value-node { pointer-events:auto; }
  .route-line { display:none; }
  .value-node { position:absolute; width:clamp(210px,20vw,292px); min-height:108px; transform:none; border-radius:0; display:block; padding:14px 18px 15px; }
  .value-node:hover,.value-node:focus-visible { transform:translateY(-3px); }
  .route-1 .value-node { left:1%; top:9%; }
  .route-2 .value-node { right:1%; top:7%; }
  .route-3 .value-node { right:2%; bottom:5%; top:auto; }
  .route-4 .value-node { left:3%; bottom:4%; top:auto; }

  /* 06 · participation runway */
  .participation-path .steps-node { left:2%; top:16%; width:clamp(220px,20vw,300px); min-height:116px; border-radius:0; }
  .step-rail { left:29%; top:12%; width:34%; height:62%; opacity:.78; }
  .step-rail span {
    color:#e3fbff; border-color:rgba(102,230,251,.30); background:rgba(0,22,46,.58);
    box-shadow:0 0 18px rgba(61,214,239,.10);
  }
  .role-entry { position:static; display:block; }
  .entry-node { position:absolute; right:2%; left:auto; top:8%; width:clamp(210px,19vw,280px); min-height:116px; border-radius:0; }
  .roles-node { position:absolute; right:4%; left:auto; top:43%; width:clamp(210px,19vw,280px); min-height:116px; border-radius:0; }
  .route-node { right:30%; bottom:2%; width:clamp(250px,23vw,340px); min-height:108px; border-radius:0; }
  .contact-terminal {
    left:2%; bottom:1%; width:clamp(310px,31vw,450px); min-height:66px;
    color:#fff; border-color:rgba(105,232,252,.44); background:rgba(0,18,39,.72);
    box-shadow:0 0 22px rgba(54,214,240,.14);
  }
  .contact-terminal span { color:#8fefff; }
  .contact-terminal a { color:#fff; }
}

/* Portrait/tablet: absolute scene composition, never a generic vertical card list. */
@media (max-width: 899px), (orientation: portrait) {
  :root { --topbar-height: 104px; --control-height: 62px; }
  .topbar { height:var(--topbar-height); display:block; padding:8px 11px 6px; }
  .brand { height:42px; }
  .brand-mark { width:33px; height:33px; }
  .brand strong { font-size:10px; }
  .brand small { font-size:9px; }
  .system-state { display:none; }
  .chapter-nav {
    position:absolute; left:0; right:0; bottom:6px; justify-content:flex-start; gap:4px;
    padding:0 10px; overflow-x:auto; scrollbar-width:none;
  }
  .chapter-nav::-webkit-scrollbar { display:none; }
  .chapter-nav button {
    min-height:40px; padding:0 12px; color:#d9f7fc;
    border-color:rgba(92,218,240,.18); background:rgba(2,29,52,.48); font-size:10px;
  }
  .home-stage .scroll-scene { min-height:1180px; }
  .home-frame { position:relative; display:block; min-height:inherit; padding:0; }
  .home-copy {
    position:absolute; top:calc(var(--topbar-height) + 24px); left:12px; right:12px;
    max-width:none; padding:24px 18px 26px;
    background:radial-gradient(ellipse at 35% 48%,rgba(0,8,23,.97),rgba(1,19,42,.78) 62%,transparent 86%);
  }
  .home-copy h1 { font-size:clamp(36px,10.5vw,50px); }
  .positioning { font-size:14px; line-height:1.58; }
  .home-trio { gap:7px 12px; }
  .home-trio span { font-size:10px; }
  .home-stats {
    position:absolute; left:14px; right:14px; top:600px; width:auto;
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
  }
  .stat-card { min-height:108px; padding:12px; }
  .stat-card strong { font-size:24px; }
  .source-panel {
    position:absolute; left:16px; right:16px; bottom:92px; width:auto; margin:0;
    padding:12px 14px; border:1px solid rgba(102,226,247,.24); border-radius:18px;
    background:rgba(0,17,37,.62);
  }
  .scroll-scene { width:100%; min-height:1000px; }
  .scene-media img { object-position:center top; filter:saturate(1.05) contrast(1.08) brightness(.88); }
  .scene-shade,.home-shade {
    background:
      linear-gradient(180deg,rgba(0,7,18,.22),transparent 24%,transparent 70%,rgba(0,6,17,.42)),
      linear-gradient(90deg,rgba(0,7,18,.13),transparent 48%,rgba(0,7,18,.12));
  }
  .ambient-grid { opacity:.04; background-size:36px 36px; }
  .stage-frame { min-height:inherit; padding:0; }
  .screen-heading {
    position:absolute; top:calc(var(--topbar-height) + 12px); left:10px; right:10px;
    max-width:calc(100% - 20px); padding:0; gap:7px;
  }
  .screen-heading-copy { padding:7px 12px 8px 9px; max-width:86%; }
  .screen-no { font-size:32px; }
  .screen-heading h2 { font-size:clamp(24px,6.5vw,31px); }
  .screen-heading p { font-size:8px; }
  .screen-heading .section-desc { margin-top:5px; max-width:330px; font-size:11.5px; line-height:1.42; }
  .layout-host { position:absolute; inset:calc(var(--topbar-height) + 108px) 10px 86px; padding:0; }
  .chain-path,.convergence-field,.community-orbit,.network-map,.value-routes,.participation-path {
    position:relative; display:block; width:100%; height:100%; min-height:0; margin:0;
  }
  .holo-surface,
  [data-layout="community-loop"] .holo-surface {
    position:absolute; margin:0; width:min(46%,190px); min-height:124px;
    padding:12px 10px 13px;
  }
  .holo-surface::before,[data-layout="community-loop"] .holo-surface::before { inset:-13px -9px; }
  .holo-surface:hover,.holo-surface:focus-visible { transform:none; }
  .node-icon,[data-layout="community-loop"] .node-icon { width:34px; height:34px; margin:0 0 5px; float:none; }
  .node-icon svg { width:19px; height:19px; }
  .module-index,[data-layout="community-loop"] .module-index { margin-top:3px; font-size:9px; }
  .module-title,[data-layout="community-loop"] .module-title { margin-top:3px; font-size:16.5px; line-height:1.2; }
  .module-summary,[data-layout="community-loop"] .module-summary { margin-top:5px; font-size:11.5px; line-height:1.4; -webkit-line-clamp:3; }
  .module-tags { display:none; }
  .module-action { display:grid; top:8px; right:6px; }
  .logic-caption { white-space:normal; text-align:center; font-size:9.5px; }

  /* 01 */
  [data-layout="chain"] .scroll-scene { min-height:1110px; }
  [data-layout="chain"] .layout-host { bottom:70px; }
  .chain-rail { left:49%; top:30px; width:3px; height:760px; transform:translateX(-50%) rotate(-5deg); background:linear-gradient(180deg,transparent,rgba(91,229,250,.76) 8%,#efffff 52%,rgba(127,101,255,.68) 90%,transparent); }
  .chain-node-1 { left:0; top:40px; }
  .chain-node-2 { right:0; left:auto; top:225px; }
  .chain-node-3 { left:1%; top:455px; }
  .chain-node-4 { right:0; left:auto; top:680px; }
  .chain-path .logic-caption { left:50%; bottom:8px; transform:translateX(-50%); width:92%; }

  /* 02 */
  [data-layout="convergence"] .scroll-scene { min-height:1150px; }
  .convergence-field .driver-node { width:min(45%,188px); }
  .driver-node-1 { left:0; top:20px; }
  .driver-node-2 { right:0; left:auto; top:205px; }
  .driver-node-3 { left:1%; right:auto; top:360px; }
  .convergence-core {
    position:absolute; left:53%; top:575px; width:142px; min-height:142px; transform:translateX(-50%);
    color:#fff; border-color:rgba(112,239,255,.58);
    background:radial-gradient(circle,rgba(69,219,243,.34),rgba(0,23,49,.76) 68%,transparent 72%);
    box-shadow:0 0 38px rgba(62,217,242,.24);
  }
  .convergence-core span,.convergence-core small { color:#c4f3fa; font-size:9px; }
  .convergence-core strong { color:#fff; font-size:21px; }
  .beam { left:52%; top:640px; width:42%; background:linear-gradient(90deg,#eaffff,rgba(74,220,245,.65),transparent); }
  .beam-a { transform:rotate(217deg); }.beam-b { transform:rotate(255deg); }.beam-c { transform:rotate(302deg); }
  .pain-node { left:8%; right:8%; bottom:0; width:auto; min-height:128px; border-radius:0; }

  /* 03 — accepted portrait rhythm */
  [data-layout="community-loop"] .scroll-scene { min-height:1180px; }
  [data-layout="community-loop"] .layout-host { inset:calc(var(--topbar-height) + 108px) 10px 72px; }
  [data-layout="community-loop"] .orbit-line { left:50%; top:170px; width:72%; height:650px; transform:translateX(-50%) rotate(-7deg); opacity:.34; }
  [data-layout="community-loop"] .community-core {
    position:absolute; left:50%; top:220px; width:138px; min-height:138px; transform:translateX(-50%);
    color:#fff; border-color:rgba(120,241,255,.64);
    background:radial-gradient(circle,rgba(65,215,239,.32),rgba(0,22,47,.78) 68%,transparent 72%);
    box-shadow:0 0 38px rgba(60,216,241,.26);
  }
  [data-layout="community-loop"] .community-core span,
  [data-layout="community-loop"] .community-core small { color:#e3faff; font-size:11px; font-weight:850; text-shadow:0 2px 8px rgba(0,3,12,1); }
  [data-layout="community-loop"] .community-core strong { color:#fff; font-size:23px; }
  [data-layout="community-loop"] .orbit-node { width:min(44%,182px); min-height:132px; }
  [data-layout="community-loop"] .orbit-node-1 { left:0; top:55px; }
  [data-layout="community-loop"] .orbit-node-2 { right:0; left:auto; top:360px; }
  [data-layout="community-loop"] .orbit-node-3 { left:0; right:auto; top:465px; }
  [data-layout="community-loop"] .orbit-node-4 { right:0; left:auto; top:505px; }
  [data-layout="community-loop"] .data-strip {
    position:absolute; left:0; right:0; bottom:90px; width:auto; transform:none;
    grid-template-columns:repeat(2,1fr); gap:8px; padding:0; background:transparent;
  }
  [data-layout="community-loop"] .data-point {
    min-height:70px; padding:9px 7px; border:0; border-top:1px solid rgba(113,239,255,.68);
    background:linear-gradient(180deg,rgba(9,101,135,.28),transparent);
  }
  [data-layout="community-loop"] .data-point strong { color:#fff; font-size:18px; }
  [data-layout="community-loop"] .data-point span { color:#dbf8fd; font-size:10.5px; }

  /* 04 */
  [data-layout="network"] .scroll-scene { min-height:1120px; }
  .network-lines { inset:40px 0 30px; opacity:.24; }
  .satellite-labels {
    position:absolute; left:0; right:0; top:120px; bottom:auto; width:auto; height:auto;
    grid-template-columns:repeat(2,1fr); gap:6px;
  }
  .satellite-labels span {
    padding:7px 8px; color:#ddfaff; border-color:rgba(98,228,249,.28);
    background:rgba(0,19,40,.58); box-shadow:none; font-size:9px; text-shadow:0 2px 7px rgba(0,3,12,1);
  }
  .satellite-node { right:0; top:0; width:min(46%,190px); min-height:122px; border-radius:0; }
  .hub-node { left:25%; top:330px; width:min(51%,220px); min-height:138px; aspect-ratio:auto; text-align:left; }
  .hub-node .node-icon { margin:0 0 5px; }
  .hub-node .module-tags { justify-content:flex-start; }
  .access-node { left:0; top:575px; width:min(46%,195px); min-height:126px; border-radius:0; }
  .expansion-node { right:0; top:750px; width:min(46%,195px); min-height:126px; border-radius:0; }

  /* 05 */
  [data-layout="value-streams"] .scroll-scene { min-height:1210px; }
  .value-origin {
    position:absolute; left:50%; top:240px; width:148px; min-height:148px; transform:translateX(-50%);
    color:#fff; border-color:rgba(113,239,255,.60);
    background:radial-gradient(circle,rgba(67,216,240,.32),rgba(0,22,46,.76) 68%,transparent 72%);
    box-shadow:0 0 38px rgba(60,216,241,.24);
  }
  .value-origin span { color:#c8f4fa; font-size:9px; }
  .value-origin strong { color:#fff; font-size:20px; }
  .route-stack { position:absolute; inset:0; display:block; }
  .value-route { position:absolute; inset:0; display:block; pointer-events:none; }
  .value-route .value-node { pointer-events:auto; }
  .route-line { display:none; }
  .value-node { position:absolute; width:min(46%,194px); min-height:130px; transform:none; display:block; border-radius:0; padding:12px 10px 13px; }
  .route-1 .value-node { left:0; top:20px; }
  .route-2 .value-node { right:0; top:405px; }
  .route-3 .value-node { left:0; top:620px; }
  .route-4 .value-node { right:0; top:750px; }

  /* 06 */
  [data-layout="participation"] .scroll-scene { min-height:1280px; }
  .participation-path .steps-node { left:0; top:25px; width:min(48%,205px); min-height:128px; border-radius:0; }
  .step-rail {
    left:3%; top:180px; width:45%; height:310px; display:flex; gap:4px; opacity:.86;
  }
  .step-rail span {
    min-height:100px; padding:8px 4px; color:#e4fbff; border-color:rgba(103,230,251,.28);
    background:rgba(0,22,46,.62); font-size:10px;
  }
  .step-rail span:nth-child(2){min-height:148px}.step-rail span:nth-child(3){min-height:198px}
  .role-entry { position:static; display:block; }
  .entry-node { right:0; top:160px; width:min(48%,205px); min-height:128px; border-radius:0; }
  .roles-node { left:0; top:525px; width:min(48%,205px); min-height:132px; border-radius:0; }
  .route-node { right:0; top:720px; width:min(48%,205px); min-height:132px; border-radius:0; }
  .contact-terminal {
    position:absolute; left:3%; right:3%; bottom:18px; width:auto; min-height:76px;
    display:grid; grid-template-columns:1fr auto; color:#fff; border-color:rgba(105,232,252,.44);
    background:rgba(0,18,39,.78); box-shadow:0 0 22px rgba(54,214,240,.16);
  }
  .contact-terminal span { color:#8fefff; }
  .contact-terminal strong { font-size:14px; }
  .contact-terminal a { color:#fff; }

  .deck-controls { bottom:max(7px,env(safe-area-inset-bottom)); height:50px; }
  .page-counter { display:none; }
}

@media (min-width: 600px) and (max-width: 899px) and (orientation: portrait) {
  .scroll-scene { max-width:768px; margin:0 auto; }
  .layout-host { left:5%; right:5%; }
  .holo-surface,[data-layout="community-loop"] .holo-surface { width:min(42%,240px); }
  .screen-heading { left:5%; right:5%; }
}

@media (max-width: 390px) {
  .module-title,[data-layout="community-loop"] .module-title { font-size:15.5px; }
  .module-summary,[data-layout="community-loop"] .module-summary { font-size:11px; }
  .chapter-nav button { padding:0 10px; }
}

/* Dialog keeps V6 detail copy readable and deployable without external libraries. */
.detail-dialog {
  color:#f1fdff;
  border-color:rgba(120,239,255,.58);
  background:linear-gradient(155deg,rgba(2,15,34,.98),rgba(3,39,67,.97));
  box-shadow:0 24px 90px rgba(0,3,14,.64),inset 0 0 38px rgba(112,235,255,.06);
}
.detail-dialog::backdrop { background:rgba(0,5,16,.62); }
.dialog-close,.dialog-icon {
  color:#dffcff; border-color:rgba(104,231,251,.40); background:rgba(7,63,91,.50);
}
.dialog-eyebrow { color:#82efff; }
.dialog-lead,.dialog-content li { color:#d7f3f8; }
.dialog-tags span { border-color:rgba(105,230,250,.28); background:rgba(46,182,214,.12); }
.dialog-content blockquote,.dialog-contact { background:rgba(53,199,228,.11); }

@media (prefers-reduced-motion: reduce) {
  .holo-surface::after,.node-icon::before,.stat-card { animation:none !important; }
}