:root{
  color-scheme:dark;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:#071019;
  color:#f4f8fb;
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden;background:#071019}
body{display:grid;grid-template-rows:72px minmax(0,1fr) 42px}
.display-header{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:10px 22px;background:rgba(5,13,21,.97);border-bottom:1px solid rgba(255,255,255,.14);
  z-index:10;
}
.display-title{font-size:26px;font-weight:800;letter-spacing:.035em;line-height:1.05}
.display-subtitle{margin-top:4px;font-size:14px;color:#aebdcc;letter-spacing:.025em}
.display-clock{text-align:right;font-size:19px;font-weight:750;white-space:nowrap}
.display-clock small{display:block;margin-top:3px;color:#9cafbf;font-size:13px;font-weight:650}
.maps{display:grid;position:relative;min-height:0;background:#0b1720}
.maps.combined{grid-template-columns:1fr 1fr}
.maps.single{grid-template-columns:1fr}
.map-pane{position:relative;min-width:0;min-height:0;overflow:hidden}
.map-pane+ .map-pane{border-left:2px solid rgba(255,255,255,.22)}
.map{position:absolute;inset:0}
.pane-label{
  position:absolute;left:16px;top:14px;z-index:5;display:flex;flex-direction:column;gap:2px;
  padding:9px 12px;border-radius:8px;background:rgba(4,11,18,.84);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 2px 12px rgba(0,0,0,.28);pointer-events:none;
}
.pane-label strong{font-size:19px;letter-spacing:.045em}
.pane-label span{font-size:12px;color:#ced7df}
.display-footer{
  display:flex;align-items:center;justify-content:space-between;gap:18px;padding:0 20px;
  background:#050d15;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#b7c6d3;z-index:10;
}
.propagation-key{
  position:absolute;left:14px;bottom:12px;z-index:8;width:min(420px,calc(50% - 28px));
  padding:8px 10px;border-radius:7px;background:rgba(4,11,18,.88);
  border:1px solid rgba(255,255,255,.30);box-shadow:0 2px 12px rgba(0,0,0,.30);pointer-events:none;
}
.key-title{font-size:11px;color:#eef5fa;font-weight:700;margin-bottom:5px;letter-spacing:.02em}
.key-ramp{height:10px;border-radius:5px;background:linear-gradient(90deg,#0052ff 0%,#00dcff 15%,#00f555 32%,#ffee00 52%,#ff4800 72%,#ff00dc 100%);border:1px solid rgba(255,255,255,.25)}
.key-labels{display:grid;grid-template-columns:repeat(5,1fr);font-size:8.5px;line-height:1.15;color:#d4dee7;margin-top:4px}
.key-labels span:nth-child(1){text-align:left}.key-labels span:nth-child(2),.key-labels span:nth-child(3),.key-labels span:nth-child(4){text-align:center}.key-labels span:nth-child(5){text-align:right}
.repeater-marker{
  width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid #111;
  box-shadow:0 0 0 4px rgba(255,255,255,.55),0 2px 8px rgba(0,0,0,.55)
}
.repeater-marker-label{
  position:absolute;transform:translate(-50%,10px);padding:3px 7px;border-radius:5px;
  background:rgba(4,10,16,.86);border:1px solid rgba(255,255,255,.35);color:white;font-weight:800;font-size:12px;
  white-space:nowrap;pointer-events:none;
}
.error-box{
  position:fixed;z-index:50;left:50%;top:50%;transform:translate(-50%,-50%);max-width:760px;
  background:#230b0b;border:1px solid #c65b5b;border-radius:10px;padding:18px 22px;color:#ffe5e5;
  font-size:16px;box-shadow:0 14px 40px rgba(0,0,0,.55)
}
.hidden{display:none!important}
.maplibregl-ctrl-attrib{font-size:9px!important;background:rgba(255,255,255,.76)!important;color:#111!important}
.maplibregl-ctrl-logo{opacity:.65;transform:scale(.75);transform-origin:bottom left}
@media(max-width:900px){
  body{grid-template-rows:66px minmax(0,1fr) 38px}
  .display-title{font-size:20px}.display-clock{font-size:15px}.display-subtitle{font-size:12px}
  .maps.combined{grid-template-columns:1fr;grid-template-rows:1fr 1fr}
  .map-pane+ .map-pane{border-left:0;border-top:2px solid rgba(255,255,255,.22)}
  .pane-label{top:8px;left:9px;padding:6px 8px}.pane-label strong{font-size:15px}.pane-label span{font-size:10px}
  .propagation-key{left:8px;bottom:8px;width:min(360px,calc(100% - 16px));padding:6px 8px}.key-title{font-size:9px}.key-ramp{height:8px}.key-labels{font-size:7px}.display-footer{padding:0 10px;font-size:10px}
}