:root{
  color-scheme:light;
  --bg:#f7f4ec;
  --panel:#fffdf8;
  --panel-2:#f2ecdf;
  --ink:#2d332e;
  --muted:#687064;
  --gold:#875d20;
  --green:#47745e;
  --clay:#b85e37;
  --line:#ded6c8;
  --shadow:0 18px 45px rgba(69,53,32,.10);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font:16px/1.55 system-ui,sans-serif;
  background:
    radial-gradient(circle at 8% 4%,rgba(184,94,55,.09),transparent 28%),
    radial-gradient(circle at 92% 18%,rgba(71,116,94,.08),transparent 22%),
    var(--bg);
}
a{color:inherit}
header{max-width:1060px;margin:auto;padding:22px 24px;display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid var(--line)}
header a{text-decoration:none;font-weight:700;letter-spacing:.04em}
header span,.eyebrow,.humanity-kicker,.mini-label{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
main{max-width:1060px;margin:auto;padding:32px 24px 48px}
h1,h2{font-family:Georgia,serif;font-weight:400;line-height:1.12}
h1{font-size:clamp(32px,5vw,58px);max-width:760px;margin:12px 0 24px}
h2{font-size:28px;margin:0 0 18px}
p{margin:0}
label{display:block;margin-bottom:10px;font-weight:600}
input,select,button,textarea{font:inherit}
input[type=range]{width:100%;accent-color:var(--gold);min-height:36px}
input[type=date],input[type=time],select{
  width:100%;padding:12px;border:1px solid #c9beac;border-radius:10px;
  background:var(--panel);color:var(--ink);color-scheme:light
}
input:focus-visible,select:focus-visible,button:focus-visible,a:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:4px}
.workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px;align-items:start;margin-top:26px}
.control,.visual,.humanity-strip,.share-panel,.cards a{
  background:linear-gradient(180deg,rgba(255,255,255,.68),rgba(255,255,255,0)),var(--panel);
  border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)
}
.control{padding:26px;position:relative;overflow:hidden}
.control::after,.visual::after,.humanity-strip::after,.share-panel::after{
  content:'';position:absolute;inset:auto auto -60px -60px;width:160px;height:160px;border-radius:50%;
  background:radial-gradient(circle,rgba(184,130,52,.11),transparent 70%);pointer-events:none
}
.number{font-size:clamp(38px,6vw,68px);color:var(--gold);line-height:1.1;margin:24px 0 10px;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.verdict{font-size:19px}
.muted,small,.notes{color:var(--muted)}
.field-help{margin:.25rem 0 0;color:var(--muted);font-size:14px}
.visual{min-height:390px;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.actions{display:flex;gap:10px;margin:24px 0 10px;flex-wrap:wrap}
button,.share-link{
  border:1px solid var(--gold);background:var(--gold);color:#fffdf8;padding:11px 18px;border-radius:999px;
  cursor:pointer;font-weight:600;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease,border-color .2s ease,color .2s ease
}
button:hover,.share-link:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(135,93,32,.16);background:#704a17;border-color:#704a17}
button.secondary,.share-link.secondary{background:transparent;color:var(--ink);border-color:var(--line)}
button.secondary:hover,.share-link.secondary:hover{border-color:var(--gold);background:rgba(135,93,32,.06);color:var(--ink)}
#status{min-height:24px;font-size:13px;color:var(--green);margin-top:6px}
details{border-top:1px solid var(--line);padding:22px 0;margin-top:28px}
summary{cursor:pointer;font-weight:600}
.related{margin-top:46px;border-top:1px solid var(--line);padding-top:28px}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.cards a{display:block;text-decoration:none;padding:18px;position:relative;transition:border-color .2s ease,transform .2s ease}
.cards a:hover{border-color:var(--gold);transform:translateY(-2px)}
.cards a::after{content:'\2192';position:absolute;top:12px;right:14px;font-family:ui-monospace,monospace;font-size:13px;line-height:1;color:var(--gold);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .2s ease}
.cards a:hover::after,.cards a:focus-visible::after{opacity:1;transform:none}
.cards a[aria-current=page]{border-color:var(--gold)}
.cards small{display:block;margin-top:7px}
footer{max-width:1060px;margin:auto;padding:30px 24px;color:var(--muted);font-size:12px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
#copytext{width:100%;min-height:95px;background:var(--panel);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:8px}
.quick-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.quick-actions button{padding:9px 14px}
.humanity-strip{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:24px;align-items:stretch;overflow:hidden;position:relative}
.humanity-strip img{display:block;width:100%;height:100%;min-height:260px;aspect-ratio:16 / 9;object-fit:cover}
.humanity-copy{padding:24px;display:flex;flex-direction:column;justify-content:center;gap:12px}
.humanity-copy p{max-width:34ch}
.share-panel{padding:22px;position:relative;overflow:hidden;margin-top:18px}
.share-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.share-link{background:rgba(135,93,32,.06);border-color:rgba(135,93,32,.22);color:var(--ink)}
.share-link:hover{background:rgba(135,93,32,.12);color:var(--ink)}
.insights{display:grid;gap:10px;margin-top:18px}
.insight{
  border:1px solid rgba(135,93,32,.16);background:rgba(255,255,255,.58);border-radius:14px;
  padding:14px 15px;position:relative;overflow:hidden
}
.insight::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(var(--gold),var(--green))}
.insight strong{display:block;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);margin-bottom:4px}
.insight p{color:var(--ink)}
.viz{width:100%;display:grid;gap:18px}
.stat-pills,.explanation-badges{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.stat-pill,.explanation-badge{
  border:1px solid rgba(135,93,32,.19);background:rgba(255,255,255,.64);border-radius:999px;padding:8px 12px;
  color:var(--ink);font-size:14px
}
.crowd-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px;max-width:360px;margin:0 auto}
.crowd-dot{
  width:100%;aspect-ratio:1;border-radius:50%;background:rgba(71,116,94,.22);border:1px solid rgba(71,116,94,.23);
  position:relative;overflow:hidden;transform:translateY(var(--rise,0))
}
.crowd-dot::after{content:'';position:absolute;inset:18%;border-radius:50%;background:rgba(255,255,255,.48)}
.crowd-dot.is-highlight{background:radial-gradient(circle at 30% 30%,#fff0c9,#d69d3d);border-color:transparent;box-shadow:0 0 0 8px rgba(184,130,52,.12)}
.crowd-dot.is-highlight::after{background:rgba(255,255,255,.5)}
.visual-card{width:min(100%,440px);padding:22px;border:1px solid rgba(135,93,32,.14);border-radius:18px;background:rgba(255,255,255,.7)}
.visual-card h3{font-family:Georgia,serif;font-size:24px;font-weight:400;margin:0 0 8px}
.visual-card p{color:var(--muted)}
.family-tree{display:grid;gap:12px;width:min(100%,430px)}
.branch-row{display:grid;grid-template-columns:90px 1fr 72px;gap:10px;align-items:center}
.branch-label,.branch-value{font-size:13px;color:var(--muted)}
.branch-track{height:12px;border-radius:999px;background:rgba(45,51,46,.09);overflow:hidden;position:relative}
.branch-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--green),#c08a32);transform-origin:left center;transform:scaleX(var(--scale,1));transition:transform .6s ease}
.family-constellation{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:6px}
.family-node{display:flex;flex-direction:column;align-items:center;gap:8px}
.family-node span{width:16px;height:16px;border-radius:50%;background:var(--green);box-shadow:0 0 0 8px rgba(71,116,94,.1)}
.family-node strong{font-size:13px;color:var(--ink);font-weight:600}
.family-node small{max-width:11ch;text-align:center}
.size-orbits{position:relative;width:min(100%,430px);aspect-ratio:4 / 3;margin:0 auto}
.size-orbits .orbit-label{position:absolute;font-size:13px;color:var(--muted)}
.planet-africa,.planet-country{
  position:absolute;border-radius:50%;display:grid;place-items:center;text-align:center;
  font-size:14px;font-weight:700;letter-spacing:.04em;color:#252c27;transition:transform .6s ease
}
.planet-africa{left:8%;bottom:12%;background:rgba(184,94,55,.92);box-shadow:0 0 0 16px rgba(184,94,55,.09)}
.planet-country{right:10%;bottom:18%;background:radial-gradient(circle at 30% 30%,#fff0c9,#d69d3d);box-shadow:0 0 0 12px rgba(184,130,52,.12)}
.scale-meter{display:grid;gap:10px;width:min(100%,430px)}
.scale-track{height:12px;border-radius:999px;background:rgba(45,51,46,.09);overflow:hidden}
.scale-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--clay),#c88a32);transition:width .7s ease}
.moment-stage{width:min(100%,470px);display:grid;gap:16px}
.time-card{padding:18px;border-radius:18px;border:1px solid rgba(135,93,32,.16);background:rgba(255,255,255,.72)}
.time-card strong{display:block;font-size:18px;font-weight:600;margin-bottom:8px}
.time-big{font-size:clamp(34px,7vw,54px);line-height:1;color:var(--gold);font-variant-numeric:tabular-nums}
.time-meta{color:var(--muted);margin-top:8px}
.time-flow{display:grid;gap:10px;justify-items:center}
.time-beam{width:100%;height:10px;border-radius:999px;background:rgba(45,51,46,.08);overflow:hidden;position:relative}
.time-beam::before{content:'';position:absolute;inset:0;translate:var(--beam-start,-30%) 0;width:36%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:beam 2.4s linear infinite}
.time-offset{padding:8px 12px;border-radius:999px;border:1px solid rgba(71,116,94,.25);background:rgba(71,116,94,.08);color:var(--ink)}
.experience-glow{position:absolute;inset:auto 10% -12% auto;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(71,116,94,.12),transparent 70%);filter:blur(4px);pointer-events:none}
.is-refreshing .number,.is-refreshing .visual-card,.is-refreshing .time-card,.is-refreshing .insight,.is-refreshing .planet-country,.is-refreshing .scale-fill{animation:rise-in .55s ease}
@keyframes rise-in{0%{opacity:.45;transform:translateY(10px) scale(.985)}100%{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes shimmer{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes beam{0%{transform:translateX(-100%)}100%{transform:translateX(330%)}}
.family-node span,.planet-country,.planet-africa,.visual-card,.time-card{animation:floaty 6s ease-in-out infinite}
.branch-fill,.scale-fill{background-size:200% 100%;animation:shimmer 3s linear infinite}
.clock{font-size:36px;color:var(--gold)}

/* Birthday page motion is celebratory and deliberately restrained. */
.birthday-action-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.birthday-action-row .field-help{flex:1;min-width:180px;margin:0}
button.celebrate-button{background:rgba(184,94,55,.08);border-color:rgba(184,94,55,.42);color:#8b482c}
button.celebrate-button:hover{background:rgba(184,94,55,.14);border-color:var(--clay);color:#71371f}
body[data-page=birthday] .humanity-strip img{opacity:0;animation:birthday-image-enter .9s cubic-bezier(.2,.75,.25,1) .08s both}
body[data-page=birthday] .crowd-dot{opacity:0;animation:birthday-dot-in .55s cubic-bezier(.18,.7,.25,1) var(--dot-delay,0ms) both}
body[data-page=birthday] .crowd-dot.is-highlight{animation:birthday-dot-in .55s cubic-bezier(.18,.7,.25,1) var(--dot-delay,0ms) both,birthday-ring 2.3s ease-in-out 1.1s infinite}
body[data-page=birthday] .stat-pill{opacity:0;animation:birthday-pill-in .5s ease-out var(--pill-delay,550ms) both}
@keyframes birthday-image-enter{from{opacity:0;transform:scale(1.035)}to{opacity:1;transform:scale(1)}}
@keyframes birthday-dot-in{from{opacity:0;transform:translateY(10px) scale(.7)}to{opacity:1;transform:translateY(var(--rise,0)) scale(1)}}
@keyframes birthday-pill-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes birthday-ring{
  0%,100%{box-shadow:0 0 0 8px rgba(184,130,52,.12),0 0 0 8px rgba(184,130,52,0)}
  50%{box-shadow:0 0 0 8px rgba(184,130,52,.12),0 0 0 14px rgba(184,130,52,.10)}
}
.celebration-burst{position:absolute;inset:0;overflow:hidden;z-index:4;pointer-events:none}
.confetti-piece{position:absolute;left:50%;top:47%;width:8px;height:12px;border-radius:2px;background:var(--confetti-color);animation:confetti-pop .95s cubic-bezier(.15,.7,.25,1) var(--confetti-delay,0ms) both}
.confetti-piece.is-dot{width:9px;height:9px;border-radius:50%}
.confetti-piece.is-ribbon{width:5px;height:16px;border-radius:999px}
@keyframes confetti-pop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.3) rotate(0)}
  15%{opacity:1}
  100%{opacity:0;transform:translate(calc(-50% + var(--burst-x)),calc(-50% + var(--burst-y))) scale(.82) rotate(var(--spin,220deg))}
}
@view-transition{navigation:auto}
@media(max-width:820px){
  .workspace,.humanity-strip{grid-template-columns:1fr}
  .visual{min-height:320px}
  .share-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:650px){
  header{padding:16px 20px}
  header span{display:none}
  main{padding:22px 20px 40px}
  .workspace{gap:14px}
  .control,.visual,.share-panel,.humanity-copy{padding:20px}
  .visual{min-height:240px}
  .cards{grid-template-columns:1fr 1fr}
  h1{margin-bottom:18px}
  .number{margin-top:18px;font-size:40px}
  .pair,.share-grid{grid-template-columns:1fr}
  .humanity-strip img{min-height:200px}
  .branch-row{grid-template-columns:72px 1fr 64px}
  .birthday-action-row{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important}
  .cards a,.cards a::after,button,.share-link,.branch-fill,.scale-fill,.planet-country,.planet-africa,.family-node span,.visual-card,.time-card{transition:none;animation:none}
  .time-beam::before{animation:none}
  body[data-page=birthday] .humanity-strip img,body[data-page=birthday] .crowd-dot,body[data-page=birthday] .stat-pill{opacity:1;animation:none}
  .is-refreshing .number,.is-refreshing .visual-card,.is-refreshing .time-card,.is-refreshing .insight,.is-refreshing .planet-country,.is-refreshing .scale-fill{animation:none}
  .confetti-piece{animation:none;display:none}
  @view-transition{navigation:none}
}