/* Before We Were Us — y2k / early-computer scrapbook */
@font-face{font-family:"Silkscreen";src:url(/fonts/silkscreen.woff2) format("woff2");font-display:swap}
@font-face{font-family:"VT323";src:url(/fonts/vt323.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Italianno";src:url(/fonts/italianno.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Pixelify Sans";src:url(/fonts/pixelifysans.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
  --pink:#ffb3de; --pink2:#ff7fc7; --lav:#c9b7ff; --cyan:#9ff3ff; --mint:#c6ffe6; --butter:#fff3b0;
  --ink:#2a1d3a; --ink2:#5a4b74; --chrome:#f4f1fb; --chrome2:#d9d3ea; --bevel:#ffffff; --bevel2:#8b7fa8;
  --a:#ff5fb8; --b:#2fc6e6;
  --win-bar:linear-gradient(90deg,#8f6bff,#ff8bd3 55%,#7ee9ff);
  --body:"VT323",ui-monospace,monospace; --pix:"Silkscreen",ui-monospace,monospace; --script:"Italianno","Snell Roundhand",cursive; --pxs:"Pixelify Sans",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;color:var(--ink);font-family:var(--body);font-size:22px;line-height:1.25;background:#e8dcff;overflow-x:hidden;cursor:default}
img{max-width:100%}
button,input{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ---------- background ---------- */
.holo{position:fixed;inset:-20%;z-index:-3;background:
  radial-gradient(60% 50% at 20% 20%,rgba(255,179,222,.95),transparent 60%),
  radial-gradient(50% 60% at 80% 30%,rgba(159,243,255,.9),transparent 60%),
  radial-gradient(60% 50% at 50% 85%,rgba(201,183,255,.95),transparent 60%),
  radial-gradient(40% 40% at 85% 85%,rgba(198,255,230,.9),transparent 60%),
  linear-gradient(135deg,#f6d6ff,#d7e9ff 50%,#ffe0f3);
  filter:saturate(1.15);animation:holo 26s ease-in-out infinite alternate}
@keyframes holo{0%{transform:rotate(0deg) scale(1)}100%{transform:rotate(6deg) scale(1.12)}}
.clouds{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.55;background:
  radial-gradient(ellipse 240px 80px at 10% 18%,#fff 0 55%,transparent 56%),
  radial-gradient(ellipse 180px 70px at 24% 12%,#fff 0 55%,transparent 56%),
  radial-gradient(ellipse 260px 90px at 78% 74%,#fff 0 55%,transparent 56%),
  radial-gradient(ellipse 200px 70px at 90% 66%,#fff 0 55%,transparent 56%),
  radial-gradient(ellipse 220px 70px at 60% 92%,#fff 0 55%,transparent 56%);
  animation:clouds 60s linear infinite}
@keyframes clouds{from{background-position:0 0,0 0,0 0,0 0,0 0}to{background-position:120px 0,-80px 0,100px 0,-60px 0,140px 0}}
.scan{position:fixed;inset:0;z-index:50;pointer-events:none;mix-blend-mode:multiply;opacity:.16;
  background:repeating-linear-gradient(0deg,rgba(40,20,70,.55) 0 1px,transparent 1px 3px)}
.bugs{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.bug{position:absolute;font-size:22px;opacity:.75;filter:drop-shadow(0 0 6px rgba(255,255,255,.9));animation:fly var(--d,18s) linear infinite;will-change:transform}
.bug--star{color:#fff;font-size:14px;animation:twinkle var(--d,3s) ease-in-out infinite}
@keyframes fly{0%{transform:translate(var(--x0),110vh) rotate(0deg)}50%{transform:translate(calc(var(--x0) + 12vw),50vh) rotate(18deg)}100%{transform:translate(var(--x0),-10vh) rotate(-14deg)}}
@keyframes twinkle{0%,100%{opacity:.15;transform:scale(.6)}50%{opacity:1;transform:scale(1.2)}}
.trail{position:fixed;inset:0;z-index:60;pointer-events:none}

/* ---------- type helpers ---------- */
.pix{font-family:var(--pix);font-size:11px;letter-spacing:.04em;text-transform:lowercase}
.script{font-family:var(--script);font-weight:400;line-height:.9}

/* ---------- boot ---------- */
.boot{position:fixed;inset:0;z-index:100;background:#0a0612;color:#d9ccff;display:grid;place-items:center;font-family:var(--body);font-size:22px;transition:opacity .5s}
.boot.out{opacity:0;pointer-events:none}
.boot__inner{width:min(92vw,620px)}
.boot__txt{margin:0 0 18px;white-space:pre-wrap;min-height:11em;text-shadow:0 0 8px rgba(201,183,255,.7)}
.boot__txt::after{content:"█";animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.boot__bar{height:18px;border:2px solid #d9ccff;padding:2px;background:#000}
.boot__bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#d9ccff 0 10px,transparent 10px 13px);transition:width .3s steps(8)}
.boot__skip{margin-top:18px;background:none;border:0;color:#9f8fd0;cursor:pointer;animation:blink 1.4s steps(2) infinite}

/* ---------- layout ---------- */
.desk{width:min(100%,1100px);margin:0 auto;padding:0 16px 120px}
.marquee{margin:14px -16px 0;background:rgba(255,255,255,.55);border-top:1px solid #fff;border-bottom:1px solid rgba(90,75,116,.25);overflow:hidden;white-space:nowrap;font-family:var(--pix);font-size:11px;color:var(--ink2);padding:6px 0}
.marquee__track{display:inline-block;padding-left:100%;animation:marq 38s linear infinite}
.marquee__track span{margin-right:60px}
@keyframes marq{to{transform:translateX(-100%)}}

.hero{text-align:center;padding:46px 0 24px}
.hero__stars{color:#fff;text-shadow:0 0 10px #ff8bd3,0 0 20px #fff;letter-spacing:.6em;font-size:20px;animation:twinkle 3s ease-in-out infinite}
.hero__pre{color:var(--ink2);margin:8px 0 0}
.hero__title{font-size:clamp(66px,13vw,138px);margin:0;color:#fff;
  background:linear-gradient(180deg,#fff 0%,#ffd6ef 40%,#c9b7ff 60%,#fff 62%,#9ff3ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 2px 0 #fff) drop-shadow(0 3px 0 #b69bff) drop-shadow(0 10px 18px rgba(140,90,220,.35))}
.hero__sub{margin:6px 0 0;font-size:24px;color:var(--ink2)}

/* ---------- windows ---------- */
.win{background:var(--chrome);border:2px solid;border-color:var(--bevel) var(--bevel2) var(--bevel2) var(--bevel);box-shadow:3px 3px 0 #8b7fa8,0 18px 40px rgba(90,60,160,.22);margin:0 auto 26px;position:relative}
.win__bar{display:flex;align-items:center;gap:8px;padding:5px 8px;background:var(--win-bar);color:#fff;font-family:var(--pix);font-size:11px;text-shadow:1px 1px 0 rgba(0,0,0,.35);user-select:none}
.win__ico{filter:drop-shadow(1px 1px 0 rgba(0,0,0,.3))}
.win__title{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.win__btns{display:flex;gap:3px}
.win__btns i{display:grid;place-items:center;width:17px;height:15px;background:var(--chrome);color:var(--ink);font-style:normal;font-family:var(--body);font-size:14px;line-height:1;border:1px solid;border-color:#fff #6d6190 #6d6190 #fff}
.win__body{padding:18px}
.win--wizard{width:min(100%,760px)}

/* wizard */
.wiz__intro{margin:0 0 18px;font-size:22px;color:var(--ink2)}
.wiz__people{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:stretch}
.person{border:2px solid;border-color:var(--bevel2) var(--bevel) var(--bevel) var(--bevel2);padding:12px 14px 14px;margin:0;background:rgba(255,255,255,.55)}
.person legend{padding:0 6px;color:#fff;background:var(--a);border:1px solid #c0397f}
.person--b legend{background:var(--b);border-color:#1d8aa3}
.wiz__amp{font-size:80px;color:var(--ink2);align-self:center;padding:0 2px;line-height:1}
.field{display:block;margin:8px 0 0}
.field>span{display:block;color:var(--ink2);margin-bottom:3px}
.field em{font-style:normal;opacity:.7;text-transform:none}
.field input[type=text],.field input[type=date]{width:100%;padding:7px 10px;background:#fff;border:2px solid;border-color:var(--bevel2) var(--bevel) var(--bevel) var(--bevel2);font-size:22px;color:var(--ink);outline:none;min-height:44px}
.field input:focus{box-shadow:0 0 0 3px rgba(255,127,199,.45)}
.wiz__row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:10px}
.seg{display:flex;gap:4px;flex-wrap:wrap}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0}
.seg span{display:inline-block;padding:7px 12px;background:#fff;border:2px solid;border-color:var(--bevel) var(--bevel2) var(--bevel2) var(--bevel);cursor:pointer;min-height:44px;line-height:26px}
.seg input:checked+span{background:var(--lav);border-color:var(--bevel2) var(--bevel) var(--bevel) var(--bevel2)}
.wiz__actions{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px}
.chk{display:flex;align-items:center;gap:8px;cursor:pointer}
.wiz__note{margin:14px 0 0;font-size:18px;color:var(--ink2);opacity:.85}

.btn{display:inline-block;padding:0;border:2px solid;border-color:var(--bevel) var(--bevel2) var(--bevel2) var(--bevel);background:var(--chrome);box-shadow:2px 2px 0 #8b7fa8;cursor:pointer;text-decoration:none;color:var(--ink);font-family:var(--body);font-size:22px;min-height:44px}
.btn>span{display:block;padding:8px 18px;border:1px dotted transparent}
.btn:hover>span{background:linear-gradient(180deg,#fff,#ffe3f3)}
.btn:active{border-color:var(--bevel2) var(--bevel) var(--bevel) var(--bevel2);box-shadow:none;transform:translate(2px,2px)}
.btn:focus-visible>span{border-color:var(--ink)}
.btn--big{font-size:26px;background:linear-gradient(180deg,#fff,#ffd6ef 50%,#c9b7ff);animation:shine 2.6s ease-in-out infinite}
@keyframes shine{0%,100%{box-shadow:2px 2px 0 #8b7fa8,0 0 0 rgba(255,127,199,0)}50%{box-shadow:2px 2px 0 #8b7fa8,0 0 24px rgba(255,127,199,.75)}}
.btn--ghost{background:transparent;box-shadow:none;border-color:transparent;text-decoration:underline}

/* loading */
.win--load{width:min(100%,520px)}
.load{text-align:center}
.load__pc{font-size:44px;display:flex;justify-content:center;align-items:center;gap:14px}
.load__dots{width:90px;height:4px;background:repeating-linear-gradient(90deg,var(--ink2) 0 8px,transparent 8px 16px);animation:dots .6s linear infinite}
@keyframes dots{to{background-position:16px 0}}
.load__msg{margin:14px 0 10px;min-height:1.3em}
.load__bar{height:22px;border:2px solid;border-color:var(--bevel2) var(--bevel) var(--bevel) var(--bevel2);padding:2px;background:#fff}
.load__bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,#8f6bff 0 12px,transparent 12px 15px);transition:width .25s steps(4)}
.load__year{margin:10px 0 0;color:var(--ink2);font-size:14px;min-height:1.2em}

/* summary */
.win--summary{width:min(100%,760px)}
.sum{text-align:center}
.sum__names{font-size:clamp(56px,10vw,96px);margin:4px 0 0;color:var(--ink)}
.sum__line{margin:4px 0 14px;font-size:24px;color:var(--ink2)}
.sum__legend{display:flex;gap:10px;justify-content:center;align-items:center;flex-wrap:wrap}
.dot{width:12px;height:12px;display:inline-block;border:1px solid rgba(0,0,0,.25)}
.dot--a{background:var(--a)}.dot--b{background:var(--b)}
.sum__vs{opacity:.6;margin:0 6px}

/* ---------- timeline ---------- */
.tl{position:relative;margin:10px auto 26px;width:min(100%,1000px);padding:30px 0 10px}
.tl::before,.tl::after{content:"";position:absolute;top:0;bottom:0;width:4px;border-radius:2px;background:var(--a);box-shadow:0 0 12px var(--a);left:calc(50% - 150px);opacity:.75}
.tl::after{background:var(--b);box-shadow:0 0 12px var(--b);left:auto;right:calc(50% - 150px)}
.row{display:grid;grid-template-columns:1fr 300px 1fr;gap:18px;align-items:start;margin:0 0 54px;opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.row.in{opacity:1;transform:none}
.side{position:relative;padding:14px 16px;background:rgba(255,255,255,.72);border:2px solid;border-color:#fff rgba(139,127,168,.6) rgba(139,127,168,.6) #fff;box-shadow:2px 2px 0 rgba(139,127,168,.5);backdrop-filter:blur(4px)}
.side--a{text-align:right;border-right:4px solid var(--a)}
.side--b{border-left:4px solid var(--b)}
.side .who{font-family:var(--pxs);font-weight:700;font-size:22px;color:var(--a);margin:0 0 4px}
.side--b .who{color:#128aa6}
.side .age{display:inline-block;font-family:var(--pix);font-size:10px;background:var(--a);color:#fff;padding:3px 6px;margin-left:6px;vertical-align:middle}
.side--b .age{background:var(--b)}
.side--a .age{margin:0 6px 0 0}
.side .line{margin:0;font-size:21px;color:var(--ink)}
.side.unborn{background:rgba(255,255,255,.35);border-style:dashed}
.side.unborn .line{color:var(--ink2);font-style:italic}
.spine{position:relative;text-align:center}
.spine .year{display:inline-block;font-family:var(--pix);font-size:12px;background:var(--ink);color:#fff;padding:6px 12px;margin-bottom:-2px;position:relative;z-index:2;box-shadow:0 0 0 3px #fff,0 0 14px rgba(255,255,255,.9)}
.event{margin:0;background:var(--chrome);border:2px solid;border-color:var(--bevel) var(--bevel2) var(--bevel2) var(--bevel);box-shadow:3px 3px 0 #8b7fa8;text-align:left}
.event .win__bar{font-size:10px}
.event__ico{display:block;font-size:46px;text-align:center;padding:12px 0 4px;filter:drop-shadow(0 4px 6px rgba(90,60,160,.3))}
.event__title{margin:0 12px;text-align:center;font-family:var(--pxs);font-weight:700;font-size:22px;color:var(--ink)}
.event__blurb{margin:6px 12px 10px;text-align:center;font-size:19px;color:var(--ink2)}
.event__kind{display:block;text-align:center;font-family:var(--pix);font-size:9px;color:var(--ink2);opacity:.7;padding-bottom:10px}
.meanwhile{grid-column:1/-1;text-align:center;margin:-32px 0 0;font-size:22px;color:var(--ink2);font-style:italic;padding:0 8px}
.meanwhile::before,.meanwhile::after{content:" ✦ ";opacity:.6;font-style:normal}

.row--special .event{background:linear-gradient(180deg,#fff,#ffeaf6)}
.row--special .event__ico{font-size:52px}
.row--met .event{background:linear-gradient(180deg,#fff,#e8fbff 50%,#ffe0f1)}
.row--met .spine .year{background:linear-gradient(90deg,var(--a),var(--b))}

/* the meeting: threads bend inward */
.tl__join{position:relative;height:140px;margin:-30px auto 0;width:min(100%,1000px);display:block}
.tl__join path{fill:none;stroke-width:4;stroke-linecap:round}
.tl__join .pa{stroke:var(--a);filter:drop-shadow(0 0 8px var(--a))}
.tl__join .pb{stroke:var(--b);filter:drop-shadow(0 0 8px var(--b))}
.tl__join .heart{font-size:40px;animation:beat 1.6s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes beat{0%,100%{transform:scale(1)}30%{transform:scale(1.18)}60%{transform:scale(1.04)}}
.tl.joined::before,.tl.joined::after{bottom:150px}

/* end */
.win--end{width:min(100%,760px)}
.stats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px}
.stats li{background:#fff;border:2px solid;border-color:var(--bevel2) var(--bevel) var(--bevel) var(--bevel2);padding:12px 14px}
.stats b{display:block;font-family:var(--pxs);font-weight:700;font-size:30px;color:var(--ink);line-height:1}
.stats span{display:block;font-family:var(--pix);font-size:10px;color:var(--ink2);margin-top:6px}
.end__quote{font-size:clamp(40px,7vw,62px);text-align:center;margin:22px 0 6px;color:var(--ink)}
.end__actions{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:16px}

/* footer */
.foot{text-align:center;margin-top:50px;color:var(--ink2)}
.counter{display:inline-flex;align-items:center;gap:10px;margin-bottom:10px}
.counter__num{font-family:var(--pix);font-size:13px;background:#111;color:#8fff9c;padding:4px 8px;letter-spacing:.2em;border:2px inset #777}
.foot__gif{margin-top:8px;animation:blink 1.2s steps(2) infinite}

/* poster */
.poster{position:fixed;inset:0;z-index:200;background:rgba(20,10,40,.6);display:grid;place-items:center;padding:16px}
.poster__box{background:var(--chrome);border:2px solid;border-color:var(--bevel) var(--bevel2) var(--bevel2) var(--bevel);box-shadow:3px 3px 0 #8b7fa8;width:min(100%,560px);max-height:92vh;display:flex;flex-direction:column}
.poster__x{margin-left:auto;background:var(--chrome);color:var(--ink);border:1px solid;border-color:#fff #6d6190 #6d6190 #fff;width:22px;height:18px;line-height:1;cursor:pointer;padding:0}
.poster__body{padding:12px;overflow:auto;text-align:center}
.poster__body img{display:block;margin:0 auto 8px;border:1px solid var(--bevel2);max-height:60vh;width:auto}
.poster__hint{color:var(--ink2);margin:0 0 10px}

.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:300;background:var(--ink);color:#fff;padding:10px 16px;box-shadow:3px 3px 0 #8b7fa8}

/* ---------- phones ---------- */
@media (max-width:760px){
  body{font-size:20px}
  .wiz__people{grid-template-columns:1fr}
  .wiz__amp{display:none}
  .wiz__row{grid-template-columns:1fr}
  .tl::before{left:12px}.tl::after{right:12px}
  .row{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:44px}
  .spine{grid-column:1/-1;order:-1}
  .event{width:min(100%,360px);margin:0 auto}
  .side{padding:10px 10px}
  .side .who{font-size:18px}
  .side .line{font-size:18px}
  .side .age{display:block;width:max-content;margin:4px 0 0}
  .side--a .age{margin-left:auto}
  .meanwhile{margin-top:-26px;font-size:19px}
  .tl__join{height:110px}
  .end__actions .btn{flex:1 1 45%}
  .desk{padding-bottom:140px}
}
@media (prefers-reduced-motion:reduce){
  .holo,.clouds,.bug,.marquee__track,.btn--big,.foot__gif,.hero__stars{animation:none!important}
  .row{transition:none}
}
@media print{
  .holo,.clouds,.scan,.bugs,.trail,.marquee,.foot,.end__actions,.win--wizard{display:none!important}
  body{background:#fff;color:#000}
  .row{opacity:1;transform:none;break-inside:avoid}
}