/* 公開アトラス：正式ロゴの土・金・水・赤を、司令板と同じ紙面へ整理する。 */
.demo-mode-atlas .hero {
  grid-template-columns: minmax(0,1.4fr) minmax(300px,.6fr);
  gap: 48px;
  align-items: start;
  min-height: 0;
  padding-top: 34px;
  padding-bottom: 34px;
  background: var(--paper);
}
.demo-mode-atlas .hero-copy { max-width: 780px; }
.demo-mode-atlas .hero-copy h1 { max-width: 720px; font-size: clamp(28px,3vw,38px); line-height: 1.4; }
.demo-mode-atlas .hero-lead { max-width: 680px; font-size: 13px; line-height: 1.85; }
.demo-mode-atlas .hero-lead { margin-top: 14px; }
.demo-mode-atlas .hero-actions { margin-top: 20px; }
.demo-mode-atlas .demo-note { margin-top: 12px; }
.demo-mode-atlas .hero-facts { align-self: center; border-top: 3px solid var(--soil); }
.demo-mode-atlas .hero-facts > div { min-height: 70px; padding: 13px 0; }
.demo-mode-atlas .hero-facts dt { font-size: 19px; }
.demo-mode-atlas .hero-facts dd strong { font-size: 13px; }
.demo-mode-atlas .hero-facts dd span { margin-top: 4px; font-size: 9px; }

