:root{
  --bg:oklch(0.14 0.04 280);
  --fg:oklch(0.97 0.015 90);
  --card:oklch(0.18 0.05 282 / 0.6);
  --muted:oklch(0.72 0.04 285);
  --border:oklch(0.97 0.02 90 / 0.12);
  --accent:oklch(0.85 0.15 85);
  --primary:oklch(0.78 0.18 305);
  --gold:linear-gradient(135deg, oklch(0.88 0.16 90), oklch(0.78 0.18 70));
  --cosmic:linear-gradient(135deg, oklch(0.95 0.05 90), oklch(0.78 0.18 305) 50%, oklch(0.85 0.15 85));
  --glow:0 0 60px -10px oklch(0.6 0.25 305 / 0.4);
  --gold-glow:0 0 40px -8px oklch(0.85 0.15 85 / 0.5);
  --shadow:0 30px 80px -20px oklch(0 0 0 / 0.6);
}
html.light{
  --bg:oklch(0.98 0.01 90);
  --fg:oklch(0.18 0.05 282);
  --card:oklch(1 0 0 / 0.7);
  --muted:oklch(0.42 0.05 282);
  --border:oklch(0.18 0.05 282 / 0.12);
}
*{box-sizing:border-box;border-color:var(--border)}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(ellipse at top, oklch(0.3 0.15 295 / 0.45), transparent 55%),
    radial-gradient(ellipse at bottom right, oklch(0.3 0.15 260 / 0.35), transparent 55%),
    radial-gradient(ellipse at bottom left, oklch(0.3 0.12 320 / 0.25), transparent 50%);
  background-attachment:fixed;min-height:100vh;
}
h1,h2,h3,h4,.display{font-family:"Cormorant Garamond",Georgia,serif;letter-spacing:-0.02em;margin:0;line-height:1.1}
a{color:inherit;text-decoration:none}
ul{list-style:none;margin:0;padding:0}
button,select,input{font:inherit;color:inherit}
.container{max-width:1200px;margin:0 auto;padding:0 1.5rem}
.muted{color:var(--muted)}
.center{text-align:center}
.kicker{font-size:.75rem;text-transform:uppercase;letter-spacing:.3em;color:oklch(0.85 0.15 85);margin:0 0 .75rem}
.text-gold{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.text-cosmic{background:var(--cosmic);-webkit-background-clip:text;background-clip:text;color:transparent}
.glass{background:color-mix(in oklab,var(--card) 70%,transparent);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid var(--border)}
.glass-strong{background:color-mix(in oklab,var(--card) 90%,transparent);backdrop-filter:blur(32px) saturate(160%);-webkit-backdrop-filter:blur(32px) saturate(160%);border:1px solid var(--border)}
.micro{font-size:.7rem;text-transform:uppercase;letter-spacing:.2em}
.site-header{position:fixed;top:0;left:0;right:0;z-index:50;padding:1.25rem 0;transition:padding .4s}
.site-header.scrolled{padding:.75rem 0}
.nav{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-radius:1rem;transition:all .4s}
.site-header.scrolled .nav{box-shadow:var(--shadow)}
.brand{display:flex;align-items:center;gap:.5rem;font-family:"Cormorant Garamond",serif;font-size:1.25rem}
.brand-icon{color:var(--accent);filter:drop-shadow(0 0 14px oklch(0.85 0.15 85 / .6));animation:glow 4s ease-in-out infinite}
.nav-list{display:none;gap:.25rem;align-items:center}
@media (min-width:880px){.nav-list{display:flex}}
.nav-link{position:relative;padding:.5rem 1rem;font-size:.9rem;color:color-mix(in oklab,var(--fg) 80%, transparent);transition:color .2s}
.nav-link:hover{color:var(--fg)}
.nav-link::after{content:"";position:absolute;left:1rem;right:1rem;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent);transform:scaleX(0);transition:transform .4s}
.nav-link:hover::after{transform:scaleX(1)}
.nav-actions{display:flex;gap:.5rem}
.icon-btn{background:transparent;border:1px solid transparent;color:var(--fg);width:38px;height:38px;border-radius:999px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.icon-btn:hover{background:color-mix(in oklab,var(--fg) 5%,transparent)}
.icon-btn.glass{border:1px solid var(--border)}
.mobile-only{display:inline-flex}
@media(min-width:880px){.mobile-only{display:none}}
.mobile-menu{margin-top:.5rem;border-radius:1rem;padding:.75rem}
.mobile-menu ul{display:flex;flex-direction:column;gap:.25rem}
.mobile-menu a{display:block;padding:.75rem 1rem;border-radius:.75rem}
.mobile-menu a:hover{background:color-mix(in oklab,var(--fg) 5%,transparent)}
.hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:9rem 0 5rem}
.hero-bg{position:absolute;inset:0;pointer-events:none}
.hero-glow-1{background:radial-gradient(circle at 50% 30%, oklch(0.4 0.22 300/.45), transparent 55%)}
.hero-glow-2{background:radial-gradient(circle at 85% 80%, oklch(0.35 0.18 260/.4), transparent 50%)}
.starfield{position:absolute;inset:0;background-image:
  radial-gradient(1px 1px at 20% 30%, oklch(1 0 0 / 0.8), transparent),
  radial-gradient(1px 1px at 60% 70%, oklch(1 0 0 / 0.6), transparent),
  radial-gradient(2px 2px at 40% 10%, oklch(0.95 0.1 85 / 0.7), transparent),
  radial-gradient(1px 1px at 80% 40%, oklch(1 0 0 / 0.5), transparent),
  radial-gradient(1px 1px at 10% 80%, oklch(1 0 0 / 0.7), transparent),
  radial-gradient(1.5px 1.5px at 90% 90%, oklch(0.9 0.12 305 / 0.7), transparent),
  radial-gradient(1px 1px at 50% 50%, oklch(1 0 0 / 0.4), transparent),
  radial-gradient(1px 1px at 30% 60%, oklch(1 0 0 / 0.6), transparent);
  background-size:600px 600px;animation:twinkle 6s ease-in-out infinite;pointer-events:none}
