/* EOS 전략 지도 — 디비전 2 SHD 화면 문법 + 홀로그램 전술 디스플레이 */
:root {
  --bg: #04070a;
  --bg2: #070d12;
  --panel: rgba(6, 14, 18, .78);
  --panel-solid: #08121a;
  --line: rgba(79, 209, 197, .22);
  --line2: rgba(79, 209, 197, .45);
  --holo: #4fd1c5;
  --holo-hi: #8ff5ea;
  --holo-dim: #23615d;
  --orange: #f28c28;
  --orange-hi: #ffb15e;
  --red: #ff4b3e;
  --white: #e9f6f4;
  --text: #cfe6e3;
  --muted: #6b8f8c;
  --gray: #6b7680;
  --amber: #e6b84a;
  --kr: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  --cond: var(--kr);
  --mono: var(--kr);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: var(--kr); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--orange); outline-offset: 2px; }
.map g:focus, .map circle:focus { outline: none; }
.map g:focus-visible .hex, .map g:focus-visible .ring { stroke: var(--white); stroke-width: 2; }

.app { position: relative; height: 100%; display: grid; grid-template-rows: auto 1fr auto; background:
  radial-gradient(120% 90% at 50% 40%, #0a161c 0%, var(--bg) 70%); }
.app::after { /* 주사선 */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 20;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
}

/* ---------------- 상단 */
.top { display: flex; align-items: center; gap: 18px; padding: 10px 16px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, rgba(8,18,24,.95), rgba(4,8,11,.9)); position: relative; z-index: 5; }
.top::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 120px; height: 2px; background: var(--orange); }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-hex { width: 26px; height: 26px; fill: none; stroke: var(--orange); stroke-width: 1.6; flex: none; }
.brand-hex circle { fill: var(--orange); stroke: none; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-1 { font-family: var(--cond); font-weight: 700; font-size: 19px; letter-spacing: 0.08em; color: var(--white); }
.brand-2 { font-family: var(--cond); font-size: 11px; letter-spacing: 0.12em; color: var(--muted); margin-top: 3px; white-space: nowrap; }
.tabs { display: flex; gap: 4px; margin-left: 8px; }
.tab { position: relative; display: flex; align-items: baseline; gap: 7px; padding: 8px 14px 8px 12px; font-size: 14px; font-weight: 600; color: var(--muted); border: 1px solid transparent; transition: color .15s, background .15s; }
.tab-n { font-family: var(--cond); font-size: 12px; letter-spacing: 0.06em; color: var(--holo-dim); }
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { color: var(--white); background: rgba(242,140,40,.08); border-color: rgba(242,140,40,.35); }
.tab[aria-selected="true"] .tab-n { color: var(--orange); }
.tab[aria-selected="true"]::before { content: ""; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px; background: var(--orange); }
.top-right { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.tplus { font-family: var(--cond); font-weight: 600; letter-spacing: 0.08em; font-size: 15px; color: var(--orange); }
.full { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); }
.full svg { width: 16px; height: 16px; fill: none; stroke: var(--holo); stroke-width: 1.6; }
.full:hover { border-color: var(--holo); }
.embedded .full { display: grid; }
body:not(.embedded) .full { display: none; }

/* ---------------- 지도 */
.stage { position: relative; overflow: hidden; min-height: 0; }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; user-select: none; }
.map.dragging { cursor: grabbing; }
.brackets i { position: absolute; width: 22px; height: 22px; border: 0 solid var(--line2); pointer-events: none; z-index: 2; }
.brackets i:nth-child(1) { left: 8px; top: 8px; border-left-width: 1px; border-top-width: 1px; }
.brackets i:nth-child(2) { right: 8px; top: 8px; border-right-width: 1px; border-top-width: 1px; }
.brackets i:nth-child(3) { left: 8px; bottom: 8px; border-left-width: 1px; border-bottom-width: 1px; }
.brackets i:nth-child(4) { right: 8px; bottom: 8px; border-right-width: 1px; border-bottom-width: 1px; }

