:root {
  --black: #000;
  --white: #fff;
  --cream: #f5f0e8;
  --gray: #525252;
  --gray-light: #e5e5e5;
  --gold: #c4a574;
  --gold-dim: #8a7349;
  --chart-bg: #0a0908;
  --chart-bg-deep: #050504;
  --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --font-ui: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', system-ui, sans-serif;
  --nav-h: 56px;
  --section-gap: 1.75rem;
  --stack-gap: 0.65rem;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-solid: #faf8f4;
  --separator: rgba(0, 0, 0, 0.08);
  --control-h: 44px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.08);
  --tooltip-dark: rgba(22, 20, 18, 0.97);
  --tooltip-light: rgba(255, 255, 255, 0.98);
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--cream);
  color: var(--black);
  font-family: var(--font-serif);
  font-size: 21px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  width: min(1080px, 100% - 3rem);
  margin-inline: auto;
}

a { color: inherit; text-underline-offset: 2px; }

.logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}

.logo-mark {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.logo-lens { fill: var(--black); }
.logo-star { fill: var(--white); }

.nav .logo-mark {
  width: 36px;
  height: 36px;
}

.nav .logo {
  font-size: 1.25rem;
}

.hero-logo-link {
  display: flex;
  justify-content: center;
  margin-top: 1.35rem;
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--ease-out);
}

.hero-logo-link:hover {
  transform: scale(1.03);
}

.hero-logo-mark {
  width: clamp(64px, 14vw, 96px);
  height: clamp(64px, 14vw, 96px);
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  list-style: none;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nav-links a {
  text-decoration: none;
  color: var(--gray);
  transition: color 0.2s var(--ease-out);
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--black);
}

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(245, 240, 232, 0.82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separator);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}

.label {
  font-family: var(--font-serif);
  font-size: 0.85rem;
  font-style: italic;
  letter-spacing: 0.02em;
  text-transform: lowercase;
  color: var(--gold-dim);
  margin-bottom: 0.75rem;
}

.mono { font-family: var(--font-serif); font-size: 0.9rem; font-style: italic; }

.hero-tagline {
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.65rem;
  color: var(--black);
}

.lede {
  max-width: 28em;
  font-family: var(--font-ui);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--gray);
  margin-bottom: 0.85rem;
}

.how-it-works {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  list-style: none;
  margin: 0 0 0.25rem;
  padding: 0;
}

.how-step {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  background: var(--white);
  border: 1px solid var(--separator);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--black);
  box-shadow: var(--shadow-sm);
}

.how-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 0.625rem;
  font-weight: 600;
}

.how-step-text {
  white-space: nowrap;
}

.landing {
  padding: 1.5rem 0 2rem;
  border-bottom: 1px solid var(--separator);
}

.landing-grid {
  display: grid;
  gap: 1.25rem;
  align-items: start;
}

.landing-main {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.landing-intro {
  max-width: 28em;
}

.landing-aside {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gray);
}

.landing-aside a {
  color: var(--black);
  font-weight: 500;
}

.landing-form {
  max-width: 28rem;
  display: flex;
  flex-direction: column;
}

.landing-form .form-card-birth {
  --control-h: 48px;
  padding: 1.65rem 1.75rem;
  gap: 1rem;
}

.form-card-birth .form-card-head {
  margin-bottom: 1rem;
}

.form-card-birth .form-card-title {
  font-size: 1.25rem;
}

.form-card-birth .form-card-sub {
  font-size: 0.875rem;
}

.form-card-birth.birth-form {
  gap: 1rem;
}

.form-card-birth .form-grid {
  gap: 0.85rem;
}

.form-card-birth .field label,
.form-card-birth .date-fieldset legend {
  font-size: 0.875rem;
  margin-bottom: 0.55rem;
}

.form-card-birth .field input,
.form-card-birth .field select,
.form-card-birth .date-part input {
  font-size: 1.0625rem;
  min-height: var(--control-h);
}

.form-card-birth .date-inputs {
  max-width: none;
}

.form-card-birth .btn-primary {
  min-height: 50px;
  font-size: 1.0625rem;
  margin-top: 0.35rem;
}

.form-card-birth .toggle-field {
  padding: 0.85rem 0;
}

.hero-chart {
  position: relative;
  width: 100%;
  max-width: min(480px, 100%);
  overflow: visible;
}

.hero-chart-placeholder {
  width: 100%;
}

.chart-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.chart-placeholder-svg {
  width: 100%;
  height: auto;
  max-width: min(480px, 100%);
  display: block;
}

.chart-placeholder-ring {
  fill: none;
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 1.25;
}

.chart-placeholder-ring-inner {
  stroke-dasharray: 4 6;
  opacity: 0.65;
}

.chart-placeholder-tick {
  stroke: rgba(0, 0, 0, 0.07);
  stroke-width: 1;
}

.chart-placeholder-tick-sign {
  stroke: rgba(0, 0, 0, 0.1);
  stroke-width: 1.25;
}

.chart-placeholder-house {
  stroke: rgba(0, 0, 0, 0.05);
  stroke-width: 1;
}

.chart-placeholder-axis {
  stroke: rgba(0, 0, 0, 0.08);
  stroke-width: 1;
  stroke-dasharray: 3 5;
}

.chart-placeholder-aspect {
  stroke: rgba(0, 0, 0, 0.07);
  stroke-width: 1;
}

.chart-placeholder-planet {
  fill: rgba(0, 0, 0, 0.1);
  stroke: rgba(0, 0, 0, 0.15);
  stroke-width: 1;
}

.chart-placeholder-sign {
  fill: rgba(0, 0, 0, 0.18);
  font-family: var(--font-ui);
  font-size: 15px;
}

.chart-placeholder-abbr {
  fill: rgba(0, 0, 0, 0.1);
  font-family: var(--font-ui);
  font-size: 7.5px;
  letter-spacing: 0.04em;
}

