/* Ming's moonlit observatory: physical depth, restrained light, quiet scenery. */
/* Clip decorative projection only at the page edge. The 3D dial itself keeps
   visible overflow and preserve-3d; fixed background layers stay in place. */
html, body { overflow-x: clip; }
:root{--dial-tilt-x:0deg;--dial-tilt-y:0deg;--light-angle:125deg}
.landscape{inset:-3%;background-image:url('moonlit-lake.jpg');background-position:center 61%;opacity:1;transform:scale(1.025);will-change:transform}
.atmosphere{background:linear-gradient(90deg,rgba(3,13,20,.76),rgba(4,15,20,.28) 44%,rgba(4,15,20,.10) 74%,rgba(4,15,20,.25)),linear-gradient(0deg,rgba(4,14,18,.7),transparent 25%,rgba(4,13,20,.10) 80%,rgba(4,13,20,.3));}
.atmosphere::after{display:none}
#stardust{opacity:.27}
.lake-light,.near-mist{position:fixed;inset:0;pointer-events:none;z-index:-1}
.lake-light{background:radial-gradient(ellipse 25% 2% at 75% 76%,rgba(181,167,116,.08),transparent);mix-blend-mode:screen;animation:lake-breath 11s ease-in-out infinite}
.near-mist{top:57%;left:-15%;right:-15%;bottom:4%;background:radial-gradient(ellipse 45% 13% at 25% 53%,#8bada40c,transparent 72%),radial-gradient(ellipse 33% 9% at 72% 76%,#b3b5a709,transparent 75%);animation:near-mist-drift 38s ease-in-out infinite alternate}
.topbar{position:relative;z-index:10}
.brand-seal{background:linear-gradient(135deg,#304638c9,#0c211ec9);box-shadow:2px 3px 0 #081615,4px 6px 12px #0005,inset 0 0 12px #c9a25a1a}
.hero-copy h1{text-shadow:0 5px 26px #0004}.hero-intro{color:#c4ccc4;text-shadow:0 2px 12px #0006}.hero-copy>.eyebrow{color:#d9be87}
.hero-art{perspective:none;perspective-origin:50% 50%;padding-bottom:10px}
.celestial-dial{transform-style:preserve-3d;isolation:auto;transform:scale(1);transition:transform 1.4s cubic-bezier(.2,.65,.2,1);will-change:transform}
.celestial-dial::before{content:'';position:absolute;inset:5%;border-radius:50%;background:radial-gradient(ellipse,#010908aa,#020b0c55 55%,transparent 73%);transform:translateZ(-50px) translateY(36px);filter:blur(17px);pointer-events:none}
.dial-backplate{position:absolute;inset:1.3%;border-radius:50%;background:radial-gradient(circle at 33% 22%,#385044b5,#0d2424b5 51%,#05171be3 100%);box-shadow:0 1px 0 #e5c98c77,0 3px 0 #7d6c42,0 6px 0 #1d3028,0 8px 0 #8a7849,0 11px 0 #14251f,8px 20px 35px #0008,inset 0 0 50px #01131caa;border:1px solid #d8ba7699;transform:translateZ(-5px);pointer-events:none}
.dial-backplate::before{content:'';position:absolute;inset:4px;border:1px solid #d8ba7666;border-radius:50%;box-shadow:inset 0 0 10px #d7c07c22}
.dial-backplate::after{content:'';position:absolute;inset:10px;border-radius:50%;background:conic-gradient(from var(--light-angle),transparent 0deg,rgba(222,208,154,.05) 30deg,transparent 75deg,rgba(215,196,145,.025) 150deg,transparent 230deg,rgba(228,203,144,.06) 300deg,transparent);pointer-events:none}
.dial-svg{display:block;position:relative;transform:translateZ(13px);opacity:.88;filter:drop-shadow(0 1px 1px #0008)}
.dial-svg .orbit-spin,.dial-svg .orbit-reverse,.dial-svg .orbit-slow{transform-box:view-box;transform-origin:300px 300px}
.dial-svg .orbit-line{opacity:.7;stroke-width:.6}.dial-svg .spokes{opacity:.7}.dial-svg .zodiac{fill:#d4bd84}.dial-svg .star-track{opacity:.22}.dial-svg .energy-path{opacity:.3}
.dial-rim{position:absolute;inset:1.2%;border:2px solid #c4a966;border-radius:50%;box-shadow:inset 0 1px 1px #fae8b399,0 2px 1px #071b1c,0 0 15px #d0b3700e;transform:translateZ(17px);pointer-events:none}
.dial-rim::after{content:'';position:absolute;inset:7px;border:1px solid #bb9e5b88;border-radius:50%;box-shadow:0 -1px 0 #e0cb8d44}
.dial-rivet{position:absolute;left:50%;top:50%;width:5px;height:5px;margin:-2.5px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#edda9d,#977a3a 65%,#2a2a1d);box-shadow:0 1px 2px #0009;transform:rotate(var(--rivet-angle)) translateY(var(--rivet-radius)) translateZ(24px);pointer-events:none}
.armillary-hoop{position:absolute;inset:25.5%;border:1px solid #dac07f88;border-radius:50%;box-shadow:0 1px 0 #171f16,0 -1px 0 #f4dca840;transform-style:preserve-3d;pointer-events:none;opacity:.8}
.armillary-hoop.hoop-one{transform:translateZ(35px) rotateZ(-32deg) rotateX(64deg)}
.armillary-hoop.hoop-two{transform:translateZ(34px) rotateZ(58deg) rotateX(67deg);border-color:#a5bc9f66}
.dial-core{width:31%;height:31%;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;background:radial-gradient(circle at 30% 22%,#394735,#20382c 45%,#0c2425 85%);border:1px solid #d5bd79;box-shadow:inset 0 1px 3px #ecdb9b55,inset 0 -8px 18px #03141288,0 3px 0 #6d6241,0 6px 0 #12271f,0 8px 0 #8a7543,0 11px 0 #12231d,6px 19px 25px #0007;transform:translate(-50%,-50%) translateZ(58px);pointer-events:none}
.dial-core::before{content:'';position:absolute;inset:6px;border:1px solid #d4bc7155;border-radius:50%;pointer-events:none}
.dial-core::after{content:'';position:absolute;inset:10px;border-radius:50%;background:linear-gradient(125deg,#fff4bd0d,transparent 45%);pointer-events:none}
.dial-core .hanzi{font-size:clamp(42px,5.3vw,70px);line-height:1.04;text-shadow:0 1px 0 #f5e4b277,0 3px 0 #4d492d,0 5px 9px #0005;color:#e4cd91}
.dial-core .core-label{font-size:11px;margin-top:11px}.dial-core .core-sub{font-size:6px;letter-spacing:.14em;margin-top:7px;opacity:.8}
.element-node{transform:translate(-50%,-50%) translateZ(72px);background:radial-gradient(circle at 28% 22%,#385044,#17312d 52%,#071b20 100%);box-shadow:inset 0 1px 1px #e9e1ac44,inset 0 -4px 7px #00131688,0 3px 0 #61735a,0 6px 0 #13291f,0 7px 0 #61735a66,4px 13px 17px #0008;border-width:1.5px;transition:transform .45s,box-shadow .45s,scale .45s}
.element-node::before{inset:5px;opacity:.32}.element-node .node-hanzi{text-shadow:0 2px 2px #0008}.element-node:hover,.element-node.selected{transform:translate(-50%,-50%) translateZ(87px);scale:1.05;box-shadow:inset 0 1px 2px #e9e1ac66,0 3px 0 #61735a,0 6px 0 #13291f,6px 21px 25px #0008,0 0 28px color-mix(in srgb,var(--element) 14%,transparent)}
.element-caption{position:relative;z-index:2;margin-top:16px;text-shadow:0 2px 12px #0009;color:#d6d9c4}.art-topline{margin-bottom:14px;text-shadow:0 2px 9px #0008}
.journey-choice{background:linear-gradient(135deg,#172b2bd9,#071b21df);border-color:#b3af8c66;box-shadow:inset 0 1px 0 #c8d4b30b,0 4px 0 #04121799,0 12px 22px #0003}.primary-choice{background:linear-gradient(110deg,#6b62343d,#172c2bdd);border-color:#bb9e61}.journey-choice:hover{background:linear-gradient(135deg,#294237ed,#10262bf2);box-shadow:inset 0 1px 0 #c8d4b322,0 5px 0 #04121799,0 17px 27px #0005}
.person-card,.reading-panel{background:linear-gradient(140deg,#1d3732ed,#071e24f2);box-shadow:inset 0 1px 0 #d9cb9420,0 2px 0 #58634c66,4px 14px 30px #0005;backdrop-filter:blur(8px)}
.reveal-pillar{background:linear-gradient(105deg,#48533b,#1c352d 8%,#122d2b 65%,#061a20);box-shadow:inset 2px 1px 1px #d8bd7155,inset -4px 0 10px #0006,2px 0 0 #937e4f,5px 2px 0 #203327,8px 5px 0 #0b1b1b,14px 22px 35px #0006;transform-style:preserve-3d}
.reveal-pillar.ready{box-shadow:inset 2px 1px 1px #d8bd7177,2px 0 0 #a78b4f,5px 2px 0 #203327,8px 5px 0 #0b1b1b,12px 20px 35px #0006,0 0 25px #d2ba6a15}
.reveal-pillar:not(:disabled):hover{transform:translateY(-10px) rotateX(4deg) rotateY(-4deg);box-shadow:inset 2px 1px 1px #d8bd7177,2px 0 0 #a78b4f,5px 2px 0 #203327,8px 5px 0 #0b1b1b,16px 30px 40px #0007}
.reading-seal{box-shadow:inset 0 2px 2px #ead89b33,0 3px 0 #8a774c,0 6px 0 #1a2e26,3px 15px 24px #0006}
.home-footer{color:#bac4b9;background:linear-gradient(transparent,#07161c22)}
@keyframes lake-breath{0%,100%{opacity:.35;transform:scaleX(.95)}50%{opacity:.8;transform:scaleX(1.04)}}
@keyframes near-mist-drift{from{transform:translateX(-2%)}to{transform:translateX(3%)}}
@media(max-width:1050px){.celestial-dial{--dial-tilt-x:0deg;--dial-tilt-y:0deg}.dial-core .core-label{font-size:9px}.dial-core .core-sub{font-size:5px}.dial-rivet{width:4px;height:4px}.hero-art{perspective:none}}
@media(max-width:760px){.landscape{background-position:65% 55%;inset:-2%;transform:none;background-attachment:scroll}.atmosphere{background:linear-gradient(180deg,#03121c88,#04151d44 25%,#04151d22 55%,#04141cc9 100%)}.hero-art{perspective:none;margin-top:27px}.celestial-dial{--dial-tilt-x:0deg;--dial-tilt-y:0deg;max-width:350px}.dial-core{transform:translate(-50%,-50%) translateZ(32px);box-shadow:inset 0 1px 2px #ecdb9b55,inset 0 -4px 9px #03141288,0 2px 0 #6d6241,0 4px 0 #12271f,0 5px 0 #8a7543,3px 11px 15px #0007}.dial-core .hanzi{font-size:40px}.dial-core .core-label{font-size:8px;margin-top:7px}.dial-core .core-sub{font-size:4.5px;letter-spacing:.05em;margin-top:4px}.element-node{transform:translate(-50%,-50%) translateZ(40px)}.element-node:hover,.element-node.selected{transform:translate(-50%,-50%) translateZ(48px)}.element-caption{margin-top:15px;margin-bottom:10px}.armillary-hoop.hoop-one{transform:translateZ(24px) rotateZ(-32deg) rotateX(64deg)}.armillary-hoop.hoop-two{transform:translateZ(23px) rotateZ(58deg) rotateX(67deg)}.hero-copy h1{font-size:clamp(49px,9vw,66px)}.hero-intro{color:#d0d5cc}.person-card,.reading-panel{backdrop-filter:blur(5px)}.reveal-pillar{box-shadow:inset 2px 1px 1px #d8bd7144,2px 0 0 #937e4f,4px 2px 0 #0b1b1b,8px 15px 24px #0006}.near-mist{opacity:.6}}
@media(prefers-reduced-motion:reduce){.landscape{background-image:url('moonlit-lake.jpg');transform:none;transition:none}.celestial-dial{transform:scale(1);transition:none}.near-mist,.lake-light{animation:none}.celestial-dial,.element-node{will-change:auto}}
body.motion-paused .landscape{background-image:url('moonlit-lake.jpg');transform:none;transition:none}body.motion-paused .celestial-dial{transform:scale(1);transition:none}

/* One palette across the landscape, metalwork and reading surfaces. Light is
   reserved for the lettering, raised controls and the primary way forward. */
:root{--paper:#f7f0de;--muted:#c1ccc5;--gold:#e1c383;--gold-bright:#ffe2a2;--line:rgba(220,198,151,.4)}
.atmosphere{background:linear-gradient(90deg,#030d17d9,#06162170 43%,#07172120 74%,#04111d55),linear-gradient(0deg,#030e18c9,transparent 28%,#07131c12 72%,#05121b33)}
.hero-copy h1{color:#fff5df;text-shadow:0 3px 22px #020a1577}.hero-intro{color:#dee4dc}
.topbar .icon-button{background:#071922ba;border-color:#b7ac8777}.topbar .quiet-button,.topbar .close-link{color:#e4e7dc}
.dial-backplate{background:radial-gradient(circle at 31% 18%,#294440,#112c2c 45%,#051b23 85%);border-color:#edcf8b;box-shadow:0 1px 0 #fff0b8aa,0 3px 0 #9f8953,0 6px 0 #12262a,0 8px 0 #b49a5f,0 12px 0 #08171d,9px 23px 40px #010810bb,inset 0 0 55px #000f19cc}
.dial-rim{border-color:#e9ca83;box-shadow:inset 0 1px 1px #fff1bd,0 2px 1px #07151a,0 0 18px #e5c07918}
.dial-svg{opacity:1}.dial-svg .orbit-line{opacity:.85;stroke:#e2c68e;stroke-width:.7}.dial-svg .zodiac{fill:#f1d699}.dial-svg .spokes{opacity:.9}.dial-svg .star-track{opacity:.34}
.dial-core{background:radial-gradient(circle at 32% 20%,#475740,#243e30 48%,#102a28 84%);border-color:#f1d694}
.dial-core::before{border-style:dashed;border-color:#dfc78b88;animation:orbit 72s linear infinite}.dial-core .hanzi{color:#ffe6a8}.dial-core .core-label{color:#f6dda0}.dial-core .core-sub{color:#dbd4ba;opacity:1}
.element-node{--node-light:#36584a;--node-dark:#152f29;color:var(--element);background:radial-gradient(circle at 28% 19%,var(--node-light),var(--node-dark) 65%,#08191e 100%);border-color:var(--element);box-shadow:inset 0 1px 2px #f8efc077,inset 0 -4px 8px #00101699,0 3px 0 color-mix(in srgb,var(--element) 58%,#23312b),0 6px 0 #0a1b1e,0 7px 0 color-mix(in srgb,var(--element) 35%,#152522),4px 15px 21px #000c}
.element-node[data-element="wood"]{--element:#b7e6bd!important;--node-light:#365a43;--node-dark:#193d2c}
.element-node[data-element="fire"]{--element:#ffb28e!important;--node-light:#674139;--node-dark:#392625}
.element-node[data-element="earth"]{--element:#ffe0a0!important;--node-light:#655536;--node-dark:#3c3424}
.element-node[data-element="metal"]{--element:#f5f0dc!important;--node-light:#535b59;--node-dark:#2c3b3d}
.element-node[data-element="water"]{--element:#b3e5ff!important;--node-light:#325c70;--node-dark:#173b50}
.element-node::before{opacity:.5}.element-node small{color:#f2ecda;font-weight:500}.element-node .node-hanzi{text-shadow:0 2px 2px #000b}
.element-caption{color:#f2ead6}.element-caption small{color:#c6d0c6;font-size:8px}.art-topline span:last-child{opacity:1;color:#c7cdbf;font-size:8px}
.journey-choice{background:linear-gradient(115deg,#173334f5,#0a1c29fa);border-color:#b6baa180}.journey-choice small{color:#c7d1c8}
.primary-choice,.primary-choice:hover{background:linear-gradient(115deg,#f3dca4,#d7b976 70%,#c6a567);border-color:#ffe7b1;box-shadow:inset 0 1px 0 #fff7dabb,0 3px 0 #7e683e,0 11px 26px #0006}
.primary-choice strong,.primary-choice .choice-icon,.primary-choice .arrow{color:#182b28}.primary-choice small{color:#29392f}
.private-note,.session-note,.reading-disclaimer{color:#c2ccc2}.home-footer{color:#c1cabd;border-top-color:#d6cfaa44}.home-footer button{color:#dbdcc6}
.person-card,.reading-panel{background:linear-gradient(140deg,#203c37fa,#0a222bf9);border-color:#bca87380}
.person-card input:not([type=checkbox]){background:#051a21;color:#f7f0de;border-color:#819486}.person-card input::placeholder{color:#a9bcb0}
.section-heading>p:last-child,.reading-hero>p:not(.eyebrow){color:#d1dbd1;text-shadow:0 2px 8px #0009}
.reading-panel .count-note,.count-note,.chart-notes,.theme-content p{color:#c5d1c7}.theme-tabs button{color:#c5cec3}.theme-tabs button[aria-selected=true]{color:#ffe2a2;border-bottom-color:#ffe2a2}
.theme-content,.reflection{background:linear-gradient(90deg,#061922b8,#0c242199,#06192270);box-shadow:0 0 40px #06192240}
#zodiac-intro::before{background:radial-gradient(ellipse at 50% 42%,#071a2390,#030e19c7 65%,#020c16ed),url('moonlit-lake.jpg') center 61%/cover no-repeat}
#zodiac-intro .intro-copy p:not(.eyebrow){color:#d1d9cf}#zodiac-intro .intro-copy .eyebrow{color:#e3cb96}#zodiac-intro .intro-top small{opacity:1;color:#c9cfbf}
#zodiac-intro #skip-intro,#zodiac-intro #intro-motion{color:#d5ddce}
#zodiac-intro .intro-enter,#zodiac-intro .intro-enter:hover{background:linear-gradient(115deg,#f1d89e,#cbae70);border-color:#ffe7b1;color:#152a29;box-shadow:inset 0 1px 0 #fff4ceaa,0 3px 0 #78613b,0 10px 25px #0006}
#zodiac-intro .intro-enter span{color:#152a29}
@media(max-width:760px){.atmosphere{background:linear-gradient(180deg,#03101caa,#04151d44 28%,#04151d20 50%,#03121bd9 100%)}.hero-intro{color:#e0e5dc}.element-caption small{font-size:7px}.theme-content,.reflection{margin-inline:-5px;padding-inline:10px}}

/* Construction detail: an aged brass drum, separate jade faces, and the dark
   contact lines where those materials meet. No filter on the 3D parent. */
:root{--dial-tilt-x:0deg;--dial-tilt-y:0deg}
.hero-art{perspective:none;perspective-origin:50% 50%}
.celestial-dial{--coin-height:88px;--coin-hover-height:105px;--seal-height:84px;transition:transform 1s cubic-bezier(.18,.7,.22,1)}
.dial-drum{position:absolute;inset:1.1%;border-radius:50%;background:conic-gradient(from var(--light-angle),#c6a56b,#51452e 13%,#a88b50 27%,#26372f 46%,#8f784a 64%,#dfc184 83%,#6a5838);border:3px ridge #c2a46a;box-shadow:inset 0 0 0 3px #172b29,inset 0 0 0 6px #ac905555,0 3px 0 #ddbd75,0 7px 0 #5c5035,0 10px 0 #b3985c,0 14px 0 #172820,0 19px 0 #6f5c38,0 23px 0 #07171d,14px 35px 44px #010910c9;transform:translateZ(-25px);pointer-events:none}
.dial-drum::before{content:'';position:absolute;inset:3px;border:2px dashed #e0bd775c;border-radius:50%;box-shadow:inset 0 1px 0 #ffeeae33;pointer-events:none}
.dial-backplate{box-shadow:inset 0 2px 3px #f2db9a66,inset 0 -7px 14px #001018bb,0 2px 0 #efd191,0 5px 0 #6c5b37,0 8px 0 #b99c60,0 12px 0 #11282c,4px 17px 20px #000a;transform:translateZ(-2px)}
.dial-backplate::before{inset:7px;border-width:2px;border-color:#c7a96a99;box-shadow:0 1px 0 #081b20,inset 0 1px 0 #edce8d66}
.dial-backplate::after{inset:12px;background:conic-gradient(from var(--light-angle),transparent 0deg,#f3df9f08 24deg,transparent 65deg,#c7a96a06 140deg,transparent 215deg,#f3df9f08 300deg,transparent)}
.dial-rim{inset:.9%;border:4px ridge #d3b578;box-shadow:inset 0 2px 1px #fff0b8c9,inset 0 -3px 2px #3a3b2777,0 3px 0 #172a2a,0 5px 0 #b1975c,0 7px 0 #07191f,2px 10px 12px #0007;transform:translateZ(25px)}
.dial-rim::after{inset:8px;border-width:2px;border-color:#bc9e62b3;box-shadow:0 1px 0 #02131b,inset 0 1px 0 #f6da9355}
.dial-rivet{width:7px;height:7px;margin:-3.5px;border:1px solid #8a713e;box-shadow:inset 0 1px 0 #fff0acaa,1px 2px 0 #675535,2px 4px 4px #000a;transform:rotate(var(--rivet-angle)) translateY(var(--rivet-radius)) translateZ(34px)}
.dial-rivet::after{content:'';position:absolute;left:1px;right:1px;top:2px;height:1px;background:#55482d;box-shadow:0 1px 0 #dec28277;transform:rotate(25deg)}
.armillary-hoop{border-width:2px;box-shadow:0 2px 0 #6c5d37,0 3px 1px #061a20,0 -1px 0 #f4dca877;opacity:1}
.armillary-hoop.hoop-one{transform:translateZ(43px) rotateZ(-32deg) rotateX(64deg)}
.armillary-hoop.hoop-two{transform:translateZ(42px) rotateZ(58deg) rotateX(67deg)}
.seal-plinth{position:absolute;left:50%;top:50%;width:34%;height:34%;border-radius:50%;border:5px ridge #c3a56c;background:radial-gradient(circle,#142b24 61%,#826d40 63%,#d0b17a 68%,#2b392d 73%);box-shadow:inset 0 2px 1px #f7dba777,0 4px 0 #3e4830,0 8px 0 #b3965c,0 12px 0 #152b26,4px 18px 17px #000b;transform:translate(-50%,-50%) translateZ(51px);pointer-events:none}
.seal-plinth::before{content:'';position:absolute;inset:3px;border:1px dashed #e6cb87aa;border-radius:50%;pointer-events:none}
.dial-core{border:2px solid #e4c88a;transform:translate(-50%,-50%) translateZ(var(--seal-height));transform-style:preserve-3d;box-shadow:inset 0 2px 2px #f1dba37a,inset 0 -10px 16px #011b19aa,0 3px 0 #857447,0 6px 0 #142d25,0 9px 0 #bea267,0 12px 0 #34472e,0 16px 0 #11231e,7px 24px 25px #000b}
.dial-core::after{inset:11px;background:linear-gradient(125deg,#f2e0ae0a,transparent 37%);border-top:1px solid #eee0b21c}
.dial-core .hanzi{transform:translateZ(5px);text-shadow:0 1px 0 #fff0c188,0 2px 0 #998450,0 4px 0 #263c28,2px 6px 6px #00161099}
.dial-core .core-label{transform:translateZ(3px);text-shadow:0 1px 1px #0009}
.element-node{transform:translate(-50%,-50%) translateZ(var(--coin-height));transform-style:preserve-3d;isolation:auto;border:2px ridge var(--element);box-shadow:inset 0 2px 1px #f4eac177,inset 0 -5px 8px #001116cc,0 2px 0 color-mix(in srgb,var(--element) 66%,#26382c),0 5px 0 #152a24,0 8px 0 color-mix(in srgb,var(--element) 52%,#38402a),0 11px 0 #10211f,4px 18px 16px #000a;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,scale .45s}
.element-node::before{inset:5px;border:1px solid currentColor;opacity:.58;box-shadow:inset 0 1px 0 #f5ebba33,0 1px 0 #061a1dc9}
.coin-collar{position:absolute;inset:-5px;border-radius:50%;border:3px double color-mix(in srgb,var(--element) 60%,#867044);background:var(--node-dark);box-shadow:0 2px 0 #102421,0 4px 0 color-mix(in srgb,var(--element) 35%,#34412b),0 6px 0 #07191c;transform:translateZ(-13px);pointer-events:none}
.element-node .node-hanzi{transform:translateZ(4px);text-shadow:0 1px 0 #f2e3bb33,0 3px 0 color-mix(in srgb,var(--element) 28%,#152b22),1px 5px 5px #000b}
.element-node small{transform:translateZ(3px);text-shadow:0 1px 1px #000}
.element-node:hover,.element-node.selected{transform:translate(-50%,-50%) translateZ(var(--coin-hover-height));scale:1.045;box-shadow:inset 0 2px 1px #f4eac199,inset 0 -5px 8px #001116cc,0 3px 0 color-mix(in srgb,var(--element) 66%,#26382c),0 7px 0 #152a24,0 11px 0 color-mix(in srgb,var(--element) 52%,#38402a),0 14px 0 #10211f,7px 27px 22px #000b}
.element-node:active{transform:translate(-50%,-50%) translateZ(calc(var(--coin-height) - 3px));scale:1}

/* Small controls are inset into brass; the larger actions stand on a shallow
   foot. Touch and keyboard operation retain the same readable geometry. */
.brand-seal{border-color:#e6c98e;box-shadow:inset 0 1px 1px #ffe8ae66,inset 0 -4px 6px #00131acc,1px 2px 0 #8f7848,3px 5px 0 #18312a,5px 7px 0 #79663b,6px 11px 13px #0008;text-shadow:0 2px 0 #2b3c29,0 3px 3px #0008}
.topbar .icon-button{background:radial-gradient(circle at 34% 22%,#324b41,#112d2c 52%,#061b24);border:2px ridge #bba474;box-shadow:inset 0 1px 1px #f9e5b144,inset 0 -3px 5px #00121bcc,0 2px 0 #837347,0 4px 0 #11251f,2px 7px 10px #0008;transition:transform .22s,box-shadow .22s}
.topbar .icon-button:hover,.topbar .icon-button[aria-pressed=true]{background:radial-gradient(circle at 34% 22%,#46573d,#203d30 52%,#09232a);border-color:#e8cc8f}
.topbar .icon-button:hover{transform:none}
.topbar .icon-button:active{transform:none;box-shadow:inset 0 2px 4px #0008,0 1px 0 #806a3e,1px 3px 6px #0007}
.topbar .quiet-button{padding:8px 11px;border:1px solid #b5a37377;border-radius:2px;background:linear-gradient(115deg,#203b34ed,#091d27e8);box-shadow:inset 0 1px 0 #e3cd922b,0 2px 0 #665b3977,0 4px 8px #0005}
.journey-choice,.journey-choice:hover,.gold-button,.gold-button:hover,.outline-button,.outline-button:hover{transform:none;transition:box-shadow .3s,border-color .3s,background .3s}
.journey-choice{border-bottom-width:2px;box-shadow:inset 0 1px 1px #e0d9ac2e,inset 0 -3px 6px #00121bb3,0 3px 0 #58705a,0 6px 0 #0a2025,0 8px 0 #314b3d,5px 16px 21px #0008}
.journey-choice>span,.gold-button>span,.outline-button>span{transform:translateZ(3px)}
.primary-choice,.primary-choice:hover,.gold-button,.gold-button:hover{box-shadow:inset 0 2px 1px #fff8d1a8,inset 0 -3px 4px #866a3533,0 2px 0 #b89958,0 5px 0 #6d5734,0 7px 0 #c0a064,0 9px 0 #3f3d2b,5px 18px 24px #0008}
.outline-button{background:linear-gradient(115deg,#213b32,#0b2429);border-color:#cdb47a;box-shadow:inset 0 1px 0 #e2d19c44,inset 0 -3px 4px #00121b88,0 3px 0 #65714c,0 6px 0 #12291f,3px 13px 17px #0008}
.journey-choice:active,.gold-button:active,.outline-button:active{transform:none;box-shadow:inset 0 2px 4px #172b2433,0 2px 0 #6f653f,1px 5px 8px #0007}

/* Stationary recessed fields inside thick framed panels. Reading panels only
   lean a little; their text remains on a single plane. */
.person-card,.reading-panel{border:1px solid #c2ac78;border-right:3px solid #5e6648;border-bottom:3px solid #706342;border-radius:4px;box-shadow:inset 0 2px 1px #efe0b33b,inset 0 -5px 8px #00182080,0 3px 0 #a18b57,0 6px 0 #273f31,0 9px 0 #0b242b,7px 22px 30px #0009}
.person-card::after{inset:8px;border-color:#b9a17066;border-radius:1px;box-shadow:inset 0 1px 0 #ecd49b1a,0 1px 0 #03182080}
.person-heading .person-symbol{background:radial-gradient(circle at 30% 25%,#42543b,#1b382b 67%,#0c2527);border:2px ridge #d3b981;box-shadow:inset 0 1px 1px #ffedbb44,0 2px 0 #8a7748,0 4px 0 #20372a,2px 7px 9px #0008;text-shadow:0 2px 2px #00120db3}
.person-card input:not([type=checkbox]){border:1px solid #99aa96;border-top-color:#1c352e;border-left-color:#355044;box-shadow:inset 2px 3px 6px #000c,inset -1px -1px 0 #78947b22,0 1px 0 #d7cf9e55;transition:border-color .2s,box-shadow .2s}
.person-card input:not([type=checkbox]):focus{border-color:#e6ce95;box-shadow:inset 2px 3px 5px #000b,0 0 0 2px #d4bb7833,0 2px 0 #eee0ae44}
.unknown-label input{box-shadow:0 2px 0 #00121766}
.reading-panel{transform:none}
.compact-pillar{background:linear-gradient(125deg,#29423666,#0b232a99);border:1px solid #ac97625c;border-bottom:2px solid #5c6140;border-radius:2px;box-shadow:inset 0 1px 0 #e5d09e22,0 2px 0 #061b20,1px 5px 8px #0004;padding-bottom:8px}
.compact-pillar strong{text-shadow:0 2px 0 #1d3528,1px 4px 4px #0006}
.theme-tabs{gap:10px;padding:2px 3px 7px;border-bottom-color:#b5a17066}
.theme-tabs button{padding:11px 14px;border:1px solid #a6956a66;border-bottom:2px solid #3d543d;border-radius:3px 3px 1px 1px;background:linear-gradient(120deg,#20372ff0,#0a222bea);box-shadow:inset 0 1px 0 #e5d59a22,0 3px 0 #0c2224,1px 5px 7px #0005;transition:transform .2s,background .2s}
.theme-tabs button[aria-selected=true]{border-color:#d6bd83;background:linear-gradient(120deg,#3a4732,#17352c);box-shadow:inset 0 1px 0 #eddb9c55,0 2px 0 #9d8952,0 4px 0 #182e24,2px 7px 9px #0007;transform:translateY(-2px)}
.theme-content,.reflection{border:1px solid #b9a47766;border-bottom:3px solid #526044;border-radius:3px;box-shadow:inset 0 1px 0 #d7c9962b,0 3px 0 #092027,3px 11px 22px #0006}
.theme-content{padding:24px 22px}
.reading-seal{border:3px ridge #d8bc81;background:radial-gradient(circle at 30% 22%,#48563c,#1b382b 60%,#0d2628);box-shadow:inset 0 2px 2px #eddfaa66,inset 0 -5px 9px #00151199,0 3px 0 #9d8750,0 6px 0 #253d2b,0 9px 0 #b3985a,0 12px 0 #102823,4px 22px 27px #000a;text-shadow:0 2px 0 #263b29,2px 5px 5px #0007}
.reveal-pillar{border-right:3px solid #76815c;border-bottom:4px solid #817044;box-shadow:inset 2px 2px 2px #e5cf8c66,inset -5px -3px 8px #00151dcc,3px 0 0 #b49c61,6px 3px 0 #314d37,10px 6px 0 #87734a,13px 9px 0 #102729,19px 28px 32px #000a}
.reveal-pillar.ready{box-shadow:inset 2px 2px 2px #e5cf8c88,inset -5px -3px 8px #00151dcc,3px 0 0 #b49c61,6px 3px 0 #314d37,10px 6px 0 #87734a,13px 9px 0 #102729,19px 28px 32px #000a}
.reveal-pillar:not(:disabled):hover{transform:translateY(-9px) rotateX(5deg) rotateY(-5deg);box-shadow:inset 2px 2px 2px #e5cf8c88,inset -5px -3px 8px #00151dcc,3px 0 0 #c6aa67,6px 3px 0 #314d37,10px 6px 0 #87734a,13px 9px 0 #102729,23px 34px 38px #000b}
@keyframes pillar-breathe{0%,100%{border-color:#bda060}50%{border-color:#ffe4a6}}

@media(max-width:1050px){.celestial-dial{--dial-tilt-x:0deg;--dial-tilt-y:0deg;--coin-height:70px;--coin-hover-height:84px;--seal-height:68px}.hero-art{perspective:none}.seal-plinth{transform:translate(-50%,-50%) translateZ(41px)}}
@media(max-width:760px){.hero-art{perspective:none}.celestial-dial{--dial-tilt-x:0deg;--dial-tilt-y:0deg;--coin-height:46px;--coin-hover-height:55px;--seal-height:45px}.dial-drum{border-width:2px;transform:translateZ(-17px);box-shadow:inset 0 0 0 3px #172b29,0 3px 0 #c4a360,0 6px 0 #53603d,0 10px 0 #8f7845,0 14px 0 #092028,7px 23px 26px #010910b3}.dial-rim{border-width:3px;transform:translateZ(19px)}.dial-rivet{width:5px;height:5px;margin:-2.5px;transform:rotate(var(--rivet-angle)) translateY(var(--rivet-radius)) translateZ(25px)}.dial-rivet::after{top:1px;left:0;right:0}.seal-plinth{border-width:3px;transform:translate(-50%,-50%) translateZ(28px);box-shadow:0 3px 0 #647047,0 6px 0 #a58b52,0 9px 0 #0d2b25,3px 13px 14px #0009}.dial-core{box-shadow:inset 0 2px 1px #f1dba355,inset 0 -6px 9px #011b19aa,0 2px 0 #8b7847,0 4px 0 #142d25,0 6px 0 #b89c60,0 9px 0 #163427,3px 15px 17px #0009}.armillary-hoop.hoop-one{transform:translateZ(28px) rotateZ(-32deg) rotateX(64deg)}.armillary-hoop.hoop-two{transform:translateZ(27px) rotateZ(58deg) rotateX(67deg)}.coin-collar{inset:-3px;border-width:2px;transform:translateZ(-9px)}.element-node{box-shadow:inset 0 2px 1px #f4eac166,inset 0 -4px 6px #001116cc,0 2px 0 color-mix(in srgb,var(--element) 60%,#26382c),0 4px 0 #152a24,0 6px 0 color-mix(in srgb,var(--element) 44%,#38402a),0 8px 0 #10211f,3px 12px 13px #0009}.person-card,.reading-panel{box-shadow:inset 0 2px 1px #efe0b333,0 3px 0 #947c4c,0 5px 0 #243d30,0 7px 0 #0b242b,4px 15px 23px #0008}.theme-tabs{gap:8px}.theme-tabs button{padding:10px 12px}.theme-content{padding:22px 16px}.reveal-pillar,.reveal-pillar.ready{border-right-width:2px;border-bottom-width:3px;box-shadow:inset 2px 2px 1px #e5cf8c55,inset -3px -2px 5px #00151daa,2px 0 0 #b49c61,4px 2px 0 #314d37,6px 4px 0 #87734a,8px 6px 0 #102729,10px 17px 22px #0009}}
@media(prefers-reduced-motion:reduce){.journey-choice,.journey-choice:hover,.gold-button,.gold-button:hover,.outline-button,.outline-button:hover,.reading-panel,.topbar .icon-button,.theme-tabs button{transform:none!important;transition:none!important}.element-node,.element-node:hover,.element-node.selected{transform:translate(-50%,-50%) translateZ(var(--coin-height))!important;scale:1!important}}
body.motion-paused :is(.journey-choice,.gold-button,.outline-button,.reading-panel,.topbar .icon-button,.theme-tabs button){transform:none!important;transition:none!important}body.motion-paused .element-node,body.motion-paused .element-node:hover,body.motion-paused .element-node.selected{transform:translate(-50%,-50%) translateZ(var(--coin-height))!important;scale:1!important}

/* The instrument stays centered and faces the viewer. Its camera only moves
   gently inward and outward; the physical rings and material effects move independently. */
.celestial-dial {
  perspective: 1250px;
  perspective-origin: 50% 50%;
  --ring-height: 21px; --hoop-one-height: 43px; --hoop-two-height: 42px;
  animation: compass-camera 22s ease-in-out infinite;
  animation-play-state: paused;
  transition: none;
  transform-origin: 50% 50%;
  transform: scale(1);
}
.celestial-dial::before { animation: compass-contact-shadow 22s ease-in-out infinite; animation-play-state: paused; }
.celestial-dial.compass-arriving { animation: compass-arrival 5.2s cubic-bezier(.16,.57,.27,1) both; animation-play-state: paused; }
.celestial-dial .dial-core { animation: compass-seal-rise 10.6s ease-in-out infinite; animation-play-state: paused; }
.dial-azimuth-ring {
  position: absolute; inset: 7.8%; border-radius: 50%; pointer-events: none;
  border: 1px dashed #d6bb79a6; outline: 1px solid #b49c6240; outline-offset: 5px;
  box-shadow: 0 1px 0 #05151d, inset 0 1px 0 #e8cf8733;
  transform: translateZ(var(--ring-height));
  animation: compass-azimuth 80s linear infinite; animation-play-state: paused;
}
.dial-azimuth-ring::before,
.dial-azimuth-ring::after {
  content: ''; position: absolute; left: calc(50% - 3px); top: -4px; width: 6px; height: 6px;
  transform: rotate(45deg); background: #ead293; box-shadow: 0 1px 3px #000b;
}
.dial-azimuth-ring::after { top: auto; bottom: -4px; background: #b39960; }
.dial-brass-glint {
  position: absolute; inset: .1%; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 15deg, transparent 0deg, #ffecc080 16deg, #fff3c7c2 22deg, #fce2a82e 31deg, transparent 46deg, transparent 192deg, #ffe8a545 214deg, transparent 238deg);
  -webkit-mask: radial-gradient(circle, transparent 65%, #000 66%, #000 69.5%, transparent 70%);
  mask: radial-gradient(circle, transparent 65%, #000 66%, #000 69.5%, transparent 70%);
  transform: translateZ(31px); opacity: .58;
  animation: compass-rim-light 19s linear infinite; animation-play-state: paused;
}
.seal-luster {
  position: absolute; inset: 2px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from -45deg, transparent 0deg, #f6e8b517 20deg, transparent 61deg, transparent 220deg, #f8dea10d 245deg, transparent 280deg);
  animation: compass-seal-light 24s linear infinite; animation-play-state: paused;
}
.dial-backplate::after { animation: compass-face-light 33s linear infinite; animation-play-state: paused; }
.armillary-hoop.hoop-one { animation: compass-hoop-one 37s linear infinite; animation-play-state: paused; }
.armillary-hoop.hoop-two { animation: compass-hoop-two 49s linear infinite reverse; animation-play-state: paused; }
.celestial-dial .element-node,
.celestial-dial .element-node:hover,
.celestial-dial .element-node.selected,
.celestial-dial .element-node:active {
  transform: translate(-50%, -50%) translateZ(var(--coin-height)); scale: 1;
  animation: compass-coin-float 8.7s var(--coin-delay, 0s) ease-in-out infinite;
  animation-play-state: paused;
  transition: border-color .3s, background .3s, box-shadow .3s;
}
.celestial-dial .dial-svg .orbit-spin { animation-duration: 96s; }
.celestial-dial .dial-svg .orbit-reverse { animation-duration: 73s; }
.celestial-dial .dial-svg .orbit-slow { animation-duration: 120s; }
.celestial-dial .dial-svg *, .celestial-dial .dial-core::before { animation-play-state: paused; }
body.compass-running .celestial-dial,
body.compass-running .celestial-dial::before,
body.compass-running .celestial-dial .dial-svg *,
body.compass-running .celestial-dial .dial-core::before,
body.compass-running .celestial-dial :is(.dial-azimuth-ring, .dial-brass-glint, .seal-luster, .armillary-hoop, .element-node, .dial-core),
body.compass-running .celestial-dial .dial-backplate::after { animation-play-state: running; }
.landscape { animation: landscape-dolly 48s ease-in-out infinite; animation-play-state: paused; }
.near-mist, .lake-light { animation-play-state: paused; }
body.scene-running :is(.landscape, .near-mist, .lake-light) { animation-play-state: running; }
.journey-choice:hover, .journey-choice:active,
.gold-button:hover, .gold-button:active,
.outline-button:hover, .outline-button:active,
.reveal-pillar:not(:disabled):hover { transform: none; }
/* Hover changes pigment and edging only; geometry and cast shadows stay put. */
.journey-choice { --action-shadow: inset 0 1px 1px #e0d9ac2e, inset 0 -3px 6px #00121bb3, 0 3px 0 #58705a, 0 6px 0 #0a2025, 0 8px 0 #314b3d, 5px 16px 21px #0008; }
.primary-choice, .gold-button { --action-shadow: inset 0 2px 1px #fff8d1a8, inset 0 -3px 4px #866a3533, 0 2px 0 #b89958, 0 5px 0 #6d5734, 0 7px 0 #c0a064, 0 9px 0 #3f3d2b, 5px 18px 24px #0008; }
.outline-button { --action-shadow: inset 0 1px 0 #e2d19c44, inset 0 -3px 4px #00121b88, 0 3px 0 #65714c, 0 6px 0 #12291f, 3px 13px 17px #0008; }
:is(.journey-choice, .gold-button, .outline-button),
:is(.journey-choice, .gold-button, .outline-button):hover,
:is(.journey-choice, .gold-button, .outline-button):active { transform: none; box-shadow: var(--action-shadow); }
.celestial-dial .element-node,
.celestial-dial .element-node:hover,
.celestial-dial .element-node.selected,
.celestial-dial .element-node:active { box-shadow: inset 0 2px 1px #f4eac177, inset 0 -5px 8px #001116cc, 0 2px 0 color-mix(in srgb,var(--element) 66%,#26382c), 0 5px 0 #152a24, 0 8px 0 color-mix(in srgb,var(--element) 52%,#38402a), 0 11px 0 #10211f, 4px 18px 16px #000a; }
.topbar .icon-button:hover,
.topbar .icon-button:active { transform: none; box-shadow: inset 0 1px 1px #f9e5b144, inset 0 -3px 5px #00121bcc, 0 2px 0 #837347, 0 4px 0 #11251f, 2px 7px 10px #0008; }
.reveal-pillar:not(:disabled):hover { box-shadow: inset 2px 2px 2px #e5cf8c66, inset -5px -3px 8px #00151dcc, 3px 0 0 #b49c61, 6px 3px 0 #314d37, 10px 6px 0 #87734a, 13px 9px 0 #102729, 19px 28px 32px #000a; }
@keyframes compass-arrival {
  from { transform: scale(.955); }
  to { transform: scale(.985); }
}
@keyframes compass-camera {
  0%, 100% { transform: scale(.985); }
  31% { transform: scale(1.005); }
  67% { transform: scale(.993); }
}
@keyframes compass-contact-shadow {
  0%, 100% { opacity: .85; transform: translateZ(-50px) translateY(36px) scale(.96); }
  31% { opacity: .65; transform: translateZ(-50px) translateY(40px) scale(1.02); }
  67% { opacity: .9; transform: translateZ(-50px) translateY(31px) scale(.97); }
}
@keyframes compass-azimuth { to { transform: translateZ(var(--ring-height)) rotateZ(360deg); } }
@keyframes compass-rim-light { to { transform: translateZ(31px) rotateZ(360deg); } }
@keyframes compass-seal-light { to { transform: rotate(360deg); } }
@keyframes compass-face-light { to { transform: rotate(360deg); } }
@keyframes compass-hoop-one { from { transform: translateZ(var(--hoop-one-height)) rotateZ(-32deg) rotateX(64deg); } to { transform: translateZ(var(--hoop-one-height)) rotateZ(328deg) rotateX(64deg); } }
@keyframes compass-hoop-two { from { transform: translateZ(var(--hoop-two-height)) rotateZ(58deg) rotateX(67deg); } to { transform: translateZ(var(--hoop-two-height)) rotateZ(418deg) rotateX(67deg); } }
@keyframes compass-coin-float { 0%, 100% { transform: translate(-50%,-50%) translateY(2px) translateZ(var(--coin-height)); } 50% { transform: translate(-50%,-50%) translateY(-3px) translateZ(calc(var(--coin-height) + 5px)); } }
@keyframes compass-element-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes compass-seal-rise { 0%, 100% { transform: translate(-50%,-50%) translateZ(var(--seal-height)); } 50% { transform: translate(-50%,-50%) translateZ(calc(var(--seal-height) + 8px)); } }
@keyframes landscape-dolly { 0%, 100% { transform: translate3d(-3px, 1px, 0) scale(1.025); } 50% { transform: translate3d(4px, -2px, 0) scale(1.04); } }
@media (max-width: 760px) {
  .celestial-dial { perspective: 950px; --ring-height: 17px; --hoop-one-height: 28px; --hoop-two-height: 27px; }
  .dial-brass-glint { opacity: .48; }
  .landscape { animation-name: none; transform: none; }
}
/* Explicitly include pseudo-elements and nested SVG animations when suspended. */
body.scene-suspended *, body.scene-suspended *::before, body.scene-suspended *::after { animation-play-state: paused !important; }
body.motion-paused .celestial-dial, body.motion-paused .celestial-dial *,
body.motion-paused .celestial-dial::before, body.motion-paused .celestial-dial *::before,
body.motion-paused .celestial-dial *::after { animation: none !important; }
body.motion-paused .celestial-dial { transform: scale(1); }
/* Keep these timelines alive while paused, overriding the legacy animation reset.
   Separate counter-rotating anchors preserve upright coins and their material effects. */
.element-orbit { position: absolute; inset: 0; z-index: 2; transform-style: preserve-3d; pointer-events: none; }
.element-orbit-anchor { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; transform-style: preserve-3d; }
.element-orbit-anchor > .element-node { left: 0; top: 0; pointer-events: auto; }
.element-orbit-lines { transform-box: view-box; transform-origin: 300px 300px; }
#home-dial .element-orbit-motion { animation: compass-element-orbit 120s linear infinite !important; animation-play-state: paused !important; }
#home-dial .element-orbit-upright { animation-direction: reverse !important; }
body.compass-running:not(.motion-paused):not(.scene-suspended) #home-dial .element-orbit-motion { animation-play-state: running !important; }
@media (prefers-reduced-motion: reduce) {
  #home-dial .element-orbit-motion { animation: none !important; }
  .celestial-dial, .celestial-dial *, .celestial-dial::before,
  .celestial-dial *::before, .celestial-dial *::after,
  .landscape, .lake-light, .near-mist { animation: none !important; transition: none !important; }
  .celestial-dial { transform: scale(1); will-change: auto; }
}