#btnRotate45,
#btnTestRoute,
#btnTestRoute2{
  display:none;
}

:root{
  --fontApp: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
             Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  --bg:#05090d;
  --bg2:#0b1117;
  --panel:#0d141b;
  --panel2:#101922;
  --border:#182634;

  --text:#eef5fb;
  --muted:#a8bac9;
  --muted2:#718597;

  --radar:#1aa8ff;
  --radarSoft:rgba(26,168,255,.18);

  --blueZone:#148bff;
  --greenZone:#23d36b;
  --yellowZone:#ffd84d;
  --orangeZone:#ff9800;
  --redZone:#ff4032;
  --trackOff:#121a22;

  --gridZoomMs:260ms;
}

*{ box-sizing:border-box; }

html,
body{
  height:100%;
}

html,
body{
  font-family:var(--fontApp);
  text-rendering:geometricPrecision;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  margin:0;
  background:
    radial-gradient(circle at 50% 42%, rgba(10,64,104,.10) 0%, rgba(5,9,13,0) 42%),
    linear-gradient(180deg, #060a0e 0%, #04070b 100%);
  color:var(--text);
  overflow:hidden;
}

audio{ display:none; }

.hidden{ display:none !important; }
.hiddenVisually{ display:none !important; }

#btnMinus,
#btnPlus{
  opacity:1 !important;
  filter:none !important;
  pointer-events:auto !important;
}

#btnMinus:disabled,
#btnPlus:disabled{
  opacity:1 !important;
  filter:none !important;
  pointer-events:auto !important;
}

#startOverlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(6,10,14,.94);
  z-index:9999;
}

#btnStart{
  font-size:20px;
  padding:16px 28px;
  border-radius:14px;
  border:1px solid #1d2f3d;
  background:#0e1720;
  color:#eef7fb;
  cursor:pointer;
}

.panel{
  background:linear-gradient(180deg, rgba(14,21,28,.96) 0%, rgba(10,16,22,.96) 100%);
  border:1px solid var(--border);
  border-radius:24px;
}

#app{
  height:100%;
  padding:14px;
  display:grid;
  grid-template-columns:220px 1fr;
  gap:14px;
  position:relative;
}

#centerPanel{
  padding:16px 220px 16px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

#rightPanel{
  width:280px;
  display:grid;
  grid-template-rows:auto 1fr auto;
  position:absolute;
  top:10px;
  right:10px;
  bottom:10px;
  height:auto;
}

#leftPanel{
  padding:18px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:14px;
}

#leftTop{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:center;
}

.speedSign{
  --sign-size:150px;
  --sign-ring:16px;
  --sign-font:58px;
  --sign-font-big:68px;
  width:var(--sign-size);
  height:var(--sign-size);
  box-sizing:border-box;
}

.speedSign{
  border-radius:50%;
  border:var(--sign-ring) solid #e42433;
  background:#f8fafc;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden;
  box-shadow:
    0 0 0 2px rgba(4,7,10,.85),
    0 10px 24px rgba(0,0,0,.28),
    inset 0 0 0 2px rgba(255,255,255,.85);
}

.speedSign::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:
    inset 0 8px 16px rgba(255,255,255,.18),
    inset 0 -8px 14px rgba(0,0,0,.08);
  pointer-events:none;
}

.speedSign div{
  position:relative;
  z-index:1;
  font-family:"Bahnschrift", "DIN Alternate", var(--fontApp);
  font-weight:700;
  font-size:var(--sign-font);
  line-height:1;
  letter-spacing:0;
  color:#080b0f;
  text-align:center;
  transform:translateY(1px);
}

.speedSign div.big{
  font-size:var(--sign-font-big);
}

.idleBrand{
  width:100%;
  height:64px;
  box-sizing:border-box;
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:center;
  gap:8px;
}

