/* seismic triangle */
.tri-wrap{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1.12/1;touch-action:pan-y}
.tri{position:absolute;inset:0;clip-path:polygon(50% 0,100% 100%,0 100%);background:#061226}
.tri canvas{width:100%;height:100%;display:block}
.tri::after{content:"";position:absolute;top:0;bottom:0;width:3px;left:0;background:#E8B54A;opacity:0;box-shadow:0 0 22px 6px rgba(232,181,74,.55);animation:scan 2.6s .5s ease-in-out 1 both}
@keyframes scan{0%{left:0;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:100%;opacity:0}}
.tri-wrap svg.edge{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.well{position:absolute;top:0;bottom:0;width:0;border-left:1px dashed rgba(255,255,255,.75);pointer-events:none;opacity:0}
.well.on{opacity:1}
.read{position:absolute;pointer-events:none;opacity:0;font:500 .72rem/1.3 var(--f-mono);background:#050F1F;color:#EAF0F8;border:1px solid #E8B54A;padding:6px 9px;border-radius:3px;white-space:nowrap;transform:translate(12px,-50%)}
.read.on{opacity:1}
.read.flip{transform:translate(calc(-100% - 12px),-50%)}
.cap{margin:14px 0 0;text-align:center;font:500 .72rem/1 var(--f-mono);color:var(--muted);letter-spacing:.06em}