:root{
  --deck:#0F1828; --panel:#132036; --raise:#18283F; --line:#22344F; --line2:#2C4262;
  --text:#E8EEF6; --muted:#8FA3BD; --dim:#5D7290;
  --cyan:#3FD5F0; --magenta:#E255F2; --green:#5FE07F; --amber:#FFB52E; --red:#FF5D5D; --white:#F4F7FB;
  --c-light:#3FD5F0; --c-mid:#F4F7FB; --c-heavy:#E255F2; --c-ulr:#A88BFF; --c-tp:#FFB52E; --c-heli:#5FE07F;
  --cond:"Barlow Condensed",system-ui,sans-serif; --sans:"Barlow",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--deck);color:var(--text);font:14px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
h2{font:500 13px/1.2 var(--sans);color:var(--muted);margin:0 0 8px;letter-spacing:.01em}
.gate{position:fixed;inset:0;display:grid;place-items:center;text-align:center;color:var(--muted)}
.gate strong{font:600 28px var(--cond);color:var(--text);letter-spacing:.02em}
.app{display:grid;height:100vh;gap:1px;background:var(--line);
  grid-template-columns:250px minmax(0,1fr) 380px;
  grid-template-rows:52px minmax(0,1fr) 112px 150px 34px;
  grid-template-areas:"top top top" "left map right" "strip strip strip" "tape tape stream" "tick tick tick"}
