@font-face {
  font-family: "Bagel Fat One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/bagel-fat-one-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("/fonts/bricolage-grotesque-var-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #040e1b;
  --ink: #112033;
  --t1: #f0f4f9;
  --t2: #b4bfcc;
  --a: #eee276;
  --b: #a2cbfd;
  --c: #f89dc9;
  --berry: #f89dc9;
  --foxi: #eee276;
  --edge: #f7f8fa;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --pic: clamp(150px, min(27vh, 24vw), 260px);
  --pill: clamp(58px, 7.4vh, 78px);
  --line: clamp(2px, calc(var(--pic) * 0.0115), 3px);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--bg);
  color: var(--t1);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100svh;
  font-family: "Bricolage Grotesque", system-ui, sans-serif;
  overflow-x: clip;
}

::selection {
  background: color-mix(in oklab, var(--berry) 40%, transparent);
}

.page {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  grid-template-columns: minmax(0, 1fr);
  min-height: 100svh;
  padding: 64px 20px calc(64px + env(safe-area-inset-bottom));
  overflow: clip;
}

.stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1080px;
  text-align: center;
}

.nowrap {
  white-space: nowrap;
}

.sticker {
  position: relative;
  z-index: 5;
  display: inline-block;
  transform: rotate(var(--r, 0deg));
  touch-action: pinch-zoom;
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  will-change: transform;
}

.scrolls .sticker {
  touch-action: pan-y pinch-zoom;
}

.zoomed .sticker {
  touch-action: auto;
}

.dragging,
.dragging * {
  cursor: grabbing !important;
  -webkit-user-select: none;
  user-select: none;
}

.st-in {
  position: relative;
  display: block;
}

.st-shade {
  position: absolute;
  inset: 4%;
  z-index: -1;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  filter: blur(14px);
  opacity: 0;
  pointer-events: none;
}

.slot {
  position: relative;
}

.cut {
  position: absolute;
  inset: 0;
  z-index: 4;
  border: 1.5px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  transform: rotate(var(--r, 0deg));
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}

.slot.away .cut {
  opacity: 1;
}

.sheen {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.55) 48%, rgba(255, 255, 255, 0) 64%);
  transform: translateX(-130%);
}

.cluster {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.s-pic {
  flex: none;
  width: var(--pic);
  height: var(--pic);
  --r: -7deg;
}

.s-pic .sticker,
.s-pic .st-in {
  width: 100%;
  height: 100%;
}

.s-pic .cut {
  border-radius: 50%;
}

.pic {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  padding: calc(var(--pic) * 0.04);
  border-radius: 50%;
  background: var(--edge);
}

.pic::after {
  content: "";
  position: absolute;
  inset: calc(var(--pic) * 0.04 - var(--line) / 2);
  border: var(--line) solid var(--ink);
  border-radius: 50%;
  pointer-events: none;
}

.pic picture,
.pic img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
}

.pic .sheen {
  border-radius: 50%;
  background: linear-gradient(105deg, transparent 34%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 66%);
}

.s-pic .st-shade {
  border-radius: 50%;
}

.s-name {
  margin-left: calc(var(--pic) * -0.18);
  --r: 4deg;
}

