:root{font-family:Avenir Next,Nunito,Trebuchet MS,sans-serif;color:#344936;background:#faf7ee;font-synthesis:none;font-weight:500;font-size:16px}*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,input:focus-visible{outline:3px solid #5387b1;outline-offset:5px}button{border:0}button:disabled{cursor:default}button,a,input{-webkit-tap-highlight-color:transparent}button{transition:background .18s,transform .18s,box-shadow .18s}button:hover{filter:brightness(.98)}button:active{transform:translateY(1px)}.app{max-width:1440px;margin:auto;padding:0 64px}.topbar{height:108px;border-bottom:1px solid #e7e4d9;display:flex;align-items:center;justify-content:space-between}.brand{background:none;display:flex;align-items:center;gap:12px;text-align:left;font-size:25px;font-weight:800;letter-spacing:-1px}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:2px;font-weight:700}.brand-icon{position:relative;background:#e8bd5b;border-radius:13px;padding:11px;display:flex}.brand-icon>svg+svg{position:absolute;right:4px;top:3px}.header-right{display:flex;align-items:center;gap:26px}.age-label{font-size:12px;color:#838775}.sound-button{display:grid;place-items:center;width:43px;height:43px;border:1px solid #e1dfd2;border-radius:50%;background:transparent}.hero{text-align:center;padding-top:39px}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;letter-spacing:2px;font-size:10px;font-weight:800;color:#7c8973}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#a3b48a}.hero h1{position:relative;display:inline-block;font-size:clamp(40px,5vw,70px);font-weight:900;letter-spacing:-3px;line-height:1.1;margin:18px 0 12px}.hero h1>span{color:#d9a545}.title-spark{position:absolute;width:33px;right:-48px;top:-8px;fill:#ddb454;transform:rotate(12deg)}.hero h2{font-size:23px;letter-spacing:-.6px;margin:0 0 13px;font-weight:650}.hero p{font-size:13px;line-height:1.8;color:#7c8272;margin:0}.hero-art{display:flex;justify-content:center;align-items:center;gap:19px;height:241px;position:relative;max-width:850px;margin:auto}.preview-card{position:relative;width:127px;height:151px;border-radius:13px;background:#fff;box-shadow:0 6px 18px #4e533314;display:flex;align-items:center;flex-direction:column;padding:10px 10px 9px;border:1px solid #f0ece1;animation:arrive .65s both}.preview-card img{width:107px;height:108px;object-fit:contain;mix-blend-mode:multiply}.preview-card span{font-size:20px;font-weight:800}.preview-0{transform:rotate(-10deg) translateY(12px);background:#fbefeb;animation-delay:.05s}.preview-1{transform:rotate(5deg) translateY(-7px);background:#edf1e3;animation-delay:.1s}.preview-2{transform:rotate(-4deg) translateY(8px);background:#fdf4dc;animation-delay:.15s}.preview-3{transform:rotate(7deg) translateY(-6px);background:#ecf1f3;animation-delay:.2s}.preview-4{transform:rotate(-6deg) translateY(13px);background:#f4ece9;animation-delay:.25s}.doodle{position:absolute;color:#d7b35b}.little-star{font-size:45px;left:5px;top:34px;transform:rotate(-12deg)}.pencil-line{right:0;bottom:14px;width:93px;transform:rotate(-25deg)}.pencil-line svg{stroke:#aab899;fill:none;stroke-width:2;stroke-linecap:round}.setup-area{max-width:830px;margin:6px auto 0;text-align:center}.settings{border-top:1px solid #dedfd0;border-bottom:1px solid #dedfd0;display:grid;grid-template-columns:1.2fr 1fr;text-align:left;padding:26px 0;gap:42px}.section-label{display:flex;align-items:center;gap:10px;margin-bottom:17px}.section-label h2{font-size:14px;font-weight:750;margin:0}.step{width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#e6ebdc;font-size:11px;font-weight:800}.quick-count{display:flex;gap:10px;padding-left:33px}.quick-count button{min-height:42px;flex:1;white-space:nowrap;border:1px solid #dddccc;border-radius:9px;background:transparent;font-size:13px}.quick-count button.selected,.all-count.selected{background:#e9eddf;border-color:#899b71;color:#435a38;box-shadow:0 0 0 1px #899b71}.range-row{display:flex;align-items:center;gap:9px;padding-left:33px;margin:16px 0 12px;color:#939783;font-size:10px}.range-row input{width:100%;min-width:0;accent-color:#7d9567;height:5px;cursor:pointer}.range-row output{white-space:nowrap;font-size:11px;background:#e9eddf;color:#536949;padding:4px 8px;border-radius:5px;min-width:49px;text-align:center}.all-count{margin-left:33px;border:1px dashed #d5d6c6;background:transparent;border-radius:7px;padding:9px;width:calc(100% - 33px);font-size:11px;color:#65745a}.all-count span{color:#8a917d}.help-settings{border-left:1px solid #e1e2d6;padding-left:36px}.toggle-row{display:flex;align-items:center;gap:10px;width:100%;background:transparent;text-align:left;font-size:12px;padding:9px 0;min-height:38px}.toggle-row>svg{color:#89927b;stroke-width:1.5}.switch{flex-shrink:0;margin-left:auto;display:inline-flex;align-items:center;width:34px;height:20px;padding:3px;border-radius:20px;background:#dddeda;transition:background .2s}.switch>span{width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0001;transition:transform .2s}.switch.on{background:#819a6c}.switch.on>span{transform:translate(14px)}.primary{display:inline-flex;align-items:center;justify-content:center;gap:26px;background:#e8b74f;color:#34422e;font-weight:800;min-height:56px;padding:13px 30px;border-radius:12px;box-shadow:0 4px #d1a243;font-size:16px}.primary:hover{background:#edc265;transform:translateY(-2px);box-shadow:0 6px #d1a243}.start{min-width:267px;margin-top:24px}.start-caption{margin-top:16px;color:#90927f;font-size:10px}.how-to{max-width:830px;margin:32px auto;display:flex;justify-content:space-between;gap:20px}.how-to>div{display:flex;gap:11px;align-items:center}.how-to>div>span{font-size:21px;font-weight:600;color:#bac3aa}.how-to p{font-size:10px;line-height:1.8;color:#8b8e7b;margin:0}.how-to strong{display:block;color:#657258;font-size:12px}.app>footer{border-top:1px solid #e5e3d7;min-height:67px;display:flex;align-items:center;justify-content:space-between;font-size:10px;color:#929683}.app>footer>span:first-child{display:flex;gap:8px;align-items:center}.app>footer svg{color:#b6a05a}.game{min-height:calc(100svh - 175px);padding:25px 0 42px}.game-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#87907b}.text-button{background:none;display:inline-flex;gap:8px;align-items:center;justify-content:center;font-size:13px;padding:9px 4px}.game-heading{text-align:center;margin:32px auto 26px}.game-heading h1{font-size:clamp(27px,3.2vw,42px);letter-spacing:-1.5px;margin:14px 0 10px}.game-heading p{font-size:14px;color:#7e8875}.game-tools{display:flex;justify-content:center;align-items:center;gap:30px;margin-bottom:24px}.game-tools .toggle-row{width:auto;gap:14px;font-size:13px}.help-button{background:#e9eddf;border-radius:8px;padding:10px 15px;font-size:13px;display:flex;align-items:center;gap:8px}.help-button.active{background:#d8e3cb}.alphabet-help{max-width:960px;margin:0 auto 28px;background:#f0f0e4;padding:17px 20px;border-radius:15px;animation:arrive .25s}.alphabet-help p{font-size:12px;margin:0 0 12px}.alphabet-help>div{display:flex;gap:7px;flex-wrap:wrap}.alphabet-help span{display:grid;place-items:center;min-width:33px;height:34px;padding:0 6px;background:#fffdf6;border-radius:6px;font-weight:750;font-size:15px}.picture-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:20px;max-width:1050px;margin:auto;padding:8px 0 22px}.picture-grid.few{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px}.picture-grid.many{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;max-height:60svh;overflow:auto;padding:12px 8px 24px;scrollbar-color:#b4c3a1 transparent}.card-position{min-width:0;display:flex;align-items:center;flex-direction:column;gap:10px}.position-number{font-size:12px;color:#8f9b83}.picture-card{position:relative;border:2px solid transparent;border-radius:16px;background:#fffefa;box-shadow:0 4px #e9e6d9,0 7px 22px #34422e08;width:100%;overflow:hidden}.card-drag{display:flex;align-items:center;flex-direction:column;background:transparent;padding:14px 8px 7px;width:100%;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}.picture-card img{width:100%;aspect-ratio:1;object-fit:contain;pointer-events:none;mix-blend-mode:multiply}.card-letter{font-size:30px;line-height:1.2;margin:0 0 5px}.card-word{font-size:16px;margin-bottom:8px}.grip{color:#c5caba;margin-top:8px;flex-shrink:0}.picture-card:hover{border-color:#d7dfc9}.picture-card.dragging{opacity:.3;border:2px dashed #94a780;background:#e6ebdd}.picture-card.needs-look{border-color:#dcb64c;background:#fff8e2}.picture-card.overlay{width:165px;padding:12px;text-align:center;transform:rotate(4deg) scale(1.05);box-shadow:0 15px 35px #384b3a33;cursor:grabbing}.overlay .card-word,.overlay .card-letter{display:block}.speak{position:absolute;right:5px;top:5px;background:#f0f2e7dd;border-radius:50%;padding:8px;display:flex;color:#768a66}.game-bottom{text-align:center;margin-top:18px}.drag-tip{display:flex;justify-content:center;align-items:center;gap:8px;color:#8f9785;font-size:11px;margin-bottom:23px}.drag-tip span{display:flex;align-items:center;gap:8px;margin-left:15px}.check{min-width:230px}.result{position:relative;text-align:center;margin:25px auto 0}.result h2{font-size:22px;color:#536f42;margin:12px 0 18px}.result.retry h2{color:#84713d;font-size:19px}.result.success>svg{color:#c69c37}.result.success .primary{background:#dfe9cf;box-shadow:0 4px #c2d0ac}.voice-note{font-size:10px;color:#929680;text-align:center;margin:32px auto 0}.confetti{position:absolute;top:-80px;right:10%;bottom:0;left:10%;pointer-events:none;overflow:hidden}.confetti i{position:absolute;width:8px;height:11px;left:calc(var(--i) * 5.5%);top:-15px;background:#e6ba55;animation:confetti 1.6s ease-out both;animation-delay:calc(var(--i) * .04s)}.confetti i:nth-child(3n){background:#b0c89e;border-radius:50%}.confetti i:nth-child(3n+1){background:#d9b6ad}.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}@keyframes confetti{to{transform:translateY(250px) rotate(340deg);opacity:0}}@keyframes arrive{0%{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@media(min-width:1500px){.app{max-width:1550px}.hero{padding-top:55px}.hero-art{height:275px}.preview-card{width:145px;height:170px}.preview-card img{width:125px;height:125px}.settings{padding:32px 0}.how-to{margin:40px auto}}@media(max-width:900px){.app{padding:0 30px}.topbar{height:90px}.hero{padding-top:28px}.hero-art{gap:13px;height:220px}.preview-card{width:112px;height:140px}.preview-card img{width:92px;height:98px}.settings{gap:23px}.help-settings{padding-left:23px}.section-label h2{font-size:12px}.quick-count{gap:7px}.quick-count button{font-size:12px}.picture-grid.few{gap:14px;grid-template-columns:repeat(auto-fit,minmax(125px,1fr))}.game-tools{gap:20px}}@media(max-width:600px){.app{padding:0 20px}.topbar{height:82px}.brand{font-size:22px}.brand-icon{padding:9px}.age-label{display:none}.hero{padding-top:27px}.eyebrow{font-size:8px;letter-spacing:1.5px}.hero h1{font-size:43px;letter-spacing:-2.4px;margin-top:18px}.title-spark{width:20px;right:-22px;top:-12px}.hero h2{font-size:19px}.hero p{font-size:11px;line-height:1.8}.hero-art{height:190px;gap:9px;margin:0 -7px}.preview-card{width:90px;height:112px;padding:7px;border-radius:10px}.preview-card img{width:73px;height:76px}.preview-card span{font-size:15px}.preview-0,.preview-4{display:none}.doodle.little-star{font-size:27px;left:5px}.pencil-line{width:57px;right:2px;bottom:18px}.settings{grid-template-columns:1fr;gap:20px;padding:22px 0}.section-label h2{font-size:14px}.help-settings{border-left:0;border-top:1px solid #e2e3d7;padding:20px 0 0}.help-settings .section-label{margin-bottom:10px}.help-settings>.toggle-row{padding-left:33px;min-height:43px}.quick-count button,.help-settings .toggle-row{font-size:13px}.start{width:100%;margin-top:22px}.how-to{gap:13px;flex-direction:column;margin:28px 16px}.how-to>div{gap:15px}.how-to p{display:flex;align-items:center;gap:12px;font-size:10px}.how-to strong{font-size:11px;min-width:89px}.how-to>div>span{font-size:18px}.app>footer{font-size:9px;min-height:75px;flex-direction:column;justify-content:center;gap:9px}.game{padding-top:15px}.game-top{font-size:10px}.game-top .text-button{font-size:11px}.game-heading{margin:27px auto 15px}.game-heading h1{font-size:29px;line-height:1.2}.game-heading p{font-size:12px;line-height:1.7;max-width:260px;margin:auto}.game-tools{flex-wrap:wrap;gap:5px 20px;margin-bottom:20px}.game-tools .toggle-row{font-size:11px;gap:9px}.help-button{font-size:12px}.picture-grid,.picture-grid.few{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.picture-grid.many{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-height:65svh}.many .card-drag{padding:9px 4px 5px}.many .card-letter{font-size:23px}.many .card-word{font-size:12px}.many .speak{padding:5px}.card-drag{padding:12px 9px 6px}.card-letter{font-size:28px}.drag-tip{font-size:10px}.drag-tip span{display:none}.game-bottom{margin-top:15px}.check{width:100%}.result h2{font-size:19px}.result.retry h2{font-size:17px}.result .text-button{font-size:12px}.alphabet-help{padding:14px}.alphabet-help span{min-width:29px;font-size:13px;height:29px}.alphabet-help>div{gap:5px}.alphabet-help p{font-size:11px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:360px){.hero h1{font-size:38px}.title-spark{right:-12px;top:-14px;width:14px}.game-tools{gap:4px 10px}.game-tools .toggle-row{font-size:10px}}@media(min-width:901px)and (max-height:850px){.topbar{height:78px}.hero{padding-top:18px}.hero h1{font-size:54px;margin:12px 0 8px}.hero h2{font-size:20px;margin-bottom:8px}.hero p{font-size:12px;line-height:1.6}.hero p br{display:none}.hero-art{height:166px}.preview-card{width:112px;height:130px}.preview-card img{width:92px;height:90px}.settings{padding:18px 0}.start{margin-top:20px}.how-to{margin:24px auto}}
