/* Shared email-code controls; the delivery cooldown is enforced server-side. */
.auth-code-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:-2px 0 18px;font:13px/1.5 var(--sans)}
.auth-code-actions[hidden]{display:none!important}
.auth-code-actions button{min-height:44px;padding:8px 0;color:var(--wine);text-underline-offset:4px;text-decoration:underline}
.auth-code-actions button:disabled{opacity:.65;cursor:default;text-decoration:none}
#auth-code{letter-spacing:.2em;font-variant-numeric:tabular-nums}
#auth-email[readonly]{background:#f4eee5;color:var(--ink)}
#checkout-order-details>summary{display:none}
#checkout-page .orders-link{background:transparent;border:1px solid var(--line);color:var(--wine);box-shadow:none;min-height:44px}
@media(max-width:760px){
 html{scroll-padding-top:20px;-webkit-text-size-adjust:100%}
 body{font-size:16px}
 .wrap{width:calc(100% - 36px);max-width:100%;margin-inline:auto}
 main,section,article,.commerce-layout>*{min-width:0}
 img,svg{max-width:100%}
 button,a,input,select,textarea,summary{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
 button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--wine);outline-offset:4px}
 input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important;max-width:100%}
 .header{display:flex;align-items:center;justify-content:space-between;flex-wrap:nowrap;gap:8px;min-height:82px;height:auto;padding-block:14px}
 .header .brand{font-size:29px;flex:0 0 auto;letter-spacing:-1.5px}
 .header .brand>span{font-size:9px;margin-top:5px;letter-spacing:.3px}
 .header .account-nav{width:auto;min-width:0;justify-content:flex-end;gap:9px;flex-wrap:nowrap;margin-left:auto}
 .header .language-toggle{min-width:39px;min-height:44px;gap:2px;padding:6px 0}
 .header .language-toggle svg{width:18px;height:18px}
 .header .language-code{font-size:9px}
 .header .nav-login{font-size:11px;min-height:44px;padding:8px 0;white-space:normal;max-width:76px;line-height:1.4}
 .header .nav-unlock{font-size:10px;line-height:1.4;padding:12px 11px;min-height:44px;max-width:108px}
 .language-menu{left:auto!important;right:-100px;width:240px;max-width:calc(100vw - 36px)}
 .language-menu button{min-height:46px;font-size:14px}
 .hero{padding-top:22px;gap:8px}
 .hero-copy .eyebrow{letter-spacing:2.5px;font-size:10px;margin-bottom:22px}
 .hero h1{font-size:clamp(40px,11.5vw,56px);line-height:1.12;letter-spacing:-1.7px;margin-top:0}
 html[lang=zh-CN] .hero h1{font-size:clamp(38px,10.9vw,49px);line-height:1.2;letter-spacing:0}
 .hero .flourish{max-width:220px;margin-block:12px}
 .hero .lede{font-size:19px;line-height:1.65;max-width:330px;margin:14px auto 24px}
 .hero .button{min-height:52px;font-size:16px;padding:14px 24px;max-width:100%}
 .hero-art{width:calc(100% + 36px);margin:12px -18px 0;min-width:0}
 .chapter-inner{padding-block:36px;gap:22px}
 .chapter h2,.chapters-title,.section-title{font-size:34px;line-height:1.2}
 .chapter .lede,.chapter p{font-size:18px;line-height:1.75}
 .chapter ul{font-size:15px;line-height:1.8}
 .chapter .button,.closing .button{min-height:50px;max-width:100%;font-size:15px;padding:13px 20px}
 .closing{padding:40px 8px}.closing h2{font-size:32px;line-height:1.3}
 .footer{padding-block:28px;gap:18px;flex-wrap:wrap;text-align:center;justify-content:center}
 .footer-support{overflow-wrap:anywhere;font-size:13px}
 /* A single-column sheet keeps the form above the keyboard. */
 dialog.auth-dialog{width:calc(100% - 20px);max-width:520px;max-height:calc(100dvh - 24px);margin:auto;padding:0;border-radius:20px;overflow:auto;overscroll-behavior:contain}
 dialog::backdrop{background:#46352866;backdrop-filter:blur(3px)}
 .auth-layout,.birth-layout{display:block;min-height:0}
 .auth-visual,.birth-visual{display:none}
 #login .auth-panel,.auth-panel.birth-panel{padding:38px 22px 20px;justify-content:flex-start;min-width:0}
 #login .auth-panel>h2,.birth-panel h2{font-size:31px;line-height:1.2;letter-spacing:-.5px;margin:8px 0 16px}
 #login .auth-intro,.birth-panel .auth-intro{font-size:16px;line-height:1.7;margin-bottom:20px}
 .auth-close{width:44px;height:44px;top:7px;right:7px;font-size:26px;z-index:4}
 .auth-field{margin-bottom:17px}.auth-field label{font-size:13px}
 .auth-input-wrap{min-height:52px;border-radius:11px}
 .auth-input-wrap input{min-height:50px;padding-block:12px}
 #login .auth-submit,.birth-panel .auth-submit{min-height:52px;font-size:16px;line-height:1.4;padding:14px 16px}
 .demo-auth-tabs button{min-height:44px;font-size:14px}
 #google-login{min-height:50px;font-size:14px;padding:12px 14px}
 #login [data-birth-start]{min-height:44px;margin-bottom:8px}
 .auth-code-actions{font-size:13px;gap:10px;margin-top:-5px}
 .auth-preview-note,.birth-city-note{font-size:12px;line-height:1.7}
 .birth-date-trigger{min-height:50px;font-size:16px;max-width:100%}
 #birth-calendar{width:100%;max-width:100%;font-size:14px;padding:12px}
 .city-options{max-height:210px}.city-option{padding:14px 12px;min-height:48px}
 .birth-review-cards{grid-template-columns:minmax(0,1fr);gap:12px}
 .live-consent{font-size:13px}.live-consent input,.birth-unknown input{flex:0 0 20px;width:20px;height:20px}
 /* Readable report cards and touch-sized navigation. */
 .result-top{flex-wrap:wrap;gap:12px;padding-top:24px}
 .result-top h1,#result-heading{font-size:32px;line-height:1.25}
 .result-modules{display:flex;gap:8px;overflow-x:auto;max-width:100%;padding-bottom:8px;scroll-snap-type:x proximity}
 .result-modules button{flex:0 0 auto;min-height:44px;padding:10px 14px;font-size:13px;scroll-snap-align:start}
 .relationship-card{grid-template-columns:minmax(0,1fr);padding:22px 20px;gap:24px;border-radius:20px}
 .relationship-copy h2{font-size:34px;line-height:1.25;margin-block:14px}
 .relationship-summary{font-size:18px;line-height:1.8}.relationship-basis p{font-size:13px;line-height:1.8;overflow-wrap:anywhere}
 .relationship-art-frame{width:min(100%,290px);max-width:100%;margin-inline:auto;transform:none}
 .report-section{padding-top:32px;padding-bottom:16px}
 .report-section h1,.report-section>header h2,.report-section>h2{font-size:34px;line-height:1.25}
 .reading-panel{padding:22px 18px;border-radius:18px}
 .reading-panel>.reading-emblem.report-banner{width:calc(100% + 36px);margin:-22px -18px 24px}
 .reading-emblem.report-banner img{border-radius:17px 17px 0 0}
 .reading-grid{grid-template-columns:minmax(0,1fr);gap:24px}
 .reading-grid section{padding-block:22px}
 .reading-grid h2,html[lang=zh-CN] .reading-grid h2{font-size:25px;line-height:1.4}
 .reading-grid p,.live-module>.reading-intro,#future-page .future-excerpt{font-size:17px;line-height:1.85}
 .paid-reading{margin-top:24px;padding:24px 18px;border-radius:18px}
 .paid-reading>h2{font-size:28px;line-height:1.3}.paid-reading-section{padding-block:24px}
 .paid-reading-section h3{font-size:24px;line-height:1.4}
 .paid-reading-section p,.paid-reading-section .paid-summary{font-size:17px;line-height:1.9}
 .paid-access-detail{padding:10px 12px;font-size:12px;overflow-wrap:anywhere}
 .premium-unlock-card{padding:26px 18px}.premium-unlock-card h3{font-size:25px}
 .premium-unlock-card .button{width:100%;min-height:50px;font-size:15px;padding-inline:12px}
 .chart-explorer-content{padding:18px 12px}.chart-explorer>summary{min-height:56px;padding:15px;font-size:15px}
 .chart-view-tabs{justify-content:flex-start;gap:18px;overflow-x:auto;max-width:100%}
 .chart-view-tabs button{flex:0 0 auto;min-height:44px;font-size:14px}
 .chart-wheel-layout{grid-template-columns:minmax(0,1fr)}.chart-wheel-controls button{min-height:44px;padding:10px 14px}
 .chart-raw-table{min-width:450px}.chart-raw-section{overflow-x:auto;max-width:100%}
 .chart-point-readout{padding:18px}.chart-point-readout h4{font-size:23px}.chart-point-readout p{font-size:18px}
 /* Compact purchase flow: summary first, payment next, one clear main button. */
 .commerce-page{padding-top:18px;padding-bottom:calc(32px + env(safe-area-inset-bottom))}
 .commerce-page h1,#checkout-page h1{font-size:32px;line-height:1.2;margin:14px 0 18px}
 .commerce-lead{font-size:18px;line-height:1.7}
 .commerce-layout,#checkout-page .checkout-layout{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:18px}
 .plan-card{padding:20px 18px;gap:10px;border-radius:16px}.plan-card b{font-size:36px}.plan-card strong{font-size:20px}
 .benefits-panel{padding:24px 20px;border-radius:18px;min-width:0}
 #plan-continue{width:100%;min-height:52px;font-size:16px;padding-inline:16px}
 #checkout-page .order-price{font-size:40px}#checkout-page .order-panel{padding:0}
 #checkout-page #checkout-order-details{border:1px solid var(--line);border-radius:14px;background:#fffdf880;margin-top:18px}
 #checkout-order-details>.mobile-order-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;list-style:none;min-height:56px;padding:15px 16px;font:13px/1.5 var(--sans);cursor:pointer}
 #checkout-order-details>.mobile-order-heading::-webkit-details-marker{display:none}
 .mobile-order-heading>span:after{content:' ＋';font-size:17px;color:var(--wine)}
 #checkout-order-details[open]>.mobile-order-heading>span:after{content:' −'}
 #checkout-order-details>.mobile-order-heading>strong{white-space:nowrap;font-weight:500}
 #checkout-page #checkout-order-details .order-summary{padding:4px 16px 16px;margin:0;border:0;background:none}
 #checkout-page .order-product h2{font-size:21px}.order-includes>li>strong{font-size:16px}.order-includes>li>span{font-size:13px}
 #checkout-page .payment-panel{padding:23px 18px;border-radius:18px}
 #checkout-page .payment-panel h2{font-size:22px;margin-bottom:18px}
 #checkout-page .checkout-contact-row{gap:18px}#checkout-page .pay-field{font-size:13px}
 #checkout-page .payment-methods{grid-template-columns:minmax(0,1fr);margin-block:18px}
 #checkout-page .provider-choice{min-height:62px;padding:14px}.provider-preview{padding:16px;margin-block:14px}
 .provider-preview p{font-size:13px;line-height:1.7}.region-trigger{min-height:60px;padding:12px}
 .region-menu{max-height:min(40dvh,300px);overflow-y:auto}
 #checkout-status{font-size:13px;line-height:1.7;margin-top:18px;padding-top:14px}
 #checkout-page .payment-panel>.button{min-height:52px;font-size:16px;margin-top:18px}
 #checkout-page .payment-panel>.orders-link{min-height:44px;font-size:14px;margin-top:12px}
 .payment-result{padding:28px 18px;border-radius:18px;margin-top:12px}
 .payment-result h1{font-size:30px;line-height:1.3}.payment-result .commerce-lead{font-size:17px;line-height:1.8}
 #payment-order-details{font-size:12px;line-height:1.8;overflow-wrap:anywhere}
 .confirmation-summary{padding:4px 14px;font-size:13px}.confirmation-summary>div{gap:14px}
 #payment-view-reading{width:100%;min-height:50px}.result-seal{width:76px;height:76px;font-size:38px}
 #reading-loader{padding:88px 20px 32px}#reading-loader h1{font-size:29px}
 #reading-loader .loader-brand{left:20px;top:20px}#reading-loader .loader-scene{max-width:100%}
}
@media(max-width:359px){
 .wrap{width:calc(100% - 28px)}.header .brand{font-size:27px}.header .account-nav{gap:8px}
 .header .nav-unlock{display:none}.header .nav-login{font-size:12px;max-width:100px}
 .hero h1{font-size:40px}html[lang=zh-CN] .hero h1{font-size:37px}
 .hero .lede{font-size:18px}#login .auth-panel,.auth-panel.birth-panel{padding-inline:18px}
 .auth-code-actions{font-size:12px}.chart-view-tabs{gap:14px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media(max-height:500px) and (max-width:950px){
 dialog.auth-dialog{width:min(560px,calc(100% - 24px));max-height:calc(100dvh - 20px);overflow:auto}
 .auth-layout,.birth-layout{display:block;min-height:0}.auth-visual,.birth-visual{display:none}
 #login .auth-panel,.auth-panel.birth-panel{padding:28px 24px 20px}
}
/* Phone hero: compact copy and a centered view of the existing artwork. */
@media(max-width:760px){
 .header{min-height:72px;padding-block:10px}
 .hero{padding-top:14px;padding-bottom:12px;gap:0;min-height:0}
 .hero .hero-copy{padding:0;max-width:100%}
 .hero .hero-copy .eyebrow{font-size:9px;letter-spacing:2px;line-height:1.5;margin:0 0 13px}
 .hero h1{font-size:clamp(34px,9.8vw,41px);line-height:1.12;letter-spacing:-1px;margin:0}
 html[lang=zh-CN] .hero h1{font-family:'Songti SC','STSong','Noto Serif SC',serif;font-size:clamp(33px,9.2vw,38px);line-height:1.2;font-weight:500;letter-spacing:0}
 .hero .flourish{display:none}
 .hero .lede{font-size:17px;line-height:1.65;max-width:315px;margin:15px auto 18px}
 .hero .button{min-height:50px;font-size:15px;line-height:1.4;padding:14px 22px}
 .hero .hero-art{display:block;width:min(100%,290px);max-width:290px;height:auto;aspect-ratio:1;margin:12px auto 0;background-size:auto 100%;background-position:right center;background-repeat:no-repeat;mask-image:linear-gradient(to right,transparent,#000 5%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 97%,transparent),linear-gradient(to bottom,transparent,#000 4%,#000 96%,transparent);-webkit-mask-composite:source-in}
}
@media(max-width:760px) and (max-height:710px){
 .hero{padding-top:10px}
 .hero .hero-copy .eyebrow{margin-bottom:10px}
 .hero h1{font-size:36px}html[lang=zh-CN] .hero h1{font-size:34px}
 .hero .lede{font-size:16px;margin:12px auto 15px;line-height:1.6}
 .hero .hero-art{width:min(100%,255px);margin-top:8px}
}
@media(max-width:760px) and (max-height:620px){
 .header{min-height:64px;padding-block:7px}
 .hero .hero-copy .eyebrow{margin-bottom:8px}
 .hero h1{font-size:34px}html[lang=zh-CN] .hero h1{font-size:32px}
 .hero .lede{font-size:15.5px;margin:10px auto 12px}
 .hero .button{min-height:48px;font-size:14px;padding:12px 20px}
 .hero .hero-art{width:min(100%,225px);margin-top:6px}
}
@media(max-width:359px){.hero:before{left:-14px;right:-14px}}