/* Motion and composition matched to Playground's reference landing page. */
:root { --motion-ease: cubic-bezier(.22,.61,.36,1); }
.hero { height:100svh; min-height:640px; }
.hero-art { max-width:none; transform-origin:50% 50%; will-change:opacity,transform; }
.hero:after { display:none; }
.hero-image { scale:1; pointer-events:auto; cursor:grab; touch-action:none; }
.hero-image:active { cursor:grabbing; }
.hero-image img { width:100%; height:100%; object-fit:contain; pointer-events:none; }
.hero-copy { height:100%; width:100%; padding:0 24px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; pointer-events:none; }
.hero-copy a { pointer-events:auto; }
.hero-copy > .eyebrow { display:none; }
.hero h1 { margin:0 0 24px; font-size:54px; font-weight:500; letter-spacing:-.055em; }
.hero-brand-title { display:block; font-size:38px; margin-bottom:0; }
.hero-design-line { display:flex; align-items:center; justify-content:center; min-height:124px; gap:.25em; }
.hero-word { position:relative; display:inline-flex; align-items:center; justify-content:center; height:124px; }
.hero-word-art { display:none; width:150px; height:150px; }
.hero-word-art img { display:none; width:100%; height:100%; object-fit:contain; }
.hero-word.is-playing .hero-word-final { display:none; }
.hero-word.is-playing .hero-word-art { display:block; }
.hero-word-art img.active { display:block; animation:headline-art-in .3s cubic-bezier(.2,1.45,.5,1) both; }
.hero-word-art img:nth-child(even) { --turn:18deg; }
.hero-word-final { display:block; white-space:nowrap; }
.hero-word.has-finished .hero-word-final { animation:headline-wipe .5s var(--motion-ease) both; }
.hero-description { font-size:16px; line-height:1.55; max-width:475px; margin:0; }
.hero-description br { display:none; }
.hero-button { margin-top:24px; }
.hero-note { margin-top:28px; font-size:13px; }
.motion-enabled .hero-image { animation:hero-card-in .8s cubic-bezier(.2,1.2,.3,1) backwards; animation-delay:calc(var(--index) * 20ms); }
.motion-enabled .hero h1 { animation:fade-up .55s var(--motion-ease) .3s backwards; }
.motion-enabled .hero-description { animation:fade-up .55s var(--motion-ease) .6s backwards; }
.motion-enabled .hero-button { animation:fade-up .55s var(--motion-ease) .75s backwards; }
.motion-enabled .hero-note { animation:fade-up .55s var(--motion-ease) .9s backwards; }
.intro { padding:55px 0 45px; }
.intro h2 { font-size:48px; font-weight:500; }
.reveal-word { display:inline-block; white-space:pre; }
.section-heading h2 { font-size:38px; font-weight:550; letter-spacing:-.035em; }
.section-heading .step { margin-bottom:5px; }