.chart-placeholder-house-num {
  fill: rgba(0, 0, 0, 0.08);
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 500;
}

.chart-placeholder-hub {
  fill: rgba(0, 0, 0, 0.12);
}

.chart-placeholder-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
  text-align: center;
}

.chart-placeholder.is-loading .chart-placeholder-label {
  color: var(--black);
}

.charts-section-hero {
  border: none;
  margin: 0;
  position: relative;
  overflow: visible;
}

.charts-section-hero .chart-controls-hero {
  padding: 0.65rem 0 0;
  margin-top: 0.35rem;
}

.charts-section-hero .chart-controls-hero .control-panel {
  margin-top: 0;
  padding: 0.65rem 0.85rem;
  box-shadow: var(--shadow-sm);
}

.charts-section-hero .charts-grid {
  min-height: min(420px, 72vw);
  margin-bottom: 0;
  overflow: visible;
}

.charts-section-hero .chart-panel {
  padding: 0;
}

.charts-section-hero .chart-wrap {
  margin-bottom: 0;
}

.charts-section-hero .chart-viewport {
  overflow: visible;
}

.charts-section-hero .chart-toolbar {
  display: none;
}

.results-summary {
  padding: 1.15rem 1.25rem;
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-md);
}

.results-summary .results-headline {
  margin-bottom: 0.5rem;
}

.results-summary .meta-strip-compact {
  margin: 0.65rem 0;
  padding: 0.55rem 0;
  box-shadow: none;
  border: none;
  border-top: 1px solid var(--separator);
  border-radius: 0;
  background: transparent;
}

.results-summary .share-bar {
  padding-top: 0.65rem;
  border-top: 1px solid var(--separator);
}

.fortune-card {
  padding: 1.15rem 1.25rem 1.25rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--separator);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.fortune-scratch-card .fortune-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.fortune-spark {
  font-size: 0.875rem;
  color: var(--gold);
  opacity: 0.85;
  animation: fortune-sparkle 2.4s ease-in-out infinite;
}

.fortune-tone-harmonious .fortune-spark,
.fortune-tone-aligned .fortune-spark {
  color: #c45c5c;
  font-size: 1rem;
}

@keyframes fortune-sparkle {
  0%, 100% { opacity: 0.45; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.fortune-scratch-wrap {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--white);
  border: 1px solid rgba(196, 165, 116, 0.22);
}

.fortune-reveal {
  position: relative;
  z-index: 1;
  padding: 1.1rem 1.15rem 1.15rem;
  opacity: 1;
  transform: none;
}

.fortune-scratch-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  cursor: crosshair;
  touch-action: none;
  border-radius: inherit;
  will-change: opacity;
}

.fortune-scratch-hint {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  pointer-events: none;
  transition: opacity 0.25s var(--ease-out);
}

.fortune-scratch-hint.is-hidden {
  opacity: 0;
}

.fortune-scratch-hint-spark {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.95);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

.fortune-scratch-hint-text {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.fortune-scratch-card.is-scratching .fortune-scratch-hint {
  opacity: 0;
}

.fortune-refresh {
  display: none;
}

.fortune-card.fortune-tone-harmonious {
  border-left-color: rgba(0, 0, 0, 0.35);
}

.fortune-card.fortune-tone-challenging {
  border-left-color: rgba(0, 0, 0, 0.55);
}

.fortune-card.fortune-tone-aligned {
  border-left-color: rgba(0, 0, 0, 0.2);
}

.fortune-title {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gray);
  margin: 0;
}

.fortune-body {
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--black);
  margin: 0 0 0.65rem;
}

.fortune-omen {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gold-dim);
  margin: 0;
  font-style: italic;
}

@media (min-width: 900px) {
  .landing-grid {
    grid-template-columns: 1fr min(28rem, 40%);
    gap: 2.25rem;
  }

  .landing-form {
    max-width: none;
  }

  .hero-chart {
    max-width: min(520px, 100%);
  }
}

.form-section {
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--black);
}

.birth-form {
  display: grid;
  gap: 0.85rem;
  max-width: none;
}

.form-card {
  padding: 1.25rem;
  background: var(--surface-solid);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.form-card-head {
  margin-bottom: 0.85rem;
}

.form-card-title {
  font-family: var(--font-ui);
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 0.2rem;
  color: var(--black);
}

.form-card-sub {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
  margin: 0;
}

.form-grid {
  display: grid;
  gap: 0.75rem;
}

@media (min-width: 540px) {
  .form-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.65rem 0.75rem;
  }

  .form-grid .field-wide,
  .form-grid .date-fieldset {
    grid-column: 1 / -1;
  }
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.field-wide { max-width: none; }

.field label,
.date-fieldset legend {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--gray);
  margin-bottom: 0.5rem;
}

.date-fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

.field input,
.field select {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 1rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--black);
  appearance: none;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.date-inputs {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  max-width: 20rem;
}

.date-part {
  flex: 1;
  min-width: 0;
}

.date-part-year { flex: 1.4; }

.date-part input {
  width: 100%;
  min-height: var(--control-h);
  padding: 0 0.5rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--black);
  text-align: center;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.date-hint {
  display: none;
}

.date-sep {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--gray);
  padding: 0 0.15rem;
}

.date-part input:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.time-inputs {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
}

.time-inputs select {
  flex: 1;
  min-width: 0;
  min-height: var(--control-h);
  padding: 0 2rem 0 1rem;
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  background: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  color: var(--black);
  appearance: none;
  cursor: pointer;
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.time-inputs select#time-period {
  flex: 0.85;
}

.time-sep {
  display: flex;
  align-items: center;
  font-family: var(--font-ui);
  font-size: 1.1rem;
  color: var(--gray);
}

.form-note {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  line-height: 1.4;
  color: var(--gray);
  text-align: center;
  margin: 0;
}

.toggle-field-compact {
  padding: 0.65rem 0.85rem;
}

