:root {
  --astro-blue: #516c9d;
  --astro-violet: #8061b5;
  --astro-silver: #c8c9dc;
  --astro-deep: #0b0b19;
}

.astrology-page {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 10%, rgba(81, 108, 157, .18), transparent 31%),
    radial-gradient(circle at 88% 16%, rgba(128, 97, 181, .18), transparent 30%),
    radial-gradient(circle at 52% 85%, rgba(215, 179, 106, .07), transparent 28%),
    #070611;
}

.cosmic-glow {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(100px);
  pointer-events: none;
  opacity: .3;
}

.glow-left {
  width: 430px;
  height: 430px;
  left: -220px;
  top: 28%;
  background: var(--astro-blue);
}

.glow-right {
  width: 390px;
  height: 390px;
  right: -200px;
  bottom: 7%;
  background: var(--astro-violet);
}

.astrology-header {
  position: relative;
  z-index: 10;
  width: min(1320px, calc(100% - 40px));
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 auto;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.astrology-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #a69bad;
  font-size: 12px;
  transition: color .2s ease;
}

.astrology-back:hover {
  color: var(--gold-soft);
}

.astrology-main {
  position: relative;
  z-index: 2;
  width: min(1320px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 110px;
}

.astrology-intro {
  min-height: 370px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  align-items: center;
  gap: 60px;
  padding: 0 34px 70px;
}

.astrology-intro h1 {
  max-width: 880px;
  font-family: "Cinzel", serif;
  font-size: clamp(44px, 5.6vw, 76px);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.035em;
}

.astrology-intro h1 em {
  display: block;
  color: #d7cfef;
  font-style: italic;
  font-weight: 500;
}

.astrology-intro > div:first-child > p:last-child {
  max-width: 710px;
  margin-top: 25px;
  color: var(--muted);
  line-height: 1.8;
}

.mini-cosmos {
  position: relative;
  width: 290px;
  height: 290px;
  display: grid;
  place-items: center;
  margin-left: auto;
}

.mini-ring {
  position: absolute;
  border-radius: 50%;
}

.mini-ring.ring-a {
  inset: 0;
  border: 1px solid rgba(200,201,220,.18);
  animation: astroSpin 34s linear infinite;
}

.mini-ring.ring-a::before,
.mini-ring.ring-a::after,
.mini-ring.ring-b::before {
  content: "✦";
  position: absolute;
  color: var(--gold-soft);
  font-size: 12px;
}

.mini-ring.ring-a::before { top: -7px; left: 49%; }
.mini-ring.ring-a::after { bottom: -7px; left: 49%; }

.mini-ring.ring-b {
  inset: 20%;
  border: 1px dashed rgba(128,97,181,.28);
  animation: astroSpin 22s linear reverse infinite;
}

.mini-ring.ring-b::before {
  top: 48%;
  right: -5px;
}

@keyframes astroSpin {
  to { transform: rotate(360deg); }
}

.mini-sun {
  display: grid;
  place-items: center;
  width: 112px;
  height: 112px;
  border: 1px solid rgba(240,215,155,.23);
  border-radius: 50%;
  color: var(--gold-soft);
  font-size: 55px;
  box-shadow:
    0 0 70px rgba(128,97,181,.18),
    inset 0 0 40px rgba(81,108,157,.12);
}

.mini-planet {
  position: absolute;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(200,201,220,.16);
  border-radius: 50%;
  background: #0d0a17;
  color: var(--astro-silver);
}

.planet-a { top: 5%; left: 21%; }
.planet-b { right: 4%; top: 49%; }
.planet-c { left: 9%; bottom: 14%; }

.astrology-shell {
  display: grid;
  grid-template-columns: 270px minmax(0, 1fr);
  min-height: 790px;
  overflow: hidden;
  border: 1px solid rgba(200,201,220,.12);
  border-radius: 28px;
  background:
    linear-gradient(120deg, rgba(255,255,255,.018), transparent 45%),
    rgba(12,9,22,.86);
  box-shadow: 0 38px 110px rgba(0,0,0,.34);
  backdrop-filter: blur(24px);
}

.astrology-sidebar {
  display: flex;
  flex-direction: column;
  padding: 38px 28px;
  border-right: 1px solid rgba(255,255,255,.06);
  background: rgba(255,255,255,.012);
}

.sidebar-label {
  color: #71697a;
  font-family: "Cinzel", serif;
  font-size: 9px;
  letter-spacing: .24em;
}

.astrology-progress {
  margin-top: 32px;
  list-style: none;
}

.astrology-progress li {
  position: relative;
  min-height: 96px;
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 12px;
}

.astrology-progress li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 14px;
  top: 31px;
  bottom: 5px;
  width: 1px;
  background: rgba(255,255,255,.07);
}