.idleBrandLogo{
  width:64px;
  height:64px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

.idleBrandName{
  max-width:100%;
  font-family:"Bahnschrift", "DIN Alternate", var(--fontApp);
  font-size:28px;
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  color:#f4fbff;
  text-align:center;
  white-space:nowrap;
  text-shadow:0 0 16px rgba(26,168,255,.42);
}

.trafficLightIcon{
  width:128px;
  height:128px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.trafficLightIcon img{
  height:128px;
}

.nextRadarText{
  min-width:0;
  width:100%;
}

.nextRadarTitle{
  font-size:22px;
  font-weight:700;
  text-align:center;
  color:#f0f6fb;
}

.nextRadarSub{
  margin:6px 0 0;
  font-size:34px;
  color:#f0f6fb;
  text-align:center;
  font-weight:500;
  letter-spacing:-.02em;
}

.progressWrap{
  flex:1;
  display:flex;
  flex-direction:column;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.02);
  border:1px solid rgba(255,255,255,.05);
}

.progressScale{
  position:relative;
  height:420px;
  margin:8px;
}

.scaleTrack{
  position:absolute;
  overflow:hidden;
  left:18px;
  top:0;
  bottom:0;
  width:18px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:padding-box linear-gradient(
      to bottom,
      var(--redZone) 0%,
      var(--redZone) 6.25%,
      var(--orangeZone) 6.25%,
      var(--orangeZone) 12.5%,
      var(--yellowZone) 12.5%,
      var(--yellowZone) 25%,
      var(--greenZone) 25%,
      var(--greenZone) 50%,
      var(--blueZone) 50%,
      var(--blueZone) 100%
    );
}

.tickLabel{
  position:absolute;
  left:44px;
  font-size:18px;
  color:#d7e3ec;
  font-weight:500;
}

.tickLabel.t0{ top:-6px; }
.tickLabel.t200{ top:25%; transform:translateY(-50%); }
.tickLabel.t400{ top:50%; transform:translateY(-50%); }
.tickLabel.t600{ top:75%; transform:translateY(-50%); }
.tickLabel.t800{ bottom:-6px; }

#carMarker{
  visibility:visible !important;
  opacity:1 !important;
}

.carMarkerImg{
  position:absolute !important;
  left:27px !important;
  top:0 !important;
  transform:translate3d(-50%, calc(var(--car-y, 0px) - 50%), 0) !important;
  width:44px !important;
  height:auto !important;
  pointer-events:none !important;
  z-index:9999 !important;
  transition:transform 260ms linear;
  will-change:transform;
}

#leftPanel.isHidden{
  opacity:0;
  pointer-events:none;
}

#radarWrap{
  position:relative;
  width:min(900px, 100%);
  aspect-ratio:1 / 1;
  border-radius:50%;
  background:transparent;
  overflow:hidden;
  contain:layout paint style;
}

#radarCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

#centerDot{
  position:absolute;
  left:50%;
  top:50%;
  width:14px;
  height:14px;
  background:var(--radar);
  border-radius:50%;
  transform:translate(-50%, -50%);
  box-shadow:0 0 0 6px rgba(26,168,255,.10);
}

.scanSvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  transform-origin:50% 50%;
  transform:rotate(0deg);
  pointer-events:none;
  opacity:.24;
  will-change:transform;
  padding:1px;
  animation-name:radarSpin;
  animation-duration:5000ms;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  backface-visibility:hidden;
}

@keyframes radarSpin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}

#blipsLayer{
  position:absolute;
  inset:0;
  pointer-events:none;
  contain:layout paint style;
  transform:rotate(var(--radar-world-rotation, 0deg));
  transform-origin:50% 50%;
  transition:transform 680ms cubic-bezier(.2,.75,.2,1);
  will-change:transform;
}

.compassLabel{
  position:absolute;
  z-index:3;
  width:34px;
  height:20px;
  margin:-10px 0 0 -17px;
  display:flex;
  align-items:center;
  justify-content:center;
  font:700 13px/1 var(--fontApp);
  color:rgba(226,240,250,.78);
  text-shadow:
    0 1px 2px rgba(0,0,0,.9),
    0 0 8px rgba(3,8,12,.8);
  transform:rotate(var(--compass-counter-rotation, 0deg));
  transform-origin:50% 50%;
  transition:
    left 420ms cubic-bezier(.2,.7,.2,1),
    top 420ms cubic-bezier(.2,.7,.2,1),
    transform 680ms cubic-bezier(.2,.75,.2,1);
  pointer-events:none;
}

