/* Shared interface system. The original artwork and spread geometry stay in index.html. */
:root {
    /* Keep controls inside iOS safe areas, including home-screen launches. */
    --safe-top:env(safe-area-inset-top,0px);
    --safe-bottom:env(safe-area-inset-bottom,0px);
    --safe-height:calc(min(var(--visible-height,100dvh),100dvh) - var(--safe-top) - var(--safe-bottom));
    --bg-primary:#101017; --bg-secondary:#191820; --bg-card:#1d1b25; --bg-bot:#211e2b;
    --bg-input:#15141d; --text-primary:#f2eee6; --text-secondary:#bcb6c5; --text-muted:#a49cae;
    --accent-gold:#d4b77c; --accent-gold-bright:#f1d492; --accent-gold-deep:#b8944f; --accent-primary:#c7b8db; --accent-secondary:#aa91c8;
    --aether:#6d4fb0; --aether-soft:rgba(109,79,176,.22); --ember:rgba(241,212,146,.42);
    --border-color:rgba(206,188,159,.17); --border-glow:rgba(212,183,124,.16);
    --hairline:linear-gradient(90deg,transparent,rgba(212,183,124,.42) 14%,rgba(212,183,124,.42) 86%,transparent);
    --gold-surface:linear-gradient(170deg,#efd597 0%,#d9bb78 45%,#c4a25c 100%);
    --ui-font:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
    --reading-font:'Cormorant Garamond',Georgia,serif;
    --shadow:0 14px 40px rgba(0,0,0,.15); --radius-lg:16px;
}
[data-theme="light"] {
    --bg-primary:#f7f4ed; --bg-secondary:#fffdf8; --bg-card:#eeeadf; --bg-bot:#eeeadf;
    --bg-input:#fffdf8; --text-primary:#282432; --text-secondary:#625c69; --text-muted:#716778;
    --accent-gold:#7a5a26; --accent-gold-bright:#8f6b2a; --accent-gold-deep:#5e4418; --accent-primary:#705886; --accent-secondary:#705886;
    --aether:#9a86c4; --aether-soft:rgba(154,134,196,.16);
    --border-color:rgba(90,68,43,.2); --border-glow:rgba(131,98,44,.1);
    --hairline:linear-gradient(90deg,transparent,rgba(122,90,38,.5) 14%,rgba(122,90,38,.5) 86%,transparent);
    --gold-surface:linear-gradient(170deg,#9a783a 0%,#7a5a26 55%,#5e4418 100%);
    --ember:rgba(122,90,38,.28);
    --shadow:0 12px 32px rgba(77,59,32,.06);
}
[hidden] { display:none!important; }
body { font-family:var(--ui-font); font-size:16px; line-height:1.6; background-image:none; position:relative; z-index:0; }
/* While pinch-zoomed (flagged by syncVisibleViewport), drop the oversized animated sky layers and live blurs.
   The shared sky styles live in sky.css; retain the iOS memory-pressure safeguards here. */
.is-pinch-zoomed .sky { display:none; }
.is-pinch-zoomed body::after { animation:none; }
.is-pinch-zoomed .primary-nav { backdrop-filter:none; -webkit-backdrop-filter:none; }
button,input,textarea,select { font:inherit; }
button,a,input,textarea,select,summary { -webkit-tap-highlight-color:rgba(212,183,124,.15); }
button,a { touch-action:manipulation; }
button { cursor:pointer; }
button:disabled { opacity:.5; cursor:wait; }
a { color:inherit; }
:focus-visible { outline:2px solid var(--accent-gold); outline-offset:5px; }
h1:focus,main:focus { outline:none; }
input[type="radio"],input[type="checkbox"] { accent-color:var(--accent-gold); flex-shrink:0; width:20px; height:20px; cursor:pointer; }
.skip-link { position:fixed; top:-100px; left:16px; padding:12px; z-index:1000; background:var(--bg-secondary); }
.skip-link:focus { top:12px; }
.app-header { height:calc(88px + var(--safe-top)); padding:var(--safe-top) 5% 0; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; gap:24px; position:relative; }
.app-header::after { content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--hairline); }
.app-brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-family:'Cinzel',Georgia,serif; font-size:17px; font-weight:600; letter-spacing:.4px; white-space:nowrap; }
.app-brand img { border-radius:50%; width:36px; height:36px; filter:drop-shadow(0 0 10px rgba(241,212,146,.28)); transition:filter .4s; }
.app-brand:hover img { filter:drop-shadow(0 0 16px rgba(241,212,146,.6)); }
.primary-nav { display:flex; align-items:center; gap:36px; margin-left:auto; }
.primary-nav a { display:flex; align-items:center; gap:8px; min-height:48px; color:var(--text-secondary); text-decoration:none; font-size:14px; border-bottom:2px solid transparent; }
.primary-nav a[aria-current="page"] { color:var(--accent-gold-bright); border-image:linear-gradient(90deg,transparent,var(--accent-gold) 30%,var(--accent-gold) 70%,transparent) 1; }
.primary-nav a { transition:color .25s; }
.primary-nav a:hover { color:var(--text-primary); }
.primary-nav svg,.settings-trigger svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.settings-trigger { width:44px; height:44px; display:grid; place-items:center; border:0; background:none; color:var(--text-secondary); border-radius:50%; }
.settings-trigger:hover { background:var(--bg-card); color:var(--text-primary); }
.main-container { max-width:1120px; width:100%; padding:58px max(32px,5%) 64px; display:block; }
.app-page { animation:page-enter .55s cubic-bezier(.2,.7,.2,1); }
@keyframes page-enter { from { opacity:0; transform:translateY(10px); filter:blur(7px); } to { opacity:1; transform:none; filter:blur(0); } }
.home-page { max-width:640px; margin:0 auto; padding-top:26px; }
@keyframes ring-turn { to { transform:rotate(360deg); } }
@keyframes seal-breathe { 0%,100% { filter:drop-shadow(0 0 14px rgba(241,212,146,.18)); } 50% { filter:drop-shadow(0 0 26px rgba(241,212,146,.42)); } }
.eyebrow { color:var(--accent-gold); font-family:var(--reading-font); font-style:italic; font-size:19px; letter-spacing:.2px; line-height:1.4; margin-bottom:10px; font-weight:500; }
.eyebrow::before { content:'\2726\00a0'; font-style:normal; font-size:.62em; color:var(--accent-gold-bright); vertical-align:.18em; }
.page-heading h1,.setup-heading h1 { font-family:var(--reading-font); font-weight:400; font-size:64px; line-height:1.02; letter-spacing:-1.3px; color:var(--text-primary); margin:0 0 20px; }
.home-description { font-size:15px; line-height:1.85; color:var(--text-secondary); }
.choice-heading { margin-bottom:14px; text-align:center; }
.choice-heading::before { content:none; }
.logo-light { display:none; }
[data-theme="light"] .logo-dark { display:none; }
[data-theme="light"] .logo-light { display:inline; }
[data-theme="light"] #goldGrad stop:nth-child(1) { stop-color:#b48a3c; }
[data-theme="light"] #goldGrad stop:nth-child(2) { stop-color:#8f6b2a; }
[data-theme="light"] #goldGrad stop:nth-child(3) { stop-color:#6b4e1c; }
.tradition-choices { display:flex; flex-direction:column; position:relative; }
.tradition-choices::before { content:''; position:absolute; top:0; left:0; right:0; height:1px; background:var(--hairline); }
.tradition-choice { min-height:106px; display:flex; align-items:center; gap:20px; border-bottom:1px solid transparent; border-image:var(--hairline) 1; text-decoration:none; padding:15px 6px; position:relative; transition:padding .3s cubic-bezier(.2,.7,.2,1); }
.tradition-choice::before { content:''; position:absolute; inset:1px 0; background:linear-gradient(90deg,rgba(212,183,124,.14),rgba(109,79,176,.1) 55%,transparent); opacity:0; transition:opacity .35s; pointer-events:none; }
.tradition-choice:hover { padding-left:14px; }
.tradition-choice:hover::before { opacity:1; }
.choice-emblem { width:48px; height:48px; flex-shrink:0; display:grid; place-items:center; position:relative; }
.choice-emblem::before,.learn-choice .page-emblem::before,.journal-entry-emblem::before { content:''; position:absolute; inset:-14px; border-radius:50%; background:radial-gradient(circle,rgba(241,212,146,.42) 0%,rgba(241,212,146,.16) 34%,rgba(109,79,176,.16) 52%,transparent 72%); opacity:0; transform:scale(.55); transition:opacity .4s,transform .5s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.tradition-choice:hover .choice-emblem::before,.learn-choice:hover .page-emblem::before,.journal-entry:hover .journal-entry-emblem::before { opacity:1; transform:scale(1); }
.choice-emblem svg { width:44px; height:44px; position:relative; filter:drop-shadow(0 0 6px rgba(212,183,124,.18)); transition:filter .4s,transform .5s cubic-bezier(.2,.7,.2,1); }
.tradition-choice:hover .choice-emblem svg { filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 5px rgba(241,212,146,.9)) drop-shadow(0 0 18px rgba(241,212,146,.55)); transform:scale(1.16); }
/* The motion signature: every dashed ring in the app turns slowly, like an astrolabe. */
.tradition-emblem-svg [stroke-dasharray] { transform-box:view-box; transform-origin:50% 50%; animation:ring-turn 110s linear infinite; }
.choice-copy { display:flex; flex-direction:column; gap:2px; }
.choice-copy strong { font-family:var(--reading-font); font-size:31px; font-weight:500; line-height:1.15; }
.choice-copy>span { font-size:13px; color:var(--text-secondary); }
.home-learn { display:flex; flex-wrap:wrap; gap:4px 8px; align-items:center; justify-content:center; margin-top:26px; text-decoration:none; font-size:12px; color:var(--text-muted); min-height:44px; }
.home-learn>span { color:var(--accent-gold); }
.home-choices #resume-reading { width:100%; justify-content:center; }
.back-link { display:inline-flex; align-items:center; gap:9px; color:var(--text-secondary); text-decoration:none; font-size:14px; min-height:44px; margin-bottom:20px; }
.back-link:hover,.text-button:hover,.home-learn:hover { color:var(--accent-gold); }
.page-heading { display:flex; align-items:center; gap:20px; margin-bottom:32px; }
.page-heading h1 { font-size:48px; margin-bottom:12px; }
.page-heading p:not(.eyebrow) { font-size:15px; color:var(--text-secondary); }
.page-emblem { width:62px; height:62px; display:grid; place-items:center; flex-shrink:0; }
.page-emblem svg { width:54px; height:54px; filter:drop-shadow(0 0 8px rgba(212,183,124,.22)); }
.consultation-portal { max-width:640px; margin:0 auto; display:block; border:0; padding:0; border-radius:0; box-shadow:none; background:none; }
.setup-heading { margin-bottom:20px; gap:14px; }
.setup-heading h1 { margin:0; font-size:64px; }
.about-reading { border-top:1px solid transparent; border-bottom:1px solid transparent; border-image:var(--hairline) 1; margin-bottom:26px; color:var(--text-secondary); }
summary { cursor:pointer; padding:14px 0; min-height:48px; color:var(--text-secondary); font-size:14px; }
summary::marker { color:var(--accent-gold); font-size:12px; }
.about-reading p { font-size:15px; line-height:1.7; padding-bottom:6px; }
.about-reading .text-button { margin-bottom:12px; }
.step-section { display:block; border:0; padding:0; margin:0 0 26px; min-width:0; }
.step-section legend { font-size:14px; font-weight:500; margin-bottom:12px; padding:0; }
.spread-grid { display:grid; grid-template-columns:1fr; gap:8px; }
.spread-choice { display:flex; align-items:center; gap:14px; background:transparent; border:1px solid var(--border-color); border-radius:9px; padding:12px 16px; cursor:pointer; min-height:64px; transition:background .25s,border-color .25s,box-shadow .35s; }
.spread-choice:hover { border-color:rgba(212,183,124,.4); background:rgba(212,183,124,.03); }
.spread-choice:has(input:checked) { border-color:var(--accent-gold); background:linear-gradient(90deg,rgba(212,183,124,.11),rgba(212,183,124,.04)); box-shadow:inset 0 0 0 1px rgba(212,183,124,.18),0 0 24px -6px var(--ember); }
.spread-choice>span { display:flex; flex-direction:column; gap:2px; }
.spread-choice strong { font-size:15px; font-weight:500; color:var(--text-primary); }
.spread-choice small { font-size:13px; line-height:1.5; color:var(--text-secondary); }
.reading-options { margin:-8px 0 24px; border-bottom:1px solid var(--border-color); }
.option-controls { padding:0 0 18px; }
.rune-set-label { display:block; margin:14px 0 6px; font-size:14px; }
select { width:100%; min-height:48px; padding:10px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-input); color:var(--text-primary); }
.question-section>label { display:block; font-size:14px; font-weight:500; margin-bottom:10px; }
.question-section>label span { color:var(--text-muted); font-weight:400; }
.prompt-textarea { display:block; width:100%; min-height:88px; max-height:none; padding:14px; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-input); font-family:var(--ui-font); font-size:16px; line-height:1.6; color:var(--text-primary); resize:vertical; box-shadow:none; }
.prompt-textarea { transition:border-color .25s,box-shadow .35s; }
.prompt-textarea:focus { border-color:var(--accent-gold); box-shadow:0 0 0 3px rgba(212,183,124,.1),0 0 28px -8px var(--ember); outline:none; }
textarea::placeholder { color:var(--text-muted); opacity:1; }
.field-help { color:var(--text-muted); font-size:13px; line-height:1.6; margin:7px 0 0; }
.question-inspiration { margin-top:6px; }
.topic-chips { display:flex; flex-wrap:wrap; gap:8px; padding:0 0 12px; }
.topic-chip { min-height:44px; padding:8px 14px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-secondary); color:var(--text-secondary); font-family:var(--ui-font); font-size:13px; transition:border-color .25s,color .25s; }
.topic-chip:hover { border-color:var(--accent-gold); color:var(--text-primary); }
.reading-action { padding-top:22px; }
.consult-action-btn,.primary-button,.social-primary-btn { min-height:52px; padding:14px 20px; display:flex; align-items:center; justify-content:center; gap:18px; border:1px solid rgba(255,255,255,.08); border-radius:9px; background:var(--gold-surface); color:#201b12; font-family:var(--ui-font); font-size:15px; font-weight:600; text-decoration:none; letter-spacing:0; box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -10px var(--ember); margin:0; position:relative; overflow:hidden; transition:box-shadow .4s,transform .25s; }
.consult-action-btn::after,.primary-button::after,.social-primary-btn::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:40%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-18deg); opacity:0; transition:opacity .2s; pointer-events:none; }
.consult-action-btn:hover::after,.primary-button:hover::after,.social-primary-btn:hover::after { opacity:1; animation:gold-sheen 1.1s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes gold-sheen { to { left:120%; } }
.consult-action-btn:active,.primary-button:active,.social-primary-btn:active { transform:translateY(1px); }
[data-theme="light"] .consult-action-btn,[data-theme="light"] .primary-button,[data-theme="light"] .social-primary-btn { color:#fffdf8; }
.consult-action-btn { width:100%; }
.consult-action-btn:hover,.primary-button:hover,.social-primary-btn:hover { background:var(--gold-surface); box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 36px -8px var(--ember),0 0 0 1px rgba(241,212,146,.35); filter:brightness(1.05); transform:none; }
.text-button { display:inline-flex; align-items:center; gap:8px; border:0; background:none; color:var(--text-secondary); padding:10px 0; font-size:13px; line-height:1.5; min-height:44px; text-decoration:none; }
.learn-page,.journal-page { max-width:880px; margin:0 auto; }
.learn-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 40px; border-top:1px solid transparent; border-image:var(--hairline) 1; }
.learn-choice { display:block; padding:26px 0; text-decoration:none; border-bottom:1px solid transparent; border-image:var(--hairline) 1; }
.learn-choice .page-emblem { float:right; margin:0 0 10px 12px; width:44px; height:44px; position:relative; }
.learn-choice .page-emblem svg { width:42px; height:42px; position:relative; transition:filter .4s,transform .5s cubic-bezier(.2,.7,.2,1); }
.learn-choice:hover .page-emblem svg { filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 5px rgba(241,212,146,.9)) drop-shadow(0 0 18px rgba(241,212,146,.55)); transform:scale(1.16); }
.learn-choice:hover .learn-choice-link { color:var(--accent-gold-bright); }
.learn-choice h2 { font-family:var(--reading-font); font-size:30px; font-weight:500; margin:0 0 8px; }
.learn-choice p { color:var(--text-secondary); font-size:14px; line-height:1.7; margin-bottom:16px; }
.learn-choice-link { font-size:13px; color:var(--accent-gold); }
.how-link { display:flex; justify-content:space-between; align-items:center; gap:16px; text-decoration:none; padding:24px; background:linear-gradient(120deg,var(--bg-secondary),var(--bg-card)); border:1px solid var(--border-color); border-radius:12px; margin:28px 0 12px; position:relative; overflow:hidden; transition:border-color .3s; }
.how-link::before { content:''; position:absolute; inset:0; background:radial-gradient(60% 120% at 0% 50%,var(--aether-soft),transparent 70%); pointer-events:none; }
.how-link:hover { border-color:rgba(212,183,124,.4); }
.how-link>span:last-child { color:var(--accent-gold); }
.how-link>span:first-child { display:flex; flex-direction:column; gap:5px; }
.how-link strong { font-size:15px; font-weight:500; }
.how-link small { font-size:13px; color:var(--text-secondary); }
.learning-article { max-width:680px; }
.learning-article p,.article-prose { color:var(--text-secondary); font-size:16px; line-height:1.85; }
.learning-article section { margin:0 0 30px; }
.learning-article h2 { font-family:var(--reading-font); color:var(--text-primary); font-size:29px; font-weight:500; margin-bottom:8px; }
.learning-article details { border-top:1px solid var(--border-color); padding:2px 0; }
.learning-article details:last-child { border-bottom:1px solid var(--border-color); }
.learning-article summary { font-size:16px; padding:18px 0; color:var(--text-primary); }
.learning-article details p,.article-prose { margin:0 0 18px; }
.article-prose ul { padding-left:22px; margin-bottom:20px; }
.article-prose li { padding-left:4px; margin-bottom:8px; }
.learning-intro { display:flex; align-items:flex-start; gap:20px; margin-bottom:30px; }
.learning-intro .page-emblem { margin-top:6px; }
.learn-spreads { padding-bottom:14px; }
.learn-spreads a { display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px; text-decoration:none; min-height:64px; }
.learn-spreads a>span:first-child { display:flex; flex-direction:column; gap:3px; }
.learn-spreads strong { font-size:15px; font-weight:500; }
.learn-spreads small { color:var(--text-secondary); font-size:13px; }
.learn-spreads a>span:last-child { color:var(--accent-gold); }
.learn-actions { display:flex; flex-wrap:wrap; gap:16px 24px; margin-top:30px; align-items:center; }
.learning-return { margin-top:20px; }
.learning-controls { margin:8px 0 20px; }
.learning-controls>label { display:block; font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.learning-controls>div { display:flex; align-items:center; gap:16px; }
.learning-controls select { flex:1; min-width:0; width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--border-color); border-radius:8px; background:var(--bg-secondary); color:var(--text-primary); font:inherit; font-size:14px; }
.learning-controls button { flex-shrink:0; }
.learning-chapters details { scroll-margin-top:85px; }
.learning-chapters summary span { display:inline; }
.learning-chapters summary small { display:block; font-size:13px; line-height:1.6; font-weight:400; color:var(--text-secondary); margin-top:5px; padding-right:24px; }
.learning-chapters .article-prose { padding:2px 0 14px; overflow-wrap:anywhere; }
.learning-chapters h3 { font-family:var(--reading-font); font-size:25px; line-height:1.35; font-weight:500; color:var(--text-primary); margin:24px 0 10px; }
.learning-chapters h3:first-child { margin-top:0; }
.article-prose ol { padding-left:24px; margin:0 0 20px; }
.article-prose a { color:var(--accent-gold); text-decoration:underline; text-underline-offset:3px; }
.article-prose strong { color:var(--text-primary); }
.learning-native { font-style:italic; }
.learning-intro>div { min-width:0; }
.learning-intro>div>p { margin-bottom:6px; }
.learning-article .learn-spread-guide { margin:0; padding:20px 0; border-bottom:1px solid var(--border-color); }
.learning-article .learn-spread-guide:first-child { padding-top:0; }
.learning-article .learn-spread-guide:last-child { border-bottom:0; padding-bottom:0; }
.learn-spread-guide a { justify-content:flex-start; min-height:44px; padding:8px 0; font-size:14px; }
.symbol-glossary { margin:0 0 24px; }
.symbol-glossary dt { color:var(--text-primary); font-weight:500; margin-top:18px; }
.symbol-glossary dd { margin:4px 0 0; }
.journal-entry { display:flex; width:100%; text-align:left; align-items:center; gap:18px; background:none; border:0; border-top:1px solid transparent; border-image:var(--hairline) 1; padding:24px 0; color:var(--text-primary); transition:padding .3s cubic-bezier(.2,.7,.2,1); }
.journal-entry:last-child { border-bottom:1px solid transparent; }
.journal-entry:hover { padding-left:8px; }
.journal-entry:hover .journal-entry-emblem svg { filter:brightness(1.3) saturate(1.15) drop-shadow(0 0 5px rgba(241,212,146,.9)) drop-shadow(0 0 18px rgba(241,212,146,.55)); transform:scale(1.16); }
.journal-entry-emblem svg { position:relative; transition:filter .4s,transform .5s cubic-bezier(.2,.7,.2,1); }
.journal-entry>span:last-child { color:var(--accent-gold); }
.journal-entry-emblem { flex-shrink:0; width:44px; position:relative; display:grid; place-items:center; }
.journal-entry-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:6px; }
.history-meta { display:flex; flex-wrap:wrap; gap:5px 16px; align-items:center; color:var(--text-muted); font-size:12px; }
.history-meta strong { color:var(--accent-gold); font-weight:500; }
.journal-question { font-family:var(--reading-font); font-size:25px; line-height:1.3; overflow-wrap:anywhere; }
.history-preview { font-family:var(--ui-font); font-size:13px; line-height:1.6; color:var(--text-secondary); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.empty-journal { padding:60px 20px; text-align:center; border-top:1px solid transparent; border-image:var(--hairline) 1; }
.empty-journal>span { color:var(--accent-gold-bright); font-size:40px; display:inline-block; text-shadow:0 0 24px var(--ember); animation:seal-breathe 5s ease-in-out infinite; }
.empty-journal h2 { font-family:var(--reading-font); font-size:34px; font-weight:400; margin:10px 0; }
.empty-journal p { color:var(--text-secondary); max-width:380px; margin:0 auto 24px; font-size:15px; }
.empty-journal .primary-button { width:fit-content; margin:auto; }
.destructive { color:var(--text-muted); margin-top:20px; }
.settings-dialog { background:var(--bg-secondary); color:var(--text-primary); padding:26px; border:1px solid rgba(212,183,124,.22); box-shadow:0 40px 80px -30px rgba(0,0,0,.8); border-radius:16px; width:min(480px,calc(100vw - 32px)); max-height:calc(var(--safe-height) - 32px); margin:auto; }
.dialog-heading { display:flex; justify-content:space-between; gap:18px; align-items:center; }
.dialog-heading h2 { font-family:var(--reading-font); font-size:29px; font-weight:500; line-height:1.2; }
.setting-row { display:flex; gap:18px; justify-content:space-between; align-items:center; padding:18px 0; border-bottom:1px solid var(--border-color); cursor:pointer; }
.setting-row>span { display:flex; flex-direction:column; gap:4px; }
.setting-row strong { font-size:14px; font-weight:500; }
.setting-row small { font-size:12px; color:var(--text-secondary); }
.setting-row input[role="switch"] { appearance:none; width:42px; height:24px; border-radius:20px; background:var(--bg-card); border:1px solid var(--text-muted); position:relative; }
.setting-row input[role="switch"]:before { content:''; position:absolute; width:16px; height:16px; left:3px; top:3px; background:var(--text-secondary); border-radius:50%; transition:transform .15s; }
.setting-row input[role="switch"]:checked { background:var(--gold-surface); border-color:var(--accent-gold); box-shadow:0 0 14px -2px var(--ember); }
.setting-row input[role="switch"]:checked:before { background:var(--bg-primary); transform:translateX(18px); }
dialog::backdrop { background:radial-gradient(70% 60% at 50% 40%,rgba(50,30,90,.5),rgba(6,5,12,.85)); backdrop-filter:blur(8px); }
body.dialog-open { overflow:hidden; }
.lore-close-btn { flex-shrink:0; width:44px; height:44px; background:transparent; border:1px solid var(--border-color); color:var(--text-primary); font-family:var(--ui-font); border-radius:50%; font-size:24px; }
.active-reading-stage:not([hidden]) { display:flex; gap:22px; max-width:900px; margin:auto; }
.reading-top-bar { background:none; border:0; border-radius:0; padding:0; gap:20px; }
.reading-top-bar .eyebrow { margin-bottom:5px; }
.reading-badge { font-family:var(--reading-font); font-size:42px; line-height:1.15; font-weight:400; color:var(--text-primary); }
.reading-spread-label { font-size:13px; color:var(--text-secondary); margin-top:6px; }
.reading-spread-label:empty { display:none; }
.card-position-number { display:none; }
.new-consult-btn { font-family:var(--ui-font); font-size:13px; border-color:var(--border-color); border-radius:8px; min-height:44px; padding:10px 14px; color:var(--text-secondary); white-space:nowrap; }
.new-consult-btn:hover { background:var(--bg-card); color:var(--text-primary); box-shadow:none; }
.seeker-inquiry-box { background:none; border:0; padding:0; margin:0; font-family:var(--reading-font); color:var(--text-secondary); font-size:23px; line-height:1.5; font-style:italic; overflow-wrap:anywhere; }
.thinking { display:none; align-items:center; gap:16px; padding:22px 0; color:var(--text-secondary); font-family:var(--reading-font); font-style:italic; font-size:19px; }
.reading-pulse { width:26px; height:26px; position:relative; flex-shrink:0; }
.reading-pulse::before,.reading-pulse::after { content:''; position:absolute; inset:0; border-radius:50%; }
.reading-pulse::before { background:var(--accent-gold-bright); box-shadow:0 0 12px 2px var(--ember); animation:pulse-core 2.4s ease-in-out infinite; }
.reading-pulse::after { border:1px solid var(--accent-gold); animation:pulse-ring 2.4s cubic-bezier(.2,.6,.3,1) infinite; }
@keyframes pulse-core { 0%,100% { transform:scale(.28); } 50% { transform:scale(.42); } }
@keyframes pulse-ring { 0% { transform:scale(.3); opacity:.9; } 100% { transform:scale(1.15); opacity:0; } }
.visual-stage-card { padding:26px 20px; min-height:0; border-color:rgba(212,183,124,.3); box-shadow:0 30px 60px -30px rgba(0,0,0,.7),0 0 60px -20px var(--aether-soft); border-radius:14px; overflow:hidden; }
.visual-stage-card:empty { display:none; }
.interpretation-card { background:none; border:0; border-radius:0; padding:12px 0 0; box-shadow:none; }
.oracle-stream-text { font-family:var(--reading-font); font-size:22px; line-height:1.75; color:var(--text-primary); max-width:720px; margin:auto; overflow-wrap:anywhere; }
.oracle-stream-text p { margin-bottom:20px; }
.oracle-stream-text>p:first-of-type::first-letter { font-size:1.75em; line-height:1; font-weight:600; color:var(--accent-gold); text-shadow:0 0 18px var(--ember); }
.oracle-stream-text h1,.oracle-stream-text h2,.oracle-stream-text h3 { font-family:var(--reading-font); text-transform:none; font-size:29px; line-height:1.25; font-weight:600; letter-spacing:0; color:var(--text-primary); margin:28px 0 12px; }
.oracle-stream-text li { margin-bottom:8px; }
.oracle-stream-text table { font-family:var(--ui-font); font-size:14px; }
.reading-footer-tools { display:flex; flex-wrap:wrap; align-items:center; gap:12px 20px; padding-top:22px; margin-top:28px; border-top:1px solid transparent; border-image:var(--hairline) 1; }
#reading-save-status { font-size:12px; color:var(--text-muted); margin-right:auto; }
.tool-btn { min-height:44px; padding:10px 15px; color:var(--text-secondary); border:1px solid var(--border-color); background:none; font-family:var(--ui-font); font-size:13px; border-radius:8px; box-shadow:none; gap:10px; }
.tool-btn.primary-export-btn { background:transparent; color:var(--accent-gold-bright); border-color:var(--accent-gold); box-shadow:0 0 22px -8px var(--ember); transition:box-shadow .35s,background .25s; }
.tool-btn.primary-export-btn:hover:not(:disabled) { background:rgba(212,183,124,.1); box-shadow:0 0 30px -6px var(--ember); }
.reading-error { border:1px solid var(--border-color); border-radius:10px; background:var(--bg-secondary); padding:20px; }
.reading-error p { margin-bottom:12px; }
.reading-error .text-button { margin-left:18px; }
.back-to-top { color:var(--text-muted); font-size:12px; align-self:center; padding:10px; min-height:44px; text-decoration:none; }
.altar-orientation-hint { font-family:var(--ui-font); font-size:13px; text-transform:none; letter-spacing:0; color:#d4b77c; opacity:1; margin-top:12px; }
.tarot-card-wrapper::after { content:none; }
.card-overlay-badge { font-family:var(--ui-font); letter-spacing:0; font-size:11px; }
.rune-name-label { font-size:13px; }
.rune-pos-badge { font-family:var(--ui-font); font-size:11px; letter-spacing:0; }
.rune-meaning-label { font-size:11px; }
.hex-pillar { min-width:0; width:100%; }
.number-stage { padding:30px 10px; }
.number-stage .number-value { color:#d4b77c; }
/* Inspection is a scrollable dialog, including on short landscape screens. */
dialog.card-zoom-dialog { width:min(620px,calc(100vw - 24px)); max-width:none; height:auto; max-height:calc(var(--safe-height) - 24px); padding:0; margin:auto; overflow:auto; background:var(--bg-primary); border:1px solid var(--border-color); border-radius:14px; }
dialog.card-zoom-dialog[open] { display:block; }
.card-zoom-container { width:100%; position:relative; padding:58px 48px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; }
.card-zoom-close { top:10px!important; right:10px!important; width:38px; height:38px; font-size:23px; }
.card-zoom-nav { position:absolute; top:calc(26dvh + 35px); width:38px; height:44px; font-size:28px; color:var(--text-primary); border-color:var(--border-color); background:var(--bg-secondary); }
.card-zoom-nav.prev { left:6px!important; }
.card-zoom-nav.next { right:6px!important; }
.card-zoom-stage { width:min(280px,calc(100vw - 130px)); height:min(420px,52dvh); }
.card-zoom-container>div[style] { max-width:calc(100vw - 120px); max-height:48dvh; }
.card-zoom-meta { gap:8px; }
.zoom-title { font-family:var(--reading-font); font-size:29px; color:var(--text-primary); line-height:1.2; text-shadow:none; }
.zoom-badge { font-family:var(--ui-font); font-size:13px; letter-spacing:0; color:var(--accent-gold); }
.zoom-hint { display:flex; gap:16px; flex-wrap:wrap; justify-content:center; font-family:var(--ui-font); font-size:13px; }
.zoom-flip-btn { min-height:44px; font-family:var(--ui-font); font-size:13px; padding:8px 16px; border:1px solid var(--border-color); border-radius:8px; background:none; color:var(--text-primary); }
.zoom-counter { display:flex; align-items:center; color:var(--text-secondary); }
/* Share: header and actions stay outside one scrolling content region. */
.social-export-dialog { width:min(980px,calc(100vw - 32px)); max-width:none; max-height:calc(var(--safe-height) - 32px); margin:auto; background:var(--bg-primary); box-shadow:var(--shadow); border:1px solid var(--border-color); border-radius:16px; overflow:hidden; }
.social-export-container { height:min(820px,calc(var(--safe-height) - 32px)); max-height:none; border:0; border-radius:0; overflow:hidden; background:var(--bg-primary); }
.social-export-container .lore-header { flex:0 0 auto; padding:16px 20px; border-color:var(--border-color); background:var(--bg-primary); }
.lore-header { display:flex; justify-content:space-between; align-items:center; gap:12px; border-bottom:1px solid var(--border-color); }
.lore-header-brand { display:flex; align-items:center; gap:12px; min-width:0; }
.lore-header-meta { min-width:0; }
.social-export-container .lore-header-emblem { display:none; }
.social-export-container .lore-header-tag { font-family:var(--ui-font); font-size:10px; letter-spacing:1px; color:var(--text-muted); }
.social-export-container .lore-header-title { font-family:var(--reading-font); font-size:28px; text-transform:none; color:var(--text-primary); }
.social-export-body { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; }
.social-export-sidebar { padding:24px; overflow:visible; border:0; background:none; min-height:auto; }
.social-preview-wrapper { padding:24px; min-height:0; background:none; overflow:visible; }
.talisman-preview-frame { box-shadow:var(--shadow); }
.talisman-preview-frame.format-story { height:390px; max-width:100%; flex:none; }
.talisman-preview-frame.format-post { height:300px; width:300px; max-width:100%; flex:none; }
.talisman-preview-frame[role="button"] { cursor:zoom-in; }
.talisman-preview-frame[role="button"]:focus-visible { outline:2px solid var(--accent-gold); outline-offset:4px; }
.share-image-dialog { position:fixed; top:calc(var(--viewport-offset,0px) + var(--safe-top) + 8px); left:0; right:0; bottom:auto; margin:0 auto; padding:12px; width:min(960px,calc(100vw - 16px)); max-width:none; height:calc(var(--safe-height) - 16px); max-height:none; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-primary); color:var(--text-primary); overflow:hidden; }
.share-image-dialog[open] { display:flex; flex-direction:column; gap:12px; }
.share-image-dialog::backdrop { background:rgba(0,0,0,.88); }
.share-image-header { display:flex; justify-content:space-between; align-items:center; flex:none; gap:12px; }
.share-image-header h2 { margin:0; font-family:var(--reading-font); font-size:26px; font-weight:400; }
.share-image-dialog img { display:block; width:100%; height:100%; min-height:0; flex:1 1 0; object-fit:contain; }
.talisman-preview-caption { font-family:var(--ui-font); font-size:11px; letter-spacing:0; text-transform:none; white-space:normal; justify-content:center; flex-wrap:wrap; gap:0 12px; }
.talisman-preview-caption span+span::before { content:none; }
.talisman-preview-caption .text-button { font-size:11px; }
.social-control-label { font-family:var(--ui-font); font-size:13px; letter-spacing:0; text-transform:none; color:var(--text-primary); }
.social-control-hint { font-family:var(--ui-font); font-size:12px; color:var(--text-muted); }
.format-btn { font-family:var(--ui-font); font-size:13px; min-height:50px; border-radius:8px; color:var(--text-secondary); }
.format-btn.active { background:var(--bg-card); color:var(--accent-gold); border-color:var(--accent-gold); box-shadow:none; }
.format-btn small { font-family:var(--ui-font); font-size:11px; color:var(--text-muted); }
.quote-option { font-family:var(--reading-font); font-size:17px; min-height:44px; color:var(--text-secondary); }
.quote-option.active { border-color:var(--accent-gold); background:var(--bg-card); color:var(--text-primary); box-shadow:none; }
.quote-option::before { display:none; }
.social-export-actions-panel { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:14px 20px; border-top:1px solid var(--border-color); background:var(--bg-primary); flex:0 0 auto; margin:0; }
.social-secondary-btn { font-family:var(--ui-font); font-size:14px; letter-spacing:0; text-transform:none; min-height:48px; border:1px solid var(--border-color); border-radius:9px; background:none; color:var(--text-primary); }
.social-share-feedback { grid-column:1/-1; padding:0; min-height:36px; line-height:18px; font-family:var(--ui-font); font-size:12px; line-height:1.5; color:var(--text-secondary); }
.social-share-feedback:empty { visibility:hidden; }
/* The keyboard may shrink only the visual viewport, leaving layout height unchanged. */
.social-export-dialog,.settings-dialog,dialog.card-zoom-dialog { position:fixed; top:calc(var(--viewport-offset,0px) + var(--safe-top) + var(--safe-height) / 2); bottom:auto; left:0; right:0; margin:0 auto; }
.social-export-dialog,.settings-dialog { transform:translateY(-50%); }
/* Independent translation cannot be overwritten by the artwork scale animation. */
dialog.card-zoom-dialog { translate:0 -50%; }
@media(max-width:760px) {
    .app-header { height:calc(72px + var(--safe-top)); padding:calc(var(--safe-top) + 8px) 20px 0; gap:10px; }
    .app-brand { font-size:14px; gap:9px; letter-spacing:.15px; }
    .app-brand img { width:32px; height:32px; }
    .primary-nav { position:fixed; bottom:0; left:0; right:0; z-index:100; background:rgba(16,16,23,.86); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-top:1px solid transparent; border-image:var(--hairline) 1; gap:0; padding:6px 16px calc(6px + env(safe-area-inset-bottom,0px)); justify-content:space-around; }
    [data-theme="light"] .primary-nav { background:rgba(247,244,237,.88); }
    .primary-nav a { min-height:48px; flex:1; max-width:130px; flex-direction:column; justify-content:center; gap:3px; font-size:11px; line-height:1.3; border:0; border-image:none; position:relative; }
    .primary-nav a[aria-current="page"]::before { content:''; height:2px; width:18px; position:absolute; top:-7px; background:var(--accent-gold-bright); box-shadow:0 0 10px 1px var(--ember); border-radius:2px; }
    .primary-nav svg { width:20px; height:20px; }
    .main-container { padding:24px 22px calc(96px + env(safe-area-inset-bottom,0px)); }
    .home-page { max-width:440px; padding-top:8px; }
    .home-description { font-size:12px; line-height:1.8; }
    .choice-heading { margin-bottom:8px; }
    .tradition-choice { min-height:77px; gap:15px; padding:10px 2px; }
    .choice-emblem { width:39px; height:39px; }
    .choice-emblem svg { width:37px; height:37px; }
    .choice-copy strong { font-size:26px; }
    .choice-copy>span { font-size:13px; }
    .home-learn { font-size:11px; margin-top:12px; }
    .page-heading { margin-bottom:24px; }
    .page-heading h1 { font-size:39px; }
    .page-heading p:not(.eyebrow) { font-size:14px; }
    .eyebrow { font-size:16px; }
    .back-link { margin-bottom:14px; font-size:13px; }
    .setup-heading h1 { font-size:44px; }
    .setup-heading { margin-bottom:20px; }
    .setup-heading .page-emblem { width:44px; height:44px; }
    .setup-heading .page-emblem svg { width:42px; height:42px; }
    .spread-choice { padding:11px 12px; gap:12px; }
    .spread-choice strong { font-size:14px; }
    .spread-choice small { font-size:12px; }
    .about-reading { margin-bottom:22px; }
    .reading-action { position:sticky; bottom:calc(60px + var(--safe-bottom)); background:none; padding:16px 0 12px; margin-top:12px; z-index:20; }
    .reading-action .consult-action-btn { box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 10px 28px -10px var(--ember),0 8px 24px rgba(0,0,0,.5); }
    body:has(textarea:focus) .primary-nav { display:none; }
    body:has(textarea:focus) .reading-action { bottom:max(0px,calc(100dvh - var(--visible-height,100dvh) - var(--viewport-offset,0px))); }
    .learn-grid { grid-template-columns:1fr; }
    .learn-choice { padding:22px 0; }
    .learn-choice p { font-size:14px; }
    .learn-actions { flex-direction:column; align-items:stretch; gap:10px; }
    .learn-actions .text-button { justify-content:center; }
    .learning-intro { gap:12px; }
    .learning-intro .page-emblem { width:38px; height:38px; }
    .learning-intro .page-emblem svg { width:36px; height:36px; }
    .how-link { padding:18px; }
    .journal-entry { gap:12px; padding:22px 0; }
    .journal-entry-emblem { width:32px; }
    .journal-entry-emblem svg { width:30px; height:30px; }
    .journal-question { font-size:22px; }
    .empty-journal { padding:35px 0; }
    .reading-badge { font-size:32px; }
    .new-consult-btn { font-size:12px; padding:8px 10px; }
    .reading-top-bar { gap:10px; }
    .seeker-inquiry-box { font-size:22px; }
    .active-reading-stage:not([hidden]) { gap:18px; }
    .visual-stage-card { padding:20px 10px; margin:0 -6px; width:calc(100% + 12px); }
    .oracle-stream-text { font-size:21px; line-height:1.7; }
    .oracle-stream-text h1,.oracle-stream-text h2,.oracle-stream-text h3 { font-size:27px; }
    .reading-footer-tools { gap:10px; }
    #reading-save-status { flex-basis:100%; }
    .altar-orientation-hint { font-size:12px; }
    .hex-pillar { max-width:100%; padding:18px 12px; }
    .rune-pos-badge { font-size:9px; }
    .rune-meaning-label { display:none; }
    .rune-name-label { font-size:12px; }
    .card-overlay-badge { font-size:9px; padding:3px; }
    .celtic-cross-altar .card-position-label { display:none; }
    .celtic-cross-altar .card-position-number { display:inline; font-size:11px; }
    .social-export-dialog { width:calc(100vw - 16px); max-height:calc(var(--safe-height) - 16px); border-radius:12px; }
    .social-export-container { height:calc(var(--safe-height) - 16px); }
    .social-export-container .lore-header { padding:10px 14px; }
    .social-export-container .lore-header-tag { display:none; }
    .social-export-container .lore-header-title { font-size:25px; }
    .social-export-body { display:flex; flex-direction:column; }
    .social-preview-wrapper { order:0; width:100%; padding:16px 16px 4px; flex:none; }
    .social-export-sidebar { order:1; flex:none; width:100%; padding:10px 16px 20px; gap:20px; border:0; }
    .talisman-preview-frame.format-story { height:230px; }
    .talisman-preview-frame.format-post { width:230px; height:230px; }
    .social-export-actions-panel { padding:10px 14px; gap:8px; }
    .social-primary-btn,.social-secondary-btn { font-size:12px; min-height:46px; padding:10px 8px; gap:6px; }
    .social-export-actions-panel svg { width:15px; height:15px; }
}
@media(max-width:380px) {
    .main-container { padding:16px 18px calc(84px + var(--safe-bottom)); }
    .tradition-choice { min-height:70px; }
    .choice-copy strong { font-size:24px; }
    .choice-copy>span { font-size:12px; }
    .home-learn { margin-top:0; min-height:32px; }
    .reading-top-bar { align-items:flex-start; }
    .reading-badge { font-size:29px; }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after { animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; }
}

/* Layered interpretation: concise first, depth on demand. */
#reading-heart-title { font-family:var(--reading-font); font-weight:500; font-size:30px; line-height:1.2; margin:0 0 18px; color:var(--accent-gold); }
.reading-depth { margin-top:24px; border-top:1px solid var(--border-color); }
.reading-depth>summary { cursor:pointer; padding:18px 0; min-height:48px; font-family:var(--ui-font); font-size:15px; color:var(--accent-gold); }
.reading-depth[open]>summary { margin-bottom:12px; }
.legacy-reading { margin-top:0; border:0; }
.legacy-reading>summary { display:none; }
.symbol-reading { color:var(--text-primary); width:100%; font-family:var(--reading-font); font-size:21px; line-height:1.65; text-align:left; overflow-wrap:anywhere; }
.symbol-reading p { margin:0 0 16px; }
.symbol-reading .reading-depth { margin-top:12px; }
.symbol-reading h2,.symbol-reading h3 { font-size:24px; line-height:1.3; margin:20px 0 10px; }
/* Keep the dismiss action available while the interpretation scrolls. */
.card-zoom-close { position:sticky; align-self:flex-end; flex-shrink:0; z-index:5; margin-top:-48px; margin-right:-38px; background:var(--bg-primary); }
@media(max-width:760px) {
    .card-zoom-stage { height:min(360px,42dvh); }
    .symbol-reading { font-size:20px; }
}

.rune-reference { color:var(--text-secondary); width:100%; font-size:14px; }
.rune-reference summary { cursor:pointer; min-height:44px; padding:10px 0; }

/* Visible activity beneath the cast, followed by a calm reading reveal. */
.reading-activity { display:flex; align-items:center; gap:5px; height:24px; flex-shrink:0; }
.reading-activity i { width:6px; height:6px; border-radius:50%; background:var(--accent-gold-bright); animation:reading-activity 1.4s ease-in-out infinite; }
.reading-activity i:nth-child(2) { animation-delay:.16s; }
.reading-activity i:nth-child(3) { animation-delay:.32s; }
@keyframes reading-activity { 0%,70%,100% { opacity:.3; transform:translateY(0); } 35% { opacity:1; transform:translateY(-4px); } }
@media (prefers-reduced-motion:reduce) { .reading-activity i { animation:none; opacity:.7; } }

.full-reading-options { grid-column:1/-1; text-align:center; border-top:1px solid var(--border-color); padding-top:12px; }

#downloadReadingPdfBtn { position:relative; transition:border-color .2s,color .2s; }
#downloadReadingPdfBtn[aria-busy="true"] { opacity:1; color:var(--text-primary); border-color:var(--border-color); }
.pdf-button-indicator { position:absolute; left:10px; width:12px; height:12px; border:1.5px solid var(--border-color); border-top-color:var(--accent-gold); border-radius:50%; opacity:0; }
[aria-busy="true"] .pdf-button-indicator { opacity:1; animation:pdf-preparing 1s linear infinite; }
@keyframes pdf-preparing { to { transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce) { [aria-busy="true"] .pdf-button-indicator { animation:none; } }