/* observatory.css — consume los tokens de tokens.css; no redefine ninguno. */
body {
  background:
    radial-gradient(ellipse at 90% 0, #22335444, transparent 38%),
    radial-gradient(ellipse at 0 60%, #30244122, transparent 50%), var(--bg);
}
main {
  max-width: 1440px;
  padding: 0 50px;
}
.header {
  max-width: 1550px;
  padding-top: 26px;
  padding-bottom: 26px;
}
.hero {
  min-height: 490px;
}
.hero h1 {
  font-size: clamp(58px, 5.7vw, 86px);
  line-height: 1.02;
  letter-spacing: -2.5px;
}
.hero-art img {
  max-width: 630px;
}
.hero-copy p {
  max-width: 460px;
  color: #aab5c5;
}
.hero .eyebrow {
  font-size: 11px;
}
.button {
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #ffffff0a;
}
.gold {
  background: linear-gradient(110deg, #b89661, #e5cd9a 55%, #c0a06a);
  color: #101826;
}
.gold:after {
  content: '';
  position: absolute;
  inset: -90% auto -90% -80%;
  width: 45%;
  background: linear-gradient(90deg, transparent, #fff7, transparent);
  transform: rotate(24deg);
  transition: left 0.7s;
}
.gold:hover:after {
  left: 140%;
}
.hero-copy h1 em {
  background: linear-gradient(120deg, #e6c592, #fff2d5 50%, #ad8855);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.reading-card {
  background:
    radial-gradient(ellipse at 100% 0, #35446825, transparent 60%), linear-gradient(130deg, #132032, #0e1727);
  box-shadow: 0 20px 70px #0002;
}
.reading-card h3 {
  font-size: 36px;
  max-width: 680px;
  line-height: 1.15;
}
.reading-title {
  padding-bottom: 6px;
}
.reading-title h2 {
  font-size: 40px;
}
.large-symbol {
  font-size: 58px;
  text-shadow: 0 0 25px #c8ad791c;
}
.ritual {
  background: linear-gradient(90deg, #c8ad790a, transparent);
  padding: 22px;
  margin: 26px -8px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.ritual p {
  font-size: 24px;
}
.zodiac {
  background: linear-gradient(145deg, #17233855, #0c152233);
  padding: 19px 3px 14px;
}
.zodiac .symbol {
  font-size: 33px;
}
.zodiac.selected {
  box-shadow:
    0 8px 24px #c8ad790c,
    inset 0 0 30px #c8ad7908;
}
.article-card {
  background: linear-gradient(145deg, #15213670, #0d152300);
}
.article-visual {
  height: 190px;
}
.personal-invitation {
  background: radial-gradient(ellipse at 50% 50%, #c8ad790a, transparent 75%);
  padding: 38px 20px;
}
.section-heading h2 {
  font-size: 42px;
}
.page-intro {
  padding: 55px 0 40px;
  position: relative;
}
.page-intro h1 {
  font-size: clamp(54px, 5.6vw, 78px);
  margin: 18px 0;
  line-height: 0.99;
  letter-spacing: -1.5px;
}
.page-intro p {
  max-width: 550px;
  margin: 20px auto 0;
  line-height: 1.8;
}
.page-intro:before {
  content: '';
  position: absolute;
  top: 30px;
  left: 50%;
  width: 110px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c8ad7988, transparent);
  transform: translateX(-50%);
}
.birth-layout {
  grid-template-columns: minmax(335px, 385px) minmax(0, 1fr);
  gap: 25px;
  align-items: start;
}
.form-card {
  padding: 30px 26px;
  background: linear-gradient(145deg, #142135aa, #0c1523e0);
  border-top-color: #c8ad7970;
}
.form-card h2 {
  font-size: 34px;
}
.form-card label {
  font-size: 14px;
  line-height: 1.55;
  margin-bottom: 16px;
}
.form-card .two-fields {
  gap: 12px;
}
.form-card input,
.form-card select {
  font-size: 14px;
  min-height: 47px;
  background: #070f1ba8;
  border-color: #cad0df24;
}
.form-card input:focus,
.form-card select:focus {
  border-color: #c8ad7980;
}
.form-card .two-fields input {
  min-width: 0;
}
.form-card > .eyebrow {
  font-size: 11px;
}
.form-card .form-help {
  font-size: 12px;
  line-height: 1.7;
}
.place-picker {
  margin-top: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.place-picker > label {
  margin-bottom: 9px;
}
.place-search {
  display: flex;
  gap: 0;
  background: #08101b;
  border: 1px solid #d1b77f50;
  border-radius: 4px;
  overflow: hidden;
}
.place-search input {
  border: 0;
  border-radius: 0;
  width: 100%;
  padding: 12px 10px;
  font-size: 13px;
}
.place-search button {
  border: 0;
  background: #d1b77f14;
  color: var(--gold-light);
  font-size: 12px;
  padding: 0 13px;
  white-space: nowrap;
}
.place-search button:hover {
  background: #d1b77f28;
}
.place-search:focus-within {
  outline: 1px solid var(--gold);
}
.place-search input:focus-visible {
  outline: none;
}
.place-results {
  background: #0a1423;
  max-height: 240px;
  overflow: auto;
  border-radius: 0 0 4px 4px;
}
.place-result {
  display: block;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  width: 100%;
  padding: 12px 14px;
  text-align: left;
  color: #e6dcc6;
}
.place-result:hover,
.place-result:focus-visible {
  background: #d1b77f10;
}
.place-result strong {
  font-size: 14px;
  display: block;
  font-weight: 500;
}
.place-result span {
  font-size: 12px;
  display: block;
  color: var(--muted);
  margin-top: 3px;
}
.map-status {
  font-size: 12px;
  color: #a4b0c4;
  line-height: 1.6;
  margin: 10px 0 13px;
  min-height: 38px;
}
.birth-map-frame {
  position: relative;
  border: 1px solid #c8ad7938;
  border-radius: 5px;
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 8px 30px #0003;
}
#birth-map {
  height: 300px;
  background: #0b1422;
  width: 100%;
  z-index: 0;
}
.astra-map-tiles {
  filter: invert(0.94) hue-rotate(178deg) saturate(0.36) brightness(0.85) contrast(0.98);
}
.map-selected-badge {
  position: absolute;
  left: 12px;
  bottom: 30px;
  right: 12px;
  z-index: 500;
  background: #0a1222e8;
  backdrop-filter: blur(14px);
  border: 1px solid #c8ad794d;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  pointer-events: none;
  border-radius: 3px;
}
.map-selected-badge > span {
  font-size: 28px;
  color: var(--gold);
}
.map-selected-badge small {
  display: block;
  font-size: 9px;
  letter-spacing: 1.8px;
  color: var(--gold);
}
.map-selected-badge strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  max-height: 3em;
  overflow: hidden;
  color: #eae4d7;
}
.map-bottom {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 12px 0 8px;
}
.map-bottom > span {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: #aebcce;
  letter-spacing: 0.5px;
}
.map-bottom button {
  background: transparent;
  border: 0;
  padding: 3px 0;
  text-align: left;
  font-size: 12px;
  color: var(--gold-light);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.leaflet-container {
  font-family: var(--sans);
}
.leaflet-control-zoom {
  border: 1px solid #c8ad7955 !important;
  box-shadow: 0 4px 16px #0005 !important;
}
.leaflet-control-zoom a {
  background: #111b2b !important;
  color: var(--gold-light) !important;
  border-color: #c8ad7933 !important;
  width: 33px !important;
  height: 33px !important;
  line-height: 33px !important;
}
.leaflet-control-attribution {
  background: #0d1525ec !important;
  color: #aab9cb !important;
  font-size: 10px !important;
}
.leaflet-control-attribution a {
  color: #d3bc90 !important;
}
.birth-pin {
  background: none;
  border: 0;
}
.pin-core {
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  border: 1px solid #f2d79d;
  background: #0e1828;
  box-shadow: 0 0 24px #e3c185a0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffe2a0;
  font-size: 18px;
  line-height: 1;
}
.pin-pulse {
  position: absolute;
  inset: 0;
  border: 1px solid #e3c1858c;
  border-radius: 50%;
  background: #e3c18517;
  animation: pin-pulse 3s ease-out infinite;
}
.location-details {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 13px 0;
  margin: 17px 0;
}
.location-details summary {
  font-size: 12px;
  color: #c3b693;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
}
.location-details summary:after {
  content: '+';
  font-size: 17px;
}
.location-details[open] summary {
  margin-bottom: 20px;
}
.location-details[open] summary:after {
  content: '−';
}
.timezone-summary {
  font-size: 11px;
  line-height: 1.6;
  color: #b6bba9;
  overflow-wrap: anywhere;
}
.form-card > .button {
  gap: 16px;
  font-size: 14px;
  margin-top: 14px;
}
.natal-card {
  padding: 28px 27px;
  background:
    radial-gradient(ellipse at 50% 16%, #29426434, transparent 44%),
    linear-gradient(150deg, #0e1a2bee, #080f1ddd);
  border: 1px solid #d1b77f3b;
  box-shadow:
    0 0 90px #0002,
    inset 0 1px #e0c08822;
  border-radius: 5px;
  overflow: hidden;
  min-width: 0;
}
.observatory-heading {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
}
.observatory-heading .eyebrow {
  font-size: 10px;
}
.observatory-heading h2 {
  font-size: 36px;
  line-height: 1.1;
  margin: 10px 0;
}
.expand-chart {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  background: #c8ad7909;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 26px;
  border-radius: 50%;
  transition: 0.3s;
}
.expand-chart:hover {
  background: #c8ad7924;
  transform: scale(1.06);
}
.natal-meta {
  display: flex;
  gap: 7px 22px;
  flex-wrap: wrap;
  font-size: 11px;
  color: #8e9db1;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.natal-meta span {
  max-width: 100%;
  overflow-wrap: anywhere;
}
.chart-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 17px 0 0;
  gap: 12px;
}
.chart-toolbar > span {
  font-size: 9px;
  letter-spacing: 2px;
  color: #8794a9;
}
.chart-toolbar > div {
  display: flex;
  gap: 7px;
}
.chart-toolbar button {
  font-size: 11px;
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 5px 12px;
  background: transparent;
  color: #8090a7;
  transition: 0.3s;
}
.chart-toolbar button[aria-pressed='true'] {
  background: #c8ad7911;
  color: #d8c293;
  border-color: #c8ad7970;
}
.chart-stage {
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at center, #1a335a2a, transparent 66%);
  min-width: 0;
}
.natal-wheel {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 6px auto 0;
  overflow: visible;
  animation: chart-reveal 1.4s ease-out both;
}
.chart-fine-ring {
  fill: none;
  stroke: #dac18d3d;
  stroke-width: 0.8;
}
.degree-major {
  stroke: #ecd19c;
  stroke-width: 1.1;
}
.degree-tick {
  stroke: #bdac8a77;
  stroke-width: 0.65;
}
.zodiac-glyph {
  font:
    25px Georgia,
    serif;
}
.zodiac-name {
  font: 8px var(--sans);
  letter-spacing: 1px;
}
.house-spoke {
  stroke: #8aa6c32e;
  stroke-width: 0.7;
  stroke-dasharray: 2 5;
}
.house-number {
  font: 12px var(--sans);
  fill: #8a9bb1;
}
.house-layer,
.aspect-layer {
  transition: opacity 0.6s;
}
.chart-inner-ring {
  fill: none;
  stroke: #8ea4bd25;
  stroke-width: 0.7;
  stroke-dasharray: 2 6;
}
.aspect-line {
  stroke-width: 1.2;
  opacity: 0.42;
  stroke-dasharray: 650;
  stroke-dashoffset: 0;
  animation: aspect-reveal 2.4s ease both;
  transition:
    opacity 0.35s,
    stroke-width 0.35s;
}
.aspect-line.flow {
  stroke: #82c7d7;
}
.aspect-line.tension {
  stroke: #ca96ad;
}
.aspect-line.union {
  stroke: #d6bb83;
}
.aspect-line.highlighted {
  stroke-width: 2;
  opacity: 0.92;
  filter: drop-shadow(0 0 3px currentColor);
}
.chart-center-disc {
  fill: #101e2fed;
  stroke: #d4bb8240;
  stroke-width: 0.7;
}
.chart-center-star {
  fill: #ebd29d;
  font: 51px var(--serif);
}
.chart-center-text {
  fill: #bba67f;
  font: 9px var(--sans);
  letter-spacing: 1.7px;
}
.planet-leader {
  stroke: #bdad913f;
  stroke-width: 0.8;
  stroke-dasharray: 2 3;
}
.planet-node {
  cursor: pointer;
  outline: none;
}
.planet-disc {
  fill: #0d192b;
  stroke: var(--planet-color);
  stroke-width: 1;
  transition:
    fill 0.35s,
    stroke-width 0.35s;
}
.planet-glyph {
  fill: var(--planet-color);
  font:
    24px Georgia,
    serif;
  pointer-events: none;
}
.planet-aura {
  transition: opacity 0.4s;
}
.planet-node.selected .planet-disc,
.planet-node:hover .planet-disc,
.planet-node:focus-visible .planet-disc {
  fill: #2d3442;
  stroke-width: 2.3;
}
.planet-node.selected .planet-aura,
.planet-node:hover .planet-aura {
  opacity: 0.45;
}
.planet-node:focus-visible .planet-disc {
  stroke: #fff;
  stroke-width: 3;
}
.axis-line {
  stroke: #dbbc7d;
  stroke-width: 1;
}
.axis-label {
  font: 11px var(--sans);
  fill: #f2d7a1;
  letter-spacing: 1px;
}
.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 7px 0;
}
.chart-legend > span {
  font-size: 10px;
  color: #90a1b7;
  display: flex;
  align-items: center;
  gap: 7px;
}
.chart-legend i {
  display: inline-block;
  height: 1px;
  width: 17px;
}
.legend-flow {
  background: #82c7d7;
}
.legend-tension {
  background: #ca96ad;
}
.legend-union {
  background: #d6bb83;
}
.chart-touch-hint {
  text-align: center;
  font: italic 18px/1.5 var(--serif);
  color: #c6b791;
  margin: 18px 0 22px;
}
.planet-selector {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
  padding-top: 17px;
  border-top: 1px solid var(--line);
  margin-bottom: 20px;
}
.planet-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 11px;
  border: 1px solid #a2b1c522;
  background: #131f3022;
  font-size: 11px;
  border-radius: 3px;
  color: #92a0b5;
  min-height: 38px;
  transition: 0.3s;
}
.planet-chip > span {
  font: 19px Georgia;
  color: #b8ad92;
}
.planet-chip.selected,
.planet-chip:hover {
  color: #f1dbb0;
  border-color: #d1b77f88;
  background: #c8ad7912;
}
.planet-insight {
  background: linear-gradient(125deg, #1d30414d, #1b223620);
  border: 1px solid #c8ad7933;
  border-radius: 4px;
  padding: 26px 25px;
  position: relative;
}
.planet-insight:before {
  content: '';
  position: absolute;
  top: -1px;
  left: 25px;
  width: 65px;
  height: 1px;
  background: var(--gold);
}
.insight-heading {
  display: flex;
  gap: 17px;
  align-items: center;
}
.insight-symbol {
  color: var(--gold);
  font: 45px Georgia;
  min-width: 39px;
}
.insight-heading .eyebrow {
  font-size: 10px;
  letter-spacing: 1.5px;
}
.insight-heading h3 {
  font-size: 30px;
  line-height: 1.12;
  margin: 9px 0;
}
.insight-keywords {
  font-size: 9px;
  color: #869bb2;
  letter-spacing: 2px;
  display: block;
  margin: 15px 0;
}
.planet-insight > p {
  font-size: 15px;
  line-height: 1.9;
  color: #aab7c7;
  margin-bottom: 15px;
}
.planet-insight blockquote {
  margin: 22px 0 0;
  padding: 15px 0 0;
  border-top: 1px solid #c8ad7928;
  font: italic 24px/1.3 var(--serif);
  color: var(--gold-light);
}
.big-three.elevated {
  gap: 10px;
  margin-top: 23px;
}
.big-three.elevated > div {
  padding: 19px 8px;
  background: radial-gradient(ellipse at center, #c8ad790a, transparent);
  border-color: #c8ad792b;
}
.big-three.elevated span {
  font-size: 10px;
  letter-spacing: 1px;
}
.big-three.elevated strong {
  font-size: 28px;
  display: block;
  margin-top: 8px;
}
.big-three.elevated p {
  font-size: 11px;
  color: #8495aa;
  margin: 4px 0 0;
}
.element-balance {
  padding: 27px 0 22px;
}
.element-balance > .eyebrow {
  font-size: 10px;
}
.element-bars {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 13px 25px;
  margin-top: 17px;
}
.element-bars > div {
  display: grid;
  grid-template-columns: 42px 1fr 31px;
  gap: 10px;
  align-items: center;
  font-size: 11px;
  color: #9cabbd;
}
.element-bars strong {
  font-weight: 400;
  text-align: right;
  font-size: 10px;
}
.element-track {
  height: 3px;
  background: #9aa8bf14;
}
.element-track i {
  display: block;
  height: 3px;
  width: var(--bar);
  background: var(--element);
  box-shadow: 0 0 10px color-mix(in srgb, var(--element) 25%, transparent);
  animation: bar-reveal 1.2s ease both;
  transform-origin: left;
}
.element-balance > p {
  font-size: 10px;
  color: #73849b;
  margin: 13px 0 0;
}
.natal-data {
  border-top: 1px solid var(--line);
  padding: 16px 0;
}
.natal-data summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #c8c8c7;
}
.natal-data summary span {
  font-size: 11px;
  color: #a99876;
}
.natal-data[open] summary {
  margin-bottom: 15px;
}
.aspect-list > div {
  display: flex;
  gap: 15px;
  justify-content: space-between;
  border-bottom: 1px solid #c8ad791a;
  padding: 11px 0;
  font-size: 12px;
  color: #c0c6ce;
}
.aspect-list small {
  white-space: nowrap;
  color: #8d9caf;
  font-size: 10px;
}
.aspect-list em {
  color: #a38daf;
  font-family: var(--serif);
  font-size: 16px;
  margin: 0 7px;
}
.natal-card > .chart-note {
  font-size: 11px;
  line-height: 1.8;
  margin: 17px 0 23px;
}
.natal-card > #personal-today {
  width: 100%;
  font-size: 14px;
}
.observatory-empty {
  position: relative;
  min-height: 920px;
  justify-content: flex-start;
  padding-top: 0;
  overflow: hidden;
}
.empty-atlas {
  width: 120%;
  max-width: 820px;
  position: absolute;
  top: -45px;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}
.empty-atlas img {
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  opacity: 0.75;
  mask-image: radial-gradient(ellipse at center, #000 25%, transparent 69%);
}
.empty-content {
  position: relative;
  margin-top: 480px;
  z-index: 1;
  text-align: center;
  padding: 15px;
}
.empty-content .eyebrow {
  font-size: 10px;
}
.empty-content h2 {
  font-size: 43px;
  line-height: 1.12;
  margin: 22px 0;
}
.empty-content p {
  font-size: 16px;
  max-width: 355px;
  margin: 0 auto 20px;
  color: #9dafc2;
}
.empty-coordinates {
  margin-top: auto;
  display: flex;
  justify-content: center;
  gap: 32px;
  padding: 45px 0 20px;
  color: #c6af80;
  font-size: 10px;
  letter-spacing: 1px;
}
#chart-dialog {
  width: min(1450px, 96vw);
  max-width: 1450px;
  padding: 35px 45px;
  background: radial-gradient(ellipse at 30% 40%, #1b30475e, transparent 65%), #090f1c;
  max-height: 95dvh;
  border-color: #d1b77f60;
}
#chart-dialog .close-dialog {
  z-index: 2;
}
.expanded-header h2 {
  font-size: 40px;
  margin: 10px 0 20px;
}
.expanded-header .eyebrow {
  font-size: 11px;
}
.expanded-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 30px;
  align-items: center;
}
.expanded-layout .planet-insight {
  padding: 25px;
}
.expanded-layout .natal-wheel {
  max-width: 850px;
}
.expanded-layout .planet-selector {
  border: 0;
  padding: 0;
}
.method-note {
  color: #8293a8;
  margin-top: 30px;
}
.method-note a {
  color: #b6a27d;
}
@keyframes chart-reveal {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes aspect-reveal {
  from {
    stroke-dashoffset: 650;
    opacity: 0;
  }
  to {
    stroke-dashoffset: 0;
    opacity: 0.42;
  }
}
@keyframes pin-pulse {
  0% {
    transform: scale(0.7);
    opacity: 0.9;
  }
  90%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}
@keyframes bar-reveal {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}
@media (min-width: 1500px) {
  main {
    max-width: 1500px;
  }
  .birth-layout {
    grid-template-columns: 400px minmax(0, 1fr);
  }
  .natal-card {
    padding: 32px 38px;
  }
  .hero {
    min-height: 540px;
  }
  .hero-art img {
    max-width: 670px;
  }
  .observatory-empty {
    min-height: 960px;
  }
  .empty-content {
    margin-top: 560px;
  }
}
@media (max-width: 1100px) {
  main {
    padding: 0 30px;
  }
  .birth-layout {
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 18px;
  }
  .form-card {
    padding: 25px 20px;
  }
  .natal-card {
    padding: 25px 18px;
  }
  .observatory-heading h2 {
    font-size: 30px;
  }
  .planet-insight {
    padding: 22px 18px;
  }
  .insight-heading h3 {
    font-size: 27px;
  }
  .planet-insight > p {
    font-size: 15px;
  }
  .empty-content {
    margin-top: 350px;
  }
  .empty-content h2 {
    font-size: 36px;
  }
  .observatory-empty {
    min-height: 950px;
  }
  .empty-atlas {
    top: 10px;
    width: 150%;
  }
  .big-three.elevated strong {
    font-size: 25px;
  }
  .chart-toolbar > span {
    font-size: 8px;
    letter-spacing: 1px;
  }
  .chart-toolbar button {
    padding: 5px 9px;
  }
  .chart-touch-hint {
    font-size: 17px;
  }
  .hero {
    min-height: 445px;
  }
  .hero-art img {
    max-width: 540px;
  }
  .hero h1 {
    font-size: 68px;
  }
  .element-bars {
    column-gap: 15px;
  }
  .expanded-layout {
    gap: 20px;
    grid-template-columns: 1.2fr 1fr;
  }
  #chart-dialog {
    padding: 30px;
  }
  .expanded-layout .insight-heading h3 {
    font-size: 26px;
  }
}
@media (max-width: 850px) {
  .birth-layout {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 28px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 25px;
    align-items: start;
  }
  .form-card > .eyebrow,
  .form-card > h2,
  .form-card > .place-picker,
  .form-card > .location-details,
  .form-card > .timezone-summary,
  .form-card > .button,
  .form-card > .form-message,
  .form-card > .form-help {
    grid-column: 1/-1;
  }
  .form-card > .two-fields {
    grid-template-columns: 1fr;
  }
  .form-card > .two-fields label {
    margin-bottom: 15px;
  }
  .form-card > .place-picker {
    margin-top: 5px;
  }
  #birth-map {
    height: 340px;
  }
  .map-status {
    min-height: 0;
  }
  .form-card > h2 {
    margin-bottom: 25px;
  }
  .location-details .two-fields {
    grid-template-columns: 1fr 1fr;
  }
  .natal-card {
    padding: 28px;
  }
  .observatory-empty {
    min-height: 730px;
  }
  .empty-atlas {
    width: 105%;
    top: -60px;
  }
  .empty-content {
    margin-top: 415px;
  }
  .empty-content h2 {
    font-size: 40px;
  }
  .empty-coordinates {
    padding-top: 30px;
  }
  .natal-wheel {
    max-width: 750px;
  }
  .insight-heading h3 {
    font-size: 32px;
  }
  .expanded-layout {
    grid-template-columns: 1fr;
  }
  .expanded-layout .chart-stage {
    max-width: 720px;
    width: 100%;
    margin: auto;
  }
  .page-intro h1 {
    font-size: 64px;
  }
  .personal-invitation {
    flex-direction: column;
    text-align: center;
    gap: 24px;
  }
  .personal-invitation .button {
    margin: auto;
  }
  .invite-icon {
    display: none;
  }
}
@media (max-width: 760px) {
  main {
    padding: 0 18px;
  }
  .hero {
    min-height: 385px;
  }
  .hero h1 {
    font-size: 59px;
  }
  .hero-copy p {
    font-size: 16px;
    max-width: 94%;
  }
  .hero-art {
    opacity: 0.33;
    inset: 0 -80px 0 35%;
  }
  .hero-art img {
    max-width: none;
    width: 460px;
  }
  .hero .eyebrow {
    font-size: 9px;
    letter-spacing: 1.2px;
  }
  .reading-card {
    padding: 24px 20px;
  }
  .reading-card h3 {
    font-size: 31px;
  }
  .reading-title h2 {
    font-size: 35px;
  }
  .ritual {
    padding: 18px 13px;
  }
  .ritual p {
    font-size: 23px;
  }
  .section-heading h2 {
    font-size: 33px;
  }
  .zodiac {
    padding: 13px 3px;
  }
  .zodiac .symbol {
    font-size: 31px;
  }
  .article-visual {
    height: 100%;
    min-height: 155px;
  }
  .personal-invitation {
    padding: 27px 12px;
  }
  .page-intro {
    padding: 43px 0 28px;
  }
  .page-intro:before {
    top: 20px;
  }
  .page-intro h1 {
    font-size: 56px;
  }
  .page-intro p {
    font-size: 15px;
    max-width: 340px;
  }
  .page-intro > .eyebrow {
    font-size: 10px;
  }
  .form-card {
    padding: 25px 20px;
    display: block;
  }
  .form-card h2 {
    font-size: 36px;
  }
  .form-card > .two-fields {
    grid-template-columns: 1fr 1fr;
  }
  .form-card > .two-fields label {
    font-size: 12px;
  }
  .form-card > .two-fields input {
    font-size: 13px;
    padding: 10px 8px;
  }
  .place-picker {
    margin-top: 12px;
  }
  #birth-map {
    height: 310px;
  }
  .form-card > .button {
    font-size: 14px;
  }
  .natal-card {
    padding: 24px 15px;
  }
  .observatory-heading h2 {
    font-size: 32px;
  }
  .observatory-heading .eyebrow {
    font-size: 9px;
  }
  .natal-meta {
    font-size: 11px;
  }
  .chart-toolbar {
    padding-top: 17px;
  }
  .chart-toolbar > span {
    font-size: 8px;
  }
  .chart-stage {
    margin: 8px -9px 0;
  }
  .chart-legend {
    gap: 11px;
    margin-top: 14px;
  }
  .chart-legend > span {
    font-size: 9px;
  }
  .chart-touch-hint {
    font-size: 17px;
  }
  .planet-selector {
    gap: 7px;
  }
  .planet-chip {
    font-size: 12px;
    padding: 8px 11px;
    min-height: 44px;
    flex-grow: 1;
    justify-content: center;
  }
  .planet-chip > span {
    font-size: 21px;
  }
  .planet-insight {
    padding: 23px 18px;
  }
  .insight-heading {
    gap: 12px;
    align-items: flex-start;
  }
  .insight-heading h3 {
    font-size: 29px;
  }
  .insight-heading .eyebrow {
    font-size: 9px;
    line-height: 1.8;
  }
  .insight-symbol {
    font-size: 36px;
    min-width: 29px;
  }
  .insight-keywords {
    font-size: 9px;
    letter-spacing: 1.3px;
  }
  .planet-insight > p {
    font-size: 16px;
    line-height: 1.85;
  }
  .planet-insight blockquote {
    font-size: 25px;
  }
  .big-three.elevated {
    gap: 6px;
  }
  .big-three.elevated > div {
    padding: 17px 4px;
  }
  .big-three.elevated span {
    font-size: 8px;
    letter-spacing: 0.3px;
  }
  .big-three.elevated strong {
    font-size: 24px;
  }
  .big-three.elevated p {
    font-size: 10px;
  }
  .element-bars {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .element-bars > div {
    font-size: 12px;
    grid-template-columns: 50px 1fr 32px;
  }
  .element-bars strong {
    font-size: 11px;
  }
  .element-track,
  .element-track i {
    height: 4px;
  }
  .element-balance > .eyebrow {
    font-size: 11px;
  }
  .element-balance > p {
    font-size: 11px;
  }
  .natal-data summary {
    font-size: 12px;
  }
  .natal-data summary span {
    font-size: 10px;
  }
  .aspect-list > div {
    flex-direction: column;
    gap: 3px;
  }
  .natal-data .planet-table {
    font-size: 12px;
  }
  .natal-card > .chart-note {
    font-size: 11px;
  }
  .observatory-empty {
    min-height: 630px;
  }
  .empty-atlas {
    width: 125%;
    top: -22px;
  }
  .empty-content {
    margin-top: 320px;
    padding: 10px;
  }
  .empty-content h2 {
    font-size: 34px;
  }
  .empty-content p {
    font-size: 15px;
  }
  .empty-coordinates {
    gap: 15px;
    font-size: 8px;
    padding-top: 20px;
  }
  #chart-dialog {
    padding: 34px 16px;
    width: calc(100vw - 16px);
    max-height: 96dvh;
  }
  .expanded-header h2 {
    font-size: 34px;
  }
  .expanded-layout {
    gap: 15px;
  }
  .expanded-layout .planet-insight {
    padding: 22px 18px;
  }
  .expanded-layout .insight-heading h3 {
    font-size: 29px;
  }
  .expanded-header > .eyebrow {
    font-size: 10px;
  }
  .expanded-layout .chart-stage {
    margin: 0;
  }
  .method-note {
    font-size: 11px;
  }
}
@media (max-width: 380px) {
  .hero h1 {
    font-size: 51px;
  }
  .page-intro h1 {
    font-size: 48px;
  }
  .form-card {
    padding: 23px 16px;
  }
  .form-card > .two-fields {
    grid-template-columns: 1fr;
  }
  .big-three.elevated strong {
    font-size: 21px;
  }
  .natal-data summary {
    font-size: 11px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .aspect-line {
    stroke-dashoffset: 0;
  }
}

/* Motion stays on accents and data connections; the natal coordinates remain anchored. */
.chart-stage {
  --focus-color: #efd191;
  --light-x: 50%;
  --light-y: 50%;
}
.chart-stage:before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    ellipse at var(--light-x) var(--light-y),
    color-mix(in srgb, var(--focus-color) 12%, transparent),
    transparent 52%
  );
  transition: opacity 0.6s;
  opacity: 0.7;
}
.ambient-rings {
  pointer-events: none;
}
.orbit-trace {
  fill: none;
  stroke: #dec694;
  stroke-width: 1.2;
  transform-origin: 400px 400px;
  stroke-linecap: round;
}
.orbit-trace-a {
  stroke-dasharray: 65 700 25 900;
  opacity: 0.65;
  animation: ambient-orbit 65s linear infinite;
}
.orbit-trace-b {
  stroke: #82c7d7;
  stroke-dasharray: 12 600 35 1200;
  opacity: 0.35;
  animation: ambient-orbit 90s linear reverse infinite;
}
.center-breath {
  fill: none;
  stroke: var(--focus-color);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: center;
  animation: center-breath 6s ease-in-out infinite;
  pointer-events: none;
}
.chart-center-disc {
  transition: stroke 0.6s;
  stroke: color-mix(in srgb, var(--focus-color) 38%, transparent);
}
.chart-center-star {
  fill: var(--focus-color);
  transition: fill 0.5s;
  font-size: 46px;
}
.chart-center-text {
  font-size: 12px;
  letter-spacing: 2.2px;
  fill: #eddec0;
}
.chart-center-position {
  font: 11px var(--sans);
  fill: #9aaec3;
  letter-spacing: 0.4px;
}
.planet-ripple {
  fill: none;
  stroke: var(--planet-color);
  stroke-width: 1;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.planet-satellite-ring {
  fill: none;
  stroke: var(--planet-color);
  stroke-width: 1;
  stroke-dasharray: 12 42;
  opacity: 0;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
}
.planet-node.selected .planet-ripple {
  animation: planet-ripple 3.6s ease-out infinite;
}
.planet-node.selected .planet-satellite-ring,
.planet-node.hover-focus .planet-satellite-ring {
  opacity: 0.6;
  animation: ambient-orbit 18s linear infinite;
  transform-origin: center;
}
.planet-node.hover-focus .planet-disc {
  stroke-width: 2;
  fill: #283448;
}
.planet-node.selected .planet-aura {
  animation: aura-breathe 4s ease-in-out infinite;
}
.aspect-line {
  animation: aspect-ink 1.8s ease-out backwards;
  stroke-dasharray: none;
  stroke-dashoffset: 0;
  opacity: 0.22;
}
.aspect-line.highlighted {
  opacity: 0.85;
  stroke-width: 1.8;
  filter: none;
}
.aspect-flow {
  pointer-events: none;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 2 98;
  opacity: 0;
  animation: aspect-current 4.8s linear infinite;
  animation-delay: var(--flow-delay, 0s);
  transition: opacity 0.5s;
}
.aspect-flow.flow {
  stroke: #bef1f4;
}
.aspect-flow.tension {
  stroke: #efc1dc;
}
.aspect-flow.union {
  stroke: #ffe6ad;
}
.aspect-flow.highlighted {
  opacity: 0.92;
  filter: drop-shadow(0 0 3px #dcecff55);
}
.chart-toolbar {
  flex-wrap: wrap;
  row-gap: 12px;
}
.chart-toolbar > div {
  flex-wrap: wrap;
  justify-content: flex-end;
}
.chart-toolbar .motion-control,
.motion-control {
  background: #c8ad790a;
  border: 1px solid #c8ad7938;
  border-radius: 24px;
  color: #bfb397;
  font: 12px var(--sans);
  padding: 8px 12px;
  min-height: 36px;
  display: inline-flex;
  gap: 7px;
  align-items: center;
  cursor: pointer;
}
.motion-control:hover {
  border-color: #c8ad7988;
  color: #f0debb;
}
.motion-control > span {
  font-size: 13px;
  min-width: 11px;
}
.expanded-motion-control {
  display: flex;
  justify-content: flex-end;
  margin: -10px 0 12px;
}
.observatory-empty .empty-atlas img {
  animation: atlas-breathe 9s ease-in-out infinite;
}
.natal-motion-paused .natal-wheel,
.natal-motion-paused .natal-wheel *,
.natal-motion-paused .observatory-empty *,
.natal-page-hidden .natal-wheel,
.natal-page-hidden .natal-wheel *,
.natal-page-hidden .observatory-empty * {
  animation-play-state: paused !important;
}
.natal-motion-paused .aspect-flow {
  opacity: 0 !important;
}
.natal-motion-paused .planet-ripple {
  opacity: 0 !important;
}
.natal-motion-paused .chart-stage:before {
  opacity: 0.35;
}
body:has(#chart-dialog[open]) #natal-output .natal-wheel,
body:has(#chart-dialog[open]) #natal-output .natal-wheel * {
  animation-play-state: paused !important;
}
@keyframes ambient-orbit {
  to {
    transform: rotate(360deg);
  }
}
@keyframes center-breath {
  0%,
  100% {
    opacity: 0.18;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(1.055);
  }
}
@keyframes planet-ripple {
  0% {
    opacity: 0.7;
    transform: scale(0.9);
  }
  85%,
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@keyframes aura-breathe {
  0%,
  100% {
    opacity: 0.24;
  }
  50% {
    opacity: 0.6;
  }
}
@keyframes aspect-current {
  from {
    stroke-dashoffset: 100;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes aspect-ink {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.22;
  }
}
@keyframes atlas-breathe {
  0%,
  100% {
    opacity: 0.65;
    transform: scale(1);
  }
  50% {
    opacity: 0.85;
    transform: scale(1.025);
  }
}
@media (max-width: 760px) {
  .chart-toolbar > span {
    width: 100%;
    font-size: 10px;
  }
  .chart-toolbar > div {
    width: 100%;
    justify-content: space-between;
  }
  .chart-toolbar button {
    min-height: 40px;
  }
  .chart-toolbar .motion-control {
    font-size: 11px;
  }
  .expanded-motion-control {
    margin: 0 0 15px;
  }
  .orbit-trace-a {
    stroke-width: 1.7;
  }
  .aspect-flow {
    stroke-width: 3;
  }
}
@media (prefers-reduced-motion: reduce) {
  .natal-wheel,
  .natal-wheel *,
  .observatory-empty * {
    animation: none !important;
    transition: none !important;
  }
  .aspect-flow,
  .planet-ripple {
    display: none;
  }
  .chart-stage:before {
    transition: none;
  }
  .center-breath {
    opacity: 0.2;
  }
  .planet-node.selected .planet-satellite-ring {
    opacity: 0.5;
  }
}
.natal-motion-paused .natal-wheel,
.natal-motion-paused .aspect-line {
  animation: none !important;
}