.app-dialog {
  position: fixed;
  left: 50%;
  top: max(4rem, 14dvh);
  margin: 0;
  width: min(calc(100% - 2rem), 430px);
  max-height: calc(100dvh - max(4rem, 14dvh) - 2rem);
  box-sizing: border-box;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  border: 1px solid var(--border);
  border-radius: .85rem;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 92%, white), var(--panel));
  color: var(--text);
  box-shadow: 0 24px 70px rgba(20, 32, 58, .28);
  padding: 0;
  transform: translateX(-50%);
  animation: dialogIn 190ms ease;
}

.app-dialog.is-closing {
  animation: dialogOut 160ms ease forwards;
}

.app-dialog::backdrop {
  background: rgba(8, 14, 26, .42);
}

.app-dialog form {
  margin: 0;
  padding: 1rem;
}

.dialog-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .8rem;
}

h1 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.1;
}

.subtitle {
  margin: .2rem 0 0;
  font-size: .92rem;
}

.dialog-copy {
  display: grid;
  gap: .65rem;
  margin: 1rem 0;
  color: var(--text);
  line-height: 1.45;
}

.dialog-copy h2 {
  margin: .35rem 0 -.2rem;
  font-size: .95rem;
}

.dialog-copy address {
  font-style: normal;
}

.dialog-copy a {
  color: var(--accent);
}

.dialog-copy p,
.compact-dialog p,
p {
  margin: 0;
}

.campaign-word-example {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .65rem;
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  border-radius: .7rem;
  background: var(--panel-soft);
  font-size: 1.12rem;
  font-weight: 850;
  letter-spacing: .04em;
}

.intro-lesson {
  display: grid;
  gap: 1rem;
  margin: 1rem 0;
}

.intro-stage {
  position: relative;
  display: grid;
  place-items: center;
}

.practice-stage {
  overflow: hidden;
}

.intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 3.2rem);
  gap: .32rem;
  touch-action: none;
  user-select: none;
}

.intro-grid span,
.intro-grid button {
  display: grid;
  width: 3.2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: .62rem;
  background:
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, .56), transparent 38%),
    var(--cell);
  color: var(--text);
  font-size: 1.18rem;
  font-weight: 850;
  box-shadow: 0 9px 18px rgba(31, 43, 57, .08);
}

.intro-grid button {
  padding: 0;
}

.intro-path {
  position: absolute;
  left: calc(50% - 5.1rem);
  top: 1.45rem;
  width: 10.2rem;
  height: .58rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 70%, transparent);
  box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 28%, transparent);
  transform-origin: left center;
}

.intro-path-demo {
  animation: introLine 1800ms ease-in-out infinite;
}

.intro-hand {
  position: absolute;
  left: calc(50% - 5.3rem);
  top: 1.12rem;
  width: 1.3rem;
  height: 1.3rem;
  border: .24rem solid var(--accent);
  border-radius: 50%;
  background: var(--panel);
  box-shadow: 0 8px 18px rgba(31, 43, 57, .18);
  animation: introHand 1800ms ease-in-out infinite;
}

.intro-status {
  min-height: 1.25rem;
  margin-bottom: .15rem;
  color: var(--muted);
  font-size: .96rem;
  font-weight: 820;
  text-align: center;
}

.intro-practice-arrow {
  display: block;
  margin-bottom: .35rem;
  color: var(--accent);
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  animation: introArrowBounce 1200ms ease-in-out infinite;
}

.intro-success-overlay {
  position: absolute;
  inset: -.4rem;
  display: grid;
  place-content: center;
  gap: .35rem;
  padding: 1.25rem 1rem;
  border-radius: 1rem;
  background:
    radial-gradient(circle at 50% 22%, rgba(255, 255, 255, .68), transparent 24%),
    linear-gradient(160deg, rgba(255, 214, 102, .26), rgba(255, 255, 255, .1) 42%, rgba(92, 200, 255, .2));
  backdrop-filter: blur(6px);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: scale(.96);
  transition: opacity 220ms ease, transform 220ms ease, box-shadow 220ms ease;
  border: 1px solid rgba(255, 255, 255, .45);
  box-shadow:
    0 24px 54px rgba(20, 32, 58, .18),
    0 0 0 1px rgba(255, 255, 255, .24) inset;
  overflow: hidden;
}

