#root {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo {
    animation: logo-spin infinite 20s linear;
  }
}

.card {
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* --- Hidden Attribution Utilities --- */
.attribution-ghost {
    opacity: 0;
    font-size: 0;
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    user-select: text; /* Allows selection/copying */
    pointer-events: none;
    white-space: pre;
}

.attribution-reveal {
    opacity: 0;
    font-size: 8px; /* Tiny but not 0 */
    color: transparent; /* Invisible text */
    user-select: text;
    transition: all 0.3s ease;
}

.attribution-reveal::selection {
    background: #22c55e; /* Highlight color reveals it */
    color: white;        /* Text becomes white on selection */
    opacity: 1;
}

.nav-ghost-y5 {
    opacity: 0;
    font-size: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    overflow: hidden;
    user-select: text;
    pointer-events: none;
    z-index: -1;
}