:root {
  --bg: #030815; --ink: #e4eeff; --mute: #7b8fb8; --dim: #3d5180;
  --cyan: #7fd6ff; --blue: #3d8bff; --line: rgba(110, 160, 255, .13);
  --card: linear-gradient(160deg, rgba(30, 60, 140, .22), rgba(10, 22, 55, .35));
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  --sans: 'Space Grotesk', system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0 }
html { background: var(--bg); color: var(--ink); font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased }
body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(40, 100, 255, .18), transparent 70%),
    radial-gradient(rgba(120, 170, 255, .07) 1px, transparent 1.5px) 0 0 / 22px 22px;
}
a { color: inherit; text-decoration: none }
button, input, select { font: inherit; color: inherit }
.wrap { width: min(1240px, 100% - 40px); margin-inline: auto }

.top { display: flex; align-items: center; justify-content: space-between; padding: 22px 0 }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: .14em }
.orb { width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #c9efff, var(--blue) 55%, #0b2a7a); box-shadow: 0 0 14px var(--blue) }
nav { display: flex; gap: 22px; color: var(--mute); font-size: 14px }
nav a:hover { color: var(--cyan) }

.hero { text-align: center; padding-top: 18px }
h1 { font-weight: 500; font-size: clamp(28px, 4.4vw, 48px); letter-spacing: -.02em; background: linear-gradient(90deg, #cfe9ff, #7fb6ff 60%, #5d8cff); -webkit-background-clip: text; background-clip: text; color: transparent }
.sub { color: var(--mute); margin-top: 6px }
.sub b { color: var(--ink); font-weight: 500; font-family: var(--mono); font-size: .92em }

.map {
  position: relative; margin: 34px 0 0;
  --fy: linear-gradient(transparent, #000 6%, #000 88%, transparent);
  --fx: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  -webkit-mask: var(--fy), var(--fx); -webkit-mask-composite: source-in;
  mask: var(--fy), var(--fx); mask-composite: intersect;
}
#map { display: block; width: 100%; aspect-ratio: 360 / 142; cursor: crosshair; touch-action: pan-y }
#sun { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px 3px #bfe8ff, 0 0 40px 12px rgba(80, 170, 255, .55); pointer-events: none }
#sun span { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #bfe3ff; white-space: nowrap; text-shadow: 0 0 8px #030815 }
#sun.r span { left: auto; right: 18px }
#sun::after { content: ''; position: absolute; inset: -5px; border-radius: 50%; border: 1px solid rgba(180, 225, 255, .8); animation: ping 2.6s ease-out infinite }
@keyframes ping { to { inset: -26px; opacity: 0 } }
#tip { position: absolute; transform: translate(14px, -50%); padding: 7px 10px; border-radius: 8px; background: rgba(6, 16, 42, .88); border: 1px solid var(--line); backdrop-filter: blur(8px); font: 12px/1.45 var(--mono); color: var(--mute); white-space: nowrap; pointer-events: none }
#tip.l { transform: translate(calc(-100% - 14px), -50%) }
#tip b { display: block; color: var(--ink); font-weight: 500 }

.now { margin-top: -6px; cursor: copy }
.big { font: 300 clamp(30px, 8.4vw, 104px)/1 var(--mono); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #e3f3ff; text-shadow: 0 0 22px rgba(80, 160, 255, .55), 0 0 60px rgba(40, 110, 255, .35) }
.big i, .uv i, .mv i, dd i { font-style: normal; opacity: .38 }
.big i { opacity: 1; color: #2f63d6; text-shadow: none; margin: 0 -.12em }
.big-u { margin-top: 12px; font: 500 14px var(--mono); color: var(--cyan); letter-spacing: .2em; text-transform: uppercase }
.big-u span { color: var(--dim); letter-spacing: .1em; margin-left: 8px }

.units { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 54px }
.unit, .card { position: relative; border: 1px solid var(--line); border-radius: 16px; background: var(--card); backdrop-filter: blur(6px) }
.unit { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; text-align: left; cursor: copy; transition: border-color .2s, transform .2s }
.unit:hover { border-color: rgba(127, 214, 255, .45); transform: translateY(-2px) }
.ul { display: flex; justify-content: space-between; color: var(--mute); font-size: 13px; letter-spacing: .06em; text-transform: uppercase }
.ul em { font: 500 12px var(--mono); color: var(--cyan); text-transform: none }
.ul b { font-weight: 400; color: var(--dim); margin-right: 10px }
.uv { font: 400 clamp(18px, 1.9vw, 26px)/1.1 var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; white-space: nowrap }
.un { font: 12px var(--mono); color: var(--dim) }
.bar { display: block; height: 3px; border-radius: 3px; background: rgba(90, 140, 255, .14); overflow: hidden }
.bar i { display: block; height: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #2f6bff, var(--cyan)); box-shadow: 0 0 10px var(--cyan) }

.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 14px 0 0 }
.card { padding: 18px 20px 20px }
.wide { grid-column: span 3 }
h2 { font: 500 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); margin-bottom: 10px }
.v { font: 400 18px/1.35 var(--mono); font-variant-numeric: tabular-nums }
.m { margin-top: 8px; font-size: 13px; color: var(--mute) }
.pips { display: flex; gap: 5px }
.pips i { flex: 1; height: 3px; border-radius: 3px; background: rgba(90, 140, 255, .14) }
.pips .on { background: #2f6bff }
.pips .cur { background: var(--cyan); box-shadow: 0 0 10px var(--cyan) }

#miles { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 26px }
#miles li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0 10px 14px; border-left: 2px solid rgba(110, 160, 255, .25) }
#miles li:first-child { border-color: var(--cyan) }
.mv { font: 15px var(--mono); font-variant-numeric: tabular-nums }
.mv em, dd em { font-style: normal; color: var(--cyan) }
.mv s { text-decoration: none; color: var(--dim) }
.mt { font-size: 13px; color: var(--mute) }
.mc { font: 12px var(--mono); color: var(--dim) }

.cv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px }
.cv label { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); margin-bottom: 8px }
.tz { display: flex; align-items: center; gap: 6px; cursor: pointer }
.tz input { accent-color: var(--blue) }
.row { display: flex; gap: 8px }
.row input, .row select, .row button { height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 12, 32, .7); font: 14px var(--mono); outline: none; color-scheme: dark }
.row input { flex: 1; min-width: 0 }
.row input:focus, .row select:focus { border-color: rgba(127, 214, 255, .5) }
.row button { cursor: pointer; color: var(--cyan) }
.row button:hover { border-color: rgba(127, 214, 255, .5) }
dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin-top: 14px; font: 14px var(--mono); font-variant-numeric: tabular-nums }
dt { color: var(--cyan); text-align: right }
dd { overflow-wrap: anywhere }
.err { color: #ff9db0 }

footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 0 44px; color: var(--dim); font-size: 13px }
.npm { flex-shrink: 0; white-space: nowrap; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); background: rgba(4, 12, 32, .6); font: 13px var(--mono); color: var(--cyan); cursor: copy }
#toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); padding: 9px 16px; border-radius: 10px; background: rgba(10, 30, 80, .92); border: 1px solid rgba(127, 214, 255, .35); font: 13px var(--mono); box-shadow: 0 10px 40px rgba(0, 0, 0, .5) }

@media (max-width: 960px) {
  .units { grid-template-columns: repeat(6, minmax(0, 1fr)) }
  .unit { grid-column: span 2 }
  .unit:nth-child(n+4) { grid-column: span 3 }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .wide { grid-column: span 2 }
  #miles { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 620px) {
  .units { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 36px }
  .unit, .unit:nth-child(n+4) { grid-column: auto }
  .unit:last-child { grid-column: span 2 }
  .grid, .cv, #miles { grid-template-columns: minmax(0, 1fr) }
  .wide { grid-column: auto }
  .v { font-size: 16px }
  .map { margin: 22px -20px 0 }
  footer { flex-direction: column; align-items: flex-start }
}
@media (prefers-reduced-motion: reduce) { #sun::after { animation: none } .unit { transition: none } }