/* YoungReader: hero chooser and lessons page. Colours come from /theme.css; buttons and bars use var(--grad). */

/* no caret, no text highlight, no grey tap flash (nothing here is typed into) */
html, body, div, p, span, h1, h2, h3, small, label, button, svg, b, img { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; caret-color: transparent; }
* { -webkit-tap-highlight-color: transparent; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; }  /* keyboard users keep a focus ring */

/* the game's own size: app.js sets --dvw / --dvh (1% of the screen's width / height) and lays an upright phone on its side (html.rot) */
html { --dvh: 1dvh; --dvw: 1vw; height: 100%; }
html.rot body { position: fixed; top: 0; left: var(--vhpx); width: var(--vwpx); height: var(--vhpx); transform: rotate(90deg); transform-origin: 0 0; overflow: hidden; }
body { touch-action: manipulation; margin: 0; min-height: 100%; font-weight: 600; overflow-x: hidden; }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
.screen { min-height: calc(var(--dvh) * 100); }

/* ------------------------------------------------------------------ choose your hero */
.pick-music { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 10px; z-index: 3; width: 44px; height: 44px; }
.pick-close { position: absolute; top: calc(env(safe-area-inset-top) + 10px); left: 64px; z-index: 3; width: 44px; height: 44px; }
.topbar .close-btn { margin-left: calc(var(--dvw) * 1.4); }
#pick { position: relative; }
#pick { display: flex; flex-direction: column; align-items: center; padding: 18px 14px 26px; min-height: calc(var(--dvh) * 100); overflow: hidden; }
#pick > :not(.sky):not(.pick-music) { position: relative; z-index: 2; }
.logo { margin: 8px 0 0; font-size: clamp(2rem, 8vw, 3.2rem); font-weight: 900; letter-spacing: .5px; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.tag { margin: 2px 0 14px; font-size: clamp(1.05rem, 4vw, 1.4rem); font-weight: 800; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .85); }
#pick .logo { filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .85)); }
.heroes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: min(100%, 760px); }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px 10px; border: 3px solid #fff; border-radius: 22px; background: rgba(255, 255, 255, .82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  box-shadow: 0 5px 0 rgba(28, 17, 101, .25), 0 10px 18px rgba(28, 17, 101, .15); transition: transform .15s, box-shadow .15s; }
.hero:hover { transform: translateY(-3px); }
.hero:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(28, 17, 101, .25); }
.hero .hs { width: 100%; height: auto; max-height: calc(var(--dvh) * 34); pointer-events: none; }
.hero .nm { display: block; border-radius: 999px; padding: 4px 16px; background: var(--grad); color: #fff; font-weight: 800; font-size: clamp(.95rem, 3.4vw, 1.2rem); }
.hero.boy { background: linear-gradient(rgba(79, 140, 255, .2), transparent 60%), rgba(255, 255, 255, .82); } .hero.girl { background: linear-gradient(rgba(255, 122, 184, .2), transparent 60%), rgba(255, 255, 255, .82); }
.hero.chosen { transform: scale(1.06); box-shadow: 0 0 0 4px var(--violet), 0 10px 22px rgba(58, 43, 208, .35); }
.heroes.done .hero:not(.chosen) { opacity: .35; transition: opacity .3s; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes cheer { 0%, 100% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-18px) rotate(-4deg); } 65% { transform: translateY(-8px) rotate(4deg); } }
html.wide #pick { padding: calc(var(--dvh) * 1.5) 10px calc(var(--dvh) * 2); }       /* on its side (a phone): the six in one row */
html.wide .logo { font-size: calc(var(--dvh) * 8); margin: 0; } html.wide .tag { margin: 0 0 calc(var(--dvh) * 1.5); font-size: calc(var(--dvh) * 4.6); }
html.wide .heroes { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; width: 100%; }
html.wide .hero .hs { max-height: calc(var(--dvh) * 62); } html.wide .hero .nm { padding: 2px 10px; font-size: calc(var(--dvh) * 4.4); }
}

