@font-face{font-family:Fredoka;src:url('assets/fredoka.ttf') format('truetype');font-weight:300 700;font-display:swap}
:root{color-scheme:light;--cream:#fff9ef;--ink:#073e30;--muted:#52665d;--mint:#e4f4e8;--accent:#a6e8b8;--line:#dce2d6}
*{box-sizing:border-box}
html{scroll-padding-top:2rem}
body{margin:0;background:var(--cream);color:var(--ink);font:17px/1.6 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-underline-offset:5px}
button,summary,a{-webkit-tap-highlight-color:transparent}
a:focus-visible,summary:focus-visible{outline:3px solid #b54164;outline-offset:6px;border-radius:4px}
.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}
.skip-link{position:absolute;top:12px;left:12px;transform:translateY(-160%);padding:10px 18px;background:var(--ink);color:white;z-index:10}
.skip-link:focus{transform:none}
.site-header{display:flex;align-items:center;gap:44px;min-height:100px}
.brand{display:inline-flex;align-items:center;gap:10px;font:600 32px/1 Fredoka,Arial,sans-serif;text-decoration:none;letter-spacing:-1px;white-space:nowrap}
.brand-icon{display:grid;place-items:center;width:37px;height:39px;border-radius:12px;background:var(--accent);box-shadow:inset 0 0 0 2px #c6f5cd,inset 0 -4px 6px #71c38e;color:#156044;font:700 30px/1 Arial;transform:rotate(-4deg)}
nav{display:flex;align-items:center;gap:32px}
nav a{text-decoration:none;font-size:15px;font-weight:600;padding-block:10px}
nav a:hover{text-decoration:underline}
.status-pill{margin-left:auto;white-space:nowrap;text-decoration:none;font-size:14px;font-weight:700;padding:10px 22px;border-radius:99px;background:var(--accent);transition:background .2s}
.status-pill:hover{background:#8bdda2}
.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:680px;padding-block:35px 60px}
.hero-copy{position:relative;z-index:1}
.eyebrow{text-transform:uppercase;letter-spacing:.17em;font-size:12px;font-weight:700;margin:0 0 20px}
h1,h2,h3{font-family:Fredoka,Arial,sans-serif;font-weight:600;letter-spacing:-.035em;margin:0;line-height:1.02}
h1{font-size:clamp(66px,7.6vw,103px);line-height:.97;letter-spacing:-.04em}
.intro{font-size:19px;line-height:1.6;margin:28px 0 25px;max-width:430px}
.primary-link{display:inline-flex;gap:24px;align-items:center;justify-content:center;min-height:58px;background:var(--ink);color:#fff9ef;border-radius:99px;padding:14px 29px;text-decoration:none;font-weight:600;font-size:17px;box-shadow:0 4px 0 #042d23;transition:transform .2s,background .2s}
.primary-link:hover{background:#175d44;transform:translateY(-2px)}
.primary-link span{font-size:23px;font-weight:400}
.hero-meta{font-size:13px;color:var(--muted);margin:20px 0 0}
.hero-meta span{padding-inline:6px}
.hero-visual{position:relative;margin:0;min-width:0;height:580px;isolation:isolate}
.hero-art{position:absolute;width:100%;height:100%;object-fit:contain;left:0;top:0;mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent),linear-gradient(to bottom,transparent,#000 5%,#000 95%,transparent);mask-composite:intersect}
.phone{position:absolute;width:270px;height:525px;top:2%;left:28%;border:3px solid #979c92;border-radius:44px;background:#f9f9ed;padding:7px;box-shadow:inset 0 0 0 2px white,5px 10px 0 #c0c2b8,14px 28px 34px #274c3229;transform:rotate(7deg)}
.phone-screen{position:relative;height:100%;border:1px solid #cbd4c7;border-radius:34px;background:#eaf2e6;overflow:hidden;padding:31px 13px 18px}
.speaker{position:absolute;left:50%;top:11px;transform:translateX(-50%);height:7px;width:53px;border-radius:10px;background:#4b574a}
.phone-heading{display:flex;justify-content:space-between;align-items:center;font:600 23px/1 Fredoka,Arial,sans-serif}
.mini-mark{background:var(--accent);border-radius:6px;font:700 15px/25px Arial;width:25px;text-align:center}
.phone-menu{letter-spacing:2px;font:700 14px Arial}
.boxes{display:flex;justify-content:space-between;gap:6px;margin-top:17px}
.boxes img{width:30%;filter:drop-shadow(0 4px 2px #123e2319)}
.tray{display:flex;justify-content:center;gap:7px;border-radius:20px;background:#fbfbef;padding:7px 9px;width:max-content;margin:11px auto;box-shadow:0 3px 3px #29422c18}
.tray i{width:22px;height:22px;border-radius:50%;background:#b1b8a8;box-shadow:inset 1px 3px 4px #6c7661,0 1px 0 white;border:2px solid #e6e9df}
.puzzle{position:relative;height:240px;margin-top:12px}
.piece{position:absolute;filter:drop-shadow(0 7px 3px #57624423)}
.plate{width:100%;height:100%;object-fit:contain}
.screw{position:absolute;width:29px;height:29px;filter:drop-shadow(0 2px 1px #24412944)}
.piece-star{width:150px;height:150px;left:68px;top:65px;transform:rotate(18deg)}
.piece-star .s1{left:59px;top:46px}.piece-star .s2{left:31px;top:72px}.piece-star .s3{left:87px;top:73px}
.piece-heart{width:151px;height:139px;left:1px;top:18px;transform:rotate(-14deg)}
.piece-heart .s1{left:18px;top:36px}.piece-heart .s2{left:63px;top:57px}.piece-heart .s3{left:108px;top:36px}
.piece-cloud{width:160px;height:106px;left:45px;top:2px;transform:rotate(8deg)}
.piece-cloud .s1{left:18px;top:62px}.piece-cloud .s2{left:66px;top:34px}.piece-cloud .s3{left:113px;top:62px}
.piece-flower{width:145px;height:147px;left:0;top:115px;transform:rotate(-16deg)}
.piece-flower .s1{left:18px;top:51px}.piece-flower .s2{left:100px;top:51px}
.phone-caption{position:absolute;bottom:24px;left:0;right:0;text-align:center;font:500 12px Fredoka,Arial,sans-serif;letter-spacing:.02em}
.home-indicator{position:absolute;bottom:9px;left:34%;width:32%;height:4px;border-radius:10px;background:#8a9e87}
figcaption{position:absolute;bottom:0;right:13%;font-size:11px;color:var(--muted)}
.how-to{background:var(--mint);padding:56px 0 40px;scroll-margin-top:0}
.section-eyebrow{text-align:center;color:#46664c;margin-bottom:14px;font-size:11px}
h2{font-size:clamp(35px,4vw,50px);line-height:1.09}
.how-to h2{text-align:center;font-size:clamp(30px,3.5vw,43px)}
.steps{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:58px}
.steps li{min-width:0}
.step-number{font:500 28px Fredoka,Arial,sans-serif;color:#4e8358}
h3{font-size:25px;letter-spacing:-.02em;margin:3px 0 12px}
.steps p{font-size:14px;line-height:1.65;color:#496451;margin:0}
.step-art{height:175px;margin-top:22px;position:relative;display:flex;align-items:center;justify-content:center}
.single-screw img{width:106px;height:106px;transform:rotate(-23deg);filter:drop-shadow(10px 16px 5px #43724625)}
.matching{flex-direction:column;gap:2px;justify-content:flex-start}
.matching-screws{display:flex;gap:13px}
.matching-screws img{width:36px;height:36px;filter:drop-shadow(2px 5px 2px #43724625)}
.matching>span{font-size:20px;color:#52735a;line-height:1.4}
.match-box{width:90px;height:90px;object-fit:contain}
.layered img{position:absolute;width:125px;height:110px;object-fit:contain;transform:rotateX(35deg) rotate(-12deg);filter:drop-shadow(0 9px 2px #43724625)}
.layered img:nth-child(1){top:63px}.layered img:nth-child(2){top:23px}.layered img:nth-child(3){top:-16px}
.game-section{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;padding-block:56px 38px;gap:35px}
.game-copy{padding-block:20px}
.game-copy .eyebrow{font-size:11px;margin-bottom:17px}
.game-copy>p:not(.eyebrow){font-size:17px;color:var(--muted);margin:21px 0 23px}
.closing-art{width:360px;justify-self:center;mask-image:radial-gradient(ellipse,#000 60%,transparent 73%)}
.availability{scroll-margin-top:80px;max-width:430px;font-size:15px}
.availability summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;border-bottom:1px solid #b5cbbb;padding:12px 0;font-weight:700}
.availability summary::-webkit-details-marker{display:none}
.availability summary>span{font-size:24px;font-weight:400;transition:transform .2s}
.availability[open] summary>span{transform:rotate(45deg)}
.release-info p{margin:14px 0 9px;color:var(--muted);font-size:14px}
.release-info a{font-weight:600;font-size:14px}
.site-footer{border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;min-height:96px}
.site-footer .brand{font-size:27px}.site-footer .brand-icon{width:29px;height:31px;font-size:23px;border-radius:9px}
.site-footer small{font-size:12px;color:var(--muted)}
.site-footer nav{margin-left:auto;gap:25px}.site-footer nav a{font-weight:400;font-size:13px}
.legal-header{border-bottom:1px solid var(--line)}
.legal-body{max-width:800px;margin:40px auto 70px;padding-inline:24px}
.legal-body h1{font-size:42px}.legal-body h2{font-size:25px;margin-top:32px}
.legal-body p,.legal-body li{color:#34483c;overflow-wrap:anywhere}
.legal-body .back-link{display:inline-block;margin-bottom:30px;font-size:14px}
@media(min-width:1440px){.hero{min-height:740px}.hero-visual{height:610px}.phone{width:286px;height:555px;top:0}.puzzle{margin-top:25px}.hero-art{top:0}}
@media(max-width:1023px){.wrap{width:calc(100% - 64px)}.site-header{gap:30px}.hero{min-height:620px;gap:10px}.hero-visual{height:500px}.phone{width:235px;height:477px;left:16%;transform:rotate(6deg)}.phone-screen{padding-inline:10px}.puzzle{transform:scale(.88);transform-origin:top left}.phone-caption{bottom:24px}.hero-art{top:0;left:0;width:100%}.intro{font-size:17px}.hero-meta{max-width:280px}.steps{gap:30px}.steps p br{display:none}.game-section{gap:18px}.game-copy>p:not(.eyebrow){font-size:16px}}
@media(max-width:767px){.wrap{width:calc(100% - 40px)}.site-header{min-height:83px;gap:16px;flex-wrap:wrap;padding-block:17px}.brand{font-size:28px}.brand-icon{width:32px;height:34px;font-size:25px}.site-header nav{order:3;width:100%;gap:24px;justify-content:center;border-top:1px solid var(--line);padding-top:6px}.site-header nav a{font-size:13px;padding-block:5px}.status-pill{font-size:12px;padding:8px 14px}.hero{grid-template-columns:1fr;padding-top:30px;padding-bottom:34px;gap:25px;min-height:0}.hero-copy{text-align:center}.eyebrow{font-size:10px;margin-bottom:19px}h1{font-size:clamp(62px,13vw,90px);line-height:.99}.intro{font-size:16px;max-width:330px;margin:23px auto}.desktop-break{display:none}.primary-link{font-size:15px;padding:13px 23px;min-height:53px;gap:18px}.hero-meta{font-size:12px;max-width:none;margin-top:17px}.hero-meta span{padding-inline:4px}.hero-visual{height:490px;width:min(100%,420px);justify-self:center}.hero-art{top:0;width:100%;left:0}.phone{width:242px;height:470px;left:calc(50% - 121px);top:0;transform:rotate(5deg)}.phone-screen{padding-top:29px}.boxes{margin-top:12px}.puzzle{margin-top:0;transform:scale(.91)}.phone-caption{bottom:20px}figcaption{right:0;bottom:-10px;font-size:10px}.how-to{padding:43px 0 30px}.how-to h2{font-size:33px;max-width:350px;margin:auto}.section-eyebrow{font-size:9px;letter-spacing:.13em}.steps{grid-template-columns:1fr;gap:29px;margin-top:35px}.steps li{position:relative;min-height:163px;padding-right:125px;border-bottom:1px solid #cce1d0;padding-bottom:23px}.steps li:last-child{border:0;padding-bottom:0}.step-number{font-size:23px}h3{font-size:23px}.steps p{font-size:13px}.step-art{position:absolute;right:0;top:12px;width:110px;height:140px;margin:0}.single-screw img{width:78px;height:78px}.matching-screws{gap:4px}.matching-screws img{width:29px;height:29px}.match-box{width:72px;height:72px}.layered img{width:105px;height:95px}.layered img:nth-child(1){top:56px}.layered img:nth-child(2){top:22px}.layered img:nth-child(3){top:-10px}.game-section{grid-template-columns:1fr;padding-top:45px;padding-bottom:25px;gap:0}.game-copy{padding:0}.game-copy .eyebrow{font-size:9px}h2{font-size:40px}.game-copy>p:not(.eyebrow){font-size:15px}.closing-art{width:280px;margin-top:16px}.site-footer{flex-wrap:wrap;gap:18px;padding-block:25px}.site-footer .brand{font-size:25px}.site-footer small{margin-left:auto;font-size:11px}.site-footer nav{margin:0;width:100%;justify-content:space-between}.site-footer nav a{font-size:13px;padding:0}.legal-body{margin-top:28px;padding-inline:20px}.legal-body h1{font-size:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}