:root{
  --bg:#000;
  --text:#F5F5F7;
  --text-2:rgba(235,235,245,.62);
  --text-3:rgba(235,235,245,.34);
  --glass:rgba(255,255,255,.065);
  --glass-hi:rgba(255,255,255,.11);
  --stroke:rgba(255,255,255,.14);
  --sep:rgba(255,255,255,.09);
  --blue:#0A84FF; --indigo:#5E5CE6; --purple:#BF5AF2; --teal:#40C8E0;
  --p:0;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);background:var(--bg)}
body{
  margin:0;min-height:100%;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  overflow-x:hidden;
}

/* ---------- Ambient light behind the glass ---------- */
.ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.55;will-change:transform}
.b1{width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,var(--indigo),transparent 68%);
  transform:translate3d(calc(var(--p)*8vmax),calc(var(--p)*14vmax),0)}
.b2{width:52vmax;height:52vmax;right:-20vmax;top:18vh;background:radial-gradient(circle,var(--purple),transparent 68%);
  transform:translate3d(calc(var(--p)*-10vmax),calc(var(--p)*-6vmax),0);opacity:.42}
.b3{width:48vmax;height:48vmax;left:10vw;bottom:-26vmax;background:radial-gradient(circle,var(--teal),transparent 68%);
  transform:translate3d(calc(var(--p)*6vmax),calc(var(--p)*-16vmax),0);opacity:.32}
.grain{position:absolute;inset:0;opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- Glass material ---------- */
.glass{
  background:linear-gradient(180deg,var(--glass-hi),var(--glass) 40%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);backdrop-filter:blur(28px) saturate(180%);
  border:.5px solid var(--stroke);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 40px rgba(0,0,0,.35);
}

/* ---------- Collapsing nav bar (iOS large title) ---------- */
.nav{
  position:fixed;left:0;right:0;top:0;z-index:10;
  padding-top:env(safe-area-inset-top,0px);
  pointer-events:none;
}
.nav-inner{
  margin:10px auto 0;width:max-content;max-width:calc(100% - 24px);
  display:flex;align-items:center;gap:10px;
  padding:6px 8px 6px 6px;border-radius:999px;
  opacity:0;transform:translateY(-12px) scale(.96);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1);
}
.nav.show .nav-inner{opacity:1;transform:none;pointer-events:auto}
.nav .mini-avatar{width:30px;height:30px;border-radius:50%;font-size:15px}
.nav .t{font-size:15px;font-weight:600;letter-spacing:-.01em;white-space:nowrap}

.share{
  appearance:none;border:0;cursor:pointer;color:var(--text);
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.1);transition:background .2s;
}
.share:hover{background:rgba(255,255,255,.18)}
.share svg{width:17px;height:17px}

/* ---------- Layout ---------- */
.wrap{
  position:relative;z-index:1;
  max-width:1040px;margin:0 auto;
  padding:clamp(48px,10vh,96px) 20px 48px;
  display:grid;gap:36px;
}
@media (min-width:900px){
  .wrap{grid-template-columns:340px 1fr;gap:56px;align-items:start;min-height:100%}
  .profile{position:sticky;top:calc(env(safe-area-inset-top,0px) + 12vh)}
  .nav{display:none}
}