.name,
.name-cut {
  display: grid;
  margin: 0;
  padding: 0.1em 0.16em 0.16em;
  font-family: "Bagel Fat One", "Bricolage Grotesque", sans-serif;
  font-size: clamp(3.4rem, min(10.5vw, 16vh), 9.25rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
}

.name > span:not(.sr-only) {
  position: relative;
  grid-area: 1 / 1;
}

.s-name .name-edge {
  filter: url(#close);
}

.name-edge {
  color: var(--edge);
  -webkit-text-stroke: 0.22em var(--edge);
}

.name-line {
  color: var(--ink);
  -webkit-text-stroke: 0.075em var(--ink);
}

.n-foxi {
  color: var(--foxi);
}

.n-berry {
  color: var(--berry);
}

.name-cut {
  position: absolute;
  inset: 0;
  place-items: center;
  border: 0;
  border-radius: 0;
  background: none;
  color: #fff;
  -webkit-text-stroke: 0.22em #fff;
  filter: url(#cutline);
}

.slot.away .name-cut {
  opacity: 1;
}

.deco {
  position: absolute;
  z-index: 6;
  width: var(--w);
  height: var(--w);
}

.deco svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.d-edge {
  fill: var(--edge);
  stroke: var(--edge);
  stroke-width: calc(var(--line) * 4);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.d-face {
  fill: var(--tint);
  stroke: var(--ink);
  stroke-width: var(--line);
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.d-star { --w: calc(var(--pic) * 0.27); left: calc(var(--pic) * -0.1); top: calc(var(--pic) * -0.06); --r: -14deg; --tint: var(--berry); }
.d-spark { --w: calc(var(--pic) * 0.17); left: calc(var(--pic) * 0.84); bottom: calc(var(--pic) * -0.02); --r: 6deg; --tint: var(--a); }
.d-heart { --w: calc(var(--pic) * 0.2); right: 1%; bottom: -4%; --r: 12deg; --tint: var(--b); }
.d-flag { width: auto; height: auto; right: 2.5%; top: 31%; --r: 10deg; }

.flag {
  display: inline-flex;
  padding: 4px;
  border-radius: 9px;
  background: var(--edge);
}

.flag svg {
  display: block;
  width: auto;
  height: clamp(20px, calc(var(--pic) * 0.13), 32px);
  border-radius: 5px;
  box-shadow: 0 0 0 var(--line) var(--ink);
}

.bio {
  max-width: 30em;
  margin: clamp(26px, 5vh, 54px) 0 0;
  font-size: clamp(1.125rem, min(1.6vw, 2.7vh), 1.55rem);
  font-weight: 430;
  line-height: 1.5;
  color: var(--t2);
  text-wrap: balance;
}

.hi {
  white-space: nowrap;
}

.hey {
  color: var(--t1);
  font-weight: 760;
}

.wave {
  margin: 0 0.2em 0 0.34em;
  vertical-align: -0.12em;
  --r: -8deg;
}

.hand {
  display: block;
  transform-origin: 68% 82%;
}

.waving .hand {
  animation: wave 1.5s ease-in-out;
}

.emoji {
  display: block;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 1.32em;
  line-height: 1;
  filter: url(#die);
}

.defs {
  position: absolute;
  width: 0;
  height: 0;
}

.f-ink {
  flood-color: var(--ink);
}

.f-edge {
  flood-color: var(--edge);
}

@keyframes wave {
  0% { transform: rotate(0deg); }
  14% { transform: rotate(16deg); }
  28% { transform: rotate(-8deg); }
  42% { transform: rotate(14deg); }
  56% { transform: rotate(-4deg); }
  70% { transform: rotate(9deg); }
  86%,
  100% { transform: rotate(0deg); }
}

.links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 34px;
  margin-top: clamp(32px, 6.5vh, 64px);
}

.s-pluto { --r: -4deg; --fill: var(--a); top: 5px; }
.s-discord { --r: 3deg; --fill: var(--b); top: -4px; }
.s-email { --r: -2deg; --fill: var(--c); top: 7px; }

.pill {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  height: var(--pill);
  padding: 0 1.4em 0 1.15em;
  overflow: hidden;
  border: max(5px, calc(var(--pill) * 0.085)) solid var(--edge);
  border-radius: 999px;
  background: var(--fill);
  box-shadow: inset 0 0 0 var(--line) var(--ink);
  color: var(--ink);
  font-family: "Bagel Fat One", "Bricolage Grotesque", sans-serif;
  font-size: calc(var(--pill) * 0.32);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  -webkit-user-drag: none;
}

.pill svg {
  flex: none;
  width: 1.15em;
  height: 1.15em;
}

.pill .i-mark {
  width: 1.25em;
  height: 1.25em;
}

.pill .i-go {
  width: 0.9em;
  height: 0.9em;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.35s var(--ease);
}

.pill .i-mail {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (hover: hover) {
  .s-pluto .sticker:hover .i-go {
    transform: translate(2px, -2px);
  }
}

.pill:focus-visible,
.tidy:focus-visible {
  outline: 2.5px solid var(--t1);
  outline-offset: 5px;
}

.swap {
  display: inline-grid;
  justify-items: center;
}

.swap > span {
  grid-area: 1 / 1;
  transition: opacity 0.32s var(--ease), filter 0.32s var(--ease), transform 0.32s var(--ease);
}

.swap-b {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(5px);
}

.copied .swap-a {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-5px);
}

.copied .swap-b {
  opacity: 1;
  filter: none;
  transform: none;
}

.corner {
  position: absolute;
  top: -13px;
  right: -13px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 3.5px solid var(--edge);
  border-radius: 50%;
  background: var(--ink);
  color: var(--t1);
  cursor: pointer;
  transform: rotate(10deg);
  transition: transform 0.35s var(--ease);
  -webkit-tap-highlight-color: transparent;
}

.corner::before {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
}

.corner svg {
  grid-area: 1 / 1;
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: opacity 0.25s var(--ease), transform 0.4s var(--ease);
}

.corner .i-check {
  stroke: var(--fill);
  stroke-width: 3;
  opacity: 0;
  transform: scale(0.5) rotate(-30deg);
}

.copied .corner .i-copy {
  opacity: 0;
  transform: scale(0.5) rotate(30deg);
}

.copied .corner .i-check {
  opacity: 1;
  transform: none;
}

.corner:focus-visible {
  outline: 2.5px solid var(--t1);
  outline-offset: 3px;
}

@media (hover: hover) {
  .corner:hover {
    transform: rotate(0deg) scale(1.1);
  }
}

.corner:active {
  transform: rotate(0deg) scale(0.92);
  transition-duration: 0.12s;
}

.spark {
  position: absolute;
  z-index: 30;
  width: 20px;
  height: 20px;
  overflow: visible;
  pointer-events: none;
}

.spark path {
  stroke: var(--ink);
  stroke-width: 1.4;
  stroke-linejoin: round;
}

.spark path:first-child {
  fill: var(--edge);
  stroke: var(--edge);
  stroke-width: 5;
}

.tidy {
  position: fixed;
  left: 50%;
  bottom: calc(24px + env(safe-area-inset-bottom));
  z-index: 60;
  height: 40px;
  padding: 0 18px;
  border: 3px solid var(--edge);
  border-radius: 999px;
  background: var(--ink);
  color: var(--t1);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  opacity: 0;
  filter: blur(4px);
  transform: translate(-50%, 10px) rotate(-2deg);
  pointer-events: none;
  transition: opacity 0.35s var(--ease), filter 0.35s var(--ease), transform 0.35s var(--ease);
}

.tidy.on {
  opacity: 1;
  filter: none;
  transform: translate(-50%, 0) rotate(-2deg);
  pointer-events: auto;
}

.tidy:active {
  transform: translate(-50%, 0) rotate(-2deg) scale(0.96);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.lost {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: clamp(28px, 6vh, 48px);
  min-height: 100svh;
  padding: 24px;
  text-align: center;
}

.lost .name {
  font-size: clamp(2.5rem, 12vw, 6.5rem);
  transform: rotate(-3deg);
}

.lost .pill {
  --fill: var(--b);
  transform: rotate(2deg);
}

.js .st-in {
  animation: stick 0.62s var(--ease) var(--d, 0s) backwards paused;
}

.js .bio {
  animation: rise 1s var(--ease) 0.34s backwards paused;
}

.go .st-in,
.go .bio {
  animation-play-state: running;
}

@keyframes stick {
  from {
    opacity: 0;
    transform: scale(1.32) rotate(var(--er, 10deg));
    filter: blur(6px);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
    filter: blur(5px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

.s-pic .st-in { --d: 0.04s; --er: -16deg; }
.s-name .st-in { --d: 0.16s; --er: 12deg; }
.d-star .st-in { --d: 0.5s; --er: 30deg; }
.d-flag .st-in { --d: 0.58s; --er: -16deg; }
.d-heart .st-in { --d: 0.64s; --er: 24deg; }
.d-spark .st-in { --d: 0.7s; --er: -20deg; }
.wave .st-in { --d: 0.8s; --er: -24deg; }
.s-pluto .st-in { --d: 0.6s; --er: -10deg; }
.s-discord .st-in { --d: 0.68s; --er: 10deg; }
.s-email .st-in { --d: 0.76s; --er: -8deg; }

@media (prefers-reduced-motion: reduce) {
  .js .st-in,
  .js .bio,
  .waving .hand {
    animation: none;
  }

  .swap > span,
  .corner,
  .corner svg,
  .tidy,
  .cut {
    transition-duration: 0.01s;
  }
}

@media (forced-colors: active) {
  .name-edge,
  .name-line {
    display: none;
  }

  .emoji {
    forced-color-adjust: none;
  }
}

@media (max-width: 700px) and (orientation: portrait), (max-width: 700px) and (min-height: 521px) {
  :root {
    --pic: clamp(132px, min(40vw, 24vh), 190px);
    --pill: 56px;
  }

  .page {
    padding-top: 48px;
  }

  .cluster {
    flex-direction: column;
  }

  .s-name {
    margin: calc(var(--pic) * -0.16) 0 0;
    --r: -3deg;
  }

  .name,
  .name-cut {
    font-size: min(4.8rem, 16.5vw);
  }

  .d-star { left: calc(50% - var(--pic) * 0.62); top: calc(var(--pic) * -0.04); }
  .d-spark { left: calc(50% + var(--pic) * 0.42); bottom: auto; top: calc(var(--pic) * 0.7); }
  .d-heart { right: 4%; bottom: -6%; }
  .d-flag { right: auto; left: calc(50% + var(--pic) * 0.34); top: calc(var(--pic) * 0.02); }

  .bio {
    max-width: 21em;
    font-size: 1.0625rem;
  }

  .links {
    flex-direction: column;
    gap: 22px;
  }

  .pill {
    min-width: min(252px, calc(100vw - 64px));
  }

  .corner {
    top: -10px;
    right: -11px;
  }

  .s-pluto,
  .s-discord,
  .s-email {
    top: 0;
  }

  .s-pluto { --r: -2.5deg; }
  .s-discord { --r: 2deg; }
  .s-email { --r: -1.5deg; }
}

@supports (height: 1svh) {
  @media (max-width: 700px) and (max-height: 760px) and (orientation: portrait) {
    :root {
      --pic: clamp(96px, min(40vw, 21svh), 190px);
      --pill: clamp(44px, 7.6svh, 56px);
    }

    .page {
      padding-top: clamp(16px, 4svh, 48px);
      padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }

    .bio {
      margin-top: clamp(14px, 3svh, 26px);
    }

    .links {
      margin-top: clamp(18px, 4svh, 32px);
    }
  }

  @media (max-width: 700px) and (max-height: 620px) and (orientation: portrait) {
    :root {
      --pic: clamp(88px, 18svh, 120px);
    }

    .name,
    .name-cut {
      font-size: clamp(2.6rem, 14.5vw, 3.6rem);
    }

    .bio {
      font-size: 1rem;
      line-height: 1.45;
    }

    .page {
      padding-bottom: calc(68px + env(safe-area-inset-bottom));
    }

    .tidy {
      bottom: calc(14px + env(safe-area-inset-bottom));
    }
  }

  @media (max-height: 520px) and (orientation: landscape) {
    :root {
      --pic: clamp(96px, 32svh, 150px);
      --pill: clamp(44px, 12svh, 52px);
    }

    .page {
      padding: 12px max(20px, env(safe-area-inset-right)) calc(54px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    }

    .name,
    .name-cut {
      font-size: clamp(2.6rem, 15svh, 4.6rem);
    }

    .bio {
      max-width: 34em;
      margin-top: 12px;
      font-size: 1rem;
    }

    .links {
      gap: 16px 30px;
      margin-top: 18px;
    }

    .s-pluto,
    .s-discord,
    .s-email {
      top: 0;
    }

    .tidy {
      bottom: calc(10px + env(safe-area-inset-bottom));
    }
  }
}