/* Round 2: each visual grammar describes information, never simulated skin science. */
.diagram-study-parallel .diagram-root,
.diagram-evidence-boundary .diagram-root,
.diagram-balanced-family .diagram-root { padding-bottom:16px;border-bottom:1px solid #b4cbd6; }
.diagram-study-parallel .diagram-root-mark { width:23px;height:29px;border-radius:3px;box-shadow:4px -4px 0 -1px #f0f5f6,4px -4px 0 0 #92b0bf; }
.diagram-study-parallel .diagram-nodes { grid-template-columns:repeat(2,minmax(0,1fr));gap:17px 30px;margin:30px 0 0; }
.diagram-study-parallel .role-condition { border:1px solid #a5bdcb;border-radius:4px 4px 20px 20px;background:#edf4f6;padding:26px 13px 18px;position:relative; }
.diagram-study-parallel .role-condition:before { content:'';display:block;position:absolute;top:-7px;left:24%;right:24%;height:6px;border:1px solid #a5bdcb;background:#f9fcfd;border-radius:3px 3px 0 0; }
.diagram-study-parallel .role-condition strong { font:400 20px/1.6 var(--serif); }
.diagram-study-parallel .role-condition .diagram-node-mark { font-size:12px; }
.diagram-study-parallel .role-shared { grid-column:1/-1;background:transparent;border:0;border-top:1px solid #a5bdcb;padding:18px 10px 5px; }
.diagram-study-parallel .role-shared:before { content:'';position:absolute;left:24%;right:24%;top:-18px;height:17px;border-inline:1px solid #a5bdcb; }
.diagram-study-parallel .role-shared strong { font:400 17px/1.7 var(--serif); }
.diagram-study-parallel .role-boundary { grid-column:1/-1;text-align:left;border:0;border-left:3px solid #98b3c3;padding:9px 15px;background:#e5eff3; }
.diagram-study-parallel .role-boundary .diagram-node-mark,
.diagram-study-parallel .role-shared .diagram-node-mark { display:none; }
.diagram-study-parallel .role-boundary strong { font-size:12px; }
.diagram-study-parallel .role-boundary .diagram-node-detail { margin-top:3px; }

.diagram-evidence-boundary .diagram-root-mark { border-radius:0;width:24px;height:27px;box-shadow:4px 4px 0 0 #d8e5eb; }
.diagram-evidence-boundary .diagram-nodes { grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 25px;margin-top:24px; }
.diagram-evidence-boundary .role-model { border:1px solid #a4bdcb;border-top:3px solid #91b1c2;background:linear-gradient(180deg,#fff,#edf4f7);padding:21px 15px;border-radius:2px 2px 24px 24px; }
.diagram-evidence-boundary .role-model strong { font:400 17px/1.8 var(--serif); }
.diagram-evidence-boundary .role-measurement { grid-column:1/-1;border:0;border-top:1px solid #c0d2dc;background:transparent;padding:18px 10px 9px; }
.diagram-evidence-boundary .role-measurement:before { content:'';position:absolute;left:24%;right:24%;top:-16px;height:15px;border-inline:1px solid #a4bdcb; }
.diagram-evidence-boundary .role-measurement strong { font:400 17px/1.8 var(--serif); }
.diagram-evidence-boundary .role-boundary { grid-column:1/-1;border:1px dashed #89a8b9;background:transparent;padding:20px 18px;margin-top:6px;text-align:left; }
.diagram-evidence-boundary .role-boundary:before { content:'別の問い';display:inline-block;position:absolute;left:14px;top:-10px;background:#f0f5f6;color:#5b7c8f;padding:1px 7px;font-size:10px;letter-spacing:.1em; }
.diagram-evidence-boundary .role-boundary strong { font-size:14px; }
.diagram-evidence-boundary .role-measurement .diagram-node-mark,
.diagram-evidence-boundary .role-boundary .diagram-node-mark { display:none; }

.diagram-balanced-family .diagram-root-mark { border-radius:0;box-shadow:3px 3px 0 #d8e5eb;width:25px;height:28px; }
.diagram-balanced-family .diagram-nodes { grid-template-columns:repeat(3,minmax(0,1fr));margin-top:32px;gap:18px; }
.diagram-balanced-family .diagram-node { border:1px solid #a9c1cf;border-top:3px solid #90adbe;background:#f9fcfd;text-align:left;padding:21px 13px 18px;border-radius:0; }
.diagram-balanced-family .diagram-node:before { content:'';position:absolute;left:50%;top:-33px;height:30px;border-left:1px solid #b4cbd6; }
.diagram-balanced-family .diagram-node strong { font:400 17px/1.7 var(--serif); }
.diagram-balanced-family .diagram-node-mark { color:#6a8a9e;font-size:12px; }
.diagram-balanced-family .diagram-node-detail { margin-top:9px; }
.diagram-balanced-family .role-peer { background:#f9fcfd; }

.diagram-surface-wash .diagram-root-mark { width:30px;height:24px;border-radius:55%;box-shadow:9px -5px 0 -5px #f0f5f6,9px -5px 0 -4px #8ba8b8; }
.diagram-surface-wash .diagram-nodes { grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:30px;padding-bottom:29px;border-bottom:2px solid #93b1c1; }
.diagram-surface-wash .diagram-node { border:0;background:transparent;padding:12px 6px; }
.diagram-surface-wash .diagram-node:not(:last-child):after { content:'→';position:absolute;right:-18px;top:23px;font-size:18px;color:#8caab9; }
.diagram-surface-wash .diagram-node-mark { display:flex;width:45px;height:45px;border:1px solid #a5bdcb;border-radius:50%;margin:0 auto 17px;align-items:center;justify-content:center;background:#e4eef3; }
.diagram-surface-wash .role-surface .diagram-node-mark { border-style:dotted;border-radius:38% 50% 45% 55%; }
.diagram-surface-wash .role-cleanser .diagram-node-mark { border-radius:50% 50% 39% 39%;box-shadow:7px -6px 0 -5px #f0f5f6,7px -6px 0 -4px #a5bdcb; }
.diagram-surface-wash .role-rinse .diagram-node-mark { border-radius:45%;border-bottom-width:3px; }
.diagram-surface-wash .diagram-node strong { font:400 15px/1.8 var(--serif); }
.diagram-surface-wash .diagram-takeaway { border:0;padding-top:0; }
.diagram-surface-wash .diagram-stage { padding-bottom:18px; }
.diagram-surface-wash .diagram-connectors,
.diagram-study-parallel .diagram-connectors,
.diagram-evidence-boundary .diagram-connectors,
.diagram-balanced-family .diagram-connectors { display:none; }
.diagram-study-parallel .diagram-node.is-current,
.diagram-evidence-boundary .diagram-node.is-current,
.diagram-balanced-family .diagram-node.is-current,
.diagram-surface-wash .diagram-node.is-current { background:#d1e3eb;box-shadow:0 0 0 2px #638ba2; }

/* The cholesterol figure separates a blend from animal research, not skin layers. */
.visual-article[data-visual-article="cholesterol"] .diagram-evidence-lanes .diagram-root-mark { border-radius:0; }
/* Keep both betaine names visually equal: this is identity, not a ranking. */
.visual-article[data-visual-article="betaine"] .role-original,
.visual-article[data-visual-article="betaine"] .role-derivative { border-left-color:#89a8b9; }

@media(max-width:1000px){
 .diagram-study-parallel .role-condition strong{font-size:17px;}
 .diagram-balanced-family .diagram-node strong{font-size:15px;}
}
@media(max-width:650px){
 .diagram-study-parallel .diagram-nodes{gap:16px 18px;margin-top:29px;}
 .diagram-study-parallel .role-condition{padding:22px 8px 16px;}
 .diagram-study-parallel .role-condition strong{font-size:16px;}
 .diagram-study-parallel .role-shared{padding-top:18px;}
 .diagram-study-parallel .role-shared strong{font-size:16px;}
 .diagram-study-parallel .role-boundary{padding:12px 13px;}
 .diagram-study-parallel .role-boundary strong{font-size:12px;}
 .diagram-evidence-boundary .diagram-nodes{gap:16px 16px;}
 .diagram-evidence-boundary .role-model{padding:20px 9px 17px;}
 .diagram-evidence-boundary .role-model strong{font-size:15px;}
 .diagram-evidence-boundary .role-measurement strong{font-size:15px;}
 .diagram-evidence-boundary .role-boundary{padding:20px 13px 15px;}
 .diagram-evidence-boundary .role-boundary strong{font-size:13px;}
 .diagram-balanced-family .diagram-nodes{grid-template-columns:1fr;gap:13px;margin-top:21px;margin-left:10px;padding-left:20px;border-left:1px solid #b4cbd6;}
 .diagram-balanced-family .diagram-node{padding:15px 14px;display:grid;grid-template-columns:25px minmax(0,1fr);column-gap:10px;border-top-width:1px;}
 .diagram-balanced-family .diagram-node:before{top:28px;left:-21px;width:20px;height:0;border-left:0;border-top:1px solid #b4cbd6;}
 .diagram-balanced-family .diagram-node strong{font-size:16px;}
 .diagram-balanced-family .diagram-node-detail{grid-column:2;margin-top:4px;}
 .diagram-balanced-family .diagram-node-mark{grid-row:1/3;margin-top:7px;}
 .diagram-surface-wash .diagram-nodes{grid-template-columns:1fr;gap:16px;margin-top:21px;padding-left:17px;border-bottom:0;border-left:2px solid #93b1c1;padding-bottom:5px;}
 .diagram-surface-wash .diagram-node{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:13px;text-align:left;padding:9px 0 13px;}
 .diagram-surface-wash .diagram-node:not(:last-child):after{content:'↓';right:auto;left:17px;top:auto;bottom:-16px;font-size:17px;}
 .diagram-surface-wash .diagram-node-mark{grid-row:1/3;width:40px;height:40px;margin:3px 0 0;}
 .diagram-surface-wash .diagram-node-detail{grid-column:2;margin-top:4px;}
 .diagram-surface-wash .diagram-node strong{font-size:15px;}
 .diagram-surface-wash .diagram-takeaway{padding-top:11px;border-top:1px solid #c7d9e0;}
}
@media(max-width:360px){
 .diagram-study-parallel .role-condition strong{font-size:14px;}
 .diagram-evidence-boundary .role-model strong{font-size:14px;}
 .diagram-balanced-family .diagram-node strong{font-size:14px;}
}
.visual-article .visual-table-wrap .visual-refs{display:flex;flex-wrap:wrap;margin-top:.65rem;gap:.3rem .6rem;font-size:.7rem}
.visual-guide-link{border-block:1px solid var(--line,#d9dfd5);padding:1.5rem 0;margin:2rem 0}
.visual-guide-link a{font-size:1.1rem;line-height:1.8;color:inherit}