:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:#193c40;background:#f7f5ef}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #b77a25;outline-offset:3px}a{color:#146b73}.top{display:flex;align-items:center;justify-content:space-between;padding:18px max(24px,calc((100vw - 1160px)/2));border-bottom:1px solid #d9e2de}.brand{text-decoration:none;font-family:Georgia,serif;font-size:30px;font-weight:700}.mark{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#146b73;color:#f8dda3}nav{display:flex;gap:6px}nav a{min-width:44px;min-height:44px;display:grid;place-items:center;padding:8px;text-decoration:none;border-radius:12px}nav a[aria-current]{background:#e0efeb;font-weight:700}main{max-width:1160px;margin:auto;padding:36px 24px 80px}.hero{max-width:720px;margin-bottom:30px}.eyebrow{font-size:12px;letter-spacing:.15em;color:#146b73;font-weight:700}h1{font-family:Georgia,serif;font-size:clamp(38px,6vw,68px);line-height:1.05;margin:16px 0}h2{font-family:Georgia,serif}.hero p{font-size:19px;line-height:1.6;color:#4b6567}.layout{display:grid;grid-template-columns:minmax(0,760px) minmax(220px,1fr);gap:24px}.workspace,.result,.picker{background:#fff;border:1px solid #dce5df;border-radius:22px;box-shadow:0 12px 32px #1c4a4110;padding:28px}.tabs,.method,.actions,.checks{display:flex;flex-wrap:wrap;gap:12px}.tabs{margin-bottom:28px}.tabs button,.actions button{min-height:44px;border:1px solid #a4c4bd;border-radius:10px;background:#fff;color:#146b73;padding:10px 18px}.tabs button[aria-pressed=true]{background:#146b73;color:#fff}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.fields label{display:grid;gap:9px;font-weight:650}.fields input,.fields select{width:100%;min-height:48px;border:1px solid #98b3ad;background:#fff;color:#193c40;border-radius:10px;padding:10px 14px}.custom-fields{grid-template-columns:repeat(3,minmax(0,1fr))}.checks{margin:20px 0}.checks label,.method label{min-height:44px;display:flex;align-items:center;gap:8px}.checks input,.method input{width:20px;height:20px;accent-color:#146b73}fieldset{border:0;padding:0;margin:26px 0}legend{font-weight:700;margin-bottom:12px}.method label{border:1px solid #d2e0db;border-radius:12px;padding:10px 14px;flex:1;min-width:180px}.method label:has(input:checked){background:#e8f3ef;border-color:#146b73}.primary{min-height:52px;border:0;border-radius:12px;background:#146b73;color:#fff;font-weight:700;padding:12px 26px}.primary:hover{background:#0d565d}.error{color:#a73323;min-height:1.5em}.side{color:#4b6567;line-height:1.6}.ad{height:160px;display:grid;place-items:center;border:1px dashed #b8c7c1;border-radius:18px;color:#708581;font-size:14px}.side p{font-size:14px}#output,#today{margin-top:24px}.picker{text-align:center}.cards{display:flex;justify-content:center;gap:20px;flex-wrap:wrap}.cards button{background:none;border:0;border-radius:15px;padding:8px;min-width:150px;min-height:245px}.cards img{width:150px;height:220px;object-fit:contain}.cards span{display:block}.result-head{display:flex;justify-content:space-between;gap:12px;color:#4b6567;font-weight:700}.result-head small{font-weight:400}.reveal{display:flex;gap:24px;align-items:center;padding:22px 0}.reveal img{width:150px;height:230px;object-fit:contain}.reveal b{font-family:Georgia,serif;font-size:30px}.reveal p{line-height:1.6}.pools{display:grid;gap:18px}.pools small{display:block;color:#4b6567;margin-bottom:8px}.balls{display:flex;flex-wrap:wrap;gap:9px}.balls span{display:grid;place-items:center;min-width:50px;height:50px;padding:3px;border-radius:50%;background:#e7f2ef;font-weight:800;color:#146b73}.muted{color:#58716e;font-size:13px}.actions{margin-top:22px}#today>button{margin-top:10px;background:none;border:0;text-decoration:underline;color:#146b73;min-height:44px}footer{text-align:center;border-top:1px solid #d9e2de;padding:26px;color:#58716e;font-size:13px}@media(max-width:750px){.layout{grid-template-columns:1fr}.side{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ad{height:100%}.workspace,.result,.picker{padding:20px}}@media(max-width:520px){main{padding:26px 16px 60px}.top{padding:12px 16px}.brand{font-size:23px}.mark{width:35px;height:35px}nav a{padding:5px}.fields,.custom-fields{grid-template-columns:1fr}.side{display:block}.ad{height:90px}.reveal{align-items:flex-start}.reveal img{width:100px;height:155px}.reveal b{font-size:22px}.cards{gap:4px}.cards button{min-width:90px;min-height:150px}.cards img{width:90px;height:135px}.result-head{flex-direction:column}.balls span{min-width:43px;height:43px}}
.zodiac{display:grid;gap:8px;max-width:310px;margin:18px 0;font-weight:650}.zodiac select{min-height:48px;border:1px solid #98b3ad;border-radius:10px;background:#fff;padding:10px 14px;color:#193c40}
.footer-links{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;margin-bottom:16px}
.zodiac{display:block;max-width:none;margin:22px 0 16px;font-weight:650}.zodiac summary{min-height:44px;display:flex;align-items:center;cursor:pointer;color:#146b73}.zodiac select{width:min(100%,310px);margin:8px 0 0}.primary-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.secondary{min-height:52px;padding:12px 20px;border:1px solid #146b73;border-radius:12px;background:#fff;color:#146b73;font-weight:700}.secondary:hover{background:#e8f3ef}.side{display:block}.face{width:174px;max-width:36%;flex:none}.reveal .face img{display:block;width:100%;height:auto;aspect-ratio:928/1232;object-fit:contain;border-radius:12px}.face .image-fallback{display:grid;place-items:center;width:100%;aspect-ratio:928/1232;padding:10px;background:#e9f0ed;color:#146b73;text-align:center;border-radius:12px}.face .image-fallback[hidden]{display:none}.reveal>div:last-child{min-width:0}.reveal small{display:block;margin-top:8px;color:#58716e}.custom-balls span{border-radius:10px;padding:6px 10px;min-width:50px;max-width:100%;overflow-wrap:anywhere}.action-status{min-height:1em;color:#a73323;font-size:13px}@media(max-width:520px){.face{width:110px;max-width:38%}.primary-actions{display:grid;grid-template-columns:1fr}.primary-actions button{width:100%}.reveal{gap:14px}.reveal .face img{width:100%;height:auto}}
.reading{line-height:1.7;max-width:750px}.reading h3{font:700 16px system-ui,sans-serif;color:#146b73;margin:22px 0 7px}.reading p{margin:0 0 10px}.quote-block{background:#f7f5ef;border-left:3px solid #d7a65c;border-radius:0 14px 14px 0;padding:15px 20px;margin:18px 0}.quote-block h3{margin-top:0}.quote-block blockquote{font-family:Georgia,serif;font-size:clamp(20px,3vw,27px);line-height:1.55;margin:8px 0 16px;overflow-wrap:anywhere}.link-button{border:0;background:none;color:#146b73;text-decoration:underline;min-height:44px;padding:8px 12px}.picker{min-height:360px}.picker .cards{height:230px;align-items:flex-start;gap:16px;perspective:900px}.picker .cards button{position:relative;width:150px;height:230px;min-width:0;min-height:0;flex:none;transform:translateX(0) rotate(0);transition:transform 850ms cubic-bezier(.2,.7,.2,1),opacity 600ms ease,filter 400ms ease}.picker .cards button:disabled{cursor:default}.picker .cards button:not(:disabled):hover,.picker .cards button:not(:disabled):focus-visible{transform:translateY(-7px);filter:drop-shadow(0 6px 8px #d7a65c55)}.picker .card-inner{display:block;position:relative;width:100%;height:220px;transform-style:preserve-3d;transition:transform 560ms ease}.picker .card-back,.picker .card-front{position:absolute;inset:0;width:100%;height:100%;backface-visibility:hidden;border-radius:12px;overflow:hidden}.picker .card-back{object-fit:contain}.picker .card-front{transform:rotateY(180deg);background:#f7f5ef}.picker .card-front img{width:100%;height:100%;object-fit:contain}.picker .picked .card-inner{transform:rotateY(180deg)}.picker .other{opacity:.12;pointer-events:none}.picker.preparing .cards button:nth-child(1){transform:translateX(120px) rotate(-5deg)}.picker.preparing .cards button:nth-child(2){transform:rotate(2deg)}.picker.preparing .cards button:nth-child(3){transform:translateX(-120px) rotate(5deg)}.picker .card-number{display:block}.picker.revealing .picked{transform:scale(1.06);filter:drop-shadow(0 0 10px #d7a65c88)}.result{animation:result-appear 260ms ease-out}@keyframes result-appear{from{opacity:.65;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:520px){.picker .cards{gap:6px;height:165px}.picker .cards button{width:90px;height:150px}.picker .card-inner{height:135px}.picker.preparing .cards button:nth-child(1){transform:translateX(75px) rotate(-5deg)}.picker.preparing .cards button:nth-child(3){transform:translateX(-75px) rotate(5deg)}.picker{min-height:290px}.quote-block{padding:12px 14px}}@media(prefers-reduced-motion:reduce){.picker .cards button,.picker .card-inner,.result{transition:none!important;animation:none!important}}

:root{font-family:Arial,sans-serif;color:#173a3d;background:#f5f2e9}
:lang(zh){font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}
h1,h2,.reveal b,.quote-block blockquote{font-family:Georgia,serif}
:lang(zh) h1,:lang(zh) h2,:lang(zh) .reveal b,:lang(zh) .quote-block blockquote{font-family:"Noto Serif SC","Songti SC",SimSun,serif}
.workspace,.result,.picker{background:#fffefa;border-color:#d4dbd2;box-shadow:0 8px 24px #173a3d12}
.top{background:#fffefa}.brand img{display:block;max-width:170px;height:auto}
.primary{background:#24575b}.primary:hover{background:#173a3d}
.zodiac-control{margin:20px 0}.zodiac-control>.secondary{min-height:48px}.zodiac-options{margin-top:10px}.zodiac-options select{min-height:48px;max-width:310px;width:100%;border:1px solid #98b3ad;border-radius:10px;padding:8px;background:#fff}
.picker{overflow:hidden;min-height:325px}.picker .cards{--card-w:104px;--step:71px;display:flex;flex-wrap:nowrap;gap:0;justify-content:center;align-items:center;width:100%;height:190px;margin:12px auto 0;padding:24px 0 8px;overflow:visible}
.picker .cards button{width:var(--step);min-width:var(--step);height:145px;min-height:145px;padding:0;flex:none;transform:none!important;filter:none;position:relative;margin:0;z-index:1}
.picker .cards button:first-child{width:var(--card-w);min-width:var(--card-w)}
.picker .card-inner{width:var(--card-w);height:145px;transform-origin:center;transition:transform 460ms cubic-bezier(.2,1.45,.34,1)}
.picker .card-back,.picker .card-front,.picker .card-front img{width:var(--card-w);height:145px;object-fit:contain}
.picker .cards button:hover,.picker .cards button:focus-visible{z-index:5!important}
.picker .cards button:not(:disabled):hover .card-inner,.picker .cards button:not(:disabled):focus-visible .card-inner{transform:translateY(-34px) scale(1.28)}
.picker .card-number{position:absolute;bottom:-16px;left:0;width:var(--step);font-size:12px}
.picker.preparing .cards button{opacity:.7}
.picker.preparing .card-inner{transform:translateY(5px) rotate(-3deg)}
.picker.revealing .picked{z-index:8!important}
.picker.revealing .picked .card-inner{transform:translateY(-30px) rotateY(180deg) scale(1.28)}
.picker .picked .card-inner{transform:translateY(-30px) rotateY(180deg) scale(1.28)}
.picker .other{opacity:.36}
.reveal{align-items:flex-start;gap:28px}.art-trigger{display:block;width:min(420px,48%);padding:0;background:none;border:0;flex:none}.art-trigger img{width:100%;height:auto;aspect-ratio:928/1232;object-fit:contain;border-radius:14px}.reversed-art{transform:rotate(180deg)}.card-identity{padding-top:10px}.orientation{display:inline-block;margin:16px 0;padding:6px 12px;border:1px solid #b58b50;border-radius:999px}.card-identity small{display:block}.traditional{padding:18px 22px;background:#f5f2e9;border-radius:16px}.traditional h3{margin-top:0}.traditional .keywords{font-weight:700}.traditional details{border-top:1px solid #d4dbd2;padding-top:10px}.traditional summary{cursor:pointer;color:#24575b}
.pool{padding:15px 18px;border:1px solid #d4dbd2;border-radius:14px;background:#fffefa}.pool-head{font-weight:700;margin-bottom:14px;color:#24575b}.pool+.pool{margin-top:4px}
#today{border:1px solid #d4dbd2;border-radius:16px;padding:12px 18px;background:#fffefa}#today>summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:700}#today .result{margin-top:16px}
#overlay[hidden]{display:none}#overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center}.overlay-backdrop{position:absolute;inset:0;background:#173a3dc9}.overlay-panel{position:relative;width:min(96vw,900px);max-height:calc(100dvh - 24px);display:flex;flex-direction:column;background:#fffefa;border-radius:18px;overflow:hidden}.overlay-panel>header,.overlay-panel>footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 18px;background:#fffefa;flex:none}.overlay-panel>header button{min-height:44px;border:1px solid #24575b;border-radius:10px;background:#fff;padding:8px 16px}.overlay-panel>footer{justify-content:center;flex-wrap:wrap;padding-bottom:calc(12px + env(safe-area-inset-bottom))}.overlay-panel>footer:empty{display:none}.overlay-media{min-height:0;overflow:auto;text-align:center;padding:14px}.overlay-art{display:block;width:min(100%,650px);height:auto;margin:auto}.preview-zoom{display:block;border:0;background:none;padding:0;margin:auto;cursor:zoom-in;min-width:100%}.preview-img{display:block;width:min(100%,430px);height:auto;margin:auto}.preview-img.zoomed{width:170%;max-width:none}.overlay-open{overflow:hidden}
@media(max-width:520px){.reveal{display:block}.art-trigger{width:min(300px,100%);margin:auto}.card-identity{text-align:center}.picker{padding:18px 8px;min-height:280px}.picker .cards{--card-w:78px;--step:50px;height:140px}.picker .cards button{height:108px;min-height:108px}.picker .card-inner,.picker .card-back,.picker .card-front,.picker .card-front img{height:108px}.picker .cards button:not(:disabled):hover .card-inner,.picker .cards button:not(:disabled):focus-visible .card-inner{transform:translateY(-22px) scale(1.16)}.overlay-panel{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}}
@media(max-width:350px){.picker .cards{--card-w:64px;--step:49px;height:122px}.picker .cards button{height:88px;min-height:88px}.picker .card-inner,.picker .card-back,.picker .card-front,.picker .card-front img{height:88px}.picker .card-number{bottom:-12px}}
@media(prefers-reduced-motion:reduce){.picker .card-inner,.result{transition:none!important;animation:none!important}}


@media(max-width:520px){.picker{width:100vw;margin-left:calc((100% - 100vw)/2);padding-left:0;padding-right:0}.picker .cards{--step:50px}}
@media(max-width:350px){.picker .cards{--step:49px}}

@media(max-width:350px){.top{gap:4px;padding-left:8px;padding-right:8px}.brand img{width:130px}.top nav{gap:0}.top nav a{min-width:39px;padding:4px}}
.preview-img[data-kind=full]{width:430px;max-width:none}.preview-img.zoomed{width:170%!important}.overlay-media{overscroll-behavior:contain}
.preview-img[data-kind=full].zoomed{width:731px!important}
.picker .cards.reflow{display:grid;grid-template-columns:repeat(5,minmax(48px,1fr));gap:12px;height:auto;justify-items:center;max-width:420px}.picker .cards.reflow button,.picker .cards.reflow button:first-child{width:100%;min-width:0;margin:0}.picker .cards.reflow .card-inner{width:var(--card-w)}.picker:has(.cards.reflow){min-height:0}@media(min-width:351px) and (max-width:520px){.picker .cards.reflow{grid-template-columns:repeat(6,minmax(48px,1fr));gap:8px}}

/* 1.2.1 UI refinement: canvas export intentionally unchanged. */
.hero h1{font-weight:500;line-height:1.18;max-width:760px;font-size:clamp(34px,5vw,56px)}
:lang(zh) .hero h1 span{display:block;white-space:nowrap}
.hero p{max-width:680px;font-size:clamp(16px,2vw,18px);line-height:1.65}
.fields label{font-size:14px;font-weight:500}
.fields input,.fields select,.zodiac-options select{font-size:16px;font-weight:400}
.tabs button,.secondary,.actions button,.zodiac-control>.secondary{font-weight:500}
.primary{font-weight:600}
.picker{padding-left:0;padding-right:0}
.picker .cards:not(.reflow){padding-left:0;padding-right:calc(var(--card-w) - var(--step));}
.picker .cards{--card-w:104px;--step:70px;--card-h:145px}
.picker .cards button{height:var(--card-h);min-height:var(--card-h)}
.picker .card-inner,.picker .card-back,.picker .card-front,.picker .card-front img{height:var(--card-h)}
.picker .card-number{display:none!important}
.picker .cards.reflow{padding-left:0;padding-right:0}
.result-main{display:grid;grid-template-columns:minmax(280px,420px) minmax(0,1fr);gap:34px;align-items:start;margin-top:18px}
.result-main .art-trigger{width:100%;max-width:420px}
.result-primary{min-width:0}
.card-identity{padding-top:0}
.card-title-row{display:flex;align-items:center;flex-wrap:wrap;gap:10px}
.card-title-row b{font-size:clamp(30px,3vw,34px);font-weight:600;line-height:1.25}
.card-title-row .orientation{font-size:14px;line-height:1.2;margin:0;padding:5px 10px;font-weight:500}
.current-keywords{font-size:14px;color:#50696a;margin:7px 0 0;line-height:1.5}
.quick-numbers{margin-top:20px}
.quick-heading{font-size:15px;font-weight:600;margin-bottom:10px}
.quick-groups{display:flex;flex-wrap:wrap;gap:10px}
.quick-group{display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid #d4dbd2;border-radius:12px;background:#fffefa}
.quick-group span{display:grid;place-items:center;min-width:34px;height:34px;padding:0 5px;border-radius:8px;background:#e7f2ef;color:#24575b;font-size:15px;font-weight:600}
.quick-more{font-size:13px;margin:8px 0 0;color:#50696a}
.quick-more a{font-weight:500}
.meaning-message{margin-top:20px}
.meaning-message .traditional{padding:16px 18px 8px}
.meaning-message .traditional h3,.quote-block h3,.reflection h3{font:500 15px Arial,sans-serif;color:#24575b;margin:0 0 8px}
:lang(zh) .meaning-message .traditional h3,:lang(zh) .quote-block h3,:lang(zh) .reflection h3{font-family:"Noto Sans SC","Microsoft YaHei",sans-serif}
.meaning-message .traditional p,.reflection p{font-size:16px;font-weight:400;line-height:1.65;margin:0 0 12px}
.meaning-message .traditional details{font-size:14px;color:#50696a;border:0;padding-top:0}
.meaning-message .traditional details summary{font-size:14px;font-weight:400}
.meaning-message .traditional details p{margin-top:8px}
.quote-block{margin:0;background:#f5f2e9;border-left:3px solid #b58b50;border-radius:0 0 14px 14px;padding:12px 18px 16px}
.quote-block blockquote{font-size:clamp(22px,2.4vw,26px);font-weight:400;line-height:1.5;margin:0}
.message-action{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;margin-top:14px}
.message-action .secondary{min-height:46px}
.message-action small{font-size:13px;color:#50696a}
.reflection{max-width:680px;margin-top:28px}
.reflection .small-action{margin-top:16px;border-left:2px solid #d4dbd2;padding-left:15px}
.reflection .small-action h4{font-size:14px;font-weight:500;color:#50696a;margin:0 0 7px}
.result-numbers{margin-top:28px;padding-top:24px;border-top:1px solid #d4dbd2;scroll-margin-top:24px}
.result-numbers h2{font-size:clamp(24px,3vw,32px);font-weight:500;margin:0 0 16px}
.result-numbers .actions{margin-top:18px}
@media(max-width:960px){.picker{width:100vw;margin-left:calc((100% - 100vw)/2)}.picker .cards{--step:50px}}
@media(min-width:961px) and (max-width:1200px){.picker .cards{--step:64px}}
@media(max-width:700px){.picker .cards{--card-w:74px;--step:48px;--card-h:104px}.result-main{grid-template-columns:1fr;gap:20px}.result-main .art-trigger{width:min(300px,100%);margin:auto}.result-primary{max-width:680px}.card-identity{text-align:left}.quick-numbers{margin-top:16px}}
@media(min-width:431px) and (max-width:500px){.picker .cards{--card-w:70px;--card-h:98px}}
@media(min-width:388px) and (max-width:430px){.picker .cards{--card-w:73px;--card-h:103px}}
@media(min-width:351px) and (max-width:387px){.picker .cards{--card-w:54px;--card-h:78px}}
@media(max-width:350px){.picker .cards{--card-w:63px;--step:48px;--card-h:88px}.hero h1{font-size:33px}}
@media(max-width:700px){.picker .cards button,.picker .card-inner,.picker .card-back,.picker .card-front,.picker .card-front img{height:var(--card-h);min-height:var(--card-h)}.picker .cards:not(.reflow){height:calc(var(--card-h) + 36px)}.quick-group span{min-width:32px;height:32px;font-size:14px}}

.art-trigger img[hidden]{display:none}.art-trigger .image-fallback{display:grid;place-items:center;min-height:300px;padding:20px;background:#e7efea;color:#24575b;border-radius:14px}.art-trigger .image-fallback[hidden]{display:none}

/* 1.2.2: use the document content box, which can be narrower than 100vw when a classic scrollbar is present. */
@media(max-width:960px){
  .picker{width:calc(100% + 48px);margin-left:-24px;overflow:visible}
  .picker .cards.reflow .card-inner{width:min(var(--card-w),100%)}
  .picker .cards.reflow .card-back,.picker .cards.reflow .card-front,.picker .cards.reflow .card-front img{width:100%}
}
@media(max-width:520px){
  .picker{width:calc(100% + 32px);margin-left:-16px}
}
@media(max-width:350px){.picker .cards{--card-w:55px;--card-h:78px}}
@media(min-width:351px) and (max-width:387px){.picker .cards{--card-w:47px;--card-h:72px}}
@media(min-width:388px) and (max-width:430px){.picker .cards{--card-w:66px;--card-h:94px}}
@media(min-width:431px) and (max-width:500px){.picker .cards{--card-w:63px;--card-h:92px}}
.picker .cards button:first-child .card-inner{transform-origin:left center}
.picker .cards button:last-child .card-inner{transform-origin:right center}
.picker .cards button:focus-visible{outline-offset:-3px}