:root{
  --bg:#070b0e;
  --panel:#0a1014;
  --panel-solid:#091015;
  --line:#596770;
  --line-soft:rgba(116,137,149,.26);
  --grid-small:rgba(90,114,126,.055);
  --grid-large:rgba(90,114,126,.09);
  --text:#eef2f4;
  --muted:#a9b2b8;
  --accent:#59c6ff;
  --accent-soft:rgba(89,198,255,.16);
  --safe-top:env(safe-area-inset-top,0px);
  --safe-right:env(safe-area-inset-right,0px);
  --safe-bottom:env(safe-area-inset-bottom,0px);
  --safe-left:env(safe-area-inset-left,0px);
}

*{box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg)}
html{color-scheme:dark}
body{
  margin:0;
  min-width:320px;
  color:var(--text);
  font-family:"Space Mono","Consolas",monospace;
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid-large) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-large) 1px,transparent 1px),
    linear-gradient(var(--grid-small) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-small) 1px,transparent 1px);
  background-size:64px 64px,64px 64px,16px 16px,16px 16px;
  background-position:-1px -1px;
}
button,input{font:inherit}
a{color:inherit;text-decoration:none}
button{color:inherit}

.page-frame{
  position:fixed;
  inset:12px;
  pointer-events:none;
  z-index:100;
  background:
    linear-gradient(var(--muted),var(--muted)) left top/18px 1px no-repeat,
    linear-gradient(var(--muted),var(--muted)) left top/1px 18px no-repeat,
    linear-gradient(var(--muted),var(--muted)) right top/18px 1px no-repeat,
    linear-gradient(var(--muted),var(--muted)) right top/1px 18px no-repeat,
    linear-gradient(var(--muted),var(--muted)) left bottom/18px 1px no-repeat,
    linear-gradient(var(--muted),var(--muted)) left bottom/1px 18px no-repeat,
    linear-gradient(var(--muted),var(--muted)) right bottom/18px 1px no-repeat,
    linear-gradient(var(--muted),var(--muted)) right bottom/1px 18px no-repeat;
  opacity:.78;
}

.radar-app{
  height:100vh;
  height:100dvh;
  min-height:520px;
  padding:calc(18px + var(--safe-top)) calc(22px + var(--safe-right)) calc(12px + var(--safe-bottom)) calc(22px + var(--safe-left));
  display:grid;
  grid-template-rows:68px minmax(0,1fr) 112px 24px;
  gap:10px;
}

.topbar{
  min-width:0;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(126,141,149,.5);
  position:relative;
}
.topbar:after{
  content:"+";
  position:absolute;
  left:50%;
  bottom:-14px;
  transform:translateX(-50%);
  color:var(--accent);
  background:var(--bg);
  padding:0 8px;
  font-size:20px;
  font-weight:400;
}
.brand-link{
  justify-self:start;
  display:flex;
  align-items:center;
  gap:11px;
  color:#c8d0d5;
  font-family:"Michroma",sans-serif;
  font-size:13px;
  letter-spacing:.15em;
  transition:color .16s ease;
}
.brand-link:hover{color:var(--accent)}
.brand-arrow{font-family:"Share Tech Mono",monospace;font-size:20px;line-height:1;color:var(--accent)}
.app-title{text-align:center;line-height:1}
.app-title h1{
  margin:0;
  font-family:"Michroma",sans-serif;
  font-size:23px;
  font-weight:400;
  letter-spacing:.15em;
}
.app-title p{
  margin:7px 0 0;
  color:var(--muted);
  font-size:10px;
  letter-spacing:.15em;
}
.app-title p span{color:var(--accent)}
.clock{justify-self:end;text-align:right;line-height:1}
.clock strong{display:block;font-family:"Share Tech Mono",monospace;font-size:25px;font-weight:400;letter-spacing:.05em}
.clock span{display:block;margin-top:5px;color:var(--muted);font-size:10px;letter-spacing:.07em;text-transform:uppercase}

