#brand-intro {
  position: fixed; inset: 0; margin: 0; border: 0; padding: 0;
  width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  color: #faf4e8; background: #0b1020; overflow: hidden;
}
#brand-intro::backdrop { background: #0b1020; }
.intro-stage {
  height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: max(24px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  background: radial-gradient(ellipse at 50% 48%, #26253c 0%, #13192b 35%, #0b1020 72%);
}
.intro-eyebrow { color: #c7b8a4; font-size: clamp(9px, 1vw, 12px); letter-spacing: .35em; margin: 0 0 clamp(20px, 5vh, 48px); }
.intro-word { display: flex; width: min(96%, 1100px); justify-content: center; isolation: isolate; }
.intro-letter { display: grid; place-items: center; width: 10%; aspect-ratio: .7; will-change: transform; }
.intro-letter img, .intro-letter b { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; }
.intro-letter b { display: grid; place-items: center; font-size: clamp(26px, 9vw, 135px); color: #f2c97b; font-family: ui-rounded, system-ui, sans-serif; }
.intro-letter.locked { filter: drop-shadow(0 6px 12px #0005); }
.intro-rule { width: min(180px, 40vw); height: 2px; background: #ffffff12; margin-top: clamp(24px, 6vh, 58px); overflow: hidden; }
.intro-rule::after { content: ""; display: block; height: 100%; width: 100%; background: #d9b77c; transform: scaleX(clamp(0, var(--progress, 0), 1)); transform-origin: left; }
.intro-status { margin: 18px 0 0; font-size: clamp(10px, 2.4vw, 12px); color: #adafc1; letter-spacing: .05em; }
.intro-settled .intro-status { color: #ede1ce; }
.intro-skip { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); right: max(22px, env(safe-area-inset-right)); min-height: 44px; padding: 10px 18px; border: 1px solid #ffffff25; border-radius: 30px; color: #cacbda; font-size: 12px; background: #ffffff05; }
.intro-sound { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: max(22px, env(safe-area-inset-left)); min-height: 44px; padding: 10px 18px; color: #adafc1; font-size: 12px; }
.intro-sound[aria-pressed="true"] { color: #f2c97b; }
@media (max-width: 600px) and (orientation: portrait) {
  .intro-word { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); width: 96%; }
  .intro-letter { grid-column: span 2; width: 100%; aspect-ratio: .9; }
  .intro-letter:nth-child(7) { grid-column: 3 / span 2; }
  .intro-letter:nth-child(8) { grid-column: 5 / span 2; }
  .intro-letter:nth-child(9) { grid-column: 7 / span 2; }
  .intro-letter:nth-child(10) { grid-column: 9 / span 2; }
}
@media (max-height: 430px) { .intro-word { width: min(68%, 700px); } .intro-eyebrow { margin-bottom: 8px; } .intro-rule { margin-top: 12px; } .intro-status { margin-top: 8px; } }
@media (prefers-reduced-motion: reduce) { .intro-letter { transform: none !important; will-change: auto; } }