.natal-demo-body {
  margin:0;
  overflow-anchor:none;
}

@media (min-width: 621px) and (min-height: 720px) {
  .natal-demo-body:has(.natal-widget__results:empty):not(:has(.natal-widget__geo-results:not(:empty), .natal-time-choice:not([hidden]))) {
    overflow-y:hidden;
  }
}

@media (max-width: 620px) and (min-height: 600px) {
  .natal-demo-body:has(.natal-widget__results:empty):not(:has(.natal-widget__geo-results:not(:empty), .natal-time-choice:not([hidden]))) {
    overflow-y:hidden;
  }
}

.demo-page {
  margin:0;
  box-sizing:border-box;
}

.natal-widget,
.natal-widget * {
  box-sizing:border-box;
}

.natal-widget {
  max-width:100%;
  min-width:0;
}

.natal-load-fallback {
  max-width:650px;
  margin:0 auto;
  color:rgba(255, 255, 255, .75);
  font:300 clamp(22px, 2vw, 30px)/1.2 "Alumni Sans", Arial, Helvetica, sans-serif;
  text-align:center;
  opacity:0;
  animation:natal-fallback-visible 0s linear 1s forwards;
}

@keyframes natal-fallback-visible {
  to { opacity:1; }
}

.natal-widget__row {
  border-top:1px solid #d8d8d8;
}

.natal-widget__row:first-child {
  border-top:0;
}

.natal-widget__inline {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
}

.natal-widget__place-search {
  display:grid;
  align-items:center;
  margin-top:0;
}

.natal-widget__icon-button {
  place-items:center;
  border:0;
  background:transparent;
  cursor:pointer;
}

.natal-widget__icon-button svg {
  width:25px;
  height:25px;
  stroke-width:2;
}

.natal-widget__geo-results {
  display:grid;
  gap:6px;
}

.natal-widget__geo-choice {
  text-align:left;
  cursor:pointer;
}

.natal-widget__submit-row {
  display:flex;
}

.natal-widget__submit {
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}

.natal-widget__message {
  margin-top:10px;
}

.natal-widget__results {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  width:100%;
  min-width:0;
}

.natal-widget__chart-section {
  width:100%;
  min-width:0;
}

.natal-widget__summary {
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:clamp(12px, 1.15vw, 18px);
  align-items:start;
}

.natal-widget__wheel {
  width:100%;
  aspect-ratio:1;
  margin:0 auto;
  overflow:hidden;
}

.natal-widget__wheel > svg {
  width:100%;
  height:100%;
  display:block;
}

.natal-symbol {
  display:inline-block;
  vertical-align:middle;
  flex-shrink:0;
}

