:root{color-scheme:dark;--bg:#080505;--panel:#170d0d;--panel2:#251111;--line:#653332;--ink:#f8eeee;--muted:#cbaead;--red:#d94c44;--redlight:#ffb0a3;--gold:#e3b56e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;min-height:100vh;overflow-x:hidden;line-height:1.7;color:var(--ink);background:radial-gradient(ellipse at 48% 0%,#451417 0%,#170909 39%,#070505 77%)}
.wrap{width:min(1120px,calc(100% - 32px));margin:auto;position:relative;z-index:1}
.ambient{position:fixed;pointer-events:none;inset:0;opacity:.4}.ambient-one{background:radial-gradient(circle at 8% 23%,#971e252b,transparent 27%),radial-gradient(circle at 85% 67%,#872b2925,transparent 32%)}.ambient-two{background-image:radial-gradient(circle,#e9a29426 1px,transparent 2px);background-size:70px 70px;mask-image:linear-gradient(to bottom,#000,transparent 88%);opacity:.17}
h1,h2,h3,p{margin-top:0}h1{font-size:clamp(2.5rem,7vw,4.7rem);line-height:1.08;margin-bottom:14px;color:#ffe0dc;text-shadow:0 0 25px #e1495030}h1 span{display:block;font-size:.48em;letter-spacing:.12em;color:var(--redlight);margin-top:9px}
h2{font-size:clamp(1.5rem,4vw,2.2rem);line-height:1.3;color:#ffd1c9;margin:0 0 10px}h3{color:#ffd1c9;font-size:1.05rem;margin:0 0 12px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.74rem;color:#ff8179;font-weight:800;margin:0 0 8px}.tagline,.muted{color:var(--muted)}
.hero{padding:54px 0 27px;text-align:left}.hero .tagline{margin-bottom:0}
.notice,.panel{border:1px solid var(--line);box-shadow:0 18px 60px #0005}.notice{display:flex;flex-wrap:wrap;gap:7px 12px;padding:15px 18px;background:#270f11db;border-radius:16px;margin-bottom:20px}.notice strong{color:#ffc1b4}.notice span{color:#ddbbbb}
.panel{background:linear-gradient(180deg,#1b0f0ff7,#100a0af9);padding:clamp(18px,4vw,30px);border-radius:24px;margin-bottom:22px}
.section-head{display:flex;flex-direction:column;align-items:stretch;gap:0;margin-bottom:18px}.section-head .today-date{display:block;margin:3px 0 0}
.status{padding:12px 14px;border-radius:12px;background:#240f10;border:1px solid #65302e;color:#dac0bc;margin-bottom:19px}.status.ok{color:#e6c9b1}.status.error{color:#ffaaaa}
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.pillar{border:1px solid #6e3632;background:linear-gradient(155deg,#301617,#180c0c);border-radius:15px;padding:17px;text-align:center}.pillar small{display:block;color:var(--muted);font-size:.8rem}.pillar strong{display:block;color:#ffd3b7;font-size:clamp(1.5rem,4vw,2.2rem);letter-spacing:.14em}
.calendar-details{border-top:1px solid #703a3555;margin-top:24px;padding-top:13px}.calendar-details summary{display:flex;justify-content:space-between;gap:15px;cursor:pointer;color:#ffd0c9;font-weight:650;list-style:none}.calendar-details summary::-webkit-details-marker{display:none}.calendar-details p{margin:14px 0 0;color:var(--muted);line-height:1.8;text-align:justify}.toggle-label{color:var(--muted);font-size:.83rem;font-weight:400}.calendar-details[open] .toggle-label{font-size:0}.calendar-details[open] .toggle-label:after{content:"Close";font-size:.83rem}
.selector-panel{text-align:center}.selector-panel .intro,.knowledge-panel .intro{max-width:740px;margin:0 auto 20px;color:var(--muted)}.tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:22px auto 25px;max-width:740px}.tabs button{background:#230f11;color:#f3d4cf;border:1px solid #77403b;border-radius:14px;font:inherit;font-weight:700;cursor:pointer;padding:13px 10px;transition:background .2s,border-color .2s,transform .2s}.tabs button span{display:block;color:#d9a49a;font-size:.85rem;font-weight:500}.tabs button.active{background:linear-gradient(180deg,#922b31,#5a1e23);border-color:#f2877d;color:#fff4f1;box-shadow:0 0 20px #c43c4338}.tabs button.active span{color:#ffe1da}
.animal-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;max-width:880px;margin:auto}.animal{min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;font:inherit;color:#eec9c4;background:radial-gradient(circle at top,#36191b,#1c1011 75%);border:1px solid #71403d;border-radius:17px;padding:13px 6px;transition:transform .2s,border-color .2s,background .2s}.animal .han{color:#ffb7a7;font-size:clamp(1.65rem,3vw,2.15rem);font-weight:750;line-height:1.25}.animal.active{border-color:#ffaca0;background:linear-gradient(160deg,#8a2c32,#46191d);box-shadow:0 0 22px #c0383e33;transform:translateY(-2px)}.animal:hover,.tabs button:hover{border-color:#ffa29b}.animal:focus-visible,.tabs button:focus-visible,summary:focus-visible{outline:2px solid #ff8b83;outline-offset:3px}
.reading-toggle{list-style:none;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;gap:6px}.reading-toggle::-webkit-details-marker{display:none}.reading-toggle>.toggle-label{align-self:flex-end}.reading-panel[open]>.reading-toggle>.toggle-label{font-size:0}.reading-panel[open]>.reading-toggle>.toggle-label:after{content:"Close";font-size:.83rem}.reading-head{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:0}.reading-title{display:block;font-size:clamp(1.6rem,4vw,2.4rem);font-weight:750;color:#ffdad2;line-height:1.3}.reading-subtitle{display:block;margin-top:7px;font-size:.91rem}.seal{height:78px;width:78px;flex:0 0 78px;border:2px solid #aa4643;border-radius:50%;display:grid;place-items:center;color:#e97f78;font-size:1.35rem;font-weight:700;letter-spacing:.08em;background:#391616}
.reading-body{border-top:1px solid #6f383755;margin-top:20px;padding-top:18px}.reading-intro{margin:0 0 18px}.relationship-tags{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}.tag{padding:5px 13px;background:#582326;color:#ffd3cd;border:1px solid #a84c4c;border-radius:99px;font-size:.9rem;font-weight:650}
.reading p,.knowledge p{text-align:justify;text-justify:inter-word;hyphens:auto;overflow-wrap:break-word;line-height:1.85;margin:0 0 18px}.reading p+p{margin-top:18px}.reading .context{border-top:1px solid #6f383755;padding-top:18px;margin-top:25px;color:var(--muted);font-size:.91rem}
.knowledge-panel .intro{max-width:none;margin:0 0 16px}.knowledge details{border-bottom:1px solid #68363577;padding:15px 0}.knowledge summary{display:flex;align-items:center;justify-content:space-between;gap:12px;cursor:pointer;color:#ffc7be;font-weight:700;list-style:none}.knowledge summary::-webkit-details-marker{display:none}.knowledge .plus{font-size:1.35rem;color:#f0877a;transition:transform .2s}.knowledge details[open] .plus{transform:rotate(45deg)}.knowledge p{margin:14px 0 2px;color:#e5c9c5}
.footer{padding:6px 0 45px;font-size:.88rem;color:var(--muted);text-align:center}.footer a{color:#f2a399;text-decoration:none}.footer a:hover{text-decoration:underline}
@media(max-width:680px){.hero{padding:35px 0 24px}.pillars{gap:8px}.pillar{padding:13px 7px}.animal-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.animal{padding:12px 4px}.tabs{gap:7px}.tabs button{padding:11px 5px}.seal{width:60px;height:60px;flex-basis:60px;font-size:1.05rem}}
@media(max-width:380px){.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.pillar strong{font-size:1.35rem}.tabs button{font-size:.9rem}}

/* Twelve-animal wheel, coordinated with Daily Zodiac but in crimson. */
.selector-panel .tabs{max-width:570px;gap:8px;margin:20px auto 10px}
.selector-panel .tabs button{padding:12px 6px;white-space:nowrap}
.wheel-wrap{--wheel-radius:37%;position:relative;width:min(100%,420px);aspect-ratio:1;margin:8px auto 0;display:grid;place-items:center}
.animal-wheel{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at center,#3c1a1b22 0 30%,transparent 31%),radial-gradient(circle at center,transparent 0 49%,#e15e543f 50%,transparent 50.7%),radial-gradient(circle at center,transparent 0 73%,#d0474239 74%,transparent 75%),radial-gradient(circle at center,#281212,#110a0b 75%);border:1px solid #7b353466}
.animal-wheel .animal{position:absolute;left:calc(50% + var(--x) * var(--wheel-radius));top:calc(50% + var(--y) * var(--wheel-radius));transform:translate(-50%,-50%);width:74px;min-height:66px;background:transparent;border:1px solid transparent;border-radius:15px;padding:6px 2px;gap:0;box-shadow:none}
.animal-wheel .animal .han{font-size:2rem;line-height:1.1}
.animal-wheel .animal .animal-name{font-size:.7rem;white-space:nowrap;color:#caa6a0}
.animal-wheel .animal:hover{transform:translate(-50%,-50%) scale(1.12);border-color:#a7504c;background:#491c20}
.animal-wheel .animal.active{transform:translate(-50%,-50%) scale(1.12);border:1px solid #ff9f95;background:#72262b;box-shadow:0 0 20px #e14f5650}
.animal-wheel .animal.active .animal-name{color:#fff0ec}
.wheel-center{width:120px;height:120px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:radial-gradient(circle,#5d2025,#1d0d0e 72%);border:1px solid #a34b4b;box-shadow:0 0 28px #b52d3433;pointer-events:none}
.wheel-center small{color:#e8aaa2;letter-spacing:.15em;text-transform:uppercase;font-size:.7rem}.wheel-center strong{font-size:2rem;color:#ffd8ce}
@media(max-width:680px){.wheel-wrap{width:min(100%,320px)}.animal-wheel .animal{width:61px;min-height:58px}.animal-wheel .animal .han{font-size:1.65rem}.animal-wheel .animal .animal-name{font-size:.62rem}.wheel-center{width:102px;height:102px}.wheel-center strong{font-size:1.6rem}.selector-panel .tabs button{font-size:.84rem;padding:11px 3px}}
@media(max-width:380px){.wheel-wrap{width:min(100%,320px)}.animal-wheel .animal{width:56px;min-height:54px}.animal-wheel .animal .han{font-size:1.5rem}.wheel-center{width:78px;height:78px}}


/* Layer wheel above its background; keep 生肖 visibly centered. */
.animal-wheel{z-index:1}
.wheel-center{position:relative;z-index:2;background:radial-gradient(circle,#76282b 0%,#310e12 72%);border-color:rgba(255,165,135,.6);box-shadow:0 0 26px rgba(220,72,61,.32),inset 0 0 22px rgba(245,184,121,.09)}
.wheel-center strong{color:#ffe0c9;letter-spacing:.12em;text-shadow:0 0 14px rgba(255,138,110,.5)}
/* Warm red primary, restrained gold particles and highlights. */
.particles{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5}
.particles::before{content:"";position:absolute;inset:-220px 0 0;background-repeat:repeat;background-size:220px 220px;animation:shengxiaoDrift 24s linear infinite}
.p1::before{background-image:radial-gradient(circle,rgba(255,120,105,.52) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(230,172,98,.19) 0 1.4px,transparent 2px);background-position:30px 40px,140px 120px}
.p2::before{background-image:radial-gradient(circle,rgba(255,172,146,.22) 0 1.5px,transparent 2px),radial-gradient(circle,rgba(195,49,46,.27) 0 2px,transparent 2.6px);background-position:90px 160px,180px 70px;animation-duration:38s;animation-direction:reverse}
@keyframes shengxiaoDrift{to{transform:translateY(220px)}}
.animal-wheel .animal .han{color:#dd8d88;text-shadow:0 0 8px rgba(220,74,68,.16);animation:shengxiaoGlyphPulse 3.8s ease-in-out infinite}
.animal-wheel .animal .animal-name{color:#b88b87}
.animal-wheel .animal{transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.animal-wheel .animal:hover,.animal-wheel .animal:focus-visible{transform:translate(-50%,-50%) scale(1.17);border-color:#f69a8e;background:#551b20;box-shadow:0 0 18px rgba(255,108,100,.3),0 0 30px rgba(194,53,46,.18)}
.animal-wheel .animal.active{transform:translate(-50%,-50%) scale(1.15);border-color:#ffab9a;background:#7d2930;animation:shengxiaoSelectedPulse 1.9s ease-in-out infinite}
.animal-wheel .animal.active .han,.animal-wheel .animal:hover .han{color:#ffe2cf;text-shadow:0 0 13px rgba(255,152,128,.8)}
.animal-wheel .animal.active .animal-name{color:#ffddd1}
@keyframes shengxiaoGlyphPulse{0%,100%{opacity:.85;filter:drop-shadow(0 0 0 rgba(255,130,100,0))}50%{opacity:1;filter:drop-shadow(0 0 7px rgba(255,135,110,.4))}}
@keyframes shengxiaoSelectedPulse{0%,100%{box-shadow:0 0 17px rgba(255,123,105,.3),0 0 28px rgba(191,46,42,.17)}50%{box-shadow:0 0 27px rgba(255,153,125,.55),0 0 42px rgba(210,56,48,.32)}}
.selector-panel .tabs button:hover{box-shadow:0 0 17px rgba(228,76,66,.23)}
.selector-panel .tabs button.active{box-shadow:0 0 21px rgba(231,73,66,.33),inset 0 1px 0 rgba(255,195,132,.14)}
@media(prefers-reduced-motion:reduce){.particles::before,.animal-wheel .animal,.animal-wheel .animal .han{animation:none!important;transition:none!important}}


/* Frameless wheel lettering: light radiates from the characters, not a button box. */
.animal-wheel .animal,
.animal-wheel .animal:hover,
.animal-wheel .animal:focus-visible,
.animal-wheel .animal.active{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.animal-wheel .animal:hover,
.animal-wheel .animal:focus-visible{transform:translate(-50%,-50%) scale(1.17)}
.animal-wheel .animal.active{transform:translate(-50%,-50%) scale(1.16);animation:none}
.animal-wheel .animal .han{
  transition:color .22s ease,text-shadow .22s ease,filter .22s ease;
}
.animal-wheel .animal:hover .han,
.animal-wheel .animal:focus-visible .han{
  color:#ffe2ce;
  text-shadow:0 0 9px rgba(255,153,124,.9),0 0 22px rgba(240,72,64,.78),0 0 34px rgba(218,52,48,.45);
  filter:drop-shadow(0 0 8px rgba(255,134,103,.5));
}
.animal-wheel .animal.active .han{
  color:#ffe7d2;
  animation:shengxiaoTextGlow 1.9s ease-in-out infinite;
}
.animal-wheel .animal.active .animal-name{color:#ffcfba;text-shadow:0 0 10px rgba(235,96,75,.5)}
@keyframes shengxiaoTextGlow{
  0%,100%{text-shadow:0 0 8px rgba(255,142,117,.7),0 0 19px rgba(231,72,63,.55);filter:drop-shadow(0 0 4px rgba(248,102,82,.4))}
  50%{text-shadow:0 0 13px rgba(255,185,145,1),0 0 27px rgba(243,92,72,.85),0 0 39px rgba(206,49,45,.55);filter:drop-shadow(0 0 11px rgba(255,119,92,.7))}
}
@media(prefers-reduced-motion:reduce){.animal-wheel .animal.active .han{animation:none!important}}


/* Calendar-based educational modules */
.ganzhi-card{background:linear-gradient(135deg,#321516,#1c0d0e);border:1px solid #76403b;border-radius:15px;padding:18px 20px;margin:0 0 20px}
.ganzhi-card h3{margin:0 0 8px;color:#ffd4bd;font-size:1.15rem}
.ganzhi-card p:last-child{margin:0;text-align:justify;line-height:1.8;color:#e4c3bd}
.major-details{border:1px solid #683735;border-radius:14px;padding:15px 18px;margin:0 0 23px;background:#210f10}
.major-details summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;gap:10px;list-style:none;font-weight:700;color:#ffc8ba}
.major-details summary::-webkit-details-marker{display:none}
.major-details[open] .toggle-label{font-size:0}.major-details[open] .toggle-label:after{content:"Close";font-size:.83rem}
.major-details>p{margin:15px 0;line-height:1.7;text-align:justify}
.major-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:9px}
.major-item{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;background:#331819;border:1px solid #754340;border-radius:11px}
.major-item strong{color:#ffd1ae}.major-item span{color:#e6b1ab}


.comparison-heading{margin:15px 0 7px;color:#ffcfba;font-size:1.02rem}
.comparison-description{margin:0 0 18px!important;padding:11px 13px;border-left:3px solid #db695b;background:rgba(102,35,37,.35);border-radius:0 9px 9px 0}
.major-item{min-width:0;flex-wrap:wrap}.major-item span{overflow-wrap:anywhere}

/* Independent calendar-wide relationships panel, separate from animal readings. */
.general-relationships .general-reference{margin:12px 0 16px;color:#efb8a9;line-height:1.7}
.general-relationships .major-details{margin:0}
.general-relationships .major-details summary{font-size:1rem}