@font-face{font-family:Atkinson;src:url("./fonts/atkinson-regular.ttf") format("truetype");font-weight:400;font-display:swap}
@font-face{font-family:Atkinson;src:url("./fonts/atkinson-bold.ttf") format("truetype");font-weight:700;font-display:swap}
@font-face{font-family:Bungee;src:url("./fonts/bungee.ttf") format("truetype");font-weight:400;font-display:swap}
:root{--ink:#133d42;--muted:#4b6669;--ground:#27b9a8;--paper:#f4f8f6;--yellow:#ffe068;--coral:#ff816d;--line:#c6d6d1;--blue:#133d42;--blue-dark:#08282c;--mint:#19876c;--shadow:0 10px 28px #133d4214;font-family:Atkinson,system-ui,sans-serif;color:var(--ink);font-size:17px}
*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--ground)}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.5}button,input,select{touch-action:manipulation}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:3px solid #125fe6;outline-offset:4px}::selection{background:var(--yellow);color:var(--ink)}input{caret-color:#117464}*{scrollbar-color:#7dada2 #e3efea;scrollbar-width:thin}a{text-underline-offset:3px}h1,h2,p{margin-top:0}h1,h2{font-family:Bungee,Atkinson,sans-serif;font-weight:400;line-height:1.25;text-wrap:balance}button{transition:background .16s,transform .16s,color .16s}button:hover:not(:disabled){filter:brightness(.96)}button:active:not(:disabled){transform:translateY(2px)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[hidden]{display:none!important}.icon-defs{position:absolute;width:0;height:0;overflow:hidden}.icon{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.site-header{display:flex;justify-content:space-between;align-items:center;padding:18px max(24px,calc((100vw - 1240px)/2));gap:24px;background:var(--ink);color:white;min-height:94px}.brand{display:flex;align-items:center;gap:12px;font-family:Bungee,Atkinson,sans-serif;font-size:1.22rem;line-height:1.3}.brand small{display:block;font-family:Atkinson,sans-serif;font-weight:700;letter-spacing:.15em;font-size:.65rem;margin-top:4px;color:#a1d8ca}.brand-mark{display:grid;place-items:center;transform:rotate(-7deg);width:49px;height:49px;border-radius:12px;background:var(--yellow);color:var(--ink);font-size:1.55rem}.header-right,.audio-controls{display:flex;align-items:center;gap:10px}.header-toggle{display:flex;gap:8px;align-items:center;background:transparent;border:1px solid #7baa9f;color:white;min-height:42px;border-radius:8px;padding:7px 12px;font-size:.85rem}.header-toggle>span:first-child{display:none}.header-toggle[aria-pressed="false"]{color:#b5d8ce;border-color:#517c72}.progress-pill{display:flex;align-items:center;gap:9px;background:var(--yellow);color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;white-space:nowrap}.progress-pill .icon{fill:var(--ink);width:18px;height:18px}
.mission-bar{max-width:1240px;margin:24px auto;display:flex;align-items:center;gap:24px;padding:19px 24px;background:var(--yellow);border-radius:12px}.mission-bar>div:first-child{flex:1}.mission-bar strong{display:block;font-size:1.2rem}.mission-bar span#missionHint{display:block;margin-top:4px;font-size:.9rem}.mission-start{display:flex;align-items:center;gap:10px;border:0;color:white;background:var(--ink);padding:12px 19px;border-radius:8px;font-weight:700;white-space:nowrap}.mission-steps{display:flex;gap:7px}.mission-step{width:26px;height:26px;border:1px solid #a88b21;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700}.mission-step.done{background:var(--ink);border-color:var(--ink);color:var(--yellow)}.mission-step.current{outline:2px solid var(--ink);outline-offset:2px}
.workspace{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:178px minmax(0,1fr);gap:28px;padding-bottom:32px}.trail{align-self:start;padding-top:13px}.trail-heading{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 18px}.trail h2{font-family:Atkinson,sans-serif;font-size:1rem;font-weight:700;margin:0}.trail-count{font-size:.8rem;white-space:nowrap}.word-list{display:grid;gap:6px}.word-chip{display:flex;align-items:center;gap:10px;width:100%;padding:7px 10px;border:0;border-radius:8px;background:transparent;color:var(--ink);font-weight:700;min-height:42px;text-align:left}.word-chip:hover{background:#ffffff40}.word-chip.active{background:var(--ink);color:white}.word-number{width:27px;height:27px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%;font-size:.8rem;font-variant-numeric:tabular-nums;flex-shrink:0}.word-chip.done .word-number{background:#d9fff0;color:var(--ink);border:0}.word-chip.done .word-number::before{content:"✓"}.word-chip.done .word-number span{display:none}.word-chip.active .word-number{background:var(--yellow);color:var(--ink);border:0}.trail-tip{font-size:.85rem;line-height:1.4;margin:12px 10px}.pack-progress{margin:22px 10px 0;font-weight:700;font-size:.9rem}.word-label{overflow:hidden;text-overflow:ellipsis}
.game{min-width:0}.game-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin:8px 0 18px}.heading-copy h1{font-size:1.35rem;margin:0 0 5px}.heading-copy p{font-size:.95rem;margin:0}.level-control{display:flex;flex-direction:column;gap:3px;font-size:.75rem;font-weight:700}.level-control select{border:1px solid var(--ink);border-radius:6px;background:transparent;color:var(--ink);padding:5px 7px;font-size:.88rem;min-height:36px}.game-toolbar{display:flex;align-items:center;gap:12px;margin:0 0 12px}.word-position{margin-right:auto;font-size:.85rem;font-weight:700}.voice-control{display:flex;align-items:center;gap:6px;font-size:.75rem}.voice-control select{max-width:135px;border:0;background:transparent;color:var(--ink);font-size:.85rem;font-weight:700;min-height:36px}.hear-small{display:flex;align-items:center;gap:7px;background:transparent;border:0;font-weight:700;color:var(--ink);font-size:.85rem;min-height:40px;padding:5px}
.mode-tabs{display:flex;gap:0;background:var(--ink);padding:6px 6px 0;border-radius:12px 12px 0 0;overflow:auto}.mode-tab{position:relative;flex:1;display:flex;justify-content:center;align-items:center;gap:8px;border:0;border-radius:8px 8px 0 0;min-height:58px;background:transparent;color:#c1e1d8;font-weight:700;font-size:.94rem;padding:10px;white-space:nowrap}.mode-tab.active{background:white;color:var(--ink)}.mode-tab.done:not(.active)::after{content:"";position:absolute;width:5px;height:5px;bottom:5px;background:var(--yellow);border-radius:50%}
.activity-card{position:relative;background:white;border-radius:0 0 14px 14px;min-height:455px;padding:32px 36px;box-shadow:var(--shadow);overflow:hidden}.activity{display:none}.activity.active{display:block}.activity-top{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:0 0 10px}.activity-top h2{font-size:clamp(1.45rem,2.6vw,2.15rem);margin:0}.skill-tag{border:1px solid var(--line);padding:5px 7px;border-radius:4px;font-size:.65rem;font-weight:700;letter-spacing:.04em;white-space:nowrap}.instruction{color:var(--muted);font-size:1rem;line-height:1.5;max-width:65ch;margin-bottom:25px}.listen-arena{display:grid;grid-template-columns:180px minmax(0,1fr);gap:32px;align-items:center;margin:36px 0 24px}.sound-button{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:19px;min-height:175px;width:175px;border-radius:50%;border:0;background:var(--yellow);color:var(--ink);font-weight:700;font-size:1rem}.sound-wave{display:flex;align-items:center;justify-content:center;gap:7px;height:46px}.sound-wave i{display:block;width:7px;border-radius:4px;height:22px;background:var(--ink);animation:wave 2s ease-in-out infinite alternate}.sound-wave i:nth-child(2),.sound-wave i:nth-child(4){height:34px;animation-delay:-.6s}.sound-wave i:nth-child(3){height:46px;animation-delay:-1.1s}.speaking .sound-wave i{animation-duration:.25s}.answer-form{min-width:0}.answer-form>label{display:block;font-weight:700;margin:0 0 10px}.input-row{display:flex;gap:10px}.answer-input{width:100%;min-width:0;flex:1;min-height:58px;border:2px solid #91aaa3;background:var(--paper);border-radius:8px;padding:12px 15px;font-size:1.5rem;color:var(--ink);font-weight:700}.answer-input::placeholder{font-size:1rem;color:#637975;font-weight:400}.primary,.secondary{min-height:46px;padding:10px 18px;border-radius:8px;font-weight:700}.primary{border:0;background:var(--ink);color:white}.secondary{background:white;color:var(--ink);border:1px solid #92aca4}.link-button{background:transparent;border:0;color:var(--ink);padding:9px 2px;text-decoration:underline;text-underline-offset:4px;font-weight:700;min-height:42px}.feedback{min-height:25px;margin:16px 0 0;font-size:1rem;font-weight:700;text-align:center;line-height:1.4}.feedback.good{color:#137555}.feedback.try{color:#a73c25}.sentence-clue{background:#eef7f3;border-radius:8px;padding:12px 16px;color:var(--ink);margin:5px 0 0}.action-row{display:flex;justify-content:center;flex-wrap:wrap;gap:10px}.footer-note{display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:.75rem;margin:17px 0;color:var(--ink)}.footer-note>span{margin-right:auto}.footer-note button{border:0;background:transparent;color:var(--ink);font-size:.75rem;min-height:36px;text-decoration:underline;text-underline-offset:3px}
.build-stage{margin:0 0 20px}.build-picture{text-align:center;font-size:1.1rem;color:var(--ink);margin:0 0 18px;font-weight:700}.build-slots,.tile-tray,.paint-letters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}.build-slot{position:relative;width:64px;height:76px;border:2px dashed #7f9d94;border-radius:8px;background:#eff6f2;color:#506a61;font-size:2rem;font-weight:700}.build-slot::after{content:attr(data-position);font-size:.65rem;position:absolute;bottom:3px;left:0;right:0;text-align:center}.build-slot.filled{background:#e0f4ed;color:var(--ink);border:2px solid #3e8b75;animation:tileLand .22s ease-out}.build-slot.drop-ready{background:var(--yellow);border-color:var(--ink)}.build-slot.drop-wrong{border-color:#b84b35}.build-tray-heading{display:flex;justify-content:space-between;margin:0 0 12px;font-size:.8rem;color:var(--muted);font-weight:700}.tile-tray{min-height:72px;margin:0 0 24px}.letter-tile,.drag-ghost{display:grid;place-items:center;width:57px;height:65px;border-radius:8px;background:var(--yellow);color:var(--ink);border:1px solid #c09d26;font-size:1.9rem;font-weight:700;touch-action:none;user-select:none}.letter-tile:nth-child(3n+2){background:#bcead9;border-color:#5a9e88}.letter-tile:nth-child(3n){background:#ffc0b2;border-color:#c97461}.letter-tile:disabled{opacity:.23}.letter-tile.is-origin{opacity:.25}.drag-ghost{position:fixed;z-index:50;pointer-events:none;transform:translate(-50%,-50%) scale(1.08);box-shadow:0 8px 20px #133d4230}.tile-reject{animation:shake .25s ease-out}.tile-hint{outline:3px solid var(--ink)}
.model-word{font-size:2.3rem;letter-spacing:.08em;font-weight:700;text-align:center;margin:14px auto}.memory-stage{background:var(--paper);border-radius:12px;padding:18px;text-align:center;margin:0 0 25px;min-height:180px}.memory-stage .model-word{font-size:3rem;margin:5px auto 8px;min-height:64px}.memory-stage #memoryStatus{display:block;font-size:.85rem;margin-bottom:12px}.memory-stage .secondary{min-height:36px;padding:6px 13px;font-size:.85rem}.memory-stage.revealing{background:#fff5c9}.memory-stage.covered .model-word{letter-spacing:.16em;color:#657c74}
.studio-switch{display:flex;gap:5px;margin:16px 0}.studio-switch button{padding:8px 12px;min-height:40px;border:1px solid var(--line);border-radius:7px;background:white;color:var(--ink);font-size:.9rem}.studio-switch button[aria-pressed="true"]{background:var(--ink);color:white;border-color:var(--ink)}#colourWord{display:none}.paint-palette{display:flex;justify-content:center;gap:15px;margin:16px}.paint-choice,.ink-swatch{width:38px;height:38px;border:3px solid white;border-radius:50%;background:var(--swatch);outline:1px solid #81988f}.paint-choice.active,.ink-swatch.active{outline:3px solid var(--ink);outline-offset:2px}.paint-letters{margin:20px auto 24px}.paint-letter{position:relative;min-width:62px;min-height:79px;padding:5px 12px;border:2px solid #91a99f;background:white;color:var(--ink);font-size:2.3rem;font-weight:700;border-radius:8px}.paint-letter[aria-pressed="true"]{background:var(--yellow);border-color:var(--ink)}.paint-letter[aria-pressed="true"]::after{content:"✓";font-size:.8rem;position:absolute;bottom:2px;right:5px}#finishColour{display:block;margin:auto}.painted{animation:tileLand .22s}
.trace-tools{display:flex;gap:12px;justify-content:center;align-items:center;flex-wrap:wrap;margin:0 0 18px}.tool-group{display:flex;align-items:center;gap:10px}.tool-label{font-size:.8rem;color:var(--muted);font-weight:700}.ink-swatch{width:30px;height:30px}.pen-style{min-height:40px;border:0;border-radius:6px;background:var(--paper);color:var(--ink);font-size:.85rem;padding:7px 10px}.pen-style.active{background:var(--ink);color:white}.trace-letter-strip{display:flex;gap:7px;justify-content:center;margin:0 0 12px}.trace-letter-chip{display:grid;place-items:center;position:relative;width:34px;height:34px;border-radius:6px;border:1px solid var(--line);color:#5a7167;font-weight:700}.trace-letter-chip.current{background:var(--yellow);border-color:#a88b21}.trace-letter-chip.done{background:#d0efe0;color:#135a3d}.trace-letter-chip.done::after{content:"✓";position:absolute;right:-4px;top:-7px;font-size:.75rem}.trace-board-wrap{position:relative}.trace-board{width:100%;height:255px;display:block;border:1px solid #91aba0;border-radius:10px;touch-action:none;cursor:crosshair;background:var(--paper)}.trace-guide{position:absolute;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#133d42;color:white;font-size:1.5rem;transform:translate(-50%,-50%) rotate(var(--guide-angle,90deg));pointer-events:none;box-shadow:0 3px 8px #133d4230}.trace-guide.hidden{display:none}.trace-progress{display:flex;align-items:center;gap:15px;margin:14px auto;max-width:450px;font-size:.8rem}.trace-track{height:8px;background:#d9e5de;flex:1;border-radius:8px;overflow:hidden}.trace-fill{height:100%;width:0;background:#1b8a69;transition:width .2s}.trace-progress span{min-width:105px;text-align:right}
.celebration{display:none;position:absolute;inset:0;z-index:10;place-items:center;background:#fffaf0f5;padding:25px;text-align:center}.celebration.show{display:grid}.celebration-box{position:relative;z-index:2;max-width:480px}.celebration-star{color:var(--ink);font-size:3.8rem;margin:0 0 10px;animation:tileLand .3s}.celebration h2{font-size:2.5rem;margin:0 0 12px}.celebrationMessage{line-height:1.5}.reward-line{font-family:Bungee,sans-serif;font-size:1.35rem;color:#12694e;margin:15px 0 25px}.celebration .primary{display:block;margin:0 auto 8px}.confetti-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden}.confetti-piece{position:absolute;top:-20px;left:var(--x);width:8px;height:14px;background:var(--piece);animation:confetti var(--duration) ease-out var(--delay) both}.tap-burst{position:fixed;left:var(--tap-x);top:var(--tap-y);width:15px;height:15px;border:2px solid var(--tap-color);border-radius:50%;pointer-events:none;z-index:90;animation:tapBurst .36s ease-out both}
@keyframes wave{to{transform:scaleY(.65)}}@keyframes tileLand{0%{transform:translateY(-6px) scale(1.06)}100%{transform:none}}@keyframes shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}@keyframes tapBurst{from{transform:translate(-50%,-50%) scale(.5);opacity:.8}to{transform:translate(-50%,-50%) scale(2);opacity:0}}@keyframes confetti{to{transform:translate(var(--sway),550px) rotate(var(--spin));opacity:0}}
body.motion-off *,body.motion-off *::before,body.motion-off *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
.brand small{font-size:.75rem}.skill-tag{font-size:.75rem}.trace-fill{transition:none}.activity-card{box-shadow:0 10px 28px #00000012}.drag-ghost{box-shadow:0 8px 20px #00000025}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@media(max-width:1300px){.workspace,.mission-bar{margin-left:24px;margin-right:24px}.workspace{grid-template-columns:165px minmax(0,1fr);gap:22px}.activity-card{padding:28px}.skill-tag{display:none}}
@media(max-width:1000px){.workspace{grid-template-columns:140px minmax(0,1fr);gap:18px}.listen-arena{grid-template-columns:135px minmax(0,1fr);gap:20px}.sound-button{width:135px;min-height:135px;gap:12px}.input-row{flex-wrap:wrap}.input-row .primary{flex:1}.mode-tab{flex-direction:column;gap:4px;font-size:.8rem}.game-heading{align-items:start}.heading-copy h1{font-size:1.2rem}.mission-steps{display:none}.build-slot{width:55px;height:68px}.voice-control{font-size:0}.voice-control select{font-size:.8rem}}
@media(max-width:700px){.site-header{padding:15px 18px;gap:12px;min-height:80px}.brand{font-size:1rem;gap:8px}.brand-mark{width:39px;height:39px;font-size:1.2rem}.brand small{display:none}.header-right{gap:7px}.audio-controls{gap:4px;flex-direction:column}.header-toggle{padding:1px 7px;min-height:28px;font-size:.82rem}.progress-pill{padding:8px;font-size:.8rem;gap:4px}.progress-pill .icon{width:15px;height:15px}.mission-bar{margin:16px 14px;gap:14px;padding:15px}.mission-bar strong{font-size:1rem}.mission-bar span#missionHint{font-size:.8rem}.mission-start{padding:10px 12px;font-size:.85rem}.mission-start .icon{display:none}.workspace{display:flex;flex-direction:column;margin:0 14px;gap:12px}.trail{order:2;width:100%;padding:10px 0}.word-list{grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.word-chip{padding:6px 2px;justify-content:center;flex-direction:column;gap:4px;font-size:.8rem}.word-number{width:24px;height:24px;font-size:.75rem}.trail-heading{margin:0 0 10px}.pack-progress{margin:13px 0 0}.trail-tip{margin:8px 0}.game{width:100%}.game-heading{gap:12px;margin:8px 2px 15px}.heading-copy h1{font-size:1.15rem}.heading-copy p{font-size:.85rem}.level-control{font-size:.7rem}.level-control select{max-width:112px;font-size:.8rem}.game-toolbar{gap:8px;flex-wrap:wrap;margin-bottom:10px}.word-position{font-size:.75rem}.voice-control select{max-width:100px;font-size:.75rem}.hear-small{font-size:.8rem}.mode-tabs{padding:4px 4px 0}.mode-tab{font-size:.82rem;min-height:59px;padding:7px 3px;gap:5px}.mode-tab .icon{width:20px;height:20px}.activity-card{padding:24px 18px;min-height:440px}.activity-top h2{font-size:1.5rem}.instruction{font-size:.95rem;margin-bottom:20px}.listen-arena{display:flex;flex-direction:column;gap:24px;margin:20px 0 12px}.sound-button{width:128px;min-height:128px;font-size:.9rem}.sound-wave{height:40px}.answer-form{width:100%}.input-row{flex-wrap:nowrap}.input-row .primary{flex:none;padding:10px 15px}.answer-input{font-size:1.3rem;min-height:53px;padding:10px}.build-slots,.tile-tray{gap:7px}.build-slot{width:49px;height:62px;font-size:1.6rem}.letter-tile{width:45px;height:54px;font-size:1.6rem}.build-picture{font-size:1rem}.build-tray-heading{font-size:.75rem}.paint-letter{min-width:47px;min-height:65px;font-size:2rem;padding:4px 8px}.paint-letters{gap:7px}.trace-tools{gap:12px}.trace-board{height:235px}.tool-group{gap:9px}.memory-stage .model-word{font-size:2.7rem}.footer-note{font-size:.82rem;gap:10px}.footer-note>span{width:100%}.celebration h2{font-size:2rem}.mission-bar.active{flex-wrap:wrap}.mission-bar.active .mission-steps{display:flex}.mission-bar.active .link-button{margin-left:auto;font-size:.8rem}.mission-bar.active>div:first-child{flex-basis:100%}}