.blip{
  position:absolute;
  left:50%;
  top:50%;
  width:22px;
  height:22px;
  margin:-11px 0 0 -11px;
  border-radius:50%;
  transform:translate3d(0,0,0);
  transition:
    transform 420ms cubic-bezier(.2,.7,.2,1),
    opacity 220ms ease,
    background-color 220ms ease;
  border:none !important;
}

.blip::after{
  content:"";
  position:absolute;
  inset:-18px;
  border-radius:50%;
  border:2px solid currentColor;
  opacity:0;
  transform:scale(.35);
  pointer-events:none;
}

.blip.isPinged{
  animation:blipPingCore 900ms ease-out;
}

.blip.isPinged::after{
  animation:blipPingHalo 900ms ease-out;
}

@keyframes blipPingCore{
  0%{ box-shadow:0 0 0 rgba(255,255,255,0); }
  18%{ box-shadow:0 0 18px currentColor, 0 0 36px rgba(255,255,255,.5); }
  100%{ box-shadow:0 0 7px currentColor; }
}

@keyframes blipPingHalo{
  0%{
    opacity:.9;
    transform:scale(.25);
    box-shadow:0 0 18px currentColor;
  }
  100%{
    opacity:0;
    transform:scale(1.25);
    box-shadow:0 0 42px currentColor;
  }
}

.blip.red{
  color:var(--redZone);
  background:var(--redZone);
  box-shadow:0 0 7px rgba(255,64,50,.22);
  filter:blur(.3px);
}

.blip.orange{
  color:var(--orangeZone);
  background:var(--orangeZone);
  box-shadow:0 0 7px rgba(255,152,0,.20);
  filter:blur(.3px);
}

.blip.yellow{
  color:var(--yellowZone);
  background:var(--yellowZone);
  box-shadow:0 0 7px rgba(255,216,77,.18);
  filter:blur(.3px);
}

.blip.green{
  color:var(--greenZone);
  background:var(--greenZone);
  box-shadow:0 0 7px rgba(35,211,107,.18);
  filter:blur(.3px);
}

.blip.blue{
  color:var(--blueZone);
  background:var(--blueZone);
  box-shadow:0 0 7px rgba(20,139,255,.18);
  filter:blur(.3px);
}

.blip.gray{
  color:#9ba7b3;
  background:#9ba7b3;
  box-shadow:0 0 7px rgba(155,167,179,.16);
  filter:blur(.3px);
}

#rightTop{
  padding:0 0 12px;
}

.liveSpeedBlock{
  margin-bottom:14px;
  padding:16px 18px;
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(17,26,34,.98) 0%, rgba(13,20,27,.98) 100%);
}

.liveSpeedTitle{
  font-weight:700;
  margin-bottom:10px;
  color:#edf4fa;
}

.liveSpeedValue{
  display:flex;
  align-items:baseline;
  gap:8px;
}

#uiLiveSpeed{
  font-size:52px;
  font-weight:800;
  line-height:1;
  letter-spacing:-1px;
  color:#f6fbff;
}

.liveSpeedUnit{
  font-size:18px;
  font-weight:700;
  color:var(--muted);
}

.controlsBlock{
  padding:14px;
  border-radius:20px;
  border:1px solid var(--border);
  background:linear-gradient(180deg, rgba(17,26,34,.98) 0%, rgba(13,20,27,.98) 100%);
}

.blockTitle{
  font-weight:700;
  margin-bottom:10px;
  color:#edf4fa;
}

.segmented{
  display:flex;
  gap:10px;
  margin-bottom:12px;
}

.segBtn{
  flex:1;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:#0d1820;
  cursor:pointer;
  font-weight:650;
  color:#eaf3f9;
}

.segBtn.active{
  border-color:rgba(25,211,219,.42);
  box-shadow:inset 0 0 0 1px rgba(25,211,219,.28);
  background:#0f1e27;
}

.fixedRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.iconBtn{
  width:56px;
  height:44px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:#0d1820;
  cursor:pointer;
  font-size:26px;
  font-weight:800;
  line-height:1;
  color:#eef7fb;
}

.fixedValue{
  flex:1;
  text-align:center;
  font-weight:800;
  font-size:18px;
  color:#f4f8fb;
}

.toggleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.toggleLabel{
  color:#eef5fb;
  font-weight:650;
}

.switch{
  position:relative;
  width:54px;
  height:32px;
}

.switch input{
  display:none;
}

.slider{
  position:absolute;
  inset:0;
  background:#1a2630;
  border-radius:999px;
  transition:.2s;
  border:1px solid rgba(255,255,255,.08);
}

.slider:before{
  content:"";
  position:absolute;
  width:26px;
  height:26px;
  left:3px;
  top:2px;
  border-radius:50%;
  background:#fff;
  transition:.2s;
}

.switch input:checked + .slider{
  background:rgba(25,211,219,.52);
  border-color:rgba(25,211,219,.35);
}

.switch input:checked + .slider:before{
  transform:translateX(22px);
}

.legalLinks{
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid rgba(255,255,255,.08);
  display:flex;
  flex-direction:column;
  gap:8px;
  align-items:flex-start;
}

.legalLinks a{
  color:var(--muted);
  font-size:13px;
  line-height:1.25;
  text-decoration:none;
}

.legalLinks a:hover,
.legalLinks a:focus-visible{
  color:#f4fbff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.controlsBlock.isAuto .fixedRow{
  opacity:.45;
  pointer-events:none;
}

#rightBottom{
  display:flex;
  padding:16px 0 0;
  flex-direction:column;
  gap:10px;
  align-self:end;
}

.primaryBtn{
  margin-top:8px;
  width:100%;
  padding:14px 14px;
  border-radius:14px;
  border:0;
  cursor:pointer;
  background:var(--radar);
  color:#051017;
  font-weight:800;
  font-size:18px;
}

body.legalPage{
  min-height:100%;
  height:auto;
  overflow:auto;
}

.legalShell{
  width:min(980px, 100%);
  margin:0 auto;
  padding:34px 18px 56px;
}

.legalTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:28px;
}

.legalIdentity{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  text-decoration:none;
}

.legalIdentity img{
  width:42px;
  height:42px;
  display:block;
  object-fit:contain;
}

.legalIdentity span{
  font-family:"Bahnschrift", "DIN Alternate", var(--fontApp);
  font-size:24px;
  line-height:1;
  font-weight:700;
  color:#f4fbff;
}

.legalBack{
  color:var(--muted);
  font-size:14px;
  text-decoration:none;
}

.legalBack:hover,
.legalBack:focus-visible{
  color:#f4fbff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legalDoc{
  color:#dce8f1;
}

.legalDoc h1{
  margin:0 0 8px;
  font-family:"Bahnschrift", "DIN Alternate", var(--fontApp);
  font-size:clamp(32px, 5vw, 54px);
  line-height:1;
  font-weight:700;
  letter-spacing:0;
  color:#f4fbff;
}

.legalUpdated{
  margin:0 0 30px;
  color:var(--muted);
}

.legalDoc section{
  padding:24px 0;
  border-top:1px solid rgba(255,255,255,.09);
}

.legalDoc h2{
  margin:0 0 12px;
  font-size:22px;
  line-height:1.2;
  color:#f4fbff;
}

.legalDoc h3{
  margin:18px 0 8px;
  font-size:17px;
  line-height:1.25;
  color:#f4fbff;
}

.legalDoc p,
.legalDoc li{
  color:#d7e3ec;
  font-size:16px;
  line-height:1.68;
}

.legalDoc p{
  margin:0 0 12px;
}

.legalDoc ul{
  margin:0 0 12px;
  padding-left:20px;
}

.legalDoc a{
  color:#7bd7ff;
  text-decoration:none;
}

.legalDoc a:hover,
.legalDoc a:focus-visible{
  color:#f4fbff;
  text-decoration:underline;
  text-underline-offset:3px;
}

.legalNotice{
  margin:18px 0 0;
  padding:14px 16px;
  border-left:3px solid var(--radar);
  background:rgba(26,168,255,.09);
  color:#eef7fb;
}

.legalMeta{
  display:grid;
  grid-template-columns:190px 1fr;
  gap:8px 16px;
  margin:0 0 14px;
}

.legalMeta dt{
  color:var(--muted);
  font-weight:700;
}

