/* Earth system visual preview. All assets are local. */
:root { --text: #e9f4f5; --muted: #91aab8; --cyan: #8de0dc; --teal: #75d5ac; --violet: #91aec5; --line: rgba(151,209,223,.14); }
.container { max-width: 1240px; padding-left: 32px; padding-right: 32px; }
body { background: #06121c; }
header { background: linear-gradient(#06121ce0, #06121c00); }
.logo { font-size: .98rem; }
.logo-mark { width: 23px; height: 23px; background: conic-gradient(from 210deg, #93e7db, #3c807f, #8eddd7); box-shadow: 0 0 18px -2px #61d0be44; }
nav { height: 78px; }
.hero { min-height: min(880px, 100svh); padding: 130px 0 100px; background: radial-gradient(ellipse at 76% 44%, #14383c55, transparent 48%), linear-gradient(165deg, #06121c, #0a1924 65%, #06121c); }
.hero::before { display: none; }
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent,#06121c); pointer-events: none; }
.hero-stars { position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(1px 1px at 12% 20%, #cee8e3 90%,transparent), radial-gradient(1px 1px at 64% 12%, #cee8e3 90%,transparent), radial-gradient(1px 1px at 90% 66%, #cee8e3 90%,transparent), radial-gradient(1px 1px at 45% 57%, #cee8e3 90%,transparent), radial-gradient(1px 1px at 18% 80%, #cee8e3 90%,transparent), radial-gradient(1px 1px at 88% 28%, #cee8e3 90%,transparent); background-size: 431px 379px; pointer-events: none; }
.hero-inner { display: grid; grid-template-columns: .98fr 1.02fr; gap: 20px; align-items: center; }
.hero-copy { padding-bottom: 18px; }
.eyebrow { font-size: .67rem; letter-spacing: .12em; border: 0; background: transparent; padding: 0; margin-bottom: 30px; color: #a3c3ca; }
.dot { width: 5px; height: 5px; }
.hero h1 { font-size: clamp(2.6rem, 4.9vw, 4.3rem); line-height: 1.22; letter-spacing: -.045em; margin-bottom: 24px; font-weight: 750; }
.grad { background: linear-gradient(105deg, #d1f1e9, #7ecfc4 72%, #96c9db); -webkit-background-clip: text; background-clip: text; animation: none; }
.hero p.lead { font-size: 1rem; line-height: 1.95; max-width: 470px; margin-bottom: 30px; }
.btn { font-size: .86rem; padding: .76rem 1.22rem; border-radius: 7px; }
.btn-primary { background: #a6e1d1; box-shadow: 0 8px 28px -18px #8de0dc88; }
.btn-ghost { background: transparent; }
.hero-topics { display: flex; gap: 22px; margin-top: 42px; color: #7e98a6; font-size: .76rem; }
.hero-topics span { display: flex; gap: 8px; align-items: center; }
.hero-topics span::before { content: ''; width: 3px; height: 3px; background: #689c9d; border-radius: 50%; }
.earth-scene { position: relative; margin: 0; min-width: 0; }
#earth { width: 100%; aspect-ratio: 1; display: block; }
.scene-top { display: flex; align-items: center; gap: 8px; font-size: .58rem; letter-spacing: .15em; color: #7fa5ac; padding: 0 14px; }
.live-dot { width: 4px; height: 4px; background: #8de0dc; border-radius: 50%; box-shadow: 0 0 8px #8de0dc88; }
.scene-index { margin-left: auto; font-size: .54rem; color: #4d6e79; letter-spacing: .1em; }
.scene-bottom { border-top: 1px solid #8de0dc20; display: flex; justify-content: space-between; gap: 12px; padding: 15px 14px 0; margin: -10px 14px 0; color: #76939d; font-size: .65rem; }
#motion-toggle { background: transparent; border: 0; color: #a0bec5; font: inherit; cursor: pointer; padding: 0; min-height: 24px; }
#motion-toggle span { margin-left: 8px; }
#motion-toggle:hover { color: #ddf8ee; }
#motion-toggle:focus-visible { outline: 1px solid #8de0dc; outline-offset: 6px; border-radius: 2px; }
.scene-label { position: absolute; font-size: .66rem; color: #aacbd1; pointer-events: none; }
.scene-label small { display: block; color: #50747e; font-size: .48rem; letter-spacing: .12em; margin-top: 2px; }
.scene-label i { position: absolute; height: 1px; width: 35px; background: #79b6be55; }
.label-atmosphere { right: 1%; top: 33%; }
.label-atmosphere i { right: calc(100% + 10px); top: 9px; transform: rotate(-25deg); transform-origin: right center; }
.label-satellite { left: 0; bottom: 25%; }
.label-satellite i { left: calc(100% + 10px); top: 9px; transform: rotate(-25deg); transform-origin: left center; }
.scroll-hint { bottom: 24px; font-size: .6rem; color: #638894; }
.scroll-hint span { writing-mode: initial; letter-spacing: .18em; }
.scroll-hint i { height: 26px; background: linear-gradient(transparent,#75bdb4); }
section { padding: 92px 0; }
.sec-head h2 { font-weight: 650; }
.about-wrap { grid-template-columns: 1fr 1.02fr; gap: 54px; }
.about-card { background: transparent; border: 0; border-radius: 0; padding: 0; }
.about-card p { font-size: .96rem; line-height: 1.95; }
.about-card strong { color: #c7dfe0; font-weight: 500; }
.radiation-panel { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(145deg,#11283166,#07172066); margin: 0; padding: 25px 26px 20px; }
.diagram-heading .sec-label { font-size: .62rem; margin-bottom: 6px; }
.diagram-heading h3 { margin: 0; font-size: 1.07rem; font-weight: 500; }
.radiation-svg { display: block; width: 100%; overflow: visible; margin: 10px 0 0; }
.diagram-label { fill: #c4d8dc; font: 14px system-ui, sans-serif; }
.diagram-sub { fill: #6e929e; font: 11px system-ui, sans-serif; }
.layer-label { fill: #6a9aa7; font: 13px system-ui, sans-serif; }
.sw-text { fill: #eac889; }
.lw-text { fill: #e69a86; }
.radiation-ray { fill: none; stroke-width: 2; stroke-dasharray: 7 6; stroke-linecap: round; animation: radiation-flow 3s linear infinite; }
.sw { stroke: #f5cb78; }
.lw { stroke: #f28b72; animation-duration: 3.8s; }
.reflected { opacity: .75; }
@keyframes radiation-flow { to { stroke-dashoffset: -52; } }
.diagram-cloud { animation: cloud-drift 8s ease-in-out infinite alternate; }
@keyframes cloud-drift { to { transform: translateX(5px); } }
.radiation-panel figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; font-size: .65rem; color: #8eabb4; border-top: 1px solid var(--line); padding-top: 13px; }
.radiation-panel figcaption span { display: inline-flex; align-items: center; gap: 6px; }
.radiation-panel figcaption i { width: 12px; height: 2px; }
.legend-sw { background: #f5cb78; }
.legend-lw { background: #f28b72; }
.diagram-note { margin-left: auto; color: #577580; font-size: .6rem; }
.radiation-panel.motion-off *, .radiation-panel.motion-off { animation-play-state: paused !important; }
.card { border-radius: 12px; background: #10212b66; padding: 26px; }
.card:hover { background: #152c3577; }
.card-icon { border-radius: 9px; background: #79c9bd12; }
.alt { background: linear-gradient(180deg,transparent,#112b3450,transparent); }
@media (min-width: 1450px) { .hero { min-height: 840px; } }
@media (max-width: 1050px) { .hero h1 { font-size: 3.1rem; } .hero-inner { gap: 0; grid-template-columns: 1fr 1fr; } .hero p.lead { font-size: .92rem; } .label-atmosphere { right: -3%; } .about-wrap { gap: 28px; } }
@media (max-width: 760px) {
  .container { padding-left: 22px; padding-right: 22px; }
  nav { height: 66px; }
  .hero { min-height: auto; padding: 112px 0 55px; }
  .hero-inner { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy { padding-bottom: 0; }
  .hero h1 { font-size: clamp(2.5rem,9vw,3.7rem); }
  .hero p.lead { max-width: 540px; }
  .eyebrow { font-size: .59rem; margin-bottom: 20px; }
  .hero-topics { margin-top: 26px; gap: 20px; }
  .earth-scene { max-width: 470px; width: 100%; margin: 0 auto; }
  .scene-top { font-size: .5rem; }
  .label-atmosphere { right: 0; }
  .scroll-hint { display: none; }
  .about-wrap { grid-template-columns: 1fr; gap: 32px; }
  section { padding: 65px 0; }
  .radiation-panel { padding: 23px 20px 18px; max-width: 550px; width: 100%; margin: 0 auto; }
}
@media (max-width: 390px) { nav a { font-size: .78rem; padding-left: 7px; padding-right: 7px; } .scene-index { font-size: .44rem; } .diagram-note { margin-left: 0; } }
@media (prefers-reduced-motion: reduce) { .radiation-ray, .diagram-cloud { animation: none; } }
.card.about-card { padding: 0; background: transparent; border: 0; }