.demo-mode-atlas .experience { padding-top: 54px; }
.demo-mode-atlas .section-heading { align-items: end; padding-bottom: 26px; }
.demo-mode-atlas .section-heading h2 { font-size: clamp(27px,3.3vw,42px); }
.demo-mode-atlas .system-explainer { margin-bottom: 14px; }
.demo-mode-atlas .system-explainer article { min-height: 82px; background: var(--paper-strong); border: 1px solid var(--line); }
.demo-mode-atlas .system-explainer article:nth-of-type(1) { border-top: 3px solid var(--soil); }
.demo-mode-atlas .system-explainer article:nth-of-type(2) { border-top: 3px solid var(--harvest); }
.demo-mode-atlas .system-explainer article:nth-of-type(3) { border-top: 3px solid var(--passion); }
.demo-mode-atlas .system-explainer .explainer-result { border: 1px solid rgba(58,175,184,.42); border-top: 3px solid var(--water); background: var(--water-soft, #e5f4f5); }

.demo-mode-atlas .demo-frame {
  overflow: hidden;
  border: 1px solid var(--line-strong);
  border-top: 4px solid var(--soil);
  border-radius: 6px;
  background: var(--paper-strong);
  box-shadow: 0 18px 46px rgba(71,45,29,.11);
}
.demo-mode-atlas .demo-toolbar { min-height: 58px; background: var(--paper-strong); border-bottom: 1px solid var(--line-strong); }
.demo-mode-atlas .search-control { color: var(--ink-soft); }
.demo-mode-atlas .search-control input { color: var(--ink); }
.demo-mode-atlas .search-control input::placeholder { color: #8b7b70; }
.demo-mode-atlas .toolbar-group { border-color: var(--line-strong); background: var(--paper); }
.demo-mode-atlas .toolbar-group button { color: var(--ink-soft); border-right-color: var(--line); }
.demo-mode-atlas .toolbar-group button:hover { color: var(--soil-deep); background: var(--soil-soft, #f1e8df); }
.demo-mode-atlas .toolbar-group .view-mode.is-active { color: #fffdf8; background: var(--water-deep); box-shadow: none; }

.demo-mode-atlas .demo-workspace { grid-template-columns: minmax(0,1.55fr) minmax(315px,.52fr); min-height: 670px; }
.demo-mode-atlas .graph-column { background: #f2ede4; border-right: 1px solid var(--line); }
.demo-mode-atlas .graph-viewport {
  height: 650px;
  scrollbar-color: rgba(123,74,40,.42) transparent;
  background:
    radial-gradient(circle at 50% 43%, rgba(58,175,184,.13), transparent 29%),
    radial-gradient(circle at 22% 72%, rgba(201,160,82,.09), transparent 25%),
    radial-gradient(circle at 82% 68%, rgba(123,74,40,.07), transparent 24%),
    #f2ede4;
}
.demo-mode-atlas .graph-status span { color: var(--soil); }
.demo-mode-atlas .graph-status strong { color: var(--ink); }
.demo-mode-atlas .status-dot { background: var(--water); box-shadow: none; }

.demo-mode-atlas .graph-edges,
.demo-mode-atlas .atlas-edge-map { width: 100%; height: 100%; overflow: visible; }
.demo-mode-atlas .atlas-edge-map { position: absolute; inset: 0; }
.demo-mode-atlas .edge {
  position: static;
  z-index: auto;
  height: auto;
  fill: none;
  stroke: rgba(33,105,112,.54);
  stroke-width: 1.45;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  opacity: .7;
  background: none;
  filter: drop-shadow(0 1px 1px rgba(255,253,248,.9));
  transform: none;
  transform-origin: initial;
  animation: atlasEdgeEnter .82s ease both;
  animation-delay: calc(var(--edge-order, 0) * 18ms + 120ms);
  transition: opacity .26s ease, stroke .26s ease, stroke-width .26s ease, filter .26s ease;
}
.demo-mode-atlas .edge.edge-tool { opacity: .36; stroke: rgba(123,74,40,.55); stroke-width: 1; stroke-dasharray: 2 8; }
.demo-mode-atlas .edge.edge-automation { opacity: .5; stroke: rgba(192,39,45,.66); stroke-width: 1.15; stroke-dasharray: 3 8; }
.demo-mode-atlas .edge.edge-return { stroke: rgba(201,160,82,.82); stroke-width: 1.7; }
.demo-mode-atlas .edge.edge-handoff { stroke: rgba(169,124,43,.62); stroke-width: 1.15; stroke-dasharray: 4 7; }
.demo-mode-atlas .edge.is-active,
.demo-mode-atlas .edge.is-flow {
  stroke: var(--water);
  stroke-width: 2.5;
  opacity: 1;
  background: none;
  filter: drop-shadow(0 0 4px rgba(58,175,184,.58));
}
.demo-mode-atlas .edge.is-active { animation: atlasEdgePulse 1.9s ease-in-out infinite alternate; }
.demo-mode-atlas .edge.is-flow { stroke-dasharray: 8 10; animation: atlasSignalTravel 1.35s linear infinite; }
.demo-mode-atlas .edge.edge-return.is-active,
.demo-mode-atlas .edge.edge-return.is-flow { stroke: var(--harvest); filter: drop-shadow(0 0 4px rgba(201,160,82,.52)); }

.demo-mode-atlas .node {
  min-width: 120px;
  min-height: 72px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--paper-strong);
  border: 2px solid var(--soil);
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255,253,248,.82), 0 4px 12px rgba(71,45,29,.10);
  text-align: center;
  isolation: isolate;
  animation:
    atlasNodeEnter .62s cubic-bezier(.2,.8,.2,1) both,
    atlasNodeFloat 4.6s ease-in-out infinite;
  animation-delay:
    calc(var(--node-order, 0) * 24ms + 100ms),
    calc(var(--node-order, 0) * -120ms);
}
.demo-mode-atlas .node::before {
  position: absolute;
  z-index: -1;
  inset: -9px;
  border: 1px solid color-mix(in srgb, var(--water) 20%, transparent);
  border-radius: 50%;
  opacity: .46;
  content: "";
  animation: atlasHaloBreathe 3.8s ease-in-out infinite;
  animation-delay: calc(var(--node-order, 0) * -90ms);
  pointer-events: none;
}
.demo-mode-atlas .node .node-number { color: var(--water-deep); font-size: 9px; }
.demo-mode-atlas .node .node-label { max-width: 132px; color: var(--soil-deep); font-size: 11px; }
.demo-mode-atlas .node .node-sub { color: var(--ink-soft); font-size: 8px; }
.demo-mode-atlas .node:hover,
.demo-mode-atlas .node:focus-visible { border-color: var(--water); background: #f5fbfb; box-shadow: 0 0 0 6px rgba(58,175,184,.14), 0 5px 15px rgba(71,45,29,.12); }
.demo-mode-atlas .node.is-selected,
.demo-mode-atlas .node.is-tour { border-color: var(--passion); background: var(--harvest-soft, #f7efd9); box-shadow: 0 0 0 7px rgba(201,160,82,.18), 0 6px 16px rgba(71,45,29,.12); }
.demo-mode-atlas .node.is-selected::before,
.demo-mode-atlas .node.is-tour::before { border-color: rgba(201,160,82,.52); opacity: .9; }
.demo-mode-atlas .node.is-dim { opacity: .38; }
.demo-mode-atlas .node.is-preview { border-color: var(--water); box-shadow: 0 0 0 4px rgba(58,175,184,.13); }
.demo-mode-atlas .node.is-search-match { border-color: var(--passion); box-shadow: 0 0 0 4px rgba(192,39,45,.12); }
.demo-mode-atlas .node-type-central { min-width: 158px; min-height: 104px; border: 3px solid var(--water); background: #e5f4f5; box-shadow: 0 0 0 8px rgba(58,175,184,.12), 0 7px 18px rgba(33,105,112,.14); }
.demo-mode-atlas .node-type-central .node-label { font-size: 16px; }
.demo-mode-atlas .node-type-manager { min-width: 140px; min-height: 88px; border-color: var(--water); background: #f2fbfb; }
.demo-mode-atlas .node-type-worker { min-width: 106px; min-height: 66px; border-color: var(--water); background: var(--paper-strong); }
.demo-mode-atlas .node-group-growth,
.demo-mode-atlas .node-type-worker.node-group-growth { border-color: var(--harvest); background: #fbf7eb; }
.demo-mode-atlas .node-group-backoffice,
.demo-mode-atlas .node-type-worker.node-group-backoffice { border-color: var(--soil); background: #f7f0e9; }
.demo-mode-atlas .node-type-tool { min-width: 96px; min-height: 62px; border-color: var(--soil); background: #f4f0eb; }
.demo-mode-atlas .node-type-automation { min-width: 100px; min-height: 64px; border-color: var(--passion); background: #f8e4e4; }
.demo-mode-atlas .node-type-output { min-width: 152px; min-height: 88px; border: 2px solid var(--harvest); background: #f7efd9; box-shadow: 0 0 0 6px rgba(201,160,82,.12), 0 6px 15px rgba(141,104,31,.13); }
.demo-mode-atlas .node-type-request { min-width: 174px; min-height: 92px; border: 2px solid var(--soil); background: #f1e8df; }
.demo-mode-atlas .node-type-output .node-number,
.demo-mode-atlas .node-type-request .node-number { color: var(--harvest-deep); }

.demo-mode-atlas .graph-hint { color: var(--ink-soft); background: rgba(255,253,248,.94); border: 1px solid var(--line); }
.demo-mode-atlas .detail-panel { color: var(--ink); background: var(--paper-strong); border-left: 0; }
.demo-mode-atlas .detail-number { color: var(--harvest-deep); }
.demo-mode-atlas .detail-change { background: #e5f4f5; }

@keyframes atlasNodeEnter {
  from { opacity: 0; scale: .92; }
  to { opacity: 1; scale: 1; }
}
@keyframes atlasNodeFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -2px; }
}
@keyframes atlasHaloBreathe {
  0%, 100% { opacity: .28; scale: .97; }
  50% { opacity: .62; scale: 1.035; }
}
@keyframes atlasEdgeEnter {
  from { opacity: 0; }
}
@keyframes atlasEdgePulse {
  from { opacity: .74; filter: drop-shadow(0 0 2px rgba(58,175,184,.28)); }
  to { opacity: 1; filter: drop-shadow(0 0 6px rgba(58,175,184,.62)); }
}
@keyframes atlasSignalTravel {
  to { stroke-dashoffset: -36; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-mode-atlas .node,
  .demo-mode-atlas .node::before,
  .demo-mode-atlas .edge,
  .demo-mode-atlas .edge.is-active,
  .demo-mode-atlas .edge.is-flow { animation: none !important; translate: 0 0; }
}

@media (max-width: 980px) {
  .demo-mode-atlas .hero { grid-template-columns: 1fr; gap: 24px; min-height: auto; }
  .demo-mode-atlas .demo-workspace { grid-template-columns: 1fr; }
  .demo-mode-atlas .graph-column { border-right: 0; border-bottom: 1px solid var(--line); }
}

@media (max-width: 760px) {
  .demo-mode-atlas .hero { padding-top: 52px; padding-bottom: 52px; background: var(--paper); }
  .demo-mode-atlas .hero-copy h1 { font-size: clamp(28px,8vw,40px); }
  .demo-mode-atlas .system-explainer { grid-template-columns: 1fr; }
  .demo-mode-atlas .system-explainer > i { transform: rotate(90deg); }
  .demo-mode-atlas .demo-toolbar { align-items: stretch; }
  .demo-mode-atlas .graph-viewport { height: 590px; }
}

/* 実運用のシェルドン神経アトラスと同じ「深い黒緑・ミントの神経光」へ揃える。 */
body.demo-mode-atlas {
  --atlas-night: #071310;
  --atlas-night-soft: #0b1b17;
  --atlas-panel: #0e2420;
  --atlas-line: rgba(126, 190, 175, .22);
  --atlas-mint: #79d0bd;
  --atlas-mint-soft: #b7cbc4;
  --atlas-gold: #dfbf77;
  --atlas-text: #faf7ef;
  --atlas-muted: #a9beb7;
  color: var(--atlas-text);
  background:
    radial-gradient(circle at 50% 30%, rgba(52, 132, 113, .18), transparent 34%),
    var(--atlas-night);
}

.demo-mode-atlas .site-header {
  color: var(--atlas-text);
  border-bottom-color: var(--atlas-line);
  background: rgba(7, 19, 16, .94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .18);
}
.demo-mode-atlas .brand strong { color: var(--atlas-text); }
.demo-mode-atlas .brand small { color: var(--atlas-muted); }
.demo-mode-atlas .sample-badge { color: var(--atlas-muted); border-color: var(--atlas-line); background: rgba(14, 36, 32, .72); }
.demo-mode-atlas .sample-badge i { background: var(--atlas-mint); box-shadow: 0 0 8px rgba(121, 208, 189, .55); }
.demo-mode-atlas .header-switch {
  color: var(--atlas-text);
  border-color: rgba(121, 208, 189, .48);
  background: rgba(121, 208, 189, .08);
}
.demo-mode-atlas .header-switch:hover,
.demo-mode-atlas .header-switch:focus-visible { background: rgba(121, 208, 189, .16); }
.demo-mode-atlas .atlas-header-actions .button-quiet { color: var(--atlas-text); }

.demo-mode-atlas .hero {
  color: var(--atlas-text);
  border-bottom: 1px solid var(--atlas-line);
  background:
    radial-gradient(circle at 54% 48%, rgba(52, 132, 113, .22), transparent 38%),
    radial-gradient(circle at 13% 20%, rgba(223, 191, 119, .07), transparent 28%),
    var(--atlas-night);
}
.demo-mode-atlas .eyebrow,
.demo-mode-atlas .hero-copy h1,
.demo-mode-atlas .hero-facts dt,
.demo-mode-atlas .hero-facts dd strong { color: var(--atlas-text); }
.demo-mode-atlas .eyebrow { color: var(--atlas-mint); }
.demo-mode-atlas .hero-lead,
.demo-mode-atlas .demo-note,
.demo-mode-atlas .hero-facts dd span { color: var(--atlas-muted); }
.demo-mode-atlas .hero-facts {
  border-top-color: var(--atlas-mint);
  background: rgba(14, 36, 32, .66);
}
.demo-mode-atlas .hero-facts > div { border-color: var(--atlas-line); }
.demo-mode-atlas .button-primary { color: #071310; background: var(--atlas-mint); border-color: var(--atlas-mint); }
.demo-mode-atlas .button-secondary { color: var(--atlas-text); background: transparent; border-color: rgba(121, 208, 189, .46); }

.demo-mode-atlas .experience,
.demo-mode-atlas .build-section,
.demo-mode-atlas .site-footer {
  color: var(--atlas-text);
  background: var(--atlas-night);
}
.demo-mode-atlas .section-heading h2,
.demo-mode-atlas .section-heading > p,
.demo-mode-atlas .build-intro h2,
.demo-mode-atlas .build-intro p { color: var(--atlas-text); }
.demo-mode-atlas .section-heading > p,
.demo-mode-atlas .build-intro p { color: var(--atlas-muted); }
.demo-mode-atlas .system-explainer article {
  color: var(--atlas-text);
  border-color: var(--atlas-line);
  background: rgba(14, 36, 32, .84);
}
.demo-mode-atlas .system-explainer article strong { color: var(--atlas-text); }
.demo-mode-atlas .system-explainer article span { color: var(--atlas-muted); }
.demo-mode-atlas .system-explainer .explainer-result {
  border-color: rgba(121, 208, 189, .42);
  border-top-color: var(--atlas-mint);
  background: rgba(26, 78, 66, .54);
}
.demo-mode-atlas .system-explainer > i { color: var(--atlas-mint); }

.demo-mode-atlas .demo-frame {
  border-color: rgba(121, 208, 189, .28);
  border-top-color: var(--atlas-mint);
  background: var(--atlas-night-soft);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .34), 0 0 80px rgba(52, 132, 113, .08);
}
.demo-mode-atlas .demo-toolbar {
  color: var(--atlas-text);
  border-bottom-color: var(--atlas-line);
  background: rgba(7, 19, 16, .96);
}
.demo-mode-atlas .search-control { color: var(--atlas-muted); }
.demo-mode-atlas .search-control input { color: var(--atlas-text); }
.demo-mode-atlas .search-control input::placeholder { color: #7d9b92; }
.demo-mode-atlas .toolbar-group { border-color: var(--atlas-line); background: var(--atlas-night-soft); }
.demo-mode-atlas .toolbar-group button { color: var(--atlas-muted); border-right-color: var(--atlas-line); }
.demo-mode-atlas .toolbar-group button:hover { color: var(--atlas-text); background: rgba(121, 208, 189, .12); }
.demo-mode-atlas .toolbar-group .view-mode.is-active { color: #071310; background: var(--atlas-mint); }

.demo-mode-atlas .graph-column { border-right-color: var(--atlas-line); background: var(--atlas-night); }
.demo-mode-atlas .graph-viewport {
  scrollbar-color: rgba(121, 208, 189, .42) transparent;
  background:
    radial-gradient(circle at 50% 46%, rgba(52, 132, 113, .25), transparent 38%),
    radial-gradient(circle at 16% 18%, rgba(223, 191, 119, .075), transparent 29%),
    radial-gradient(circle at 84% 76%, rgba(121, 208, 189, .06), transparent 24%),
    var(--atlas-night);
}
.demo-mode-atlas .graph-status span { color: var(--atlas-mint); }
.demo-mode-atlas .graph-status strong { color: var(--atlas-text); }
.demo-mode-atlas .status-dot { background: var(--atlas-mint); box-shadow: 0 0 12px rgba(121, 208, 189, .7); }

.demo-mode-atlas .edge {
  stroke: rgba(121, 208, 189, .48);
  filter: drop-shadow(0 0 2px rgba(121, 208, 189, .18));
}
.demo-mode-atlas .edge.edge-tool { stroke: rgba(168, 197, 188, .44); }
.demo-mode-atlas .edge.edge-automation { stroke: rgba(215, 122, 130, .64); }
.demo-mode-atlas .edge.edge-return { stroke: rgba(223, 191, 119, .72); }
.demo-mode-atlas .edge.edge-handoff { stroke: rgba(121, 208, 189, .38); }
.demo-mode-atlas .edge.is-active,
.demo-mode-atlas .edge.is-flow { stroke: var(--atlas-mint); filter: drop-shadow(0 0 6px rgba(121, 208, 189, .72)); }
.demo-mode-atlas .edge.edge-return.is-active,
.demo-mode-atlas .edge.edge-return.is-flow { stroke: var(--atlas-gold); filter: drop-shadow(0 0 6px rgba(223, 191, 119, .58)); }

.demo-mode-atlas .node {
  color: var(--atlas-text);
  border-color: #73b9aa;
  background: #153b32;
  box-shadow: 0 0 0 5px rgba(121, 208, 189, .07), 0 0 22px rgba(52, 132, 113, .18);
}
.demo-mode-atlas .node::before { border-color: rgba(121, 208, 189, .28); }
.demo-mode-atlas .node .node-number { color: var(--atlas-mint); }
.demo-mode-atlas .node .node-label { color: var(--atlas-text); }
.demo-mode-atlas .node .node-sub { color: var(--atlas-mint-soft); }
.demo-mode-atlas .node:hover,
.demo-mode-atlas .node:focus-visible { border-color: var(--atlas-mint); background: #205044; box-shadow: 0 0 0 7px rgba(121, 208, 189, .12), 0 0 28px rgba(121, 208, 189, .28); }
.demo-mode-atlas .node.is-selected,
.demo-mode-atlas .node.is-tour { border-color: var(--atlas-gold); background: #5a4825; box-shadow: 0 0 0 7px rgba(223, 191, 119, .13), 0 0 28px rgba(223, 191, 119, .25); }
.demo-mode-atlas .node.is-selected::before,
.demo-mode-atlas .node.is-tour::before { border-color: rgba(223, 191, 119, .58); }
.demo-mode-atlas .node-type-central { border-color: var(--atlas-gold); background: #dfbf77; box-shadow: 0 0 0 9px rgba(223, 191, 119, .12), 0 0 32px rgba(223, 191, 119, .28); }
.demo-mode-atlas .node-type-central .node-number,
.demo-mode-atlas .node-type-central .node-label,
.demo-mode-atlas .node-type-central .node-sub { color: #101a16; }
.demo-mode-atlas .node-type-manager { border-color: #79d0bd; background: #205044; }
.demo-mode-atlas .node-type-worker { border-color: #65a697; background: #173a32; }
.demo-mode-atlas .node-group-growth,
.demo-mode-atlas .node-type-worker.node-group-growth { border-color: var(--atlas-gold); background: #4b4027; }
.demo-mode-atlas .node-group-backoffice,
.demo-mode-atlas .node-type-worker.node-group-backoffice { border-color: #90aaa2; background: #1d3631; }
.demo-mode-atlas .node-type-tool { border-color: #90aaa2; background: #1d3631; }
.demo-mode-atlas .node-type-automation { border-color: #d77a82; background: #6a3036; }
.demo-mode-atlas .node-type-output { border-color: var(--atlas-gold); background: #69562b; box-shadow: 0 0 0 6px rgba(223, 191, 119, .10), 0 0 22px rgba(223, 191, 119, .18); }
.demo-mode-atlas .node-type-request { border-color: #73b9aa; background: #173a32; }
.demo-mode-atlas .node-type-output .node-number,
.demo-mode-atlas .node-type-request .node-number { color: var(--atlas-gold); }

.demo-mode-atlas .graph-hint { color: var(--atlas-muted); border-color: var(--atlas-line); background: rgba(7, 19, 16, .88); }
.demo-mode-atlas .detail-panel { color: var(--atlas-text); border-left: 0; background: var(--atlas-night-soft); }
.demo-mode-atlas .detail-type { color: var(--atlas-mint); }
.demo-mode-atlas .detail-number { color: var(--atlas-gold); }
.demo-mode-atlas .detail-panel h3,
.demo-mode-atlas .detail-role,
.demo-mode-atlas .detail-block p,
.demo-mode-atlas .detail-block li,
.demo-mode-atlas .detail-facts p,
.demo-mode-atlas .detail-change p { color: var(--atlas-text); }
.demo-mode-atlas .detail-role,
.demo-mode-atlas .detail-facts span { color: var(--atlas-muted); }
.demo-mode-atlas .detail-block { border-top-color: var(--atlas-line); }
.demo-mode-atlas .detail-change { color: var(--atlas-text); background: rgba(121, 208, 189, .08); border-left-color: var(--atlas-mint); }

@media (max-width: 980px) {
  .demo-mode-atlas .graph-column { border-right: 0; border-bottom-color: var(--atlas-line); }
}

@media (max-width: 760px) {
  .demo-mode-atlas .hero {
    background:
      radial-gradient(circle at 52% 34%, rgba(52, 132, 113, .22), transparent 42%),
      var(--atlas-night);
  }
}