.legalMeta dd{
  margin:0;
  color:#eef7fb;
}

.legalSmall{
  color:var(--muted);
  font-size:14px;
}

@media (max-width:680px){
  .legalTop{
    align-items:flex-start;
    flex-direction:column;
  }

  .legalMeta{
    grid-template-columns:1fr;
    gap:3px;
  }
}

@media (max-width:980px){
  #app{
    position:relative;
    display:block;
    width:100%;
    height:100%;
    min-height:100vh;
    padding:0;
    overflow:hidden;
  }

  .panel{
    background:none;
    border:none;
    border-radius:0;
  }

  #rightBottom{
    display:none !important;
  }

  #leftPanel{
    position:absolute;
    inset:0;
    z-index:20;
    display:block;
    padding:0;
    margin:0;
    background:none;
    border:none;
    pointer-events:none;
    overflow:visible;
  }

  #leftTop{
    position:absolute;
    top:18px;
    left:16px;
    right:16px;
    display:grid;
    grid-template-columns:78px 1fr auto;
    align-items:center;
    gap:14px;
    margin:0;
  }

  .speedSign{
    --sign-size:78px;
    --sign-ring:8px;
    --sign-font:2.35rem;
    --sign-font-big:2.35rem;
    flex-shrink:0;
    box-shadow:
      0 0 0 1px rgba(4,7,10,.85),
      0 8px 18px rgba(0,0,0,.26),
      inset 0 0 0 1px rgba(255,255,255,.85);
  }

  .idleBrand{
    flex-shrink:0;
    width:auto;
    height:78px;
    justify-content:flex-start;
    gap:8px;
  }

  .idleBrandLogo{
    width:78px;
    height:78px;
  }

  .idleBrandName{
    font-size:0;
    width:0;
    overflow:hidden;
  }

  .speedSign::before{
    inset:0;
    border:0;
  }

  .speedSign div,
  .speedSign div.big{
    font-size:var(--sign-font);
    letter-spacing:0;
    color:#080b0f;
  }

  .trafficLightIcon{
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
  }

  .trafficLightIcon img{
    height:78px;
  }

  .nextRadarText{
    min-width:0;
    width:auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
  }

  .nextRadarTitle{
    display:none;
  }

  .nextRadarSub{
    margin:0;
    font-size:2.6rem;
    line-height:1;
    font-weight:500;
    text-align:left;
    color:#f2f8fc;
    white-space:nowrap;
    letter-spacing:-.04em;
  }

  #rightPanel{
    position:absolute;
    top:18px;
    right:16px;
    left:auto;
    bottom:auto;
    width:auto;
    height:auto;
    display:block;
    z-index:21;
    pointer-events:none;
  }

  #rightTop{
    padding:0;
  }

  .liveSpeedBlock{
    margin:0;
    padding:0;
    border:none;
    background:none;
    border-radius:0;
    box-shadow:none;
  }

  .liveSpeedTitle{
    display:none;
  }

  .liveSpeedValue{
    display:flex;
    align-items:baseline;
    justify-content:flex-end;
    gap:4px;
    white-space:nowrap;
  }

  #uiLiveSpeed{
    font-size:4rem;
    font-weight:500;
    line-height:1;
    letter-spacing:-.05em;
    color:#f6fbff;
  }

  .liveSpeedUnit{
    font-size:1.05rem;
    font-weight:500;
    color:rgba(255,255,255,.62);
  }

  #centerPanel{
    position:absolute;
    top:108px;
    left:0;
    right:0;
    bottom:102px;
    z-index:1;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
  }

  #radarWrap{
    width:min(88vw, calc(100vh - 240px));
    max-width:700px;
    aspect-ratio:1 / 1;
  }

  .progressWrap{
    position:absolute !important;
    left:16px;
    right:16px;
    bottom:16px;
    top:auto !important;
    z-index:25;
    display:block !important;
    width:auto;
    height:74px !important;
    padding:0 !important;
    margin:0 !important;
    background:none !important;
    border:none !important;
    border-radius:0 !important;
    overflow:visible;
  }

  .progressScale{
    position:relative;
    width:100%;
    height:74px !important;
    margin:0 !important;
    overflow:visible !important;
  }

  .scaleTrack{
    position:absolute;
    left:0 !important;
    right:0 !important;
    top:34px !important;
    bottom:auto !important;
    width:auto !important;
    height:18px !important;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.08);
    background:padding-box linear-gradient(
        to right,
        var(--redZone) 0%,
        var(--redZone) 6.25%,
        var(--orangeZone) 6.25%,
        var(--orangeZone) 12.5%,
        var(--yellowZone) 12.5%,
        var(--yellowZone) 25%,
        var(--greenZone) 25%,
        var(--greenZone) 50%,
        var(--blueZone) 50%,
        var(--blueZone) 100%
      );
  }

  .tickLabel{
    position:absolute !important;
    top:0 !important;
    bottom:auto !important;
    left:auto !important;
    right:auto !important;
    margin:0 !important;
    line-height:1 !important;
    font-size:1rem !important;
    font-weight:500 !important;
    color:#c8d8e4 !important;
    white-space:nowrap !important;
    transform:translateX(-50%) !important;
  }

  .tickLabel.t0{
    left:0 !important;
    transform:none !important;
    text-align:left;
  }

  .tickLabel.t200{
    left:25% !important;
  }

  .tickLabel.t400{
    left:50% !important;
  }

  .tickLabel.t600{
    left:75% !important;
  }

  .tickLabel.t800{
    left:100% !important;
    transform:translateX(-100%) !important;
    text-align:right;
    display:block !important;
  }

  .carMarkerImg,
  #carMarker{
    display:none !important;
  }
}

