@font-face{font-family:Maru;src:url('assets/MaruBuri-Regular.otf') format('opentype');font-display:swap}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:#faf7ee;color:#4c5146;font-family:Maru,'Apple SD Gothic Neo',serif;line-height:1.8}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button{border:0;background:none}button:focus-visible,a:focus-visible,canvas:focus-visible,[tabindex]:focus-visible{outline:3px solid #b98056;outline-offset:5px}img{object-fit:contain;max-width:100%}.skip{position:fixed;top:-80px;background:white;z-index:99;padding:10px}.skip:focus{top:0}.header{height:105px;max-width:1380px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 6%}.wordmark{font-family:Georgia,serif;font-size:49px;letter-spacing:-4px;line-height:1;font-weight:900;position:relative;color:#64775c}.logo-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:#e4b563;margin:0 0 3px 7px}.header nav{display:flex;align-items:center;gap:32px;font-size:16px}.pill{border-radius:100px;background:#e8ebdf;padding:11px 24px;font-family:inherit}.pill span{margin-left:12px}.hero{max-width:1380px;margin:auto;min-height:690px;padding:36px 6% 60px;display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:45px}.eyebrow{font:16px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:2.4px;font-weight:600;color:#8a9180}.hero h1{font-size:clamp(34px,3.6vw,51px);line-height:1.52;font-weight:400;letter-spacing:-2px;margin:25px 0 20px}h1 em{font-style:normal;position:relative;white-space:nowrap}h1 em:after{content:'';position:absolute;bottom:0;left:0;right:0;height:12px;background:#e4bb6640;border-radius:43% 65% 30% 50%;z-index:-1}.hero-copy p{font-size:16px;line-height:2;color:#86877b}.text-link{display:inline-block;font-size:16px;padding:8px 0;border-bottom:1px solid #7c8b6860}.text-link span{margin-left:15px}.hero-copy>.text-link{margin-top:15px}.little-friends{height:160px;display:flex;align-items:end;position:relative;margin:20px 0 -35px}.little-friends .art-button{width:155px;transform:rotate(-6deg);padding:0;transition:transform .25s}.little-friends .rabbit{width:115px;height:135px;margin-left:-10px;transform:rotate(7deg)}#peek-word{position:absolute;left:210px;top:0;color:#b98f62}.art-button:hover{scale:1.05}.peek{animation:bounce .65s}.paint-wrap{min-width:0;position:relative;scroll-margin-top:30px}.paint-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:13px;padding:0 12px}.handwritten{font-size:16px;transform:rotate(-4deg);color:#8b927b}.demo-tag{font:16px/1.4 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:1px;color:#949688}.paper{height:450px;background:#fffdf7;border-radius:48% 5% 5% 4% / 4% 3% 5% 3%;box-shadow:0 20px 55px #88816510,1px 4px 0 #e9e2d470;position:relative;isolation:isolate;overflow:hidden;border:1px solid #e9e2d478}canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.paper:after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.08;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23000' filter='url(%23n)' opacity='.45' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}.paint-hint{pointer-events:none;position:absolute;left:0;right:0;top:37%;text-align:center;font-size:18px;line-height:1.9;color:#71846b;transition:opacity .4s}.paint-hint b{font-weight:400}.paint-hint>span{display:block;font-size:42px;line-height:1.2;color:#9eaa8a}.paint-hint.hidden{opacity:0}.paper-reset{position:absolute;top:15px;right:15px;width:48px;height:48px;border-radius:50%;background:transparent;z-index:2}.paint-tray{margin:-3px auto 0;position:relative;z-index:3;display:flex;justify-content:center;align-items:center;gap:16px;background:#f1ede2;border:1px solid #e8e2d5;border-radius:0 0 35px 35px;padding:16px 20px;box-shadow:0 6px 0 #e8e3d780;width:max-content;max-width:100%}.swatches,.tools{display:flex;gap:10px}.swatches button{height:32px;width:32px;border-radius:44% 53% 48% 42%;background:var(--swatch);box-shadow:inset 1px 2px 2px #fff8,0 3px 0 #0001;position:relative}.swatches button:before{content:'';position:absolute;inset:-6px}.swatches button[aria-pressed=true]{box-shadow:inset 0 3px 5px #0003;transform:translateY(3px)}.swatches button[aria-pressed=true]:after{content:'';position:absolute;inset:11px;border-radius:50%;background:#fff9}.tools button{width:36px;height:36px;padding:2px;border-radius:10px}.tools img{width:32px;height:32px}.tools button[aria-pressed=true]{background:#dedbcf;box-shadow:inset 0 2px 4px #0001}.tray-divider{height:28px;width:1px;background:#d5d2c5}.paper-caption{text-align:center;font-size:16px;color:#9a9a8c;margin-top:21px}.chapter-line{display:flex;justify-content:center;align-items:center;gap:55px;border-block:1px solid #dedfce;padding:22px 5%;font-size:16px;color:#8c947f}.chapter-line i{font-size:19px;font-style:normal;color:#c6b989}.section-heading{text-align:center}.section-heading h2,h2{font-size:37px;line-height:1.6;letter-spacing:-1.5px;font-weight:400;margin:16px 0}.section-heading p,p{color:#8a8e7f;font-size:16px}.garden-section{padding-top:100px;position:relative;background:linear-gradient(#faf7ee,#f0f1e5)}.garden{height:auto;aspect-ratio:1400 / 933;position:relative;overflow:hidden;touch-action:none;cursor:crosshair;background:url('assets/meadow-2.webp') center/contain no-repeat}.garden-wash{position:absolute;inset:0;background:linear-gradient(#f8f7ee,transparent 55%);pointer-events:none}#flowers{position:absolute;inset:0;pointer-events:none}#flowers img{position:absolute;transform-origin:50% 90%;width:90px;height:110px;object-fit:contain;animation:grow .7s both}.garden-note{position:absolute;left:50%;top:42%;transform:translateX(-50%);background:#fff9;border-radius:99px;padding:9px 24px;font-size:16px;pointer-events:none;white-space:nowrap}#butterfly{position:absolute;width:60px;height:60px;left:65%;top:22%;pointer-events:none;transition:left 1.4s ease-out,top 1.4s ease-out;animation:flutter 2s infinite}.reset-garden{position:absolute;bottom:18px;right:6%;background:#faf7eed9;border-radius:20px;padding:7px 15px;border:0}.sort-section{padding:120px 7%;max-width:1400px;margin:auto;display:grid;grid-template-columns:.85fr 1.15fr;gap:55px;align-items:center}.sort-note{display:inline-block;margin-top:20px;color:#b49a70}.sorting{position:relative}.pieces{height:125px;display:flex;justify-content:space-around;align-items:center}.piece{position:relative;width:65px;height:65px;background:var(--piece);box-shadow:inset 2px 3px 6px #fff7,inset -2px -3px 5px #0001;touch-action:none;z-index:3;transform:rotate(-10deg);transition:opacity .3s}.piece.circle{border-radius:50%}.piece.star{clip-path:polygon(50% 0,64% 33%,100% 38%,73% 63%,81% 100%,50% 81%,18% 100%,25% 64%,0 38%,36% 33%);transform:rotate(12deg)}.piece.square{border-radius:13px;transform:rotate(15deg)}.piece.selected{outline:3px dashed #84735a;outline-offset:7px}.piece.placed{visibility:hidden}.crates{display:flex;gap:0}.crate{position:relative;width:33.33%;padding:0 3px;min-width:0}.crate img{width:100%;height:170px}.crate[data-family="0"] img{filter:sepia(.5) saturate(1.3)}.crate[data-family="1"] img{filter:sepia(.35) hue-rotate(55deg) saturate(.7)}.crate[data-family="2"] img{filter:sepia(.3) hue-rotate(150deg)}.crate>span{display:block;font-size:16px}.crate .collected{position:absolute;left:calc(50% - 26px);top:45px;width:52px;height:52px;pointer-events:none;animation:bounce .5s}.sorting>p{text-align:center;font-size:16px;min-height:20px}.sorting>.text-link{display:block;margin:10px auto}.worlds{padding:90px 6% 100px;background:#f1efe5;border-radius:70px 70px 0 0}.mode-grid{max-width:1150px;margin:55px auto 0;display:grid;grid-template-columns:repeat(8,1fr);column-gap:20px;row-gap:35px}.mode-card{padding:0;transition:transform .3s}.mode-card:hover{transform:translateY(-8px) rotate(-3deg)}.mode-card img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply}.mode-card span{display:block;font-size:16px;line-height:1.7;min-height:38px;white-space:normal}.parents{padding:100px 8%;max-width:1400px;margin:auto;display:grid;grid-template-columns:.8fr 1.2fr;gap:80px}.parent-notes article{position:relative;border-bottom:1px solid #dedfcf;padding:0 0 18px 42px;margin-bottom:25px}.parent-notes article>span{position:absolute;left:0;top:5px;font-size:16px;color:#bba27c}.parent-notes h3{font-weight:400;font-size:17px;margin:0}.parent-notes p{font-size:16px}.bedtime{background:#ebece7;position:relative;padding:100px 6% 60px;transition:background 1.5s,color 1.5s;overflow:hidden}.bedtime.asleep{background:#303e56;color:#efe6d1}.bedtime.asleep p,.bedtime.asleep .eyebrow{color:#bbc6d1}.night-stars{position:absolute;inset:25px 10% auto;font-size:28px;letter-spacing:65px;color:#e7c786;opacity:0;transition:opacity 1.5s;pointer-events:none;white-space:nowrap}.night-stars span{font-size:16px}.asleep .night-stars{opacity:1}#lamp{position:absolute;top:35px;right:7%;z-index:2;transition:transform .2s}#lamp:active{transform:scale(.95)}.sleepers{display:flex;justify-content:center;align-items:end;max-width:640px;margin:20px auto 35px}.sleepers img{width:33%;height:180px;transition:filter 1.5s}.asleep .sleepers img{filter:brightness(.8)}.release{text-align:center;padding-top:20px}.release .wordmark{font-size:70px}.asleep .release .wordmark{color:#e7dac0}.release p{font-size:16px;margin:16px 0 26px}.release-badge{display:inline-block;padding:12px 27px;border-radius:30px;border:1px solid #9da69780;font-size:16px}.release small{display:block;font:16px -apple-system,sans-serif;letter-spacing:2px;margin-top:16px;color:#929c97}footer{padding:35px 6%;display:flex;gap:24px;align-items:center;justify-content:space-between;font-size:16px;color:#939888}footer .wordmark{font-size:29px;letter-spacing:-2px}footer nav{display:flex;gap:22px}dialog{width:min(880px,94vw);max-height:90dvh;border:0;border-radius:30px;background:#faf7ee;padding:35px;color:#53594b;box-shadow:0 30px 150px #20251e55}dialog::backdrop{background:#363e386b;backdrop-filter:blur(7px)}#dialog-close{position:absolute;right:18px;top:12px;width:44px;height:44px;font-size:30px}.dialog-copy{margin:10px 0 25px}.dialog-copy h2{font-size:28px;margin:7px 0}.dialog-copy p{font-size:16px}#mode-screen{display:block;width:100%;max-height:55vh;object-fit:contain;border-radius:18px}.dialog-footer{text-align:center;font-size:16px}body:has(dialog[open]){overflow:hidden}.legal{max-width:820px;margin:65px auto;padding:0 25px 90px}.legal h1{font-size:34px;font-weight:400}.legal h2{font-size:21px;margin-top:35px}.legal p,.legal li{font-size:16px}.legal a{text-decoration:underline}.burst{position:absolute;pointer-events:none;z-index:6;font-size:25px;animation:spark .8s forwards;color:#cfac63}@keyframes spark{to{transform:translate(var(--x),var(--y)) rotate(100deg);opacity:0}}@keyframes grow{from{scale:.1;opacity:0}to{scale:1;opacity:1}}@keyframes bounce{0%,100%{translate:0 0}40%{translate:0 -18px}70%{translate:0 4px}}@keyframes flutter{50%{transform:translate(10px,-7px) rotate(6deg)}}
@media(min-width:1500px){.hero{min-height:770px}.paper{height:490px}}@media(max-width:1050px){.hero{gap:25px;padding-inline:5%;grid-template-columns:.9fr 1.1fr}.paint-tray{gap:9px;padding:13px}.swatches,.tools{gap:7px}.swatches button{width:27px;height:29px}.mode-grid{grid-template-columns:repeat(4,1fr);max-width:750px}.mode-card img{max-height:140px}.sort-section{gap:20px}.parents{gap:35px}.chapter-line{gap:25px}}@media(max-width:700px){.header{height:80px;padding:0 6%}.wordmark{font-size:42px}.header nav{gap:19px;font-size:16px}.header nav>a:nth-child(2){display:none}.pill.small{padding:8px 15px}.hero{display:flex;flex-direction:column;padding:22px 6% 45px;gap:35px;align-items:stretch;min-height:0}.hero-copy{position:relative}.hero h1{font-size:34px;line-height:1.5;margin:16px 0}.hero-copy p{font-size:16px;margin-bottom:0}.hero-copy>.text-link{display:none}.eyebrow{font-size:16px;letter-spacing:1.8px}.little-friends{position:absolute;right:-12px;bottom:-19px;height:100px;width:135px;margin:0;pointer-events:none}.little-friends .art-button{width:86px;pointer-events:auto}.little-friends .rabbit{width:64px;height:75px;margin-left:-17px}#peek-word{left:57px;top:-18px;font-size:16px}.paint-label{padding:0 3px}.handwritten{font-size:16px}.demo-tag{font-size:16px}.paper{height:340px}.paint-tray{gap:9px;padding:14px 12px}.swatches{gap:10px}.swatches button{width:27px;height:29px}.tools{gap:4px}.tools button{width:31px;height:34px}.tools img{width:28px;height:28px}.paper-caption{font-size:16px;margin-bottom:0}.chapter-line{padding:18px 5%;gap:12px;font-size:16px}.chapter-line>span:last-child,.chapter-line>i:last-of-type{display:none}.chapter-line i{font-size:16px}.garden-section{padding-top:65px}.section-heading h2,h2{font-size:29px}.section-heading p{font-size:16px;padding:0 20px}.garden{height:auto}.sort-section{padding:65px 6%;grid-template-columns:1fr;gap:25px}.sort-copy{text-align:center}.sort-copy p{font-size:16px}.sort-note{margin-top:4px}.pieces{height:100px}.piece{width:52px;height:52px}.crate img{height:135px}.worlds{padding:65px 5%;border-radius:38px 38px 0 0}.mode-grid{gap:22px 9px;margin-top:35px}.mode-card span{font-size:16px}.parents{padding:70px 7%;grid-template-columns:1fr;gap:25px}.parents>div:first-child{text-align:center}.parent-notes article{margin-bottom:20px}.bedtime{padding:90px 5% 50px}#lamp{right:9px;top:16px;width:70px;padding:0}.sleepers img{height:120px}.night-stars{letter-spacing:22px;left:5%}.release .wordmark{font-size:60px}footer{flex-wrap:wrap;padding:28px 6%;gap:18px}footer nav{gap:16px}footer>a:last-child{width:100%}dialog{padding:25px 20px}.dialog-copy h2{font-size:24px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.burst{display:none}}
/* Native rounded, four-color wordmark exported from the same system font and geometry. */
.wordmark{display:inline-flex;align-items:center;letter-spacing:0;line-height:1}
.wordmark img{display:block;width:126px;height:63px;object-fit:contain}
.release .wordmark img{width:170px;height:85px}footer .wordmark img{width:80px;height:40px}
.crate[data-family="0"] img{filter:url(#crate-0)}
.crate[data-family="1"] img{filter:url(#crate-1)}
.crate[data-family="2"] img{filter:url(#crate-2)}
/* Keep white-backed illustrations blended against the actual section during transforms. */
.mode-card{background:transparent;mix-blend-mode:multiply}
.mode-card img{mix-blend-mode:normal}
#butterfly{width:44px;height:44px;z-index:1}
#butterfly.landed{animation:none;transform:none}
#paint-status{text-align:center;font-size:16px}
@media(max-width:700px){.header .wordmark img{width:105px;height:53px}}
/* Travel is one bounded curved flight, with no competing CSS position transition. */
#butterfly{transition:none}
.crate{--crate-image-height:170px}
.crate-front{position:absolute;top:0;left:3px;width:calc(100% - 6px);height:var(--crate-image-height);z-index:4;pointer-events:none}
.crate[data-family="0"] .crate-front{filter:url(#crate-0)}
.crate[data-family="1"] .crate-front{filter:url(#crate-1)}
.crate[data-family="2"] .crate-front{filter:url(#crate-2)}
.crate .collected{top:calc(var(--crate-image-height)*.5 - 32px);z-index:3}
@media(max-width:700px){.crate{--crate-image-height:135px}}

/* Reuse the app blanket above each friend; the existing lamp state drives both. */
.sleeping-friend{position:relative;width:33%;height:180px;isolation:isolate}
.sleeping-friend>img{width:100%;height:100%}
.sleeping-friend>.sleep-blanket{position:absolute;z-index:1;width:90%;height:79%;left:5%;top:36%;object-fit:fill;pointer-events:none;opacity:0;transform:translateY(28%) scale(.94);transform-origin:50% 100%;transition:transform 1.1s cubic-bezier(.22,.7,.26,1),opacity .55s,filter 1.5s}
.asleep .sleeping-friend>.sleep-blanket{opacity:1;transform:translateY(0) scale(1)}
@media(max-width:700px){.sleeping-friend{height:120px}}
@media(prefers-reduced-motion:reduce){.sleeping-friend>.sleep-blanket{transform:none;transition:opacity .2s}.asleep .sleeping-friend>.sleep-blanket{transform:none}}

/* A full-width, illustrated sketchbook is the first hands-on introduction. */
.hero{max-width:1440px;width:100%;display:flex;flex-direction:column;gap:24px;padding:26px 3% 52px;min-height:0}
.hero-copy{width:100%;text-align:center;position:relative;padding:0 150px}
.hero-copy .eyebrow{color:#717965;letter-spacing:1.6px}
.hero h1{font-size:clamp(35px,4.2vw,59px);line-height:1.4;letter-spacing:-1.7px;margin:14px 0}
.hero-copy p{font-size:18px;color:#737868;line-height:1.8;margin:0}
.hero-copy>.text-link{display:none}
.little-friends{position:absolute;right:0;bottom:-32px;width:150px;height:130px;margin:0;pointer-events:none;z-index:2}
.little-friends .art-button{width:92px;pointer-events:auto;flex-shrink:0}
.little-friends .rabbit{width:74px;height:94px;margin-left:-20px}
#peek-word{left:0;top:-15px;font-size:18px;white-space:nowrap}
.paint-wrap{width:100%}
.paint-label{padding:0 6%;margin:8px 0 12px;gap:16px}
.handwritten{font-size:20px;color:#727d60}
.demo-tag{font-size:16px;letter-spacing:0;color:#737869}
.paper{width:100%;height:clamp(450px,49vw,660px);background:url('assets/sketchbook.webp') center/100% 100% no-repeat;border:0;border-radius:0;box-shadow:none;isolation:isolate;overflow:visible}
.paper:after{display:none}
.paper canvas{position:absolute;left:8%;top:7%;width:87%;height:80%;mix-blend-mode:multiply;border-radius:5px}
.paint-hint{left:8%;right:5%;top:32%;font-size:clamp(23px,2.5vw,32px);color:#738469}
.paint-hint>span{font-size:48px;margin-top:8px}
.paper-reset{width:56px;height:56px;padding:7px;transition:transform .18s}
.paper-reset:active{transform:scale(.88) rotate(-20deg)}
.paper .paper-reset{top:8%;right:5%}
.paint-tray{margin:-12px auto 0;padding:16px 26px 12px;gap:24px;max-width:100%;border-radius:24px;background:#f1eadc;border:1px solid #e3d9c4;box-shadow:0 5px 0 #dfd6c4,0 12px 24px #6655370d;align-items:flex-start}
.swatches{gap:16px;padding-bottom:28px;padding-top:4px}
.swatches button{width:44px;height:44px;transition:transform .18s,box-shadow .18s}
.swatches button span{position:absolute;top:50px;left:-5px;right:-5px;font-size:16px;line-height:1.2;color:#646b5b}
.swatches button[aria-pressed=true]:after{display:none}
.swatches button[aria-pressed=true]{transform:translateY(3px);box-shadow:inset 0 4px 7px #0004,0 0 0 3px #f6f1e8,0 0 0 5px #acb698}
.tools{gap:10px}
.tools button{width:56px;height:78px;padding:4px;border-radius:14px;display:flex;align-items:center;flex-direction:column;gap:4px;transition:transform .18s,background .18s}
.tools img{width:44px;height:44px}
.tools span{font-size:16px;line-height:1.2}
.tools button:active{transform:translateY(3px)}
.tools button[aria-pressed=true]{background:#dce2d1;box-shadow:inset 0 2px 4px #66765325}
.tray-divider{height:65px;background:#d7cdbb}
.paper-caption{font-size:17px;color:#777d6d;margin-top:24px}
.eyebrow{letter-spacing:1.6px;line-height:1.6}
.section-heading p,.sort-copy p,.parent-notes p{font-size:18px;color:#747a6b}
.mode-card span{font-size:16px;min-height:58px}.mode-grid{grid-template-columns:repeat(4,1fr);max-width:1100px;gap:34px}
.mode-card img{max-height:175px}
.chapter-line{flex-wrap:wrap;gap:20px 30px}.chapter-line span{font-size:16px}
footer{flex-wrap:wrap;gap:20px;font-size:16px}footer nav{flex-wrap:wrap}
@media(max-width:700px){
 .header{height:88px}.header nav{gap:14px;font-size:16px}.pill.small{padding:8px 13px}
 .hero{padding:18px 0 36px;gap:22px}.hero-copy{padding:0 22px}.hero-copy .eyebrow{display:none}
 .hero h1{font-size:34px;line-height:1.45;margin:4px 0 12px}.hero-copy p{font-size:17px;max-width:330px;margin:auto}
 .little-friends{display:none}.paint-label{padding:0 6%;display:block}.paint-label .handwritten{display:block;transform:none;font-size:20px}.paint-label .demo-tag{display:block;margin-top:3px}
 .paper{height:430px}.paint-hint{font-size:24px}.paper .paper-reset{right:4%;top:7%}
 .paint-tray{margin:-10px 14px 0;width:calc(100% - 28px);padding:14px 10px 10px;gap:12px;flex-wrap:wrap;justify-content:center}
 .swatches{gap:18px;padding-bottom:26px}.swatches button{width:42px;height:42px}.swatches button span{top:48px}
 .tray-divider{display:none}.tools{width:100%;justify-content:center;border-top:1px solid #d7cdbb;padding-top:10px;gap:18px}.tools button{width:72px;height:76px}
 .paper-caption{padding:0 18px;font-size:16px}.mode-grid{gap:24px 14px;grid-template-columns:repeat(2,1fr)}
 .section-heading{padding-inline:20px}.chapter-line i{display:none}.chapter-line{flex-direction:column;gap:6px}
 .bedtime .eyebrow{max-width:240px;display:inline-block}.header .wordmark img{width:105px}
}

/* Temporary painted page above the fresh sheet; never intercept drawing after completion. */
.turning-sheet{position:absolute;left:8%;top:7%;width:87%;height:80%;z-index:4;transform-origin:0 50%;border-radius:3px 12px 12px 3px;background:#faf7ee;box-shadow:10px 6px 20px #51472f30;pointer-events:none;backface-visibility:hidden}
.paper .turning-sheet canvas{position:absolute;inset:0;width:100%;height:100%;border-radius:inherit;pointer-events:none}
.turning-sheet:after{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,#73624520,transparent 12%,transparent 70%,#fff7);pointer-events:none}
.page-turning>#paint-canvas{pointer-events:none}.page-turning .paint-hint{opacity:0}.page-turning .paper-reset{visibility:hidden}

/* Icon-only paint controls and the same layered star geometry used by the app. */
.paint-tray{align-items:center;padding-block:14px}.swatches{padding-block:0}.tools button{height:56px;justify-content:center}.tray-divider{height:44px}
.paint-hint{top:44%;line-height:1.6;font-size:clamp(20px,2.5vw,32px);padding:0 16px;transform:translateY(-50%)}
.little-friends{bottom:0;height:105px}.little-friends .art-button{width:75px}.little-friends .rabbit{width:63px;height:76px}
.piece.star{clip-path:none;background:transparent url('assets/sorting-star.svg') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 4px 3px #617d6633)}
@media(max-width:700px){.tools button{height:56px}.swatches{padding-block:0}.hero{gap:18px}.paint-hint{font-size:22px}}

.piece.circle,.piece.square{background-color:transparent;background-position:center;background-size:contain;background-repeat:no-repeat;box-shadow:none;filter:drop-shadow(0 4px 3px #617d6633)}
.piece.circle{background-image:url('assets/sorting-circle.svg')}.piece.square{background-image:url('assets/sorting-square.svg')}

/* Edge-to-edge sketchbook with a centered, uncluttered headline. */
.hero{max-width:none;padding-inline:0}.hero-copy{padding-inline:24px}.hero h1 em{font-weight:700}

/* Shared quiet guidance across the three hands-on demos. */
.paint-hint,.garden-note,#sort-status{font-family:Maru,'Apple SD Gothic Neo',serif;font-size:18px;font-weight:400;line-height:1.8;letter-spacing:0;color:#718067}
.garden-note{background:none;border-radius:0;padding:0 16px;max-width:90%;width:max-content;white-space:normal;text-align:center}
/* Only soften the table outside the book; paper, binding and controls stay sharp. */
.paper:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:1;background:#faf7ee;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);mask-image:linear-gradient(to bottom,#000 0%,#0009 1.5%,transparent 4.5%,transparent 93%,#0007 96%,#000 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#0009 1.5%,transparent 4.5%,transparent 93%,#0007 96%,#000 100%)}

.hero-release{margin:22px auto 0;text-align:center}.hero-release .release-badge{display:inline-block}.hero-release small{display:block;margin-top:10px;font-size:16px;line-height:1.6;letter-spacing:1px;color:#737d6b}
.app-store-badge-link{display:inline-block;line-height:0;border-radius:8px;transition:transform .2s ease,filter .2s ease}.app-store-badge-link:hover{transform:translateY(-2px);filter:drop-shadow(0 7px 8px #4c514626)}.app-store-badge-link:active{transform:translateY(0)}.app-store-badge{display:block;width:clamp(150px,13vw,185px);height:auto}

/* Fade just the meadow artwork into the same page color at both edges. */
.garden-section{background:#faf7ee}.garden{background:none}.garden-wash{display:none}
.garden:before{content:'';position:absolute;inset:0;background:url('assets/meadow-2.webp') center/contain no-repeat;pointer-events:none;mask-image:linear-gradient(to bottom,transparent 0%,#0005 7%,#000 22%,#000 78%,#0007 91%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#0005 7%,#000 22%,#000 78%,#0007 91%,transparent 100%)}
.paint-hint,.garden-note,#sort-status{font-size:20px}
#sort-status{margin-top:-18px;position:relative}
.piece.star{background-size:115% 115%}
.mode-card.coming-soon img{filter:grayscale(1);opacity:.42}.mode-card.coming-soon>span:not(.coming-soon-label){color:#85877f;min-height:0}
.mode-card .coming-soon-label{font-size:16px;line-height:1.5;min-height:0;display:inline-block;margin-top:8px;padding:3px 13px;border:1px solid #b8b9ae;border-radius:20px;color:#74786c;background:#e6e6dc80}
@media(max-width:700px){#sort-status{margin-top:-12px}}

/* Follow the illustrated top sheet, leaving binding and stacked edges exposed. */
.paper>#paint-canvas,.paper>.turning-sheet{left:6.8%;top:5.4%;width:90.7%;height:84%;border-radius:0;clip-path:var(--paper-outline)}
.paper .turning-sheet canvas{clip-path:none;border-radius:0}

.site-footer{display:grid;grid-template-columns:1fr auto 1fr;gap:40px;padding:36px 6%;align-items:center}
.footer-brand{display:flex;flex-direction:column;align-items:flex-start;gap:8px}.site-footer .footer-brand .wordmark img{width:125px;height:auto}.footer-brand>span{font-size:16px}
.site-footer nav{display:flex;gap:36px;align-items:center;justify-content:center}.site-footer nav a{padding:10px 0}.site-footer>a:last-child{justify-self:end;width:auto}
@media(max-width:850px){.site-footer{grid-template-columns:1fr auto;gap:24px 36px}.site-footer>a:last-child{grid-column:1/-1;justify-self:start}.site-footer nav{gap:28px}}
@media(max-width:520px){.site-footer{grid-template-columns:1fr;gap:24px}.site-footer nav{justify-content:flex-start;flex-wrap:wrap;gap:12px 28px}.site-footer>a:last-child{grid-column:auto}}

/* Mobile uses a dedicated portrait sheet and a simple brush palette. */
@media(max-width:600px){
 .header nav a[href="#worlds"],.header nav a[href="#release"]{display:none}
 .paint-tray .tools{display:none}
 .paint-tray{gap:0;padding:14px 10px}
 .paper{background-image:url('assets/sketchbook-mobile.webp');height:auto;aspect-ratio:2 / 3}
 .paper>#paint-canvas,.paper>.turning-sheet{left:9.5%;top:4.1%;width:86.5%;height:85.4%}
 .garden{height:auto;aspect-ratio:1}
 .garden:before{background-size:cover}
 .paint-hint,.garden-note,#sort-status{font-size:16px}
 .section-heading>p,.sort-copy>p,.bedtime>p{font-size:16px}
}

/* Keep the bedtime switch alongside its invitation. */
.night-title-group{display:flex;justify-content:center;align-items:flex-end;gap:18px;margin:24px auto}
.night-title-group #night-title{margin:0}
.night-title-group #lamp{position:static;flex:0 0 64px;width:64px;height:64px;padding:0;margin-bottom:4px}
.night-title-group #lamp img{display:block;width:100%;height:auto}
.piece.star{background-size:130% 130%}
@media(max-width:600px){
 #flowers{--flower-scale:.65}
 .night-title-group{gap:10px}
 .night-title-group #lamp{flex-basis:44px;width:44px;height:44px;margin-bottom:0}
}

.header{justify-content:center}
.header .wordmark img{width:145px;height:auto}
.tools [data-tool="brush"] img{transform:rotate(180deg)}
.paper>#paint-canvas{cursor:var(--paint-cursor,crosshair)}
@media(max-width:600px){.header .wordmark img{width:120px}}

.garden-reset{display:block;margin:8px auto 0;padding:10px 20px;min-height:44px;font-size:16px;color:#858c7d;background:none;text-underline-offset:4px}
.garden-reset:hover{text-decoration:none;color:#616e56;background:#e9ecdf}
#sorting{container-type:inline-size}
#sort-status{font-size:clamp(12px,4.5cqi,16px);white-space:nowrap;letter-spacing:-.25px}

.garden-reset{display:flex;align-items:center;justify-content:center;gap:7px}
.garden-reset[hidden]{display:none}

.garden-reset{border-radius:22px;transition:background-color .2s,color .2s}
.paper:not(:has(.paint-hint.hidden)) #paint-reset{visibility:hidden;pointer-events:none}
.hero-release small{font-size:14px}
.header{height:88px}
/* The PNG's visible art is centered at x=289 in its 680px-wide canvas. */
.header .wordmark img{transform:translateX(7.5%)}
.hero{padding-top:8px}
@media(max-width:600px){.header{height:76px}.hero{padding-top:6px}}

/* Crop only the layout box to the logo's alpha bounds; preserve the original asset. */
.header>.wordmark{--logo-width:145px;display:block;position:relative;width:calc(var(--logo-width)*534/680);height:calc(var(--logo-width)*201/680);overflow:hidden;flex:none}
.header .wordmark img{position:absolute;width:var(--logo-width);max-width:none;height:auto;left:calc(var(--logo-width)*-22/680);top:calc(var(--logo-width)*-66/680);transform:none}
.hero-copy .eyebrow{font-size:14px}
#sort-status:empty{display:none}
#worlds>.section-heading>p{font-size:16px}
.mode-card{min-width:0;container-type:inline-size}
.mode-card>span:first-of-type{font-size:clamp(12px,10cqi,16px);letter-spacing:-.3px;white-space:nowrap;min-height:28px}
.mode-card .coming-soon-label{font-size:13px;padding:2px 10px}
@media(max-width:600px){.header>.wordmark{--logo-width:120px}#worlds>.section-heading>p{font-size:14px}}

.header{margin-top:20px}
.hero-release{padding-bottom:24px}
@media(min-width:1200px){
 .paint-wrap{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:16px;padding-right:24px}
 .paint-tray{width:72px;max-width:none;margin:0;padding:0;flex-direction:column;gap:20px;background:none;border:0;box-shadow:none;border-radius:0}
 .paint-tray .swatches,.paint-tray .tools{flex-direction:column;align-items:center;gap:10px;padding:0;border:0;width:auto}
 .paint-tray .swatches button{width:40px;height:40px}
 .paint-tray .tools button{width:48px;height:48px;padding:7px;background:none;box-shadow:none}
 .paint-tray .tools img{width:34px;height:34px}
 .paint-tray .tools button[aria-pressed=true]{outline:none;background:#dce2d1;box-shadow:inset 0 2px 4px #66765325}
 .paint-tray .tray-divider{display:none}
}
@media(max-width:600px){.header{margin-top:14px}.hero-release{padding-bottom:18px}}

.piece.triangle{background:transparent url('assets/sorting-triangle.svg') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 4px 3px #92702b33)}
.piece.diamond{background:transparent url('assets/sorting-diamond.svg') center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 4px 3px #547f8e33)}
.pieces{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));justify-items:center;align-items:center;gap:16px 8px;height:200px;padding:8px 0 20px}
.mode-card .coming-soon-label{font-size:11px;line-height:1.4;padding:2px 8px;margin-top:5px}
.parent-notes article{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:14px;align-items:baseline;padding-left:0}
.parent-notes article>span{position:static;font-size:16px;line-height:1.5}
.parent-notes h3{font-size:22px;line-height:1.5}
.parent-notes article>p{grid-column:2}
.night-title-group{font-size:37px;align-items:center;width:max-content;max-width:100%;gap:18px}
.night-title-group #night-title{font-size:inherit;line-height:1.6;flex:none}
.night-title-group #lamp{flex:0 0 3.2em;width:3.2em;height:3.2em;font-size:inherit;margin:0}
#night-description{margin-bottom:44px}
.bedtime>.sleepers{margin-bottom:0}
.bedtime>.release{padding-top:64px}
.bedtime>.release>.wordmark{display:block;line-height:0}
.bedtime>.release>p{margin-top:0}
.site-footer .footer-brand .wordmark img{width:95px}
@media(max-width:600px){.night-title-group{font-size:clamp(20px,6vw,29px);gap:10px}.pieces{height:180px}#night-description{margin-bottom:24px}.bedtime>.sleepers{margin-top:16px}.bedtime>.release{padding-top:40px}}

@media(min-width:1200px){
 .paint-wrap{display:block;padding-right:0}
 .paint-tray{position:absolute;right:4%;top:50%;transform:translateY(-50%);z-index:5}
}

/* Optical sizing and calm sky decorations. */
.piece.triangle,.piece.diamond{background-size:118% 118%}
.parent-notes article{align-items:start}
.parent-notes article>span,.parent-notes article>h3{height:36px;line-height:36px;align-self:center;margin:0}
.parent-scene{position:relative;width:100%;max-width:440px;aspect-ratio:3/2;margin-top:30px;isolation:isolate;pointer-events:none;mask-image:radial-gradient(ellipse at center,#000 32%,transparent 72%)}
.parent-sky,.parent-meadow{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.parent-sky{opacity:.7}.parent-meadow{object-fit:contain}
.sky-bubble{position:absolute;border-radius:50%;border:1px solid #fff9;background:radial-gradient(circle at 28% 22%,#fff9,transparent 18%,#d4ebf22b 60%,#d4c4e977 83%,#fff9);box-shadow:inset 2px 2px 5px #fff8,inset -2px -2px 5px #9dbdcc44}
.bubble-one{width:72px;height:72px;left:43%;top:34%}.bubble-two{width:39px;height:39px;left:26%;top:57%}.bubble-three{width:27px;height:27px;left:64%;top:23%}
.bedtime .night-stars{inset:0;width:100%;height:100%;font-size:0;letter-spacing:0;white-space:normal}
.night-stars>i{position:absolute;width:var(--star-size);height:var(--star-size);border-radius:50%;background:#f6edcf;box-shadow:0 0 5px #e6e7ff70}
.night-stars .night-moon{position:absolute;right:10%;top:8%;width:clamp(74px,10vw,140px);height:auto;filter:drop-shadow(0 0 18px #f5dfa321)}
.bedtime>.section-heading,.bedtime>.sleepers,.bedtime>.release{position:relative;z-index:1}
@media(max-width:700px){.parent-scene{margin:20px auto 0;max-width:350px}.night-stars .night-moon{right:3%;top:3%;width:65px}}

/* Center the visible logo artwork, accounting for its asymmetric transparent margins. */
.bedtime>.release>.wordmark{width:170px;margin-inline:auto}
.bedtime>.release>.wordmark>img{display:block;transform:translateX(12.75px)}

/* Two centered pieces above three evenly spaced pieces. */
.pieces{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,1fr)}
.pieces>.triangle{grid-column:2/span 2;grid-row:1}.pieces>.diamond{grid-column:4/span 2;grid-row:1}
.pieces>.circle{grid-column:1/span 2;grid-row:2}.pieces>.star{grid-column:3/span 2;grid-row:2}.pieces>.square{grid-column:5/span 2;grid-row:2}
.sort-copy{container-type:inline-size}#sort-title{font-size:clamp(25px,8.2cqi,37px)}#sort-title>span{white-space:nowrap}
.parents>div:first-child{position:relative;isolation:isolate;min-height:430px}
.parents>div:first-child>.eyebrow,.parents>div:first-child>h2{position:relative;z-index:1}
.parents>div:first-child>h2{word-break:keep-all}
.parents .parent-scene{position:absolute;inset:-25px -12%;width:124%;height:calc(100% + 50px);max-width:none;aspect-ratio:auto;margin:0;opacity:.38;z-index:0;mask-image:radial-gradient(ellipse at center,#000 28%,transparent 73%)}
.parents .parent-sky{object-fit:cover}.parents .parent-meadow{object-fit:contain}
.night-stars .night-moon{right:5%;top:3%}
.site-footer,.site-footer a,.site-footer .footer-brand>span{font-size:13px}
@media(max-width:700px){.parents>div:first-child{min-height:340px}.night-stars .night-moon{right:1%;top:1%}}
@media(max-width:600px){.hero-copy .eyebrow{display:inline-block;font-size:11px;letter-spacing:1.2px}.hero-release .release-badge{font-size:14px;padding:9px 20px}.site-footer,.site-footer a,.site-footer .footer-brand>span{font-size:12px}}
@media(max-width:600px){.app-store-badge{width:160px}}

/* Give all four footer items an equal share of the available width. */
.site-footer{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;justify-items:center;text-align:center}
.site-footer nav{display:contents}
.site-footer .footer-brand{align-items:center}
.site-footer>a:last-child{grid-column:auto;justify-self:center}
.site-footer nav a,.site-footer>a:last-child{white-space:nowrap}
@media(max-width:600px){.site-footer{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}}

#garden>.garden-reset{position:absolute;left:50%;bottom:5%;transform:translateX(-50%);z-index:6;width:46px;height:46px;min-height:46px;margin:0;padding:11px;border-radius:50%;color:#626f57;background:#faf7eeb3;backdrop-filter:blur(5px);box-shadow:0 2px 10px #4b583014}
#garden>.garden-reset svg{width:24px;height:24px}
#garden>.garden-reset:hover{background:#faf7eee8;color:#46513e}
.crates-wrap{position:relative}
.crates-wrap>#sort-status{text-align:center}
.sorting.complete #sort-status{position:absolute;bottom:100%;left:0;width:100%;margin:0 0 24px}
.parent-notes article>h3{height:auto;min-height:36px;line-height:36px;word-break:keep-all}
.parent-notes article>span{align-self:start}

.night-stars .night-moon{transform:rotate(-16deg)}

#paint-reset>img{transform:scaleX(-1)}

/* Shared page shell for the landing, privacy and support pages. */
:root{--page-max-width:1400px;--page-gutter:6%;--section-space:clamp(70px,7vw,100px)}
.header{max-width:var(--page-max-width);padding-inline:var(--page-gutter)}
.parents,.sort-section{max-width:var(--page-max-width);padding-inline:var(--page-gutter);padding-block:var(--section-space)}
.worlds,.bedtime{padding-inline:var(--page-gutter)}

/* Spread footer items evenly between compact outer gutters on every page. */
.site-footer{padding-inline:clamp(24px,3vw,40px);grid-template-columns:repeat(5,max-content);justify-content:space-between;column-gap:16px}
.site-footer .footer-brand{justify-self:start;align-items:flex-start}
.site-footer>a:last-child{justify-self:end;width:auto}
@media(max-width:600px){.site-footer{grid-template-columns:repeat(2,max-content);row-gap:18px}.site-footer nav a:first-child{justify-self:end}.site-footer nav a:last-child{justify-self:start}}

@media(max-width:600px){.site-footer nav a{justify-self:center}.site-footer nav a:first-child{justify-self:end}.site-footer nav a:nth-child(2){justify-self:start}.site-footer nav a:last-child{justify-self:end}.site-footer>a:last-child{grid-column:1/-1;justify-self:end}}

.parents .parent-scene{mask-image:none;opacity:1;display:flex;align-items:center}
.parent-family{display:block;width:100%;height:100%;object-fit:contain}

.mode-card.coming-soon{cursor:default}.mode-card.coming-soon:hover{transform:none}
#mode-screen{aspect-ratio:4/3;object-fit:contain}

/* Blend the illustration paper into the section while keeping the artwork opaque. */
.parents .parent-scene{mix-blend-mode:multiply}

.parent-notes article{border-bottom:0;padding-bottom:0;margin-bottom:clamp(32px,4vw,48px)}
.parent-notes article:last-child{margin-bottom:0}
#garden>.garden-reset{padding:4px}
#garden-reset>img{display:block;width:38px;height:38px;transform:scaleX(-1)}
@media(max-width:600px){
 #paint-reset{translate:-8px -8px}
 .site-footer{grid-template-columns:repeat(3,max-content);justify-content:space-between;row-gap:26px;column-gap:10px}
 .site-footer nav a:first-child,.site-footer nav a:nth-child(2),.site-footer nav a:last-child{grid-row:1;justify-self:center}
 .site-footer .footer-brand{grid-column:1/-1;grid-row:2;justify-self:center;align-items:center;text-align:center}
 .site-footer>a:last-child{display:none}
}

/* Give the illustration a real cream backdrop inside its blending group. */
.parents{background:#faf7ee;isolation:isolate}
.parents>div:first-child{isolation:auto}

/* Fade only the paper perimeter; keep the family illustration fully opaque. */
.parents .parent-scene{mix-blend-mode:normal}
.parent-family{mask-image:linear-gradient(to right,transparent,#000 10%,#000 90%,transparent),linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}

.parents .parent-scene{justify-content:center}
.parent-family{height:auto;width:auto;max-width:100%;max-height:100%}

/* Keep the family illustration in flow below the larger section heading. */
.parents>div:first-child{min-height:0}
#parents>div:first-child>h2{font-size:clamp(34px,3vw,42px);line-height:1.45}
.parents .parent-scene{position:relative;inset:auto;width:100%;height:auto;max-width:440px;aspect-ratio:4/5;margin:20px 0 0;overflow:hidden}
.parents .parent-family{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover;object-position:center 55%}
@media(max-width:700px){.parents .parent-scene{margin:20px auto 0;max-width:350px}}

.mode-screen-frame{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;border-radius:18px}
.mode-screen-frame #mode-screen{position:absolute;left:50%;top:50%;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:contain;transform:translate(-50%,-50%);border-radius:0}
.mode-screen-frame #mode-screen.portrait-source{width:75%;height:133.333%;transform:translate(-50%,-50%) rotate(-90deg)}

.mode-screen-frame{border:1px solid #d5d8cb}
.dialog-scroll{scrollbar-width:thin;scrollbar-color:#b2a1c5 #f1ede3}
.dialog-scroll::-webkit-scrollbar{width:10px}
.dialog-scroll::-webkit-scrollbar-track{background:#f1ede3;border-radius:20px;margin-block:24px}
.dialog-scroll::-webkit-scrollbar-thumb{background:#b2a1c5;border:2px solid #f1ede3;border-radius:20px}
.dialog-scroll::-webkit-scrollbar-thumb:hover{background:#9e8bb5}
.site-footer nav a{position:relative;isolation:isolate;text-decoration:none}
.site-footer nav a::after{content:"";position:absolute;z-index:-1;left:-4px;right:-4px;top:calc(50% + .2em);height:4px;border-radius:2px;background:var(--link-accent);opacity:.4;pointer-events:none}
.site-footer nav a:nth-child(1){--link-accent:#5c9598}
.site-footer nav a:nth-child(2){--link-accent:#eb9879}
.site-footer nav a:nth-child(3){--link-accent:#ac9bc3}

/* Keep scrolling inside the rounded dialog shell. */
#mode-dialog{padding:8px;overflow:hidden}
.dialog-scroll{max-height:calc(90dvh - 16px);overflow-y:auto;padding:27px;overscroll-behavior:contain}
#dialog-close{z-index:2;border-radius:50%;background:#faf7ee}
#dialog-close:focus{outline:none}
#dialog-close:focus-visible{outline:2px solid #b2a1c5;outline-offset:-3px}
.mode-screen-frame #mode-screen{object-fit:fill}
.mode-screen-frame #mode-screen.portrait-source{width:var(--rotated-width,75%);height:var(--rotated-height,133.333%)}
@media(max-width:700px){.dialog-scroll{padding:25px 12px}}

.touch-preview-trigger{display:none}
@media(any-pointer:coarse),(max-width:700px){
 .touch-preview-trigger{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:20;touch-action:pan-y pinch-zoom;border-radius:20px}
 .touch-preview-trigger span{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);white-space:nowrap;background:#faf7eeeb;border-radius:24px;padding:8px 16px;font-size:14px;color:#64775c}
 .paint-wrap:has(.touch-preview-trigger),#garden:has(.touch-preview-trigger){touch-action:pan-y pinch-zoom}
}
#touch-preview{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;margin:0;padding:0;border-radius:0;overflow:hidden;background:#faf7ee}
.touch-preview-close{position:absolute;right:max(12px,env(safe-area-inset-right));top:max(10px,env(safe-area-inset-top));width:48px;height:48px;border-radius:50%;background:#faf7eef0;font-size:30px;z-index:30}
.touch-preview-close:focus-visible{outline:2px solid #b2a1c5;outline-offset:-3px}
.touch-preview-content{height:100%;padding:68px 0 max(12px,env(safe-area-inset-bottom));display:flex;align-items:stretch}
#touch-preview .touch-preview-trigger{display:none}
#touch-preview .paint-wrap{width:100%;height:100%;display:flex;flex-direction:column;min-height:0}
#touch-preview .paper{flex:1;min-height:0;height:auto}
#touch-preview .paint-tray{flex-shrink:0}
#touch-preview #garden{width:100%;height:100%;aspect-ratio:auto;touch-action:none}

@media(max-width:700px){html,body{overflow-x:clip}main{min-width:0;max-width:100%}}
#touch-preview .paint-wrap,#touch-preview #garden{margin-inline:0;max-width:100%;min-width:0}

.site-footer{padding:20px 8%}
@media(max-width:600px){.site-footer{padding:16px 8% 20px;row-gap:10px}}

.hero-release{padding-top:24px}
.site-footer{justify-content:center;column-gap:24px;padding-top:10px}
@media(max-width:600px){.site-footer{column-gap:20px;row-gap:4px;padding-top:8px;padding-bottom:14px}}

@media(min-width:601px){.site-footer{grid-template-columns:minmax(max-content,1fr) repeat(3,max-content) minmax(max-content,1fr);column-gap:32px}.site-footer .footer-brand{justify-self:start}.site-footer>a:last-child{justify-self:end}}
@media(max-width:600px){.site-footer{column-gap:26px}}

/* Clip copies of the original artwork so each letter keeps its exact shape. */
.header>.wordmark{overflow:visible}
.logo-letter{position:absolute;inset:0;animation:logo-hop 3.8s ease-in-out infinite;transform-origin:50% 100%}
.logo-letter-0{animation-delay:0s}.logo-letter-0 img{clip-path:inset(0 75% 0 0)}
.logo-letter-1{animation-delay:.13s}.logo-letter-1 img{clip-path:inset(0 54.5% 0 25%)}
.logo-letter-2{animation-delay:.26s}.logo-letter-2 img{clip-path:inset(0 33% 0 45.5%)}
.logo-letter-3{animation-delay:.39s}.logo-letter-3 img{clip-path:inset(0 24% 0 67%)}
.logo-letter-4{animation-delay:.52s}.logo-letter-4 img{clip-path:inset(0 0 0 76%)}
@keyframes logo-hop{0%,5%,30%,100%{transform:translateY(0) scaleY(1)}9%{transform:translateY(1px) scaleY(.92)}16%{transform:translateY(-8px) scaleY(1.05)}23%{transform:translateY(0) scaleY(.95)}}
@media(prefers-reduced-motion:reduce){.logo-letter{animation:none}}

@media(min-width:601px){.site-footer nav a:nth-child(2){margin-inline:32px}}
@media(max-width:600px){.site-footer{column-gap:52px}}

/* Refined garden, discovery layout, and mobile navigation. */
.garden{cursor:url('assets/garden-watering-can.svg') 9 55, crosshair}
#garden>.garden-reset,#garden>.garden-reset:hover{background:transparent;backdrop-filter:none;box-shadow:none}
.sort-section{grid-template-columns:32fr 68fr;gap:38px}
.crate img{height:clamp(170px,15vw,205px)}
.crate{--crate-image-height:clamp(170px,15vw,205px)}
.menu-toggle,.mobile-menu,.menu-backdrop{display:none}
@media(max-width:700px){
 .sort-section{grid-template-columns:1fr;gap:25px}
 .crate img{height:135px}.crate{--crate-image-height:135px}
}
@media(max-width:600px){
 .header{position:relative;z-index:40}
 .menu-toggle{display:flex;position:absolute;right:6%;top:50%;translate:0 -50%;width:50px;height:50px;padding:9px;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:2px solid #e4e8dc;border-radius:50%;background:#fbfaf4;box-shadow:0 4px 14px #5f5a4812;z-index:43}
 .menu-toggle span{display:block;height:4px;border-radius:999px;transform-origin:center;transition:transform .2s,opacity .2s}
 .menu-toggle span:nth-child(1){width:27px;background:#5c9598;transform:rotate(-2deg)}
 .menu-toggle span:nth-child(2){width:23px;background:#eb9879;transform:rotate(2deg)}
 .menu-toggle span:nth-child(3){width:26px;background:#ac9bc3;transform:rotate(-1deg)}
 .menu-toggle[aria-expanded=true] span:nth-child(1){transform:translateY(9px) rotate(45deg)}
 .menu-toggle[aria-expanded=true] span:nth-child(2){opacity:0}
 .menu-toggle[aria-expanded=true] span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}
 .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;background:#4b51452b;backdrop-filter:blur(2px);z-index:41}
 .mobile-menu:not([hidden]){display:flex;position:absolute;right:5%;top:calc(100% + 8px);width:min(310px,90vw);padding:18px;flex-direction:column;align-items:stretch;text-align:left;gap:3px;background:#faf7eef5;border:1px solid #ded8c8;border-radius:26px;box-shadow:0 18px 50px #4b514526;z-index:42}
 .mobile-menu a{position:relative;padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5}
 .mobile-menu a:hover,.mobile-menu a:focus-visible{background:#ebeade;outline:none}
 .mobile-menu a::before{content:'';display:inline-block;width:7px;height:7px;margin-right:11px;border-radius:50%;background:#8cae94;vertical-align:2px}
 .mobile-menu a:nth-child(2)::before{background:#e7ba5f}.mobile-menu a:nth-child(3)::before{background:#79b8cc}.mobile-menu a:nth-child(4)::before{background:#e39494}.mobile-menu a:nth-child(5)::before{background:#b09bc8}
 body.menu-open{overflow:hidden}
}

/* Keep the mobile navigation out of the desktop header despite legacy header-nav rules. */
.header .mobile-menu{display:none}
@media(max-width:600px){.header .mobile-menu:not([hidden]){display:flex}}

/* Research-backed parent story: a quiet field journal between play and bedtime. */
.research{position:relative;isolation:isolate;overflow:hidden;padding:clamp(76px,9vw,126px) 6% 80px;background:#edf0e8;color:#485449}
.research::before,.research::after{content:"";position:absolute;z-index:-1;pointer-events:none;border-radius:50%;filter:blur(6px)}
.research::before{width:620px;height:620px;top:-320px;right:-160px;background:radial-gradient(circle,#f5e7c5 0,#f5e7c500 68%)}
.research::after{width:690px;height:600px;bottom:-360px;left:-270px;background:radial-gradient(circle,#d6e7e3 0,#d6e7e300 68%)}
.research-inner{max-width:1240px;margin:0 auto}
.research-heading{display:grid;grid-template-columns:1fr minmax(320px,.8fr);gap:clamp(38px,7vw,110px);align-items:end}
.research-heading h2{font-size:clamp(34px,4.2vw,58px);line-height:1.38;letter-spacing:-.045em;margin:21px 0 0;word-break:keep-all}
.research-heading h2 em{font-style:normal;position:relative;isolation:isolate;white-space:nowrap}
.research-heading h2 em::after{content:"";position:absolute;left:0;right:0;bottom:.04em;height:.24em;z-index:-1;border-radius:70% 35% 45% 40%;background:#dfc8889e;transform:rotate(-1deg)}
.research-heading>p{max-width:450px;margin:0 0 6px;font-size:18px;line-height:2;color:#647267;word-break:keep-all}
.research-heading>p strong{font-weight:400;color:#355e59;box-shadow:inset 0 -.28em #c7dfd197}
.research-principles{display:grid;grid-template-columns:1fr 28px 1fr 28px 1fr;align-items:center;gap:20px;margin:65px 0 105px;padding:27px 42px;background:#fbfaf3;border:1px solid #dce3d6;border-radius:24px 55px 30px 50px;box-shadow:0 24px 55px #6e776013,0 4px 0 #dce2d5}
.research-principles>div{display:flex;align-items:center;gap:20px;min-width:0}
.research-principles img{width:77px;height:77px;flex:none;mix-blend-mode:multiply}
.research-principles>div span{font-size:19px;line-height:1.6;word-break:keep-all}
.research-principle-arrow{font-family:Georgia,serif;font-size:28px;color:#acbcae;text-align:center}
.research-list-heading{text-align:center}
.research-list-heading h3{font-size:clamp(27px,3vw,38px);font-weight:400;line-height:1.5;letter-spacing:-.04em;margin:13px 0 4px}
.research-list-heading p{font-size:16px;color:#738074;margin:0}
.research-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px;align-items:stretch;margin-top:42px}
.research-card{--card-accent:#668d75;--card-wash:#e9f0e7;--card-highlight:#dce9d8;display:flex;flex-direction:column;min-width:0;padding:29px 29px 26px;border-radius:9px 33px 12px 29px;background:#fffcf5;border:1px solid #e4e5d8;box-shadow:0 17px 34px #6d7b7112,0 3px 0 #dae0d3;transition:transform .28s,box-shadow .28s}
.research-card:nth-child(2){border-radius:31px 9px 31px 12px}
.research-card:nth-child(3){border-radius:12px 28px 10px 33px}
.research-card:hover{transform:translateY(-5px);box-shadow:0 24px 46px #6d7b7120,0 3px 0 #dae0d3}
.research-card-peach{--card-accent:#b77e69;--card-wash:#f7eae2;--card-highlight:#f4e0d2}
.research-card-blue{--card-accent:#658b9b;--card-wash:#e7eef1;--card-highlight:#dbeaf0}
.research-card-top{display:flex;justify-content:space-between;align-items:center;gap:10px;border-bottom:1px solid #e6e7dc;padding-bottom:15px}
.research-card-number{font:italic 33px/1 Georgia,serif;color:var(--card-accent)}
.research-card-kind{font:600 11px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;color:#788277;text-align:right;letter-spacing:.02em;word-break:keep-all}
.research-card h4{font-size:clamp(24px,2.15vw,30px);font-weight:400;line-height:1.5;letter-spacing:-.04em;margin:28px 0 12px;word-break:keep-all}
.research-card-highlight{box-shadow:inset 0 -.3em var(--card-highlight)}
.research-card>p{font-size:15px;line-height:1.95;color:#59665c;margin:0 0 25px;word-break:keep-all}
.research-card>p strong{font-weight:600;color:#485b4d}
.research-card-try{margin-top:auto;padding:15px 17px 14px;background:var(--card-wash);border-radius:6px 18px 8px 17px}
.research-card-try>span{font:600 11px/1.5 -apple-system,BlinkMacSystemFont,sans-serif;letter-spacing:.08em;color:var(--card-accent)}
.research-card-try p{font-size:15px;color:#435b50;line-height:1.7;margin:5px 0 0;word-break:keep-all}
.research-card>a{align-self:flex-end;margin-top:22px;font:600 14px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;color:var(--card-accent);border-bottom:1px solid currentColor;padding:0 0 3px}
.research-card>a:hover,.research-boundary a:hover{color:#264f4b}
.research-card>a span{margin-left:7px}
.research-more{margin:66px 0 0;padding-top:25px;border-top:1px solid #cbd6ca}
.research-more-heading{display:flex;align-items:baseline}
.research-more ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;list-style:none;margin:24px 0 0;padding:0}
.research-more li{display:flex;flex-direction:column;min-width:0;border-left:1px solid #d3ded1;padding:0 24px}
.research-more li:first-child{padding-left:0;border-left:0}
.research-more li:last-child{padding-right:0}
.research-more li>p{margin:0;color:#4d6254;font-size:15px;line-height:1.8;word-break:keep-all}
.research-more-source{display:flex;justify-content:flex-end;margin-top:auto;padding-top:16px}
.research-more-source a{display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;border-bottom:1px solid currentColor;color:#4d806a;font:600 14px/1.6 -apple-system,BlinkMacSystemFont,sans-serif;white-space:nowrap}
.research-more-source a:hover{color:#264f4b}
.research-outro{display:grid;grid-template-columns:1fr .8fr;align-items:center;gap:40px;margin:130px auto 54px;padding:20px 8%;min-height:310px;border-top:1px solid #cbd6ca;border-bottom:1px solid #cbd6ca}
.research-outro h3{font-size:clamp(28px,3.3vw,43px);line-height:1.5;font-weight:400;letter-spacing:-.04em;margin:16px 0}
.research-outro p{max-width:490px;font-size:16px;line-height:2;color:#627168;word-break:keep-all}
.research-outro img{width:100%;max-height:280px;object-fit:contain}
.research-boundary{max-width:950px;margin:0 auto;color:#6d796e;text-align:center;font-size:13px;word-break:keep-all}
.research-boundary p{margin:0;line-height:2.2}
.research-boundary strong{color:#475d4e;font-weight:600}
.research-boundary a{display:inline-block;margin-bottom:14px;color:#4f806f;border-bottom:1px solid #9cb5a5}
@media(max-width:930px){
 .research-heading{grid-template-columns:1fr;gap:24px}
 .research-heading>p{max-width:650px}
 .research-principles{gap:10px;padding:24px}
 .research-principles>div{gap:10px}
 .research-principles img{width:60px;height:60px}
 .research-principles>div span{font-size:16px}
 .research-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
 .research-card:last-child{grid-column:1/-1}
 .research-more ul{grid-template-columns:1fr}
 .research-more li,.research-more li:first-child,.research-more li:last-child{border-left:0;border-top:1px solid #d3ded1;padding:15px 0}
 .research-more li:first-child{border-top:0;padding-top:0}
}
@media(max-width:600px){
 .research{padding:76px 7% 65px}
 .research-inner{display:flex;flex-direction:column}
 .research-heading h2{font-size:clamp(31px,8.4vw,40px)}
 .research-heading h2 em{white-space:normal}
 .research-heading>p{font-size:16px;line-height:1.9}
 .research-principles{grid-template-columns:1fr;gap:4px;margin:45px 0 76px;padding:17px 23px;border-radius:23px 35px 25px 30px}
 .research-principles>div{gap:18px}
 .research-principles img{width:61px;height:61px}
 .research-principle-arrow{font-size:16px;line-height:1;transform:rotate(90deg);width:60px}
 .research-list-heading p{font-size:14px;line-height:1.8}
 .research-cards{grid-template-columns:1fr;gap:18px;margin-top:29px}
 .research-card{padding:25px 25px 23px}
 .research-card:last-child{grid-column:auto}
 .research-card h4{font-size:25px;margin-top:24px}
 .research-card>p{font-size:15px}
 .research-more{margin-top:52px}
 .research-more-heading{display:block}
 .research-more ul{margin-top:18px;gap:22px}
 .research-more li,.research-more li:first-child,.research-more li:last-child{border:0;padding:0}
 .research-outro{order:2;grid-template-columns:1fr;gap:0;margin:65px auto 35px;padding:38px 5% 17px}
 .research-outro h3{font-size:31px}
 .research-outro img{max-height:210px}
 .research-boundary{order:1;width:100%;margin:28px auto 0;padding:15px 17px;background:#fbfaf4;border:1px solid #dfe6d9;border-radius:18px;box-shadow:0 5px 14px #596b5210;font-size:11px;text-align:left}
 .research-boundary p{line-height:1.8}
 .research-boundary a{margin-bottom:8px}
}

/* Homepage type scale: display → section → subsection → card → body → caption. */
:root{
 --type-display:clamp(46px,4.8vw,66px);
 --type-section:clamp(42px,4.2vw,58px);
 --type-subsection:clamp(32px,3vw,40px);
 --type-card:clamp(24px,2.2vw,30px);
 --type-body:18px;
 --type-evidence:16px;
 --type-caption:14px;
}
main .eyebrow{font-size:var(--type-caption);line-height:1.5}
#hero-title{font-size:var(--type-display);line-height:1.3;letter-spacing:-.045em}
#research-title,#garden-title,#sort-title,#worlds-title,.parents>div:first-child>h2,.night-title-group #night-title{
 font-size:var(--type-section);line-height:1.36;letter-spacing:-.045em;font-weight:400;word-break:keep-all
}
.night-title-group{font-size:var(--type-section)}
.night-title-group #lamp{font-size:37px}
.research-list-heading h3,.research-outro h3{font-size:var(--type-subsection);line-height:1.45;letter-spacing:-.04em}
.research-card h4{font-size:var(--type-card);line-height:1.45}
.parent-notes h3{font-size:24px;line-height:1.5}
.research-heading>p,.research-outro p,.section-heading>p,#worlds>.section-heading>p,.sort-copy>p,.parent-notes p{
 font-size:var(--type-body);line-height:1.9
}
.research-card>p,.research-more li>p{font-size:var(--type-evidence)}
@media(max-width:600px){
 :root{--type-display:clamp(39px,10vw,46px);--type-section:clamp(34px,8.6vw,42px);--type-subsection:clamp(29px,7.4vw,36px);--type-card:25px;--type-body:16px;--type-evidence:15px;--type-caption:11px}
 .night-title-group #lamp{font-size:24px}
 .parent-notes h3{font-size:22px}
 .research-heading>p,.research-outro p,.section-heading>p,#worlds>.section-heading>p,.sort-copy>p,.parent-notes p{line-height:1.85}
}

br.mobile-only-break{display:none}
@media(max-width:600px){br.mobile-only-break{display:initial}}