/* Unified visual and contrast system.
   Loaded after the theme layers. Every surface owns both its background and text palette,
   preventing light-on-light and dark-on-dark combinations across desktop and mobile. */
:root{
  --ui-forest:#061b13;
  --ui-forest-2:#0b281d;
  --ui-forest-3:#123426;
  --ui-paper:#f5eedc;
  --ui-paper-2:#fffaf0;
  --ui-ink:#172019;
  --ui-text:#f5ecd7;
  --ui-muted:#d8cdb5;
  --ui-gold:#e0b552;
  --ui-gold-strong:#f1ca67;
  --ui-line-dark:rgba(224,181,82,.42);
  --ui-line-light:rgba(91,68,27,.25);
  --ui-shadow:0 18px 50px rgba(0,10,7,.24);
  --ui-radius:22px;
}
html{color-scheme:dark}
body{color:var(--ui-text)}
html body .shell > header.site,html body .yesno-app-shell > header.site{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:62px!important;padding:9px 12px!important;gap:8px!important;color:var(--ui-text)!important;background:rgba(6,27,19,.88)!important;border:1px solid rgba(224,181,82,.18)!important;border-radius:18px!important;box-shadow:0 10px 34px rgba(0,10,7,.18)!important;backdrop-filter:blur(18px)!important;-webkit-backdrop-filter:blur(18px)!important}
html body header.site::before{margin:0 auto 0 0!important;flex-shrink:0!important}
html body header.site .language-switch{display:flex!important;flex-flow:row nowrap!important;margin:0!important}
html body header.site .menu-toggle{display:inline-flex!important;flex-shrink:0!important;pointer-events:auto!important;touch-action:manipulation!important}
html body nav.tabs{color:var(--ui-text)!important;background:rgba(6,27,19,.96)!important;border-color:var(--ui-line-dark)!important;box-shadow:0 16px 40px rgba(0,10,7,.22)!important}
html body nav.tabs :is(a,button){color:var(--ui-muted)!important}
html body nav.tabs :is(a,button):is(:hover,.on,[aria-current="page"]){color:var(--ui-gold-strong)!important}
@media(max-width:760px){html body nav#mainTabs.tabs,html body nav.tabs#mainTabs[aria-hidden="true"]{display:none!important;visibility:hidden!important;opacity:0!important;pointer-events:none!important}html body nav#mainTabs.tabs.open,html body nav.tabs#mainTabs[aria-hidden="false"],html body header.site:has(.menu-toggle[aria-expanded="true"]) + nav#mainTabs.tabs{display:flex!important;visibility:visible!important;opacity:1!important;pointer-events:auto!important;position:relative!important;z-index:1099!important;width:100%!important;max-height:calc(100dvh - 78px)!important;overflow-y:auto!important;border-radius:18px!important;padding:10px!important}}
html body :is(.gate-hero,.daily-gate,.moon-card,.daily-visitor-card,.panel,.card,.reading,.ritual-gate,.ritual-ok,.simple-path,.integration-panel,.srt-wizard-card,.srt-protocol-card,.pendulum-stage,.kids-result,.lexcard,.lex-card,.journal-card,.mythology-guide,.mythology-card,.mythology-path,.experience-card,.yesno-note,.yesno-hero,.yesno-card,.soft-detail,.dark-panel,.choice-card,.gate-paths,.mythology-paths,.menu-panel,.mobile-menu,.cave-disclaimer,.priestess,.dk-energy,.result-ai-prompt,.ai-prompt-copy,.question-refiner,.pendulum-clearing-complete,.srt-identity,.srt-add-subject,.srt-clearing,.srt-closing-formula){color:var(--ui-text)!important;background-color:var(--ui-forest-2)!important;background-image:linear-gradient(145deg,rgba(255,255,255,.035),rgba(0,0,0,.08))!important;border-color:var(--ui-line-dark)!important;box-shadow:var(--ui-shadow)!important}
html body :is(.gate-hero,.daily-gate,.moon-card,.daily-visitor-card,.panel,.card,.reading,.ritual-gate,.ritual-ok,.simple-path,.integration-panel,.srt-wizard-card,.srt-protocol-card,.pendulum-stage,.kids-result,.lexcard,.lex-card,.journal-card,.mythology-guide,.mythology-card,.mythology-path,.experience-card,.yesno-note,.yesno-hero,.yesno-card,.soft-detail,.dark-panel,.choice-card,.gate-paths,.mythology-paths,.menu-panel,.mobile-menu,.cave-disclaimer,.priestess,.dk-energy,.result-ai-prompt,.ai-prompt-copy,.question-refiner,.pendulum-clearing-complete,.srt-identity,.srt-add-subject,.srt-clearing,.srt-closing-formula) :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,b,i,label,legend,summary,dt,dd,.small-note,.note,.hint,.muted,.description,.subtitle,.meta,.disclaimer,.daily-gate__sub,.mt,.helper,.caption,.lead,.sub,.text,.copy){color:var(--ui-text)!important;text-shadow:none!important;opacity:1!important}
html body :is(.eyebrow,.kicker,.srt-kicker,.daily-gate__head,.brand-sub__main,.brand-sub__details,.hero-kicker){color:var(--ui-gold-strong)!important;opacity:1!important}
html body :is(.panel,.card,.reading,.soft-detail,.daily-gate,.moon-card,.yesno-card) a{color:var(--ui-gold-strong)!important;text-decoration-color:currentColor!important}
html body :is(.ceridwen-reminder,.mythology-note,.ck-light-card,.gate-light,.light-panel,.paper-panel,.cream-panel,.result-paper,.journal-paper,.yesno-light,.kids-card,.kids-feelings,.reco,.pendulum-key-item,[data-surface="light"]){color:var(--ui-ink)!important;background-color:var(--ui-paper)!important;background-image:linear-gradient(145deg,rgba(255,255,255,.72),rgba(226,210,176,.18))!important;border-color:var(--ui-line-light)!important;box-shadow:0 14px 38px rgba(0,10,7,.14)!important}
html body :is(.ceridwen-reminder,.mythology-note,.ck-light-card,.gate-light,.light-panel,.paper-panel,.cream-panel,.result-paper,.journal-paper,.yesno-light,.kids-card,.kids-feelings,.reco,.pendulum-key-item,[data-surface="light"]) :is(h1,h2,h3,h4,h5,h6,p,li,span,small,strong,em,b,i,label,legend,summary,dt,dd,.small-note,.note,.hint,.muted,.description,.subtitle,.meta,.disclaimer,.helper,.caption,.lead,.sub,.text,.copy,.eyebrow,.kicker){color:var(--ui-ink)!important;text-shadow:none!important;opacity:1!important}
html body :is(.ceridwen-reminder,.mythology-note,.ck-light-card,.light-panel,.paper-panel,.reco) a{color:#6e4b08!important;text-decoration-color:currentColor!important}
html body :is(input,textarea,select){color:var(--ui-ink)!important;background:var(--ui-paper-2)!important;border-color:rgba(113,84,27,.42)!important}
html body :is(input,textarea)::placeholder{color:#59615a!important;opacity:1!important}
html body :is(input,textarea,select):focus{border-color:#9b721e!important;box-shadow:0 0 0 3px rgba(224,181,82,.22)!important}
html body :is(button,.btn){min-height:44px;border-color:var(--ui-line-dark)!important}
html body :is(.btn.primary,.btn.on,button.primary,button.on){color:#102017!important;background:var(--ui-gold-strong)!important;border-color:var(--ui-gold-strong)!important}
html body :is(.btn.primary,.btn.on,button.primary,button.on) *{color:#102017!important}
html body :is(button,.btn,a.lang-link,nav.tabs a,nav.tabs button):focus-visible{outline:3px solid var(--ui-gold-strong)!important;outline-offset:3px!important}
@media(max-width:700px){html body :is(.panel,.card,.reading,.ritual-gate,.ritual-ok,.simple-path,.soft-detail,.mythology-card,.experience-card,.yesno-card,.kids-card,.lexcard,.lex-card,.journal-card,.priestess,.dk-energy,.result-ai-prompt,.ai-prompt-copy){border-radius:18px!important}html body :is(h1,.gate-title){font-size:clamp(2rem,10vw,3rem)!important;line-height:1.05!important}html body h2{font-size:clamp(1.7rem,8vw,2.35rem)!important;line-height:1.1!important}html body h3{font-size:clamp(1.25rem,6vw,1.7rem)!important;line-height:1.18!important}html body :is(p,li,label,input,textarea,select,button,.btn){font-size:max(16px,1rem)!important}}
@media(min-width:701px){html body :is(.panel,.card,.reading,.soft-detail,.mythology-card,.experience-card,.yesno-card){border-radius:var(--ui-radius)!important}}

/* Descriptive, art-archive style menu. */
html body nav.tabs{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important;max-width:1080px!important;margin:18px auto 34px!important;padding:12px!important;position:sticky!important;top:8px!important;border-radius:24px!important;backdrop-filter:blur(18px) saturate(120%)!important;-webkit-backdrop-filter:blur(18px) saturate(120%)!important}
html body nav.tabs :is(button,.tab-page-link){display:grid!important;grid-template-columns:34px minmax(0,1fr)!important;grid-template-rows:auto auto!important;column-gap:11px!important;row-gap:2px!important;align-items:center!important;justify-content:stretch!important;min-width:0!important;min-height:72px!important;padding:12px 13px!important;border:1px solid transparent!important;border-radius:16px!important;background:rgba(255,255,255,.025)!important;text-align:left!important;white-space:normal!important;overflow:hidden!important;transition:transform .22s ease,background .22s ease,border-color .22s ease,box-shadow .22s ease!important}
html body nav.tabs :is(button,.tab-page-link)::before{content:attr(data-menu-index);grid-row:1 / span 2;width:32px;height:32px;display:grid;place-items:center;border:1px solid rgba(224,181,82,.42);border-radius:50%;color:var(--ui-gold-strong);font-size:11px;font-weight:800;letter-spacing:.04em}
html body nav.tabs .menu-title{grid-column:2;font-size:15px;line-height:1.2;font-weight:750;color:var(--ui-text)!important}
html body nav.tabs .menu-description{grid-column:2;font-size:12px;line-height:1.35;font-weight:450;color:var(--ui-muted)!important;opacity:.94!important;overflow-wrap:anywhere}
html body nav.tabs :is(button,.tab-page-link):hover{transform:translateY(-2px)!important;background:rgba(224,181,82,.09)!important;border-color:rgba(224,181,82,.34)!important}
html body nav.tabs :is(button.on,.tab-page-link.on,.tab-page-link[aria-current="page"]){background:linear-gradient(145deg,rgba(224,181,82,.2),rgba(224,181,82,.07))!important;border-color:rgba(241,202,103,.62)!important;box-shadow:inset 0 0 0 1px rgba(241,202,103,.08),0 8px 22px rgba(0,0,0,.16)!important}
html body nav.tabs :is(button.on,.tab-page-link.on,.tab-page-link[aria-current="page"])::before{background:var(--ui-gold)!important;color:#171207!important;border-color:var(--ui-gold)!important}

/* Revealed card face information hierarchy. */
html body .cardbox{isolation:isolate;outline:none!important}
html body .face{border-radius:14px!important;border:1px solid rgba(224,181,82,.42)!important;box-shadow:0 14px 34px rgba(0,0,0,.24)!important}
html body .face.back{background:radial-gradient(circle at 50% 30%,rgba(224,181,82,.18),transparent 48%),linear-gradient(160deg,#123428,#061a13)!important}
html body .face.front{background:linear-gradient(180deg,#123428 0%,#08241b 72%,#051a13 100%)!important;display:grid!important;grid-template-rows:minmax(0,1fr) auto!important}
html body .face.front .art{min-height:0!important;padding:14px 12px 8px!important;overflow:hidden!important}
html body .face.front .art svg{max-height:100%!important;filter:drop-shadow(0 8px 14px rgba(0,0,0,.25))}
html body .face.front .cardname{position:relative!important;padding:10px 12px 14px!important;background:linear-gradient(180deg,rgba(3,27,19,.08),rgba(3,27,19,.96) 32%)!important;border-top:1px solid rgba(224,181,82,.22)!important;min-height:64px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:3px!important}
html body .face.front .cardname .no{font-size:9px!important;line-height:1.2!important;letter-spacing:.22em!important;color:var(--ui-gold-strong)!important}
html body .face.front .cardname .nm{font-size:clamp(.9rem,1.5vw,1.04rem)!important;line-height:1.18!important;color:var(--ui-text)!important;overflow-wrap:anywhere!important}
html body .face.front .cardname .rv{display:inline-flex!important;align-self:center!important;margin-top:2px!important;padding:3px 8px!important;border-radius:999px!important;background:rgba(217,139,163,.14)!important;border:1px solid rgba(217,139,163,.36)!important;color:#ffd9e4!important;font-size:9px!important;line-height:1.2!important;letter-spacing:.12em!important}
html body .slot .pos{color:var(--ui-gold-strong)!important;min-height:2.8em!important}
html body .slot .hint{color:var(--ui-muted)!important;opacity:1!important;text-align:center!important;line-height:1.35!important}
html body .cardbox:focus-visible{outline:3px solid var(--ui-gold-strong)!important;outline-offset:5px!important;border-radius:16px!important}

/* Motion remains active at every viewport, pauses in background tabs, respects OS preference. */
html:not(.page-hidden) body :is(.mist,.hero-spark,.mm-star,.mm-mist,.fs-bird,.fs-btf,.fs-fly,.hs-smoke,.ck-fog,.ck-spore){animation-play-state:running!important}
html.page-hidden body *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){html body *,html body *::before,html body *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}}
@media(max-width:980px){html body nav.tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important;position:relative!important;top:auto!important}}
@media(max-width:760px){html body nav#mainTabs.tabs.open,html body nav.tabs#mainTabs[aria-hidden="false"],html body header.site:has(.menu-toggle[aria-expanded="true"]) + nav#mainTabs.tabs{display:grid!important;grid-template-columns:1fr!important;margin:10px 0 24px!important}html body nav.tabs :is(button,.tab-page-link){min-height:66px!important;padding:10px 12px!important}html body .table{gap:18px!important}html body .slot{width:min(44vw,160px)!important}html body .cardbox{width:100%!important;height:auto!important;aspect-ratio:150/236!important}html body .face.front .cardname{padding:8px 9px 11px!important;min-height:58px!important}}
@media(max-width:430px){html body .table{gap:12px!important}html body .slot{width:min(46vw,154px)!important}html body .face.front .art{padding:10px 8px 5px!important}html body .face.front .cardname .nm{font-size:.88rem!important}}
@media(prefers-contrast:more){html body :is(.panel,.card,.reading,.daily-gate,.moon-card,.soft-detail,nav.tabs,.face){border-width:2px!important}html body :is(.small-note,.note,.hint,.muted,.caption){color:var(--ui-text)!important}}