.interactive-character {
    --look-x: 0px;
    --look-y: 0px;
    --look-r: 0deg;
    --look-scale-x: 1;
    --character-frame-blend: 52ms;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --character-dock-offset: 0px;
    --safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--character-dock-offset));
    --safe-left: env(safe-area-inset-left, 0px);
    position: fixed;
    z-index: 2147483000;
    width: var(--character-width);
    color: #654e48;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
    pointer-events: none;
    isolation: isolate;
    overflow: visible;
    transition: opacity .25s ease, visibility .25s ease;
}

.interactive-character.is-left:not(.is-custom-position) {
    left: 8px;
    left: max(8px, env(safe-area-inset-left));
    right: auto;
    top: auto;
    bottom: var(--character-dock-offset);
    bottom: max(var(--character-dock-offset), env(safe-area-inset-bottom, 0px));
}

.interactive-character.is-right:not(.is-custom-position) {
    right: 8px;
    right: max(8px, env(safe-area-inset-right));
    left: auto;
    top: auto;
    bottom: var(--character-dock-offset);
    bottom: max(var(--character-dock-offset), env(safe-area-inset-bottom, 0px));
}

.interactive-character.mode-half.is-left:not(.is-custom-position) .interactive-character__stage {
    transform: translateX(22%);
}

.interactive-character.mode-half.is-right:not(.is-custom-position) .interactive-character__stage {
    transform: translateX(-22%);
}

.interactive-character.is-top:not(.is-custom-position) {
    left: calc(50% - var(--character-width) / 2);
    right: auto;
    top: 8px;
    top: max(8px, env(safe-area-inset-top));
    bottom: auto;
}

.interactive-character.is-hidden {
    visibility: hidden;
    opacity: 0;
}

.interactive-character__stage {
    position: relative;
    width: 100%;
    height: var(--character-height);
    overflow: visible;
    cursor: grab;
    outline: none;
    pointer-events: auto;
    z-index: 1;
    touch-action: none;
    filter: drop-shadow(0 18px 16px rgba(86, 59, 50, .16));
}

.interactive-character.mode-half .interactive-character__stage {
    height: var(--character-half-height);
    overflow: visible;
    border-radius: 46% 46% 0 0 / 12% 12% 0 0;
}

.interactive-character__stage:focus-visible {
    filter: drop-shadow(0 18px 18px rgba(86, 59, 50, .2))
        drop-shadow(0 0 5px rgba(217, 172, 163, .8));
}

.interactive-character.is-dragging .interactive-character__stage {
    cursor: grabbing;
    filter: drop-shadow(0 22px 20px rgba(86, 59, 50, .24));
}

.interactive-character__figure,
.interactive-character__look {
    position: absolute;
    inset: 0;
    transform-origin: 50% 85%;
}

.interactive-character__look {
    pointer-events: none;
    animation: interactive-character-breathe 4.6s ease-in-out infinite;
}

.interactive-character__figure {
    transform: translateZ(0);
    transform-origin: 50% 82%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
}

.interactive-character__pose,
.interactive-character__motion,
.interactive-character__sprite,
.interactive-character__spine-canvas {
    position: absolute;
    inset: 0;
}

.interactive-character__spine-canvas {
    z-index: 4;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
}

.interactive-character.engine-spine .interactive-character__look {
    animation: none;
}

/*
 * Transparent WebGL canvases must remain in one stable compositor layer.
 * CSS filter/3D/action animations on their ancestors force Chromium to
 * recreate that layer while Spine swaps attachments, which presents as
 * repeated full-model flashing on some GPUs.
 */
.interactive-character.engine-spine .interactive-character__stage,
.interactive-character.engine-spine.is-dragging .interactive-character__stage,
.interactive-character.engine-spine .interactive-character__stage:focus-visible {
    filter: none;
}

.interactive-character.engine-spine .interactive-character__figure {
    transform: none;
    transform-style: flat;
    backface-visibility: visible;
    will-change: auto;
}

.interactive-character.engine-spine .interactive-character__figure[class*="action-"] {
    animation: none !important;
}

