/* A graphic instrument: eight images surrounding one changing figure. */
:root{--zc-poster-paper:#fff6d5;--zc-poster-ink:#181621;--zc-poster-yellow:#ffe747;--zc-poster-blue:#3432f5;--zc-poster-pink:#fb5198;--zc-poster-cyan:#42dded;--zc-poster-stroke:#17151c}
:root[data-mode=dark]{--zc-poster-paper:#211f2e;--zc-poster-ink:#f7f0dd}
body{background:var(--zc-poster-paper);color:var(--zc-poster-ink)}
.hexagram-space{max-width:1380px;padding:24px clamp(20px,4vw,56px);gap:20px}
.hexagram-space::before{inset:0;background:radial-gradient(ellipse at 3% 12%,#fb519830,transparent 38%),radial-gradient(ellipse at 97% 70%,#3432f51c,transparent 42%),linear-gradient(90deg,#89784a10 1px,transparent 1px),linear-gradient(#89784a10 1px,transparent 1px);background-size:auto,auto,32px 32px,32px 32px;mask-image:none}
.masthead{align-items:center;padding:0 0 18px;border-bottom:2px solid currentColor}
.identity{gap:15px}.brand-seal{width:48px;height:48px;background:var(--zc-poster-blue);border:2px solid var(--zc-poster-stroke);border-radius:14px;transform:rotate(-9deg);box-shadow:5px 5px 0 var(--zc-poster-yellow)}.brand-seal i{background:#fff}
h1{font:800 clamp(22px,2.6vw,36px)/1.1 Arial,sans-serif;letter-spacing:-.055em}
.eyebrow{font-size:9px;color:inherit}.edition{border:0;min-width:0;padding:8px 18px;border:2px solid var(--zc-poster-stroke);border-radius:9px;background:var(--zc-poster-yellow);color:var(--zc-poster-stroke);transform:rotate(5deg);box-shadow:4px 4px 0 var(--zc-poster-stroke);gap:2px}.edition strong{font:900 34px/.9 Arial,sans-serif}.edition span{font-size:8px;color:inherit}.edition small{display:none}
.cast-layout{grid-template-columns:minmax(270px,.82fr) minmax(0,1.18fr);gap:clamp(25px,5vw,72px);padding:10px 0;align-items:center}
.ritual-copy{max-width:440px}.ritual-copy h2,.reading-lead h2,.collection-head h2{font:900 clamp(42px,5.7vw,76px)/.96 Arial,sans-serif;letter-spacing:-.065em;margin:25px 0}.ritual-copy h2 em{font-style:normal;color:var(--zc-poster-blue);text-shadow:2px 2px 0 var(--zc-poster-yellow)}
[data-mode=dark] .ritual-copy h2 em{color:var(--zc-poster-cyan);text-shadow:none}
.section-label{color:inherit;font-size:10px}.ritual-copy .section-label::before,.reading-lead .section-label::before,.collection-head .section-label::before{background:var(--zc-poster-pink);height:6px;width:30px;transform:rotate(-8deg)}
.intro,.method-note,.reading-lead>p{color:inherit;opacity:.76}.intro{font-size:15px;line-height:1.75}
.poster-shapes{display:flex;align-items:center;gap:13px;margin:0 0 35px;height:44px}.poster-shapes i{width:39px;height:39px;background:var(--zc-poster-yellow);border:2px solid var(--zc-poster-stroke);box-shadow:4px 4px 0 var(--zc-poster-stroke);transform:rotate(-12deg)}.poster-shapes i:nth-child(2){border-radius:50%;background:var(--zc-poster-blue);width:24px;height:24px;transform:none}.poster-shapes i:nth-child(3){background:var(--zc-poster-pink);width:51px;height:15px;transform:rotate(14deg)}
button{border:2px solid currentColor;border-radius:9px;font-weight:650;box-shadow:3px 3px 0 var(--zc-poster-stroke)}button:hover:not(:disabled){transform:translate(-1px,-2px);box-shadow:5px 5px 0 var(--zc-poster-stroke);border-color:currentColor}button:active:not(:disabled){transform:translate(2px,2px);box-shadow:0 0 0 var(--zc-poster-stroke)}
.modes{gap:10px}.modes button{background:var(--zc-poster-paper);color:var(--zc-poster-ink);border-radius:999px;font-size:12px}.modes button[aria-pressed=true]{color:var(--zc-poster-stroke);background:var(--zc-poster-yellow);border-color:var(--zc-poster-stroke)}
.ritual-stage{color:var(--zc-poster-stroke);background:#fffcef;border:3px solid var(--zc-poster-stroke);border-radius:30px;box-shadow:9px 9px 0 var(--zc-poster-stroke);padding:24px;gap:15px;overflow:hidden}.ritual-stage::before{height:10px;background:linear-gradient(90deg,var(--zc-poster-yellow) 33%,var(--zc-poster-blue) 33% 66%,var(--zc-poster-pink) 66%)}
.stage-head strong{font:900 29px/1 Arial,sans-serif}.stage-head strong span{color:#68616d}.step-track{gap:7px;margin:0}.step-track span{height:7px;background:#e8e2d5;border:1px solid #c6c0b5;border-radius:3px}.step-track .done{background:var(--zc-poster-blue);border-color:var(--zc-poster-stroke)}
.cast-figure{position:relative;min-height:0;height:320px;border:0;background:radial-gradient(circle,var(--zc-poster-yellow) 0 35%,transparent 35.3%),radial-gradient(#8c84a83a 1px,transparent 1.4px);background-size:auto,12px 12px;isolation:isolate}
.trigram-compass{position:absolute;width:292px;height:292px;left:50%;top:50%;transform:translate(-50%,-50%)}.dial-orbit{position:absolute;inset:25px;border:3px solid var(--zc-poster-stroke);border-radius:50%;border-left-color:transparent;transform:rotate(-20deg)}
.trigram-token{position:absolute;left:calc(50% - 21px);top:calc(50% - 21px);width:42px;height:42px;padding:7px;background:var(--zc-poster-cyan);border:2px solid var(--zc-poster-stroke);border-radius:10px;box-shadow:4px 4px 0 var(--zc-poster-stroke);transform:rotate(var(--zc-angle)) translateY(-127px) rotate(calc(-1 * var(--zc-angle)));z-index:2}
.trigram-token:nth-child(3n){background:var(--zc-poster-pink)}.trigram-token:nth-child(3n + 1){background:var(--zc-poster-yellow)}.trigram-token svg{width:100%;height:100%}.trigram-token path{stroke:var(--zc-poster-stroke);stroke-width:3.4;fill:none}
.figure-disc{position:relative;width:178px;height:178px;display:grid;place-items:center;background:#fffcef;border:3px solid var(--zc-poster-stroke);border-radius:50%;box-shadow:6px 6px 0 var(--zc-poster-stroke);z-index:3}.figure-disc .figure{width:96px;gap:8px}.figure-disc .line{height:9px}.figure-disc .line i{background:var(--zc-poster-stroke)}.figure-disc .line.changing i{background:var(--zc-poster-blue)}.figure-disc .line.empty{border-color:#d0c8b7}.figure-disc .line.changing{box-shadow:none}
.dial-caption{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);font:700 8px Arial,sans-serif;letter-spacing:.12em;background:#fffcef;padding:5px 8px;border:1px solid var(--zc-poster-stroke);border-radius:99px;white-space:nowrap}
.is-casting .dial-orbit{animation:dial-turn .9s ease-in-out}.is-casting .trigram-token{animation:token-light .45s alternate 2}.coin-tray{border-top:2px solid var(--zc-poster-stroke);padding-top:12px}.coin{border-color:var(--zc-poster-stroke);background:var(--zc-poster-yellow);box-shadow:inset 0 0 0 3px #fffcef,3px 3px 0 var(--zc-poster-stroke);width:35px;height:35px}.coin::after{inset:9px;border-color:var(--zc-poster-stroke)}.coin.heads{background:var(--zc-poster-pink)}.coin.heads::after{border-color:var(--zc-poster-stroke)}.coin.blank{opacity:1}.toss{color:#605967;font-size:12px}.ritual-stage .primary{background:var(--zc-poster-yellow);color:var(--zc-poster-stroke);border-color:var(--zc-poster-stroke);font-weight:800;min-height:50px}
.reading-layout{gap:40px}.reading-lead h2{font-size:clamp(42px,5vw,65px)}.card{border:3px solid var(--zc-poster-stroke);border-radius:21px;box-shadow:8px 8px 0 var(--zc-poster-stroke);background:#fffcef;color:var(--zc-poster-stroke);overflow:hidden}.card::before{background:linear-gradient(90deg,var(--zc-poster-blue) 33%,var(--zc-poster-pink) 33% 66%,var(--zc-poster-yellow) 66%);height:10px}.card h2{font:800 clamp(30px,4vw,46px)/1.05 Arial,sans-serif;letter-spacing:-.045em}.card .number,.card .pinyin,.card .changing{color:#665e6b}.card-heading{border-color:#d1c8b4}.card-seal{background:var(--zc-poster-yellow);border:2px solid var(--zc-poster-stroke);border-radius:12px;box-shadow:4px 4px 0 var(--zc-poster-stroke);font:bold 27px Arial,sans-serif;transform:rotate(5deg);color:var(--zc-poster-stroke)}
.card-figure{background:var(--zc-poster-blue);border-radius:50% 50% 12px 12px;padding:20px 10px;color:#fff;border:0}.card-figure .line i{background:#fff}.card-figure .line.changing i{background:var(--zc-poster-yellow)}.card-figure .line.changing{box-shadow:none}.reflection{font-family:Georgia,serif}.question{background:#ffec87;padding:16px;border:2px solid var(--zc-poster-stroke);border-radius:10px}.question span{color:var(--zc-poster-stroke)}.trigrams{background:transparent;gap:10px}.trigrams div{background:#eee8fa;border:1px solid #c8bfda;border-radius:10px}.trigrams dt,.trigrams small{color:#5c5468}
.collection .grid{gap:12px}.cell{border:1px solid color-mix(in srgb,var(--zc-poster-ink) 20%,transparent);border-radius:12px;background:transparent;color:var(--zc-poster-ink)}.cell.drawn{background:var(--zc-poster-yellow);color:var(--zc-poster-stroke);border:2px solid var(--zc-poster-stroke);box-shadow:4px 4px 0 var(--zc-poster-stroke)}.cell.drawn:hover{background:var(--zc-poster-cyan)}.cell .line i{background:var(--zc-poster-stroke)}
@keyframes dial-turn{to{transform:rotate(340deg)}}@keyframes token-light{to{filter:brightness(1.25)}}
@media(max-width:800px){.cast-layout,.reading-layout{grid-template-columns:1fr;gap:25px}.ritual-copy{max-width:none}.poster-shapes{display:none}.ritual-copy h2{font-size:50px}.ritual-copy h2 br{display:none}.ritual-stage{width:min(100%,570px);justify-self:center}.reading-lead h2{font-size:44px}.card{width:100%}}
@media(max-width:520px){.hexagram-space{padding:18px 18px 24px;gap:15px}.masthead{padding-bottom:15px}.identity{gap:12px}.brand-seal{width:38px;height:38px;border-radius:10px}.identity h1{font-size:23px;max-width:230px}.eyebrow{font-size:8px}.cast-layout{padding:0;gap:30px}.ritual-stage{padding:20px 16px 18px;gap:12px;border-radius:22px;box-shadow:5px 5px 0 var(--zc-poster-stroke)}.cast-figure{height:265px}.trigram-compass{transform:translate(-50%,-50%) scale(.84)}.figure-disc{width:155px;height:155px}.figure-disc .figure{width:86px;gap:7px}.figure-disc .line{height:8px}.stage-head strong{font-size:25px}.coin-tray{padding-top:8px}.coins{min-height:37px}.coin{width:32px;height:32px}.coin::after{inset:8px}.ritual-stage .primary{min-height:48px}.ritual-copy h2{font-size:42px}.ritual-copy h2 br{display:block}.ritual-copy .intro{font-size:14px}.card-main{grid-template-columns:1fr}.card-figure{width:190px;height:195px;justify-self:center;border-radius:50%}.card-figure .figure{width:105px}.card-figure .line{height:10px}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.collection .grid{gap:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
[data-motion=reduced] *,[data-motion=reduced] *::before,[data-motion=reduced] *::after{animation:none!important;transition:none!important}