.astrology-progress li > span {
  position: relative;
  z-index: 2;
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 50%;
  background: #0c0915;
  color: #736b7b;
  font-family: "Cinzel", serif;
  font-size: 9px;
}

.astrology-progress strong,
.astrology-progress small {
  display: block;
}

.astrology-progress strong {
  margin: 4px 0 6px;
  color: #8f8798;
  font-family: "Cinzel", serif;
  font-size: 12px;
}

.astrology-progress small {
  color: #605966;
  font-size: 10px;
}

.astrology-progress li.active > span,
.astrology-progress li.complete > span {
  border-color: rgba(200,201,220,.43);
  color: #d7cfef;
  box-shadow: 0 0 22px rgba(128,97,181,.14);
}

.astrology-progress li.active strong,
.astrology-progress li.complete strong {
  color: var(--text);
}

.astrology-guide {
  margin-top: 26px;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,.06);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.astrology-guide > p:last-child {
  margin-top: 15px;
  color: #7c7484;
  font-size: 10px;
  line-height: 1.65;
}

.astrology-note {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(128,97,181,.13);
  border-radius: 14px;
  color: #706879;
  font-size: 9px;
  line-height: 1.55;
}

.astrology-note span {
  flex: 0 0 auto;
  color: var(--gold);
}

.astrology-content {
  min-width: 0;
  padding: clamp(32px, 5vw, 66px);
}

.astrology-step {
  animation: astroStepIn .52s ease both;
}

.astrology-step[hidden] {
  display: none;
}

@keyframes astroStepIn {
  from { opacity: 0; transform: translateY(17px); }
  to { opacity: 1; transform: translateY(0); }
}

.astrology-step-heading {
  display: grid;
  grid-template-columns: 54px 1fr;
  gap: 18px;
  margin-bottom: 38px;
}

.astrology-step-heading > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,201,220,.22);
  border-radius: 50%;
  color: #d7cfef;
  font-family: "Cinzel", serif;
  font-size: 10px;
}

.astrology-step-heading .eyebrow {
  margin-bottom: 10px;
}

.astrology-step-heading h2,
.calculating-step h2,
.result-hero h2 {
  font-family: "Cinzel", serif;
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 600;
  line-height: 1.15;
}

.astrology-step-heading > div > p:last-child {
  max-width: 730px;
  margin-top: 13px;
  color: #918898;
  line-height: 1.7;
}

.birth-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 19px;
}

