:root{color:#303d42;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;--ink:#303d42;--muted:#626d6d;--green:#306950;--cream:#fff8ec;--border:#e9e4d8;--picture-bg:#f9ebcf;--halo:#f5dda9;background:#fff8ec;font-family:ui-rounded,SF Pro Rounded,Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}body{min-width:280px;margin:0}button,input,select{font:inherit}button,select{touch-action:manipulation;min-height:44px}button{cursor:pointer;color:inherit;-webkit-tap-highlight-color:transparent;border:0}button:disabled{cursor:default;opacity:.5}button:not(:disabled){transition:transform .15s,background-color .15s,box-shadow .15s}button:not(:disabled):active{transform:translateY(2px)}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:4px;outline:3px solid #306950}h1:focus{outline:none}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.055em;font-size:clamp(1.9rem,4.5vw,3rem);font-weight:850;line-height:1.15}h2{letter-spacing:-.035em}p{line-height:1.65}.app-shell{max-width:1080px;padding:max(20px, env(safe-area-inset-top)) max(28px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));min-height:100vh;flex-direction:column;min-height:100dvh;margin:0 auto;display:flex}.app-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:4px 0 24px;display:flex}.brand{letter-spacing:-.07em;background:0 0;align-items:center;gap:9px;padding:0;font-size:1.55rem;font-weight:850;display:flex}.brand-dot{color:#bc6541;margin-left:-7px}.brand-icon{grid-template-columns:repeat(2,1fr);gap:3px;width:30px;height:30px;margin-right:3px;display:grid;transform:rotate(-9deg)}.brand-icon span{background:#eeb271;border-radius:3px}.brand-icon span:nth-child(2){background:#a8c6af}.brand-icon span:nth-child(3){background:#b9a8d1}.brand-icon span:nth-child(4){background:#e7a097}.header-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:10px;margin-left:auto;display:flex}.language-toggle{background:0 0;padding:0 10px;font-size:.9rem;font-weight:700}.header-tool{background:#fffcf5;border:1px solid #dedacc;border-radius:14px;align-items:center;gap:6px;padding:0 10px;font-size:.85rem;font-weight:700;display:inline-flex}.header-tool-icon{justify-content:center;align-items:center;width:20px;font-size:1.25rem;line-height:1;display:inline-flex}main{flex:1}.hero{text-align:center;padding:31px 30px 35px;position:relative}.eyebrow{color:var(--green);letter-spacing:.1em;font-size:.76rem;font-weight:800;display:block}.hero .eyebrow,.hero h1{margin-bottom:15px}.hero p{color:var(--muted);margin-bottom:0;font-size:1.02rem}.hero-spark{color:#bd8051;font-size:2.1rem;position:absolute}.spark-one{top:50px;left:3%;transform:rotate(-15deg)}.spark-two{color:#8a77a1;font-size:2.9rem;bottom:35px;right:4%}.collection-heading{justify-content:space-between;align-items:center;gap:10px;margin:16px 0;display:flex}.collection-heading h2{letter-spacing:.14em;color:var(--muted);margin:0;font-size:.72rem}.collection-heading>span{background:#efeada;border-radius:25px;padding:8px 12px;font-size:.75rem;font-weight:700}.picture-gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;display:grid}.gallery-filters{flex-wrap:wrap;align-items:end;gap:12px;display:flex}.gallery-filters label{flex:220px;gap:6px;min-width:0;font-size:.85rem;font-weight:700;display:grid}.gallery-filters select{border:1px solid var(--border);width:100%;min-width:0;color:var(--ink);background:#fffef9;border-radius:12px;padding:8px}.gallery-summary{margin:16px 0 8px;font-weight:700}.gallery-guidance{color:var(--muted);margin-bottom:20px;font-size:.85rem}.card-exercises{margin-top:4px;display:block}.picture-card{text-align:left;background:#fffef9;border:1px solid #e4dfd3;border-radius:24px;flex-direction:column;padding:0;display:flex;overflow:hidden;box-shadow:0 4px #eae3d64d}.picture-card:hover{transform:translateY(-3px);box-shadow:0 8px 20px #77664217}.picture-fish,.picture-bee,.picture-duck,.picture-cheetah,.picture-fries{--picture-bg:#f9ebcf;--halo:#f5dda9}.picture-butterfly,.picture-octopus,.picture-dragon,.picture-snail{--picture-bg:#f0e7f5;--halo:#e3d4ee}.picture-cat,.picture-train,.picture-hot-air-balloon,.picture-fox,.picture-ferrari,.picture-cheddar-fingers{--picture-bg:#f8e3d5;--halo:#f2cfb5}.picture-rabbit,.picture-dinosaur,.picture-sunflower,.picture-turtle,.picture-watermelon{--picture-bg:#e7efdf;--halo:#d6e4c9}.picture-dog,.picture-german-shepherd,.picture-hamburger{--picture-bg:#f4eada;--halo:#e9d8bb}.picture-owl,.picture-rocket,.picture-robot-face,.picture-lighthouse,.picture-space-shuttle,.picture-sushi{--picture-bg:#e6eaf5;--halo:#d3daee}.card-art{background:var(--picture-bg);flex-shrink:0;place-items:center;height:162px;display:grid;position:relative}.pixel-art{width:120px;height:120px;image-rendering:pixelated;display:block;position:relative}.art-halo{background:var(--halo);border-radius:48% 52% 54% 46%;width:118px;height:118px;position:absolute;transform:rotate(-15deg)}.picture-number{color:#62615d;font-size:.7rem;font-weight:800;position:absolute;top:14px;left:16px}.discovery-badge{background:var(--green);color:#fff;text-align:center;border-radius:50%;width:26px;height:26px;line-height:26px;position:absolute;top:12px;right:12px}.card-spark{color:#766855;position:absolute;bottom:22px;right:27px}.card-copy{padding:16px 20px 15px}.card-level{color:var(--muted);margin-bottom:7px;font-size:.69rem;display:block}.card-copy h3{letter-spacing:-.035em;margin-bottom:13px;font-size:1.18rem}.card-action{color:var(--green);justify-content:space-between;align-items:center;font-size:.79rem;font-weight:800;display:flex}.card-action>span:last-child{font-size:1.1rem}progress{appearance:none;background:#e7e9df;border:0;border-radius:10px;width:100%;height:7px;display:block;overflow:hidden}progress::-webkit-progress-bar{background:#e7e9df;border-radius:10px}progress::-webkit-progress-value{background:#648c68;border-radius:10px}progress::-moz-progress-bar{background:#648c68;border-radius:10px}.card-copy progress{height:4px;margin-top:10px}.gallery-note{text-align:center;color:var(--muted);margin-bottom:0;padding:30px 0 12px;font-size:.84rem}.gallery-note span{color:#94634d;vertical-align:-1px;font-size:1.2rem}.app-footer{border-top:1px solid var(--border);color:var(--muted);justify-content:space-between;gap:16px;margin-top:22px;padding-top:18px;font-size:.7rem;display:flex}.connection-status{align-items:center;gap:7px;display:flex}.connection-status.is-ready:before{content:"";background:var(--green);border-radius:50%;width:6px;height:6px;display:inline-block}.game{max-width:900px;margin:0 auto}.game-nav{justify-content:space-between;align-items:center;gap:10px;margin:2px 0 15px;display:flex}.back-button{background:0 0;padding:0 8px 0 0;font-size:.86rem;font-weight:700}.back-button span{padding-right:6px}.level-pill{background:#ede9dc;border-radius:20px;padding:8px 12px;font-size:.73rem}.game h1{margin-bottom:25px;font-size:1.7rem}.game-layout{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start;gap:32px;display:grid}.picture-panel{min-width:0;padding-top:15px}.grid-shell{border:1px solid var(--border);background:#fffef9;border-radius:22px;padding:16px 18px 20px;box-shadow:0 5px #eae3d64d}.pixel-grid{grid-template-columns:20px repeat(var(--columns), minmax(0, 1fr));gap:3px;width:100%;display:grid}.axis{place-items:center;min-height:20px;font-size:clamp(.56rem,1.7vw,.8rem);font-weight:750;display:grid}.grid-cell{aspect-ratio:1;background-color:#f0eee6;border-radius:2px;min-width:0}.grid-cell.active-row{box-shadow:inset 0 0 0 1px #597c6470}.active-row-label{color:#fff;background:#306950;border-radius:5px}.new-pixel{outline-offset:-1px;z-index:1;outline:2px solid #303d42;animation:.55s pop}.picture-progress{justify-content:space-between;align-items:center;gap:8px;margin:21px 0 10px;font-size:.75rem;font-weight:750;display:flex}.picture-progress>span:last-child{color:var(--green)}.muted{color:var(--muted);font-weight:500}.picture-caption{color:var(--muted);text-align:center;margin:18px 4px 0;font-size:.75rem}.equation-panel{background:#f0eddc;border-radius:26px;min-width:0;padding:22px}.equation-heading{justify-content:space-between;align-items:center;gap:10px;display:flex}.equation-heading .eyebrow{font-size:.65rem}.row-pill{white-space:nowrap;background:#fffdf4;border-radius:10px;padding:8px 12px;font-size:.8rem}.row-pill strong{color:var(--green);margin-left:4px;font-size:1.1rem;display:inline-block}.sum-line{white-space:nowrap;letter-spacing:-.04em;justify-content:center;align-items:center;gap:12px;margin:22px 0 10px;font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;display:flex}.equals{color:#747768}.sum-line.three-number-sum{flex-wrap:wrap;gap:8px;font-size:1.5rem}.three-number-sum .answer-wrap input{width:64px}.answer-wrap input{text-align:center;width:78px;height:66px;color:var(--green);caret-color:var(--green);background:#fffef9;border:2px solid #598263;border-radius:15px;padding:3px;font-size:2rem;font-weight:800}.answer-retry input{border-color:#a26036}.feedback{color:#5a6155;text-align:center;place-content:center;min-height:45px;margin-bottom:9px;font-size:.76rem;line-height:1.4;display:grid}.positive{color:#28553a;font-weight:750}.keypad{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;display:grid}.keypad button{background:#fffdf6;border:1px solid #e1ddce;border-radius:13px;min-height:54px;font-size:1.45rem;font-weight:750;box-shadow:0 3px #dcd8c8}.keypad button:not(:disabled):hover{background:#fff}.keypad .erase-button{box-shadow:none;background:0 0;border:0;font-size:1.65rem}.keypad-decoration{color:#70794f;place-items:center;font-size:1.8rem;display:grid}.primary,.secondary{border-radius:14px;padding:13px 22px;font-size:.9rem;font-weight:750}.primary{color:#fffef9;background:var(--green);box-shadow:0 3px #24543e}.primary:not(:disabled):hover{background:#25563f}.secondary{background:#eeeadf;border:1px solid #d9d5c9}.check-button{justify-content:center;align-items:center;gap:12px;width:100%;min-height:52px;margin-top:13px;font-size:1rem;display:flex}.text-button{text-underline-offset:4px;background:0 0;padding:10px;font-size:.8rem;text-decoration:underline}.restart-button{color:var(--muted);margin:22px auto 0;display:block}.button-row{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.completion{text-align:center;max-width:650px;margin:40px auto}.completion .eyebrow{margin-bottom:15px}.completion p{color:var(--muted);max-width:430px;margin:25px auto}.celebration-art{aspect-ratio:1;background:var(--picture-bg);border-radius:45% 55% 48% 52%;place-items:center;width:min(100%,320px);margin:35px auto 0;animation:.6s ease-out arrive;display:grid;position:relative}.celebration-art .pixel-art{width:220px;height:220px}.celebrate-star{color:#907135;font-size:3rem;position:absolute}.star-left{top:10px;left:0;transform:rotate(-15deg)}.star-right{bottom:10px;right:0}.notice,.update-banner{background:#fff0cb;border:1px solid #d6bb81;border-radius:16px;margin:0 0 20px;padding:16px 20px;font-size:.87rem;line-height:1.5}.notice button{background:0 0;padding:5px 10px;font-weight:700;text-decoration:underline}.update-banner{background:#e8efdf;border-color:#bbc9ad}.update-banner p{margin:4px 0 12px}.modal{width:min(90vw,520px);max-height:85vh;border:1px solid var(--border);max-height:85dvh;color:var(--ink);background:var(--cream);border-radius:24px;padding:28px;box-shadow:0 16px 80px #28332e40}.modal::backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#25382c70}.modal h2{font-size:1.55rem}.modal h3{margin:24px 0 8px;font-size:1rem}.modal p{color:#505e5b;font-size:.9rem}.modal .secondary{margin-top:10px}.modal-close{width:100%}.hint-setting{cursor:pointer;align-items:center;gap:12px;min-height:44px;margin-top:16px;display:flex}.hint-setting input{width:24px;height:24px;accent-color:var(--green);flex-shrink:0}.language-setting{justify-content:space-between;align-items:center;gap:15px;font-size:.9rem;display:flex}.language-setting select{color:var(--ink);background:#fffef9;border:1px solid #b7c1b3;border-radius:10px;padding:8px 12px}.danger{color:#984733;margin:24px auto 8px;display:block}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@keyframes pop{0%{transform:scale(.7)}55%{transform:scale(1.2)}to{transform:scale(1)}}@keyframes arrive{0%{opacity:0;transform:scale(.9)rotate(-4deg)}to{opacity:1;transform:scale(1)}}@media (max-width:700px){.app-shell{padding-left:max(18px, env(safe-area-inset-left));padding-right:max(18px, env(safe-area-inset-right))}.app-header{padding-bottom:12px}.hero{padding:26px 15px 25px}.hero h1{font-size:2.1rem}.hero p{max-width:320px;margin-inline:auto;font-size:.88rem}.hero-spark{display:none}.picture-gallery{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.card-art{height:145px}.card-copy{padding:14px}.card-copy h3{font-size:1.02rem}.card-level{min-height:28px;font-size:.64rem;line-height:1.5}.collection-heading>span{padding:7px 9px;font-size:.65rem}.collection-heading h2{font-size:.65rem}.app-footer{flex-direction:column;align-items:center;gap:8px}.game{max-width:440px}.game h1{margin-bottom:12px;font-size:1.4rem}.game-nav{margin-bottom:8px}.game-layout{grid-template-columns:minmax(0,1fr);gap:15px}.picture-panel{padding-top:0}.grid-shell{max-width:335px;margin-inline:auto;padding:10px 16px 13px}.pixel-grid{grid-template-columns:17px repeat(var(--columns), minmax(0, 1fr));gap:2px}.axis{min-height:18px;font-size:.65rem}.picture-progress{margin-top:12px}.picture-caption{display:none}.equation-panel{border-radius:22px;padding:15px 18px 18px}.sum-line{margin:12px 0 5px;font-size:2rem}.answer-wrap input{height:56px}.feedback{min-height:35px;margin-bottom:7px;font-size:.73rem}.keypad button{min-height:48px}.keypad{gap:8px}.check-button{min-height:48px;margin-top:10px}}@media (max-width:360px){.app-shell{padding-inline:max(12px, env(safe-area-inset-left))}.brand{font-size:1.35rem}.header-actions{gap:2px}.language-toggle{padding:0 6px;font-size:.8rem}.card-art{height:125px}.card-art .pixel-art,.art-halo{width:100px;height:100px}.card-copy{padding:12px}.hero h1{font-size:1.9rem}.collection-heading{flex-wrap:wrap}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
