.ota-app{--activity-nav-space:100px;position:relative}.app-links{z-index:10;flex-shrink:0;grid-template-columns:minmax(140px,1fr) auto minmax(140px,1fr);align-items:center;gap:12px;width:100%;padding:12px 20px;display:grid;position:relative}.website-link{color:#263c27;justify-self:start;align-items:center;gap:7px;min-height:44px;padding:8px 0;font-size:.875rem;line-height:1.3;text-decoration:none;transition:transform .18s;display:inline-flex}.website-link svg{flex-shrink:0;width:18px;height:18px}.website-link:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.activity-switch{gap:16px;display:flex}.mode-button{color:#203526;background:#ffdf25;border:3px solid #243c2a;border-radius:22px;justify-content:center;align-items:center;gap:12px;width:240px;min-height:76px;padding:12px 18px;font-family:Nunito Sans,Arial,sans-serif;font-size:1.25rem;font-weight:600;line-height:1.25;transition:transform .18s,box-shadow .18s,filter .18s;display:flex;box-shadow:0 5px #243c2a}.mode-button svg{flex-shrink:0;width:30px;height:30px}.game-button{color:#fff;background:#d81781;border-color:#55224e;box-shadow:0 5px #55224e}.mode-button[aria-pressed=true]{font-weight:700;box-shadow:0 3px #243c2a,inset 0 0 0 3px #ffffffa6}.game-button[aria-pressed=true]{box-shadow:0 3px #55224e,inset 0 0 0 3px #ffffffa6}.mode-button:active{transform:translateY(3px)}.learning .artwork{width:min(100%, calc((100svh - var(--activity-nav-space) - 180px) * 2.23881))}.puzzle-stage{--tray-gap:16px;--piece-size:clamp(64px, min(calc((100vw - 64px - 2 * var(--tray-gap)) / 3), calc((100svh - 490px) / 2)), 240px);--target-size:var(--piece-size);flex-direction:column;flex:1;align-items:center;width:100%;min-width:0;padding:12px 24px 8px;display:flex}.puzzle-stage[data-level="2"]{--tray-gap:8px;--piece-size:clamp(44px, min(calc((100vw - 64px - 4 * var(--tray-gap)) / 5), calc((100svh - 490px) / 3)), 112px);--target-size:clamp(80px, calc(100svh - 640px), 160px)}.puzzle-stage[data-level="3"]{--tray-gap:clamp(4px, .5vw, 10px);--piece-size:clamp(56px, min(calc((100vw - 64px - (var(--tray-columns) - 1) * var(--tray-gap)) / var(--tray-columns)), calc((100svh - 500px) / 4)), 88px);--target-size:clamp(88px, calc(var(--piece-size) * 2), 160px)}.puzzle-workspace{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:8px;width:100%;min-width:0;display:flex}.puzzle-heading{justify-content:center;align-items:center;gap:10px;display:flex}.puzzle-heading h2{margin:0;font-size:clamp(1.25rem,2.5vw,1.5rem);font-weight:800;line-height:1.3}.puzzle-hear{color:#344d2f;background:0 0;border:0;border-radius:50%;place-items:center;width:44px;height:44px;display:grid}.puzzle-hear svg{width:22px}.puzzle-play-area{flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0;display:flex}.puzzle-hole,.puzzle-piece{width:var(--piece-size);height:var(--piece-size);background:0 0;border:3px solid #0000;border-radius:18px;flex-shrink:0;padding:8px;display:block;position:relative}.puzzle-letter-art{pointer-events:none;width:100%;height:100%;display:block;overflow:visible}.puzzle-piece .puzzle-letter-art{filter:drop-shadow(0 5px 1px #263c271f);transition:transform .2s}.puzzle-cutout{fill:#ccd0b0;stroke:#6b7957;stroke-width:6px;stroke-linejoin:round;filter:drop-shadow(0 3px 1px #354a3426)}.puzzle-hole{width:var(--target-size);height:var(--target-size);transition:background .15s}.puzzle-hole.drop-near,.puzzle-hole.ready-to-place,.puzzle-solved .puzzle-hole{background:#c5f3aa;border-color:#2f8b38;box-shadow:0 0 0 4px #71bb5433}.puzzle-hole.drop-near .puzzle-cutout{fill:#9cd97a;stroke:#286d31}:is(.puzzle-hole:focus-visible,.puzzle-piece:focus-visible){outline:3px dashed var(--ring);outline-offset:2px}.puzzle-message{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:36px;font-size:1rem;line-height:1.35;display:flex}.puzzle-guide{color:#466642;width:24px;height:24px;animation:1.5s ease-in-out 3 puzzle-guide}.puzzle-message strong{color:#2f622f;font-size:1.2rem}.puzzle-pair{font-weight:800}.puzzle-tray-container{width:100%;min-width:0}.puzzle-tray-window{overscroll-behavior-x:contain;touch-action:pan-x;scrollbar-color:#718061 #eee7d3;scrollbar-width:thin;width:100%;padding:10px 8px 12px;overflow:auto hidden}.puzzle-tray-window:focus-visible{outline:3px solid var(--ring);outline-offset:-3px;border-radius:14px}.puzzle-tray{grid-template-columns:repeat(var(--tray-columns), var(--piece-size));align-items:center;gap:var(--tray-gap);width:max-content;margin:0 auto;display:grid}.puzzle-scroll-hint{text-align:center;color:#52624b;padding-top:4px;font-size:.875rem;line-height:1.4;display:none}.puzzle-piece{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;transition:border-color .15s,opacity .2s}.puzzle-stage[data-level="2"] .puzzle-piece,.puzzle-stage[data-level="3"] .puzzle-piece{border-width:2px;border-radius:10px;padding:3px}.puzzle-stage[data-level="3"] .puzzle-piece{touch-action:pan-x}.puzzle-piece:active{cursor:grabbing}.puzzle-piece.is-picked{border-color:#5e8343}.puzzle-piece.piece-lifted .puzzle-letter-art{opacity:0}.puzzle-piece:disabled{cursor:default;opacity:.25}.puzzle-piece.try-again{animation:.45s puzzle-wiggle}.puzzle-bottom{flex-shrink:0;justify-content:center;align-items:center;width:100%;margin-top:clamp(28px,4vh,48px);display:flex}.level-picker{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(100%,650px);display:grid}.level-option{aspect-ratio:auto;color:#263c27;background:#fff9e9;border:3px solid #718061;border-radius:22px;justify-content:center;align-items:center;width:100%;min-width:0;height:80px;padding:16px 20px;font-family:Nunito Sans,Arial,sans-serif;font-size:1.5rem;font-weight:700;line-height:1.25;transition:background .15s,transform .15s;display:flex;box-shadow:0 4px #718061}.level-option:after{display:none}.level-option[data-checked]{background:#ffdf25;border-color:#344d2f;font-weight:700;box-shadow:0 3px #344d2f}.level-option:focus-visible{outline:3px solid var(--ring);outline-offset:3px}.puzzle-drag-ghost{z-index:1000;pointer-events:none;filter:drop-shadow(0 10px 5px #263c2740);padding:11px;position:fixed}.puzzle-solved .puzzle-hole>.puzzle-letter-art{animation:.48s ease-out puzzle-snap}.puzzle-sparkles{color:#b78600;width:44px;height:44px;animation:.65s ease-out puzzle-stars;position:absolute;top:0;right:-20px}.puzzling .ground{min-height:104px}.puzzling .ground-content{padding-bottom:0}@keyframes puzzle-guide{50%{transform:translateY(-5px)}}@keyframes puzzle-wiggle{25%{transform:rotate(-3deg)}65%{transform:rotate(3deg)}}@keyframes puzzle-snap{0%{transform:scale(.92)}55%{transform:scale(1.045)}to{transform:scale(1)}}@keyframes puzzle-stars{0%{opacity:0;transform:scale(.4)rotate(-15deg)}to{opacity:1;transform:scale(1)}}@media (hover:hover){.website-link:hover,.mode-button:hover,.level-option:hover,.puzzle-hear:hover{transform:translateY(-2px)}.mode-button:hover{filter:brightness(1.06)saturate(1.06)}.puzzle-hear:hover{background:#fff1a2}.puzzle-piece:enabled:hover .puzzle-letter-art{transform:translateY(-4px)rotate(-1deg)}}@media (max-width:860px){.ota-app{--activity-nav-space:144px}.app-links{grid-template-columns:1fr;gap:8px;padding:8px 12px 12px}.intro .app-links{inset:8px 12px auto}.activity-switch{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;width:100%;display:grid}.mode-button{border-radius:18px;gap:8px;width:100%;min-width:0;min-height:72px;padding:10px;font-size:1.0625rem}.mode-button svg{width:24px;height:24px}.website-link{gap:4px;font-size:.875rem}.puzzle-stage{padding:12px 16px 8px}.puzzle-heading h2{font-size:1.25rem}.level-picker{gap:10px}.level-option{border-radius:18px;height:66px;padding:12px 8px;font-size:1.125rem}.puzzle-sparkles{width:32px;height:32px;right:-10px}}@media (max-width:920px){.puzzle-scroll-hint{display:block}}@media (max-height:700px) and (orientation:portrait){.puzzle-stage{--piece-size:clamp(64px, min(calc((100vw - 56px - 2 * var(--tray-gap)) / 3), calc((100svh - 410px) / 2)), 120px);padding:8px 12px}.puzzle-stage[data-level="2"]{--piece-size:clamp(44px, calc((100vw - 56px - 4 * var(--tray-gap)) / 5), 72px)}.puzzle-stage[data-level="3"]{--target-size:88px}.puzzle-heading{display:none}.puzzle-message{flex-direction:row;gap:8px;min-height:28px}.puzzle-guide{display:none}.puzzle-bottom{margin-top:20px}.level-option{height:64px}}@media (max-height:540px) and (orientation:landscape){.puzzle-stage{--piece-size:clamp(56px, calc(100svh - 320px), 100px);--target-size:var(--piece-size);padding:8px 16px 4px}.puzzle-stage[data-level="2"],.puzzle-stage[data-level="3"]{--piece-size:48px;--target-size:76px;--tray-gap:4px}.puzzle-play-area{grid-template-columns:var(--target-size) minmax(0, 1fr);align-items:center;column-gap:16px;max-width:1200px;display:grid}.puzzle-hole{grid-area:1/1}.puzzle-tray-container{grid-area:1/2}.puzzle-message{flex-direction:row;grid-area:2/1/auto/-1;gap:8px;min-height:24px}.puzzle-heading,.puzzle-guide,.puzzle-scroll-hint{display:none}.puzzle-tray-window{padding:4px 8px}.puzzle-bottom{margin-top:16px}.level-option{height:60px;padding:10px;font-size:1.125rem}.puzzling .ground{min-height:84px}}@media (prefers-reduced-motion:reduce){.puzzle-stage *,.app-links *{transition:none!important;animation:none!important;transform:none!important}}@media (max-width:650px) and (orientation:portrait){.learning .artwork{width:min(100%, calc((100svh - var(--activity-nav-space) - 210px) * .559701))}}@media (max-height:540px) and (orientation:landscape){.ota-app{--activity-nav-space:90px}.app-links{grid-template-columns:minmax(132px,1fr) auto minmax(0,1fr);gap:12px;padding:10px 16px}.activity-switch{gap:12px;width:auto;display:flex}.mode-button{gap:8px;width:clamp(140px,24vw,200px);min-height:70px;padding:10px 8px;font-size:1.0625rem}.learning .artwork{width:min(100%, calc((100svh - var(--activity-nav-space) - 124px) * 2.23881))}}@media (max-width:365px){.mode-button{gap:6px;padding:10px 8px;font-size:1rem}.mode-button svg{width:20px;height:20px}}.ota-app{--activity-nav-space:80px;--practice-footer-space:228px}.app-links{grid-template-columns:minmax(0,1fr);justify-items:center;gap:16px;padding:12px 20px 16px}.utility-nav{flex-wrap:wrap;justify-self:start;align-items:center;gap:6px 16px;min-width:0;display:flex}.utility-nav .website-link{flex-shrink:0}.header-language-picker{align-items:center;gap:4px!important;width:auto!important;display:flex!important}.header-language-option{aspect-ratio:auto;color:#263c27;width:auto;min-width:66px;height:auto;min-height:44px;box-shadow:none;background:0 0;border:1.5px solid #263c27;border-radius:12px;justify-content:center;align-items:center;padding:7px 10px;font-size:.875rem;font-weight:700;line-height:1.2;display:flex}.header-language-option[data-checked]{color:#263c27;background:#ffe852;box-shadow:0 2px #263c27}.header-language-option[data-checked]>span{text-underline-offset:3px;text-decoration:underline}.header-language-option:after{display:none}.activity-switch,.start-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;width:min(100%,760px);margin-inline:auto;display:grid}.activity-switch .mode-button,.start-buttons button{border-width:3px;border-radius:26px;width:100%;min-width:0;min-height:96px;padding:18px 24px;font-size:clamp(1.25rem,2.1vw,1.6rem);font-weight:800;line-height:1.2}.activity-switch .mode-button svg{width:34px;height:34px}.start-buttons button.game-button{color:#fff;background:#d81781;border-color:#55224e;box-shadow:0 5px #55224e}.start-buttons button.game-button:hover{box-shadow:0 7px #55224e}.start-buttons button.game-button:active{box-shadow:0 1px #55224e}.art-zone:disabled .zone-visual{opacity:.45}.intro .app-links{width:100%;padding:10px 20px;position:relative;inset:auto}.intro-scene{padding:0 20px 26px}.cover-art{width:min(100%,max(240px,197.109svh - 689.882px))}.start-options{width:min(100%,760px);margin-top:12px}.cover-language-picker{justify-content:center;margin-top:24px;display:flex}.cover-language-picker .header-language-picker{gap:8px!important}.cover-language-picker .header-language-option{min-width:90px}.learning .ground{z-index:6;min-height:220px;position:sticky;bottom:0}.learning .grass-rim{--grass-height:26px}.play-controls{grid-template-columns:176px minmax(50px,1fr) 176px;align-items:center;gap:24px;width:min(100%,760px);display:grid}.control-button.letter-arrow{color:#173b52;background:#ffdf25;border:4px solid #173b52;border-radius:36px;width:100%;height:144px;box-shadow:0 7px #173b52}.control-button.letter-arrow svg{width:108px;height:108px}.control-button.letter-arrow:disabled{opacity:.5;box-shadow:0 3px #173b52}.control-button.letter-arrow:active:enabled{transform:translateY(6px);box-shadow:0 1px #173b52}.playback-tools{justify-content:center;align-items:center;gap:14px;display:flex}.playback-tools .listen-button{width:58px;height:58px}.playback-tools .listen-button svg{width:28px;height:28px}.learning .interaction-hint{margin-top:16px}html[data-embedded=true] .ota-app{min-height:100svh}html[data-embedded=true] .learning .artwork,.learning .artwork{width:min(100%, max(280px, calc((100svh - var(--activity-nav-space) - var(--practice-footer-space)) * 2.23881)))}@media (max-width:860px){.app-links{gap:12px;padding:8px 12px 16px}.utility-nav{gap:6px 10px}.activity-switch,.start-buttons{gap:12px}.activity-switch .mode-button,.start-buttons button{border-radius:22px;min-height:96px;padding:14px 12px;font-size:1.25rem}.activity-switch .mode-button{gap:8px}.activity-switch .mode-button svg{width:28px;height:28px}}@media (max-width:650px) and (orientation:portrait){.ota-app{--activity-nav-space:80px;--practice-footer-space:218px}.intro .app-links{padding:8px 12px}.intro-scene{padding:0 12px 24px}.cover-art{width:min(100%,max(150px,98.5545svh - 354.796px))}.activity-switch .mode-button{flex-direction:column;min-height:110px;font-size:1.125rem}.start-buttons button{min-height:104px}.learning .artwork,html[data-embedded=true] .learning .artwork{width:min(100%, max(150px, calc((100svh - var(--activity-nav-space) - var(--practice-footer-space)) * .559701)))}.play-controls{grid-template-columns:clamp(112px,32vw,144px) minmax(50px,1fr) clamp(112px,32vw,144px);gap:8px}.control-button.letter-arrow{border-radius:30px;height:124px}.control-button.letter-arrow svg{width:88px;height:88px}.playback-tools{flex-direction:column;gap:10px}.playback-tools .home-button{width:44px;height:44px}.playback-tools .listen-button{width:50px;height:50px}.learning .ground{min-height:202px}.learning .ground-content{padding:8px 12px 0}.learning .interaction-hint{font-size:.8125rem}}@media (max-width:650px) and (max-height:700px) and (orientation:portrait){.learning .artwork,html[data-embedded=true] .learning .artwork{width:min(100%, max(280px, calc((100svh - var(--activity-nav-space) - var(--practice-footer-space)) * 2.23881)));grid-template-columns:1fr 1fr}}@media (max-width:365px){.utility-nav{gap:4px 6px}.header-language-option{min-width:62px;padding:7px 8px}.play-controls{gap:6px}.start-buttons button{padding:12px 8px;font-size:1.125rem}}@media (max-height:540px) and (orientation:landscape){.ota-app{--activity-nav-space:76px;--practice-footer-space:96px}.app-links{grid-template-columns:minmax(0,1fr);gap:8px;padding:6px 12px 12px}.activity-switch .mode-button{min-height:76px;padding:10px 16px;font-size:1.125rem}.intro-scene{padding:0 12px 18px}.cover-art{width:min(100%,max(240px,197.109svh - 571.616px))}.start-options{margin-top:0}.start-buttons button{min-height:76px}.cover-language-picker{margin-top:16px}.learning .ground{min-height:90px;position:static}.learning .grass-rim{--grass-height:18px}.play-controls{grid-template-columns:minmax(0,1fr)}.control-button.letter-arrow{top:calc((100svh + var(--activity-nav-space) - var(--practice-footer-space)) / 2 - 58px);width:132px;height:116px;position:absolute}.control-button.letter-arrow:first-child{left:16px}.control-button.letter-arrow:last-child{right:16px}.playback-tools .listen-button{width:50px;height:50px}.learning .artwork,html[data-embedded=true] .learning .artwork{width:min(calc(100% - 320px), max(120px, calc((100svh - var(--activity-nav-space) - var(--practice-footer-space)) * 2.23881)))}.control-button.letter-arrow svg{width:88px;height:88px}.learning .interaction-hint{display:none}}@media (prefers-reduced-motion:reduce){.control-button.letter-arrow{transition:none;transform:none!important}}