@font-face{font-family:Nunito;src:url(/fonts/nunito.ttf) format("truetype");font-weight:200 1000;font-display:swap}:root{font-family:Nunito,Trebuchet MS,sans-serif;color:#3c4836;background:#f8f5e9;font-synthesis:none;font-weight:600;font-size:16px;--green:#52694b;--ink:#3c4836;--cream:#f8f5e9;--muted:#7d826f}*{box-sizing:border-box}body{margin:0;min-width:300px}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.45}button{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #a66c42;outline-offset:5px}button{transition:background .18s,transform .18s}button:active:not(:disabled){transform:translateY(2px)}[hidden]{display:none!important}.shell{width:min(100%,520px);margin:0 auto;position:relative;z-index:1;padding:30px 30px 18px;min-height:100svh}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--ink);font-size:27px;font-weight:900;letter-spacing:-1px}.brand>svg{width:38px;height:38px;color:#ab6550}.brand small{display:block;font-size:8px;font-weight:800;letter-spacing:2px;margin-top:1px;color:#969680}.icon-button{border:0;background:transparent;width:44px;height:44px;display:grid;place-items:center;border-radius:50%}.icon-button:hover{background:#e9eadb}.icon-button svg{width:23px;height:23px}.sound{color:#718064;border:1px solid #dce0cb}.intro{text-align:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:900;color:#8d9679}h1,h2,p{margin:0}h1{font-size:32px;font-weight:900;line-height:1.16;letter-spacing:-.9px}.intro h1{margin-top:10px}.duration{display:flex;align-items:center;justify-content:center;gap:30px;margin:19px 0 25px}.step{border:1.5px solid #d9dfc9;background:#f0f0df;width:57px;height:57px;display:grid;place-items:center;border-radius:50%;color:var(--green)}.step:hover:not(:disabled){background:#e3e9d3}.step svg{width:25px;height:25px}.number{display:flex;flex-direction:column;align-items:center}.number input{-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield;text-align:center;border:0;padding:0;width:145px;background:transparent;color:var(--green);font-size:96px;font-weight:900;line-height:1.05;letter-spacing:-7px;border-radius:15px;height:106px}.number input::-webkit-inner-spin-button,.number input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.number span{font-size:16px;color:#7e846e;margin-top:-2px}.choose{text-align:center}.choose h2{font-size:24px;font-weight:900;letter-spacing:-.6px}.hint{font-size:12px;color:#929580;margin-top:5px}.animal-grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:10px;row-gap:12px;margin:20px -7px 0}.animal-choice{border:0;background:transparent;display:flex;flex-direction:column;align-items:center;padding:0;font-weight:800;font-size:13px;border-radius:25px}.animal-picture{width:100%;height:111px;position:relative;display:flex;align-items:center;justify-content:center}.animal-picture:before{content:"";position:absolute;background:#e5e9ce;width:88%;height:30px;border-radius:50%;bottom:7px;opacity:.75;transition:opacity .2s}.animal-picture img{position:relative;width:121px;height:121px;object-fit:contain;transition:filter .2s,opacity .2s,transform .2s}.animal-choice:hover img{transform:translateY(-3px) rotate(-2deg)}.animal-choice[aria-pressed=false] img{opacity:.43;filter:saturate(.45)}.animal-choice[aria-pressed=false] .animal-picture:before{opacity:0}.animal-choice[aria-pressed=false]{color:#8c907e}.animal-choice>span:last-child{margin-top:3px}.validation{font-size:12px;color:#a44c36;min-height:20px;text-align:center;margin-top:6px}.equation{display:flex;align-items:center;justify-content:center;gap:9px;font-size:12px;color:#838a73;margin:6px 0 17px}.equation>span:not(.little-droplet){color:#b3b59d}.little-droplet{width:9px;height:12px;background:#9cbfc0;display:inline-block;border-radius:70% 30% 55% 45%;transform:rotate(-35deg);margin-right:2px}.primary,.secondary{display:flex;align-items:center;justify-content:center;gap:13px;min-height:58px;width:100%;border-radius:19px;font-size:18px;font-weight:900}.primary{background:var(--green);color:#fffbee;border:1px solid var(--green);box-shadow:0 3px #3f543a}.primary:hover:not(:disabled){background:#445d3d}.primary svg,.secondary svg{width:22px;height:22px}.secondary{background:transparent;border:1.5px solid #ccd3bd;color:var(--green)}.secondary:hover{background:#eef0df}.small-note{text-align:center;font-size:10px;color:#9c9e89;margin-top:13px}footer{text-align:center;font-size:10px;color:#9a9e89;line-height:1.8;letter-spacing:.15px;padding-top:28px}footer span{margin-left:4px}.world{position:fixed;top:0;right:0;bottom:0;left:0;overflow:hidden;pointer-events:none}.distant-hill{position:absolute;width:70%;height:150px;background:#e7ead7;border-radius:60% 70% 0 0;bottom:0}.hill-one{left:-18%;transform:rotate(6deg)}.hill-two{right:-25%;bottom:-23px;background:#e0e7d0;transform:rotate(-8deg)}.ground{position:absolute;bottom:0;height:25px;width:100%;background:#dce4cb}.tiny-barn{position:absolute;bottom:57px;left:8%;width:59px;height:45px;background:#d7a58a;border-radius:3px;transform:rotate(-3deg)}.tiny-barn:before{content:"";position:absolute;left:-8px;top:-21px;width:74px;height:34px;background:#b87d64;clip-path:polygon(50% 0,100% 75%,96% 87%,4% 87%,0 75%)}.tiny-barn:after{content:"";position:absolute;bottom:0;left:21px;width:19px;height:28px;background:#f0dbc0;border-radius:9px 9px 0 0}.active-heading{text-align:center}.active-heading h1{margin-top:9px;font-size:31px}.clock{font-size:23px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:2px;color:#808971;margin-top:8px}.scene-wrap{position:relative;margin:6px -24px -12px}.scene-wrap canvas{display:block;width:100%;height:auto;aspect-ratio:480/570}.bath-caption{text-align:center;font-size:14px;font-weight:800;color:#68785c;margin-top:0;position:relative}.progress{height:7px;background:#e2e6d2;border-radius:20px;margin:16px 5px 20px;overflow:hidden}.progress>div{height:100%;border-radius:20px;background:#a1b28b;width:0}.controls{display:flex;gap:12px}.controls .primary{flex:1.2}.controls .secondary{flex:1;font-size:14px}.controls .primary,.controls .secondary{min-height:57px}.text-button{background:none;border:0;font-size:13px;font-weight:800;color:#8c917c;min-height:44px}.text-button:hover{color:var(--green);text-decoration:underline}.change-link{display:block;margin:10px auto 0}.paused-banner{position:absolute;top:48%;left:50%;transform:translate(-50%,-50%);background:#fffcefef;box-shadow:0 3px 20px #48503914;border:1px solid #d3dcc0;border-radius:40px;padding:13px 24px;font-size:19px;white-space:nowrap}.active+footer{padding-top:12px}.finish-heading{text-align:center}.sun{color:#caa15a;width:57px;height:57px;margin:0 auto 16px}.sun svg{width:100%;height:100%;stroke-width:1.35}.finish-heading .eyebrow{font-size:9px}.finish-heading h1{font-size:44px;margin-top:10px;color:var(--green)}.finish-heading p{font-size:18px;margin-top:10px;color:#899076}.completed>.secondary{margin-top:14px}.completed header{margin-bottom:10px}.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}dialog{width:min(90%,390px);padding:36px 28px 20px;border:1px solid #e1e4cf;border-radius:26px;background:#fcf9ed;color:var(--ink);text-align:center;box-shadow:0 15px 70px #34482c26}dialog::backdrop{background:#39463366;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}dialog .close{position:absolute;top:5px;right:6px;color:#7e886f}dialog h2{font-size:26px;line-height:1.2;margin-top:10px}dialog p{font-size:14px;line-height:1.6;color:#889077;margin:12px 0 25px}dialog .secondary{margin-top:12px;font-size:15px}dialog .text-button{margin-top:8px}@media(min-width:850px){.shell{padding-top:37px}header{margin-bottom:31px}.configuration{padding:0 8px}.tiny-barn{left:15%;bottom:74px;width:75px;height:55px}.tiny-barn:before{width:90px;top:-26px;height:40px}.distant-hill{height:210px}.hill-two{bottom:-66px}.world:after{content:"";position:absolute;right:12%;bottom:77px;width:4px;height:53px;background:#a9b88c;box-shadow:30px 7px #a9b88c,60px 12px #a9b88c}.active .scene-wrap{margin-top:0}.shell:has(.active){padding-top:25px}.shell:has(.active) header{margin-bottom:14px}.active .scene-wrap{max-height:530px}.active .scene-wrap canvas{max-height:530px;object-fit:contain}.shell:has(.completed) header{margin-bottom:16px}.shell:has(.completed) footer{padding-top:28px}}@media(max-width:420px){.shell{padding:23px 23px 16px}header{margin-bottom:27px}.brand{font-size:25px}.brand>svg{width:33px;height:33px}.brand small{font-size:7px}.intro h1{font-size:29px}.duration{gap:23px;margin:14px 0 23px}.number input{font-size:90px;height:98px;width:126px}.step{width:52px;height:52px}.choose h2{font-size:22px}.animal-grid{row-gap:12px;column-gap:6px;margin-top:18px}.animal-picture{height:99px}.animal-picture img{width:109px;height:109px}.animal-choice{font-size:12px}.equation{margin-top:4px}.primary{font-size:17px;min-height:56px}.eyebrow{font-size:9px;letter-spacing:1.7px}.active-heading h1{font-size:27px}.scene-wrap{margin-left:-20px;margin-right:-20px}.controls{gap:9px}.controls .secondary{font-size:12px;gap:7px}.controls .primary{font-size:17px;gap:8px}.finish-heading h1{font-size:40px}.tiny-barn{display:none}footer span{display:block;margin-left:0}footer{padding-top:22px}.active+footer{padding-top:7px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}.finish-heading{position:relative;z-index:1;padding-top:14px}.finish-heading h1{margin-top:13px}.finish-scene{height:auto;max-height:none;margin:17px -24px 5px;overflow:visible}.finish-scene canvas{aspect-ratio:4/3;margin-top:0}.meadow-caption{text-align:center;font-size:12px;color:#68715a;margin:7px 0 22px}@media(max-width:420px){.finish-scene{margin:17px -20px 5px}.completed .scene-wrap canvas{margin-top:0}.finish-heading{padding-top:8px}.finish-heading .eyebrow{font-size:8px;letter-spacing:1.5px}}.animal-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.animal-choice{min-width:0}.eyebrow,.hint,.number span,.clock,.equation,.equation>span:not(.little-droplet),.small-note,footer,.text-button,.finish-heading p,.brand small,.animal-choice[aria-pressed=false],dialog p{color:#68715a}html{height:100%}body.app-page{height:100vh;height:100dvh;overflow:hidden;overscroll-behavior:none}.app-page #app{height:100%;overflow:hidden}.app-page .shell{height:100%;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.5dvh,16px);padding:max(12px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}.app-page .shell header{flex:none;margin:0;min-height:44px}.app-page #content{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(6px,1.2dvh,12px);padding:0}.app-page #content>:not(.choose):not(.scene-wrap){flex-shrink:0}.app-page .intro h1{margin:0;font-size:clamp(25px,4.2dvh,32px)}.app-page .duration{gap:24px;margin:0}.app-page .number input{height:clamp(62px,12dvh,106px);font-size:clamp(58px,11dvh,96px)}.app-page .number span{font-size:14px;margin:0}.app-page .choose{flex:1;min-height:0;display:flex;flex-direction:column}.app-page .choose h2{font-size:clamp(20px,3.2dvh,24px);flex:none}.app-page .animal-grid{flex:1;min-height:0;grid-template-rows:repeat(2,minmax(0,1fr));gap:6px 8px;margin:4px 0 0}.app-page .animal-choice{min-height:0;height:100%;font-size:clamp(11px,1.8dvh,13px)}.app-page .animal-picture{height:auto;flex:1;min-height:0;width:100%;align-items:flex-end}.app-page .animal-picture img{width:100%;height:100%;max-height:160px;object-fit:contain;object-position:center bottom}.app-page .animal-picture:before{height:clamp(10px,3dvh,28px);bottom:3px}.app-page .animal-choice>span:last-child{flex:none;margin-top:0;line-height:1.2}.app-page .validation{min-height:0;margin:0;line-height:1.3}.app-page .validation:empty{display:none}.app-page .equation{margin:0;font-size:12px;min-height:18px}.app-page .primary,.app-page .secondary{min-height:52px}.app-page .active-heading h1{margin:0;font-size:clamp(24px,4dvh,31px)}.app-page .clock{font-size:clamp(19px,3.2dvh,23px);margin-top:3px}.app-page .scene-wrap{flex:1;min-height:0;max-height:none;display:flex;align-items:center;justify-content:center;margin:0 -8px;overflow:hidden}.app-page .scene-wrap canvas{width:100%;height:100%;min-height:0;max-height:none;aspect-ratio:auto;object-fit:contain;margin:0}.app-page .bath-caption{font-size:13px;margin:0;line-height:1.2}.app-page .progress{height:6px;margin:0 5px}.app-page .controls{flex:none;gap:10px}.app-page .controls .primary,.app-page .controls .secondary{min-height:52px}.app-page .change-link{margin:0 auto;min-height:36px}.app-page .finish-heading{padding:0}.app-page .finish-heading h1{font-size:clamp(28px,5.3dvh,44px);margin:0;line-height:1.05}.app-page .finish-heading p{font-size:17px;margin-top:5px}.app-page .completed>.secondary{margin-top:0}@media(max-height:620px){.app-page .shell{gap:6px;padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(8px,env(safe-area-inset-bottom))}.app-page #content{gap:5px}.app-page .brand{font-size:23px}.app-page .brand>svg{width:30px;height:30px}.app-page .brand small{display:none}.app-page .step{width:44px;height:44px}.app-page .primary,.app-page .secondary,.app-page .controls .primary,.app-page .controls .secondary{min-height:46px;font-size:16px}}@media(max-height:480px)and (min-aspect-ratio:4/3){.app-page .shell{width:min(100%,900px)}.app-page .configuration{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:auto minmax(0,1fr) auto;column-gap:20px!important}.app-page .configuration .intro{grid-column:1;grid-row:1}.app-page .configuration .intro h1{font-size:23px}.app-page .configuration .duration{grid-column:1;grid-row:2;gap:8px;align-self:center}.app-page .configuration .number input{width:85px;font-size:58px;height:65px;letter-spacing:-4px}.app-page .configuration .choose{grid-column:2;grid-row:1/3}.app-page .configuration .equation{display:none}.app-page .configuration #start{grid-column:1/-1;grid-row:3}.app-page .configuration .validation:not(:empty){grid-column:1/-1;grid-row:3;align-self:start;transform:translateY(-100%);font-size:11px}.app-page .active{position:relative;padding-left:50%!important}.app-page .active .scene-wrap{position:absolute;top:0;right:50%;bottom:0;left:0;margin:0}.app-page .active .active-heading{margin-top:auto}.app-page .active .change-link{margin-bottom:auto}.app-page .completed{display:grid!important;grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) auto auto;gap:6px 18px!important}.app-page .completed .finish-heading{grid-column:1;grid-row:1;align-self:center}.app-page .completed .finish-scene{grid-column:2;grid-row:1/-1;margin:0}.app-page .completed .primary,.app-page .completed>.secondary{grid-column:1}}
