/* Continue the showroom into the profile; leave the reviewed portrait viewport intact. */
body:has(#character-home:not([hidden])){background:#07080e;color:#f7f0fa;color-scheme:dark}
#character-home{--detail-accent:#75eee5;min-height:100dvh;background:radial-gradient(ellipse at 20% 42%,#30203d55,transparent 52%),radial-gradient(ellipse at 85% 10%,#162f3833,transparent 40%),#07080e;color:#f7f0fa;overflow:clip}
#character-home[data-character="harin-closeup"]{--detail-accent:#b9a6ff}
#character-home[data-character="sera-closeup"]{--detail-accent:#ff83d2}
#character-home[data-character="nari-closeup"]{--detail-accent:#f5b7e7}
#character-home[data-character="ria-closeup"]{--detail-accent:#ffc78e}
#character-home>.header{height:72px;padding-inline:32px;border-bottom:1px solid #ffffff13;max-width:1440px}
#character-home .brand>span{font-size:33px;color:#f7f0fa}
#character-home .brand>span>span{color:#ff79d2}
#character-home .header-link{color:#ddc9e7;min-height:44px;padding:8px 12px;border:1px solid #66536c;font-size:12px}
#character-home .header-link:hover{border-color:var(--detail-accent);color:#fff}
#character-home .character-home-layout{width:min(1080px,100%);max-width:none;margin:0 auto;padding:36px 36px 48px;grid-template-columns:minmax(0,430px) minmax(0,1fr);gap:clamp(40px,7vw,100px);align-items:center}
#character-home .character-portrait-stage{position:relative;padding:10px;isolation:isolate;width:100%;max-width:min(425px,calc((100svh - 152px) * .5625 + 22px));justify-self:center;border:1px solid #ac91bd30;background:linear-gradient(145deg,#18151f88,#080a12)}
#character-home .character-portrait-stage:before{content:'';position:absolute;inset:-12px 22px;border-block:1px solid var(--detail-accent);opacity:.65;pointer-events:none}
#character-home .character-portrait-stage:after{content:'';position:absolute;left:8%;right:8%;bottom:-25px;height:26px;z-index:-1;background:var(--detail-accent);filter:blur(24px);opacity:.26;pointer-events:none}
#character-home .character-home-visual{position:relative;width:100%;max-width:405px;max-height:none;aspect-ratio:9/16;border:1px solid color-mix(in srgb,var(--detail-accent) 60%,transparent);border-radius:2px;background:#14121d;box-shadow:0 0 28px color-mix(in srgb,var(--detail-accent) 12%,transparent)}
#character-home .character-home-visual video{display:block;width:100%;height:100%}
#character-home .character-home-copy{min-width:0}
#character-home .eyebrow{color:#bba8c6;font-size:11px;letter-spacing:.08em;margin:0 0 16px}
#character-home h1{font-size:clamp(40px,4.4vw,60px);line-height:1.18;letter-spacing:-.04em;margin:0;color:#fff6fc;font-weight:650}
#character-home .card-tags{flex-wrap:wrap;gap:8px;margin:17px 0 0}
#character-home .card-tags span{padding:0;background:none;border-radius:0;color:var(--detail-accent);font-size:13px;line-height:1.8;overflow-wrap:anywhere}
#character-home .character-story{margin:30px 0 26px;padding-top:27px;border-top:1px solid #b8a1c52b}
#character-home h2{font-size:21px;font-weight:500;line-height:1.6;letter-spacing:-.03em;color:#f0dfef;overflow-wrap:anywhere}
#character-home .character-story p{font-size:14px;line-height:1.95;color:#b9a9c4;margin:14px 0 0;overflow-wrap:anywhere}
#character-home .together-detail{display:flex;gap:8px;align-items:center;color:#d3bbd7!important;font-size:12px!important;margin:0 0 22px!important}
#character-home .together-detail svg{width:15px;height:15px;color:var(--detail-accent)}
#character-home .character-actions{display:flex;flex-direction:column;gap:8px;margin:24px 0 14px}
#character-home #character-call{width:100%;min-height:54px;margin:0;border:1px solid var(--detail-accent);border-radius:3px;background:color-mix(in srgb,var(--detail-accent) 10%,#11121a);box-shadow:0 0 24px color-mix(in srgb,var(--detail-accent) 9%,transparent);color:#fff2fc;font-size:14px;justify-content:space-between;padding:15px 20px}
#character-home #character-call:hover{background:color-mix(in srgb,var(--detail-accent) 19%,#11121a)}
#character-home #character-call svg{color:var(--detail-accent);width:19px}
#character-home #character-memory{align-self:center;display:flex;align-items:center;gap:7px;min-height:44px;background:transparent;color:#c3b1d0;font-size:12px;padding:10px 18px}
#character-home #character-memory svg{width:16px;height:16px}
#character-home .character-home-copy small{font-size:11px;line-height:1.9;color:#aa97b5;margin-top:14px}
#character-home :is(button,a):focus-visible{outline:2px solid var(--detail-accent);outline-offset:5px}
#character-home>.notice{max-width:1008px;margin:20px auto 0;background:#251c2b;color:#efcce5;border:1px solid #6d4e77}
@media(max-width:700px){
 #character-home>.header{height:56px;padding-inline:18px}
 #character-home .brand>span{font-size:29px}
 #character-home .header-link{font-size:11px}
 #character-home .character-home-layout{grid-template-columns:minmax(0,1fr);gap:24px;padding:24px 24px calc(32px + env(safe-area-inset-bottom,0px))}
 #character-home .character-portrait-stage{padding:8px;width:min(100%,calc(clamp(190px,100svh - 300px,450px) * .5625 + 18px));max-width:none}
 #character-home .character-home-copy{width:100%;max-width:440px;justify-self:center}
 #character-home .character-identity{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:0 12px}
 #character-home h1{grid-area:1/1;font-size:34px}
 #character-home .eyebrow{grid-area:1/2;justify-self:end;margin:0;font-size:10px;letter-spacing:0}
 #character-home .card-tags{grid-column:1/-1;margin-top:8px;gap:6px 10px}
 #character-home .card-tags span{font-size:12px}
 #character-home .character-actions{margin:16px 0 12px;gap:4px}
 #character-home #character-call{min-height:50px;padding:13px 17px}
 #character-home .character-story{margin:23px 0 22px;padding-top:20px}
 #character-home h2{font-size:18px}
 #character-home .character-story p{font-size:13px;margin-top:10px;line-height:1.9}
 #character-home .character-home-copy small{font-size:10px}
 #character-home>.notice{margin-inline:18px}
}
@media(max-width:700px) and (max-height:620px){
 #character-home .character-home-layout{padding-top:20px;gap:20px}
 #character-home .character-portrait-stage{width:min(100%,calc(clamp(130px,100svh - 300px,300px) * .5625 + 18px))}
}
@media(min-width:500px) and (max-width:700px) and (max-height:500px){
 #character-home .character-home-layout{grid-template-columns:minmax(0,.65fr) minmax(0,1fr);gap:28px;align-items:start}
 #character-home .character-portrait-stage{width:min(100%,calc((100svh - 130px) * .5625 + 18px))}
}