/* Theme layer: colours come from CSS custom properties set by themes.js. Soft palettes, gentle contrast, minimal glow. */
:root{--bg1:#eef2fb;--bg2:#dde5f6;--bg3:#ccd7ef;--accent:#4e5f9a;--accent2:#a08752;--ink:#252c45;--muted:#56607e;--card1:rgba(255,255,255,.82);--card2:rgba(240,244,252,.9);--sun:#b8a06a;--moon:#8a9ac4;--star:#a9b6d8;--gold:var(--accent);--violet:var(--accent2)}
body{background:linear-gradient(170deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%) fixed;color:var(--ink)}
#stars{z-index:-2;opacity:.55}
[data-tone=light] #stars{opacity:.35}
#theme-art{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
#theme-art svg{position:absolute;transform:translate(-50%,-50%);opacity:.2}
[data-tone=light] #theme-art svg{opacity:.24}
#theme-art .sun{animation:breathe 9s ease-in-out infinite}
#theme-art .sun-rays{transform-origin:0 0;animation:spin2 240s linear infinite}
#theme-art .moon{animation:breathe 11s ease-in-out infinite}
.geo{opacity:.06}
.motifs span{position:absolute;color:var(--accent);opacity:.1;font-family:serif}
@keyframes spin2{to{transform:rotate(360deg)}}
@keyframes breathe{50%{opacity:.26}}
h1{color:var(--accent);text-shadow:none;font-weight:400}
.intro{color:var(--muted)}
nav a{color:var(--accent2)}
a{color:var(--accent)}
.card{background:linear-gradient(160deg,var(--card1),var(--card2));border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);box-shadow:0 2px 14px color-mix(in srgb,var(--ink) 10%,transparent);backdrop-filter:blur(4px)}
.card:hover{box-shadow:0 4px 20px color-mix(in srgb,var(--ink) 16%,transparent)}
.card h3{color:var(--accent2)}
.glyph{color:var(--accent);text-shadow:none}
.num-big{color:var(--accent);text-shadow:none}
.card .value{color:var(--ink)}.card .sub{color:var(--accent2)}.card p{color:var(--muted)}
button,.tab.active{background:color-mix(in srgb,var(--accent) 16%,var(--card1));color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent)}
.tab{background:transparent;color:var(--muted);border-color:color-mix(in srgb,var(--accent) 35%,transparent)}
.tab.active{color:var(--accent);box-shadow:none}
input[type=date],.num{background:var(--card1);color:var(--ink);border:1px solid color-mix(in srgb,var(--accent) 45%,transparent)}
[data-tone=light] input[type=date]{color-scheme:light}
.source{background:color-mix(in srgb,var(--accent) 10%,var(--card1));border:1px solid color-mix(in srgb,var(--accent) 30%,transparent);color:var(--ink);box-shadow:none}
.source b{color:var(--accent)}
.equiv{color:var(--accent)}
.ad{border-color:color-mix(in srgb,var(--accent) 35%,transparent);background:color-mix(in srgb,var(--card1) 60%,transparent);color:var(--muted)}
footer{color:var(--muted);border-top-color:color-mix(in srgb,var(--accent) 20%,transparent)}
.xline{background:color-mix(in srgb,var(--accent) 10%,transparent);border-color:color-mix(in srgb,var(--accent) 28%,transparent)}
.xsrc{color:var(--ink)}.xarrow,.xdst{color:var(--accent)}
.wm{color:var(--accent2);opacity:.85}
.bdate{border-color:color-mix(in srgb,var(--accent) 30%,transparent)}
.bhead,.between h2{color:var(--accent)}
.bresult{border-top-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.chk input,.bcal input{accent-color:var(--accent)}
#theme-btn{position:fixed;right:1rem;bottom:1rem;z-index:10;width:3rem;height:3rem;padding:0;border-radius:50%;font-size:1.05rem;color:var(--accent);background:var(--card1);border:1px solid color-mix(in srgb,var(--accent) 50%,transparent);box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 15%,transparent);cursor:pointer}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* ---- Refined control palette (per-theme --ctl / --ctlInk / --ctlLine) ---- */
:root{--ctl:#4c5a7c;--ctlInk:#f7f8fb;--ctlLine:#c9b27a}
button,.tab,.seg,.chip span,.track,#theme-btn,.num,input[type=date]{transition:background .2s,color .2s,border-color .2s,box-shadow .2s}
button{background:linear-gradient(180deg,color-mix(in srgb,var(--card1) 92%,var(--ctl)),var(--card2));color:var(--ink);border:1px solid color-mix(in srgb,var(--ctlLine) 70%,transparent)}
button:hover{border-color:var(--ctlLine)}
.tab{background:transparent;color:var(--ink);border:1px solid color-mix(in srgb,var(--ctlLine) 60%,transparent)}
.tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--ctl) 88%,#fff),var(--ctl))!important;color:var(--ctlInk)!important;border-color:var(--ctlLine)!important;box-shadow:0 1px 6px color-mix(in srgb,var(--ctl) 30%,transparent)}
.seg{background:color-mix(in srgb,var(--ctl) 10%,var(--card1));border:1px solid color-mix(in srgb,var(--ctlLine) 55%,transparent)}
.seg-btn{color:var(--muted)}
.seg-btn.active,.seg-btn:has(input:checked){background:var(--ctl)!important;color:var(--ctlInk)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ctlLine) 70%,transparent)}
.chip span{color:var(--ink);border:1px solid color-mix(in srgb,var(--ctlLine) 65%,transparent);background:color-mix(in srgb,var(--card1) 70%,transparent)}
.chip input:checked+span{background:var(--ctl);border-color:var(--ctlLine);color:var(--ctlInk)}
.track{background:color-mix(in srgb,var(--muted) 30%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ctlLine) 50%,transparent)}
.track::after{background:#fdfcf9}
.switch input:checked+.track{background:var(--ctl)}
#theme-btn{background:var(--card1);color:var(--ink);border:1px solid var(--ctlLine)}
#today,#jgo{border-color:var(--ctlLine)}
.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(--ctlLine);outline-offset:2px;box-shadow:0 0 0 4px color-mix(in srgb,var(--ctl) 25%,transparent)}
.num,input[type=date]{border-color:color-mix(in srgb,var(--ctlLine) 60%,transparent)}
html.preload *{transition:none!important}
/* ================= Gold trim (all themes) ================= */
:root{--goldgrad:linear-gradient(135deg,#b8862b 0%,#f5d77a 22%,#c9972f 45%,#fff1b8 62%,#d6a640 80%,#a8741f 100%);--ctlLine:#c9972f;--surface:#fff;--surface2:#f6f6f6}
.card,.between{--accent:var(--cardAccent);--accent2:var(--cardAccent2);--muted:var(--cardMuted)}
/* metallic border trick: opaque fill on padding-box, gold gradient on border-box */
.card,.between,.source,button,.tab,.seg,.chip span,.track,#theme-btn,.num,input[type=date],.bdate,.xline{border:1.5px solid transparent!important}
.card,.between{background:linear-gradient(165deg,var(--surface),var(--surface2)) padding-box,var(--goldgrad) border-box!important;backdrop-filter:none;box-shadow:0 2px 14px color-mix(in srgb,var(--ink) 10%,transparent),inset 0 1px 0 rgba(255,255,255,.35)}
.source{background:linear-gradient(var(--surface),var(--surface2)) padding-box,var(--goldgrad) border-box!important;color:var(--ink)}
.source b{color:var(--cardAccent)}
button,.tab,#theme-btn{background:linear-gradient(180deg,var(--surface),var(--surface2)) padding-box,var(--goldgrad) border-box!important;color:var(--ink)!important}
.tab.active{background:linear-gradient(180deg,color-mix(in srgb,var(--ctl) 85%,#fff),var(--ctl)) padding-box,var(--goldgrad) border-box!important;color:var(--ctlInk)!important}
.seg{background:linear-gradient(var(--surface2),var(--surface2)) padding-box,var(--goldgrad) border-box!important}
.seg-btn{background:transparent!important;border:0!important;color:var(--cardMuted)}
.seg-btn.active,.seg-btn:has(input:checked){background:linear-gradient(180deg,color-mix(in srgb,var(--ctl) 85%,#fff),var(--ctl))!important;color:var(--ctlInk)!important;box-shadow:inset 0 0 0 1px #e9c96a,0 1px 3px rgba(0,0,0,.2)}
.chip span{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--goldgrad) border-box!important;color:var(--ink)}
.chip input:checked+span{background:linear-gradient(180deg,color-mix(in srgb,var(--ctl) 85%,#fff),var(--ctl)) padding-box,var(--goldgrad) border-box!important;color:var(--ctlInk)}
.track{background:linear-gradient(color-mix(in srgb,var(--cardMuted) 25%,var(--surface)),color-mix(in srgb,var(--cardMuted) 25%,var(--surface))) padding-box,var(--goldgrad) border-box!important;box-shadow:none}
.switch input:checked+.track{background:linear-gradient(var(--ctl),var(--ctl)) padding-box,var(--goldgrad) border-box!important}
.track::after{background:linear-gradient(135deg,#fff8e0,#e9c96a);top:.1rem;left:.1rem}
.num,input[type=date]{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--goldgrad) border-box!important;color:var(--ink)}
.bdate{background:linear-gradient(var(--surface),var(--surface)) padding-box,var(--goldgrad) border-box!important;opacity:1}
.xline{background:linear-gradient(color-mix(in srgb,var(--ctl) 8%,var(--surface)),color-mix(in srgb,var(--ctl) 8%,var(--surface))) padding-box,var(--goldgrad) border-box!important}
.ad{border-color:color-mix(in srgb,#c9972f 55%,transparent)}
/* sheen highlight + slow shimmer on hover */
button,.tab,.chip span{position:relative;overflow:hidden}
button::after,.tab::after,.chip span::after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(115deg,transparent 30%,rgba(255,244,200,.45) 48%,transparent 62%);transform:translateX(-120%);pointer-events:none}
button:hover::after,.tab:hover::after,.chip:hover span::after{animation:sheen 1.6s ease-in-out}
@keyframes sheen{to{transform:translateX(120%)}}
.card:hover{box-shadow:0 4px 22px color-mix(in srgb,#c9972f 30%,transparent)}
/* gold art */
#theme-art svg{opacity:.22}
[data-theme=obsidian-gold] #theme-art svg{opacity:.2}
[data-theme=verdigris-gold] #theme-art svg{opacity:.3}
.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(--ctl);outline-offset:2px;box-shadow:0 0 0 4px rgba(233,201,106,.45)}
[data-tone=dark] input[type=date]{color-scheme:dark}
/* Mute calendars */
.mutebar{grid-column:1/-1;display:flex;gap:.6rem;align-items:center;justify-content:flex-end;flex-wrap:wrap;margin:-.2rem 0 -.2rem}
.mute-btn,.mute-all{font:500 .85rem 'Inter',system-ui,sans-serif;padding:.4rem 1rem;border-radius:999px;cursor:pointer}
.mute-note{font:500 .8rem 'Inter',system-ui,sans-serif;padding:.3rem .8rem;border-radius:999px;cursor:pointer}
.mute-panel{grid-column:1/-1;padding:1rem;border-radius:16px;border:1.5px solid transparent;background:linear-gradient(165deg,var(--surface),var(--surface2)) padding-box,var(--goldgrad) border-box}
.mute-hint{margin:0 0 .6rem;font:400 .85rem 'Inter',sans-serif;color:var(--cardMuted)}
.mute-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.8rem}
.mute-chip input:checked+span{opacity:.92}
.mute-chip input:checked+span::before{content:'✕ '}
.mute-all:disabled{opacity:.55;cursor:default}
.mute-empty{grid-column:1/-1;text-align:center;color:var(--muted)}
.mute-chip span{line-height:1.3}
/* Symbols: always plain text glyphs (never colour emoji), self-hosted Noto Sans Symbols first */
.glyph,.motifs span,#theme-btn,.sym,.mute-btn{font-family:'DfD Symbols','DfD Symbols 2','Inter','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols',serif;font-variant-emoji:text}
.mute-btn,.sym{font-family:'Inter','DfD Symbols','DfD Symbols 2',system-ui,sans-serif}
.glyph,.motifs span,.sym{color:var(--accent)}
.motifs span{color:#c9972f}

/* ================= Share-worthy cards ================= */
.card,.between,.source,.mute-panel{--ink:var(--cardInk);--muted:var(--cardMuted);color:var(--cardInk)}
button,.tab,.chip span,.num,input[type=date],#theme-btn,.mute-note,.mute-btn{color:var(--cardInk)!important}
.tab.active,.seg-btn.active,.seg-btn:has(input:checked),.chip input:checked+span{color:var(--ctlInk)!important}
.seg-btn{color:var(--cardMuted)!important}
input[type=date]{color-scheme:dark}
.card{display:flex;flex-direction:column;padding:1.6rem 1.5rem 1.1rem!important;border-radius:20px;overflow:hidden;isolation:isolate}
.card::before{content:'';position:absolute;inset:6px;border-radius:15px;pointer-events:none;z-index:-1;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20stroke%3D%22%23e3c46a%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22%22%3E%3Cpath%20d%3D%22M3%2040%20V10%20Q3%203%2010%203%20H40%22/%3E%3Cpath%20d%3D%22M8%2034%20V14%20Q8%208%2014%208%20H34%22%20stroke-width%3D%22.7%22/%3E%3Cpath%20d%3D%22M14%2020%20Q14%2014%2020%2014%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222.2%22%20fill%3D%22%23e3c46a%22/%3E%3Cpath%20d%3D%22M3%2046%20q3%204%200%208%20M46%203%20q4%203%208%200%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M26%208%20q4%20-4%208%200%20q-4%204%20-8%200Z%20M8%2026%20q-4%204%200%208%20q4%20-4%200%20-8Z%22%20fill%3D%22%23e3c46a%22%20fill-opacity%3D%22.5%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20stroke%3D%22%23e3c46a%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22translate%2860%2C0%29%20scale%28-1%2C1%29%22%3E%3Cpath%20d%3D%22M3%2040%20V10%20Q3%203%2010%203%20H40%22/%3E%3Cpath%20d%3D%22M8%2034%20V14%20Q8%208%2014%208%20H34%22%20stroke-width%3D%22.7%22/%3E%3Cpath%20d%3D%22M14%2020%20Q14%2014%2020%2014%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222.2%22%20fill%3D%22%23e3c46a%22/%3E%3Cpath%20d%3D%22M3%2046%20q3%204%200%208%20M46%203%20q4%203%208%200%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M26%208%20q4%20-4%208%200%20q-4%204%20-8%200Z%20M8%2026%20q-4%204%200%208%20q4%20-4%200%20-8Z%22%20fill%3D%22%23e3c46a%22%20fill-opacity%3D%22.5%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20stroke%3D%22%23e3c46a%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22translate%280%2C60%29%20scale%281%2C-1%29%22%3E%3Cpath%20d%3D%22M3%2040%20V10%20Q3%203%2010%203%20H40%22/%3E%3Cpath%20d%3D%22M8%2034%20V14%20Q8%208%2014%208%20H34%22%20stroke-width%3D%22.7%22/%3E%3Cpath%20d%3D%22M14%2020%20Q14%2014%2020%2014%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222.2%22%20fill%3D%22%23e3c46a%22/%3E%3Cpath%20d%3D%22M3%2046%20q3%204%200%208%20M46%203%20q4%203%208%200%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M26%208%20q4%20-4%208%200%20q-4%204%20-8%200Z%20M8%2026%20q-4%204%200%208%20q4%20-4%200%20-8Z%22%20fill%3D%22%23e3c46a%22%20fill-opacity%3D%22.5%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2060%2060%22%20fill%3D%22none%22%20stroke%3D%22%23e3c46a%22%20stroke-width%3D%221.1%22%20stroke-linecap%3D%22round%22%3E%3Cg%20transform%3D%22translate%2860%2C60%29%20scale%28-1%2C-1%29%22%3E%3Cpath%20d%3D%22M3%2040%20V10%20Q3%203%2010%203%20H40%22/%3E%3Cpath%20d%3D%22M8%2034%20V14%20Q8%208%2014%208%20H34%22%20stroke-width%3D%22.7%22/%3E%3Cpath%20d%3D%22M14%2020%20Q14%2014%2020%2014%22/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2220%22%20r%3D%222.2%22%20fill%3D%22%23e3c46a%22/%3E%3Cpath%20d%3D%22M3%2046%20q3%204%200%208%20M46%203%20q4%203%208%200%22%20stroke-width%3D%22.8%22/%3E%3Cpath%20d%3D%22M26%208%20q4%20-4%208%200%20q-4%204%20-8%200Z%20M8%2026%20q-4%204%200%208%20q4%20-4%200%20-8Z%22%20fill%3D%22%23e3c46a%22%20fill-opacity%3D%22.5%22%20stroke-width%3D%22.6%22/%3E%3C/g%3E%3C/svg%3E");background-position:top left,top right,bottom left,bottom right;background-size:46px;background-repeat:no-repeat;opacity:.9}
.card::after{content:'';position:absolute;right:-38px;bottom:-38px;width:190px;height:190px;background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%22-100%20-100%20200%20200%22%20fill%3D%22none%22%20stroke%3D%22%23e3c46a%22%20stroke-width%3D%22.8%22%3E%3Ccircle%20cx%3D%220%22%20cy%3D%220%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%220%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%22-30%22%20cy%3D%220%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%2226%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%22-15%22%20cy%3D%2226%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%2215%22%20cy%3D%22-26%22%20r%3D%2230%22/%3E%3Ccircle%20cx%3D%22-15%22%20cy%3D%22-26%22%20r%3D%2230%22/%3E%3Ccircle%20r%3D%2260%22/%3E%3Ccircle%20r%3D%2264%22%20stroke-dasharray%3D%222%204%22/%3E%3Cpath%20d%3D%22M70.0%2C0.0%20L84.0%2C0.0%22/%3E%3Cpath%20d%3D%22M67.6%2C18.1%20L81.1%2C21.7%22/%3E%3Cpath%20d%3D%22M60.6%2C35.0%20L72.7%2C42.0%22/%3E%3Cpath%20d%3D%22M49.5%2C49.5%20L59.4%2C59.4%22/%3E%3Cpath%20d%3D%22M35.0%2C60.6%20L42.0%2C72.7%22/%3E%3Cpath%20d%3D%22M18.1%2C67.6%20L21.7%2C81.1%22/%3E%3Cpath%20d%3D%22M0.0%2C70.0%20L0.0%2C84.0%22/%3E%3Cpath%20d%3D%22M-18.1%2C67.6%20L-21.7%2C81.1%22/%3E%3Cpath%20d%3D%22M-35.0%2C60.6%20L-42.0%2C72.7%22/%3E%3Cpath%20d%3D%22M-49.5%2C49.5%20L-59.4%2C59.4%22/%3E%3Cpath%20d%3D%22M-60.6%2C35.0%20L-72.7%2C42.0%22/%3E%3Cpath%20d%3D%22M-67.6%2C18.1%20L-81.1%2C21.7%22/%3E%3Cpath%20d%3D%22M-70.0%2C0.0%20L-84.0%2C0.0%22/%3E%3Cpath%20d%3D%22M-67.6%2C-18.1%20L-81.1%2C-21.7%22/%3E%3Cpath%20d%3D%22M-60.6%2C-35.0%20L-72.7%2C-42.0%22/%3E%3Cpath%20d%3D%22M-49.5%2C-49.5%20L-59.4%2C-59.4%22/%3E%3Cpath%20d%3D%22M-35.0%2C-60.6%20L-42.0%2C-72.7%22/%3E%3Cpath%20d%3D%22M-18.1%2C-67.6%20L-21.7%2C-81.1%22/%3E%3Cpath%20d%3D%22M-0.0%2C-70.0%20L-0.0%2C-84.0%22/%3E%3Cpath%20d%3D%22M18.1%2C-67.6%20L21.7%2C-81.1%22/%3E%3Cpath%20d%3D%22M35.0%2C-60.6%20L42.0%2C-72.7%22/%3E%3Cpath%20d%3D%22M49.5%2C-49.5%20L59.4%2C-59.4%22/%3E%3Cpath%20d%3D%22M60.6%2C-35.0%20L72.7%2C-42.0%22/%3E%3Cpath%20d%3D%22M67.6%2C-18.1%20L81.1%2C-21.7%22/%3E%3C/svg%3E") center/contain no-repeat;opacity:.13;pointer-events:none;z-index:-1}
.card h3{order:1;margin:0 0 .15rem;font:400 1.05rem/1.3 'Marcellus',serif;letter-spacing:.04em;color:var(--cardAccent2);padding-right:2.4rem}
.card .glyph{position:absolute;top:1.25rem;right:1.35rem;font-size:1.7rem;color:var(--cardAccent)}
.card .num-big{order:2;font:700 2.35rem/1.1 'Inter',system-ui,sans-serif;color:var(--cardAccent);margin:.35rem 0 .2rem;letter-spacing:.01em;background:linear-gradient(180deg,#fff1b8 0%,var(--cardAccent) 45%,#c9972f 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.card .value{order:3;font:600 1.05rem/1.4 'Inter',sans-serif;color:var(--cardInk)}
.card .sub{order:4;font:500 .9rem/1.4 'Inter',sans-serif;color:var(--cardAccent2);margin-top:.15rem}
.card .xline{order:5;margin:.8rem 0 .2rem;font:600 .9rem/1.45 'Inter',sans-serif}
.card .xline .xsrc{color:var(--cardInk)} .card .xline .xarrow,.card .xline .xdst{color:var(--cardAccent)}
.card p{order:6;margin:.75rem 0 0;font-size:.95rem;line-height:1.55;color:var(--cardMuted)}
.card .wm{order:7;margin-top:auto;padding-top:.9rem;text-align:center;font:400 .78rem 'Marcellus',serif;letter-spacing:.14em;color:var(--cardAccent);opacity:.95}
.card .wm::before,.card .wm::after{content:' ✧ ';opacity:.8}
.between .wm{text-align:center;font:400 .8rem 'Marcellus',serif;letter-spacing:.14em;color:var(--cardAccent)}
.between .bhead,.between h2,.bbig{color:var(--cardAccent)}
.bfromto{color:var(--cardInk)}
.btotals dt{color:var(--cardMuted)} .btotals dd{color:var(--cardInk)}
.bfields label,.switch,.blab,.bdate legend,.mute-hint{color:var(--cardMuted)}
.switch{color:var(--cardInk)}
.source b{color:var(--cardAccent)}
@media (max-width:600px){.card{padding:1.4rem 1.2rem 1rem!important}.card .num-big{font-size:2.1rem}}
/* Per-calendar background scene */
.card::after{display:none}
.card-art{position:absolute;right:-6px;bottom:-4px;width:72%;max-width:250px;height:auto;z-index:-1;pointer-events:none;fill:none;stroke:var(--cardAccent);stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;color:var(--cardAccent);opacity:.16}
.card{position:relative;isolation:isolate;overflow:hidden}
/* Gold-outlined key text */
.card .num-big{background:linear-gradient(180deg,#fff1b8,#f5d77a 40%,#d6a640 70%,#b8862b);-webkit-background-clip:text;background-clip:text;color:transparent!important;filter:drop-shadow(0 0 .6px #8a5f17) drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.card .value{text-shadow:0 0 1px rgba(201,151,47,.6)}
/* ============ 1:1 share cards (X shows square images uncropped) ============ */
.layout{grid-template-columns:1fr!important;max-width:1220px}
.grid{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch;gap:1.1rem}
@media (max-width:1020px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.grid>.source,.grid>.mutebar,.grid>.mute-panel,.grid>.ad,.grid>.mute-empty{grid-column:1/-1}
.grid>.card{aspect-ratio:1/1;container-type:inline-size;padding:7% 7% 5.5%!important;justify-content:flex-start;transform:none!important;min-width:0}
.between{aspect-ratio:auto}
.grid>.card .card-art{right:0;bottom:0;width:100%;max-width:none;opacity:.17}
.grid>.card h3{font-size:5.2cqw;padding-right:22cqw;margin:0}
.grid>.card .glyph{top:6.2cqw;right:7cqw;font-size:7cqw}
.grid>.card .num-big{font-size:14cqw;margin:2.4cqw 0 1.2cqw;max-width:100%;white-space:nowrap}
.grid>.card .value{font-size:4.9cqw;line-height:1.3}
.grid>.card .sub{font-size:4.1cqw;margin-top:.8cqw}
.grid>.card .xline{font-size:4cqw;line-height:1.35;margin:3.4cqw 0 0;padding:2.4cqw 3.4cqw!important;border-radius:3cqw}
.grid>.card .wm{font-size:3.4cqw;padding-top:0;text-align:left;margin-top:auto;letter-spacing:.1em}
.card .wm::before{content:'✧ '}.card .wm::after{content:''}
.card .info-btn{position:absolute;top:6cqw;right:17.5cqw;width:8cqw;height:8cqw;min-width:24px;min-height:24px;padding:0;border-radius:50%;font:400 4.6cqw/1 'Noto Sans Symbols','Inter',sans-serif;display:grid;place-items:center}
.card .save-btn{position:absolute;right:6cqw;bottom:4.6cqw;padding:1.3cqw 3.2cqw;border-radius:999px;font:600 max(10px,3.1cqw) 'Inter',sans-serif;color:#3a2a08!important;background:linear-gradient(180deg,#fff1b8,#e9c96a 45%,#c9972f) padding-box,var(--goldgrad) border-box!important}
.card .about{position:absolute;inset:3.5cqw;z-index:3;overflow:auto;padding:6cqw;border-radius:4cqw;background:linear-gradient(var(--surface),var(--surface2)) padding-box,var(--goldgrad) border-box;border:1.5px solid transparent;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.card .about h4{margin:0 0 .5rem;font:400 max(14px,4.6cqw) 'Marcellus',serif;color:var(--cardAccent);letter-spacing:.04em}
.card .about p{margin:0;font:400 max(13px,4cqw)/1.5 'Inter',sans-serif;color:var(--cardInk)}
.card .about-close{margin-top:.8rem;padding:.3rem .9rem;border-radius:999px;font:600 .85rem 'Inter',sans-serif}
.card::before{background-size:clamp(26px,10cqw,44px)}
/* ============ Theme picker ============ */
.theme-picker{display:flex;justify-content:center;align-items:center;gap:.55rem;margin:.2rem auto 1rem;flex-wrap:wrap}
.tp-label{font:400 .85rem 'Marcellus',serif;letter-spacing:.08em;color:var(--ink);margin-right:.2rem}
.swatch{width:34px;height:34px;padding:0!important;border-radius:50%!important;cursor:pointer;position:relative;
  background:linear-gradient(135deg,var(--sw-bg) 0 50%,var(--sw-card) 50% 100%) padding-box,var(--goldgrad) border-box!important;border:2.5px solid transparent!important;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.swatch.random{font:400 1rem/1 'Noto Sans Symbols 2','Noto Sans Symbols',sans-serif;color:#7a5410!important;background:linear-gradient(135deg,#fff8e0,#e9c96a) padding-box,var(--goldgrad) border-box!important}
.swatch.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px #e9c96a,0 2px 8px rgba(0,0,0,.3)}
.swatch:hover{transform:translateY(-1px)}


/* ============ Stronger scene art + scrim ============ */
.grid>.card .card-art{opacity:var(--artOp,.32);stroke-width:1.6;stroke:url(#artGold);filter:drop-shadow(0 0 1.5px color-mix(in srgb,#f5d77a 55%,transparent))}
[data-theme=verdigris-gold]{--artOp:.4}
[data-theme=obsidian-gold]{--artOp:.3}
[data-theme=ivory-gold]{--artOp:.34}
.grid>.card::after{display:block;content:'';position:absolute;inset:0;width:auto;height:auto;right:0;bottom:0;border-radius:inherit;z-index:-1;opacity:1;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 82%,transparent) 0%,color-mix(in srgb,var(--surface) 62%,transparent) 55%,transparent 80%)!important}
.grid>.card h3,.grid>.card .value,.grid>.card .sub,.grid>.card .wm{text-shadow:0 1px 3px color-mix(in srgb,var(--surface) 90%,transparent),0 0 1px color-mix(in srgb,var(--surface) 90%,transparent)}
.grid>.card .xline{background:linear-gradient(color-mix(in srgb,var(--surface) 92%,#fff 4%),color-mix(in srgb,var(--surface) 92%,#fff 4%)) padding-box,var(--goldgrad) border-box!important}

/* ---- Mobile layout fixes (iOS Safari) ---- */
html,body{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body{overflow-x:clip}}
header{overflow:hidden}
.layout,.layout>*,main,section{min-width:0;max-width:100%}
/* Safari sizes a size-contained grid item from its (zero) intrinsic width; force full track width */
.grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-items:stretch;width:100%}
@media (max-width:900px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.grid{grid-template-columns:minmax(0,1fr)}}
.grid>.card{width:100%;height:auto;justify-self:stretch;align-self:start}
input,select,button,textarea{max-width:100%}
@media (max-width:600px){
  .layout{padding:0 .75rem 1.5rem}
  .tabs,.seg,.chips,.mute-panel,.mutebar{flex-wrap:wrap;max-width:100%}
  .seg{display:flex;justify-content:center}
}
@media (max-width:600px){
  .mutebar{justify-content:center}
  .barrow{display:none}
  body{background-attachment:scroll}
  html{background:var(--bg3,var(--bg))}
  #theme-btn{right:.75rem;bottom:calc(.75rem + env(safe-area-inset-bottom))}
}
.equiv .jdn{display:inline-flex;flex-direction:column;align-items:center;vertical-align:top;line-height:1.3}
.equiv .jdn-note{font-size:.72em;opacity:.7;color:var(--muted);letter-spacing:.02em}

/* ---- Compact view ---- */
.mutebar .compact-switch{display:inline-flex;align-items:center;gap:.45rem;font:500 .9rem 'Inter',sans-serif;color:var(--ink);cursor:pointer;margin-right:auto}
.grid>.card .card-art{transition:width .36s ease,top .36s ease,bottom .36s ease,transform .36s ease,opacity .36s ease}
.compact>.card{aspect-ratio:5/2;padding:4.5% 6% 4%!important;justify-content:center}
.compact>.card .sub,.compact>.card .xline,.compact>.card p,.compact>.card .wm{display:none}
.compact>.card h3{font-size:4.6cqw}
.compact>.card .glyph{top:4.5cqw;font-size:6cqw}
.compact>.card .info-btn{top:4cqw}
.compact>.card .num-big{font-size:11cqw;margin:1.4cqw 0 .6cqw}
.compact>.card .value{font-size:4.3cqw;padding-right:24cqw;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.compact>.card .card-art{width:52%;right:0;bottom:-14%;opacity:calc(var(--artOp,.32) * .85)}
.compact>.card .save-btn{bottom:4cqw;right:5cqw}
.compact>.card::after{background:linear-gradient(90deg,color-mix(in srgb,var(--surface) 85%,transparent) 0%,color-mix(in srgb,var(--surface) 55%,transparent) 55%,transparent 85%)!important}
@media (max-width:600px){.mutebar .compact-switch{margin-right:0}}
/* compact: "<input> is <result>" line */
.card .cmp-line{display:none}
.compact>.card:has(.cmp-line) .num-big{display:none}
.compact>.card .cmp-line{display:block;order:2;white-space:nowrap;margin:1.4cqw 0 .6cqw;line-height:1.1;padding-right:2cqw}
.cmp-from{font:600 5.2cqw 'Inter',sans-serif;color:var(--cardMuted)}
.cmp-is{font:400 4.4cqw 'Inter',sans-serif;color:var(--cardMuted);opacity:.85}
.cmp-to{font:700 9.5cqw/1.1 'Inter',sans-serif;background:linear-gradient(180deg,#fff1b8,#f5d77a 40%,#d6a640 70%,#b8862b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 .6px #8a5f17) drop-shadow(0 1px 0 rgba(0,0,0,.35))}
.card .wm{pointer-events:none}.card .save-btn,.card .info-btn{z-index:2}
/* Day of year / days left (Time Between Dates) */
.yinfo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;margin:1rem 0}
@media (max-width:600px){.yinfo{grid-template-columns:minmax(0,1fr)}}
.ycol{padding:.8rem 1rem;border-radius:14px;border:1.5px solid transparent;background:linear-gradient(color-mix(in srgb,var(--surface) 92%,#fff 4%),color-mix(in srgb,var(--surface) 92%,#fff 4%)) padding-box,var(--goldgrad) border-box}
.ycol h4{margin:0 0 .4rem;font:400 .95rem 'Marcellus',serif;letter-spacing:.04em;color:var(--cardAccent2)}
.yrow{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;padding:.2rem 0}
.yrow+.yrow{border-top:1px solid color-mix(in srgb,var(--cardAccent) 22%,transparent)}
.ylab{font:500 .92rem 'Inter',sans-serif;color:var(--cardInk)}
.ymd{color:var(--cardMuted);font-size:.85em}
.ynum{font:700 1.7rem/1.1 'Inter',sans-serif;background:linear-gradient(180deg,#fff1b8,#f5d77a 40%,#d6a640 70%,#b8862b);-webkit-background-clip:text;background-clip:text;color:transparent}
/* History note on square cards */
.grid>.card .hist{order:6;margin:3cqw 0 0;font:400 3.5cqw/1.4 'Inter',sans-serif;color:var(--cardMuted);max-width:100%}
.compact>.card .hist{display:none}
/* year-info panels: sans heading with gold trim; mobile fit */
.ycol h4{font:650 1.05rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.01em;color:var(--cardInk);-webkit-text-stroke:.6px color-mix(in srgb,#e6c36a 85%,transparent);paint-order:stroke fill;text-shadow:0 0 1px #c9972f,0 0 6px color-mix(in srgb,#e6c36a 35%,transparent)}
.yinfo{width:100%;max-width:100%;min-width:0;box-sizing:border-box}
.ycol{min-width:0;max-width:100%;box-sizing:border-box;overflow:hidden}
.yrow{min-width:0}
.ylab{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.ynum{flex:0 0 auto;padding-right:.1em}
.bdates,.bdate,.between{min-width:0;max-width:100%;box-sizing:border-box}
.ynum{display:inline-block;padding:0 .12em 0 .06em;-webkit-box-decoration-break:clone}
/* year-info headings: bright gold, dark ring, soft glow */
.ycol h4{font:700 1.15rem/1.3 'Inter',system-ui,sans-serif;letter-spacing:.015em;color:#f5c542;-webkit-text-stroke:0;
  text-shadow:1px 0 0 #2a1a05,-1px 0 0 #2a1a05,0 1px 0 #2a1a05,0 -1px 0 #2a1a05,.7px .7px 0 #2a1a05,-.7px .7px 0 #2a1a05,.7px -.7px 0 #2a1a05,-.7px -.7px 0 #2a1a05,0 0 8px rgba(245,197,66,.45)}
/* Segmented toggle: shrink-wrapped, equal halves */
.seg{position:relative;display:grid!important;grid-template-columns:1fr 1fr;width:fit-content;max-width:100%;margin:1rem auto 0;padding:4px;gap:0;flex-wrap:nowrap;isolation:isolate}
.seg-btn{justify-content:center;white-space:nowrap;padding:.5rem 1.2rem}

/* ---- Motion system (see motion.js) ---- */
:root{--ease:cubic-bezier(.4,0,.2,1)}
.has-slider{position:relative;isolation:isolate}
.slide-ind{position:absolute;left:0;top:0;z-index:0;pointer-events:none;border-radius:999px;opacity:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--ctl) 85%,#fff),var(--ctl));box-shadow:inset 0 0 0 1px #e9c96a,0 1px 4px rgba(0,0,0,.22)}
.slide-ind.ready{transition:transform .32s var(--ease),width .32s var(--ease),height .32s var(--ease),opacity .2s}
.has-slider>:not(.slide-ind){position:relative;z-index:1}
.seg.has-slider .seg-btn.active,.tabs.has-slider .tab.active{background:transparent!important;box-shadow:none!important}
.tabs.has-slider .tab{transition:color .32s var(--ease)!important}
.seg-btn{transition:color .32s var(--ease)!important}
.theme-picker.has-slider .slide-ind{background:transparent;border-radius:50%;box-shadow:0 0 0 2px #f5c542,0 0 10px rgba(245,197,66,.55)}
.theme-picker.has-slider .tp-label{z-index:1}
/* switches */
.track::after{transition:transform .28s var(--ease),background .28s!important}
.track{transition:background .28s var(--ease)!important}
/* buttons: subtle hover/press */
button,.tab,.chip span{transition:transform .18s var(--ease),box-shadow .25s var(--ease),background .25s,color .25s}
button:hover:not(:disabled),.chip:hover span{transform:translateY(-1px)}
button:active:not(:disabled),.chip:active span{transform:translateY(0) scale(.97);transition-duration:.08s}
.swatch:hover{transform:scale(1.08)}.swatch:active{transform:scale(.95)}
.grid>.card .save-btn:hover{transform:translateY(-1px)}
/* tab panes and mute panel ease in */
@keyframes dfd-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
#pane-convert:not([hidden]),#pane-between:not([hidden]),#results:not([hidden]){animation:dfd-rise .32s var(--ease)}
.mute-panel{animation:dfd-open .3s var(--ease);transform-origin:top}
@keyframes dfd-open{from{opacity:0;transform:translateY(-6px) scaleY(.96)}to{opacity:1;transform:none}}
/* theme crossfade fallback (no View Transitions) */
.theme-fade *,.theme-fade *::before,.theme-fade *::after,.theme-fade body{transition:background-color .4s,color .4s,border-color .4s,fill .4s,stroke .4s!important}
::view-transition-old(root),::view-transition-new(root){animation-duration:.4s;animation-timing-function:ease}
.preload .slide-ind{transition:none!important}
@media (prefers-reduced-motion: reduce){.slide-ind,.slide-ind.ready{transition:none!important}::view-transition-old(root),::view-transition-new(root){animation:none!important}}
/* Main tabs as one segmented bar (matches .seg) */
.tabs{display:grid!important;grid-template-columns:1fr 1fr;width:fit-content;max-width:calc(100% - 1.5rem);margin:1.5rem auto 0;padding:4px;gap:0;border-radius:999px;flex-wrap:nowrap;
  border:1.5px solid transparent!important;background:linear-gradient(var(--surface2),var(--surface2)) padding-box,var(--goldgrad) border-box!important}
.tabs .tab{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:999px;padding:.55rem 1.3rem;white-space:nowrap;justify-content:center;font-size:1rem;color:var(--cardMuted)!important;overflow:visible}
.tabs .tab.active{color:var(--ctlInk)!important}
.tabs .tab::after{display:none}
.tabs .tab:hover:not(:disabled),.tabs .tab:active{transform:none}
@media (max-width:600px){.tabs{max-width:calc(100% - 1rem)}.tabs .tab{padding:.5rem .7rem;font-size:clamp(.78rem,3.6vw,.95rem)}}
/* two-segment bars: indicator is exactly one segment */
.slider-halves{padding:4px!important;box-sizing:border-box}
.slider-halves>.slide-ind{left:4px;top:4px;bottom:4px;width:calc(50% - 4px)!important;height:auto!important}
.slider-halves>.seg-btn,.slider-halves>.tab{margin:0!important;min-width:0}
/* theme picker groups */
.tp-break{flex-basis:100%;height:0}
.tp-group{font:600 .72rem 'Inter',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);opacity:.8;min-width:2.6rem;text-align:right}
.seg-btn[data-src]{flex-direction:column;justify-content:center;gap:0;line-height:1.15;align-self:stretch}
.seg-note{font:500 .68rem/1.2 'Inter',sans-serif;opacity:.75;letter-spacing:.01em}
/* ---- Clock tab ---- */
.tabs .ts{display:none}
.tabs.slider-halves>.slide-ind{width:calc((100% - 8px) / var(--n,2))!important}
.tabs{grid-template-columns:repeat(var(--n,2),1fr)}
@media (max-width:600px){.tabs .tl{display:none}.tabs .ts{display:inline}.tabs .tab{padding:.5rem .9rem;font-size:.92rem}}
.clockpane{max-width:1100px;margin:1rem auto 0;padding:1.2rem;border-radius:20px;color:var(--cardInk);
  background:linear-gradient(165deg,var(--surface),var(--surface2)) padding-box,var(--goldgrad) border-box;border:1.5px solid transparent;box-sizing:border-box;width:100%;min-width:0}
.clock-top{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:1.5rem;align-items:center}
@media (max-width:700px){.clock-top{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}}
.clock-facebox{width:100%;max-width:340px;aspect-ratio:1}
.clock-face{width:100%;height:100%;overflow:visible}
.cf-rim{fill:none;stroke:url(#clkGold);stroke-width:4}
.cf-dial{fill:color-mix(in srgb,var(--surface2) 80%,#000 20%)}
.cf-line{fill:none;stroke:color-mix(in srgb,var(--cardAccent) 70%,transparent);stroke-width:.8}
.cf-line.faint{opacity:.35;stroke-dasharray:1 3}
.cf-tick{stroke:var(--cardAccent);stroke-width:.7;opacity:.7}
.cf-zod{fill:var(--cardAccent2);font:400 9px 'Noto Sans Symbols','Noto Sans Symbols 2',serif;text-anchor:middle;dominant-baseline:central;opacity:.85}
.cf-num{fill:var(--cardInk);font:400 11px 'Marcellus',serif;text-anchor:middle;dominant-baseline:central;letter-spacing:.02em}
.cf-star{fill:url(#clkGold);opacity:.35}
.hand-fill{fill:url(#clkGold);stroke:#5a3d0c;stroke-width:.4}
.hand-sun{fill:url(#clkGold);stroke:#5a3d0c;stroke-width:.5}
.hand-ray{stroke:#e9c96a;stroke-width:1.2;stroke-linecap:round}
.hand-moon{fill:#f3ead2;stroke:#c9972f;stroke-width:.6}
.hand-sec{stroke:#e9a948;stroke-width:1;stroke-linecap:round}
.hand-sec-dot{fill:#e9a948}
.cf-hub{fill:url(#clkGold);stroke:#5a3d0c;stroke-width:.6}
.hand-h,.hand-m{filter:drop-shadow(0 1px 1.2px rgba(0,0,0,.45))}
.clock-read{min-width:0}
.clk-time{font:700 clamp(2.2rem,8vw,3.6rem)/1.05 'Inter',sans-serif;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fff1b8,#f5d77a 40%,#d6a640 70%,#b8862b);-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 .05em}
.clk-date{font:500 1.05rem 'Inter',sans-serif;margin:.3rem 0 .5rem;color:var(--cardInk)}
.clk-meta{display:flex;flex-wrap:wrap;gap:.4rem .8rem;align-items:center;font:500 .92rem 'Inter',sans-serif;color:var(--cardMuted)}
@media (max-width:700px){.clk-meta{justify-content:center}}
.clk-off{padding:.15rem .6rem;border-radius:999px;border:1px solid color-mix(in srgb,var(--cardAccent) 60%,transparent);color:var(--cardAccent)}
.clk-zone{overflow-wrap:anywhere}
.clk-local{margin-top:.8rem;font:600 .85rem 'Inter',sans-serif;padding:.4rem 1rem;border-radius:999px}
.clock-map{margin-top:1.2rem}
.clk-hint{margin:0 0 .4rem;font:500 .85rem 'Inter',sans-serif;color:var(--cardMuted);text-align:center}
.worldmap{display:block;width:100%;height:auto;border-radius:12px;cursor:crosshair;background:color-mix(in srgb,var(--surface2) 75%,#000 25%);border:1px solid color-mix(in srgb,var(--cardAccent) 40%,transparent);touch-action:manipulation}
.tzband{fill:transparent}.tzband.odd{fill:color-mix(in srgb,var(--cardAccent) 7%,transparent)}
.tzband-on{fill:color-mix(in srgb,var(--cardAccent) 22%,transparent);transition:x .4s var(--ease,ease)}
.land{fill:color-mix(in srgb,var(--cardAccent) 22%,var(--surface));stroke:color-mix(in srgb,var(--cardAccent) 75%,transparent);stroke-width:.35;stroke-linejoin:round}
.tzlab{fill:var(--cardMuted);font:500 4px 'Inter',sans-serif;text-anchor:middle;opacity:.8}
.pin{transition:transform .45s var(--ease,ease);pointer-events:none}
.pin-head{fill:url(#clkGold);stroke:#5a3d0c;stroke-width:.4}.pin-dot{fill:#3a2a08}
.pin-halo{fill:none;stroke:#f5c542;stroke-width:.6;opacity:.7;animation:pinPulse 2s ease-out infinite}
@keyframes pinPulse{from{r:2;opacity:.9}to{r:9;opacity:0}}
.clk-cities{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin-top:1rem}
.clk-city{display:flex;flex-direction:column;align-items:flex-start;gap:.1rem;padding:.55rem .8rem!important;border-radius:14px!important;text-align:left;min-width:0}
.cc-name{font:600 .82rem 'Inter',sans-serif;color:var(--cardMuted)}
.cc-time{font:700 1.05rem 'Inter',sans-serif;color:var(--cardAccent);font-variant-numeric:tabular-nums}
@media (max-width:600px){.clockpane{padding:.9rem}.clk-cities{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (prefers-reduced-motion: reduce){.pin,.tzband-on{transition:none}.pin-halo{animation:none}}
/* Card art: fixed intrinsic size, two transform endpoints (square / compact). Only transform animates. */
.grid>.card .card-art{position:absolute;top:0;left:0;right:auto;bottom:auto;width:100%;max-width:none;height:auto;transform-origin:100% 100%;
  transform:translateY(30cqw) scale(1);transition:none!important}
.compact>.card .card-art{width:100%;right:auto;bottom:auto;transform:translateY(-24.4cqw) scale(.52)}
.animating>.card,.animating>.card .card-art{will-change:transform}
.compact>.card .card-art{opacity:var(--artOp,.32)}
.grid>.card{transition:box-shadow .3s ease!important}
/* Mobile tab bar: full names stacked, equal segments */
@media (max-width:600px){
  .tabs{width:100%;max-width:min(100% - 1rem,360px);grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:stretch}
  .tabs .tl{display:inline}
  .tabs .tab{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;white-space:normal;line-height:1.1;padding:.45rem .3rem!important;font-size:clamp(.8rem,3.9vw,.95rem)!important;min-width:0;height:100%}
  .tabs .tl .w{display:block}
}
/* ---- Sun & Moon Map ---- */
.sm-box{margin-top:1.4rem;padding-top:1.2rem;border-top:1px solid color-mix(in srgb,var(--cardAccent) 35%,transparent);text-align:center}
.sm-title{margin:0;font:700 1.2rem 'Inter',sans-serif;color:#f5c542;text-shadow:0 0 1px #2a1a05,0 0 8px rgba(245,197,66,.35)}
.sm-sub{margin:.3rem auto .8rem;max-width:40rem;font:500 .88rem/1.45 'Inter',sans-serif;color:var(--cardMuted)}
.sm-stage{position:relative;width:100%;max-width:560px;margin:0 auto;aspect-ratio:1}
.sm-night,.sm-map{position:absolute;inset:0;width:100%;height:100%}
.sm-night{z-index:2;pointer-events:none;border-radius:50%}
.sm-map{z-index:1;cursor:crosshair;--night:#0b0a14;touch-action:manipulation}
.sm-sea{fill:color-mix(in srgb,var(--surface2) 70%,#3a5a7a 30%)}
.sm-land{fill:color-mix(in srgb,var(--cardAccent) 24%,var(--surface));stroke:color-mix(in srgb,var(--cardAccent) 80%,transparent);stroke-width:.5;stroke-linejoin:round}
.sm-eq{fill:none;stroke:#f5c542;stroke-width:.8;opacity:.75}
.sm-trop{fill:none;stroke:#f5c542;stroke-width:.6;stroke-dasharray:3 3;opacity:.6}.sm-trop.faint{opacity:.35}
.sm-wedge{stroke:color-mix(in srgb,var(--cardAccent) 55%,transparent);stroke-width:.45}
.sm-rim{fill:none;stroke:url(#clkGold);stroke-width:3}.sm-rim2{fill:none;stroke:color-mix(in srgb,var(--cardAccent) 50%,transparent);stroke-width:.8}
.sm-lab{text-anchor:middle;font-family:'Inter',sans-serif}
.sm-off{font-size:7.5px;font-weight:700;fill:var(--cardAccent)}.sm-hr{font-size:6.5px;font-weight:500;fill:var(--cardInk)}
.sm-zone{fill:rgba(245,197,66,.16);stroke:#f5c542;stroke-width:.8;transition:d .4s var(--ease,ease)}
.sm-sun,.sm-moon,.sm-pin{transition:transform 1.2s var(--ease,ease)}
.sm-sun,.sm-moon{z-index:4}
.sm-sun-core{fill:#fff3c0;stroke:#d9a640;stroke-width:1}.sm-ray{stroke:#f5c542;stroke-width:1.4;stroke-linecap:round}
.sm-moon-dark{fill:#2b2a33;stroke:#cfc7ad;stroke-width:.6}.sm-moon-lit{fill:#f3eedc}
.sm-pin-dot{fill:#f5c542;stroke:#3a2a08;stroke-width:1}.sm-pin-ring{fill:none;stroke:#f5c542;stroke-width:1}
.sm-ctl{display:flex;justify-content:center;flex-wrap:wrap;gap:.4rem;margin:.9rem 0 .4rem}
.sm-btn{font:600 .85rem 'Inter',sans-serif;padding:.35rem .8rem;border-radius:999px;min-width:3.2rem}
.sm-btn.on{box-shadow:0 0 0 2px #f5c542!important}
.sm-range{width:min(100%,420px);accent-color:#e2c36f}
.sm-when{margin:.4rem 0 0;font:700 1rem 'Inter',sans-serif;color:var(--cardAccent)}
.sm-info{margin:.3rem auto 0;max-width:40rem;font:500 .85rem/1.45 'Inter',sans-serif;color:var(--cardInk)}
@media (prefers-reduced-motion: reduce){.sm-sun,.sm-moon,.sm-pin,.sm-zone{transition:none}}
.nb{white-space:nowrap;display:inline-block}
.bmain{margin:1rem 0 .4rem;padding:0;border:0;text-align:center}
.bmain .bbig{text-wrap:balance}