/* Барабан гороскопа и фон-небо */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
main,footer{position:relative;z-index:1}
.drumband{position:relative;padding:14px 0 0;--w:450px;--h:246px;overflow:hidden}
.drum{position:relative;height:calc(var(--h) + 8px);perspective:1500px;touch-action:pan-y;cursor:grab;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);user-select:none;-webkit-user-select:none}
.drum:active{cursor:grabbing}
.drum:focus-visible{box-shadow:0 0 0 2px var(--gold) inset;border-radius:20px}
.drum-in{position:absolute;left:0;right:0;top:4px;height:var(--h);transform-style:preserve-3d;transform:translateZ(calc(var(--w)*-2)) rotateY(var(--rot,0deg));transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.drum.drag .drum-in{transition:none}
.dc{position:absolute;left:50%;top:0;width:var(--w);height:var(--h);margin-left:calc(var(--w)/-2);transform:rotateY(calc(var(--i)*30deg)) translateZ(calc(var(--w)*2));backface-visibility:hidden;-webkit-backface-visibility:hidden;
 display:grid;grid-template-columns:126px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:16px;padding:16px 20px 14px 14px;border-radius:20px;overflow:hidden;
 background:linear-gradient(160deg,#241b5e,#150f45 72%);border:1px solid var(--line);box-shadow:0 18px 40px #0009,inset 0 1px 0 #ffffff18;opacity:0;transition:opacity .7s}
.dc[data-d="0"]{opacity:1;border-color:#e8c27a66}.dc[data-d="1"],.dc[data-d="-1"]{opacity:.72}.dc[data-d="2"],.dc[data-d="-2"]{opacity:.38}.dc[data-d="3"],.dc[data-d="-3"]{opacity:.12}
.dc .cs{grid-column:1;grid-row:1/3;width:126px;height:126px;align-self:center}
.dc .tw{animation:tw 3.2s ease-in-out infinite}@keyframes tw{0%,100%{opacity:1}50%{opacity:.45}}
.dh{grid-column:2;grid-row:1;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.dh h3{font-size:30px;color:var(--gold);line-height:1}.dh span{font-size:12px;color:var(--mut);white-space:nowrap}
.dt{grid-column:2;grid-row:2;min-height:0;padding-top:6px}
.dd{display:block;font-size:12.5px;color:var(--pink);font-weight:600;margin-bottom:5px}
.dt p{margin:0 0 5px;font-size:13px;line-height:1.42;color:#d7d2f8}.dt .ad{color:var(--mut);font-size:12.5px;margin:0}.dt .ad b{color:var(--gold);font-weight:600}
.dnav{position:absolute;top:calc(50% - 14px);transform:translateY(-50%);z-index:3;width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#150f45d9;color:var(--tx);display:grid;place-items:center;cursor:pointer;transition:transform .2s,border-color .2s}
.dnav:hover{border-color:var(--gold);transform:translateY(-50%) scale(1.07)}.dnav:active{transform:translateY(-50%) scale(.95)}
.dnav:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.dnav svg{width:20px;height:20px}
.dnav.prev{left:0}.dnav.next{right:0}
.dcap{text-align:center;color:var(--mut);font-size:13px;margin:6px auto 0;max-width:760px}.dcap a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}.dcap a:hover{color:var(--tx)}
.hero{min-height:max(520px,calc(100svh - 404px))}
@media(max-width:820px){
 .drumband{--w:min(310px,80vw);--h:266px;padding-top:6px}
 .dc{grid-template-columns:58px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;padding:14px 16px}
 .dc .cs{grid-column:1;grid-row:1;width:58px;height:58px}
 .dh{grid-column:2;grid-row:1;flex-direction:column;align-items:flex-start;gap:3px}.dh h3{font-size:26px}
 .dt{grid-column:1/3;grid-row:2;padding-top:8px}.dd{font-size:12px}.dt p{font-size:12.5px}.dt .ad{font-size:12px}
 .dnav{display:none}.drum{-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
 .hero{min-height:0}
}
@media(prefers-reduced-motion:reduce){.drum-in{transition:none}.dc{transition:none}.dc .tw{animation:none}}