.sonar-reconstruction-showcase{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);width:100%;color:#effffd}.sonar-reconstruction-view{position:relative;min-width:0;min-height:clamp(430px,46vw,650px);overflow:hidden;background:radial-gradient(circle at 68% 34%,rgba(31,104,109,.14),transparent 38%),linear-gradient(145deg,#05090a,#020506 58%,#000);border:1px solid rgba(125,232,221,.2);border-radius:22px;box-shadow:inset 0 0 70px #0a4a4e1f;isolation:isolate}.sonar-reconstruction-view:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background-image:linear-gradient(rgba(91,199,195,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(91,199,195,.035) 1px,transparent 1px);background-size:38px 38px;-webkit-mask-image:linear-gradient(to bottom,black,transparent 88%);mask-image:linear-gradient(to bottom,black,transparent 88%)}.sonar-reconstruction-view__canvas{position:absolute;inset:0;z-index:1;touch-action:none}.sonar-reconstruction-view--terrain .sonar-reconstruction-view__canvas{cursor:grab}.sonar-reconstruction-view--terrain .sonar-reconstruction-view__canvas:active{cursor:grabbing}.sonar-reconstruction-view__canvas canvas{display:block;width:100%;height:100%}.sonar-reconstruction-view__header,.sonar-reconstruction-view__footer{position:absolute;left:clamp(17px,2.5vw,30px);right:clamp(17px,2.5vw,30px);z-index:4;pointer-events:none}.sonar-reconstruction-view__header{top:clamp(18px,2.5vw,28px);display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.sonar-reconstruction-view__header>div{display:grid;gap:5px}.sonar-reconstruction-view__header span{color:#75d8d1;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:clamp(.58rem,1vw,.7rem);font-weight:800;letter-spacing:.12em}.sonar-reconstruction-view__header strong{font-size:clamp(.95rem,1.7vw,1.22rem);letter-spacing:-.02em}.sonar-reconstruction-view__header b{color:#e0fffab3;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;font-size:.72rem}.sonar-reconstruction-view__footer{bottom:clamp(17px,2.5vw,27px);display:grid;gap:10px;color:#defffa94;font-size:clamp(.67rem,1vw,.78rem)}.sonar-reconstruction-view__footer>div:last-child{display:flex;align-items:center;justify-content:space-between;gap:14px}.sonar-reconstruction-view__footer--terrain{display:block}.sonar-reconstruction-view__meter{height:2px;overflow:hidden;background:#b7f1ea24}.sonar-reconstruction-view__meter span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#29b5b6,#8af5d8,#d8b76b);box-shadow:0 0 16px #56e1cfb3;transform-origin:left;transition:transform 90ms linear}.sonar-reconstruction-view__footer button{position:relative;z-index:5;padding:7px 12px;color:#eafffb;background:#0f4244ad;border:1px solid rgba(122,230,218,.32);border-radius:999px;cursor:pointer;pointer-events:auto}.sonar-reconstruction-view__footer button:hover{background:#186868c2}.sonar-reconstruction-view__footer button:focus-visible{outline:2px solid #9af5df;outline-offset:3px}.sonar-reconstruction-view__footer button:disabled{cursor:not-allowed;opacity:.45}.sonar-reconstruction-showcase__fallback{position:absolute;inset:0;z-index:8;display:grid;place-items:center;color:#eefffcb3;background:#030708;border-radius:22px}@media(max-width:900px){.sonar-reconstruction-showcase{grid-template-columns:1fr}.sonar-reconstruction-view{min-height:min(76vw,590px)}}@media(max-width:560px){.sonar-reconstruction-view{min-height:440px;border-radius:18px}}@media(prefers-reduced-motion:reduce){.sonar-reconstruction-view__meter span{transition:none}}