@font-face{font-family:Inter;src:url('/fonts/Inter.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{font-family:Inter,Arial,sans-serif;font-synthesis:none;color:#071d16;background:#fff;--ink:#071d16;--green:#27a57b;--mint:#d6f5eb;--dark:#1d7c5c}
*{box-sizing:border-box}body{margin:0;min-height:100svh;display:flex;flex-direction:column;background:linear-gradient(#fff 55.769%,#eafaf5)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}a{color:inherit}img{display:block}button:focus{outline:none}button:focus-visible,a:focus-visible{outline:2px solid #071d16;outline-offset:5px}button.demo-close:focus{outline:none}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.landing{width:100%;max-width:1280px;min-height:calc(100svh - 64px);margin:auto;display:grid;grid-template-columns:56.5% 43.5%;align-items:center;flex:1;padding:48px 0 72px;overflow:hidden}.landing-copy{display:flex;flex-direction:column;align-items:center;gap:48px}.landing-copy h1{margin:0}.brand{width:auto;height:auto}.try-button{background:var(--green);border:1px solid var(--ink);border-radius:4px;box-shadow:0 4px var(--ink);color:#fff;width:124px;height:48px;font-size:16px;font-weight:400}.try-button:hover{background:#218e6a}.try-button:active{transform:translateY(2px);box-shadow:0 2px var(--ink)}.store-downloads{display:flex;flex-direction:column;align-items:center;gap:14px}.store-downloads>p{font-size:10px;font-weight:400;line-height:1.2;margin:0}.store-badges{display:flex;gap:16px}.store-badge{height:40px}.store-badge img{height:100%;width:auto}.phone-art{display:flex;justify-content:flex-end;padding-right:64px}.phone-scene{position:relative;width:552px;height:620px;flex:none}.phone{position:absolute;width:366.019px;height:460.634px;object-fit:contain}.phone-puzzle{top:0;left:0}.phone-home{top:121.46px;left:183.01px}.phone-shadow{position:absolute;left:23.77px;top:477.78px}.mobile-art{display:none}.site-footer{background:white;border-top:.5px solid var(--ink);display:flex;justify-content:center;align-items:flex-start;gap:16px;padding:24px 16px 18px;font-size:14px;font-weight:400;line-height:1.2}.site-footer p{margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}.site-footer nav{display:flex;gap:16px}.site-footer a{font-size:14px;font-weight:400;text-decoration:none;border-bottom:1px solid var(--ink);padding-bottom:8px;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.demo-dialog{border:0;border-radius:18px;padding:64px;width:530px;height:588px;max-width:calc(100vw - 32px);max-height:calc(100svh - 32px);margin:auto;color:var(--ink);overflow:auto;background:white}.demo-dialog::backdrop{background:#071d1655;backdrop-filter:blur(8px)}body:has(.demo-dialog[open]){overflow:hidden}.demo-dialog[open]{animation:dialog-in .32s cubic-bezier(.2,.8,.2,1) both}.demo-close{position:absolute;right:20px;top:20px;padding:0;border:0;background:none;width:20px;height:20px}.demo-close:after{content:'';position:absolute;inset:-10px}.demo-play{display:flex;flex-direction:column;align-items:center;gap:36px}#demo-grid{display:grid;width:336px;height:336px;flex:none;grid-template-columns:repeat(7,48px);grid-template-rows:repeat(7,48px)}.demo-cell{border:0;background:white;box-shadow:0 4px var(--ink);padding:0;font-size:24px;font-weight:600;position:relative;border-radius:2px;display:grid;place-items:center}.demo-cell:after{content:'';position:absolute;inset:-.5px;border:1px solid var(--ink);pointer-events:none;border-radius:inherit}.demo-cell.in-word{background:var(--mint)}.demo-cell.selected{background:#83e2c2}.demo-cell:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}.demo-marker{position:absolute;left:3.5px;top:3px;font-size:8px}.demo-gap{background:url('/assets/website/empty.svg') center/48px 48px no-repeat}.demo-carousel{display:flex;width:402px;align-items:center;gap:8px;padding:0 16px}.demo-arrow{width:40px;height:40px;border:0;border-radius:12px;background:var(--green);display:grid;place-items:center;padding:8px;flex:none}.previous img{transform:rotate(180deg)}.demo-clue{background:#f5f5f5;border-radius:12px;height:88px;flex:1;min-width:0;padding:16px;display:flex;flex-direction:column;justify-content:center;gap:16px}.demo-meta{display:flex;justify-content:space-between;font-size:12px;font-weight:600;color:var(--green);line-height:9px;gap:4px}.demo-clue p{margin:0;font-size:16px;line-height:1.2;text-box-trim:trim-both;text-box-edge:cap alphabetic}.demo-status{position:absolute;bottom:16px;left:32px;right:32px;margin:0;font-size:12px;text-align:center;line-height:1.3}.demo-win{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px}.demo-win h2{font-size:24px;font-weight:500;line-height:1.4;margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}.demo-dialog.is-complete .demo-status{display:none}
.legal-main{width:min(723px,100%);padding:64px 64px 128px;margin:0 auto;flex:1;display:flex;flex-direction:column;gap:48px;min-height:calc(100svh - 64px)}.legal-back{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:500;text-decoration:none;width:max-content}.legal-content{display:flex;flex-direction:column;gap:48px;overflow-wrap:anywhere}.legal-intro h1{font-size:36px;letter-spacing:-.72px;font-weight:300;line-height:1.4;margin:0 0 16px}.legal-content p{font-size:18px;font-weight:300;line-height:1.4;margin:0}.legal-content h2{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--green);line-height:1.4;margin:0}.legal-content section{display:flex;flex-direction:column;gap:16px}.legal-content a{text-underline-offset:4px}.legal-page #site-footer{margin-top:auto}
@keyframes body-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes dialog-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.landing-copy>*,.mobile-art{animation:body-in .7s cubic-bezier(.2,.8,.2,1) both}.hero-font-pending .landing-copy>*{animation-play-state:paused}.landing-copy>:nth-child(2){animation-delay:.1s}.landing-copy>:nth-child(3){animation-delay:.2s}.landing-copy>:nth-child(4){animation-delay:.3s}
.phone-scene .phone {
  animation: phone-rise 1s cubic-bezier(.16,1,.3,1) both;
}
.phone-scene .phone-puzzle {
  animation-delay: 160ms;
}
.phone-shadow {
  animation: body-in 600ms 260ms cubic-bezier(.2,.8,.2,1) both;
}
@keyframes phone-rise {
  from { transform: translateY(100svh); }
  to { transform: translateY(0); }
}
@media(min-width:768px) and (max-width:1100px){.landing{grid-template-columns:48% 52%}.phone-art{padding-right:24px}.phone-scene{transform:scale(.8);transform-origin:right center;margin-left:-110px;margin-top:-60px;margin-bottom:-60px}.landing-copy{gap:36px}}
@media(max-width:767px){.landing{display:flex;flex-direction:column;justify-content:flex-start;gap:36px;padding:0 0 80px;min-height:calc(100svh - 130px);overflow:hidden}.mobile-art{display:block;position:relative;width:100%;height:275px;flex:none;overflow:hidden}.mobile-art img{position:absolute;width:167.1%;height:247.18%;left:-43.1%;top:-47.84%}.landing-copy{gap:36px;width:100%}.try-button,.phone-art{display:none}.site-footer{flex-direction:column;align-items:center;gap:16px;text-align:center;padding-top:24px}.site-footer p{line-height:1.4}.legal-main{padding:0 24px 80px;gap:36px;min-height:calc(100svh - 130px)}.legal-content{gap:36px}.legal-back{min-height:20px}.legal-intro h1{margin-bottom:16px}.legal-content p{line-height:1.4}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Match the hero's optical center and the rotated source artwork in Figma. */
@media(min-width:1101px){.landing{padding-top:96px;padding-bottom:24px}}
@media(max-width:767px){.mobile-art img{width:477px;height:auto;left:calc(50% - 250px);top:-217px;transform:rotate(-45deg)}}
@media(min-width:1101px){.phone-art{padding-right:102px}}
/* Figma Try Game 112:6309 and How to Play 206:19348. */
.demo-dialog{height:626px;padding-bottom:48px}
.demo-text-button{border:0;border-bottom:1px solid var(--ink);border-radius:0;background:none;padding:0 0 8px;font-size:14px;font-weight:400;line-height:normal;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.demo-text-button:disabled{opacity:.45;cursor:default}
.demo-dialog.is-help,.demo-dialog.is-complete{height:588px;padding-bottom:64px}
.demo-help{min-height:100%;display:flex;flex-direction:column;justify-content:center}
.demo-help-content{display:flex;flex-direction:column;align-items:flex-start;gap:32px;width:100%}
.demo-help-back{display:flex;align-items:center;gap:8px;border:0;background:none;padding:0 8px 0 0;font-size:14px;font-weight:400;line-height:normal}
.demo-help-content section{display:flex;flex-direction:column;gap:16px;width:100%}
.demo-help-content h3{font-size:12px;line-height:normal;font-weight:600;color:var(--green);text-transform:uppercase;margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}
.demo-help-content p{font-size:18px;line-height:1.4;font-weight:300;margin:0;text-box-trim:trim-both;text-box-edge:cap alphabetic}
/* Original completion icon: four progress tiles fill, then flip to the star. */
.demo-results-badge{width:68.4px;height:72px;position:relative;flex:none}
.demo-results-progress{position:absolute;left:0;top:0;width:38px;height:40px;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);transform:scale(1.8);transform-origin:top left}
.demo-results-progress>span{border:1px solid var(--ink);background:#fff;min-width:0;min-height:0}
.demo-results-progress>span:first-child{border-radius:4px 0 0 0}
.demo-results-progress>span:nth-child(2){border-radius:0 4px 0 0;border-left:0}
.demo-results-progress>span:nth-child(3){border-radius:0 0 0 4px;border-top:0}
.demo-results-progress>span:nth-child(4){border-radius:0 0 4px 0;border-top:0;border-left:0}
.demo-results-progress.some>span:first-child,.demo-results-progress.middle>span:nth-child(-n+2),.demo-results-progress.most>span:not(:nth-child(4)),.demo-results-progress.all>span{background:var(--dark)}
.demo-results-final{position:absolute;left:-.9px;top:-.9px;visibility:hidden}
.demo-results-badge:has(.demo-results-progress.complete) .demo-results-final{visibility:visible}
.demo-results-progress.complete{visibility:hidden}
/* One compact surface for gameplay, instructions and congratulations. */
.demo-dialog,.demo-dialog.is-help,.demo-dialog.is-complete{height:min(588px,calc(100svh - 32px));min-height:0;padding:48px 64px 32px}
.demo-play{gap:20px}
@media(min-width:768px) and (max-height:620px){
  #demo-grid{width:min(336px,calc(100svh - 280px));height:min(336px,calc(100svh - 280px));grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(7,minmax(0,1fr))}
  .demo-gap{background-size:100% 100%}
}
/* Mobile marketing story, Figma 205:19172. */
.mobile-features{display:none}
@media(max-width:767px){
  .marketing-home{background:white;display:block;--mobile-footer-height:108px;--mobile-section-inset:24px}
  .marketing-home .landing{min-height:calc(100svh - var(--mobile-footer-height));min-height:calc(100dvh - var(--mobile-footer-height));max-width:none;margin:0;flex:none;justify-content:flex-start;gap:20px;padding:0 0 24px;background:linear-gradient(#fff 55.769%,#eafaf5)}
  .marketing-home .mobile-art {
    --art-height: clamp(96px, calc(100svh - 560px), 275px);
    height: var(--art-height);
  }
  .marketing-home .mobile-art img {
    /* Keep the rotated artwork’s framing when its region gets shorter. */
    width: calc(var(--art-height) * 477 / 275);
    left: calc(50% - var(--art-height) * 250 / 275);
    top: calc(var(--art-height) * -217 / 275);
  }
  .marketing-home .landing-copy{flex:1;justify-content:center}
  .marketing-home #site-footer{position:fixed;inset:auto 0 0;z-index:20}
  .marketing-home .site-footer{padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .mobile-features{display:block}
  .mobile-feature{display:flex;align-items:center;gap:36px;padding:80px var(--mobile-section-inset);background:#eafaf5;overflow:hidden}
  .mobile-feature:nth-child(even){background:white}
  .feature-copy{flex:1;min-width:0}
  .feature-copy,.landing-message,.download-message{gap:36px}
  .feature-copy h2,.landing-message h2,.download-message h2{margin:0;font-size:28px;font-weight:300;line-height:1.4;text-box-trim:trim-both;text-box-edge:cap alphabetic}
  .feature-copy p,.landing-message p,.download-message p{margin:0;font-size:16px;font-weight:300;line-height:1.4;text-box-trim:trim-both;text-box-edge:cap alphabetic}
  .feature-visual{width:105px;flex:none;display:flex;align-items:center}
  .feature-reverse .feature-visual{justify-content:flex-end}
  .feature-phone{position:relative;width:164.009px;height:364px;flex:none;border:1px solid var(--ink);border-radius:10.041px;box-shadow:0 4px var(--ink);overflow:hidden}
  .feature-phone img{display:block;width:100%;height:100%;object-fit:cover}
  .feature-phone .feature-base{position:absolute;inset:0;z-index:-1}
  .mobile-download-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;padding:80px var(--mobile-section-inset) calc(80px + var(--mobile-footer-height));overflow:hidden;background:linear-gradient(#eafaf5,#fff 44.231%)}
  .mobile-feature .feature-copy,.mobile-feature .feature-visual,.mobile-download-section>*{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
  .mobile-feature .feature-visual{transition-delay:.1s}
  .mobile-feature.scroll-pending .feature-copy{opacity:0;transform:translateY(22px)}
  .mobile-feature.scroll-pending .feature-visual{opacity:0;transform:translate(20px,30px)}
  .mobile-feature.feature-reverse.scroll-pending .feature-visual{transform:translate(-20px,30px)}
  .mobile-download-section.scroll-pending>*{opacity:0;transform:translateY(22px)}
}
/* Desktop story: complete screenshots and reversible, scroll-linked motion. */
@media(min-width:768px){
  .marketing-home{display:block;background:white}
  .marketing-home .landing{min-height:calc(100svh - var(--mobile-footer-height,64px));padding-block:24px;max-width:none;margin:0;overflow:clip;background:linear-gradient(#fff 55.769%,#eafaf5)}
  .marketing-home .landing-copy{transform:translateX(var(--hero-left,0px));opacity:var(--hero-opacity,1)}
  .marketing-home .phone-art{transform:translateX(var(--hero-right,0px));opacity:var(--hero-opacity,1)}
  .mobile-features{display:block}
  .mobile-feature{display:grid;grid-template-columns:minmax(0,420px) minmax(0,300px);justify-content:center;align-items:center;gap:clamp(48px,8vw,120px);min-height:max(700px,100svh);padding:80px clamp(40px,7vw,112px);background:#eafaf5;overflow:clip}
  .mobile-feature:nth-child(even){background:white;grid-template-columns:minmax(0,300px) minmax(0,420px)}
  .feature-copy,.landing-message,.download-message{gap:32px}
  .feature-copy{min-width:0;transform:translateY(var(--story-copy-y,0px));opacity:var(--story-opacity,1)}
  .feature-copy h2,.landing-message h2,.download-message h2{margin:0;font-size:clamp(32px,3.2vw,44px);font-weight:300;line-height:1.25;letter-spacing:-.02em}
  .feature-copy p,.landing-message p,.download-message p{margin:0;font-size:18px;font-weight:300;line-height:1.65}
  .feature-visual{min-width:0;display:flex;justify-content:center;transform:translateY(var(--story-image-y,0px));opacity:var(--story-opacity,1)}
  .feature-phone{position:relative;isolation:isolate;width:min(280px,100%);aspect-ratio:164.009/364;border:1px solid var(--ink);border-radius:18px;box-shadow:0 5px var(--ink);overflow:hidden;background:white}
  .feature-phone img{display:block;width:100%;height:100%;object-fit:contain}
  .feature-phone .feature-base{position:absolute;inset:0;z-index:-1}
  .mobile-download-section{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:36px;min-height:480px;padding:100px 24px;background:linear-gradient(#eafaf5,#fff 60%)}
}
@media(min-width:768px) and (max-width:1000px){
  .mobile-feature{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;padding-left:40px;padding-right:40px}
  .mobile-feature:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
}
@media(min-width:768px) and (prefers-reduced-motion:reduce){
  .marketing-home .landing-copy,.marketing-home .phone-art,.feature-copy,.feature-visual{transform:none;opacity:1}
}
/* Keep the original 1280px hero composition centered on wide desktops. */
@media(min-width:1280px){
  .marketing-home .landing{grid-template-columns:723.2px 556.8px;justify-content:center}
}
/* Keep the desktop legal bar visible throughout the marketing story. */
@media(min-width:768px){
  .marketing-home{padding-bottom:var(--mobile-footer-height,64px)}
  .marketing-home #site-footer{position:fixed;inset:auto 0 0;z-index:20}
}

/* Keep the message and download actions together above the fixed legal bar. */
.marketing-home .landing-copy{gap:clamp(20px,4svh,36px)}
.marketing-home .landing .brand{width:168px}
.feature-copy,.landing-message,.download-message{display:flex;flex-direction:column}
.landing-message,.download-message{text-align:center;padding-inline:16px}
.landing-message{width:min(472px,100%)}
.landing-message h2{margin-inline:auto}
.landing-message p,.download-message p{margin-inline:auto}
.landing-message p{max-width:390px}
.download-message p{max-width:560px}
.feature-copy p,.landing-message p,.download-message p{text-wrap:pretty}
.store-downloads>.store-heading{font-size:14px;font-weight:500}
@media(max-width:767px){
  .marketing-home .landing-copy{gap:36px;padding-inline:var(--mobile-section-inset)}
  .landing-message,.download-message{padding-inline:0}
  .marketing-home .landing .brand,.mobile-download-section>img{width:136px}
  .landing-message h2{text-wrap:balance}
}
@media(min-width:768px) and (max-height:700px){
  .marketing-home .landing{padding-block:12px}
  .marketing-home .landing-copy{gap:10px}
  .marketing-home .landing .brand{width:clamp(72px,15svh,110px)}
  .marketing-home .landing .store-downloads{gap:8px}
  .marketing-home .phone-scene{zoom:clamp(.55, calc(100svh / 800px), .875)}
}
@media(max-width:767px) and (max-height:700px){
  .marketing-home .landing{gap:12px;padding-bottom:12px}
  .marketing-home .landing-copy{gap:28px}
  .marketing-home .mobile-art{--art-height:clamp(88px,calc(100svh - 536px),144px)}
}

/* Store availability follows the shared download component. */
.google-badge[aria-disabled="true"]{opacity:.3;cursor:default}