/* Only the home introduction, painted scene and its public role reader. */
.hm-home-hero{--hm-hero-paper:#fff8ec;position:relative;isolation:isolate;flex:none;padding-bottom:18px}
.home-intro{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);align-items:center;gap:8px;padding:6px 0 0}
.home-intro>.welcome-title{text-align:left;min-width:0;padding:8px 0 18px;isolation:isolate;text-shadow:0 2px 10px var(--hm-hero-paper)}
.home-intro>.welcome-title::before{content:"";position:absolute;inset:-10px -18px -8px -12px;z-index:-1;background:radial-gradient(ellipse at 25% 40%,var(--hm-hero-paper) 32%,transparent 75%);pointer-events:none}
.home-intro>.welcome-title h1{font-size:clamp(22px,6.1vw,29px);line-height:1.3;overflow-wrap:anywhere;margin-bottom:7px}
.home-intro>.welcome-title p{font-size:12px;letter-spacing:0;margin-bottom:6px}
.home-intro>.welcome-title>span{font-size:12px;line-height:1.5;display:block}
.hm-role-showcase{min-width:0;position:relative;container-type:inline-size}
.hm-role-showcase::before{content:"";position:absolute;bottom:-4px;left:3%;width:94%;height:28px;border-radius:50%;background:radial-gradient(ellipse,#85652e50,transparent 70%);filter:blur(5px);pointer-events:none}
.hm-carousel{position:relative;height:calc(min(108px,48cqw) * 1.5 + 18px);perspective:700px;touch-action:pan-y;user-select:none;isolation:isolate;border-radius:16px;--hm-card-width:min(108px,48cqw);--hm-side-shift:min(48px,23cqw);overflow:clip}
.hm-role-card{position:absolute;left:50%;top:3px;width:var(--hm-card-width);padding:0;border:0;border-radius:9px;background:transparent;transform-origin:50% 80%;transition:transform .42s cubic-bezier(.22,.7,.25,1),opacity .35s;box-shadow:0 5px 14px #1b2a252b;min-height:0;cursor:pointer;z-index:3;transform:translateX(-50%)}
.hm-role-card>.named-role-art{width:100%;height:auto;aspect-ratio:2/3;border-radius:9px;outline:1px solid #d4b46780;outline-offset:-1px}
.hm-role-card[data-position="0"]{transform:translateX(-50%) translateZ(18px);z-index:3;opacity:1;box-shadow:0 10px 18px #253b304d,0 0 8px #e6b85330}
.hm-role-card[data-position="-1"]{transform:translateX(calc(-50% - var(--hm-side-shift))) translateY(10px) rotate(-9deg) rotateY(12deg) scale(.82);z-index:2;opacity:.93}
.hm-role-card[data-position="1"]{transform:translateX(calc(-50% + var(--hm-side-shift))) translateY(10px) rotate(9deg) rotateY(-12deg) scale(.82);z-index:2;opacity:.93}
.hm-role-card[data-position="-2"]{transform:translateX(calc(-50% - var(--hm-side-shift) * 1.45)) translateY(16px) rotate(-16deg) scale(.65);z-index:1;opacity:0;pointer-events:none}
.hm-role-card[data-position="2"]{transform:translateX(calc(-50% + var(--hm-side-shift) * 1.45)) translateY(16px) rotate(16deg) scale(.65);z-index:1;opacity:0;pointer-events:none}
.hm-role-card::before{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--c-action,#f1c66b);border-radius:9px;box-shadow:0 0 7px color-mix(in srgb,var(--c-action,#f1c66b) 65%,transparent);opacity:.35;pointer-events:none}
.hm-role-card[data-position="0"]::before{animation:hm-card-aura 3.2s ease-in-out infinite}
.hm-role-card::after{content:"";position:absolute;inset:1px 1px 17%;z-index:2;border-radius:8px;background:linear-gradient(110deg,transparent 40%,color-mix(in srgb,var(--c-action,#f1c66b) 12%,transparent) 46%,#fff9 50%,transparent 56%) 160% 0/250% 100% no-repeat;opacity:0;pointer-events:none}
.hm-role-card[data-position="0"]::after{animation:hm-card-shine 2s ease-out infinite}
.hm-card-glints{position:absolute;inset:0;pointer-events:none;z-index:4;color:var(--c-action,#f1c66b)}
.hm-card-glints>span{position:absolute;width:9px;height:9px;filter:drop-shadow(0 0 3px currentColor);animation:hm-card-twinkle 3.2s ease-in-out infinite;opacity:0}
.hm-card-glints>span::before,.hm-card-glints>span::after{content:"";position:absolute;background:currentColor;border-radius:50%}
.hm-card-glints>span::before{left:4px;top:0;width:1px;height:9px}.hm-card-glints>span::after{left:0;top:4px;width:9px;height:1px}
.hm-card-glints>span:nth-child(1){left:27%;top:12%;animation-delay:-.4s}.hm-card-glints>span:nth-child(2){right:23%;top:60%;animation-delay:-1.8s}.hm-card-glints>span:nth-child(3){right:44%;top:2%;animation-delay:-2.7s}
.home-intro:not([data-running=true]) .hm-role-card::before{animation:none}
.home-intro:not([data-running=true]) .hm-role-card::after,.home-intro:not([data-running=true]) .hm-card-glints>span{animation:none;opacity:0}
.hm-carousel:focus-visible,.hm-role-card:focus-visible{outline:3px solid var(--c-focus,#2f7755);outline-offset:4px}
.hm-sr{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hm-scene{container-type:size;isolation:isolate;display:flex;align-items:center;justify-content:center}
.hm-home-hero>.hm-scene{--hm-top-fade:96px;position:relative;z-index:1;margin:-96px -4px 0;border:0;border-radius:28px;box-shadow:none;height:clamp(290px,43dvh,380px);background:transparent;mask-image:linear-gradient(to right,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%),linear-gradient(to bottom,transparent 0,#000 var(--hm-top-fade),#000 calc(100% - 10px),transparent 100%);mask-composite:intersect}
.hm-home-hero>.hm-hero-foliage{position:absolute;z-index:2;left:-12px;bottom:0;width:calc(100% + 24px);height:132px;background:url('/assets/home-motion/leaves.webp?v=2') center bottom/100% auto no-repeat;mask-image:linear-gradient(to right,transparent 0,#000 32px,#000 calc(100% - 32px),transparent 100%),linear-gradient(to bottom,#000 0,#000 calc(100% - 24px),transparent 100%);mask-composite:intersect;pointer-events:none;animation:hm-leaf-sway 9s ease-in-out infinite;transform-origin:50% 100%;filter:drop-shadow(0 7px 7px #22351c20)}
.hm-home-hero:not([data-running=true])>.hm-hero-foliage{animation:none}
.hm-camera{position:relative;flex:none;width:var(--hm-scene-width,216%);aspect-ratio:2/1;animation:hm-camera-pan 28s ease-in-out infinite;will-change:translate}
.hm-background{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:fill}
.hm-camera>span,.hm-foreground{position:absolute;pointer-events:none}
.hm-smoke{width:6.5%;aspect-ratio:2/3;transform:translate(-50%,-94%);background:url('/assets/home-motion/smoke.webp?v=2') center/contain no-repeat;opacity:.75;animation:hm-smoke-rise 7s ease-in-out infinite;transform-origin:50% 94%;filter:brightness(.95) drop-shadow(0 0 1px #46534a55)}
.hm-smoke::after{content:"";position:absolute;inset:0;background:inherit;opacity:0;transform-origin:50% 94%;animation:hm-smoke-puff 5s ease-out infinite}
.smoke-1{animation-delay:-2s}.smoke-2{animation-delay:-4.5s}.smoke-3{animation-delay:-1.2s}
.smoke-1::after{animation-delay:-1.5s}.smoke-2::after{animation-delay:-3s}.smoke-3::after{animation-delay:-4s}
.hm-lantern{width:6%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,#ffdb8d66 0,#ffc25328 24%,#ffbb4400 68%);mix-blend-mode:screen;animation:hm-lantern-pulse 4s ease-in-out infinite}
.light-1{animation-delay:-1.3s}.light-2{animation-delay:-2.8s}.light-3{animation-delay:-.7s}
.hm-water{width:26%;aspect-ratio:4/1;background:url('/assets/home-motion/water-glint.svg?v=2') center/contain no-repeat;mix-blend-mode:screen;opacity:.35;animation:hm-water-flow 6s ease-in-out infinite;transform:rotate(18deg)}
.water-right{width:22%;animation-delay:-3s;transform:rotate(6deg)}
.hm-friends-shadow{width:6.8%;height:1.3%;transform:translate(-50%,-50%);border-radius:50%;background:#18271d38;filter:blur(1px)}
.hm-friends{width:8%;aspect-ratio:1;transform:translate(-50%,-92%);transform-origin:50% 92%}
.hm-friends-sprite{display:block;width:100%;height:100%;background:url('/assets/home-motion/friends-sprites.webp?v=2') 0 0/200% 200% no-repeat;animation:hm-friends-poses 18s steps(1,end) infinite,hm-breathe 3.6s ease-in-out infinite;transform-origin:50% 92%}
.hm-firefly{width:1.5%;aspect-ratio:1;transform:translate(-50%,-50%);background:url('/assets/home-motion/firefly-glow.svg?v=2') center/contain no-repeat;mix-blend-mode:screen;animation:hm-firefly-drift 10s ease-in-out infinite}
.fly-1{animation-delay:-3s;animation-duration:13s}.fly-2{animation-delay:-7s;animation-duration:11s}.fly-3{animation-delay:-5s;animation-duration:15s}
.hm-foreground{left:-4%;bottom:-27%;width:108%;height:108%;background:url('/assets/home-motion/leaves.webp?v=2') center/100% 100% no-repeat;animation:hm-leaf-sway 9s ease-in-out infinite;transform-origin:50% 100%;opacity:.8;filter:blur(.3px)}
html[data-tone=night] .hm-friends{filter:brightness(.8) saturate(.85)}
html[data-tone=night] .hm-smoke{filter:brightness(1.3)}
html[data-tone=night] .hm-foreground{filter:brightness(.62) saturate(.8) blur(.3px)}
html[data-tone=night] .hm-home-hero{--hm-hero-paper:var(--c-bg)}
html[data-tone=night] .hm-home-hero>.hm-hero-foliage{filter:brightness(.65) saturate(.85) drop-shadow(0 7px 7px #0006)}
html[data-tone=night] .hm-role-showcase::before{background:radial-gradient(ellipse,#dcb96d26,transparent 70%)}
.hm-scene:not([data-running=true]) *{animation:none!important;will-change:auto}
.hm-scene:not([data-running=true]) .hm-smoke::after{animation:none;opacity:0}
.hm-role-sheet{color:var(--c-text,#34463c)}
.hm-role-sheet .hm-guide-heading{margin:4px 35px 2px 0;text-align:left;padding:0;font:600 22px var(--head)}
.hm-guide-tabs{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--c-raised,#ecefdf);padding:5px;border-radius:16px;position:sticky;top:0;z-index:2}
.hm-guide-tabs button{min-height:48px;min-width:0;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--c-muted,#65735f);font:600 13px var(--body);padding:6px}
.hm-guide-tabs button[aria-selected=true]{background:var(--c-action,#345e49);color:var(--c-on-action,#fffaf0);border-color:transparent}
.hm-role-sheet [hidden]{display:none!important}
.hm-guide-role-head{display:flex;align-items:center;gap:18px;padding:6px 0 12px}
.hm-guide-role-head>.named-role-art.hm-guide-art{width:132px;height:198px;flex-shrink:0;border-radius:10px;box-shadow:0 5px 14px #0002}
.hm-guide-role-head>div{min-width:0;overflow-wrap:anywhere}
.hm-guide-role-head h3{font:600 23px/1.4 var(--head);margin:0 0 6px}
.hm-guide-role-head p{font-size:13px;color:var(--c-muted,#65735f);margin:0 0 10px}
.hm-playable{display:inline-block;font-size:11px;line-height:1.6;padding:3px 8px;border-radius:8px;background:var(--c-ok-bg,#e5f0e6);color:var(--c-ok,#285b3e)}
.hm-playable.reference{background:var(--c-raised,#eeeadf);color:var(--c-muted,#65735f)}
.hm-guide-section{padding:14px 16px;border-radius:16px;background:var(--c-raised,#edf0e5);margin-bottom:12px}
.hm-guide-section h4{font:600 15px var(--head);margin:0 0 6px}
.hm-guide-section p{font-size:14px;line-height:1.8;margin:0}
.hm-guide-note{font-size:12px;line-height:1.7;color:var(--c-muted,#65735f);margin:0 0 2px}
.hm-search-label{font-size:12px;color:var(--c-muted,#65735f);display:block;margin-bottom:5px}
body.accounts .hm-role-sheet #hm-role-search{width:100%;min-height:48px;padding:10px 12px;border:1px solid var(--c-edge,#afb8a3);border-radius:12px;background:var(--c-raised,#fffdf5);color:var(--c-text,#34463c);font:400 16px var(--body);margin:0 0 16px}
.hm-guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
.hm-guide-card{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;padding:8px 4px;border:1px solid var(--c-line,#dfdfcb);border-radius:12px;background:var(--c-raised,#fffdf5);color:var(--c-text,#34463c)}
.hm-guide-card>.named-role-art{width:100%;max-width:100px;height:auto;aspect-ratio:2/3}
.hm-guide-card b{font-size:11px;line-height:1.5;overflow-wrap:anywhere}
.hm-guide-card small{font-size:10px;color:var(--c-muted,#65735f)}
.hm-guide-empty{font-size:14px;color:var(--c-muted,#65735f);text-align:center;padding:20px 0}
.hm-guide-tabs button:focus-visible,.hm-guide-card:focus-visible{outline:3px solid var(--c-focus,#2f7755);outline-offset:2px}
@keyframes hm-camera-pan{0%,100%{translate:-1.2% -.5%}50%{translate:1.2% .5%}}
@keyframes hm-card-aura{0%,100%{opacity:.4}50%{opacity:.9}}
@keyframes hm-card-shine{0%,8%{background-position:160% 0;opacity:0}20%{opacity:.45}65%,100%{background-position:-60% 0;opacity:0}}
@keyframes hm-card-twinkle{0%,28%,78%,100%{opacity:0;transform:scale(.5)}48%{opacity:.9;transform:scale(1)}62%{opacity:.3;transform:scale(.75)}}
@keyframes hm-smoke-rise{0%,100%{opacity:.68;transform:translate(-50%,-94%) rotate(-3deg) scale(.88)}50%{opacity:.9;transform:translate(-50%,-94%) rotate(4deg) scale(1.04)}}
@keyframes hm-smoke-puff{0%{opacity:0;transform:translate(0,8%) scale(.75)}24%{opacity:.5}70%{opacity:.16}100%{opacity:0;transform:translate(13%,-30%) scale(1.2)}}
@keyframes hm-lantern-pulse{0%,100%{opacity:.4}45%{opacity:.95}62%{opacity:.7}}
@keyframes hm-water-flow{0%,100%{opacity:.2;translate:0 0}50%{opacity:.5;translate:8px 2px}}
@keyframes hm-friends-poses{0%,20%{background-position:0 0;translate:0 0}20.8%{background-position:100% 0;translate:0 0}21.6%{background-position:0 0;translate:0 0}45%{background-position:0 100%;translate:0 2.7%}48%{background-position:0 0;translate:0 0}73%{background-position:100% 0;translate:0 0}73.8%{background-position:0 0;translate:0 0}84%{background-position:100% 100%;translate:0 2.7%}87%,100%{background-position:0 0;translate:0 0}}
@keyframes hm-breathe{0%,100%{transform:scale(1,1)}50%{transform:scale(1.005,1.015)}}
@keyframes hm-firefly-drift{0%,100%{opacity:.12;translate:0 0}35%{opacity:.95;translate:12px -9px}70%{opacity:.5;translate:-9px -16px}}
@keyframes hm-leaf-sway{0%,100%{transform:translateX(-.7%) rotate(-.4deg)}50%{transform:translateX(.7%) rotate(.4deg)}}
@media(max-width:359px){.home-intro{gap:6px}.home-intro>.welcome-title h1{font-size:21px}.home-intro>.welcome-title p,.home-intro>.welcome-title>span{font-size:11px}.hm-home-hero>.hm-scene{--hm-top-fade:82px;margin-top:-82px}.hm-home-hero>.hm-hero-foliage{height:112px}.hm-guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hm-guide-role-head>.named-role-art.hm-guide-art{width:110px;height:165px}}
@media(prefers-reduced-motion:reduce){.hm-scene *,.hm-hero-foliage,.hm-role-card::before{animation:none!important;will-change:auto!important}.hm-role-card{transition:none!important}.hm-role-card::after,.hm-card-glints>span,.hm-smoke::after{animation:none!important;opacity:0!important}}