:root{--bg:#07061a;--ink:#e9e3ff;--muted:#a99fd0;--gold:#e6c36a;--violet:#9b7bff}
*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top,#1b1450 0%,#0a0826 45%,var(--bg) 100%) fixed;color:var(--ink);font:18px/1.65 'Inter',system-ui,sans-serif;min-height:100vh}
#stars{position:fixed;inset:0;z-index:-1;pointer-events:none}
.geo{position:absolute;top:-60px;left:50%;transform:translateX(-50%);width:520px;max-width:120vw;opacity:.13;z-index:-1;animation:spin 240s linear infinite}
@keyframes spin{to{transform:translateX(-50%) rotate(360deg)}}
header{position:relative;text-align:center;padding:3rem 1rem 1rem}
h1,h2,h3,nav{font-family:'Marcellus',serif;letter-spacing:.06em}
h1{color:var(--gold);font-size:clamp(1.9rem,6vw,3.2rem);margin:.2em 0;text-shadow:0 0 18px rgba(230,195,106,.45)}
.intro{max-width:680px;margin:0 auto;color:var(--muted)}
nav{text-align:center;font-size:.85rem}nav a{color:var(--violet);margin:0 .7rem;text-decoration:none}
a{color:var(--gold)}
.picker{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin:1.5rem 0}
input[type=date],button{font:inherit;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--gold);background:rgba(20,14,60,.8);color:var(--ink);color-scheme:dark}
button{cursor:pointer;font-family:'Marcellus',serif;background:linear-gradient(135deg,#3a2a8a,#1a1046)}
.layout{display:grid;grid-template-columns:1fr 300px;gap:1.5rem;max-width:1200px;margin:0 auto;padding:0 1rem 2rem}
@media(max-width:900px){.layout{grid-template-columns:1fr}}
.grid{display:grid;align-items:start;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:1rem}
.card{position:relative;padding:1.2rem 1.2rem 1rem;border-radius:18px;background:linear-gradient(160deg,rgba(60,40,140,.35),rgba(10,8,38,.85));border:1px solid rgba(230,195,106,.35);box-shadow:0 0 22px rgba(155,123,255,.18),inset 0 0 30px rgba(155,123,255,.08);transition:.3s}
.card:hover{box-shadow:0 0 34px rgba(230,195,106,.35);transform:translateY(-2px)}
.glyph{font-size:2rem;color:var(--gold);text-shadow:0 0 12px var(--gold);float:right;line-height:1}
.card h3{margin:0 0 .3rem;font-size:1rem;color:var(--violet)}
.value{font-size:1.25rem;font-weight:600;color:#fff}.sub{color:var(--gold);font-size:.95rem}
.card p{color:var(--muted);font-size:.95rem;margin:.6rem 0 0}
.ad{border:1px dashed rgba(230,195,106,.5);border-radius:12px;color:var(--muted);text-align:center;padding:1rem;font:13px sans-serif;margin:1rem auto;background:rgba(0,0,0,.25)}
.ad-header{max-width:728px;min-height:90px}.ad-inline{grid-column:1/-1;width:100%;min-height:100px}.ad-side{min-height:600px;position:sticky;top:1rem}
footer{text-align:center;color:var(--muted);padding:2rem 1rem;font-size:.9rem;border-top:1px solid rgba(230,195,106,.2)}
.page{max-width:780px;margin:0 auto;padding:0 1.2rem 2rem}
.tabs{display:flex;justify-content:center;gap:.4rem;margin-top:1.5rem}
.tab{background:transparent;border-color:rgba(230,195,106,.4);color:var(--muted)}.tab.active{background:linear-gradient(135deg,#5a3fc0,#2a1a70);color:var(--gold);box-shadow:0 0 14px rgba(230,195,106,.4)}
.picker label{font-family:'Marcellus',serif;font-size:.8rem;color:var(--muted);display:flex;align-items:center;gap:.3rem}
.num{font:inherit;width:6.5rem;padding:.5rem .8rem;border-radius:999px;border:1px solid var(--gold);background:rgba(20,14,60,.8);color:var(--ink)}.num.sm{width:4.5rem}
.equiv{text-align:center;color:var(--gold);min-height:1.5em;font-size:1.1rem}.equiv.err{color:#ff8fa3}
[hidden]{display:none!important}
/* Readable result cards: Marcellus only for titles */
.num-big{font:700 1.8rem/1.15 'Inter',system-ui,sans-serif;font-variant-numeric:tabular-nums lining-nums;color:var(--gold);letter-spacing:.01em;text-shadow:0 0 14px rgba(230,195,106,.35);margin:.35rem 0 .25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card .value{font:500 1.05rem/1.45 'Inter',system-ui,sans-serif;color:#fff}
.card .sub{font:400 .92rem/1.45 'Inter',system-ui,sans-serif;color:#d9c7ff;margin-top:.2rem}
.card p{font:400 1.02rem/1.55 'Inter',system-ui,sans-serif;color:#bdb4e0}
.card h3{font-size:.95rem;padding-right:2.4rem}
.source{grid-column:1/-1;text-align:center;font:600 1rem 'Inter',system-ui,sans-serif;color:var(--ink);padding:.7rem 1rem;border-radius:999px;border:1px solid rgba(230,195,106,.45);background:rgba(90,63,192,.25);box-shadow:0 0 18px rgba(155,123,255,.25)}
.source b{color:var(--gold);font-variant-numeric:tabular-nums}
.card .from{font:400 .75rem 'Inter',sans-serif;color:var(--muted);margin-top:.5rem;opacity:.8}
.equiv{font-family:'Inter',sans-serif;font-size:1rem}
/* Time Between Dates */
.maincol{min-width:0}
.between{margin-bottom:1rem;padding:1.5rem}
.between h2{margin:0 0 .8rem;color:var(--gold);font-size:1.3rem}
.bdates{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;justify-content:center}
.bdate{border:1px solid color-mix(in srgb,var(--gold) 40%,transparent);border-radius:14px;padding:.8rem 1rem;margin:0;flex:1 1 260px}
.bdate legend{font-family:'Marcellus',serif;color:var(--muted);font-size:.8rem;padding:0 .4rem}
.bhead{font:700 1.25rem 'Inter',sans-serif;color:var(--gold);font-variant-numeric:tabular-nums;margin-bottom:.5rem;text-align:center}
.bfields{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap}
.bfields label,.bcal label,.chk{font-family:'Inter',sans-serif;font-size:.85rem;color:var(--muted);display:flex;align-items:center;gap:.35rem}
.barrow{color:var(--gold);font-size:1.6rem}
.bopts,.bcal{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin:.9rem 0;align-items:center}
.blab{font:600 .85rem 'Inter',sans-serif;color:var(--ink)}
.chk input,.bcal input{accent-color:var(--gold);width:1.05rem;height:1.05rem}
.bresult{text-align:center;border-top:1px solid color-mix(in srgb,var(--gold) 30%,transparent);padding-top:1rem}
.bbig{white-space:normal;font-size:2rem}
.bnote{font:400 .85rem 'Inter',sans-serif;color:var(--muted);min-height:1.2em}
.btotals{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.6rem;margin:1rem 0 0}
.btotals dt{font:600 .72rem 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.btotals dd{margin:.15rem 0 0;font:600 1.05rem 'Inter',sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.btotals>div{padding:.5rem}
/* Screenshot-ready cards */
.xline{font:600 .98rem/1.4 'Inter',system-ui,sans-serif;color:var(--ink);background:color-mix(in srgb,var(--gold) 14%,transparent);border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:10px;padding:.45rem .6rem;margin:.4rem 0 .5rem;font-variant-numeric:tabular-nums}
.xsrc{color:var(--ink)}.xarrow{color:var(--gold)}.xdst{color:var(--gold)}
.card,.bresult{position:relative}
.wm{font:600 .7rem 'Marcellus',serif;letter-spacing:.12em;color:var(--gold);opacity:.7;text-align:right;margin-top:.6rem}
.wm::before{content:'✧ '}
.bfromto{font:600 1.05rem 'Inter',sans-serif;color:var(--ink);margin:.2rem 0 .3rem}
.bresult{padding-bottom:.4rem}
/* ---- One consistent control style: segmented toggles, pill chips, switches ---- */
.seg{display:inline-flex;gap:2px;padding:3px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%,var(--card1));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);margin:1rem auto 0}
#pane-convert{text-align:center}
.seg-btn{font:500 .9rem 'Inter',system-ui,sans-serif;padding:.45rem 1.1rem;border-radius:999px;border:0!important;background:transparent!important;color:var(--muted);cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:background .2s,color .2s,box-shadow .2s}
.seg-btn.active,.seg-btn:has(input:checked){background:var(--card1)!important;color:var(--accent);box-shadow:0 1px 4px color-mix(in srgb,var(--ink) 18%,transparent)}
.seg-btn input,.chip input,.switch input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bcal{display:flex;width:max-content;margin:0 auto 1rem}
.chip span{display:inline-block;font:500 .88rem 'Inter',system-ui,sans-serif;padding:.4rem 1rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);color:var(--muted);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.chip input:checked+span{background:var(--accent);border-color:var(--accent);color:var(--card2)}
.chip input:checked+span::before{content:'✓ '}
.chip{position:relative}
.switch{position:relative;display:inline-flex;align-items:center;gap:.55rem;font:500 .9rem 'Inter',system-ui,sans-serif;color:var(--ink);cursor:pointer}
.switch small{color:var(--muted)}
.track{width:2.4rem;height:1.35rem;border-radius:999px;background:color-mix(in srgb,var(--muted) 35%,transparent);position:relative;transition:background .2s}
.track::after{content:'';position:absolute;top:.15rem;left:.15rem;width:1.05rem;height:1.05rem;border-radius:50%;background:var(--card2);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.switch input:checked+.track{background:var(--accent)}
.switch input:checked+.track::after{transform:translateX(1.05rem)}
.seg-btn:focus-visible,.seg-btn:has(input:focus-visible),.chip input:focus-visible+span,.switch input:focus-visible+.track,.tab:focus-visible,button:focus-visible,.num:focus-visible,input[type=date]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tab{font-family:'Marcellus',serif}
.tab.active{background:var(--accent)!important;color:var(--card2)!important;border-color:var(--accent)!important}
.num,input[type=date],button{font-family:'Inter',system-ui,sans-serif}
.tab{font-family:'Marcellus',serif}