.matrix-page-body { margin:0; }
.matrix-page {
  --matrix-page-top:clamp(28px, calc(50svh - 245px), 240px);
  position:relative;
  min-height:calc(100svh - var(--header-height));
  padding:var(--matrix-page-top) 20px 80px;
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
}
.matrix-page:has(.matrix-results:not([hidden])) {
  min-height:0;
  padding-bottom:clamp(28px, 4svh, 48px);
}
.matrix-back {
  position:absolute;
  top:max(4px, calc(var(--matrix-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,.4);
  transition:color .2s ease;
}
.matrix-back:hover, .matrix-back:focus-visible { color:var(--accent); }
.matrix-back svg { display:block; width:clamp(40px, 3.2vw, 48px); height:auto; }
.matrix-widget { width:min(100%, 1500px); margin:0 auto; color:#fff; zoom:.7; }
.matrix-widget__title,
.matrix-widget__subtitle,
.matrix-form,
.matrix-form__message { zoom:1.1; }
.matrix-widget__title {
  margin:0;
  color:#fff;
  font-size:clamp(40px, calc(2.5vw + 32px), 70px);
  font-weight:300;
  line-height:1;
  letter-spacing:clamp(3px, .7vw, 11px);
  text-align:center;
}
.matrix-widget__subtitle {
  margin:clamp(18px, 2vw, 29px) auto clamp(30px, calc(1.85vw + 12px), 40px);
  color:rgba(255,255,255,.7);
  font-size:clamp(23px, 2.2vw, 33px);
  font-weight:300;
  line-height:1.06;
  text-align:center;
}
.matrix-form {
  --field-width:clamp(210px, calc(4.75vw + 192px), 264px);
  --label-width:clamp(122px, calc(3.96vw + 107px), 167px);
  --row-gap:clamp(10px, 1.3vw, 20px);
  width:min(100%, calc(var(--field-width) + 2 * var(--label-width) + 2 * var(--row-gap)));
  margin:0 auto;
}
.matrix-form__row {
  display:grid;
  grid-template-columns:var(--label-width) minmax(0, 1fr) var(--label-width);
  gap:var(--row-gap);
  align-items:center;
  min-height:clamp(34px, 2.5vw, 38px);
  padding:clamp(4px, .3vw, 5px) 0;
}
.matrix-form__label {
  justify-self:end;
  color:rgba(255,255,255,.74);
  font-size:clamp(21px, 2.1vw, 32px);
  font-weight:300;
  line-height:1;
  text-align:right;
  text-transform:uppercase;
  white-space:nowrap;
}
.matrix-form input, .matrix-form select {
  width:100%;
  min-width:0;
  min-height:clamp(30px, calc(1vw + 20px), 35px);
  border:1px solid rgba(255,255,255,.55);
  border-radius:6px;
  background:rgba(0,0,0,.08);
  color:#fff;
  font:300 clamp(18px, 1.4vw, 21px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  padding:3px 9px;
  transition:border-color .2s ease, background-color .2s ease;
}
.matrix-form select { color-scheme:dark; }
.matrix-form input:hover, .matrix-form input:focus,
.matrix-form select:hover, .matrix-form select:focus {
  border-color:var(--accent);
  background:rgba(204,106,165,.08);
  outline:none;
}
.matrix-form__date { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:7px; width:100%; }
.matrix-form__row--submit { padding-top:clamp(14px, 1.3vw, 20px); }
.matrix-form__actions { position:relative; display:flex; justify-content:center; min-width:0; }
.matrix-form__reset {
  position:absolute;
  left:calc(50% + clamp(140px, calc(3vw + 128px), 174px) / 2 + 8px);
  top:50%;
  transform:translateY(-50%);
  display:grid;
  place-items:center;
  width:clamp(32px, 2.6vw, 40px);
  height:clamp(30px, calc(1vw + 20px), 35px);
  padding:0;
  border:0;
  background:transparent;
  color:#fff;
  opacity:.6;
  cursor:pointer;
  transition:color .2s ease, opacity .2s ease;
}
.matrix-form__reset[hidden] { display:none; }
.matrix-form__reset svg { display:block; width:clamp(22px, 1.75vw, 26px); height:clamp(22px, 1.75vw, 26px); transform:scaleX(-1); }
.matrix-form__reset:hover { color:var(--accent); opacity:.85; }
.matrix-form__reset:active { opacity:.5; }
.matrix-form__submit {
  justify-self:center;
  width:clamp(140px, calc(3vw + 128px), 174px);
  min-height:clamp(30px, calc(1vw + 20px), 35px);
  border:1px solid var(--accent);
  border-radius:6px;
  background:transparent;
  color:#fff;
  font:300 clamp(17px, 1.3vw, 20px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  padding:5px 18px;
  cursor:pointer;
  transition:background .25s ease, transform .25s ease;
}
.matrix-form__submit:hover { background:rgba(204,106,165,.16); transform:translateY(-1px); }
.matrix-form__submit:active { background:var(--accent); color:#050505; transform:translateY(0); }
.matrix-form :focus-visible, .matrix-back:focus-visible { outline:2px solid #f28ac9; outline-offset:3px; }
.matrix-form__message {
  min-height:28px;
  margin:clamp(12px, 1.1vw, 18px) auto 0;
  color:rgba(255,255,255,.72);
  font-size:clamp(20px, 1.6vw, 24px);
  font-weight:300;
  text-align:center;
}
.matrix-results {
  width:min(100%, 1500px);
  zoom:.94;
  margin:clamp(28px, 4vw, 60px) auto 0;
  padding:0;
  background:transparent;
  color:#fff;
  font-family:"Alumni Sans", Arial, Helvetica, sans-serif;
  scroll-margin-top:calc(var(--header-height) + 8px);
}
.matrix-results[hidden] { display:none; }
.matrix-results__heading { position:relative; top:-28px; margin-bottom:-28px; text-align:center; }
.matrix-results__heading h2 {
  margin:0;
  font-size:clamp(30px, 3.1vw, 46px);
  line-height:1;
  font-weight:400;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.matrix-results__heading p { margin:10px 0 0; color:rgba(255,255,255,.6); font-size:clamp(20px, 1.7vw, 25px); font-weight:300; }
.matrix-results__heading p:empty { display:none; }
.matrix-results__heading #matrix-person { text-transform:none; overflow-wrap:anywhere; }
.matrix-results__birth-date { font-size:.8em; font-weight:300; letter-spacing:0; text-transform:none; white-space:nowrap; }
.matrix-results__save {
  position:relative;
  top:12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:clamp(156px, 14vw, 200px);
  min-height:clamp(38px, 3.4vw, 44px);
  margin-top:clamp(8px, .8vw, 12px);
  padding:6px 22px;
  border:1px solid var(--accent);
  border-radius:8px;
  background:transparent;
  color:#fff;
  font:300 clamp(21px, 1.65vw, 26px)/1 "Alumni Sans", Arial, Helvetica, sans-serif;
  text-transform:uppercase;
  cursor:pointer;
}
.matrix-results__save:hover:not(:disabled) { background:rgba(204,106,165,.16); }
.matrix-results__save:disabled { opacity:.6; cursor:default; }
.matrix-results__heading .matrix-results__save-status { font-size:20px; color:var(--accent); }
.matrix-results__layout { display:grid; grid-template-columns:minmax(380px, 600px) minmax(0, 1fr); gap:clamp(20px, 3vw, 48px); align-items:start; margin-top:clamp(30px, 3vw, 45px); }
.matrix-table-wrap {
  overflow:hidden;
  border:1px solid rgba(217,217,217,.26);
  border-radius:18px;
  background:rgba(0,0,0,.22);
}
.matrix-table { width:100%; border-collapse:collapse; table-layout:fixed; background:transparent; }
.matrix-table__col-index { width:28px; }
.matrix-table__col-name { width:40%; }
.matrix-table th, .matrix-table td {
  height:80px;
  padding:11px 10px;
  border-bottom:1px solid rgba(217,217,217,.15);
  text-align:center;
  color:rgba(255,255,255,.86);
  font-size:clamp(20px, 1.6vw, 25px);
  font-weight:300;
  line-height:1.05;
}
.matrix-table thead th { height:58px; background:rgba(255,255,255,.035); color:rgba(255,255,255,.9); font-size:clamp(20px, 1.65vw, 26px); font-weight:400; text-transform:uppercase; white-space:nowrap; }
.matrix-table thead th:nth-child(1) { text-align:left; padding-left:40px; }
.matrix-table tbody tr:last-child td { border-bottom:0; }
.matrix-table tbody tr:hover { background:rgba(255,255,255,.045); }
.matrix-table td:first-child { padding:0; }
.matrix-table td:nth-child(2) { text-align:left; }
.matrix-table td:nth-child(2) { padding-left:18px; }
.matrix-table td:nth-child(2) strong { display:block; margin-bottom:5px; color:#fff; font-size:clamp(21px, 1.65vw, 25px); font-weight:400; }
.matrix-table td:nth-child(2) small { display:block; color:rgba(255,255,255,.55); font-size:clamp(17px, 1.3vw, 20px); font-weight:300; line-height:1.05; }
.matrix-table__index { color:#fff!important; font-weight:700!important; }
.matrix-table__index--total { background:rgba(255,255,255,.08); }
.matrix-table__total td { height:74px; background:rgba(255,255,255,.025); }
.matrix-lineage {
  display:grid;
  gap:0;
  margin-top:20px;
  padding:4px 18px;
  border:1px solid rgba(217,217,217,.26);
  border-radius:18px;
  background:rgba(0,0,0,.22);
}
.matrix-lineage__row { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:12px; align-items:center; min-height:70px; color:rgba(255,255,255,.8); font-size:clamp(19px, 1.5vw, 23px); font-weight:300; line-height:1.05; }
.matrix-lineage__row + .matrix-lineage__row { border-top:1px solid rgba(217,217,217,.15); }
.matrix-lineage__values { display:flex; gap:6px; }
.matrix-lineage__values span { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(217,217,217,.55); border-radius:50%; color:#fff; font-size:21px; font-weight:300; }
.matrix-diagram-wrap {
  width:100%;
  min-width:0;
  padding:clamp(8px, 1vw, 16px);
  border:1px solid rgba(217,217,217,.26);
  border-radius:18px;
  background:rgba(0,0,0,.22);
}
#matrix-diagram { display:block; width:100%; height:auto; overflow:visible; }
#matrix-diagram text { font-family:"Alumni Sans", Arial, Helvetica, sans-serif; text-anchor:middle; dominant-baseline:middle; }
.matrix-diagram__frame { fill:none; stroke:rgba(255,255,255,.72); stroke-width:2.4; }
.matrix-diagram__axis { stroke:rgba(255,255,255,.48); stroke-width:1.3; }
.matrix-diagram__dash { fill:none; stroke:rgba(255,255,255,.5); stroke-width:1.2; stroke-dasharray:5 5; }
.matrix-diagram__node { stroke:rgba(255,255,255,.8); stroke-width:2; fill:rgba(6,6,8,.94); }
.matrix-diagram__node--main { stroke:none; }
.matrix-diagram__number { fill:#fff; font-size:33px; font-weight:400; }
.matrix-diagram__number--main { fill:#fff; font-size:53px; font-weight:700; }
.matrix-diagram__number--center { fill:#171717; }
.matrix-diagram__number--mid { fill:#fff; font-size:27px; font-weight:500; }
.matrix-diagram__number--small { font-size:21px; font-weight:400; }
.matrix-diagram__perimeter { fill:none; stroke:rgba(255,255,255,.75); stroke-width:1.6; }
#matrix-diagram :is(.matrix-diagram__age-value, .matrix-diagram__age-year, .matrix-diagram__age-range, .matrix-diagram__age-decade, .matrix-diagram__age-unit) { font-family:Arial, Helvetica, sans-serif; }
.matrix-diagram__age-value { fill:rgba(255,255,255,.92); font-size:13px; font-weight:400; }
.matrix-diagram__age-value--major { font-weight:700; }
.matrix-diagram__age-year { fill:rgba(255,255,255,.92); font-size:10px; font-weight:700; }
.matrix-diagram__age-range { fill:rgba(255,255,255,.72); font-size:6.5px; }
.matrix-diagram__age-decade { fill:#fff; font-size:11px; font-weight:700; }
.matrix-diagram__age-unit { fill:rgba(255,255,255,.85); font-size:7px; font-weight:700; }
.matrix-diagram__age-tick { fill:rgba(255,255,255,.8); }
.matrix-diagram__age-dot { fill:#08080b; stroke:rgba(255,255,255,.85); stroke-width:1.5; }
.matrix-diagram__lineage { fill:none; stroke-width:2.3; }
.matrix-diagram__lineage-label { font-size:15px; fill:rgba(255,255,255,.8); }
@media (min-width:1001px) {
  .matrix-results__layout { grid-template-columns:minmax(0, .7fr) minmax(0, 1fr); }
  /* The diagram sets the shared height; the two tables fill the left column. */
  .matrix-results__left {
    align-self:stretch;
    contain:size;
    min-height:0;
    display:grid;
    grid-template-rows:minmax(0, 1fr) auto;
    gap:20px;
  }
  .matrix-table-wrap { min-height:0; }
  .matrix-table { height:100%; }
  .matrix-table th, .matrix-table td { height:auto; padding-top:5px; padding-bottom:5px; }
  .matrix-lineage { margin-top:0; }
  .matrix-lineage__row { min-height:clamp(44px, 4.5vw, 70px); }
}
@media (max-width:1000px) {
  .matrix-results__layout { grid-template-columns:minmax(0,1fr); }
  .matrix-results__left { order:2; }
  .matrix-diagram-wrap { order:1; max-width:760px; margin:0 auto; }
}
@media (min-width:621px) and (max-width:1000px) {
  .matrix-widget__title { font-size:clamp(38px, calc(5vw + 7px), 57px); }
  .matrix-widget__subtitle { font-size:clamp(19px, calc(1.05vw + 12.5px), 23px); }
  .matrix-form { --field-width:clamp(239.5px, calc(267px - 2.75vw), 250px); }
  .matrix-results__left { width:100%; max-width:760px; margin:0 auto; }
}
@media (max-width:620px) {
  .matrix-page { --matrix-page-top:calc(clamp(18px, calc(50svh - 270px), 250px) + 20px); padding-bottom:40px; }
  .matrix-back { top:max(20px, calc(var(--matrix-page-top) - 42px)); left:clamp(24px, 10vw, 68px); }
  .matrix-widget__title { max-width:min(100%, 520px); margin:auto; font-size:clamp(29px, 8.6vw, 38px); letter-spacing:clamp(2px, .7vw, 4.34px); }
  .matrix-widget__subtitle { max-width:320px; margin-top:8px; margin-bottom:10px; font-size:clamp(15px, 4vw, 19px); }
  .matrix-form { --field-width:min(100%, 250px); width:min(100%, clamp(195px, 56.5vw, 250px)); }
  .matrix-form__row { display:grid; grid-template-columns:minmax(0,1fr); gap:8px; padding:8px 0; }
  .matrix-form__label { justify-self:start; text-align:left; }
  .matrix-form__row--submit span { display:none; }
  .matrix-form__submit { justify-self:center; }
  .matrix-form select { font-size:clamp(14px, 3.7vw, 18px); padding-left:3px; padding-right:3px; }
  .matrix-results { width:90%; margin-top:32px; }
  .matrix-results__layout { gap:28px; margin-top:20px; }
  .matrix-table th, .matrix-table td { height:66px; padding:8px 3px; font-size:17px; }
  .matrix-table thead th { height:56px; font-size:15px; }
  .matrix-table thead th:nth-child(1) { padding-left:27px; }
  .matrix-table__col-index { width:20px; }
  .matrix-table td:nth-child(2) { padding-left:7px; }
  .matrix-table td:nth-child(2) strong { font-size:17px; margin-bottom:4px; }
  .matrix-table td:nth-child(2) small { font-size:13px; }
  .matrix-lineage { margin-top:18px; padding:2px 10px; }
  .matrix-lineage__row { min-height:62px; font-size:16px; }
  .matrix-lineage__values span { width:29px; height:29px; font-size:16px; }
  .matrix-diagram-wrap { width:100%; padding:4px; }
}