:root{
  --rose:#fff6fb;
  --rad:12px;
  --gap:1.8rem;
  --cardW:clamp(56px,14vw,90px);
  --gap-r:clamp(8px,2vw,18px);
}

.filter-nav{
  display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;
  background:var(--bg);position:sticky;top:64px;z-index:60;
  margin:1.6rem 0;
}
.filter-nav a{padding:.7rem 1.4rem;font-weight:600;border-radius:var(--rad)}
.filter-nav a.active{background:var(--prim);color:#fff}
.wrapper{display:grid;grid-template-columns:minmax(0,1fr) 300px;grid-template-areas:"content sidebar";gap:var(--gap);max-width:var(--max);margin:auto;padding:var(--gap) 1.2rem}
@media(max-width:992px){.wrapper{grid-template-areas:"content" "sidebar";grid-template-columns:1fr}}
.content{grid-area:content}
.sidebar{grid-area:sidebar}
.arcana{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 12px rgba(0,0,0,.05);margin-top:3.2rem;padding:var(--gap) 1.2rem}
.content .arcana:first-of-type{margin-top:0}
.arcana h2{font-size:2.6rem;margin-bottom:1.4rem;position:relative;font-weight:700}
.arcana h2::after{content:"";position:absolute;left:0;bottom:-4px;width:60px;height:4px;background:var(--prim);border-radius:4px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.2rem;margin-bottom:1.6rem}
.card{background:var(--bg);padding:1.2rem;border-radius:var(--rad);box-shadow:0 1px 3px rgba(0,0,0,.05);text-align:center;transition:transform .25s}
.card:hover{transform:translateY(-4px)}
.card img{width:100%;height:auto;margin:auto}
.card span{display:block;margin-top:.8rem;font-weight:600}
.card.overview{background:var(--card);padding:1.8rem;text-align:left}
.arcana .desc{line-height:1.6;color:var(--muted)}
.sidebar .box{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 12px rgba(0,0,0,.05);padding:var(--gap) 1.2rem}
.sidebar h3{font-size:1.9rem;margin-bottom:1rem}
.sidebar ul{line-height:1.65;margin-left:1.4rem}
.sidebar ul ul{margin-left:1.2rem}
.sidebar .box:first-child{margin-top:0}
.btn-all{display:inline-block;margin-top:1.2rem;padding:.9rem 1.6rem;border-radius:var(--rad);background:var(--prim);color:#fff;font-weight:600}
.spread-board{grid-area:content;background:var(--card);border-radius:var(--rad);
  box-shadow:0 4px 14px rgba(0,0,0,.05);padding:var(--gap);
  padding-bottom:calc(var(--gap) + 3.2rem);
  display:grid;grid-template-columns:repeat(6,var(--cardW));
  grid-auto-rows:calc(var(--cardW)*1.54);gap:var(--gap-r);justify-content:center;
  margin-bottom:var(--gap);overflow-x:auto}
.card-slot{background:var(--rose);position:relative;border-radius:var(--rad);
  box-shadow:0 1px 4px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;
  cursor:pointer;user-select:none;transition:.25s;aspect-ratio:65/100}
.card-slot img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.card-slot::after{content:'';position:absolute;left:50%;top:calc(100% + .6rem);
  transform:translateX(-50%);font-size:1.3rem;white-space:nowrap;color:var(--muted);pointer-events:none}
.card-slot.selected{background:var(--accent);transform:translateY(-4px);z-index:20}
.card-slot.selected::after{content:attr(data-title);color:var(--accent);background:var(--card);
  padding:.2rem .8rem;border-radius:var(--rad);box-shadow:0 2px 6px rgba(0,0,0,.08);font-weight:600}

#c1 {grid-column:2/3;grid-row:3/4}
#c2 {grid-column:2/3;grid-row:3/4;transform:rotate(90deg)}
#c3 {grid-column:2/3;grid-row:4/5}
#c4 {grid-column:1/2;grid-row:3/4}
#c5 {grid-column:2/3;grid-row:2/3}
#c6 {grid-column:3/4;grid-row:3/4}
#c7 {grid-column:5/6;grid-row:1/2}
#c8 {grid-column:5/6;grid-row:2/3}
#c9 {grid-column:5/6;grid-row:3/4}
#c10{grid-column:5/6;grid-row:4/5}
@media(max-width:480px){
  .spread-board{grid-template-columns:repeat(4,var(--cardW))}
  #c1 {grid-column:2/3;grid-row:2/3}
  #c2 {grid-column:2/3;grid-row:2/3;transform:rotate(90deg)}
  #c3 {grid-column:2/3;grid-row:3/4}
  #c4 {grid-column:1/2;grid-row:2/3}
  #c5 {grid-column:2/3;grid-row:1/2}
  #c6 {grid-column:3/4;grid-row:2/3}
  #c7 {grid-column:4/5;grid-row:1/2}
  #c8 {grid-column:4/5;grid-row:2/3}
  #c9 {grid-column:4/5;grid-row:3/4}
  #c10{grid-column:4/5;grid-row:4/5}
}

.spinner{width:40px;height:40px;border:4px solid #ccc;border-top-color:var(--prim);border-radius:50%;animation:spin 1s linear infinite;margin:2rem auto}
.spinner-inline{display:inline-block;width:1em;height:1em;margin:0 0 0 .5em;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
.slot-desc{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);padding:2.2rem;line-height:1.65;color:var(--muted)}
.slot-desc h2{font-size:2.4rem;color:var(--txt);margin-bottom:.8rem;font-weight:700}

.ask-box{background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);padding:2.2rem;line-height:1.65}
.ask-box h2{font-size:2.4rem;color:var(--txt);margin-bottom:1rem;font-weight:700}
.query-form{display:flex;gap:.8rem;flex-wrap:wrap}
.query-form textarea{flex:1 1 320px;min-height:56px;padding:1rem 1.2rem;border:1px solid #ccc;border-radius:var(--rad);resize:vertical;font-family:inherit;font-size:1.6rem}
.query-form button{flex:0 0 160px;padding:1.2rem;border:0;border-radius:var(--rad);background:var(--accent);color:#fff;font-weight:700;cursor:pointer;transition:.25s}
.query-form button:hover{background:#a60077}
@media(max-width:480px){
  .query-form textarea{flex:1 1 100%}
  .query-form button{flex:1 1 100%}
}
.spread-section{
  background:var(--card);border-radius:var(--rad);box-shadow:0 4px 14px rgba(0,0,0,.05);
  padding:var(--gap) 1.2rem;margin-top:3.2rem
}
.content .spread-section:first-of-type{margin-top:0}
.spread-section h2{font-size:2.6rem;margin-bottom:1.4rem;position:relative;font-weight:700}
.spread-section h2::after{content:"";position:absolute;left:0;bottom:-4px;width:60px;height:4px;background:var(--prim);border-radius:4px}
.spread-section .grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:1.2rem;margin-bottom:1.6rem}
.spread-card{
  position:relative;
  background:linear-gradient(135deg,#fff6fb 0%,#ffe8fa 100%);
  padding:1.6rem;
  border-radius:16px;
  box-shadow:0 6px 20px rgba(0,0,0,.08);
  text-decoration:none;
  color:var(--txt);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  transition:transform .35s cubic-bezier(.25,.8,.25,1),box-shadow .35s cubic-bezier(.25,.8,.25,1)
}
.spread-card:hover{transform:translateY(-6px);box-shadow:0 12px 28px rgba(0,0,0,.12)}
.spread-card::before{content:"";position:absolute;inset:-40%;background:radial-gradient(circle at 50% 50%,rgba(192,0,143,.45),transparent 60%);transform:scale(0);transition:transform .35s cubic-bezier(.25,.8,.25,1);pointer-events:none}
.spread-card:hover::before{transform:scale(1)}
.spread-card__img{position:relative;width:100%;padding-top:100%;border-radius:12px;overflow:hidden;background:#fff}
.spread-card__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .35s cubic-bezier(.25,.8,.25,1)}
.spread-card:hover .spread-card__img img{transform:scale(1.05) rotate(.5deg)}
.spread-card__content{margin-top:1.2rem;display:flex;flex-direction:column;gap:.35rem;text-align:left}
.spread-card__title{font-size:1.35rem;font-weight:800;color:var(--accent);line-height:1.3}
.spread-card__count{font-size:.94rem;color:var(--muted);letter-spacing:.02em}
.spread-section.classic .spread-card{background:linear-gradient(135deg,#fff 0%,#fff 100%)}
:root{
  --accent:#c0008f;
  --bg-card:#fff;
  --bg-rose:#fff6fb;
  --txt:#212121;
  --muted:#646464;
  --gap:1.8rem;
  --rad:12px;
  --shadow:0 6px 22px rgba(0,0,0,.08);
  --trans:.25s cubic-bezier(.4,0,.2,1);
}
.faq-pro{position:relative;margin:4rem 0;grid-column:1/-1;padding:calc(var(--gap)*1.2) var(--gap);background:linear-gradient(135deg,#ffe8fa 0%,#fff 100%);border-radius:var(--rad);box-shadow:var(--shadow);overflow:hidden}
.faq-pro::before,.faq-pro::after{content:"";position:absolute;border-radius:50%;background:var(--accent);opacity:.06;pointer-events:none}
.faq-pro::before{width:360px;height:360px;right:-140px;top:-140px}
.faq-pro::after{width:260px;height:260px;left:-120px;bottom:-120px}
.faq-pro h2{font-size:2.8rem;margin-bottom:calc(var(--gap)*.8);position:relative;display:inline-block}
.faq-pro h2::after{content:"";position:absolute;left:0;bottom:-6px;width:68px;height:4px;background:var(--accent);border-radius:4px}
.faq-pro details{background:var(--bg-card);border-radius:var(--rad);margin-top:1rem;box-shadow:0 2px 8px rgba(0,0,0,.05);overflow:hidden;transition:box-shadow var(--trans),transform var(--trans)}
.faq-pro details[open]{box-shadow:var(--shadow);transform:translateY(-2px)}
.faq-pro summary{cursor:pointer;padding:1.6rem 1.8rem;list-style:none;font-size:1.7rem;font-weight:700;position:relative;line-height:1.4;transition:color var(--trans),background var(--trans)}
.faq-pro summary:hover{background:var(--bg-rose)}
.faq-pro summary::-webkit-details-marker{display:none}
.faq-pro summary::after{content:"";position:absolute;right:1.8rem;top:50%;width:11px;height:11px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:translateY(-50%) rotate(45deg);transition:transform var(--trans)}
.faq-pro details[open] summary::after{transform:translateY(-50%) rotate(225deg)}
.faq-pro .answer{padding:0 1.8rem 1.8rem 1.8rem;color:var(--muted);line-height:1.65;animation:fade .28s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(max-width:480px){.faq-pro{padding:calc(var(--gap)*1) 1.2rem}.faq-pro h2{font-size:2.4rem}}