.app>*{background:var(--deck);min-width:0;min-height:0}
.top{grid-area:top;display:flex;align-items:center;gap:22px;padding:0 16px;background:var(--panel)}
.brand{display:flex;align-items:center;gap:10px}
.mark{width:18px;height:18px;border:2px solid var(--cyan);border-radius:50%;position:relative}
.mark::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:2px;background:var(--cyan);transform-origin:0 50%;animation:spin 2.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.name{font:600 21px var(--cond);letter-spacing:.03em}
.mode{font:500 12px var(--sans);color:var(--amber)}
.clocks{display:flex;gap:16px}
.clocks span{display:flex;flex-direction:column;line-height:1.05}
.clocks em{font:normal 11px var(--sans);color:var(--dim)}
.clocks b{font:500 19px var(--cond);font-variant-numeric:tabular-nums}
.chips{display:flex;gap:6px;flex:1;flex-wrap:wrap;justify-content:flex-end}
.chip{display:flex;align-items:baseline;gap:6px;padding:3px 9px;border:1px solid var(--line2);border-radius:3px;font-size:12px;color:var(--muted);white-space:nowrap}
.chip b{font:600 14px var(--cond);color:var(--text);font-variant-numeric:tabular-nums}
.chip.ok{border-color:#2E5A44}.chip.ok b{color:var(--green)}
.chip.warn{border-color:#6A5222}.chip.warn b{color:var(--amber)}
.chip.bad{border-color:#6A2C2C}.chip.bad b{color:var(--red)}
.conn{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.conn i{width:9px;height:9px;border-radius:50%;background:var(--dim)}
.conn.live i{background:var(--green);box-shadow:0 0 0 0 rgba(95,224,127,.6);animation:beat 1.6s infinite}
.conn.down i{background:var(--red)}
@keyframes beat{70%{box-shadow:0 0 0 7px rgba(95,224,127,0)}100%{box-shadow:0 0 0 0 rgba(95,224,127,0)}}

.left{grid-area:left;display:flex;flex-direction:column;padding:14px 14px 10px;gap:16px;overflow:hidden}
.readouts{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.ro{border-left:2px solid var(--line2);padding:2px 0 2px 9px}
.ro .v{font:600 30px/1 var(--cond);font-variant-numeric:tabular-nums}
.ro .l{font-size:12px;color:var(--muted);margin-top:3px}
.ro canvas{display:block;width:100%;height:18px;margin-top:4px}
.ro.cy{border-color:var(--cyan)}.ro.gr{border-color:var(--green)}.ro.am{border-color:var(--amber)}.ro.mg{border-color:var(--magenta)}
.ladder{flex:1;min-height:0;overflow:hidden}
.ladder ol{list-style:none;margin:0;padding:0}
.ladder li{display:grid;grid-template-columns:1fr auto 34px;gap:6px;align-items:center;padding:3px 0;font-size:13px;position:relative}
.ladder li .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--cyan);opacity:.55;transition:width .6s ease}
.ladder li .n{font:600 15px var(--cond);font-variant-numeric:tabular-nums}
.ladder li .d{font:500 12px var(--cond);text-align:right}
.d.up{color:var(--green)}.d.dn{color:var(--amber)}.d.eq{color:var(--dim)}
.ladder li.hot{color:var(--white)}

.mapwrap{grid-area:map;position:relative;overflow:hidden}
.mapwrap canvas{position:absolute;inset:0;width:100%;height:100%}
.legend{position:absolute;left:12px;bottom:10px;display:flex;gap:12px;font-size:12px;color:var(--muted);background:rgba(15,24,40,.72);padding:5px 9px;border-radius:3px}
.legend span{display:flex;align-items:center;gap:5px}
.legend i{width:8px;height:8px;border-radius:50%}
.mapwrap #mapLive{cursor:grab;outline:none}
.mapwrap #mapLive:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px}
.mapctl{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:1px;background:var(--line2);border-radius:3px;overflow:hidden;z-index:4}
.mapctl button,.mapstyle button,.follow button{font:600 15px var(--cond);color:var(--text);background:rgba(19,32,54,.92);border:0;padding:0;cursor:pointer}
.mapctl button{width:40px;height:32px}
.mapctl #zWorld{font-size:12px;font-weight:500}
.mapctl button:hover,.mapstyle button:hover,.follow button:hover{background:var(--raise);color:var(--white)}
.mapstyle{position:absolute;left:12px;top:12px;display:flex;gap:1px;background:var(--line2);border-radius:3px;overflow:hidden;z-index:4}
.mapstyle button{font:500 13px var(--sans);padding:6px 11px;color:var(--muted)}
.mapstyle button[aria-pressed="true"]{color:var(--deck);background:var(--cyan)}
.mapfoot{position:absolute;right:12px;bottom:10px;display:flex;flex-direction:column;align-items:flex-end;gap:3px;pointer-events:none}
.scalebar{display:flex;align-items:center;gap:6px;font:500 12px var(--cond);color:var(--text);background:rgba(15,24,40,.72);padding:3px 7px;border-radius:3px}
.scalebar i{display:block;height:5px;border:1.5px solid var(--text);border-top:0}
.attrib{font-size:10.5px;color:var(--muted);background:rgba(15,24,40,.6);padding:1px 6px;border-radius:2px}
.follow{position:absolute;right:64px;top:12px;width:230px;background:rgba(19,32,54,.95);border:1px solid var(--line2);border-left:3px solid var(--white);border-radius:3px;padding:10px 12px;z-index:4}
.follow b{font:600 20px/1.1 var(--cond);display:block}
.follow .c{font-size:12.5px}
.follow dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:8px 0;font-size:12.5px}
.follow dt{color:var(--muted)}.follow dd{margin:0;font:500 14px var(--cond);text-align:right;font-variant-numeric:tabular-nums}
.follow p{color:var(--muted);font-size:12.5px;margin:6px 0}
.follow button{width:100%;font-size:14px;padding:6px 0;border:1px solid var(--line2);border-radius:2px}
.tip{position:absolute;pointer-events:none;background:var(--raise);border:1px solid var(--line2);padding:7px 10px;border-radius:3px;font-size:12.5px;min-width:170px;z-index:5}
.tip b{font:600 16px var(--cond);display:block}
.tip span{color:var(--muted)}

.right{grid-area:right;display:flex;flex-direction:column;padding:14px 14px 10px;gap:14px;overflow:hidden}
.board{flex:1.4;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.boardhead,.board li{display:grid;grid-template-columns:46px 16px minmax(0,1fr);gap:8px;align-items:start}
.boardhead{font-size:11px;color:var(--dim);padding:0 0 4px;border-bottom:1px solid var(--line)}
.board ul{list-style:none;margin:0;padding:0;overflow:hidden}
.board li{padding:5px 0;border-bottom:1px solid rgba(34,52,79,.6);font:500 15px/1.15 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.board li .t{font-variant-numeric:tabular-nums;color:var(--muted)}
.board li .g{font-size:13px}
.board li.to .g{color:var(--green)}.board li.ld .g{color:var(--amber)}
.board li .r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.board li .r em{display:block;font:400 12.5px/1.3 var(--sans);text-transform:none;letter-spacing:0;color:var(--muted);font-style:normal;overflow:hidden;text-overflow:ellipsis}
.board li .r small{color:var(--amber);font-size:12px}

.flap{display:inline-block;animation:flap .5s steps(4) both}
@keyframes flap{0%{transform:rotateX(90deg);color:var(--dim)}60%{transform:rotateX(-20deg)}100%{transform:none}}
.legs{flex:1;min-height:0;overflow:hidden}
.legs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.leg{border-left:2px solid var(--cyan);padding:4px 0 4px 10px;animation:drop .7s cubic-bezier(.2,.9,.3,1.2) both}
@keyframes drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
.leg .rt{font:600 17px/1.15 var(--cond)}
.leg .meta{display:flex;justify-content:space-between;color:var(--muted);font-size:12.5px;margin-top:2px}
.leg .conf{height:3px;background:var(--line);margin-top:5px}.leg .conf i{display:block;height:100%;background:var(--cyan)}

.strip{grid-area:strip;padding:8px 14px 6px;display:flex;flex-direction:column}
.striphead{display:flex;gap:18px;align-items:baseline;font-size:13px;color:var(--muted);margin-bottom:4px}
#passNo{font:600 17px var(--cond);color:var(--text)}
#passArea{color:var(--cyan);font-weight:500}
.strip canvas{flex:1;width:100%;min-height:0}
.tape{grid-area:tape;padding:10px 14px 6px;display:flex;flex-direction:column}
.tape canvas,.stream canvas{flex:1;width:100%;min-height:0}
.stream{grid-area:stream;padding:10px 14px 6px;display:flex;flex-direction:column}
.minikey{display:flex;gap:14px;font-size:12px;color:var(--muted)}
.k::before{content:"";display:inline-block;width:10px;height:3px;margin-right:5px;vertical-align:middle}
.k.up::before{background:var(--green)}.k.dn::before{background:var(--amber)}.k.ln::before{background:var(--cyan)}
.ticker{grid-area:tick;overflow:hidden;background:var(--panel);position:relative}
.track{position:absolute;top:0;left:0;height:100%;display:flex;align-items:center;white-space:nowrap;will-change:transform}
.tk{display:inline-flex;align-items:baseline;gap:7px;padding:0 22px;font:500 15px var(--cond);border-right:1px solid var(--line)}
.tk .s{font-size:12px}.tk.to .s{color:var(--green)}.tk.ld .s{color:var(--amber)}.tk.el .s{color:var(--cyan)}
.tk .x{color:var(--muted);font-size:13px}
@media (max-width:700px){.mapstyle button{padding:6px 7px;font-size:12px}.follow{right:12px;top:auto;bottom:60px;width:auto;left:12px}.legend{display:none}}
@media (max-width:1180px){
  .app{height:auto;grid-template-columns:1fr;grid-template-rows:auto;grid-template-areas:"top" "map" "strip" "right" "left" "tape" "stream" "tick"}
  .top{flex-wrap:wrap;padding:8px 12px;gap:10px}.mapwrap{height:56vh}.strip{height:120px}.tape,.stream{height:170px}.ticker{height:34px}
  .right,.left{max-height:none}.board ul{max-height:420px}
}
@media (prefers-reduced-motion:reduce){.mark::after,.conn.live i,.flap,.leg{animation:none}}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}