:root{
  --ground:#141118; --card:#1D1924; --card2:#221D2B; --ink:#EAE6F0; --muted:#9A94AB; --faint:#6E6880;
  --gold:#D9AE55; --gold-dim:#8a6f39; --violet:#A493CF; --line:#322C3E; --line2:#453D56;
}
*{box-sizing:border-box}
html{background:var(--ground)}
body{margin:0; background:var(--ground); color:var(--ink); font-family:"Segoe UI",Seravek,"Helvetica Neue",sans-serif; line-height:1.65; -webkit-font-smoothing:antialiased}
.wrap{max-width:720px; margin:0 auto; padding:0 22px}
h1,h2,h3,.serif{font-family:"Palatino Linotype",Palatino,"Book Antiqua",Georgia,serif}
a{color:var(--violet)}

header{padding:72px 0 20px; text-align:center}
.wordmark{font-size:13px; letter-spacing:.42em; text-transform:uppercase; color:var(--gold); font-weight:600}
h1{font-size:clamp(2rem,6vw,3.1rem); font-weight:500; margin:.65em 0 .25em; line-height:1.15; text-wrap:balance}
.tagline{color:var(--muted); font-size:1.13rem; max-width:34rem; margin:0 auto}

.formcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:26px 26px 22px; margin:34px auto 0; max-width:560px; text-align:left}
.formcard label{display:block; font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); margin-bottom:6px}
.frow{display:flex; gap:14px; flex-wrap:wrap}
.frow>div{flex:1; min-width:140px}
input[type=date],input[type=time]{width:100%; background:var(--ground); border:1px solid var(--line2); color:var(--ink); border-radius:8px; padding:10px 12px; font-size:1rem; font-family:inherit; color-scheme:dark}
input:focus{outline:none; border-color:var(--gold-dim)}
.hint{font-size:.8rem; color:var(--faint); margin-top:6px}
button.primary{margin-top:18px; width:100%; background:var(--gold); color:#1a1408; border:none; border-radius:8px; padding:13px 20px; font-size:1.02rem; font-weight:600; cursor:pointer; font-family:inherit}
button.primary:hover{background:#e5bd6a}
button.ghost{background:transparent; color:var(--violet); border:1px solid var(--line2); border-radius:8px; padding:10px 18px; font-size:.95rem; cursor:pointer; font-family:inherit}
button.ghost:hover{border-color:var(--violet)}
.err{color:#e79a9a; font-size:.9rem; margin-top:10px; display:none}

#results{margin-top:26px}
.readcard{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:28px 30px; margin:18px auto; max-width:640px; animation:rise .5s ease}
@keyframes rise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.eyebrow{font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--gold); font-weight:600}
.readcard h3{font-size:1.5rem; font-weight:500; margin:.35em 0 .5em}
.readcard p.dagger{font-family:"Palatino Linotype",Palatino,Georgia,serif; font-size:1.12rem; font-style:italic; color:var(--violet); border-left:2px solid var(--gold-dim); padding-left:14px; margin:0 0 16px; line-height:1.5}
.readcard p{margin:0 0 14px; color:var(--ink)}
.cuspnote{background:var(--card2); border:1px solid var(--line2); border-radius:10px; padding:12px 16px; font-size:.9rem; color:var(--muted); margin-top:8px}
.cuspnote a{cursor:pointer}
.nextlayer{text-align:center; margin:10px 0 4px}
.sharebar{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap}
.sharebar button{flex:none}
.copied{color:var(--gold); font-size:.85rem; align-self:center; display:none}

.threshold{max-width:640px; margin:34px auto; text-align:center; padding:34px 26px; border:1px solid var(--gold-dim); border-radius:14px; background:var(--card)}
.threshold h2{font-size:1.6rem; font-weight:500; margin:0 0 10px}
.threshold p{color:var(--muted); max-width:32rem; margin:0 auto 18px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta-row a{display:inline-block; text-decoration:none; border-radius:8px; padding:12px 22px; font-size:.98rem}
.cta-gold{background:var(--gold); color:#1a1408; font-weight:600}
.cta-line{border:1px solid var(--line2); color:var(--violet)}

section.about{max-width:640px; margin:60px auto 0; border-top:1px solid var(--line); padding-top:40px}
section.about h2{font-size:1.35rem; font-weight:500}
section.about p{color:var(--muted)}
section.about strong{color:var(--ink); font-weight:600}

footer{max-width:640px; margin:64px auto 0; border-top:1px solid var(--line); padding:26px 22px 48px; font-size:.85rem; color:var(--faint); text-align:center}
footer p{margin:0 0 8px}

a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px}
.noscript-note{max-width:560px;margin:16px auto;padding:14px 18px;border:1px solid var(--gold-dim);border-radius:10px;color:var(--muted);font-size:.95rem}