/* Tighter rhythm and an overlay character selector on every screen. */
.section{padding-block:76px}.section-top{margin-bottom:28px;align-items:center}.section-top h2{margin-top:0}.section-top>p{font-size:14px;max-width:270px}.wrap{width:min(1280px,calc(100% - 96px))}h2{font-size:46px}.hero{grid-template-columns:37% 63%;grid-template-rows:1fr;min-height:750px;max-height:980px;padding-top:135px;padding-bottom:70px}.hero-copy{align-self:center;max-width:440px}.hero-copy h1{font-size:clamp(57px,5.8vw,86px);margin-top:0}.hero-copy>p{max-width:300px;font-size:16px}.hero-actions .text-button{display:none}.hero-actions{margin-top:25px}.character-stage{width:73%}.character-film{clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}.character-film video{object-position:33% center}.hero:before{clip-path:polygon(43% 0,61% 0,26% 100%,8% 100%)}.character-film:before{background:linear-gradient(90deg,#27204b45,transparent 35%),linear-gradient(0deg,#211b50 0,#211b50c9 13%,transparent 50%,#211a4d44 100%)}
.character-stage .character-selector{position:absolute;left:36%;right:10%;bottom:30px;max-width:none;width:auto;padding:0;z-index:8;background:transparent;border-radius:0;margin:0}.selector-heading{display:none}.casting-controls{gap:20px}.casting-arrow{width:46px;height:46px;background:#22184970;backdrop-filter:blur(8px)}.casting-identity strong{font-size:30px}.casting-identity>span{font-size:10px}.casting-dots{margin-top:4px}.character-intro{left:25%;right:9%;bottom:156px;min-height:0;text-align:center}.hello-label{display:none}#character-speech{font-size:clamp(24px,2.2vw,33px);line-height:1.23;max-width:640px;margin-inline:auto}.film-progress{left:32%;right:9%;bottom:139px}.film-controls{bottom:265px;right:7%}.character-video-status{bottom:10px;left:25%;right:9%;text-align:center}.hero-orbit{display:none}
.world-tabs{margin:22px 0}.world-panel,.world-copy{min-height:475px}.world-copy{padding:45px 35px 45px 15px}.world-copy h3{font-size:40px;margin:13px 0}.world-copy>p{font-size:15px;line-height:1.6}.world-space-figure,.world-panel[data-theme=space] .world-space-figure{width:47%;bottom:0}.world-number{display:none}.world-copy .button{margin-top:23px}.playground{padding-block:60px;gap:35px}.playground h2{font-size:44px;margin-top:0}.playground-copy>p{margin-top:18px}.playground-copy p.world-status{font-size:12px;min-height:0;margin-bottom:16px}#world-canvas{height:380px}.mini-world-tabs{margin:23px 0 15px}.playground-copy .button{min-height:48px;padding:12px 20px}.world-motion-controls{gap:6px}.world-motion-controls button{padding:9px 12px}#world-help{margin-bottom:16px}
.pricing-grid{margin-top:35px;gap:20px}.price-card{padding:27px;border-radius:15px}.pack-symbol{display:none}.price-card h3{margin-top:0}.price-card>p{font-size:13px;min-height:42px}.price{font-size:48px;margin-top:20px}.price-card ul{font-size:13px;margin-block:23px}.price-card .button{min-height:48px;font-size:13px}.pricing-note{margin-top:18px}.create-section{gap:60px;padding-block:65px}.create-intro h2{font-size:55px;margin-top:0}.create-intro>p{margin-top:18px}.creator{padding:30px;min-height:370px}.how-section{padding-block:55px}.how-section h2{font-size:37px;margin-top:0}.steps-grid{margin-top:28px;gap:35px}.step-number{font-size:40px;padding-bottom:14px;margin-bottom:16px}.steps-grid h3{font-size:21px}.steps-grid p{font-size:14px;line-height:1.6}.faq-section{padding-block:60px}.faq-section h2{margin-top:0;font-size:39px}.faqs summary{padding-block:20px}.faqs details p{font-size:14px}footer{min-height:100px;border-top:1px solid var(--line)}
/* The film carousel keeps a stable frame while diagonal shutters cross it. */
.showcase{--scene-a:#4b2c8c;--scene-b:#101c4e}.showcase-screen{position:relative;aspect-ratio:16/8;overflow:hidden;isolation:isolate;background:#151126;border-radius:4px 48px 4px 4px}.showcase-film{display:block;position:absolute;inset:0;width:100%;height:100%;background:#111021;padding:0}.showcase-film img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block;transition:transform .5s}.showcase-film:hover img{transform:scale(1.035)}.showcase-film:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#14122e66,transparent 50%);pointer-events:none}.showcase-play-icon{position:absolute;z-index:1;inset:0;margin:auto;width:82px;height:82px;border-radius:50%;display:grid;place-items:center;background:#e4fa67;color:#211936;font-size:22px;padding-left:4px;box-shadow:0 0 0 12px #ffffff20;transition:transform .2s}.showcase-film:hover .showcase-play-icon{transform:scale(1.1)}.showcase-duration{position:absolute;bottom:24px;right:26px;color:white;z-index:1;font-size:12px;letter-spacing:2px}.showcase-bottom{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:23px 0 0}.showcase-bottom h3{font-size:28px;letter-spacing:-1px;line-height:1.2;margin-top:7px}.showcase-bottom>div>span{font-size:9px;letter-spacing:1.5px;color:#c6bbda}.showcase-navigation{display:flex;align-items:center;gap:20px;flex:none}.showcase-navigation>span{font-size:11px;color:#d7cee7;letter-spacing:1px;width:47px;text-align:center}.showcase-navigation button{width:47px;height:47px;border-radius:50%;background:transparent;border:1px solid #ffffff65;color:white;font-size:23px}.showcase-navigation button:hover{background:var(--lime);color:#211936}.coming-world{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;isolation:isolate;background:radial-gradient(ellipse at 70% 30%,var(--scene-a),transparent 70%),linear-gradient(125deg,var(--scene-b),var(--scene-a));overflow:hidden}.showcase[data-slide="1"]{--scene-a:#249c96;--scene-b:#142c51}.showcase[data-slide="2"]{--scene-a:#cb659d;--scene-b:#382375}.showcase[data-slide="3"]{--scene-a:#458ae4;--scene-b:#06334d}.coming-world:before,.coming-world:after{content:'';position:absolute;inset:-20%;z-index:-1;background:linear-gradient(125deg,#ffffff08,#ffffff35);clip-path:polygon(45% 0,65% 0,30% 100%,10% 100%);animation:diagonal-drift 7s ease-in-out infinite alternate}.coming-world:after{transform:translateX(45%);opacity:.5;animation-delay:-3s}.coming-kicker{font-size:10px;letter-spacing:4px;color:#e4fa67;margin-bottom:20px}.coming-world h3{font-size:clamp(28px,4vw,58px);letter-spacing:-2px;max-width:700px;line-height:1.1}.coming-world p{font-size:14px;color:#e1d9ed;margin-top:18px}.coming-orbit{position:absolute;inset:15% 15%;border:1px solid #ffffff22;border-radius:50%;transform:rotate(-22deg);pointer-events:none;z-index:-1}.coming-orbit span{position:absolute;font-size:45px;color:#f2d590;top:0;left:14%;animation:star-float 4s ease-in-out infinite alternate}.coming-orbit span:nth-child(2){left:85%;top:60%;font-size:66px;animation-delay:-2s}.coming-orbit span:nth-child(3){left:10%;top:85%;font-size:26px}.diagonal-wipe{position:absolute;inset:0;z-index:5;pointer-events:none;visibility:hidden;display:flex;transform:skewX(-22deg) scaleX(1.5)}.diagonal-wipe i{height:100%;flex:1;background:#b4a1ed;transform:translateY(110%)}.diagonal-wipe i:nth-child(2){background:#e4fa67}.diagonal-wipe i:nth-child(3){background:#6949c3}.changing .diagonal-wipe{visibility:visible}.changing .diagonal-wipe i{animation:shutter .72s cubic-bezier(.65,0,.35,1) both}.changing .diagonal-wipe i:nth-child(2){animation-delay:25ms}.changing .diagonal-wipe i:nth-child(3){animation-delay:50ms}.changing[data-direction=prev] .diagonal-wipe{transform:skewX(22deg) scaleX(1.5) rotate(180deg)}
@keyframes shutter{0%{transform:translateY(110%)}40%,53%{transform:translateY(0)}100%{transform:translateY(-110%)}}@keyframes diagonal-drift{to{translate:8% 0}}@keyframes star-float{to{translate:0 -15px;rotate:12deg}}
@media(min-width:761px) and (max-width:1100px){.hero{min-height:750px;grid-template-columns:39% 61%}.hero-copy h1{font-size:clamp(49px,6vw,64px)}.character-stage{width:72%}.character-film video{object-position:30% center}.character-stage .character-selector{left:35%;right:9%}.character-intro{left:27%;right:8%;bottom:155px}#character-speech{font-size:26px}.film-controls{bottom:255px}.world-panel,.world-copy{min-height:440px}.world-copy h3{font-size:32px}.world-copy{padding-right:25px}.playground h2{font-size:37px}.showcase-screen{aspect-ratio:16/9}.wrap{width:calc(100% - 70px)}.create-section{gap:35px}.price-card{padding:22px}.price-card h3{font-size:24px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.section{padding-block:46px}.section-top{margin-bottom:24px}.section-top>p{margin-top:14px;max-width:none;font-size:14px}h2{font-size:34px}.header{padding:20px}.header .logo img{width:130px;height:auto}.hero{display:block;position:relative;height:100svh;min-height:710px;max-height:900px;padding:98px 20px 0}.hero-copy{position:relative;z-index:5;padding:0;max-width:none;pointer-events:none}.hero-copy a{pointer-events:auto}.hero-copy h1{font-size:clamp(40px,10.8vw,56px);line-height:1.03;max-width:330px;margin:0;letter-spacing:-2.5px}.hero-copy>p,.hero-copy>p.hero-meta{display:none}.hero-actions{margin-top:17px;display:block}.hero-actions .button{font-size:11px;padding:11px 16px;min-height:43px;gap:15px}.character-stage{position:absolute;inset:0;width:100%;height:100%;margin:0;z-index:1;overflow:clip}.character-film{inset:90px 0 0;clip-path:polygon(72% 0,100% 0,100% 100%,0 100%,0 25%)}.character-film video{object-position:40% center}.character-film:before{background:linear-gradient(0deg,#21184d 0,#21184dd9 19%,transparent 60%),linear-gradient(125deg,#20154040,transparent 50%)}.hero:before{clip-path:polygon(45% 0,90% 0,0 64%,0 35%);opacity:.25}.character-stage .character-selector{position:absolute;left:26px;right:26px;bottom:18px;width:auto;margin:0;padding:0;background:transparent;border-radius:0}.casting-identity strong{font-size:28px}.casting-identity>span{font-size:9px}.casting-arrow{width:43px;height:43px}.casting-controls{gap:15px}.casting-dots{margin-top:4px}.character-intro{left:25px;right:25px;bottom:125px;min-height:0;padding:0;text-align:center}#character-speech{font-size:25px;line-height:1.2;letter-spacing:-.7px;margin-top:0}.film-progress{left:26px;right:26px;bottom:112px}.film-controls{right:18px;bottom:221px;gap:6px}.film-controls button{width:30px;height:30px;font-size:16px}.character-video-status{bottom:4px;font-size:8px;left:20px;right:20px}.world-panel,.world-copy{min-height:0}.world-copy{padding:260px 24px 27px}.world-space-figure,.world-panel[data-theme=space] .world-space-figure{width:280px;top:0;bottom:auto}.world-copy h3{font-size:30px}.world-copy>p{font-size:13px;line-height:1.6}.world-copy .button{min-height:43px;padding:11px 19px;margin-top:18px}.world-tabs{margin:20px 0 16px}.world-tabs button{font-size:10px}.playground{padding:44px 20px;gap:21px}.playground h2{font-size:35px}.playground-copy>p{font-size:14px;margin-top:15px}.mini-world-tabs{margin:19px 0 13px}.playground-copy p.world-status{font-size:12px}.playground-copy .button{min-height:43px;font-size:12px}#world-canvas{height:300px}#world-help{font-size:10px;margin-bottom:15px}.showcase-screen{aspect-ratio:4/3;border-top-right-radius:32px}.showcase-film img{object-fit:contain;background:#151126}.showcase-play-icon{width:56px;height:56px;font-size:17px;box-shadow:0 0 0 8px #ffffff20}.showcase-duration{bottom:16px;right:18px;font-size:10px}.showcase-bottom{padding-top:18px;align-items:flex-start;gap:14px}.showcase-bottom h3{font-size:21px;letter-spacing:-.6px;max-width:210px}.showcase-bottom>div>span{font-size:7px;letter-spacing:1px}.showcase-navigation{gap:7px}.showcase-navigation button{width:34px;height:34px;font-size:18px}.showcase-navigation>span{width:36px;font-size:8px}.coming-world{padding:25px}.coming-world h3{font-size:33px;letter-spacing:-1px}.coming-kicker{font-size:8px;letter-spacing:3px;margin-bottom:16px}.coming-world p{font-size:11px;max-width:190px;line-height:1.5}.coming-orbit span{font-size:25px}.coming-orbit span:nth-child(2){font-size:35px}.pricing-grid{gap:29px;margin-top:32px}.price-card{padding:25px}.price-card>p{min-height:0}.price-card ul{margin-block:20px}.create-section{padding:46px 20px;gap:24px}.create-intro h2{font-size:38px}.create-intro>p{font-size:14px;margin-top:12px}.creator{padding:24px;min-height:360px}.how-section{padding-block:43px}.how-section h2{font-size:33px}.steps-grid{gap:21px;margin-top:25px}.steps-grid article{position:relative;padding-left:49px}.step-number{position:absolute;left:0;top:0;border:0;padding:0;margin:0;font-size:27px}.steps-grid h3{font-size:18px;margin:0}.steps-grid p{font-size:13px;margin-top:8px}.faq-section{padding-block:43px;gap:18px}.faq-section h2{font-size:33px}.faqs summary{font-size:13px;padding-block:18px}.faqs details p{font-size:13px}footer{padding-block:25px}}
@media(prefers-reduced-motion:reduce){.coming-world:before,.coming-world:after,.coming-orbit span{animation:none}.showcase-film img,.showcase-play-icon{transition:none}.diagonal-wipe{display:none}}
/* Final visual system: violet, pearl and cool blue accents. */
:root{--lime:#d7caff;--accent:#e0d5ff}html{scroll-padding-top:95px}.hero,.hero[data-persona="1"],.hero[data-persona="2"]{--accent:#e0d5ff}.hero-copy h1>span{color:#e0d5ff}.yellow{background:#e0d5ff;color:#251743}.yellow:hover{background:#f0eaff}.pack-badge{background:#e0d5ff;color:#251743}.how-section{background:linear-gradient(125deg,#e8e3fa,#e2ecfa 60%,#f2e5f4)}.world-motion-controls button#world-surprise{background:#d8c9f5;border-color:#c7b6e8}.showcase-play-icon{background:#e0d5ff}.coming-kicker{color:#e0d5ff}.coming-orbit span{color:#e3d5ff}.diagonal-wipe i:nth-child(2){background:#ded2ff}.speech-word.speaking{color:#e0d5ff}.price-card li:before{content:'•';color:currentColor}button:focus-visible,a:focus-visible,summary:focus-visible,[tabindex]:focus-visible{outline-color:#ad8cff}
.header{position:fixed;top:0;padding:22px 4%;transition:padding .25s,background .25s,box-shadow .25s;min-height:84px}.header.scrolled{padding-block:13px;min-height:68px;background:#211839ed;backdrop-filter:blur(18px);box-shadow:0 1px 0 #ffffff16}.header .logo img{transition:width .25s,height .25s}.header.scrolled .logo img{width:150px;height:34px}.header.scrolled .nav-cta{min-height:40px;padding-block:8px}.header nav{gap:25px}.header .ui-arrow{width:19px;height:19px}
.ui-arrow{display:inline-block;width:22px;height:22px;flex:none;vertical-align:middle}.arrow-left{transform:rotate(180deg)}.casting-arrow,.showcase-navigation button{display:grid;place-items:center}.button .ui-arrow{width:21px;height:21px}.dialog-link .ui-arrow{width:20px;height:20px}.button span{font-size:inherit}
@media(min-width:761px){.character-stage{width:68%}.character-film video{object-position:13% center}.character-film{clip-path:polygon(24% 0,100% 0,100% 100%,0 100%)}.hero:before{clip-path:polygon(47% 0,64% 0,31% 100%,13% 100%)}}
.hero-sweep{position:absolute;inset:-5% -20%;display:flex;transform:skewX(-18deg);z-index:4;pointer-events:none;visibility:hidden}.hero-sweep i{flex:1;background:linear-gradient(135deg,#b8a1e7,#6d57aa);transform:translateY(110%)}.hero-sweep i:nth-child(2){background:linear-gradient(135deg,#e5dcfb,#afbcf2)}.switching .hero-sweep{visibility:visible}.switching .hero-sweep i{animation:character-shutter 1.1s cubic-bezier(.65,0,.35,1) both}.switching .hero-sweep i:nth-child(2){animation-delay:20ms}.switching .character-intro,.switching .casting-identity{animation:character-copy 1.1s ease both}
@keyframes character-shutter{0%{transform:translateY(110%)}37%,47%{transform:translateY(0)}100%{transform:translateY(-110%)}}@keyframes character-copy{0%,100%{opacity:1;translate:0 0}35%,45%{opacity:0;translate:0 8px}}
@media(max-width:760px){.header{padding:18px 20px;min-height:72px}.header.scrolled{padding:12px 20px;min-height:58px}.header.scrolled .logo img{width:116px;height:auto}.header nav[data-open=true]{top:58px;background:#211839f7}.character-film video{object-position:29% center}.character-intro{bottom:130px}.hero{min-height:680px}.casting-arrow .ui-arrow{width:20px;height:20px}.hero-sweep{inset:0 -30%}html{scroll-padding-top:78px}}
@media(prefers-reduced-motion:reduce){.switching .hero-sweep{display:none}.switching .character-intro,.switching .casting-identity{animation:none}.header,.header .logo img{transition:none}}
/* Approved palette: one consistent lime, violet and cobalt. No ochre/yellow accent. */
:root{--lime:#e4fa67;--accent:#e4fa67}.hero,.hero[data-persona="1"],.hero[data-persona="2"]{--accent:#e4fa67}.hero-copy h1>span,.speech-word.speaking{color:var(--lime)}.yellow,.pack-badge,.showcase-play-icon{background:var(--lime);color:#251743}.yellow:hover{background:#eefba3}.how-section{background:linear-gradient(115deg,#e4fa67,#d9f37a)}.world-motion-controls button#world-surprise{background:var(--lime);border-color:#d3e36b;color:#251743}.coming-kicker,.coming-orbit span{color:var(--lime)}.diagonal-wipe i:nth-child(2){background:var(--lime)}
/* One shared selection drives both the story and its interactive world. */
.world-panel{grid-template-columns:1.1fr 1fr;align-items:center;gap:24px;padding:35px 38px;border-radius:16px;min-height:480px}.world-panel .mini-world{grid-column:1;grid-row:1;width:100%}.world-copy{grid-column:2;grid-row:1;min-height:0;padding:20px 5px 20px 10px}.world-copy h3{font-size:38px}.world-panel #world-canvas{height:330px}.world-panel #world-help{color:#fff9;margin-bottom:10px}.world-panel .world-status{font-size:11px;color:#fff9;min-height:16px;margin-bottom:14px}.world-panel .world-motion-controls button{background:#ffffff1f;color:white;border-color:#ffffff50}.world-panel .world-motion-controls button:hover{background:#ffffff35}.world-panel .world-motion-controls .ui-arrow{width:17px;height:17px}.world-panel:after{clip-path:polygon(0 0,29% 0,70% 100%,0 100%)}.world-panel .world-fallback{inset:15px 0 90px}.world-tabs{margin-bottom:23px}.world-panel .world-copy .button{background:#fff;color:#251743}
/* FAQs: balanced cards under a shared heading, no empty side column. */
.faq-section{display:block;max-width:1100px;padding-block:70px}.faq-section>div:first-child{text-align:center;margin-bottom:32px}.faq-section h2{font-size:43px}.faqs{display:grid;grid-template-columns:1fr 1fr;gap:15px;align-items:start}.faqs details{border:1px solid #dcd5e9;background:#fff8;border-radius:14px;padding:0 23px}.faqs summary{padding:23px 0;font-size:15px;line-height:1.5;gap:20px;align-items:center}.faqs summary>span{flex:none;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#ebe5f7;color:#563b94;font-size:20px}.faqs details[open]{background:#fff;border-color:#c2b5dc}.faqs details p{padding:0 0 23px;font-size:14px;line-height:1.7;max-width:none;color:#655c76}.faqs details[open] summary>span{background:var(--lime);color:#251743}
@media(max-width:760px){.world-panel{display:flex;flex-direction:column;gap:0;padding:20px 21px 27px;min-height:0;border-radius:14px}.world-panel .mini-world{width:100%}.world-panel #world-canvas{height:280px}.world-panel .world-status{font-size:10px;margin-bottom:12px}.world-copy{padding:25px 0 0;min-height:0;width:100%}.world-copy h3{font-size:30px;margin-top:0}.world-copy>p{font-size:13px}.world-panel .world-copy .button{margin-top:19px}.world-motion-controls{gap:5px}.world-panel .world-motion-controls button{font-size:9px;padding:9px}.world-panel .world-motion-controls .turn-controls button{padding:0;width:31px;height:31px}.faq-section{padding-block:45px}.faq-section>div:first-child{text-align:left;margin-bottom:24px}.faq-section h2{font-size:34px}.faqs{grid-template-columns:1fr;gap:12px}.faqs details{padding:0 19px}.faqs summary{font-size:14px;padding:19px 0;gap:15px}.faqs details p{font-size:13px;padding-bottom:20px}}

/* Refined framing and reversible accordion motion. */
@media(min-width:761px){.character-stage{width:65%}.character-film video{object-position:0% center}}
@media(max-width:760px){.character-film video{object-position:25% center}}
.faqs details{transition:background .3s,border-color .3s}
.faqs summary{list-style:none}.faqs summary::-webkit-details-marker{display:none}
.faq-chevron{flex:none;color:#725d94;transition:transform .4s cubic-bezier(.22,1,.36,1),color .3s}
.faqs details[data-expanded=true] .faq-chevron{transform:rotate(180deg);color:#39225c}
@media(prefers-reduced-motion:reduce){.faq-chevron,.faqs details{transition:none}}

/* A single, tactile planet; no separate control bar. */
.world-panel #world-canvas{height:400px;touch-action:pan-y}
.world-panel .world-status{display:none}
.world-panel #world-help{margin:0 0 15px;color:#ffffffcc;font-size:12px}
@media(max-width:760px){.world-panel #world-canvas{height:320px}.world-panel .world-copy{padding-top:15px}}
/* A tactile alphabet for the story workshop. */
.price small{display:block;font-size:12px;font-weight:600;margin-bottom:6px}
.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.creator input:not([type=radio]),.creator textarea{width:100%;font:inherit;color:#302342;border:1px solid #d8cee6;border-radius:12px;padding:14px 16px;background:#fff;margin:8px 0 15px;box-sizing:border-box}
.creator textarea{resize:vertical;min-height:90px}.creator label{font-size:13px;font-weight:600}.optional{font-size:11px;font-weight:400;color:#716780}.contact-purpose{font-size:11px!important;line-height:1.6;color:#746782}.creator button:disabled{opacity:.5;cursor:not-allowed}.creator .result-note{margin-bottom:22px}.name-blocks{position:relative;min-height:132px;margin:5px 0 23px;border-bottom:1px solid #d6cbe5;border-radius:15px;background:radial-gradient(ellipse at bottom,#e9e1f5,transparent 70%);isolation:isolate}.blocks-empty{position:absolute;inset:40% 0 auto;text-align:center;font-size:12px!important;color:#9587a7}.letter-block{position:absolute;width:52px;height:52px;display:grid;place-items:center;border:4px solid #fff8;border-radius:9px;font:900 29px/1 Nunito,Arial,sans-serif;cursor:grab;touch-action:none;user-select:none;transform:rotate(var(--twist));box-shadow:0 6px 0 var(--edge),0 10px 12px #30234225;transition:box-shadow .18s,transform .18s;color:#392653}.letter-block:before{content:'';position:absolute;inset:3px;border:1px solid #ffffff80;border-radius:3px}.letter-block.lilac{background:#cbb3ee;--edge:#a68ac8}.letter-block.lime{background:#e4fa67;--edge:#b9ca57}.letter-block.coral{background:#ffa7ac;--edge:#cd7c91}.letter-block.blue{background:#a2d9ef;--edge:#78adc9}.letter-block.held{z-index:5;cursor:grabbing;transform:rotate(0) translateY(-3px) scale(1.06);box-shadow:0 7px 0 var(--edge),0 16px 20px #30234230}.letter-block:focus-visible{outline:3px solid #6042df;outline-offset:5px}.contact-purpose{margin:10px 0 20px}
@media(max-width:760px){.creator .form-actions{gap:15px;flex-wrap:wrap}.creator{padding:24px}.choice-grid span{min-height:104px}.letter-block{font-size:27px}}
@media(prefers-reduced-motion:reduce){.letter-block{transition:none}}
.toy-stage{border:0;background:radial-gradient(ellipse at 50% 90%,#dfd3ed 0,transparent 68%);margin-top:0;overflow:hidden}.toy-stage canvas{display:block;width:100%;cursor:grab;touch-action:none;border-radius:16px}.toy-stage canvas.grabbing{cursor:grabbing}.mobile-nav-cta,.menu-backdrop{display:none}
@media(max-width:760px){
 body.menu-open{overflow:hidden}.header:has(nav[data-open=true]){background:#211839;box-shadow:none}
 .header .menu-toggle{width:42px;height:42px;border:1px solid #ffffff35;border-radius:50%;align-items:center;gap:6px;background:#ffffff0c}
 .header .menu-toggle span{width:18px;height:1.5px}
 .header nav,.header nav[data-open=true],.header.scrolled nav[data-open=true]{display:flex;position:absolute;inset:calc(100% + 10px) 14px auto;max-height:calc(100svh - 105px);overflow-y:auto;flex-direction:column;align-items:stretch;gap:0;padding:17px 23px 23px;background:linear-gradient(145deg,#fcfaff,#e9e0fc);border:1px solid #fff9;border-radius:22px;box-shadow:0 18px 60px #10072540;color:#2c1d47;text-align:left;visibility:hidden;opacity:0;transform:translateY(-12px) scale(.98);transform-origin:top right;transition:opacity .25s,transform .35s cubic-bezier(.2,.8,.2,1),visibility .25s}
 .header nav[data-open=true],.header.scrolled nav[data-open=true]{visibility:visible;opacity:1;transform:none}
 .header nav a{display:flex;align-items:center;justify-content:space-between;padding:20px 0;border-bottom:1px solid #cfc2e3;font-size:21px;letter-spacing:-.6px;font-weight:600;line-height:1.3}
 .header nav a:after{display:none}.header nav a.mobile-nav-cta{display:flex;margin-top:21px;padding:17px 19px;border:0;border-radius:100px;background:var(--lime);color:#24163b;font-size:15px;letter-spacing:0}
 .menu-backdrop:not([hidden]){display:block;position:fixed;inset:0;z-index:19;background:#160d365e;backdrop-filter:blur(5px);border-radius:0;animation:menu-shade .25s both}
}
@keyframes menu-shade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.header nav{transition:none!important}.menu-backdrop{animation:none!important}}

.toy-stage[data-empty=true]:after{content:'Escribe su nombre y empieza a jugar.';position:absolute;inset:44% 10px auto;text-align:center;font-size:12px;color:#8a7a9e;pointer-events:none}

/* Responsive typography and a subject-aware video crop. */
.hero-copy{min-width:0;max-width:none;width:100%}
.hero-copy h1{font-size:clamp(42px,5vw,86px);line-height:1.06;letter-spacing:-.055em;white-space:nowrap}
.section-top h2,.create-intro h2,.faq-heading h2{text-wrap:balance}
.character-film video{object-position:var(--video-crop,35%) center}
@media(min-width:761px){
 .hero{grid-template-columns:40% 60%}
 .character-stage{width:64%}
 .hero-copy>p{max-width: min(100%,330px)}
 .character-intro{left:25%;right:7%}
 #character-speech{font-size:clamp(21px,2vw,32px);text-wrap:balance}
}
@media(min-width:761px) and (max-width:1100px){
 .hero-copy h1{font-size:clamp(37px,5vw,55px)}
 .hero-copy>p{font-size:14px;max-width:260px}
 .hero-actions .button{padding:16px 20px;font-size:13px}
 .character-intro{left:20%;right:6%}
 .character-stage .character-selector{left:22%;right:8%}
}
@media(max-width:760px){
 .hero-copy h1{font-size:clamp(36px,10.5vw,56px);max-width:none;letter-spacing:-.055em}
 .character-film{inset:90px 0 0}
 #character-speech{font-size:clamp(20px,5.6vw,27px);text-wrap:balance}
}

/* One clear reading order, with actions at the end of each step. */
.create-section{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:52px}
.create-intro,.creator{width:100%;max-width:780px;margin-inline:auto}
.create-intro h2{font-size:clamp(34px,3.6vw,44px);letter-spacing:-2px}
.create-intro>p{margin-top:10px;font-size:16px}
.creator{min-height:0;padding:28px 34px}
.creator-top{font-size:12px;letter-spacing:.5px}
.step-progress{margin:16px 0 24px}
.name-step,.contact-step{display:block}
.name-entry h3{margin-bottom:20px;font-size:26px}
.name-entry label,.contact-fields label{display:block;font-size:14px}
.name-entry input{margin-bottom:0!important}
.name-step .name-blocks{margin:0;min-width:0}
.name-next{justify-content:flex-end;margin-top:14px;padding-top:18px;border-top:1px solid #e2dbea}
.creator .form-actions .button{font-size:14px}
.choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px;gap:12px}
.choice-grid label>span{min-height:96px;font-size:13px;gap:7px}
.choice-grid b{font-size:15px}
.story-summary{padding:18px 20px;background:#eee8f8;border-radius:14px;margin-bottom:24px}
.story-summary h3{font-size:22px}.story-summary p{font-size:14px;color:var(--muted);line-height:1.5;margin-top:12px}
.story-summary .result-kicker,.story-summary #result-description,.story-summary .result-note{display:none}
.story-summary .selected-pack{padding:0;margin-top:10px;background:none}
.contact-pair{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.contact-fields .form-actions{margin-top:18px}
.contact-fields .save-status{margin-top:12px}
@media(max-width:760px){
 .create-section{padding:38px 20px;gap:20px}.creator{padding:22px}
 .creator-top{font-size:11px}.name-entry h3{font-size:23px}
 .contact-pair{grid-template-columns:minmax(0,1fr);gap:0}
 .name-next .button{width:100%}.choice-grid label>span{font-size:12px}.choice-grid b{font-size:14px}
}

@media(min-width:761px){.create-intro{display:flex;align-items:baseline;justify-content:space-between;gap:20px}.create-intro>p{font-size:14px;margin:0}.create-section{padding-block:40px}}
.contact-honey{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.privacy-choice{display:flex!important;align-items:flex-start;gap:.7rem;margin:.7rem 0 1rem;line-height:1.35;font-size:.88rem;cursor:pointer}
.privacy-choice input{width:1.15rem!important;min-width:1.15rem;height:1.15rem!important;margin:.1rem 0 0;accent-color:#21135c}
.contact-purpose a{color:inherit;text-decoration:underline;text-underline-offset:2px}
#contact-send[hidden],#contact-fallback[hidden]{display:none!important}
.privacy-choice[hidden]{display:none!important}