.earth-moon-page{min-height:100vh;background:radial-gradient(circle at 86% 8%,rgba(51,128,177,.22),transparent 30rem),var(--night)}
.earth-moon-shell{width:min(1400px,calc(100% - 48px));margin:0 auto;padding:70px 0 90px}
.earth-moon-intro{max-width:800px}
.earth-moon-intro h1,.map-heading h2{margin:.15em 0;font-family:Georgia,serif;font-size:clamp(2.4rem,6vw,5rem);font-weight:400;line-height:.95;color:#eaf4ff}
.earth-moon-intro h1 span,.map-heading h2 span{color:#39d9ff}
.earth-moon-intro>p:last-child{max-width:720px;color:#a9bdce;line-height:1.65}
.earth-moon-controls,.earth-moon-map{margin-top:30px;padding:24px;border:1px solid rgba(132,184,213,.28);background:#10263a}
.earth-moon-controls{display:flex;flex-wrap:wrap;gap:20px;align-items:end}
.date-controls{display:flex;flex:1 1 560px;flex-wrap:wrap;gap:10px;align-items:end}
.earth-moon-controls label{display:grid;gap:6px;color:#a9bdce;font-size:.86rem}
.earth-moon-controls .moon-size-control{display:flex;align-items:center;gap:7px;min-height:38px;cursor:pointer}
.moon-size-control input{width:16px;height:16px;margin:0;accent-color:#39d9ff}
.earth-moon-controls #view-date,.earth-moon-controls input[type="number"]{min-height:38px;width:168px;padding:7px 9px;border:1px solid #59778d;border-radius:3px;background:#0b1c2d;color:#eaf4ff;font:inherit}
.earth-moon-controls input[type="number"]{width:118px}
.earth-moon-controls button{min-height:38px;padding:0 12px;border:1px solid #59778d;background:#17344d;color:#eaf4ff;cursor:pointer;font:inherit}
.earth-moon-controls button:hover,.earth-moon-controls button:focus-visible{background:#24506f}
.moon-size-control:has(input:focus-visible){outline:2px solid #39d9ff;outline-offset:3px}
.location-note{flex:1 0 100%;margin:0;color:#8fa8ba;font-size:.76rem}
.earth-moon-map{background:#081827}
.map-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:18px}
.map-heading h2{font-size:clamp(1.8rem,4vw,3rem)}
#date-label{max-width:320px;margin:0;color:#a9bdce;text-align:right}
#earth-moon-canvas{display:block;width:100%;height:min(65vw,720px);min-height:430px;border:1px solid rgba(132,184,213,.23);background:#040b13;cursor:grab;touch-action:none}
#earth-moon-canvas:active{cursor:grabbing}
.canvas-wrap{position:relative}
.tilt-readout{position:absolute;z-index:3;top:18px;left:18px;padding:7px 10px;border:1px solid rgba(132,184,213,.38);background:rgba(5,17,29,.82);color:#d9e8f1;font:700 .75rem Arial,sans-serif;letter-spacing:.04em;pointer-events:none}
.legend{display:flex;flex-wrap:wrap;gap:10px 24px;margin-top:16px;color:#bfd0dc;font-size:.82rem}
.legend span{display:flex;align-items:center;gap:7px}
.legend i{display:inline-block;width:22px;height:10px}
.legend-light{border-radius:10px 10px 0 0;background:#eef6ff}
.legend-visible{border-top:3px dashed #1e78e6}
.legend-orbit{border-top:1px solid rgba(132,184,213,.7)}
.legend-ecliptic{border-top:2px solid rgba(255,213,106,.65)}
.legend-sun{width:10px!important;height:10px!important;border-radius:50%;background:#ffd45e;box-shadow:0 0 8px #ffd45e}
.legend-antisun{width:10px!important;height:10px!important;border:2px solid #b98cff;border-radius:50%;box-shadow:0 0 7px rgba(185,140,255,.7)}
.legend-axis{border-top:2px solid #ffb078}
.legend-equator{border-top:1px dashed #def2ff}
.moon-data{position:absolute;z-index:2;top:18px;right:18px;width:min(270px,calc(100% - 36px));padding:15px 17px;border:1px solid rgba(132,184,213,.45);background:rgba(5,17,29,.88);box-shadow:0 10px 28px rgba(0,0,0,.28);pointer-events:none;backdrop-filter:blur(5px)}
.moon-data h3{margin:0 0 10px;color:#39d9ff;font:700 .72rem Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.moon-data .info-moon{display:block;width:70px;height:70px;margin:0 auto 12px}
.moon-data dl{display:grid;grid-template-columns:1fr auto;gap:6px 14px;margin:0}
.moon-data dt{color:#91aabc;font-size:.72rem}
.moon-data dd{margin:0;color:#e1edf5;font-size:.74rem;text-align:right}
.moon-data .info-separator{grid-column:1/-1;height:1px;margin:3px 0;background:rgba(132,184,213,.22)}
.map-note{margin:14px 0 0;color:#8fa8ba;font-size:.82rem;line-height:1.55}.visible-face-note{padding:11px 13px;border-left:3px solid #1e78e6;background:rgba(30,120,230,.1);color:#b8cfe1}.visible-face-note strong{color:#65a7ff}
@media(max-width:650px){.earth-moon-shell{width:min(100% - 28px,1400px);padding-top:40px}.earth-moon-controls,.earth-moon-map{padding:16px}#earth-moon-canvas{height:150vw;min-height:560px}.map-heading{align-items:start;flex-direction:column;gap:6px}#date-label{text-align:left}.moon-data{top:10px;right:10px;width:min(240px,calc(100% - 20px));padding:12px 14px}.tilt-readout{top:10px;left:10px}}