/* Measured against playgroundai.com: original artwork boxes, spring motion,
   2600 ms template changes, 600 ms feature transitions and original tool GIFs. */
@font-face{font-family:Inter;src:url('assets/inter-cyrillic.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:Inter;src:url('assets/inter-latin.woff2') format('woff2');font-style:normal;font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{--paper:#f1f0ef;--ease:cubic-bezier(.22,.61,.36,1)}
body{font-family:Inter,Arial,sans-serif}
.site-header{min-height:58px;top:16px;padding:9px 20px;max-width:none;width:calc(100% - 80px)}
.brand img{width:140px}
.header-cta{min-height:36px;padding:9px 18px;font-size:13px;gap:16px}
.hero{height:100svh;min-height:640px;background-size:22px 22px}
.hero-copy{padding:38px 24px 0;width:auto;max-width:860px}
.hero-copy .eyebrow{display:none}
.hero h1{font-size:64px;font-weight:500;letter-spacing:-.055em;line-height:1.1}
.hero-headline{font-size:56px;font-weight:500;letter-spacing:-.055em;display:flex;align-items:center;justify-content:center;height:130px;margin:0;gap:.22em;white-space:nowrap}
.hero-word{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:1px;height:130px;transition:width 300ms ease-in-out}
.hero-word img{position:absolute;inset:0;margin:auto;width:130px;height:130px;object-fit:contain;animation:hero-image-turn .3s var(--ease) both}
.hero-word .gradient-text{display:inline-block;animation:word-wipe .45s var(--ease) both}
.hero-description{font-size:15px;font-weight:450;max-width:460px;line-height:1.6;margin:13px auto 24px}
.hero-description .desktop-break{display:none}
.hero-cta{min-height:42px;min-width:162px;font-size:14px;padding:11px 27px}
.hero-note{margin-top:28px;font-size:12px}
.hero-art{max-width:none;transition:none;transform-origin:50% 50%}
.hero-art .art{display:block;max-width:none;object-fit:contain;transform:none;filter:none;right:auto;bottom:auto;pointer-events:auto;touch-action:pan-y;user-select:none;-webkit-user-drag:none}
.hero-art .slay{width:109px;height:120px;top:-6.4%;left:22.6%}
.hero-art .portrait{width:366px;height:261px;top:-10.6%;left:73.3%}
.hero-art .skeleton{width:325px;height:409px;top:24.5%;left:89.6%}
.hero-art .kind{width:217px;height:208px;top:-5.6%;left:66%}
.hero-art .croc{width:291px;height:395px;top:65.3%;left:89.9%}
.hero-art .lips{width:244px;height:191px;top:-4%;left:7.4%}
.hero-art .sunset{width:260px;height:275px;top:16%;left:-5.7%}
.hero-art .yosemite{width:320px;height:368px;top:-5%;left:-3.2%}
.hero-art .disco{width:355px;height:354px;top:62%;left:-8%}
.hero-art .phone{width:333px;height:577px;top:80.2%;left:.9%}
.hero-art .octopus{width:183px;height:208px;top:51.3%;left:91.8%}
.hero-art .fox{width:315px;height:440px;top:31%;left:-5.5%}
.hero-art .panda{width:497px;height:497px;top:74.4%;left:75%}
.hero-art .miata{width:378px;height:378px;top:-3.4%;left:85.5%}
.has-motion .hero-art .art{cursor:grab;touch-action:none}
.has-motion .hero-art .art.is-dragging{cursor:grabbing}
.has-motion .hero-copy>*{animation:fade-up .55s var(--ease) both}
.has-motion .hero-copy h1{animation-delay:.3s}
.has-motion .hero-copy .hero-headline{animation-delay:.35s}
.has-motion .hero-copy .hero-description{animation-delay:.6s}
.has-motion .hero-copy .hero-cta{animation-delay:.75s}
.has-motion .hero-copy .hero-note{animation-delay:.9s}
.creation{width:100%;max-width:none;padding-bottom:16px}
.creation-heading{max-width:1000px;width:calc(100% - 64px);text-align:center;margin:0 auto 42px}
.creation-heading>p:last-child{margin-inline:auto}
.creation-heading h2{font-size:48px;font-weight:500;line-height:1.2}
.feature-scroll{max-width:1400px;margin:auto;padding-inline:24px}
.feature-steps{display:none}
.feature-stage{position:relative}
.feature-panels{position:relative;min-width:0}
.feature-card{margin-top:20px;isolation:isolate;display:flex;flex-direction:column;align-items:center}
.feature-heading{flex-shrink:0;width:100%}
.feature-heading h3{font-size:36px;font-weight:600;line-height:1.13;letter-spacing:-.04em}
.feature-heading h3 br{display:none}
.feature-heading p{font-size:14px;max-width:650px;margin-top:14px}
.feature-heading .step-label{display:none}
.template-showcase{width:100%;left:auto;min-height:260px;max-height:440px;height:42svh;margin:20px 0 0;display:block;position:relative;touch-action:pan-y;cursor:grab;outline-offset:-4px;flex:1}
.template-showcase:active{cursor:grabbing}
.floating-card{position:absolute;left:50%;top:50%;height:85%;width:auto;max-width:none;aspect-ratio:.72;border:4px solid white;border-radius:22px;box-shadow:0 24px 54px #0003;transition:transform 700ms var(--ease),opacity 700ms ease-out,box-shadow 500ms;transform-origin:center}
.floating-card img{object-fit:cover;pointer-events:none;user-select:none}
.floating-card.card-left{aspect-ratio:1;height:70%;transform:translate(-50%,-50%) translateX(-290px) scale(.62) rotate(3deg)}
.floating-card.card-center{aspect-ratio:.68;transform:translate(-50%,-50%)}
.floating-card.card-right{aspect-ratio:.68;transform:translate(-50%,-50%) translateX(290px) scale(.62) rotate(-3deg)}
.floating-card span{font-size:13px;top:11px;right:11px;padding:6px 15px;box-shadow:0 4px 16px #0001;backdrop-filter:blur(24px)}
.floating-card.is-center{z-index:3;box-shadow:0 24px 64px #0004}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:5px;min-height:32px}
.carousel-controls button{width:30px;height:30px;border:1px solid #fff8;background:#fff6;border-radius:50%;cursor:pointer;line-height:1}
.carousel-controls button:hover{background:#fff}
.carousel-count{font-size:11px;min-width:34px;text-align:center;color:#655e58}
.feature-footnote{margin-top:8px;font-size:12px}
.prompt-demo{position:relative;display:flex;flex:1;flex-direction:column;align-items:center;width:min(100%,480px);min-height:0;margin:18px auto 0}
.prompt-demo>img{width:100%;height:250px;min-height:0;flex:1;object-fit:contain;mix-blend-mode:normal;border-radius:18px}
.prompt-demo figcaption{width:100%;position:relative;flex-shrink:0;margin-top:10px;padding:16px 20px;border:3px solid #ffffffb0;box-shadow:0 18px 48px -10px #0003}
.prompt-demo figcaption p{font-size:14px}
.model-tag{margin-top:10px}
.prompt-feature.is-generating .prompt-demo>img{filter:blur(36px);opacity:.25;transform:scale(.96)}
.prompt-demo>img{transition:filter 700ms var(--ease),opacity 700ms var(--ease),transform 700ms var(--ease)}
.generation-status{position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);font-size:13px;color:#62546a;background:#ffffffb8;border-radius:30px;padding:10px 20px;white-space:nowrap;opacity:0;transition:opacity .3s}
.is-generating .generation-status{opacity:1}
.generation-status:after{content:"";display:inline-block;width:5px;height:5px;background:#b083d5;border-radius:50%;margin-left:10px;animation:pulse 1s infinite alternate}
.tool-stage{display:flex;flex-direction:column;align-items:center;position:relative;flex:0 1 auto;width:min(100%,480px);height:min(52svh,580px);min-height:300px;margin:22px auto 0;padding:12px 12px 10px;background:#f8f6f3;border:4px solid #fff;border-radius:32px;box-shadow:0 8px 48px #0002;background-image:radial-gradient(#918d841f 1px,transparent 1px);background-size:16px 16px}
.tool-stage .tool-image{min-height:0;width:100%;height:260px;flex:1;object-fit:contain;margin:0;border-radius:12px}
.tool-pills{display:flex;align-items:center;justify-content:center;flex-wrap:nowrap;gap:2px;padding:5px;background:#ffffffe6;box-shadow:0 4px 20px #0001;border-radius:100px;margin:10px 0 0;flex-shrink:0;max-width:100%}
.tool-pills button{border:0;background:transparent;padding:10px 13px;border-radius:50px;cursor:pointer;position:relative;overflow:hidden;font-size:18px;display:flex;gap:6px;align-items:center;white-space:nowrap;color:#494149}
.tool-pills button span{font-size:11px;display:none}
.tool-pills button[aria-pressed=true]{background:#f0ddf38c}
.tool-pills button[aria-pressed=true] span{display:inline}
.tool-pills button:after{content:"";position:absolute;height:2px;left:10px;right:10px;bottom:4px;background:#b485c4;transform:scaleX(0);transform-origin:left}
.has-motion .tool-pills button.is-running:after{animation:tool-progress 3s linear both}
.tools-feature{transition:background 700ms ease-out;background:radial-gradient(ellipse at 30% 55%,#e4d9b3,transparent 70%),#ebe9e4}
.models-section{max-width:700px;padding-top:48px}
.models-section h2{font-size:38px;line-height:1.15;letter-spacing:-.03em}
.models-section h2 br{display:none}
.models-section .eyebrow{display:none}
.models-section .section-heading>p:last-child{font-size:15px;margin-top:16px}
.model-tabs{gap:5px;flex-wrap:nowrap;margin-bottom:24px;background:#e9e7e3;padding:5px;border-radius:100px;width:max-content;max-width:100%;margin-inline:auto}
.model-tab{font-size:12px;border:0;padding:9px 13px;font-weight:600;transition:background .3s,transform .3s}
.model-tab.active{box-shadow:0 6px 20px -4px #0004}
.model-stage{display:flex;flex-direction:column;gap:22px;padding:36px 40px;border-radius:48px;min-height:0;background-color:#f8f6f3;background-image:radial-gradient(ellipse at 50% 35%,#dce8f5a0,transparent 60%),radial-gradient(#79777122 .8px,transparent .8px);background-size:auto,16px 16px;border:1px solid #fff;box-shadow:0 18px 72px -24px #0002;transition:background-color .7s}
.model-example{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px}
.model-example img{width:auto;max-width:100%;height:320px;object-fit:contain;border-radius:24px;filter:drop-shadow(0 16px 20px #0002)}
.has-motion .model-example img{animation:model-float 4s ease-in-out infinite}
.model-example img.is-switching{animation:model-enter .45s var(--ease) both}
.model-example figcaption{width:100%;max-width:380px;text-align:left;font-size:14px;line-height:1.5;background:#fff;padding:17px 20px;border:3px solid #ffffffb0;border-radius:22px;box-shadow:0 18px 48px -10px #0003;min-height:60px;margin:0}
.model-copy{min-height:0;text-align:center}
.model-copy .step-label{display:none}
.model-copy h3{font-size:22px;margin:0 0 12px;line-height:1.25}
.model-copy h3 br{display:none}
.model-copy p{font-size:14px;line-height:1.65}
.model-copy .small-note{font-size:11px;margin-top:14px}
.pocket-section{display:flex;flex-direction:column;gap:26px;width:100%;max-width:1280px;position:relative;padding:50px 24px 34px;overflow:hidden}
.pocket-copy{display:contents}
.pocket-copy .eyebrow{display:none}
.pocket-copy h2{order:0;font-size:40px;text-align:center;line-height:1.2;margin-bottom:0}
.pocket-copy h2 br{display:none}
.pocket-art{order:1;width:100%;max-width:none;min-height:730px;background:none;display:flex;align-items:flex-start;justify-content:center;position:relative;padding-top:20px}
.pocket-copy>p:not(.eyebrow){order:2;max-width:720px;font-size:15px;text-align:center;margin-bottom:0}
.pocket-copy>.text-link{order:3;margin-top:0}
.phone-mockup{position:relative;z-index:3;width:340px;flex-shrink:0;background:#111;border-radius:50px;padding:9px;box-shadow:0 40px 80px -20px #0006,0 16px 32px -10px #0003}
.phone-screen{position:relative;aspect-ratio:9/19.5;overflow:hidden;background:#f1f0ef;border-radius:43px}
.phone-island{position:absolute;z-index:5;width:100px;height:28px;top:9px;left:50%;transform:translateX(-50%);background:#000;border-radius:100px}
.phone-status{position:absolute;top:17px;left:27px;right:24px;display:flex;justify-content:space-between;font-size:11px;font-weight:600}
.phone-app-header{position:absolute;z-index:4;top:61px;left:17px;right:17px;display:flex;justify-content:space-between;align-items:center}
.phone-app-header strong{font-size:23px;font-weight:650;letter-spacing:-.05em}
.profile-dot{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#d6c6b0;font-size:13px}
.phone-search{position:absolute;top:109px;left:13px;right:13px;border:1px solid #dedcd7;border-radius:12px;padding:9px 10px;font-size:11px;color:#92908c;background:#faf9f6}
.phone-feed{position:absolute;left:9px;right:9px;top:163px;display:grid;grid-template-columns:1fr 1fr;gap:10px;will-change:transform}
.phone-tile{position:relative;border-radius:11px;overflow:hidden;height:190px;background:#e3dfd6}
.phone-tile:nth-child(2n){transform:translateY(26px)}
.phone-tile img{width:100%;height:100%;object-fit:cover}
.phone-tile span{position:absolute;z-index:1;top:7px;left:7px;right:7px;background:#ffffffe0;backdrop-filter:blur(10px);padding:5px 7px;border-radius:6px;font-size:9px;line-height:1.2;text-align:center;color:#36332f}
.phone-home{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);width:105px;height:4px;border-radius:20px;background:#111;z-index:5}
.pocket-art>img{position:absolute;z-index:2;max-width:none;top:42%;bottom:auto;left:50%;right:auto;filter:drop-shadow(0 10px 20px #0002);transform:translate(var(--sx),var(--sy)) rotate(var(--sr));width:var(--sw)}
.pocket-art .pocket-cat{--sx:-415px;--sy:10px;--sr:-3deg;--sw:188px}
.pocket-art .pocket-corgi{--sx:-290px;--sy:145px;--sr:-2deg;--sw:192px;z-index:4}
.pocket-art .pocket-donut{--sx:220px;--sy:25px;--sr:4deg;--sw:206px}
.pocket-art .pocket-sprinkles{--sx:130px;--sy:-140px;--sr:9deg;--sw:176px}
.has-motion .pocket-art .phone-mockup{opacity:0;transform:translateY(40px) scale(.85);transition:opacity 600ms var(--ease),transform 700ms var(--ease)}
.has-motion .pocket-art.is-in-view .phone-mockup{opacity:1;transform:none;transition-delay:200ms}
.has-motion .pocket-art>img{opacity:0;transform:translate(0,10px) rotate(0) scale(.4);transition:opacity 700ms var(--ease),transform 1100ms cubic-bezier(.2,.9,.25,1.15)}
.has-motion .pocket-art.is-in-view>img{opacity:1;transform:translate(var(--sx),var(--sy)) rotate(var(--sr));transition-delay:800ms}
.has-motion .pocket-art.is-in-view .pocket-corgi{transition-delay:950ms}
.has-motion .pocket-art.is-in-view .pocket-donut{transition-delay:1050ms}
.has-motion .pocket-art.is-in-view .pocket-sprinkles{transition-delay:1150ms}
.has-motion .phone-feed{animation:phone-feed-pan 20s ease-in-out infinite alternate;animation-play-state:paused}
.has-motion .is-in-view .phone-feed{animation-play-state:running}
.phone-mockup:hover .phone-feed,.phone-mockup:focus-within .phone-feed{animation-play-state:paused}
.gallery-section .section-heading h2{font-size:38px}
.gallery-section .design-grid{gap:20px 28px}
.gallery-section .design-card{border-top:1px solid #d9d7d2;padding-top:6px}
.gallery-section .design-caption{margin-top:12px}
.gallery-section .design-card>p{font-size:14px}
.has-motion [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .6s var(--ease),transform .6s var(--ease);transition-delay:var(--reveal-delay,0ms)}
.has-motion [data-reveal].is-in-view{opacity:1;transform:none}
.has-motion .cta-art img{animation:model-float 6s ease-in-out infinite alternate}
.has-motion .cta-art-right img{animation-delay:-3s}
@media(min-width:768px) and (min-height:640px){
 .has-motion .feature-scroll{height:310svh;padding-inline:12px;max-width:1400px}
 .has-motion .feature-stage{position:sticky;top:88px;height:calc(100svh - 100px);display:flex;gap:12px}
 .has-motion .feature-steps{display:flex;width:46px;flex-shrink:0;justify-content:center;align-items:center;flex-direction:column;gap:10px}
 .feature-steps button{width:10px;height:12px;padding:0;border:0;border-radius:20px;background:#deddda;cursor:pointer;transition:height .3s var(--ease),background .3s}
 .feature-steps button[aria-current=step]{height:32px;background:#555550}
 .has-motion .feature-panels{flex:1;height:100%}
 .has-motion .feature-card{position:absolute;inset:0;margin:0;padding:36px 30px 22px;border-radius:48px;opacity:0;transform:translateY(40px);pointer-events:none;transition:opacity 600ms var(--ease),transform 600ms var(--ease)}
 .has-motion .feature-card.is-active{opacity:1;transform:none;pointer-events:auto}
 .has-motion .feature-card.is-past{transform:scale(.92) translateY(-30px)}
 .has-motion .feature-scroll:not(.deck-initialized) .feature-card{transition:none}
 .has-motion .tools-feature .tool-stage{margin-top:auto;margin-bottom:auto}
 .has-motion .template-showcase{max-height:none;min-height:170px;height:auto}
 .has-motion .prompt-demo>img{height:160px}
 .has-motion .tool-stage .tool-image{height:160px}
}
@media(min-width:1800px){.hero h1{font-size:86px}.hero-headline{font-size:72px}.hero-copy{max-width:1100px}}
@media(max-width:1023px){.hero-art{display:none}.hero-copy{max-width:100%;width:100%;padding-top:30px}.hero{min-height:570px}.hero h1{font-size:60px}.hero-headline{font-size:48px}.pocket-art>img{display:none}.pocket-art{min-height:720px}.feature-heading h3{font-size:31px}.feature-heading p{font-size:13px}.has-motion .feature-card{padding:28px 24px 20px}.floating-card.card-left{transform:translate(-50%,-50%) translateX(-220px) scale(.62)}.floating-card.card-right{transform:translate(-50%,-50%) translateX(220px) scale(.62)}.tool-pills button{padding:8px 10px}}
@media(max-width:767px){
 .site-header{top:12px;width:calc(100% - 24px);padding:9px 12px;min-height:54px}.site-header .brand img{width:126px}.header-cta{font-size:12px;padding:9px 14px;gap:8px}
 .hero{height:85svh;min-height:550px;max-height:760px}.hero h1{font-size:clamp(38px,10vw,60px)}.hero-headline{font-size:clamp(27px,6.2vw,44px);height:100px;letter-spacing:-.055em}.hero-word{height:100px}.hero-word img{width:100px;height:100px}.hero-description{font-size:15px;max-width:355px;margin-top:6px}.hero-copy{padding:45px 18px 0}.hero-note{font-size:11px;max-width:none;margin-top:25px}
 .creation-heading{width:calc(100% - 32px);margin-bottom:26px}.creation-heading h2{font-size:34px}.creation-heading .eyebrow{font-size:9px}.feature-scroll{padding:0 12px}.feature-card{padding:28px 18px 24px;min-height:560px}.feature-heading h3{font-size:28px}.feature-heading p{font-size:14px}.template-showcase{min-height:260px;max-height:330px;height:42svh;margin-top:12px}.floating-card{height:85%;border-radius:16px}.floating-card.card-left{height:65%}.floating-card span{font-size:11px;padding:4px 9px;top:7px;right:7px}.prompt-demo>img{height:240px;flex:none}.prompt-demo figcaption{padding:14px}.tool-stage{width:min(100%,420px);min-height:330px;margin-top:22px;border-radius:26px}.tool-stage .tool-image{height:260px}.tool-pills button{font-size:17px;padding:8px 11px}.tool-pills button span{font-size:10px}.tool-pills{margin-top:0;padding:4px}
 .models-section{padding-top:30px}.models-section h2{font-size:31px}.model-tabs{gap:1px;width:100%;justify-content:space-evenly}.model-tab{font-size:10px;padding:9px 8px}.model-stage{padding:28px 20px;border-radius:30px}.model-example img{height:260px;max-width:100%;border-radius:17px}.model-example figcaption{font-size:12px;padding:14px;min-height:58px}.model-copy h3{font-size:22px}.model-copy p{font-size:14px}
 .pocket-section{padding:38px 16px 28px;gap:24px}.pocket-copy h2{font-size:33px}.phone-mockup{width:min(300px,84vw);border-radius:44px;padding:7px}.phone-screen{border-radius:38px}.pocket-art{min-height:670px;padding-top:5px;max-width:none}.phone-app-header strong{font-size:21px}.phone-tile{height:175px}.pocket-copy>p:not(.eyebrow){font-size:14px}.gallery-section .section-heading h2{font-size:32px}.gallery-section .design-grid{gap:18px}
}
@media(max-width:360px){.site-header .brand img{width:118px}.site-header .header-cta{font-size:11px;padding:9px 12px}.hero-copy{padding-inline:13px}.hero-headline{font-size:23px}.hero h1{font-size:39px}.hero-description{font-size:14px}.feature-heading h3{font-size:25px}.tool-pills button{padding:8px}.tool-pills button span{font-size:9px}.model-tab{font-size:9px;padding:8px 6px}.model-example img{height:220px}.pocket-art{min-height:615px}.pocket-copy h2{font-size:30px}.phone-tile{height:160px}}
@keyframes hero-image-turn{from{opacity:0;transform:rotate(-16deg) scale(.75)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes word-wipe{from{opacity:0;clip-path:inset(0 100% 0 0);transform:translateX(-8px)}to{opacity:1;clip-path:inset(0);transform:none}}
@keyframes fade-up{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes model-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes model-enter{from{opacity:0;transform:translateY(12px) scale(.96);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes pulse{to{opacity:.2}}
@keyframes tool-progress{to{transform:scaleX(1)}}
@keyframes phone-feed-pan{0%,12%{transform:translateY(0)}88%,100%{transform:translateY(-180px)}}
@media(prefers-reduced-motion:reduce){.hero-word .gradient-text{animation:none}.phone-feed{animation:none!important}.hero-art .art{cursor:default}.feature-scroll{height:auto!important}.feature-stage{position:relative!important;height:auto!important;display:block!important}.feature-steps{display:none!important}.feature-card{position:relative!important;opacity:1!important;transform:none!important;pointer-events:auto!important}.pocket-art .phone-mockup,[data-reveal]{opacity:1!important;transform:none!important}.pocket-art>img{opacity:1!important;transform:translate(var(--sx),var(--sy)) rotate(var(--sr))!important}.model-example img{animation:none!important}}