/* Original upright Jupiter glyph; other characters retain their existing fonts. */
@font-face {
  font-family: 'Astro Jupiter';
  src: url('data:font/woff2;base64,d09GMgABAAAAAAG4AAoAAAAAA3AAAAFuAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAABmAANApsgQIBNgIkAwYLBgAEIAWCCAcuG8sCCB6HcUyxlagobhIP/+0Pum/mL8gGQNHImxWlCnaeLiVVA2Ipv687fSCJHYTa5wcLwyBJo2sQtGUaZgkEeUBRIkG1jW79MArHIhMNliLeLqf3cUwJhan7Un0sLQd0Lx/835W00VOA+JLLozFIyKguC1RXaIxCIWg54P//WPHutgCQQIFAM7QHFIBoNuVNiSdfue/h3fr2Offqlb0vdXjXSpQryimrbJTvcUvngw8/kvqWO/3wxzmDKvbpOHVi+1mlJzbrOH5g39bbhq0cP7lH7dGDRx8afGjr4K0XgEBw7eblYXMq9fxaOufP8PHZy195rifpaq6GLIHgJpzeI+hZC5UFAG8EkmYCJBqVtVuAUAGHSSkVMKuouizouKTymsqiKCPU1VqYVDQUs/omy0Kdkmpb32/DxvVrXirpo5XZUctatbO/6meDjdZbo7HhNllrmY0WWW+8RZbYZKV5eGq0tdKOFCRLmIhUavlBAAA=') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: block;
  unicode-range: U+2643;
}

@property --bg {
  syntax: "<color>";
  inherits: true;
  initial-value: #f7f8fa;
}

/* Account access: a complete sign-in flow without leaving the current page. */
.auth-dialog {
  width: min(980px, calc(100vw - 32px));
  max-width: 980px;
  max-height: min(92dvh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 24px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 36px 100px color-mix(in srgb, #081124 34%, transparent);
}

.auth-dialog::backdrop {
  background: color-mix(in srgb, #10182c 68%, transparent);
  backdrop-filter: blur(8px);
}

.auth-dialog[open] {
  animation: auth-dialog-enter 180ms ease-out both;
}

@keyframes auth-dialog-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.auth-modal {
  display: grid;
  grid-template-columns: minmax(250px, 0.76fr) minmax(0, 1.34fr);
  min-height: min(720px, 88dvh);
  max-height: min(92dvh, 820px);
}

.auth-modal-aside {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0;
  overflow: hidden;
  padding: clamp(32px, 4vw, 52px) clamp(28px, 3vw, 42px);
  color: #f6f8ff;
  background:
    radial-gradient(circle at 76% 24%, color-mix(in srgb, var(--accent) 80%, #fff 20%) 0 2px, transparent 3px),
    radial-gradient(circle at 23% 72%, rgba(255, 255, 255, 0.72) 0 1.5px, transparent 2.5px),
    linear-gradient(155deg, color-mix(in srgb, var(--accent-strong) 78%, #0d1530 22%), #101a3a 72%, #0a1228);
}

.auth-modal-aside::before,
.auth-modal-aside::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  pointer-events: none;
}

.auth-modal-aside::before {
  right: -96px;
  bottom: 80px;
  width: 280px;
  height: 280px;
}

.auth-modal-aside::after {
  right: -40px;
  bottom: 136px;
  width: 168px;
  height: 168px;
  border-color: rgba(255, 255, 255, 0.3);
}

.auth-modal-aside-copy,
.auth-modal-aside > small,
.auth-orbit {
  position: relative;
  z-index: 1;
}

.auth-modal-aside-copy {
  display: grid;
  gap: 18px;
}

.auth-modal-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.74;
}

.auth-modal-aside-copy strong {
  max-width: 260px;
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(31px, 3.2vw, 45px);
  font-weight: 500;
  line-height: 1.03;
  letter-spacing: -0.035em;
}

.auth-modal-aside-copy p {
  max-width: 270px;
  margin: 0;
  color: rgba(246, 248, 255, 0.76);
  font-size: 14px;
  line-height: 1.6;
}

.auth-modal-aside > small {
  color: rgba(246, 248, 255, 0.64);
  font-size: 11px;
  letter-spacing: 0.035em;
}

.auth-orbit {
  align-self: center;
  width: 176px;
  aspect-ratio: 1;
  margin-block: 28px;
}

.auth-orbit span {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.auth-orbit span:nth-child(1) { width: 100%; height: 100%; }
.auth-orbit span:nth-child(2) { width: 68%; height: 68%; }
.auth-orbit span:nth-child(3) { width: 36%; height: 36%; }

.auth-orbit i {
  position: absolute;
  top: 6px;
  left: 50%;
  width: 12px;
  height: 12px;
  border: 3px solid rgba(255, 255, 255, 0.42);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.08);
  transform: translateX(-50%);
}

.auth-modal-main {
  min-width: 0;
  overflow-y: auto;
  padding: clamp(28px, 4vw, 50px) clamp(28px, 4.5vw, 58px) 30px;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--accent-soft) 70%, transparent) 0, transparent 38%),
    var(--surface);
  scrollbar-gutter: stable;
}

.auth-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 28px;
}

.auth-modal-header .eyebrow {
  margin-bottom: 8px;
}

.auth-modal-header h2 {
  margin: 0;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.auth-modal-header p:last-child {
  max-width: 440px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.auth-modal-header .modal-close {
  flex: 0 0 auto;
}

.auth-view {
  display: grid;
  gap: 18px;
}

.auth-view.is-hidden {
  display: none;
}

.auth-form {
  display: grid;
  gap: 16px;
}

.auth-form > label,
.auth-password-grid label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.auth-form input[type="email"],
.auth-form input[type="password"],
.auth-form input[type="text"] {
  width: 100%;
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  color: var(--text);
  padding: 0 14px;
  font: inherit;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.auth-form input:focus {
  border-color: color-mix(in srgb, var(--accent) 72%, var(--line));
  background: var(--surface);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 13%, transparent);
}

.auth-password-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.auth-form-options,
.auth-remember,
.auth-consent {
  display: flex;
  align-items: center;
}

.auth-form-options {
  justify-content: space-between;
  gap: 16px;
}

.auth-remember,
.auth-consent {
  gap: 9px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.45;
}

.auth-form > label.auth-consent {
  display: flex;
  grid-template-columns: none;
  align-items: center;
  justify-self: start;
  width: 100%;
  max-width: 100%;
  gap: 10px;
  margin: 0;
  padding: 4px 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 600;
}

.auth-remember input,
.contact-privacy-note { grid-column: 1 / -1; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
:is(.auth-consent, .training-registration-consent, .subscription-waitlist-consent, .contact-privacy-note) button[data-legal] { display: inline; width: auto; padding: 0; border: 0; background: none; color: var(--accent); font: inherit; text-decoration: underline; cursor: pointer; }
.auth-consent input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  flex: 0 0 17px;
  margin: 0;
  padding: 0;
  align-self: center;
  accent-color: var(--accent);
}

.auth-text-action,
.auth-back-action {
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  padding: 0;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--accent) 30%, transparent);
  text-underline-offset: 3px;
}

.auth-back-action {
  justify-self: start;
  text-decoration: none;
}

.auth-primary-action {
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  margin-top: 2px;
  font-size: 14px;
}

.auth-primary-action:disabled,
.auth-google-action[aria-disabled="true"] {
  opacity: 0.56;
  pointer-events: none;
}

.auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  height: 1px;
  background: var(--line);
}

.auth-google-action,
.auth-guest-action {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 48px;
  border-radius: 12px;
  text-decoration: none;
}

.auth-google-action {
  gap: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  background: var(--surface);
  color: var(--text);
  font-size: 13.5px;
  font-weight: 750;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--text) 4%, transparent);
}

.auth-google-action:hover,
.auth-google-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: var(--surface-soft);
}

.auth-google-mark {
  font-size: 19px;
  font-weight: 900;
  background: conic-gradient(from -42deg, #4285f4 0 25%, #34a853 0 42%, #fbbc05 0 67%, #ea4335 0 83%, #4285f4 0);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

.auth-guest-action {
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  background: transparent;
  color: var(--accent-strong);
  padding: 0 14px;
  font-size: 12.5px;
  font-weight: 750;
}

.auth-guest-action:hover,
.auth-guest-action:focus-visible {
  background: var(--accent-soft);
}

.auth-register-cta {
  display: grid;
  gap: 9px;
  border-top: 1px solid var(--line);
  margin-top: 2px;
  padding-top: 17px;
  text-align: center;
}

.auth-register-cta > span {
  color: var(--muted);
  font-size: 12px;
}

.auth-register-cta .secondary-action {
  width: 100%;
  min-height: 44px;
  border-radius: 12px;
}

.auth-password-hint,
.auth-privacy-note {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.auth-password-hint {
  margin-top: -8px;
}

.auth-privacy-note {
  margin: 18px 0 0;
  text-align: center;
}

.auth-dialog-status {
  min-height: 20px;
  margin: 15px 0 0;
  color: var(--accent-strong);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.45;
  text-align: center;
}

.auth-dialog-status.error {
  color: var(--danger);
}

.auth-view-intro {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 14px;
  background: var(--accent-soft);
  padding: 14px;
}

.auth-view-intro p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.5;
}

.auth-view-icon {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, transparent);
  border-radius: 50%;
  color: var(--accent-strong);
  background: var(--surface);
  font-weight: 800;
}

@media (max-width: 720px) {
  .auth-dialog {
    width: min(580px, calc(100vw - 20px));
    max-height: calc(100dvh - 20px);
    border-radius: 18px;
  }

  .auth-modal {
    grid-template-columns: 1fr;
    min-height: 0;
    max-height: calc(100dvh - 20px);
  }

  .auth-modal-aside {
    display: none;
  }

  .auth-modal-main {
    max-height: calc(100dvh - 20px);
    padding: 26px 22px 22px;
  }

  .auth-modal-header {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .auth-password-grid {
    grid-template-columns: 1fr;
  }

  .auth-form-options {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-dialog[open] {
    animation: none;
  }
}
@property --surface {
  syntax: "<color>";
  inherits: true;
  initial-value: #ffffff;
}

@property --surface-soft {
  syntax: "<color>";
  inherits: true;
  initial-value: #fbfcfd;
}

@property --accent {
  syntax: "<color>";
  inherits: true;
  initial-value: #0f766e;
}

@property --line {
  syntax: "<color>";
  inherits: true;
  initial-value: #d9dee6;
}

:root {
  color-scheme: light;
  --bg: #f7f8fa;
  --surface: #ffffff;
  --surface-soft: #fbfcfd;
  --text: #171a1f;
  --text-soft: #2c313a;
  --muted: #68707d;
  --line: #d9dee6;
  --accent: #0f766e;
  --accent-strong: #115e59;
  --on-accent: #ffffff;
  --accent-soft: #f3fbf9;
  --accent-line: rgba(15, 118, 110, 0.38);
  --accent-ring: rgba(15, 118, 110, 0.14);
  --ink-soft: #eef1f5;
  --user: #0f766e;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: rgba(180, 35, 24, 0.3);
  --success: #20a67a;
  --warning: #d89a10;
  --overlay: rgba(23, 26, 31, 0.34);
  --shadow: 0 20px 60px rgba(23, 26, 31, 0.08);
  --shadow-strong: 0 26px 80px rgba(23, 26, 31, 0.18);
  --google-blue: #4285f4;
  --logo-filter: contrast(1.12) saturate(1.04);
  --theme-dark: #111827;
  --theme-teal: #0f766e;
  --theme-magenta: #8f155d;
  --theme-amber: #b7791f;
  --theme-indigo: #3f5fb8;
  --theme-eclipse: #6366f1;
  --theme-aurora: #14b8a6;
  --chart-canvas: #f8fafc;
  --chart-ink: #111827;
  --chart-line: #111827;
  --chart-line-strong: #111827;
  --chart-segment-line: #111827;
  --chart-retro: #7b7f86;
}

/* Public chart preview: reuse the Maps renderer without exposing private account UI. */
.guest-maps-screen {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  width: 100%;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
  background: var(--surface-soft);
  color: var(--text);
}

.guest-maps-header {
  position: relative;
  z-index: 25;
  display: grid;
  grid-template-columns: minmax(220px, 0.8fr) minmax(260px, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  overflow: visible;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  padding: 12px 20px;
}

.guest-maps-heading {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: 16px;
}

.guest-maps-brand {
  flex: 0 0 auto;
  font-size: 17px;
}

.guest-map-controls.private-map-controls {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 8px 10px;
  box-shadow: none;
}

.guest-map-controls .chart-wheel-controls,
.guest-map-controls .chart-wheel-controls > label,
.guest-map-controls .chart-wheel-controls select {
  min-width: 0 !important;
  max-width: 100%;
}

.guest-map-controls .chart-export-actions,
.guest-map-controls #chart-transit-field,
.guest-map-controls #chart-progressed-field,
.guest-map-controls #chart-solar-return-field,
.guest-map-controls #chart-synastry-field,
.guest-map-controls .chart-wheel-status {
  display: none !important;
}

.guest-maps-screen [data-chart-card-action="export-png"],
.guest-maps-screen [data-chart-card-action="export-pdf"] {
  display: none !important;
}

.guest-maps-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  white-space: nowrap;
}

.guest-maps-actions .primary-action,
.guest-maps-actions .secondary-action {
  min-height: 38px;
  margin: 0;
  padding: 0 14px;
  font-size: 12.5px;
}

.guest-maps-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.guest-maps-notice {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-line) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  padding: 7px 18px;
  text-align: center;
}

.guest-maps-notice strong {
  color: var(--accent);
}

.guest-maps-screen.private-maps-active .guest-maps-stage {
  width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 0;
  border: 0;
  border-radius: 0;
  overflow: hidden;
  background: transparent;
}

.guest-maps-stage .guest-chart-wheel-inline {
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

html[data-theme="dark"] .guest-maps-screen {
  background: var(--bg-page);
}

html[data-theme="dark"] .guest-maps-header {
  border-color: var(--border-subtle);
  background: var(--bg-sidebar);
}

html[data-theme="dark"] .guest-maps-notice {
  border-color: var(--border-subtle);
  background: var(--bg-surface);
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .guest-maps-screen {
    grid-template-rows: auto auto minmax(0, 1fr);
  }

  .guest-maps-header {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 9px 12px;
    padding: 9px 12px;
  }

  .guest-map-controls.private-map-controls {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 7px 9px;
  }

  .guest-maps-actions {
    grid-column: 2;
    grid-row: 1;
  }

  .guest-maps-actions .primary-action,
  .guest-maps-actions .secondary-action {
    min-height: 34px;
    padding: 0 10px;
    font-size: 11.5px;
  }

  .guest-maps-notice {
    align-items: flex-start;
    justify-content: flex-start;
    gap: 5px;
    min-height: 0;
    font-size: 11px;
    padding: 6px 12px;
    text-align: left;
  }

  .guest-maps-notice span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Training --------------------------------------------------------------- */
.private-space-nav button[data-private-training-route] {
  --private-nav-icon: url("/assets/nav-icon-training.svg");
}

.private-space-nav button[data-private-training-route="registrations"] {
  --private-nav-icon: url("/assets/nav-icon-registration.svg");
}

.private-space-nav button[data-private-training-route]::before {
  width: 16px;
  height: 16px;
  opacity: 0.76;
}

.private-space-nav button[data-private-training-route].active::before {
  opacity: 1;
}

.private-training-section {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-bottom: 42px;
}

.training-page-header {
  max-width: 820px;
  margin-bottom: 10px;
}

.training-page-header .private-subtitle {
  max-width: 720px;
  line-height: 1.55;
}

.training-status:empty,
.training-registration-form .form-status:empty {
  display: none;
}

.training-view,
.training-catalog,
.training-registration-list {
  display: grid;
  gap: 22px;
}

.training-featured-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  min-height: 330px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 88% 15%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 34%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--accent-soft)), var(--surface));
  box-shadow: 0 20px 55px color-mix(in srgb, var(--text) 7%, transparent);
}

.training-featured-card::after {
  position: absolute;
  right: 110px;
  bottom: -185px;
  width: 370px;
  height: 370px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.training-featured-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 17px;
  padding: clamp(28px, 4vw, 52px);
}

.training-featured-topline,
.training-course-card-head,
.training-course-actions,
.training-featured-actions,
.training-dialog-actions,
.training-detail-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.training-featured-topline {
  justify-content: space-between;
}

.training-featured-topline .eyebrow,
.training-course-card-copy .eyebrow {
  margin: 0;
}

.training-featured-copy h3 {
  max-width: 760px;
  margin: 0;
  color: var(--text);
  font-size: clamp(30px, 4vw, 48px);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.training-featured-copy > p:not(.eyebrow) {
  max-width: 720px;
  margin: 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.training-featured-date {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  justify-items: center;
  border-left: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  text-align: center;
}

.training-featured-date span {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.training-featured-date strong {
  font-size: 76px;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.08em;
  line-height: 1;
}

.training-featured-date small {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.training-pill {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.025em;
  line-height: 1;
  padding: 0 10px;
  white-space: nowrap;
}

.training-pill-open,
.training-pill-confirmed {
  border-color: color-mix(in srgb, #238153 38%, var(--line));
  background: color-mix(in srgb, #238153 10%, var(--surface));
  color: color-mix(in srgb, #238153 85%, var(--text));
}

.training-pill-full,
.training-pill-waitlist,
.training-pill-upcoming,
.training-pill-requested {
  border-color: color-mix(in srgb, #b77718 38%, var(--line));
  background: color-mix(in srgb, #b77718 9%, var(--surface));
  color: color-mix(in srgb, #a56410 86%, var(--text));
}

.training-pill-cancelled,
.training-pill-closed {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.training-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
}

.training-meta > span {
  display: grid;
  min-width: 0;
  gap: 3px;
  border-right: 1px solid var(--line);
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.4;
  padding: 12px 14px;
}

.training-meta > span:last-child {
  border-right: 0;
}

.training-meta b {
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.training-featured-actions .primary-action,
.training-featured-actions .secondary-action,
.training-course-actions .primary-action,
.training-course-actions .secondary-action,
.training-detail-actions .primary-action,
.training-detail-actions .secondary-action {
  min-height: 42px;
  padding-inline: 16px;
}

.training-text-action,
.training-danger-action {
  min-height: 40px;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
  padding: 0 7px;
}

.training-calendar-actions {
  display: grid;
  min-width: 0;
  max-width: 100%;
  gap: 10px;
}

.training-calendar-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
}

.training-calendar-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.training-calendar-button {
  display: inline-flex;
  min-height: 44px;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-soft);
  font: inherit;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.training-calendar-button.training-google-calendar {
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent);
}

.training-calendar-button:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}

.training-calendar-button:focus-visible,
.training-registration-side .training-danger-action:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.training-icon {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
}

.training-google-calendar > .training-icon:last-child {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.training-calendar-format {
  color: var(--muted);
  font-size: 11px;
}

.training-featured-actions > .training-calendar-actions {
  flex-basis: 100%;
  margin-top: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.training-detail-actions > .training-calendar-actions {
  flex: 1 1 360px;
}

.training-text-action:hover,
.training-text-action:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.training-danger-action {
  color: var(--danger);
}

.training-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 6px 2px 14px;
}

.training-section-heading h3,
.training-section-heading p {
  margin: 0;
}

.training-section-heading h3 {
  font-size: 23px;
}

.training-section-heading > p {
  max-width: 420px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  text-align: right;
}

.training-course-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.training-course-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto auto;
  gap: 16px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--surface);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 4%, transparent);
  padding: 20px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.training-course-card:hover {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  box-shadow: 0 18px 36px color-mix(in srgb, var(--text) 8%, transparent);
  transform: translateY(-2px);
}

.training-course-card-head {
  justify-content: space-between;
}

.training-date-badge {
  display: grid;
  min-width: 54px;
  min-height: 54px;
  align-content: center;
  justify-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
}

.training-date-badge strong {
  font-size: 21px;
  line-height: 1;
}

.training-date-badge span {
  margin-top: 3px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.training-course-card-copy {
  display: grid;
  align-content: start;
  gap: 8px;
}

.training-course-card-copy h3,
.training-course-card-copy p {
  margin: 0;
}

.training-course-card-copy h3 {
  font-size: 21px;
  line-height: 1.2;
}

.training-course-card-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.training-meta-compact {
  grid-template-columns: 1fr;
  border: 0;
  background: transparent;
}

.training-meta-compact > span {
  display: flex;
  gap: 8px;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}

.training-meta-compact > span:last-child {
  border-bottom: 0;
}

.training-meta-compact b {
  min-width: 64px;
  padding-top: 2px;
}

.training-seat-line,
.training-catalog-note,
.training-action-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.training-seat-line {
  font-weight: 700;
}

.training-course-actions {
  align-items: stretch;
}

.training-course-actions > :is(button, .training-action-note) {
  flex: 1 1 150px;
}

.training-action-note {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 0 12px;
  text-align: center;
}

.training-empty {
  display: grid;
  justify-items: center;
  gap: 8px;
  min-height: 220px;
  align-content: center;
  border: 1px dashed color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
  padding: 32px;
  text-align: center;
}

.training-empty-icon {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  color: var(--accent);
}

.training-empty-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.training-empty h3,
.training-empty p {
  margin: 0;
}

.training-empty p {
  max-width: 520px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.training-registration-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
  container-type: inline-size;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 6px 24px color-mix(in srgb, var(--text) 3%, transparent);
}

.training-registration-main {
  display: grid;
  min-width: 0;
  gap: 14px;
  padding: 26px 28px;
}

.training-registration-main h3,
.training-registration-main p {
  margin: 0;
}

.training-registration-main h3 {
  font-size: 21px;
  line-height: 1.4;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}

.training-registration-main > p,
.training-registration-meta {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}

.training-registration-date {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.training-registration-date .training-icon {
  align-self: flex-start;
  margin-top: 2px;
  color: var(--accent);
}

.training-registration-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  font-size: 12px;
}

.training-registration-meta > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.training-registration-meta .training-icon {
  width: 16px;
  height: 16px;
}

.training-registration-side {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px 28px;
  padding: 20px 28px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent) 2%, var(--surface));
}

.training-registration-side:not(:has(> *)) {
  display: none;
}

.training-registration-side .training-danger-action {
  min-height: 44px;
  padding: 10px 0;
  border-radius: 5px;
  color: var(--muted);
  font-size: 12px;
}

.training-registration-side .training-danger-action:hover {
  color: var(--danger);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@container (max-width: 580px) {
  .training-registration-main {
    padding: 22px 20px;
  }

  .training-registration-side {
    padding: 18px 20px;
    gap: 14px;
  }

  .training-registration-side > .training-calendar-actions {
    width: 100%;
  }

  .training-registration-side .training-calendar-button {
    flex: 1 1 190px;
  }

  .training-registration-side .training-danger-action {
    margin-left: auto;
  }
}

.training-dialog {
  width: min(780px, calc(100vw - 32px));
  max-height: min(92dvh, 880px);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 30px 90px color-mix(in srgb, var(--text) 25%, transparent);
  padding: 0;
}

.training-dialog::backdrop {
  background: color-mix(in srgb, var(--overlay) 88%, transparent);
  backdrop-filter: blur(5px);
}

.training-dialog-card {
  display: grid;
  max-height: min(92dvh, 880px);
  overflow: auto;
}

.training-dialog-header,
.training-dialog-actions {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding: 20px 24px;
}

.training-dialog-header {
  position: sticky;
  top: 0;
  z-index: 2;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  backdrop-filter: blur(10px);
}

.training-dialog-header h2,
.training-dialog-header p {
  margin: 0;
}

.training-dialog-header h2 {
  font-size: 25px;
}

.training-dialog-content,
.training-registration-body {
  display: grid;
  gap: 22px;
  padding: 24px;
}

.training-detail-hero {
  display: grid;
  gap: 18px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--accent-soft), color-mix(in srgb, var(--surface) 90%, var(--accent-soft)));
  padding: 24px;
}

.training-detail-hero > div:first-child {
  display: grid;
  gap: 10px;
}

.training-detail-hero h3,
.training-detail-hero p,
.training-detail-section h4,
.training-detail-section p {
  margin: 0;
}

.training-detail-hero h3 {
  font-size: 29px;
  line-height: 1.12;
}

.training-detail-hero p,
.training-detail-section p {
  color: var(--muted);
  line-height: 1.65;
}

.training-detail-section {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.training-detail-section h4 {
  font-size: 17px;
}

.training-program-list {
  display: grid;
  gap: 9px;
  margin: 0;
  padding-left: 23px;
}

.training-program-list li {
  color: var(--text-soft);
  line-height: 1.5;
  padding-left: 4px;
}

.training-detail-actions,
.training-dialog-actions {
  justify-content: flex-end;
  border-top: 1px solid var(--line);
  border-bottom: 0;
  padding-top: 20px;
}

.training-detail-actions {
  align-items: flex-end;
}

.training-registration-course,
.training-account-details {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-soft);
  padding: 14px 16px;
}

.training-registration-course strong {
  font-size: 17px;
}

.training-registration-course span,
.training-account-details span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.training-account-details strong {
  overflow-wrap: anywhere;
  font-size: 14px;
}

.training-registration-consent,
.training-admin-switches label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.45;
}

.training-registration-consent input,
.training-admin-switches input {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  flex: 0 0 auto;
  margin: 1px 0 0;
  padding: 0;
  accent-color: var(--accent);
}

.training-registration-consent span {
  min-width: 0;
  flex: 1 1 auto;
}

.landing-training-announcement {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 48px));
  margin: clamp(28px, 3vw, 42px) auto 0;
}

.landing-training-inner {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 18px;
  background:
    radial-gradient(circle at 4% 50%, color-mix(in srgb, var(--accent) 11%, transparent), transparent 19rem),
    linear-gradient(112deg, color-mix(in srgb, var(--accent-soft) 42%, var(--surface)) 0%, var(--surface) 72%);
  box-shadow:
    0 18px 48px color-mix(in srgb, var(--text) 6%, transparent),
    inset 0 1px 0 color-mix(in srgb, #ffffff 72%, transparent);
  padding: 21px 22px 21px 20px;
}

.landing-training-inner::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: 16px;
  left: 0;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--accent);
}

.landing-training-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  color: var(--accent);
}

.landing-training-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.landing-training-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.landing-training-copy :is(p, h2) {
  margin: 0;
}

.landing-training-copy h2 {
  max-width: 760px;
  color: var(--text);
  font-size: clamp(18px, 1.3vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.landing-training-copy > .eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.09em;
}

.landing-training-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px 10px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.landing-training-dates {
  min-width: 0;
}

.landing-training-modality {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 2px 9px;
  color: color-mix(in srgb, var(--text-soft) 86%, var(--accent));
  font-size: 11px;
  font-weight: 600;
}

.landing-training-inner > .secondary-action {
  min-width: 168px;
  min-height: 44px;
  border-color: color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
  padding-inline: 18px;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--text) 4%, transparent);
  white-space: nowrap;
}

.landing-training-inner > .secondary-action:hover,
.landing-training-inner > .secondary-action:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
}

.training-promotion-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(90dvh, 720px);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 34px 100px color-mix(in srgb, var(--text) 28%, transparent);
  padding: 0;
}

.training-promotion-dialog::backdrop {
  background: color-mix(in srgb, var(--overlay) 82%, transparent);
  backdrop-filter: blur(6px);
}

.training-promotion-card {
  position: relative;
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 26px;
  box-sizing: border-box;
  width: 100%;
  max-height: min(90dvh, 720px);
  overflow-y: auto;
  background:
    radial-gradient(circle at 4% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 18rem),
    linear-gradient(145deg, color-mix(in srgb, var(--accent-soft) 42%, var(--surface)), var(--surface) 62%);
  padding: 34px;
}

.training-promotion-card::before {
  position: absolute;
  top: 28px;
  bottom: 28px;
  left: 0;
  width: 3px;
  border-radius: 0 4px 4px 0;
  background: var(--accent);
  content: "";
}

.training-promotion-close {
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 2;
}

.training-promotion-mark {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 22px;
  background: color-mix(in srgb, var(--accent) 12%, var(--surface));
  color: var(--accent);
  box-shadow: inset 0 0 0 7px color-mix(in srgb, var(--surface) 46%, transparent);
  font-size: 24px;
}

.training-promotion-mark svg {
  display: block;
  width: 64%;
  height: 64%;
}

.training-promotion-copy {
  display: grid;
  min-width: 0;
  gap: 16px;
  padding-right: 26px;
}

.training-promotion-heading {
  display: grid;
  gap: 7px;
}

.training-promotion-heading :is(p, h2),
.training-promotion-summary {
  margin: 0;
}

.training-promotion-copy > .training-pill {
  justify-self: start;
}

.training-promotion-heading .eyebrow {
  color: var(--accent);
}

.training-promotion-heading h2 {
  max-width: 430px;
  color: var(--text);
  font-size: clamp(25px, 4vw, 34px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

.training-promotion-summary {
  max-width: 460px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.training-promotion-meta {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(120px, 0.65fr);
  gap: 10px;
}

.training-promotion-meta > span {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
  color: var(--text-soft);
  font-size: 12px;
  line-height: 1.45;
  padding: 12px 13px;
}

.training-promotion-meta small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.training-promotion-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding-top: 2px;
}

.training-promotion-actions .primary-action,
.training-promotion-actions .secondary-action {
  min-height: 44px;
  margin: 0;
}

@media (max-width: 560px) {
  .training-promotion-dialog {
    width: calc(100vw - 20px);
    border-radius: 17px;
  }

  .training-promotion-card {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 20px 22px;
  }

  .training-promotion-card::before {
    top: 22px;
    bottom: 22px;
  }

  .training-promotion-close {
    top: 13px;
    right: 13px;
  }

  .training-promotion-mark {
    width: 54px;
    height: 54px;
    border-radius: 17px;
    font-size: 19px;
  }

  .training-promotion-copy {
    gap: 14px;
    padding-right: 0;
  }

  .training-promotion-heading {
    padding-right: 28px;
  }

  .training-promotion-meta {
    grid-template-columns: 1fr;
  }

  .training-promotion-actions > button {
    flex: 1 1 150px;
  }
}

.training-admin-dialog {
  width: min(880px, calc(100vw - 34px));
  max-height: 94dvh;
}

.training-admin-form {
  max-height: 94dvh;
}

.training-admin-form-grid textarea {
  min-height: 74px;
}

.training-admin-switches {
  display: grid;
  align-content: center;
  gap: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 11px;
}

.admin-training-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-training-block {
  display: grid;
  gap: 12px;
}

.admin-training-block > header h4,
.admin-training-block > header p {
  margin: 0;
}

.admin-training-block > header h4 {
  margin-top: 3px;
  font-size: 17px;
}

.admin-training-course-list {
  display: grid;
  gap: 9px;
}

.admin-training-course {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  padding: 14px;
}

.admin-training-course-main,
.admin-training-course-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 9px;
}

.admin-training-course-main {
  display: grid;
}

.admin-training-course :is(h5, p, small) {
  margin: 0;
}

.admin-training-course h5 {
  font-size: 15px;
}

.admin-training-course p,
.admin-training-course small {
  color: var(--muted);
  font-size: 12px;
}

.admin-training-status-select {
  min-width: 150px;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 6px 9px;
}

@media (max-width: 900px) {
  .training-featured-card {
    grid-template-columns: minmax(0, 1fr) 145px;
  }

  .training-featured-date strong {
    font-size: 58px;
  }

  .training-meta {
    grid-template-columns: 1fr;
  }

  .training-meta > span {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .training-meta > span:last-child {
    border-bottom: 0;
  }
}

@media (max-width: 700px) {
  .private-training-section {
    padding-bottom: 24px;
  }

  .training-featured-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .training-featured-copy {
    padding: 24px 20px;
  }

  .training-featured-copy h3 {
    font-size: 31px;
  }

  .training-featured-date {
    grid-template-columns: auto auto 1fr;
    align-items: baseline;
    justify-content: start;
    gap: 7px;
    border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
    border-left: 0;
    padding: 15px 20px;
  }

  .training-featured-date strong {
    order: -1;
    font-size: 34px;
  }

  .training-featured-date small {
    margin: 0 0 0 auto;
  }

  .training-course-grid {
    grid-template-columns: 1fr;
  }

  .training-section-heading,
  .training-registration-card,
  .admin-training-course {
    grid-template-columns: 1fr;
  }

  .training-section-heading {
    display: grid;
    align-items: start;
    gap: 7px;
  }

  .training-section-heading > p {
    text-align: left;
  }

  .training-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    border-radius: 13px;
  }

  .training-dialog-card {
    max-height: calc(100dvh - 16px);
  }

  .training-dialog-header,
  .training-dialog-content,
  .training-registration-body,
  .training-dialog-actions {
    padding: 16px;
  }

  .training-dialog-actions,
  .training-detail-actions {
    align-items: stretch;
  }

  .training-dialog-actions > button,
  .training-detail-actions > :is(button, a) {
    flex: 1 1 160px;
  }

  .landing-training-announcement {
    width: min(calc(100% - 24px), 1180px);
    margin-top: 24px;
  }

  .landing-training-inner {
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 16px;
  }

  .landing-training-mark {
    width: 44px;
    height: 44px;
  }

  .landing-training-inner > button {
    grid-column: 2;
    justify-self: start;
    width: auto;
    margin-top: 4px;
  }

  .admin-training-head {
    display: grid;
  }

  .admin-training-head > button,
  .admin-training-course > button {
    width: 100%;
  }

  .training-admin-dialog {
    width: calc(100vw - 16px);
  }

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

  .training-admin-form-grid .span-2 {
    grid-column: auto;
  }
}

@media (max-width: 430px) {
  .training-calendar-button {
    flex: 1 1 190px;
  }

  .training-featured-actions,
  .training-course-actions,
  .training-detail-actions,
  .training-dialog-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .training-featured-actions > *,
  .training-course-actions > *,
  .training-detail-actions > *,
  .training-dialog-actions > * {
    width: 100%;
  }

  .training-course-card {
    padding: 16px;
  }

  .training-empty {
    min-height: 190px;
    padding: 24px 18px;
  }
}

@media (max-width: 560px) {
  .guest-maps-brand {
    font-size: 14px;
  }

  .guest-maps-actions {
    gap: 5px;
  }

  .guest-maps-actions .primary-action,
  .guest-maps-actions .secondary-action {
    min-height: 32px;
    padding: 0 7px;
    font-size: 10.5px;
  }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg-page: #17202b;
  --bg-sidebar: #111820;
  --bg-surface: #1d2631;
  --bg-surface-hover: #252f3b;
  --border-subtle: #2c3744;
  --border-strong: #43505e;
  --text-primary: #f1f4f6;
  --text-secondary: #aeb8c4;
  --text-muted: #758190;
  --accent-gold: #d2b270;
  --accent-gold-hover: #e0c17f;
  --accent-gold-muted: #756342;
  --accent-red: #c97874;
  --accent-red-strong: #d9827c;
  --bg: var(--bg-page);
  --surface: var(--bg-surface);
  --surface-soft: var(--bg-surface-hover);
  --text: var(--text-primary);
  --text-soft: var(--text-secondary);
  --muted: var(--text-secondary);
  --line: var(--border-subtle);
  --accent: var(--accent-gold);
  --accent-strong: var(--accent-gold-hover);
  --on-accent: var(--bg-sidebar);
  --accent-soft: color-mix(in srgb, var(--accent-gold-muted) 20%, var(--bg-surface));
  --accent-line: var(--accent-gold-muted);
  --accent-ring: color-mix(in srgb, var(--accent-gold) 22%, transparent);
  --ink-soft: var(--bg-surface-hover);
  --user: var(--accent-gold);
  --danger: var(--accent-red);
  --danger-soft: color-mix(in srgb, var(--accent-red) 12%, var(--bg-surface));
  --danger-line: color-mix(in srgb, var(--accent-red) 38%, transparent);
  --success: #6eb79b;
  --warning: var(--accent-gold);
  --overlay: rgba(7, 11, 16, 0.66);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
  --shadow-strong: 0 12px 34px rgba(0, 0, 0, 0.22);
  --google-blue: #8bb7ff;
  --logo-filter: invert(1) contrast(1.08) saturate(0.9);
  --theme-dark: var(--text-primary);
  --chart-canvas: var(--bg-surface);
  --chart-ink: var(--text-primary);
  --chart-line: #758493;
  --chart-line-strong: #9aa7b4;
  --chart-segment-line: var(--bg-sidebar);
  --chart-retro: var(--text-secondary);
}

html[data-theme="magenta"] {
  --bg: #fbf7fa;
  --surface: #ffffff;
  --surface-soft: #fff8fc;
  --text: #20151c;
  --text-soft: #3d2835;
  --muted: #755c6d;
  --line: #e6d4df;
  --accent: #8f155d;
  --accent-strong: #6f0f49;
  --on-accent: #ffffff;
  --accent-soft: #fff0f8;
  --accent-line: rgba(143, 21, 93, 0.36);
  --accent-ring: rgba(143, 21, 93, 0.14);
  --ink-soft: #f4e9f0;
  --user: #8f155d;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: rgba(180, 35, 24, 0.28);
  --success: #1c9a78;
  --warning: #bb7a1d;
  --overlay: rgba(34, 18, 30, 0.36);
  --shadow: 0 20px 60px rgba(68, 22, 51, 0.1);
  --shadow-strong: 0 26px 80px rgba(68, 22, 51, 0.2);
}

html[data-theme="amber"] {
  --bg: #faf8f2;
  --surface: #ffffff;
  --surface-soft: #fffbf0;
  --text: #211b12;
  --text-soft: #3e3424;
  --muted: #706653;
  --line: #e5dbc6;
  --accent: #b7791f;
  --accent-strong: #8f5e16;
  --on-accent: #ffffff;
  --accent-soft: #fff6df;
  --accent-line: rgba(183, 121, 31, 0.38);
  --accent-ring: rgba(183, 121, 31, 0.15);
  --ink-soft: #f1eadc;
  --user: #8f5e16;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: rgba(180, 35, 24, 0.28);
  --success: #16835f;
  --warning: #b7791f;
  --overlay: rgba(36, 27, 13, 0.34);
  --shadow: 0 20px 60px rgba(78, 57, 21, 0.1);
  --shadow-strong: 0 26px 80px rgba(78, 57, 21, 0.2);
}

html[data-theme="indigo"] {
  --bg: #f6f8fc;
  --surface: #ffffff;
  --surface-soft: #f9fbff;
  --text: #171b2b;
  --text-soft: #2a324c;
  --muted: #626b82;
  --line: #d7deee;
  --accent: #3f5fb8;
  --accent-strong: #2d478f;
  --on-accent: #ffffff;
  --accent-soft: #eef3ff;
  --accent-line: rgba(63, 95, 184, 0.36);
  --accent-ring: rgba(63, 95, 184, 0.14);
  --ink-soft: #edf1f8;
  --user: #3f5fb8;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: rgba(180, 35, 24, 0.28);
  --success: #1d8d76;
  --warning: #bf821d;
  --overlay: rgba(19, 26, 48, 0.35);
  --shadow: 0 20px 60px rgba(28, 42, 82, 0.1);
  --shadow-strong: 0 26px 80px rgba(28, 42, 82, 0.2);
}

html[data-theme="eclipse"] {
  --bg: #f7f7ff;
  --surface: #ffffff;
  --surface-soft: #faf9ff;
  --text: #17162d;
  --text-soft: #302f53;
  --muted: #67648a;
  --line: #dddaf4;
  --accent: #6366f1;
  --accent-strong: #4f46e5;
  --on-accent: #ffffff;
  --accent-soft: #eef2ff;
  --accent-line: rgba(99, 102, 241, 0.36);
  --accent-ring: rgba(99, 102, 241, 0.15);
  --ink-soft: #edeafb;
  --user: #6366f1;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: rgba(180, 35, 24, 0.28);
  --success: #16835f;
  --warning: #b45309;
  --overlay: rgba(25, 20, 70, 0.34);
  --shadow: 0 20px 60px rgba(36, 30, 112, 0.1);
  --shadow-strong: 0 26px 80px rgba(36, 30, 112, 0.2);
}

html[data-theme="aurora"] {
  --bg: #f3faf8;
  --surface: #ffffff;
  --surface-soft: #f7fcfb;
  --text: #102019;
  --text-soft: #253a31;
  --muted: #577066;
  --line: #cde4df;
  --accent: #14b8a6;
  --accent-strong: #0f766e;
  --on-accent: #ffffff;
  --accent-soft: #ecfdf9;
  --accent-line: rgba(20, 184, 166, 0.36);
  --accent-ring: rgba(20, 184, 166, 0.15);
  --ink-soft: #e8f6ef;
  --user: #14b8a6;
  --danger: #b42318;
  --danger-soft: #fff1f0;
  --danger-line: rgba(180, 35, 24, 0.28);
  --success: #14b8a6;
  --warning: #b7791f;
  --overlay: rgba(10, 39, 27, 0.34);
  --shadow: 0 20px 60px rgba(18, 82, 56, 0.1);
  --shadow-strong: 0 26px 80px rgba(18, 82, 56, 0.2);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  min-height: 100%;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Astro Jupiter", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  overflow-x: hidden;
  overflow-y: auto;
  transition: background-color 0.55s ease, color 0.55s ease;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
}

.is-hidden {
  display: none !important;
}

.initial-private-route-loader {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  grid-template-rows: 34px 18px;
  place-content: center;
  justify-items: center;
  gap: 14px;
  padding: 24px;
  background: var(--bg);
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  line-height: 18px;
  letter-spacing: 0.02em;
  text-align: center;
}

.initial-private-route-loader-mark {
  position: relative;
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
}

.initial-private-route-loader-mark svg {
  position: absolute;
  width: 48px;
  height: 48px;
  overflow: visible;
}

.initial-private-route-loader-mark ellipse {
  fill: none;
  stroke: #b8c7ed;
  stroke-width: 0.65;
  opacity: 0.72;
}

.initial-private-route-loader-mark .route-loader-core {
  fill: var(--accent);
}

.initial-private-route-loader-mark .route-loader-planet {
  offset-path: path("M22 0 A22 8 0 1 1 -22 0 A22 8 0 1 1 22 0");
  offset-rotate: 0deg;
  offset-distance: var(--loader-phase);
  animation: route-loader-orbit var(--loader-period) linear infinite;
  animation-delay: var(--loader-delay);
}

.initial-private-route-loader-mark .route-loader-orbit-blue {
  --loader-period: 4.2s;
  --loader-delay: -0.63s;
  --loader-phase: 15%;
}

.initial-private-route-loader-mark .route-loader-orbit-sky {
  --loader-period: 3.4s;
  --loader-delay: -1.36s;
  --loader-phase: 40%;
}

.initial-private-route-loader-mark .route-loader-orbit-violet {
  --loader-period: 4.9s;
  --loader-delay: -3.43s;
  --loader-phase: 70%;
}

.initial-private-route-loader-mark .route-loader-orbit-inner {
  --loader-period: 3.8s;
  --loader-delay: -3.23s;
  --loader-phase: 85%;
}

.initial-private-route-loader-mark .route-loader-orbit-inner .route-loader-planet {
  offset-path: path("M17 0 A17 14 0 1 1 -17 0 A17 14 0 1 1 17 0");
}

@keyframes route-loader-orbit {
  from { offset-distance: 0%; }
  to { offset-distance: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .initial-private-route-loader-mark .route-loader-planet {
    animation: none;
  }
}

html.is-private-route-pending .initial-private-route-loader {
  display: grid;
}

html.is-private-route-pending #landing-screen {
  display: none !important;
}

html.is-donation-route-pending #landing-screen {
  display: none !important;
}

html.is-donation-route-pending #donation-screen {
  display: grid !important;
}

html.is-about-route-pending #landing-screen {
  display: none !important;
}

html.is-about-route-pending #about-screen {
  display: block !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.brand-logo {
  display: block;
  object-fit: contain;
  object-position: center;
  filter: var(--logo-filter);
}

.guia-interna-logo {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  max-width: none;
  color: color-mix(in srgb, var(--text) 92%, #1f2937);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1;
  white-space: nowrap;
}

.guia-interna-logo strong {
  font: inherit;
}

.guia-interna-logo[data-brand-home] {
  text-decoration: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 160ms ease;
}

.guia-interna-logo[data-brand-home]:hover {
  color: var(--accent-strong);
}

.guia-interna-logo[data-brand-home]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.guia-interna-logo.landing-nav-logo {
  width: auto;
  height: auto;
  margin: 0;
  padding: 15px 0;
}

.guia-interna-logo.hero-logo {
  width: auto;
  height: auto;
  margin: 10px 0 8px;
  font-size: clamp(42px, 8vw, 78px);
}

.guia-interna-logo.sidebar-logo {
  width: auto;
  height: auto;
  margin: 0 0 22px;
  padding: 15px 0;
  font-size: 20px;
}

.hero-logo {
  width: min(470px, 100%);
  height: clamp(94px, 13vw, 148px);
  margin: 4px 0 0;
}

.sidebar-logo {
  width: 198px;
  height: 70px;
  margin: -10px 0 10px;
}

.landing-screen {
  min-height: 100vh;
  background: var(--bg);
  transition:
    --bg 0.55s ease,
    --surface 0.55s ease,
    --surface-soft 0.55s ease,
    --accent 0.55s ease,
    --line 0.55s ease,
    background-color 0.55s ease;
}

.landing-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(14px);
  padding: 12px clamp(20px, 5vw, 72px);
  animation: landingNavIn 0.7s ease both;
  transition: background-color 0.55s ease, border-color 0.55s ease;
}

.landing-nav-logo {
  width: 164px;
  height: 54px;
  margin: -4px 0;
}

.landing-nav-actions,
.landing-hero-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.landing-nav-actions {
  justify-content: flex-end;
  flex-wrap: wrap;
}

.landing-nav-actions a,
.landing-nav-actions button,
.landing-hero-actions a,
.landing-hero-actions button,
.landing-cta button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  text-decoration: none;
  transition: background-color 0.55s ease, border-color 0.55s ease, color 0.55s ease, box-shadow 0.55s ease;
}

.landing-nav-actions a:focus-visible,
.landing-nav-actions button:focus-visible,
.landing-hero a:focus-visible,
.landing-cta button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 4px;
}

.auth-status.landing-auth-status {
  width: min(calc(100% - 36px), 1120px);
  margin: 12px auto 0;
  text-align: center;
}

/* Do not expose the guest defaults while the current session is resolving. */
.landing-screen.is-auth-pending :is(
  #landing-login-google,
  #landing-open-private,
  #landing-try-free,
  #landing-hero-primary,
  #landing-hero-trial-note,
  #landing-bottom-eyebrow,
  #landing-bottom-title,
  #landing-bottom-copy,
  #landing-bottom-try-free
) {
  visibility: hidden;
  pointer-events: none;
}

.landing-hero {
  display: grid;
  place-items: center;
  min-height: calc(100vh - 83px);
  border-bottom: 1px solid var(--line);
  padding: clamp(34px, 5vw, 70px) clamp(18px, 5vw, 72px) clamp(28px, 4vw, 54px);
}

.landing-hero-inner {
  width: min(100%, 1240px);
  margin-top: clamp(-76px, -6vw, -36px);
  text-align: center;
}

.landing-reveal {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
    transform 0.72s cubic-bezier(0.2, 0.8, 0.2, 1),
    filter 0.72s cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform, filter;
}

.landing-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

@keyframes landingNavIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.landing-hero h1 {
  color: var(--text);
  font-size: clamp(72px, 12vw, 156px);
  line-height: 0.9;
}

.landing-hero-copy {
  width: min(100%, 920px);
  margin: 18px auto 0;
  color: var(--text-soft);
  font-size: clamp(24px, 2.7vw, 38px);
  line-height: 1.28;
  transition: color 0.55s ease;
}

.landing-hero-actions {
  justify-content: center;
  margin-top: 30px;
}

.landing-hero-accent {
  color: var(--accent-strong);
  font-weight: 500;
  transition: color 0.55s ease;
}

.landing-try {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--accent) 18%, transparent);
  transition:
    transform 0.22s ease,
    box-shadow 0.35s ease,
    background-color 0.55s ease,
    color 0.55s ease;
}

.landing-try::after {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  background:
    linear-gradient(115deg, transparent 0%, color-mix(in srgb, var(--on-accent) 28%, transparent) 46%, transparent 62%);
  opacity: 0;
  transform: translateX(-62%);
  transition: opacity 0.35s ease, transform 0.75s ease;
}

.landing-try:hover,
.landing-try:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px color-mix(in srgb, var(--accent) 26%, transparent);
}

.landing-try:hover::after,
.landing-try:focus-visible::after {
  opacity: 1;
  transform: translateX(62%);
}

.landing-theme-switcher {
  justify-content: center;
  margin-top: 24px;
}

.landing-astro-preview {
  display: grid;
  grid-template-columns: 1fr;
  align-items: stretch;
  width: min(calc(100vw - 36px), 1510px);
  justify-self: center;
  margin-top: calc(clamp(38px, 6vw, 72px) - 74px);
}

.landing-astro-card,
.landing-astro-visual {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.landing-astro-card {
  display: grid;
  align-content: center;
  gap: 16px;
  min-height: 270px;
  padding: clamp(18px, 2vw, 28px);
  text-align: left;
}

.landing-astro-card h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(24px, 3vw, 40px);
  line-height: 1.05;
}

.landing-astro-card p:not(.eyebrow) {
  margin: 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.55;
}

.landing-astro-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.landing-astro-chain span {
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--text-soft);
  padding: 7px 10px;
  font-size: 13px;
  font-weight: 560;
}

.landing-astro-visual {
  position: relative;
  display: grid;
  min-height: clamp(360px, 45vw, 610px);
  margin: 0;
  color: var(--accent);
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 44%),
    radial-gradient(circle at 50% 12%, color-mix(in srgb, var(--surface) 72%, transparent), transparent 54%),
    var(--surface);
  overflow: hidden;
  transition: background-color 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease, color 0.55s ease;
}

.landing-astro-visual svg {
  width: 100%;
  height: 100%;
  min-height: clamp(360px, 45vw, 610px);
}

.landing-astro-system {
  align-content: center;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 45%),
    transparent;
  box-shadow: none;
  padding: clamp(12px, 1.8vw, 26px);
}

.landing-astro-system > svg:not(.astroanamnesis-svg) {
  display: none;
}

.landing-astro-system > svg[hidden] {
  display: none !important;
}

.landing-astro-image {
  display: block;
  width: 100%;
  aspect-ratio: 1420 / 690;
  height: auto;
  color: var(--accent);
  opacity: 0.96;
  transition: color 0.55s ease, opacity 0.55s ease, filter 0.55s ease;
}

.astroanamnesis-svg .aa-seq {
  --aa-delay: 0s;
  --aa-final-opacity: 1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: aaSvgElementIn 0.78s cubic-bezier(0.2, 0.8, 0.2, 1) both;
  animation-delay: var(--aa-delay);
}

.astroanamnesis-svg .aa-seq-line {
  --aa-delay: 0s;
  --aa-dash: 520;
  --aa-final-opacity: 0.62;
  opacity: 0;
  stroke-dasharray: var(--aa-dash);
  stroke-dashoffset: var(--aa-dash);
  animation: aaSvgLineDraw 0.95s cubic-bezier(0.45, 0, 0.1, 1) both;
  animation-delay: var(--aa-delay);
}

.astroanamnesis-svg .aa-line.aa-seq-line {
  --aa-dash: 165;
  --aa-final-opacity: 0.78;
}

.astroanamnesis-svg .aa-line-soft.aa-seq-line {
  --aa-dash: 430;
  --aa-final-opacity: 0.58;
}

.astroanamnesis-svg .aa-card-sub.aa-seq {
  --aa-final-opacity: 0.74;
}

.astroanamnesis-svg .aa-dashed.aa-seq {
  --aa-final-opacity: 0.7;
}

.astroanamnesis-svg .aa-line-faint.aa-seq {
  --aa-final-opacity: 0.38;
}

.landing-astro-preview:not(.is-visible) .astroanamnesis-svg .aa-seq,
.landing-astro-preview:not(.is-visible) .astroanamnesis-svg .aa-seq-line,
.landing-astro-preview:not(.is-visible) .astroanamnesis-svg .aa-map-sequence {
  opacity: 0;
  animation: none;
}

.landing-astro-preview.is-visible .astroanamnesis-svg .aa-map-sequence {
  --aa-group-delay: 0s;
  opacity: 0;
  animation: aaSvgGroupReveal 1ms linear both;
  animation-delay: var(--aa-group-delay);
}

.landing-astro-preview.is-visible .astroanamnesis-svg .aa-memory-sequence {
  --aa-group-delay: 1.26s;
}

.landing-astro-preview.is-visible .astroanamnesis-svg .aa-tropical-sequence {
  --aa-group-delay: 0s;
}

.landing-astro-preview.is-visible .astroanamnesis-svg .aa-sideral-sequence {
  --aa-group-delay: 0.7s;
}

.astroanamnesis-svg .aa-delay-memory-title,
.astroanamnesis-svg .aa-delay-memory-subtitle {
  --aa-delay: 1.28s;
}

.astroanamnesis-svg .aa-delay-memory-wheel,
.astroanamnesis-svg .aa-delay-memory-ring {
  --aa-delay: 1.38s;
}

.astroanamnesis-svg .aa-delay-memory-zodiac,
.astroanamnesis-svg .aa-delay-memory-dots {
  --aa-delay: 1.5s;
}

.astroanamnesis-svg .aa-delay-bridge-left {
  --aa-delay: 0.54s;
}

.astroanamnesis-svg .aa-delay-tropical-title,
.astroanamnesis-svg .aa-delay-tropical-subtitle {
  --aa-delay: 0.04s;
}

.astroanamnesis-svg .aa-delay-tropical-wheel {
  --aa-delay: 0.12s;
}

.astroanamnesis-svg .aa-delay-tropical-zodiac,
.astroanamnesis-svg .aa-delay-tropical-dots {
  --aa-delay: 0.22s;
}

.astroanamnesis-svg .aa-delay-bridge-right {
  --aa-delay: 1.14s;
}

.astroanamnesis-svg .aa-delay-sideral-title,
.astroanamnesis-svg .aa-delay-sideral-subtitle {
  --aa-delay: 0.72s;
}

.astroanamnesis-svg .aa-delay-sideral-wheel,
.astroanamnesis-svg .aa-delay-sideral-ring {
  --aa-delay: 0.82s;
}

.astroanamnesis-svg .aa-delay-sideral-zodiac,
.astroanamnesis-svg .aa-delay-sideral-dots,
.astroanamnesis-svg .aa-delay-sideral-figure {
  --aa-delay: 0.94s;
}

.astroanamnesis-svg .aa-delay-observer-line-left {
  --aa-delay: 1.72s;
}

.astroanamnesis-svg .aa-delay-observer-line-center {
  --aa-delay: 1.78s;
}

.astroanamnesis-svg .aa-delay-observer-line-right {
  --aa-delay: 1.84s;
}

.astroanamnesis-svg .aa-delay-observer {
  --aa-delay: 1.98s;
}

@keyframes aaSvgElementIn {
  0% {
    opacity: 0;
    transform: translateY(10px) scale(0.965);
    filter: blur(3px);
  }

  65% {
    opacity: var(--aa-final-opacity);
  }

  100% {
    opacity: var(--aa-final-opacity);
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@keyframes aaSvgLineDraw {
  0% {
    opacity: 0;
    stroke-dashoffset: var(--aa-dash);
  }

  18% {
    opacity: var(--aa-final-opacity);
  }

  100% {
    opacity: var(--aa-final-opacity);
    stroke-dashoffset: 0;
  }
}

@keyframes aaSvgGroupReveal {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.landing-astro-system > .astroanamnesis-svg {
  height: auto;
  min-height: clamp(430px, 52vw, 760px);
}

.landing-astro-note {
  width: min(86%, 620px);
  margin: clamp(8px, 1.2vw, 16px) auto 0;
  color: var(--text-soft);
  font-size: clamp(13px, 1.25vw, 16px);
  line-height: 1.45;
  text-align: center;
}

.astro-system-flows,
.astro-map,
.astro-map-line,
.astro-observer-axis {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.astro-flow {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.66;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.astro-flow-soft {
  stroke-width: 1.35;
  opacity: 0.26;
}

.astro-flow-ghost {
  stroke-width: 1.2;
  opacity: 0.1;
}

.astro-flow-dotted {
  stroke-width: 1.35;
  stroke-dasharray: 2 8;
  opacity: 0.38;
}

.astro-arrow-head {
  fill: currentColor;
  opacity: 0.56;
}

.astro-map {
  stroke: currentColor;
}

.astro-system-points {
  fill: currentColor;
  opacity: 0.58;
}

.astro-system-points .astro-hollow-point {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.35;
  opacity: 0.42;
}

.astro-map > circle {
  stroke-width: 1.35;
  opacity: 0.3;
}

.astro-map > path:not(.astro-map-line) {
  stroke-width: 1.2;
  opacity: 0.34;
}

.astro-zodiac-band {
  fill: none;
  stroke: currentColor;
}

.astro-zodiac-band circle {
  stroke-width: 1.05;
  opacity: 0.22;
}

.astro-zodiac-dividers {
  stroke-width: 1.1;
  opacity: 0.3;
}

.astro-zodiac-signs text {
  fill: currentColor;
  stroke: none;
  opacity: 0.68;
  font-family: "Astro Jupiter", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", "Arial Unicode MS", sans-serif;
  font-size: 19px;
  font-weight: 560;
  text-anchor: middle;
  dominant-baseline: middle;
}

.astro-map-line {
  stroke: currentColor;
  stroke-width: 1.65;
  opacity: 0.66;
}

.astro-nodes,
.astro-map-center,
.astro-observer circle,
.astro-observer path {
  fill: currentColor;
  stroke: none;
}

.astro-nodes circle {
  opacity: 0.72;
}

.astro-map-center {
  opacity: 0.96;
}

.astro-map-label,
.astro-observer-label,
.astro-observer-subtitle {
  fill: currentColor;
  stroke: none;
  text-anchor: middle;
}

.astro-map-label {
  font-size: 34px;
  font-weight: 500;
  letter-spacing: 0;
}

.astro-map-label-small {
  font-size: 28px;
}

.astro-observer > circle:first-child {
  fill: color-mix(in srgb, var(--surface) 62%, var(--accent-soft));
  stroke: currentColor;
  stroke-width: 1.45;
  opacity: 0.92;
}

.astro-observer-ring {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 1.25;
  opacity: 0.32;
}

.astro-observer circle:not(:first-child):not(.astro-observer-ring),
.astro-observer path:not(.astro-observer-axis) {
  opacity: 0.54;
}

.astro-observer-axis {
  stroke: currentColor;
  stroke-width: 1.3;
  opacity: 0.36;
}

.astro-observer-label {
  font-size: 30px;
  font-weight: 500;
}

.astro-observer-subtitle {
  font-size: 15px;
  font-weight: 500;
  opacity: 0.76;
}

.astro-grid,
.astro-radials,
.astro-curves {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.astro-grid {
  stroke: currentColor;
  stroke-width: 1.35;
  opacity: 0.24;
}

.astro-radials {
  stroke: currentColor;
  stroke-width: 1.4;
  opacity: 0.58;
}

.astro-curves {
  stroke: currentColor;
  stroke-width: 2.2;
  opacity: 0.82;
}

.astro-curves path:nth-child(2),
.astro-curves path:nth-child(3) {
  stroke-width: 1.8;
  opacity: 0.6;
}

.astro-points {
  fill: currentColor;
}

.astro-points circle:not(.astro-center) {
  opacity: 0.78;
}

.astro-center {
  opacity: 1;
}

.landing-astroanamnesis {
  background:
    radial-gradient(circle at 82% 44%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 36%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 5%, var(--bg)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--line) 48%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  transition: background-color 0.55s ease, border-color 0.55s ease;
}

.landing-astroanamnesis-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: center;
  width: min(100%, 1240px);
  margin: 0 auto;
  padding: clamp(58px, 7vw, 94px) clamp(18px, 5vw, 72px);
}

.landing-astroanamnesis-copy {
  width: min(100%, 820px);
}

.landing-astroanamnesis-copy h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(34px, 4.8vw, 66px);
  line-height: 1.02;
}

.landing-astroanamnesis-copy p:not(.eyebrow) {
  width: min(100%, 820px);
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.45;
}

.landing-core-figure {
  position: relative;
  display: grid;
  place-items: center;
  justify-self: center;
  width: min(100%, 460px);
  aspect-ratio: 1.14 / 1;
  margin: 0;
  color: var(--accent);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 26px;
  background:
    radial-gradient(circle at 54% 48%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 54%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 92%, var(--accent) 3%), color-mix(in srgb, var(--bg) 88%, var(--accent) 7%));
  box-shadow: 0 24px 62px color-mix(in srgb, var(--accent) 8%, transparent);
}

.landing-core-figure::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 34%, transparent), transparent 24%),
    radial-gradient(circle at 90% 12%, rgba(255, 255, 255, 0.48), transparent 24%);
}

.landing-core-figure svg {
  position: absolute;
  top: -9%;
  left: -2%;
  display: block;
  width: 136%;
  max-width: none;
  height: auto;
  filter:
    saturate(1.1)
    contrast(1.1)
    drop-shadow(0 18px 34px color-mix(in srgb, var(--accent) 10%, transparent));
}

.astro-method-wheel {
  overflow: visible;
}

.landing-map-glow {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
}

.landing-core-figure .chart-zodiac-segment {
  fill: color-mix(in srgb, var(--segment-color) 82%, #ffffff);
  stroke: color-mix(in srgb, var(--text) 82%, transparent);
  stroke-width: 1.12;
}

.landing-core-figure .chart-decanate-segment,
.landing-core-figure .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 94%, #ffffff);
}

.landing-core-figure .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 90%, #ffffff);
}

.landing-core-figure .chart-sign-line,
.landing-core-figure .chart-decanate-line,
.landing-core-figure .chart-dodecatemoria-line,
.landing-core-figure .chart-degree-tick,
.landing-core-figure .landing-chart-house-line,
.landing-core-figure .chart-zodiac-inner,
.landing-core-figure .chart-inner,
.landing-core-figure .chart-mini-center,
.landing-core-figure .chart-ring-divider,
.landing-core-figure .chart-exterior-ring {
  stroke: color-mix(in srgb, var(--text) 82%, transparent);
}

.landing-core-figure .chart-dodecatemoria-line {
  stroke-width: 0.6;
  opacity: 0.86;
}

.landing-core-figure .chart-decanate-line {
  stroke-width: 0.78;
  opacity: 0.9;
}

.landing-core-figure .chart-sign-line {
  stroke-width: 1.2;
  opacity: 0.92;
}

.landing-core-figure .chart-degree-tick {
  stroke-width: 0.58;
  opacity: 0.68;
}

.landing-core-figure .chart-degree-tick-mid {
  stroke-width: 0.75;
  opacity: 0.8;
}

.landing-core-figure .chart-degree-tick-major {
  stroke-width: 1.02;
  opacity: 0.9;
}

.landing-core-figure .landing-chart-house-line {
  stroke-width: 0.78;
  opacity: 0.24;
  display: none;
}

.landing-core-figure .chart-zodiac-inner,
.landing-core-figure .chart-inner,
.landing-core-figure .chart-mini-center,
.landing-core-figure .chart-ring-divider,
.landing-core-figure .chart-exterior-ring {
  fill: none;
}

.landing-core-figure .chart-zodiac-inner {
  fill: color-mix(in srgb, var(--surface) 94%, var(--accent) 3%);
  stroke-width: 1.28;
}

.landing-core-figure .chart-inner {
  stroke-width: 1.02;
  opacity: 0.88;
  display: none;
}

.landing-core-figure .landing-map-aspect-ring {
  display: block;
  stroke: rgba(17, 24, 39, 0.54);
  stroke-width: 1.12;
  opacity: 0.82;
}

.landing-core-figure .landing-map-aspects {
  opacity: 0.84;
}

.landing-core-figure .landing-map-aspect {
  fill: none;
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-core-figure .landing-map-aspect-anchor {
  fill: none;
  stroke: color-mix(in srgb, var(--planet-color, var(--accent)) 68%, #ffffff 32%);
  stroke-width: 1.18;
  stroke-linecap: round;
  opacity: 0.9;
}

.landing-core-figure .landing-map-aspect-blue {
  stroke: rgba(77, 158, 240, 0.72);
}

.landing-core-figure .landing-map-aspect-red {
  stroke: rgba(232, 86, 96, 0.64);
}

.landing-core-figure .landing-map-aspect-soft {
  stroke: rgba(197, 139, 79, 0.52);
}

.landing-core-figure .chart-mini-center {
  stroke: rgba(17, 24, 39, 0.62);
  stroke-width: 1.14;
  opacity: 0.9;
}

.landing-core-figure .landing-map-planet-labels .chart-planet {
  opacity: 0.78;
}

.landing-core-figure .landing-map-planet-leader,
.landing-core-figure .landing-map-planet-degree-mark,
.landing-core-figure .landing-map-planet-connector {
  stroke: var(--planet-color);
  stroke-linecap: round;
}

.landing-core-figure .landing-map-planet-leader,
.landing-core-figure .landing-map-planet-degree-mark {
  stroke-width: 0.92;
  opacity: 0.58;
}

.landing-core-figure .landing-map-planet-connector {
  stroke-width: 0.58;
  opacity: 0.36;
}

.landing-core-figure .landing-map-planet-labels .chart-planet text {
  fill: color-mix(in srgb, var(--text) 78%, var(--accent));
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-weight: 400;
}

.landing-core-figure .landing-map-planet-labels .chart-planet-glyph {
  fill: color-mix(in srgb, var(--planet-color) 58%, var(--accent)) !important;
  font-size: 15px !important;
  stroke: var(--planet-color);
  stroke-width: 0.34;
  paint-order: fill stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-core-figure .landing-map-planet-labels .chart-planet-glyph-major {
  font-size: 18px !important;
}

.landing-core-figure .landing-map-planet-labels .chart-planet-minute {
  fill: color-mix(in srgb, var(--text) 80%, var(--accent)) !important;
  font-size: 9.2px !important;
  font-weight: 520 !important;
}

.landing-core-figure .landing-map-planet-labels .chart-planet-sign {
  fill: color-mix(in srgb, var(--text) 78%, var(--accent)) !important;
  font-size: 14px !important;
  paint-order: fill stroke;
  stroke: var(--planet-sign-color);
  stroke-width: 0.68;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-core-figure .landing-map-planet-labels .chart-planet-degree,
.landing-core-figure .landing-map-planet-labels .chart-planet-minute,
.landing-core-figure .landing-map-planet-labels .chart-planet-sign {
  display: none;
}

.landing-core-figure .chart-exterior-ring {
  stroke-width: 1.08;
  opacity: 0.88;
}

.landing-core-figure .chart-ring-divider {
  stroke-width: 1.02;
  opacity: 0.82;
}

.landing-core-figure .chart-zodiac-glyph {
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-variant-emoji: text;
  text-rendering: geometricPrecision;
}

.landing-core-figure .chart-sign-symbol {
  fill: color-mix(in srgb, var(--zodiac-ink) 64%, var(--text));
  stroke: none;
  font-size: 28px;
  font-weight: 500;
  opacity: 0.84;
}

.landing-core-figure .chart-decanate-symbol {
  fill: color-mix(in srgb, var(--zodiac-ink) 72%, var(--text));
  stroke: none;
  font-size: 10px;
  font-weight: 600;
  opacity: 0.94;
}

.landing-core-figure .chart-dodecatemoria-symbol {
  fill: color-mix(in srgb, var(--zodiac-ink) 78%, var(--text));
  stroke: none;
  font-size: 6.2px;
  font-weight: 650;
  opacity: 0.9;
}

.landing-core-figure .chart-center-dot {
  fill: var(--accent);
}

.landing-band,
.landing-pro,
.landing-audience,
.landing-cta {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: clamp(60px, 7vw, 96px) clamp(22px, 5vw, 68px);
  scroll-margin-top: 84px;
}

.landing-section-head {
  width: min(100%, 760px);
}

.landing-section-head h2,
.landing-cta h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(32px, 3.7vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.025em;
}

.landing-section-lead {
  width: min(100%, 640px);
  margin: 18px 0 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.55;
}

.landing-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 28px;
}

.landing-feature-grid article {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 22px;
  transition: background-color 0.55s ease, border-color 0.55s ease, box-shadow 0.55s ease;
}

.landing-feature-icon {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  color: var(--accent);
  font-size: 22px;
  transition: border-color 0.55s ease, color 0.55s ease;
}

.landing-feature-grid article.is-visible .landing-feature-icon {
  animation: landingIconSettle 0.82s cubic-bezier(0.18, 0.84, 0.28, 1) both;
}

.landing-feature-grid h3 {
  margin: 0;
  font-size: 18px;
}

.landing-feature-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.landing-pro {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 5%, transparent), transparent 42%),
    transparent;
  transition: border-color 0.55s ease;
}

.landing-pro-layout {
  display: block;
}

.landing-pro-copy {
  width: min(100%, 820px);
}

.landing-pro-lead {
  width: min(100%, 820px);
  margin: 16px 0 0;
  color: var(--text-soft);
  font-size: 16px;
  line-height: 1.6;
}

.landing-pro-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  margin-top: 34px;
  padding: 0;
}

.landing-pro-grid::before {
  content: "";
  position: absolute;
  top: 20px;
  right: 20px;
  left: 20px;
  width: auto;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    color-mix(in srgb, var(--accent) 44%, var(--line)) 14%,
    color-mix(in srgb, var(--accent) 44%, var(--line)) 86%,
    transparent
  );
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.15s cubic-bezier(0.2, 0.82, 0.2, 1), background 0.55s ease;
}

.landing-pro-grid::after {
  content: "";
  position: absolute;
  top: 20px;
  left: 20px;
  width: min(120px, 18vw);
  height: 1px;
  background: linear-gradient(to right, transparent, color-mix(in srgb, var(--accent) 72%, white), transparent);
  opacity: 0;
  pointer-events: none;
}

.landing-pro-grid.is-flow-visible::before {
  transform: scaleX(1);
}

.landing-pro-grid.is-flow-visible::after {
  animation: landingFlowSweep 2.1s cubic-bezier(0.2, 0.82, 0.2, 1) 0.38s both;
}

.landing-pro-grid article {
  display: block;
  position: relative;
  border-top: 0;
  padding: 0;
  transition: border-color 0.55s ease;
}

.landing-pro-grid span {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
  transition: color 0.55s ease;
}

.landing-pro-grid article.is-visible span {
  animation: landingStepNodeIn 0.82s cubic-bezier(0.18, 0.84, 0.28, 1) both;
}

.landing-pro-grid h3 {
  margin: 16px 0 8px;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
}

.landing-pro-grid p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.landing-audience {
  border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  transition: border-color 0.55s ease;
}

.landing-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 46px);
  margin-top: 30px;
}

.landing-audience-grid article {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  border-left: 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  padding: 16px 0 0;
  transition: border-color 0.55s ease;
}

.landing-audience-grid small {
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.landing-audience-grid span {
  color: var(--text);
  font-size: 18px;
  font-weight: 600;
}

.landing-audience-grid p,
.landing-audience-note {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.landing-audience-note {
  width: min(100%, 760px);
  margin-top: 28px;
  color: var(--text-soft);
  font-weight: 500;
}

@keyframes landingIconSettle {
  0% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    transform: scale(0.9);
  }

  54% {
    box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 9%, transparent);
    transform: scale(1.05);
  }

  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent);
    transform: scale(1);
  }
}

@keyframes landingStepNodeIn {
  0% {
    transform: scale(0.76);
  }

  62% {
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes landingFlowSweep {
  0% {
    left: 20px;
    opacity: 0;
  }

  24% {
    opacity: 0.48;
  }

  100% {
    left: calc(100% - 140px);
    opacity: 0;
  }
}

.landing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.landing-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  width: min(100%, 1240px);
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 22px clamp(18px, 5vw, 72px) 30px;
  transition: border-color 0.55s ease;
}

.intake-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(420px, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(32px, 4vw, 72px);
  width: min(100%, 1500px);
  min-height: 100vh;
  margin: 0 auto;
  padding: clamp(24px, 5vw, 72px) clamp(24px, 5vw, 72px) clamp(18px, 2.5vw, 32px);
}

.intake-home-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  border-color: var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text-soft);
  box-shadow: none;
  padding: 8px 14px 8px 11px;
  font-size: 13px;
  font-weight: 700;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.intake-home-link svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.intake-home-link:hover {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  transform: none;
}

.intake-home-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 24%, transparent);
  outline-offset: 3px;
}

.intake-copy {
  align-self: center;
  max-width: 560px;
}

.eyebrow {
  margin: 0 0 12px;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font-size: clamp(44px, 8vw, 92px);
  line-height: 0.95;
  letter-spacing: 0;
}

.lede {
  max-width: 440px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.55;
}

.entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.theme-switcher {
  display: flex;
  align-items: center;
  gap: 17px;
  margin-top: 22px;
}

.theme-choice {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  background: transparent;
  color: var(--theme-teal);
  cursor: pointer;
  transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease, transform 0.2s ease;
}

.theme-choice svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.theme-choice:hover,
.theme-choice:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, currentColor 10%, transparent);
  outline: 0;
}

.theme-choice[aria-pressed="true"] {
  border-color: transparent;
  background: color-mix(in srgb, currentColor 12%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 0%, transparent);
}

.theme-choice:hover {
  transform: translateY(-1px);
}

.theme-choice-dark {
  color: var(--theme-dark);
}

.theme-choice-teal {
  color: var(--theme-teal);
}

.theme-choice-magenta {
  color: var(--theme-magenta);
}

.theme-choice-amber {
  color: var(--theme-amber);
}

.theme-choice-indigo {
  color: var(--theme-indigo);
}

.theme-choice-eclipse {
  color: var(--theme-eclipse);
}

.theme-choice-aurora {
  color: var(--theme-aurora);
}

/* Hero conversion and readability polish */
.landing-hero {
  padding-top: clamp(24px, 2.6vw, 44px);
  padding-bottom: clamp(12px, 1.6vw, 26px);
}

.landing-hero-inner {
  width: min(100%, 1020px);
}

.landing-hero-kicker {
  margin-bottom: 10px;
}

.landing-hero-copy {
  width: min(100%, 940px);
  font-size: clamp(38px, 3.75vw, 58px);
  line-height: 1.045;
}

.landing-hero-subcopy {
  width: min(100%, 760px);
  margin-top: 14px;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.48;
}

.landing-hero-support {
  width: min(100%, 720px);
  margin-top: 7px;
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.48;
}

.landing-hero-method-seal {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: clamp(13.5px, 0.9vw, 14.5px);
}

.landing-hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.landing-hero-trial-note {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 560;
  line-height: 1.4;
  text-align: center;
}

.landing-hero-primary-cta,
.landing-hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 720;
  text-decoration: none;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.landing-hero-primary-cta {
  padding: 0 19px;
  color: #fff;
  background: color-mix(in srgb, var(--accent-strong) 92%, #0f766e 8%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 16%, transparent);
}

.landing-hero-primary-cta:hover,
.landing-hero-primary-cta:focus-visible {
  background: color-mix(in srgb, var(--accent-strong) 96%, #0f766e 4%);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 19%, transparent);
  transform: translateY(-1px);
}

.landing-hero-secondary-cta {
  padding: 0 18px;
  color: color-mix(in srgb, var(--accent-strong) 88%, var(--text) 12%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
}

.landing-hero-secondary-cta:hover,
.landing-hero-secondary-cta:focus-visible {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

.landing-astro-preview {
  margin-top: clamp(6px, 0.9vw, 14px);
  padding-bottom: clamp(8px, 1vw, 16px);
}

.landing-astro-system > .astroanamnesis-svg,
.landing-astro-image {
  max-height: clamp(360px, calc(100dvh - 340px), 600px);
  filter: saturate(1.08) contrast(1.08);
}

.astroanamnesis-svg .aa-card-title {
  font-weight: 560;
  opacity: 1;
}

.astroanamnesis-svg .aa-card-sub {
  font-weight: 500;
  opacity: 0.98;
}

.astroanamnesis-svg .aa-observer-sub {
  font-weight: 500;
  opacity: 0.88;
}

.astroanamnesis-svg .aa-label {
  opacity: 0.9;
}

.astroanamnesis-svg .aa-small {
  opacity: 0.82;
}

.astroanamnesis-svg .aa-house-number {
  opacity: 0.46;
}

.astroanamnesis-svg .aa-line {
  stroke-width: 2.08px;
  opacity: 0.84;
}

.astroanamnesis-svg .aa-line-soft {
  stroke-width: 1.45px;
  opacity: 0.66;
}

.astroanamnesis-svg .aa-line-faint {
  opacity: 0.48;
}

.astroanamnesis-svg .aa-dashed {
  opacity: 0.76;
}

.astroanamnesis-svg .aa-wheel-outer {
  opacity: 0.94;
}

.astroanamnesis-svg .aa-wheel-mid {
  opacity: 0.76;
}

.astroanamnesis-svg .aa-wheel-inner {
  opacity: 0.58;
}

.astroanamnesis-svg .aa-spoke {
  opacity: 0.64;
}

.astroanamnesis-svg .aa-planet-glyph {
  opacity: 0.72;
}

@media (max-height: 820px) and (min-width: 900px) {
  .landing-hero {
    padding-top: 22px;
    padding-bottom: 10px;
  }

  .landing-hero-kicker {
    margin-bottom: 8px;
  }

  .landing-hero-copy {
    font-size: clamp(36px, 3.2vw, 52px);
    line-height: 1.04;
  }

  .landing-hero-subcopy {
    margin-top: 10px;
  }

  .landing-hero-subcopy,
  .landing-hero-support {
    font-size: 15px;
    line-height: 1.42;
  }

  .landing-hero-method-seal {
    margin-top: 8px;
  }

  .landing-hero-cta-row {
    margin-top: 10px;
  }

  .landing-hero-primary-cta,
  .landing-hero-secondary-cta {
    min-height: 38px;
    font-size: 14px;
  }

  .landing-astro-preview {
    margin-top: 4px;
    padding-bottom: 6px;
  }

  .landing-astro-system > .astroanamnesis-svg,
  .landing-astro-image {
    max-height: min(48dvh, 430px);
  }
}

@media (max-width: 860px) {
  .landing-hero {
    padding-top: 24px;
    padding-bottom: 34px;
  }

  .landing-hero-copy {
    width: min(100%, 720px);
    font-size: clamp(32px, 8.6vw, 44px);
    line-height: 1.1;
  }

  .landing-hero-subcopy,
  .landing-hero-support {
    width: min(100%, 680px);
  }

  .landing-hero-cta-row {
    margin-top: 14px;
  }

  .landing-hero-primary-cta,
  .landing-hero-secondary-cta {
    min-height: 44px;
    padding-inline: 17px;
  }

  .landing-astro-preview {
    margin-top: 14px;
  }

  .landing-astro-system > .astroanamnesis-svg,
  .landing-astro-image {
    width: min(100%, 980px);
    max-height: none;
  }
}

@media (max-width: 520px) {
  .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link-context {
    display: none;
  }

  .landing-hero {
    padding-inline: 20px;
  }

  .landing-hero-cta-row {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .landing-hero-primary-cta,
  .landing-hero-secondary-cta {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-screen {
    transition: none;
  }

  .landing-nav {
    animation: none;
  }

  .landing-reveal,
  .landing-reveal.is-visible {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }

  .astroanamnesis-svg .aa-seq,
  .astroanamnesis-svg .aa-seq-line {
    opacity: var(--aa-final-opacity, 1);
    transform: none;
    filter: none;
    animation: none;
    stroke-dasharray: none;
    stroke-dashoffset: 0;
  }

  .landing-try,
  .landing-try:hover,
  .landing-try:focus-visible,
  .landing-try::after {
    transform: none;
    transition: none;
  }

  .landing-feature-grid article.is-visible .landing-feature-icon,
  .landing-pro-grid article.is-visible span,
  .landing-pro-grid.is-flow-visible::after {
    animation: none;
  }

  .landing-pro-grid::before {
    transform: none;
    transition: none;
  }

  .landing-pro-grid::after {
    display: none;
  }
}

.entry-actions .secondary-action {
  padding: 0 16px;
}

.google-action {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
}

.google-action:hover {
  background: var(--ink-soft);
}

.google-mark {
  display: grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--google-blue);
  font-weight: 900;
}

.auth-status {
  min-height: 20px;
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}

.auth-status.error {
  color: var(--danger);
}

.site-footer {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.intake-footer {
  display: flex;
  grid-column: 1 / -1;
  align-self: end;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 0;
}

.intake-panel {
  align-self: center;
}

.sidebar-legal {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legal-links button {
  min-height: auto;
  padding: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
}

.legal-links button:hover {
  color: var(--accent);
}

.cookie-banner {
  position: fixed;
  z-index: 60;
  right: 18px;
  bottom: 18px;
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(620px, calc(100vw - 36px));
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
  padding: 16px;
}

.cookie-banner strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
  font-size: 14px;
}

.cookie-banner p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cookie-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 8px;
}

.cookie-actions button {
  min-height: 40px;
  padding: 0 13px;
  white-space: nowrap;
}

.intake-panel {
  width: min(100%, 720px);
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 32px);
}

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

.field {
  display: grid;
  gap: 7px;
}

.span-2 {
  grid-column: span 2;
}

label {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
}

.legal-consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.45;
  padding: 11px 12px;
}

.legal-consent input {
  width: 17px;
  min-width: 17px;
  height: 17px;
  min-height: 17px;
  margin-top: 2px;
  accent-color: var(--accent);
}

.legal-consent button {
  display: inline;
  min-height: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.chat-legal-consent {
  margin: 0 24px 10px;
}

.chat-context-attachments {
  display: grid;
  gap: 8px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 10px var(--chat-lane-padding) 0;
}

.context-attach-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.context-attach-button {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.context-attach-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.context-attach-button:hover,
.context-attach-button:focus-visible,
.context-attach-button.is-loading {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.context-attach-button:disabled {
  cursor: wait;
  opacity: 0.7;
}

.context-attach-head small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  text-align: right;
}

.context-files-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.context-files-list:empty {
  display: none;
}

.context-files-list li {
  display: inline-flex;
  max-width: min(100%, 360px);
  align-items: center;
  gap: 8px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--text-soft);
  padding: 7px 7px 7px 10px;
}

.context-files-list span {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.context-files-list b {
  overflow: hidden;
  color: var(--text);
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-files-list small {
  overflow: hidden;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.context-files-list button {
  display: inline-grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
}

.context-files-list button:hover,
.context-files-list button:focus-visible {
  border-color: var(--danger-line);
  color: var(--danger);
  outline: 0;
}

.context-clip-button {
  align-self: end;
  display: inline-grid;
  width: 44px;
  height: 46px;
  min-height: 46px !important;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft) !important;
  color: var(--muted) !important;
  cursor: pointer;
  padding: 0;
}

.context-clip-button svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.context-clip-button:hover,
.context-clip-button:focus-visible,
.context-clip-button.is-loading {
  border-color: var(--accent-line);
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  outline: 0;
}

.context-clip-button:disabled {
  cursor: wait;
  opacity: 0.65;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  outline: none;
}

input,
select {
  min-height: 46px;
  padding: 10px 12px;
}

textarea {
  max-height: 180px;
  resize: none;
  padding: 12px 14px;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}

input:disabled,
select:disabled {
  cursor: not-allowed;
  opacity: 0.62;
}

.city-field {
  position: relative;
}

.country-combobox {
  position: relative;
}

.country-combobox-search-icon,
.country-combobox-chevron {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  place-items: center;
  color: var(--muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.country-combobox-search-icon {
  left: 13px;
}

.country-combobox-search-icon svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 1.8;
}

.country-combobox-chevron {
  right: 13px;
  font-size: 18px;
  transition: transform 150ms ease;
}

.country-combobox:has(.country-combobox-input[aria-expanded="true"]) .country-combobox-chevron {
  transform: translateY(-42%) rotate(180deg);
}

.country-combobox-input {
  padding-right: 38px;
  padding-left: 40px;
}

.country-combobox-results {
  position: absolute;
  z-index: 45;
  top: calc(100% + 6px);
  right: 0;
  left: 0;
  max-height: min(300px, 42vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
  padding: 5px;
  scrollbar-width: thin;
}

.country-combobox-results[hidden] {
  display: none;
}

.country-combobox-option {
  display: grid;
  width: 100%;
  min-height: 42px;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 9px 10px;
  text-align: left;
}

.country-combobox-option:is(:hover, .is-active) {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.country-combobox-option[aria-selected="true"] {
  font-weight: 700;
}

.country-combobox-option-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.country-combobox-option-code {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
}

.country-combobox-option-check {
  width: 16px;
  color: var(--accent);
  font-size: 13px;
  text-align: center;
}

.country-combobox-empty {
  color: var(--muted);
  font-size: 13px;
  padding: 14px 12px;
  text-align: center;
}

.autocomplete-results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.city-suggestion {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 12px;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.city-suggestion:hover {
  background: var(--ink-soft);
}

.primary-action,
.new-chat,
.secondary-action,
.composer button {
  min-height: 46px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

.primary-action,
.new-chat,
.composer button {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

.primary-action:hover,
.new-chat:hover,
.composer button:hover {
  background: var(--accent-strong);
}

#send-button {
  position: relative;
  display: inline-grid;
  width: 46px;
  min-width: 46px;
  height: 46px;
  min-height: 46px;
  place-items: center;
  border-radius: 999px;
  padding: 0;
  justify-self: end;
}

.send-button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.send-button-icon {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.2;
}

.primary-action:disabled {
  cursor: wait;
  opacity: 0.72;
}

.form-status {
  min-height: 18px;
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.form-status.error {
  color: var(--danger);
}

.secondary-action {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  font-weight: 650;
}

.secondary-action:hover {
  background: var(--ink-soft);
}

.shell {
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

.shell.sidebar-collapsed {
  grid-template-columns: 0 minmax(0, 1fr);
}

.shell.sidebar-collapsed .sidebar {
  width: 0;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  opacity: 0;
  pointer-events: none;
}

#chat-screen > .sidebar #chat-folders-panel,
#chat-screen > .sidebar #chat-history-panel {
  display: none;
}

#chat-screen > .sidebar #new-chat {
  display: none;
}

#chat-screen > .sidebar .sidebar-top-actions {
  display: none;
}

#chat-screen > .sidebar .sidebar-title-row {
  display: none;
}

#chat-screen > .sidebar .sidebar-brand-row {
  margin-bottom: 8px;
}

#chat-screen > .sidebar .sidebar-main {
  gap: 12px;
}

#chat-screen > .sidebar .birth-summary {
  margin-top: 0;
}

#chat-screen > .sidebar .sidebar-home-button {
  width: 100%;
}

.sidebar-brand-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sidebar-collapse-button {
  position: fixed;
  z-index: 60;
  top: 21px;
  left: 242px;
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-color) 10%, transparent);
  padding: 0;
  transition: background 0.18s ease, color 0.18s ease;
}

.shell.sidebar-collapsed .sidebar-collapse-button {
  top: 14px;
  left: 14px;
}

.collapsed-sidebar-actions {
  position: fixed;
  z-index: 59;
  top: 56px;
  left: 14px;
  display: none;
  gap: 8px;
}

.shell.sidebar-collapsed .collapsed-sidebar-actions {
  display: grid;
}

.collapsed-sidebar-action {
  display: inline-grid;
  width: 34px;
  height: 34px;
  min-height: 34px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  box-shadow: 0 8px 22px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  padding: 0;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.collapsed-sidebar-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.collapsed-sidebar-action:hover,
.collapsed-sidebar-action:focus-visible,
.collapsed-sidebar-action[aria-expanded="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.collapsed-chat-popover {
  position: fixed;
  z-index: 70;
  top: 138px;
  left: 56px;
  display: grid;
  width: min(320px, calc(100vw - 72px));
  max-height: min(520px, calc(100vh - 158px));
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.collapsed-chat-popover header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 11px 12px;
}

.collapsed-chat-popover header span {
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
}

.collapsed-chat-popover header small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.collapsed-chat-list {
  display: grid;
  gap: 2px;
  max-height: 462px;
  margin: 0;
  overflow-y: auto;
  padding: 6px;
}

.collapsed-chat-item {
  display: block;
  border-radius: 8px;
}

.collapsed-chat-item:hover,
.collapsed-chat-item.active,
.collapsed-chat-item:focus-within {
  background: var(--ink-soft);
}

.collapsed-chat-item button {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 8px;
  text-align: left;
}

.collapsed-chat-item span,
.collapsed-chat-item em {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.collapsed-chat-item span {
  font-size: 13px;
  font-weight: 520;
}

.collapsed-chat-item em,
.collapsed-chat-item small {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

.collapsed-chat-empty {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  padding: 12px;
}

.sidebar-collapse-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.shell.sidebar-collapsed .sidebar-collapse-button svg,
.private-screen.sidebar-collapsed .private-sidebar-collapse-button svg {
  display: block;
}

.sidebar-collapse-button:hover,
.sidebar-collapse-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.private-screen {
  --private-sidebar-top-padding: 22px;
  --private-sidebar-brand-height: 42px;
  position: relative;
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.private-sidebar-collapse-button {
  top: calc(var(--private-sidebar-top-padding) + (var(--private-sidebar-brand-height) - 34px) / 2);
}

.private-screen.sidebar-collapsed {
  grid-template-columns: 52px minmax(0, 1fr);
}

.private-screen.sidebar-collapsed .private-sidebar {
  width: 0;
  min-width: 0;
  padding-right: 0;
  padding-left: 0;
  border-right: 0;
  opacity: 0;
  pointer-events: none;
}

.private-screen.sidebar-collapsed .private-sidebar-collapse-button {
  top: 14px;
  left: 9px;
}

@media (min-width: 861px) {
  .private-screen.sidebar-collapsed .private-sidebar-collapse-button .private-sidebar-menu-icon {
    display: block;
  }

  .private-screen.sidebar-collapsed .private-sidebar-collapse-button .private-sidebar-close-icon {
    display: none;
  }
}

/*
 * The active-person selector belongs to the immersive Astroanamnesis view.
 * Keep the regular three-chart toolbar focused on tables/actions and reveal
 * the selector only while its workspace is actually fullscreen.
 */
.chart-wheel-stage.is-multiple-chart
  .chart-multiple-topbar-subject
  > :is(.chart-multiple-person-trigger, .chart-multiple-participants) {
  display: none;
}

.chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-subject {
  justify-content: flex-end;
}

.chart-wheel-stage.is-multiple-chart
  .chart-multiple-topbar-subject
  > .chart-multiple-topbar-actions {
  margin-left: auto;
}

.chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen)
  .chart-multiple-topbar-subject
  > .chart-multiple-person-trigger {
  display: inline-flex;
}

.chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen)
  .chart-multiple-topbar-subject
  > .chart-multiple-participants {
  display: block;
}

.chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen)
  .chart-multiple-topbar-subject {
  justify-content: space-between;
}

@media (max-width: 640px) {
  .private-maps-active
    .chart-wheel-stage.is-multiple-chart
    .chart-multiple-topbar-subject
    > .chart-multiple-person-trigger {
    width: 100%;
    max-width: 100%;
    min-height: 34px;
    justify-content: flex-start;
    padding: 3px 4px;
  }
}

.sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 14px;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 24px 22px;
  transition: opacity 0.18s ease, padding 0.18s ease, border-color 0.18s ease;
}

.private-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
  height: 100vh;
  min-height: 0;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--surface);
  padding: 28px;
}

.private-sidebar > div:first-child {
  min-height: 0;
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.private-sidebar .sidebar-logo {
  margin-top: 0;
}

.sidebar h1 {
  font-size: 32px;
  line-height: 1.1;
}

.sidebar-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sidebar-title-row h1 {
  min-width: 0;
  margin: 0;
}

.sidebar-title-row .sidebar-space-button {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
}

.sidebar-main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.private-sidebar h1 {
  font-size: 32px;
  line-height: 1.1;
}

.private-user {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.private-user strong {
  color: var(--text);
}

.private-user-heading {
  display: flex;
  align-items: center;
  gap: 10px;
}

.private-user-heading > div {
  display: grid;
  min-width: 0;
  width: 100%;
  gap: 2px;
}

.private-user-heading span:not(.private-user-avatar),
.private-user-heading strong,
.private-user-heading small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-user-heading small {
  display: block;
  color: color-mix(in srgb, var(--accent) 68%, var(--muted));
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.3;
}

.private-user-heading .private-user-name-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.private-user-heading .private-user-name-row strong {
  min-width: 0;
}

.private-user-settings {
  display: inline-grid;
  width: 26px;
  height: 26px;
  min-height: 0;
  flex: 0 0 26px;
  place-items: center;
  margin-left: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.private-user-settings:hover,
.private-user-settings:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.private-user-settings svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.subscription-star {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  border: 1px solid rgba(184, 139, 74, 0.28);
  border-radius: 999px;
  background: rgba(184, 139, 74, 0.14);
  color: #a87532;
  font-size: 11px;
  font-style: normal;
  line-height: 1;
}

.private-space-nav {
  display: grid;
  gap: 4px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.private-space-nav button {
  display: flex;
  min-height: 38px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  padding: 0 10px;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.private-space-nav button::before,
.private-feature-nav button::before,
.private-quick-nav button::before {
  flex: 0 0 auto;
  width: var(--private-nav-icon-size, 16px);
  height: var(--private-nav-icon-size, 16px);
  background: currentColor;
  content: "";
  opacity: 0.88;
  -webkit-mask: var(--private-nav-icon) center / contain no-repeat;
  mask: var(--private-nav-icon) center / contain no-repeat;
}

.private-space-nav button[data-private-section-tab="space"] {
  --private-nav-icon: url("/assets/nav-icon-dashboard.svg");
}

.private-space-nav button[data-private-section-tab="list"] {
  --private-nav-icon: url("/assets/nav-icon-list.svg");
}

.private-space-nav button[data-private-section-tab="plans"] {
  --private-nav-icon: url("/assets/nav-icon-plan.svg");
}

.private-space-nav button[data-private-section-tab="sessions"] {
  --private-nav-icon: url("/assets/nav-icon-session.svg");
}

.private-space-nav button[data-private-section-tab="reports"] {
  --private-nav-icon: url("/assets/nav-icon-report.svg");
}

.private-space-nav button[data-private-section-tab="store"] {
  --private-nav-icon: url("/assets/nav-icon-store.svg");
}

.private-space-nav button[data-private-section-tab="transits"] {
  --private-nav-icon: url("/assets/nav-icon-clock.svg");
}

.private-space-nav button[data-private-section-tab="maps"] {
  --private-nav-icon: url("/assets/nav-icon-chart.svg");
}

.private-space-nav button[data-private-section-tab="tools"] {
  --private-nav-icon: url("/assets/nav-icon-orbit.svg");
}

#private-admin-link {
  --private-nav-icon: url("/assets/nav-icon-admin.svg");
}

.private-space-nav button:hover,
.private-space-nav button:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
  outline: 0;
}

.private-space-nav button.active {
  background: var(--accent-soft);
  color: var(--accent);
}

.private-nav-group {
  display: grid;
  min-width: 0;
}

.private-space-nav .private-nav-group-toggle {
  width: 100%;
}

.private-nav-group-toggle > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-nav-group-chevron {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  transition: transform 180ms ease;
}

.private-nav-group.is-expanded .private-nav-group-chevron {
  transform: rotate(180deg);
}

.private-nav-submenu {
  display: grid;
  max-height: 0;
  gap: 2px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: max-height 200ms ease, opacity 150ms ease, transform 180ms ease, padding 180ms ease;
}

.private-nav-group.is-expanded .private-nav-submenu {
  max-height: 92px;
  padding: 3px 0 2px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.private-space-nav .private-nav-submenu button {
  position: relative;
  min-height: 34px;
  border-radius: 7px;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.25;
  padding: 6px 9px 6px 34px;
}

.private-space-nav .private-nav-submenu button::before {
  position: absolute;
  left: 18px;
  width: 6px;
  height: 6px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: transparent;
  opacity: 0.64;
  -webkit-mask: none;
  mask: none;
}

.private-space-nav .private-nav-submenu button:hover,
.private-space-nav .private-nav-submenu button:focus-visible {
  background: color-mix(in srgb, var(--surface-soft) 84%, var(--accent-soft));
  color: var(--text);
}

.private-space-nav .private-nav-submenu button.active {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}

.private-space-nav .private-nav-submenu button.active::before {
  border-color: var(--accent);
  background: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .private-nav-group-chevron,
  .private-nav-submenu {
    transition: none;
  }
}

.private-maps-active .private-feature-nav {
  display: none;
}

.private-maps-active .private-sidebar > div:first-child {
  display: grid;
  align-content: space-between;
}

.private-map-context {
  display: grid;
  gap: 12px;
  min-width: 0;
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.private-map-context.is-hidden {
  display: none !important;
}

.private-map-active-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.private-map-control-card {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.private-map-active-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.private-map-active-head > div {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.private-map-eyebrow {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.private-map-active-card strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-map-active-meta {
  display: grid;
  gap: 4px;
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.35;
}

.private-map-active-card p {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.private-map-actions {
  display: grid;
  gap: 8px;
  margin-top: 18px;
}

.private-map-actions .secondary-action {
  width: 100%;
  min-height: 38px;
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
  color: var(--accent);
  font-weight: 650;
}

.private-map-actions .secondary-action:hover,
.private-map-actions .secondary-action:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.private-maps-active #private-map-list {
  display: none;
}

#private-map-list {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#private-map-list::before {
  width: 15px;
  height: 15px;
  background: currentColor;
  content: "";
  -webkit-mask: url("/assets/nav-icon-list.svg") center / contain no-repeat;
  mask: url("/assets/nav-icon-list.svg") center / contain no-repeat;
}

.private-feature-nav,
.private-quick-nav {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.private-feature-nav p,
.private-quick-nav p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.private-feature-nav button,
.private-quick-nav button {
  display: flex;
  min-height: 32px;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  transition: background-color 0.16s ease, color 0.16s ease;
}

.private-feature-nav button,
.private-quick-nav button {
  --private-nav-icon-size: 15px;
}

.private-quick-nav button[data-private-quick-action="maps"] {
  --private-nav-icon: url("/assets/nav-icon-chart.svg");
}

.private-quick-nav button[data-private-quick-action="add-chart"] {
  --private-nav-icon: url("/assets/nav-icon-add-chart.svg");
}

.private-quick-nav button[data-private-quick-action="saved-charts"] {
  --private-nav-icon: url("/assets/nav-icon-saved.svg");
}

.private-quick-nav button[data-private-quick-action="prognosis"] {
  --private-nav-icon: url("/assets/nav-icon-clock.svg");
}

.private-quick-nav button[data-private-quick-action="lunar-phases"] {
  --private-nav-icon: url("/assets/nav-icon-moon.svg");
}

.private-quick-nav button[data-private-quick-action="transits"] {
  --private-nav-icon: url("/assets/nav-icon-orbit.svg");
}

.private-feature-nav button:hover,
.private-feature-nav button:focus-visible,
.private-quick-nav button:hover,
.private-quick-nav button:focus-visible {
  background: var(--surface-soft);
  color: var(--text);
  outline: 0;
}

.private-feature-nav button.active,
.private-quick-nav button.active {
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  color: var(--accent);
}

.private-space-section {
  min-width: 0;
}

#private-transits-section {
  width: 100%;
}

/* Aspect finder: a compact, task-focused workspace inside the private area. */
#private-tools-section {
  width: 100%;
}

.private-tools-section {
  width: min(100%, 1180px);
  margin-inline: auto;
  padding-bottom: 28px;
}

.private-tools-header {
  max-width: 820px;
  margin-bottom: 16px;
}

.private-tools-header .private-subtitle {
  max-width: 700px;
  line-height: 1.55;
}

.private-tools-view {
  min-width: 0;
}

.aspect-finder-intro {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  margin-bottom: 20px;
  border-top: 1px solid color-mix(in srgb, var(--accent-line) 52%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-line) 34%, var(--line));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-soft) 72%, transparent), transparent 78%);
  padding: 13px 15px;
}

.aspect-finder-intro-mark {
  position: relative;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
}

.aspect-finder-intro-mark::before,
.aspect-finder-intro-mark span {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--accent) 54%, transparent);
  border-radius: 50%;
  content: "";
}

.aspect-finder-intro-mark::before {
  width: 25px;
  height: 12px;
  transform: rotate(-28deg);
}

.aspect-finder-intro-mark span {
  width: 7px;
  height: 7px;
  border: 0;
  background: var(--accent);
}

.aspect-finder-intro-mark i {
  position: absolute;
  top: 7px;
  right: 5px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface);
}

.aspect-finder-intro-mark.is-natal::before {
  width: 23px;
  height: 23px;
  border-style: dashed;
  transform: none;
}

.aspect-finder-intro-mark.is-natal i {
  top: 16px;
  right: 6px;
}

.aspect-finder-intro strong,
.aspect-finder-intro p {
  margin: 0;
}

.aspect-finder-intro strong {
  display: block;
  color: var(--text);
  font-size: 13px;
  font-weight: 760;
}

.aspect-finder-intro p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.aspect-finder-intro .aspect-finder-engine-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
  color: color-mix(in srgb, var(--accent) 76%, var(--text-soft));
  font-size: 10.5px;
  font-weight: 560;
  letter-spacing: 0.01em;
}

.aspect-finder-engine-note b {
  color: var(--text-soft);
  font-weight: 720;
}

.aspect-finder-layout {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  align-items: stretch;
  gap: 18px;
  min-width: 0;
}

.aspect-finder-form,
.aspect-finder-result {
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 90%, var(--accent));
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 16px 40px color-mix(in srgb, var(--text) 5%, transparent);
}

.aspect-finder-form {
  display: grid;
  align-content: start;
  gap: 18px;
  padding: 22px;
}

.aspect-finder-form-heading {
  display: grid;
  gap: 5px;
  padding-bottom: 2px;
}

.aspect-finder-form-heading > span,
.aspect-finder-result-kicker {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.aspect-finder-result-kicker {
  margin: 0;
}

.aspect-finder-form-heading h3,
.aspect-finder-empty h3,
.aspect-finder-result-title,
.aspect-finder-no-results h3 {
  margin: 0;
  color: var(--text);
}

.aspect-finder-form-heading h3 {
  font-size: 19px;
  line-height: 1.25;
}

.aspect-finder-planet-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: end;
  gap: 10px;
  min-width: 0;
}

.aspect-finder-form label,
.aspect-finder-start label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.aspect-finder-form label > span:first-child,
.aspect-finder-start label > span:first-child,
.aspect-finder-start legend {
  color: var(--muted);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.035em;
  line-height: 1.2;
  text-transform: uppercase;
}

.aspect-finder-form :is(input, select) {
  min-width: 0;
  min-height: 44px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  color: var(--text);
  font-size: 13px;
  font-weight: 560;
}

.aspect-finder-form .aspect-finder-planet-pair select {
  color: var(--aspect-finder-planet-color, var(--text));
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", Inter, sans-serif;
  font-size: 15px;
  font-weight: 680;
}

.aspect-finder-form .aspect-finder-planet-pair select option {
  background: var(--surface);
  font-size: 15px;
  font-weight: 620;
}

.aspect-finder-form :is(#aspect-finder-angle, #natal-aspect-finder-angle) {
  color: var(--aspect-finder-aspect-color, var(--text));
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", Inter, sans-serif;
  font-size: 15px;
  font-weight: 680;
}

.aspect-finder-form :is(#aspect-finder-angle, #natal-aspect-finder-angle) option {
  background: var(--surface);
  font-size: 15px;
  font-weight: 620;
}

.aspect-finder-form :is(input, select):hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
}

.aspect-finder-form :is(input, select):focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  outline: 0;
}

.aspect-finder-swap {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  align-self: end;
  margin-bottom: 2px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.16s ease, background-color 0.16s ease, transform 0.16s ease;
}

.aspect-finder-swap svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.aspect-finder-swap:hover,
.aspect-finder-swap:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
  transform: translateY(-1px);
}

.aspect-finder-swap:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.natal-aspect-person-field {
  border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  padding-bottom: 17px;
}

.natal-aspect-relationship {
  display: inline-grid;
  width: 40px;
  height: 40px;
  place-items: center;
  align-self: end;
  margin-bottom: 2px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 60%, var(--surface));
  color: var(--accent);
}

.natal-aspect-relationship svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.aspect-finder-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 12px;
  min-width: 0;
}

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

.aspect-finder-form label > small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.aspect-finder-input-unit {
  position: relative;
  display: block;
  min-width: 0;
}

.aspect-finder-input-unit input {
  padding-right: 32px;
}

.aspect-finder-input-unit b {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--muted);
  font-size: 13px;
  transform: translateY(-50%);
  pointer-events: none;
}

.aspect-finder-start {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  padding: 16px;
}

.aspect-finder-start legend {
  padding: 0 6px;
  color: var(--text-soft);
}

.aspect-finder-location-picker {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 12px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  padding: 13px;
}

.aspect-finder-location-heading {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 780;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.aspect-finder-location-picker label {
  position: relative;
  min-width: 0;
}

.aspect-finder-location-picker :is(select, input) {
  background: var(--surface);
}

.aspect-finder-city-results {
  position: absolute;
  z-index: 12;
  top: calc(100% + 5px);
  right: 0;
  left: 0;
  display: grid;
  max-height: 230px;
  overflow-y: auto;
  border-radius: 9px;
  background: var(--surface);
  box-shadow: 0 14px 34px color-mix(in srgb, #10182f 18%, transparent);
}

.aspect-finder-city-results:empty {
  display: none;
}

.aspect-finder-city-results button {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 42px;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 9px 10px;
  text-align: left;
}

.aspect-finder-city-results button:first-child {
  border-radius: 9px 9px 0 0;
}

.aspect-finder-city-results button:last-child {
  border-bottom: 1px solid var(--line);
  border-radius: 0 0 9px 9px;
}

.aspect-finder-city-results button:hover,
.aspect-finder-city-results button:focus-visible {
  background: var(--accent-soft);
  outline: 0;
}

.aspect-finder-city-results button strong {
  min-width: 0;
  overflow: hidden;
  font-size: 11.5px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.aspect-finder-city-results button span,
.aspect-finder-city-empty {
  color: var(--muted);
  font-size: 9.5px;
}

.aspect-finder-city-empty {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  padding: 10px;
}

.aspect-finder-location-status {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.aspect-finder-location-status.error {
  color: var(--danger);
}

.aspect-finder-timezone-field {
  grid-column: 1 / -1;
}

.aspect-finder-status {
  min-height: 18px;
  margin: -3px 0 -5px;
}

.aspect-finder-submit {
  display: inline-flex;
  width: 100%;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 0;
  border: 1px solid var(--accent);
  padding-inline: 18px;
  transition: background-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.aspect-finder-submit svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 0.16s ease;
}

.aspect-finder-submit:hover:not(:disabled) {
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 20%, transparent);
  transform: translateY(-1px);
}

.aspect-finder-submit:hover:not(:disabled) svg {
  transform: translateX(3px);
}

.aspect-finder-submit:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
}

.aspect-finder-result {
  min-height: 520px;
  overflow: hidden;
}

.aspect-finder-empty,
.aspect-finder-no-results {
  display: grid;
  max-width: 490px;
  min-height: 100%;
  align-content: center;
  justify-items: center;
  gap: 9px;
  margin-inline: auto;
  padding: clamp(28px, 6vw, 54px);
  text-align: center;
}

.aspect-finder-empty-orbit {
  position: relative;
  display: grid;
  width: 104px;
  height: 104px;
  place-items: center;
  margin-bottom: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 50%;
  background: radial-gradient(circle, var(--surface) 0 28%, color-mix(in srgb, var(--accent-soft) 70%, transparent) 29% 52%, transparent 53%);
}

.aspect-finder-empty-orbit::before,
.aspect-finder-empty-orbit::after {
  position: absolute;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 50%;
  content: "";
}

.aspect-finder-empty-orbit::before {
  width: 70px;
  height: 70px;
}

.aspect-finder-empty-orbit::after {
  width: 34px;
  height: 34px;
  border-style: dashed;
}

.aspect-finder-empty-orbit span {
  position: absolute;
  top: 15px;
  right: 14px;
  z-index: 1;
  width: 9px;
  height: 9px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.aspect-finder-empty .eyebrow {
  margin: 0;
}

.aspect-finder-empty h3,
.aspect-finder-no-results h3 {
  font-size: 21px;
  line-height: 1.25;
}

.aspect-finder-empty > p:last-of-type,
.aspect-finder-no-results p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.aspect-finder-empty ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.aspect-finder-empty li {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 10.5px;
  font-weight: 650;
  padding: 5px 9px;
}

.aspect-finder-result-card {
  display: grid;
  align-content: start;
  gap: 20px;
  height: 100%;
  min-width: 0;
  min-height: 100%;
  padding: 24px;
}

.aspect-finder-result-hero {
  display: grid;
  grid-template-columns: 124px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-width: 0;
}

.aspect-finder-result-glyph {
  display: grid;
  box-sizing: border-box;
  width: 124px;
  height: 58px;
  grid-template-columns: 28px 34px 28px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent-line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 36%, transparent), transparent 58%),
    color-mix(in srgb, var(--surface-soft) 76%, var(--surface));
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, #fff 76%, transparent),
    0 8px 22px color-mix(in srgb, var(--text) 5%, transparent);
  line-height: 1;
  padding: 0 9px;
}

.aspect-finder-result-planet {
  display: grid;
  place-items: center;
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 27px;
  font-weight: 560;
}

.aspect-finder-result-planet-a {
  color: var(--result-planet-a, var(--accent));
}

.aspect-finder-result-planet-b {
  color: var(--result-planet-b, var(--accent));
}

.aspect-finder-result-aspect {
  display: grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--result-aspect) 44%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--result-aspect) 10%, var(--surface));
  box-shadow: 0 3px 10px color-mix(in srgb, var(--result-aspect) 12%, transparent);
  color: var(--result-aspect, var(--accent));
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 760;
}

.aspect-finder-result-title {
  margin-top: 3px;
  font-size: clamp(20px, 2.2vw, 27px);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.aspect-finder-result-summary {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.aspect-finder-result-date {
  margin: 9px 0 0;
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
}

.aspect-finder-result-summary > strong {
  color: var(--accent);
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.05;
}

.aspect-finder-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 8px;
}

.aspect-finder-result-meta span {
  position: relative;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.aspect-finder-result-meta span + span::before {
  position: absolute;
  top: 50%;
  left: -7px;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.aspect-finder-result-summary small {
  color: var(--text);
  font-size: 14px;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.aspect-finder-result-summary small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.aspect-finder-timeline {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
  padding-top: 8px;
}

.aspect-finder-timeline::before {
  position: absolute;
  top: 18px;
  right: 13%;
  left: 13%;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 38%, var(--line));
  content: "";
}

.aspect-finder-timeline-item {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  justify-items: center;
  gap: 5px;
  text-align: center;
}

.aspect-finder-timeline-dot {
  display: block;
  width: 21px;
  height: 21px;
  border: 6px solid var(--surface);
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-line);
}

.aspect-finder-timeline-item:nth-child(2) .aspect-finder-timeline-dot {
  background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent);
}

.aspect-finder-timeline-label {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}

.aspect-finder-timeline-value {
  color: var(--text);
  font-size: 11.5px;
  font-weight: 660;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.aspect-finder-passes {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.aspect-finder-passes > div:first-child {
  display: grid;
  gap: 3px;
}

.aspect-finder-passes > h4,
.aspect-finder-passes > div:first-child h4 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 13px;
}

.aspect-finder-pass {
  display: grid;
  grid-template-columns: 31px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.aspect-finder-pass-index {
  display: grid;
  width: 29px;
  height: 29px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 820;
}

.aspect-finder-pass-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.aspect-finder-pass-copy strong {
  color: var(--text);
  font-size: 12px;
}

.aspect-finder-pass-copy > span {
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 760;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

.aspect-finder-pass-copy small,
.aspect-finder-pass-date {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.aspect-finder-pass-date {
  max-width: none;
  color: var(--text-soft);
  font-weight: 650;
  text-align: left;
}

.aspect-finder-method-note {
  margin: 0;
  border-left: 2px solid var(--accent-line);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.45;
  padding-left: 10px;
}

.aspect-finder-actions,
.aspect-finder-result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.aspect-finder-actions > p,
.aspect-finder-result-actions > p {
  flex: 1 1 220px;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.aspect-finder-actions svg,
.aspect-finder-result-actions svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.aspect-finder-actions :is(button, a),
.aspect-finder-result-actions :is(button, a),
.aspect-finder-calendar,
.aspect-finder-reset {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 720;
  padding: 0 13px;
  text-decoration: none;
  transition: border-color 0.16s ease, background-color 0.16s ease, color 0.16s ease, transform 0.16s ease;
}

.aspect-finder-calendar {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.aspect-finder-reset {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
}

.aspect-finder-calendar:hover,
.aspect-finder-calendar:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  outline: 0;
  transform: translateY(-1px);
}

.aspect-finder-reset:hover,
.aspect-finder-reset:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.aspect-finder-calendar:focus-visible,
.aspect-finder-reset:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.aspect-finder-no-results {
  min-height: 520px;
}

.aspect-finder-no-results:not(:has(.aspect-finder-empty-orbit))::before {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  content: "∞";
  font-size: 24px;
}

.aspect-finder-no-results.is-error:not(:has(.aspect-finder-empty-orbit))::before {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
  content: "!";
  font-weight: 800;
}

.aspect-finder-exact-positions {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: 14px;
}

.aspect-finder-exact-positions-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.aspect-finder-exact-positions-heading > span {
  color: var(--muted);
  font-size: 10.5px;
}

.aspect-finder-position-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.aspect-finder-position-card {
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--planet-color));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  padding: 11px;
}

.aspect-finder-position-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

.aspect-finder-position-symbol {
  display: grid;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--planet-color) 10%, var(--surface));
  color: var(--planet-color);
  font-size: 19px;
}

.aspect-finder-position-identity > div {
  display: grid;
  min-width: 0;
}

.aspect-finder-position-identity strong {
  color: var(--text);
  font-size: 12px;
}

.aspect-finder-position-identity span:not(.aspect-finder-position-symbol) {
  color: var(--muted);
  font-size: 9.5px;
}

.aspect-finder-position-main {
  display: grid;
  gap: 1px;
}

.aspect-finder-position-main strong {
  color: var(--text);
  font-family: var(--font-display, inherit);
  font-size: 16px;
  line-height: 1.2;
}

.aspect-finder-position-zodiac-symbol {
  color: var(--position-zodiac-color, var(--text));
  font-family: "Astro Jupiter", "Segoe UI Symbol", "Noto Sans Symbols 2", "Noto Sans Symbols", sans-serif;
  font-variant-emoji: text;
}

html[data-theme="dark"] .aspect-finder-position-zodiac-symbol {
  color: var(--position-zodiac-dark-color, var(--position-zodiac-color, var(--text)));
}

.aspect-finder-position-main > span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 720;
}

.aspect-finder-position-card dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.aspect-finder-position-card dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.aspect-finder-position-card :is(dt, dd) {
  margin: 0;
  font-size: 9.5px;
  line-height: 1.3;
}

.aspect-finder-position-card dt {
  color: var(--muted);
}

.aspect-finder-position-card dd {
  color: var(--text-soft);
  font-weight: 680;
  text-align: right;
}

.aspect-finder-pass {
  grid-template-columns: 31px minmax(0, 1fr) 32px;
}

.aspect-finder-pass-chart {
  display: grid;
  width: 31px;
  height: 31px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.aspect-finder-pass-chart svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.aspect-finder-pass-chart:hover,
.aspect-finder-pass-chart:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
}

.aspect-finder-moment-chart {
  border: 1px solid var(--accent-line);
  background: var(--surface);
  color: var(--accent);
}

.aspect-finder-moment-chart:hover,
.aspect-finder-moment-chart:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  outline: 0;
  transform: translateY(-1px);
}

.aspect-finder-moment-chart:focus-visible,
.aspect-finder-pass-chart:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.aspect-moment-dialog {
  width: min(1200px, calc(100vw - 28px));
  height: min(900px, calc(100dvh - 28px));
  max-width: none;
  max-height: none;
  margin: auto;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 80%, var(--accent));
  border-radius: 18px;
  background: var(--surface);
  color: var(--text);
  padding: 0;
  box-shadow: 0 28px 80px color-mix(in srgb, #10182f 28%, transparent);
}

.aspect-moment-dialog::backdrop {
  background: color-mix(in srgb, #10182f 60%, transparent);
  backdrop-filter: blur(4px);
}

.aspect-moment-dialog:fullscreen,
.aspect-moment-dialog.is-aspect-moment-fallback-fullscreen {
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: 100vw;
  max-height: 100dvh;
  margin: 0;
  border: 0;
  border-radius: 0;
}

.aspect-moment-modal {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  background:
    radial-gradient(circle at 30% 32%, color-mix(in srgb, var(--accent-soft) 42%, transparent), transparent 36%),
    var(--surface);
}

.aspect-moment-header {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  padding: 20px 22px 16px;
}

.aspect-moment-header > div:first-child {
  min-width: 0;
}

.aspect-moment-eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 820;
  letter-spacing: 0.085em;
  text-transform: uppercase;
}

.aspect-moment-header h2 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display, inherit);
  font-size: clamp(22px, 2.3vw, 31px);
  line-height: 1.1;
}

.aspect-moment-header [data-aspect-moment-subtitle] {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.aspect-moment-header-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 7px;
}

.aspect-moment-icon-button {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.aspect-moment-icon-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.aspect-moment-icon-button:hover,
.aspect-moment-icon-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
}

.aspect-moment-icon-button:focus-visible {
  box-shadow: 0 0 0 3px var(--accent-ring);
}

.aspect-moment-location-bar {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 66%, var(--surface));
  padding: 10px 22px;
}

.aspect-moment-location-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.aspect-moment-location-copy strong {
  color: var(--text);
  font-size: 11.5px;
  line-height: 1.35;
}

.aspect-moment-location-copy span {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.aspect-moment-content {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
}

.aspect-moment-content:not([aria-busy="true"]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
}

.aspect-moment-loading,
.aspect-moment-error {
  display: grid;
  height: 100%;
  min-height: 320px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  padding: 30px;
  text-align: center;
}

.aspect-moment-loading > span {
  width: 42px;
  height: 42px;
  border: 2px solid var(--accent-line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: aspect-moment-spin 0.85s linear infinite;
}

@keyframes aspect-moment-spin {
  to { transform: rotate(360deg); }
}

.aspect-moment-loading strong,
.aspect-moment-error strong {
  color: var(--text);
  font-size: 14px;
}

.aspect-moment-loading p,
.aspect-moment-error p {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}

.aspect-moment-error button {
  min-height: 38px;
  margin-top: 5px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: var(--on-accent);
  cursor: pointer;
  font-weight: 700;
  padding: 0 16px;
}

.aspect-moment-chart-stage {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: 15px 18px 13px;
}

.aspect-moment-chart-caption {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  color: var(--muted);
  font-size: 10.5px;
}

.aspect-moment-chart-caption strong {
  color: var(--text-soft);
}

.aspect-moment-chart-wheel {
  display: grid;
  min-width: 0;
  min-height: 0;
  place-items: center;
  overflow: hidden;
}

.aspect-moment-chart-wheel .chart-wheel-svg {
  width: min(100%, 720px);
  height: min(100%, 720px);
  max-width: 100%;
  max-height: 100%;
}

.aspect-moment-chart-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  color: var(--muted);
  font-size: 9.5px;
  text-align: center;
}

.aspect-moment-chart-legend i {
  width: 18px;
  height: 3px;
  border-radius: 999px;
  background: var(--accent);
}

.aspect-moment-details {
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  border-left: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 58%, var(--surface));
  padding: 20px;
}

.aspect-moment-details-intro {
  display: grid;
  gap: 4px;
  margin-bottom: 15px;
}

.aspect-moment-details-intro h3 {
  margin: 0;
  color: var(--text);
  font-family: var(--font-display, inherit);
  font-size: 22px;
}

.aspect-moment-details-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.aspect-moment-selected-positions {
  display: grid;
  gap: 9px;
}

.aspect-moment-selected-positions .aspect-finder-position-card {
  background: var(--surface);
}

.aspect-moment-facts {
  display: grid;
  gap: 0;
  margin: 15px 0 0;
  border-top: 1px solid var(--line);
}

.aspect-moment-facts > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 9px 0;
}

.aspect-moment-facts :is(dt, dd) {
  margin: 0;
  font-size: 10.5px;
}

.aspect-moment-facts dt {
  color: var(--muted);
}

.aspect-moment-facts dd {
  color: var(--text);
  font-weight: 700;
  text-align: right;
}

.aspect-moment-method {
  margin: 15px 0 0;
  border-left: 2px solid var(--accent-line);
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.5;
  padding-left: 10px;
}

/* Fullscreen follows the same 1160px ceiling used by the Tropical chart. */
.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-header {
  align-items: center;
  padding: 12px 20px 10px;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-header h2 {
  font-size: clamp(23px, 2vw, 28px);
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-location-bar {
  padding: 9px 20px;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-content:not([aria-busy="true"]) {
  grid-template-columns: minmax(0, 1fr) clamp(310px, 19vw, 360px);
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-stage {
  position: relative;
  grid-template-rows: minmax(0, 1fr);
  padding: 5px 14px;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-caption,
.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-legend {
  position: absolute;
  right: 14px;
  left: 14px;
  z-index: 1;
  pointer-events: none;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-caption {
  top: 8px;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-legend {
  bottom: 8px;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-wheel {
  grid-row: 1;
  padding: 20px 0 18px;
}

.aspect-moment-dialog:is(:fullscreen, .is-aspect-moment-fallback-fullscreen) .aspect-moment-chart-wheel .chart-wheel-svg {
  width: min(100%, calc(100dvh - 150px), 1160px);
  height: min(100%, calc(100dvh - 150px), 1160px);
  max-width: 100%;
  max-height: 100%;
}

@media (max-width: 720px) {
  .private-tools-section {
    padding-bottom: 18px;
  }

  .private-tools-header {
    margin-bottom: 13px;
  }

  .aspect-finder-intro {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 10px;
    margin-bottom: 14px;
    padding: 11px 8px;
  }

  .aspect-finder-intro-mark {
    width: 34px;
    height: 34px;
  }

  .aspect-finder-form,
  .aspect-finder-result-card {
    padding: 18px;
  }

  .aspect-finder-form {
    gap: 16px;
  }

  .aspect-finder-result {
    min-height: 450px;
  }

  .aspect-finder-empty,
  .aspect-finder-no-results {
    padding: 30px 20px;
  }

  .aspect-finder-no-results {
    min-height: 450px;
  }

  .aspect-moment-dialog {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .aspect-moment-header {
    padding: 14px 14px 12px;
  }

  .aspect-moment-header-actions [data-aspect-moment-fullscreen] {
    display: none;
  }

  .aspect-moment-location-bar {
    display: grid;
    gap: 8px;
    padding: 9px 14px;
  }

  .aspect-moment-content:not([aria-busy="true"]) {
    display: block;
    overflow-y: auto;
  }

  .aspect-moment-chart-stage {
    min-height: min(610px, 72dvh);
    overflow: visible;
    padding: 12px 8px;
  }

  .aspect-moment-chart-wheel {
    min-height: 470px;
    overflow: visible;
  }

  .aspect-moment-chart-wheel .chart-wheel-svg {
    width: min(100%, 620px);
    height: auto;
  }

  .aspect-moment-details {
    overflow: visible;
    border-top: 1px solid var(--line);
    border-left: 0;
    padding: 18px 14px 28px;
  }
}

@media (max-width: 540px) {
  .aspect-finder-layout {
    gap: 14px;
  }

  .aspect-finder-form,
  .aspect-finder-result {
    border-radius: 13px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 4%, transparent);
  }

  .aspect-finder-form,
  .aspect-finder-result-card {
    padding: 16px;
  }

  .aspect-finder-planet-pair,
  .aspect-finder-field-grid,
  .aspect-finder-start {
    grid-template-columns: minmax(0, 1fr);
  }

  .aspect-finder-field-wide,
  .aspect-finder-location-picker,
  .aspect-finder-timezone-field {
    grid-column: auto;
  }

  .aspect-finder-location-picker {
    grid-template-columns: minmax(0, 1fr);
  }

  .aspect-finder-location-heading,
  .aspect-finder-location-status {
    grid-column: auto;
  }

  .aspect-finder-swap {
    justify-self: center;
    align-self: center;
    margin: -1px 0;
    transform: rotate(90deg);
  }

  .aspect-finder-swap:hover,
  .aspect-finder-swap:focus-visible {
    transform: rotate(90deg) translateX(-1px);
  }

  .natal-aspect-relationship {
    justify-self: center;
    align-self: center;
    margin: -1px 0;
    transform: rotate(90deg);
  }

  .aspect-finder-result-hero {
    grid-template-columns: 110px minmax(0, 1fr);
    gap: 12px;
  }

  .aspect-finder-result-glyph {
    width: 110px;
    height: 52px;
    grid-template-columns: 25px 30px 25px;
    gap: 5px;
    border-radius: 16px;
    padding-inline: 7px;
  }

  .aspect-finder-result-planet {
    font-size: 23px;
  }

  .aspect-finder-result-aspect {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .aspect-finder-result-meta {
    display: grid;
    gap: 2px;
  }

  .aspect-finder-result-meta span + span::before {
    display: none;
  }

  .aspect-finder-timeline {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 0;
  }

  .aspect-finder-timeline::before {
    top: 12px;
    bottom: 12px;
    left: 10px;
    width: 1px;
    height: auto;
  }

  .aspect-finder-timeline-item {
    grid-template-columns: 21px 80px minmax(0, 1fr);
    align-items: center;
    justify-items: start;
    text-align: left;
  }

  .aspect-finder-timeline-value {
    text-align: left;
  }

  .aspect-finder-pass {
    grid-template-columns: 29px minmax(0, 1fr) 31px;
  }

  .aspect-finder-pass-date {
    max-width: none;
    text-align: left;
  }

  .aspect-finder-actions :is(button, a),
  .aspect-finder-result-actions :is(button, a),
  .aspect-finder-calendar,
  .aspect-finder-reset {
    width: 100%;
  }

  .aspect-finder-position-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .aspect-finder-exact-positions-heading {
    display: grid;
    gap: 2px;
  }

  .aspect-moment-header h2 {
    font-size: 20px;
  }

  .aspect-moment-header [data-aspect-moment-subtitle] {
    font-size: 10.5px;
  }

  .aspect-moment-chart-stage {
    min-height: 520px;
  }

  .aspect-moment-chart-wheel {
    min-height: 410px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .aspect-finder-swap,
  .aspect-finder-submit,
  .aspect-finder-submit svg,
  .aspect-finder-actions :is(button, a),
  .aspect-finder-result-actions :is(button, a) {
    transition: none;
  }
}

.private-maps-section {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: calc(100vh - 64px);
  min-height: 0;
}

.private-maps-header {
  margin-bottom: 14px;
}

.private-maps-stage {
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
}

.private-maps-chat {
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.private-maps-chat .private-maps-chat-panel {
  width: 100%;
  height: 100%;
  min-height: 0;
  border-radius: 0;
  box-shadow: none;
}

.private-maps-chat .private-maps-chat-panel .chat-modal-close {
  top: 12px;
  right: 12px;
}

.private-maps-stage .private-chart-wheel-inline {
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.private-maps-stage .chart-wheel-stage {
  height: 100%;
  min-height: 0;
}

.private-maps-empty {
  min-height: 100%;
}

.private-maps-active .private-panel {
  padding: 0;
  overflow: hidden;
}

.private-maps-active .private-maps-section {
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
}

.private-maps-active .private-maps-header {
  display: none;
}

.private-maps-active .private-maps-stage {
  height: 100vh;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.private-maps-active .private-maps-chat {
  height: 100vh;
}

.private-maps-active .chart-wheel-stage {
  padding: 0;
}

.private-maps-active .chart-wheel-stage.is-multiple-chart {
  padding: 0;
}

.private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
  width: clamp(590px, 35vw, 800px);
}

.private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
.private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
  min-height: 100%;
  height: 100%;
}

.private-dashboard-groups {
  display: grid;
  gap: 30px;
  width: 100%;
  max-width: 1360px;
  padding-top: 8px;
  margin-inline: auto;
}

.private-dashboard-group {
  display: grid;
  gap: 16px;
}

.private-dashboard-group h3 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 750;
  line-height: 1.2;
}

.private-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px;
}

.private-dashboard-card {
  position: relative;
  display: grid;
  min-height: 144px;
  align-content: space-between;
  gap: 18px;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 20px;
  text-align: left;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.private-dashboard-card::after {
  position: absolute;
  top: -34px;
  right: -30px;
  z-index: 0;
  width: 176px;
  height: 176px;
  background: color-mix(in srgb, var(--accent) 76%, var(--text));
  content: "";
  opacity: 0.16;
  pointer-events: none;
  transform: rotate(-5deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
  -webkit-mask: var(--dashboard-card-art) center / contain no-repeat;
  mask: var(--dashboard-card-art) center / contain no-repeat;
}

.private-dashboard-card:hover::after,
.private-dashboard-card:focus-visible::after {
  opacity: 0.25;
  transform: rotate(-3deg) scale(1.04);
}

.private-dashboard-card[data-private-dashboard-action="maps"] {
  --dashboard-card-art: url("/assets/dashboard-art-maps.svg");
}

.private-dashboard-card[data-private-dashboard-action="add-chart"] {
  --dashboard-card-art: url("/assets/dashboard-art-add-chart.svg");
}

.private-dashboard-card[data-private-dashboard-action="saved-charts"] {
  --dashboard-card-art: url("/assets/dashboard-art-saved-charts.svg");
}

.private-dashboard-card[data-private-dashboard-action="plans"] {
  --dashboard-card-art: url("/assets/dashboard-art-maps.svg");
}

.private-dashboard-card[data-private-dashboard-action="admin"] {
  --dashboard-card-art: url("/assets/dashboard-art-astros.svg");
}

.private-dashboard-card[data-private-dashboard-action="orders"] {
  --dashboard-card-art: url("/assets/dashboard-art-prognosis.svg");
}

.private-dashboard-card[data-private-dashboard-action="store"] {
  --dashboard-card-art: url("/assets/nav-icon-store.svg");
}

.private-dashboard-card[data-private-dashboard-action="settings"] {
  --dashboard-card-art: url("/assets/dashboard-art-lunar-phases.svg");
}

.private-dashboard-card[data-private-dashboard-action="prognosis"] {
  --dashboard-card-art: url("/assets/dashboard-art-prognosis.svg");
}

.private-dashboard-card[data-private-dashboard-action="lunar-phases"] {
  --dashboard-card-art: url("/assets/dashboard-art-lunar-phases.svg");
}

.private-dashboard-card[data-private-dashboard-action="transits"] {
  --dashboard-card-art: url("/assets/dashboard-art-transits.svg");
}

.private-dashboard-card span {
  position: relative;
  z-index: 1;
  font-size: 18.5px;
  font-weight: 700;
  line-height: 1.22;
}

.private-dashboard-card small {
  position: relative;
  z-index: 1;
  color: color-mix(in srgb, var(--muted) 84%, var(--text));
  font-size: 13.5px;
  line-height: 1.45;
}

.private-dashboard-card:hover,
.private-dashboard-card:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
  transform: translateY(-1px);
}

.private-transits-controls {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(190px, 260px);
  gap: 14px;
  width: 100%;
  max-width: 1040px;
  align-items: end;
  margin: -2px auto 18px;
}

.private-transits-controls label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.private-transits-controls select,
.private-transits-controls input {
  width: 100%;
  min-height: 42px;
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
}

.private-transit-status {
  max-width: 1040px;
  margin: 8px auto 14px;
}

.featured-transit-free {
  max-width: 1040px;
  margin: 0 auto 16px;
}

.featured-transit-card {
  display: grid;
  gap: 14px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.06);
  padding: 18px;
}

.featured-transit-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.featured-transit-head h3 {
  margin: 2px 0 0;
  font-size: 20px;
}

.featured-transit-head p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.featured-transit-intensity {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text);
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.featured-transit-intensity.intensity-alta {
  border-color: rgba(194, 65, 53, 0.35);
  background: rgba(194, 65, 53, 0.08);
  color: #9f2f27;
}

.featured-transit-intensity.intensity-media {
  border-color: rgba(183, 121, 31, 0.35);
  background: rgba(183, 121, 31, 0.1);
  color: #8a5b17;
}

.featured-transit-intensity.intensity-baja {
  border-color: rgba(39, 149, 107, 0.35);
  background: rgba(39, 149, 107, 0.1);
  color: #1f7655;
}

.featured-transit-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  margin: 0;
}

.featured-transit-meta div {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.featured-transit-meta dt {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.featured-transit-meta dd {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
}

.featured-transit-copy {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.featured-transit-copy section {
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.featured-transit-copy h4 {
  margin: 0 0 6px;
  font-size: 13px;
  text-transform: uppercase;
}

.featured-transit-copy p,
.featured-transit-card > p {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
}

.featured-transit-note {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.featured-transit-premium {
  border-left: 3px solid var(--accent-line);
  background: var(--accent-soft);
  padding: 10px 12px;
}

.featured-transit-card small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.featured-transit-empty {
  border-color: var(--line);
  box-shadow: none;
}

.private-horoscope-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  align-items: center;
  max-width: 1040px;
  margin: 0 auto 16px;
}

.private-horoscope-actions button {
  min-width: 220px;
}

.private-horoscope-usage {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.daily-horoscope-history {
  display: grid;
  gap: 10px;
  max-width: 1040px;
  margin: 0 auto 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.daily-horoscope-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.daily-horoscope-history h3 {
  margin: 0;
  font-size: 16px;
}

.daily-horoscope-history ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.daily-horoscope-history li button {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  padding: 10px 12px;
  text-align: left;
}

.daily-horoscope-history li button:hover,
.daily-horoscope-history li button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
}

.daily-horoscope-history small,
.daily-horoscope-empty {
  color: var(--muted);
  font-size: 12px;
}

.private-transit-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  max-width: 1040px;
  margin: 0 auto 16px;
}

.private-transit-orb-filter {
  display: grid;
  gap: 6px;
  min-width: 150px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.private-transit-orb-filter select {
  min-height: 38px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  text-transform: none;
}

.private-transit-planet-filters {
  display: flex;
  flex: 1 1 420px;
  flex-wrap: wrap;
  gap: 8px;
}

.private-transit-planet-filters button {
  display: inline-grid;
  min-width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 0 10px;
  font-size: 13px;
  font-weight: 800;
}

.private-transit-planet-filters button span {
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-size: 22px;
  line-height: 1;
}

.private-transit-planet-filters button:hover,
.private-transit-planet-filters button:focus-visible,
.private-transit-planet-filters button.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.private-transit-results {
  display: grid;
  gap: 14px;
  max-width: 1040px;
  margin-inline: auto;
}

.private-transit-results h3 {
  margin: 0;
  font-size: 20px;
}

.private-transit-results p {
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.private-transit-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.private-transit-table table {
  width: 100%;
  min-width: 680px;
  border-collapse: collapse;
  font-size: 13px;
}

.private-transit-table th,
.private-transit-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  white-space: nowrap;
}

.private-transit-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.private-transit-table tbody tr:last-child td {
  border-bottom: 0;
}

.daily-horoscope-dialog {
  width: min(720px, 94vw);
  max-height: min(760px, 92vh);
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.daily-horoscope-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: min(760px, 92vh);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

.daily-horoscope-modal header,
.daily-horoscope-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 16px 18px;
}

.daily-horoscope-modal footer {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  justify-content: flex-end;
}

.daily-horoscope-modal h2 {
  margin: 0;
  font-size: 22px;
}

.daily-horoscope-modal p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.daily-horoscope-content {
  min-height: 260px;
  overflow: auto;
  padding: 18px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.private-panel {
  height: 100vh;
  min-width: 0;
  padding: 32px min(7vw, 76px);
  overflow-x: hidden;
  overflow-y: auto;
}

.private-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 18px;
}

.private-header h2 {
  margin: 0;
  font-size: 30px;
  line-height: 1.1;
  letter-spacing: 0;
}

.private-subtitle {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.private-add {
  display: inline-flex;
  min-width: 172px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  white-space: nowrap;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.private-add-icon {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  font-size: 19px;
  font-weight: 500;
  line-height: 1;
}

.private-add.is-form-open {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  color: var(--accent);
}

.private-add.is-form-open:hover,
.private-add.is-form-open:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.private-form-wrap {
  margin: 16px 0 20px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}

#private-list-section {
  position: relative;
  isolation: isolate;
}

#private-list-section::after {
  position: fixed;
  right: clamp(24px, 6vw, 108px);
  bottom: clamp(22px, 6vh, 76px);
  z-index: -1;
  width: clamp(430px, 38vw, 720px);
  aspect-ratio: 1;
  background: color-mix(in srgb, var(--accent) 72%, var(--text));
  content: "";
  opacity: 0.052;
  pointer-events: none;
  transform: rotate(-5deg);
  -webkit-mask: url("/assets/list-background-chart.svg") center / contain no-repeat;
  mask: url("/assets/list-background-chart.svg") center / contain no-repeat;
}

.private-person-form {
  max-width: 760px;
}

.private-form-actions {
  display: flex;
  gap: 10px;
}

.private-form-actions button {
  min-width: 132px;
  padding: 0 16px;
}

.people-toolbar {
  display: grid;
  gap: 10px;
  margin: 16px 0;
}

.people-toolbar input {
  max-width: 420px;
}

.people-initial-filter,
.people-solar-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.people-initial-filter button,
.people-solar-filter button {
  min-width: 36px;
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.people-solar-filter button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.people-solar-filter button.people-solar-filter-button {
  color: var(--people-solar-filter-color, var(--accent));
  font-family: "Astro Jupiter", "Segoe UI Symbol", "Noto Sans Symbols 2", Georgia, serif;
  font-size: 20px;
  line-height: 1;
}

.people-initial-filter button:hover,
.people-initial-filter button[aria-pressed="true"],
.people-solar-filter button:hover,
.people-solar-filter button[aria-pressed="true"] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.people-solar-filter button.people-solar-filter-button:hover,
.people-solar-filter button.people-solar-filter-button[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--people-solar-filter-color, var(--accent)) 58%, var(--line));
  background: color-mix(in srgb, var(--people-solar-filter-color, var(--accent)) 13%, var(--surface));
  color: var(--people-solar-filter-color, var(--accent));
}

.people-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.people-item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 11px 16px;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.people-info,
.people-actions {
  position: relative;
  z-index: 1;
}

.people-solar-watermark {
  position: absolute;
  top: calc(50% + 1px);
  left: 50%;
  z-index: 0;
  width: 142px;
  height: 142px;
  color: var(--people-solar-color, var(--accent));
  opacity: 0.28;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

.people-solar-watermark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.people-solar-watermark text {
  fill: currentColor;
  font-family: "Astro Jupiter", "Segoe UI Symbol", "Noto Sans Symbols 2", Georgia, serif;
  font-size: 74px;
  font-weight: 600;
}

.people-solar-card {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  opacity: 0.45;
}

.people-item:hover .people-solar-watermark,
.people-item:focus-visible .people-solar-watermark {
  opacity: 0.36;
}

.people-item:hover,
.people-item:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);
  outline: none;
  transform: translateY(-1px);
}

.people-item:hover b,
.people-item:focus-visible b {
  color: var(--accent);
}

.people-item b {
  display: block;
  margin-bottom: 4px;
}

.people-item small {
  display: block;
  color: var(--muted);
  line-height: 1.35;
}

.people-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.btn-small {
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.btn-small:hover {
  background: var(--ink-soft);
}

.btn-small.danger {
  border-color: var(--danger-line);
  color: var(--danger);
}

.people-empty {
  margin: 18px 0 0;
  color: var(--muted);
}

.private-sessions-section {
  width: min(100%, 1180px);
  container-type: inline-size;
  margin-inline: auto;
  padding-bottom: 44px;
}

.sessions-page-header {
  margin-bottom: 20px;
}

.sessions-page-header .private-subtitle {
  max-width: 720px;
  line-height: 1.55;
}

.sessions-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(240px, 0.58fr);
  min-height: 350px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 22px;
  background: var(--surface);
  box-shadow: 0 12px 36px color-mix(in srgb, var(--accent) 6%, transparent);
}

.sessions-hero-copy {
  position: relative;
  z-index: 1;
  display: grid;
  align-content: center;
  gap: 15px;
  padding: clamp(28px, 3.5vw, 44px);
}

.sessions-hero-copy h3,
.sessions-hero-copy p {
  margin: 0;
}

.sessions-hero-copy h3 {
  max-width: 680px;
  color: var(--text);
  font-family: "Astro Jupiter", var(--font-display, Georgia, "Times New Roman", serif);
  font-size: clamp(34px, 4.2vw, 52px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.04;
}

.sessions-hero-copy > p:not(.eyebrow):not(.sessions-hero-note) {
  max-width: 670px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.68;
}

.sessions-hero-note {
  max-width: 570px;
  border-left: 2px solid var(--accent);
  padding-left: 13px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}

.sessions-hero-portrait {
  position: relative;
  display: grid;
  grid-template-rows: auto auto;
  min-width: 0;
  justify-items: center;
  align-items: center;
  align-content: center;
  gap: 16px;
  margin: 0;
  overflow: hidden;
  background: linear-gradient(90deg, var(--surface), color-mix(in srgb, var(--accent) 3%, var(--surface)));
  padding: 30px 28px;
  color: var(--text);
}

.sessions-hero-portrait img {
  display: block;
  width: min(100%, 200px);
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center top;
  border: 1px solid color-mix(in srgb, var(--text) 12%, var(--line));
  border-radius: 14px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 10%, transparent);
}

.sessions-hero-portrait figcaption {
  display: grid;
  width: 100%;
  max-width: 220px;
  gap: 5px;
  text-align: center;
}

.sessions-hero-portrait figcaption span {
  color: var(--text);
  font-family: "Astro Jupiter", var(--font-display, Georgia, "Times New Roman", serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.sessions-hero-portrait figcaption small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.5;
}

.sessions-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}

.sessions-contact-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: 20px;
  min-width: 0;
  min-height: 270px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
  padding: 28px;
  box-shadow: 0 12px 32px color-mix(in srgb, var(--text) 6%, transparent);
}

.sessions-contact-icon {
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--line));
  border-radius: 16px;
  background: var(--accent-soft);
  color: var(--accent);
}

.sessions-contact-icon svg {
  /* The envelope has inset paths: match its visible width to the WhatsApp mark. */
  width: 38px;
  height: 38px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}

.sessions-contact-copy {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
}

.sessions-contact-copy h3,
.sessions-contact-copy p,
.sessions-contact-copy strong {
  margin: 0;
}

.sessions-contact-copy h3 {
  color: var(--text);
  font-size: 21px;
  line-height: 1.2;
}

.sessions-contact-copy > p:not(.eyebrow) {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.sessions-contact-copy strong {
  margin-top: 5px;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 14px;
}

.sessions-contact-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  grid-column: 1 / -1;
  justify-self: start;
  padding: 0 18px;
  text-decoration: none;
}

.sessions-contact-whatsapp .sessions-contact-icon {
  border-color: color-mix(in srgb, #168a65 32%, var(--line));
  background: color-mix(in srgb, #168a65 11%, var(--surface));
  color: #25d366;
}

.sessions-contact-whatsapp .sessions-contact-icon svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  stroke: none;
}

@container (max-width: 700px) {
  .sessions-hero {
    grid-template-columns: minmax(0, 1fr);
  }

  .sessions-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .sessions-hero-portrait {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: start;
    gap: 24px;
    border-top: 1px solid var(--line);
    padding: 24px 28px;
  }

  .sessions-hero-portrait figcaption {
    text-align: left;
  }
}

@media (max-width: 760px) {
  .sessions-hero {
    grid-template-columns: 1fr;
  }

  .sessions-hero-portrait {
    grid-template-columns: 120px minmax(0, 1fr);
    grid-template-rows: auto;
    gap: 24px;
    padding: 24px;
  }

  .sessions-hero-portrait figcaption {
    border-top: 0;
    padding-top: 0;
    text-align: left;
  }

  .sessions-contact-grid {
    grid-template-columns: 1fr;
  }

  .sessions-contact-card {
    min-height: 0;
  }
}

@media (max-width: 480px) {
  .private-sessions-section {
    padding-bottom: 28px;
  }

  .sessions-hero {
    border-radius: 16px;
  }

  .sessions-hero-copy {
    padding: 26px 22px 28px;
  }

  .sessions-hero-copy h3 {
    font-size: clamp(31px, 10vw, 40px);
  }

  .sessions-hero-portrait {
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 18px;
    padding: 20px;
  }

  .sessions-hero-portrait figcaption span {
    font-size: 21px;
  }

  .sessions-contact-card {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 16px;
    border-radius: 16px;
    padding: 22px;
  }

  .sessions-contact-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
  }

  .sessions-contact-action {
    width: 100%;
    justify-content: center;
  }
}

.billing-panel {
  margin-top: 0;
  padding-top: 0;
}

.billing-panel.is-subscription-section {
  width: min(100%, 1180px);
  margin-inline: auto;
}

.admin-screen {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.admin-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--page);
}

.private-admin-section .admin-panel {
  height: calc(100vh - 64px);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 28px 32px 22px;
}

.admin-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 30px;
  line-height: 1.1;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 0 28px;
}

.admin-tabs button {
  min-height: 46px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-weight: 650;
  padding: 0 10px;
}

.admin-tabs button.active,
.admin-tabs button:hover,
.admin-tabs button:focus-visible {
  border-color: var(--accent);
  color: var(--text);
  outline: 0;
}

.admin-section {
  display: grid;
  align-content: start;
  gap: 18px;
  overflow: auto;
  padding: 24px 32px 34px;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}

.admin-metric,
.admin-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 16px;
}

.admin-metric {
  display: grid;
  gap: 5px;
}

.admin-metric span,
.admin-metric small,
.admin-plan-list span,
.admin-plan-list small,
.admin-empty {
  color: var(--muted);
  font-size: 12px;
}

.admin-metric strong {
  color: var(--accent);
  font-size: 24px;
  line-height: 1.1;
}

.admin-card h3,
.admin-section-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
}

.admin-plan-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.admin-plan-list article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 12px;
}

.admin-module-card {
  display: grid;
  gap: 16px;
}

.admin-module-card-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
}

.admin-module-card-head .eyebrow {
  margin: 0 0 6px;
}

.admin-module-card-head p:not(.eyebrow) {
  max-width: 620px;
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
}

.admin-module-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.admin-module-toggle {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft));
  padding: 13px;
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease, transform 0.16s ease;
}

.admin-module-toggle:hover,
.admin-module-toggle:focus-within {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  background: color-mix(in srgb, var(--surface) 76%, var(--accent-soft));
}

.admin-module-toggle.is-saving {
  cursor: wait;
  opacity: 0.68;
  pointer-events: none;
}

.admin-module-toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.admin-module-toggle-ui {
  position: relative;
  width: 42px;
  height: 24px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 10%, var(--surface));
  transition: border-color 0.16s ease, background 0.16s ease;
}

.admin-module-toggle-ui::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--surface);
  box-shadow: 0 3px 8px rgba(15, 23, 42, 0.14);
  content: "";
  transition: transform 0.16s ease, background 0.16s ease;
}

.admin-module-toggle input:checked + .admin-module-toggle-ui {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent) 72%, var(--accent-soft));
}

.admin-module-toggle input:checked + .admin-module-toggle-ui::after {
  background: #fff;
  transform: translateX(18px);
}

.admin-module-toggle input:focus-visible + .admin-module-toggle-ui {
  outline: 2px solid color-mix(in srgb, var(--accent) 44%, transparent);
  outline-offset: 3px;
}

.admin-module-toggle b {
  display: block;
  color: var(--text);
  font-size: 14px;
  line-height: 1.25;
}

.admin-module-toggle small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.admin-module-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.admin-module-save-status {
  min-height: 20px;
  margin: 0 auto 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.admin-module-save-status.is-success {
  color: color-mix(in srgb, #16834f 84%, var(--text));
  font-weight: 700;
}

.admin-module-save-status.is-error {
  color: var(--danger);
  font-weight: 700;
}

.admin-module-save {
  width: auto;
  min-width: 170px;
  padding-inline: 20px;
}

.admin-module-save:disabled {
  cursor: default;
}

@media (max-width: 720px) {
  .admin-module-actions {
    align-items: stretch;
    flex-direction: column;
    gap: 10px;
  }

  .admin-module-save {
    width: 100%;
  }
}

.admin-section-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-waitlist-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.admin-waitlist-export {
  display: inline-flex;
  min-height: 40px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  text-decoration: none;
}

.admin-waitlist-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 220px) auto auto;
  align-items: end;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 14px;
}

.admin-waitlist-filters label {
  display: grid;
  gap: 6px;
}

.admin-waitlist-filters label > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-waitlist-filters :is(input, select) {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--page);
  color: var(--text);
  padding: 8px 11px;
  font: inherit;
}

.admin-waitlist-filters :is(input, select):focus {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.admin-waitlist-search,
.admin-waitlist-reset {
  min-height: 42px;
  padding: 0 16px;
}

.admin-waitlist-result-count,
.admin-waitlist-privacy-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.admin-waitlist-result-count {
  margin-bottom: -8px;
  font-weight: 650;
}

.admin-waitlist-privacy-note {
  border-left: 2px solid var(--accent-line);
  padding-left: 10px;
}

.admin-waitlist-withdrawn {
  display: block;
  max-width: 150px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.admin-action-button {
  min-width: 112px;
}

.admin-pill {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  padding: 0 9px;
  white-space: nowrap;
}

.admin-pill-admin,
.admin-pill-professional,
.admin-pill-completed {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.admin-pill-personal,
.admin-pill-in_review {
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface));
  color: var(--accent);
}

.admin-pill-essential,
.admin-pill-user,
.admin-pill-pending,
.admin-pill-test_requested {
  color: var(--muted);
}

.admin-pill-cancelled {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.admin-table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.admin-table {
  width: 100%;
  min-width: 820px;
  border-collapse: collapse;
  color: var(--text);
  font-size: 13px;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
}

.admin-table tr:last-child td {
  border-bottom: 0;
}

.admin-table b,
.admin-table small {
  display: block;
}

.admin-table small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

.admin-dialog {
  width: min(620px, calc(100vw - 34px));
  max-height: min(92vh, 760px);
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0;
}

.admin-dialog::backdrop {
  background: var(--overlay);
}

.admin-modal {
  display: grid;
  gap: 16px;
  max-height: min(92vh, 760px);
  overflow-y: auto;
  padding: 22px;
}

.admin-modal header,
.admin-modal footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.admin-modal header {
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
}

.modal-close {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.modal-close:hover,
.modal-close:focus-visible {
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.admin-modal footer {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.admin-modal h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
}

.admin-modal p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.admin-adjust-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
  padding: 14px;
}

.admin-adjust-summary b,
.admin-adjust-summary small {
  display: block;
}

.admin-adjust-summary small {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
}

.admin-order-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--line);
}

.admin-order-context > div {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
  background: var(--surface);
  padding: 11px 12px;
}

.admin-order-context dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-order-context dd {
  margin: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
}

.admin-order-context .admin-order-context-empty {
  grid-column: 1 / -1;
}

.admin-order-no-context {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

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

.admin-form-grid .span-2 {
  grid-column: 1 / -1;
}

.admin-modal textarea {
  min-height: 88px;
  resize: vertical;
}

.billing-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 14px;
}

.billing-header h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.1;
}

.billing-panel.is-store-section .billing-header,
.billing-panel.is-store-section > .form-status {
  width: min(100%, 1160px);
  margin-right: auto;
  margin-left: auto;
}

.billing-panel.is-store-section .billing-header {
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 20px;
}

.store-cart-header {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
}

.store-cart-header span {
  display: inline-grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 11px;
  line-height: 1;
}

.billing-content {
  display: grid;
  gap: 22px;
}

.billing-balance {
  display: grid;
  max-width: 360px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--accent-soft);
  padding: 16px;
}

.billing-balance span,
.billing-balance small {
  color: var(--muted);
  font-size: 13px;
}

.billing-balance strong {
  color: var(--accent);
  font-size: 34px;
  line-height: 1.1;
}

.billing-balance.low {
  border-color: var(--warning);
}

.billing-current-plan {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.billing-current-plan article {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px 14px;
}

.billing-current-plan span {
  color: var(--muted);
  font-size: 12px;
}

.billing-current-plan strong {
  color: var(--text);
  font-size: 16px;
  line-height: 1.2;
}

.billing-section {
  display: grid;
  gap: 12px;
}

.billing-section-title h3 {
  margin: 0 0 4px;
  font-size: 18px;
}

.billing-section-title p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.billing-usage-section {
  margin-top: 18px;
}

.billing-empty-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.billing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 10px;
}

.subscription-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 18px;
}

.subscription-card {
  display: grid;
  align-content: start;
  gap: 16px;
  padding: 22px;
  border: 1px solid rgba(20, 105, 110, 0.18);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06);
}

.subscription-card h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 22px;
  line-height: 1.12;
}

.subscription-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.subscription-status {
  justify-self: start;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subscription-status.is-subscribed {
  border-color: rgba(184, 139, 74, 0.28);
  background: rgba(184, 139, 74, 0.14);
  color: #95682e;
}

.subscription-status.is-upcoming {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}

.subscription-details {
  display: grid;
  gap: 8px;
  margin: 0;
}

.subscription-details div {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.subscription-details dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.subscription-details dd {
  margin: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: 700;
  text-overflow: ellipsis;
}

.subscription-benefits-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--muted);
  list-style: none;
}

.subscription-benefits-list li {
  position: relative;
  padding-left: 18px;
  line-height: 1.45;
}

.subscription-benefits-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--accent);
  opacity: 0.7;
}

.subscription-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.subscription-offer strong {
  color: var(--accent);
  font-size: 24px;
}

.subscription-offer span {
  display: block;
  color: var(--muted);
  font-size: 13px;
}

.subscription-note {
  color: var(--accent);
  font-weight: 700;
}

.subscription-note-muted {
  color: var(--muted);
  font-weight: 500;
}

.commerce-card {
  display: grid;
  align-content: space-between;
  gap: 12px;
  min-height: 192px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 14px;
}

.commerce-card.active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.commerce-card b,
.commerce-card strong {
  color: var(--text);
}

.commerce-card small,
.commerce-card span,
.commerce-card li {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.commerce-card ul {
  display: grid;
  gap: 3px;
  margin: 0;
  padding-left: 17px;
}

.commerce-card button:disabled {
  cursor: default;
  opacity: 0.65;
}

.reports-section {
  display: grid;
  gap: 18px;
  margin-top: 6px;
}

.reports-availability-notice {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--warning) 28%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--warning) 6%, var(--surface));
  padding: 13px 15px;
}

.reports-availability-icon {
  display: grid;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--warning) 46%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--warning) 9%, var(--surface));
  color: color-mix(in srgb, var(--warning) 82%, var(--text));
}

.reports-availability-icon svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reports-availability-notice strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.reports-availability-notice p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.reports-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.report-card {
  position: relative;
  min-height: 292px;
  align-content: start;
  grid-template-rows: 1fr auto auto;
  gap: 18px;
  overflow: hidden;
  isolation: isolate;
  padding: 24px;
}

.report-card::after {
  content: "";
  position: absolute;
  top: 24px;
  right: 18px;
  z-index: 0;
  width: 172px;
  height: 172px;
  background: color-mix(in srgb, var(--accent) 62%, #8aa9a7);
  opacity: 0.16;
  pointer-events: none;
  transform: rotate(-4deg);
  transition: opacity 0.18s ease, transform 0.18s ease;
  -webkit-mask: var(--report-card-art) center / contain no-repeat;
  mask: var(--report-card-art) center / contain no-repeat;
}

.report-card:hover::after,
.report-card:focus-within::after {
  opacity: 0.24;
  transform: rotate(-2deg) scale(1.04);
}

.report-card-copy,
.report-card-review,
.report-card-price,
.report-card-action {
  position: relative;
  z-index: 1;
}

.report-card-copy {
  display: grid;
  gap: 12px;
  max-width: min(100%, 320px);
  padding-right: 76px;
}

.report-card.is-coming-soon {
  grid-template-rows: 1fr auto;
  border-color: color-mix(in srgb, var(--warning) 20%, var(--line));
  background: color-mix(in srgb, var(--warning) 2.5%, var(--surface));
}

.report-card.is-coming-soon .report-card-copy {
  grid-template-rows: 28px auto 1fr;
  align-content: start;
}

.report-card.is-coming-soon::after {
  opacity: 0.1;
}

.report-card.is-coming-soon:hover::after,
.report-card.is-coming-soon:focus-within::after {
  opacity: 0.14;
  transform: rotate(-4deg);
}

.report-card-status {
  display: inline-flex;
  box-sizing: border-box;
  min-height: 28px;
  align-items: center;
  justify-content: center;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  padding: 5px 10px;
  color: color-mix(in srgb, var(--warning) 78%, var(--text)) !important;
  font-size: 10px !important;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.1 !important;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}

.report-card-copy b {
  font-size: 18px;
  line-height: 1.18;
}

.report-card-copy small {
  font-size: 14px;
  line-height: 1.5;
}

.report-card-review {
  align-self: end;
}

.report-card-review,
.report-card-price {
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  padding: 6px 10px;
}

.report-card-action {
  justify-self: start;
  min-width: 132px;
}

.report-card-action-disabled {
  border-color: color-mix(in srgb, var(--muted) 24%, var(--line));
  background: color-mix(in srgb, var(--muted) 5%, var(--surface));
  color: var(--muted);
  opacity: 1 !important;
}

@media (max-width: 1180px) {
  .reports-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .reports-grid {
    grid-template-columns: 1fr;
  }

  .report-card {
    min-height: 250px;
  }

  .report-card-copy {
    padding-right: 58px;
  }

  .report-card::after {
    width: 142px;
    height: 142px;
  }
}

.report-card[data-report-product="complete-reading"] {
  --report-card-art: url("/assets/report-art-complete-reading.svg");
}

.report-card[data-report-product="solar-return"] {
  --report-card-art: url("/assets/report-art-solar-return.svg");
}

.report-card[data-report-product="synastry"] {
  --report-card-art: url("/assets/report-art-synastry.svg");
}

.report-card[data-report-product="follow-up"] {
  --report-card-art: url("/assets/report-art-follow-up.svg");
}

.report-card[data-report-product="psychological-identity"] {
  --report-card-art: url("/assets/report-art-psychological-identity.svg");
}

.report-card[data-report-product="family-social-relations"] {
  --report-card-art: url("/assets/report-art-family-social-relations.svg");
}

.report-card[data-report-product="composite-chart"] {
  --report-card-art: url("/assets/report-art-synastry.svg");
}

.report-card[data-report-product="composite-astroanamnesis"] {
  --report-card-art: url("/assets/report-art-complete-reading.svg");
}

.sidebar-actions {
  display: grid;
  flex: 0 0 auto;
  gap: 9px;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.sidebar-top-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-top: 18px;
}

.sidebar-top-actions:has(.sidebar-space-button.is-hidden) {
  grid-template-columns: 1fr;
}

.sidebar-top-actions:has(.sidebar-home-button:not(.is-hidden)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

.sidebar-new-chat,
.sidebar-space-button,
.sidebar-home-button {
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 0 12px;
}

.sidebar-new-chat svg,
.sidebar-space-button svg,
.sidebar-home-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.85;
}

.sidebar-new-chat {
  border: 1px solid transparent;
  background: var(--ink-soft);
  color: var(--text);
  font-weight: 520;
}

.sidebar-new-chat:hover,
.sidebar-new-chat:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--ink-soft) 72%, var(--text) 8%);
  color: var(--text);
  outline: 0;
}

.sidebar-space-button,
.sidebar-home-button {
  width: 44px;
  justify-content: center;
  padding: 0;
}

.sidebar-space-button {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  justify-content: center;
  padding: 0;
}

.sidebar-space-button span,
.sidebar-home-button span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.sidebar-bottom-space-button {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  justify-content: center;
  gap: 9px;
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-weight: 760;
  padding: 0 12px;
}

.sidebar-bottom-space-button span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: nowrap;
}

.sidebar-bottom-space-button:hover,
.sidebar-bottom-space-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.sidebar-bottom {
  position: relative;
  display: grid;
  flex: 0 0 auto;
  gap: 12px;
  margin-top: auto;
}

.sidebar-account {
  position: relative;
}

.sidebar-account-toggle {
  display: flex;
  width: 100%;
  min-height: 48px;
  align-items: center;
  gap: 10px;
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  text-align: left;
}

.sidebar-account-toggle:hover,
.sidebar-account-toggle:focus-visible,
.sidebar-account-toggle[aria-expanded="true"] {
  background: var(--ink-soft);
  outline: 0;
}

.sidebar-account-avatar {
  display: inline-grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0;
  overflow: hidden;
}

.sidebar-account-avatar img,
.account-settings-avatar img,
.private-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-account-text {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.sidebar-account-text strong,
.sidebar-account-text small,
.sidebar-account-card strong,
.sidebar-account-card small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-account-text strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.sidebar-account-text small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.2;
}

.sidebar-account-menu {
  position: absolute;
  z-index: 70;
  right: 0;
  bottom: calc(100% + 8px);
  left: 0;
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 7px;
}

.sidebar-account-card {
  display: grid;
  gap: 2px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 4px;
  padding: 7px 8px 10px;
}

.sidebar-account-card strong {
  color: var(--text);
  font-size: 13px;
}

.sidebar-account-card small {
  color: var(--muted);
  font-size: 12px;
}

.sidebar-account-menu button {
  min-height: 34px;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 7px 9px;
  text-align: left;
}

.sidebar-account-menu button:hover,
.sidebar-account-menu button:focus-visible {
  background: var(--ink-soft);
  color: var(--text);
  outline: 0;
}

.sidebar-account-menu button.danger {
  color: var(--danger);
}

.sidebar-account-menu button.danger:hover,
.sidebar-account-menu button.danger:focus-visible {
  background: var(--danger-soft);
}

.account-settings-dialog {
  width: min(940px, calc(100vw - 32px));
  max-height: min(90dvh, 790px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--text) 18%, transparent);
}

.account-settings-dialog::backdrop {
  background: var(--overlay);
}

.account-settings-modal {
  display: grid;
  height: auto;
  max-height: min(90dvh, 790px);
  grid-template-rows: auto auto minmax(0, auto);
  overflow: hidden;
}

.account-settings-header {
  position: relative;
  border-bottom: 1px solid var(--line);
  padding: 17px 64px 15px 22px;
}

.account-back-button {
  min-height: auto;
  margin: 0 0 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 0;
}

.account-back-button:hover {
  color: var(--accent);
}

.account-settings-close {
  position: absolute;
  top: 16px;
  right: 18px;
  display: inline-grid;
  width: 36px;
  height: 36px;
  min-height: 0;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.account-settings-close:hover,
.account-settings-close:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.account-settings-close svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.account-settings-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.18;
  letter-spacing: -0.02em;
}

.account-settings-header p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.account-settings-tabs {
  display: flex;
  gap: 3px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-soft) 72%, var(--surface));
  padding: 0 18px;
  scrollbar-width: thin;
}

.account-settings-tabs button {
  flex: 0 0 auto;
  min-height: 36px;
  margin: 6px 0;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 720;
  padding: 0 11px;
}

.account-settings-tabs button.active {
  border-color: var(--accent-line);
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--accent-strong);
}

.account-settings-tabs button:hover,
.account-settings-tabs button:focus-visible {
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: 0;
}

.account-settings-body {
  display: grid;
  min-height: 0;
  max-height: calc(min(90dvh, 790px) - 160px);
  align-content: start;
  gap: 10px;
  overflow-y: auto;
  background: color-mix(in srgb, var(--surface-soft) 46%, var(--surface));
  padding: 18px 22px 22px;
  scrollbar-color: color-mix(in srgb, var(--accent) 36%, var(--line)) transparent;
  scrollbar-width: thin;
}

.account-settings-body::-webkit-scrollbar {
  width: 8px;
}

.account-settings-body::-webkit-scrollbar-track {
  background: transparent;
}

.account-settings-body::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 34%, var(--line));
  background-clip: content-box;
}

.account-settings-section {
  display: grid;
  align-content: start;
  gap: 10px;
}

.account-global-status {
  position: static;
  display: inline-flex;
  flex: 0 1 auto;
  width: fit-content;
  max-width: min(100%, 430px);
  min-height: 0;
  align-items: center;
  gap: 7px;
  margin: 0 auto 0 0;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 92%, var(--surface));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--text) 7%, transparent);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.25;
  padding: 7px 11px 7px 8px;
}

.account-global-status::before {
  display: inline-grid;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  content: "✓";
  font-size: 11px;
  font-weight: 900;
}

.account-global-status.error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.account-global-status.error::before {
  background: var(--danger);
  content: "!";
}

.account-settings-section[data-account-section="subscription"] {
  align-content: start;
}

.account-section-header {
  display: grid;
  gap: 3px;
  padding: 2px 2px 6px;
}

.account-section-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 18px;
  line-height: 1.2;
  letter-spacing: -0.015em;
}

.account-section-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.account-settings-row {
  display: grid;
  min-height: 74px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  padding: 14px 16px;
}

.account-settings-row > * {
  min-width: 0;
}

.account-settings-row p,
.account-profile-name,
.account-profile-email {
  overflow-wrap: anywhere;
}

.account-settings-dialog .primary-action,
.account-settings-dialog .secondary-action {
  white-space: nowrap;
}

.account-settings-row h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 780;
  line-height: 1.3;
}

.account-settings-row p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.42;
}

.account-theme-row {
  grid-template-columns: minmax(220px, 1fr) minmax(0, auto);
}

.account-settings-row.profile-row {
  grid-template-columns: minmax(180px, 1fr) minmax(180px, 0.85fr) auto;
}

.account-action-row {
  grid-template-columns: minmax(0, 1fr) auto auto;
}

.account-theme-switcher {
  justify-self: end;
  width: fit-content;
  max-width: 100%;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-soft);
  padding: 5px 6px;
}

.account-theme-switcher .theme-choice {
  width: 32px;
  height: 32px;
  min-height: 0;
  flex: 0 0 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0;
}

.account-theme-switcher .theme-choice svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
}

.account-theme-switcher .theme-choice:hover,
.account-theme-switcher .theme-choice:focus-visible {
  transform: none;
}

.account-preference-row {
  grid-template-columns: minmax(240px, 1fr) minmax(280px, 360px);
}

.account-settings-select {
  width: 100%;
  min-height: 40px;
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 650;
  padding: 0 36px 0 11px;
}

.account-settings-select:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: 0;
}

.account-segmented-control {
  display: flex;
  justify-self: end;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-soft);
}

.account-segmented-control button {
  min-height: 38px;
  border: 0;
  border-right: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 750;
  padding: 0 13px;
}

.account-segmented-control button:last-child {
  border-right: 0;
}

.account-segmented-control button.active,
.account-segmented-control button[aria-checked="true"] {
  background: var(--accent-soft);
  color: var(--accent);
}

.account-switch-field {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  gap: 10px;
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 750;
}

.account-switch-field input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.account-switch-field span {
  position: relative;
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  padding-left: 48px;
}

.account-switch-field span::before {
  position: absolute;
  left: 0;
  width: 38px;
  height: 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  content: "";
  transition: border-color 160ms ease, background 160ms ease;
}

.account-switch-field span::after {
  position: absolute;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--muted);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--text) 20%, transparent);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.account-switch-field input:checked + span::before {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.account-switch-field input:checked + span::after {
  background: var(--accent);
  transform: translateX(16px);
}

.account-switch-field input:focus-visible + span::before {
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.account-section-actions {
  display: flex;
  min-height: 38px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding-top: 2px;
}

.account-section-actions .form-status {
  margin: 0;
}

.account-settings-dialog :is(.primary-action, .secondary-action) {
  min-height: 38px;
  border-radius: 9px;
  font-size: 13px;
  padding: 0 14px;
}

.account-settings-dialog :is(.primary-action, .secondary-action):focus-visible {
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: 0;
}

html[data-text-size="large"] {
  font-size: 106.25%;
}

html[data-text-size="extra-large"] {
  font-size: 112.5%;
}

html[data-reduce-motion="true"] *,
html[data-reduce-motion="true"] *::before,
html[data-reduce-motion="true"] *::after {
  scroll-behavior: auto !important;
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
}

@media (max-width: 720px) {
  .account-settings-dialog {
    width: calc(100vw - 12px);
    max-height: calc(100dvh - 12px);
    border-radius: 14px;
  }

  .account-settings-modal {
    height: auto;
    max-height: calc(100dvh - 12px);
  }

  .account-settings-header {
    padding: 14px 54px 12px 16px;
  }

  .account-settings-header h2 {
    font-size: 21px;
  }

  .account-settings-header p {
    max-width: 290px;
    font-size: 12px;
  }

  .account-settings-tabs {
    gap: 2px;
    padding: 0 10px;
  }

  .account-settings-tabs button {
    min-height: 34px;
    margin-block: 5px;
    font-size: 12px;
    padding-inline: 10px;
  }

  .account-settings-body {
    gap: 9px;
    padding: 14px 14px 18px;
  }

  .account-global-status {
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin: 0;
    border-radius: 10px;
  }

  .account-section-header {
    padding: 1px 2px 5px;
  }

  .account-section-header h3 {
    font-size: 17px;
  }

  .account-section-header p {
    font-size: 12px;
  }

  .account-settings-row:not(.profile-row) {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    min-height: 0;
    padding: 14px;
  }

  .account-settings-row:not(.profile-row) > .account-pill,
  .account-settings-row:not(.profile-row) > button,
  .account-settings-row:not(.profile-row) > strong {
    justify-self: start;
  }

  .account-settings-section[data-account-section="subscription"] .account-settings-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
    min-height: 0;
    padding: 16px;
  }

  .account-settings-section[data-account-section="subscription"] .account-settings-row > * {
    min-width: 0;
  }

  .account-settings-section[data-account-section="subscription"] .account-settings-metric,
  .account-settings-section[data-account-section="subscription"] .account-pill {
    justify-self: start;
  }

  .account-settings-section[data-account-section="subscription"] .account-settings-metric {
    font-size: 18px;
    line-height: 1.2;
  }

  .account-settings-section[data-account-section="subscription"] .account-pill {
    width: fit-content;
    max-width: 100%;
    line-height: 1.25;
    white-space: normal;
  }

  .account-settings-row.danger-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
    padding: 16px;
  }

  .account-settings-row.danger-row .secondary-action.danger {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    justify-self: stretch;
    white-space: nowrap;
  }

  .account-theme-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .account-theme-switcher {
    justify-self: start;
    width: 100%;
    justify-content: flex-start;
  }

  .account-preference-row {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 14px;
  }

  .account-settings-select,
  .account-segmented-control,
  .account-switch-field {
    width: 100%;
    justify-self: stretch;
  }

  .account-segmented-control button {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 8px;
  }

  .account-switch-field {
    min-height: 38px;
  }

  .account-settings-row.profile-row {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
    column-gap: 10px;
    row-gap: 12px;
    padding: 14px;
  }

  .account-settings-row.profile-row > div:first-child {
    grid-column: 1 / -1;
  }

  .account-settings-row.profile-row .account-profile-summary {
    grid-column: 1;
    min-width: 0;
    gap: 10px;
  }

  .account-settings-row.profile-row .account-settings-avatar {
    width: 42px;
    height: 42px;
  }

  .account-settings-row.profile-row #toggle-profile-edit {
    grid-column: 2;
    min-width: max-content;
    min-height: 38px;
    justify-self: end;
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent);
    padding: 0 13px;
    white-space: nowrap;
  }

  .account-settings-row.profile-row #toggle-profile-edit:hover,
  .account-settings-row.profile-row #toggle-profile-edit:focus-visible {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
    color: var(--accent-strong);
  }

  .account-section-actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
  }

  .account-section-actions .secondary-action {
    width: 100%;
  }
}

.account-settings-metric {
  color: var(--accent);
  font-size: 20px;
  font-weight: 850;
  white-space: nowrap;
}

.account-profile-summary {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.account-profile-summary strong {
  overflow: hidden;
  color: var(--text);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-settings-avatar,
.private-user-avatar {
  display: inline-grid;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  place-items: center;
  overflow: hidden;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 900;
}

.private-user-avatar {
  width: 42px;
  height: 42px;
}

.account-profile-form {
  display: grid;
  gap: 14px;
  border: 1px solid var(--accent-line);
  border-radius: 10px;
  background: var(--accent-soft);
  padding: 16px;
}

.account-profile-form label {
  display: grid;
  gap: 7px;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.account-profile-form input[type="text"] {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0 11px;
}

.avatar-edit-actions,
.account-profile-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.avatar-edit-actions small {
  color: var(--muted);
  font-size: 12px;
}

.account-personal-information {
  display: grid;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft));
  box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 4%, transparent);
  padding: 18px;
}

.account-personal-information-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 18px;
}

.account-personal-information-header h3 {
  margin: 0;
  color: var(--text);
  font-size: 15px;
  line-height: 1.3;
}

.account-personal-information-header p {
  max-width: 62ch;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
}

.account-personal-information-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px 18px;
}

.account-personal-information-grid label {
  display: grid;
  min-width: 0;
  align-content: start;
  gap: 7px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 760;
  line-height: 1.35;
}

.account-personal-information-grid label > span small {
  color: var(--muted);
  font: inherit;
  font-weight: 500;
}

.account-personal-information-grid :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 500;
  padding: 0 11px;
}

.account-personal-information-grid select {
  cursor: pointer;
}

.account-personal-information-grid input[readonly] {
  background: color-mix(in srgb, var(--surface-soft) 70%, var(--surface));
  color: var(--muted);
  cursor: default;
}

.account-personal-information-grid :is(input, select):focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: 0;
}

.account-personal-information-grid label > small {
  margin-top: -1px;
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
}

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

.account-personal-information-status {
  margin: -2px 0 0;
}

.account-personal-information-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.account-pill {
  justify-self: end;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 4px 8px;
}

.danger-row {
  border-color: var(--danger-line);
}

.secondary-action.danger {
  border-color: var(--danger-line);
  color: var(--danger);
}

.secondary-action.danger:hover {
  background: var(--danger-soft);
}

@media (max-width: 720px) {
  .account-personal-information {
    gap: 16px;
    padding: 15px 14px;
  }

  .account-personal-information-header {
    gap: 12px;
  }

  .account-personal-information-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .account-personal-field-wide {
    grid-column: auto;
  }

  .account-personal-information-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .account-personal-information-actions :is(.primary-action, .secondary-action) {
    width: 100%;
  }
}

.private-sidebar .sidebar-actions {
  display: grid;
  gap: 8px;
  margin-top: auto;
}

.private-sidebar .sidebar-actions .private-user {
  margin: 4px 0 0;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.birth-summary {
  position: relative;
  z-index: 5;
  display: grid;
  gap: 10px;
  margin-top: 18px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.birth-summary strong {
  color: var(--text);
  font-size: 16px;
  font-weight: 620;
}

.birth-active-card {
  display: grid;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.birth-active-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.birth-active-identity {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.birth-active-name {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
}

.birth-active-name strong {
  min-width: 0;
  flex: 0 1 auto;
}

.birth-active-eyebrow {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.birth-active-head strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.birth-active-meta {
  display: grid;
  gap: 3px;
}

.birth-active-meta span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.birth-active-context {
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 9px;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: 12.5px;
  font-weight: 650;
  line-height: 1.4;
}

.person-switch-button {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 620;
}

.birth-active-head .person-switch-button {
  flex: 0 0 auto;
  min-height: 30px;
  padding-right: 9px;
  padding-left: 9px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  font-size: 12px;
  white-space: nowrap;
}

.person-switch-button:hover,
.person-switch-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
}

.sidebar-tool-button {
  display: inline-flex;
  min-height: 40px;
  width: min(100%, 255px);
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  margin-right: auto;
  margin-left: auto;
  padding: 0 14px;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 620;
  text-align: center;
  transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease;
}

.sidebar-tool-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.sidebar-tool-button:hover,
.sidebar-tool-button:focus-visible {
  background: var(--accent-soft);
  border-color: var(--accent);
  outline: 0;
}

.sidebar-tool-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.sidebar-tool-button:disabled:hover {
  background: var(--surface);
  border-color: var(--accent-line);
}

.sidebar-ai-actions {
  display: grid;
  gap: 10px;
}

#chat-screen > .sidebar .sidebar-ai-actions {
  margin-top: auto;
  padding-top: clamp(28px, 8vh, 88px);
}

.chat-modal-sidebar .sidebar-ai-actions {
  margin-top: 12px;
}

.sidebar-ai-actions .sidebar-tool-button {
  margin-top: 0;
}

.birth-summary-context {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 6px;
  overflow: visible;
}

.inline-info,
.chart-type-help {
  position: relative;
  display: inline-flex;
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--accent);
  cursor: help;
  font-size: 0;
  font-weight: 650;
  line-height: 1;
}

.inline-info::before,
.chart-type-help::before {
  content: "i";
  display: block;
  color: currentColor;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-transform: none;
}

.inline-info [role="tooltip"],
.chart-type-help [role="tooltip"] {
  position: absolute;
  z-index: 120;
  left: 50%;
  bottom: calc(100% + 9px);
  width: min(260px, 72vw);
  transform: translateX(-50%) translateY(4px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
  opacity: 0;
  padding: 10px 12px;
  pointer-events: none;
  text-transform: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.birth-summary .inline-info {
  display: inline-flex !important;
  position: static;
}

.birth-summary .inline-info [role="tooltip"] {
  top: calc(100% + 8px);
  bottom: auto;
  left: 0;
  right: auto;
  width: min(250px, calc(100vw - 40px));
  transform: translateY(-4px);
}

.birth-summary .inline-info:hover [role="tooltip"],
.birth-summary .inline-info:focus-visible [role="tooltip"] {
  opacity: 1;
  transform: translateY(0);
}

.chart-type-help:hover [role="tooltip"],
.chart-type-help:focus-visible [role="tooltip"] {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.inline-info:hover [role="tooltip"],
.inline-info:focus-visible [role="tooltip"] {
  opacity: 1;
}

.chart-data-button {
  border: 1px solid var(--line);
  color: var(--accent);
}

.chart-data-button:hover {
  background: var(--surface-soft);
  border-color: var(--accent-line);
}

.chart-recalculate-button {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--surface) 90%, var(--accent-soft));
  color: color-mix(in srgb, var(--accent) 84%, var(--text));
}

.chart-recalculate-button svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.75;
}

.chart-recalculate-button:hover,
.chart-recalculate-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
}

.chat-credit-summary {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-soft);
  padding: 10px 12px;
}

.chat-credit-summary span,
.chat-credit-summary small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
}

.chat-credit-summary strong {
  color: var(--accent);
  font-size: 15px;
}

.chat-credit-summary.low {
  border-color: var(--warning);
}

.credit-info-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  margin-top: 8px;
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 12px;
  font-weight: 620;
  text-align: left;
}

.credit-info-button:hover {
  color: var(--accent);
}

.credit-info-icon {
  display: inline-flex;
  width: 15px;
  height: 15px;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.chat-folders-panel,
.chat-history-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.chat-folders-panel {
  flex: 0 0 auto;
}

.chat-history-panel {
  flex: 1 1 auto;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 160px;
  overflow: hidden;
}

.chat-section-head,
.chat-history-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 590;
  padding: 0;
  text-align: left;
}

.chat-history-head {
  cursor: pointer;
}

.chat-history-head::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border: solid var(--muted);
  border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg) translateY(-1px);
  transition: transform 0.16s ease, border-color 0.16s ease;
}

.chat-history-panel.is-collapsed .chat-history-head::before {
  transform: rotate(-45deg);
}

.chat-history-head span {
  flex: 1 1 auto;
}

.chat-history-head small,
.chat-section-head small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 560;
}

.chat-section-action {
  display: inline-grid;
  width: 24px;
  height: 24px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  padding: 0;
}

.chat-section-action:hover,
.chat-section-action:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.chat-folders-list,
.chat-history-list {
  display: grid;
  align-content: start;
  gap: 2px;
  min-height: 0;
  max-height: none;
  margin: 0;
  padding: 0 3px 0 0;
  overflow-y: auto;
  list-style: none;
  scrollbar-width: thin;
}

.chat-folders-list {
  overflow: visible;
}

.chat-folder-row {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 8px;
}

.chat-folder-row:hover,
.chat-folder-row:focus-within,
.chat-folder-row.active {
  background: var(--ink-soft);
}

.chat-folder-item {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 34px 6px 8px;
  text-align: left;
}

.chat-folder-item span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-folder-item svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.chat-folder-item small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 520;
}

.chat-folder-item:hover,
.chat-folder-item:focus-visible,
.chat-folder-item.active {
  color: var(--text);
  outline: 0;
}

.chat-folder-menu-button {
  position: absolute;
  top: 3px;
  right: 4px;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  padding: 0 0 4px;
}

.chat-folder-row:hover .chat-folder-menu-button,
.chat-folder-row:focus-within .chat-folder-menu-button,
.chat-folder-menu-button:focus-visible {
  opacity: 1;
}

.chat-folder-menu-button:hover,
.chat-folder-menu-button:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.chat-folder-menu {
  position: absolute;
  z-index: 42;
  top: 30px;
  right: 4px;
  display: grid;
  min-width: 156px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 6px;
}

.chat-folder-menu button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--danger);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 6px 8px;
  text-align: left;
}

.chat-folder-menu button:hover,
.chat-folder-menu button:focus-visible {
  background: var(--danger-soft);
  outline: 0;
}

.chat-history-item {
  position: relative;
  display: block;
  border: 0;
  border-radius: 8px;
  background: transparent;
  padding: 0;
}

.chat-history-item:hover,
.chat-history-item.active,
.chat-history-item:focus-within {
  background: var(--ink-soft);
}

.chat-history-load {
  display: grid;
  gap: 3px;
  width: 100%;
  min-height: 58px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 8px 34px 8px 8px;
  text-align: left;
}

.chat-history-load span {
  overflow: hidden;
  font-size: 13px;
  font-weight: 520;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-load em {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-load small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
}

.chat-history-item.is-pinned .chat-history-load span::before {
  content: "Fijado · ";
  color: var(--accent);
  font-weight: 800;
}

.chat-history-menu-button {
  position: absolute;
  top: 8px;
  right: 6px;
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 16px;
  font-weight: 900;
  line-height: 1;
  opacity: 0;
  padding: 0 0 4px;
}

.chat-history-item:hover .chat-history-menu-button,
.chat-history-menu-button:focus-visible,
.chat-history-item:focus-within .chat-history-menu-button {
  opacity: 1;
}

.chat-history-menu-button:hover,
.chat-history-menu-button:focus-visible {
  background: var(--surface);
  color: var(--text);
  outline: 0;
}

.chat-history-menu,
.chat-history-move-panel {
  position: absolute;
  z-index: 40;
  top: 34px;
  right: 6px;
  display: grid;
  min-width: 170px;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 6px;
}

.chat-history-move-panel {
  z-index: 45;
  top: 74px;
  right: 12px;
  min-width: 210px;
}

.chat-history-menu button,
.chat-history-move-panel button {
  min-height: 30px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 8px;
  text-align: left;
}

.chat-history-move-panel button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chat-history-move-panel button span {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-history-move-panel svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.chat-history-move-panel p {
  margin: 2px 6px 5px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.chat-history-move-panel b {
  color: var(--accent);
  font-size: 13px;
  line-height: 1;
}

.chat-history-move-panel i {
  display: block;
  height: 1px;
  margin: 5px 3px;
  background: var(--line);
}

.chat-move-empty {
  display: block;
  padding: 6px 8px;
  color: var(--muted);
  font-size: 12px;
}

.chat-create-folder-option {
  color: var(--accent) !important;
}

.chat-history-menu button:hover,
.chat-history-menu button:focus-visible,
.chat-history-move-panel button:hover,
.chat-history-move-panel button:focus-visible {
  background: var(--ink-soft);
  color: var(--text);
  outline: 0;
}

.chat-history-menu button.danger {
  color: var(--danger);
}

.chat-history-empty {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

.meta {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  padding: 0 0 5px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1;
}

.composer-connection {
  position: static;
  display: inline-grid;
  width: 12px;
  min-width: 12px;
  height: 46px;
  place-items: center;
  padding: 0;
  transform: none;
  pointer-events: none;
}

.composer-connection #connection-text {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.dot {
  width: 7px;
  height: 7px;
  border-radius: 99px;
  background: var(--success);
}

.dot.busy {
  background: var(--warning);
}

.dot.error {
  background: var(--danger);
}

.chat-panel {
  --chat-lane-padding: max(24px, calc((100% - 1120px) / 2));
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto auto;
  min-width: 0;
  height: 100vh;
}

.chat-chart-context-tools {
  display: grid;
  grid-template-columns: minmax(180px, 240px) auto auto minmax(0, 1fr);
  gap: 10px;
  align-items: end;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 14px var(--chat-lane-padding) 12px;
}

.chat-chart-context-tools label {
  display: grid;
  gap: 5px;
  min-width: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chat-chart-context-tools select {
  min-height: 38px;
}

.chat-chart-context-help {
  align-self: end;
  margin-bottom: 10px;
}

.chat-chart-context-help [role="tooltip"] {
  top: calc(100% + 10px);
  bottom: auto;
  left: 50%;
  right: auto;
  width: min(300px, calc(100vw - 56px));
  transform: translateX(-50%) translateY(-4px);
}

.chat-chart-context-help:hover [role="tooltip"],
.chat-chart-context-help:focus-visible [role="tooltip"] {
  transform: translateX(-50%) translateY(0);
}

.chat-chart-context-tools .chart-context-button {
  order: 0;
  align-self: end;
  justify-content: center;
  white-space: nowrap;
}

.chat-chart-context-status {
  align-self: center;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.chat-chart-context-status.error {
  color: var(--danger);
}

.chart-main-panel {
  min-width: 0;
  height: 100vh;
  overflow: hidden;
  background: var(--surface-soft);
}

.chart-main-panel .chart-wheel-inline {
  grid-template-rows: minmax(0, 1fr);
  height: 100vh;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.chart-wheel-inline .chart-wheel-header {
  display: none;
}

.chat-panel-modal {
  width: min(980px, 94vw);
  height: min(86vh, 820px);
  min-height: 520px;
  overflow: hidden;
  border-radius: 8px;
  background: var(--surface);
}

.chat-modal-close {
  position: absolute;
  z-index: 40;
  top: 14px;
  right: 14px;
}

@media (max-width: 720px) {
  .chat-chart-context-tools {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    padding-right: 16px;
    padding-left: 16px;
  }

  .chat-panel-modal {
    width: 100vw;
    height: 100dvh;
    min-height: 0;
    border-radius: 0;
  }

  .chat-ia-dialog {
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }

  .chat-ia-dialog[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat-ia-dialog .chat-modal-sidebar {
    display: none;
  }
}

.empty-chat-hero {
  position: absolute;
  z-index: 4;
  top: calc(50% - 170px);
  left: 50%;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.empty-chat-hero img {
  display: block;
  width: clamp(88px, 10vw, 126px);
  height: auto;
}

.shell.chat-is-empty .messages {
  padding: 0;
}

.shell.chat-is-empty .message.system {
  display: none;
}

.shell.chat-is-empty .status {
  position: absolute;
  z-index: 6;
  left: 50%;
  top: calc(50% + 82px);
  width: min(860px, calc(100% - 48px));
  margin: 0;
  transform: translateX(-50%);
  text-align: center;
}

.chat-panel.is-context-drag-over::after {
  content: "Suelta el archivo para adjuntarlo como contexto";
  position: absolute;
  z-index: 25;
  inset: 18px;
  display: grid;
  place-items: center;
  border: 1.5px dashed var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
  color: var(--accent);
  font-size: 15px;
  font-weight: 900;
  pointer-events: none;
}

.messages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  padding: 32px var(--chat-lane-padding);
}

.message {
  max-width: 780px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.55;
}

.message.user {
  align-self: flex-end;
  border-radius: 8px 8px 2px 8px;
  background: var(--user);
  color: var(--on-accent);
  padding: 12px 14px;
}

.message.assistant {
  align-self: flex-start;
  border: 1px solid var(--line);
  border-radius: 8px 8px 8px 2px;
  background: var(--ink-soft);
  padding: 14px 16px;
  white-space: normal;
}

.message-content {
  white-space: pre-wrap;
}

.message-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  padding-top: 8px;
}

.message-action {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 0;
}

.message-action svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.message-action .thumb-down {
  transform: rotate(180deg);
  transform-origin: center;
}

.message-action:hover,
.message-action:focus-visible,
.message-action.is-selected,
.message-action.is-copied {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.message.system {
  align-self: center;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}

.message.error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
  color: var(--danger);
}

.status {
  margin: 0 var(--chat-lane-padding) 10px;
  color: var(--muted);
  font-size: 14px;
}

.prompt-suggestions {
  display: none;
  grid-auto-columns: minmax(220px, 280px);
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 12px var(--chat-lane-padding);
  scrollbar-width: thin;
}

.prompt-suggestions button {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
  overflow-wrap: anywhere;
  padding: 9px 11px;
  text-align: left;
}

.prompt-suggestions button:hover,
.prompt-suggestions button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
}

.composer {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 168px 12px 46px;
  gap: 10px;
  align-items: end;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 16px var(--chat-lane-padding);
}

.shell.chat-is-empty .composer {
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100% - 48px));
  grid-template-columns: 38px minmax(0, 1fr) 168px 12px 42px;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  border-radius: 16px;
  background: var(--surface);
  box-shadow: 0 18px 54px color-mix(in srgb, var(--shadow-color) 8%, transparent);
  padding: 8px;
  transform: translate(-50%, -3%);
}

.shell.chat-is-empty .composer textarea {
  min-height: 48px;
  border-color: transparent;
  background: transparent;
  font-size: 15px;
}

.shell.chat-is-empty .composer textarea:focus {
  border-color: transparent;
  box-shadow: none;
}

.shell.chat-is-empty .context-clip-button,
.shell.chat-is-empty .model-control select,
.shell.chat-is-empty .composer-connection,
.shell.chat-is-empty .composer > #send-button {
  align-self: end;
}

.shell.chat-is-empty .context-clip-button {
  width: 38px;
  height: 42px;
  min-height: 42px !important;
  border-color: transparent;
  background: transparent !important;
}

.shell.chat-is-empty .context-clip-button:hover,
.shell.chat-is-empty .context-clip-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft) !important;
}

.shell.chat-is-empty .model-control {
  align-self: end;
  gap: 0;
}

.shell.chat-is-empty .model-control label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.shell.chat-is-empty .model-control select {
  min-height: 42px;
  border-radius: 10px;
  background: var(--surface-soft);
}

.shell.chat-is-empty .composer > #send-button {
  width: 42px;
  min-width: 42px;
  height: 42px;
  min-height: 42px;
  border-radius: 999px;
}

.composer-input-area {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.composer-input-wrap {
  position: relative;
  display: grid;
  min-width: 0;
}

.composer-input-wrap textarea {
  min-height: 46px;
  padding-right: 52px;
}

.voice-dictation-button {
  position: absolute;
  right: 7px;
  bottom: 7px;
  display: inline-grid;
  width: 32px;
  height: 32px;
  min-height: 32px !important;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent !important;
  color: var(--muted) !important;
  cursor: pointer;
  padding: 0;
}

.voice-dictation-button svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.voice-dictation-button:hover,
.voice-dictation-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  outline: 0;
}

.voice-dictation-button.is-listening {
  border-color: var(--danger-line);
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  animation: voicePulse 1.3s ease-in-out infinite;
}

.voice-dictation-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

@keyframes voicePulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--danger) 22%, transparent);
  }
  50% {
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 0%, transparent);
  }
}

.model-control {
  display: grid;
  align-self: end;
  gap: 0;
}

.model-control label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.model-control select {
  min-height: 44px;
  padding: 0 10px;
}

.composer button:disabled {
  cursor: wait;
  opacity: 0.65;
}

.composer .voice-dictation-button:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}

.chart-data-dialog {
  width: min(980px, calc(100vw - 32px));
  max-height: min(90vh, 860px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.person-switch-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(82vh, 680px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-strong);
}

.folder-dialog {
  width: min(460px, calc(100vw - 32px));
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

.folder-dialog::backdrop {
  background: color-mix(in srgb, #111827 42%, transparent);
  backdrop-filter: blur(2px);
}

.folder-modal {
  display: grid;
  gap: 16px;
  padding: 20px;
}

.folder-modal header,
.folder-modal footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.folder-modal footer {
  align-items: center;
  justify-content: flex-end;
  padding-top: 2px;
}

.folder-modal h2 {
  margin: 2px 0 0;
  color: var(--text);
  font-size: 22px;
  line-height: 1.1;
}

.folder-modal p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.folder-modal .field {
  display: grid;
  gap: 7px;
}

.folder-modal .field span {
  color: var(--text);
  font-size: 12px;
  font-weight: 850;
}

.folder-warning {
  border: 1px solid var(--danger-line);
  border-radius: 8px;
  background: var(--danger-soft);
  color: var(--danger);
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
  padding: 11px 12px;
}

.folder-modal-danger footer .danger {
  min-height: 40px;
}

.legal-dialog {
  width: min(820px, calc(100vw - 32px));
  height: min(86vh, 820px);
  max-height: min(86vh, 820px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-strong);
}

.billing-info-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: min(84vh, 760px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-strong);
}

.chart-wheel-dialog {
  width: 95vw;
  height: 95vh;
  max-width: 95vw;
  max-height: 95vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface-soft);
  box-shadow: var(--shadow-strong);
}

.chat-ia-dialog {
  width: min(1320px, 98vw);
  height: min(94vh, 980px);
  max-width: 98vw;
  max-height: 94vh;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow-strong);
}

.chat-ia-dialog[open] {
  display: grid;
  grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
}

.chat-ia-dialog .sidebar {
  width: auto;
  height: 100%;
  min-height: 0;
  padding-top: 22px;
  padding-bottom: 22px;
  border-right: 1px solid var(--line);
  opacity: 1;
  pointer-events: auto;
}

.chat-ia-dialog .chat-panel-modal {
  width: auto;
  height: 100%;
  min-height: 0;
  border-radius: 0;
}

@media (max-width: 720px) {
  .chat-ia-dialog[open] {
    grid-template-columns: minmax(0, 1fr);
  }

  .chat-ia-dialog .chat-modal-sidebar {
    display: none;
  }
}

.person-switch-dialog::backdrop,
.legal-dialog::backdrop,
.billing-info-dialog::backdrop,
.daily-horoscope-dialog::backdrop,
.chat-ia-dialog::backdrop,
.chart-wheel-dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(4px);
}

.person-switch-modal,
.legal-modal,
.billing-info-modal,
.chart-wheel-modal {
  display: grid;
  grid-template-rows: auto minmax(220px, 1fr);
  height: 100%;
  min-height: 0;
  max-height: none;
}

.person-switch-modal {
  grid-template-rows: auto minmax(0, 1fr);
  max-height: min(82vh, 680px);
}

.person-switch-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 18px 20px;
}

.person-switch-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}

.person-switch-body {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 12px;
  min-height: 0;
  padding: 18px 20px 20px;
}

.person-switch-body input {
  min-height: 42px;
}

.person-switch-list {
  display: grid;
  gap: 8px;
  min-height: 0;
  max-height: 420px;
  margin: 0;
  overflow: auto;
  padding: 0;
  list-style: none;
}

.person-switch-item {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  padding: 11px 12px;
  text-align: left;
}

.person-switch-item:hover,
.person-switch-item:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  outline: 0;
}

.person-switch-item.active {
  border-color: var(--accent-line);
  background: var(--surface-soft);
  cursor: default;
}

.person-switch-item b,
.person-switch-item small {
  display: block;
}

.person-switch-item small {
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.3;
}

.person-switch-item em {
  color: var(--accent);
  font-style: normal;
  font-size: 12px;
  font-weight: 900;
}

.person-switch-empty {
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  padding: 14px;
}

.chart-wheel-modal {
  position: relative;
  grid-template-rows: auto minmax(0, 1fr);
  max-height: none;
}

.legal-header,
.chart-wheel-header {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--accent-line);
  background: var(--surface);
  padding: 16px 26px;
}

.chart-wheel-heading {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 26px;
}

.chart-wheel-title-block {
  flex: 0 0 auto;
  min-width: 220px;
}

.legal-header h2,
.chart-wheel-header h2 {
  margin: 0;
  color: var(--text);
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: 0;
}

.chart-wheel-controls {
  position: relative;
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  flex: 1 1 620px;
  gap: 10px 12px;
  background: transparent;
  padding: 0;
}

.chart-wheel-controls label {
  display: grid;
  gap: 4px;
  min-width: 190px;
}

.chart-context-button {
  align-self: end;
  order: 90;
  min-height: 36px;
  padding: 7px 16px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.chart-export-actions {
  display: inline-flex;
  align-self: end;
  order: 80;
  gap: 6px;
}

.chart-wheel-controls > .chart-export-actions {
  display: none;
}

.chart-export-button {
  display: inline-grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  padding: 0;
}

.chart-export-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.chart-export-button:hover,
.chart-export-button:focus-visible {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

.chart-export-button:disabled {
  cursor: wait;
  opacity: 0.68;
}

.chart-context-button:hover,
.chart-context-button:focus-visible {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
  color: var(--on-accent);
  outline: 0;
}

.chart-context-button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.chart-wheel-controls span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
}

.chart-wheel-controls .chart-view-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-width: 0;
}

.chart-wheel-controls .chart-view-engine {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--accent) 78%, var(--muted));
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.chart-wheel-controls .chart-view-engine::before {
  content: "\00b7";
  color: color-mix(in srgb, var(--accent) 50%, var(--line));
}

.chart-wheel-controls .chart-type-help {
  align-self: end;
  margin-bottom: 8px;
  color: var(--accent);
  text-transform: none;
}

.chart-wheel-controls .chart-type-help [role="tooltip"] {
  top: calc(100% + 10px);
  bottom: auto;
  left: auto;
  right: 0;
  width: min(300px, calc(100vw - 56px));
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 450;
  line-height: 1.35;
  text-transform: none;
  transform: translateY(-4px);
}

.chart-wheel-controls .chart-type-help:hover [role="tooltip"],
.chart-wheel-controls .chart-type-help:focus-visible [role="tooltip"] {
  transform: translateY(0);
}

.chart-wheel-controls select,
.chart-wheel-controls input {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.chart-wheel-status {
  display: inline-flex;
  align-self: end;
  order: 100;
  min-height: 30px;
  max-width: 430px;
  align-items: center;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--muted);
  font-size: 12px;
  line-height: 1.25;
  padding: 5px 10px;
}

.chart-wheel-status:empty {
  display: none;
}

.chart-wheel-stage {
  min-height: 0;
  overflow: auto;
  padding: 6px 20px 12px;
}

.chart-wheel-empty {
  display: grid;
  min-height: 100%;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: var(--muted);
  text-align: center;
}

.chart-wheel-empty h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
}

.chart-wheel-empty p {
  margin: 0;
}

.chart-wheel-stage.is-multiple-chart {
  display: block;
  overflow: auto;
  padding: 28px 0 0;
}

.chart-wheel-stage.is-nodal-chart {
  display: block;
  overflow: auto;
  padding: 6px 20px 20px;
}

.chart-wheel-stage.is-full-chart {
  display: grid;
  overflow: hidden;
}

.chart-wheel-stage.is-full-chart.has-exterior-chart-labels {
  overflow: auto;
  padding-bottom: 28px;
}

.chart-wheel-stage.is-full-chart.is-nodal-chart {
  display: block;
  overflow: auto;
}

.chart-wheel-stage.is-full-chart .chart-wheel-workspace,
.chart-wheel-stage.is-full-chart .chart-wheel-main,
.chart-wheel-stage.is-full-chart .chart-wheel-card {
  min-height: 0;
  height: 100%;
}

.chart-wheel-stage.is-nodal-chart .chart-wheel-workspace,
.chart-wheel-stage.is-nodal-chart .chart-wheel-main,
.chart-wheel-stage.is-nodal-chart .chart-wheel-card {
  height: auto;
  min-height: 0;
}

.chart-wheel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(260px, 1fr));
  gap: 14px;
}

.chart-wheel-workspace {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 8px;
  height: 100%;
  min-height: 0;
}

.chart-wheel-workspace-clean {
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
}

.chart-wheel-workspace-multiple {
  display: block;
  min-width: 1320px;
  min-height: 940px;
  height: max(100%, 940px);
  background: var(--surface-soft);
}

.chart-wheel-main {
  display: grid;
  place-items: center;
  height: 100%;
  min-height: 0;
}

.chart-wheel-workspace-multiple .chart-wheel-main {
  display: block;
}

@media (max-width: 1679px) {
  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .chart-wheel-main {
    padding-right: 0;
    padding-left: 0;
  }
}

.chart-wheel-triple {
  position: relative;
  width: 100%;
  min-width: 1320px;
  height: 100%;
  min-height: 940px;
}

.chart-triple-slot {
  position: absolute;
  width: clamp(560px, 34vw, 760px);
}

.chart-triple-slot-top {
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
}

.chart-triple-slot-left {
  top: 310px;
  left: clamp(22px, 5vw, 120px);
}

.chart-triple-slot-right {
  top: 310px;
  right: clamp(22px, 5vw, 120px);
}

@media (min-width: 1440px) {
  .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    min-height: 1080px;
    height: max(100%, 1080px);
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-left {
    top: 350px;
    left: clamp(8px, 2vw, 44px);
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-right {
    top: 350px;
    right: clamp(8px, 2vw, 44px);
  }
}

@media (max-width: 1320px) {
  .chart-wheel-stage.is-multiple-chart {
    overflow: auto;
    padding: 18px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple {
    display: grid;
    background: var(--surface-soft);
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-main {
    display: block;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    width: min(100%, 980px);
    margin-inline: auto;
  }

  .chart-wheel-stage.is-multiple-chart .chart-tools-multiple {
    justify-content: center;
    order: -1;
    width: 100%;
    margin-bottom: 4px;
    padding: 0 4px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    position: static;
    width: 100%;
    transform: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    display: grid;
    gap: 12px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 16px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    position: static;
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 6px;
    transform: none;
    text-align: left;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    position: static;
    min-width: 0;
    margin-left: auto;
    text-align: right;
    transform: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple h3 {
    font-size: 18px;
    line-height: 1.15;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple p {
    max-width: none;
  }
}

.chart-wheel-card {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 6px;
  justify-items: center;
  height: 100%;
  max-height: 100%;
  width: 100%;
  max-width: 1640px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px 16px;
}

.chart-wheel-card-triple {
  position: relative;
  display: block;
  height: auto;
  max-height: none;
  max-width: none;
  overflow: visible;
  border: 0;
  background: transparent;
  padding: 0;
}

.chart-wheel-card header {
  width: 100%;
}

.chart-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.chart-card-header > div:not(.chart-card-header-actions) {
  min-width: 150px;
}

.chart-card-header-actions {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 10px;
  margin-left: auto;
}

.chart-card-header-actions > .chart-tools {
  min-height: 34px;
  align-items: center;
  min-width: 0;
  padding-top: 0;
}

.chart-card-actions {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  padding-top: 0;
}

.chart-card-action-button {
  width: 34px;
  height: 34px;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  box-shadow: 0 6px 14px color-mix(in srgb, var(--text) 5%, transparent);
  color: var(--accent);
  cursor: pointer;
  line-height: 0;
  padding: 0;
  transition:
    background 170ms ease,
    border-color 170ms ease,
    color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}

.chart-card-action-button svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-card-action-button:hover,
.chart-card-action-button:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  outline: 0;
  transform: translateY(-1px);
}

.chart-card-action-button:active {
  transform: translateY(0);
}

.chart-card-action-button:disabled {
  cursor: wait;
  opacity: 0.62;
  transform: none;
}

.chart-card-interpret-button {
  display: none;
  width: auto;
  min-width: 0;
  gap: 7px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  padding: 0 13px;
  white-space: nowrap;
}

.chart-card-interpret-button:is(:hover, :focus-visible) {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--on-accent);
}

.chart-card-interpret-button:disabled {
  cursor: not-allowed;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) .chart-card-interpret-button {
  display: inline-flex;
}

@media (max-width: 860px) {
  :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-card-interpret-button {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
  }

  :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-card-interpret-button > span {
    display: none;
  }
}

/* Stable theme-preview targets in the intake form.
   The global dark-theme controls are smaller; resizing the hovered button
   caused a repeating mouseenter/mouseleave preview loop. */
.intake-screen .theme-switcher .theme-choice,
html[data-theme="dark"] .intake-screen .theme-switcher .theme-choice {
  display: grid !important;
  width: 38px !important;
  min-width: 38px !important;
  height: 38px !important;
  min-height: 38px !important;
  flex: 0 0 38px !important;
  place-items: center;
}

.intake-screen .theme-switcher .theme-choice:hover,
.intake-screen .theme-switcher .theme-choice:focus-visible {
  transform: none;
}

/* Match the landing page's calm theme preview. The button geometry remains
   fixed, while the form surfaces interpolate instead of changing abruptly. */
.intake-screen :is(
  .intake-copy,
  .intake-panel,
  .google-action,
  .intake-home-link,
  .primary-action,
  input,
  select,
  textarea,
  label,
  .eyebrow,
  .lede,
  .legal-consent,
  .legal-links button
) {
  transition:
    background-color 0.55s ease,
    border-color 0.55s ease,
    color 0.55s ease,
    box-shadow 0.55s ease;
}

@media (prefers-reduced-motion: reduce) {
  .intake-screen :is(
    .intake-copy,
    .intake-panel,
    .google-action,
    .intake-home-link,
    .primary-action,
    input,
    select,
    textarea,
    label,
    .eyebrow,
    .lede,
    .legal-consent,
    .legal-links button
  ) {
    transition: none;
  }
}

@media (max-width: 460px) {
  .intake-screen .theme-switcher .theme-choice,
  html[data-theme="dark"] .intake-screen .theme-switcher .theme-choice {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
    flex-basis: 34px !important;
  }
}

/* Editorial paragraphs: balanced justification only where the measure is wide
   enough to preserve a calm, readable rhythm. Compact copy stays left aligned. */
@media (min-width: 720px) {
  .landing-astroanamnesis-copy > p:not(.eyebrow),
  .landing-ai-panel .landing-section-lead,
  .landing-ai-copy > p,
  .landing-ai-copy > strong,
  .professional-use-copy > p:not(.eyebrow) {
    text-align: justify;
    text-align-last: left;
    text-justify: inter-word;
    hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
}

.chart-wheel-workspace:fullscreen,
.chart-wheel-workspace.is-chart-card-fallback-fullscreen {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.96), rgba(250, 246, 238, 0.84) 58%, rgba(246, 241, 232, 0.68)),
    var(--surface);
  padding: 0;
}

.chart-wheel-workspace:fullscreen .chart-wheel-main,
.chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-wheel-main,
.chart-wheel-workspace:fullscreen .chart-wheel-card,
.chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-wheel-card {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.chart-wheel-workspace:fullscreen .floating-chart-panel,
.chart-wheel-workspace.is-chart-card-fallback-fullscreen .floating-chart-panel {
  z-index: 12;
}

.chart-wheel-card:fullscreen,
.chart-wheel-card.is-chart-card-fallback-fullscreen {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  overflow: auto;
  background:
    radial-gradient(circle at 50% 44%, rgba(255, 255, 255, 0.96), rgba(250, 246, 238, 0.84) 58%, rgba(246, 241, 232, 0.68)),
    var(--surface);
  padding: clamp(18px, 3vw, 36px);
}

.chart-wheel-card:fullscreen .chart-card-header,
.chart-wheel-card.is-chart-card-fallback-fullscreen .chart-card-header {
  max-width: min(1080px, 94vw);
  margin: 0 auto 16px;
}

.chart-wheel-card:fullscreen .chart-svg-wrap-only,
.chart-wheel-card.is-chart-card-fallback-fullscreen .chart-svg-wrap-only {
  width: min(92vmin, 960px);
  margin: 0 auto;
}

.chart-wheel-card-triple:fullscreen .chart-card-header,
.chart-wheel-card-triple.is-chart-card-fallback-fullscreen .chart-card-header {
  position: relative;
  top: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  max-width: min(1080px, 94vw);
  justify-content: space-between;
  margin: 0 auto 16px;
  transform: none;
}

.chart-wheel-card-triple:fullscreen .chart-svg-wrap-triple,
.chart-wheel-card-triple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple {
  width: min(92vmin, 960px);
  margin: 0 auto;
}

.chart-wheel-card-triple .chart-card-header {
  position: absolute;
  z-index: 2;
  top: -58px;
  left: 50%;
  display: flex;
  width: max-content;
  max-width: min(340px, 100%);
  min-width: 0;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  transform: translateX(-50%);
  pointer-events: auto;
  text-align: center;
}

.chart-wheel-card-triple-title-bottom .chart-card-header {
  top: auto;
  bottom: -64px;
}

.chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
  position: static;
  flex: 0 1 auto;
  min-width: 0;
  transform: none;
}

.chart-wheel-card-triple .chart-card-header-actions {
  margin-left: 0;
  padding-top: 0;
}

.chart-wheel-card-triple h3 {
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}

.chart-wheel-card-triple .chart-tools {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 6px;
  padding-top: 0;
}

.chart-wheel-card-triple .chart-card-header-actions {
  flex: 0 0 auto;
  justify-content: flex-end;
  gap: 5px;
}

.chart-wheel-card-triple .chart-card-actions {
  gap: 5px;
  padding-top: 0;
}

.chart-wheel-card-triple .chart-card-action-button:not(.chart-card-interpret-button) {
  width: 28px;
  height: 28px;
}

.chart-wheel-card-triple .chart-card-action-button svg {
  width: 13px;
  height: 13px;
}

.chart-wheel-card-triple .chart-tool-link {
  font-size: 11px;
  line-height: 1;
}

.chart-wheel-card-triple p {
  display: block;
  max-width: 220px;
  margin: 4px 0 0;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-wheel-card-triple .chart-house-label {
  font-size: 22px;
  font-weight: 700;
}

.chart-wheel-card-triple .chart-cusp-label-sign {
  font-size: 26px;
}

.chart-wheel-card-triple .chart-cusp-label-degree,
.chart-wheel-card-triple .chart-cusp-label-minute {
  font-size: 18px;
  font-weight: 400;
}

.chart-wheel-card-triple .chart-angle-label-name {
  font-size: var(--angle-label-name-size, 24px);
}

.chart-wheel-card-triple .chart-angle-label-sign {
  font-size: var(--angle-label-sign-size, 23px);
}

.chart-wheel-card-triple .chart-angle-label-position {
  font-size: var(--angle-label-position-size, 16px);
}

.chart-wheel-card-triple .chart-planet-glyph {
  font-size: 36px !important;
}

.chart-wheel-card-triple .chart-planet-glyph-major {
  font-size: 50px !important;
}

.chart-wheel-card-triple .chart-planet-degree,
.chart-wheel-card-triple .chart-planet-minute {
  font-size: 18px !important;
  font-weight: 400 !important;
}

.chart-wheel-card-triple .chart-planet-sign {
  font-size: 23px !important;
}

.chart-wheel-card-triple .chart-planet-retro {
  font-size: 15px !important;
}

.chart-multiple-topbar {
  position: absolute;
  z-index: 7;
  top: 18px;
  right: 36px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
  width: max-content;
  max-width: calc(100% - 72px);
  pointer-events: none;
}

.chart-multiple-topbar :is(button, a, input, select, summary, [tabindex]:not([tabindex="-1"])) {
  pointer-events: auto;
}

/*
 * Las tres cartas se solapan por sus márgenes exteriores. El SVG raíz no debe
 * capturar el rectángulo transparente completo: solo las formas realmente
 * pintadas y sus controles interactivos reciben el puntero.
 */
.chart-wheel-triple .chart-triple-slot,
.chart-wheel-card-triple,
.chart-wheel-card-triple .chart-svg-wrap-triple,
.chart-wheel-card-triple > .chart-card-header {
  pointer-events: none;
}

.chart-wheel-card-triple > .chart-card-header :is(button, a, input, select, summary, [tabindex]:not([tabindex="-1"])) {
  pointer-events: auto;
}

.chart-wheel-card-triple .chart-wheel-svg {
  pointer-events: none;
}

.chart-wheel-card-triple .chart-wheel-svg > :not(defs) {
  pointer-events: visiblePainted;
}

.chart-wheel-card-triple .chart-planet[data-chart-planet-id],
.chart-wheel-card-triple .chart-angle-label,
.chart-wheel-card-triple .chart-planet-hit {
  pointer-events: all;
}

.chart-multiple-topbar-composite {
  right: 36px;
  left: 36px;
  width: auto;
  max-width: none;
  justify-content: space-between;
}

.chart-multiple-topbar-subject {
  right: 36px;
  left: 36px;
  width: auto;
  max-width: none;
  justify-content: space-between;
}

.chart-guest-subject {
  display: grid;
  min-width: 0;
  max-width: min(460px, 46vw);
  gap: 2px;
  color: var(--text);
  line-height: 1.25;
  text-align: left;
}

.chart-guest-subject-eyebrow {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chart-guest-subject-name {
  display: inline-flex;
  min-width: 0;
  align-items: center;
  gap: 5px;
  font-size: 16px;
  line-height: 1.2;
}

.chart-guest-subject-meta {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 860px) {
  #guest-maps-screen .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-subject {
    align-items: stretch;
    flex-direction: column;
    overflow: visible;
  }

  #guest-maps-screen .chart-guest-subject {
    width: 100%;
    max-width: none;
  }

  #guest-maps-screen .chart-multiple-topbar-actions {
    width: 100%;
  }
}

@media (max-width: 640px) {
  #guest-maps-screen .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-subject {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }

  #guest-maps-screen .chart-guest-subject,
  #guest-maps-screen .chart-multiple-topbar-actions {
    grid-column: 1;
  }

  #guest-maps-screen .chart-guest-subject-meta {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
  }
}

.chart-multiple-topbar-actions {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.chart-composite-participants {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-multiple-participants {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-multiple-person-trigger {
  display: inline-flex;
  min-width: 0;
  max-width: min(340px, 34vw);
  min-height: 34px;
  flex: 0 1 auto;
  align-items: center;
  gap: 7px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  padding: 5px 8px;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.chart-multiple-person-trigger .chart-multiple-participants {
  min-width: 0;
}

.chart-multiple-person-trigger svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.chart-multiple-person-trigger:is(:hover, :focus-visible) {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  color: var(--accent-strong);
  outline: 0;
}

.chart-multiple-person-trigger:is(:hover, :focus-visible) svg {
  transform: translateY(1px);
}

.chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen)
  .chart-multiple-person-trigger {
  border-color: color-mix(in srgb, var(--accent-line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
}

.chart-multiple-topbar .chart-tools-multiple {
  position: static;
  z-index: auto;
  justify-content: flex-end;
  gap: 14px;
  width: auto;
  max-width: none;
}

.chart-card-actions-multiple {
  flex: 0 0 auto;
}

.chart-card-actions-multiple .chart-card-action-button:not(.chart-card-interpret-button) {
  width: 30px;
  height: 30px;
}

.chart-card-actions-multiple .chart-card-action-button svg {
  width: 14px;
  height: 14px;
}

.chart-wheel-workspace-multiple:fullscreen,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen {
  width: 100vw;
  height: 100dvh;
  min-width: 1320px;
  min-height: 940px;
  overflow: auto;
  background: var(--surface-soft);
}

.chart-wheel-workspace-multiple:fullscreen {
  overflow: auto;
}

/*
 * Laptop fullscreen: the triple layout has a 940px minimum canvas. Keep the
 * fullscreen viewport fixed and scroll its contents when the available screen
 * height is smaller, instead of clipping the lower chart.
 */
@media (min-width: 861px) {
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
  }
}

.chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
  width: 100vw;
  height: 100dvh;
  min-width: 1320px;
  min-height: 940px;
}

.chart-wheel-workspace-multiple:fullscreen .chart-triple-slot,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot {
  width: clamp(660px, 35vw, 900px);
}

.chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-top,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-top {
  top: clamp(12px, 2.4vh, 34px);
}

.chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-left,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-left {
  top: clamp(390px, 36vh, 520px);
  left: clamp(24px, 2.8vw, 72px);
}

.chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-right,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-right {
  top: clamp(390px, 36vh, 520px);
  right: clamp(24px, 2.8vw, 72px);
}

.chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar {
  top: clamp(14px, 2vh, 28px);
  right: clamp(20px, 2vw, 44px);
}

.chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar-composite,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar-composite {
  left: clamp(20px, 2vw, 44px);
}

.chart-wheel-card-nodal {
  align-content: start;
  max-height: none;
  overflow: visible;
}

.chart-wheel-card-nodal .chart-card-header {
  margin-bottom: 8px;
}

.chart-wheel-card-nodal .chart-card-header-actions > .chart-tools {
  min-width: 0;
  flex-wrap: wrap;
  justify-content: flex-start;
  overflow: visible;
  scrollbar-width: none;
}

.chart-wheel-card-nodal .chart-card-header-actions > .chart-tools::-webkit-scrollbar {
  display: none;
}

.chart-wheel-card-nodal .chart-card-header-actions > .chart-tools .chart-tool-link {
  flex: 0 0 auto;
  white-space: nowrap;
}

.nodal-schema-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  width: 100%;
  align-items: start;
}

@media (min-width: 861px) {
  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace,
  .chart-wheel-stage.is-nodal-chart .chart-wheel-main,
  .chart-wheel-stage.is-nodal-chart .chart-wheel-card-nodal {
    width: 100%;
    max-width: 1640px;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-main {
    place-items: start center;
  }

  /*
   * The nodal ages and angle labels intentionally extend beyond the SVG
   * viewBox. Give that annotation layer its own horizontal breathing room
   * without reducing or distorting the wheel itself.
   */
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal {
    --nodal-card-side-extension: clamp(0px, calc((100vw - 100% - 32px) / 2), 76px);
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-color: transparent;
    background: transparent;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal::before {
    position: absolute;
    z-index: -1;
    inset-block: 0;
    inset-inline: calc(-1 * var(--nodal-card-side-extension));
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    content: "";
    pointer-events: none;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header {
    width: calc(100% + var(--nodal-card-side-extension) + var(--nodal-card-side-extension));
    max-width: none;
    margin-inline: calc(-1 * var(--nodal-card-side-extension));
  }

  .chart-wheel-stage.is-nodal-chart .nodal-schema-layout {
    padding-inline: clamp(0px, calc((100% - 1160px) / 2), 104px);
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen),
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .chart-wheel-main,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal {
    width: 100%;
    max-width: none;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen) {
    height: 100dvh;
    max-height: 100dvh;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .chart-wheel-main,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal {
    height: auto;
    min-height: 100%;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .nodal-wheel-stack {
    width: min(100%, 1160px, calc(100vh - 240px));
    width: min(100%, 1160px, calc(100dvh - 240px));
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .chart-card-header-actions {
    flex: 0 1 auto;
    justify-content: flex-end;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen)
    .chart-card-header-actions
    > .chart-tools {
    width: auto;
    flex: 0 1 auto;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.nodal-wheel-stack {
  position: relative;
  width: min(100%, 1160px, calc(100vh - 132px));
  width: min(100%, 1160px, calc(100dvh - 132px));
  margin: 56px auto 96px;
  overflow: visible;
}

.nodal-wheel-stack > .chart-wheel-svg {
  width: 100%;
  max-width: none;
  overflow: visible;
}

.nodal-overlay-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.nodal-house-year text {
  fill: #e60012;
  font-size: 24px;
  font-weight: 900;
}

.nodal-house-year-angle text {
  font-size: 28px;
}

.chart-cusp-age-tick {
  stroke: #e60012;
  stroke-width: 2.25;
  stroke-linecap: round;
}

.nodal-angle-line {
  stroke: #c5121f;
  stroke-width: 4;
  stroke-linecap: round;
}

.nodal-year-marker line,
.nodal-current-age-marker line {
  stroke: var(--planet-color, #111827);
  stroke-width: 1.1;
  opacity: 0.68;
}

.nodal-year-marker rect,
.nodal-current-age-marker rect {
  fill: color-mix(in srgb, var(--surface) 90%, transparent);
  stroke: var(--planet-color, #111827);
  stroke-width: 1.6;
}

.nodal-year-marker text {
  fill: var(--planet-color, #111827);
  font-size: 14px;
  font-weight: 800;
}

.nodal-current-age-marker {
  --planet-color: #dc2626;
}

.nodal-current-age-marker text {
  fill: #dc2626;
  font-size: 15px;
  font-weight: 900;
}

.nodal-current-age-action {
  cursor: pointer;
  pointer-events: all;
}

.nodal-planet-age-action {
  cursor: pointer;
  pointer-events: all;
}

:is(.nodal-current-age-action, .nodal-planet-age-action) :is(rect, text, line) {
  transition: filter 180ms ease, opacity 180ms ease, stroke-width 180ms ease;
}

.nodal-current-age-action:hover rect,
.nodal-current-age-action:focus-visible rect,
.nodal-current-age-action.is-nodal-age-focused rect {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, #dc2626 24%, transparent));
  stroke-width: 2.4;
}

.nodal-current-age-action:hover text,
.nodal-current-age-action:focus-visible text,
.nodal-current-age-action.is-nodal-age-focused text {
  filter: drop-shadow(0 1px 1px color-mix(in srgb, #dc2626 18%, transparent));
}

.nodal-current-age-action.is-nodal-age-focused rect {
  fill: color-mix(in srgb, #dc2626 10%, var(--surface));
}

.nodal-planet-age-action:hover rect,
.nodal-planet-age-action:focus-visible rect,
.nodal-planet-age-action.is-nodal-planet-age-focused rect {
  filter: drop-shadow(0 2px 3px color-mix(in srgb, var(--planet-color) 24%, transparent));
  stroke-width: 2.4;
}

.nodal-planet-age-action:hover text,
.nodal-planet-age-action:focus-visible text,
.nodal-planet-age-action.is-nodal-planet-age-focused text {
  filter: drop-shadow(0 1px 1px color-mix(in srgb, var(--planet-color) 20%, transparent));
}

.nodal-planet-age-action.is-nodal-planet-age-focused rect {
  fill: color-mix(in srgb, var(--planet-color) 10%, var(--surface));
}

:is(.nodal-current-age-action, .nodal-planet-age-action):focus {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  :is(.nodal-current-age-action, .nodal-planet-age-action) :is(rect, text, line) {
    transition: none;
  }
}

.nodal-side-tables {
  display: grid;
  gap: 14px;
  align-content: start;
  padding-top: 18px;
}

.nodal-table-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.nodal-table-card h4 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 15px;
  text-align: center;
}

.nodal-table-card p {
  margin: 0 0 8px;
  color: #dc2626;
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.nodal-table {
  width: 100%;
}

.nodal-table td,
.nodal-table th {
  padding: 3px 5px;
  text-align: center;
  white-space: nowrap;
}

.nodal-year-cell {
  font-weight: 900;
}

.nodal-age-icon {
  color: #dc2626;
  font-size: 17px;
  font-weight: 900;
}

.nodal-reference-controls {
  display: grid;
  grid-template-columns: minmax(128px, 1fr) minmax(72px, 0.55fr) auto;
  align-items: end;
  gap: 8px;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface));
  padding: 10px;
}

.nodal-reference-field {
  display: grid;
  min-width: 0;
  gap: 4px;
}

.nodal-reference-field > span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.1;
}

.nodal-reference-field > input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  padding: 0 7px;
}

.nodal-reference-field > input:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 1px;
}

.nodal-reference-today {
  min-width: 50px;
  height: 34px;
  border: 1px solid var(--accent-line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  padding: 0 9px;
}

.nodal-reference-today:hover,
.nodal-reference-today:focus-visible {
  background: var(--accent-soft);
  outline: 0;
}

.nodal-reference-today:disabled {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  cursor: default;
  opacity: 0.7;
}

.nodal-table-card .nodal-reference-note {
  grid-column: 1 / -1;
  margin: 0;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
  text-align: left;
}

.nodal-table-card .nodal-age-summary {
  margin: 0 0 8px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 800;
  text-align: center;
}

.chart-tools {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px 12px;
  padding-top: 2px;
}

.chart-tool-link {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.chart-tool-link:hover,
.chart-tool-link:focus-visible {
  color: var(--accent-strong);
  outline: 0;
}

.chart-tools-scroll-hint {
  display: none;
}

.chart-technical-more-menu {
  position: relative;
  display: block;
  height: 34px;
  flex: 0 0 auto;
  line-height: 0;
}

.chart-technical-more-menu > summary {
  list-style: none;
}

.chart-technical-more-menu > summary::-webkit-details-marker {
  display: none;
}

.chart-technical-more-button {
  display: inline-flex;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 88%, transparent);
  color: var(--accent);
  padding: 0;
  font-size: 12px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.chart-technical-more-button svg {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.chart-technical-more-menu[open] > .chart-technical-more-button,
.chart-technical-more-button:is(:hover, :focus-visible) {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: 0;
}

.chart-technical-more-popover {
  position: absolute;
  z-index: 45;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  width: max-content;
  min-width: 180px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 15%, transparent);
  padding: 5px;
}

.chart-technical-more-popover .chart-tool-link {
  display: block;
  width: 100%;
  min-height: 38px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  padding: 0 10px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.chart-technical-more-popover .chart-tool-link:is(:hover, :focus-visible) {
  background: var(--accent-soft);
  color: var(--accent);
  outline: 0;
}

@media (max-width: 640px) {
  .chart-tools-scroll-hint.is-visible {
    display: inline-flex;
    width: 24px;
    min-width: 24px;
    min-height: 32px;
    flex: 0 0 24px;
    align-self: stretch;
    align-items: center;
    justify-content: center;
    margin-left: -5px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(90deg, transparent 0%, var(--surface) 38%);
    box-shadow: none;
    color: var(--accent);
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    pointer-events: none;
    cursor: default;
  }

  .chart-tools-scroll-hint.is-visible::before {
    content: "\203A";
  }

  .chart-tools-scroll-hint-prev.is-visible {
    display: none;
  }
}

.chart-wheel-card h3 {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0;
}

.chart-wheel-card p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.chart-wheel-svg {
  display: block;
  width: min(100%, 1150px);
  height: auto;
  color: var(--accent);
}

.chart-technical-layout {
  display: grid;
  grid-template-columns: minmax(150px, 205px) minmax(680px, 1fr) minmax(185px, 240px);
  gap: 10px;
  width: 100%;
  align-items: center;
}

.chart-svg-wrap {
  display: grid;
  min-width: 0;
  overflow: visible;
  place-items: center;
  width: 100%;
}

/*
 * Fullscreen charts use their own pinch/pan handler. Let the page keep its
 * vertical scroll before zooming, but do not let the browser claim the
 * horizontal/pinch gesture before the chart handler can process it.
 */
.chart-wheel-workspace:fullscreen .chart-svg-wrap,
.chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-svg-wrap,
.chart-wheel-card:fullscreen .chart-svg-wrap,
.chart-wheel-card.is-chart-card-fallback-fullscreen .chart-svg-wrap,
.chart-wheel-workspace-multiple > .chart-wheel-main,
.chart-wheel-workspace-multiple:fullscreen > .chart-wheel-main,
.chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen > .chart-wheel-main {
  touch-action: pan-y;
}

.chart-svg-wrap.is-chart-touch-zoomed {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.chart-svg-wrap .chart-wheel-svg.is-touch-zoomed {
  transform-origin: 50% 50%;
  will-change: transform;
}

.chart-svg-wrap.is-chart-touch-interacting .chart-wheel-svg {
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.chart-wheel-workspace-multiple > .chart-wheel-main.is-chart-touch-zoomed {
  overflow: hidden;
  overscroll-behavior: contain;
  touch-action: none;
}

.chart-wheel-workspace-multiple > .chart-wheel-main .chart-wheel-triple.is-touch-zoomed {
  transform-origin: 50% 50%;
  will-change: transform;
}

.chart-wheel-workspace-multiple > .chart-wheel-main.is-chart-touch-interacting .chart-wheel-triple {
  transition: none !important;
  user-select: none;
  -webkit-user-select: none;
}

.chart-svg-wrap-triple {
  width: 100%;
}

.chart-svg-wrap-triple .chart-wheel-svg {
  width: 100%;
  max-width: none;
  overflow: visible;
}

.chart-svg-wrap-only {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
  padding: 14px 46px 56px;
}

.chart-svg-wrap-only .chart-wheel-svg {
  width: min(100%, calc(100dvh - 132px), 1160px);
  height: auto;
  max-width: 100%;
  max-height: calc(100dvh - 132px);
  overflow: visible;
}

.chart-wheel-card-exterior-labels .chart-svg-wrap-only .chart-wheel-svg {
  width: min(100%, calc(100dvh - 112px), 1220px);
  max-height: calc(100dvh - 112px);
  aspect-ratio: 1 / 1;
}

.chart-side-panel {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
}

.chart-stat-box {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.chart-stat-box h4 {
  margin: 0 0 2px;
  color: var(--text);
  font-size: 13px;
  font-weight: 900;
  text-align: center;
}

.chart-stat-row {
  display: grid;
  grid-template-columns: 54px minmax(58px, 1fr) 18px;
  gap: 5px;
  align-items: center;
  min-height: 19px;
  background: color-mix(in srgb, var(--accent-soft) 45%, transparent);
  padding: 1px 5px;
}

.chart-stat-row span,
.chart-stat-row strong {
  color: var(--text);
  font-size: 12px;
}

.chart-stat-row strong {
  text-align: right;
}

.chart-stat-track {
  display: block;
  height: 13px;
  background: var(--surface);
  overflow: hidden;
}

.chart-stat-track i {
  display: block;
  height: 100%;
}

.chart-inline-table,
.chart-mini-aspect-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
  line-height: 1.16;
}

.chart-inline-table tr:nth-child(even),
.chart-mini-aspect-grid tr:nth-child(even) {
  background: color-mix(in srgb, var(--accent-soft) 46%, transparent);
}

.chart-inline-table td,
.chart-mini-aspect-grid th,
.chart-mini-aspect-grid td {
  padding: 3px 4px;
  text-align: center;
  white-space: nowrap;
}

.chart-inline-table td:first-child,
.chart-mini-aspect-grid th:first-child {
  color: var(--text);
  font-size: 14px;
  font-weight: 900;
}

.chart-mini-aspect-grid span {
  display: block;
  font-size: 12px;
  font-weight: 900;
}

.chart-mini-aspect-grid small {
  display: block;
  color: var(--muted);
  font-size: 9px;
}

.chart-bg {
  fill: var(--chart-canvas);
}

.chart-outer,
.chart-exterior-ring,
.chart-zodiac,
.chart-zodiac-inner,
.chart-inner,
.chart-ring-line,
.chart-tick-ring,
.chart-mini-center {
  fill: none;
  stroke: var(--chart-line);
  stroke-width: 1.55;
}

.chart-exterior-ring {
  stroke: var(--chart-line-strong);
  stroke-width: 1.55;
}

.chart-outer {
  stroke: var(--chart-segment-line);
}

.chart-zodiac {
  stroke: var(--chart-segment-line);
}

.chart-ring-line {
  stroke: var(--chart-segment-line);
}

.chart-zodiac-segment {
  fill: var(--segment-color);
  stroke: var(--chart-segment-line);
  stroke-width: 1.35;
}

.chart-decanate-segment,
.chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 92%, #ffffff);
  stroke: none;
}

.chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 88%, #ffffff);
}

html[data-theme="dark"] .chart-zodiac-segment {
  fill: color-mix(in srgb, var(--segment-color) 92%, var(--chart-canvas));
}

html[data-theme="dark"] .chart-decanate-segment {
  fill: color-mix(in srgb, var(--segment-color) 86%, var(--chart-canvas));
}

html[data-theme="dark"] .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 80%, var(--chart-canvas));
}

.chart-sign-line,
.chart-house-line,
.chart-decanate-line,
.chart-dodecatemoria-line,
.chart-degree-tick {
  stroke: var(--chart-line);
  stroke-width: 0.92;
}

.chart-degree-tick {
  stroke: var(--chart-line);
  opacity: 0.72;
  stroke-width: 0.72;
}

.chart-degree-tick-mid {
  opacity: 0.9;
  stroke-width: 0.95;
}

.chart-degree-tick-major {
  opacity: 1;
  stroke-width: 1.35;
}

.chart-sign-line {
  stroke: var(--chart-segment-line);
  opacity: 1;
  stroke-width: 1.45;
}

.chart-decanate-line {
  stroke: var(--chart-segment-line);
  opacity: 0.9;
  stroke-width: 0.9;
}

.chart-dodecatemoria-line {
  stroke: var(--chart-segment-line);
  opacity: 0.92;
  stroke-width: 0.82;
}

.chart-house-line {
  stroke: var(--chart-line);
  opacity: 0.86;
  stroke-width: 1.15;
}

.chart-house-line-angle {
  stroke: var(--danger);
  stroke-width: 3.2;
  opacity: 0.95;
}

.chart-zodiac-glyph {
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-variant-emoji: text;
  font-weight: 420;
  fill: var(--zodiac-ink);
  stroke: #111827;
  paint-order: stroke fill;
  stroke-linecap: round;
  stroke-linejoin: round;
  text-rendering: geometricPrecision;
}

.chart-sign-symbol {
  fill: #111827;
  stroke: var(--zodiac-ink);
  font-size: 42px;
  font-weight: 560;
  paint-order: fill stroke;
  stroke-width: 1.9px;
}

.chart-decanate-symbol {
  fill: #111827;
  stroke: var(--zodiac-ink);
  font-size: 23px;
  font-weight: 560;
  paint-order: fill stroke;
  stroke-width: 0.5px;
}

.chart-dodecatemoria-symbol {
  fill: #111827;
  stroke: var(--zodiac-ink);
  font-size: 15px;
  font-weight: 560;
  paint-order: fill stroke;
  stroke-width: 0.5px;
}

.chart-house-label {
  fill: var(--chart-ink);
  font-size: 16px;
  font-weight: 700;
}

.chart-cusp-label {
  pointer-events: none;
}

.chart-cusp-label text {
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  fill: var(--chart-ink);
  font-weight: 400;
}

.chart-cusp-label-sign {
  fill: var(--cusp-sign-light, var(--chart-ink));
  font-size: 22px;
  stroke: color-mix(in srgb, var(--cusp-sign-light, var(--cusp-sign-color)) 72%, var(--chart-canvas));
  stroke-width: 0.32;
  font-weight: 500;
  paint-order: fill stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="dark"] .chart-cusp-label-sign {
  fill: var(--cusp-sign-vivid);
  stroke: color-mix(in srgb, var(--cusp-sign-vivid) 58%, var(--chart-canvas));
  stroke-width: 0.32;
  font-weight: 500;
}

.chart-cusp-label-degree,
.chart-cusp-label-minute {
  font-size: 15px;
  font-weight: 560;
}

:root {
  --chart-aspect-conjunction: #d97706;
  --chart-aspect-harmonious: #245fbd;
  --chart-aspect-quincunx: #187044;
  --chart-aspect-tense: #d92d2d;
  --chart-aspect-creative: #7c3aed;
  --chart-aspect-minor-harmonious: #5579a8;
  --chart-aspect-minor-tense: #b84b5f;
}

.chart-aspect {
  stroke: color-mix(in srgb, var(--accent) 42%, transparent);
  stroke-width: 1.8;
  stroke-linecap: round;
  opacity: 0.92;
}

.chart-aspect-0 {
  stroke: var(--chart-aspect-user-0, var(--chart-aspect-conjunction));
  opacity: 0.94;
}

.chart-aspect-90,
.chart-aspect-180 {
  opacity: 0.94;
}

.chart-aspect-90 {
  stroke: var(--chart-aspect-user-90, var(--chart-aspect-tense));
}

.chart-aspect-180 {
  stroke: var(--chart-aspect-user-180, var(--chart-aspect-tense));
}

.chart-aspect-60,
.chart-aspect-120 {
  opacity: 0.96;
}

.chart-aspect-60 {
  stroke: var(--chart-aspect-user-60, var(--chart-aspect-harmonious));
}

.chart-aspect-120 {
  stroke: var(--chart-aspect-user-120, var(--chart-aspect-harmonious));
}

.chart-aspect-30 {
  stroke: var(--chart-aspect-user-30, var(--chart-aspect-minor-harmonious));
  stroke-dasharray: 4 3;
  opacity: 0.82;
}

.chart-aspect-45,
.chart-aspect-135 {
  stroke-dasharray: 5 3;
  opacity: 0.86;
}

.chart-aspect-45 {
  stroke: var(--chart-aspect-user-45, var(--chart-aspect-minor-tense));
}

.chart-aspect-135 {
  stroke: var(--chart-aspect-user-135, var(--chart-aspect-minor-tense));
}

.chart-aspect-72,
.chart-aspect-144 {
  stroke-dasharray: 2.5 2.5;
  opacity: 0.88;
}

.chart-aspect-72 {
  stroke: var(--chart-aspect-user-72, var(--chart-aspect-creative));
}

.chart-aspect-144 {
  stroke: var(--chart-aspect-user-144, var(--chart-aspect-creative));
}

.chart-aspect-150 {
  stroke: var(--chart-aspect-user-150, var(--chart-aspect-quincunx));
  opacity: 0.96;
}

.aspect-moment-chart-wheel.has-highlighted-aspect .chart-aspect:not(.is-highlighted) {
  opacity: 0.14;
}

.aspect-moment-chart-wheel.has-highlighted-aspect .chart-aspect.is-highlighted {
  stroke-width: 5;
  opacity: 1;
  filter: drop-shadow(0 0 3px color-mix(in srgb, currentColor 42%, transparent));
}

.chart-conjunction-highlight-axis {
  stroke: var(--chart-aspect-user-0, var(--chart-aspect-conjunction));
  stroke-width: 5;
  stroke-linecap: round;
}

.aspect-moment-chart-wheel.has-highlighted-aspect .chart-planet.is-highlighted-aspect-planet :is(
  .chart-planet-connector,
  .chart-planet-degree-mark,
  .chart-planet-degree-mark-outer
) {
  stroke-width: 3;
  opacity: 1;
}

.aspect-moment-chart-wheel.has-highlighted-aspect .chart-planet.is-highlighted-aspect-planet .chart-planet-glyph {
  font-weight: 800;
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--planet-color) 38%, transparent));
}

.chart-aspect-anchor line {
  stroke: var(--planet-color);
  stroke-width: 2;
  stroke-linecap: round;
  opacity: 0.88;
}

.chart-aspect-anchor-focus-only {
  opacity: 0;
}

.chart-center-dot {
  fill: var(--accent);
}

.chart-sideral-meditation {
  color: var(--accent);
  pointer-events: none;
}

.chart-sideral-meditation-backdrop {
  fill: color-mix(in srgb, var(--chart-canvas) 94%, var(--surface) 6%);
  stroke: none;
}

.chart-sideral-meditation-fill {
  fill: color-mix(in srgb, currentColor 82%, var(--chart-ink));
  opacity: 0.9;
}

.chart-mini-center {
  fill: var(--chart-canvas);
}

.chart-angle-line {
  stroke: var(--danger);
  stroke-width: 3.5;
  stroke-linecap: round;
}

.chart-angle-label {
  font-family: "Astro Jupiter", Inter, "Segoe UI", sans-serif;
  fill: var(--planet-color, var(--danger));
  font-weight: 800;
  letter-spacing: 0.01em;
  paint-order: stroke fill;
  stroke: color-mix(in srgb, var(--chart-canvas) 78%, transparent);
  stroke-width: 1.6px;
  stroke-linejoin: round;
}

.chart-angle-label-split {
  dominant-baseline: auto;
}

.chart-angle-label-vertical {
  dominant-baseline: auto;
}

.chart-angle-label-name {
  fill: var(--planet-color, var(--danger));
  font-size: var(--angle-label-name-size, 24px);
  font-weight: 900;
  letter-spacing: 0.025em;
}

.chart-angle-label-sign {
  fill: var(--angle-sign-color, var(--planet-color, var(--danger)));
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-size: var(--angle-label-sign-size, 23px);
  font-weight: 650;
  letter-spacing: 0;
}

.chart-angle-label-position {
  fill: color-mix(in srgb, var(--planet-color, var(--danger)) 88%, var(--chart-ink));
  font-size: var(--angle-label-position-size, 16px);
  font-weight: 800;
  letter-spacing: 0.01em;
}

html[data-theme="dark"] .chart-angle-label-sign {
  fill: var(--angle-sign-dark-color, var(--angle-sign-color, var(--accent-red))) !important;
}

.chart-planet-degree-mark,
.chart-planet-connector,
.chart-planet-stem {
  stroke: var(--planet-color);
  stroke-width: 1;
  opacity: 0.82;
}

.chart-planet-degree-mark {
  stroke-width: 2;
  opacity: 0.9;
}

.chart-planet-degree-mark-outer {
  stroke: var(--planet-color);
  stroke-width: 1.6;
  opacity: 0.96;
}

.chart-planet-connector {
  stroke-width: 0.95;
  stroke-linecap: round;
  opacity: 0.76;
}

.chart-planet circle {
  stroke: var(--surface);
  stroke-width: 2;
  fill: var(--planet-color);
}

.chart-planet text {
  fill: var(--chart-ink);
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-size: 13px;
  font-weight: 400;
}

.chart-planet-glyph {
  fill: var(--chart-ink) !important;
  font-size: 30px !important;
  stroke: var(--planet-color);
  stroke-width: 1.3;
  paint-order: fill stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-planet-glyph.planet-glyph-balanced {
  font-size: 30px !important;
  stroke-width: 1.3;
}

.chart-planet-glyph-major {
  font-size: 41px !important;
}

.chart-planet-transit-natal .chart-planet-glyph {
  font-size: 33px !important;
  stroke-width: 1.38;
}

.chart-planet-transit-natal .chart-planet-glyph.planet-glyph-balanced {
  font-size: 33px !important;
  stroke-width: 1.38;
}

.chart-planet-transit-natal .chart-planet-glyph-major {
  font-size: 44px !important;
}

.chart-planet-transit-natal .chart-planet-degree,
.chart-planet-transit-natal .chart-planet-minute {
  font-size: 16px !important;
}

.chart-planet-transit-natal .chart-planet-sign {
  font-size: 21px !important;
}

.chart-planet-degree,
.chart-planet-minute {
  fill: var(--chart-ink) !important;
  font-size: 15px !important;
  font-weight: 400 !important;
}

.chart-planet-sign {
  fill: var(--planet-sign-light, var(--chart-ink)) !important;
  font-size: 20px !important;
  paint-order: fill stroke;
  stroke: color-mix(in srgb, var(--planet-sign-light, var(--planet-sign-color)) 72%, var(--chart-canvas));
  stroke-width: 0.32;
  font-weight: 500 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html:not([data-theme="dark"]) .chart-planet .chart-planet-sign {
  fill: var(--planet-sign-light, var(--chart-ink)) !important;
  stroke: color-mix(in srgb, var(--planet-sign-light, var(--planet-sign-color)) 72%, var(--chart-canvas));
  stroke-width: 0.32;
  font-weight: 500 !important;
  opacity: 1;
}

html:not([data-theme="dark"]) .chart-cusp-label .chart-cusp-label-sign {
  fill: var(--cusp-sign-light, var(--chart-ink)) !important;
  stroke: color-mix(in srgb, var(--cusp-sign-light, var(--cusp-sign-color)) 72%, var(--chart-canvas));
  stroke-width: 0.32;
  font-weight: 500 !important;
  opacity: 1;
}

html[data-theme="dark"] .chart-planet .chart-planet-sign {
  fill: var(--planet-sign-vivid) !important;
  stroke: color-mix(in srgb, var(--planet-sign-vivid) 58%, var(--chart-canvas));
  stroke-width: 0.32;
  font-weight: 500 !important;
  opacity: 1;
}

.chart-planet-retro {
  fill: var(--chart-retro) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .chart-planet-glyph {
  fill: color-mix(in srgb, var(--planet-color) 48%, var(--chart-ink)) !important;
  stroke: color-mix(in srgb, var(--planet-color) 78%, var(--chart-ink));
}

.chart-planet-overlay .chart-planet-glyph {
  font-size: 19px !important;
  stroke-width: 0.58;
  opacity: 0.9;
}

.chart-planet-overlay .chart-planet-glyph.planet-glyph-balanced {
  font-size: 19px !important;
  stroke-width: 0.58;
}

.chart-planet-overlay .chart-planet-degree,
.chart-planet-overlay .chart-planet-minute,
.chart-planet-overlay .chart-planet-sign {
  font-size: 11px !important;
  opacity: 0.82;
}

.chart-planet-overlay .chart-planet-sign {
  font-size: 14px !important;
  stroke-width: 0.75;
}

.chart-planet-transit-overlay .chart-planet-glyph,
.chart-planet-synastry-overlay .chart-planet-glyph,
.chart-planet-synastry-natal .chart-planet-glyph {
  fill: var(--planet-color) !important;
  stroke: color-mix(in srgb, var(--planet-color) 78%, #111827);
  stroke-width: 0.35;
  opacity: 1;
  filter: drop-shadow(0 1px 0 rgba(15, 23, 42, 0.1));
}

.chart-planet-transit-overlay .chart-planet-degree,
.chart-planet-transit-overlay .chart-planet-minute,
.chart-planet-transit-overlay .chart-planet-sign,
.chart-planet-synastry-overlay .chart-planet-degree,
.chart-planet-synastry-overlay .chart-planet-minute,
.chart-planet-synastry-overlay .chart-planet-sign,
.chart-planet-synastry-natal .chart-planet-degree,
.chart-planet-synastry-natal .chart-planet-minute,
.chart-planet-synastry-natal .chart-planet-sign {
  fill: var(--planet-color) !important;
  stroke: color-mix(in srgb, var(--planet-color) 76%, #111827);
  stroke-width: 0.25;
  opacity: 1;
}

.chart-planet-transit-overlay .chart-planet-degree,
.chart-planet-transit-overlay .chart-planet-minute,
.chart-planet-synastry-overlay .chart-planet-degree,
.chart-planet-synastry-overlay .chart-planet-minute,
.chart-planet-synastry-natal .chart-planet-degree,
.chart-planet-synastry-natal .chart-planet-minute {
  font-weight: 400 !important;
}

.chart-planet-transit-overlay .chart-planet-sign,
.chart-planet-synastry-overlay .chart-planet-sign,
.chart-planet-synastry-natal .chart-planet-sign {
  font-weight: 800 !important;
}

.chart-planet-transit-overlay .chart-planet-connector,
.chart-planet-synastry-overlay .chart-planet-connector,
.chart-planet-synastry-natal .chart-planet-connector {
  opacity: 1;
  stroke-width: 1.65;
}

.chart-planet-exterior-label {
  fill: var(--planet-color) !important;
  stroke: color-mix(in srgb, var(--surface) 86%, transparent);
  stroke-width: 0.64;
  paint-order: stroke fill;
  font-size: var(--transit-font-size, 11.2px) !important;
  font-weight: 740 !important;
  letter-spacing: 0;
}

.chart-planet-exterior-glyph {
  font-size: var(--transit-glyph-size, var(--transit-font-size, 11.2px)) !important;
}

/* Keep the measured font identical for inner and outer chart symbols. The
   renderer supplies the optical size; coordinates retain their own typography. */
.chart-planet .chart-planet-optical-glyph {
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-weight: 400 !important;
}

/* Use the same solid colour and fine outline on both planetary layers. */
html .chart-wheel-svg .chart-planet .chart-planet-optical-glyph {
  fill: var(--planet-color) !important;
  stroke: var(--planet-color) !important;
  stroke-width: 0.45 !important;
  paint-order: stroke fill;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1 !important;
  filter: none !important;
}

/* Venus and Mars have finer native strokes than Mercury in the symbol font.
   Compensate optically at every chart scale, on both planetary layers. */
html .chart-wheel-svg .chart-planet .chart-planet-optical-glyph.planet-glyph-balanced {
  stroke-width: 0.065em !important;
}

html[data-theme="dark"] .chart-wheel-svg .chart-planet .chart-planet-optical-glyph {
  fill: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink)) !important;
  stroke: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink)) !important;
}

.chart-planet-exterior-glyph-major {
  font-size: var(--transit-major-glyph-size, var(--transit-glyph-size, var(--transit-font-size, 11.2px))) !important;
}

.chart-planet-exterior-data {
  font-size: var(--transit-font-size, 11.2px) !important;
  font-weight: 500 !important;
  stroke: none;
}

.chart-planet-exterior-label-stacked .chart-planet-exterior-data {
  font-weight: 740;
  letter-spacing: 0;
}

.chart-planet-transit-overlay .chart-planet-exterior-label {
  fill: var(--planet-color) !important;
}

.chart-planet-transit-overlay .chart-planet-exterior-glyph.planet-glyph-balanced {
  stroke: var(--planet-color);
  stroke-width: 1.1;
  paint-order: stroke fill;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-planet-transit-primary .chart-planet-exterior-label {
  stroke-width: 0.78;
  font-weight: 800 !important;
}

.chart-planet-synastry-overlay .chart-planet-exterior-label {
  fill: #b94747 !important;
}

html[data-theme="dark"] .chart-planet-transit-overlay .chart-planet-exterior-label {
  fill: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink)) !important;
}

html[data-theme="dark"] .chart-planet-transit-overlay .chart-planet-exterior-glyph.planet-glyph-balanced {
  stroke: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink));
}

.chart-planet-progressed-overlay .chart-planet-exterior-label {
  fill: var(--planet-color) !important;
}

.chart-planet-progressed-overlay .chart-planet-exterior-glyph.planet-glyph-balanced {
  stroke: var(--planet-color);
}

html[data-theme="dark"] .chart-planet-progressed-overlay .chart-planet-exterior-label {
  fill: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink)) !important;
}

html[data-theme="dark"] .chart-planet-progressed-overlay .chart-planet-exterior-glyph.planet-glyph-balanced {
  stroke: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink));
}

html[data-theme="dark"] .chart-planet-synastry-overlay .chart-planet-exterior-label {
  fill: #ff9999 !important;
}

.transit-label-layer {
  pointer-events: visiblePainted;
}

.transit-leader-line {
  stroke-linecap: round;
  opacity: var(--transit-leader-opacity, 0.48);
  stroke-width: 1;
}

.transit-leader-line-bent {
  fill: none;
  stroke-linejoin: round;
}

.chart-planet-transit-overlay .transit-leader-line {
  opacity: var(--transit-leader-opacity, 0.48);
  stroke-width: 1;
}

.chart-planet-synastry-overlay .chart-planet-glyph {
  font-size: 18px !important;
  stroke-width: 0.24;
  filter: drop-shadow(0 1px 0 rgba(15, 23, 42, 0.08));
}

.chart-planet-synastry-overlay .chart-planet-glyph.planet-glyph-balanced {
  font-size: 18px !important;
  stroke-width: 0.24;
}

.chart-planet-synastry-overlay .chart-planet-degree,
.chart-planet-synastry-overlay .chart-planet-minute {
  font-size: 10px !important;
  font-weight: 400 !important;
}

.chart-planet-synastry-overlay .chart-planet-sign {
  font-size: 13px !important;
  font-weight: 740 !important;
  stroke-width: 0.18;
}

.chart-planet-synastry-overlay .chart-planet-connector,
.chart-planet-synastry-overlay .transit-leader-line {
  opacity: 0.5;
  stroke-width: 0.95;
}

.chart-planet-synastry-natal .chart-planet-connector {
  opacity: 0.68;
  stroke-width: 1.1;
}

.transit-label-debug-box {
  fill: rgba(220, 38, 38, 0.08);
  stroke: rgba(220, 38, 38, 0.42);
  stroke-dasharray: 4 4;
  stroke-width: 1;
}

.chart-planet {
  cursor: default;
  pointer-events: visiblePainted;
}

.chart-planet .chart-planet-hit {
  fill: transparent !important;
  fill-opacity: 0 !important;
  stroke: transparent !important;
  stroke-opacity: 0 !important;
  stroke-width: 0 !important;
  pointer-events: all;
}


.chart-planet-tooltip {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 12%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  padding: 7px 10px;
  white-space: nowrap;
}

.nodal-axis {
  stroke: var(--accent);
  stroke-width: 2.5;
}

.nodal-point {
  fill: var(--accent);
}

.nodal-point-south {
  fill: var(--warning);
}

.nodal-svg text {
  fill: var(--on-accent);
  font-size: 12px;
  font-weight: 900;
}

.floating-chart-panel {
  position: absolute;
  z-index: 4;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(390px, calc(100% - 28px));
  max-height: min(520px, calc(100% - 34px));
  overflow: hidden;
  border: 1px solid var(--accent-line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  box-shadow: var(--shadow-strong);
}

.floating-chart-panel[hidden],
.floating-panel-launcher[hidden],
.floating-chart-panel.is-panel-hidden,
.floating-panel-launcher.is-panel-hidden {
  display: none !important;
}

.floating-chart-panel-left {
  top: 18px;
  left: 18px;
}

.floating-chart-panel-right {
  top: 18px;
  right: 18px;
}

@media (min-width: 1680px) {
  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) {
    --floating-panel-width: clamp(280px, 20vw, 370px);
    --floating-panel-gutter: calc(var(--floating-panel-width) + 22px);
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .chart-wheel-main {
    padding-right: var(--floating-panel-gutter);
    padding-left: var(--floating-panel-gutter);
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .floating-chart-panel {
    width: var(--floating-panel-width);
    max-height: min(320px, calc(100% - 76px));
  }

  .chart-wheel-stage.is-full-chart .floating-chart-panel[data-panel-slot^="left"] {
    right: auto;
    left: 18px;
  }

  .chart-wheel-stage.is-full-chart .floating-chart-panel[data-panel-slot^="right"] {
    right: 18px;
    left: auto;
  }

  .chart-wheel-stage.is-full-chart .floating-chart-panel[data-panel-slot$="top"] {
    top: 58px;
    bottom: auto;
  }

  .chart-wheel-stage.is-full-chart .floating-chart-panel[data-panel-slot$="middle"] {
    top: 50%;
    bottom: auto;
    transform: translateY(-50%);
  }

  .chart-wheel-stage.is-full-chart .floating-chart-panel[data-panel-slot$="bottom"] {
    top: auto;
    bottom: 18px;
  }
}

.floating-chart-panel.dragging {
  cursor: grabbing;
  user-select: none;
}

.floating-chart-panel.resizing {
  user-select: none;
}

.floating-chart-panel[data-user-positioned="1"] {
  max-height: none;
}

.floating-chart-panel.is-map-toolbar-anchored {
  position: fixed;
  right: auto;
  bottom: auto;
  max-width: calc(100vw - 24px);
  margin: 0;
  overflow: hidden;
  transform: none;
  overscroll-behavior: contain;
}

.floating-chart-panel.is-map-toolbar-anchored .floating-panel-header {
  position: sticky;
  z-index: 3;
  top: 0;
  flex: 0 0 auto;
}

.floating-chart-panel.is-map-toolbar-anchored .floating-panel-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.floating-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: grab;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: 7px 10px;
}

.floating-panel-header span {
  display: none;
  margin-bottom: 3px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 900;
  text-transform: uppercase;
}

.floating-panel-header h3 {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}

.floating-panel-header p {
  display: none;
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 12px;
}

.floating-panel-header button,
.floating-panel-launcher {
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font-size: 12px;
  font-weight: 900;
}

.floating-panel-header button {
  width: 28px;
  min-height: 28px;
  flex: 0 0 auto;
}

.floating-panel-content {
  min-height: 0;
  overflow: auto;
  padding: 1px 0 3px;
}

.chart-calculation-details {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 4px 10px 6px;
}

.chart-calculation-details > div {
  display: grid;
  grid-template-columns: minmax(112px, 0.85fr) minmax(0, 1.15fr);
  gap: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding: 7px 2px;
}

.chart-calculation-details > div:last-child {
  border-bottom: 0;
}

.chart-calculation-details dt,
.chart-calculation-details dd {
  margin: 0;
  font-size: 12px;
  line-height: 1.3;
}

.chart-calculation-details dt {
  color: var(--muted);
  font-weight: 680;
}

.chart-calculation-details dd {
  color: var(--text);
  font-weight: 760;
  text-align: right;
}

.floating-chart-panel-stations {
  width: min(440px, calc(100% - 28px));
}

.progressed-stations-list {
  display: grid;
  gap: 8px;
  padding: 9px;
}

.progressed-station-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent-line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
}

.progressed-station-card > header {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  padding: 8px 9px;
}

.progressed-station-planet {
  display: grid;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--astro-table-color) 12%, var(--surface));
  font-size: 20px;
  place-items: center;
}

.progressed-station-card > header > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.progressed-station-card > header strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.2;
}

.progressed-station-card > header span:not(.progressed-station-planet) {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.2;
}

.progressed-station-status {
  border-radius: 999px;
  padding: 4px 7px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.progressed-station-card.is-direct .progressed-station-status {
  background: color-mix(in srgb, #2f8f62 14%, var(--surface));
  color: color-mix(in srgb, #2f8f62 84%, var(--text));
}

.progressed-station-card.is-retrograde .progressed-station-status {
  background: color-mix(in srgb, #b36a3c 14%, var(--surface));
  color: color-mix(in srgb, #b36a3c 84%, var(--text));
}

.progressed-station-summary {
  margin: 0;
  padding: 7px 9px 5px;
  color: var(--text);
  font-size: 11.5px;
  font-weight: 760;
  line-height: 1.3;
}

.progressed-station-card dl {
  display: grid;
  margin: 0;
  padding: 0 9px 7px;
}

.progressed-station-card dl > div {
  display: grid;
  grid-template-columns: minmax(102px, 0.75fr) minmax(0, 1.25fr);
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 62%, transparent);
  padding: 5px 0;
}

.progressed-station-card dt,
.progressed-station-card dd {
  margin: 0;
  font-size: 10.5px;
  line-height: 1.3;
}

.progressed-station-card dt {
  color: var(--muted);
  font-weight: 650;
}

.progressed-station-card dd {
  color: var(--text);
  font-weight: 720;
  text-align: right;
}

.progressed-stations-note {
  margin: 0;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 32%, var(--surface));
  color: var(--muted);
  padding: 9px 11px 10px;
  font-size: 10.5px;
  line-height: 1.4;
}

.progressed-stations-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 20px 16px;
  text-align: center;
}

.progressed-stations-empty > span {
  display: grid;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, #2f8f62 14%, var(--surface));
  color: #2f8f62;
  font-size: 18px;
  font-weight: 900;
  place-items: center;
}

.progressed-stations-empty strong {
  font-size: 13px;
}

.progressed-stations-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

@media (max-width: 520px) {
  .progressed-station-card dl > div {
    grid-template-columns: minmax(92px, 0.7fr) minmax(0, 1.3fr);
  }
}

.floating-resizer {
  position: absolute;
  z-index: 2;
  background: transparent;
}

.floating-resizer-n,
.floating-resizer-s {
  left: 12px;
  right: 12px;
  height: 8px;
  cursor: ns-resize;
}

.floating-resizer-e,
.floating-resizer-w {
  top: 12px;
  bottom: 12px;
  width: 8px;
  cursor: ew-resize;
}

.floating-resizer-n {
  top: 0;
}

.floating-resizer-e {
  right: 0;
}

.floating-resizer-s {
  bottom: 0;
}

.floating-resizer-w {
  left: 0;
}

.floating-resizer-ne,
.floating-resizer-se,
.floating-resizer-sw,
.floating-resizer-nw {
  width: 16px;
  height: 16px;
}

.floating-resizer-ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.floating-resizer-se {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
}

.floating-resizer-sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.floating-resizer-nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.floating-resizer-se::after {
  content: "";
  position: absolute;
  right: 5px;
  bottom: 5px;
  width: 9px;
  height: 9px;
  border-right: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  border-bottom: 2px solid color-mix(in srgb, var(--accent) 54%, var(--line));
  opacity: 0.75;
}

.floating-panel-launcher {
  position: relative;
  z-index: 5;
  min-height: 32px;
  padding: 0 13px;
  justify-self: end;
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
}

.floating-launchers {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  min-height: 32px;
  pointer-events: none;
}

.floating-launchers .floating-panel-launcher {
  pointer-events: auto;
}

.floating-panel-launcher-left,
.floating-panel-launcher-right {
  margin-left: 8px;
}

.floating-chart-panel-multiple-longitud {
  top: 6px;
  right: auto;
  width: 300px;
  height: 344px;
  max-height: none;
}

.chart-wheel-workspace-multiple .floating-chart-panel-multiple-longitud.is-viewport-anchored {
  position: fixed;
  right: auto;
  bottom: auto;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  margin: 0;
  transform: none;
  overscroll-behavior: contain;
}

.chart-wheel-workspace-multiple .floating-chart-panel-multiple-longitud.is-viewport-anchored .floating-panel-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.floating-chart-panel-multiple-longitud .floating-panel-header {
  padding: 7px 10px;
}

.floating-chart-panel-multiple-longitud .floating-panel-header span,
.floating-chart-panel-multiple-longitud .floating-panel-header p {
  display: none;
}

.floating-chart-panel-multiple-longitud .floating-panel-header h3 {
  font-size: 15px;
  line-height: 1.15;
}

.floating-chart-panel-multiple-longitud .floating-panel-header button {
  width: 28px;
  min-height: 28px;
}

.floating-chart-panel-multiple-longitud .floating-panel-content {
  padding: 1px 0 3px;
}

.floating-chart-panel-multiple-longitud .chart-inline-table {
  font-size: 12px;
  line-height: 20px;
}

.floating-chart-panel-multiple-longitud .chart-inline-table td {
  height: 20px;
  padding: 0 5px;
  line-height: 20px;
  vertical-align: middle;
}

.floating-chart-panel-multiple-longitud .chart-inline-table td:first-child {
  font-size: 16px;
}

.floating-chart-panel-multiple-longitud .chart-inline-table td:nth-child(3),
.floating-chart-panel-multiple-longitud .chart-inline-table td:nth-child(4),
.floating-chart-panel-multiple-longitud .chart-inline-table td:nth-child(5) {
  font-size: 16px;
  line-height: 20px;
}

.floating-chart-panel-multiple-left {
  left: 8px;
}

.floating-chart-panel-multiple-right {
  top: 56px;
  height: 344px;
  right: 22px;
  left: auto;
}

.floating-chart-panel-multiple-top {
  top: 877px;
  bottom: auto;
  height: 344px;
  left: 50%;
  transform: translateX(-50%);
}

.floating-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 20px;
}

.floating-table th,
.floating-table td {
  border-bottom: 1px solid var(--line);
  padding: 0 5px;
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.floating-table td {
  height: 20px;
  line-height: 20px;
}

.floating-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-block: 3px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.floating-table td {
  color: var(--text-soft);
}

.floating-aspect-table {
  table-layout: fixed;
}

.floating-aspect-table th,
.floating-aspect-table td {
  height: 22px;
  padding-inline: 6px;
  line-height: 22px;
}

.floating-aspect-table th:nth-child(1),
.floating-aspect-table td:nth-child(1),
.floating-aspect-table th:nth-child(2),
.floating-aspect-table td:nth-child(2),
.floating-aspect-table th:nth-child(3),
.floating-aspect-table td:nth-child(3) {
  width: 38px;
  text-align: center;
}

.floating-aspect-table th:nth-child(4),
.floating-aspect-table td:nth-child(4) {
  text-align: left;
}

.floating-aspect-table th:nth-child(5),
.floating-aspect-table td:nth-child(5) {
  width: 62px;
  text-align: center;
}

.floating-aspect-table th {
  height: 28px;
  line-height: 20px;
}

.floating-panel-content .chart-inline-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  line-height: 20px;
}

.floating-panel-content .chart-inline-table tr:nth-child(even) {
  background: color-mix(in srgb, var(--accent-soft) 46%, transparent);
}

.floating-panel-content .chart-inline-table td {
  height: 20px;
  padding: 0 5px;
  line-height: 20px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
}

.floating-panel-content .chart-inline-table td:first-child {
  color: var(--text);
  font-size: 16px;
  font-weight: 900;
}

.floating-panel-content .chart-inline-table td:nth-child(3),
.floating-panel-content .chart-inline-table td:nth-child(4),
.floating-panel-content .chart-inline-table td:nth-child(5),
.floating-table td span:not(.retro-mark) {
  font-size: 16px;
  line-height: 20px;
}

.floating-chart-panel-multiple-longitud .floating-panel-content .chart-inline-table {
  line-height: 20px;
}

.floating-chart-panel-multiple-longitud .floating-panel-content .chart-inline-table td {
  height: 20px;
  padding: 0 5px;
  line-height: 20px;
  vertical-align: middle;
}

.floating-chart-panel-multiple-longitud .floating-panel-content .chart-inline-table td:first-child,
.floating-chart-panel-multiple-longitud .floating-panel-content .chart-inline-table td:nth-child(3),
.floating-chart-panel-multiple-longitud .floating-panel-content .chart-inline-table td:nth-child(4),
.floating-chart-panel-multiple-longitud .floating-panel-content .chart-inline-table td:nth-child(5) {
  font-size: 16px;
  line-height: 20px;
}

.floating-panel-content .chart-stat-box {
  gap: 6px;
}

.floating-panel-content .chart-stat-row {
  min-height: 27px;
}

.chart-distribution-panel {
  display: grid;
  gap: 12px;
}

.distribution-visuals {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  padding: 6px 0;
}

.distribution-circle {
  position: relative;
  display: grid;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-line) 60%, var(--line));
  border-radius: 50%;
  background: var(--surface-soft);
}

.distribution-circle span {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  color: var(--text);
  font-size: 13px;
  font-weight: 800;
}

.distribution-circle::before,
.distribution-circle::after {
  position: absolute;
  z-index: 0;
  background: color-mix(in srgb, var(--accent-line) 70%, var(--line));
  content: none;
  pointer-events: none;
}

.distribution-quadrants::before,
.distribution-halves-horizontal::before {
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  content: "";
  transform: translateX(-0.5px);
}

.distribution-quadrants::after,
.distribution-halves-vertical::after {
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  transform: translateY(-0.5px);
}

.distribution-quadrants {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.distribution-halves-vertical {
  grid-template-rows: 1fr 1fr;
}

.distribution-halves-horizontal {
  grid-template-columns: 1fr 1fr;
}

.distribution-table th,
.distribution-table td {
  text-align: center;
}

.floating-planet,
.aspect-symbol {
  font-size: var(--chart-table-symbol-size, 16px);
  font-weight: var(--chart-table-symbol-weight, 900);
  text-align: center;
}

:root {
  --chart-table-symbol-size: 16px;
  --chart-table-balanced-symbol-size: 19px;
  --chart-table-symbol-weight: 900;
}

:is(.chart-inline-table, .floating-table, .chart-mini-aspect-grid) :is(
  .astro-table-planet-color,
  .astro-table-zodiac-color,
  .aspect-symbol
) {
  font-size: var(--chart-table-symbol-size) !important;
  font-weight: var(--chart-table-symbol-weight);
  line-height: 20px;
  text-align: center;
}

.chart-inline-table .astro-table-planet-color.planet-glyph-balanced,
.floating-table .astro-table-planet-color.planet-glyph-balanced,
.chart-mini-aspect-grid .astro-table-planet-color.planet-glyph-balanced,
.aspect-matrix-table .planet-glyph-balanced {
  font-size: var(--chart-table-symbol-size) !important;
  font-weight: var(--chart-table-symbol-weight);
  line-height: 20px;
  -webkit-text-stroke: 0.065em currentColor;
}

.astro-table-planet-color.planet-glyph-balanced,
.table-planet-glyph.planet-glyph-balanced {
  -webkit-text-stroke: 0.065em currentColor;
  paint-order: stroke fill;
}

.astro-table-planet-color.planet-glyph-balanced .retro-mark {
  -webkit-text-stroke: 0;
}

.aspect-matrix-table th,
.aspect-matrix-table td {
  text-align: center;
}

.aspect-matrix-table td {
  min-width: 36px;
}

.aspect-matrix-table td span {
  display: block;
  font-size: 11px;
}

.aspect-matrix-table .aspect-symbol {
  font-size: var(--chart-table-symbol-size) !important;
}

.retro-mark {
  display: inline-block;
  margin-left: 4px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  vertical-align: super;
}

.legal-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 26px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.72;
}

.legal-content p {
  max-width: 690px;
  margin: 0 0 14px;
}

.legal-content h3,
.legal-content h4 {
  max-width: 690px;
  margin: 24px 0 9px;
  color: var(--text);
  line-height: 1.25;
  letter-spacing: 0;
}

.legal-content h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
}

.legal-content h3::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--accent);
}

.legal-content h4 {
  color: var(--muted);
  font-size: 15px;
}

.legal-content a {
  color: var(--accent);
  font-weight: 800;
}

.legal-content strong {
  color: var(--text);
}

.billing-info-content {
  display: grid;
  gap: 22px;
  overflow: auto;
  padding: 24px 26px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.billing-info-content h3 {
  margin: 0 0 8px;
  color: var(--text);
  font-size: 17px;
}

.billing-info-content p {
  margin: 0;
}

.rate-list,
.usage-list {
  display: grid;
  gap: 8px;
}

.rate-list article,
.usage-list article {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 12px;
}

.rate-list b,
.usage-list b {
  color: var(--text);
}

.rate-list span,
.usage-list span,
.rate-list small,
.usage-list small {
  color: var(--muted);
  font-size: 13px;
}

.chart-data-dialog::backdrop {
  background: var(--overlay);
}

.chart-data-modal {
  display: grid;
  grid-template-rows: auto auto minmax(160px, 1fr) auto;
  height: min(90vh, 860px);
  max-height: min(90vh, 860px);
  overflow: hidden;
}

.chart-data-header,
.chart-data-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
}

.chart-data-header {
  border-bottom: 1px solid var(--line);
}

.chart-data-toolbar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  max-height: min(46vh, 460px);
  overflow: auto;
  border-bottom: 1px solid var(--line);
  padding: 14px 20px;
  scrollbar-width: thin;
}

.chart-data-toolbar label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 550;
}

.chart-prompt-config {
  display: grid;
  min-width: 0;
  flex: 1 1 auto;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 56%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
  padding: 14px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 4%, transparent);
}

.chart-prompt-config-head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}

.chart-prompt-config-head > div {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.chart-prompt-config-head > div > span,
.chart-prompt-options legend,
.chart-data-format-field > span {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chart-prompt-config-head strong {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-data-toolbar .chart-prompt-profile {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.chart-prompt-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.chart-prompt-options legend {
  width: 100%;
  margin: 0 0 1px;
  padding: 0;
}

.chart-prompt-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 52%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 650;
  padding: 0 11px;
}

.chart-prompt-options label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--accent-line));
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface));
  color: var(--accent);
}

.chart-prompt-config input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 15px;
  min-width: 15px;
  height: 15px;
  min-height: 15px;
  flex: 0 0 15px;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  accent-color: var(--accent);
}

.chart-prompt-preferences {
  display: grid;
  gap: 10px;
  border-top: 1px solid color-mix(in srgb, var(--accent-line) 42%, transparent);
  padding-top: 10px;
}

.chart-prompt-preferences > header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 16px;
}

.chart-prompt-preferences > header strong {
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 760;
}

.chart-prompt-preferences > header label {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 48%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
}

.chart-prompt-preferences > header label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--accent-line));
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface));
  color: var(--accent);
}

.chart-prompt-preferences-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 58%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface-soft) 74%, white);
  padding: 12px;
}

.chart-prompt-choice-group,
.chart-data-toolbar .chart-prompt-select-field,
.chart-data-toolbar .chart-prompt-extra-field {
  display: grid;
  min-width: 0;
  gap: 7px;
  margin: 0;
}

.chart-prompt-choice-group {
  border: 1px solid color-mix(in srgb, var(--accent-line) 50%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, white);
  padding: 10px;
}

.chart-prompt-choice-group legend,
.chart-prompt-select-field > span,
.chart-prompt-extra-field > span {
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 720;
  line-height: 1.2;
}

.chart-prompt-choice-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 520;
}

.chart-prompt-choice-group label:has(input:checked) {
  color: var(--accent);
  font-weight: 720;
}

.chart-prompt-select-field select {
  width: 100%;
  min-height: 38px;
  border-radius: 9px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.chart-data-toolbar .chart-prompt-extra-field {
  grid-column: 1 / -1;
}

.chart-prompt-extra-field textarea {
  width: 100%;
  min-height: 72px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  padding: 9px 10px;
}

.chart-prompt-extra-field textarea:focus {
  border-color: var(--accent-line);
  outline: 2px solid color-mix(in srgb, var(--accent-soft) 80%, transparent);
  outline-offset: 1px;
}

.chart-data-toolbar select {
  min-height: 32px;
  border-radius: 8px;
  padding: 5px 30px 5px 10px;
}

.chart-data-header h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: 0;
}

.icon-close {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ink-soft);
  color: var(--text);
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
}

.icon-close:hover {
  background: var(--line);
}

.chart-data-output {
  min-height: 0;
  margin: 0;
  overflow: auto;
  padding: 18px 20px;
  background: var(--surface-soft);
  color: var(--text-soft);
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.chart-data-footer {
  border-top: 1px solid var(--line);
}

.chart-data-footer-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 14px;
}

.chart-data-format-field {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
}

.chart-data-format-field > span {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chart-data-format-field select {
  width: auto;
  min-width: 112px;
  min-height: 34px;
  border-radius: 8px;
  padding: 5px 30px 5px 10px;
}

.chart-data-actions {
  display: flex;
  gap: 10px;
}

.chart-data-actions button {
  min-width: 92px;
  padding: 0 14px;
}

.copy-status {
  color: var(--accent);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 860px) {
  .chart-data-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .chart-prompt-config-head {
    flex-direction: column;
  }

  .chart-prompt-profile,
  .chart-data-format-field {
    width: 100%;
  }

  .chart-prompt-preferences-panel {
    grid-template-columns: 1fr;
  }

  .chart-prompt-profile select,
  .chart-data-format-field select {
    width: 100%;
  }

  .chart-data-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-data-footer-meta {
    align-items: stretch;
    flex-direction: column;
    gap: 8px;
  }

  .landing-nav {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-nav-actions,
  .landing-hero-actions {
    width: 100%;
  }

  .landing-nav-actions a,
  .landing-nav-actions button,
  .landing-hero-actions a,
  .landing-hero-actions button {
    flex: 1;
    justify-content: center;
  }

  .landing-nav-actions .landing-theme-switcher {
    flex: 0 0 100%;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 2px;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice {
    flex: 0 0 30px;
  }

  .landing-hero {
    min-height: auto;
    place-items: start;
    text-align: left;
  }

  .landing-hero-inner {
    margin-top: 0;
    text-align: left;
  }

  .hero-astro-wheel {
    right: -330px;
    bottom: -145px;
    width: min(760px, 118vw);
    opacity: 0.28;
    transform: rotate(-9deg);
  }

  .landing-astro-preview {
    margin-top: 28px;
  }

  .landing-hero-actions {
    justify-content: flex-start;
  }

  .landing-theme-switcher {
    justify-content: flex-start;
  }

  .landing-pro-layout {
    display: block;
  }

  .landing-astro-preview,
  .landing-astroanamnesis-inner,
  .landing-feature-grid,
  .landing-audience-grid {
    grid-template-columns: 1fr;
  }

  .landing-pro-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 26px;
    padding: 0;
  }

  .landing-pro-grid::before {
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--accent) 44%, var(--line)) 14%,
      color-mix(in srgb, var(--accent) 44%, var(--line)) 86%,
      transparent
    );
    transform: scaleY(0);
    transform-origin: top center;
  }

  .landing-pro-grid.is-flow-visible::before {
    transform: scaleY(1);
  }

  .landing-pro-grid::after {
    display: none;
  }

  .landing-pro-grid article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .landing-pro-grid h3 {
    margin: 0 0 6px;
  }

  .landing-astroanamnesis-copy {
    width: 100%;
  }

  .landing-core-figure {
    justify-self: center;
    width: min(82vw, 360px);
    border-radius: 24px;
  }

  .billing-current-plan {
    grid-template-columns: 1fr;
  }

  .subscription-panel {
    grid-template-columns: 1fr;
  }

  .subscription-details div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .subscription-offer {
    align-items: flex-start;
    flex-direction: column;
  }

  .landing-cta,
  .landing-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .intake-screen {
    grid-template-columns: 1fr;
    align-items: start;
  }

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

  .intake-panel {
    justify-self: stretch;
  }

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

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

  .shell.sidebar-collapsed .sidebar-collapse-button {
    top: 10px;
    left: auto;
    right: 10px;
  }

  .shell.sidebar-collapsed .collapsed-sidebar-actions {
    top: 52px;
    right: 10px;
    left: auto;
  }

  .collapsed-chat-popover {
    top: 52px;
    right: 52px;
    left: auto;
    width: min(300px, calc(100vw - 70px));
  }

  .private-screen {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .private-screen.sidebar-collapsed {
    grid-template-columns: 1fr;
  }

  .private-screen.sidebar-collapsed .private-sidebar {
    display: none;
  }

  .private-screen.sidebar-collapsed .private-sidebar-collapse-button {
    top: 10px;
    left: auto;
    right: 10px;
  }

  .admin-screen {
    grid-template-columns: 1fr;
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .admin-panel {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .admin-header {
    padding: 22px 18px 18px;
  }

  .admin-tabs {
    padding: 0 14px;
  }

  .admin-section {
    padding: 18px;
  }

  .admin-waitlist-head {
    align-items: stretch;
    flex-direction: column;
  }

  .admin-waitlist-export {
    width: 100%;
  }

  .admin-waitlist-filters {
    grid-template-columns: 1fr;
  }

  .admin-waitlist-search,
  .admin-waitlist-reset {
    width: 100%;
  }

  .admin-form-grid,
  .admin-adjust-summary,
  .admin-order-context {
    grid-template-columns: 1fr;
  }

  .admin-modal footer {
    flex-direction: column-reverse;
  }

  .admin-modal footer button {
    width: 100%;
  }

  .sidebar {
    height: auto;
    min-height: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px;
  }

  .shell.sidebar-collapsed .sidebar {
    display: none;
  }

  .chat-history-panel {
    flex: 0 0 auto;
    min-height: 0;
  }

  .chat-history-list {
    max-height: 220px;
  }

  .private-sidebar {
    height: auto;
    min-height: 0;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 18px;
  }

  .private-sidebar > div:first-child {
    overflow: visible;
  }

  .private-space-nav {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .private-feature-nav,
  .private-quick-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .private-feature-nav p,
  .private-quick-nav p {
    grid-column: 1 / -1;
  }

  .private-space-nav button {
    justify-content: center;
    padding: 0 8px;
  }

  .private-feature-nav button,
  .private-quick-nav button {
    justify-content: center;
    padding: 0 8px;
  }

  .private-panel {
    height: auto;
    overflow: visible;
    padding: 22px 18px;
  }

  .private-maps-section {
    height: auto;
    min-height: 70vh;
  }

  .private-maps-stage {
    min-height: 70vh;
  }

  #private-list-section::after {
    display: none;
  }

  .private-transits-controls {
    grid-template-columns: 1fr;
  }

  .private-transit-filters {
    align-items: stretch;
    flex-direction: column;
  }

  .private-transit-orb-filter {
    width: 100%;
  }

  .featured-transit-head {
    align-items: stretch;
    flex-direction: column;
  }

  .featured-transit-intensity {
    width: fit-content;
  }

  .featured-transit-copy {
    grid-template-columns: 1fr;
  }

  .private-header {
    align-items: stretch;
    flex-direction: column;
  }

  .billing-header {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-wheel-heading {
    align-items: start;
    flex-direction: column;
  }

  .chart-wheel-title-block {
    min-width: 0;
  }

  .chart-wheel-controls {
    width: 100%;
  }

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

  .chart-wheel-stage.is-multiple-chart {
    padding: 16px;
  }

  .chart-wheel-workspace-multiple,
  .chart-wheel-triple {
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .chart-wheel-triple {
    display: grid;
    gap: 18px;
  }

  .chart-multiple-topbar {
    position: static;
    width: 100%;
    max-width: none;
    justify-content: space-between;
    gap: 12px;
  }

  .chart-multiple-topbar .chart-tools-multiple {
    flex-wrap: wrap;
  }

  .chart-triple-slot {
    position: static;
    width: 100%;
    transform: none;
  }

  .chart-wheel-card-triple .chart-card-header {
    position: static;
    margin-bottom: 8px;
    transform: none;
    pointer-events: auto;
  }

  .chart-wheel-card-triple p {
    display: block;
  }

  .nodal-schema-layout {
    grid-template-columns: 1fr;
  }

  .nodal-side-tables {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    padding-top: 0;
  }

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

  .chart-side-panel {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .chart-wheel-workspace,
  .chart-wheel-main {
    min-height: auto;
  }

  .floating-chart-panel {
    position: relative;
    top: auto;
    right: auto;
    left: auto;
    width: 100%;
    max-height: 360px;
    margin-top: 12px;
  }

  .floating-panel-launcher {
    position: relative;
    right: auto;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: 10px;
  }

  .chat-panel {
    height: calc(100vh - 230px);
  }
}

@media (max-width: 560px) {
  .landing-nav,
  .landing-band,
  .landing-pro,
  .landing-cta,
  .landing-footer {
    padding-right: 18px;
    padding-left: 18px;
  }

  .landing-hero {
    padding-right: 18px;
    padding-left: 18px;
  }

  .hero-astro-wheel {
    right: -360px;
    bottom: auto;
    top: 86px;
    width: 720px;
    opacity: 0.18;
  }

  .landing-nav-actions,
  .landing-hero-actions {
    display: flex;
    flex-wrap: wrap;
  }

  .landing-nav-actions .landing-theme-switcher {
    justify-content: flex-start;
  }

  .landing-nav-actions a,
  .landing-nav-actions button:not(.theme-choice),
  .landing-hero-actions a,
  .landing-hero-actions button {
    flex: 1 1 140px;
  }

  .landing-astro-card {
    min-height: auto;
  }

  .landing-astro-visual,
  .landing-astro-visual svg {
    min-height: 300px;
  }

  .landing-astro-system {
    padding: 12px;
  }

  .landing-astro-note {
    width: 100%;
    font-size: 13px;
  }

  .intake-screen {
    padding: 18px;
  }

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

  .span-2 {
    grid-column: span 1;
  }

  .messages {
    padding: 20px 16px;
  }

  .composer {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 12px 16px;
  }

  .shell.chat-is-empty .composer {
    top: 48%;
    width: calc(100% - 28px);
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 10px;
  }

  .shell.chat-is-empty .empty-chat-hero {
    top: calc(48% - 145px);
  }

  .composer .model-control,
  .composer > #send-button {
    grid-column: 1 / -1;
  }

  .chat-legal-consent {
    margin: 0 16px 10px;
  }

  .chart-wheel-controls {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-wheel-controls label {
    min-width: 0;
  }

  .chart-context-button,
  .chart-export-actions,
  .chart-wheel-status {
    width: 100%;
    justify-content: center;
  }

  .chart-wheel-stage {
    padding: 18px 16px 22px;
  }

  .chart-wheel-card {
    padding: 12px;
  }

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

  .entry-actions,
  .private-form-actions,
  .people-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .people-item {
    align-items: stretch;
    flex-direction: column;
  }

  .prompt-suggestions {
    grid-auto-columns: minmax(210px, 82vw);
    padding: 10px 16px;
  }

  .chart-data-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .legal-header {
    padding: 18px 16px;
  }

  .legal-content {
    padding: 18px 16px;
  }

  .cookie-banner {
    left: 16px;
    right: 16px;
    bottom: 16px;
    flex-direction: column;
    align-items: stretch;
    width: auto;
  }

  .cookie-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .chart-data-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-astro-wheel {
    animation: none;
  }
}



/* Typography refinement - Inter */
:root {
  --font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  font-family: "Astro Jupiter", var(--font-ui);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.46;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font-family: "Astro Jupiter", var(--font-ui);
  font-weight: 400;
  letter-spacing: 0;
}

button,
.secondary-action,
.sidebar-tool-button,
.person-switch-button,
.credit-info-button,
.chat-section-action,
.chat-folder-menu button,
.chat-history-menu button,
.chat-history-move-panel button,
.folder-modal footer button,
.legal-consent button,
.cookie-actions button,
.chart-data-actions button,
.chart-context-button,
.chart-export-button,
.message-action {
  font-weight: 500 !important;
}

.primary-action,
.landing-try,
#send-button,
.sidebar-new-chat,
.private-add,
.private-form-actions button[type="submit"],
.composer > #send-button {
  font-weight: 600 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.private-header h2,
.account-settings h1,
.folder-modal h2,
.chart-wheel-card h3,
.chart-title,
.landing-section-head h2,
.landing-astroanamnesis-copy h2,
.landing-cta h2 {
  font-family: "Astro Jupiter", var(--font-ui);
  font-weight: 600 !important;
  letter-spacing: 0;
}

b,
strong,
.message-content strong,
.private-user strong,
.birth-summary strong,
.people-item b,
.plan-card b,
.chat-history-move-panel b {
  font-weight: 600 !important;
}

.sidebar,
.private-sidebar {
  font-size: 14px;
}

.sidebar h1,
.private-sidebar h1,
.sidebar-title-row h1 {
  font-size: 30px;
  font-weight: 600 !important;
  line-height: 1.08;
}

.birth-summary,
.private-user {
  font-size: 13px;
  line-height: 1.42;
}

.birth-summary strong {
  font-size: 15px;
}

.sidebar-tool-button,
.sidebar-new-chat,
.sidebar-space-button,
.sidebar-account-toggle,
.person-switch-button {
  font-size: 13px;
}

.chat-section-head,
.chat-history-head {
  font-size: 12.5px;
  font-weight: 500 !important;
}

.chat-section-head small,
.chat-history-head small,
.chat-folder-item small,
.chat-history-load em,
.chat-history-load small,
.sidebar-account-text small,
.sidebar-account-card small,
.chat-credit-summary span,
.chat-credit-summary small {
  font-weight: 400 !important;
}

.chat-folder-item,
.chat-history-load span {
  font-size: 13px;
  font-weight: 500 !important;
  line-height: 1.26;
}

.chat-history-load em,
.chat-history-load small {
  font-size: 11px;
  line-height: 1.26;
}

.chat-folder-menu-button,
.chat-history-menu-button {
  font-weight: 600 !important;
}

.chat-history-menu button,
.chat-history-move-panel button,
.chat-folder-menu button {
  font-size: 12px;
  font-weight: 500 !important;
}

.chat-history-move-panel p,
.folder-modal .field span,
.context-files strong,
.context-attach-label,
.eyebrow,
.chart-wheel-controls span,
.model-control span {
  font-weight: 500 !important;
}

.message {
  font-size: 15px;
  line-height: 1.58;
}

.message.system,
.status,
.auth-status,
.private-subtitle,
.people-item small,
.plan-card small,
.plan-card span {
  font-weight: 400 !important;
}

.landing-hero-kicker,
.landing-hero-copy,
.landing-hero-subcopy,
.landing-astroanamnesis-copy p:not(.eyebrow),
.landing-feature-grid p,
.landing-cta p {
  font-weight: 400;
}

.landing-hero-accent,
.landing-feature-grid h3 {
  font-weight: 600 !important;
}

/* Premium landing refinement */
.landing-hero {
  min-height: auto;
  position: relative;
  align-content: start;
  gap: clamp(26px, 4vw, 52px);
  padding-top: clamp(22px, 4.5vh, 48px);
  padding-bottom: clamp(38px, 6vh, 68px);
  overflow: hidden;
  isolation: isolate;
}

.landing-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin-top: 0;
}

.hero-astro-wheel {
  --hero-wheel-teal: color-mix(in srgb, var(--accent) 78%, #26444a);
  --hero-wheel-blue: #d8e7ea;
  --hero-wheel-copper: #b98d5f;
  --hero-wheel-coral: #d88f8a;
  --hero-wheel-gold: #e7d783;
  --hero-wheel-green: #a8cfae;
  --hero-wheel-sky: #9ac9df;
  position: absolute;
  right: max(-340px, -17vw);
  bottom: max(-210px, -11vw);
  z-index: 0;
  width: clamp(560px, 52vw, 920px);
  aspect-ratio: 1 / 1;
  margin: 0;
  color: var(--hero-wheel-teal);
  opacity: 0.82;
  pointer-events: none;
  user-select: none;
  transform: rotate(-7deg);
  animation: heroWheelFloat 18s ease-in-out infinite alternate;
}

.hero-astro-wheel::before {
  content: "";
  position: absolute;
  inset: 16% 0 0 0;
  background:
    radial-gradient(circle at 42% 44%, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.18) 38%, transparent 65%);
  filter: blur(12px);
}

.hero-astro-wheel-svg {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.hero-wheel-glow {
  fill: url(#heroWheelGlow);
}

.hero-wheel-paper {
  fill: color-mix(in srgb, var(--surface) 88%, var(--accent) 5%);
  fill-opacity: 0.68;
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 22%, transparent);
  stroke-width: 1.2;
}

.hero-wheel-zodiac-sectors,
.hero-wheel-sector {
  fill: none;
}

.hero-wheel-sector {
  stroke-width: 47;
  stroke-dasharray: 0.9 11.1;
  stroke-linecap: butt;
  opacity: 0.36;
}

.hero-wheel-sector-fire {
  stroke: var(--hero-wheel-coral);
}

.hero-wheel-sector-earth {
  stroke: var(--hero-wheel-green);
}

.hero-wheel-sector-air {
  stroke: var(--hero-wheel-gold);
}

.hero-wheel-sector-water {
  stroke: var(--hero-wheel-sky);
}

.hero-wheel-ring,
.hero-wheel-sign-lines line,
.hero-wheel-house-lines line,
.hero-wheel-aspects path,
.hero-wheel-outer-annotations line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hero-wheel-ring-outer {
  stroke: color-mix(in srgb, #17232a 52%, var(--hero-wheel-teal));
  stroke-width: 2;
  opacity: 0.72;
}

.hero-wheel-ring-dodeca-band {
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 42%, #ffffff);
  stroke-width: 25;
  stroke-dasharray: 0.44 0.56;
  opacity: 0.2;
  transform: rotate(-90deg);
}

.hero-wheel-ring-dodecatemoria {
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 68%, var(--hero-wheel-blue));
  stroke-width: 17;
  stroke-dasharray: 0.18 0.82;
  opacity: 0.42;
  transform: rotate(-90deg);
}

.hero-wheel-ring-decan {
  stroke: color-mix(in srgb, #10272b 34%, var(--hero-wheel-teal));
  stroke-width: 2.2;
  stroke-dasharray: 0.08 0.92;
  opacity: 0.56;
  transform: rotate(-90deg);
}

.hero-wheel-ring-zodiac {
  stroke: color-mix(in srgb, #17232a 46%, var(--hero-wheel-teal));
  stroke-width: 1.55;
  stroke-dasharray: 0.88 0.12;
  opacity: 0.68;
  transform: rotate(-90deg);
}

.hero-wheel-ring-inner,
.hero-wheel-ring-observer {
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 44%, transparent);
  stroke-width: 1.1;
  opacity: 0.66;
}

.hero-wheel-sign-lines line {
  stroke: color-mix(in srgb, #17232a 42%, var(--hero-wheel-teal));
  stroke-width: 1.15;
  opacity: 0.58;
}

.hero-wheel-house-lines line {
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 42%, transparent);
  stroke-width: 0.9;
  opacity: 0.34;
}

.hero-wheel-zodiac {
  fill: color-mix(in srgb, var(--hero-wheel-teal) 68%, #17232a);
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", "DejaVu Sans", Georgia, serif;
  font-size: 25px;
  font-weight: 500;
  opacity: 0.62;
}

.hero-wheel-aspects path {
  stroke: url(#heroWheelCopper);
  stroke-width: 1.3;
  opacity: 0.42;
}

.hero-wheel-outer-annotations line {
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 76%, #173b36);
  stroke-width: 1.1;
  opacity: 0.62;
}

.hero-wheel-outer-annotations text {
  fill: color-mix(in srgb, var(--hero-wheel-teal) 84%, #173b36);
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", Inter, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0;
  opacity: 0.72;
}

.hero-wheel-points circle {
  fill: color-mix(in srgb, var(--surface) 68%, var(--hero-wheel-copper));
  stroke: color-mix(in srgb, var(--hero-wheel-copper) 76%, var(--hero-wheel-teal));
  stroke-width: 1.1;
}

.hero-wheel-points text {
  fill: color-mix(in srgb, var(--hero-wheel-teal) 76%, #23353a);
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", Inter, sans-serif;
  font-size: 18px;
  font-weight: 650;
  opacity: 0.72;
}

.hero-wheel-observer circle:first-child {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
  stroke: color-mix(in srgb, var(--hero-wheel-teal) 52%, transparent);
  stroke-width: 1.25;
}

.hero-wheel-observer circle:last-child {
  fill: color-mix(in srgb, var(--hero-wheel-teal) 72%, var(--hero-wheel-copper));
  opacity: 0.72;
}

@keyframes heroWheelFloat {
  from {
    transform: translate3d(0, 0, 0) rotate(-7deg);
  }

  to {
    transform: translate3d(-10px, -14px, 0) rotate(-5.5deg);
  }
}

@media (max-width: 860px) {
  .hero-astro-wheel {
    right: -330px;
    bottom: -145px;
    width: min(760px, 118vw);
    opacity: 0.28;
    transform: rotate(-9deg);
    animation: none;
  }
}

@media (max-width: 560px) {
  .hero-astro-wheel {
    top: 86px;
    right: -360px;
    bottom: auto;
    width: 720px;
    opacity: 0.18;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-astro-wheel {
    animation: none;
  }
}

.landing-hero-kicker {
  margin: 0 0 13px;
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: color 0.55s ease;
}

.landing-hero-copy {
  width: min(100%, 860px);
  margin-top: 0;
  font-size: clamp(22px, 2.35vw, 34px);
  line-height: 1.34;
  letter-spacing: 0;
}

.landing-hero-subcopy {
  width: min(100%, 720px);
  margin: 16px auto 0;
  color: color-mix(in srgb, var(--text-soft) 82%, transparent);
  font-size: clamp(15px, 1.25vw, 18px);
  line-height: 1.55;
  transition: color 0.55s ease;
}

.landing-hero-actions {
  margin-top: 24px;
}

.landing-hero-signals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  color: color-mix(in srgb, var(--muted) 88%, var(--text) 12%);
  font-size: 13px;
  font-weight: 500;
  transition: color 0.55s ease;
}

.landing-hero-signals li {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

.landing-hero-signals li + li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 56%, transparent);
  transition: background-color 0.55s ease;
}

.landing-theme-switcher {
  margin-top: 20px;
}

.landing-astro-preview {
  width: min(calc(100vw - 36px), 1510px);
  margin-top: clamp(-54px, -3vw, -28px);
}

.landing-astro-system {
  padding: 0 clamp(10px, 2vw, 22px);
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 46%),
    transparent;
}

.landing-astro-image {
  opacity: 0.9;
}

.landing-astro-note {
  margin-top: clamp(6px, 1vw, 12px);
}

.landing-astroanamnesis-inner {
  padding-top: clamp(42px, 5vw, 68px);
  padding-bottom: clamp(42px, 5vw, 68px);
}

.landing-astroanamnesis-copy {
  width: min(100%, 760px);
}

.landing-astroanamnesis-copy h2 {
  max-width: 760px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.08;
}

.landing-astroanamnesis-copy p:not(.eyebrow) {
  max-width: 720px;
  font-size: clamp(17px, 1.55vw, 21px);
  line-height: 1.5;
}

.landing-band,
.landing-pro,
.landing-audience,
.landing-cta {
  padding-top: clamp(38px, 4.7vw, 64px);
  padding-bottom: clamp(38px, 4.7vw, 64px);
}

.landing-section-head {
  width: min(100%, 680px);
}

.landing-section-head h2,
.landing-cta h2 {
  max-width: 760px;
  font-size: clamp(27px, 3vw, 42px);
  line-height: 1.08;
}

.landing-feature-grid {
  gap: 12px;
  margin-top: 24px;
}

.landing-feature-grid article {
  gap: 10px;
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--text) 4%, transparent);
  padding: 18px;
}

.landing-feature-grid article:hover {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background: color-mix(in srgb, var(--surface) 92%, var(--accent) 4%);
}

.landing-feature-icon {
  width: 34px;
  height: 34px;
  font-size: 19px;
}

.landing-feature-grid h3 {
  font-size: 17px;
}

.landing-feature-grid p,
.landing-pro-lead,
.landing-pro-grid p,
.landing-audience-grid p,
.landing-audience-note,
.landing-section-lead {
  font-size: 15px;
  line-height: 1.5;
}

.landing-pro {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
}

.landing-pro-layout {
  display: block;
}

.landing-pro-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 64px);
  margin-top: 32px;
}

.landing-pro-grid article {
  border-top-color: transparent;
  padding-top: 0;
}

.landing-pro-grid span {
  font-size: 12px;
  font-weight: 600;
}

.landing-pro-grid h3 {
  font-size: 16px;
  margin-top: 16px;
}

.landing-audience {
  border-color: color-mix(in srgb, var(--line) 72%, transparent);
}

.landing-audience-grid {
  gap: clamp(16px, 2.5vw, 34px);
  margin-top: 24px;
}

.landing-audience-grid article {
  border-left-color: transparent;
  border-top-color: color-mix(in srgb, var(--accent) 34%, var(--line));
  padding-left: 0;
}

.landing-audience-grid span {
  font-size: 17px;
  font-weight: 600;
}

.landing-audience-note {
  margin-top: 24px;
}

.landing-cta {
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
}

.landing-cta h2 {
  max-width: 780px;
}

@media (max-width: 860px) {
  .landing-hero {
    padding-top: 34px;
    padding-bottom: 36px;
  }

  .landing-hero-copy {
    font-size: clamp(25px, 8vw, 36px);
  }

  .landing-astro-preview {
    width: 100%;
    margin-top: 20px;
  }

  .landing-astro-system {
    padding: 0;
  }

  .landing-feature-grid article {
    padding: 18px;
  }

  .landing-pro-grid {
    grid-template-columns: 1fr;
    gap: 22px;
    margin-top: 26px;
  }

  .landing-pro-grid::before {
    top: 20px;
    bottom: 20px;
    left: 20px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      transparent,
      color-mix(in srgb, var(--accent) 44%, var(--line)) 14%,
      color-mix(in srgb, var(--accent) 44%, var(--line)) 86%,
      transparent
    );
    transform: scaleY(0);
    transform-origin: top center;
  }

  .landing-pro-grid.is-flow-visible::before {
    transform: scaleY(1);
  }

  .landing-pro-grid::after {
    display: none;
  }

  .landing-pro-grid article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
  }

  .landing-pro-grid h3 {
    margin: 0 0 6px;
  }
}

.landing-pro-grid {
  grid-column: 1 / -1;
}

.landing-audience {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent 54%),
    color-mix(in srgb, var(--surface-soft) 72%, transparent);
}

.landing-audience-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(320px, 0.92fr);
  gap: clamp(28px, 6vw, 92px);
  align-items: start;
}

.landing-audience-grid {
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 0;
}

.landing-audience-grid article {
  gap: 16px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-left: 3px solid color-mix(in srgb, var(--accent) 58%, var(--line));
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  padding: 16px 18px;
}

.landing-audience-grid small {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.landing-audience-note {
  margin-top: 20px;
}

/* Astroanamnesis landing content */
.landing-hero {
  min-height: auto;
  padding-top: clamp(26px, 3vw, 42px);
  padding-right: clamp(20px, 5.5vw, 92px);
  padding-bottom: clamp(28px, 3vw, 44px);
  padding-left: clamp(20px, 5.5vw, 92px);
  background:
    radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    radial-gradient(circle at 50% 76%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 56%),
    var(--bg);
}

.landing-hero-inner {
  width: min(100%, 1120px);
  max-width: none;
  margin-top: clamp(-10px, -0.8vw, -4px);
}

.landing-hero-kicker {
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--accent-strong) 88%, var(--text) 12%);
  font-size: clamp(11px, 0.72vw, 12px);
  font-weight: 780;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.landing-hero-copy {
  width: min(100%, 980px);
  color: color-mix(in srgb, var(--text) 92%, var(--accent-strong) 8%);
  font-size: clamp(40px, 4.15vw, 62px);
  font-weight: 720;
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.landing-hero-subcopy {
  width: min(100%, 820px);
  margin-top: 18px;
  color: color-mix(in srgb, var(--text-soft) 94%, var(--text) 6%);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.56;
}

.landing-hero-support {
  width: min(100%, 790px);
  margin: 10px auto 0;
  color: color-mix(in srgb, var(--text-soft) 90%, transparent);
  font-size: clamp(15.5px, 1.08vw, 17px);
  line-height: 1.6;
}

.landing-hero-method-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 13px auto 0;
  color: color-mix(in srgb, var(--accent-strong) 76%, var(--text-soft) 24%);
  font-size: clamp(13.5px, 0.98vw, 15px);
  font-weight: 680;
  letter-spacing: 0.01em;
}

.landing-hero-method-seal::before,
.landing-hero-method-seal::after {
  content: "";
  width: 34px;
  height: 1px;
  background: color-mix(in srgb, var(--accent) 34%, transparent);
}

.landing-hero-actions {
  gap: 12px;
  margin-top: 25px;
}

.landing-hero-note {
  width: min(100%, 860px);
  margin: 15px auto 0;
  color: color-mix(in srgb, var(--muted) 68%, var(--text) 32%);
  font-size: clamp(14px, 1vw, 15px);
  line-height: 1.58;
}

.landing-hero-subtle-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 12px auto 0;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--accent-strong) 88%, var(--text-soft) 12%);
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 680;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 180ms ease, opacity 180ms ease, transform 180ms ease;
}

.landing-hero-subtle-link::after {
  content: "\2193";
  color: currentColor;
  font-size: 12px;
  opacity: 0.72;
  transform: translateY(-1px);
}

.landing-hero-subtle-link:hover,
.landing-hero-subtle-link:focus-visible {
  color: color-mix(in srgb, var(--accent-strong) 72%, var(--text) 28%);
  opacity: 0.9;
  outline: 2px solid color-mix(in srgb, var(--accent) 20%, transparent);
  outline-offset: 6px;
  transform: translateY(-1px);
}

.landing-hero-signals {
  gap: 8px 18px;
  margin-top: 14px;
  color: color-mix(in srgb, var(--muted) 74%, var(--text) 26%);
  font-size: 13px;
  font-weight: 600;
}

.landing-theme-switcher {
  width: fit-content;
  margin: 13px auto 0;
  gap: 10px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 52%, transparent);
  box-shadow: 0 18px 46px color-mix(in srgb, var(--accent) 7%, transparent);
  backdrop-filter: blur(10px);
}

.landing-theme-switcher .theme-choice {
  width: 34px;
  height: 34px;
}

.landing-theme-switcher .theme-choice svg {
  width: 22px;
  height: 22px;
}

.landing-nav-actions .landing-theme-switcher {
  width: auto;
  max-width: none;
  margin: 0 16px 0 0;
  gap: 7px;
  padding: 5px 9px;
  border-color: color-mix(in srgb, var(--accent) 10%, var(--border) 90%);
  background: color-mix(in srgb, var(--surface) 84%, transparent);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--text) 4%, transparent);
  backdrop-filter: blur(8px);
}

.landing-nav-actions .landing-theme-switcher .theme-choice {
  width: 28px;
  height: 28px;
  min-height: 0;
  padding: 0;
  flex: 0 0 28px;
  opacity: 0.82;
  border: 1px solid transparent;
}

.landing-nav-actions .landing-theme-switcher .theme-choice svg {
  width: 16px;
  height: 16px;
  stroke-width: 1.75;
}

.landing-nav-actions .landing-theme-switcher .theme-choice:hover,
.landing-nav-actions .landing-theme-switcher .theme-choice:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, currentColor 7%, transparent);
  transform: none;
}

.landing-nav-actions .landing-theme-switcher .theme-choice[aria-pressed="true"] {
  opacity: 1;
  border-color: color-mix(in srgb, currentColor 11%, transparent);
  background: color-mix(in srgb, currentColor 9%, white 91%);
  box-shadow: none;
}

.landing-astro-preview {
  width: min(100%, calc(100dvw - 40px), 1420px);
  margin-top: clamp(18px, 2.2vw, 34px);
  padding-bottom: clamp(18px, 2vw, 32px);
  overflow: visible;
}

.landing-astro-preview.landing-reveal {
  opacity: 1;
  transform: none;
}

.landing-astro-system {
  min-height: 0;
  padding-inline: clamp(6px, 1vw, 16px);
  background:
    radial-gradient(circle at 50% 52%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 52%),
    transparent;
  overflow: visible;
}

.landing-astro-system > .astroanamnesis-svg,
.landing-astro-image {
  display: block;
  width: min(100%, 1320px);
  max-width: 100%;
  height: auto;
  min-height: 0;
  max-height: min(55dvh, 640px);
  margin-inline: auto;
}

.landing-astro-image {
  display: block;
  opacity: 0.96;
  filter: saturate(1.08) contrast(1.05);
}

.astroanamnesis-svg .aa-tropical-wheel {
  --aa-final-opacity: 0.88;
}

.landing-method-cards {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.5vw, 20px);
  margin-top: clamp(28px, 3vw, 40px);
}

.landing-method-cards article,
.landing-tools-grid article,
.landing-trust-grid article {
  border: 1px solid color-mix(in srgb, var(--line) 70%, var(--accent) 7%);
  border-radius: 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--accent) 4%, var(--surface))),
    var(--surface);
  box-shadow: 0 20px 52px color-mix(in srgb, var(--text) 4%, transparent);
}

.landing-method-cards article {
  padding: clamp(18px, 2vw, 24px);
}

.landing-method-cards span {
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.landing-method-cards h3,
.landing-tools-grid span,
.landing-trust-grid h3 {
  margin: 8px 0 0;
  color: var(--text);
  font-size: 17px;
  line-height: 1.2;
}

.landing-method-cards strong {
  display: block;
  margin-top: 5px;
  color: var(--accent-strong);
  font-size: 13px;
}

.landing-method-cards p,
.landing-trust-grid p {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.landing-wide-head {
  width: min(100%, 780px);
}

.landing-multiple-statement {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin: 16px 0 0;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent-strong);
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 800;
}

.landing-tools-section .landing-audience-shell {
  grid-template-columns: minmax(0, 0.48fr) minmax(0, 1fr);
}

.landing-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.landing-tools-grid article {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 13px;
  padding: 16px;
}

.landing-tools-grid small {
  align-self: start;
  margin-top: 2px;
}

.landing-tools-grid p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.landing-ai-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(300px, 0.62fr);
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  border-radius: 28px;
  background:
    radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 38%),
    color-mix(in srgb, var(--surface) 88%, transparent);
  box-shadow: 0 24px 80px color-mix(in srgb, var(--text) 5%, transparent);
  padding: clamp(24px, 4vw, 48px);
}

.landing-ai-copy {
  display: grid;
  gap: 14px;
  color: var(--text-soft);
  font-size: 15px;
  line-height: 1.6;
}

.landing-ai-copy p {
  margin: 0;
}

.landing-ai-copy strong {
  display: block;
  border-left: 3px solid color-mix(in srgb, var(--accent) 62%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--text);
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.55;
}

.landing-ai-copy small {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}

.landing-workflow-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}

.landing-workflow-grid article {
  min-width: 0;
}

.landing-trust-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-top: 26px;
}

.landing-trust-grid article {
  padding: 16px;
}

.landing-cta p:not(.eyebrow) {
  max-width: 680px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

@media (max-width: 920px) {
  .landing-audience-shell {
    grid-template-columns: 1fr;
  }

  .landing-pro-grid {
    grid-template-columns: 1fr;
  }

  .landing-method-cards,
  .landing-tools-grid,
  .landing-ai-panel,
  .landing-workflow-grid,
  .landing-trust-grid {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    padding-top: 30px;
    padding-bottom: 44px;
  }

  .landing-hero-inner {
    margin-top: 0;
  }

  .landing-hero-copy {
    width: min(100%, 720px);
    font-size: clamp(34px, 9vw, 42px);
    line-height: 1.12;
  }

  .landing-hero-subcopy,
  .landing-hero-support {
    width: min(100%, 680px);
  }

  .landing-hero-method-seal {
    max-width: min(100%, 360px);
    gap: 8px;
    line-height: 1.35;
  }

  .landing-hero-method-seal::before,
  .landing-hero-method-seal::after {
    width: 22px;
    flex: 0 0 22px;
  }

  .landing-hero-subtle-link {
    display: flex;
    width: fit-content;
    margin: 9px auto 0;
  }

  .landing-hero-actions {
    justify-content: center;
  }

  .landing-theme-switcher {
    max-width: min(100%, 340px);
    justify-content: center;
    gap: 7px;
    padding: 4px 6px;
  }

  .landing-theme-switcher .theme-choice {
    width: 32px;
    height: 32px;
  }

  .landing-theme-switcher .theme-choice svg {
    width: 20px;
    height: 20px;
  }

  .landing-astro-preview {
    width: min(100%, calc(100dvw - 28px));
    margin-top: 16px;
    padding-bottom: 26px;
  }

  .landing-astro-system > .astroanamnesis-svg,
  .landing-astro-image {
    height: auto;
    max-height: none;
  }

  .landing-pro-grid::before {
    top: 19px;
    bottom: 19px;
    left: 17px;
    right: auto;
    width: 1px;
    height: auto;
    background: linear-gradient(
      to bottom,
      color-mix(in srgb, var(--accent) 48%, var(--line)),
      color-mix(in srgb, var(--accent) 18%, var(--line))
    );
    transform: scaleY(0);
    transform-origin: top center;
  }

  .landing-pro-grid.is-flow-visible::before {
    transform: scaleY(1);
  }

  .landing-pro-grid::after {
    display: none;
  }
}

@media (max-width: 860px) {
  .chart-main-panel,
  .chart-main-panel .chart-wheel-inline {
    height: 100dvh;
    min-height: 100dvh;
  }

  .chart-wheel-modal {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .chart-wheel-header {
    padding: 8px 10px;
  }

  .chart-wheel-heading {
    gap: 8px;
  }

  .chart-wheel-title-block {
    display: none;
  }

  .chart-wheel-controls {
    display: grid;
    grid-template-columns: minmax(150px, 1fr) auto auto;
    flex: 1 1 auto;
    width: 100%;
    align-items: end;
    gap: 6px;
  }

  .chart-wheel-controls label {
    min-width: 0;
    gap: 2px;
  }

  .chart-wheel-controls span {
    font-size: 10px;
  }

  .chart-wheel-controls select,
  .chart-wheel-controls input {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 12px;
  }

  .chart-wheel-controls .chart-type-help {
    margin-bottom: 6px;
  }

  .chart-export-actions {
    gap: 4px;
  }

  .chart-export-button {
    width: 30px;
    height: 30px;
  }

  .chart-card-header {
    gap: 10px;
  }

  .chart-card-header-actions,
  .chart-card-actions {
    gap: 5px;
  }

  .chart-card-action-button,
  .chart-technical-more-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }

  .chart-technical-more-menu {
    height: 30px;
  }

  .chart-card-action-button svg {
    width: 14px;
    height: 14px;
  }

  .chart-context-button,
  .chart-wheel-status {
    min-height: 30px;
    padding: 5px 10px;
    font-size: 12px;
  }

  .chart-wheel-stage.is-full-chart {
    overflow: auto;
    padding: 0;
  }

  .chart-wheel-stage.is-full-chart.has-exterior-chart-labels {
    padding-bottom: 18px;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace,
  .chart-wheel-stage.is-full-chart .chart-wheel-main,
  .chart-wheel-stage.is-full-chart .chart-wheel-card {
    width: 100%;
    min-height: 0;
    height: 100%;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace {
    min-width: min(720px, max(100vw, calc(100dvh - 118px)));
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card {
    position: relative;
    grid-template-rows: minmax(0, 1fr);
    overflow: hidden;
    border: 0;
    border-radius: 0;
    padding: 0;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header {
    position: absolute;
    z-index: 8;
    top: 6px;
    left: 6px;
    right: 6px;
    width: auto;
    pointer-events: none;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header > div {
    display: none;
  }

  .chart-wheel-stage.is-full-chart .chart-tools {
    width: 100%;
    min-width: 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    border: 1px solid color-mix(in srgb, var(--accent-line) 70%, transparent);
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    padding: 5px 7px;
    pointer-events: auto;
    scrollbar-width: thin;
  }

  .chart-wheel-stage.is-full-chart .chart-tool-link {
    flex: 0 0 auto;
    font-size: 11px;
    line-height: 1.1;
  }

  .chart-svg-wrap-only {
    width: 100%;
    height: 100%;
    padding: 42px 28px 36px;
  }

  .chart-svg-wrap-only .chart-wheel-svg {
    width: auto;
    height: 100%;
    max-width: none;
    max-height: none;
  }

  .chart-wheel-card-exterior-labels .chart-svg-wrap-only .chart-wheel-svg {
    width: min(100%, calc(100dvh - 92px), 1120px);
    height: auto;
    max-height: calc(100dvh - 92px);
  }
}

@media (max-width: 560px) {
  .chart-wheel-controls {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .chart-context-button,
  .chart-wheel-status {
    width: auto;
  }

  .chart-export-actions {
    width: auto;
  }

  .chart-wheel-stage {
    padding: 0;
  }
}

.sidebar-chart-controls,
.private-map-controls {
  display: grid;
  gap: 8px;
  min-width: 0;
  margin-top: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 12px;
}

.sidebar-chart-controls.is-hidden,
.private-map-controls.is-hidden {
  display: none !important;
}

.sidebar-chart-controls .chart-wheel-controls,
.private-map-controls .chart-wheel-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  width: 100%;
  flex: none;
}

.sidebar-chart-controls .chart-wheel-controls > label,
.private-map-controls .chart-wheel-controls > label {
  min-width: 0;
}

.sidebar-chart-controls .chart-wheel-controls > label:first-child,
.private-map-controls .chart-wheel-controls > label:first-child {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-column: 1;
  order: 1;
  align-items: center;
}

.sidebar-chart-controls .chart-wheel-controls > label:first-child span,
.private-map-controls .chart-wheel-controls > label:first-child span {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
  white-space: normal;
}

.sidebar-chart-controls .chart-wheel-controls > label:first-child .chart-view-label,
.private-map-controls .chart-wheel-controls > label:first-child .chart-view-label {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 8px;
}

.sidebar-chart-controls .chart-wheel-controls > label:first-child .chart-view-engine,
.private-map-controls .chart-wheel-controls > label:first-child .chart-view-engine {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: color-mix(in srgb, var(--accent) 76%, var(--muted));
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.015em;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
}

.sidebar-chart-controls .chart-wheel-controls select,
.sidebar-chart-controls .chart-wheel-controls input,
.private-map-controls .chart-wheel-controls select,
.private-map-controls .chart-wheel-controls input {
  width: 100%;
  min-height: 34px;
}

.sidebar-chart-controls .chart-wheel-controls select,
.private-map-controls .chart-wheel-controls select,
.private-map-active-card .active-person-trigger {
  appearance: none;
  border: 1px solid color-mix(in srgb, var(--accent-line) 48%, var(--line));
  border-radius: 8px;
  background-color: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
  background-image: url("data:image/svg+xml,%3Csvg%20viewBox%3D%270%200%2024%2024%27%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%3E%3Cpath%20d%3D%27M6%209l6%206%206-6%27%20fill%3D%27none%27%20stroke%3D%27%23277f76%27%20stroke-width%3D%272.2%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27/%3E%3C/svg%3E");
  background-position: right 10px center;
  background-repeat: no-repeat;
  background-size: 14px 14px;
  color: var(--text);
  cursor: pointer;
  font-weight: 560;
  padding-right: 34px;
}

.sidebar-chart-controls .chart-wheel-controls select:hover,
.private-map-controls .chart-wheel-controls select:hover,
.private-map-active-card .active-person-trigger:hover {
  border-color: color-mix(in srgb, var(--accent) 46%, var(--accent-line));
  background-color: color-mix(in srgb, var(--accent-soft) 54%, var(--surface));
}

.sidebar-chart-controls .chart-wheel-controls select:focus-visible,
.private-map-controls .chart-wheel-controls select:focus-visible,
.private-map-active-card .active-person-trigger:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--accent-line));
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.sidebar-chart-controls .chart-wheel-controls .chart-type-help,
.private-map-controls .chart-wheel-controls .chart-type-help {
  grid-column: 2;
  order: 1;
  justify-self: end;
  align-self: end;
  margin: 0 0 8px;
}

.sidebar-chart-controls #chart-transit-field,
.sidebar-chart-controls #chart-progressed-field,
.sidebar-chart-controls #chart-solar-return-field,
.sidebar-chart-controls #chart-synastry-field,
.sidebar-chart-controls .chart-export-actions,
.sidebar-chart-controls .chart-wheel-status,
.private-map-controls #chart-transit-field,
.private-map-controls #chart-progressed-field,
.private-map-controls #chart-solar-return-field,
.private-map-controls #chart-synastry-field,
.private-map-controls .chart-export-actions,
.private-map-controls .chart-wheel-status {
  grid-column: 1 / -1;
}

.chart-transit-controls {
  min-width: 0;
  margin: 0;
  border: 0;
  padding: 0;
}

.chart-progressed-controls {
  display: grid;
  min-width: 0;
  gap: 6px;
  margin: 0;
  border: 0;
  padding: 0;
}

.chart-progressed-controls legend {
  margin: 0;
  padding: 0;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chart-progressed-datetime {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 122px), 1fr));
  gap: 8px;
  min-width: 0;
}

.chart-progressed-controls label {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.chart-progressed-controls input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 7px;
  padding-left: 9px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.chart-progressed-controls small {
  display: block;
  max-width: none;
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 650;
  line-height: 1.25;
}

.chart-transit-controls legend {
  margin: 0 0 6px;
  padding: 0;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chart-transit-datetime {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 122px), 1fr));
  gap: 8px;
  min-width: 0;
}

.chart-transit-datetime label {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.chart-transit-datetime input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding-right: 7px;
  padding-left: 9px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.sidebar-chart-controls .chart-export-actions,
.private-map-controls .chart-export-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  order: 2;
  gap: 8px;
  width: 100%;
}

.sidebar-chart-controls #chart-transit-field,
.sidebar-chart-controls #chart-progressed-field,
.sidebar-chart-controls #chart-solar-return-field,
.sidebar-chart-controls #chart-synastry-field,
.private-map-controls #chart-transit-field,
.private-map-controls #chart-progressed-field,
.private-map-controls #chart-solar-return-field,
.private-map-controls #chart-synastry-field {
  order: 3;
}

.chart-solar-return-controls {
  display: grid;
  gap: 10px;
}

.chart-solar-return-year-field,
.chart-solar-return-location-grid label {
  display: grid;
  gap: 6px;
}

.chart-solar-return-place-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
  width: fit-content;
  margin-top: 2px;
  padding: 4px 8px 4px 4px;
  border: 1px solid rgba(20, 105, 110, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.66);
  color: var(--muted);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.chart-solar-return-place-toggle input {
  position: absolute;
  width: 1px !important;
  min-width: 1px;
  height: 1px !important;
  min-height: 1px;
  margin: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.chart-solar-return-place-toggle span {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding-left: 40px;
  white-space: nowrap;
}

.chart-solar-return-place-toggle span::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 32px;
  height: 18px;
  border: 1px solid rgba(20, 105, 110, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  transform: translateY(-50%);
  transition:
    background 160ms ease,
    border-color 160ms ease;
}

.chart-solar-return-place-toggle span::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(120, 113, 108, 0.72);
  transform: translateY(-50%);
  transition:
    transform 160ms ease,
    background 160ms ease;
}

.chart-solar-return-place-toggle input:checked + span::before {
  border-color: rgba(15, 118, 110, 0.45);
  background: rgba(15, 118, 110, 0.18);
}

.chart-solar-return-place-toggle input:checked + span::after {
  background: var(--teal);
  transform: translate(14px, -50%);
}

.chart-solar-return-place-toggle:has(input:checked) {
  border-color: rgba(15, 118, 110, 0.24);
  background: rgba(240, 253, 250, 0.74);
  color: var(--accent);
}

.chart-solar-return-place-toggle:hover {
  border-color: rgba(15, 118, 110, 0.25);
  background: rgba(255, 255, 255, 0.9);
}

.chart-solar-return-place-toggle input:focus-visible + span::before {
  outline: 2px solid rgba(15, 118, 110, 0.28);
  outline-offset: 2px;
}

.chart-solar-return-location {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(20, 105, 110, 0.16);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.58);
}

.chart-solar-return-location-title {
  margin: 0;
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.08em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chart-solar-return-location-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: 10px;
}

/* Save vertical space only where the controls would otherwise need scrolling. */
@media (max-width: 860px), (min-width: 861px) and (max-height: 760px) {
  .chart-solar-return-location-grid {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

.chart-solar-return-location-grid > label,
.chart-solar-return-location-grid .autocomplete-field {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.chart-solar-return-location-grid select,
.chart-solar-return-location-grid input {
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

.sidebar-chart-controls .chart-wheel-status,
.private-map-controls .chart-wheel-status {
  order: 4;
}

.sidebar-chart-controls .chart-export-button,
.private-map-controls .chart-export-button {
  width: 100%;
  height: 38px;
}

.sidebar-chart-controls .chart-wheel-status,
.private-map-controls .chart-wheel-status {
  width: 100%;
  max-width: none;
  justify-content: center;
  border-radius: 8px;
  text-align: center;
}

.sidebar-chart-controls .chart-wheel-status:empty,
.private-map-controls .chart-wheel-status:empty {
  display: none;
}

.sidebar-chart-controls .chart-wheel-controls .chart-type-help [role="tooltip"],
.private-map-controls .chart-wheel-controls .chart-type-help [role="tooltip"] {
  top: auto;
  right: auto;
  bottom: calc(100% + 8px);
  left: 50%;
  width: min(260px, calc(100vw - 48px));
  transform: translateX(-50%) translateY(4px);
}

.sidebar-chart-controls .chart-wheel-controls .chart-type-help:hover [role="tooltip"],
.sidebar-chart-controls .chart-wheel-controls .chart-type-help:focus-visible [role="tooltip"],
.private-map-controls .chart-wheel-controls .chart-type-help:hover [role="tooltip"],
.private-map-controls .chart-wheel-controls .chart-type-help:focus-visible [role="tooltip"] {
  transform: translateX(-50%) translateY(0);
}

/* Keep chart information inside scrollable sidebars instead of clipping it at the right edge. */
:is(.sidebar, .private-sidebar)
  :is(.sidebar-chart-controls, .private-map-controls)
  .chart-wheel-controls
  .chart-type-help
  [role="tooltip"] {
  right: 0;
  left: auto;
  width: min(210px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  transform: translateY(4px);
}

:is(.sidebar, .private-sidebar)
  :is(.sidebar-chart-controls, .private-map-controls)
  .chart-wheel-controls
  .chart-type-help:is(:hover, :focus-visible)
  [role="tooltip"] {
  transform: translateY(0);
}

/* Top map toolbars have free space below; opening there prevents viewport clipping. */
.guest-maps-header
  .guest-map-controls
  .chart-wheel-controls
  .chart-type-help
  [role="tooltip"] {
  top: calc(100% + 8px);
  right: 0;
  bottom: auto;
  left: auto;
  width: min(280px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  transform: translateY(-4px);
}

.guest-maps-header
  .guest-map-controls
  .chart-wheel-controls
  .chart-type-help:is(:hover, :focus-visible)
  [role="tooltip"] {
  transform: translateY(0);
}

.private-sidebar .private-map-control-card {
  position: relative;
  z-index: 2;
}

.private-sidebar .private-map-active-card {
  position: relative;
  z-index: 1;
}

/* Private app sidebar refinement */
.private-sidebar {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 16px;
  width: 300px;
  min-width: 300px;
  padding: var(--private-sidebar-top-padding) 20px 18px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
}

.private-sidebar-scroll {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-color: color-mix(in srgb, var(--accent) 38%, var(--line)) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
}

.private-sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.private-sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.private-sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 38%, var(--line));
}

.private-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 56%, var(--line));
}

.private-maps-active .private-sidebar .private-sidebar-scroll {
  display: flex;
  align-content: space-between;
}

.private-sidebar-top {
  display: grid;
  gap: 18px;
  flex: 0 0 auto;
}

.private-sidebar .sidebar-logo {
  display: flex;
  align-items: center;
  min-height: var(--private-sidebar-brand-height);
  margin: 0;
  padding: 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 760;
  line-height: 1.1;
}

.private-sidebar .sidebar-logo strong {
  font-weight: inherit;
}

.private-space-nav {
  display: grid;
  gap: 5px;
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 86%, transparent);
  padding-top: 14px;
}

.private-space-nav button {
  position: relative;
  min-height: 39px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 88%, var(--text));
  font-size: 14px;
  font-weight: 620;
  line-height: 1.1;
  padding: 0 11px 0 12px;
}

.private-space-nav button::before {
  opacity: 0.74;
}

.private-space-nav button::after {
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  content: "";
}

.private-space-nav button:hover,
.private-space-nav button:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 34%, transparent);
  color: var(--text);
}

.private-space-nav button.active {
  background: color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
  color: var(--accent);
  font-weight: 760;
}

.private-space-nav button.active::before {
  opacity: 1;
}

.private-space-nav button.active::after {
  background: var(--accent);
}

.private-feature-nav,
.private-quick-nav {
  margin-top: 0;
  border-top-color: color-mix(in srgb, var(--line) 72%, transparent);
  padding-top: 12px;
}

.private-feature-nav p,
.private-quick-nav p,
.private-map-eyebrow,
.sidebar-chart-controls .chart-wheel-controls > label:first-child span,
.private-map-controls .chart-wheel-controls > label:first-child span {
  color: var(--accent);
  font-size: 11px;
  font-weight: 780;
  letter-spacing: 0.06em;
  line-height: 1.1;
  text-transform: uppercase;
}

.private-map-context {
  display: grid;
  gap: 12px;
  margin-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  padding-top: 14px;
}

.private-map-active-card,
.private-map-controls {
  border: 1px solid color-mix(in srgb, var(--line) 90%, var(--accent-line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 4%, transparent);
}

.private-map-active-card {
  gap: 9px;
  padding: 13px 12px 12px;
}

.private-map-active-head {
  align-items: flex-start;
  gap: 8px;
}

.private-map-active-card .private-map-active-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.private-map-active-card strong {
  font-size: 16px;
  font-weight: 760;
  line-height: 1.1;
}

.active-person-trigger {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-width: 0;
  gap: 5px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.1;
  padding: 8px 34px 8px 12px;
  text-align: left;
}

.active-person-trigger-name {
  min-width: 0;
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.active-person-trigger-icon {
  display: none;
  margin-left: auto;
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  color: color-mix(in srgb, var(--accent) 86%, var(--muted));
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.active-person-trigger:hover {
  color: var(--text);
}

.active-person-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 38%, transparent);
  outline-offset: 2px;
}

.private-map-active-meta {
  gap: 2px;
  color: color-mix(in srgb, var(--muted) 82%, var(--text));
  font-size: 12.5px;
  line-height: 1.35;
}

.private-map-active-card p {
  margin-top: 2px;
  border-top: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
  padding-top: 9px;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 760;
}

.private-map-active-card .person-switch-button {
  min-height: 28px;
  border-color: color-mix(in srgb, var(--accent-line) 56%, var(--line));
  border-radius: 8px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-weight: 680;
  line-height: 1.1;
  padding: 0 9px;
}

.private-map-active-card .person-switch-button:hover,
.private-map-active-card .person-switch-button:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.private-map-control-card {
  gap: 0;
}

.private-map-controls {
  gap: 9px;
  padding: 12px;
}

.private-map-controls .chart-wheel-controls select,
.private-map-controls .chart-wheel-controls input {
  min-height: 36px;
  border-radius: 8px;
  font-size: 13px;
}

.private-map-controls .chart-export-actions {
  gap: 8px;
}

.private-map-controls .chart-export-button {
  height: 38px;
  border-radius: 8px;
}

.private-map-actions {
  display: grid;
  gap: 8px;
  margin-top: 2px;
}

.private-sidebar-primary,
.private-map-actions .private-sidebar-primary {
  width: 100%;
  min-height: 42px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 780;
}

.private-sidebar-primary:hover,
.private-sidebar-primary:focus-visible {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--on-accent);
}

.prompt-gpt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.prompt-gpt-button svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.9;
}

.private-sidebar-secondary,
.private-map-actions .private-sidebar-secondary {
  width: 100%;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 60%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 700;
}

.private-sidebar-secondary:hover,
.private-sidebar-secondary:focus-visible {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  color: var(--accent);
}

.private-sidebar-tertiary,
.private-map-actions .private-sidebar-tertiary {
  width: 100%;
  min-height: 36px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--accent);
  font-size: 13.5px;
  font-weight: 700;
}

.private-sidebar-tertiary:hover,
.private-sidebar-tertiary:focus-visible {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

.private-sidebar-bottom {
  display: grid;
  flex: 0 0 auto;
  gap: 8px;
  margin-top: auto;
  border-top: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  padding-top: 11px;
}

.private-sidebar-utility-actions {
  display: grid;
  gap: 2px;
}

.private-sidebar-utility {
  display: flex;
  width: 100%;
  min-height: 40px;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 13.5px;
  font-weight: 680;
  padding: 8px 10px;
  text-align: left;
}

.private-sidebar-utility svg {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.private-sidebar-utility:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--accent-soft) 62%, transparent);
  color: var(--accent);
}

.private-sidebar-utility:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 2px;
}

.private-sidebar .sidebar-actions .private-user,
.private-sidebar .private-user {
  margin: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding-top: 11px;
}

.private-user-heading {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) 28px;
  align-items: start;
  gap: 10px;
}

.private-user-avatar {
  width: 38px;
  height: 38px;
  margin-top: 1px;
  border-radius: 999px;
  font-size: 13px;
}

.private-user-heading > div {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.private-user-heading .private-user-name-row {
  display: block;
  min-width: 0;
}

.private-user-heading .private-user-name-row strong {
  display: block;
  overflow: hidden;
  color: var(--text);
  font-size: 13.5px;
  font-weight: 760;
  line-height: 1.15;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-user-heading span:not(.private-user-avatar):not(.private-user-name-row),
.private-user-heading small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.private-user-heading > div > span:not(.private-user-name-row) {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.25;
}

.private-user-plan-badge {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 76%, white);
  color: var(--accent);
  font-size: 11px;
  font-weight: 760;
  line-height: 1;
  padding: 3px 7px;
}

.private-user-settings {
  width: 28px;
  height: 28px;
  min-height: 0;
  align-self: start;
  margin-top: -1px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 90%, white);
}

.private-sidebar-logout {
  justify-self: start;
  width: auto;
  min-height: 28px;
  margin: 0 0 0 48px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 84%, #64748b);
  font-size: 12.5px;
  font-weight: 520;
  line-height: 1.3;
  padding: 4px 0;
  text-align: left;
  text-decoration: none;
}

.private-sidebar-logout:hover,
.private-sidebar-logout:focus-visible {
  background: transparent;
  color: #b42318;
  text-decoration: none;
}

.private-sidebar-logout:focus-visible {
  outline: 2px solid color-mix(in srgb, #b42318 32%, transparent);
  outline-offset: 3px;
}

/* A compact account disclosure keeps secondary actions out of the footer. */
.private-sidebar .private-sidebar-bottom {
  gap: 12px;
  border-top: 0;
  padding-top: 0;
}

.private-sidebar .private-sidebar-utility {
  min-height: 44px;
  gap: 12px;
  padding: 10px 12px;
  color: var(--text-soft);
  font-size: 14px;
  font-weight: 400;
}

.private-sidebar .private-sidebar-utility svg {
  width: 17px;
  height: 17px;
  flex-basis: 17px;
  color: var(--muted);
}

.private-account {
  position: relative;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}

.private-sidebar .sidebar-actions .private-account .private-user {
  margin: 0;
  border: 0;
  padding: 0;
}

.private-sidebar .private-account-toggle {
  display: flex;
  width: 100%;
  min-height: 66px;
  align-items: center;
  gap: 11px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
  padding: 10px;
  text-align: left;
  font: inherit;
}

.private-sidebar .private-account-toggle:is(:hover, [aria-expanded="true"]) {
  border-color: var(--line);
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface-soft));
}

.private-account-avatar {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

.private-account-identity {
  display: grid;
  min-width: 0;
  flex: 1;
  gap: 2px;
}

.private-account-identity strong {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.private-account-identity small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
}

.private-account :is(.private-account-chevron, .private-account-action svg) {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--muted);
}

.private-account-chevron {
  transition: transform 140ms ease;
}

.private-account-toggle[aria-expanded="true"] .private-account-chevron {
  transform: rotate(180deg);
}

.private-account-menu {
  position: absolute;
  z-index: 80;
  inset-inline: 0;
  bottom: calc(100% - 4px);
  display: grid;
  gap: 2px;
  max-height: min(280px, calc(100dvh - 48px));
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 6px 22px color-mix(in srgb, var(--text) 10%, transparent);
  padding: 6px;
}

.private-sidebar .private-account-action {
  display: flex;
  width: 100%;
  min-height: 44px;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 12px;
  text-align: left;
}

.private-sidebar .private-account-action:is(:hover, :focus-visible, .active) {
  background: var(--surface-soft);
  color: var(--text);
}

.private-sidebar :is(.private-account-toggle, .private-account-action):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.private-account-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--line);
}

.private-sidebar .private-account-logout {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .private-account-chevron { transition: none; }
}

.private-sidebar :is(.private-sidebar-primary, .private-sidebar-secondary, .private-sidebar-tertiary):disabled {
  cursor: not-allowed;
  opacity: 0.58;
}

.private-map-actions .private-sidebar-primary:disabled,
.private-map-actions .private-sidebar-primary:disabled:hover,
.private-map-actions .private-sidebar-primary:disabled:focus-visible {
  border-color: var(--line);
  background: var(--surface-soft);
  color: var(--muted);
  cursor: not-allowed;
  opacity: 0.72;
}

/* Keep every contextual control reachable on short desktop viewports. */
@media (max-height: 960px) and (min-width: 861px) {
  .private-screen {
    --private-sidebar-top-padding: 14px;
    --private-sidebar-brand-height: 34px;
  }

  .private-sidebar {
    gap: 10px;
    padding: var(--private-sidebar-top-padding) 14px 12px;
  }

  .private-sidebar-scroll {
    gap: 10px;
    padding-right: 6px;
  }

  .private-sidebar-top {
    gap: 10px;
  }

  .private-sidebar .sidebar-logo {
    min-height: 34px;
  }

  .private-space-nav {
    gap: 2px;
    padding-top: 9px;
  }

  .private-space-nav button {
    min-height: 34px;
    padding-inline: 10px;
  }

  .private-sidebar .private-map-active-card {
    padding: 10px;
  }

  .private-sidebar .private-map-control-card,
  .private-sidebar .private-map-actions {
    padding: 10px;
  }

  .private-sidebar .private-map-controls,
  .private-sidebar .private-map-actions {
    gap: 8px;
  }

  .private-sidebar-bottom {
    gap: 6px;
    padding-top: 8px;
  }

  .private-sidebar .sidebar-actions .private-user,
  .private-sidebar .private-user {
    padding-top: 8px;
  }

  .private-user-heading {
    grid-template-columns: 34px minmax(0, 1fr) 28px;
    gap: 8px;
  }

  .private-user-avatar {
    width: 34px;
    height: 34px;
  }

  .private-sidebar-logout {
    margin-left: 42px;
  }
}

@media (max-height: 760px) and (min-width: 861px) {
  .private-screen {
    --private-sidebar-top-padding: 18px;
  }

  .private-sidebar {
    padding-top: var(--private-sidebar-top-padding);
    padding-bottom: 14px;
  }

  .private-sidebar-scroll {
    gap: 12px;
  }

  .private-sidebar .sidebar-logo {
    min-height: 34px;
  }

  .private-map-active-card,
  .private-map-controls {
    padding: 10px;
  }
}

@media (max-width: 860px) {
  .private-sidebar {
    width: auto;
    min-width: 0;
    height: auto;
    min-height: 0;
    gap: 14px;
    overflow: visible;
    padding: 18px;
  }

  .private-sidebar-scroll {
    overflow: visible;
    padding-right: 0;
  }

  .private-space-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .private-space-nav button,
  .private-feature-nav button,
  .private-quick-nav button {
    justify-content: flex-start;
  }

  .private-sidebar-bottom {
    margin-top: 0;
  }
}

/* Landing final visual polish */
.landing-screen {
  overflow-x: clip;
}

.landing-nav {
  min-height: 68px;
}

.landing-nav-actions {
  flex-wrap: nowrap;
}

.landing-nav-actions .primary-action,
.landing-nav-actions .secondary-action {
  min-height: 42px;
  border-radius: 12px;
  font-weight: 760;
}

.landing-hero {
  min-height: auto;
  padding: clamp(34px, 3.5vw, 54px) clamp(22px, 5vw, 80px) clamp(34px, 3.8vw, 56px);
  text-align: center;
}

.landing-hero-inner {
  width: min(100%, 1080px);
  margin: 0 auto;
  text-align: center;
}

.landing-hero-kicker {
  margin-bottom: 14px;
}

.landing-hero-copy {
  width: min(100%, 960px);
  margin-inline: auto;
  text-wrap: balance;
}

.landing-hero-subcopy,
.landing-hero-support {
  text-wrap: pretty;
}

.landing-hero-method-seal {
  display: flex;
  width: fit-content;
  margin-top: 14px;
  margin-bottom: clamp(6px, 0.8vw, 12px);
}

.landing-hero-subtle-link {
  width: fit-content;
  margin: 12px auto 0;
}

.landing-astro-preview {
  width: min(100%, 1280px);
  margin: clamp(4px, 0.6vw, 8px) auto 0;
}

.landing-astro-system {
  width: 100%;
  padding-inline: 0;
}

.landing-astro-system > .astroanamnesis-svg,
.landing-astro-image {
  width: min(100%, 1280px);
  max-width: 100%;
  max-height: clamp(430px, 50dvh, 610px);
  margin-inline: auto;
}

.astroanamnesis-svg .aa-card-sub {
  font-size: 16px;
  opacity: 0.9;
}

.astroanamnesis-svg .aa-observer-sub {
  font-weight: 500;
  opacity: 0.76;
}

.landing-band,
.landing-pro,
.landing-audience,
.landing-cta {
  width: min(100%, 1200px);
  padding-block: clamp(64px, 7vw, 104px);
}

.landing-section-head .eyebrow,
.landing-cta .eyebrow {
  color: color-mix(in srgb, var(--accent-strong) 88%, var(--text) 12%);
  font-weight: 780;
  letter-spacing: 0.13em;
}

.landing-method-cards article,
.landing-tools-grid article,
.landing-trust-grid article,
.landing-ai-panel,
.landing-cta {
  border-color: color-mix(in srgb, var(--line) 70%, var(--accent) 8%);
}

.landing-method-cards article,
.landing-tools-grid article,
.landing-trust-grid article {
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background-color 180ms ease;
}

.landing-method-cards article:hover,
.landing-tools-grid article:hover,
.landing-trust-grid article:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  box-shadow: 0 24px 58px color-mix(in srgb, var(--text) 6%, transparent);
}

.landing-tools-grid small,
.landing-method-cards span {
  color: color-mix(in srgb, var(--accent-strong) 86%, var(--text) 14%);
}

.landing-ai-panel {
  box-shadow: 0 26px 78px color-mix(in srgb, var(--text) 5%, transparent);
}

.landing-cta {
  align-items: center;
  border-radius: 28px;
  background:
    radial-gradient(circle at 90% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 36%),
    color-mix(in srgb, var(--surface) 90%, transparent);
}

@media (max-width: 1180px) {
  .landing-hero-copy {
    font-size: clamp(40px, 5.2vw, 56px);
  }

  .landing-astro-preview {
    width: min(100%, 1160px);
  }

  .landing-astro-system > .astroanamnesis-svg,
  .landing-astro-image {
    max-height: clamp(420px, 48dvh, 560px);
  }
}

@media (max-width: 860px) {
  .landing-nav {
    align-items: center;
    flex-direction: row;
  }

  .landing-nav-actions {
    width: auto;
    flex: 0 1 auto;
  }

  .landing-nav-actions .landing-theme-switcher {
    flex: 0 0 auto;
    margin: 0 14px 0 0;
  }

  .landing-nav-actions a,
  .landing-nav-actions button:not(.theme-choice) {
    flex: 0 0 auto;
  }

  .landing-hero {
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
  }

  .landing-hero-inner {
    text-align: center;
  }

  .landing-hero-copy {
    font-size: clamp(35px, 8vw, 48px);
  }

  .landing-astro-preview {
    width: min(100%, calc(100dvw - 28px));
    margin-top: 8px;
  }

  .landing-astro-system > .astroanamnesis-svg,
  .landing-astro-image {
    max-height: clamp(390px, 46dvh, 500px);
  }
}

@media (max-width: 640px) {
  .landing-nav {
    align-items: stretch;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px;
  }

  .landing-nav-actions {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .landing-nav-actions .landing-theme-switcher {
    order: 3;
    width: 100%;
    justify-content: center;
    margin: 2px auto 0;
    padding: 5px 8px;
  }

  .landing-nav-actions .primary-action,
  .landing-nav-actions .secondary-action {
    flex: 1 1 132px;
  }

  .landing-hero {
    padding: 28px 18px 38px;
  }

  .landing-hero-kicker {
    font-size: 10.5px;
    letter-spacing: 0.18em;
  }

  .landing-hero-copy {
    font-size: clamp(32px, 10vw, 42px);
    letter-spacing: -0.025em;
  }

  .landing-hero-subcopy,
  .landing-hero-support {
    font-size: 15px;
  }

  .landing-hero-method-seal {
    max-width: 100%;
  }

  .landing-hero-method-seal::before,
  .landing-hero-method-seal::after {
    display: none;
  }

  .landing-astro-preview {
    width: 100%;
    margin-top: 8px;
  }

  .landing-astro-system > .astroanamnesis-svg,
  .landing-astro-image {
    width: 100%;
    max-height: none;
  }

  .landing-band,
  .landing-pro,
  .landing-audience,
  .landing-cta {
    padding: 52px 18px;
  }

  .landing-section-head h2,
  .landing-cta h2 {
    font-size: clamp(30px, 9vw, 42px);
  }
}

/* Integrated landing header toolbar */
.landing-header-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  min-height: 46px;
  padding: 4px 6px 4px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line) 86%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 78%, transparent);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--text) 4%, transparent);
  backdrop-filter: blur(10px);
}

.landing-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.landing-toolbar-actions .primary-action,
.landing-toolbar-actions .secondary-action {
  flex: 0 0 auto;
}

.landing-toolbar-divider {
  width: 1px;
  height: 24px;
  flex: 0 0 1px;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

.landing-nav-actions .landing-theme-switcher {
  order: 0;
  width: auto;
  margin: 0;
  padding: 0;
  gap: 9px;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.landing-nav-actions .landing-theme-switcher .theme-choice {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
  opacity: 0.78;
}

.landing-nav-actions .landing-theme-switcher .theme-choice svg {
  width: 17px;
  height: 17px;
}

.landing-nav-actions .landing-theme-switcher .theme-choice:hover,
.landing-nav-actions .landing-theme-switcher .theme-choice:focus-visible {
  opacity: 0.96;
  background: color-mix(in srgb, currentColor 8%, transparent);
}

.landing-nav-actions .landing-theme-switcher .theme-choice[aria-pressed="true"] {
  border-color: color-mix(in srgb, currentColor 12%, transparent);
  background: color-mix(in srgb, currentColor 9%, white 91%);
}

.theme-choice.is-previewed,
.landing-nav-actions .landing-theme-switcher .theme-choice.is-previewed {
  opacity: 1;
  border-color: color-mix(in srgb, currentColor 16%, transparent);
  background: color-mix(in srgb, currentColor 12%, white 88%);
}

html[data-theme="dark"] .theme-choice-dark.is-previewed,
html[data-theme="dark"] .theme-choice-dark:hover,
html[data-theme="dark"] .theme-choice-dark:focus-visible {
  border-color: rgba(244, 247, 251, 0.18);
  background: rgba(244, 247, 251, 0.14);
}

.landing-nav-actions .secondary-action {
  min-height: 36px;
  padding: 0 13px;
  border-color: transparent;
  border-radius: 999px;
  background: transparent;
  color: color-mix(in srgb, var(--text) 78%, var(--accent) 22%);
  font-size: 14px;
  font-weight: 650;
}

.landing-nav-actions .secondary-action:hover,
.landing-nav-actions .secondary-action:focus-visible {
  border-color: transparent;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent-strong);
}

.landing-nav-actions .primary-action {
  min-height: 36px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 750;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--accent) 15%, transparent);
}

@media (max-width: 860px) {
  .landing-header-toolbar {
    gap: 8px;
    max-width: 100%;
    padding-left: 8px;
  }

  .landing-nav-actions .landing-theme-switcher {
    gap: 6px;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice {
    width: 29px;
    height: 29px;
    flex-basis: 29px;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice svg {
    width: 16px;
    height: 16px;
  }

  .landing-nav-actions .secondary-action,
  .landing-nav-actions .primary-action {
    min-height: 34px;
    padding-inline: 12px;
  }
}

@media (max-width: 640px) {
  .landing-nav-actions {
    justify-content: flex-start;
  }

  .landing-header-toolbar {
    width: 100%;
    justify-content: space-between;
    overflow: hidden;
  }

  .landing-toolbar-actions {
    flex: 0 0 auto;
  }

  .landing-nav-actions .landing-theme-switcher {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-start;
    overflow: hidden;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice svg {
    width: 15.5px;
    height: 15.5px;
  }
}

@media (max-width: 460px) {
  .landing-nav-actions .landing-theme-switcher .theme-choice-eclipse,
  .landing-nav-actions .landing-theme-switcher .theme-choice-aurora {
    display: none;
  }

  .landing-toolbar-divider {
    height: 20px;
  }

  .landing-nav-actions .secondary-action,
  .landing-nav-actions .primary-action {
    padding-inline: 10px;
    font-size: 13px;
  }
}

/* Landing section transition polish */
.landing-astroanamnesis {
  position: relative;
  overflow: hidden;
  border-bottom: 0;
  background:
    radial-gradient(circle at 78% 18%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 34%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 48%),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--accent) 5%, var(--bg)) 52%,
      color-mix(in srgb, var(--accent) 3%, var(--bg)) 82%,
      var(--bg) 100%
    );
}

.landing-astroanamnesis::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  z-index: 0;
  height: clamp(96px, 12vw, 170px);
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--bg) 84%, transparent) 54%, var(--bg) 100%);
  pointer-events: none;
}

.landing-astroanamnesis-inner {
  position: relative;
  z-index: 1;
}

.landing-tools-section {
  position: relative;
  overflow: hidden;
  margin-top: -1px;
  border-top: 0;
  background:
    radial-gradient(circle at 74% 0%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 34%),
    radial-gradient(circle at 36% 22%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 42%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--surface) 76%, var(--bg) 24%) 100%);
}

.landing-tools-section::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 0;
  height: clamp(110px, 13vw, 180px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, transparent) 0%, transparent 100%);
  pointer-events: none;
}

.landing-tools-section .landing-audience-shell {
  position: relative;
  z-index: 1;
}

/* Hero text-to-map transition polish */
.landing-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 62%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 45%),
    linear-gradient(180deg, var(--bg) 0%, color-mix(in srgb, var(--accent) 1.5%, var(--bg)) 78%, var(--bg) 100%);
}

.landing-hero::after {
  content: "";
  position: absolute;
  top: clamp(410px, 38vw, 520px);
  left: 50%;
  z-index: 0;
  width: min(1040px, 88vw);
  height: clamp(360px, 32vw, 500px);
  border-radius: 999px;
  background:
    radial-gradient(circle at 50% 42%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34%),
    radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 66%);
  opacity: 0.42;
  pointer-events: none;
  transform: translateX(-50%);
}

.landing-hero-inner,
.landing-astro-preview {
  position: relative;
  z-index: 1;
}

.landing-astro-preview {
  isolation: isolate;
}

.landing-astro-preview::before {
  content: none;
}

.landing-astro-system {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* Hero final balance */
.landing-astro-preview {
  width: min(100%, 1380px);
  margin-top: clamp(-2px, 0.2vw, 6px);
}

.landing-astro-system > .astroanamnesis-svg,
.landing-astro-image {
  width: min(100%, 1380px);
  max-height: clamp(360px, calc(100dvh - 390px), 620px);
}

.landing-hero::after {
  top: clamp(430px, 40vw, 540px);
  width: min(1160px, 90vw);
  height: clamp(380px, 34vw, 540px);
  opacity: 0.34;
}

.landing-astro-system {
  background:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 55%),
    transparent;
}

/* Landing section system */
.home-page {
  position: relative;
  overflow-x: clip;
  background:
    radial-gradient(circle at 50% 8%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 34rem),
    linear-gradient(
      180deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--accent) 1.5%, var(--bg)) 42%,
      var(--bg) 100%
    );
}

.home-section {
  position: relative;
  isolation: isolate;
  padding-top: clamp(58px, 6vw, 92px);
  padding-bottom: clamp(58px, 6vw, 92px);
}

.home-section--hero {
  padding-top: clamp(38px, 4.2vw, 72px);
  padding-bottom: clamp(18px, 2.2vw, 34px);
}

.home-section--white {
  background:
    radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--accent) 3%, transparent), transparent 26rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 52%, var(--bg) 48%) 0%, var(--bg) 100%);
}

.home-section--soft {
  background:
    radial-gradient(circle at 78% 12%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 28rem),
    radial-gradient(circle at 22% 44%, color-mix(in srgb, var(--accent) 4%, transparent), transparent 34rem),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg)) 0%, var(--bg) 100%);
}

.home-container,
.landing-astroanamnesis-inner.home-container,
.landing-ai-panel.home-container {
  width: min(1180px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.section-overlap {
  margin-top: -1px;
}

.section-card {
  border: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line));
  border-radius: 30px;
  background:
    radial-gradient(circle at 84% 14%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 22rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 70%, transparent));
  box-shadow: 0 22px 70px color-mix(in srgb, var(--text) 5%, transparent);
  backdrop-filter: blur(12px);
}

.section-divider {
  width: min(1180px, calc(100% - 48px));
  height: 1px;
  margin: 0 auto;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--accent) 22%, transparent),
    transparent
  );
}

.landing-astroanamnesis.home-section {
  overflow: hidden;
  padding-top: clamp(46px, 5vw, 72px);
  padding-bottom: clamp(52px, 5.5vw, 84px);
  border-bottom: 0;
  background:
    radial-gradient(circle at 80% 16%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 31rem),
    radial-gradient(circle at 48% 54%, color-mix(in srgb, var(--accent) 5%, transparent), transparent 38rem),
    linear-gradient(
      180deg,
      color-mix(in srgb, var(--bg) 94%, var(--surface) 6%) 0%,
      color-mix(in srgb, var(--accent) 3%, var(--bg)) 62%,
      var(--bg) 100%
    );
}

.landing-astroanamnesis::after {
  height: clamp(72px, 8vw, 128px);
  opacity: 0.72;
}

.landing-astroanamnesis-inner.home-container {
  gap: clamp(34px, 5vw, 78px);
  padding-top: 0;
  padding-bottom: 0;
}

.landing-tools-section.home-section {
  overflow: hidden;
  padding-top: clamp(52px, 6vw, 86px);
  padding-bottom: clamp(54px, 6vw, 92px);
  border-top: 0;
  background:
    radial-gradient(circle at 76% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 29rem),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 4%, var(--bg)) 0%, var(--bg) 100%);
}

.landing-tools-section .landing-audience-shell.modules-panel {
  display: grid;
  grid-template-columns: minmax(340px, 0.52fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 56px);
  align-items: start;
  padding: clamp(34px, 5vw, 62px);
}

.landing-tools-section .landing-section-head {
  min-width: 0;
  width: 100%;
  max-width: 360px;
  margin: 0;
}

.landing-tools-section .landing-section-head h2 {
  max-width: 100%;
  text-wrap: balance;
}

.landing-modules-orbit-mark {
  display: block;
  width: clamp(112px, 10vw, 140px);
  height: auto;
  margin: clamp(46px, 6vw, 78px) auto 0;
  overflow: visible;
  color: var(--accent);
}

@media (min-width: 1101px) {
  .landing-tools-section .landing-section-head {
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .landing-tools-section .landing-modules-orbit-mark {
    flex: 0 0 auto;
    margin: auto;
  }
}

.landing-modules-orbit-ring {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.landing-modules-orbit-core {
  fill: currentColor;
}

.landing-tools-grid {
  margin-top: 0;
}

.landing-tools-catalog {
  display: grid;
  min-width: 0;
  gap: clamp(28px, 3.5vw, 42px);
}

.landing-tools-footer {
  display: grid;
  grid-column: 1 / -1;
  min-width: 0;
  gap: 24px;
}

.landing-module-group {
  display: grid;
  min-width: 0;
  gap: 15px;
}

.landing-module-group-tools {
  border-top: 1px solid color-mix(in srgb, var(--accent) 18%, var(--line));
  padding-top: clamp(24px, 3vw, 34px);
}

.landing-module-group-heading {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.landing-module-group-heading h3,
.landing-module-group-heading p {
  margin: 0;
}

.landing-module-group-heading h3 {
  color: var(--accent-strong);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.landing-module-group-heading p {
  max-width: 420px;
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.45;
  text-align: right;
}

.landing-tool-features-grid article {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line));
  background:
    radial-gradient(circle at 92% 12%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 46%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--accent) 5%, var(--surface)));
}

.landing-tool-features-grid article small {
  border-color: color-mix(in srgb, var(--accent) 24%, transparent);
  background: color-mix(in srgb, var(--accent) 15%, var(--surface));
}

.landing-ephemeris-note {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 4%, var(--surface));
  padding: 13px 15px;
}

.landing-ephemeris-mark {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  place-items: center;
}

.landing-ephemeris-mark img {
  display: block;
  width: 36px;
  height: auto;
  object-fit: contain;
}

.landing-ephemeris-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.landing-ephemeris-copy strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 760;
}

.landing-ephemeris-copy > span {
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.landing-tools-grid article,
.landing-trust-grid article,
.landing-workflow-grid article,
.landing-feature-grid article {
  border: 1px solid color-mix(in srgb, var(--accent) 14%, var(--line));
  border-radius: 18px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, transparent), color-mix(in srgb, var(--surface) 72%, transparent));
  box-shadow: 0 14px 34px color-mix(in srgb, var(--text) 4%, transparent);
}

.landing-tools-grid article {
  min-height: 112px;
  padding: 18px 18px 17px;
}

.landing-tools-grid article small {
  background: color-mix(in srgb, var(--accent) 11%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent);
  border-radius: 999px;
  min-width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.landing-ai-section.home-section {
  padding-top: clamp(52px, 6vw, 84px);
  padding-bottom: clamp(52px, 6vw, 84px);
}

.landing-ai-panel.prompt-panel {
  display: grid;
  grid-template-columns: minmax(250px, 0.88fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
  padding: clamp(32px, 4.8vw, 58px);
}

.landing-ai-panel .landing-section-head {
  width: 100%;
  max-width: 470px;
  margin: 0;
}

.landing-ai-copy {
  border-radius: 22px;
  background: color-mix(in srgb, var(--surface) 58%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 10%, var(--line));
  padding: clamp(20px, 3vw, 30px);
}

.flow-section.home-section,
.landing-trust-section.home-section {
  padding-top: clamp(56px, 6vw, 88px);
  padding-bottom: clamp(56px, 6vw, 88px);
}

.flow-section .landing-wide-head,
.landing-trust-section .landing-wide-head {
  width: min(1180px, calc(100% - 48px));
  max-width: 1180px;
  margin-right: auto;
  margin-left: auto;
}

.landing-workflow-grid,
.landing-trust-grid {
  width: min(1180px, calc(100% - 48px));
  margin-right: auto;
  margin-left: auto;
}

.landing-workflow-grid {
  margin-top: clamp(28px, 4vw, 44px);
  margin-bottom: 0;
  list-style: none;
}

.landing-workflow-grid > li {
  display: flex;
  min-width: 0;
}

.landing-workflow-grid article {
  width: 100%;
  padding: 22px 20px;
}

.landing-workflow-card-head {
  display: flex;
  align-items: center;
}

.landing-workflow-grid h3 {
  min-height: 2.5em;
  line-height: 1.25;
}

.landing-workflow-grid .landing-workflow-icon {
  border-radius: 12px;
  background: var(--accent-soft);
}

.landing-workflow-icon svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.landing-trust-grid {
  gap: 16px;
  margin-top: clamp(24px, 4vw, 38px);
}

.landing-professional-use.home-section {
  position: relative;
  overflow: hidden;
  padding: clamp(74px, 7vw, 104px) 0;
  border-top: 1px solid color-mix(in srgb, var(--accent) 12%, var(--line));
  background:
    radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 34rem),
    radial-gradient(circle at 88% 66%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 28rem),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 96%, transparent), color-mix(in srgb, var(--bg) 92%, var(--surface)));
}

.landing-professional-use-grid {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(36px, 5vw, 56px);
  align-items: center;
}

.professional-use-copy h2 {
  max-width: 600px;
  margin: 14px 0 0;
  color: var(--text);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.professional-use-copy > p:not(.eyebrow) {
  max-width: 560px;
  margin: 22px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.7;
}

.professional-use-claim {
  max-width: 540px;
  margin-top: 30px;
  padding: 18px 20px 18px 22px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 46%, transparent);
  border-radius: 16px;
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--accent-strong);
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text) 4%, transparent);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.55;
}

.professional-use-panel {
  border: 1px solid rgba(20, 105, 110, 0.22);
  border-radius: 28px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.64)),
    color-mix(in srgb, var(--surface) 72%, transparent);
  box-shadow: 0 24px 60px color-mix(in srgb, var(--text) 6%, transparent);
  backdrop-filter: blur(14px);
  padding: clamp(24px, 3vw, 32px);
}

.professional-use-panel-head {
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(20, 105, 110, 0.13);
}

.professional-use-panel-head .eyebrow {
  margin-bottom: 8px;
}

.professional-use-panel-head p:last-child {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.professional-use-list {
  display: flex;
  flex-direction: column;
}

.professional-use-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(20, 105, 110, 0.12);
}

.professional-use-row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.professional-use-index {
  padding-top: 3px;
  color: var(--accent-strong);
  opacity: 0.78;
  font-family: "Astro Jupiter", ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.professional-use-row h3 {
  margin: 0 0 6px;
  color: var(--text);
  font-size: 18px;
  line-height: 1.25;
}

.professional-use-row p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.landing-cta.final-cta {
  width: min(1180px, calc(100% - 48px));
  margin: clamp(44px, 6vw, 82px) auto clamp(58px, 7vw, 102px);
  padding: clamp(34px, 5vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 64px);
  border-top: 1px solid color-mix(in srgb, var(--accent) 17%, var(--line));
  background:
    radial-gradient(circle at 86% 28%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 26rem),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 95%, transparent), color-mix(in srgb, var(--accent) 5%, var(--surface)));
}

.landing-cta.final-cta > div {
  max-width: 720px;
}

.landing-cta.final-cta .primary-action {
  flex: 0 0 auto;
  min-width: 132px;
}

@media (max-width: 1100px) {
  .landing-tools-section .landing-audience-shell.modules-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }

  .landing-tools-section .landing-section-head {
    max-width: 720px;
  }
}

@media (max-width: 980px) {
  .home-container,
  .landing-astroanamnesis-inner.home-container,
  .landing-ai-panel.home-container,
  .flow-section .landing-wide-head,
  .landing-trust-section .landing-wide-head,
  .landing-workflow-grid,
  .landing-trust-grid,
  .landing-professional-use-grid,
  .landing-cta.final-cta,
  .section-divider {
    width: min(100% - 40px, 720px);
  }

  .home-section {
    padding-top: clamp(46px, 8vw, 70px);
    padding-bottom: clamp(46px, 8vw, 70px);
  }

  .home-section--hero {
    padding-bottom: 28px;
  }

  .landing-tools-section .landing-audience-shell.modules-panel,
  .landing-ai-panel.prompt-panel {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .landing-modules-orbit-mark {
    width: 108px;
    margin: 34px auto 0;
  }

  .landing-tools-section .landing-section-head,
  .landing-ai-panel .landing-section-head {
    max-width: 100%;
  }

  .landing-module-group-heading {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }

  .landing-module-group-heading p {
    max-width: 560px;
    text-align: left;
  }

  .landing-tools-grid,
  .landing-workflow-grid,
  .landing-trust-grid {
    grid-template-columns: 1fr;
  }

  .landing-professional-use.home-section {
    padding-top: clamp(62px, 9vw, 82px);
    padding-bottom: clamp(62px, 9vw, 82px);
  }

  .landing-professional-use-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .professional-use-copy h2,
  .professional-use-copy > p:not(.eyebrow),
  .professional-use-claim {
    max-width: 680px;
  }

  .landing-cta.final-cta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 560px) {
  .landing-tools-section.home-section {
    padding-inline: 0;
  }

  .home-container,
  .landing-astroanamnesis-inner.home-container,
  .landing-ai-panel.home-container,
  .flow-section .landing-wide-head,
  .landing-trust-section .landing-wide-head,
  .landing-workflow-grid,
  .landing-trust-grid,
  .landing-professional-use-grid,
  .landing-cta.final-cta,
  .section-divider {
    width: calc(100% - 32px);
  }

  .section-card,
  .landing-cta.final-cta {
    border-radius: 24px;
  }

  .landing-tools-section .landing-audience-shell.modules-panel,
  .landing-ai-panel.prompt-panel,
  .landing-cta.final-cta {
    padding: 24px;
  }

  .landing-tools-grid article,
  .landing-workflow-grid article,
  .landing-trust-grid article {
    min-height: 0;
  }

  .landing-professional-use.home-section {
    padding-top: 58px;
    padding-bottom: 58px;
  }

  .professional-use-copy h2 {
    font-size: clamp(34px, 11vw, 44px);
    letter-spacing: -0.035em;
  }

  .professional-use-copy > p:not(.eyebrow) {
    font-size: 16px;
    line-height: 1.62;
  }

  .professional-use-claim {
    margin-top: 24px;
    padding: 16px 18px;
    font-size: 15px;
  }

  .professional-use-panel {
    border-radius: 24px;
    padding: 22px;
  }

  .professional-use-row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 18px 0;
  }

  .professional-use-index {
    padding-top: 0;
  }
}

/* The ordered steps communicate the sequence without connectors across wrapped rows. */
.flow-section .landing-pro-grid::before,
.flow-section .landing-pro-grid::after {
  content: none;
  display: none;
}

/* Reuse compact cards before five columns would make the text too narrow. */
@media (max-width: 1100px) {
  .landing-workflow-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .landing-workflow-grid article {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    grid-template-rows: min-content 1fr;
    column-gap: 14px;
    row-gap: 0;
    align-items: start;
    width: 100%;
    min-width: 0;
  }

  .landing-workflow-card-head {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .landing-workflow-grid article > h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
    margin: 0 0 6px;
  }

  .landing-workflow-grid article > p {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    min-width: 0;
    max-width: none;
    overflow-wrap: break-word;
  }
}

@media (max-width: 760px) {
  .landing-workflow-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Astroanamnesis method preview: larger editorial crop */
.landing-astroanamnesis-inner.home-container {
  grid-template-columns: minmax(0, 1fr) minmax(380px, 0.68fr);
  gap: clamp(30px, 4vw, 52px);
  align-items: center;
  padding-inline: clamp(18px, 3vw, 38px);
}

.landing-core-figure {
  justify-self: end;
  width: min(100%, 450px);
  aspect-ratio: 0.92 / 1;
  border-radius: 30px;
  background:
    radial-gradient(circle at 62% 48%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 56%),
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 96%, var(--accent) 2%), color-mix(in srgb, var(--bg) 88%, var(--accent) 6%));
  box-shadow:
    0 24px 70px color-mix(in srgb, var(--text) 6%, transparent),
    0 0 0 1px color-mix(in srgb, var(--surface) 54%, transparent) inset;
}

.landing-core-figure svg {
  top: -13%;
  left: 6%;
  width: 158%;
  filter:
    saturate(1.04)
    contrast(1.06)
    drop-shadow(0 18px 34px color-mix(in srgb, var(--accent) 9%, transparent));
}

.landing-core-figure::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--surface) 42%, transparent), transparent 28%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 18%, transparent), transparent 34%),
    radial-gradient(circle at 92% 10%, rgba(255, 255, 255, 0.5), transparent 24%);
}

@media (max-width: 980px) {
  .landing-astroanamnesis-inner.home-container {
    grid-template-columns: 1fr;
  }

  .landing-core-figure {
    justify-self: center;
    width: min(100%, 420px);
  }
}

@media (max-width: 560px) {
  .landing-core-figure {
    width: min(100%, 360px);
    border-radius: 24px;
  }

  .landing-core-figure svg {
    top: -11%;
    left: 3%;
    width: 154%;
  }
}

/* Scroll reveal: sections enter as a calm reading sequence. */
.js .js-scroll-reveal .reveal-slide,
.js .js-scroll-reveal.reveal-slide,
.js .js-card-reveal .reveal-card {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity 720ms ease,
    transform 720ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.js .js-scroll-reveal .reveal-slide-left {
  transform: translate3d(-38px, 0, 0);
}

.js .js-scroll-reveal .reveal-slide-right {
  transform: translate3d(38px, 0, 0);
}

.js .js-scroll-reveal .reveal-slide-up,
.js .js-scroll-reveal.reveal-slide-up {
  transform: translate3d(0, 30px, 0);
}

.js .js-card-reveal .reveal-card {
  transform: translate3d(0, 26px, 0);
}

.js .js-scroll-reveal.is-visible .reveal-slide,
.js .js-scroll-reveal.is-visible.reveal-slide,
.js .js-card-reveal.is-visible .reveal-card {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.js .js-scroll-reveal.is-visible .reveal-slide-left {
  transition-delay: 80ms;
}

.js .js-scroll-reveal.is-visible .reveal-slide-right {
  transition-delay: 180ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(1) {
  transition-delay: 140ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(2) {
  transition-delay: 230ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(3) {
  transition-delay: 320ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(4) {
  transition-delay: 410ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(5) {
  transition-delay: 500ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(6) {
  transition-delay: 590ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(7) {
  transition-delay: 680ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(8) {
  transition-delay: 770ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(9) {
  transition-delay: 860ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(10) {
  transition-delay: 950ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(11) {
  transition-delay: 1040ms;
}

.js .js-card-reveal.is-visible .reveal-card:nth-child(12) {
  transition-delay: 1130ms;
}

/* Keep the cropped chart preview technical without harsh black dividers. */
.landing-core-figure {
  --landing-chart-line: rgba(86, 98, 101, 0.6);
  --landing-chart-line-strong: rgba(86, 98, 101, 0.7);
  --landing-chart-line-soft: rgba(86, 98, 101, 0.45);
}

.landing-core-figure .chart-zodiac-segment,
.landing-core-figure .chart-sign-line,
.landing-core-figure .chart-decanate-line,
.landing-core-figure .chart-dodecatemoria-line,
.landing-core-figure .landing-chart-house-line,
.landing-core-figure .chart-zodiac-inner,
.landing-core-figure .chart-inner,
.landing-core-figure .chart-mini-center,
.landing-core-figure .chart-ring-divider,
.landing-core-figure .chart-exterior-ring {
  stroke: var(--landing-chart-line);
}

.landing-core-figure .chart-zodiac-segment,
.landing-core-figure .chart-sign-line,
.landing-core-figure .chart-ring-divider,
.landing-core-figure .chart-exterior-ring {
  stroke: var(--landing-chart-line-strong);
}

.landing-core-figure .chart-degree-tick {
  stroke: var(--landing-chart-line-soft);
}

/* Reuse the exact editorial chart skin when the technical wheel appears in the hero. */
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) {
  --landing-chart-line: var(--chart-line);
  --landing-chart-line-strong: var(--chart-segment-line);
  --landing-chart-line-soft: var(--chart-line);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-glow {
  fill: color-mix(in srgb, var(--accent) 8%, transparent);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-segment {
  fill: var(--segment-color);
  stroke: var(--chart-segment-line);
  stroke-width: 1.35;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-decanate-segment,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 92%, #ffffff);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 88%, #ffffff);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-sign-line,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-decanate-line,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-dodecatemoria-line,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-chart-house-line,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-inner,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-inner,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-mini-center,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-ring-divider,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-exterior-ring {
  stroke: var(--landing-chart-line);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-sign-line,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-ring-divider,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-exterior-ring {
  stroke: var(--landing-chart-line-strong);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-dodecatemoria-line {
  stroke-width: 0.82;
  opacity: 0.92;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-decanate-line {
  stroke-width: 0.9;
  opacity: 0.9;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-sign-line {
  stroke-width: 1.45;
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-degree-tick {
  stroke: var(--landing-chart-line-soft);
  stroke-width: 0.72;
  opacity: 0.72;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-degree-tick-mid {
  stroke-width: 0.95;
  opacity: 0.9;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-degree-tick-major {
  stroke-width: 1.35;
  opacity: 1;
}

#landingTechnicalDegreeTicks .chart-degree-tick {
  stroke: var(--chart-line);
  stroke-width: 0.72;
  opacity: 0.72;
}

#landingTechnicalDegreeTicks .chart-degree-tick-mid {
  stroke-width: 0.95;
  opacity: 0.9;
}

#landingTechnicalDegreeTicks .chart-degree-tick-major {
  stroke-width: 1.35;
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-chart-house-line {
  display: none;
  stroke-width: 0.78;
  opacity: 0.24;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-inner,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-inner,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-mini-center,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-ring-divider,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-exterior-ring {
  fill: none;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-inner {
  fill: var(--chart-canvas);
  stroke-width: 1.15;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-inner {
  display: none;
  stroke-width: 1.02;
  opacity: 0.88;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-ring {
  display: block;
  stroke: var(--chart-line);
  stroke-width: 1.15;
  opacity: 0.9;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspects {
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect {
  fill: none;
  stroke-width: 1.15;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.94;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-anchor {
  fill: none;
  stroke: var(--planet-color, var(--accent));
  stroke-width: 1.45;
  stroke-linecap: round;
  opacity: 0.88;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-blue {
  stroke: var(--chart-aspect-harmonious);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-green {
  stroke: var(--chart-aspect-quincunx);
  stroke-width: 1.65;
  stroke-dasharray: 4 2.8;
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-red {
  stroke: var(--chart-aspect-tense);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-soft {
  stroke: var(--chart-aspect-conjunction);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-mini-center {
  fill: var(--chart-canvas);
  fill-opacity: 1;
  stroke: var(--chart-line);
  stroke-width: 1.15;
  stroke-opacity: 0.9;
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet {
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-leader,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-degree-mark,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-connector {
  stroke: var(--planet-color);
  stroke-linecap: round;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-leader,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-degree-mark {
  stroke-width: 1.4;
  opacity: 0.9;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-connector {
  stroke-width: 0.72;
  opacity: 0.76;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet text {
  fill: color-mix(in srgb, var(--text) 78%, var(--accent));
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-weight: 400;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet-glyph {
  fill: var(--chart-ink) !important;
  font-size: 15px !important;
  stroke: var(--planet-color);
  stroke-width: 0.9;
  paint-order: fill stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet-glyph-major {
  font-size: 18px !important;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet-degree,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet-minute,
:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-planet-labels .chart-planet-sign {
  display: none;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .aa-hero-planet-label .chart-planet-glyph {
  fill: var(--chart-ink) !important;
  stroke: var(--planet-color);
  stroke-width: 0.9;
  paint-order: fill stroke;
}

.astroanamnesis-svg .aa-hero-planet-glyph {
  fill: var(--chart-ink);
  stroke: var(--planet-color);
  stroke-width: 0.9;
  paint-order: fill stroke;
  font-size: 13.8px;
}

.astroanamnesis-svg .aa-hero-planet-glyph-major {
  font-size: 16.55px;
}

.landing-hero .aa-hero-optical-glyph {
  stroke-linecap: round;
  stroke-linejoin: round;
}

html[data-theme="dark"] .landing-hero .aa-hero-optical-glyph {
  --hero-glyph-color: color-mix(in srgb, var(--planet-color) 58%, var(--chart-ink));
}

.landing-hero .aa-sideral-aspect {
  stroke-width: 1.15;
  opacity: 0.94;
}

.landing-hero .aa-sideral-aspect-anchor {
  stroke: var(--planet-color);
  stroke-width: 1.45;
  opacity: 0.88;
}

.landing-hero .aa-sideral-inner-fill {
  fill: var(--chart-canvas);
}

.landing-hero .aa-sideral-inner-boundary,
.landing-hero .aa-sideral-aspect-ring,
.landing-hero .aa-sideral-center-ring {
  stroke: var(--chart-line);
  stroke-width: 1.15;
  opacity: 0.9;
}

.landing-hero .aa-sideral-center-ring {
  fill: var(--chart-canvas) !important;
  fill-opacity: 1;
  stroke-opacity: 0.9;
  opacity: 1 !important;
}

.landing-hero .aa-sideral-planet-degree-mark {
  stroke-width: 1.4;
  opacity: 0.9;
}

.landing-hero .aa-sideral-planet-connector {
  stroke-width: 0.72;
  opacity: 0.76;
}

.landing-hero .aa-sideral-planet-glyph {
  fill: var(--chart-ink);
  stroke: var(--planet-color);
  stroke-width: 0.9;
  paint-order: fill stroke;
  opacity: 1;
}

.landing-hero .aa-sideral-aspect-soft {
  stroke: var(--chart-aspect-conjunction);
}

.landing-hero .aa-sideral-aspect-blue {
  stroke: var(--chart-aspect-harmonious);
}

.landing-hero .aa-sideral-aspect-green {
  stroke: var(--chart-aspect-quincunx);
  stroke-width: 1.65;
  stroke-dasharray: 4 2.8;
  opacity: 1;
}

.landing-hero .aa-sideral-aspect-red {
  stroke: var(--chart-aspect-tense);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-exterior-ring {
  stroke-width: 1.08;
  opacity: 0.88;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-ring-divider {
  stroke-width: 1.02;
  opacity: 0.82;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-glyph {
  font-family: "Astro Jupiter", Arial, "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-variant-emoji: text;
  text-rendering: geometricPrecision;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) text {
  transform: var(--landing-wheel-text-transform, none);
  transform-box: fill-box;
  transform-origin: center;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-sign-symbol {
  fill: #111827;
  stroke: var(--zodiac-ink);
  stroke-width: var(--landing-sign-stroke-width, 1.9px);
  paint-order: fill stroke;
  font-size: 28px;
  font-weight: 560;
  opacity: var(--landing-source-sign-opacity, 1);
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-decanate-symbol {
  fill: #111827;
  stroke: var(--zodiac-ink);
  stroke-width: 0.5px;
  paint-order: fill stroke;
  font-size: 10px;
  font-weight: 560;
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-dodecatemoria-symbol {
  fill: #111827;
  stroke: var(--zodiac-ink);
  stroke-width: 0.5px;
  paint-order: fill stroke;
  font-size: 6.2px;
  font-weight: 560;
  opacity: 1;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-center-dot {
  fill: var(--accent);
}

@media (prefers-reduced-motion: reduce) {
  .js .js-scroll-reveal .reveal-slide,
  .js .js-scroll-reveal.reveal-slide,
  .js .js-card-reveal .reveal-card {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* Final hero override: conversion CTA, tighter first viewport and clearer diagram. */
.landing-hero.home-section--hero {
  padding-top: clamp(24px, 2.6vw, 44px);
  padding-bottom: clamp(12px, 1.6vw, 26px);
}

.landing-hero .landing-hero-inner {
  width: min(100%, 1020px);
}

.landing-hero .landing-hero-kicker {
  margin-bottom: 10px;
}

.landing-hero .landing-hero-copy {
  width: min(100%, 940px);
  font-size: clamp(38px, 3.75vw, 58px);
  line-height: 1.045;
}

.landing-hero .landing-hero-subcopy {
  width: min(100%, 760px);
  margin-top: 14px;
  font-size: clamp(15.5px, 1.05vw, 17px);
  line-height: 1.48;
}

.landing-hero .landing-hero-support {
  width: min(100%, 720px);
  margin-top: 7px;
  font-size: clamp(15px, 1vw, 16.5px);
  line-height: 1.48;
}

.landing-hero .landing-hero-method-seal {
  margin-top: 10px;
  margin-bottom: 0;
  font-size: clamp(13.5px, 0.9vw, 14.5px);
}

.landing-hero .landing-hero-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.landing-hero .landing-hero-primary-cta,
.landing-hero .landing-hero-secondary-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 720;
  text-decoration: none;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    transform 180ms ease;
}

.landing-hero .landing-hero-primary-cta {
  padding: 0 19px;
  color: #fff;
  background: color-mix(in srgb, var(--accent-strong) 92%, #0f766e 8%);
  box-shadow: 0 14px 30px color-mix(in srgb, var(--accent) 16%, transparent);
}

.landing-hero .landing-hero-primary-cta:hover,
.landing-hero .landing-hero-primary-cta:focus-visible {
  background: color-mix(in srgb, var(--accent-strong) 96%, #0f766e 4%);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--accent) 19%, transparent);
  transform: translateY(-1px);
}

.landing-hero .landing-hero-secondary-cta {
  padding: 0 18px;
  color: color-mix(in srgb, var(--accent-strong) 88%, var(--text) 12%);
  border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
  background: rgba(255, 255, 255, 0.64);
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 5%, transparent);
}

.landing-hero .landing-hero-secondary-cta:hover,
.landing-hero .landing-hero-secondary-cta:focus-visible {
  color: var(--accent-strong);
  border-color: color-mix(in srgb, var(--accent) 44%, transparent);
  background: rgba(255, 255, 255, 0.82);
  transform: translateY(-1px);
}

.landing-hero .landing-astro-preview {
  margin-top: clamp(6px, 0.9vw, 14px);
  padding-bottom: clamp(8px, 1vw, 16px);
}

.landing-hero .landing-astro-system > .astroanamnesis-svg,
.landing-hero .landing-astro-image {
  max-height: clamp(360px, calc(100dvh - 340px), 600px);
  filter: none;
}

.landing-hero .astroanamnesis-svg .aa-card-title {
  font-weight: 560;
  opacity: 1;
}

.landing-hero .astroanamnesis-svg .aa-card-sub {
  font-weight: 500;
  opacity: 0.98;
}

.landing-hero .astroanamnesis-svg .aa-observer-sub {
  font-weight: 500;
  opacity: 0.88;
}

.landing-hero .astroanamnesis-svg .aa-label {
  opacity: 0.9;
}

.landing-hero .astroanamnesis-svg .aa-small {
  opacity: 0.82;
}

.landing-hero .astroanamnesis-svg .aa-house-number {
  fill: currentColor;
  font-family: "Astro Jupiter", Inter, Arial, sans-serif;
  font-size: 14px;
  font-weight: 700;
  stroke: var(--chart-canvas);
  stroke-width: 1.2px;
  paint-order: stroke fill;
  opacity: 0.94;
}

.landing-hero .astroanamnesis-svg .aa-house-cusp-line {
  stroke: var(--chart-line);
  stroke-width: 0.85px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  opacity: 0.8;
}

.landing-hero .astroanamnesis-svg .aa-house-cusp-line-angle {
  stroke: var(--danger);
  stroke-width: 2.2px;
  opacity: 0.9;
}

.landing-hero .astroanamnesis-svg .aa-house-cusp-extensions {
  fill: none;
  stroke: var(--accent-strong);
  stroke-width: 1.2px;
  stroke-linecap: butt;
  vector-effect: non-scaling-stroke;
  shape-rendering: geometricPrecision;
  opacity: 0.96;
}

.landing-hero .astroanamnesis-svg .aa-house-annotation-layer {
  pointer-events: none;
}

.landing-hero .astroanamnesis-svg .aa-line {
  stroke-width: 2.08px;
  opacity: 0.84;
}

.landing-hero .astroanamnesis-svg .aa-line-soft {
  stroke-width: 1.45px;
  opacity: 0.66;
}

.landing-hero .astroanamnesis-svg .aa-line-faint {
  opacity: 0.48;
}

.landing-hero .astroanamnesis-svg .aa-dashed {
  opacity: 0.76;
}

.landing-hero .astroanamnesis-svg .aa-wheel-outer {
  opacity: 0.94;
}

.landing-hero .astroanamnesis-svg .aa-wheel-mid {
  opacity: 0.76;
}

.landing-hero .astroanamnesis-svg .aa-wheel-inner {
  opacity: 0.58;
}

.landing-hero .astroanamnesis-svg .aa-spoke {
  opacity: 0.64;
}

.landing-hero .astroanamnesis-svg .aa-planet-glyph {
  opacity: 1;
}

@media (max-height: 820px) and (min-width: 900px) {
  .landing-hero.home-section--hero {
    padding-top: 22px;
    padding-bottom: 10px;
  }

  .landing-hero .landing-hero-kicker {
    margin-bottom: 8px;
  }

  .landing-hero .landing-hero-copy {
    font-size: clamp(36px, 3.2vw, 52px);
    line-height: 1.04;
  }

  .landing-hero .landing-hero-subcopy {
    margin-top: 10px;
  }

  .landing-hero .landing-hero-subcopy,
  .landing-hero .landing-hero-support {
    font-size: 15px;
    line-height: 1.42;
  }

  .landing-hero .landing-hero-method-seal {
    margin-top: 8px;
  }

  .landing-hero .landing-hero-cta-row {
    margin-top: 10px;
  }

  .landing-hero .landing-hero-primary-cta,
  .landing-hero .landing-hero-secondary-cta {
    min-height: 38px;
    font-size: 14px;
  }

  .landing-hero .landing-astro-preview {
    margin-top: 4px;
    padding-bottom: 6px;
  }

  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    max-height: min(48dvh, 430px);
  }
}

@media (max-width: 860px) {
  .landing-hero.home-section--hero {
    padding-top: 24px;
    padding-bottom: 34px;
  }

  .landing-hero .landing-hero-copy {
    width: min(100%, 720px);
    font-size: clamp(32px, 8.6vw, 44px);
    line-height: 1.1;
  }

  .landing-hero .landing-hero-subcopy,
  .landing-hero .landing-hero-support {
    width: min(100%, 680px);
  }

  .landing-hero .landing-hero-cta-row {
    margin-top: 14px;
  }

  .landing-hero .landing-hero-primary-cta,
  .landing-hero .landing-hero-secondary-cta {
    min-height: 44px;
    padding-inline: 17px;
  }

  .landing-hero .landing-astro-preview {
    margin-top: 14px;
  }

  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    width: min(100%, 980px);
    max-height: none;
  }
}

@media (max-width: 520px) {
  .landing-hero.home-section--hero {
    padding-inline: 20px;
  }

  .landing-hero .landing-hero-cta-row {
    width: min(100%, 320px);
    margin-inline: auto;
  }

  .landing-hero .landing-hero-primary-cta,
  .landing-hero .landing-hero-secondary-cta {
    width: 100%;
  }
}

/* Final fit pass: keep the hero complete in the first viewport without losing presence. */
.landing-auth-status:empty {
  min-height: 0;
  margin: 0;
}

.landing-hero .landing-hero-cta-row {
  margin-top: clamp(10px, 1vw, 14px);
}

.landing-hero.home-section--hero {
  gap: clamp(16px, 2vw, 26px);
}

@media (max-height: 840px) and (min-width: 900px) {
  .landing-hero.home-section--hero {
    padding-top: clamp(16px, 2vh, 22px);
    padding-bottom: 8px;
    gap: clamp(12px, 2.2vh, 18px);
  }

  .landing-hero .landing-hero-kicker {
    margin-bottom: 8px;
  }

  .landing-hero .landing-hero-copy {
    font-size: clamp(36px, 3.05vw, 50px);
    line-height: 1.04;
  }

  .landing-hero .landing-hero-subcopy {
    margin-top: 11px;
  }

  .landing-hero .landing-hero-support {
    margin-top: 6px;
  }

  .landing-hero .landing-hero-method-seal {
    margin-top: 8px;
  }

  .landing-hero .landing-hero-cta-row {
    margin-top: 9px;
  }

  .landing-hero .landing-hero-primary-cta,
  .landing-hero .landing-hero-secondary-cta {
    min-height: 37px;
    padding-inline: 16px;
  }

  .landing-hero .landing-astro-preview {
    margin-top: 2px;
    padding-bottom: 4px;
  }

  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    max-height: min(47dvh, 410px);
  }
}

@media (min-width: 360px) and (max-width: 520px) {
  .landing-hero .landing-hero-cta-row {
    width: auto;
    max-width: 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 9px;
  }

  .landing-hero .landing-hero-primary-cta,
  .landing-hero .landing-hero-secondary-cta {
    width: auto;
    min-height: 42px;
    padding-inline: 14px;
    font-size: 14px;
  }
}

/* Brand-first hero title */
.landing-hero .landing-hero-copy--brand-first {
  display: flex;
  width: min(100%, 1060px);
  flex-direction: column;
  align-items: center;
  gap: clamp(6px, 0.8vw, 10px);
  margin-inline: auto;
  color: var(--text);
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0;
  text-wrap: balance;
}

.landing-hero .landing-hero-brand-word {
  display: block;
  color: var(--accent-strong);
  font-size: clamp(56px, 6.8vw, 106px);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: 0;
}

.landing-hero .landing-hero-title-support {
  display: block;
  max-width: 1020px;
  color: var(--accent-strong);
  font-size: clamp(24px, 2.5vw, 40px);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: 6px;
}

.landing-astroanamnesis-copy h2 > span {
  display: block;
}

@media (min-width: 1100px) {
  .landing-hero .landing-hero-subcopy,
  .landing-hero .landing-hero-support {
    width: min(100%, 1020px);
    max-width: none;
    margin-inline: auto;
    text-align: center;
    white-space: nowrap;
  }

  .landing-hero .landing-hero-subcopy {
    font-size: clamp(14.5px, 1vw, 16px);
  }
}

.landing-hero :is(
  .landing-hero-brand-word,
  .landing-hero-title-support,
  .landing-hero-support,
  .landing-hero-method-seal
) {
  transition: color 0.55s ease;
}

.landing-hero .landing-hero-method-seal::before,
.landing-hero .landing-hero-method-seal::after {
  transition: background-color 0.55s ease;
}

@media (max-height: 840px) and (min-width: 900px) {
  .landing-hero .landing-hero-brand-word {
    font-size: clamp(52px, 6.4vw, 92px);
  }

  .landing-hero .landing-hero-title-support {
    font-size: clamp(22px, 2.35vw, 34px);
  }
}

@media (max-width: 720px) {
  .landing-hero .landing-hero-copy--brand-first {
    width: min(100%, 680px);
    gap: 7px;
  }

  .landing-hero .landing-hero-brand-word {
    font-size: clamp(33px, 10.8vw, 58px);
    line-height: 0.95;
  }

  .landing-hero .landing-hero-title-support {
    max-width: 560px;
    font-size: clamp(21px, 5.8vw, 30px);
    line-height: 1.12;
  }
}

/* Intake form responsive polish: keep the first-chart form calm on laptop/tablet widths. */
.intake-screen {
  overflow-x: hidden;
}

.intake-copy,
.intake-panel,
.birth-form {
  min-width: 0;
}

.intake-copy .guia-interna-logo.hero-logo {
  max-width: 100%;
  height: auto;
  white-space: normal;
  line-height: 0.98;
}

@media (max-width: 1280px) {
  .intake-screen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    align-content: start;
    justify-items: center;
    width: min(100%, 880px);
    min-height: 100dvh;
    gap: clamp(20px, 3vw, 34px);
    padding: clamp(28px, 4vw, 52px) clamp(20px, 5vw, 44px) 28px;
  }

  .intake-copy {
    justify-self: center;
    max-width: 720px;
    text-align: center;
  }

  .intake-copy .guia-interna-logo.hero-logo {
    margin: 8px auto 6px;
    font-size: clamp(42px, 7vw, 64px);
  }

  .intake-copy .lede {
    max-width: 560px;
    margin-inline: auto;
  }

  .entry-actions,
  .theme-switcher {
    justify-content: center;
  }

  .intake-panel {
    justify-self: center;
    width: min(100%, 640px);
    border-radius: 14px;
    padding: clamp(20px, 3vw, 30px);
  }

  .intake-footer {
    width: 100%;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .legal-links {
    justify-content: center;
  }
}

@media (max-width: 760px) {
  .intake-screen {
    gap: 20px;
    padding: 24px 18px;
  }

  .intake-copy .eyebrow {
    margin-bottom: 8px;
  }

  .intake-copy .guia-interna-logo.hero-logo {
    margin: 4px auto 4px;
    font-size: clamp(36px, 11vw, 52px);
  }

  .intake-copy .lede {
    margin-top: 14px;
    font-size: 16px;
    line-height: 1.5;
  }

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

  .birth-form .span-2 {
    grid-column: 1;
  }

  .legal-consent {
    font-size: 11.5px;
  }
}

@media (max-width: 460px) {
  .intake-screen {
    padding-inline: 14px;
  }

  .entry-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .entry-actions .google-action,
  .entry-actions .secondary-action {
    width: 100%;
    justify-content: center;
  }

  .theme-switcher {
    gap: 8px;
    justify-content: center;
  }

  .theme-choice {
    width: 34px;
    height: 34px;
  }

  .theme-choice svg {
    width: 22px;
    height: 22px;
  }

  .intake-panel {
    padding: 16px 14px;
  }
}

/* Night mode polish: keep dark surfaces readable and premium. */
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) {
  --night-bg: #071018;
  --night-surface: rgba(13, 23, 33, 0.92);
  --night-surface-soft: rgba(18, 31, 43, 0.88);
  --night-panel: rgba(15, 27, 38, 0.96);
  --night-border: rgba(150, 182, 185, 0.22);
  --night-border-strong: rgba(142, 229, 219, 0.34);
  --night-text: #eef7f7;
  --night-muted: #b7c8d4;
  --night-soft: #91a7b3;
  --night-teal: #8ee5db;
  --night-teal-dark: #143f3d;
  --night-gold: #d8b66d;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-header,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .site-header {
  background: rgba(7, 16, 24, 0.82);
  border-color: rgba(150, 182, 185, 0.14);
  color: var(--night-text);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-header-actions,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-toolbar,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-switcher {
  background: rgba(12, 23, 34, 0.74);
  border-color: rgba(150, 182, 185, 0.2);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice {
  color: rgba(190, 215, 218, 0.82);
  background: transparent;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice:focus-visible,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice.active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice[aria-pressed="true"] {
  color: var(--night-teal);
  background: rgba(142, 229, 219, 0.14) !important;
  box-shadow: inset 0 0 0 1px rgba(142, 229, 219, 0.2);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice-dark:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice-dark:focus-visible,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice-dark.active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice-dark[aria-pressed="true"] {
  color: #e7eef5;
  background: rgba(226, 232, 240, 0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(226, 232, 240, 0.2);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero-secondary-cta {
  color: var(--night-teal);
  background: rgba(10, 21, 31, 0.62);
  border-color: rgba(142, 229, 219, 0.34);
  box-shadow: none;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero-secondary-cta:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero-secondary-cta:focus-visible {
  color: #f0fffd;
  background: rgba(31, 95, 90, 0.5);
  border-color: rgba(142, 229, 219, 0.48);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .section-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .prompt-panel,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .final-cta {
  color: var(--night-text);
  background: linear-gradient(145deg, rgba(15, 27, 38, 0.94), rgba(9, 18, 27, 0.9)) !important;
  border-color: var(--night-border);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel p,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel li,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .section-card p {
  color: var(--night-muted);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel h3,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel h4,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .section-card h2,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .section-card h3 {
  color: var(--night-text);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel .section-kicker,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-index,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .section-kicker {
  color: var(--night-gold);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-row {
  border-color: rgba(150, 182, 185, 0.18);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .subscription-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .subscription-summary-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .subscription-status-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .account-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .settings-card {
  color: var(--night-text);
  background: var(--night-panel) !important;
  border-color: var(--night-border);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .subscription-card p,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .subscription-summary-card p,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .subscription-status-card p,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .account-card p,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body.theme-dark, .theme-dark) .settings-card p {
  color: var(--night-muted);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-panel,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-canvas,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .map-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .map-chart-card,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .astrology-chart-card {
  background: rgba(248, 251, 252, 0.98) !important;
  color: #111827;
  border-color: rgba(203, 213, 225, 0.75);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-header,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-title,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-subtitle {
  color: var(--night-text);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-toolbar a,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-links a,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-tab {
  color: var(--night-gold);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-icon-button,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .map-icon-button {
  color: #0f766e;
  background: rgba(248, 251, 252, 0.92);
  border-color: rgba(15, 118, 110, 0.2);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .chart-card svg,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .map-chart-card svg,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .astrology-chart-card svg {
  color-scheme: light;
}

/* Final night-mode readability pass. */
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) {
  --night-surface: rgba(11, 20, 28, 0.96);
  --night-surface-soft: rgba(15, 30, 39, 0.92);
  --night-surface-muted: rgba(255, 255, 255, 0.055);
  --night-border-soft: rgba(125, 211, 202, 0.2);
  --night-text-strong: #f4fbfa;
  --night-text: #d7e5e8;
  --night-text-muted: #aebfc5;
  --night-accent: #9fe4dc;
  --night-gold-soft: #e6c06a;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-header-actions {
  background: rgba(6, 15, 22, 0.82) !important;
  border-color: var(--night-border-soft) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-strip,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-icons {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-button,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-toggle,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .style-option,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-option {
  color: rgba(207, 231, 229, 0.84) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-button:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-toggle:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .style-option:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-option:hover {
  color: var(--night-text-strong) !important;
  background: rgba(45, 212, 191, 0.11) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-button.active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-button.is-active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-button[aria-pressed="true"],
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-toggle.active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-toggle.is-active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-style-toggle[aria-pressed="true"],
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .style-option.active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .style-option.is-active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .style-option[aria-pressed="true"],
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-option.active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-option.is-active,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-option[aria-pressed="true"] {
  color: var(--night-text-strong) !important;
  background: rgba(45, 212, 191, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(125, 211, 202, 0.2) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .hero-secondary-cta,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .hero-ghost-button,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .hero-scroll-link,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero a[href="#flow"],
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero a[href="#tools"] {
  color: var(--night-accent) !important;
  background: rgba(20, 184, 166, 0.08) !important;
  border: 1px solid rgba(125, 211, 202, 0.28) !important;
  box-shadow: none !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .hero-secondary-cta:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .hero-ghost-button:hover,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .hero-scroll-link:hover {
  color: var(--night-text-strong) !important;
  background: rgba(20, 184, 166, 0.15) !important;
  border-color: rgba(159, 228, 220, 0.42) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-principles-panel,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-section .section-card {
  color: var(--night-text) !important;
  background: linear-gradient(145deg, rgba(11, 20, 28, 0.97), rgba(18, 38, 47, 0.94)) !important;
  border-color: var(--night-border-soft) !important;
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.32) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel :is(h1, h2, h3, h4, strong),
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-principles-panel :is(h1, h2, h3, h4, strong),
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-section .section-card :is(h1, h2, h3, h4, strong) {
  color: var(--night-text-strong) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel :is(p, li, span, small),
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-principles-panel :is(p, li, span, small),
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-section .section-card :is(p, li, span, small) {
  color: var(--night-text-muted) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-panel :is(.section-kicker, .professional-use-index, .principle-index),
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-principles-panel :is(.section-kicker, .professional-use-index, .principle-index) {
  color: var(--night-gold-soft) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-use-row,
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .professional-principle-row {
  border-color: rgba(125, 211, 202, 0.14) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.subscription-card, .subscription-panel, .subscription-status-card, .plan-card, .plans-card, .account-plan-card, .billing-card) {
  color: var(--night-text) !important;
  background: linear-gradient(145deg, rgba(11, 20, 28, 0.97), rgba(18, 38, 47, 0.94)) !important;
  border-color: var(--night-border-soft) !important;
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.28) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.subscription-card, .subscription-panel, .subscription-status-card, .plan-card, .plans-card, .account-plan-card, .billing-card) :is(h1, h2, h3, h4, strong, dt) {
  color: var(--night-text-strong) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.subscription-card, .subscription-panel, .subscription-status-card, .plan-card, .plans-card, .account-plan-card, .billing-card) :is(p, li, span, dd, small) {
  color: var(--night-text-muted) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.subscription-badge, .plan-badge, .status-badge) {
  color: #f2d38a !important;
  background: rgba(184, 134, 54, 0.14) !important;
  border-color: rgba(184, 134, 54, 0.36) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.maps-page, .charts-page, .chart-workspace, .maps-shell, .chart-screen) {
  color: var(--night-text) !important;
  background: #101b25 !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-toolbar a, .chart-links a, .chart-tab, .map-tabs a, .chart-table-tabs a) {
  color: #d8b56b !important;
  text-decoration-color: rgba(216, 181, 107, 0.5) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-icon-button, .map-icon-button, .chart-action-button, .map-action-button, .chart-export-button, .map-export-button, .chart-toolbar button, .chart-actions button) {
  color: #0f766e !important;
  background: rgba(248, 251, 252, 0.94) !important;
  border-color: rgba(15, 118, 110, 0.22) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-icon-button, .map-icon-button, .chart-action-button, .map-action-button, .chart-export-button, .map-export-button, .chart-toolbar button, .chart-actions button):hover {
  background: #ffffff !important;
  border-color: rgba(15, 118, 110, 0.36) !important;
}

/* Dark mode polish: contrast, panels and integrated controls */
:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) {
  --aa-night-bg: #081118;
  --aa-night-surface: rgba(14, 25, 34, 0.9);
  --aa-night-surface-soft: rgba(18, 31, 41, 0.82);
  --aa-night-border: rgba(159, 211, 205, 0.24);
  --aa-night-text: #f4fbfa;
  --aa-night-muted: #bfd0d6;
  --aa-night-soft: #d9e8e6;
  --aa-night-teal: #8bd6cc;
  --aa-night-gold: #e6c36f;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.landing-header, .site-header, .main-header) {
  background: rgba(8, 17, 24, 0.82) !important;
  border-color: rgba(159, 211, 205, 0.14) !important;
  color: var(--aa-night-text) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-header-actions {
  background: rgba(11, 21, 29, 0.82) !important;
  border: 1px solid rgba(159, 211, 205, 0.22) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
  backdrop-filter: blur(14px);
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.theme-toolbar, .theme-switcher, .theme-choice-list) {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice {
  width: 30px !important;
  height: 30px !important;
  color: rgba(232, 245, 243, 0.78) !important;
  background: transparent !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice svg {
  color: inherit !important;
  fill: none !important;
  stroke: currentColor !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice:is(:hover, :focus-visible) {
  color: #f7fffd !important;
  background: rgba(139, 214, 204, 0.14) !important;
  border-color: rgba(139, 214, 204, 0.24) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice:is(.active, [aria-pressed="true"]) {
  color: #f5fffd !important;
  background: rgba(139, 214, 204, 0.2) !important;
  border-color: rgba(139, 214, 204, 0.34) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero-secondary-cta {
  color: #f1d38a !important;
  background: rgba(16, 29, 38, 0.78) !important;
  border: 1px solid rgba(230, 195, 111, 0.42) !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.2) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-hero-secondary-cta:is(:hover, :focus-visible) {
  color: #ffe4a2 !important;
  background: rgba(23, 42, 53, 0.94) !important;
  border-color: rgba(230, 195, 111, 0.58) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .section-card, .modules-panel, .prompt-panel, .final-cta, .subscription-card, .subscription-panel, .subscription-summary, .subscription-status-card, .plans-card, .plan-card, .account-plan-card, .billing-card) {
  color: var(--aa-night-text) !important;
  background: linear-gradient(145deg, rgba(18, 31, 41, 0.92), rgba(11, 22, 31, 0.84)) !important;
  border-color: var(--aa-night-border) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.24) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .section-card, .modules-panel, .prompt-panel, .final-cta, .subscription-card, .subscription-panel, .subscription-summary, .subscription-status-card, .plans-card, .plan-card, .account-plan-card, .billing-card) :is(h1, h2, h3, h4, strong, .card-title, .principle-title, .plan-title, .subscription-title) {
  color: var(--aa-night-text) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .section-card, .modules-panel, .prompt-panel, .final-cta, .subscription-card, .subscription-panel, .subscription-summary, .subscription-status-card, .plans-card, .plan-card, .account-plan-card, .billing-card) :is(p, li, span, small, .card-copy, .principle-copy, .plan-copy, .subscription-copy) {
  color: var(--aa-night-muted) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.section-kicker, .professional-kicker, .professional-panel-kicker, .subscription-kicker, .plan-kicker, .card-number, .principle-number) {
  color: var(--aa-night-gold) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.professional-principle-row, .principle-row, .subscription-row, .plan-row, .capacity-row) {
  border-color: rgba(159, 211, 205, 0.18) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.subscription-badge, .plan-badge, .account-status-badge, .status-badge, .subscription-status) {
  color: #f2d58f !important;
  background: rgba(230, 195, 111, 0.16) !important;
  border-color: rgba(230, 195, 111, 0.38) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.maps-page, .charts-page, .chart-page, .map-view, .chart-view, .chart-workspace) {
  background: #101b25 !important;
  color: var(--aa-night-text) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-card, .map-card, .chart-shell, .map-shell, .chart-panel, .map-panel, .chart-view-card, .map-view-card, .chart-container, .map-container) {
  color: var(--aa-night-text) !important;
  background: rgba(15, 26, 36, 0.78) !important;
  border-color: rgba(159, 211, 205, 0.2) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-card, .map-card, .chart-shell, .map-shell, .chart-panel, .map-panel, .chart-view-card, .map-view-card) :is(h1, h2, h3, .chart-title, .map-title) {
  color: #f5fbfa !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-card, .map-card, .chart-shell, .map-shell, .chart-panel, .map-panel, .chart-view-card, .map-view-card) :is(.chart-subtitle, .map-subtitle, .chart-meta, .map-meta, .chart-caption, .map-caption) {
  color: var(--aa-night-muted) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.chart-tabs a, .chart-tabs button, .map-tabs a, .map-tabs button, .chart-nav a, .map-nav a, .chart-data-tabs a) {
  color: #f0d28b !important;
  text-decoration-color: rgba(240, 210, 139, 0.44) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.floating-table, .data-panel, .chart-data-panel, .map-data-panel, .modal-panel, .table-panel) {
  color: var(--aa-night-text) !important;
  background: rgba(12, 23, 32, 0.94) !important;
  border-color: rgba(159, 211, 205, 0.22) !important;
}

:is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) :is(.floating-table, .data-panel, .chart-data-panel, .map-data-panel, .modal-panel, .table-panel) :is(th, td) {
  color: var(--aa-night-soft) !important;
  border-color: rgba(159, 211, 205, 0.14) !important;
}

@media (max-width: 760px) {
  :is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .landing-header-actions {
    max-width: calc(100vw - 24px);
    overflow-x: auto;
  }

  :is(html[data-theme="dark"], html[data-theme="night"], body[data-theme="dark"], body[data-theme="night"], body.theme-dark, body.theme-night, .theme-dark, .theme-night) .theme-choice {
    width: 28px !important;
    height: 28px !important;
  }
}
/* Dark theme visual polish
   Keeps the night style premium and readable without changing app logic. */
html[data-theme="dark"] {
  --aa-dark-surface: rgba(14, 23, 32, 0.94);
  --aa-dark-surface-soft: rgba(18, 30, 41, 0.86);
  --aa-dark-border: rgba(136, 214, 206, 0.2);
  --aa-dark-border-soft: rgba(136, 214, 206, 0.13);
  --aa-dark-text: #f3faf9;
  --aa-dark-muted: rgba(223, 238, 237, 0.76);
  --aa-dark-faint: rgba(223, 238, 237, 0.58);
  --aa-dark-accent: #8edbd3;
  --aa-dark-gold: #d9b45f;
}

html[data-theme="dark"] .landing-theme-switcher,
html[data-theme="dark"] .landing-header-actions,
html[data-theme="dark"] .landing-actions-shell,
html[data-theme="dark"] .header-actions-shell {
  background: rgba(10, 17, 24, 0.76) !important;
  border-color: var(--aa-dark-border) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2) !important;
  backdrop-filter: blur(14px);
}

html[data-theme="dark"] [data-theme-choice] {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(232, 247, 245, 0.78) !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

@media (max-width: 460px) {
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher [data-theme-choice] {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    flex: 0 0 28px !important;
  }

  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice-eclipse,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice-aurora {
    display: none !important;
  }
}

html[data-theme="dark"] [data-theme-choice] svg,
html[data-theme="dark"] [data-theme-choice] .theme-icon {
  filter: none !important;
}

html[data-theme="dark"] [data-theme-choice]::before,
html[data-theme="dark"] [data-theme-choice]::after {
  box-shadow: none !important;
}

html[data-theme="dark"] [data-theme-choice]:hover,
html[data-theme="dark"] [data-theme-choice].is-previewed,
html[data-theme="dark"] [data-theme-choice].is-active,
html[data-theme="dark"] [data-theme-choice][aria-pressed="true"] {
  color: #f5fffd !important;
  background: rgba(136, 214, 206, 0.14) !important;
  border-color: rgba(136, 214, 206, 0.18) !important;
  box-shadow: inset 0 0 0 1px rgba(136, 214, 206, 0.12) !important;
}

html[data-theme="dark"] [data-theme-choice="dark"]:hover,
html[data-theme="dark"] [data-theme-choice="dark"].is-previewed,
html[data-theme="dark"] [data-theme-choice="dark"].is-active,
html[data-theme="dark"] [data-theme-choice="dark"][aria-pressed="true"] {
  color: #f8fbff !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

html[data-theme="dark"] a[href="#flow"],
html[data-theme="dark"] a[href="#tools"],
html[data-theme="dark"] .hero-secondary-cta,
html[data-theme="dark"] .hero-secondary-button,
html[data-theme="dark"] .hero-outline-button,
html[data-theme="dark"] .home-hero-secondary,
html[data-theme="dark"] .landing-hero-secondary {
  background: rgba(15, 24, 34, 0.74) !important;
  border: 1px solid rgba(136, 214, 206, 0.28) !important;
  color: #e8f7f5 !important;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] a[href="#flow"]:hover,
html[data-theme="dark"] a[href="#tools"]:hover,
html[data-theme="dark"] .hero-secondary-cta:hover,
html[data-theme="dark"] .hero-secondary-button:hover,
html[data-theme="dark"] .hero-outline-button:hover,
html[data-theme="dark"] .home-hero-secondary:hover,
html[data-theme="dark"] .landing-hero-secondary:hover {
  background: rgba(136, 214, 206, 0.14) !important;
  color: #ffffff !important;
  border-color: rgba(136, 214, 206, 0.38) !important;
}

html[data-theme="dark"] .professional-use-panel,
html[data-theme="dark"] .professional-principles-panel,
html[data-theme="dark"] .principles-panel,
html[data-theme="dark"] .professional-use-section .section-card,
html[data-theme="dark"] [class*="professional-use"] .section-card,
html[data-theme="dark"] [class*="principles"] .section-card,
html[data-theme="dark"] .subscription-card,
html[data-theme="dark"] .subscription-status-card,
html[data-theme="dark"] .subscription-detail-card,
html[data-theme="dark"] .subscription-panel,
html[data-theme="dark"] .subscription-page .section-card,
html[data-theme="dark"] [class*="subscription"] .section-card,
html[data-theme="dark"] .billing-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .plans-card,
html[data-theme="dark"] .account-plan-card {
  background:
    linear-gradient(145deg, rgba(24, 37, 49, 0.96), rgba(12, 21, 30, 0.92)) !important;
  border-color: var(--aa-dark-border) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.26) !important;
  color: var(--aa-dark-text) !important;
}

html[data-theme="dark"] .professional-use-panel h2,
html[data-theme="dark"] .professional-use-panel h3,
html[data-theme="dark"] .professional-principles-panel h2,
html[data-theme="dark"] .professional-principles-panel h3,
html[data-theme="dark"] .principles-panel h2,
html[data-theme="dark"] .principles-panel h3,
html[data-theme="dark"] .subscription-card h2,
html[data-theme="dark"] .subscription-card h3,
html[data-theme="dark"] .subscription-panel h2,
html[data-theme="dark"] .subscription-panel h3,
html[data-theme="dark"] .subscription-page h1,
html[data-theme="dark"] .subscription-page h2,
html[data-theme="dark"] .subscription-page h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .professional-use-panel p,
html[data-theme="dark"] .professional-principles-panel p,
html[data-theme="dark"] .principles-panel p,
html[data-theme="dark"] .subscription-card p,
html[data-theme="dark"] .subscription-panel p,
html[data-theme="dark"] .subscription-page p,
html[data-theme="dark"] .subscription-card li,
html[data-theme="dark"] .subscription-panel li,
html[data-theme="dark"] .subscription-page li {
  color: var(--aa-dark-muted) !important;
}

html[data-theme="dark"] .professional-use-panel .section-kicker,
html[data-theme="dark"] .professional-principles-panel .section-kicker,
html[data-theme="dark"] .principles-panel .section-kicker,
html[data-theme="dark"] .subscription-page .section-kicker,
html[data-theme="dark"] .subscription-badge,
html[data-theme="dark"] .plan-badge,
html[data-theme="dark"] .status-badge {
  color: var(--aa-dark-gold) !important;
}

html[data-theme="dark"] .principle-row,
html[data-theme="dark"] .professional-principle-row,
html[data-theme="dark"] .subscription-row,
html[data-theme="dark"] .subscription-card hr,
html[data-theme="dark"] .subscription-panel hr {
  border-color: var(--aa-dark-border-soft) !important;
}

html[data-theme="dark"] .principle-number,
html[data-theme="dark"] .professional-principle-number,
html[data-theme="dark"] .subscription-label,
html[data-theme="dark"] .plan-label {
  color: var(--aa-dark-accent) !important;
}

html[data-theme="dark"] .maps-page,
html[data-theme="dark"] .charts-page,
html[data-theme="dark"] .map-view-page,
html[data-theme="dark"] .chart-workspace,
html[data-theme="dark"] .chart-screen,
html[data-theme="dark"] .chart-layout {
  background: #101b26 !important;
  color: var(--aa-dark-text) !important;
}

html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .chart-shell,
html[data-theme="dark"] .chart-panel,
html[data-theme="dark"] .chart-info-panel,
html[data-theme="dark"] .chart-sidebar-card,
html[data-theme="dark"] .chart-side-panel,
html[data-theme="dark"] .chart-floating-panel,
html[data-theme="dark"] .map-data-panel,
html[data-theme="dark"] .floating-table,
html[data-theme="dark"] .aspects-panel,
html[data-theme="dark"] .modal-content {
  background: rgba(15, 24, 34, 0.92) !important;
  border-color: rgba(136, 214, 206, 0.18) !important;
  color: var(--aa-dark-text) !important;
  box-shadow: 0 20px 54px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .chart-card h1,
html[data-theme="dark"] .chart-card h2,
html[data-theme="dark"] .chart-card h3,
html[data-theme="dark"] .chart-panel h1,
html[data-theme="dark"] .chart-panel h2,
html[data-theme="dark"] .chart-panel h3,
html[data-theme="dark"] .floating-table h1,
html[data-theme="dark"] .floating-table h2,
html[data-theme="dark"] .floating-table h3,
html[data-theme="dark"] .aspects-panel h1,
html[data-theme="dark"] .aspects-panel h2,
html[data-theme="dark"] .aspects-panel h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .chart-card p,
html[data-theme="dark"] .chart-panel p,
html[data-theme="dark"] .chart-info-panel p,
html[data-theme="dark"] .chart-sidebar-card p,
html[data-theme="dark"] .floating-table p,
html[data-theme="dark"] .aspects-panel p {
  color: var(--aa-dark-muted) !important;
}

html[data-theme="dark"] .chart-tab,
html[data-theme="dark"] .chart-tabs a,
html[data-theme="dark"] .map-tab,
html[data-theme="dark"] .map-tabs a,
html[data-theme="dark"] .floating-table a,
html[data-theme="dark"] .chart-panel a {
  color: var(--aa-dark-gold) !important;
}

html[data-theme="dark"] .chart-icon-button,
html[data-theme="dark"] .map-icon-button,
html[data-theme="dark"] .toolbar-icon-button,
html[data-theme="dark"] .chart-action-button,
html[data-theme="dark"] .chart-actions button,
html[data-theme="dark"] .map-actions button {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(136, 214, 206, 0.2) !important;
  color: #e9f8f6 !important;
}

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background: rgba(6, 12, 18, 0.68) !important;
  border-color: rgba(136, 214, 206, 0.2) !important;
  color: var(--aa-dark-text) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: rgba(223, 238, 237, 0.46) !important;
}

html[data-theme="dark"] table,
html[data-theme="dark"] th,
html[data-theme="dark"] td {
  border-color: var(--aa-dark-border-soft) !important;
  color: var(--aa-dark-text) !important;
}

html[data-theme="dark"] th {
  background: rgba(136, 214, 206, 0.08) !important;
  color: #9ee3dc !important;
}

html[data-theme="dark"] .chart-svg,
html[data-theme="dark"] .astro-chart-svg,
html[data-theme="dark"] .wheel-svg,
html[data-theme="dark"] svg[data-chart-svg] {
  color-scheme: light;
}

/* Dark mode contrast polish */
html[data-theme="dark"] {
  --aa-night-bg: #071017;
  --aa-night-surface: rgba(13, 23, 33, 0.92);
  --aa-night-surface-soft: rgba(18, 31, 42, 0.86);
  --aa-night-card: rgba(17, 29, 40, 0.9);
  --aa-night-card-strong: rgba(21, 36, 48, 0.96);
  --aa-night-border: rgba(149, 224, 216, 0.22);
  --aa-night-border-soft: rgba(149, 224, 216, 0.13);
  --aa-night-text: #eef8f6;
  --aa-night-muted: #bdd0cf;
  --aa-night-subtle: #8fa8a7;
  --aa-night-accent: #92ddd5;
  --aa-night-gold: #deb866;
}

html[data-theme="dark"] .landing-header,
html[data-theme="dark"] .site-header,
html[data-theme="dark"] .home-header {
  background: rgba(7, 15, 22, 0.84) !important;
  border-color: var(--aa-night-border-soft) !important;
}

html[data-theme="dark"] .landing-header-actions,
html[data-theme="dark"] .landing-style-shell,
html[data-theme="dark"] .style-toolbar,
html[data-theme="dark"] .style-selector,
html[data-theme="dark"] .theme-toolbar,
html[data-theme="dark"] .theme-selector {
  background: rgba(9, 18, 26, 0.78) !important;
  border: 1px solid var(--aa-night-border-soft) !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.24) !important;
}

html[data-theme="dark"] .landing-header-actions button,
html[data-theme="dark"] .landing-style-shell button,
html[data-theme="dark"] .style-toolbar button,
html[data-theme="dark"] .style-selector button,
html[data-theme="dark"] .theme-toolbar button,
html[data-theme="dark"] .theme-selector button {
  background: transparent !important;
  color: rgba(238, 248, 246, 0.72) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .landing-header-actions button:hover,
html[data-theme="dark"] .landing-style-shell button:hover,
html[data-theme="dark"] .style-toolbar button:hover,
html[data-theme="dark"] .style-selector button:hover,
html[data-theme="dark"] .theme-toolbar button:hover,
html[data-theme="dark"] .theme-selector button:hover {
  background: rgba(146, 221, 213, 0.12) !important;
  color: var(--aa-night-text) !important;
}

html[data-theme="dark"] .landing-header-actions button.active,
html[data-theme="dark"] .landing-header-actions button[aria-pressed="true"],
html[data-theme="dark"] .landing-style-shell button.active,
html[data-theme="dark"] .landing-style-shell button[aria-pressed="true"],
html[data-theme="dark"] .style-toolbar button.active,
html[data-theme="dark"] .style-toolbar button[aria-pressed="true"],
html[data-theme="dark"] .style-selector button.active,
html[data-theme="dark"] .style-selector button[aria-pressed="true"],
html[data-theme="dark"] .theme-toolbar button.active,
html[data-theme="dark"] .theme-toolbar button[aria-pressed="true"],
html[data-theme="dark"] .theme-selector button.active,
html[data-theme="dark"] .theme-selector button[aria-pressed="true"] {
  background: rgba(146, 221, 213, 0.16) !important;
  color: var(--aa-night-accent) !important;
  box-shadow: inset 0 0 0 1px rgba(146, 221, 213, 0.16) !important;
}

html[data-theme="dark"] .landing-header-actions button[aria-label*="noche"].active,
html[data-theme="dark"] .landing-header-actions button[aria-label*="Noche"].active,
html[data-theme="dark"] .landing-header-actions button[title*="noche"].active,
html[data-theme="dark"] .landing-header-actions button[title*="Noche"].active,
html[data-theme="dark"] .theme-toolbar button[aria-label*="noche"].active,
html[data-theme="dark"] .theme-toolbar button[aria-label*="Noche"].active,
html[data-theme="dark"] .theme-toolbar button[title*="noche"].active,
html[data-theme="dark"] .theme-toolbar button[title*="Noche"].active {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #f8fafc !important;
}

html[data-theme="dark"] .hero-secondary-action,
html[data-theme="dark"] .hero-secondary-cta,
html[data-theme="dark"] .landing-hero-secondary,
html[data-theme="dark"] .home-hero-secondary,
html[data-theme="dark"] .secondary-cta,
html[data-theme="dark"] .button-secondary,
html[data-theme="dark"] a[href="#flow"],
html[data-theme="dark"] a[href="#tools"],
html[data-theme="dark"] a[href="#herramientas"] {
  background: rgba(15, 30, 40, 0.74) !important;
  border-color: rgba(146, 221, 213, 0.3) !important;
  color: #dff7f3 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .hero-secondary-action:hover,
html[data-theme="dark"] .hero-secondary-cta:hover,
html[data-theme="dark"] .landing-hero-secondary:hover,
html[data-theme="dark"] .home-hero-secondary:hover,
html[data-theme="dark"] .secondary-cta:hover,
html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] a[href="#flow"]:hover,
html[data-theme="dark"] a[href="#tools"]:hover,
html[data-theme="dark"] a[href="#herramientas"]:hover {
  background: rgba(146, 221, 213, 0.14) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .section-card,
html[data-theme="dark"] .home-card,
html[data-theme="dark"] .dashboard-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .professional-use-panel,
html[data-theme="dark"] .professional-principles-panel,
html[data-theme="dark"] .principles-panel,
html[data-theme="dark"] .subscription-card,
html[data-theme="dark"] .subscription-panel,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .account-plan-card,
html[data-theme="dark"] .profile-card {
  background: var(--aa-night-card) !important;
  border-color: var(--aa-night-border) !important;
  color: var(--aa-night-text) !important;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.26) !important;
}

html[data-theme="dark"] .section-card h1,
html[data-theme="dark"] .section-card h2,
html[data-theme="dark"] .section-card h3,
html[data-theme="dark"] .home-card h1,
html[data-theme="dark"] .home-card h2,
html[data-theme="dark"] .home-card h3,
html[data-theme="dark"] .dashboard-card h1,
html[data-theme="dark"] .dashboard-card h2,
html[data-theme="dark"] .dashboard-card h3,
html[data-theme="dark"] .settings-card h1,
html[data-theme="dark"] .settings-card h2,
html[data-theme="dark"] .settings-card h3,
html[data-theme="dark"] .professional-use-panel h1,
html[data-theme="dark"] .professional-use-panel h2,
html[data-theme="dark"] .professional-use-panel h3,
html[data-theme="dark"] .professional-principles-panel h1,
html[data-theme="dark"] .professional-principles-panel h2,
html[data-theme="dark"] .professional-principles-panel h3,
html[data-theme="dark"] .principles-panel h1,
html[data-theme="dark"] .principles-panel h2,
html[data-theme="dark"] .principles-panel h3,
html[data-theme="dark"] .subscription-card h1,
html[data-theme="dark"] .subscription-card h2,
html[data-theme="dark"] .subscription-card h3,
html[data-theme="dark"] .subscription-panel h1,
html[data-theme="dark"] .subscription-panel h2,
html[data-theme="dark"] .subscription-panel h3,
html[data-theme="dark"] .plan-card h1,
html[data-theme="dark"] .plan-card h2,
html[data-theme="dark"] .plan-card h3,
html[data-theme="dark"] .account-plan-card h1,
html[data-theme="dark"] .account-plan-card h2,
html[data-theme="dark"] .account-plan-card h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .section-card p,
html[data-theme="dark"] .home-card p,
html[data-theme="dark"] .dashboard-card p,
html[data-theme="dark"] .settings-card p,
html[data-theme="dark"] .professional-use-panel p,
html[data-theme="dark"] .professional-principles-panel p,
html[data-theme="dark"] .principles-panel p,
html[data-theme="dark"] .subscription-card p,
html[data-theme="dark"] .subscription-panel p,
html[data-theme="dark"] .plan-card p,
html[data-theme="dark"] .account-plan-card p {
  color: var(--aa-night-muted) !important;
}

html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .card-kicker,
html[data-theme="dark"] .professional-use-kicker,
html[data-theme="dark"] .principles-kicker,
html[data-theme="dark"] .subscription-kicker,
html[data-theme="dark"] .plan-kicker,
html[data-theme="dark"] .eyebrow {
  color: var(--aa-night-gold) !important;
}

html[data-theme="dark"] .professional-principles-row,
html[data-theme="dark"] .principles-row,
html[data-theme="dark"] .subscription-row,
html[data-theme="dark"] .plan-row,
html[data-theme="dark"] .account-plan-row {
  border-color: var(--aa-night-border-soft) !important;
}

html[data-theme="dark"] .professional-principles-row small,
html[data-theme="dark"] .principles-row small,
html[data-theme="dark"] .subscription-row small,
html[data-theme="dark"] .plan-row small,
html[data-theme="dark"] .account-plan-row small,
html[data-theme="dark"] .professional-principles-number,
html[data-theme="dark"] .principles-number {
  color: #d9b564 !important;
}

html[data-theme="dark"] .chart-actions button,
html[data-theme="dark"] .map-actions button,
html[data-theme="dark"] .chart-toolbar button,
html[data-theme="dark"] .map-toolbar button,
html[data-theme="dark"] .chart-icon-button,
html[data-theme="dark"] .map-icon-button,
html[data-theme="dark"] .floating-panel button,
html[data-theme="dark"] .floating-table button {
  background: rgba(238, 248, 246, 0.9) !important;
  border-color: rgba(238, 248, 246, 0.62) !important;
  color: #0f766e !important;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .chart-actions button:hover,
html[data-theme="dark"] .map-actions button:hover,
html[data-theme="dark"] .chart-toolbar button:hover,
html[data-theme="dark"] .map-toolbar button:hover,
html[data-theme="dark"] .chart-icon-button:hover,
html[data-theme="dark"] .map-icon-button:hover,
html[data-theme="dark"] .floating-panel button:hover,
html[data-theme="dark"] .floating-table button:hover {
  background: #ffffff !important;
  color: #0d5f58 !important;
}

html[data-theme="dark"] .chart-tabs a,
html[data-theme="dark"] .map-tabs a,
html[data-theme="dark"] .chart-tab,
html[data-theme="dark"] .map-tab,
html[data-theme="dark"] .chart-panel a,
html[data-theme="dark"] .map-panel a {
  color: #e3bd69 !important;
}

html[data-theme="dark"] .chart-tabs a:hover,
html[data-theme="dark"] .map-tabs a:hover,
html[data-theme="dark"] .chart-tab:hover,
html[data-theme="dark"] .map-tab:hover,
html[data-theme="dark"] .chart-panel a:hover,
html[data-theme="dark"] .map-panel a:hover {
  color: #ffe2a0 !important;
}

html[data-theme="dark"] .floating-panel,
html[data-theme="dark"] .floating-table,
html[data-theme="dark"] .aspects-panel,
html[data-theme="dark"] .chart-data-panel,
html[data-theme="dark"] .map-data-panel,
html[data-theme="dark"] .modal-panel {
  background: rgba(10, 18, 27, 0.94) !important;
  border-color: var(--aa-night-border) !important;
  color: var(--aa-night-text) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.42) !important;
}

html[data-theme="dark"] .floating-panel h1,
html[data-theme="dark"] .floating-panel h2,
html[data-theme="dark"] .floating-panel h3,
html[data-theme="dark"] .floating-table h1,
html[data-theme="dark"] .floating-table h2,
html[data-theme="dark"] .floating-table h3,
html[data-theme="dark"] .aspects-panel h1,
html[data-theme="dark"] .aspects-panel h2,
html[data-theme="dark"] .aspects-panel h3,
html[data-theme="dark"] .chart-data-panel h1,
html[data-theme="dark"] .chart-data-panel h2,
html[data-theme="dark"] .chart-data-panel h3,
html[data-theme="dark"] .map-data-panel h1,
html[data-theme="dark"] .map-data-panel h2,
html[data-theme="dark"] .map-data-panel h3 {
  color: #ffffff !important;
}

html[data-theme="dark"] .floating-panel p,
html[data-theme="dark"] .floating-table p,
html[data-theme="dark"] .aspects-panel p,
html[data-theme="dark"] .chart-data-panel p,
html[data-theme="dark"] .map-data-panel p,
html[data-theme="dark"] .floating-panel td,
html[data-theme="dark"] .floating-table td,
html[data-theme="dark"] .aspects-panel td,
html[data-theme="dark"] .chart-data-panel td,
html[data-theme="dark"] .map-data-panel td {
  color: var(--aa-night-muted) !important;
}

html[data-theme="dark"] .chart-shell,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .chart-panel,
html[data-theme="dark"] .map-shell,
html[data-theme="dark"] .map-card,
html[data-theme="dark"] .map-panel {
  border-color: rgba(146, 221, 213, 0.16) !important;
}

html[data-theme="dark"] .chart-viewport,
html[data-theme="dark"] .chart-stage,
html[data-theme="dark"] .chart-export-surface,
html[data-theme="dark"] .map-viewport,
html[data-theme="dark"] .map-stage,
html[data-theme="dark"] .map-export-surface {
  background: radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.98), rgba(246, 250, 249, 0.96)) !important;
  color: #17212b !important;
}

/* Final night mode readability pass */
html[data-theme="dark"],
html[data-theme="night"],
body[data-theme="dark"],
body[data-theme="night"],
body.theme-dark,
body.theme-night {
  --aa-night-bg: #081017;
  --aa-night-surface: rgba(10, 20, 29, 0.94);
  --aa-night-card: rgba(16, 30, 41, 0.9);
  --aa-night-card-strong: rgba(19, 36, 48, 0.96);
  --aa-night-border: rgba(143, 216, 207, 0.24);
  --aa-night-border-soft: rgba(143, 216, 207, 0.14);
  --aa-night-text: #eef8f7;
  --aa-night-muted: #bed0d2;
  --aa-night-soft: #9fb7ba;
  --aa-night-accent: #93ddd4;
  --aa-night-gold: #dec079;
}

html[data-theme="dark"] body,
html[data-theme="night"] body,
body[data-theme="dark"],
body[data-theme="night"],
body.theme-dark,
body.theme-night {
  background: var(--aa-night-bg) !important;
  color: var(--aa-night-text) !important;
}

html[data-theme="dark"] .landing-header-actions,
html[data-theme="night"] .landing-header-actions,
body[data-theme="dark"] .landing-header-actions,
body[data-theme="night"] .landing-header-actions,
body.theme-dark .landing-header-actions,
body.theme-night .landing-header-actions {
  background: rgba(8, 17, 24, 0.78) !important;
  border-color: var(--aa-night-border) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
}

html[data-theme="dark"] .landing-header-actions button,
html[data-theme="night"] .landing-header-actions button,
body[data-theme="dark"] .landing-header-actions button,
body[data-theme="night"] .landing-header-actions button,
body.theme-dark .landing-header-actions button,
body.theme-night .landing-header-actions button {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  border-radius: 999px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: rgba(218, 239, 236, 0.84) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .landing-header-actions button:hover,
html[data-theme="night"] .landing-header-actions button:hover,
body[data-theme="dark"] .landing-header-actions button:hover,
body[data-theme="night"] .landing-header-actions button:hover,
body.theme-dark .landing-header-actions button:hover,
body.theme-night .landing-header-actions button:hover {
  background: rgba(143, 216, 207, 0.14) !important;
  color: #f4fbfa !important;
}

html[data-theme="dark"] .landing-header-actions button.active,
html[data-theme="dark"] .landing-header-actions button[aria-pressed="true"],
html[data-theme="night"] .landing-header-actions button.active,
html[data-theme="night"] .landing-header-actions button[aria-pressed="true"],
body[data-theme="dark"] .landing-header-actions button.active,
body[data-theme="dark"] .landing-header-actions button[aria-pressed="true"],
body[data-theme="night"] .landing-header-actions button.active,
body[data-theme="night"] .landing-header-actions button[aria-pressed="true"],
body.theme-dark .landing-header-actions button.active,
body.theme-dark .landing-header-actions button[aria-pressed="true"],
body.theme-night .landing-header-actions button.active,
body.theme-night .landing-header-actions button[aria-pressed="true"] {
  background: rgba(143, 216, 207, 0.18) !important;
  border-color: rgba(143, 216, 207, 0.24) !important;
  color: #effcfb !important;
  box-shadow: inset 0 0 0 1px rgba(143, 216, 207, 0.08) !important;
}

html[data-theme="dark"] .landing-header-actions svg,
html[data-theme="night"] .landing-header-actions svg,
body[data-theme="dark"] .landing-header-actions svg,
body[data-theme="night"] .landing-header-actions svg,
body.theme-dark .landing-header-actions svg,
body.theme-night .landing-header-actions svg {
  width: 16px !important;
  height: 16px !important;
}

html[data-theme="dark"] .hero-secondary-action,
html[data-theme="dark"] .secondary-cta,
html[data-theme="dark"] a[href="#flow"],
html[data-theme="night"] .hero-secondary-action,
html[data-theme="night"] .secondary-cta,
html[data-theme="night"] a[href="#flow"],
body[data-theme="dark"] .hero-secondary-action,
body[data-theme="dark"] .secondary-cta,
body[data-theme="dark"] a[href="#flow"],
body[data-theme="night"] .hero-secondary-action,
body[data-theme="night"] .secondary-cta,
body[data-theme="night"] a[href="#flow"],
body.theme-dark .hero-secondary-action,
body.theme-dark .secondary-cta,
body.theme-dark a[href="#flow"],
body.theme-night .hero-secondary-action,
body.theme-night .secondary-cta,
body.theme-night a[href="#flow"] {
  background: rgba(143, 216, 207, 0.1) !important;
  border: 1px solid rgba(143, 216, 207, 0.34) !important;
  color: #dff5f2 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .hero-secondary-action:hover,
html[data-theme="dark"] .secondary-cta:hover,
html[data-theme="dark"] a[href="#flow"]:hover,
html[data-theme="night"] .hero-secondary-action:hover,
html[data-theme="night"] .secondary-cta:hover,
html[data-theme="night"] a[href="#flow"]:hover,
body[data-theme="dark"] .hero-secondary-action:hover,
body[data-theme="dark"] .secondary-cta:hover,
body[data-theme="dark"] a[href="#flow"]:hover,
body[data-theme="night"] .hero-secondary-action:hover,
body[data-theme="night"] .secondary-cta:hover,
body[data-theme="night"] a[href="#flow"]:hover,
body.theme-dark .hero-secondary-action:hover,
body.theme-dark .secondary-cta:hover,
body.theme-dark a[href="#flow"]:hover,
body.theme-night .hero-secondary-action:hover,
body.theme-night .secondary-cta:hover,
body.theme-night a[href="#flow"]:hover {
  background: rgba(143, 216, 207, 0.18) !important;
  color: #ffffff !important;
  border-color: rgba(143, 216, 207, 0.48) !important;
}

html[data-theme="dark"] .professional-principles-panel,
html[data-theme="dark"] .professional-use-panel,
html[data-theme="dark"] .subscription-card,
html[data-theme="dark"] .subscription-panel,
html[data-theme="dark"] .subscription-status-card,
html[data-theme="dark"] .plans-card,
html[data-theme="dark"] .plan-card,
html[data-theme="dark"] .account-plan-card,
html[data-theme="dark"] .billing-card,
html[data-theme="night"] .professional-principles-panel,
html[data-theme="night"] .professional-use-panel,
html[data-theme="night"] .subscription-card,
html[data-theme="night"] .subscription-panel,
html[data-theme="night"] .subscription-status-card,
html[data-theme="night"] .plans-card,
html[data-theme="night"] .plan-card,
html[data-theme="night"] .account-plan-card,
html[data-theme="night"] .billing-card,
body[data-theme="dark"] .professional-principles-panel,
body[data-theme="dark"] .professional-use-panel,
body[data-theme="dark"] .subscription-card,
body[data-theme="dark"] .subscription-panel,
body[data-theme="dark"] .subscription-status-card,
body[data-theme="dark"] .plans-card,
body[data-theme="dark"] .plan-card,
body[data-theme="dark"] .account-plan-card,
body[data-theme="dark"] .billing-card,
body[data-theme="night"] .professional-principles-panel,
body[data-theme="night"] .professional-use-panel,
body[data-theme="night"] .subscription-card,
body[data-theme="night"] .subscription-panel,
body[data-theme="night"] .subscription-status-card,
body[data-theme="night"] .plans-card,
body[data-theme="night"] .plan-card,
body[data-theme="night"] .account-plan-card,
body[data-theme="night"] .billing-card,
body.theme-dark .professional-principles-panel,
body.theme-dark .professional-use-panel,
body.theme-dark .subscription-card,
body.theme-dark .subscription-panel,
body.theme-dark .subscription-status-card,
body.theme-dark .plans-card,
body.theme-dark .plan-card,
body.theme-dark .account-plan-card,
body.theme-dark .billing-card,
body.theme-night .professional-principles-panel,
body.theme-night .professional-use-panel,
body.theme-night .subscription-card,
body.theme-night .subscription-panel,
body.theme-night .subscription-status-card,
body.theme-night .plans-card,
body.theme-night .plan-card,
body.theme-night .account-plan-card,
body.theme-night .billing-card {
  background: linear-gradient(145deg, var(--aa-night-card-strong), var(--aa-night-card)) !important;
  border-color: var(--aa-night-border) !important;
  color: var(--aa-night-text) !important;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32) !important;
}

html[data-theme="dark"] .professional-principles-panel :is(h1, h2, h3, h4, strong),
html[data-theme="dark"] .subscription-card :is(h1, h2, h3, h4, strong),
html[data-theme="dark"] .subscription-panel :is(h1, h2, h3, h4, strong),
html[data-theme="night"] .professional-principles-panel :is(h1, h2, h3, h4, strong),
html[data-theme="night"] .subscription-card :is(h1, h2, h3, h4, strong),
html[data-theme="night"] .subscription-panel :is(h1, h2, h3, h4, strong),
body[data-theme="dark"] .professional-principles-panel :is(h1, h2, h3, h4, strong),
body[data-theme="dark"] .subscription-card :is(h1, h2, h3, h4, strong),
body[data-theme="dark"] .subscription-panel :is(h1, h2, h3, h4, strong),
body[data-theme="night"] .professional-principles-panel :is(h1, h2, h3, h4, strong),
body[data-theme="night"] .subscription-card :is(h1, h2, h3, h4, strong),
body[data-theme="night"] .subscription-panel :is(h1, h2, h3, h4, strong),
body.theme-dark .professional-principles-panel :is(h1, h2, h3, h4, strong),
body.theme-dark .subscription-card :is(h1, h2, h3, h4, strong),
body.theme-dark .subscription-panel :is(h1, h2, h3, h4, strong),
body.theme-night .professional-principles-panel :is(h1, h2, h3, h4, strong),
body.theme-night .subscription-card :is(h1, h2, h3, h4, strong),
body.theme-night .subscription-panel :is(h1, h2, h3, h4, strong) {
  color: #f6fbfa !important;
}

html[data-theme="dark"] .professional-principles-panel :is(p, li, span, dd, small),
html[data-theme="dark"] .subscription-card :is(p, li, span, dd, small),
html[data-theme="dark"] .subscription-panel :is(p, li, span, dd, small),
html[data-theme="night"] .professional-principles-panel :is(p, li, span, dd, small),
html[data-theme="night"] .subscription-card :is(p, li, span, dd, small),
html[data-theme="night"] .subscription-panel :is(p, li, span, dd, small),
body[data-theme="dark"] .professional-principles-panel :is(p, li, span, dd, small),
body[data-theme="dark"] .subscription-card :is(p, li, span, dd, small),
body[data-theme="dark"] .subscription-panel :is(p, li, span, dd, small),
body[data-theme="night"] .professional-principles-panel :is(p, li, span, dd, small),
body[data-theme="night"] .subscription-card :is(p, li, span, dd, small),
body[data-theme="night"] .subscription-panel :is(p, li, span, dd, small),
body.theme-dark .professional-principles-panel :is(p, li, span, dd, small),
body.theme-dark .subscription-card :is(p, li, span, dd, small),
body.theme-dark .subscription-panel :is(p, li, span, dd, small),
body.theme-night .professional-principles-panel :is(p, li, span, dd, small),
body.theme-night .subscription-card :is(p, li, span, dd, small),
body.theme-night .subscription-panel :is(p, li, span, dd, small) {
  color: var(--aa-night-muted) !important;
}

html[data-theme="dark"] .professional-principles-row,
html[data-theme="night"] .professional-principles-row,
body[data-theme="dark"] .professional-principles-row,
body[data-theme="night"] .professional-principles-row,
body.theme-dark .professional-principles-row,
body.theme-night .professional-principles-row {
  border-color: var(--aa-night-border-soft) !important;
}

html[data-theme="dark"] .professional-principles-number,
html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .plan-kicker,
html[data-theme="night"] .professional-principles-number,
html[data-theme="night"] .section-kicker,
html[data-theme="night"] .plan-kicker,
body[data-theme="dark"] .professional-principles-number,
body[data-theme="dark"] .section-kicker,
body[data-theme="dark"] .plan-kicker,
body[data-theme="night"] .professional-principles-number,
body[data-theme="night"] .section-kicker,
body[data-theme="night"] .plan-kicker,
body.theme-dark .professional-principles-number,
body.theme-dark .section-kicker,
body.theme-dark .plan-kicker,
body.theme-night .professional-principles-number,
body.theme-night .section-kicker,
body.theme-night .plan-kicker {
  color: var(--aa-night-gold) !important;
}

html[data-theme="dark"] .chart-actions button,
html[data-theme="dark"] .map-actions button,
html[data-theme="dark"] .chart-toolbar button,
html[data-theme="dark"] .map-toolbar button,
html[data-theme="dark"] .chart-icon-button,
html[data-theme="dark"] .map-icon-button,
html[data-theme="night"] .chart-actions button,
html[data-theme="night"] .map-actions button,
html[data-theme="night"] .chart-toolbar button,
html[data-theme="night"] .map-toolbar button,
html[data-theme="night"] .chart-icon-button,
html[data-theme="night"] .map-icon-button,
body[data-theme="dark"] .chart-actions button,
body[data-theme="dark"] .map-actions button,
body[data-theme="dark"] .chart-toolbar button,
body[data-theme="dark"] .map-toolbar button,
body[data-theme="dark"] .chart-icon-button,
body[data-theme="dark"] .map-icon-button,
body[data-theme="night"] .chart-actions button,
body[data-theme="night"] .map-actions button,
body[data-theme="night"] .chart-toolbar button,
body[data-theme="night"] .map-toolbar button,
body[data-theme="night"] .chart-icon-button,
body[data-theme="night"] .map-icon-button,
body.theme-dark .chart-actions button,
body.theme-dark .map-actions button,
body.theme-dark .chart-toolbar button,
body.theme-dark .map-toolbar button,
body.theme-dark .chart-icon-button,
body.theme-dark .map-icon-button,
body.theme-night .chart-actions button,
body.theme-night .map-actions button,
body.theme-night .chart-toolbar button,
body.theme-night .map-toolbar button,
body.theme-night .chart-icon-button,
body.theme-night .map-icon-button {
  background: rgba(238, 248, 247, 0.94) !important;
  border-color: rgba(143, 216, 207, 0.34) !important;
  color: #135f5a !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] .chart-tabs a,
html[data-theme="dark"] .map-tabs a,
html[data-theme="dark"] .chart-panel-tabs button,
html[data-theme="night"] .chart-tabs a,
html[data-theme="night"] .map-tabs a,
html[data-theme="night"] .chart-panel-tabs button,
body[data-theme="dark"] .chart-tabs a,
body[data-theme="dark"] .map-tabs a,
body[data-theme="dark"] .chart-panel-tabs button,
body[data-theme="night"] .chart-tabs a,
body[data-theme="night"] .map-tabs a,
body[data-theme="night"] .chart-panel-tabs button,
body.theme-dark .chart-tabs a,
body.theme-dark .map-tabs a,
body.theme-dark .chart-panel-tabs button,
body.theme-night .chart-tabs a,
body.theme-night .map-tabs a,
body.theme-night .chart-panel-tabs button {
  color: var(--aa-night-gold) !important;
}

/* Night mode final coherence pass: toolbar, CTAs, cards and chart surfaces. */
:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) {
  --aa-night-page: #071016;
  --aa-night-surface: rgba(12, 23, 31, 0.94);
  --aa-night-surface-soft: rgba(17, 31, 40, 0.9);
  --aa-night-border-soft: rgba(168, 212, 207, 0.2);
  --aa-night-text-strong: #f2fbfa;
  --aa-night-text: #d9e7e9;
  --aa-night-text-muted: #afc1c8;
  --aa-night-teal: #8fd8cf;
  --aa-night-teal-strong: #c7f6f0;
  --aa-night-teal-soft: rgba(143, 216, 207, 0.14);
  --aa-night-gold-soft: #d8b56c;
}

:is(html[data-theme="dark"], html[data-theme="night"], html[data-style="night"], html[data-home-style="night"]) body,
:is(body[data-theme="dark"], body[data-theme="night"], body[data-style="night"], body[data-home-style="night"], body.theme-dark, body.theme-night, body.style-night, body.night-mode) {
  background:
    radial-gradient(circle at 50% 20%, rgba(33, 83, 80, 0.2), transparent 34rem),
    linear-gradient(180deg, #081118 0%, #071016 100%) !important;
  color: var(--aa-night-text) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.landing-header-right, .landing-header-actions, .style-toolbar, .style-selector, .style-switcher, .style-palette, .theme-style-switcher, .home-style-switcher, .style-pill, .nav-style-pill) {
  background: rgba(8, 17, 24, 0.84) !important;
  border-color: rgba(168, 212, 207, 0.18) !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.style-toolbar, .style-selector, .style-switcher, .style-palette, .theme-style-switcher, .home-style-switcher, .style-pill, .nav-style-pill) :is(button, a, .style-option, .style-button) {
  min-width: 30px !important;
  width: 30px !important;
  height: 30px !important;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--aa-night-teal) !important;
  box-shadow: none !important;
  opacity: 0.92 !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.style-toolbar, .style-selector, .style-switcher, .style-palette, .theme-style-switcher, .home-style-switcher, .style-pill, .nav-style-pill) :is(button:hover, a:hover, .style-option:hover, .style-button:hover, button:focus-visible, a:focus-visible) {
  background: rgba(143, 216, 207, 0.13) !important;
  border-color: rgba(143, 216, 207, 0.24) !important;
  color: var(--aa-night-teal-strong) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.style-toolbar, .style-selector, .style-switcher, .style-palette, .theme-style-switcher, .home-style-switcher, .style-pill, .nav-style-pill) :is(button[aria-pressed="true"], button.is-active, button.active, a.is-active, a.active, .style-option.is-active, .style-option.active, .style-button.is-active, .style-button.active, [data-active="true"]) {
  background: rgba(143, 216, 207, 0.18) !important;
  border-color: rgba(143, 216, 207, 0.3) !important;
  color: var(--aa-night-teal-strong) !important;
  box-shadow: inset 0 0 0 1px rgba(143, 216, 207, 0.08) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.home-cta-secondary, .hero-secondary-action, .hero-outline-action, .landing-cta-secondary, a[href="#flow"], a[href="#workflow"], a[href="#tools"], a[href="#modules"]) {
  background: rgba(143, 216, 207, 0.1) !important;
  border-color: rgba(143, 216, 207, 0.3) !important;
  color: var(--aa-night-teal-strong) !important;
  box-shadow: none !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .professional-principles, .subscription-card, .subscription-status-card, .subscription-summary-card, .subscription-panel, .plans-card, .plan-card, .account-plan-card, .settings-card, .account-card) {
  background: linear-gradient(145deg, rgba(15, 28, 36, 0.96), rgba(10, 20, 28, 0.92)) !important;
  border-color: var(--aa-night-border-soft) !important;
  box-shadow: 0 20px 52px rgba(0, 0, 0, 0.26) !important;
  color: var(--aa-night-text) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .professional-principles, .subscription-card, .subscription-status-card, .subscription-summary-card, .subscription-panel, .plans-card, .plan-card, .account-plan-card, .settings-card, .account-card) :is(h1, h2, h3, h4, strong, b) {
  color: var(--aa-night-text-strong) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .professional-principles, .subscription-card, .subscription-status-card, .subscription-summary-card, .subscription-panel, .plans-card, .plan-card, .account-plan-card, .settings-card, .account-card) :is(p, li, span, small, dd, dt) {
  color: var(--aa-night-text-muted) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .professional-principles, .subscription-card, .subscription-status-card, .subscription-summary-card, .subscription-panel, .plans-card, .plan-card, .account-plan-card, .settings-card, .account-card) :is(.section-kicker, .kicker, .badge, .tag, .label, .eyebrow) {
  color: var(--aa-night-gold-soft) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.professional-use-panel, .professional-principles-panel, .professional-use-principles, .professional-principles, .subscription-card, .subscription-status-card, .subscription-summary-card, .subscription-panel, .plans-card, .plan-card, .account-plan-card, .settings-card, .account-card) :is(hr, .divider, .professional-principle-row, .principle-row, .subscription-row, .plan-row) {
  border-color: rgba(168, 212, 207, 0.14) !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.chart-viewport, .chart-stage, .chart-export-surface, .map-viewport, .map-stage, .map-export-surface, .chart-card, .chart-panel, .map-card, .map-panel, .chart-shell, .map-shell, .astro-chart-card, .astro-map-card) {
  background: #f8fafb !important;
  color: #111827 !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.chart-tabs a, .map-tabs a, .chart-panel-tabs button, .chart-card nav a, .map-card nav a, .chart-toolbar a, .chart-toolbar button, .map-toolbar a, .map-toolbar button, .chart-icon-button, .map-icon-button) {
  color: #b98d5f !important;
}

:is(
  html[data-theme="dark"],
  html[data-theme="night"],
  html[data-style="night"],
  html[data-home-style="night"],
  body[data-theme="dark"],
  body[data-theme="night"],
  body[data-style="night"],
  body[data-home-style="night"],
  body.theme-dark,
  body.theme-night,
  body.style-night,
  body.night-mode,
  .theme-dark,
  .theme-night,
  .style-night,
  .night-mode
) :is(.chart-toolbar button, .map-toolbar button, .chart-icon-button, .map-icon-button) {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(15, 118, 110, 0.22) !important;
  color: #0f766e !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08) !important;
}

/* Private maps: stack multiple charts cleanly on medium widths */
@media (max-width: 1320px) and (min-width: 1101px) {
  .private-maps-active .chart-wheel-stage.is-multiple-chart {
    padding: clamp(14px, 1.6vw, 22px);
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "tropical"
      "sideral"
      "memoria";
    align-items: start;
    gap: clamp(18px, 1.8vw, 26px);
    width: min(100%, 760px);
    margin-inline: auto;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    grid-area: topbar;
    position: static;
    width: 100%;
    max-width: none;
    justify-content: space-between;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    position: static;
    width: min(100%, 760px);
    justify-self: center;
    transform: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-left {
    grid-area: tropical;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-top {
    grid-area: sideral;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-right {
    grid-area: memoria;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    display: grid;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: clamp(12px, 1.1vw, 16px);
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    position: static;
    display: flex;
    width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 4px;
    transform: none;
    text-align: left;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    margin-inline: auto;
    text-align: center;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple {
    width: min(100%, 680px);
    margin-inline: auto;
  }
}

@media (max-width: 1100px) {
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    width: min(100%, 720px);
    margin-inline: auto;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    width: 100%;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    justify-content: space-between;
  }
}

/* Prompt exportable modal polish */
.chart-data-dialog {
  width: min(1040px, calc(100vw - 32px));
  max-height: min(92vh, 900px);
}

.chart-data-modal {
  grid-template-rows: auto auto minmax(180px, 1fr) auto;
  height: min(92vh, 900px);
  max-height: min(92vh, 900px);
}

.chart-data-body {
  display: contents;
}

.chart-data-header {
  align-items: flex-start;
  padding: 22px 24px 18px;
}

.chart-data-header .eyebrow {
  margin: 0 0 7px;
}

.chart-data-subtitle {
  max-width: 520px;
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.45;
}

.chart-data-toolbar {
  display: block;
  max-height: min(44vh, 430px);
  padding: 16px 24px;
}

.chart-data-toolbar label {
  color: inherit;
}

.chart-prompt-config {
  gap: 16px;
  border-color: color-mix(in srgb, var(--accent-line) 70%, var(--line));
  border-radius: 14px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--accent-soft)), var(--surface));
  padding: 16px;
}

.chart-prompt-config-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(190px, 240px);
  gap: 18px;
  align-items: start;
}

.chart-prompt-options,
.chart-prompt-choice-group {
  display: grid;
  min-width: 0;
  gap: 9px;
  margin: 0;
  border: 0;
  background: transparent;
  padding: 0;
}

.chart-prompt-options legend,
.chart-prompt-field-label,
.chart-prompt-select-field > span,
.chart-prompt-extra-field > span,
.chart-prompt-other-field > span,
.chart-prompt-profile > span,
.chart-data-format-field > span {
  color: var(--accent);
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.065em;
  line-height: 1.1;
  text-transform: uppercase;
}

.chart-prompt-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.chart-prompt-chip-list label,
.chart-prompt-options label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 52%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 94%, white);
  color: var(--text-soft);
  font-size: 13px;
  font-weight: 660;
  line-height: 1;
  padding: 0 11px;
}

.chart-prompt-chip-list label:has(input:checked),
.chart-prompt-options label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 64%, var(--accent-line));
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface));
  color: var(--accent);
}

.chart-prompt-config input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 14px;
  min-width: 14px;
  height: 14px;
  min-height: 14px;
  flex: 0 0 14px;
  margin: 0;
  accent-color: var(--accent);
}

.chart-data-toolbar .chart-prompt-profile {
  display: grid;
  gap: 7px;
  width: 100%;
  margin-left: 0;
}

.chart-data-toolbar .chart-prompt-profile select,
.chart-prompt-select-field select,
.chart-data-format-field select {
  width: 100%;
  min-height: 38px;
  border-radius: 10px;
  border-color: color-mix(in srgb, var(--line) 86%, var(--accent-line));
  background-color: var(--surface);
  color: var(--text);
  font-size: 13.5px;
}

.chart-prompt-preferences {
  gap: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent-line) 36%, transparent);
  padding-top: 14px;
}

.chart-prompt-preferences > header {
  align-items: center;
}

.chart-prompt-preferences > header > div {
  display: grid;
  gap: 2px;
}

.chart-prompt-preferences > header strong {
  color: var(--text);
  font-size: 13.5px;
  font-weight: 760;
}

.chart-prompt-preferences > header > div > span {
  color: var(--muted);
  font-size: 12.5px;
}

.chart-prompt-switch {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 34px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 52%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  padding: 0 12px;
}

.chart-prompt-switch input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chart-prompt-switch-ui {
  position: relative;
  width: 34px;
  height: 19px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 62%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 74%, white);
  transition: background 160ms ease, border-color 160ms ease;
}

.chart-prompt-switch-ui::after {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  border-radius: 999px;
  background: var(--muted);
  content: "";
  transition: transform 160ms ease, background 160ms ease;
}

.chart-prompt-switch:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--accent-line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  color: var(--accent);
}

.chart-prompt-switch:has(input:checked) .chart-prompt-switch-ui {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 22%, var(--surface));
}

.chart-prompt-switch:has(input:checked) .chart-prompt-switch-ui::after {
  transform: translateX(15px);
  background: var(--accent);
}

.chart-prompt-preferences-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 0;
}

.chart-prompt-preference-section {
  display: grid;
  gap: 12px;
  border: 1px solid color-mix(in srgb, var(--accent-line) 50%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 92%, white);
  padding: 14px;
}

.chart-prompt-preference-section h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
}

.chart-prompt-field-block,
.chart-prompt-other-field,
.chart-data-toolbar .chart-prompt-other-field,
.chart-data-toolbar .chart-prompt-select-field,
.chart-data-toolbar .chart-prompt-extra-field {
  display: grid;
  min-width: 0;
  gap: 8px;
}

.chart-prompt-select-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chart-prompt-other-field {
  width: min(100%, 360px);
  margin-top: 2px;
}

.chart-prompt-other-field input {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 8px 10px;
}

.chart-prompt-context-section {
  background: color-mix(in srgb, var(--surface-soft) 60%, white);
}

.chart-prompt-extra-field textarea {
  min-height: 88px;
  border-color: color-mix(in srgb, var(--line) 84%, var(--accent-line));
  border-radius: 10px;
  resize: vertical;
  font-size: 13.5px;
  line-height: 1.45;
}

.chart-data-preview {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-height: 0;
  background: var(--surface-soft);
  padding: 16px 24px;
}

.chart-data-preview header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.chart-data-preview h3 {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 760;
  letter-spacing: 0;
}

.chart-data-preview p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}

.chart-data-output {
  border: 1px solid color-mix(in srgb, var(--line) 86%, var(--accent-line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 90%, white);
  padding: 18px 20px;
  color: var(--text);
  font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}

.chart-data-footer {
  padding: 14px 24px;
  background: var(--surface);
}

.chart-data-format-field {
  gap: 10px;
}

.chart-data-format-field > span {
  color: var(--text-soft);
  text-transform: none;
  letter-spacing: 0;
  font-size: 13px;
  font-weight: 700;
}

.chart-data-format-field select {
  width: auto;
  min-width: 120px;
}

.chart-data-copy-primary {
  min-width: 150px;
}

.chart-data-actions button.chart-data-copy-primary {
  min-width: 150px;
  padding: 0 18px;
}

.chart-data-gpt-link {
  display: inline-flex;
  min-width: 190px;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 44%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 34%, var(--surface));
  color: var(--accent);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  padding: 0 15px;
  text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.chart-data-gpt-link svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-data-gpt-link:hover {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  color: var(--accent-strong);
}

.chart-data-gpt-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.copy-status {
  min-height: 18px;
  color: var(--accent);
  font-size: 12.5px;
  font-weight: 760;
}

@media (max-width: 860px) {
  .chart-data-modal {
    grid-template-rows: auto auto minmax(180px, 1fr) auto;
  }

  .chart-data-header,
  .chart-data-footer,
  .chart-data-toolbar,
  .chart-data-preview {
    padding-right: 16px;
    padding-left: 16px;
  }

  .chart-prompt-config-main,
  .chart-prompt-select-grid {
    grid-template-columns: 1fr;
  }

  .chart-data-footer {
    align-items: stretch;
    flex-direction: column;
  }

  .chart-data-footer-meta,
  .chart-data-actions,
  .chart-data-actions button.chart-data-copy-primary,
  .chart-data-gpt-link {
    width: 100%;
  }

  .chart-data-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-data-actions button.chart-data-copy-primary,
  .chart-data-gpt-link {
    min-width: 0;
  }
}

@media (max-width: 640px), (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .chart-data-dialog {
    width: 100vw;
    max-width: none;
    height: 100dvh;
    max-height: none;
    margin: 0;
    border: 0;
    border-radius: 0;
  }

  .chart-data-modal {
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
  }

  .chart-data-header {
    position: relative;
    z-index: 2;
    align-items: center;
    min-height: 76px;
    padding: max(12px, env(safe-area-inset-top)) 16px 12px;
    background: var(--surface);
  }

  .chart-data-header .eyebrow {
    margin-bottom: 4px;
    font-size: 9.5px;
  }

  .chart-data-header h2 {
    font-size: 20px;
  }

  .chart-data-subtitle {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.35;
  }

  .chart-data-header .icon-close {
    width: 40px;
    height: 40px;
    flex: 0 0 40px;
  }

  .chart-data-body {
    display: block;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--surface-soft);
    scrollbar-width: thin;
  }

  .chart-data-toolbar {
    max-height: none;
    overflow: visible;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
    padding: 12px;
  }

  .chart-prompt-config {
    gap: 14px;
    border-radius: 10px;
    padding: 14px;
  }

  .chart-prompt-config-main {
    gap: 12px;
  }

  .chart-prompt-chip-list {
    gap: 6px;
  }

  .chart-prompt-chip-list label,
  .chart-prompt-options label {
    min-height: 34px;
    padding: 0 10px;
    font-size: 12.5px;
  }

  .chart-prompt-preferences {
    padding-top: 14px;
  }

  .chart-prompt-preferences > header {
    gap: 10px;
  }

  .chart-prompt-preferences > header > div > span {
    font-size: 12px;
  }

  .chart-prompt-switch {
    justify-self: start;
  }

  .chart-prompt-preference-section {
    gap: 10px;
    border-radius: 10px;
    padding: 12px;
  }

  .chart-prompt-select-grid {
    gap: 10px;
  }

  .chart-data-preview {
    display: block;
    min-height: 0;
    background: var(--surface-soft);
    padding: 14px 12px 18px;
  }

  .chart-data-preview header {
    margin-bottom: 8px;
  }

  .chart-data-preview h3 {
    font-size: 13.5px;
  }

  .chart-data-preview p {
    font-size: 12px;
    line-height: 1.35;
  }

  .chart-data-output {
    min-height: 300px;
    overflow: visible;
    border-radius: 10px;
    padding: 14px;
    font-size: 11.5px;
    line-height: 1.5;
  }

  .chart-data-footer {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr);
    align-items: center;
    gap: 10px;
    padding: 10px 12px max(10px, env(safe-area-inset-bottom));
    background: var(--surface);
  }

  .chart-data-footer-meta {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .chart-data-format-field {
    display: grid;
    grid-template-columns: auto minmax(74px, 1fr);
    gap: 7px;
  }

  .chart-data-format-field select {
    width: 100%;
    min-width: 0;
    min-height: 40px;
  }

  .copy-status {
    min-height: 0;
    overflow: hidden;
    font-size: 10.5px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-data-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .chart-data-actions button.chart-data-copy-primary,
  .chart-data-gpt-link {
    width: 100%;
    min-width: 0;
    min-height: 42px;
    padding: 0 8px;
    font-size: 11.5px;
    white-space: nowrap;
  }

  .chart-data-gpt-link svg {
    width: 15px;
    height: 15px;
    flex-basis: 15px;
  }
}

@media (max-width: 520px) {
  .chart-data-actions {
    grid-template-columns: 1fr;
  }
}

/* Final prompt modal polish: softer internals and cleaner selectable chips */
.chart-prompt-config {
  border-color: color-mix(in srgb, var(--line) 78%, #d7e7e4);
}

.chart-prompt-preference-section {
  border-color: color-mix(in srgb, var(--line) 82%, #d7e7e4);
}

.chart-prompt-chip-list label,
.chart-prompt-options label {
  position: relative;
  border-color: color-mix(in srgb, var(--line) 82%, #d7e7e4);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.chart-prompt-chip-list label:hover,
.chart-prompt-options label:hover {
  border-color: color-mix(in srgb, var(--accent-line) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 30%, var(--surface));
}

.chart-prompt-chip-list label input[type="checkbox"],
.chart-prompt-options label input[type="checkbox"] {
  position: absolute;
  width: 1px;
  min-width: 1px;
  height: 1px;
  min-height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.chart-prompt-chip-list label:has(input:checked)::before,
.chart-prompt-options label:has(input:checked)::before {
  display: inline-grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  content: "\2713";
  font-family: "Astro Jupiter", Arial, sans-serif;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.chart-prompt-chip-list label:has(input:checked),
.chart-prompt-options label:has(input:checked) {
  border-color: color-mix(in srgb, var(--accent) 56%, var(--accent-line));
  box-shadow: 0 1px 0 color-mix(in srgb, var(--accent) 12%, transparent);
}

.chart-prompt-chip-list label:has(input:focus-visible),
.chart-prompt-options label:has(input:focus-visible),
.chart-prompt-switch:has(input:focus-visible),
.chart-data-copy-primary:focus-visible,
.chart-prompt-select-field select:focus-visible,
.chart-data-format-field select:focus-visible,
.chart-prompt-extra-field textarea:focus-visible,
.chart-prompt-other-field input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 32%, transparent);
  outline-offset: 2px;
}

.chart-data-toolbar .chart-prompt-profile select,
.chart-prompt-select-field select,
.chart-data-format-field select,
.chart-prompt-extra-field textarea,
.chart-prompt-other-field input,
.chart-data-output {
  border-color: color-mix(in srgb, var(--line) 84%, #d7e7e4);
}

.chart-prompt-switch {
  border-color: color-mix(in srgb, var(--line) 80%, #d7e7e4);
}

.chart-prompt-switch-ui {
  border-color: color-mix(in srgb, var(--line) 72%, #d7e7e4);
}

/* Compact configuration panel inside the prompt modal */
.chart-prompt-config {
  gap: 18px;
  padding: 18px;
  background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft));
}

.chart-prompt-config-main {
  grid-template-columns: minmax(0, 1fr) minmax(240px, 280px);
  gap: 24px;
  align-items: end;
}

.chart-prompt-options {
  gap: 8px;
}

.chart-data-toolbar .chart-prompt-profile {
  max-width: 280px;
  justify-self: end;
}

.chart-prompt-preferences {
  gap: 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, #d7e7e4);
  padding-top: 16px;
}

.chart-prompt-preferences > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
}

.chart-prompt-preferences > header > div {
  gap: 4px;
}

.chart-prompt-preferences > header strong {
  font-size: 14px;
  font-weight: 760;
}

.chart-prompt-preferences > header > div > span {
  max-width: 560px;
  font-size: 12.5px;
  line-height: 1.35;
}

.chart-prompt-switch {
  gap: 8px;
  min-height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 650;
  padding: 0;
}

.chart-prompt-switch:hover {
  color: var(--text-soft);
}

.chart-prompt-switch:has(input:checked) {
  border-color: transparent;
  background: transparent;
  color: var(--accent);
}

.chart-prompt-switch-state {
  min-width: 74px;
  text-align: left;
}

@media (max-width: 860px) {
  .chart-prompt-config-main {
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: stretch;
  }

  .chart-data-toolbar .chart-prompt-profile {
    max-width: none;
    justify-self: stretch;
  }

  .chart-prompt-preferences > header {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .chart-prompt-switch {
    justify-self: start;
  }
}

/* Prompt config alignment refinement */
.chart-prompt-config {
  padding: 18px 20px;
}

.chart-prompt-config-main {
  align-items: start;
}

.chart-prompt-options {
  align-content: start;
  gap: 0;
}

.chart-prompt-options legend {
  margin: 0 0 8px;
  padding: 0;
}

.chart-prompt-chip-list label,
.chart-prompt-options label {
  min-height: 36px;
  padding: 0 12px;
}

.chart-prompt-chip-list label:has(input:checked)::before,
.chart-prompt-options label:has(input:checked)::before {
  width: 17px;
  height: 17px;
}

.chart-data-toolbar .chart-prompt-profile {
  grid-template-rows: auto 38px;
  gap: 8px;
  align-self: start;
}

.chart-data-toolbar .chart-prompt-profile select {
  min-height: 38px;
}

.chart-prompt-preferences {
  padding-top: 18px;
}

.chart-prompt-preferences > header {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
}

.chart-prompt-preferences > header > div {
  gap: 5px;
}

.chart-prompt-switch {
  display: inline-grid;
  grid-template-columns: 40px auto;
  justify-self: end;
  align-items: center;
  gap: 10px;
  min-height: 24px;
  line-height: 1;
}

.chart-prompt-switch-ui {
  width: 40px;
  height: 22px;
}

.chart-prompt-switch-ui::after {
  width: 16px;
  height: 16px;
}

.chart-prompt-switch:has(input:checked) .chart-prompt-switch-ui::after {
  transform: translateX(18px);
}

.chart-prompt-switch-state {
  min-width: 78px;
  color: var(--text-soft);
  font-size: 12.5px;
  font-weight: 700;
}

.chart-prompt-switch:has(input:checked) .chart-prompt-switch-state {
  color: var(--accent);
}

@media (max-width: 860px) {
  .chart-prompt-preferences > header {
    grid-template-columns: 1fr;
  }

  .chart-prompt-switch {
    justify-self: start;
  }
}

@media (max-width: 640px), (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .chart-prompt-config {
    gap: 14px;
    padding: 14px;
  }

  .chart-prompt-chip-list label,
  .chart-prompt-options label {
    min-height: 34px;
    padding: 0 10px;
  }

  .chart-prompt-preferences {
    padding-top: 14px;
  }

  .chart-prompt-preferences > header {
    gap: 10px;
  }

  .chart-prompt-switch {
    justify-self: start;
  }

  .chart-data-footer {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .chart-data-footer-meta {
    grid-template-columns: minmax(0, 170px) minmax(0, 1fr);
    align-items: center;
    gap: 10px;
  }

  .chart-data-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Contextual commerce and test catalog */
.private-map-offer {
  display: grid;
  gap: 9px;
  min-width: 0;
  margin: 2px 0 4px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  padding: 12px;
}

.private-map-offer.is-hidden {
  display: none !important;
}

.private-map-offer-header {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.private-map-offer-kicker {
  color: var(--accent);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.private-map-offer-badge {
  flex: 0 0 auto;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  color: color-mix(in srgb, var(--accent) 82%, var(--text));
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  line-height: 1;
  padding: 5px 7px;
  text-transform: uppercase;
  white-space: nowrap;
}

.private-map-offer-heading {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.private-map-offer-heading strong {
  color: var(--text);
  font-size: 14.5px;
  line-height: 1.3;
}

.private-map-offer-heading > span,
.private-map-offer-description,
.private-map-offer-note,
.private-map-offer-status {
  margin: 0;
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.4;
}

.private-map-offer-heading > span,
.private-map-offer-description {
  overflow-wrap: anywhere;
}

.private-map-offer-maps {
  display: grid;
  min-width: 0;
  gap: 0;
  margin: 0;
  border-block: 1px solid color-mix(in srgb, var(--accent) 16%, var(--line));
  padding-block: 3px;
}

.private-map-offer-maps > div {
  display: grid;
  grid-template-columns: minmax(58px, 0.7fr) minmax(0, 1.3fr);
  gap: 8px;
  min-width: 0;
  align-items: baseline;
  padding: 3px 0;
}

.private-map-offer-maps :is(dt, dd) {
  min-width: 0;
  margin: 0;
  font-size: 11px;
  line-height: 1.3;
}

.private-map-offer-maps dt {
  color: var(--text);
  font-weight: 700;
}

.private-map-offer-maps dd {
  color: var(--muted);
  overflow-wrap: anywhere;
}

.private-map-offer-price {
  margin: 0;
  color: var(--accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.3;
}

.private-map-offer .private-map-offer-cta {
  display: inline-flex;
  width: 100%;
  min-width: 0;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.2;
  padding: 8px 10px;
}

.private-map-offer-cta svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.private-map-offer-cta:hover:not(:disabled) {
  border-color: color-mix(in srgb, var(--accent) 84%, var(--text));
  background: color-mix(in srgb, var(--accent) 84%, var(--text));
}

.private-map-offer-cta:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 70%, var(--text));
  outline-offset: 2px;
}

.private-map-offer-cta:disabled {
  cursor: not-allowed;
  opacity: 0.68;
}

.private-map-offer-note,
.private-map-offer-status {
  display: block;
}

.private-map-offer-status {
  border-top: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  padding-top: 7px;
  color: var(--accent);
  font-weight: 700;
}

.report-card {
  grid-template-rows: 1fr auto auto;
}

.store-section {
  display: grid;
  width: min(100%, 1160px);
  gap: 22px;
  margin: 6px auto 0;
}

.subscription-kicker {
  color: var(--accent);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 560px));
  justify-content: center;
  gap: 18px;
}

.store-card {
  display: grid;
  grid-template-rows: auto 1fr auto auto auto;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.store-card-media {
  width: 100%;
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: var(--surface-soft);
  padding: 0;
  text-align: inherit;
}

.store-card-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 180ms ease;
}

.store-card[data-store-category="Libro"] .store-card-media {
  background: #e9eeee;
}

.store-card[data-store-category="Libro"] .store-card-media img {
  box-sizing: border-box;
  object-fit: contain;
  padding: 22px;
}

.store-card:hover .store-card-media img,
.store-card:focus-within .store-card-media img {
  transform: scale(1.025);
}

.store-card.has-details .store-card-media {
  cursor: pointer;
}

.store-card-copy {
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 18px 18px 12px;
}

.store-card-copy > span {
  color: #9a6a2d;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-card-copy h3 {
  margin: 0;
  color: var(--text);
  font-size: 19px;
  line-height: 1.2;
}

.store-card-title-button {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: inherit;
  line-height: inherit;
  padding: 0;
  text-align: left;
}

.store-card-title-button:hover,
.store-card-title-button:focus-visible {
  color: var(--accent);
}

.store-card-copy > b {
  color: var(--text-soft);
  font-size: 13px;
  line-height: 1.35;
}

.store-card-copy > small {
  color: var(--muted);
  font-size: 11.5px;
}

.store-card-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.5;
}

.store-product-details-button {
  justify-self: start;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  padding: 2px 0;
}

.store-product-details-button:hover {
  border-bottom-color: var(--accent);
}

.store-option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 2px 18px 12px;
}

.store-option-grid:has(.store-option-field:only-child) {
  grid-template-columns: 1fr;
}

.store-option-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
}

.store-option-field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0 28px 0 9px;
}

.store-variant-field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin: 0 18px 12px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 750;
}

.store-variant-field select {
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  padding: 0 9px;
}

.store-purchase-controls {
  margin: 0 18px 10px;
}

.store-quantity-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 750;
}

.store-quantity-control {
  display: grid;
  grid-template-columns: 32px 42px 32px;
  width: max-content;
  min-height: 34px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.store-quantity-control button,
.store-quantity-control input {
  min-width: 0;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-align: center;
}

.store-quantity-control button {
  cursor: pointer;
  font-size: 17px;
}

.store-quantity-control button:hover {
  background: var(--surface-soft);
}

.store-quantity-control input {
  width: 42px;
  border-right: 1px solid var(--line);
  border-left: 1px solid var(--line);
  appearance: textfield;
}

.store-quantity-control input::-webkit-inner-spin-button,
.store-quantity-control input::-webkit-outer-spin-button {
  margin: 0;
  appearance: none;
}

.store-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 18px;
  border-top: 1px solid var(--line);
  padding: 14px 0 18px;
}

.store-card-footer strong {
  color: var(--accent);
  font-size: 13px;
}

.store-card.is-coming-soon {
  border-color: color-mix(in srgb, var(--warning) 20%, var(--line));
  background: color-mix(in srgb, var(--warning) 2.5%, var(--surface));
}

.store-card-footer--upcoming {
  justify-content: flex-start;
}

.store-card-availability {
  display: inline-flex;
  min-height: 27px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--warning) 40%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--warning) 8%, var(--surface));
  color: color-mix(in srgb, var(--warning) 78%, var(--text));
  padding: 5px 10px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.store-card-footer .btn-small {
  min-width: 124px;
}

.store-card-footer--external {
  justify-content: stretch;
}

.store-external-purchase-link {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent);
  border-radius: 7px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.store-card-footer--external .store-external-purchase-link {
  width: 100%;
}

.store-external-purchase-link:hover {
  border-color: var(--accent-strong);
  background: var(--accent-strong);
  color: var(--on-accent);
}

.store-external-purchase-link:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, var(--text));
  outline-offset: 2px;
}

.store-cart-dialog {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  overflow: hidden;
  border: 0;
  background: transparent;
  padding: 0;
}

.store-cart-dialog[open] {
  display: flex;
  justify-content: flex-end;
}

.store-cart-dialog::backdrop {
  background: color-mix(in srgb, #122523 42%, transparent);
  backdrop-filter: blur(1.5px);
}

.store-cart-dialog-content {
  width: min(420px, 100vw);
  height: 100%;
  animation: store-cart-drawer-in 180ms ease-out;
}

@keyframes store-cart-drawer-in {
  from {
    transform: translateX(28px);
    opacity: 0.75;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.store-cart-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-left: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  background: var(--surface);
  box-shadow: -18px 0 44px color-mix(in srgb, #122523 18%, transparent);
}

.store-cart-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 17px 18px;
}

.store-cart-head > div {
  display: grid;
  gap: 3px;
}

.store-cart-head span {
  color: #9a6a2d;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-cart-head h3 {
  margin: 0;
  color: var(--text);
  font-size: 20px;
}

.store-cart-close {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 23px;
}

.store-cart-close:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.store-cart-lines {
  display: grid;
  align-content: start;
  min-height: 0;
  overflow-y: auto;
}

.store-cart-line {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 14px 16px;
}

.store-cart-line img {
  width: 64px;
  height: 72px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--surface-soft);
  object-fit: cover;
}

.store-cart-line[data-store-cart-category="Libro"] img {
  object-fit: contain;
  padding: 3px;
}

.store-cart-line-copy {
  display: grid;
  align-content: start;
  gap: 4px;
  min-width: 0;
}

.store-cart-line-copy b {
  color: var(--text);
  font-size: 12.5px;
  line-height: 1.25;
}

.store-cart-line-copy small {
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.35;
}

.store-cart-line-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 6px;
}

.store-quantity-control--compact {
  grid-template-columns: 26px 34px 26px;
  min-height: 29px;
}

.store-quantity-control--compact button,
.store-quantity-control--compact input {
  min-height: 27px;
}

.store-quantity-control--compact input {
  width: 34px;
}

.store-cart-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font-size: 10.5px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.store-cart-remove:hover {
  color: var(--danger, #a23a3a);
}

.store-cart-footer {
  display: grid;
  gap: 12px;
  padding: 17px 18px 18px;
}

.store-cart-footer > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.store-cart-footer span,
.store-cart-footer small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}

.store-cart-footer strong {
  color: var(--accent);
  font-size: 14px;
}

.store-cart-footer .primary-action {
  width: 100%;
  min-height: 42px;
}

.store-cart-empty {
  display: grid;
  align-content: center;
  gap: 7px;
  padding: 28px 20px;
  text-align: center;
}

.store-cart-empty b {
  color: var(--text);
}

.store-cart-empty p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.store-product-dialog {
  width: min(980px, calc(100vw - 40px));
  max-width: none;
  height: min(88vh, 820px);
  max-height: min(88vh, 820px);
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: var(--surface);
  padding: 0;
  box-shadow: 0 26px 70px color-mix(in srgb, #122523 28%, transparent);
}

.store-product-dialog::backdrop {
  background: color-mix(in srgb, #122523 48%, transparent);
  backdrop-filter: blur(2px);
}

.store-product-dialog > #store-product-dialog-content {
  width: 100%;
  height: 100%;
  min-height: 0;
}

.store-product-modal {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, 0.78fr) minmax(0, 1.22fr);
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}

.store-product-modal-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font-size: 24px;
}

.store-product-modal-close:hover {
  background: var(--surface-soft);
  color: var(--text);
}

.store-product-modal-media {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  align-items: stretch;
  justify-items: center;
  gap: 16px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: #e9eeee;
  padding: clamp(26px, 4vw, 52px);
}

.store-product-modal-image-stage {
  position: relative;
  display: grid;
  width: 100%;
  min-width: 0;
  height: 100%;
  min-height: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  background: transparent;
  cursor: zoom-in;
  padding: 0;
}

.store-product-modal-image-stage:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.store-product-modal-image-frame {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}

.store-product-modal-image-frame.is-book {
  width: auto;
  aspect-ratio: 2 / 3;
}

.store-product-modal-main-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 24px color-mix(in srgb, #122523 20%, transparent));
}

.store-product-image-zoom-hint {
  position: absolute;
  right: 10px;
  bottom: 10px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  box-shadow: 0 4px 12px color-mix(in srgb, #122523 14%, transparent);
  color: var(--accent);
  pointer-events: none;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.store-product-image-zoom-hint svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
}

.store-product-modal-image-stage:hover .store-product-image-zoom-hint,
.store-product-modal-image-stage:focus-visible .store-product-image-zoom-hint {
  border-color: var(--accent);
  background: var(--surface);
  transform: translateY(-1px);
}

.store-product-media-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.store-product-gallery {
  display: flex;
  justify-content: center;
  gap: 9px;
}

.store-product-gallery button {
  width: 52px;
  height: 64px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 5px;
  background: var(--surface);
  cursor: pointer;
  padding: 2px;
}

.store-product-gallery button[aria-pressed="true"] {
  border-color: var(--accent);
}

.store-product-gallery img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.store-product-modal-body {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  height: 100%;
  max-height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--surface);
}

.store-product-modal-scroll {
  display: grid;
  align-content: start;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--line)) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  padding: clamp(30px, 4vw, 52px);
}

.store-product-modal-scroll::-webkit-scrollbar {
  width: 9px;
}

.store-product-modal-scroll::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 45%, var(--line));
  background-clip: padding-box;
}

.store-product-modal-scroll > header {
  display: grid;
  gap: 8px;
  padding-right: 28px;
}

.store-product-modal-scroll > header > span {
  color: #9a6a2d;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.store-product-modal-body h2 {
  margin: 0;
  color: var(--text);
  font-size: clamp(27px, 3vw, 38px);
  line-height: 1.08;
}

.store-product-modal-body header strong {
  color: var(--accent);
  font-size: 17px;
  line-height: 1.35;
}

.store-product-modal-body header p {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.store-product-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.store-product-facts > div {
  display: grid;
  gap: 4px;
  padding: 13px 0;
}

.store-product-facts > div:nth-child(even) {
  border-left: 1px solid var(--line);
  padding-left: 18px;
}

.store-product-facts dt {
  color: var(--muted);
  font-size: 10px;
  font-weight: 750;
  text-transform: uppercase;
}

.store-product-facts dd {
  margin: 0;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 700;
}

.store-product-description {
  display: grid;
  gap: 14px;
}

.store-product-description p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.65;
}

.store-product-description .store-product-lead {
  border-left: 3px solid var(--accent);
  color: var(--text);
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
  padding-left: 15px;
}

.store-product-highlights {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 2px 0 2px 18px;
}

.store-product-highlights li {
  color: var(--accent);
  padding-left: 4px;
}

.store-product-highlights b,
.store-product-highlights span {
  display: block;
  color: var(--text-soft);
  font-size: 13.5px;
  line-height: 1.5;
}

.store-product-highlights b {
  color: var(--text);
}

.store-product-description .store-product-disclaimer {
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11.5px;
  font-style: italic;
  padding-top: 14px;
}

.store-product-modal-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  box-shadow: 0 -10px 24px color-mix(in srgb, var(--text) 6%, transparent);
  padding: 16px clamp(30px, 4vw, 52px) 18px;
}

.store-product-modal-footer strong {
  color: var(--accent);
  font-size: 14px;
}

.store-product-modal-footer .primary-action {
  min-height: 42px;
}

.store-product-modal-footer--external {
  justify-content: stretch;
}

.store-product-modal-footer--upcoming {
  justify-content: flex-start;
}

.store-product-modal-footer--external .store-external-purchase-link {
  width: 100%;
}

.store-image-zoom-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(1120px, calc(100vw - 32px));
  max-width: none;
  height: min(94dvh, 980px);
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 8px;
  background: #101918;
  padding: 18px;
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.store-image-zoom-dialog[open] {
  display: block;
}

.store-image-zoom-dialog::backdrop {
  background: rgba(7, 14, 14, 0.78);
  backdrop-filter: blur(3px);
}

.store-image-zoom-dialog > img {
  position: absolute;
  inset: 18px;
  display: block;
  width: calc(100% - 36px);
  height: calc(100% - 36px);
  object-fit: contain;
}

.store-image-zoom-nav {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  transform: translateY(-50%);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(16, 25, 24, 0.82);
  color: #fff;
  cursor: pointer;
  font-size: 34px;
  line-height: 1;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.store-image-zoom-nav:hover,
.store-image-zoom-nav:focus-visible {
  border-color: rgba(255, 255, 255, 0.44);
  background: rgba(36, 62, 59, 0.96);
}

.store-image-zoom-prev {
  left: 16px;
}

.store-image-zoom-next {
  right: 16px;
}

.store-image-zoom-counter {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  left: 50%;
  min-width: 52px;
  padding: 7px 12px;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: rgba(16, 25, 24, 0.82);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.store-image-zoom-counter:empty {
  display: none;
}

.store-image-zoom-close {
  position: absolute;
  z-index: 2;
  top: 14px;
  right: 14px;
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 50%;
  background: rgba(16, 25, 24, 0.82);
  color: #fff;
  cursor: pointer;
  font-size: 25px;
}

.store-image-zoom-close:hover {
  background: rgba(36, 62, 59, 0.96);
}

.admin-store-order-lines {
  display: grid;
  gap: 10px;
}

.admin-store-order-lines > div {
  display: grid;
  gap: 3px;
}

.subscription-conversion {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(290px, 0.75fr);
  gap: 18px;
  max-width: 1120px;
}

.subscription-conversion.is-payment-hidden {
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  max-width: 820px;
}

.subscription-value-card,
.subscription-checkout-card {
  display: grid;
  align-content: start;
  gap: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: clamp(22px, 3vw, 34px);
}

.subscription-value-card {
  background: color-mix(in srgb, var(--surface) 92%, var(--accent-soft));
}

.subscription-value-card h3 {
  max-width: 660px;
  margin: 0;
  color: var(--text);
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.1;
  text-wrap: balance;
}

.subscription-value-card > p {
  max-width: 680px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}

.subscription-value-card .subscription-benefits-list strong {
  color: var(--text);
  font-weight: 700;
}

.subscription-waitlist-actions {
  display: grid;
  justify-items: start;
  gap: 10px;
  padding-top: 4px;
}

.subscription-waitlist-cta {
  width: min(100%, 320px);
  min-height: 46px;
  padding: 10px 18px;
}

.subscription-waitlist-cta:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
}

.subscription-waitlist-cta:disabled,
.subscription-waitlist-cta:disabled:hover {
  background: var(--accent);
  cursor: not-allowed;
  opacity: 0.62;
}

.subscription-waitlist-actions .subscription-availability-note {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.subscription-waitlist-active {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  padding: 16px;
}

.subscription-waitlist-active > div {
  display: grid;
  gap: 4px;
}

.subscription-waitlist-active strong {
  color: var(--accent);
  font-size: 14px;
}

.subscription-waitlist-active p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.subscription-waitlist-active .secondary-action {
  min-height: 38px;
  flex: 0 0 auto;
  padding: 7px 12px;
  font-size: 12px;
}

.subscription-waitlist-modal {
  grid-template-rows: auto auto auto;
  height: auto;
  min-height: 0;
}

.subscription-waitlist-dialog-body {
  display: grid;
  gap: 18px;
  padding: 24px 26px;
}

.subscription-waitlist-dialog-body > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.subscription-waitlist-email {
  display: grid;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  padding: 13px 14px;
}

.subscription-waitlist-email span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.subscription-waitlist-email strong {
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 15px;
}

.subscription-waitlist-consent {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.5;
}

.subscription-waitlist-consent input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 0;
  padding: 0;
  align-self: center;
  box-shadow: none;
  accent-color: var(--accent);
}

.subscription-waitlist-consent > span {
  display: block;
  min-width: 0;
  margin: 0;
}

.subscription-waitlist-consent:has(input:focus-visible) {
  outline: 3px solid color-mix(in srgb, var(--accent) 28%, transparent);
  outline-offset: 4px;
  border-radius: 4px;
}

.subscription-waitlist-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 14px 26px 18px;
}

.subscription-waitlist-dialog-actions :is(.primary-action, .secondary-action) {
  min-height: 42px;
  padding: 8px 16px;
}

.subscription-checkout-card {
  border-color: color-mix(in srgb, var(--accent) 34%, var(--line));
}

.subscription-checkout-card > div {
  display: grid;
  gap: 6px;
}

.subscription-checkout-card > div small,
.subscription-checkout-card > small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.subscription-checkout-card strong {
  color: var(--accent);
  font-size: 30px;
  line-height: 1;
}

.subscription-checkout-card p {
  margin: 0;
  color: var(--text-soft);
  font-size: 13px;
}

.subscription-checkout-card .primary-action {
  width: 100%;
  min-height: 44px;
}

@media (max-width: 980px) {
  .store-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .subscription-conversion {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 680px) {
  .store-grid {
    grid-template-columns: 1fr;
  }

  .store-cart-header {
    align-self: flex-end;
  }

  .store-product-dialog {
    width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .store-product-modal {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(250px, 42vh) minmax(0, 1fr);
    height: 100%;
    overflow: hidden;
  }

  .store-product-modal-media {
    min-height: 0;
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px;
  }

  .store-product-modal-image-stage {
    height: 100%;
  }

  .store-product-image-zoom-hint {
    right: 6px;
    bottom: 6px;
    width: 34px;
    height: 34px;
    box-shadow: 0 3px 10px color-mix(in srgb, #122523 12%, transparent);
  }

  .store-product-modal-body {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .store-product-modal-scroll {
    padding: 24px 20px 30px;
  }

  .store-product-modal-close {
    position: fixed;
  }

  .store-product-modal-footer {
    padding: 12px 20px 14px;
  }

  .store-image-zoom-dialog {
    width: 100vw;
    height: 100dvh;
    border-radius: 0;
    padding: 12px;
  }

  .store-image-zoom-dialog > img {
    inset: 12px;
    width: calc(100% - 24px);
    height: calc(100% - 24px);
  }

  .store-image-zoom-nav {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }

  .store-image-zoom-prev {
    left: 10px;
  }

  .store-image-zoom-next {
    right: 10px;
  }

  .store-image-zoom-counter {
    bottom: 12px;
  }

  .subscription-value-card h3 {
    font-size: 27px;
  }

  .subscription-value-card {
    gap: 16px;
    padding: 20px;
  }

  .subscription-waitlist-cta {
    width: 100%;
  }

  .subscription-waitlist-active {
    align-items: stretch;
    flex-direction: column;
  }

  .subscription-waitlist-active .secondary-action {
    width: 100%;
  }

  .subscription-waitlist-dialog-body {
    padding: 20px 16px;
  }

  .subscription-waitlist-dialog-actions {
    align-items: stretch;
    flex-direction: column-reverse;
    padding: 14px 16px 16px;
  }

  .subscription-waitlist-dialog-actions :is(.primary-action, .secondary-action) {
    width: 100%;
  }
}

@media (min-width: 1440px) and (min-height: 900px) {
  .landing-hero .landing-astro-preview {
    width: min(100%, 1518px);
  }

  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    width: min(100%, 1518px);
    max-height: clamp(396px, calc(100dvh - 300px), 660px);
  }
}

.landing-core-figure {
  justify-self: end;
  width: min(100%, 440px);
  aspect-ratio: 1;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.landing-core-figure::after {
  content: none;
}

.landing-core-figure > .landing-core-engraving {
  position: relative;
  display: block;
  width: min(100%, 430px);
  aspect-ratio: 560 / 552;
  overflow: hidden;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent-strong) 82%, #274161 18%);
  box-shadow:
    0 22px 52px color-mix(in srgb, var(--accent) 13%, transparent),
    0 0 0 1px color-mix(in srgb, var(--text) 10%, transparent);
}

.landing-core-figure > .landing-core-engraving::before {
  content: "";
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--surface) 92%, #f1ead6 8%);
  -webkit-mask: url("/assets/astro-observer-engraving-mask.svg?v=1") center / cover no-repeat;
  mask: url("/assets/astro-observer-engraving-mask.svg?v=1") center / cover no-repeat;
}

html[data-theme="dark"] .landing-core-figure > .landing-core-engraving {
  background: color-mix(in srgb, var(--bg) 68%, #294664 32%);
  box-shadow:
    0 22px 52px rgba(0, 0, 0, 0.2),
    0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
}

html[data-theme="dark"] .landing-core-figure > .landing-core-engraving::before {
  background: color-mix(in srgb, var(--accent) 72%, var(--text) 28%);
}

.landing-core-figure > .landing-core-wheel-source {
  display: none;
}

@media (max-width: 980px) {
  .landing-core-figure {
    justify-self: center;
  }
}

.people-info {
  flex: 1 1 auto;
  min-width: 0;
}

.people-name-row {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  margin-bottom: 4px;
}

.people-name-row b {
  min-width: 0;
  flex: 0 1 auto;
  margin-bottom: 0;
}

.person-favorite-button {
  position: relative;
  z-index: 2;
  display: grid;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  margin-top: -5px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: color-mix(in srgb, var(--muted) 76%, var(--text) 24%);
  cursor: pointer;
  font-family: "Astro Jupiter", "Segoe UI Symbol", "Noto Sans Symbols 2", sans-serif;
  font-size: 20px;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.person-favorite-button:hover,
.person-favorite-button:focus-visible {
  background: color-mix(in srgb, #b7791f 12%, var(--surface));
  color: #a66e16;
  outline: none;
  transform: scale(1.06);
}

.person-favorite-button.is-favorite {
  color: #b7791f;
}

.people-item.is-favorite {
  border-color: color-mix(in srgb, #b7791f 34%, var(--line));
}

/* Dark theme palette: centralized color-only overrides. */
html[data-theme="dark"] {
  --night-bg: var(--bg-page);
  --night-surface: var(--bg-surface);
  --night-surface-soft: var(--bg-surface-hover);
  --night-surface-muted: var(--bg-surface-hover);
  --night-panel: var(--bg-surface);
  --night-border: var(--border-subtle);
  --night-border-soft: var(--border-subtle);
  --night-border-strong: var(--border-strong);
  --night-text: var(--text-primary);
  --night-text-strong: var(--text-primary);
  --night-text-muted: var(--text-secondary);
  --night-muted: var(--text-secondary);
  --night-soft: var(--text-muted);
  --night-accent: var(--accent-gold);
  --night-gold: var(--accent-gold);
  --night-gold-soft: var(--accent-gold-muted);
  --night-teal: var(--accent-gold);
  --night-teal-dark: var(--accent-gold-muted);
  --aa-night-bg: var(--bg-page);
  --aa-night-page: var(--bg-page);
  --aa-night-surface: var(--bg-surface);
  --aa-night-surface-soft: var(--bg-surface-hover);
  --aa-night-card: var(--bg-surface);
  --aa-night-card-strong: var(--bg-surface);
  --aa-night-border: var(--border-subtle);
  --aa-night-border-soft: var(--border-subtle);
  --aa-night-text: var(--text-primary);
  --aa-night-text-strong: var(--text-primary);
  --aa-night-text-muted: var(--text-secondary);
  --aa-night-muted: var(--text-secondary);
  --aa-night-soft: var(--text-muted);
  --aa-night-accent: var(--accent-gold);
  --aa-night-gold: var(--accent-gold);
  --aa-night-teal: var(--accent-gold);
  --aa-night-teal-strong: var(--accent-gold-hover);
}

html[data-theme="dark"] body,
html[data-theme="dark"] .private-screen,
html[data-theme="dark"] .private-panel,
html[data-theme="dark"] .chat-main,
html[data-theme="dark"] .admin-main {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :is(.sidebar, .private-sidebar, .admin-sidebar) {
  background: var(--bg-sidebar) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :is(
  .private-map-active-card,
  .private-map-controls,
  .private-dashboard-card,
  .private-form-wrap,
  .people-item,
  .account-card,
  .settings-card,
  .billing-card,
  .store-product-card,
  .store-cart-drawer,
  .subscription-card,
  .subscription-summary-card,
  .subscription-status-card,
  .subscription-panel,
  .plans-card,
  .plan-card,
  .account-plan-card,
  .professional-use-panel,
  .professional-principles-panel,
  .principles-panel,
  .section-card,
  .prompt-panel,
  .final-cta
) {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .private-dashboard-card,
  .people-item,
  .store-product-card,
  .plan-card,
  .account-plan-card
):hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-strong) !important;
}

html[data-theme="dark"] :is(
  .private-subtitle,
  .private-map-active-meta,
  .private-header p,
  .private-user small,
  .people-item p,
  .people-item small,
  .chart-card-header p,
  .professional-use-panel p,
  .professional-use-panel li,
  .professional-principles-panel p,
  .professional-principles-panel li,
  .section-card p,
  .subscription-card p,
  .subscription-panel p,
  .plan-card p,
  .account-plan-card p,
  .settings-card p,
  .billing-card p,
  .store-product-card p
) {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] :is(
  .form-hint,
  .field-hint,
  .disabled,
  [aria-disabled="true"]
) {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] :is(
  input,
  select,
  textarea,
  .select-trigger,
  .person-switch-button,
  .chart-wheel-controls select
) {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :is(
  input,
  select,
  textarea,
  .select-trigger,
  .person-switch-button,
  .chart-wheel-controls select
):hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-strong) !important;
}

html[data-theme="dark"] :is(input, select, textarea, button, a):focus-visible {
  outline-color: var(--border-strong) !important;
}

html[data-theme="dark"] :is(input, select, textarea, button):disabled {
  color: var(--text-muted) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] :is(
  .private-space-nav button,
  .private-feature-nav button,
  .private-quick-nav button
) {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] :is(
  .private-space-nav button,
  .private-feature-nav button,
  .private-quick-nav button
):hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :is(
  .private-space-nav button.active,
  .private-space-nav button[aria-current="page"],
  .private-feature-nav button.active,
  .private-quick-nav button.active
) {
  background: color-mix(in srgb, var(--accent-gold-muted) 24%, var(--bg-sidebar)) !important;
  border-color: var(--accent-gold-muted) !important;
  color: var(--accent-gold) !important;
}

html[data-theme="dark"] :is(
  .primary-action:not(.danger),
  .private-sidebar-primary,
  .send-button,
  .store-cart-checkout
) {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
  color: var(--bg-sidebar) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .primary-action:not(.danger),
  .private-sidebar-primary,
  .send-button,
  .store-cart-checkout
):hover {
  background: var(--accent-gold-hover) !important;
  border-color: var(--accent-gold-hover) !important;
  color: var(--bg-sidebar) !important;
}

html[data-theme="dark"] :is(
  .eyebrow,
  .section-kicker,
  .card-kicker,
  .plan-kicker,
  .professional-use-index,
  .professional-principles-number,
  .subscription-checkout-card strong
) {
  color: var(--accent-gold) !important;
}

html[data-theme="dark"] :is(
  .secondary-action,
  .private-sidebar-secondary,
  .private-sidebar-tertiary
) {
  background: transparent !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .secondary-action,
  .private-sidebar-secondary,
  .private-sidebar-tertiary
):hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :is(
  .chart-actions button,
  .map-actions button,
  .chart-toolbar button,
  .map-toolbar button,
  .chart-icon-button,
  .map-icon-button,
  .chart-card-action-button,
  .floating-panel button,
  .floating-table button
) {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .chart-actions button,
  .map-actions button,
  .chart-toolbar button,
  .map-toolbar button,
  .chart-icon-button,
  .map-icon-button,
  .chart-card-action-button,
  .floating-panel button,
  .floating-table button
):hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--accent-gold) !important;
}

html[data-theme="dark"] :is(
  .chart-tabs a,
  .map-tabs a,
  .chart-tab,
  .map-tab,
  .chart-panel a,
  .map-panel a,
  .chart-tool-link
) {
  color: var(--accent-gold-muted) !important;
}

html[data-theme="dark"] :is(
  .chart-tabs a,
  .map-tabs a,
  .chart-tab,
  .map-tab,
  .chart-panel a,
  .map-panel a,
  .chart-tool-link
):hover,
html[data-theme="dark"] :is(
  .chart-tabs a,
  .map-tabs a,
  .chart-tab,
  .map-tab,
  .chart-panel a,
  .map-panel a,
  .chart-tool-link
).active {
  color: var(--accent-gold) !important;
}

html[data-theme="dark"] :is(
  .floating-chart-panel,
  .floating-panel,
  .floating-table,
  .aspects-panel,
  .chart-data-panel,
  .map-data-panel,
  .modal-panel
) {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

html[data-theme="dark"] :is(
  .floating-chart-panel,
  .floating-panel,
  .floating-table,
  .aspects-panel,
  .chart-data-panel,
  .map-data-panel
) :is(p, td, th, small) {
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
}

html[data-theme="dark"] :is(
  .chart-wheel-stage,
  .chart-wheel-workspace-multiple,
  .chart-viewport,
  .chart-stage,
  .chart-export-surface,
  .map-viewport,
  .map-stage,
  .map-export-surface
) {
  background: var(--bg-page) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .chart-wheel-card:not(.chart-wheel-card-triple) {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .chart-wheel-workspace,
  .chart-wheel-card
):fullscreen,
html[data-theme="dark"] :is(
  .chart-wheel-workspace,
  .chart-wheel-card
).is-chart-card-fallback-fullscreen {
  background: var(--bg-page) !important;
}

html[data-theme="dark"] .chart-bg {
  fill: var(--chart-canvas) !important;
}

html[data-theme="dark"] .chart-zodiac-segment {
  fill: color-mix(in srgb, var(--segment-color) 80%, var(--chart-canvas)) !important;
}

html[data-theme="dark"] .chart-decanate-segment {
  fill: color-mix(in srgb, var(--segment-color) 75%, var(--chart-canvas)) !important;
}

html[data-theme="dark"] .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 70%, var(--chart-canvas)) !important;
}

html[data-theme="dark"] :is(
  .chart-angle-line,
  .chart-house-line-angle,
  .nodal-angle-line,
  .chart-cusp-age-tick
) {
  stroke: var(--accent-red) !important;
}

html[data-theme="dark"] :is(
  .chart-angle-label,
  .nodal-house-year text,
  .nodal-current-age-marker text
) {
  fill: var(--accent-red) !important;
}

html[data-theme="dark"] .nodal-current-age-marker,
html[data-theme="dark"] .nodal-age-icon {
  --planet-color: var(--accent-red-strong) !important;
  color: var(--accent-red-strong) !important;
}

html[data-theme="dark"] {
  --chart-aspect-conjunction: #e59a35;
  --chart-aspect-harmonious: #3b82f6;
  --chart-aspect-quincunx: #32a866;
  --chart-aspect-tense: #ef4444;
}

html[data-theme="dark"] .chart-planet-synastry-overlay .chart-planet-exterior-label {
  fill: var(--accent-red-strong) !important;
}

html[data-theme="dark"] :is(.landing-header, .site-header) {
  background: color-mix(in srgb, var(--bg-sidebar) 94%, transparent) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .landing-hero-brand-word,
html[data-theme="dark"] .landing-hero-title-support {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .landing-hero :is(
  .aa-card-title,
  .astro-observer-title
) {
  fill: var(--text-primary) !important;
}

html[data-theme="dark"] .landing-hero :is(
  .aa-card-sub,
  .astro-observer-subtitle
) {
  fill: var(--text-secondary) !important;
}

html[data-theme="dark"] :is(
  .landing-header-toolbar,
  .landing-toolbar-actions,
  .theme-toolbar,
  .theme-switcher
) {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .landing-header-toolbar button,
  .landing-toolbar-actions button,
  .theme-choice,
  .landing-style-button,
  .landing-style-toggle,
  .style-option,
  .theme-option
) {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .landing-header-toolbar button,
  .landing-toolbar-actions button,
  .theme-choice,
  .landing-style-button,
  .landing-style-toggle,
  .style-option,
  .theme-option
):hover {
  background: var(--bg-surface-hover) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] :is(
  .landing-header-toolbar button.active,
  .landing-header-toolbar button[aria-pressed="true"],
  .landing-toolbar-actions button.active,
  .landing-toolbar-actions button[aria-pressed="true"],
  .theme-choice.active,
  .theme-choice[aria-pressed="true"],
  .landing-style-button.active,
  .landing-style-button[aria-pressed="true"],
  .landing-style-toggle.active,
  .landing-style-toggle[aria-pressed="true"],
  .style-option.active,
  .style-option[aria-pressed="true"],
  .theme-option.active,
  .theme-option[aria-pressed="true"]
) {
  background: color-mix(in srgb, var(--accent-gold-muted) 24%, var(--bg-surface)) !important;
  border-color: var(--accent-gold-muted) !important;
  color: var(--accent-gold) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .landing-hero-primary-cta,
  .hero-primary-action,
  .hero-primary-cta
) {
  background: var(--accent-gold) !important;
  border-color: var(--accent-gold) !important;
  color: var(--bg-sidebar) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .landing-hero-primary-cta,
  .hero-primary-action,
  .hero-primary-cta
):hover {
  background: var(--accent-gold-hover) !important;
  border-color: var(--accent-gold-hover) !important;
  color: var(--bg-sidebar) !important;
}

html[data-theme="dark"] :is(
  .landing-hero-secondary-cta,
  .hero-secondary-action,
  .hero-secondary-cta,
  .landing-hero-secondary,
  .home-hero-secondary,
  .secondary-cta,
  .button-secondary
) {
  background: transparent !important;
  border-color: var(--border-strong) !important;
  color: var(--text-secondary) !important;
  box-shadow: none !important;
}

html[data-theme="dark"] :is(
  .landing-hero-secondary-cta,
  .hero-secondary-action,
  .hero-secondary-cta,
  .landing-hero-secondary,
  .home-hero-secondary,
  .secondary-cta,
  .button-secondary
):hover {
  background: var(--bg-surface-hover) !important;
  border-color: var(--border-strong) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .landing-hero .landing-astro-system {
  background:
    radial-gradient(circle at 50% 46%, color-mix(in srgb, var(--accent-gold-muted) 12%, transparent), transparent 43%),
    transparent;
}

html[data-theme="dark"] .landing-hero .astroanamnesis-svg {
  color: var(--accent-gold-muted);
  filter: contrast(1.03);
}

.landing-hero .aa-dark-map-wheel-tone {
  transition: filter 0.55s ease;
}

.landing-hero .aa-dark-map-sign-overlay {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

.landing-hero .aa-dark-tropical-contrast-layer {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.55s ease;
}

#aaZodiacNormal,
#aaZodiacMemory,
#aaZodiacAquariusHouseOne {
  font-size: 28px;
  font-weight: 560;
}

#aaZodiacNormal text,
#aaZodiacMemory text,
#aaZodiacAquariusHouseOne text {
  fill: #111827;
  stroke: var(--zodiac-ink);
  stroke-width: 1.45px;
  paint-order: fill stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: var(--aa-hero-sign-counter-transform, none);
  transform-box: fill-box;
  transform-origin: center;
}

.landing-hero .astroanamnesis-svg {
  --landing-sign-stroke-width: 1.45px;
}

.landing-screen {
  --aa-planet-red: #ff0000;
  --aa-planet-navy: #1e4f8f;
  --aa-planet-green: #2f8f46;
  --aa-planet-brown: #8b5a2b;
  --aa-planet-outer: #f505f0;
  --aa-planet-earth: #ff8c00;
}

.landing-map-planet-label-sun,
.landing-map-planet-label-moon {
  --planet-color: var(--aa-planet-red) !important;
}

.landing-map-planet-label-mercury,
.landing-map-planet-label-venus,
.landing-map-planet-label-mars {
  --planet-color: var(--aa-planet-navy) !important;
}

.landing-map-planet-label-jupiter {
  --planet-color: var(--aa-planet-green) !important;
}

.landing-map-planet-label-saturn {
  --planet-color: var(--aa-planet-brown) !important;
}

.landing-map-planet-label-uranus,
.landing-map-planet-label-neptune,
.landing-map-planet-label-pluto {
  --planet-color: var(--aa-planet-outer) !important;
}

.landing-map-planet-label-earth {
  --planet-color: var(--aa-planet-earth) !important;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-anchors > :is(
  :nth-child(1),
  :nth-child(2)
) {
  --planet-color: var(--aa-planet-red) !important;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-anchors > :is(
  :nth-child(3),
  :nth-child(4),
  :nth-child(5)
) {
  --planet-color: var(--aa-planet-navy) !important;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-anchors > :nth-child(6) {
  --planet-color: var(--aa-planet-green) !important;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-anchors > :nth-child(7) {
  --planet-color: var(--aa-planet-brown) !important;
}

:is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspect-anchors > :is(
  :nth-child(8),
  :nth-child(9),
  :nth-child(10)
) {
  --planet-color: var(--aa-planet-outer) !important;
}

.landing-hero :is(.aa-sideral-planet-guides, .aa-sideral-planet-labels) > :is(
  [data-planet="Sun"],
  [data-planet="Moon"]
) {
  --planet-color: var(--aa-planet-red) !important;
}

.landing-hero :is(.aa-sideral-planet-guides, .aa-sideral-planet-labels) > [data-planet="Earth"] {
  --planet-color: var(--aa-planet-earth) !important;
}

.landing-hero :is(.aa-sideral-planet-guides, .aa-sideral-planet-labels) > :is(
  [data-planet="Mercury"],
  [data-planet="Venus"],
  [data-planet="Mars"]
) {
  --planet-color: var(--aa-planet-navy) !important;
}

.landing-hero :is(.aa-sideral-planet-guides, .aa-sideral-planet-labels) > [data-planet="Jupiter"] {
  --planet-color: var(--aa-planet-green) !important;
}

.landing-hero :is(.aa-sideral-planet-guides, .aa-sideral-planet-labels) > [data-planet="Saturn"] {
  --planet-color: var(--aa-planet-brown) !important;
}

.landing-hero :is(.aa-sideral-planet-guides, .aa-sideral-planet-labels) > :is(
  [data-planet="Uranus"],
  [data-planet="Neptune"],
  [data-planet="Pluto"]
) {
  --planet-color: var(--aa-planet-outer) !important;
}

.landing-hero :is(.aa-sideral-sequence, .aa-memory-sequence) .aa-sideral-aspect-anchors > :is(
  :nth-child(1),
  :nth-child(2)
) {
  --planet-color: var(--aa-planet-red) !important;
}

.landing-hero :is(.aa-sideral-sequence, .aa-memory-sequence) .aa-sideral-aspect-anchors > :is(
  :nth-child(3),
  :nth-child(4),
  :nth-child(5)
) {
  --planet-color: var(--aa-planet-navy) !important;
}

.landing-hero :is(.aa-sideral-sequence, .aa-memory-sequence) .aa-sideral-aspect-anchors > :nth-child(6) {
  --planet-color: var(--aa-planet-green) !important;
}

.landing-hero :is(.aa-sideral-sequence, .aa-memory-sequence) .aa-sideral-aspect-anchors > :nth-child(7) {
  --planet-color: var(--aa-planet-brown) !important;
}

.landing-hero :is(.aa-sideral-sequence, .aa-memory-sequence) .aa-sideral-aspect-anchors > :is(
  :nth-child(8),
  :nth-child(9),
  :nth-child(10)
) {
  --planet-color: var(--aa-planet-outer) !important;
}

#aaZodiacNormal text:nth-child(4n + 1) {
  --zodiac-ink: rgb(229, 115, 115);
}

#aaZodiacNormal text:nth-child(4n + 2) {
  --zodiac-ink: rgb(100, 181, 246);
}

#aaZodiacNormal text:nth-child(4n + 3) {
  --zodiac-ink: rgb(255, 241, 118);
}

#aaZodiacNormal text:nth-child(4n) {
  --zodiac-ink: rgb(129, 199, 132);
}

#aaZodiacMemory text:nth-child(4n + 1) {
  --zodiac-ink: rgb(129, 199, 132);
}

#aaZodiacMemory text:nth-child(4n + 2) {
  --zodiac-ink: rgb(255, 241, 118);
}

#aaZodiacMemory text:nth-child(4n + 3) {
  --zodiac-ink: rgb(100, 181, 246);
}

#aaZodiacMemory text:nth-child(4n) {
  --zodiac-ink: rgb(229, 115, 115);
}

#aaZodiacAquariusHouseOne text:nth-child(4n + 1) {
  --zodiac-ink: rgb(255, 241, 118);
}

#aaZodiacAquariusHouseOne text:nth-child(4n + 2) {
  --zodiac-ink: rgb(129, 199, 132);
}

#aaZodiacAquariusHouseOne text:nth-child(4n + 3) {
  --zodiac-ink: rgb(229, 115, 115);
}

#aaZodiacAquariusHouseOne text:nth-child(4n) {
  --zodiac-ink: rgb(100, 181, 246);
}

html[data-theme="dark"] .landing-hero .aa-dark-map-wheel-tone {
  --landing-source-sign-opacity: 1;
  filter: none;
}

html[data-theme="dark"] .landing-hero .aa-dark-map-sign-overlay {
  opacity: 0;
}

html[data-theme="dark"] .landing-hero .aa-dark-tropical-contrast-layer {
  opacity: 1;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-segment {
  fill: color-mix(in srgb, var(--segment-color) 80%, var(--chart-canvas)) !important;
  stroke: var(--chart-segment-line) !important;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-decanate-segment {
  fill: color-mix(in srgb, var(--segment-color) 75%, var(--chart-canvas)) !important;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-dodecatemoria-segment {
  fill: color-mix(in srgb, var(--segment-color) 70%, var(--chart-canvas)) !important;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-sign-symbol {
  fill: #111827 !important;
  stroke: var(--zodiac-ink) !important;
  stroke-width: var(--landing-sign-stroke-width, 1.9px);
  paint-order: fill stroke;
  opacity: var(--landing-source-sign-opacity, 1);
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) :is(
  .chart-decanate-symbol,
  .chart-dodecatemoria-symbol
) {
  fill: #111827 !important;
  stroke: var(--zodiac-ink) !important;
  stroke-width: 0.5px;
  paint-order: fill stroke;
  opacity: 1;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .chart-zodiac-inner,
html[data-theme="dark"] .landing-hero .aa-sideral-inner-fill,
html[data-theme="dark"] .landing-hero .aa-sideral-meditation-backdrop {
  fill: color-mix(in srgb, var(--bg-surface) 94%, var(--bg-surface-hover)) !important;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) :is(
  .chart-sign-line,
  .chart-decanate-line,
  .chart-dodecatemoria-line,
  .chart-zodiac-inner,
  .chart-ring-divider,
  .chart-exterior-ring
),
html[data-theme="dark"] .landing-hero :is(
  .aa-sideral-inner-boundary,
  .aa-sideral-aspect-ring,
  .aa-sideral-center-ring
) {
  stroke: var(--border-strong) !important;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) :is(
  .chart-degree-tick,
  .landing-map-aspect-ring,
  .chart-mini-center
) {
  stroke: color-mix(in srgb, var(--border-strong) 72%, var(--text-muted)) !important;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .landing-map-aspects {
  opacity: 1;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) :is(
  .landing-map-aspect,
  .landing-map-aspect-anchor,
  .landing-map-planet-degree-mark,
  .landing-map-planet-connector
),
html[data-theme="dark"] .landing-hero :is(
  .aa-sideral-aspect,
  .aa-sideral-aspect-anchor,
  .aa-sideral-planet-degree-mark,
  .aa-sideral-planet-connector
) {
  opacity: 0.94;
}

html[data-theme="dark"] .landing-hero :is(
  .aa-sideral-aspect-ring,
  .aa-sideral-center-ring
) {
  stroke: color-mix(in srgb, var(--border-strong) 72%, var(--text-muted)) !important;
  opacity: 0.94;
}

html[data-theme="dark"] .landing-hero .astroanamnesis-svg :is(
  .aa-card-title,
  .aa-observer-sub
) {
  fill: var(--text-primary) !important;
}

html[data-theme="dark"] .landing-hero .astroanamnesis-svg .aa-card-sub {
  fill: var(--text-secondary) !important;
}

html[data-theme="dark"] .landing-hero .astroanamnesis-svg .aa-card-sub.aa-seq {
  --aa-final-opacity: 0.9;
}

html[data-theme="dark"] :is(#landingTechnicalTropicalWheel, #landingTechnicalSideralAquariusWheel) .aa-hero-planet-label .chart-planet-glyph,
html[data-theme="dark"] .landing-hero .aa-sideral-planet-glyph {
  fill: color-mix(in srgb, var(--planet-color) 48%, var(--chart-ink)) !important;
  stroke: color-mix(in srgb, var(--planet-color) 78%, var(--chart-ink)) !important;
}

html[data-theme="dark"] .landing-hero .astroanamnesis-svg :is(
  .aa-line-soft,
  .aa-observer-ring,
  .aa-observer-ring-soft,
  .aa-line-faint
) {
  stroke: color-mix(in srgb, var(--accent-gold-muted) 38%, var(--accent-gold)) !important;
  opacity: 0.78;
}

html[data-theme="dark"] .landing-hero .astroanamnesis-svg :is(
  .aa-observer-fill,
  .aa-sideral-meditation-fill
) {
  fill: var(--accent-gold) !important;
  opacity: 0.96;
}

:is(.chart-inline-table, .floating-table, .chart-mini-aspect-grid) .astro-table-color {
  color: var(--astro-table-color) !important;
}

html[data-theme="dark"] :is(.chart-inline-table, .floating-table, .chart-mini-aspect-grid) .astro-table-color {
  color: var(--astro-table-color) !important;
}

html[data-theme="dark"] :is(.chart-inline-table, .floating-table, .chart-mini-aspect-grid) .astro-table-planet-color {
  color: color-mix(in srgb, var(--astro-table-color) 48%, var(--chart-ink)) !important;
}

html[data-theme="dark"] :is(.chart-inline-table, .floating-table, .chart-mini-aspect-grid) .astro-table-zodiac-color {
  color: var(--astro-table-chart-color, var(--astro-table-color)) !important;
}

/* Mobile landing fit: allow the hero grid and its wide diagram to shrink to the viewport. */
@media (max-width: 860px) {
  .landing-hero.home-section--hero,
  .landing-hero .landing-hero-inner,
  .landing-hero .landing-astro-preview,
  .landing-hero .landing-astro-system {
    min-width: 0;
    max-width: 100%;
  }

  .landing-hero .landing-hero-inner,
  .landing-hero .landing-astro-preview,
  .landing-hero .landing-astro-system,
  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    width: 100%;
  }

  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    display: block;
    height: auto;
    margin-inline: auto;
  }
}

@media (max-width: 520px) {
  .landing-hero.home-section--hero {
    padding-inline: 16px;
  }

  .landing-hero .landing-hero-copy--brand-first,
  .landing-hero .landing-hero-subcopy,
  .landing-hero .landing-hero-support {
    width: 100%;
    max-width: 100%;
  }

  .landing-hero .landing-hero-brand-word {
    font-size: clamp(27px, 8.6vw, 36px);
    white-space: nowrap;
  }

  .landing-hero .landing-hero-title-support {
    font-size: clamp(19px, 5.4vw, 24px);
  }

  .landing-hero .landing-hero-cta-row {
    width: min(100%, 320px);
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .landing-hero .landing-hero-primary-cta,
  .landing-hero .landing-hero-secondary-cta {
    width: 100%;
  }
}

/* Private area on mobile: compact app bar with an off-canvas navigation drawer. */
.private-mobile-header,
.private-sidebar-backdrop,
.private-sidebar-close-icon {
  display: none;
}

@media (max-width: 860px) {
  .private-screen {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    height: auto;
    overflow: visible;
    padding-top: 64px;
  }

  .private-screen.sidebar-collapsed {
    display: block;
    grid-template-columns: none;
  }

  .private-mobile-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 58;
    display: flex;
    align-items: center;
    height: 64px;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    padding: 0 66px 0 18px;
    backdrop-filter: blur(14px);
  }

  .private-mobile-brand {
    min-width: 0;
    overflow: hidden;
    font-size: 17px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .private-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: 72;
    display: flex;
    width: min(86vw, 320px);
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    max-height: 100dvh;
    overflow: hidden;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    background: var(--surface);
    padding: 14px 18px 18px;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    box-shadow: 18px 0 42px color-mix(in srgb, #101820 18%, transparent);
    transition: transform 0.22s ease, opacity 0.18s ease;
  }

  .private-screen.sidebar-collapsed .private-sidebar {
    display: flex;
    width: min(86vw, 320px);
    min-width: 0;
    padding: 18px;
    border-right: 1px solid var(--line);
    opacity: 0;
    pointer-events: none;
    transform: translateX(-104%);
  }

  .private-sidebar-scroll,
  .private-sidebar > div:first-child {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .private-sidebar-top .sidebar-logo {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding-right: 48px;
  }

  .private-space-nav,
  .private-feature-nav,
  .private-quick-nav {
    grid-template-columns: 1fr;
  }

  .private-feature-nav p,
  .private-quick-nav p {
    grid-column: auto;
  }

  .private-space-nav button,
  .private-feature-nav button,
  .private-quick-nav button {
    justify-content: flex-start;
    min-height: 42px;
    padding: 0 12px;
    text-align: left;
  }

  .private-sidebar-bottom {
    margin-top: auto;
  }

  .private-sidebar-collapse-button,
  .private-screen.sidebar-collapsed .private-sidebar-collapse-button {
    position: fixed;
    top: 14px;
    right: 16px;
    left: auto;
    z-index: 82;
    width: 36px;
    height: 36px;
  }

  .private-screen:not(.sidebar-collapsed) .private-sidebar-collapse-button {
    right: auto;
    left: min(calc(86vw - 52px), 268px);
  }

  .private-screen:not(.sidebar-collapsed) .private-sidebar-menu-icon {
    display: none;
  }

  .private-screen:not(.sidebar-collapsed) .private-sidebar-close-icon {
    display: block;
  }

  .private-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 66;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    background: color-mix(in srgb, #101820 42%, transparent);
    padding: 0;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.2s ease;
  }

  .private-screen.sidebar-collapsed .private-sidebar-backdrop {
    opacity: 0;
    pointer-events: none;
  }

  .private-sidebar-backdrop:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -4px;
  }

  .private-panel {
    width: 100%;
    min-width: 0;
    min-height: calc(100dvh - 64px);
    height: auto;
    overflow: visible;
    padding: 24px 18px 44px;
  }

  #private-list-section .private-header {
    gap: 20px;
  }

  #private-list-section .private-add {
    width: 100%;
  }

  #private-list-section .form-status:empty {
    display: none;
  }

  .people-toolbar {
    margin-top: 20px;
  }

  .people-toolbar input {
    width: 100%;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .private-sidebar,
  .private-sidebar-backdrop {
    transition: none;
  }
}

/* Mobile maps: keep every chart complete inside the usable viewport. */
@media (max-width: 860px) {
  .private-screen.private-maps-active {
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .private-screen.private-maps-active .private-panel {
    width: 100%;
    height: calc(100dvh - 64px);
    min-height: 0;
    overflow: hidden;
    padding: 0;
  }

  .private-maps-active .private-maps-section,
  .private-maps-active .private-maps-stage,
  .private-maps-active .private-maps-chat,
  .private-maps-active .private-chart-wheel-inline,
  .private-maps-active .chart-wheel-stage {
    width: 100%;
    min-width: 0;
    min-height: 0;
  }

  .private-maps-active .private-maps-section,
  .private-maps-active .private-maps-stage,
  .private-maps-active .private-maps-chat,
  .private-maps-active .private-chart-wheel-inline,
  .private-maps-active .chart-wheel-stage {
    height: 100%;
  }

  .private-maps-active .private-maps-section {
    grid-template-rows: minmax(0, 1fr);
  }

  .private-maps-active .private-maps-stage {
    overflow: hidden;
  }

  .chart-wheel-stage.is-full-chart {
    display: grid;
    overflow: hidden;
    padding: 0;
  }

  .chart-wheel-stage.is-full-chart.has-exterior-chart-labels {
    overflow: hidden;
    padding: 0;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:not(.chart-wheel-workspace-multiple),
  .chart-wheel-stage.is-full-chart .chart-wheel-main,
  .chart-wheel-stage.is-full-chart .chart-wheel-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 0;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) {
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    overflow: hidden;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card {
    overflow: hidden;
  }

  .chart-wheel-stage.is-full-chart .chart-svg-wrap-only {
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 44px 6px 8px;
  }

  .chart-wheel-stage.is-full-chart .chart-svg-wrap-only .chart-wheel-svg,
  .chart-wheel-stage.is-full-chart .chart-wheel-card-exterior-labels .chart-svg-wrap-only .chart-wheel-svg {
    width: min(100%, calc(100dvh - 126px));
    height: auto;
    max-width: 100%;
    max-height: calc(100dvh - 126px);
    aspect-ratio: 1 / 1;
    overflow: visible;
  }

  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-width: 0;
    min-height: 0;
  }

  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 140;
  }

  .chart-wheel-workspace:fullscreen .chart-svg-wrap-only,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-svg-wrap-only,
  .chart-wheel-card:fullscreen .chart-svg-wrap-only,
  .chart-wheel-card.is-chart-card-fallback-fullscreen .chart-svg-wrap-only {
    padding: 44px 6px 6px;
  }

  .chart-wheel-workspace:fullscreen .chart-svg-wrap-only .chart-wheel-svg,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-svg-wrap-only .chart-wheel-svg,
  .chart-wheel-card:fullscreen .chart-svg-wrap-only .chart-wheel-svg,
  .chart-wheel-card.is-chart-card-fallback-fullscreen .chart-svg-wrap-only .chart-wheel-svg {
    width: min(calc(100vw - 12px), calc(100dvh - 56px));
    height: auto;
    max-width: calc(100vw - 12px);
    max-height: calc(100dvh - 56px);
  }

  .chart-wheel-stage.is-multiple-chart {
    display: block;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    padding: 12px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-main,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-main {
    display: block;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "tropical"
      "sideral"
      "memoria";
    gap: 16px;
    margin: 0 auto;
    padding-bottom: 10px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    grid-area: topbar;
    position: static;
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    overflow-x: auto;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-composite {
    align-items: flex-start;
    flex-direction: column;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions,
  .chart-wheel-stage.is-multiple-chart .chart-tools-multiple {
    width: max-content;
    max-width: 100%;
    min-width: 0;
    justify-content: flex-start;
    gap: 10px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-left {
    grid-area: tropical;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-top {
    grid-area: sideral;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-right {
    grid-area: memoria;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    gap: 8px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: 10px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    position: static;
    display: flex;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    margin: 0;
    transform: none;
    text-align: left;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    display: block;
    min-width: 0;
    text-align: left;
  }

  .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple,
  .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple .chart-wheel-svg {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }

  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen {
    display: block;
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    max-height: 100dvh;
    min-width: 0;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 12px;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-main,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-main,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    display: grid;
    width: 100%;
    max-width: 100%;
    height: auto;
    min-width: 0;
    min-height: 0;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "tropical"
      "sideral"
      "memoria";
    gap: 16px;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot {
    position: static;
    width: 100%;
    max-width: 100%;
    transform: none;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar {
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .chart-wheel-stage.is-full-chart.is-nodal-chart {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 8px;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace,
  .chart-wheel-stage.is-nodal-chart .chart-wheel-main,
  .chart-wheel-stage.is-nodal-chart .chart-wheel-card {
    width: 100%;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-card-nodal {
    padding: 10px;
  }

  .chart-wheel-stage.is-nodal-chart .nodal-wheel-stack {
    width: calc(100% - 8px);
    max-width: 620px;
    margin: 52px auto 72px;
  }

  .private-maps-active .floating-chart-panel:not([hidden]) {
    position: fixed !important;
    inset: 74px 10px 10px !important;
    z-index: 150 !important;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto;
    transform: none !important;
  }

  .chart-wheel-workspace:fullscreen .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]) {
    inset: 10px !important;
  }

}

@media (max-width: 520px) {
  .chart-wheel-stage.is-multiple-chart {
    padding: 8px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    gap: 12px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    padding: 8px;
  }
}

/* Mobile maps interaction: persistent actions, visible charts and compact data sheets. */
@media (max-width: 860px) {
  .private-maps-active .private-maps-stage,
  .private-maps-active .chart-wheel-stage {
    overscroll-behavior-x: contain;
    overscroll-behavior-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .private-maps-active .chart-wheel-stage.is-full-chart:not(.is-nodal-chart) {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .chart-wheel-stage.is-full-chart:not(.is-nodal-chart) .chart-wheel-workspace:not(.chart-wheel-workspace-multiple),
  .chart-wheel-stage.is-full-chart:not(.is-nodal-chart) .chart-wheel-main,
  .chart-wheel-stage.is-full-chart:not(.is-nodal-chart) .chart-wheel-card {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header {
    position: sticky;
    z-index: 18;
    top: 0;
    right: auto;
    left: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    min-height: 0;
    align-items: start;
    gap: 6px;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
    backdrop-filter: blur(12px);
    margin: 0;
    padding: 8px 10px;
    pointer-events: auto;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header > div:not(.chart-card-header-actions) {
    display: block;
    width: 100%;
    min-width: 0;
    padding-inline: 4px;
    text-align: left;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header h3 {
    overflow: hidden;
    font-size: 18px;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header p {
    overflow: hidden;
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card > .chart-card-header > .chart-card-header-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    gap: 6px;
    margin-left: 0;
  }

  .chart-wheel-stage.is-full-chart .chart-card-header-actions > .chart-tools {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 30px;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0 4px;
    scrollbar-width: none;
  }

  .chart-wheel-stage.is-full-chart .chart-card-header-actions > .chart-tools::-webkit-scrollbar {
    display: none;
  }

  .chart-wheel-stage.is-full-chart .chart-card-header-actions > .chart-card-actions {
    position: relative;
    z-index: 2;
    display: inline-flex;
    flex: 0 0 auto;
    gap: 5px;
    border-left: 1px solid var(--line);
    background: var(--surface);
    padding: 0 0 0 7px;
  }

  .chart-wheel-stage.is-full-chart .chart-card-action-button:not(.chart-card-interpret-button) {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .chart-wheel-stage.is-full-chart .chart-svg-wrap-only {
    display: flex;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 156px);
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 8px;
  }

  .chart-wheel-stage.is-full-chart .chart-svg-wrap-only .chart-wheel-svg,
  .chart-wheel-stage.is-full-chart .chart-wheel-card-exterior-labels .chart-svg-wrap-only .chart-wheel-svg {
    width: min(calc(100vw - 16px), calc(100dvh - 116px));
    height: auto;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 116px);
    aspect-ratio: 1 / 1;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card-exterior-labels .chart-svg-wrap-only {
    padding-right: 22px;
    padding-left: 22px;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-card-exterior-labels .chart-svg-wrap-only .chart-wheel-svg {
    width: min(calc(100vw - 44px), calc(100dvh - 132px));
    max-width: calc(100vw - 44px);
    max-height: calc(100dvh - 132px);
  }

  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen {
    display: block;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .chart-wheel-stage.is-full-chart .chart-wheel-workspace:fullscreen,
  .chart-wheel-stage.is-full-chart .chart-wheel-workspace.is-chart-card-fallback-fullscreen {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .chart-wheel-workspace:fullscreen .chart-wheel-main,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-wheel-main,
  .chart-wheel-workspace:fullscreen .chart-wheel-card,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-wheel-card {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .chart-wheel-workspace:fullscreen .chart-svg-wrap-only,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-svg-wrap-only {
    min-height: calc(100dvh - 44px);
    padding: 8px;
  }

  .chart-wheel-workspace:fullscreen .chart-svg-wrap-only .chart-wheel-svg,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .chart-svg-wrap-only .chart-wheel-svg {
    width: min(calc(100vw - 16px), calc(100dvh - 60px));
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 60px);
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    overflow: visible;
    min-height: 42px;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    padding-inline: 0;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-tools-multiple,
  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-tools-multiple {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    min-height: 32px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px;
    scrollbar-width: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link {
    flex: 0 0 auto;
    white-space: nowrap;
    line-height: 1.1;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-tools-multiple::-webkit-scrollbar,
  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-tools-multiple::-webkit-scrollbar {
    display: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-card-actions,
  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-card-actions {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    border-left: 1px solid var(--line);
    padding: 0 0 0 8px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-card-actions-multiple .chart-card-action-button:not(.chart-card-interpret-button) {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-card > .chart-card-header {
    position: sticky;
    top: 0;
  }

  .chart-wheel-stage.is-nodal-chart .nodal-wheel-stack {
    margin-top: 16px;
  }

  .private-maps-active .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace:fullscreen .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace-multiple:fullscreen .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]) {
    position: fixed !important;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 160 !important;
    display: grid;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(62dvh, 520px) !important;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 !important;
    transform: none !important;
  }

  .private-maps-active .floating-panel-header {
    position: sticky;
    z-index: 3;
    top: 0;
    min-height: 46px;
    cursor: default;
    padding: 8px 10px 8px 14px;
  }

  .private-maps-active .floating-panel-header h3 {
    font-size: 15px;
  }

  .private-maps-active .floating-panel-header button {
    width: 34px;
    min-height: 34px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
  }

  .private-maps-active .floating-panel-content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .private-maps-active .floating-panel-content > table,
  .private-maps-active .floating-panel-content > .chart-inline-table,
  .private-maps-active .floating-panel-content .aspect-matrix-table {
    width: max-content;
    min-width: 100%;
  }

  .private-maps-active .floating-table th,
  .private-maps-active .floating-table td,
  .private-maps-active .floating-panel-content .chart-inline-table td {
    height: 26px;
    line-height: 26px;
  }

  .private-maps-active .floating-resizer {
    display: none;
  }
}

/* Match the nodal wheel scale to individual charts on compact desktop/tablet viewports. */
@media (min-width: 641px) and (max-width: 860px) and (min-height: 601px) {
  .chart-wheel-stage.is-nodal-chart .chart-wheel-card-nodal {
    padding-right: 0;
    padding-left: 0;
  }

  .chart-wheel-stage.is-nodal-chart .nodal-wheel-stack {
    width: min(100%, calc(100vw - 16px), calc(100vh - 116px));
    width: min(100%, calc(100vw - 16px), calc(100dvh - 116px));
    max-width: none;
  }
}

@media (min-width: 1281px) {
  .chart-wheel-card-nodal .chart-tools-scroll-hint.is-visible {
    position: relative;
    z-index: 3;
    display: inline-flex;
    width: 18px;
    min-width: 18px;
    height: 30px;
    min-height: 30px;
    flex: 0 0 18px;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    cursor: pointer;
  }

  .chart-wheel-card-nodal .chart-tools-scroll-hint-next.is-visible::before {
    content: "\203A";
  }

  .chart-wheel-card-nodal .chart-tools-scroll-hint-prev.is-visible::before {
    content: "\2039";
  }
}

/* Smartphone maps: reuse the sidebar chart context in the main content flow. */
.private-map-mobile-context-slot {
  display: none;
}

.private-map-mobile-offer-slot {
  display: none;
}

@media (max-width: 640px) {
  .private-screen.private-maps-active {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  .private-screen.private-maps-active .private-panel {
    height: auto;
    min-height: calc(100dvh - 64px);
    overflow: visible;
    padding: 0 0 24px;
  }

  .private-maps-active .private-maps-section {
    display: grid;
    grid-template-rows: auto auto auto auto;
    width: 100%;
    height: auto;
    min-height: calc(100dvh - 64px);
    gap: 12px;
    overflow: visible;
  }

  .private-map-mobile-context-slot {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px 12px 0;
  }

  .private-map-mobile-context-slot .private-map-context {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 44px;
    align-items: end;
    column-gap: 8px;
    row-gap: 10px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    border-top: 0;
    padding: 0;
  }

  .private-map-mobile-context-slot .private-map-active-card {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(160px, 1.45fr);
    align-items: center;
    column-gap: 10px;
    row-gap: 0;
    padding: 10px 12px;
  }

  .private-map-mobile-context-slot .private-map-active-head,
  .private-map-mobile-context-slot .private-map-active-head > div,
  .private-map-mobile-context-slot .private-map-active-meta {
    min-width: 0;
  }

  .private-map-mobile-context-slot .private-map-active-head > div {
    gap: 3px;
  }

  .private-map-mobile-context-slot .private-map-active-meta {
    align-self: center;
    gap: 2px;
    font-size: 11px;
    line-height: 1.25;
    text-align: right;
  }

  .private-map-mobile-context-slot .private-map-active-meta > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .private-map-mobile-context-slot .private-map-control-card {
    grid-column: 1;
  }

  .private-map-mobile-context-slot :is(
    .private-map-active-card,
    .private-map-control-card,
    .private-map-controls,
    .private-map-actions,
    .private-map-offer
  ) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .private-map-mobile-context-slot .private-map-actions {
    grid-column: 2;
    align-self: end;
    justify-self: end;
    width: 44px;
    margin-top: 0;
  }

  .private-map-mobile-context-slot .private-map-controls {
    padding: 10px;
  }

  .private-map-mobile-context-slot .chart-wheel-controls {
    grid-template-columns: minmax(0, 1fr);
  }

  .private-map-mobile-context-slot .chart-wheel-controls > label:first-child {
    grid-column: 1;
  }

  .private-map-mobile-context-slot .chart-wheel-controls .chart-type-help {
    display: none;
  }

  .private-map-mobile-context-slot #private-map-prompt {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    border-radius: 9px;
    padding: 0;
  }

  .private-map-mobile-context-slot #private-map-prompt > span {
    display: none;
  }

  .private-map-mobile-context-slot #private-map-prompt > svg {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .private-map-mobile-context-slot .chart-export-actions {
    display: none;
  }

  .private-map-mobile-offer-slot {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .private-map-mobile-offer-slot .private-map-offer {
    width: calc(100% - 24px);
    max-width: calc(100% - 24px);
    min-width: 0;
    margin: 0 12px;
  }

  .private-maps-active .private-maps-stage,
  .private-maps-active .private-maps-chat {
    width: 100%;
    max-width: 100%;
    height: calc(100dvh - 64px);
    min-height: 560px;
    overflow: hidden;
  }
}

@media (max-width: 860px) {
  #toggle-private-sidebar {
    border-color: color-mix(in srgb, var(--accent-line) 72%, var(--line));
    border-radius: 9px;
    background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
    color: var(--accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 7%, transparent);
  }

  #toggle-private-sidebar > svg {
    display: none !important;
    grid-area: 1 / 1;
    width: 19px;
    height: 19px;
  }

  #toggle-private-sidebar[aria-expanded="false"] .private-sidebar-menu-icon {
    display: block !important;
  }

  #toggle-private-sidebar[aria-expanded="true"] .private-sidebar-close-icon {
    display: block !important;
  }

  #toggle-private-sidebar:hover,
  #toggle-private-sidebar:focus-visible {
    border-color: var(--accent-line);
    background: var(--accent-soft);
    color: var(--accent-strong);
  }
}

/* Smartphone people list: compact identity block with a single action row. */
@media (max-width: 640px) {
  .people-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
    min-height: 0;
    padding: 12px;
  }

  .people-info {
    width: 100%;
    min-width: 0;
  }

  .people-name-row {
    align-items: center;
    gap: 5px;
    margin-bottom: 3px;
  }

  .people-name-row b {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .person-favorite-button {
    margin-top: -2px;
  }

  .people-item small {
    overflow: hidden;
    font-size: 12.5px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .people-solar-watermark {
    width: 112px;
    height: 112px;
    opacity: 0.16;
  }

  .people-item:hover .people-solar-watermark,
  .people-item:focus-visible .people-solar-watermark {
    opacity: 0.21;
  }

  .people-actions {
    display: grid;
    grid-template-columns: minmax(0, 1.16fr) repeat(2, minmax(0, 1fr));
    width: 100%;
    gap: 8px;
  }

  .people-actions .btn-small {
    width: 100%;
    min-width: 0;
    min-height: 40px;
    padding-inline: 8px;
  }
}

.chart-card-more-menu,
.chart-card-mobile-summary {
  display: none;
}

/* Keep the desktop map controls together as one contextual tool. */
@media (min-width: 641px) {
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-card-mobile-summary {
    display: none !important;
  }

  .private-sidebar .private-map-context {
    gap: 0;
    overflow: hidden;
    margin-top: 0;
    border: 1px solid color-mix(in srgb, var(--line) 90%, var(--accent-line));
    border-radius: 8px;
    background: color-mix(in srgb, var(--surface) 97%, var(--accent-soft));
    padding: 0;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--text) 4%, transparent);
  }

  .private-sidebar .private-map-active-card {
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    border-radius: 0;
    background: transparent;
    padding: 13px 12px 12px;
    box-shadow: none;
  }

  .private-sidebar .private-map-control-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 12px;
    box-shadow: none;
  }

  .private-sidebar .private-map-controls {
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .private-sidebar .private-map-actions {
    gap: 10px;
    margin: 0;
    border-top: 1px solid color-mix(in srgb, var(--line) 88%, transparent);
    padding: 12px;
  }

  .private-sidebar .private-map-offer {
    margin: 2px 0 0;
  }
}

/* Final smartphone map composition overrides. */
@media (max-width: 640px) {
  .private-screen.private-maps-active {
    padding-top: 56px;
  }

  .private-maps-active .private-mobile-header {
    height: 56px;
    padding: 0 68px 0 16px;
  }

  .private-maps-active .private-sidebar-collapse-button,
  .private-maps-active.sidebar-collapsed .private-sidebar-collapse-button {
    top: 6px;
    right: 12px;
    width: 44px;
    height: 44px;
  }

  .private-maps-active .private-panel,
  .private-maps-active .private-maps-section {
    min-height: calc(100dvh - 56px);
  }

  .private-maps-active .private-map-mobile-context-slot {
    padding: 12px 16px 0;
  }

  .private-map-mobile-context-slot .private-map-context {
    grid-template:
      "active active" auto
      "control prompt" auto /
      minmax(0, 1fr) 44px;
    align-items: end;
    gap: 12px 10px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: var(--surface);
    padding: 14px;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--text) 4%, transparent);
  }

  .private-map-mobile-context-slot .private-map-active-card {
    position: relative;
    grid-area: active;
    grid-template-columns: minmax(0, 1fr);
    gap: 5px;
    min-height: 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
    padding: 0 0 12px;
    box-shadow: none;
  }

  .private-map-mobile-context-slot .private-map-active-head,
  .private-map-mobile-context-slot .private-map-active-head > div,
  .private-map-mobile-context-slot .private-map-active-meta {
    width: 100%;
    min-width: 0;
  }

  .private-map-mobile-context-slot .private-map-active-head > div {
    gap: 3px;
  }

  .private-map-mobile-context-slot .private-map-eyebrow {
    color: var(--text-soft);
    font-size: 10px;
    letter-spacing: 0;
  }

  .private-map-mobile-context-slot .active-person-trigger {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    margin: 0;
    padding: 8px 36px 8px 12px;
    color: var(--text);
    font-size: 14px;
    font-weight: 560;
  }

  .private-map-mobile-context-slot .active-person-trigger::before {
    position: absolute;
    inset: 0;
    border-radius: 10px;
    content: none;
  }

  .private-map-mobile-context-slot .private-map-active-card:has(.active-person-trigger:focus-visible) {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .private-map-mobile-context-slot .private-map-active-meta {
    display: grid;
    gap: 2px;
    color: var(--text-soft);
    font-size: 12.5px;
    line-height: 1.35;
    text-align: left;
  }

  .private-map-mobile-context-slot .private-map-active-meta > span {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .private-map-mobile-context-slot .private-map-mobile-optional {
    display: none;
  }

  .private-map-mobile-context-slot .private-map-control-card {
    grid-area: control;
    align-self: end;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .private-map-mobile-context-slot .private-map-controls {
    min-height: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .private-map-mobile-context-slot .chart-wheel-controls > label:first-child {
    gap: 6px;
  }

  .private-map-mobile-context-slot .chart-wheel-controls > label:first-child > span {
    height: 12px;
    color: var(--text-soft);
    font-size: 0;
    line-height: 1;
    letter-spacing: 0;
  }

  .private-map-mobile-context-slot .chart-wheel-controls > label:first-child > span::after {
    display: none;
    content: none;
  }

  .private-map-mobile-context-slot .chart-wheel-controls select {
    width: 100%;
    min-height: 48px;
    border-radius: 10px;
    padding-right: 36px;
    font-size: 14px;
  }

  .private-map-mobile-context-slot .private-map-actions {
    grid-area: prompt;
    align-self: start;
    width: 44px;
    margin: 18px 0 0;
  }

  .private-map-mobile-context-slot #private-map-chat,
  .private-map-mobile-context-slot #private-map-list {
    display: none;
  }

  .private-map-mobile-context-slot #private-map-prompt {
    width: 44px;
    min-width: 44px;
    height: 48px;
    min-height: 48px;
    border-radius: 10px;
  }

  .private-map-mobile-context-slot #private-map-prompt > svg {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart {
    padding: 0 16px 16px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    gap: 12px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 52px;
    overflow: visible;
    border: 0;
    background: transparent;
    padding: 6px 0;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-tools-multiple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-tools-multiple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 3px;
    width: 100%;
    min-width: 0;
    min-height: 44px;
    overflow: visible;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent-soft) 56%, var(--surface-soft));
    padding: 4px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link {
    width: 100%;
    min-width: 0;
    min-height: 36px;
    border: 0;
    border-radius: 7px;
    padding: 0 4px;
    color: var(--text-soft);
    font-size: 12px;
    font-weight: 650;
    line-height: 1;
    text-align: center;
    text-decoration: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link-context {
    display: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link:is(:hover, :focus-visible, .is-active) {
    background: var(--surface);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 8%, transparent);
    color: var(--accent);
    font-weight: 750;
    outline: 0;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-card-actions,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-card-actions {
    gap: 6px;
    padding: 0;
  }

  .private-maps-active .chart-card-action-direct-export {
    display: none;
  }

  .private-maps-active .chart-card-more-menu {
    position: relative;
    display: block;
  }

  .private-maps-active .chart-card-more-menu > summary {
    list-style: none;
  }

  .private-maps-active .chart-card-more-menu > summary::-webkit-details-marker {
    display: none;
  }

  .private-maps-active .chart-card-actions-multiple .chart-card-action-button:not(.chart-card-interpret-button) {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    box-shadow: none;
  }

  .private-maps-active .chart-card-actions-multiple .chart-card-action-button svg {
    width: 17px;
    height: 17px;
  }

  .private-maps-active .chart-card-more-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: max-content;
    min-width: 180px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 14%, transparent);
    padding: 5px;
  }

  .private-maps-active .chart-card-more-popover button {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 42px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 0 10px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
  }

  .private-maps-active .chart-card-more-popover button:is(:hover, :focus-visible) {
    background: var(--accent-soft);
    color: var(--accent);
    outline: 0;
  }

  .private-maps-active .chart-card-more-popover svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    gap: 4px;
    border-radius: 10px;
    padding: 8px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    order: -1;
    min-height: 24px;
    align-items: center;
    padding: 0 2px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    width: 100%;
    min-width: 0;
    text-align: center;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple h3,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-subtitle {
    display: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-mobile-summary {
    display: block;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    color: var(--text-soft);
    font-size: 12.5px;
    font-weight: 650;
    line-height: 1.3;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Outside fullscreen the two nodal links may wrap instead of using scroll arrows. */
@media (min-width: 861px) {
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-main {
    display: grid;
    width: 100%;
    justify-items: stretch;
    align-items: start;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal {
    width: 100%;
    max-width: none;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .nodal-wheel-stack {
    width: min(100%, 1160px, calc(100dvh - 84px));
    margin-top: 28px;
    margin-bottom: 64px;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    .chart-card-header-actions
    > .chart-tools {
    flex-wrap: wrap;
    align-content: center;
    overflow: visible;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-tools-scroll-hint {
    display: none !important;
  }
}

/* Match multiple-chart mobile tools to the lighter individual-chart toolbar. */
@media (max-width: 640px) {
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    overflow: visible;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    background: var(--surface);
    padding: 4px 2px 8px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-composite {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-subject {
    align-items: stretch;
    flex-direction: column;
    gap: 5px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-composite > .chart-composite-participants {
    width: 100%;
    padding: 0 4px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-subject > .chart-multiple-participants {
    width: 100%;
    padding: 0 4px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-composite > .chart-multiple-topbar-actions {
    border-bottom: 0;
    padding: 0;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-subject > .chart-multiple-topbar-actions {
    border-bottom: 0;
    padding: 0;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-tools-multiple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-tools-multiple {
    display: flex;
    width: auto;
    min-width: 0;
    min-height: 34px;
    flex: 1 1 auto;
    grid-template-columns: none;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: 0;
    background: transparent;
    padding: 0 4px;
    scrollbar-width: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link {
    width: auto;
    min-width: max-content;
    min-height: 34px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    color: var(--accent);
    font-size: 12px;
    font-weight: 560;
    line-height: 1.1;
    text-align: left;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    white-space: nowrap;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link-context {
    display: inline;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-tools-multiple .chart-tool-link:is(:hover, :focus-visible, .is-active) {
    background: transparent;
    box-shadow: none;
    color: var(--accent-strong);
    font-weight: 700;
    outline: 0;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar > .chart-card-actions,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-actions > .chart-card-actions {
    flex: 0 0 auto;
    gap: 5px;
    border-left: 1px solid var(--line);
    padding: 0 0 0 8px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-card-actions-multiple .chart-card-action-button:not(.chart-card-interpret-button) {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 999px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-card-actions-multiple .chart-card-action-button svg {
    width: 15px;
    height: 15px;
  }
}

/* Keep the three Astroanamnesis maps in one readable row on landscape phones. */
@media (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .chart-wheel-stage.is-multiple-chart,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen {
    --landscape-multiple-card-width: clamp(
      205px,
      min(calc((100vw - 40px) / 3), calc(100dvh - 180px)),
      340px
    );
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-main,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-main,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-main,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    width: max-content;
    max-width: none;
    min-width: 100%;
    height: auto;
    min-height: 0;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-triple,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    display: grid;
    grid-template-columns: repeat(3, var(--landscape-multiple-card-width));
    grid-template-areas:
      "topbar topbar topbar"
      "tropical sideral memoria";
    gap: 10px 12px;
    align-items: start;
    margin: 0;
    padding: 0 0 8px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar,
  .chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar {
    grid-area: topbar !important;
    position: sticky;
    left: 0;
    justify-self: start;
    width: min(calc(100vw - 24px), 100%);
    max-width: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot,
  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    transform: none;
    scroll-snap-align: start;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-left,
  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-left,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-left {
    grid-area: tropical !important;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-top,
  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-top,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-top {
    grid-area: sideral !important;
  }

  .chart-wheel-stage.is-multiple-chart .chart-triple-slot-right,
  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-right,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-right {
    grid-area: memoria !important;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    gap: 3px;
    padding: 6px;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple .chart-card-header,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple .chart-card-header {
    position: static;
    width: 100%;
    max-width: 100%;
    margin: 0;
    transform: none;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    min-height: 24px;
    align-items: center;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: baseline;
    gap: 6px;
    overflow: hidden;
    white-space: nowrap;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple h3 {
    flex: 0 0 auto;
    margin: 0;
    font-size: 16px;
    line-height: 1.25;
  }

  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-subtitle,
  .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-mobile-summary {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 11.5px;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple,
  .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple .chart-wheel-svg,
  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple,
  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple .chart-wheel-svg,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple .chart-wheel-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
  }

  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen {
    --landscape-multiple-card-width: clamp(
      220px,
      min(calc((100vw - 28px) / 3), calc(100dvh - 56px)),
      420px
    );
    padding: 4px 6px 8px;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    gap: 4px 8px;
    padding-bottom: 0;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-main,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-main,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    height: 100%;
    min-height: 100%;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot {
    align-self: center;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar {
    width: min(calc(100vw - 12px), 100%);
    min-height: 38px;
    border-bottom: 0;
    background: var(--surface-soft);
    padding-block: 2px;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-composite-participants,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-composite-participants {
    display: none;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar-composite,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar-composite {
    flex-direction: row;
    justify-content: flex-end;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple {
    display: block;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple .chart-card-header,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple .chart-card-header {
    display: none;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple {
    margin: 0;
  }
}

/* Landscape phones: size charts from the usable width, not the short viewport height. */
@media (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .private-screen.private-maps-active,
  .private-screen.private-maps-active .private-panel,
  .private-screen.private-maps-active .private-maps-section,
  .private-screen.private-maps-active .private-maps-stage,
  .private-screen.private-maps-active .private-maps-chat,
  .private-screen.private-maps-active .private-chart-wheel-inline {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .private-screen.private-maps-active {
    min-height: 100dvh;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart) {
    display: block;
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 0 8px 18px;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen),
  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-main,
  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card {
    width: 100%;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card {
    padding: 8px 10px 14px;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    overflow: visible;
    padding: 6px 4px 10px;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only
    .chart-wheel-svg {
    width: min(62vw, 520px);
    max-width: calc(100vw - 28px);
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart {
    --landscape-multiple-card-width: auto;
    width: 100%;
    height: auto !important;
    min-height: 0;
    overflow: visible;
    padding: 8px 10px 18px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-main,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    width: 100%;
    max-width: none;
    min-width: 0;
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "topbar topbar topbar"
      "tropical sideral memoria";
    gap: 8px 10px;
    margin: 0;
    padding: 0 0 8px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    position: static;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    transform: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 2px;
    overflow: hidden;
    padding: 5px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    min-height: 22px;
    padding: 0 2px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple .chart-wheel-svg {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    max-height: none;
    aspect-ratio: 1 / 1;
  }
}

/* Method and creator: landing introduction and dedicated editorial page. */
.landing-origin.home-section {
  border-top: 1px solid color-mix(in srgb, var(--accent-strong) 12%, var(--line));
  border-bottom: 1px solid color-mix(in srgb, var(--accent-strong) 12%, var(--line));
  padding-top: clamp(80px, 7vw, 112px);
  padding-bottom: clamp(80px, 7vw, 112px);
  background: color-mix(in srgb, var(--surface) 34%, var(--bg));
}

.landing-origin-shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 52fr) minmax(320px, 48fr);
  grid-template-areas: "copy portrait" "action portrait";
  align-items: center;
  gap: clamp(40px, 5vw, 68px);
  row-gap: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}

.landing-origin-shell::before {
  content: none;
}

.landing-origin-copy {
  grid-area: copy;
  align-self: end;
  position: relative;
  z-index: 2;
  min-width: 0;
  max-width: 630px;
}

.landing-origin .eyebrow {
  margin: 0 0 18px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 600 !important;
  letter-spacing: 0.15em;
  line-height: 1.4;
  text-transform: uppercase;
}

.landing-origin-copy h2 {
  max-width: 10ch;
  margin: 0 0 24px;
  color: var(--text);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(56px, 5vw, 88px);
  font-weight: 500 !important;
  line-height: 0.92;
  letter-spacing: -0.055em;
  text-wrap: balance;
}

.landing-origin-lede {
  max-width: 28ch;
  margin: 0;
  color: var(--text);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.22;
  text-wrap: balance;
}

.landing-origin-body {
  max-width: 58ch;
  margin: 24px 0 32px;
  color: var(--text-soft);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.72;
}

.landing-origin-action {
  grid-area: action;
  align-self: start;
  justify-self: start;
  display: inline-flex;
  width: auto;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  border: 1px solid var(--accent-strong);
  border-radius: 10px;
  padding: 0 22px;
  background: var(--accent-strong);
  color: var(--on-accent);
  box-shadow: none;
  transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease;
}

.landing-origin-action:hover {
  border-color: color-mix(in srgb, var(--accent-strong) 88%, #000);
  background: color-mix(in srgb, var(--accent-strong) 88%, #000);
  box-shadow: none;
  transform: translateY(-1px);
}

.landing-origin-action:focus-visible {
  outline: 3px solid var(--accent-strong);
  outline-offset: 3px;
  box-shadow: none;
  transform: translateY(-1px);
}

.landing-origin-action svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 180ms ease;
}

.landing-origin-action:is(:hover, :focus-visible) svg {
  transform: translateX(3px);
}

.landing-origin-portrait {
  grid-area: portrait;
  position: relative;
  display: grid;
  width: min(100%, 510px);
  min-width: 0;
  min-height: 540px;
  place-items: center;
  justify-self: center;
  margin: 0;
  isolation: isolate;
}

.landing-origin-portrait-frame {
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: min(62%, 300px);
  aspect-ratio: 209 / 314;
  border: 1px solid color-mix(in srgb, var(--accent-strong) 20%, var(--line));
  border-radius: 48% 48% 12px 12px / 22% 22% 12px 12px;
  background: var(--surface-soft);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--text) 7%, transparent);
}

.landing-origin-portrait-frame::after {
  content: none;
}

.landing-origin-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.landing-origin-orbits {
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: min(100%, 500px);
  height: auto;
  overflow: visible;
  color: var(--accent-strong);
  opacity: 0.14;
  transform: translate(-50%, -50%);
}

.landing-origin-orbits :is(ellipse, path) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1;
}

.landing-origin-orbits .landing-origin-orbit-accent {
  stroke-width: 1.5;
}

.landing-origin-orbits circle {
  fill: currentColor;
  stroke: var(--bg);
  stroke-width: 2;
}

.landing-origin-stat {
  position: absolute;
  z-index: 2;
  right: clamp(0px, 1vw, 12px);
  bottom: 54px;
  display: grid;
  width: 158px;
  gap: 8px;
  margin: 0;
  border-top: 2px solid var(--accent-strong);
  padding: 15px 16px 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 6%, transparent);
  text-align: left;
}

.landing-origin-stat strong {
  color: var(--accent-strong);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 48px;
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 0.82;
}

.landing-origin-stat span {
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  line-height: 1.45;
  text-transform: uppercase;
}

.js .landing-origin .landing-reveal {
  transform: translateY(8px);
  filter: blur(2px);
  transition-duration: 300ms;
  transition-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
}

.js .landing-origin .landing-reveal.is-visible {
  transform: translateY(0);
  filter: blur(0);
}

:is(html[data-theme="dark"], html[data-theme="night"]) .landing-origin-action:focus-visible {
  outline-color: var(--accent-strong) !important;
}

.about-screen {
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

.about-screen :is(h1, h2, h3, p) {
  text-wrap: pretty;
}

.about-nav {
  position: sticky;
  z-index: 50;
  top: 0;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  align-items: center;
  gap: 24px;
  min-height: 76px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  padding: 12px clamp(22px, 4vw, 64px);
  backdrop-filter: blur(18px);
}

.about-brand,
.about-home-link {
  width: max-content;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.about-brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.about-brand::after {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 5px;
  background: var(--accent);
}

.about-nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.5vw, 38px);
}

.about-nav-links a {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.about-nav-links a:is(:hover, :focus-visible) {
  color: var(--accent);
}

.about-nav-action {
  width: max-content;
  min-width: 104px;
  min-height: 40px;
  justify-self: end;
  margin: 0;
  padding: 0 16px;
}

.about-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(410px, 0.92fr);
  align-items: center;
  gap: clamp(48px, 6vw, 82px);
  width: min(100% - 64px, 1180px);
  min-height: min(720px, calc(100vh - 76px));
  margin: 0 auto;
  padding: clamp(58px, 6.5vw, 84px) 0;
}

.about-hero::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 5%;
  right: -14%;
  width: 62%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 8%, transparent), transparent 68%);
  pointer-events: none;
}

.about-hero-copy,
.about-hero-visual {
  position: relative;
  z-index: 1;
}

.about-hero-copy h1 {
  max-width: 660px;
  margin: 14px 0 24px;
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(52px, 5vw, 72px);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.about-hero-lede {
  max-width: 620px;
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(16px, 1.35vw, 18px);
  line-height: 1.68;
  text-wrap: pretty;
}

.about-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: 30px;
}

.about-primary-link,
.about-secondary-link {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 0 20px;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

.about-primary-link {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 26px color-mix(in srgb, var(--accent) 18%, transparent);
}

.about-secondary-link {
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--text);
}

.about-primary-link:is(:hover, :focus-visible),
.about-secondary-link:is(:hover, :focus-visible) {
  transform: translateY(-1px);
}

.about-primary-link:is(:hover, :focus-visible) {
  background: var(--accent-strong);
  box-shadow: 0 15px 30px color-mix(in srgb, var(--accent) 22%, transparent);
}

.about-secondary-link:is(:hover, :focus-visible) {
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  color: var(--accent-strong);
}

.about-primary-link:focus-visible,
.about-secondary-link:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent) 22%, transparent);
  outline-offset: 3px;
}

.about-hero-visual {
  display: grid;
  min-height: clamp(430px, 39vw, 500px);
  place-items: center;
}

.about-observation-field {
  position: relative;
  width: min(100%, 500px);
  aspect-ratio: 1;
  isolation: isolate;
}

.about-observation-field::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 11%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-soft) 82%, transparent), transparent 68%);
  filter: blur(10px);
}

.about-observation-track {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.about-field-ring {
  fill: none;
  stroke: color-mix(in srgb, var(--accent-line) 56%, transparent);
  stroke-width: 1;
}

.about-field-ring--inner {
  stroke-dasharray: 3 7;
}

.about-field-route {
  fill: none;
  stroke: color-mix(in srgb, var(--accent) 50%, var(--line));
  stroke-linecap: round;
  stroke-width: 1.35;
}

.about-field-node {
  fill: var(--surface);
  stroke: var(--accent);
  stroke-width: 2;
}

.about-field-node--focus {
  fill: #d2a72a;
  stroke: color-mix(in srgb, #d2a72a 62%, var(--surface));
}

.about-observation-center {
  position: absolute;
  top: 49.2%;
  left: 50%;
  display: grid;
  width: clamp(142px, 35%, 174px);
  aspect-ratio: 1;
  place-content: center;
  justify-items: center;
  border: 1px solid color-mix(in srgb, var(--accent-line) 72%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
  box-shadow: 0 22px 55px color-mix(in srgb, var(--accent) 11%, transparent);
  transform: translate(-50%, -50%);
}

.about-method-logo {
  display: block;
  width: clamp(74px, 54%, 94px);
  height: auto;
  overflow: visible;
  color: var(--text);
}

.about-method-logo-orbit {
  fill: none;
  stroke: #d2a72a;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.about-method-logo-dot {
  fill: #d2a72a;
}

.about-method-logo-word {
  fill: currentColor;
  font-family: "Astro Jupiter", "Helvetica Neue", Arial, sans-serif;
  font-size: 27px;
  font-weight: 300;
  letter-spacing: 3.4px;
  text-anchor: middle;
}

.about-observation-center > span {
  margin-top: -9px;
  color: var(--accent);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-question {
  position: absolute;
  z-index: 3;
  display: grid;
  width: clamp(142px, 37%, 184px);
  gap: 8px;
  color: var(--text);
}

.about-question small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  font-family: "Astro Jupiter", Inter, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-question small span {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.about-question strong {
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(18px, 2vw, 25px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.about-question::after {
  content: "";
  width: 100%;
  height: 1px;
  margin-top: 4px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 48%, var(--line)), transparent);
}

.about-question--why {
  top: 11%;
  left: 0;
}

.about-question--purpose {
  right: 0;
  bottom: 11%;
  justify-items: end;
  text-align: right;
}

.about-question--purpose small {
  justify-content: flex-end;
}

.about-question--purpose::after {
  background: linear-gradient(270deg, color-mix(in srgb, var(--accent) 48%, var(--line)), transparent);
}

.about-section {
  width: min(100% - 48px, 1180px);
  margin: 0 auto;
  padding: clamp(88px, 10vw, 138px) 0;
}

.about-section-heading {
  max-width: 780px;
  margin-bottom: clamp(44px, 6vw, 76px);
}

.about-section-heading h2,
.about-creator h2,
.about-closing h2 {
  margin: 10px 0 0;
  color: var(--text);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 4.7vw, 64px);
  font-weight: 500;
  line-height: 1.04;
  letter-spacing: -0.042em;
}

.about-section-heading > p:last-child {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
}

.about-section-heading--center {
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

.about-method {
  border-top: 1px solid var(--line);
}

.about-method-body {
  display: grid;
  grid-template-columns: minmax(0, 1.42fr) minmax(280px, 0.58fr);
  gap: clamp(50px, 8vw, 104px);
  align-items: start;
}

.about-method-copy {
  display: grid;
  gap: 20px;
}

.about-method-copy p,
.about-creator-intro p {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.82;
}

.about-method-side {
  display: grid;
  gap: 20px;
}

.about-method-illustration {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent-line) 52%, var(--line));
  border-radius: 18px;
  background: #f5f0e6;
  box-shadow: 0 18px 44px color-mix(in srgb, var(--text) 7%, transparent);
}

.about-method-illustration::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 8px solid color-mix(in srgb, #fff 22%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.about-method-illustration img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-method-note {
  position: relative;
  border-top: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
  padding: 28px;
}

.about-method-note p {
  margin: 0;
  color: var(--text);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 20px;
  line-height: 1.55;
}

.about-note-index {
  display: block;
  margin-bottom: 40px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.about-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: clamp(66px, 8vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}

.about-process li {
  position: relative;
  display: grid;
  min-height: 184px;
  align-content: start;
  gap: 8px;
  border-top: 1px solid var(--line);
  padding: 25px 24px 20px 0;
}

.about-process li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: -4px;
  right: 18px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.about-process span {
  margin-bottom: 20px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.about-process strong {
  color: var(--text);
  font-size: 14px;
}

.about-process small {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.about-metaphors {
  width: 100%;
  max-width: none;
  background: color-mix(in srgb, var(--accent-soft) 26%, var(--surface));
  padding-right: max(24px, calc((100vw - 1180px) / 2));
  padding-left: max(24px, calc((100vw - 1180px) / 2));
}

.about-metaphor-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}

.about-metaphor-card {
  display: grid;
  align-content: start;
  gap: 22px;
  margin: 0;
}

.about-metaphor-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid color-mix(in srgb, var(--accent-line) 72%, var(--line));
  border-radius: 18px;
  background: #f5f0e6;
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text) 8%, transparent);
}

.about-metaphor-image::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 10px solid color-mix(in srgb, #fff 26%, transparent);
  border-radius: inherit;
  pointer-events: none;
}

.about-metaphor-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.92) contrast(0.98);
  transition: transform 420ms ease;
}

.about-metaphor-card:hover .about-metaphor-image img {
  transform: scale(1.018);
}

.about-metaphor-card figcaption {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 14px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

.about-metaphor-card figcaption > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.about-metaphor-card h3 {
  margin: -4px 0 7px;
  color: var(--text);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(21px, 2vw, 27px);
  font-weight: 500;
  line-height: 1.12;
}

.about-metaphor-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.62;
}

.about-maps {
  width: 100%;
  max-width: none;
  background: var(--surface);
  padding-right: max(24px, calc((100vw - 1180px) / 2));
  padding-left: max(24px, calc((100vw - 1180px) / 2));
}

.about-map-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.about-map-card {
  position: relative;
  display: grid;
  min-height: 410px;
  align-content: start;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface-soft);
  padding: clamp(28px, 3.2vw, 42px);
}

.about-map-card::after {
  content: "";
  position: absolute;
  right: -22%;
  bottom: -34%;
  width: 78%;
  aspect-ratio: 1;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  box-shadow:
    0 0 0 25px color-mix(in srgb, var(--accent) 3%, transparent),
    0 0 0 48px color-mix(in srgb, var(--accent) 2%, transparent);
}

.about-map-number {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
}

.about-map-role {
  width: max-content;
  margin: 66px 0 8px;
  border-radius: 999px;
  background: var(--accent-soft);
  padding: 5px 10px;
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-map-card h3 {
  margin: 0 0 18px;
  color: var(--text);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08;
}

.about-map-card > p:not(.about-map-role) {
  position: relative;
  z-index: 1;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.72;
}

.about-map-card > strong {
  position: relative;
  z-index: 1;
  align-self: end;
  margin-top: 34px;
  color: var(--accent);
  font-size: 12px;
  line-height: 1.5;
}

.about-map-card--memory {
  background: color-mix(in srgb, var(--accent-soft) 36%, var(--surface));
}

.about-creator {
  display: grid;
  gap: clamp(70px, 9vw, 120px);
}

.about-creator-intro {
  display: grid;
  grid-template-columns: minmax(260px, 0.74fr) minmax(0, 1.26fr);
  gap: clamp(54px, 8vw, 112px);
  align-items: center;
}

.about-creator-photo {
  position: relative;
  width: min(100%, 340px);
  margin: 0;
  justify-self: center;
}

.about-creator-photo::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 20px -18px -18px 20px;
  border: 1px solid var(--accent-line);
  border-radius: 18px;
  background: color-mix(in srgb, var(--accent-soft) 66%, var(--surface));
}

.about-creator-photo img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 209 / 314;
  border: 1px solid color-mix(in srgb, var(--line) 76%, transparent);
  border-radius: 18px;
  background: #111;
  box-shadow: 0 28px 64px color-mix(in srgb, var(--text) 18%, transparent);
  object-fit: cover;
}

.about-creator-photo figcaption {
  position: relative;
  z-index: 2;
  width: max-content;
  max-width: calc(100% - 18px);
  margin: -22px 0 0 18px;
  border-radius: 8px;
  background: var(--surface);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--text) 12%, transparent);
  padding: 10px 13px;
  color: var(--text-soft);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
}

.about-creator-intro > div:last-child {
  display: grid;
  gap: 18px;
}

.about-creator-intro .eyebrow,
.about-creator-intro h2 {
  margin-bottom: 0;
}

.about-creator-lede {
  color: var(--text) !important;
  font-size: clamp(17px, 1.65vw, 21px) !important;
}

.about-timeline {
  display: grid;
  border-top: 1px solid var(--line);
}

.about-timeline article {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 30px;
  border-bottom: 1px solid var(--line);
  padding: 27px 0;
}

.about-timeline time {
  color: var(--accent);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 23px;
}

.about-timeline h3 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: 15px;
}

.about-timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.65;
}

.about-closing {
  width: min(100% - 48px, 1180px);
  margin: 0 auto clamp(34px, 5vw, 70px);
  border-radius: 22px;
  background:
    radial-gradient(circle at 88% 18%, color-mix(in srgb, var(--on-accent) 13%, transparent), transparent 34%),
    var(--accent);
  padding: clamp(42px, 6vw, 78px);
  color: var(--on-accent);
  text-align: center;
}

.about-closing .eyebrow,
.about-closing h2,
.about-closing p {
  color: inherit;
}

.about-closing h2 {
  max-width: 780px;
  margin-right: auto;
  margin-left: auto;
}

.about-closing > p:not(.eyebrow) {
  max-width: 620px;
  margin: 18px auto 0;
  line-height: 1.65;
  opacity: 0.86;
}

.about-closing-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 30px;
}

.about-closing-actions .primary-action {
  width: auto;
  min-height: 48px;
  margin: 0;
  border-color: var(--on-accent);
  background: var(--on-accent);
  padding: 0 20px;
  color: var(--accent);
}

.about-home-link {
  min-height: 48px;
  border: 1px solid color-mix(in srgb, var(--on-accent) 52%, transparent);
  border-radius: 10px;
  padding: 0 20px;
  color: var(--on-accent);
  font-size: 13px;
  font-weight: 700;
}

.about-home-link:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--on-accent) 10%, transparent);
}

.about-footer {
  display: flex;
  width: min(100% - 48px, 1180px);
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
  border-top: 1px solid var(--line);
  padding: 28px 0 36px;
  color: var(--muted);
  font-size: 12px;
}

.about-footer a {
  color: var(--accent);
  text-decoration: none;
}

@media (max-width: 980px) {
  .landing-origin-shell {
    width: min(900px, calc(100% - 40px));
    grid-template-columns: minmax(0, 52fr) minmax(290px, 48fr);
    column-gap: 32px;
  }

  .landing-origin-portrait {
    width: min(100%, 430px);
    min-height: 490px;
  }

  .landing-origin-portrait-frame {
    width: clamp(250px, 64%, 276px);
  }

  .landing-origin-stat {
    right: 0;
    bottom: 44px;
  }

  .about-nav {
    grid-template-columns: 1fr auto;
  }

  .about-nav-links {
    display: none;
  }

  .about-hero {
    grid-template-columns: minmax(0, 1fr) minmax(330px, 0.76fr);
    gap: 38px;
    width: min(100% - 44px, 900px);
  }

  .about-hero-copy h1 {
    font-size: clamp(50px, 6.4vw, 62px);
  }

  .about-observation-field {
    width: min(100%, 390px);
  }

  .about-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-map-grid {
    grid-template-columns: 1fr;
  }

  .about-metaphor-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-metaphor-card:last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1.18fr) minmax(250px, 0.82fr);
    align-items: center;
  }

  .about-metaphor-card:last-child .about-metaphor-image {
    aspect-ratio: 16 / 9;
  }

  .about-map-card {
    min-height: 310px;
  }

  .about-map-role {
    margin-top: 38px;
  }
}

@media (max-width: 760px) {
  .landing-origin-shell {
    width: min(680px, calc(100% - 40px));
    grid-template-columns: 1fr;
    grid-template-areas: "copy" "portrait" "action";
    gap: 24px;
  }

  .landing-origin-body {
    margin-bottom: 0;
  }

  .landing-origin-action {
    width: min(100%, 400px);
    justify-self: center;
  }

  .landing-origin-portrait {
    width: min(100%, 440px);
    min-height: clamp(440px, 70vw, 500px);
  }

  .about-nav {
    min-height: 64px;
    padding: 10px 18px;
  }

  .about-nav-action {
    min-width: 88px;
    min-height: 38px;
  }

  .about-hero {
    grid-template-columns: 1fr;
    width: min(100% - 36px, 660px);
    gap: 34px;
    padding: 58px 0 72px;
  }

  .about-hero-visual {
    min-height: 460px;
  }

  .about-observation-field {
    width: min(92vw, 460px);
  }

  .about-question--why {
    left: 0;
  }

  .about-question--purpose {
    right: 0;
  }

  .about-method-body,
  .about-creator-intro {
    grid-template-columns: 1fr;
  }

  .about-method-note {
    max-width: 520px;
  }

  .about-method-side {
    width: min(100%, 520px);
    grid-template-columns: minmax(220px, 0.84fr) minmax(250px, 1.16fr);
    align-items: stretch;
  }

  .about-method-note {
    display: grid;
    align-content: start;
  }

  .about-metaphor-grid {
    grid-template-columns: 1fr;
  }

  .about-metaphor-card:last-child {
    grid-column: auto;
    grid-template-columns: 1fr;
  }

  .about-metaphor-card:last-child .about-metaphor-image {
    aspect-ratio: 4 / 3;
  }

  .about-process {
    grid-template-columns: 1fr;
  }

  .about-process li {
    min-height: 0;
    padding-right: 0;
  }

  .about-process li:not(:last-child)::after {
    right: auto;
    left: 0;
  }

  .about-process span {
    margin-bottom: 6px;
  }

  .about-creator-photo {
    width: min(76vw, 320px);
    margin: 0 auto;
  }
}

@media (max-width: 560px) {
  .landing-origin.home-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .landing-origin-shell {
    width: calc(100% - 40px);
    gap: 24px;
    padding: 0;
  }

  .landing-origin-portrait {
    width: 100%;
    max-width: 400px;
    min-height: clamp(390px, 105vw, 420px);
    overflow: hidden;
    justify-self: center;
  }

  .landing-origin-copy h2 {
    margin-bottom: 20px;
    font-size: clamp(48px, 12vw, 56px);
    line-height: 0.94;
  }

  .landing-origin-lede {
    max-width: 25ch;
    font-size: 22px;
  }

  .landing-origin-body {
    margin: 22px 0 0;
    font-size: 15px;
    line-height: 1.68;
  }

  .landing-origin-action {
    width: 100%;
  }

  .landing-origin-portrait-frame {
    width: min(70vw, 250px);
  }

  .landing-origin-orbits {
    width: min(114%, 420px);
    opacity: 0.11;
  }

  .landing-origin-orbits path {
    display: none;
  }

  .landing-origin-stat {
    right: 0;
    bottom: 28px;
    width: 138px;
    padding: 13px 14px 14px;
  }

  .landing-origin-stat strong {
    font-size: 42px;
  }

  .about-brand {
    font-size: 17px;
  }

  .about-nav-action {
    min-width: 78px;
    padding: 0 12px;
  }

  .about-hero-copy h1 {
    margin-bottom: 20px;
    font-size: clamp(42px, 12vw, 52px);
    line-height: 1.02;
  }

  .about-hero-lede {
    font-size: 16px;
    line-height: 1.64;
  }

  .about-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }

  .about-hero-visual {
    min-height: 350px;
  }

  .about-observation-field {
    width: min(92vw, 350px);
  }

  .about-observation-center {
    width: 132px;
  }

  .about-question {
    width: 128px;
    gap: 6px;
  }

  .about-question small {
    font-size: 8px;
  }

  .about-question strong {
    font-size: 17px;
  }

  .about-question--why {
    top: 7%;
    left: 0;
  }

  .about-question--purpose {
    right: 0;
    bottom: 7%;
  }

  .about-section {
    width: min(100% - 36px, 1180px);
    padding: 76px 0;
  }

  .about-section-heading h2,
  .about-creator h2,
  .about-closing h2 {
    font-size: 39px;
  }

  .about-method-side {
    width: 100%;
    grid-template-columns: 1fr;
  }

  .about-method-illustration {
    width: min(100%, 390px);
    justify-self: center;
  }

  .about-method-note {
    max-width: none;
  }

  .about-maps {
    width: 100%;
    padding-right: 18px;
    padding-left: 18px;
  }

  .about-metaphors {
    width: 100%;
    padding-right: 18px;
    padding-left: 18px;
  }

  .about-map-card {
    min-height: 330px;
    padding: 26px;
  }

  .about-timeline article {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 18px;
  }

  .about-timeline time {
    font-size: 18px;
  }

  .about-closing {
    width: calc(100% - 28px);
    padding: 42px 22px;
  }

  .about-closing-actions {
    display: grid;
  }

  .about-home-link {
    width: 100%;
  }

  .about-footer {
    width: calc(100% - 36px);
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-primary-link,
  .about-secondary-link,
  .landing-origin-action,
  .landing-origin-action svg {
    transition: none;
  }

  .about-primary-link:is(:hover, :focus-visible),
  .about-secondary-link:is(:hover, :focus-visible),
  .landing-origin-action:is(:hover, :focus-visible),
  .landing-origin-action:is(:hover, :focus-visible) svg {
    transform: none;
  }

  .about-metaphor-image img {
    transition: none;
  }
}

/* Astroanamnesis · creator-first editorial page. */
.about-editorial {
  --about-serif: Georgia, "Times New Roman", serif;
  overflow-x: clip;
  overflow-y: visible;
  background:
    radial-gradient(circle at 88% 8%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 27rem),
    linear-gradient(180deg, color-mix(in srgb, var(--bg) 97%, var(--accent-soft)) 0, var(--bg) 44rem);
}

.about-editorial .about-nav {
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  min-height: 72px;
  border-bottom-color: color-mix(in srgb, var(--line) 72%, transparent);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  padding: 10px clamp(20px, 4vw, 64px);
}

.about-editorial .about-nav-links {
  gap: clamp(19px, 2.4vw, 36px);
}

.about-editorial .about-nav-links a {
  position: relative;
  padding: 8px 0;
  font-size: 12px;
  letter-spacing: 0.015em;
}

.about-editorial .about-nav-links a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 3px;
  left: 0;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 220ms ease;
}

.about-editorial .about-nav-links a:is(:hover, :focus-visible)::after {
  transform: scaleX(1);
  transform-origin: left;
}

.about-editorial .about-nav-action {
  min-width: 98px;
  min-height: 38px;
  border-radius: 999px;
}

.about-editorial-hero,
.about-editorial-section,
.about-maps-shell {
  width: min(calc(100% - 56px), 1180px);
  margin-inline: auto;
}

.about-editorial :is(#about-creator, #about-trajectory, #about-method, #about-maps) {
  scroll-margin-top: 92px;
}

.about-editorial-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(400px, 1.06fr);
  min-height: min(790px, calc(100vh - 72px));
  align-items: center;
  gap: clamp(48px, 7vw, 104px);
  padding: clamp(62px, 7vw, 96px) 0;
}

.about-editorial-hero-copy {
  position: relative;
  z-index: 2;
}

.about-editorial-hero-copy h1 {
  max-width: 660px;
  margin: 16px 0 18px;
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(72px, 7.7vw, 112px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.062em;
  text-wrap: balance;
}

.about-founder-kicker {
  max-width: 560px;
  margin: 0 0 24px;
  color: var(--accent);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(20px, 2.2vw, 29px);
  line-height: 1.18;
}

.about-founder-lede {
  max-width: 630px;
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(15px, 1.35vw, 17px);
  line-height: 1.76;
}

.about-editorial .about-hero-actions {
  margin-top: 31px;
}

.about-editorial .about-primary-link,
.about-editorial .about-secondary-link {
  min-height: 46px;
  border-radius: 999px;
  padding-inline: 21px;
}

.about-founder-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 590px;
  margin: 0;
  place-items: center;
  isolation: isolate;
}

.about-founder-visual::before {
  content: "";
  position: absolute;
  z-index: -2;
  width: min(90%, 520px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 68%);
  filter: blur(8px);
}

.about-founder-geometry {
  position: absolute;
  z-index: -1;
  inset: 50% auto auto 50%;
  width: min(120%, 680px);
  height: auto;
  transform: translate(-50%, -50%);
}

.about-founder-photo {
  position: relative;
  width: min(56%, 286px);
}

.about-founder-photo::before,
.about-founder-photo::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.about-founder-photo::before {
  inset: -13px;
  border: 1px solid color-mix(in srgb, var(--accent) 52%, var(--line));
  border-radius: 46% 46% 9px 9px;
}

.about-founder-photo::after {
  right: -31px;
  bottom: -28px;
  width: 82px;
  height: 82px;
  border-right: 1px solid var(--accent);
  border-bottom: 1px solid var(--accent);
}

.about-founder-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 209 / 314;
  border-radius: 44% 44% 7px 7px;
  background: color-mix(in srgb, var(--surface) 88%, var(--accent-soft));
  box-shadow: 0 28px 70px color-mix(in srgb, var(--text) 19%, transparent);
  filter: saturate(0.72) contrast(1.04);
  object-fit: cover;
}

.about-founder-visual figcaption {
  position: absolute;
  right: clamp(8px, 4vw, 48px);
  bottom: 50px;
  display: grid;
  width: min(230px, 44%);
  gap: 4px;
  border-top: 1px solid var(--accent);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  padding: 13px 0 0 18px;
  backdrop-filter: blur(8px);
}

.about-founder-visual figcaption span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-founder-visual figcaption strong {
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: 20px;
  font-weight: 500;
}

.about-theme-vector {
  color: var(--accent);
  overflow: visible;
  transition: color 550ms ease;
}

.about-theme-vector :is(path, circle, ellipse, line, polyline) {
  vector-effect: non-scaling-stroke;
}

.about-vector-faint {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.2;
}

.about-vector-accent {
  stroke: currentColor;
  stroke-width: 1.15;
  opacity: 0.78;
}

.about-vector-nodes {
  fill: currentColor;
  opacity: 0.82;
}

.about-human {
  stroke: var(--text);
  stroke-width: 1.35;
  opacity: 0.86;
  transition: stroke 550ms ease;
}

.about-editorial-section {
  padding: clamp(88px, 10vw, 140px) 0;
}

.about-trajectory {
  border-top: 1px solid var(--line);
}

.about-editorial-heading {
  max-width: 860px;
  margin-bottom: clamp(44px, 6vw, 78px);
}

.about-editorial-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(290px, 0.72fr);
  max-width: none;
  align-items: end;
  gap: clamp(40px, 8vw, 110px);
}

.about-editorial-heading h2,
.about-maps-intro h2 {
  margin: 12px 0 0;
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 500;
  line-height: 1.01;
  letter-spacing: -0.045em;
}

.about-editorial-heading--split > p,
.about-maps-intro > p:last-child {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.76;
}

.about-editorial .about-timeline {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.about-editorial .about-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  min-height: 190px;
  gap: 22px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 28px;
}

.about-editorial .about-timeline article::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 27px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}

.about-editorial .about-timeline time {
  color: var(--accent);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: 20px;
  line-height: 1.2;
}

.about-editorial .about-timeline h3 {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.35;
}

.about-editorial .about-timeline p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.68;
}

.about-method-editorial {
  border-top: 1px solid var(--line);
}

.about-method-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(390px, 1.08fr);
  align-items: start;
  gap: clamp(48px, 8vw, 110px);
}

.about-method-narrative {
  display: grid;
  gap: 20px;
}

.about-method-narrative > p {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(15px, 1.34vw, 17px);
  line-height: 1.83;
}

.about-method-narrative blockquote {
  position: relative;
  margin: 18px 0 0;
  border-top: 1px solid var(--accent);
  border-bottom: 1px solid var(--line);
  padding: 26px 0;
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.42;
}

.about-method-visual {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto;
  overflow: hidden;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 31%, var(--line));
  padding: 18px 18px 20px;
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--surface) 94%, var(--accent-soft)), var(--surface));
}

.about-method-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 5% 14%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, transparent), transparent 68%);
  filter: blur(14px);
  pointer-events: none;
}

.about-method-visual::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 11%, transparent);
  pointer-events: none;
}

.about-method-engraving {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  background: color-mix(in srgb, var(--text) 78%, var(--accent));
  -webkit-mask: url("/assets/about/astroanamnesis-method-engraving-v1.png") center / contain no-repeat;
  mask: url("/assets/about/astroanamnesis-method-engraving-v1.png") center / contain no-repeat;
  opacity: 0.92;
  transition: background-color 550ms ease, opacity 550ms ease;
}

.about-method-symbols {
  fill: var(--text-soft);
  font-family: "Astro Jupiter", Georgia, serif;
  font-size: 26px;
  text-anchor: middle;
  opacity: 0.76;
  transition: fill 550ms ease;
}

.about-method-visual figcaption {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  margin: 0 10px;
  border-top: 1px solid var(--line);
  padding-top: 13px;
}

.about-method-visual figcaption span {
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-method-visual figcaption strong {
  color: var(--text-soft);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: 15px;
  font-weight: 500;
}

.about-editorial .about-process {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: clamp(64px, 8vw, 104px) 0 0;
  padding: 0;
  list-style: none;
}

.about-editorial .about-process li {
  min-height: 176px;
  border-top: 1px solid var(--line);
  padding: 23px 24px 18px 0;
}

.about-editorial .about-process li:not(:last-child)::after {
  right: 18px;
}

.about-editorial .about-process span {
  margin-bottom: 18px;
}

.about-maps-editorial {
  width: 100%;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--accent-soft) 30%, var(--surface)), var(--surface));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: clamp(90px, 11vw, 148px) 0;
}

.about-maps-shell {
  display: grid;
  grid-template-columns: minmax(390px, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(42px, 7vw, 96px);
  align-items: center;
}

.about-maps-intro {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.72fr);
  align-items: end;
  gap: clamp(40px, 8vw, 110px);
  padding-bottom: clamp(18px, 3vw, 40px);
}

.about-maps-intro > p:last-child {
  align-self: end;
}

.about-maps-visual {
  position: relative;
  isolation: isolate;
  margin: 0;
}

.about-maps-visual::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 8% 4%;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 10%, transparent), transparent 67%);
  filter: blur(10px);
}

.about-maps-engraving {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 1086 / 1448;
  background: color-mix(in srgb, var(--text) 78%, var(--accent));
  -webkit-mask: url("/assets/about/astroanamnesis-three-maps-engraving-v1.png") center / contain no-repeat;
  mask: url("/assets/about/astroanamnesis-three-maps-engraving-v1.png") center / contain no-repeat;
  opacity: 0.92;
  transition: background-color 550ms ease, opacity 550ms ease;
}

.about-map-ledger {
  display: grid;
  border-top: 1px solid var(--line);
}

.about-map-ledger article {
  display: grid;
  grid-template-columns: 34px minmax(160px, 0.8fr) minmax(0, 1fr);
  gap: clamp(16px, 2.6vw, 32px);
  border-bottom: 1px solid var(--line);
  padding: 27px 0;
}

.about-map-ledger article > span {
  color: var(--accent);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.about-map-ledger article > div > p {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-map-ledger h3 {
  margin: 0 0 10px;
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.08;
}

.about-map-ledger article > div > strong {
  color: var(--accent);
  font-size: 11px;
  line-height: 1.45;
}

.about-map-ledger article > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.72;
}

.about-editorial .about-closing {
  width: min(calc(100% - 56px), 1180px);
  margin-top: clamp(72px, 9vw, 124px);
  border-radius: 2px;
}

.about-editorial .about-footer {
  width: min(calc(100% - 56px), 1180px);
}

@media (max-width: 1020px) {
  .about-editorial .about-nav {
    grid-template-columns: minmax(150px, 1fr) auto minmax(110px, 1fr);
  }

  .about-editorial-hero {
    grid-template-columns: minmax(0, 0.88fr) minmax(350px, 1.12fr);
    gap: 34px;
  }

  .about-founder-visual {
    min-height: 540px;
  }

  .about-method-layout,
  .about-maps-shell {
    grid-template-columns: minmax(0, 0.88fr) minmax(340px, 1.12fr);
    gap: 48px;
  }

  .about-editorial .about-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .about-map-ledger article {
    grid-template-columns: 30px minmax(0, 1fr);
  }

  .about-map-ledger article > p {
    grid-column: 2;
  }
}

@media (max-width: 800px) {
  .about-editorial :is(#about-creator, #about-trajectory, #about-method, #about-maps) {
    scroll-margin-top: 116px;
  }

  .about-editorial .about-nav {
    grid-template-columns: 1fr auto;
    gap: 6px 16px;
    padding: 9px 18px 8px;
  }

  .about-editorial .about-nav-links {
    display: flex;
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
    gap: 9px;
    overflow-x: auto;
    padding-top: 2px;
    scrollbar-width: none;
  }

  .about-editorial .about-nav-links::-webkit-scrollbar {
    display: none;
  }

  .about-editorial .about-nav-links a {
    flex: 0 0 auto;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 7px 12px;
    background: color-mix(in srgb, var(--surface) 86%, transparent);
    font-size: 10px;
  }

  .about-editorial .about-nav-links a::after {
    display: none;
  }

  .about-editorial-hero,
  .about-editorial-section,
  .about-maps-shell {
    width: min(calc(100% - 36px), 680px);
  }

  .about-editorial-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 20px;
    padding: 64px 0 78px;
  }

  .about-editorial-hero-copy h1 {
    font-size: clamp(64px, 16vw, 92px);
  }

  .about-founder-visual {
    min-height: 570px;
  }

  .about-founder-geometry {
    width: min(116%, 630px);
  }

  .about-founder-photo {
    width: min(52vw, 280px);
  }

  .about-editorial-heading--split,
  .about-maps-intro {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .about-editorial .about-timeline {
    grid-template-columns: 1fr;
  }

  .about-editorial .about-timeline article {
    min-height: 0;
  }

  .about-method-layout,
  .about-maps-shell {
    grid-template-columns: 1fr;
  }

  .about-method-visual {
    width: min(100%, 590px);
    justify-self: center;
  }

  .about-maps-intro {
    grid-column: auto;
  }

  .about-maps-visual {
    width: min(100%, 560px);
    justify-self: center;
  }

  .about-map-ledger article {
    grid-template-columns: 34px minmax(160px, 0.76fr) minmax(0, 1fr);
  }

  .about-map-ledger article > p {
    grid-column: auto;
  }
}

@media (max-width: 560px) {
  .about-editorial .about-brand {
    font-size: 16px;
  }

  .about-editorial .about-nav-action {
    min-width: 80px;
    min-height: 36px;
    padding-inline: 12px;
  }

  .about-editorial-hero {
    padding-top: 48px;
  }

  .about-editorial-hero-copy h1 {
    margin-top: 13px;
    font-size: clamp(58px, 18vw, 78px);
  }

  .about-founder-kicker {
    font-size: 21px;
  }

  .about-founder-lede {
    font-size: 15px;
    line-height: 1.7;
  }

  .about-editorial .about-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-founder-visual {
    min-height: 430px;
  }

  .about-founder-visual figcaption {
    right: 0;
    bottom: 24px;
    width: 50%;
  }

  .about-editorial-section {
    padding: 76px 0;
  }

  .about-editorial-heading h2,
  .about-maps-intro h2 {
    font-size: 39px;
  }

  .about-editorial .about-timeline article {
    grid-template-columns: 82px minmax(0, 1fr);
    gap: 16px;
    padding: 24px 18px;
  }

  .about-editorial .about-timeline time {
    font-size: 17px;
  }

  .about-method-layout {
    gap: 38px;
  }

  .about-method-visual {
    padding: 12px 12px 18px;
  }

  .about-method-visual figcaption {
    margin: 0 6px;
  }

  .about-method-visual figcaption strong {
    text-align: right;
  }

  .about-editorial .about-process {
    grid-template-columns: 1fr;
  }

  .about-editorial .about-process li {
    min-height: 0;
    padding-right: 0;
  }

  .about-editorial .about-process li:not(:last-child)::after {
    right: auto;
    left: 0;
  }

  .about-maps-editorial {
    padding: 76px 0;
  }

  .about-map-ledger article {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
  }

  .about-map-ledger article > p {
    grid-column: 2;
  }

  .about-editorial .about-closing,
  .about-editorial .about-footer {
    width: calc(100% - 28px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-editorial .about-nav-links a::after,
  .about-theme-vector,
  .about-human,
  .about-method-symbols {
    transition: none;
  }
}

/* Astroanamnesis · premium editorial refinement. */
.about-editorial {
  --about-frame: min(calc(100% - 64px), 1320px);
  --about-section-space: clamp(88px, 8vw, 128px);
  --about-ease: cubic-bezier(0.2, 0.72, 0.28, 1);
  background: var(--bg);
  overflow-x: clip;
}

.about-editorial :is(h1, h2, h3) {
  font-family: "Astro Jupiter", var(--about-serif);
  font-weight: 500 !important;
}

.about-editorial .eyebrow {
  color: var(--accent-strong);
  font-size: 10px;
  letter-spacing: 0.14em;
  line-height: 1.4;
}

.about-editorial :is(a, button):focus-visible {
  outline: 2px solid var(--accent-strong);
  outline-offset: 3px;
}

.about-editorial .about-nav {
  grid-template-columns: minmax(190px, 1fr) auto minmax(190px, 1fr);
  min-height: 72px;
  gap: 24px;
  border-bottom-color: var(--line);
  background: var(--bg);
  padding: 10px clamp(20px, 3.2vw, 48px);
  backdrop-filter: none;
}

.about-editorial .about-brand {
  min-height: 40px;
  padding: 0;
}

.about-editorial .about-brand::after {
  width: 24px;
  height: 1px;
  margin-top: 4px;
}

.about-editorial .about-nav-links {
  display: flex;
  gap: clamp(20px, 2.2vw, 34px);
}

.about-editorial .about-nav-links a {
  min-height: 40px;
  padding: 12px 0 10px;
  color: var(--text-soft);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.about-editorial .about-nav-links a::after {
  bottom: 7px;
  background: var(--accent-strong);
}

.about-editorial .about-nav-action {
  min-width: 100px;
  min-height: 42px;
  border-color: var(--accent-strong);
  border-radius: 8px;
  background: var(--accent-strong);
  transition: background-color 190ms ease, border-color 190ms ease, transform 190ms var(--about-ease);
}

.about-editorial .about-nav-action:hover {
  border-color: color-mix(in srgb, var(--accent-strong) 88%, #000000);
  background: color-mix(in srgb, var(--accent-strong) 88%, #000000);
  transform: translateY(-1px);
}

.about-editorial-hero,
.about-editorial-section,
.about-maps-shell,
.about-hero-transition,
.about-closing-inner,
.about-editorial .about-footer {
  width: var(--about-frame);
  margin-inline: auto;
}

.about-editorial :is(#about-creator, #about-trajectory, #about-method, #about-maps) {
  scroll-margin-top: 92px;
}

.about-editorial-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(420px, 1.08fr);
  min-height: min(820px, calc(100svh - 72px));
  align-items: center;
  gap: clamp(56px, 6.5vw, 96px);
  padding: clamp(72px, 7vw, 104px) 0;
}

.about-editorial-hero-copy {
  max-width: 620px;
}

.about-editorial-hero-copy h1 {
  max-width: 660px;
  margin: 18px 0 24px;
  font-size: clamp(4.5rem, 7vw, 7.2rem);
  line-height: 0.88;
  letter-spacing: -0.058em;
  text-wrap: normal;
}

.about-founder-kicker {
  max-width: 26ch;
  margin: 0 0 24px;
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(22px, 2.1vw, 30px);
  line-height: 1.2;
}

.about-founder-lede {
  max-width: 60ch;
  color: var(--text-soft);
  font-size: clamp(15px, 1.22vw, 17px);
  line-height: 1.78;
}

.about-editorial .about-hero-actions {
  gap: 12px;
  margin-top: 32px;
}

.about-editorial .about-primary-link,
.about-editorial .about-secondary-link {
  min-height: 50px;
  border-radius: 8px;
  padding-inline: 23px;
  transition: background-color 190ms ease, border-color 190ms ease, color 190ms ease, transform 190ms var(--about-ease);
}

.about-editorial .about-primary-link {
  background: var(--accent-strong);
  box-shadow: none;
  color: var(--on-accent);
}

.about-editorial .about-primary-link:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--accent-strong) 88%, #000000);
  box-shadow: none;
  transform: translateY(-1px);
}

.about-editorial .about-secondary-link {
  border-color: color-mix(in srgb, var(--accent-strong) 52%, var(--line));
  background: transparent;
  color: var(--accent-strong);
}

.about-editorial .about-secondary-link:is(:hover, :focus-visible) {
  border-color: var(--accent-strong);
  background: color-mix(in srgb, var(--accent-soft) 52%, var(--surface));
  color: var(--accent-strong);
  transform: translateY(-1px);
}

.about-founder-visual {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 620px;
  overflow: clip;
  margin: 0;
  place-items: center;
  isolation: isolate;
}

.about-founder-visual::before {
  display: none;
}

.about-founder-geometry {
  position: absolute;
  z-index: 0;
  inset: 50% auto auto 50%;
  width: min(100%, 650px);
  height: auto;
  transform: translate(-50%, -50%);
}

.about-vector-faint {
  stroke: var(--accent-strong);
  stroke-width: 0.85;
  opacity: 0.17;
}

.about-vector-accent {
  stroke: var(--accent-strong);
  stroke-width: 1;
  opacity: 0.42;
}

.about-vector-nodes {
  fill: var(--accent-strong);
  opacity: 0.52;
}

.about-founder-photo {
  position: relative;
  z-index: 2;
  width: min(54%, 276px);
}

.about-founder-photo::before {
  inset: -11px;
  border-color: color-mix(in srgb, var(--accent-strong) 54%, var(--line));
  border-radius: 46% 46% 5px 5px;
}

.about-founder-photo::after {
  display: none;
}

.about-founder-photo img {
  border-radius: 45% 45% 4px 4px;
  background: var(--surface-soft);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--text) 11%, transparent);
  filter: saturate(0.76) contrast(1.035);
  object-position: 50% 22%;
}

.about-founder-visual figcaption {
  position: absolute;
  z-index: 3;
  right: clamp(0px, 4vw, 42px);
  bottom: 54px;
  display: grid;
  width: 220px;
  gap: 5px;
  border-top: 1px solid var(--accent-strong);
  background: var(--surface);
  padding: 14px 16px 15px;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--text) 7%, transparent);
  backdrop-filter: none;
}

.about-founder-visual figcaption span {
  color: var(--accent-strong);
  font-size: 9px;
  letter-spacing: 0.14em;
}

.about-founder-visual figcaption strong {
  font-size: 21px;
  line-height: 1.18;
}

.about-hero-transition {
  display: block;
  height: 1px;
}

.about-hero-transition-line {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--line);
}

.about-editorial-section {
  padding: var(--about-section-space) 0;
}

.about-trajectory,
.about-method-editorial {
  border-top: 0;
}

.about-editorial-heading {
  max-width: 900px;
  margin-bottom: clamp(48px, 5vw, 72px);
}

.about-editorial-heading--split {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, 0.62fr);
  align-items: end;
  gap: clamp(48px, 7vw, 104px);
}

.about-editorial-heading h2,
.about-maps-intro h2 {
  max-width: 18ch;
  margin-top: 14px;
  font-size: clamp(42px, 4.7vw, 66px);
  line-height: 1.03;
  letter-spacing: -0.042em;
}

.about-editorial-heading--split > p,
.about-maps-intro > p:last-child {
  max-width: 56ch;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.78;
}

.about-editorial .about-timeline {
  --about-timeline-year: clamp(116px, 12vw, 158px);
  --about-timeline-gap: clamp(50px, 5vw, 70px);
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  border: 0;
}

.about-editorial .about-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--about-timeline-year) + 20px);
  width: 1px;
  background: var(--line);
}

.about-editorial .about-timeline article {
  position: relative;
  display: grid;
  grid-template-columns: var(--about-timeline-year) minmax(0, 1fr);
  min-height: 0;
  gap: var(--about-timeline-gap);
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: clamp(25px, 2.4vw, 34px) 0;
  background: transparent;
}

.about-editorial .about-timeline article:first-child {
  border-top: 1px solid var(--line);
}

.about-editorial .about-timeline article::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: clamp(31px, 2.8vw, 40px);
  left: calc(var(--about-timeline-year) + 16px);
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong);
  transition: transform 190ms var(--about-ease), background-color 190ms ease;
}

.about-editorial .about-timeline article:hover::before {
  background: var(--accent);
  transform: scale(1.25);
}

.about-editorial .about-timeline time {
  color: var(--accent-strong);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(22px, 2.1vw, 29px);
  line-height: 1.2;
  transition: color 190ms ease;
}

.about-editorial .about-timeline article:hover time {
  color: var(--accent);
}

.about-editorial .about-timeline h3 {
  margin: 0 0 9px;
  color: var(--text);
  font-family: "Astro Jupiter", var(--font-ui, Inter, sans-serif);
  font-size: clamp(15px, 1.2vw, 17px);
  font-weight: 600 !important;
  line-height: 1.4;
}

.about-editorial .about-timeline p {
  max-width: 74ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.about-method-arc {
  display: flex;
  max-width: 740px;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  margin: 0 0 clamp(48px, 5vw, 68px);
  border-bottom: 1px solid var(--line);
  padding-bottom: 18px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.about-method-arc-arrow {
  color: var(--line);
  font-size: 16px;
  font-weight: 400;
}

.about-method-arc strong {
  color: var(--accent-strong);
}

.about-method-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.7fr);
  align-items: start;
  gap: clamp(56px, 8vw, 112px);
}

.about-method-narrative {
  display: grid;
  max-width: 62ch;
  gap: 24px;
}

.about-method-narrative > p {
  margin: 0;
  color: var(--text-soft);
  font-size: clamp(15px, 1.25vw, 17px);
  line-height: 1.84;
}

.about-method-layout > .about-method-quote {
  margin: 4px 0 0;
  border: 0;
  border-left: 2px solid var(--accent-strong);
  padding: 6px 0 8px clamp(24px, 3vw, 38px);
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.4;
  letter-spacing: -0.022em;
}

.about-process-section {
  margin-top: clamp(88px, 9vw, 120px);
  border-top: 1px solid var(--line);
  padding-top: clamp(40px, 5vw, 64px);
}

.about-process-heading h3 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.about-editorial .about-process {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  margin: clamp(48px, 5vw, 64px) 0 0;
  padding: 0;
}

.about-editorial .about-process::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  left: 5px;
  height: 1px;
  background: var(--line);
}

.about-editorial .about-process li {
  position: relative;
  display: grid;
  min-height: 0;
  align-content: start;
  gap: 9px;
  border: 0;
  padding: 34px clamp(20px, 2.4vw, 34px) 0 0;
}

.about-editorial .about-process li::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 1px;
  left: 0;
  width: 9px;
  height: 9px;
  border: 2px solid var(--bg);
  border-radius: 50%;
  background: var(--accent-strong);
  box-shadow: 0 0 0 1px var(--accent-strong);
}

.about-editorial .about-process li:not(:last-child)::after {
  display: none;
}

.about-editorial .about-process span {
  margin: 0 0 9px;
  color: var(--accent-strong);
  font-size: 10px;
  letter-spacing: 0.12em;
}

.about-editorial .about-process strong {
  color: var(--text);
  font-size: 15px;
  line-height: 1.35;
}

.about-editorial .about-process small {
  max-width: 25ch;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.62;
}

.about-maps-editorial {
  width: 100%;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  padding: var(--about-section-space) 0;
}

.about-maps-shell {
  display: block;
}

.about-maps-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(300px, 0.6fr);
  align-items: end;
  gap: clamp(48px, 7vw, 104px);
  margin-bottom: clamp(56px, 6vw, 80px);
  padding: 0;
}

.about-maps-intro > p:last-child {
  align-self: end;
}

.about-map-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.about-map-ledger article {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr auto;
  min-height: 410px;
  align-content: start;
  overflow: hidden;
  gap: 0;
  border: 0;
  border-right: 1px solid var(--line);
  padding: clamp(32px, 3.2vw, 44px);
  background: transparent;
  transition: background-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--about-ease);
}

.about-map-ledger article:last-child {
  border-right: 0;
}

.about-map-ledger article::before,
.about-map-ledger article::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border: 1px solid var(--accent-strong);
  border-radius: 50%;
  opacity: 0.12;
  transition: opacity 220ms ease, transform 220ms var(--about-ease);
}

.about-map-ledger article::before {
  top: -94px;
  right: -70px;
  width: 210px;
  height: 210px;
}

.about-map-ledger article::after {
  top: -51px;
  right: -26px;
  width: 122px;
  height: 122px;
}

.about-map-block--program::before {
  width: 235px !important;
  height: 142px !important;
  transform: rotate(-12deg);
}

.about-map-block--program::after {
  width: 144px !important;
  height: 82px !important;
  transform: rotate(12deg);
}

.about-map-block--self::before {
  transform: translate(-16px, 12px);
}

.about-map-block--self::after {
  transform: translate(-8px, 5px);
}

.about-map-ledger article:hover {
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
  box-shadow: inset 0 2px 0 var(--accent-strong);
  transform: translateY(-4px);
}

.about-map-ledger article:hover::before,
.about-map-ledger article:hover::after {
  opacity: 0.24;
}

.about-map-ledger article > .about-map-number {
  position: relative;
  z-index: 1;
  color: var(--accent-strong);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.14em;
}

.about-map-ledger article > .about-map-copy {
  position: relative;
  z-index: 1;
  grid-column: 1;
  margin-top: clamp(72px, 7vw, 96px);
}

.about-map-ledger article > .about-map-copy > p {
  margin: 0 0 9px;
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-map-ledger h3 {
  margin: 0 0 16px;
  font-size: clamp(27px, 2.6vw, 35px);
  line-height: 1.06;
  letter-spacing: -0.032em;
}

.about-map-ledger article > .about-map-copy > strong {
  display: block;
  max-width: 27ch;
  color: var(--accent-strong);
  font-size: 12px;
  line-height: 1.55;
}

.about-map-ledger article > .about-map-description {
  position: relative;
  z-index: 1;
  grid-column: 1;
  align-self: end;
  max-width: 39ch;
  margin: clamp(42px, 5vw, 64px) 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.72;
}

.about-editorial .about-closing {
  width: 100%;
  margin: 0;
  border-radius: 0;
  background: #111827;
  padding: 0;
  color: #f8fafc;
  text-align: left;
}

.about-closing-inner {
  padding: clamp(88px, 8vw, 120px) 0;
}

.about-editorial .about-closing .eyebrow {
  color: color-mix(in srgb, var(--accent) 56%, #ffffff);
}

.about-editorial .about-closing h2 {
  max-width: 850px;
  margin: 14px 0 0;
  color: inherit;
  font-size: clamp(43px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.043em;
}

.about-editorial .about-closing-inner > p:not(.eyebrow) {
  max-width: 620px;
  margin: 22px 0 0;
  color: #d4dbea;
  font-size: 15px;
  line-height: 1.72;
}

.about-editorial .about-closing-actions {
  justify-content: flex-start;
  gap: 12px;
  margin-top: 34px;
}

.about-editorial .about-closing-actions .primary-action,
.about-editorial .about-closing-actions .about-home-link {
  width: auto;
  min-height: 50px;
  border-radius: 8px;
  margin: 0;
  padding: 0 22px;
  transition: background-color 190ms ease, border-color 190ms ease, color 190ms ease, transform 190ms var(--about-ease);
}

.about-editorial .about-closing-actions .primary-action {
  border-color: #f8fafc;
  background: #f8fafc;
  color: #111827;
}

.about-editorial .about-closing-actions .about-home-link {
  border-color: color-mix(in srgb, #f8fafc 58%, transparent);
  background: transparent;
  color: #f8fafc;
}

.about-editorial .about-closing-actions :is(.primary-action, .about-home-link):hover {
  transform: translateY(-1px);
}

.about-editorial .about-closing-actions .primary-action:hover {
  background: #e7ebf3;
}

.about-editorial .about-closing-actions .about-home-link:hover {
  border-color: #f8fafc;
  background: color-mix(in srgb, #f8fafc 9%, transparent);
}

.about-editorial .about-closing :is(a, button):focus-visible {
  outline-color: #f8fafc;
}

.about-editorial .about-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  border-top: 0;
  padding: 30px 0 38px;
  font-size: 11px;
}

.about-footer > span:last-child {
  justify-self: end;
}

.about-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
}

.about-footer-legal button {
  min-height: 36px;
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--muted);
  font-size: 11px;
  cursor: pointer;
}

.about-footer-legal button:hover {
  color: var(--accent-strong);
}

@media (min-width: 1440px) {
  .about-editorial {
    --about-frame: min(calc(100% - 96px), 1320px);
  }
}

@media (max-width: 1100px) {
  .about-editorial {
    --about-frame: min(calc(100% - 64px), 1120px);
  }

  .about-editorial-hero {
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 1.1fr);
    gap: 42px;
  }

  .about-founder-visual {
    min-height: 560px;
  }

  .about-founder-photo {
    width: min(55%, 250px);
  }

  .about-founder-visual figcaption {
    right: 0;
    bottom: 40px;
    width: 205px;
  }

  .about-editorial .about-process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 24px;
  }

  .about-editorial .about-process::before {
    display: none;
  }

  .about-editorial .about-process li {
    border-top: 1px solid var(--line);
    padding-top: 30px;
  }

  .about-editorial .about-process li::before {
    top: -5px;
  }
}

@media (max-width: 980px) {
  .about-editorial .about-nav-links {
    display: flex;
  }
}

@media (max-width: 900px) {
  .about-editorial :is(#about-creator, #about-trajectory, #about-method, #about-maps) {
    scroll-margin-top: 116px;
  }

  .about-editorial-hero {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 32px;
    padding: 72px 0 78px;
  }

  .about-editorial-hero-copy {
    max-width: 680px;
  }

  .about-founder-visual {
    min-height: 590px;
  }

  .about-founder-geometry {
    width: min(92vw, 620px);
  }

  .about-founder-photo {
    width: min(42vw, 270px);
  }

  .about-founder-visual figcaption {
    right: max(0px, calc(50% - 270px));
    bottom: 42px;
  }

  .about-editorial-heading--split,
  .about-maps-intro {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .about-editorial-heading--split > p,
  .about-maps-intro > p:last-child {
    max-width: 62ch;
  }

  .about-method-layout {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .about-method-quote {
    max-width: 720px;
  }

  .about-maps-intro {
    margin-bottom: 52px;
  }

  .about-map-ledger {
    grid-template-columns: 1fr;
  }

  .about-map-ledger article {
    min-height: 300px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .about-map-ledger article:last-child {
    border-bottom: 0;
  }

  .about-map-ledger article > .about-map-copy {
    margin-top: 48px;
  }

  .about-map-ledger article > .about-map-description {
    margin-top: 36px;
  }

  .about-editorial .about-footer {
    grid-template-columns: 1fr 1fr;
  }

  .about-footer-legal {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-content: flex-start;
  }
}

@media (max-width: 800px) {
  .about-editorial {
    --about-frame: min(calc(100% - 40px), 680px);
  }

  .about-editorial .about-nav {
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    padding: 9px 20px 8px;
  }

  .about-editorial .about-nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    overflow: visible;
    padding-top: 0;
  }

  .about-editorial .about-nav-links a {
    min-height: 40px;
    flex: 0 0 auto;
    border: 0;
    border-radius: 0;
    background: transparent;
    padding: 11px 0 9px;
    font-size: 10px;
  }

  .about-editorial .about-nav-links a::after {
    display: block;
    bottom: 7px;
  }

  .about-editorial .about-nav-action {
    min-height: 40px;
  }

  .about-editorial-hero-copy h1 {
    font-size: clamp(4rem, 16vw, 6rem);
  }

  .about-editorial-heading h2,
  .about-maps-intro h2 {
    font-size: clamp(39px, 9vw, 54px);
  }
}

@media (max-width: 640px) {
  .about-editorial-hero {
    gap: 24px;
    padding: 56px 0 64px;
  }

  .about-editorial-hero-copy {
    display: contents;
  }

  .about-editorial-hero > .about-founder-visual {
    order: 1;
  }

  .about-editorial .about-editorial-hero .about-hero-actions {
    order: 2;
    margin-top: 0;
  }

  .about-editorial-hero-copy h1 {
    margin: 15px 0 22px;
    font-size: clamp(3.65rem, 18vw, 5.2rem);
    line-height: 0.9;
  }

  .about-founder-kicker {
    font-size: 22px;
  }

  .about-founder-lede {
    font-size: 15px;
    line-height: 1.72;
  }

  .about-editorial .about-hero-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .about-editorial .about-primary-link,
  .about-editorial .about-secondary-link {
    width: 100%;
  }

  .about-founder-visual {
    min-height: 440px;
  }

  .about-founder-geometry {
    width: min(108vw, 470px);
  }

  .about-orbit--outer,
  .about-vector-nodes circle:nth-child(n + 3) {
    display: none;
  }

  .about-founder-photo {
    width: min(68vw, 230px);
  }

  .about-founder-visual figcaption {
    right: 0;
    bottom: 10px;
    width: min(190px, 65vw);
    padding: 12px 14px 13px;
  }

  .about-editorial-section,
  .about-maps-editorial {
    padding: 76px 0;
  }

  .about-editorial .about-timeline {
    --about-timeline-year: 0px;
    --about-timeline-gap: 0px;
    padding-left: 0;
  }

  .about-editorial .about-timeline::before {
    left: 7px;
  }

  .about-editorial .about-timeline article {
    display: block;
    padding: 26px 0 26px 36px;
  }

  .about-editorial .about-timeline article::before {
    top: 31px;
    left: 3px;
  }

  .about-editorial .about-timeline time {
    display: block;
    margin-bottom: 10px;
    font-size: 21px;
  }

  .about-method-arc {
    gap: 8px;
    overflow: hidden;
    font-size: 8px;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .about-method-arc-arrow {
    font-size: 13px;
  }

  .about-method-quote {
    padding-left: 24px;
    font-size: 25px;
  }

  .about-process-section {
    margin-top: 78px;
  }

  .about-editorial .about-process {
    grid-template-columns: 1fr;
    gap: 0;
    padding-left: 0;
  }

  .about-editorial .about-process::before {
    display: block;
    top: 0;
    right: auto;
    bottom: 0;
    left: 7px;
    width: 1px;
    height: auto;
  }

  .about-editorial .about-process li {
    border-top: 0;
    padding: 0 0 36px 36px;
  }

  .about-editorial .about-process li:last-child {
    padding-bottom: 0;
  }

  .about-editorial .about-process li::before {
    top: 2px;
    left: 3px;
  }

  .about-editorial .about-process span {
    margin-bottom: 3px;
  }

  .about-map-ledger article {
    min-height: 330px;
    padding: 30px 24px 34px;
  }

  .about-map-ledger article > .about-map-copy {
    margin-top: 54px;
  }

  .about-map-ledger article > .about-map-description {
    margin-top: 34px;
  }

  .about-closing-inner {
    padding: 76px 0;
  }

  .about-editorial .about-closing h2 {
    font-size: clamp(39px, 10vw, 52px);
  }

  .about-editorial .about-closing-actions {
    display: grid;
    width: 100%;
  }

  .about-editorial .about-closing-actions :is(.primary-action, .about-home-link) {
    width: 100%;
  }

  .about-editorial .about-footer {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 26px 0 34px;
  }

  .about-footer-legal {
    grid-column: auto;
    grid-row: auto;
    gap: 12px 16px;
  }

  .about-footer > span:last-child {
    justify-self: start;
  }
}

@media (max-width: 360px) {
  .about-editorial .about-nav {
    padding-inline: 16px;
  }

  .about-editorial .about-brand {
    font-size: 16px;
  }

  .about-editorial .about-nav-action {
    min-width: 78px;
    padding-inline: 12px;
  }

  .about-editorial .about-nav-links {
    gap: 8px;
  }

  .about-editorial .about-nav-links a {
    font-size: 9px;
  }

  .about-editorial-hero-copy h1 {
    font-size: clamp(3.35rem, 18vw, 4.25rem);
  }

  .about-founder-visual {
    min-height: 400px;
  }

  .about-founder-photo {
    width: min(70vw, 216px);
  }

  .about-founder-visual figcaption {
    width: min(178px, 64vw);
  }

  .about-method-arc {
    gap: 6px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-editorial *,
  .about-editorial *::before,
  .about-editorial *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }

  .about-editorial :is(.about-primary-link, .about-secondary-link, .about-nav-action, .about-map-ledger article):hover {
    transform: none;
  }
}

/* Single mobile charts belong to the page scroll. */
@media (max-width: 640px) {
  .private-maps-active .private-maps-stage:has(.chart-wheel-stage:not(.is-multiple-chart)) {
    height: auto;
    min-height: 0;
    overflow: visible;
  }

  .private-maps-active .private-maps-stage:has(.chart-wheel-stage:not(.is-multiple-chart)) .private-chart-wheel-inline,
  .private-maps-active .chart-wheel-stage:not(.is-multiple-chart) {
    height: auto;
    min-height: 0;
    overflow: visible !important;
    overscroll-behavior-y: auto;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card,
  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only {
    height: auto;
    min-height: 0;
  }
}

/* Multiple mobile charts also use the document scroll outside fullscreen. */
@media (max-width: 640px), (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .private-screen.private-maps-active:has(.chart-wheel-stage.is-multiple-chart),
  .private-screen.private-maps-active:has(.chart-wheel-stage.is-multiple-chart) .private-panel,
  .private-screen.private-maps-active:has(.chart-wheel-stage.is-multiple-chart) .private-maps-section,
  .private-screen.private-maps-active:has(.chart-wheel-stage.is-multiple-chart) .private-maps-stage,
  .private-screen.private-maps-active:has(.chart-wheel-stage.is-multiple-chart) .private-chart-wheel-inline {
    height: auto;
    max-height: none;
    min-height: 0;
    overflow: visible;
  }

  .private-screen.private-maps-active:has(.chart-wheel-stage.is-multiple-chart) {
    min-height: 100dvh;
  }

  .private-screen.private-maps-active
    .chart-wheel-stage.is-multiple-chart {
    height: auto !important;
    max-height: none;
    min-height: 0;
    overflow-y: visible;
    overscroll-behavior-y: auto;
  }
}

/* Keep portrait fullscreen charts compact instead of stretching their vertical slots. */
@media (orientation: portrait) and (max-width: 640px) {
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple):fullscreen .chart-wheel-main,
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple).is-chart-card-fallback-fullscreen .chart-wheel-main {
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple):fullscreen .chart-wheel-card,
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple).is-chart-card-fallback-fullscreen .chart-wheel-card {
    height: auto;
    min-height: 0;
    align-content: start;
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple):fullscreen .chart-svg-wrap-only,
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple).is-chart-card-fallback-fullscreen .chart-svg-wrap-only {
    height: auto;
    min-height: 0;
    align-items: flex-start;
    padding: clamp(18px, 3dvh, 32px) 6px 8px;
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple):fullscreen .floating-chart-panel.is-mobile-fullscreen-longitude,
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple).is-chart-card-fallback-fullscreen .floating-chart-panel.is-mobile-fullscreen-longitude {
    position: relative !important;
    inset: auto !important;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    width: calc(100% - 20px) !important;
    max-width: 520px;
    height: auto !important;
    max-height: min(44dvh, 430px) !important;
    margin: 2px auto 22px;
    overflow: hidden;
    transform: none !important;
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple):fullscreen .floating-chart-panel.is-mobile-fullscreen-longitude .floating-panel-header,
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple).is-chart-card-fallback-fullscreen .floating-chart-panel.is-mobile-fullscreen-longitude .floating-panel-header {
    cursor: default;
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple):fullscreen .floating-chart-panel.is-mobile-fullscreen-longitude .floating-panel-content,
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple).is-chart-card-fallback-fullscreen .floating-chart-panel.is-mobile-fullscreen-longitude .floating-panel-content {
    min-height: 0;
    max-height: calc(min(44dvh, 430px) - 45px);
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot,
  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple {
    grid-template-rows: auto auto;
    align-content: start;
    gap: 4px;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple {
    display: block;
    width: 100%;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1;
    margin: 0;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple .chart-wheel-svg,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple .chart-wheel-svg {
    display: block;
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
  }
}

/* Mobile hero diagram: preserve the three-map narrative without shrinking it horizontally. */
.astroanamnesis-svg .aa-mobile-observer-connectors {
  display: none;
}

@media (max-width: 520px) {
  .landing-hero .landing-astro-preview {
    width: 100%;
    margin-top: 14px;
    padding-bottom: 18px;
    overflow: visible;
  }

  .landing-hero .landing-astro-system,
  .landing-hero .landing-astro-visual {
    min-height: 0;
    padding: 0;
    overflow: visible;
  }

  .landing-hero .landing-astro-system > .astroanamnesis-svg,
  .landing-hero .landing-astro-image {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: 560 / 1980;
    margin-inline: auto;
    overflow: visible;
  }

  .astroanamnesis-svg .aa-tropical-sequence {
    transform: translate(800px, 315px);
  }

  .astroanamnesis-svg .aa-sideral-sequence {
    transform: translate(800px, 895px);
  }

  .astroanamnesis-svg .aa-memory-sequence {
    transform: translate(800px, 1475px);
  }

  .astroanamnesis-svg .aa-observer-sequence {
    transform: translate(800px, 1890px);
  }

  .astroanamnesis-svg .aa-desktop-observer-connectors {
    display: none;
  }

  .astroanamnesis-svg .aa-mobile-observer-connectors {
    display: block;
    opacity: 0.58;
  }
}

/* Keep multiple-chart data sheets inside short landscape phone viewports. */
@media (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .private-maps-active .chart-wheel-stage.is-multiple-chart .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace-multiple:fullscreen .floating-chart-panel:not([hidden]),
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]) {
    position: fixed !important;
    inset: auto 8px max(8px, env(safe-area-inset-bottom)) !important;
    z-index: 160 !important;
    display: grid;
    width: auto !important;
    max-width: none !important;
    height: auto !important;
    max-height: min(72dvh, 420px) !important;
    overflow: hidden;
    border-radius: 10px;
    margin: 0 !important;
    transform: none !important;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .floating-chart-panel:not([hidden]) .floating-panel-header,
  .chart-wheel-workspace-multiple:fullscreen .floating-chart-panel:not([hidden]) .floating-panel-header,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]) .floating-panel-header {
    position: sticky;
    z-index: 3;
    top: 0;
    min-height: 42px;
    cursor: default;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .floating-chart-panel:not([hidden]) .floating-panel-content,
  .chart-wheel-workspace-multiple:fullscreen .floating-chart-panel:not([hidden]) .floating-panel-content,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]) .floating-panel-content {
    min-height: 0;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .floating-chart-panel:not([hidden]) .floating-resizer,
  .chart-wheel-workspace-multiple:fullscreen .floating-chart-panel:not([hidden]) .floating-resizer,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .floating-chart-panel:not([hidden]) .floating-resizer {
    display: none;
  }
}

/* Match the nodal chart to the compact fullscreen treatment used by single charts. */
@media (orientation: portrait) and (max-width: 640px) {
  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:fullscreen,
  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace.is-chart-card-fallback-fullscreen {
    display: block;
    width: 100vw;
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:fullscreen .chart-wheel-main,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen
    .chart-wheel-main,
  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:fullscreen .chart-wheel-card-nodal,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen
    .chart-wheel-card-nodal {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:fullscreen .chart-wheel-card-nodal,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen
    .chart-wheel-card-nodal {
    border: 0;
    border-radius: 0;
    padding: 0 0 18px;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:fullscreen
    .chart-wheel-card-nodal
    > .chart-card-header,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen
    .chart-wheel-card-nodal
    > .chart-card-header {
    position: sticky;
    top: 0;
    margin: 0;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:fullscreen .nodal-schema-layout,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen
    .nodal-schema-layout {
    display: block;
    width: 100%;
    min-height: 0;
  }

  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:fullscreen .nodal-wheel-stack,
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen
    .nodal-wheel-stack {
    width: min(calc(100vw - 56px), 520px);
    max-width: none;
    margin: clamp(12px, 2dvh, 20px) auto 24px;
  }
}

/* Smartphone motion: compact, vertical reveals that do not pull the layout sideways. */
@media (max-width: 720px), (max-height: 500px) and (pointer: coarse) {
  @media (prefers-reduced-motion: no-preference) {
    .landing-screen .landing-reveal {
      transform: translate3d(0, 12px, 0);
      filter: blur(2px);
      transition-duration: 480ms;
      transition-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .landing-screen .landing-reveal.is-visible {
      transform: translate3d(0, 0, 0);
      filter: blur(0);
    }

    .js .js-scroll-reveal .reveal-slide,
    .js .js-scroll-reveal.reveal-slide,
    .js .js-card-reveal .reveal-card {
      transition-duration: 500ms;
      transition-timing-function: cubic-bezier(0.2, 0.75, 0.25, 1);
    }

    .js .js-scroll-reveal .reveal-slide-left,
    .js .js-scroll-reveal .reveal-slide-right,
    .js .js-scroll-reveal .reveal-slide-up,
    .js .js-scroll-reveal.reveal-slide-up {
      transform: translate3d(0, 14px, 0);
    }

    .js .js-card-reveal .reveal-card {
      transform: translate3d(0, 12px, 0);
    }

    .js .js-scroll-reveal.is-visible .reveal-slide-left,
    .js .js-scroll-reveal.is-visible .reveal-slide-right {
      transition-delay: 40ms;
    }

    .js .js-card-reveal.is-visible .reveal-card {
      transition-delay: 30ms;
    }

    .js .js-card-reveal.is-visible .reveal-card:nth-child(2) {
      transition-delay: 70ms;
    }

    .js .js-card-reveal.is-visible .reveal-card:nth-child(3) {
      transition-delay: 110ms;
    }

    .js .js-card-reveal.is-visible .reveal-card:nth-child(n + 4) {
      transition-delay: 140ms;
    }

    .landing-feature-grid article.is-visible .landing-feature-icon,
    .landing-pro-grid article.is-visible span {
      animation-duration: 480ms;
    }
  }
}

/* Win the desktop grouping cascade on short viewports without affecting mobile. */
@media (min-width: 861px) and (max-height: 960px) {
  .private-sidebar .private-map-active-card {
    padding: 10px;
  }

  .private-sidebar .private-map-control-card,
  .private-sidebar .private-map-actions {
    padding: 10px;
  }

  .private-sidebar .private-map-controls,
  .private-sidebar .private-map-actions {
    gap: 8px;
  }

  .private-sidebar {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--accent) 38%, var(--line)) transparent;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .private-sidebar::-webkit-scrollbar {
    width: 6px;
  }

  .private-sidebar::-webkit-scrollbar-track {
    background: transparent;
  }

  .private-sidebar::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: color-mix(in srgb, var(--accent) 38%, var(--line));
  }

  .private-sidebar::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--accent) 56%, var(--line));
  }

  .private-sidebar .private-sidebar-scroll {
    min-height: auto;
    flex: 0 0 auto;
    overflow: visible;
    padding-right: 0;
  }

  .private-sidebar .private-sidebar-bottom {
    margin-top: 0;
  }
}

/* Prevent the triangular multiple-chart composition from colliding on compact desktops. */
@media (min-width: 1321px) and (max-width: 1960px) {
  .private-maps-active .chart-wheel-stage.is-multiple-chart {
    padding: clamp(18px, 1.5vw, 28px);
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-main,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-workspace-multiple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-main {
    display: block;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    gap: clamp(26px, 2vw, 38px) clamp(20px, 1.6vw, 30px);
    width: min(100%, 1520px);
    margin-inline: auto;
    padding: 0 clamp(4px, 0.8vw, 14px) clamp(18px, 1.5vw, 28px);
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    position: static;
    grid-row: 1;
    grid-column: 1 / -1;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-content: space-between;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    position: static;
    width: 100%;
    min-width: 0;
    transform: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-left {
    grid-row: 2;
    grid-column: 1 / 3;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-top {
    grid-row: 2;
    grid-column: 3 / 5;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-right {
    grid-row: 3;
    grid-column: 2 / 4;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    display: grid;
    width: 100%;
    min-width: 0;
    gap: 10px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    padding: clamp(10px, 1vw, 16px);
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header {
    position: static;
    display: flex;
    width: 100%;
    min-width: 0;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
    margin: 0;
    transform: none;
    text-align: center;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    position: static;
    min-width: 0;
    text-align: center;
    transform: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple,
  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-svg-wrap-triple .chart-wheel-svg {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
  }
}

/* Planet visibility control shared by every chart view. */
.is-chart-planet-hidden {
  display: none !important;
}

.chart-card-header-actions > .chart-card-actions,
.chart-multiple-topbar > .chart-card-actions,
.chart-multiple-topbar-actions > .chart-card-actions {
  flex-shrink: 0;
}

.chart-card-header-actions > .chart-card-actions {
  border-left: 1px solid var(--line);
  padding-left: 8px;
}

.chart-planet-visibility-button {
  background: color-mix(in srgb, var(--accent-soft) 38%, var(--surface));
}

.chart-planet-visibility-button.is-filtered {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}

.chart-planet-visibility-dialog {
  width: min(840px, calc(100vw - 32px));
  max-height: min(88dvh, 760px);
  overflow: hidden;
}

.chart-planet-visibility-modal {
  max-height: min(88dvh, 760px);
  grid-template-rows: auto auto auto minmax(0, 1fr) auto auto;
  overflow: hidden;
}

.chart-map-settings-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-soft);
  padding: 4px;
}

.chart-map-settings-tabs button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.chart-map-settings-tabs button:hover,
.chart-map-settings-tabs button:focus-visible {
  color: var(--text);
  outline: 0;
}

.chart-map-settings-tabs button[aria-selected="true"] {
  background: var(--surface);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--text) 10%, transparent);
  color: var(--accent);
}

.chart-map-settings-scroll [data-chart-settings-panel][hidden] {
  display: none;
}

.chart-map-settings-scroll {
  display: grid;
  min-height: 0;
  gap: 14px;
  overflow: auto;
  overscroll-behavior: contain;
  padding-right: 3px;
  scrollbar-width: thin;
}

.chart-planet-visibility-options,
.chart-aspect-visibility-options,
.chart-house-settings-panel {
  display: grid;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent-soft) 18%, var(--surface));
  padding: 12px;
}

.chart-aspect-visibility-options {
  background: var(--surface);
}

.chart-house-settings-panel {
  align-content: start;
  gap: 16px;
  background: var(--surface);
  padding: 18px;
}

.chart-house-settings-heading {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.chart-house-settings-heading > div {
  display: grid;
  gap: 4px;
}

.chart-house-settings-heading strong,
.chart-house-system-preview strong {
  color: var(--text);
  font-size: 14px;
}

.chart-house-settings-heading small {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
}

.chart-house-settings-icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 19px;
}

.chart-house-system-field {
  display: grid;
  gap: 7px;
}

.chart-house-system-field > span {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.chart-house-system-field select {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  padding: 0 42px 0 13px;
  font: inherit;
  font-size: 14px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chart-house-system-field select:hover {
  border-color: var(--accent-line);
}

.chart-house-system-field select:focus-visible {
  border-color: var(--accent);
  outline: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}

.chart-house-system-preview {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 14px 2px;
}

.chart-house-system-preview > span {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  color: var(--accent);
  font-family: "Astro Jupiter", Georgia, serif;
  font-size: 14px;
  font-weight: 700;
}

.chart-house-system-preview > div {
  display: grid;
  gap: 3px;
}

.chart-house-system-preview p,
.chart-house-settings-note {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.5;
}

.chart-house-settings-note {
  border-left: 2px solid var(--accent-line);
  padding-left: 10px;
}

.chart-house-settings-note strong {
  color: var(--text);
}

.chart-planet-visibility-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chart-planet-visibility-toolbar strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.chart-planet-visibility-toolbar > div {
  display: grid;
  gap: 3px;
}

.chart-planet-visibility-toolbar small {
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.35;
}

.chart-planet-visibility-toolbar .secondary-action {
  min-height: 34px;
  padding: 7px 10px;
  font-size: 12px;
  white-space: nowrap;
}

.chart-planet-visibility-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.chart-planet-visibility-option {
  display: grid;
  grid-template-columns: 30px minmax(90px, 1fr) auto auto;
  min-width: 0;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  cursor: default;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  padding: 8px 10px;
  transition: border-color 160ms ease, background-color 160ms ease;
}

.chart-planet-visibility-option:hover,
.chart-planet-visibility-option:focus-within {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
}

.chart-planet-visibility-symbol {
  color: var(--planet-option-color);
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

.chart-planet-visibility-symbol-text {
  font-family: inherit;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.035em;
}

.chart-planet-visibility-fixed {
  grid-column: 3 / 5;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-align: right;
}

.chart-planet-color-editor-symbol-text {
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.025em;
}

/* Contacto público y ayuda desde el área privada. */
.contact-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: min(90dvh, 720px);
  overflow: hidden;
}

.contact-modal {
  display: grid;
  max-height: min(90dvh, 720px);
  gap: 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 24px;
}

.contact-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.contact-header .eyebrow {
  margin: 0 0 5px;
}

.contact-header h2,
.contact-header p,
.contact-success h3,
.contact-success p {
  margin: 0;
}

.contact-header h2 {
  color: var(--text);
  font-size: 25px;
  line-height: 1.15;
}

.contact-header #contact-intro {
  margin-top: 7px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.contact-form {
  display: grid;
  gap: 12px;
}

.contact-form[hidden],
.contact-success[hidden] {
  display: none;
}

.contact-field {
  display: grid;
  gap: 6px;
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
}

.contact-field :is(input, select, textarea) {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.contact-field :is(input, select) {
  min-height: 43px;
  padding: 0 12px;
}

.contact-field textarea {
  min-height: 120px;
  resize: vertical;
  padding: 11px 12px;
  line-height: 1.5;
}

.contact-field :is(input, select, textarea):focus-visible {
  border-color: var(--accent);
  outline: 3px solid color-mix(in srgb, var(--accent) 18%, transparent);
  outline-offset: 1px;
}

.contact-field :is(input, select, textarea)[aria-invalid="true"] {
  border-color: color-mix(in srgb, var(--danger) 72%, var(--line));
}

.contact-field-error {
  min-height: 15px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.35;
}

.contact-status {
  min-height: 18px;
  margin: 0;
}

.contact-actions {
  display: flex;
  justify-content: flex-end;
}

.contact-actions .primary-action {
  min-height: 44px;
}

.contact-success {
  display: grid;
  justify-items: start;
  gap: 10px;
  border-top: 1px solid var(--line);
  padding-top: 20px;
}

.contact-success h3 {
  color: var(--text);
  font-size: 20px;
}

.contact-success p {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.contact-success .secondary-action {
  margin-top: 6px;
}

@media (max-width: 520px) {
  .contact-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .contact-modal {
    max-height: calc(100dvh - 24px);
    gap: 17px;
    padding: 20px 18px;
  }

  .contact-actions .primary-action,
  .contact-success .secondary-action {
    width: 100%;
  }
}

.chart-planet-visibility-label {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.chart-planet-visibility-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.chart-planet-visibility-check {
  display: inline-grid;
  grid-template-columns: auto 18px;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  font-weight: 650;
  white-space: nowrap;
}

.chart-planet-visibility-check:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.48;
}

.chart-aspect-visibility-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.chart-aspect-visibility-group {
  min-width: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line);
  padding: 12px 0 0;
}

.chart-aspect-visibility-group legend {
  display: flex;
  width: 100%;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0 0 9px;
}

.chart-aspect-visibility-group legend strong {
  color: var(--text);
  font-size: 12px;
}

.chart-aspect-visibility-group legend small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-align: right;
}

.chart-aspect-visibility-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.chart-aspect-visibility-option {
  display: grid;
  grid-template-columns: 18px 28px minmax(0, 1fr);
  min-width: 0;
  min-height: 44px;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: color-mix(in srgb, var(--surface-soft) 54%, var(--surface));
  cursor: pointer;
  padding: 7px 9px;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.chart-aspect-visibility-option:hover,
.chart-aspect-visibility-option:focus-within,
.chart-aspect-visibility-option:has(input:checked) {
  border-color: color-mix(in srgb, var(--aspect-option-color) 44%, var(--line));
  background: color-mix(in srgb, var(--aspect-option-color) 7%, var(--surface));
}

.chart-aspect-visibility-option:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 17%, transparent);
}

.chart-aspect-visibility-option input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}

.chart-aspect-color-trigger {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--aspect-option-color);
  cursor: pointer;
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-weight: 700;
  line-height: 1;
  padding: 0;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.chart-aspect-color-trigger:hover,
.chart-aspect-color-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--aspect-option-color) 45%, var(--line));
  background: color-mix(in srgb, var(--aspect-option-color) 10%, var(--surface));
}

.chart-aspect-color-trigger:active {
  transform: translateY(1px);
}

.chart-aspect-color-trigger:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

.chart-aspect-visibility-symbol {
  font-size: 20px;
}

.chart-aspect-visibility-copy {
  display: flex;
  min-width: 0;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  cursor: pointer;
}

.chart-aspect-visibility-copy strong {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.chart-aspect-visibility-copy small {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.chart-aspect-color-hint {
  margin: -2px 0 0;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.chart-aspect-color-editor {
  display: grid;
  gap: 12px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line));
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--accent-soft) 22%, var(--surface));
  padding: 12px;
}

.chart-aspect-color-editor[hidden] {
  display: none;
}

.chart-aspect-color-editor > header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.chart-aspect-color-editor-heading {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.chart-aspect-color-editor-symbol {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--aspect-option-color) 46%, var(--line));
  border-radius: 7px;
  background: var(--surface);
  color: var(--aspect-option-color);
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 21px;
  font-weight: 750;
}

.chart-aspect-color-editor h3,
.chart-aspect-color-editor p {
  margin: 0;
}

.chart-aspect-color-editor h3 {
  color: var(--text);
  font-size: 13px;
  line-height: 1.3;
}

.chart-aspect-color-editor-heading p {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10.5px;
  line-height: 1.4;
}

.chart-aspect-color-editor .icon-close {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
}

.chart-aspect-color-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chart-aspect-color-swatch {
  display: inline-grid;
  width: 32px;
  height: 32px;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  cursor: pointer;
  padding: 5px;
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.chart-aspect-color-swatch > span {
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: var(--aspect-swatch-color);
}

.chart-aspect-color-swatch:hover,
.chart-aspect-color-swatch[aria-pressed="true"] {
  border-color: var(--aspect-swatch-color);
}

.chart-aspect-color-swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--aspect-swatch-color) 24%, transparent);
}

.chart-aspect-color-swatch:active {
  transform: translateY(1px);
}

.chart-aspect-color-swatch:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

.chart-aspect-color-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chart-aspect-color-actions > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}

.chart-aspect-color-actions .secondary-action {
  min-height: 34px;
  padding: 6px 10px;
  font-size: 10.5px;
}

.chart-aspect-custom-color {
  display: grid;
  grid-template-columns: auto 34px auto;
  align-items: center;
  gap: 8px;
  color: var(--text);
  cursor: pointer;
  font-size: 11px;
  font-weight: 650;
}

.chart-aspect-custom-color input {
  width: 34px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  cursor: pointer;
  padding: 2px;
}

.chart-aspect-custom-color input:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  outline-offset: 2px;
}

.chart-aspect-custom-color output {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
}

.chart-aspect-orb-settings {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.chart-aspect-orb-settings > summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  list-style: none;
  padding: 13px 2px;
}

.chart-aspect-orb-settings > summary::-webkit-details-marker {
  display: none;
}

.chart-aspect-orb-settings > summary > span:first-child {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.chart-aspect-orb-settings > summary strong {
  color: var(--text);
  font-size: 13px;
  line-height: 1.25;
}

.chart-aspect-orb-settings > summary small,
.chart-aspect-orb-heading p,
.chart-aspect-orb-help {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
}

.chart-aspect-orb-settings > summary:hover strong,
.chart-aspect-orb-settings > summary:focus-visible strong {
  color: var(--accent);
}

.chart-aspect-orb-settings > summary:focus-visible {
  border-radius: 5px;
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 2px;
}

.chart-aspect-orb-summary {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1.2;
  padding: 4px 7px;
  white-space: nowrap;
}

.chart-aspect-orb-summary-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
}

.chart-aspect-orb-toggle-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 750;
  line-height: 1.2;
  white-space: nowrap;
}

.chart-aspect-orb-toggle-label::after {
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-1px, 1px);
  transition: transform 180ms ease;
}

.chart-aspect-orb-settings[open] .chart-aspect-orb-toggle-label::after {
  transform: rotate(225deg) translate(-1px, 1px);
}

.chart-aspect-orb-settings > summary:hover .chart-aspect-orb-toggle-label,
.chart-aspect-orb-settings > summary:focus-visible .chart-aspect-orb-toggle-label {
  color: var(--accent-strong);
}

.chart-aspect-orb-body {
  display: grid;
  gap: 11px;
  padding: 2px 2px 14px;
}

.chart-aspect-orb-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chart-aspect-orb-heading .secondary-action {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 11px;
  white-space: nowrap;
}

.chart-aspect-orb-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px 12px;
}

.chart-aspect-orb-list.is-empty::before {
  grid-column: 1 / -1;
  color: var(--muted);
  content: "No hay tipos de aspecto activados.";
  font-size: 11px;
  padding: 4px 0;
}

.chart-aspect-orb-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto 72px;
  min-width: 0;
  min-height: 40px;
  align-items: center;
  gap: 8px;
  border-top: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  padding: 5px 0;
}

.chart-aspect-orb-row[hidden] {
  display: none;
}

.chart-aspect-orb-symbol {
  font-size: 18px;
}

.chart-aspect-orb-name {
  min-width: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.chart-aspect-orb-angle {
  color: var(--muted);
  font-size: 10px;
  white-space: nowrap;
}

.chart-aspect-orb-field {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20px;
  align-items: center;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--muted);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.chart-aspect-orb-field:hover,
.chart-aspect-orb-field:focus-within {
  border-color: var(--accent);
}

.chart-aspect-orb-field:focus-within {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 14%, transparent);
}

.chart-aspect-orb-field input {
  width: 100%;
  min-width: 0;
  min-height: 34px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  padding: 0 2px 0 9px;
}

.chart-aspect-orb-field > span:last-child {
  font-size: 11px;
  text-align: left;
}

.chart-aspect-orb-row.is-disabled,
.chart-aspect-orb-settings.is-sign-mode .chart-aspect-orb-heading {
  opacity: 0.52;
}

.chart-aspect-orb-field:has(input:disabled) {
  cursor: not-allowed;
  background: var(--surface-soft);
}

.chart-aspect-orb-help {
  border-left: 2px solid var(--accent-line);
  padding-left: 9px;
}

.chart-conjunction-cusp-rule {
  display: grid;
  gap: 8px;
  border-left: 3px solid color-mix(in srgb, var(--accent) 62%, var(--accent-line));
  background: color-mix(in srgb, var(--accent-soft) 48%, transparent);
  padding: 10px 12px;
}

.chart-conjunction-cusp-rule-main {
  display: grid;
  grid-template-columns: 27px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
}

.chart-conjunction-cusp-rule-symbol {
  display: inline-grid;
  width: 27px;
  height: 27px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
}

.chart-conjunction-cusp-rule-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.chart-conjunction-cusp-rule-heading strong {
  color: var(--text);
  font-size: 12px;
  line-height: 1.3;
}

.chart-conjunction-cusp-rule-heading span {
  flex: 0 0 auto;
  border: 1px solid var(--accent-line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent-strong);
  font-size: 9.5px;
  font-weight: 750;
  line-height: 1.2;
  padding: 3px 7px;
  white-space: nowrap;
}

.chart-conjunction-cusp-rule-main p,
.chart-conjunction-cusp-example p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.48;
}

.chart-conjunction-cusp-example {
  margin-left: 36px;
}

.chart-conjunction-cusp-example > summary {
  width: fit-content;
  border-radius: 4px;
  color: var(--accent);
  cursor: pointer;
  font-size: 11px;
  font-weight: 750;
  list-style-position: outside;
}

.chart-conjunction-cusp-example > summary:hover {
  color: var(--accent-strong);
}

.chart-conjunction-cusp-example > summary:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 58%, transparent);
  outline-offset: 3px;
}

.chart-conjunction-cusp-example[open] > summary {
  margin-bottom: 3px;
}

.chart-conjunction-cusp-rule.is-sign-mode {
  opacity: 0.72;
}

.chart-conjunction-cusp-rule.is-conjunction-disabled:not(.is-sign-mode)
  .chart-conjunction-cusp-rule-heading span {
  border-color: var(--line);
  color: var(--muted);
}

.chart-aspect-visibility-note {
  margin: 0;
  border-left: 2px solid var(--accent-line);
  color: var(--muted);
  font-size: 11px;
  line-height: 1.45;
  padding-left: 9px;
}

.chart-planet-visibility-status {
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 640px), (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .chart-planet-visibility-dialog {
    width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
  }

  .chart-planet-visibility-modal {
    max-height: calc(100dvh - 16px);
    gap: 12px;
    padding: 16px;
  }

  .chart-planet-visibility-options {
    padding: 10px;
  }

  .chart-aspect-visibility-options {
    padding: 10px;
  }

  .chart-house-settings-panel {
    padding: 14px;
  }

  .chart-planet-visibility-option {
    min-height: 46px;
    padding: 7px 8px;
  }

  .chart-planet-visibility-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-aspect-visibility-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-aspect-orb-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-planet-visibility-modal footer {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }

  .chart-planet-visibility-modal footer button {
    width: 100%;
    min-height: 44px;
  }
}

@media (max-width: 340px) {
  .chart-planet-visibility-list {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 420px) {
  .chart-planet-visibility-toolbar {
    align-items: flex-start;
  }

  .chart-planet-visibility-toolbar .secondary-action {
    max-width: 132px;
    white-space: normal;
  }

  .chart-aspect-visibility-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .chart-aspect-visibility-group legend {
    display: grid;
    justify-content: start;
  }

  .chart-aspect-visibility-group legend small {
    text-align: left;
  }

  .chart-aspect-orb-settings > summary {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .chart-aspect-orb-summary-actions {
    justify-content: space-between;
    gap: 10px;
  }

  .chart-aspect-orb-heading {
    align-items: flex-start;
  }

  .chart-aspect-color-actions {
    display: grid;
    align-items: stretch;
  }

  .chart-aspect-color-actions > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .chart-aspect-color-actions .secondary-action {
    width: 100%;
    white-space: normal;
  }

  .chart-aspect-custom-color {
    grid-template-columns: minmax(0, 1fr) 38px auto;
  }

  .chart-conjunction-cusp-rule-heading {
    display: grid;
    justify-content: start;
  }

  .chart-conjunction-cusp-rule-heading span {
    width: fit-content;
    white-space: normal;
  }

  .chart-conjunction-cusp-example {
    margin-left: 36px;
  }

  .chart-planet-visibility-option {
    grid-template-columns: 30px minmax(0, 1fr) auto;
    grid-template-rows: repeat(2, auto);
  }

  .chart-planet-visibility-symbol,
  .chart-planet-visibility-label {
    grid-row: 1 / 3;
  }

  .chart-planet-aspect-check {
    grid-column: 3;
    grid-row: 2;
  }
}

/* Keep the essential map controls visible when the desktop/tablet menu is collapsed. */
.private-map-collapsed-context-slot {
  display: none;
}

@media (min-width: 641px) {
  .private-screen.private-maps-active.sidebar-collapsed .private-maps-section {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .private-screen.private-maps-active.sidebar-collapsed .private-map-collapsed-context-slot {
    position: relative;
    z-index: 12;
    display: block;
    min-width: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 84%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
    padding: 12px 16px;
  }

  .private-map-collapsed-context-slot .private-map-context {
    display: grid;
    grid-template-columns: minmax(210px, 1.1fr) minmax(220px, 1fr) 52px;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    margin: 0;
    border: 0;
    padding: 0;
  }

  .private-map-collapsed-context-slot .private-map-active-card,
  .private-map-collapsed-context-slot .private-map-control-card,
  .private-map-collapsed-context-slot .private-map-controls,
  .private-map-collapsed-context-slot .private-map-actions {
    width: 100%;
    min-width: 0;
    margin: 0;
  }

  .private-map-collapsed-context-slot .private-map-active-card {
    align-self: stretch;
    align-content: start;
    height: auto;
    min-height: 76px;
    padding: 10px 12px;
  }

  .private-map-collapsed-context-slot .private-map-active-meta {
    grid-template-columns: repeat(2, minmax(0, auto));
    column-gap: 10px;
  }

  .private-map-collapsed-context-slot .private-map-control-card,
  .private-map-collapsed-context-slot .private-map-controls {
    height: 100%;
  }

  .private-map-collapsed-context-slot .private-map-controls {
    align-content: start;
    padding: 10px;
  }

  .private-map-collapsed-context-slot .chart-wheel-controls > label:first-child {
    gap: 4px;
  }

  .private-map-collapsed-context-slot
    .private-map-controls
    .chart-type-help
    [role="tooltip"] {
    top: calc(100% + 8px);
    right: 0;
    bottom: auto;
    left: auto;
    width: min(280px, calc(100vw - 32px));
    max-width: calc(100vw - 32px);
    transform: translateY(-4px);
  }

  .private-map-collapsed-context-slot
    .private-map-controls
    .chart-type-help:is(:hover, :focus-visible)
    [role="tooltip"] {
    transform: translateY(0);
  }

  .private-map-collapsed-context-slot .private-map-actions {
    display: grid;
    height: auto;
    align-self: stretch;
    align-items: stretch;
    justify-items: stretch;
  }

  .private-map-collapsed-context-slot #private-map-prompt {
    align-self: stretch;
    width: 100%;
    min-width: 0;
    height: 100%;
    min-height: 76px;
    padding: 0;
  }

  .private-map-collapsed-context-slot #private-map-prompt > span {
    display: none;
  }

  .private-map-collapsed-context-slot #private-map-prompt > svg {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }

  .private-map-collapsed-context-slot :is(#private-map-list, .private-map-offer) {
    display: none !important;
  }

  .private-screen.private-maps-active.sidebar-collapsed .private-maps-stage,
  .private-screen.private-maps-active.sidebar-collapsed .private-maps-chat {
    height: 100%;
    min-height: 0;
  }
}

@media (min-width: 981px) {
  .private-map-collapsed-context-slot .private-map-context {
    grid-template-columns: minmax(240px, 1.15fr) minmax(250px, 1fr) minmax(156px, auto);
  }

  .private-map-collapsed-context-slot #private-map-prompt {
    align-self: stretch;
    width: 100%;
    min-width: 156px;
    height: 100%;
    min-height: 76px;
    padding: 0 16px;
  }

  .private-map-collapsed-context-slot .private-map-actions {
    align-self: stretch;
  }

  .private-map-collapsed-context-slot #private-map-prompt > span {
    display: inline;
  }
}

@media (min-width: 1200px) {
  .private-map-collapsed-context-slot .chart-solar-return-controls {
    grid-template-columns: minmax(180px, 1fr) auto;
    align-items: end;
    column-gap: 12px;
  }

  .private-map-collapsed-context-slot .chart-solar-return-location {
    grid-column: 1 / -1;
  }

  .private-map-collapsed-context-slot .chart-solar-return-location-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Fullscreen Astroanamnesis views: one centered chart above two lower charts. */
@media (orientation: landscape) {
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen {
    --fullscreen-multiple-card-width: clamp(
      280px,
      min(35vw, 62dvh),
      900px
    );
    box-sizing: border-box;
    display: block !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    scroll-snap-type: x proximity;
    scrollbar-gutter: stable;
    -webkit-overflow-scrolling: touch;
    padding: 6px !important;
  }

  .chart-wheel-workspace-multiple:fullscreen > .chart-wheel-main,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen > .chart-wheel-main {
    display: block !important;
    box-sizing: border-box;
    width: max(100%, calc(var(--fullscreen-multiple-card-width) + var(--fullscreen-multiple-card-width) + 28px)) !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  .chart-wheel-workspace-multiple:fullscreen > .chart-wheel-main:not(.is-chart-touch-zoomed),
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen > .chart-wheel-main:not(.is-chart-touch-zoomed) {
    touch-action: pan-x pan-y;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-triple {
    position: relative;
    display: block !important;
    box-sizing: border-box;
    width: max(100%, calc(var(--fullscreen-multiple-card-width) + var(--fullscreen-multiple-card-width) + 28px)) !important;
    max-width: none !important;
    min-width: 100% !important;
    height: max(
      calc(100dvh - 12px),
      calc(clamp(150px, 31dvh, 345px) + var(--fullscreen-multiple-card-width) + 30px)
    ) !important;
    min-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-multiple-topbar,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-multiple-topbar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    z-index: 8;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-height: 38px;
    justify-self: start;
    margin: 0 !important;
    padding: 2px 4px !important;
    background: var(--surface-soft);
    transform: none !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot {
    position: absolute !important;
    box-sizing: border-box;
    width: var(--fullscreen-multiple-card-width) !important;
    max-width: var(--fullscreen-multiple-card-width) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    transform: none !important;
    scroll-snap-align: start;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-left,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-left {
    top: clamp(150px, 31dvh, 345px) !important;
    right: auto !important;
    left: clamp(8px, 2.5vw, 40px) !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-top,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-top {
    top: 44px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-triple-slot-right,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-triple-slot-right {
    top: clamp(150px, 31dvh, 345px) !important;
    right: clamp(8px, 2.5vw, 40px) !important;
    left: auto !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple {
    position: relative;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 4px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-wheel-card-triple .chart-card-header,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-wheel-card-triple .chart-card-header {
    position: static !important;
    display: flex;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    transform: none !important;
  }

  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple,
  .chart-wheel-workspace-multiple:fullscreen .chart-svg-wrap-triple .chart-wheel-svg,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen .chart-svg-wrap-triple .chart-wheel-svg {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
  }
}

/* Collapsed desktop maps: use the reclaimed sidebar width for all three charts. */
@media (min-width: 1500px) and (max-width: 1960px) {
  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active) .chart-wheel-stage.is-multiple-chart {
    box-sizing: border-box;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
    padding: clamp(12px, 1vw, 20px);
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    :is(.chart-wheel-workspace-multiple, .chart-wheel-main, .chart-wheel-triple) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: 0;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-triple {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas:
      "topbar topbar topbar"
      "tropical sideral memoria";
    grid-template-rows: auto auto;
    align-items: start;
    gap: clamp(8px, 0.7vw, 14px);
    margin: 0;
    padding: 0 0 12px;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-multiple-topbar {
    grid-area: topbar;
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    justify-self: stretch;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot {
    position: static;
    width: 100%;
    max-width: none;
    min-width: 0;
    transform: none;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot-left {
    grid-area: tropical;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot-top {
    grid-area: sideral;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot-right {
    grid-area: memoria;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple {
    width: 100%;
    max-width: none;
    min-width: 0;
    gap: 4px;
    overflow: hidden;
    padding: clamp(6px, 0.55vw, 10px);
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    :is(.chart-svg-wrap-triple, .chart-svg-wrap-triple .chart-wheel-svg) {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    margin: 0;
  }
}

/* Compact desktop maps: scroll technical links and group download actions. */
@media (min-width: 641px) and (max-width: 1280px) {
  .private-maps-active .chart-technical-more-menu {
    height: 30px;
  }

  .private-maps-active .chart-technical-more-button {
    width: 30px;
    min-width: 30px;
    height: 30px;
    min-height: 30px;
  }

  .private-maps-active .chart-card-header-actions > .chart-card-actions {
    gap: 4px;
    padding-left: 6px;
  }

  .private-maps-active .chart-card-header-actions > .chart-card-actions .chart-card-action-button:not(.chart-card-interpret-button) {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }

  .private-maps-active :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-card-interpret-button {
    height: 30px;
    padding-inline: 10px;
    font-size: 11.5px;
  }

  .private-maps-active .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card > .chart-card-header {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .private-maps-active .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card > .chart-card-header > div:not(.chart-card-header-actions) {
    min-width: 0;
    max-width: min(42%, 290px);
  }

  .private-maps-active .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card > .chart-card-header > .chart-card-header-actions {
    min-width: 0;
    flex: 1 1 0;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-triple {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "tropical"
      "sideral"
      "memoria";
    align-items: start;
    gap: clamp(14px, 1.8vw, 22px);
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar {
    grid-area: topbar;
    position: static;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    margin: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
    background: color-mix(in srgb, var(--surface) 96%, var(--surface-soft));
    padding: 6px 8px;
    transform: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-multiple-topbar-composite {
    right: auto;
    left: auto;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot {
    position: static;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transform: none;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-left {
    grid-area: tropical;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-top {
    grid-area: sideral;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-triple-slot-right {
    grid-area: memoria;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart .chart-wheel-card-triple {
    position: relative;
    display: grid;
    grid-template-rows: auto auto;
    gap: 6px;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple .chart-card-header,
  .private-maps-active .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple-title-bottom .chart-card-header {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 30px;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 2px 6px;
    transform: none;
    text-align: center;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple .chart-card-header h3 {
    display: block;
    width: 100%;
    overflow: hidden;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .private-maps-active .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple .chart-card-header > div:not(.chart-card-header-actions) {
    position: static;
    width: 100%;
    min-width: 0;
    margin: 0;
    transform: none;
    text-align: center;
  }

  .private-maps-active .chart-card-header-actions,
  .private-maps-active .chart-multiple-topbar,
  .private-maps-active .chart-multiple-topbar-actions {
    min-width: 0;
    align-items: center;
    gap: 6px;
    overflow: visible;
  }

  .private-maps-active .chart-multiple-topbar-actions {
    flex: 1 1 auto;
  }

  .private-maps-active :is(
    .chart-card-header-actions > .chart-tools,
    .chart-multiple-topbar > .chart-tools-multiple,
    .chart-multiple-topbar-actions > .chart-tools-multiple
  ) {
    width: auto;
    min-width: 0;
    min-height: 30px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .private-maps-active :is(
    .chart-card-header-actions > .chart-tools,
    .chart-multiple-topbar > .chart-tools-multiple,
    .chart-multiple-topbar-actions > .chart-tools-multiple
  )::-webkit-scrollbar {
    display: none;
  }

  .private-maps-active .chart-tools .chart-tool-link {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .private-maps-active .chart-tools-scroll-hint.is-visible {
    position: relative;
    z-index: 3;
    display: inline-flex;
    width: 18px;
    min-width: 18px;
    height: 30px;
    min-height: 30px;
    flex: 0 0 18px;
    align-self: center;
    align-items: center;
    justify-content: center;
    margin-left: -2px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: var(--accent);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    padding: 0;
    pointer-events: auto;
    cursor: pointer;
    transition:
      background 170ms ease,
      border-color 170ms ease,
      color 170ms ease,
      transform 170ms ease;
  }

  .private-maps-active .chart-tools-scroll-hint.is-visible::before {
    content: "\203A";
  }

  .private-maps-active .chart-tools-scroll-hint-prev.is-visible {
    margin-right: -2px;
    margin-left: 0;
  }

  .private-maps-active .chart-tools-scroll-hint-prev.is-visible::before {
    content: "\2039";
  }

  .private-maps-active .chart-tools-scroll-hint.is-visible:is(:hover, :focus-visible) {
    background: transparent;
    color: var(--accent-strong);
  }

  .private-maps-active .chart-tools-scroll-hint.is-visible:focus-visible {
    border-radius: 3px;
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  .private-maps-active .chart-tools-scroll-hint-next.is-visible:is(:hover, :focus-visible) {
    transform: translateX(1px);
  }

  .private-maps-active .chart-tools-scroll-hint-prev.is-visible:is(:hover, :focus-visible) {
    transform: translateX(-1px);
  }

  .private-maps-active :is(
    .chart-card-header-actions > .chart-card-actions,
    .chart-multiple-topbar > .chart-card-actions,
    .chart-multiple-topbar-actions > .chart-card-actions
  ) {
    position: relative;
    z-index: 4;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 5px;
    border-left: 1px solid var(--line);
    background: var(--surface);
    padding: 0 0 0 8px;
  }

  .private-maps-active .chart-card-action-direct-export {
    display: none;
  }

  .private-maps-active .chart-card-more-menu {
    position: relative;
    display: block;
  }

  .private-maps-active .chart-card-more-menu > summary {
    list-style: none;
  }

  .private-maps-active .chart-card-more-menu > summary::-webkit-details-marker {
    display: none;
  }

  .private-maps-active .chart-card-more-popover {
    position: absolute;
    z-index: 40;
    top: calc(100% + 8px);
    right: 0;
    display: grid;
    width: max-content;
    min-width: 184px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 30px color-mix(in srgb, var(--text) 15%, transparent);
    padding: 5px;
  }

  .private-maps-active .chart-card-more-popover button {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    align-items: center;
    gap: 9px;
    min-height: 40px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    padding: 0 10px;
    color: var(--text);
    font: inherit;
    font-size: 13px;
    text-align: left;
    cursor: pointer;
  }

  .private-maps-active .chart-card-more-popover button:is(:hover, :focus-visible) {
    background: var(--accent-soft);
    color: var(--accent);
    outline: 0;
  }

  .private-maps-active .chart-card-more-popover svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

/* Keep individual-chart table links and controls as one compact desktop group. */
@media (min-width: 641px) {
  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-card-header-actions
    > .chart-tools {
    width: max-content;
    max-width: 100%;
    flex: 0 1 auto;
  }

  .private-maps-active
    .chart-wheel-stage.is-multiple-chart
    .chart-multiple-topbar-actions
    > .chart-tools-multiple {
    width: max-content;
    max-width: 100%;
    flex: 0 1 auto;
  }

  .private-maps-active
    .chart-wheel-stage.is-multiple-chart
    .chart-multiple-topbar-subject
    > .chart-multiple-topbar-actions {
    justify-content: flex-end;
  }
}

/* Final landscape-phone safeguard. It intentionally comes after the compact
   desktop rules so the chart toolbar can never inherit their zero width. */
@media (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card
    > .chart-card-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: start;
    gap: 6px;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card
    > .chart-card-header
    > div:not(.chart-card-header-actions) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card
    > .chart-card-header
    > .chart-card-header-actions {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin-left: 0;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-card-header-actions
    > .chart-tools {
    width: auto;
    max-width: none;
    min-width: 0;
    min-height: 30px;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-card-header-actions
    > .chart-tools::-webkit-scrollbar {
    display: none;
  }

  .private-maps-active
    .chart-wheel-stage:not(.is-multiple-chart)
    .chart-card-header-actions
    > :is(.chart-technical-more-menu, .chart-card-actions) {
    flex: 0 0 auto;
  }
}

/*
 * Desktop maps with the navigation collapsed gain horizontal room, so an
 * individual wheel can become taller than the viewport area left below the
 * compact map context. Keep that extra size and expose it through a local
 * vertical scroll instead of clipping the lower labels of the chart.
 */
@media (min-width: 861px) {
  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart) {
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card:not(.chart-wheel-card-triple) {
    grid-template-rows: auto auto;
    height: auto;
    min-height: 100%;
    max-height: none;
    align-content: start;
    align-self: start;
    overflow: visible;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) {
    grid-template-rows: auto;
    height: auto;
    min-height: 100%;
    max-height: none;
    align-content: start;
    align-self: start;
    overflow: visible;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-main {
    height: auto;
    min-height: 0;
    max-height: none;
    place-items: start center;
    overflow: visible;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding-top: clamp(12px, 1.8vh, 22px);
    padding-bottom: clamp(92px, 10vh, 132px);
  }

  /*
   * Some individual wheels draw planets, degrees and leader lines outside the
   * geometric SVG box. SVG overflow is visible, but it does not increase the
   * box used by the surrounding card. This real bottom reserve makes those
   * details part of the scrollable workspace and keeps the card border below
   * the complete chart.
   */
  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart.has-chart-containment-space:not(.is-multiple-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only {
    padding-top: clamp(28px, 3.5vh, 46px);
    padding-bottom: clamp(132px, 15vh, 190px);
  }

  /*
   * Individual charts must always keep a real flex width for their toolbar.
   * The compact-desktop rule used width: 0 as a flex-sizing shortcut; once the
   * card became scrollable that also clipped the links and action buttons.
   */
  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card
    > .chart-card-header
    > .chart-card-header-actions {
    display: flex;
    width: auto;
    max-width: 100%;
    min-width: 0;
    min-height: 34px;
    flex: 1 1 auto;
    visibility: visible;
    opacity: 1;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-card-header-actions
    > .chart-tools {
    display: flex;
    min-width: 0;
    visibility: visible;
    opacity: 1;
  }

  .private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-card-header-actions
    > .chart-card-actions {
    display: inline-flex;
    visibility: visible;
    opacity: 1;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card
    > .chart-card-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-items: flex-start;
    border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
    background: var(--surface);
    padding: 8px 10px;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart)
    .chart-wheel-card
    > .chart-card-header
    > .chart-card-header-actions {
    width: auto;
    min-width: 0;
    flex: 1 1 auto;
    margin-left: auto;
    overflow: visible;
  }
}

/*
 * Individual fullscreen wheels sit directly below their sticky toolbar.
 * Aligning the SVG to the start avoids distributing spare viewport height
 * above the chart. Charts with exterior labels keep a slightly larger,
 * explicit safety margin without affecting the nodal layout.
 */
@media (min-width: 641px) {
  .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    :is(
      .chart-wheel-workspace:fullscreen,
      .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
      .chart-wheel-card:fullscreen,
      .chart-wheel-card.is-chart-card-fallback-fullscreen
    )
    .chart-svg-wrap-only {
    align-items: flex-start;
    padding-top: clamp(8px, 1.4dvh, 16px);
  }

  .chart-wheel-stage.is-full-chart.has-chart-containment-space:not(.is-multiple-chart):not(.is-nodal-chart)
    :is(
      .chart-wheel-workspace:fullscreen,
      .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
      .chart-wheel-card:fullscreen,
      .chart-wheel-card.is-chart-card-fallback-fullscreen
    )
    .chart-svg-wrap-only {
    padding-top: clamp(24px, 3dvh, 40px);
  }
}

/* Universal person selector for immersive chart views. */
.chart-fullscreen-people {
  display: none !important;
  min-width: 0;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) .chart-fullscreen-people {
  display: inline-flex !important;
  width: auto;
  max-width: min(480px, 42vw);
  min-width: 0;
  flex: 0 1 auto;
  align-items: center;
  gap: 6px;
}

.chart-fullscreen-person-trigger {
  display: inline-flex;
  min-width: 0;
  min-height: 36px;
  max-width: min(230px, 22vw);
  flex: 0 1 auto;
  align-items: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--accent-line) 72%, var(--line));
  border-radius: 9px;
  background: color-mix(in srgb, var(--surface) 94%, var(--accent-soft));
  color: var(--text);
  cursor: pointer;
  padding: 5px 9px 5px 6px;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease,
    transform 160ms ease;
}

.chart-fullscreen-person-trigger > :is(
  strong,
  .chart-person-name,
  .active-person-trigger-name
),
.chart-fullscreen-person-trigger > span:not(.chart-person-role) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-fullscreen-person-trigger > svg {
  width: 13px;
  height: 13px;
  flex: 0 0 13px;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.chart-fullscreen-person-trigger:is(:hover, :focus-visible),
.chart-fullscreen-person-trigger[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 9%, transparent);
  color: var(--accent-strong);
  outline: 0;
  transform: translateY(-1px);
}

.chart-fullscreen-person-trigger:focus-visible {
  box-shadow:
    0 0 0 3px var(--accent-ring),
    0 7px 18px color-mix(in srgb, var(--accent) 9%, transparent);
}

.chart-fullscreen-person-trigger:disabled {
  cursor: not-allowed;
  opacity: 0.58;
  transform: none;
}

:is(.chart-wheel-workspace, .chart-wheel-card).is-chart-person-switch-loading
  .chart-fullscreen-person-trigger {
  pointer-events: none;
  opacity: 0.58;
}

.chart-fullscreen-feedback {
  position: fixed;
  z-index: 90;
  bottom: max(16px, env(safe-area-inset-bottom));
  left: 50%;
  display: flex;
  width: min(520px, calc(100vw - 32px));
  min-height: 44px;
  align-items: center;
  gap: 10px;
  border: 1px solid color-mix(in srgb, #b42318 34%, var(--line));
  border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 96%, #fff0ee);
  box-shadow: 0 14px 34px rgba(28, 36, 54, 0.16);
  color: var(--text);
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  pointer-events: none;
  transform: translateX(-50%);
}

.chart-fullscreen-feedback-icon {
  display: inline-grid;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in srgb, #b42318 12%, var(--surface));
  color: #b42318;
  font-size: 13px;
  font-weight: 850;
}

.chart-person-role {
  display: inline-grid;
  min-width: 22px;
  height: 22px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent);
  padding-inline: 5px;
  font-size: 9px;
  font-weight: 850;
  letter-spacing: 0.045em;
  line-height: 1;
  text-transform: uppercase;
}

.chart-fullscreen-people:has(.chart-person-connector)
  .chart-fullscreen-person-trigger:last-of-type
  .chart-person-role {
  border-color: color-mix(in srgb, var(--text-soft) 24%, var(--line));
  background: color-mix(in srgb, var(--surface-soft) 86%, var(--surface));
  color: var(--text-soft);
}

.chart-person-connector {
  display: inline-grid;
  width: 16px;
  min-width: 16px;
  height: 24px;
  flex: 0 0 16px;
  place-items: center;
  color: var(--muted);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) :is(.chart-card-header, .chart-multiple-topbar):has(.chart-fullscreen-people) {
  min-width: 0;
  align-items: center;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) :is(.chart-card-header, .chart-multiple-topbar) > .chart-fullscreen-people {
  margin-left: auto;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) :is(.chart-card-header, .chart-multiple-topbar):has(.chart-fullscreen-people)
  > :is(.chart-card-header-actions, .chart-multiple-topbar-actions) {
  min-width: 0;
  flex: 0 1 auto;
  margin-left: 0;
}

/* The universal A/B control replaces the old composite caption only while
   the same fullscreen header actually contains that control. */
:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) :is(.chart-card-header, .chart-multiple-topbar):has(.chart-fullscreen-people)
  .chart-composite-participants {
  display: none !important;
}

@media (max-width: 900px) {
  :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-fullscreen-people {
    max-width: min(430px, 52vw);
  }

  .chart-fullscreen-person-trigger {
    max-width: min(200px, 25vw);
  }
}

@media (max-width: 640px), (max-height: 600px) and (pointer: coarse) {
  :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-fullscreen-people {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    gap: 4px;
  }

  .chart-fullscreen-person-trigger {
    min-width: 0;
    min-height: 44px;
    max-width: none;
    flex: 1 1 0;
    gap: 5px;
    padding: 7px 8px 7px 6px;
    font-size: 11.5px;
  }

  .chart-person-role {
    min-width: 24px;
    height: 24px;
    padding-inline: 4px;
  }

  .chart-person-connector {
    width: 12px;
    min-width: 12px;
    flex-basis: 12px;
  }

  :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) :is(.chart-card-header, .chart-multiple-topbar):has(> .chart-fullscreen-people) {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
  }

  :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) :is(.chart-card-header, .chart-multiple-topbar):has(> .chart-fullscreen-people)
    > :is(.chart-card-header-actions, .chart-multiple-topbar-actions) {
    width: 100%;
    max-width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-fullscreen-person-trigger {
    transition: none;
  }
}

/*
 * Guest and collapsed desktop Astroanamnesis views share the same triangular
 * composition as fullscreen: Sideral above, Tropical and Memoria below. The canvas keeps
 * its natural height so short laptop viewports can reach both lower wheels by
 * scrolling instead of shrinking the three charts into a single row.
 */
@media (min-width: 861px) and (min-height: 601px) and (orientation: landscape) {
  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart {
    --collapsed-multiple-card-width: clamp(
      280px,
      min(35vw, 62dvh),
      900px
    );
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable both-edges;
    -webkit-overflow-scrolling: touch;
    padding: 6px;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-workspace-multiple {
    display: block !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
    background: var(--surface-soft);
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-workspace-multiple
    > .chart-wheel-main {
    display: block !important;
    box-sizing: border-box;
    width: max(
      100%,
      calc(var(--collapsed-multiple-card-width) * 2 + 28px)
    ) !important;
    max-width: none !important;
    min-width: 100% !important;
    height: auto !important;
    min-height: 100% !important;
    overflow: visible !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-triple {
    position: relative;
    display: block !important;
    box-sizing: border-box;
    width: max(
      100%,
      calc(var(--collapsed-multiple-card-width) * 2 + 28px)
    ) !important;
    max-width: none !important;
    min-width: 100% !important;
    height: max(
      calc(100dvh - 12px),
      calc(clamp(150px, 31dvh, 345px) + var(--collapsed-multiple-card-width) + 30px)
    ) !important;
    min-height: calc(100dvh - 12px) !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-multiple-topbar {
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: 0 !important;
    z-index: 8;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-height: 38px;
    justify-self: start;
    margin: 0 !important;
    padding: 2px 4px !important;
    background: var(--surface-soft);
    transform: none !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot {
    position: absolute !important;
    box-sizing: border-box;
    width: var(--collapsed-multiple-card-width) !important;
    max-width: var(--collapsed-multiple-card-width) !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: start !important;
    transform: none !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot-left {
    top: clamp(150px, 31dvh, 345px) !important;
    right: auto !important;
    left: clamp(8px, 2.5vw, 40px) !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot-top {
    top: 44px !important;
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-triple-slot-right {
    top: clamp(150px, 31dvh, 345px) !important;
    right: clamp(8px, 2.5vw, 40px) !important;
    left: auto !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple {
    position: relative;
    display: grid !important;
    grid-template-rows: auto auto !important;
    align-content: start !important;
    gap: 4px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    .chart-wheel-card-triple
    .chart-card-header {
    position: static !important;
    display: flex;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 22px;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
    transform: none !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.is-multiple-chart
    :is(.chart-svg-wrap-triple, .chart-svg-wrap-triple .chart-wheel-svg) {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
  }
}

/* Large nodal workspaces need the full map canvas. The generic desktop
   gutters are intended to reserve room for open floating panels, but the
   nodal workspace already has enough room around its wheel. Keeping the
   workspace capped at 1640px made those gutters consume almost half of the
   available card and left the entire composition anchored to the left. */
@media (min-width: 1680px) {
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen),
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-main {
    width: 100%;
    max-width: none;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-main {
    box-sizing: border-box;
    padding-inline: clamp(96px, calc((100vw - 1040px) / 4), 380px);
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal {
    width: min(100%, 1640px);
    max-width: 1640px;
  }
}

/* Rich planet inspection and aspect focus ---------------------------------- */

/* The nodal card may extend its visual background to accommodate the outer
   age labels, but its toolbar must remain inside the actual map viewport. */
@media (min-width: 861px) {
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 8px 10px;
    gap: 10px;
    justify-content: stretch;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header
    > .chart-card-identity {
    flex: 0 1 min(42%, 290px);
    width: auto;
    max-width: min(42%, 290px);
    min-width: 0;
    margin-inline: 0;
    justify-self: start;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header
    > .chart-card-header-actions {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    margin-left: auto;
    padding-right: 2px;
    justify-self: end;
  }
}

@media (min-width: 1680px) {
  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal {
    --nodal-card-side-extension: 0px;
    border-color: var(--line);
    background: var(--surface);
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal::before {
    display: none;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header {
    display: flex;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-inline: 0;
    padding: 0;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header
    > .chart-card-identity {
    width: auto;
    max-width: 380px;
    flex: 0 1 380px;
    justify-self: auto;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header
    > .chart-card-header-actions {
    width: auto;
    max-width: 100%;
    flex: 1 1 auto;
    justify-self: auto;
    margin-left: auto;
    padding-right: 0;
  }

  .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card-nodal
    > .chart-card-header
    > .chart-card-header-actions
    > .chart-tools {
    flex-wrap: nowrap;
    justify-content: flex-end;
  }
}

.chart-planet[data-chart-planet-id]:not(.is-chart-planet-hidden) {
  cursor: pointer;
  transition: opacity 160ms ease, filter 160ms ease;
}

.chart-planet[data-chart-planet-id]:not(.is-chart-planet-hidden):hover,
.chart-planet[data-chart-planet-id]:not(.is-chart-planet-hidden):focus-visible {
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--accent) 28%, transparent));
}

.chart-planet[data-chart-planet-id]:focus {
  outline: none;
}

.chart-planet[data-chart-planet-id]:focus-visible .chart-planet-hit,
.chart-planet.is-chart-planet-focused .chart-planet-hit {
  fill: color-mix(in srgb, var(--planet-color, var(--accent)) 28%, transparent) !important;
  fill-opacity: 0.26 !important;
  stroke: color-mix(in srgb, var(--planet-color, var(--accent)) 78%, var(--surface)) !important;
  stroke-width: 1.8 !important;
  stroke-opacity: 0.92 !important;
  vector-effect: non-scaling-stroke;
}

.has-chart-planet-focus .chart-planet.is-chart-planet-dimmed:not(.is-chart-planet-hidden) {
  opacity: 0.2;
  filter: grayscale(0.45) saturate(0.45);
}

.has-chart-planet-focus .chart-planet.is-chart-planet-related:not(.is-chart-planet-hidden) {
  opacity: 1;
  filter: drop-shadow(0 1px 2px color-mix(in srgb, var(--planet-color, var(--accent)) 28%, transparent));
}

.has-chart-planet-focus .chart-planet.is-chart-planet-related .chart-planet-hit {
  fill: color-mix(in srgb, var(--planet-color, var(--accent)) 14%, transparent) !important;
  fill-opacity: 0.18 !important;
  stroke: color-mix(in srgb, var(--planet-color, var(--accent)) 66%, var(--surface)) !important;
  stroke-width: 1.15 !important;
  stroke-opacity: 0.78 !important;
  vector-effect: non-scaling-stroke;
}

.chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) .chart-planet-glyph,
.chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) .chart-planet-hit {
  transform-origin: center;
  transform-box: fill-box;
}

.chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) .chart-planet-glyph {
  animation: chartPlanetGlyphHeartbeat 1.65s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) .chart-planet-hit {
  animation: chartPlanetHeartbeat 1.65s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.has-chart-planet-focus .chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) {
  opacity: 1;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--planet-color, var(--accent)) 42%, transparent));
}

@keyframes chartPlanetHeartbeat {
  0% {
    fill-opacity: 0.18;
    stroke-opacity: 0.78;
    stroke-width: 1.2;
    transform: scale(1);
    filter: drop-shadow(0 0 0.8px color-mix(in srgb, var(--planet-color, var(--accent)) 20%, transparent));
  }
  30% {
    fill-opacity: 0.32;
    stroke-opacity: 0.96;
    stroke-width: 2.05;
    transform: scale(1.04);
    filter: drop-shadow(0 0 2.6px color-mix(in srgb, var(--planet-color, var(--accent)) 32%, transparent));
  }
  58% {
    fill-opacity: 0.42;
    stroke-opacity: 1;
    stroke-width: 2.25;
    transform: scale(1.07);
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--planet-color, var(--accent)) 42%, transparent));
  }
  100% {
    fill-opacity: 0.26;
    stroke-opacity: 0.92;
    stroke-width: 1.8;
    transform: scale(1);
    filter: drop-shadow(0 0 1.8px color-mix(in srgb, var(--planet-color, var(--accent)) 28%, transparent));
  }
}

@keyframes chartPlanetGlyphHeartbeat {
  0% {
    filter: none;
    transform: translateY(0) scale(1);
    transform-origin: center;
    transform-box: fill-box;
  }
  40% {
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--planet-color, var(--accent)) 26%, transparent));
    transform: translateY(-1px) scale(1.02);
  }
  72% {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--planet-color, var(--accent)) 34%, transparent));
    transform: translateY(0) scale(1.03);
  }
  100% {
    filter: none;
    transform: translateY(0) scale(1);
  }
}

/* Supports either the state class on the wheel or the dedicated focus layer. */
.chart-aspect-focus-only {
  opacity: 0;
  pointer-events: none;
}

.has-chart-planet-focus .chart-aspect:not(.is-planet-focus-aspect),
.chart-aspect-focus-only .chart-aspect:not(.is-planet-focus-aspect),
.has-chart-planet-focus .chart-aspect-focus-only:not(.is-planet-focus-aspect) {
  opacity: 0;
  pointer-events: none;
}

.has-chart-planet-focus .chart-aspect.is-planet-focus-aspect,
.chart-aspect-focus-only .chart-aspect.is-planet-focus-aspect,
.chart-aspect-focus-only.is-planet-focus-aspect {
  opacity: 1;
  stroke-width: 2.7;
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, currentColor 30%, transparent));
}

.has-chart-planet-focus .chart-aspect-anchor {
  opacity: 0;
}

.has-chart-planet-focus .chart-aspect-anchor.is-chart-planet-related-anchor {
  opacity: 1;
}

.has-chart-planet-focus .chart-aspect-anchor.is-chart-planet-related-anchor line {
  stroke-width: 2.4;
  filter: drop-shadow(0 0 1.5px color-mix(in srgb, var(--planet-color) 38%, transparent));
}

.chart-planet-tooltip {
  position: fixed;
  z-index: 9999;
  display: grid;
  width: min(304px, calc(100vw - 24px));
  max-height: min(460px, calc(100dvh - 24px));
  gap: 10px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid color-mix(in srgb, var(--accent-line) 82%, var(--line));
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: 0 16px 38px color-mix(in srgb, var(--text) 15%, transparent);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  padding: 12px;
  pointer-events: auto;
  scrollbar-width: thin;
  white-space: normal;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.chart-planet-tooltip.is-pinned {
  pointer-events: auto;
  touch-action: pan-y;
}

.chart-planet-tooltip[hidden] {
  display: none !important;
}

.chart-planet-tooltip-header {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
}

.chart-planet-tooltip-glyph {
  --tooltip-glyph-shift-x: 0px;
  --tooltip-glyph-shift-y: -0.5px;
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid color-mix(in srgb, var(--planet-color, var(--accent)) 58%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--planet-color, var(--accent)) 9%, var(--surface));
  color: var(--planet-color, var(--accent));
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 0;
}

.chart-planet-tooltip-glyph-symbol {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-align: center;
  transform: translate(var(--tooltip-glyph-shift-x), var(--tooltip-glyph-shift-y));
}

.chart-planet-tooltip-age-glyph {
  font-family: "Astro Jupiter", "Segoe UI Emoji", "Apple Color Emoji", sans-serif;
  font-size: 19px;
}

.chart-planet-tooltip-age-meta .chart-planet-tooltip-meta-item:first-child {
  border-left-color: color-mix(in srgb, #dc2626 64%, transparent);
}

.chart-planet-tooltip-glyph.is-earth-point {
  --tooltip-glyph-shift-x: 1px;
  --tooltip-glyph-shift-y: -0.5px;
}

.chart-planet-tooltip-glyph.is-text-point {
  font-family: "Astro Jupiter", Inter, "Segoe UI", sans-serif;
  font-size: 13px;
  font-weight: 850;
  letter-spacing: 0;
}

.chart-planet-tooltip-glyph.is-angle-point {
  font-family: "Astro Jupiter", Inter, "Segoe UI", sans-serif;
  font-size: 10px;
  font-weight: 850;
  letter-spacing: 0.025em;
}

.chart-planet-tooltip-heading {
  display: grid;
  min-width: 0;
  gap: 1px;
}

.chart-planet-tooltip-name {
  overflow: hidden;
  color: var(--text);
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-planet-tooltip-context {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.3;
  text-transform: uppercase;
}

.chart-planet-tooltip-position {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px;
  margin: 0;
  color: var(--text);
  font-size: 12px;
  font-weight: 650;
}

.chart-planet-tooltip-separator {
  color: var(--muted);
  font-weight: 500;
}

.chart-planet-tooltip-zodiac {
  --zodiac-tooltip-active-color: var(--zodiac-tooltip-color, var(--text));
  display: inline-flex;
  min-width: 0;
  align-items: baseline;
  gap: 3px;
  color: var(--zodiac-tooltip-active-color) !important;
  font-weight: 800;
}

.chart-planet-tooltip-zodiac-symbol {
  font-family: "Astro Jupiter", "Noto Sans Symbols 2", "Segoe UI Symbol", sans-serif;
  font-size: 1.18em;
  line-height: 1;
}

html[data-theme="dark"] .chart-planet-tooltip-zodiac {
  --zodiac-tooltip-active-color: var(--zodiac-tooltip-dark-color, var(--zodiac-tooltip-color, var(--text)));
}

.chart-planet-tooltip-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

.chart-planet-tooltip-meta-item {
  display: grid;
  min-width: 0;
  gap: 1px;
  border-left: 2px solid color-mix(in srgb, var(--accent-line) 72%, transparent);
  padding-left: 7px;
}

.chart-planet-tooltip-meta-item span,
.chart-planet-tooltip-meta-label {
  color: var(--muted);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.chart-planet-tooltip-meta-item strong,
.chart-planet-tooltip-meta-value {
  overflow: hidden;
  color: var(--text);
  font-size: 11px;
  font-weight: 750;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-planet-tooltip-meta-item strong .chart-planet-tooltip-zodiac {
  max-width: 100%;
  width: fit-content;
  color: var(--zodiac-tooltip-active-color) !important;
  font-size: 11.5px;
  letter-spacing: normal;
  text-transform: none;
}

.chart-planet-tooltip-meta-item strong .chart-planet-tooltip-zodiac > span {
  color: inherit !important;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.chart-planet-tooltip-meta-item strong .chart-planet-tooltip-zodiac > .chart-planet-tooltip-zodiac-symbol {
  font-size: 14px;
}

.chart-planet-tooltip-nodal-age {
  grid-column: 1 / -1;
  border-left-color: color-mix(in srgb, var(--planet-color, var(--accent)) 78%, var(--accent-line));
  border-radius: 0 6px 6px 0;
  background: color-mix(in srgb, var(--planet-color, var(--accent)) 6%, transparent);
  padding-block: 4px;
  padding-right: 7px;
}

.chart-planet-tooltip-nodal-age strong {
  color: var(--planet-color, var(--text));
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.chart-planet-tooltip-aspects {
  display: grid;
  gap: 6px;
  border-top: 1px solid var(--line);
  padding-top: 9px;
}

.chart-planet-tooltip-aspects-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.chart-planet-tooltip-aspect-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chart-planet-tooltip-aspect {
  display: grid;
  grid-template-columns: 3px minmax(0, auto) minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.chart-planet-tooltip-aspect-marker {
  width: 3px;
  height: 15px;
  border-radius: 99px;
  background: var(--aspect-color, var(--accent));
}

.chart-planet-tooltip-aspect-name {
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.chart-planet-tooltip-aspect-target {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-planet-tooltip-aspect-orb {
  color: var(--muted);
  font-size: 10px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.chart-planet-tooltip-note {
  margin: 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.45;
  padding-top: 8px;
}

@media (max-width: 640px) {
  .chart-planet-tooltip {
    width: min(278px, calc(100vw - 16px));
    max-height: calc(100dvh - 16px);
    gap: 8px;
    border-radius: 10px;
    padding: 10px;
  }

  .chart-planet-tooltip-header {
    grid-template-columns: 36px minmax(0, 1fr);
    gap: 8px;
  }

  .chart-planet-tooltip-glyph {
    width: 36px;
    height: 36px;
    font-size: 22px;
  }

  .chart-planet-tooltip-meta {
    gap: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-planet,
  .chart-aspect {
    transition: none !important;
  }

  .chart-planet[data-chart-planet-id]:focus-visible .chart-planet-hit,
  .chart-planet.is-chart-planet-focused .chart-planet-hit {
    animation: none !important;
    transform: none;
  }

  .chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) .chart-planet-glyph,
  .has-chart-planet-focus .chart-planet.is-chart-planet-focused:not(.is-chart-planet-hidden) {
    animation: none !important;
  }
}

/* Grouped private sidebar navigation -------------------------------------- */
.private-sidebar .private-account-nav {
  margin: 0;
  border: 0;
  padding: 0;
  gap: 3px;
}

.private-sidebar .private-account-nav:not(:has(button:not(.is-hidden))) {
  display: none;
}

.private-space-nav {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  align-content: start;
}

.private-nav-section,
.private-nav-section-items {
  display: grid;
  min-width: 0;
}

.private-nav-section {
  gap: 5px;
}

.private-nav-section-items {
  gap: 3px;
}

.private-nav-section-title {
  margin: 0 10px 2px;
  color: color-mix(in srgb, var(--accent) 86%, var(--muted));
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.09em;
  line-height: 1.2;
  text-transform: uppercase;
}

.private-space-nav button[data-private-tools-route="transits"] {
  --private-nav-icon: url("/assets/nav-icon-orbit.svg");
}

.private-space-nav button[data-private-tools-route="natal"] {
  --private-nav-icon: url("/assets/nav-icon-natal-aspects.svg");
}

.private-space-nav button[data-private-tools-route]::before {
  position: static;
  width: 16px;
  height: 16px;
  border: 0;
  border-radius: 0;
  background: currentColor;
  box-shadow: none;
  opacity: 0.74;
  -webkit-mask: var(--private-nav-icon) center / contain no-repeat;
  mask: var(--private-nav-icon) center / contain no-repeat;
}

.private-space-nav button[data-private-tools-route].active::before {
  border: 0;
  background: currentColor;
  box-shadow: none;
  opacity: 1;
}

.private-space-nav .private-nav-access-badge {
  display: none;
  flex: 0 0 auto;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--accent) 26%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
  color: var(--accent);
  font-size: 8px;
  font-weight: 760;
  letter-spacing: 0.04em;
  line-height: 1;
  padding: 4px 6px;
  text-transform: uppercase;
}

.private-space-nav button.is-subscription-locked {
  cursor: not-allowed;
  color: color-mix(in srgb, var(--muted) 72%, var(--surface));
}

.private-space-nav button.is-subscription-locked .private-nav-access-badge {
  display: inline-flex;
}

.private-space-nav button.is-subscription-locked:is(:hover, :focus-visible) {
  background: color-mix(in srgb, var(--accent-soft) 20%, transparent);
  color: var(--muted);
}

@media (max-height: 960px) and (min-width: 861px) {
  .private-space-nav {
    gap: 11px;
  }

  .private-nav-section {
    gap: 3px;
  }

  .private-nav-section-title {
    margin-bottom: 0;
    font-size: 9.5px;
  }

}

@media (max-width: 860px) {
  .private-space-nav {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }

  .private-nav-section {
    gap: 5px;
  }

  .private-nav-section-title {
    margin-inline: 12px;
    font-size: 10px;
  }

  .private-space-nav .private-nav-section-items button,
  .private-space-nav .private-nav-tools-links button {
    min-height: 42px;
    justify-content: flex-start;
    padding-inline: 12px;
  }
}

/* Keep the training editor wider than the generic administration dialogs. */
.admin-dialog.training-admin-dialog {
  width: min(880px, calc(100vw - 34px));
  max-height: 94dvh;
  overflow: hidden;
}

.admin-modal.training-admin-form {
  box-sizing: border-box;
  width: 100%;
  max-height: calc(94dvh - 2px);
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

@media (max-width: 700px) {
  .admin-dialog.training-admin-dialog {
    width: calc(100vw - 16px);
  }
}

/* Mobile access: keep account actions fully visible on narrow screens. */
@media (max-width: 640px) {
  .landing-nav {
    gap: 10px;
    padding: 12px 14px 14px;
  }

  .landing-nav-actions,
  .landing-header-toolbar,
  .landing-toolbar-actions {
    width: 100%;
  }

  .landing-header-toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 46px;
    overflow: visible;
    border-radius: 999px;
    padding: 5px 6px 5px 8px;
  }

  .landing-nav-actions .landing-theme-switcher {
    display: flex;
    flex: 0 0 auto;
    justify-content: flex-start;
    width: auto;
    margin: 0;
    padding: 0;
    gap: 4px;
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice {
    display: inline-grid;
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    place-items: center;
    flex: 0 0 27px !important;
  }

  .landing-toolbar-divider {
    display: block;
    height: 22px;
  }

  .landing-toolbar-actions {
    display: flex;
    flex: 1 1 auto;
    min-width: 0;
    align-items: stretch;
    justify-content: flex-end;
    gap: 4px;
    padding: 0;
  }

  .landing-nav-actions .landing-toolbar-actions > :is(.landing-login, .landing-try) {
    flex: 0 0 auto;
    margin-inline: 0;
  }

  .landing-toolbar-actions > .landing-login,
  .landing-toolbar-actions > .landing-try {
    display: inline-flex;
    min-width: 0;
    min-height: 38px;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding-inline: 7px;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    touch-action: manipulation;
    white-space: nowrap;
  }

  .landing-toolbar-actions > .is-hidden {
    display: none;
  }

  .landing-toolbar-actions:has(#landing-open-private:not(.is-hidden)) {
    justify-content: flex-end;
  }

  .landing-toolbar-actions:has(#landing-open-private:not(.is-hidden)) > #landing-open-private {
    flex: 0 0 auto;
    margin-left: auto;
    padding-inline: 14px;
  }
}

@media (max-width: 460px) {
  .landing-nav-actions .landing-theme-switcher {
    gap: 3px;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice {
    width: 25px !important;
    height: 25px !important;
    min-width: 25px !important;
    min-height: 25px !important;
    flex-basis: 25px !important;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice-eclipse,
  .landing-nav-actions .landing-theme-switcher .theme-choice-aurora,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice-eclipse,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice-aurora {
    display: none !important;
  }

  .landing-toolbar-actions > .landing-login,
  .landing-toolbar-actions > .landing-try {
    padding-inline: 6px;
    font-size: 12.5px;
  }
}

@media (max-width: 380px) {
  .landing-nav-actions .landing-theme-switcher .theme-choice-magenta,
  .landing-nav-actions .landing-theme-switcher .theme-choice-amber,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice-magenta,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice-amber {
    display: none !important;
  }

  .landing-nav-actions .landing-theme-switcher {
    gap: 4px;
  }

  .landing-nav-actions .landing-theme-switcher .theme-choice,
  html[data-theme="dark"] .landing-nav-actions .landing-theme-switcher .theme-choice {
    width: 27px !important;
    height: 27px !important;
    min-width: 27px !important;
    min-height: 27px !important;
    flex-basis: 27px !important;
  }

  .landing-toolbar-actions > .landing-login,
  .landing-toolbar-actions > .landing-try {
    font-size: 11.75px;
    padding-inline: 4px;
  }
}

/* Very narrow guest headers: retain two representative themes so both
   account actions keep complete, independent touch targets on one row. */
@media (max-width: 400px) {
  .landing-header-toolbar:has(#landing-login-google:not(.is-hidden))
    .landing-theme-switcher
    .theme-choice-teal {
    display: none !important;
  }

  .landing-header-toolbar:has(#landing-login-google:not(.is-hidden))
    .landing-toolbar-actions {
    gap: 5px;
  }
}

/* Persistent private-sidebar scrolling ----------------------------------- */
.private-screen .private-sidebar {
  overflow: hidden;
}

.private-screen .private-sidebar .private-sidebar-scroll {
  display: flex !important;
  height: auto;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-content: space-between !important;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
  padding-right: 7px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  scrollbar-color: color-mix(in srgb, var(--accent) 54%, var(--line))
    color-mix(in srgb, var(--surface-soft) 68%, transparent);
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.private-screen .private-sidebar .private-sidebar-scroll::-webkit-scrollbar {
  width: 7px;
}

.private-screen .private-sidebar .private-sidebar-scroll::-webkit-scrollbar-track {
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 68%, transparent);
}

.private-screen .private-sidebar .private-sidebar-scroll::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 54%, var(--line));
}

.private-screen .private-sidebar .private-sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--accent) 68%, var(--line));
}

.private-screen .private-sidebar .private-sidebar-bottom {
  min-height: 0;
  flex: 0 0 auto;
  margin-top: auto;
}

/* Authenticated mobile header: use the space freed by the single account action. */
@media (max-width: 460px) {
  .landing-header-toolbar:has(#landing-open-private:not(.is-hidden))
    .landing-theme-switcher
    :is(.theme-choice-eclipse, .theme-choice-aurora) {
    display: inline-grid !important;
  }
}

@media (max-width: 380px) {
  .landing-header-toolbar:has(#landing-open-private:not(.is-hidden)) .landing-theme-switcher {
    gap: 2px;
  }

  .landing-header-toolbar:has(#landing-open-private:not(.is-hidden))
    .landing-theme-switcher
    :is(.theme-choice-magenta, .theme-choice-amber, .theme-choice-eclipse, .theme-choice-aurora) {
    display: inline-grid !important;
  }

  .landing-header-toolbar:has(#landing-open-private:not(.is-hidden))
    .landing-theme-switcher
    .theme-choice,
  html[data-theme="dark"]
    .landing-header-toolbar:has(#landing-open-private:not(.is-hidden))
    .landing-theme-switcher
    .theme-choice {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-basis: 22px !important;
  }

  .landing-toolbar-actions:has(#landing-open-private:not(.is-hidden)) > #landing-open-private {
    padding-inline: 10px;
  }
}

/* Fullscreen prompt action: keep the mobile chart toolbar on one clean row. */
@media (max-width: 860px) {
  .private-maps-active :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-card-interpret-button {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    padding: 0;
  }

  .private-maps-active :is(
    .chart-wheel-workspace:fullscreen,
    .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
    .chart-wheel-workspace-multiple:fullscreen,
    .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
    .chart-wheel-card:fullscreen,
    .chart-wheel-card.is-chart-card-fallback-fullscreen
  ) .chart-card-interpret-button > span {
    display: none;
  }
}

/* Fullscreen charts: keep the viewport intact and scroll only when the
   complete chart (toolbar, wheel and exterior labels) needs more height. */
:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen,
  .chart-wheel-workspace-multiple:fullscreen,
  .chart-wheel-workspace-multiple.is-chart-card-fallback-fullscreen,
  .chart-wheel-card:fullscreen,
  .chart-wheel-card.is-chart-card-fallback-fullscreen
) {
  height: 100dvh;
  max-height: 100dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  -webkit-overflow-scrolling: touch;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen
):not(.chart-wheel-workspace-multiple) {
  overflow-x: hidden;
}

:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen
):not(.chart-wheel-workspace-multiple) > .chart-wheel-main,
:is(
  .chart-wheel-workspace:fullscreen,
  .chart-wheel-workspace.is-chart-card-fallback-fullscreen
):not(.chart-wheel-workspace-multiple) .chart-wheel-card {
  box-sizing: border-box;
  height: auto;
  min-height: 100%;
  overflow: visible;
}

.chart-wheel-card:is(:fullscreen, .is-chart-card-fallback-fullscreen) {
  overflow-x: hidden;
  overflow-y: auto;
}

/* Astroanamnesis editorial archive -------------------------------------- */
.about-editorial .about-archive-figure {
  display: grid;
  grid-template-columns: var(--about-timeline-year) minmax(0, 1fr);
  gap: var(--about-timeline-gap);
  margin: 0;
  padding: clamp(30px, 4vw, 52px) 0 clamp(46px, 6vw, 76px);
}

.about-editorial .about-archive-figure-inner {
  grid-column: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(170px, 0.5fr);
  align-items: end;
  gap: clamp(24px, 4vw, 52px);
  min-width: 0;
}

.about-editorial .about-archive-figure--reverse .about-archive-figure-inner {
  grid-template-columns: minmax(170px, 0.5fr) minmax(0, 1.5fr);
}

.about-editorial .about-archive-figure--reverse img {
  grid-column: 2;
  grid-row: 1;
}

.about-editorial .about-archive-figure--reverse figcaption {
  grid-column: 1;
  grid-row: 1;
}

.about-editorial .about-archive-figure img {
  display: block;
  width: 100%;
  height: auto;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: #f5f0e6;
}

.about-editorial .about-archive-figure figcaption {
  display: grid;
  align-content: end;
  gap: 8px;
  border-top: 1px solid var(--accent-strong);
  padding-top: 16px;
}

.about-editorial .about-archive-figure figcaption > span {
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-editorial .about-archive-figure figcaption > strong {
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}

.about-editorial .about-archive-figure figcaption > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.65;
}

.about-editorial .about-archive-figure--diptych .about-archive-figure-inner {
  grid-template-columns: 1fr;
}

.about-editorial .about-archive-diptych {
  display: grid;
  grid-template-columns: minmax(190px, 0.72fr) minmax(0, 1.28fr);
  align-items: end;
  gap: clamp(18px, 2.8vw, 34px);
}

.about-editorial .about-archive-sheet {
  display: grid;
  gap: 13px;
  min-width: 0;
}

.about-editorial .about-archive-sheet > p {
  display: grid;
  gap: 4px;
  margin: 0;
  border-top: 1px solid var(--line);
  padding-top: 11px;
}

.about-editorial .about-archive-sheet > p strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 600;
}

.about-editorial .about-archive-sheet > p span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.55;
}

.about-editorial .about-archive-figure--diptych figcaption {
  max-width: 410px;
}

/* Reuse the three technical chart drawings already present in the public
   Astroanamnesis diagram. They are system graphics, not decoration. */
.about-editorial .about-map-ledger article {
  grid-template-rows: auto auto auto 1fr;
  min-height: 660px;
  overflow: visible;
}

.about-editorial .about-map-ledger article::before,
.about-editorial .about-map-ledger article::after {
  display: none;
}

.about-editorial .about-map-visual {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  margin: clamp(30px, 3vw, 42px) 0 0;
}

.about-editorial .about-map-visual svg {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
}

.about-editorial .about-map-visual :is(.aa-seq, .aa-seq-line) {
  opacity: 1 !important;
  animation: none !important;
  transform-box: fill-box;
}

.about-editorial .about-map-visual figcaption {
  margin-top: 12px;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1.5;
  text-transform: uppercase;
}

.about-editorial .about-map-ledger article > .about-map-copy {
  margin-top: clamp(30px, 3.4vw, 44px);
}

.about-editorial .about-map-ledger article > .about-map-description {
  margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 900px) {
  .about-editorial .about-map-ledger article {
    grid-template-columns: minmax(220px, 0.7fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    min-height: 0;
    align-items: start;
    column-gap: clamp(32px, 6vw, 64px);
  }

  .about-editorial .about-map-ledger article > .about-map-number {
    grid-column: 1 / -1;
  }

  .about-editorial .about-map-visual {
    grid-column: 1;
    grid-row: 2 / 4;
  }

  .about-editorial .about-map-ledger article > .about-map-copy,
  .about-editorial .about-map-ledger article > .about-map-description {
    grid-column: 2;
  }

  .about-editorial .about-map-ledger article > .about-map-copy {
    grid-row: 2;
    margin-top: 34px;
  }

  .about-editorial .about-map-ledger article > .about-map-description {
    grid-row: 3;
    align-self: start;
    margin-top: 30px;
  }
}

@media (max-width: 640px) {
  .about-editorial .about-archive-figure {
    display: block;
    padding: 18px 0 46px 36px;
  }

  .about-editorial .about-archive-figure-inner,
  .about-editorial .about-archive-figure--reverse .about-archive-figure-inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .about-editorial .about-archive-figure--reverse img,
  .about-editorial .about-archive-figure--reverse figcaption {
    grid-column: 1;
    grid-row: auto;
  }

  .about-editorial .about-archive-figure figcaption {
    order: 2;
  }

  .about-editorial .about-archive-diptych {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .about-editorial .about-archive-sheet:first-child {
    width: min(76%, 250px);
  }

  .about-editorial .about-map-ledger article {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto;
    min-height: 0;
    padding: 30px 20px 42px;
  }

  .about-editorial .about-map-ledger article > .about-map-number,
  .about-editorial .about-map-visual,
  .about-editorial .about-map-ledger article > .about-map-copy,
  .about-editorial .about-map-ledger article > .about-map-description {
    grid-column: 1;
    grid-row: auto;
  }

  .about-editorial .about-map-visual {
    width: min(100%, 390px);
    margin: 28px auto 0;
  }

  .about-editorial .about-map-ledger article > .about-map-copy {
    margin-top: 30px;
  }

  .about-editorial .about-map-ledger article > .about-map-description {
    margin-top: 28px;
  }
}

/* Monochrome engraved visual archive ---------------------------------- */
.about-editorial .about-archive-figure--wide .about-archive-figure-inner {
  grid-template-columns: minmax(0, 1.55fr) minmax(180px, 0.45fr);
}

.about-editorial .about-maps-architecture {
  display: grid;
  grid-template-columns: minmax(0, 620px) minmax(190px, 260px);
  justify-content: center;
  align-items: end;
  gap: clamp(32px, 5vw, 68px);
  margin: 0 auto clamp(72px, 8vw, 108px);
}

.about-editorial .about-maps-architecture img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  background: #f2ede3;
}

.about-editorial .about-maps-architecture figcaption {
  display: grid;
  gap: 10px;
  border-top: 1px solid var(--accent-strong);
  padding-top: 16px;
}

.about-editorial .about-maps-architecture figcaption span {
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.about-editorial .about-maps-architecture figcaption strong {
  color: var(--text);
  font-family: "Astro Jupiter", var(--about-serif);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.24;
}

.about-editorial .about-map-ledger article {
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 360px;
  padding: clamp(40px, 3.8vw, 52px) clamp(32px, 3.2vw, 44px);
}

.about-editorial .about-map-ledger article > .about-map-copy {
  align-self: start;
  margin-top: 0;
}

.about-editorial .about-map-ledger article > .about-map-description {
  margin-top: clamp(44px, 4.5vw, 64px);
}

@media (max-width: 900px) {
  .about-editorial .about-maps-architecture {
    grid-template-columns: minmax(0, 560px) minmax(180px, 0.42fr);
    gap: 38px;
  }

  .about-editorial .about-map-ledger article {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    min-height: 0;
    padding: 38px clamp(24px, 5vw, 40px) 42px;
  }

  .about-editorial .about-map-ledger article > .about-map-copy,
  .about-editorial .about-map-ledger article > .about-map-description {
    grid-column: 1;
    grid-row: auto;
  }

  .about-editorial .about-map-ledger article > .about-map-copy {
    margin-top: 0;
  }

  .about-editorial .about-map-ledger article > .about-map-description {
    margin-top: 30px;
  }
}

@media (max-width: 640px) {
  .about-editorial .about-archive-figure--wide .about-archive-figure-inner,
  .about-editorial .about-maps-architecture {
    grid-template-columns: 1fr;
  }

  .about-editorial .about-maps-architecture {
    width: 100%;
    gap: 22px;
    margin-bottom: 68px;
  }

  .about-editorial .about-maps-architecture figcaption {
    max-width: 290px;
  }

  .about-editorial .about-map-ledger article {
    padding: 34px 20px 38px;
  }
}

/* Astroanamnesis final production polish ------------------------------- */
@media (min-width: 901px) {
  .about-editorial .about-archive-figure-inner {
    grid-template-columns: minmax(0, 1.42fr) minmax(210px, 0.58fr);
  }

  .about-editorial .about-archive-figure--reverse .about-archive-figure-inner {
    grid-template-columns: minmax(210px, 0.58fr) minmax(0, 1.42fr);
  }

  .about-editorial .about-archive-figure--wide .about-archive-figure-inner {
    grid-template-columns: minmax(0, 1.42fr) minmax(210px, 0.58fr);
  }

  .about-editorial .about-maps-architecture {
    grid-template-columns: minmax(0, 560px) minmax(200px, 240px);
    margin-bottom: clamp(64px, 6vw, 88px);
  }
}

@media (min-width: 720px) and (max-width: 1100px) {
  .about-editorial .about-process {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
  }

  .about-editorial .about-process::before {
    display: block;
  }

  .about-editorial .about-process li {
    border-top: 0;
    padding: 34px clamp(12px, 2vw, 22px) 0 0;
  }

  .about-editorial .about-process li::before {
    top: 1px;
  }
}

@media (max-width: 640px) {
  .about-editorial .about-archive-figure {
    padding-left: 28px;
  }

  .about-editorial .about-closing-actions {
    grid-template-columns: minmax(0, 1fr);
    justify-self: stretch;
    justify-content: stretch;
  }
}

/* Fit single desktop charts to the usable viewport height. The chart keeps its
 * full size on tall screens and only scales down when the top controls and card
 * header would otherwise push its lower labels below the fold. */
@media (min-width: 861px) {
  .private-screen.private-maps-active
    .chart-wheel-stage.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-wheel-card:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only
    .chart-wheel-svg {
    width: min(100%, calc(100dvh - clamp(196px, 22dvh, 228px)), 1160px);
    max-height: calc(100dvh - clamp(196px, 22dvh, 228px));
  }
}

/* Fit individual desktop charts to the real space left by variable-height
 * map controls. A readable minimum keeps short viewports scrollable instead
 * of reducing the diagram until its technical labels become illegible. */
@media (min-width: 861px) {
  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.has-adaptive-chart-fit.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only {
    display: flex;
    width: 100%;
    height: auto;
    min-height: 0;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12px;
    padding-bottom: 32px;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.has-adaptive-chart-fit.has-chart-containment-space.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only {
    padding-top: 18px;
    padding-bottom: 54px;
  }

  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.has-adaptive-chart-fit.is-full-chart:not(.is-multiple-chart):not(.is-nodal-chart)
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .chart-svg-wrap-only
    .chart-wheel-svg {
    width: min(100%, var(--chart-viewport-fit-size), 1220px);
    height: auto;
    max-width: var(--chart-viewport-fit-size);
    max-height: var(--chart-viewport-fit-size);
    aspect-ratio: 1 / 1;
  }
}

/* Public support page -------------------------------------------------- */
.donation-screen {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--bg);
  color: var(--text);
}

.donation-screen.is-hidden {
  display: none;
}

.donation-screen :is(h1, h2, h3, p) {
  text-wrap: pretty;
}

.donation-nav {
  position: sticky;
  z-index: 40;
  top: 0;
  display: flex;
  min-height: 72px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid color-mix(in srgb, var(--line) 78%, transparent);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  padding: 12px clamp(22px, 4vw, 64px);
  backdrop-filter: blur(16px);
}

.donation-brand,
.donation-contact-link,
.donation-footer > button {
  border: 0;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  font: inherit;
}

.donation-brand {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.donation-brand::after {
  display: block;
  width: 28px;
  height: 2px;
  margin-top: 5px;
  background: var(--accent);
  content: "";
}

.donation-contact-link,
.donation-footer > button {
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
}

.donation-nav :is(button:hover, button:focus-visible),
.donation-footer > button:is(:hover, :focus-visible) {
  color: var(--accent);
}

.donation-nav button:focus-visible,
.donation-footer > button:focus-visible {
  border-radius: 3px;
  outline: 2px solid color-mix(in srgb, var(--accent) 42%, transparent);
  outline-offset: 5px;
}

.donation-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(260px, 0.55fr);
  align-items: end;
  gap: clamp(48px, 8vw, 120px);
  width: min(calc(100% - 64px), 1220px);
  margin: 0 auto;
  padding: clamp(80px, 10vw, 144px) 0 clamp(72px, 8vw, 112px);
}

.donation-hero-copy {
  max-width: 780px;
}

.donation-hero .eyebrow,
.donation-section-head .eyebrow,
.donation-conditions .eyebrow,
.donation-method .eyebrow,
.donation-empty .eyebrow {
  margin: 0 0 14px;
  color: var(--accent);
}

.donation-hero h1 {
  max-width: 13ch;
  margin: 0;
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(48px, 6.2vw, 86px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.donation-lead {
  max-width: 66ch;
  margin: 32px 0 0;
  color: var(--text-soft);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.68;
}

.donation-principle {
  margin: 0;
  border-block: 1px solid var(--accent-line);
  color: var(--muted);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 19px;
  line-height: 1.55;
  padding: 24px 0;
}

.donation-content {
  width: min(calc(100% - 64px), 1220px);
  margin: 0 auto;
  padding-bottom: clamp(88px, 10vw, 144px);
}

.donation-section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.65fr);
  gap: 40px;
  align-items: end;
  padding-bottom: 32px;
}

.donation-section-head h2,
.donation-conditions h2 {
  margin: 0;
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 500;
  letter-spacing: -0.035em;
  line-height: 1.06;
}

.donation-section-head > p {
  max-width: 44ch;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.donation-methods {
  border-top: 1px solid var(--line);
}

.donation-method {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: start;
  gap: clamp(22px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  padding: clamp(30px, 4vw, 48px) 0;
}

.donation-method-index {
  color: var(--accent);
  font-size: 12px;
  font-weight: 750;
  letter-spacing: 0.12em;
}

.donation-method-copy {
  min-width: 0;
  max-width: 720px;
}

.donation-method .eyebrow {
  margin-bottom: 7px;
}

.donation-method h3,
.donation-empty h3 {
  margin: 0;
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(28px, 3vw, 38px);
  font-weight: 500;
  letter-spacing: -0.025em;
}

.donation-method-copy > p:not(.eyebrow),
.donation-empty > p:not(.eyebrow) {
  max-width: 62ch;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.65;
}

.donation-method-action {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  margin-top: 18px;
  padding-inline: 18px;
  text-decoration: none;
}

.donation-method-pending {
  align-self: center;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 8px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}

.donation-copy-list,
.donation-crypto-list {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.donation-copy-row {
  display: grid;
  grid-template-columns: minmax(110px, 0.28fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  border-top: 1px solid var(--line);
  padding-top: 10px;
}

.donation-copy-row > span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.donation-copy-row code {
  min-width: 0;
  color: var(--text);
  font-family: "Astro Jupiter", Inter, ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.donation-copy-row button {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  font-weight: 650;
  padding: 0 11px;
}

.donation-copy-row button:is(:hover, :focus-visible) {
  border-color: var(--accent-line);
  background: var(--accent-soft);
}

.donation-copy-row button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 2px;
}

.donation-crypto-address {
  min-width: 0;
}

.donation-crypto-address > strong {
  display: block;
  color: var(--text);
  font-size: 13px;
}

.donation-empty {
  display: grid;
  justify-items: start;
  border-bottom: 1px solid var(--line);
  padding: clamp(34px, 5vw, 56px) 0;
}

.donation-empty .secondary-action {
  margin-top: 20px;
}

.donation-conditions {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(44px, 8vw, 120px);
  margin-top: clamp(80px, 10vw, 132px);
  border-top: 1px solid var(--accent-line);
  padding-top: clamp(40px, 5vw, 64px);
}

.donation-conditions-copy {
  display: grid;
  gap: 18px;
}

.donation-conditions-copy p {
  max-width: 66ch;
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.72;
}

.donation-official-note {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-top: 44px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  padding-top: 18px;
}

.donation-official-note p {
  margin: 0;
  font-weight: 700;
}

.donation-official-note a {
  color: var(--muted);
  text-underline-offset: 3px;
}

.donation-official-note a:is(:hover, :focus-visible) {
  color: var(--accent);
}

.donation-footer {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 24px;
  min-height: 92px;
  border-top: 1px solid var(--line);
  background: var(--surface);
  padding: 20px clamp(22px, 4vw, 64px);
}

.donation-footer > button {
  justify-self: start;
}

.donation-footer .legal-links {
  justify-self: center;
}

.donation-footer > span {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
}

@media (max-width: 900px) {
  .donation-hero,
  .donation-section-head,
  .donation-conditions {
    grid-template-columns: minmax(0, 1fr);
  }

  .donation-hero {
    align-items: start;
    gap: 42px;
  }

  .donation-principle {
    max-width: 600px;
  }

  .donation-section-head {
    gap: 16px;
  }

  .donation-method {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .donation-method-action {
    grid-column: 2;
    justify-self: start;
    margin-top: 0;
  }

  .donation-method-pending {
    grid-column: 2;
    justify-self: start;
    margin-top: 0;
  }

  .donation-conditions {
    gap: 32px;
  }

  .donation-footer {
    grid-template-columns: 1fr;
    justify-items: start;
  }

  .donation-footer > button,
  .donation-footer .legal-links,
  .donation-footer > span {
    justify-self: start;
  }
}

@media (max-width: 600px) {
  .donation-nav {
    min-height: 64px;
    padding-inline: 20px;
  }

  .donation-hero,
  .donation-content {
    width: min(calc(100% - 40px), 1220px);
  }

  .donation-hero {
    padding: 64px 0 68px;
  }

  .donation-hero h1 {
    font-size: clamp(42px, 13vw, 58px);
  }

  .donation-lead {
    margin-top: 24px;
    font-size: 16px;
  }

  .donation-method {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .donation-method-index,
  .donation-method-action,
  .donation-method-pending {
    grid-column: auto;
  }

  .donation-method-action {
    width: 100%;
    margin-top: 8px;
  }

  .donation-copy-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .donation-copy-row > span {
    grid-column: 1 / -1;
  }

  .donation-official-note {
    display: grid;
  }

  .donation-footer {
    padding-block: 26px;
  }

  .donation-footer .legal-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
}

/* Compact donation selection ----------------------------------------- */
.donation-main {
  display: flex;
  width: min(calc(100% - 40px), 640px);
  min-height: min(660px, calc(100dvh - 165px));
  align-self: center;
  flex-direction: column;
  justify-content: center;
  gap: clamp(34px, 5vw, 46px);
  margin: 0 auto;
  padding: clamp(64px, 9vw, 112px) 0;
}

.donation-main .donation-hero {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.donation-main .donation-hero h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(44px, 5.2vw, 66px);
  letter-spacing: -0.045em;
  line-height: 1;
}

.donation-main .donation-hero > p {
  max-width: 52ch;
  margin: 20px auto 0;
  color: var(--text-soft);
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.6;
}

.donation-main .donation-methods {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  border: 0;
}

.donation-methods[data-count="1"] {
  grid-template-columns: minmax(0, 420px);
  justify-content: center;
}

.donation-methods[data-count="3"] > :last-child {
  grid-column: 1 / -1;
  width: calc(50% - 6px);
  justify-self: center;
}

.donation-method-card {
  display: grid;
  min-width: 0;
  min-height: 66px;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 15px;
  text-align: left;
  text-decoration: none;
  transition: border-color 180ms ease, background 180ms ease, transform 180ms ease;
}

.donation-method-card:hover {
  border-color: var(--accent-line);
  background: color-mix(in srgb, var(--surface) 96%, var(--accent));
  transform: translateY(-1px);
}

.donation-method-card:focus-visible {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 34%, transparent);
  outline-offset: 3px;
}

.donation-method-icon {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--accent-line);
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
}

.donation-method-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.6;
}

.donation-method-icon--ethereum svg {
  stroke-width: 1.35;
}

.donation-method-arrow {
  color: var(--muted);
  font-size: 17px;
  font-weight: 500;
  transition: color 180ms ease, transform 180ms ease;
}

.donation-method-card:hover .donation-method-arrow {
  color: var(--accent);
  transform: translateX(2px);
}

.donation-empty-state {
  grid-column: 1 / -1;
  margin: 0;
  border-block: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
  padding: 24px 12px;
  text-align: center;
}

.donation-legal-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px 14px;
  margin: -8px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.donation-legal-summary button {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  padding: 3px 0;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

.donation-legal-summary button:is(:hover, :focus-visible) {
  color: var(--accent);
}

.donation-legal-summary button:focus-visible {
  border-radius: 2px;
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.donation-dialog {
  width: min(620px, calc(100vw - 32px));
  max-height: min(86dvh, 720px);
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 20%, transparent);
  color: var(--text);
  overflow: hidden;
  padding: 0;
}

.donation-dialog::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(4px);
}

.donation-dialog-modal {
  display: grid;
  max-height: min(86dvh, 720px);
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}

.donation-dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
  padding: 24px 26px 20px;
}

.donation-dialog-header .eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
}

.donation-dialog-header h2 {
  margin: 0;
  font-family: "Astro Jupiter", Georgia, "Times New Roman", serif;
  font-size: clamp(26px, 4vw, 34px);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 1.1;
}

.donation-dialog-header h2:focus {
  outline: 0;
}

.donation-dialog-content {
  display: grid;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 26px 26px;
}

.donation-dialog-content > p {
  margin: 0;
  color: var(--text-soft);
  font-size: 14px;
  line-height: 1.68;
}

.donation-dialog-links {
  display: grid;
  gap: 9px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  padding-top: 17px;
}

.donation-dialog-links a {
  width: fit-content;
  color: var(--muted);
  font-size: 12px;
  text-underline-offset: 3px;
}

.donation-dialog-links a:is(:hover, :focus-visible) {
  color: var(--accent);
}

.donation-method-dialog {
  width: min(560px, calc(100vw - 32px));
}

.donation-method-dialog .donation-copy-list {
  gap: 14px;
  margin: 0;
}

.donation-method-dialog .donation-copy-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.donation-method-dialog .donation-copy-row {
  grid-template-columns: minmax(96px, 0.26fr) minmax(0, 1fr) auto;
}

.donation-method-dialog .donation-method-note {
  margin-top: 2px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  padding-top: 16px;
}

@media (max-width: 600px) {
  .donation-main {
    min-height: 0;
    gap: 34px;
    padding: 58px 0 64px;
  }

  .donation-main .donation-hero h1 {
    font-size: clamp(40px, 12vw, 48px);
  }

  .donation-main .donation-hero > p {
    margin-top: 17px;
    font-size: 15px;
  }

  .donation-main .donation-methods,
  .donation-methods[data-count="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  .donation-methods[data-count="3"] > :last-child {
    grid-column: auto;
    width: 100%;
  }

  .donation-method-card {
    width: 100%;
    min-height: 64px;
  }

  .donation-legal-summary {
    display: grid;
    gap: 4px;
  }

  .donation-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .donation-dialog-modal {
    max-height: calc(100dvh - 24px);
  }

  .donation-dialog-header {
    gap: 18px;
    padding: 20px 18px 17px;
  }

  .donation-dialog-header h2 {
    font-size: 27px;
  }

  .donation-dialog-content {
    padding: 18px;
  }

  .donation-method-dialog .donation-copy-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .donation-method-dialog .donation-copy-row > span {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .donation-method-card,
  .donation-method-arrow {
    transition: none;
  }

  .donation-method-card:hover,
  .donation-method-card:hover .donation-method-arrow {
    transform: none;
  }
}

/* Administration: contact inbox --------------------------------------- */
.admin-contact-filters {
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 190px) minmax(180px, 220px) auto auto;
}

.admin-contact-email {
  display: block;
  max-width: 230px;
  margin-top: 3px;
  overflow: hidden;
  color: var(--accent);
  font-size: 11px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-contact-email:hover,
.admin-contact-email:focus-visible {
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.admin-contact-message {
  width: min(100%, 390px);
  color: var(--text-soft);
  line-height: 1.45;
}

.admin-contact-message summary {
  cursor: pointer;
  font-weight: 500;
  overflow-wrap: anywhere;
}

.admin-contact-message summary:hover,
.admin-contact-message summary:focus-visible {
  color: var(--accent);
}

.admin-contact-message summary:focus-visible {
  border-radius: 3px;
  outline: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  outline-offset: 3px;
}

.admin-contact-message p {
  margin: 9px 0 2px;
  border-left: 2px solid var(--accent-line);
  color: var(--text);
  padding-left: 10px;
  overflow-wrap: anywhere;
}

#admin-contact .admin-table {
  min-width: 1040px;
}

#admin-contact .admin-action-button {
  min-width: 132px;
}

@media (max-width: 1250px) {
  .admin-contact-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-contact-filters label:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 860px) {
  .admin-contact-filters {
    grid-template-columns: minmax(0, 1fr);
  }

  .admin-contact-filters label:first-child {
    grid-column: auto;
  }

  .admin-contact-filters :is(.admin-waitlist-search, .admin-waitlist-reset) {
    width: 100%;
  }
}

/* Contact dialog final polish ------------------------------------------- */
.contact-dialog {
  width: min(540px, calc(100vw - 32px));
  max-height: min(90dvh, 760px);
  overflow: hidden;
  border-color: color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 12px;
  box-shadow: 0 24px 70px color-mix(in srgb, var(--ink) 20%, transparent);
}

.contact-dialog .contact-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 0;
  max-height: min(90dvh, 760px);
  padding: 0;
  overflow: hidden;
}

.contact-dialog :is(.contact-form, .contact-success) {
  grid-row: 2;
}

.contact-dialog .contact-header {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 24px 26px 20px;
  border-bottom: 1px solid var(--line);
}

.contact-dialog .contact-header-copy {
  min-width: 0;
  max-width: 390px;
}

.contact-dialog .contact-eyebrow {
  margin: 0 0 7px;
}

.contact-dialog .contact-header h2 {
  margin: 0;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.contact-dialog .contact-intro {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}

.contact-dialog #contact-close {
  flex: 0 0 36px;
  align-self: flex-start;
  width: 36px;
  height: 36px;
  margin: 0;
}

.contact-dialog .contact-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
  min-height: 0;
  padding: 22px 26px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.contact-dialog .contact-field {
  display: grid;
  align-content: start;
  gap: 7px;
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}

.contact-dialog .contact-field--wide,
.contact-dialog .contact-status,
.contact-dialog .contact-actions {
  grid-column: 1 / -1;
}

.contact-dialog .contact-field :is(input, select, textarea) {
  width: 100%;
  margin: 0;
  border-color: color-mix(in srgb, var(--line) 88%, var(--accent));
  background: color-mix(in srgb, var(--surface) 97%, var(--accent));
  color: var(--ink);
  font: inherit;
  font-weight: 400;
}

.contact-dialog .contact-field :is(input, select) {
  min-height: 46px;
  padding: 0 13px;
}

.contact-dialog .contact-field textarea {
  min-height: 116px;
  padding: 12px 13px;
  line-height: 1.5;
  resize: vertical;
}

.contact-dialog .contact-field :is(input, select, textarea):focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
  outline: none;
}

.contact-dialog .contact-field-error {
  margin: -1px 0 0;
  color: var(--danger);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
}

.contact-dialog .contact-field-error:empty {
  display: none;
}

.contact-dialog .contact-status {
  min-height: 0;
  margin: 0;
}

.contact-dialog .contact-status:empty {
  display: none;
}

.contact-dialog .contact-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 2px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.contact-dialog .contact-submit {
  min-width: 158px;
  min-height: 46px;
}

.contact-dialog .contact-success {
  min-height: 250px;
  padding: 38px 32px 42px;
}

.contact-dialog .contact-support {
  grid-row: 3;
  display: flex;
  justify-content: center;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 96%, var(--accent));
  padding: 13px 24px 15px;
}

.contact-dialog .contact-support[hidden] {
  display: none;
}

.contact-dialog .contact-support-link {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  border-radius: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.2;
  padding: 5px 8px;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease;
}

.contact-dialog .contact-support-link:hover {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
}

.contact-dialog .contact-support-link:focus-visible {
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 40%, transparent);
  outline-offset: 2px;
}

.contact-dialog .contact-support-icon {
  color: var(--accent);
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
}

@media (max-width: 560px) {
  .contact-dialog {
    width: calc(100vw - 24px);
    max-height: calc(100dvh - 24px);
  }

  .contact-dialog .contact-modal {
    max-height: calc(100dvh - 24px);
  }

  .contact-dialog .contact-header {
    gap: 16px;
    padding: 20px 20px 18px;
  }

  .contact-dialog .contact-header h2 {
    font-size: 24px;
  }

  .contact-dialog .contact-form {
    grid-template-columns: minmax(0, 1fr);
    gap: 13px;
    padding: 18px 20px 20px;
  }

  .contact-dialog .contact-field--wide,
  .contact-dialog .contact-status,
  .contact-dialog .contact-actions {
    grid-column: auto;
  }

  .contact-dialog .contact-field textarea {
    min-height: 104px;
  }

  .contact-dialog .contact-actions {
    padding-top: 14px;
  }

  .contact-dialog .contact-support {
    padding-block: 11px 12px;
  }

  .contact-dialog .contact-submit {
    width: 100%;
  }
}

@media (max-height: 640px) {
  .contact-dialog .contact-header {
    padding-top: 18px;
    padding-bottom: 16px;
  }

  .contact-dialog .contact-form {
    padding-top: 16px;
    padding-bottom: 18px;
  }

  .contact-dialog .contact-field textarea {
    min-height: 88px;
  }
}

/* The nodal diagram has age labels and markers outside the wheel's viewBox.
 * Reserve enough room above it so those elements start below the sticky card
 * header instead of being visually clipped by it. */
@media (min-width: 861px) {
  .private-screen.private-maps-active
    .chart-wheel-stage.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .nodal-wheel-stack {
    margin-top: clamp(64px, 7dvh, 84px);
  }
}

/* Keep the two Astroanamnesis three-map compositions inside the real stage
 * left below variable-height controls. Their triangular relationship stays
 * intact; short viewports retain scrolling once the readable minimum is met. */
@media (min-width: 861px) and (min-height: 601px) and (orientation: landscape) {
  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart {
    --collapsed-multiple-card-width: var(--chart-viewport-fit-size);
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart
    .chart-wheel-triple {
    height: var(--chart-multiple-canvas-height) !important;
    min-height: var(--chart-multiple-canvas-height) !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart
    .chart-triple-slot-top {
    top: var(--chart-multiple-top-offset) !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart
    :is(.chart-triple-slot-left, .chart-triple-slot-right) {
    top: var(--chart-multiple-lower-top) !important;
  }
}

/* The nodal map needs extra breathing room for ages, cusp markers and labels
 * outside the wheel. JavaScript subtracts those real margins before setting
 * this size, preventing both top clipping and bottom overflow. */
@media (min-width: 861px) {
  .private-screen.private-maps-active.sidebar-collapsed
    .chart-wheel-stage.has-adaptive-chart-fit.is-nodal-chart
    .chart-wheel-workspace:not(:fullscreen):not(.is-chart-card-fallback-fullscreen)
    .nodal-wheel-stack {
    width: min(100%, var(--chart-viewport-fit-size), 1160px);
  }
}

/* When the three technical wheels cannot keep a clear gap between their
 * exterior labels, replace the triangular composition with the established
 * single-column reading order. This class is based on measured space rather
 * than on a device-specific breakpoint. */
@media (min-width: 861px) and (min-height: 601px) and (orientation: landscape) {
  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit {
    overflow-x: hidden;
    overflow-y: auto;
    padding: clamp(10px, 1.4vw, 20px);
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-wheel-workspace-multiple,
  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-wheel-workspace-multiple
    > .chart-wheel-main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-wheel-triple {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "tropical"
      "sideral"
      "memoria";
    align-items: start;
    gap: clamp(34px, 5dvh, 64px);
    box-sizing: border-box;
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 clamp(28px, 4dvh, 48px) !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-multiple-topbar {
    grid-area: topbar;
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-triple-slot {
    position: static !important;
    width: min(100%, clamp(720px, 68vw, 900px)) !important;
    max-width: 900px !important;
    justify-self: center;
    margin: 0 auto !important;
    transform: none !important;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-triple-slot-left {
    grid-area: tropical;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-triple-slot-top {
    grid-area: sideral;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-triple-slot-right {
    grid-area: memoria;
  }

  :is(.private-screen.private-maps-active.sidebar-collapsed, .guest-maps-screen.private-maps-active)
    .chart-wheel-stage.has-adaptive-chart-fit.is-multiple-chart.is-stacked-chart-fit
    .chart-wheel-card-triple {
    overflow: visible !important;
  }
}

/* Apply the same collision-safe composition in fullscreen. The three wheels
 * first shrink to the largest comfortable triangular size; the vertical
 * sequence is reserved for screens where that result would be too small. */
@media (min-width: 861px) and (orientation: landscape) {
  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).has-adaptive-multiple-fit:not(.is-stacked-chart-fit)
    .chart-triple-slot {
    width: var(--chart-fullscreen-multiple-card-width) !important;
    max-width: var(--chart-fullscreen-multiple-card-width) !important;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    scroll-snap-type: none !important;
    padding: clamp(8px, 1vw, 16px) !important;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    > .chart-wheel-main {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-wheel-triple {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "tropical"
      "sideral"
      "memoria";
    align-items: start;
    gap: clamp(34px, 5dvh, 64px);
    box-sizing: border-box;
    width: min(100%, 1040px) !important;
    max-width: 1040px !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 0 clamp(28px, 4dvh, 48px) !important;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-multiple-topbar {
    grid-area: topbar;
    position: sticky !important;
    top: 0 !important;
    right: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-triple-slot {
    position: static !important;
    width: min(100%, clamp(720px, 68vw, 900px)) !important;
    max-width: 900px !important;
    justify-self: center;
    margin: 0 auto !important;
    transform: none !important;
    scroll-snap-align: none;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-triple-slot-left {
    grid-area: tropical;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-triple-slot-top {
    grid-area: sideral;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-triple-slot-right {
    grid-area: memoria;
  }

  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).is-stacked-chart-fit
    .chart-wheel-card-triple {
    overflow: visible !important;
  }
}

/* High-resolution fullscreen canvases have enough vertical room to deepen the
 * triangle. Lowering the side wheels improves the diagonal separation while
 * preserving a comfortable margin beneath them. */
@media (min-width: 2200px) and (min-height: 1200px) and (orientation: landscape) {
  .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen).has-adaptive-multiple-fit:not(.is-stacked-chart-fit)
    :is(.chart-triple-slot-left, .chart-triple-slot-right) {
    top: clamp(410px, 30dvh, 440px) !important;
  }
}

/* Aspect figures --------------------------------------------------------- */
.chart-wheel-workspace-multiple .floating-chart-panel-multiple-patterns.is-viewport-anchored {
  position: fixed;
  right: auto;
  bottom: auto;
  max-width: calc(100vw - 20px);
  max-height: calc(100dvh - 20px);
  margin: 0;
  transform: none;
  overscroll-behavior: contain;
}

.chart-wheel-workspace-multiple
  .floating-chart-panel-multiple-patterns.is-viewport-anchored
  .floating-panel-content {
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
}

.chart-pattern-summary {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  min-height: 27px;
  align-items: center;
  gap: 7px;
  margin-top: 7px;
  border: 1px solid color-mix(in srgb, var(--accent) 27%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 86%, var(--accent-soft));
  padding: 4px 5px 4px 8px;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--text) 4%, transparent);
  color: var(--text-soft);
  cursor: pointer;
  font: inherit;
  font-size: 10.5px;
  font-weight: 760;
  line-height: 1.15;
  text-align: left;
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.chart-card-header-actions .chart-tools > .chart-pattern-summary {
  flex: 0 0 auto;
  max-width: none;
  margin-top: 0;
  align-self: center;
  white-space: nowrap;
}

.chart-card-header-actions .chart-tools:has(> .chart-pattern-summary) {
  align-items: center;
}

.chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .chart-tools-scroll-hint:disabled {
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 860px), (orientation: landscape) and (max-width: 960px) and (max-height: 600px) {
  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .chart-tools-scroll-hint.is-visible {
    display: inline-flex;
    position: relative;
    z-index: 3;
    flex: 0 0 18px;
    width: 18px;
    min-width: 18px;
    height: 30px;
    min-height: 30px;
    margin: 0;
    padding: 0;
    align-self: center;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--accent);
    font-size: 20px;
    cursor: pointer;
    pointer-events: auto;
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .chart-tools-scroll-hint-prev::before {
    content: "\2039";
  }

  .chart-wheel-workspace:not(.chart-wheel-workspace-multiple) .chart-tools-scroll-hint-next::before {
    content: "\203A";
  }
}

.chart-pattern-summary:hover,
.chart-pattern-summary:focus-visible,
.chart-pattern-summary.is-active,
.chart-pattern-summary[aria-pressed="true"],
.chart-pattern-summary[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 72%, var(--surface));
  color: var(--accent-strong);
  box-shadow: 0 7px 18px color-mix(in srgb, var(--accent) 11%, transparent);
  outline: 0;
}

.chart-pattern-summary:hover {
  transform: translateY(-1px);
}

.chart-pattern-summary:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent),
    0 7px 18px color-mix(in srgb, var(--accent) 11%, transparent);
}

.chart-pattern-summary-icon {
  display: inline-grid;
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent-soft) 74%, var(--surface));
  color: var(--accent);
  line-height: 0;
}

.chart-pattern-summary-icon svg {
  width: 11px;
  height: 11px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.chart-pattern-summary-count {
  display: inline-grid;
  min-width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--accent);
  padding: 0 5px;
  color: var(--on-accent);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 850;
  line-height: 1;
}

.chart-pattern-panel {
  display: grid;
  gap: 12px;
  min-width: 0;
  padding: 12px;
}

.chart-pattern-intro {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.48;
}

.chart-pattern-list {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.chart-pattern-card {
  display: grid;
  width: 100%;
  min-width: 0;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: start;
  gap: 11px;
  border: 1px solid color-mix(in srgb, var(--line) 88%, var(--accent));
  border-radius: 11px;
  background: color-mix(in srgb, var(--surface) 96%, var(--accent-soft));
  padding: 10px;
  box-shadow: 0 5px 16px color-mix(in srgb, var(--text) 3.5%, transparent);
  color: var(--text);
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition:
    border-color 170ms ease,
    background-color 170ms ease,
    box-shadow 170ms ease,
    transform 170ms ease;
}

.chart-pattern-card:hover,
.chart-pattern-card:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 48%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 48%, var(--surface));
  box-shadow: 0 9px 22px color-mix(in srgb, var(--accent) 9%, transparent);
  outline: 0;
}

.chart-pattern-card:hover {
  transform: translateY(-1px);
}

.chart-pattern-card:focus-visible {
  box-shadow:
    0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent),
    0 9px 22px color-mix(in srgb, var(--accent) 9%, transparent);
}

.chart-pattern-card.is-active,
.chart-pattern-card[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--accent) 68%, var(--line));
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--accent-soft) 82%, var(--surface)), var(--surface));
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 10px 24px color-mix(in srgb, var(--accent) 12%, transparent);
}

.chart-pattern-card-visual {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 25%, var(--line));
  border-radius: 50%;
  background:
    radial-gradient(circle at center, var(--surface) 0 27%, transparent 29%),
    color-mix(in srgb, var(--accent-soft) 76%, var(--surface));
  color: var(--accent);
  line-height: 0;
}

.chart-pattern-card.is-active .chart-pattern-card-visual,
.chart-pattern-card[aria-pressed="true"] .chart-pattern-card-visual {
  border-color: color-mix(in srgb, var(--accent) 62%, var(--line));
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 9%, transparent);
}

.chart-pattern-card-visual svg {
  width: 27px;
  height: 27px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.45;
}

.chart-pattern-card-copy {
  display: grid;
  min-width: 0;
  gap: 5px;
}

.chart-pattern-card-heading {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.chart-pattern-card-title {
  min-width: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 830;
  line-height: 1.2;
}

.chart-pattern-card-badge {
  display: inline-flex;
  min-height: 19px;
  flex: 0 0 auto;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--accent) 23%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-soft) 68%, var(--surface));
  padding: 2px 6px;
  color: var(--accent-strong);
  font-size: 9px;
  font-weight: 820;
  letter-spacing: 0.035em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}

.chart-pattern-card-description {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.42;
}

.chart-pattern-card-planets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 1px;
}

.chart-pattern-planet-chip {
  display: inline-flex;
  min-height: 20px;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--line) 82%, var(--accent));
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-soft) 82%, var(--surface));
  padding: 2px 7px;
  color: var(--text-soft);
  font-size: 9.5px;
  font-weight: 720;
  line-height: 1.1;
  white-space: nowrap;
}

.chart-pattern-card.is-active .chart-pattern-planet-chip,
.chart-pattern-card[aria-pressed="true"] .chart-pattern-planet-chip {
  border-color: color-mix(in srgb, var(--accent) 27%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface));
  color: var(--accent-strong);
}

.chart-pattern-card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--muted);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  font-weight: 620;
  line-height: 1.25;
}

.chart-pattern-card-meta > * + * {
  position: relative;
  padding-left: 8px;
}

.chart-pattern-card-meta > * + *::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: currentColor;
  content: "";
  opacity: 0.65;
  transform: translateY(-50%);
}

.chart-pattern-empty {
  display: grid;
  min-height: 120px;
  place-items: center;
  gap: 7px;
  border: 1px dashed color-mix(in srgb, var(--accent) 23%, var(--line));
  border-radius: 11px;
  background: color-mix(in srgb, var(--accent-soft) 28%, var(--surface));
  padding: 20px 16px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
  text-align: center;
}

.chart-pattern-empty > * {
  margin: 0;
}

.chart-pattern-reset {
  display: inline-flex;
  min-height: 32px;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: start;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 8px;
  background: var(--surface);
  padding: 6px 10px;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.15;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.chart-pattern-reset:hover,
.chart-pattern-reset:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 58%, var(--line));
  background: var(--accent-soft);
  color: var(--accent-strong);
  outline: 0;
}

/* Pattern focus is intentionally independent from planet focus. It may reveal
 * the selected figure temporarily even when one of its members is hidden by
 * the user's ordinary map filters; leaving focus restores those filters. */
.chart-pattern-only {
  display: none;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-aspect:not(.is-chart-pattern-aspect) {
  opacity: 0.07;
  pointer-events: none;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-aspect-anchor.is-chart-pattern-dimmed {
  opacity: 0.06;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-aspect-anchor.is-chart-pattern-anchor {
  display: inline !important;
  opacity: 1 !important;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-aspect.is-chart-pattern-aspect {
  display: inline !important;
  opacity: 1 !important;
}

.chart-wheel-svg.has-chart-pattern-focus
  .chart-aspect.is-chart-pattern-aspect:is(.is-chart-planet-hidden, .is-chart-aspect-hidden) {
  display: inline !important;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-planet.is-chart-pattern-dimmed:not(.is-chart-pattern-planet) {
  opacity: 0.16;
  filter: grayscale(0.58) saturate(0.38);
}

.chart-wheel-svg.has-chart-pattern-focus .chart-planet.is-chart-pattern-planet {
  display: inline !important;
  opacity: 1 !important;
  filter: drop-shadow(0 2px 4px color-mix(in srgb, var(--accent) 38%, transparent));
}

.chart-wheel-svg.has-chart-pattern-focus
  .chart-planet.is-chart-pattern-planet.is-chart-planet-hidden {
  display: inline !important;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-planet.is-chart-pattern-planet .chart-planet-hit {
  fill: color-mix(in srgb, var(--accent) 14%, transparent) !important;
  fill-opacity: 0.2 !important;
  stroke: color-mix(in srgb, var(--accent) 72%, var(--surface)) !important;
  stroke-width: 1.35 !important;
  stroke-opacity: 0.86 !important;
  vector-effect: non-scaling-stroke;
}

.chart-wheel-svg.has-chart-pattern-focus .chart-planet.is-chart-pattern-planet .chart-planet-glyph {
  transform-origin: center;
  transform-box: fill-box;
  animation: chartPatternPlanetPulse 1.8s ease-in-out infinite;
}

@keyframes chartPatternPlanetPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.075);
  }
}

@media (max-width: 640px) {
  .chart-pattern-summary {
    min-height: 25px;
    gap: 6px;
    margin-top: 5px;
    padding: 3px 4px 3px 7px;
    font-size: 10px;
  }

  .chart-pattern-summary-icon {
    width: 16px;
    height: 16px;
    flex-basis: 16px;
  }

  .chart-pattern-panel {
    gap: 10px;
    padding: 10px;
  }

  .chart-pattern-card {
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 9px;
    padding: 9px;
  }

  .chart-pattern-card-visual {
    width: 38px;
    height: 38px;
  }

  .chart-pattern-card-visual svg {
    width: 23px;
    height: 23px;
  }

  .chart-pattern-card-heading {
    align-items: flex-start;
  }

  .chart-pattern-card-badge {
    font-size: 8.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chart-pattern-summary,
  .chart-pattern-card,
  .chart-pattern-reset {
    transition: none !important;
  }

  .chart-pattern-summary:hover,
  .chart-pattern-card:hover {
    transform: none;
  }

  .chart-wheel-svg.has-chart-pattern-focus .chart-planet.is-chart-pattern-planet .chart-planet-glyph {
    animation: none !important;
  }
}

/* Mobile single wheels include labels beyond the SVG bounds. Size against the
 * container, leaving room for ASC/DESC instead of clipping at the screen edge. */
@media (max-width: 860px) {
  .chart-wheel-stage.is-full-chart:not(.is-multiple-chart) .chart-svg-wrap-only {
    box-sizing: border-box;
    padding-inline: 8%;
  }

  .chart-wheel-stage.is-full-chart:not(.is-multiple-chart) .chart-svg-wrap-only .chart-wheel-svg {
    width: 100%;
    max-width: 100%;
    height: auto;
    flex: 0 1 auto;
  }

  /* Keep the base wheel and its age overlay scaled together. */
  .chart-wheel-stage.is-nodal-chart .chart-wheel-workspace .nodal-wheel-stack {
    width: 88%;
    max-width: 88%;
    margin-inline: auto;
  }
}

@media (max-width: 860px), (max-width: 960px) and (max-height: 600px) {
  #chart-wheel-stage.is-nodal-chart .chart-wheel-workspace:is(:fullscreen, .is-chart-card-fallback-fullscreen) .nodal-wheel-stack {
    width: min(calc(86% - 12px), 520px);
    max-width: calc(86% - 12px);
    margin: 28px auto 24px;
  }
}

.chart-planet-tooltip-close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 1;
  min-width: 40px;
  min-height: 40px;
}

.chart-planet-tooltip:has(.chart-planet-tooltip-close) .chart-planet-tooltip-header {
  padding-right: 42px;
}

/* Mobile triple charts use a scrollable triangle in landscape.
 * The portrait override below stacks the same wheels within the screen. */
@media (max-width: 860px), (max-width: 960px) and (max-height: 600px) {
  /* Allow native scrolling across the whole canvas before custom zooming. */
  #chart-wheel-stage .chart-wheel-workspace-multiple > .chart-wheel-main:not(.is-chart-touch-zoomed),
  #chart-wheel-stage .chart-wheel-workspace-multiple > .chart-wheel-main:not(.is-chart-touch-zoomed) .chart-svg-wrap {
    touch-action: pan-x pan-y;
  }

  #chart-wheel-stage.is-multiple-chart {
    overflow: auto !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: auto !important;
    padding: 0 !important;
    scroll-snap-type: none !important;
    touch-action: pan-x pan-y;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen) {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple > .chart-wheel-main,
  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-wheel-triple {
    display: block !important;
    position: relative;
    box-sizing: border-box;
    width: 1110px !important;
    min-width: 1110px !important;
    max-width: none !important;
    height: 650px !important;
    min-height: 650px !important;
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-multiple-topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: auto !important;
    box-sizing: border-box;
    width: 100cqw !important;
    max-width: 100cqw !important;
    margin: 0 !important;
    transform: none !important;
    z-index: 8;
    background: var(--surface);
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-triple-slot {
    position: absolute !important;
    width: 380px !important;
    min-width: 380px !important;
    max-width: 380px !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    scroll-snap-align: none !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-triple-slot-top {
    top: 80px !important;
    left: 365px !important;
    right: auto !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-triple-slot-left {
    top: 202px !important;
    left: 20px !important;
    right: auto !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-triple-slot-right {
    top: 202px !important;
    left: 710px !important;
    right: auto !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-wheel-card-triple {
    display: grid !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple :is(.chart-svg-wrap-triple, .chart-svg-wrap-triple .chart-wheel-svg) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
}

@media (max-width: 860px), (max-width: 960px) and (max-height: 600px) {
  #chart-wheel-stage .chart-wheel-workspace-multiple {
    container-type: inline-size;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-multiple-topbar-actions {
    display: flex !important;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-tools-multiple {
    min-width: 0 !important;
    flex: 1 1 0 !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-card-actions-multiple {
    flex: 0 0 auto !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple:is(:fullscreen, .is-chart-card-fallback-fullscreen) .chart-multiple-topbar {
    padding-left: max(12px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(12px, env(safe-area-inset-right, 0px)) !important;
  }
}

/* Portrait applies to both triple views, including native/fallback fullscreen. */
@media (max-width: 860px) and (orientation: portrait) {
  #chart-wheel-stage .chart-wheel-workspace-multiple > .chart-wheel-main,
  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-wheel-triple {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-wheel-triple {
    display: flex !important;
    flex-direction: column;
    gap: 32px;
    padding-bottom: 24px !important;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-triple-slot {
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    order: 0 !important;
    padding-inline: 8%;
  }

  #chart-wheel-stage .chart-wheel-workspace-multiple .chart-wheel-card-triple .chart-card-header {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 12px !important;
    transform: none !important;
    order: -1;
  }
}

/* Phone symbol fonts already give Venus/Mars sufficient weight; the desktop
 * compensation makes their outlines too heavy at small display sizes. */
@media (max-width: 860px), (pointer: coarse) {
  html .chart-wheel-svg .chart-planet .chart-planet-optical-glyph.planet-glyph-balanced {
    stroke-width: 0.45 !important;
    -webkit-text-stroke: 0;
  }

  html :is(.astro-table-planet-color, .table-planet-glyph, .aspect-matrix-table .planet-glyph-balanced).planet-glyph-balanced {
    -webkit-text-stroke: 0 currentColor;
  }
}

@media (max-width: 860px), (pointer: coarse) {
  html .astro-table-planet-color.planet-glyph-mercury {
    font-size: calc(var(--chart-table-symbol-size, 16px) * 1.1) !important;
  }

  html .table-planet-glyph.planet-glyph-mercury {
    font-size: 1.1em;
  }

  html :is(.chart-inline-table, .floating-table, .chart-mini-aspect-grid, .aspect-matrix-table) .planet-glyph-balanced,
  html .astro-table-planet-color.planet-glyph-balanced,
  html .table-planet-glyph.planet-glyph-balanced {
    -webkit-text-stroke: 0 currentColor;
  }
}