.astro-field {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.astro-field-wide {
  grid-column: 1 / -1;
}

.astro-field > span {
  color: #beb4c4;
  font-size: 12px;
}

.astro-field > span small {
  color: #6c6474;
}

.astro-field input,
.astro-field select {
  width: 100%;
  height: 54px;
  padding: 0 17px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  outline: none;
  background: rgba(255,255,255,.024);
  color: var(--text);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

.astro-field input:focus,
.astro-field select:focus {
  border-color: rgba(200,201,220,.42);
  box-shadow: 0 0 0 4px rgba(128,97,181,.06);
  background: rgba(255,255,255,.032);
}

.astro-field input:disabled {
  opacity: .42;
  cursor: not-allowed;
}

.astro-field input::placeholder {
  color: #5c5563;
}

.astro-field select option {
  background: #100c1c;
  color: var(--text);
}

.astro-field.invalid input,
.astro-field.invalid select {
  border-color: rgba(190,91,99,.6);
}

.field-error {
  min-height: 13px;
  color: #c78187;
  font-size: 9px;
}

.unknown-time {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: -4px;
  color: #847b8c;
  font-size: 10px;
  cursor: pointer;
}

.unknown-time input,
.astro-consent input {
  accent-color: var(--astro-violet);
}

.astro-consent {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px;
  color: #847b8c;
  font-size: 10px;
  line-height: 1.55;
  cursor: pointer;
}

.astro-consent input {
  margin-top: 2px;
}

.birth-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.primary-button:disabled,
.secondary-button:disabled {
  cursor: not-allowed;
  opacity: .35;
  transform: none;
  box-shadow: none;
}

.secondary-button {
  min-height: 48px;
  padding: 0 21px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 999px;
  background: transparent;
  color: #a69cab;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.secondary-button:hover {
  border-color: rgba(200,201,220,.34);
  color: #d7cfef;
}

.calculating-step {
  min-height: 620px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.calculation-orbit {
  position: relative;
  width: 220px;
  height: 220px;
  display: grid;
  place-items: center;
  margin-bottom: 48px;
}

.calc-ring {
  position: absolute;
  border-radius: 50%;
}

.calc-ring::before {
  content: "✦";
  position: absolute;
  color: var(--gold-soft);
  font-size: 11px;
}

.calc-one {
  inset: 0;
  border: 1px solid rgba(200,201,220,.24);
  animation: astroSpin 5s linear infinite;
}

.calc-one::before {
  top: -7px;
  left: 49%;
}

.calc-two {
  inset: 17%;
  border: 1px dashed rgba(128,97,181,.32);
  animation: astroSpin 3.5s linear reverse infinite;
}

.calc-two::before {
  right: -5px;
  top: 48%;
}

.calc-three {
  inset: 35%;
  border: 1px solid rgba(240,215,155,.22);
  animation: astroPulse 2s ease-in-out infinite;
}

@keyframes astroPulse {
  0%, 100% { transform: scale(.92); opacity: .55; }
  50% { transform: scale(1.08); opacity: 1; }
}

.calculation-orbit > span {
  color: var(--gold-soft);
  font-size: 64px;
}

.calculating-step > p:not(.eyebrow) {
  margin-top: 16px;
  color: #8e8597;
}

.calculation-progress {
  width: min(440px, 80%);
  height: 4px;
  margin-top: 34px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.06);
}

.calculation-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--astro-blue), #d7cfef, var(--gold));
  transition: width .5s ease;
}

.result-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 34px;
}

.result-hero .eyebrow {
  margin-bottom: 10px;
}

.result-hero > div > p:last-child {
  margin-top: 13px;
  color: #8f8697;
  line-height: 1.6;
}

.chart-dashboard {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(320px, .82fr);
  gap: 17px;
}

.chart-panel {
  padding: 25px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 21px;
  background: rgba(255,255,255,.014);
}

.panel-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.panel-heading .eyebrow {
  margin-bottom: 8px;
}

.panel-heading h3,
.section-mini-heading h3 {
  font-family: "Cinzel", serif;
  font-size: 21px;
}

.chart-badge {
  padding: 7px 10px;
  border: 1px solid rgba(200,201,220,.12);
  border-radius: 999px;
  color: #7d7487;
  font-size: 7px;
  letter-spacing: .14em;
}

.natal-wheel {
  position: relative;
  width: min(520px, 92%);
  aspect-ratio: 1;
  margin: 30px auto 18px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(128,97,181,.08), transparent 48%),
    rgba(8,7,16,.48);
  box-shadow:
    0 0 65px rgba(81,108,157,.1),
    inset 0 0 55px rgba(128,97,181,.05);
}

.wheel-ring,
.wheel-cross {
  position: absolute;
  pointer-events: none;
}

.wheel-ring {
  border-radius: 50%;
}

.outer-ring {
  inset: 0;
  border: 1px solid rgba(200,201,220,.28);
}

.sign-ring {
  inset: 10.5%;
  border: 1px solid rgba(200,201,220,.12);
}

