:root{--ink:#f5eadb;--muted:#c6adab;--gold:#d6b47a;--gold-soft:#a67d52;--wine:#3b1b2d;--night:#170c18;--ease:cubic-bezier(.22,1,.36,1);color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;min-width:320px;min-height:100%;background:var(--night)}
body{font-family:"DM Sans",sans-serif;color:var(--ink);-webkit-font-smoothing:antialiased}
button,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed}
::selection{background:#bd895b;color:#190d18}
.app{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse 83% 52% at 50% 36%,#50253b 0%,#2d1629 48%,#180e1a 100%)}
.app:before{content:"";pointer-events:none;position:absolute;inset:0;z-index:-1;opacity:.2;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E")}
.atmosphere{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.moon-haze{position:absolute;width:min(96vw,560px);aspect-ratio:1;left:50%;top:10%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,#9e6a78 0%,#724354 20%,#502b40 39%,transparent 71%);filter:blur(35px);opacity:.37;animation:haze 9s ease-in-out infinite alternate}
.stars{position:absolute;inset:0;opacity:.65;background-image:radial-gradient(circle at 18% 22%,#ddc4a4 0 1px,transparent 1.8px),radial-gradient(circle at 79% 17%,#e1c8ae 0 1px,transparent 1.7px),radial-gradient(circle at 12% 66%,#d5b48a 0 1px,transparent 1.8px),radial-gradient(circle at 88% 69%,#d4a779 0 1px,transparent 1.8px),radial-gradient(circle at 31% 81%,#d9b990 0 .7px,transparent 1.4px),radial-gradient(circle at 71% 79%,#d9b990 0 .7px,transparent 1.4px)}
.masthead,.footer{position:relative;z-index:10;display:flex;align-items:center;justify-content:space-between;width:100%;padding-inline:clamp(24px,6vw,64px)}
.masthead{height:78px;padding-top:env(safe-area-inset-top);border-bottom:1px solid rgba(226,187,141,.12)}
.wordmark{text-decoration:none;color:var(--ink);font-family:"Italiana",Georgia,serif;font-size:21px;letter-spacing:.12em;white-space:nowrap}
.wordmark-star{display:inline-block;margin:0 .08em;color:var(--gold);font-family:Georgia,serif;font-size:.62em;vertical-align:.14em}
.masthead-side,.footer{font-size:9px;font-weight:600;letter-spacing:.17em;color:#d6b9aa}
.scene{position:relative;flex:1;width:min(100%,560px);min-height:660px;align-self:center}
.opening-copy,.stage-copy,.welcome-action,.question-form,.processing,.result{position:absolute;z-index:4;left:50%;width:calc(100% - 48px);max-width:430px;text-align:center;transform:translateX(-50%)}
.opening-copy{top:12%;transition:opacity .6s ease,transform .7s var(--ease)}
.celestial-mark{position:relative;width:134px;height:134px;margin:0 auto 19px}
.orbit{position:absolute;border:1px solid rgba(224,186,134,.6);border-radius:50%}.orbit-one{inset:11px}.orbit-two{inset:27px;border-color:rgba(224,186,134,.34)}
.celestial-mark:before,.celestial-mark:after{content:"";position:absolute;background:#d7b585}.celestial-mark:before{width:1px;height:157px;top:-12px;left:50%;opacity:.44}.celestial-mark:after{height:1px;width:157px;left:-12px;top:50%;opacity:.44}
.mark-moon{position:absolute;z-index:1;inset:38px;border-radius:50%;background:#e0c197;box-shadow:0 0 37px 10px rgba(238,201,158,.2),inset -11px -9px 14px rgba(99,55,62,.28)}
.mark-moon:after{content:"";position:absolute;left:17px;top:-5px;width:51px;height:63px;border-radius:50%;background:#49243b}
.mark-star{position:absolute;z-index:2;color:#e3c794;font-size:16px}.star-a{left:1px;top:28px}.star-b{right:0;bottom:19px}
h1,h2,.stage-copy,.question-form label{font-family:"Italiana",Georgia,serif;font-weight:400}
h1{margin:0;font-size:clamp(50px,12vw,75px);line-height:.99;letter-spacing:-.024em;text-wrap:balance}
h1 em{font-weight:400;color:#e8c7a6}
.opening-copy p{margin:20px auto 0;max-width:280px;color:#d8c0b8;font-size:13px;line-height:1.65;letter-spacing:.02em}
.welcome-action{bottom:15%;transition:opacity .4s,transform .5s var(--ease)}
.primary-button{display:flex;align-items:center;justify-content:space-between;gap:25px;width:100%;min-height:62px;padding:0 25px;border:1px solid #f3d6ae;border-radius:3px;background:linear-gradient(112deg,#e5c59a,#cda777 57%,#e8cca5);box-shadow:0 14px 35px rgba(19,6,18,.34);color:#301721;text-align:left;font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:transform .25s var(--ease),box-shadow .25s,opacity .25s}
.primary-button:hover:not(:disabled){transform:translateY(-3px);box-shadow:0 18px 38px rgba(11,4,11,.4)}
.primary-button:active:not(:disabled){transform:translateY(1px) scale(.99)}
.primary-button:disabled{opacity:.46;box-shadow:none}
.primary-button span{font-size:20px;font-weight:400;letter-spacing:0}
.welcome-action p{margin:23px 0 0;color:#bf9f99;font-size:9px;font-weight:600;letter-spacing:.22em}
.reading-table{position:absolute;inset:0;z-index:2;pointer-events:none}
.table-halo{position:absolute;left:50%;top:62%;width:76%;height:29%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse,rgba(208,159,117,.12),transparent 68%);opacity:0;transition:opacity .7s}
.deck{position:absolute;left:50%;top:61%;width:114px;height:180px;transform:translate(-50%,-30%) scale(.78);opacity:0;filter:drop-shadow(0 21px 25px rgba(6,2,8,.5));transition:top .85s var(--ease),opacity .5s,transform .8s var(--ease);perspective:700px}
.deck-depth,.deck-face{position:absolute;inset:0;border-radius:5px}.deck-depth{transform:translate(6px,7px);background:repeating-linear-gradient(0deg,#b8996f 0 1px,#503847 1px 3px);border:1px solid #a07969}
.deck-face{display:grid;place-items:center;overflow:hidden;border:5px solid #2e1a2d;background:radial-gradient(circle at center,#5b2e46,#2a172e 69%);outline:1px solid #d3a66d;outline-offset:-10px;box-shadow:inset 0 0 0 1px #d3a66d,inset 0 0 0 13px #321c31}
.deck-face:before,.deck-face:after{content:"";position:absolute;width:92px;height:92px;border:1px solid #b78f65;transform:rotate(45deg)}.deck-face:after{width:66px;height:66px;transform:rotate(0)}
.deck-sigil{color:#e1bf8f;font-size:48px;z-index:2}.deck-ring{position:absolute;width:54px;height:54px;border:1px solid #d7b284;border-radius:50%}
.spread{position:absolute;inset:0;pointer-events:none}
.card-slot{position:absolute;top:76%;left:50%;width:96px;aspect-ratio:169/290;padding:0;border:0;background:transparent;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.32) rotate(0);transform-origin:center center;transition:top .85s var(--ease),transform .85s var(--ease),opacity .5s ease,filter .4s;perspective:1100px;-webkit-tap-highlight-color:transparent}
.card-inner{position:absolute;inset:0;display:block;transform-style:preserve-3d;transition:transform .86s cubic-bezier(.2,.8,.2,1)}
.card-slot.flipped .card-inner{transform:rotateY(180deg)}
.card-back,.card-front{position:absolute;inset:0;display:block;border-radius:4px;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-shadow:0 14px 23px rgba(8,3,12,.45)}
.card-back{border:4px solid #c9a777;background:radial-gradient(circle,#66334d 0%,#30192e 73%);box-shadow:inset 0 0 0 2px #372139,inset 0 0 0 6px #b78b66,0 14px 23px rgba(8,3,12,.45)}
.card-back:before,.card-back:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(45deg);width:61%;aspect-ratio:1;border:1px solid #d2af7c}.card-back:after{width:42%;transform:translate(-50%,-50%) rotate(0)}
.back-moon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:34%;aspect-ratio:1;border:1px solid #e0bc8b;border-radius:50%}.back-moon:after{content:"";position:absolute;left:24%;top:-7%;width:100%;height:110%;background:#4c2640;border-radius:50%}
.back-star{position:absolute;color:#d4ae7b;font:15px Georgia,serif}.back-star.one{top:9%;left:50%;transform:translateX(-50%)}.back-star.two{bottom:8%;left:50%;transform:translateX(-50%)}
.card-front{transform:rotateY(180deg);border:4px solid #d2b286;background:#e9ddbd}.card-front img{display:block;width:100%;height:100%;object-fit:fill}.card-front:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 1px rgba(55,31,25,.38);pointer-events:none}
.stage-copy{top:12%;color:#f5eadb;font-size:36px;line-height:1.1;opacity:0;transition:opacity .5s,transform .5s var(--ease)}
.stage-copy small{display:block;margin-top:14px;color:#d0b1a4;font:500 10px "DM Sans",sans-serif;letter-spacing:.23em;text-transform:uppercase}
.question-form{top:55%;opacity:0;transform:translate(-50%,12px);transition:opacity .55s,transform .55s var(--ease)}
.question-form label{display:block;margin-bottom:18px;font-size:32px;line-height:1.06}
.question-wrap{position:relative;border:1px solid rgba(224,188,148,.45);background:rgba(24,12,24,.43);box-shadow:inset 0 0 20px rgba(15,5,15,.16)}
.question-wrap:focus-within{border-color:#edcfa8;box-shadow:0 0 0 3px rgba(215,178,127,.15)}
textarea{display:block;width:100%;height:100px;padding:18px 18px 26px;resize:none;border:0;outline:0;background:transparent;color:var(--ink);font-size:15px;line-height:1.5;caret-color:#dfbe91}
textarea::placeholder{color:#ad9290;opacity:1}
.question-count{position:absolute;right:13px;bottom:9px;color:#a88886;font-size:10px;font-variant-numeric:tabular-nums}
.decide-button{margin-top:14px}.form-error{min-height:19px;margin:10px 0 0;color:#f0c5bb;font-size:12px}
.processing{top:61%;color:#e6cba9;opacity:0;transition:opacity .5s}.processing p{font-family:"Italiana",Georgia,serif;font-size:26px;margin:8px 0}.processing-star{display:inline-block;font-size:23px;animation:turn 2.8s linear infinite}
.result{top:53%;opacity:0;transform:translate(-50%,12px);transition:opacity .7s,transform .7s var(--ease)}
.result-prelude{margin:0 0 2px;color:#d7b786;font-size:9px;font-weight:700;letter-spacing:.24em}
.result h2{margin:0;font-size:clamp(74px,19vw,106px);line-height:1;color:#f3e4d1;letter-spacing:-.028em}
.result-cards{margin:10px 0 0;color:#d9b790;font-family:"Italiana",Georgia,serif;font-size:23px}
.interpretation{max-width:310px;margin:11px auto 0;color:#dbc8be;font-size:13px;line-height:1.5}
.text-button{display:inline-flex;align-items:center;gap:12px;margin-top:22px;padding:9px 0;border:0;border-bottom:1px solid #bb936c;background:transparent;color:#e4c19b;font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;transition:color .2s,gap .2s}.text-button:hover{color:#fff0d9;gap:17px}.text-button span{font-size:18px;font-weight:400}
.footer{height:58px;padding-bottom:env(safe-area-inset-bottom);border-top:1px solid rgba(226,187,141,.12);font-size:9px;letter-spacing:.12em}
.footer span:last-child{letter-spacing:.025em;text-transform:none;font-weight:400}
button:focus-visible,.wordmark:focus-visible{outline:2px solid #f1d1a6;outline-offset:4px}

.app[data-stage="DEALING"] .opening-copy,.app[data-stage="SELECTING"] .opening-copy,.app[data-stage="QUESTION"] .opening-copy,.app[data-stage="DECIDING"] .opening-copy,.app[data-stage="REVEALING"] .opening-copy,.app[data-stage="RESULT"] .opening-copy{opacity:0;transform:translate(-50%,-25px);pointer-events:none}
.app:not([data-stage="WELCOME"]) .welcome-action{opacity:0;transform:translate(-50%,20px);pointer-events:none}
.app[data-stage="DEALING"] .deck,.app[data-stage="SELECTING"] .deck{opacity:1;transform:translate(-50%,-50%) scale(1)}
.app[data-stage="DEALING"] .deck{top:69%}.app[data-stage="SELECTING"] .deck{top:87%;transform:translate(-50%,-50%) scale(.72);opacity:.8}
.app[data-stage="DEALING"] .table-halo,.app[data-stage="SELECTING"] .table-halo{opacity:1}
.app[data-stage="DEALING"] .card-slot,.app[data-stage="SELECTING"] .card-slot{opacity:1;top:56%;transform:translate(calc(-50% + var(--deal-x)),calc(-50% + var(--deal-y))) rotate(var(--deal-r));pointer-events:auto}
.app[data-stage="DEALING"] .card-slot{pointer-events:none}
.app[data-stage="SELECTING"] .card-slot.selected{transform:translate(calc(-50% + var(--deal-x)),calc(-50% + var(--deal-y) - 15px)) rotate(var(--deal-r)) scale(1.055);filter:drop-shadow(0 0 16px rgba(232,187,132,.43))}
.app[data-stage="SELECTING"] .stage-copy{opacity:1;transform:translate(-50%,0)}
.app[data-stage="QUESTION"] .card-slot.selected,.app[data-stage="DECIDING"] .card-slot.selected,.app[data-stage="REVEALING"] .card-slot.selected,.app[data-stage="RESULT"] .card-slot.selected{top:25%;opacity:1;width:112px;transform:translate(calc(-50% + var(--reading-x)),-50%) rotate(var(--reading-r));pointer-events:none}
.app[data-stage="QUESTION"] .card-slot:not(.selected),.app[data-stage="DECIDING"] .card-slot:not(.selected),.app[data-stage="REVEALING"] .card-slot:not(.selected),.app[data-stage="RESULT"] .card-slot:not(.selected){top:82%;opacity:0;transform:translate(-50%,-50%) scale(.2)}
.app[data-stage="QUESTION"] .question-form,.app[data-stage="DECIDING"] .processing,.app[data-stage="RESULT"] .result{opacity:1;transform:translate(-50%,0)}
.app[data-stage="QUESTION"] .question-form{transition-delay:.44s}
.app[data-stage="DECIDING"] .card-slot.selected{animation:float 2.2s ease-in-out infinite alternate}
.app[data-stage="REVEALING"] .card-slot.selected{filter:drop-shadow(0 0 15px rgba(220,173,110,.35))}
.app[data-stage="RESULT"] .card-slot.selected{top:23%}
.app[data-stage="RESULT"] .result h2[data-decision="YES"]{color:#f7e5c2}.app[data-stage="RESULT"] .result h2[data-decision="NO"]{color:#ecc8c5}.app[data-stage="RESULT"] .result h2[data-decision="UNCLEAR"]{font-size:clamp(59px,15vw,78px);color:#d8d1e8}
@keyframes haze{to{transform:translateX(-50%) scale(1.14);opacity:.5}}@keyframes float{to{transform:translate(calc(-50% + var(--reading-x)),-56%) rotate(var(--reading-r))}}@keyframes turn{to{transform:rotate(360deg)}}
@media(max-width:430px){.masthead{height:65px}.masthead-side{font-size:8px;letter-spacing:.08em}.scene{min-height:calc(100svh - 119px)}.opening-copy{top:13%}.celestial-mark{width:122px;height:122px;margin-bottom:22px}.orbit-one{inset:9px}.orbit-two{inset:24px}.mark-moon{inset:35px}.mark-moon:after{left:14px;width:46px;height:57px}.welcome-action{bottom:13%}.stage-copy{top:12%;font-size:34px}.app[data-stage="DEALING"] .card-slot,.app[data-stage="SELECTING"] .card-slot{top:57%}.app[data-stage="SELECTING"] .deck{top:85%}.question-form{top:54%}.result{top:53%}.footer{height:54px}}
@media(max-height:740px){.scene{min-height:590px}.opening-copy{top:8%}.celestial-mark{transform:scale(.8);margin-bottom:-1px}.welcome-action{bottom:9%}.app[data-stage="QUESTION"] .card-slot.selected,.app[data-stage="DECIDING"] .card-slot.selected,.app[data-stage="REVEALING"] .card-slot.selected,.app[data-stage="RESULT"] .card-slot.selected{top:24%;width:99px}.question-form{top:50%}.result{top:48%}}
@media(min-width:700px){.scene{min-height:700px}.opening-copy{top:11%}.welcome-action{bottom:13%}.card-slot{width:105px}.app[data-stage="QUESTION"] .card-slot.selected,.app[data-stage="DECIDING"] .card-slot.selected,.app[data-stage="REVEALING"] .card-slot.selected,.app[data-stage="RESULT"] .card-slot.selected{width:128px}.stage-copy{top:10%}.question-form{top:57%}.result{top:56%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}