.field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23525252' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  padding-right: 2rem;
}

.field input:focus,
.field select:focus,
.time-inputs select:focus {
  outline: none;
  border-color: rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}

.btn {
  justify-self: stretch;
  min-height: var(--control-h);
  padding: 0 1.5rem;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--black);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: none;
  cursor: pointer;
  transition: opacity 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}

.btn:hover:not(:disabled) {
  opacity: 0.88;
}

.btn:active:not(:disabled) {
  transform: scale(0.98);
}

.btn:disabled {
  opacity: 0.4;
  cursor: wait;
}

.btn-primary {
  margin-top: 0.25rem;
}

.btn-secondary {
  justify-self: start;
  min-height: 36px;
  padding: 0 1rem;
  font-size: 0.875rem;
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--separator);
  box-shadow: var(--shadow-sm);
}

.btn-secondary:hover:not(:disabled) {
  background: var(--surface-solid);
  opacity: 1;
}

.toggle-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  background: var(--white);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  cursor: pointer;
  max-width: none;
}

.toggle-copy {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.toggle-title {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--black);
}

.toggle-detail {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
  line-height: 1.4;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-track {
  position: relative;
  flex-shrink: 0;
  width: 51px;
  height: 31px;
  background: rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-pill);
  transition: background 0.25s var(--ease-out);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1);
  transition: transform 0.25s var(--ease-out);
}

.toggle-input:checked + .toggle-track {
  background: #34c759;
}

.toggle-input:checked + .toggle-track .toggle-thumb {
  transform: translateX(20px);
}

.toggle-input:focus-visible + .toggle-track {
  box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.35);
}

.field-disabled {
  opacity: 0.45;
  pointer-events: none;
}

.compat-form-toggle {
  margin-top: 0.5rem;
  border-top: 1px solid var(--separator);
  padding-top: 0.85rem;
  font-family: var(--font-ui);
}

.compat-form-toggle summary {
  cursor: pointer;
  color: var(--gray);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  list-style: none;
  padding: 0.35rem 0;
  margin-bottom: 0.75rem;
}

.compat-form-toggle summary::-webkit-details-marker {
  display: none;
}

.compat-form-toggle summary::before {
  content: '›';
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.2s var(--ease-out);
}

.compat-form-toggle[open] summary::before {
  transform: rotate(90deg);
}

.error {
  margin-top: 0.65rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--black);
}

.results {
  padding-top: 1rem;
  padding-bottom: 2.5rem;
  border-top: 1px solid var(--separator);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease-out), transform 0.5s var(--ease-out);
}

.results.is-visible {
  opacity: 1;
  transform: none;
}

.results-top {
  display: flex;
  flex-direction: column;
  gap: var(--stack-gap);
  margin-bottom: 1rem;
}

.results-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

.results-hero {
  margin-bottom: 0;
  padding: 1.25rem 1.35rem;
}

.results-headline {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  line-height: 1.25;
  letter-spacing: -0.02em;
  max-width: 22em;
  margin-bottom: 0.65rem;
}

.results-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.65rem;
}

.results-stat-badge {
  display: inline-block;
  margin-bottom: 0.65rem;
  padding: 0.25rem 0.55rem;
  background: rgba(196, 165, 116, 0.18);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gold-dim);
}

.results-note {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--gray);
  max-width: 36em;
  margin-bottom: 0.65rem;
  line-height: 1.45;
  padding: 0.5rem 0.75rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-md);
}

.results-hero .share-bar {
  margin-top: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--separator);
}

.meta-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 0.65rem 0.85rem;
  margin: 0;
}

.meta-strip-item {
  padding: 0.4rem 0.65rem;
  min-width: 0;
}

.meta-strip-item:nth-child(odd) {
  border-right: 1px solid var(--separator);
}

.meta-strip-item:nth-child(-n+2) {
  border-bottom: 1px solid var(--separator);
}

@media (min-width: 720px) {
  .meta-strip {
    grid-template-columns: repeat(4, 1fr);
  }

  .meta-strip-item {
    border-right: 1px solid var(--separator);
    border-bottom: none;
  }

  .meta-strip-item:last-child {
    border-right: none;
  }
}

.meta-strip .meta-label {
  margin-bottom: 0.15rem;
}

.meta-strip .meta-value {
  font-size: 0.8125rem;
}

.card-surface {
  background: var(--surface-solid);
  border: 1px solid var(--separator);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.card-surface-inset {
  box-shadow: none;
  background: var(--white);
  border-radius: var(--radius-md);
}

.meta-label {
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
}

.meta-value {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--black);
  word-break: break-word;
  margin: 0;
}

.meta-mono {
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
}

.results-chip {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: rgba(0, 0, 0, 0.05);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--black);
}

.share-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.section-header {
  margin-bottom: 0.75rem;
}

.section-header-compact {
  margin-bottom: 0.65rem;
}

.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.35rem, 3.5vw, 1.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  margin: 0;
}

.charts-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  border-bottom: 1px solid var(--separator);
  margin-bottom: 0;
}

.charts-section {
  border-bottom: 1px solid var(--separator);
  margin-bottom: var(--section-gap);
}

.charts-section .charts-grid {
  border-bottom: none;
  margin-bottom: 0;
}

.chart-controls {
  padding: 0.75rem 0 0.5rem;
}

.chart-controls-compact {
  padding: 0.65rem 0 0.5rem;
}

.chart-controls-compact .control-panel {
  margin-top: 0.65rem;
  padding: 0.75rem 0.85rem;
  gap: 0.5rem;
}

.control-panel-row-inline {
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}

.control-panel-label-inline {
  min-width: 0;
  margin-left: 0.25rem;
}

.slider-field-compact {
  min-width: 7rem;
  flex: 0 1 10rem;
}

.control-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.control-header-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
  min-width: 2.5rem;
}

.segmented-control {
  display: inline-flex;
  padding: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  gap: 2px;
}