.interactive-character.engine-spine .interactive-character__spine-canvas {
    transform: none;
    backface-visibility: visible;
    transition: none;
    will-change: auto;
}

.interactive-character.is-spine-ready .interactive-character__spine-canvas {
    opacity: 1;
}

.interactive-character.is-spine-ready .interactive-character__pose,
.interactive-character.is-spine-ready .interactive-character__motion {
    visibility: hidden;
    opacity: 0;
}

.interactive-character__pose {
    z-index: 1;
    opacity: 0;
    transition: opacity .14s ease;
}

.interactive-character__pose.is-active {
    opacity: 1;
}

.interactive-character__motion {
    z-index: 2;
    visibility: hidden;
    opacity: 0;
    background-position: center bottom;
    transition: opacity var(--character-frame-blend) linear;
    will-change: opacity;
}

.interactive-character__motion.is-active {
    visibility: visible;
    opacity: 1;
}

.interactive-character.is-pose-sequence .interactive-character__pose {
    visibility: hidden;
    opacity: 0;
    transition: none;
}

.interactive-character__sprite {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
    user-select: none;
    -webkit-user-drag: none;
    backface-visibility: hidden;
}

.interactive-character.mode-half .interactive-character__figure {
    top: 0;
    right: auto;
    bottom: auto;
    left: -30%;
    width: 160%;
    height: var(--character-half-height);
    overflow: hidden;
}

.interactive-character.mode-half .interactive-character__look {
    top: 0;
    left: 5%;
    width: 90%;
    height: var(--character-half-puppet-height);
    right: auto;
    bottom: auto;
}

