/* 场景、黏土铭牌与三张角色批注，共享同一横屏画布。 */
*{box-sizing:border-box}
:root{color-scheme:light;color:#49392e;font-family:"Microsoft YaHei","PingFang SC",sans-serif;text-size-adjust:none;-webkit-text-size-adjust:none}
body{margin:0;background:#f3e5d2;min-height:100svh;display:grid;place-items:center;overflow:hidden}
main{width:min(100vw,calc(100svh * 1672 / 941))}
.scene{margin:0;width:100%;aspect-ratio:1672/941;container-type:inline-size}
.stage{width:100%;height:100%}
.scene .background{display:block;width:100%;height:auto}
/* 独立透明黏土资产：上方浅色黏土吊牌与左下返回立牌。 */
/* 复用客服档案夹内的金色铭牌，按原图坐标展示该素材区域。 */
.scene-heading{position:absolute;z-index:4;left:1.5%;top:2%;transform:scale(.76);transform-origin:top left;width:23%;height:27%;padding:1.4cqw 1.9cqw 1.2cqw 2cqw;color:#49372c;pointer-events:none;isolation:isolate}
.identity-plaque-art{position:absolute;inset:0;z-index:-1;overflow:hidden;border-radius:.9cqw}
.identity-plaque-art img{position:absolute;display:block;width:112.483%;height:136.828%;object-fit:fill;max-width:none;left:-6.383%;top:-18.621%;pointer-events:none}
.scene-heading .identity-company{display:block;margin:0 0 .35cqw;font:600 1.4cqw/1.2 "Microsoft YaHei","PingFang SC",sans-serif;color:#724a31;white-space:nowrap}
.identity-company span{display:block;margin-top:.12cqw;font-size:1.05cqw;font-weight:400;line-height:1.2;color:#654e36}
.scene-heading h1{margin:0 0 .2cqw;font:700 2.4cqw/1.05 "Noto Serif SC","STSong","SimSun",serif;letter-spacing:.06cqw;color:#294859;white-space:nowrap}
.scene-heading .identity-track{margin:0 0 .4cqw;font:400 1.05cqw/1.3 "Microsoft YaHei","PingFang SC",sans-serif;color:#4b544d;white-space:nowrap}
.identity-tenure{display:grid;gap:.12cqw}
.tenure-label{font-size:.92cqw;line-height:1.25;color:#715a40}
.identity-period{display:flex;align-items:baseline;gap:.4cqw;white-space:nowrap;color:#51472f;font-variant-numeric:lining-nums tabular-nums}
.identity-period time{display:flex;align-items:baseline;line-height:1.3}
.identity-period .date-year{font-size:1.3cqw;font-weight:500}
.identity-period .date-month{font-size:1.13cqw}
.identity-period .date-connector{font-size:.95cqw;color:#715a40}
.return-tab{position:absolute;z-index:5;left:9.5%;top:73%;width:8.5%;height:19%;display:block;text-decoration:none;transition:transform .18s}
.return-tab img{display:block;width:100%;height:100%;object-fit:contain}
.return-tab:hover{transform:translateY(-2px)}
.return-tab:focus-visible{outline:2px solid #385f74;outline-offset:.35cqw;border-radius:1cqw}
.person{--person-accent:#a8442f}
.person-teller{--person-accent:#485c66}
.person-teller video{transform:scaleX(-1)}
.person-manager{--person-accent:#ad7e45;top:39.5%;left:68.4%;width:15.4%}
.person-hit::after{content:"+";position:absolute;right:-10%;top:9%;display:grid;place-items:center;width:1.5cqw;height:1.5cqw;min-width:10px;min-height:10px;border:1px solid #fbead0;border-radius:50%;background:var(--person-accent);color:#fff1dc;font:400 1.1cqw/1 sans-serif;box-shadow:0 0 0 3px #fbead048,0 2px 5px #49392e25;transition:transform .18s}
.person-hit:hover::after,.person-hit:focus-visible::after,.person.is-active .person-hit::after{transform:scale(1.2)}
.person-label{display:none}
.scene .bubble{--note-accent:#a8442f;--note-paper:#fff5e7;--note-backing:#dfc3ac;position:absolute;z-index:6;isolation:isolate;inset:auto;width:30%;height:auto;max-height:none;margin:0;padding:2.1cqw 2.4cqw 2.15cqw;color:#503e2d;border-radius:0;background:none;box-shadow:none;filter:none;transform:none;overflow:visible;animation:clay-reveal .16s ease-out}
/* 同色系磨砂玻璃：场景透出，文本保持清晰。 */
.scene .bubble::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(125deg,#fff5e1bf,#ede1cdae);border:0;border-radius:0;clip-path:url(#glass-outline);box-shadow:inset 0 1px 0 #fffdf3c0,inset 0 -1px 0 #9a80651c,0 .65cqw 1.5cqw #42332625;backdrop-filter:blur(15px) saturate(.85);-webkit-backdrop-filter:blur(15px) saturate(.85);filter:none}
.scene .bubble::after{display:none;content:none}
.scene .bubble h2{display:block;max-width:calc(100% - 1.2cqw);margin:0 0 1cqw;padding:0 0 .8cqw;border:0;border-bottom:1px solid #7d6b5030;border-radius:0;background:none;color:#4e4539;font:500 1.5cqw/1.35 "Microsoft YaHei","PingFang SC",sans-serif;letter-spacing:.025cqw;transform:none;box-shadow:none}
.scene .bubble h2::before,.scene .bubble h2::after{display:none}
.scene .bubble p{margin:0;font-size:1.06cqw;line-height:1.8;text-wrap:pretty}
.scene .bubble h3{font:600 .98cqw/1.4 "Microsoft YaHei","PingFang SC",sans-serif;color:#625949;margin:0 0 .35cqw;letter-spacing:.05cqw}
.note-detail+.note-detail,.note-intro+.note-detail{margin-top:.9cqw;padding-top:.85cqw;border-top:1px solid #ad906345}
.scene .bubble strong{white-space:nowrap;font-weight:600;color:#57472f;background:none;font-variant-numeric:tabular-nums;padding:0}
.scene .bubble[data-bubble=lobby]{left:34%;top:43%;bottom:auto;width:32%}
.scene .bubble[data-bubble=teller]{left:34%;top:60%;bottom:auto;width:33%;--note-accent:#485c66;--note-paper:#edf2f0;--note-backing:#bfcecf}
.scene .bubble[data-bubble=manager]{left:34%;top:51%;right:auto;bottom:auto;width:33%;--note-accent:#68764c;--note-paper:#f3f1e4;--note-backing:#cad1bb}
.scene .close-bubble{right:1.15cqw;top:1.1cqw;width:2.2cqw;height:2.2cqw;padding:0;border:0;border-radius:50%;background:transparent;box-shadow:none;color:#7d6449;font:400 1.5cqw/1 sans-serif;cursor:pointer;opacity:1}
.scene .close-bubble:hover{background:#e7d6b870;color:#49392e}
@keyframes clay-reveal{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:700px),(max-height:500px){
 .scene .bubble{position:absolute;inset:auto!important;margin:0;padding:2.1cqw 2.4cqw 2.15cqw;animation:none}
 .scene .bubble[data-bubble=lobby]{left:34%!important;top:43%!important;width:32%}
 .scene .bubble[data-bubble=teller]{left:34%!important;top:60%!important;width:33%}
 .scene .bubble[data-bubble=manager]{left:34%!important;top:51%!important;width:33%}
 .scene .bubble::after{display:none}
 .scene .bubble p{font-size:1.06cqw;line-height:1.8}
 .scene .bubble h2{font-size:1.5cqw}
 .person-hit::after{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.return-tab,.person-hit::after{transition:none}.scene .bubble{animation:none}}

.glass-definitions{position:absolute;pointer-events:none}
.glass-contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}

.person-manager video{opacity:1;mix-blend-mode:normal;filter:none}

.person-manager.is-active .character{transform:none}