:root{
  --bg:#1f1b2e; --bg-deep:#15121f; --surface:#2a2438;
  --line:rgba(212,168,87,0.18); --gold:#d4a857; --gold-soft:#e8c77e;
  --text:#f2ede4; --muted:#a89bc2; --radius:18px;
}
*{ box-sizing:border-box; }
body{
  margin:0; min-height:100vh;
  background: var(--site-outer);
  font-family:'Inter',sans-serif; color:var(--text);
  padding: 0;
}
.card {
  width: 100%;
  max-width: 500px;
  box-sizing: border-box;

  padding: 40px 32px;
}
h1{
  font-family:'Fraunces',serif; font-weight:600; font-size:28px;
  line-height:1.15; margin:0 0 10px;
}
.subhead{ margin:0 0 26px; }

.person-form{ margin-bottom:18px; }
.person-label{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-soft); margin:0 0 10px;
  display:flex; align-items:center; gap:8px;
}
.person-label .num{
  width:18px; height:18px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-size:10px; color:var(--muted); flex-shrink:0;
}
form.grid4{
  display:grid; grid-template-columns:1fr 1.1fr .8fr 1fr;
  gap:10px;
}
.divider{
  border:none; border-top:1px solid var(--line); margin:20px 0;
}
/*
button{
  font-family:'Space Mono',monospace; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--bg-deep);
  background:linear-gradient(135deg,var(--gold-soft),var(--gold));
  border:none; border-radius:999px; padding:13px 26px; cursor:pointer;
}
button:hover{ filter:brightness(1.06); }
*/
.error{ font-size:13px; color:#e2693c; min-height:16px; margin:10px 0 0; }


/* Pair header: two people either side of a separator */
.pair-header{
  display:flex; align-items:flex-start; justify-content:center;
  gap:18px; margin:0 0 14px;
}
.person-col{ display:flex; flex-direction:column; align-items:center; gap:6px; flex:1; max-width:150px; }
.person-name{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); text-align:center;
}
.person-icons{ display:flex; gap:6px; align-items:center; }
.person-types{
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.06em;
  color:var(--muted); text-align:center; line-height:1.4;
}
.pair-sep{
  font-size:20px; color:var(--muted); opacity:.5; margin-top:22px; flex-shrink:0;
}

.constellation-wrap{
  display:flex; justify-content:center; margin:0 0 16px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:10px 0;
}

.result-nickname{
  font-family:'Space Mono',monospace; font-size:11px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold); text-align:center; margin:0 0 6px;
}
.result-name{
  font-family:'Fraunces',serif; font-style:italic; font-weight:500;
  font-size:24px; text-align:center; margin:0 0 2px; letter-spacing:.01em;
}
.result-fn{
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin:0 0 14px;
}
.tagline{
  font-family:'Fraunces',serif; font-size:15px; text-align:center;
  color:var(--text); margin:0 0 8px; line-height:1.4;
}
.motif-desc{
  font-size:12.5px; color:var(--muted);
  text-align:center; margin:0 0 18px; line-height:1.5;
}

/* Correspondences */
.corr-group-label{
  font-family:'Space Mono',monospace; font-size:9px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); text-align:center; margin:0 0 8px;
}
.correspondences{
  display:flex; gap:10px; justify-content:center; margin:0 0 16px; flex-wrap:wrap;
}
.corr-card{
  display:flex; align-items:center; gap:9px; text-align:left;
  border:1px solid var(--line); border-radius:12px; padding:9px 13px;
  max-width:220px;
}
.corr-card .corr-icon{ flex-shrink:0; display:flex; }
.corr-card .corr-dot{
  width:30px; height:30px; border-radius:50%; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-style:italic; font-size:12px;
}
.corr-card .corr-animal-img{
  width:40px; height:auto; flex-shrink:0; display:block;
}
.corr-label{
  font-family:'Space Mono',monospace; font-size:8px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-bottom:2px;
}
.corr-name{
  font-family:'Fraunces',serif; font-style:italic; font-size:14px;
  color:var(--text); margin-bottom:2px;
}
.corr-desc{
  font-family:'Fraunces',serif; font-style:italic; font-size:9.5px;
  color:var(--muted); line-height:1.3;
}
.corr-block{ margin-bottom:14px; }

/* Accordion profile sections */
.profiles{ display:flex; flex-direction:column; gap:8px; margin-bottom:22px; }
.profile-block{
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.profile-toggle{
  width:100%; background:none; border:none; color:var(--text);
  font-family:'Space Mono',monospace; font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; cursor:pointer; padding:13px 16px;
  display:flex; align-items:center; justify-content:space-between;
  border-radius:0; text-align:left; gap:10px;
}
.profile-toggle:hover{ background:rgba(212,168,87,.07); }
.profile-toggle .arrow{ transition:transform .25s ease; flex-shrink:0; }
.profile-toggle.open .arrow{ transform:rotate(180deg); }
.profile-body{
  display:none; padding:0 16px 16px; font-size:13.5px;
  line-height:1.65; color:var(--muted);
}
.profile-body.open{ display:block; }
.profile-body p{ margin:0 0 10px; }
.profile-body .label{
  font-family:'Space Mono',monospace; font-size:9.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--gold); display:block; margin:12px 0 5px;
}
.profile-body .quote{
  font-family:'Fraunces',serif; font-style:italic; color:var(--text); font-size:14px;
}

/* Color swatch inline */
.swatch-inline{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  border:1px solid rgba(242,237,228,.3); vertical-align:middle;
  margin-right:5px; flex-shrink:0;
}

.reset{
  display:block; text-align:center; font-size:13px;
  color:var(--gold-soft); text-decoration:none; cursor:pointer; margin-top:4px;
}
.reset:hover{ text-decoration:underline; }

/* Constellation stars */
.star{ opacity:0; }
.star.show{ animation:starIn .5s ease forwards; }
@keyframes starIn{ from{opacity:0} to{opacity:1} }

@media (max-width:480px){
  form.grid4{ grid-template-columns:1fr 1fr; }
  .card{ padding:32px 20px; }
  .pair-header{ gap:8px; }
  .pair-sep{ margin-top:34px; }
}