@keyframes slideGlobe{from{transform:translateX(0%)}to{transform:translateX(-50%)}}
/* utilities */
.mt10{margin-top:10px}
.mt0{margin-top:0}
.center{text-align:center}
.p-cta{text-align:center;margin-top:24px}
.slider-panel.bare{border:0;background:transparent;padding:10px 4px 0}
.page-head{position:relative;z-index:1;padding:18px 24px 8px;text-align:center}
.page-head h1{font-size:24px}
.sweat{display:none}
.face-hot .sweat{display:block}
/* 出典 */
.sources{margin:26px 0 0;border-top:1px dashed var(--line);padding-top:12px}
.sources .st{font-family:'JetBrains Mono',monospace;font-size:10.5px;letter-spacing:.1em;color:var(--sub)}
.sources ul{margin:8px 0 0;padding-left:18px}
.sources li{font-size:13px;color:var(--sub);margin:4px 0}
:root{
  --bg:#0b1220; --bg2:#0e1730; --line:#1c2b4a;
  --teal:#5eead4; --danger:#ff6b4a;
  --text:#e8edf5; --sub:#8ea0c0;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:'Noto Sans JP',sans-serif;overflow-x:hidden;overflow-x:clip;line-height:1.7;}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:4px}
.stars{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    radial-gradient(1px 1px at 10% 20%, #fff 0, transparent 100%),
    radial-gradient(1px 1px at 80% 10%, #fff 0, transparent 100%),
    radial-gradient(1px 1px at 60% 70%, #fff 0, transparent 100%),
    radial-gradient(1px 1px at 30% 85%, #fff 0, transparent 100%),
    radial-gradient(1px 1px at 90% 60%, #fff 0, transparent 100%),
    radial-gradient(1px 1px at 45% 40%, #fff 0, transparent 100%),
    radial-gradient(1px 1px at 15% 55%, #fff 0, transparent 100%);}

/* ===== ナビ ===== */
.topnav{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;
  justify-content:space-between;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);
  background:rgba(11,18,32,.9);}
.topnav .brand{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:16px;color:var(--text)}
.topnav .brand:hover{text-decoration:none;color:var(--teal)}
.topnav .links{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:14px}
.topnav .links a{color:var(--sub)}
.topnav .links a.active,.topnav .links a:hover{color:var(--teal);text-decoration:none}

.wrap{position:relative;z-index:1;max-width:760px;margin:0 auto;padding:0 16px}

.eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.2em;
  color:var(--teal);text-transform:uppercase}
h1{font-family:'Zen Maru Gothic',sans-serif;font-size:26px;margin:8px 0 6px;letter-spacing:.02em}
h2{font-family:'Zen Maru Gothic',sans-serif;font-size:20px;margin:34px 0 10px;
  padding-left:10px;border-left:3px solid var(--teal)}
h3{font-family:'Zen Maru Gothic',sans-serif;font-size:17px;margin:22px 0 6px;color:var(--teal)}
p{margin:10px 0;font-size:16px;line-height:1.85}
.sub{color:var(--sub);font-size:14px}

/* ===== カード・ボタン ===== */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px;margin:14px 0}
.zcard{display:block;background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px;color:var(--text);transition:border-color .2s,transform .2s}
a.zcard:hover{border-color:var(--teal);text-decoration:none;transform:translateY(-2px)}
.zcard .icon{font-size:22px}
.zcard .t{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15.5px;margin:4px 0 2px}
.zcard .d{font-size:13px;color:var(--sub)}
.tag{display:inline-block;font-family:'JetBrains Mono',monospace;font-size:9.5px;letter-spacing:.08em;
  border:1px solid var(--teal);color:var(--teal);border-radius:99px;padding:1px 8px;margin-top:8px}
.tag.soon{border-color:var(--line);color:var(--sub)}
.btn{display:inline-block;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:14.5px;
  border:1px solid var(--teal);color:var(--teal);background:transparent;border-radius:99px;
  padding:9px 20px;cursor:pointer;transition:background .2s,color .2s}
.btn:hover{background:var(--teal);color:#06251f;text-decoration:none}
.btn.primary{background:var(--teal);color:#06251f}
.btn.primary:hover{background:#8bf5e4}

.note{border:1px dashed var(--teal);border-radius:12px;padding:12px 16px;margin:18px 0;
  background:rgba(94,234,212,.05);font-size:14.5px;line-height:1.8}
.note .nt{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;color:var(--teal);
  font-size:13.5px;margin-bottom:4px}

/* ===== 地球ビジュアル ===== */
.stage{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;
  gap:22px;padding:6px 0 4px}
.earth-wrap{position:relative;width:140px;height:140px;flex:0 0 auto;transition:transform .5s ease}
.earth-wrap.small{width:110px;height:110px}
.axis-line{position:absolute;top:-16px;bottom:-16px;left:50%;width:2px;
  background:rgba(255,255,255,.45);transform:translateX(-50%);pointer-events:none;z-index:3}
.axis-line::before,.axis-line::after{content:"";position:absolute;left:50%;transform:translateX(-50%);
  width:7px;height:7px;border-radius:50%;background:#ffe9a8;box-shadow:0 0 6px rgba(255,220,150,.9)}
.axis-line::before{top:-4px}.axis-line::after{bottom:-4px}
.atmosphere{position:absolute;inset:-12px;border-radius:50%;filter:blur(2px);pointer-events:none;
  background:radial-gradient(circle, transparent 62%, rgba(120,190,255,.35) 72%, transparent 80%)}
.earth{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;
  background:radial-gradient(circle at 35% 30%, #4fb3ff 0%, #1f6fd6 35%, #123a7a 70%, #081a3a 100%);
  box-shadow:0 0 32px rgba(60,140,255,.35), inset -16px -16px 40px rgba(0,0,0,.5);
  transition:filter .4s ease, box-shadow .4s ease}
.globe-strip{position:absolute;top:0;left:0;height:100%;width:200%;display:flex}
.hemi{position:relative;width:50%;height:100%;flex:0 0 50%}
.land{position:absolute;background:#3fa869;
  box-shadow:inset -6px -8px 14px rgba(0,0,0,.35), inset 4px 4px 10px rgba(255,255,255,.12)}
.land1{width:56%;height:46%;top:8%;left:20%;
  clip-path:polygon(30% 0%,55% 5%,70% 18%,90% 15%,100% 35%,85% 48%,90% 65%,70% 78%,60% 100%,40% 92%,22% 100%,15% 75%,0% 60%,10% 38%,0% 20%,20% 10%)}
.land2{width:26%;height:30%;bottom:6%;left:4%;background:#4bb36f;
  clip-path:polygon(20% 0%,60% 10%,80% 30%,70% 55%,85% 75%,55% 100%,20% 90%,0% 60%,10% 25%)}
.land3{width:16%;height:14%;top:16%;right:6%;background:#3a9c60;
  clip-path:polygon(15% 0%,85% 10%,100% 55%,70% 100%,10% 80%,0% 30%)}
.clouds{position:absolute;inset:-6% -4%;mix-blend-mode:screen;opacity:.8;
  background:
    radial-gradient(ellipse 40% 14% at 20% 25%, rgba(255,255,255,.85) 0%, transparent 70%),
    radial-gradient(ellipse 30% 10% at 65% 15%, rgba(255,255,255,.7) 0%, transparent 70%),
    radial-gradient(ellipse 45% 16% at 70% 60%, rgba(255,255,255,.75) 0%, transparent 70%),
    radial-gradient(ellipse 32% 12% at 25% 75%, rgba(255,255,255,.65) 0%, transparent 70%),
    radial-gradient(ellipse 26% 10% at 45% 45%, rgba(255,255,255,.6) 0%, transparent 70%)}
.heat-overlay{position:absolute;inset:0;opacity:0;mix-blend-mode:color;transition:opacity .6s ease;
  background:radial-gradient(circle at 35% 30%, #ffb199 0%, #ff5a3c 45%, #7a1a0f 100%)}
.ice-overlay{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;
  background:
    radial-gradient(ellipse 46% 20% at 30% 26%, rgba(255,255,255,.95) 0%, transparent 75%),
    radial-gradient(ellipse 40% 16% at 62% 64%, rgba(255,255,255,.85) 0%, transparent 75%),
    radial-gradient(circle at 38% 30%, #ffffff 0%, #eaf5ff 40%, #c3ddf2 72%, #9dbfdd 100%)}
.earth-wrap.extreme-heat .earth{box-shadow:0 0 45px rgba(255,90,60,.55), inset -16px -16px 40px rgba(0,0,0,.5)}
.earth-wrap.extreme-ice .earth{box-shadow:0 0 46px rgba(190,225,255,.85), inset -14px -14px 36px rgba(90,130,170,.45)}
.earth-wrap.extreme-ice .earth .land{filter:saturate(.15) brightness(1.5)}
.earth-wrap.extreme-ice .earth .clouds{opacity:.25}


/* ===== ocean: 乾燥・水没の演出 ===== */
.dry-overlay{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;mix-blend-mode:multiply;z-index:2;
  background:radial-gradient(circle at 35% 30%, #d4a060 0%, #a06830 45%, #503010 100%)}
.flood-overlay{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;z-index:2;
  background:radial-gradient(circle at 35% 30%, #57c4ff 0%, #1f6fd6 50%, #0a2a5e 100%)}
.flood-overlay::after{content:"";position:absolute;inset:0;mix-blend-mode:screen;
  background:repeating-linear-gradient(105deg, transparent 0 9px, rgba(255,255,255,.13) 9px 11px, transparent 11px 24px);
  animation:waveMove 4s linear infinite}
@keyframes waveMove{from{background-position:0 0}to{background-position:48px 0}}
.earth .land{transform:scale(var(--lscale,1));transform-origin:50% 50%;
  transition:transform .5s ease, filter .5s ease, opacity .5s ease;opacity:var(--lopacity,1)}
.earth-wrap.dryworld .land{filter:sepia(.9) saturate(1.4) hue-rotate(-12deg) brightness(1.12)}
.earth-wrap.dryworld .clouds{opacity:.25}

/* ===== jupiter: 隕石衝突リスク表現 ===== */
.earth-wrap.vulnerable{animation:earthShake 0.15s ease-in-out infinite}
@keyframes earthShake{0%,100%{transform:translate(0,0)}25%{transform:translate(-2px,1px)}50%{transform:translate(2px,-1px)}75%{transform:translate(-1px,-2px)}}
.impact-flash{position:absolute;inset:0;opacity:0;z-index:5;pointer-events:none;
  background:radial-gradient(circle at 60% 35%, #fff 0%, #ffa500 25%, transparent 55%);
  transition:opacity .1s}
.impact-flash.on{opacity:0.9}

/* ===== walk: 宇宙の暗さ表現 ===== */
.space-overlay{position:absolute;inset:0;opacity:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 30%, #0a0a20 100%);
  transition:opacity .5s ease}

/* ===== gravity: 大気流出表現 ===== */
.atmo-escape{position:absolute;inset:-10%;opacity:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 50% 50%, transparent 40%, rgba(100,180,255,0.3) 55%, transparent 70%);
  animation:atmoFloat 3s ease-in-out infinite;transition:opacity .5s ease}
@keyframes atmoFloat{0%,100%{transform:scale(1)}50%{transform:scale(1.15)}}
.earth-wrap.atmo-thin .clouds{opacity:0.2}

/* ===== lightning: 稲妻・フラッシュ・嵐 ===== */
.bolt{position:absolute;width:13%;height:36%;opacity:0;z-index:4;pointer-events:none;
  background:linear-gradient(#ffffff, #ffd166 70%, #ff9a3c);
  clip-path:polygon(46% 0%, 68% 0%, 52% 34%, 70% 34%, 30% 100%, 44% 52%, 26% 52%);
  filter:drop-shadow(0 0 7px rgba(255,220,110,.95))}
.bolt.on{opacity:1}
.flash-layer{position:absolute;inset:0;opacity:0;z-index:3;pointer-events:none;
  background:radial-gradient(circle at 50% 28%, rgba(255,255,240,.6) 0%, rgba(255,255,240,.12) 55%, transparent 75%)}
.flash-layer.on{opacity:1}
.earth.stormy .clouds{opacity:1;filter:brightness(.5) contrast(1.25)}
.earth.stormy{filter:brightness(.86)}
.earth.clearsky .clouds{opacity:.3}

/* ===== magnet: オーロラリング ===== */
.aurora-ring{position:absolute;inset:-18px;border-radius:50%;pointer-events:none;z-index:5;
  opacity:0;transition:opacity .5s ease, transform .5s ease;
  background:conic-gradient(from 0deg,
    rgba(80,255,180,.0) 0deg, rgba(80,255,180,.7) 15deg, rgba(120,200,255,.5) 30deg,
    rgba(180,100,255,.6) 45deg, rgba(80,255,180,.0) 60deg,
    rgba(80,255,180,.0) 120deg, rgba(80,255,180,.7) 135deg, rgba(120,200,255,.5) 150deg,
    rgba(180,100,255,.6) 165deg, rgba(80,255,180,.0) 180deg,
    rgba(80,255,180,.0) 240deg, rgba(80,255,180,.7) 255deg, rgba(120,200,255,.5) 270deg,
    rgba(180,100,255,.6) 285deg, rgba(80,255,180,.0) 300deg,
    rgba(80,255,180,.0) 360deg);
  mask:radial-gradient(circle, transparent 58%, black 62%, black 78%, transparent 82%);
  -webkit-mask:radial-gradient(circle, transparent 58%, black 62%, black 78%, transparent 82%);
  filter:blur(3px);animation:auroraShimmer 3s ease-in-out infinite}
.aurora-ring.visible{opacity:1}
.aurora-ring.weak{transform:scale(1.15);filter:blur(4px)}
.aurora-ring.equator{transform:scale(1.5);filter:blur(5px)}
@keyframes auroraShimmer{0%,100%{filter:blur(3px) brightness(1)}50%{filter:blur(4px) brightness(1.3)}}
@media (prefers-reduced-motion: reduce){.aurora-ring{animation:none}}
.solar-wind{position:absolute;inset:-5%;opacity:0;z-index:1;pointer-events:none;
  background:linear-gradient(135deg, rgba(255,100,50,0.4) 0%, rgba(255,200,100,0.2) 30%, transparent 60%);
  animation:solarHit 1.5s ease-in-out infinite;transition:opacity .5s ease}
@keyframes solarHit{0%,100%{opacity:0.3;transform:translateX(-5%)}50%{opacity:1;transform:translateX(0)}}

/* ===== reddwarf: 主星ビジュアル ===== */
.star-mini{position:absolute;left:-50px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border-radius:50%;z-index:0;
  background:radial-gradient(circle at 35% 30%, #fff8e0 0%, #ffd166 40%, #e08a2e 80%, #b05a10 100%);
  box-shadow:0 0 20px rgba(255,200,80,.7), 0 0 40px rgba(255,180,60,.4);
  transition:width .4s ease, height .4s ease, background .4s ease, box-shadow .4s ease, filter .4s ease}
.star-mini.reddwarf{background:radial-gradient(circle at 35% 30%, #ffccaa 0%, #ff7744 40%, #cc3300 80%, #881100 100%);
  box-shadow:0 0 14px rgba(255,100,50,.6), 0 0 28px rgba(200,60,30,.3)}
.star-mini.bright{background:radial-gradient(circle at 35% 30%, #ffffff 0%, #fffae0 30%, #ffd166 70%, #e0a020 100%);
  box-shadow:0 0 28px rgba(255,230,120,.8), 0 0 50px rgba(255,200,80,.5)}
.star-mini.pulse{animation:starPulse 2s ease-in-out infinite}
@keyframes starPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@media (prefers-reduced-motion: reduce){.star-mini{animation:none}}

/* ===== oxygen: 巨大昆虫ビジュアル ===== */
.bug-icon{position:absolute;right:-45px;top:50%;transform:translateY(-50%);
  font-size:24px;opacity:0.7;transition:font-size .4s ease, opacity .4s ease;z-index:2}
.bug-icon.giant{font-size:48px;opacity:1}
.bug-icon.mega{font-size:64px;opacity:1;animation:bugFly 2s ease-in-out infinite}
.bug-icon.tiny{font-size:14px;opacity:0.4}
@keyframes bugFly{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-55%) translateX(5px)}}
@media (prefers-reduced-motion: reduce){.bug-icon{animation:none}}

/* ===== plate: 火山活動ビジュアル ===== */
.volcano-spots{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:4;opacity:0;transition:opacity .5s ease}
.volcano-spots.active{opacity:1}
.volcano-spot{position:absolute;width:8px;height:8px;border-radius:50%;
  background:radial-gradient(circle, #ff6633 0%, #ff3300 50%, transparent 70%);
  box-shadow:0 0 6px rgba(255,80,30,.8);animation:volcanoGlow 1.5s ease-in-out infinite}
.volcano-spot:nth-child(1){top:22%;left:28%;animation-delay:0s}
.volcano-spot:nth-child(2){top:55%;left:18%;animation-delay:0.4s}
.volcano-spot:nth-child(3){top:38%;left:72%;animation-delay:0.8s}
.volcano-spot:nth-child(4){top:68%;left:58%;animation-delay:0.2s}
.volcano-spot:nth-child(5){top:15%;left:55%;animation-delay:0.6s}
.volcano-spots.fast .volcano-spot{animation-duration:0.7s;width:12px;height:12px;box-shadow:0 0 10px rgba(255,80,30,1)}
.volcano-spots.stopped .volcano-spot{opacity:0}
@keyframes volcanoGlow{0%,100%{opacity:.6;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
@media (prefers-reduced-motion: reduce){.volcano-spot{animation:none;opacity:0.8}}

/* ===== テラちゃん(観測衛星型) ===== */
.mascot{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;
  animation:bob 3.2s ease-in-out infinite;padding-top:14px}
/* 浮遊量はCSS変数で可変(重力スライダーと連動) */
@keyframes bob{0%,100%{transform:translateY(var(--float-base,0px))}
  50%{transform:translateY(calc(var(--float-base,0px) - var(--float-amp,7px)))}}
/* 機体全体:斜めの飛行姿勢 */
.sat{position:relative;width:104px;height:62px;transform:rotate(-9deg)}
/* アンテナ+受信灯(チカチカ) */
.antenna{position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:2px;height:11px;
  background:#bfe9df;border-radius:2px;z-index:3}
.tip{position:absolute;top:-15px;left:50%;transform:translateX(-50%);width:7px;height:7px;border-radius:50%;
  background:#ffd166;box-shadow:0 0 8px rgba(255,209,102,.9);animation:blink 2.2s ease-in-out infinite;z-index:3}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
/* ソーラーパネルの羽(片側2枚+ブーム)。ゆっくり羽ばたく */
.wing{position:absolute;top:20px;height:22px;display:flex;align-items:center;gap:2px;z-index:1;
  transform-origin:center}
.wing.l{left:0;animation:flapL 3.2s ease-in-out infinite}
.wing.r{right:0;animation:flapR 3.2s ease-in-out infinite}
@keyframes flapL{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(-10deg)}}
@keyframes flapR{0%,100%{transform:rotate(4deg)}50%{transform:rotate(10deg)}}
.wing i{display:block;width:14px;height:22px;border-radius:3px;border:1.5px solid #bfe9df;
  background-color:#123c36;
  background-image:linear-gradient(rgba(94,234,212,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(94,234,212,.55) 1px,transparent 1px);
  background-size:5px 8px}
.wing b{display:block;width:7px;height:2px;background:#bfe9df}
/* カプセルボディ */
.mascot-body{position:absolute;top:5px;left:35px;width:34px;height:52px;z-index:2;
  border-radius:16px 16px 14px 14px;
  background:radial-gradient(circle at 35% 22%, #eafffa 0%, #5eead4 52%, #1f9e8c 100%);
  box-shadow:0 6px 14px rgba(0,0,0,.4), inset -5px -6px 9px rgba(0,0,0,.15)}
.eye{position:absolute;top:16px;width:5px;height:7px;border-radius:50%;background:#0b1220}
.eye.l{left:7px}.eye.r{right:7px}
.blush{position:absolute;top:27px;width:6px;height:4px;border-radius:50%;background:#ff9d8a;opacity:.7}
.blush.l{left:4px}.blush.r{right:4px}
/* データの尾:機体下部から流れる観測データの光 */
.tail{position:absolute;bottom:-15px;left:50%;width:9px;height:20px;z-index:1;opacity:.85;
  border-radius:50% 50% 60% 60%/40% 40% 80% 80%;
  background:linear-gradient(180deg, rgba(94,234,212,.9) 0%, rgba(150,140,255,.4) 55%, transparent 100%);
  transform-origin:top center;animation:sway 2.6s ease-in-out infinite}
@keyframes sway{0%,100%{transform:translateX(-50%) rotate(8deg)}50%{transform:translateX(-50%) rotate(-10deg)}}
/* 表情差分(強化版: 体色・アンテナ警告灯・吹き出し・動きで状態を伝える) */
/* --- あつい --- */
.face-hot .eye{height:2px;top:19px;border-radius:2px}
.face-hot .sweat{position:absolute;top:3px;right:-5px;width:7px;height:11px;border-radius:50% 50% 60% 60%;
  background:#9adcff;opacity:.95;animation:sweatdrip 1.1s ease-in infinite}
.face-hot .mascot-body{background:radial-gradient(circle at 35% 22%, #ffe9df 0%, #ff9d7a 52%, #d95f3b 100%)}
.face-hot .blush{opacity:1;width:8px;background:#ff5c3d}
.face-hot .tip{background:#ff5c5c;box-shadow:0 0 14px rgba(255,92,92,.9);animation:alertblink .55s steps(2,end) infinite}
.face-hot .speech{border-color:var(--danger);box-shadow:0 0 16px rgba(255,107,74,.28),0 6px 18px rgba(0,0,0,.35)}
.face-hot .speech::after{border-color:transparent transparent #101d38 transparent}
.face-hot{animation:bob 3.2s ease-in-out infinite, hotpant .5s ease-in-out infinite}
@keyframes hotpant{0%,100%{margin-top:0}50%{margin-top:2px}}
@keyframes sweatdrip{0%{transform:translateY(0);opacity:.95}80%{opacity:.9}100%{transform:translateY(9px);opacity:0}}
@keyframes alertblink{0%,100%{opacity:1}50%{opacity:.25}}
/* --- さむい --- */
.face-cold .sat{filter:hue-rotate(35deg) saturate(.55) brightness(.92)}
.face-cold .mascot-body{background:radial-gradient(circle at 35% 22%, #eef6ff 0%, #a9c9f0 52%, #5f7fb6 100%)}
.face-cold .blush{background:#9fb8dd;opacity:.9}
.face-cold .tip{background:#bfe3ff;box-shadow:0 0 12px rgba(150,200,255,.9)}
.face-cold .speech{border-color:#7fb4ff;box-shadow:0 0 14px rgba(127,180,255,.22),0 6px 18px rgba(0,0,0,.35)}
.face-cold .mascot-body::after{content:"❄";position:absolute;top:-14px;left:-12px;font-size:11px;color:#bfe3ff;
  animation:snowbob 1.8s ease-in-out infinite}
@keyframes snowbob{0%,100%{transform:translateY(0);opacity:.9}50%{transform:translateY(4px);opacity:.5}}
.face-cold{animation:bob 3.2s ease-in-out infinite, shiver .14s linear infinite}
@keyframes shiver{0%,100%{margin-left:0}50%{margin-left:3px}}
/* --- ふらふら(非常事態) --- */
.face-dizzy .eye{background:transparent;border:0;width:9px;height:9px}
.face-dizzy .eye::before,.face-dizzy .eye::after{content:"";position:absolute;left:50%;top:50%;
  width:10px;height:2.4px;background:#0b1220;border-radius:2px}
.face-dizzy .eye::before{transform:translate(-50%,-50%) rotate(45deg)}
.face-dizzy .eye::after{transform:translate(-50%,-50%) rotate(-45deg)}
.face-dizzy .tip{background:#ff5c5c;box-shadow:0 0 14px rgba(255,92,92,.9);animation:alertblink .4s steps(2,end) infinite}
.face-dizzy .speech{border-color:var(--danger);box-shadow:0 0 16px rgba(255,107,74,.3),0 6px 18px rgba(0,0,0,.35)}
.face-dizzy{animation:bob 3.2s ease-in-out infinite, wobble 1.1s ease-in-out infinite}
@keyframes wobble{0%,100%{rotate:0deg}25%{rotate:-8deg}75%{rotate:8deg}}
/* --- うれしい --- */
.face-happy .eye{background:transparent;border:0;border-top:2.5px solid #0b1220;
  border-radius:50% 50% 0 0;width:7px;height:4px;top:18px}
.face-happy .blush{opacity:.95}
.face-happy .tip{animation:tipglow 2.2s ease-in-out infinite}
@keyframes tipglow{0%,100%{box-shadow:0 0 8px rgba(255,209,102,.5)}50%{box-shadow:0 0 16px rgba(255,209,102,.95)}}

.speech{position:relative;margin-top:8px;background:#101d38;border:1px solid var(--line);
  border-radius:12px;padding:8px 12px;font-family:'Zen Maru Gothic',sans-serif;font-size:13.5px;
  width:150px;text-align:center;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.speech::after{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);
  border-width:0 5px 7px 5px;border-style:solid;border-color:transparent transparent #101d38 transparent}
.speech .name{color:var(--teal);font-size:11px;display:block;margin-bottom:2px}


/* ===== ルナ(月担当・常連さんにだけ見える) ===== */
.luna{display:flex;flex-direction:column;align-items:center;flex:0 0 auto;
  animation:bob 4.4s ease-in-out infinite;padding-top:30px}
.luna[hidden]{display:none}
.lsat{position:relative;width:64px;height:46px;transform:rotate(7deg)}
.lant{position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:2px;height:9px;
  background:#efe0b0;border-radius:2px;z-index:3}
.ltip{position:absolute;top:-12px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;
  background:#9adcff;box-shadow:0 0 7px rgba(154,220,255,.9);animation:blink 3.4s ease-in-out infinite;z-index:3}
.lwing{position:absolute;top:15px;height:15px;display:flex;align-items:center;z-index:1}
.lwing.l{left:7px}.lwing.r{right:7px}
.lwing i{display:block;width:11px;height:15px;border-radius:2px;border:1.5px solid #efe0b0;
  background-color:#3d3820;
  background-image:linear-gradient(rgba(255,233,168,.5) 1px,transparent 1px);background-size:4px 5px}
.lbody{position:absolute;top:4px;left:21px;width:22px;height:38px;z-index:2;
  border-radius:11px 11px 9px 9px;
  background:radial-gradient(circle at 35% 22%, #fff8e1 0%, #ffe9a8 55%, #c9a24b 100%);
  box-shadow:0 5px 10px rgba(0,0,0,.4), inset -3px -4px 6px rgba(0,0,0,.15)}
.leye{position:absolute;top:13px;width:5px;height:2px;border-radius:2px;background:#0b1220}
.leye.l{left:4px}.leye.r{right:4px}
.lcap{margin-top:8px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--sub);letter-spacing:.1em}

/* ===== 観測ポスト(送信フォーム) ===== */
[hidden]{display:none !important}
.obs-form{display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-radius:14px;padding:18px 16px;margin:14px 0}
.obs-form label{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--sub)}
.obs-form input[type=text],.obs-form input[type=email],.obs-form select,.obs-form textarea{
  background:var(--bg);border:1px solid var(--line);border-radius:8px;color:var(--text);
  padding:10px 11px;font-family:'Noto Sans JP',sans-serif;font-size:14px}
.obs-form input:focus,.obs-form select:focus,.obs-form textarea:focus{outline:none;border-color:var(--teal)}
.obs-form textarea{resize:vertical}
.obs-form button{align-self:flex-start;cursor:pointer}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
/* ===== スライダー ===== */
.slider-panel{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-radius:14px;padding:16px}
.slider-panel .label{font-size:14px;color:var(--sub);margin-bottom:2px}
.slider-panel .value{font-family:'JetBrains Mono',monospace;font-size:22px;font-weight:700;
  color:var(--teal);margin-bottom:8px}
.slider-panel.danger .value{color:var(--danger)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;background:var(--line);
  border-radius:2px;outline:none;margin:12px 0 6px}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--teal);cursor:pointer;border:2px solid #082;box-shadow:0 0 10px rgba(94,234,212,.7);
  animation:thumbPulse 1.8s ease-out 4}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;
  background:var(--teal);cursor:pointer;border:2px solid #082;box-shadow:0 0 10px rgba(94,234,212,.7);
  animation:thumbPulse 1.8s ease-out 4}
@keyframes thumbPulse{0%{box-shadow:0 0 10px rgba(94,234,212,.7),0 0 0 0 rgba(94,234,212,.55)}
  70%{box-shadow:0 0 10px rgba(94,234,212,.7),0 0 0 14px rgba(94,234,212,0)}
  100%{box-shadow:0 0 10px rgba(94,234,212,.7),0 0 0 0 rgba(94,234,212,0)}}
.drag-hint{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px;color:var(--gold);
  margin:2px 0 6px;letter-spacing:.02em}
.drag-hint .dh-hand{display:inline-block;margin-right:4px;animation:dhBounce 1.3s ease-in-out infinite}
@keyframes dhBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion: reduce){
  input[type=range]::-webkit-slider-thumb{animation:none}
  input[type=range]::-moz-range-thumb{animation:none}
  .drag-hint .dh-hand{animation:none}}
.scale{display:flex;justify-content:space-between;font-family:'JetBrains Mono',monospace;
  font-size:11px;color:var(--sub);position:relative}
.scale .warn{color:var(--danger)}
.scale .now{position:absolute;left:var(--now,50%);transform:translateX(-50%)}
.why{margin-top:10px;font-size:13px;color:var(--sub);line-height:1.65;
  border-top:1px dashed var(--line);padding-top:8px}

/* ===== readout ===== */
.readout{position:relative;z-index:1;max-width:640px;margin:6px auto 0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.readout.cols3{grid-template-columns:repeat(3,1fr)}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:8px 6px;text-align:center}
.card .k{font-size:11px;color:var(--sub);font-family:'JetBrains Mono',monospace;letter-spacing:.02em}
.card .v{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:700;margin-top:3px}

footer.site{position:relative;z-index:1;text-align:center;color:var(--sub);font-size:12px;
  padding:28px 16px 34px;font-family:'JetBrains Mono',monospace;border-top:1px solid var(--line);margin-top:48px}
footer.site .flinks{margin-bottom:8px;font-family:'Noto Sans JP',sans-serif;font-size:13px}
footer.site .flinks a{margin:0 8px;color:var(--sub)}

/* ===== かけあいコーナー ===== */
.talk{border:1px solid var(--line);border-radius:14px;background:var(--bg2);padding:16px 14px 12px;margin:22px 0 8px}
.talk .talk-title{font-family:'Zen Maru Gothic',sans-serif;font-weight:900;font-size:14.5px;color:var(--gold);margin-bottom:12px;letter-spacing:.03em}
.talk .avwrap{flex:0 0 auto;width:48px}
.ava{display:block;width:46px;height:46px;border-radius:50%;position:relative;border:2px solid var(--line);background:#0e1730}
.svgdefs{position:absolute;width:0;height:0;overflow:hidden}
.ava svg{position:absolute;inset:0;width:100%;height:100%;border-radius:50%}
.ava-cap{display:block;font-size:10px;color:var(--sub);text-align:center;margin-top:4px;font-family:'Zen Maru Gothic',sans-serif}
.ava .face{position:absolute;inset:0;border-radius:50%;overflow:hidden}
.ava .eye{position:absolute;top:19px;width:7px;height:9px;border-radius:50%;background:#20303f;z-index:3}
.ava .eye::after{content:"";position:absolute;left:1.5px;top:1.5px;width:3px;height:3px;border-radius:50%;background:#fff}
.ava .eye.l{left:11px}.ava .eye.r{right:11px}
.ava .blush{position:absolute;top:27px;width:8px;height:5px;border-radius:50%;background:rgba(255,145,165,.55);z-index:3}
.ava .blush.l{left:5px}.ava .blush.r{right:5px}
.ava .mouth{position:absolute;left:50%;top:28px;transform:translateX(-50%);width:8px;height:4.5px;border-radius:0 0 9px 9px;background:#e2606f;z-index:3}
.ava .mouth::after{content:"";position:absolute;left:1.5px;bottom:.5px;width:5px;height:2px;border-radius:0 0 6px 6px;background:#ff9aa8}
.ava.tera .face{background:radial-gradient(circle at 38% 26%, #eafff8 0%, #a9ecd9 45%, #6fd3ba 100%)}
.ava.tera .ant{position:absolute;left:50%;top:-9px;transform:translateX(-50%);width:2px;height:9px;background:#6fd3ba;z-index:1}
.ava.tera .ant::after{content:"";position:absolute;left:50%;top:-5px;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 6px rgba(255,209,102,.8)}
.trow{display:flex;gap:10px;align-items:flex-start;margin:13px 0}
.trow.right{flex-direction:row-reverse}
.tb{max-width:76%;border-radius:14px;padding:9px 13px;font-size:14.5px;line-height:1.75;position:relative}
.trow .tb{background:#1a2947;border:1px solid var(--line);border-top-left-radius:4px}
.trow.right .tb{background:rgba(94,234,212,.12);border:1px solid rgba(94,234,212,.4);border-top-right-radius:4px}
.tb .who{display:block;font-family:'Zen Maru Gothic',sans-serif;font-size:10.5px;font-weight:700;color:var(--sub);margin-bottom:2px}
.trow.right .tb .who{color:var(--teal);text-align:right}
.tb.punch{background:rgba(255,209,102,.13);border-color:rgba(255,209,102,.55)}
.tb .tele{margin-top:8px;padding-top:7px;border-top:1px dashed rgba(255,209,102,.4);font-size:12px;line-height:1.6;color:var(--sub)}
.tb .tele::before{content:"※ ";color:var(--gold)}

/* ===== 図鑑の絞りこみ ===== */
.zukan-filter{margin:6px 0 14px}
.zukan-filter input[type=search]{width:100%;box-sizing:border-box;background:var(--bg2);border:1px solid var(--line);
  border-radius:10px;color:var(--text);padding:10px 12px;font-family:'Noto Sans JP',sans-serif;font-size:15px;margin-bottom:10px}
.zukan-filter input[type=search]:focus{outline:none;border-color:var(--teal)}
.zukan-filter input[type=search]::placeholder{color:var(--sub)}
.cat-chips{display:flex;flex-wrap:wrap;gap:6px}
.cat-chip{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px;border:1px solid var(--line);
  color:var(--sub);background:var(--bg2);border-radius:99px;padding:6px 13px;cursor:pointer;
  transition:border-color .2s,color .2s,background .2s}
.cat-chip:hover{border-color:var(--teal);color:var(--teal)}
.cat-chip.on{border-color:var(--teal);color:#04211c;background:var(--teal)}
.filter-count{margin-top:8px;font-size:12.5px;color:var(--sub);min-height:1em}
.zcard.hide{display:none}

@media (max-width:560px){
  .stage{gap:12px}
  .earth-wrap{width:110px;height:110px}
  .speech{width:130px}
  .readout{grid-template-columns:repeat(2,1fr)}
  .readout.cols3{grid-template-columns:repeat(3,1fr)}
}
@media (prefers-reduced-motion: reduce){
  .mascot,.face-cold,.face-dizzy,.face-hot,.sweat,.tail,.tip,.wing.l,.wing.r,.luna,.ltip{animation:none}
  .flood-overlay::after{animation:none}
  .globe-strip{animation:none !important}
  a.zcard:hover{transform:none}
}

.hero{text-align:center;padding:28px 0 8px}
.hero .copy{font-family:'Zen Maru Gothic',sans-serif;font-size:26px;font-weight:700;margin:6px 0 2px}
.hero .copy em{color:var(--teal);font-style:normal}
.teaser{max-width:560px;margin:14px auto 0;background:linear-gradient(180deg,var(--bg2),#0a1226);
  border:1px solid var(--line);border-radius:16px;padding:16px}
.teaser .readout{grid-template-columns:repeat(2,1fr);max-width:340px}
.cta-row{text-align:center;margin:16px 0 6px}
.section-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.section-head .more{font-size:12px}
.qa-teaser{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-radius:14px;padding:14px 18px}
.qa-teaser .q{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15.5px;color:var(--teal)}
.qa-teaser .a{font-size:14px;margin-top:6px}

.profile{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;margin:14px 0}
.pcard{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.pcard .k{font-family:'JetBrains Mono',monospace;font-size:10px;letter-spacing:.15em;color:var(--teal)}
.pcard .v{font-size:14.5px;margin-top:4px}
.faces{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin:20px 0;
  background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);border-radius:16px;padding:22px 12px 14px}
.face-item{display:flex;flex-direction:column;align-items:center;gap:10px}
.face-item .cap{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--sub)}
.face-item .mascot{animation:none;padding-top:0}
.face-item .face-cold,.face-item .face-dizzy{animation:shiver .18s linear infinite}
.face-item .face-dizzy{animation:wobble 1.4s ease-in-out infinite}
.tlog{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.tlog .entry{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-left:3px solid var(--teal);border-radius:0 12px 12px 0;padding:10px 14px;
  font-family:'Zen Maru Gothic',sans-serif;font-size:14px;line-height:1.75}
.tlog .d{display:block;font-family:'JetBrains Mono',monospace;font-size:10px;
  letter-spacing:.15em;color:var(--teal);margin-bottom:3px}

details{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-radius:14px;padding:0;margin:10px 0;overflow:hidden}
summary{cursor:pointer;padding:13px 16px;font-family:'Zen Maru Gothic',sans-serif;font-weight:700;
  font-size:15.5px;color:var(--teal);list-style:none;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;color:var(--sub);font-family:'JetBrains Mono',monospace}
details[open] summary::after{content:"−"}
details .body{padding:0 16px 14px;font-size:15px;line-height:1.8}
details .tera{margin-top:8px;font-family:'Zen Maru Gothic',sans-serif;font-size:13.5px;color:var(--teal)}

.sticky-panel{position:sticky;top:0;z-index:20;
  background:radial-gradient(circle at 25% 10%, #14213f 0%, transparent 55%), var(--bg);
  padding:8px 16px 12px;box-shadow:0 12px 24px -12px rgba(0,0,0,.6);border-bottom:1px solid var(--line)}
.presets{position:relative;z-index:1;max-width:640px;margin:8px auto 0;display:flex;gap:6px;
  overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch}
.preset{flex:0 0 auto;font-family:'Zen Maru Gothic',sans-serif;font-size:12.5px;font-weight:700;
  border:1px solid var(--line);color:var(--sub);background:var(--bg2);border-radius:99px;
  padding:5px 12px;cursor:pointer;transition:border-color .2s,color .2s}
.preset:hover{border-color:var(--teal);color:var(--teal)}
.sliders-scroll{position:relative;z-index:1;max-width:640px;margin:18px auto 40px;padding:0 16px;
  display:flex;flex-direction:column;gap:14px}
.missions{background:linear-gradient(180deg,#0f1c38,#0a1226);border:1px solid var(--line);
  border-radius:14px;padding:14px 16px}
.missions .mh{display:flex;justify-content:space-between;align-items:baseline}
.missions .mh .t{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:15px;color:var(--teal)}
.missions .mh .c{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--sub)}
.mission{display:flex;gap:8px;align-items:baseline;font-size:13.5px;padding:6px 4px;
  border-bottom:1px dashed var(--line);transition:background .4s}
.mission:last-child{border-bottom:0}
.mission .chk{font-family:'JetBrains Mono',monospace;color:var(--sub);flex:0 0 auto}
.mission.done .chk{color:var(--teal)}
.mission.done .mt{color:var(--teal)}
.mission.flash{background:rgba(94,234,212,.12);border-radius:8px}
.toolbar{display:flex;gap:8px;justify-content:center;margin-top:8px}
.toolbar .btn{font-size:12px;padding:6px 14px}
/* --- スマホ: 固定パネルを圧縮して、下のスライダー操作スペースを確保 --- */
@media (max-width:600px){
  .sticky-panel{padding:4px 12px 8px}
  .sticky-panel .stage{gap:8px;padding:2px 0}
  .sticky-panel .earth-wrap{width:84px;height:84px}
  .sticky-panel .mascot{transform:scale(.82);transform-origin:top center;margin:-4px 0 -18px}
  .sticky-panel .speech{width:118px;font-size:10.5px}
  .sticky-panel .readout{grid-template-columns:repeat(4,1fr);gap:5px;margin-top:2px}
  .sticky-panel .card{padding:4px 2px;border-radius:8px}
  .sticky-panel .card .k{font-size:8px}
  .sticky-panel .card .v{font-size:12px}
  .sticky-panel .presets{margin-top:5px}
  .sticky-panel .preset{font-size:10.5px;padding:4px 10px}
}

.article-hero{text-align:center;padding-top:26px}
.minisim{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px solid var(--line);
  border-radius:16px;padding:16px;margin:18px 0}
.minisim .readout{margin-top:10px}
.relnav{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0}
.relnav a{flex:1 1 200px}
.mini-moon{width:26px;height:26px;border-radius:50%;flex:0 0 auto;align-self:flex-start;margin-top:8px;
  background:radial-gradient(circle at 35% 30%, #fffbe8 0%, #ffe9a8 55%, #b39440 100%);
  box-shadow:0 0 14px rgba(255,233,168,.5);transition:transform .3s ease,opacity .3s ease}
/* --- 子ども向けビジュアル: 距離レーン+見かけの太陽 --- */
.kidviz{display:flex;gap:14px;align-items:stretch;margin:12px 0 4px}
.dist-lane{flex:1;position:relative;background:linear-gradient(90deg,rgba(255,209,102,.12),rgba(11,18,32,0));
  border:1px solid var(--line);border-radius:12px;padding:10px 14px 20px;min-width:0}
.dist-lane .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:8px}
.lane-row{position:relative;height:34px}
.sunball{position:absolute;left:0;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#ffd166 55%,#e08a2e 100%);
  box-shadow:0 0 18px rgba(255,209,102,.65)}
.lane-track{position:absolute;left:40px;right:12px;top:50%;height:2px;background:var(--line)}
.lane-tick{position:absolute;top:-7px;width:2px;height:16px;background:rgba(94,234,212,.55)}
.lane-tick::after{content:"いま";position:absolute;top:17px;left:50%;transform:translateX(-50%);
  font-size:9px;color:var(--teal);white-space:nowrap}
.lane-earth{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-50%);transition:left .15s ease;
  background:radial-gradient(circle at 35% 30%,#bfe3ff 0%,#4fb3ff 55%,#0a2f63 100%);
  box-shadow:0 0 10px rgba(79,179,255,.6)}
.skysun{flex:0 0 96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:8px 6px}
.skysun-stagebox{width:80px;height:56px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.skysun-circle{width:34px;height:34px;border-radius:50%;transition:width .15s ease,height .15s ease;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#ffd166 55%,#e08a2e 100%);
  box-shadow:0 0 16px rgba(255,209,102,.7)}
.skysun-cap{font-size:9.5px;color:var(--sub);text-align:center;line-height:1.4}
.skysun-val{color:var(--gold);font-size:12px;font-family:'JetBrains Mono',monospace}
.value .vsub{display:block;font-size:10.5px;color:var(--sub);font-weight:400;font-family:'Noto Sans JP',sans-serif;margin-top:1px}
@media (max-width:420px){.skysun{flex-basis:84px}.skysun-stagebox{width:70px}}
.earthball{position:absolute;left:0;top:50%;transform:translateY(-50%);width:26px;height:26px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#bfe3ff 0%,#4fb3ff 55%,#0a2f63 100%);
  box-shadow:0 0 14px rgba(79,179,255,.55)}
.lane-moon{position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  transform:translate(-50%,-50%);transition:left .15s ease,width .15s ease,height .15s ease;
  background:radial-gradient(circle at 35% 30%,#fffbe8 0%,#ffe9a8 55%,#b39440 100%);
  box-shadow:0 0 10px rgba(255,233,168,.6)}
/* 楕円軌道ビジュアル */
.orbit-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);
  padding:10px 14px 8px;margin:12px 0 4px}
.orbit-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:4px}
.orbit-stage{position:relative;height:130px;overflow:hidden}
.ov-oval{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  border:2px dashed rgba(94,234,212,.55);border-radius:50%;
  transition:width .15s ease,height .15s ease}
.ov-sun{position:absolute;top:50%;width:22px;height:22px;border-radius:50%;
  transform:translate(-50%,-50%);transition:left .15s ease;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#ffd166 55%,#e08a2e 100%);
  box-shadow:0 0 14px rgba(255,209,102,.65)}
.ov-earth{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 35% 30%,#bfe3ff 0%,#4fb3ff 55%,#0a2f63 100%);
  box-shadow:0 0 8px rgba(79,179,255,.6)}
.ov-lab{position:absolute;top:50%;transform:translateY(-50%);font-size:9px;color:var(--sub);white-space:nowrap}
.ov-lab.near{color:var(--gold)}
/* 日食くらべ(bigmoon) */
.eclipse-row{display:flex;gap:12px;align-items:stretch;margin:12px 0 4px}
.ec-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 6px;min-width:0}
.ec-stage{height:70px;display:flex;align-items:center;justify-content:center}
.ec-circle{border-radius:50%;transition:width .15s ease,height .15s ease}
.ec-circle.sun{width:34px;height:34px;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#ffd166 55%,#e08a2e 100%);
  box-shadow:0 0 16px rgba(255,209,102,.7)}
.ec-circle.moon{width:34px;height:34px;
  background:radial-gradient(circle at 35% 30%,#e8edf5 0%,#aeb9cc 55%,#5d6b85 100%);
  box-shadow:0 0 10px rgba(174,185,204,.5)}
.ec-cap{font-size:9.5px;color:var(--sub);text-align:center;line-height:1.4}
.ec-vs{align-self:center;color:var(--sub);font-weight:900;font-size:12px}
/* 空の色バンド(sky) */
.skyband-wrap{border:1px solid var(--line);border-radius:12px;background:var(--bg2);
  padding:10px 14px 8px;margin:12px 0 4px}
.skyband-wrap .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.skyband{position:relative;height:56px;border-radius:10px;overflow:hidden;
  transition:background .25s ease;border:1px solid rgba(255,255,255,.06)}
.skysun-mini{position:absolute;right:14%;top:50%;transform:translate(50%,-50%);
  width:24px;height:24px;border-radius:50%;transition:background .25s ease;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#ffd166 55%,#e08a2e 100%)}
.skyband-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--sub);margin-top:4px}
/* 公転レーン(year) */
.rev-wrap{border:1px solid var(--line);border-radius:12px;background:var(--bg2);
  padding:10px 14px 8px;margin:12px 0 4px}
.rev-wrap .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:4px}
.rev-stage{position:relative;height:120px}
.rev-orbit{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100px;height:100px;border:2px dashed rgba(94,234,212,.5);border-radius:50%}
.rev-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff6d8 0%,#ffd166 55%,#e08a2e 100%);
  box-shadow:0 0 14px rgba(255,209,102,.65)}
.rev-spin{position:absolute;left:50%;top:50%;width:100px;height:100px;
  transform:translate(-50%,-50%);animation:revolve 4s linear infinite;transform-origin:center}
@keyframes revolve{from{transform:translate(-50%,-50%) rotate(0deg)}to{transform:translate(-50%,-50%) rotate(360deg)}}
.rev-earth{position:absolute;left:50%;top:-6.5px;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#bfe3ff 0%,#4fb3ff 55%,#0a2f63 100%);
  box-shadow:0 0 8px rgba(79,179,255,.6)}
@media (prefers-reduced-motion: reduce){.rev-spin{animation:none}}
/* サイズ比較(planetsize) */
.sizecompare{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.sizecompare .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.sizecompare-stage{position:relative;height:120px;display:flex;align-items:center;justify-content:center}
.sc-ref{position:absolute;width:54px;height:54px;border-radius:50%;border:2px dashed rgba(94,234,212,.6);box-sizing:border-box}
.sc-ball{border-radius:50%;transition:width .15s ease,height .15s ease;
  background:radial-gradient(circle at 35% 30%,#bfe3ff 0%,#4fb3ff 55%,#0a2f63 100%);
  box-shadow:0 0 16px rgba(79,179,255,.5)}
.sizecompare-labels{display:flex;justify-content:space-between;font-size:10.5px;color:var(--sub);margin-top:4px}
/* 方位磁針(flip) */
.compass-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 10px;margin:12px 0 4px}
.compass-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.compass{position:relative;width:96px;height:96px;margin:0 auto;border-radius:50%;
  border:2px solid var(--line);background:radial-gradient(circle at 50% 50%,#0e1730,#0b1220)}
.compass-dial{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:4px 0;font-size:11px;font-weight:900;color:var(--sub);pointer-events:none}
.compass-dial span{color:var(--sub)}
.compass-needle{position:absolute;left:50%;top:50%;width:4px;height:74px;transform-origin:center;transform:translate(-50%,-50%);
  transition:transform .25s ease;border-radius:2px;
  background:linear-gradient(180deg,#ff5c4a 0%,#ff5c4a 50%,#e8edf5 50%,#e8edf5 100%)}
/* 海面レーン(water) */
.sealevel-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.sealevel-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.sealevel-stage{position:relative;height:80px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#0e1730 0%,#12233f 100%)}
.sl-land{position:absolute;left:0;right:0;bottom:0;height:100%;
  background:linear-gradient(180deg,transparent 38%,#3a6b3f 38%,#5a8a4a 60%,#7a5a3a 100%);
  clip-path:polygon(0 62%,12% 50%,25% 66%,38% 44%,52% 60%,66% 40%,80% 58%,92% 48%,100% 64%,100% 100%,0 100%)}
.sl-water{position:absolute;left:0;right:0;bottom:0;transition:height .18s ease;
  background:linear-gradient(180deg,rgba(79,179,255,.45) 0%,rgba(30,110,200,.7) 100%);
  border-top:1.5px solid rgba(150,210,255,.8)}
/* 風の帯(wind) */
.wind-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.wind-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.wind-stage{position:relative;height:66px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#12233f 0%,#0e1730 100%)}
.wind-band{position:absolute;left:-40%;width:180%;height:12px;border-radius:8px;
  background:linear-gradient(90deg,transparent,rgba(94,234,212,.55),transparent);
  animation:windflow 3s linear infinite}
.wind-band.b1{top:12px;animation-delay:0s}
.wind-band.b2{top:28px;animation-delay:.6s;background:linear-gradient(90deg,transparent,rgba(120,190,255,.5),transparent)}
.wind-band.b3{top:44px;animation-delay:1.2s}
@keyframes windflow{from{transform:translateX(-30%)}to{transform:translateX(30%)}}
@media (prefers-reduced-motion: reduce){.wind-band{animation:none}}
/* 時代トラック(dinosaur) */
.era-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.era-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:8px}
.era-track{position:relative;height:16px;margin:0 4px;
  background:linear-gradient(90deg,#4fb3ff 0%,#ffd166 55%,#ff7a4d 100%);border-radius:8px}
.era-marker{position:absolute;top:50%;width:16px;height:16px;border-radius:50%;
  transform:translate(-50%,-50%);transition:left .15s ease;background:#fff;
  border:3px solid #16233f;box-shadow:0 0 8px rgba(255,255,255,.6)}
.era-tick{position:absolute;top:-4px;width:2px;height:24px;background:rgba(255,255,255,.5)}
.era-labels{display:flex;justify-content:space-between;font-size:10px;color:var(--sub);margin-top:6px}
.era-track.sun-track{background:linear-gradient(90deg,#ffd166 0%,#ff9a4d 45%,#ff5c4a 78%,#9aa7c7 100%)}
.earth-wrap.unstable{animation:tiltWobble 5s ease-in-out infinite}
@keyframes tiltWobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(42deg)}}
@media (prefers-reduced-motion: reduce){.earth-wrap.unstable{animation:none;transform:rotate(23.4deg)}}
/* 環の空(rings) */
.ringsky{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.ringsky .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.ringsky-stage{position:relative;height:110px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#050a18 0%,#0e1730 75%,#16233f 100%)}
.ring-arc{position:absolute;left:50%;transform:translateX(-50%);width:340px;height:340px;border-radius:50%;
  border:3px solid rgba(230,240,255,.8);box-shadow:0 0 14px rgba(190,215,255,.35);
  transition:top .15s ease,width .15s ease,opacity .2s ease}
.ringsky-ground{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(180deg,#16233f,#0b1220)}
.ringsky-note{position:absolute;left:10px;bottom:18px;font-size:10.5px;color:var(--sub)}
/* 歳差サークル(precession) */
.prec-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.prec-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:4px}
.prec-stage{position:relative;height:150px}
.prec-circle{position:absolute;left:50%;top:50%;width:110px;height:110px;transform:translate(-50%,-50%);
  border:2px dashed rgba(94,234,212,.5);border-radius:50%}
.prec-star{position:absolute;width:7px;height:7px;border-radius:50%;background:#fff;
  box-shadow:0 0 8px rgba(255,255,255,.8);transform:translate(-50%,-50%)}
.prec-star span{position:absolute;top:8px;left:50%;transform:translateX(-50%);font-size:8.5px;color:var(--sub);white-space:nowrap}
.ps-polaris{left:calc(50% + 0px);top:calc(50% - 55px)}
.ps-errai{left:calc(50% + 26px);top:calc(50% - 49px)}
.ps-deneb{left:calc(50% + 51px);top:calc(50% + 20px)}
.ps-vega{left:calc(50% + 0px);top:calc(50% + 55px);background:#bfe9ff}
.ps-thuban{left:calc(50% - 51px);top:calc(50% - 20px)}
.prec-axis{position:absolute;left:50%;top:calc(50% - 55px);width:12px;height:12px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 12px rgba(255,209,102,.85);transform:translate(-50%,-50%);transition:left .1s linear,top .1s linear}
/* オーロラの空(aurora) */
.aurora-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.aurora-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.aurora-stage{position:relative;height:96px;border-radius:8px;overflow:hidden;
  background:linear-gradient(180deg,#050a18 0%,#0e1730 100%)}
.au-red{position:absolute;inset:0;opacity:0;transition:opacity .2s ease;
  background:linear-gradient(180deg,rgba(255,80,110,.6) 0%,rgba(255,80,110,.15) 60%,transparent 100%)}
.au-band{position:absolute;left:-4%;right:-4%;bottom:14px;height:34px;opacity:.25;filter:blur(.6px);
  transition:height .2s ease,opacity .2s ease;
  background:repeating-linear-gradient(90deg,rgba(120,255,190,0) 0 10px,rgba(120,255,190,.55) 14px 20px,rgba(120,255,190,0) 24px 34px),
    linear-gradient(180deg,rgba(255,120,150,.35) 0%,rgba(120,255,190,.55) 70%,rgba(120,255,190,.15) 100%)}
.au-ground{position:absolute;left:0;right:0;bottom:0;height:14px;background:linear-gradient(180deg,#16233f,#0b1220)}
/* ジャンプくらべ(jump) */
.jump-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.jump-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.jump-stage{position:relative;height:130px;border-radius:8px;overflow:hidden;background:linear-gradient(180deg,#050a18 0%,#101c36 100%)}
.jump-ground{position:absolute;left:0;right:0;bottom:0;height:12px;background:linear-gradient(180deg,#233250,#0b1220)}
.jump-bar{position:absolute;left:34%;bottom:12px;width:46px;height:17px;border-radius:8px 8px 0 0;
  background:linear-gradient(180deg,rgba(94,234,212,.9),rgba(94,234,212,.18));
  box-shadow:0 0 12px rgba(94,234,212,.3);transition:height .25s ease}
.jump-fig{position:absolute;left:calc(34% + 10px);bottom:29px;font-size:20px;transition:bottom .25s ease;z-index:2}
.jump-earthline{position:absolute;left:10%;right:10%;bottom:29px;border-top:1.5px dashed rgba(255,209,102,.6)}
.jump-earthline span{position:absolute;right:0;top:-16px;font-size:9.5px;color:var(--gold)}
/* 地球の中へ(hole) */
.depth-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.depth-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.depth-stage{position:relative;height:170px;border-radius:8px;overflow:hidden}
.depth-band{position:absolute;left:0;right:0}
.db-crust{top:0;height:7%;background:linear-gradient(180deg,#3d5533,#4a3b2a)}
.db-mantle{top:7%;height:38%;background:linear-gradient(180deg,#7a3d1e,#b3541e)}
.db-outer{top:45%;height:32%;background:linear-gradient(180deg,#d98324,#f2b134)}
.db-inner{top:77%;height:23%;background:linear-gradient(180deg,#f7d774,#fff3c4)}
.depth-band span{position:absolute;left:8px;top:4px;font-size:9.5px;color:rgba(255,255,255,.9);text-shadow:0 1px 2px rgba(0,0,0,.6)}
.db-inner span{color:#7a5b00;text-shadow:none}
.depth-marker{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);width:14px;height:14px;border-radius:50%;
  background:var(--teal);border:2px solid #052;box-shadow:0 0 10px rgba(94,234,212,.85);transition:top .15s ease;z-index:2}
/* 宇宙への道(walk) */
.trip-viz{border:1px solid var(--line);border-radius:12px;background:var(--bg2);padding:10px 14px 8px;margin:12px 0 4px}
.trip-viz .lane-cap{font-size:11.5px;color:var(--sub);margin-bottom:6px}
.trip-lane{position:relative;height:74px;background:linear-gradient(90deg,#16233f,#050a18);border-radius:8px}
.trip-stop{position:absolute;top:40%;transform:translate(-50%,-50%);font-size:18px}
.trip-stop span{position:absolute;top:20px;left:50%;transform:translateX(-50%);font-size:9px;color:var(--sub);white-space:nowrap}
.ts-earth{left:7%} .ts-space{left:26%} .ts-moon{left:54%} .ts-sun{left:89%}
.trip-marker{position:absolute;top:6%;left:24%;font-size:14px;transform:translateX(-50%);transition:left .3s ease;z-index:2}

.kotoba-term .yomi{font-size:12px;color:var(--sub);font-weight:400;margin-left:6px;
  font-family:'Zen Maru Gothic',sans-serif}
.kotoba-body .short{font-weight:700;color:var(--text);margin-bottom:6px}
.kotoba-body .more{color:var(--sub)}
.kotoba-body .golink{display:inline-block;margin-top:10px;font-size:13px}
.kotoba-index{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 20px}
.kotoba-index a{font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--sub);background:var(--bg2)}
.kotoba-index a:hover{color:var(--teal);border-color:var(--teal);text-decoration:none}
.termmemo{background:linear-gradient(180deg,var(--bg2),#0a1226);border:1px dashed var(--line);
  border-radius:14px;padding:12px 15px;margin:18px 0}
.termmemo .tm{font-family:'Zen Maru Gothic',sans-serif;font-weight:700;font-size:13px;
  color:var(--teal);margin-bottom:8px}
.termchips{display:flex;flex-wrap:wrap;gap:6px}
.termchips a{font-size:12px;padding:5px 10px;border:1px solid var(--line);border-radius:999px;
  color:var(--sub);background:var(--bg)}
.termchips a:hover{color:var(--teal);border-color:var(--teal);text-decoration:none}