/* The three product scenes share one pinned stage on desktop. */
.feature-story { position:relative; width:100%; }
.story-stage { position:relative; }
.story-nav { display:none; }
.feature-panel .step { display:none; }
.feature-panel .section-heading h2 { font-size:36px; line-height:1.18; margin:0 0 12px; }
.feature-panel .section-heading { max-width:1000px; margin-bottom:18px; }
.feature-panel .section-heading p { max-width:620px; font-size:15px; }
.feature-panel { position:relative; }
.feature-panel > * { position:relative; z-index:1; }
.feature-panel > .scene-backdrop { position:absolute; inset:-30%; background-position:center; background-size:cover; filter:blur(75px); opacity:0; transition:opacity .7s ease-out; pointer-events:none; z-index:0; }
.templates::after { content:''; position:absolute; inset:0; background:#fff5; pointer-events:none; }
.template-grid.carousel-ready { --slot:320px; position:relative; display:block; width:100%; height:330px; margin:0; touch-action:pan-y; cursor:grab; }
.carousel-ready .template-card { position:absolute; left:50%; top:50%; padding:0; width:auto; height:86%; aspect-ratio:var(--card-ratio,1); opacity:0; transform:translate(-50%,-50%); will-change:transform,opacity; transition:transform .7s var(--motion-ease),opacity .7s ease; }
.carousel-ready .template-card img { width:100%; height:100%; object-fit:contain; border:4px solid white; background:white; border-radius:22px; box-shadow:0 15px 45px #0002; }
.carousel-ready .template-card span { position:absolute; right:10px; top:10px; margin:0; border-radius:30px; padding:7px 12px; color:#292926; font-size:14px; font-weight:600; background:#f1f0efdc; backdrop-filter:blur(20px); box-shadow:0 3px 15px #0001; }
.carousel-ready .template-card b { display:none; }
.carousel-controls { display:flex; gap:10px; align-items:center; justify-content:center; position:relative; z-index:3; margin:15px auto 0; }
.carousel-controls button,.motion-control { border:0; background:#ffffff94; color:#686761; font:inherit; font-size:12px; padding:7px 13px; border-radius:30px; cursor:pointer; }
.carousel-controls button:first-child,.carousel-controls button:last-child { font-size:18px; width:36px; height:36px; padding:0; }
.panel-footnote { font-size:12px; max-width:650px; margin-top:12px; }
.prompt-demo { flex-direction:column; gap:18px; margin:8px auto 0; width:100%; }
.prompt-demo > img { width:215px; height:215px; border:3px solid #fff; border-radius:28px; object-fit:contain; }
.prompt-example { width:410px; max-width:100%; padding:16px 20px; background:#f5f4f3cc; border:3px solid #ffffffa8; border-radius:28px; }
.prompt-example .small-label { display:none; }
.prompt-example p { margin:0 0 12px; font-size:17px; min-height:54px; line-height:1.5; }
.prompt-example p.is-typing::after { content:''; display:inline-block; height:1em; width:2px; background:#777; margin-left:3px; animation:cursor-blink .6s steps(1) infinite; }
.prompt-demo.is-generating > img { filter:blur(13px); opacity:.3; transform:scale(.93); }
.prompt-demo > img { transition:filter .7s,opacity .7s,transform .7s var(--motion-ease); }
.tools-layout { display:block; margin:5px auto 0; width:100%; }
.editor-preview { width:520px; max-width:100%; margin:auto; padding:0 0 15px; border-radius:32px; background:#f8f7f4bf; }
.tool-stage { width:100%; height:270px; position:relative; }
.editor-preview .tool-slide { width:100%; height:100%; object-fit:contain; }
.tool-switches { display:flex; gap:4px; padding:5px; justify-content:center; background:#fff9; border-radius:30px; width:max-content; max-width:calc(100% - 20px); margin:6px auto; }
.tool-switches button { position:relative; overflow:hidden; border:0; background:transparent; border-radius:22px; color:#807d78; font-size:12px; padding:9px 12px; cursor:pointer; }
.tool-switches button[aria-pressed=true] { color:#222; background:#fff; box-shadow:0 3px 12px #00000008; }
.tool-switches button[aria-pressed=true]::after { content:''; position:absolute; bottom:0; left:0; width:100%; height:2px; background:#c5a4d9; transform-origin:left; animation:tool-progress 3s linear; }
.editor-preview.is-paused .tool-switches button::after { animation-play-state:paused; }
.tool-pause { display:block; margin:6px auto 0; background:transparent; font-size:11px; padding:2px 12px; }
.feature-details { display:grid; grid-template-columns:1fr 1.4fr; gap:45px; margin-top:30px; margin-bottom:0; }
.feature-details .panel-explainer { border:0; padding:20px 0; }
.feature-details .panel-explainer p { text-align:left; font-size:15px; }
.feature-details .tool-copy { display:grid; grid-template-columns:1fr; gap:0; }
.feature-details .tool-copy article { margin:15px 0; }
.models { padding-top:55px; }
.model-panel { display:flex; flex-direction:column; gap:22px; max-width:660px; }
.model-panel figure { width:440px; max-width:100%; padding:10px; }
.model-panel figure > img { height:auto; max-height:380px; width:100%; object-fit:contain; }
.model-description { text-align:center; max-width:620px; }
.model-description h3 { font-size:24px; }
.model-description p { font-size:15px; }
.mobile-art { height:460px; max-width:1150px; overflow:hidden; }
.phone { width:320px; height:640px; top:55px; transform:translateX(-50%); border-radius:45px; }
.phone-grid img { height:165px; }
.sticker { left:50%; top:50%; right:auto; width:var(--size); height:auto; transform:translate(-50%,-50%) translate(var(--sx),var(--sy)) rotate(var(--sr)); cursor:grab; }
.cat { --sx:-326px; --sy:63px; --sr:-3deg; --size:188px; }
.corgi { --sx:-204px; --sy:30px; --sr:-2deg; --size:192px; z-index:3; }
.witch { --sx:196px; --sy:-74px; --sr:6deg; --size:162px; }
.swordfish { --sx:300px; --sy:-66px; --sr:14deg; --size:164px; z-index:1; }
.motion-enabled .mobile-art:not(.is-visible) .phone { opacity:0; transform:translateX(-50%) translateY(40px) scale(.85); }
.motion-enabled .phone { transition:opacity .6s var(--motion-ease),transform .7s var(--motion-ease); }
.motion-enabled .mobile-art:not(.is-visible) .sticker { opacity:0; transform:translate(-50%,-50%) scale(0); }
.motion-enabled .sticker { transition:opacity .5s var(--motion-ease),transform .85s cubic-bezier(.34,1.45,.5,1); transition-delay:calc(.5s + var(--index) * 90ms); }
.mobile-section .app-store { margin-top:28px; }

@media(min-width:1024px) and (min-height:640px) {
  .motion-enabled .feature-story { height:210svh; }
  .motion-enabled .story-stage { height:calc(100svh - 108px); min-height:525px; position:sticky; top:96px; margin:0 24px 0 70px; }
  .motion-enabled .feature-panel { position:absolute; inset:0; width:100%; max-width:none; margin:0; padding:36px 26px 20px; display:flex; flex-direction:column; align-items:center; justify-content:center; border-radius:48px; transition:opacity .6s var(--motion-ease),transform .6s var(--motion-ease); }
  .motion-enabled .feature-panel.is-upcoming { opacity:0; transform:translateY(40px); pointer-events:none; visibility:hidden; }
  .motion-enabled .feature-panel.is-past { opacity:0; transform:translateY(-30px) scale(.92); pointer-events:none; visibility:hidden; }
  .motion-enabled .feature-panel.is-active { opacity:1; transform:none; pointer-events:auto; visibility:visible; }
  .motion-enabled .story-nav { display:flex; flex-direction:column; position:absolute; left:-43px; top:50%; transform:translateY(-50%); gap:12px; z-index:5; }
  .story-nav button { width:10px; height:12px; padding:0; border:0; border-radius:20px; background:#deddda; cursor:pointer; transition:height .3s,background .3s; }
  .story-nav button[aria-current=true] { height:32px; background:#242422; }
  .feature-panel .section-heading h2 br { display:none; }
  .template-grid.carousel-ready { height:clamp(235px,36svh,420px); flex:1; min-height:210px; max-height:420px; }
  .carousel-ready .template-card { width:auto; height:86%; }
  .prompt-demo > img { width:clamp(170px,30svh,290px); height:clamp(170px,30svh,290px); }
  .tool-stage { height:clamp(220px,39svh,440px); }
  .editor-preview { width:580px; }
}
@media(min-width:1500px) { .hero h1 { font-size:64px; } .hero-brand-title { font-size:44px; } .template-grid.carousel-ready { --slot:390px; } }
@media(max-width:1023px) {
  .hero-art { display:none; }
  .hero { min-height:610px; max-height:800px; }
  .hero-copy { padding:70px 20px 20px; }
  .hero h1 { font-size:43px; }
  .hero-brand-title { font-size:34px; }
  .hero-design-line { flex-wrap:wrap; gap:0 .2em; }
  .hero-word-art { width:120px; height:120px; }
  .feature-panel { width:calc(100% - 40px); padding:32px 20px; }
  .template-grid.carousel-ready { --slot:220px; height:320px; }
  .carousel-ready .template-card { width:auto; height:86%; }
  .feature-details { grid-template-columns:1fr; gap:8px; }
  .feature-details .tool-copy { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
  .feature-details .tool-copy article { display:block; }
  .feature-details .tool-icon { margin-bottom:12px; }
  .feature-details .panel-explainer p { text-align:center; }
  .mobile-art .sticker { display:none; }
  .mobile-art { height:440px; }
}
@media(max-width:600px) {
  .hero { height:100svh; min-height:620px; }
  .hero h1 { font-size:35px; max-width:100%; }
  .hero-brand-title { font-size:33px; margin-bottom:10px; }
  .hero-design-line { display:flex; flex-direction:column; min-height:160px; }
  .hero-word { height:95px; }
  .hero-word-art { width:108px; height:108px; }
  .hero h1 { margin-bottom:14px; }
  .hero-description { font-size:15px; max-width:350px; }
  .hero-note { max-width:300px; }
  .intro h2 { font-size:34px; }
  .intro { padding:36px 0; }
  .section-heading h2 { font-size:31px; }
  .feature-panel .section-heading h2 { font-size:29px; }
  .feature-panel { width:calc(100% - 24px); }
  .feature-panel .section-heading p { font-size:14px; }
  .template-grid.carousel-ready { --slot:170px; height:280px; }
  .carousel-ready .template-card { width:auto; height:86%; }
  .carousel-ready .template-card span { font-size:12px; }
  .feature-details .tool-copy { grid-template-columns:1fr; }
  .feature-details .tool-copy article { display:flex; }
  .feature-details .tool-copy h3 { font-size:19px; }
  .feature-details .panel-explainer p { font-size:14px; }
  .tool-stage { height:220px; }
  .tool-switches { flex-wrap:wrap; border-radius:20px; }
  .tool-switches button { font-size:11px; padding:8px 10px; }
  .prompt-example p { font-size:15px; }
  .phone { width:280px; height:590px; }
  .phone-grid img { height:140px; }
  .model-tabs { max-width:100%; }
}
@keyframes hero-card-in { from { opacity:0; transform:translateY(12px) scale(.85); } to { opacity:1; transform:translateY(0) scale(1); } }
@keyframes headline-art-in { from { opacity:0; transform:rotate(var(--turn,-18deg)) scale(.55); } to { opacity:1; transform:rotate(0) scale(1); } }
@keyframes headline-wipe { from { opacity:0; clip-path:inset(0 100% 0 0); transform:scaleX(.85); } to { opacity:1; clip-path:inset(0); transform:scaleX(1); } }
@keyframes fade-up { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes tool-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes cursor-blink { 50% { opacity:0; } }
@media(prefers-reduced-motion:reduce) {
  .hero-art { opacity:1!important; transform:none!important; }
  .hero-image { cursor:default; }
  .hero-word-art { display:none!important; }
  .hero-word-final { display:block!important; }
  .feature-panel { opacity:1!important; transform:none!important; visibility:visible!important; }
}