:root{
  --red: red;  
  --white:  #e8e8ea;  
  --bg1: #0c0d11;
  --bg2: #050507;
}

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}
html,body{
  height:100%;
}

body{
  font-family: ui-sans-serif, system-ui, -apple-system, Inter, sans-serif;
  background: linear-gradient(to bottom, var(--bg1), var(--bg2));
  color: var(--white);
  padding-top: 80px;
  overflow-x:hidden;
}

#nav{
  position: fixed;
  top:0; left:0;
  width:100%; height:80px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap: clamp(26px, 5vw, 70px);
  backdrop-filter: blur(10px);
  z-index: 10;
}

.word{
  all: unset;
  cursor:pointer;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 500;
  display:inline-flex;
}

.word .char{ color: var(--red); transition: 0.35s; }
.word.f1 .char{ color: #c98097; }  
.word.f2 .char{ color: #f0c2d3; }   
.word.f3 .char{ color: #ecebe3; }  
.word.f4 .char{ color: var(--white); } 

.char.removing{
  opacity:0;
  transform:translateY(-1px) scale(.92);
  filter:blur(.6px);
}

.fallen-letter{
  position: fixed;
  left:0; top:0;
  pointer-events:none;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight:500;
  color: var(--white);
  opacity:1;
  transition: transform 1.2s cubic-bezier(.22,.7,.26,1), opacity .8s;
  z-index:0;
}

.fallen-letter.land{
  opacity:.32;
}