:root{
  --bg:#0f1720;
  --card:#0b1220;
  --muted:#98a0ad;
  --accent:#6ee7b7; /* soft green */
  --danger:#ff6b6b;
  --glass: rgba(255,255,255,0.03);
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
  --sans: Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:var(--sans);
  background:linear-gradient(180deg, #07101a 0%, var(--bg) 100%);
  color:#e6eef6;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:2rem;
}

.container{max-width:980px;margin:0 auto}

.site-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
  margin-bottom:1.25rem;
}
.brand h1{
  margin:0;
  font-size:1.6rem;
  letter-spacing:0.2px;
}
.subtitle{
  margin:0.25rem 0 0;
  color:var(--muted);
  font-size:0.95rem;
}
.meta small{color:var(--muted)}

.status-section{margin-bottom:2rem}

.status-card{
  display:flex;
  gap:1.25rem;
  align-items:center;
  background:linear-gradient(180deg, rgba(255,255,255,0.01), var(--glass));
  border-radius:12px;
  padding:1rem;
  box-shadow:0 6px 20px rgba(0,0,0,0.5);
  border:1px solid rgba(255,255,255,0.02);
}

.indicator{width:220px;display:flex;align-items:center;justify-content:center}
.indicator-circle{
  width:180px;height:180px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow: inset 0 -6px 18px rgba(0,0,0,0.45), 0 10px 30px rgba(3,6,10,0.7);
  transition: background 300ms ease, transform 180ms ease;
  position:relative;
}
.status-text{
  font-family:var(--mono);
  font-size:1.8rem;
  color:#e6eef6;
  text-shadow:0 1px 2px rgba(0,0,0,0.35);
}
.status-sub{
  color:var(--muted);
  margin:0.35rem 0 0;
  padding:0;
  list-style:none;
}
.status-sub li{margin:0.15rem 0}

.status-info{flex:1}
.status-controls{margin-top:0.6rem;display:flex;gap:0.5rem;align-items:center}
.btn{
  background:transparent;color:var(--accent);
  border:1px solid rgba(110,231,183,0.12);
  padding:0.5rem 0.9rem;border-radius:8px;
  cursor:pointer;font-weight:600;
}
.btn:hover{background:rgba(110,231,183,0.03)}
.btn.outline{color:var(--muted);border:1px dashed rgba(255,255,255,0.03)}
.btn:focus-visible{
  outline:2px solid rgba(110,231,183,0.6);
  outline-offset:2px;
}

.notes{margin-top:0.6rem;color:var(--muted);font-size:0.95rem}

.how-section{margin-top:2rem;padding:1rem;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.01), transparent);border:1px solid rgba(255,255,255,0.02)}
.how-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}
.how-card{background:transparent;padding:1rem;border-radius:8px;border:1px solid rgba(255,255,255,0.02)}
.how-card.full{grid-column:1/-1}
.how-card h3{margin-top:0}
.photon-visual{margin-top:0.8rem;padding:0.6rem;background:linear-gradient(90deg, rgba(255,255,255,0.01), transparent);border-radius:10px}
svg{width:100%;height:120px;display:block}

.sun-core{fill:#ffcf6b;filter:url(#glow)}
.sun-halo{fill:rgba(255,200,80,0.08)}
.earth-core{fill:#5db0ff;stroke:rgba(255,255,255,0.03);stroke-width:1}
.earth{
  transition: opacity 600ms ease, filter 600ms ease;
  opacity:1;
}
.earth.irradiated .earth-core{fill:#f59e0b}
.earth.dissolving{opacity:0;filter:blur(1px)}
.label{font-size:14.4px;fill:var(--muted);text-anchor:middle}

.orbit-line{stroke:rgba(255,255,255,0.03);stroke-width:1;stroke-dasharray:2 6}
.photon{fill:rgba(110,231,183,0.18);stroke:rgba(110,231,183,0.7);stroke-width:1;filter:url(#glow)}
.photon-core{fill:var(--accent)}
.radiation{fill:rgba(251,146,60,0.18);stroke:rgba(251,146,60,0.7);stroke-width:1;filter:url(#glow)}
.radiation-core{fill:#fb923c}
.matter{fill:rgba(167,139,250,0.18);stroke:rgba(167,139,250,0.7);stroke-width:1;filter:url(#glow)}
.matter-core{fill:#a78bfa}

.timeline{margin-top:1rem;background:rgba(255,255,255,0.02);padding:0.6rem;border-radius:8px}
.timeline-row{display:flex;justify-content:space-between;color:var(--muted);padding:0.25rem 0}

.extras{margin-top:1.5rem;color:var(--muted)}
.whimsy{color:var(--muted)}
.log{list-style:none;padding:0;margin:0.5rem 0 0}
.log li{padding:0.25rem 0;color:var(--muted)}

.site-footer{margin-top:2.5rem;color:var(--muted);text-align:center;font-size:0.9rem}

.visually-hidden{
  position:absolute!important;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;border:0;padding:0;margin:-1px;
}

/* Safe / exploded states */
.indicator.safe .indicator-circle{background:linear-gradient(180deg,#bff8de,#6ee7b7)}
.indicator.exploded .indicator-circle{background:linear-gradient(180deg,#ffd2d2,#ff6b6b);transform:scale(1.02)}
.status-text.safe{color:#dcfce7}
.status-text.exploded{color:#ffe4e6}

/* subtle responsive */
@media (max-width:820px){
  .how-grid{grid-template-columns:1fr}
  .indicator{width:140px}
  .indicator-circle{width:130px;height:130px}
}

@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}