.intro-success-overlay.visible {
  opacity: 1;
  transform: scale(1);
  pointer-events: auto;
  cursor: pointer;
  box-shadow:
    0 28px 70px rgba(20, 32, 58, .24),
    0 0 0 1px rgba(255, 255, 255, .42) inset,
    0 0 34px rgba(255, 214, 102, .28);
}

.intro-success-overlay strong {
  position: relative;
  z-index: 2;
  font-size: 1.4rem;
  line-height: 1.1;
  text-shadow: 0 8px 18px rgba(20, 32, 58, .12);
  animation: introSuccessFloat 2200ms ease-in-out infinite;
}

.intro-success-overlay p {
  position: relative;
  z-index: 2;
  font-size: .92rem;
  font-weight: 700;
}

.intro-success-cta {
  position: relative;
  z-index: 2;
  justify-self: center;
  margin-top: .25rem;
  padding: .4rem .72rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--text);
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .01em;
  box-shadow: 0 8px 18px rgba(20, 32, 58, .12);
  animation: introCtaPulse 1400ms ease-in-out infinite;
}

.intro-success-glow {
  position: absolute;
  inset: auto 18% 14%;
  height: 3rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 214, 102, .45), transparent 68%);
  filter: blur(10px);
  animation: introGlowPulse 1800ms ease-in-out infinite;
}

.intro-firework {
  position: absolute;
  top: 26%;
  width: .8rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  opacity: .95;
  animation: introSparkle 1400ms ease-in-out infinite;
}

.intro-firework::before,
.intro-firework::after {
  content: "";
  position: absolute;
  inset: -1.2rem;
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--accent) 88%, white) 0 .11rem, transparent .12rem),
    radial-gradient(circle, var(--success) 0 .11rem, transparent .12rem),
    radial-gradient(circle, #f6b73c 0 .1rem, transparent .11rem),
    radial-gradient(circle, #f06595 0 .11rem, transparent .12rem),
    radial-gradient(circle, #5cc8ff 0 .1rem, transparent .11rem),
    radial-gradient(circle, #8ad05d 0 .1rem, transparent .11rem);
  background-position:
    50% 0%,
    100% 50%,
    18% 22%,
    80% 18%,
    22% 82%,
    78% 80%;
  background-repeat: no-repeat;
  animation: introFirework 900ms ease-out infinite;
}

.intro-firework::after {
  inset: -1.8rem;
  opacity: .45;
  animation-duration: 1200ms;
}

.intro-firework-left {
  left: 16%;
}

.intro-firework-right {
  right: 16%;
  background: var(--success);
}

.intro-confetti {
  position: absolute;
  top: 18%;
  width: .45rem;
  height: .85rem;
  border-radius: .2rem;
  opacity: 0;
}

.intro-success-overlay.visible .intro-confetti {
  animation: introConfettiFall 1600ms linear infinite;
}

.intro-confetti-1 {
  left: 18%;
  background: #f06595;
  animation-delay: 0ms;
}

.intro-confetti-2 {
  left: 34%;
  background: #f6b73c;
  animation-delay: 320ms;
}

.intro-confetti-3 {
  right: 32%;
  background: #5cc8ff;
  animation-delay: 180ms;
}

.intro-confetti-4 {
  right: 17%;
  background: #8ad05d;
  animation-delay: 520ms;
}

.practice-grid button.selected {
  border-color: var(--accent);
  background: var(--cell-pressed);
  transform: scale(.97);
}

.practice-grid button.success {
  border-color: var(--success);
  background: color-mix(in srgb, var(--success-soft) 72%, var(--cell));
  animation: cellFound 560ms cubic-bezier(.2, .8, .2, 1);
}

.practice-grid button.wrong {
  border-color: var(--danger);
  animation: shakeSoft 420ms cubic-bezier(.36, .07, .19, .97);
}