/* Component-scoped; the page owns the semantic palette and night theme. */
.companion{--companion-ink:var(--ink,#443c3a);--companion-muted:var(--muted,#8b8178);--companion-surface:var(--surface,#fbf8f1);--companion-line:var(--line,#d9cfc0);--companion-accent:var(--accent,#426c5c);--companion-soft:var(--accent-soft,#e7eee4);--companion-warm:var(--warm,#e7c6ab);position:relative;isolation:isolate;width:min(100%,370px);min-height:248px;margin:10px 0 7px;color:var(--companion-ink)}
.companion-frame{position:absolute;z-index:-1;inset:56px 10px 43px 20px;border:1px solid var(--companion-line);border-radius:46% 46% 12px 12px;background:radial-gradient(ellipse at 30% 30%,var(--companion-soft),transparent 70%)}
.companion-frame:after{content:'';position:absolute;left:-11px;right:-11px;top:86px;height:1px;background:var(--companion-line)}
.companion-frame>span{position:absolute;right:14px;bottom:10px;font-size:9px;letter-spacing:4px;color:var(--companion-muted);writing-mode:vertical-rl}
.companion-frame>i{position:absolute;right:20px;top:19px;width:14px;height:14px;border-radius:50%;background:var(--companion-warm);opacity:.65}
.companion-person{position:relative;display:block;width:146px;height:242px;padding:0;margin:0 0 0 15px;border:0;background:none;color:inherit;cursor:pointer;touch-action:manipulation;z-index:1}
.companion-person:focus-visible,.companion-wave:focus-visible,.brand-opening-skip:focus-visible{outline:2px solid var(--accent,#426c5c);outline-offset:5px;border-radius:8px}
.companion-lean{display:block;width:100%;height:100%;transform:translate(var(--companion-x,0px),var(--companion-y,0px)) rotate(var(--companion-turn,0deg));transform-origin:50% 59%;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.companion-image{display:block;width:100%;height:100%;object-fit:contain;object-position:top;filter:drop-shadow(0 4px 4px #302b2110);transform-origin:50% 59%;animation:companionBreathe 4.8s ease-in-out 1;user-select:none;-webkit-user-drag:none}
.companion-note{position:absolute;top:88px;left:161px;right:31px;z-index:2}
.companion-kicker{display:block;font-size:9px;letter-spacing:1px;color:var(--companion-muted);margin-bottom:12px;white-space:nowrap}
.companion-bubble{position:relative;font-size:15px;font-weight:500;line-height:1.75;letter-spacing:.2px;margin:0;min-height:78px;color:var(--companion-ink);text-wrap:pretty}
.companion-bubble:before{content:'“';position:absolute;left:-13px;top:-6px;font-family:Georgia,serif;font-size:26px;color:var(--companion-accent);opacity:.5}
.companion-wave{display:inline-flex;align-items:center;gap:16px;border:0;background:transparent;padding:8px 0;margin-top:6px;font-size:10px;color:var(--companion-accent);cursor:pointer;min-height:36px}
.companion-wave>span{font-size:15px;transition:transform .2s}.companion-wave:hover>span{transform:translate(2px,-2px)}
.companion.is-waving .companion-image{animation:companionNod .65s ease-in-out both}
.companion.is-waving .companion-bubble{animation:companionPhrase .3s ease-out both}
.companion[data-reduced='true'] .companion-image,.companion[data-reduced='true'] .companion-lean,.companion[data-reduced='true'] .companion-bubble{animation:none!important;transition:none!important;transform:none!important}
@keyframes companionBreathe{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-2px) rotate(.4deg)}}
@keyframes companionNod{0%,100%{transform:rotate(0) translateY(0)}32%{transform:rotate(-2deg) translateY(2px)}64%{transform:rotate(.7deg) translateY(-1px)}}
@keyframes companionPhrase{from{opacity:.45;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}

.companion{padding-top:32px;min-height:280px}
.companion-frame{top:88px}.companion-note{top:120px}
.companion-choices{position:absolute;top:0;right:8px;display:flex;gap:7px;align-items:center}
.companion-choices button{display:flex;align-items:center;gap:6px;border:1px solid var(--companion-line);border-radius:20px;background:var(--companion-surface);color:var(--companion-muted);font-size:9px;padding:7px 10px;min-height:31px;cursor:pointer;white-space:nowrap}
.companion-choices button i{display:block;width:7px;height:7px;border-radius:50%;background:#64a9af}
.companion-choices button[data-value='girl'] i{background:#d791ad}
.companion-choices button[aria-pressed='true']{border-color:var(--companion-accent);color:var(--companion-ink);background:var(--companion-soft)}
.companion-choices button:focus-visible{outline:2px solid var(--companion-accent);outline-offset:3px}
.brand-opening{--opening-brand:#438c99;--opening-halo:#b0d9dc;position:fixed;z-index:10000;inset:0;display:grid;place-items:center;min-height:100vh;min-height:100dvh;background:var(--surface,#f8f8f2);color:var(--ink,#223d42);overflow:hidden;isolation:isolate;touch-action:none}
[data-character='girl'] .brand-opening{--opening-brand:#af6388;--opening-halo:#e8b8ca}
.brand-opening-wash{position:absolute;inset:-25%;z-index:-2;background:radial-gradient(ellipse at 20% 60%,var(--opening-halo),transparent 47%),radial-gradient(ellipse at 75% 25%,var(--accent-soft,#e7f0ed),transparent 50%);opacity:.47;animation:brandWashReveal 1.7s cubic-bezier(.2,.8,.2,1) both}
.brand-opening:before{content:'';position:absolute;inset:28px;border:1px solid var(--line,#c4d8d9);border-radius:8px;pointer-events:none;opacity:.7;animation:brandFrameReveal .7s .05s ease-out both}
.brand-opening:after{content:'';position:absolute;z-index:-1;left:-5%;right:-5%;top:63%;height:1px;background:var(--opening-brand);opacity:.17;transform:rotate(-9deg);transform-origin:30% center;animation:brandStroke 1.1s .08s cubic-bezier(.2,.8,.2,1) both}
.brand-opening-corner{position:absolute;left:55px;top:51px;font-size:10px;letter-spacing:3px;color:var(--muted,#7f9496)}
.brand-opening-stage{position:relative;display:grid;grid-template-columns:minmax(220px,340px) minmax(340px,1fr);gap:65px;align-items:center;width:min(1010px,calc(100vw - 130px));margin-top:-20px}
.brand-opening-person{position:relative;display:grid;place-items:center;width:100%;height:min(66vh,540px);height:min(66dvh,540px);isolation:isolate;animation:brandPersonReveal .72s cubic-bezier(.16,.85,.2,1) both}
.brand-opening-person img{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;transform-origin:50% 58%;animation:companionNod .8s .5s ease-in-out both}
.brand-opening-window{position:absolute;z-index:-1;inset:6% 6% 22%;border:1px solid var(--opening-brand);border-radius:48% 48% 12px 12px;opacity:.35;box-shadow:17px 16px 0 -1px var(--surface,#f8f8f2),17px 16px 0 0 var(--line,#c4d8d9);transform:rotate(-3deg)}
.brand-opening-window:after{content:'';position:absolute;left:-17%;right:-20%;top:62%;height:1px;background:var(--opening-brand)}
.brand-opening-copy{position:relative;padding-bottom:18px}
.brand-opening-copy>span{display:block;font-size:12px;letter-spacing:5px;color:var(--muted,#7f9496);animation:brandCopyReveal .55s .12s both}
.brand-opening-copy>h1{font-family:inherit;font-size:clamp(58px,7.2vw,96px);font-weight:600;line-height:1.4;letter-spacing:-5px;margin:18px 0 7px;display:flex;align-items:baseline;white-space:nowrap}
.brand-opening-copy>h1>span{display:block;animation:brandLetterReveal .65s cubic-bezier(.15,.8,.2,1) both}
.brand-opening-copy>h1>span:nth-child(2){animation-delay:.08s}.brand-opening-copy>h1>span:nth-child(3){animation-delay:.16s}.brand-opening-copy>h1>span:nth-child(4){animation-delay:.24s}
.brand-opening-copy>h1>i{font-style:normal;color:var(--opening-brand);font-size:.68em;margin-left:7px;animation:brandLetterReveal .65s .32s both}
.brand-opening-stroke{height:3px;width:75%;background:var(--opening-brand);opacity:.65;transform-origin:left;animation:brandStroke .8s .25s cubic-bezier(.2,.7,.2,1) both}
.brand-opening-copy>p{font-size:15px;line-height:1.95;letter-spacing:1px;color:var(--muted,#7f9496);margin:24px 0 27px;animation:brandCopyReveal .55s .28s both}
.brand-opening-enter{display:inline-flex;align-items:center;gap:42px;border:1px solid var(--opening-brand);border-radius:99px;padding:12px 20px;color:var(--opening-brand);font-size:12px;background:var(--surface,#f8f8f2);cursor:pointer;min-height:45px;animation:brandCopyReveal .45s .3s both}
.brand-opening-enter>span{font-size:19px}.brand-opening-enter:hover{background:var(--accent-soft,#e4f0ee)}
.brand-opening-skip{position:absolute;z-index:2;right:50px;top:41px;display:flex;gap:12px;align-items:center;padding:11px 14px;min-height:42px;color:var(--muted,#7f9496);font-size:11px;border:1px solid var(--line,#c4d8d9);border-radius:99px;background:var(--surface,#f8f8f2);cursor:pointer}
.brand-opening-skip>span{font-size:18px}.brand-opening-enter:focus-visible{outline:2px solid var(--opening-brand);outline-offset:5px}
.brand-opening-foot{position:absolute;left:55px;right:55px;bottom:47px;display:flex;align-items:center;gap:20px;font-size:10px;letter-spacing:3px;color:var(--muted,#7f9496)}
.brand-opening-foot>span:first-child{color:var(--opening-brand);font-weight:600}.brand-opening-foot>i{height:1px;flex:1;background:var(--line,#c4d8d9)}
.brand-opening[data-reduced='true'],.brand-opening[data-reduced='true'] *{animation:none!important;transition:none!important}
@keyframes brandOpeningOut{to{opacity:0;visibility:hidden;pointer-events:none}}
@keyframes brandWashReveal{from{opacity:.12;transform:scale(1.14) translateX(-3%)}to{opacity:.47;transform:scale(1) translateX(0)}}
@keyframes brandFrameReveal{from{opacity:0;transform:scale(.98)}to{opacity:.7;transform:scale(1)}}
@keyframes brandPersonReveal{from{opacity:0;transform:translate(-25px,20px) rotate(-3deg)}to{opacity:1;transform:translate(0,0) rotate(0)}}
@keyframes brandLetterReveal{from{opacity:0;transform:translateY(25px);clip-path:inset(0 0 100%)}to{opacity:1;transform:translateY(0);clip-path:inset(0)}}
@keyframes brandCopyReveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes brandStroke{from{transform:scaleX(0)}to{transform:scaleX(1)}}
[data-theme='night'] .companion-image{filter:drop-shadow(0 4px 6px #0003)}
[data-theme='night'] .brand-opening-wash{opacity:.2;filter:saturate(.7)}
@media(max-width:680px){.companion{width:min(100%,338px);min-height:250px;margin-top:14px;padding-top:34px}.companion-frame{inset:77px 7px 29px 15px}.companion-frame:after{top:77px}.companion-person{width:129px;height:213px;margin-left:10px}.companion-note{left:141px;top:103px;right:28px}.companion-bubble{font-size:14px;min-height:73px}.companion-kicker{font-size:8px;margin-bottom:10px}.companion-wave{font-size:9px;margin-top:1px}.companion-choices{right:8px;gap:6px}.companion-choices button{font-size:9px;padding:6px 9px}.brand-opening:before{inset:14px;border-radius:10px}.brand-opening-corner{left:30px;top:37px;font-size:8px;letter-spacing:1px}.brand-opening-skip{right:26px;top:24px;font-size:10px;min-height:37px;padding:8px 12px}.brand-opening-stage{width:calc(100vw - 58px);grid-template-columns:1fr;gap:0;margin-top:-22px;justify-items:center}.brand-opening-person{width:200px;height:min(37dvh,305px);margin-bottom:-11px;margin-left:-110px}.brand-opening-window{inset:6% 9% 22%}.brand-opening-copy{text-align:left;width:100%;padding-bottom:0;max-width:350px}.brand-opening-copy>span{font-size:9px;letter-spacing:3px}.brand-opening-copy>h1{font-size:55px;letter-spacing:-2px;margin:9px 0 0}.brand-opening-copy>h1>i{margin-left:6px}.brand-opening-stroke{width:82%;height:2px}.brand-opening-copy>p{font-size:12px;line-height:1.75;margin:15px 0}.brand-opening-enter{font-size:11px;min-height:40px;padding:9px 17px;gap:33px}.brand-opening-foot{left:29px;right:29px;bottom:31px;gap:12px;font-size:8px;letter-spacing:1px}}
@media(max-height:620px) and (min-width:681px){.brand-opening-stage{grid-template-columns:210px 1fr;gap:45px;max-width:820px}.brand-opening-person{height:65dvh}.brand-opening-copy>h1{font-size:66px;margin-top:8px}.brand-opening-copy>p{font-size:12px;margin:15px 0}.brand-opening-corner{top:30px}.brand-opening-skip{top:21px}.brand-opening-foot{bottom:27px}}
@media(max-height:650px) and (max-width:680px){.brand-opening-person{height:30dvh;width:165px;margin-top:15px}.brand-opening-copy>h1{font-size:45px}.brand-opening-copy>p{font-size:11px;margin:10px 0}.brand-opening-foot{bottom:24px}}
@media(prefers-reduced-motion:reduce){html:not([data-motion-preview='on']) .companion *,html:not([data-motion-preview='on']) .brand-opening,html:not([data-motion-preview='on']) .brand-opening *{animation:none!important;transition:none!important}html:not([data-motion-preview='on']) .companion-lean{transform:none!important}}

/* The loading gate owns its lifetime; only readiness starts the exit. */
.brand-opening.is-leaving{animation:brandOpeningOut .45s ease-in both}
.brand-opening.is-preparing .brand-opening-person{opacity:0;animation-play-state:paused}
.brand-opening.is-preparing .brand-opening-person img{animation-play-state:paused}
.brand-opening.is-preparing .brand-opening-copy>h1>span,.brand-opening.is-preparing .brand-opening-copy>h1>i{animation:none;opacity:1}
.brand-opening-person[hidden],.opening-recovery[hidden]{display:none}
.opening-load{margin:18px 0 16px;font-size:11px;line-height:1.8;color:var(--muted);max-width:320px}
.opening-meter{height:2px;border-radius:5px;background:var(--line);overflow:hidden;margin-top:13px}
.opening-meter i{display:block;width:0;height:100%;background:var(--accent);transition:width .28s ease-out}
.brand-opening-enter:disabled{opacity:.55;cursor:progress}
.opening-recovery{display:flex;gap:20px;flex-wrap:wrap;margin-top:16px;font-size:12px}
.opening-recovery button{min-height:44px;color:var(--accent);text-decoration:underline;text-underline-offset:4px}
.brand-opening-copy>p{margin-bottom:16px}
.image-unavailable{background:var(--accent-soft);position:relative}
.image-unavailable img{visibility:hidden}
.image-unavailable:before{content:'画面暂未加载';position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:12px}
@media(max-width:680px){.opening-load{font-size:11px;margin:12px 0}.brand-opening-stage{margin-top:-15px}.brand-opening-person{height:min(32dvh,260px)}.brand-opening-foot{bottom:18px}.brand-opening-enter{min-height:44px}.opening-recovery{font-size:11px;gap:16px}}
.brand-opening.is-suspended,.brand-opening.is-suspended *,.brand-opening.is-suspended:before,.brand-opening.is-suspended:after{animation-play-state:paused!important}
.image-pending{background:var(--accent-soft)}.image-pending>.cover-image{opacity:0}.cover-image{transition:opacity .45s ease,transform .7s cubic-bezier(.2,.7,.2,1)}