/* ---------- Profile ---------- */
.profile{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.avatar{
  display:grid;place-items:center;flex:none;
  font-weight:700;color:#fff;letter-spacing:-.03em;
  background:
    radial-gradient(120% 120% at 20% 10%,rgba(255,255,255,.35),transparent 45%),
    linear-gradient(145deg,var(--blue),var(--indigo) 50%,var(--purple));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 .5px rgba(255,255,255,.2);
}
.profile .avatar{width:92px;height:92px;border-radius:50%;font-size:42px;
  transform:scale(calc(1 - var(--p)*.12));transform-origin:left bottom}
.profile h1{
  margin:0;font-size:clamp(40px,9vw,56px);line-height:1.02;font-weight:800;letter-spacing:-.035em;
  opacity:calc(1 - var(--p)*1.4);
}
.profile p{margin:0;color:var(--text-2);font-size:17px;line-height:1.45;max-width:30ch}
.profile .actions{display:flex;gap:10px;margin-top:4px}
.pill{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 16px 0 12px;border-radius:999px;
  color:var(--text);text-decoration:none;font-size:15px;font-weight:600;cursor:pointer;
  appearance:none;font-family:inherit;
}
.pill svg{width:18px;height:18px}
.pill.kofi .k{width:22px;height:22px;border-radius:7px;background:#FF5E5B;display:grid;place-items:center}
.pill.kofi .k svg{width:14px;height:14px;fill:#fff}

/* ---------- Grouped lists ---------- */
.groups{display:grid;gap:26px}
.group h2{margin:0 0 8px 16px;font-size:13px;font-weight:500;color:var(--text-2);letter-spacing:0}
.list{list-style:none;margin:0;padding:0;border-radius:22px;overflow:hidden}
.list li+li .row::before{
  content:"";position:absolute;top:0;right:0;left:64px;height:.5px;background:var(--sep);
}
.row{
  position:relative;display:flex;align-items:center;gap:14px;
  min-height:62px;padding:10px 16px 10px 14px;
  color:inherit;text-decoration:none;
  transition:background .18s ease;
}
a.row:hover{background:rgba(255,255,255,.06)}
a.row:active{background:rgba(255,255,255,.1)}
.row:focus-visible{outline:2px solid var(--blue);outline-offset:-3px;border-radius:18px}
.ico{
  width:36px;height:36px;border-radius:10px;flex:none;display:grid;place-items:center;
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.22),inset 0 1px 0 rgba(255,255,255,.25);
}
.ico svg{width:19px;height:19px;fill:#fff}
.txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.name{font-size:17px;font-weight:500;letter-spacing:-.01em}
.handle{font-size:14px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chev{width:8px;height:14px;color:var(--text-3);flex:none;transition:transform .2s ease,color .2s}
a.row:hover .chev{transform:translateX(3px);color:var(--text-2)}
.row.off{opacity:.55}
.soon{font-size:13px;color:var(--text-3)}

footer{grid-column:1/-1;text-align:center;color:var(--text-3);font-size:13px;padding-top:8px}

/* ---------- One entrance moment ---------- */
/* Text block under the logo */
.profile-text{display:flex;flex-direction:column;align-items:flex-start;gap:18px}

/* Logo falls onto the name, bounces up, settles */
@keyframes logo-drop{
  0%  {transform:translateY(-70vh);opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  8%  {opacity:1}
  45% {transform:translateY(0) scale(1.06,.9);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  62% {transform:translateY(-22px) scale(.98,1.03);animation-timing-function:cubic-bezier(.55,0,1,.45)}
  78% {transform:translateY(0) scale(1.03,.96);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  88% {transform:translateY(-5px)}
  100%{transform:none}
}
/* Name, tagline and buttons get pushed down slightly on impact */
@keyframes text-nudge{
  0%  {transform:none}
  18% {transform:translateY(7px)}
  45% {transform:translateY(-1px)}
  60% {transform:none}
  70% {transform:translateY(2.5px)}
  100%{transform:none}
}
.profile .avatar{animation:logo-drop 1.1s backwards;position:relative;z-index:2}
.profile-text{animation:text-nudge .75s .5s cubic-bezier(.3,.7,.4,1) both}

/* Groups swing in like turning cards, staggered */
.groups{perspective:1400px}
@keyframes swing-in{
  0%  {opacity:0;transform:rotateY(-45deg) translateX(24px)}
  35% {opacity:1}
  100%{opacity:1;transform:none}
}
.group{animation:swing-in 1s cubic-bezier(.25,.8,.3,1) both;transform-origin:center center}
.group:nth-child(1){animation-delay:.35s}
.group:nth-child(2){animation-delay:.75s}
.group:nth-child(3){animation-delay:1.15s}

.toast{
  position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));z-index:20;
  padding:10px 18px;border-radius:999px;font-size:15px;font-weight:500;
  transform:translate(-50%,20px);opacity:0;transition:.3s ease;pointer-events:none;
}
.toast.show{transform:translate(-50%,0);opacity:1}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .blob{transform:none!important}
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .glass{background:rgba(28,28,30,.92)}
}

/* ---------- Footer links ---------- */
footer{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px}
footer a{color:var(--text-2);text-decoration:none}
footer a:hover{color:var(--text)}
footer a:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

/* ---------- Cookie notice ---------- */
.cookie{
  position:fixed;z-index:30;left:50%;
  bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:min(560px,calc(100% - 24px));
  display:flex;align-items:center;gap:14px;
  padding:10px 10px 10px 18px;border-radius:20px;
  font-size:14px;line-height:1.4;color:var(--text-2);
  transform:translate(-50%,0);transition:opacity .3s ease,transform .35s cubic-bezier(.2,.8,.2,1);
}
.cookie[hidden]{display:none}
.cookie.hide{opacity:0;transform:translate(-50%,16px)}
.cookie a{color:var(--text);text-underline-offset:2px}
.cookie button{
  flex:none;appearance:none;border:0;cursor:pointer;font:inherit;font-weight:600;color:#fff;
  height:36px;padding:0 18px;border-radius:999px;background:var(--blue);
}
.cookie button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.toast{bottom:calc(90px + env(safe-area-inset-bottom,0px))}

/* ---------- Legal pages ---------- */
.legal{position:relative;z-index:1;max-width:720px;margin:0 auto;padding:24px 16px 120px}
.back{
  display:inline-flex;align-items:center;gap:6px;height:38px;padding:0 16px 0 12px;border-radius:999px;
  color:var(--text);text-decoration:none;font-size:15px;font-weight:600;margin-bottom:28px;
}
.back svg{width:9px;height:15px}
.back:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.legal h1{margin:0 0 20px;font-size:clamp(34px,7vw,44px);font-weight:800;letter-spacing:-.03em;line-height:1.05}
.card{border-radius:22px;padding:clamp(20px,4vw,32px)}
.card h2{margin:28px 0 8px;font-size:19px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.card h2:first-child{margin-top:0}
.card h3{margin:20px 0 6px;font-size:16px;font-weight:600;color:var(--text)}
.card p,.card li{color:var(--text-2);font-size:16px;line-height:1.6;max-width:68ch}
.card p{margin:0 0 10px}
.card ul{margin:0 0 10px;padding-left:20px}
.card a{color:var(--text);text-underline-offset:2px}
.card address{font-style:normal;color:var(--text);font-size:16px;line-height:1.6;margin-bottom:10px}
.fill{color:#FFD60A}

/* Logo image as avatar */
img.avatar{object-fit:cover;background:#0d1020;display:block}

/* ---------- Footer entrance (index page) ---------- */
footer{overflow-x:clip}
.f-pair{display:inline-flex;gap:18px;flex-wrap:wrap;justify-content:center}
.fi{display:inline-block}
#site-footer.anim:not(.play) .fi{opacity:0}

@keyframes f-rise{
  0%  {transform:translateY(100vh);opacity:0}
  30% {opacity:1}
  100%{transform:none;opacity:1}
}
/* Flyer hits its neighbour, recoils, settles (same feel as the logo) */
@keyframes f-fly{
  0%  {transform:translateX(calc(var(--d)*100vw));opacity:0;animation-timing-function:cubic-bezier(.55,0,1,.45)}
  10% {opacity:1}
  60% {transform:translateX(0) scale(.94,1.04);animation-timing-function:cubic-bezier(0,.55,.45,1)}
  75% {transform:translateX(calc(var(--d)*10px));animation-timing-function:cubic-bezier(.55,0,1,.45)}
  88% {transform:translateX(0)}
  94% {transform:translateX(calc(var(--d)*2px))}
  100%{transform:none}
}
/* The one that gets hit is pushed a bit, like the name under the logo */
@keyframes f-nudge{
  0%  {transform:none}
  18% {transform:translateX(calc(var(--d)*7px))}
  45% {transform:translateX(calc(var(--d)*-1px))}
  60% {transform:none}
  70% {transform:translateX(calc(var(--d)*2.5px))}
  100%{transform:none}
}
#site-footer.play .f-imp{--d:1;animation:f-rise .8s cubic-bezier(.2,.8,.2,1) backwards,f-nudge .75s 1.24s cubic-bezier(.3,.7,.4,1)}
#site-footer.play .f-name{--d:-1;animation:f-fly .9s .7s backwards}
#site-footer.play .f-ds{--d:1;animation:f-fly .9s 1.6s backwards}
#site-footer.play .f-pair{--d:-1;animation:f-nudge .75s 2.14s cubic-bezier(.3,.7,.4,1)}