/* SVG 공통 */
.map text { font-family: var(--cond); fill: var(--text); }
.map .kr { font-family: var(--kr); }
.ns { vector-effect: non-scaling-stroke; }
.grat { stroke: rgba(79,209,197,.07); stroke-width: 1; fill: none; }
.grat-major { stroke: rgba(79,209,197,.13); }
.dots { fill: rgba(79,209,197,.42); }
.land-o { fill: none; stroke: rgba(79,209,197,.5); stroke-width: .8; }
.jp-o { fill: rgba(79,209,197,.05); stroke: var(--holo); stroke-width: 1; }
.region { fill: rgba(242,140,40,.06); stroke: var(--orange); stroke-width: 1; stroke-dasharray: 3 4; }
.route { fill: none; stroke-width: 1.4; }
.route.deploy { stroke: var(--orange); stroke-dasharray: 8 6; animation: flow 1.6s linear infinite; }
.route.obs { stroke: var(--holo); stroke-dasharray: 2 5; }
.route.link { stroke: var(--holo-dim); stroke-dasharray: 2 4; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.route-l { font-size: 11px; letter-spacing: 0.04em; fill: var(--orange-hi); }

/* 표지(화면 크기 고정) */
.mk { cursor: pointer; }
.mk .hit { fill: transparent; }
.mk .hex { fill: rgba(6,14,18,.85); stroke: var(--holo); stroke-width: 1.4; }
.mk .core { fill: var(--holo); }
.mk.stall .hex { stroke: var(--orange); }
.mk.stall .core { fill: var(--orange); }
.mk .pulse { fill: none; stroke: var(--orange); stroke-width: 1.2; transform-origin: 0 0; animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }
.mk .lab1 { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; fill: var(--white); font-family: var(--kr); paint-order: stroke; stroke: rgba(4,7,10,.9); stroke-width: 3px; }
.mk .lab2 { font-size: 10.5px; letter-spacing: 0.09em; fill: var(--muted); paint-order: stroke; stroke: rgba(4,7,10,.9); stroke-width: 3px; }
.mk.stall .lab2 { fill: var(--orange); }
.mk .tick { stroke: var(--line2); stroke-width: 1; }
.mk:hover .hex, .mk.sel .hex { stroke-width: 2; filter: drop-shadow(0 0 6px currentColor); }
.mk.sel .hex { stroke: var(--white); }
.dim { opacity: .28; transition: opacity .3s; }
.mk, .route, .region { transition: opacity .3s; }

/* 아케보노 지형 */
.sea-grid { stroke: rgba(79,209,197,.06); stroke-width: 1; }
.kmgrid { stroke: rgba(79,209,197,.09); stroke-width: 1; fill: none; }
.kmlab { font-size: 10px; fill: rgba(111,160,156,.75); letter-spacing: 0.06em; }
.landf { fill: url(#landDots); }
.coast { fill: none; stroke: var(--holo); stroke-width: 1.6; filter: drop-shadow(0 0 3px rgba(79,209,197,.7)); }
.coast2 { fill: none; stroke: rgba(79,209,197,.25); stroke-width: 6; }
.town { fill: url(#hatch); stroke: rgba(79,209,197,.45); stroke-width: 1; }
.contour { fill: none; stroke: rgba(79,209,197,.45); stroke-width: 1; }
.contour.c2 { stroke: rgba(79,209,197,.6); }
.contour.c3 { stroke: var(--holo); stroke-dasharray: none; }
.road { fill: none; stroke: rgba(207,230,227,.32); stroke-width: 1; }
.road.major { stroke: rgba(207,230,227,.55); stroke-width: 1.6; }
.rail { fill: none; stroke: var(--holo-hi); stroke-width: 1.2; }
.rail-t { fill: none; stroke: var(--holo-hi); stroke-width: 6; stroke-dasharray: 1 6; opacity: .55; }
.street { fill: none; stroke: var(--orange-hi); stroke-width: 2; stroke-dasharray: 2 3; opacity: .8; }
.brk { fill: none; stroke: var(--holo); stroke-width: 1.8; }
.zone-f { fill: rgba(242,140,40,.035); }
.zone { fill: none; stroke: var(--orange); stroke-width: 1.8; filter: drop-shadow(0 0 4px rgba(242,140,40,.6)); }
.zone-l { font-size: 11px; letter-spacing: 0.11em; fill: var(--orange); }
.block { fill: none; stroke: var(--red); stroke-width: 1.2; stroke-dasharray: 10 4 2 4; }
.block-t { fill: none; stroke: var(--red); stroke-width: 7; stroke-dasharray: 1.5 22; opacity: .6; }
.block-l { font-size: 11px; letter-spacing: 0.11em; fill: var(--red); }
.core-band { fill: none; stroke: url(#coreHatch); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; opacity: .95; }
.core-edge { fill: none; stroke: rgba(242,140,40,.55); stroke-width: 1; stroke-dasharray: 2 4; }
.stall19 { fill: rgba(79,209,197,.06); stroke: var(--holo-hi); stroke-width: 1; stroke-dasharray: 4 3; }
.dawn { stroke: var(--orange); stroke-width: 2.5; filter: drop-shadow(0 0 6px rgba(242,140,40,.9)); }
.dawn-glow { fill: url(#dawnGrad); }
.trail { fill: none; stroke: var(--orange); stroke-width: 1.4; stroke-dasharray: 3 4; opacity: .85; }
.sight { fill: none; stroke: rgba(207,230,227,.6); stroke-width: 1.2; stroke-dasharray: 1 4; marker-end: url(#arrowW); }
.rain { fill: url(#rain); }
.stars { fill: rgba(233,246,244,.75); }
.area-l { font-size: 12px; letter-spacing: 0.04em; fill: rgba(207,230,227,.62); font-family: var(--kr); paint-order: stroke; stroke: rgba(4,7,10,.85); stroke-width: 3px; }
.area-l.en { font-family: var(--cond); letter-spacing: 0.11em; font-size: 10.5px; }

/* 신호 표지 */
.sg .ring { fill: none; stroke-width: 1.3; }
.sg.tta .ring { stroke: var(--orange); }
.sg.tta .dia { fill: var(--orange); }
.sg.crew .ring { stroke: var(--holo); }
.sg.crew .dia { fill: var(--holo); }
.sg.deneb .ring { stroke: var(--white); }
.sg.deneb .dia { fill: var(--white); }
.sg.lost .ring { stroke: var(--gray); stroke-dasharray: 2 2; }
.sg.lost .dia { fill: none; stroke: var(--gray); stroke-width: 1.3; }
.sg .lab1 { font-family: var(--cond); font-size: 13px; font-weight: 700; letter-spacing: 0.07em; fill: var(--white); paint-order: stroke; stroke: rgba(4,7,10,.9); stroke-width: 3px; }
.sg.tta .lab1 { fill: var(--orange-hi); font-family: var(--kr); letter-spacing: 0; font-size: 12.5px; }
.sg.lost .lab1 { fill: var(--gray); }
.sg .lab2 { font-family: var(--kr); font-size: 10.5px; fill: var(--muted); paint-order: stroke; stroke: rgba(4,7,10,.9); stroke-width: 3px; }
.sg.tta .pulse { fill: none; stroke: var(--orange); stroke-width: 1; animation: pulse 2s ease-out infinite; }
.cp rect { fill: rgba(4,7,10,.9); stroke: var(--red); stroke-width: 1.2; }
.cp text { font-size: 10.5px; letter-spacing: 0.08em; fill: var(--red); font-weight: 600; }
.st circle { fill: var(--bg); stroke: var(--holo-hi); stroke-width: 1.4; }
.st text { font-family: var(--kr); font-size: 11px; fill: var(--holo-hi); paint-order: stroke; stroke: rgba(4,7,10,.9); stroke-width: 3px; }
.mk.hq .hex { stroke: var(--holo); }
.mk.landmark .hex { stroke: rgba(207,230,227,.75); }
.mk.landmark .core { fill: rgba(207,230,227,.85); }

/* ---------------- 떠 있는 모듈 */
.mod { position: absolute; z-index: 4; background: var(--panel); border: 1px solid var(--line); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.mod::before { content: ""; position: absolute; left: -1px; top: -1px; width: 14px; height: 14px; border-left: 2px solid var(--orange); border-top: 2px solid var(--orange); }
.mod-h { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px 7px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; }
.mod-h span { font-family: var(--cond); font-size: 11px; letter-spacing: 0.13em; color: var(--muted); }
.mod-h b { font-size: 12.5px; font-weight: 600; color: var(--text); }
.lbl { font-size: 11.5px; color: var(--muted); font-weight: 500; }

.status { left: 16px; top: 16px; width: 228px; }
.count { display: flex; align-items: flex-end; gap: 12px; padding: 10px 12px 6px; }
.count-l { display: flex; flex-direction: column; }
.count-n { font-family: var(--cond); font-weight: 700; font-size: 44px; font-variant-numeric: tabular-nums; letter-spacing: -.02em; line-height: .9; color: var(--orange); text-shadow: 0 0 18px rgba(242,140,40,.35); }
.segs { flex: 1; display: grid; grid-template-columns: repeat(17, 1fr); gap: 2px; padding-bottom: 6px; }
.segs i { height: 7px; background: rgba(242,140,40,.85); }
.segs i.off { background: rgba(107,143,140,.18); }
.row-kv { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid rgba(79,209,197,.1); }
.pips { display: flex; gap: 3px; flex: 1; }
.pips i { flex: 1; height: 8px; border: 1px solid rgba(79,209,197,.25); }
.pips i.on { background: var(--red); border-color: var(--red); box-shadow: 0 0 8px rgba(255,75,62,.6); }
.kv-v { font-family: var(--cond); font-size: 18px; font-weight: 700; color: var(--red); width: 14px; text-align: right; }
.wave { display: block; width: 100%; height: 34px; border-top: 1px solid rgba(79,209,197,.1); }
.asof { padding: 7px 12px 9px; font-size: 11.5px; line-height: 1.5; color: var(--muted); border-top: 1px solid rgba(79,209,197,.1); }

.layers { left: 16px; bottom: 16px; width: 228px; }
.mod-toggle { cursor: pointer; }
.chev { margin-left: auto; width: 8px; height: 8px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted); transform: rotate(45deg) translate(-2px,-2px); transition: transform .2s; }
.layers.closed .chev { transform: rotate(-45deg); }
.layers.closed .layer-list { display: none; }
.layers.closed .mod-h { border-bottom: 0; }
.layer-list { padding: 6px 6px 8px; display: grid; gap: 1px; }
.lay { display: flex; align-items: center; gap: 9px; padding: 6px 7px; font-size: 12.5px; text-align: left; color: var(--text); }
.lay:hover { background: rgba(79,209,197,.06); }
.lay .sw { width: 18px; height: 10px; flex: none; position: relative; }
.lay .sw::after { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 0; border-top: 2px solid var(--c, var(--holo)); }
.lay .sw.dash::after { border-top-style: dashed; }
.lay .sw.fill::after { top: 0; height: 10px; border: 1px solid var(--c); background: color-mix(in srgb, var(--c) 25%, transparent); }
.lay .sw.dot::after { left: 5px; right: auto; top: 1px; width: 8px; height: 8px; border: 1.5px solid var(--c); transform: rotate(45deg); }
.lay .box { margin-left: auto; width: 12px; height: 12px; border: 1px solid var(--line2); position: relative; }
.lay[aria-pressed="true"] .box { border-color: var(--orange); }
.lay[aria-pressed="true"] .box::after { content: ""; position: absolute; inset: 2px; background: var(--orange); }
.lay[aria-pressed="false"] { color: var(--muted); }

.info { right: 16px; top: 16px; width: 300px; max-height: calc(100% - 32px); overflow: auto; padding: 0; display: none; }
.info.open { display: block; animation: slidein .22s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateX(10px); } }
.info-x { position: absolute; right: 6px; top: 4px; width: 26px; height: 26px; font-size: 18px; color: var(--muted); z-index: 2; }
.info-x:hover { color: var(--white); }
.i-code { font-family: var(--cond); font-size: 11.5px; letter-spacing: 0.12em; color: var(--orange); padding: 12px 40px 0 14px; }
.i-code.holo { color: var(--holo); }
.i-code.gray { color: var(--gray); }
.i-name { font-size: 19px; font-weight: 700; color: var(--white); padding: 4px 14px 0; letter-spacing: -.01em; }
.i-sub { font-size: 12.5px; color: var(--muted); padding: 3px 14px 10px; border-bottom: 1px solid var(--line); }
.i-body { padding: 10px 14px 4px; }
.i-body p { margin: 0 0 9px; font-size: 13.5px; line-height: 1.65; color: var(--text); word-break: keep-all; }
.i-links { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 14px; }
.i-links a { text-decoration: none; font-size: 12px; padding: 6px 9px; border: 1px solid var(--line2); color: var(--holo-hi); }
.i-links a::after { content: " ↗"; color: var(--muted); }
.i-links a:hover { border-color: var(--holo); background: rgba(79,209,197,.08); }
.i-enter { margin: 0 14px 14px; width: calc(100% - 28px); padding: 10px 12px; background: var(--orange); color: #120a02; font-weight: 700; font-size: 13.5px; display: flex; justify-content: space-between; align-items: center; }
.i-enter:hover { background: var(--orange-hi); }
.i-enter span { font-family: var(--cond); letter-spacing: 0.1em; font-size: 12px; }
.roster { padding: 2px 14px 12px; display: grid; gap: 0; }
.roster div { display: grid; grid-template-columns: 10px 76px 1fr; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(79,209,197,.08); font-size: 12.5px; }
.roster b { font-family: var(--cond); letter-spacing: 0.07em; font-size: 13.5px; font-weight: 600; color: var(--white); }
.roster i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--holo); }
.roster .lost i { background: none; border: 1px solid var(--gray); }
.roster .lost b, .roster .lost span { color: var(--gray); }
.roster .warn i { background: var(--amber); }
.roster .new i { background: var(--white); }
.roster span { color: var(--muted); }
.note { margin: 0 14px 14px; padding: 8px 10px; font-size: 11.5px; color: var(--muted); border-left: 2px solid var(--holo-dim); background: rgba(79,209,197,.04); line-height: 1.55; }

.zoom { position: absolute; right: 16px; bottom: 16px; z-index: 4; display: grid; gap: 4px; }
.zoom button { width: 32px; height: 32px; background: var(--panel); border: 1px solid var(--line); font-size: 18px; color: var(--holo-hi); display: grid; place-items: center; }
.zoom button:hover { border-color: var(--holo); }
.zoom svg { width: 16px; height: 16px; fill: none; stroke: var(--holo-hi); stroke-width: 1.5; }
.readout { position: absolute; right: 58px; bottom: 18px; z-index: 3; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--muted); letter-spacing: 0.03em; text-align: right; pointer-events: none; }
.scale { position: absolute; right: 58px; bottom: 36px; z-index: 3; display: flex; align-items: center; gap: 8px; pointer-events: none; }
.scale-bar { height: 6px; border: 1px solid var(--holo); border-top: 0; }
.scale-t { font-family: var(--cond); letter-spacing: 0.08em; font-size: 11px; color: var(--holo); }

/* ---------------- 하단 */
.bottom { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); background: linear-gradient(0deg, rgba(8,18,24,.96), rgba(5,10,14,.92)); position: relative; z-index: 5; }
.track { display: flex; gap: 0; overflow-x: auto; scrollbar-width: none; padding: 0 8px; border-bottom: 1px solid rgba(79,209,197,.1); }
.track::-webkit-scrollbar { display: none; }
.tk { position: relative; flex: none; padding: 12px 14px 10px; text-align: left; color: var(--muted); min-width: 92px; }
.tk::before { content: ""; position: absolute; left: 14px; right: 0; top: 0; height: 2px; background: rgba(79,209,197,.14); }
.tk::after { content: ""; position: absolute; left: 10px; top: -4px; width: 8px; height: 8px; transform: rotate(45deg); background: var(--bg); border: 1px solid var(--holo-dim); }
.tk .tk-a { display: block; font-family: var(--cond); font-weight: 600; font-size: 15px; letter-spacing: 0.04em; color: inherit; }
.tk .tk-b { display: block; font-size: 11.5px; margin-top: 2px; white-space: nowrap; }
.tk:hover { color: var(--text); }
.tk[aria-selected="true"] { color: var(--white); }
.tk[aria-selected="true"]::before { background: var(--orange); }
.tk[aria-selected="true"]::after { background: var(--orange); border-color: var(--orange); box-shadow: 0 0 10px rgba(242,140,40,.7); }
.tk[aria-selected="true"] .tk-a { color: var(--orange); }
.log { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; padding: 10px 18px 12px; align-items: baseline; min-height: 74px; }
.log-h { font-family: var(--cond); letter-spacing: 0.1em; font-size: 12px; color: var(--orange); white-space: nowrap; }
.log-t { font-size: 14px; font-weight: 700; color: var(--white); }
.log ul { grid-column: 2; margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.log li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.55; color: var(--text); word-break: keep-all; }
.log li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 1px; background: var(--holo); }
.log p { grid-column: 2; margin: 0; font-size: 13px; line-height: 1.6; color: var(--text); word-break: keep-all; }
.log .cnt { grid-column: 1; font-family: var(--cond); font-size: 12px; letter-spacing: 0.08em; color: var(--muted); }
.log .cnt b { color: var(--orange); font-weight: 600; font-size: 15px; display: block; letter-spacing: 0.02em; }

/* ---------------- 좁은 화면 */
@media (max-width: 1100px) {
  .brand-2 { display: none; }
  .status { width: 190px; }
  .count-n { font-size: 38px; }
  .segs { grid-template-columns: repeat(12, 1fr); }
  .info { width: 270px; }
}
@media (max-width: 640px) {
  .top { gap: 10px; padding: 8px 10px; }
  .brand-text { display: none; }
  .tabs { margin-left: 0; }
  .tab { padding: 7px 10px; font-size: 13px; }
  .tab-n { display: none; }
  .status { left: 10px; top: 10px; width: auto; display: flex; align-items: center; }
  .status .mod-h, .status .wave, .status .asof, .status .segs { display: none; }
  .count { padding: 6px 10px; }
  .count-n { font-size: 28px; }
  .row-kv { border-top: 0; border-left: 1px solid rgba(79,209,197,.1); }
  .pips { width: 54px; }
  .layers { left: 10px; bottom: 10px; width: 200px; }
  .info { left: 0; right: 0; top: auto; bottom: 0; width: auto; max-height: 62%; border-left: 0; border-right: 0; }
  .zoom { right: 10px; bottom: 10px; }
  .readout { display: none; }
  .scale { right: 52px; bottom: 14px; }
  .log { padding: 8px 12px 10px; min-height: 0; }
  .log li, .log p { font-size: 12.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .route.deploy, .mk .pulse, .sg.tta .pulse { animation: none; }
}