* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: #24364b; background: #f2f5f8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.app-shell { width: 100%; height: 100%; height: 100dvh; display: flex; flex-direction: column; }
.topbar { position: relative; z-index: 5; flex: 0 0 auto; min-height: calc(44px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 12px 0; display: flex; align-items: center; background: #fff; box-shadow: 0 1px 4px #20334a12; }
.close-button, .topbar-spacer { flex: 0 0 52px; width: 52px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.close-button { padding: 0; border: 0; background: transparent; color: #24364b; cursor: pointer; }
.work-title { flex: 1; min-width: 0; margin: 0; overflow: hidden; color: #24364b; font-size: 15px; font-weight: 700; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.status { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; color: #7d8b9a; text-align: center; }
.status[hidden], .viewer[hidden] { display: none; }
.viewer { position: relative; flex: 1; min-height: 0; overflow: hidden; touch-action: pan-y; }
.stage { position: absolute; inset: 0; overflow: hidden; }
.page-frame { position: absolute; left: 0; top: 0; width: 375px; height: 667px; transform-origin: top left; overflow: hidden; box-shadow: 0 8px 30px #11243a22; }
.render-page { position: absolute; inset: 0; overflow: hidden; background-position: center; background-repeat: no-repeat; background-size: cover; }
.render-element { position: absolute; box-sizing: border-box; overflow: hidden; transform-origin: center center; }
.render-element img, .render-element video { display: block; width: 100%; height: 100%; object-fit: cover; }
.render-element.type-text, .render-element.type-button { display: flex; white-space: pre-wrap; word-break: break-word; }
.render-element.type-shape { min-width: 0; }
.type-video { background: #0f1b2a; }
.video-poster { position: absolute; inset: 0; z-index: 1; }
.actionable { cursor: pointer; }
.page-enter { animation: page-enter .32s both; }
@keyframes page-enter { from { opacity: .35; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.video-play { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; border: 0; border-radius: 50%; color: white; background: #0b1a2bcc; transform: translate(-50%, -50%); cursor: pointer; }
.page-count { position: absolute; z-index: 3; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); padding: 7px 12px; border-radius: 16px; color: #fff; background: #17263899; font-size: 12px; transform: translateX(-50%); pointer-events: none; }
.page-nav { position: absolute; z-index: 4; top: 50%; width: 40px; height: 56px; padding: 0; border: 0; border-radius: 8px; color: #fff; background: #17263855; font-size: 34px; line-height: 1; transform: translateY(-50%); cursor: pointer; }
.page-nav:disabled { opacity: .18; }
.page-nav.prev { left: 10px; }
.page-nav.next { right: 10px; }
.element-enter-fade { animation: enter-fade .56s both; }
.element-enter-up { animation: enter-up .6s both; }
.element-enter-zoom { animation: enter-zoom .6s both; }
@keyframes enter-fade { from { opacity: 0; } to { opacity: var(--element-opacity, 1); } }
@keyframes enter-up { from { opacity: 0; transform: translateY(18px) rotate(var(--rotation, 0deg)); } to { opacity: var(--element-opacity, 1); transform: rotate(var(--rotation, 0deg)); } }
@keyframes enter-zoom { from { opacity: 0; transform: scale(.78) rotate(var(--rotation, 0deg)); } to { opacity: var(--element-opacity, 1); transform: rotate(var(--rotation, 0deg)); } }
.digital-human[hidden], .dh-panel[hidden] { display: none; }
.digital-human { position: fixed; z-index: 20; left: max(12px, env(safe-area-inset-left)); bottom: max(14px, env(safe-area-inset-bottom)); }
.dh-toggle { display: flex; align-items: flex-end; gap: 6px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dh-avatar { display: block; width: 88px; height: 158px; }
.dh-avatar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.dh-name { margin-bottom: 8px; padding: 5px 8px; border-radius: 12px; color: #fff; background: #172638b8; font-size: 12px; }
.dh-panel { position: absolute; left: 0; bottom: 100%; width: min(320px, calc(100vw - 24px)); height: min(420px, 60vh); margin-bottom: 8px; display: flex; flex-direction: column; overflow: hidden; border: 1px solid #e4eaf1; border-radius: 16px; background: #fff; box-shadow: 0 10px 32px #10233b2b; }
.dh-header { min-height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #edf1f5; }
.dh-header button { width: 36px; height: 36px; border: 0; color: #536579; background: transparent; font-size: 24px; }
.dh-messages { flex: 1; min-height: 0; padding: 10px; overflow: auto; }
.dh-message { max-width: 86%; width: fit-content; margin: 0 0 8px; padding: 9px 11px; border-radius: 12px; background: #f1f5f9; font-size: 13px; line-height: 1.5; white-space: pre-wrap; }
.dh-message.user { margin-left: auto; color: #fff; background: #1769e0; }
.dh-questions { max-height: 74px; padding: 0 8px; display: flex; gap: 6px; overflow-x: auto; }
.dh-question { flex: 0 0 auto; min-height: 34px; padding: 0 10px; border: 1px solid #d8e5f5; border-radius: 17px; color: #1769e0; background: #f7fbff; font-size: 12px; }
.dh-form { padding: 8px; display: flex; gap: 6px; border-top: 1px solid #edf1f5; }
.dh-form input { flex: 1; min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #dce4ed; border-radius: 8px; outline: 0; font-size: 13px; }
.dh-form button { padding: 0 14px; border: 0; border-radius: 8px; color: #fff; background: #1769e0; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; scroll-behavior: auto !important; } }