.interactive-character__bubble {
    box-sizing: border-box;
    position: fixed;
    z-index: 30;
    width: min(250px, 66vw);
    min-height: 42px;
    padding: 12px 15px;
    border: 1px solid color-mix(in srgb, var(--site-accent, #caa297) 38%, transparent);
    border-radius: 16px 16px 16px 5px;
    color: var(--site-text, #604944);
    background:
        linear-gradient(
            145deg,
            color-mix(in srgb, var(--site-surface, #fffdf8) 97%, transparent),
            color-mix(in srgb, var(--site-surface, #fff4ef) 90%, var(--site-accent, #caa297))
        );
    box-shadow: 0 12px 30px color-mix(in srgb, var(--site-primary-deep, #64443d) 16%, transparent);
    font-size: 14px;
    line-height: 1.65;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: none;
}

.interactive-character__bubble.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.interactive-character__bubble:after {
    position: absolute;
    top: var(--bubble-tail-top, 30px);
    width: 14px;
    height: 14px;
    border-top: 1px solid color-mix(in srgb, var(--site-accent, #caa297) 38%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--site-accent, #caa297) 38%, transparent);
    background: color-mix(in srgb, var(--site-surface, #fff8f4) 91%, var(--site-accent, #caa297));
    content: "";
}

.interactive-character__bubble.is-side-left:after {
    right: -8px;
    transform: rotate(45deg);
}

.interactive-character__bubble.is-side-right:after {
    left: -8px;
    transform: rotate(-135deg);
}

.interactive-character__bubble.is-above:after {
    top: auto;
    right: auto;
    bottom: -8px;
    left: var(--bubble-tail-left, calc(50% - 7px));
    transform: rotate(135deg);
}

.interactive-character__bubble.is-below:after {
    top: -8px;
    right: auto;
    left: var(--bubble-tail-left, calc(50% - 7px));
    transform: rotate(-45deg);
}

.interactive-character__tools {
    position: absolute;
    z-index: 40;
    bottom: 16px;
    display: flex;
    gap: 6px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity .2s ease, transform .2s ease;
    pointer-events: auto;
}

.interactive-character.is-right .interactive-character__tools {
    right: 10px;
}

.interactive-character.is-left .interactive-character__tools {
    left: 10px;
}

.interactive-character.is-top .interactive-character__tools {
    left: calc(50% - 35px);
}

.interactive-character:hover .interactive-character__tools,
.interactive-character:focus-within .interactive-character__tools {
    opacity: 1;
    transform: translateY(0);
}

.interactive-character__tool,
.interactive-character__restore {
    border: 1px solid color-mix(in srgb, var(--site-accent, #c1968d) 42%, transparent);
    color: var(--site-heading, #76564f);
    background: color-mix(in srgb, var(--site-surface, #fffaf6) 92%, transparent);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--site-primary-deep, #5b3d37) 14%, transparent);
    cursor: pointer;
    font: 600 12px/1 "Microsoft YaHei", sans-serif;
    backdrop-filter: blur(8px);
}

.interactive-character__tool {
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: 50%;
}

.interactive-character__tool:hover,
.interactive-character__tool:focus-visible,
.interactive-character__restore:hover,
.interactive-character__restore:focus-visible {
    border-color: var(--site-accent, #d6a49a);
    color: var(--site-link-hover, #9b5e53);
    background: var(--site-surface, #fff);
    outline: none;
    transform: translateY(-1px);
}

.interactive-character__restore {
    --character-dock-offset: 0px;
    position: fixed;
    z-index: 2147482999;
    bottom: calc(18px + var(--character-dock-offset));
    bottom: calc(18px + max(var(--character-dock-offset), env(safe-area-inset-bottom, 0px)));
    display: none;
    padding: 10px 14px;
    border-radius: 999px;
}

.interactive-character__restore.is-left {
    left: 18px;
}

.interactive-character__restore.is-right {
    right: 18px;
}

.interactive-character__restore.is-top {
    top: 12px;
    top: max(12px, env(safe-area-inset-top));
    bottom: auto;
    left: 50%;
    transform: translateX(-50%);
}

.interactive-character__restore.is-top:hover,
.interactive-character__restore.is-top:focus-visible {
    transform: translate(-50%, -1px);
}

.interactive-character__restore.is-visible {
    display: block;
}

/*
 * 旧版 live2d-widget 将对话框放在 canvas 前面创建，却没有设置兄弟层级；
 * canvas 作为后绘制元素会遮住对话框。以下规则与 show.js 的位置类配合，
 * 同时解决遮挡、容器裁切和桌面端气泡压在人物脸上的问题。
 */
#live2d-widget.live2d-widget-container {
    position: fixed !important;
    overflow: visible !important;
    isolation: isolate;
}

/*
 * 旧 Live2D 模型的贴底兜底值。show.js 加载后会写入更精确的
 * 小幅响应式负偏移；这里负责消除组件异步初始化期间的悬浮跳动。
 */
#live2d-widget.live2d-position-left,
#live2d-widget.live2d-position-right {
    top: auto !important;
    bottom: -5px !important;
}

#live2d-widget #live2dcanvas {
    z-index: 1 !important;
}

#live2d-widget .live2d-widget-dialog-container {
    z-index: 3 !important;
    width: 300px !important;
    max-width: calc(100vw - 24px);
    overflow: visible !important;
    pointer-events: none !important;
}

/* Give legacy Live2D dialogs the same clear speaker relationship as the
 * interactive character: a small themed pointer always aims at the measured
 * head/cheek anchor, including after viewport changes. */
#live2d-widget .live2d-widget-dialog-container:after {
    position: absolute;
    z-index: 0;
    width: 14px;
    height: 14px;
    border-top: 1px solid color-mix(in srgb, var(--site-accent, #caa297) 45%, transparent);
    border-right: 1px solid color-mix(in srgb, var(--site-accent, #caa297) 45%, transparent);
    background: color-mix(in srgb, var(--site-surface, #fff8f4) 94%, var(--site-accent, #caa297));
    content: none;
}

#live2d-widget .live2d-widget-dialog-container.live2d-dialog-visible.live2d-bubble-side-left:after,
#live2d-widget .live2d-widget-dialog-container.live2d-dialog-visible.live2d-bubble-side-right:after,
#live2d-widget .live2d-widget-dialog-container.live2d-dialog-visible.live2d-bubble-above:after,
#live2d-widget .live2d-widget-dialog-container.live2d-dialog-visible.live2d-bubble-below:after {
    content: "";
}

#live2d-widget .live2d-widget-dialog-container.live2d-bubble-side-left:after {
    top: var(--live2d-tail-top, 30px);
    right: 5px;
    transform: rotate(45deg);
}

#live2d-widget .live2d-widget-dialog-container.live2d-bubble-side-right:after {
    top: var(--live2d-tail-top, 30px);
    left: 5px;
    transform: rotate(-135deg);
}

#live2d-widget .live2d-widget-dialog-container.live2d-bubble-above:after {
    right: auto;
    bottom: -1px;
    left: var(--live2d-tail-left, calc(50% - 7px));
    transform: rotate(135deg);
}

#live2d-widget .live2d-widget-dialog-container.live2d-bubble-below:after {
    top: -1px;
    right: auto;
    left: var(--live2d-tail-left, calc(50% - 7px));
    transform: rotate(-45deg);
}

#live2d-widget .live2d-widget-dialog {
    position: relative;
    z-index: 1;
    color: var(--site-text, #604944) !important;
    border-color: color-mix(in srgb, var(--site-accent, #caa297) 45%, transparent) !important;
    background: color-mix(in srgb, var(--site-surface, #fff8f4) 96%, var(--site-accent, #caa297)) !important;
}

/*
 * 旧组件异步写入 absolute/right/bottom。JS 会在每次显示时改为 fixed，
 * 以下仅在脚本尚未完成定位时提供贴近头肩区域的兜底坐标。
 */
@media (min-width: 641px) {
    #live2d-widget.live2d-position-right .live2d-widget-dialog-container {
        top: auto !important;
        right: 55% !important;
        bottom: 42% !important;
        left: auto !important;
    }

    #live2d-widget.live2d-position-left .live2d-widget-dialog-container {
        top: auto !important;
        right: auto !important;
        bottom: 42% !important;
        left: 55% !important;
    }
}

.interactive-character__figure.action-nod {
    animation: interactive-character-nod 1.1s cubic-bezier(.45, 0, .2, 1) both;
}

.interactive-character__figure.action-shake {
    animation: interactive-character-shake 1.35s cubic-bezier(.45, 0, .2, 1) both;
}

.interactive-character__figure.action-head-tilt {
    animation: interactive-character-head-tilt 1.8s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-sway {
    animation: interactive-character-sway 2.6s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-bounce {
    animation: interactive-character-bounce .95s cubic-bezier(.22, 1, .36, 1) both;
}

.interactive-character__figure.action-lean {
    animation: interactive-character-lean 2.2s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-startled {
    animation: interactive-character-startled .85s cubic-bezier(.22, 1, .36, 1) both;
}

.interactive-character__figure.action-turn-left {
    animation: interactive-character-frame-turn-left 1.3s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-turn-right {
    animation: interactive-character-frame-turn-right 1.3s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-shift-weight {
    animation: interactive-character-shift-weight 2.4s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-wave {
    animation: interactive-character-frame-wave 1.42s cubic-bezier(.4, 0, .2, 1) both;
}

.interactive-character__figure.action-hands-chest {
    animation: interactive-character-frame-hands-chest 1.62s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes interactive-character-breathe {
    0%, 100% {
        transform: translate3d(var(--look-x), var(--look-y), 0)
            rotate(var(--look-r)) scaleX(var(--look-scale-x)) scaleY(1);
    }
    50% {
        transform: translate3d(var(--look-x), calc(var(--look-y) - 1.8px), 0)
            rotate(var(--look-r)) scaleX(var(--look-scale-x)) scaleY(1.004);
    }
}

@keyframes interactive-character-nod {
    0%, 100% { transform: translateY(0) rotate(0); }
    38% { transform: translateY(2.5px) rotate(.45deg); }
    68% { transform: translateY(-1px) rotate(-.25deg); }
}

@keyframes interactive-character-shake {
    0%, 100% { transform: translateX(0) rotate(0); }
    24% { transform: translateX(-2.4px) rotate(-.35deg); }
    52% { transform: translateX(2.4px) rotate(.35deg); }
    76% { transform: translateX(-1.4px) rotate(-.2deg); }
}

@keyframes interactive-character-head-tilt {
    0%, 100% { transform: translateX(0) rotate(0); }
    34%, 70% { transform: translateX(1.5px) rotate(1.05deg); }
}

@keyframes interactive-character-frame-turn-left {
    0%, 100% { transform: translateX(0) rotate(0); }
    28%, 72% { transform: translateX(1.5px) rotate(.12deg); }
}

@keyframes interactive-character-frame-turn-right {
    0%, 100% { transform: translateX(0) rotate(0); }
    28%, 72% { transform: translateX(-1.5px) rotate(-.12deg); }
}

@keyframes interactive-character-frame-wave {
    0%, 100% { transform: translateY(0) rotate(0); }
    38% { transform: translateY(-1.5px) rotate(-.15deg); }
    72% { transform: translateY(-.5px) rotate(.08deg); }
}

@keyframes interactive-character-frame-hands-chest {
    0%, 100% { transform: translateY(0) scale(1); }
    36%, 72% { transform: translateY(-1px) scale(1.002); }
}

@keyframes interactive-character-sway {
    0%, 100% { transform: rotate(0); }
    25% { transform: rotate(-.75deg) translateX(-1px); }
    50% { transform: rotate(0) translateX(0); }
    75% { transform: rotate(.75deg) translateX(1px); }
}

@keyframes interactive-character-shift-weight {
    0%, 100% { transform: translateX(0) rotate(0) scaleY(1); }
    26%, 46% { transform: translateX(-2px) rotate(-.35deg) scaleY(.999); }
    68%, 84% { transform: translateX(2px) rotate(.35deg) scaleY(1.001); }
}

@keyframes interactive-character-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    35% { transform: translateY(-8px) scale(1.006, .994); }
    65% { transform: translateY(2px) scale(.995, 1.008); }
}

@keyframes interactive-character-lean {
    0%, 100% { transform: rotate(0) translateX(0); }
    45%, 65% { transform: rotate(-1.25deg) translateX(-2px); }
}

@keyframes interactive-character-startled {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-10px) scale(1.025); }
    55% { transform: translateY(1px) scale(.99, 1.015); }
}

@media (max-width: 760px) {
    /* JS replaces this fallback with the measured fixed-navigation height. */
    .interactive-character,
    .interactive-character__restore {
        --character-dock-offset: 44px;
    }

    #live2d-widget.live2d-position-left,
    #live2d-widget.live2d-position-right {
        bottom: 39px !important;
    }

    #live2d-widget .live2d-widget-dialog-container {
        width: 46vw !important;
        min-width: 140px;
        max-width: 220px;
        transform: none !important;
    }

    #live2d-widget .live2d-widget-dialog {
        padding: 10px !important;
        border-width: 1px !important;
        font-size: 14px !important;
        line-height: 1.5 !important;
    }

    .interactive-character__bubble {
        width: min(220px, calc(100vw - 24px));
        max-height: min(36vh, 168px);
        overflow: hidden;
        padding: 10px 12px;
        font-size: 12px;
        line-height: 1.6;
    }

    .interactive-character__stage {
        touch-action: pan-y;
    }

    .interactive-character__tools {
        gap: 8px;
        opacity: .8;
        transform: none;
    }

    .interactive-character__tool {
        width: 42px;
        height: 42px;
        font-size: 13px;
    }

    .interactive-character__restore {
        min-width: 48px;
        min-height: 44px;
        padding: 11px 15px;
    }
}

@media (max-width: 640px) {
    #live2d-widget.live2d-position-left,
    #live2d-widget.live2d-position-right {
        bottom: 41px !important;
    }

    #live2d-widget.live2d-position-right .live2d-widget-dialog-container {
        top: auto !important;
        right: 10% !important;
        bottom: 78% !important;
        left: auto !important;
    }

    #live2d-widget.live2d-position-left .live2d-widget-dialog-container {
        top: auto !important;
        right: auto !important;
        bottom: 78% !important;
        left: 10% !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .interactive-character *,
    .interactive-character *:before,
    .interactive-character *:after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
    }
}