.segmented-control-compact .segmented-btn {
  padding: 0.35rem 0.85rem;
  font-size: 0.8125rem;
}

.segmented-btn {
  border: none;
  background: transparent;
  padding: 0.45rem 1rem;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--gray);
  cursor: pointer;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
  white-space: nowrap;
}

.segmented-btn.is-active {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-sm);
}

.segmented-btn:hover:not(.is-active) {
  color: var(--black);
}

.segmented-btn:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.35);
  outline-offset: 2px;
}

.control-footnote {
  margin: 0.65rem 0 0;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
  max-width: 28em;
  line-height: 1.45;
}

.control-panel {
  margin-top: 1rem;
  padding: 1rem 1.15rem;
  background: var(--surface-solid);
  border: 1px solid var(--separator);
  border-radius: var(--radius-md);
  display: grid;
  gap: 0.85rem;
}

.control-panel-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

.control-panel-label {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
  min-width: 6.5rem;
}

.slider-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
  min-width: 10rem;
}

.slider-field input[type='range'] {
  flex: 1;
  min-width: 8rem;
  height: 4px;
  appearance: none;
  background: rgba(0, 0, 0, 0.12);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.slider-field input[type='range']::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--white);
  border: 0.5px solid rgba(0, 0, 0, 0.04);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  cursor: pointer;
}

.slider-value {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--black);
  min-width: 2.5rem;
  text-align: right;
}

.control-link {
  justify-self: start;
  padding: 0;
  border: none;
  background: none;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: #007aff;
  cursor: pointer;
}

.control-link:hover {
  text-decoration: underline;
}

/* Overlap layout — both wheels stacked */
.charts-grid.charts-overlap-mode {
  display: block;
  position: relative;
  min-height: min(520px, 88vw);
  margin-bottom: 0;
}

.charts-grid.charts-overlap-mode .chart-divider {
  display: none;
}

.charts-grid.charts-overlap-mode .chart-panel {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(640px, calc(100% - 2rem));
  padding: 0;
  margin: 0;
  transform: translateX(-50%);
}

.charts-grid.charts-overlap-mode .chart-panel--tropical {
  z-index: 1;
}

.charts-grid.charts-overlap-mode .chart-panel--tropical .chart-viewport {
  pointer-events: none;
}

.charts-grid.charts-overlap-mode .chart-panel--sidereal .chart-viewport {
  opacity: var(--overlap-opacity, 0.62);
  pointer-events: none;
}

.charts-grid.charts-overlap-mode .planet-node,
.charts-grid.charts-overlap-mode .sign-sector,
.charts-grid.charts-overlap-mode .chart-aspect-hit,
.charts-grid.charts-overlap-mode .chart-house-node,
.charts-grid.charts-overlap-mode .chart-axis-node {
  pointer-events: auto;
  cursor: pointer;
}

.charts-section--overlap .chart-sky,
.charts-section--overlap .chart-stars,
.charts-section--overlap .chart-grid,
.charts-section--overlap .chart-moon,
.charts-section--overlap .chart-rings,
.charts-section--overlap .chart-ticks,
.charts-section--overlap .chart-cardinals,
.charts-section--overlap .chart-houses,
.charts-section--overlap .chart-signs,
.charts-section--overlap .chart-house-nums,
.charts-section--overlap .planet-leader,
.charts-section--overlap .planet-tick {
  pointer-events: none;
}

.charts-grid.charts-overlap-mode .chart-panel--tropical .chart-viewport-inner {
  transform: rotate(var(--overlap-rotate-tropical, 0deg));
}

.charts-grid.charts-overlap-mode .chart-panel--sidereal {
  z-index: 2;
}

.charts-grid.charts-overlap-mode .chart-panel--sidereal .chart-viewport-inner {
  transform: rotate(var(--overlap-rotate-sidereal, 0deg));
}

.charts-grid.charts-overlap-mode .chart-viewport-inner {
  transform-box: fill-box;
  transform-origin: center;
}

.charts-grid.charts-overlap-mode .chart-sky {
  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.22));
}

.charts-grid.charts-overlap-mode .chart-panel.is-active-layer {
  z-index: 3;
}

.charts-section--overlap .chart-viewport {
  background: transparent;
  border: none;
  overflow: visible;
}

.charts-section--overlap .chart-svg {
  overflow: visible;
}

.charts-grid.charts-overlap-mode:not(.is-rotating) .chart-viewport {
  cursor: default;
}

.overlap-rotate-ring {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(640px, calc(100% - 2rem));
  margin: 0;
  transform: translateX(-50%);
  pointer-events: none;
  z-index: 5;
  overflow: visible;
}

.overlap-rotate-ring-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.overlap-rotate-ring-visual {
  fill: none;
  stroke: rgba(0, 0, 0, 0.14);
  stroke-width: 1.5;
  stroke-dasharray: 5 7;
  pointer-events: none;
  transition: stroke 0.2s var(--ease-out);
}

.overlap-rotate-ring-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 34;
  pointer-events: stroke;
  cursor: grab;
  touch-action: none;
}

.overlap-rotate-ring.is-rotating .overlap-rotate-ring-hit,
.overlap-rotate-ring.is-rotating .overlap-rotate-ring-visual {
  cursor: grabbing;
}

.overlap-rotate-ring:hover .overlap-rotate-ring-visual {
  stroke: rgba(0, 0, 0, 0.28);
}

.overlap-rotate-ring-tropical .overlap-rotate-ring-visual {
  stroke: rgba(0, 0, 0, 0.2);
}

.overlap-rotate-ring-sidereal .overlap-rotate-ring-visual {
  stroke: rgba(138, 115, 73, 0.45);
}

