/* Littelli logo layout and touch-safe navigation. UI colors retain the master-2 theme. */
.brand { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-width:var(--brand-touchTarget); min-height:var(--brand-touchTarget); max-width:100%; padding:0; border-radius:12px; }
.brand-artwork { display:block; width:var(--brand-horizontalWidth); max-width:100%; }
.brand-artwork img { width:100%; height:auto; object-fit:contain; }
.brand-artwork .brand-dark { display:none; }
:root[data-theme=dark] .brand-artwork .brand-light { display:none; }
:root[data-theme=dark] .brand-artwork .brand-dark { display:block; }
.brand-artwork[data-variant=compact] { width:var(--brand-compactWidth); }
.brand-artwork[data-variant=stacked] { width:var(--brand-startupWidth); }
.brand > [data-variant=compact] { display:none; }
.doodle-brand { display:flex; justify-content:center; }
.brand-tag { margin-left:0; letter-spacing:1.2px; }
.sidebar { padding-top:max(28px,env(safe-area-inset-top)); }
.lesson-header { padding-top:max(12px,env(safe-area-inset-top)); padding-left:max(12px,env(safe-area-inset-left)); padding-right:max(12px,env(safe-area-inset-right)); }
@media (max-width:1100px) {
  .lesson-header .brand > [data-variant=horizontal] { display:none; }
  .lesson-header .brand > [data-variant=compact] { display:block; }
}
@media (min-width:681px) and (max-width:900px) {
  .sidebar .brand > [data-variant=horizontal] { display:none; }
  .sidebar .brand > [data-variant=compact] { display:block; }
}
@media (max-width:680px) {
  .mobile-brand .brand > [data-variant=horizontal] { display:none; }
  .mobile-brand .brand > [data-variant=compact] { display:block; }
  .lesson-header { grid-template-columns:44px minmax(0,1fr) 124px; }
  .topbar .top-actions { min-width:0; }
  .main-shell { padding-left:max(18px,env(safe-area-inset-left)); padding-right:max(18px,env(safe-area-inset-right)); }
}

/* Shared mascot scene for the static landing and the app's nickname screen. */
.welcome-scene {
  position: relative;
  isolation: isolate;
  min-width: 0;
  margin: 0;
  padding: 8px 0 18px;
}
.scene-halo {
  position: absolute;
  z-index: -2;
  inset: 11% 3% 10%;
  border-radius: 47% 53% 61% 39% / 51% 43% 57% 49%;
  background: var(--lilac);
  transform: rotate(-7deg);
}
.scene-dots {
  position: absolute;
  z-index: -1;
  inset: 18% 11% 14%;
  background-image: radial-gradient(var(--purple) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.14;
  border-radius: 50%;
}
.welcome-scene .welcome-illustration {
  display: block;
  width: min(100%, 620px);
  height: auto;
  margin-inline: auto;
  aspect-ratio: 1;
  object-fit: contain;
}
.welcome-scene .art-label {
  position: absolute;
  z-index: 1;
  top: 15%;
  left: 3%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 22px #42364e16;
  font-size: clamp(12px, 1.3vw, 17px);
  font-weight: 850;
  transform: rotate(-6deg);
}
.welcome-scene .art-label .icon {
  width: 18px;
  height: 18px;
  color: var(--purple);
}
.welcome-scene figcaption {
  margin-top: -5px;
  color: var(--ink);
  text-align: center;
  font-size: clamp(14px, 1.4vw, 21px);
  font-weight: 800;
}
@media (max-width: 680px) {
  .welcome-scene {
    width: min(100%, 420px);
    justify-self: center;
    margin-block: 14px;
  }
  .welcome-scene .art-label { top: 10%; }
}