:root{--bg:#100c17;--surface:#21192c;--gold:#d8bc87;--gold-dim:#9b8159;--text:#f1e7d7;--muted:#aaa0b3;--line:#cfaf742e;--serif:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong","SimSun",serif}*{box-sizing:border-box}html{color-scheme:dark;scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 80% 15%,#38234155,transparent 48%),radial-gradient(ellipse at 10% 80%,#30213538,transparent 50%),var(--bg);color:var(--text);font:14px/1.65 "Microsoft YaHei","PingFang SC",sans-serif;min-height:100vh}body:before{content:"";position:fixed;inset:12px;pointer-events:none;border:1px solid #d4b78012;z-index:5}button,a,textarea{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{touch-action:manipulation}header{max-width:1240px;margin:auto;padding:30px 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:13px;font:40px Georgia;color:var(--gold);text-decoration:none}.brand>span{font:26px var(--serif);letter-spacing:6px}.brand small{display:block;font:9px/1.6 "Microsoft YaHei",sans-serif;letter-spacing:4px;color:var(--gold-dim);margin-top:5px}.text-button{border:0;background:none;color:var(--muted);padding:12px;font-size:12px}.text-button:hover{color:var(--gold)}#history{border-bottom:1px solid var(--line);padding:9px 0}#history span{color:var(--gold);margin-left:14px}main{max-width:1144px;margin:auto;padding:0 48px}#intro{display:grid;grid-template-columns:1fr 1fr;align-items:center;column-gap:65px;position:relative}.intro-copy{grid-column:1;grid-row:1;align-self:start;padding-top:58px}.moon-label{display:flex;justify-content:center;align-items:center;gap:15px;font-size:11px;letter-spacing:3px;color:var(--gold-dim);margin:22px 0}.intro-copy .moon-label{justify-content:flex-start;margin:0 0 26px}.moon-label span{font:23px Georgia;color:var(--gold)}h1{font:400 46px/1.65 var(--serif);letter-spacing:5px;margin:0;text-wrap:balance}h2{font:400 19px/1.6 var(--serif);letter-spacing:2px;margin:0}.lead{color:var(--muted);font-size:12px;letter-spacing:1px;line-height:2;margin:21px 0}.hero-art{grid-column:2;grid-row:1/3;margin:0 -40px 0 -25px;position:relative;align-self:center;isolation:isolate}.hero-art img{display:block;width:100%;height:auto;mask-image:radial-gradient(ellipse 59% 52% at 50% 50%,#000 55%,transparent 100%);filter:saturate(.7);mix-blend-mode:screen}.hero-art:before{content:"";position:absolute;inset:18% 10%;background:#b1833c18;filter:blur(65px);z-index:-1}.hero-art figcaption{text-align:center;font:11px var(--serif);letter-spacing:3px;color:var(--gold-dim);position:absolute;bottom:15px;left:0;right:0}.workspace{grid-column:1;grid-row:2;align-self:start;padding:26px 0 0;background:none;border-top:1px solid var(--line);margin-top:17px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.step-tag{font-size:9px;color:var(--gold-dim);letter-spacing:2px}.meditation{color:var(--muted);font-size:12px;line-height:2.25;margin:16px 0 21px;letter-spacing:.5px}.fixed-spread{display:flex;flex-wrap:wrap;align-items:center;column-gap:15px;padding:15px 0;border-top:1px solid #ffffff07}.fixed-spread h2{font:13px "Microsoft YaHei",sans-serif;letter-spacing:1px}.fixed-spread .quiet{width:100%;text-align:left;margin-top:7px;font-size:10px;color:#8e8299}.spread-icon{display:flex;gap:4px}.spread-icon i{width:12px;height:20px;border:1px solid var(--gold-dim);border-radius:2px;background:url('assets/card-back-celestial.webp') center/cover}.spread-icon i:first-child{transform:rotate(-12deg)}.spread-icon i:last-child{transform:rotate(12deg)}.primary{display:block;width:100%;padding:17px 13px;border:1px solid #e7cb92;border-radius:4px;background:linear-gradient(105deg,#bd9c66,#e2c897 53%,#c6a671);color:#281d2b;font-size:13px;letter-spacing:2px;box-shadow:0 5px 32px #b89a6212,inset 0 0 0 3px #21192c0b;position:relative;transition:filter .2s,box-shadow .2s,transform .2s;margin-top:20px}.primary:hover{filter:brightness(1.08);box-shadow:0 7px 40px #d8bc872a;transform:translateY(-1px)}.primary:active{transform:translateY(1px)}.quiet{text-align:center;color:#998da5;font-size:10px;line-height:1.9;letter-spacing:.5px;margin:13px 0 0}footer{text-align:center;padding:52px 0 30px;margin-top:30px;border-top:1px solid #d4b78016;color:var(--gold-dim);font:11px var(--serif);letter-spacing:1px}footer p{font:9px/1.8 "Microsoft YaHei",sans-serif;color:#81768e;margin:17px 0 12px;letter-spacing:.3px}footer small{color:#71647e;font-size:9px;letter-spacing:4px}.stars{position:fixed;inset:0;pointer-events:none;z-index:-1;background-image:radial-gradient(1px 1px at 10% 22%,#c5b89799 90%,transparent),radial-gradient(1px 1px at 77% 42%,#c5b89788 90%,transparent),radial-gradient(1px 1px at 33% 9%,#c5b89766 90%,transparent),radial-gradient(1px 1px at 91% 73%,#c5b89788 90%,transparent);background-size:340px 380px}#reading{max-width:780px;margin:0 auto;padding-top:8px}#reading h1{text-align:center;font-size:35px;letter-spacing:3px}#reading>.lead{text-align:center;max-width:560px;margin:16px auto;overflow-wrap:anywhere}#back{padding-left:0}#reading .moon-label{margin:22px 0 20px}.deck{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:16px;padding:32px 26px 40px;margin-top:22px;border-radius:50%;background:radial-gradient(ellipse,#5e42662b,transparent 68%)}.deck:before{content:"";position:absolute;inset:5px 0;border:1px solid #d4b78016;border-radius:50%;z-index:-1}.draw-card{aspect-ratio:3/5;min-height:100px;width:100%;border:1px solid #a98a5655;border-radius:7px;background:url('assets/card-back-celestial.webp') center/cover;box-shadow:0 10px 22px #0007;transition:transform .3s,box-shadow .3s,opacity .3s;animation:deal .6s both;animation-delay:calc(var(--card-index)*35ms)}.draw-card:hover{box-shadow:0 0 22px #d4b78033,0 15px 25px #0008;border-color:var(--gold)}.draw-card:disabled{opacity:.18;transform:scale(.96);cursor:default;box-shadow:none}.results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px;margin:35px auto;max-width:660px}.results:empty{display:none}.result-card{text-align:center;min-width:0;animation:deal .45s both}.position{font-size:10px;letter-spacing:1.5px;color:var(--gold-dim);margin-bottom:13px}.face{aspect-ratio:3/5;width:100%;max-width:174px;margin:auto;border:1px solid #c7a56c99;border-radius:7px;box-shadow:0 14px 25px #0005;position:relative;overflow:hidden}.sealed{background:url('assets/card-back-celestial.webp') center/cover}.illustrated{background:url('assets/card-landscape.svg') center/cover;filter:hue-rotate(calc(var(--art-hue)*1deg))}.illustrated>small:first-child{position:absolute;top:8%;left:0;right:0;color:#d4b780;font:8px var(--serif);letter-spacing:3px}.illustrated>b{position:absolute;top:12%;height:31%;left:0;right:0;display:grid;place-items:center;font:60px Georgia;color:#e6c990;text-shadow:0 0 22px #e6c99040}.illustrated>small:last-child{position:absolute;bottom:5%;left:0;right:0;color:#d4b780;font:7px var(--serif);letter-spacing:2px}.reversed{transform:rotate(180deg)}.result-card h3{font:400 20px var(--serif);letter-spacing:2px;margin:21px 0 11px}.result-card p{font-size:11px;line-height:2;color:var(--muted);margin:13px 0;overflow-wrap:anywhere}.result-card.revealed{animation:unveil .8s both}.reading-note{position:relative;padding:32px 28px;background:linear-gradient(130deg,#3d2b422e,#211a2b55);border:1px solid var(--line);border-radius:3px}.reading-note:before,.reading-note:after{content:'✧';position:absolute;color:var(--gold-dim);font-size:14px;background:var(--bg);padding:0 8px;top:-13px;left:calc(50% - 14px)}.reading-note:after{top:auto;bottom:-13px}.reading-note>span{color:var(--gold-dim);font-size:10px;letter-spacing:2px}.reading-note h2{margin-top:14px;font-size:23px}.reading-note p{color:var(--muted);font-size:13px;line-height:2.15;margin-bottom:0}#interpretation{max-width:660px;margin:auto}#question-form{max-width:610px;margin:25px auto;padding:28px;background:linear-gradient(130deg,#37294055,#21192b55);border:1px solid var(--line);border-radius:5px}#question-form .quiet{text-align:left}textarea{display:block;width:100%;height:108px;margin-top:23px;border:1px solid #d4b78033;border-radius:4px;background:#100c1799;padding:15px;color:var(--text);font:13px/1.9 "Microsoft YaHei",sans-serif;resize:vertical;outline:none}textarea:focus{border-color:var(--gold)}textarea::placeholder{color:#84768e}.topics{display:flex;gap:10px;margin-top:15px}.topics button{background:transparent;border:1px solid #d4b78022;border-radius:30px;color:var(--muted);font-size:11px;padding:7px 15px}.topics button.active{border-color:var(--gold-dim);color:var(--gold);background:#d4b7800c}.secondary{display:block;width:100%;border:1px solid var(--line);border-radius:4px;background:transparent;padding:14px;color:var(--gold);font-size:12px;letter-spacing:1px;margin-top:22px}.secondary:hover{background:#d4b7800a}#restart{display:block;margin:16px auto}dialog{width:460px;max-width:calc(100% - 40px);max-height:80vh;overflow:auto;background:radial-gradient(ellipse at top,#3b2c45,#1c1426);color:var(--text);border:1px solid #b69864;border-radius:6px;padding:37px 29px;box-shadow:0 20px 100px #0009}dialog::backdrop{background:#08050ddb;backdrop-filter:blur(9px)}dialog h2{margin:10px 0 20px;font-size:23px}dialog p{color:var(--muted);font-size:12px;line-height:2;overflow-wrap:anywhere}.close{position:absolute;right:10px;top:6px;color:var(--gold);background:none;border:0;font-size:27px;width:36px;height:36px}.history-entry{border-bottom:1px solid var(--line);padding:14px 0}.history-entry small{font-size:9px;color:var(--gold-dim)}#toast{position:fixed;bottom:30px;left:50%;transform:translateX(-50%);background:#dec491;color:#231b2d;border:1px solid #f1dbad;padding:12px 20px;border-radius:5px;opacity:0;pointer-events:none;transition:opacity .2s;font-size:12px;max-width:90vw;z-index:10}#toast.show{opacity:1}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}[hidden]{display:none!important}@keyframes deal{from{opacity:0;translate:0 14px}to{opacity:1;translate:0 0}}@keyframes unveil{from{opacity:0;transform:perspective(800px) rotateY(85deg)}to{opacity:1;transform:perspective(800px) rotateY(0)}}
@media(min-width:1000px){#intro{min-height:690px}.intro-copy{padding-top:50px}.hero-art{transform:scale(1.08)}}@media(max-width:850px){header{padding:25px 30px}main{padding:0 30px}#intro{column-gap:30px}.intro-copy{padding-top:35px}h1{font-size:36px}.intro-copy .moon-label{font-size:9px;letter-spacing:2px}.hero-art{margin:0 -25px}.hero-art figcaption{font-size:9px;letter-spacing:1px}.section-heading h2{font-size:16px}.step-tag{font-size:8px}.primary{font-size:12px;letter-spacing:1px}.meditation{font-size:11px}}
@media(max-width:620px){body:before{inset:7px}header{padding:23px 25px 15px}.brand{font-size:33px;gap:8px}.brand>span{font-size:22px;letter-spacing:5px}.brand small{font-size:8px;letter-spacing:3px}#history{font-size:10px}main{padding:0 25px}#intro{display:flex;flex-direction:column;gap:0}.intro-copy{padding-top:23px;text-align:center;width:100%}.intro-copy .moon-label{justify-content:center;font-size:9px;margin-bottom:17px;letter-spacing:2px;gap:13px}.moon-label span{font-size:19px}h1{font-size:34px;line-height:1.65;letter-spacing:4px}.lead{font-size:10px;letter-spacing:.4px;margin:15px 0 0}.hero-art{width:calc(100% + 38px);max-width:440px;margin:-13px -19px -3px;height:310px;overflow:hidden}.hero-art img{height:100%;width:100%;object-fit:cover;object-position:50% 48%;mask-image:radial-gradient(ellipse 59% 59% at 50% 49%,#000 45%,transparent 100%)}.hero-art figcaption{bottom:4px;font-size:9px;letter-spacing:2px}.workspace{width:100%;margin-top:14px;padding-top:23px}.section-heading h2{font-size:17px;letter-spacing:1px}.step-tag{font-size:8px;letter-spacing:1px}.meditation{font-size:12px;line-height:2.1;margin:16px 0 20px}.fixed-spread{padding:14px 0 5px}.fixed-spread h2{font-size:12px}.fixed-spread .quiet{font-size:9px;margin-top:9px}.primary{margin-top:19px;font-size:12px;padding:17px 8px;letter-spacing:1px}.quiet{font-size:9px}footer{margin-top:34px;padding:26px 0 25px}footer>span{font-size:10px}footer p{font-size:8px;letter-spacing:0}.deck{grid-template-columns:repeat(4,1fr);padding:25px 4px 28px;gap:12px;margin-top:10px}.draw-card{min-height:95px;border-radius:5px}#reading h1{font-size:27px;letter-spacing:2px}#reading>.lead{font-size:11px;margin:15px 0}#reading .moon-label{font-size:9px;letter-spacing:2px}.results{gap:12px;margin:28px 0}.face{border-radius:5px}.result-card .position{font-size:9px;letter-spacing:.5px;margin-bottom:10px}.result-card h3{font-size:17px;letter-spacing:1px;margin:17px 0 9px}.result-card p{font-size:10px;line-height:1.9}.illustrated>b{font-size:37px}.illustrated>small:first-child{font-size:6px;letter-spacing:1px}.illustrated>small:last-child{font-size:5px;letter-spacing:1px}.reading-note{padding:24px 19px}.reading-note h2{font-size:20px;letter-spacing:1px}.reading-note p{font-size:12px}#question-form{padding:24px 17px}#question-form .section-heading{align-items:flex-start}#question-form h2{font-size:16px}textarea{font-size:12px}.topics{gap:8px}.topics button{font-size:10px;padding:7px 12px}}@media(max-width:360px){main{padding:0 20px}h1{font-size:30px}.hero-art{height:275px}.section-heading h2{font-size:15px}.deck{gap:8px}.result-card h3{font-size:15px}.topics button{padding:7px 10px}.step-tag{letter-spacing:0}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:620px){.hero-art{margin:4px -19px 0;height:285px}.hero-art img{object-fit:contain;mask-image:radial-gradient(ellipse 65% 61% at 50% 49%,#000 48%,transparent 100%)}.hero-art figcaption{bottom:1px}}
@media(max-width:620px){.hero-art img{object-fit:cover;object-position:50% 48%;mask-image:radial-gradient(ellipse 60% 60% at 50% 49%,#000 40%,transparent 100%)}}
@media(max-width:620px){.meditation br{display:none}.meditation{line-height:2.1;margin:12px 0 16px}.hero-art{height:275px}}
/* Light follows the ritual: atmosphere, touch, selection, reveal. */
.hero-art:before{inset:19% 13%;background:radial-gradient(ellipse,#d5ab5f30 0%,#b18ad51c 42%,transparent 72%);filter:blur(22px);animation:astral-breathe 6s ease-in-out infinite;pointer-events:none}
.hero-art:after{content:"";position:absolute;inset:8% 9% 15%;pointer-events:none;background:radial-gradient(2px 2px at 24% 28%,#ffe9bc,transparent 75%),radial-gradient(1.5px 1.5px at 72% 19%,#f7ddb0,transparent 75%),radial-gradient(2px 2px at 83% 63%,#ffe9bc,transparent 75%),radial-gradient(1.5px 1.5px at 35% 79%,#f4d596,transparent 75%);animation:star-shimmer 7s ease-in-out infinite;opacity:.5}
.draw-card{position:relative;overflow:hidden}.draw-card:after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px #f4d7a2,inset 0 0 17px #d5b77d44;opacity:0;pointer-events:none;transition:opacity .2s}.draw-card:active:not(:disabled):after,.draw-card:focus-visible:not(:disabled):after{opacity:1}.draw-card:active:not(:disabled){box-shadow:0 0 23px #e1bc7655;transform:translateY(-5px) scale(1.025)}
@media(hover:hover){.draw-card:hover:not(:disabled):after{opacity:.85}}
.result-card .sealed{animation:chosen-glow 1s ease-out both}
.results.complete .sealed{animation:constellation-settle 1.35s ease-out both}
.results.complete .result-card:nth-child(2) .sealed{animation-delay:.12s}.results.complete .result-card:nth-child(3) .sealed{animation-delay:.24s}
.illustrated:after{content:"";position:absolute;inset:-25% -80%;pointer-events:none;background:linear-gradient(110deg,transparent 38%,#ffe8b520 46%,#fff0c86b 50%,#e4c99215 55%,transparent 63%);transform:translateX(-75%);opacity:0;animation:reveal-light 1.25s ease-out .3s both}
.revealed:nth-child(2) .illustrated:after{animation-delay:.45s}.revealed:nth-child(3) .illustrated:after{animation-delay:.6s}
.primary{overflow:hidden}.primary:after{content:"";position:absolute;top:-60%;bottom:-60%;left:0;width:36%;background:linear-gradient(100deg,transparent,#fff7dd55,transparent);transform:translateX(-180%) skewX(-20deg);pointer-events:none;animation:button-glint 9s ease-in-out 3s infinite}
@keyframes astral-breathe{0%,100%{opacity:.4;transform:scale(.93)}50%{opacity:.95;transform:scale(1.06)}}
@keyframes star-shimmer{0%,100%{opacity:.2;transform:translateY(2px)}50%{opacity:.75;transform:translateY(-3px)}}
@keyframes chosen-glow{0%{box-shadow:0 0 0 #ddbc7900}30%{box-shadow:0 0 25px #ddbc7944,inset 0 0 13px #ddbc7922;border-color:#f1d49c}100%{box-shadow:0 8px 24px #0005;border-color:#c7a56c99}}
@keyframes constellation-settle{0%,100%{box-shadow:0 10px 25px #0005}40%{border-color:#f5d9a1;box-shadow:0 0 26px #ddbc7955,0 10px 25px #0005}}
@keyframes reveal-light{0%{opacity:0;transform:translateX(-75%)}20%{opacity:.9}80%{opacity:.65}100%{opacity:0;transform:translateX(75%)}}
@keyframes button-glint{0%,75%{transform:translateX(-180%) skewX(-20deg);opacity:0}80%{opacity:.8}95%,100%{transform:translateX(400%) skewX(-20deg);opacity:0}}
@media(prefers-reduced-motion:reduce){.hero-art:before{animation:none;opacity:.55;transform:none}.hero-art:after{animation:none;opacity:.35}.primary:after,.illustrated:after{display:none}.result-card .sealed,.results.complete .sealed{animation:none}.draw-card:after{transition:none}}
/* Mobile reading scale: readable copy before decorative density. */
@media(max-width:620px){
:root{--muted:#c2b8ca;--gold-dim:#c6ab79}
body{font-size:16px;-webkit-text-size-adjust:100%;text-size-adjust:100%}
.brand small{font-size:12px;letter-spacing:2px;line-height:1.5}
#history,.text-button{font-size:14px;min-height:44px}
#history span{margin-left:6px}
.intro-copy .moon-label,#reading .moon-label{font-size:12px;letter-spacing:1px;gap:10px}
.lead,#reading>.lead{font-size:15px;line-height:1.9;letter-spacing:0}
.hero-art{height:285px;margin-top:12px;padding-bottom:27px}
.hero-art figcaption{font-size:13px;letter-spacing:1px;bottom:0;color:#d6bd8e;line-height:1.7}
.section-heading{flex-wrap:wrap;align-items:baseline;gap:7px 12px}
.section-heading h2,#question-form h2{font-size:19px;letter-spacing:.5px}
.step-tag{font-size:12px;letter-spacing:.5px;color:#c6ab79}
.meditation{font-size:16px;line-height:1.95;margin:17px 0 22px;letter-spacing:0}
.fixed-spread h2{font-size:16px;letter-spacing:0}
.fixed-spread .quiet{font-size:14px;color:#bdb1c8;line-height:1.8;margin-top:12px}
.quiet{font-size:14px;line-height:1.8;color:#bdb1c8;letter-spacing:0}
.primary,.secondary{font-size:16px;line-height:1.6;letter-spacing:.5px;min-height:52px;padding:15px 10px}
footer>span{font-size:13px;line-height:1.8}footer p{font-size:12px;line-height:1.9;color:#ada1ba}footer small{font-size:12px;color:#ada1ba;letter-spacing:2px}
.result-card .position{font-size:12px;line-height:1.7;letter-spacing:0;color:#d2b784}
.result-card p{font-size:14px;line-height:1.85}
.results:has(.revealed){grid-template-columns:1fr;gap:28px}
.result-card.revealed{display:grid;grid-template-columns:100px minmax(0,1fr);column-gap:20px;text-align:left;padding-bottom:25px;border-bottom:1px solid var(--line);align-content:start}
.revealed>.face{grid-column:1;grid-row:1/5;align-self:start;margin:0;max-width:100px}
.revealed>.position:first-child{grid-column:2;grid-row:1;margin:0 0 6px}
.revealed>h3{grid-column:2;grid-row:2;font-size:22px;margin:0 0 8px;line-height:1.5}
.revealed>.position:not(:first-child){grid-column:2;grid-row:3;margin:0}
.revealed>p{grid-column:2;grid-row:4;font-size:15px;margin:12px 0 0;line-height:1.9}
.illustrated>small{display:none}
.reading-note>span{font-size:13px;letter-spacing:1px}.reading-note h2{font-size:23px;line-height:1.6}.reading-note p{font-size:16px;line-height:1.95}
textarea{font-size:16px;line-height:1.8;min-height:140px;padding:14px 12px}textarea::placeholder{color:#b3a7bf}
.topics{flex-wrap:wrap}.topics button{font-size:14px;padding:10px 13px;min-height:44px}
#question-form{padding:24px 18px}
dialog h2{font-size:23px}dialog p{font-size:16px;line-height:1.9}.history-entry small{font-size:12px;color:#d0b88b}#toast{font-size:14px}
}
@media(max-width:360px){main{padding:0 20px}header{padding-left:20px;padding-right:20px}.intro-copy .moon-label{letter-spacing:0}.section-heading h2{font-size:18px}.result-card.revealed{grid-template-columns:86px minmax(0,1fr);column-gap:15px}.primary{letter-spacing:0}.fixed-spread .quiet{font-size:13px}}
/* One viewport per mobile step. Long readings scroll inside the content panel. */
@media(max-width:620px){
html,body{height:100%;overflow:hidden}body{height:100dvh;display:flex;flex-direction:column;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
header{flex:0 0 76px;padding:14px 22px 9px;width:100%;min-height:0}.brand{font-size:29px}.brand>span{font-size:20px}.brand small{font-size:11px;margin-top:2px}
main{flex:1;min-height:0;width:100%;padding:0 22px 14px;display:flex;flex-direction:column}main>footer{display:none}
#intro{flex:1;min-height:0;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(70px,1fr) auto;gap:6px}
.intro-copy{grid-row:1;grid-column:1;padding-top:8px;align-self:initial}.intro-copy .moon-label{margin:0 0 8px;font-size:12px}.intro-copy h1{font-size:30px;line-height:1.42;letter-spacing:3px}.intro-copy .lead{font-size:14px;line-height:1.65;margin:10px 0 0}
.hero-art{grid-column:1;grid-row:2;width:calc(100% + 24px);height:100%;min-height:0;max-width:none;margin:0 -12px;align-self:stretch;padding-bottom:0}.hero-art img{height:100%;width:100%;object-fit:contain;mask-image:radial-gradient(ellipse 70% 64% at 50% 50%,#000 45%,transparent 100%)}.hero-art figcaption{display:none}
#intro>.workspace{grid-row:3;grid-column:1;margin:0;padding-top:13px;align-self:initial}.section-heading h2{font-size:18px}.meditation{font-size:15px;line-height:1.75;margin:10px 0 12px}.fixed-spread{padding:8px 0 0;gap:8px 12px}.fixed-spread h2{font-size:15px}.fixed-spread .quiet{font-size:12px;margin-top:0}.primary{margin-top:12px;padding:12px 8px;min-height:48px;font-size:16px}#intro .workspace>.quiet{font-size:12px;margin-top:7px;line-height:1.5}
#reading{flex:1;min-height:0;width:100%;display:flex;flex-direction:column;padding:0;margin:0}#back{align-self:flex-start;min-height:38px;padding:6px 0}#reading>.moon-label{margin:4px 0 10px;font-size:12px}#reading>h1{font-size:25px;line-height:1.5;letter-spacing:1px}#reading>.lead{font-size:14px;line-height:1.7;margin:8px 0;max-height:3.4em;overflow:auto}#reading>#progress{font-size:12px;margin:0 0 10px;line-height:1.6}
.reading-content{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:0 2px 8px;display:flex;flex-direction:column;gap:12px}
.deck{flex:1;min-height:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:12px;padding:8px 3px 14px;margin:0;border-radius:20px}.draw-card{min-height:0;height:100%;max-height:180px;aspect-ratio:auto;background-size:100% 100%}.deck:before{inset:0}
.results{flex:0 0 auto;gap:12px;margin:8px 0 0;width:100%}.results .face.sealed{max-width:90px;max-height:150px}.results .result-card>p{font-size:12px;margin:8px 0 0}.result-card .position{font-size:12px;margin-bottom:7px;line-height:1.5}
#question-form{flex:1;margin:0;padding:15px 13px;width:100%;display:flex;flex-direction:column;gap:9px}#question-form .section-heading{gap:4px 8px}#question-form h2{font-size:18px}#question-form .quiet{font-size:13px;line-height:1.65;margin:0}#question-form textarea{flex:1;min-height:85px;max-height:180px;margin:0;font-size:16px;line-height:1.7;padding:10px}#question-form .topics{margin:0;gap:6px}#question-form .topics button{padding:6px 10px;min-height:40px}#question-form .primary{margin:0}
#reading:has(#question-form:not([hidden]))>.moon-label{display:none}#reading:has(#question-form:not([hidden])) .results{margin-top:0}#reading:has(#question-form:not([hidden])) .face.sealed{max-width:65px;max-height:108px}#reading:has(#question-form:not([hidden])) .result-card>p{display:none}
#interpretation{width:100%;flex-shrink:0}.results:has(.revealed){gap:20px}.result-card.revealed{padding-bottom:20px}.reading-note{padding:23px 17px}.reading-note h2{font-size:22px}.reading-note p{font-size:16px}.secondary{margin-top:14px}#restart{margin:8px auto}
#reading:has(#interpretation:not([hidden]))>.moon-label{display:none}
}
@media(max-width:620px) and (max-height:720px){header{flex-basis:65px;padding-top:9px}.intro-copy{padding-top:2px}.intro-copy h1{font-size:27px}.intro-copy .moon-label{margin-bottom:5px}.intro-copy .lead{margin-top:5px}.meditation{margin:7px 0;font-size:14px}.section-heading h2{font-size:17px}.fixed-spread{padding-top:6px}#intro .workspace>.quiet{display:none}#reading>.moon-label{margin:0 0 4px}#reading>h1{font-size:23px}#reading>.lead{margin:5px 0}#reading:has(#question-form:not([hidden])) .face.sealed{max-height:75px;max-width:45px}#question-form{gap:7px;padding:12px}#question-form textarea{min-height:70px}#question-form .quiet{font-size:12px}}
/* A single motivated light source, with the interaction as its cue. */
.hero-art:before{inset:14% 21% 12%;filter:blur(24px);background:radial-gradient(ellipse at 50% 44%,#ffe6ae60 0%,#d2a25b2d 30%,#87609113 53%,transparent 72%);animation:backlight-tide 7s ease-in-out infinite;mix-blend-mode:screen}
.hero-art:after{animation:none;opacity:.12}
.celestial-light{position:absolute;inset:5% 8% 9%;pointer-events:none;z-index:2;display:grid;place-items:center;mask-image:linear-gradient(transparent,#000 10% 90%,transparent)}
.orbit-path{position:relative;width:84%;aspect-ratio:1;border:1px solid #dfbf7930;border-radius:50%;box-shadow:0 0 16px #d3b47709,inset 0 0 12px #d3b47709;animation:orbital-travel 24s linear infinite}
.orbit-path:after{content:"";position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg 290deg,#c6a56600 300deg,#e5c38b45 345deg,#fff2cdaa 360deg);mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1px),#000 100%)}
.orbit-path i{position:absolute;left:calc(50% - 2px);top:-2px;width:4px;height:4px;border-radius:50%;background:#fff3d6;box-shadow:0 0 5px 2px #ffe8b9a0,0 0 15px 5px #d7ae6244}
.primary:after{animation:none;display:none}
.draw-card:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--touch-x,50%) var(--touch-y,50%),#fff0c9b3 0%,#e6b96844 16%,transparent 53%);opacity:0;border-radius:inherit;transform:scale(.3)}
.draw-card.touch-lit:before{animation:touch-radiance .8s ease-out both}
.draw-card:disabled.touch-lit{opacity:.48;border-color:#d7b778;box-shadow:0 0 15px #cfae6130}
.result-card .sealed{animation:edge-arrival 1.2s ease-out both;box-shadow:0 0 12px #d7b77820,0 10px 25px #0005}
.results{position:relative;isolation:isolate}
.results.complete:before{content:"";position:absolute;top:50%;left:15%;right:15%;height:1px;background:linear-gradient(90deg,transparent,#e9c78b,#fff0c4,#e9c78b,transparent);box-shadow:0 0 8px 2px #e7c68755;z-index:-1;transform-origin:left;pointer-events:none;animation:three-card-thread 1.8s ease-in-out both}
.results.complete .sealed{animation:edge-arrival 1.3s ease-out both}
.result-card.revealed{animation:ritual-reveal 1.4s cubic-bezier(.22,.65,.3,1) both;animation-delay:var(--reveal-delay,0ms);perspective:800px}
.revealed .illustrated{box-shadow:0 0 17px #d7b77820,0 14px 25px #0005}
.illustrated:after{inset:-20% -95%;background:linear-gradient(108deg,transparent 46%,#f3dba329 49%,#fff1cba6 50%,#e6c48222 51%,transparent 54%);animation:foil-sweep 1.15s ease-out both;animation-delay:calc(var(--reveal-delay,0ms) + .85s)}
.revealed:nth-child(2) .illustrated:after,.revealed:nth-child(3) .illustrated:after{animation-delay:calc(var(--reveal-delay,0ms) + .85s)}
@keyframes backlight-tide{0%,100%{opacity:.5;transform:scale(.94)}50%{opacity:1;transform:scale(1.06)}}
@keyframes orbital-travel{to{transform:rotate(360deg)}}
@keyframes touch-radiance{0%{opacity:.2;transform:scale(.25)}25%{opacity:.85}100%{opacity:0;transform:scale(2.1)}}
@keyframes edge-arrival{0%{border-color:#fff0bf;box-shadow:0 0 27px #e7c68777,inset 0 0 15px #e7c68730}100%{border-color:#d7b778;box-shadow:0 0 10px #d7b77825,0 10px 25px #0005}}
@keyframes three-card-thread{0%{opacity:0;transform:scaleX(0)}25%{opacity:.85;transform:scaleX(1)}60%{opacity:.55;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes ritual-reveal{0%{opacity:.8;filter:brightness(1.2) drop-shadow(0 0 7px #e1ba6977);transform:perspective(800px) rotateY(88deg)}24%{opacity:1;filter:brightness(1.5) drop-shadow(0 0 12px #e1ba6966);transform:perspective(800px) rotateY(88deg)}75%,100%{opacity:1;filter:brightness(1);transform:perspective(800px) rotateY(0)}}
@keyframes foil-sweep{0%{opacity:0;transform:translateX(-65%)}20%{opacity:.9}75%{opacity:.6}100%{opacity:0;transform:translateX(65%)}}
@media(max-width:620px){.celestial-light{inset:4% 6% 6%}.orbit-path{width:auto;height:89%;max-width:90%;aspect-ratio:1}}
@media(prefers-reduced-motion:reduce){.hero-art:before{animation:none;opacity:.65}.orbit-path{animation:none}.orbit-path i{box-shadow:0 0 5px #ffe8b9}.draw-card.touch-lit:before,.results.complete:before,.illustrated:after{display:none}.result-card.revealed,.result-card .sealed,.results.complete .sealed{animation:none;filter:none}}
.illustrated:before{content:"";position:absolute;inset:0;background:url('assets/card-back-celestial.webp') center/100% 100%;z-index:3;pointer-events:none;animation:back-veil 1.4s both;animation-delay:var(--reveal-delay,0ms)}
@keyframes back-veil{0%,30%{opacity:1;filter:brightness(1.45)}39%,100%{opacity:0;filter:brightness(1)}}
@keyframes ritual-reveal{0%{opacity:1;filter:brightness(1.1) drop-shadow(0 0 7px #e1ba6977);transform:perspective(800px) rotateY(0)}22%{filter:brightness(1.4) drop-shadow(0 0 12px #e1ba6966);transform:perspective(800px) rotateY(0)}38%{filter:brightness(1.2);transform:perspective(800px) rotateY(90deg)}80%,100%{opacity:1;filter:brightness(1);transform:perspective(800px) rotateY(0)}}
@media(prefers-reduced-motion:reduce){.illustrated:before{display:none}}
/* Keep touch scrolling in the final reading without visible scrollbar chrome. */
@media(max-width:620px){
#reading:has(#interpretation:not([hidden])) .reading-content{scrollbar-width:none;-ms-overflow-style:none}
#reading:has(#interpretation:not([hidden])) .reading-content::-webkit-scrollbar{display:none;width:0;height:0}
}
.reading-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}.reading-actions #save,.reading-actions #restart{width:100%;margin:0;min-height:48px;padding:12px 7px;font-size:14px;letter-spacing:0;line-height:1.6;border:1px solid var(--line);border-radius:4px;background:transparent;color:var(--gold)}@media(max-width:360px){.reading-actions{gap:8px}.reading-actions #save,.reading-actions #restart{font-size:13px}}
/* Selected cards stay linked while the user writes the question. */
#reading:has(#question-form:not([hidden])) .results.complete:before{top:calc(50% + 12px);height:2px;left:15%;right:15%;background:linear-gradient(90deg,#b9954622 0%,#d9b77066 25%,#fff2c6 45%,#e9c88a 50%,#d9b77066 65%,#b9954622 100%);background-size:240% 100%;box-shadow:0 0 8px #e7c68788,0 0 19px #c9963e33;animation:linked-current 3.6s linear infinite;transform:none;opacity:.9}
#reading:has(#question-form:not([hidden])) .results.complete:after{content:"";position:absolute;left:15%;right:15%;top:calc(50% + 8px);height:10px;z-index:-1;pointer-events:none;background:radial-gradient(circle at 25% 50%,#fff0bc 0 1px,#e7c68766 2px,transparent 6px),radial-gradient(circle at 75% 50%,#fff0bc 0 1px,#e7c68766 2px,transparent 6px);animation:link-breathe 2.8s ease-in-out infinite}
@keyframes linked-current{from{background-position:200% 0}to{background-position:-40% 0}}@keyframes link-breathe{0%,100%{opacity:.35}50%{opacity:1}}
@media(prefers-reduced-motion:reduce){#reading:has(#question-form:not([hidden])) .results.complete:before{display:block;animation:none;opacity:.5}#reading:has(#question-form:not([hidden])) .results.complete:after{animation:none;opacity:.5}}
/* A celestial table, with a hand-dealt fan instead of a card grid. */
#reading.choosing .reading-content{position:relative;background:radial-gradient(ellipse at 50% 45%,#a47b3c20,transparent 58%);overflow:hidden}
#reading.choosing .reading-content:before{content:"";position:absolute;width:80%;aspect-ratio:1;top:6%;left:10%;border:1px solid #d9b57525;border-radius:50%;box-shadow:0 0 0 14px #d9b57505,0 0 0 15px #d9b57514,inset 0 0 55px #c59b4610;pointer-events:none;background:repeating-conic-gradient(from 0deg,#d9b57533 0deg .3deg,transparent .3deg 30deg);mask:radial-gradient(circle,transparent 58%,#000 59%,#000 72%,transparent 73%)}
#reading.choosing .deck{position:relative;display:block;flex:1;width:100%;min-height:240px;padding:0;margin:0;background:none;border-radius:0;overflow:visible}
#reading.choosing .deck:before{content:'✦';display:grid;place-items:center;inset:0 0 30%;border:0;font:35px Georgia;color:#e0c38c55;text-shadow:0 0 20px #d6a65744}
#reading.choosing .draw-card{position:absolute;width:clamp(57px,19vw,88px);height:auto;aspect-ratio:3/5;min-height:0;max-height:none;left:50%;top:58%;transform:translate(-50%,-50%) translate(calc(var(--fan-n)*clamp(19px,5.7vw,32px)),calc(var(--fan-n)*var(--fan-n)*1.9px)) rotate(calc(var(--fan-n)*6deg));transform-origin:50% 125%;animation:fan-open .65s both;animation-delay:calc(var(--card-index)*30ms);background-size:100% 100%;border-color:#bd9b6477;transition:filter .25s,opacity .4s,margin-top .25s;box-shadow:0 8px 15px #0008}
#reading.choosing .draw-card:not(:disabled):hover,#reading.choosing .draw-card:not(:disabled):focus-visible{filter:brightness(1.25)}
#reading.choosing .draw-card:disabled{opacity:.65;margin-top:-28px;border-color:#f4d7a2;filter:brightness(1.25)}
#reading.choosing .results{display:none}
.deck.gathering .draw-card{opacity:0!important;transition:opacity .35s;pointer-events:none}
.flying-card{position:fixed;z-index:20;background:url('assets/card-back-celestial.webp') center/100% 100%;border:1px solid #e7c687;border-radius:5px;box-shadow:0 0 22px #d9b57544,0 12px 24px #0009;pointer-events:none}
.results.concealed .face{visibility:hidden}.results.concealed:before,.results.concealed:after{opacity:0!important}
#reading.reveal-stage .results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:30px 0}
#reading.reveal-stage .result-card.revealed{display:block;text-align:center;border:0;padding:0}#reading.reveal-stage .revealed>.face{max-width:125px;margin:12px auto;aspect-ratio:3/5}#reading.reveal-stage .revealed>p{display:none}#reading.reveal-stage .revealed>h3{font-size:18px;margin-top:15px}#reading.reveal-stage .revealed>.position{font-size:12px}
#reading:has(#question-form:not([hidden])) .results.complete:before{height:2px;background:linear-gradient(90deg,#ad863333 0%,#dfb65c66 22%,#fff3c7 45%,#d9b26977 65%,#ad863333 100%);background-size:250% 100%;animation:linked-current 3.8s linear infinite;box-shadow:0 0 7px #f6d38399,0 0 18px #c3923c44}
#reading:has(#question-form:not([hidden])) .results.complete:after{left:8%;right:8%;height:24px;top:calc(50% + 1px);background:radial-gradient(ellipse at 30% 50%,#ffe5a7 0 1px,#dab36644 2px,transparent 10px),radial-gradient(ellipse at 70% 50%,#ffe5a7 0 1px,#dab36644 2px,transparent 10px);animation:link-breathe 2.5s ease-in-out infinite}
@keyframes fan-open{from{opacity:0;scale:.86;translate:0 30px}to{opacity:1;scale:1;translate:0 0}}
@media(min-width:621px){#reading.choosing .reading-content{min-height:420px}#reading.choosing .deck{height:360px}#reading.choosing .draw-card{width:100px}#reading:has(#question-form:not([hidden])) .results.complete:before{display:block}}
@media(max-width:360px){#reading.choosing .draw-card{width:61px;transform:translate(-50%,-50%) translate(calc(var(--fan-n)*19px),calc(var(--fan-n)*var(--fan-n)*1.8px)) rotate(calc(var(--fan-n)*6deg))}}
@media(prefers-reduced-motion:reduce){#reading.choosing .draw-card{animation:none}#reading:has(#question-form:not([hidden])) .results.complete:before,#reading:has(#question-form:not([hidden])) .results.complete:after{animation:none}.flying-card{display:none}}
#reading.choosing .draw-card{transform:translate(-50%,-50%) translate(calc(var(--fan-n)*clamp(16px,4.6vw,29px)),calc(var(--fan-n)*var(--fan-n)*1.9px)) rotate(calc(var(--fan-n)*6deg))}#reading.choosing .deck:before{content:"☾";font:67px Georgia;color:#dbc18b88;text-shadow:0 0 35px #d6a65744}@media(max-width:360px){#reading.choosing .draw-card{transform:translate(-50%,-50%) translate(calc(var(--fan-n)*15px),calc(var(--fan-n)*var(--fan-n)*1.8px)) rotate(calc(var(--fan-n)*6deg))}}
#reading.choosing .draw-card{transform:translate(-50%,-50%) translate(var(--fan-x,0px),var(--fan-y,0px)) rotate(var(--fan-angle,0deg));width:72px;top:54%;touch-action:none;user-select:none;-webkit-user-select:none;animation:none!important}
#reading.choosing .deck{touch-action:none;user-select:none;cursor:grab;min-height:180px}#reading.choosing .deck:active{cursor:grabbing}
.fan-hint{display:none}#reading.choosing .fan-hint{display:flex;flex:0 0 88px;align-items:center;justify-content:center;gap:20px;margin:0 0 12px;color:#d1b580}#reading.choosing .fan-hint>div{text-align:center}.fan-hint svg{display:block;margin:auto;width:100px;height:48px;fill:none;stroke:#e3c68e;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.fan-hint .hint-arc{opacity:.65}.fan-hint .hint-hand{animation:swipe-hand 2.8s ease-in-out infinite}.fan-hint span{font-size:12px;color:#c7b5a0;letter-spacing:.5px}.fan-hint button{background:none;border:1px solid #d1b58033;border-radius:50%;height:40px;width:40px;color:#d1b580;font-size:27px;flex-shrink:0}.fan-hint button:hover{background:#d1b58011}
@keyframes swipe-hand{0%,100%{transform:translateX(-12px) rotate(-5deg);opacity:.5}50%{transform:translateX(12px) rotate(5deg);opacity:1}}
@media(max-width:360px){#reading.choosing .draw-card{width:65px;transform:translate(-50%,-50%) translate(var(--fan-x,0px),var(--fan-y,0px)) rotate(var(--fan-angle,0deg))}.fan-hint span{font-size:11px}#reading.choosing .fan-hint{gap:12px}}
@media(prefers-reduced-motion:reduce){.fan-hint .hint-hand{animation:none}}
/* Geometry, not font baselines, centers the navigation arrows. */
.fan-hint button{display:grid;place-items:center;padding:0;line-height:1;box-sizing:border-box}.fan-hint button svg{display:block;width:20px;height:20px;margin:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Reserve a real card-table height so the fan cannot collapse against the title. */
#reading.choosing .reading-content{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
#reading.choosing .reading-content::-webkit-scrollbar{display:none}
#reading.choosing .deck{flex:1 0 290px;min-height:290px;width:100%;position:relative}
#reading.choosing .draw-card{top:58%;}
#reading.choosing .fan-hint{flex:0 0 84px;margin:4px 0 8px;}
@media(max-width:620px) and (max-height:720px){#reading.choosing .deck{flex-basis:245px;min-height:245px}#reading.choosing .draw-card{top:52%}#reading.choosing .fan-hint{flex-basis:74px;margin-top:0}}
/* Selection is the persistent mobile equivalent of hover, never a dimmed state. */
#reading.choosing .draw-card:disabled,#reading.choosing .draw-card:disabled.touch-lit{opacity:1;filter:brightness(1.3);border-color:#ffe2a5;box-shadow:0 0 0 1px #edcb8b99,0 0 17px #e2bd6b88,0 0 35px #d2a45a44,0 12px 22px #0009;margin-top:-28px;z-index:150!important;cursor:default}
#reading.choosing .draw-card:disabled:after{opacity:1;box-shadow:inset 0 0 0 1px #fff0c1,inset 0 0 19px #d5b77d55}
#reading.choosing .deck.gathering .draw-card:disabled{opacity:0!important}
/* Layered observatory: engraved wheel, motivated light, a low orbital table. */
.astral-scene{display:none}#reading.choosing .astral-scene{display:block;position:absolute;inset:0 0 96px;pointer-events:none;overflow:hidden;z-index:0;isolation:isolate}
#reading.choosing .reading-content:before{display:none}
.astral-wheel{position:absolute;width:104%;aspect-ratio:1;left:-2%;top:2%;background:url('assets/astral-wheel.svg') center/contain no-repeat;opacity:.85;filter:drop-shadow(0 0 7px #e3b65b33)}
.astral-wheel:after{content:"";position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg 300deg,#f5d29500 310deg,#ffe2a345 345deg,transparent 360deg);mask:radial-gradient(circle,transparent 55%,#000 56% 70%,transparent 71%);animation:observatory-turn 32s linear infinite;mix-blend-mode:screen}
.astral-traveler{position:absolute;width:90%;aspect-ratio:1;left:5%;top:calc(2% + 7px);animation:observatory-turn 24s linear infinite;border-radius:50%;border:1px solid #f1c7710b}.astral-traveler i{position:absolute;top:-2px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:#fff3d2;box-shadow:0 0 7px 3px #f3cb8399,0 0 22px 7px #d7a54d44}
.astral-floor{position:absolute;left:-5%;width:110%;height:38%;bottom:4%;border:1px solid #e0b66555;border-radius:50%;transform:perspective(500px) rotateX(57deg);background:repeating-radial-gradient(ellipse at center,transparent 0 20px,#d6ae5d35 21px,transparent 22px 37px);box-shadow:0 0 13px #e5bb6322,inset 0 0 35px #b482321a}
.astral-floor:after{content:"";position:absolute;inset:-1px;border:1px solid transparent;border-top-color:#ffe1a3;border-radius:50%;filter:drop-shadow(0 0 6px #f0c677);animation:observatory-turn 12s linear infinite}
.astral-mist{position:absolute;inset:0;background:radial-gradient(ellipse at 0% 47%,#95749b26,transparent 35%),radial-gradient(ellipse at 100% 60%,#96769f26,transparent 35%),radial-gradient(ellipse at 50% 62%,#f3c67b2e,transparent 34%);animation:observatory-mist 9s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen}
#reading.choosing .deck{z-index:1}#reading.choosing .deck:before{display:none}#reading.choosing .fan-hint{z-index:2}
#reading.choosing .draw-card:disabled{box-shadow:0 0 0 1px #ffe6aa,0 0 15px #f1ca7ca0,0 0 36px #d9a24d55,0 12px 25px #000a}
@keyframes observatory-turn{to{transform:rotate(360deg)}}@keyframes observatory-mist{0%,100%{opacity:.45;translate:-5px 0}50%{opacity:.9;translate:5px -5px}}
@media(max-width:620px) and (max-height:720px){.astral-wheel{width:88%;left:6%;top:-4%}.astral-traveler{width:78%;left:11%;top:-3%}.astral-floor{bottom:2%}}
@media(prefers-reduced-motion:reduce){.astral-wheel:after,.astral-traveler,.astral-floor:after,.astral-mist{animation:none}}
.astral-wheel{width:94%;left:3%;top:-20%}.astral-traveler{width:84%;left:8%;top:-18%}.astral-floor{bottom:0;height:30%}@media(max-width:620px) and (max-height:720px){.astral-wheel{width:82%;left:9%;top:-20%}.astral-traveler{width:74%;left:13%;top:-18%}}
/* User-supplied full-height observatory artwork for the draw stage. */
#reading.choosing{isolation:isolate;position:relative}
#reading.choosing .reading-content{background:none}
#reading.choosing .astral-scene{position:fixed;inset:0;z-index:-1;overflow:hidden;background:linear-gradient(180deg,#100c1722 0%,transparent 32%,#100c171a 100%),url('assets/draw-observatory.png') center center/cover no-repeat;}
#reading.choosing .astral-wheel,#reading.choosing .astral-floor{display:none}
#reading.choosing .astral-traveler{width:min(80vw,620px);left:50%;top:49%;aspect-ratio:1;translate:-50% -50%;border:none}
#reading.choosing .astral-mist{background:radial-gradient(ellipse at 50% 66%,#f3c67b28,transparent 35%),radial-gradient(ellipse at 10% 55%,#94739c1c,transparent 28%);opacity:.6}
#reading.choosing .fan-hint{background:radial-gradient(ellipse,#100c1788,transparent 75%);border-radius:30px}
@media(min-width:621px){#reading.choosing .astral-scene{background-size:auto,auto 100%;background-color:#100c17}}
header{position:relative;z-index:4}#reading.choosing .astral-scene{background-position:center top,center top}#reading.choosing>.lead,#reading.choosing>#progress{position:relative;z-index:2;text-shadow:0 1px 5px #100c17,0 0 12px #100c17}
.card-particles{display:none}
#reading:has(#question-form:not([hidden])) .result-card{position:relative}
#reading:has(#question-form:not([hidden])) .card-particles{display:block;position:absolute;inset:19px -10px -8px;pointer-events:none;z-index:2;overflow:visible}
.card-particles i{position:absolute;left:var(--px);top:var(--py);width:2px;height:2px;border-radius:50%;background:#ffe9b5;box-shadow:0 0 5px 1px #efc97c99,0 0 11px #c9963c55;opacity:0;animation:card-stardust var(--duration) ease-in-out var(--delay) infinite}
.card-particles i:nth-child(3n){width:3px;height:3px;background:#fff3d3}
@keyframes card-stardust{0%{opacity:0;transform:translate(0,11px) scale(.5)}25%{opacity:.7}60%{opacity:.4;transform:translate(var(--drift),-8px) scale(1)}100%{opacity:0;transform:translate(var(--drift),-23px) scale(.4)}}
@media(prefers-reduced-motion:reduce){.card-particles i{animation:none;opacity:.35}.card-particles i:nth-child(even){display:none}}
/* Contain particle overhang without creating a horizontal scroll track. */
.reading-content{overflow-x:hidden;scrollbar-width:none}
.reading-content::-webkit-scrollbar{display:none;width:0;height:0}
#results{min-width:0}
.card-particles{contain:layout}
@media(max-width:620px){html,body,main,#reading{max-width:100%;overflow-x:clip}}
/* One source ratio across the fan, flying clones and selected card slots. */
#reading.choosing .draw-card,.face.sealed,.flying-card{aspect-ratio:480/807;background-size:100% 100%}
#reading:has(#question-form:not([hidden])) .face.sealed{height:auto;max-height:none}
/* Card fronts: 120px wide, proportional height (~202px). */
.face.illustrated{width:120px;max-width:120px;height:auto;aspect-ratio:480/807}
@media(max-width:620px){
.result-card.revealed{grid-template-columns:120px minmax(0,1fr);column-gap:16px}
.revealed>.face.illustrated{width:120px;max-width:120px;height:auto;aspect-ratio:480/807}
#reading.reveal-stage .results{gap:8px}
#reading.reveal-stage .revealed>.face.illustrated{width:min(120px,100%);max-width:120px;height:auto;aspect-ratio:480/807}
}
@media(max-width:360px){.result-card.revealed{grid-template-columns:120px minmax(0,1fr);column-gap:12px}}
.face.illustrated.has-artwork{background-size:contain;background-repeat:no-repeat;background-position:center;background-color:#120e20;filter:none}.face.illustrated.has-artwork>small,.face.illustrated.has-artwork>b{visibility:hidden}
/* Keep illustrated fronts readable; orientation stays explicit in the text label. */
.face.illustrated.reversed{transform:none}
/* Trim the narrow white source-image margin inside the card window. */
.face.illustrated.has-artwork{background-size:106% 106%;background-position:center;background-color:#120e20;border-color:#bd9d68;overflow:hidden;border-radius:6px}
.face.illustrated.has-artwork{background-size:contain;background-color:transparent;border:0;border-radius:0;box-shadow:none;filter:drop-shadow(0 8px 12px #0007)}
#waiting{position:relative;isolation:isolate;max-width:480px;width:100%;margin:0 auto;display:flex;flex-direction:column;min-height:620px}#waiting:before{content:"";position:absolute;inset:0 -22px;z-index:-1;background:linear-gradient(#100c17cc,#100c1744 35%,#100c1733 68%,#100c17f2),url('assets/reading-wait-sky.webp') center 47%/cover no-repeat;pointer-events:none}.wait-heading{text-align:center;padding:4px 0 0}.wait-heading h1{font-size:27px;line-height:1.6;letter-spacing:1px}.wait-heading p{font-size:14px;line-height:1.8;color:#c1b5cb;margin:8px 0 0}.wait-dot{display:block;width:4px;height:4px;margin:4px auto 12px;border-radius:50%;background:#eed28e;box-shadow:0 0 12px #ebc57b}
.wait-stage{flex:1;min-height:300px;position:relative;isolation:isolate}.planet-orbit{position:absolute;border:1px solid #e2be6a22;border-radius:50%;aspect-ratio:1;left:50%;top:43%;translate:-50% -50%;animation:wait-orbit 20s linear infinite;pointer-events:none}.orbit-a{width:88%;animation-duration:24s}.orbit-b{width:69%;animation-duration:32s;animation-direction:reverse;rotate:130deg}.orbit-c{width:50%;animation-duration:18s;rotate:240deg}.planet-orbit i{position:absolute;left:calc(50% - 6px);top:-6px;width:12px;height:12px;border-radius:50%;background:radial-gradient(circle at 30% 24%,#ffe7b3,#b48a49 45%,#3d2b30 85%);box-shadow:inset -2px -2px 4px #0008,0 0 14px #e3b56377}.orbit-b i{width:8px;height:8px}.orbit-c i{width:5px;height:5px;background:#fff0c2;box-shadow:0 0 12px #ebca87}
.wait-moon-glow{position:absolute;left:28%;right:28%;top:17%;height:37%;background:radial-gradient(ellipse,#f6cb6d42,transparent 70%);animation:wait-breathe 6s ease-in-out infinite;pointer-events:none}.wait-disc{position:absolute;width:95%;height:21%;bottom:12%;left:2.5%;transform:perspective(550px) rotateX(61deg);border-radius:50%;border:1px solid #d5b06c88;box-shadow:0 0 24px #ebbf5a22,inset 0 0 17px #ebbf5a11}.wait-disc>div{position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(transparent 0deg 260deg,#dfb65733 305deg,#fff0bb 350deg,transparent 360deg);mask:radial-gradient(closest-side,transparent 95%,#000 96%);animation:wait-orbit 9s linear infinite}
.wait-card{position:absolute;left:50%;bottom:19%;width:25%;max-width:100px;aspect-ratio:480/807;background:url('assets/card-back-celestial.webp') center/contain no-repeat;filter:drop-shadow(0 0 13px #d2a65066);animation:wait-float 5s ease-in-out infinite;translate:-50% 0}.wc-left{margin-left:-29%;rotate:-11deg;animation-delay:-1.2s}.wc-center{bottom:15%;z-index:2;animation-delay:-.3s}.wc-right{margin-left:29%;rotate:11deg;animation-delay:-2.4s}.wait-chain{position:absolute;left:14%;right:14%;height:2px;bottom:36%;z-index:-1;background:linear-gradient(90deg,transparent,#eac67d88,#fff2bc,#eac67d88,transparent);background-size:230% 100%;box-shadow:0 0 9px #e2b96888;animation:linked-current 4s linear infinite}.wait-dust{position:absolute;inset:15% 5%;background:radial-gradient(2px 2px at 13% 55%,#ffe3a2,transparent),radial-gradient(2px 2px at 88% 38%,#ffe3a2,transparent),radial-gradient(2px 2px at 38% 75%,#ffe3a2,transparent);animation:wait-float 7s ease-in-out infinite}
.wait-status{text-align:center;padding:12px 0 18px;flex-shrink:0}.wait-status>p{font-size:15px;line-height:1.8;margin:0;color:#e0d4e4}.wait-status>.quiet{font-size:12px;color:#ac9bb9;margin:7px 0 0}.wait-label{display:block;margin-top:20px;padding-top:16px;border-top:1px solid #d2b27a44;color:#d9bb7c;font-size:12px;letter-spacing:4px}.wait-status button{margin-top:12px}#resume-reading{font-size:14px;margin:10px 0 0;min-height:44px;padding:9px}
@keyframes wait-orbit{to{transform:rotate(360deg)}}@keyframes wait-float{0%,100%{transform:translateY(4px)}50%{transform:translateY(-7px)}}@keyframes wait-breathe{0%,100%{opacity:.45;scale:.94}50%{opacity:1;scale:1.08}}
@media(max-width:620px){#waiting{flex:1;min-height:0;max-height:100%;margin:0}#waiting:before{inset:-76px -22px -14px}.wait-stage{min-height:160px}.wait-heading h1{font-size:25px}.wait-status{padding-bottom:5px}.wait-label{margin-top:15px;padding-top:12px}.wait-status>p{font-size:14px}}
@media(max-width:620px) and (max-height:720px){.wait-heading h1{font-size:23px}.wait-heading p{font-size:13px}.wait-label{margin-top:10px;padding-top:9px}.wait-status>.quiet{font-size:11px}.wait-stage{min-height:150px}}
@media(prefers-reduced-motion:reduce){.planet-orbit,.wait-card,.wait-moon-glow,.wait-disc>div,.wait-chain,.wait-dust{animation:none}}
body:has(#waiting:not([hidden])) footer{display:none}
/* A slow, soft pulse signals activity without suggesting measured progress. */
.wait-label{position:relative;animation:reading-label-breathe 2.8s cubic-bezier(.45,0,.55,1) infinite;will-change:transform,opacity}
.wait-label:after{content:"";display:inline-block;vertical-align:middle;width:3px;height:3px;border-radius:50%;margin-left:12px;background:#f4d99b;box-shadow:7px 0 0 #d6b87370,14px 0 0 #d6b87330;animation:reading-dot-breathe 2.8s ease-in-out infinite}
@keyframes reading-label-breathe{0%,100%{transform:translateY(2px);opacity:.5;text-shadow:0 0 0 #e7c78700}50%{transform:translateY(-2px);opacity:1;text-shadow:0 0 12px #e7c78777}}
@keyframes reading-dot-breathe{0%,100%{opacity:.3;transform:translateY(1px)}50%{opacity:1;transform:translateY(-1px)}}
@media(prefers-reduced-motion:reduce){.wait-label,.wait-label:after{animation:none;will-change:auto}}
.reading-poster-preview{display:block;width:100%;height:auto;border-radius:4px;margin-top:18px;-webkit-touch-callout:default;user-select:auto}.poster-download{text-align:center;text-decoration:none;display:block}.reading-actions button:disabled{opacity:.65;cursor:wait}

/* Hover changes light only; only the chosen card may change its position. */
#reading.choosing .draw-card:not(:disabled){margin-top:0}
#reading.choosing .draw-card:not(:disabled):hover,#reading.choosing .draw-card:not(:disabled):focus-visible{margin-top:0;filter:brightness(1.25)}

/* Reopening a result must not replay the reveal or imply ongoing work after failure. */
.results.no-reveal .revealed{animation:none!important}
.results.no-reveal .illustrated:before,.results.no-reveal .illustrated:after{display:none!important}
.wait-error .wait-label{animation:none!important}
/* Deep answer: a quiet gold-edged letter, separate from the basic card reveal. */
#reading.deep-answer-page{max-width:680px;margin-inline:auto}
#reading.deep-answer-page>.moon-label{display:none}
#reading.deep-answer-page h1{font-size:clamp(28px,6.5vw,38px);margin:18px 0 8px}
#reading.deep-answer-page>#reading-question{display:none}
#reading.deep-answer-page>#progress{font-size:13px;margin:0 0 18px;color:#c0ac88}
.deep-answer-page .reading-content{display:flex;flex-direction:column;gap:24px;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;padding-bottom:20px}
.deep-answer-page #deep-answer:not([hidden]){display:contents}
.deep-answer-page .answer-question{order:0;padding:16px 18px;border-left:2px solid #c8a56c;background:linear-gradient(90deg,#c8a56c12,transparent)}
.answer-question span{color:#c9ac79;font-size:13px}
.answer-question p{font-size:17px;line-height:1.7;color:#eee3d5;margin:7px 0 0;overflow-wrap:anywhere}
.deep-answer-page .answer-overview{order:1;padding:22px 20px;background:radial-gradient(ellipse at top,#b68b4d16,transparent 75%);border-top:1px solid #d0af7450;border-bottom:1px solid #d0af7430}
.answer-overview h2,.answer-guidance h2{font-family:'Songti SC','SimSun',serif;font-weight:400;color:#ecddbd;font-size:24px;margin:0 0 16px}
.answer-overview>p{color:#d4cad9;font-size:16px;line-height:1.95;margin:0;white-space:pre-line;overflow-wrap:anywhere}
.deep-answer-page #results{order:2;display:flex;flex-direction:column;gap:20px;margin:0;padding:0;flex-shrink:0}
.deep-answer-page #results .result-card{display:grid;grid-template-columns:66px 1fr;column-gap:16px;align-items:start;padding:0 0 20px;border-bottom:1px solid #c8a56c28;animation:none;text-align:left;width:100%;min-width:0}
.deep-answer-page #results .face{grid-column:1;grid-row:1/5;width:66px;height:auto;aspect-ratio:480/807;margin:0;background-size:contain;background-repeat:no-repeat}
.deep-answer-page #results .result-card>.position:first-child{grid-column:2;font-size:13px;line-height:1.5;margin:0 0 6px}
.deep-answer-page #results h3{grid-column:2;font-size:22px;margin:0 0 5px}
.deep-answer-page #results h3+.position{grid-column:2;font-size:13px;margin:0 0 8px}
.deep-answer-page #results .result-card>p{grid-column:2;font-size:15px;line-height:1.85;margin:0;color:#c9bdce;overflow-wrap:anywhere}
.deep-answer-page .answer-guidance{order:3;padding:0 4px}
.answer-guidance ul{padding:0;list-style:none;margin:0}
.answer-guidance li{position:relative;padding:14px 0 14px 24px;border-bottom:1px solid #c8a56c22;font-size:16px;line-height:1.8;color:#ded2dc}
.answer-guidance li:before{content:'✧';position:absolute;left:0;color:#d5b574}
.deep-answer-page .answer-notice{order:4;margin:0;color:#ac9eaf;font-size:13px;line-height:1.8;text-align:center}
.deep-answer-page #interpretation{order:5;margin:0}
.deep-answer-page #interpretation>.reading-note,.deep-answer-page #premium,.deep-answer-page #premium+.quiet{display:none}
.deep-answer-page .reading-actions{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.deep-answer-page .reading-actions button{font-size:14px;min-height:48px;padding:10px 6px}
.deep-answer-page #save{border-color:#cfad75;color:#f0dbb2;background:#bd94551a}
@media(max-width:620px){#reading.deep-answer-page{width:100%;min-height:0}.deep-answer-page .reading-content{gap:20px}.deep-answer-page .answer-overview{padding:20px 16px}}
/* Three cards become the reading navigation; all prose follows one reading column. */
.deep-answer-page #deep-answer:not([hidden]){display:flex;flex-direction:column;gap:28px}
.deep-answer-page #results{display:none}
.deep-answer-page #deep-answer>*{order:initial}
.deep-answer-page .answer-card-nav{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding:8px 12px 10px;isolation:isolate}
.answer-card-nav:before{content:'';position:absolute;left:16%;right:16%;top:44%;height:1px;background:linear-gradient(90deg,transparent,#e4c185,transparent);box-shadow:0 0 12px #e6c6818c;z-index:-1}
.answer-card-nav:after{content:'';position:absolute;left:16%;top:44%;width:6px;height:6px;background:#f7dd9e;border-radius:50%;box-shadow:0 0 12px #e6bd71;z-index:-1;animation:answer-chain-flow 5s ease-in-out infinite}
.answer-card-link{border:0;background:transparent;padding:0;display:flex;flex-direction:column;align-items:center;gap:9px;color:#c4ad83;cursor:pointer;min-width:0}
.answer-card-link img{display:block;width:100%;max-width:90px;aspect-ratio:480/807;object-fit:contain;filter:brightness(.84);transition:filter .3s,drop-shadow .3s}
.answer-card-link.active img{filter:brightness(1.06) drop-shadow(0 0 12px #e5b65e55)}
.answer-card-link span{font-size:13px;white-space:nowrap}.answer-card-link small{font-size:14px;color:#e1d3ba}
.answer-card-link:focus-visible{outline:1px solid #e0bd7b;outline-offset:7px;border-radius:5px}
.answer-star{display:block;text-align:center;color:#d7b574;font-size:22px;margin:-8px 0 10px}
.deep-answer-page .answer-overview{position:relative;padding:20px 18px 24px}
.deep-answer-page .answer-overview h2{text-align:center;font-size:25px}
.answer-card-readings>h2,.answer-connections>h2{font-family:'Songti SC','SimSun',serif;color:#ecddbd;font-size:24px;font-weight:400;margin:0 0 18px}
.answer-card-detail{border-top:1px solid #c8a56c35;padding:16px 0;scroll-margin-top:16px}
.answer-card-detail:last-child{border-bottom:1px solid #c8a56c35}
.answer-card-detail summary{display:flex;align-items:center;gap:16px;cursor:pointer;list-style:none;min-height:84px}
.answer-card-detail summary::-webkit-details-marker{display:none}
.answer-card-detail summary>img{width:48px;aspect-ratio:480/807;object-fit:contain}
.answer-card-caption{display:flex;flex:1;flex-direction:column;gap:5px}.answer-card-caption small{font-size:13px;color:#c8aa72}.answer-card-caption strong{font-family:'Songti SC','SimSun',serif;font-size:22px;font-weight:400;color:#eee2d2}.answer-card-caption>span{font-size:13px;color:#bbaaac}
.answer-expand{color:#dcc08d;font-size:25px;font-weight:300}.answer-card-detail[open] .answer-expand{font-size:0}.answer-card-detail[open] .answer-expand:after{content:'−';font-size:25px}
.answer-card-detail h3{font-size:14px;font-weight:400;color:#d6bb86;margin:20px 0 10px}
.answer-card-detail>p{font-size:16px;line-height:1.95;color:#d2c6d5;margin:0;white-space:pre-line;overflow-wrap:anywhere}
.answer-timeline{position:relative;margin-left:6px;padding-left:24px;border-left:1px solid #bb95565c}
.answer-timeline>div{position:relative;padding:0 0 22px}.answer-timeline>div:last-child{padding-bottom:0}
.answer-timeline>div:before{content:'';position:absolute;left:-29px;top:5px;width:8px;height:8px;border-radius:50%;background:#c8a56c;box-shadow:0 0 10px #d6b57955}
.answer-timeline span{font-size:13px;color:#c5a874}.answer-timeline p{font-size:17px;color:#e2d5d9;margin:7px 0 0}
.answer-connection-note{font-size:15px;line-height:1.9;color:#b9acbf;margin:20px 0 0}
@keyframes answer-chain-flow{0%,100%{left:16%;opacity:.25}50%{left:83%;opacity:1}}
@media(prefers-reduced-motion:reduce){.answer-card-nav:after{animation:none}}
@media(max-width:360px){.deep-answer-page .answer-card-nav{gap:16px;padding-inline:4px}.answer-card-link span{font-size:12px}}
/* Final reading as an uninterrupted celestial scroll. */
#reading.deep-answer-page{position:relative;padding-inline:18px;border-inline:1px solid #c3a16a30}
#reading.deep-answer-page:before{content:'';position:absolute;inset:0 0 auto;height:520px;background:linear-gradient(180deg,#100b1770,#100b17 98%),url('assets/reading-wait-sky.webp') center 24%/cover no-repeat;opacity:.48;pointer-events:none;z-index:-1}
#reading.deep-answer-page h1{font-size:clamp(27px,6vw,36px);margin-top:16px}
.deep-answer-page .reading-content{gap:22px;padding-inline:0}
.deep-answer-page #deep-answer:not([hidden]){gap:26px}
.deep-answer-page .answer-question{padding:12px 14px;border:1px solid #b89a6055;border-radius:6px;display:flex;gap:12px;align-items:baseline;background:#30263770}
.answer-question span{flex-shrink:0;font-size:12px}.answer-question p{font-size:15px;line-height:1.7;margin:0}
.deep-answer-page .answer-card-nav{padding:0 4px 28px;gap:18px;border-bottom:1px solid #c7a46b55}
.answer-card-link{gap:8px}.answer-card-link img{max-width:112px}.answer-card-link small{font-size:15px}.answer-card-link span{font-size:13px}
.answer-card-nav:before{top:auto;bottom:9px;left:0;right:0}.answer-card-nav:after{top:auto;bottom:7px}
.deep-answer-page .answer-overview{padding:0;background:none;border:0}
.deep-answer-page .answer-overview h2{text-align:left;display:inline;font-size:25px}
.answer-section-number{color:#b59357;font-family:Georgia,serif;font-size:14px;display:inline-block;margin-right:12px}
.answer-overview>p{margin-top:18px;font-size:16px;line-height:2}
.answer-card-readings{display:flex;flex-direction:column}
.answer-card-detail{padding:24px 0;border-top:1px solid #bd9c6555}
.answer-card-detail:last-child{border-bottom:0;padding-bottom:0}
.answer-card-heading{display:flex;align-items:baseline;margin-bottom:16px}
.answer-card-caption{display:flex;flex-wrap:wrap;flex-direction:row;align-items:baseline;gap:8px}
.answer-card-caption small{font-family:'Songti SC','SimSun',serif;font-size:24px;color:#e9ddc8;flex-basis:100%;margin-bottom:3px}
.answer-card-caption strong{font-family:inherit;font-size:13px;color:#b99a61}.answer-card-caption>span{font-size:13px;color:#b99a61}
.answer-card-detail>p{line-height:2;font-size:16px}
.deep-answer-page .answer-guidance{padding:24px 0 0;border-top:1px solid #bd9c6555}
.answer-guidance h2{display:inline;font-size:25px}.answer-guidance-intro{color:#bfa576;font-size:14px;margin:16px 0 8px}
.answer-guidance li{padding-block:12px;line-height:1.95}
.deep-answer-page .answer-notice{border-top:1px solid #bd9c6555;padding-top:20px;font-size:13px}
@media(max-width:620px){#reading.deep-answer-page{padding-inline:8px}.deep-answer-page .reading-content{gap:20px}.answer-card-link img{max-width:100px}}
/* Two-second shuffle ritual before the fan becomes interactive. */
#reading.choosing .draw-card{transition:transform .65s cubic-bezier(.22,.75,.25,1),opacity .45s,filter .25s}
#reading.is-shuffling .draw-card{opacity:0!important;transform:translate(-50%,-50%) rotate(0deg)!important;pointer-events:none}
#reading.is-shuffling .fan-hint{opacity:0;pointer-events:none}
.shuffle-ritual{position:absolute;inset:0;pointer-events:none;z-index:200}
.shuffle-ritual:before{content:'';position:absolute;left:50%;top:58%;width:190px;height:190px;transform:translate(-50%,-50%);background:radial-gradient(ellipse,#d3aa6028,transparent 70%);filter:blur(12px)}
.shuffle-ritual>span{position:absolute;left:50%;top:58%;width:94px;aspect-ratio:480/807;background:url('assets/card-back-celestial.webp') center/contain no-repeat;filter:drop-shadow(0 5px 16px #0009) drop-shadow(0 0 8px #d3a65c33);animation:ritual-shuffle 1.65s cubic-bezier(.45,0,.25,1) both;animation-delay:calc(var(--shuffle-i)*55ms)}
@keyframes ritual-shuffle{0%{transform:translate(-50%,-50%) translateX(calc((var(--shuffle-i) - 2)*3px)) rotate(calc((var(--shuffle-i) - 2)*3deg));opacity:0}12%{opacity:1}32%{transform:translate(-50%,-50%) translateX(calc((var(--shuffle-i) - 2)*32px)) rotate(calc((var(--shuffle-i) - 2)*12deg))}56%{transform:translate(-50%,-50%) translateX(calc((2 - var(--shuffle-i))*27px)) rotate(calc((2 - var(--shuffle-i))*9deg))}80%,100%{transform:translate(-50%,-50%) translateX(calc((var(--shuffle-i) - 2)*3px)) rotate(calc((var(--shuffle-i) - 2)*2deg));opacity:1}}
@media(prefers-reduced-motion:reduce){#reading.choosing .draw-card{transition:none}.shuffle-ritual>span{animation:none}}
#reading.choosing .draw-card{transition:opacity .45s,filter .25s}
#reading.choosing.fan-opening .draw-card{transition:transform .65s cubic-bezier(.22,.75,.25,1),opacity .45s,filter .25s}
@media(prefers-reduced-motion:reduce){#reading.choosing.fan-opening .draw-card{transition:none}}
/* A dense cut deck: split, staggered interleave, square the edges. */
.shuffle-ritual{perspective:800px}
.shuffle-ritual:before{width:250px;height:200px;background:radial-gradient(ellipse,#d3aa6020,transparent 70%)}
.shuffle-ritual>span{width:92px;border-radius:5px;filter:none;box-shadow:0 1px 0 #d9b67e88,0 2px 2px #07040c88;transform-origin:50% 85%;animation:deck-cut-interleave 1.78s cubic-bezier(.4,0,.25,1) both;animation-delay:var(--shuffle-delay)}
@keyframes deck-cut-interleave{
0%{opacity:0;transform:translate(-50%,-50%) translate(calc(var(--shuffle-depth)*.75px),calc(var(--shuffle-depth)*-1.4px)) rotate(-3deg)}
8%,16%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--shuffle-depth)*.75px),calc(var(--shuffle-depth)*-1.4px)) rotate(-3deg)}
34%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--shuffle-side)*67px + var(--shuffle-depth)*.65px),calc(var(--shuffle-depth)*-1.6px - 8px)) rotate(calc(var(--shuffle-side)*-12deg))}
48%{transform:translate(-50%,-50%) translate(calc(var(--shuffle-side)*58px + var(--shuffle-depth)*.65px),calc(var(--shuffle-depth)*-1.8px - 4px)) rotate(calc(var(--shuffle-side)*-8deg))}
70%{transform:translate(-50%,-50%) translate(calc(var(--shuffle-side)*13px + var(--shuffle-depth)*.5px),calc(var(--shuffle-depth)*-1.2px)) rotate(calc(var(--shuffle-side)*-2deg))}
88%,100%{opacity:1;transform:translate(-50%,-50%) translate(calc(var(--shuffle-depth)*.5px),calc(var(--shuffle-depth)*-1.3px)) rotate(0deg)}
}
@media(prefers-reduced-motion:reduce){.shuffle-ritual>span{animation:none}}
.history-open{display:block;width:100%;text-align:left;background:transparent;border:0;color:#e5d8c4;padding:8px 0;cursor:pointer}.history-open small{color:#bca276}.history-open p{font-size:16px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:10px 0}.history-thumbs{display:flex;gap:12px}.history-thumbs img{width:40px;aspect-ratio:480/807;object-fit:contain}.history-entry{padding:18px 0;border-bottom:1px solid #bf9e6038}.history-entry>.text-button{font-size:13px;margin-top:8px}#modal-content>.quiet{line-height:1.8;margin-top:24px}
/* Night observatory: restrained light above a legible, uninterrupted letter. */
#reading.deep-answer-page{isolation:isolate;border-inline:0;padding-inline:14px}
#reading.deep-answer-page:before{height:540px;inset:0 -14px auto;background:linear-gradient(180deg,#110b1b22 0%,#110b1b99 55%,#110b1b 100%),url('assets/answer-nebula.webp') center top/cover no-repeat;opacity:.85;z-index:-1}
#reading.deep-answer-page h1{color:#efddb3;font-family:'Songti SC','SimSun',serif;font-weight:400;font-size:clamp(26px,6.5vw,36px);letter-spacing:1px;text-shadow:0 0 28px #e3bd6420;margin:18px 0 10px}
#reading.deep-answer-page>#progress{font-size:12px;letter-spacing:.5px;color:#b5a184;margin-bottom:14px}
.deep-answer-page .reading-content{padding:0 2px 20px;position:relative}
.deep-answer-page #deep-answer:not([hidden]){gap:28px}
.answer-subtitle{text-align:center;font-size:14px;color:#c9b17e;margin:-5px 0 0;letter-spacing:1px;position:relative}
.answer-subtitle:before,.answer-subtitle:after{content:'—';margin:0 12px;color:#b68d4d}
.deep-answer-page .answer-question{display:block;position:relative;padding:16px 18px;background:linear-gradient(120deg,#25192bde,#110c1bcc);border:1px solid #c29b5f66;border-radius:3px;box-shadow:inset 0 0 0 4px #0f0a16,0 8px 30px #06030b30}
.answer-question:before,.answer-question:after{content:'✧';position:absolute;color:#d9b777;font-size:13px;background:#16101e;line-height:1;pointer-events:none}.answer-question:before{top:-7px;left:16px}.answer-question:after{bottom:-7px;right:16px}
.answer-question span{display:block;font-size:13px;margin-bottom:6px;color:#c4a674}.answer-question p{font-size:17px;line-height:1.75;color:#eee2db;overflow-wrap:anywhere}
.deep-answer-page .answer-card-nav{gap:20px;padding:0 8px 30px;position:relative}
.answer-card-link{position:relative;gap:7px}.answer-card-link img{max-width:104px;filter:brightness(.96) drop-shadow(0 8px 9px #0008)}
.answer-card-link.active img{filter:brightness(1.07) drop-shadow(0 0 10px #cfa35766)}
.answer-card-link span{font-size:13px;color:#c7ac77}.answer-card-link small{font-size:16px;color:#e4d9cb}.answer-orientation{font-size:12px;font-style:normal;color:#bca889}
.answer-card-nav:before{bottom:8px;height:1px;background:linear-gradient(90deg,transparent,#b78c4f,#f2d392,#b78c4f,transparent);box-shadow:0 0 10px #edc37b50}
.answer-card-nav:after{width:5px;height:5px;bottom:6px;background:#ffe4ad;box-shadow:0 0 9px #ffe4ad,0 0 18px #d2a052;animation:answer-chain-flow 7s ease-in-out infinite}
.deep-answer-page .answer-overview{padding:0 0 2px}.deep-answer-page .answer-overview h2,.answer-guidance h2{font-size:25px;letter-spacing:1px}
.answer-section-number{font-size:15px;color:#c5a467;border:1px solid #be995455;border-radius:50%;width:31px;height:31px;line-height:29px;text-align:center;vertical-align:middle;margin-right:11px}
.answer-overview>p,.answer-card-detail>p{font-size:16px;line-height:1.95;color:#ded3df;margin-top:18px}
.answer-card-detail{position:relative;padding:26px 0;border-top:1px solid #c1a06b55}
.answer-card-detail:before{content:'✦';position:absolute;right:12px;top:-8px;font-size:12px;color:#c7a66e;background:#140e1d;padding-inline:8px;text-shadow:0 0 12px #d4ab6a66}
.answer-card-caption small{font-size:24px}.answer-card-caption strong,.answer-card-caption>span{color:#bca16d;font-size:13px}
.deep-answer-page .answer-guidance{padding-top:26px;border-color:#c1a06b55}.answer-guidance-intro{font-size:14px;line-height:1.8}.answer-guidance li{font-size:16px;border-color:#c1a06b22}
.answer-colophon{position:relative;display:flex;align-items:center;flex-direction:column;gap:10px;padding:62px 12px 30px;min-height:150px;text-align:center;background:linear-gradient(180deg,#110b1b,transparent 55%),url('assets/answer-horizon.webp') center bottom/cover no-repeat}
.answer-colophon>span{font-size:17px;letter-spacing:2px;color:#d6bb83;text-shadow:0 2px 8px #000}.answer-colophon>time{font-size:12px;color:#c5b7c9;text-shadow:0 2px 7px #000}
.deep-answer-page .answer-notice{font-size:13px;color:#b8a9bd;line-height:1.8;margin-top:0}
.deep-answer-page .reading-actions{gap:10px}.deep-answer-page .reading-actions #save{background:linear-gradient(120deg,#ad8750,#dbc18c,#bd985d);color:#231728;border:1px solid #f4d69b;box-shadow:0 0 20px #d1ac6420}.deep-answer-page .reading-actions button{min-height:50px}
@media(max-width:620px){#reading.deep-answer-page{padding-inline:5px}.deep-answer-page .answer-card-nav{gap:16px;padding-inline:4px}}
@media(prefers-reduced-motion:reduce){.answer-card-nav:after{animation:none}}
/* Small celestial markers at each of the five chapter titles. */
.deep-answer-page .answer-overview h2:before,.deep-answer-page .answer-guidance h2:before,.deep-answer-page .answer-card-caption small:before{content:'✧';display:inline-block;margin-right:9px;font-size:17px;vertical-align:2px;color:#d5b578;text-shadow:0 0 9px #d9b46d55;font-family:serif}
/* User-provided chapter emblems, in reading order. */
.deep-answer-page .answer-overview>.answer-section-number,.deep-answer-page .answer-guidance>.answer-section-number,.deep-answer-page .answer-card-heading>.answer-section-number{display:none}
.deep-answer-page .answer-overview h2:before,.deep-answer-page .answer-guidance h2:before,.deep-answer-page .answer-card-caption small:before{content:'';width:44px;height:44px;display:inline-block;vertical-align:middle;margin-right:11px;background:center/contain no-repeat;filter:drop-shadow(0 0 5px #cba45435)}
.deep-answer-page .answer-overview h2:before{background-image:url('assets/chapter-summary.webp')}
.deep-answer-page .answer-card-detail:nth-child(1) .answer-card-caption small:before{background-image:url('assets/chapter-past.webp')}
.deep-answer-page .answer-card-detail:nth-child(2) .answer-card-caption small:before{background-image:url('assets/chapter-present.webp')}
.deep-answer-page .answer-card-detail:nth-child(3) .answer-card-caption small:before{background-image:url('assets/chapter-future.webp')}
.deep-answer-page .answer-guidance h2:before{background-image:url('assets/chapter-advice.webp')}
.deep-answer-page .answer-card-caption{min-width:0}
.deep-answer-page .answer-card-caption small{line-height:44px;margin-bottom:6px}
.deep-answer-page .answer-card-caption strong{margin-left:55px}
@media(max-width:360px){.deep-answer-page .answer-overview h2:before,.deep-answer-page .answer-guidance h2:before,.deep-answer-page .answer-card-caption small:before{width:38px;height:38px;margin-right:8px}.deep-answer-page .answer-card-caption strong{margin-left:46px}}
/* Closing note and actual reading time, above the brand and existing actions. */
.deep-answer-page .answer-colophon{padding:28px 12px 25px;gap:28px;min-height:190px;border-top:1px solid #c3a06755}
.answer-footer-meta{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;width:100%;text-align:left}
.answer-footer-meta h3{font-family:var(--serif);font-size:15px;font-weight:400;color:#d8bb7c;margin:0 0 8px;letter-spacing:1px}
.answer-footer-tip p{font-size:13px;line-height:1.85;color:#cfc2d4;margin:0;overflow-wrap:anywhere}
.answer-footer-date time{font-size:13px;line-height:1.85;color:#d8ccd9;display:block;overflow-wrap:anywhere}
.answer-colophon .answer-footer-brand{font-family:var(--serif);font-size:18px;letter-spacing:2px;color:#ddc28a}
@media(max-width:360px){.answer-footer-meta{grid-template-columns:1fr;gap:18px}.answer-footer-date{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px}.answer-footer-date h3{margin-bottom:0}}
/* Page scrolling: no fixed reading viewport, no nested article scrollers. */
html{height:auto;min-height:100%;overflow-y:auto;overflow-x:clip}
body{height:auto;min-height:100vh;min-height:100dvh;overflow:visible;display:block}
header{position:relative;flex:none}
main{display:block;min-height:0;flex:none}
#reading,#reading.deep-answer-page{height:auto;max-height:none;min-height:0;flex:none}
#reading .reading-content,#reading.choosing .reading-content,#reading.deep-answer-page .reading-content{height:auto;max-height:none;min-height:0;overflow:visible;flex:none;overscroll-behavior:auto}
#reading>.lead{max-height:none;overflow:visible}
#history-page{max-width:680px;margin:0 auto;padding-bottom:30px}
#history-back{padding-left:0;min-height:44px}
#history-content h2{font-size:27px;margin:15px 0 20px}
#history-content>.quiet{font-size:13px;line-height:1.9;margin-top:26px}
#history-content>.secondary{max-width:320px;margin:24px auto}
@media(max-width:620px){
 html,body{height:auto;overflow-y:visible;overflow-x:clip}
 body{display:block;min-height:100dvh}
 header{height:auto;min-height:65px;padding:14px 22px 9px}
 main{display:block;padding-bottom:max(18px,env(safe-area-inset-bottom));min-height:0}
 #intro{flex:none;min-height:0;grid-template-rows:auto auto auto}
 .hero-art{height:clamp(90px,calc(100svh - 490px),280px);width:calc(100% + 24px);align-self:initial}
 #reading,#reading.deep-answer-page{display:flex;flex-direction:column;flex:none;min-height:0}
 #reading .reading-content,#reading.choosing .reading-content,#reading.deep-answer-page .reading-content{flex:none;overflow:visible}
 #reading.choosing .deck{flex:none;height:clamp(245px,38svh,340px);min-height:245px;overflow:visible}
 #reading.choosing .reading-content{padding-top:12px}
 #reading.choosing .fan-hint{flex:none;min-height:88px}
 #reading>.lead{max-height:none;overflow:visible}
 #question-form{flex:none;gap:12px}
 #question-form textarea{flex:none;height:120px;min-height:100px;max-height:none;resize:vertical}
 #waiting{flex:none;max-height:none;min-height:0}
 #waiting .wait-stage{flex:none;height:clamp(230px,44svh,410px);min-height:230px}
 #history-page{width:100%}
}
/* On deep results the legacy reveal cards never join the article. */
#reading.deep-answer-page.reveal-stage #results{display:none}
/* Home: let the central artwork breathe instead of squeezing it to the viewport. */
@media(max-width:620px){
 #intro{gap:0;grid-template-rows:auto auto auto}
 #intro .intro-copy{padding-top:18px}
 #intro .intro-copy .moon-label{margin:0 0 16px;font-size:12px;letter-spacing:1px}
 #intro .intro-copy h1{font-size:32px;line-height:1.55;letter-spacing:3px}
 #intro .intro-copy .lead{font-size:14px;line-height:1.8;margin:14px auto 0;max-width:300px;letter-spacing:0}
 #intro .hero-art{height:clamp(210px,32svh,290px);width:100%;margin:12px 0 20px;max-width:none}
 #intro .hero-art img{width:100%;height:100%;object-fit:contain}
 #intro>.workspace{padding-top:22px;border-top:1px solid #cfaf7433}
 #intro .section-heading h2{font-size:18px;line-height:1.7;letter-spacing:.5px}
 #intro .step-tag{display:none}
 #intro .meditation{font-size:14px;line-height:1.9;margin:14px 0 20px;color:#bdb0c6}
 #intro .fixed-spread{border-top:0;padding:0 0 6px;row-gap:8px}
 #intro .fixed-spread h2{font-size:14px}
 #intro .fixed-spread .quiet{font-size:12px;line-height:1.8}
 #intro #start{margin-top:22px;min-height:52px;font-size:15px;letter-spacing:0}
 #intro .workspace>.quiet{display:none}
 #intro{padding-bottom:20px}
}
@media(max-width:360px){#intro .intro-copy h1{font-size:29px}#intro .hero-art{height:220px}#intro .section-heading h2{font-size:17px}}