@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@400;700&family=Patrick+Hand&display=swap');
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f0e4;color:#27251f;font-family:"Patrick Hand",cursive;font-size:18px;line-height:1.55}a{color:inherit;text-decoration:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;opacity:.14;background-image:radial-gradient(#625d50 .7px,transparent .7px);background-size:7px 7px;z-index:10}
header{position:relative;border-bottom:2px solid #302d27;background:#eee7d6}header:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 31px,#b9b19e33 32px,#b9b19e33 33px);pointer-events:none}
nav{max-width:1040px;margin:auto;padding:24px;display:flex;align-items:center;position:relative;z-index:2}.logo{font:700 25px Kalam,cursive}.links{margin-left:auto;display:flex;gap:22px}.links a{color:#353129}.links a:hover{text-decoration:underline}
.hero{max-width:1040px;margin:auto;padding:105px 24px 125px;position:relative;z-index:2}.scribble{font-size:17px;transform:rotate(-2deg);display:inline-block;color:#625c50}.hero h1{font:700 clamp(70px,12vw,140px)/.72 Kalam,cursive;letter-spacing:-4px;margin:25px 0}.hero h1 span{margin-left:90px}.hero p{max-width:620px;font-size:22px}.handbtn{display:inline-block;margin-top:20px;padding:10px 18px;border:2px solid #302d27;border-radius:5px;box-shadow:4px 4px 0 #302d27;transform:rotate(-1deg)}.arrow{font-size:65px;position:absolute;right:16%;bottom:35px;transform:rotate(-12deg)}
section{max-width:1040px;margin:auto;padding:95px 24px}.eyebrow{font-size:15px;font-weight:bold;color:#777061;margin-bottom:22px;letter-spacing:1px}.two{display:grid;grid-template-columns:1fr 1fr;gap:80px}h2{font:700 47px/1.05 Kalam,cursive;margin:0 0 18px}u{text-decoration-thickness:2px;text-underline-offset:5px}p{margin:10px 0}.note{margin-top:28px;border-left:3px solid #403b31;padding:12px 18px;transform:rotate(-1deg)}
.lined{max-width:none;border-top:2px solid #302d27;border-bottom:2px solid #302d27;background:#eae3d2;padding-left:max(24px,calc((100% - 992px)/2));padding-right:max(24px,calc((100% - 992px)/2))}
.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin-top:35px}.modes article{border:2px solid #37332b;padding:25px;background:#f7f2e8;position:relative;min-height:280px;box-shadow:6px 6px 0 #bbb19c}.num{position:absolute;right:14px;top:8px;color:#8d8575}.doodle{font-size:35px}.modes h3{font:700 30px Kalam;margin:8px 0}.modes p{color:#625d53}.modes ul{padding-left:20px}
.platform-box{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}.platform-box h2{font-size:54px}.soon{font-size:22px}.download-list{display:grid;gap:18px}.download{border:2px solid #37332b;background:#f9f5eb;padding:18px;display:flex;align-items:center;gap:14px;box-shadow:5px 5px 0 #c5baa5}.download>span{font-size:30px}.download div{flex:1}.download b{display:block;font:700 25px Kalam}.download small{display:block;color:#6e685d}.download a{text-decoration:underline}.download-note{margin-top:25px;color:#686157}
.steps{max-width:760px}.step{display:grid;grid-template-columns:55px 1fr;gap:20px;padding:20px 0;border-bottom:1px dashed #777061}.step>b{font:700 29px Kalam}.step h3{font:700 27px Kalam;margin:0}.step p{margin:3px 0}.tip{margin-top:25px;padding:18px;border:2px dashed #534a3b;background:#eee5d1;transform:rotate(.4deg)}
code{font-family:monospace;background:#ded6c5;padding:2px 5px;border-radius:3px;font-size:.88em}.android{background:#efe8d7}.androidSteps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.androidSteps>div{border-left:2px solid #49443a;padding-left:15px}.androidSteps b{font:700 30px Kalam}
.github{display:flex;justify-content:space-between;align-items:center;gap:30px}.githubbtn{border:2px solid #302d27;padding:12px 20px;box-shadow:4px 4px 0 #302d27;white-space:nowrap}
.storybox{display:grid;grid-template-columns:160px 1fr;gap:45px;align-items:center}.date{border-right:2px solid #49443a;text-align:center;padding-right:35px}.date b{font:700 75px Kalam;display:block;line-height:.8}.signature{font:700 27px Kalam;margin-top:25px;transform:rotate(-2deg)}
.warning{max-width:1040px;margin:70px auto;padding:25px;border:2px dashed #534a3b;display:grid;grid-template-columns:60px 1fr;gap:18px;background:#eee5d1;transform:rotate(.4deg)}.warning-mark{width:42px;height:42px;border:2px solid #403a30;border-radius:50%;display:grid;place-items:center;font-weight:bold;font-size:25px}.warning h2{font-size:35px}
.final{text-align:center;padding:70px 24px 110px}.big-arrow{font-size:70px;transform:rotate(15deg)}.final h2{font-size:48px}.final p{font-size:21px}
footer{border-top:2px solid #302d27;padding:28px 24px;display:flex;justify-content:space-between;max-width:1040px;margin:auto;font-size:16px}
@media(max-width:760px){nav{flex-wrap:wrap}.links{width:100%;margin-top:12px;gap:15px;flex-wrap:wrap}.hero{padding-top:75px}.hero h1{font-size:78px}.hero h1 span{margin-left:30px}.two,.platform-box,.storybox{grid-template-columns:1fr;gap:35px}.modes,.androidSteps{grid-template-columns:1fr}.date{border-right:0;border-bottom:2px solid #49443a;padding:0 0 25px}.arrow{right:5%;font-size:50px}.platform-box h2{font-size:42px}.github{display:block}.githubbtn{display:inline-block;margin-top:20px}footer{display:block;text-align:center}footer span{display:block;margin-top:5px}}