/* Shared reading experience for the public method guides. */
.guide-page { --guide-accent: var(--primary); }
.guide-page--bazi { --guide-accent: #91dbc7; }
.guide-page--hd { --guide-accent: #edb9df; }
.guide-page .wrapper { max-width: 1240px; padding-inline: clamp(20px, 5vw, 72px); }
.skip-link { position: fixed; top: 12px; left: 16px; z-index: 100; transform: translateY(-180%); padding: 12px 20px; background: #19152b; color: white; border: 1px solid var(--guide-accent); border-radius: 12px; }
.skip-link:focus { transform: translateY(0); }
.guide-hero { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; gap: clamp(24px, 5vw, 72px); padding-block: clamp(40px, 7vw, 96px) 36px; }
.guide-hero .manuscript-title { font-size: clamp(2.5rem, 5.4vw, 4.8rem); line-height: 1.06; letter-spacing: -.045em; margin: 20px 0; overflow-wrap: anywhere; }
.guide-hero .manuscript-lead { font-size: clamp(1.05rem, 1.7vw, 1.25rem); line-height: 1.75; max-width: 54ch; }
.guide-cta { display: inline-flex; align-items: center; min-height: 48px; padding: 12px 20px; margin-top: 16px; border: 1px solid rgb(var(--brand-rgb) / 0.400); border-radius: 999px; background: rgb(var(--brand-rgb) / 0.071); color: #f3eaff; text-decoration: none; transition: background .2s, border-color .2s; }
.guide-cta:hover { background: rgb(var(--brand-rgb) / 0.141); border-color: var(--guide-accent); }
.guide-art { margin: 0; position: relative; text-align: center; background: radial-gradient(ellipse, #9f7aea18, transparent 68%); }
.guide-art img { width: 100%; height: auto; max-width: 420px; object-fit: contain; filter: drop-shadow(0 12px 40px #9a7bcb20); }
.guide-art figcaption { font-size: .75rem; color: #aaa4bf; letter-spacing: .04em; margin-top: 8px; }
.guide-facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 16px 0 64px; }
.guide-facts li { overflow-wrap: anywhere; padding: 20px; border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent); border-top-color: var(--celestial-rim); border-radius: 18px; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--guide-accent) 9%, transparent), transparent 65%), var(--celestial-panel); font-size: .9rem; color: var(--text); }
.guide-reading { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(32px, 6vw, 88px); align-items: start; }
.guide-nav { position: sticky; top: 28px; padding: 20px 0; }
.guide-nav h2 { font-size: .75rem; text-transform: uppercase; letter-spacing: .16em; color: #b2a7c8; margin: 0 0 16px; }
.guide-nav nav { display: grid; gap: 4px; }
.guide-nav a { display: block; padding: 12px 14px; border-left: 1px solid rgb(var(--brand-rgb) / 0.200); color: #c8bfd9; text-decoration: none; font-size: .85rem; line-height: 1.5; transition: background .2s, color .2s; }
.guide-nav a:hover, .guide-nav a:focus-visible { background: rgb(var(--brand-rgb) / 0.071); color: #fff; border-color: var(--guide-accent); }
.guide-article { min-width: 0; max-width: 70ch; }
.guide-article section { scroll-margin-top: 32px; padding: 20px 0 32px; border-bottom: 1px solid rgb(var(--brand-rgb) / 0.125); }
.guide-article h2 { font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1.25; letter-spacing: -.025em; margin: 0 0 24px; color: #f2ecff; }
.guide-article p { font-size: 1.025rem; line-height: 1.85; color: #c6bed4; }
.guide-faq { border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, transparent); border-radius: 18px; margin: 12px 0; background: var(--celestial-panel); box-shadow: 0 6px 18px rgb(0 0 0 / .12), inset 0 1px 0 rgb(255 255 255 / .04); overflow: clip; }
.guide-faq summary { cursor: pointer; padding: 20px; color: #eee6ff; line-height: 1.5; }
.guide-faq summary:hover { background: rgb(var(--brand-rgb) / 0.055); }
.guide-faq[open] { border-color: color-mix(in srgb, var(--guide-accent) 45%, transparent); }
.guide-faq[open] summary { border-bottom: 1px solid rgb(var(--brand-rgb) / 0.125); background: color-mix(in srgb, var(--guide-accent) 8%, transparent); }
.guide-faq p { padding: 0 20px 8px; }
.guide-related { margin: 72px 0 32px; padding-top: 32px; border-top: 1px solid rgb(var(--brand-rgb) / 0.188); }
.guide-related h2 { font-size: 1.4rem; }
.guide-related > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.guide-related a { min-width: 0; overflow-wrap: anywhere; padding: 20px; border-radius: var(--r-md); border: 1px solid var(--celestial-line); border-top-color: var(--celestial-rim); background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--guide-accent) 9%, transparent), transparent 65%), var(--celestial-panel); box-shadow: 0 8px 20px rgb(0 0 0 / .16), inset 0 1px 0 var(--border-hairline); text-decoration: none; color: var(--text); transition: border-color .2s, box-shadow .2s; }
.guide-related a:hover { border-color: color-mix(in srgb, var(--guide-accent) 45%, var(--celestial-line)); }
.guide-page :focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 4px; }
@media (max-width: 900px) { .guide-reading { grid-template-columns: 1fr; gap: 24px; } .guide-nav { position: static; } .guide-nav nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } .guide-article { max-width: none; } }
@media (max-width: 600px) { .guide-hero { grid-template-columns: 1fr; } .guide-art img { max-width: 260px; } .guide-facts { grid-template-columns: 1fr; margin-bottom: 24px; } .guide-facts li { padding: 14px 18px; } .guide-related > div { grid-template-columns: 1fr; } .guide-nav nav { grid-template-columns: 1fr; } .guide-page .nav-strip { padding-inline: 20px; } .guide-page .nav-actions { gap: 12px; } }
@media print { .guide-nav, .guide-cta, .guide-related, .skip-link { display: none; } .guide-hero, .guide-reading { display: block; } .guide-art img { max-width: 180px; } .guide-article h2, .guide-article p, .guide-facts li { color: #111; } .guide-faq { break-inside: avoid; } }

/* Reading position stays visible without covering the article. */
.guide-progress { position: fixed; z-index: 80; inset: 0 0 auto; height: 3px; background: var(--primary); transform-origin: left; pointer-events: none; }
.guide-nav a[aria-current="location"] { color: var(--text); border-left: 3px solid var(--guide-accent); padding-left: 12px; background: rgb(var(--brand-rgb) / .08); }
.guide-faq summary { display: flex; justify-content: space-between; gap: 18px; list-style: none; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: '+'; color: var(--guide-accent); font-size: 1.3rem; line-height: 1; transition: transform .2s; }
.guide-faq[open] summary::after { transform: rotate(45deg); }
.guide-related a { display: flex; align-items: center; min-height: 72px; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .guide-art img { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform .18s ease-out; }
  .guide-facts li:hover { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), rgb(var(--brand-rgb) / .14), rgb(var(--brand-rgb) / .025) 75%); border-color: rgb(var(--brand-rgb) / .35); }
  .guide-related a:hover { background: radial-gradient(circle at var(--pointer-x, 50%) var(--pointer-y, 50%), color-mix(in srgb, var(--guide-accent) 14%, transparent), transparent 75%), var(--celestial-panel); }
}
@media (prefers-reduced-motion: reduce) { .guide-page *, .guide-page *::after { scroll-behavior: auto; transition: none !important; animation: none !important; } .guide-art img { transform: none; } }
@media print { .guide-progress { display: none; } }

/* Static bilingual glossary: native details work without JavaScript. */
html[lang="en"] [data-glossary-copy="de"],
html:not([lang="en"]) [data-glossary-copy="en"] { display: none; }
.hd-glossary { margin-block: 3rem; scroll-margin-top: 6rem; }
.hd-glossary-entry { border: 1px solid color-mix(in srgb, var(--guide-accent) 20%, var(--celestial-line)); border-top-color: var(--celestial-rim); border-radius: var(--r-md); margin-block: .6rem; background: radial-gradient(ellipse at top right, color-mix(in srgb, var(--guide-accent) 6%, transparent), transparent 65%), var(--celestial-panel); box-shadow: 0 6px 18px rgb(0 0 0 / .12), inset 0 1px 0 var(--border-hairline); overflow-wrap: anywhere; scroll-margin-top: 5rem; }
.hd-glossary-entry[hidden] { display: none; }
.hd-glossary-entry summary { cursor: pointer; padding: 1rem; min-height: 3rem; border-radius: inherit; transition: background .18s ease; }
.hd-glossary-entry summary:hover, .hd-glossary-entry[open] summary { background: color-mix(in srgb, var(--guide-accent) 8%, transparent); }
.hd-glossary-entry[open] { border-color: color-mix(in srgb, var(--guide-accent) 45%, var(--celestial-line)); }
.hd-glossary-entry[open] summary { border-bottom: 1px solid var(--celestial-line); border-radius: var(--r-md) var(--r-md) 0 0; }
.hd-glossary-entry summary:focus-visible, .hd-glossary-entry a:focus-visible, #hd-glossary-query:focus-visible { outline: 2px solid var(--guide-accent); outline-offset: 3px; }
.hd-glossary-number { display: inline-block; min-width: 2.5rem; color: var(--guide-accent); font-variant-numeric: tabular-nums; }
.hd-glossary-detail { padding: 0 1rem 1rem; }
.hd-glossary-detail nav { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.hd-glossary-detail nav a { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; border: 1px solid currentColor; border-radius: .7rem; }
.hd-glossary-search label { display: block; margin-block: 1rem .5rem; }
#hd-glossary-query { width: 100%; min-height: 44px; padding: .85rem 1rem; border-radius: var(--r-md); border: 1px solid var(--border-emphasis); color: inherit; background: var(--ink-900); box-shadow: inset 0 2px 8px rgb(0 0 0 / .2); font: inherit; }
@media (prefers-reduced-motion: reduce) { .hd-glossary-entry summary { transition: none; } }
@media print { .hd-glossary-entry, .hd-glossary-entry summary, .hd-glossary-number, .hd-glossary-detail a { background: none; box-shadow: none; border-color: CanvasText; color: CanvasText; } }

/* Native disclosures retain the selected chapter on keyboard and touch. */
.guide-faq[open] { border-color: var(--guide-accent); background: rgb(var(--brand-rgb) / .035); }
.guide-faq summary:focus-visible { outline-offset: -3px; }
.guide-related a:focus-visible { border-color: var(--guide-accent); box-shadow: 0 8px 20px rgb(0 0 0 / .16), inset 0 1px 0 var(--celestial-rim); }
@media (prefers-reduced-motion: no-preference) {
  .guide-cta:active, .guide-related a:active { transform: translateY(1px); }
}

/* Blend the decorative hero into the stage without changing the source artwork. */
.guide-art img.celestial-hero-art { mix-blend-mode: screen; mask-image: radial-gradient(ellipse 70% 75% at center, #000 60%, transparent 100%); border-radius: var(--r-lg); }