/* A composed scene, not a cropped photo card. Original Hayeon PNG bytes are untouched. */
#app[data-friend-scene=true]{--scene-bottom:var(--bg)}
#app[data-friend-scene=true] .header{background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom-color:color-mix(in srgb,var(--line) 65%,transparent)}
#app[data-friend-scene=true] .page{max-width:1512px;padding:34px 48px 80px}
.home-atmosphere.friend-scene{display:block!important;inset:0 0 auto;width:100%;height:clamp(720px,47vw,960px);transform:none;overflow:hidden;background:var(--bg)}
.friend-scene .hero-art{inset:auto max(0px,calc((100vw - 1920px)/2)) auto auto;top:56px;width:min(94vw,1740px);height:auto;max-width:none;object-fit:contain;object-position:center;transform:none;transform-origin:center;opacity:1;mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 97%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 97%,transparent 100%)}
.friend-scene .hero-art-dark{transform:none}
.friend-scene .scene-haze{position:absolute;inset:0;background:radial-gradient(ellipse at 84% 30%,#c92c5524,transparent 55%),radial-gradient(ellipse at 19% 10%,#e2c5b619,transparent 58%)}
.friend-scene .hero-vignette{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 20%,color-mix(in srgb,var(--bg) 30%,transparent) 42%,transparent 62%),linear-gradient(0deg,var(--bg) 0%,transparent 22%)}
.friend-scene .scene-ground{position:absolute;inset:62% 0 0;background:linear-gradient(0deg,var(--bg) 8%,color-mix(in srgb,var(--bg) 22%,transparent) 55%,transparent)}
#app[data-friend-scene=true] .friend-scene-hero{min-height:clamp(380px,24vw,460px);margin-bottom:20px;align-items:flex-start}
#app[data-friend-scene=true] .friend-scene-hero>div:first-child{max-width:61%;padding-top:30px}
#app[data-friend-scene=true] .friend-scene-hero h1{font-size:clamp(48px,4.2vw,76px);line-height:1.18;letter-spacing:-3px;font-weight:800;margin:0 0 23px;white-space:pre-line;max-width:850px}
.friend-scene-hero .hero-emphasis{color:var(--accent);background:linear-gradient(105deg,#9c1237 4%,#d52753 50%,#e35c7a 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
:root[data-theme=dark] .friend-scene-hero .hero-emphasis{background-image:linear-gradient(105deg,#ff4d75 0%,#ff7790 52%,#ffc0cb 100%)}
#app[data-friend-scene=true] .friend-scene-hero>div>p:not(.eyebrow){font-size:16px;line-height:1.85;max-width:430px;color:var(--muted)}
#app[data-friend-scene=true] .hero-aside{padding-top:54px;gap:18px}
#app[data-friend-scene=true] .context-strip{background:color-mix(in srgb,var(--surface) 74%,transparent);backdrop-filter:blur(6px);margin-bottom:22px}
#app[data-friend-scene=true] .page>.panel{background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 12px 45px #0b0a1307}
#app[data-friend-scene=true] .toolbar{padding:22px 24px 0}
#app[data-friend-scene=true] .filter-row{padding-bottom:17px}
#app[data-friend-scene=true] .filter-row{display:flex;flex-wrap:nowrap;align-items:center;gap:15px}
#app[data-friend-scene=true] .category-tabs{flex:1;min-width:0;padding-bottom:4px}
#app[data-friend-scene=true] .filter-tail{flex-shrink:0;white-space:nowrap;margin-top:0;margin-bottom:0}
#app[data-friend-scene=true] .filter-tail{flex-basis:auto;margin-left:auto}
.petal-layer.scene-petals{display:block!important;position:absolute;inset:82px 0 auto;height:1260px;overflow:hidden;pointer-events:none;z-index:0}
.scene-petal{position:absolute;width:84px;height:51px;opacity:.6;filter:blur(.25px);animation:none!important;transition:none!important}
.scene-petal-1{left:-28px;top:95px;width:130px;height:90px;transform:rotate(-43deg);opacity:.68;filter:blur(1px)}
.scene-petal-2{left:3%;top:480px;width:69px;height:42px;transform:rotate(26deg);opacity:.42}
.scene-petal-3{left:25%;top:55px;width:35px;height:22px;transform:rotate(-20deg);opacity:.38}
.scene-petal-4{right:-24px;top:265px;width:137px;height:89px;transform:rotate(142deg);filter:blur(.7px)}
.scene-petal-5{right:2%;top:760px;width:88px;height:53px;transform:rotate(-24deg);opacity:.68}
.scene-petal-6{right:25%;top:17px;width:31px;height:22px;transform:rotate(30deg);opacity:.35}
.scene-petal-7{left:-37px;top:990px;width:150px;height:91px;transform:rotate(28deg);opacity:.52;filter:blur(1.4px)}
.scene-petal-8{right:4%;top:550px;width:47px;height:31px;transform:rotate(118deg);opacity:.4}
.scene-petal-9{left:4%;top:830px;width:49px;height:32px;transform:rotate(-38deg);opacity:.44}
.scene-petal-10{right:-37px;top:1140px;width:145px;height:84px;transform:rotate(-23deg);filter:blur(1px)}
.scene-petal-11{left:38%;top:350px;width:30px;height:22px;transform:rotate(95deg);opacity:.22}
.scene-petal-12{right:12%;top:155px;width:28px;height:19px;transform:rotate(-27deg);opacity:.42}
:root[data-theme=dark] .scene-petal{opacity:.78}
#app[data-friend-scene=true] .private-preview-label{font-size:8px;top:91px;opacity:.75;background:color-mix(in srgb,var(--surface) 74%,transparent)}
@media(min-width:761px) and (max-width:1100px){#app[data-friend-scene=true] .page{padding-left:28px;padding-right:28px}#app[data-friend-scene=true] .friend-scene-hero h1{font-size:48px}#app[data-friend-scene=true] .hero-aside{padding-top:25px}.friend-scene .hero-art{width:1080px;right:-80px;top:80px}#app[data-friend-scene=true] .friend-scene-hero>div:first-child{max-width:67%}#app[data-friend-scene=true] .hero-aside .updated{font-size:9px}}
@media(max-width:760px){
 #app[data-friend-scene=true] .page{padding:22px 18px 50px}
 #app[data-friend-scene=true] .header{background:color-mix(in srgb,var(--bg) 94%,transparent)}
 .home-atmosphere.friend-scene{display:block!important;height:650px;overflow:hidden}
 .friend-scene .hero-art{display:block;top:92px;right:-182px;left:auto;width:780px;height:auto;transform:none;object-position:center;opacity:1;mask-image:linear-gradient(90deg,transparent 4%,#000 37%);-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 37%)}
 .friend-scene .hero-art-dark{display:none}:root[data-theme=dark] .friend-scene .hero-art-light{display:none}:root[data-theme=dark] .friend-scene .hero-art-dark{display:block}
 .friend-scene .hero-vignette{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 88%,transparent) 42%,color-mix(in srgb,var(--bg) 35%,transparent) 64%,transparent 82%),linear-gradient(0deg,var(--bg),transparent 38%)}
 .friend-scene .scene-ground{inset:54% 0 0;background:linear-gradient(0deg,var(--bg) 6%,transparent 100%)}
 #app[data-friend-scene=true] .friend-scene-hero{display:block;min-height:315px;margin-bottom:12px}
 #app[data-friend-scene=true] .friend-scene-hero>div:first-child{max-width:100%;padding-top:12px}
 #app[data-friend-scene=true] .friend-scene-hero h1{font-size:31px;line-height:1.3;letter-spacing:-1.4px;max-width:255px;margin-bottom:19px}
 #app[data-friend-scene=true] .friend-scene-hero>div>p:not(.eyebrow){font-size:12px;max-width:210px;line-height:1.85}
 #app[data-friend-scene=true] .hero-aside{padding-top:30px;gap:10px;position:relative;z-index:1}
 #app[data-friend-scene=true] .hero-aside .mode-row{width:100%;padding:4px;background:color-mix(in srgb,var(--surface) 86%,transparent);backdrop-filter:blur(8px)}
 #app[data-friend-scene=true] .hero-aside .updated{font-size:9px;padding:3px 7px;background:color-mix(in srgb,var(--surface) 83%,transparent)}
 #app[data-friend-scene=true] .context-strip{padding:10px 12px;margin-bottom:16px}
 #app[data-friend-scene=true] .toolbar{padding:16px 15px 0}
 #app[data-friend-scene=true] .filter-tail{flex-basis:100%;margin-left:0}
 #app[data-friend-scene=true] .filter-row{display:block}
 .petal-layer.scene-petals{display:block!important;inset:115px 0 auto;height:500px}
 .scene-petal{display:none!important}.scene-petal-1,.scene-petal-6,.scene-petal-12{display:block!important}
 .scene-petal-1{left:-19px;top:170px;width:55px;height:36px;opacity:.36;filter:blur(.5px)}
 .scene-petal-6{right:2px;top:42px;width:34px;height:24px;opacity:.42}
 .scene-petal-12{right:17%;top:305px;width:27px;height:19px;opacity:.3}
}
@media(prefers-reduced-motion:reduce){.scene-petal{animation:none!important;transition:none!important}}

/* Blend the existing scene into the unchanged header, without moving the character. */
.friend-scene .hero-art{mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 97%,transparent 100%),linear-gradient(180deg,transparent,#000 70px);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 97%,transparent 100%),linear-gradient(180deg,transparent,#000 70px);-webkit-mask-composite:source-in}
#app[data-friend-scene=true] .header{position:relative;border-bottom-color:color-mix(in srgb,var(--line) 35%,transparent);background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 78%,transparent))}
#app[data-friend-scene=true] .header:after{content:"";position:absolute;top:100%;left:0;right:0;height:28px;pointer-events:none;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 30%,transparent),transparent)}
@media(max-width:760px){#app[data-friend-scene=true] .header:after{height:18px}.friend-scene .hero-art{mask-image:linear-gradient(90deg,transparent 4%,#000 37%),linear-gradient(180deg,transparent,#000 30px);-webkit-mask-image:linear-gradient(90deg,transparent 4%,#000 37%),linear-gradient(180deg,transparent,#000 30px)}}