/* Original guideline artwork, placed in an open natural scene. */
.mot-world{--mot-leaf:#425f32;--mot-paper:#fffdf4;position:relative;isolation:isolate;display:grid;grid-template-columns:.9fr 1.15fr;align-items:center;gap:clamp(36px,6vw,100px);min-height:0;padding-top:118px;padding-bottom:100px;background:var(--lemon,#fcf000);overflow:clip}
.mot-world::after{content:'';position:absolute;left:0;right:0;bottom:0;height:75px;background-image:radial-gradient(circle,#425f32 1px,transparent 1.4px);background-size:11px 11px;mask-image:linear-gradient(transparent,#000);opacity:.12;z-index:-1;pointer-events:none}
.mot-world-copy{min-width:0}.mot-world-copy>.eyebrow{margin-bottom:24px;color:var(--mot-leaf)}.mot-world-copy h2{font-size:clamp(45px,5vw,74px);max-width:9.5em;line-height:1.12;letter-spacing:-.02em}.mot-world-copy>.mot-world-intro{font-size:14px;line-height:1.95;max-width:43ch;margin-top:27px;color:#34422b}
.mot-world-traits{display:flex;flex-wrap:wrap;gap:9px;padding:0;margin:28px 0 26px;list-style:none}.mot-world-traits li{border:1px solid rgba(66,95,50,.45);padding:8px 12px;border-radius:25px;font-size:10px;line-height:1.6;background:rgba(255,253,244,.35);color:#34422b}.mot-world-copy>.text-link{color:var(--mot-leaf);font-size:12px;gap:24px}.mot-world-copy>.text-link span:last-child{font-size:22px}
.mot-world-playground{width:100%;min-width:0}.mot-world-stage{position:relative;height:520px;isolation:isolate}.mot-world-backdrop{position:absolute;inset:106px 0 27px;background:#e5edcf;border:1px solid rgba(66,95,50,.38);border-radius:48% 52% 43% 57% / 47% 39% 61% 53%;transform:rotate(-7deg);transition:background-color .25s ease;z-index:0}.mot-world-stage[data-mood=love] .mot-world-backdrop{background:#f1e9cf}.mot-world-stage[data-mood=wave] .mot-world-backdrop{background:#d8edf0}
.mot-world-name{position:absolute;top:15px;left:-3%;font:700 clamp(80px,8.7vw,132px)/1.1 var(--display);letter-spacing:.015em;color:var(--mot-paper);-webkit-text-stroke:1px rgba(66,95,50,.65);transform:rotate(-8deg);z-index:1}.mot-world-character-slot{position:absolute;inset:-13px 17% 58px;z-index:3}.mot-world-character-button{display:block;width:100%;height:100%;padding:0;border:0;background:transparent;cursor:pointer;border-radius:45%;touch-action:manipulation;transform-origin:50% 95%}.mot-world .mot-world-character-button:focus-visible{outline:3px solid var(--mot-leaf);outline-offset:8px}.mot-world #mot-character{width:100%;height:100%;max-width:none;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 11px 0 rgba(43,25,0,.10));pointer-events:none}
.mot-world-ground{position:absolute;left:28%;right:27%;bottom:42px;height:20px;border-radius:50%;background:rgba(66,95,50,.13);filter:blur(4px);z-index:1}.mot-world-friend{position:absolute;height:auto;object-fit:contain;z-index:2;pointer-events:none}.mot-world-friend--left{width:17%;top:149px;left:-1%;transform:rotate(-13deg)}.mot-world-friend--right{width:14%;top:84px;right:-1%;transform:rotate(12deg)}.mot-world-fruits{position:absolute;width:49%;height:auto;bottom:0;right:-7%;z-index:4;pointer-events:none}
.mot-world-reply{position:relative;margin:7px auto 0;padding:14px 20px;width:fit-content;max-width:36ch;min-height:53px;border:1.5px solid var(--mot-leaf);border-radius:18px 18px 18px 4px;background:var(--mot-paper);color:var(--mot-leaf);font-size:13px;line-height:1.75;font-weight:600;text-align:center;transform:rotate(-2deg);box-shadow:3px 3px 0 rgba(66,95,50,.18);z-index:5}
.mot-world .mot-moods{margin-top:26px;text-align:center}.mot-world .mot-moods>p:first-child{margin:auto;font-size:12px;font-weight:600;color:#34422b}.mot-world .mot-mood-buttons{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:13px}.mot-world .mot-mood-buttons button{padding:11px 15px;min-height:44px;background:var(--mot-paper);border:1.5px solid var(--mot-leaf);border-radius:25px;font-size:10px;line-height:1.7;font-weight:600;color:var(--mot-leaf);box-shadow:none;transition:background-color .18s ease,color .18s ease}.mot-world .mot-mood-buttons button[aria-pressed=true]{background:var(--mot-leaf);border-color:var(--mot-leaf);color:white;box-shadow:2px 2px 0 var(--mot-paper)}.mot-world .mot-mood-buttons button:hover{transform:none;background:#edf1de;color:var(--mot-leaf)}.mot-world .mot-mood-buttons button[aria-pressed=true]:hover{background:#2c4423;color:white}.mot-world .mot-world-hint{font-size:10px;line-height:1.8;max-width:45ch;color:#536a43;margin:17px auto 0}
@media(max-width:1100px){.mot-world{grid-template-columns:.9fr 1.15fr;gap:32px;padding-top:95px;padding-bottom:80px}.mot-world-copy h2{font-size:54px}.mot-world-copy>.mot-world-intro{font-size:13px}.mot-world-traits{gap:7px}.mot-world-traits li{font-size:9px;padding:7px 10px}.mot-world-stage{height:460px}.mot-world-name{font-size:99px}.mot-world-character-slot{inset:-9px 14% 50px}.mot-world-backdrop{top:95px}.mot-world-friend--left{top:140px}.mot-world-friend--right{top:80px}.mot-world .mot-mood-buttons button{padding:10px 12px;font-size:9px}}
@media(max-width:900px){.mot-world{grid-template-columns:1fr;gap:42px}.mot-world-copy h2{max-width:12em}.mot-world-copy>.mot-world-intro{max-width:62ch}.mot-world-traits{margin:23px 0 14px}.mot-world-playground{max-width:590px;margin:auto}.mot-world-stage{height:500px}.mot-world-character-slot{inset:-10px 17% 56px}.mot-world-name{font-size:115px}.mot-world-backdrop{top:104px}.mot-world .mot-mood-buttons button{font-size:11px;padding:11px 17px}}
@media(max-width:600px){.mot-world{display:flex;flex-direction:column;align-items:stretch;gap:30px;padding-top:68px;padding-bottom:67px}.mot-world-copy>.eyebrow{margin-bottom:20px}.mot-world-copy h2{font-size:44px;max-width:10em}.mot-world-copy>.mot-world-intro{margin-top:22px;font-size:13px;line-height:1.9;max-width:38ch}.mot-world-traits{margin:21px 0 12px;gap:7px}.mot-world-traits li{font-size:9px;padding:7px 10px}.mot-world-copy>.text-link{font-size:11px}.mot-world-playground{max-width:none}.mot-world-stage{height:380px}.mot-world-backdrop{inset:89px 0 23px}.mot-world-name{font-size:79px;top:7px;left:-2%}.mot-world-character-slot{inset:-8px 15% 43px}.mot-world-ground{bottom:29px;height:15px}.mot-world-friend--left{top:123px;left:-1%;width:17%}.mot-world-friend--right{top:72px;right:-1%;width:14%}.mot-world-fruits{width:48%;right:-4%;bottom:1px}.mot-world-reply{font-size:12px;max-width:32ch;min-height:49px;padding:12px 16px;margin-top:6px}.mot-world .mot-moods{margin-top:23px}.mot-world .mot-moods>p:first-child{font-size:12px}.mot-world .mot-mood-buttons{gap:7px;margin-top:12px}.mot-world .mot-mood-buttons button{font-size:9px;padding:11px 12px}.mot-world .mot-world-hint{font-size:10px;margin-top:15px;max-width:34ch}}
@media(max-width:360px){.mot-world-copy h2{font-size:38px}.mot-world-stage{height:335px}.mot-world-name{font-size:70px}.mot-world-character-slot{inset:-5px 14% 38px}.mot-world-backdrop{top:80px}.mot-world-friend--left{top:108px}.mot-world-friend--right{top:66px}.mot-world .mot-mood-buttons button{padding:10px;font-size:8px}.mot-world-reply{max-width:30ch}}
@media(prefers-reduced-motion:reduce){.mot-world *,.mot-world *::before,.mot-world *::after{animation:none!important;transition:none!important}}
html[data-motion=paused] .mot-world *,html[data-motion=paused] .mot-world *::before,html[data-motion=paused] .mot-world *::after{animation:none!important;transition:none!important}

/* V5: a small garden, distinct gestures, and original pose thumbnails. */
.mot-world-look{width:100%;height:100%;transform:translate3d(var(--mot-look-x,0px),var(--mot-look-y,0px),0) rotate(var(--mot-look-rotation,0deg));transform-origin:50% 90%;transition:transform 180ms ease-out}
.mot-world .mot-world-character-button{transform-origin:50% 94%}
.mot-world-sprig{position:absolute;left:-3%;bottom:17px;width:27%;height:auto;z-index:2;pointer-events:none;transform:rotate(-8deg)}
.mot-world-bloom{position:absolute;right:3%;bottom:104px;width:17%;height:auto;z-index:2;pointer-events:none;transform:rotate(12deg)}
.mot-world-paper{position:absolute;right:1%;bottom:23px;z-index:4;display:flex;gap:10px;align-items:center;max-width:22ch;padding:13px 17px;background:var(--mot-paper);border:1px solid #87936b;border-radius:3px;box-shadow:3px 4px 0 rgba(66,95,50,.13);color:#425f32;font-size:10px;line-height:1.6;font-weight:600;transform:rotate(-6deg);pointer-events:none}
.mot-world-paper>svg{width:24px;height:28px;flex-shrink:0}
.mot-world-affection{position:absolute;inset:0;z-index:5;pointer-events:none}
.mot-world-heart{position:absolute;width:12px;height:12px;background:#d67d6c;transform:rotate(45deg);opacity:0}
.mot-world-heart::before,.mot-world-heart::after{content:'';position:absolute;width:100%;height:100%;background:inherit;border-radius:50%}
.mot-world-heart::before{left:-50%;top:0}.mot-world-heart::after{top:-50%;left:0}
.mot-world-heart:nth-child(1){left:26%;top:27%}.mot-world-heart:nth-child(2){right:24%;top:19%;width:9px;height:9px}.mot-world-heart:nth-child(3){right:18%;top:36%;width:10px;height:10px}
.mot-world .mot-world-reply{min-height:68px;display:grid;place-items:center}
.mot-world .mot-mood-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:510px;margin:14px auto 0;align-items:stretch}
.mot-world .mot-mood-buttons button{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0;min-height:104px;padding:11px 10px 12px;border-radius:17px;font-size:11px;line-height:1.6;transition:background-color .18s ease,color .18s ease,transform .18s ease}
.mot-world .mot-mood-buttons button>span[data-i18n]{min-height:1.6em}
.mot-world .mot-mood-buttons button:hover{transform:translateY(-2px)}
.mot-world .mot-mood-portrait{width:52px;height:52px;display:block;overflow:hidden;border-radius:50%;border:1px solid rgba(66,95,50,.3);background:#fffdf4;margin:0 auto 7px;flex-shrink:0;pointer-events:none}
.mot-world .mot-mood-portrait>img{display:block;width:100%;height:auto;max-width:none;transform:scale(1.35);transform-origin:50% 5%;pointer-events:none}
.mot-world .mot-mood-buttons button[aria-pressed=true] .mot-mood-portrait{border-color:#fcf000;box-shadow:0 0 0 1px #fcf000}
.mot-world .mot-world-hint{font-size:11px;line-height:1.8;max-width:46ch}
@media(max-width:1100px){.mot-world .mot-mood-buttons{gap:8px}.mot-world .mot-mood-buttons button{font-size:10px;min-height:100px;padding:10px 8px}.mot-world .mot-mood-portrait{width:48px;height:48px}.mot-world-paper{font-size:9px;padding:11px 13px;max-width:20ch}.mot-world-bloom{bottom:93px}}
@media(max-width:900px){.mot-world .mot-mood-buttons{max-width:480px;gap:10px}.mot-world .mot-mood-buttons button{font-size:11px;min-height:106px;padding:11px}.mot-world .mot-mood-portrait{width:52px;height:52px}.mot-world-paper{font-size:10px;padding:13px 17px}.mot-world .mot-world-hint{max-width:45ch}}
@media(max-width:600px){.mot-world .mot-mood-buttons{gap:8px;margin-top:13px}.mot-world .mot-mood-buttons button{font-size:9px;min-height:95px;padding:9px 6px 10px;border-radius:15px}.mot-world .mot-mood-portrait{width:44px;height:44px;margin-bottom:6px}.mot-world-sprig{left:-2%;width:25%;bottom:15px}.mot-world-bloom{right:1%;width:16%;bottom:87px}.mot-world-paper{right:0;bottom:18px;font-size:8px;padding:10px 11px;max-width:18ch;gap:7px}.mot-world-paper>svg{width:18px;height:23px}.mot-world .mot-world-reply{font-size:12px;min-height:66px;padding:12px 16px}.mot-world .mot-world-hint{font-size:10px;max-width:38ch}.mot-world-heart:nth-child(1){left:24%;top:28%}.mot-world-heart:nth-child(2){right:22%;top:19%}.mot-world-heart:nth-child(3){right:15%;top:36%}}
@media(max-width:360px){.mot-world .mot-mood-buttons{gap:6px}.mot-world .mot-mood-buttons button{font-size:8px;padding:8px 5px;min-height:91px}.mot-world .mot-mood-portrait{width:42px;height:42px}.mot-world-paper{font-size:7px;padding:9px;max-width:17ch}.mot-world-bloom{bottom:80px}.mot-world .mot-world-hint{max-width:34ch}}
@media(prefers-reduced-motion:reduce){.mot-world-look{transform:none!important}.mot-world .mot-mood-buttons button:hover{transform:none!important}}
html[data-motion=paused] .mot-world-look,html[data-motion=paused] .mot-world .mot-mood-buttons button:hover{transform:none!important}
/* Leave enough room for Vietnamese words on the small garden note. */
.mot-world-paper{min-width:160px;max-width:190px}
@media(max-width:600px){.mot-world-paper{min-width:126px;max-width:145px;font-size:9px}}
@media(max-width:360px){.mot-world-paper{min-width:118px;max-width:130px;font-size:8px}}
