@font-face{font-family:"DM Sans";src:url(/fonts/DMSans-Regular.ttf);font-weight:400;font-display:swap;unicode-range:U+0000-024F,U+2010-2027,U+2030-205E,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"DM Sans";src:url(/fonts/DMSans-Medium.ttf);font-weight:500 600;font-display:swap;unicode-range:U+0000-024F,U+2010-2027,U+2030-205E,U+20AC,U+2122,U+2190-2193}
@font-face{font-family:"DM Sans";src:url(/fonts/DMSans-Bold.ttf);font-weight:700 800;font-display:swap;unicode-range:U+0000-024F,U+2010-2027,U+2030-205E,U+20AC,U+2122,U+2190-2193}
/* The look of the first Tildee: white fading to salmon, soft pastel cards,
   DM Sans, pink marker under the titles, two-colour illustrations that move. */
:root{
  --bg:#fff;--card:#fff;--ink:#4b3f3a;--mute:#9c8f88;--line:#f4e4de;--soft:#fff1ec;
  --brand:#ff5f7e;--brand2:#ffa26b;--grad:linear-gradient(90deg,#ff6f91,#ffb074);--marker:#ffd5dc;
  --cream:#fff6dd;--sky:#dcecff;
  --ok:#2fbf8f;--bad:#f0616d;
  --h0:#b9c4d2;--h1:#5b9cf6;--h2:#3cc4d3;--h3:#f6c32c;--h4:#ff944d;--h5:#ff4d6d;
  --safe-b:env(safe-area-inset-bottom,0px);--safe-t:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
html,body{margin:0;height:100%}
body{font:16px/1.45 "DM Sans","Helvetica Neue",Roboto,"Noto Sans Khmer","Noto Sans Thai",sans-serif;background:linear-gradient(180deg,#fff 0,#fff 30%,#fff0ea 62%,#ffd9cd 100%) fixed;color:var(--ink);overscroll-behavior:none;-webkit-user-select:none;user-select:none}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
input,select{font:inherit;color:inherit}
#app{max-width:560px;margin:0 auto;min-height:100%;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);padding:calc(var(--safe-t) + 10px) 16px 10px;display:flex;align-items:center;gap:10px}
.top img{width:32px;height:32px}
.top h1{font-size:22px;margin:0;flex:1;letter-spacing:-.02em;font-weight:700}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:99px;background:var(--soft);font-weight:600;font-size:14px;white-space:nowrap}
.chip.on{background:var(--grad);color:#fff}
main{flex:1;padding:6px 16px calc(150px + var(--safe-b))}
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:color-mix(in srgb,var(--card) 92%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-top:1px solid var(--line);padding-bottom:var(--safe-b)}
.tabs div{max-width:560px;margin:auto;display:flex}
.tabs button{flex:1;padding:9px 0 7px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;font-weight:600;color:var(--mute)}
.tabs button svg{width:25px;height:25px}
.tabs button.on{color:var(--brand)}
.title{font-size:30px;font-weight:700;letter-spacing:-.03em;margin:10px 0 6px;line-height:1.15}
.mark{background:linear-gradient(transparent 62%,var(--marker) 62%);padding:0 2px}
.sub{color:var(--mute);margin:0 0 16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;margin-bottom:12px;box-shadow:0 6px 18px rgba(255,140,120,.10)}
.btn{display:block;width:100%;text-align:center;padding:15px;border-radius:99px;box-shadow:0 8px 20px rgba(255,120,120,.28);font-weight:700;font-size:17px;background:var(--grad);color:#fff}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:none;border:1px solid var(--line)}
.btn:disabled{opacity:.4}
.empty{text-align:center;color:var(--mute);padding:50px 20px}
.spin{width:30px;height:30px;border:3px solid var(--line);border-top-color:var(--brand);border-radius:50%;margin:60px auto;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.scroller{display:flex;gap:8px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.toast{position:fixed;left:50%;bottom:calc(150px + var(--safe-b));transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:12px;font-size:14px;z-index:90;max-width:86vw;text-align:center}

/* onboarding + profile */
.lang-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;margin-bottom:22px}
.lang{min-width:0;display:flex;align-items:center;gap:10px;padding:12px;border-radius:14px;background:var(--card);border:2px solid var(--line);text-align:left;font-weight:600}
.flag{flex:none;border-radius:50%;box-shadow:0 0 0 2px #fff,0 2px 6px rgba(0,0,0,.12);vertical-align:-4px}
.lang small{display:block;color:var(--mute);font-weight:500}
.lang.on{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 8%,var(--card))}
.lang:disabled{opacity:.35}
.h2{font-size:18px;font-weight:700;margin:18px 0 10px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats .card{margin:0;text-align:center;padding:14px 6px}
.stats b{display:block;font-size:24px}
.stats span{font-size:12px;color:var(--mute)}
.heatbar{display:flex;height:14px;border-radius:99px;overflow:hidden;background:var(--soft);margin:12px 0 8px}
.heatbar i{display:block}
.legend{display:flex;justify-content:space-between;font-size:12px;color:var(--mute)}

/* sounds */
.sound{display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.cover{width:62px;height:62px;border-radius:18px;flex:none;background:var(--grad);display:grid;place-items:center;color:#fff;font-size:26px;background-size:cover;background-position:center}
.sound b{display:block;font-size:17px}
.sound small{color:var(--mute)}
.sound .play{margin-left:auto;width:42px;height:42px;border-radius:50%;background:var(--soft);display:grid;place-items:center;flex:none}
.sound.on .play{background:var(--brand);color:#fff}
.player{position:fixed;left:0;right:0;bottom:calc(58px + var(--safe-b));z-index:25;padding:0 10px}
.player>div{max-width:540px;margin:auto;background:linear-gradient(90deg,#ff6f91,#ff9a76);color:#fff;border-radius:18px;padding:10px 12px;box-shadow:0 8px 30px rgba(0,0,0,.25)}
.player .row{display:flex;align-items:center;gap:10px}
.player b{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player button{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(255,255,255,.28);color:inherit}
.player input[type=range]{width:100%;accent-color:#fff;margin:8px 0 0;height:4px}
.player .time{display:flex;justify-content:space-between;font-size:11px;opacity:.7}
main.np{padding-top:30vh;padding-bottom:calc(46vh + var(--safe-b))}
main.np .empty{margin-top:-24vh}
.lyrics .ln{font-size:25px;font-weight:700;line-height:1.35;margin:0 0 22px;color:var(--ink);opacity:.28;transition:opacity .35s,transform .35s;transform-origin:left center;transform:scale(.94)}
.lyrics .ln small{display:block;font-size:15px;font-weight:500;color:var(--mute);margin-top:3px}
.lyrics .ln.past{opacity:.45}
.lyrics .ln.cur{opacity:1;transform:none}
.lyrics .ln.cur{background:linear-gradient(90deg,#ff5f7e,#ff9a5a);-webkit-background-clip:text;background-clip:text;color:transparent}
.lyrics .ln.cur small{color:var(--mute);-webkit-text-fill-color:var(--mute)}
.lyrics .tag{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);opacity:.6;margin:26px 0 10px}

/* mnemonics */
.mn{position:relative}
.mn .w{font-size:30px;font-weight:700;line-height:1.25}
.mn .r{color:var(--mute);font-size:16px}
.mn .k{margin-top:12px;font-size:17px}
.mn .k b{background:linear-gradient(transparent 60%,var(--marker) 60%)}
.mn:nth-child(odd){background:var(--cream);border-color:#f8e9bd}
.mn:nth-child(even){background:var(--sky);border-color:#c9defa}
.mn .hid{margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.mn .t{font-weight:700;font-size:19px;color:var(--brand)}
.mn .s{margin-top:4px;-webkit-user-select:text;user-select:text}
.mn .tap{margin-top:12px;color:var(--mute);font-size:14px}
.spk{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:var(--soft);display:grid;place-items:center}
.spk.busy{background:var(--brand);color:#fff}

/* vocabulary */
.search{width:100%;padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:var(--card);margin-bottom:10px;-webkit-user-select:text;user-select:text}
.dot{width:10px;height:10px;border-radius:50%;display:inline-block}
.word{display:flex;align-items:center;gap:12px;padding:11px 12px 11px 0;background:var(--card);border:1px solid var(--line);border-radius:14px;margin-bottom:7px;width:100%;text-align:left;position:relative;overflow:hidden}
.word::before{content:"";align-self:stretch;width:6px;margin:-11px 0;background:var(--hc);flex:none}
.word .mid{flex:1;min-width:0}
.word .w{line-height:1.6;font-size:19px;font-weight:650;color:color-mix(in srgb,var(--hc) 72%,var(--ink))}
.word .r{color:var(--mute);font-size:13px}
.word .n{color:var(--mute);font-size:15px;text-align:right;max-width:42%}
.word .heat{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:var(--hc)}
.word.say{border-color:var(--hc)}
.ht0{--hc:var(--h0)}.ht1{--hc:var(--h1)}.ht2{--hc:var(--h2)}.ht3{--hc:var(--h3)}.ht4{--hc:var(--h4)}.ht5{--hc:var(--h5)}
.count{font-size:13px;color:var(--mute);margin:0 0 8px}

/* games */
.game{display:flex;align-items:center;gap:14px;width:100%;text-align:left}
.game .ic{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:27px;background:var(--soft);flex:none}
.game b{display:block;font-size:18px}
.game small{color:var(--mute)}
.prog{height:8px;border-radius:99px;background:var(--soft);overflow:hidden;margin:6px 0 22px}
.prog i{display:block;height:100%;background:var(--grad);transition:width .25s}
.q{text-align:center;padding:26px 10px 22px}
.q .w{font-size:40px;font-weight:700;line-height:1.3}
.q .r{color:var(--mute);margin-top:4px}
.q .listen{width:96px;height:96px;border-radius:50%;background:var(--grad);color:#fff;display:grid;place-items:center;margin:0 auto}
.q .listen svg{width:44px;height:44px}
.opt{display:block;width:100%;padding:15px;border-radius:18px;background:var(--card);border:2px solid var(--line);margin-bottom:9px;font-size:18px;font-weight:600}
.opt small{display:block;color:var(--mute);font-weight:500;font-size:13px}
.opt.good{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--card))}
.opt.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 12%,var(--card))}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.pairs .opt{margin:0;min-height:62px;font-size:16px;padding:10px 8px}
.pairs .opt.sel{border-color:var(--brand)}
.pairs .opt.done{opacity:.3;border-color:var(--ok)}
.pairs .opt.shake{animation:shake .3s;border-color:var(--bad)}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.result{text-align:center;padding:30px 0}
.result .big{font-size:64px;font-weight:700;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.close{width:38px;height:38px;border-radius:50%;background:var(--soft);display:grid;place-items:center}

/* illustrations */
.hero{position:relative;overflow:hidden;border-radius:26px;margin:4px 0 16px;padding:18px 18px 0;min-height:168px;background:linear-gradient(160deg,#fff 0,#ffe7e1 55%,#ffc5b5 100%);border:1px solid var(--line)}
.hero .title{font-size:25px;max-width:58%;margin:0 0 6px;position:relative;z-index:2}
.hero .sub{max-width:54%;font-size:14px;margin:0 0 16px;position:relative;z-index:2}
.hero img{position:absolute;right:-6px;bottom:-4px;height:150px;z-index:1;animation:float 5s ease-in-out infinite;transform-origin:50% 90%}
.hero::before,.hero::after,.cloud{content:"";position:absolute;width:56px;height:20px;border-radius:99px;background:#fff;opacity:.9;box-shadow:16px -9px 0 2px #fff,34px -3px 0 -2px #fff}
.hero::before{top:26px;left:-70px;animation:drift 19s linear infinite}
.hero::after{top:78px;left:-70px;transform:scale(.7);animation:drift 27s linear 6s infinite}
.ill{display:block;margin:0 auto;max-width:78%;max-height:250px;animation:float 5s ease-in-out infinite}
.ill.launch{animation:launch 1.1s cubic-bezier(.2,.9,.3,1) both,float 5s ease-in-out 1.1s infinite}
.empty .ill{max-height:170px;margin-bottom:14px}
@keyframes float{0%,100%{transform:translateY(0) rotate(-1.2deg)}50%{transform:translateY(-9px) rotate(1.2deg)}}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(720px)}}
@keyframes launch{from{transform:translate(-60px,90px) scale(.6);opacity:0}to{transform:none;opacity:1}}
.confetti{position:relative;height:0}
.confetti i{position:absolute;top:-10px;width:9px;height:9px;border-radius:2px;animation:fall 1.9s ease-out both}
@keyframes fall{from{transform:translateY(-30px) rotate(0);opacity:1}to{transform:translateY(330px) rotate(540deg);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero img,.ill,.hero::before,.hero::after,.confetti i{animation:none}}
main.pick{padding-bottom:calc(40px + var(--safe-b))}
.game small{display:block}

/* me: account, progress, badges */
.stats{row-gap:8px}
.mute{color:var(--mute);font-weight:500;font-size:14px}
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.badge{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:12px 6px 10px;text-align:center;font-size:12px;line-height:1.25;color:var(--mute)}
.badge .medal{width:54px;height:54px;border-radius:50%;margin:0 auto 7px;display:grid;place-items:center;background:#eee6e2;color:#fff;font-size:17px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.08)}
.badge.on{color:var(--ink);font-weight:600;box-shadow:0 6px 18px rgba(255,140,120,.14)}
.badge.on .medal{animation:pop .5s cubic-bezier(.2,1.6,.4,1) both}
.badge.on.bt-words .medal{background:linear-gradient(135deg,#5b9cf6,#3cc4d3)}
.badge.on.bt-mastered .medal{background:linear-gradient(135deg,#ff4d6d,#ff944d)}
.badge.on.bt-streak .medal{background:linear-gradient(135deg,#ff944d,#f6c32c)}
.badge.on.bt-games .medal{background:linear-gradient(135deg,#8f7cf7,#5b9cf6)}
.badge.on.bt-songs .medal{background:linear-gradient(135deg,#ff6f91,#c66cf0)}
.badge.on.bt-perfect .medal{background:linear-gradient(135deg,#2fbf8f,#3cc4d3)}
.badge i{display:block;height:4px;border-radius:9px;background:var(--soft);margin:7px 8px 0;overflow:hidden}
.badge u{display:block;height:100%;background:var(--grad)}
@keyframes pop{from{transform:scale(.4)}to{transform:none}}
.field{display:block;margin-bottom:12px}
.field span{display:block;font-size:13px;font-weight:600;color:var(--mute);margin:0 0 5px 4px}
.field input{width:100%;padding:14px 16px;border-radius:16px;border:1px solid var(--line);background:#fff;-webkit-user-select:text;user-select:text;font-size:17px}
.err{color:var(--bad);font-weight:600;margin:0 0 12px 4px}
.btn.danger{color:var(--bad)}
.tabs button{font-size:10.5px}
.hero .sub{overflow-wrap:anywhere}