:root{
  --bg:#05070b; --panel:#0b0f15; --line:rgba(255,255,255,.11);
  --muted:rgba(230,236,243,.58); --text:#edf2f7; --accent:#8fffd7;
  --accent-2:#8eb8ff; --shadow:0 30px 100px rgba(0,0,0,.48);
  color-scheme:dark; font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{overflow-x:hidden}
a{color:inherit}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.07;z-index:20;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E")}
.ambient{position:fixed;width:42rem;height:42rem;border-radius:50%;filter:blur(80px);opacity:.11;pointer-events:none}
.ambient-a{top:-18rem;right:-15rem;background:#8fffd7}.ambient-b{bottom:-24rem;left:-20rem;background:#698dff}
.shell{width:min(1500px,calc(100% - 36px));margin:0 auto;padding:18px 0 30px}
.topbar,.footer{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:10px 2px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;letter-spacing:.09em;text-transform:lowercase}
.brand-mark{width:30px;height:30px;border:1px solid var(--line);display:grid;place-items:center;font:700 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.06em}
.status{display:flex;align-items:center;gap:9px;font:600 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.status-dot{width:7px;height:7px;border-radius:50%;background:#f0bf62;box-shadow:0 0 0 5px rgba(240,191,98,.07)}
.status[data-state="ready"] .status-dot{background:var(--accent);box-shadow:0 0 0 5px rgba(143,255,215,.07)}
.status[data-state="error"] .status-dot{background:#ff7878}
.hero{display:grid;grid-template-columns:1fr minmax(360px,48vw);align-items:end;min-height:320px;padding:75px 2px 52px;gap:30px}
.eyebrow,.metric-label,.caption-kicker{font:700 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-size:clamp(3.6rem,8vw,9.5rem);line-height:.83;letter-spacing:-.07em;margin:15px 0 13px;max-width:800px;font-weight:720}
.country-line{font-size:clamp(1rem,1.5vw,1.4rem);color:var(--muted);margin:0}
.clock-wrap{height:250px;position:relative;display:grid;place-items:center;min-width:320px}
.clock{position:relative;z-index:3;text-align:center}
.clock-time{font:500 clamp(4.2rem,7.7vw,8.6rem)/.86 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.09em;white-space:nowrap;text-shadow:0 0 50px rgba(143,255,215,.08)}
.clock-zone{margin-top:17px;font:700 11px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.2em;color:var(--muted)}
.clock-orbit{position:absolute;border:1px solid var(--line);border-radius:50%;transform:rotate(-18deg)}
.orbit-one{width:260px;height:150px}.orbit-two{width:350px;height:190px;opacity:.58;transform:rotate(21deg)}.orbit-three{width:470px;height:220px;opacity:.22;transform:rotate(-30deg)}
.map-stage{position:relative;height:min(67vh,670px);min-height:440px;overflow:hidden;border:1px solid var(--line);background:#070a10;box-shadow:var(--shadow)}
#map{position:absolute;inset:0}
.leaflet-container{background:#070a10;font:inherit}
.leaflet-control-zoom,.leaflet-control-attribution{display:none!important}
.leaflet-tile{filter:saturate(.35) brightness(.58) contrast(1.2)}
.map-vignette{position:absolute;inset:0;z-index:500;pointer-events:none;background:radial-gradient(circle at 50% 50%,transparent 35%,rgba(3,5,9,.32) 78%,rgba(3,5,9,.82) 100%),linear-gradient(90deg,rgba(4,7,12,.28),transparent 20%,transparent 80%,rgba(4,7,12,.28)}
.map-grid{position:absolute;inset:0;z-index:501;pointer-events:none;opacity:.32;background-image:linear-gradient(rgba(143,255,215,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(143,255,215,.055) 1px,transparent 1px);background-size:8.333% 100%,8.333% 100%}
.map-crosshair{position:absolute;z-index:502;left:50%;top:50%;width:90px;height:90px;transform:translate(-50%,-50%);pointer-events:none}
.map-crosshair i:first-child{position:absolute;left:50%;top:0;width:1px;height:100%;background:linear-gradient(transparent,var(--accent),transparent);opacity:.5}
.map-crosshair i:last-child{position:absolute;top:50%;left:0;height:1px;width:100%;background:linear-gradient(90deg,transparent,var(--accent),transparent);opacity:.5}
.map-caption{position:absolute;left:22px;bottom:18px;z-index:503;display:flex;flex-direction:column;gap:8px}
.map-caption #locationCaption{font:700 clamp(1rem,1.8vw,1.35rem)/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.02em}
.map-scale-label{position:absolute;right:22px;top:20px;z-index:503;font:700 10px/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.14em;color:var(--muted)}
.metrics{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr 1.15fr;gap:1px;background:var(--line);margin-top:1px}
.metric{min-height:150px;padding:22px;background:rgba(8,11,17,.94);display:flex;flex-direction:column;justify-content:space-between}
.metric strong{font-size:clamp(1.35rem,2vw,2.1rem);line-height:1.05;letter-spacing:-.04em;margin-top:18px}
.metric-sub{color:var(--muted);font:500 11px/1.35 ui-monospace,SFMono-Regular,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ip-value{font-family:ui-monospace,SFMono-Regular,monospace!important;letter-spacing:-.05em!important}
.footer{padding-top:18px;font:500 9px/1.5 ui-monospace,SFMono-Regular,monospace;letter-spacing:.07em;text-transform:uppercase;color:rgba(230,236,243,.4)}
.noscript{position:fixed;inset:20px;padding:24px;background:#111;color:#fff;z-index:1000}

@media (max-width:900px){
  .shell{width:min(100% - 22px,1500px)}
  .hero{grid-template-columns:1fr;min-height:auto;padding:55px 0 35px}
  .clock-wrap{height:220px;min-width:0}
  .orbit-three{width:360px}
  .map-stage{height:58vh;min-height:390px}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric-wide{grid-column:1/-1}
}
@media (max-width:600px){
  .topbar{align-items:flex-start}
  .status{max-width:150px;text-align:right;line-height:1.4}
  .hero h1{font-size:clamp(3.2rem,16vw,6rem)}
  .clock-time{font-size:clamp(3rem,14vw,5.8rem)}
  .clock-wrap{height:170px}
  .orbit-one{width:220px;height:125px}.orbit-two{width:280px;height:160px}.orbit-three{width:340px;height:180px}
  .map-stage{min-height:330px;height:52vh}
  .metrics{grid-template-columns:1fr}
  .metric-wide{grid-column:auto}
  .metric{min-height:125px}
  .footer{align-items:flex-start;flex-direction:column;gap:6px}
}