/* Site presentation scoped to the official React Bits island. */
[data-create-line] {
  position: relative;
  z-index: 5;
  min-height: 48px;
  margin: 8px auto 0;
  color: #18232d;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.12;
  letter-spacing: -.035em;
  pointer-events: none;
}
.create-line-composition { display: inline-flex; align-items: center; justify-content: center; gap: .23em; }
.create-line-fixed { display: inline-block; }
.create-line-accessible { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-create-line] .text-rotate { flex-wrap: nowrap; }
[data-create-line] .create-word-accent {
  background-color: #dfc7aa;
  color: #352a21;
  padding: 4px 10px;
  border-radius: 5px;
}
[data-create-line] .create-word-clip { padding-bottom: 2px; }
[data-create-line] .overflow-hidden { overflow: hidden; }
[data-create-line] .justify-center { justify-content: center; }
@media(max-width:560px) {
  [data-create-line] { min-height: 38px; margin-top: 0; font-size: 22px; }
  [data-create-line] .create-word-accent { padding: 3px 8px; border-radius: 4px; }
}

/* Main H1 uses the official canvas effect; its static typography is the load/offscreen fallback. */
.spatial-home .hero h1[data-hero-fuzzy] {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  color: #17212b;
  font-family: 'Helvetica Neue', Helvetica, sans-serif;
  font-weight: 500;
  font-size: min(99.36px, 9.4vh, 10.8vw);
  line-height: 1.06;
  letter-spacing: -.055em;
  pointer-events: none;
}
.hero-fuzzy-composition { position: relative; display: block; }
.hero-fuzzy-static { display: block; }
.hero-fuzzy-static > span { display: block; height: 1.08em; line-height: 1.08; white-space: nowrap; }
.hero-fuzzy-canvases { display: none; }
.hero-fuzzy-composition[data-fuzzy-ready='true'] .hero-fuzzy-static { visibility: hidden; }
.hero-fuzzy-composition[data-fuzzy-ready='true'] .hero-fuzzy-canvases {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .1em;
}
.hero-fuzzy-canvases canvas { display: block; max-width: 100%; height: auto; }
@media(max-width:560px) {
  .spatial-home .hero h1[data-hero-fuzzy] { font-size: min(74px, 14.2vw, 7.8vh); line-height: 1.08; }
}