.f66-top,.f66-heading,.f66-question,.f66-round,.f66-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.f66-top{justify-content:space-between;font-size:1rem}.f66-heading{justify-content:space-between;margin:14px 0}.f66-heading h1{font-size:clamp(1.8rem,4vw,2.5rem);line-height:1.2;margin:0}.f66-locale{display:grid;gap:4px;font-size:.9rem}.f66-locale select,#f66-pilot select,#f66-pilot textarea{font:inherit;min-height:46px;border:2px solid #b4cbea;border-radius:12px;padding:8px;background:#fff;color:#173668}.f66-feature{display:flex;align-items:center;background:#e6f3ff;border:3px solid white;border-radius:24px;padding:20px;gap:18px}.f66-feature>img{width:95px;height:140px;object-fit:contain;background:#badfff;border-radius:18px}.f66-feature p,.f66-entry p,.f66-note{font-size:1rem;line-height:1.5}.f66-feature h2{margin:0}.f66-lessons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:16px 0}.f66-lesson{display:grid;grid-template-columns:38px 1fr;gap:5px 12px;text-align:left;background:white;border:2px solid #b4cbea;border-radius:18px;padding:16px;color:#173668}.f66-lesson>span{grid-row:span 2;background:#edff37;border-radius:12px;text-align:center;align-self:center;padding:8px;font-weight:900}.f66-lesson strong{font-size:1.1rem}.f66-lesson small{font-size:.875rem}.f66-board{background:#e8f4ff;border:3px solid #fff;padding:20px;border-radius:24px;color:#14366c}.f66-round{justify-content:space-between;font-weight:800;margin-bottom:14px}.f66-round progress{max-width:160px;height:10px}.f66-question{flex-wrap:nowrap;align-items:center;margin:0 0 16px}.f66-question h2{flex:1;font-size:clamp(1.65rem,4.6vw,2.25rem);line-height:1.2;margin:0}.f66-question button{flex-shrink:0;min-width:48px;min-height:48px}.f66-balloons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;max-width:650px;margin:auto}.f66-balloon{position:relative;aspect-ratio:4/5;min-height:150px;border:4px solid transparent;background:transparent;border-radius:20px;padding:0;cursor:pointer;color:#142e56}.f66-balloon-art{position:absolute;inset:0;background:var(--balloon);mask:url('/assets/balloon-pearl75.webp') center/contain no-repeat;-webkit-mask:url('/assets/balloon-pearl75.webp') center/contain no-repeat}.f66-balloon-art:after{content:'';position:absolute;inset:0;background:url('/assets/balloon-pearl75.webp') center/contain no-repeat;mix-blend-mode:multiply}.f66-balloon-content{position:absolute;inset:12% 15% 35%;display:grid;place-items:center;font-size:clamp(2.6rem,8vw,4.5rem);font-weight:900;text-shadow:0 1px #fff}.f66-balloon:focus-visible,.f66-hint{outline:5px solid #143e93;outline-offset:2px}.f66-popped{opacity:.3;transform:scale(.86);transition:transform .2s,opacity .2s}.f66-try{outline:3px solid #846fba}.f66-dots{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;width:78%;max-width:100px}.f66-dots i{width:100%;aspect-ratio:1;background:#16376b;border:2px solid #fff;border-radius:50%}.f66-trace-wrap{background:white;border:2px solid #a7c2e6;border-radius:18px;overflow:hidden}#f66-canvas{display:block;width:100%;height:auto;aspect-ratio:3/2;touch-action:none;user-select:none}.f66-entry{margin:16px 0;padding:16px;background:#e8f3ff;border:2px solid white;border-radius:20px}.f66-actions button{min-height:46px;font-size:1rem}.f66-report,.f66-review-list{display:grid;gap:12px}.f66-report article,.f66-review-list article{padding:12px;border:1px solid #bbcdea;border-radius:14px;background:white}.f66-review-list{max-height:450px;overflow:auto}.f66-review-list button{font-size:.9rem;margin:4px;min-height:44px}#f66-pilot{display:grid;gap:12px}#f66-pilot label{display:grid;gap:6px;font-size:1rem}#f66-pilot textarea{min-height:100px}.f66-finish{text-align:center;padding:20px}.f66-note{color:#435b7e}#f66-feedback:empty{display:none}@media(min-width:850px){.f66-balloons{grid-template-columns:repeat(var(--choices),minmax(0,1fr));max-width:900px}}@media(max-width:500px){.f66-board{padding:14px 10px}.f66-question button{padding:10px;font-size:.9rem}.f66-lessons{gap:9px}.f66-lesson{padding:12px 9px;grid-template-columns:1fr}.f66-lesson>span{grid-row:auto;width:35px}.f66-heading h1{font-size:1.8rem}.f66-feature{padding:14px}.f66-feature>img{width:65px;height:100px}.f66-balloons{gap:8px}.f66-dots{gap:3px}}@media(prefers-reduced-motion:reduce){.f66-popped{transition:none}}

