/* How the figure and the close-ups look on the stage: hotspots, labels, insets and flows. The page sets
   data-lang="zh" | "en" | "both" on <html>; labels and captions show the language chosen. */
.atlas-svg { display: block; font-family: "DM Sans", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", system-ui, sans-serif; overflow: visible; }
.atlas-svg .part { cursor: pointer; transition: filter .25s ease, opacity .3s ease; }
.atlas-svg .part:hover { filter: brightness(1.16) saturate(1.08); }
.atlas-svg .part.is-on { filter: brightness(1.2) drop-shadow(0 0 5px rgba(255, 236, 200, .75)); }
.atlas-svg.is-dim .part:not(.is-focus):not(.is-on) { opacity: .22; }
.atlas-svg .part.is-focus { filter: brightness(1.18) drop-shadow(0 0 7px rgba(255, 210, 120, .9)); }
.atlas-svg .ghost { pointer-events: none; }

.atlas-svg .lbl { cursor: pointer; }
.atlas-svg .lbl .lead { fill: none; stroke: #d9e1e4; stroke-width: 1; opacity: .5; }
.atlas-svg .lbl .pin { fill: #f6f8f8; stroke: #0b0e11; stroke-width: 1; }
.atlas-svg .lt { font-size: 17px; font-weight: 500; fill: #eef2f3; paint-order: stroke; stroke: #0b0e11; stroke-width: 3.5px; stroke-linejoin: round; }
.atlas-svg .lt .en, .atlas-svg .cap .en { font-size: 13px; font-weight: 400; fill: #a3b2b8; }
.atlas-svg .lbl:hover .lt, .atlas-svg .lbl.is-on .lt { fill: #ffd98a; }
.atlas-svg .lbl:hover .lead, .atlas-svg .lbl.is-on .lead { stroke: #ffd98a; opacity: 1; }
.atlas-svg .lbl.is-on .pin { fill: #ffd98a; }
.atlas-svg.is-dim .lbl:not(.is-focus):not(.is-on) { opacity: .35; }
.atlas-svg .cap { font-size: 15px; fill: #c9d3d7; paint-order: stroke; stroke: #0b0e11; stroke-width: 3px; stroke-linejoin: round; }
.atlas-svg .cap.title { font-size: 19px; font-weight: 600; fill: #eef2f3; }
.atlas-svg .cap.note { font-size: 13px; fill: #93a3a9; }
html[data-lang="zh"] .atlas-svg .en { display: none; }
html[data-lang="en"] .atlas-svg .zh { display: none; }
.hide-labels .atlas-svg .lbl { display: none; }

.atlas-svg .inset-ray { fill: none; stroke: #fff; stroke-opacity: .28; stroke-width: 1; stroke-dasharray: 3 4; }
.atlas-svg .inset-spot { fill: none; stroke: #fff; stroke-opacity: .75; stroke-width: 1.4; }
.atlas-svg .inset-bg { fill: #121a20; }
.atlas-svg .inset-rim { fill: none; stroke: #fff; stroke-opacity: .55; stroke-width: 1.6; }

.atlas-svg .flow { fill: none; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 1.5 13; pointer-events: none; animation: atlas-flow 1.4s linear infinite; }
.atlas-svg .flow-o2 { stroke: #ff7a6e; }
.atlas-svg .flow-co2 { stroke: #7da5ff; }
.atlas-svg .flow-air { stroke: #b4e2ff; }
.atlas-svg .flow-food { stroke: #f4c06a; }
.atlas-svg .flow-signal { stroke: #ffe36e; }
.atlas-svg .flow-urine { stroke: #f2db69; }
.atlas-svg .flow-lymph { stroke: #9be096; }
@keyframes atlas-flow { to { stroke-dashoffset: -29; } }
/* Heat in the ages and risks views: 1 (a little) to 3 (a lot). */
.atlas-svg .part[data-heat] { opacity: 1; }
.atlas-svg .part[data-heat="1"] { filter: drop-shadow(0 0 4px rgba(255, 170, 90, .75)) brightness(1.08); }
.atlas-svg .part[data-heat="2"] { filter: drop-shadow(0 0 8px rgba(255, 120, 70, .9)) brightness(1.16); }
.atlas-svg .part[data-heat="3"] { filter: drop-shadow(0 0 12px rgba(255, 70, 60, 1)) brightness(1.24); }
@media (prefers-reduced-motion: reduce) { .atlas-svg .flow { animation: none; stroke-dasharray: none; opacity: .55; } }