.house-ring {
  inset: 24%;
  border: 1px dashed rgba(240,215,155,.15);
}

.inner-ring {
  inset: 39%;
  border: 1px solid rgba(128,97,181,.18);
}

.wheel-cross {
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(transparent, rgba(200,201,220,.13), transparent);
  transform-origin: center;
}

.cross-a {
  transform: rotate(0);
}

.cross-b {
  transform: rotate(90deg);
}

.wheel-center {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 3;
  width: 88px;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  translate: -50% -50%;
  border: 1px solid rgba(240,215,155,.2);
  border-radius: 50%;
  background: #0d0a18;
  color: var(--gold-soft);
  box-shadow: 0 0 38px rgba(128,97,181,.14);
}

.wheel-center span {
  font-size: 31px;
}

.wheel-center small {
  margin-top: 4px;
  font-family: "Cinzel", serif;
  font-size: 6px;
  letter-spacing: .15em;
}

.zodiac-label,
.house-label,
.planet-marker {
  position: absolute;
  left: 50%;
  top: 50%;
  transform:
    translate(-50%, -50%)
    rotate(var(--angle))
    translateY(var(--radius))
    rotate(calc(var(--angle) * -1));
}

.zodiac-label {
  --radius: calc(var(--wheel-size, 500px) * -.445);
  color: #a9a3b7;
  font-size: clamp(14px, 2vw, 21px);
}

.house-label {
  --radius: calc(var(--wheel-size, 500px) * -.31);
  color: #5f5869;
  font-family: "Cinzel", serif;
  font-size: clamp(7px, 1vw, 10px);
}

.planet-marker {
  --radius: calc(var(--wheel-size, 500px) * -.19);
  z-index: 4;
  width: clamp(27px, 4vw, 38px);
  height: clamp(27px, 4vw, 38px);
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,201,220,.17);
  border-radius: 50%;
  background: #100c1c;
  color: #cec7db;
  font-size: clamp(13px, 2vw, 19px);
  box-shadow: 0 8px 18px rgba(0,0,0,.27);
  cursor: default;
  animation: markerAppear .6s var(--marker-delay) ease both;
}

.planet-marker::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  width: max-content;
  max-width: 140px;
  padding: 6px 8px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  background: #0b0813;
  color: #cfc6d6;
  font-family: "Inter", sans-serif;
  font-size: 8px;
  opacity: 0;
  pointer-events: none;
  translate: -50% 4px;
  transition: opacity .2s ease, translate .2s ease;
}

.planet-marker:hover::after {
  opacity: 1;
  translate: -50% 0;
}

.planet-marker.sun-marker {
  border-color: rgba(240,215,155,.45);
  color: var(--gold-soft);
}

.planet-marker.moon-marker {
  border-color: rgba(200,201,220,.4);
  color: #e1e2f1;
}

.planet-marker.asc-marker {
  width: clamp(31px, 4.3vw, 43px);
  height: clamp(31px, 4.3vw, 43px);
  border-color: rgba(128,97,181,.56);
  color: #d9caef;
  font-family: "Cinzel", serif;
  font-size: clamp(8px, 1vw, 10px);
}

@keyframes markerAppear {
  from {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      rotate(var(--angle))
      translateY(calc(var(--radius) + 20px))
      rotate(calc(var(--angle) * -1))
      scale(.7);
  }
}

.wheel-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 18px;
  color: #777080;
  font-size: 8px;
}

.wheel-legend span {
  display: flex;
  align-items: center;
  gap: 6px;
}

.legend-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8e8498;
}

