@font-face{font-family:Creol Fraunces;font-style:normal;font-weight:600 800;font-display:swap;src:url(/creol-taal/fonts/fraunces-latin-ext-variable.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Creol Fraunces;font-style:normal;font-weight:600 800;font-display:swap;src:url(/creol-taal/fonts/fraunces-latin-variable.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Creol Nunito;font-style:normal;font-weight:500 900;font-display:swap;src:url(/creol-taal/fonts/nunito-latin-ext-variable.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Creol Nunito;font-style:normal;font-weight:500 900;font-display:swap;src:url(/creol-taal/fonts/nunito-latin-variable.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}.creol-app{--sea:#0e7c86;--sea-d:#0a5d65;--sea-l:#d8f1f2;--sand:#fbf5ea;--sand-d:#efe3cc;--ink:#22303a;--muted:#6b7a85;--coral:#f0644b;--coral-d:#c94a33;--sun:#f6b93b;--sun-d:#d99a1c;--leaf:#3fae5a;--leaf-d:#2d8a44;--leaf-l:#dff5e4;--err:#e5484d;--err-l:#fde4e4;--card:#fff;--line:#e7dcc6;--r:18px}.creol-app *{box-sizing:border-box;margin:0;padding:0}.creol-app{isolation:isolate;background:var(--sand);min-height:100dvh;color:var(--ink);-webkit-font-smoothing:antialiased;font-family:Creol Nunito,system-ui,sans-serif;font-weight:500;line-height:normal}.creol-app button{font:inherit;cursor:pointer;color:inherit;background:0 0;border:0}.creol-app .ct-app{flex-direction:column;max-width:520px;min-height:100%;margin:0 auto;display:flex;position:relative}.creol-app .hidden{display:none!important}.creol-app .ct-top{background:var(--sand);z-index:5;border-bottom:2px solid var(--line);align-items:center;gap:14px;padding:14px 18px;display:flex;position:sticky;top:0}.creol-app .ct-brand{color:var(--sea-d);letter-spacing:-.3px;flex:1;font-family:Creol Fraunces,serif;font-size:22px;font-weight:800}.creol-app .ct-brand small{letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);font-family:Creol Nunito,sans-serif;font-size:11px;font-weight:800;display:block}.creol-app .ct-stat{align-items:center;gap:5px;font-size:16px;font-weight:900;display:flex}.creol-app .ct-stat svg{width:22px;height:22px}.creol-app .ct-stat.ct-streak{color:var(--coral)}.creol-app .ct-stat.ct-xp{color:var(--sun-d)}.creol-app .ct-stat.ct-hearts{color:var(--err)}.creol-app .ct-home{padding:8px 18px 120px}.creol-app .ct-hero{background:linear-gradient(135deg,var(--sea),var(--sea-d));color:#fff;border-radius:22px;align-items:center;gap:14px;margin:16px 0 8px;padding:20px;display:flex;position:relative;overflow:hidden}.creol-app .ct-hero:after{content:"";background:#ffffff12;border-radius:50%;width:180px;height:180px;position:absolute;bottom:-60px;right:-40px}.creol-app .ct-hero h1{margin-bottom:6px;font-family:Creol Fraunces,serif;font-size:22px;line-height:1.15}.creol-app .ct-hero p{opacity:.92;font-size:14px;line-height:1.4}.creol-app .ct-hero .moko{flex:none;width:76px}.creol-app .ct-unit{margin-top:26px}.creol-app .ct-unit-head{color:#fff;border-radius:16px;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;display:flex}.creol-app .ct-unit-head h2{letter-spacing:1.4px;text-transform:uppercase;opacity:.85;font-size:12px;font-weight:900}.creol-app .ct-unit-head h3{margin-top:2px;font-family:Creol Fraunces,serif;font-size:19px}.creol-app .ct-unit-head .ct-guide{white-space:nowrap;background:#ffffff2e;border:2px solid #ffffff59;border-radius:12px;padding:8px 10px;font-size:13px;font-weight:900}.creol-app .ct-nodes{flex-direction:column;align-items:center;gap:18px;padding:24px 0 6px;display:flex}.creol-app .ct-node{border-radius:50%;place-items:center;width:74px;height:70px;transition:transform .12s;display:grid;position:relative}.creol-app .ct-node .ct-face{color:#fff;width:74px;height:66px;box-shadow:0 6px 0 var(--shadow);background:var(--c);border-radius:50%;place-items:center;font-size:28px;display:grid}.creol-app .ct-node:active .ct-face{box-shadow:0 2px 0 var(--shadow);transform:translateY(4px)}.creol-app .ct-node.locked .ct-face{color:#9a917f;background:#d9d2c3;box-shadow:0 6px #bdb4a2}.creol-app .ct-node.done .ct-face{background:var(--sun);box-shadow:0 6px 0 var(--sun-d)}.creol-app .ct-node .ct-lbl{color:var(--muted);white-space:nowrap;font-size:12px;font-weight:800;position:absolute;top:76px}.creol-app .ct-node.current:before{content:"START";border:2px solid var(--line);color:var(--sea-d);letter-spacing:1px;background:#fff;border-radius:10px;padding:5px 10px;font-size:12px;font-weight:900;animation:1.6s ease-in-out infinite creol-bob;position:absolute;top:-34px}@keyframes creol-bob{50%{transform:translateY(-4px)}}.creol-app .ct-nodes .ct-node:nth-child(4n+2){transform:translate(52px)}.creol-app .ct-nodes .ct-node:nth-child(4n+4){transform:translate(-52px)}.creol-app .ct-nodes .ct-node{margin-bottom:18px}.creol-app .ct-about-btn{border:2px solid var(--line);width:100%;color:var(--sea-d);background:#fff;border-radius:14px;margin-top:34px;padding:14px;font-weight:800;display:block}.creol-app .ct-nav{border-top:2px solid var(--line);z-index:6;background:#fff;justify-content:space-around;width:100%;max-width:520px;padding:8px 0 12px;display:flex;position:fixed;bottom:0;left:50%;transform:translate(-50%)}.creol-app .ct-nav button{color:var(--muted);border-radius:12px;flex-direction:column;align-items:center;gap:2px;padding:4px 14px;font-size:11px;font-weight:800;display:flex}.creol-app .ct-nav button.on{color:var(--sea-d);background:var(--sea-l)}.creol-app .ct-nav svg{width:24px;height:24px}.creol-app .ct-lesson{background:var(--sand);z-index:20;flex-direction:column;max-width:520px;margin:0 auto;display:flex;position:fixed;inset:0}.creol-app .ct-l-top{align-items:center;gap:12px;padding:16px 18px;display:flex}.creol-app .ct-x{width:32px;height:32px;color:var(--muted);place-items:center;display:grid}.creol-app .ct-bar{background:#e8dfcd;border-radius:10px;flex:1;height:16px;overflow:hidden}.creol-app .ct-bar i{background:var(--leaf);border-radius:10px;width:0;height:100%;transition:width .35s;display:block;box-shadow:inset 0 -4px #00000014}.creol-app .ct-l-body{flex:1;padding:8px 20px 24px;overflow:auto}.creol-app .ct-kicker{letter-spacing:1.2px;text-transform:uppercase;color:var(--coral);margin-bottom:8px;font-size:13px;font-weight:900}.creol-app .ct-q{margin-bottom:18px;font-family:Creol Fraunces,serif;font-size:24px;line-height:1.25}.creol-app .ct-bubble-row{align-items:flex-end;gap:12px;margin-bottom:20px;display:flex}.creol-app .ct-bubble-row .moko{flex:none;width:66px}.creol-app .ct-bubble{border:2px solid var(--line);background:#fff;border-radius:16px;padding:14px 16px;font-size:17px;line-height:1.45;position:relative}.creol-app .ct-bubble:before{content:"";border-left:2px solid var(--line);border-bottom:2px solid var(--line);background:#fff;width:16px;height:16px;position:absolute;bottom:16px;left:-10px;transform:rotate(45deg)}.creol-app .ct-word{color:var(--sea-d);font-family:Creol Fraunces,serif;font-size:34px;font-weight:800}.creol-app .ct-gloss{color:var(--muted);margin-top:4px;font-size:15px}.creol-app .ct-src{color:var(--sea-d);background:var(--sea-l);border-radius:8px;align-items:center;gap:6px;margin-top:12px;padding:5px 9px;font-size:12px;font-weight:800;display:inline-flex}.creol-app .ct-tipbox{background:#fff8e6;border:2px solid #f3dfa8;border-radius:14px;margin-top:14px;padding:12px 14px;font-size:15px;line-height:1.45}.creol-app .ct-interlinear{flex-wrap:wrap;gap:6px 12px;margin-top:10px;display:flex}.creol-app .ct-interlinear span{flex-direction:column;align-items:center;display:flex}.creol-app .ct-interlinear b{color:var(--sea-d);font-family:Creol Fraunces,serif;font-size:19px}.creol-app .ct-interlinear em{color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-size:11px;font-style:normal;font-weight:800}.creol-app .ct-choices{gap:10px;display:grid}.creol-app .ct-choice{border:2px solid var(--line);text-align:left;background:#fff;border-bottom-width:5px;border-radius:14px;padding:15px 16px;font-size:17px;font-weight:800;transition:transform 80ms}.creol-app .ct-choice:active{transform:translateY(2px)}.creol-app .ct-choice.sel{border-color:var(--sea);background:var(--sea-l);color:var(--sea-d)}.creol-app .ct-choice.ok{border-color:var(--leaf);background:var(--leaf-l)}.creol-app .ct-choice.bad{border-color:var(--err);background:var(--err-l)}.creol-app .ct-answer-line{border-bottom:2px solid var(--line);flex-wrap:wrap;gap:8px;min-height:62px;margin-bottom:22px;padding:8px 0;display:flex}.creol-app .ct-bank{flex-wrap:wrap;justify-content:center;gap:8px;display:flex}.creol-app .ct-tile{border:2px solid var(--line);background:#fff;border-bottom-width:4px;border-radius:12px;padding:9px 13px;font-size:17px;font-weight:800}.creol-app .ct-tile.used{visibility:hidden}.creol-app .ct-pairs{grid-template-columns:1fr 1fr;gap:10px;display:grid}.creol-app .ct-pairs .ct-choice{text-align:center;padding:14px 8px}.creol-app .ct-pairs .ct-choice.gone{opacity:.25;pointer-events:none;border-color:var(--leaf)}.creol-app .ct-l-foot{border-top:2px solid var(--line);background:var(--sand);padding:16px 20px 22px;transition:background .2s}.creol-app .ct-l-foot.ok{background:var(--leaf-l);border-color:#bfe8c9}.creol-app .ct-l-foot.bad{background:var(--err-l);border-color:#f6c4c4}.creol-app .ct-fb{margin-bottom:12px;display:none}.creol-app .ct-l-foot.ok .ct-fb,.creol-app .ct-l-foot.bad .ct-fb{display:block}.creol-app .ct-fb strong{font-size:20px;font-weight:900;display:block}.creol-app .ct-l-foot.ok .ct-fb strong{color:var(--leaf-d)}.creol-app .ct-l-foot.bad .ct-fb strong{color:var(--err)}.creol-app .ct-fb p{margin-top:4px;font-size:15px;line-height:1.4}.creol-app .ct-btn{letter-spacing:.8px;text-transform:uppercase;color:#fff;background:var(--leaf);width:100%;box-shadow:0 5px 0 var(--leaf-d);border-radius:14px;padding:15px;font-size:16px;font-weight:900}.creol-app .ct-btn:active{box-shadow:0 2px 0 var(--leaf-d);transform:translateY(3px)}.creol-app .ct-btn:disabled{color:#8f8673;cursor:default;background:#d9d2c3;transform:none;box-shadow:0 5px #c4bba8}.creol-app .ct-l-foot.bad .ct-btn{background:var(--err);box-shadow:0 5px #b8363a}.creol-app .ct-btn.sea{background:var(--sea);box-shadow:0 5px 0 var(--sea-d)}.creol-app .ct-end{text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:30px;display:flex}.creol-app .ct-end .moko{width:130px;margin-bottom:12px}.creol-app .ct-end h2{color:var(--sea-d);font-family:Creol Fraunces,serif;font-size:30px}.creol-app .ct-end p{color:var(--muted);margin-top:6px;font-size:16px}.creol-app .ct-chips{gap:12px;margin:24px 0;display:flex}.creol-app .ct-chip{border:2px solid var(--sun);border-radius:14px;min-width:96px;overflow:hidden}.creol-app .ct-chip b{background:var(--sun);color:#fff;letter-spacing:1px;text-transform:uppercase;padding:4px;font-size:12px;display:block}.creol-app .ct-chip span{color:var(--sun-d);padding:10px;font-size:20px;font-weight:900;display:block}.creol-app .ct-chip.ct-c2{border-color:var(--leaf)}.creol-app .ct-chip.ct-c2 b{background:var(--leaf)}.creol-app .ct-chip.ct-c2 span{color:var(--leaf-d)}.creol-app .ct-page{padding:18px 20px 120px}.creol-app .ct-page h2{color:var(--sea-d);margin:8px 0 10px;font-family:Creol Fraunces,serif;font-size:26px}.creol-app .ct-page h3{letter-spacing:1.2px;text-transform:uppercase;color:var(--coral);margin:22px 0 8px;font-size:14px;font-weight:900}.creol-app .ct-page p{margin-bottom:10px;font-size:16px;line-height:1.55}.creol-app .ct-card{border:2px solid var(--line);border-radius:var(--r);background:#fff;margin-bottom:12px;padding:16px}.creol-app .ct-wl{gap:8px;display:grid}.creol-app .ct-wl .ct-card{justify-content:space-between;align-items:center;margin:0;padding:12px 14px;display:flex}.creol-app .ct-wl .ct-w{color:var(--sea-d);font-family:Creol Fraunces,serif;font-size:20px;font-weight:800}.creol-app .ct-wl .ct-m{color:var(--muted);text-align:right;font-size:14px;font-weight:700}.creol-app .ct-wl .ct-lockd .ct-w{color:#b5ab97}.creol-app .ct-srcs li{margin:0 0 8px 18px;font-size:14px;line-height:1.45}.creol-app .ct-srcs a{color:var(--sea-d);font-weight:800}.creol-app .ct-toast{background:var(--ink);color:#fff;z-index:40;opacity:0;pointer-events:none;border-radius:12px;padding:10px 16px;font-size:14px;font-weight:800;transition:opacity .2s;position:fixed;bottom:90px;left:50%;transform:translate(-50%)}.creol-app .ct-toast.on{opacity:1}.creol-app .ct-app{min-height:100dvh}.creol-app .ct-brand a{color:inherit;text-decoration:none}.creol-app .ct-brand a:hover{text-decoration:underline}.creol-app .ct-save{color:var(--muted);text-align:center;padding:9px 18px 0;font-size:11px}.creol-app .ct-save button{font-weight:800;text-decoration:underline}.creol-app .ct-nav{padding-bottom:calc(12px + env(safe-area-inset-bottom,0px))}.creol-app .ct-nav button{min-width:60px;min-height:48px}.creol-app .ct-home,.creol-app .ct-page{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}.creol-app .ct-lesson{overscroll-behavior:contain;height:100dvh}.creol-app .ct-l-top{padding-top:calc(16px + env(safe-area-inset-top,0px));flex-shrink:0}.creol-app .ct-l-body{overscroll-behavior:contain;min-height:0}.creol-app .ct-l-foot{padding-bottom:calc(22px + env(safe-area-inset-bottom,0px));flex-shrink:0}.creol-app .ct-x{width:44px;height:44px}.creol-app .ct-bubble{overflow-wrap:break-word;min-width:0}.creol-app .ct-toast{text-align:center;width:max-content;max-width:calc(100vw - 32px);bottom:calc(90px + env(safe-area-inset-bottom,0px))}.creol-app .ct-heritage-contact{border-top:2px solid var(--line);margin-top:24px;padding-top:18px}.creol-app .ct-heritage-contact a{min-height:44px;color:var(--sea-d);font-weight:800;text-decoration:underline;display:block}.creol-app button:focus-visible,.creol-app a:focus-visible{outline:3px solid var(--sea-d);outline-offset:4px}.creol-app .ct-lesson:focus{outline:none}@media (width<=360px){.creol-app .ct-top{gap:8px;padding-inline:12px}.creol-app .ct-brand{font-size:20px}.creol-app .ct-stat{gap:3px;font-size:14px}.creol-app .ct-stat svg{width:19px;height:19px}.creol-app .ct-l-body{padding-inline:14px}.creol-app .ct-bubble-row{gap:10px}.creol-app .ct-bubble-row .moko{width:48px}.creol-app .ct-bubble{padding:12px}.creol-app .ct-end{padding:16px 8px}}@media (prefers-reduced-motion:reduce){.creol-app *,.creol-app :before,.creol-app :after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.creol-app img.moko{object-fit:contain;height:auto}.creol-app .ct-audio{border:1px solid var(--line);width:100%;max-width:520px;color:var(--ink);background:#fffaf1;border-radius:14px;flex:none;margin:8px auto;padding:10px 14px;font-size:12px}.creol-app .ct-audio-buttons{flex-wrap:wrap;gap:6px;display:flex}.creol-app .ct-audio-buttons button{background:var(--sea);color:#fff;border-radius:10px;min-height:44px;padding:7px 10px;font-size:12px;font-weight:800}.creol-app .ct-audio-buttons button:disabled{color:#6a655c;cursor:default;background:#e9e3d8}.creol-app .ct-audio-status{padding-top:7px;line-height:1.4}.creol-app .ct-audio details{margin-top:4px}.creol-app .ct-audio summary{cursor:pointer;min-height:32px;color:var(--sea-d);align-items:center;font-weight:800;display:flex}.creol-app .ct-audio-transcript{max-height:90px;line-height:1.5;overflow:auto}.creol-app .ct-lesson>.ct-audio{width:calc(100% - 24px);margin:0 12px 8px;padding:8px 10px}@media (width<=360px){.creol-app .ct-audio-buttons{gap:4px}.creol-app .ct-audio-buttons button{padding-inline:7px;font-size:11px}}.creol-app .ct-choice,.creol-app .ct-tile,.creol-app .ct-btn{transition:transform .14s,background-color .18s,box-shadow .14s}.creol-app .ct-choice:active,.creol-app .ct-tile:active{transform:translateY(2px)}.creol-app .ct-choice.ok,.creol-app .ct-choice.gone{animation:.28s ease-out creol-answer-pop}.creol-app .ct-choice.bad{animation:.23s ease-out creol-answer-nudge}.creol-app .ct-celebrate{isolation:isolate;position:relative;overflow:hidden}.creol-app .ct-celebrate .ct-chip{animation:.45s cubic-bezier(.2,.8,.2,1) both creol-reward-in}.creol-app .ct-confetti{pointer-events:none;z-index:-1;position:absolute;inset:0;overflow:hidden}.creol-app .ct-confetti i{left:var(--x);background:var(--sea);opacity:0;width:8px;height:14px;animation:creol-confetti-fall 1.5s ease-out calc(var(--i)*25ms) both;border-radius:2px;position:absolute;top:-14px}.creol-app .ct-confetti i:nth-child(3n){background:var(--coral)}.creol-app .ct-confetti i:nth-child(3n+1){background:var(--sun)}@keyframes creol-answer-pop{50%{transform:scale(1.025)}}@keyframes creol-answer-nudge{25%{transform:translate(-3px)}75%{transform:translate(3px)}}@keyframes creol-reward-in{0%{opacity:0;transform:translateY(8px)scale(.94)}to{opacity:1;transform:none}}@keyframes creol-confetti-fall{0%{opacity:0;transform:translateY(0)rotate(0)}10%{opacity:.7}to{opacity:0;transform:translateY(430px)rotate(220deg)}}@media (prefers-reduced-motion:reduce){.creol-app .ct-choice,.creol-app .ct-tile,.creol-app .ct-btn,.creol-app .ct-chip,.creol-app .ct-confetti i{transition:none!important;animation:none!important}.creol-app .ct-confetti{display:none}}.creol-app .ct-audio-buttons button{min-width:44px;padding-inline:8px;font-size:12px}@media (width<=360px){.creol-app .ct-audio-buttons button{padding-inline:6px;font-size:11px}}