*{box-sizing:border-box}
:root{--bg:#07111a;--panel:#0d1b27;--panel2:#132735;--line:rgba(255,255,255,.11);--text:#f5f8fb;--muted:#9eacb8;--orange:#ff9d21;--gold:#ffc35c;--blue:#5ab6ff}
html{background:var(--bg)}body{margin:0;min-height:100vh;color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 72% 5%,#25465f 0,#0d1a26 34%,#07111a 72%)}
button,select,input{font:inherit}button{cursor:pointer}.hidden{display:none!important}
.site-header,main,.site-footer{width:min(1180px,calc(100% - 30px));margin:auto}.site-header{height:72px;display:flex;align-items:center;justify-content:space-between}.brand{color:white;text-decoration:none;display:flex;align-items:center;gap:10px}.brand-symbol{width:39px;height:39px;border:1px solid rgba(255,255,255,.2);display:grid;place-items:center;border-radius:12px}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.2em;text-transform:uppercase}.header-actions{display:flex;gap:12px;align-items:center}.embed-link{color:#dce7ef;text-decoration:none;font-size:13px}
.button{border:0;border-radius:9px;padding:11px 15px;font-weight:750}.primary{background:linear-gradient(135deg,var(--gold),var(--orange));color:#241407}.secondary,.ghost{background:rgba(255,255,255,.07);border:1px solid var(--line);color:white}.full{width:100%}
.intro{padding:46px 0 30px;display:grid;grid-template-columns:1.35fr .65fr;gap:35px;align-items:end}.eyebrow{margin:0 0 8px;color:var(--gold);font-size:11px;font-weight:800;letter-spacing:.19em;text-transform:uppercase}.intro h1{font-size:clamp(46px,7vw,82px);line-height:.95;letter-spacing:-.055em;margin:0}.intro h1 em{font-style:normal;color:var(--gold)}.intro>div>p:last-child{color:var(--muted);font-size:17px;line-height:1.6;max-width:700px}.countdown-card,.safety,.media-pitch{border:1px solid var(--line);background:rgba(255,255,255,.045);border-radius:21px;box-shadow:0 25px 70px rgba(0,0,0,.28)}.countdown-card{padding:23px}.countdown-card span,.countdown-card small{display:block;color:var(--muted)}.countdown-card strong{display:block;font-size:30px;margin:6px 0}
.astro-app{border:1px solid rgba(255,255,255,.14);border-radius:17px;overflow:hidden;background:#0b1721;box-shadow:0 35px 95px rgba(0,0,0,.46)}.app-topbar{height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 19px;background:linear-gradient(90deg,#142b39,#101f2a);border-bottom:1px solid rgba(255,255,255,.08)}.app-brand{display:flex;gap:9px;align-items:center;color:#cae9ff}.app-top-actions{display:flex;gap:9px}.app-top-actions button,.app-top-actions a{width:29px;height:29px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.2);border-radius:50%;background:transparent;color:white;text-decoration:none;font-weight:800}
.app-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:17px 20px 13px}.app-heading p{margin:0 0 4px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.14em}.app-heading h2{margin:0;font-size:25px}.mode-tabs{display:flex;padding:4px;background:#08131b;border-radius:10px}.mode-tabs button{border:0;background:transparent;color:#9eacb8;padding:9px 12px;border-radius:7px;font-size:12px;font-weight:750}.mode-tabs button.active{background:#213745;color:white;box-shadow:inset 0 1px rgba(255,255,255,.07)}
.location-bar{display:grid;grid-template-columns:1fr 1.25fr auto;gap:10px;padding:0 20px 16px}.location-bar label{font-size:10px;color:#dce6ed}.location-bar select{display:block;width:100%;margin-top:6px;padding:10px 11px;border-radius:8px;border:1px solid var(--line);background:#192c39;color:white}.location-bar .button{align-self:end}
.main-grid{display:grid;grid-template-columns:365px minmax(0,1fr);border-top:1px solid rgba(255,255,255,.07)}.data-panel{padding:17px 19px 19px;background:linear-gradient(180deg,#122632,#0a1720);border-right:1px solid rgba(255,255,255,.08)}.data-section{margin-bottom:19px}.section-label{margin:0 0 10px;color:#bfccd5;font-size:11px;text-transform:uppercase;letter-spacing:.12em}.metric-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px}.metric-grid article,.perseids-facts article{padding:12px;border-radius:11px;background:linear-gradient(145deg,#1a303e,#132631);border:1px solid rgba(255,255,255,.09)}.metric-grid small,.perseids-facts small{display:block;color:#a5b3bc;font-size:10px}.metric-grid strong{font-size:23px}.accent-metric strong{color:var(--gold)}.magnitude-row{margin-top:9px;padding:10px 12px;border-radius:9px;background:rgba(255,157,33,.09);display:flex;justify-content:space-between;color:#d5dee5;font-size:11px}.magnitude-row b{color:#ffd18d}
.perseids-score{display:grid;grid-template-columns:88px 1fr;gap:13px;align-items:center;padding:12px;border-radius:12px;background:rgba(84,168,255,.07);border:1px solid rgba(90,182,255,.18)}.score-ring{width:76px;height:76px;border-radius:50%;display:grid;place-content:center;text-align:center;background:conic-gradient(var(--blue) 0 78%,#29404e 78% 100%);position:relative}.score-ring:before{content:"";position:absolute;inset:8px;border-radius:50%;background:#10212c}.score-ring strong,.score-ring small{position:relative}.score-ring strong{font-size:16px}.score-ring small{font-size:8px;color:#aebbc4}.perseids-score span{display:block;color:#a8b6bf;font-size:10px}.perseids-score b{display:block;font-size:20px;margin:3px 0}.perseids-score>div:last-child small{color:#8fa0ab;line-height:1.35}.perseids-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:9px}.perseids-facts strong{font-size:13px;display:block;margin-top:3px}.meteor-button{width:100%;margin-top:10px;padding:11px;border:1px solid rgba(90,182,255,.22);border-radius:9px;background:#172f40;color:#dcedf9;font-weight:750}.meteor-count{text-align:center;color:#93a4af;font-size:11px;margin:8px 0 0}.meteor-count strong{color:white}
.scene-panel{padding:0 17px 15px}.scene-header{height:58px;display:flex;align-items:center;justify-content:space-between}.scene-header small{display:block;color:#92a3ae;font-size:9px;text-transform:uppercase;letter-spacing:.12em}.scene-header strong{font-size:17px}.scene-header>span{font-size:11px;color:#ffc26a}.scene{height:405px;position:relative;overflow:hidden;border-radius:11px;background:linear-gradient(180deg,#102038 0,#2e4355 34%,#8e5235 65%,#ef852e 84%,#ffca75 100%);isolation:isolate;transition:background 1s}.scene.night{background:linear-gradient(180deg,#020712 0,#071323 47%,#10233b 100%)}.stars{position:absolute;inset:0;opacity:0;transition:opacity .8s;z-index:1;background-image:radial-gradient(circle,#fff 1px,transparent 1.4px),radial-gradient(circle,#a9d7ff 1px,transparent 1.5px);background-size:51px 51px,87px 87px;background-position:6px 12px,24px 31px}.scene.night .stars{opacity:.84}.glow{position:absolute;inset:0;background:radial-gradient(ellipse at 63% 72%,rgba(255,200,114,.42),transparent 34%);z-index:1;transition:opacity .8s}.scene.night .glow{opacity:0}.cloud{position:absolute;height:25px;border-radius:50%;background:rgba(30,30,34,.47);filter:blur(6px);z-index:2;box-shadow:43px 8px 0 rgba(31,31,35,.43),83px -3px 0 rgba(31,31,35,.38)}.c1{width:145px;right:20%;top:48px}.c2{width:95px;left:34%;top:122px;opacity:.55}.scene.night .cloud{opacity:.18}
.sun{width:126px;height:126px;position:absolute;left:64%;top:205px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 38% 34%,#fffbd0,#ffe374 42%,#ffb53c 76%,#e67520);box-shadow:0 0 28px #ffd06a,0 0 90px rgba(255,150,42,.72);z-index:4;transition:top .15s,opacity .7s}.moon{position:absolute;width:126px;height:126px;left:-10px;top:0;border-radius:50%;background:radial-gradient(circle at 75% 38%,#17222d,#05090d 76%);transition:left .12s}.scene.night .sun{opacity:0}.radiant{position:absolute;left:64%;top:30%;z-index:5;opacity:0;transition:opacity .8s,top .4s}.scene.night .radiant{opacity:1}.radiant i{display:block;width:16px;height:16px;border-radius:50%;background:#cdeaff;box-shadow:0 0 17px #83c7ff}.radiant b,.radiant small{display:block;margin-left:22px;white-space:nowrap}.radiant b{margin-top:-20px;font-size:12px}.radiant small{color:#9cccf2;font-size:10px}.meteor{position:absolute;width:150px;height:2px;background:linear-gradient(90deg,transparent,#fff);transform:rotate(-28deg);z-index:4;opacity:0}.scene.night .meteor-one{animation:shoot 4.8s infinite 1s}.scene.night .meteor-two{animation:shoot2 7s infinite 3.4s}@keyframes shoot{0%,78%{opacity:0;left:75%;top:10%}80%{opacity:1}91%{opacity:0;left:25%;top:48%}100%{opacity:0}}@keyframes shoot2{0%,83%{opacity:0;left:55%;top:4%}85%{opacity:1}94%{opacity:0;left:10%;top:34%}100%{opacity:0}}
.sea{position:absolute;left:0;right:0;bottom:0;height:72px;background:linear-gradient(#223746,#07141e);z-index:6}.scene.night .sea{background:linear-gradient(#0b1c2e,#030910)}.horizon{position:absolute;left:0;right:0;bottom:71px;height:1px;background:rgba(255,205,137,.6);z-index:8}.land{position:absolute;left:58%;right:-3%;bottom:0;height:78px;background:#040a0f;z-index:8;clip-path:polygon(0 75%,13% 58%,25% 67%,38% 43%,51% 64%,65% 36%,79% 54%,100% 31%,100% 100%,0 100%)}
.altitude-scale{position:absolute;right:15px;top:18px;bottom:68px;width:55px;border-left:1px solid rgba(255,255,255,.48);z-index:9}.altitude-scale>b{position:absolute;right:0;top:-14px;font-size:9px;color:#c8d0d5}.altitude-scale span{position:absolute;left:8px;font-size:10px;color:#d6dde1}.altitude-marker{position:absolute;left:0;right:15px;bottom:94px;border-top:2px dashed rgba(255,151,28,.78);z-index:8}.altitude-marker i{position:absolute;right:48px;top:-6px;width:11px;height:11px;border-radius:50%;background:var(--orange)}.altitude-marker b{position:absolute;right:5px;top:-9px;color:#ff9d21;font-size:11px}.scene.night .altitude-scale,.scene.night .altitude-marker{opacity:0}.scene-readout{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:10;padding:8px 13px;border-radius:8px;background:rgba(3,8,13,.7);border:1px solid rgba(255,255,255,.13);font-size:13px;font-weight:750;white-space:nowrap}.west-label{position:absolute;left:14px;bottom:17px;z-index:10;font-size:9px;letter-spacing:.14em;color:#bfc9cf}
.scene-panel input{width:100%;margin-top:12px;accent-color:var(--orange)}.timeline-labels,.timeline-now{display:flex;justify-content:space-between;align-items:center}.timeline-labels{font-size:9px;color:#7f919d;margin-top:2px}.timeline-now{margin-top:6px}.timeline-now strong{font-size:20px}.timeline-now span{font-size:11px;color:#9cabB5}
.weather-strip{display:grid;grid-template-columns:1.6fr repeat(3,.7fr) auto;gap:8px;padding:12px 19px;border-top:1px solid rgba(255,255,255,.08);background:#0c1a24}.weather-strip>div{padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.035)}.weather-strip small{display:block;color:#8699a5;font-size:9px}.weather-strip strong{font-size:12px}.app-footer{display:flex;justify-content:space-between;padding:10px 19px;color:#7f919d;font-size:9px;border-top:1px solid rgba(255,255,255,.06)}
.safety{display:grid;grid-template-columns:66px 1fr;gap:20px;align-items:center;padding:24px;margin-top:20px}.safety>span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--gold);color:#251706;font-size:29px}.safety h2{margin:0}.safety p:last-child{color:var(--muted);line-height:1.55}.media-pitch{text-align:center;padding:48px 20px;margin:42px 0}.media-pitch>p{color:var(--gold);font-size:11px;text-transform:uppercase;letter-spacing:.16em;font-weight:800}.media-pitch h2{font-size:clamp(27px,5vw,48px);max-width:800px;margin:10px auto 25px}.media-pitch a{text-decoration:none;display:inline-block}.site-footer{padding:28px 0;color:#8fa0aa;border-top:1px solid var(--line);font-size:12px}
.modal{position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:15px;background:rgba(2,7,12,.9)}.modal>div{width:min(500px,100%);padding:15px;border-radius:19px;background:#0e1d28;position:relative}.modal>div>button{position:absolute;right:20px;top:20px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.62);color:white;font-size:24px}.modal img{display:block;width:100%;border-radius:11px}.modal section{display:flex;gap:9px;margin-top:11px}.modal section button{flex:1}.info-box{padding:32px!important}.info-box p{color:var(--muted);line-height:1.6}#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);padding:11px 16px;border-radius:9px;background:white;color:#111;opacity:0;transition:.2s;z-index:40}#toast.show{opacity:1}
body.embed-mode{background:#0b1721}body.embed-mode .site-header,body.embed-mode .intro,body.embed-mode .safety,body.embed-mode .media-pitch,body.embed-mode>.site-footer{display:none}body.embed-mode main{width:100%;max-width:none}body.embed-mode .astro-app{border:0;border-radius:0;box-shadow:none;min-height:100vh}
@media(max-width:900px){.main-grid{grid-template-columns:330px minmax(0,1fr)}.weather-strip{grid-template-columns:1.3fr repeat(3,.7fr)}.weather-strip button{grid-column:1/-1}}
@media(max-width:720px){.site-header,main,.site-footer{width:min(100% - 18px,1180px)}.intro{grid-template-columns:1fr}.app-heading{display:block}.mode-tabs{margin-top:12px;width:100%;overflow:auto}.mode-tabs button{flex:1;white-space:nowrap}.location-bar{grid-template-columns:1fr 1fr}.location-bar button{grid-column:1/-1}.main-grid{grid-template-columns:1fr}.data-panel{border-right:0;border-bottom:1px solid rgba(255,255,255,.08)}.scene{height:330px}.weather-strip{grid-template-columns:1fr 1fr}.weather-strip>div:first-child{grid-column:1/-1}.app-footer{gap:10px;flex-direction:column}.safety{grid-template-columns:1fr}}
@media(max-width:460px){.app-heading{padding:14px}.app-heading h2{font-size:21px}.location-bar{padding:0 14px 14px}.main-grid{border-top:1px solid rgba(255,255,255,.08)}.data-panel{padding:14px}.scene-panel{padding:0 9px 12px}.metric-grid{grid-template-columns:1fr 1fr}.perseids-facts{grid-template-columns:1fr}.scene{height:280px}.sun,.moon{width:96px;height:96px}.weather-strip{padding:10px}.timeline-labels span:nth-child(2),.timeline-labels span:nth-child(4){display:none}}


/* ===== v5.2 readability + sea horizon refinements ===== */
.location-bar label{
  font-size: 13px !important;
  font-weight: 700;
  color:#eef5fb !important;
}
.location-bar select{
  font-size: 19px !important;
  font-weight: 700;
  padding: 13px 14px !important;
  min-height: 52px;
}
.location-bar .button{
  min-height: 52px;
  font-size: 18px;
}

.scene-header small{
  font-size: 12px !important;
}
.scene-header strong{
  font-size: 28px !important;
}
.scene-header>span{
  font-size: 14px !important;
}

.timeline-now strong{
  font-size: 42px !important;
  line-height: 1;
  letter-spacing: -0.02em;
}
.timeline-now span{
  font-size: 15px !important;
}

.metric-grid article small,
.perseids-facts article small,
.magnitude-row span,
.perseids-score span{
  font-size: 13px !important;
}
.metric-grid article strong,
.perseids-facts article strong{
  font-size: 30px !important;
}
.magnitude-row b{
  font-size: 24px !important;
}
.meteor-count{
  font-size: 18px !important;
}
.meteor-count strong{
  font-size: 28px !important;
}

.section-label{
  font-size: 14px !important;
  font-weight: 800;
}

.altitude-scale b{
  font-size: 11px !important;
}
.altitude-scale span{
  font-size: 12px !important;
}
.scene-readout{
  font-size: 18px !important;
  padding: 11px 16px !important;
}
.west-label{
  font-size: 12px !important;
}

.scene{
  background:
    linear-gradient(180deg,#0d1f38 0%,#233d58 28%,#5d5f67 52%,#f08a33 72%,#ffcc79 85%,#f8d79c 100%) !important;
}
.scene:before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(ellipse at 62% 72%, rgba(255,198,108,.38), transparent 33%),
    linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,172,87,.08) 55%, rgba(15,50,73,.04) 100%);
  z-index:0;
}
.sea{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:108px !important;
  background:
    linear-gradient(180deg, #2b5979 0%, #17334b 38%, #0a1d2b 100%) !important;
  z-index:6;
}
.sea:before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:6px;
  height:2px;
  background:rgba(255,223,167,.80);
  box-shadow:
    0 10px 0 rgba(255,223,167,.18),
    0 18px 0 rgba(255,223,167,.10),
    0 28px 0 rgba(255,223,167,.07);
}
.sea:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:18px;
  bottom:0;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,.06) 0 2px,
      rgba(255,255,255,0) 2px 12px
    );
  opacity:.22;
}
.horizon{
  bottom:107px !important;
  height:2px !important;
  background:rgba(255,219,158,.75) !important;
  box-shadow:0 0 18px rgba(255,182,84,.18);
}
.land{
  height:92px !important;
  background:#04090f !important;
  opacity:.96;
}

@media(max-width:720px){
  .location-bar label{
    font-size: 12px !important;
  }
  .location-bar select{
    font-size: 17px !important;
    min-height: 48px;
  }
  .location-bar .button{
    font-size: 16px;
    min-height: 48px;
  }
  .scene-header strong{
    font-size: 24px !important;
  }
  .timeline-now strong{
    font-size: 34px !important;
  }
  .metric-grid article strong,
  .perseids-facts article strong{
    font-size: 26px !important;
  }
  .sea{
    height:96px !important;
  }
  .horizon{
    bottom:95px !important;
  }
}

@media(max-width:460px){
  .location-bar select{
    font-size: 16px !important;
  }
  .timeline-now strong{
    font-size: 30px !important;
  }
  .scene-readout{
    font-size: 15px !important;
  }
}


/* ===== v5.3 eclipse recentered ===== */
.sun{
  left: 56% !important;
}
@media(max-width:720px){
  .sun{
    left: 58% !important;
  }
}
@media(max-width:460px){
  .sun{
    left: 57% !important;
  }
}


/* ===== v5.4 perseids mini-cards refinement ===== */
.perseids-facts{
  gap: 8px !important;
}
.perseids-facts article{
  padding: 10px 11px !important;
  min-height: 74px !important;
  align-content: start;
}
.perseids-facts article small{
  font-size: 11px !important;
  line-height: 1.1;
  margin-bottom: 6px;
}
.perseids-facts article strong{
  font-size: 18px !important;
  line-height: 1.08 !important;
  font-weight: 800;
  word-break: keep-all;
  overflow-wrap: break-word;
}
@media(max-width:720px){
  .perseids-facts article{
    min-height: 70px !important;
  }
  .perseids-facts article strong{
    font-size: 17px !important;
  }
}
@media(max-width:460px){
  .perseids-facts article{
    min-height: auto !important;
  }
  .perseids-facts article strong{
    font-size: 16px !important;
  }
}


/* ===== v5.5 smoother transition glow for Perseids ===== */
.glow{
  transition: opacity .8s, background .8s, transform .8s !important;
}
.scene.night .glow{
  opacity: 1 !important;
  background:
    radial-gradient(ellipse at 63% 96%, rgba(255,171,77,.24), transparent 34%),
    radial-gradient(ellipse at 55% 100%, rgba(93,137,255,.10), transparent 42%),
    linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,167,88,.03) 70%, rgba(255,142,66,.08) 100%) !important;
  transform: translateY(10px);
}
.scene.night .sun{
  opacity: 0 !important;
}
.scene.night .horizon{
  background: rgba(182,205,255,.28) !important;
  box-shadow: 0 0 20px rgba(110,155,255,.10);
}
.scene.night .sea:before{
  background: rgba(173,197,255,.25) !important;
  box-shadow:
    0 10px 0 rgba(173,197,255,.09),
    0 18px 0 rgba(173,197,255,.05),
    0 28px 0 rgba(173,197,255,.03) !important;
}