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

body {
  background: #0d0c0b;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

body[data-hand="open"] {
  cursor: grab;
}

body[data-hand="closed"] {
  cursor: grabbing;
}

#scene {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.credit {
  position: fixed;
  right: max(28px, env(safe-area-inset-right, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  pointer-events: none;
}

.byline {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 9.5px;
  letter-spacing: .03em;
  color: #f2e6ea;
  opacity: .45;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .6);
  transition: opacity .4s ease;
}

.byline:hover,
.byline:focus-within {
  opacity: .9;
}

.byline a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(242, 230, 234, .35);
  pointer-events: auto;
}

.byline a:focus-visible {
  outline: 1px solid rgba(242, 230, 234, .7);
  outline-offset: 3px;
}

.title {
  margin: 0;
  font-family: "Sacramento", "Segoe Script", "Brush Script MT", cursive;
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 400;
  line-height: 1;
  color: #f2e6ea;
  opacity: .6;
  text-shadow: 0 1px 18px rgba(0, 0, 0, .55);
  pointer-events: none;
  transition: opacity 3s ease, color 3s ease, text-shadow 3s ease;
}

[data-idle] .title {
  color: #ffc4d6;
  opacity: 1;
  text-shadow:
    0 0 6px rgba(255, 150, 185, .9),
    0 0 22px rgba(255, 70, 130, .65),
    0 0 56px rgba(240, 50, 120, .4);
  pointer-events: auto;
  cursor: pointer;
  animation: glow 5s ease-in-out 1s infinite;
}

[data-idle] .title:hover {
  animation: none;
  color: #ffd6e3;
  text-shadow:
    0 0 8px rgba(255, 170, 200, 1),
    0 0 28px rgba(255, 80, 140, .85),
    0 0 72px rgba(240, 50, 120, .5);
}

@keyframes glow {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}

@media (prefers-reduced-motion: reduce) {
  .title { transition: none; }
  [data-idle] .title { animation: none; }
}

.mute {
  position: fixed;
  left: max(22px, env(safe-area-inset-left, 0px));
  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: #f2e6ea;
  opacity: .5;
  cursor: pointer;
  transition: opacity .4s ease;
}

.mute:hover,
.mute:focus-visible {
  opacity: .9;
}

.mute:focus-visible {
  outline: 1px solid rgba(242, 230, 234, .6);
  outline-offset: 2px;
}

.mute[hidden] {
  display: none;
}

.mute svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mute svg > path {
  fill: currentColor;
  fill-opacity: .25;
}

.mute__cross,
.mute[aria-pressed="true"] .mute__waves {
  display: none;
}

.mute[aria-pressed="true"] .mute__cross {
  display: inline;
}

.threshold {
  position: fixed;
  inset: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.threshold:focus-visible {
  outline: 1px solid rgba(255, 233, 220, .4);
  outline-offset: -12px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}