.natal-wheel__planet-label { color:#111; }
.natal-wheel__leader line { stroke:#777; stroke-width:.65; }
.natal-wheel__leader circle { fill:#111; }

.natal-wheel__planet-label:hover .natal-symbol,
.natal-wheel__planet-label:hover .natal-wheel__planet-degree { color:#a72665; }

.natal-wheel__sign,
.natal-wheel__planet-glyph,
.natal-wheel__planet-sign {
  font-family:"Times New Roman", Georgia, serif;
}

.natal-wheel__sign {
  font-size:32px;
  font-weight:700;
}

.natal-wheel__planet-glyph {
  font-size:24px;
  fill:#111;
}

.natal-wheel__planet-degree {
  font-size:14px;
  fill:#111;
}

.natal-wheel__planet-sign {
  font-size:16px;
  font-weight:700;
}

.natal-wheel__retro {
  font-size:11px;
  fill:#e11;
}

.natal-wheel__house-number {
  font-size:13px;
  fill:#222;
}

.natal-wheel__angle-marker line {
  stroke:#2537ff;
  stroke-width:1.4;
}

.natal-wheel__angle-marker text {
  fill:#111;
  font:700 18px/1 Arial, Helvetica, sans-serif;
}

.natal-cosmogram {
  margin:8px auto 0;
  min-width:0;
  display:grid;
  grid-template-columns:minmax(300px, 1fr) minmax(300px, 1fr);
  justify-content:center;
  gap:10px 24px;
  align-items:start;
}

.natal-cosmogram__matrix-wrap {
  overflow-x:auto;
  max-width:100%;
  min-width:0;
  justify-self:end;
}

.natal-cosmogram__matrix {
  width:auto;
  border-collapse:collapse;
  background:#fff;
}

.natal-cosmogram__matrix th,
.natal-cosmogram__matrix td {
  width:20px;
  height:20px;
  min-width:20px;
  border:1px solid #202020;
  background:#fff;
  padding:0;
  text-align:center;
  vertical-align:middle;
  font-size:15px;
  line-height:1;
  white-space:nowrap;
}

.natal-cosmogram__matrix th {
  border:0;
  color:#111;
}

.natal-cosmogram__diag-glyph,
.natal-cosmogram__sign {
  font-family:"Times New Roman", Georgia, serif;
  font-weight:700;
}

.natal-cosmogram__diag-glyph {
  display:inline-block;
  min-width:20px;
  font-size:21px;
}

.natal-cosmogram__positions {
  display:grid;
  gap:2px;
  min-width:0;
  color:#1e36ff;
  font-size:12px;
}

.natal-cosmogram__position {
  display:grid;
  grid-template-columns:74px 1fr;
  gap:6px;
  align-items:baseline;
}

.natal-cosmogram__object {
  color:#1e36ff;
}

.natal-cosmogram__pos {
  display:inline-flex;
  gap:4px;
  align-items:baseline;
  min-width:0;
  color:#1e36ff;
  font-family:Arial, Helvetica, sans-serif;
  white-space:nowrap;
}

.natal-cosmogram__sign {
  min-width:15px;
  font-size:16px;
  line-height:1;
}

.natal-cosmogram__retro,
.natal-cosmogram__motion strong {
  color:#ff2525;
  font-weight:400;
}

.natal-cosmogram__legend {
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:1fr auto;
  gap:12px 18px;
  align-items:start;
}

.natal-cosmogram__legend-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(185px, 1fr));
  gap:4px 14px;
}

.natal-cosmogram__legend-item {
  display:inline-flex;
  align-items:center;
  gap:4px;
  white-space:nowrap;
}

.natal-cosmogram__legend-symbol {
  min-width:16px;
  font-size:18px;
  font-weight:700;
  line-height:1;
  text-align:center;
}

.natal-cosmogram__motion {
  display:grid;
  gap:4px;
  white-space:nowrap;
}

.natal-widget__table-wrap {
  overflow-x:auto;
  max-width:100%;
  min-width:0;
}

.natal-widget table {
  width:100%;
  border-collapse:collapse;
  background:#fff;
}

.natal-widget th,
.natal-widget td {
  border:1px solid #ddd;
  padding:7px 8px;
  text-align:left;
  vertical-align:top;
  white-space:nowrap;
}

.natal-widget th {
  background:#f5f5f5;
  font-weight:700;
}

.natal-widget .natal-cosmogram__matrix {
  width:auto;
  min-width:0;
  table-layout:auto;
  background:#fff;
}

.natal-widget .natal-cosmogram__matrix th,
.natal-widget .natal-cosmogram__matrix td {
  width:18px;
  height:18px;
  min-width:18px;
  max-width:18px;
  border:1px solid #bfbfbf;
  background:#fff;
  padding:0;
  text-align:center;
  vertical-align:middle;
  font-size:12px;
  line-height:1;
  white-space:nowrap;
}

.natal-widget .natal-cosmogram__matrix th {
  border:0;
  background:#f7f7f7;
}

.natal-widget .natal-cosmogram__matrix .natal-cosmogram__diag-glyph {
  min-width:17px;
  font-size:18px;
  line-height:1;
}

.natal-widget__data-tables {
  display:grid;
  margin:0 auto;
}

.natal-data-table {
  width:100%;
  overflow-x:auto;
}

.natal-data-table table {
  min-width:460px;
  width:100%;
  table-layout:fixed;
  border-collapse:collapse;
  background:#eee;
}

.natal-data-table th,
.natal-data-table td {
  border:0;
  padding:7px 12px;
  vertical-align:middle;
  white-space:nowrap;
}

.natal-data-table th {
  font-size:18px;
  line-height:1.12;
  font-weight:700;
  text-align:left;
}

.natal-data-table td {
  font-size:16px;
  line-height:1.2;
}

.natal-data-table:not([data-expanded="true"]) tbody tr:nth-child(n+4) {
  display:none;
}

.natal-data-table__col-name {
  width:30%;
}

.natal-data-table--planets .natal-data-table__col-longitude {
  width:45%;
}

.natal-data-table--planets .natal-data-table__col-house {
  width:25%;
}

.natal-data-table--houses .natal-data-table__col-name {
  width:40%;
}

.natal-data-table__body,
.natal-data-table__longitude {
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.natal-data-table__planet-glyph,
.natal-data-table__sign-glyph {
  display:inline-block;
  min-width:18px;
  font-family:"Times New Roman", Georgia, serif;
  font-size:22px;
  line-height:1;
  text-align:center;
}

.natal-data-table__sign-glyph {
  min-width:22px;
  font-size:24px;
  font-weight:700;
}

.natal-data-table__degree {
  letter-spacing:0;
}

.natal-data-table__retro {
  color:#ff2525;
  font-family:"Courier New", monospace;
}

.natal-data-table__house-position {
  text-align:center;
}

.natal-data-table tfoot td {
  padding:10px 12px;
  text-align:center;
}

.natal-data-table__toggle {
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:0;
  background:transparent;
  font-size:17px;
  cursor:pointer;
}

.natal-data-table__toggle-icon {
  display:inline-grid;
  place-items:center;
  width:18px;
  height:18px;
  border:2px solid #dbe3ec;
  font-size:13px;
  font-weight:700;
  line-height:1;
}

@media (max-width: 664px) {
  .natal-cosmogram {
    grid-template-columns: minmax(0, 1fr);
  }

  .natal-cosmogram__matrix-wrap {
    justify-self:center;
  }
  
  .natal-cosmogram__positions {
    padding-top: 0;
  }
  
  .natal-cosmogram__legend {
    grid-template-columns: 1fr;
  }
  
  .natal-cosmogram__legend-grid {
    grid-template-columns: 1fr;
  }
}

.natal-demo-body {
  --mag-bg:#020202;
  --mag-text:#ffffff;
  --mag-soft:rgba(255, 255, 255, 0.62);
  --mag-muted:rgba(255, 255, 255, 0.42);
  --mag-stroke:rgba(217, 217, 217, 0.78);
  --mag-stroke-soft:rgba(217, 217, 217, 0.26);
  --mag-accent:#cc6aa5;
  min-height:100vh;
  background:var(--mag-bg);
  color:var(--mag-text);
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
}

.natal-place-label {
  margin:8px 0 0;
  font-size:clamp(18px, 1.45vw, 22px);
  line-height:1.2;
  color:#ddd;
  overflow-wrap:anywhere;
}

.natal-place-label:empty {
  display:none;
}

.natal-result-summary {
  text-align:center;
  margin:28px auto;
  max-width:836px;
}

.natal-result-summary h3 {
  font-size:clamp(28px, 2.6vw, 40px);
  font-weight:400;
  margin:0 0 8px;
  overflow-wrap:anywhere;
}

.natal-result-summary p {
  font-size:clamp(21px, 1.82vw, 27.5px);
  margin:5px 0;
  overflow-wrap:anywhere;
}

.natal-result-summary .natal-result-summary__details {
  font-size:clamp(17px, 1.45vw, 22px);
  color:#aaa;
}

.natal-result-summary__save {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(126px, 11vw, 160px);
  min-height:clamp(30px, 2.7vw, 34px);
  margin-top:clamp(8px, .8vw, 12px);
  padding:4px 16px;
  border:1px solid var(--mag-accent);
  border-radius:8px;
  background:transparent;
  color:var(--mag-text);
  font:300 clamp(17px, 1.35vw, 21px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease;
}

.natal-result-summary__save:hover:not(:disabled) {
  background:rgba(204, 106, 165, .16);
}

.natal-result-summary__save:disabled {
  opacity:.6;
  cursor:default;
}

.natal-aspects {
  margin:24px auto;
  max-width:960px;
  width:100%;
  min-width:0;
  font-size:clamp(21px, 1.75vw, 26px);
}

.natal-aspects th { background: rgba(255, 255, 255, .06); color: #eee; }
.natal-aspects th, .natal-aspects td { border-color: #333; white-space: normal; }

.natal-aspects summary {
  cursor:pointer;
  padding:14px 0;
}

.natal-aspects p {
  color:#aaa;
  font-size:21px;
}

.natal-time-choice {
  grid-column:1 / -1;
  font-size:clamp(19px, 1.6vw, 24px);
  text-align:center;
}

.natal-time-choice[hidden] {
  display:none;
}

.natal-time-choice select {
  display:block;
  margin:8px auto;
  max-width:100%;
}

.natal-widget__submit:disabled {
  opacity:.65;
  cursor:progress;
}

.natal-widget :focus-visible {
  outline:2px solid #f28ac9;
  outline-offset:3px;
}

.demo-page {
  --natal-page-top:clamp(18px, calc(50svh - 270px), 250px);
  min-height:calc(100svh - var(--header-height));
  padding:var(--natal-page-top) 20px 40px;
  position:relative;
  display:grid;
  justify-items:center;
  align-items:start;
  background:transparent;
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
}

.natal-demo-back {
  position:absolute;
  top:max(0px, calc(var(--natal-page-top) - 62px));
  left:clamp(20px, calc(30vw - 100px), 340px);
  display:grid;
  place-items:center;
  width:clamp(52px, 4.8vw, 72px);
  height:clamp(40px, 3vw, 44px);
  color:rgba(255, 255, 255, 0.4);
  transition:color 0.2s ease;
}

.natal-demo-back:hover,
.natal-demo-back:focus-visible {
  color:var(--mag-accent);
}

.natal-demo-back svg {
  display:block;
  width:clamp(40px, 3.2vw, 48px);
  height:auto;
}

.natal-demo-section {
  width:min(100%, 1250px);
  margin:0 auto;
  display:grid;
  min-width:0;
  grid-template-columns:minmax(0, 1fr);
  justify-items:center;
}

.natal-widget {
  --natal-field-width:clamp(210px, calc(4.75vw + 192px), 264px);
  --natal-submit-width:clamp(140px, calc(3vw + 128px), 174px);
  --natal-label-width:clamp(122px, calc(3.96vw + 107px), 167px);
  --natal-row-gap:clamp(10px, 1.3vw, 20px);
  width:100%;
  color:var(--mag-text);
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
  font-size:24px;
  line-height:1;
}

.natal-widget__title {
  --title-spacing:clamp(3px, 0.7vw, 11px);
  margin:0;
  padding:0 0 0 var(--title-spacing);
  color:var(--mag-text);
  font-size:clamp(40px, calc(2.5vw + 32px), 70px);
  font-weight:300;
  line-height:1;
  letter-spacing:var(--title-spacing);
  text-align:center;
  white-space:normal;
  text-wrap:balance;
}

.natal-widget__subtitle {
  width:min(100%, 1012px);
  margin:clamp(18px, 2vw, 29px) auto clamp(30px, calc(1.85vw + 12px), 40px);
  color:rgba(255, 255, 255, 0.7);
  font-size:clamp(23px, 2.2vw, 33px);
  font-weight:300;
  line-height:1.06;
  text-align:center;
  text-wrap:balance;
}

.natal-widget__panel {
  width:min(100%, calc(var(--natal-field-width) + var(--natal-label-width) + var(--natal-label-width) + var(--natal-row-gap) + var(--natal-row-gap)));
  margin:0 auto;
  border:0;
  background:transparent;
  box-shadow:none;
}

.natal-widget__row {
  min-height:clamp(34px, 2.5vw, 38px);
  display:grid;
  grid-template-columns:var(--natal-label-width) minmax(0, 1fr);
  gap:var(--natal-row-gap);
  align-items:center;
  padding:clamp(4px, 0.3vw, 5px) 0;
  border:0;
}

.natal-widget__label {
  justify-self:end;
  color:var(--mag-soft);
  font-size:clamp(21px, 2.1vw, 32px);
  font-weight:300;
  line-height:1;
  text-align:right;
  text-transform:uppercase;
  white-space:nowrap;
}

.natal-widget__row:nth-child(2) .natal-widget__label {
  letter-spacing:0.041em;
}

.natal-widget__row:nth-child(4) .natal-widget__label {
  letter-spacing:0.009em;
}

.natal-widget__inline {
  gap:clamp(5px, 0.55vw, 7px);
}

.natal-widget__date,
.natal-widget__time {
  display:grid;
  width:var(--natal-field-width);
}

.natal-widget__date {
  grid-template-columns:repeat(3, minmax(0, 1fr));
}

.natal-widget__time {
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
}

.natal-widget input,
.natal-widget select {
  min-height:clamp(30px, calc(1vw + 20px), 35px);
}

.natal-widget input,
.natal-widget select {
  border:1px solid var(--mag-stroke);
  border-radius:6px;
  background:rgba(0, 0, 0, 0.08);
  color:var(--mag-text);
  font:300 clamp(18px, 1.4vw, 21px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  padding:3px 9px;
}

.natal-widget__panel :is(input:not([type="hidden"]), select) {
  transition:border-color 0.2s ease, background-color 0.2s ease;
}

.natal-widget__panel :is(input:not([type="hidden"]), select):is(:hover, :focus):not(.is-selection-complete) {
  border-color:var(--mag-accent);
  background-color:rgba(204, 106, 165, 0.08);
}

.natal-widget select {
  color-scheme:dark;
}

.natal-widget input::placeholder {
  color:rgba(255, 255, 255, 0.35);
}

.natal-widget input:focus,
.natal-widget select:focus {
  outline:none;
}

.natal-widget button:focus-visible {
  outline:1px solid var(--mag-accent);
  outline-offset:3px;
}

.natal-widget__name-input {
  width:var(--natal-field-width);
}

.natal-widget__date select,
.natal-widget__time select {
  width:100%;
  min-width:0;
}

.natal-widget__date span,
.natal-widget__time span {
  color:var(--mag-muted);
}

.natal-widget__place-search {
  width:var(--natal-field-width);
  grid-template-columns:minmax(0, 1fr);
  gap:0;
}

.natal-widget__icon-button {
  display:none;
  width:32px;
  height:32px;
  color:var(--mag-soft);
}

.natal-widget__icon-button:hover {
  color:var(--mag-text);
}

.natal-widget__geo-results {
  width:var(--natal-field-width);
  margin-top:10px;
}

.natal-widget__geo-results:empty {
  display:none;
}

.natal-widget__geo-choice {
  width:100%;
  border:1px solid var(--mag-stroke-soft);
  border-radius:6px;
  background:rgba(255, 255, 255, 0.04);
  color:var(--mag-text);
  font:300 18px/1.05 "Alumni Sans", Arial, Helvetica, sans-serif;
  padding:8px 10px;
}

.natal-widget__geo-choice:hover {
  background:rgba(255, 255, 255, 0.1);
}

.natal-widget__submit-row {
  display:grid;
  grid-column:2;
  grid-template-columns:minmax(0, 1fr) var(--natal-submit-width) minmax(0, 1fr);
  width:var(--natal-field-width);
  padding-top:clamp(14px, 1.3vw, 20px);
}

.natal-widget__row--submit > span {
  display:none;
}

.natal-widget__submit {
  grid-column:2;
  width:var(--natal-submit-width);
  min-height:clamp(30px, calc(1vw + 20px), 35px);
  border:1px solid var(--mag-accent);
  border-radius:6px;
  background:transparent;
  color:var(--mag-text);
  font:300 clamp(17px, 1.3vw, 20px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  padding:5px 18px;
  box-shadow:none;
  transition:border-color 0.25s ease,
      background 0.25s ease,
      transform 0.25s ease;
}

.natal-widget__reset {
  grid-column:3;
  display:grid;
  place-items:center;
  width:clamp(32px, 2.6vw, 40px);
  height:clamp(30px, calc(1vw + 20px), 35px);
  margin-left:8px;
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  opacity:0.6;
  cursor:pointer;
  transition:color 0.2s ease, opacity 0.2s ease;
}

.natal-widget__reset[hidden] {
  display:none;
}

.natal-widget__reset svg {
  display:block;
  width:clamp(22px, 1.75vw, 26px);
  height:clamp(22px, 1.75vw, 26px);
  transform:scaleX(-1);
}

.natal-widget__submit:hover {
  border-color:var(--mag-accent);
  background:rgba(204, 106, 165, 0.16);
  transform:translateY(-1px);
}

.natal-widget__reset:hover {
  color:var(--mag-accent);
  opacity:0.85;
}

.natal-widget__submit:active {
  background:var(--mag-accent);
  color:#050505;
  transform:translateY(0);
}

.natal-widget__reset:active {
  opacity:0.5;
}

.natal-widget__message {
  width:min(100%, 680px);
  min-height:28px;
  margin:clamp(12px, 1.1vw, 18px) auto 0;
  color:rgba(255, 255, 255, 0.68);
  font-size:clamp(20px, 1.6vw, 24px);
  font-weight:300;
  text-align:center;
}

.natal-widget__results {
  margin-top:clamp(48px, calc(7.4vw + 20px), 132px);
  gap:clamp(20px, 2.1vw, 35px);
}

.natal-widget__message:empty,
.natal-widget__results:empty {
  display:none;
}

.natal-widget__chart-section {
  background:transparent;
}

.natal-widget__wheel {
  max-width:clamp(280px, calc(18vw + 170px), 440px);
  filter:drop-shadow(0 18px 45px rgba(0, 0, 0, 0.55));
}

.natal-cosmogram {
  width:min(100%, clamp(624px, calc(25vw + 458px), 836px));
  margin-top:clamp(22px, calc(3.72vw - 6px), 50px);
  padding:clamp(14px, 1.2vw, 18px) clamp(10px, 1.2vw, 18px) 10px;
  border:1px solid var(--mag-stroke-soft);
  border-radius:18px;
  background:rgba(0, 0, 0, 0.22);
}

.natal-result-summary {
  margin-bottom:clamp(0px, calc(56px - 3.7vw), 28px);
}

.natal-widget .natal-cosmogram__matrix,
.natal-cosmogram__matrix {
  background:transparent;
}

.natal-widget .natal-cosmogram__matrix th,
.natal-widget .natal-cosmogram__matrix td,
.natal-cosmogram__matrix th,
.natal-cosmogram__matrix td {
  border-color:rgba(217, 217, 217, 0.32);
  background:rgba(255, 255, 255, 0.025);
}

.natal-widget .natal-cosmogram__matrix th,
.natal-cosmogram__matrix th {
  background:transparent;
  color:rgba(255, 255, 255, 0.86);
}

.natal-cosmogram__positions,
.natal-cosmogram__object,
.natal-cosmogram__pos {
  color:rgba(255, 255, 255, 0.82);
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
  font-size:clamp(16px, 1.3vw, 20px);
  font-weight:300;
}

.natal-cosmogram__legend {
  color:rgba(255, 255, 255, 0.64);
  font-size:clamp(16px, 1.2vw, 19px);
  font-weight:300;
}

.natal-widget__data-tables {
  width:min(100%, clamp(624px, calc(25vw + 458px), 836px));
  min-width:0;
  grid-template-columns:minmax(0, 1fr);
  gap:18px;
}

.natal-data-table {
  border:1px solid var(--mag-stroke-soft);
  border-radius:18px;
  background:rgba(0, 0, 0, 0.22);
  box-shadow:none;
}

.natal-data-table table,
.natal-widget table {
  background:transparent;
}

.natal-data-table th,
.natal-data-table td {
  border-top:1px solid rgba(255, 255, 255, 0.04);
  border-bottom:1px solid rgba(217, 217, 217, 0.16);
  background:transparent;
}

.natal-data-table th {
  color:rgba(255, 255, 255, 0.9);
  font:400 clamp(24px, 1.85vw, 28px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  text-transform:uppercase;
}

.natal-data-table td {
  color:rgba(255, 255, 255, 0.86);
  font:300 clamp(22px, 1.72vw, 26px)/1.1 "Alumni Sans", Arial, Helvetica, sans-serif;
}

.natal-data-table__sign-name {
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
}

.natal-data-table__degree {
  font-family:"Courier New", monospace;
  font-size:0.78em;
}

.natal-data-table tfoot td {
  background:rgba(255, 255, 255, 0.025);
}

.natal-data-table__toggle {
  color:rgba(255, 255, 255, 0.72);
  font:300 25px/1 "Alumni Sans", Arial, Helvetica, sans-serif;
}

.natal-data-table__toggle:hover {
  color:var(--mag-text);
}

.natal-data-table__toggle-icon {
  border-color:rgba(217, 217, 217, 0.34);
  background:transparent;
  color:rgba(255, 255, 255, 0.72);
}

@media (max-width: 620px) {
  .natal-demo-body .bg-layer {
    inset:0 0 auto;
    height:100vh;
    height:100lvh;
  }

  .natal-demo-body .bg-layer::after {
    background-size:auto 100vh;
    background-size:auto 100lvh;
  }

  .demo-page {
    --natal-page-top:calc(clamp(18px, calc(50svh - 270px), 250px) + 20px);
    padding-bottom:0;
  }

  .natal-demo-back {
    top:max(20px, calc(var(--natal-page-top) - 42px));
  }

  .natal-widget {
    zoom:0.9;
    justify-self:center;
  }

  .natal-widget__title {
    --title-spacing:clamp(1px, 0.45vw, 2px);
    max-width:min(100%, 320px);
    margin-inline:auto;
    font-size:clamp(29px, 8.6vw, 38px);
  }

  .natal-widget__subtitle {
    max-width:min(100%, 320px);
    margin-top:8px;
    margin-bottom:30px;
    font-size:clamp(12.96px, 3.645vw, 16.2px);
  }

  .natal-widget__row {
    grid-template-columns:minmax(0, 1fr);
    width:var(--natal-field-width);
    max-width:100%;
    margin-inline:auto;
    gap:8px;
    padding:8px 0;
  }

  .natal-widget__label {
    justify-self:start;
    text-align:left;
  }

  .natal-widget__submit-row {
    grid-column:1;
  }

  .natal-widget__geo-results {
    max-height:260px;
    overflow-y:auto;
  }

  .natal-data-table table {
    min-width: 0;
  }
  
  .natal-data-table th,
  .natal-data-table td {
    padding: 8px 10px;
        white-space: normal;
  }
  
  .natal-data-table__body,
  .natal-data-table__longitude {
    flex-wrap: wrap;
  }
  
  .natal-data-table__degree {
    overflow-wrap: anywhere;
  }
}