.charts-grid.charts-overlap-mode .panel-head {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.charts-grid.charts-overlap-mode .placements {
  display: none;
}

.charts-section--overlap .chart-panel .chart-toolbar {
  display: none;
}

.chart-divider {
  background: var(--black);
  width: 1px;
}

.chart-panel {
  padding: 1.25rem min(1rem, 3vw);
}

.panel-head-compact {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-bottom: 0.65rem;
}

.panel-head-compact h2 {
  font-family: var(--font-serif);
  font-size: 1.1rem;
  font-weight: 400;
  margin: 0;
  color: var(--black);
}

.panel-head-compact p {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--gray);
  margin: 0;
}

.chart-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 0.65rem;
  width: 100%;
}

.chart-stage {
  width: 100%;
  max-width: 640px;
}

.chart-toolbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.chart-toolbar-group {
  display: inline-flex;
  align-items: center;
  padding: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  gap: 2px;
}

.chart-btn {
  min-width: 36px;
  height: 32px;
  padding: 0 0.65rem;
  border: none;
  border-radius: 8px;
  background: transparent;
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray);
  cursor: pointer;
  line-height: 1;
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.chart-btn:hover {
  color: var(--black);
}

.chart-btn:active {
  background: rgba(0, 0, 0, 0.06);
}

.chart-btn-text {
  font-size: 0.8125rem;
  padding: 0 0.75rem;
}

.chart-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.chart-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.chart-toggle span {
  display: inline-block;
  padding: 0.35rem 0.75rem;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--gray);
  transition: background 0.2s var(--ease-out), color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}

.chart-toggle input:checked + span {
  background: var(--white);
  color: var(--black);
  box-shadow: var(--shadow-sm);
}

.chart-toggle:hover span {
  color: var(--black);
}

.chart-viewport {
  position: relative;
  overflow: hidden;
  border: none;
  background: transparent;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hero-chart,
.charts-section-hero,
.charts-grid,
.chart-wrap,
.chart-stage,
.chart-svg,
.overlap-rotate-ring {
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.chart-svg:focus,
.chart-viewport:focus,
.chart-stage:focus {
  outline: none;
}

.chart-svg *:focus {
  outline: none;
}

.chart-svg *:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.chart-sky {
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.12));
}

.chart-viewport.is-dragging {
  cursor: grabbing;
}

.chart-tooltip {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  max-width: 300px;
  padding: 0.8rem 0.95rem;
  border: 1px solid rgba(196, 165, 116, 0.45);
  background: var(--tooltip-dark);
  color: var(--white);
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  box-shadow: var(--shadow-lg);
  border-radius: var(--radius-md);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}

.chart-tooltip-light {
  background: var(--tooltip-light);
  color: var(--black);
  border-color: rgba(0, 0, 0, 0.1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.chart-tooltip-light strong {
  color: var(--black);
}

.chart-tooltip-light .chart-tooltip-label {
  color: var(--gray);
}

.chart-tooltip-light span:not(.chart-tooltip-label):not(.chart-tooltip-item):not(.chart-tooltip-connection) {
  color: #333;
}

.chart-tooltip strong {
  display: block;
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 0.35rem;
  color: var(--white);
  font-size: 1.0625rem;
  line-height: 1.25;
}

.chart-hint {
  margin-top: 0.6rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-style: normal;
  letter-spacing: 0;
  color: var(--gray);
  text-transform: none;
}

.chart-svg {
  width: 100%;
  display: block;
  height: auto;
  overflow: visible;
}

.layer-hidden {
  display: none;
}

.chart-tooltip span {
  display: block;
  color: rgba(255, 255, 255, 0.92);
  margin-top: 0.25rem;
}

.chart-tooltip span + span {
  margin-top: 0.3rem;
}

.chart-tooltip-group {
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.chart-tooltip-light .chart-tooltip-group {
  border-top-color: rgba(0, 0, 0, 0.08);
}

.chart-tooltip-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}

.chart-tooltip-item,
.chart-tooltip-connection {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-top: 0.2rem;
}

.chart-tooltip-item {
  color: rgba(255, 255, 255, 0.95);
}

.chart-tooltip-light .chart-tooltip-item {
  color: var(--black);
}

.chart-tooltip-connection-harmonious {
  color: #e8d4b0;
}

.chart-tooltip-connection-challenging {
  color: #ffc9b8;
}

.chart-tooltip-connection-neutral {
  color: rgba(255, 255, 255, 0.88);
}

.chart-tooltip-light .chart-tooltip-connection-harmonious {
  color: #5c4a2a;
}

.chart-tooltip-light .chart-tooltip-connection-challenging {
  color: #7a3a2a;
}

.chart-tooltip-light .chart-tooltip-connection-neutral {
  color: #404040;
}

.sign-sector {
  fill: transparent;
  stroke: none;
  cursor: pointer;
  outline: none;
}

.chart-aspect-hit {
  cursor: pointer;
  outline: none;
}

.chart-aspect-hit-line {
  stroke: transparent;
  stroke-width: 12;
  pointer-events: stroke;
}

.chart-aspect-hit .chart-aspect-line {
  pointer-events: none;
}

.chart-aspect-hit.is-active .chart-aspect-line,
.chart-aspect-hit.is-dimmed .chart-aspect-line {
  pointer-events: none;
}

.chart-aspect-hit.is-dimmed {
  opacity: 0.15;
}

.sign-sector.is-active {
  fill: rgba(196, 165, 116, 0.12);
}

.sign-sector.is-dimmed {
  opacity: 0.35;
}

.planet-node {
  cursor: pointer;
  outline: none;
}

.planet-node.is-active .planet-halo {
  fill: var(--gold);
  stroke: var(--gold);
}

.planet-node.is-active .planet-glyph {
  fill: var(--chart-bg-deep);
}

.planet-node.is-active .planet-deg {
  fill: var(--cream);
  opacity: 0.9;
}

.planet-node.is-dimmed {
  opacity: 0.25;
}

.chart-aspect-line.is-active {
  opacity: 1 !important;
  stroke: var(--gold) !important;
  stroke-width: 0.85 !important;
}

.chart-aspect-line.is-dimmed {
  opacity: 0.06 !important;
}

.chart-star {
  fill: var(--cream);
}

.chart-star-light {
  fill: rgba(0, 0, 0, 0.2);
}

/* Sidereal wheel — inverted light theme for overlap contrast */
.chart-theme-light {
  --wheel-bg: #f5f0e8;
  --wheel-bg-deep: #e8e2d8;
  --wheel-ink: #1a1714;
  --wheel-accent: #8a7349;
  --wheel-line: #b89868;
}

.chart-theme-light .chart-sky {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.07));
  stroke: rgba(0, 0, 0, 0.06);
  stroke-width: 1;
}

