:root{--ink:#12171d;--ink2:#1a2028;--ivory:#ece6d9;--ivory2:#c3c2bb;--metal:#b7a57f;--metal2:#75663f;--line:#ece6d926;
 --serif:"Cormorant Garamond","Noto Serif SC",Georgia,serif;--zh:"Noto Serif SC","Cormorant Garamond",serif}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--ink);-webkit-text-size-adjust:100%}
body{font:400 19px/1.45 var(--serif);color:var(--ivory);background:var(--ink);overflow-x:hidden}
html[lang=zh] body{font-family:var(--zh);font-size:16px;font-weight:300;line-height:1.7}
img{display:block;max-width:100%}a{color:inherit;text-decoration:none}i,em{font-style:normal}
.brand{font:400 15px/1 var(--zh);letter-spacing:.32em;color:var(--ivory)}
.top{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:22px 24px}
.lang{font:400 13px/1 var(--zh);letter-spacing:.08em;color:var(--ivory);background:none;border:0;padding:8px 0;display:flex;gap:8px;cursor:pointer}
.lang .sl{opacity:.35}.lang .on-zh{opacity:.55}html[lang=zh] .lang .on-zh{opacity:1}html[lang=zh] .lang .on-en{opacity:.55}

.hero{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink)}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(#12171d99 0,#12171d1f 28%,#12171d33 55%,#12171deb 100%)}
.heroCopy{position:absolute;z-index:2;left:24px;right:24px;bottom:56px;animation:fade 2.4s ease-out both}
.hero h1{font:400 clamp(38px,11vw,68px)/1.08 var(--serif);letter-spacing:.005em}
html[lang=zh] .hero h1{font:300 clamp(32px,9.4vw,54px)/1.3 var(--zh);letter-spacing:.14em}
.quiet{display:inline-block;margin-top:22px;font-size:17px;letter-spacing:.06em;color:var(--ivory);padding-bottom:5px;border-bottom:1px solid var(--metal);transition:color .8s}
.quiet:hover{color:var(--metal)}
html[lang=zh] .quiet{font-size:14px;letter-spacing:.16em}
@keyframes fade{from{opacity:0}}

.row{padding:72px 0 60px;border-top:1px solid var(--line);scroll-margin-top:0}
.row>*,.duo>*,.how>*,.faq>*{opacity:0;transition:opacity 1.6s ease}
.seen>*{opacity:1}
.rh{padding:0 24px 30px}
h2{font:400 34px/1.12 var(--serif)}
html[lang=zh] h2{font:300 26px/1.3 var(--zh);letter-spacing:.14em}
.rh p{margin-top:8px;font-size:18.5px;color:var(--ivory2)}
html[lang=zh] .rh p{font-size:15px}
.track{display:flex;gap:18px;padding:0 24px;overflow-x:auto;scroll-snap-type:x proximity;scroll-padding-left:24px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.card{flex:none;display:flex;flex-direction:column;scroll-snap-align:start}
:root{--plate:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23b7a57f'%3E%3Cpath d='M.5.5h59v59H.5z'/%3E%3Cpath d='M10.5 5.5H49.5V10.5H54.5V49.5H49.5V54.5H10.5V49.5H5.5V10.5H10.5Z'/%3E%3C/g%3E%3Cg fill='%23b7a57f'%3E%3Cpath d='M8 5.8l2.2 2.2L8 10.2 5.8 8zM52 5.8l2.2 2.2-2.2 2.2L49.8 8zM8 49.8l2.2 2.2L8 54.2 5.8 52zM52 49.8l2.2 2.2-2.2 2.2-2.2-2.2z'/%3E%3C/g%3E%3C/svg%3E")}
/* frames: each row has its own */
.ph{position:relative;display:block;width:100%}
.im{position:absolute;inset:var(--in);display:block;overflow:hidden;background:var(--ink2)}
.im img{width:100%;height:100%;object-fit:cover}
#readings .card{width:232px}#tarot .card{width:152px}#ziwei .card{width:192px}#soon .card{width:160px}

.f-read{aspect-ratio:2/3;--in:11px}
.f-read:after{content:"";position:absolute;inset:0;border:20px solid transparent;border-image:var(--plate) 20 stretch;pointer-events:none}
.mot{position:absolute;z-index:2;left:50%;bottom:-8px;width:34px;height:22px;margin-left:-17px;padding:0 6px;background:var(--ink);fill:none;stroke:var(--metal);stroke-width:1;stroke-linecap:round;stroke-linejoin:round}

.f-tar{aspect-ratio:3/5;--in:5px;background:#0b0f14;border:1px solid var(--metal)}
.f-tar:after{content:"";position:absolute;inset:10px;border:1px solid #d8c69cb8;pointer-events:none}

.f-zw{aspect-ratio:2/3;--in:3.74% 5.6%}
.pal{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--metal2);stroke-width:.5;pointer-events:none}

.f-soon{aspect-ratio:3/4;--in:5px;border:1px solid #ece6d94d}
.f-soon .im img{filter:saturate(.8)}
.seal{position:absolute;z-index:2;right:-1px;bottom:-1px;width:24px;height:24px;display:grid;place-items:center;font:400 12.5px/1 var(--zh);color:var(--metal);background:var(--ink);border:1px solid var(--metal)}

.panel{display:flex;flex-direction:column;scroll-margin-top:24px}
.panel .ph{aspect-ratio:1/1.12}
.plq{position:relative;display:block;margin-top:14px;padding:22px 24px 24px;text-align:center}
.plq:after{content:"";position:absolute;inset:0;border:20px solid transparent;border-image:var(--plate) 20 stretch;pointer-events:none}
.plq b{display:block;font:400 28px/1.15 var(--serif)}
.plq small{display:block;margin-top:4px;font-size:17.5px;line-height:1.35;color:var(--ivory2)}
html[lang=zh] .plq b{font:300 22px/1.3 var(--zh);letter-spacing:.12em}
html[lang=zh] .plq small{font-size:14.5px;line-height:1.7}
.card small{margin-top:18px;font:400 14px/1.2 var(--serif);letter-spacing:.14em;text-transform:uppercase;color:var(--metal)}
html[lang=zh] .card small{font:400 12.5px/1.3 var(--zh);letter-spacing:.14em}
.card b{margin-top:6px;font:500 23px/1.15 var(--serif)}
html[lang=zh] .card b{font:400 19px/1.35 var(--zh);letter-spacing:.08em}
.card em{margin-top:4px;font-size:17.5px;line-height:1.3;color:var(--ivory2)}
html[lang=zh] .card em{font-size:14.5px;line-height:1.6}
.row .card b{overflow-wrap:break-word}
#tarot .card b,#soon .card b{font-size:20px}#tarot .card em,#soon .card em{font-size:16px}#tarot .card small,#soon .card small{font-size:12.5px;letter-spacing:.12em}
#ziwei .card b{font-size:21.5px}#ziwei .card em{font-size:16.5px}
html[lang=zh] #tarot .card b,html[lang=zh] #soon .card b{font-size:17px}html[lang=zh] #tarot .card em,html[lang=zh] #soon .card em{font-size:13.5px}html[lang=zh] #tarot .card small,html[lang=zh] #soon .card small{font-size:11.5px}
.rule{position:relative;height:1px;margin:30px 24px 0;background:var(--line)}
.rule i{position:absolute;top:0;height:1px;background:var(--metal);transition:left .3s linear}

.ivory{background:var(--ivory);color:var(--ink);border-top:0}
.ivory .rh p,.ivory .card em{color:#4c463b}
.ivory .card small{color:var(--metal2)}
.ivory .rule{background:#12171d24}.ivory .rule i{background:var(--metal2)}

.duo{display:grid;gap:52px;padding:72px 24px;border-top:1px solid var(--line)}
.panel{display:flex;flex-direction:column;scroll-margin-top:24px}

.how{padding:72px 24px}
.how ol{list-style:none;counter-reset:s;margin-top:26px}
.how li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;padding:18px 0;border-top:1px solid #12171d2e}
.how li:before{content:counter(s,upper-roman);grid-row:span 2;font-size:17px;color:var(--metal2);line-height:1.5}
.how b{font-weight:500;font-size:21px;line-height:1.3}
html[lang=zh] .how b{font:400 17px/1.5 var(--zh)}
.how span{font-size:18px;color:#4c463b;line-height:1.35}
html[lang=zh] .how span{font-size:15px;line-height:1.7}

.faq{padding:72px 24px}
.faq h2{margin-bottom:24px}
details{border-top:1px solid var(--line);padding:16px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-size:19.5px;line-height:1.3;list-style:none;display:flex;justify-content:space-between;gap:16px}
html[lang=zh] summary{font-size:15.5px}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";color:var(--metal);font-weight:300}
details[open] summary:after{content:"\2212"}
details p{margin-top:8px;color:var(--ivory2);font-size:18px}
html[lang=zh] details p{font-size:15px}
.foot{padding:44px 24px 56px;border-top:1px solid var(--line);color:var(--ivory2);font-size:16px;display:grid;gap:10px}
.links{display:flex;gap:22px;flex-wrap:wrap;font-size:15.5px}
@media (min-width:760px){
  #readings .card{width:262px}#tarot .card{width:172px}#ziwei .card{width:216px}#soon .card{width:180px}
  h2{font-size:40px}html[lang=zh] h2{font-size:29px}
  .track{gap:24px}
  .row{padding:96px 0 80px}.duo{padding-top:96px;padding-bottom:96px;gap:48px}.how,.faq{padding-top:96px;padding-bottom:96px}
  .top{padding:26px 48px}.heroCopy{left:48px;bottom:72px}
  .rh,.how,.faq{padding-left:max(48px,calc(50vw - 520px));padding-right:max(48px,calc(50vw - 520px))}
  .track{padding-left:max(48px,calc(50vw - 520px));padding-right:48px;scroll-padding-left:max(48px,calc(50vw - 520px))}
  .rule{margin-left:max(48px,calc(50vw - 520px));margin-right:max(48px,calc(50vw - 520px))}
  .duo{grid-template-columns:1fr 1fr;padding-left:max(48px,calc(50vw - 520px));padding-right:max(48px,calc(50vw - 520px))}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}.row>*,.duo>*,.how>*,.faq>*{opacity:1}}