:root{--ink:#272a30;--muted:#686b72;--line:#e5e6e7;--paper:#fafafa;--pink:#c4cbd9;--blue:#e2e6ed;font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default}a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #3a4459;outline-offset:5px}::selection{background:#19213088}header,main,footer{max-width:1080px;margin:auto;padding-left:40px;padding-right:40px}header{height:106px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:25px;font-weight:750;letter-spacing:-1.3px;display:inline-flex;align-items:center;gap:10px}.brand-star{font-size:29px;color:#a6afbf;font-weight:400}nav{display:flex;gap:30px;font-size:14px}nav a:last-child{display:flex;gap:10px}.skip{position:fixed;top:-60px;left:15px;background:#161d2c;padding:15px;z-index:99}.skip:focus{top:5px}h1,h2,h3,p{margin:0}h1{font-size:46px;line-height:1.42;letter-spacing:-2px;font-weight:650;word-break:keep-all}h2{font-size:23px;line-height:1.5;letter-spacing:-.6px;font-weight:650}h3{font-size:17px;line-height:1.5;font-weight:600}p{font-size:16px;line-height:1.85;word-break:keep-all}.home-intro{padding:69px 0 57px;position:relative}.kicker{font-size:12px;letter-spacing:1.6px;font-weight:600;display:block;color:var(--muted)}.home-intro .kicker{display:flex;align-items:center;gap:10px;margin-bottom:20px}.little-star{color:#a6afbf;font-size:22px}.home-intro p{margin-top:20px;color:var(--muted)}.pink-dot{color:#a6afbf}.quiet-label{font-size:13px;position:absolute;right:0;bottom:64px;color:var(--muted)}.section-heading{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:22px;gap:16px}.section-heading>span{font-size:11px;letter-spacing:1.5px;color:var(--muted)}.primary-grid,.secondary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.reading-tile{--tile:#e1e5ec;background:var(--tile);border-radius:13px;min-height:265px;padding:23px 19px 18px;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}.reading-tile:hover{transform:translateY(-4px);box-shadow:0 8px 18px #272a3010}.pink{--tile:#e4e7ee}.blue{--tile:#e5e9ef}.peach{--tile:#e0e4eb}.lilac{--tile:#e5e8ee}.mint{--tile:#dfe3eb}.sand{--tile:#dfe3eb}.yellow{--tile:#dde1e9}.tile-top{display:flex;align-items:center;justify-content:space-between;gap:5px;font-size:18px;font-weight:650;letter-spacing:-.5px}.pill{font-size:10px;letter-spacing:.3px;white-space:nowrap;font-weight:500;border:1px solid #323b4d26;border-radius:20px;padding:4px 6px}.tile-art{display:flex;justify-content:center;align-items:center;flex:1;min-height:145px}.tile-art>span{display:flex;align-items:center;justify-content:center;width:69px;height:98px;background:#151b2885;outline:1px solid #323b4d28;outline-offset:-6px;border:1px solid #323b4d20;border-radius:6px;font-family:'Hahmlet',serif;font-size:47px;transform:rotate(-10deg);box-shadow:8px 5px 0 #ffffff40;line-height:1}.reading-tile:nth-child(2n) .tile-art>span{transform:rotate(9deg)}.tile-bottom{font-size:13px;line-height:1.6;display:flex;justify-content:space-between;gap:7px;word-break:keep-all}.tile-bottom>span{font-size:17px}.secondary-heading{margin-top:42px}.small{min-height:175px;padding:19px}.small .tile-top{font-size:16px}.small .tile-art{min-height:68px;justify-content:flex-start}.small .tile-art>span{font-family:inherit;transform:none!important;outline:none;background:none;box-shadow:none;border:none;width:auto;height:55px;font-size:33px}.small .pill{display:none}.small .tile-bottom{font-size:12px}.how{display:grid;grid-template-columns:1fr 1.3fr;padding:64px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-top:65px;gap:40px}.how h2{margin-top:16px;font-size:28px}.how ol{list-style:none;margin:0;padding:0;display:grid;gap:24px}.how li{display:flex;gap:23px}.how li>span{font-family:'Hahmlet',serif;font-size:23px;color:#a6afbf}.how li p{color:var(--muted);font-size:14px}.about{max-width:620px;padding:65px 0}.about h2{margin:16px 0 20px}.about p{color:var(--muted)}.faq-section{padding:15px 0 65px}.faq-section>h2{margin-bottom:20px}details{border-bottom:1px solid var(--line)}summary{font-size:16px;line-height:1.6;cursor:pointer;padding:22px 32px 22px 0;position:relative;list-style:none}summary::-webkit-details-marker{display:none}summary:after{content:'+';position:absolute;right:5px;font-size:20px;color:var(--muted)}details[open] summary:after{content:'−'}details p{color:var(--muted);padding:0 30px 23px 0;font-size:15px}footer{border-top:1px solid var(--line);padding-top:36px;padding-bottom:28px}footer .brand{font-size:22px}footer>p{color:var(--muted);font-size:14px;margin-top:8px}footer .disclaimer{font-size:12px;max-width:720px;margin-top:22px;line-height:1.8}.footer-bottom{display:flex;gap:24px;color:var(--muted);font-size:12px;margin-top:28px}.footer-bottom>span:first-child{margin-right:auto}.back-link{display:inline-block;font-size:14px;color:var(--muted);margin-top:28px;text-decoration:underline;text-underline-offset:4px}.reading-intro{max-width:680px;margin:43px auto 34px;text-align:center}.reading-intro h1{margin-top:13px;font-size:42px}.reading-intro .lead{font-size:21px;margin-top:9px;color:var(--ink)}.reading-intro p:not(.lead){color:var(--muted);max-width:560px;margin:20px auto}.reading-meta{display:flex;justify-content:center;gap:20px;font-size:13px;color:var(--muted);margin-top:22px}.reading-meta span+span{border-left:1px solid var(--line);padding-left:20px}#reading-app{max-width:760px;margin:0 auto 60px}.question-panel{border:1px solid var(--line);border-radius:18px;background:#161d2c;padding:35px;box-shadow:0 6px 24px #24293203}.step-label{font-size:11px;letter-spacing:1.5px;color:#a6afbf;font-weight:600;display:block;margin-bottom:13px}.panel-heading h2{font-size:22px}.panel-heading p{color:var(--muted);font-size:15px;margin-top:9px}.question-panel>label{display:block;font-size:14px;margin:30px 0 10px;font-weight:600}.question-panel label>span{color:var(--muted);font-size:12px;font-weight:400;margin-left:8px}textarea{width:100%;resize:vertical;min-height:95px;max-height:250px;border:1px solid #617294;border-radius:9px;padding:15px;background:#151c29;color:var(--ink);line-height:1.7;font-size:16px}.privacy-note{font-size:12px;color:var(--muted);margin-top:8px}.button{border:0;border-radius:9px;min-height:53px;padding:15px 23px;display:flex;align-items:center;justify-content:center;gap:20px;font-size:16px;font-weight:550}.primary{background:var(--ink);color:white}.primary:hover{background:#2f3e5c}.question-panel .button{width:100%;margin-top:25px}.button>span{color:#ced3dc;font-size:22px}.button.secondary{background:#161d2c;color:var(--ink);border:1px solid var(--line)}fieldset{border:0;padding:0;margin:22px 0}legend{font-size:14px;margin-bottom:12px}.count-options{display:flex;gap:10px}.count-options label{flex:1;position:relative}.count-options input{position:absolute;opacity:0}.count-options label span{display:block;text-align:center;margin:0;border:1px solid var(--line);padding:12px;border-radius:8px;font-size:14px}.count-options input:checked+span{background:#171e2c;border-color:#3f4b61;color:var(--ink)}.count-options input:focus-visible+span{outline:3px solid #3a4459;outline-offset:3px}#form-error{font-size:14px;color:#a6afbf}.spread-info{max-width:760px;margin:0 auto 55px;border-top:1px solid var(--line);padding-top:40px}.spread-info h2{margin:12px 0 15px}.spread-info>p{color:var(--muted)}.spread-info ol{list-style:none;padding:0;display:grid;gap:20px;margin-top:28px}.spread-info li{display:flex;gap:19px}.spread-info li>span{font-family:'Hahmlet',serif;font-size:20px;color:#a6afbf}.spread-info li p{font-size:14px;color:var(--muted);margin-top:3px}[data-reading]>.faq-section{max-width:760px;margin:auto}.selection-heading{text-align:center;margin-bottom:26px}.selection-heading p{margin-top:9px;color:var(--muted);font-size:14px}.progress-dots{display:flex;justify-content:center;gap:8px;margin:18px 0}.progress-dots span{width:22px;height:4px;background:#171e2d;border-radius:3px}.progress-dots .filled{background:#617bad}.deck{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.card-button{padding:0;background:transparent;border:0;aspect-ratio:2/3;perspective:800px;border-radius:8px;min-width:0}.card-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .5s}.card-button.is-selected .card-inner{transform:rotateY(180deg)}.card-back,.card-front{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden}.card-front{transform:rotateY(180deg);background:#161d2b;border:1px solid #617294;padding:8px;color:var(--ink);gap:8px}.card-front strong{font-size:13px;line-height:1.3;word-break:keep-all}.card-front .card-number{font-family:'Hahmlet',serif;font-size:28px}.card-front small{font-size:10px}.picked-list{margin:25px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.picked-list span{font-size:12px;padding:6px 9px;border:1px solid var(--line);border-radius:5px;background:#161d2c}.selection-note{text-align:center;font-size:12px;color:var(--muted);margin-top:20px}.results-heading{text-align:center;margin:40px 0 28px}.results-heading h2{font-size:30px}.results-heading p{color:var(--muted);margin-top:10px}.question-echo{font-size:15px!important;overflow-wrap:anywhere;white-space:pre-wrap;padding:14px;border-radius:8px;background:#161d2b}.card-summary{display:flex;justify-content:center;gap:12px;margin-bottom:30px}.summary-item{flex:1;max-width:125px;text-align:center;min-width:0}.mini-card{aspect-ratio:2/3;border:1px solid #617294;background:#161d2b;border-radius:9px;outline:1px solid #505f7b66;outline-offset:-7px;display:flex;flex-direction:column;align-items:center;justify-content:space-around;padding:17px 9px}.mini-card.blue{background:#161d2b}.mini-card .roman{font-family:'Hahmlet',serif;font-size:28px;color:#a6afbf}.mini-card .card-symbol{font-size:34px;color:#a6afbf}.mini-card strong{font-size:13px;font-weight:500;word-break:keep-all}.summary-item>p{font-size:11px;margin-top:7px;color:var(--muted);line-height:1.6}.result-position{background:#161d2c;border:1px solid var(--line);border-radius:14px;padding:27px;margin-top:16px}.result-title{display:flex;gap:16px;align-items:flex-start;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:18px}.result-title>span{font-family:'Hahmlet',serif;color:#a6afbf;font-size:24px}.result-title h3{font-size:20px}.card-meta{font-size:13px!important;color:var(--muted);margin-top:4px}.keywords{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.keywords span{font-size:12px;background:#161d2b;padding:4px 9px;border-radius:5px}.result-position>p+p{margin-top:10px}.lens,.caution{font-size:14px!important;color:var(--muted);margin-top:12px!important}.caution{padding-top:12px;border-top:1px dashed var(--line)}.synthesis{padding:30px;background:#161d2b;border-radius:14px;margin-top:28px}.synthesis h2{margin-bottom:14px}.synthesis p+p{margin-top:14px}.verdict{padding:26px;background:#171e2d;border-radius:12px;margin:24px 0}.verdict h3{font-size:24px}.verdict p{font-size:14px;margin-top:10px}.related{margin-top:45px}.related h2{margin-bottom:18px}.related a{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:20px 0;border-bottom:1px solid var(--line)}.related a span{font-size:14px;color:var(--muted)}.related a strong{font-size:15px;white-space:nowrap}.result-actions{display:flex;gap:12px;margin-top:25px}.result-actions>*{flex:1}.safety-note{font-size:12px;color:var(--muted);line-height:1.8;margin:25px 0}.storage-warning{padding:14px;background:#171e2c;border-radius:8px;font-size:14px;margin:20px 0}.daily-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.daily-grid .result-position{margin:0}.daily-grid .result-position:first-child{grid-column:1/-1}.daily-grid h3{margin-bottom:12px}.legal{padding-top:60px;padding-bottom:70px;max-width:840px}.legal h1{font-size:34px;margin-bottom:25px}.legal h2{margin:30px 0 12px}.legal p{color:var(--muted);margin-bottom:15px}.legal>a{display:inline-flex;margin-top:20px;text-decoration:underline}[hidden]{display:none!important}.ad-slot{min-height:0}.loading-text{padding:35px;text-align:center}.result-focus:focus{outline:none}
@media(min-width:1400px){header,main,footer{max-width:1160px}.reading-tile{min-height:282px}.small{min-height:175px}.tile-art{min-height:155px}}
@media(max-width:800px){header,main,footer{padding-left:24px;padding-right:24px}.primary-grid,.secondary-grid{grid-template-columns:repeat(2,1fr)}.reading-tile{min-height:248px}.small{min-height:155px}.how{gap:22px}.tile-top{font-size:19px}.quiet-label{display:none}.deck{gap:10px}.primary-grid{gap:14px}}
@media(max-width:520px){header,main,footer{padding-left:20px;padding-right:20px}header{height:80px}.brand{font-size:22px}.brand-star{font-size:25px}nav{gap:18px;font-size:12px}nav a:last-child span{display:none}.home-intro{padding:43px 0 38px}.home-intro .kicker{font-size:10px;letter-spacing:1px;margin-bottom:18px}h1{font-size:33px;letter-spacing:-1.3px}.home-intro p{font-size:14px;line-height:1.8;margin-top:17px}.section-heading{margin-bottom:16px}.section-heading h2{font-size:19px}.section-heading>span{font-size:8px;letter-spacing:.7px}.primary-grid,.secondary-grid{gap:12px}.reading-tile{min-height:230px;padding:18px 15px 15px}.tile-top{font-size:17px;align-items:flex-start;flex-wrap:wrap;gap:8px}.pill{font-size:8px}.tile-art{min-height:134px}.tile-art>span{width:62px;height:88px;font-size:40px}.tile-bottom{font-size:12px}.tile-bottom>span{display:none}.small{min-height:160px;padding:17px 15px}.small .tile-top{font-size:15px}.small .tile-art{min-height:66px}.small .tile-bottom{font-size:11px}.secondary-heading{margin-top:30px}.how{grid-template-columns:1fr;margin-top:43px;padding:37px 0;gap:28px}.how h2{font-size:25px}.how li{gap:20px}.about{padding:40px 0}.about h2{font-size:24px}.about p{font-size:15px}.faq-section{padding-bottom:43px}.faq-section h2{font-size:20px}summary{font-size:15px;padding-top:19px;padding-bottom:19px}details p{font-size:14px}.footer-bottom{gap:15px;font-size:11px}footer .disclaimer{font-size:11px}.reading-intro{margin-top:30px}.reading-intro h1{font-size:33px}.reading-intro .lead{font-size:18px}.reading-intro p:not(.lead){font-size:15px}.question-panel{padding:24px 20px;border-radius:14px}.panel-heading h2{font-size:19px}.panel-heading p{font-size:14px}.question-panel>label>span{display:block;margin:6px 0 0}.deck{grid-template-columns:repeat(4,1fr);gap:10px}.card-front strong{font-size:11px}.card-front .card-number{font-size:22px}.card-front small{font-size:9px}.selection-heading h2{font-size:21px}.card-summary{gap:6px}.mini-card{padding:14px 6px;border-radius:6px;outline-offset:-4px}.mini-card .roman{font-size:20px}.mini-card .card-symbol{font-size:22px}.mini-card strong{font-size:10px}.summary-item>p{font-size:10px}.result-position{padding:22px 19px}.result-title{gap:12px}.result-title h3{font-size:18px}.result-position>p{font-size:15px}.synthesis{padding:23px 20px}.synthesis p{font-size:15px}.related a{align-items:flex-start;flex-direction:column;gap:6px}.result-actions{flex-direction:column}.daily-grid{grid-template-columns:1fr}.results-heading h2{font-size:27px}.spread-info li h3{font-size:16px}.verdict h3{font-size:21px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Pick a Card, edition 02 — paper, ink, and a measured editorial rhythm. */
:root{--ink:#2b2d30;--muted:#5f6570;--line:#c2c9d8;--paper:#eceef3;--wine:#3e4a61;--pink:#9ca8bf;--blue:#dce0e8;font-family:Arial,'Noto Sans KR',sans-serif;background:var(--paper)}
header,main,footer{max-width:1240px;padding-left:48px;padding-right:48px}header{height:112px}.brand{font-family:'Hahmlet',serif;font-weight:400;font-size:31px;letter-spacing:-1.2px;display:flex;flex-direction:column;align-items:flex-start;gap:5px}.brand small{font:10px Arial,sans-serif;letter-spacing:3px;color:var(--wine)}nav{font-size:14px;gap:28px}nav a{padding:12px 0}nav a:hover,.text-link:hover{color:var(--wine)}h1,h2{font-family:'Hahmlet',serif;font-weight:500}h1{font-size:54px;letter-spacing:-2px;line-height:1.4}h2{font-size:27px}.kicker,.step-label{font-size:12px;color:var(--wine);letter-spacing:1.8px}.home-intro{padding:58px 0 48px;display:grid;grid-template-columns:1.2fr 1fr;column-gap:70px}.home-intro .kicker{grid-column:1/-1;margin-bottom:22px}.home-intro h1{grid-column:1}.home-intro p{grid-column:2;grid-row:2;align-self:end;margin-bottom:10px;font-size:17px;line-height:2}.quiet-label{position:static;grid-column:1/-1;margin-top:22px;font-size:14px}.section-heading>span{font-size:12px}.primary-grid{gap:0;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}.reading-tile{background:transparent;border-radius:0;min-height:235px;padding:25px 23px 24px;border-right:1px solid var(--line);transition:background .2s}.reading-tile:last-child{border-right:0}.reading-tile:hover{transform:none;box-shadow:none;background:#171f2d}.tile-index{font:12px 'Hahmlet',serif;letter-spacing:1px;color:var(--wine);margin-bottom:30px}.tile-top{font-family:'Hahmlet',serif;font-size:25px;font-weight:500;letter-spacing:-1px;display:block}.tile-bottom{font-size:14px;margin-top:12px;line-height:1.7}.tile-link{font-size:13px;margin-top:auto;padding-top:25px;text-decoration:underline;text-underline-offset:5px;color:var(--wine)}.secondary-grid{gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.small{min-height:165px;padding:22px}.small .tile-index{margin-bottom:14px}.small .tile-top{font-size:20px}.small .tile-bottom{font-size:14px}.small .tile-link{display:none}.secondary-heading{margin-top:37px}.how{margin-top:54px;padding:45px 0;grid-template-columns:1fr 1fr}.how h2{font-size:30px}.how li>span{color:var(--wine)}.how li p{font-size:16px}.about{max-width:780px;padding:48px 0 36px}.about h2{font-size:30px}.about p+p{margin-top:14px}.trust-line{display:flex;gap:32px;margin-top:28px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:14px}.trust-line b{font:27px 'Hahmlet',serif;color:var(--wine);margin-right:8px}.guide-teaser{padding:24px 0 50px;max-width:780px}.guide-teaser h2{margin:14px 0 20px}.guide-teaser>a{display:block;border-bottom:1px solid var(--line);padding:16px 0;font-size:16px}.text-link{text-decoration:underline;text-underline-offset:5px;color:var(--wine)}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:35px}.footer-grid p{font-size:15px;color:var(--muted);margin-top:14px}.footer-grid h3{font-size:14px;margin-bottom:16px}.footer-grid>div>a:not(.brand){display:block;padding:7px 0;font-size:14px;color:var(--muted)}footer{padding-top:40px;padding-bottom:35px}footer .brand{font-size:30px}footer .disclaimer{font-size:13px}.footer-bottom{font-size:13px}.reading-intro{text-align:left;max-width:840px;margin:35px auto 30px}.reading-intro h1{font-size:45px}.reading-intro p:not(.lead){max-width:720px;margin:16px 0;font-size:16px}.reading-intro .lead{font-size:21px}.reading-meta{justify-content:flex-start;font-size:14px}#reading-app,.spread-info,[data-reading]>.faq-section{max-width:840px}.question-panel{background:#171e2c;border:0;border-top:1px solid var(--wine);border-bottom:1px solid var(--line);border-radius:0;box-shadow:none;padding:30px 35px}.panel-heading h2{font-size:25px}.panel-heading p{font-size:16px}.privacy-note{font-size:13px}.question-panel label>span{font-size:13px}textarea{border-radius:2px;background:var(--paper);border-color:#576786}.button{border-radius:2px;min-height:54px}.primary{background:var(--wine)}.primary:hover{background:#28354f}.button.secondary{background:transparent;border-color:#4f5e7a}.question-panel .button>span{display:none}.count-options label span{border-radius:0;font-size:16px}.count-options input:checked+span{background:#18202f;border-color:var(--wine)}.deck{grid-template-columns:repeat(13,minmax(0,1fr));gap:8px}.selection-heading{text-align:left}.progress-dots{justify-content:flex-start}.progress-dots .filled{background:var(--wine)}.card-button{border-radius:2px}.card-back,.card-front{border-radius:2px}.card-front{background:var(--paper);border-color:#4d5b76;padding:4px;gap:2px;overflow:hidden}.card-front strong,.card-front small{display:none}.card-front .card-number{font-size:15px}.card-front img{width:100%;height:72%;object-fit:cover}.card-front .deck-glyph{font-size:23px;line-height:1}.picked-list span{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;font-size:14px}.selection-note{font-size:14px}.results-heading{text-align:left;margin-top:25px}.results-heading h2{font-size:32px}.question-echo{background:#171f2d;border-radius:0}.card-summary{gap:16px;margin:30px 0 45px;justify-content:flex-start}.summary-item{max-width:150px}.mini-card,.mini-card.blue{position:relative;background:#171e2c;border:1px solid #4f5d79;border-radius:2px;outline:1px solid #586887;outline-offset:-5px;padding:10px 9px 12px;box-shadow:2px 4px 6px #20263212;justify-content:space-between;overflow:hidden}.mini-card .roman{font-size:15px;color:var(--wine);line-height:1.2}.mini-card strong{font-size:12px;line-height:1.4}.mini-card img{display:block;width:100%;height:75%;object-fit:cover;mix-blend-mode:multiply}.mini-card .deck-glyph{font:42px 'Hahmlet',serif;color:var(--wine);display:flex;flex-direction:column;align-items:center;justify-content:center;height:65%;gap:8px}.deck-glyph small{font:10px 'Hahmlet',serif;letter-spacing:2px}.is-reversed img,.is-reversed .deck-glyph{transform:rotate(180deg)}.summary-item>p{font-size:13px;line-height:1.6}.result-position{border:0;border-top:1px solid var(--line);background:transparent;border-radius:0;padding:30px 0;margin-top:0}.result-title{border-bottom:0;padding-bottom:0;margin-bottom:15px}.result-title>span{color:var(--wine)}.result-title h3{font-family:'Hahmlet',serif;font-size:22px}.result-position>p{font-size:16px;line-height:1.95}.card-meta{font-size:14px!important}.keywords span{background:#181f2e;font-size:13px;border-radius:0}.lens{font-size:14px!important}.synthesis{background:#171f2e;border-radius:0;border-top:2px solid var(--wine);padding:30px 32px}.synthesis p{font-size:16px}.safety-note{font-size:13px}.verdict{background:#18202e;border-radius:0}.related a span{font-size:16px}.related a strong{font-size:16px}.daily-grid{gap:20px}.spread-info li p{font-size:16px}.legal{max-width:900px;padding-top:50px;padding-bottom:65px}.legal h1{font-size:39px}.legal section{margin:35px 0}.legal p{font-size:17px}.guide-page .kicker{margin:25px 0 18px}.guide-list{margin-top:35px}.guide-list>a{display:flex;gap:25px;padding:25px 0;border-top:1px solid var(--line)}.guide-list>a>span{font:22px 'Hahmlet',serif;color:var(--wine)}.guide-list h2{font-size:24px;margin:0 0 10px}.guide-list p{font-size:16px;margin:0}.guide-next{border-top:1px solid var(--line);padding-top:25px;margin-top:35px}.guide-next .button{display:inline-flex}.detail-card{float:right;width:115px;margin:0 0 15px 25px}.detail-card .mini-card{height:173px}.result-position:after{content:'';display:block;clear:both}.artwork-note{font-size:13px!important;color:var(--muted)}
@media(min-width:1400px){header,main,footer{max-width:1240px}.reading-tile{min-height:235px}.small{min-height:165px}}
@media(max-width:800px){header,main,footer{padding-left:26px;padding-right:26px}header{height:102px}nav{gap:18px}.home-intro{column-gap:30px}h1{font-size:44px}.primary-grid,.secondary-grid{grid-template-columns:repeat(2,1fr)}.reading-tile:nth-child(2){border-right:0}.reading-tile:nth-child(n+3){border-top:1px solid var(--line)}.deck{grid-template-columns:repeat(10,minmax(0,1fr))}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.card-summary{gap:10px}.summary-item>p{font-size:12px}}
@media(max-width:520px){header,main,footer{padding-left:20px;padding-right:20px}header{height:auto;min-height:104px;flex-wrap:wrap;padding-top:18px;padding-bottom:13px;gap:16px}.brand{font-size:28px}.brand small{font-size:9px;letter-spacing:2px}nav{width:100%;gap:0;justify-content:space-between;font-size:14px}nav a{padding:5px 0}.home-intro{display:block;padding:35px 0}.home-intro h1{font-size:37px}.home-intro p{font-size:16px;margin-top:20px}.home-intro .kicker{font-size:11px;letter-spacing:1.4px}.quiet-label{display:block;margin-top:17px;font-size:13px}.section-heading h2{font-size:23px}.section-heading>span{font-size:10px;max-width:100px;text-align:right}.primary-grid,.secondary-grid{gap:0}.reading-tile{min-height:225px;padding:22px 15px}.tile-index{font-size:12px;margin-bottom:23px}.tile-top{font-size:23px}.tile-bottom{font-size:14px}.tile-link{font-size:14px;padding-top:20px}.small{min-height:172px;padding:20px 15px}.small .tile-top{font-size:19px}.small .tile-bottom{font-size:14px}.how{grid-template-columns:1fr;gap:25px;padding:35px 0}.how h2{font-size:28px}.about{padding:35px 0}.about h2{font-size:27px}.about p{font-size:16px}.trust-line{gap:18px;flex-wrap:wrap}.guide-teaser h2{font-size:25px}.footer-grid{grid-template-columns:1fr 1fr;gap:27px}.footer-grid>div:first-child{grid-column:1/-1}.footer-grid>div>a:not(.brand){font-size:14px}.footer-bottom,footer .disclaimer{font-size:12px}.reading-intro{margin-top:28px}.reading-intro h1{font-size:37px}.reading-intro p:not(.lead){font-size:16px}.reading-intro .lead{font-size:20px}.reading-meta{gap:12px;font-size:13px}.reading-meta span+span{padding-left:12px}.question-panel{padding:25px 20px;border-radius:0}.panel-heading h2{font-size:23px}.panel-heading p{font-size:16px}.question-panel label>span{font-size:13px}.deck{grid-template-columns:repeat(6,minmax(0,1fr));gap:7px}.selection-heading h2{font-size:25px}.card-summary{overflow-x:auto;justify-content:flex-start;padding:4px 2px 15px;gap:12px}.summary-item{flex:0 0 109px}.mini-card{padding:9px 7px 10px;border-radius:2px}.mini-card .roman{font-size:14px}.mini-card strong{font-size:12px}.summary-item>p{font-size:12px}.result-position{padding:25px 0}.result-position>p{font-size:16px}.result-title h3{font-size:21px}.synthesis{padding:25px 20px}.synthesis p{font-size:16px}.results-heading h2{font-size:29px}.daily-grid{display:block}.spread-info li h3{font-size:17px}.spread-info li p{font-size:16px}.detail-card{width:90px;margin-left:18px}.detail-card .mini-card{height:135px}.detail-card .deck-glyph{font-size:32px}.legal h1{font-size:31px}.legal p{font-size:16px}.guide-list h2{font-size:22px}.guide-list>a{gap:16px}.guide-list p{font-size:16px}.section-heading{align-items:center}.faq-section h2{font-size:24px}summary{font-size:16px}details p{font-size:16px}}
@media(max-width:360px){.deck{grid-template-columns:repeat(5,minmax(0,1fr))}.section-heading>span{display:none}.section-heading h2{font-size:23px}.home-intro h1{font-size:34px}}
/* Release polish: image slot stays stable, including failed image requests. */
.artwork-holder{position:relative;display:block;width:100%;height:75%;overflow:hidden}.artwork-holder>.deck-glyph{position:absolute;inset:0;height:100%;opacity:0}.mini-card .artwork-holder img,.card-front .artwork-holder img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:var(--paper)}.artwork-holder.image-failed>.deck-glyph{opacity:1}.card-front .artwork-holder{height:72%}.mini-card.is-reversed .artwork-holder img,.card-front.is-reversed .artwork-holder img{transform:rotate(180deg)}.card-front .artwork-holder .deck-glyph{font-size:22px}.card-front .artwork-holder small{display:none}.mini-card .artwork-holder .deck-glyph{height:100%}
nav a{min-height:44px;display:inline-flex;align-items:center}footer .footer-grid>div>a:not(.brand){min-height:40px;display:flex;align-items:center}

/* Pick a Card: two paths around one light. Artwork is rotationally symmetric. */
.card-back{background:#30405e url('/artwork/card-back.svg') center/100% 100% no-repeat;border:1px solid #323b4d;outline:0;box-shadow:0 1px 2px #272f3e16}
.card-back:before,.card-back:after{content:none}
.card-button{transition:transform .16s ease,box-shadow .16s ease}
.card-button[aria-pressed="true"]{outline:1px solid var(--wine);outline-offset:2px}
@media(hover:hover) and (pointer:fine){.card-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 3px 6px #272f3e20}}
.card-button:active:not(:disabled){transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.card-button{transition:none}.card-button:hover:not(:disabled),.card-button:active:not(:disabled){transform:none}}


/* UI polish: iPhone safe scroll, clearer selection artwork, quieter detail cards. */
.card-front{padding:3px;gap:1px}
.card-front .card-number{font-size:13px;line-height:1}
.card-front .artwork-holder{height:78%}
.card-front .artwork-holder img{transform:scale(1.1);transform-origin:center}
.card-front.is-reversed .artwork-holder img{transform:rotate(180deg) scale(1.1)}
.detail-card{width:102px}
.detail-card .mini-card{height:153px}
@media(max-width:520px){
  .card-front .card-number{font-size:12px}
  .detail-card{width:80px;margin-left:16px}
  .detail-card .mini-card{height:120px}
}


/* Global UI direction: sans-serif typography and a cleaner warm-white canvas. */
:root{--paper:#f8f9fa}
html,body{background:var(--paper)}
body,body *{font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif!important}


/* Theme v3 — bold card-based system inspired by Every Tiny Tool, using the existing Pick a Card palette. */
:root{
  --shadow:0 16px 40px rgba(48,43,43,.07);
  --shadow-soft:0 9px 26px rgba(48,43,43,.045);
}
html{color-scheme:light}
body{
  background:var(--paper);
  color:var(--ink);
  line-height:1.55;
}
header,main,footer{
  width:min(1180px,calc(100% - 32px));
  max-width:none;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0;
}
header{
  min-height:0;
  height:auto;
  padding:20px 0 18px;
  border-bottom:1px solid var(--line);
  gap:24px;
}
.brand{
  flex-direction:row;
  align-items:center;
  gap:9px;
  font-size:22px;
  font-weight:800;
  letter-spacing:-.045em;
  line-height:1;
}
.brand small{
  padding:6px 9px;
  border:1px solid rgba(174,194,217,.18);
  border-radius:999px;
  background:rgba(174,194,217,.07);
  color:var(--wine);
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
}
nav{
  gap:22px;
  font-size:14px;
  font-weight:800;
}
nav a{padding:9px 0}
h1,h2,h3{
  font-weight:800;
  letter-spacing:-.045em;
}
h1{
  font-size:clamp(46px,7vw,78px);
  line-height:.99;
}
h2{font-size:clamp(28px,4.2vw,44px);line-height:1.08}
h3{font-weight:800}
p{line-height:1.72}

.kicker,.step-label{
  display:inline-flex;
  width:max-content;
  align-items:center;
  margin:0 0 16px;
  padding:7px 11px;
  border-radius:999px;
  background:rgba(174,194,217,.08);
  color:var(--wine);
  font-size:12px;
  font-weight:800;
  letter-spacing:.08em;
}
.home-intro{
  display:block;
  max-width:980px;
  padding:74px 0 58px;
}
.home-intro .kicker{margin-bottom:20px}
.home-intro h1{
  max-width:920px;
  font-size:clamp(50px,8vw,86px);
  line-height:.96;
  letter-spacing:-.065em;
}
.home-intro p{
  max-width:720px;
  margin-top:23px;
  color:var(--muted);
  font-size:18px;
  line-height:1.72;
}
.quiet-label{
  display:inline-flex;
  position:static;
  margin-top:22px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
  font-size:13px;
  font-weight:750;
  background:#151b28;
}
.section-heading{
  align-items:flex-end;
  margin-bottom:22px;
}
.section-heading h2{
  font-size:clamp(32px,4.6vw,48px);
  line-height:1;
}
.section-heading>span{
  max-width:none;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:.1em;
}
.primary-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:16px;
  border:0;
}
.secondary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  border:0;
}
.reading-tile{
  min-height:280px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#151b28;
  box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
  overflow:hidden;
}
.reading-tile:last-child{border-right:1px solid var(--line)}
.reading-tile:nth-child(n+3){border-top:1px solid var(--line)}
.reading-tile:hover{
  transform:translateY(-4px);
  border-color:var(--pink);
  background:#151b28;
  box-shadow:0 20px 44px rgba(48,43,43,.09);
}
.tile-index{
  display:inline-flex;
  width:max-content;
  margin:0 0 42px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(174,194,217,.07);
  color:var(--wine);
  font-size:11px;
  font-weight:800;
}
.tile-top{
  font-size:clamp(27px,3vw,38px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:-.055em;
}
.tile-bottom{
  max-width:430px;
  margin-top:14px;
  color:var(--muted);
  font-size:15px;
  line-height:1.6;
}
.tile-link{
  padding-top:30px;
  color:var(--wine);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
}
.tile-link:after{content:'  →'}
.secondary-heading{margin-top:72px}
.small{
  min-height:230px;
  padding:23px;
}
.small .tile-index{margin-bottom:30px}
.small .tile-top{
  font-size:24px;
  line-height:1.05;
}
.small .tile-bottom{font-size:14px}
.small .tile-link{display:block;padding-top:22px}

.how,.about,.guide-teaser,.faq-section{
  max-width:none;
  border:1px solid var(--line);
  border-radius:28px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.how{
  grid-template-columns:.9fr 1.1fr;
  gap:42px;
  margin-top:76px;
  padding:36px;
}
.how h2{
  margin:6px 0 0;
  font-size:clamp(32px,4vw,46px);
  line-height:1.04;
}
.how ol{gap:14px}
.how li{
  gap:16px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
}
.how li>span{
  min-width:38px;
  color:var(--wine);
  font-size:16px;
  font-weight:800;
}
.how li h3{
  margin-bottom:4px;
  font-size:18px;
}
.how li p{font-size:14px}
.about{
  margin-top:18px;
  padding:38px;
}
.about h2{
  margin:10px 0 18px;
  max-width:760px;
  font-size:clamp(32px,4vw,46px);
}
.about p{max-width:820px}
.trust-line{
  gap:12px;
  margin-top:26px;
  padding:0;
  border:0;
  flex-wrap:wrap;
}
.trust-line span{
  padding:13px 15px;
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
  font-size:14px;
  font-weight:750;
}
.trust-line b{
  font-size:22px;
  font-weight:800;
}
.guide-teaser{
  margin-top:18px;
  padding:36px;
}
.guide-teaser h2{
  margin:10px 0 18px;
  font-size:clamp(30px,3.7vw,42px);
}
.guide-teaser>a{
  padding:17px 0;
  border-bottom:1px solid var(--line);
  font-weight:750;
}
.guide-teaser>.text-link{
  display:inline-flex;
  margin-top:18px;
  border:0;
  color:var(--wine);
  font-weight:800;
}
.home-intro + .readings-section{margin-top:6px}
main>.faq-section{
  margin-top:18px;
  padding:36px;
}
.faq-section .section-heading{margin-bottom:8px}
details{border-bottom:1px solid var(--line)}
summary{
  padding:20px 34px 20px 0;
  font-weight:800;
}
details p{padding-bottom:22px}

footer{
  margin-top:70px;
  padding-top:36px;
  padding-bottom:38px;
  border-top:1px solid var(--line);
}
footer .brand{font-size:22px}
.footer-grid{grid-template-columns:1.6fr 1fr 1fr}
.footer-grid h3{font-weight:800}

/* Reading pages */
.reading-intro{
  max-width:900px;
  margin:56px auto 34px;
  text-align:left;
}
.reading-intro h1{
  margin-top:10px;
  font-size:clamp(48px,7vw,78px);
  line-height:.97;
  letter-spacing:-.065em;
}
.reading-intro .lead{
  margin-top:18px;
  font-size:22px;
  font-weight:750;
}
.reading-intro p:not(.lead){
  max-width:720px;
  margin:15px 0;
}
.reading-meta{
  justify-content:flex-start;
  gap:8px;
  margin-top:22px;
}
.reading-meta span{
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#151b28;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.reading-meta span+span{
  padding-left:11px;
  border-left:1px solid var(--line);
}
#reading-app,.spread-info,[data-reading]>.faq-section{
  max-width:900px;
}
.question-panel{
  padding:30px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#151b28;
  box-shadow:var(--shadow);
}
.panel-heading h2{
  font-size:clamp(28px,3.6vw,38px);
  line-height:1.06;
}
.panel-heading p{margin-top:10px}
.question-panel>label{margin-top:26px}
textarea{
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--paper);
}
.button{
  min-height:54px;
  border-radius:15px;
  font-weight:800;
}
.primary{
  background:var(--wine);
  color:#edeff2;
}
.button.secondary{
  border:1px solid var(--line);
  background:#151b28;
}
.count-options label span{
  border-radius:14px;
  font-weight:800;
}
.count-options input:checked+span{
  background:rgba(174,194,217,.08);
  border-color:var(--wine);
}

.selection-heading{
  margin:44px 0 24px;
  text-align:left;
}
.selection-heading h2{
  max-width:700px;
  font-size:clamp(34px,5vw,52px);
  line-height:1.02;
}
.selection-heading p{
  margin-top:12px;
  font-size:15px;
}
.progress-dots{margin:17px 0 0}
.progress-dots span{
  width:34px;
  height:5px;
}
.deck{
  gap:8px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.card-button,.card-back,.card-front{border-radius:8px}
.picked-list{
  justify-content:flex-start;
  margin:18px 0 0;
  gap:7px;
}
.picked-list span{
  padding:7px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#151b28;
  font-size:12px;
  font-weight:750;
}
.selection-note{
  text-align:left;
  margin-top:14px;
}

.results-heading{
  margin:52px 0 26px;
  text-align:left;
}
.results-heading h2{
  max-width:720px;
  font-size:clamp(38px,5.5vw,60px);
  line-height:1;
}
.results-heading p{margin-top:13px}
.question-echo{
  margin-top:18px!important;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:16px;
  background:#151b28;
}
.card-summary{
  gap:12px;
  margin:28px 0 24px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.summary-item{max-width:145px}
.mini-card,.mini-card.blue{
  border-radius:12px;
  background:var(--paper);
  box-shadow:none;
}
.result-position{
  margin-top:14px;
  padding:26px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.result-title{
  align-items:center;
  gap:12px;
  margin-bottom:14px;
}
.result-title>span{
  display:grid;
  place-items:center;
  width:40px;
  height:40px;
  flex:0 0 40px;
  border-radius:12px;
  background:rgba(174,194,217,.08);
  color:var(--wine);
  font-size:14px;
  font-weight:800;
}
.result-title h3{
  font-size:23px;
  line-height:1.12;
}
.card-meta{margin-top:5px}
.keywords{margin:13px 0}
.keywords span{
  padding:6px 9px;
  border-radius:999px;
  background:rgba(174,194,217,.18);
  font-weight:800;
}
.synthesis{
  margin-top:18px;
  padding:30px;
  border:1px solid rgba(174,194,217,.18);
  border-radius:24px;
  background:rgba(174,194,217,.07);
}
.synthesis h2{
  font-size:clamp(30px,4vw,42px);
  line-height:1.05;
}
.verdict{
  padding:28px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.verdict h3{
  font-size:clamp(28px,4vw,40px);
  font-weight:800;
}
.related{
  margin-top:42px;
  padding:28px;
  border:1px solid var(--line);
  border-radius:24px;
  background:#151b28;
}
.related h2{
  margin-bottom:8px;
  font-size:30px;
}
.related a{
  padding:17px 0;
}
.related a strong{color:var(--wine)}
.result-actions{margin-top:16px}

.spread-info{
  margin-top:34px;
  padding:30px;
  border:1px solid var(--line);
  border-radius:26px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.spread-info h2{
  margin:8px 0 13px;
  font-size:clamp(30px,4vw,40px);
}
.spread-info ol{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.spread-info li{
  gap:12px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--paper);
}
.spread-info li>span{
  font-size:14px;
  font-weight:800;
}
[data-reading]>.faq-section{
  margin-top:18px;
  padding:30px;
}
[data-reading]>.faq-section>h2{
  font-size:32px;
}

/* Guide / legal pages */
.legal{
  width:min(900px,100%);
  margin:0 auto;
  padding-top:62px;
  padding-bottom:80px;
}
.legal>h1{
  margin-bottom:30px;
  font-size:clamp(46px,7vw,72px);
  line-height:.98;
}
.legal section,.legal>h2,.legal>p,.guide-list,.guide-next,.legal>.faq{
  position:relative;
}
.guide-list{
  display:grid;
  gap:14px;
  margin-top:30px;
}
.guide-list>a{
  gap:20px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#151b28;
  box-shadow:var(--shadow-soft);
}
.guide-list>a>span{
  width:42px;
  color:var(--wine);
  font-size:14px;
  font-weight:800;
}
.guide-list h2{
  margin-bottom:8px;
  font-size:26px;
}
.guide-next{
  padding:24px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#151b28;
}
.legal .faq{
  padding:26px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#151b28;
}

@media(max-width:900px){
  .secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr}
  .deck{grid-template-columns:repeat(10,minmax(0,1fr))}
}
@media(max-width:650px){
  header,main,footer{width:min(100% - 28px,1180px)}
  header{
    padding:16px 0 13px;
    flex-wrap:wrap;
    gap:10px;
  }
  .brand{font-size:20px}
  .brand small{font-size:8px}
  nav{
    width:100%;
    justify-content:space-between;
    gap:8px;
    font-size:12px;
  }
  nav a{min-height:36px}
  .home-intro{padding:48px 0 38px}
  .home-intro h1{font-size:clamp(46px,14vw,66px)}
  .home-intro p{font-size:16px}
  .section-heading{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
  }
  .section-heading>span{text-align:left}
  .primary-grid,.secondary-grid{grid-template-columns:1fr;gap:12px}
  .reading-tile,.small{
    min-height:0;
    padding:22px;
    border-radius:22px;
  }
  .tile-index,.small .tile-index{margin-bottom:28px}
  .tile-top,.small .tile-top{font-size:30px}
  .tile-bottom,.small .tile-bottom{font-size:14px}
  .secondary-heading{margin-top:54px}
  .how,.about,.guide-teaser,main>.faq-section{
    padding:24px;
    border-radius:22px;
  }
  .how{
    grid-template-columns:1fr;
    margin-top:54px;
  }
  .how li{padding:15px}
  .footer-grid{grid-template-columns:1fr 1fr}
  .reading-intro{margin-top:38px}
  .reading-intro h1{font-size:clamp(46px,13vw,64px)}
  .reading-meta{flex-wrap:wrap}
  .question-panel{padding:22px;border-radius:22px}
  .selection-heading{margin-top:36px}
  .selection-heading h2{font-size:36px}
  .deck{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:7px;
    padding:12px;
    border-radius:20px;
  }
  .card-summary{
    padding:14px;
    border-radius:20px;
  }
  .summary-item{flex:0 0 105px}
  .result-position{
    padding:22px 19px;
    border-radius:20px;
  }
  .detail-card{width:76px;margin-left:14px}
  .detail-card .mini-card{height:114px}
  .synthesis,.related,.spread-info,[data-reading]>.faq-section{
    padding:22px;
    border-radius:20px;
  }
  .spread-info ol{grid-template-columns:1fr}
  .related a{align-items:flex-start}
  .legal{padding-top:46px}
  .guide-list>a{padding:20px;border-radius:20px}
}
@media(max-width:360px){
  .deck{grid-template-columns:repeat(5,minmax(0,1fr))}
  .home-intro h1{font-size:43px}
}


/* Theme v4 — tarot-first card UI: stronger reading hierarchy, quiet paper, visible icon language. */
h1{line-height:1.08}
h2{line-height:1.18}
h3{line-height:1.35}
.home-intro h1,
.reading-intro h1,
.results-heading h2,
.selection-heading h2,
.legal>h1{line-height:1.08}

/* Editorial labels: less app-pill, more tarot publication. */
.kicker,.step-label{
  gap:7px;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--wine);
  font-size:11px;
  font-weight:800;
  letter-spacing:.13em;
}
.kicker:before,.step-label:before{
  content:'✦';
  font-size:10px;
  line-height:1;
}
.home-intro .kicker{margin-bottom:22px}

/* Reading cards: compact tarot catalogue with a clear icon language. */
.primary-grid,
.secondary-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}
.reading-tile,
.small{
  min-height:270px;
  padding:22px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#151b28;
  box-shadow:0 8px 24px rgba(48,43,43,.045);
}
.reading-tile:hover{
  transform:translateY(-3px);
  border-color:var(--pink);
  box-shadow:0 12px 30px rgba(48,43,43,.065);
}
.tile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:34px;
}
.tile-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:grid;
  place-items:center;
  border:1px solid rgba(174,194,217,.16);
  border-radius:14px;
  background:rgba(174,194,217,.14);
  color:var(--wine);
  font-size:22px;
  font-weight:800;
}
.tile-index,
.small .tile-index{
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-align:right;
}
.tile-top,
.small .tile-top{
  font-size:27px;
  line-height:1.14;
  letter-spacing:-.045em;
}
.tile-bottom,
.small .tile-bottom{
  margin-top:12px;
  font-size:14px;
  line-height:1.68;
}
.tile-link,
.small .tile-link{
  display:block;
  margin-top:auto;
  padding-top:24px;
  color:var(--wine);
  font-size:13px;
  font-weight:800;
}
.secondary-heading{margin-top:60px}

/* Keep the page card-based, but lighter and less SaaS-like. */
.how,.about,.guide-teaser,main>.faq-section,
.question-panel,.card-summary,.result-position,
.synthesis,.verdict,.related,.spread-info,
[data-reading]>.faq-section,.guide-list>a,.guide-next,.legal .faq{
  box-shadow:none;
}
.how,.about,.guide-teaser,main>.faq-section{
  border-radius:20px;
}
.how{
  margin-top:68px;
  padding:32px;
}
.how ol{gap:12px}
.how li{
  align-items:center;
  padding:16px;
  border-radius:16px;
  background:var(--paper);
}
.how li>span.how-icon{
  width:42px;
  height:42px;
  min-width:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(174,194,217,.16);
  border-radius:13px;
  background:#151b28;
  color:var(--wine);
  font-size:18px;
  font-weight:800;
}
.about,.guide-teaser,main>.faq-section{padding:32px}
.trust-line span{
  border-radius:13px;
  background:#151b28;
}

/* Reading flow: preserve readable tarot rhythm inside card surfaces. */
.reading-intro .lead{line-height:1.55}
.question-panel{
  border-radius:20px;
  padding:28px;
}
.panel-heading h2{line-height:1.16}
textarea{border-radius:12px}
.button{border-radius:12px}
.count-options label span{border-radius:12px}
.deck{
  border-radius:20px;
  padding:16px;
}
.results-heading p,
.selection-heading p{line-height:1.7}
.card-summary{border-radius:18px}
.result-position{
  border-radius:18px;
  padding:24px;
}
.result-title h3{line-height:1.25}
.result-position>p{line-height:1.9}
.synthesis,.verdict,.related,.spread-info,[data-reading]>.faq-section{
  border-radius:18px;
}
.synthesis{
  background:rgba(174,194,217,.055);
}
.related a{
  display:grid;
  grid-template-columns:42px 1fr auto;
  align-items:center;
  gap:12px;
}
.related-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border:1px solid rgba(174,194,217,.15);
  border-radius:13px;
  background:rgba(174,194,217,.14);
  color:var(--wine);
  font-size:18px;
  font-weight:800;
}
.related a>span:not(.related-icon){
  color:var(--muted);
  font-size:14px;
}
.related a strong{
  color:var(--wine);
  font-size:15px;
}
.spread-info li{border-radius:14px}
.guide-list>a{border-radius:18px}

@media(max-width:980px){
  .primary-grid,.secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .primary-grid,.secondary-grid{grid-template-columns:1fr}
  .reading-tile,.small{
    min-height:0;
    padding:20px;
    border-radius:18px;
  }
  .tile-head{margin-bottom:24px}
  .tile-icon{
    width:42px;
    height:42px;
    flex-basis:42px;
  }
  .tile-top,.small .tile-top{
    font-size:29px;
    line-height:1.16;
  }
  .how,.about,.guide-teaser,main>.faq-section{
    padding:22px;
    border-radius:18px;
  }
  .related a{
    grid-template-columns:40px 1fr;
  }
  .related a strong{
    grid-column:2;
    justify-self:start;
  }
  .related-icon{
    width:40px;
    height:40px;
    grid-row:1 / span 2;
  }
}


/* Theme v4.1 — large lower-right reading icons, four-up primary grid, near-white canvas. */
:root{--paper:#fbfcfd}
html,body{background:#151c29}

/* Four core readings stay visible in one row on wide screens. */
.primary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.secondary-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}

/* Reading cards: large icon anchored at the lower-right, like a tool-card visual cue. */
.reading-tile{
  position:relative;
  min-height:286px;
  padding:22px 22px 28px;
  overflow:hidden;
}
.tile-head{
  display:block;
  margin:0 0 32px;
}
.tile-index{
  display:block;
  width:auto;
  text-align:left;
}
.tile-icon{
  position:absolute;
  right:18px;
  bottom:18px;
  width:76px;
  height:76px;
  display:grid;
  place-items:center;
  border:1px solid rgba(174,194,217,.12);
  border-radius:22px;
  background:rgba(174,194,217,.14);
  color:var(--wine);
  font-size:38px;
  font-weight:800;
  line-height:1;
  pointer-events:none;
}
.tile-top,.small .tile-top{
  max-width:80%;
  font-size:27px;
  line-height:1.2;
}
.tile-bottom,.small .tile-bottom{
  max-width:72%;
  line-height:1.72;
}
.tile-link,.small .tile-link{
  max-width:70%;
  padding-top:24px;
}
.small{
  min-height:248px;
}
.small .tile-icon{
  width:68px;
  height:68px;
  right:16px;
  bottom:16px;
  border-radius:20px;
  font-size:32px;
}

/* Keep large headings, but give multi-line Korean titles a little more breathing room. */
h1{line-height:1.12}
.home-intro h1,
.reading-intro h1,
.legal>h1{line-height:1.1}
.results-heading h2,
.selection-heading h2{line-height:1.14}

@media(max-width:980px){
  .primary-grid,.secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  .primary-grid,.secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .reading-tile,.small{
    min-height:220px;
    padding:18px 16px 22px;
  }
  .tile-head{margin-bottom:22px}
  .tile-top,.small .tile-top{
    max-width:88%;
    font-size:23px;
    line-height:1.22;
  }
  .tile-bottom,.small .tile-bottom{
    max-width:86%;
    font-size:13px;
    line-height:1.65;
  }
  .tile-link,.small .tile-link{
    max-width:60%;
    font-size:12px;
    padding-top:18px;
  }
  .tile-icon,.small .tile-icon{
    right:13px;
    bottom:13px;
    width:58px;
    height:58px;
    border-radius:18px;
    font-size:28px;
  }
}
@media(max-width:380px){
  .primary-grid,.secondary-grid{grid-template-columns:1fr}
  .reading-tile,.small{min-height:210px}
}


/* Theme v5 — Every Tiny Tool style, tarot content, red accent, emoji-first cards. */
:root{
  --ink:#111111;
  --muted:#696969;
  --line:#ecedf0;
  --paper:#ffffff;
  --wine:#8090ae;
  --pink:#cad0dd;
  --red-soft:#f8f9fb;
  --red-soft-2:#f6f7f9;
  --shadow:0 16px 40px rgba(25,25,35,.06);
}
html,body{background:#151b28;color:var(--ink)}
body{line-height:1.55}
header,main,footer{width:min(1100px,calc(100% - 32px));max-width:none}
header{
  padding:22px 0 18px;
  height:auto;
  min-height:0;
  border-bottom:1px solid var(--line);
}
.brand{
  font-size:20px;
  font-weight:800;
  letter-spacing:-.04em;
}
.brand small{
  padding:0;
  border:0;
  background:transparent;
  color:var(--wine);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
}
nav{
  gap:20px;
  color:var(--muted);
  font-size:14px;
  font-weight:750;
}
nav a:hover{color:var(--ink)}

h1{
  font-size:clamp(46px,8vw,82px);
  line-height:1.06;
  letter-spacing:-.065em;
  font-weight:800;
}
h2{
  font-size:clamp(32px,5vw,48px);
  line-height:1.14;
  letter-spacing:-.05em;
  font-weight:800;
}
h3{
  letter-spacing:-.025em;
  font-weight:800;
}
p{line-height:1.68}

.home-intro{
  max-width:860px;
  padding:72px 0 48px;
}
.home-intro h1{
  margin:18px 0;
  max-width:900px;
  font-size:clamp(46px,8vw,82px);
  line-height:1.06;
}
.home-intro p{
  max-width:760px;
  margin:0;
  color:var(--muted);
  font-size:18px;
}
.kicker,.step-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:7px 11px;
  border-radius:999px;
  background:var(--red-soft-2);
  color:#a6afbf;
  font-size:13px;
  font-weight:800;
  letter-spacing:0;
}
.kicker:before,.step-label:before{content:none}
.quiet-label{
  display:inline-flex;
  margin-top:22px;
  padding:7px 11px;
  border:0;
  border-radius:999px;
  background:#151c2a;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

.section-heading{
  align-items:flex-end;
  margin-bottom:24px;
}
.section-heading h2{margin:14px 0 0}
.section-heading>span{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
}

.primary-grid,.secondary-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:16px;
}
.reading-tile,.small{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:0;
  min-height:330px;
  padding:26px;
  overflow:hidden;
  border:1px solid #617294;
  border-radius:26px;
  background:var(--red-soft);
  box-shadow:var(--shadow);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.reading-tile:nth-child(2n){background:#151c29}
.reading-tile:nth-child(3n){background:#151c29}
.reading-tile:hover{
  transform:translateY(-4px);
  border-color:#617294;
  box-shadow:0 18px 44px rgba(25,25,35,.075);
}
.tile-head{
  display:block;
  margin:0 0 26px;
}
.tile-index,.small .tile-index{
  display:block;
  margin:0;
  padding:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:800;
  letter-spacing:.06em;
  text-align:left;
}
.tile-top,.small .tile-top{
  max-width:84%;
  margin-bottom:9px;
  font-size:25px;
  line-height:1.15;
  letter-spacing:-.04em;
  font-weight:800;
}
.tile-bottom,.small .tile-bottom{
  max-width:78%;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
.tile-link,.small .tile-link{
  display:inline-block;
  max-width:72%;
  margin-top:auto;
  padding-top:24px;
  color:#a6afbf;
  font-size:13px;
  font-weight:800;
}
.tile-icon,.small .tile-icon{
  position:absolute;
  right:20px;
  bottom:20px;
  width:82px;
  height:82px;
  display:grid;
  place-items:center;
  border:1px solid rgba(23,31,47,.92);
  border-radius:22px;
  background:rgba(23,31,47,.88);
  box-shadow:0 7px 20px rgba(0,0,0,.045);
  color:inherit;
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:42px;
  font-weight:400;
  line-height:1;
  pointer-events:none;
}
.small{
  min-height:260px;
  padding:23px;
}
.small .tile-icon{
  right:18px;
  bottom:18px;
  width:72px;
  height:72px;
  border-radius:20px;
  font-size:36px;
}
.secondary-heading{margin-top:70px}

/* Every Tiny Tool-like information cards */
.how,.about,.guide-teaser,main>.faq-section{
  border:1px solid var(--line);
  border-radius:28px;
  background:#151b28;
  box-shadow:0 9px 26px rgba(0,0,0,.035);
}
.how{
  grid-template-columns:1fr 1.3fr;
  gap:28px;
  margin-top:90px;
  padding:34px;
}
.how h2{
  margin:14px 0 0;
  font-size:32px;
  line-height:1.18;
}
.how ol{gap:14px}
.how li{
  padding:20px;
  border:1px solid var(--line);
  border-radius:20px;
  background:#151b28;
}
.how li>span.how-icon{
  width:48px;
  height:48px;
  min-width:48px;
  border:0;
  border-radius:16px;
  background:var(--red-soft-2);
  color:#a6afbf;
  font-size:22px;
}
.about{
  max-width:none;
  margin-top:18px;
  padding:34px;
  background:#151c29;
  border-color:#617294;
}
.about h2{
  margin:13px 0 9px;
  font-size:32px;
  line-height:1.2;
}
.about p{max-width:760px}
.trust-line span{
  padding:12px 14px;
  border:1px solid #617294;
  border-radius:14px;
  background:#151b28;
}
.guide-teaser,main>.faq-section{
  margin-top:18px;
  padding:30px;
}
.guide-teaser h2{font-size:32px}
.guide-teaser>a{font-weight:750}

footer{
  padding:28px 0 42px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
footer .brand{color:var(--ink)}

/* Reading pages follow the same utility-card language. */
.reading-intro{
  max-width:860px;
  margin:0 auto;
  padding:62px 0 38px;
}
.reading-intro h1{
  margin:18px 0 18px;
  font-size:clamp(44px,7vw,72px);
  line-height:1.08;
}
.reading-intro .lead{
  color:var(--ink);
  font-size:20px;
  font-weight:800;
}
.reading-intro p:not(.lead){color:var(--muted)}
.reading-meta span{
  border:0;
  background:#151c2a;
  color:var(--muted);
}
.question-panel,.deck,.card-summary,.result-position,.verdict,.related,.spread-info,[data-reading]>.faq-section,.guide-list>a,.guide-next,.legal .faq{
  border:1px solid var(--line);
  border-radius:20px;
  background:#151b28;
  box-shadow:0 9px 26px rgba(0,0,0,.035);
}
.question-panel{padding:26px}
textarea{
  border:1px solid var(--line);
  background:#151c29;
}
.primary{
  background:#1e273a;
  color:#edeff2;
}
.count-options input:checked+span{
  border-color:#48556e;
  background:#151c2a;
  color:#a6afbf;
}
.selection-heading h2,.results-heading h2{line-height:1.12}
.deck{padding:16px}
.result-title>span{
  background:#151c2a;
  color:#a6afbf;
}
.keywords span{
  background:#151c2a;
  color:#a6afbf;
}
.synthesis{
  border:1px solid #617294;
  border-radius:20px;
  background:#151c29;
  box-shadow:none;
}
.related-icon{
  width:48px;
  height:48px;
  border:1px solid #617294;
  border-radius:16px;
  background:#151c29;
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:24px;
}
.related a strong{color:#a6afbf}
.spread-info li{
  border:1px solid var(--line);
  background:#151c29;
}
.guide-list>a:hover{border-color:#617294}

@media(max-width:900px){
  .primary-grid,.secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  header,main,footer{width:min(100% - 28px,1100px)}
  .home-intro{padding:48px 0 40px}
  .home-intro h1{font-size:clamp(44px,13vw,62px);line-height:1.08}
  .primary-grid,.secondary-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .reading-tile,.small{
    min-height:240px;
    padding:18px;
    border-radius:22px;
  }
  .tile-top,.small .tile-top{
    max-width:92%;
    font-size:22px;
  }
  .tile-bottom,.small .tile-bottom{
    max-width:90%;
    font-size:13px;
  }
  .tile-link,.small .tile-link{
    max-width:58%;
    font-size:12px;
  }
  .tile-icon,.small .tile-icon{
    right:13px;
    bottom:13px;
    width:62px;
    height:62px;
    border-radius:18px;
    font-size:31px;
  }
  .how,.about,.guide-teaser,main>.faq-section{
    padding:24px;
    border-radius:22px;
  }
  .how{grid-template-columns:1fr;margin-top:60px}
  .question-panel,.deck,.card-summary,.result-position,.verdict,.related,.spread-info,[data-reading]>.faq-section{
    border-radius:18px;
  }
}
@media(max-width:380px){
  .primary-grid,.secondary-grid{grid-template-columns:1fr}
}


/* Home v5.1 — Random Everything-inspired guide explainer and FAQ. */
.home-explainer,.home-faq{
  padding:32px 0 54px;
  border-top:1px solid var(--line);
}
.home-explainer{
  margin-top:72px;
}
.home-explainer .section-heading,
.home-faq .section-heading{
  display:block;
  max-width:720px;
  margin-bottom:20px;
}
.section-kicker{
  display:inline-block;
  margin-bottom:7px;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.07em;
}
.home-explainer .section-heading h2,
.home-faq .section-heading h2{
  margin:0;
  font-size:clamp(28px,4vw,40px);
  line-height:1.08;
  letter-spacing:-.045em;
}
.home-explainer .section-heading p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:15px;
}
.home-info-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.home-info-card{
  display:block;
  min-height:150px;
  padding:20px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
  box-shadow:0 8px 22px rgba(0,0,0,.035);
  transition:transform .18s ease,border-color .18s ease;
}
.home-info-card:hover{
  transform:translateY(-2px);
  border-color:#617294;
}
.home-info-card h3{
  margin:0 0 8px;
  font-size:18px;
  letter-spacing:-.025em;
}
.home-info-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.58;
}
.home-info-card span{
  display:inline-block;
  margin-top:16px;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
}
.explainer-link{
  display:inline-block;
  margin-top:17px;
  color:#a6afbf;
  font-size:13px;
  font-weight:800;
}
.faq-list{
  display:grid;
  gap:8px;
}
.faq-list details{
  border:1px solid #617294;
  border-radius:14px;
  padding:0 15px;
  background:#151c29;
}
.faq-list summary{
  cursor:pointer;
  padding:13px 30px 13px 0;
  font-weight:800;
  font-size:15px;
}
.faq-list p{
  margin:0;
  padding:0 0 14px;
  color:var(--muted);
  font-size:14px;
  line-height:1.6;
}
@media(max-width:720px){
  .home-info-grid{grid-template-columns:1fr}
  .home-explainer{margin-top:58px}
  .home-explainer,.home-faq{padding:28px 0 46px}
}


/* Home v5.2 — consistent white hover + polished About strip. */
/* Every reading card gets the same white hover treatment, regardless of nth-child tint. */
.primary-grid .reading-tile:hover,
.secondary-grid .reading-tile:hover{
  background:#151b28;
  border-color:#617294;
  box-shadow:0 18px 44px rgba(25,25,35,.075);
}

/* "미래를 정하는 답보다..." — a richer feature strip in the current red / white system. */
.about{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr);
  gap:34px;
  align-items:stretch;
  max-width:none;
  margin-top:72px;
  padding:36px;
  border:1px solid #617294;
  border-radius:28px;
  background:linear-gradient(135deg,#151c29 0%,#151c29 100%);
  box-shadow:0 12px 32px rgba(25,25,35,.045);
}
.about-copy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
  min-width:0;
}
.about .kicker{
  margin-bottom:14px;
  background:#151b28;
  color:#a6afbf;
  box-shadow:0 4px 12px rgba(0,0,0,.025);
}
.about h2{
  max-width:650px;
  margin:0;
  font-size:clamp(32px,4.4vw,46px);
  line-height:1.13;
  letter-spacing:-.05em;
}
.about-copy>p{
  max-width:650px;
  margin-top:17px;
  color:var(--muted);
  font-size:15px;
  line-height:1.72;
}
.about-link{
  display:inline-flex;
  align-items:center;
  margin-top:22px;
  color:#a6afbf;
  font-size:13px;
  font-weight:800;
}
.about-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.about-grid article{
  display:grid;
  grid-template-columns:54px minmax(0,1fr);
  gap:14px;
  align-items:center;
  padding:17px;
  border:1px solid rgba(174,194,217,.62);
  border-radius:18px;
  background:rgba(23,31,47,.86);
  box-shadow:0 7px 18px rgba(0,0,0,.028);
}
.about-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:16px;
  background:#151c2a;
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:27px;
  line-height:1;
}
.about-grid b{
  display:block;
  margin-bottom:3px;
  color:var(--ink);
  font-size:15px;
  font-weight:800;
  letter-spacing:-.02em;
}
.about-grid p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.48;
}

@media(max-width:760px){
  .about{
    grid-template-columns:1fr;
    gap:24px;
    margin-top:58px;
    padding:24px;
    border-radius:22px;
  }
  .about-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
  .about-grid article{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
    padding:15px;
  }
  .about-icon{
    width:48px;
    height:48px;
    border-radius:15px;
    font-size:24px;
  }
}
@media(max-width:560px){
  .about-grid{grid-template-columns:1fr}
  .about-grid article{
    display:grid;
    grid-template-columns:48px minmax(0,1fr);
    align-items:center;
  }
}


/* Home v5.3 + Guide v2 — white reading cards, soft-red hover, clean guide details. */
/* All eight reading cards: white by default, soft red on hover. */
.primary-grid .reading-tile,
.secondary-grid .reading-tile,
.primary-grid .reading-tile:nth-child(2n),
.primary-grid .reading-tile:nth-child(3n),
.secondary-grid .reading-tile:nth-child(2n),
.secondary-grid .reading-tile:nth-child(3n){
  background:#151b28;
  border-color:#617294;
}
.primary-grid .reading-tile:hover,
.secondary-grid .reading-tile:hover,
.primary-grid .reading-tile:nth-child(2n):hover,
.primary-grid .reading-tile:nth-child(3n):hover,
.secondary-grid .reading-tile:nth-child(2n):hover,
.secondary-grid .reading-tile:nth-child(3n):hover{
  background:#151c2a;
  border-color:#617294;
  box-shadow:0 18px 44px rgba(174,194,217,.09);
}
.primary-grid .reading-tile:hover .tile-icon,
.secondary-grid .reading-tile:hover .tile-icon{
  background:#151b28;
  border-color:#617294;
}

/* Guide detail pages: isolate from legacy legal-page rules and restore a clean reading rhythm. */
.guide-detail{
  width:min(820px,100%);
  margin:0 auto;
  padding:0 0 12px;
}
.guide-detail>.back-link{
  display:inline-flex;
  align-items:center;
  margin:0 0 28px;
  color:var(--muted);
  font-size:13px;
  font-weight:800;
  text-decoration:none;
}
.guide-detail>.back-link:hover{color:#a6afbf}

.guide-hero{
  margin:0 0 34px;
  padding:0 0 34px;
  border-bottom:1px solid var(--line);
}
.guide-hero .kicker{
  margin:0 0 16px;
  padding:7px 11px;
  background:#151c2a;
  color:#a6afbf;
  border-radius:999px;
  letter-spacing:0;
}
.guide-hero h1{
  max-width:760px;
  margin:0;
  font-size:clamp(40px,6vw,64px);
  line-height:1.12;
  letter-spacing:-.055em;
  font-weight:800;
  word-break:keep-all;
}
.guide-hero .lead{
  max-width:700px;
  margin:18px 0 0;
  color:var(--muted);
  font-size:18px;
  line-height:1.72;
  font-weight:500;
}

.guide-article{
  display:grid;
  gap:14px;
}
.guide-section{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  gap:18px;
  margin:0!important;
  padding:24px;
  border:1px solid #617294;
  border-radius:20px;
  background:#151b28;
  box-shadow:0 8px 22px rgba(0,0,0,.03);
}
.guide-section-number{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:13px;
  background:#151c2a;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.guide-section h2{
  margin:2px 0 9px;
  color:var(--ink);
  font-size:22px;
  line-height:1.3;
  letter-spacing:-.035em;
  font-weight:800;
}
.guide-section p{
  margin:0!important;
  color:var(--muted)!important;
  font-size:16px!important;
  line-height:1.82;
  word-break:keep-all;
}

.guide-detail .guide-next{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:18px 0 0!important;
  padding:22px;
  border:1px solid #617294;
  border-radius:20px;
  background:#151c29;
  box-shadow:none;
}
.guide-next>div{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.guide-next-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#151b28;
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:25px;
  box-shadow:0 5px 14px rgba(0,0,0,.03);
}
.guide-next strong{
  display:block;
  margin-bottom:4px;
  font-size:15px;
  font-weight:800;
}
.guide-next p{
  margin:0!important;
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.5;
}
.guide-detail .guide-next .button{
  flex:0 0 auto;
  min-height:44px;
  margin:0;
  padding:11px 15px;
  border-radius:13px;
  white-space:nowrap;
  text-decoration:none;
}

@media(max-width:720px){
  .guide-detail>.back-link{margin-bottom:22px}
  .guide-hero{margin-bottom:24px;padding-bottom:26px}
  .guide-hero h1{font-size:clamp(36px,11vw,52px);line-height:1.14}
  .guide-hero .lead{font-size:16px}
  .guide-section{
    grid-template-columns:40px minmax(0,1fr);
    gap:14px;
    padding:19px;
    border-radius:18px;
  }
  .guide-section-number{
    width:36px;
    height:36px;
    border-radius:12px;
  }
  .guide-section h2{font-size:20px}
  .guide-section p{font-size:15px!important;line-height:1.78}
  .guide-detail .guide-next{
    align-items:stretch;
    flex-direction:column;
    padding:19px;
    border-radius:18px;
  }
  .guide-detail .guide-next .button{width:100%;justify-content:center}
}


/* Home v5.4 — border-only reading hover and isolated guide hero. */
/* Match Reading notes hover: keep white fill, accent only the border. */
.primary-grid .reading-tile:hover,
.secondary-grid .reading-tile:hover,
.primary-grid .reading-tile:nth-child(2n):hover,
.primary-grid .reading-tile:nth-child(3n):hover,
.secondary-grid .reading-tile:nth-child(2n):hover,
.secondary-grid .reading-tile:nth-child(3n):hover{
  background:#151b28;
  border-color:#617294;
  box-shadow:var(--shadow);
}

/* Guide hero must not inherit the global site <header> flex layout. */
.guide-detail .guide-hero{
  display:block;
  width:100%;
  max-width:none;
  height:auto;
  min-height:0;
  margin:0 0 34px;
  padding:0 0 34px;
  border-bottom:1px solid var(--line);
}


/* Reading form spacing — separate the step capsule from the question heading. */
.panel-heading .step-label{
  margin-bottom:14px;
}
@media(max-width:650px){
  .panel-heading .step-label{margin-bottom:12px}
}


/* Reading-page FAQ alignment — reuse the home FAQ component at reading width. */
[data-reading]>.reading-faq{
  width:min(900px,100%);
  max-width:900px;
  margin:34px auto 0;
}


/* Reading spread v2 — match the current white-card / red-accent system. */
.spread-info{
  width:min(900px,100%);
  max-width:900px;
  margin:34px auto 0;
  padding:32px 0 4px;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.spread-head{
  max-width:760px;
  margin-bottom:22px;
}
.spread-head .section-kicker{
  margin-bottom:8px;
}
.spread-head h2{
  margin:0;
  font-size:clamp(30px,4vw,40px);
  line-height:1.12;
  letter-spacing:-.045em;
}
.spread-head>p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.72;
}
.spread-info ol{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0;
  padding:0;
  list-style:none;
}
.spread-info li{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  gap:14px;
  align-items:start;
  margin:0;
  padding:19px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
  box-shadow:0 8px 22px rgba(0,0,0,.03);
}
.spread-info li>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#151c2a;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.spread-info li h3{
  margin:1px 0 6px;
  color:var(--ink);
  font-size:17px;
  line-height:1.35;
  letter-spacing:-.025em;
  font-weight:800;
}
.spread-info li p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}
@media(max-width:650px){
  .spread-info{
    margin-top:28px;
    padding-top:26px;
  }
  .spread-head{margin-bottom:18px}
  .spread-info ol{grid-template-columns:1fr}
  .spread-info li{
    grid-template-columns:38px minmax(0,1fr);
    gap:12px;
    padding:17px;
    border-radius:16px;
  }
  .spread-info li>span{
    width:34px;
    height:34px;
    border-radius:11px;
  }
}


/* Mobile home reading headings — keep both section titles left aligned. */
@media(max-width:650px){
  .readings-section>.section-heading{
    align-items:flex-start;
    text-align:left;
  }
  .readings-section>.section-heading h2,
  .readings-section>.section-heading>span{
    width:100%;
    text-align:left;
  }
}


/* Mobile guide gutters — explicit side breathing room for guide index and details. */
@media(max-width:720px){
  main.legal.guide-page{
    width:calc(100% - 32px);
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
    padding-left:0;
    padding-right:0;
  }
  .guide-detail,
  .guide-list{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .guide-list>a,
  .guide-section,
  .guide-detail .guide-next{
    max-width:100%;
    min-width:0;
  }
  .guide-list>a>div,
  .guide-section>div,
  .guide-next>div{
    min-width:0;
  }
}
@media(max-width:380px){
  main.legal.guide-page{
    width:calc(100% - 28px);
  }
}


/* Compact mobile boxes + standalone FAQ refresh. */
.faq-page-shell{
  width:100%;
  max-width:900px;
  margin:0 auto;
}
.faq-page-hero{
  max-width:720px;
  margin-bottom:22px;
}
.faq-page-hero .section-kicker{
  margin-bottom:8px;
}
.faq-page-hero h1{
  margin:0;
  font-size:clamp(40px,6vw,64px);
  line-height:1.08;
  letter-spacing:-.05em;
}
.faq-page-hero p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.faq-page-shell .faq-list{
  width:100%;
  max-width:100%;
}
.faq-page-shell .faq-list details{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.faq-guide-link{
  margin-top:18px;
}

@media(max-width:760px){
  .about{
    padding:12px;
  }
}
@media(max-width:650px){
  .question-panel,
  .guide-teaser,
  main>.faq-section{
    padding:12px;
  }
  .faq-page-shell{
    width:100%;
    max-width:100%;
    margin:0;
  }
  .faq-page-hero{
    margin-bottom:18px;
  }
  .faq-page-hero h1{
    font-size:clamp(36px,11vw,50px);
  }
  .faq-page-shell .faq-list details{
    padding-left:12px;
    padding-right:12px;
  }
}


/* Mobile guide index cards — match the site's white-card / red-accent language. */
@media(max-width:720px){
  .guide-list{
    display:grid;
    gap:10px;
    margin-top:24px;
  }
  .guide-list>a{
    position:relative;
    display:grid;
    grid-template-columns:38px minmax(0,1fr) 18px;
    gap:12px;
    align-items:start;
    padding:14px;
    border:1px solid #617294;
    border-radius:16px;
    background:#151b28;
    box-shadow:0 7px 18px rgba(0,0,0,.025);
  }
  .guide-list>a>span{
    width:36px;
    height:36px;
    display:grid;
    place-items:center;
    margin:0;
    border-radius:11px;
    background:#151c2a;
    color:#a6afbf;
    font-family:Inter,Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans KR",Arial,sans-serif!important;
    font-size:11px;
    font-weight:800;
    line-height:1;
  }
  .guide-list>a::after{
    content:'→';
    align-self:center;
    color:#a6afbf;
    font-size:16px;
    font-weight:800;
    line-height:1;
  }
  .guide-list h2{
    margin:0 0 5px;
    color:var(--ink);
    font-size:17px;
    line-height:1.35;
    letter-spacing:-.03em;
    font-weight:800;
    word-break:keep-all;
  }
  .guide-list p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.58;
    word-break:keep-all;
  }
  .guide-list>a:hover,
  .guide-list>a:focus-visible{
    border-color:#617294;
    background:#151b28;
    box-shadow:0 8px 20px rgba(174,194,217,.05);
  }
}


/* Result rhythm + service/privacy pages — final polish. */
/* Give result labels the same breathing room used elsewhere on the site. */
.results-heading .step-label{
  margin-bottom:14px;
}
.synthesis .step-label{
  margin-bottom:14px;
}
.results-heading h2,
.synthesis h2{
  margin-top:0;
}

/* Related reading list: the final row should end cleanly, without an extra rule. */
.related a:last-child{
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0;
}

/* Service info / privacy pages */
.info-legal{
  width:min(900px,100%);
}
.info-page{
  width:100%;
  max-width:900px;
  margin:0 auto;
}
.info-hero{
  width:100%;
  max-width:none;
  margin-bottom:28px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.info-hero .section-kicker{
  margin-bottom:9px;
}
.info-hero h1{
  margin:0;
  font-size:clamp(42px,6vw,64px);
  line-height:1.08;
  letter-spacing:-.055em;
  font-weight:800;
  word-break:keep-all;
}
.info-hero p{
  max-width:680px;
  margin:15px 0 0;
  color:var(--muted);
  font-size:16px;
  line-height:1.72;
}
.info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.info-card{
  display:grid;
  grid-template-columns:50px minmax(0,1fr);
  gap:15px;
  align-items:start;
  margin:0!important;
  padding:22px;
  border:1px solid #617294;
  border-radius:20px;
  background:#151b28;
  box-shadow:0 8px 22px rgba(0,0,0,.03);
}
.info-card-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#151c2a;
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:24px;
  line-height:1;
}
.info-card h2{
  margin:1px 0 8px!important;
  color:var(--ink);
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.03em;
  font-weight:800;
}
.info-card p{
  margin:0!important;
  color:var(--muted)!important;
  font-size:14px!important;
  line-height:1.72;
}
.info-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin-top:18px;
  padding:18px 2px 0;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
.info-footer .explainer-link{
  margin:0;
  flex:0 0 auto;
}

@media(max-width:650px){
  .results-heading .step-label,
  .synthesis .step-label{
    margin-bottom:12px;
  }
  .related a:last-child{
    padding-bottom:0;
  }
  .info-legal,
  main.legal.guide-page:has(.info-page){
    width:calc(100% - 28px);
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
  }
  .info-hero{
    margin-bottom:20px;
    padding-bottom:22px;
  }
  .info-hero h1{
    font-size:clamp(36px,11vw,50px);
  }
  .info-hero p{
    font-size:15px;
  }
  .info-grid{
    grid-template-columns:1fr;
    gap:10px;
  }
  .info-card{
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    padding:14px;
    border-radius:16px;
  }
  .info-card-icon{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:21px;
  }
  .info-card h2{
    font-size:17px;
  }
  .info-card p{
    font-size:13px!important;
    line-height:1.65;
  }
  .info-footer{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    padding-top:14px;
  }
}


/* Selection card label fit + FAQ disclosure alignment. */
/* Long court labels such as KNIGHT should never escape the selected card face. */
.card-front .card-number{
  display:block;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:clip;
}
.card-front .card-number.is-long{
  font-size:9px;
  letter-spacing:-.04em;
}
@media(max-width:520px){
  .card-front .card-number.is-long{font-size:8px}
}

/* Center FAQ + / − controls vertically instead of letting baseline positioning drop them. */
.faq-list summary{
  position:relative;
}
.faq-list summary::after{
  top:50%;
  right:2px;
  transform:translateY(-50%);
  line-height:1;
}


/* Clear reading takeaway + concrete situation examples. */
.reading-answer{
  width:min(900px,100%);
  margin:0 auto 22px;
  padding:20px 22px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151c29;
}
.reading-answer>span{
  display:block;
  margin-bottom:7px;
  color:#a6afbf;
  font-size:11px;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.reading-answer>strong{
  display:block;
  color:var(--ink);
  font-size:clamp(20px,3vw,28px);
  line-height:1.42;
  letter-spacing:-.035em;
  font-weight:800;
  word-break:keep-all;
}
.context-example{
  display:grid;
  grid-template-columns:104px minmax(0,1fr);
  gap:12px;
  align-items:start;
  margin:18px 0 0!important;
  padding:14px 15px;
  border:1px solid #617294;
  border-radius:14px;
  background:#151c29;
}
.context-example strong{
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
}
.context-example span{
  color:#a6afbf;
  font-size:14px;
  line-height:1.7;
}
@media(max-width:650px){
  .reading-answer{
    margin-bottom:18px;
    padding:16px;
    border-radius:16px;
  }
  .reading-answer>strong{
    font-size:20px;
    line-height:1.45;
  }
  .context-example{
    grid-template-columns:1fr;
    gap:5px;
    padding:13px;
    border-radius:13px;
  }
  .context-example span{
    font-size:13px;
  }
}


/* Timing flow + next action cards. */
.reading-insights{
  width:min(900px,100%);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:0 auto 24px;
}
.insight-card{
  min-width:0;
  padding:18px 19px;
  border:1px solid #617294;
  border-radius:17px;
  background:#151b28;
}
.insight-card.timing-card{
  border-color:#617294;
  background:#151c29;
}
.insight-label{
  display:block;
  margin-bottom:7px;
  color:#a6afbf;
  font-size:11px;
  font-weight:800;
  letter-spacing:.05em;
}
.insight-card>strong{
  display:block;
  margin-bottom:8px;
  color:var(--ink);
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.03em;
  font-weight:800;
}
.insight-card>p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
@media(max-width:650px){
  .reading-insights{
    grid-template-columns:1fr;
    gap:10px;
    margin-bottom:18px;
  }
  .insight-card{
    padding:14px;
    border-radius:15px;
  }
  .insight-card>strong{
    font-size:19px;
  }
  .insight-card>p{
    font-size:13px;
    line-height:1.65;
  }
}


/* Tarot card dictionary — 78-card SEO library. */
.explainer-links{
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  align-items:center;
}
.card-library-page,
.card-dictionary-page{
  width:min(1100px,calc(100% - 32px));
  max-width:1100px;
  margin:0 auto;
  padding:58px 0 82px;
}
.card-library-hero{
  max-width:820px;
  margin-bottom:46px;
}
.card-library-hero .section-kicker{
  margin-bottom:9px;
}
.card-library-hero h1{
  margin:0;
  font-size:clamp(44px,7vw,72px);
  line-height:1.07;
  letter-spacing:-.06em;
  font-weight:800;
  word-break:keep-all;
}
.card-library-hero>p{
  max-width:760px;
  margin:16px 0 0;
  color:var(--muted);
  font-size:17px;
  line-height:1.74;
}
.card-library-jump{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:22px;
}
.card-library-jump a{
  display:inline-flex;
  align-items:center;
  min-height:38px;
  padding:8px 12px;
  border:1px solid #617294;
  border-radius:999px;
  background:#151b28;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.card-library-jump a:hover,
.card-library-jump a:focus-visible{
  border-color:#617294;
  color:#a6afbf;
}
.card-library-group{
  scroll-margin-top:24px;
  margin-top:52px;
  padding-top:34px;
  border-top:1px solid var(--line);
}
.card-library-group:first-of-type{
  margin-top:0;
}
.card-library-group-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:18px;
}
.card-library-group-head .section-kicker{
  margin-bottom:7px;
}
.card-library-group-head h2{
  margin:0;
  font-size:clamp(28px,4vw,40px);
  line-height:1.1;
  letter-spacing:-.045em;
}
.card-library-group-head>p{
  max-width:430px;
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
  text-align:right;
}
.card-library-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.card-library-tile{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  gap:14px;
  align-items:center;
  min-width:0;
  padding:14px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
  color:inherit;
  text-decoration:none;
  box-shadow:0 7px 18px rgba(0,0,0,.025);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.card-library-tile:hover,
.card-library-tile:focus-visible{
  transform:translateY(-2px);
  border-color:#617294;
  box-shadow:0 10px 24px rgba(174,194,217,.05);
}
.card-library-thumb{
  width:82px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid #617294;
  border-radius:11px;
  background:#151c2a;
}
.card-library-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-library-copy{
  min-width:0;
}
.card-library-copy small{
  display:block;
  margin-bottom:4px;
  color:#a6afbf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.03em;
}
.card-library-copy strong{
  display:block;
  color:var(--ink);
  font-size:17px;
  line-height:1.25;
  letter-spacing:-.03em;
  font-weight:800;
}
.card-library-copy>span{
  display:block;
  margin-top:2px;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  line-height:1.4;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.card-library-copy em{
  display:block;
  margin-top:8px;
  color:#a6afbf;
  font-size:11px;
  font-style:normal;
  line-height:1.5;
}

.card-breadcrumb{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px;
  margin-bottom:26px;
  color:var(--muted);
  font-size:12px;
  font-weight:750;
}
.card-breadcrumb a{
  color:inherit;
  text-decoration:none;
}
.card-breadcrumb a:hover{color:#a6afbf}
.card-dictionary-detail{
  width:100%;
}
.card-dictionary-hero{
  display:grid;
  grid-template-columns:minmax(210px,250px) minmax(0,1fr);
  gap:38px;
  align-items:center;
  padding-bottom:38px;
  border-bottom:1px solid var(--line);
}
.card-dictionary-art{
  width:100%;
  max-width:250px;
  aspect-ratio:2/3;
  overflow:hidden;
  border:1px solid #617294;
  border-radius:20px;
  background:#151c2a;
  box-shadow:0 14px 32px rgba(0,0,0,.055);
}
.card-dictionary-art img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.card-dictionary-intro .section-kicker{
  margin-bottom:11px;
}
.card-dictionary-intro h1{
  margin:0;
  color:var(--ink);
  font-size:clamp(42px,6vw,68px);
  line-height:1.05;
  letter-spacing:-.06em;
  font-weight:800;
  word-break:keep-all;
}
.card-dictionary-intro h1 span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:.42em;
  line-height:1.25;
  letter-spacing:-.025em;
  font-weight:750;
}
.card-dictionary-lead{
  max-width:690px;
  margin:18px 0 0;
  color:#a6afbf;
  font-size:18px;
  line-height:1.72;
  font-weight:650;
}
.card-keyword-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:18px;
}
.card-keyword-row span{
  padding:7px 10px;
  border-radius:999px;
  background:#151c2a;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
}
.card-meaning-overview,
.card-topic-section{
  margin-top:42px;
  padding-top:36px;
  border-top:1px solid var(--line);
}
.card-section-heading{
  max-width:760px;
  margin-bottom:20px;
}
.card-section-heading .section-kicker{
  margin-bottom:8px;
}
.card-section-heading h2{
  margin:0;
  font-size:clamp(30px,4vw,42px);
  line-height:1.12;
  letter-spacing:-.045em;
}
.card-section-heading>p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.card-meaning-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.card-meaning-grid article{
  padding:20px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
}
.card-meaning-grid article>span{
  display:block;
  margin-bottom:8px;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}
.card-meaning-grid h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
}
.card-meaning-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.72;
}
.card-meaning-grid .card-advice-box{
  grid-column:1/-1;
  border-color:#617294;
  background:#151c29;
}
.card-topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.card-topic-grid article{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:20px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
}
.card-topic-grid h3{
  margin:0 0 8px;
  font-size:18px;
  line-height:1.35;
  font-weight:800;
}
.card-topic-grid p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
}
.card-topic-reading>span{
 display:block;
 margin-bottom:7px;
 color:#a6afbf;
 font-size:11px;
 font-weight:800;
 letter-spacing:.035em;
}
.card-topic-reading--reversed{
 margin-top:14px;
 padding-top:14px;
 border-top:1px solid #617294;
}
.card-topic-reading--reversed>span{
 color:#a6afbf;
}
.card-topic-grid a{
  display:inline-flex;
  margin-top:auto;
  padding-top:15px;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.card-dictionary-cta{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  gap:16px;
  align-items:center;
  margin-top:30px;
  padding:20px;
  border:1px solid #617294;
  border-radius:19px;
  background:#151c29;
}
.card-dictionary-cta>span{
  width:50px;
  height:50px;
  display:grid;
  place-items:center;
  border-radius:15px;
  background:#151b28;
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:25px;
}
.card-dictionary-cta strong{
  display:block;
  margin-bottom:4px;
  font-size:16px;
  font-weight:800;
}
.card-dictionary-cta p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.card-dictionary-cta .button{
  margin:0;
  white-space:nowrap;
}
.card-prev-next{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:24px;
}
.card-prev-next a{
  min-width:0;
  padding:16px;
  border:1px solid #617294;
  border-radius:16px;
  background:#151b28;
  color:inherit;
  text-decoration:none;
}
.card-prev-next a:hover,
.card-prev-next a:focus-visible{
  border-color:#617294;
}
.card-prev-next a:nth-child(3){
  text-align:right;
}
.card-prev-next small{
  display:block;
  margin-bottom:5px;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
}
.card-prev-next strong{
  display:block;
  overflow:hidden;
  color:var(--ink);
  font-size:15px;
  line-height:1.35;
  font-weight:800;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.card-prev-next span{
  display:block;
  margin-top:3px;
  overflow:hidden;
  color:var(--muted);
  font-size:11px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.card-prev-next .card-all-link{
  text-align:center;
}

@media(max-width:900px){
  .card-library-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:720px){
  .card-library-page,
  .card-dictionary-page{
    width:calc(100% - 28px);
    padding:40px 0 62px;
  }
  .card-library-hero{
    margin-bottom:34px;
  }
  .card-library-hero h1{
    font-size:clamp(38px,12vw,54px);
  }
  .card-library-hero>p{
    font-size:15px;
  }
  .card-library-group{
    margin-top:40px;
    padding-top:28px;
  }
  .card-library-group-head{
    align-items:flex-start;
    flex-direction:column;
    gap:7px;
  }
  .card-library-group-head>p{
    max-width:none;
    font-size:13px;
    text-align:left;
  }
  .card-library-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
  }
  .card-library-tile{
    grid-template-columns:58px minmax(0,1fr);
    gap:10px;
    padding:10px;
    border-radius:15px;
  }
  .card-library-thumb{
    width:58px;
    border-radius:9px;
  }
  .card-library-copy small{
    font-size:8px;
  }
  .card-library-copy strong{
    font-size:14px;
  }
  .card-library-copy>span,
  .card-library-copy em{
    font-size:10px;
  }
  .card-library-copy em{
    margin-top:5px;
  }

  .card-breadcrumb{
    margin-bottom:20px;
  }
  .card-dictionary-hero{
    grid-template-columns:112px minmax(0,1fr);
    gap:18px;
    align-items:start;
    padding-bottom:28px;
  }
  .card-dictionary-art{
    max-width:112px;
    border-radius:14px;
  }
  .card-dictionary-intro h1{
    font-size:clamp(32px,9vw,46px);
  }
  .card-dictionary-intro h1 span{
    font-size:.38em;
  }
  .card-dictionary-lead{
    margin-top:12px;
    font-size:14px;
    line-height:1.65;
  }
  .card-keyword-row{
    gap:5px;
    margin-top:12px;
  }
  .card-keyword-row span{
    padding:5px 8px;
    font-size:10px;
  }
  .card-meaning-overview,
  .card-topic-section{
    margin-top:30px;
    padding-top:28px;
  }
  .card-section-heading{
    margin-bottom:16px;
  }
  .card-section-heading h2{
    font-size:29px;
  }
  .card-section-heading>p{
    font-size:14px;
  }
  .card-meaning-grid,
  .card-topic-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .card-meaning-grid article,
  .card-topic-grid article{
    padding:14px;
    border-radius:15px;
  }
  .card-meaning-grid .card-advice-box{
    grid-column:auto;
  }
  .card-meaning-grid h3,
  .card-topic-grid h3{
    font-size:16px;
  }
  .card-meaning-grid p,
  .card-topic-grid p{
    font-size:13px;
    line-height:1.68;
  }
  .card-dictionary-cta{
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    padding:14px;
    border-radius:16px;
  }
  .card-dictionary-cta>span{
    width:40px;
    height:40px;
    border-radius:12px;
    font-size:21px;
  }
  .card-dictionary-cta .button{
    grid-column:1/-1;
    width:100%;
    justify-content:center;
  }
  .card-prev-next{
    grid-template-columns:1fr 1fr;
  }
  .card-prev-next .card-all-link{
    grid-column:1/-1;
    grid-row:2;
  }
}
@media(max-width:380px){
  .card-library-grid{grid-template-columns:1fr}
  .card-dictionary-hero{
    grid-template-columns:96px minmax(0,1fr);
    gap:14px;
  }
  .card-dictionary-art{max-width:96px}
}


/* Card dictionary nav rhythm + YES/NO verdict spacing. */
/* Keep the label, Korean card name, and English name visibly separated. */
.card-prev-next a{
  display:flex;
  flex-direction:column;
  gap:5px;
}
.card-prev-next small,
.card-prev-next strong,
.card-prev-next span{
  margin:0;
}
.card-prev-next small{
  line-height:1.2;
}
.card-prev-next strong{
  line-height:1.35;
}
.card-prev-next span{
  line-height:1.35;
}

/* Match the spacing rhythm used by the other result capsules. */
.verdict .step-label{
  margin-bottom:14px;
}
.verdict h3{
  margin-top:0;
}

@media(max-width:650px){
  .card-prev-next a{
    gap:4px;
  }
  .verdict .step-label{
    margin-bottom:12px;
  }
}


/* Position-aware card combination reading. */
.combination-reading{
  margin-top:18px;
  padding:24px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
}
.combination-reading .step-label{
  margin-bottom:14px;
}
.combination-reading h2{
  margin:0 0 16px;
  font-size:clamp(28px,4vw,38px);
  line-height:1.12;
  letter-spacing:-.04em;
}
.combination-grid{
  display:grid;
  gap:10px;
}
.combination-grid article{
  padding:16px;
  border:1px solid #617294;
  border-radius:15px;
  background:#151c29;
}
.combination-meta{
  display:flex;
  flex-wrap:wrap;
  gap:7px 10px;
  align-items:center;
  margin-bottom:8px;
}
.combination-meta>span{
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
  letter-spacing:.03em;
}
.combination-meta>strong{
  color:var(--ink);
  font-size:14px;
  font-weight:800;
}
.combination-grid p{
  margin:0;
  color:#a6afbf;
  font-size:14px;
  line-height:1.75;
}
@media(max-width:650px){
  .combination-reading{
    padding:14px;
    border-radius:16px;
  }
  .combination-reading .step-label{
    margin-bottom:12px;
  }
  .combination-reading h2{
    margin-bottom:13px;
    font-size:25px;
  }
  .combination-grid article{
    padding:13px;
    border-radius:13px;
  }
  .combination-meta{
    align-items:flex-start;
    flex-direction:column;
    gap:3px;
  }
  .combination-grid p{
    font-size:13px;
    line-height:1.68;
  }
}


/* Reading-page depth content. */
.reading-depth{
  width:min(900px,100%);
  margin:34px auto 0;
  padding:30px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#151b28;
}
.reading-depth-head{
  max-width:720px;
  margin-bottom:18px;
}
.reading-depth-head .section-kicker{
  margin-bottom:7px;
}
.reading-depth-head h2{
  margin:0;
  font-size:clamp(28px,4vw,38px);
  line-height:1.12;
  letter-spacing:-.04em;
}
.reading-depth-head>p{
  margin:10px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.reading-depth-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}
.reading-depth-grid article{
  padding:17px;
  border:1px solid #617294;
  border-radius:15px;
  background:#151c29;
}
.reading-depth-grid h3{
  margin:0 0 8px;
  color:var(--ink);
  font-size:16px;
  line-height:1.42;
  letter-spacing:-.025em;
  font-weight:800;
}
.reading-depth-grid p{
  margin:0;
  color:var(--muted);
  font-size:13px;
  line-height:1.72;
}
.reading-card-links{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  align-items:center;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
.reading-card-links>span{
  margin-right:3px;
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.reading-card-links a{
  display:inline-flex;
  align-items:baseline;
  gap:5px;
  padding:7px 9px;
  border:1px solid #617294;
  border-radius:999px;
  background:#151b28;
  color:var(--ink);
  font-size:11px;
  font-weight:800;
  text-decoration:none;
}
.reading-card-links a:hover,
.reading-card-links a:focus-visible{
  border-color:#617294;
  color:#a6afbf;
}
.reading-card-links small{
  color:var(--muted);
  font-size:9px;
  font-weight:650;
}
@media(max-width:760px){
  .reading-depth{
    padding:14px;
    border-radius:16px;
  }
  .reading-depth-grid{
    grid-template-columns:1fr;
    gap:9px;
  }
  .reading-depth-grid article{
    padding:13px;
    border-radius:13px;
  }
  .reading-depth-head h2{
    font-size:27px;
  }
}


/* Saved readings + result sharing controls. */
.result-tools-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-top:10px;
  min-height:22px;
}
.result-tools-foot a{
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
.result-tools-foot p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  text-align:right;
}
.saved-readings-page{
  width:min(900px,calc(100% - 32px));
  margin:0 auto;
  padding:58px 0 80px;
}
.saved-readings-hero{
  position:relative;
  margin-bottom:24px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
 .saved-readings-hero .section-kicker{
  display:block;
  margin-bottom:8px;
}
.saved-readings-hero h1,
.saved-readings-hero .saved-readings-title{
  margin:0;
  font-size:clamp(42px,6vw,64px);
  line-height:1.07;
  letter-spacing:-.055em;
  font-weight:800;
}
.saved-readings-hero p{
  max-width:650px;
  margin:12px 0 0;
  color:var(--muted);
  font-size:15px;
  line-height:1.7;
}
.saved-clear{
  position:absolute;
  right:0;
  bottom:24px;
  border:0;
  background:transparent;
  color:#a6afbf;
  font:800 12px Inter,Pretendard,sans-serif;
  cursor:pointer;
}
.saved-reading-empty{
  display:grid;
  place-items:center;
  min-height:320px;
  padding:36px;
  border:1px dashed #617294;
  border-radius:20px;
  background:#151c29;
  text-align:center;
}
.saved-reading-empty[hidden]{display:none}
.saved-reading-empty>span{
  font-family:Apple Color Emoji,"Segoe UI Emoji","Noto Color Emoji",sans-serif!important;
  font-size:34px;
}
.saved-reading-empty h2{
  margin:12px 0 6px;
  font-size:24px;
  letter-spacing:-.035em;
}
.saved-reading-empty p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:14px;
}
.saved-reading-list{
  display:grid;
  gap:12px;
}
.saved-reading-item{
  padding:20px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151b28;
}
.saved-reading-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.saved-reading-head span{
  display:block;
  margin-bottom:4px;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
}
.saved-reading-head h2{
  margin:0;
  font-size:23px;
  line-height:1.25;
  letter-spacing:-.035em;
}
.saved-delete{
  border:0;
  background:transparent;
  color:var(--muted);
  font:800 11px Inter,Pretendard,sans-serif;
  cursor:pointer;
}
.saved-delete:hover{color:#a6afbf}
.saved-question{
  margin:12px 0 0;
  color:#a6afbf;
  font-size:13px;
  line-height:1.6;
}
.saved-card-row{
  display:flex;
  gap:8px;
  overflow-x:auto;
  margin-top:15px;
  padding-bottom:4px;
  scrollbar-width:thin;
}
.saved-mini-card{
  flex:0 0 70px;
}
.saved-mini-card .mini-card{
  width:70px;
  height:105px;
  margin:0;
}
.saved-mini-card>span{
  display:block;
  margin-top:5px;
  overflow:hidden;
  color:var(--muted);
  font-size:9px;
  text-align:center;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.saved-reading-copy{
  margin-top:16px;
  padding:15px;
  border-radius:14px;
  background:#151c29;
}
.saved-reading-copy>span{
  display:block;
  margin-bottom:6px;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
}
.saved-reading-copy>strong{
  display:block;
  color:var(--ink);
  font-size:16px;
  line-height:1.55;
  font-weight:800;
}
.saved-reading-copy p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
}
.saved-reading-copy b{
  color:var(--ink);
}
.saved-reading-again{
  display:inline-flex;
  margin-top:13px;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  text-decoration:none;
}
@media(max-width:650px){
  .result-actions{
    gap:8px;
  }
  .result-tools-foot{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .result-tools-foot p{
    text-align:left;
  }
  .saved-readings-page{
    width:calc(100% - 28px);
    padding:40px 0 62px;
  }
  .saved-readings-hero{
    padding-bottom:20px;
  }
  .saved-readings-hero h1,
  .saved-readings-hero .saved-readings-title{
    font-size:clamp(36px,11vw,50px);
  }
  .saved-clear{
    position:static;
    margin-top:12px;
    padding:0;
  }
  .saved-reading-item{
    padding:14px;
    border-radius:16px;
  }
  .saved-reading-head h2{
    font-size:20px;
  }
  .saved-reading-copy{
    padding:13px;
  }
}


/* Timing basis detail. */
.timing-basis{
  display:block;
  margin-top:9px;
  padding-top:9px;
  border-top:1px solid #617294;
  color:#a6afbf;
  font-size:11px;
  line-height:1.6;
}


/* Optional reading situation personalization. */
.situation-field{
  margin:18px 0 20px;
  padding:0;
  border:0;
}
.situation-field legend{
  margin-bottom:9px;
  color:var(--ink);
  font-size:13px;
  font-weight:800;
}
.situation-field legend span{
  margin-left:5px;
  color:var(--muted);
  font-size:10px;
  font-weight:700;
}
.situation-options{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.situation-options label{
  cursor:pointer;
}
.situation-options input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.situation-options span{
  display:inline-flex;
  align-items:center;
  min-height:36px;
  padding:8px 11px;
  border:1px solid #617294;
  border-radius:999px;
  background:#151b28;
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  transition:border-color .16s ease,background .16s ease,color .16s ease;
}
.situation-options input:checked+span{
  border-color:#48556e;
  background:#151c2a;
  color:#a6afbf;
}
.situation-options input:focus-visible+span{
  outline:2px solid #455169;
  outline-offset:2px;
}
.reading-context-answer{
  width:min(900px,100%);
  margin:-10px auto 22px;
  padding:15px 17px;
  border:1px solid #617294;
  border-radius:15px;
  background:#151b28;
}
.reading-context-answer>span{
  display:block;
  margin-bottom:5px;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
}
.reading-context-answer>p{
  margin:0;
  color:#a6afbf;
  font-size:14px;
  line-height:1.7;
}
@media(max-width:650px){
  .situation-field{
    margin:15px 0 17px;
  }
  .situation-options{
    gap:6px;
  }
  .situation-options span{
    min-height:34px;
    padding:7px 10px;
    font-size:11px;
  }
  .reading-context-answer{
    margin:-8px auto 18px;
    padding:13px;
    border-radius:13px;
  }
  .reading-context-answer>p{
    font-size:13px;
  }
}


.saved-context-label{
  display:inline-flex;
  margin-top:12px;
  padding:5px 8px;
  border-radius:999px;
  background:#151c2a;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
}


/* Keep only the artwork touches from the later visual experiment. */
.home-intro.home-intro-with-art{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.78fr);
  align-items:center;
  gap:48px;
}
.home-intro-with-art .hero-copy{
  min-width:0;
}
.home-intro-with-art .quiet-label{
  position:static;
  display:inline-flex;
  width:max-content;
  max-width:100%;
  margin-top:18px;
  padding:6px 10px;
  white-space:nowrap;
}
.hero-deck{
  position:relative;
  justify-self:end;
  width:100%;
  height:360px;
  min-width:320px;
  transform:translateX(56px);
}
.hero-card{
  position:absolute;
  width:150px;
  padding:7px;
  border:1px solid #617294;
  border-radius:12px;
  background:#151b28;
  box-shadow:0 18px 38px rgba(48,43,43,.10);
  transform-origin:50% 86%;
}
.hero-card img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:2/3;
  object-fit:cover;
  border-radius:7px;
}
.hero-card-back{
  left:8%;
  top:83px;
  width:142px;
  padding:0;
  overflow:hidden;
  transform:rotate(-13deg);
}
.hero-card-sun{
  left:34%;
  top:28px;
  z-index:2;
  transform:rotate(4deg);
}
.hero-card-lovers{
  right:6%;
  top:98px;
  z-index:3;
  width:140px;
  transform:rotate(13deg);
}
.tile-card-thumb{
  width:68px;
  height:102px;
  padding:0;
  border:0;
  border-radius:8px;
  overflow:hidden;
  background:transparent;
  box-shadow:0 11px 22px rgba(48,43,43,.12);
  transform:rotate(7deg);
}
.tile-card-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.small .tile-card-thumb{
  width:60px;
  height:90px;
  border-radius:7px;
}
@media(max-width:980px){
  .home-intro.home-intro-with-art{
    grid-template-columns:minmax(0,1fr) 300px;
    gap:28px;
  }
  .hero-deck{
    min-width:280px;
    height:320px;
    transform:translateX(24px) scale(.9);
    transform-origin:center right;
  }
}
@media(max-width:650px){
  .home-intro.home-intro-with-art{
    display:block;
  }
  .hero-deck{
    width:min(100%,340px);
    min-width:0;
    height:245px;
    margin:20px auto 0;
    transform:none;
  }
  .home-intro-with-art .quiet-label{
    width:max-content;
    padding:6px 9px;
  }
  .hero-card{
    width:104px;
    border-radius:9px;
  }
  .hero-card-back{
    left:10%;
    top:60px;
    width:98px;
  }
  .hero-card-sun{
    left:34%;
    top:18px;
  }
  .hero-card-lovers{
    right:9%;
    top:68px;
    width:98px;
  }
  .tile-card-thumb,
  .small .tile-card-thumb{
    width:54px;
    height:81px;
    right:13px;
    bottom:14px;
    border-radius:6px;
  }
}


/* Information architecture enhancements — keep the existing visual system. */
header nav a[aria-current="page"]{
  color:#a6afbf;
}
.card-search{
  width:min(420px,100%);
  margin-top:20px;
}
.card-search label{
  display:block;
  margin-bottom:7px;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}
.card-search input{
  width:100%;
  min-height:42px;
  padding:9px 12px;
  border:1px solid #617294;
  border-radius:12px;
  background:#151b28;
  color:var(--ink);
  font-size:14px;
  outline:none;
}
.card-search input:focus{
  border-color:#5d6e8e;
  box-shadow:0 0 0 3px rgba(174,194,217,.06);
}
.card-search p{
  min-height:18px;
  margin:6px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.5;
}
@media(max-width:650px){
  header nav{
    flex-wrap:wrap;
    row-gap:2px;
  }
  .card-search{margin-top:17px}
}


/* About strip — keep the existing service design, swap emoji badges for tarot artwork. */
.about{
  background:#151b28;
  border-color:#617294;
  box-shadow:0 10px 28px rgba(25,25,35,.035);
}
.about-grid article{
  border-color:#617294;
  background:#151c29;
  box-shadow:none;
}
.about-icon{
  overflow:visible;
  border-radius:0;
  background:transparent;
  font-family:inherit!important;
}
.about-card-icon{
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-card-icon img{
  width:38px;
  height:57px;
  object-fit:cover;
  border:1px solid #617294;
  border-radius:6px;
  box-shadow:0 7px 14px rgba(48,43,43,.10);
}
.about-card-pair{
  position:relative;
  display:block;
  width:54px;
  height:54px;
}
.about-card-pair img{
  position:absolute;
  width:30px;
  height:45px;
  object-fit:cover;
  border:1px solid #617294;
  border-radius:5px;
  box-shadow:0 6px 12px rgba(48,43,43,.10);
}
.about-card-pair img:first-child{
  left:6px;
  top:2px;
  transform:rotate(-7deg);
}
.about-card-pair .about-card-reversed{
  right:3px;
  bottom:1px;
  transform:rotate(173deg);
}
@media(max-width:760px){
  .about-card-icon img{width:35px;height:53px}
  .about-card-pair{width:48px;height:48px}
  .about-card-pair img{width:27px;height:41px}
}


/* Card dictionary controls: category capsules left, compact search right. */
.card-library-tools{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-top:22px;
}
.card-library-tools .card-library-jump{
  flex:1 1 auto;
  margin-top:0;
}
.card-library-tools .card-search{
  flex:0 0 250px;
  width:250px;
  margin-top:0;
}
.card-library-tools .card-search label{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
.card-library-tools .card-search input{
  min-height:38px;
  height:38px;
  padding:7px 11px;
  border-radius:999px;
  font-size:12px;
}
.card-library-tools .card-search p{
  min-height:16px;
  margin:5px 4px 0 0;
  text-align:right;
}
@media(max-width:760px){
  .card-library-tools{
    flex-direction:column;
    gap:12px;
  }
  .card-library-tools .card-search{
    flex-basis:auto;
    width:100%;
  }
  .card-library-tools .card-search p{
    text-align:left;
  }
}


/* Daily draw + guide visuals — use real tarot artwork inside the existing white/red system. */
.daily-card-preview{
  float:right;
  width:104px;
  margin:-2px 4px 16px 24px;
  transform:rotate(7deg);
  border-radius:14px;
  box-shadow:0 12px 28px rgba(48,43,43,.10);
}
.daily-card-preview img{
  display:block;
  width:100%;
  height:auto;
  border-radius:14px;
}
[data-reading="today"] .question-panel{
  display:flow-root;
}
[data-reading="today"] .question-panel .button{
  margin-top:22px;
}

.guide-visual{
  width:100%;
  margin:0 0 18px;
  padding:20px;
  border:1px solid #617294;
  border-radius:20px;
  background:#151c29;
}
.orientation-visual{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}
.orientation-visual figure{
  display:grid;
  grid-template-columns:88px minmax(0,1fr);
  gap:16px;
  align-items:center;
  margin:0;
  padding:16px;
  border:1px solid #617294;
  border-radius:16px;
  background:#151b28;
}
.orientation-visual img{
  width:88px;
  height:132px;
  object-fit:cover;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(48,43,43,.09);
  transform-origin:50% 50%;
  transform-box:border-box;
}
.orientation-visual .reversed-art{
  transform:rotate(180deg);
}
.orientation-visual figcaption span,
.question-comparison>div>span{
  display:block;
  margin-bottom:6px;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
}
.orientation-visual figcaption strong{
  display:block;
  margin-bottom:5px;
  color:var(--ink);
  font-size:15px;
  font-weight:800;
}
.orientation-visual figcaption p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55;
}
.suit-visual{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}
.suit-visual figure{
  margin:0;
  padding:12px;
  border:1px solid #617294;
  border-radius:16px;
  background:#151b28;
  text-align:center;
}
.suit-visual img{
  display:block;
  width:100%;
  max-width:92px;
  height:auto;
  margin:0 auto;
  aspect-ratio:auto;
  object-fit:contain;
  border-radius:8px;
  box-shadow:0 8px 20px rgba(48,43,43,.08);
}
.suit-visual figcaption{
  margin-top:9px;
  color:var(--ink);
  font-size:12px;
  font-weight:800;
}
.question-comparison{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:16px;
  align-items:center;
}
.question-comparison>div{
  padding:18px;
  border:1px solid #617294;
  border-radius:16px;
  background:#151b28;
}
.question-comparison p{
  margin:0;
  color:var(--ink);
  font-size:15px;
  font-weight:800;
  line-height:1.55;
}
.question-arrow{
  color:#a6afbf;
  font-size:22px;
  font-weight:800;
}

@media(max-width:720px){
  .daily-card-preview{
    float:none;
    width:92px;
    margin:0 auto 24px;
    transform:rotate(5deg);
  }
  [data-reading="today"] .question-panel{
    text-align:center;
  }
  .orientation-visual{
    grid-template-columns:1fr;
  }
  .suit-visual{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
  .question-comparison{
    grid-template-columns:1fr;
    gap:10px;
  }
  .question-arrow{
    transform:rotate(90deg);
    justify-self:center;
  }
}


/* Result actions + saved readings polish. */
.result-actions{
  align-items:stretch;
  margin-top:20px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.result-actions .button{
  min-height:44px;
}
#save-reading{
  border-color:#617294;
}
#save-reading:disabled{
  border-color:#617294;
  background:#151c29;
  color:#a6afbf;
  opacity:1;
}
.result-tools-foot{
  margin-top:12px;
}

.saved-empty-card{
  display:block;
  width:62px;
  height:93px;
  margin:0 auto;
  border-radius:8px;
  box-shadow:0 9px 22px rgba(48,43,43,.10);
}
.saved-reading-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}
.saved-reading-meta span{
  display:inline-flex;
  align-items:center;
  min-height:26px;
  padding:5px 8px;
  border-radius:999px;
  background:#151c2a;
  color:var(--muted);
  font-size:10px;
  font-weight:800;
}
.saved-card-row{
  gap:10px;
  margin-top:16px;
  padding:2px 1px 7px;
}
.saved-mini-card{
  flex:0 0 76px;
}
.saved-mini-card .mini-card{
  width:76px;
  height:114px;
}
.saved-mini-card>span{
  margin-top:6px;
  color:var(--ink);
  font-size:10px;
  font-weight:800;
}
.saved-mini-card>small{
  display:block;
  margin-top:2px;
  color:var(--muted);
  font-size:9px;
  line-height:1.3;
  text-align:center;
}
.saved-reading-item{
  transition:border-color .16s ease,box-shadow .16s ease;
}
.saved-reading-item:hover{
  border-color:#617294;
  box-shadow:0 8px 22px rgba(25,25,35,.035);
}
@media(max-width:650px){
  .result-actions{
    flex-direction:column;
    padding-top:16px;
  }
  .saved-empty-card{
    width:56px;
    height:84px;
  }
  .saved-card-row{
    gap:8px;
  }
  .saved-mini-card{
    flex-basis:68px;
  }
  .saved-mini-card .mini-card{
    width:68px;
    height:102px;
  }
}


/* Interaction pass — cards move, interface stays quiet. */
@keyframes heroBackIn{
  from{opacity:0;transform:translateY(14px) rotate(-16deg)}
  to{opacity:1;transform:translateY(0) rotate(-13deg)}
}
@keyframes heroSunIn{
  from{opacity:0;transform:translateY(18px) rotate(1deg)}
  to{opacity:1;transform:translateY(0) rotate(4deg)}
}
@keyframes heroLoversIn{
  from{opacity:0;transform:translateY(16px) rotate(16deg)}
  to{opacity:1;transform:translateY(0) rotate(13deg)}
}
@keyframes pickedCard{
  0%{transform:translateY(0) scale(1)}
  42%{transform:translateY(-7px) scale(1.018)}
  100%{transform:translateY(0) scale(1)}
}
@keyframes resultRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes heroContentIn{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes navContentIn{
  from{opacity:0;transform:translateY(-10px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes detailReveal{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

.hero-card{
  will-change:transform,opacity;
}
.hero-card-back{
  animation:heroBackIn 1.02s cubic-bezier(.2,.72,.25,1) .12s both;
}
.hero-card-sun{
  animation:heroSunIn 1.08s cubic-bezier(.2,.72,.25,1) .25s both;
}
.hero-card-lovers{
  animation:heroLoversIn 1.14s cubic-bezier(.2,.72,.25,1) .38s both;
}
.home-intro .hero-copy .kicker,
.home-intro .hero-copy h1,
.home-intro .hero-copy>p,
.home-intro .hero-copy .quiet-label{
  animation:heroContentIn 1.02s cubic-bezier(.2,.72,.25,1) both;
}
.home-intro .hero-copy .kicker{animation-delay:.08s}
.home-intro .hero-copy h1{animation-delay:.22s}
.home-intro .hero-copy>p{animation-delay:.36s}
.home-intro .hero-copy .quiet-label{animation-delay:.50s}

header .brand{
  animation:navContentIn .92s cubic-bezier(.2,.72,.25,1) .03s both;
}
header nav a{
  animation:navContentIn .92s cubic-bezier(.2,.72,.25,1) both;
}
header nav a:nth-child(1){animation-delay:.12s}
header nav a:nth-child(2){animation-delay:.20s}
header nav a:nth-child(3){animation-delay:.28s}
header nav a:nth-child(4){animation-delay:.36s}
header nav a:nth-child(5){animation-delay:.44s}
header nav a:nth-child(6){animation-delay:.52s}

.reading-tile,
.tile-card-thumb,
.card-library-tile,
.card-library-thumb img,
.button,
button,
summary{
  transition-duration:.18s;
  transition-timing-function:ease;
}
.tile-card-thumb{
  transition-property:transform,box-shadow;
}
.card-library-thumb img{
  transition-property:transform;
  transform-origin:center 72%;
}
.button,
button{
  transition-property:transform,background-color,border-color,color,box-shadow;
}
.button:active,
button:active{
  transform:translateY(1px) scale(.985);
}

.card-button{
  position:relative;
  transition:transform .18s ease;
}
.card-button:not(:disabled):hover{
  transform:translateY(-4px);
}
.card-button.is-selected{
  z-index:2;
  animation:pickedCard .48s cubic-bezier(.2,.72,.25,1);
}
.card-inner{
  transition:transform .48s cubic-bezier(.2,.72,.25,1);
}
.progress-dots span{
  transform:scaleX(.58);
  transform-origin:center;
  transition:transform .22s ease,background-color .22s ease;
}
.progress-dots .filled{
  transform:scaleX(1);
}

#reading-app.results-entering>*{
  animation:resultRise .84s cubic-bezier(.2,.72,.25,1) both;
  animation-delay:calc(var(--result-order,0) * 95ms);
}
details[open]>p{
  animation:detailReveal .2s ease both;
}

@media(hover:hover) and (pointer:fine){
  .hero-deck:hover .hero-card-back{
    transform:translateY(-5px) rotate(-9deg);
  }
  .hero-deck:hover .hero-card-sun{
    transform:translateY(-9px) rotate(1deg);
  }
  .hero-deck:hover .hero-card-lovers{
    transform:translateY(-6px) rotate(9deg);
  }
  .hero-card{
    transition:transform .24s cubic-bezier(.2,.72,.25,1),box-shadow .24s ease;
  }
  .hero-deck:hover .hero-card{
    box-shadow:0 22px 44px rgba(48,43,43,.13);
  }
  .reading-tile:hover .tile-card-thumb{
    transform:translateY(-5px) rotate(2deg);
    box-shadow:0 15px 26px rgba(48,43,43,.15);
  }
  .card-library-tile:hover .card-library-thumb img,
  .card-library-tile:focus-visible .card-library-thumb img{
    transform:translateY(-2px) rotate(-1.5deg) scale(1.025);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-card-back,
  .hero-card-sun,
  .hero-card-lovers,
  header .brand,
  header nav a,
  .home-intro .hero-copy .kicker,
  .home-intro .hero-copy h1,
  .home-intro .hero-copy>p,
  .home-intro .hero-copy .quiet-label,
  .card-button.is-selected,
  #reading-app.results-entering>*,
  details[open]>p{
    animation:none!important;
  }
  .hero-deck:hover .hero-card-back{transform:rotate(-13deg)}
  .hero-deck:hover .hero-card-sun{transform:rotate(4deg)}
  .hero-deck:hover .hero-card-lovers{transform:rotate(13deg)}
  .reading-tile:hover .tile-card-thumb{transform:rotate(7deg)}
  .card-library-tile:hover .card-library-thumb img,
  .card-library-tile:focus-visible .card-library-thumb img{transform:none}
  .card-button:not(:disabled):hover,
  .button:active,
  button:active{transform:none}
  .progress-dots span{transform:none}
}


/* Interaction refinement — keep home grids still, give physical tarot cards a delicate hover. */
.primary-grid .reading-tile:hover,
.secondary-grid .reading-tile:hover{
  transform:translateY(-4px);
}
.primary-grid .reading-tile:hover .tile-card-thumb,
.secondary-grid .reading-tile:hover .tile-card-thumb{
  transform:rotate(7deg);
  box-shadow:0 11px 22px rgba(48,43,43,.12);
}

.hero-card-back,
.hero-card-sun,
.hero-card-lovers{
  animation-fill-mode:backwards;
}

.summary-item .mini-card,
.detail-card .mini-card,
.saved-mini-card .mini-card,
.daily-card-preview,
.card-dictionary-art,
.suit-visual img,
.about-card-icon img,
.about-card-pair img{
  transition:transform .22s cubic-bezier(.2,.72,.25,1),box-shadow .22s ease,border-color .22s ease;
  transform-origin:center 78%;
}
.orientation-visual img{
  transition:transform .22s cubic-bezier(.2,.72,.25,1),box-shadow .22s ease,border-color .22s ease;
  transform-origin:50% 50%;
  transform-box:border-box;
}

@media(hover:hover) and (pointer:fine){
  /* Hero cards react one at a time instead of the whole fan moving together. */
  .hero-deck:hover .hero-card-back{
    transform:rotate(-13deg);
  }
  .hero-deck:hover .hero-card-sun{
    transform:rotate(4deg);
  }
  .hero-deck:hover .hero-card-lovers{
    transform:rotate(13deg);
  }
  .hero-deck:hover .hero-card{
    box-shadow:0 18px 38px rgba(48,43,43,.10);
  }
  .hero-deck .hero-card-back:hover{
    z-index:5;
    transform:translateY(-6px) rotate(-10deg) scale(1.012);
    box-shadow:0 22px 42px rgba(48,43,43,.14);
  }
  .hero-deck .hero-card-sun:hover{
    z-index:5;
    transform:translateY(-7px) rotate(2deg) scale(1.012);
    box-shadow:0 22px 42px rgba(48,43,43,.14);
  }
  .hero-deck .hero-card-lovers:hover{
    z-index:5;
    transform:translateY(-6px) rotate(10deg) scale(1.012);
    box-shadow:0 22px 42px rgba(48,43,43,.14);
  }

  /* Result cards: a tiny lift, like touching a printed card. */
  .summary-item:hover .mini-card{
    transform:translateY(-4px) rotate(-.7deg);
    border-color:#617294;
    box-shadow:0 10px 22px rgba(48,43,43,.09);
  }
  .summary-item:nth-child(even):hover .mini-card{
    transform:translateY(-4px) rotate(.7deg);
  }
  .detail-card:hover .mini-card{
    transform:translateY(-3px) rotate(1deg);
    border-color:#617294;
    box-shadow:0 10px 22px rgba(48,43,43,.085);
  }

  /* Other card artwork around the service. */
  .saved-mini-card:hover .mini-card{
    transform:translateY(-3px) rotate(-.6deg);
    box-shadow:0 9px 20px rgba(48,43,43,.08);
  }
  .daily-card-preview:hover{
    transform:translateY(-4px) rotate(3deg);
    box-shadow:0 16px 30px rgba(48,43,43,.13);
  }
  .card-dictionary-art:hover{
    transform:translateY(-4px) rotate(-.5deg);
    border-color:#617294;
    box-shadow:0 18px 36px rgba(48,43,43,.09);
  }
  .orientation-visual figure:hover img:not(.reversed-art),
  .suit-visual figure:hover img{
    transform:translateY(-3px) rotate(-.8deg);
    box-shadow:0 11px 24px rgba(48,43,43,.11);
  }
  .orientation-visual figure:hover .reversed-art{
    transform:translateY(-3px) rotate(180deg);
    box-shadow:0 11px 24px rgba(48,43,43,.11);
  }
  .about-card-icon:hover img{
    transform:translateY(-3px) rotate(-1deg);
    box-shadow:0 10px 20px rgba(48,43,43,.12);
  }
  .about-card-pair:hover img:first-child{
    transform:translateY(-2px) rotate(-5deg);
  }
  .about-card-pair:hover .about-card-reversed{
    transform:translateY(-2px) rotate(175deg);
  }
}

@media(max-width:720px){
  .daily-card-preview:hover{
    transform:rotate(5deg);
  }
}

@media(prefers-reduced-motion:reduce){
  .summary-item .mini-card,
  .detail-card .mini-card,
  .saved-mini-card .mini-card,
  .daily-card-preview,
  .card-dictionary-art,
  .orientation-visual img,
  .suit-visual img,
  .about-card-icon img,
  .about-card-pair img{
    transition:none!important;
  }
  .hero-deck .hero-card-back:hover{transform:rotate(-13deg)}
  .hero-deck .hero-card-sun:hover{transform:rotate(4deg)}
  .hero-deck .hero-card-lovers:hover{transform:rotate(13deg)}
  .summary-item:hover .mini-card,
  .summary-item:nth-child(even):hover .mini-card,
  .detail-card:hover .mini-card,
  .saved-mini-card:hover .mini-card,
  .card-dictionary-art:hover,
  .orientation-visual figure:hover img:not(.reversed-art),
  .suit-visual figure:hover img,
  .about-card-icon:hover img{
    transform:none;
  }
  .orientation-visual figure:hover .reversed-art{transform:rotate(180deg)}
  .about-card-pair:hover img:first-child{transform:rotate(-7deg)}
  .about-card-pair:hover .about-card-reversed{transform:rotate(173deg)}
}


/* Keep the paired upright/reversed cards safely inside the About stat tile. */
.about-grid article{
  overflow:hidden;
}
.about-card-pair{
  width:50px;
  height:50px;
  justify-self:center;
}
.about-card-pair img{
  width:26px;
  height:39px;
}
.about-card-pair img:first-child{
  left:4px;
  top:-7px;
}
.about-card-pair .about-card-reversed{
  right:9px;
  bottom:14px;
}
@media(max-width:760px){
  .about-card-pair{
    width:46px;
    height:46px;
  }
  .about-card-pair img{
    width:24px;
    height:36px;
  }
  .about-card-pair img:first-child{
    left:3px;
    top:-7px;
  }
  .about-card-pair .about-card-reversed{
    right:8px;
    bottom:13px;
  }
}


/* Sitewide hover + scroll reveal polish. */
.scroll-reveal{
  opacity:0;
  translate:0 14px;
  transition:opacity 1.08s cubic-bezier(.2,.72,.25,1),translate 1.08s cubic-bezier(.2,.72,.25,1);
  transition-delay:var(--reveal-delay,0ms);
}
.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}

@media(hover:hover) and (pointer:fine){
  a[href]:not(.button):not(.reading-tile):not(.card-library-tile){
    transition:color .16s ease,opacity .16s ease,text-decoration-color .16s ease;
  }
  a[href]:not(.button):not(.reading-tile):not(.card-library-tile):hover{
    color:#a6afbf;
  }

  .button:not(:disabled):hover{
    transform:translateY(-1px);
    box-shadow:0 8px 18px rgba(48,43,43,.07);
  }
  .button.primary:not(:disabled):hover{
    background:#232f45;
  }
  .button.secondary:not(:disabled):hover{
    border-color:#617294;
    background:#151c29;
  }

  button:not(:disabled):not(.card-button):not(.button):hover{
    filter:brightness(.985);
  }

  summary:hover{
    color:#a6afbf;
  }

  .count-options label:hover span,
  .situation-options label:hover span{
    border-color:#5d6e8f;
    background:#151c29;
  }

  .card-library-jump a:hover{
    border-color:#5e6f8f;
    background:#151c29;
  }

  .card-library-tile:hover{
    border-color:#617294;
    box-shadow:0 10px 24px rgba(48,43,43,.055);
  }

  .guide-list>a:hover,
  .related a:hover,
  .card-prev-next a:hover{
    background:#151c29;
  }

  .saved-reading-again:hover,
  .about-link:hover,
  .back-link:hover,
  .text-link:hover,
  .result-tools-foot a:hover{
    text-decoration:underline;
    text-underline-offset:4px;
  }

  input[type="search"]:hover,
  textarea:hover{
    border-color:#5f7091;
  }

  .button:active,
  button:active:not(:disabled){
    transform:translateY(1px) scale(.985);
    box-shadow:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal,
  .scroll-reveal.is-visible{
    opacity:1!important;
    translate:none!important;
    transition:none!important;
  }
}


/* Restore the original burgundy CTA hover and keep related-reading hover tidy. */
@media(hover:hover) and (pointer:fine){
  .button.primary:not(:disabled):hover{
    background:#28354f;
  }

  .related a{
    transition:color .2s ease,border-color .2s ease;
  }
  .related a:hover{
    background:transparent;
  }
  .related a .related-icon,
  .related a strong{
    transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,color .2s ease;
  }
  .related a:hover .related-icon{
    transform:translateY(-1px);
    border-color:#607294;
    box-shadow:0 7px 16px rgba(48,43,43,.06);
  }
  .related a:hover strong{
    color:#a6afbf;
    transform:translateX(2px);
  }
}


/* Tarot Table Session — one continuous physical-card experience. */
.tarot-table{
  width:100%;
  margin:18px 0 0;
  perspective:1500px;
}
.tarot-table-surface{
  --table-rx:0deg;
  --table-ry:0deg;
  position:relative;
  padding:22px;
  overflow:hidden;
  border:1px solid #617294;
  border-radius:26px;
  background:
    radial-gradient(circle at 18% 12%,rgba(23,31,47,.82),transparent 30%),
    radial-gradient(circle at 82% 84%,rgba(174,194,217,.035),transparent 34%),
    linear-gradient(145deg,#161d2b 0%,#171e2c 100%);
  box-shadow:0 24px 60px rgba(174,194,217,.09),inset 0 1px 0 rgba(23,31,47,.9);
  transform:perspective(1500px) rotateX(var(--table-rx)) rotateY(var(--table-ry));
  transform-style:preserve-3d;
  transition:transform .28s cubic-bezier(.2,.72,.25,1),box-shadow .28s ease;
}
.tarot-table-surface:after{
  content:'';
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:radial-gradient(rgba(174,194,217,.08) .55px,transparent .55px);
  background-size:5px 5px;
  mix-blend-mode:multiply;
}
.tarot-table-surface>*{
  position:relative;
  z-index:1;
}
.table-topline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.table-topline>div{
  display:flex;
  align-items:baseline;
  gap:9px;
  min-width:0;
}
.table-topline>div>span{
  color:#a6afbf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.table-topline>div>strong{
  overflow:hidden;
  color:#a6afbf;
  font-size:13px;
  font-weight:800;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.table-shuffle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:8px 12px;
  border:1px solid #5e6f90;
  border-radius:999px;
  background:rgba(23,31,47,.64);
  color:#a6afbf;
  font-size:12px;
  font-weight:800;
  box-shadow:0 4px 12px rgba(174,194,217,.045);
}
.table-shuffle:disabled{
  opacity:.42;
}
.table-shuffle>span{
  font-size:17px;
  line-height:1;
}
.spread-board{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:9px;
  min-height:154px;
  margin-bottom:19px;
  padding:14px;
  border:1px solid rgba(174,194,217,.12);
  border-radius:20px;
  background:rgba(23,31,47,.28);
  box-shadow:inset 0 1px 12px rgba(174,194,217,.035);
}
.spread-board.spread-1{
  grid-template-columns:minmax(150px,220px);
  justify-content:center;
}
.spread-board.spread-2{
  grid-template-columns:repeat(2,minmax(150px,220px));
  justify-content:center;
}
.spread-board.spread-3{
  grid-template-columns:repeat(3,minmax(130px,190px));
  justify-content:center;
}
.spread-board.spread-4{
  grid-template-columns:repeat(4,minmax(0,1fr));
}
.spread-slot{
  position:relative;
  min-width:0;
  min-height:126px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  gap:5px;
  padding:9px 6px 7px;
  border:1px dashed rgba(174,194,217,.28);
  border-radius:14px;
  color:#a6afbf;
  text-align:center;
  transition:border-color .32s ease,background-color .32s ease,box-shadow .32s ease;
}
.spread-slot .slot-index{
  position:absolute;
  top:8px;
  left:9px;
  color:#a6afbf;
  font-size:8px;
  font-weight:800;
  letter-spacing:.08em;
}
.spread-slot>strong{
  max-width:100%;
  min-height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 16px;
  color:#a6afbf;
  font-size:10px;
  line-height:1.25;
  word-break:keep-all;
}
.spread-slot-card{
  width:68px;
  height:102px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.spread-slot-card:empty:before{
  content:'';
  width:50px;
  height:75px;
  border:1px solid rgba(174,194,217,.15);
  border-radius:7px;
  background:rgba(23,31,47,.18);
}
.spread-slot-card .mini-card{
  width:68px;
  height:102px;
  min-height:102px;
  padding:6px 5px;
  border-radius:7px;
  box-shadow:0 9px 20px rgba(174,194,217,.13);
  animation:slotCardSettle .62s cubic-bezier(.2,.72,.25,1) both;
}
.spread-slot-card .mini-card strong,
.spread-slot-card .mini-card .roman{
  font-size:8px;
}
.spread-slot.is-filled{
  border-color:rgba(174,194,217,.28);
  background:rgba(23,31,47,.48);
  box-shadow:0 7px 18px rgba(174,194,217,.045);
}
@keyframes slotCardSettle{
  from{opacity:0;transform:translateY(6px) scale(.96)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
.deck-wrap{
  position:relative;
}
.tarot-table .deck{
  position:relative;
  grid-template-columns:repeat(13,minmax(0,1fr));
  gap:6px;
  margin:0;
  padding:13px;
  border:1px solid rgba(174,194,217,.11);
  border-radius:18px;
  background:rgba(23,31,47,.38);
  box-shadow:inset 0 8px 22px rgba(174,194,217,.035);
}
.tarot-table .card-button{
  transform-origin:center 85%;
  box-shadow:0 4px 8px rgba(174,194,217,.08);
}
.tarot-table .card-button.is-drawn{
  opacity:.18;
  filter:saturate(.55);
  box-shadow:none;
}
.tarot-table .picked-list{
  margin-top:14px;
}
.tarot-table .picked-list span{
  border-color:#617294;
  background:rgba(23,31,47,.62);
}
.tarot-table .selection-note{
  margin:12px 2px 0;
  color:#a6afbf;
  font-size:11px;
}
.deck.is-shuffling .card-button{
  animation:tableShuffle .56s cubic-bezier(.2,.72,.25,1) both;
}
.deck.is-shuffling .card-button:nth-child(3n+1){animation-delay:20ms}
.deck.is-shuffling .card-button:nth-child(3n+2){animation-delay:45ms}
.deck.is-shuffling .card-button:nth-child(3n){animation-delay:70ms}
@keyframes tableShuffle{
  0%,100%{transform:translate3d(0,0,0) rotate(0)}
  38%{transform:translate3d(7px,-5px,0) rotate(4deg)}
  68%{transform:translate3d(-6px,3px,0) rotate(-3deg)}
}
.table-flying-card{
  position:fixed;
  z-index:9999;
  pointer-events:none;
  transform-origin:top left;
  filter:drop-shadow(0 16px 18px rgba(174,194,217,.18));
}
.table-flying-card .mini-card{
  width:100%;
  height:100%;
  min-height:0;
}

.session-spread-shell{
  position:sticky;
  top:10px;
  z-index:24;
  width:min(900px,100%);
  margin:18px auto 24px;
  padding:12px 14px 10px;
  border:1px solid rgba(23,31,47,.96);
  border-radius:18px;
  background:rgba(23,31,47,.92);
  box-shadow:0 14px 34px rgba(25,25,35,.075);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
}
.session-spread-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}
.session-spread-head>span{
  color:#a6afbf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.11em;
}
.session-spread-head>strong{
  color:var(--muted);
  font-size:10px;
  font-weight:750;
}
.session-spread-toggle{
  display:none;
  flex:0 0 auto;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #617294;
  border-radius:999px;
  background:#151c29;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
}
.session-spread-anchor{
  height:1px;
  margin-top:18px;
}
.session-spread-shell.is-stuck .session-spread-toggle{
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.session-spread-shell.is-stuck:not(.is-expanded){
  padding:6px 10px 6px;
  border-radius:14px;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-spread-head{
  margin-bottom:3px;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-spread-head>strong{
  display:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread.card-summary{
  gap:6px;
  padding:4px 2px 2px;
}
.session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread .summary-item{
  flex-basis:58px;
  max-width:58px;
  padding:4px 3px 3px;
  border-radius:9px;
}
.session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread .summary-item .mini-card{
  height:78px;
  min-height:78px;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-position{
  min-height:18px;
  padding-top:2px;
  margin-bottom:3px;
  overflow:hidden;
  font-size:8px;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item>p{
  display:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item.is-active{
  transform:none;
}

.reading-session-spread.card-summary{
  justify-content:center;
  gap:8px;
  margin:0;
  padding:7px 2px 3px;
  overflow-x:auto;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.reading-session-spread .summary-item{
  flex:0 0 78px;
  max-width:78px;
  padding:7px 4px 5px;
  border-radius:11px;
  transition:transform .28s cubic-bezier(.2,.72,.25,1),background-color .28s ease;
}
.reading-session-spread .summary-item .mini-card{
  position:relative;
  left:-2.5px;
  height:111px;
  min-height:111px;
  transition:transform .28s cubic-bezier(.2,.72,.25,1),box-shadow .28s ease,border-color .28s ease;
}
.reading-session-spread .summary-item>p{
  margin-top:4px;
  font-size:9px;
}
.session-position{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  min-height:27px;
  padding-top:4px;
  margin-bottom:5px;
  color:#a6afbf;
  font-size:9px;
  font-weight:800;
  line-height:1.25;
  text-align:center;
  word-break:keep-all;
}
.reading-session-spread .summary-item.is-active{
  background:
    linear-gradient(#151c29,#151c29)
    4px 6px / calc(100% - 4px) calc(100% - 6px) no-repeat;
  transform:translateY(-1px);
}
.reading-session-spread .summary-item.is-active .mini-card{
  transform:translateY(-2px);
  border-color:#5e6f90;
  box-shadow:0 10px 22px rgba(174,194,217,.12);
}
.result-position[data-position-index]{
  scroll-margin-top:200px;
  transition:border-color .24s ease,box-shadow .24s ease,background-color .24s ease;
}
.result-position[data-position-index]:focus{
  outline:none;
  border-color:#617294;
  box-shadow:0 0 0 3px rgba(174,194,217,.055);
}

@media(hover:hover) and (pointer:fine){
  .table-shuffle:not(:disabled):hover{
    border-color:#4b5872;
    background:rgba(23,31,47,.9);
    color:#a6afbf;
    transform:translateY(-1px);
  }
  .tarot-table .card-button:not(:disabled):hover{
    transform:translateY(-7px) rotate(-.5deg);
    box-shadow:0 10px 16px rgba(174,194,217,.14);
  }
}

@media(max-width:900px){
  .tarot-table .deck{grid-template-columns:repeat(10,minmax(0,1fr))}
  .spread-board{grid-template-columns:repeat(3,minmax(0,1fr))}
  .spread-board.spread-4,.spread-board.spread-5{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media(max-width:650px){
  .tarot-table-surface{
    padding:14px;
    border-radius:21px;
    transform:none!important;
  }
  .table-topline{
    align-items:flex-start;
    margin-bottom:13px;
  }
  .table-topline>div{
    align-items:flex-start;
    flex-direction:column;
    gap:2px;
  }
  .table-shuffle{
    min-height:36px;
    padding:7px 10px;
    font-size:11px;
  }
  .spread-board,
  .spread-board.spread-1,
  .spread-board.spread-2,
  .spread-board.spread-3,
  .spread-board.spread-4,
  .spread-board.spread-5{
    grid-template-columns:repeat(2,minmax(0,1fr));
    min-height:0;
    gap:7px;
    padding:9px;
    border-radius:16px;
  }
  .spread-board.spread-1{
    grid-template-columns:minmax(150px,210px);
  }
  .spread-slot{
    min-height:116px;
    padding:8px 4px 6px;
  }
  .spread-slot-card{
    width:60px;
    height:90px;
  }
  .spread-slot-card .mini-card{
    width:60px;
    height:90px;
    min-height:90px;
  }
  .tarot-table .deck{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px;
    padding:9px;
    border-radius:15px;
  }
  .tarot-table .selection-note{
    font-size:10px;
    line-height:1.55;
  }
  .session-spread-anchor{
    margin-top:14px;
  }
  .session-spread-shell{
    top:6px;
    margin:0 auto 20px;
    padding:9px 9px 7px;
    border-radius:15px;
  }
  .session-spread-head>strong{
    display:none;
  }
  .reading-session-spread.card-summary{
    justify-content:flex-start;
  }
  .reading-session-spread .summary-item{
    flex-basis:66px;
    max-width:66px;
  }
  .reading-session-spread .summary-item .mini-card{
    height:96px;
    min-height:96px;
  }
  .session-position{
    min-height:22px;
    font-size:8px;
  }
  .result-position[data-position-index]{
    scroll-margin-top:170px;
  }
}

@media(prefers-reduced-motion:reduce){
  .tarot-table-surface,
  .spread-slot-card .mini-card,
  .deck.is-shuffling .card-button,
  .reading-session-spread .summary-item,
  .reading-session-spread .summary-item .mini-card{
    animation:none!important;
    transition:none!important;
  }
}


/* Question-first tarot table: the prompt sits above the physical card space. */
.question-session-stage{
  display:grid;
  width:100%;
  min-height:620px;
  margin-top:18px;
  isolation:isolate;
}
.question-session-stage>.question-table-preview,
.question-session-stage>.question-modal-layer{
  grid-area:1/1;
}
.question-table-preview{
  min-width:0;
  pointer-events:none;
  opacity:.58;
  filter:saturate(.82) blur(1.2px);
  transform:scale(.985);
  transform-origin:center;
  transition:opacity .62s cubic-bezier(.2,.72,.25,1),filter .62s ease,transform .62s cubic-bezier(.2,.72,.25,1);
}
.question-table-preview .tarot-table{
  height:100%;
  margin:0;
}
.question-table-preview .tarot-table-surface{
  min-height:620px;
}
.preview-shuffle{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:7px 10px;
  border:1px solid #5e6f90;
  border-radius:999px;
  background:rgba(23,31,47,.48);
  color:#a6afbf;
  font-size:9px;
  font-weight:800;
  letter-spacing:.08em;
}
.preview-deck{
  display:grid;
  grid-template-columns:repeat(13,minmax(0,1fr));
  gap:6px;
  padding:13px;
  border:1px solid rgba(174,194,217,.11);
  border-radius:18px;
  background:rgba(23,31,47,.32);
  box-shadow:inset 0 8px 22px rgba(174,194,217,.03);
}
.preview-card{
  display:block;
  width:100%;
  aspect-ratio:2/3;
  border:1px solid #323b4d;
  border-radius:7px;
  background:#30405e url('/artwork/card-back.svg') center/100% 100% no-repeat;
  box-shadow:0 4px 8px rgba(174,194,217,.08);
}
.preview-card:nth-child(4n+1){transform:translateY(2px) rotate(-.4deg)}
.preview-card:nth-child(4n+2){transform:translateY(-1px) rotate(.35deg)}
.preview-card:nth-child(4n+3){transform:translateY(1px) rotate(-.2deg)}
.question-modal-layer{
  z-index:3;
  display:grid;
  place-items:center;
  padding:34px;
  background:radial-gradient(circle at center,rgba(23,31,47,.2) 0%,rgba(23,31,47,.04) 48%,transparent 72%);
  transition:opacity .52s ease,transform .62s cubic-bezier(.2,.72,.25,1);
}
.question-modal-panel{
  width:min(620px,100%);
  margin:0;
  border-color:#617294;
  background:rgba(23,31,47,.965);
  box-shadow:0 28px 70px rgba(174,194,217,.18),0 0 0 1px rgba(23,31,47,.74) inset;
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
}
.question-session-stage.is-opening .question-modal-layer{
  opacity:0;
  pointer-events:none;
  transform:translateY(-16px) scale(.985);
}
.question-session-stage.is-opening .question-table-preview{
  opacity:1;
  filter:none;
  transform:scale(1);
}

/* The moving card is already spread-size, so artwork and type never stretch in flight. */
.table-flying-card{
  transform-origin:center center;
}
.table-flying-card .mini-card{
  width:100%;
  height:100%;
  min-height:0;
  padding:6px 5px;
  border-radius:7px;
}
.table-flying-card .mini-card strong,
.table-flying-card .mini-card .roman{
  font-size:8px;
}
.table-flying-card .artwork-holder{
  width:100%;
}

@media(max-width:900px){
  .preview-deck{grid-template-columns:repeat(10,minmax(0,1fr))}
}

@media(max-width:650px){
  .question-session-stage{
    min-height:650px;
    margin-top:14px;
  }
  .question-table-preview .tarot-table-surface{
    min-height:650px;
  }
  .question-modal-layer{
    align-items:center;
    padding:38px 12px 18px;
  }
  .question-modal-panel{
    width:100%;
    padding:20px;
    border-radius:20px;
  }
  .preview-deck{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px;
    padding:9px;
    border-radius:15px;
  }
}

@media(prefers-reduced-motion:reduce){
  .question-table-preview,
  .question-modal-layer{
    transition:none!important;
  }
}


/* Reading-session alignment polish. */
.selection-heading .step-label{
  display:block;
  margin-bottom:16px;
}
.selection-heading h2{
  margin-top:0;
}
.reading-intro{
  max-width:900px;
}
@media(max-width:650px){
  .selection-heading .step-label{
    margin-bottom:14px;
  }
}


/* Compact sticky spread v2 — text-only rail while stuck. */
.session-card-name{
  display:none;
}
.session-position{
  min-height:25px;
  padding-top:2px;
  margin-bottom:5px;
}
.session-spread-shell.is-stuck:not(.is-expanded){
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-rows:28px;
  align-items:center;
  gap:8px;
  padding:3px 9px;
  border-radius:13px;
  overflow:hidden;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-spread-head{
  display:contents;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-spread-head>span{
  grid-column:1;
  grid-row:1;
  align-self:center;
  white-space:nowrap;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-spread-head>strong{
  display:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-spread-toggle{
  grid-column:3;
  grid-row:1;
  align-self:center;
  min-height:24px;
  padding:3px 8px;
}
.session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread.card-summary{
  grid-column:2;
  grid-row:1;
  min-width:0;
  min-height:0;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:safe center;
  gap:0;
  margin:0;
  padding:0;
  overflow-x:auto;
  overflow-y:hidden;
  scrollbar-width:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread.card-summary::-webkit-scrollbar{
  display:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread .summary-item{
  flex:0 0 auto;
  max-width:none;
  min-width:0;
  display:inline-flex;
  align-items:center;
  padding:0;
  border-radius:0;
  background:transparent;
  transform:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-position,
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item .mini-card,
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item>p{
  display:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .session-card-name{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#a6afbf;
  font-size:10px;
  font-weight:800;
  line-height:1;
  text-align:center;
  white-space:nowrap;
}
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item+.summary-item .session-card-name:before{
  content:'·';
  margin:0 7px;
  color:#b4bbc9;
  font-weight:700;
}
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item.is-active{
  background:transparent;
  transform:none;
}
.session-spread-shell.is-stuck:not(.is-expanded) .summary-item.is-active .session-card-name{
  color:#a6afbf;
}

/* Keep the modal preview at exactly three rows on every width. */
.question-table-preview .preview-deck{
  grid-template-columns:repeat(13,minmax(0,1fr));
}

@media(max-width:650px){
  .session-position{
    min-height:21px;
    padding-top:1px;
  }
  .session-spread-shell.is-stuck:not(.is-expanded){
    grid-template-rows:26px;
    gap:6px;
    padding:3px 7px;
  }
  .session-spread-shell.is-stuck:not(.is-expanded) .reading-session-spread.card-summary{
    height:26px;
  }
  .session-spread-shell.is-stuck:not(.is-expanded) .session-spread-head>span{
    font-size:8px;
  }
  .session-spread-shell.is-stuck:not(.is-expanded) .session-card-name{
    font-size:9px;
  }
  .session-spread-shell.is-stuck:not(.is-expanded) .summary-item+.summary-item .session-card-name:before{
    margin:0 5px;
  }
  .question-table-preview .preview-deck{
    grid-template-columns:repeat(6,minmax(0,1fr));
    gap:5px;
    padding:9px;
    border-radius:15px;
  }
  .question-table-preview .preview-card:nth-child(n+19){
    display:none;
  }
}


/* Result card scale + arrow-link consistency pass. */
/* Inline links that end in an arrow use one quiet interaction: underline on hover/focus. */
.about-link,
.explainer-link,
.saved-reading-again,
.result-tools-foot a,
.card-topic-grid article>a,
.back-link,
.text-link{
  text-decoration:none;
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
@media(hover:hover) and (pointer:fine){
  .about-link:hover,
  .explainer-link:hover,
  .saved-reading-again:hover,
  .result-tools-foot a:hover,
  .card-topic-grid article>a:hover,
  .back-link:hover,
  .text-link:hover{
    text-decoration-line:underline;
  }
}
.about-link:focus-visible,
.explainer-link:focus-visible,
.saved-reading-again:focus-visible,
.result-tools-foot a:focus-visible,
.card-topic-grid article>a:focus-visible,
.back-link:focus-visible,
.text-link:focus-visible{
  text-decoration-line:underline;
}

/* Results: let the artwork lead, with quieter type inside each physical card. */
[data-reading] .reading-session-spread .summary-item{
  flex-basis:88px;
  max-width:88px;
}
[data-reading] .reading-session-spread .summary-item .mini-card{
  height:132px;
  min-height:132px;
  padding:6px 5px 7px;
}
[data-reading] .result-position .detail-card{
  width:124px;
}
[data-reading] .result-position .detail-card .mini-card{
  height:186px;
  min-height:186px;
  padding:7px 6px 8px;
}
[data-reading] .reading-session-spread .mini-card .artwork-holder,
[data-reading] .result-position .detail-card .mini-card .artwork-holder{
  height:82%;
}
[data-reading] .reading-session-spread .mini-card .roman,
[data-reading] .result-position .detail-card .mini-card .roman{
  font-size:10px;
  line-height:1;
}
[data-reading] .reading-session-spread .mini-card strong,
[data-reading] .result-position .detail-card .mini-card strong{
  font-size:9px;
  line-height:1.2;
  font-weight:700;
}

@media(max-width:650px){
  [data-reading] .reading-session-spread .summary-item{
    flex-basis:76px;
    max-width:76px;
  }
  [data-reading] .reading-session-spread .summary-item .mini-card{
    height:114px;
    min-height:114px;
    padding:5px 4px 6px;
  }
  [data-reading] .result-position .detail-card{
    width:96px;
    margin-left:16px;
  }
  [data-reading] .result-position .detail-card .mini-card{
    height:144px;
    min-height:144px;
    padding:6px 5px 7px;
  }
  [data-reading] .reading-session-spread .mini-card .roman,
  [data-reading] .result-position .detail-card .mini-card .roman{
    font-size:8px;
  }
  [data-reading] .reading-session-spread .mini-card strong,
  [data-reading] .result-position .detail-card .mini-card strong{
    font-size:8px;
  }
}


/* Korean reading-flow titles wrap only between words, never between Hangul syllables. */
.reading-intro h1,
.panel-heading h2,
.selection-heading h2,
.results-heading h2,
.spread-info h2,
.spread-info h3,
.result-title h3,
.reading-answer strong,
.reading-context-answer span,
.insight-card strong,
.verdict h3,
.combination-reading h2,
.combination-meta strong,
.synthesis h2,
.related h2{
  word-break:keep-all;
  overflow-wrap:normal;
}


/* Home hero conversion path — one primary start action, one quiet daily shortcut. */
html{scroll-behavior:smooth}
#readings{scroll-margin-top:24px}
.home-intro-with-art .hero-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px 18px;
  margin-top:24px;
}
.home-intro-with-art .hero-start{
  width:max-content;
  min-height:48px;
  padding:12px 18px;
  border-radius:12px;
  white-space:nowrap;
}
.home-intro-with-art .hero-today-link{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:var(--wine);
  font-size:14px;
  font-weight:800;
  text-decoration:none;
  text-underline-offset:4px;
}
@media(hover:hover) and (pointer:fine){
  .home-intro-with-art .hero-today-link:hover{
    text-decoration:underline;
  }
}
.home-intro .hero-copy .hero-actions{
  animation:heroContentIn 1.02s cubic-bezier(.2,.72,.25,1) .50s both;
}
.home-intro .hero-copy .quiet-label{
  animation-delay:.64s;
}
@media(max-width:650px){
  .home-intro-with-art .hero-actions{
    margin-top:20px;
    gap:8px 14px;
  }
  .home-intro-with-art .hero-start{
    min-height:46px;
    padding:11px 16px;
    font-size:14px;
  }
  .home-intro-with-art .hero-today-link{
    font-size:13px;
  }
  .home-intro-with-art .quiet-label{
    margin-top:14px;
  }
}
@media(max-width:380px){
  .home-intro-with-art .hero-actions{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  .home-intro .hero-copy .hero-actions{animation:none!important}
}


/* Tarot motion pass — tactile draw, flip, and settle. */
.tarot-table .card-button{
  --hover-rx:0deg;
  --hover-ry:0deg;
  --card-tilt:0deg;
  transform:rotate(var(--card-tilt));
  transform-style:preserve-3d;
  will-change:transform,opacity;
  transition:
    transform .22s cubic-bezier(.2,.72,.25,1),
    box-shadow .22s ease,
    opacity .26s ease,
    filter .26s ease;
}
.tarot-table:not(.is-ready) .card-button{
  opacity:0;
  transform:translate3d(0,16px,0) scale(.965) rotate(var(--card-tilt));
}
.tarot-table.is-ready .card-button{
  animation:deckDealIn .56s cubic-bezier(.18,.76,.22,1) backwards;
  animation-delay:var(--deal-delay,0ms);
}
@keyframes deckDealIn{
  0%{
    opacity:0;
    transform:translate3d(0,17px,0) scale(.96) rotate(calc(var(--card-tilt) - .8deg));
    box-shadow:0 2px 5px rgba(174,194,217,.04);
  }
  62%{
    opacity:1;
    transform:translate3d(0,-2px,0) scale(1.012) rotate(calc(var(--card-tilt) + .15deg));
    box-shadow:0 8px 14px rgba(174,194,217,.11);
  }
  100%{
    opacity:1;
    transform:translate3d(0,0,0) scale(1) rotate(var(--card-tilt));
    box-shadow:0 4px 8px rgba(174,194,217,.08);
  }
}
.tarot-table .card-button.is-launching{
  opacity:.34;
  filter:saturate(.62);
  transform:translateY(-5px) scale(.965) rotate(var(--card-tilt));
  box-shadow:0 3px 7px rgba(174,194,217,.06);
}
.tarot-table .card-button.is-drawn{
  opacity:.14;
  filter:saturate(.45);
  transform:scale(.94) rotate(var(--card-tilt));
  box-shadow:none;
}

.spread-slot.is-next{
  border-color:rgba(174,194,217,.42);
  background:rgba(23,31,47,.42);
  animation:nextSlotBreath 1.9s ease-in-out infinite;
}
.spread-slot.is-receiving{
  border-style:solid;
  border-color:rgba(174,194,217,.55);
  background:rgba(23,31,47,.58);
  box-shadow:0 0 0 4px rgba(174,194,217,.055),inset 0 0 0 1px rgba(23,31,47,.72);
}
.spread-slot.is-filled{
  animation:slotSurfaceSettle .54s cubic-bezier(.18,.76,.22,1) both;
}
.spread-board.is-complete{
  animation:spreadComplete .72s cubic-bezier(.18,.76,.22,1) both;
}
@keyframes nextSlotBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(174,194,217,0)}
  50%{box-shadow:0 0 0 4px rgba(174,194,217,.05)}
}
@keyframes slotSurfaceSettle{
  0%{transform:scale(.982);box-shadow:0 0 0 rgba(174,194,217,0)}
  58%{transform:scale(1.012);box-shadow:0 9px 22px rgba(174,194,217,.065)}
  100%{transform:scale(1);box-shadow:0 7px 18px rgba(174,194,217,.045)}
}
@keyframes spreadComplete{
  0%{transform:scale(1)}
  48%{transform:scale(1.008);box-shadow:inset 0 1px 12px rgba(174,194,217,.035),0 12px 30px rgba(174,194,217,.055)}
  100%{transform:scale(1);box-shadow:inset 0 1px 12px rgba(174,194,217,.035)}
}

.table-flying-card{
  perspective:1100px;
  transform-origin:center center;
  filter:drop-shadow(0 18px 24px rgba(174,194,217,.22));
  will-change:transform;
}
.flight-card-inner{
  position:absolute;
  inset:0;
  display:block;
  transform-style:preserve-3d;
  will-change:transform;
}
.flight-card-back,
.flight-card-front{
  position:absolute;
  inset:0;
  display:block;
  overflow:hidden;
  border-radius:8px;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.flight-card-back{
  background:#30405e url('/artwork/card-back.svg') center/100% 100% no-repeat;
  border:1px solid #323b4d;
  box-shadow:0 4px 12px rgba(174,194,217,.18);
}
.flight-card-front{
  transform:rotateY(180deg);
}
.flight-card-front .mini-card{
  width:100%;
  height:100%;
  min-height:0;
  border-radius:8px;
  box-shadow:none;
}
.flight-card-front .mini-card strong,
.flight-card-front .mini-card .roman{
  font-size:clamp(5px,1.1vw,8px);
}

.deck.is-shuffling .card-button:nth-child(odd){
  animation-name:tableShuffleLeft;
}
.deck.is-shuffling .card-button:nth-child(even){
  animation-name:tableShuffleRight;
}
@keyframes tableShuffleLeft{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--card-tilt))}
  28%{transform:translate3d(-7px,-5px,0) rotate(-4deg) scale(1.015)}
  62%{transform:translate3d(8px,2px,0) rotate(3deg) scale(.992)}
}
@keyframes tableShuffleRight{
  0%,100%{transform:translate3d(0,0,0) rotate(var(--card-tilt))}
  28%{transform:translate3d(7px,-4px,0) rotate(4deg) scale(1.012)}
  62%{transform:translate3d(-8px,3px,0) rotate(-3deg) scale(.994)}
}

@media(hover:hover) and (pointer:fine){
  .tarot-table.is-ready .card-button:not(:disabled):hover{
    transform:
      translateY(-8px)
      rotate(var(--card-tilt))
      rotateX(var(--hover-rx))
      rotateY(var(--hover-ry));
    box-shadow:0 13px 20px rgba(174,194,217,.15);
  }
  .tarot-table.is-ready .card-button:not(:disabled):active{
    transform:
      translateY(-4px)
      scale(.985)
      rotate(var(--card-tilt))
      rotateX(var(--hover-rx))
      rotateY(var(--hover-ry));
  }
}

@media(max-width:650px){
  .tarot-table.is-ready .card-button{
    animation-duration:.48s;
  }
  .spread-slot.is-next{
    animation-duration:2.15s;
  }
}

@media(prefers-reduced-motion:reduce){
  .tarot-table:not(.is-ready) .card-button{
    opacity:1;
    transform:none;
  }
  .tarot-table.is-ready .card-button,
  .spread-slot.is-next,
  .spread-slot.is-filled,
  .spread-board.is-complete{
    animation:none!important;
  }
  .tarot-table .card-button,
  .tarot-table .card-button.is-launching,
  .tarot-table .card-button.is-drawn{
    transition:none!important;
    transform:none!important;
  }
}


/* Motion identity pass — quiet, tactile, consistent. */
:root{
  --motion-ease:cubic-bezier(.2,.72,.25,1);
  --motion-fast:180ms;
  --motion-ui:280ms;
  --motion-settle:420ms;
}

/* The hero keeps its printed-card rotations while pointer depth moves on an independent axis. */
.hero-card{
  transition:
    transform var(--motion-ui) var(--motion-ease),
    translate var(--motion-settle) var(--motion-ease),
    box-shadow var(--motion-ui) ease;
}

/* Navigation behaves like ink appearing under the active line, not a bouncing app tab. */
header nav a{
  position:relative;
}
header nav a::after{
  content:'';
  position:absolute;
  right:0;
  bottom:7px;
  left:0;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right center;
  opacity:.42;
  transition:transform var(--motion-ui) var(--motion-ease),opacity var(--motion-fast) ease;
}
header nav a[aria-current="page"]::after{
  transform:scaleX(1);
  opacity:.7;
}

/* Reading tiles share the same small lift + slower artwork response as physical cards. */
.reading-tile{
  transition:
    transform var(--motion-ui) var(--motion-ease),
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    background-color var(--motion-ui) ease;
}
.tile-card-thumb{
  transition:
    transform var(--motion-settle) var(--motion-ease),
    box-shadow var(--motion-ui) ease;
}
.tile-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
}
.tile-link::after{
  content:'→';
  display:inline-block;
  transition:transform var(--motion-ui) var(--motion-ease),opacity var(--motion-fast) ease;
  opacity:.72;
}

/* Repeated service cards use one restrained hover vocabulary. */
.card-library-tile,
.guide-list>a,
.card-prev-next a,
.card-topic-grid article,
.saved-reading-item{
  transition:
    transform var(--motion-ui) var(--motion-ease),
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    background-color var(--motion-ui) ease;
}
.card-library-thumb img{
  transition:transform var(--motion-settle) var(--motion-ease);
}
.saved-reading-again,
.about-link,
.explainer-link,
.result-tools-foot a,
.card-topic-grid article>a,
.back-link,
.text-link,
.home-intro-with-art .hero-today-link{
  transition:
    color var(--motion-fast) ease,
    text-decoration-color var(--motion-fast) ease,
    opacity var(--motion-fast) ease,
    translate var(--motion-ui) var(--motion-ease);
}

/* FAQ disclosure feels hinged rather than instant. */
.faq-list summary::after,
details summary::after{
  transition:transform var(--motion-ui) var(--motion-ease),color var(--motion-fast) ease;
  transform-origin:center;
}
.faq-list details[open] summary::after{
  transform:translateY(-50%) rotate(180deg);
}
details[open]>p{
  animation:detailReveal .28s var(--motion-ease) both;
}

/* Form feedback stays tactile but visually quiet. */
textarea,
input[type="search"],
.count-options label span,
.situation-options label span{
  transition:
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    box-shadow var(--motion-ui) ease,
    transform var(--motion-fast) var(--motion-ease);
}
textarea:focus,
input[type="search"]:focus{
  box-shadow:0 0 0 4px rgba(174,194,217,.055);
}

/* A successful save/share gets one soft confirmation pulse, then returns to rest. */
.button.is-success{
  animation:softSuccess .62s var(--motion-ease) both;
}
@keyframes softSuccess{
  0%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(174,194,217,0)}
  45%{transform:translateY(-1px) scale(1.012);box-shadow:0 8px 20px rgba(174,194,217,.08)}
  100%{transform:translateY(0) scale(1);box-shadow:0 0 0 rgba(174,194,217,0)}
}

/* Result cards acknowledge attention without making the reading itself move around. */
.result-position[data-position-index]{
  transition:
    border-color var(--motion-ui) ease,
    box-shadow var(--motion-ui) ease,
    background-color var(--motion-ui) ease;
}
.session-spread-toggle{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease,
    background-color var(--motion-fast) ease,
    color var(--motion-fast) ease;
}

/* Existing reveal system, just a little shorter and closer to the surface. */
.scroll-reveal{
  translate:0 10px;
  transition-duration:.92s;
}

/* Step lists finish after their parent panel arrives, creating a quiet reading rhythm. */
.how.scroll-reveal ol li{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .62s var(--motion-ease),transform .62s var(--motion-ease);
}
.how.scroll-reveal.is-visible ol li{
  opacity:1;
  transform:translateY(0);
}
.how.scroll-reveal.is-visible ol li:nth-child(1){transition-delay:.08s}
.how.scroll-reveal.is-visible ol li:nth-child(2){transition-delay:.15s}
.how.scroll-reveal.is-visible ol li:nth-child(3){transition-delay:.22s}

@media(hover:hover) and (pointer:fine){
  header nav a:hover::after{
    transform:scaleX(1);
    transform-origin:left center;
    opacity:.62;
  }

  .reading-tile:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 28px rgba(48,43,43,.055);
  }
  .primary-grid .reading-tile:hover .tile-card-thumb,
  .secondary-grid .reading-tile:hover .tile-card-thumb{
    transform:translateY(-4px) rotate(6deg) scale(1.006);
    box-shadow:0 14px 28px rgba(48,43,43,.13);
  }
  .reading-tile:hover .tile-link::after{
    transform:translateX(3px);
    opacity:1;
  }

  .card-library-tile:hover,
  .guide-list>a:hover,
  .card-prev-next a:hover,
  .saved-reading-item:hover{
    transform:translateY(-2px);
  }
  .card-library-tile:hover .card-library-thumb img{
    transform:translateY(-1px) rotate(-.7deg) scale(1.018);
  }
  .card-topic-grid article:hover{
    transform:translateY(-1px);
    border-color:#617294;
    box-shadow:0 8px 20px rgba(48,43,43,.035);
  }

  .saved-reading-again:hover,
  .about-link:hover,
  .explainer-link:hover,
  .result-tools-foot a:hover,
  .card-topic-grid article>a:hover,
  .back-link:hover,
  .text-link:hover,
  .home-intro-with-art .hero-today-link:hover{
    translate:2px 0;
  }

  .faq-list summary:hover::after{
    color:#a6afbf;
  }
  .session-spread-toggle:not(:disabled):hover{
    transform:translateY(-1px);
  }
  .result-position[data-position-index]:hover{
    border-color:#617294;
    box-shadow:0 8px 22px rgba(48,43,43,.028);
  }
}

@media(hover:none){
  .reading-tile:active,
  .card-library-tile:active,
  .guide-list>a:active,
  .card-prev-next a:active{
    transform:scale(.992);
  }
}

@media(prefers-reduced-motion:reduce){
  .hero-card,
  header nav a::after,
  .reading-tile,
  .tile-card-thumb,
  .tile-link::after,
  .card-library-tile,
  .guide-list>a,
  .card-prev-next a,
  .card-topic-grid article,
  .saved-reading-item,
  .saved-reading-again,
  .about-link,
  .explainer-link,
  .result-tools-foot a,
  .card-topic-grid article>a,
  .back-link,
  .text-link,
  .home-intro-with-art .hero-today-link,
  .faq-list summary::after,
  details summary::after,
  textarea,
  input[type="search"],
  .count-options label span,
  .situation-options label span,
  .result-position[data-position-index],
  .session-spread-toggle{
    transition:none!important;
    translate:none!important;
  }
  .button.is-success,
  .how.scroll-reveal ol li{
    animation:none!important;
    transition:none!important;
    opacity:1!important;
    transform:none!important;
  }
}


/* Motion tuning — restore the visible stagger, speed up card hover lifts. */
.scroll-reveal{
  translate:0 14px;
  transition-duration:1.08s;
}

/* Card hover should answer immediately; settling can stay soft. */
.hero-card{
  transition:
    transform 190ms var(--motion-ease),
    translate 220ms var(--motion-ease),
    box-shadow 190ms ease;
}
.reading-tile{
  transition:
    transform 180ms var(--motion-ease),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}
.tile-card-thumb{
  transition:
    transform 190ms var(--motion-ease),
    box-shadow 190ms ease;
}
.card-library-tile,
.guide-list>a,
.card-prev-next a,
.saved-reading-item{
  transition:
    transform 180ms var(--motion-ease),
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}
.card-library-thumb img{
  transition:transform 190ms var(--motion-ease);
}

@media(hover:hover) and (pointer:fine){
  .reading-tile:hover,
  .card-library-tile:hover,
  .guide-list>a:hover,
  .card-prev-next a:hover,
  .saved-reading-item:hover{
    transition-duration:180ms;
  }
  .primary-grid .reading-tile:hover .tile-card-thumb,
  .secondary-grid .reading-tile:hover .tile-card-thumb,
  .card-library-tile:hover .card-library-thumb img{
    transition-duration:190ms;
  }
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal,
  .hero-card,
  .reading-tile,
  .tile-card-thumb,
  .card-library-tile,
  .guide-list>a,
  .card-prev-next a,
  .saved-reading-item,
  .card-library-thumb img{
    transition:none!important;
  }
}


/* Subpage entrance sequences — restore the layered reveal rhythm. */
html.motion-ready:not(.motion-loaded) [data-reading]>.back-link,
html.motion-ready:not(.motion-loaded) .reading-intro>.kicker,
html.motion-ready:not(.motion-loaded) .reading-intro>h1,
html.motion-ready:not(.motion-loaded) .reading-intro>.lead,
html.motion-ready:not(.motion-loaded) .reading-intro>p:not(.lead),
html.motion-ready:not(.motion-loaded) .reading-intro>.reading-meta,
html.motion-ready:not(.motion-loaded) .question-session-stage,
html.motion-ready:not(.motion-loaded) .card-library-hero>.section-kicker,
html.motion-ready:not(.motion-loaded) .card-library-hero>h1,
html.motion-ready:not(.motion-loaded) .card-library-hero>p,
html.motion-ready:not(.motion-loaded) .card-library-hero>.card-library-tools,
html.motion-ready:not(.motion-loaded) .card-dictionary-hero>.card-dictionary-art,
html.motion-ready:not(.motion-loaded) .card-dictionary-intro>.section-kicker,
html.motion-ready:not(.motion-loaded) .card-dictionary-intro>h1,
html.motion-ready:not(.motion-loaded) .card-dictionary-intro>.card-dictionary-lead,
html.motion-ready:not(.motion-loaded) .card-dictionary-intro>.card-keyword-row,
html.motion-ready:not(.motion-loaded) .guide-detail>.back-link,
html.motion-ready:not(.motion-loaded) .guide-hero>.kicker,
html.motion-ready:not(.motion-loaded) .guide-hero>h1,
html.motion-ready:not(.motion-loaded) .guide-hero>.lead,
html.motion-ready:not(.motion-loaded) .guide-page>.kicker,
html.motion-ready:not(.motion-loaded) .guide-page>h1,
html.motion-ready:not(.motion-loaded) .guide-page>.lead,
html.motion-ready:not(.motion-loaded) .faq-page-hero>.section-kicker,
html.motion-ready:not(.motion-loaded) .faq-page-hero>h1,
html.motion-ready:not(.motion-loaded) .faq-page-hero>p,
html.motion-ready:not(.motion-loaded) .info-hero>.section-kicker,
html.motion-ready:not(.motion-loaded) .info-hero>h1,
html.motion-ready:not(.motion-loaded) .info-hero>p,
html.motion-ready:not(.motion-loaded) .saved-readings-hero>.section-kicker,
html.motion-ready:not(.motion-loaded) .saved-readings-hero>h1,
html.motion-ready:not(.motion-loaded) .saved-readings-hero>p,
html.motion-ready:not(.motion-loaded) .saved-readings-hero>.saved-clear{
  opacity:0;
  transform:translateY(14px);
}

html.motion-ready.motion-loaded [data-reading]>.back-link,
html.motion-ready.motion-loaded .reading-intro>*,
html.motion-ready.motion-loaded .question-session-stage,
html.motion-ready.motion-loaded .card-library-hero>*,
html.motion-ready.motion-loaded .card-dictionary-hero>.card-dictionary-art,
html.motion-ready.motion-loaded .card-dictionary-intro>*,
html.motion-ready.motion-loaded .guide-detail>.back-link,
html.motion-ready.motion-loaded .guide-hero>*,
html.motion-ready.motion-loaded .guide-page>.kicker,
html.motion-ready.motion-loaded .guide-page>h1,
html.motion-ready.motion-loaded .guide-page>.lead,
html.motion-ready.motion-loaded .faq-page-hero>*,
html.motion-ready.motion-loaded .info-hero>*,
html.motion-ready.motion-loaded .saved-readings-hero>*{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .82s var(--motion-ease),
    transform .82s var(--motion-ease);
}

html.motion-ready.motion-loaded [data-reading]>.back-link,
html.motion-ready.motion-loaded .guide-detail>.back-link{transition-delay:.04s}
html.motion-ready.motion-loaded .reading-intro>.kicker,
html.motion-ready.motion-loaded .card-library-hero>.section-kicker,
html.motion-ready.motion-loaded .card-dictionary-intro>.section-kicker,
html.motion-ready.motion-loaded .guide-hero>.kicker,
html.motion-ready.motion-loaded .guide-page>.kicker,
html.motion-ready.motion-loaded .faq-page-hero>.section-kicker,
html.motion-ready.motion-loaded .info-hero>.section-kicker,
html.motion-ready.motion-loaded .saved-readings-hero>.section-kicker{transition-delay:.10s}

html.motion-ready.motion-loaded .reading-intro>h1,
html.motion-ready.motion-loaded .card-library-hero>h1,
html.motion-ready.motion-loaded .card-dictionary-intro>h1,
html.motion-ready.motion-loaded .guide-hero>h1,
html.motion-ready.motion-loaded .guide-page>h1,
html.motion-ready.motion-loaded .faq-page-hero>h1,
html.motion-ready.motion-loaded .info-hero>h1,
html.motion-ready.motion-loaded .saved-readings-hero>h1{transition-delay:.19s}

html.motion-ready.motion-loaded .reading-intro>.lead,
html.motion-ready.motion-loaded .card-library-hero>p,
html.motion-ready.motion-loaded .card-dictionary-intro>.card-dictionary-lead,
html.motion-ready.motion-loaded .guide-hero>.lead,
html.motion-ready.motion-loaded .guide-page>.lead,
html.motion-ready.motion-loaded .faq-page-hero>p,
html.motion-ready.motion-loaded .info-hero>p,
html.motion-ready.motion-loaded .saved-readings-hero>p{transition-delay:.28s}

html.motion-ready.motion-loaded .reading-intro>p:not(.lead),
html.motion-ready.motion-loaded .card-dictionary-intro>.card-keyword-row,
html.motion-ready.motion-loaded .card-library-hero>.card-library-tools,
html.motion-ready.motion-loaded .saved-readings-hero>.saved-clear{transition-delay:.37s}

html.motion-ready.motion-loaded .reading-intro>.reading-meta{transition-delay:.46s}
html.motion-ready.motion-loaded .question-session-stage{transition-delay:.55s}
html.motion-ready.motion-loaded .card-dictionary-hero>.card-dictionary-art{transition-delay:.14s}

/* Scroll sections below the fold keep a visible stagger instead of arriving as one block. */
.reading-depth-grid article.scroll-reveal,
.card-meaning-grid article.scroll-reveal,
.card-topic-grid article.scroll-reveal,
.spread-info li.scroll-reveal,
.home-info-card.scroll-reveal{
  translate:0 12px;
}
.reading-depth-grid article.scroll-reveal.is-visible,
.card-meaning-grid article.scroll-reveal.is-visible,
.card-topic-grid article.scroll-reveal.is-visible,
.spread-info li.scroll-reveal.is-visible,
.home-info-card.scroll-reveal.is-visible{
  translate:0 0;
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready:not(.motion-loaded) [data-reading]>.back-link,
  html.motion-ready:not(.motion-loaded) .reading-intro>*,
  html.motion-ready:not(.motion-loaded) .question-session-stage,
  html.motion-ready:not(.motion-loaded) .card-library-hero>*,
  html.motion-ready:not(.motion-loaded) .card-dictionary-hero>.card-dictionary-art,
  html.motion-ready:not(.motion-loaded) .card-dictionary-intro>*,
  html.motion-ready:not(.motion-loaded) .guide-detail>.back-link,
  html.motion-ready:not(.motion-loaded) .guide-hero>*,
  html.motion-ready:not(.motion-loaded) .guide-page>.kicker,
  html.motion-ready:not(.motion-loaded) .guide-page>h1,
  html.motion-ready:not(.motion-loaded) .guide-page>.lead,
  html.motion-ready:not(.motion-loaded) .faq-page-hero>*,
  html.motion-ready:not(.motion-loaded) .info-hero>*,
  html.motion-ready:not(.motion-loaded) .saved-readings-hero>*{
    opacity:1!important;
    transform:none!important;
  }
}


/* Original cascade reveal restoration — cards keep the old chwararak rhythm. */
/* Later hover shorthands had overwritten opacity/translate transitions on reveal cards.
   Keep the original 1.08s reveal + sibling delays, while hover transforms stay quick. */
.scroll-reveal{
  transition-property:opacity,translate,transform,border-color,box-shadow,background-color,color;
  transition-duration:1.08s,1.08s,180ms,180ms,180ms,180ms,180ms;
  transition-timing-function:
    cubic-bezier(.2,.72,.25,1),
    cubic-bezier(.2,.72,.25,1),
    cubic-bezier(.2,.72,.25,1),
    ease,ease,ease,ease;
  transition-delay:
    var(--reveal-delay,0ms),
    var(--reveal-delay,0ms),
    0ms,0ms,0ms,0ms,0ms;
}

/* These are the two most visible cascades: preserve the original stagger exactly. */
.reading-tile.scroll-reveal,
.card-library-tile.scroll-reveal{
  opacity:0;
  translate:0 14px;
}
.reading-tile.scroll-reveal.is-visible,
.card-library-tile.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}

@media(prefers-reduced-motion:reduce){
  .scroll-reveal{
    transition:none!important;
  }
}


/* Entry reveal coordination — title first, scroll content second. */
/* On refresh, viewport content may already intersect. Hold only those scroll reveals
   until the page-title entrance has clearly started; after that, scrolling is independent. */
html.motion-ready.entry-reveal-lock .scroll-reveal.is-visible{
  opacity:0;
  translate:0 14px;
}

/* FAQ uses the same quick cascade as the card grids: each row is its own reveal item. */
.faq-list>details.scroll-reveal{
  opacity:0;
  translate:0 12px;
}
.faq-list>details.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready.entry-reveal-lock .scroll-reveal.is-visible,
  .faq-list>details.scroll-reveal,
  .faq-list>details.scroll-reveal.is-visible{
    opacity:1!important;
    translate:none!important;
  }
}


/* Three-item cascade + result spacing polish. */
/* Three-card/three-item groups should reveal as individual pieces, never as one block. */
.home-info-card.scroll-reveal,
.about-grid article.scroll-reveal,
.reading-depth-grid article.scroll-reveal,
.card-meaning-grid article.scroll-reveal,
.card-prev-next a.scroll-reveal,
.related a.scroll-reveal{
  opacity:0;
  translate:0 14px;
}
.home-info-card.scroll-reveal.is-visible,
.about-grid article.scroll-reveal.is-visible,
.reading-depth-grid article.scroll-reveal.is-visible,
.card-meaning-grid article.scroll-reveal.is-visible,
.card-prev-next a.scroll-reveal.is-visible,
.related a.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}

/* Results: give the icon a real column so copy never crowds it. */
.related a{
  grid-template-columns:48px minmax(0,1fr) auto;
  column-gap:18px;
  row-gap:5px;
}
.related-icon{
  width:48px;
  height:48px;
}

/* Today only lost its grid gap on mobile because an older display:block override won. */
@media(max-width:800px){
  .daily-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:14px;
  }
  .daily-grid .result-position{
    margin:0;
  }
}
@media(max-width:650px){
  .related a{
    grid-template-columns:44px minmax(0,1fr);
    column-gap:14px;
    row-gap:5px;
  }
  .related-icon{
    width:44px;
    height:44px;
    grid-row:1 / span 2;
  }
  .related a strong{
    grid-column:2;
    justify-self:start;
  }
}
@media(prefers-reduced-motion:reduce){
  .home-info-card.scroll-reveal,
  .about-grid article.scroll-reveal,
  .reading-depth-grid article.scroll-reveal,
  .card-meaning-grid article.scroll-reveal,
  .card-prev-next a.scroll-reveal,
  .related a.scroll-reveal{
    opacity:1!important;
    translate:none!important;
  }
}


/* First-paint reveal fix + tarot-guide cascade. */
/* While the entry sequence is locked, newly assigned scroll-reveal classes must hide
   instantly. Otherwise the normal 1.08s transition visibly fades content OUT first. */
html.motion-ready.entry-reveal-lock .scroll-reveal,
html.motion-ready.entry-reveal-lock .scroll-reveal.is-visible{
  opacity:0!important;
  translate:0 14px!important;
  transition:none!important;
}

/* Tarot guide index + guide article sections use the same chwararak rhythm as card grids. */
.guide-list>a.scroll-reveal,
.guide-article>section.scroll-reveal{
  opacity:0;
  translate:0 14px;
}
.guide-list>a.scroll-reveal.is-visible,
.guide-article>section.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready.entry-reveal-lock .scroll-reveal,
  html.motion-ready.entry-reveal-lock .scroll-reveal.is-visible,
  .guide-list>a.scroll-reveal,
  .guide-list>a.scroll-reveal.is-visible,
  .guide-article>section.scroll-reveal,
  .guide-article>section.scroll-reveal.is-visible{
    opacity:1!important;
    translate:none!important;
    transition:none!important;
  }
}


/* Guide cascade specificity fix — keep hover fast, but let reveal delay actually win. */
.guide-list>a.scroll-reveal,
.guide-article>section.scroll-reveal{
  transition-property:opacity,translate,transform,border-color,box-shadow,background-color;
  transition-duration:1.08s,1.08s,180ms,180ms,180ms,180ms;
  transition-timing-function:
    cubic-bezier(.2,.72,.25,1),
    cubic-bezier(.2,.72,.25,1),
    cubic-bezier(.2,.72,.25,1),
    ease,ease,ease;
  transition-delay:
    var(--reveal-delay,0ms),
    var(--reveal-delay,0ms),
    0ms,0ms,0ms,0ms;
}
@media(hover:hover) and (pointer:fine){
  .guide-list>a.scroll-reveal:hover{
    transition-duration:1.08s,1.08s,180ms,180ms,180ms,180ms;
  }
}
@media(prefers-reduced-motion:reduce){
  .guide-list>a.scroll-reveal,
  .guide-article>section.scroll-reveal{
    transition:none!important;
  }
}


/* Home reading-notes trio — preserve the 1 → 2 → 3 cascade. */
.home-info-grid>.home-info-card.scroll-reveal{
  opacity:0;
  translate:0 14px;
  transition-property:opacity,translate,transform,border-color,box-shadow;
  transition-duration:1.08s,1.08s,180ms,180ms,180ms;
  transition-timing-function:
    cubic-bezier(.2,.72,.25,1),
    cubic-bezier(.2,.72,.25,1),
    cubic-bezier(.2,.72,.25,1),
    ease,ease;
  transition-delay:
    var(--reveal-delay,0ms),
    var(--reveal-delay,0ms),
    0ms,0ms,0ms;
}
.home-info-grid>.home-info-card.scroll-reveal.is-visible{
  opacity:1;
  translate:0 0;
}
@media(prefers-reduced-motion:reduce){
  .home-info-grid>.home-info-card.scroll-reveal{
    opacity:1!important;
    translate:none!important;
    transition:none!important;
  }
}


/* Optional question-aware interpretation; visually subordinate to the main result. */
.question-focus{
  width:min(900px,100%);
  margin:0 auto 22px;
  padding:19px 22px;
  border:1px solid #617294;
  border-radius:18px;
  background:#151c29;
}
.question-focus .step-label{display:block;margin-bottom:8px}
.question-focus h3{
  margin:0 0 10px;
  font-size:clamp(18px,2.5vw,22px);
  line-height:1.4;
  color:var(--ink);
  letter-spacing:-.03em;
  word-break:keep-all;
}
.question-focus p{
  margin:8px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.75;
  word-break:keep-all;
}
.question-focus .question-focus-counterpoint{
  margin-top:13px;
  padding:11px 12px;
  border-left:2px solid #596988;
  border-radius:0 9px 9px 0;
  background:#161c2a;
}
.question-focus .question-focus-counterpoint strong{
  color:var(--ink);
  margin-right:5px;
}
.question-focus .question-focus-next{
  padding-top:10px;
  margin-top:12px;
  border-top:1px solid #617294;
}
.question-focus-next strong{
  color:var(--ink);
  margin-right:7px;
}
.question-focus small{
  display:block;
  margin-top:12px;
  color:#a6afbf;
  font-size:11px;
  line-height:1.6;
  word-break:keep-all;
}
@media(max-width:650px){
  .question-focus{margin-bottom:18px;padding:16px;border-radius:16px}
  .question-focus h3{font-size:18px}
  .question-focus p{font-size:13px}
}


/* Saved question-specific reading, collapsed by default to keep archives scannable. */
.saved-focus-details{
  margin-top:13px;
  padding:0 13px;
  border:1px solid #617294;
  border-radius:12px;
  background:#151c29;
}
.saved-focus-details summary{
  cursor:pointer;
  padding:12px 0;
  color:var(--ink);
  font-size:13px;
  font-weight:750;
  line-height:1.5;
  word-break:keep-all;
}
.saved-focus-details summary:focus-visible{
  outline:2px solid #46526b;
  outline-offset:3px;
}
.saved-focus-body{
  border-top:1px solid #617294;
  padding:8px 0 13px;
}
.saved-focus-body p{
  margin:9px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.75;
  word-break:keep-all;
}
.saved-focus-body strong{color:var(--ink)}
.saved-focus-legacy{
  margin:12px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.6;
}


/* Explain symbolic time windows without implying a predicted real-world date. */
.timing-disclaimer{
  display:block;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid #617294;
  color:#a6afbf;
  font-size:12px;
  line-height:1.65;
  word-break:keep-all;
}
@media(max-width:650px){
  .timing-disclaimer{font-size:12px;line-height:1.7}
}


/* Deep Reading — premium layer that follows a complete free reading. */
.deep-reading-offer{
  position:relative;
  width:min(900px,100%);
  margin:26px auto 34px;
  padding:24px;
  border:1px solid #607294;
  border-top:2px solid var(--wine);
  border-radius:20px;
  background:
    linear-gradient(180deg,rgba(23,31,47,.98),rgba(23,31,47,.96)),
    #151c29;
  box-shadow:0 16px 42px rgba(174,194,217,.08);
  overflow:hidden;
}
.deep-reading-offer:after{
  content:'';
  position:absolute;
  inset:auto -56px -76px auto;
  width:180px;
  height:180px;
  border:1px solid rgba(174,194,217,.09);
  border-radius:50%;
  pointer-events:none;
}
.deep-reading-kicker{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:12px;
}
.deep-reading-kicker>span:first-child{
  color:var(--wine);
  font-size:11px;
  font-weight:800;
  letter-spacing:.16em;
}
.deep-reading-price{
  color:var(--muted);
  font-size:12px;
  font-weight:800;
}
.deep-reading-offer h2{
  margin:0;
  color:var(--ink);
  font:700 clamp(24px,3.4vw,34px)/1.35 'Hahmlet',serif;
  letter-spacing:-.04em;
  word-break:keep-all;
}
.deep-reading-lead{
  max-width:680px;
  margin:10px 0 20px;
  color:var(--muted);
  font-size:14px;
  line-height:1.8;
  word-break:keep-all;
}
.deep-reading-preview{
  display:grid;
  gap:0;
  margin:0 0 20px;
  border-top:1px solid #617294;
}
.deep-reading-preview article{
  display:grid;
  grid-template-columns:34px minmax(0,1fr) 20px;
  align-items:start;
  gap:12px;
  padding:14px 0;
  border-bottom:1px solid #617294;
}
.deep-reading-preview article>span{
  padding-top:1px;
  color:var(--wine);
  font:700 12px/1.4 'Hahmlet',serif;
}
.deep-reading-preview strong{
  display:block;
  margin-bottom:4px;
  color:var(--ink);
  font-size:14px;
}
.deep-reading-preview p{
  margin:0;
  color:var(--muted);
  font-size:12px;
  line-height:1.65;
  word-break:keep-all;
}
.deep-reading-preview i{
  color:#a6afbf;
  font-style:normal;
  font-size:15px;
  opacity:.65;
}
.deep-reading-cta{
  min-height:48px;
  padding-inline:20px;
}
.deep-reading-note{
  margin:9px 0 0;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
}
@media(max-width:650px){
  .deep-reading-offer{
    margin:22px auto 28px;
    padding:19px 16px;
    border-radius:17px;
  }
  .deep-reading-kicker{
    align-items:flex-start;
    flex-direction:column;
    gap:5px;
  }
  .deep-reading-offer h2{font-size:25px}
  .deep-reading-lead{font-size:13px;margin-bottom:17px}
  .deep-reading-preview article{
    grid-template-columns:28px minmax(0,1fr) 16px;
    gap:9px;
    padding:13px 0;
  }
  .deep-reading-preview strong{font-size:13px}
  .deep-reading-preview p{font-size:12px}
  .deep-reading-cta{width:100%}
}


/* Merchant information for payment review and e-commerce disclosure. */
.merchant-info{
  margin-top:26px;
  padding-top:17px;
  border-top:1px solid rgba(174,194,217,.10);
  color:rgba(174,194,217,.36);
  opacity:.72;
}
.merchant-info h3{
  margin:0 0 8px;
  color:rgba(174,194,217,.42);
  font-size:10px;
  font-weight:400;
  letter-spacing:.03em;
}
.merchant-info p{
  display:flex;
  flex-wrap:wrap;
  gap:4px 8px;
  margin:3px 0;
  font-size:9px;
  line-height:1.6;
}
.merchant-info span{color:rgba(174,194,217,.34)}
.merchant-info strong{
  color:rgba(174,194,217,.44);
  font-weight:400;
}
.merchant-info a{
  color:inherit;
  text-decoration:none;
}
@media(max-width:650px){
  .merchant-info p{display:block}
  .merchant-info span,
  .merchant-info strong{display:inline}
  .merchant-info span:not(:first-child)::before{content:' · ';color:var(--muted)}
}

/* Compact merchant disclosure: keep review info visible without taking footer space. */
.merchant-info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:2px 7px;
  padding-top:10px;
  margin-top:16px;
  line-height:1.45;
}
.merchant-info h3{
  display:inline;
  margin:0 4px 0 0;
  font-size:9px;
  white-space:nowrap;
}
.merchant-info p{
  display:inline;
  margin:0;
  font-size:8.5px;
  line-height:1.45;
}
.merchant-info p+ p::before{content:' · ';color:rgba(174,194,217,.25)}
.merchant-info p span,
.merchant-info p strong,
.merchant-info p a{display:inline}
.merchant-info p span+strong{margin-left:3px}
.merchant-info p strong+span::before{content:' · ';margin:0 4px;color:rgba(174,194,217,.25)}
@media(max-width:650px){
  .merchant-info{gap:1px 5px;padding-top:9px;margin-top:13px}
  .merchant-info p{display:inline;font-size:8px}
  .merchant-info span,
  .merchant-info strong{display:inline}
  .merchant-info span:not(:first-child)::before{content:''}
}


/* Home simplification — direct reading chooser, no hero. */
.home-reading-start{
  padding-top:52px;
}
.home-select-intro{
  margin:0 0 44px;
  padding-bottom:28px;
  border-bottom:1px solid var(--line);
}
.home-select-intro .section-kicker{
  display:block;
  margin-bottom:10px;
}
.home-select-intro p{
  margin:12px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.home-two-column{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:16px!important;
}
.home-two-column .reading-tile{
  min-height:238px;
}
.home-two-column .tile-top{
  font-size:clamp(26px,2.7vw,34px);
  font-weight:760;
  letter-spacing:-.04em;
}
.home-two-column .tile-bottom{
  font-size:14px;
}
.home-two-column .tile-link{
  font-weight:700;
}
@media(max-width:680px){
  .home-reading-start{padding-top:34px}
  .home-select-intro{margin-bottom:34px;padding-bottom:22px}
  .home-two-column{grid-template-columns:1fr!important}
  .home-two-column .reading-tile{min-height:210px}
}


.visually-hidden{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}


/* Pre-JS first-paint guard — reveal targets are hidden before app.mjs assigns classes. */
html.motion-ready.entry-reveal-lock :is(
  .section-heading,
  .reading-tile,
  .how,
  .about,
  .about-grid article,
  .guide-teaser,
  .spread-info .spread-head,
  .spread-info li,
  .reading-depth-head,
  .reading-depth-grid article,
  .reading-card-links,
  .card-library-group-head,
  .card-library-tile,
  .card-meaning-overview .card-section-heading,
  .card-meaning-grid article,
  .card-topic-section .card-section-heading,
  .card-topic-grid article,
  .card-dictionary-cta,
  .card-prev-next a,
  .guide-visual,
  .guide-article>section,
  .guide-list>a,
  .guide-next,
  .faq-list>details,
  .faq-guide-link,
  .info-card,
  .info-footer,
  .saved-reading-item,
  .saved-reading-empty,
  .results-heading,
  .reading-answer,
  .reading-context-answer,
  .reading-insights,
  .card-summary,
  .result-position,
  .combination-reading,
  .synthesis,
  .related h2,
  .related a,
  .result-actions,
  .result-tools-foot,
  .home-info-card
){
  opacity:0!important;
  translate:0 14px!important;
  transition:none!important;
}
@media(prefers-reduced-motion:reduce){
  html.motion-ready.entry-reveal-lock :is(
    .section-heading,
    .reading-tile,
    .how,
    .about,
    .about-grid article,
    .guide-teaser,
    .spread-info .spread-head,
    .spread-info li,
    .reading-depth-head,
    .reading-depth-grid article,
    .reading-card-links,
    .card-library-group-head,
    .card-library-tile,
    .card-meaning-overview .card-section-heading,
    .card-meaning-grid article,
    .card-topic-section .card-section-heading,
    .card-topic-grid article,
    .card-dictionary-cta,
    .card-prev-next a,
    .guide-visual,
    .guide-article>section,
    .guide-list>a,
    .guide-next,
    .faq-list>details,
    .faq-guide-link,
    .info-card,
    .info-footer,
    .saved-reading-item,
    .saved-reading-empty,
    .results-heading,
    .reading-answer,
    .reading-context-answer,
    .reading-insights,
    .card-summary,
    .result-position,
    .combination-reading,
    .synthesis,
    .related h2,
    .related a,
    .result-actions,
    .result-tools-foot,
    .home-info-card
  ){
    opacity:1!important;
    translate:none!important;
  }
}


/* Refund policy is a reading document, not a two-column feature grid. */
.refund-page .info-page{
  max-width:820px;
}
.refund-page .info-hero{
  width:100%;
  max-width:none;
}
.refund-page .info-grid{
  display:block;
}
.refund-page .info-card{
  display:block;
  padding:22px 0;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.refund-page .info-card:last-child{
  border-bottom:1px solid var(--line);
}
.refund-page .info-card h2{
  margin:0 0 8px!important;
  font-size:18px;
}
.refund-page .info-card p{
  max-width:760px;
  font-size:15px!important;
  line-height:1.8;
}

@media(max-width:650px){
  .deep-reading-page-hero h1{
    font-size:clamp(36px,11vw,50px);
  }
  .deep-reading-page-hero>p{
    font-size:15px;
  }
  .deep-reading-feature-list article{
    grid-template-columns:38px minmax(0,1fr);
    gap:10px;
    padding:16px 0;
  }
  .deep-reading-page-compare{
    grid-template-columns:1fr;
    gap:10px;
  }
  .deep-reading-page-compare>div{
    padding:16px;
    border-radius:16px;
  }
  .deep-reading-page-status{
    padding-top:20px;
  }
  .deep-reading-page-status .button{
    width:100%;
  }
  .refund-page .info-card{
    padding:18px 0;
  }
  .refund-page .info-card h2{
    font-size:17px;
  }
  .refund-page .info-card p{
    font-size:14px!important;
  }
}


/* Refund keeps the same cards as other info pages, but stacks one full-width card per row. */
.refund-page .info-page{
  max-width:900px;
}
.refund-page .info-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.refund-page .info-card{
  display:block;
  margin:0!important;
  padding:22px;
  border:1px solid #617294;
  border-radius:20px;
  background:#151b28;
  box-shadow:0 8px 22px rgba(0,0,0,.03);
}
.refund-page .info-card:last-child{
  border-bottom:1px solid #617294;
}
.refund-page .info-card h2{
  margin:1px 0 8px!important;
  font-size:19px;
  line-height:1.35;
  letter-spacing:-.03em;
  font-weight:800;
}
.refund-page .info-card p{
  max-width:none;
  margin:0!important;
  color:var(--muted)!important;
  font-size:14px!important;
  line-height:1.72;
}

@media(max-width:650px){
  .deep-reading-feature-grid,
  .deep-reading-page-compare{
    grid-template-columns:1fr;
    gap:10px;
  }
  .deep-reading-feature-card{
    min-height:0;
  }
  .deep-reading-page-status{
    grid-template-columns:42px minmax(0,1fr);
    gap:12px;
    padding:14px;
    border-radius:16px;
  }
  .deep-reading-page-status .button{
    width:100%;
  }
  .refund-page .info-grid{
    gap:10px;
  }
  .refund-page .info-card{
    padding:14px;
    border-radius:16px;
  }
  .refund-page .info-card h2{
    font-size:17px;
  }
  .refund-page .info-card p{
    font-size:13px!important;
    line-height:1.65;
  }
}


/* Deep Reading uses the exact shared info-page typography and card system. */
.deep-reading-price-line{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:16px!important;
}
.info-hero .deep-reading-price-line strong{
  color:var(--wine);
  font-size:24px;
  line-height:1;
  font-weight:800;
}
.info-hero .deep-reading-price-line span{
  color:var(--muted);
  font-size:13px;
}
.deep-reading-letter{
  color:var(--wine);
  font-family:inherit!important;
  font-size:12px;
  font-weight:800;
  letter-spacing:.04em;
}
.deep-reading-compare-grid{
  margin-bottom:12px;
}
.deep-reading-status-card{
  margin-top:0!important;
}
.deep-reading-status-card .button{
  width:max-content;
  margin-top:18px;
}
@media(max-width:650px){
  .deep-reading-price-line{
    flex-wrap:wrap;
    gap:6px 10px;
  }
  .deep-reading-status-card .button{
    width:100%;
  }
}




/* Deep Reading content rhythm — reuse Guide Detail + Info Card patterns already used on site. */
.deep-reading-guide-block{
  margin:0 0 36px;
}
.deep-reading-guide-block>.section-heading,
.deep-reading-compare-heading{
  margin:0 0 16px;
}
.deep-reading-guide-block>.section-heading>div,
.deep-reading-compare-heading>div{
  display:block;
}
.deep-reading-guide-block>.section-heading h2,
.deep-reading-compare-heading h2{
  margin:6px 0 0;
  font-size:24px;
  line-height:1.35;
  letter-spacing:-.035em;
  font-weight:800;
}
.deep-reading-guide-article{
  gap:12px;
}
.deep-reading-compare-grid{
  margin-bottom:18px;
}
.deep-reading-checkout-strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0!important;
  padding:22px;
  border:1px solid #617294;
  border-radius:20px;
  background:#151c29;
  box-shadow:none;
}
.deep-reading-checkout-strip>div{
  min-width:0;
}
.deep-reading-checkout-strip strong{
  display:block;
  margin-bottom:5px;
  font-size:15px;
  font-weight:800;
}
.deep-reading-checkout-strip p{
  max-width:610px;
  margin:0!important;
  color:var(--muted)!important;
  font-size:13px!important;
  line-height:1.55;
}
.deep-reading-checkout-strip .button{
  flex:0 0 auto;
  min-height:44px;
  margin:0;
  padding:11px 15px;
  border-radius:13px;
  white-space:nowrap;
}
@media(max-width:720px){
  .deep-reading-guide-block{
    margin-bottom:28px;
  }
  .deep-reading-guide-block>.section-heading h2,
  .deep-reading-compare-heading h2{
    font-size:22px;
  }
  .deep-reading-checkout-strip{
    align-items:stretch;
    flex-direction:column;
    padding:19px;
    border-radius:18px;
  }
  .deep-reading-checkout-strip .button{
    width:100%;
    justify-content:center;
  }
}


/* Deep reading result emphasis — preserve existing eyebrow variants. */
.deep-reading-offer{border-top:3px solid #e1eaf6;box-shadow:0 18px 56px rgba(5,11,25,.28),0 0 0 1px rgba(200,220,248,.10) inset}
.deep-reading-offer .deep-reading-cta{background:#dbe7f7;color:#15243c;border-color:#e6efff;box-shadow:0 7px 22px rgba(135,177,235,.23)}

/* Mobile reading-choice titles: a touch more prominent. */
@media(max-width:600px){.primary-grid .reading-tile .tile-top{font-size:24px;line-height:1.12}.secondary-grid .reading-tile .tile-top{font-size:24px;line-height:1.14}}

/* Match the question-stage backdrop's shuffle control to the real deck (desktop only). */
@media(min-width:651px){
  .question-table-preview .preview-shuffle{
    justify-content:center;
    gap:7px;
    min-height:44px;
    padding:8px 12px;
    font-size:12px;
    font-weight:800;
    letter-spacing:normal;
    box-shadow:0 4px 12px rgba(174,194,217,.045);
  }
  .question-table-preview .preview-shuffle>span{font-size:17px;line-height:1}
}

/* Compact mobile reading choices without shrinking their prominent headings. */
@media(max-width:600px){
 .primary-grid .reading-tile{min-height:175px;padding:13px 12px 11px}
 .primary-grid .reading-tile .tile-art{min-height:64px}
 .secondary-grid .reading-tile{min-height:120px;padding:11px 12px 10px}
 .secondary-grid .reading-tile .tile-art{min-height:32px}
}

/* Lift supporting copy within compact mobile reading tiles. */
@media(max-width:600px){.primary-grid .reading-tile .tile-art{min-height:42px;transform:translate(9px,-15px)}.secondary-grid .reading-tile .tile-art{min-height:20px;transform:translate(7px,-12px)}.primary-grid .reading-tile .tile-art>span{scale:.86}.secondary-grid .reading-tile .tile-art>span{scale:.9;transform-origin:left center}.primary-grid .reading-tile .tile-bottom,.secondary-grid .reading-tile .tile-bottom{transform:translateY(-13px)}}

/* Move the artwork itself inward/upward on mobile; translating its full-width wrapper did not visibly reposition it. */
@media(max-width:600px){
 .primary-grid .reading-tile .tile-art{transform:none}
 .primary-grid .reading-tile .tile-art>span{position:relative;left:24px;top:-19px}
 .secondary-grid .reading-tile .tile-art{transform:none}
 .secondary-grid .reading-tile .tile-art>span{position:relative;left:17px;top:-14px}
}

/* Mobile home cards use .tile-icon.tile-card-thumb (not legacy .tile-art). */
@media(max-width:600px){
 .primary-grid .reading-tile .tile-icon.tile-card-thumb{right:23px!important;bottom:24px!important}
 .secondary-grid .reading-tile .tile-icon.tile-card-thumb{right:21px!important;bottom:21px!important}
}

/* Slightly enlarge the actual artwork thumbnails on mobile. */
@media(max-width:600px){
 .primary-grid .reading-tile .tile-icon.tile-card-thumb{width:66px!important;height:99px!important;right:24px!important;bottom:23px!important;border-radius:8px}
 .secondary-grid .reading-tile .tile-icon.tile-card-thumb{width:66px!important;height:99px!important;right:23px!important;bottom:22px!important;border-radius:8px}
 .primary-grid .reading-tile .tile-card-thumb img,.secondary-grid .reading-tile .tile-card-thumb img{width:100%;height:100%;object-fit:cover}
}

/* Deep reading archive lives beneath free saved readings. */
.deep-library-section{margin-top:clamp(52px,8vw,100px);padding-top:clamp(32px,5vw,58px);border-top:1px solid rgba(178,195,227,.26)}
.deep-library-section .saved-readings-hero{margin-bottom:24px}
.deep-library-section #deep-record-status,.deep-library-footnote{color:var(--muted,#aebbd1);font-size:14px;line-height:1.7}
.deep-library-section #deep-record-status{margin:0 0 14px}
.deep-library-section #deep-record-empty{width:100%;box-sizing:border-box}
.deep-library-section #deep-record-empty h2{font-size:24px;margin:12px 0 6px}
/* The shared .saved-empty-card rule (including mobile sizing) controls both empty states. */
.deep-library-section #deep-record-list{margin-top:20px}
.deep-library-section .saved-reading-again{cursor:pointer;font:inherit}
.deep-library-section .saved-reading-again:disabled{opacity:.55;cursor:wait}
.deep-record-message{margin-top:10px;color:var(--muted,#aebbd1)}

.deep-record-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:12px}
.deep-record-actions .saved-delete{padding:8px 4px;cursor:pointer}
@media(max-width:600px){.deep-record-actions{gap:8px}}

/* Tarot dictionary: gentle individual-card levitation on desktop hover. */
@media (min-width:981px) and (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .card-library-tile .card-library-thumb{
    overflow:visible;
    position:relative;
    isolation:isolate;
    transition:transform .36s cubic-bezier(.2,.75,.2,1),filter .36s ease;
  }
  .card-library-tile .card-library-thumb img{
    border-radius:inherit;
  }
  .card-library-tile:hover .card-library-thumb,
  .card-library-tile:focus-visible .card-library-thumb{
    transform:translateY(-8px);
    animation:dictionary-card-float 1.9s ease-in-out infinite alternate,
              dictionary-card-glow 3s ease-in-out infinite alternate;
  }
}
@keyframes dictionary-card-float{
  from{translate:0 0}
  to{translate:0 -4px}
}
@keyframes dictionary-card-glow{
  from{filter:drop-shadow(0 0 8px rgba(187,209,244,.30)) drop-shadow(0 7px 10px rgba(0,0,0,.22))}
  to{filter:drop-shadow(0 0 17px rgba(187,209,244,.68)) drop-shadow(0 0 25px rgba(135,173,225,.29)) drop-shadow(0 11px 14px rgba(0,0,0,.25))}
}

/* Card dictionary: keep the main heading editorial, with SEO context secondary. */
.card-dictionary-meaning-label{
  margin:10px 0 13px;
  color:var(--muted,#aeb9ca);
  font-size:13px;
  line-height:1.65;
  letter-spacing:.015em;
}