/* LingoLeap first-launch intro and sign-up gate */
.intro { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; padding: 14px 0 calc(22px + var(--safe-b)); }
.intro-top { display: flex; align-items: center; justify-content: space-between; padding: 0 20px; min-height: 44px; }
.intro-brand { color: var(--green); font-weight: 900; font-size: 24px; letter-spacing: -.5px; }
.intro-skip { color: var(--muted); font-size: 15px; text-transform: uppercase; letter-spacing: .8px; padding: 10px 4px; }
.intro-track { flex: 1; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.intro-track::-webkit-scrollbar { display: none; }
.intro-slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 10px 30px; gap: 10px; }
.intro-slide h1 { font-size: 28px; font-weight: 900; margin: 18px 0 0; line-height: 1.2; }
.intro-slide p { font-size: 17px; color: var(--muted); margin: 0; max-width: 380px; line-height: 1.45; }
.intro-art { position: relative; width: 210px; height: 210px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.intro-art.c-green { background: var(--green-l); } .intro-art.c-blue { background: var(--blue-l); } .intro-art.c-purple { background: #f3e3ff; } .intro-art.c-orange { background: #ffefd6; }
.intro-art .mascot { width: 150px; height: 150px; }
.intro-art > span { font-size: 100px; line-height: 1; }
.intro-art > i { position: absolute; right: 6px; bottom: 10px; font-style: normal; font-size: 48px; background: var(--card); border-radius: 50%; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 0 var(--line); }
.intro-soon { display: inline-block; margin-top: 4px; padding: 4px 12px; border-radius: 999px; background: var(--soft); border: 2px solid var(--line); color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; }
.intro-dots { display: flex; justify-content: center; gap: 8px; padding: 14px 0 18px; }
.intro-dots button { width: 10px; height: 10px; border-radius: 999px; background: var(--line); padding: 0; transition: width .2s, background .2s; }
.intro-dots button.on { width: 28px; background: var(--green); }
.intro-btns { display: flex; flex-direction: column; gap: 14px; padding: 0 24px; }
.intro-btns [hidden] { display: none; }
body.ll-intro .toast { bottom: 140px; }
/* While someone has to sign up or log in, hide the app's menus. */
body.ll-gated .sidebar, body.ll-gated .bottomnav, body.ll-gated .topbar, body.ll-gated .rightbar { display: none !important; }
body.ll-gated .main { padding-bottom: calc(24px + var(--safe-b)); }
body.ll-gated .main .page { padding-top: 22px; }
.ll-guest { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 18px auto 8px; text-align: center; max-width: 420px; }
.ll-guest .btn.flat { min-height: 44px; font-size: 14px; }
.ll-guest small { font-size: 13px; }
@media (max-height: 700px) {
  .intro-art { width: 160px; height: 160px; } .intro-art .mascot { width: 116px; height: 116px; }
  .intro-art > span { font-size: 76px; } .intro-art > i { width: 60px; height: 60px; font-size: 36px; }
  .intro-slide h1 { font-size: 24px; margin-top: 10px; } .intro-slide p { font-size: 16px; }
}
html[data-theme="dark"] .intro-art.c-purple { background: var(--t-purple); } html[data-theme="dark"] .intro-art.c-orange { background: var(--t-orange); }