.particle{position:absolute;width:var(--sz);height:var(--sz);background:oklch(0.85 0.15 85 / .5);border-radius:999px;filter:blur(3px);animation:float 8s ease-in-out infinite;pointer-events:none}
.hero-grid{display:grid;gap:3rem;align-items:center;position:relative;z-index:1}
@media(min-width:980px){.hero-grid{grid-template-columns:1fr 1fr}}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.4rem 1rem;border-radius:999px;font-size:.7rem;text-transform:uppercase;letter-spacing:.3em;color:var(--accent)}
.hero h1{font-size:clamp(3rem,7vw,6rem);margin-top:1.5rem}
.lead{margin-top:1.5rem;font-size:1.1rem;line-height:1.6;max-width:540px}
.cta-row{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;padding:.95rem 2rem;border-radius:999px;font-weight:500;font-size:.95rem;border:none;cursor:pointer;transition:transform .2s,opacity .2s}
.btn-gold{background:var(--gold);color:oklch(0.14 0.04 280);box-shadow:var(--gold-glow)}
.btn-gold:hover{transform:scale(1.02)}
.btn-ghost{background:color-mix(in oklab,var(--card) 90%,transparent);border:1px solid var(--border);color:var(--fg);backdrop-filter:blur(20px)}
.btn-ghost:hover{border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.meta-row{margin-top:3rem;display:flex;flex-wrap:wrap;gap:1.5rem;font-size:.7rem;text-transform:uppercase;letter-spacing:.25em;align-items:center}
.sep{width:1px;height:1rem;background:var(--border)}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-size:.7rem;text-transform:uppercase;letter-spacing:.3em;animation:float 4s ease-in-out infinite}
.wheel{position:relative;aspect-ratio:1;max-width:540px;width:100%;margin:0 auto}
.wheel-glow{position:absolute;inset:0;background:radial-gradient(circle,oklch(0.6 0.25 305/.35),transparent 65%);filter:blur(40px);border-radius:999px}
.wheel-ring{position:absolute;border-radius:999px;border:1px solid var(--border)}
.wheel-ring.r1{inset:2rem;border-color:color-mix(in oklab,var(--accent) 25%, transparent)}
.wheel-ring.r2{inset:4rem;border-color:color-mix(in oklab,var(--primary) 35%, transparent)}
.wheel-ring.r3{inset:6rem}
.wheel-rotate{position:absolute;inset:0;animation:spin 60s linear infinite}
.wheel-sign{position:absolute;transform:translate(-50%,-50%);font-size:1.5rem;color:color-mix(in oklab,var(--accent) 90%,white)}
.wheel-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:11rem;height:11rem;border-radius:999px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--glow)}
.wheel-center .display{font-size:1.75rem;margin-top:.25rem}
.section{padding:6rem 0}
.page-head{padding:9rem 0 2rem}
.page-head .huge{font-size:clamp(3rem,7vw,5.5rem);margin-top:.75rem}
.section-head{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:space-between;align-items:flex-end;margin-bottom:3.5rem}
.section-head.center{flex-direction:column;align-items:center;text-align:center;max-width:640px;margin-left:auto;margin-right:auto}
.section-head h2{font-size:clamp(2.25rem,5vw,4rem);margin-top:.75rem}
.section-head h3{font-size:clamp(1.75rem,3.5vw,2.5rem);margin-top:.5rem}
.section-head p{margin:.75rem 0 0}
.link-accent{color:var(--accent);font-size:.9rem;display:inline-flex;align-items:center;gap:.4rem;transition:transform .2s}
.link-accent:hover{transform:translateY(-2px)}
.grid{display:grid;gap:1.25rem}
.zodiac-grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.zodiac-card{position:relative;padding:1.5rem;border-radius:1.5rem;overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s;display:block}
.zodiac-card:hover{transform:translateY(-4px);box-shadow:var(--glow);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.card-glow{position:absolute;top:-5rem;right:-5rem;width:12rem;height:12rem;border-radius:999px;background:radial-gradient(circle,oklch(0.6 0.25 305/.4),transparent 70%);opacity:0;transition:opacity .6s}
.zodiac-card:hover .card-glow{opacity:1}
.zc-head{position:relative;display:flex;justify-content:space-between;align-items:flex-start}
.zc-symbol{font-size:3rem;background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent;transition:transform .4s;transform-origin:left}
.zodiac-card:hover .zc-symbol{transform:scale(1.1)}
.zc-name{font-size:1.5rem;margin-top:.5rem}
.zc-compat{text-align:right}
.zc-compat .display{font-size:1.5rem}
.zc-text{position:relative;margin:1.25rem 0 0;font-size:.9rem;line-height:1.6;color:color-mix(in oklab,var(--fg) 80%,transparent);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.zc-foot{position:relative;margin-top:1.25rem;display:flex;justify-content:space-between;align-items:center}
.chip{padding:.3rem .8rem;border-radius:999px;font-size:.7rem}
.chip-accent{color:var(--accent)}
.panel{padding:2rem;border-radius:1.75rem;box-shadow:var(--shadow)}
@media(min-width:768px){.panel{padding:3rem}}
.grid.two{grid-template-columns:1fr;gap:1.5rem;margin-bottom:3rem}
@media(min-width:768px){.grid.two{grid-template-columns:1fr 1fr}}
.select-card{padding:1.5rem;border-radius:1rem}
.select-row{display:flex;align-items:center;gap:1rem;margin-top:.75rem}
.big-symbol{font-size:3.5rem}
.select-row select{flex:1;background:transparent;border:none;border-bottom:1px solid var(--border);font-family:"Cormorant Garamond",serif;font-size:1.5rem;padding:.5rem 0;outline:none;transition:border-color .2s}
.select-row select:focus{border-color:var(--accent)}
.select-row select option{background:oklch(0.18 0.05 282);color:var(--fg)}
.rings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
@media(min-width:768px){.rings-grid{grid-template-columns:repeat(4,1fr)}}
.ring-wrap{display:flex;flex-direction:column;align-items:center;position:relative}
.ring{width:128px;height:128px;transform:rotate(-90deg)}
.ring-bg{stroke:oklch(0.97 0.02 90 / 0.1);stroke-width:6;fill:none}
.ring-fg{stroke:oklch(0.85 0.15 85);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:264;stroke-dashoffset:264;transition:stroke-dashoffset 1s ease}
.ring-val{position:absolute;top:50%;left:50%;transform:translate(-50%,calc(-50% - 14px));font-family:"Cormorant Garamond",serif;font-size:1.5rem}
.ring-label{margin-top:.75rem}
.compat-note{margin-top:2.5rem;max-width:640px;line-height:1.6;margin-left:auto;margin-right:auto}
.carousel-block + .carousel-block{margin-top:5rem}
.carousel{display:flex;gap:1.25rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.5rem .25rem 1rem;scrollbar-width:none;-ms-overflow-style:none}
.carousel::-webkit-scrollbar{display:none}
.period-card{scroll-snap-align:start;flex-shrink:0;width:320px;padding:1.75rem;border-radius:1.5rem;position:relative;overflow:hidden;transition:transform .4s,border-color .4s}
.period-card:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.period-icon{font-size:2.25rem}
.carousel-nav{display:flex;gap:.5rem}
.blog-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.blog-card{border-radius:1.5rem;overflow:hidden;transition:transform .4s,box-shadow .4s,border-color .4s;display:flex;flex-direction:column}
.blog-card:hover{transform:translateY(-4px);box-shadow:var(--glow);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.blog-cover{position:relative;aspect-ratio:4/3;overflow:hidden}
.blog-cover-fade{position:absolute;inset:0;background:linear-gradient(to top,var(--bg),transparent)}
.blog-cat{position:absolute;top:1rem;left:1rem;text-transform:uppercase;letter-spacing:.2em;z-index:1}
.blog-body{padding:1.5rem}
.blog-title{font-size:1.5rem;line-height:1.2;transition:background .3s}
.blog-card:hover .blog-title{background:var(--gold);-webkit-background-clip:text;background-clip:text;color:transparent}
.blog-body p{margin:.75rem 0 0;font-size:.9rem;line-height:1.6}
.blog-meta{margin-top:1.25rem;display:flex;justify-content:space-between;align-items:center}
.sign-hero{position:relative;overflow:hidden;padding:8rem 0 4rem}
.back-link{display:inline-flex;align-items:center;gap:.5rem;font-size:.85rem;margin-bottom:2rem;transition:color .2s}
.back-link:hover{color:var(--accent)}
.big-zodiac{width:8rem;height:8rem;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:4.5rem;animation:glow 4s ease-in-out infinite;margin:0 auto}
.sign-hero h1{font-size:clamp(3.5rem,8vw,6.5rem);margin-top:2rem}
.sign-hero .lead{margin-left:auto;margin-right:auto;text-align:center;max-width:640px}
.widgets{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem;margin-top:3rem;max-width:1100px}
@media(min-width:768px){.widgets{grid-template-columns:repeat(4,1fr)}}
.widget{padding:1.25rem;border-radius:1rem;text-align:center}
.widget .display{font-size:1.5rem;margin-top:.5rem}
.bars{display:grid;gap:1rem;margin-top:1.5rem;max-width:1100px}
@media(min-width:768px){.bars{grid-template-columns:1fr 1fr}}
.bar{padding:1.25rem;border-radius:1rem}
.bar-row{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:.6rem}
.bar-track{height:.5rem;background:color-mix(in oklab,var(--fg) 5%,transparent);border-radius:999px;overflow:hidden}
.bar-fill{height:100%;background:var(--gold);border-radius:999px}
.sections-grid{margin-top:4rem;display:grid;gap:1.25rem;max-width:1100px}
@media(min-width:768px){.sections-grid{grid-template-columns:1fr 1fr}}
.sec-card{padding:1.75rem;border-radius:1.5rem;transition:border-color .3s}
.sec-card:hover{border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.sec-head{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem}
.sec-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;border-radius:.75rem;background:var(--gold);color:oklch(0.14 0.04 280);font-size:1rem}
.sec-card h2{font-size:1.5rem}
.sec-card p{margin:0;line-height:1.6;color:color-mix(in oklab,var(--fg) 85%, transparent)}
.related{margin-top:5rem;max-width:1100px}
.related h3{font-size:2rem;margin-bottom:1.5rem}
.related-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.related-card{padding:1.25rem;border-radius:1rem;display:flex;align-items:center;gap:1rem;transition:transform .3s,border-color .3s}
.related-card:hover{transform:translateY(-2px);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.related-sym{font-size:2rem}
.topics-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.topic{padding:1.75rem;border-radius:1.5rem;transition:transform .4s,border-color .4s}
.topic:hover{transform:translateY(-4px);border-color:color-mix(in oklab,var(--accent) 40%,transparent)}
.topic h3{margin-top:1rem;font-size:1.5rem}
.topic p{margin-top:.5rem;font-size:.9rem;line-height:1.6}
.site-footer{margin-top:8rem;border-top:1px solid var(--border);position:relative}
.site-footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in oklab,var(--accent) 40%,transparent),transparent)}
.footer-grid{padding:4rem 1.5rem;display:grid;gap:3rem}
@media(min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr}}
.footer-brand .brand{font-size:1.5rem}
.footer-brand p{margin-top:1rem;max-width:480px;line-height:1.6}
.newsletter{margin-top:1.5rem;max-width:380px;display:flex;align-items:center;padding:.4rem;border-radius:999px;gap:.5rem}
.newsletter input{flex:1;background:transparent;border:none;outline:none;padding:.5rem 1rem;color:var(--fg)}
.newsletter input::placeholder{color:var(--muted)}
.newsletter button{background:var(--gold);color:oklch(0.14 0.04 280);border:none;padding:.6rem 1rem;border-radius:999px;cursor:pointer;font-weight:600}
.site-footer h4{font-size:.75rem;text-transform:uppercase;letter-spacing:.25em;color:var(--muted);margin-bottom:1rem;font-family:Inter,sans-serif;font-weight:500}
.footer-links{display:flex;flex-direction:column;gap:.5rem;font-size:.9rem}
.footer-links a:hover{color:var(--accent)}
.socials{display:flex;gap:.5rem}
.socials a{font-size:.7rem;font-weight:600;letter-spacing:.1em}
.footer-bottom{padding:1.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;border-top:1px solid var(--border);font-size:.75rem;color:var(--muted)}
@keyframes float{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-20px) translateX(8px)}}
@keyframes twinkle{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes glow{0%,100%{filter:drop-shadow(0 0 20px oklch(0.6 0.25 305/.4))}50%{filter:drop-shadow(0 0 40px oklch(0.7 0.25 305/.7))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade-up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
.fade-up{animation:fade-up .8s ease-out both}