.map-panel{min-height:0;position:relative}
.map-panel:before,.map-panel:after{
  content:"";
  position:absolute;
  z-index:4;
  pointer-events:none;
}
.map-panel:before{left:-5px;top:18px;width:11px;height:1px;background:var(--accent)}
.map-panel:after{right:-5px;bottom:18px;width:11px;height:1px;background:var(--accent)}
.map{
  width:100%;
  height:100%;
  min-height:260px;
  position:relative;
  overflow:hidden;
  border:1px solid rgba(130,148,158,.72);
  border-radius:4px;
  background:#0b1419;
  isolation:isolate;
}
.tile-layer,.map-darkener,.map-grid,.radar-layer{position:absolute;inset:0}
.tile-layer{z-index:0;overflow:hidden;background:#0c151a}
.map-tile{
  position:absolute;
  width:256px;
  height:256px;
  max-width:none;
  filter:grayscale(.74) sepia(.08) hue-rotate(150deg) saturate(.65) brightness(.43) contrast(1.28);
  opacity:.9;
  user-select:none;
  -webkit-user-drag:none;
}
.map-darkener{
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 48%,rgba(4,13,18,.03) 0 30%,rgba(4,10,14,.3) 92%),
    linear-gradient(rgba(3,10,14,.18),rgba(3,10,14,.18));
}
.radar-layer{
  z-index:2;
  width:auto;
  height:auto;
  max-width:none;
  object-fit:fill;
  pointer-events:none;
  opacity:0;
  transition:opacity 210ms linear;
  filter:saturate(1.16) brightness(1.08) contrast(1.04) drop-shadow(0 0 4px rgba(0,0,0,.2));
  image-rendering:auto;
}
.map-grid{
  z-index:3;
  pointer-events:none;
  opacity:.3;
  background-image:
    linear-gradient(rgba(110,151,170,.08) 1px,transparent 1px),
    linear-gradient(90deg,rgba(110,151,170,.08) 1px,transparent 1px);
  background-size:64px 64px;
}
.map:before,.map:after{
  content:"";
  position:absolute;
  z-index:7;
  pointer-events:none;
}
.map:before{
  inset:12px;
  border:1px solid rgba(159,175,183,.15);
}
.map:after{
  inset:0;
  background:
    linear-gradient(var(--accent),var(--accent)) 15px 15px/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 15px 15px/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) calc(100% - 15px) 15px/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) calc(100% - 15px) 15px/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 15px calc(100% - 15px)/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) 15px calc(100% - 15px)/1px 16px no-repeat,
    linear-gradient(var(--accent),var(--accent)) calc(100% - 15px) calc(100% - 15px)/16px 1px no-repeat,
    linear-gradient(var(--accent),var(--accent)) calc(100% - 15px) calc(100% - 15px)/1px 16px no-repeat;
  opacity:.65;
}