.chart-theme-light .chart-grid-line,
.chart-theme-light .chart-grid-ring {
  stroke: var(--wheel-line);
  opacity: 0.22;
}

.chart-theme-light .chart-ring {
  stroke: var(--wheel-line);
}

.chart-theme-light .chart-ring-outer {
  opacity: 0.7;
}

.chart-theme-light .chart-ring-inner {
  opacity: 0.4;
}

.chart-theme-light .chart-tick,
.chart-theme-light .chart-house-line {
  stroke: var(--wheel-line);
  opacity: 0.35;
}

.chart-theme-light .chart-tick-sign {
  opacity: 0.55;
}

.chart-theme-light .chart-sign-glyph {
  fill: var(--wheel-ink);
}

.chart-theme-light .chart-sign-abbr,
.chart-theme-light .chart-house-num,
.chart-theme-light .chart-cardinal,
.chart-theme-light .planet-deg {
  fill: var(--wheel-accent);
  opacity: 0.75;
}

.chart-theme-light .chart-axis-label {
  fill: var(--wheel-ink);
}

.chart-theme-light .chart-axis {
  stroke: var(--wheel-ink);
  opacity: 0.55;
}

.chart-theme-light .chart-aspect {
  stroke: var(--wheel-accent);
}

.chart-theme-light .chart-aspect.aspect-opp {
  stroke: var(--wheel-ink);
  opacity: 0.35;
}

.chart-theme-light .planet-leader {
  stroke: var(--wheel-line);
  opacity: 0.35;
}

.chart-theme-light .planet-halo {
  fill: var(--wheel-bg);
  stroke: var(--wheel-line);
}

.chart-theme-light .planet-glyph {
  fill: var(--wheel-ink);
}

.chart-theme-light .planet-node.is-active .planet-halo {
  fill: var(--wheel-accent);
  stroke: var(--wheel-accent);
}

.chart-theme-light .planet-node.is-active .planet-glyph {
  fill: var(--wheel-bg);
}

.chart-theme-light .planet-node.is-active .planet-deg {
  fill: var(--wheel-bg);
}

.chart-theme-light .chart-marker {
  fill: var(--wheel-accent);
}

.chart-theme-light .moon-glow {
  fill: rgba(138, 115, 73, 0.12);
}

.chart-theme-light .moon-disc {
  fill: #ebe4da;
}

.chart-theme-light .moon-shadow {
  fill: var(--wheel-bg-deep);
}

.chart-theme-light .moon-crater {
  fill: rgba(0, 0, 0, 0.08);
}

.chart-theme-light .sign-sector.is-active {
  fill: rgba(196, 165, 116, 0.18);
}

.charts-section--overlap .chart-panel--sidereal .chart-sky {
  filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.1));
}

.charts-section--overlap .chart-panel--tropical .chart-sky {
  filter: drop-shadow(0 6px 20px rgba(0, 0, 0, 0.18));
}

.chart-grid-line {
  stroke: var(--gold);
  stroke-width: 0.2;
  opacity: 0.18;
}

.chart-grid-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.25;
  opacity: 0.14;
}

.moon-glow {
  fill: rgba(196, 165, 116, 0.08);
}

.moon-disc {
  fill: #d8d0c0;
}

.moon-shadow {
  fill: var(--chart-bg-deep);
}

.moon-crater {
  fill: rgba(0, 0, 0, 0.12);
}

.chart-ring {
  fill: none;
  stroke: var(--gold);
  stroke-width: 0.5;
}

.chart-ring-outer {
  stroke-width: 1.1;
  opacity: 0.85;
}

.chart-ring-inner {
  stroke-width: 0.45;
  opacity: 0.35;
}

.chart-ring-center {
  display: none;
}

.chart-marker {
  fill: var(--gold);
}

.chart-tick {
  stroke: var(--gold);
  stroke-width: 0.25;
  opacity: 0.22;
}

.chart-tick-ten {
  stroke-width: 0.35;
  opacity: 0.38;
}

.chart-tick-sign {
  stroke-width: 0.55;
  opacity: 0.62;
}

.chart-house-line {
  stroke: var(--gold);
  stroke-width: 0.35;
  opacity: 0.28;
}

.chart-sign-glyph {
  font-family: var(--font-serif);
  font-size: 16px;
  fill: var(--cream);
  pointer-events: none;
}

.chart-sign-abbr {
  font-family: var(--font-serif);
  font-size: 8px;
  font-style: italic;
  fill: var(--gold);
  letter-spacing: 0.06em;
  opacity: 0.55;
  pointer-events: none;
}

.chart-house-num {
  font-family: var(--font-serif);
  font-size: 10px;
  font-style: italic;
  fill: var(--gold);
  opacity: 0.5;
  letter-spacing: 0.02em;
}

.chart-axis-label {
  font-family: var(--font-serif);
  font-size: 9px;
  font-style: italic;
  fill: var(--cream);
  letter-spacing: 0.04em;
  font-weight: 400;
}

.chart-cardinal {
  font-family: var(--font-serif);
  font-size: 9px;
  font-style: italic;
  fill: var(--gold);
  letter-spacing: 0.08em;
  opacity: 0.55;
}

