*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#05070a;
}

.bday-shell{
  position:relative;
  width:100vw;
  height:100vh;
  height:100dvh;
  overflow:hidden;
  background:#05070a;
}

iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
  background:#05070a;
  display:block;
  transition:
    opacity .45s cubic-bezier(.22,.85,.2,1),
    transform .45s cubic-bezier(.22,.85,.2,1),
    filter .45s cubic-bezier(.22,.85,.2,1);
}

.bday-shell.switching iframe{
  opacity:.08;
  transform:scale(.985);
  filter:blur(8px);
}

.switch-layer{
  position:absolute;
  inset:0;
  z-index:5;
  opacity:0;
  pointer-events:none;
  background:rgba(0,0,0,.72);
  transition:opacity .35s cubic-bezier(.22,.85,.2,1);
}

.bday-shell.switching .switch-layer{
  opacity:1;
}

.next-part{
  position:fixed;
  right:max(18px, env(safe-area-inset-right));
  bottom:max(18px, env(safe-area-inset-bottom));
  z-index:30;
  border:0;
  border-radius:999px;
  padding:15px 24px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:#321322;
  background:linear-gradient(135deg,#fff,#ffd6e8);
  box-shadow:0 18px 48px rgba(0,0,0,.25), 0 0 32px rgba(255,158,198,.18);
  font:900 1rem Inter, system-ui, sans-serif;
  cursor:pointer;
  opacity:1;
  transform:translateY(0);
  transition:
    opacity .25s ease,
    transform .25s cubic-bezier(.22,.85,.2,1);
}

.next-part:hover{
  transform:translateY(-3px);
}

.next-part.hidden{
  opacity:0;
  pointer-events:none;
  transform:translateY(22px);
}

@media (max-width:720px){
  .next-part{
    left:16px;
    right:16px;
    justify-content:center;
    bottom:max(14px, env(safe-area-inset-bottom));
    padding:14px 18px;
  }
}