.kinetic-atlas{position:relative;grid-template-columns:.83fr 1.17fr;gap:clamp(22px,4vw,56px);padding:42px 0 46px;margin-top:38px}
.kinetic-atlas .kinetic-copy h3{font-size:clamp(31px,3.2vw,45px);line-height:1.1;letter-spacing:-.035em;margin:15px 0 20px}
.kinetic-atlas .kinetic-copy>p{max-width:430px}
.kinetic-atlas .kinetic-copy .atlas-lede{font-size:17px;line-height:1.6;color:var(--ink)}
.kinetic-atlas .kinetic-copy .kinetic-hint{margin-top:15px}
.kinetic-atlas .kinetic-surface{overflow:hidden;border:1px solid #7798d8;border-radius:7px;padding:0;background:radial-gradient(circle at 53% 45%,#1d4183 0%,#112b59 43%,#081a37 100%);box-shadow:0 20px 40px rgba(14,45,102,.12)}
.kinetic-atlas .kinetic-surface::before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,transparent 49.8%,rgba(164,199,255,.06) 50%,transparent 50.2%),linear-gradient(transparent 49.8%,rgba(164,199,255,.06) 50%,transparent 50.2%);background-size:58px 58px}
.kinetic-atlas .kinetic-surface canvas{height:380px;cursor:grab;touch-action:pan-y pinch-zoom;position:relative;z-index:1}
.kinetic-atlas .kinetic-surface canvas:active{cursor:grabbing}
.kinetic-atlas .kinetic-surface canvas:focus-visible{outline:3px solid #93c7ff;outline-offset:-4px}
.kinetic-atlas .surface-caption{z-index:2;bottom:16px;left:20px;color:#b8d1ff;font-size:10px;letter-spacing:.11em}
.atlas-topline{position:absolute;z-index:2;top:17px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;pointer-events:none;color:#bdd6ff;font:10px/1.4 var(--mono);letter-spacing:.08em}
.atlas-topline span:last-child{color:#79b6ff}
.atlas-points{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:23px 0 6px}
.atlas-points button{display:flex;align-items:center;gap:10px;min-height:46px;padding:9px 13px;border:1px solid #c9d7ef;border-radius:3px;background:#f9fbff;text-align:left;font-size:13px;line-height:1.3;transition:background .2s,border-color .2s,transform .2s}
.atlas-points button:hover{transform:translateY(-2px);background:#e7efff;color:var(--ink)}
.atlas-points button[aria-pressed="true"]{background:#dce9ff;border-color:#7197df;color:#153d91}
.atlas-points button span{font:11px var(--mono);color:#4673ca}
.kinetic-atlas .atlas-detail{border-left:2px solid #acc5f3;padding-left:16px;min-height:104px;margin-top:18px}
.kinetic-atlas .atlas-detail .eyebrow{font-size:10px;color:#5274ad}
.kinetic-atlas .atlas-detail h4{font-size:21px;margin:4px 0 4px;line-height:1.2}
.kinetic-atlas .atlas-detail p{font-size:14px;line-height:1.5;color:var(--muted);margin:0}
.kinetic-atlas .kinetic-controls{margin-top:18px}
.kinetic-atlas .kinetic-copy .kinetic-status{margin-top:3px;min-height:20px}
@media(max-width:1000px){.kinetic-atlas{grid-template-columns:1fr 1.05fr;gap:22px}.kinetic-atlas .kinetic-surface canvas{height:350px}}
@media(max-width:720px){.kinetic-atlas{grid-template-columns:1fr;gap:20px;padding:29px 0 34px}.kinetic-atlas .kinetic-copy h3{font-size:33px}.kinetic-atlas .kinetic-surface{grid-row:2}.kinetic-atlas .kinetic-surface canvas{height:320px}.atlas-points{margin-top:16px}.kinetic-atlas .atlas-detail{min-height:0}.kinetic-atlas .surface-caption{bottom:13px;left:13px;font-size:9px}.atlas-topline{top:13px;left:13px;right:13px;font-size:9px}}
@media(max-width:390px){.kinetic-atlas .kinetic-surface canvas{height:295px}.atlas-points button{font-size:12px;padding:8px 10px}}
@media(prefers-reduced-motion:reduce){.atlas-points button{transition:none}}
@media print{.kinetic-atlas .kinetic-surface{display:none}.kinetic-atlas{display:block}.atlas-points,.kinetic-atlas .kinetic-controls{display:none}}