/* Create Paradise Now · SOTA Global Propagation Matrix (portable) */
/* ═══════════ LIVING GLOBAL PROPAGATION MATRIX ═══════════ */
    .console { position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 7vw, 100px) 0; background: var(--console); color: #FAF6ED; }
    .console::before {
      content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
      background:
        radial-gradient(55% 60% at 78% 64%, rgba(185,136,62,.16), rgba(185,136,62,0) 70%),
        linear-gradient(rgba(231,221,203,.035) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, rgba(231,221,203,.035) 1px, transparent 1px) 0 0 / 48px 48px;
    }
    .console .sec-index { color: var(--gold); }
    .console .sec-index::after { background: rgba(231,221,203,.18); }
    .console .sec-title { color: #FFFFFF; }
    .console .sec-lede { color: #A99B88; }
    .pm-badge {
      display: inline-flex; align-items: center; gap: 8px; margin-bottom: 16px; padding: 6px 14px; border-radius: 999px;
      font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
      color: var(--gold); background: rgba(185,136,62,.12); border: 1px solid rgba(185,136,62,.3);
    }
    .pm-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hibiscus); box-shadow: 0 0 8px var(--hibiscus); animation: livePulse 2s cubic-bezier(.4,0,.6,1) infinite; }
    .pm-legend { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
    .pm-chip {
      display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px;
      border: 1px solid rgba(231,221,203,.14); background: rgba(255,255,255,.03);
      font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .06em; color: #CFC3B0;
      transition: border-color .2s var(--ease), background .2s var(--ease), color .2s var(--ease);
    }
    .pm-chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(185,136,62,.7); }
    .pm-chip--hub i { background: var(--hibiscus); box-shadow: 0 0 8px rgba(210,69,44,.8); }
    .pm-chip:hover, .pm-chip:focus-visible, .pm-chip[aria-pressed="true"] { border-color: rgba(185,136,62,.6); background: rgba(185,136,62,.1); color: #FFF9EF; }
    .pm-stage {
      position: relative; width: 100%; aspect-ratio: 2.52 / 1; min-height: 190px; border-radius: 22px; overflow: hidden;
      background: radial-gradient(70% 90% at 50% 50%, #140D06, #0B0703); border: 1px solid rgba(231,221,203,.1);
      box-shadow: inset 0 0 80px rgba(0,0,0,.55), 0 30px 60px -30px rgba(0,0,0,.8);
    }
    .pm-stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: manipulation; }
    .pm-hint { position: absolute; left: 16px; bottom: 12px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: #74685A; pointer-events: none; }
    .pm-live {
      position: absolute; right: 14px; top: 12px; display: inline-flex; align-items: center; gap: 7px; pointer-events: none;
      font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #B8D394;
    }
    .pm-live::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--sage); animation: livePulse 2s cubic-bezier(.4,0,.6,1) infinite; }
    .pm-tip {
      position: absolute; left: 0; top: 0; z-index: 3; width: max-content; min-width: 230px; max-width: 290px; padding: 12px 14px 13px;
      border-radius: 14px; background: rgba(44,32,24,.97); border: 1px solid rgba(185,136,62,.75); color: #FFF9EF;
      box-shadow: 0 18px 40px -12px rgba(0,0,0,.75); font-size: 12px; line-height: 1.45; pointer-events: none;
      opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s;
    }
    .pm-tip.is-on { opacity: 1; visibility: visible; }
    .pm-tip__name { font-family: var(--sans); font-size: 13px; font-weight: 750; letter-spacing: -.01em; color: #E5B368; }
    .pm-tip__region { margin-top: 1px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: #A99B88; }
    .pm-tip__dl { display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; margin: 10px 0 0; padding-top: 9px; border-top: 1px solid rgba(255,249,239,.12); }
    .pm-tip__dl dt { font-family: var(--mono); font-size: 9px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8C7E6C; padding-top: 2px; }
    .pm-tip__dl dd { margin: 0; font-family: var(--mono); font-size: 11px; color: #FFF9EF; font-variant-numeric: tabular-nums; }
    .pm-tip__ok { color: #B8D394 !important; }
    .pm-tip__meter { display: block; height: 3px; margin-top: 5px; border-radius: 999px; background: rgba(255,249,239,.12); overflow: hidden; }
    .pm-tip__meter i { display: block; height: 100%; width: var(--w, 0%); background: linear-gradient(90deg, var(--gold), #E5B368); }
    .pm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
    .pm-stat { padding: 16px 18px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid rgba(231,221,203,.1); }
    .pm-stat b { display: block; font-family: var(--mono); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; letter-spacing: -.03em; color: #FAF6ED; font-variant-numeric: tabular-nums; line-height: 1.1; }
    .pm-stat b.gold { color: var(--gold); }
    .pm-stat b.sage { color: #A9C08C; }
    .pm-stat b.red { color: #E8674E; }
    .pm-stat span { display: block; margin-top: 6px; font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8C7E6C; line-height: 1.4; }
    .pm-stat small { display: block; margin-top: 5px; font-family: var(--book); font-size: 12px; color: #6F6353; line-height: 1.4; }

    

/* CPN portable SOTA map — host-page bridges */
.console {
  --ink: #191207;
  --muted: #6B5E4E;
  --serif: "Playfair Display", Georgia, serif;
  --book: "PT Serif", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --sans: Inter, system-ui, sans-serif;
  --gold: #B9883E;
  --gold-ink: #8A6428;
  --hibiscus: #D2452C;
  --sage: #7E9463;
  --console: #110B04;
  --ease: cubic-bezier(.22, .72, 0, 1);
  --w: 0%;
}
.console .shell { width: min(100% - 40px, 1120px); margin-inline: auto; }
.console .sec-head { max-width: 780px; margin-bottom: clamp(28px, 4vw, 46px); }
.console .sec-index {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  color: var(--gold-ink); font-family: var(--mono); font-size: 11px;
  font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.console .sec-index::after {
  content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(185,136,62,.45), transparent);
}
.console .sec-title {
  margin: 0; color: #FAF6ED; font-family: var(--serif); font-weight: 600;
  font-size: clamp(28px, 4.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
}
.console .sec-title em, .console .pm-title em {
  color: var(--hibiscus); font-family: var(--serif); font-style: italic; font-weight: 600;
}
.console .sec-lede {
  max-width: 660px; margin: 16px 0 0; color: #B7A894; font-family: var(--book);
  font-size: clamp(16.5px, 1.7vw, 18.5px); line-height: 1.55;
}
.console--lite { padding: clamp(40px, 5vw, 72px) 0; }
.console--lite .pm-chip:nth-child(n+4) { display: none; }
.console--lite .pm-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }