*{box-sizing:border-box}html,body{margin:0;height:100%}
body{background:radial-gradient(ellipse at 50% 0%,#1d2340 0%,#0d0f14 60%);color:#e8e6df;font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;display:flex;align-items:center;justify-content:center;padding:24px}
main{width:100%;max-width:340px;text-align:center}
h1{letter-spacing:.35em;font-weight:400;margin:8px 0 4px;font-size:2rem;color:#f3e9d2;text-indent:.35em}
.tag{color:#9aa0b4;font-style:italic;margin:0 0 28px}
input{width:100%;padding:14px 16px;border-radius:12px;border:1px solid #2c3350;background:#141826;color:#fff;font-size:1rem;margin-bottom:12px}
input:focus{outline:none;border-color:#7fd6ff;box-shadow:0 0 0 3px rgba(127,214,255,.15)}
button{width:100%;padding:14px;border-radius:12px;border:1px solid #7fd6ff;background:linear-gradient(180deg,#24406a,#1a2c4c);color:#e9f7ff;font-size:1rem;letter-spacing:.05em;cursor:pointer}
button:disabled{opacity:.6}
#err{color:#ff9a9a;min-height:1.4em;font-family:system-ui,sans-serif;font-size:.9rem}
.moons{position:relative;height:70px}
.moon{position:absolute;border-radius:50%;filter:blur(.3px)}
.moon.a{width:46px;height:46px;left:calc(50% - 40px);top:10px;background:radial-gradient(circle at 35% 35%,#fff,#b9c4ff 60%,#7d87c9);box-shadow:0 0 30px rgba(185,196,255,.4)}
.moon.b{width:22px;height:22px;left:calc(50% + 14px);top:0;background:radial-gradient(circle at 35% 35%,#fff,#ffd9a8 60%,#c8925a);box-shadow:0 0 20px rgba(255,217,168,.35)}