:root{color-scheme:dark;--bg:#08121f;--ink:#f4eee4;--muted:#b6c3d2;--gold:#d7b779;--serif:'Hiragino Mincho ProN','Yu Mincho',serif;--sans:'Hiragino Kaku Gothic ProN','Yu Gothic',sans-serif}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--ink);font-family:var(--sans);font-size:15px;line-height:1.9;background:var(--bg);min-height:100svh}body:before{content:'';position:absolute;inset:0 0 auto;height:570px;background:url('moonlake-fullmoon-v2.png') center 46%/cover no-repeat;z-index:0;pointer-events:none;mask-image:linear-gradient(#000 75%,transparent)}header,main{position:relative;z-index:1}header{max-width:1060px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:23px 28px}.brand{font-family:var(--serif);font-size:32px;letter-spacing:.18em;color:var(--ink);text-decoration:none;line-height:1.3}.text-button{border:0;background:none;color:var(--muted);padding:8px 0;font:inherit;font-size:13px;cursor:pointer;text-underline-offset:4px}button,a,input{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:5px}main{max-width:1060px;padding:0 28px;margin:auto}h1,h2{font-family:var(--serif);font-weight:500;line-height:1.6;letter-spacing:.04em}h1{font-size:32px;text-align:center;margin:20px 0 10px}.intro{text-align:center;color:var(--muted);font-family:var(--serif);font-size:16px;line-height:1.9;margin:0}.wheel{width:260px;margin:18px auto 25px}.wheel svg{display:block;width:100%;overflow:visible}.wheel text{fill:#c5b798;font-family:var(--serif)}#input-wheel{width:205px;height:170px;margin:12px auto 24px;overflow:visible}#input-wheel svg text,#input-wheel svg line,#input-wheel .inner-orbit{display:none}#input-wheel svg{height:190px}#input-wheel .outer-orbit{stroke-width:1}form{max-width:450px;margin:auto}.field{margin-bottom:18px}label{display:block;margin-bottom:8px;font-size:14px;letter-spacing:.05em}input{width:100%;height:52px;border:1px solid #62738a;background:#152335db;color:var(--ink);border-radius:6px;padding:0 16px;font-size:18px;font-family:var(--sans);letter-spacing:.08em;box-shadow:inset 0 1px 12px #050c1722}input::placeholder{color:#94a3b6;font-size:16px}input[aria-invalid=true]{border-color:#e7b4a4}.error{color:#f3bdaa;font-size:12px;line-height:1.5;margin:4px 0 0}.error:empty{display:none}.primary{width:100%;min-height:56px;display:flex;justify-content:center;align-items:center;gap:18px;border:1px solid #ead19b;border-radius:6px;background:linear-gradient(120deg,#bea062,#ecd39a 48%,#bc9758);box-shadow:0 4px 24px #0003,inset 0 1px #fff5;color:#171b22;text-decoration:none;font-family:var(--serif);font-size:19px;font-weight:600;letter-spacing:.035em;padding:12px 10px;cursor:pointer;transition:filter .2s,transform .2s}.primary:hover{filter:brightness(1.08);transform:translateY(-1px)}.primary svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.2}.privacy-note{font-size:10px;color:#98a8ba;text-align:center;line-height:1.8;margin:16px 0 0}.mobile-only{display:none}footer{display:flex;gap:18px;justify-content:center;border-top:1px solid #8191a32f;max-width:450px;margin:27px auto 0;padding:12px 0 22px}footer .text-button{font-size:8px;text-decoration:none;padding:8px 0}.pair{display:grid;grid-template-columns:1fr 1fr;max-width:430px;margin:4px auto 28px;text-align:center}.pair>div+div{border-left:1px solid #a8b5c455}.pair span{display:block;font-size:13px;color:var(--muted)}.pair strong{font-family:var(--serif);font-size:32px;font-weight:500;letter-spacing:.07em;color:var(--gold)}.reading,.next{max-width:450px;margin:auto}.reading h2,.next h2{font-size:23px;margin:0 0 10px}.reading p{font-size:15px;line-height:2;margin:0}.next{margin-top:28px;padding-top:26px;border-top:1px solid #c5ad762f;text-align:center}.next p{color:var(--muted);margin:0 0 18px;font-size:14px}.restart{display:block;margin:14px auto 0;text-decoration:underline}.reveal-status{text-align:center;color:var(--gold);font-family:var(--serif);font-size:16px;margin:0}.reveal-status:empty{display:none}.skip-reveal{display:block;margin:10px auto}.revealing .pair,.revealing .reading,.revealing .next{opacity:0}.revealed .pair,.revealed .reading,.revealed .next{animation:appear .7s both}.revealed .reading{animation-delay:.1s}.revealed .next{animation-delay:.2s}.star-point{filter:drop-shadow(0 0 4px #dfc68d);animation:twinkle 4s var(--twinkle-delay) ease-in-out infinite}.bond-line{stroke-dasharray:1;animation:bond 1.8s both}.search-light{transform-origin:180px 180px;animation:orbit 12s linear infinite}.star-halo{filter:drop-shadow(0 0 5px #d7b779)}dialog{max-width:560px;width:calc(100% - 40px);max-height:85svh;overflow:auto;background:#101e30;color:var(--ink);border:1px solid #73603f;border-radius:9px;padding:28px}dialog::backdrop{background:#020914dc;backdrop-filter:blur(6px)}dialog h2{font-size:24px;margin-top:0}dialog p{font-size:14px}dialog .small{font-size:11px;color:var(--muted)}[hidden]{display:none!important}.policy{max-width:650px;margin:auto}.policy h1{text-align:left}.policy h2{font-size:23px}.policy section{margin:32px 0}.policy a{color:var(--gold)}@keyframes twinkle{50%{opacity:.45}}@keyframes appear{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}@keyframes bond{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}@keyframes orbit{to{transform:rotate(360deg)}}@media(min-width:760px){body:before{height:100svh;min-height:850px;background-size:cover;background-position:center 53%;mask-image:linear-gradient(#000 55%,transparent)}header{padding-top:34px}#input-screen{display:grid;grid-template-columns:1.15fr 1fr;column-gap:80px;align-items:center;padding:58px 0 42px}#input-title{grid-column:1;grid-row:1;font-size:42px;margin:0 0 14px}#input-screen>.intro{grid-column:1;grid-row:2;font-size:18px}#input-wheel{grid-column:1;grid-row:3;width:280px;height:260px;margin:25px auto}#input-wheel svg{height:270px}#birthdays{grid-column:2;grid-row:1/4;width:100%;padding:30px 0;align-self:center}form label{font-size:16px}input{height:60px}.field{margin-bottom:25px}.primary{min-height:62px}footer{max-width:none}#result-screen{max-width:680px;margin:25px auto 0}#result-screen h1{font-size:38px}.wheel{width:310px}.reading,.next{max-width:560px}}@media(max-width:360px){main{padding:0 20px}header{padding:20px}h1{font-size:28px}.primary{font-size:17px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* 27宿の星図と読み仮名 */
#input-wheel{width:280px;height:250px;margin:12px auto 24px;filter:drop-shadow(0 0 9px #e0bd6833)}
#input-wheel svg{height:260px}
#input-wheel svg .star-name,#input-wheel svg .star-reading,#input-wheel svg .wheel-caption{display:block}
#input-wheel svg line,#input-wheel .inner-orbit{display:block}
#input-wheel .outer-orbit{stroke-width:1.4}
.wheel .star-reading{font-family:var(--sans);fill:#d9ceb9;letter-spacing:0}
.wheel .star-name{fill:#e6ce97}
.wheel{width:330px;max-width:100%}
.pair ruby{ruby-position:over}.pair rt{font-family:var(--sans);font-size:11px;letter-spacing:.08em;color:#c6cbd1;font-weight:400}.pair strong{display:block;margin-top:16px}
@media(min-width:760px){#input-wheel{width:320px;height:300px}#input-wheel svg{height:310px}.wheel{width:360px}}