html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: #000000;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.wrapper {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.logo-text {
  font-size: 64px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 600;
}

@media (max-width: 600px) {
  .logo-text {
    font-size: 40px;
    letter-spacing: 0.2em;
  }
}

/* --- Structural Hooks --- */

.dynamic-char {
  position: relative; /* Creates an anchor point for the ghost box */
  z-index: 1;         /* Ensures the letter sits ON TOP of the box */
  transition: color 0.2s ease;
}

/* SCENARIO 2: The Ghost Box (Zero Layout Shift) */

/* 1. We define the box, but it is hidden by default */
.dynamic-char.variant-box::before {
  content: '';
  position: absolute;
  
  /* Vertical sizing (unchanged) */
  top: -0.1em;
  bottom: -0.1em;
  
  /* HORIZONTAL ADJUSTMENT */
  
  /* 1. Push the left edge further out to close the gap with 'A' */
  left: -0.15em; 
  
  /* 2. Pull the right edge in to stop overlapping 'C'.
     We use a larger number here to compensate for the 
     invisible letter-spacing attached to the span. */
  right: 0.15em; 

  background-color: #ffffff;
  z-index: -1;
  
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  border-radius: 4px;
}

/* 2. When Active: Swap Text Color */
.dynamic-char.variant-box.active {
  color: #000000;
}

/* 3. When Active: Reveal the Box */
.dynamic-char.variant-box.active::before {
  opacity: 1;
  transform: scale(1);
}

/* blue     color: #8dddff; */
/* yellow   color: #fbffaa; */
.dynamic-char.variant-color.active {
  transition: color 0.5s ease;
}

/* State 0 (Blue) */
.dynamic-char.variant-color.active[data-bit="0"] {
  color: #8dddff;
}

/* State 1 (Yellow) */
.dynamic-char.variant-color.active[data-bit="1"] {
  color: #fbffaa;
}