:root{color-scheme:light;--ink:#422e35;--muted:#815f57;--paper:#fff7e7;--peach:#ffdda9;--orange:#eb7047;--orange-strong:#c44c39;--mint:#178f90;--mint-dark:#0c666d;--ring:#f7a04f;font-family:ui-rounded,"Trebuchet MS",system-ui,sans-serif;font-synthesis:none}
*{box-sizing:border-box}html{height:100%;scroll-behavior:smooth}body{margin:0;min-height:100%;background:#ffefd3;color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior-y:contain}button,a{font:inherit;touch-action:manipulation}button{cursor:pointer}a{text-decoration:none;color:inherit}button:focus-visible,a:focus-visible{outline:4px solid #175b82;outline-offset:4px}button:active,a:active{transform:translateY(2px)}
.shell{max-width:990px;min-height:100dvh;margin:0 auto;background:linear-gradient(173deg,#fff7e6 0%,#ffe9c7 48%,#fcdab1 100%);display:flex;flex-direction:column;position:relative;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top) + 16px) 22px 13px;position:relative;z-index:4}.brand{font-size:26px;line-height:1;letter-spacing:-1.6px;font-weight:1000;display:flex;align-items:center;gap:7px}.brand i{display:inline-grid;width:33px;height:33px;background:#ef7443;color:#fff9e9;place-items:center;border-radius:13px 11px 15px 11px;font-style:normal;font-size:24px;transform:rotate(-8deg)}.brand small{display:block;color:var(--orange-strong);font-size:9px;font-weight:1000;letter-spacing:3.1px;margin:8px 0 0 2px}.tools{display:flex;gap:8px}.tool{width:47px;height:47px;display:grid;place-items:center;border-radius:16px;border:2px solid #e8bd91;background:#fffaf0;box-shadow:0 3px 0 #d8a577;font-size:22px;color:#775145}
.sky{position:absolute;z-index:0;left:-10%;right:-10%;top:76px;height:410px;background:radial-gradient(ellipse 43% 36% at 25% 17%,#fffcef 5%,transparent 100%)}.sun{position:absolute;top:37px;right:10%;width:85px;height:85px;background:#fbc76c;border-radius:50%;box-shadow:0 0 0 17px #fbd68b65}.cloud{position:absolute;top:110px;left:3%;width:130px;height:40px;border-radius:70px;background:#fff9f0aa;filter:blur(1px)}
.intro{position:relative;z-index:1;display:flex;align-items:flex-start;min-height:305px;padding:32px 22px 0;gap:0}.hero-text{width:53%;max-width:460px;position:relative;z-index:2}.eyebrow{font-size:11px;color:#aa6747;letter-spacing:2.3px;font-weight:1000;text-transform:uppercase}.hero-text h1{font-size:clamp(35px,6.9vw,66px);line-height:.98;letter-spacing:-2.9px;margin:14px 0 14px;font-weight:1000}.hero-text h1 span{color:#df6646;display:block}.hero-text p{font-size:15px;line-height:1.36;font-weight:750;color:#79564d;max-width:230px;margin:0}.hero-fox{width:56%;max-width:355px;height:310px;position:absolute;right:-2%;top:0;filter:drop-shadow(0 13px 6px #9b614431);transform-origin:bottom center;animation:fox-breathe 4s ease-in-out infinite}.hero-caption{position:absolute;right:7%;top:52px;background:#fff9ec;border:3px solid #e5b78a;border-radius:18px 19px 18px 6px;transform:rotate(5deg);padding:9px 12px;color:#835348;font-size:12px;font-weight:1000;box-shadow:0 5px #ca956958;z-index:2}
.stage{position:relative;z-index:3;background:linear-gradient(180deg,#f9cc92,#f6b984);border-top:12px solid #f9dcad;box-shadow:0 -7px 0 #d39b60;margin-top:-22px;border-radius:32px 32px 0 0;flex:1;padding:25px 22px calc(24px + env(safe-area-inset-bottom))}.stage:before{content:"";height:14px;position:absolute;top:7px;left:0;right:0;opacity:.38;background:repeating-linear-gradient(90deg,transparent 0 87px,#ddaa74 88px 91px)}.stage-heading{position:relative;display:flex;align-items:end;justify-content:space-between;gap:10px;margin-bottom:17px}.stage h2{font-size:25px;letter-spacing:-1px;line-height:1.1;margin:0}.stage small{font-size:11px;font-weight:900;color:#946347}.choices{display:grid;gap:15px;grid-template-columns:repeat(2,minmax(0,1fr))}.activity{background:#fff9e9;border:4px solid #f9e8cc;box-shadow:0 7px 0 #b77b56,0 15px 18px #734c3735;border-radius:26px;overflow:hidden;position:relative;min-width:0;transition:filter .17s,transform .17s}.activity:focus-visible{outline-color:#165a77}.activity:active{transform:translateY(4px)}.activity .art{display:flex;justify-content:center;align-items:center;min-height:142px;position:relative;overflow:hidden}.activity .art svg{width:210px;height:160px;filter:drop-shadow(0 5px 2px #6b412a28)}.activity.cook .art{background:radial-gradient(ellipse at 38% 31%,#fff6d6,#ffc78a 78%)}.activity.learn .art{background:radial-gradient(ellipse at 38% 31%,#e4fff0,#a4d9c3 80%)}.activity-body{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:14px 16px 18px}.activity strong{font-size:23px;letter-spacing:-.7px;display:block}.activity p{font-size:12px;font-weight:750;color:#8b6757;margin:4px 0 0}.go{flex:none;background:#ed7852;color:white;font-size:21px;font-weight:1000;border-radius:13px;width:39px;height:39px;display:grid;place-items:center;box-shadow:0 3px #ac4738}.learn .go{background:#218f93;box-shadow:0 3px #0c6168}
.progressline{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 3px}.pill{background:#fff8e9ba;border:2px solid #f6dfc1;border-radius:50px;padding:8px 12px;font-size:12px;color:#674536;font-weight:900}.pill b{font-size:15px;color:#b95539;margin-right:3px}.footer-note{text-align:center;font-size:11px;font-weight:800;color:#9b6e4b;margin:16px auto 0}.install-hint{color:#695047;font-size:13px}
dialog{border:4px solid #f5cfaa;background:#fffaec;color:var(--ink);border-radius:26px;width:min(90vw,440px);padding:26px;box-shadow:0 18px 56px #4730276b}dialog::backdrop{background:#352d32bd;backdrop-filter:blur(4px)}dialog h2{font-size:25px;line-height:1.1;margin:0 0 10px}dialog p{font-size:14px;line-height:1.4;font-weight:700}dialog label{display:block;margin:13px 0 6px;font-weight:850}dialog input{font-size:20px;max-width:100%;width:160px;border:2px solid #cbac8c;border-radius:13px;padding:12px;background:white}dialog button.action{border:0;background:#167b83;color:white;font-weight:1000;border-radius:15px;padding:13px 19px;min-height:48px}dialog .exit{position:absolute;right:12px;top:9px;width:42px;height:42px;border:0;background:transparent;font-size:22px}.error{color:#b33b35;min-height:20px}.tools-panel{display:none}.tools-panel.visible{display:block}.tool-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}.tool-row button{flex:1}.fine{color:#86695e;font-size:12px!important}.dot{width:8px;height:8px;display:inline-block;background:#1c9b70;border-radius:50%;margin-right:5px}.dot.off{background:#aa6c63}
@media(max-width:620px){.intro{min-height:294px;padding-top:28px}.hero-fox{height:266px;top:26px;right:-2%;width:57%}.hero-caption{right:3%;top:35px;transform:rotate(7deg)}.hero-text{width:60%}.hero-text h1{font-size:clamp(35px,10.5vw,53px);margin-top:12px}.hero-text p{font-size:13px;max-width:200px}.stage{padding:23px 15px calc(14px + env(safe-area-inset-bottom))}.choices{gap:12px}.activity{border-width:3px;border-radius:22px}.activity .art{min-height:133px}.activity .art svg{width:165px;height:135px}.activity-body{padding:11px 9px 13px}.activity strong{font-size:19px}.activity p{font-size:11px}.go{width:32px;height:33px;font-size:17px}.stage h2{font-size:23px}.progressline{margin-top:18px}.pill{font-size:11px;padding:7px 10px}}
@media(max-width:365px){.top{padding-left:13px;padding-right:13px}.hero-caption{display:none}.hero-fox{right:-18%}.intro{padding-left:14px}.activity strong{font-size:17px}.activity .art{min-height:112px}.activity .art svg{height:117px}.stage{padding-left:10px;padding-right:10px}}
@media(min-width:750px){.intro{min-height:360px;padding-left:50px}.hero-fox{right:6%;height:360px}.hero-caption{right:20%;top:49px}.stage{padding:34px 55px 36px}.activity .art{min-height:175px}.activity .art svg{width:260px;height:185px}.stage h2{font-size:30px}.hero-text p{max-width:350px;font-size:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
@keyframes fox-breathe{50%{transform:translateY(-6px) rotate(-1deg)}}