.signature-kicker{display:none}
.signature-mode{
  --signature-ink:#18122d;
  --signature-night:#140d25;
  --signature-lilac:#d9c8ff;
  --signature-acid:#e8ff8e;
  --paper:#231738;--surface:#30204a;
  --ink:#f7f1ff;--muted:#dfd1f6;--accent:var(--signature-lilac);--deep:var(--signature-ink);
  --line:#614781;--control-line:#9273b7;
  --button-red:#633f99;--button-ink:#eadfff;--button-tint:#3c285d;--button-active:#4e3376;
  min-height:100vh;
  background:radial-gradient(ellipse at 50% 0%,#422964 0%,var(--signature-night) 75%);
}
.signature-mode .signature-kicker,.signature-intro .signature-kicker{
  display:block;color:var(--signature-lilac);font-size:11px;font-weight:750;letter-spacing:.15em
}
.signature-kicker span{margin-inline:4px;color:var(--signature-acid)}
.topics button[data-topic="yorn"]:not([aria-pressed="true"]){border-color:#d8c7ee;background:#f6effe;color:#553480}
.signature-mode .topics button[data-topic="yorn"]{
  border-color:#4f3783;background:#322050;color:#f0e6ff;box-shadow:0 0 0 2px #d9c8ff55
}
.signature-mode .table-top{background:linear-gradient(105deg,#382451 35%,#483068)}
.signature-mode .phase,.signature-mode .stage,.signature-mode .slot-tile:not(.back){background:var(--surface)}
.signature-mode .phase{color:var(--ink)}
.signature-mode .button:focus-visible{outline-color:var(--signature-lilac)}
.signature-mode #detail-source{color:var(--signature-lilac)}
.signature-mode .topics button:hover:not([aria-pressed="true"]),
.signature-mode .spread-options button:hover:not(:disabled):not([aria-pressed="true"]),
.signature-mode .deck-options button:hover:not(:disabled):not([aria-pressed="true"]),
.signature-mode .spread-options button[aria-pressed="true"],
.signature-mode .deck-options button[aria-pressed="true"]{background:var(--button-active);border-color:var(--control-line)}
.signature-mode .button.primary:not(:disabled){border-color:#59368e;background:#482777}
.signature-mode .button.primary:hover:not(:disabled){background:#352054}
.signature-mode .action-dock .button:disabled{background:var(--surface);color:#bfaed4}
.signature-mode .table[data-phase="draw"] .stage{display:none}
.signature-mode .table[data-phase="draw"] .workspace{
  background:radial-gradient(ellipse at 50% 15%,#49307a 0%,var(--signature-night) 71%);
  border-radius:0 0 19px 19px;color:#fff
}
.signature-mode .canvas-top{padding-block:22px 0}
.signature-mode .canvas-top h2{margin:4px 0;font-size:clamp(23px,4vw,33px);font-weight:650}
.signature-mode .table[data-phase="draw"] .canvas-top{text-align:center}
.signature-mode .table[data-phase="draw"] #canvas-heading:focus-visible{outline:none}
.signature-mode .table[data-phase="draw"] .status{color:#e6ddf7}
.signature-mode .table[data-phase="open"] .reading-canvas{padding-block:var(--inset)}
.signature-mode .deck{
  grid-template-columns:repeat(11,minmax(0,1fr));max-width:810px;max-height:none;margin:auto;
  gap:clamp(5px,1.3vw,14px);padding:8px 5px 18px;overflow:visible;
}
.signature-mode .deck button{
  position:relative;display:grid;place-items:center;width:100%;max-width:60px;min-height:44px;isolation:isolate;
  border:1px solid #9675ce;border-radius:8px;
  background:radial-gradient(ellipse,#57378e 0%,#2c1c50 65%,#241639 100%);
  color:#e8d8ff;box-shadow:0 5px 12px #0e071d80;
  animation:signature-enter .36s both;animation-delay:calc(var(--card-order) * 15ms)
}
.signature-mode .deck button::before{
  content:"";position:absolute;inset:4px;border:1px solid #b897ef70;border-radius:5px;
  background:repeating-conic-gradient(from 45deg,#d8beff1a 0deg 1deg,transparent 1deg 20deg)
}
.signature-mode .deck button::after{content:"✦";position:relative;translate:0 -12%;font-size:clamp(15px,3vw,25px)}
.signature-mode .back-number{background:var(--signature-night);color:var(--signature-lilac)}
.signature-mode .deck button:hover,.signature-mode .deck button:focus-visible{
  outline-color:var(--signature-acid);border-color:var(--signature-acid);color:var(--signature-acid);background:#52347e
}
.signature-intro.reading-intro{
  width:min(calc(100% - 26px),520px);padding:clamp(23px,5vw,46px) clamp(16px,5vw,34px);
  border-color:#7751a4;border-radius:22px;
  background:radial-gradient(ellipse at 50% 23%,#55317e 0%,var(--signature-night) 64%);
  box-shadow:0 22px 90px #10071eaa,0 0 38px #a578f04d
}
.signature-intro[open]{animation:signature-enter .4s ease-out}
.signature-intro::backdrop{background:#110921c9}
.signature-intro h2{margin-top:12px;word-break:keep-all}
#choice-intro-message{margin:10px 0 22px;color:#eadfff;font-size:clamp(15px,4vw,19px);word-break:keep-all}
.signature-mode #choice-start{
  gap:10px;min-width:150px;border-color:var(--signature-acid);background:var(--signature-acid);color:#241a38
}
.signature-mode #choice-start:hover:not(:disabled){background:#f2ffb7}
.signature-orbit{
  position:relative;display:grid;place-items:center;width:96px;height:96px;margin:0 auto 18px;
  color:var(--signature-acid);font-size:46px;text-shadow:0 0 20px #e1ff9399
}
.signature-orbit::before,.signature-orbit::after{
  content:"";position:absolute;inset:0;border:1px solid #d9bcff8c;border-radius:50%;
  transform:rotate(-38deg) scaleY(.61)
}
.signature-orbit::after{transform:rotate(38deg) scaleY(.61)}
.signature-orbit span{animation:signature-glow 2.5s ease-in-out 2}
.signature-mode .results[data-count="1"]{grid-template-columns:minmax(0,720px)}
.signature-mode .choice-card{
  --answer-color:#ffe0a2;--answer-glow:#6e422f;--answer-bg:#26173b;
  display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-areas:"banner art" "banner title" "banner meta";
  grid-template-rows:1fr auto auto;align-items:start;min-height:286px;padding:0 0 12px;
  border-color:#6d4a90;border-radius:17px;background:var(--signature-ink);color:#f7f1ff;box-shadow:0 12px 30px #321b5229
}
.signature-mode .choice-card:has(.choice-banner[data-answer="yes"]){--answer-color:#e8ff8e;--answer-glow:#405a40;--answer-bg:#202143}
.signature-mode .choice-card:has(.choice-banner[data-answer="no"]){--answer-color:#ffb6d1;--answer-glow:#762e5a;--answer-bg:#311535}
.signature-mode .choice-banner{
  grid-area:banner;align-self:stretch;align-content:center;position:relative;isolation:isolate;min-height:190px;margin-bottom:-12px;
  color:var(--answer-color);background:radial-gradient(ellipse at 50% 47%,var(--answer-glow),var(--answer-bg) 64%,#181026)
}
.signature-mode .choice-banner::before{
  content:"";z-index:-1;position:absolute;inset:12%;border:1px solid currentColor;border-radius:50%;opacity:.26;
  transform:rotate(-14deg) scaleY(.72)
}
.signature-mode .choice-answer{
  font-size:clamp(58px,13vw,120px);font-weight:850;line-height:1.02;
  text-shadow:0 0 26px color-mix(in srgb,var(--answer-color),transparent 65%);
  animation:signature-enter .46s .2s both
}
.signature-mode .choice-label{color:#fff;letter-spacing:.13em}
.signature-mode .choice-card .card-art{
  grid-area:art;border-color:#674e8a;background:#241738
}
.signature-mode .choice-card .card-art img{animation:signature-flip .48s both}
.signature-mode .choice-card .card-art img.reversed{--card-turn:180deg}
.signature-mode .choice-card .card-art:hover{border-color:var(--signature-lilac);background:#332149}
.signature-mode .choice-card .card-detail-link,.signature-mode .choice-card .card-meta{color:#dfd1f6}
.signature-mode .choice-card .card-title{grid-area:title}
.signature-mode .choice-card .card-meta{grid-area:meta}
@keyframes signature-enter{from{opacity:0;translate:0 9px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes signature-flip{from{opacity:0;transform:perspective(450px) rotateY(85deg) rotate(var(--card-turn,0deg))}to{opacity:1;transform:perspective(450px) rotateY(0deg) rotate(var(--card-turn,0deg))}}
@keyframes signature-glow{50%{scale:1.14;opacity:.75}}
@media(max-width:560px){
  .signature-mode .deck{grid-template-columns:repeat(6,minmax(0,1fr));max-width:360px}
  .signature-mode .choice-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"banner" "art" "title" "meta";grid-template-rows:auto}
  .signature-mode .choice-banner{min-height:152px;margin-bottom:0}
  .signature-mode .choice-card .card-art img{height:clamp(120px,29vh,174px)}
}
@media(max-width:360px){
  .signature-mode .deck{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .signature-intro[open],.signature-mode .deck button,.signature-mode .choice-answer,.signature-mode .choice-card .card-art img,.signature-orbit span{animation:none}
}