@font-face{font-family:Kalam;src:url('assets/Kalam-Regular.ttf');font-weight:400;font-display:swap}@font-face{font-family:Kalam;src:url('assets/Kalam-Bold.ttf');font-weight:700;font-display:swap}@font-face{font-family:Nunito;src:url('assets/Nunito.ttf');font-weight:200 1000;font-display:swap}
:root{--paper:#faf4e8;--green:#24482d;--orange:#ec6716;--pencil:#77776c;color-scheme:light}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--green);font-family:Nunito,sans-serif}body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.15;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='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23826d47' opacity='.35' filter='url(%23n)' d='M0 0h160v160H0z'/%3E%3C/svg%3E")}main{max-width:1600px;margin:auto;overflow:hidden}.svg-library{position:absolute;width:0;height:0;overflow:hidden}a,button{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}.brand{display:flex;justify-content:center;padding:25px 20px 12px}.brand a{position:relative;display:flex;align-items:center;gap:18px;padding:7px 27px 8px;background:#fffaf0;box-shadow:0 3px 5px #5c4d2b24;transform:rotate(-2deg);color:inherit;text-decoration:none}.brand a:before,.brand a:after,.paper-note:before,.paper-note:after{content:"";position:absolute;top:-5px;width:50px;height:18px;background:#d8c39977;transform:rotate(-27deg);left:-14px}.brand a:after,.paper-note:after{left:auto;right:-13px;transform:rotate(28deg)}.brand img{width:125px;height:auto}.brand span{font:700 24px/1.05 Kalam,cursive}.brand strong{font-size:32px}.hero{position:relative;text-align:center;padding:16px 24px 0;z-index:2}.eyebrow{font-size:10px;letter-spacing:3px;margin:0 0 10px;color:#65745a;font-weight:800}h1{font:700 clamp(38px,5.1vw,77px)/1.18 Kalam,cursive;letter-spacing:-2px;margin:0}h1 em{font-style:normal;position:relative;white-space:nowrap}h1 em:after{content:"";position:absolute;bottom:3px;left:0;right:0;height:3px;background:#737568;transform:rotate(-2deg);filter:url(#pencil)}.mobile-break{display:none}.lead{font:400 clamp(20px,2.2vw,31px)/1.4 Kalam,cursive;margin:10px 0 20px}.downloads{display:flex;justify-content:center;gap:13px;flex-wrap:wrap}.download{display:flex;align-items:center;justify-content:center;gap:12px;padding:11px 29px;min-height:58px;border:2px solid var(--green);border-radius:40px;text-decoration:none;color:var(--green);font-weight:800;font-size:23px;background:#fffaf18c;transition:transform .18s,box-shadow .18s}.download svg{width:28px;height:28px}.download.primary{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 4px 0 #bb4c0b}.download.primary span{margin-left:-7px}.download:hover{transform:translateY(-3px);box-shadow:0 6px 0 #24482d22}.download.primary:hover{box-shadow:0 7px 0 #bb4c0b}.free{font:400 26px Kalam,cursive;margin:15px 0 0}.sketch{fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;filter:url(#pencil)}.cloud{position:absolute;width:150px;height:70px;color:#8b948f;opacity:.5;pointer-events:none;top:100px}.cloud-left{left:4%;transform:rotate(-9deg)}.cloud-right{right:3%;transform:rotate(8deg)}
.playground{position:relative;aspect-ratio:3.15;margin-top:-4px;isolation:isolate}.place-note{position:absolute;right:4%;bottom:7%;font:20px Kalam,cursive;transform:rotate(-7deg);color:var(--green);background:#fff9eacb;padding:4px 12px}.details{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:32px;max-width:1280px;margin:14px auto 0;padding:0 40px}.paper-note{position:relative;display:flex;align-items:center;justify-content:center;gap:17px;padding:20px 18px;background:#fff9ed;box-shadow:1px 4px 7px #69553420;transform:rotate(-3deg);border:1px solid #c8b99755}.paper-note>svg{width:70px;height:65px;color:#6d7363;flex-shrink:0}.paper-note p{font:700 29px/1.15 Kalam,cursive;margin:0}.paper-note strong{font-weight:700}.note-right{transform:rotate(2deg)}footer{display:flex;justify-content:center;align-items:center;gap:22px;padding:27px 20px 20px}footer p{font-size:11px;letter-spacing:4px;font-weight:800}footer span{height:1px;width:90px;background:#929a84;transform:rotate(-1deg)}:focus-visible{outline:3px solid var(--orange);outline-offset:6px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}@keyframes bob{50%{translate:0 -6px}}
@media(max-width:1000px){.cloud{width:90px;top:140px;opacity:.3}.details{gap:20px;padding:0 22px}.paper-note{gap:8px;padding:18px 10px}.paper-note p{font-size:23px}.paper-note>svg{width:50px}.place-note{font-size:15px;right:2%}.playground{aspect-ratio:2.8}}
@media(max-width:680px){.brand{padding-top:24px}.brand a{gap:12px;padding:9px 20px}.brand img{width:90px}.brand span{font-size:20px}.brand strong{font-size:27px}.hero{padding:24px 20px 0}.eyebrow{font-size:8px;letter-spacing:1.8px;margin-bottom:15px}h1{font-size:44px;letter-spacing:-1px;line-height:1.12}.mobile-break{display:block}.lead{font-size:21px;max-width:310px;margin:14px auto 20px}.downloads{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:390px;margin:auto}.download{font-size:18px;min-height:52px;padding:10px 12px;gap:9px}.download.primary{grid-column:1/-1;font-size:21px}.download svg{width:24px;height:24px}.free{font-size:22px;margin:16px 0 12px}.cloud{width:70px;top:90px}.cloud-left{left:-24px}.cloud-right{right:-20px}.playground{aspect-ratio:1.65;margin:0 -12%;}.place-note{display:none}.details{grid-template-columns:1fr 1fr;gap:27px 16px;padding:0 25px;margin-top:12px}.paper-note{padding:17px 10px;flex-direction:column;gap:5px;text-align:center}.paper-note p{font-size:22px}.paper-note>svg{width:46px;height:43px}.paper-note:before,.paper-note:after{width:32px;height:14px}.note-right{transform:rotate(3deg)}footer{gap:12px;padding:27px 22px 16px}footer p{font-size:9px;letter-spacing:2px;white-space:nowrap}footer span{width:30px}}
@media(max-width:360px){h1{font-size:38px}.paper-note p{font-size:19px}.download{font-size:16px}.details{padding-inline:18px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
/* Individual sprites have their own transparent margins; normalize the first one in CSS. */
.playground{margin-top:12px}.place-note{bottom:0}
@media(max-width:680px){.playground{margin-top:2px}}
@media(max-width:680px){}
@media(max-width:680px){}

/* Bespoke scenes: characters, bridge and water share the same perspective. */
.playground{aspect-ratio:auto;margin:8px auto 0;max-width:1440px;isolation:isolate}
.scene-art{display:block;overflow:hidden;mask-image:linear-gradient(transparent,#000 7%,#000 92%,transparent)}
.scene-art img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:cover;object-position:center}
.place-note{right:5%;bottom:4%;font-size:18px}
@media(max-width:680px){.playground{margin:8px 0 0;width:100%}.scene-art img{aspect-ratio:1.75;object-fit:contain}.scene-art{mask-image:none}.place-note{display:none}}

.brand img{width:115px;height:69px}.scene-art img{aspect-ratio:3/1}.place-note{bottom:2%}
@media(max-width:680px){.brand img{width:88px;height:53px}.scene-art img{width:125%;max-width:none;margin-left:-12.5%;height:auto;aspect-ratio:3/1;object-fit:contain}.scene-art{mask-image:linear-gradient(transparent,#000 5%,#000 96%,transparent)}}

.details {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 960px;
}