.guide-page{background:var(--surface);overflow-wrap:anywhere}
.guide-bar,.guide-main{max-width:1040px}
.guide-bar{justify-content:space-between}
.guide-back{color:var(--button-ink);font-weight:700;text-underline-offset:4px}
.guide-main{padding-bottom:40px}
.guide-hero,.guide-step{padding:clamp(14px,4vw,30px);border:1px solid var(--line);border-radius:16px;background:var(--paper)}
.guide-hero{border-top:4px solid var(--button-red)}
.guide-hero h1{font-size:clamp(27px,5vw,42px)}
.guide-hero>p:not(.section-kicker),.guide-step>p{color:var(--muted)}
.guide-route,.guide-topics,.guide-result-flow{margin:0;padding:0;list-style:none}
.guide-route{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:16px}
.guide-route a{display:flex;align-items:center;gap:6px;min-height:44px;padding:6px 9px;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font-weight:650}
.guide-route a:hover{background:var(--button-tint);border-color:var(--button-red)}
.guide-route span{color:var(--button-ink);font-size:12px}
.guide-step{margin-top:12px}
.guide-step-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.guide-step-head>span{display:grid;place-items:center;min-width:34px;height:34px;border-radius:9px;background:var(--button-red);color:#fff;font-weight:750}
.guide-step h2{font-size:clamp(17px,3vw,24px);letter-spacing:-.03em;line-height:1.3}
.guide-topics{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.guide-topics li{padding:6px 11px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:650}
.guide-step .guide-note{margin-top:12px;padding:9px 12px;border-left:3px solid var(--control-line);background:var(--surface);border-radius:0 8px 8px 0}
.guide-subsection{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.guide-subsection>h3{margin-bottom:6px;font-size:17px}
.guide-subsection>p{color:var(--muted)}
.guide-questions{margin:10px 0;padding-inline-start:22px}
.guide-questions li+li{margin-top:4px}
.guide-spreads,.guide-result-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px}
.guide-decks{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:10px}
.guide-spreads article,.guide-result-flow li{padding:12px;border:1px solid var(--line);border-radius:9px}
.guide-spreads article>span,.guide-spreads small{font-weight:700;color:var(--button-ink)}
.guide-spreads h3,.guide-spreads h4,.guide-result-flow h3{margin-bottom:4px;font-size:15px}
.guide-spreads small{display:block;margin-top:8px}
.guide-demo{margin-top:12px;padding:clamp(10px,3vw,20px);border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.guide-demo-heading{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.guide-demo-heading h3{font-size:16px}
.guide-demo-heading span{padding:2px 6px;border-radius:4px;background:var(--button-tint);color:var(--button-ink);font-size:11px;font-weight:700}
#demo-status{color:var(--muted)}
.guide-demo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:320px;margin:12px auto}
.guide-demo-card{display:grid;justify-items:center;align-content:start;gap:4px;min-width:0;padding:6px 2px;border:1px solid transparent;border-radius:8px;background:transparent;font-size:11px;font-weight:650}
.guide-demo-card:disabled{opacity:1}
.guide-demo-card[aria-pressed="true"]{border-color:var(--button-red);background:var(--button-tint)}
.guide-demo-card span{display:grid;place-items:end center;width:min(100%,60px);aspect-ratio:.69;padding-bottom:6px;border:1px solid #654153;border-radius:6px;background:#3b1c30 url('card-back.svg?v=2') center/100% 100%;color:#ffe9be;text-shadow:0 1px 2px #2d1425}
.guide-demo-results{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}
.guide-demo-results .result-card{padding-bottom:12px}
.guide-demo-position{padding:8px 12px;border-bottom:1px solid var(--line);background:var(--surface);font-size:14px}
.guide-demo-result-art{display:block;width:min(100%,96px);height:150px;margin:10px auto;object-fit:contain}
.guide-demo-result-art.reversed{transform:rotate(180deg)}
.guide-demo .spread-guide{margin-bottom:12px}
.guide-demo-actions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;max-width:460px;margin:auto}
.guide-demo-actions .button{min-width:0;padding-inline:2px}
.guide-demo-actions .button:disabled{opacity:1;border-color:var(--line);background:var(--paper);color:var(--muted)}
.guide-end{display:flex;justify-content:center;margin-top:16px}
.guide-end a{gap:8px;text-decoration:none}
.guide-intro-copy{margin:13px 0 20px;color:#dedee3}
@media(max-width:740px){
  .guide-demo-results{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:560px){
  .guide-route{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-spreads,.guide-result-flow{grid-template-columns:minmax(0,1fr)}
  .guide-demo-actions .button{font-size:11px}
}