@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:400;src:url(./kanit-thai-400-normal-D80Pglro.woff2)format("woff2"),url(./kanit-thai-400-normal-D2nliXKa.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:400;src:url(./kanit-vietnamese-400-normal-DRI8YWyb.woff2)format("woff2"),url(./kanit-vietnamese-400-normal-dow6Bnto.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:400;src:url(./kanit-latin-ext-400-normal-B2xPf58u.woff2)format("woff2"),url(./kanit-latin-ext-400-normal-CHvNKHHD.woff)format("woff");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-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Kanit;font-style:normal;font-display:swap;font-weight:400;src:url(./kanit-latin-400-normal-BUlsQXH3.woff2)format("woff2"),url(./kanit-latin-400-normal-HVZWrfev.woff)format("woff");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}:root{--ink:#183226;--ink-soft:#4b6155;--paper:#fffcf5d6;--paper-solid:#fffcf5;--line:#1832261a;--accent:#f08a24;--accent-dark:#c2640c;--good:#23a55a;--bad:#e5484d;--radius:26px;--shadow:0 24px 60px -20px #16342873, 0 2px 6px #16342814;--font-display:"Kanit", system-ui, sans-serif;--font-body:"IBM Plex Sans Thai", system-ui, sans-serif;--ease:cubic-bezier(.22, 1, .36, 1)}*{box-sizing:border-box}html,body{height:100%;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;background:#8fcbef;margin:0;overflow:hidden}button{font:inherit;color:inherit;cursor:pointer}[hidden]{display:none!important}svg{display:block}[data-icon]{justify-content:center;align-items:center;display:inline-flex}[data-icon] svg{width:1.15em;height:1.15em}.sr-only{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#app{position:fixed;inset:0}#stage{z-index:0;isolation:isolate;position:absolute;inset:0}#stage canvas{touch-action:none;width:100%;height:100%;display:block}.label-layer{pointer-events:none;position:absolute;inset:0}.vignette{pointer-events:none;background:radial-gradient(at 50% 45%,#0000 55%,#14323c47 100%);position:absolute;inset:0}#ui{z-index:1;pointer-events:none;position:absolute;inset:0}.btn{--b:var(--accent);--bd:var(--accent-dark);font-family:var(--font-display);transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;white-space:nowrap;pointer-events:auto;border:0;border-radius:999px;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.4rem;font-size:1rem;font-weight:500;line-height:1;display:inline-flex}.btn>svg{flex:none;width:1.15em;height:1.15em}.btn:focus-visible,.icon-btn:focus-visible,.card:focus-visible,.option:focus-visible,.tray-btn:focus-visible,.tl-node:focus-visible,.brand:focus-visible{outline-offset:3px;box-shadow:0 0 0 6px var(--accent);outline:3px solid #fff}.btn-primary{background:linear-gradient(180deg, color-mix(in srgb, var(--b) 88%, white) 0%, var(--b) 100%);color:#fff;box-shadow:0 5px 0 var(--bd), 0 14px 26px -10px color-mix(in srgb, var(--b) 80%, black);text-shadow:0 1px #00000026}.btn-primary:hover{box-shadow:0 7px 0 var(--bd), 0 18px 30px -10px color-mix(in srgb, var(--b) 80%, black);transform:translateY(-2px)}.btn-primary:active{box-shadow:0 1px 0 var(--bd), 0 6px 14px -8px color-mix(in srgb, var(--b) 80%, black);transform:translateY(4px)}.btn-ghost{color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--line), 0 4px 0 #1832261a;background:#ffffffb3}.btn-ghost:hover{background:#fff;transform:translateY(-2px)}.btn-ghost:active{transform:translateY(2px)}.btn-ghost:disabled{opacity:.45;pointer-events:none}.btn-glass{-webkit-backdrop-filter:blur(14px)saturate(1.4);color:var(--ink);background:#fffcf5b8;box-shadow:0 8px 24px -10px #16342866,inset 0 0 0 1px #ffffffb3}.btn-glass:hover{background:#fff}.btn-lg{padding:1rem 1.7rem;font-size:1.12rem}.btn-sm{padding:.6rem 1rem;font-size:.9rem}.btn-block{width:100%}.icon-btn{-webkit-backdrop-filter:blur(14px);width:44px;height:44px;transition:transform .2s var(--ease), background .2s;background:#fffcf5c7;border:0;border-radius:14px;place-items:center;display:grid;box-shadow:0 6px 18px -8px #16342866,inset 0 0 0 1px #ffffffb3}.icon-btn:hover{background:#fff;transform:translateY(-2px)}.icon-btn [data-icon] svg{width:20px;height:20px}.panel{background:var(--paper);-webkit-backdrop-filter:blur(22px)saturate(1.5);border-radius:var(--radius);box-shadow:var(--shadow), inset 0 0 0 1px #ffffffbf;pointer-events:auto}.chip{color:var(--ink-soft);background:#1832260f;border-radius:999px;align-items:center;gap:.35rem;padding:.38rem .75rem;font-size:.85rem;font-weight:500;display:inline-flex}.chip [data-icon] svg{width:15px;height:15px}.chip-accent{background:color-mix(in srgb, var(--accent) 16%, white);color:var(--accent-dark);font-family:var(--font-display)}.eyebrow{font-family:var(--font-display);color:var(--ink);-webkit-backdrop-filter:blur(10px);background:#fffcf5bf;border-radius:999px;align-items:center;gap:.5rem;margin:0;padding:.4rem .9rem .4rem .7rem;font-size:.95rem;font-weight:500;display:inline-flex;box-shadow:inset 0 0 0 1px #fffc}.eyebrow .dot{background:var(--accent);width:8px;height:8px;box-shadow:0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent);border-radius:50%}.screen{opacity:0;visibility:hidden;transition:opacity .5s var(--ease), visibility .5s;pointer-events:none;position:absolute;inset:0}.screen.active{opacity:1;visibility:visible}.screen .panel,.screen .cards,.screen .title-wrap,.screen .timeline,.screen .tray,.screen .select-head,.screen .learn-tools{transition:transform .7s var(--ease), opacity .7s var(--ease)}.screen:not(.active) .info-panel,.screen:not(.active) .quiz-panel{opacity:0;transform:translate(40px)}.screen:not(.active) .cards,.screen:not(.active) .timeline,.screen:not(.active) .tray{opacity:0;transform:translateY(40px)}.screen:not(.active) .title-wrap,.screen:not(.active) .learn-tools{opacity:0;transform:translate(-40px)}.screen:not(.active) .select-head,.screen:not(.active) .mission-card{opacity:0;transform:translateY(-30px)}.screen:not(.active) .result-card{opacity:0;transform:scale(.9)}.loader{z-index:50;transition:opacity .8s var(--ease), visibility .8s;background:radial-gradient(at 50% 30%,#fff1d8 0%,#bfe3f7 55%,#7fc0ea 100%);place-items:center;display:grid;position:absolute;inset:0}.loader.done{opacity:0;visibility:hidden}.loader-card{text-align:center;width:min(360px,86vw)}.loader-title{font-family:var(--font-display);letter-spacing:-.01em;margin:1rem 0 1.4rem;font-size:2.2rem;font-weight:700}.loader-bar{background:#fff9;border-radius:99px;height:12px;overflow:hidden;box-shadow:inset 0 0 0 1px #ffffffe6,0 6px 18px -8px #16342859}.loader-bar span{width:0%;height:100%;transition:width .4s var(--ease);background:linear-gradient(90deg,#3fa34d,#f5c030,#f08a24);border-radius:99px;display:block}.loader-text{color:var(--ink-soft);margin-top:.9rem;font-size:.95rem}.brand-mark{place-items:center;width:38px;height:38px;display:inline-grid}.brand-mark svg{width:100%;height:100%}.brand-mark-lg{filter:drop-shadow(0 12px 18px #16342840);width:84px;height:84px;animation:6s linear infinite spin-slow}@keyframes spin-slow{to{transform:rotate(360deg)}}.hud{z-index:20;padding:max(16px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) 0 max(20px, env(safe-area-inset-left));pointer-events:none;justify-content:space-between;align-items:center;gap:1rem;display:flex;position:absolute;top:0;left:0;right:0}.hud>*{pointer-events:auto}.brand{-webkit-backdrop-filter:blur(14px);background:#fffcf5c7;border:0;border-radius:999px;align-items:center;gap:.6rem;padding:.35rem 1rem .35rem .4rem;display:inline-flex;box-shadow:0 6px 18px -8px #16342866,inset 0 0 0 1px #ffffffb3}.brand-text{font-family:var(--font-display);font-size:1.05rem;font-weight:600}.hud-actions{gap:.5rem;display:flex}.phase-steps{-webkit-backdrop-filter:blur(14px);transition:opacity .4s var(--ease), transform .4s var(--ease);background:#fffcf5c7;border-radius:999px;align-items:center;gap:.75rem;padding:.35rem .4rem .35rem 1rem;display:flex;box-shadow:0 6px 18px -8px #16342866,inset 0 0 0 1px #ffffffb3}.phase-steps.hidden{opacity:0;pointer-events:none;transform:translateY(-12px)}.phase-animal{font-family:var(--font-display);color:var(--accent-dark);font-weight:600}.phase-steps ol{gap:.25rem;margin:0;padding:0;list-style:none;display:flex}.phase-steps li{color:var(--ink-soft);border-radius:999px;align-items:center;gap:.4rem;padding:.35rem .75rem .35rem .35rem;font-size:.88rem;font-weight:500;transition:background .3s,color .3s;display:flex}.phase-steps li span{width:22px;height:22px;font-size:.75rem;font-family:var(--font-display);background:#18322614;border-radius:50%;place-items:center;display:grid}.phase-steps li.done span{background:var(--good);color:#fff}.phase-steps li.active{background:var(--accent);color:#fff}.phase-steps li.active span{color:#fff;background:#ffffff47}#screen-title{align-items:center;padding:90px clamp(20px,6vw,96px) 40px;display:flex}.title-wrap{pointer-events:auto;max-width:560px}.title-heading{font-family:var(--font-display);letter-spacing:-.02em;color:#fff;text-shadow:0 4px #1832262e,0 18px 40px #18322659;margin:1.1rem 0 1rem;font-size:clamp(3rem,8vw,6.2rem);font-weight:700;line-height:.98}.title-heading span{color:#ffd35a;-webkit-text-stroke:0}.title-lead{color:var(--ink);-webkit-backdrop-filter:blur(12px);text-wrap:pretty;background:#fffcf5b8;border-radius:20px;margin:0 0 1.6rem;padding:1rem 1.2rem;font-size:1.1rem;line-height:1.75;box-shadow:inset 0 0 0 1px #fffc}.title-actions{flex-wrap:wrap;gap:.8rem;display:flex}.feature-chips{flex-wrap:wrap;gap:.5rem;margin:1.8rem 0 0;padding:0;list-style:none;display:flex}.feature-chips li{color:#fff;-webkit-backdrop-filter:blur(10px);background:#1832268c;border-radius:999px;padding:.45rem .9rem;font-size:.9rem}.feature-chips strong{font-family:var(--font-display);color:#ffd35a;margin-right:.2rem}#screen-select{padding:92px 20px max(24px, env(safe-area-inset-bottom));flex-direction:column;justify-content:space-between;display:flex}.select-head{text-align:center}.eyebrow-center{margin-bottom:.7rem}.select-heading{font-family:var(--font-display);color:#fff;text-shadow:0 3px #1832262e,0 14px 30px #18322659;margin:0;font-size:clamp(1.8rem,4vw,2.8rem);font-weight:700}.cards{pointer-events:auto;scroll-snap-type:x mandatory;scrollbar-width:none;justify-content:center;gap:1rem;padding:.5rem;display:flex;overflow-x:auto}.cards::-webkit-scrollbar{display:none}.card{--c:var(--accent);scroll-snap-align:center;text-align:left;background:var(--paper);-webkit-backdrop-filter:blur(22px)saturate(1.5);width:290px;box-shadow:var(--shadow), inset 0 0 0 1px #ffffffbf;transition:transform .35s var(--ease), box-shadow .35s var(--ease);border:0;border-radius:28px;flex-direction:column;flex:none;padding:.7rem;display:flex}.card:hover,.card.is-preview{box-shadow:0 30px 60px -20px #1634288c, inset 0 0 0 2px var(--c);transform:translateY(-8px)}.card-thumb{aspect-ratio:16/11;background:radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--c) 22%, white) 0%, color-mix(in srgb, var(--c) 45%, #fff3de) 100%);border-radius:20px;position:relative;overflow:hidden}.card-thumb img{object-fit:contain;width:100%;height:100%;transition:transform .5s var(--ease);transform:scale(1.12)}.card:hover .card-thumb img{transform:scale(1.2)rotate(-2deg)}.card-stars{background:#ffffffd9;border-radius:999px;gap:2px;padding:4px 8px;display:flex;position:absolute;top:10px;right:10px}.card-stars svg{fill:#e3ddd0;width:16px;height:16px}.card-stars svg.on{fill:#ffbf1f}.card-body{padding:.9rem .5rem .3rem}.card-title{justify-content:space-between;align-items:baseline;gap:.5rem;display:flex}.card-title h3{font-family:var(--font-display);margin:0;font-size:1.6rem;font-weight:700}.card-title span{color:var(--ink-soft);font-size:.85rem}.card-type{color:color-mix(in srgb, var(--c) 75%, black);background:color-mix(in srgb, var(--c) 14%, white);border-radius:999px;margin:.35rem 0 .5rem;padding:.25rem .6rem;font-size:.8rem;font-weight:600;display:inline-block}.card-blurb{color:var(--ink-soft);margin:0;font-size:.92rem;line-height:1.6}.card-cta{font-family:var(--font-display);color:var(--c);background:color-mix(in srgb, var(--c) 10%, white);border-radius:16px;justify-content:space-between;align-items:center;margin-top:.9rem;padding:.7rem .9rem;font-weight:500;display:flex}.info-panel,.quiz-panel{top:88px;right:max(20px, env(safe-area-inset-right));flex-direction:column;width:min(410px,100vw - 40px);max-height:calc(100% - 200px);padding:1.4rem;display:flex;position:absolute;overflow:auto}.info-top{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.info-body{margin-top:1rem}.info-body.swap{animation:swap-in .6s var(--ease)}@keyframes swap-in{0%{opacity:0;transform:translateY(12px)}}.info-en{letter-spacing:.12em;text-transform:uppercase;color:var(--accent-dark);margin:0;font-size:.85rem;font-weight:600}.info-name{font-family:var(--font-display);margin:.1rem 0 .6rem;font-size:2.6rem;font-weight:700;line-height:1.1}.info-desc{color:var(--ink);text-wrap:pretty;margin:0;font-size:1.04rem;line-height:1.8}.fact{background:linear-gradient(135deg,#fff6d6,#fff1c2);border-radius:18px;gap:.8rem;margin-top:1.1rem;padding:.9rem 1rem;display:flex;box-shadow:inset 0 0 0 1px #d6a01433}.fact-icon{color:#6b4a00;background:#ffc933;border-radius:12px;flex:none;width:36px;height:36px}.fact-icon svg{width:20px;height:20px}.fact-title{font-family:var(--font-display);color:#8a5a00;margin:0;font-size:.95rem;font-weight:600}.fact-text{color:#5a4210;margin:.15rem 0 0;font-size:.95rem;line-height:1.65}.panel-dots{justify-content:center;gap:6px;margin-top:1rem;display:none}.panel-dots span{width:8px;height:8px;transition:width .3s var(--ease), background .3s;background:#18322626;border-radius:99px}.panel-dots span.on{background:var(--accent);width:24px}.info-actions{gap:.6rem;margin-top:1.3rem;display:flex}.info-actions .btn{flex:1}.learn-tools{left:max(20px, env(safe-area-inset-left));pointer-events:auto;flex-direction:column;align-items:flex-start;gap:.6rem;display:flex;position:absolute;top:88px}.hint{color:#fff;-webkit-backdrop-filter:blur(8px);background:#18322680;border-radius:999px;align-items:center;gap:.4rem;margin:0;padding:.4rem .8rem;font-size:.82rem;display:inline-flex}.timeline{left:50%;bottom:max(22px, env(safe-area-inset-bottom));background:var(--paper);-webkit-backdrop-filter:blur(22px);box-shadow:var(--shadow), inset 0 0 0 1px #ffffffbf;pointer-events:auto;border-radius:999px;align-items:center;gap:.3rem;padding:.5rem;display:flex;position:absolute;translate:calc(-50% - 215px)}.tl-node{font-family:var(--font-display);color:var(--ink-soft);transition:background .3s var(--ease), color .3s;background:0 0;border:0;border-radius:999px;align-items:center;gap:.45rem;padding:.45rem .85rem .45rem .45rem;font-size:.92rem;font-weight:500;display:flex}.tl-node .n{background:#18322612;border-radius:50%;place-items:center;width:28px;height:28px;font-size:.85rem;transition:background .3s;display:grid}.tl-node.seen .n{background:color-mix(in srgb, var(--accent) 22%, white);color:var(--accent-dark)}.tl-node:hover{background:#1832260d}.tl-node.active{background:var(--accent);color:#fff}.tl-node.active .n{color:#fff;background:#ffffff47}.tl-arrow{color:#1832264d}.tl-arrow svg{width:16px;height:16px}.tl-loop{color:var(--accent-dark);align-items:center;padding:0 .6rem 0 .2rem;display:flex}.tl-loop svg{width:18px;height:18px}.stage-tag{font-family:var(--font-display);color:var(--ink);white-space:nowrap;transition:transform .35s var(--ease), background .35s;transform-origin:bottom;background:#fffcf5e6;border-radius:999px;align-items:center;gap:.4rem;padding:.3rem .8rem .3rem .3rem;font-size:.92rem;font-weight:500;display:flex;box-shadow:0 8px 20px -8px #16342880}.stage-tag-num{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:24px;height:24px;font-size:.8rem;display:grid}.stage-tag.is-active{background:var(--accent);color:#fff;transform:scale(1.12)}.stage-tag.is-active .stage-tag-num{color:var(--accent-dark);background:#fff}.stage-tag.is-mystery .stage-tag-num{color:var(--ink);background:#18322626}.stage-tag.is-mystery .stage-tag-num:before{content:"?"}.stage-tag.is-mystery .stage-tag-num{font-size:0}.stage-tag.is-mystery .stage-tag-num:before{font-size:.8rem}.mission-card{text-align:center;width:min(480px,100vw - 32px);padding:.75rem 1.1rem .85rem;position:absolute;top:86px;left:50%;translate:-50%}.mission-top{justify-content:space-between;align-items:center;display:flex}.lives{color:var(--ink-soft);align-items:center;gap:.3rem;font-size:.85rem;display:inline-flex}.lives b{font-family:var(--font-display);color:var(--bad)}.mission-title{font-family:var(--font-display);margin:.35rem 0 .1rem;font-size:1.3rem;font-weight:700}.mission-sub{color:var(--ink-soft);margin:0;font-size:1rem}.mission-sub strong{color:var(--accent-dark);font-family:var(--font-display)}.slot-row{justify-content:center;gap:.4rem;margin-top:.55rem;display:flex}.slot{max-width:110px;color:var(--ink-soft);font-size:.8rem;font-family:var(--font-display);transition:all .4s var(--ease);white-space:nowrap;border:2px dashed #1832262e;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:.3rem;padding:.35rem .4rem;display:flex}.slot b{font-size:.9rem}.slot.current{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, white);color:var(--accent-dark);animation:1.4s ease-in-out infinite pulse}.slot.filled{border-style:solid;border-color:var(--good);background:color-mix(in srgb, var(--good) 12%, white);color:#17693a}@keyframes pulse{50%{box-shadow:0 0 0 5px color-mix(in srgb, var(--accent) 20%, transparent)}}.tray{left:50%;bottom:max(22px, env(safe-area-inset-bottom));background:var(--paper);-webkit-backdrop-filter:blur(22px);box-shadow:var(--shadow), inset 0 0 0 1px #ffffffbf;pointer-events:auto;border-radius:24px;flex-wrap:wrap;justify-content:center;gap:.6rem;max-width:calc(100vw - 24px);padding:.6rem;display:flex;position:absolute;translate:-50%}.tray-btn{font-family:var(--font-display);box-shadow:0 4px 0 #1832261f, inset 0 0 0 1.5px var(--line);transition:transform .2s var(--ease), background .2s, opacity .3s;background:#fff;border:0;border-radius:16px;padding:.75rem 1.1rem;font-size:1rem;font-weight:500}.tray-btn:hover{box-shadow:0 6px 0 #1832261f, inset 0 0 0 2px var(--accent);transform:translateY(-2px)}.tray-btn.wrong{box-shadow:0 4px 0 #e5484d4d, inset 0 0 0 2px var(--bad);background:#ffe8e8;animation:.45s shake}.tray-btn.done{opacity:.35;pointer-events:none;text-decoration:line-through}@keyframes shake{20%,60%{transform:translate(-6px)}40%,80%{transform:translate(6px)}}.quiz-progress{background:#18322614;border-radius:99px;height:8px;margin:1rem 0 .2rem;overflow:hidden}.quiz-progress span{background:var(--accent);width:0;height:100%;transition:width .6s var(--ease);border-radius:99px;display:block}.quiz-q{font-family:var(--font-display);text-wrap:balance;margin:1rem 0;font-size:1.45rem;font-weight:600;line-height:1.4}.options{gap:.6rem;display:grid}.option{text-align:left;width:100%;box-shadow:0 4px 0 #1832261a, inset 0 0 0 1.5px var(--line);transition:transform .2s var(--ease), box-shadow .2s, background .2s;background:#fff;border:0;border-radius:16px;align-items:center;gap:.8rem;padding:.75rem .9rem;font-size:1rem;font-weight:500;display:flex}.option:hover:not(:disabled){box-shadow:0 6px 0 #1832261a, inset 0 0 0 2px var(--accent);transform:translateY(-2px)}.option .letter{width:34px;height:34px;font-family:var(--font-display);background:color-mix(in srgb, var(--accent) 14%, white);color:var(--accent-dark);border-radius:11px;flex:none;place-items:center;display:grid}.option:disabled{cursor:default}.option.correct{box-shadow:0 4px 0 #23a55a4d, inset 0 0 0 2px var(--good);background:#e3f7ea}.option.correct .letter{background:var(--good);color:#fff}.option.wrong{box-shadow:0 4px 0 #e5484d4d, inset 0 0 0 2px var(--bad);background:#ffeceb;animation:.45s shake}.option.wrong .letter{background:var(--bad);color:#fff}.option.dim{opacity:.5}.feedback{min-height:0;margin:.8rem 0 0;font-size:.95rem;line-height:1.6}.feedback:empty{display:none}.feedback .fb{animation:swap-in .4s var(--ease);border-radius:16px;gap:.6rem;padding:.8rem .9rem;display:flex}.feedback .fb.ok{color:#14532d;background:#e3f7ea}.feedback .fb.no{color:#7a2e0e;background:#fff1e6}.feedback strong{font-family:var(--font-display)}#quiz-next{margin-top:1rem}#screen-result{place-items:center;padding:80px 16px 24px;display:grid}.result-card{text-align:center;width:min(500px,100%);padding:1.8rem 1.6rem 1.5rem}.stars{justify-content:center;gap:.6rem;margin-top:-3.6rem;display:flex}.stars .star{background:#fffcf5;border-radius:50%;place-items:center;width:78px;height:78px;display:grid;box-shadow:0 12px 26px -10px #16342873,inset 0 0 0 1px #1832260f}.stars .star:nth-child(2){transform:translateY(-14px)scale(1.12)}.stars .star svg{fill:#e6e0d2;width:46px;height:46px;transition:fill .3s}.stars .star.on svg{fill:#ffbf1f;filter:drop-shadow(0 3px #d69200);animation:star-pop .6s var(--ease)}@keyframes star-pop{0%{transform:scale(.2)rotate(-40deg)}60%{transform:scale(1.3)rotate(8deg)}}.result-title{font-family:var(--font-display);margin:1rem 0 .2rem;font-size:2.1rem;font-weight:700}.result-sub{color:var(--ink-soft);margin:0}.result-stats{grid-template-columns:repeat(3,1fr);gap:.6rem;margin:1.2rem 0;display:grid}.stat{background:#1832260d;border-radius:16px;padding:.8rem}.stat b{font-family:var(--font-display);color:var(--accent-dark);font-size:1.6rem;display:block}.stat span{color:var(--ink-soft);font-size:.85rem}.cycle-recap{background:color-mix(in srgb, var(--accent) 9%, white);border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.3rem;margin-bottom:1.2rem;padding:.8rem;display:flex}.cycle-recap .rc{font-family:var(--font-display);background:#fff;border-radius:999px;padding:.35rem .7rem;font-size:.92rem;font-weight:500;box-shadow:0 2px #18322614}.cycle-recap .ar{color:var(--accent-dark)}.cycle-recap .ar svg{width:14px;height:14px}.result-actions{gap:.6rem;display:flex}.result-actions .btn{flex:1}.toast{z-index:40;pointer-events:none;font-family:var(--font-display);color:#fff;-webkit-backdrop-filter:blur(10px);box-shadow:var(--shadow);opacity:0;transition:opacity .3s var(--ease), scale .3s var(--ease);text-align:center;background:#183226e0;border-radius:18px;max-width:min(90vw,460px);padding:.9rem 1.3rem;font-size:1.05rem;font-weight:500;position:absolute;top:50%;left:50%;translate:-50% -50%;scale:.9}.toast.show{opacity:1;scale:1}.toast.good{background:#178246eb}.toast.bad{background:#be3232eb}.howto{background:var(--paper-solid);width:min(480px,100vw - 32px);color:var(--ink);box-shadow:var(--shadow);border:0;border-radius:28px;padding:0}.howto::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#142d2873}.howto[open]{animation:swap-in .4s var(--ease)}.howto-inner{padding:1.6rem}.howto h2{font-family:var(--font-display);margin:0 0 1rem;font-size:1.8rem;font-weight:700}.howto-steps{gap:.9rem;margin:0 0 1.4rem;padding:0;list-style:none;display:grid}.howto-steps li{align-items:flex-start;gap:.9rem;display:flex}.step-num{width:34px;height:34px;font-family:var(--font-display);background:var(--accent);color:#fff;border-radius:12px;flex:none;place-items:center;font-weight:600;display:grid}.howto-steps strong{font-family:var(--font-display);font-weight:600}.howto-steps p{color:var(--ink-soft);margin:.15rem 0 0;font-size:.95rem;line-height:1.6}body.is-focus .vignette{transition:background .6s var(--ease);background:radial-gradient(at 50% 45%,#14323c1f 30%,#14323c73 100%)}.mission-panel{overscroll-behavior:contain;flex-direction:column;gap:.2rem;width:min(620px,100vw - 32px);max-height:calc(100% - 104px);padding:1.4rem 1.5rem 1.5rem;display:flex;position:absolute;top:84px;left:50%;overflow:auto;translate:-50%}.mission-panel-side{left:auto;right:max(20px, env(safe-area-inset-right));width:min(480px,100vw - 40px);translate:0}.screen:not(.active) .mission-panel{opacity:0;transform:translateY(24px)}.screen .mission-panel{transition:transform .6s var(--ease), opacity .6s var(--ease)}.mission-heading{font-family:var(--font-display);text-wrap:balance;margin:.6rem 0 .2rem;font-size:1.7rem;font-weight:700;line-height:1.25}.mission-heading:focus{outline:none}.q-head{align-items:flex-start;gap:.6rem;display:flex}.q-head>h2{flex:1;min-width:0}.speak-btn{background:color-mix(in srgb, var(--accent) 14%, white);width:42px;height:42px;color:var(--accent-dark);box-shadow:0 3px 0 color-mix(in srgb, var(--accent) 30%, transparent);transition:transform .2s var(--ease), background .2s;border:0;border-radius:14px;flex:none;place-items:center;margin-top:.9rem;display:grid}.info-body .speak-btn{margin-top:.4rem}.speak-btn:hover{background:color-mix(in srgb, var(--accent) 22%, white);transform:translateY(-2px)}.speak-btn svg,.speak-btn [data-icon] svg{width:20px;height:20px}.speak-btn:focus-visible,.bin-btn:focus-visible,.mission-pill:focus-visible,.face:focus-visible,.link-btn:focus-visible{outline-offset:2px;box-shadow:0 0 0 6px var(--accent);outline:3px solid #fff}.test-intro,.test-result,.badge-hero{text-align:center;flex-direction:column;align-items:center;gap:.4rem;display:flex}.test-intro-icon,.badge-medal{background:color-mix(in srgb, var(--accent) 16%, white);width:64px;height:64px;color:var(--accent-dark);border-radius:20px;place-items:center;margin:.4rem auto 0;display:grid}.test-intro-icon svg,.badge-medal svg{width:32px;height:32px}.badge-medal{color:#7a4b00;width:84px;height:84px;animation:star-pop .8s var(--ease);background:linear-gradient(160deg,#ffe07a,#ffbf1f);border-radius:50%;box-shadow:0 8px #d69200,0 18px 30px -12px #7a4b0099}.badge-medal svg{width:44px;height:44px}.test-rules{text-align:left;gap:.45rem;width:100%;margin:.6rem 0 1rem;padding:0;list-style:none;display:grid}.test-rules li{background:#1832260d;border-radius:14px;padding:.65rem .9rem;line-height:1.5}.test-rules strong{font-family:var(--font-display);color:var(--accent-dark)}.option.selected{background:color-mix(in srgb, var(--accent) 12%, white);box-shadow:0 4px 0 color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 0 2px var(--accent)}.option.selected .letter{background:var(--accent);color:#fff}.test-nav{gap:.6rem;margin-top:1.1rem;display:flex}.test-nav .btn{flex:1}.test-nav .btn:disabled{opacity:.45;pointer-events:none}.test-score{font-family:var(--font-display);justify-content:center;align-items:baseline;gap:.3rem;margin:.6rem 0 0;display:flex}.test-score b{color:var(--accent-dark);font-size:4rem;line-height:1}.test-score span{color:var(--ink-soft);font-size:1.4rem}.test-result .btn,.badge-hero+.btn,.pledge+.btn{margin-top:1rem}.growth{background:#1832260d;border-radius:18px;flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:1.4rem;width:100%;margin-top:.8rem;padding:1rem;display:flex}.growth-col{color:var(--ink-soft);flex-direction:column;align-items:center;gap:.3rem;font-size:.85rem;display:flex}.growth-col b{font-family:var(--font-display);color:var(--ink);font-size:1.3rem}.growth-bar{background:#18322614;border-radius:14px;align-items:flex-end;width:54px;height:110px;display:flex;overflow:hidden}.growth-bar i{width:100%;animation:grow-up 1s var(--ease);background:#a9b8ae;border-radius:14px;display:block}.growth-col.is-after .growth-bar i{background:linear-gradient(180deg, var(--good), #178046)}@keyframes grow-up{0%{height:0}}.growth-note{color:var(--ink);flex-basis:100%;margin:0}.growth-note strong{font-family:var(--font-display);color:var(--good)}.review{text-align:left;background:#fff7ea;border-radius:16px;width:100%;margin-top:.8rem;padding:.7rem .9rem}.review summary{cursor:pointer;font-family:var(--font-display);font-weight:500}.review ol{gap:.6rem;margin:.6rem 0 0;padding-left:1.2rem;display:grid}.review li p{margin:0;line-height:1.5}.review-ans{color:#17693a}.dots{flex-wrap:wrap;gap:4px;margin:.8rem 0 .2rem;display:flex}.dots span{background:#1832261a;border-radius:99px;flex:1;min-width:10px;height:7px}.dots span.ok{background:var(--good)}.dots span.no{background:var(--bad)}.dots span.now{background:var(--accent)}.animal-figure{flex-direction:column;align-items:center;gap:.2rem;margin:.2rem auto .4rem;display:flex}.animal-figure img{aspect-ratio:1;width:min(210px,46vw);height:auto;animation:swap-in .5s var(--ease);background:#fbf1df;border-radius:24px;box-shadow:0 10px 24px -14px #16342880}.animal-figure figcaption{font-family:var(--font-display);font-size:1.5rem;font-weight:600}.bin-row{grid-template-columns:1fr 1fr;gap:.7rem;display:grid}.bin-btn{text-align:center;box-shadow:0 5px 0 #1832261f, inset 0 0 0 2px var(--line);transition:transform .2s var(--ease), box-shadow .2s, background .2s;background:#fff;border:0;border-radius:18px;flex-direction:column;align-items:center;gap:.2rem;padding:.9rem .8rem;display:flex}.bin-btn strong{font-family:var(--font-display);font-size:1.15rem;font-weight:600}.bin-btn span{color:var(--ink-soft);font-size:.85rem}.bin-btn:hover:not(:disabled){box-shadow:0 7px 0 #1832261f, inset 0 0 0 2px var(--accent);transform:translateY(-2px)}.bin-btn:disabled{cursor:default}.bin-btn.correct{box-shadow:0 5px 0 #23a55a4d, inset 0 0 0 2px var(--good);background:#e3f7ea}.bin-btn.wrong{box-shadow:0 5px 0 #e5484d4d, inset 0 0 0 2px var(--bad);background:#ffeceb;animation:.45s shake}.bin-btn.dim{opacity:.5}.mission-panel>.btn-block{margin-top:.9rem}.matrix{gap:.4rem;margin:.9rem 0 .4rem;display:grid}.matrix-row{grid-template-columns:7.5rem 1fr 1fr;gap:.4rem;display:grid}.matrix-head span{font-family:var(--font-display);text-align:center;color:var(--accent-dark);font-size:.9rem;font-weight:600}.matrix-row [role=rowheader]{font-family:var(--font-display);align-items:center;font-size:.9rem;font-weight:600;display:flex}.matrix-row [role=cell]{background:#1832260d;border-radius:14px;flex-wrap:wrap;align-content:flex-start;gap:.35rem;min-height:76px;padding:.5rem;display:flex}.mini-animal{flex-direction:column;align-items:center;gap:.1rem;font-size:.8rem;font-weight:500;display:inline-flex}.mini-animal img{background:#fbf1df;border-radius:12px;width:44px;height:44px}.empty-cell{color:var(--ink-soft);margin:auto;font-size:.8rem}.think,.pledge{color:#5a4210;background:linear-gradient(135deg,#fff6d6,#fff1c2);border-radius:16px;margin-top:.6rem;padding:.8rem 1rem;line-height:1.6}.think strong,.pledge strong{font-family:var(--font-display);color:#8a5a00}.think p{margin:.15rem 0 0}.pledge ul{margin:.3rem 0 0;padding-left:1.2rem}.situation{margin:.6rem 0 .7rem}.situation-label,.situation-ask{font-family:var(--font-display);color:var(--accent-dark);margin:0;font-weight:500}.situation .quiz-q{margin:.2rem 0 .4rem}.situation .speak-btn{margin-top:.3rem}.survey-list{counter-reset:sv;gap:.8rem;margin:.8rem 0 0;padding:0;list-style:none;display:grid}.survey-list li{counter-increment:sv;background:#1832260a;border-radius:18px;padding:.8rem}.survey-list p{margin:0 0 .6rem;font-weight:600}.survey-list p:before{content:counter(sv) ". ";font-family:var(--font-display);color:var(--accent-dark)}.faces{grid-template-columns:repeat(5,1fr);gap:.35rem;display:grid}.face{color:var(--ink-soft);box-shadow:0 3px 0 #18322614, inset 0 0 0 1.5px var(--line);transition:transform .2s var(--ease), background .2s;background:#fff;border:0;border-radius:14px;flex-direction:column;align-items:center;gap:.2rem;padding:.45rem .2rem;font-size:.72rem;display:flex}.face svg{width:34px;height:34px}.face svg circle:first-child{fill:#ffe38a;stroke:#d9a300;stroke-width:1.5px}.face svg .eye{fill:#5a4210}.face svg .mouth{fill:none;stroke:#5a4210;stroke-width:2.4px;stroke-linecap:round}.face:hover{transform:translateY(-2px)}.face.selected{background:color-mix(in srgb, var(--accent) 14%, white);color:var(--accent-dark);box-shadow:0 3px 0 color-mix(in srgb, var(--accent) 35%, transparent), inset 0 0 0 2px var(--accent);font-weight:600}.join-card{text-align:center;width:min(460px,100vw - 32px)}.field{text-align:left;flex-direction:column;flex:1;gap:.3rem;min-width:0;margin-top:.8rem;display:flex}.field span{font-size:.92rem;font-weight:600}.field input{font:inherit;color:var(--ink);background:#fff;border:0;border-radius:14px;width:100%;padding:.75rem .9rem;font-size:1.05rem;box-shadow:inset 0 0 0 1.5px #1832262e}.field input:focus{box-shadow:inset 0 0 0 2.5px var(--accent);outline:none}.code-input{letter-spacing:.3em;text-align:center;text-transform:uppercase;font-family:var(--font-display)!important;font-size:1.6rem!important}.code-input::placeholder{letter-spacing:.05em;font-size:1rem}.field-row{gap:.6rem;display:flex}.field-no{flex:0 0 5.5rem}.form-error{min-height:1.4em;color:var(--bad);margin:.6rem 0 .4rem;font-size:.92rem;font-weight:600}.join-alt{justify-content:space-between;gap:.5rem;margin-top:.8rem;display:flex}.link-btn{color:var(--ink-soft);text-underline-offset:3px;background:0 0;border:0;border-radius:8px;align-items:center;gap:.3rem;padding:.4rem .2rem;font-size:.92rem;font-weight:600;text-decoration:underline;display:inline-flex}.link-btn:hover{color:var(--ink)}.student-chip{-webkit-backdrop-filter:blur(12px);background:#fffcf5d9;border-radius:18px;align-items:center;gap:.7rem;width:fit-content;max-width:100%;margin:-.6rem 0 1.2rem;padding:.6rem .9rem .6rem .6rem;display:flex;box-shadow:inset 0 0 0 1px #fffc}.student-chip strong{font-family:var(--font-display);font-weight:600;display:block}.student-chip div span{color:var(--ink-soft);font-size:.85rem}.student-avatar{background:var(--accent);color:#fff;border-radius:12px;flex:none;width:40px;height:40px}.title-links{flex-wrap:wrap;gap:1rem;margin-top:1.2rem;display:flex}.title-links a,.settings-links a{color:#fff;text-underline-offset:4px;text-shadow:0 1px 6px #18322680;align-items:center;gap:.35rem;font-size:.92rem;font-weight:600;text-decoration:underline;display:inline-flex}.mission-bar{pointer-events:auto;flex-wrap:wrap;justify-content:center;gap:.45rem;max-width:900px;margin:1rem auto 0;display:flex}.mission-pill{font-family:var(--font-display);-webkit-backdrop-filter:blur(12px);transition:transform .2s var(--ease), background .2s;background:#fffcf5e6;border:0;border-radius:999px;align-items:center;gap:.45rem;padding:.5rem .95rem .5rem .5rem;font-size:.95rem;font-weight:500;display:inline-flex;box-shadow:0 6px 18px -8px #16342873,inset 0 0 0 1px #fffc}.mission-pill:hover{background:#fff;transform:translateY(-2px)}.pill-icon{background:var(--accent);color:#fff;border-radius:50%;place-items:center;width:28px;height:28px;display:grid}.pill-icon svg{width:16px;height:16px}.mission-pill.is-done .pill-icon{background:var(--good)}.mission-pill.is-locked{color:var(--ink-soft)}.mission-pill.is-locked .pill-icon{color:var(--ink-soft);background:#18322626}.card-done{background:var(--good);color:#fff;border-radius:999px;align-items:center;gap:.25rem;padding:.25rem .6rem .25rem .4rem;font-size:.78rem;font-weight:600;display:inline-flex;position:absolute;top:10px;left:10px}.card-done svg{width:14px;height:14px}.saved-note{color:var(--ink-soft);margin:-.4rem 0 1rem;font-size:.88rem}.sync-badge{color:#8a3b00;background:#ffe7c7;border-radius:14px;align-items:center;gap:.3rem;height:44px;padding:0 .8rem;font-size:.85rem;font-weight:600;display:inline-flex}.setting-row{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;padding:.9rem 0;display:flex}.setting-row label{cursor:pointer;flex-direction:column;gap:.15rem;display:flex}.setting-row strong{font-family:var(--font-display);font-weight:600}.setting-row label span{color:var(--ink-soft);font-size:.88rem;line-height:1.5}.switch{appearance:none;cursor:pointer;background:#18322633;border-radius:99px;flex:none;width:52px;height:30px;transition:background .2s;position:relative}.switch:after{content:"";width:24px;height:24px;transition:translate .25s var(--ease);background:#fff;border-radius:50%;position:absolute;top:3px;left:3px;box-shadow:0 2px 4px #0003}.switch:checked{background:var(--good)}.switch:checked:after{translate:22px}.switch:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.settings-profile{background:#1832260d;border-radius:16px;justify-content:space-between;align-items:center;gap:.8rem;margin:1rem 0;padding:.8rem .9rem;display:flex}.settings-profile strong{font-family:var(--font-display);display:block}.settings-profile span{color:var(--ink-soft);font-size:.85rem}.settings-profile .btn svg{width:16px;height:16px}.settings-links{flex-wrap:wrap;gap:1rem;margin-bottom:1.2rem;display:flex}.settings-links a{color:var(--accent-dark);text-shadow:none}@media (width<=1100px){.timeline{border-radius:24px;flex-direction:column;align-items:stretch;top:142px;bottom:auto;left:20px;translate:0}.timeline .tl-arrow,.learn-tools .hint{display:none}}@media (width<=760px){.brand-text{display:none}.phase-steps{padding:.3rem}.phase-animal{display:none}.phase-steps li{gap:0;padding:.3rem;font-size:0}.phase-steps li span{font-size:.75rem}.phase-steps li.active{gap:.35rem;padding-right:.7rem;font-size:.8rem}.icon-btn{width:40px;height:40px}#help-btn{display:none}#screen-title{padding-bottom:max(24px, env(safe-area-inset-bottom));align-items:flex-end}.title-lead{font-size:.98rem}.info-panel,.quiz-panel{top:auto;bottom:max(12px, env(safe-area-inset-bottom));width:auto;max-height:56%;padding:1.1rem;left:12px;right:12px}.screen:not(.active) .info-panel,.screen:not(.active) .quiz-panel{transform:translateY(40px)}.info-name{font-size:2rem}.info-desc{font-size:.96rem;line-height:1.7}.fact{padding:.7rem .8rem}.panel-dots{display:flex}.timeline{display:none}.learn-tools{top:74px;left:12px}.quiz-q{margin:.7rem 0;font-size:1.2rem}.mission-card{padding:.65rem .8rem .75rem;top:68px}.mission-title{font-size:1.1rem}.mission-sub{font-size:.9rem}.slot{flex-direction:column;gap:0;padding:.3rem .2rem;font-size:.7rem}.tray-btn{padding:.65rem .9rem;font-size:.92rem}.card{width:250px}.cards{justify-content:flex-start;margin:0 -20px;padding:.5rem 20px}.mission-panel,.mission-panel-side{width:auto;max-height:calc(100% - 80px);padding:1.1rem;top:68px;left:10px;right:10px;translate:0}.mission-heading{font-size:1.35rem}.matrix-row{grid-template-columns:5rem 1fr 1fr}.face span{font-size:.62rem}.sync-badge span:last-child{display:none}.sync-badge{height:40px;padding:0 .6rem}.mission-bar{scrollbar-width:none;flex-wrap:nowrap;justify-content:flex-start;margin:.8rem -20px 0;padding:.3rem 20px .6rem;overflow-x:auto}.mission-pill{flex:none;font-size:.85rem}.result-stats .stat b{font-size:1.3rem}.stars .star{width:64px;height:64px}.stars .star svg{width:38px;height:38px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}.group-badge{background:color-mix(in srgb, var(--accent) 18%, white);color:var(--accent-dark)}.setting-sub{padding-left:1rem}.select{font:inherit;border:1.5px solid var(--line);color:var(--ink);background:#fff;border-radius:12px;flex:none;padding:.45rem .7rem}.talk-box{background:color-mix(in srgb, var(--accent) 10%, white);box-shadow:inset 0 0 0 1.5px color-mix(in srgb, var(--accent) 35%, transparent);animation:swap-in .4s var(--ease);border-radius:18px;margin:0 0 .8rem;padding:.85rem .95rem}.talk-head{font-family:var(--font-display);align-items:center;gap:.5rem;display:flex}.talk-head strong{flex:1;font-weight:600}.talk-icon svg{width:22px;height:22px;color:var(--accent-dark)}.talk-timer{font-variant-numeric:tabular-nums;color:var(--accent-dark);background:#fff;border-radius:99px;padding:.1rem .6rem;font-weight:600}.talk-steps{gap:.35rem;margin:.6rem 0 0;padding:0;font-size:.85rem;list-style:none;display:flex}.talk-steps li{text-align:center;color:var(--ink-soft);background:#ffffffb3;border-radius:10px;flex:1;padding:.25rem .4rem;transition:background .3s,color .3s}.talk-steps li.on{background:var(--accent);color:#fff;font-weight:600}.talk-prompt{font-family:var(--font-display);margin:.6rem 0 .5rem;font-size:1.05rem;font-weight:500;line-height:1.5}.talk-bar{background:#fffc;border-radius:99px;height:6px;margin-bottom:.6rem;overflow:hidden}.talk-bar span{background:var(--accent);width:0;height:100%;transition:width 1s linear;display:block}.talk-box.is-done{padding:.6rem .85rem}.talk-box.is-done .talk-bar,.talk-box.is-done .talk-steps{display:none}.talk-box.is-done .talk-prompt{margin:.3rem 0 0;font-size:.98rem}.options.is-waiting .option{opacity:.45;filter:grayscale(.4)}.talk-wrap{background:color-mix(in srgb, var(--accent) 10%, white);text-align:left;border-radius:16px;margin:.9rem 0 0;padding:.8rem 1rem}.talk-wrap-title{font-family:var(--font-display);color:var(--accent-dark);align-items:center;gap:.4rem;margin:0;font-weight:600;display:flex}.talk-wrap-title svg{width:20px;height:20px}.talk-wrap ol{margin:.35rem 0 0;padding-left:1.2rem;line-height:1.6}body.is-group .quiz-panel{width:min(520px,100vw - 40px)}body.is-group .quiz-q{font-size:1.75rem;line-height:1.4}body.is-group .option{padding:.9rem 1rem;font-size:1.2rem}body.is-group .option .letter{width:40px;height:40px;font-size:1.15rem}body.is-group .info-desc,body.is-group .fact-text,body.is-group .feedback{font-size:1.15rem}body.is-group .talk-prompt{font-size:1.25rem}@media (prefers-reduced-motion:reduce){.talk-bar span{transition:none}}