/* Scene 3 - everything connects: the life-map tree (desktop) / radial map (mobile) + the why-panel */
.graph-area { left: max(39.5%, calc(var(--gutter) + min(var(--measure), 40vw) + 16px)); right: 112px; top: 68px; bottom: 18px; z-index: 3; }
.g-cam { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; }
.graph-threads { position: absolute; left: 0; top: 0; overflow: visible; }
.graph-nodes { position: absolute; inset: 0; }

/* threads: drawn with stroke-dashoffset on a pathLength=1 path */
.gt { fill: none; stroke: var(--ink4); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; }
.gtl, .gtl-glow, .gtf { fill: none; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 1; opacity: 0; }
.gtl { stroke: var(--accent); stroke-width: 3.6; }
.gtl-glow { stroke: var(--accent); stroke-width: 11; stroke-opacity: 0.2; }
.gtf { stroke: var(--surface); stroke-width: 2.2; stroke-dasharray: 0.05 0.95; }

/* nodes: the product's own cards in miniature (map/outline rows, goal cards) */
.gn {
  --lit: 0; position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 9px; width: max-content;
  background: color-mix(in srgb, var(--accent-soft) calc(var(--lit) * 100%), var(--surface)); white-space: nowrap; will-change: transform, opacity;
  box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line), 0 0 0 calc(var(--lit) * 3px) var(--accent);
  font-weight: 600; color: var(--ink); font-variation-settings: 'ROND' 70;
}
.gn-t { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.gn-area { height: 46px; padding: 0 18px 0 6px; border-radius: 23px; font-size: 15px; font-weight: 700; }
.gn-area .tile { width: 34px; height: 34px; border-radius: 17px; }
.gn-goal { height: 42px; padding: 0 13px 0 5px; border-radius: 16px; max-width: 196px; font-size: 13px; }
.gn-goal .tile { width: 32px; height: 32px; border-radius: 11px; }
.gn-goal .tile .ms { font-size: 19px; }
.gn-project { height: 36px; padding: 0 13px 0 4px; border-radius: 14px; max-width: 160px; font-size: 12.5px; gap: 8px; }
.gn-project .tile { width: 28px; height: 28px; border-radius: 10px; }
.gn-project .tile .ms { font-size: 17px; }
.gn-task { height: 32px; padding: 0 13px 0 11px; border-radius: 13px; max-width: 152px; font-size: 12.5px; font-weight: 500; gap: 9px; }
.gn-c { flex: none; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--h); }
.gn-root { width: 60px; height: 60px; justify-content: center; padding: 0; border-radius: 50%; background: none; box-shadow: none; overflow: visible; }
.gn-root svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--accent) 38%, transparent)); }
.gn-root svg path { stroke: color-mix(in srgb, var(--surface) 70%, transparent); stroke-width: 1.2; }
.gn-root .ms { position: relative; font-size: 28px; color: var(--on-accent); font-variation-settings: 'FILL' 1; }
.gn-root .gn-t { position: absolute; top: calc(100% + 4px); font-size: 12px; font-weight: 700; color: var(--accent-ink); letter-spacing: 0.3px; }
.g-head { position: absolute; margin-top: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink2); white-space: nowrap; opacity: 0; }
.g-head::after { content: ''; display: block; width: 22px; height: 3px; margin-top: 7px; border-radius: 2px; background: var(--accent); opacity: 0.55; }

/* radial (mobile): icons only */
.is-radial .g-head { display: none; }
.is-radial .gn { padding: 0; justify-content: center; border-radius: 50%; }
.is-radial .gn-t { display: none; }
.is-radial .gn-root { width: 46px; height: 46px; }
.is-radial .gn-root .ms { font-size: 22px; }
.is-radial .gn-area { width: 38px; height: 38px; }
.is-radial .gn-area .tile { width: 32px; height: 32px; }
.is-radial .gn-area .tile .ms { font-size: 18px; }
.is-radial .gn-goal { width: 30px; height: 30px; }
.is-radial .gn-goal .tile { width: 24px; height: 24px; border-radius: 50%; }
.is-radial .gn-goal .tile .ms { font-size: 14px; }
.is-radial .gn-project { width: 26px; height: 26px; }
.is-radial .gn-project .tile { width: 20px; height: 20px; border-radius: 50%; }
.is-radial .gn-project .tile .ms { font-size: 12px; }
.is-radial .gn-task { width: 16px; height: 16px; border-radius: 50%; }
.is-radial .gn-c { width: 8px; height: 8px; border-width: 2px; }
.is-radial .gt { stroke-width: 1.8; }

/* copy column: the lead block grows upward from the 57 % line, the why-panel downward */
.graph-copy { bottom: 43%; justify-content: flex-end; }
.graph-why { top: 57%; justify-content: flex-start; padding-top: 26px; }
.why { width: min(26rem, 100%); padding: 18px 20px 20px; border-radius: var(--r-card); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: var(--shadow-soft), inset 0 0 0 1px var(--line); }
.why-head { display: grid; min-height: 46px; align-items: start; }
.why-head > * { grid-area: 1 / 1; }
.why-q { font-size: var(--fs-title-m); font-weight: 700; color: var(--accent-ink); font-variation-settings: 'ROND' 80; }
.why-a { font-size: 0.95rem; line-height: 1.4; color: var(--ink-muted); opacity: 0; }
.why-a b { color: var(--ink); font-weight: 700; }
.why-chain { position: relative; display: flex; flex-direction: column; gap: 7px; counter-reset: wc; }
.why-chain li {
  --on: 0; position: relative; display: flex; align-items: center; gap: 12px; min-height: 30px; padding-left: 2px; font-size: 0.9rem; font-weight: 600;
  color: color-mix(in srgb, var(--ink) calc(40% + var(--on) * 60%), var(--ink3)); font-variation-settings: 'ROND' 70;
}
.why-chain li::before {
  content: ''; flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box; border: 2px solid color-mix(in srgb, var(--accent) calc(var(--on) * 100%), var(--ink4));
  background: color-mix(in srgb, var(--accent) calc(var(--on) * 100%), transparent);
  mask: none;
}
.why-chain li::after {
  content: ''; position: absolute; left: 12px; top: 30px; width: 2px; height: 11px; background: color-mix(in srgb, var(--accent) calc(var(--on) * 60%), var(--ink4)); opacity: 0.8;
}
.why-chain li:last-child::after { display: none; }
.static .why-a { opacity: 1; position: static; }
.static .why-q { display: none; }

@media (max-width: 759px) {
  .graph-area { left: 0; right: 0; top: 268px; bottom: 164px; }
  .graph-copy { bottom: auto; justify-content: flex-start; }
  .graph-why { top: auto; bottom: 58px; padding-top: 0; }
  .why { width: 100%; padding: 12px 14px 14px; border-radius: 22px; }
  .why-head { min-height: 38px; }
  .why-a { font-size: 0.85rem; }
  .why-chain { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; }
  .why-chain li { font-size: 0.78rem; min-height: 24px; gap: 8px; line-height: 1.2; }
  .why-chain li::before { width: 14px; height: 14px; border-width: 2px; }
  .why-chain li::after { display: none; }
}