@charset "utf-8";
/* Personal welcome: greeting, home horoscope card and the "What should we call you?" dialog. */
.me-hello{padding-block:22px 6px;background:radial-gradient(90% 120% at 15% 0%,rgba(122,92,200,.28),rgba(10,14,38,0) 70%)}
.me-hello[hidden]{display:none}
.me-wrap{display:grid;gap:16px}
@media (min-width:880px){.me-wrap{grid-template-columns:1fr 1.2fr;align-items:start}}
.me-greet{display:grid;gap:4px;align-content:start}
.me-hi{margin:0;font:400 clamp(1.7rem,6.5vw,2.4rem)/1.15 var(--serif);color:var(--text)}
.me-hi:focus{outline:none}
.me-here{margin:0;color:var(--gold-hi);font-size:1.08rem}
.me-change{justify-self:start;font-size:.95rem}
.me-hs{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,#1B1F57,var(--surface))}
.me-hs p,.me-hs h2,.me-hs h3{margin:0}
.me-hs-top{display:flex;justify-content:space-between;align-items:center;gap:12px}
.me-hs-h{font-size:1.45rem;line-height:1.2}
.me-sym{color:var(--gold-hi);font-family:"Segoe UI Symbol","Apple Symbols",var(--sans)}
.me-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px}
.me-tabs [role=tab]{min-height:44px;border:0;border-radius:999px;background:transparent;color:var(--mist);font:600 .92rem/1.2 var(--sans);cursor:pointer}
.me-tabs [role=tab][aria-selected=true]{background:var(--gold);color:var(--ink)}
.me-panel{display:grid;gap:12px}
.me-range{font:600 .78rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.me-sec{display:grid;gap:4px}
.me-sec h3{font:600 .9rem var(--sans);color:var(--gold-hi)}
.me-sec p{line-height:1.6}
.me-sec.q p{font:italic 400 1.08rem/1.5 var(--serif)}
.me-cusp{display:flex;flex-wrap:wrap;gap:10px}
.me-note{line-height:1.5}
/* dialog */
.me-dialog{width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 24px);overflow:auto;padding:0;border:1px solid var(--gold);border-radius:22px;background:linear-gradient(180deg,#1C2366,var(--bg-2));color:var(--text)}
.me-dialog::backdrop{background:rgba(5,7,20,.72)}
.me-form{display:grid;gap:14px;padding:26px 22px 22px}
.me-form > *{margin:0}
.me-form h2{font-size:clamp(1.6rem,6vw,2rem);line-height:1.15}
.me-x{position:sticky;top:0;float:right;margin:8px 8px 0 0;width:44px;height:44px;border:0;border-radius:50%;background:transparent;color:var(--mist);font:400 1.8rem/1 var(--sans);cursor:pointer;z-index:1}
.me-x:hover{color:var(--gold-hi)}
.me-in{width:100%;min-height:52px;padding:.7rem .95rem;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface);color:var(--text);font:400 1.0625rem var(--sans)}
.me-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(230,207,156,.25)}
.me-actions{display:flex;flex-wrap:wrap;gap:10px}
.me-choices{display:grid;gap:10px}
.me-choice{display:grid;gap:2px;text-align:left;min-height:56px;padding:12px 16px;border:1px solid var(--line-soft);border-radius:14px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.me-choice span{color:var(--mist);font-size:.9rem}
.me-choice.on{border-color:var(--gold);background:rgba(201,169,106,.14)}
.me-detail{display:grid;gap:8px}
.me-detail:empty{display:none}
.me-detail label,.me-lbl{font-weight:600;margin:0}
.me-md{display:grid;grid-template-columns:1.4fr 1fr;gap:10px}
.me-md > div{display:grid;gap:6px}
.me-sys{display:flex;flex-wrap:wrap;gap:6px 18px;margin:4px 0 0;padding:0;border:0}
.me-sys legend{padding:0;margin-bottom:4px;font-weight:600}
.me-radio{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-weight:400}
.me-radio input{width:20px;height:20px;accent-color:var(--gold)}
.me-signs{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.me-sign{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;min-height:56px;padding:8px 12px;border:1px solid var(--line-soft);border-radius:12px;background:var(--surface);color:var(--text);font:inherit;cursor:pointer}
.me-sign .me-sym{grid-row:1/3;font-size:1.5rem}
.me-sign span:last-child{color:var(--mist);font-size:.8rem}
.me-sign.on,.me-sign:hover{border-color:var(--gold)}
.me-err{color:var(--err)}
.me-forget{justify-self:start;font-size:.92rem}
.me-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}