.planet-deg {
  font-family: var(--font-serif);
  font-size: 7px;
  font-style: italic;
  fill: var(--gold);
  opacity: 0.65;
  letter-spacing: 0.02em;
  pointer-events: none;
}

.chart-axis {
  stroke: var(--cream);
  stroke-width: 0.85;
  opacity: 0.75;
}

.chart-aspect {
  stroke: var(--gold);
  stroke-width: 0.35;
}

.chart-aspect.aspect-conj { stroke-width: 0.55; opacity: 0.65; }
.chart-aspect.aspect-opp { stroke-dasharray: 5 3; opacity: 0.5; stroke: var(--cream); }
.chart-aspect.aspect-sq { stroke-dasharray: 2 2; opacity: 0.48; }
.chart-aspect.aspect-tri { opacity: 0.38; }
.chart-aspect.aspect-sext { stroke-dasharray: 1 3; opacity: 0.42; }

.planet-leader {
  stroke: var(--gold);
  stroke-width: 0.25;
  opacity: 0.28;
}

.planet-halo {
  fill: var(--chart-bg);
  stroke: var(--gold);
  stroke-width: 0.55;
  transition: fill 0.15s, stroke-width 0.15s;
}

.planet-glyph {
  font-family: var(--font-serif);
  font-size: 14px;
  fill: var(--cream);
  pointer-events: none;
}

.planet-tick {
  stroke: var(--gold);
  stroke-width: 0.45;
}

.placements-drawer {
  margin-top: 0.25rem;
}

.placements-drawer summary {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  padding: 0.35rem 0;
  list-style: none;
}

.placements-drawer summary::-webkit-details-marker {
  display: none;
}

.placements-drawer summary::before {
  content: '›';
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.2s var(--ease-out);
}

.placements-drawer[open] summary::before {
  transform: rotate(90deg);
}

.placements-card {
  padding: 0.15rem 0.85rem 0.35rem;
  overflow: hidden;
  margin-top: 0.35rem;
}

.placements {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 0.875rem;
}

.placements th {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  font-style: normal;
}

.placements th,
.placements td {
  text-align: left;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--separator);
}

.placements tbody tr:last-child td {
  border-bottom: none;
}

.placements td:first-child {
  font-weight: 500;
  color: var(--black);
}

.placements td:last-child {
  text-align: right;
  color: var(--gray);
  font-variant-numeric: tabular-nums;
}

.placements .glyph {
  margin-right: 0.35rem;
  opacity: 0.6;
}

.house-hit {
  fill: transparent;
  stroke: none;
}

.chart-house-node {
  cursor: pointer;
  outline: none;
}

.chart-axis-node {
  cursor: pointer;
  outline: none;
}

.chart-btn-text {
  padding: 0 0.75rem;
  font-size: 0.95rem;
  font-style: italic;
  text-transform: lowercase;
}

.partner-fields {
  display: grid;
  gap: 1.75rem;
  padding-bottom: 0.5rem;
}

.comparison-section {
  margin-bottom: 0;
}

.comparison-intro {
  padding: 1.15rem 1.25rem;
  margin-bottom: 0.75rem;
}

.comparison-lead {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #404040;
  margin: 0 0 0.65rem;
}

.comparison-insights-text {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--black);
  margin: 0 0 0.5rem;
}

.shift-list {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.shift-card {
  padding: 1rem 1.15rem;
}

.shift-card-head {
  margin-bottom: 0.5rem;
  padding-bottom: 0;
  border-bottom: none;
}

.shift-card-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.65rem;
}

.shift-summary {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--gray);
  margin: 0 0 0.65rem;
}

.shift-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.shift-reading {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--black);
  margin: 0;
}

.method-drawer {
  padding: 0;
  overflow: hidden;
}

.method-drawer details {
  padding: 0;
}

.method-drawer summary {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
  cursor: pointer;
  padding: 0.85rem 1.15rem;
  list-style: none;
}

.method-drawer summary::-webkit-details-marker {
  display: none;
}

.method-drawer summary::before {
  content: '›';
  display: inline-block;
  margin-right: 0.35rem;
  transition: transform 0.2s var(--ease-out);
}

.method-drawer details[open] summary::before {
  transform: rotate(90deg);
}

.method-drawer p {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--gray);
  margin: 0;
  padding: 0 1.15rem 1rem;
  border-top: 1px solid var(--separator);
}

.aligned-card {
  padding: 0.85rem 1rem;
}

.note-compact {
  padding: 0.85rem 1rem;
  margin-top: 0;
}

.note-compact p:last-child {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ad-slot {
  min-height: 0;
  margin: 1.25rem 0;
  overflow: hidden;
}

.ad-slot:not(:has(ins.adsbygoogle)) {
  display: none;
}

.ad-slot:has(ins.adsbygoogle) {
  min-height: 90px;
}

.ad-landing-wrap {
  padding-bottom: 0.5rem;
}

.insight-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
}

.insight-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray);
}

.relation-icon {
  display: block;
  color: var(--black);
  flex-shrink: 0;
}

.relation-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.5rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--black);
  background: rgba(0, 0, 0, 0.05);
}

.shift-title {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
  color: var(--black);
}

.shift-transition {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}

.sign-pill {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
}

.sign-pill-tropical {
  background: rgba(0, 0, 0, 0.06);
  color: var(--black);
}

.sign-pill-sidereal {
  background: rgba(196, 165, 116, 0.2);
  color: var(--gold-dim);
}

.shift-chevron {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
}

.shift-aspect {
  display: inline-block;
  margin-left: 0.25rem;
  padding: 0.1rem 0.4rem;
  border-radius: var(--radius-pill);
  background: rgba(0, 0, 0, 0.05);
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--gray);
}

.column-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.35rem;
}

.aligned-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--gray);
  margin: 0 0 0.5rem;
}

.aligned-lead {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
  line-height: 1.5;
  margin: 0 0 0.85rem;
}