.sun-dot { background: var(--gold); }
.moon-dot { background: #dfe2f2; }
.asc-dot { background: var(--astro-violet); }
.planet-dot { background: #8e8498; }

.big-three-grid {
  display: grid;
  gap: 10px;
  margin-top: 20px;
}

.big-three-grid article {
  display: grid;
  grid-template-columns: 46px 82px 1fr;
  align-items: center;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 15px;
  background: rgba(255,255,255,.012);
}

.big-symbol {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,201,220,.14);
  border-radius: 50%;
  color: #d7cfef;
  font-family: "Cinzel", serif;
  font-size: 19px;
}

.big-three-grid small {
  color: #766e7e;
  font-family: "Cinzel", serif;
  font-size: 8px;
  letter-spacing: .13em;
}

.big-three-grid h4 {
  color: var(--text);
  font-family: "Cinzel", serif;
  font-size: 18px;
}

.big-three-grid p {
  grid-column: 2 / -1;
  margin-top: -7px;
  color: #8d8494;
  font-size: 10px;
  line-height: 1.55;
}

.element-balance {
  margin-top: 21px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
}

.element-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.element-heading span {
  font-family: "Cinzel", serif;
  font-size: 13px;
}

.element-heading small {
  color: #756d7d;
  font-size: 8px;
}

.element-row {
  display: grid;
  grid-template-columns: 88px 1fr 18px;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.element-row > div:first-child {
  display: flex;
  align-items: center;
  gap: 8px;
}

.element-row > div:first-child span {
  width: 17px;
  color: #a198aa;
  text-align: center;
}

.element-row strong {
  color: #938a9c;
  font-size: 9px;
  font-weight: 500;
}

.element-track {
  height: 4px;
  overflow: hidden;
  border-radius: 99px;
  background: rgba(255,255,255,.055);
}

.element-track span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--astro-blue), #d7cfef);
  transition: width .8s ease;
}

.element-row b {
  color: #887f90;
  font-family: "Cinzel", serif;
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}

.placements-section,
.interpretation-section {
  margin-top: 22px;
  padding: 27px;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 21px;
  background: rgba(255,255,255,.012);
}

.section-mini-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.section-mini-heading .eyebrow {
  margin-bottom: 8px;
}

.section-mini-heading > p {
  max-width: 420px;
  color: #817987;
  font-size: 10px;
  line-height: 1.6;
}

.placements-table {
  margin-top: 8px;
}

.placement-row {
  display: grid;
  grid-template-columns: minmax(125px, 1.1fr) minmax(120px, 1fr) 80px minmax(160px, 1.5fr);
  align-items: center;
  gap: 14px;
  padding: 15px 7px;
  border-bottom: 1px solid rgba(255,255,255,.045);
  animation: rowAppear .5s var(--row-delay) ease both;
}

@keyframes rowAppear {
  from { opacity: 0; translate: 0 8px; }
}

.placement-planet {
  display: flex;
  align-items: center;
  gap: 11px;
}

.placement-symbol {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,201,220,.12);
  border-radius: 50%;
  color: #d1cadb;
}

.placement-planet strong,
.placement-sign strong {
  display: block;
  font-family: "Cinzel", serif;
  font-size: 11px;
}

.placement-planet small,
.placement-sign small {
  display: block;
  margin-top: 4px;
  color: #696270;
  font-size: 8px;
}

.placement-degree {
  color: #9c93a4;
  font-family: "Cinzel", serif;
  font-size: 10px;
}

.placement-theme {
  color: #8b8292;
  font-size: 9px;
  line-height: 1.45;
}

.interpretation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
  margin-top: 20px;
}

.interpretation-grid article {
  position: relative;
  min-height: 245px;
  padding: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.055);
  border-radius: 17px;
  background:
    radial-gradient(circle at 100% 0%, rgba(128,97,181,.1), transparent 42%),
    rgba(255,255,255,.012);
}

.interpretation-grid article > span {
  position: absolute;
  top: 17px;
  right: 18px;
  color: #514a58;
  font-family: "Cinzel", serif;
  font-size: 10px;
}

.interpretation-grid small {
  color: var(--gold);
  font-family: "Cinzel", serif;
  font-size: 8px;
  letter-spacing: .17em;
}

.interpretation-grid h4 {
  max-width: 90%;
  margin: 28px 0 14px;
  font-family: "Cinzel", serif;
  font-size: 21px;
  line-height: 1.25;
}

.interpretation-grid p {
  color: #948b9b;
  font-size: 11px;
  line-height: 1.75;
}

