.vn-shell{max-width:1180px;height:100dvh;min-height:640px;margin:auto;display:flex;flex-direction:column;background:#152a2e;color:#f7f3e9;overflow:hidden}.vn-top{display:flex;align-items:center;justify-content:space-between;padding:15px 26px;background:#18353a;gap:12px}.vn-brand{font-family:var(--serif);font-size:23px;letter-spacing:3px}.vn-route{font-size:13px;color:#d1d9d1;margin-left:24px}.vn-small{background:transparent;border:1px solid #a9baad;color:inherit;border-radius:5px;padding:9px 14px;font-size:14px;min-height:42px}.vn-stage{position:relative;flex:1;min-height:220px;overflow:hidden}.vn-backdrop{position:absolute;inset:0;background-image:url('rooms.png');background-size:200% 100%;background-position:left center;animation:sceneIn .6s ease-out}.vn-backdrop.office{background-position:right center}.vn-backdrop.bakery{background-image:url('bakery.png');background-size:cover;background-position:center 50%}.vn-shade{position:absolute;inset:0;background:linear-gradient(0deg,#152a2e99,transparent 65%)}.vn-place{position:absolute;top:18px;left:24px;background:#17363de8;padding:10px 16px;font-size:14px;letter-spacing:1px}.vn-place span{margin-left:16px;color:#d4dcca}.vn-portrait{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);height:98%;aspect-ratio:1;background-image:url('portraits.png');background-size:300% 300%;background-repeat:no-repeat;animation:characterIn .3s ease-out;filter:drop-shadow(0 7px 12px #0e202140)}.vn-perspective{position:absolute;bottom:15px;right:24px;font-size:13px;padding:7px 12px;background:#193840bd}.vn-dialogue{flex-shrink:0;position:relative;padding:25px 32px 18px;background:#142d33;border-top:3px solid #bdab70;min-height:210px}.vn-speaker{font-family:var(--serif);font-size:22px;color:#f1d99b;margin-bottom:13px}.vn-speaker span{font:12px 'Noto Sans TC',sans-serif;color:#b7c8c2;margin-left:18px}.vn-line{display:block;width:100%;text-align:left;color:#fffaf0;background:transparent;border:0;padding:0;min-height:75px;font-size:19px;line-height:1.9}.vn-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:12px;gap:15px}.vn-bottom>span{font-size:12px;color:#b7c8c2}.vn-decisions{display:grid;gap:9px}.vn-choice{display:flex;justify-content:space-between;gap:10px;padding:12px 17px;text-align:left;background:#25474c;color:#fffaf0;border:1px solid #8caaa2;border-radius:6px;font-size:16px;line-height:1.7}.vn-choice:hover{background:#365c5d}.vn-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}#vn-history{max-width:680px;width:90%;max-height:85dvh;border:1px solid #9aafa1;border-radius:8px;background:#f7f3e9;color:#294846;padding:24px}#vn-history::backdrop{background:#071d27b8}.vn-records p{line-height:1.9;border-bottom:1px solid #d0d9cc;padding-bottom:14px}.vn-endpage{max-width:660px;margin:auto;background:var(--paper);min-height:100dvh}.vn-shell .vn-small:focus-visible,.vn-choice:focus-visible,.vn-line:focus-visible{outline:3px solid #f1d99b;outline-offset:3px}@keyframes sceneIn{from{opacity:.6}to{opacity:1}}@keyframes characterIn{from{opacity:.6;transform:translateX(-48%)}to{opacity:1;transform:translateX(-50%)}}@media(max-width:700px){.vn-shell{min-height:560px}.vn-top{padding:10px 15px}.vn-brand{font-size:20px}.vn-route{display:block;margin:3px 0 0;font-size:12px}.vn-stage{min-height:160px}.vn-place{left:12px;top:12px;font-size:12px;padding:7px 10px}.vn-place span{margin-left:8px}.vn-dialogue{padding:17px 19px 15px;min-height:235px;max-height:50dvh;overflow:auto}.vn-line{font-size:17px;line-height:1.85;min-height:100px}.vn-speaker{font-size:20px}.vn-choice{font-size:15px;padding:10px 12px}.vn-portrait{height:auto;width:min(105%,520px);max-height:none;aspect-ratio:1;bottom:0}.vn-bottom>span{max-width:160px}.vn-perspective{right:12px;bottom:10px}.vn-backdrop{background-size:auto 100%;background-image:url('rooms.png');width:200%;}.vn-backdrop.home{left:0}.vn-backdrop.office{left:-100%}.vn-backdrop.bakery{width:100%;left:0;background-size:cover}}
@media(max-width:700px){.vn-portrait{height:100%;width:auto;aspect-ratio:1}.vn-backdrop,.vn-backdrop.home,.vn-backdrop.office{left:0;width:100%;background-size:200% 100%}.vn-backdrop.office{background-position:right center}.vn-backdrop.home{background-position:left center}.vn-backdrop.bakery{background-size:cover}}

/* First-person identity stays outside the scene; only the current speaker appears. */
.vn-identity{display:flex;align-items:center;gap:12px;min-width:0}.vn-self-avatar{display:block;width:48px;height:48px;flex-shrink:0;border-radius:50%;background-image:url('portraits.png');background-size:300% 300%;background-color:#d4ded6;border:2px solid #c6b47d}.vn-route{display:block;margin:3px 0 0;font-size:14px}.vn-thought{background:#29333f;border-top-color:#b6b8d5}.vn-thought .vn-speaker{color:#d9d9f0}.vn-narration{background:#263934}.vn-speaker span{font-size:14px}.vn-perspective{font-size:14px}.vn-portrait{animation:characterIn .3s ease-out}.vn-shell{height:auto;min-height:100dvh}.vn-stage{flex:auto;height:46dvh;min-height:220px}.vn-dialogue{min-height:250px}.vn-top{flex-shrink:0}@media(max-width:700px){.vn-top{gap:8px}.vn-brand{font-size:18px}.vn-self-avatar{width:38px;height:38px}.vn-route{font-size:14px;line-height:1.5}.vn-identity{gap:8px}.vn-top .vn-small{padding:8px;flex-shrink:0}.vn-stage{height:38dvh;min-height:190px}.vn-dialogue{max-height:none;overflow:visible}.vn-speaker span{display:block;margin:5px 0 0}.vn-choice{font-size:16px}}@media(prefers-reduced-motion:reduce){.vn-portrait,.vn-backdrop{animation:none}}

.vn-role-art{display:block;float:right;width:100px;height:100px;background-image:url('portraits.png');background-size:300% 300%;margin:0 0 8px 12px}.rolecard{display:flow-root}@media(max-width:380px){.vn-role-art{width:76px;height:76px}}

.vn-counterpart{height:90%;bottom:0;border-radius:18px 18px 0 0;box-shadow:0 0 40px #142d3360;max-width:90%}@media(max-width:700px){.vn-counterpart{height:88%;width:auto}}