/* The selected reception background is the default; a/c remain comparison variants and preserve layout 2's character and speech positions. */
html[data-background] .reception{isolation:isolate;background:#fbfaf5}
html[data-background] .person{position:relative;top:0;z-index:0}
html[data-background] .avatar-stage{overflow:visible;isolation:auto;background:transparent}
html[data-background] .avatar-stage img{position:relative;z-index:1;object-fit:cover}
html[data-background] .avatar-stage canvas{max-width:none;z-index:2}
html[data-background] .workspace{z-index:1}
html[data-background] .room-still{position:absolute;left:32px;right:0;top:32px;height:600px;z-index:-1;overflow:hidden}
html[data-background] .room-still img{height:100%;width:100%;object-fit:cover;object-position:left center;display:block}
html[data-background] .desk{background:transparent;padding:0}
html[data-background] .introduction{background:#fbfaf5;position:relative;padding-top:8px}
@media(max-width:1000px){
 html[data-background] .person{position:absolute;top:12px}
 html[data-background] .room-still{left:0;top:12px;height:246px}
 html[data-background] .desk{background:none;padding:272px 0 0}
 html[data-background] .speech-region{background:#fbfaf5;border-radius:12px;padding:8px}
 html[data-background] #entry{isolation:isolate}
 html[data-background] #entry:before{content:"";position:absolute;left:154px;right:0;top:18px;height:134px;background:#fbfaf5;border-radius:12px;z-index:-1}
 html[data-background] .mobile-greeting{background:transparent;top:30px;padding:0 10px;font-size:15px}
 html[data-background] .welcome{top:76px}
 html[data-background] .welcome{background:transparent}
 html[data-background] .welcome:before{border-right-color:#fbfaf5}
}

@media(min-width:1001px){
 html[data-background] .desk{isolation:isolate}
 html[data-background] .desk:after{content:"";position:absolute;inset:-20px;background:#fbfaf5;border-radius:12px;z-index:-1}
 html[data-background] .desk:before{content:"";position:absolute;left:-34px;top:32px;border-top:12px solid transparent;border-bottom:12px solid transparent;border-right:16px solid #fbfaf5}
}

/* The fixed greeting fits the tablet speech column; do not narrow it to 90%. */
@media(min-width:701px) and (max-width:1000px){
 html[data-background="b"] .greeting{max-width:100%}
}

/* Comparison B: transparent character on the page; C: one continuous room. */
html[data-background="clear"] .reception{background:#fbfaf5}
html[data-background="full"] body{background:#fbfaf5}
html[data-background="full"] .reception{isolation:auto;background:transparent}
html[data-background="full"] .person{position:relative;z-index:auto}
/* Fade the room itself into the page, not separate rectangles behind text.
   The opaque middle retains the entire character, including the feet. */
html[data-background="full"] .avatar-stage canvas{position:absolute;pointer-events:none;z-index:0;
 -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 120px,#000 660px,transparent 780px);
 mask-image:linear-gradient(to bottom,transparent 0,#000 120px,#000 660px,transparent 780px)}
html[data-background="full"] .top,html[data-background="full"] .introduction{background:transparent}
html[data-background="full"] .continuation{background:#fbfaf5}
html[data-background="full"] .introduction{z-index:1}
@media(max-width:1000px){html[data-background="full"] .person{position:absolute}}
html[data-background="full"] .top{position:relative;z-index:3}
html[data-background="clear"] .avatar-stage canvas{max-width:100%}
@media(max-width:1000px){
 html[data-background="full"] .avatar-stage canvas{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 78px,#000 300px,transparent 350px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 78px,#000 300px,transparent 350px)}
 html[data-background="full"] #entry{background:transparent;border-radius:0}
 html[data-background="full"] .entry-choices button{background:#fbfaf5}
 html[data-background="clear"] .welcome,html[data-background="clear"] .mobile-greeting{z-index:3}
}

/* AK-20261110-haruiroai-lp-v6: eye-level chest portrait on the page. */
html[data-framing="chest"] .avatar-stage{height:500px;overflow:hidden;
 -webkit-mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%);
 mask-image:linear-gradient(#000 0%,#000 72%,transparent 100%)}
html[data-framing="chest"] .avatar-stage img{object-fit:cover}
html[data-framing="chest"] .top{position:relative;z-index:3}
@media(max-width:1000px){
 html[data-framing="chest"] .avatar-stage{width:152px;height:246px}
}
/* Longer neutral greeting stays separate from the invitation beside the portrait. */
@media(max-width:1000px){html[data-layout="2"][data-background] .welcome{top:120px}}

/* HP-C26 follow-up: both greeting sentences share one flow, never fixed tops. */
@media(max-width:1000px){
 html[data-layout="2"] .entry-speech{position:absolute;top:30px;left:154px;right:0;display:flex;flex-direction:column;gap:20px;padding:0 10px}
 html[data-layout="2"][data-background] .entry-speech .mobile-greeting,
 html[data-layout="2"][data-background] .entry-speech .welcome{position:static;inset:auto;margin:0;padding:0;display:block;line-height:1.65;font-size:15px}
}