/* A quiet card table: near-black space, colored light and silver stars. */
:root{color-scheme:dark;--bg:#07080b;--surface:#12161b;--ink:#e5e9ec;--muted:#a5b0ba;--gold:#bec8cb;--line:#a0b2bb30}
body{background:var(--bg);isolation:isolate}.ambient{position:fixed;inset:-10%;pointer-events:none;z-index:-1;overflow:hidden;opacity:1;transition:opacity 1.5s ease}.ambient i{position:absolute;display:block;width:52vw;height:49vw;max-width:790px;max-height:790px;min-width:340px;min-height:340px;border-radius:48%;filter:blur(80px);opacity:.19;background:radial-gradient(ellipse at 32% 40%,#64889b 0%,#3b5360 38%,#25313a55 67%,transparent 78%);animation:table-light-one 32s ease-in-out infinite alternate;will-change:transform}.ambient i:nth-child(1){left:-15%;top:-6%}.ambient i:nth-child(2){right:-12%;top:16%;width:48vw;height:50vw;opacity:.14;background:radial-gradient(ellipse at 48% 40%,#a5977d 0%,#66777b88 38%,transparent 75%);animation:table-light-two 43s ease-in-out infinite alternate}.ambient i:nth-child(3){left:22%;bottom:-48%;opacity:.21;animation:table-light-three 38s ease-in-out infinite alternate}
@keyframes table-light-one{from{transform:translate(-3%,0%) scale(.97);opacity:.15}to{transform:translate(12%,8%) scale(1.08);opacity:.24}}@keyframes table-light-two{from{transform:translate(5%,-3%) scale(1.02);opacity:.11}to{transform:translate(-10%,6%) scale(.96);opacity:.2}}@keyframes table-light-three{from{transform:translate(0%,-4%) scale(.98)}to{transform:translate(-7%,-11%) scale(1.08)}}
body[data-stage=draw] .ambient{opacity:.72}body[data-stage=result] .ambient{opacity:.4}body[data-stage=ritual] .ambient{opacity:1.25}.brand{color:#bcc4c4;letter-spacing:.05em}.brand>span{color:#b2bec4}.quiet-button,.icon-button{color:#a4adb1}.quiet-button:hover{color:#e7e3d9}.icon-button:hover{background:#bac6ca0b}.page-footer .quiet-button{color:#808d94;font-size:12px}.card-inner{display:block}
.opening-card{border-color:#88949c;background:#263139;box-shadow:0 14px 35px #0005;border-radius:5px}.opening-card.c1{background:#202b33;transform:rotate(-12deg) translate(-19px,2px)}.opening-card.c2{background:#2d3940;transform:rotate(11deg) translate(18px,2px)}.opening-card.c3{background:linear-gradient(145deg,#334049,#1c252d);transform:rotate(-1deg)}.opening-card:before{border-color:#b6c0bc47;border-radius:2px}.opening-card:after{border-color:#c0c7c325}.opening-card>span{color:#d8d6c8}.opening-card>i:before,.opening-card>i:after{color:#a7b0ad}.question-stage h1{letter-spacing:.015em;font-weight:400}.question-input{border-color:#919c9b5c}.question-input:focus-within{border-color:#bbc2be}.question-input textarea::placeholder{color:#879297}.arrow-button{color:#c3cccd;border-color:#9aa8aa50}.arrow-button:hover{background:#a9bcc915}.price-note{font-size:12px;color:#858f94;margin:24px 0 0}.input-error{color:#d6a897}.recommendation-heading{color:#909ca1}.spread-mini i{border-color:#a3b0b1;background:#8da3b115;border-radius:2px}.primary-button{background:#deddd3;color:#252c31;border-color:transparent;font-weight:400;border-radius:5px}.primary-button:hover{background:#f0ece0}.recommendation .primary-button{min-height:49px}.secondary-button{border-color:#9aa7ad4a;color:#b5c0c2;border-radius:5px}.secondary-button:hover{background:#9ab1c00e}.page-count{font-size:12px;color:#84939b;margin-left:7px}
/* The interlude belongs to the deck: a restrained tremor and a moving halo. */
.ritual-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:35px 24px 80px;min-height:calc(100svh - 152px);text-align:center;isolation:isolate}.ritual-question{font:20px/1.8 var(--serif);color:#aeb9ba;max-width:570px;margin:0 0 52px;overflow-wrap:anywhere}.ritual-field{position:relative;width:290px;height:270px;display:grid;place-items:center;margin:0 0 31px;isolation:isolate}.ritual-aura{position:absolute;inset:-25px -42px;border-radius:50%;background:radial-gradient(ellipse at 45% 45%,#789aa331,#c6c0a91a 39%,#7b9ba711 57%,transparent 73%);filter:blur(23px);z-index:-1}.ritual-ripple{position:absolute;width:156px;height:243px;border:1px solid #b9c9cb2e;border-radius:50%;z-index:-1;opacity:0;transform:scale(.84)}.ritual-deck{position:relative;width:114px;height:188px;perspective:800px;transform-origin:center}.ritual-card{position:absolute;inset:0;width:100%;height:100%;left:0;top:0;transform-origin:center}.ritual-card:nth-child(1){transform:translate(-5px,5px) rotate(-5deg)}.ritual-card:nth-child(2){transform:translate(5px,2px) rotate(5deg)}.ritual-card.c3{transform:none}.ritual-stage h1{font:25px var(--serif);font-weight:400;margin:0 0 23px;letter-spacing:.035em;color:#d0d5ce}.ritual-controls{display:flex;gap:25px;align-items:center;justify-content:center}.ritual-controls .quiet-button{font-size:14px}.ritual-controls .secondary-button{padding:11px 26px;min-height:44px}body[data-stage=ritual] .page-footer{visibility:hidden}
.draw-heading>p:first-child{color:#b3bcbd}.draw-heading>p:last-child{color:#919da1}.card-back{background:linear-gradient(135deg,#34414b,#1e2830);border-color:#c1c5bd;color:#d5d8cd}.card-back:before{border-color:#adb9b85c;border-radius:2px}.card-back:after{border-color:#b1bcb132}.card-face{border-radius:4px;box-shadow:0 3px 6px #0004,0 17px 25px -15px #000a}.card-front{border-color:#ddd3bd;background:#ddd3bd}.slot{border-color:#9caeb135;color:#849299;border-radius:4px}.slot>span{color:#919fa4}.tarot-card:focus-visible{outline-color:#ccdedb}.result-card .art{box-shadow:0 20px 35px -15px #0009;border-radius:3px}.result-card .position{color:#97a7ad}.result-card strong{color:#dedfd3}.result-card small{color:#a0afb2}.eyebrow{color:#9fafb4}.result-actions .micro-hint{color:#96a3a9}.pay-button{background:none;color:#d2d8d3;border:1px solid #a3b3b95a}.pay-button:hover{background:#93a8b315}.pay-button span{border-left-color:#a3b3b945}.full-reading h3{color:#c3cec9}.full-reading p{color:#bec8c7}.full-reading .reading-source{color:#84949b}.reading-badge{color:#b4b9a8;border-color:#aab09944}.sheet-dialog{background:#1b2227;border-color:#9daeb02b;border-radius:10px;box-shadow:0 35px 100px #0006}.sheet-dialog::backdrop{background:#0a0f13aa;backdrop-filter:blur(12px)}.close-button{color:#9fafb4}.close-button:hover{color:#e4e8dc}.spread-option{border-color:#95a8af2f;border-radius:5px}.spread-option.active{border-color:#b1c0c067;background:#b8c5be08}.spread-option small,.reverse-option{color:#a7b7bb}.reverse-option input{accent-color:#b0c4cc}.library-search input{background:#0c14194d;border-color:#98a8b22e;border-radius:5px}.library-filters button{color:#a1b2b8}.library-filters button.active{background:#a1b8c226;color:#d2dfd8}.library-card small{color:#91a7b2}.detail-copy .keywords{color:#b8bba5}.detail-copy h3{color:#9bb1b8}.detail-copy p{color:#bacbc9}.detail-copy .art-source{color:#94abb4}.payment-price{color:#d3d6ca}.payment-subtitle{color:#a3b8bd}.payment-code-placeholder{background:#b2c1c50b;color:#90a6af;border:1px dashed #a4b7bf43;border-radius:5px;height:156px;width:156px}.payment-demo,.payment-status{color:#a5b5b9}.payment-qr{width:176px;height:176px;object-fit:contain}.poster-preview{background:#12191e}.share-note{color:#93a9b2}.about-copy p{color:#a5b9bd}.about-copy a{color:#b1c2c4}.empty-state{color:#9bafb9}.toast{color:#e4e7d9;background:#29363cf5;border-color:#a9bec733;border-radius:5px}.loading-orbit{border-color:#b2c6c730;border-top-color:#c6d2c6}
@media(max-width:520px){.ambient i{filter:blur(55px);width:90vw;height:120vw;min-width:260px;min-height:300px}.ambient i:nth-child(1){left:-35%;top:5%}.ambient i:nth-child(2){right:-33%;top:25%}.ambient i:nth-child(3){left:16%;bottom:-10%}.question-stage h1{font-size:29px}.price-note{font-size:12px}.question-stage:focus-within .opening-deck{margin-bottom:14px}.ritual-stage{min-height:calc(100svh - 132px);padding:25px 25px 65px}.ritual-question{font-size:18px;margin-bottom:31px}.ritual-field{margin-bottom:26px;width:260px;height:255px}.ritual-stage h1{font-size:23px}.sheet-dialog{padding-bottom:calc(25px + env(safe-area-inset-bottom))}}
@media(min-width:901px) and (max-height:810px){.ritual-stage{min-height:calc(100svh - 132px);padding-top:12px;padding-bottom:25px}.ritual-question{margin-bottom:24px}.ritual-field{height:245px;margin-bottom:24px}}
.question-examples{width:100%;max-width:525px;display:flex;flex-wrap:wrap;gap:3px 20px;margin-top:20px}.question-examples button{font-size:13px;line-height:1.65;color:#8e9a9f;padding:8px 0;min-height:38px;text-align:left}.question-examples button:hover{color:#d9ded6}.question-examples span{font-size:12px;margin-left:5px;color:#7c8b92}.question-input{position:relative;align-items:flex-end;padding:43px 19px 17px;border:1px solid #9aaeb63f;border-radius:6px;background:linear-gradient(125deg,#b9c8c40a,#17212855 65%,#0e151955);box-shadow:inset 0 1px #d3ded011;transition:border-color .35s,box-shadow .35s,background .35s}.question-input:focus-within{border-color:#acbfc093;box-shadow:0 0 30px -8px #8ba8b320,inset 0 1px #e0e6d724;background:linear-gradient(125deg,#bdd3d210,#19242b70 65%,#0e151955)}.question-label{position:absolute;top:15px;left:20px;font-size:13px;line-height:1.5;letter-spacing:.04em;color:#94a4ab;cursor:text}.question-input:focus-within .question-label{color:#c8d3ce}.question-input textarea{font-size:19px;line-height:1.8;min-height:76px;caret-color:#e7e8d6;outline:0}.question-input .arrow-button{width:39px;height:39px;border-color:#abbab744;background:#a3b6b705}.page-hidden .ambient i{animation-play-state:paused}
.ambient i{background:radial-gradient(ellipse at 42% 45%,#7e909b 0%,#526574 35%,#33454f75 60%,transparent 78%);animation:drift-smoke-one 18s ease-in-out infinite alternate,tide-smoke 6.5s ease-in-out infinite}.ambient i:nth-child(1){left:-7%;top:-8%}.ambient i:nth-child(2){background:radial-gradient(ellipse at 45% 45%,#b0b7bb 0%,#7e909b80 35%,#52657438 57%,transparent 78%);animation:drift-smoke-two 23s ease-in-out infinite alternate,tide-smoke 8.5s ease-in-out -3s infinite}.ambient i:nth-child(3){background:radial-gradient(ellipse at 40% 50%,#7e909b 0%,#52657477 37%,transparent 76%);animation:drift-smoke-three 29s ease-in-out infinite alternate,tide-smoke 11s ease-in-out -5s infinite}.page-hidden .ambient i{animation-play-state:paused}
@keyframes drift-smoke-one{from{transform:translate(-5%,-3%) scale(.97)}to{transform:translate(13%,11%) scale(1.06)}}@keyframes drift-smoke-two{from{transform:translate(5%,-4%) scale(1.04)}to{transform:translate(-13%,9%) scale(.96)}}@keyframes drift-smoke-three{from{transform:translate(1%,-6%) scale(.96)}to{transform:translate(-9%,-15%) scale(1.06)}}@keyframes tide-smoke{0%,100%{opacity:.18}48%{opacity:.37}64%{opacity:.33}}
@media(max-height:810px){.question-stage .opening-deck{height:137px;transform:scale(.72);margin-top:0;margin-bottom:25px;transform-origin:50% 0}.question-stage h1{margin-bottom:25px}.question-stage{padding-top:12px;padding-bottom:28px}}
@media(max-width:520px){.question-examples{gap:0 12px;margin-top:17px}.question-examples button{font-size:13px}.question-input textarea{font-size:18px}.question-stage .opening-deck{margin-bottom:15px}.question-stage h1{margin-bottom:25px}}
@media(prefers-reduced-motion:reduce){.ambient i{animation:none;will-change:auto}.ritual-ripple{display:none}}
/* The print remains still; a clipped foil reflection crosses only the light lines. */
.opening-card,.opening-card.c1,.opening-card.c2,.opening-card.c3,.card-back{background:#111820 url('./assets/card-back-v2.jpg') center/100% 100% no-repeat;border:1px solid #a0a89e69;overflow:hidden}.opening-card>span,.opening-card>i,.card-back>span{display:none}.opening-card:before,.card-back:before{content:"";inset:0;border:0;border-radius:0;background:inherit;filter:brightness(2.2) saturate(.42);-webkit-mask-image:linear-gradient(115deg,transparent 32%,#000 48%,transparent 64%);mask-image:linear-gradient(115deg,transparent 32%,#000 48%,transparent 64%);-webkit-mask-size:350% 100%;mask-size:350% 100%;-webkit-mask-position:150% 0;mask-position:150% 0;opacity:.52;pointer-events:none}.opening-card:after,.card-back:after{content:"";inset:0;border:0;border-radius:0;background:radial-gradient(ellipse at 50% 48%,#d0ddd02e,transparent 30%);mix-blend-mode:screen;opacity:0;pointer-events:none}.opening-card.c3:before{animation:foil-pass 8s ease-in-out infinite}.opening-card.c3:after{animation:seal-glimmer 5.7s ease-in-out infinite}.ritual-card.c3:before{animation-duration:3.2s}.ritual-card.c3:after{animation-duration:2.35s}.tarot-card:hover .card-back:before,.tarot-card:focus-visible .card-back:before,.tarot-card.is-held .card-back:before{animation:foil-pass 1.8s ease-in-out infinite;opacity:.8}.tarot-card:hover .card-back:after,.tarot-card.is-held .card-back:after{opacity:.6}.opening-card{box-shadow:0 10px 35px #0006}.page-hidden .opening-card:before,.page-hidden .opening-card:after{animation-play-state:paused}
@keyframes foil-pass{0%,12%{-webkit-mask-position:150% 0;mask-position:150% 0;opacity:0}27%{opacity:.55}57%{opacity:.72}78%,100%{-webkit-mask-position:-50% 0;mask-position:-50% 0;opacity:0}}@keyframes seal-glimmer{0%,100%{opacity:.08}47%{opacity:.55}62%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.opening-card:before,.opening-card:after,.card-back:before,.card-back:after{animation:none!important;opacity:0!important}}
@media(max-height:810px){.ritual-stage{padding-top:10px;padding-bottom:25px}.ritual-question{margin-bottom:14px}.ritual-field{height:230px;margin-bottom:18px}.ritual-stage h1{margin-bottom:18px}}
/* One fixed night palette with the existing colored mist motion. */
[data-palette=smoke]{--bg:#07080b;--bg-rgb:7,8,11;--surface:#12161b;--ink:#e5e9ec;--muted:#a5b0ba;--gold:#bec8cb;--line:#a0b2bb30;--mist-one:79,103,123;--mist-two:103,123,125;--mist-three:122,117,133}
body{transition:background-color .65s ease}
.ambient{inset:0}
.ambient:before{content:"";position:absolute;left:12%;top:-5%;width:76%;height:78%;border-radius:50%;background:radial-gradient(ellipse at 55% 43%,rgba(var(--mist-three),.54),rgba(var(--mist-one),.17) 42%,transparent 70%);filter:blur(32px);animation:center-light 11s ease-in-out infinite;pointer-events:none}
.ambient:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(var(--bg-rgb),.08) 0%,transparent 34%,rgba(var(--bg-rgb),.16) 65%,rgba(var(--bg-rgb),.48) 96%),radial-gradient(ellipse at 50% 35%,rgba(var(--bg-rgb),.06) 18%,transparent 55%,rgba(var(--bg-rgb),.2) 92%)}
.ambient i{min-width:0;min-height:0;max-width:none;max-height:none;width:72vw;height:77vh;filter:blur(37px);border-radius:44% 56% 58% 42%;background:radial-gradient(ellipse at 50% 50%,rgb(var(--mist-one)) 0%,rgba(var(--mist-one),.58) 34%,transparent 74%);animation:near-smoke-one 17s ease-in-out infinite alternate,near-tide-one 7.2s ease-in-out infinite}
.ambient i:nth-child(1){left:-15%;top:-9%;width:75vw;height:77vh}
.ambient i:nth-child(2){right:-24%;top:5%;width:73vw;height:79vh;background:radial-gradient(ellipse at 45% 46%,rgb(var(--mist-two)) 0%,rgba(var(--mist-two),.52) 36%,rgba(var(--mist-one),.13) 57%,transparent 75%);animation:near-smoke-two 21s ease-in-out infinite alternate,near-tide-two 8.9s ease-in-out -3s infinite}
.ambient i:nth-child(3){left:24%;bottom:auto;top:18%;width:64vw;height:70vh;background:radial-gradient(ellipse at 45% 40%,rgb(var(--mist-three)) 0%,rgba(var(--mist-three),.48) 37%,transparent 73%);animation:near-smoke-three 27s ease-in-out infinite alternate,near-tide-three 6.3s ease-in-out -4s infinite}
@keyframes near-smoke-one{from{transform:translate(-9%,-3%) rotate(-12deg) scale(.94)}to{transform:translate(16%,13%) rotate(9deg) scale(1.12)}}
@keyframes near-smoke-two{from{transform:translate(5%,-5%) rotate(8deg) scale(1.08)}to{transform:translate(-18%,12%) rotate(-11deg) scale(.98)}}
@keyframes near-smoke-three{from{transform:translate(3%,-12%) scale(.88)}to{transform:translate(-9%,13%) scale(1.1)}}
@keyframes near-tide-one{0%,100%{opacity:.3}50%{opacity:.6}}
@keyframes near-tide-two{0%,100%{opacity:.24}50%{opacity:.52}}
@keyframes near-tide-three{0%,100%{opacity:.18}50%{opacity:.42}}
@keyframes center-light{0%,100%{opacity:.2;transform:scale(.97)}50%{opacity:.4;transform:scale(1.03)}}
body[data-stage=draw] .ambient{opacity:.96}body[data-stage=result] .ambient{opacity:.4}body[data-stage=ritual] .ambient{opacity:1}
/* The writing plane drifts together, then holds still during interaction. */
.question-stage>h1,.question-stage>#questionForm,.question-stage>.question-examples,.question-stage>.recommendation{animation:writing-float 9s ease-in-out infinite}
.question-stage h1{text-shadow:0 4px 20px #0009,0 0 34px rgba(var(--mist-two),.19)}
.question-input{border-color:rgba(var(--mist-two),.32);background:linear-gradient(125deg,rgba(var(--mist-two),.065),rgba(var(--bg-rgb),.4) 58%,rgba(var(--bg-rgb),.55));box-shadow:0 24px 56px -24px #000b,0 0 42px -17px rgba(var(--mist-one),.3),inset 0 1px rgba(var(--mist-two),.12);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.question-input:focus-within{border-color:rgba(var(--mist-two),.62);background:linear-gradient(125deg,rgba(var(--mist-two),.08),rgba(var(--bg-rgb),.6));box-shadow:0 24px 56px -24px #000b,0 0 45px -14px rgba(var(--mist-one),.32),inset 0 1px rgba(var(--mist-two),.16)}
.question-stage:focus-within>h1,.question-stage:focus-within>#questionForm,.question-stage:focus-within>.question-examples,.question-stage:focus-within>.recommendation{animation-play-state:paused}
@keyframes writing-float{0%,100%{transform:translateY(3.5px)}50%{transform:translateY(-3.5px)}}
.background-dialog{width:670px}.background-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.background-choice{padding:0;text-align:left}.background-swatch{position:relative;display:block;height:132px;background:var(--bg);border:1px solid #98a6ad3d;border-radius:5px;overflow:hidden;isolation:isolate}.background-swatch i{position:absolute;inset:-35%;border-radius:50%;filter:blur(12px);background:radial-gradient(ellipse at 35% 45%,rgba(var(--mist-one),.9) 0%,rgba(var(--mist-three),.4) 40%,transparent 69%);animation:swatch-shift 9s ease-in-out infinite alternate}.background-swatch i:nth-child(2){transform:translate(37%,18%);background:radial-gradient(ellipse at 35% 45%,rgba(var(--mist-two),.7),transparent 63%);opacity:.4}.background-choice strong{display:block;font:19px var(--serif);font-weight:400;margin-top:13px}.background-choice[aria-pressed=true] .background-swatch{border-color:#d0d6c5;box-shadow:0 0 0 1px #d0d6c55c}.background-choice[aria-pressed=true] strong{color:#e5e8da}.background-choice[aria-pressed=true] strong:after{content:" ✓";font:13px var(--sans);color:#b8c6bc}.background-choice:hover .background-swatch{border-color:#bfcdc8}
@keyframes swatch-shift{from{translate:-6% -2%;opacity:.2}to{translate:6% 5%;opacity:.34}}
@media(max-width:520px){.topbar nav{gap:16px}.background-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 16px}.background-swatch{height:108px}.background-choice strong{font-size:18px}.ambient i{filter:blur(28px)}.ambient i:nth-child(1){width:125vw;height:69vh;left:-52%;top:0}.ambient i:nth-child(2){width:125vw;height:72vh;right:-56%;top:6%}.ambient i:nth-child(3){width:108vw;height:64vh;left:9%;top:25%}.ambient:before{left:-15%;width:130%;height:66%;top:3%}.ambient:after{background:linear-gradient(180deg,rgba(var(--bg-rgb),.04) 0%,transparent 32%,rgba(var(--bg-rgb),.18) 67%,rgba(var(--bg-rgb),.48) 96%)}}
.page-hidden .ambient i,.page-hidden .ambient:before,.page-hidden .background-swatch i,.page-hidden .question-stage>h1,.page-hidden .question-stage>#questionForm,.page-hidden .question-stage>.question-examples,.page-hidden .question-stage>.recommendation{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){body .ambient i,.ambient:before,.background-swatch i,.question-stage>h1,.question-stage>#questionForm,.question-stage>.question-examples,.question-stage>.recommendation{animation:none!important;transform:none}.ambient i{opacity:.45}.ambient:before{opacity:.3}}

/* A soft writing surface and one clear, tactile next action. */
.question-input{display:flex;flex-direction:column;align-items:stretch;gap:9px;padding:18px 22px 15px;border:1px solid rgba(var(--mist-two),.105);border-radius:18px;background:linear-gradient(130deg,rgba(var(--mist-two),.082),rgba(var(--bg-rgb),.27) 64%,rgba(var(--bg-rgb),.4));box-shadow:0 21px 46px -25px #000a,0 0 42px -24px rgba(var(--mist-one),.24),inset 0 1px rgba(var(--mist-two),.055);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.question-input:hover{border-color:rgba(var(--mist-two),.21)}
.question-input:focus-within{border-color:rgba(var(--mist-two),.33);background:linear-gradient(130deg,rgba(var(--mist-two),.095),rgba(var(--bg-rgb),.36) 65%,rgba(var(--bg-rgb),.45));box-shadow:0 24px 50px -25px #000b,0 0 46px -24px rgba(var(--mist-one),.32),inset 0 1px rgba(var(--mist-two),.09)}
.question-label{position:static;display:block;font-size:13px;font-weight:400;line-height:20px;letter-spacing:.035em;color:#a7b4b6}
.question-input:focus-within .question-label{color:#c8d3ce}
.question-input textarea{flex:none;width:100%;height:58px;min-height:58px;max-height:160px;font-size:18px;line-height:29px;caret-color:#eeeadd}
.input-submit-row{display:flex;justify-content:flex-end;align-items:center;padding-top:1px}
.question-input .arrow-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:auto;min-width:96px;height:37px;padding:0 16px;border:1px solid #f8f5e420;border-radius:999px;background:#dfdfd3;color:#29312f;font:14px/1 var(--sans);box-shadow:0 3px 12px #0002,inset 0 1px #ffffef55;transition:background .2s,box-shadow .2s,transform .2s}
.question-input .arrow-button svg{width:18px;height:18px;flex-shrink:0}
.question-input .arrow-button:hover:not(:disabled){background:#efede1;box-shadow:0 5px 16px #0003,inset 0 1px #ffffef77;transform:translateY(-1px)}
.question-input .arrow-button:active:not(:disabled){transform:translateY(0);box-shadow:0 1px 5px #0002}
@media(max-width:520px){.question-input{padding:17px 19px 14px;border-radius:16px}.question-input textarea{font-size:18px}.question-input .arrow-button{height:38px;min-width:95px}}

/* Inline reading state, replacing the payment dialog. */
.reading-error{max-width:32rem;margin:18px auto 0;font-size:14px;line-height:1.7;color:var(--muted);text-align:center}.result-actions .primary-button:disabled{cursor:wait;opacity:.65}

/* Put labels above the slots, outside the lower deck's resting area. */
.card-table{margin-top:48px}
.slot>span{top:auto;bottom:calc(100% + 12px);font-size:14px;line-height:22px;letter-spacing:.04em;text-shadow:0 2px 10px #0009}

/* Shared typography: literary headings, clear native interface and reading text. */
:root{--serif:"Songti SC","STSong","Noto Serif SC",serif;--sans:"PingFang SC","Heiti SC",-apple-system,BlinkMacSystemFont,"Microsoft YaHei","Noto Sans SC",sans-serif;--type-small:.875rem;--type-note:.8125rem}
html{font-size:100%}
body{font-family:var(--sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
button,input,textarea{font-family:var(--sans)}
.brand{font-family:var(--sans);font-size:1.0625rem;font-weight:500;line-height:1.5;letter-spacing:.07em}
.brand>span{font-size:1.375rem;line-height:1}
.question-stage h1{font-family:var(--serif);font-size:clamp(1.875rem,3.2vw,2.5rem);font-weight:500;line-height:1.5;letter-spacing:.035em;text-wrap:balance}
.draw-heading h1{font-family:var(--serif);font-size:clamp(1.6875rem,2.6vw,2rem);font-weight:500;line-height:1.5;letter-spacing:.055em}
.draw-heading>p:first-child,.ritual-question{font-family:var(--sans);font-size:1.0625rem;font-weight:400;line-height:1.85;letter-spacing:.015em}
.result-header h1{font-family:var(--serif);font-size:clamp(1.5625rem,2.7vw,2.0625rem);font-weight:500;line-height:1.7;letter-spacing:.025em;text-wrap:balance}
.ritual-stage h1,.recommended-spread h2{font-family:var(--serif);font-size:1.5rem;font-weight:500;line-height:1.5;letter-spacing:.035em}
.dialog-heading h2,.full-reading h2{font-family:var(--serif);font-size:clamp(1.5rem,2.1vw,1.75rem);font-weight:500;line-height:1.55;letter-spacing:.035em}
.detail-copy h2{font-family:var(--serif);font-size:1.875rem;font-weight:500;line-height:1.45;letter-spacing:.035em}
.result-card strong{font-family:var(--serif);font-size:clamp(1rem,1.65vw,1.25rem);font-weight:500;line-height:1.6;letter-spacing:.03em}
.library-card strong{font-family:var(--serif);font-size:1rem;font-weight:500;line-height:1.6;letter-spacing:.025em}
.spread-option strong{font-family:var(--serif);font-size:1.3125rem;font-weight:500;line-height:1.5;letter-spacing:.03em}
.background-choice strong{font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1.5;letter-spacing:.025em}
.primary-button,.secondary-button,.draw-controls .secondary-button,.share-controls .primary-button{font-family:var(--sans);font-size:.9375rem;font-weight:500;line-height:1.45;letter-spacing:.025em}
.quiet-button,.draw-controls .quiet-button,.result-bottom .quiet-button,.ritual-controls .quiet-button,.recommendation-heading .quiet-button{font-family:var(--sans);font-size:var(--type-small);font-weight:400;line-height:1.6;letter-spacing:.02em}
.question-input .arrow-button{font-family:var(--sans);font-size:var(--type-small);font-weight:500;letter-spacing:.02em}
.question-label,.question-examples button,.recommendation-heading,.recommended-spread p,.draw-heading>p:last-child,.slot>span,.result-card .position,.result-actions .micro-hint,.reverse-option,.library-filters button,.detail-copy .keywords,.share-note,.reading-error{font-family:var(--sans);font-size:var(--type-small);font-weight:400;line-height:1.65;letter-spacing:.02em}
.question-input textarea{font-family:var(--sans);font-size:1.125rem;font-weight:400;line-height:1.8;letter-spacing:.01em}
.library-search input{font-family:var(--sans);font-size:1rem;line-height:1.6;letter-spacing:.015em}
.slot{font-family:var(--sans);font-size:1rem;font-weight:400;font-variant-numeric:tabular-nums}
.slot>span{font-weight:500;white-space:nowrap}
.card-table{margin-top:3.25rem}
.page-count{font-family:var(--sans);font-size:var(--type-note);line-height:1.5;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.eyebrow,.result-header .eyebrow{font-family:var(--sans);font-size:var(--type-small);line-height:1.5;letter-spacing:.08em}
.full-reading{max-width:42rem;margin-left:auto;margin-right:auto}
.full-reading p,.detail-copy p{font-family:var(--sans);font-size:1.0625rem;font-weight:400;line-height:1.95;letter-spacing:.015em;overflow-wrap:anywhere}
.full-reading h3{font-family:var(--sans);font-size:1.0625rem;font-weight:500;line-height:1.65;letter-spacing:.025em}
.detail-copy h3{font-family:var(--sans);font-size:var(--type-small);font-weight:500;line-height:1.6;letter-spacing:.04em}
.about-copy p,.empty-state{font-family:var(--sans);font-size:1rem;line-height:1.85;letter-spacing:.01em}
.result-card small,.library-card small,.full-reading .reading-source,.detail-copy .art-source,.about-copy a,.page-footer .quiet-button,.reading-badge{font-family:var(--sans);font-size:var(--type-note);line-height:1.6;letter-spacing:.025em}
.close-button{font-family:var(--sans);font-size:1.625rem;font-weight:300;line-height:1}
@media(max-width:520px){.question-stage h1{font-size:1.875rem}.draw-heading>p:first-child,.ritual-question{font-size:1rem}.topbar nav{gap:15px}.brand{font-size:1rem}.question-input textarea{font-size:1.0625rem}.full-reading p,.detail-copy p{font-size:1rem;line-height:1.95}.draw-controls{gap:18px;flex-wrap:wrap}.result-card .position{font-size:var(--type-small)}}
@media(max-width:359px){.topbar{padding-left:18px;padding-right:18px}.topbar nav{gap:12px}.brand{gap:7px}.question-stage h1{font-size:1.6875rem}.library-card strong{font-size:.9375rem}}

/* A keepsake poster, with an explicit WeChat handoff beside local saving. */
.share-dialog{width:540px;padding:28px;max-height:92svh;background:var(--surface)}
.share-dialog .dialog-heading{margin-bottom:22px;align-items:center}
.share-eyebrow{margin:0 0 7px;font:400 .8125rem/1.5 var(--sans);color:var(--muted);letter-spacing:.12em}
.share-dialog .dialog-heading h2{font-size:1.625rem}
.poster-preview{max-height:54svh;border:1px solid #b4c7e224;border-radius:9px;background:#080e1c;scrollbar-width:thin;scrollbar-color:#8fabc34d transparent}
.poster-preview img{width:100%;height:auto;-webkit-touch-callout:default;user-select:auto}
.poster-preview .empty-state{min-height:200px;display:grid;place-items:center;padding:30px 22px;margin:0;font-size:1rem}
#retryPoster{display:block;margin:0 auto 28px}
.share-controls{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px;margin-top:22px}
.share-controls button{min-height:50px;min-width:0;padding:12px 13px;font:500 .9375rem/1.5 var(--sans);border-radius:28px;letter-spacing:.02em}
.wechat-button{display:flex;align-items:center;justify-content:center;gap:9px;border:1px solid #6ccc984d;background:#146640;color:#edfff4;transition:background .2s}
.wechat-button:hover:not(:disabled){background:#1a7950}
.wechat-button svg{width:26px;height:24px;flex-shrink:0}
.share-controls .secondary-button{color:var(--ink);border-color:var(--line)}
.more-share{display:block;width:100%;text-align:center;margin-top:9px;padding:8px;font-size:.875rem}
.share-help{padding:14px 16px;border:1px solid var(--line);background:#8fb8ef0a;border-radius:9px;color:var(--ink);font:400 .875rem/1.8 var(--sans);margin:12px 0 0;overflow-wrap:anywhere}
.share-note{font-size:.8125rem;line-height:1.65;color:var(--muted);margin:13px 0 0}
@media(max-width:520px){.share-dialog{padding:22px 18px;max-width:calc(100vw - 24px)}.poster-preview{max-height:49svh}.share-controls{gap:9px}.share-controls button{font-size:.875rem;padding:12px 10px}.wechat-button{gap:6px}}
@media(max-width:359px){.share-controls{grid-template-columns:1fr}.share-controls button{min-height:44px}}

/* Composer layout and recommendation states; the visible heading labels the field. */
#questionTitle label{cursor:text}
#questionForm .question-input{gap:1rem;padding:22px 22px 17px;border-radius:22px;border:1px solid rgba(var(--mist-two),.17);background:linear-gradient(135deg,rgba(var(--mist-one),.11),rgba(var(--bg-rgb),.53) 56%,rgba(var(--bg-rgb),.67));box-shadow:0 16px 45px -24px #000b,inset 0 1px rgba(var(--mist-two),.08);transition:border-color .25s,box-shadow .25s,background .25s;cursor:text}
#questionForm .question-input:hover{border-color:rgba(var(--mist-two),.29)}
#questionForm .question-input:focus-within{border-color:rgba(var(--mist-two),.46);box-shadow:0 16px 45px -24px #000b,0 0 0 3px rgba(var(--mist-one),.065),inset 0 1px rgba(var(--mist-two),.12)}
#questionForm textarea{height:3.6rem;min-height:3.6rem;max-height:10.5rem;width:100%;margin:0;padding:0;font:400 1.125rem/1.8 var(--sans);letter-spacing:.01em;overflow-y:hidden;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent;resize:none;scroll-margin-top:1.5rem}
.composer-footer{display:flex;align-items:flex-end;justify-content:flex-end;flex-wrap:wrap;gap:1rem;min-width:0}
.composer-footer[data-ready=true]{border-top:1px solid rgba(var(--mist-two),.12);padding-top:1rem}
#questionForm .input-submit-row{display:flex;align-items:center;justify-content:flex-end;gap:.75rem;flex:0 0 auto;width:auto;padding:0;margin-left:auto;min-height:2.75rem}
#questionForm .arrow-button{height:auto;min-height:2.75rem;min-width:6rem;padding:.625rem 1.125rem;margin:0;border-radius:999px;font:500 .9375rem/1.5 var(--sans);letter-spacing:.04em;gap:.75rem;flex-shrink:0;white-space:nowrap}
#questionForm .arrow-button svg{width:1rem;height:1rem}
#questionForm .arrow-button:disabled{opacity:.62}
#questionForm #beginButton{min-width:8rem}
#questionForm .recommendation{display:flex;align-items:center;gap:.75rem;flex:1 1 10rem;min-width:0;width:auto;max-width:none;margin:0}
#questionForm .spread-mini{gap:3px;flex-shrink:0}
#questionForm .spread-mini i{width:13px;height:24px;border-color:var(--muted);background:rgba(var(--mist-two),.06);border-radius:2px}
.recommendation-copy{min-width:0;flex:1}
#questionForm .recommendation-heading{display:block;font:400 .8125rem/1.5 var(--sans);letter-spacing:.02em;color:var(--muted)}
.recommendation-title{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin:.2rem 0}
#questionForm #spreadName{font:500 1.25rem/1.45 var(--serif);letter-spacing:.03em;margin:0;color:var(--ink)}
#questionForm #changeSpread{font-size:.875rem;line-height:1.5;padding:.25rem 0;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:4px}
#questionForm #changeSpread:hover{color:var(--ink)}
#questionForm #spreadPositions{font:400 .875rem/1.6 var(--sans);color:var(--muted);margin:0;overflow-wrap:anywhere}
.question-hint{margin:.7rem 0 0;padding:0 1.125rem;color:var(--muted);font:400 .8125rem/1.6 var(--sans);letter-spacing:.045em;opacity:.88;transition:color .25s,opacity .25s}
#questionForm:focus-within .question-hint{opacity:1}
#questionForm .input-error{padding:0 1.125rem;margin:.625rem 0 0;font-size:.875rem;line-height:1.6}
.question-examples{gap:4px 18px;margin-top:14px;padding:0 2px}
.question-examples button{font-size:.875rem;line-height:1.7;padding:6px 0;min-height:38px}
@media(max-width:520px){#questionForm .question-input{padding:19px 19px 15px;border-radius:20px;gap:.8rem}#questionForm textarea{font-size:1.0625rem;min-height:3.5rem;height:3.5rem}#questionForm .arrow-button{padding:.6rem 1rem;min-width:5.75rem}#questionForm #beginButton{min-width:7.75rem}.composer-footer{gap:.85rem}.question-hint{padding:0 1rem}.question-examples{column-gap:16px}}
@media(max-width:359px){.composer-footer[data-ready=true]{row-gap:.875rem}#questionForm .recommendation{flex-basis:100%}#questionForm .input-submit-row{width:100%}.question-examples{gap:2px 12px}}

/* Transparent star engraving floats above the original colored light. */
.ambient-pattern{position:absolute;inset:-6%;z-index:1;pointer-events:none;background:url('./images/stars-01.webp') center/cover no-repeat;filter:none;mix-blend-mode:screen;opacity:.48;transform-origin:center;animation:celestial-drift 58s ease-in-out infinite alternate,celestial-light 18s ease-in-out -6s infinite;will-change:transform}
.ambient:after{z-index:2}
@keyframes celestial-drift{from{transform:translate3d(-.9%,-.7%,0) scale(1.035)}to{transform:translate3d(1.1%,.9%,0) scale(1.055)}}
@keyframes celestial-light{0%,100%{opacity:.4}50%{opacity:.62}}
body[data-stage=draw] .ambient{opacity:.78}
body[data-stage=result] .ambient{opacity:.42}
.page-hidden .ambient-pattern{animation-play-state:paused}
/* The large lettering is behind the writing glass, never a line of helper text. */
#questionForm{position:relative;isolation:isolate}
.question-shell{position:relative;isolation:isolate;overflow-x:clip}
.question-underprint{position:absolute;inset:0 1.25rem;z-index:0;display:flex;align-items:center;justify-content:center;margin:0;pointer-events:none;user-select:none;font:400 clamp(1.625rem,7vw,3.5rem)/1.2 var(--serif);letter-spacing:.045em;white-space:nowrap;text-align:center;color:#bdcbd1;opacity:.2;transform:none;filter:none}
#questionForm .question-input{position:relative;z-index:1;min-height:8.5rem;padding:24px 25px 23px;border-radius:var(--radius-panel);border-color:var(--border-soft);background:linear-gradient(140deg,rgba(var(--mist-two),.065),rgba(var(--bg-rgb),.24) 45%,rgba(var(--bg-rgb),.34));backdrop-filter:blur(1.25px);-webkit-backdrop-filter:blur(1.25px);box-shadow:0 23px 45px -25px #000c,inset 0 1px #e0e9e80c;gap:0}
#questionForm .question-input:hover{border-color:#c5d1d540}
#questionForm .question-input:focus-within{border-color:#b6c9cf62;background:linear-gradient(140deg,rgba(var(--mist-two),.07),rgba(var(--bg-rgb),.42) 45%,rgba(var(--bg-rgb),.54));box-shadow:0 23px 45px -25px #000c,0 0 0 3px rgba(var(--mist-one),.035),inset 0 1px #e0e9e812}
#questionForm textarea{height:5.25rem;min-height:5.25rem;position:relative;z-index:1}
.composer-footer[data-ready=false]{display:none}
.composer-footer[data-ready=true]{margin-top:.85rem;padding-top:.85rem}
#questionForm .recommendation{flex-basis:100%}
#questionForm .input-submit-row{position:relative;z-index:2;justify-content:center;width:100%;margin:1.75rem 0 0;padding:0;min-height:3rem}
#questionForm .arrow-button{min-width:9.5rem;min-height:3rem;padding:.7rem 1.6rem;display:inline-flex;align-items:center;justify-content:center;gap:1rem;background:var(--action-fill);color:var(--action-ink);border:1px solid var(--action-border);border-radius:var(--radius-control);box-shadow:var(--shadow-action);font-weight:500;transition:background .2s,box-shadow .2s,transform .2s}
#questionForm .arrow-button:hover:not(:disabled){background:var(--action-hover);box-shadow:var(--shadow-action-hover);transform:translateY(-1px)}
#questionForm .arrow-button:active:not(:disabled){transform:translateY(0)}
#questionForm #beginButton{min-width:10.5rem}
#questionForm .input-error{position:relative;z-index:2;margin:1rem 0 0;text-align:center}
.question-examples{justify-content:center;margin-top:20px;gap:4px 20px}
@media(max-width:520px){#questionForm .question-input{padding:21px 21px 20px;min-height:8.2rem;border-radius:var(--radius-panel)}#questionForm textarea{height:5rem;min-height:5rem}#questionForm .input-submit-row{margin-top:1.5rem}.ambient-pattern{inset:-4%}.question-examples{gap:3px 16px}}
@media(prefers-reduced-motion:reduce){.ambient-pattern{animation:none!important;transform:none;opacity:.48;will-change:auto}.ambient i{opacity:.38}.ambient:before{opacity:.28}.question-underprint{transition:none}}


/* Resolve palette-dependent materials on the body where the palette is defined. */
:root,body{
  --radius-panel:1rem;
  --radius-inset:.75rem;
  --radius-control:999px;
  --radius-card:.25rem;
  --border-soft:#bdc9cd27;
  --border-strong:#bdc9cd55;
  --border-focus:#c2d2d875;
  --action-fill:#d6dedf;
  --action-hover:#edf0ec;
  --action-ink:#253039;
  --action-border:#e9efed3d;
  --surface-glass:linear-gradient(140deg,rgba(var(--mist-two),.085),rgba(var(--bg-rgb),.92) 50%),var(--surface);
  --surface-inset:rgba(var(--bg-rgb),.3);
  --surface-hover:rgba(var(--mist-two),.085);
  --shadow-panel:0 30px 80px -25px #0009,inset 0 1px #e0e9e80c;
  --shadow-action:0 8px 20px -12px #000b,inset 0 1px #ffffff66;
  --shadow-action-hover:0 10px 23px -12px #000b,inset 0 1px #ffffff99;
}
body{color:var(--ink)}
.brand,.brand>span{color:var(--ink)}
.quiet-button,.icon-button,.close-button,.question-examples button,.question-examples span,
.draw-heading>p:first-child,.draw-heading>p:last-child,.ritual-question,
.result-card .position,.result-card small,.eyebrow,.result-actions .micro-hint,
.full-reading .reading-source,.detail-copy .keywords,.detail-copy .art-source,
.library-card small,.reverse-option,.spread-option small,.about-copy a,
.share-note,.empty-state,.page-count{color:var(--muted)}
.result-card strong,.full-reading h3,.detail-copy h3,.ritual-stage h1{color:var(--ink)}
.full-reading p,.detail-copy p,.about-copy p{color:var(--ink);opacity:.86}
.quiet-button,.icon-button,.close-button,.question-examples button{transition:color .2s,background .2s}
.quiet-button:hover,.question-examples button:hover,.close-button:hover{color:var(--ink)}
.quiet-button,.page-footer .quiet-button{min-height:2.5rem;font-size:var(--type-small);border-radius:var(--radius-control)}
.icon-button,.close-button{width:2.5rem;height:2.5rem;border-radius:var(--radius-control);display:inline-grid;place-items:center}
.icon-button:hover,.close-button:hover{background:var(--surface-hover)}
.primary-button,.secondary-button,#questionForm .arrow-button,.wechat-button,
.draw-controls .secondary-button,.share-controls button{
  display:inline-flex;align-items:center;justify-content:center;gap:.75rem;
  width:auto;height:auto;min-height:3rem;padding:.7rem 1.5rem;
  border:1px solid var(--action-border);border-radius:var(--radius-control);
  font:500 .9375rem/1.5 var(--sans);letter-spacing:.025em;
  transition:background .2s,border-color .2s,box-shadow .2s,transform .2s;
}
.primary-button,#questionForm .arrow-button,.wechat-button{
  --button-fill:var(--action-fill);
  background:var(--button-fill);color:var(--action-ink);box-shadow:var(--shadow-action);
}
.primary-button:hover:not(:disabled),#questionForm .arrow-button:hover:not(:disabled),.wechat-button:hover:not(:disabled){
  --button-fill:var(--action-hover);
  background:var(--button-fill);box-shadow:var(--shadow-action-hover);transform:translateY(-1px);
}
.primary-button:active:not(:disabled),#questionForm .arrow-button:active:not(:disabled),.wechat-button:active:not(:disabled){transform:translateY(0);box-shadow:var(--shadow-action)}
.secondary-button,.share-controls .secondary-button{background:transparent;color:var(--ink);border-color:var(--border-strong);box-shadow:none}
.secondary-button:hover:not(:disabled){background:var(--surface-hover);border-color:var(--border-focus)}
.primary-button:disabled,#questionForm .arrow-button:disabled,.wechat-button:disabled{--button-fill:var(--action-fill);background:var(--button-fill);opacity:.55;transform:none;box-shadow:none}
.secondary-button:disabled{background:transparent;box-shadow:none;opacity:.45}
.wechat-button svg{color:#356650;width:1.625rem;height:1.5rem}
.wechat-button svg g{fill:var(--button-fill)}
.share-controls button{width:100%;padding-inline:.8rem}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sheet-dialog{background:var(--surface-glass);border:1px solid var(--border-soft);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.sheet-dialog::backdrop{background:rgba(var(--bg-rgb),.72);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dialog-heading h2,.share-dialog .dialog-heading h2{font:500 clamp(1.5rem,2.1vw,1.75rem)/1.55 var(--serif);letter-spacing:.035em}
.spread-option,.library-search input,.background-swatch,.poster-preview,.share-help{
  border:1px solid var(--border-soft);border-radius:var(--radius-inset);background:var(--surface-inset);
}
.spread-option{transition:border-color .2s,background .2s}
.spread-option strong{font-size:1.25rem}
.spread-option:hover{border-color:var(--border-strong);background:var(--surface-hover)}
.spread-option.active{border-color:var(--border-focus);background:var(--surface-hover);box-shadow:inset 0 1px #e0e9e80c}
.reverse-option input{accent-color:var(--gold)}
.library-search input:focus{border-color:var(--border-focus)}
.library-search input::placeholder{color:var(--muted);opacity:.8}
.library-filters button{min-height:2.25rem;border-radius:var(--radius-control);border:1px solid transparent;color:var(--muted);font:400 var(--type-small)/1.5 var(--sans)}
.library-filters button:hover{background:var(--surface-hover);color:var(--ink)}
.library-filters button.active{border-color:var(--border-strong);background:var(--surface-hover);color:var(--ink)}
.background-swatch{background:var(--bg)}
.background-swatch i{opacity:.28}
.background-swatch i:nth-child(2){opacity:.15}
.background-swatch:after{content:"";position:absolute;inset:0;background:url('./images/stars-01.webp') center/cover;mix-blend-mode:screen;opacity:.5;pointer-events:none}
.background-choice[aria-pressed=true] .background-swatch{border-color:var(--border-focus);box-shadow:0 0 0 1px var(--border-soft)}
.background-choice[aria-pressed=true] strong{color:var(--ink)}
.background-choice[aria-pressed=true] strong:after{color:var(--muted)}
.background-choice:hover .background-swatch{border-color:var(--border-focus)}
.poster-preview{scrollbar-color:var(--border-strong) transparent}
.share-help{color:var(--ink);background:var(--surface-hover)}
.toast{background:var(--surface-glass);color:var(--ink);border:1px solid var(--border-strong);border-radius:var(--radius-panel);box-shadow:var(--shadow-panel);font:400 var(--type-small)/1.65 var(--sans)}
.reading-badge{color:var(--muted);border-color:var(--border-strong);border-radius:var(--radius-control)}
.loading-orbit{border-color:var(--border-soft);border-top-color:var(--gold)}
.slot{border-color:var(--border-strong);color:var(--muted);border-radius:var(--radius-card)}
.slot>span{color:var(--muted)}
.opening-card,.card-face,.result-card .art,.library-card img,.detail-art img{border-radius:var(--radius-card)}
#questionForm .question-input:hover{border-color:var(--border-strong)}
#questionForm .question-input:focus-within{border-color:var(--border-focus)}
@media(max-width:520px){.share-controls button{padding-inline:.65rem;font-size:.875rem}.sheet-dialog{border-radius:var(--radius-panel)}}
@media(prefers-reduced-motion:reduce){
  .primary-button,.secondary-button,#questionForm .arrow-button,.wechat-button{transition:none}
  .primary-button:hover:not(:disabled),#questionForm .arrow-button:hover:not(:disabled),.wechat-button:hover:not(:disabled){transform:none}
}

/* Ben card seal: an open B monogram, a fine tarot outline and a small star. */
.topbar .brand{display:inline-flex;align-items:center;gap:.625rem;flex-shrink:0;white-space:nowrap;padding:0;min-height:44px;background:none;border:0;color:var(--ink);text-decoration:none;cursor:pointer}
.brand .brand-mark{display:block;width:2.25rem;height:2.25rem;flex:none;color:#c9d7df}
.brand .brand-wordmark{font:500 1.125rem/1.35 var(--serif);letter-spacing:.13em;color:var(--ink)}
@media(max-width:520px){.topbar .brand{gap:.5rem}.brand .brand-mark{width:2rem;height:2rem}.brand .brand-wordmark{font-size:1.0625rem;letter-spacing:.1em}}

/* Material studies: one canvas, a quiet center, and continuous light across the journey. */
.atmosphere{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:radial-gradient(ellipse at 16% 24%,#24222d80,transparent 57%),radial-gradient(ellipse at 85% 75%,#152a3370,transparent 60%),#07080b}
.atmosphere canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity 1.1s ease}
body[data-effect=silk] .atmosphere{background:radial-gradient(ellipse at 50% 40%,#43342070,transparent 70%),#0c0a08}
body[data-atmosphere=ready] .atmosphere canvas{opacity:1}
.atmosphere:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#05070b45 0%,#05070b10 38%,transparent 64%),linear-gradient(180deg,#04060932,transparent 26%,transparent 74%,#04060965);pointer-events:none}
body[data-effect=chrome] .atmosphere:after{background:radial-gradient(ellipse at 50% 45%,#05070b85 0%,#05070b30 36%,transparent 66%),linear-gradient(180deg,#04060925,transparent 34%,#04060935)}
body[data-effect=ether] .atmosphere:after{background:radial-gradient(ellipse at 50% 46%,#03060a35,transparent 63%),linear-gradient(180deg,#04060930,transparent 24%,transparent 73%,#04060960)}
.question-stage>h1,.question-stage>#questionForm,.question-stage>.question-examples,.question-stage>.recommendation{animation:none!important}
/* The stage timeline owns copy; gameplay alone owns the deck, card positions and flips. */
.stage[aria-hidden=true]{pointer-events:none}
@media(prefers-reduced-motion:reduce){.atmosphere canvas{transition:none}}

.poster-scroll-hint{margin:8px 0 0;text-align:center;color:var(--muted);font:400 .75rem/1.5 var(--sans);letter-spacing:.03em}
.poster-scroll-hint:not([hidden])+.share-controls{margin-top:14px}
.poster-preview:focus-visible{outline:1px solid var(--border-strong);outline-offset:3px}
.reading-retry-note{max-width:34rem;margin:.75rem auto 0;text-align:center;color:var(--muted);font:400 .8125rem/1.7 var(--sans)}

/* Research disclosure is visible before the visitor submits a reading. */
.reading-privacy{max-width:34rem;margin:.85rem auto 0;color:var(--muted);font:400 .875rem/1.7 var(--sans);text-align:center;letter-spacing:.015em}

/* Selected cards retain a clear gold frame; idle motion has its own transform layer. */
.card-presence{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
/* Explicitly switch the visible face at the flip midpoint across browser compositors. */
.card-inner:not(.is-face-up) .card-front,.card-inner.is-face-up .card-back{visibility:hidden}
.tarot-card::after{content:"";position:absolute;inset:-4px;pointer-events:none;border:2px solid #f6dfb3d9;border-radius:6px;box-shadow:0 0 0 1px #ebd2a344,0 0 15px #efcc8761,0 0 30px #d6a85642,inset 0 0 10px #efd49a24;opacity:0;transform:scale(.97);transition:opacity .28s ease,transform .28s ease}
.tarot-card.is-selected::after{opacity:1;transform:scale(1)}
.tarot-card.is-selected .card-back:before{animation:foil-pass 1.3s ease-out 1;opacity:.82}
.tarot-card.is-whispering .card-presence{animation:card-whisper .6s ease-in-out 1;will-change:transform}
@keyframes card-whisper{0%,100%{transform:translateY(0) rotate(0)}23%{transform:translateY(-12px) rotate(-2.8deg)}46%{transform:translateY(-9px) rotate(2.5deg)}68%{transform:translateY(-5px) rotate(-1.6deg)}84%{transform:translateY(-2px) rotate(.7deg)}}
.result-bottom{gap:.75rem;flex-wrap:wrap;margin-top:1.8rem}
.result-bottom .result-utility{min-height:44px;padding:.65rem 1.15rem;font:400 .9375rem/1.5 var(--sans);letter-spacing:.025em;border-color:#d5dadd48;background:#d5dadd07;color:var(--ink)}
.result-bottom .result-utility:hover{background:#d5dadd12;border-color:#d5dadd7a}
.recommendation-copy .spread-reason{max-width:22rem;margin:.5rem 0 0;font:400 .875rem/1.6 var(--sans);letter-spacing:.01em;color:var(--muted)}
.full-reading .reading-source{font-size:.875rem;line-height:1.75;letter-spacing:.01em}
.page-hidden .card-presence{animation:none!important}
@media(prefers-reduced-motion:reduce){.tarot-card::after{transition:none}.tarot-card.is-selected .card-back:before,.tarot-card.is-whispering .card-presence{animation:none!important}}

.coffee-support{margin:2.1rem auto .2rem;text-align:center}
.coffee-support>p{margin:0 0 .75rem;font:400 .875rem/1.6 var(--sans);color:var(--muted)}
.coffee-button{display:inline-flex;align-items:center;justify-content:center;gap:.65rem;min-height:46px;padding:.65rem 1rem;border:1px solid #d9c6a552;border-radius:999px;background:#d9c6a509;color:#d9cdb6;font:400 .9375rem/1.5 var(--sans);letter-spacing:.01em;cursor:pointer}
.coffee-button:hover{background:#d9c6a515;border-color:#d9c6a580}.coffee-button svg{width:21px;height:21px;flex:none}
.coffee-button small{padding-left:.6rem;border-left:1px solid #d9c6a52e;font:400 .8125rem/1.3 var(--sans);color:#c5b89e}
.coffee-dialog{max-width:440px}.coffee-intro{font:400 1rem/1.8 var(--sans);color:var(--ink)}
.coffee-qr{display:block;width:min(100%,320px);height:auto;max-height:360px;object-fit:contain;margin:1.2rem auto;border-radius:6px;-webkit-touch-callout:default;user-select:auto}
.coffee-actions{display:flex;flex-direction:column;align-items:stretch;gap:.6rem;margin:1.3rem 0}.coffee-actions a{text-align:center;text-decoration:none;font-family:var(--sans)}
.coffee-help,.coffee-note{font:400 .875rem/1.75 var(--sans);color:var(--muted)}.coffee-note{text-align:center;margin:1rem 0 0}

/* The existing card / B / star seal introduces the thought behind the site. */
.about-dialog{width:28.75rem;max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);max-height:calc(100svh - 2rem);max-height:calc(100dvh - 2rem - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));padding:1.5rem 1.625rem;overflow:hidden}
.about-dialog[open]{display:flex;flex-direction:column}
.about-dialog .dialog-heading{flex:none;align-items:center;margin-bottom:1.35rem}
.about-dialog .about-brand{margin:0;display:flex;align-items:center;color:#d7d2c8;line-height:1}
.about-dialog .brand-mark{display:block;width:3.25rem;height:3.25rem;flex:none}
.about-dialog .close-button{width:2.75rem;height:2.75rem;flex:none}
.about-dialog .about-copy{min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-right:.25rem;scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
.about-dialog .about-story{margin:0 0 1.35rem}
.about-dialog .about-story p{font:400 1rem/1.9 var(--serif);letter-spacing:.025em;color:var(--ink);opacity:.95;margin:0 0 .8rem}
.about-dialog .about-story p:last-child{margin-bottom:0}
.about-dialog .about-details{padding-top:1rem;border-top:1px solid var(--border-soft)}
.about-dialog .about-details p{margin:0;font:400 .875rem/1.7 var(--sans);letter-spacing:.01em;color:var(--muted);opacity:1}
.about-dialog .about-details a{display:block;margin:.45rem 0 0;font:400 .8125rem/1.65 var(--sans);letter-spacing:.01em}
@media(max-width:520px){.about-dialog{padding:1.25rem}.about-dialog .dialog-heading{margin-bottom:1.1rem}.about-dialog .about-story p{line-height:1.85}}

/* Keep the page's inset color consistent; browser-owned toolbar compositing varies. */
:root{--browser-surface:#0c0a08;--viewport-safe-top:env(safe-area-inset-top,0px);--viewport-safe-bottom:env(safe-area-inset-bottom,0px);--viewport-safe-left:env(safe-area-inset-left,0px);--viewport-safe-right:env(safe-area-inset-right,0px);--frame-header:94px;--frame-footer:58px;--header-padding-block:28px;--header-padding-inline:42px;--draw-padding-inline:40px}
html,body{background-color:var(--browser-surface)}
body{min-height:100vh;min-height:100svh}
.topbar{height:calc(var(--frame-header) + var(--viewport-safe-top));padding-top:calc(var(--header-padding-block) + var(--viewport-safe-top));padding-left:max(var(--header-padding-inline),var(--viewport-safe-left));padding-right:max(var(--header-padding-inline),var(--viewport-safe-right))}
.page-footer{height:calc(var(--frame-footer) + var(--viewport-safe-bottom));padding-bottom:var(--viewport-safe-bottom)}
#app>.stage{min-height:calc(100vh - var(--frame-header) - var(--frame-footer) - var(--viewport-safe-top) - var(--viewport-safe-bottom));min-height:calc(100svh - var(--frame-header) - var(--frame-footer) - var(--viewport-safe-top) - var(--viewport-safe-bottom))}
.draw-stage{padding-left:max(var(--draw-padding-inline),var(--viewport-safe-left));padding-right:max(var(--draw-padding-inline),var(--viewport-safe-right))}
@media(max-width:520px){:root{--frame-header:78px;--frame-footer:54px;--header-padding-block:22px;--header-padding-inline:24px;--draw-padding-inline:20px}}
@media(max-width:359px){:root{--header-padding-inline:18px}}

/* A warm, continuous breath belongs to the ritual, regardless of haptic support. */
.ritual-stage{overflow:hidden}
.ritual-stage .ritual-field{overflow:visible;pointer-events:none}
.ritual-stage .ritual-aura{inset:-30px -37px;z-index:0;filter:none;opacity:.72;transform:scale(.94);background:radial-gradient(ellipse at 50% 49%,#f8df9d68 0%,#e3b56748 22%,#bd873632 42%,#a9702715 59%,transparent 75%)}
.ritual-stage .ritual-deck{z-index:3;transform-origin:50% 65%}
.ritual-stage .ritual-card{border-color:#d9b9799c;box-shadow:0 13px 28px #0008,0 0 15px #e4b55e25,inset 0 0 0 1px #e6c58717}
.ritual-stage .ritual-card:nth-child(1){transform:translate(-11px,7px) rotate(-10deg)}
.ritual-stage .ritual-card:nth-child(2){transform:translate(11px,7px) rotate(10deg)}
.ritual-stage .ritual-card.c3{box-shadow:0 16px 32px #0008,0 0 24px #e4b55e36,inset 0 0 0 1px #ffe0a65c}
.ritual-stage .ritual-card::before,.ritual-stage .ritual-card::after{animation:none!important;opacity:0}
.ritual-stage .ritual-card-light{position:absolute;inset:-20% -70%;display:block;pointer-events:none;opacity:0;transform:translateX(-55%);background:linear-gradient(112deg,transparent 35%,#edbf6520 42%,#ffe7b18c 49%,#fff5decc 50%,#edbf6533 55%,transparent 64%);mix-blend-mode:screen}
.ritual-stage .ritual-orbit{position:absolute;width:244px;height:210px;z-index:1;border:1px solid #edc78259;border-left-color:#edc78214;border-bottom-color:#edc78229;border-radius:50%;transform:rotate(-23deg);opacity:.7;box-shadow:0 0 18px #dca4490c}
.ritual-stage .ritual-orbit::before,.ritual-stage .ritual-orbit::after{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#fff0cb;box-shadow:0 0 8px #ffdfa7,0 0 22px 5px #ecb95755}
.ritual-stage .ritual-orbit::before{left:24px;top:36px}
.ritual-stage .ritual-orbit::after{right:24px;bottom:36px;width:4px;height:4px;opacity:.65}
.ritual-stage .ritual-ripple{display:block;z-index:1;width:190px;height:245px;border-color:#e8bd7569;box-shadow:0 0 11px #e4b0600c;opacity:.22;transform:scale(.86)}
.ritual-stage #ritualRingFar{opacity:.12;transform:scale(1.06)}
.ritual-stage #ritualLabel{color:#f2dfb8;text-shadow:0 0 25px #e9bd582b}
body[data-stage=ritual] .ritual-field[data-motion=breathing] :is(.ritual-deck,.ritual-card,.ritual-aura,.ritual-orbit,.ritual-ripple,.ritual-card-light){will-change:transform,opacity}
@media(prefers-reduced-motion:reduce){.ritual-stage .ritual-field *{will-change:auto!important}.ritual-stage .ritual-card-light{display:none}}