:root{color-scheme:dark;--bg:#080d17;--muted:#8c97aa;--text:#edf2fb;--line:rgba(172,194,232,.12);--accent:#dcb97e;font-family:Inter,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,a,input{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #eac891;outline-offset:5px}button{border:0}header{height:96px;margin:0 4%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;gap:13px;align-items:center;color:inherit;text-decoration:none;letter-spacing:3px;font-size:18px}.brand strong{font-weight:400;color:#a9b8d2}.brand small{display:block;font-size:12px;letter-spacing:5px;margin-top:6px;color:var(--muted)}.brand-icon{font-size:40px;color:var(--accent);font-weight:300}.header-note{font-size:13px;color:var(--muted);letter-spacing:2px;display:flex;align-items:center;gap:10px}.live-dot{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px #dcb97e66}.quiet-button{background:transparent;color:#aebacf;font-size:16px}.quiet-button span{font-size:13px;margin-left:6px}main{display:grid;grid-template-columns:minmax(0,1fr) 330px;max-width:1800px;margin:0 auto;min-height:590px;height:calc(100svh - 270px)}.universe{position:relative;min-height:540px;overflow:hidden}#space{width:100%;height:100%;display:block;cursor:grab;touch-action:none}#space:active{cursor:grabbing}.scene-heading{position:absolute;top:40px;left:5.6%;pointer-events:none}.eyebrow{font-size:11px;color:var(--accent);letter-spacing:2.7px}.scene-heading h1{font-weight:400;font-size:clamp(30px,3vw,44px);letter-spacing:4px;line-height:1.4;margin:16px 0 9px}.scene-heading p{font-size:13px;color:var(--muted);letter-spacing:1px}.view-switch{position:absolute;right:30px;top:38px;display:flex;border:1px solid var(--line);padding:4px;border-radius:6px;background:#0c1320aa}.view-switch button{background:transparent;font-size:12px;padding:8px 13px;border-radius:3px;color:var(--muted)}.view-switch button.active{background:#253045;color:#eee}.scene-bottom{position:absolute;bottom:24px;left:5.6%;right:30px;display:flex;align-items:center;justify-content:space-between}.scene-hint{font-size:12px;color:#778399;letter-spacing:.5px}.scene-hint i{font-style:normal;padding:0 9px;color:#41516b}.zoom-controls{display:flex;align-items:center;border:1px solid var(--line);border-radius:5px;background:#0c1320aa}.zoom-controls button{background:transparent;font-size:20px;width:36px;height:34px;color:#c2cee1}.zoom-controls span{font-size:11px;width:46px;text-align:center;color:var(--muted)}.detail{margin:32px 36px 26px 0;border-left:1px solid var(--line);padding-left:29px;display:flex;flex-direction:column;justify-content:center}.detail-top{display:flex;align-items:center;justify-content:space-between}.detail-top .eyebrow{font-size:10px;letter-spacing:2px}.detail-top>span:last-child{font-size:11px;color:#6d7c92;letter-spacing:1px}.planet-portrait{height:150px;margin:6px -12px 8px;display:grid;place-items:center}.planet-portrait canvas{width:240px;height:180px;max-width:100%}.planet-title{display:flex;align-items:center;justify-content:space-between}.planet-title #english-name{color:#92a3bd;font-size:11px;letter-spacing:3px}.planet-title h2{font-weight:400;letter-spacing:6px;margin:6px 0 0;font-size:30px}.badge{border:1px solid #4b566948;color:#a9b6cb;font-size:11px;padding:6px 9px;border-radius:4px}.description{font-size:13px;line-height:1.9;color:#9ca9be;margin:18px 0}.facts{display:grid;grid-template-columns:1fr 1fr;gap:22px 12px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:20px 0}.facts span{display:block;font-size:11px;color:#79889f;margin-bottom:7px}.facts strong{font-size:14px;font-weight:400;letter-spacing:.3px}.fact-note{display:flex;gap:10px;align-items:flex-start;margin-top:16px}.fact-note>span{color:var(--accent);font-size:20px}.fact-note p{font-size:12px;line-height:1.8;color:#b5bfd0;margin:0}.scale-note{font-size:10px;line-height:1.9;color:#627189;margin-top:19px}footer{padding:0 4%;max-width:1800px;margin:auto}#planet-nav{display:grid;grid-template-columns:repeat(9,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0;gap:5px}#planet-nav button{position:relative;display:flex;gap:10px;align-items:center;justify-content:center;min-height:44px;background:transparent;border-radius:5px;color:#8e9cb2;font-size:13px;transition:background .2s,color .2s}#planet-nav button:hover{background:#141e2e}#planet-nav button.active{background:#1b273b;color:#f0f3f9}#planet-nav button.active:after{content:"";position:absolute;bottom:-13px;width:30px;height:2px;background:var(--accent)}.mini-planet{width:15px;height:15px;border-radius:50%;box-shadow:inset -4px -2px 5px #0009;flex-shrink:0}.playback{display:flex;align-items:center;justify-content:center;gap:22px;padding:19px 0 13px}.playback #play{border:1px solid #52627a55;background:#152032;width:35px;height:35px;border-radius:50%;font-size:15px}.speed{width:210px}.speed label{display:flex;justify-content:space-between;font-size:11px;color:#92a1b8;margin-bottom:5px}.speed output{color:#d8c099}input[type=range]{width:100%;height:3px;accent-color:#dcb97e;display:block;cursor:pointer;margin:8px 0}.orbit-toggle{background:transparent;color:#6c7b94;font-size:18px}.orbit-toggle.active{color:#c2cee0}.orbit-toggle span{font-size:12px;margin-left:4px}.footer-caption{display:flex;justify-content:space-between;color:#586a83;font-size:10px;letter-spacing:2px;padding:0 0 18px}.arrow{color:var(--accent);font-size:15px;margin-left:8px}@media(min-height:900px){.planet-portrait{height:210px}.planet-portrait canvas{width:300px;height:225px}.description{font-size:14px}.detail{gap:5px}}@media(max-width:1000px){main{grid-template-columns:minmax(0,1fr) 280px}.detail{margin-right:22px;padding-left:20px}.scene-heading h1{font-size:30px}.view-switch{top:auto;bottom:75px;right:22px}.scene-hint{font-size:10px}.scene-hint i{padding:0 4px}#planet-nav button{gap:7px;font-size:12px}.mini-planet{width:12px;height:12px}}@media(max-width:700px){header{height:78px;margin:0 5%}.header-note{display:none}.brand{font-size:15px}.brand-icon{font-size:31px}.brand small{font-size:10px}main{display:flex;flex-direction:column;height:auto;min-height:0}.universe{height:530px;min-height:0}.scene-heading{top:26px;left:6%}.scene-heading h1{font-size:30px;margin-top:12px}.scene-heading p{font-size:12px}.view-switch{bottom:69px}.scene-bottom{bottom:23px;left:6%;right:6%}.detail{border-left:0;border-top:1px solid var(--line);margin:0 6%;padding:24px 0;display:block;position:relative;min-height:410px}.detail-top{padding-right:0}.planet-portrait{float:right;width:45%;height:130px;margin:9px 0 0 12px}.planet-portrait canvas{width:190px;height:143px}.planet-title{display:block;margin-top:27px}.badge{display:inline-block;margin-top:10px}.description{max-width:55%;min-height:77px}.facts{clear:both;grid-template-columns:repeat(4,1fr);gap:10px;padding:17px 0}.facts strong{font-size:12px}.fact-note{margin-top:16px}.scale-note{margin-top:12px;font-size:10px}footer{padding:0 5%}#planet-nav{display:flex;overflow-x:auto;gap:4px;padding:12px 0;scrollbar-width:thin}#planet-nav button{flex:0 0 78px;font-size:12px}.footer-caption{font-size:9px;letter-spacing:1px}.playback{gap:18px}.speed{width:180px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* Keep scene content and controls in separate flow rows. The canvas has no
   intrinsic influence on grid sizing, so it cannot push into the footer. */
main {
  height: auto;
  min-height: 0;
  align-items: stretch;
}
.universe {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: auto;
  overflow: visible;
}
.scene-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 32px 30px 0 5.6%;
}
.scene-heading {
  position: static;
  min-width: 0;
}
.scene-heading h1 {
  font-size: clamp(24px, 2.3vw, 34px);
  margin: 12px 0 8px;
}
.scene-heading p { margin: 0; }
.view-switch {
  position: static;
  flex-shrink: 0;
}
.scene-stage {
  position: relative;
  height: clamp(350px, calc(100svh - 390px), 650px);
  min-height: 350px;
  flex: 1 0 350px;
  overflow: hidden;
}
#space {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene-bottom {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 30px 24px 5.6%;
}
.detail {
  min-width: 0;
  justify-content: flex-start;
}
.detail > * { flex-shrink: 0; }
.planet-portrait {
  height: 180px;
  margin: 6px 0 8px;
}
.planet-portrait canvas {
  width: 240px;
  height: 180px;
}
footer {
  position: relative;
  width: 100%;
  margin: 0 auto;
  background: var(--bg);
}
#planet-nav button.active::after { bottom: -7px; }
@media (max-width: 1000px) {
  .scene-toolbar { gap: 14px; padding-right: 22px; }
  .view-switch button { padding: 8px 10px; }
  .scene-bottom { padding-right: 22px; }
}
@media (max-width: 700px) {
  main { height: auto; }
  .universe { height: auto; }
  .scene-toolbar {
    flex-wrap: wrap;
    padding: 24px 6% 0;
  }
  .scene-heading h1 { font-size: 26px; }
  .view-switch { margin-left: auto; }
  .scene-stage {
    height: clamp(300px, 70vw, 420px);
    min-height: 300px;
    flex: 0 0 auto;
  }
  .scene-bottom { padding: 12px 6% 22px; }
  .detail { min-height: 0; }
  .planet-portrait {
    height: 150px;
    margin: 9px 0 12px 12px;
  }
  .planet-portrait canvas { width: 190px; height: 143px; }
  .planet-title { min-width: 0; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .facts strong { font-size: 14px; }
  .description { max-width: 100%; }
  .footer-caption { flex-wrap: wrap; gap: 8px; }
}
@media (max-width: 360px) {
  .scene-hint { width: 100%; }
  .zoom-controls { margin-left: auto; }
  .playback { flex-wrap: wrap; gap: 14px; }
  .speed { width: 150px; }
}