.prototype-notice {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid rgba(128,97,181,.13);
  border-radius: 15px;
  background: rgba(128,97,181,.035);
  color: #827a89;
  font-size: 9px;
  line-height: 1.65;
}

.prototype-notice > span {
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(200,201,220,.14);
  border-radius: 50%;
  color: #d7cfef;
  font-family: "Cinzel", serif;
}

.prototype-notice strong {
  color: #afa5b5;
}

@media (max-width: 1120px) {
  .astrology-shell {
    grid-template-columns: 230px minmax(0, 1fr);
  }

  .astrology-sidebar {
    padding: 34px 22px;
  }

  .chart-dashboard {
    grid-template-columns: 1fr;
  }

  .natal-wheel {
    width: min(560px, 92%);
  }

  .big-three-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .big-three-grid article {
    grid-template-columns: 46px 1fr;
  }

  .big-three-grid p {
    grid-column: 1 / -1;
    margin-top: 2px;
  }
}

@media (max-width: 840px) {
  .astrology-header,
  .astrology-main {
    width: min(100% - 28px, 1320px);
  }

  .astrology-header {
    height: 74px;
  }

  .astrology-back {
    font-size: 0;
  }

  .astrology-back span {
    font-size: 18px;
  }

  .astrology-main {
    padding-top: 42px;
  }

  .astrology-intro {
    grid-template-columns: 1fr;
    padding: 0 12px 55px;
    text-align: center;
  }

  .astrology-intro > div:first-child > p:last-child {
    margin-left: auto;
    margin-right: auto;
  }

  .mini-cosmos {
    width: 235px;
    height: 235px;
    margin: 5px auto 0;
  }

  .astrology-shell {
    grid-template-columns: 1fr;
  }

  .astrology-sidebar {
    border-right: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
  }

  .astrology-progress {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .astrology-progress li {
    min-height: auto;
  }

  .astrology-progress li:not(:last-child)::after {
    display: none;
  }

  .astrology-guide {
    display: none;
  }

  .astrology-note {
    margin-top: 16px;
  }

  .astrology-content {
    padding: 40px 23px 48px;
  }

  .big-three-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 620px) {
  .astrology-intro {
    text-align: left;
  }

  .astrology-intro h1 {
    font-size: clamp(39px, 12vw, 55px);
  }

  .astrology-intro h1 em {
    display: inline;
  }

  .mini-cosmos {
    display: none;
  }

  .astrology-sidebar {
    padding: 22px 16px;
  }

  .astrology-progress li {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .astrology-progress li > span {
    flex: 0 0 29px;
    width: 29px;
    height: 29px;
  }

  .astrology-progress li strong {
    margin: 0;
    font-size: 9px;
  }

  .astrology-progress li small,
  .astrology-note {
    display: none;
  }

  .astrology-content {
    padding: 32px 15px 40px;
  }

  .astrology-step-heading {
    grid-template-columns: 1fr;
  }

  .astrology-step-heading > span {
    width: 39px;
    height: 39px;
  }

  .birth-form {
    grid-template-columns: 1fr;
  }

  .astro-field-wide,
  .unknown-time {
    grid-column: auto;
  }

  .birth-actions .primary-button {
    width: 100%;
  }

  .result-hero {
    flex-direction: column;
  }

  .result-hero .secondary-button {
    width: 100%;
  }

  .chart-panel,
  .placements-section,
  .interpretation-section {
    padding: 18px 14px;
  }

  .panel-heading,
  .section-mini-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .natal-wheel {
    width: 100%;
  }

  .zodiac-label {
    --radius: calc(var(--wheel-size, 340px) * -.445);
  }

  .house-label {
    --radius: calc(var(--wheel-size, 340px) * -.31);
  }

  .planet-marker {
    --radius: calc(var(--wheel-size, 340px) * -.19);
  }

  .placement-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .placement-degree,
  .placement-theme {
    padding-left: 42px;
  }

  .interpretation-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mini-ring,
  .calc-ring,
  .planet-marker,
  .placement-row {
    animation: none !important;
  }
}