/* ------------------------------------------------------------------ the lessons page */
#lessons { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; color: #221c33;
  display: grid; grid-template-columns: 1fr; grid-template-rows: auto 1fr; padding: 0 calc(var(--dvw) * 2) calc(var(--dvh) * 3); }

.sky { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: linear-gradient(#7fcdff 0%, #bfe6ff 48%, #eefbe0 100%); }
.sun { position: absolute; top: -8%; left: 6%; width: calc(var(--dvh) * 30); height: calc(var(--dvh) * 30); border-radius: 50%; background: radial-gradient(circle, #fff6b8 0 38%, rgba(255, 238, 140, .55) 40%, transparent 70%); animation: glow 5s ease-in-out infinite; }
.cloud { position: absolute; width: calc(var(--dvh) * 24); height: calc(var(--dvh) * 8); border-radius: 999px; background: #fff; opacity: .92; animation: drift 70s linear infinite; }
.cloud::before, .cloud::after { content: ''; position: absolute; background: #fff; border-radius: 50%; }
.cloud::before { width: 42%; height: 150%; left: 14%; top: -70%; } .cloud::after { width: 32%; height: 120%; left: 52%; top: -45%; }
.c1 { top: 12%; left: -30%; } .c2 { top: 30%; left: -60%; animation-duration: 95s; animation-delay: -30s; transform: scale(.7); } .c3 { top: 6%; left: -10%; animation-duration: 120s; animation-delay: -70s; transform: scale(.55); }
.hill { position: absolute; bottom: -18%; border-radius: 50%; }
.h1 { left: -12%; width: 70%; height: 46%; background: #8fd36b; } .h2 { right: -16%; width: 80%; height: 38%; background: #6cc25a; }
@keyframes drift { to { margin-left: 150vw; } }
@keyframes glow { 50% { transform: scale(1.08); opacity: .85; } }

.topbar { position: relative; z-index: 2; grid-column: 1 / -1; display: flex; align-items: center; gap: calc(var(--dvw) * 1.4); padding: calc(var(--dvh) * 2.5) 56px calc(var(--dvh) * 1.2) 0; }
.avatar { flex: none; width: calc(var(--dvh) * 12); height: calc(var(--dvh) * 12); min-width: 44px; min-height: 44px; border-radius: 50%; padding: 0; border: 3px solid #fff; overflow: hidden; position: relative;
  background: #fff; box-shadow: 0 3px 0 #1c1165, 0 6px 12px rgba(28, 17, 101, .3); }
.avatar img { position: absolute; width: 190%; left: -37%; top: -12%; pointer-events: none; }
.title { flex: 1; margin: 0; font-size: calc(var(--dvh) * 6.2); font-weight: 900; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); letter-spacing: .4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: calc(var(--dvh) * 1) 14px; border-radius: 999px; background: #fff; border: 2px solid #ffd978; box-shadow: 0 3px 0 #e0b24a; font-size: calc(var(--dvh) * 5.2); font-weight: 900; color: #6b4a00; }
.chip svg { width: calc(var(--dvh) * 5.6); height: calc(var(--dvh) * 5.6); }
.round { flex: none; width: calc(var(--dvh) * 10); height: calc(var(--dvh) * 10); min-width: 40px; min-height: 40px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: 0 3px 0 #1c1165; }
.round:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c1165; }
.round svg { width: 55%; height: 55%; }

.hero-big { height: calc(var(--dvh) * 60); max-width: 100%; display: flex; align-items: flex-end; transform-origin: 50% 100%; filter: drop-shadow(0 6px 6px rgba(28, 17, 101, .18)); }
.hero-big .hs { height: 100%; width: auto; max-width: 100%; }
.hero-big.jump { animation: cheer .55s ease-in-out 1; }
.avatar.jump { animation: cheer .55s ease-in-out 1; }

.panel { position: relative; z-index: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; padding: calc(var(--dvh) * 2.5) calc(var(--dvw) * 3.5) calc(var(--dvh) * 2.5); border-radius: 26px;
  background: rgba(255, 255, 255, .68); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 24px rgba(28, 17, 101, .15); }
.pager { display: flex; align-items: center; justify-content: center; gap: calc(var(--dvw) * 1.6); width: 100%; animation: slide .3s ease-out; }
.grid { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: calc(var(--dvh) * 3) calc(var(--dvw) * 1.2); padding-bottom: calc(var(--dvh) * 1.5); }
@keyframes slide { from { opacity: 0; transform: translateX(24px); } }

/* the lesson buttons: glossy candy buttons in the house gradient; locked ones are grey with a padlock */
.lesson { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 1); aspect-ratio: 1 / .95; padding: 6px 4px 8px; border: 0; border-radius: 20px; color: #fff; overflow: hidden;
  background: var(--grad); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #1c1165, 0 calc(var(--dvh) * 2.6) 14px rgba(28, 17, 101, .32), inset 0 2px 0 rgba(255, 255, 255, .35);
  transition: transform .12s, box-shadow .12s; }
.lesson::before { content: ''; position: absolute; left: 6%; right: 6%; top: 3%; height: 38%; border-radius: 20px 20px 60% 60%; background: linear-gradient(rgba(255, 255, 255, .42), rgba(255, 255, 255, 0)); pointer-events: none; }
.lesson::after { content: ''; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transform: skewX(-18deg); animation: shine 4.5s ease-in-out infinite; pointer-events: none; }
.lesson:nth-child(3n)::after { animation-delay: 1.2s; } .lesson:nth-child(3n+1)::after { animation-delay: 2.4s; }
@keyframes shine { 0%, 60% { left: -60%; } 100% { left: 130%; } }
.lesson:hover { transform: translateY(-3px); }
.lesson:active { transform: translateY(calc(var(--dvh) * 1.2)); box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165, 0 4px 8px rgba(28, 17, 101, .3), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lesson .num { position: relative; display: grid; place-items: center; width: calc(var(--dvh) * 9.5); height: calc(var(--dvh) * 9.5); min-width: 30px; min-height: 30px; border-radius: 50%; background: #fff; color: #3a2bd0; font-size: max(16px, calc(var(--dvh) * 5.6)); font-weight: 900; box-shadow: 0 2px 0 rgba(0, 0, 0, .18); }
.lesson .ttl { position: relative; font-size: max(10px, calc(var(--dvh) * 3)); font-weight: 800; line-height: 1.12; text-align: center; text-shadow: 0 1px 0 rgba(0, 0, 0, .3); padding: 0 2px; }
.lesson.locked { background: linear-gradient(135deg, #c9c3dc, #a29bb8 60%, #8a83a1); box-shadow: 0 calc(var(--dvh) * 1.5) 0 #6d6685, 0 calc(var(--dvh) * 2.6) 14px rgba(60, 50, 90, .25), inset 0 2px 0 rgba(255, 255, 255, .35); }
.lesson.locked::after { display: none; }
.lesson.locked .num { background: #ece9f5; color: #7a7390; }
.lesson.locked .num svg { width: 58%; height: 58%; }
.lesson.locked .ttl { opacity: .85; }
.lesson.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-6px) rotate(-2deg); } 40%, 80% { transform: translateX(6px) rotate(2deg); } }

.toast { position: absolute; z-index: 5; left: 50%; bottom: calc(var(--dvh) * 5); transform: translateX(-50%); max-width: 80%; padding: calc(var(--dvh) * 1.6) calc(var(--dvw) * 2.4); border-radius: 999px; background: var(--grad); color: #fff; font-weight: 800; font-size: calc(var(--dvh) * 4.4); text-align: center; box-shadow: 0 6px 18px rgba(28, 17, 101, .4); animation: pop .25s ease-out; }
@keyframes pop { from { transform: translateX(-50%) scale(.8); opacity: 0; } }

html.short #hello .hero-big { height: calc(var(--dvh) * 66); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }

/* ------------------------------------------------------------------ the start page: one tap starts the music and (on a phone) goes full screen and landscape */
#start { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; color: #1c1165; }
.start-inner { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--dvh) * 2); padding: 0 16px; text-align: center; }
.big-logo { font-size: calc(var(--dvh) * 15); margin: 0; filter: drop-shadow(0 3px 0 rgba(255, 255, 255, .85)); }
.tag2 { margin: 0; font-size: calc(var(--dvh) * 5); font-weight: 800; color: #1c1165; text-shadow: 0 2px 0 rgba(255, 255, 255, .8); }
.crowd { display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--dvw) * 1); }
.crowd .hs { height: calc(var(--dvh) * 30); width: auto; max-width: calc(var(--dvw) * 15); filter: drop-shadow(0 5px 5px rgba(28, 17, 101, .2)); }
.start-btn { position: relative; overflow: hidden; border: 0; border-radius: 999px; padding: calc(var(--dvh) * 2.4) calc(var(--dvh) * 10); font-size: calc(var(--dvh) * 7); font-weight: 900; color: #fff; letter-spacing: .5px; background: var(--grad);
  box-shadow: 0 calc(var(--dvh) * 1.6) 0 #1c1165, 0 calc(var(--dvh) * 2.8) 16px rgba(28, 17, 101, .35), inset 0 2px 0 rgba(255, 255, 255, .35); animation: beat 1.6s ease-in-out infinite; }
.start-btn::after { content: ''; position: absolute; top: 0; left: -60%; width: 35%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg); animation: shine 3.2s ease-in-out infinite; }
.start-btn:active { transform: translateY(calc(var(--dvh) * 1.2)); animation: none; box-shadow: 0 calc(var(--dvh) * .3) 0 #1c1165, inset 0 2px 0 rgba(255, 255, 255, .35); }
@keyframes beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }

/* six heroes, six different actions: each one moves its own arms, legs and head (the pictures are inline SVG with groups armL armR legL legR hd bd) */
.hs { display: block; overflow: visible; }
.hs .armL { transform-origin: 88px 206px; } .hs .armR { transform-origin: 152px 204px; }
.hs .legL { transform-origin: 102px 258px; } .hs .legR { transform-origin: 138px 258px; }
.hs .hd { transform-origin: 120px 172px; } .hs .bd { transform-origin: 120px 270px; }
/* Arun waves hello */
.act-wave .armR { animation: a-wave .7s ease-in-out infinite alternate; } .act-wave .hd { animation: a-tilt 1.4s ease-in-out infinite alternate; }
@keyframes a-wave { from { transform: rotate(-24deg); } to { transform: rotate(16deg); } }
@keyframes a-tilt { from { transform: rotate(-3deg); } to { transform: rotate(4deg); } }
/* Bala dances: hips swing, arms and legs take turns */
.act-dance { animation: a-sway .9s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.act-dance .armR { animation: a-wave .45s ease-in-out infinite alternate; } .act-dance .armL { animation: a-armL-dance .45s ease-in-out infinite alternate-reverse; }
.act-dance .legL { animation: a-step .45s ease-in-out infinite alternate; } .act-dance .legR { animation: a-step .45s ease-in-out infinite alternate-reverse; } .act-dance .hd { animation: a-tilt .9s ease-in-out infinite alternate-reverse; }
@keyframes a-sway { from { transform: translateX(-9px) rotate(-4deg); } to { transform: translateX(9px) rotate(4deg); } }
@keyframes a-armL-dance { from { transform: rotate(-10deg); } to { transform: rotate(70deg); } }
@keyframes a-step { from { transform: rotate(0) translateY(0); } to { transform: rotate(-9deg) translateY(-7px); } }
/* Shan pumps his fist: yes! */
.act-fist { animation: a-bob .8s ease-in-out infinite; transform-origin: 50% 100%; }
.act-fist .armR { animation: a-pump .8s ease-in-out infinite; } .act-fist .hd { animation: a-nod .8s ease-in-out infinite; }
@keyframes a-pump { 0%, 100% { transform: rotate(26deg); } 30% { transform: rotate(-30deg); } 45% { transform: rotate(-22deg); } 60% { transform: rotate(-32deg); } }
@keyframes a-bob { 0%, 100% { transform: translateY(0); } 30%, 60% { transform: translateY(-8px); } }
@keyframes a-nod { 0%, 100% { transform: rotate(0); } 30%, 60% { transform: rotate(-4deg) translateY(-2px); } }
/* Diya cheers with both arms up and jumps */
.act-cheer { animation: a-jump 1s ease-in-out infinite; transform-origin: 50% 100%; }
.act-cheer .armL { animation: a-up-L .25s ease-in-out infinite alternate; } .act-cheer .armR { animation: a-up-R .25s ease-in-out infinite alternate-reverse; } .act-cheer .hd { animation: a-tilt .5s ease-in-out infinite alternate; }
@keyframes a-jump { 0%, 100% { transform: translateY(0) scale(1.03, .97); } 45% { transform: translateY(-22px) scale(.98, 1.03); } }
@keyframes a-up-L { from { transform: rotate(82deg); } to { transform: rotate(106deg); } }
@keyframes a-up-R { from { transform: rotate(-46deg); } to { transform: rotate(-30deg); } }
/* Laya does jumping jacks */
.act-jacks { animation: a-hop .7s ease-in-out infinite; transform-origin: 50% 100%; }
.act-jacks .armL { animation: a-jack-L .7s ease-in-out infinite; } .act-jacks .armR { animation: a-jack-R .7s ease-in-out infinite; }
.act-jacks .legL { animation: a-leg-L .7s ease-in-out infinite; } .act-jacks .legR { animation: a-leg-R .7s ease-in-out infinite; }
@keyframes a-hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes a-jack-L { 0%, 100% { transform: rotate(98deg); } 50% { transform: rotate(0); } }
@keyframes a-jack-R { 0%, 100% { transform: rotate(-36deg); } 50% { transform: rotate(98deg); } }
@keyframes a-leg-L { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(0); } }
@keyframes a-leg-R { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(0); } }
/* Gita twirls around with her arms swinging */
.act-twirl { animation: a-twirl 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.act-twirl .armR { animation: a-wave .6s ease-in-out infinite alternate; } .act-twirl .armL { animation: a-armL-dance .6s ease-in-out infinite alternate; }
@keyframes a-twirl { 0%, 45% { transform: rotateY(0) translateY(0); } 62% { transform: rotateY(180deg) translateY(-14px); } 80%, 100% { transform: rotateY(360deg) translateY(0); } }

/* the chooser's sky: stars twinkle and balloons float up */
.tw { position: absolute; width: calc(var(--dvh) * 4); height: calc(var(--dvh) * 4); min-width: 16px; min-height: 16px; background: #fff8c4; clip-path: polygon(50% 0, 62% 36%, 100% 38%, 70% 60%, 80% 100%, 50% 76%, 20% 100%, 30% 60%, 0 38%, 38% 36%); animation: twinkle 2.4s ease-in-out infinite; }
.t1 { top: 8%; left: 8%; } .t2 { top: 22%; left: 86%; animation-delay: .6s; } .t3 { top: 46%; left: 4%; animation-delay: 1.1s; } .t4 { top: 14%; left: 62%; animation-delay: 1.7s; } .t5 { top: 58%; left: 92%; animation-delay: .3s; } .t6 { top: 34%; left: 30%; animation-delay: 1.4s; }
@keyframes twinkle { 0%, 100% { transform: scale(.5) rotate(0); opacity: .5; } 50% { transform: scale(1.1) rotate(25deg); opacity: 1; } }
.balloon { position: absolute; bottom: -20%; width: calc(var(--dvh) * 9); height: calc(var(--dvh) * 11); min-width: 34px; min-height: 42px; border-radius: 50% 50% 48% 48%; animation: rise 16s linear infinite; }
.balloon::after { content: ''; position: absolute; left: 50%; top: 100%; width: 2px; height: calc(var(--dvh) * 12); background: rgba(28, 17, 101, .35); }
.bl1 { left: 12%; background: radial-gradient(circle at 35% 30%, #ffb3d6, #ff5fa6); } .bl2 { left: 38%; background: radial-gradient(circle at 35% 30%, #fff1a0, #ffc83d); animation-delay: -5s; animation-duration: 19s; }
.bl3 { left: 68%; background: radial-gradient(circle at 35% 30%, #b9d8ff, #4f8cff); animation-delay: -9s; } .bl4 { left: 88%; background: radial-gradient(circle at 35% 30%, #c6f5d9, #3fc79a); animation-delay: -13s; animation-duration: 21s; }
@keyframes rise { 0% { transform: translate(0, 0); } 50% { transform: translate(18px, -70vh) rotate(4deg); } 100% { transform: translate(-6px, -150vh) rotate(-3deg); } }

.heroes .hero.chosen .hs { animation: cheer .5s ease-in-out 2; }

/* signposts: a wooden arrow board on a post, "Next" at the right end of a page of lessons and "Back" at the left end */
.sign { flex: none; width: calc(var(--dvh) * 19); padding: 0; border: 0; background: none; display: flex; flex-direction: column; align-items: center; transform-origin: 50% 100%;
  filter: drop-shadow(0 2px 0 #5e3510) drop-shadow(0 5px 5px rgba(60, 35, 10, .3)); animation: sway 3s ease-in-out infinite alternate; }
.sign .board { width: 100%; height: calc(var(--dvh) * 11); display: grid; place-items: center; color: #fff; font-weight: 900; font-size: max(13px, calc(var(--dvh) * 4)); letter-spacing: .5px; text-shadow: 0 2px 0 rgba(94, 53, 16, .8);
  background: repeating-linear-gradient(#e3ab5e 0 7px, #d99a47 7px 9px, #e3ab5e 9px 15px); }
.sign.next .board { clip-path: polygon(0 12%, 70% 12%, 70% 0, 100% 50%, 70% 100%, 70% 88%, 0 88%); padding-right: 22%; }
.sign.back .board { clip-path: polygon(100% 12%, 30% 12%, 30% 0, 0 50%, 30% 100%, 30% 88%, 100% 88%); padding-left: 22%; }
.sign .post { width: calc(var(--dvh) * 3.4); min-width: 12px; height: calc(var(--dvh) * 15); margin-top: -2px; border-radius: 3px 3px 0 0; background: linear-gradient(90deg, #8a561f, #c98b4a 45%, #8a561f); }
.sign:active { transform: scale(.94); }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }

/* the greeting page: the hero says hi, and one Next signpost leads to the lessons */
#hello { position: relative; height: calc(var(--dvh) * 100); overflow: hidden; color: #1c1165; display: flex; align-items: center; justify-content: center; }
.hello-in { position: relative; z-index: 2; width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: calc(var(--dvw) * 3); padding: 0 calc(var(--dvw) * 5) calc(var(--dvh) * 4); }
#hello .hero-big { height: calc(var(--dvh) * 74); flex: none; }
.hello-bubble { position: relative; align-self: center; flex: 0 1 auto; max-width: calc(var(--dvw) * 34); padding: calc(var(--dvh) * 3) calc(var(--dvw) * 2.4); border-radius: 32px; background: #fff; box-shadow: 0 6px 0 rgba(28, 17, 101, .15); font-size: calc(var(--dvh) * 8); font-weight: 900; line-height: 1.15; text-align: center; color: #1c1165; animation: pop2 .5s ease-out; }
.hello-bubble::after { content: ''; position: absolute; left: -12px; top: 50%; width: 26px; height: 26px; background: #fff; transform: translateY(-50%) rotate(45deg); border-radius: 0 0 0 7px; }
@keyframes pop2 { from { transform: scale(.7); opacity: 0; } }
#helloSign { flex: none; }
#hello .sign { width: calc(var(--dvh) * 28); }
#hello .sign .board { height: calc(var(--dvh) * 16); font-size: max(16px, calc(var(--dvh) * 6.4)); }
#hello .sign .post { height: calc(var(--dvh) * 20); width: calc(var(--dvh) * 4.6); }