/* MOMO v11: continuous scenes. Reference motion, original MOMO artwork. */
:root{--paper:#faf7f1;--ink:#30241d;--accent:#bd2f23}
html{scroll-padding-top:60px}body{background:var(--paper)}
button,a{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,[role=button]:focus-visible{outline:3px solid var(--accent);outline-offset:6px}
.line-mask{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}.line-mask>span{display:block;will-change:transform}
.outfit-halo{position:absolute;width:65vmin;height:65vmin;left:50%;top:50%;transform:translate(-50%,-50%);border:1px solid #a92c2225;border-radius:50%;pointer-events:none}
.outfit-halo:after{content:'';position:absolute;inset:-10%;border:1px solid #a92c2212;border-radius:50%}
.outfit-word{position:absolute;left:7%;bottom:11%;font-size:clamp(45px,8vw,125px);font-weight:850;letter-spacing:-.06em;color:#a92920;pointer-events:none;line-height:1}
.outfit-heading{top:22%}.outfit-heading h2{font-size:clamp(35px,4.5vw,68px)}.outfit-assembly{cursor:pointer;z-index:3}
.char-eye{opacity:1!important;top:47.35%;width:7.05%;height:2.65%;background:#f7f1e9;border-radius:18% 20% 50% 50%;border:1px solid #302017;box-sizing:border-box;overflow:hidden;transition:none;transform:rotate(2deg)}
.char-eye.left{left:40.3%}.char-eye.right{left:52.65%;transform:rotate(-4deg)}
.char-eye i{right:auto;left:40%;top:-16%;width:57%;height:117%;background:#11120f;transform:translate(var(--gaze-x,0px),var(--gaze-y,0px));will-change:transform}
.char-eye i:after{width:20%;height:17%;left:24%;top:25%}
.character[data-expression=blink] .char-eye,.character[data-expression=wink] .char-eye.right{top:47.35%;height:2.65%;background:#d89550;box-shadow:inset 0 -.6px 0 #3d291a;border-top:0;border-left:0;border-right:0;border-bottom:2px solid #302017;border-radius:0 0 40% 40%}
.character[data-expression=wink] .char-eye.right i{display:none}
.character[data-expression=happy] .char-eye{background:#d89550;border:0;box-shadow:inset 0 2px 0 #302017;border-radius:60% 60% 15% 15%}
.character[data-expression=happy] .char-eye i{display:none}.character[data-expression=happy] .char-blush,.character[data-expression=wink] .char-blush{opacity:.38}
.char-blush{top:50.4%;filter:blur(2px);background:#db6c50}.char-smile{display:none}
/* A shared sticky stage carries the choice into the desktop scene. */
.companion-journey{position:relative;height:330svh;background:var(--paper)}
.journey-stage{height:100svh;min-height:620px;position:sticky;top:0;overflow:hidden;isolation:isolate}
.journey-stage>.meeting{position:absolute;inset:0;height:100%;min-height:0;padding:0}
.journey-stage>.desktop-section{position:absolute;inset:0;height:100%;min-height:0;padding:0;background:#e9eadf;visibility:hidden;overflow:hidden}
.meeting-character{top:-3%}.meeting .section-heading{z-index:4}.desktop-choice{z-index:5}.desktop-choice .monitor-shell{background:#535948}
.desktop-copy{position:absolute;top:11%;left:7%;width:27%;z-index:3}
.desktop-copy>small,.story-intro>small,.story-outro>small,.official-community small{font-size:11px;letter-spacing:.13em;color:var(--accent);font-weight:750}
.desktop-copy h2{font-size:clamp(38px,4.1vw,64px);line-height:1.16;letter-spacing:-.04em;margin:18px 0}.desktop-copy>p{font-size:13px;color:#615f51}
.demo-features{margin-top:27px;border-top:1px solid #353e332c}
.demo-features button{display:flex;width:100%;gap:17px;align-items:center;background:transparent;border:0;border-bottom:1px solid #353e332c;padding:15px 4px;font:inherit;font-size:15px;text-align:left;cursor:pointer;color:var(--ink);transition:color .2s,padding .2s}
.demo-features button span{font:10px monospace;color:#797a6d}.demo-features button i{font-style:normal;margin-left:auto;opacity:0}
.demo-features button[aria-pressed=true]{color:var(--accent);padding-left:12px;background:#fff8}.demo-features button[aria-pressed=true] i{opacity:1}
.desktop-preview{position:absolute;left:39%;top:13%;width:55%;height:64%;border:1px solid #4e514133;border-radius:15px;background:#f3efe6;box-shadow:0 25px 70px #2529191c;overflow:hidden;transform-origin:20% 65%;will-change:transform}
.desktop-chrome{height:37px;display:flex;justify-content:space-between;align-items:center;padding:0 17px;border-bottom:1px solid #4e514122;background:#f6f3ec;font-size:9px;letter-spacing:.1em;color:#797a6d}.desktop-chrome b{font-weight:500;font-size:10px}.desktop-world{position:relative;height:calc(100% - 37px);overflow:hidden;background:radial-gradient(ellipse at 70% 15%,#edeede,#c4c9ab)}
.desktop-wallpaper{position:absolute;left:8%;top:13%;color:#fcfcf0}.desktop-wallpaper>span{display:block;font-size:clamp(25px,3.6vw,60px);font-weight:850;letter-spacing:-.07em;line-height:1.05}.desktop-wallpaper>i{display:block;font-size:11px;font-style:normal;margin-top:18px;color:#576044}
.desktop-note{position:absolute;left:10%;bottom:20%;padding:20px 25px;transform:rotate(-6deg);background:#f7e5a9;box-shadow:3px 7px 12px #38412517;display:grid;gap:9px}.desktop-note small{font-size:10px}.desktop-note strong{font-size:19px;font-weight:500}.desktop-note span{position:absolute;right:12px;bottom:4px;font-size:30px;color:#ab4a35}
.demo-pet{position:absolute;height:83%;aspect-ratio:180/230;right:8%;bottom:6%;border:0;padding:0;background:transparent;cursor:pointer;transform-origin:50% 100%}.demo-pet canvas{display:block;width:100%;height:100%;object-fit:contain}
.demo-bubble{position:absolute;right:5%;bottom:12%;max-width:55%;margin:0;background:#fffdf4;border:1px solid #6a584030;border-radius:14px 14px 2px 14px;padding:10px 15px;font-size:12px;color:#514636;box-shadow:0 3px 10px #3634230a;pointer-events:none}
.desktop-dock{position:absolute;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:10px;padding:6px 9px;background:#fff5;border:1px solid #fffa;border-radius:12px}.desktop-dock span{display:grid;place-items:center;width:24px;height:24px;background:#fff9;border-radius:6px;font-size:13px;color:#636957}.desktop-dock span:last-child{background:#b63427;color:#fff}
.desktop-section .desktop-actions{position:absolute;left:39%;right:6%;bottom:9%;display:flex;gap:22px;align-items:center;flex-wrap:wrap}.desktop-preview-note{margin:0;font-size:10px;color:#797a6d}.desktop-actions .primary-action{padding:14px 25px;font-size:15px}.desktop-actions .text-action{font-size:12px}
/* Three views of one book: cover, spread, book on the work surface. */
.story-section{height:420svh;background:var(--paper)}.story-stage{position:sticky;top:0;height:100svh;min-height:600px;background:var(--paper);perspective:1800px;overflow:hidden;isolation:isolate}
.story-intro{position:absolute;left:9%;top:22%;width:36%;z-index:4}.story-intro h2{font-size:clamp(36px,4.3vw,66px);line-height:1.22;margin:22px 0;letter-spacing:-.055em}.story-intro p{font-size:17px;line-height:1.9;color:#796750}.story-intro>span{display:block;margin-top:50px;font-size:12px;color:#9b3829}
.story-book{position:absolute;left:57%;top:13%;height:76%;aspect-ratio:.73;transform:rotate(-16deg);transform-style:preserve-3d;perspective:1800px;z-index:3;will-change:transform}
.book-pages{position:absolute;inset:0;border:1px solid #b4a083;border-radius:5px 20px 20px 5px;padding:9px 12px 9px 3px;background:repeating-linear-gradient(90deg,#f4edde 0px,#f4edde 2px,#c9c1ae 3px,#eee5d5 4px);box-shadow:8px 15px 35px #42301b28}
.book-paper{position:relative;height:100%;padding:12% 10%;border-radius:0 12px 12px 0;background:linear-gradient(90deg,#ded5c0,#fffdf5 7%,#fffdf5 94%,#e9e1d2);text-align:center;display:flex;flex-direction:column;justify-content:center;color:#332416}
.book-paper>small{font-size:10px;letter-spacing:.13em;color:var(--accent)}.book-paper h3{font-size:clamp(25px,2.8vw,43px);line-height:1.2;margin:20px 0;font-family:Georgia,'Songti SC',serif}
.story-lines{position:static;min-height:0;margin:5px 0 0;padding:0;border:0;max-width:none;width:auto;background:none}.story-lines p{font-size:clamp(12px,1.2vw,18px);line-height:1.8;margin:13px 0}.book-page-number{position:absolute;bottom:5%;left:0;width:100%;font:9px monospace;letter-spacing:.2em;color:#9d8870}
.book-cover{position:absolute;inset:-3px 0 -3px -4px;transform-style:preserve-3d;transform-origin:0 50%;z-index:4;will-change:transform}
.cover-front,.cover-back{position:absolute;inset:0;backface-visibility:hidden;border-radius:5px 18px 18px 5px;overflow:hidden;border:1px solid #783428}
.cover-front{display:flex;flex-direction:column;padding:12% 10%;background:linear-gradient(100deg,#802f26,#aa4535 4%,#b5523e 65%,#9b3d30);color:#f7e6cc;box-shadow:inset 5px 0 10px #64251940,5px 5px 15px #4a231b20}
.cover-front:after{content:'';position:absolute;inset:11px;border:1px solid #dfaa7638;border-radius:3px 10px 10px 3px;pointer-events:none}.cover-front>small{font-size:10px;letter-spacing:.18em}.cover-front>strong{font-size:clamp(60px,7.5vw,110px);font-weight:850;letter-spacing:-.075em;line-height:1;margin-top:18%}.cover-front>span{font-size:12px;letter-spacing:.15em;margin-top:12px}.cover-label{padding:14px 20px;background:#f4e7ce;color:#654b35;width:85%;margin-top:auto;font-size:14px;line-height:1.8;border:1px solid #76503060;transform:rotate(-3deg)}.cover-front i{align-self:flex-end;font-style:normal;font-size:35px;margin-top:14%}
.cover-back{transform:rotateY(180deg);background:#c09d76;border-radius:18px 5px 5px 18px;padding:8%;box-shadow:inset -9px 0 20px #56371633}.cover-back img{width:100%;height:100%;object-fit:cover;object-position:66% center;border:7px solid #fff7e4;transform:rotate(-2deg)}
.story-surface{position:absolute;inset:0;background:#d4d6b6;z-index:0;transform:translateY(100%);border-top:1px solid #858c6555}.story-surface:before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent 59px,#fefff016 60px),repeating-linear-gradient(0deg,transparent 0,transparent 59px,#fefff016 60px)}.story-surface>span{position:absolute;left:8%;bottom:8%;font:10px monospace;letter-spacing:.15em;color:#60684a}.story-outro{position:absolute;z-index:4;left:8%;top:36%;width:32%;visibility:hidden}.story-outro h2{font-size:clamp(30px,3.8vw,58px);margin:20px 0;letter-spacing:-.06em}.story-outro p{font-size:17px;line-height:1.8;margin-bottom:28px}
/* Objects share one quiet display field leading into the invitation. */
.presale{background:#f1f0e9;overflow:hidden;padding-top:105px}.presale .section-heading h2{font-size:clamp(35px,4.4vw,68px);letter-spacing:-.055em}.product-stage{isolation:isolate}.product-stage:before{content:'MOMO';position:absolute;top:35%;left:50%;transform:translateX(-50%);font-size:clamp(100px,17vw,270px);font-weight:850;letter-spacing:-.08em;color:#e0dfd6;z-index:-1}
.presale-grid{position:relative}.price-block,.progress-block,.presale-right article{background:none}.presale-footer{border-top:1px solid #65594730}.product-hat,.product-socks,.product-pearl{will-change:transform}
.finale{height:350svh;background:#f1f0e9}.finale-stage{background:#f1f0e9;min-height:600px}.carry-message h2{font-size:clamp(50px,7vw,108px);letter-spacing:-.065em;line-height:1.08}.carry-message{top:17%;left:8%;z-index:3}.carry-basket{width:67%;right:-5%;bottom:0;filter:none}.gather-items .cap{top:12%;right:10%;width:18%}.gather-items .sock{left:42%;bottom:9%;width:12%}.gather-items .pearl{right:8%;bottom:20%;width:6%}
.invitation-scene{background:var(--paper)}.invite-window{border-radius:0;background:transparent;box-shadow:none;border:0}.invite-header{border:0;background:none}.invite-body{background:none}.invite-footer{background:var(--accent);color:#fff9eb;border-radius:999px;margin-top:20px}.invite-footer strong{font-size:27px}.invite-footer small{font-size:10px}.invitation-side h2{font-size:clamp(40px,5vw,76px);letter-spacing:-.06em}.invite-window .peek-momo{bottom:-24%;right:-28%;width:43%}.click-hand{display:none}
.official-community{position:relative;background:var(--paper);padding:95px 8%;display:grid;grid-template-columns:1fr 1.3fr;gap:7%;border-top:1px solid #71645125}.official-community h2{font-size:clamp(25px,3vw,45px);line-height:1.3;letter-spacing:-.04em;margin-top:20px}.official-codes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}.official-channel{text-align:center}.official-channel img{width:100%;aspect-ratio:1;object-fit:contain;background:#fff;padding:10px}.official-channel strong{display:block;font-size:13px;margin-top:12px}.official-channel .qr-pending{display:flex;align-items:center;justify-content:center;aspect-ratio:1;border:1px solid #77695333;background:#f1ede4;font-size:11px;color:#897a66}.official-channel a{font-size:11px;display:block;margin-top:8px}.site-footer{background:var(--paper)}
@media(max-width:900px){.desktop-copy{left:6%;width:29%}.desktop-copy h2{font-size:39px}.demo-features button{padding:12px 3px;font-size:13px}.desktop-section .desktop-actions{gap:12px}.desktop-note{padding:13px}.book-paper h3{font-size:30px}.story-lines p{font-size:13px}.story-book{height:64%;top:19%}}
@media(max-width:700px){
 .outfit-word{font-size:44px;bottom:12%;left:7%}.outfit-heading{top:8%}.outfit-heading h2{font-size:28px}.outfit-halo{width:86vw;height:86vw}.outfit-assembly{top:max(110px,14svh)}
 .companion-journey{height:340svh}.journey-stage{height:100svh;min-height:540px}.meeting .section-heading{top:9%}.meeting-character{width:80%;left:20%;top:17%}.story-choice{bottom:9%}.desktop-choice{top:47%}.touch-note{bottom:5%}
 .desktop-copy{top:9%;left:6%;width:88%;display:grid;grid-template-columns:1fr 1.08fr;gap:0 14px}.desktop-copy>small{grid-column:1/-1;font-size:9px}.desktop-copy h2{font-size:31px;margin:12px 0;align-self:start}.desktop-copy>p{display:none}.demo-features{grid-column:2;grid-row:2;margin:6px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:0 10px}.demo-features button{font-size:10px;gap:5px;padding:10px 0}.demo-features button span{font-size:8px}.demo-features button i{display:none}.demo-features button[aria-pressed=true]{padding-left:3px}
 .desktop-preview{left:6%;top:35%;width:88%;height:43%;border-radius:12px}.desktop-chrome{height:28px;padding:0 10px;font-size:7px}.desktop-chrome b{font-size:8px}.desktop-world{height:calc(100% - 28px)}.desktop-wallpaper>span{font-size:31px}.desktop-wallpaper>i{font-size:8px;margin-top:9px}.desktop-note{padding:10px;left:8%;bottom:21%}.desktop-note small{font-size:8px}.desktop-note strong{font-size:14px}.demo-pet{right:1%;height:86%}.demo-bubble{font-size:10px;padding:7px 10px;right:4%;bottom:15%}.desktop-dock{bottom:5px;padding:4px 6px;gap:6px}.desktop-dock span{width:18px;height:18px;font-size:10px}
 .desktop-section .desktop-actions{left:6%;right:6%;bottom:10%;gap:15px}.desktop-actions .primary-action{font-size:12px;padding:12px 17px}.desktop-actions .text-action{font-size:11px}.desktop-preview-note{width:100%;font-size:9px}
 .story-section{height:360svh}.story-stage{min-height:540px}.story-intro{left:8%;top:10%;width:83%}.story-intro h2{font-size:32px;margin:15px 0}.story-intro p{font-size:13px}.story-intro>span{font-size:10px;margin-top:18px}.story-book{left:35%;top:44%;height:51%;max-width:78vw}.cover-front>strong{font-size:62px}.cover-front>small{font-size:8px}.cover-front>span{font-size:9px}.cover-label{font-size:10px;padding:8px 11px}.cover-front i{font-size:22px}.book-paper{padding:8%}.book-paper>small{font-size:7px}.book-paper h3{font-size:22px;margin:12px 0}.story-lines p{font-size:10px;margin:10px 0;line-height:1.7}.book-page-number{font-size:7px}.story-outro{left:8%;top:13%;width:85%}.story-outro h2{font-size:29px;margin:15px 0}.story-outro p{font-size:13px}.story-outro .text-action{font-size:11px}.story-surface>span{font-size:8px;bottom:5%}
 .presale{padding-top:70px}.presale .section-heading h2{font-size:31px}.presale-grid{min-height:0}.product-stage:before{font-size:110px}.finale{height:310svh}.finale-stage{min-height:540px}.carry-message{top:13%;left:8%}.carry-message h2{font-size:48px}.carry-basket{width:140%;right:-29%;bottom:7%}.gather-items .cap{width:26%;right:5%;top:16%}.gather-items .sock{width:20%;left:8%;bottom:21%}.gather-items .pearl{width:10%;right:8%;bottom:28%}
 .invitation-scene{padding:65px 6% 20px}.invitation-side h2{font-size:28px}.invitation-side h2 br{display:none}.invitation-side p{font-size:11px}.invite-window{width:85%;margin:0}.invite-header{padding:12px}.invite-header h3{font-size:19px}.invite-header p{font-size:11px}.invite-props{height:95px}.invite-footer{padding:12px 15px;margin-top:12px}.invite-footer strong{font-size:22px}.invite-footer small{font-size:8px}.invite-window .peek-momo{right:-25%;bottom:-22%;width:45%}.invite-body>small{font-size:9px}.invite-body{padding-bottom:10px}
 .official-community{padding:60px 7%;grid-template-columns:1fr;gap:30px}.official-community h2{font-size:28px}.official-community h2 br{display:none}.official-codes{gap:12px}.official-channel strong{font-size:11px}.official-channel .qr-pending{font-size:9px}
}
@media(max-width:700px) and (max-height:650px){.desktop-copy{top:11%}.desktop-copy h2{font-size:25px}.demo-features button{padding:7px 0}.desktop-preview{top:36%;height:41%}.desktop-section .desktop-actions{bottom:7%;gap:8px}.story-intro h2{font-size:27px}.story-book{height:47%;top:48%}.invitation-scene{padding-top:52px}.invite-props{height:65px}.invite-header{padding:7px}.invite-footer{padding:8px}.invite-body h3{font-size:20px}.invite-goal em{font-size:26px}.invitation-side{margin-bottom:6px}}
@media(prefers-reduced-motion:reduce){.companion-journey,.story-section{height:auto}.journey-stage{height:auto;position:relative;overflow:visible}.journey-stage>.meeting{position:relative;min-height:760px}.journey-stage>.desktop-section{position:relative;visibility:visible;height:850px}.story-stage{position:relative;height:900px;perspective:none}.story-intro{top:8%}.story-book{top:38%;height:50%;left:51%;transform:rotate(0);max-width:44vw}.book-cover{transform:rotateY(-170deg)}.story-outro{display:none}.outfit-word{display:none}.finale-stage{height:auto;min-height:1000px}.invitation-scene{position:relative;visibility:visible;opacity:1}.carry-message,.carry-basket,.gather-items{display:none}.line-mask>span{transform:none!important}.char-eye i{will-change:auto}}

@media(max-width:700px){.desktop-section .desktop-actions{top:81%;bottom:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px}.desktop-actions .desktop-preview-note{flex-basis:100%}.invite-footer small{color:#fff3dc}}
@media(max-width:700px){.book-paper{padding:6% 7% 12%;justify-content:center}.book-paper h3{font-size:16px;line-height:1.25;margin:8px 0}.book-paper .story-lines p{font-size:9px;line-height:1.55;margin:5px 0}.book-paper>small{font-size:6px}.book-page-number{font-size:6px;bottom:4%}}
.motion-fallback .companion-journey{height:auto}.motion-fallback .journey-stage{position:relative;height:auto;overflow:visible}.motion-fallback .journey-stage>.meeting{position:relative;height:100svh;min-height:720px}.motion-fallback .journey-stage>.desktop-section{position:relative;visibility:visible;height:850px}.motion-fallback .story-section{height:auto}.motion-fallback .story-stage{position:relative}.motion-fallback .outfit-layer{visibility:visible}
.char-eye i{transition:transform .12s ease-out}
@media(prefers-reduced-motion:no-preference) and (pointer:fine){.product-hat{translate:calc(var(--pointer-x,0)*15px) calc(var(--pointer-y,0)*10px)}.product-socks{translate:calc(var(--pointer-x,0)*-11px) calc(var(--pointer-y,0)*-8px)}.gather-items{translate:calc(var(--pointer-x,0)*12px) calc(var(--pointer-y,0)*8px)}}
@media(max-width:360px){.book-paper h3{font-size:13px;line-height:1.25;margin:6px 0}.book-paper .story-lines p{font-size:8.5px;line-height:1.45;margin:4px 0}.book-paper .story-lines{flex-shrink:0;margin-top:3px}}