.atlas-preview { position: relative; display: block; height: 420px; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background-color: rgba(21,32,25,.025); background-image: linear-gradient(rgba(21,32,25,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(21,32,25,.05) 1px, transparent 1px); background-size: 72px 72px; }

.atlas-dot { position: absolute; width: 9px; height: 9px; border: 1px solid #68736c; border-radius: 50%; background: var(--bg); transform: translate(-50%,-50%); transition: transform .3s var(--ease), background .2s, border-color .2s; }

.atlas-dot.square { border-radius: 0; }

.atlas-dot.photo { background: transparent; }

.atlas-dot.cross { border: 0; background: transparent; }

.atlas-dot.cross::before, .atlas-dot.cross::after { content: ""; position: absolute; background: #68736c; }

.atlas-dot.cross::before { width: 13px; height: 1px; left: -2px; top: 4px; }

.atlas-dot.cross::after { width: 1px; height: 13px; left: 4px; top: -2px; }

.atlas-dot:hover { transform: translate(-50%,-50%) scale(1.7); background: var(--signal); border-color: var(--signal); }

.atlas-caption { position: absolute; left: 20px; bottom: 18px; color: var(--muted); font: 650 11px/1.5 var(--mono); }


.atlas-controls { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 40px 0 18px; }

.atlas-status { color: var(--muted); font: 650 11px/1.4 var(--mono); text-transform: uppercase; }

.atlas-stage { position: relative; height: min(68vw,680px); min-height: 520px; overflow: hidden; border: 1px solid #2c3a31; background-color: var(--atlas-bg); background-image: linear-gradient(rgba(241,239,231,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(241,239,231,.04) 1px, transparent 1px); background-size: 80px 80px; }

.atlas-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.atlas-links line { stroke: rgba(241,239,231,.18); stroke-width: 1; vector-effect: non-scaling-stroke; }

.atlas-links line.signal { stroke: rgba(166,70,36,.72); }

.atlas-guides { position: absolute; inset: 0; pointer-events: none; }

.atlas-guide { position: absolute; transform: translate(-50%,-50%); color: #8e9a91; font: 650 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .055em; }

.atlas-node { position: absolute; z-index: 4; width: 12px; height: 12px; padding: 0; border: 1px solid var(--atlas-fg); border-radius: 50%; background: var(--atlas-bg); transform: translate(-50%,-50%); cursor: crosshair; transition: left .78s var(--ease), top .78s var(--ease), transform .2s, background .2s, border-color .2s; }

.atlas-node[data-type="lab"] { border-radius: 0; }

.atlas-node[data-type="photo"] { background: transparent; }

.atlas-node[data-type="place"] { border: 0; background: transparent; }

.atlas-node[data-type="place"]::before, .atlas-node[data-type="place"]::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--atlas-fg); transform: translate(-50%,-50%); }

.atlas-node[data-type="place"]::before { width: 14px; height: 1px; }

.atlas-node[data-type="place"]::after { width: 1px; height: 14px; }

.atlas-node:hover, .atlas-node:focus, .atlas-node.is-active { transform: translate(-50%,-50%) scale(1.6); border-color: var(--signal); background: var(--signal); }

.atlas-node[data-type="place"]:hover, .atlas-node[data-type="place"]:focus, .atlas-node[data-type="place"].is-active { background: transparent; }

.atlas-node[data-type="place"]:hover::before, .atlas-node[data-type="place"]:hover::after, .atlas-node[data-type="place"].is-active::before, .atlas-node[data-type="place"].is-active::after { background: var(--signal); }

.atlas-workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,320px); gap:14px; align-items:stretch; }

.atlas-tooltip { position:relative; z-index:5; display:grid; align-content:start; gap:8px; min-width:0; padding:22px; border:1px solid #2c3a31; background:rgba(19,29,23,.96); color:var(--atlas-fg); }

.atlas-tooltip span { color:var(--atlas-muted); font:700 11px/1.45 var(--mono); letter-spacing:.075em; text-transform:uppercase; }

.atlas-tooltip strong { color:var(--atlas-fg); font:500 clamp(20px,2vw,30px)/1.18 var(--serif); letter-spacing:-.02em; }

.atlas-tooltip small { color:#9eaaa1; font:600 11px/1.55 var(--mono); }

.atlas-open-record { min-height:44px; margin-top:12px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(209,99,57,.42); background:rgba(166,70,36,.10); color:#e0e5e1; font:700 11px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; }

.atlas-inspector-close { position:absolute; top:10px; right:10px; width:44px; height:44px; border:0; background:transparent; color:#758279; font-size:22px; cursor:pointer; }

.atlas-inspector-close:hover,.atlas-inspector-close:focus-visible { color:var(--signal); outline:none; }

.atlas-inspector.is-empty .atlas-inspector-close { visibility:hidden; }

.atlas-labels { position:absolute; inset:0; z-index:3; pointer-events:none; }

.atlas-node-label { position:absolute; padding:5px 7px; border:1px solid rgba(241,239,231,.10); background:rgba(11,17,14,.82); color:#9eaaa1; font:650 11px/1.25 var(--mono); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.atlas-node-label.is-selected { border-color:rgba(209,99,57,.45); color:#e1e6e2; }

.atlas-foot { display: grid; grid-template-columns: 1fr minmax(280px,.62fr); gap: 40px; align-items: end; margin-top: 30px; }

.atlas-philosophy { margin: 0; font: italic clamp(30px,4vw,58px)/1 var(--serif); }

.atlas-explain { margin: 0; color: var(--soft); font: 650 12px/1.65 var(--mono); }


.atlas-stage[data-mode="trace"] { background-size: 56px 56px; }

.atlas-stage[data-mode="trace"] .atlas-links line { stroke: rgba(166,70,36,.62); stroke-width: 1.4; stroke-dasharray: 4 6; animation: trace-drift 4.5s linear infinite; }

.atlas-stage[data-mode="trace"] .atlas-node { box-shadow: 0 0 0 4px rgba(166,70,36,.045); }


/* Atlas projection field */
.atlas-node { transition:left .34s var(--ease),top .34s var(--ease),transform .18s,background .18s,border-color .18s,opacity .18s; }

.atlas-node > i { display:none; }

.atlas-stage[data-mode="geographic"] { background-image:none; }

.atlas-geographic-frame { position:absolute; inset:0; }

.atlas-geographic-frame svg { width:100%; height:100%; }

.atlas-geographic-frame rect { fill:rgba(21,31,25,.34); stroke:rgba(241,239,231,.16); stroke-width:1; vector-effect:non-scaling-stroke; }

.atlas-geographic-frame line { stroke:rgba(241,239,231,.07); stroke-width:1; vector-effect:non-scaling-stroke; }

.atlas-geographic-frame .atlas-nonspatial-divider { stroke:rgba(209,99,57,.28); stroke-dasharray:4 5; }

.atlas-guide.geo-axis { color:#68756c; font-size:11px; }

.atlas-guide.geo-band { color:#b3bdb5; font-size:11px; letter-spacing:.07em; }

.atlas-guide.trace-note { color:#68756c; font-size:11px; }

.atlas-stage[data-mode="geographic"] .atlas-node.is-global { width:10px; height:10px; border-color:#d16339; background:rgba(166,70,36,.18); }

.atlas-stage[data-mode="geographic"] .atlas-node.is-nonspatial { opacity:.56; border-style:dashed; }

.atlas-stage[data-mode="geographic"] .atlas-links { opacity:0; }