:root {
  --bg-color:#f6eef2;
  --text-color:#463943;
  --text-color-light:#87717f;
  --rose:163 88 121;
  --blue:76 133 158;
  --surface:255 252 254;
  --edge:113 79 101;
  --shadow:85 53 74;
  color-scheme:light;
}
@media(prefers-color-scheme:dark) {
  :root {
    --bg-color:#19171f;
    --text-color:#f2e6ed;
    --text-color-light:#bba7b6;
    --rose:217 153 182;
    --blue:144 194 214;
    --surface:37 31 43;
    --edge:222 178 204;
    --shadow:0 0 0;
    color-scheme:dark;
  }
}
html,body { min-height:100%; }
body {
  overflow:auto;
  min-height:100svh;
  background:var(--bg-color);
  animation:none;
  transition:background-color 900ms ease,color 900ms ease;
}
.ambience { position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;animation:scene-in 1800ms ease both; }
.particles { position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0;animation:scene-in 2200ms ease both;color:rgb(var(--rose));transition:color 900ms ease; }
.particle { position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:currentColor;opacity:.3;box-shadow:0 0 9px rgb(var(--rose)/20%);animation:float-particle var(--duration) ease-in-out var(--delay) infinite alternate; }
.particle:nth-child(3n) { color:rgb(var(--blue));filter:blur(.6px); }
.particle.sparkle { width:9px;height:9px;border-radius:0;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
@keyframes float-particle { from{transform:translate3d(0,18px,0);opacity:.14}to{transform:translate3d(var(--shift),-24px,0);opacity:.48} }
@keyframes scene-in { from{opacity:0}to{opacity:1} }
.ambience>img { width:100%;height:100%;object-fit:cover;filter:blur(45px) saturate(.6);opacity:.10;transform:scale(1.12); }
.bloom { position:absolute;width:80vmax;height:80vmax;border-radius:50%;opacity:.5;animation:drift 18s ease-in-out infinite alternate; }
.bloom-pink { top:-44vmax;left:-23vmax;background:radial-gradient(ellipse,rgb(var(--rose)/21%),transparent 65%); }
.bloom-blue { bottom:-43vmax;right:-28vmax;background:radial-gradient(ellipse,rgb(var(--blue)/22%),transparent 65%);animation-delay:-9s; }
main { min-height:100svh;visibility:visible;transform:none;opacity:1;z-index:1;padding:32px 18px; }
.card {
  width:min(400px,100%);padding:32px 26px 26px;border-radius:28px;
  background:rgb(var(--surface)/73%);border:1px solid rgb(var(--edge)/16%);
  box-shadow:0 22px 65px rgb(var(--shadow)/12%),0 1px 0 rgb(255 255 255/24%) inset;
  backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);
  visibility:visible;transform:none;will-change:auto;
  transition:background-color 900ms ease,border-color 900ms ease,box-shadow 900ms ease;
}
body.entered-done .card { animation:arrive 1500ms cubic-bezier(.2,.65,.3,1) both!important; }
.avatar-shell { width:160px;height:160px;padding:5px;border-radius:29px;border:1px solid rgb(var(--rose)/28%);background:rgb(var(--surface)/70%);box-shadow:0 12px 30px rgb(var(--shadow)/12%);margin:0 0 22px; }
.avatar { display:block;width:100%;height:100%;object-fit:cover;object-position:center;border-radius:23px;background:rgb(var(--rose)/6%);opacity:0;transform:scale(.97);transition:opacity 1400ms ease,transform 1600ms cubic-bezier(.2,.65,.3,1); }
.avatar.is-ready { opacity:1;transform:scale(1); }
.avatar-shell picture { display:block;width:100%;height:100%; }
#who { margin:0 0 8px;font-size:36px;line-height:1.25;letter-spacing:.06em;font-weight:400;color:var(--text-color);text-shadow:none;transition:color 900ms ease; }
#footer { margin:0 0 25px;font-size:17px;line-height:1.4;letter-spacing:.075em;color:var(--text-color-light);transition:color 900ms ease; }
#footer::before,#footer::after { background:linear-gradient(90deg,transparent,rgb(var(--rose)/45%),transparent); }
#footer::before { width:104px;margin-bottom:12px; }
#footer::after { width:66px;margin-top:12px; }
.flexbox { width:100%;gap:10px;padding:0; }
.social { display:flex;align-items:center;justify-content:center;gap:8px;min-width:0;min-height:54px;padding:10px 9px;border-radius:16px;font-size:13px;color:var(--text-color);border:1px solid rgb(var(--rose)/22%);background:linear-gradient(135deg,rgb(var(--rose)/7%),rgb(var(--blue)/5%));box-shadow:0 6px 18px rgb(var(--shadow)/5%);transition:transform 220ms ease,border-color 500ms ease,color 900ms ease; }
.social .icon { flex:0 0 30px;width:30px;height:30px;font-size:17px;border:1px solid rgb(var(--rose)/16%);color:rgb(var(--rose));background:rgb(var(--rose)/7%);transition:color 900ms ease,background-color 900ms ease; }
.social:focus-visible { outline:2px solid rgb(var(--rose));outline-offset:5px; }
@media(hover:hover) { .social:hover { transform:translateY(-2px);border-color:rgb(var(--rose)/48%); } }
.social:active { transform:scale(.98); }
@keyframes arrive { from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none} }
@keyframes drift { to{transform:translate3d(4%,5%,0)} }
@media(max-width:360px) { .card{padding:28px 18px 22px}.social{gap:6px;padding:9px 7px;font-size:12px}.avatar-shell{width:150px;height:150px} }
@media(max-height:540px) { main{padding:18px}.card{padding-top:20px}.avatar-shell{width:110px;height:110px;margin-bottom:12px}#who{font-size:29px}#footer{margin-bottom:16px} }
@media(prefers-reduced-motion:reduce) { body.entered-done .card{animation:none!important}.bloom,.particle,.particles,.ambience{animation:none}.ambience>img{display:none}*{transition-duration:150ms!important} }