/* Final mobile sizing layer. Values are CSS pixels, not device hardware pixels. */
@media(max-width:620px){
 :root{--page-gutter:clamp(16px,5vw,24px)}
 html{-webkit-text-size-adjust:100%;height:auto;overflow-x:clip}
 body{height:auto;min-height:100vh;min-height:100svh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);overflow:visible}
 header{padding:14px var(--page-gutter) 10px;min-height:72px;gap:16px}
 main{padding:0 var(--page-gutter) 24px;max-width:100%;display:block}
 .brand{gap:8px;flex-shrink:0}.brand>span{font-size:21px}.brand small{font-size:11px;letter-spacing:2px}
 #history{font-size:14px;min-height:44px;white-space:nowrap}#history span{margin-left:7px}
 #back,#wait-back,#history-back{font-size:14px;min-height:44px}
 #reading,#reading.deep-answer-page{padding:0;width:100%;min-height:0;max-height:none}
 #reading>h1{font-size:clamp(25px,6.7vw,30px);line-height:1.55;letter-spacing:1px;margin:10px 0}
 #reading>.lead{font-size:15px;line-height:1.8;max-height:none;overflow:visible;margin:10px 0}
 #reading>#progress{font-size:13px;line-height:1.8;margin:0 0 14px}
 #reading .reading-content,#reading.choosing .reading-content,#reading.deep-answer-page .reading-content{overflow:visible;height:auto;min-height:0;max-height:none;flex:none;padding-inline:0}
 #intro .intro-copy{padding-top:16px}
 #intro .intro-copy h1{font-size:32px;line-height:1.5}
 #intro .hero-art{height:clamp(210px,29svh,280px);margin:16px 0 24px}
 #intro .meditation{font-size:15px;line-height:1.85}
 #intro .fixed-spread .quiet{font-size:13px}
 #intro #start{min-height:52px;margin-top:22px}
 #reading.choosing .deck{height:clamp(255px,36svh,340px);min-height:255px;flex:none}
 #reading.choosing .draw-card{width:clamp(65px,18.5vw,80px)}
 #reading.choosing .fan-hint{gap:12px;min-height:96px;margin:6px 0 14px}
 .fan-hint button{height:44px;width:44px}.fan-hint span{font-size:13px;letter-spacing:0}
 #question-form{padding:18px 14px;margin:18px 0 0;flex:none;gap:13px}
 #question-form .section-heading{flex-wrap:wrap}
 #question-form .section-heading h2{font-size:19px}
 #question-form .step-tag{font-size:12px;letter-spacing:0}
 #question-form textarea{font-size:16px;line-height:1.8;height:130px;min-height:110px;max-height:none;flex:none}
 #question-form .topics{flex-wrap:wrap;gap:8px}
 #question-form .topics button{min-height:44px;font-size:14px;padding:8px 12px}
 #question-form .primary{min-height:52px;font-size:15px;line-height:1.65}
 #reading:has(#question-form:not([hidden])) .face.sealed{width:clamp(60px,18vw,78px);max-width:78px;max-height:none}
 #reading:has(#question-form:not([hidden])) .position{font-size:13px;letter-spacing:0}
 .result-card.revealed{grid-template-columns:minmax(0,100px) minmax(0,1fr);gap:12px 16px}
 .revealed>.face.illustrated{width:100%;max-width:100px}
 .result-card.revealed h3{font-size:23px;line-height:1.5;overflow-wrap:anywhere}
 .result-card.revealed>p{font-size:16px;line-height:1.9}
 #reading.reveal-stage .results{gap:10px;margin:22px 0}
 #reading.reveal-stage .result-card.revealed h3{font-size:18px;letter-spacing:0}
 #reading.reveal-stage .revealed>.face.illustrated{width:100%;max-width:110px}
 #reading.reveal-stage .results .position{font-size:12px;letter-spacing:0}
 #waiting .wait-stage{height:clamp(270px,40svh,390px);min-height:270px;flex:none}
 .wait-heading h1{font-size:26px}.wait-heading p,.wait-status>p{font-size:15px}
 .wait-label{font-size:14px}.wait-status button{min-height:48px}
 .deep-answer-page .answer-card-nav{gap:14px;padding-inline:2px}
 .answer-card-link img{width:100%;max-width:104px}.answer-card-link small{font-size:16px;overflow-wrap:anywhere}
 .answer-card-link span,.answer-orientation{font-size:13px}
 .deep-answer-page .answer-overview h2,.deep-answer-page .answer-guidance h2{font-size:24px;letter-spacing:.5px}
 .deep-answer-page .answer-card-heading{display:block}
 .deep-answer-page .answer-card-caption{display:grid;grid-template-columns:auto 1fr;gap:5px 8px;width:100%}
 .deep-answer-page .answer-card-caption small{grid-column:1/-1;display:flex;align-items:center;font-size:24px;line-height:1.5;margin:0 0 5px}
 .deep-answer-page .answer-card-caption small:before{flex:none;width:42px;height:42px;margin-right:10px}
 .deep-answer-page .answer-card-caption strong{margin:0 0 0 52px;font-size:14px;overflow-wrap:anywhere}
 .deep-answer-page .answer-card-caption>span{font-size:14px;align-self:center}
 .deep-answer-page .answer-overview>p,.deep-answer-page .answer-card-detail>p,.deep-answer-page .answer-guidance li{font-size:16px;line-height:1.95}
 .answer-footer-meta{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px}
 .reading-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .reading-actions #save,.reading-actions #restart{min-height:50px;font-size:14px;line-height:1.6;margin:0}
 .history-open small{font-size:13px}.history-entry>.text-button{min-width:60px;min-height:44px;font-size:14px}
 dialog{width:calc(100% - 28px);max-width:460px;max-height:85dvh;padding:48px 20px 24px}
 .close{width:44px;height:44px;top:3px;right:3px}
 dialog p{font-size:14px}.primary,.secondary{white-space:normal;overflow-wrap:anywhere}
}
@media(max-width:360px){
 header{padding-inline:16px}.brand>span{font-size:19px}#history{font-size:13px}
 #intro .intro-copy h1{font-size:29px}
 #reading>h1{font-size:25px}
 .fan-hint span{font-size:12px}.fan-hint svg{width:82px}
 #question-form .topics button{padding-inline:9px;font-size:13px}
 .result-card.revealed{grid-template-columns:86px minmax(0,1fr);column-gap:12px}
 .answer-card-link small{font-size:14px}
 .deep-answer-page .answer-overview h2,.deep-answer-page .answer-guidance h2,.deep-answer-page .answer-card-caption small{font-size:22px}
 .answer-footer-meta{grid-template-columns:1fr}
}
@media(max-width:620px) and (max-height:720px){
 #intro .hero-art{height:210px}
 #reading.choosing .deck{height:255px}
 #waiting .wait-stage{height:270px}
}
#reveal-note{display:none;text-align:center;padding:12px 0 26px}
#reading.reveal-stage:not(.deep-answer-page) #reveal-note{display:block}
#reveal-note strong{display:block;font:400 17px/1.8 var(--serif);color:#ddbf83}
#reveal-note p{font-size:13px;line-height:1.8;color:#b7a9c3;margin:5px 0 10px}
.reveal-dots{display:flex;justify-content:center;gap:7px}
.reveal-dots i{width:3px;height:3px;border-radius:50%;background:#ebca89;animation:reading-dot-breathe 1.5s ease-in-out infinite}
.reveal-dots i:nth-child(2){animation-delay:.2s}.reveal-dots i:nth-child(3){animation-delay:.4s}
@media(prefers-reduced-motion:reduce){.reveal-dots i{animation:none}}
/* Question step: compact mobile hierarchy, with the three-card selection as context. */
@media(max-width:620px){
 #reading:has(#question-form:not([hidden]))>#back{margin-bottom:6px;min-height:40px;font-size:13px}
 #reading:has(#question-form:not([hidden]))>h1{font-size:clamp(21px,5.55vw,25px);line-height:1.45;letter-spacing:.4px;margin:14px 0 8px}
 #reading:has(#question-form:not([hidden]))>.lead{font-size:14px;line-height:1.7;margin:4px 0 10px;color:#bdb0c5}
 #reading:has(#question-form:not([hidden]))>#progress{font-size:12px;line-height:1.7;margin:0 0 16px;letter-spacing:0}
 #reading:has(#question-form:not([hidden])) .results{gap:14px;margin:0 0 6px;padding:0 6px}
 #reading:has(#question-form:not([hidden])) .result-card>.position{font-size:12px;letter-spacing:0;white-space:nowrap;margin-bottom:9px}
 #reading:has(#question-form:not([hidden])) .face.sealed{width:clamp(62px,19vw,82px);max-width:82px}
 #question-form{margin:16px 0 0;padding:18px 16px 16px;gap:12px;background:linear-gradient(145deg,#28203088,#17111eaa);border:1px solid #d0ab6833;border-radius:12px}
 #question-form .section-heading{align-items:center;gap:8px}
 #question-form .section-heading h2{font-size:clamp(16px,4.4vw,19px);letter-spacing:0;line-height:1.5}
 #question-form .step-tag{font-size:11px;letter-spacing:0;white-space:nowrap;color:#bd9f68}
 #question-form .quiet{font-size:12px;line-height:1.7;color:#afa0b9}
 #question-form textarea{height:clamp(100px,17svh,145px);min-height:100px;font-size:16px;line-height:1.7;padding:12px;border-radius:8px;margin:0;background:#100b17a8}
 #question-form textarea::placeholder{font-size:14px;color:#a598ae}
 #question-form .topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0}
 #question-form .topics button{min-height:40px;font-size:12px;padding:7px 3px;letter-spacing:0;white-space:nowrap}
 #question-form .primary{font-size:14px;line-height:1.6;letter-spacing:.3px;min-height:49px;padding:12px 6px;border-radius:8px}
}
@media(max-width:360px){
 #reading:has(#question-form:not([hidden]))>h1{font-size:21px}
 #reading:has(#question-form:not([hidden])) .results{gap:10px;padding-inline:2px}
 #question-form{padding:16px 13px;gap:11px}
 #question-form .section-heading h2{font-size:16px}
 #question-form .step-tag{font-size:10px}
}
@media(max-width:620px){
 #reading:has(#question-form:not([hidden]))>.lead{display:none}
 #reading:has(#question-form:not([hidden]))>#back{margin-bottom:0}
 #reading:has(#question-form:not([hidden]))>h1{margin:6px 0 10px}
 #reading:has(#question-form:not([hidden]))>#progress{margin-bottom:12px}
 #reading:has(#question-form:not([hidden])) .reading-content{gap:8px}
 #reading:has(#question-form:not([hidden])) .results{margin-bottom:0}
 #reading:has(#question-form:not([hidden])) #question-form{margin-top:10px}
}
/* Orientation follows the card name rather than taking a separate row. */
.result-card.revealed h3 .card-orientation{display:inline-block;margin-left:9px;vertical-align:middle;font:400 12px/1.6 "PingFang SC","Microsoft YaHei",sans-serif;letter-spacing:0;color:#d0b47d;white-space:nowrap}
#reading:not(.reveal-stage):not(.deep-answer-page) .result-card.revealed>p{grid-row:3;font-size:14px;line-height:1.9;margin-top:-6px}
#reading.reveal-stage .card-orientation{font-size:11px;margin-left:5px}
/* Compact card identification on the right of each positional chapter. */
.deep-answer-page .answer-card-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.deep-answer-page .answer-card-caption{display:block;flex:1;min-width:0;width:auto}
.deep-answer-page .answer-card-caption small{margin:0;display:flex;align-items:center;font-size:clamp(20px,5.4vw,24px);line-height:1.45;white-space:nowrap}
.deep-answer-page .answer-card-badge{display:flex;align-items:center;gap:9px;flex:none;padding:5px 0 5px 10px;border-left:1px solid #c1a06b38}
.answer-card-thumb{display:block;width:34px;height:auto;aspect-ratio:480/807;object-fit:contain;filter:drop-shadow(0 0 5px #c9a15b30)}
.answer-card-badge-text{display:flex;flex-direction:column;align-items:flex-end;gap:4px;max-width:84px}
.answer-card-badge-text strong{font-size:13px;line-height:1.5;font-weight:400;color:#ddc28d;overflow-wrap:anywhere}
.answer-card-badge-text>span{font-size:12px;line-height:1.5;color:#af9fba}
@media(max-width:360px){.deep-answer-page .answer-card-heading{gap:7px}.deep-answer-page .answer-card-caption small{font-size:19px}.deep-answer-page .answer-card-caption small:before{width:32px;height:36px;margin-right:7px}.deep-answer-page .answer-card-badge{gap:6px;padding-left:7px}.answer-card-thumb{width:28px}.answer-card-badge-text{max-width:55px}.answer-card-badge-text strong{font-size:12px}}
/* Keep basic reading text packed at the top, independent of the card image height. */
#reading:not(.reveal-stage):not(.deep-answer-page) .result-card.revealed{grid-template-rows:auto auto 1fr;align-items:start;align-content:start;row-gap:0}
#reading:not(.reveal-stage):not(.deep-answer-page) .revealed>.face{grid-row:1/4}
#reading:not(.reveal-stage):not(.deep-answer-page) .revealed>.position:first-child{margin-bottom:6px;align-self:start}
#reading:not(.reveal-stage):not(.deep-answer-page) .revealed>h3{margin:0 0 8px;align-self:start}
#reading:not(.reveal-stage):not(.deep-answer-page) .revealed>p{grid-row:3;margin:0;align-self:start}
/* Softer hierarchy on the completed basic reading. */
#reading:not(.deep-answer-page):not(.reveal-stage):has(#interpretation:not([hidden]))>h1{font-size:clamp(22px,5.7vw,27px);line-height:1.55;letter-spacing:.5px;text-align:center;margin:10px 0}
#reading:not(.deep-answer-page) .reading-note>span{font-size:12px;letter-spacing:1px}
#reading:not(.deep-answer-page) .reading-note h2{font-size:clamp(18px,4.8vw,21px);line-height:1.65;letter-spacing:.5px;margin-top:12px}
#reading:not(.deep-answer-page) .reading-note p{font-size:14px;line-height:1.9;margin-top:14px}
/* Deep reading: smaller type with clear line spacing on phone screens. */
@media(max-width:620px){
 #reading.deep-answer-page .answer-overview>p,#reading.deep-answer-page .answer-card-detail>p,#reading.deep-answer-page .answer-guidance li{font-size:14px;line-height:1.95}
 #reading.deep-answer-page .answer-overview h2,#reading.deep-answer-page .answer-guidance h2,#reading.deep-answer-page .answer-card-caption small{font-size:21px;letter-spacing:.3px}
 #reading.deep-answer-page .answer-guidance-intro{font-size:13px;line-height:1.8}
 #reading.deep-answer-page .answer-card-detail{padding-block:22px}
 #reading.deep-answer-page .answer-card-heading{margin-bottom:12px}
 #reading.deep-answer-page .answer-overview>p,#reading.deep-answer-page .answer-card-detail>p{margin-top:12px}
}
@media(max-width:360px){#reading.deep-answer-page .answer-overview h2,#reading.deep-answer-page .answer-guidance h2,#reading.deep-answer-page .answer-card-caption small{font-size:19px}}
/* Full-bleed deep-reading scenery, including the top brand navigation. */
body:has(#reading.deep-answer-page:not([hidden])){background:linear-gradient(180deg,#100c1710 0px,#100c1740 180px,#100c17 540px),url('assets/answer-nebula.webp') center top/100% 540px no-repeat,#100c17}
#reading.deep-answer-page:before{display:none}
#reading.deep-answer-page .answer-colophon{width:100vw;max-width:none;align-self:center;margin-inline:0;padding-left:max(22px,calc((100vw - 640px)/2));padding-right:max(22px,calc((100vw - 640px)/2));background:linear-gradient(180deg,#100c17 0%,#100c1750 32%,#100c1700 75%),url('assets/answer-horizon.webp') center bottom/cover no-repeat}
@media(max-width:620px){#reading.deep-answer-page .answer-colophon{padding-inline:var(--page-gutter);padding-top:28px;padding-bottom:30px}}
/* Let footer scenery escape the article width; keep its text in the reading column. */
#reading.deep-answer-page,#reading.deep-answer-page .reading-content,#reading.deep-answer-page #deep-answer{overflow:visible}
#reading.deep-answer-page .answer-colophon{width:100%;max-width:100%;align-self:stretch;padding:28px 0 30px;background:none;isolation:isolate}
#reading.deep-answer-page .answer-colophon:before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:linear-gradient(180deg,#100c17 0%,#100c1750 32%,transparent 75%),url('assets/answer-horizon.webp') center bottom/cover no-repeat}
/* New home art: preserve the full observatory and blend only its outer edge. */
#intro .hero-art img{object-fit:contain;object-position:center;filter:none;mix-blend-mode:normal;mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,#000 58%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse 68% 68% at 50% 50%,#000 58%,transparent 100%)}
@media(max-width:620px){#intro .hero-art{height:clamp(240px,34svh,320px);margin:10px 0 20px;width:calc(100% + 16px);margin-inline:-8px}}
#intro .intro-copy h1{font-size:clamp(21px,5.7vw,30px);line-height:1.6;letter-spacing:.5px;text-align:center}
@media(max-width:620px){#intro .intro-copy h1{font-size:clamp(20px,5.5vw,24px);letter-spacing:0;line-height:1.6;white-space:nowrap}}
/* Reveal stage fills tall phones, without fixing or clipping its content. */
@media(max-width:620px){
 #reading.reveal-stage:not(.deep-answer-page){min-height:calc(100svh - 96px - env(safe-area-inset-top) - env(safe-area-inset-bottom));display:flex;flex-direction:column}
 #reading.reveal-stage:not(.deep-answer-page) .reading-content{display:flex;flex-direction:column;flex:1 0 auto;overflow:visible;gap:0;padding-bottom:0}
 #reading.reveal-stage:not(.deep-answer-page) #results{margin: auto 0 0;padding-top:22px;flex:none}
 #reading.reveal-stage:not(.deep-answer-page) #reveal-note{flex:none;padding:18px 0 18px;margin-top:8px}
 #reading.reveal-stage:not(.deep-answer-page) .result-card.revealed{padding-bottom:10px}
}
#reading.choosing .deck.fan-stepping .draw-card{transition:transform .25s cubic-bezier(.22,.75,.25,1),opacity .25s,filter .25s}
@media(prefers-reduced-motion:reduce){#reading.choosing .deck.fan-stepping .draw-card{transition:none}}
@media(max-width:620px){#intro .meditation{font-size:13px;line-height:1.85}#intro .fixed-spread .quiet{font-size:13px}}
#intro .hero-art img{mask-image:none;-webkit-mask-image:none;object-fit:contain;filter:none;mix-blend-mode:normal}
/* Feather the image's dark perimeter into the live page background. */
#intro .hero-art{isolation:isolate}
#intro .hero-art img{object-fit:contain;filter:none;mix-blend-mode:normal;mask-image:radial-gradient(ellipse closest-side at center,#000 64%,#000e 76%,#0007 88%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side at center,#000 64%,#000e 76%,#0007 88%,transparent 100%)}
#intro .hero-art:before{background:radial-gradient(ellipse,#ad81351a,transparent 70%);filter:blur(26px);animation:none}
#intro .hero-art .celestial-light{opacity:.35}
/* One calm preparation block, followed by one clearly grouped spread label. */
#intro>.workspace{border-top:0;padding-top:12px}
#intro .section-heading{justify-content:center;text-align:center}
#intro .section-heading h2{font-family:var(--serif);font-size:18px;letter-spacing:1px;font-weight:400;color:#e6d6ba}
#intro .meditation{font-size:13px;text-align:center;line-height:1.95;color:#afa1ba;max-width:300px;margin:12px auto 22px}
#intro .fixed-spread{display:block;border:0;border-top:1px solid #c5a36a25;padding:16px 0 0;background:none}
.spread-label{display:flex;align-items:center;justify-content:center;gap:9px}
.spread-label>span{font-size:19px;color:#c9ab73;line-height:1}
#intro .spread-label h2{font-family:var(--serif);font-size:14px;letter-spacing:1px;color:#d7c39e}
.spread-label small{font-size:14px;color:#9c8ca7;border-left:1px solid #c5a36a35;padding-left:9px;line-height:1.2}
#intro .fixed-spread .quiet{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;line-height:1.8;margin-top:10px;text-align:center;color:#a597ae}
.fixed-spread .quiet i{display:block;width:12px;height:1px;background:#b5976055;flex:none}
@media(max-width:360px){#intro .fixed-spread .quiet{font-size:11px;gap:7px}.fixed-spread .quiet i{width:9px}}
/* The fan spans the screen, independently of the text column gutters. */
#reading.choosing,#reading.choosing .reading-content{overflow:visible}
#reading.choosing .deck{width:100vw;max-width:none;align-self:center;flex-shrink:0}
@media(max-width:620px){#reading.choosing .deck{padding-inline:0;margin-inline:0}main:has(#reading.choosing:not([hidden])){overflow:visible}}
#intro .meditation{max-width:none;text-align:center}
#intro .meditation>span{display:block;white-space:nowrap;font-size:clamp(12px,3.3vw,13px);line-height:1.95}
/* Home refinement: one visual focal point and a quieter preparation area. */
#intro .hero-art{display:flex;align-items:center;justify-content:center}
#intro .hero-art img{display:block;flex:none;width:auto;height:100%;max-width:100%;aspect-ratio:1;object-fit:contain;mask-image:radial-gradient(ellipse closest-side,#000 65%,#000d 78%,#0005 90%,transparent 100%);-webkit-mask-image:radial-gradient(ellipse closest-side,#000 65%,#000d 78%,#0005 90%,transparent 100%)}
#intro .hero-art .celestial-light{opacity:.18}
#intro .section-heading h2{font-size:17px;letter-spacing:.6px;color:#e1ceb0}
#intro .meditation{margin:9px auto 18px;color:#a99bb5}
#intro .fixed-spread{border-top:0;padding-top:4px}
#intro .fixed-spread .quiet{margin-top:8px;color:#96899f}
#intro #start{border-radius:8px;background:linear-gradient(115deg,#b8955d,#d5b982 54%,#bd995f);box-shadow:0 6px 24px #b9954f15,inset 0 0 0 2px #f1d9a522;font-size:14px;letter-spacing:.5px;margin-top:22px}
@media(max-width:620px){
 #intro .intro-copy{padding-top:15px}
 #intro .intro-copy .moon-label{font-size:11px;letter-spacing:.5px;margin-bottom:14px;opacity:.85}
 #intro .intro-copy h1{font-size:clamp(20px,5.5vw,24px);line-height:1.5}
 #intro .hero-art{height:clamp(250px,37svh,330px);margin:6px 0 16px;width:100%}
 #intro>.workspace{padding-top:0;padding-bottom:8px}
 #intro .spread-label h2{font-size:13px}
 #intro .spread-label small{font-size:13px}
 #intro #start{min-height:52px;margin-top:20px}
}
@media(max-width:620px) and (max-height:720px){#intro .hero-art{height:250px;margin-bottom:12px}#intro .intro-copy{padding-top:10px}}
#waiting>#wait-back{align-self:flex-start;width:auto;text-align:left;padding-left:0;margin-left:0;flex:none}
/* Keep transformed fan cards inside the viewport, including the raised selection. */
#reading.choosing .deck{overflow-x:clip;overflow-y:visible}
/* Move the waiting illustration and everything below the heading together. */
@media(max-width:620px){
 #waiting .wait-stage{margin-top:120px}
 #waiting:before{bottom:106px;translate:0 120px}
}
/* Keep the draw instructions in the quiet area above the bright star chart. */
@media(max-width:620px){
 #reading.choosing>.moon-label{display:none}
 #reading.choosing>#reading-title{font-size:clamp(23px,6.2vw,27px);line-height:1.5;margin:8px 0 6px}
 #reading.choosing>#reading-question{font-size:13px;line-height:1.8;margin:5px 0;color:#d2c7db}
 #reading.choosing>#progress{font-size:12px;line-height:1.8;margin:3px 0 10px;color:#c5ad7e}
}
/* Question heading is distinct; its content uses the article body scale. */
#reading.deep-answer-page .answer-question>span{font-size:17px;line-height:1.6;margin-bottom:8px}
#reading.deep-answer-page .answer-question>p{font-size:16px;line-height:1.95}
@media(max-width:620px){#reading.deep-answer-page .answer-question>p{font-size:14px}}
/* Home: a warm halo and a slow highlight guide attention into preparation. */
.deep-sky-effects{display:none;position:absolute;top:-96px;left:50%;width:100vw;height:430px;transform:translateX(-50%);overflow:clip;z-index:-1;pointer-events:none}
#reading.deep-answer-page:not([hidden])>.deep-sky-effects{display:block}
.deep-sky-star{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff8e4;box-shadow:0 0 5px 2px #ffe7aacc,0 0 13px 4px #e8b95e77;animation:deep-sky-twinkle var(--spark-duration) ease-in-out var(--spark-delay) infinite;animation-play-state:var(--sky-play-state,running)}
.deep-sky-star:before,.deep-sky-star:after{content:'';position:absolute;left:50%;top:50%;width:14px;height:1px;transform:translate(-50%,-50%);background:linear-gradient(90deg,transparent,#fff1c3 40% 60%,transparent)}
.deep-sky-star:after{transform:translate(-50%,-50%) rotate(90deg)}
.deep-sky-meteor{position:absolute;width:22px;height:1px;rotate:30deg;opacity:0;background:linear-gradient(90deg,transparent,#efcf8e 75%,#fff4d4);box-shadow:0 0 4px #e8c57b77;animation:deep-sky-streak var(--meteor-duration) linear var(--meteor-delay) infinite;animation-play-state:var(--sky-play-state,running)}
.deep-sky-meteor:after{content:'';position:absolute;right:0;top:-.5px;width:2px;height:2px;border-radius:50%;background:#fff0c9}
@keyframes deep-sky-twinkle{0%,100%{opacity:.25;scale:.75}48%{opacity:1;scale:1.25}}
@keyframes deep-sky-streak{0%{opacity:0;transform:translate(0,0)}3%{opacity:1}18%{opacity:.9}23%{opacity:0;transform:translate(min(65vw,320px),0)}100%{opacity:0;transform:translate(min(65vw,320px),0)}}
@media(prefers-reduced-motion:reduce){.deep-sky-star{animation:none;opacity:.5}.deep-sky-meteor{display:none}}
.orbit-spark{position:absolute;inset:0;opacity:0;pointer-events:none;transform-origin:center}
#intro .orbit-spark>i{width:5px;height:5px;left:calc(50% - 2.5px);top:-2.5px;background:#fff1bd;box-shadow:0 0 5px 2px #ffe2a8,0 0 13px 5px #efb851aa,0 0 24px 8px #d8934338}
@media(prefers-reduced-motion:reduce){.orbit-spark{display:none}}
#intro .hero-art:before{inset:2% 5%;background:radial-gradient(ellipse,#ffdb8299 0%,#d79d454d 40%,transparent 72%);filter:blur(18px);animation:home-halo-breathe 3.6s ease-in-out infinite;mix-blend-mode:screen}
#intro .hero-art img{animation:home-art-radiance 3.6s ease-in-out infinite}
#intro .hero-art:after{inset:5% 9%;z-index:3;background:radial-gradient(ellipse at 50% 45%,#ffe4a719,transparent 55%),radial-gradient(3px 3px at 50% 12%,#fff1c5,transparent),radial-gradient(2px 2px at 22% 46%,#ffe3a8,transparent),radial-gradient(2px 2px at 79% 39%,#fff0c7,transparent);mix-blend-mode:screen;animation:home-star-breathe 5.5s ease-in-out infinite}
#intro .hero-art .celestial-light{opacity:.4}
#intro .section-heading h2{position:relative;color:#ffe7b5;background:none;-webkit-text-fill-color:currentColor;animation:home-preparation-light 3.6s ease-in-out infinite;text-shadow:0 0 12px #e1b95f70}
#intro .section-heading h2:after{content:'';position:absolute;left:20%;right:20%;bottom:-6px;height:1px;background:linear-gradient(90deg,transparent,#ffe2a0,transparent);box-shadow:0 0 8px #edbd66;animation:home-star-breathe 3.6s ease-in-out infinite;pointer-events:none}
@keyframes home-halo-breathe{0%,100%{opacity:.5;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}
@keyframes home-star-breathe{0%,100%{opacity:.35}50%{opacity:.85}}
@keyframes home-art-radiance{0%,100%{filter:brightness(1.02) drop-shadow(0 0 5px #edb95633)}50%{filter:brightness(1.18) drop-shadow(0 0 18px #edb95688)}}
@keyframes home-preparation-light{0%,100%{transform:translateY(1px);color:#ebce96;text-shadow:0 0 5px #e1b95f40}50%{transform:translateY(-2px);color:#fff3d5;text-shadow:0 0 10px #efc573bb,0 0 22px #e4b56270}}
@media(prefers-reduced-motion:reduce){
 #intro .hero-art:before,#intro .hero-art:after,#intro .hero-art img,#intro .section-heading h2,#intro .section-heading h2:after{animation:none}
 #intro .hero-art:before{opacity:.65;transform:none}
 #intro .hero-art:after{opacity:.5}
 #intro .section-heading h2{background:none;-webkit-text-fill-color:currentColor}
}