body.atlas { --bg:#10252e; --panel:#173540; --line:#4d7180; --ink:#f3f7f0; --muted:#c2d6dc; --accent:#b8f2a6; --on-accent:#132c24; --radius:10px; }
.atlas .site-header { border-bottom:1px dashed var(--line); margin-bottom:20px; }
.atlas-hero { display:grid; grid-template-columns:1.45fr .7fr; gap:16px; }
.atlas-route { min-height:490px; display:flex; flex-direction:column; justify-content:center; align-items:start; position:relative; overflow:hidden; padding:clamp(20px,5vw,66px); border:1px solid var(--line); border-radius:var(--radius); isolation:isolate; background:linear-gradient(#9ab7bb16 1px,transparent 1px),linear-gradient(90deg,#9ab7bb16 1px,transparent 1px),#173540; background-size:27px 27px; }
.atlas-route h1 { max-width:17ch; }
.route-path { position:absolute; width:85%; height:64%; top:18%; left:10%; transform:rotate(-18deg); border:2px dashed #b8f2a686; border-right-color:transparent; border-radius:44% 16% 12% 28%; z-index:-1; }
.route-start,.route-end { position:absolute; left:16px; top:14px; font:700 11px var(--mono); color:#c4dfe5; }
.route-end { left:auto; top:auto; bottom:14px; right:16px; }
.atlas-images { display:grid; grid-template-rows:1.3fr .85fr; gap:12px; }
.atlas-images figure { position:relative; min-height:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.atlas-images img { position:absolute; width:100%; height:100%; }
.atlas-images figcaption { position:absolute; bottom:8px; left:8px; background:#10252eea; padding:6px; font:10px var(--mono); }
.atlas-body { display:grid; grid-template-columns:1.2fr .8fr; gap:15px; }
.atlas-body .app-band { margin-bottom:0; }
@media(max-width:760px){.atlas-hero,.atlas-body{grid-template-columns:1fr}.atlas-route{min-height:390px}.atlas-images{grid-template-columns:1fr 1fr;grid-template-rows:145px}}