.aligned-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.aligned-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.75rem;
  background: var(--white);
  border: 1px solid var(--separator);
  border-radius: var(--radius-pill);
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--black);
}

.aligned-pill-label {
  font-weight: 600;
  color: var(--gray);
}

.compatibility-section {
  margin-bottom: 3rem;
  padding-top: 0.5rem;
}

.compat-intro {
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
}

.compat-lead {
  font-family: var(--font-ui);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
  max-width: 40em;
}

.compat-lead strong {
  color: var(--black);
  font-weight: 600;
}

.compat-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}

.compat-panel {
  padding: 1.25rem 1.5rem;
}

.compat-panel-head h3 {
  font-family: var(--font-ui);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 0.25rem;
}

.compat-rating {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--gray);
  margin-bottom: 1.15rem;
}

.compat-highlights {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1.15rem;
  border-bottom: 1px solid var(--separator);
}

.compat-highlight-label {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: 0.25rem;
}

.compat-highlight-text {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--black);
  margin-bottom: 0.2rem;
}

.compat-highlight-detail {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
  line-height: 1.45;
}

.compat-aspects {
  display: grid;
  gap: 0.65rem;
}

.compat-aspect {
  padding: 0.85rem 1rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gray);
}

.compat-aspect-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}

.compat-aspect-pair {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--black);
}

.compat-aspect-orb {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray);
}

.compat-aspect-blurb {
  margin: 0 0 0.35rem;
}

.compat-positions {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--gray);
  margin: 0;
  font-variant-numeric: tabular-nums;
}

.compat-meta {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--separator);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--gray);
}

.compat-note {
  padding: 1rem 1.25rem;
}

.compat-note p {
  font-family: var(--font-ui);
  font-size: 0.875rem;
  color: var(--black);
  margin: 0 0 0.35rem;
}

.compat-note-detail {
  color: var(--gray) !important;
  font-size: 0.8125rem !important;
  margin-bottom: 0 !important;
}

.compat-empty {
  font-family: var(--font-ui);
  font-size: 0.8125rem;
  color: var(--gray);
}

.note {
  padding: 1.25rem 1.5rem;
  margin-top: 1rem;
}

.note .section-eyebrow {
  margin-bottom: 0.65rem;
}

.note p:last-child {
  max-width: 42em;
  font-family: var(--font-ui);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}

.ad-slot-landing {
  margin: 0.5rem auto 0;
  max-width: min(728px, 100%);
}

.ad-slot-content {
  margin: 2rem 0 0;
}

.ad-slot ins.adsbygoogle {
  display: block;
}

.ad-slot-footer {
  margin-top: 1.5rem;
  margin-bottom: 0;
}

.page {
  padding: 3.5rem 0 5rem;
}

.prose {
  max-width: 36em;
}

.prose h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  margin-bottom: 1.5rem;
  line-height: 1.05;
}

.prose h2 {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-style: italic;
  letter-spacing: 0.01em;
  text-transform: lowercase;
  font-weight: 400;
  margin-top: 2.5rem;
  margin-bottom: 0.75rem;
  color: var(--gold-dim);
}

.prose p,
.prose li {
  font-size: 1.05rem;
  line-height: 1.65;
  color: var(--gray);
  margin-bottom: 1rem;
}

.prose ul {
  margin-bottom: 1rem;
  padding-left: 1.25rem;
}

.prose li { margin-bottom: 0.5rem; }

.prose strong { color: var(--black); font-weight: 400; }

.prose-meta {
  font-family: var(--font-serif);
  font-size: 0.68rem;
  color: var(--gray);
  margin-bottom: 2rem;
}

.prose-cta {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-light);
}

.prose-cta a {
  font-family: var(--font-serif);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: lowercase;
  text-decoration: none;
}

.prose-cta a:hover { text-decoration: underline; }

.faq-list,
.glossary-list {
  margin-top: 2rem;
}

.faq-list > div,
.glossary-list > div {
  padding: 1.5rem 0;
  border-top: 1px solid var(--gray-light);
}

.faq-list > div:last-child,
.glossary-list > div:last-child {
  border-bottom: 1px solid var(--gray-light);
}

.faq-list dt,
.glossary-list dt {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--black);
  margin-bottom: 0.5rem;
  text-transform: lowercase;
}

.faq-list dd,
.glossary-list dd {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gray);
  margin: 0;
}

.faq-list dd a,
.glossary-list dd a {
  color: var(--black);
}

.footer {
  border-top: 1px solid var(--black);
  padding: 1.25rem 0 2rem;
}

.footer-grid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.footer-links {
  display: flex;
  gap: 1.25rem;
  list-style: none;
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: lowercase;
}

.footer-links a {
  text-decoration: none;
  color: var(--gray);
}

.footer-links a:hover { color: var(--black); }

.footer-note {
  font-family: var(--font-serif);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--gray);
  text-transform: lowercase;
}

@media (max-width: 820px) {
  .charts-grid:not(.charts-overlap-mode) {
    grid-template-columns: 1fr;
  }

  .charts-grid.charts-overlap-mode {
    min-height: min(480px, 85vw);
  }

  .chart-divider {
    height: 1px;
    width: 100%;
  }

  .chart-panel {
    padding: 1rem 0;
  }

  .shift-columns {
    grid-template-columns: 1fr;
    gap: 0.65rem;
  }

  .compat-panels {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .form-card {
    padding: 1.25rem;
  }

  .control-panel-row {
    flex-direction: column;
    align-items: stretch;
  }

  .control-panel-label {
    min-width: 0;
  }

  .field-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .time-inputs {
    flex-wrap: wrap;
  }

  .time-inputs select {
    flex: 1 1 calc(33% - 0.5rem);
  }

  .time-inputs select#time-period {
    flex: 1 1 100%;
  }

  .nav-links { gap: 1rem; }

  .footer-grid {
    flex-direction: column;
    align-items: flex-start;
  }
}