/* Keep every writing system readable on narrow screens. */
.f66-heading,.f66-locale{min-width:0;max-width:100%}.f66-locale select{max-width:100%;width:100%;box-sizing:border-box}.f66-question h2{overflow-wrap:anywhere}.f66-lesson strong{overflow-wrap:anywhere}.f66-question:lang(th) h2,.f66-lesson:lang(th) strong{line-height:1.6}.f66-question:lang(ja) h2,.f66-question:lang(zh) h2,.f66-question:lang(ko) h2{line-height:1.45}@media(max-width:500px){.f66-locale{width:100%}.f66-question{flex-wrap:wrap}.f66-question h2{flex-basis:100%}}
/* Vietnamese support accompanies every foreign activity label. */
.f68-pair{display:inline-block;min-width:0;max-width:100%}.f68-native,.f68-vietnamese{display:block;overflow-wrap:anywhere}.f68-vietnamese{font-size:.85em;line-height:1.45;font-weight:600;margin-top:5px;color:#284b76}.f66-lesson .f68-vietnamese,.f66-actions .f68-vietnamese{font-size:.95rem}.f66-question h2 .f68-vietnamese{font-size:1.15rem}.f66-lesson small .f68-vietnamese{font-size:.875rem}.f66-lesson strong{line-height:1.35}

/* Large, separate listening controls and glossy birthday balloons. */
.f66-question{flex-wrap:wrap}.f66-question h2{flex-basis:100%;line-height:1.35}
.f75-listen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
.f75-listen:has(>button:only-child){grid-template-columns:minmax(0,1fr)}
.f75-listen .secondary{display:flex;justify-content:center;gap:10px;min-width:0;min-height:72px;padding:12px;color:#173668;border-radius:18px;background:#e8f6ff;border-color:#a9cdfb;box-shadow:0 5px 0 #c3d9f8}
.f75-listen button:last-child{background:#fff9dd}.f75-listen span{display:grid;gap:4px;text-align:left;min-width:0}.f75-listen strong{font-size:1.05rem;overflow-wrap:anywhere}.f75-listen small{font-size:.9rem;font-weight:600}.f75-listen svg{flex-shrink:0}
.f66-board:has(.f66-balloons){background:linear-gradient(145deg,#fff2f8,#edf8ff 65%,#fff7dc)}
.f66-balloons{padding:12px 0}.f66-balloon{isolation:isolate}
.f66-balloon-art{background:radial-gradient(ellipse at 26% 18%,#ffffffd9 0,transparent 25%),radial-gradient(ellipse at 73% 68%,#ffffff55,transparent 50%),var(--balloon);filter:drop-shadow(0 8px 6px #31548318)}
.f66-balloon-content{inset:20% 17% 36%;text-shadow:0 2px 0 #fff}.f66-dots{width:84%;max-width:105px;filter:drop-shadow(0 1px 1px #fff)}
.f66-letter-board{background:linear-gradient(145deg,#ffeaf6 0,#e8f8ff 48%,#fff8c9 100%);box-shadow:inset 0 0 0 2px #ffffffb8}
.f66-letter-question{margin-bottom:8px}
.f66-letter-question h2{display:none}
.f66-audio-cue{display:inline-flex;align-items:center;gap:8px;border:3px solid #bcd4ff;border-radius:18px;background:#fff;color:#173668;padding:10px 14px;font-weight:900}
.f66-letter-grid{max-width:760px;gap:18px}
.f66-letter-card{aspect-ratio:1;min-height:180px;background:radial-gradient(circle at 25% 18%,#ffffffcc 0 18%,transparent 32%),linear-gradient(145deg,var(--card,#edff1c),var(--card2,#fff77a));border:5px solid #fff;border-radius:28px;box-shadow:0 10px 0 color-mix(in srgb,var(--card,#edff1c) 65%,#7590b7),0 20px 34px #173a7824;color:#123b78;display:grid;place-items:center;padding:10px;transform:translateY(0)}
.f66-letter-card:nth-child(even){background:radial-gradient(circle at 25% 18%,#ffffffcc 0 18%,transparent 32%),linear-gradient(145deg,var(--card,#ff9ed1),var(--card2,#ffd8ec))}
.f66-letter-card:focus-visible,.f66-letter-card.f66-hint{outline:0;border-color:#123f95;box-shadow:0 0 0 6px #123f9530,0 10px 0 #87aee9,0 20px 34px #173a7824}
.f66-letter-main{font:900 clamp(5.6rem,20vw,9.2rem)/.9 Nunito,Arial,sans-serif;letter-spacing:0;color:#123b78;text-shadow:0 3px 0 #ffffffb8}
.f66-letter-lower{font:900 clamp(1.7rem,5.5vw,2.45rem)/1 Nunito,Arial,sans-serif;color:#284b76;margin-top:4px;text-shadow:0 1px 0 #fff}
.f66-color-board,.f66-number-board{background:linear-gradient(145deg,#fff3fa 0,#e8f8ff 55%,#fff7c8 100%);box-shadow:inset 0 0 0 2px #ffffffc7}
.f66-color-grid,.f66-number-grid{max-width:760px;gap:18px}
.f66-color-card{aspect-ratio:1;min-height:170px;background:linear-gradient(145deg,#fff,#eef7ff);border:5px solid #fff;border-radius:28px;box-shadow:0 10px 0 #bcd4ef,0 20px 34px #173a7824;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;align-items:center;justify-items:center;padding:14px;color:#123b78}
.f66-color-swatch{position:relative;width:100%;height:100%;min-height:0;overflow:hidden;border-radius:18px;background:#f5fafb}
.f66-color-swatch img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.f66-color-card strong{font:900 clamp(1.15rem,4.5vw,1.65rem)/1.1 Nunito,Arial,sans-serif;text-transform:capitalize}
.f66-number-card{aspect-ratio:4/5;min-height:225px;background:#ffffff;border:5px solid #fff;border-radius:30px;box-shadow:0 10px 0 #bcd4ef,0 22px 36px #173a7828;overflow:hidden;display:grid;place-items:center;padding:6px;color:#092e66}
.f66-number-art{width:100%;height:100%;display:grid;place-items:center;background:#fff;border-radius:24px;overflow:hidden}
.f66-number-art img{width:100%;height:100%;display:block;object-fit:contain;object-position:center center;filter:drop-shadow(0 8px 8px #173a7820)}
.f66-color-card:focus-visible,.f66-color-card.f66-hint,.f66-number-card:focus-visible,.f66-number-card.f66-hint{outline:0;border-color:#123f95;box-shadow:0 0 0 6px #123f9530,0 10px 0 #87aee9,0 20px 34px #173a7824}
@media(max-width:380px){.f75-listen{gap:8px}.f75-listen .secondary{padding:10px 6px;gap:6px}.f75-listen strong{font-size:.95rem}}
@media(max-width:500px){.f66-color-grid,.f66-number-grid{gap:12px}.f66-color-card{min-height:145px;border-radius:24px}.f66-number-card{min-height:190px;border-radius:26px;padding:5px}}

/* Letter suggestion demo: one letter, four clear picture choices. */
.f66-letter-demo{background:#0047ab;border:4px solid #fff;border-radius:30px;padding:18px;color:#082f6d;box-shadow:inset 0 0 0 2px #75c7ff,0 18px 38px #082f6d24}
.f66-demo-strip{max-width:760px;margin:0 auto 92px;display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:6px}
.f66-demo-strip button{min-height:38px;border:2px solid #ffffffcc;border-radius:12px;background:#ffffff;color:#0a3675;font-weight:900;box-shadow:0 4px 0 #b7d2f1}
.f66-demo-strip button.selected{background:#edff37;border-color:#faffb2;box-shadow:0 4px 0 #93bd17}
.f66-letter-demo-card{position:relative;max-width:760px;margin:0 auto;background:#fff;border:8px solid #dcff1f;border-radius:34px;padding:96px 16px 20px;box-shadow:0 12px 0 #80af23,0 22px 36px #00295f35}
.f66-letter-demo-badge{position:absolute;top:-84px;left:50%;transform:translateX(-50%);width:min(360px,72vw);height:150px;display:grid;place-items:center;background:linear-gradient(145deg,#edff37,#caff16);border:8px solid #faffb2;border-radius:34px;box-shadow:0 10px 0 #8fbd18,0 18px 28px #123b7828;color:#062f74;font:900 7.8rem/.9 Nunito,Arial,sans-serif;text-shadow:0 4px 0 #ffffffaa}
.f66-letter-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;border-radius:24px;overflow:hidden;background:#d8e4f4}
.f66-letter-demo-tile{min-height:315px;background:#fff;border:0;border-right:2px dashed #b8c6da;border-bottom:2px dashed #b8c6da;border-radius:0;padding:16px 10px 20px;display:grid;grid-template-rows:minmax(0,1fr) auto auto;justify-items:center;align-items:end;color:#092f69;cursor:pointer}
.f66-letter-demo-tile:nth-child(even){border-right:0}.f66-letter-demo-tile:nth-child(n+3){border-bottom:0}
.f66-letter-demo-tile:focus-visible{outline:6px solid #edff37;outline-offset:-8px}
.f66-demo-picture{width:100%;height:238px;display:grid;place-items:center;overflow:hidden;background:#fff;isolation:isolate}
.f66-demo-picture img{width:100%;height:100%;object-fit:contain;object-position:center center;filter:none!important;mix-blend-mode:normal}
.f66-demo-emoji{font-size:clamp(5rem,18vw,9rem);line-height:1;align-self:center;filter:drop-shadow(0 8px 8px #0b3b7a22)}
.f66-letter-demo-tile strong{margin-top:8px;min-width:70%;padding:8px 18px;border-radius:18px;background:#fff3dc;box-shadow:inset 0 0 0 2px #f7dfb5,0 5px 10px #0b3b7a18;color:#062f74;font:900 clamp(1.35rem,4vw,2rem)/1.05 Nunito,Arial,sans-serif}
.f66-letter-demo-tile strong span{color:#0047ab}
.f66-letter-demo-tile small{margin-top:5px;color:#36587d;font-weight:800;font-size:.95rem}
.f66-demo-actions{max-width:760px;margin:16px auto 0;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}.f66-demo-actions button{min-height:52px}
@media(max-width:520px){.f66-letter-demo{padding:12px 8px 16px;border-radius:24px}.f66-demo-strip{grid-template-columns:repeat(9,minmax(0,1fr));gap:5px;margin-bottom:76px}.f66-demo-strip button{min-height:34px;border-radius:10px;padding:4px}.f66-letter-demo-card{padding:74px 8px 12px;border-width:6px;border-radius:28px}.f66-letter-demo-badge{top:-68px;height:122px;border-radius:28px;font-size:6rem}.f66-letter-demo-grid{border-radius:22px}.f66-letter-demo-tile{min-height:270px;padding:10px 5px 14px}.f66-demo-picture{height:178px}.f66-letter-demo-tile strong{padding:7px 10px;border-radius:14px;font-size:1.05rem;max-width:96%;overflow-wrap:anywhere}.f66-letter-demo-tile small{font-size:.82rem;line-height:1.25}.f66-demo-actions{gap:8px}.f66-demo-actions button{width:100%}}

.f66-word-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:14px 0}.f66-word-controls article{background:white;border:1px solid #c8e5f2;border-radius:18px;padding:14px;display:grid;gap:6px;align-content:start}.f66-word-controls strong{color:#0954ba;font-size:1.15rem;overflow-wrap:anywhere}.f66-word-controls span,.f66-word-controls small{color:#344a69}.f66-word-controls article>div{display:flex;flex-wrap:wrap;gap:6px}.f66-word-controls button{font-size:.9rem;padding:10px 12px;min-height:44px}.f66-full-letter-target:disabled{cursor:wait}
