:root{color-scheme:dark;--bg:#080D18;--text:#F5F5F2;--muted:#929AA8;--line:#293140;--moon:#F3F0E8;font-family:Inter,-apple-system,BlinkMacSystemFont,"Noto Sans JP","Hiragino Sans",sans-serif;color:var(--text);background:var(--bg);font-synthesis:none}*{box-sizing:border-box}body{margin:0}main{width:min(100% - 48px,560px);margin:auto;padding:64px 0 26px;text-align:center}header{margin-bottom:44px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--muted);line-height:1.8}h1{font-size:30px;font-weight:450;letter-spacing:.14em;margin:16px 0 12px}.english{font-size:13px;letter-spacing:.06em;color:var(--muted);margin:0}.intro{font-size:16px;line-height:2;letter-spacing:.05em;margin:0 0 32px}form{max-width:420px;margin:auto;text-align:left}.fields{display:grid;grid-template-columns:1.6fr 1fr;gap:16px}.field label{display:block;font-size:14px;margin:0 0 10px}.field label span{font-size:11px;color:var(--muted);margin-left:8px}input[type=date],input[type=time]{width:100%;min-width:0;height:52px;border:1px solid var(--line);background:#111827;color:var(--text);padding:12px;font:inherit;border-radius:4px}input:disabled{opacity:.4}.check{display:flex;align-items:center;gap:10px;font-size:14px;margin:21px 0 10px}.check input{width:17px;height:17px;margin:0;accent-color:#ddd9cd}.hint,.privacy{font-size:12px;color:var(--muted);line-height:1.8}.hint{min-height:22px;margin:0 0 24px}.privacy{margin:20px 0 0}button{font:inherit;cursor:pointer;transition:background .2s,color .2s}button.primary{display:flex;justify-content:center;align-items:center;gap:20px;width:100%;height:52px;background:var(--moon);color:#151b26;border:0;border-radius:4px;font-size:15px;letter-spacing:.06em}.primary:hover{background:#d8d5cb}.primary span{font-size:19px}button.secondary{background:transparent;border:1px solid var(--line);border-radius:4px;color:#c5cad3;padding:11px 30px;font-size:14px}.secondary:hover{background:#111827}:focus-visible{outline:2px solid #dad5bc;outline-offset:5px}#result:focus{outline:none}[hidden]{display:none!important}.moment h2{font-size:28px;letter-spacing:.11em;font-weight:400;margin:8px 0 10px;font-variant-numeric:tabular-nums}.moment .eyebrow{font-size:12px;letter-spacing:.09em;margin:0}#result-time{font-size:14px;letter-spacing:.09em;color:#b9c0cd;margin:0}#assumption{color:var(--muted);font-size:12px;margin:9px 0 0}.moon-wrap{width:260px;height:260px;margin:30px auto 23px}#moon{width:100%;height:100%;filter:drop-shadow(0 0 8px #f3f0e807)}.metrics{display:grid;grid-template-columns:1fr 1fr;max-width:330px;margin:0 auto 28px}.metrics p{color:var(--muted);font-size:13px;letter-spacing:.1em;margin:0 0 9px}.metrics .number{font-size:39px;line-height:1.2;color:var(--text);font-weight:300;letter-spacing:.01em;font-variant-numeric:tabular-nums}.unit{font-size:20px;margin-left:4px;color:#c5cad3}footer{margin-top:48px;border-top:1px solid var(--line);padding-top:20px}.explanations{display:flex;justify-content:center;gap:36px;align-items:flex-start}.explanations details{flex:1;max-width:240px}summary{list-style:none;color:#b8bfcb;font-size:13px;cursor:pointer}summary::-webkit-details-marker{display:none}summary::after{content:'＋';font-size:12px;margin-left:9px;color:var(--muted)}details[open] summary::after{content:'−'}details p{font-size:13px;text-align:left;line-height:1.9;color:var(--muted)}.footnote{font-size:11px;line-height:1.9;color:var(--muted);margin:24px 0 0}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}#error{font-size:14px;color:#f3b8af;line-height:1.7}.reveal .moon-wrap{animation:appear .32s ease-out both}@keyframes appear{from{opacity:0}to{opacity:1}}body.has-result main{padding-top:36px}body.has-result header{margin-bottom:29px}body.has-result h1{font-size:25px;margin-top:12px}body.has-result footer{margin-top:30px}@media(max-width:520px){main{width:calc(100% - 40px);padding-top:42px}header{margin-bottom:34px}h1{font-size:27px}.eyebrow{font-size:10px}.fields{gap:12px}.moon-wrap{width:min(65vw,260px);height:min(65vw,260px);margin:23px auto 20px}.moment h2{font-size:25px}.metrics{margin-bottom:22px}.metrics .number{font-size:36px}body.has-result main{padding-top:22px}body.has-result header{margin-bottom:25px}body.has-result h1{font-size:23px}.footnote span{display:block;font-size:0;height:1px}.explanations{gap:20px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Small supporting copy remains readable on compact screens. */
.eyebrow,.field label span,.footnote{font-size:12px}

/* Photo works continue the result, without changing the existing moon layout. */
.moon-photos{margin:0 auto 24px;max-width:380px}
.moon-photos>p:first-child{color:var(--muted);font-size:14px;line-height:1.9;margin:0 0 16px;letter-spacing:.03em}
.photo-link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;max-width:100%;padding:12px 20px;border:1px solid var(--line);border-radius:4px;color:var(--moon);font-size:14px;line-height:1.6;text-decoration:none;transition:background .2s}
.photo-link:hover{background:#111827}
.moon-photos .photo-link-note{font-size:12px;line-height:1.8;color:var(--muted);margin:10px 0 0}