/* A quiet gallery window above a readable, continuous paper page. */
:root{--sans:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Shixiang Serif",sans-serif;--page-width:540px;--page-gutter:24px;--art-focus:72%;--art-home-focus:72%;--cover-radius:28px 28px 0 0;--bg:#261d28;--ink-deep:#19151e;--text:#f8eae3;--gold:#e8bcaa;--muted:#cbb9c1;--paper:#fbf5f1;--paper-ink:#3e2f3a;--paper-muted:#78626c;--accent:#925162;--wash:#f0e3e2}
body[data-topic="wealth"]{--bg:#292219;--ink-deep:#1e1a14;--art-focus:72%;--art-home-focus:72%;--cover-radius:18px 18px 0 0;--paper:#faf5e9;--paper-ink:#433925;--accent:#7e5e2b}
body[data-topic="health"]{--bg:#162d28;--ink-deep:#10221e;--art-focus:63%;--art-home-focus:63%;--cover-radius:38px 38px 0 0;--paper:#f1f6f0;--paper-ink:#2c443b;--accent:#476c56}
body[data-topic="career"]{--bg:#1e293c;--ink-deep:#151e2d;--art-focus:76%;--art-home-focus:76%;--cover-radius:16px 16px 0 0;--paper:#f2f4f8;--paper-ink:#30405a;--paper-muted:#5d6d80;--accent:#4d6487}
body[data-topic="present"]{--bg:#112932;--ink-deep:#0b1e26;--art-focus:22%;--art-home-focus:22%;--cover-radius:38px 38px 0 0;--paper:#f0f5f4;--paper-ink:#29434b;--paper-muted:#596e74;--accent:#456b73}
body{background-image:radial-gradient(ellipse at 50% 0,color-mix(in srgb,var(--gold) 7%,transparent),transparent 620px)}
.site-header{padding-bottom:10px;gap:8px}
.wordmark{gap:10px;font-size:1.25rem}
.seal{height:34px;width:30px;border-radius:10px 2px 10px 2px;font-size:1.25rem}
.wordmark small{font-size:.75rem;letter-spacing:.14em;margin-top:6px}
.header-right{gap:12px}
.sound-button{border:1px solid var(--line);border-radius:24px;padding:6px 10px;gap:6px}
.sound-button[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 11%,transparent);color:var(--text)}
.home-view{padding-top:4px}
.eyebrow{font-size:.75rem;letter-spacing:.06em;color:var(--muted)}
.home-heading h1{font-size:clamp(1.75rem,7.1vw,2.25rem);line-height:1.4;letter-spacing:.015em;margin:12px 0 7px}
.home-heading .lead{font-size:1rem;line-height:1.75;margin-bottom:18px;min-height:28px}
.topic-picker{padding:4px;border-radius:28px;gap:2px;background:color-mix(in srgb,var(--ink-deep) 48%,transparent)}
.topic-button{border-radius:23px;font-size:.9375rem;padding:8px 2px;min-height:44px}
.topic-button[aria-pressed="true"]{box-shadow:0 2px 8px #0002;background:var(--gold)}
.topic-question{padding:12px 0 11px;font-size:.9375rem;min-height:48px;color:var(--muted)}
.moment-scene{min-height:0;padding:0;border:1px solid var(--line);border-radius:25px;display:block;box-shadow:0 14px 42px #0002}
.moment-scene .art-window{position:relative;inset:auto;height:clamp(225px,30svh,285px);width:100%;z-index:0}
.moment-scene .art-window img{opacity:1;object-position:50% var(--art-home-focus);transition:transform 1.1s ease,filter .7s ease}
.moment-scene .art-window::after{inset:0;background:linear-gradient(180deg,#10192100 40%,#10192112 65%,#1019218c)}
.moment-scene .art-window figcaption{left:20px;bottom:15px;font-family:var(--serif);font-size:.875rem;letter-spacing:.1em}
.moment-choices{min-height:0;padding:13px 17px 16px;position:relative;z-index:1;width:100%;background:var(--ink-deep)}
.moment-choice{display:grid;grid-template-columns:24px minmax(0,auto);column-gap:17px;row-gap:0;justify-content:center;width:100%;min-height:76px;padding:12px 18px;flex-shrink:1;border-radius:17px;border-color:#f2e7d68c;background:color-mix(in srgb,var(--gold) 7%,var(--ink-deep));box-shadow:inset 0 0 25px #ffffff08;color:#fff2df;transform:none}
.moment-word,.moment-touch{min-width:0;overflow-wrap:anywhere}
.moment-choice::before{inset:5px;border-color:#f8ead52e;border-radius:12px}
.moment-choice::after{inset:-4px;border-color:#f8ead566;border-radius:20px}
.moment-lines{width:23px;gap:3px;margin:0;grid-row:1/3;align-self:center}
.moment-word{font-size:1.125rem;line-height:1.65;letter-spacing:.035em;text-align:left}
.moment-touch{font-size:.875rem;line-height:1.6;margin-top:0;color:#e7ddd2;text-align:left}
.moment-choice:focus-visible{outline-offset:5px}
.moment-choice.is-held{transform:scale(.98);box-shadow:0 0 0 6px #fff1d810,0 0 36px #f4ce8752,inset 0 0 24px #fff1d812}
.moment-choice.is-held::after,.is-working .moment-choice::after{animation:music-breathe 1.6s ease-in-out infinite}
.is-holding .art-window img{transform:scale(1.035);filter:brightness(1.1)}
.is-working .art-window img{filter:brightness(1.08)}
.moment-reveal{position:absolute;inset:16px;min-height:0;padding:18px;width:auto;border-radius:18px;background:#102029b8;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.moment-feedback{font-size:.875rem;min-height:40px;padding-top:11px;color:var(--muted)}
.entry-note{font-size:.8125rem}
.sky-footnote{margin-top:26px;padding-top:21px}
.sky-summary{gap:14px}
.sky-footnote>.section-label{font-size:.875rem}
.sky-percent,.sky-detail,.sky-next{font-size:.8125rem}
.site-footer{padding-top:28px}

/* The opening judgment sits on paper, with no sentence obscuring the painting. */
.result-view{padding:0 14px}
.result-topline{margin:0 9px 8px;font-size:.8125rem}
.result-art{display:block;min-height:0;padding:0;border-radius:var(--cover-radius);background:var(--paper);overflow:hidden;box-shadow:0 14px 44px #0002}
.result-art::after{display:none}
.result-art-image{position:relative;inset:auto;z-index:0;height:clamp(240px,72vw,340px);width:100%;object-position:50% var(--art-focus)}
.cover-top{position:absolute;left:0;right:0;top:0;padding:21px 25px;margin:0;background:linear-gradient(#101c2b73,transparent);align-items:flex-start}
.result-seal{font-size:.8125rem;letter-spacing:.12em;text-shadow:0 1px 6px #0007}
.cover-top .hexagram-lines{padding:9px 7px;width:43px;box-sizing:content-box;border:1px solid #fff4e547;border-radius:8px;background:#13232d47}
.result-cover-copy{padding:24px 27px 25px;color:var(--paper-ink);border-top:3px solid var(--gold)}
.cover-caption{font-size:.875rem;letter-spacing:.08em;color:var(--accent)}
.result-cover-copy h1{font-size:clamp(1.75rem,7vw,2.25rem);line-height:1.55;letter-spacing:.015em;margin:11px 0 19px;max-width:none;color:var(--paper-ink);text-shadow:none}
.cover-meta{font-size:.8125rem;color:var(--paper-muted);border-color:color-mix(in srgb,var(--paper-muted) 23%,transparent);gap:5px 12px;flex-wrap:wrap;padding-top:13px;line-height:1.8}
.result-main{padding:0 27px 8px;border-radius:0 0 18px 18px}
.reading-toolbar{padding:9px 0 13px;gap:6px}
.reading-toolbar .text-button{font-size:.875rem}
.reading-status{font-size:.875rem;line-height:1.7}
.cast-summary{padding:19px 0;gap:10px}
.cast-summary span{font-size:.8125rem}
.cast-summary strong{font-size:1rem;line-height:1.75;margin-top:6px}
.reading-section{padding:29px 0}
.section-heading{gap:10px;margin-bottom:17px;align-items:baseline}
.section-index{font-size:1rem;letter-spacing:0}
.section-heading .section-label{font-size:.875rem;letter-spacing:.04em}
.reading-section h2,.fusion-section h2{font-size:1.5rem;line-height:1.65;letter-spacing:.01em;margin-bottom:17px}
.reading-section p,.action-card p{font-size:1rem;line-height:1.95;letter-spacing:.015em}
.reading-section .reading-intro{font-size:1.0625rem;line-height:2}
.opening-section .fusion-guide{font-size:1.1875rem;line-height:1.9;margin-top:20px;padding-left:17px;border-left:2px solid var(--accent)}
.example-box{border-radius:12px;padding:20px 19px;margin-top:23px}
.example-box p,.notice-box p{font-size:1rem;line-height:1.9}
.reading-illustration{margin:28px -10px 0}
.reading-illustration img{border-radius:12px}
.reading-illustration figcaption{padding:10px 5px 0;font-size:.8125rem;letter-spacing:.06em}
.preview-takeaway{padding:27px 0 30px;margin-top:17px}
.preview-takeaway p{font-size:1.3125rem;line-height:1.9;letter-spacing:.005em}
.fusion-practice{padding:24px 20px;border-radius:14px;margin:26px -7px 0}
.fusion-items li{padding:19px 0}
.fusion-items li>span{font-size:.875rem;margin-bottom:8px}
.usable-quote{border-radius:0 12px 12px 0;font-size:1.125rem;padding:20px 18px}
.chapter-divider{padding:26px 0 3px;font-size:.875rem;line-height:1.8;text-align:center}
.reflection-section{padding:28px 0 35px}
.reflection-section .closing-line{font-size:1.5rem;line-height:1.9;letter-spacing:.015em}
.closing-signature{font-size:.875rem}
.purchase-card{border-radius:18px;padding:25px 22px;margin:30px -8px 26px;border:1px solid color-mix(in srgb,var(--accent) 23%,transparent);background:linear-gradient(145deg,var(--wash),var(--paper))}
.purchase-card h2{font-size:1.5rem;line-height:1.7}
.purchase-card p{font-size:1rem;line-height:1.85}
.purchase-list li{font-size:.9375rem;line-height:1.9}
.keepsake-section{padding:27px 0;gap:23px 19px;grid-template-columns:79px minmax(0,1fr)}
.keepsake-mini{height:121px;border-radius:35px 35px 5px 5px;box-shadow:0 8px 17px color-mix(in srgb,var(--paper-ink) 17%,transparent);transform:rotate(-5deg);border:4px solid var(--paper)}
.keepsake-section h2{font-size:1.375rem;line-height:1.65}
.keepsake-section p{font-size:.9375rem;line-height:1.8}
.keepsake-actions{grid-template-columns:1fr;gap:10px}
.keepsake-actions .secondary-button{min-height:48px}
.reading-end{padding-bottom:20px}
.result-dock{background:color-mix(in srgb,var(--ink-deep) 94%,transparent);border-top:1px solid var(--line);box-shadow:0 -8px 24px #0002;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding-top:11px;padding-bottom:calc(11px + env(safe-area-inset-bottom,0px))}
.result-dock .primary-button{min-height:51px;border-radius:13px;font-size:1rem}
.dock-save{font-size:.875rem;min-height:48px}
.primary-button,.secondary-button{border-radius:13px;font-size:1rem}
.about-dialog,.purchase-dialog,.save-dialog{border:1px solid var(--line);border-radius:24px 24px 0 0;background:var(--paper);box-shadow:0 24px 90px #0007}
dialog::backdrop{background:#071119c9;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
dialog .dialog-head{padding:23px 23px 17px;gap:12px}
.dialog-head h2{font-size:1.5rem}
.close-button{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);flex-shrink:0;line-height:1}
.about-body,.purchase-body,.save-body{padding-left:23px;padding-right:23px}
.save-dialog{max-width:500px}
.save-body #saved-image{border-radius:9px;box-shadow:0 10px 28px #0004}
.save-controls{gap:10px}
.purchase-price strong{font-family:var(--serif);letter-spacing:-.03em}
.purchase-price{flex-wrap:wrap;gap:10px 18px}

@media(min-width:700px){.site-header{padding-top:30px}.home-view{padding-top:12px}.moment-scene .art-window{height:285px}.home-heading h1{font-size:2.25rem}.result-view{padding-left:0;padding-right:0}}
@media(max-width:359px){:root{--page-gutter:17px}.site-header{column-gap:5px}.header-right{gap:7px}.sound-button{padding:5px 8px}.wordmark{gap:7px}.home-heading h1{font-size:1.6875rem}.home-heading .lead{font-size:1rem}.moment-choices{padding:12px}.result-view{padding:0 9px}.result-cover-copy,.result-main{padding-left:21px;padding-right:21px}.result-cover-copy h1{font-size:1.75rem}.result-art-image{height:240px}.cover-top{padding:18px 21px}.result-dock .primary-button{font-size:.9375rem}}
@media(max-height:700px) and (max-width:600px){.site-header{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:6px}.home-heading h1{margin-top:8px}.home-heading .lead{margin-bottom:12px}.moment-scene .art-window{height:205px}.moment-choice{min-height:72px}}
@media(prefers-reduced-motion:reduce){.moment-scene .art-window img,.moment-choice{transition:none!important}.is-holding .art-window img,.moment-choice.is-held{transform:none}.result-art,.keepsake-mini{animation:none}}