:root{--n:#06090d;--panel:rgba(12,18,24,.92);--cream:#eee4ca;--muted:#a29989;--gold:#d8b76e;--gold2:#785b2e;--line:rgba(216,183,110,.22)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;color:var(--cream);font-family:"IBM Plex Sans Thai","Tahoma",sans-serif;background:radial-gradient(circle at 50% -15%,#243141 0,#0d1620 31%,#06090d 70%);overflow-x:hidden}button,input{font:inherit}button{color:inherit}.mystic-sky,.mystic-sky:before{position:fixed;inset:0;pointer-events:none;z-index:-2}.mystic-sky{opacity:.5;background-image:radial-gradient(#f6dd9b 0 1px,transparent 1.4px),radial-gradient(#fff 0 1px,transparent 1.3px);background-size:127px 139px,193px 211px;animation:mSky 40s linear infinite}.mystic-sky:before{content:"";background:radial-gradient(ellipse at 0 60%,rgba(110,30,43,.18),transparent 34%),radial-gradient(ellipse at 100% 25%,rgba(57,83,105,.23),transparent 34%)}.mystic-moon{position:fixed;right:-110px;top:-120px;width:390px;aspect-ratio:1;border:1px solid rgba(216,183,110,.12);border-radius:50%;box-shadow:0 0 100px rgba(216,183,110,.08);z-index:-1}.mystic-moon:after{content:"";position:absolute;inset:48px;border:1px solid rgba(216,183,110,.09);border-radius:50%;box-shadow:0 0 0 52px rgba(216,183,110,.015)}
.m-shell{width:min(1160px,calc(100% - 28px));margin:auto;padding:25px 0 60px}.m-top{display:flex;justify-content:space-between;align-items:center;padding:8px 2px 20px;border-bottom:1px solid var(--line)}.m-brand{display:flex;gap:11px;align-items:center}.m-seal{width:42px;height:42px;border:1px solid var(--gold2);border-radius:50%;display:grid;place-items:center;color:var(--gold);font-size:22px}.m-brand strong{display:block;font:600 1.12rem "Noto Serif Thai",serif;letter-spacing:.08em}.m-brand small,.m-date{color:#837b6e;font-size:.74rem;letter-spacing:.1em}.m-date{border:1px solid var(--line);border-radius:99px;padding:7px 11px}
.m-hero{text-align:center;padding:53px 10px 33px}.m-kicker{color:var(--gold);font-size:.72rem;letter-spacing:.25em}.m-hero h1{font:500 clamp(2.5rem,7vw,4.8rem)/1.1 "Noto Serif Thai",serif;margin:12px 0 10px;background:linear-gradient(#fff7df,#d7b66c 68%,#80602e);background-clip:text;-webkit-background-clip:text;color:transparent}.m-hero p{color:#aaa190;line-height:1.8;margin:0}.m-rule{display:inline-flex;gap:9px;align-items:center;margin-top:20px;padding:7px 12px;border:1px solid var(--line);border-radius:99px;color:#958b7a;font-size:.76rem;background:rgba(0,0,0,.18)}.m-rule i{width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 8px var(--gold)}
.m-layout{display:grid;grid-template-columns:310px 1fr;gap:24px}.m-panel{background:linear-gradient(145deg,rgba(18,25,32,.94),rgba(7,11,15,.9));border:1px solid var(--line);border-radius:19px;box-shadow:0 24px 70px rgba(0,0,0,.3);position:relative;overflow:hidden}.m-panel:before{content:"";position:absolute;inset:7px;border:1px solid rgba(216,183,110,.07);border-radius:13px;pointer-events:none}.m-controls{padding:25px}.m-step{display:flex;align-items:center;gap:9px;font:500 1rem "Noto Serif Thai",serif;color:#d8c49a;margin-bottom:14px}.m-step b{width:25px;height:25px;display:grid;place-items:center;border:1px solid var(--gold2);border-radius:50%;font:400 .7rem serif}.m-topics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:19px}.m-topic{cursor:pointer;border:1px solid rgba(216,183,110,.14);border-radius:10px;background:rgba(255,255,255,.02);padding:9px;color:#9a9182;transition:.22s}.m-topic:hover{border-color:var(--gold2)}.m-topic.active{color:#171108;background:linear-gradient(135deg,#ead49d,#b68942);border-color:#f0d492}.m-controls label{display:block;color:#b8ad99;font-size:.82rem;margin-bottom:7px}.m-question{width:100%;padding:11px 12px;background:rgba(0,0,0,.22);color:var(--cream);border:1px solid rgba(216,183,110,.17);border-radius:10px}.m-question::placeholder{color:#696258}.m-hint{font-size:.73rem;line-height:1.55;color:#736c61;margin:7px 0 20px}.m-buttons{display:grid;gap:8px}.m-btn{cursor:pointer;border:1px solid var(--line);border-radius:11px;padding:11px 12px;background:rgba(255,255,255,.025);transition:.22s}.m-btn:hover{transform:translateY(-2px);filter:brightness(1.08)}.m-primary{background:linear-gradient(135deg,#d8bb79,#946827);border-color:#e2c37c;color:#171108;font-weight:600}.m-count{margin-top:16px;color:#746c60;font-size:.72rem;text-align:center}
.m-chamber{padding:20px;min-height:500px;display:flex;flex-direction:column}.m-chamber-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:11px}.m-chamber h2{font:500 1.05rem "Noto Serif Thai",serif;margin:0}.m-status{font-size:.75rem;color:#8e8576}.m-status:before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 9px var(--gold);margin-right:7px}.m-altar{flex:1;min-height:410px;border:1px solid rgba(216,183,110,.09);border-radius:14px;background:radial-gradient(circle at 50% 45%,rgba(216,183,110,.08),transparent 36%),rgba(0,0,0,.08);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;padding:23px 8px}.m-altar:before{content:"";position:absolute;width:330px;aspect-ratio:1;border:1px solid rgba(216,183,110,.07);border-radius:50%;box-shadow:0 0 0 45px rgba(216,183,110,.015),0 0 0 90px rgba(216,183,110,.01)}.m-empty{text-align:center;position:relative;z-index:1;color:#746c61}.m-deck{width:112px;aspect-ratio:2/3;margin:0 auto 18px;border-radius:8px;background:url("assets/tarot-card-back.png") center/cover;border:1px solid #8a6a37;box-shadow:-4px 4px #17191a,-8px 8px #0c0f11,0 24px 42px rgba(0,0,0,.5);animation:mBreathe 3.5s ease-in-out infinite}.m-empty strong{display:block;font:500 .97rem "Noto Serif Thai",serif;color:#aa9e89}.m-empty small{font-size:.76rem}
.m-cards{position:relative;z-index:2;width:100%;display:flex;align-items:center;justify-content:center;gap:clamp(7px,2vw,18px)}.m-wrap{width:min(183px,28vw);perspective:1200px;opacity:0;transform:translateY(-70px) rotate(var(--tilt)) scale(.84);animation:mDeal .7s cubic-bezier(.2,.8,.2,1) var(--delay) forwards}.m-card{width:100%;aspect-ratio:2/3;position:relative;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.8,.2,1);cursor:pointer}.m-wrap.open .m-card{transform:rotateY(180deg)}.m-face{position:absolute;inset:0;border-radius:10px;backface-visibility:hidden;overflow:hidden;border:1px solid #9a773c;box-shadow:0 18px 40px rgba(0,0,0,.52)}.m-back{background:url("assets/tarot-card-back.png") center/cover}.m-back:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 28%,rgba(255,231,173,.25) 48%,transparent 65%);transform:translateX(-130%);animation:mShine 5s infinite}.m-front{transform:rotateY(180deg);padding:8px;color:#17150f;background:linear-gradient(150deg,#eee3c8,#bfae83)}.m-art{height:100%;padding:7px;border:1px solid #806231;display:grid;grid-template-rows:auto 1fr auto;background:radial-gradient(circle,rgba(255,251,229,.92),transparent 48%),repeating-linear-gradient(45deg,rgba(80,56,20,.025) 0 1px,transparent 1px 5px);transition:.5s}.m-front.rev .m-art{transform:rotate(180deg)}.m-num{text-align:center;font:500 .58rem serif;letter-spacing:.14em;color:#684f28}.m-vision{display:grid;place-items:center;position:relative}.m-vision:before,.m-vision:after{content:"";position:absolute;width:77%;aspect-ratio:1;border:1px solid rgba(108,78,31,.25);border-radius:50%}.m-vision:after{width:55%;border-style:dashed;animation:mSpin 18s linear infinite}.m-glyph{position:relative;z-index:1;font:500 clamp(1.8rem,5vw,3.5rem) "Noto Serif Thai",serif;color:#2b2413;text-shadow:0 2px #fff1c8}.m-cardname{text-align:center;border-top:1px solid rgba(105,77,31,.35);padding-top:6px}.m-cardname strong{display:block;font:600 clamp(.62rem,1.5vw,.9rem)/1.25 "Noto Serif Thai",serif}.m-cardname small{font:.5rem serif;letter-spacing:.07em;color:#66502f}.m-position{text-align:center;color:#aaa08e;font-size:.7rem;margin-top:9px}
.m-modal{position:fixed;inset:0;z-index:9999;display:flex;align-items:flex-end;justify-content:center;padding:18px;background:rgba(1,3,5,.74);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);opacity:0;visibility:hidden;transition:.3s}.m-modal.show{opacity:1;visibility:visible}.m-dialog{width:min(760px,100%);max-height:min(82vh,760px);overflow:auto;background:linear-gradient(155deg,#141d25,#090d12);border:1px solid rgba(216,183,110,.4);border-radius:20px 20px 12px 12px;box-shadow:0 -20px 80px rgba(0,0,0,.55),0 0 55px rgba(216,183,110,.08);transform:translateY(40px) scale(.97);transition:.4s cubic-bezier(.2,.8,.2,1);position:relative}.m-modal.show .m-dialog{transform:none}.m-dialog:before{content:"";position:absolute;inset:7px;border:1px solid rgba(216,183,110,.08);border-radius:14px;pointer-events:none}.m-close{position:sticky;float:right;top:13px;right:13px;z-index:2;width:35px;height:35px;border:1px solid var(--line);border-radius:50%;background:#111820;cursor:pointer;color:#cdbb96}.m-readhead{padding:27px 28px 20px;border-bottom:1px solid var(--line)}.m-readhead small{color:var(--gold);letter-spacing:.11em}.m-readhead h2{font:500 1.45rem "Noto Serif Thai",serif;margin:5px 45px 5px 0}.m-readhead p{margin:0;color:#8d8477;font-size:.84rem}.m-readgrid{display:grid;grid-template-columns:repeat(3,1fr)}.m-readitem{padding:21px 23px;border-right:1px solid var(--line)}.m-readitem:last-child{border:0}.m-readitem small{color:var(--gold)}.m-readitem h3{font:500 1rem "Noto Serif Thai",serif;margin:6px 0 8px}.m-readitem p{margin:0;color:#aaa08f;line-height:1.72;font-size:.88rem}.m-oracle{padding:21px 25px;border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(112,29,43,.13),transparent);display:flex;gap:13px}.m-oracle b{color:var(--gold);font-size:1.2rem}.m-oracle strong{font:500 .94rem "Noto Serif Thai",serif;color:#d8c49a}.m-oracle p{margin:3px 0 0;color:#aaa08f;line-height:1.7}.m-note{text-align:center;color:#625d54;font-size:.72rem;line-height:1.65;margin:23px 10px}
@keyframes mSky{to{background-position:127px -139px,-193px 211px}}@keyframes mBreathe{50%{transform:translateY(-6px);box-shadow:-4px 4px #17191a,-8px 8px #0c0f11,0 30px 48px rgba(216,183,110,.12)}}@keyframes mDeal{to{opacity:1;transform:translateY(0) rotate(var(--tilt)) scale(1)}}@keyframes mShine{0%,65%{transform:translateX(-130%)}90%,100%{transform:translateX(130%)}}@keyframes mSpin{to{transform:rotate(360deg)}}
@media(max-width:800px){.m-layout{grid-template-columns:1fr}.m-topics{grid-template-columns:repeat(4,1fr)}.m-chamber{min-height:440px}.m-altar{min-height:350px}.m-readgrid{grid-template-columns:1fr}.m-readitem{border-right:0;border-bottom:1px solid var(--line)}}@media(max-width:470px){.m-shell{width:calc(100% - 14px);padding-top:12px}.m-date{display:none}.m-hero{padding:38px 5px 27px}.m-hero h1{font-size:3rem}.m-hero p br{display:none}.m-controls{padding:20px 16px}.m-topic{font-size:.78rem;padding:8px 2px}.m-chamber{padding:11px}.m-altar{min-height:322px;padding:15px 3px}.m-cards{gap:3px}.m-wrap{width:30vw}.m-face{border-radius:6px}.m-front{padding:4px}.m-art{padding:5px 3px}.m-glyph{font-size:1.8rem}.m-cardname strong{font-size:.58rem}.m-cardname small{display:none}.m-position{font-size:.62rem}.m-modal{padding:8px}.m-dialog{max-height:88vh}.m-readhead,.m-readitem,.m-oracle{padding-left:19px;padding-right:19px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}.m-card,.m-modal,.m-dialog{transition-duration:.01ms}}