@media (max-width:560px){
  #leftTop{
    grid-template-columns:72px 1fr auto;
    gap:12px;
  }

  .speedSign{
    --sign-size:72px;
    --sign-ring:8px;
    --sign-font:2.15rem;
    --sign-font-big:2.15rem;
  }

  .idleBrand{
    height:72px;
  }

  .idleBrandLogo{
    width:72px;
    height:72px;
  }

  .speedSign::before{
    inset:0;
    border:0;
  }

  .speedSign div,
  .speedSign div.big{
    font-size:var(--sign-font);
  }

  .nextRadarSub{
    font-size:2.2rem;
  }

  #rightPanel{
    top:16px;
    right:14px;
  }

  #uiLiveSpeed{
    font-size:3.2rem;
  }

  .liveSpeedUnit{
    font-size:.95rem;
  }

  #centerPanel{
    top:96px;
    bottom:92px;
  }

  #radarWrap{
    width:min(92vw, calc(100vh - 215px));
  }

  .progressWrap{
    left:14px;
    right:14px;
    bottom:14px;
    height:68px !important;
  }

  .progressScale{
    height:68px !important;
  }

  .scaleTrack{
    top:30px;
    height:16px !important;
  }

  .tickLabel{
    font-size:.9rem !important;
  }
}

@media (max-width:420px){
  #leftTop{
    grid-template-columns:68px 1fr auto;
    gap:10px;
    left:14px;
    right:14px;
    top:14px;
  }

  .speedSign{
    --sign-size:68px;
    --sign-ring:7px;
    --sign-font:1.95rem;
    --sign-font-big:1.95rem;
  }

  .idleBrand{
    height:68px;
  }

  .idleBrandLogo{
    width:68px;
    height:68px;
  }

  .speedSign::before{
    inset:0;
    border:0;
  }

  .speedSign div,
  .speedSign div.big{
    font-size:var(--sign-font);
  }

  .nextRadarSub{
    font-size:2rem;
  }

  #rightPanel{
    top:14px;
    right:14px;
  }

  #uiLiveSpeed{
    font-size:2.8rem;
  }

  .liveSpeedUnit{
    font-size:.9rem;
  }

  #centerPanel{
    top:88px;
    bottom:86px;
  }

  #radarWrap{
    width:min(92vw, calc(100vh - 215px));
  }

  .progressWrap{
    left:12px;
    right:12px;
    bottom:12px;
    height:64px !important;
  }

  .progressScale{
    height:64px !important;
  }

  .scaleTrack{
    top:29px;
    height:15px !important;
  }

  .tickLabel{
    font-size:.84rem !important;
  }
}