/* An Vận · Five illustrated spaces. Artwork is decorative; results remain on clean paper. */
body{background:#f6f1e7;transition:background-color .35s ease}
body[data-screen=tarot]{background-color:#f4ece4}body[data-screen=stars]{background-color:#eef0ed}body[data-screen=numbers]{background-color:#f5eee3}body[data-screen=relax]{background-color:#f0f2e8}
.app-screen{position:relative;isolation:isolate}
#view-today{--scene-image:url('/art/today-v49.webp');--scene-ink:#214a3c;--scene-accent:#d5b57b}
#view-tarot{--scene-image:url('/art/tarot-v49.webp');--scene-ink:#592e2d;--scene-accent:#c4a175}
#view-stars{--scene-image:url('/art/stars-v49.webp');--scene-ink:#24394c;--scene-accent:#b5a877}
#view-numbers{--scene-image:url('/art/numbers-v49.webp');--scene-ink:#65402a;--scene-accent:#be905d}
#view-relax{--scene-image:url('/art/relax-v49.webp');--scene-ink:#385b42;--scene-accent:#a0b082}
.app-screen::before{content:"";position:absolute;z-index:-1;pointer-events:none;inset:110px -35px auto;height:900px;background-image:linear-gradient(0deg,var(--paper),transparent 55%,var(--paper)),var(--scene-image);background-size:cover;background-position:right top;opacity:.085;mask-image:linear-gradient(#000,transparent);-webkit-mask-image:linear-gradient(#000,transparent)}
/* Replace nested frames with an open page and one illustrated title. */
.app-shell :is(.tarot-section,.stars-section,.num-section,.relax-section){width:100%;max-width:1040px;margin:18px auto 28px;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}
.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading){position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:12px;min-height:235px;width:100%;max-width:none;margin:0 0 24px;padding:30px 34px;overflow:hidden;border:1px solid #af916458;border-radius:22px;background:var(--scene-ink);box-shadow:0 14px 30px #44382012}
.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading)::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--scene-image);background-size:cover;background-position:center 51%;pointer-events:none}
.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading)::after{content:"";position:absolute;inset:0;z-index:-1;transform:none;background:linear-gradient(90deg,var(--scene-ink) 0%,color-mix(in srgb,var(--scene-ink) 92%,transparent) 20%,transparent 76%),linear-gradient(0deg,#172d2b35,transparent 55%);pointer-events:none}
.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading)>div{max-width:60%;position:relative;z-index:2}
.app-shell :is(.tarot-header-mark,.num-heading-icon,.stars-heading-icon,.relax-heading-icon){flex:none;display:grid;place-items:center;width:35px;height:35px;border:0;border-radius:0;background:none;color:#f0d6a0;opacity:.95}
.app-shell :is(.tarot-header-mark,.num-heading-icon,.stars-heading-icon,.relax-heading-icon) svg{width:31px;height:31px;flex:none}
.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading) h2{font-family:AnVanSerif,'Be Vietnam Pro',serif;font-size:46px;line-height:1.15;letter-spacing:-1px;font-weight:500;margin:7px 0 0;color:#fff8e8;text-shadow:0 2px 12px #0002}
.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading) .eyebrow{font-size:9px;letter-spacing:2.2px;line-height:1.5;color:#ead3a7}
/* Crisp symbolic overlays, kept independent from the painted artwork. */
.scene-sigil{position:absolute!important;pointer-events:none;color:#efce90;z-index:1!important;width:220px;height:220px;right:30px;top:8px;opacity:.48}
.scene-sigil svg{width:100%!important;height:100%!important}
.scene-zodiac{right:35px;top:10px;opacity:.65}
.scene-zodiac .zodiac-sector circle{fill:transparent;stroke:none}
.scene-zodiac text{fill:currentColor;font-family:AnVanSerif,serif;font-size:23px}
.scene-zodiac .zodiac-center{font-size:63px;display:none}
.scene-numbers{opacity:.22;right:23px;width:210px;height:210px}
#view-stars:has(#stars-sign-aries[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-aries circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-aries[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-aries text{fill:#293f50}
#view-stars:has(#stars-sign-aries[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-aries{display:block}
#view-stars:has(#stars-sign-taurus[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-taurus circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-taurus[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-taurus text{fill:#293f50}
#view-stars:has(#stars-sign-taurus[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-taurus{display:block}
#view-stars:has(#stars-sign-gemini[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-gemini circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-gemini[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-gemini text{fill:#293f50}
#view-stars:has(#stars-sign-gemini[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-gemini{display:block}
#view-stars:has(#stars-sign-cancer[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-cancer circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-cancer[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-cancer text{fill:#293f50}
#view-stars:has(#stars-sign-cancer[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-cancer{display:block}
#view-stars:has(#stars-sign-leo[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-leo circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-leo[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-leo text{fill:#293f50}
#view-stars:has(#stars-sign-leo[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-leo{display:block}
#view-stars:has(#stars-sign-virgo[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-virgo circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-virgo[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-virgo text{fill:#293f50}
#view-stars:has(#stars-sign-virgo[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-virgo{display:block}
#view-stars:has(#stars-sign-libra[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-libra circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-libra[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-libra text{fill:#293f50}
#view-stars:has(#stars-sign-libra[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-libra{display:block}
#view-stars:has(#stars-sign-scorpio[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-scorpio circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-scorpio[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-scorpio text{fill:#293f50}
#view-stars:has(#stars-sign-scorpio[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-scorpio{display:block}
#view-stars:has(#stars-sign-sagittarius[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-sagittarius circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-sagittarius[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-sagittarius text{fill:#293f50}
#view-stars:has(#stars-sign-sagittarius[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-sagittarius{display:block}
#view-stars:has(#stars-sign-capricorn[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-capricorn circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-capricorn[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-capricorn text{fill:#293f50}
#view-stars:has(#stars-sign-capricorn[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-capricorn{display:block}
#view-stars:has(#stars-sign-aquarius[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-aquarius circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-aquarius[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-aquarius text{fill:#293f50}
#view-stars:has(#stars-sign-aquarius[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-aquarius{display:block}
#view-stars:has(#stars-sign-pisces[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-pisces circle{fill:#e8c27a;stroke:#fff2cb;stroke-width:1}
#view-stars:has(#stars-sign-pisces[aria-pressed="true"]) .scene-zodiac .zodiac-sector.zodiac-pisces text{fill:#293f50}
#view-stars:has(#stars-sign-pisces[aria-pressed="true"]) .scene-zodiac .zodiac-center.zodiac-pisces{display:block}
/* Tử vi: ink landscape and an earlier-heaven wheel, a compact casting altar below. */
.home-portal{padding:26px 30px 77px;background:#254c3e;border-color:#b39a6a88;border-radius:22px;box-shadow:0 12px 28px #29453d20}
.home-portal::before{background-image:linear-gradient(90deg,#173f35d9,transparent 88%),url('/art/today-v49.webp');background-size:cover;background-position:center 45%;opacity:1}
.home-portal::after{background:linear-gradient(0deg,#1c4035b8,transparent);height:100px}
.home-portal-copy{max-width:76%;position:relative;z-index:2}
.home-portal-title{gap:14px}.home-portal-mark{border:0;background:none;width:38px;flex-basis:38px;height:40px;color:#eed09a}
.home-portal .home-portal-title h1{font-size:42px;line-height:1.15}.home-portal .home-portal-title h1 em{color:#f0ce8d}
.home-bagua{position:absolute;right:36px;top:10px;width:228px;height:228px;opacity:.65;z-index:1;pointer-events:none}
.home-portal-stamp{display:none}.home-portal-facts span{background:#f5edda16;backdrop-filter:blur(5px);border-color:#e0cc9b55}
.home-portal .home-weather{background:#153d3296;border:1px solid #e8d7b545;backdrop-filter:blur(8px);left:20px;right:20px}
.home-omen{background:#fcf7eb;border-radius:20px;border-color:#d6c09a;box-shadow:0 8px 24px #6347220a}
.home-omen::before{background-image:linear-gradient(90deg,#fffaf03d,#fffaf078),url('/art/today-v49.webp');opacity:.15;background-position:center 70%}
.home-casting-art{position:relative;isolation:isolate;border-radius:50%;background:radial-gradient(circle,#f8e7b9b3,transparent 69%);transition:transform .25s ease}
.home-casting-art::before{content:"";position:absolute;inset:-13px;z-index:-1;background:url('/art/bagua-v49.svg') center/contain no-repeat;opacity:.6}
.home-casting-art:hover{transform:translateY(-3px) rotate(-3deg)}
#home-omen #start{border-radius:30px;background:linear-gradient(110deg,#b84b35,#943d30);border:1px solid #923d2e;box-shadow:0 6px 15px #98412c1b}
/* Let each tool inherit its palette in the interactive surfaces. */
.tarot-mode button[aria-pressed=true],.tarot-draw{background:#793e35;border-color:#793e35;color:#fff4dd;border-radius:13px}
.tarot-table{background:radial-gradient(ellipse at top,#976348,#62372f 65%,#452b2a);border-color:#c09b66}
.tarot-journal-actions button:first-child{background:#793e35;border-color:#793e35}
.stars-result{background:#fffcf4;border-color:#c7ccb9;box-shadow:0 6px 22px #253d4a0a}
.stars-result-glyph{background:#edf0e9;color:#344f60;border-color:#aab9bb}
.stars-sign[aria-pressed=true]{background:#e2e9e5;border-color:#54737a;box-shadow:inset 0 0 0 1px #54737a}
.stars-sign span{color:#42616d}.stars-facts span{background:#e9eee6}
.num-number-button{position:relative;isolation:isolate;min-width:114px;min-height:114px;border-radius:50%;background:radial-gradient(circle,#fff9e8,#ecd5b1);border:1px solid #bd8b53;box-shadow:inset 0 0 0 6px #fff6e0,0 0 0 1px #d7bd92;color:#9a5831}
.num-number-button::before{content:"";position:absolute;inset:-8px;border:1px dashed #bd945b80;border-radius:50%;pointer-events:none}
.num-main-card{border-color:#d5b994;background:#fffbf2;gap:25px}
.num-layered-grid>span{background:#faf1e1}
.relax-player{background:linear-gradient(120deg,#fbf9ef,#e9eee0);border-color:#b6c3a6;box-shadow:0 5px 20px #3b5a4210}
.relax-main-controls #relax-toggle{background:#42624b;border-color:#42624b}
.calm-panel-breathe,.pond{background-color:#edf0df}
:is(.tarot-mode button,.num-tabs button,.calm-tabs button,.stars-sign){transition:background-color .2s ease,border-color .2s ease}
/* The painted mist moves slightly in the calm space; all reading surfaces stay still. */
@keyframes anvan-mist{from{transform:scale(1.02) translateX(-.5%)}to{transform:scale(1.045) translateX(.5%)}}
.relax-heading::before{animation:anvan-mist 16s ease-in-out infinite alternate}
body:has(#calm-motion[aria-pressed=true]) .relax-heading::before{animation:none}
@media(max-width:700px){
 .app-shell :is(.tarot-section,.stars-section,.num-section,.relax-section){margin:10px 0 22px}
 .app-screen::before{inset:80px -14px auto;height:650px;opacity:.06}
 .app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading){min-height:188px;margin:0 0 16px;padding:22px 20px;gap:9px;border-radius:18px}
 .app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading)::before{background-position:62% 50%}
 .app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading)::after{background:linear-gradient(90deg,var(--scene-ink),color-mix(in srgb,var(--scene-ink) 82%,transparent) 25%,transparent 100%)}
 .app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading)>div{max-width:68%}
 .app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading) h2{font-size:34px;letter-spacing:-.6px;line-height:1.15;margin-top:5px}
 .app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading) .eyebrow{font-size:8px;letter-spacing:1.3px}
 .app-shell :is(.tarot-header-mark,.num-heading-icon,.stars-heading-icon,.relax-heading-icon){width:28px;height:28px}
 .app-shell :is(.tarot-header-mark,.num-heading-icon,.stars-heading-icon,.relax-heading-icon) svg{width:27px;height:27px}
 .scene-sigil{width:160px;height:160px;right:5px;top:10px}.scene-zodiac{opacity:.52;right:7px;top:12px}.scene-numbers{width:148px;height:148px;opacity:.22;right:0;top:20px}
 .home-portal{padding:18px 16px 76px;border-radius:18px}.home-portal::before{background-position:55% 50%}
 .home-portal-copy{max-width:100%}.home-portal-title{gap:9px}.home-portal .home-portal-title h1{font-size:29px}.home-portal-mark{width:28px;height:32px;flex-basis:28px}.home-portal-mark svg{width:26px;height:26px}
 .home-bagua{width:140px;height:140px;right:-12px;top:0;opacity:.28}
 .home-portal .home-weather{left:10px;right:10px;bottom:9px}.home-portal-facts{position:relative;z-index:2}.home-portal-facts span{backdrop-filter:blur(6px)}
 .home-omen{border-radius:17px}.home-casting-art::before{inset:-6px;opacity:.53}
 .num-number-button{min-width:87px;min-height:87px;margin:6px 18px 5px 4px;float:left;font-size:48px}
 .num-main-card{padding:19px 15px}.num-number-button::before{inset:-6px}
}
@media(max-width:355px){.app-shell :is(.tarot-header,.stars-top,.num-heading,.relax-heading) h2{font-size:30px}.scene-sigil{right:-18px;opacity:.35}.home-portal .home-portal-title h1{font-size:25px}.home-portal-title{gap:6px}.home-bagua{right:-25px;opacity:.22}}
@media(prefers-reduced-motion:reduce){.relax-heading::before{animation:none}body,.home-casting-art,:is(.tarot-mode button,.num-tabs button,.calm-tabs button,.stars-sign){transition:none}}
/* Slow decorative motion, confined to the illustrated headers. */
@keyframes scene-turn{to{transform:rotate(360deg)}}
@keyframes scene-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes scene-glimmer{0%,100%{opacity:.48}50%{opacity:1}}
@keyframes scene-card-left{0%,100%{transform:translate(-35px,7px) rotate(-17deg)}50%{transform:translate(-44px,2px) rotate(-22deg)}}
@keyframes scene-card-right{0%,100%{transform:translate(35px,7px) rotate(17deg)}50%{transform:translate(44px,2px) rotate(22deg)}}
@keyframes scene-card-center{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes scene-float{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}
@keyframes scene-ripple{0%,100%{transform:scale(.94);opacity:.25}50%{transform:scale(1.04);opacity:.65}}
.home-bagua{animation:scene-turn 100s linear infinite}
.scene-zodiac svg>g:first-child{transform-origin:160px 160px;animation:scene-turn 120s linear infinite}
.scene-zodiac .zodiac-sector{animation:scene-glimmer 7s ease-in-out infinite}
.scene-zodiac .zodiac-sector:nth-of-type(3n){animation-delay:-2.3s}.scene-zodiac .zodiac-sector:nth-of-type(3n + 1){animation-delay:-4.6s}
.scene-numbers svg{animation:scene-sway 18s ease-in-out infinite;transform-origin:center}
.scene-numbers svg>g:last-child{animation:scene-glimmer 9s ease-in-out infinite}
.scene-cards{width:250px;height:220px;right:20px;top:8px;opacity:.7}
.scene-card{transform-origin:160px 190px}
.scene-card-1{animation:scene-card-left 10s ease-in-out infinite}.scene-card-2{animation:scene-card-right 10s ease-in-out infinite}.scene-card-3{animation:scene-card-center 10s ease-in-out infinite}
.scene-lotus{width:245px;height:220px;right:16px;top:12px;opacity:.58}
.scene-flower{animation:scene-float 9s ease-in-out infinite}.scene-ripples{transform-origin:160px 222px;animation:scene-ripple 9s ease-in-out infinite;stroke-width:.9}
/* Only animate a header while it is visible. No layout or touch targets move. */
:is(.home-bagua,.scene-sigil svg,.scene-sigil svg g,.relax-heading::before){animation-play-state:paused}
.scene-motion-active :is(.home-bagua,.scene-sigil svg,.scene-sigil svg g),.relax-heading.scene-motion-active::before{animation-play-state:running}
html.scene-page-hidden :is(.home-bagua,.scene-sigil svg,.scene-sigil svg g,.relax-heading::before),body:has(#calm-motion[aria-pressed=true]) :is(.home-bagua,.scene-sigil svg,.scene-sigil svg g,.relax-heading::before){animation-play-state:paused!important}
@media(max-width:700px){.scene-cards{width:165px;height:175px;right:0;top:9px;opacity:.5}.scene-lotus{width:163px;height:170px;right:0;top:14px;opacity:.45}}
@media(prefers-reduced-motion:reduce){:is(.home-bagua,.scene-sigil svg,.scene-sigil svg g,.relax-heading::before){animation:none!important}.scene-card-1{transform:translate(-35px,7px) rotate(-17deg)}.scene-card-2{transform:translate(35px,7px) rotate(17deg)}}
/* A clearly visible gold seal on mobile, with a quiet breathing halo. */
@keyframes scene-gold-glow{0%,100%{filter:drop-shadow(0 0 3px #f9d58b55);opacity:.76}50%{filter:drop-shadow(0 0 10px #ffdc91cc);opacity:1}}
.home-bagua{animation:scene-turn 32s linear infinite,scene-gold-glow 4.8s ease-in-out infinite;background:radial-gradient(circle,#183e36c9 0%,#183e3670 54%,transparent 71%);border-radius:50%;opacity:.9}
.scene-sigil{filter:drop-shadow(0 0 5px #f5cb8566)}
.scene-zodiac svg>g:first-child{animation-duration:45s}.scene-zodiac .zodiac-sector{animation-duration:4s}
.scene-numbers svg{animation-duration:10s}.scene-numbers{opacity:.55}
.scene-cards{opacity:.9}.scene-card-1,.scene-card-2,.scene-card-3{animation-duration:6s}
.scene-lotus{opacity:.8}.scene-flower,.scene-ripples{animation-duration:6s}
.scene-sigil svg{filter:drop-shadow(0 0 4px #f2cb8588)}
@media(max-width:700px){
 .home-bagua{width:108px;height:108px;right:12px;top:15px;opacity:.95;z-index:1}
 .home-portal-title{max-width:calc(100% - 98px);min-height:92px;align-items:flex-start}
 .home-portal .home-portal-title h1{font-size:27px;line-height:1.18}
 .home-portal-title .eyebrow{font-size:8px;letter-spacing:.7px}
 .home-portal-mark{display:none}
 .scene-zodiac{opacity:.8}.scene-numbers{opacity:.55}.scene-cards{opacity:.85}.scene-lotus{opacity:.7}
}
@media(max-width:355px){.home-bagua{width:92px;height:92px;right:9px;top:18px}.home-portal-title{max-width:calc(100% - 84px)}.home-portal .home-portal-title h1{font-size:25px}}
/* Preserve the visibility pause and the user's motion preferences. */
.home-bagua{animation-play-state:paused}
.scene-motion-active .home-bagua{animation-play-state:running}
@media(prefers-reduced-motion:reduce){.home-bagua{animation:none!important;opacity:.9;filter:drop-shadow(0 0 5px #f9d58b66)}}