.sign-in-screen { background: #fff; }
html:has(body.sign-in-screen) > .turbo-progress-bar { visibility: hidden; }
.sign-in-screen #app-shell { max-width: 480px; background: #fff; }
.sign-in-page {
  --welcome-green: var(--action-green);
  --welcome-green-shadow: var(--action-green-shadow);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: max(24px, env(safe-area-inset-top)) 24px max(16px, env(safe-area-inset-bottom));
}
.sign-in-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 0 48px;
  text-align: center;
}
.sign-in-alpaca { display: block; width: 180px; height: 198px; object-fit: contain; margin-bottom: 24px; }
.sign-in-alpaca .alpaca-body { transform-origin: 120px 242px; animation: alpaca-welcome-bob 3.2s ease-in-out infinite; }
.sign-in-alpaca .alpaca-shadow { transform-origin: 120px 250px; animation: alpaca-welcome-shadow 3.2s ease-in-out infinite; }
.sign-in-alpaca .alpaca-wave { transform-origin: 171px 181px; animation: alpaca-welcome-wave 4.8s ease-in-out infinite; }
.sign-in-alpaca .alpaca-eyes { transform-origin: 120px 103px; animation: alpaca-welcome-blink 6.4s linear infinite; }
.sign-in-alpaca .alpaca-scarf { transform-origin: 145px 153px; animation: alpaca-welcome-scarf 3.2s ease-in-out infinite; }
.sign-in-alpaca-seated .alpaca-body { animation-name: alpaca-login-breathe; }
.sign-in-alpaca-seated .alpaca-shadow { animation: none; }
.sign-in-alpaca-seated .alpaca-login-heart { transform-origin: 120px 190px; animation: alpaca-login-heart 4s ease-in-out infinite; }
@keyframes alpaca-login-breathe {
  0%, 100% { transform: scaleY(1); }
  50% { transform: scaleY(1.018); }
}
@keyframes alpaca-login-heart {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035); }
}
@keyframes alpaca-welcome-bob {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-7px) rotate(1deg); }
}
@keyframes alpaca-welcome-shadow {
  0%, 100% { transform: scaleX(1); opacity: 1; }
  50% { transform: scaleX(.88); opacity: .65; }
}
@keyframes alpaca-welcome-wave {
  0%, 12%, 36%, 100% { transform: rotate(0); }
  18%, 30% { transform: rotate(-17deg); }
  24% { transform: rotate(8deg); }
}
@keyframes alpaca-welcome-blink {
  0%, 40%, 44%, 72%, 76%, 100% { transform: scaleY(1); }
  42%, 74% { transform: scaleY(.08); }
}
@keyframes alpaca-welcome-scarf {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(5deg); }
}
.sign-in-title {
  margin: 0;
  color: #429900;
  font-family: ui-rounded, "Arial Rounded MT Bold", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(34px, 9vw, 42px);
  font-weight: 850;
  line-height: 1.2;
  letter-spacing: -1.8px;
}
.sign-in-description { max-width: 340px; margin: 20px 0 0; color: #737373; font-size: 18px; line-height: 1.6; white-space: pre-line; word-break: keep-all; text-wrap: balance; }
.sign-in-navigation { flex: none; display: flex; align-items: center; gap: 12px; }
.sign-in-back { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: #737373; }
.sign-in-back svg { width: 24px; height: 24px; }
.sign-in-nav-brand { color: #377e00; font-size: 17px; font-weight: 750; letter-spacing: -.5px; }
.provider-sign-in-page .sign-in-alpaca { width: 200px; height: 220px; margin-bottom: 24px; }
.provider-sign-in-page .sign-in-description { word-break: normal; }
.sign-in-footer { flex: none; width: 100%; }
.welcome-footer { padding-bottom: 20px; }
.greeting-scene {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(36px, 14dvh, 120px) 0 24px;
}
.greeting-bubble {
  position: relative;
  max-width: min(100%, 320px);
  margin: 0 0 24px;
  padding: 16px 22px;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  background: #fff;
  color: #5b5b5b;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
  text-wrap: balance;
}
.greeting-bubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: calc(50% - 9px);
  width: 18px;
  height: 18px;
  border-right: 2px solid #e5e5e5;
  border-bottom: 2px solid #e5e5e5;
  border-radius: 0 0 4px 0;
  background: #fff;
  transform: rotate(45deg);
}
.greeting-page .sign-in-alpaca { flex: none; width: 160px; height: 176px; margin-bottom: 0; }
.sign-in-actions { display: grid; gap: 16px; }
.sign-in-actions form { margin: 0; width: 100%; }
.sign-in-actions .provider-button, .sign-in-actions .welcome-button {
  position: relative;
  display: flex;
  width: 100%;
  min-height: 58px;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 20px;
  border: 2px solid #e5e5e5;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 #e5e5e5;
  color: #377e00;
  text-align: center;
  text-decoration: none;
  font-size: 17px;
  font-weight: 750;
  line-height: 1.4;
  transition: background .15s, transform .1s, box-shadow .1s;
}
.sign-in-actions .provider-google, .sign-in-actions .welcome-start { border-color: var(--welcome-green); background: var(--welcome-green); box-shadow: 0 4px 0 var(--welcome-green-shadow); color: #234b00; }
.sign-in-actions .provider-google img { box-sizing: content-box; padding: 4px; border-radius: 50%; background: #fff; }
.sign-in-actions .provider-button:active, .sign-in-actions .welcome-button:active { transform: translateY(4px); box-shadow: none; }
.sign-in-actions .provider-button:focus-visible, .sign-in-actions .welcome-button:focus-visible, .sign-in-back:focus-visible, .sign-in-privacy a:focus-visible { outline: 3px solid #235c00; outline-offset: 5px; }
.sign-in-actions img, .sign-in-actions svg { flex: 0 0 20px; width: 20px; height: 20px; }
.sign-in-privacy { margin: 20px 0 0; text-align: center; color: #737373; font-size: 12px; }
.sign-in-privacy a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 12px; text-decoration: none; text-underline-offset: 4px; }
.sign-in-privacy a:hover { text-decoration: underline; }
@media (hover: hover) {
  .sign-in-actions .provider-google:hover, .sign-in-actions .welcome-start:hover { background: #61d807; border-color: #61d807; }
  .sign-in-actions .provider-apple:hover, .sign-in-actions .welcome-login:hover { background: #f5fbef; }
  .sign-in-back:hover { background: #f5fbef; }
}
@media (max-width: 350px) {
  .sign-in-page { padding-inline: 20px; }
  .sign-in-title { font-size: 33px; }
  .sign-in-description { font-size: 16px; }
}
@media (max-height: 720px) {
  .provider-sign-in-page .sign-in-alpaca { width: 140px; height: 154px; }
}
@media (max-height: 650px) {
  .sign-in-page { padding-top: max(16px, env(safe-area-inset-top)); }
  .sign-in-header { padding: 16px 0 28px; }
  .sign-in-alpaca { width: 132px; height: 145px; margin-bottom: 16px; }
  .provider-sign-in-page .sign-in-alpaca { width: 112px; height: 124px; margin-bottom: 16px; }
  .greeting-page .sign-in-alpaca { width: 132px; height: 145px; }
  .greeting-bubble { font-size: 18px; padding: 14px 18px; }
  .sign-in-description { margin-top: 14px; }
  .sign-in-privacy { margin-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .sign-in-page .sign-in-alpaca * { animation: none; }
  .sign-in-actions .provider-button, .sign-in-actions .welcome-button { transition: none; }
}

/* A short story before choosing the interface language. */
.onboarding-page .greeting-scene { animation: none; }
.onboarding-page .greeting-bubble { word-break: keep-all; overflow-wrap: anywhere; animation: onboarding-bubble .32s ease-out both; }
.onboarding-character { position: relative; flex: none; width: 160px; height: 176px; }
.onboarding-page .sign-in-alpaca { overflow: visible; }
.onboarding-spark { position: absolute; z-index: 1; color: #f6bf43; opacity: 0; pointer-events: none; animation: onboarding-spark 3.2s ease-in-out infinite; }
.onboarding-spark-left { left: -4px; top: 28px; font-size: 22px; }
.onboarding-spark-right { right: -5px; top: 64px; font-size: 16px; animation-delay: .5s; }
.onboarding-page .onboarding-continue { background: var(--welcome-green); border-color: var(--welcome-green); box-shadow: 0 4px 0 var(--welcome-green-shadow); color: #fff; }
.onboarding-page .onboarding-continue:active,
.onboarding-page.is-advancing .onboarding-continue { background: #e5e5e5; border-color: #e5e5e5; box-shadow: none; color: #afafaf; transform: translateY(4px); }
.onboarding-page.is-advancing .onboarding-character { animation: onboarding-cheer .36s ease-out both; }
.onboarding-arriving .greeting-bubble { animation: none; }
.onboarding-arriving .onboarding-continue { background: #e5e5e5; border-color: #e5e5e5; box-shadow: none; color: #afafaf; }
.onboarding-greeting .alpaca-wave { animation: alpaca-greeting-wave 2.8s ease-in-out infinite; }
.onboarding-greeting .alpaca-body { animation: alpaca-greeting-bounce 2.8s ease-in-out infinite; }
.onboarding-expression .alpaca-body { animation: alpaca-expression-sway 3.4s ease-in-out infinite; }
.onboarding-expression .alpaca-head { transform-origin: 120px 144px; animation: alpaca-expression-nod 3.4s ease-in-out infinite; }
.onboarding-expression .alpaca-left-arm { transform-origin: 72px 180px; animation: alpaca-expression-hand 3.4s ease-in-out infinite; }
.onboarding-expression .alpaca-wave { animation: none; transform: rotate(15deg); }
.onboarding-expression .alpaca-smile { transform-origin: 120px 132px; animation: alpaca-expression-talk 3.4s ease-in-out infinite; }
.onboarding-expression .onboarding-spark { animation-duration: 4.2s; color: #77ca45; }
.onboarding-habit .alpaca-body { animation: alpaca-habit-hop 2.6s ease-in-out infinite; }
.onboarding-habit .alpaca-left-arm { transform-origin: 72px 180px; transform: rotate(28deg); }
.onboarding-habit .alpaca-wave { animation: alpaca-habit-cheer 2.6s ease-in-out infinite; }
.onboarding-habit .onboarding-spark { animation-duration: 2.6s; }
@keyframes onboarding-bubble { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes onboarding-cheer { 0%, 100% { transform: translateY(0); } 45% { transform: translateY(-12px) rotate(-3deg); } }
@keyframes onboarding-spark { 0%, 35%, 100% { opacity: 0; transform: translateY(4px) scale(.5); } 55%, 72% { opacity: 1; transform: translateY(-6px) scale(1); } }
@keyframes alpaca-greeting-wave { 0%, 12%, 60%, 100% { transform: rotate(0); } 25%, 47% { transform: rotate(-24deg); } 36% { transform: rotate(12deg); } }
@keyframes alpaca-greeting-bounce { 0%, 60%, 100% { transform: translateY(0); } 25%, 47% { transform: translateY(-7px) rotate(-2deg); } 36% { transform: translateY(-3px) rotate(2deg); } }
@keyframes alpaca-expression-sway { 0%, 100% { transform: rotate(1deg); } 50% { transform: rotate(-2deg); } }
@keyframes alpaca-expression-nod { 0%, 100% { transform: rotate(0); } 30%, 65% { transform: rotate(-5deg); } 45% { transform: rotate(2deg); } }
@keyframes alpaca-expression-hand { 0%, 100% { transform: rotate(0); } 30%, 65% { transform: rotate(34deg); } }
@keyframes alpaca-expression-talk { 0%, 25%, 45%, 65%, 100% { transform: scaleY(1); } 15%, 35%, 55% { transform: scaleY(1.45); } }
@keyframes alpaca-habit-hop { 0%, 48%, 100% { transform: translateY(0) rotate(-1deg); } 18% { transform: translateY(-10px) rotate(3deg); } 33% { transform: translateY(-4px) rotate(-3deg); } }
@keyframes alpaca-habit-cheer { 0%, 48%, 100% { transform: rotate(-10deg); } 18%, 33% { transform: rotate(-30deg); } }
@media (max-height: 650px) {
  .onboarding-page .greeting-scene { padding-top: 24px; padding-bottom: 16px; }
  .onboarding-character { width: 132px; height: 145px; }
  .onboarding-page .greeting-bubble { font-size: 17px; padding: 12px 16px; margin-bottom: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .onboarding-page *, .native-source-page * { animation: none !important; transition: none !important; }
}