/* Compact homepage narration. Scope stays inside the existing Riko hero. */
#hero.tfp-hero-with-riko .nhr-welcome.nhr-welcome--guide {
    display:grid; grid-template-columns:clamp(108px,10vw,144px) minmax(0,1fr);
    align-items:center; gap:10px; width:100%; max-width:410px; margin:0 0 14px; text-align:left;
}
#hero .nhr-welcome--guide .rg-avatar-row { min-width:0; }
#hero .nhr-welcome--guide .rg-avatar {
    position:relative; display:block; width:100%; aspect-ratio:1060/906; padding:0; margin:0;
    background:none; border:0; border-radius:16px; box-shadow:none; color:inherit; cursor:pointer;
    -webkit-tap-highlight-color:transparent; isolation:isolate;
}
#hero .nhr-welcome--guide .rg-avatar:disabled { cursor:default; opacity:1; }
#hero .nhr-welcome--guide .rg-poster {
    position:absolute; display:block; left:2.83%; top:1.987%; width:94.34%; height:94.702%; margin:0; object-fit:fill;
}
#hero .nhr-welcome--guide .rg-scene {
    position:absolute; inset:0; display:block; width:100%; height:100%; visibility:hidden; overflow:visible; pointer-events:none;
}
#hero .nhr-welcome--guide.has-riko-motion .rg-scene { visibility:visible; }
#hero .nhr-welcome--guide.has-riko-motion .rg-poster { visibility:hidden; }
#hero .nhr-welcome--guide .rg-balloon {
    position:relative; min-width:0; width:100%; max-width:248px; padding:10px 12px 12px; margin:0;
    box-sizing:border-box; border:1px solid #a17ee354; border-radius:16px; color:#f4f2ff;
    background:linear-gradient(135deg,#242039f5,#102235f5); box-shadow:0 7px 22px #0000001f;
}
#hero .nhr-welcome--guide .rg-balloon::before {
    content:""; position:absolute; left:-5px; top:50%; width:8px; height:8px; margin-top:-4px;
    background:#242039; border-left:1px solid #a17ee354; border-bottom:1px solid #a17ee354; transform:rotate(45deg);
}
#hero .nhr-welcome--guide .rg-stories { display:grid; min-width:0; }
#hero .nhr-welcome--guide .rg-story {
    grid-area:1/1; min-width:0; display:flex; flex-direction:column; visibility:hidden; pointer-events:none;
}
#hero .nhr-welcome--guide .rg-story[aria-hidden="false"] { visibility:visible; }
#hero .nhr-welcome--guide .rg-label {
    display:block; padding-right:20px; color:#c4aaf5; font-size:10px; font-weight:650; line-height:1.45; overflow-wrap:anywhere;
}
#hero .nhr-welcome--guide .rg-story p {
    margin:5px 0 0; color:#e6e6f0; font-size:12.5px; font-weight:400; line-height:1.5; text-wrap:pretty; overflow-wrap:anywhere;
}
#hero .nhr-welcome--guide .rg-pause {
    position:absolute; z-index:1; top:-4px; right:-3px; display:grid; place-items:center;
    width:44px; height:44px; padding:14px; margin:0; border:0; border-radius:50%;
    background:none; color:#c6b9dc; cursor:pointer; -webkit-tap-highlight-color:transparent;
}
#hero .nhr-welcome--guide .rg-pause svg {
    width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
#hero .nhr-welcome--guide .rg-pause:hover { color:#fff; background:#ffffff09; }
#hero .nhr-welcome--guide button:focus-visible { outline:2px solid #c4a0ff; outline-offset:3px; }
#hero .nhr-welcome--guide .rg-story.is-entering { animation:tfp-riko-story .25s ease-out both; }
#hero .nhr-welcome--guide.is-art-unavailable { grid-template-columns:minmax(0,1fr); }
#hero .nhr-welcome--guide.is-art-unavailable .rg-avatar-row { display:none; }
#hero .nhr-welcome--guide.is-art-unavailable .rg-balloon::before { display:none; }
@keyframes tfp-riko-story { from { opacity:0; transform:translateY(2px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:900px) {
    #hero.tfp-hero-with-riko .nhr-welcome.nhr-welcome--guide { margin:0 auto 12px; }
}
@media(max-width:600px) {
    #hero.tfp-hero-with-riko .nhr-welcome.nhr-welcome--guide {
        grid-template-columns:clamp(100px,27vw,124px) minmax(0,1fr); max-width:380px; gap:8px; margin-bottom:8px;
    }
    #hero .nhr-welcome--guide .rg-balloon { max-width:236px; padding:9px 10px 10px; border-radius:14px; }
    #hero .nhr-welcome--guide .rg-story p { font-size:12px; }
}
@media(prefers-reduced-motion:reduce) {
    #hero .nhr-welcome--guide .rg-story.is-entering { animation:none; }
}