/* Kerstappen / Observatory. Home-only enhancement over the live solar renderer. */
:root { --muted:#a3afc2; --soft:#ccd7e5; }
body { background:#010205; }
.space-scene { background:#010205; }
.real-starfield {
  background:#010205 url('/assets/cosmos/sparse-deep-desktop.svg?v=20261010-sparse-1') center / cover no-repeat;
  inset:0; opacity:1;
  /* Tiny vector points, not photographic blooms. No blur or contrast boost. */
  filter:none;
  animation:none; will-change:auto;
}
.starfield-veil {
  background:linear-gradient(180deg,#00010308,#00010300 35%,#0001031f);
}
.space-scene:after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at 25% 35%,transparent 15%,#00010330 85%);
}
.nebula { display:none; }
.deep-grid { display:none; }
#star-particles { opacity:.30; }
.topbar { min-height:86px; padding:calc(17px + var(--safe-top)) clamp(24px,4vw,70px) 17px; border-bottom:1px solid #b7cdf00c; background:linear-gradient(180deg,#040814dd,#04081499); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
.brand { gap:12px; }
.brand-mark { width:33px; height:33px; opacity:.85; }
.brand-copy strong { font-family:Inter,"Segoe UI",sans-serif; font-weight:600; font-size:17px; letter-spacing:.02em; }
.brand-copy small { font-size:8px; letter-spacing:.25em; color:#93a6bf; margin-top:5px; }
.scene-status { border:0; background:none; color:#99abc1; padding:0 12px 0 0; font-size:10px; }
.scene-status i { width:4px; height:4px; }
.meteor-toggle { display:flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:1px solid #a9c7f12e; border-radius:30px; color:#bacce4; background:#c1daff08; font-size:10px; cursor:pointer; transition:background .2s,border-color .2s; }
.meteor-toggle[hidden] { display:none; }
.meteor-toggle>span:first-child { font-size:18px; color:#c6defc; }
.meteor-toggle:hover { background:#aacfff16; border-color:#a9c7f163; }
.meteor-toggle[aria-pressed=false] { color:#91a0b5; }
.meteor-toggle:disabled { cursor:default; opacity:.65; }
.icon-button { width:38px; height:38px; background:#c1daff08; }
.workspace { display:grid; grid-template-columns:minmax(0,1fr) minmax(520px,1.03fr); gap:clamp(26px,4vw,68px); max-width:1640px; padding-top:calc(76px + var(--safe-top)); }
.hero { position:sticky; top:calc(114px + var(--safe-top)); height:calc(100svh - 150px); min-height:640px; max-height:830px; align-self:start; }
.hero-copy { width:100%; padding-top:24px; }
.eyebrow { font-size:9px; letter-spacing:.18em; color:#a2b5d0; }
.eyebrow-line { width:21px; }
.hero h1 { display:flex; align-items:flex-start; width:max-content; max-width:100%; margin:20px 0 15px; font-family:Inter,"Segoe UI",Arial,sans-serif; font-size:clamp(42px,4.7vw,76px); font-weight:550; letter-spacing:-.065em; line-height:1.15; color:#f1f6ff; text-shadow:0 4px 45px #030711; }
.hero h1 .title-star { color:#b8d3fa; -webkit-text-stroke:0; font-size:.28em; margin:7px 0 0 12px; filter:drop-shadow(0 0 8px #a7d4ff60); }
.hero-lead { color:#aabbd2; font-size:13px; line-height:1.95; letter-spacing:.12em; }
.hero-caption { display:block; margin-top:21px; font:8px/1.6 ui-monospace,Consolas,monospace; letter-spacing:.24em; color:#8a9ab7; }
.celestial-stage { top:23%; right:-7%; width:104%; max-width:650px; }
.planet-glow { opacity:.5; }
.orbit { opacity:.48; }
.coordinate { color:#a6bfdb8c; }
.coordinate-top { top:12%; }
.body-panel { bottom:0; width:94%; border-radius:20px; border-color:#c1d9fa26; padding:18px 21px; background:linear-gradient(115deg,#93b8f00f,#171f3405),#08102099; box-shadow:inset 0 1px 0 #e2eeff0a,0 18px 55px #01020a24; backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); }
.body-panel:before { width:1px; opacity:.6; }
.body-title { padding-bottom:13px; }
.body-title h2 b { font-size:24px; }
.body-facts dt { color:#879ab6; font-size:9px; }
.body-facts dd { font-size:10px; }
.module-section { padding-top:12px; align-self:start; }
.module-heading { margin-bottom:21px; }
.module-heading h2 { font-size:20px; font-weight:500; letter-spacing:.08em; }
.section-index { border:0; background:#b3d5ff0d; border-radius:9px; width:29px; height:29px; color:#9fb7d5; font-size:9px; }
.module-count { color:#92a6c1; font-size:9px; letter-spacing:.16em; }
.module-grid { gap:12px; }
.module-card {
  --card-depth:4px;
  --card-surface:linear-gradient(145deg,rgba(var(--card-rgb),.16),rgba(var(--card-rgb),.025) 44%,#00000026),linear-gradient(180deg,#17233799,#090f1cc2);
  --card-edge:rgba(var(--card-rgb),.38) rgba(var(--card-rgb),.15) #030711b3 rgba(var(--card-rgb),.23);
  --card-shadow:inset 0 1px 0 #f0f7ff1f,inset 1px 0 0 #e4efff08,inset 0 -2px 2px #0000004d,0 var(--card-depth) 0 #050a14,0 calc(var(--card-depth) + 1px) 0 rgba(var(--card-rgb),.16),0 13px 23px -8px #000000c9,0 24px 42px -22px #000000b3;
  grid-template-columns:40px minmax(0,1fr) 12px; gap:13px; min-height:105px; padding:22px 17px;
  border:1px solid; border-color:var(--card-edge); border-radius:18px;
  background:var(--card-surface); box-shadow:var(--card-shadow);
  backdrop-filter:blur(18px) saturate(125%); -webkit-backdrop-filter:blur(18px) saturate(125%);
  transform:none;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.module-card:before { background:radial-gradient(ellipse at var(--glow-x,20%) var(--glow-y,0%),rgba(var(--card-rgb),.22),transparent 72%); opacity:.45; pointer-events:none; }
.module-card:after { left:10%; right:auto; width:65%; height:1px; top:0; bottom:auto; background:linear-gradient(90deg,transparent,rgba(var(--card-rgb),.75),#e9f4ff8c,transparent); transform:none; opacity:.8; pointer-events:none; transition:opacity .22s ease; }
/* Neutralize legacy unconditional hover rules; touch must keep resting depth. */
.module-card:hover { background:var(--card-surface); border-color:var(--card-edge); box-shadow:var(--card-shadow); transform:none; }
.module-card:hover:before { opacity:.45; }
.module-card:hover:after { opacity:.8; transform:none; }
.module-card:hover .card-arrow { color:#a8bad3; transform:none; }
.module-card:focus-visible { outline:2px solid #b8dcff; outline-offset:4px; background:var(--card-surface); border-color:rgba(var(--card-rgb),.65); box-shadow:var(--card-shadow); transform:none; }
.module-card:focus-visible:before { opacity:.75; }
.module-card:focus-visible:after { opacity:1; transform:none; }
@media(min-width:701px) and (hover:hover) and (pointer:fine) {
  .module-card:hover { --card-depth:6px; transform:translateY(-3px); border-color:rgba(var(--card-rgb),.6) rgba(var(--card-rgb),.3) #030711b3 rgba(var(--card-rgb),.4); }
  .module-card:hover:before { opacity:.85; }
  .module-card:hover:after { opacity:1; }
  .module-card:hover .card-arrow { color:#dcecff; transform:translateX(2px); }
  .module-card:hover .card-icon { transform:translateY(-1px); }
}
.module-card:active { --card-depth:1px; transform:translateY(2px) scale(.995); box-shadow:var(--card-shadow); }
.module-card:active .card-icon { transform:translateY(1px); }
.module-card { --card-rgb:150,188,241; }
.module-card:nth-child(4n+2) { --card-rgb:126,209,199; }
.module-card:nth-child(4n+3) { --card-rgb:180,164,230; }
.module-card:nth-child(4n) { --card-rgb:216,185,145; }
.card-number { position:absolute; top:9px; right:14px; font-size:8px; letter-spacing:.13em; color:#8296b477; }
.card-icon { width:40px; height:40px; border:1px solid; border-color:rgba(var(--card-rgb),.48) rgba(var(--card-rgb),.18) rgba(var(--card-rgb),.11) rgba(var(--card-rgb),.3); border-radius:12px; color:rgb(var(--card-rgb)); background:linear-gradient(145deg,rgba(var(--card-rgb),.27),rgba(var(--card-rgb),.08)),#0a1324a3; box-shadow:inset 0 1px 0 #f4f8ff21,inset 0 -1px 1px #0000004d,0 3px 0 #030812b3,0 7px 12px #00000059; transition:transform .22s ease; }
.card-icon svg { stroke-width:1.5; width:20px; height:20px; filter:drop-shadow(0 1px 1px #00000066); }
.card-copy { gap:6px; }
.card-copy strong { white-space:normal; overflow:visible; font-size:13px; font-weight:550; letter-spacing:.02em; line-height:1.5; color:#dce7f8; }
.card-copy small { white-space:normal; overflow:visible; color:#9baec9; font-size:10px; line-height:1.65; letter-spacing:0; }
.card-arrow { width:14px; color:#a8bad3; }
.site-footer { flex-wrap:wrap; color:#8a9ab4; font-size:8px; line-height:1.8; letter-spacing:.06em; gap:5px 12px; margin-top:22px; }
.image-credit { display:block; flex-basis:100%; color:#8495ae; font-size:8px; }
.image-credit a { color:#a5b9d3; }
a:focus-visible,button:focus-visible { outline:2px solid #a7d5ff; outline-offset:4px; }
.meteor-layer { position:fixed; inset:0; z-index:3; overflow:hidden; pointer-events:none; }
.meteor { position:absolute; left:var(--start-x); top:var(--start-y); width:var(--trail); height:1.5px; opacity:0; border-radius:100%; transform-origin:100% 50%; background:linear-gradient(90deg,transparent,#93b9ea77 55%,#e3f4ff); box-shadow:0 0 6px #a4cfff65; animation:meteor-cross var(--flight,1700ms) cubic-bezier(.21,.37,.62,1) forwards; }
.meteor:after { content:""; position:absolute; right:-1px; top:-1px; width:3px; height:3px; border-radius:50%; background:#f2faff; box-shadow:0 0 8px 2px #bedfff77; }
@keyframes meteor-cross { 0%{opacity:0;transform:translate3d(0,0,0) rotate(28deg)} 10%{opacity:.9} 65%{opacity:.8} 100%{opacity:0;transform:translate3d(var(--travel),var(--drop),0) rotate(28deg)} }
@keyframes cosmos-enter { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }
.hero-copy,.module-heading { animation:cosmos-enter .8s ease both; }
.scene-paused .space-scene * { animation-play-state:paused!important; }
@media(min-width:1500px) { .module-card{min-height:112px;padding:25px 21px;gap:16px}.card-copy strong{font-size:15px}.card-copy small{font-size:11px}.hero h1{font-size:76px} }
@media(max-width:1100px) and (min-width:701px) { .workspace{grid-template-columns:minmax(0,.85fr) minmax(420px,1fr);gap:25px;padding-inline:25px}.hero h1{font-size:42px}.hero h1 .title-star{margin-left:7px}.module-card{padding:19px 12px;gap:9px;grid-template-columns:33px minmax(0,1fr) 10px}.card-icon{width:33px;height:36px}.card-copy strong{font-size:12px}.card-copy small{font-size:9px}.hero-caption{font-size:7px;letter-spacing:.12em}.body-panel{width:100%;padding:15px}.body-facts div{padding:0 8px}.body-facts dd{font-size:8px}.body-title{gap:10px}.rotation-badge{font-size:8px}.celestial-stage{top:28%;width:114%;right:-10%} }
@media(max-width:700px) {
  .real-starfield{background-image:url('/assets/cosmos/sparse-deep-mobile.svg?v=20261010-sparse-1');background-position:center;opacity:1;inset:0}
  .topbar{min-height:calc(70px + var(--safe-top));padding:calc(11px + var(--safe-top)) 20px 11px;background:#040917b0}
  .brand-mark{width:27px;height:27px}.brand{gap:9px}.brand-copy strong{font-size:14px}.brand-copy small{font-size:6px;letter-spacing:.2em}
  .scene-actions{gap:8px}.scene-status{display:none}.icon-button{width:34px;height:34px}.meteor-toggle{height:34px;font-size:9px;padding:0 10px;gap:5px}.meteor-toggle>span:first-child{font-size:15px}
  .workspace{display:block;padding:calc(69px + var(--safe-top)) 20px calc(25px + var(--safe-bottom));min-height:100svh}
  .hero{display:block;position:relative;top:auto;min-height:0;height:550px;max-height:none}
  .hero-copy{width:100%;padding-top:0}.eyebrow{font-size:8px;letter-spacing:.1em}.hero h1{font-size:clamp(39px,10.8vw,65px);margin:18px 0 11px;letter-spacing:-.05em}.hero h1 .title-star{margin-left:10px;margin-top:5px}
  .hero-lead{font-size:11px;line-height:1.9;max-width:none}.hero-caption{margin-top:13px;font-size:7px;letter-spacing:.16em}
  .celestial-stage{position:absolute;margin:0;top:25%;right:-3%;width:100%;max-width:420px;left:auto}.coordinate-top{top:14%;right:4%;font-size:6px}.coordinate-bottom{font-size:6px}
  .body-panel{position:absolute;left:0;width:100%;padding:15px 17px;border-radius:16px;bottom:15px}.body-title h2 b{font-size:21px}.body-title{padding-bottom:11px}.body-facts{margin-top:11px}.body-facts dd{font-size:9px}.body-facts dt{font-size:8px}
  .module-section{padding-top:18px}.module-heading{margin-bottom:16px}.module-heading h2{font-size:18px}.module-count{font-size:8px}.module-heading>div{gap:9px}.section-index{width:26px;height:26px}
  .module-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .module-card,.module-card:nth-child(7){grid-column:auto;display:flex;align-items:flex-start;flex-direction:column;gap:13px;min-height:143px;padding:17px 15px;border-radius:17px;background:var(--card-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
  .card-number{right:14px;top:17px;font-size:8px}.card-icon{width:35px;height:35px;border-radius:11px}.card-icon svg{width:18px;height:18px}.card-copy{gap:5px;width:100%}.card-copy strong{font-size:12px;line-height:1.55}.card-copy small{font-size:9px;line-height:1.7}.card-arrow{position:absolute;top:35px;right:15px;width:13px;opacity:.55}
  .site-footer{font-size:7px;margin-top:23px;gap:8px;justify-content:flex-start}.image-credit{font-size:7px}.footer-rule{width:14px}
}
@media(max-width:370px) { .workspace{padding-inline:16px}.topbar{padding-inline:16px}.hero{height:565px}.card-copy strong{font-size:11px}.module-card{padding:16px 12px}.hero h1{font-size:39px}.meteor-toggle{padding:0 8px}.brand-copy small{display:none} }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.meteor-layer{display:none} }
@media(prefers-reduced-motion:reduce) { .module-card,.module-card:hover,.module-card:active,.module-card .card-icon,.module-card .card-arrow { transform:none!important; } }
@media(min-width:701px) and (max-width:850px) { .hero h1{font-size:32px}.hero-caption{font-size:6px;letter-spacing:.08em}.hero-lead{font-size:11px}.body-panel{padding:13px 10px}.body-title{flex-wrap:wrap}.body-title h2 b{font-size:21px}.body-facts{grid-template-columns:1fr;gap:8px}.body-facts div{border:0;padding:0;display:flex;justify-content:space-between;align-items:center}.body-facts dt{margin:0}.body-facts dd{font-size:9px}.coordinate{display:none}.celestial-stage{top:32%} }

/* Layout contract: the globe and metadata occupy separate, non-overlapping rows.
   Use flow sizing instead of viewport-height offsets, including on short screens. */
.workspace .hero {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:18px;
  position:relative;
  top:auto;
  height:auto;
  min-height:0;
  max-height:none;
}
.hero .celestial-stage {
  position:relative;
  top:auto;
  right:auto;
  left:auto;
  bottom:auto;
  width:100%;
  max-width:none;
  /* Lift only the stage; compensate below to keep metadata and page height stable. */
  --planet-lift:24px;
  margin:calc(8px - var(--planet-lift)) auto calc(8px + var(--planet-lift));
  aspect-ratio:1;
  transform:none;
  will-change:auto;
}
.hero .planet-wrap {
  inset:2%;
  transform:scale(clamp(.94,var(--planet-scale),1));
}
/* Reserve the same stage for the complete ring system, not just its globe. */
.hero .planet-ring {
  left:3%;
  width:94%;
  top:39%;
  height:22%;
}
body[data-ring="saturn"] .hero .planet-wrap { inset:13%; }
.hero .body-panel {
  position:relative;
  top:auto;
  right:auto;
  bottom:auto;
  left:auto;
  width:100%;
  margin:0;
}
.hero .coordinate-top { top:0; right:3%; }
.hero .coordinate-bottom { bottom:0; right:3%; }
@media(max-width:700px) {
  .workspace .hero { gap:12px; }
  .hero .celestial-stage { --planet-lift:16px; margin:calc(10px - var(--planet-lift)) auto calc(10px + var(--planet-lift)); }
  .module-section { padding-top:28px; }
}

/* First-screen fit: height limits the globe, not scrolling or the renderer. */
@media(min-width:701px) {
  .hero h1 { margin:16px 0 10px; }
  .hero-caption { margin-top:12px; }
  .hero .celestial-stage {
    width:min(100%,max(180px,calc(100vh - 350px - var(--safe-top))));
    width:min(100%,max(180px,calc(100svh - 350px - var(--safe-top))));
  }
}
@media(max-width:700px) {
  .hero .celestial-stage {
    width:min(100%,max(140px,calc(100vh - 260px - var(--safe-top))));
    width:min(100%,max(140px,calc(100svh - 260px - var(--safe-top))));
  }
}
@media(min-width:701px) and (max-height:540px) {
  .hero-copy { padding-top:0; }
  .hero h1 { font-size:clamp(30px,3.2vw,42px); margin:12px 0 8px; }
  .hero-caption { margin-top:8px; }
}
/* End first-screen fit. */

/* The title keeps its layout slot while a decorative copy docks into the header. */
.scroll-topbar {
  position:fixed;
  isolation:isolate;
  visibility:hidden;
  pointer-events:none;
  background:transparent;
  border-bottom-color:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.scroll-topbar::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  /* Reuse the live planet palette; retain a dark scrim behind readable controls. */
  background:linear-gradient(115deg,rgba(var(--accent-rgb),.16),rgba(var(--accent-rgb),.04) 65%,rgba(var(--accent-rgb),.09)),linear-gradient(180deg,#04081488,#04081470);
  border-bottom:1px solid rgba(var(--accent-rgb),.22);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  opacity:var(--bar-reveal,0);
  pointer-events:none;
}
.scroll-topbar .brand-mark,
.scroll-topbar .brand-copy small,
.scroll-topbar .scene-actions { opacity:var(--controls-reveal,0); }
#header-brand-text { opacity:var(--brand-reveal,0); }
#hero-brand-text { color:inherit; -webkit-text-stroke:0; }
.scroll-brand-ready .hero-copy { animation:none; }
.scroll-brand-ready .eyebrow { opacity:var(--hero-eyebrow-reveal,1); }
.scroll-brand-ready .hero h1 .title-star { opacity:var(--hero-star-reveal,1); }
.brand-morph {
  position:fixed;
  z-index:21;
  top:0;
  left:0;
  margin:0;
  white-space:nowrap;
  color:#f1f6ff;
  transform-origin:0 0;
  visibility:hidden;
  pointer-events:none;
  user-select:none;
}
#workspace-modules { scroll-margin-top:100px; }
@media(prefers-reduced-motion:reduce) { .brand-morph { display:none; } }

/* One planet texture in the grid's coordinate space, viewed through separate panes. */
.module-grid { position:relative; }
.planet-material {
  position:absolute; inset:0; z-index:-1;
  display:block; overflow:hidden; border-radius:inherit;
  pointer-events:none; user-select:none;
}
.material-layer {
  position:absolute; inset:-6px; display:block;
  background-repeat:no-repeat;
  pointer-events:none;
  transition:opacity var(--material-duration,500ms) ease;
}
.material-layer-a {
  background-image:var(--material-a-image,none);
  background-size:var(--material-a-size,cover);
  background-position:var(--material-a-position,center);
  filter:blur(4px) saturate(.85) brightness(var(--material-a-tone,.9));
  opacity:var(--material-a-visible,0);
}
.material-layer-b {
  background-image:var(--material-b-image,none);
  background-size:var(--material-b-size,cover);
  background-position:var(--material-b-position,center);
  filter:blur(4px) saturate(.85) brightness(var(--material-b-tone,.9));
  opacity:var(--material-b-visible,0);
}
.module-card {
  --card-surface:linear-gradient(145deg,rgba(var(--card-rgb),.08),rgba(var(--card-rgb),.012) 44%,#00000020),linear-gradient(180deg,#1320317a,#070d1899);
}
.module-card>.planet-material {
  opacity:.30;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000000b3 42%,#00000059 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000000b3 42%,#00000059 100%);
}
.card-icon { transition:transform .22s ease,color .5s ease,border-color .5s ease; }
.scroll-topbar::before {
  background:linear-gradient(115deg,rgba(var(--accent-rgb),.10),rgba(var(--accent-rgb),.025) 65%,rgba(var(--accent-rgb),.07)),linear-gradient(180deg,#0408145c,#04081438);
  box-shadow:inset 0 1px 0 #e5efff12;
}
.scroll-topbar>.planet-material { opacity:calc(var(--bar-reveal,0) * .20); }
.scroll-topbar .material-layer-a { filter:blur(6px) saturate(.85) brightness(var(--material-a-tone,.9)); }
.scroll-topbar .material-layer-b { filter:blur(6px) saturate(.85) brightness(var(--material-b-tone,.9)); }
.scroll-topbar::after {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(90deg,#02050b80,transparent 35%,transparent 65%,#02050b66);
  opacity:var(--bar-reveal,0); pointer-events:none;
}
@media(max-width:700px) {
  .material-layer-a { filter:blur(3px) saturate(.85) brightness(var(--material-a-tone,.9)); }
  .material-layer-b { filter:blur(3px) saturate(.85) brightness(var(--material-b-tone,.9)); }
  .scroll-topbar::before { backdrop-filter:blur(14px) saturate(110%); -webkit-backdrop-filter:blur(14px) saturate(110%); }
  .scroll-topbar .material-layer-a { filter:blur(4px) saturate(.85) brightness(var(--material-a-tone,.9)); }
  .scroll-topbar .material-layer-b { filter:blur(4px) saturate(.85) brightness(var(--material-b-tone,.9)); }
  .scroll-topbar>.planet-material { opacity:calc(var(--bar-reveal,0) * .18); }
}
@media(prefers-reduced-motion:reduce) { .material-layer { transition:none!important; } }
@media(forced-colors:active) {
  .planet-material,.scroll-topbar::before,.scroll-topbar::after { display:none; }
  .module-card,.scroll-topbar { background:Canvas; border-color:CanvasText; }
}

/* Clear card material: lower haze, preserve the shared planet crop. */
.module-card {
  --card-surface:linear-gradient(145deg,rgba(var(--card-rgb),.035),rgba(var(--card-rgb),.005) 44%,#00000014),linear-gradient(180deg,#060b1629,#02050b55);
  backdrop-filter:blur(4px) saturate(110%);
  -webkit-backdrop-filter:blur(4px) saturate(110%);
}
.module-card:before {
  background:radial-gradient(ellipse at var(--glow-x,20%) var(--glow-y,0%),rgba(var(--card-rgb),.12),transparent 72%);
  opacity:.28;
}
.module-card:hover:before { opacity:.28; }
.module-card:focus-visible:before { opacity:.55; }
.module-card>.planet-material { opacity:.28; }
.module-card .material-layer-a { filter:blur(.75px) saturate(1.2) brightness(var(--material-a-tone,.9)); }
.module-card .material-layer-b { filter:blur(.75px) saturate(1.2) brightness(var(--material-b-tone,.9)); }
.module-card .card-icon { background:linear-gradient(145deg,rgba(var(--card-rgb),.12),rgba(var(--card-rgb),.025)),#03081066; }
.module-card .card-copy strong { color:#f1f5fc; }
.module-card .card-copy small { color:#b5c2d6; }
@media(min-width:701px) and (hover:hover) and (pointer:fine) {
  .module-card:hover:before { opacity:.5; }
}
@media(max-width:700px) {
  /* Match the legacy seventh-card specificity without touching its layout. */
  .module-grid .module-card { backdrop-filter:blur(3px) saturate(110%); -webkit-backdrop-filter:blur(3px) saturate(110%); }
  .module-card .material-layer-a { filter:blur(.5px) saturate(1.2) brightness(var(--material-a-tone,.9)); }
  .module-card .material-layer-b { filter:blur(.5px) saturate(1.2) brightness(var(--material-b-tone,.9)); }
}
/* End clear card material. */