:root { color-scheme: dark; }
  body.site-theme-dark { margin: 0; min-height: 100svh; color: #eaf2ff; background: #03070f; }
  .earth-stage { position: relative; min-height: calc(100svh - 5rem); display: flex; flex-direction: column; overflow: hidden; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
  .earth-intro { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; padding: 32px 40px; pointer-events: none; }
  .earth-stage .eyebrow { color: #8da5bc; text-transform: uppercase; letter-spacing: .24em; font-size: 12px; font-weight: 600; margin: 0 0 9px; }
  .earth-stage h1 { font-weight: 400; letter-spacing: -.04em; font-size: clamp(26px,4vw,38px); margin: 0; }
  .earth-tool-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; pointer-events: auto; }
  .earth-tool-actions .btn { min-height: 40px; padding: 7px 12px; font-size: 13px; }
  .earth-stage main { position: relative; flex: 1; min-height: 420px; height: 82svh; }
  .earth-stage canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; cursor: grab; touch-action: none; }
  .earth-stage canvas:active { cursor: grabbing; }
  .earth-stage canvas:focus-visible { outline: 2px solid #95cfff; outline-offset: -6px; border-radius: 10px; }
  .earth-stage canvas.bio-effect { z-index: 1; pointer-events: none; cursor: default; }
  .bio-effect[hidden] { display: none; }
  .laser-effect { position: absolute; z-index: 2; inset: 0; overflow: hidden; pointer-events: none; }
  .laser-effect[hidden] { display: none; }
  .laser-satellite { position: absolute; z-index: 1; width: clamp(58px, 8vw, 86px); color: #9ddfff; transition: filter .12s linear; will-change: left, top, transform, filter; }
  .laser-satellite svg { display: block; width: 100%; height: auto; overflow: visible; }
  .satellite-panel { fill: #176ca3; stroke: #8be4ff; stroke-width: 2; }
  .satellite-grid { fill: none; stroke: #77c9ed; stroke-width: 1; opacity: .65; }
  .satellite-arm { stroke: #b6c9d8; stroke-width: 4; }
  .satellite-body { fill: #d6e5ed; stroke: #57768a; stroke-width: 2; }
  .satellite-emitter { fill: #c7f8ff; stroke: #72dcff; stroke-width: 2; }
  .laser-effect[data-phase="charge"] .satellite-emitter, .laser-effect[data-phase="fire"] .satellite-emitter { fill: #fff; }
  .laser-beam { position: absolute; z-index: 0; height: 5px; border-radius: 999px; transform-origin: left center; opacity: 0; background: linear-gradient(90deg,#5fdcff,#eaffff 42%,#5fdcff); box-shadow: 0 0 7px #baf8ff,0 0 18px #38cfff,0 0 35px #168cff; will-change: transform, opacity; }
  .laser-impact { position: absolute; z-index: 2; width: 72px; aspect-ratio: 1; border-radius: 50%; opacity: 0; --impact-blue: 1; --impact-orange: 0; will-change: transform, opacity; }
  .laser-impact::before, .laser-impact::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
  .laser-impact::before { opacity: var(--impact-blue); background: radial-gradient(circle,#fff 0 9%,#8ff3ff 18%,#25b9ff80 42%,transparent 72%); box-shadow: 0 0 28px #80efff; }
  .laser-impact::after { opacity: var(--impact-orange); background: radial-gradient(circle,#fff 0 8%,#ffe7a0 12%,#ff9a31 25%,#e83e1470 48%,transparent 72%); box-shadow: 0 0 18px #fff1b8,0 0 42px #ff7a24,0 0 78px #d53118aa; }
  .earth-stage #status { position: absolute; inset: 45% 20px auto; text-align: center; color: #acc7e3; pointer-events: none; }
  .earth-stage #status[hidden] { display: none; }
  .earth-footer { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 24px 24px; gap: 16px; }
  .earth-stage .controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: 10px; }
  .control-panel { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 18px; padding: 14px 18px; border: 1px solid #243244; background: #0b121d; border-radius: 18px; }
  .earth-stage button { border: 1px solid #33445b; border-radius: 10px; padding: 10px 14px; min-height: 44px; font: inherit; font-size: 14px; background: #162337; color: #edf5ff; cursor: pointer; }
  .earth-stage button:hover { background: #253a54; }
  .earth-stage button:focus-visible, .earth-stage input:focus-visible, .earth-stage a:focus-visible { outline: 2px solid #9dd5ff; outline-offset: 4px; }
  #detonate { background: #ad361a; color: #fff5e9; border-color: #ef7444; font-weight: 650; min-width: 140px; box-shadow: 0 0 24px #f46b1620; }
  #detonate:hover { background: #cb4824; }
  .earth-stage button:disabled { opacity: .55; cursor: default; }
  .weapon-controls select { min-height: 44px; padding: 8px 34px 8px 12px; border: 1px solid #33445b; border-radius: 10px; background: #162337; color: #edf5ff; font: inherit; cursor: pointer; color-scheme: dark; }
  .weapon-controls select:focus-visible { outline: 2px solid #9dd5ff; outline-offset: 4px; }
  .weapon-controls select:disabled { opacity: .55; cursor: default; }
  .mode-parameters { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; }
  .mode-parameters[hidden] { display: none; }
  .mode-parameters label { display: flex; align-items: center; gap: 7px; color: #c9d8e7; font-size: 12px; white-space: nowrap; }
  .mode-parameters input[type="range"] { width: 82px; }
  .mode-parameters output { min-width: 34px; font-size: 12px; }
  #sequence { min-height: 22px; margin: 0; font-size: 14px; color: #e9ae7c; letter-spacing: .04em; text-align: center; }
  #toggle { min-width: 136px; }
  .speed { display: flex; align-items: center; gap: 10px; font-size: 14px; }
  .earth-stage input[type="range"] { width: 110px; accent-color: #88c8ff; cursor: pointer; min-height: 32px; }
  .earth-stage output { font-variant-numeric: tabular-nums; color: #bad8f4; min-width: 32px; }
  .zoom { display: flex; gap: 6px; }
  .zoom button { width: 44px; padding: 8px; font-size: 20px; }
  .earth-secondary { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 8px; width: min(760px, 100%); }
  .earth-about { border: 1px solid #33445b; border-radius: 10px; background: #162337; color: #c8d8e8; }
  .earth-about[open] { flex-basis: 100%; background: #0b121d; border-color: #243244; border-radius: 14px; }
  .earth-about summary { min-height: 40px; padding: 9px 13px; color: #d9eaff; font-size: 13px; font-weight: 600; text-align: center; cursor: pointer; list-style-position: inside; }
  .earth-about summary:hover { background: #111d2c; border-radius: 13px; }
  .earth-about summary:focus-visible { outline: 2px solid #9dd5ff; outline-offset: 4px; }
  .earth-about[open] summary { border-bottom: 1px solid #243244; border-radius: 13px 13px 0 0; }
  .earth-about-content { padding: 18px 22px 20px; }
  .earth-about-content h2 { margin: 0 0 10px; color: #edf5ff; font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
  .earth-about-content p { margin: 0 0 12px; color: #aebfd0; font-size: 14px; line-height: 1.65; }
  .earth-about-content p:last-child { margin-bottom: 0; }
  .credits { font-size: 12px !important; color: #7c90a6 !important; }
  .earth-stage a { color: #96b4d1; text-underline-offset: 3px; }
  @media (max-width: 600px) {
    .earth-intro { padding: 24px; }
    .earth-tool-actions { flex-wrap: nowrap; gap: 6px; }
    .earth-tool-actions .btn { display: inline-grid; place-items: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; font-size: 18px; line-height: 1; }
    .earth-tool-actions [data-favorite-label] { display: none; }
    .earth-tool-actions [data-share-label] { display: none; }
    .earth-tool-actions .tool-share-icon { display: block; }
    .earth-stage main { height: 70svh; min-height: 370px; }
    .laser-satellite { width: 58px; }
    .earth-footer { padding: 0 16px 20px; gap: 12px; }
    .controls { width: 100%; max-width: 420px; }
    .control-panel { width: 100%; gap: 8px 12px; padding: 12px; }
    .mode-parameters { flex-basis: 100%; gap: 7px 12px; }
    .mode-parameters label { flex: 1 1 135px; justify-content: center; }
    .speed { gap: 8px; }
    .earth-stage input[type="range"] { width: 88px; }
    .earth-about-content { padding: 16px; }
  }
  @media (max-height: 550px) and (min-width: 600px) { .earth-intro { padding: 18px 24px; } .earth-stage main { min-height: 250px; height: 65svh; } .earth-footer { gap: 8px; padding-bottom: 12px; } }
  body.earth-expanded { overflow: hidden; }
  .earth-stage.is-expanded { position: fixed; z-index: 2000; inset: 0; width: 100vw; height: 100svh; min-height: 100svh; background: #03070f; }
  .earth-stage.is-expanded main { height: auto; min-height: 0; }
  .earth-stage.is-expanded .earth-footer { flex: 0 0 auto; padding-bottom: 12px; }
  .earth-stage.is-expanded .earth-secondary { display: none; }
  .fullscreen-exit { position: fixed; z-index: 8; top: 12px; right: 12px; }
  .fullscreen-exit[hidden] { display: none; }
  .earth-control-drawer { display: contents; }
  .earth-control-drawer > summary { display: none; }
  @media (max-width: 600px) {
    .earth-stage.is-expanded .earth-intro { display: none; }
    .earth-stage.is-expanded main { height: 100%; min-height: 100%; }
    .earth-stage.is-expanded .earth-footer { position: absolute; z-index: 6; inset: auto 0 0; padding: 8px 10px 10px; gap: 6px; background: linear-gradient(180deg,transparent,#03070f 28%); pointer-events: none; }
    .earth-stage.is-expanded #sequence,.earth-stage.is-expanded .earth-control-drawer { pointer-events: auto; }
    .earth-stage.is-expanded .earth-control-drawer { display: block; width: 100%; }
    .earth-stage.is-expanded .earth-control-drawer > summary { display: block; width: max-content; margin: 0 auto; padding: 9px 15px; border: 1px solid #33445b; border-radius: 10px; background: #162337; color: #edf5ff; font-size: 14px; font-weight: 600; cursor: pointer; }
    .earth-stage.is-expanded .earth-control-drawer[open] > summary { margin-bottom: 6px; }
    .earth-stage.is-expanded .controls { max-width: none; max-height: 38svh; overflow-y: auto; gap: 6px; }
    .earth-stage.is-expanded .control-panel { gap: 7px 10px; padding: 9px; border-radius: 13px; background: #0b121df5; }
    .earth-stage.is-expanded .mode-parameters { gap: 5px 9px; }
    .earth-stage.is-expanded button,.earth-stage.is-expanded .weapon-controls select { min-height: 40px; padding-top: 7px; padding-bottom: 7px; }
  }