@font-face{font-family:Andika;font-weight:400;font-display:swap;src:url(fonts/andika-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Andika;font-weight:400;font-display:swap;src:url(fonts/andika-latin-ext-400-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Andika;font-weight:700;font-display:swap;src:url(fonts/andika-latin-700-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Andika;font-weight:700;font-display:swap;src:url(fonts/andika-latin-ext-700-normal.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:Fredoka;font-weight:500;font-display:swap;src:url(fonts/fredoka-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:600;font-display:swap;src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:Fredoka;font-weight:700;font-display:swap;src:url(fonts/fredoka-latin-700-normal.woff2) format("woff2")}

:root{--ink:#2b2a4c;--mute:#6a6a8e;--sky1:#8fd8ff;--sky2:#e6f7ff;--sun:#ffd23f;--coral:#ff6b4a;--pink:#ff5fa2;--purple:#8a63e8;--blue:#3a9bff;--green:#3dc47e;--orange:#ff9f1c;--card:#fff;--line:#e6e2f5;--adult:#d8f5df;--adult-ink:#1f6b3a;--lc:#ff6b4a;--r:26px;--pop:0 8px 0 rgba(43,42,76,.14)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;color:var(--ink);font-family:Andika,system-ui,sans-serif;font-size:18px;line-height:1.4;overscroll-behavior:none;touch-action:manipulation;-webkit-user-select:none;user-select:none;background:linear-gradient(180deg,var(--sky1) 0%,var(--sky2) 70%,#f4fcff 100%) fixed}
input,textarea{-webkit-user-select:text;user-select:text}
#app{min-height:100dvh;position:relative;z-index:1}
button{font:inherit;color:inherit;cursor:pointer}
button:disabled{opacity:.45;cursor:default}
h1,h2,h3,.btn,.daylab,.ltitle,.who,.tag,.menuitem b,.cid,.timer,.stats b{font-family:Fredoka,Andika,system-ui,sans-serif}
h1{font-size:1.7rem;margin:0;font-weight:700}h2{font-size:1.2rem;margin:0 0 .5rem;font-weight:600}
.hint{color:var(--mute);font-size:.92rem}.small{font-size:.86rem;color:var(--mute)}

/* scenery */
.scenery{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.sunball{position:absolute;right:6%;top:5%;width:clamp(70px,10vw,120px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#fff6b0 0 45%,var(--sun) 46%);box-shadow:0 0 0 14px rgba(255,210,63,.28),0 0 0 30px rgba(255,210,63,.14);animation:glow 4s ease-in-out infinite}
@keyframes glow{50%{transform:scale(1.06)}}
.cloud{position:absolute;height:44px;width:130px;background:#fff;border-radius:44px;opacity:.95;filter:drop-shadow(0 6px 0 rgba(120,170,220,.25))}
.cloud::before,.cloud::after{content:"";position:absolute;background:#fff;border-radius:50%}
.cloud::before{width:62px;height:62px;left:18px;top:-30px}.cloud::after{width:48px;height:48px;left:62px;top:-20px}
.cloud.c1{top:9%;left:-160px;animation:drift 60s linear infinite}
.cloud.c2{top:22%;left:-160px;transform:scale(.7);animation:drift 80s linear -30s infinite}
.cloud.c3{top:14%;left:-160px;transform:scale(1.2);animation:drift 100s linear -60s infinite}
@keyframes drift{to{translate:calc(100vw + 400px) 0}}
.hills{position:absolute;left:0;right:0;bottom:0;height:min(30vh,250px)}.hills svg{width:100%;height:100%;display:block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;border:0;background:#fff;color:var(--ink);border-radius:20px;padding:.7rem 1.2rem;font-weight:600;font-size:1.05rem;min-height:54px;box-shadow:0 5px 0 rgba(43,42,76,.18);transition:transform .08s,box-shadow .08s}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 rgba(43,42,76,.18)}
.btn.primary{background:var(--green);color:#fff;box-shadow:0 5px 0 #25935a}
.btn.primary:active:not(:disabled){box-shadow:0 1px 0 #25935a}
.btn.danger{background:#fff;color:#c62f2f}
.btn.sun{background:var(--sun)}
.btn.big{min-height:68px;font-size:1.3rem;padding:.8rem 1.8rem;border-radius:26px}
.ctl{width:58px;height:58px;border-radius:50%;border:0;background:var(--blue);color:#fff;font-size:28px;display:grid;place-items:center;flex:none;box-shadow:0 5px 0 #1f6fc2}
.ctl:active{transform:translateY(4px);box-shadow:0 1px 0 #1f6fc2}
.ctl.quiet{background:#fff;color:var(--ink);box-shadow:0 5px 0 rgba(43,42,76,.18)}
.ctl.pause{background:var(--orange);box-shadow:0 5px 0 #c97800}
.ctl svg,.bigbtn svg,.btn svg{display:block}
.bigbtn{width:120px;height:120px;border-radius:50%;border:0;background:var(--green);color:#fff;font-size:64px;display:grid;place-items:center;box-shadow:0 9px 0 #25935a}
.bigbtn:active{transform:translateY(7px);box-shadow:0 2px 0 #25935a}

/* mascot */
.mascot{width:clamp(90px,14vw,190px);flex:none;transform-origin:50% 100%}
.libo{display:block;width:100%;height:auto;overflow:visible}
.libo .eyes{transform-box:fill-box;transform-origin:center;animation:blink 4.5s infinite}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.08)}}
.libo .armR{transform-box:fill-box;transform-origin:0% 60%;animation:wave 2.4s ease-in-out infinite}
@keyframes wave{0%,60%,100%{rotate:0deg}70%{rotate:-22deg}80%{rotate:6deg}90%{rotate:-18deg}}
.libo .mouth,.libo .tongue{transform-box:fill-box;transform-origin:50% 0}
.speaking .libo .mouth,.speaking .libo .tongue{animation:talk .3s ease-in-out infinite alternate}
@keyframes talk{from{transform:scaleY(.4)}to{transform:scaleY(1.05)}}
.speaking .mascot{animation:hop .7s ease-in-out infinite}
@keyframes hop{50%{transform:translateY(-10px) rotate(-2deg)}}
.mascot.float{animation:float 3.2s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-12px) rotate(2deg)}}

/* title blocks */
.blocks{display:inline-flex;gap:.3em .4em;align-items:center;flex-wrap:wrap;justify-content:center;font-family:Fredoka,sans-serif;font-weight:700;font-size:clamp(30px,5.4vw,60px)}
.blocks.sm{font-size:clamp(24px,4vw,38px)}
.blk{display:inline-grid;place-items:center;min-width:1.15em;height:1.3em;padding:0 .12em;border-radius:.3em;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.18);box-shadow:0 .1em 0 rgba(43,42,76,.22)}
.word{display:inline-flex;gap:.1em}.blocks.wrap .word{flex-wrap:wrap;justify-content:center;gap:.14em}

/* home */
.home{min-height:100dvh;display:flex;flex-direction:column;padding:max(16px,env(safe-area-inset-top)) 20px 28px}
.home header{display:flex;justify-content:center;padding:6px 0 0}
.logo{cursor:default}
.home main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:26px;max-width:1000px;width:100%;margin:0 auto}
.hero{display:flex;align-items:center;justify-content:center;gap:clamp(14px,4vw,56px);background:#fff;border:6px solid var(--lc);border-radius:44px;padding:clamp(14px,2.6vw,32px);box-shadow:var(--pop)}
.hero-letter{font-family:Andika,sans-serif;font-weight:700;color:var(--lc);line-height:1;display:flex;align-items:baseline;gap:.08em;font-size:clamp(100px,21vw,230px)}
.hero-letter .low{color:var(--ink);opacity:.82}
.hero-side{display:flex;flex-direction:column;align-items:center;gap:14px}
.daylab{font-size:1.35rem;font-weight:600;color:var(--ink);background:var(--sun);padding:.2rem 1rem;border-radius:99px}
.bigbtn.play{width:clamp(110px,16vw,170px);height:clamp(110px,16vw,170px);font-size:clamp(60px,9vw,96px);animation:nudge 3s ease-in-out infinite}
@keyframes nudge{0%,80%,100%{transform:none}86%{transform:scale(1.1) rotate(-5deg)}92%{transform:scale(1.05) rotate(4deg)}}
.days{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.dayc{position:relative;width:50px;height:50px;border-radius:50%;border:0;background:#fff;font-family:Fredoka,sans-serif;font-size:1.15rem;font-weight:700;color:var(--ink);display:grid;place-items:center;padding:0;box-shadow:0 4px 0 rgba(43,42,76,.16)}
.dayc.done{background:var(--c,var(--green));color:#fff}
.dayc.done::after{content:"";position:absolute;right:-4px;top:-4px;width:18px;height:18px;border-radius:50%;background:var(--sun) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%232b2a4c' d='M12 3l2.6 5.600 6.100.7-4.500 4.200 1.200 6L12 16.500 6.600 19.500l1.200-6L3.300 9.300l6.100-.7z'/%3E%3C/svg%3E") center/70% no-repeat}
.dayc.cur{outline:5px solid var(--c,var(--coral));outline-offset:2px;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.12)}}
.dayc:disabled{opacity:1;background:rgba(255,255,255,.88);color:rgba(43,42,76,.4);box-shadow:none}
.dayc.big{width:auto;height:auto;border-radius:20px;padding:.7rem .4rem;background:var(--c,#fff);color:#fff}
.dayc.big b{font-size:1.9rem;line-height:1;font-family:Fredoka,sans-serif}.dayc.big small{display:block;font-size:.75rem;opacity:.9}
.daysgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:12px}

/* lesson */
.lesson{height:100dvh;display:grid;grid-template-rows:auto 1fr auto;overflow:hidden}
.lbar{display:flex;align-items:center;gap:12px;margin:max(10px,env(safe-area-inset-top)) 12px 0;padding:8px 12px;background:rgba(255,255,255,.85);border-radius:99px;box-shadow:0 5px 0 rgba(43,42,76,.1)}
.ltitle{font-weight:600;color:var(--mute);white-space:nowrap}.ltitle b{color:var(--lc);margin-left:.4em;font-size:1.2em}
.dots{flex:1;display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.dots i{width:13px;height:13px;border-radius:50%;background:var(--line)}
.dots i.done{background:var(--lc)}.dots i.now{background:var(--sun);box-shadow:0 0 0 3px var(--ink);transform:scale(1.2)}
.ctrls{display:flex;gap:10px}
.stage{position:relative;display:flex;align-items:center;justify-content:center;gap:24px;min-height:0;padding:8px 16px}
.bigletter{font-family:Andika,sans-serif;font-weight:700;line-height:1;display:flex;align-items:baseline;gap:.06em;font-size:min(42vh,34vw);padding:.04em .22em .08em;background:#fff;border:6px solid var(--lc);border-radius:.2em;color:var(--lc);box-shadow:var(--pop)}
.bigletter .low{color:var(--ink);opacity:.82}
.speakicon{font-size:56px;color:var(--lc);opacity:.35}
.stage.speaking .bigletter{animation:bump .8s ease-in-out infinite}
.stage.speaking .speakicon{opacity:1;animation:bump .8s ease-in-out infinite}
@keyframes bump{50%{transform:scale(1.05) rotate(-1.5deg)}}
.cap{display:flex;align-items:flex-end;gap:10px;padding:6px 16px max(12px,env(safe-area-inset-bottom));position:relative}
.cap .mascot{width:clamp(80px,11vw,140px);margin-bottom:-4px}
.bubble{position:relative;flex:1;background:#fff;border-radius:30px;padding:14px 22px 16px;text-align:center;box-shadow:var(--pop);min-height:104px;display:flex;flex-direction:column;justify-content:center}
.bubble::before{content:"";position:absolute;left:-14px;bottom:30px;border:14px solid transparent;border-right-color:#fff;border-left:0}
.lesson.adult .bubble{background:var(--adult)}.lesson.adult .bubble::before{border-right-color:var(--adult)}
.bubble .who{font-size:.9rem;font-weight:600;color:var(--adult-ink);min-height:1.2em}
.bubble .hausa{font-size:clamp(22px,3.4vw,42px);font-weight:700;line-height:1.25}
.bubble .eng{color:var(--mute);font-size:1rem;min-height:1.1em}
.bubble .note{color:#a35f00;font-size:.85rem;min-height:1.1em}
.bubble .bar{position:absolute;left:24px;right:24px;bottom:7px;height:7px;border-radius:4px;background:rgba(43,42,76,.08);overflow:hidden}
.bubble .bar i{display:block;height:100%;width:0;border-radius:4px;background:linear-gradient(90deg,var(--coral),var(--sun),var(--green))}
.lesson.finished .cap{visibility:hidden}
.doneview{display:flex;flex-direction:column;align-items:center;gap:18px}
.doneview .mascot{width:min(40vh,60vw);animation:hop .9s ease-in-out infinite}
.stars{display:flex;gap:10px;font-size:min(9vh,14vw);color:var(--sun)}
.stars span{animation:bump 1s ease-in-out infinite}.stars span:nth-child(2){animation-delay:.15s}.stars span:nth-child(3){animation-delay:.3s}
.stars svg{filter:drop-shadow(0 4px 0 rgba(0,0,0,.14))}

/* picture words */
.wcards{display:flex;gap:clamp(12px,3vw,32px);align-items:center;justify-content:center;height:100%;width:100%;max-width:1000px}
.wcard{flex:1 1 0;max-width:420px;max-height:100%;display:flex;flex-direction:column;align-items:center;gap:6px;background:#fff;border:6px solid var(--lc);border-radius:34px;padding:12px 12px 8px;box-shadow:var(--pop);animation:float 4s ease-in-out infinite}
.wcard:nth-child(2){animation-delay:-1.6s}
.wcard:active{transform:scale(.97)}
.wcard img{display:block;width:100%;height:auto;max-height:min(34vh,300px);object-fit:contain;border-radius:20px;pointer-events:none}
.wword{font-family:Andika,sans-serif;font-weight:700;font-size:clamp(34px,7vh,64px);line-height:1.1;color:var(--ink)}
.wword b{color:var(--lc)}
.speaking .wcard{animation:bump .8s ease-in-out infinite}
/* tracing */
.tracewrap{position:relative;width:min(100%,900px);height:100%;max-height:100%;background:#fff;border:6px solid var(--lc);border-radius:36px;box-shadow:var(--pop)}
.tracewrap canvas{position:absolute;inset:0;touch-action:none}
.clearbtn{position:absolute;right:10px;bottom:10px;background:var(--sun);color:var(--ink);width:54px;height:54px;font-size:26px;box-shadow:0 5px 0 #c99a00}
.popstar{position:absolute;left:50%;top:50%;font-size:min(30vh,30vw);color:var(--sun);transform:translate(-50%,-50%) scale(0);opacity:0;pointer-events:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.18))}
.popstar.pop{animation:pop 1.2s ease-out forwards}
@keyframes pop{0%{transform:translate(-50%,-50%) scale(0) rotate(-40deg);opacity:1}40%{transform:translate(-50%,-50%) scale(1.2) rotate(8deg);opacity:1}100%{transform:translate(-50%,-50%) scale(1) rotate(0);opacity:0}}
.cf{position:fixed;width:11px;height:15px;border-radius:3px;z-index:60;pointer-events:none}

/* matching */
.match{display:flex;flex-direction:column;align-items:center;justify-content:space-around;height:100%;width:100%;max-width:800px}
.tile{width:min(26vh,34vw);height:min(26vh,34vw);display:grid;place-items:center;font-family:Andika,sans-serif;font-size:min(18vh,22vw);font-weight:700;background:var(--lc);color:#fff;border-radius:30px;box-shadow:0 9px 0 rgba(0,0,0,.22);touch-action:none;cursor:grab;position:relative;z-index:2;animation:float 3s ease-in-out infinite}
.tile.drag{cursor:grabbing;z-index:5;animation:none}
.slots{display:flex;gap:min(5vw,40px)}
.slot{width:min(24vh,28vw);height:min(24vh,28vw);display:grid;place-items:center;font-family:Andika,sans-serif;font-size:min(16vh,19vw);font-weight:700;border:6px dashed var(--ink);border-radius:30px;color:var(--ink);background:rgba(255,255,255,.92)}
.slot.ok{border-style:solid;border-color:var(--green);background:#d8f5df}
.slot.no{animation:shake .4s;border-color:var(--coral)}
@keyframes shake{25%{transform:translateX(-12px)}75%{transform:translateX(12px)}}

/* pages: staff, recorder, settings */
.page{max-width:780px;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 16px 90px;display:flex;flex-direction:column;gap:14px}
.phead{display:flex;align-items:center;gap:10px;padding:8px 14px;background:rgba(255,255,255,.88);border-radius:99px;box-shadow:0 5px 0 rgba(43,42,76,.1)}.phead h1{flex:1;font-size:1.4rem}.pn{color:var(--mute);font-weight:700;font-family:Fredoka,sans-serif}
.card{background:#fff;border-radius:var(--r);padding:18px;box-shadow:var(--pop)}
.card.big{padding:22px}
.menu{display:grid;gap:14px}
.menuitem{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:#fff;border:0;border-radius:var(--r);padding:18px 20px;text-align:left;box-shadow:var(--pop);border-left:14px solid var(--c,var(--blue))}
.menuitem:nth-child(2){--c:var(--green)}.menuitem:nth-child(3){--c:var(--orange)}.menuitem:nth-child(4){--c:var(--purple)}.menuitem:nth-child(5){--c:var(--pink)}
.menuitem:active{transform:translateY(4px);box-shadow:0 3px 0 rgba(43,42,76,.14)}
.menuitem b{font-size:1.25rem}.menuitem span{color:var(--mute);font-size:.95rem}
.row{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.row.center{justify-content:center}.row.between{justify-content:space-between;margin:0}
.field{display:flex;flex-direction:column;gap:4px}.field span{font-weight:700;font-size:.9rem;color:var(--mute)}
input[type=text],textarea{font:inherit;padding:.7rem .9rem;border:3px solid var(--line);border-radius:16px;background:#fff;color:var(--ink);width:100%}
input[type=text]:focus,textarea:focus{outline:0;border-color:var(--blue)}
.radio{display:flex;align-items:center;gap:.5rem;padding:.45rem 0}.radio input{width:24px;height:24px;accent-color:var(--green)}
.prog{display:flex;align-items:center;gap:12px;margin-top:14px;font-weight:700;font-family:Fredoka,sans-serif}
.progbar{flex:1;height:18px;border-radius:9px;background:var(--line);overflow:hidden}.progbar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--coral),var(--sun),var(--green))}
.cliplist{display:grid;gap:10px}
.clipitem{display:grid;grid-template-columns:32px auto 1fr;grid-template-areas:"tick cid dur" "text text text" "tags tags tags";gap:2px 10px;align-items:center;background:#fff;border:0;border-radius:20px;padding:12px 14px;text-align:left;box-shadow:0 5px 0 rgba(43,42,76,.1)}
.clipitem.done{background:#eefaf1}
.tick{grid-area:tick;width:28px;height:28px;border-radius:50%;border:3px solid var(--line);display:grid;place-items:center;color:#fff;font-size:17px}
.clipitem.done .tick{background:var(--green);border-color:var(--green)}
.cid{grid-area:cid;font-weight:600;color:var(--blue)}.dur{grid-area:dur;text-align:right;color:var(--mute);font-size:.85rem}
.ctext{grid-area:text;font-size:1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{display:inline-block;font-size:.76rem;font-weight:600;padding:2px 10px;border-radius:99px;background:#dcecff;color:#1f5fa8;margin-right:4px}
.tag.adult{background:var(--adult);color:var(--adult-ink)}.tag.later{background:#fff1c2;color:#8a5a00}.tag.note{background:#ffe0ea;color:#b02a5b}
.clipitem .tags{grid-area:tags;margin:2px 0 0}.tags{margin-bottom:8px}
.hausa-big{font-size:clamp(26px,5vw,38px);font-weight:700;line-height:1.3;margin:6px 0 12px}
.mean{color:var(--ink)}.mean.small{color:var(--mute);font-size:.88rem;margin-top:4px}
.recbox{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.recbtn{width:136px;height:136px;border-radius:50%;border:0;background:var(--coral);color:#fff;font-size:70px;display:grid;place-items:center;box-shadow:0 9px 0 #b9442a}
.recbtn:active{transform:translateY(6px);box-shadow:0 3px 0 #b9442a}
.recbtn.again{background:#e8825f}
.recbtn.on{background:#d8262f;animation:rp 1.1s ease-in-out infinite}
@keyframes rp{50%{box-shadow:0 9px 0 #b9442a,0 0 0 16px rgba(216,38,47,.2)}}
.timer{font-weight:600}.meter{width:min(100%,360px);height:14px;border-radius:7px;background:var(--line);overflow:hidden}.meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--sun),var(--coral));transition:width .06s}
.status{color:var(--mute);font-size:.92rem}.status.ok{color:#1f8a52;font-weight:700}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}.stats b{display:block;font-size:2.2rem;color:var(--blue)}.stats span{font-size:.8rem;color:var(--mute)}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);background:var(--ink);color:#fff;padding:.75rem 1.2rem;border-radius:99px;opacity:0;transition:.25s;z-index:99;max-width:90vw;text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:640px){.lbar{flex-wrap:wrap;border-radius:28px}.dots{order:5;flex-basis:100%}.hero{flex-direction:column;border-radius:36px}.stage{flex-direction:column;gap:8px}.speakicon{display:none}.cap .mascot{width:70px}.bubble{padding:10px 14px 14px;min-height:90px}.cloud.c3{display:none}}
@media (max-height:520px){.bubble{min-height:70px;padding:6px 14px 12px}.ctl{width:46px;height:46px;font-size:22px}.cap .mascot{width:70px}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;animation-iteration-count:1!important}}

/* language switch */
.langtoggle{display:inline-flex;background:#fff;border-radius:99px;padding:4px;box-shadow:0 4px 0 rgba(43,42,76,.14)}
.langtoggle .lang{border:0;background:transparent;border-radius:99px;padding:.3rem .8rem;font-family:Fredoka,sans-serif;font-weight:700;font-size:.95rem;color:var(--mute);min-height:38px}
.langtoggle .lang.on{background:var(--blue);color:#fff}
.home .langwrap{position:absolute;right:16px;top:max(14px,env(safe-area-inset-top));z-index:3}