:root{
  --bg:#f7f9fc;
  --ink:#151b23;
  --muted:#667381;
  --male:#1976d2;
  --female:#d94f8b;
  --surface:rgba(255,255,255,.88);
  --shadow:0 16px 42px rgba(20,35,55,.12);
}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:var(--bg);color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  touch-action:pan-y;
}
.app{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}
.name-stage{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:4vw;pointer-events:none;
}
.name{
  position:relative;display:inline-flex;justify-content:center;align-items:center;
  font-size:clamp(5.8rem,18vw,16rem);
  font-weight:850;letter-spacing:-.075em;line-height:.8;
  text-align:center;user-select:none;will-change:transform,opacity;
  color:var(--ink);white-space:nowrap;text-shadow:0 0 0 transparent;
}
.name.glow-male{text-shadow:0 0 32px rgba(25,118,210,.58),0 0 72px rgba(25,118,210,.22)}
.name.glow-female{text-shadow:0 0 32px rgba(217,79,139,.58),0 0 72px rgba(217,79,139,.22)}
.name.enter{animation:nameIn .38s cubic-bezier(.18,.86,.2,1)}
.name.enter .letter{animation:letterSettle .43s cubic-bezier(.18,.86,.2,1) both}
.name.enter .letter:nth-child(1){animation-delay:.00s}
.name.enter .letter:nth-child(2){animation-delay:.025s}
.name.enter .letter:nth-child(3){animation-delay:.05s}
.name.enter .letter:nth-child(4){animation-delay:.075s}
.name.enter .letter:nth-child(5){animation-delay:.10s}
.name.enter .letter:nth-child(6){animation-delay:.125s}
@keyframes nameIn{
  0%{opacity:0;transform:scale(.78) translateY(16px)}
  55%{opacity:1;transform:scale(1.055) translateY(-2px)}
  78%{transform:scale(.985) translateY(1px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
@keyframes letterSettle{
  0%{opacity:0;transform:translateY(.35em) scale(.68) rotate(-3deg);letter-spacing:.18em}
  55%{opacity:1;transform:translateY(-.045em) scale(1.09) rotate(1deg);letter-spacing:.01em}
  78%{transform:translateY(.015em) scale(.97) rotate(0)}
  100%{opacity:1;transform:translateY(0) scale(1);letter-spacing:0}
}

.corner{
  position:absolute;bottom:18px;width:112px;height:84px;border:0;border-radius:24px;
  background:var(--surface);box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  cursor:pointer;z-index:10;font:750 13px/1 system-ui;letter-spacing:.08em;text-transform:uppercase;
  transition:transform .12s ease,box-shadow .18s ease;user-select:none;
}
.corner:active{transform:scale(.93)}
.corner svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:2.2}
.corner.male{right:18px;color:var(--male)}
.corner.female{left:18px;color:var(--female)}
.corner.idle-pulse{animation:buttonPulse 1.5s ease-in-out infinite}
@keyframes buttonPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.055)}}

.brand{
  position:absolute;bottom:27px;left:50%;transform:translateX(-50%);
  z-index:4;font-size:11px;font-weight:800;letter-spacing:.27em;
  color:#89939e;opacity:.65;pointer-events:none;user-select:none
}

.idle-message{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:8vw;text-align:center;z-index:7;pointer-events:none;
  background:var(--bg);
}
.idle-message[hidden]{display:none}
.idle-message-inner{
  font-size:clamp(2rem,6vw,5rem);font-weight:780;letter-spacing:-.045em;line-height:1.05;
  animation:idleIn .65s cubic-bezier(.2,.8,.2,1) both
}
.idle-message-inner small{
  display:block;margin-top:22px;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:#89939e;font-weight:700
}
@keyframes idleIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}

.spark{
  position:fixed;z-index:20;left:0;top:0;width:28px;height:28px;
  pointer-events:none;opacity:0;will-change:transform,opacity;
}
.spark svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2.1}
.spark.fly{animation:sparkFly .52s cubic-bezier(.2,.75,.2,1) both}
@keyframes sparkFly{
  0%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.4) rotate(-18deg)}
  12%{opacity:1}
  100%{opacity:0;transform:translate(var(--tx),var(--ty)) scale(1.1) rotate(18deg)}
}

@media (prefers-reduced-motion:reduce){
  .name.enter,.name.enter .letter,.spark.fly,.corner.idle-pulse,.idle-message-inner{animation:none!important}
  .name.enter,.idle-message-inner{opacity:1}
}
@media (max-height:420px){
  .corner{bottom:10px;height:66px;width:94px;border-radius:18px}
  .corner svg{width:24px;height:24px}
  .brand{bottom:16px}
}
@media (max-width:600px) and (orientation:portrait){
  .app{display:none}
  body:after{
    content:"Rotate your phone to landscape";position:fixed;inset:0;display:flex;
    align-items:center;justify-content:center;text-align:center;padding:30px;
    font-size:22px;font-weight:700;background:var(--bg);color:var(--ink)
  }
}