/* ARCANA
 *
 * The composition this table always had — the raster stage, the sidebar, the
 * dock, the oracle panel — with the framework taken out from under it: no
 * Tailwind import, no build step, one file the server hands over as it is.
 */

:root{--night:#050711;--ink:#0a1023;--indigo:#121938;--violet:#6f39a8;--amethyst:#9b63d4;--gold:#c9a55c;--gold-soft:#ead39a;--ivory:#f3e8c9;--paper:#e9dcc0;--muted:#b7ab95}
*{box-sizing:border-box}html{background:var(--night)}body{margin:0;background:radial-gradient(circle at 50% 32%,#182042 0,#0b1022 34%,#04060d 76%);color:var(--ivory);font-family:"Noto Sans Thai","Leelawadee UI",Tahoma,sans-serif;min-width:1180px}button,a,textarea{font:inherit}.app-shell{min-height:100vh;overflow:hidden;background-image:radial-gradient(circle at 9% 18%,rgba(164,106,214,.09),transparent 20%),radial-gradient(circle at 86% 74%,rgba(214,169,83,.06),transparent 24%)}
.topbar{height:64px;display:grid;grid-template-columns:260px 1fr 240px;align-items:center;border-bottom:1px solid rgba(201,165,92,.5);background:rgba(3,5,12,.88);padding:0 22px;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:12px;color:var(--gold-soft);text-decoration:none;font-family:Georgia,serif;font-size:28px;letter-spacing:.04em}.brand-mark{width:38px;height:38px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;box-shadow:0 0 24px rgba(201,165,92,.22)}.topbar nav{height:100%;display:flex;justify-content:center;gap:54px}.topbar nav a{color:#bdb5a6;text-decoration:none;display:grid;place-items:center;position:relative;padding:0 8px}.topbar nav a.active{color:var(--gold-soft)}.topbar nav a.active:after{content:"";position:absolute;bottom:-1px;height:2px;left:5%;right:5%;background:linear-gradient(90deg,transparent,var(--amethyst),var(--gold),var(--amethyst),transparent);box-shadow:0 0 10px var(--amethyst)}.top-actions{display:flex;justify-content:flex-end;gap:10px}.top-actions button{border:1px solid rgba(201,165,92,.45);color:var(--gold-soft);background:#080b16;border-radius:24px;padding:8px 14px}
.workspace{position:relative;height:calc(100vh - 64px);min-height:690px;display:grid;grid-template-columns:292px minmax(650px,1fr) 360px;gap:0}.ritual-sidebar{padding:22px 18px 16px;border-right:1px solid rgba(201,165,92,.42);background:linear-gradient(180deg,rgba(7,10,22,.92),rgba(4,6,13,.96));position:relative}.ritual-sidebar:before,.oracle-panel:before{content:"";position:absolute;inset:10px;border:1px solid rgba(201,165,92,.2);pointer-events:none}.sidebar-heading{text-align:center;padding:0 0 14px;border-bottom:1px solid rgba(201,165,92,.25)}.sidebar-heading span{font-family:Georgia,"Noto Serif Thai",serif;color:var(--muted)}.sidebar-heading h1{font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft);font-size:27px;margin:4px 0 0}.sidebar-heading small{color:var(--gold);letter-spacing:.18em}.spread-list{padding-top:8px}.spread{width:100%;height:54px;border:0;border-bottom:1px solid rgba(201,165,92,.18);background:transparent;color:#c9c1b1;display:flex;align-items:center;text-align:left;padding:7px 12px;gap:12px;position:relative;cursor:pointer}.spread i{font-style:normal;width:29px;height:29px;border:1px solid rgba(201,165,92,.38);border-radius:50%;display:grid;place-items:center;color:var(--gold)}.spread span{display:flex;flex-direction:column;gap:1px}.spread b{font-size:14px}.spread small{font-size:10px;color:#837d73}.spread.active{color:var(--ivory);background:linear-gradient(90deg,rgba(111,57,168,.4),rgba(111,57,168,.08));box-shadow:inset 3px 0 var(--amethyst),0 0 18px rgba(111,57,168,.15)}.spread.active:after{content:"◇";position:absolute;right:-5px;color:var(--gold)}.question-box{margin-top:14px;border:1px solid rgba(201,165,92,.48);padding:12px;border-radius:12px;background:rgba(7,10,20,.75);position:relative}.question-box label{display:block;color:var(--gold-soft);font-family:Georgia,"Noto Serif Thai",serif;margin-bottom:8px}.question-box textarea{width:100%;height:76px;resize:none;border:1px solid rgba(201,165,92,.25);border-radius:8px;background:linear-gradient(145deg,#101526,#080b14);color:#d6cdbd;padding:10px;outline:none;font-size:12px;line-height:1.65}.primary{background:linear-gradient(135deg,#3a1d5e,#7136a0)!important;border-color:#b57de4!important;box-shadow:0 0 18px rgba(142,68,196,.28)!important;color:#fff5dc!important}.question-box .primary{width:100%;margin-top:9px;border:1px solid;border-radius:18px;padding:9px;cursor:pointer}
.reading-table{position:relative;overflow:hidden;background:radial-gradient(circle at 50% 42%,rgba(35,45,86,.68),rgba(7,10,21,.86) 61%,rgba(2,4,10,.96));padding-bottom:100px}.reading-table:before{content:"";position:absolute;inset:0;background-image:radial-gradient(#d3b46f 0.8px,transparent .8px);background-size:43px 43px;opacity:.08}.table-title{height:44px;display:flex;align-items:center;justify-content:center;gap:16px;color:var(--gold-soft);font-family:Georgia,"Noto Serif Thai",serif;font-size:18px;letter-spacing:.03em;position:relative;z-index:5}.astrolabe{position:absolute;width:610px;height:610px;left:50%;top:46%;transform:translate(-50%,-50%);border:1px solid rgba(201,165,92,.35);border-radius:50%;box-shadow:0 0 60px rgba(73,51,119,.12),inset 0 0 55px rgba(201,165,92,.05)}.astrolabe:before,.astrolabe:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(201,165,92,.16);inset:39px}.astrolabe:after{inset:96px;border-style:dashed}.orbit{position:absolute;border:1px solid rgba(201,165,92,.13);border-radius:50%;inset:132px}.orbit-two{inset:185px}.star-map{position:absolute;inset:0;display:grid;place-items:center;color:rgba(201,165,92,.12);font-size:28px;letter-spacing:20px;transform:rotate(-15deg)}.spread-board{position:absolute;left:50%;top:49%;width:640px;height:520px;transform:translate(-50%,-50%);z-index:4}.tarot-card{position:absolute;width:74px;background:none;border:0;padding:0;color:var(--ivory);cursor:pointer;filter:drop-shadow(0 9px 9px rgba(0,0,0,.7));transition:.2s}.tarot-card:hover{z-index:15;transform:translateY(-6px) scale(1.05);filter:drop-shadow(0 0 9px rgba(190,123,255,.7))}.tarot-card img{display:block;width:74px;height:126px;object-fit:cover;border:1px solid var(--gold);border-radius:5px;background:#161325}.tarot-card small{display:block;white-space:nowrap;font-size:9px;margin-top:4px;text-shadow:0 2px 3px #000}.position-number{position:absolute;top:-9px;left:-10px;width:25px;height:25px;border-radius:50%;background:#120d1e;border:1px solid var(--gold);color:var(--gold-soft);display:grid;place-items:center;font-family:Georgia,serif;z-index:2}.tarot-card.reverse img{transform:rotate(180deg)}.p1{left:278px;top:170px}.p2{left:278px;top:194px;transform:rotate(90deg)}.p2:hover{transform:rotate(90deg) translateY(-6px) scale(1.05)}.p3{left:165px;top:170px}.p4{left:278px;top:332px}.p5{left:85px;top:75px}.p6{left:430px;top:170px}.p7{right:22px;top:324px}.p8{right:22px;top:215px}.p9{right:22px;top:106px}.p10{right:22px;top:-3px}
.deck-zone{position:absolute;z-index:7;left:30px;right:25px;bottom:92px;height:104px}.deck-heading{display:flex;align-items:center;gap:12px;color:var(--gold-soft);font-size:13px}.deck-heading span{border:1px solid rgba(201,165,92,.35);padding:2px 10px;border-radius:12px;color:#c9c1b1}.deck-fan{position:absolute;left:32px;bottom:-9px;width:68%;height:80px}.deck-fan img{--i:0;position:absolute;left:calc(var(--i) * 30px);bottom:0;width:52px;height:77px;object-fit:cover;border-radius:4px;transform:rotate(calc((var(--i) - 8) * 1.6deg));transform-origin:50% 130%;box-shadow:-4px 0 6px rgba(0,0,0,.4)}.deck-actions{position:absolute;right:0;bottom:8px;display:flex;flex-direction:column;gap:6px}.deck-actions button,.control-dock button{border:1px solid rgba(201,165,92,.45);background:linear-gradient(#12182b,#080c18);color:#d9ccb2;border-radius:18px;padding:7px 16px;cursor:pointer}.control-dock{position:absolute;z-index:9;bottom:13px;left:50%;transform:translateX(-50%);display:flex;gap:8px;border:1px solid rgba(201,165,92,.55);background:rgba(5,8,16,.92);padding:8px 12px;border-radius:30px;box-shadow:0 10px 35px #000;width:max-content}.control-dock button{font-size:12px}
.oracle-panel{position:relative;margin:12px 12px 12px 0;border:1px solid rgba(201,165,92,.65);border-radius:95px 95px 18px 18px;background:linear-gradient(180deg,#ece0c3 0,#dfd0ad 83%,#a9936a 100%);color:#2b2419;padding:74px 30px 22px;overflow:hidden;box-shadow:inset 0 0 0 5px rgba(7,9,18,.96),inset 0 0 0 7px rgba(201,165,92,.7),0 0 30px rgba(0,0,0,.45)}.oracle-panel:before{border-color:rgba(76,55,28,.28);border-radius:86px 86px 14px 14px;inset:15px}.crystal{position:absolute;top:7px;left:50%;transform:translateX(-50%);color:#7f3fb3;font-size:43px;text-shadow:0 0 15px #d293ff}.oracle-panel h2{text-align:center;font-family:Georgia,"Noto Serif Thai",serif;font-weight:500;margin:0 0 12px;font-size:calc(24px * var(--read-scale,1))}.oracle-copy{position:relative;z-index:2;border-top:1px solid rgba(91,68,36,.35);padding-top:10px}.oracle-copy h3{text-align:center;font-family:Georgia,"Noto Serif Thai",serif;margin:0 0 9px;font-weight:500}.oracle-copy p{font-family:Georgia,"Noto Serif Thai",serif;font-size:calc(13px * var(--read-scale,1));line-height:1.8;margin:0 0 8px}.oracle-accordions{display:flex;flex-direction:column;gap:5px;margin-top:8px;position:relative;z-index:2}.oracle-accordions button{border:1px solid rgba(72,53,29,.4);background:rgba(255,250,235,.24);padding:8px 12px;text-align:left;color:#332a1e}.oracle-accordions span{float:right}.selected-summary{position:relative;z-index:2;margin-top:8px;border:1px solid #8d6b35;background:linear-gradient(135deg,#0d1428,#161026);color:var(--ivory);border-radius:8px;padding:8px;display:grid;grid-template-columns:54px 1fr;gap:9px;box-shadow:inset 0 0 16px rgba(132,72,174,.18)}.selected-summary img{width:54px;height:88px;object-fit:cover;border:1px solid var(--gold);border-radius:3px}.selected-summary p{font-size:11px;margin:5px 0;color:#d7ccb6}.summary-head{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--gold-soft)}.summary-head span{width:21px;height:21px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center}.selected-summary em{display:inline-block;border:1px solid rgba(167,104,210,.65);border-radius:10px;padding:2px 7px;color:#d8b9f1;font-size:9px;font-style:normal}.selected-summary label{display:block;margin-top:7px;color:var(--gold-soft);font-size:9px}.oracle-moon{position:absolute;right:20px;bottom:6px;color:rgba(66,48,26,.16);font-size:calc(70px * var(--read-scale,1))}
@media(max-width:1300px){body{min-width:1024px}.workspace{grid-template-columns:250px minmax(560px,1fr) 315px}.spread-board{transform:translate(-50%,-50%) scale(.9)}.astrolabe{transform:translate(-50%,-50%) scale(.9)}.topbar{grid-template-columns:220px 1fr 190px}.topbar nav{gap:25px}.oracle-copy p{font-size:calc(12px * var(--read-scale,1))}.deck-fan img{left:calc(var(--i) * 26px)}}

/* Interactive application */
button{font-family:inherit}.brand{border:0;background:transparent;cursor:pointer}.topbar nav button{height:100%;border:0;background:transparent;color:#bdb5a6;position:relative;padding:0 8px;cursor:pointer}.topbar nav button.active{color:var(--gold-soft)}.topbar nav button.active:after{content:"";position:absolute;bottom:-1px;height:2px;left:5%;right:5%;background:linear-gradient(90deg,transparent,var(--amethyst),var(--gold),var(--amethyst),transparent);box-shadow:0 0 10px var(--amethyst)}.spread:disabled{opacity:.55;cursor:not-allowed}.question-hint{font-size:9px!important;line-height:1.45!important;color:#898275!important;margin:5px 0 0!important}.oracle-panel{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#8e7445 transparent}.oracle-panel::-webkit-scrollbar{width:6px}.oracle-panel::-webkit-scrollbar-thumb{background:#8e7445;border-radius:6px}.reading-disclaimer{font-size:calc(8px * var(--read-scale,1));line-height:1.45;color:rgba(47,38,25,.68);position:relative;z-index:3;margin:10px 2px 0}.energy-strip{position:relative;z-index:3;display:grid;grid-template-columns:1fr 112px;gap:5px;margin-bottom:7px;background:rgba(22,17,12,.08);border:1px solid rgba(72,53,29,.24);padding:7px 9px}.energy-strip span{font-size:calc(9px * var(--read-scale,1));font-weight:700;color:#43331f}.energy-strip span:last-child{color:#80602f;text-align:right}.energy-strip small{display:block;font-size:calc(8px * var(--read-scale,1));color:#7b705d;font-weight:400}.accordion{border:1px solid rgba(72,53,29,.38);background:rgba(255,250,235,.18)}.accordion>button{width:100%;border:0;background:transparent;padding:8px 11px;text-align:left;color:#332a1e;display:flex;align-items:center;justify-content:space-between;cursor:pointer}.accordion>button i{font-style:normal}.accordion-body{border-top:1px solid rgba(72,53,29,.24);padding:8px 11px;font-size:calc(10px * var(--read-scale,1));line-height:1.62}.accordion-body p{margin:0 0 6px}.accordion-body ul{margin:0;padding-left:16px}.accordion-body li{margin-bottom:5px}.meter{height:6px;background:rgba(48,38,23,.16);border-radius:6px;margin-top:8px;position:relative}.meter>span{display:block;height:100%;background:linear-gradient(90deg,#6d3a98,#c7a252);border-radius:6px}.meter small{display:block;margin-top:3px}.position-readings{display:flex;flex-direction:column;gap:4px}.position-readings button{border:0;border-bottom:1px solid rgba(72,53,29,.18);background:transparent;text-align:left;padding:6px 0;color:#352d21;cursor:pointer}.position-readings b{font-size:calc(10px * var(--read-scale,1))}.position-readings p{font-size:calc(9px * var(--read-scale,1));margin:3px 0;line-height:1.55}.selected-summary.clickable{cursor:pointer;transition:.2s}.selected-summary.clickable:hover{box-shadow:inset 0 0 25px rgba(132,72,174,.24),0 0 12px rgba(114,65,150,.2);transform:translateY(-1px)}.reversed-image{transform:rotate(180deg)}

.dynamic-board{width:690px;height:525px;top:47%;}.laid-card{left:50%;top:50%;transform:translate(-50%,-50%) rotate(var(--rot));}.laid-card:hover{transform:translate(-50%,calc(-50% - 7px)) rotate(var(--rot)) scale(1.06)}.laid-card.selected{z-index:14}.laid-card.selected img{filter:brightness(1.06)}.laid-card.reverse img{transform:rotate(180deg)}.empty-slot{width:62px;height:105px;border:1px dashed rgba(202,173,110,.28);border-radius:7px;filter:none;opacity:.45;display:flex;align-items:center;justify-content:center}.empty-slot .position-number{opacity:.85}.empty-slot small{position:absolute;top:108px}.slot-sigil{color:rgba(208,176,104,.7);font-size:25px}.compact-spread .laid-card{width:56px}.compact-spread .laid-card img{width:56px;height:95px}.compact-spread .empty-slot{height:95px}.compact-spread .laid-card small{font-size:8px}.ritual-intro{position:absolute;left:50%;top:48%;transform:translate(-50%,-50%);z-index:30;width:330px;text-align:center;background:radial-gradient(circle,rgba(9,13,31,.96),rgba(7,10,21,.9) 62%,transparent 72%);padding:40px 28px;color:#d7ccb7;pointer-events:auto}.ritual-intro>span{font-size:54px;color:var(--gold);text-shadow:0 0 28px rgba(164,100,215,.8)}.ritual-intro h2{font-family:Georgia,"Noto Serif Thai",serif;font-size:20px;color:var(--gold-soft);margin:4px 0 8px}.ritual-intro p{font-size:11px;line-height:1.7;color:#aaa193}.ritual-intro button{border:1px solid;border-radius:20px;padding:8px 25px;cursor:pointer}.is-shuffling .deck-fan img{animation:shuffle-glow .65s ease both;animation-delay:calc(var(--i) * 12ms)}@keyframes shuffle-glow{40%{transform:translateY(-14px) rotate(calc((var(--i) - 8) * -1.8deg));filter:brightness(1.55) drop-shadow(0 0 8px #8150ae)}}

.selection-sanctum{position:absolute;z-index:8;inset:50px 20px 90px;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:radial-gradient(circle at 50% 48%,rgba(23,29,61,.9),rgba(4,7,17,.94));border:1px solid rgba(201,165,92,.35);border-radius:22px;padding:14px 16px 12px;box-shadow:inset 0 0 50px #02040b,0 15px 35px rgba(0,0,0,.5)}.selection-sanctum:before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,165,92,.12);border-radius:16px;pointer-events:none}.selection-heading{text-align:center;position:relative;z-index:2}.selection-heading>span{font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft);font-size:17px}.selection-heading>b{margin-left:12px;color:#c38cf0}.selection-heading p{margin:2px 0 8px;font-size:10px;color:#938a7c}.face-down-grid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(13,minmax(24px,1fr));align-content:center;gap:7px 6px;overflow:auto;padding:9px 11px 14px;scrollbar-width:thin}.face-down-grid button{position:relative;border:0;background:transparent;padding:0;cursor:pointer;min-width:0;animation:deal-in .45s ease both;animation-delay:var(--delay);transition:.16s}.face-down-grid button:hover,.face-down-grid button:focus-visible{transform:translateY(-7px) scale(1.07);z-index:4;outline:none}.face-down-grid button:hover img,.face-down-grid button:focus-visible img{box-shadow:0 0 0 1px #d8b262,0 0 18px #834fb0}.face-down-grid img{display:block;width:100%;aspect-ratio:2/3.4;object-fit:cover;border:1px solid #947638;border-radius:4px;box-shadow:0 4px 9px rgba(0,0,0,.55)}.face-down-grid span{position:absolute;bottom:2px;right:3px;color:rgba(255,238,195,.5);font-size:7px}@keyframes deal-in{from{opacity:0;transform:translateY(24px) rotate(-4deg)}to{opacity:1;transform:none}}.selection-actions{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:9px;border-top:1px solid rgba(201,165,92,.18)}.selection-actions button{border:1px solid rgba(201,165,92,.42);background:#0b1020;color:#d9ccb0;border-radius:16px;padding:6px 12px;cursor:pointer;font-size:10px}.selection-actions small{position:absolute;top:42px;color:#827b70;font-size:8px}.chosen-ribbon{position:absolute;z-index:5;right:12px;bottom:12px;display:flex;gap:3px;pointer-events:auto}.chosen-ribbon button{width:26px;border:0;background:transparent;padding:0;position:relative;cursor:pointer}.chosen-ribbon img{display:block;width:26px;height:44px;object-fit:cover;border:1px solid var(--gold);border-radius:2px}.chosen-ribbon span{position:absolute;z-index:2;left:-3px;top:-4px;width:12px;height:12px;border-radius:50%;background:#3a2057;color:#fff;font-size:7px;display:grid;place-items:center}.oracle-empty{position:relative;z-index:3;text-align:center;padding:40px 12px;color:#3d3223}.moon-seal{width:76px;height:76px;border:1px solid rgba(90,62,28,.35);border-radius:50%;display:grid;place-items:center;margin:0 auto 14px;font-size:calc(38px * var(--read-scale,1));color:#705a36;box-shadow:0 0 0 9px rgba(90,62,28,.05)}.oracle-empty h3{font-family:Georgia,"Noto Serif Thai",serif;font-size:calc(20px * var(--read-scale,1));margin:8px}.oracle-empty p,.oracle-empty li{font-family:Georgia,"Noto Serif Thai",serif;font-size:calc(12px * var(--read-scale,1));line-height:1.75}.oracle-empty ol{list-style:decimal;text-align:left;width:max-content;max-width:100%;margin:14px auto 0;padding-left:26px}.oracle-empty li{margin-bottom:5px}.oracle-empty li::marker{color:#8a6a34;font-weight:700}.selecting-guide{padding:20px 8px}.selecting-guide button{width:100%;display:grid;grid-template-columns:22px 1fr auto;gap:6px;border:0;border-bottom:1px solid rgba(72,53,29,.2);background:transparent;padding:7px 4px;text-align:left;color:#3e3324;cursor:pointer;font-size:9px}.selecting-guide button span{width:19px;height:19px;border:1px solid #8e6b36;border-radius:50%;display:grid;place-items:center}.selecting-guide button b{color:#76572c}

/* Manual, guide, journal */
.library-shell,.guide-shell,.journal-shell{min-height:calc(100vh - 64px);padding:42px clamp(10px,2.5vw,39px) 70px;background:radial-gradient(circle at 50% 0,rgba(44,36,79,.54),transparent 38%),linear-gradient(180deg,#080c1a,#03050b);color:var(--ivory)}.page-hero{text-align:center;max-width:1254px;margin:0 auto 30px}.page-hero>span{color:var(--gold);font-size:11px;letter-spacing:.2em}.page-hero h1{font-family:Georgia,"Noto Serif Thai",serif;font-size:42px;color:var(--gold-soft);margin:8px 0}.page-hero p{color:#aaa193;line-height:1.8;font-size:13px}.library-tools{position:sticky;top:64px;z-index:15;background:rgba(5,8,16,.92);backdrop-filter:blur(12px);padding:12px;border:1px solid rgba(201,165,92,.25);border-radius:13px;margin-bottom:24px;display:flex;gap:16px;align-items:center}.library-tools input{flex:1;min-width:220px;border:1px solid rgba(201,165,92,.35);background:#0d1326;color:var(--ivory);padding:10px 14px;border-radius:20px;outline:none}.library-tools>div{display:flex;gap:5px;flex-wrap:wrap}.library-tools button{border:1px solid rgba(201,165,92,.25);background:#0b1020;color:#aaa193;padding:7px 11px;border-radius:15px;cursor:pointer;font-size:10px}.library-tools button.active{border-color:#a566d3;color:#f2e7c8;background:#25143c}.card-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:15px}.card-library>button{position:relative;overflow:hidden;border:1px solid rgba(201,165,92,.28);border-radius:11px;background:linear-gradient(160deg,rgba(20,27,53,.94),rgba(6,9,18,.98));color:#ddd3be;padding:12px;text-align:left;cursor:pointer;transition:.2s;min-height:400px}.card-library>button:hover{transform:translateY(-4px);border-color:#b49451;box-shadow:0 10px 25px rgba(0,0,0,.35),0 0 18px rgba(121,67,164,.17)}.card-library img{display:block;width:112px;height:190px;object-fit:cover;border:1px solid var(--gold);border-radius:5px;margin:0 auto 10px;box-shadow:0 8px 15px rgba(0,0,0,.45)}.card-library>button>span{color:#9e8a5f;font-size:8px;text-transform:uppercase;letter-spacing:.1em}.card-library h2{font-family:Georgia,"Noto Serif Thai",serif;font-size:16px;color:var(--gold-soft);margin:5px 0 0}.card-library small{color:#777184}.card-library p{font-size:10px;line-height:1.55;color:#aaa294;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-library b{font-size:8px;color:#a474c8;font-weight:400}.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:1424px;margin:0 auto}.guide-grid article{border:1px solid rgba(201,165,92,.25);background:linear-gradient(145deg,rgba(18,25,50,.86),rgba(6,9,18,.94));padding:22px;border-radius:14px}.guide-grid i{font-family:Georgia,serif;color:#7f4ba6;font-size:28px}.guide-grid h2{font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft);font-size:17px;margin:5px 0 8px}.guide-grid p{font-size:11px;line-height:1.8;color:#aaa193}.source-panel{max-width:1314px;margin:20px auto;padding:25px;border:1px solid rgba(201,165,92,.35);background:radial-gradient(circle at 85% 10%,rgba(111,57,168,.18),transparent 30%),#090d1d;border-radius:16px}.source-panel h2{font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft)}.source-panel p{font-size:12px;line-height:1.85;color:#b6ad9e}.source-panel a{color:#d0a5ed}.source-panel .ethics{border-top:1px solid rgba(201,165,92,.18);padding-top:12px;color:#8e8678}.guide-start{display:block;margin:0 auto;border:1px solid;border-radius:22px;padding:10px 28px;cursor:pointer}.journal-empty{max-width:500px;margin:80px auto;text-align:center;color:#aaa193}.journal-empty>span{font-size:65px;color:var(--gold)}.journal-list{max-width:1344px;margin:0 auto;display:flex;flex-direction:column;gap:12px}.journal-list article{display:grid;grid-template-columns:1fr auto;gap:20px;border:1px solid rgba(201,165,92,.28);background:rgba(12,17,34,.9);padding:18px;border-radius:12px}.journal-list time{font-size:9px;color:#8f876f}.journal-list h2{font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft);font-size:17px;margin:5px 0}.journal-list p{font-size:10px;color:#8f887d}.journal-cards{display:flex;gap:4px}.journal-cards img{width:31px;height:52px;object-fit:cover;border:1px solid rgba(201,165,92,.5);border-radius:2px}.journal-list footer{display:flex;flex-direction:column;justify-content:center;gap:6px}.journal-list footer button{border:1px solid rgba(201,165,92,.4);background:#12192c;color:#d5c9af;padding:7px 12px;border-radius:15px;cursor:pointer}.journal-list footer .danger{border-color:rgba(176,80,80,.3);color:#b58c8c;background:transparent}

/* Card manual modal */
.modal-backdrop{position:fixed;z-index:1000;inset:0;background:rgba(1,3,9,.88);backdrop-filter:blur(10px);display:grid;place-items:center;padding:28px}.card-modal{position:relative;display:grid;grid-template-columns:260px minmax(0,1fr);width:min(980px,96vw);max-height:90vh;overflow:hidden;border:1px solid rgba(201,165,92,.72);border-radius:18px;background:radial-gradient(circle at 15% 25%,rgba(95,53,139,.3),transparent 35%),linear-gradient(145deg,#101733,#060914);box-shadow:0 25px 80px #000,0 0 35px rgba(123,68,168,.2)}.card-modal:before{content:"";position:absolute;inset:8px;border:1px solid rgba(201,165,92,.16);border-radius:12px;pointer-events:none}.modal-close{position:absolute;z-index:5;right:14px;top:12px;width:34px;height:34px;border:1px solid rgba(201,165,92,.4);border-radius:50%;background:#080c17;color:#e3d7bd;font-size:22px;cursor:pointer}.modal-card{padding:34px 28px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid rgba(201,165,92,.25)}.modal-card img{width:190px;height:323px;object-fit:cover;border:2px solid var(--gold);border-radius:8px;box-shadow:0 18px 35px #000,0 0 24px rgba(177,113,223,.24)}.modal-card span{margin-top:15px;border:1px solid rgba(201,165,92,.4);border-radius:15px;padding:5px 14px;color:var(--gold-soft);font-size:10px}.modal-copy{padding:34px 40px 25px 32px;overflow:auto;position:relative;z-index:2}.modal-copy>small{color:#9c8050;letter-spacing:.12em}.modal-copy h2{font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft);font-size:33px;margin:5px 0 0}.modal-copy h3{font-family:Georgia,serif;color:#827c84;font-size:15px;font-weight:400;margin:0 0 7px}.modal-copy>em{color:#d2b3e6;font-style:normal;font-size:10px}.keyword-row{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0}.keyword-row span{border:1px solid rgba(152,89,195,.42);background:rgba(84,44,113,.16);color:#caa6df;padding:4px 9px;border-radius:12px;font-size:9px}.modal-sections{display:grid;grid-template-columns:1fr 1fr;gap:8px}.modal-sections article{border:1px solid rgba(201,165,92,.18);background:rgba(255,255,255,.025);padding:10px 12px;border-radius:8px}.modal-sections h4{color:var(--gold-soft);font-size:11px;margin:0 0 4px}.modal-sections p{color:#aea696;font-size:10px;line-height:1.65;margin:0}.modal-copy footer{display:flex;gap:5px;flex-wrap:wrap;margin-top:10px}.modal-copy footer span{border-top:1px solid rgba(201,165,92,.2);padding:7px 11px;color:#938a79;font-size:9px}.toast{position:fixed;z-index:2000;left:50%;bottom:22px;transform:translateX(-50%);background:#10162a;border:1px solid var(--gold);color:var(--ivory);border-radius:22px;padding:9px 18px;box-shadow:0 8px 28px #000,0 0 16px rgba(128,72,176,.3);font-size:11px}

@media(max-width:1100px){body{min-width:0}.topbar{grid-template-columns:190px 1fr 150px}.topbar nav{gap:12px}.workspace{height:auto;min-height:calc(100vh - 64px);grid-template-columns:240px minmax(0,1fr)}.ritual-sidebar{min-height:760px}.reading-table{min-height:760px}.oracle-panel{grid-column:1/-1;min-height:640px;margin:10px 18px 18px;border-radius:45px 45px 18px 18px;padding:70px clamp(30px,9vw,100px) 30px}.oracle-panel:before{border-radius:38px 38px 14px 14px}.oracle-copy p{font-size:calc(13px * var(--read-scale,1))}.modal-card{grid-template-columns:220px minmax(0,1fr)}.guide-grid{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.topbar{height:auto;min-height:60px;grid-template-columns:1fr auto;padding:8px 12px}.brand{font-size:23px}.brand-mark{width:32px;height:32px}.topbar nav{grid-row:2;grid-column:1/-1;justify-content:flex-start;overflow-x:auto;height:42px;gap:2px}.topbar nav button{min-width:max-content;font-size:11px}.top-actions button:last-child{display:none}.workspace{grid-template-columns:1fr}.ritual-sidebar{min-height:auto;border-right:0;border-bottom:1px solid rgba(201,165,92,.4);padding-bottom:18px}.spread-list{display:grid;grid-template-columns:1fr 1fr}.spread{height:48px}.question-box textarea{height:62px}.reading-table{min-height:780px}.table-title{font-size:14px}.dynamic-board{transform:translate(-50%,-50%) scale(.76);top:46%}.astrolabe{transform:translate(-50%,-50%) scale(.74)}.deck-zone{bottom:104px}.deck-fan{width:75%}.deck-fan img{left:calc(var(--i) * 18px);width:44px;height:66px}.deck-actions button{font-size:9px;padding:6px 10px}.control-dock{max-width:94vw;overflow-x:auto;justify-content:flex-start}.control-dock button{white-space:nowrap}.oracle-panel{grid-column:auto;margin:8px;border-radius:32px 32px 16px 16px;padding:65px 24px 28px}.selection-sanctum{inset:50px 8px 90px}.face-down-grid{grid-template-columns:repeat(10,minmax(24px,1fr));gap:5px}.selection-actions{flex-wrap:wrap;padding-bottom:10px}.selection-actions small{display:none}.library-shell,.guide-shell,.journal-shell{padding:28px 14px 50px}.page-hero h1{font-size:32px}.library-tools{top:101px;flex-direction:column;align-items:stretch}.card-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.card-library>button{min-height:350px;padding:9px}.card-library img{width:95px;height:161px}.guide-grid{grid-template-columns:1fr}.journal-list article{grid-template-columns:1fr}.journal-list footer{flex-direction:row}.modal-backdrop{padding:8px}.card-modal{grid-template-columns:1fr;overflow:auto;max-height:96vh}.modal-card{border-right:0;border-bottom:1px solid rgba(201,165,92,.2);padding:26px 20px 18px}.modal-card img{width:130px;height:220px}.modal-copy{padding:22px}.modal-sections{grid-template-columns:1fr}}
@media(max-width:430px){.spread-list{grid-template-columns:1fr}.reading-table{min-height:720px}.dynamic-board{transform:translate(-50%,-50%) scale(.62)}.astrolabe{transform:translate(-50%,-50%) scale(.6)}.face-down-grid{grid-template-columns:repeat(8,minmax(22px,1fr))}.card-library{grid-template-columns:1fr 1fr}.card-library p{display:none}}
@media print{.topbar,.ritual-sidebar,.deck-zone,.control-dock,.toast{display:none!important}.workspace{display:block;height:auto}.reading-table{min-height:700px;page-break-after:always}.oracle-panel{margin:0;max-height:none;overflow:visible;color:#222}.oracle-panel *{color:#222!important}.selected-summary{color:#fff!important}}

/* ========================================================================== */
/* Arcana observatory — high-fidelity visual direction                        */
/* ========================================================================== */
:root{--obsidian:#02040a;--midnight:#070c19;--navy:#0b1227;--royal:#25103f;--violet-glow:#9c4ed6;--antique-gold:#b78b3d;--bright-gold:#f0cf84;--parchment:#eadbb8}
html{background:#010309}
html,body{width:100%;height:100%;background:#02040b url("assets/ui/layers/4k/violet-viewport-4k.webp") center center/cover fixed no-repeat}body{min-width:1180px;color:#eee4cc}
.app-shell{isolation:isolate;background:
 radial-gradient(circle at 50% 38%,rgba(42,52,105,.24),transparent 35%),
 radial-gradient(circle at 12% 76%,rgba(87,42,124,.16),transparent 23%),
 radial-gradient(circle at 92% 72%,rgba(80,43,117,.11),transparent 23%),
 linear-gradient(180deg,#030712 0,#02040a 100%)}

.topbar{height:70px;grid-template-columns:330px 1fr 270px;padding:0 26px 0 20px;border-bottom:1px solid rgba(199,151,66,.65);background:linear-gradient(180deg,rgba(3,6,14,.99),rgba(2,4,10,.97));box-shadow:0 7px 28px rgba(0,0,0,.58);z-index:40}
.topbar:after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:linear-gradient(90deg,transparent 2%,#9a6928 18%,#e5bd69 50%,#9a6928 82%,transparent 98%);opacity:.72}
.brand{gap:13px!important;font-size:36px;letter-spacing:.015em;text-shadow:0 2px 14px rgba(235,189,98,.18)}
.brand-mark{position:relative;width:48px;height:48px;font-size:20px;border-color:#b7873c;box-shadow:inset 0 0 0 4px #050814,inset 0 0 0 5px rgba(214,171,85,.42),0 0 24px rgba(189,136,53,.18)}
.brand-mark:before,.brand-mark:after{content:"";position:absolute;left:50%;top:50%;width:34px;height:1px;background:#c79a4b;transform:translate(-50%,-50%) rotate(45deg);opacity:.65}.brand-mark:after{transform:translate(-50%,-50%) rotate(-45deg)}
.topbar nav{gap:64px}.topbar nav button{font-size:15px;letter-spacing:.01em;color:#c8bfaf;padding:0 12px}.topbar nav button.active{color:#f2d58e;text-shadow:0 0 14px rgba(172,96,219,.44)}
.top-actions{gap:11px}.top-actions button{height:38px;border-color:rgba(191,145,64,.5);background:linear-gradient(180deg,#0c1120,#050812);box-shadow:inset 0 0 13px rgba(194,151,71,.05)}

.workspace{height:calc(100vh - 70px);min-height:790px;grid-template-columns:330px minmax(660px,1fr) 430px;background:#03060e}

.ritual-sidebar{overflow:hidden;padding:20px 27px 168px;border-right:1px solid rgba(192,143,58,.72);background:
 radial-gradient(circle at 44% 90%,rgba(61,33,93,.23),transparent 28%),
 repeating-linear-gradient(90deg,transparent 0 9px,rgba(207,161,77,.018) 10px 11px),
 linear-gradient(180deg,#080d1b,#03060d 82%);box-shadow:inset -18px 0 42px rgba(0,0,0,.6)}
.ritual-sidebar:before{inset:12px;border-color:rgba(207,158,69,.43);box-shadow:inset 0 0 0 4px rgba(2,4,10,.9),inset 0 0 0 5px rgba(207,158,69,.12)}
.ritual-sidebar:after{content:"";position:absolute;z-index:1;left:19px;right:19px;top:19px;bottom:150px;pointer-events:none;background:
 linear-gradient(135deg,#c69b51 0 1px,transparent 1px) top left/29px 29px no-repeat,
 linear-gradient(225deg,#c69b51 0 1px,transparent 1px) top right/29px 29px no-repeat,
 linear-gradient(45deg,#c69b51 0 1px,transparent 1px) bottom left/29px 29px no-repeat,
 linear-gradient(315deg,#c69b51 0 1px,transparent 1px) bottom right/29px 29px no-repeat;opacity:.75}
/* lift the sidebar's content above the frame art. The question box is excluded:
   it is pinned to the lower panel of that art and needs to place itself, so it
   takes the z-index below on its own terms. */
.ritual-sidebar>*:not(.altar-props):not(.sidebar-filagree):not(.question-box){position:relative;z-index:3}
.sidebar-filagree{position:absolute;z-index:4;left:28px;right:28px;top:11px;height:28px;display:flex;align-items:center;justify-content:center;color:#cba252;pointer-events:none}.sidebar-filagree:before,.sidebar-filagree:after{content:"";height:1px;flex:1;background:linear-gradient(90deg,transparent,#8b672d)}.sidebar-filagree:after{background:linear-gradient(90deg,#8b672d,transparent)}.sidebar-filagree span,.sidebar-filagree b{width:22px;text-align:center;font-size:10px}.sidebar-filagree i{width:8px;height:8px;border:1px solid #bd8f42;transform:rotate(45deg);box-shadow:0 0 9px rgba(161,88,210,.65)}
.sidebar-heading{padding:10px 4px 16px;border-bottom-color:rgba(199,151,66,.33)}
.sidebar-heading:after{content:"✦";position:absolute;left:50%;bottom:-7px;transform:translateX(-50%);width:52px;color:#bd9146;background:#070b17;font-size:9px}
.sidebar-heading span{font-size:16px;color:#d0c7b6}.sidebar-heading h1{font-size:29px;margin:3px 0;color:#f0ce83;text-shadow:0 2px 18px rgba(217,154,56,.12)}.sidebar-heading small{font-size:12px;letter-spacing:.12em}
.spread-list{padding:12px 0 0}.spread{height:48px;padding:5px 13px 5px 9px;border-bottom-color:rgba(203,158,76,.2);gap:13px}.spread i{width:31px;height:31px;border-color:rgba(218,172,82,.5);box-shadow:inset 0 0 0 3px rgba(4,7,15,.9);font-size:15px}.spread b{font-size:14px}.spread small{font-size:9px;color:#8c8478}.spread:hover{background:linear-gradient(90deg,rgba(138,71,183,.13),transparent);color:#fff3d8}.spread.active{margin-left:-9px;width:calc(100% + 18px);padding-left:18px;background:
 linear-gradient(90deg,rgba(79,28,119,.7),rgba(126,62,170,.33) 70%,rgba(57,24,84,.22)),
 radial-gradient(circle at 84% 50%,rgba(198,129,241,.28),transparent 30%);border:1px solid rgba(178,105,220,.58);box-shadow:inset 3px 0 #b870e5,inset 0 0 24px rgba(163,83,219,.2),0 0 16px rgba(127,56,178,.25);color:#fff2d7}.spread.active:before{content:"";position:absolute;inset:3px;border:1px solid rgba(231,194,116,.12);pointer-events:none}.spread.active:after{right:-8px;width:15px;height:15px;display:grid;place-items:center;background:#090c18;border:1px solid #c99b4e;transform:rotate(45deg);font-size:0;box-shadow:0 0 10px rgba(189,112,229,.55)}
.question-box{margin-top:13px;padding:13px 13px 14px;border-radius:2px;border-color:rgba(205,158,73,.5);background:linear-gradient(160deg,rgba(13,18,34,.93),rgba(5,8,16,.94));box-shadow:inset 0 0 0 4px rgba(3,6,13,.95),inset 0 0 0 5px rgba(204,157,71,.12)}
.question-box:before,.question-box:after{content:"✦";position:absolute;top:-8px;color:#c4994b;background:#060a14;width:26px;text-align:center;font-size:10px}.question-box:before{left:18px}.question-box:after{right:18px}
.question-box label{text-align:center;font-size:16px;margin-bottom:8px}.question-box textarea{height:84px;border-radius:7px;border-color:rgba(205,158,73,.32);background:radial-gradient(circle at 100% 100%,rgba(102,54,137,.12),transparent 34%),#0b1020;font-size:11px}.question-box .primary{height:45px;border-radius:24px;font-size:15px;background:linear-gradient(180deg,#5c2489,#2a1048)!important;box-shadow:inset 0 0 0 2px #180a2a,inset 0 0 0 3px rgba(230,183,99,.55),0 0 20px rgba(126,54,177,.35)!important}

.altar-props{position:absolute;z-index:5;left:0;right:0;bottom:0;height:156px;pointer-events:none;background:radial-gradient(ellipse at 50% 100%,rgba(0,0,0,.95),transparent 70%)}
.crystal-cluster{position:absolute;left:20px;bottom:4px;width:91px;height:86px;color:#7b3cad;font-family:Georgia,serif;font-size:91px;line-height:.85;transform:rotate(-8deg);text-shadow:-18px 8px 0 #3b1e56,17px 5px 0 #4b2869,0 0 18px rgba(176,96,229,.55);filter:drop-shadow(0 10px 7px #000)}
.armillary{position:absolute;left:76px;bottom:1px;width:100px;height:100px;border:2px solid #9d7330;border-radius:50%;transform:rotate(-14deg);box-shadow:inset 0 0 0 8px #050710,inset 0 0 0 10px #62451d,0 10px 18px #000}.armillary:before,.armillary:after,.armillary i{content:"";position:absolute;inset:15px;border:1px solid #c2994c;border-radius:50%;transform:rotate(58deg)}.armillary:after{inset:5px 33px;transform:rotate(-28deg)}.armillary i{inset:32px 5px;transform:rotate(22deg)}.armillary b{position:absolute;inset:0;display:grid;place-items:center;color:#d5ad5d;font-size:18px}.armillary:after{content:""}
.wax-candle{position:absolute;right:14px;bottom:0;width:47px;height:70px;border-radius:8px 8px 15px 15px;background:linear-gradient(90deg,#74522e,#ead19b 45%,#876238);box-shadow:0 9px 14px #000,0 -7px 27px rgba(255,164,65,.16)}.wax-candle:before{content:"";position:absolute;left:20px;top:-26px;width:12px;height:29px;border-radius:70% 30% 60% 40%;background:linear-gradient(#fff6be,#ffbc45 58%,#8e380f);box-shadow:0 0 12px 5px rgba(255,163,52,.35);transform:rotate(5deg)}.wax-candle:after{content:"";position:absolute;left:8px;right:7px;top:5px;height:9px;border-radius:50%;background:#5e3b23;opacity:.45}.wax-candle i{position:absolute;left:7px;top:16px;width:7px;height:26px;background:#f5dcaa;border-radius:0 0 8px 8px}

.reading-table{padding-bottom:145px;border-left:1px solid rgba(105,79,34,.25);border-right:1px solid rgba(105,79,34,.22);background:
 radial-gradient(circle at 50% 38%,rgba(38,49,91,.52),rgba(11,16,34,.56) 36%,rgba(3,6,14,.94) 76%),
 linear-gradient(125deg,rgba(169,126,51,.04),transparent 23% 77%,rgba(169,126,51,.035)),
 #050916}
.reading-table:before{z-index:0;opacity:1;background-image:
 radial-gradient(circle at 18% 16%,rgba(245,211,140,.7) 0 1px,transparent 1.5px),
 radial-gradient(circle at 77% 27%,rgba(184,130,223,.65) 0 1px,transparent 1.5px),
 radial-gradient(circle at 43% 74%,rgba(244,211,139,.38) 0 1px,transparent 1.6px),
 radial-gradient(circle at 66% 63%,rgba(245,211,140,.48) 0 .8px,transparent 1.3px),
 linear-gradient(90deg,rgba(255,255,255,.012),transparent 24%,rgba(255,255,255,.012) 51%,transparent 75%);background-size:113px 107px,157px 149px,191px 179px,83px 91px,100% 100%}
.reading-table:after{content:"";position:absolute;z-index:1;inset:12px 10px 8px;border:1px solid rgba(188,139,55,.22);box-shadow:inset 0 0 0 5px rgba(2,4,10,.78),inset 0 0 0 6px rgba(188,139,55,.09);pointer-events:none}
.table-title{height:48px;z-index:12;font-size:16px;color:#f1d08a;letter-spacing:.04em;text-shadow:0 0 15px rgba(177,105,220,.34)}.table-title:before,.table-title:after{content:"";width:75px;height:1px;background:linear-gradient(90deg,transparent,#a77932)}.table-title:after{background:linear-gradient(90deg,#a77932,transparent)}.table-title span{font-size:9px;color:#bc75df}
.astrolabe{z-index:2;top:44%;width:min(760px,78%,calc(100vh - 178px));height:auto;aspect-ratio:1;border:1px solid rgba(205,156,66,.47);background:
 radial-gradient(circle,transparent 0 15%,rgba(203,158,73,.08) 15.15% 15.4%,transparent 15.55% 29%,rgba(203,158,73,.12) 29.15% 29.4%,transparent 29.55% 44%,rgba(203,158,73,.09) 44.15% 44.45%,transparent 44.6% 50%),
 repeating-conic-gradient(from -4deg,rgba(207,158,72,.18) 0 .45deg,transparent .5deg 15deg),
 radial-gradient(circle at 50% 50%,rgba(29,39,75,.2),transparent 68%);box-shadow:0 0 0 5px rgba(3,6,14,.62),0 0 0 7px rgba(201,151,63,.19),0 0 80px rgba(63,48,112,.2),inset 0 0 80px rgba(1,3,9,.55)}
.astrolabe:before{inset:31px;border-color:rgba(213,166,78,.36);box-shadow:0 0 0 5px rgba(2,5,12,.3),0 0 0 7px rgba(205,157,70,.1),inset 0 0 0 36px rgba(5,9,20,.12)}.astrolabe:after{inset:86px;border-color:rgba(213,166,78,.29);border-style:solid;box-shadow:0 0 0 29px rgba(4,7,16,.09),0 0 0 30px rgba(205,157,70,.11)}
.orbit{inset:126px;border-color:rgba(216,168,79,.25);box-shadow:0 0 0 20px rgba(2,5,12,.08),0 0 0 21px rgba(207,159,73,.08)}.orbit-two{inset:194px;border-color:rgba(211,164,76,.22)}.star-map{color:rgba(223,179,89,.26);font-size:25px;letter-spacing:30px;text-shadow:0 0 10px rgba(214,159,67,.22)}
.celestial-compass{position:absolute;z-index:14;left:50%;bottom:-4px;transform:translateX(-50%);width:84px;height:84px;border:1px solid #d0a151;border-radius:50%;background:radial-gradient(circle,#6d2696 0 9%,#d8a8ed 10% 14%,#40165f 15% 23%,#080c18 24% 48%,#b68538 49% 50%,#080c18 51%);box-shadow:inset 0 0 0 6px #050811,inset 0 0 0 7px rgba(222,178,88,.5),0 0 22px #000,0 0 21px rgba(140,68,183,.3)}.celestial-compass:before,.celestial-compass:after{content:"";position:absolute;left:50%;top:50%;width:64px;height:1px;background:#bd9149;transform:translate(-50%,-50%) rotate(45deg)}.celestial-compass:after{transform:translate(-50%,-50%) rotate(-45deg)}.celestial-compass i{position:absolute;inset:16px;border:1px solid #805c29;transform:rotate(45deg)}.celestial-compass b{position:absolute;inset:0;display:grid;place-items:center;color:#f0ce83;font-size:16px}

.dynamic-board{z-index:6;top:44%;width:min(790px,94%);height:610px}.laid-card{width:86px;filter:drop-shadow(0 13px 10px rgba(0,0,0,.8));transform:translate(-50%,-50%) rotate(var(--rot))}.laid-card:hover{transform:translate(-50%,calc(-50% - 9px)) rotate(var(--rot)) scale(1.055)}.laid-card img{width:86px;height:146px;object-view-box:inset(80px);border:0;background:transparent;border-radius:4px}.laid-card small{font-size:9px;margin-top:5px;color:#eee3ca;text-shadow:0 2px 4px #000,0 0 8px #000}.position-number{top:-12px;left:-13px;width:30px;height:30px;border:2px solid #ca9b4b;background:radial-gradient(circle,#15101f,#050711);box-shadow:0 3px 8px #000,0 0 0 3px rgba(4,6,13,.9);font-size:15px}.laid-card.selected img{filter:brightness(1.06)}.empty-slot{width:86px;height:146px;border-color:rgba(222,176,89,.3);background:rgba(7,10,20,.17)}.empty-slot small{top:149px}.slot-sigil{font-size:30px}.compact-spread .laid-card{width:58px}.compact-spread .laid-card img{width:58px;height:113px}.compact-spread .empty-slot{height:113px}.compact-spread .empty-slot small{top:117px}.compact-spread .laid-card small{font-size:8px}
.reading-table[data-spread="one"] .laid-card{width:112px}.reading-table[data-spread="one"] .laid-card img{width:112px;height:190px}.reading-table[data-spread="three"] .laid-card{width:96px}.reading-table[data-spread="three"] .laid-card img{width:96px;height:163px}

.deck-zone{z-index:10;left:38px;right:31px;bottom:78px;height:126px}.deck-heading{position:absolute;left:0;bottom:86px;gap:9px;font-size:12px}.deck-heading:before{content:"✦";color:#b984d2;font-size:9px}.deck-heading span{background:#090d1a;border-color:rgba(206,159,74,.45)}.deck-fan{left:50%;bottom:-4px;transform:translateX(-50%);width:min(650px,72%);height:104px}.deck-fan:after{content:"";position:absolute;left:12%;right:12%;bottom:-3px;height:18px;background:radial-gradient(ellipse,rgba(0,0,0,.9),transparent 67%);filter:blur(3px)}.deck-fan img{left:calc(var(--i) * 34px);width:59px;height:91px;border-radius:4px;transform:rotate(calc((var(--i) - 8) * 2.2deg));transform-origin:50% 155%;box-shadow:-6px 2px 8px rgba(0,0,0,.65),inset 0 0 0 2px #160c27}.deck-actions{bottom:20px;right:0;gap:7px}.deck-actions button{min-width:125px;border-color:rgba(202,157,73,.55);background:linear-gradient(180deg,#101629,#070b16);box-shadow:inset 0 0 0 2px #050812;color:#e4d5b7}
.control-dock{z-index:13;bottom:9px;width:min(830px,94%);height:60px;padding:9px 20px;justify-content:center;gap:9px;border-radius:2px;background:linear-gradient(180deg,rgba(12,19,30,.98),rgba(4,9,15,.98));border-color:rgba(214,166,79,.72);box-shadow:inset 0 0 0 5px #030710,inset 0 0 0 6px rgba(204,156,69,.2),0 13px 35px #000;clip-path:polygon(3% 0,44% 0,47% 13%,53% 13%,56% 0,97% 0,100% 50%,97% 100%,56% 100%,53% 87%,47% 87%,44% 100%,3% 100%,0 50%)}.control-dock:before,.control-dock:after{content:"✦";position:absolute;top:21px;color:#d0a85e;font-size:10px}.control-dock:before{left:25px}.control-dock:after{right:25px}.control-dock button{position:relative;z-index:2;min-width:150px;border-radius:5px;border-color:rgba(202,157,73,.38);background:linear-gradient(180deg,#101722,#071019);padding:9px 14px;font-size:12px}.control-dock button:nth-child(2){margin-right:80px}.control-dock .primary{background:linear-gradient(180deg,#291042,#140922)!important}

.oracle-panel{margin:14px 14px 14px 0;padding:96px 38px 44px;border:1px solid #b9893a;border-radius:210px 210px 26px 26px/128px 128px 26px 26px;background:
 linear-gradient(90deg,rgba(104,73,31,.08),transparent 9% 91%,rgba(104,73,31,.1)),
 radial-gradient(circle at 50% 4%,rgba(255,248,220,.88),transparent 24%),
 repeating-linear-gradient(0deg,rgba(86,58,26,.018) 0 1px,transparent 1px 4px),
 linear-gradient(180deg,#efe4c9,#ddc99f 86%,#b99e6c);box-shadow:inset 0 0 0 6px #050812,inset 0 0 0 8px #a9792f,inset 0 0 0 11px #17101a,inset 0 0 0 12px rgba(230,191,109,.54),inset 0 0 38px rgba(83,53,22,.2),0 18px 45px rgba(0,0,0,.62)}
.oracle-panel:before{z-index:1;inset:18px;border:1px solid rgba(89,61,25,.42);border-radius:192px 192px 17px 17px/111px 111px 17px 17px;box-shadow:inset 0 0 0 3px rgba(236,218,176,.2)}
.oracle-panel:after{content:"";position:absolute;z-index:1;inset:28px 25px 25px;border-left:1px solid rgba(94,62,24,.2);border-right:1px solid rgba(94,62,24,.2);pointer-events:none}
.oracle-panel>*{position:relative;z-index:3}.oracle-arch{position:absolute;z-index:2;left:22px;right:22px;top:20px;height:64px;color:#624722;display:flex;justify-content:space-between;align-items:flex-start;padding:13px 26px;pointer-events:none}.oracle-arch:before{content:"";position:absolute;left:50%;top:-4px;width:250px;height:82px;transform:translateX(-50%);border-top:1px solid rgba(105,72,29,.43);border-radius:50%}.oracle-arch span,.oracle-arch b{font-size:calc(13px * var(--read-scale,1));opacity:.7}.oracle-arch i{font-style:normal;color:#8e4db6;text-shadow:0 0 10px rgba(127,48,175,.5);font-size:calc(12px * var(--read-scale,1))}
.crystal{top:2px;font-size:45px;color:#8439b9;text-shadow:0 0 0 #d6a5ef,0 0 18px #8f41bd,0 8px 8px rgba(35,16,40,.35)}.crystal:before{content:"";position:absolute;left:50%;top:11px;width:74px;height:1px;background:linear-gradient(90deg,transparent,#855d29,transparent);transform:translateX(-50%)}
.oracle-panel h2{font-size:calc(26px * var(--read-scale,1));margin:2px 0 17px;color:#2e2519;text-shadow:0 1px rgba(255,255,255,.4)}
.energy-strip{grid-template-columns:1fr 130px;margin-bottom:12px;padding:9px 11px;background:rgba(92,62,28,.07);border-color:rgba(81,55,25,.28)}.energy-strip span{font-size:calc(10px * var(--read-scale,1))}.energy-strip small{font-size:calc(9px * var(--read-scale,1))}
.oracle-copy{padding:12px 2px 0;border-top-color:rgba(93,64,28,.38)}.oracle-copy:before{content:"◆  ─────────  ◆";display:block;text-align:center;color:#816334;font-size:calc(7px * var(--read-scale,1));margin-top:-18px;margin-bottom:10px;background:linear-gradient(90deg,transparent,#eadbb8 18% 82%,transparent)}.oracle-copy h3{font-size:calc(19px * var(--read-scale,1));margin-bottom:11px}.oracle-copy p{font-size:calc(13.5px * var(--read-scale,1));line-height:1.86;margin-bottom:9px;color:#352c20}
.oracle-accordions{gap:7px;margin-top:12px}.accordion{border-color:rgba(84,56,24,.45);background:rgba(255,250,234,.16);clip-path:polygon(3% 0,97% 0,100% 50%,97% 100%,3% 100%,0 50%)}.accordion>button{padding:10px 15px;font-size:calc(14px * var(--read-scale,1))}.accordion-body{padding:10px 15px;font-size:calc(11px * var(--read-scale,1))}.selected-summary{grid-template-columns:68px 1fr;gap:12px;margin-top:10px;padding:10px;border-color:#af813a;border-radius:3px;background:
 radial-gradient(circle at 92% 0,rgba(112,43,150,.28),transparent 38%),
 linear-gradient(135deg,#0c1428,#12091f);box-shadow:inset 0 0 0 3px #090c16,inset 0 0 0 4px rgba(207,160,75,.34),inset 0 0 22px rgba(112,49,157,.2)}.selected-summary img{width:68px;height:112px;border-color:#c09243}.selected-summary p{font-size:12px}.summary-head{font-size:12px}.summary-head span{width:25px;height:25px}.selected-summary em{font-size:10px}.selected-summary label{font-size:10px;color:#e5c87f}.reading-disclaimer{font-size:calc(8.5px * var(--read-scale,1));line-height:1.55;margin:12px 5px 0}.oracle-rays{position:absolute;z-index:1;left:50%;bottom:7px;width:220px;height:100px;transform:translateX(-50%);background:repeating-conic-gradient(from 250deg at 50% 100%,rgba(105,73,31,.16) 0 1deg,transparent 1.5deg 9deg);clip-path:polygon(0 100%,7% 58%,18% 71%,26% 28%,38% 61%,50% 0,62% 61%,75% 28%,82% 71%,93% 58%,100% 100%);opacity:.44}.oracle-moon{z-index:2;right:50%;bottom:6px;transform:translateX(50%);font-size:calc(61px * var(--read-scale,1));color:rgba(87,58,25,.34);text-shadow:0 0 0 rgba(255,255,255,.1)}
.oracle-empty{padding:44px 18px}.moon-seal{width:88px;height:88px;font-size:calc(42px * var(--read-scale,1))}.oracle-empty h3{font-size:calc(22px * var(--read-scale,1))}.oracle-empty p,.oracle-empty li{font-size:calc(13px * var(--read-scale,1))}
.accordion>button{min-height:39px;padding-top:8px;padding-bottom:8px;font-size:calc(13px * var(--read-scale,1))}.selected-summary{min-height:126px}.oracle-panel:has(.selected-summary) .reading-disclaimer{margin-top:8px}

@media(max-width:1450px){
 .topbar{grid-template-columns:285px 1fr 220px}.topbar nav{gap:34px}.workspace{grid-template-columns:285px minmax(600px,1fr) 380px}.ritual-sidebar{padding-left:20px;padding-right:20px}.sidebar-heading h1{font-size:25px}.spread{height:47px}.question-box{padding:11px}.oracle-panel{padding-left:30px;padding-right:30px}.dynamic-board{width:min(700px,94%);height:570px}.laid-card{width:76px}.laid-card img{width:76px;height:129px}.empty-slot{width:76px;height:129px}.empty-slot small{top:132px}.deck-fan{width:min(560px,70%)}.deck-fan img{left:calc(var(--i) * 28px);width:53px;height:82px}.control-dock button{min-width:126px;padding-left:10px;padding-right:10px}.control-dock button:nth-child(2){margin-right:72px}}
@media(max-width:1180px){
 body{min-width:0}.topbar{grid-template-columns:235px 1fr 170px}.brand{font-size:30px}.topbar nav{gap:17px}.workspace{height:auto;min-height:calc(100vh - 70px);grid-template-columns:270px minmax(0,1fr)}.reading-table{min-height:820px}.ritual-sidebar{min-height:820px}.oracle-panel{grid-column:1/-1;min-height:720px;margin:15px;border-radius:180px 180px 24px 24px/110px 110px 24px 24px;padding:96px clamp(35px,10vw,150px) 42px}.oracle-panel:before{border-radius:166px 166px 16px 16px/96px 96px 16px 16px}.dynamic-board{width:min(720px,92%)}.control-dock{width:94%}.control-dock button{min-width:120px}}
@media(max-width:760px){
 .topbar{height:auto;min-height:64px;grid-template-columns:1fr auto;padding:8px 13px}.brand{font-size:27px}.brand-mark{width:39px;height:39px}.topbar nav{gap:0}.workspace{grid-template-columns:1fr}.ritual-sidebar{min-height:auto;padding:22px 18px 148px}.spread-list{grid-template-columns:1fr 1fr}.altar-props{height:132px}.reading-table{min-height:790px;padding-bottom:138px}.astrolabe{width:min(670px,116vw,calc(100vh - 160px));top:43%}.dynamic-board{width:680px;height:570px;top:43%;transform:translate(-50%,-50%) scale(.76)}.deck-zone{left:12px;right:12px}.deck-fan{width:82%}.deck-fan img{left:calc(var(--i) * 19px);width:47px;height:72px}.deck-actions{bottom:24px}.deck-actions button{min-width:106px;font-size:9px}.control-dock{height:55px;padding:7px 20px;overflow-x:auto;justify-content:flex-start;clip-path:none;border-radius:4px}.control-dock button{min-width:max-content;font-size:10px}.control-dock button:nth-child(2){margin-right:64px}.celestial-compass{width:68px;height:68px}.oracle-panel{margin:10px 8px;padding:88px 25px 36px;border-radius:100px 100px 20px 20px/76px 76px 20px 20px}.oracle-panel:before{border-radius:88px 88px 14px 14px/64px 64px 14px 14px}.oracle-copy p{font-size:calc(13px * var(--read-scale,1))}.selection-sanctum{inset:52px 10px 106px}.face-down-grid{grid-template-columns:repeat(10,minmax(24px,1fr))}}
@media(max-width:430px){.spread-list{grid-template-columns:1fr}.reading-table{min-height:740px}.dynamic-board{transform:translate(-50%,-50%) scale(.62)}.deck-fan img{left:calc(var(--i) * 16px)}.control-dock button:nth-child(2){margin-right:55px}.oracle-panel{padding-left:20px;padding-right:20px}}
@media print{.celestial-compass,.altar-props,.sidebar-filagree,.oracle-arch,.oracle-rays{display:none!important}.workspace{height:auto}.reading-table:after{display:none}}

/* Raster ornament assembly: HTML/CSS controls placement; PNGs provide art. */
.workspace{position:relative}
.sidebar-frame-art{position:absolute!important;z-index:2!important;inset:8px 7px 6px;width:calc(100% - 14px);height:calc(100% - 14px);object-fit:fill;pointer-events:none;filter:drop-shadow(0 0 8px rgba(0,0,0,.72))}
.ritual-sidebar:before,.ritual-sidebar:after,.sidebar-filagree{display:none}
.altar-props{height:190px;bottom:-18px;background:none;overflow:hidden}
.altar-props img{position:absolute;left:-32px;bottom:-7px;width:385px;height:auto;max-width:none;filter:drop-shadow(0 16px 13px rgba(0,0,0,.8));transform:none}
.crystal-cluster,.armillary,.wax-candle{display:none!important}

.astrolabe{border:0;background:none;box-shadow:none}
.astrolabe:before,.astrolabe:after,.astrolabe .orbit,.astrolabe .star-map{display:none}
.astrolabe-art{display:block;width:100%;height:100%;object-fit:contain;opacity:.62;filter:brightness(.64) saturate(.82) contrast(1.08) drop-shadow(0 0 30px rgba(48,26,72,.3))}
.celestial-compass{display:none}

.control-dock{bottom:-4px;width:min(920px,96%);height:88px;padding:16px 45px 13px;border:0;background:none;box-shadow:none;clip-path:none;overflow:visible}
.control-dock:before,.control-dock:after{display:none}.dock-art{position:absolute;z-index:0;left:-12px;bottom:-31px;width:calc(100% + 24px);height:150px;object-fit:fill;pointer-events:none;filter:drop-shadow(0 9px 13px rgba(0,0,0,.8))}.control-dock button{z-index:2;min-width:148px;border-color:rgba(203,161,80,.25);background:rgba(4,9,18,.5);box-shadow:inset 0 0 16px rgba(4,7,14,.6)}.control-dock button:nth-of-type(2){margin-right:104px}

.oracle-panel{border:0;background:#e5d3ab;box-shadow:0 18px 48px rgba(0,0,0,.68);overflow-x:hidden}.oracle-panel:before,.oracle-panel:after,.oracle-arch,.crystal{display:none}.oracle-frame-art{display:block;position:absolute!important;z-index:1!important;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;filter:drop-shadow(0 0 7px rgba(0,0,0,.74))}.oracle-panel>*:not(.oracle-frame-art){position:relative;z-index:3}.oracle-panel h2{margin-top:5px}
.oracle-rays,.oracle-moon{display:none}.scrying-orb-art{position:absolute;z-index:31;right:-54px;bottom:-66px;width:205px;height:auto;pointer-events:none;filter:drop-shadow(0 15px 16px rgba(0,0,0,.72)) brightness(.8)}

@media(max-width:1450px){.altar-props img{left:-38px;width:355px}.control-dock{width:96%;padding-left:32px;padding-right:32px}.control-dock button{min-width:123px}.control-dock button:nth-of-type(2){margin-right:88px}.scrying-orb-art{width:170px}}
@media(max-width:1180px){.scrying-orb-art{display:none}.control-dock button:nth-of-type(2){margin-right:80px}}
@media(max-width:760px){.sidebar-frame-art{inset:7px;width:calc(100% - 14px);height:calc(100% - 14px)}.altar-props img{left:50%;width:330px;transform:translateX(-50%)}.control-dock{height:68px;padding:11px 18px}.dock-art{height:116px;bottom:-24px}.control-dock button:nth-of-type(2){margin-right:65px}.oracle-frame-art{object-fit:fill}}
@media print{.sidebar-frame-art,.altar-props,.dock-art,.oracle-frame-art,.scrying-orb-art{display:none!important}}

/* ========================================================================== */
/* Proposal-match pass: one cohesive raster shell + live HTML interaction      */
/* ========================================================================== */
.app-shell{position:relative;background:#030611;overflow:visible}
.app-shell:before{display:none}
.raster-stage{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none;background:#030611}
.raster-layer{position:absolute;display:block;background-position:center;background-size:100% 100%;background-repeat:no-repeat;pointer-events:none}
.layer-violet-base{z-index:0;inset:0;background-image:url("assets/ui/layers/4k/violet-base-3840.webp")}
.layer-wheel{z-index:1;left:16.175347%;top:3.820439%;width:57.8125%;height:82.616%;background-image:url("assets/ui/layers/pieces/wheel-clean.png")}
.layer-wheel-coin{z-index:8;left:71.76%;top:3.61%;width:47px;height:58px;background-image:url("assets/ui/layers/pieces/wheel-coin.png");background-size:contain;background-position:center;background-repeat:no-repeat;filter:drop-shadow(0 10px 9px rgba(0,0,0,.72))}
.layer-left-menu{z-index:2;left:-18px;top:4.77555%;width:20.833333%;height:95.22445%;background:none;container-type:size}
.raster-nine-slice{--slice-x:18.75cqw;--slice-y:18.75cqw;position:absolute;display:block;z-index:1}
.left-main-frame{left:9.75%;top:0;width:85.875%;height:129.25cqw}
.left-question-frame{left:9.5%;top:128.125cqw;width:86.25%;height:61.125cqw}
.raster-slice{position:absolute;display:block;background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.slice-tl,.slice-tr,.slice-bl,.slice-br{width:var(--slice-x);height:var(--slice-y)}
.slice-tl{left:0;top:0}.slice-tr{right:0;top:0}.slice-bl{left:0;bottom:0}.slice-br{right:0;bottom:0}
.slice-t,.slice-b{left:var(--slice-x);right:var(--slice-x);height:var(--slice-y);background-repeat:repeat-x;background-size:auto 100%}
.slice-t{top:0}.slice-b{bottom:0}
.slice-l,.slice-r{top:var(--slice-y);bottom:var(--slice-y);width:var(--slice-x);background-repeat:repeat-y;background-size:100% auto}
.slice-l{left:0}.slice-r{right:0}
.slice-c{left:var(--slice-x);right:var(--slice-x);top:var(--slice-y);bottom:var(--slice-y);background-repeat:repeat;background-size:43.2px 43.2px}
.layer-bottom-menu{z-index:3;left:35.532407%;bottom:5px;width:28.935185%;height:var(--bottom-menu-height,166.667px);background-image:url("assets/ui/control-dock.png");background-size:100% 100%;background-repeat:no-repeat}







.layer-right-panel{z-index:4;right:-13.5px;top:3.820439%;width:29.6875%;height:96.179561%;background-image:url("assets/ui/layers/pieces/right-panel-clean.png");container-type:size}
.right-panel-nine-slice{--rp-x:15.889831cqw;--rp-top:42.902542cqw;--rp-bottom:31.779661cqw;position:absolute;display:none;inset:0}
.right-panel-slice{position:absolute;display:block;background-position:center;background-repeat:no-repeat;background-size:100% 100%;pointer-events:none}
.rp-tl,.rp-tr{top:0;width:var(--rp-x);height:var(--rp-top)}.rp-tl{left:0}.rp-tr{right:0}
.rp-bl,.rp-br{bottom:0;width:var(--rp-x);height:var(--rp-bottom)}.rp-bl{left:0}.rp-br{right:0}
.rp-t{z-index:2;left:var(--rp-x);right:var(--rp-x);top:0;height:var(--rp-top)}
.rp-b{z-index:2;left:var(--rp-x);right:var(--rp-x);bottom:0;height:var(--rp-bottom)}
.rp-l,.rp-r{top:calc(var(--rp-top) - 1px);bottom:calc(var(--rp-bottom) - 1px);width:var(--rp-x)}.rp-l{left:0}.rp-r{right:0}
.rp-c{left:var(--rp-x);right:var(--rp-x);top:calc(var(--rp-top) - 1px);bottom:calc(var(--rp-bottom) - 1px)}
.corner-ornaments{z-index:5;bottom:0;background:none;overflow:visible}
.corner-ornaments img{position:absolute;display:block;max-width:none;object-fit:contain;filter:drop-shadow(0 13px 12px rgba(0,0,0,.72))}
.corner-ornaments-left{left:0;bottom:8px;width:365px;height:235px;transform:scale(1.2);transform-origin:left bottom}
.ornament-left-crystal{z-index:0;left:-16px;bottom:-8.8px;width:184px;height:194px}
.ornament-left-armillary{z-index:1;left:74px;bottom:-7.7px;width:171px;height:167px}
.ornament-left-candle{z-index:3;right:33px;bottom:-14.5px;width:168px;height:122px}
.corner-ornaments-right{z-index:7;right:0;width:445px;height:235px}
.ornament-right-telescope{z-index:1;left:-188px;bottom:786px;width:248px;height:136px}
.ornament-right-candle{z-index:2;left:151px;bottom:-8px;width:169px;height:123px}
.ornament-right-orb{z-index:3;right:-10px;bottom:-15px;width:218px;height:232px}
.topbar,.workspace,.library-shell,.guide-shell,.journal-shell{position:relative;z-index:6}
.app-shell:has(.workspace){height:100vh;min-height:0;overflow:clip}

.topbar{height:36px;grid-template-columns:330px 1fr 250px;padding:0 22px 0 15px;background:rgba(2,5,12,.965);border-bottom:1px solid rgba(185,133,47,.72);box-shadow:none}
.brand{font-size:25px;gap:9px;line-height:1;align-items:center;font-family:Georgia,"Noto Serif Thai",serif;letter-spacing:.05em}.brand-mark{width:26px;height:26px;font-size:14px}.topbar nav{gap:56px}.topbar nav button{font-size:16px;line-height:1;font-family:Georgia,"Noto Serif Thai",serif;letter-spacing:.02em}.top-actions button{height:26px;padding:0 12px;font-size:13px;border-radius:14px;font-family:Georgia,"Noto Serif Thai",serif}

.workspace{height:calc(100vh - 36px);min-height:0;padding-top:22px;grid-template-columns:330px minmax(0,1fr) 500px;background:transparent;overflow:clip}
.ritual-sidebar{min-height:0;padding:27px 16px 170px 44px;background:transparent;border:0;box-shadow:none;overflow:hidden}
.sidebar-frame-art,.altar-props,.sidebar-filagree{display:none!important}
.sidebar-heading{height:108px;padding:4px 0 15px;border-bottom:0}.sidebar-heading:after{display:none}.sidebar-heading span{font-size:16px}.sidebar-heading h1{font-size:29px;margin:2px 0}.sidebar-heading small{font-size:12px}
.spread-list{padding:0}.spread{height:43px;padding:5px 8px 5px 7px;border-bottom:1px solid rgba(188,143,66,.18);gap:12px}.spread i{width:29px;height:29px}.spread b{font-size:13px}.spread small{display:none}.spread.active{margin-left:0;width:100%;padding-left:7px;border-color:rgba(184,100,221,.58);box-shadow:inset 2px 0 #b86fe3,0 0 15px rgba(123,55,176,.18)}.spread.active:before{display:none}.spread.active:after{right:-5px;width:11px;height:11px}
/* No fixed height: the hint below the box is what used to vary, and SteadyText
   now reserves its tallest wording, so the box can simply be as tall as what is
   in it. Pinning it at 199px pushed the shuffle button out through the bottom. */
.question-box{margin-top:23px;padding:9px 7px 8px;border:0;border-radius:0;background:transparent;box-shadow:none}.question-box:before,.question-box:after{display:none}.question-box label{text-align:center;margin:0 0 8px;font-size:15px}.question-box textarea{height:84px;border-color:rgba(194,147,67,.35);background:rgba(7,12,24,.74);font-size:10px}/* The hint rotates between wordings, and the sidebar must not jump when it does.
   SteadyText already holds the box open at the tallest wording with hidden ghosts,
   so the old fixed height here is not steadying anything — it was clipping a
   three-line hint down to one. */
.question-hint{margin:4px 0!important}.question-box .primary{height:42px;margin-top:5px;font-size:14px}

.reading-table{min-height:0;padding-bottom:140px;background:transparent;border:0}.reading-table:before,.reading-table:after{display:none}.table-title{display:none}.astrolabe,.celestial-compass{display:none!important}
.dynamic-board{top:40.6%;width:min(858px,97%);height:700px}.laid-card{width:82px}.laid-card img{width:82px;height:139px;border-width:1px}.laid-card small{font-size:9px;margin-top:3px;background:rgba(3,6,12,.66);padding:1px 4px;border-radius:7px;width:max-content;max-width:120px;transform:translateX(-12%)}.position-number{top:-10px;left:-11px;width:27px;height:27px;font-size:13px;border-width:1px}.empty-slot{width:82px;height:139px}.empty-slot small{top:143px}
.reading-table[data-spread="celtic"] .laid-card:nth-child(10),.reading-table[data-spread="celtic"] .laid-card:nth-child(3){z-index:8}
.reading-table[data-spread="celtic"] .laid-card:nth-child(2){z-index:12}

.deck-zone{left:70px;right:70px;bottom:120px;height:118px;z-index:1}.deck-heading{left:8px;bottom:83px;font-size:11px}.deck-fan{width:min(620px,78%);height:76px;bottom:61px}.deck-fan img{left:calc(var(--i) * 31px);width:64px;height:105px;transform:rotate(calc((var(--i) - 8) * 2deg));transform-origin:50% 150%}.deck-actions{left:0;right:0;bottom:70px;display:flex;flex-direction:row;justify-content:space-between}.deck-actions button{min-width:126px;padding:7px 15px;background:rgba(7,13,22,.88)}
.control-dock{left:50%;bottom:5px;width:var(--bottom-controls-width,500px);height:var(--bottom-menu-height,166.667px);padding:0;gap:0;display:grid;grid-template-columns:11.694% 14.180% 1.197% 14.088% 17.726% 13.996% 1.197% 14.319% 11.602%;grid-template-rows:37.431% 16.575% 45.994%;background:transparent;border:0;box-shadow:none;overflow:visible}.dock-art{display:none}.control-dock button{grid-row:2;min-width:0;width:100%;height:100%;padding:0 2px;white-space:nowrap;border:0;border-radius:calc(.05249 * var(--bottom-menu-height,166.667px));background:transparent;box-shadow:none;font-size:10.5px;letter-spacing:.1px;color:#d9ccb2;transition:background .18s ease,box-shadow .18s ease,color .18s ease}.control-dock button:nth-of-type(1){grid-column:2}.control-dock button:nth-of-type(2){grid-column:4;margin-right:0}.control-dock button:nth-of-type(3){grid-column:6}.control-dock button:nth-of-type(4){grid-column:8}.control-dock button:hover{color:#f7ecd2;background:radial-gradient(120% 140% at 50% 50%,rgba(226,181,92,.22),rgba(226,181,92,.08) 62%,transparent);box-shadow:inset 0 0 20px rgba(226,181,92,.16)}.control-dock button:active{background:radial-gradient(120% 140% at 50% 50%,rgba(226,181,92,.34),rgba(226,181,92,.14) 62%,transparent)}/* ปุ่มหลักหน้าตาเหมือนอีกสามปุ่มตอนไม่ได้ชี้ ไม่มีพื้น ไม่มีขอบ กลืนไปกับกรอบในภาพ */.control-dock .primary{color:#d9ccb2!important;background:transparent!important;box-shadow:none!important;border-color:transparent!important}.control-dock .primary:hover{color:#f3e6ff!important;background:radial-gradient(120% 140% at 50% 50%,rgba(168,88,246,.30),rgba(140,64,214,.12) 62%,transparent)!important;box-shadow:inset 0 0 22px rgba(150,72,224,.22)!important}

.oracle-panel{min-height:0;margin:0;padding:92px 78px 184px;display:flex;flex-direction:column;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:hidden;color:#2d2519}.oracle-scroll{flex:1;min-height:0;display:flex;flex-direction:column;padding-bottom:10px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(120,94,52,.5) transparent;overscroll-behavior:contain}.oracle-scroll::-webkit-scrollbar{width:6px}.oracle-scroll::-webkit-scrollbar-track{background:transparent}.oracle-scroll::-webkit-scrollbar-thumb{background:rgba(120,94,52,.45);border-radius:3px}.oracle-scroll::-webkit-scrollbar-thumb:hover{background:rgba(120,94,52,.7)}.energy-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 10px;padding:8px 10px;border:1px solid rgba(120,94,52,.3);border-radius:8px;background:rgba(120,94,52,.08)}.energy-strip span{display:flex;flex-direction:column;gap:2px;font-size:calc(10.5px * var(--read-scale,1));color:#3f3423;line-height:1.35}.energy-strip small{font-size:calc(8.5px * var(--read-scale,1));letter-spacing:.06em;color:#8a6a34}.reading-scope{margin:0 0 10px;font-size:calc(10px * var(--read-scale,1));color:#7b6540}.oracle-accordions .accordion-body p{margin:0 0 6px}.oracle-accordions .accordion-body ul{margin:0;padding-left:16px;list-style:disc}.oracle-accordions .accordion-body li{margin-bottom:5px}.oracle-accordions .accordion-body li::marker{color:#8a6a34}.section-closing{margin-top:6px;font-style:italic;color:#6f5c3c}.adv-sub{margin:9px 0 4px;font:600 calc(11px * var(--read-scale,1)) Georgia,"Noto Serif Thai",serif;color:#7b6540}.quint-card{display:grid;grid-template-columns:76px minmax(0,1fr);gap:11px;align-items:start;margin-bottom:6px}.quint-card img{width:76px;height:auto;border-radius:5px;box-shadow:0 6px 14px rgba(0,0,0,.4)}.position-readings button em{display:block;font-size:calc(8.5px * var(--read-scale,1));color:#8a6a34;font-style:normal;margin:1px 0 3px}.pos-keywords{display:block;margin-top:4px;font-size:calc(8.5px * var(--read-scale,1));color:#8a6a34}.answer-gauge{margin:10px 0 8px;padding:9px 10px;border:1px solid rgba(120,94,52,.28);border-radius:8px;background:rgba(120,94,52,.06)}.gauge-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:6px}.gauge-head span{font-size:calc(9px * var(--read-scale,1));letter-spacing:.06em;color:#8a6a34}.gauge-head b{font-size:calc(11px * var(--read-scale,1));color:#3f3423}.gauge-track{position:relative;height:8px;border-radius:5px;background:rgba(48,38,23,.14);overflow:hidden}.gauge-track i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#6d3a98,#b98a34)}.gauge-track:before{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(48,38,23,.4);z-index:2}.gauge-scale{display:flex;justify-content:space-between;margin-top:4px;font-size:calc(8.5px * var(--read-scale,1));color:#8a6a34}.guide-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:20px;align-items:start}.guide-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:4px;padding:14px;border:1px solid rgba(201,165,92,.25);border-radius:12px;background:rgba(11,14,31,.8)}.guide-toc b{display:block;margin-bottom:6px;color:#9e8a5f;font-size:10px;letter-spacing:.16em}.guide-toc button{display:flex;align-items:center;gap:8px;width:100%;padding:7px 9px;border:0;border-radius:8px;background:transparent;color:#bdb5a6;font-size:12px;text-align:left;cursor:pointer;transition:.18s}.guide-toc button i{font-style:normal;color:#7f4ba6}.guide-toc button:hover{background:rgba(201,165,92,.08);color:#f2d58e}.guide-toc button.active{background:rgba(123,55,176,.16);color:#f2d58e}.guide-toc .guide-start{margin-top:10px;justify-content:center;border:1px solid rgba(201,165,92,.45);color:#ead39a}.guide-body{display:flex;flex-direction:column;gap:14px}.doc-section{border:1px solid rgba(226,184,95,.28);border-radius:12px;padding:16px 18px;background:rgba(11,14,31,.8)}.doc-section h2{margin:0 0 8px;font:700 18px Georgia,"Noto Serif Thai",serif;color:var(--gold-soft)}.doc-section p,.doc-section li{font-size:13.5px;line-height:1.85;color:#e9e2ec}.doc-section ul,.doc-section ol{margin:6px 0;padding-left:20px;list-style:disc}.doc-section code{background:#171a2f;border:1px solid rgba(201,165,92,.25);border-radius:5px;padding:1px 6px;font-size:12px;color:#ffd9a1}.doc-section b{color:#f0dfae}.table-wrap{overflow-x:auto;margin:10px 0}table.data{width:100%;border-collapse:collapse;font-size:13px;min-width:460px}table.data th,table.data td{border-bottom:1px solid rgba(201,165,92,.18);padding:9px 10px;text-align:left;vertical-align:top;color:#ded6c4}table.data th{color:var(--gold-soft);font-weight:700;white-space:nowrap}.guide-note{margin-top:4px;font-size:11px;color:#8f876f;line-height:1.7}.library-tools{display:flex;flex-wrap:wrap;gap:10px;align-items:center;position:sticky;top:0;z-index:15;padding:12px 14px;margin-bottom:18px;border:1px solid rgba(201,165,92,.25);border-radius:13px;background:rgba(5,8,16,.93);backdrop-filter:blur(12px)}.library-tools input{flex:1 1 240px;min-width:180px}.tool-group{display:flex;gap:4px;flex-wrap:wrap}.face-toggle button{min-width:62px}.result-count{margin-left:auto;padding:6px 12px;border:1px solid rgba(201,165,92,.3);border-radius:14px;color:#c0a86f;font-size:11px;white-space:nowrap}.library-empty{text-align:center;color:#8f876f;padding:60px 0}.card-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:14px}.card-library>button{display:flex;flex-direction:column;min-height:0;padding:14px 14px 12px;text-align:left;border:1px solid rgba(201,165,92,.24);border-radius:14px;background:linear-gradient(165deg,rgba(22,29,56,.94),rgba(6,9,18,.98));cursor:pointer;transition:transform .2s,border-color .2s,box-shadow .2s}.card-library>button:hover{transform:translateY(-4px);border-color:#b49451;box-shadow:0 14px 30px rgba(0,0,0,.45),0 0 20px rgba(121,67,164,.2)}.card-library figure{margin:0 0 12px;display:grid;place-items:center;height:200px}.card-library img{width:118px;height:200px;margin:0;object-fit:cover;border:1px solid var(--gold);border-radius:6px;box-shadow:0 10px 20px rgba(0,0,0,.5)}.card-rank{color:#9e8a5f;font-size:8.5px;letter-spacing:.1em}.card-library h2{font-family:Georgia,"Noto Serif Thai",serif;font-size:16px;color:var(--gold-soft);margin:3px 0 0}.card-library small{color:#7b7488;font-size:11px}.card-library p{flex:1;margin:8px 0 0;font-size:11px;line-height:1.62;color:#aaa294;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}.card-library b{margin-top:8px;font-size:9.5px;color:#a474c8;font-weight:400;line-height:1.5}.card-library footer{display:flex;gap:8px;margin-top:9px;padding-top:8px;border-top:1px solid rgba(201,165,92,.14)}.card-library footer i{font-style:normal;font-size:9px;color:#8f876f}.settings-modal{position:relative;width:min(520px,94vw);max-height:86vh;overflow-y:auto;padding:26px 28px 24px;border:1px solid rgba(201,165,92,.6);border-radius:16px;background:linear-gradient(150deg,#111834,#060914);box-shadow:0 25px 80px #000}.settings-modal h2{margin:0 0 4px;font-family:Georgia,"Noto Serif Thai",serif;color:var(--gold-soft);font-size:22px}.settings-modal h4{margin:18px 0 6px;color:#c0a86f;font-size:12px;letter-spacing:.06em}.settings-modal p{margin:0;color:#aea696;font-size:12px;line-height:1.7}.settings-modal p.fine{font-size:11px;color:#8f876f}.settings-modal input[type=range]{width:100%;accent-color:#a566d3}.danger-btn{margin-top:10px;padding:8px 14px;border:1px solid rgba(176,80,80,.45);border-radius:16px;background:transparent;color:#cb9a9a;font-size:12px;cursor:pointer}.danger-btn:hover{background:rgba(176,80,80,.12)}.reading-head{display:flex;flex-direction:column;align-items:center;gap:6px}.reading-head h2{align-self:stretch;margin:0 0 14px;text-align:center}.type-scale{display:flex;align-items:center;gap:7px;flex:none;padding:4px 9px;border:1px solid rgba(90,68,34,.45);border-radius:16px;background:rgba(255,250,235,.42);box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}.type-scale button{width:30px;height:27px;padding:0;border:1.5px solid #7a6134;border-radius:7px;background:linear-gradient(180deg,#fbf4e2,#e2d3ae);color:#2f2718;font:700 14px Georgia,"Noto Serif Thai",serif;line-height:1;cursor:pointer;box-shadow:0 1px 2px rgba(60,44,20,.35);transition:.16s}.type-scale button:hover:not(:disabled){background:linear-gradient(180deg,#fff,#ecdfbe);border-color:#4f3f1e;color:#1d180e}.type-scale button:disabled{opacity:.35;cursor:default}.type-scale span{min-width:44px;text-align:center;font:600 11.5px Georgia,"Noto Serif Thai",serif;color:#3f341f;letter-spacing:.02em}.settings-modal{width:min(720px,94vw);padding:28px 32px 26px}.settings-modal header{margin-bottom:6px}.settings-modal header p{margin-top:4px;font-size:11.5px;color:#8f876f}.setting-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:6px 18px;align-items:center;padding:16px 0;border-top:1px solid rgba(201,165,92,.14)}.setting-label{display:flex;flex-direction:column;gap:2px}.setting-label h4{margin:0;color:#c0a86f;font-size:12.5px;letter-spacing:.04em}.setting-label b{color:#ead39a;font-size:15px;font-family:Georgia,"Noto Serif Thai",serif}.setting-control{display:flex;flex-direction:column;gap:3px}.setting-control .danger-btn{align-self:flex-start;margin:0}.setting-control .danger-btn:disabled{opacity:.4;cursor:default}.range-scale{display:flex;justify-content:space-between;font-size:9px;color:#7d7565}.setting-help{grid-column:1/-1;margin:2px 0 0;font-size:11.5px;line-height:1.75;color:#9a9285}.settings-modal footer{border-top:1px solid rgba(201,165,92,.14);padding-top:14px;margin-top:4px}.profile-modal{width:min(780px,95vw)}.profile-modal input[type=text],.profile-modal input[type=date]{width:100%;max-width:260px;padding:8px 11px;border:1px solid rgba(201,165,92,.35);border-radius:9px;background:rgba(6,9,18,.75);color:var(--ivory);font-size:13px}.profile-modal input:focus{outline:none;border-color:#b49451}.profile-modal .tool-group button{padding:6px 12px;border:1px solid rgba(201,165,92,.3);border-radius:15px;background:rgba(11,14,31,.7);color:#bdb5a6;font-size:11.5px;cursor:pointer;transition:.16s}.profile-modal .tool-group button:hover{border-color:#b49451;color:#f2d58e}.profile-modal .tool-group button.active{border-color:#c9a55c;background:rgba(123,55,176,.22);color:#f2d58e}.profile-modal .focus-group{max-width:520px}.profile-preview{margin:6px 0 0;font-size:12px;line-height:1.7;color:#e0d3b4}.profile-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;border-top:1px solid rgba(201,165,92,.14);padding-top:16px;margin-top:8px}.profile-actions button{padding:9px 18px;border:1px solid rgba(201,165,92,.4);border-radius:18px;background:rgba(11,14,31,.7);color:#d5c9af;font-size:12.5px;cursor:pointer}.profile-actions .danger-btn{margin:0 0 0 auto}/* printed with every reading so the lens the profile chose is never applied silently */.reader-scope{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;margin:0 0 10px;font-size:calc(10px * var(--read-scale,1));line-height:1.7;color:#6f5c3c}.reader-scope b{color:#8a6a34;font-weight:600}.reader-scope button{border:0;background:none;padding:0;color:#7b5aa6;font-size:inherit;text-decoration:underline;cursor:pointer}.settings-modal footer h4{margin:0 0 4px}.pick-zone{position:absolute;left:70px;right:70px;top:88px;bottom:186px;display:flex;flex-direction:column;justify-content:center;gap:14px;z-index:3}.spill-head{align-self:center;display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:wrap;padding:6px 16px;border:1px solid rgba(201,165,92,.22);border-radius:20px;background:rgba(6,9,18,.8)}.spill-head span{font-size:11.5px;letter-spacing:.14em;color:#9e8a5f}.spill-head b{font-family:Georgia,"Noto Serif Thai",serif;font-size:20px;color:#f2d58e}.spill-head p{margin:0;font-size:11px;color:#8f876f}.pick-fan{position:relative;flex:none;height:488px;--pick-w:70px;--pick-h:120px;--row-step:152px}.pick-card{position:absolute;top:calc(64px + var(--row) * var(--row-step));width:var(--pick-w);height:var(--pick-h);padding:0;border:0;background:transparent;cursor:pointer;left:calc(var(--i) * (100% - var(--pick-w)) / var(--last));transform-origin:50% 118%;transform:rotate(var(--rot)) translateY(var(--dy));z-index:calc(var(--n) + 1);transition:transform .2s cubic-bezier(.2,.8,.3,1)}.pick-card img{display:block;width:100%;height:100%;object-fit:cover;border-radius:6px;box-shadow:-3px 6px 12px rgba(0,0,0,.55)}.pick-card:hover{transform:rotate(var(--rot)) translateY(calc(var(--dy) - 20px));z-index:300}.pick-card:focus-visible{outline:none;z-index:300}.pick-card:focus-visible img{box-shadow:0 0 0 2px rgba(240,207,132,.55)}.pick-card.picked{transform:rotate(var(--rot)) translateY(calc(var(--dy) - 34px))}.pick-card.picked img{box-shadow:0 0 0 1px rgba(226,181,92,.55),0 0 22px rgba(226,181,92,.4),0 12px 20px rgba(0,0,0,.6)}.pick-card i{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:linear-gradient(160deg,#f0cf84,#b8862f);color:#1a1206;font:700 11.5px Georgia,serif;font-style:normal;box-shadow:0 3px 8px rgba(0,0,0,.55)}.spill-actions{display:flex;justify-content:center;align-items:center;gap:10px;flex-wrap:wrap}.spill-actions button{border:1px solid rgba(201,165,92,.35);background:rgba(11,14,31,.7);color:#d5c9af;padding:6px 13px;border-radius:16px;font-size:11.5px;cursor:pointer}.spill-actions button:hover:not(:disabled){border-color:#b49451;color:#f2d58e}.spill-actions button:disabled{opacity:.4;cursor:default}.spill-actions small{width:100%;text-align:center;color:#8f876f;font-size:10px}.laid-card .card-back-face{display:block;object-view-box:none;border-radius:5px;animation:card-land .34s cubic-bezier(.2,.8,.3,1) both}@keyframes card-land{from{opacity:0;transform:translateY(-16px) scale(.92)}to{opacity:1;transform:none}}.laid-card.turned img{animation:card-turn .5s ease-out both}@keyframes card-turn{0%{opacity:0;filter:brightness(2.4)}40%{opacity:.6;filter:brightness(1.5)}100%{opacity:1;filter:none}}.laid-card.face-down{cursor:pointer}.laid-card.face-down small,.laid-card.face-down .position-number{opacity:.55}@media(min-width:1181px){/* the board is only ~420-620px wide below this, where the smaller per-spread sizes above still apply */.reading-table[data-spread="one"] .laid-card,.reading-table[data-spread="one"] .laid-card img{width:338px}.reading-table[data-spread="one"] .laid-card img{height:656px}.reading-table[data-spread="one"] .laid-card small{font-size:14px;margin-top:8px;max-width:100%}.reading-table[data-spread="three"] .laid-card,.reading-table[data-spread="three"] .laid-card img{width:258px}.reading-table[data-spread="three"] .laid-card img{height:501px}.reading-table[data-spread="three"] .laid-card small{font-size:12px;margin-top:6px;max-width:100%}.reading-table[data-spread="love"] .laid-card,.reading-table[data-spread="love"] .laid-card img{width:154px}.reading-table[data-spread="love"] .laid-card img{height:299px}.reading-table[data-spread="love"] .laid-card small{max-width:100%}.reading-table[data-spread="decision"] .laid-card,.reading-table[data-spread="decision"] .laid-card img{width:113px}.reading-table[data-spread="decision"] .laid-card img{height:219px}.reading-table[data-spread="decision"] .laid-card small{max-width:100%}.reading-table[data-spread="career"] .laid-card,.reading-table[data-spread="career"] .laid-card img{width:158px}.reading-table[data-spread="career"] .laid-card img{height:307px}.reading-table[data-spread="career"] .laid-card small{font-size:11px;max-width:100%}.reading-table:not([data-spread="celtic"]) .laid-card small{transform:none;margin-inline:auto;text-align:center}}.laid-card.cross-card,.laid-card.cross-card img{width:115px}.laid-card.cross-card img{height:223px}.laid-card.staff-card,.laid-card.staff-card img{width:85px}.laid-card.staff-card img{height:165px}.laid-card.cross-card small,.laid-card.staff-card small{position:absolute;left:2px;right:2px;bottom:3px;margin:0;padding:3px 4px;border-radius:0 0 4px 4px;background:linear-gradient(180deg,rgba(4,6,14,0),rgba(4,6,14,.82) 42%);color:#e6dcc4;text-shadow:0 1px 3px #000}.laid-card.cross.cross-card small,.laid-card.cross-card.reverse small{text-align:center}.reading-table[data-spread="one"] .laid-card.turned img{height:581px;margin-top:18px;margin-bottom:65px}.reading-table[data-spread="three"] .laid-card.turned img{height:444px;margin-top:14px;margin-bottom:49px}.reading-table[data-spread="love"] .laid-card.turned img{height:265px;margin-top:8px;margin-bottom:29px}.reading-table[data-spread="decision"] .laid-card.turned img{height:194px;margin-top:6px;margin-bottom:22px}.reading-table[data-spread="career"] .laid-card.turned img{height:272px;margin-top:8px;margin-bottom:30px}.laid-card.turned.cross-card img{height:198px;margin-top:6px;margin-bottom:19px}.laid-card.turned.staff-card img{height:146px;margin-top:4px;margin-bottom:15px}.compact-spread .laid-card.turned img{height:100px;margin-top:3px;margin-bottom:13px}/* the right panel is where the reading talks to the reader, so the pause between   dealing face-down and turning is asked there, not over the board */.turn-gate ol{margin:0 0 4px;padding-left:18px;list-style:decimal}.turn-gate li{margin-bottom:4px}.turn-gate .primary{align-self:center;margin-top:14px;padding:10px 24px;font-size:13.5px}@media(max-width:760px){.setting-row{grid-template-columns:1fr}}@media(max-width:1180px){.guide-layout{grid-template-columns:1fr}.guide-toc{position:static}}.modal-sections .span-2{grid-column:1/-1}.modal-stances{margin-top:12px}.modal-stances h4{color:var(--gold-soft);font-size:11px;margin:0 0 6px}.modal-stances dl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0}.modal-stances dl>div{border:1px solid rgba(201,165,92,.14);border-radius:8px;padding:8px 10px}.modal-stances dl>div.current{border-color:rgba(201,165,92,.5);background:rgba(201,165,92,.07)}.modal-stances dt{color:#c0a86f;font-size:9.5px;margin-bottom:2px}.modal-stances dd{margin:0;color:#aea696;font-size:10px;line-height:1.6}.card-modal{grid-template-rows:minmax(0,1fr)}.modal-copy{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(201,165,92,.4) transparent}.modal-copy::-webkit-scrollbar{width:6px}.modal-copy::-webkit-scrollbar-thumb{background:rgba(201,165,92,.35);border-radius:3px}.oracle-frame-art,.scrying-orb-art,.oracle-rays,.oracle-moon{display:none!important}.oracle-panel h2{font-size:25px;margin:0 0 14px}.oracle-panel>*:not(.oracle-frame-art){z-index:3}.oracle-copy{padding-top:9px}.oracle-copy:before{margin-top:-15px;margin-bottom:8px}.oracle-copy h3{font-size:calc(18px * var(--read-scale,1));margin-bottom:8px}.oracle-copy p{font-size:calc(13.2px * var(--read-scale,1));line-height:1.85;margin-bottom:7px}.oracle-accordions{gap:7px;margin-top:12px}.accordion>button{min-height:42px;padding:7px 13px;font-size:calc(12.5px * var(--read-scale,1))}.accordion-body{font-size:calc(10px * var(--read-scale,1));padding:8px 13px}.selected-summary{min-height:118px;grid-template-columns:62px 1fr;gap:10px;padding:8px;margin-top:12px}.selected-summary img{width:62px;height:102px}.selected-summary p{font-size:11px}
.oracle-empty{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 10px}.oracle-empty>*{flex:none}.oracle-empty h3{font-size:calc(20px * var(--read-scale,1))}.oracle-empty p,.oracle-empty li{font-size:calc(12px * var(--read-scale,1))}

.selection-sanctum{inset:35px 24px 266px;border-color:rgba(193,148,65,.42);border-radius:14px;background:radial-gradient(circle at 50% 48%,rgba(17,24,48,.96),rgba(3,7,15,.97));box-shadow:inset 0 0 44px #010309,0 14px 32px rgba(0,0,0,.55)}.face-down-grid{grid-template-columns:repeat(16,minmax(22px,1fr));gap:6px}.selection-heading>span{font-size:16px}

@media(max-width:1450px){.topbar{grid-template-columns:285px 1fr 220px}.workspace{grid-template-columns:285px minmax(0,1fr) 410px}.ritual-sidebar{padding-left:34px;padding-right:32px}.dynamic-board{width:min(690px,93%)}.oracle-panel{padding-left:48px;padding-right:48px}.control-dock{left:50%;padding:0}.control-dock button{min-width:0}.control-dock button:nth-of-type(2){margin-right:0}}
@media(min-width:1181px) and (max-aspect-ratio:3/2){.layer-right-panel{background-image:none}.right-panel-nine-slice{display:block}}
@media(max-width:1180px){.app-shell:before{opacity:.34;background-size:cover}.app-shell:has(.workspace){height:auto;overflow:visible}.topbar{height:auto}.workspace{height:auto;min-height:790px;grid-template-columns:270px minmax(0,1fr)}.ritual-sidebar{min-height:790px;background:rgba(3,7,16,.86)}.reading-table{min-height:790px;background:rgba(3,7,16,.34)}.oracle-panel{grid-column:1/-1;min-height:680px;margin:10px;background:#e4d2aa;padding:80px clamp(35px,10vw,130px) 38px;border-radius:70px}.scrying-orb-art{display:none!important}.control-dock{left:50%;padding:0}}
@media(max-width:760px){.app-shell:before{display:none}.workspace{grid-template-columns:1fr}.ritual-sidebar{padding:22px 18px 28px;min-height:auto}.sidebar-heading{height:auto}.question-box{height:auto}.reading-table{min-height:790px}.dynamic-board{width:680px}.oracle-panel{padding:64px 24px 34px;border-radius:30px}.control-dock button:nth-of-type(2){margin-right:60px}}

/* Desktop artboard fitting. From 1181px wide upward, preserve the complete
   1728 x 942 composition and fit it to the available browser width AND height.
   No aspect-ratio guard: on ultrawide the composition letterboxes against the
   body backdrop, which is correct; the fluid fallback below was never
   calibrated against the raster art and fell apart past 19:10. */
@media(min-width:1181px){
 /* only the fixed reading canvas locks scrolling; the other views still scroll */
 html:has(.workspace),body:has(.workspace){overflow:hidden}
 /* the whole 1728x942 composition scales as one, so content always tracks the raster art */
 .layer-right-panel{background-image:url("assets/ui/layers/pieces/right-panel-clean.png")}
 .right-panel-nine-slice{display:none}
 .app-shell:has(.workspace){position:fixed;left:var(--ui-left,0);top:var(--ui-top,0);width:1728px;height:942px;min-height:942px;transform:scale(var(--ui-scale,1));transform-origin:top left;overflow:clip}
 .raster-stage{position:absolute}
 /* Pixel-calibrated against layout-anchors.json on the 3840 × 2094 source. */
 .topbar{width:1728px;height:36px;grid-template-columns:330px 1fr 330px}
 .topbar nav{gap:105px;transform:translateX(-17px)}
 .workspace{width:1728px;height:906px;min-height:906px;grid-template-columns:330px minmax(0,1fr) 500px}
 .ritual-sidebar{padding:27px 0 170px 32px;overflow:visible}
 .sidebar-heading,.spread-list,.question-box{width:278px}
 .dynamic-board,.ritual-intro{left:50%}.dynamic-board{z-index:2}
 .dynamic-board{width:min(858px,97%)}
 .selection-sanctum{transform:translateX(35.5px)}
 .deck-zone{left:105.5px;right:34.5px}
 .control-dock{left:50%}
 .oracle-panel{padding-left:100.5px;padding-right:72.5px}
 /* the library/guide/journal views are not inside the fixed canvas, so give their
    top bar the same 1728px grid, scale and offset the reading view's bar gets */
 .app-shell:not(:has(.workspace)){padding-top:var(--ui-top,0px)}
 .app-shell:not(:has(.workspace)) .topbar{width:1728px;margin-left:var(--ui-left,0px);transform:scale(var(--ui-scale,1));transform-origin:top left;margin-bottom:calc(36px * (var(--ui-scale,1) - 1))}
 .library-shell,.guide-shell,.journal-shell{width:calc(1728px * var(--ui-scale,1));margin-left:auto;margin-right:auto}
 .control-dock button{min-width:0}
 .control-dock button:nth-child(2),.control-dock button:nth-of-type(2){margin-right:0}
}




























/* ---- the three spreads of the book ------------------------------------------
   The Celtic Cross keeps the cross/staff sizes above. The Work Cycle is a small
   cross over a row of seven, so its cards are narrower; the Tree of Life lays the
   whole deck in eleven piles of seven and needs a board of its own. */
.reading-table[data-spread="work_cycle"] .laid-card,
.reading-table[data-spread="work_cycle"] .laid-card img{width:96px}
.reading-table[data-spread="work_cycle"] .laid-card img{height:186px}
.reading-table[data-spread="work_cycle"] .laid-card.turned img{height:165px;margin-top:5px;margin-bottom:16px}
.reading-table[data-spread="work_cycle"] .laid-card small{font-size:9.5px}

/* Eleven piles of seven on one board. The pictures are the reading, so the cards
   are as large as the tightest pair of piles will allow: the stack fans sideways
   only, which costs width the board has to spare instead of the height it has not,
   and the faces keep the artwork's own 404:784 rather than being squeezed. */
.tree-board{width:min(880px,98%);height:690px;top:42%}
.tree-pile{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:5}
.pile-name{font:600 9.5px Georgia,"Noto Serif Thai",serif;color:#e6dcc4;text-shadow:0 1px 3px #000,0 0 7px #000;white-space:nowrap;letter-spacing:.02em}
/* Match the other spreads: empty position labels are muted; dealt backs are softer than open cards. */
.tree-pile.empty-pile .pile-name{opacity:.45}
.tree-pile.face-down-pile .pile-name{opacity:.55}
.pile-cards{position:relative;width:80px;height:109px}
.tarot-card.pile-card{position:absolute;left:calc(var(--i) * 4px);width:56px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.7));z-index:calc(var(--i) + 1)}
.tarot-card.pile-card img{width:56px;height:auto;aspect-ratio:404 / 784;object-fit:fill;border:0;border-radius:3px;background:transparent;object-view-box:inset(80px)}
.tarot-card.pile-card .card-back-face{object-view-box:none;object-fit:cover;border-radius:3px}
.tarot-card.pile-card:hover:not(:disabled){transform:translateY(-8px) scale(1.14);z-index:40}
.tarot-card.pile-card.empty-slot{width:56px;height:109px;border:1px dashed rgba(202,173,110,.24)}
.tree-pile .slot-sigil{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:18px;opacity:.4}

/* The card being read. The panel scrolls on its own while the table stays put, so
   by the third section the eye is hunting the board; this points at the card the
   sentence is about. Filter only — .laid-card carries the crossing card's rotation
   in its transform, and a glow must not straighten it. */
.tarot-card.glow{z-index:16;animation:card-glow 2.4s ease-in-out infinite}
@keyframes card-glow{
  0%,100%{filter:drop-shadow(0 0 3px rgba(243,220,158,.95)) drop-shadow(0 0 13px rgba(184,124,255,.6)) drop-shadow(0 9px 9px rgba(0,0,0,.7))}
  50%{filter:drop-shadow(0 0 6px rgba(255,236,183,1)) drop-shadow(0 0 24px rgba(196,140,255,.9)) drop-shadow(0 9px 9px rgba(0,0,0,.7))}
}
.tree-pile.glow{z-index:20}
.tree-pile.glow .pile-name{color:#fff0cd;text-shadow:0 0 11px rgba(196,140,255,.95),0 1px 3px #000,0 0 7px #000}
@media(prefers-reduced-motion:reduce){
  .tarot-card.glow{animation:none;filter:drop-shadow(0 0 5px rgba(255,236,183,1)) drop-shadow(0 0 18px rgba(196,140,255,.85)) drop-shadow(0 9px 9px rgba(0,0,0,.7))}
}


/* ---- the cards a reading section is talking about --------------------------- */
/* The source art is 564x944 with an 80px transparent margin all round, so the
   picture itself is 404x784 — 1 : 1.94. Crop the margin the way the board does and
   size to that ratio, or the thumbnail comes out squashed. `flex:0 0 auto` stops
   the row from shrinking them, and the padding reset beats .oracle-accordions
   button, which would otherwise add 8px top and bottom. */
.section-cards{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:0 0 10px}
.oracle-accordions .section-card{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:3px;width:72px;padding:0;border:0;background:none;cursor:pointer}
.oracle-accordions .section-card img{display:block;width:72px;height:auto;aspect-ratio:404 / 784;object-view-box:inset(80px);object-fit:fill;border:0;border-radius:3px;background:transparent;box-shadow:0 3px 8px rgba(0,0,0,.34)}
.oracle-accordions .section-card small{font-size:calc(8.5px * var(--read-scale,1));line-height:1.25;color:#6f5c3c;text-align:center}
.oracle-accordions .section-card:hover img{box-shadow:0 5px 12px rgba(0,0,0,.5)}

.lang-switch{white-space:nowrap}
.profile-lobby-link{display:inline-flex;align-items:center;min-height:44px;color:#e6c486;font-size:12px;text-underline-offset:4px}
.profile-lobby-link:focus-visible{outline:2px solid #f4ce87;outline-offset:3px}

/* three spreads instead of six leaves room for each one's line again */
.spread-list{gap:8px}
.spread{height:auto;min-height:56px;padding:9px 12px;align-items:flex-start}
.spread small{display:block;font-size:9.5px;line-height:1.45;color:#8c8478;white-space:normal}
.spread span{display:flex;flex-direction:column;gap:2px;min-width:0}

/* The Tree of Life is dealt, not picked: the querent shuffles and cuts, the reader
   lays all seventy-seven. So this spread shows a deck, not a fan to choose from. */
.deal-zone{align-items:center;gap:26px}
.deal-deck{position:relative;height:190px;width:340px}
.deal-deck img{position:absolute;left:calc(var(--i) * 9px);top:calc(var(--i) * -2px);width:118px;height:190px;object-fit:cover;border-radius:7px;box-shadow:-5px 7px 14px rgba(0,0,0,.55);transform:rotate(calc((var(--i) - 6.5) * .7deg));transform-origin:50% 120%}
.deal-zone .spill-head{max-width:640px;flex-direction:column;text-align:center;gap:4px}
.deal-zone .spill-head p{line-height:1.75}
.deal-zone .spill-actions .primary{padding:8px 20px}

/* ---- ไพ่ทั้ง 78 ใบ ----------------------------------------------------------
   Laid out the way tarot1 lays it out: a fixed column on the left that filters by
   suit and keeps a running count of the deck, with the head, the toolbar and the
   grid in the main column beside it. */
.library-shell{display:grid;grid-template-columns:238px minmax(0,1fr);gap:26px;align-items:start}
.library-side{position:sticky;top:16px;display:flex;flex-direction:column;gap:8px;padding:15px 0 12px;border:1px solid rgba(201,165,92,.25);border-radius:14px;background:rgba(11,14,31,.82)}
.library-side .side-title{padding:0 14px;color:#9e8a5f;font-size:10px;letter-spacing:.16em;text-transform:uppercase}
.library-side .side-title:not(:first-child){margin-top:8px;padding-top:12px;border-top:1px solid rgba(201,165,92,.14)}
.suit-list{display:flex;flex-direction:column}
.suit-list .spread{height:auto;min-height:46px;padding:8px 14px;gap:11px}
.suit-list .spread i{font-style:normal;width:26px;height:26px;flex:none;display:grid;place-items:center;border:1px solid rgba(201,165,92,.3);border-radius:50%;font-size:13px;color:#cbb072}
.suit-list .spread span{display:flex;flex-direction:column;gap:1px;min-width:0}
.suit-list .spread b{font-size:12.5px;font-weight:600;color:#d6cdba}
.suit-list .spread small{font-size:9.5px;color:#8c8478}
.suit-list .spread.active{background:linear-gradient(90deg,rgba(123,55,176,.26),transparent)}
.suit-list .spread.active b{color:#f2d58e}
.suit-list .spread.active i{border-color:#c9a55c;color:#f2d58e}
.suit-list .spread:hover:not(.active){background:rgba(201,165,92,.06)}
.deck-stats{display:flex;flex-direction:column;gap:2px;padding:0 14px}
.deck-stats div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:4px 0;font-size:11.5px;color:#a49c8c}
.deck-stats b{font-family:Georgia,"Noto Serif Thai",serif;font-size:13px;color:#d9c9a4;font-weight:400}
.deck-stats .current b{color:#f2d58e}
.library-main{min-width:0}
@media(max-width:1180px){.library-shell{grid-template-columns:1fr}.library-side{position:static}.suit-list{flex-direction:row;flex-wrap:wrap}.suit-list .spread{width:auto;flex:1 1 150px;border-bottom:0}}

/* A seeded line whose wording changes between readings must not change the size of
   its panel, or the page jumps every time. Every variant sits in the same grid cell
   so the box is always as tall as the longest; only the chosen one is visible. */
.steady-text{display:grid;align-items:start;justify-items:center;text-align:center}
.steady-text > span{grid-area:1 / 1}
.steady-text > .steady-ghost{visibility:hidden;pointer-events:none;user-select:none}


/* The reading is not one undifferentiated wall: the picture on the card, what it
   says about the question, what to do, and how it ties to other cards each get a
   heading. The reader's own framing has none — it is the voice between the parts. */
.block-run{margin:0 0 10px}
.block-run:last-child{margin-bottom:0}
.block-head{display:flex;align-items:center;gap:8px;margin:0 0 5px;font:600 calc(9.5px * var(--read-scale,1)) Georgia,"Noto Serif Thai",serif;letter-spacing:.14em;text-transform:uppercase;color:#8a6a34}
.block-head:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(138,106,52,.35),transparent)}
.block-run.is-picture{padding-left:9px;border-left:2px solid rgba(138,106,52,.3)}
.block-run.is-picture p{color:#5d4f38;font-style:italic}
.block-run.is-advice{padding:8px 10px;border:1px solid rgba(120,94,52,.26);border-radius:8px;background:rgba(120,94,52,.06)}
.block-run.is-link p{color:#6f5c3c}
.block-run.is-aside p{color:#7b6540}

/* a card-to-card note names its pair, or it reads as if it arrived from nowhere */
/* A link is about a card lying somewhere else on the table. Naming it is not the
   same as pointing at it, so its face goes above the sentence — the eye meets the
   card first, then reads why it was brought over. */
.linked{margin:0 0 10px}
.linked:last-child{margin-bottom:0}
/* the face and the names of the pair share one line, so the eye takes in who is
   being joined before it starts on the sentence underneath */
.linked-head{display:flex;align-items:center;gap:8px;margin:0 0 5px}
.linked-cards{flex:0 0 auto;display:flex;gap:5px}
.linked-head .pair-label{margin:0;min-width:0}
.linked-card{padding:0;border:0;background:none;cursor:pointer;line-height:0}
.linked-card img{display:block;width:44px;height:auto;aspect-ratio:404 / 784;object-view-box:inset(80px);object-fit:fill;border-radius:2px;background:transparent;box-shadow:0 2px 5px rgba(0,0,0,.32)}
.linked-card:hover img{box-shadow:0 3px 9px rgba(0,0,0,.5)}
.linked p{margin:0}

.pair-label{display:block;margin-bottom:2px;font:600 calc(9.5px * var(--read-scale,1)) Georgia,"Noto Serif Thai",serif;color:#7b5aa6;letter-spacing:.02em}

/* Printing: the reading lives in a scroller, so on paper it has to be let out of
   its box or only the first screenful reaches the page. Every accordion opens too —
   what is collapsed on screen is not printed otherwise. */
@media print{
  .oracle-panel{display:block;height:auto;max-height:none;overflow:visible!important;padding:0 20px}
  .oracle-scroll{display:block;overflow:visible!important;height:auto;max-height:none;min-height:0;flex:none}
  .accordion{break-inside:avoid}
  .oracle-accordions{gap:10px}
}

/* The sidebar artwork draws two panels, and the lower one is the place where the
   querent is asked what they want to know — it was sitting empty while the question
   floated above its top edge. The box is pinned to that panel in percentages of the
   sidebar, because the art is stretched to the same box and the two have to move
   together. Only in the wide layout: below that the sidebar is short and stacked,
   and the panel is not where these numbers say.

   Selectors are qualified by .ritual-sidebar rather than left bare: the dev server
   hands this file over in pieces and does not promise to inject them in the order
   they are written, so winning on source order alone is not something to rely on. */
.ritual-sidebar .question-box{z-index:3}

@media(min-width:1101px){
  .ritual-sidebar .question-box{position:absolute;left:9.5%;right:9.5%;top:52.6%;height:21.2%;width:auto;
    margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
  .ritual-sidebar .question-box label{flex:0 0 auto;margin:0}
  /* the field takes what the hint leaves; it never drives the panel's height */
  .ritual-sidebar .question-box textarea{flex:1 1 auto;height:auto;min-height:44px}
  .ritual-sidebar .question-box .question-hint{flex:0 0 auto;margin:0!important}
  .ritual-sidebar .question-box .primary{flex:0 0 auto;margin:0}
}

/* The lozenge on the right edge of the chosen spread marks the row, so it belongs
   opposite the middle of it. With only `right` set it kept its static position and
   sat up by the first line of text; rows are two and three lines tall, so the taller
   the row the further out it looked. Qualified past .spread-list because the dev
   server does not promise to inject this file's pieces in order. */
.spread-list .spread.active:after{top:50%;transform:translateY(-50%) rotate(45deg)}

/* Fit the sidebar's content to the panel drawn behind it. Measured on screen, the
   frame's inner line runs down x=30.5 and x=311.5 of a 330px sidebar; the rows were
   spanning 32 to 310, leaving a dark sliver of about a pixel and a half down each
   side of the menu. 30px of padding and 282px of content lands them on the line. */
@media(min-width:1181px){
  .ritual-sidebar{padding-left:30px}
  .ritual-sidebar .sidebar-heading,
  .ritual-sidebar .spread-list{width:282px}
}

/* The dock's artwork used to be a separate layer of the raster stage, pinned to the
   middle of the window. The buttons are now centred on the play area instead, and a
   picture that stays behind while its buttons move is worse than either — so the
   picture rides on the dock. The two boxes were already the same size at every
   breakpoint, so this is a straight swap, and they cannot drift apart again. */
.reading-table .control-dock{background-image:url("assets/ui/control-dock.png");
  background-size:100% 100%;background-repeat:no-repeat;background-position:center}
.raster-stage .layer-bottom-menu{display:none}

/* ---- shuffle ritual ---------------------------------------------------------
   A shuffle should read as an action, not a glow. Two seven-card packets move
   apart, riffle together in alternating layers, then settle through a small
   bridge. The full picker stays visible underneath so the ritual never feels
   like a detached loading screen. */
.pick-fan,.deal-deck{transition:opacity .18s ease,filter .18s ease,transform .28s ease}
.is-shuffling .pick-fan,.is-shuffling .deal-deck{opacity:.12;filter:blur(2px) saturate(.55);transform:scale(.965)}
.shuffle-ritual{position:absolute;z-index:12;left:70px;right:70px;top:112px;bottom:188px;display:grid;place-items:center;pointer-events:none;perspective:1100px;isolation:isolate}
.shuffle-ritual:before{content:"";position:absolute;width:360px;height:360px;border:1px solid rgba(222,190,119,.26);border-radius:50%;background:radial-gradient(circle,rgba(146,79,196,.17),rgba(59,40,104,.08) 38%,transparent 69%);box-shadow:inset 0 0 52px rgba(143,77,191,.14),0 0 48px rgba(83,51,125,.16);animation:shuffle-halo 1.46s ease-in-out both}
.shuffle-aura{position:absolute;width:286px;height:286px;border:1px dashed rgba(223,191,119,.2);border-radius:50%;animation:shuffle-orbit 1.46s cubic-bezier(.22,.7,.25,1) both}
.shuffle-aura:before,.shuffle-aura:after{content:"✦";position:absolute;color:#efd891;font-size:15px;text-shadow:0 0 13px #be72ef,0 0 5px #fff2bc;animation:shuffle-spark 1.46s ease-in-out both}
.shuffle-aura:before{left:20px;top:48px}.shuffle-aura:after{right:16px;bottom:55px;animation-delay:90ms}
.shuffle-packet{position:absolute;left:50%;top:44%;width:100px;height:170px;transform:translate(-50%,-50%);transform-style:preserve-3d}
.shuffle-packet img{position:absolute;inset:0;display:block;width:100px;height:170px;object-fit:cover;border:1px solid rgba(232,199,125,.8);border-radius:6px;background:#171226;box-shadow:-6px 9px 14px rgba(0,0,0,.6),0 0 0 1px rgba(86,44,120,.45);opacity:0;will-change:transform,opacity,filter;animation-duration:1.28s;animation-timing-function:cubic-bezier(.2,.72,.2,1);animation-fill-mode:both;animation-delay:calc(var(--shuffle-i) * 28ms)}
.packet-left img{z-index:calc(var(--shuffle-i) * 2 + 1);animation-name:riffle-left}
.packet-right img{z-index:calc(var(--shuffle-i) * 2 + 2);animation-name:riffle-right}
.shuffle-status{position:absolute;left:50%;top:calc(44% + 130px);transform:translateX(-50%);display:flex;align-items:center;gap:11px;min-width:max-content;padding:7px 17px;border:1px solid rgba(211,174,96,.34);border-radius:18px;background:rgba(5,8,18,.82);box-shadow:0 8px 24px rgba(0,0,0,.38);color:#d6c9ae;animation:shuffle-caption 1.46s ease both}
.shuffle-status b{font:500 11px Georgia,"Noto Serif Thai",serif;letter-spacing:.12em}.shuffle-status i{font-style:normal;font-size:9px;color:#e9ca7c;text-shadow:0 0 9px #a760d0;animation:shuffle-status-star .7s ease-in-out infinite alternate}.shuffle-status i:last-child{animation-delay:.35s}
@keyframes riffle-left{
  0%{opacity:0;transform:translate3d(-5px,24px,0) rotate(-2deg) scale(.96);filter:brightness(.7)}
  10%{opacity:1;transform:translate3d(-6px,0,0) rotate(-2deg);filter:brightness(1)}
  29%{opacity:1;transform:translate3d(calc(-108px - var(--shuffle-i) * 1.5px),calc(8px - var(--shuffle-i) * 1px),0) rotate(-11deg)}
  45%{transform:translate3d(calc(-112px - var(--shuffle-i) * 1px),calc(-5px + var(--shuffle-i) * 1px),15px) rotate(-9deg);filter:brightness(1.08)}
  62%{transform:translate3d(calc(-7px + var(--shuffle-i) * 1.4px),calc(-31px + var(--shuffle-i) * 7px),20px) rotate(-1.5deg);filter:brightness(1.28) drop-shadow(0 0 6px rgba(174,99,218,.55))}
  77%{transform:translate3d(calc(-3px + var(--shuffle-i) * .8px),calc(-12px - var(--bridge-y)),12px) rotate(-.7deg);filter:brightness(1.12)}
  100%{opacity:1;transform:translate3d(calc(-2px + var(--shuffle-i) * .45px),calc(var(--shuffle-i) * -1.2px),0) rotate(-.25deg);filter:none}
}
@keyframes riffle-right{
  0%{opacity:0;transform:translate3d(5px,24px,0) rotate(2deg) scale(.96);filter:brightness(.7)}
  10%{opacity:1;transform:translate3d(6px,0,0) rotate(2deg);filter:brightness(1)}
  29%{opacity:1;transform:translate3d(calc(108px + var(--shuffle-i) * 1.5px),calc(8px - var(--shuffle-i) * 1px),0) rotate(11deg)}
  45%{transform:translate3d(calc(112px + var(--shuffle-i) * 1px),calc(-5px + var(--shuffle-i) * 1px),15px) rotate(9deg);filter:brightness(1.08)}
  62%{transform:translate3d(calc(7px - var(--shuffle-i) * 1.4px),calc(-27px + var(--shuffle-i) * 7px),22px) rotate(1.5deg);filter:brightness(1.28) drop-shadow(0 0 6px rgba(174,99,218,.55))}
  77%{transform:translate3d(calc(3px - var(--shuffle-i) * .8px),calc(-9px - var(--bridge-y)),14px) rotate(.7deg);filter:brightness(1.12)}
  100%{opacity:1;transform:translate3d(calc(2px - var(--shuffle-i) * .45px),calc(-4px - var(--shuffle-i) * 1.2px),1px) rotate(.25deg);filter:none}
}
@keyframes shuffle-halo{0%{opacity:0;transform:scale(.62) rotate(-8deg)}28%{opacity:.8}72%{opacity:1;transform:scale(1.04) rotate(5deg)}100%{opacity:0;transform:scale(.86) rotate(9deg)}}
@keyframes shuffle-orbit{0%{opacity:0;transform:scale(.72) rotate(0)}22%{opacity:1}78%{opacity:.8}100%{opacity:0;transform:scale(1.12) rotate(120deg)}}
@keyframes shuffle-spark{0%,100%{opacity:0;transform:scale(.2) rotate(0)}34%{opacity:1;transform:scale(1) rotate(45deg)}68%{opacity:.75;transform:scale(.7) rotate(110deg)}}
@keyframes shuffle-caption{0%,8%{opacity:0;transform:translate(-50%,8px)}20%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
@keyframes shuffle-status-star{to{color:#fff0bd;transform:scale(1.35);text-shadow:0 0 14px #c27bed,0 0 7px #fff}}

/* ---- cut ritual -------------------------------------------------------------
   The upper packet lifts to the right, the lower packet slides clear and crosses
   over it, then the new deck settles in the centre. It shares the shuffle's
   visual language but is deliberately shorter and more decisive. */
.is-cutting .pick-fan,.is-cutting .deal-deck{opacity:.12;filter:blur(2px) saturate(.55);transform:scale(.965)}
.cut-ritual{position:absolute;z-index:12;left:70px;right:70px;top:112px;bottom:188px;display:grid;place-items:center;pointer-events:none;perspective:1100px;isolation:isolate}
.cut-ritual:before{content:"";position:absolute;width:370px;height:290px;border:1px solid rgba(222,190,119,.24);border-radius:50%;background:radial-gradient(ellipse,rgba(154,83,205,.15),rgba(60,41,105,.07) 42%,transparent 70%);box-shadow:inset 0 0 48px rgba(143,77,191,.12),0 0 42px rgba(83,51,125,.14);animation:cut-halo 1.32s ease-in-out both}
.cut-aura{position:absolute;width:330px;height:250px;border-top:1px dashed rgba(227,194,122,.2);border-bottom:1px dashed rgba(227,194,122,.13);border-radius:50%;animation:cut-aura 1.32s cubic-bezier(.2,.7,.2,1) both}
.cut-aura:before{content:"";position:absolute;left:50%;top:-18px;bottom:-18px;width:1px;background:linear-gradient(transparent,rgba(246,218,151,.75) 44%,#fff0bd 50%,rgba(174,99,218,.7) 56%,transparent);box-shadow:0 0 13px rgba(190,114,239,.75);transform:scaleY(0);animation:cut-line 1.32s ease both}
.cut-aura i,.cut-aura b{position:absolute;font-style:normal;font-weight:400;color:#ebcf86;text-shadow:0 0 13px #a85ed1;animation:cut-sigil 1.32s ease both}.cut-aura i{left:20px;top:50%;font-size:24px}.cut-aura b{right:22px;top:49%;font-size:13px;animation-delay:60ms}
.cut-packet{position:absolute;left:50%;top:44%;width:100px;height:170px;transform:translate(-50%,-50%);transform-style:preserve-3d}
.cut-packet img{position:absolute;inset:0;display:block;width:100px;height:170px;object-fit:cover;border:1px solid rgba(232,199,125,.8);border-radius:6px;background:#171226;box-shadow:-6px 9px 14px rgba(0,0,0,.6),0 0 0 1px rgba(86,44,120,.45);opacity:0;will-change:transform,opacity,filter;animation-duration:1.2s;animation-timing-function:cubic-bezier(.22,.7,.2,1);animation-fill-mode:both;animation-delay:calc(var(--cut-i) * 20ms)}
.cut-packet-top img{z-index:calc(var(--cut-i) + 8);animation-name:cut-top-packet}
.cut-packet-bottom img{z-index:calc(var(--cut-i) + 24);animation-name:cut-bottom-packet}
.cut-status{position:absolute;left:50%;top:calc(44% + 130px);transform:translateX(-50%);display:flex;align-items:center;gap:10px;min-width:max-content;padding:7px 14px;border:1px solid rgba(211,174,96,.34);border-radius:18px;background:rgba(5,8,18,.82);box-shadow:0 8px 24px rgba(0,0,0,.38);color:#d6c9ae;animation:cut-caption 1.32s ease both}
.cut-status b{font:500 11px Georgia,"Noto Serif Thai",serif;letter-spacing:.1em}.cut-status i{font-style:normal;font-size:9px;color:#e9ca7c;text-shadow:0 0 9px #a760d0}.cut-status em{display:grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border:1px solid rgba(232,202,135,.45);border-radius:50%;background:linear-gradient(145deg,#2a1640,#0d1123);color:#f0d894;font:600 10px Georgia,serif;font-style:normal;box-shadow:0 0 12px rgba(168,94,209,.28)}
@keyframes cut-top-packet{
  0%{opacity:0;transform:translate3d(0,22px,0) rotate(0) scale(.97);filter:brightness(.72)}
  9%,22%{opacity:1;transform:translate3d(calc(var(--cut-i) * .5px),calc(var(--cut-i) * -1.1px),0) rotate(calc(var(--cut-i) * .08deg));filter:brightness(1)}
  39%{transform:translate3d(calc(108px + var(--cut-i) * .7px),calc(-34px - var(--cut-i) * .8px),22px) rotate(7deg);filter:brightness(1.2) drop-shadow(0 0 6px rgba(174,99,218,.45))}
  57%,72%{transform:translate3d(calc(111px + var(--cut-i) * .45px),calc(10px - var(--cut-i) * 1px),4px) rotate(3deg);filter:brightness(1)}
  88%{transform:translate3d(calc(5px + var(--cut-i) * .35px),calc(3px - var(--cut-i) * 1.1px),0) rotate(.4deg)}
  100%{opacity:1;transform:translate3d(calc(var(--cut-i) * .35px),calc(-2px - var(--cut-i) * 1.1px),0) rotate(0);filter:none}
}
@keyframes cut-bottom-packet{
  0%{opacity:0;transform:translate3d(0,22px,0) rotate(0) scale(.97);filter:brightness(.72)}
  9%,29%{opacity:1;transform:translate3d(calc(var(--cut-i) * .5px),calc(6px - var(--cut-i) * 1.1px),0) rotate(calc(var(--cut-i) * -.06deg));filter:brightness(1)}
  46%,59%{transform:translate3d(calc(-91px - var(--cut-i) * .55px),calc(18px - var(--cut-i) * .8px),10px) rotate(-5deg);filter:brightness(1.07)}
  76%{transform:translate3d(calc(111px - var(--cut-i) * .35px),calc(-13px - var(--cut-i) * 1.1px),30px) rotate(1.5deg);filter:brightness(1.25) drop-shadow(0 0 7px rgba(174,99,218,.5))}
  89%{transform:translate3d(calc(5px - var(--cut-i) * .25px),calc(-10px - var(--cut-i) * 1.1px),18px) rotate(.3deg);filter:brightness(1.08)}
  100%{opacity:1;transform:translate3d(calc(var(--cut-i) * -.25px),calc(-7px - var(--cut-i) * 1.1px),1px) rotate(0);filter:none}
}
@keyframes cut-halo{0%{opacity:0;transform:scale(.72)}26%{opacity:.85}72%{opacity:1;transform:scale(1.04)}100%{opacity:0;transform:scale(.88)}}
@keyframes cut-aura{0%{opacity:0;transform:scaleX(.55) rotate(-4deg)}25%{opacity:1}75%{opacity:.85;transform:scaleX(1.04) rotate(2deg)}100%{opacity:0;transform:scaleX(.82) rotate(4deg)}}
@keyframes cut-line{0%,18%{opacity:0;transform:scaleY(0)}34%,62%{opacity:1;transform:scaleY(1)}82%,100%{opacity:0;transform:scaleY(.25)}}
@keyframes cut-sigil{0%,100%{opacity:0;transform:translateY(-50%) scale(.35) rotate(-20deg)}35%,70%{opacity:1;transform:translateY(-50%) scale(1) rotate(0)}}
@keyframes cut-caption{0%,8%{opacity:0;transform:translate(-50%,8px)}20%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}

@media(prefers-reduced-motion:reduce){
  .shuffle-ritual:before,.shuffle-aura,.shuffle-aura:before,.shuffle-aura:after,.shuffle-status,.shuffle-status i,
  .cut-ritual:before,.cut-aura,.cut-aura:before,.cut-aura i,.cut-aura b,.cut-status{animation:none}
  .shuffle-packet img{animation:none;opacity:1;filter:none}
  .packet-left img{transform:translate3d(calc(-3px + var(--shuffle-i) * .35px),calc(var(--shuffle-i) * -1px),0)}
  .packet-right img{transform:translate3d(calc(3px - var(--shuffle-i) * .35px),calc(-4px - var(--shuffle-i) * 1px),1px)}
  .cut-packet img{animation:none;opacity:1;filter:none}
  .cut-packet-top img{transform:translate3d(calc(-3px + var(--cut-i) * .35px),calc(var(--cut-i) * -1px),0)}
  .cut-packet-bottom img{transform:translate3d(calc(3px - var(--cut-i) * .35px),calc(-6px - var(--cut-i) * 1px),1px)}
  .is-shuffling .pick-fan,.is-shuffling .deal-deck,.is-cutting .pick-fan,.is-cutting .deal-deck{transform:none;filter:none;opacity:.18}
}

/* ---- the celestial card codex ----------------------------------------------
   The library is another room in the observatory, not a generic catalogue. It
   reuses the play table's violet atmosphere, engraved gold, orbital geometry and
   illuminated props while leaving search, filters and card detail behaviour alone. */
.library-shell{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto 1fr;gap:24px 30px;align-items:start;min-height:calc(100vh - 36px);padding:44px clamp(34px,4vw,72px) 92px;background:linear-gradient(180deg,rgba(4,6,15,.13),rgba(3,5,13,.82) 72%),radial-gradient(circle at 52% 18%,rgba(143,75,195,.27),transparent 35%),url("assets/ui/layers/4k/violet-base-3840.webp") top center/cover;color:var(--ivory)}
.library-shell:before{content:"";position:absolute;z-index:1;inset:14px;border:1px solid rgba(222,188,112,.19);border-radius:18px;box-shadow:inset 0 0 0 5px rgba(5,7,17,.2),inset 0 0 65px rgba(2,3,9,.55);pointer-events:none}
.library-shell:after{content:"";position:absolute;z-index:1;left:9%;right:9%;top:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,205,139,.28),#e3bf70,rgba(234,205,139,.28),transparent);box-shadow:0 0 13px rgba(172,102,213,.6);pointer-events:none}
.library-atmosphere{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}
.library-starfield{position:absolute;inset:0;background-image:radial-gradient(circle,#efd995 0 1px,transparent 1.4px),radial-gradient(circle,rgba(189,132,227,.9) 0 1px,transparent 1.5px);background-position:0 0,23px 31px;background-size:73px 73px,97px 97px;mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.28) 58%,transparent);opacity:.23}
.library-celestial-wheel{position:absolute;left:52%;top:300px;width:760px;height:760px;transform:translate(-50%,-50%);border:1px solid rgba(217,182,105,.12);border-radius:50%;background:url("assets/ui/layers/pieces/wheel-clean.png") center/contain no-repeat;filter:drop-shadow(0 0 34px rgba(126,71,170,.22));opacity:.2;animation:library-wheel-drift 80s linear infinite}
.library-crystal,.library-orb{position:absolute;filter:drop-shadow(0 16px 28px rgba(0,0,0,.75));opacity:.72}.library-crystal{left:-54px;top:170px;width:220px}.library-orb{right:-58px;top:185px;width:230px}
.library-hero{position:relative;z-index:3;grid-column:1/-1;min-height:208px;display:grid;grid-template-columns:170px minmax(0,1fr) 170px;align-items:center;overflow:hidden;padding:22px 28px;border:1px solid rgba(220,184,105,.52);border-radius:98px 98px 18px 18px;background:linear-gradient(180deg,rgba(18,22,47,.84),rgba(5,8,20,.91)),radial-gradient(circle at 50% 0,rgba(148,80,199,.34),transparent 54%);box-shadow:inset 0 0 0 5px rgba(4,6,15,.76),inset 0 0 0 7px rgba(205,163,78,.2),inset 0 -32px 70px rgba(2,3,10,.7),0 22px 55px rgba(0,0,0,.42)}
.library-hero:before,.library-hero:after{content:"";position:absolute;top:50%;width:19%;height:1px;background:linear-gradient(90deg,transparent,rgba(229,197,126,.55));box-shadow:0 0 9px rgba(170,99,209,.4)}.library-hero:before{left:18%;transform:translateY(-50%)}.library-hero:after{right:18%;transform:translateY(-50%) scaleX(-1)}
.library-hero-seal{position:relative;width:126px;height:126px;display:flex;align-items:center;justify-content:space-around;justify-self:center;border:1px solid rgba(224,190,116,.48);border-radius:50%;color:#d9ba70;box-shadow:inset 0 0 26px rgba(139,75,183,.28),0 0 0 9px rgba(201,165,92,.035),0 0 28px rgba(129,71,170,.18)}
.library-hero-seal:before,.library-hero-seal:after{content:"";position:absolute;border:1px solid rgba(224,190,116,.18);border-radius:50%;inset:13px}.library-hero-seal:after{inset:27px;border-style:dashed}.library-hero-seal span{font:400 23px Georgia,serif;text-shadow:0 0 13px rgba(192,115,229,.75)}.library-hero-seal i{font-style:normal;font-size:13px;color:#f3dda0;text-shadow:0 0 14px #b266da;animation:library-star-breathe 2.8s ease-in-out infinite}
.library-hero-copy{position:relative;z-index:2;text-align:center}.library-kicker{display:flex;align-items:center;justify-content:center;gap:11px;color:#a99b82;font:500 9.5px Georgia,serif;letter-spacing:.28em}.library-kicker i{font-style:normal;color:#d3ad5b;text-shadow:0 0 8px rgba(181,105,215,.7)}.library-hero h1{margin:8px 0 7px;font:500 clamp(36px,3.2vw,54px)/1.08 Georgia,"Noto Serif Thai",serif;letter-spacing:.015em;color:#f0d99f;text-shadow:0 2px 3px #000,0 0 26px rgba(174,102,215,.38)}.library-hero-copy p{display:flex;align-items:center;justify-content:center;gap:10px;margin:0;color:#a9a08f;font-size:11px;letter-spacing:.035em}.library-hero-copy p b{color:#e0c47e;font-family:Georgia,"Noto Serif Thai",serif;font-weight:500}.library-hero-copy p i{width:3px;height:3px;border-radius:50%;background:#b48a3e;box-shadow:0 0 6px #b66ed8}
.library-hero-orbit{position:relative;width:126px;height:126px;justify-self:center;border:1px solid rgba(222,187,112,.42);border-radius:50%;box-shadow:inset 0 0 26px rgba(139,75,183,.25),0 0 28px rgba(129,71,170,.16)}.library-hero-orbit:before,.library-hero-orbit:after,.library-hero-orbit i{content:"";position:absolute;border:1px solid rgba(222,187,112,.17);border-radius:50%}.library-hero-orbit:before{inset:17px}.library-hero-orbit:after{left:9px;right:9px;top:50%;height:42px;transform:translateY(-50%) rotate(22deg)}.library-hero-orbit i:first-child{left:50%;top:9px;bottom:9px;width:43px;transform:translateX(-50%) rotate(-18deg)}.library-hero-orbit i:nth-child(2){inset:31px;border-style:dashed}.library-hero-orbit b{position:absolute;inset:0;display:grid;place-items:center;color:#efd895;font-size:16px;text-shadow:0 0 15px #b266da;animation:library-star-breathe 2.8s ease-in-out infinite .8s}
.library-side{position:sticky;z-index:3;top:18px;display:flex;flex-direction:column;gap:8px;overflow:hidden;padding:18px 0 17px;border:1px solid rgba(211,174,96,.52);border-radius:15px;background:linear-gradient(180deg,rgba(17,22,48,.94),rgba(5,8,19,.97));box-shadow:inset 0 0 0 4px rgba(4,6,15,.55),inset 0 0 42px rgba(117,61,157,.12),0 18px 42px rgba(0,0,0,.45)}
.library-side:before{content:"";position:absolute;inset:7px;border:1px solid rgba(211,174,96,.12);border-radius:10px;pointer-events:none}.library-side-seal{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:15px;height:46px;margin:0 13px 4px;border-bottom:1px solid rgba(211,174,96,.16);color:#c9a55c}.library-side-seal span{font:400 15px Georgia,serif}.library-side-seal i{font-style:normal;font-size:9px;color:#f0d792;text-shadow:0 0 10px #a45dcb}
.library-side .side-title{position:relative;z-index:1;padding:0 16px;color:#9e8a68;font:500 9px Georgia,"Noto Serif Thai",serif;letter-spacing:.17em}.library-side .side-title:not(:first-child){margin-top:10px;padding-top:13px;border-top:1px solid rgba(201,165,92,.14)}
.library-side .suit-list{position:relative;z-index:1}.library-side .suit-list .spread{position:relative;min-height:50px;padding:8px 16px;gap:12px;border-bottom:1px solid rgba(201,165,92,.07);background:transparent}.library-side .suit-list .spread i{width:29px;height:29px;border-color:rgba(210,175,98,.31);background:radial-gradient(circle,rgba(137,73,181,.15),transparent 70%);color:#bda464;box-shadow:inset 0 0 9px rgba(137,73,181,.15)}.library-side .suit-list .spread b{color:#cfc5b1;font-family:Georgia,"Noto Serif Thai",serif;font-size:12px}.library-side .suit-list .spread small{color:#7f786b;font-size:9px}.library-side .suit-list .spread:hover:not(.active){background:linear-gradient(90deg,rgba(201,165,92,.07),transparent)}.library-side .suit-list .spread.active{background:linear-gradient(90deg,rgba(121,55,170,.4),rgba(121,55,170,.08) 72%,transparent)}.library-side .suit-list .spread.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;background:linear-gradient(#c798df,#e4bc64);box-shadow:0 0 10px #a45dcb}.library-side .suit-list .spread.active i{border-color:#cfaa58;color:#f1d891;box-shadow:inset 0 0 12px rgba(137,73,181,.25),0 0 10px rgba(154,87,194,.17)}.library-side .suit-list .spread.active b{color:#f0d99f}
.library-side .deck-stats{position:relative;z-index:1;padding:0 16px}.library-side .deck-stats div{padding:5px 0;border-bottom:1px dotted rgba(201,165,92,.1);color:#8f887a}.library-side .deck-stats b{color:#d7c599}.library-side .deck-stats .current{margin-top:5px;padding:8px 9px;border:1px solid rgba(201,165,92,.18);border-radius:8px;background:rgba(121,55,170,.11)}.library-side .deck-stats .current b{color:#f0d894;text-shadow:0 0 9px rgba(172,102,211,.45)}
.library-main{position:relative;z-index:3;min-width:0}.library-main .library-tools{position:sticky;top:0;z-index:15;display:flex;align-items:center;gap:10px;margin-bottom:20px;padding:12px 14px 12px 42px;border:1px solid rgba(211,174,96,.42);border-radius:18px;background:linear-gradient(180deg,rgba(16,21,45,.94),rgba(5,8,19,.96));box-shadow:inset 0 0 0 3px rgba(4,6,15,.4),0 14px 34px rgba(0,0,0,.38);backdrop-filter:blur(14px)}.library-main .library-tools:before{content:"✦";position:absolute;left:17px;top:50%;transform:translateY(-50%);color:#e2c579;font-size:11px;text-shadow:0 0 11px #a760ce}.library-main .library-tools input{flex:1 1 260px;min-width:180px;height:38px;padding:8px 16px;border:1px solid rgba(203,165,86,.32);border-radius:18px;background:rgba(3,6,16,.72);color:#eee2c5;outline:none;box-shadow:inset 0 0 13px rgba(0,0,0,.38)}.library-main .library-tools input::placeholder{color:#777265}.library-main .library-tools input:focus{border-color:#c9a55c;box-shadow:inset 0 0 13px rgba(0,0,0,.38),0 0 0 2px rgba(170,98,207,.18),0 0 16px rgba(170,98,207,.15)}.library-main .library-tools button{min-height:32px;border-color:rgba(201,165,92,.28);background:rgba(7,10,23,.66);color:#9e9789}.library-main .library-tools button:hover{border-color:#a98441;color:#e4d2aa}.library-main .library-tools button.active{border-color:#c19a4b;background:linear-gradient(180deg,rgba(111,55,155,.52),rgba(40,20,62,.68));color:#f0d99f;box-shadow:inset 0 0 11px rgba(190,119,226,.14)}.library-main .result-count{border-color:rgba(201,165,92,.32);background:rgba(5,8,18,.6);color:#d6bb78}
.library-main .card-library{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:18px}.library-main .card-library>button{position:relative;display:flex;flex-direction:column;min-height:0;overflow:hidden;padding:18px 17px 15px;border:1px solid rgba(208,169,85,.34);border-radius:12px;background:radial-gradient(circle at 50% 18%,rgba(109,54,151,.23),transparent 31%),linear-gradient(165deg,rgba(20,27,55,.97),rgba(4,7,17,.99));color:#ddd3be;text-align:left;box-shadow:inset 0 0 0 4px rgba(2,4,12,.38),inset 0 -28px 48px rgba(0,0,0,.2),0 10px 24px rgba(0,0,0,.3);transition:transform .23s cubic-bezier(.2,.8,.3,1),border-color .23s,box-shadow .23s}.library-main .card-library>button:before{content:"✦";position:absolute;z-index:2;right:13px;top:10px;color:rgba(224,192,119,.52);font-size:8px;text-shadow:0 0 8px rgba(174,97,211,.7)}.library-main .card-library>button:after{content:"";position:absolute;inset:6px;border:1px solid rgba(208,169,85,.1);border-radius:8px;pointer-events:none}.library-main .card-library>button:hover{z-index:2;transform:translateY(-7px);border-color:#c8a04e;box-shadow:inset 0 0 0 4px rgba(2,4,12,.38),inset 0 -28px 48px rgba(0,0,0,.2),0 18px 35px rgba(0,0,0,.5),0 0 24px rgba(139,76,179,.24)}.library-main .card-library>button:focus-visible{outline:2px solid rgba(232,200,128,.75);outline-offset:3px}.library-main .card-library figure{position:relative;height:224px;margin:0 0 13px;display:grid;place-items:center}.library-main .card-library figure:before,.library-main .card-library figure:after{content:"";position:absolute;border:1px solid rgba(207,171,91,.14);border-radius:50%}.library-main .card-library figure:before{width:190px;height:190px}.library-main .card-library figure:after{width:158px;height:158px;border-style:dashed;transform:rotate(18deg)}.library-main .card-library img{position:relative;z-index:1;display:block;width:116px;height:auto;aspect-ratio:404 / 784;object-fit:fill;object-view-box:inset(80px);margin:0;border:0;border-radius:5px;background:transparent;box-shadow:0 11px 23px rgba(0,0,0,.63),0 0 0 1px rgba(211,173,91,.72),0 0 18px rgba(130,68,169,.14)}.library-main .card-library .card-rank{position:relative;color:#a78f5f;font:500 8.5px Georgia,"Noto Serif Thai",serif;letter-spacing:.13em}.library-main .card-library h2{position:relative;margin:5px 0 1px;color:#efd89f;font:500 16px Georgia,"Noto Serif Thai",serif;text-shadow:0 1px 2px #000}.library-main .card-library small{position:relative;color:#716b7d;font-size:10px}.library-main .card-library p{position:relative;flex:1;margin:9px 0 0;color:#aaa294;font:400 10.5px/1.66 Georgia,"Noto Serif Thai",serif;-webkit-line-clamp:3}.library-main .card-library b{position:relative;margin-top:10px;padding-top:9px;border-top:1px solid rgba(201,165,92,.12);color:#aa78c9;font-size:9px;font-weight:400;line-height:1.5}.library-main .library-empty{margin:0;padding:70px 20px;border:1px solid rgba(201,165,92,.18);border-radius:14px;background:rgba(6,9,20,.72);color:#918979;text-align:center}
@keyframes library-wheel-drift{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes library-star-breathe{50%{transform:scale(1.3);color:#fff0bd;text-shadow:0 0 17px #bd73e7,0 0 5px #fff}}

@media(max-width:1180px){
  .library-shell{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;padding:34px 24px 70px}.library-hero{grid-column:1;grid-template-columns:130px minmax(0,1fr) 130px}.library-side{position:relative;top:auto}.library-side .suit-list{flex-direction:row;flex-wrap:wrap;padding:0 10px}.library-side .suit-list .spread{flex:1 1 145px;width:auto;border-bottom:0}.library-side .deck-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.library-side .deck-stats .current{margin-top:0}.library-main .card-library{grid-template-columns:repeat(auto-fill,minmax(195px,1fr))}
}
@media(max-width:760px){
  .library-shell{padding:22px 14px 54px;gap:16px}.library-shell:before{inset:6px}.library-crystal,.library-orb{display:none}.library-hero{min-height:170px;grid-template-columns:1fr;padding:22px 18px;border-radius:52px 52px 14px 14px}.library-hero-seal,.library-hero-orbit,.library-hero:before,.library-hero:after{display:none}.library-hero h1{font-size:32px}.library-hero-copy p{flex-wrap:wrap;line-height:1.7}.library-side .deck-stats{grid-template-columns:1fr 1fr}.library-main .library-tools{top:0;flex-direction:column;align-items:stretch;padding:14px}.library-main .library-tools:before{display:none}.library-main .result-count{align-self:flex-end}.library-main .card-library{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.library-main .card-library>button{padding:12px 10px}.library-main .card-library figure{height:184px}.library-main .card-library figure:before{width:152px;height:152px}.library-main .card-library figure:after{width:126px;height:126px}.library-main .card-library img{width:94px}.library-main .card-library p{display:none}
}
@media(prefers-reduced-motion:reduce){.library-celestial-wheel,.library-hero-seal i,.library-hero-orbit b{animation:none}}

/* ---- the celestial reading manuscript --------------------------------------
   The guide is the observatory's illuminated manuscript: the same violet sky,
   engraved brass, orbit lines and altar props as the reading room, organised as
   a calm sequence of lessons instead of one long technical document. */
.guide-shell{position:relative;isolation:isolate;overflow:hidden;min-height:calc(100vh - 36px);padding:44px clamp(34px,4vw,72px) 92px;background:linear-gradient(180deg,rgba(4,6,15,.13),rgba(3,5,13,.85) 74%),radial-gradient(circle at 50% 15%,rgba(143,75,195,.3),transparent 35%),url("assets/ui/layers/4k/violet-base-3840.webp") top center/cover;color:var(--ivory)}
.guide-shell:before{content:"";position:absolute;z-index:1;inset:14px;border:1px solid rgba(222,188,112,.19);border-radius:18px;box-shadow:inset 0 0 0 5px rgba(5,7,17,.2),inset 0 0 65px rgba(2,3,9,.55);pointer-events:none}.guide-shell:after{content:"";position:absolute;z-index:1;left:9%;right:9%;top:14px;height:1px;background:linear-gradient(90deg,transparent,rgba(234,205,139,.28),#e3bf70,rgba(234,205,139,.28),transparent);box-shadow:0 0 13px rgba(172,102,213,.6);pointer-events:none}
.guide-atmosphere{position:absolute;z-index:0;inset:0;overflow:hidden;pointer-events:none}.guide-starfield{position:absolute;inset:0;background-image:radial-gradient(circle,#efd995 0 1px,transparent 1.4px),radial-gradient(circle,rgba(189,132,227,.9) 0 1px,transparent 1.5px);background-position:0 0,23px 31px;background-size:73px 73px,97px 97px;mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.25) 62%,transparent);opacity:.22}.guide-celestial-wheel{position:absolute;left:50%;top:290px;width:780px;height:780px;transform:translate(-50%,-50%);border:1px solid rgba(217,182,105,.12);border-radius:50%;background:url("assets/ui/layers/pieces/wheel-clean.png") center/contain no-repeat;filter:drop-shadow(0 0 34px rgba(126,71,170,.24));opacity:.2;animation:library-wheel-drift 90s linear infinite reverse}.guide-crystal,.guide-orb{position:absolute;filter:drop-shadow(0 16px 28px rgba(0,0,0,.75));opacity:.68}.guide-crystal{left:-55px;top:185px;width:220px}.guide-orb{right:-56px;top:185px;width:230px}
.guide-hero{position:relative;z-index:3;max-width:1500px;min-height:210px;margin:0 auto 20px;display:grid;grid-template-columns:175px minmax(0,1fr) 175px;align-items:center;overflow:hidden;padding:22px 30px;border:1px solid rgba(220,184,105,.52);border-radius:100px 100px 18px 18px;background:linear-gradient(180deg,rgba(18,22,47,.84),rgba(5,8,20,.91)),radial-gradient(circle at 50% 0,rgba(148,80,199,.36),transparent 54%);box-shadow:inset 0 0 0 5px rgba(4,6,15,.76),inset 0 0 0 7px rgba(205,163,78,.2),inset 0 -32px 70px rgba(2,3,10,.7),0 22px 55px rgba(0,0,0,.42)}
.guide-hero:before,.guide-hero:after{content:"";position:absolute;top:50%;width:18%;height:1px;background:linear-gradient(90deg,transparent,rgba(229,197,126,.55));box-shadow:0 0 9px rgba(170,99,209,.4)}.guide-hero:before{left:18%;transform:translateY(-50%)}.guide-hero:after{right:18%;transform:translateY(-50%) scaleX(-1)}
.guide-hero-seal{position:relative;width:128px;height:128px;display:flex;align-items:center;justify-content:space-around;justify-self:center;border:1px solid rgba(224,190,116,.48);border-radius:50%;color:#d9ba70;box-shadow:inset 0 0 26px rgba(139,75,183,.28),0 0 0 9px rgba(201,165,92,.035),0 0 28px rgba(129,71,170,.18)}.guide-hero-seal:before,.guide-hero-seal:after{content:"";position:absolute;inset:13px;border:1px solid rgba(224,190,116,.18);border-radius:50%}.guide-hero-seal:after{inset:28px;border-style:dashed}.guide-hero-seal span{font:400 23px Georgia,serif;text-shadow:0 0 13px rgba(192,115,229,.75)}.guide-hero-seal b{font-size:13px;color:#f3dda0;text-shadow:0 0 14px #b266da;animation:library-star-breathe 2.8s ease-in-out infinite}
.guide-hero-copy{position:relative;z-index:2;text-align:center}.guide-kicker{display:flex;align-items:center;justify-content:center;gap:11px;color:#a99b82;font:500 9.5px Georgia,"Noto Serif Thai",serif;letter-spacing:.22em}.guide-kicker i{font-style:normal;color:#d3ad5b;text-shadow:0 0 8px rgba(181,105,215,.7)}.guide-hero h1{margin:8px 0 9px;color:#f0d99f;font:500 clamp(38px,3.35vw,56px)/1.08 Georgia,"Noto Serif Thai",serif;letter-spacing:.015em;text-shadow:0 2px 3px #000,0 0 26px rgba(174,102,215,.38)}.guide-hero-copy p{max-width:600px;margin:0 auto;color:#aaa193;font:400 12px/1.75 Georgia,"Noto Serif Thai",serif}
.guide-hero-orbit{position:relative;width:128px;height:128px;justify-self:center;border:1px solid rgba(222,187,112,.42);border-radius:50%;box-shadow:inset 0 0 26px rgba(139,75,183,.25),0 0 28px rgba(129,71,170,.16)}.guide-hero-orbit:before,.guide-hero-orbit:after,.guide-hero-orbit i{content:"";position:absolute;border:1px solid rgba(222,187,112,.17);border-radius:50%}.guide-hero-orbit:before{inset:17px}.guide-hero-orbit:after{left:9px;right:9px;top:50%;height:42px;transform:translateY(-50%) rotate(22deg)}.guide-hero-orbit i:first-child{left:50%;top:9px;bottom:9px;width:43px;transform:translateX(-50%) rotate(-18deg)}.guide-hero-orbit i:nth-child(2){inset:31px;border-style:dashed}.guide-hero-orbit b{position:absolute;inset:0;display:grid;place-items:center;color:#efd895;font-size:17px;text-shadow:0 0 15px #b266da;animation:library-star-breathe 2.8s ease-in-out infinite .8s}
.guide-primer{position:relative;z-index:3;max-width:1500px;margin:0 auto 24px;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.guide-primer article{position:relative;display:grid;grid-template-columns:48px 1fr;gap:13px;align-items:center;min-height:92px;padding:14px 18px;border:1px solid rgba(211,174,96,.3);border-radius:12px;background:linear-gradient(150deg,rgba(19,24,50,.91),rgba(5,8,19,.95));box-shadow:inset 0 0 0 3px rgba(4,6,15,.4),0 12px 28px rgba(0,0,0,.28)}.guide-primer article:after{content:"";position:absolute;right:12px;top:12px;width:5px;height:5px;border:1px solid rgba(224,190,116,.5);transform:rotate(45deg)}.guide-primer article>span{width:43px;height:43px;display:grid;place-items:center;border:1px solid rgba(216,179,98,.4);border-radius:50%;color:#e0c47e;font:500 15px Georgia,"Noto Serif Thai",serif;box-shadow:inset 0 0 14px rgba(125,64,168,.22),0 0 12px rgba(125,64,168,.12)}.guide-primer b{display:block;margin-bottom:3px;color:#ead49c;font:500 14px Georgia,"Noto Serif Thai",serif}.guide-primer p{margin:0;color:#8f887c;font:400 10.5px/1.6 Georgia,"Noto Serif Thai",serif}
.guide-layout{position:relative;z-index:3;max-width:1500px;margin:0 auto;display:grid;grid-template-columns:285px minmax(0,1fr);gap:24px;align-items:start}.guide-toc{position:sticky;top:16px;display:flex;flex-direction:column;gap:3px;overflow:hidden;padding:16px 0 18px;border:1px solid rgba(211,174,96,.5);border-radius:15px;background:linear-gradient(180deg,rgba(17,22,48,.95),rgba(5,8,19,.98));box-shadow:inset 0 0 0 4px rgba(4,6,15,.55),inset 0 0 42px rgba(117,61,157,.12),0 18px 42px rgba(0,0,0,.45)}.guide-toc:before{content:"";position:absolute;inset:7px;border:1px solid rgba(211,174,96,.11);border-radius:10px;pointer-events:none}.guide-toc-seal{position:relative;z-index:1;height:48px;margin:0 15px 8px;display:flex;align-items:center;justify-content:center;gap:17px;border-bottom:1px solid rgba(211,174,96,.16);color:#c9a55c}.guide-toc-seal span{font:400 15px Georgia,serif}.guide-toc-seal i{font-style:normal;font-size:9px;color:#f0d792;text-shadow:0 0 10px #a45dcb}.guide-toc>b{position:relative;z-index:1;margin:0;padding:0 17px 6px;color:#a18f6c;font:500 9px Georgia,"Noto Serif Thai",serif;letter-spacing:.18em;text-transform:uppercase}.guide-toc>small{position:relative;z-index:1;margin:8px 0 2px;padding:9px 17px 3px;border-top:1px solid rgba(201,165,92,.1);color:#716a61;font:500 8px Georgia,"Noto Serif Thai",serif;letter-spacing:.13em;text-transform:uppercase}.guide-toc button{position:relative;z-index:1;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;width:100%;min-height:43px;padding:6px 17px;border:0;border-radius:0;background:transparent;color:#bdb5a6;font:400 11.5px Georgia,"Noto Serif Thai",serif;text-align:left;cursor:pointer;transition:.18s}.guide-toc button>i{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(210,175,98,.26);border-radius:50%;font-style:normal;color:#ac9057;background:radial-gradient(circle,rgba(137,73,181,.14),transparent 72%)}.guide-toc button:hover{background:linear-gradient(90deg,rgba(201,165,92,.08),transparent);color:#f2d58e}.guide-toc button.active{background:linear-gradient(90deg,rgba(121,55,170,.43),rgba(121,55,170,.08) 75%,transparent);color:#f2d58e}.guide-toc button.active:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;background:linear-gradient(#c798df,#e4bc64);box-shadow:0 0 10px #a45dcb}.guide-toc button.active>i{border-color:#cfaa58;color:#f1d891;box-shadow:inset 0 0 12px rgba(137,73,181,.25),0 0 10px rgba(154,87,194,.17)}.guide-toc .guide-start{display:grid;grid-template-columns:20px auto;justify-content:center;width:auto;min-height:40px;margin:14px 16px 0;padding:8px 16px;border:1px solid rgba(213,174,91,.5);border-radius:20px;background:linear-gradient(180deg,rgba(111,55,155,.52),rgba(40,20,62,.72));color:#efd89f;box-shadow:inset 0 0 14px rgba(190,119,226,.14),0 6px 18px rgba(0,0,0,.35)}.guide-toc .guide-start:hover{background:linear-gradient(180deg,rgba(130,65,179,.66),rgba(49,24,73,.8));box-shadow:inset 0 0 14px rgba(190,119,226,.22),0 0 16px rgba(151,84,192,.2)}.guide-toc .guide-start>i{width:auto;height:auto;border:0;background:none;color:#f0d792}
.guide-body{display:flex;flex-direction:column;gap:18px;min-width:0}.doc-section{position:relative;scroll-margin-top:18px;overflow:hidden;padding:0;border:1px solid rgba(215,176,94,.36);border-radius:14px;background:linear-gradient(155deg,rgba(18,24,51,.95),rgba(5,8,19,.98));box-shadow:inset 0 0 0 4px rgba(3,5,13,.5),0 15px 34px rgba(0,0,0,.36)}.doc-section:before{content:"";position:absolute;z-index:0;right:-80px;top:-80px;width:220px;height:220px;border:1px solid rgba(217,179,95,.08);border-radius:50%;box-shadow:0 0 0 24px rgba(217,179,95,.018),0 0 0 47px rgba(217,179,95,.012)}.doc-section>header{position:relative;z-index:1;display:grid;grid-template-columns:45px 46px minmax(0,1fr);align-items:center;gap:12px;min-height:88px;padding:14px 22px;border-bottom:1px solid rgba(201,165,92,.16);background:linear-gradient(90deg,rgba(99,48,139,.2),transparent 70%)}.doc-section>header>span{color:#716a60;font:500 10px Georgia,serif;letter-spacing:.13em}.doc-section>header>i{width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(218,181,99,.42);border-radius:50%;font-style:normal;color:#e2c579;text-shadow:0 0 12px #9855bf;box-shadow:inset 0 0 14px rgba(121,60,164,.2)}.doc-section>header small{display:block;margin-bottom:2px;color:#8d7b5d;font:500 8px Georgia,"Noto Serif Thai",serif;letter-spacing:.16em;text-transform:uppercase}.doc-section>header h2{margin:0;color:#f0d99f;font:500 22px Georgia,"Noto Serif Thai",serif;text-shadow:0 1px 2px #000}.doc-copy{position:relative;z-index:1;padding:19px 24px 23px}.doc-copy>p:first-child{margin-top:0}.doc-section p,.doc-section li{color:#d7d0c4;font:400 12.5px/1.88 Georgia,"Noto Serif Thai",serif}.doc-section ul,.doc-section ol{margin:9px 0;padding-left:22px;list-style:disc}.doc-section li{margin-bottom:7px;padding-left:3px}.doc-section li::marker{color:#a777c7}.doc-section b{color:#f0dfae;font-weight:600}.doc-section .pos-keywords{margin-bottom:13px;color:#bd8ddb;font-size:10.5px;letter-spacing:.03em}.doc-section .adv-sub{margin:18px 0 8px;padding-top:14px;border-top:1px solid rgba(201,165,92,.13);color:#d6ba75;font:500 13px Georgia,"Noto Serif Thai",serif}.doc-section .section-closing{margin-top:13px;padding:12px 14px;border-left:2px solid rgba(177,111,210,.6);background:linear-gradient(90deg,rgba(116,60,154,.13),transparent);color:#aaa193;font-style:italic}
@media(max-width:1180px){.guide-shell{padding:34px 24px 70px}.guide-hero{grid-template-columns:135px minmax(0,1fr) 135px}.guide-layout{grid-template-columns:1fr}.guide-toc{position:relative;top:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:16px}.guide-toc:before{inset:7px}.guide-toc-seal,.guide-toc>b,.guide-toc>small{grid-column:1/-1}.guide-toc>small{margin-top:5px}.guide-toc button{border-radius:8px}.guide-toc .guide-start{grid-column:1/-1;justify-self:center;min-width:220px}.guide-primer{grid-template-columns:1fr 1fr}.guide-primer article:last-child{grid-column:1/-1}}
@media(max-width:760px){.guide-shell{padding:22px 14px 54px}.guide-shell:before{inset:6px}.guide-crystal,.guide-orb{display:none}.guide-hero{min-height:176px;grid-template-columns:1fr;padding:22px 18px;border-radius:54px 54px 14px 14px}.guide-hero-seal,.guide-hero-orbit,.guide-hero:before,.guide-hero:after{display:none}.guide-hero h1{font-size:34px}.guide-hero-copy p{font-size:11px}.guide-primer{grid-template-columns:1fr;gap:8px}.guide-primer article:last-child{grid-column:auto}.guide-primer article{min-height:80px}.guide-toc{grid-template-columns:1fr;padding:14px 10px}.guide-toc-seal,.guide-toc>b,.guide-toc>small,.guide-toc .guide-start{grid-column:1}.doc-section>header{grid-template-columns:35px 40px minmax(0,1fr);gap:9px;padding:12px 15px}.doc-section>header>i{width:38px;height:38px}.doc-section>header h2{font-size:18px}.doc-copy{padding:16px 17px 19px}.doc-section p,.doc-section li{font-size:11.5px}}
@media(prefers-reduced-motion:reduce){.guide-celestial-wheel,.guide-hero-seal b,.guide-hero-orbit b{animation:none}}

/* Taking the reading away. Two doors, side by side and the same size, because
   neither is the lesser one: a file to keep, or a mail draft. */
.share-modal{position:relative;width:min(560px,94vw);max-height:92vh;overflow:auto;padding:34px 34px 22px;
  border:1px solid rgba(201,165,92,.6);border-radius:14px;color:#e6dcc4;
  background:radial-gradient(circle at 80% -10%,rgba(96,45,140,.3),transparent 45%),linear-gradient(180deg,#121829,#070b16);
  box-shadow:0 26px 70px rgba(0,0,0,.72),inset 0 0 0 1px rgba(201,165,92,.12)}
.share-modal header{text-align:center;margin-bottom:20px}
.share-modal h2{margin:0 0 6px;font:500 22px Georgia,"Noto Serif Thai",serif;color:var(--gold-soft)}
.share-modal header p{margin:0;font-size:12px;line-height:1.7;color:#a79f92}
.share-options{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.share-option{display:flex;align-items:flex-start;gap:11px;text-align:left;text-decoration:none;cursor:pointer;
  padding:15px 14px;border:1px solid rgba(201,165,92,.32);border-radius:11px;color:#ddd3be;
  background:linear-gradient(160deg,rgba(20,27,53,.92),rgba(6,9,18,.96));transition:.18s}
.share-option:hover{transform:translateY(-2px);border-color:#b49451;box-shadow:0 10px 24px rgba(0,0,0,.4),0 0 16px rgba(121,67,164,.18)}
.share-option:disabled{opacity:.5;cursor:progress;transform:none}
.share-option i{font-style:normal;font-size:20px;line-height:1;color:var(--gold);flex:0 0 auto;margin-top:1px}
.share-option span{display:flex;flex-direction:column;gap:4px;min-width:0}
.share-option b{font:500 14px Georgia,"Noto Serif Thai",serif;color:var(--gold-soft)}
.share-option small{font-size:10.5px;line-height:1.65;color:#9b9384}
.share-modal footer{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:20px;
  padding-top:14px;border-top:1px solid rgba(201,165,92,.2)}
.share-modal footer div{display:flex;gap:8px}
.share-modal footer button{border:1px solid rgba(201,165,92,.4);background:#0d1426;color:#d5c9af;
  padding:8px 16px;border-radius:18px;cursor:pointer;font-size:12px}
.share-status{font-size:11px;color:#8f8877;min-height:1em}
.share-status.is-done{color:#8fc79a}
.share-status.is-failed{color:#d08c8c}
@media(max-width:560px){.share-options{grid-template-columns:1fr}}






/* The 78 cards and the guide are two views of the same reference, so they should
   sit on the same measure. The guide caps its content at 1500 and centres it; the
   library was letting its grid fill the padded width, which put the cards 200px
   wider and 245px further right than the guide beside it. Same sidebar, same gap,
   same total. The shell itself stays full-bleed because it paints the background. */
@media(min-width:1101px){
  .library-shell{grid-template-columns:285px minmax(0,1191px);gap:24px;justify-content:center}
}

/* The four parts of life, on the card page. Two columns so the querent can see at
   a glance which of them this card actually speaks to, and read only that one. */
.card-domains{margin-top:16px;padding-top:14px;border-top:1px solid rgba(201,165,92,.22)}
.card-domains>h4{margin:0 0 10px;font:600 10px Georgia,"Noto Serif Thai",serif;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.card-domains{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}
.card-domains>h4{grid-column:1/-1}
.card-domains article{margin:0}
.card-domains h5{margin:0 0 3px;font:600 11px Georgia,"Noto Serif Thai",serif;color:var(--gold-soft)}
.card-domains p{margin:0;font-size:11.5px;line-height:1.75;color:#a79f92}
@media(max-width:760px){.card-domains{grid-template-columns:1fr}}

/* The four parts of life, spoken once at the close. Each gets its name over its
   paragraph rather than inline, because four of them in a row need something for the
   eye to land on; the violet matches the pair labels, which are the other place a
   short name sits above prose. The rule down the left ties the four together as one
   answer instead of four loose paragraphs. */
.block-run.is-domain{display:grid;gap:10px}
.life-area{padding-left:10px;border-left:2px solid rgba(123,90,166,.34)}
.life-area>h5{margin:0 0 2px;font:600 calc(9.5px * var(--read-scale,1)) Georgia,"Noto Serif Thai",serif;letter-spacing:.14em;text-transform:uppercase;color:#7b5aa6}
.life-area>p{margin:0}

/* ---- what the question is about ---------------------------------------------- */
/* Five small pills under the label: the four parts of life the corpus separates,
   and "in general". The chosen one steers which of a card's lines the answer
   speaks; nothing about the cards themselves changes. They live in the pinned
   question box, so they take a fixed row and the field gives up the height. */
.topic-row{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.topic-row button{font:500 10px/1 "Sarabun","Noto Sans Thai",system-ui,sans-serif;padding:5px 8px;border-radius:12px;border:1px solid rgba(194,147,67,.38);background:rgba(7,12,24,.6);color:#c9bfa8;cursor:pointer;white-space:nowrap}
.topic-row button:hover{border-color:rgba(230,183,99,.6);color:#eadfc6}
.topic-row button.active{background:linear-gradient(180deg,#5c2489,#2a1048);border-color:rgba(230,183,99,.7);color:#f1e6cf;box-shadow:0 0 10px rgba(126,54,177,.35)}
.topic-row button:disabled{opacity:.55;cursor:default}
.topic-row button:focus-visible{outline:2px solid rgba(230,183,99,.8);outline-offset:1px}
.ritual-sidebar .question-box .topic-row{flex:0 0 auto}
.ritual-sidebar .question-box textarea{min-height:36px}
/* ---- the answer, first ------------------------------------------------------- */
/* The first section is the answer: it opens by default like any first section,
   and wears the amethyst the app already uses for what the reader says, so the
   eye lands on it before the card-by-card detail. */
.accordion[data-section="answer"]{border-color:rgba(123,90,166,.62);background:rgba(123,90,166,.09)}
.accordion[data-section="answer"]>button{font-weight:700;color:#4a2f78}
.accordion[data-section="answer"] .block-run.is-reading p{color:#2b2119}
.accordion[data-section="answer"] .pair-label{color:#5f3a96}
/* the story sits right under the answer and opens with it; a lighter wash of the
   same amethyst says it belongs to the summary, not to the card-by-card detail */
.accordion[data-section="story"]{border-color:rgba(123,90,166,.42);background:rgba(123,90,166,.045)}
.accordion[data-section="story"]>button{font-weight:700;color:#4a2f78}
.accordion[data-section="story"] .linked{margin-bottom:12px}
/* the card-by-card sections fold into one row; open, it holds them as a column of
   their own accordions, set in a little from the row's edge */
.accordion-group>.accordion-body.group-body{padding:6px 6px 5px;display:flex;flex-direction:column;gap:6px}
.accordion-group>.accordion-body.group-body>.accordion{border-color:rgba(84,56,24,.32)}
/* which engine produced the reading, in the same place every game here names its brain */
.reading-head h2:has(+.brain-version){margin-bottom:2px}.brain-version{margin:0 0 12px;font:600 9.5px Georgia,"Noto Serif Thai",serif;letter-spacing:.08em;color:#8a6a34}

/* Mobile and tablet reading mode: real-size text and scrollable card spreads. */
.spread-viewport{display:contents}
.spread-device-hint{display:none}
@media(max-width:1180px){
 html:has(.app-shell),body:has(.app-shell){height:auto;min-height:100svh;overflow-y:auto}
 body .app-shell{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:100svh;transform:none!important}
 body .topbar{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;min-height:60px;grid-template-columns:minmax(0,1fr) auto!important;gap:6px;padding:8px 12px;transform:none!important}
 body .topbar .brand{width:auto;justify-self:start;font-size:22px}
 body .topbar nav{grid-column:1/-1;grid-row:2;display:flex;justify-content:center;width:100%;gap:6px}
 body .topbar .top-actions{grid-column:2;grid-row:1;min-width:0;width:auto;gap:5px}
 body .topbar button{min-height:44px;min-width:44px;font-size:13px;transform:none}
 body .topbar nav button{flex:1;padding:8px 4px;white-space:normal}
 body .workspace{width:100%!important;height:auto!important;min-height:0;grid-template-columns:240px minmax(0,1fr)!important;gap:12px;padding:12px;overflow:clip}
 body .workspace>*{min-width:0}
 body .ritual-sidebar{min-height:0;height:auto;padding:18px 12px;align-self:start}
 body .sidebar-heading{padding:0;margin:0 0 12px}
 body .sidebar-heading h1{font-size:23px}
 body .spread-list{position:relative;inset:auto;width:auto;margin:0;gap:8px}
 body .spread{min-height:52px;font-size:13px}
 body .spread b{font-size:14px}
 body .spread small{font-size:11px;line-height:1.6}
 body .ritual-sidebar .question-box{position:relative;inset:auto;width:100%;height:auto;min-height:0;transform:none;margin-top:18px;padding:0;gap:10px}
 body .question-box textarea{font-size:16px;min-height:70px;width:100%}
 body .question-box button{min-height:44px;font-size:13px}
 body .question-hint{font-size:12px}
 body :is(.altar-props,.scrying-orb-art,.sidebar-filagree){display:none}
 body .reading-table{min-height:0;height:auto;overflow:hidden;padding:48px 0 12px;align-self:start}
 body .table-title{position:absolute;top:10px;left:0;right:0;font-size:17px;transform:none;text-align:center}
 body .spread-viewport{display:block;position:relative;width:100%;max-height:660px;overflow:auto;overscroll-behavior-x:contain;scrollbar-width:thin}
 body .reading-table .dynamic-board{position:relative;left:auto;top:auto;right:auto;bottom:auto;margin:0 auto;transform:none!important;width:680px!important;height:700px!important;min-width:680px}
 body .spread-device-hint{display:block;padding:10px 12px;text-align:center;font-size:12px;color:#d8c9a5}
 body .control-dock{position:relative!important;inset:auto!important;transform:none!important;width:calc(100% - 16px)!important;height:auto!important;min-height:0;display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px;margin:10px 8px 0;padding:10px;border:1px solid #b89b5655;border-radius:14px;background:#111627f2}
 body .control-dock .dock-art{display:none}
 body .control-dock button{position:static!important;grid-column:auto!important;grid-row:auto!important;width:100%!important;height:auto!important;min-height:48px;padding:10px 6px;font-size:13px!important;transform:none!important;line-height:1.5}
 body .pick-zone{position:relative;inset:auto;width:100%;height:auto;min-height:0;padding:10px;transform:none}
 body .pick-fan{position:relative;inset:auto;display:grid;grid-template-columns:repeat(13,44px);gap:7px;width:100%;height:auto;min-height:0;overflow:auto;padding:12px 5px;transform:none;overscroll-behavior-x:contain}
 body .pick-fan .pick-card{position:relative;inset:auto;grid-area:auto;width:44px;height:72px;transform:none!important;margin:0}
 body .pick-fan .pick-card.picked{opacity:.4}
 body .spill-head{position:relative;inset:auto;transform:none;font-size:14px}
 body .spill-actions{position:relative;inset:auto;display:flex;flex-wrap:wrap;gap:8px;transform:none;margin-top:12px}
 body .spill-actions button{flex:1;min-width:90px;min-height:44px;font-size:13px}
 body .oracle-panel{grid-column:1/-1;position:relative;width:100%;height:auto;min-height:500px;margin:0;padding:22px}
 body .oracle-scroll{height:auto;max-height:none;overflow:visible}
 body .reading-head h2{font-size:24px}
 body .type-scale button{width:44px;height:44px;min-height:44px}
 body .accordion>button{min-height:48px;font-size:15px}
 body .oracle-panel :is(p,li){font-size:calc(15px * var(--read-scale,1));line-height:1.85}
 body .oracle-panel :is(h4,h5){font-size:13px}
 body .modal-backdrop{padding:12px}
 body :is(.profile-modal,.share-modal,.settings-modal,.card-modal){max-width:calc(100vw - 24px);max-height:calc(100svh - 24px);overflow:auto}
 body .modal-backdrop button{min-height:44px}
 body .modal-backdrop :is(input,textarea,select){font-size:16px;min-height:44px}
}
@media(max-width:700px){
 body .workspace{grid-template-columns:minmax(0,1fr)!important;padding:8px;gap:12px}
 body .ritual-sidebar{padding:14px 12px}
 body .sidebar-heading{display:none}
 body .spread-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
 body .spread{padding:10px 4px;gap:4px;display:flex;flex-direction:column;text-align:center}
 body .spread i{font-size:20px}
 body .spread b{font-size:12px;line-height:1.7}
 body .spread small,body .question-hint{display:none}
 body .ritual-sidebar .question-box{margin-top:12px}
 body .topic-row{justify-content:flex-start}
 body .topic-row button{flex:1;padding:6px}
 body .spread-viewport{max-height:540px}
 body .oracle-panel{padding:22px 16px}
}
@media(max-height:600px) and (orientation:landscape){
 body .spread-viewport{max-height:calc(100svh - 140px)}
 body .topbar{grid-template-columns:auto minmax(0,1fr) auto!important}
 body .topbar nav{grid-column:2;grid-row:1}
 body .topbar .top-actions{grid-column:3}
}

@media(min-width:1181px){body .control-dock button{min-height:calc(44px / var(--ui-scale,1));align-self:center}}
@media(max-width:1180px){
 body .raster-stage{display:none}
 body .reading-table{border:1px solid #d4b57033;border-radius:18px;background:radial-gradient(ellipse at 50% 20%,#2b17474d,transparent 70%),#080e1bea}
 body .reading-table .celestial-compass{display:none}
 body .topbar .lang-switch{display:inline-flex;align-items:center;justify-content:center;font-size:12px}
 body .spread{height:auto;min-height:76px}
 body .spread b{font-size:13px;letter-spacing:0}
 body .oracle-panel{border-radius:24px;background:#e4d2aa}
 body .oracle-panel .oracle-frame-art{display:none}
 body .control-dock{background-image:none!important}
 body .control-dock button{margin:0!important;white-space:normal}
 body .ritual-sidebar .sidebar-frame-art{opacity:.3}
}