.range-circle{
  position:absolute;
  z-index:5;
  left:50%;
  top:50%;
  width:300px;
  height:300px;
  transform:translate(-50%,-50%);
  border:1px solid rgba(89,198,255,.58);
  border-radius:50%;
  pointer-events:none;
  box-shadow:0 0 18px rgba(89,198,255,.05),inset 0 0 18px rgba(89,198,255,.025);
}
.range-circle:before,.range-circle:after{
  content:"";
  position:absolute;
  background:rgba(89,198,255,.25);
}
.range-circle:before{left:50%;top:-6px;width:1px;height:12px}
.range-circle:after{top:50%;right:-6px;width:12px;height:1px}
.range-label{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  padding:2px 6px;
  color:#8bd9ff;
  background:rgba(6,13,17,.72);
  font-size:9px;
  letter-spacing:.08em;
}
.city-marker{
  position:absolute;
  z-index:8;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:10px;
  pointer-events:none;
}
.crosshair{
  position:relative;
  display:block;
  width:24px;
  height:24px;
  border:1px solid rgba(89,198,255,.84);
  border-radius:50%;
  box-shadow:0 0 10px rgba(89,198,255,.3);
}
.crosshair:before,.crosshair:after{content:"";position:absolute;background:var(--accent)}
.crosshair:before{left:-8px;right:-8px;top:11px;height:1px}
.crosshair:after{top:-8px;bottom:-8px;left:11px;width:1px}
.city-marker strong{
  padding:4px 7px;
  border-left:1px solid var(--accent);
  color:#f2f5f6;
  background:rgba(5,12,16,.7);
  font-size:10px;
  font-weight:400;
  letter-spacing:.1em;
}
.map-badges{
  position:absolute;
  z-index:8;
  left:27px;
  top:26px;
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.badge{
  min-height:25px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:4px 8px;
  border:1px solid rgba(124,145,155,.5);
  background:rgba(5,12,16,.78);
  color:#b8c3c8;
  font-size:9px;
  letter-spacing:.07em;
  backdrop-filter:blur(5px);
}
.badge-live{color:#a8e2ff;border-color:rgba(89,198,255,.56)}
.badge-live i{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:0 0 9px rgba(89,198,255,.75)}
.badge-demo{color:#e5c789;border-color:rgba(229,199,137,.5)}
.badge-demo i{background:#e5c789;box-shadow:0 0 8px rgba(229,199,137,.45)}
.compass{
  position:absolute;
  z-index:8;
  right:31px;
  top:27px;
  width:31px;
  height:49px;
  text-align:center;
  color:#c7d1d6;
  font-family:"Share Tech Mono",monospace;
  font-size:13px;
}
.compass i{display:block;margin:5px auto 0;width:1px;height:27px;background:linear-gradient(var(--accent) 0 48%,rgba(185,198,204,.48) 48%)}
.compass i:before{content:"";display:block;width:7px;height:7px;border-left:1px solid var(--accent);border-top:1px solid var(--accent);transform:translate(-3px,0) rotate(45deg)}
.radar-legend{
  position:absolute;
  z-index:8;
  right:27px;
  bottom:27px;
  display:grid;
  grid-template-columns:auto 118px auto;
  gap:8px;
  align-items:center;
  color:#bdc7cc;
  font-size:8px;
  letter-spacing:.06em;
}
.radar-legend i{
  display:block;
  height:7px;
  border:1px solid rgba(255,255,255,.24);
  background:linear-gradient(90deg,#380070,#0000fc 18%,#00a000 40%,#9cdc00 57%,#fcb000 73%,#fc5800 87%,#fc0000);
}
.scale{
  position:absolute;
  z-index:8;
  left:28px;
  bottom:27px;
  color:#c3ccd0;
  font-size:8px;
  letter-spacing:.06em;
}
.scale span{display:block;width:80px;height:5px;border-left:1px solid #d0d7da;border-right:1px solid #d0d7da;border-bottom:1px solid #d0d7da}
.scale b{display:block;margin-top:4px;font-weight:400}

.loading{
  position:absolute;
  z-index:20;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:rgba(5,11,15,.78);
  backdrop-filter:blur(5px);
  transition:opacity .3s ease,visibility .3s ease;
}
.loading.is-hidden{opacity:0;visibility:hidden;pointer-events:none}
.loading strong{font-family:"Michroma",sans-serif;font-size:13px;font-weight:400;letter-spacing:.09em}
.loading span{color:var(--muted);font-size:10px}
.loading-mark{width:38px;height:38px;border:1px solid rgba(89,198,255,.26);border-top-color:var(--accent);border-radius:50%;animation:spin .85s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.map-error{
  position:absolute;
  z-index:21;
  left:50%;
  bottom:24px;
  transform:translateX(-50%);
  max-width:min(720px,calc(100% - 42px));
  padding:10px 13px;
  border:1px solid rgba(229,199,137,.5);
  background:rgba(20,17,10,.92);
  color:#ead59f;
  font-size:10px;
  text-align:center;
}

.hud{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(260px,1.1fr) 105px minmax(360px,1.8fr) auto;
  align-items:center;
  gap:18px;
  padding:10px 15px;
  border:1px solid rgba(119,137,147,.62);
  border-radius:4px;
  background:rgba(8,13,17,.82);
}
.weather-status{min-width:0}
.status-kicker{margin-bottom:8px;color:#8f9da4;font-size:8px;letter-spacing:.11em}
.status-row{min-width:0;display:flex;align-items:center;gap:12px}
.status-arrow{flex:0 0 auto;color:var(--accent);font-family:"Share Tech Mono",monospace;font-size:25px}
.status-row strong{
  min-width:0;
  font-family:"Share Tech Mono",monospace;
  font-size:17px;
  font-weight:400;
  line-height:1.15;
  white-space:normal;
  overflow:visible;
}
.frame-info{
  min-width:0;
  padding-left:14px;
  border-left:1px solid rgba(112,131,141,.4);
  line-height:1;
}
.frame-info span{display:block;color:#8f9da4;font-size:8px;letter-spacing:.1em}
.frame-info strong{display:block;margin-top:7px;font-family:"Share Tech Mono",monospace;font-size:25px;font-weight:400}
.frame-info small{display:block;margin-top:6px;color:#99a6ad;font-size:8px}
.player{min-width:0;display:grid;grid-template-columns:auto minmax(160px,1fr);align-items:center;gap:13px}
.player-buttons{display:flex;gap:6px}
.icon-button,.play-button,.text-button{
  border:1px solid rgba(116,137,149,.5);
  background:rgba(9,16,20,.86);
  cursor:pointer;
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.icon-button:hover,.play-button:hover,.text-button:hover{border-color:var(--accent);color:#bde9ff;background:rgba(89,198,255,.08)}
.icon-button{width:31px;height:31px;font-family:"Share Tech Mono",monospace;font-size:22px;line-height:1}
.play-button{width:37px;height:31px;color:var(--accent);font-size:13px}
.timeline-wrap{min-width:0}
#timeline{
  --progress:100%;
  display:block;
  width:100%;
  height:14px;
  margin:0;
  appearance:none;
  -webkit-appearance:none;
  background:transparent;
  cursor:pointer;
}
#timeline::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--accent) 0 var(--progress),rgba(126,145,154,.44) var(--progress) 100%)}
#timeline::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:10px;height:10px;margin-top:-4px;border:1px solid #bdeaff;background:#071016;border-radius:0;box-shadow:0 0 7px rgba(89,198,255,.45)}
#timeline::-moz-range-track{height:2px;background:rgba(126,145,154,.44)}
#timeline::-moz-range-progress{height:2px;background:var(--accent)}
#timeline::-moz-range-thumb{width:9px;height:9px;border:1px solid #bdeaff;background:#071016;border-radius:0}
.timeline-labels{display:flex;justify-content:space-between;gap:8px;color:#89979e;font-size:8px;line-height:1;letter-spacing:.04em}
.timeline-labels span:nth-child(2){text-align:center;flex:1}
.actions{display:flex;flex-direction:column;gap:7px}
.text-button{min-width:126px;height:30px;padding:0 10px;color:#9bdcff;font-size:9px;letter-spacing:.04em;white-space:nowrap}
.radar-footer{
  min-width:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  color:#8d9aa1;
  font-size:8px;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
}
.radar-footer span,.radar-footer a{overflow:hidden;text-overflow:ellipsis}
.radar-footer a{transition:color .15s ease}.radar-footer a:hover{color:var(--accent)}

@media (max-width:980px){
  .radar-app{grid-template-rows:62px minmax(0,1fr) 148px 20px;padding-left:14px;padding-right:14px}
  .hud{grid-template-columns:minmax(230px,1fr) 90px minmax(250px,1.4fr);gap:12px}
  .actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end;margin-top:-3px}
  .status-row strong{font-size:17px}
}

@media (max-width:700px){
  .page-frame{inset:7px}
  .radar-app{
    min-height:480px;
    padding:calc(9px + var(--safe-top)) calc(9px + var(--safe-right)) calc(7px + var(--safe-bottom)) calc(9px + var(--safe-left));
    grid-template-rows:56px minmax(0,1fr) 174px 18px;
    gap:7px;
  }
  .topbar{grid-template-columns:auto 1fr auto;gap:8px}
  .brand-link{font-size:0;gap:0}.brand-arrow{font-size:23px}
  .app-title h1{font-size:15px;letter-spacing:.1em}
  .app-title p{font-size:8px;margin-top:5px}
  .clock strong{font-size:20px}.clock span{font-size:7px;max-width:72px}
  .map{min-height:210px}
  .map-badges{left:19px;top:18px}.map-badges .badge:nth-child(2){display:none}
  .badge{font-size:8px;min-height:22px}
  .compass{right:19px;top:18px}
  .scale{left:20px;bottom:19px}
  .radar-legend{right:19px;bottom:19px;grid-template-columns:80px}.radar-legend span{display:none}.radar-legend i{width:80px}
  .city-marker{gap:7px}.city-marker strong{font-size:8px}
  .hud{grid-template-columns:minmax(0,1fr) 77px;padding:9px 10px;gap:8px 10px}
  .weather-status{min-width:0}.status-kicker{margin-bottom:5px}
  .status-row{gap:8px}.status-arrow{font-size:21px}.status-row strong{font-size:15px;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .frame-info{padding-left:9px}.frame-info strong{font-size:20px}.frame-info small{font-size:7px}
  .player{grid-column:1/-1;grid-template-columns:auto minmax(0,1fr);gap:10px}
  .actions{grid-column:1/-1;justify-content:stretch;gap:7px;margin:0}.actions button{flex:1;min-width:0}
  .radar-footer{font-size:7px}.radar-footer span:first-child{display:none}
}

@media (max-height:620px) and (orientation:landscape){
  .radar-app{grid-template-rows:46px minmax(0,1fr) 84px 16px;padding-top:8px;padding-bottom:5px;gap:6px}
  .app-title h1{font-size:16px}.app-title p{margin-top:4px}.clock strong{font-size:20px}.brand-link{font-size:10px}
  .hud{grid-template-columns:minmax(220px,1fr) 78px minmax(330px,1.7fr) auto;padding:6px 11px;gap:11px}
  .status-kicker{margin-bottom:4px}.status-row strong{font-size:15px}.frame-info strong{font-size:19px;margin-top:4px}.frame-info small{margin-top:3px}
  .actions{grid-column:auto;flex-direction:column;margin:0}.text-button{height:26px}
  .radar-footer{font-size:7px}
}

@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}