.xiaoming-story-page {
    --story-pink: #df6f93;
    --story-pink-deep: #c75d80;
    --story-pink-soft: #fce8ed;
    --story-paper: rgba(255, 253, 250, .92);
    --story-ink: #66545a;
    --story-muted: #998c8e;
    min-height: 100svh;
    color: var(--story-ink);
}

.xiaoming-story-header { width: min(620px, calc(100% - 28px)); margin-bottom: 8px; }
.xiaoming-story-shell { width: min(620px, calc(100% - 28px)); margin: 0 auto; padding-bottom: 24px; }
.xiaoming-story-heading { padding: 4px 12px 0; text-align: center; }
.xiaoming-story-heading p { margin: 0 0 5px; color: #bc8796; font-size: 10px; font-weight: 650; letter-spacing: .2em; }
.xiaoming-story-heading h1 { margin: 0; color: #8e6873; font-size: clamp(23px, 6vw, 28px); font-weight: 650; line-height: 1.35; }
.xiaoming-story-heading span { display: block; margin-top: 6px; color: var(--story-muted); font-size: 13px; }
.xiaoming-story-view { margin-top: 12px; }
.xiaoming-story-view[hidden] { display: none !important; }
.xiaoming-story-stage { position: relative; width: min(100%, 390px); height: 360px; margin: 0 auto; overflow: hidden; }
.xiaoming-story-stars { position: absolute; inset: 0; color: #d7aa87; pointer-events: none; }
.xiaoming-story-stars i { position: absolute; font-size: 22px; font-style: normal; }
.xiaoming-story-stars .star-one { top: 48px; left: 8%; }
.xiaoming-story-stars .star-two { top: 64px; right: 9%; }
.xiaoming-story-stars .star-three { bottom: 50px; left: 14%; }
.xiaoming-story-stars .star-four { right: 12%; bottom: 62px; }
.xiaoming-story-shadow { position: absolute; bottom: 22px; left: 50%; width: 205px; height: 24px; border-radius: 50%; background: rgba(151, 126, 129, .16); filter: blur(5px); transform: translateX(-50%); }
.xiaoming-story-jar { position: absolute; z-index: 2; top: 8px; left: 50%; width: min(66%, 248px); transform: translateX(-50%); transform-origin: 50% 88%; }
.xiaoming-story-jar img,.xiaoming-story-note img { display: block; width: 100%; height: auto; user-select: none; -webkit-user-drag: none; }
.xiaoming-story-note { position: absolute; z-index: 3; width: 54px; opacity: 0; pointer-events: none; }
.xiaoming-story-note.note-one { top: 50%; left: calc(50% + 58px); }
.xiaoming-story-note.note-two { top: 53%; left: calc(50% - 28px); width: 58px; }
.xiaoming-story-note.note-three { top: 47%; left: calc(50% - 82px); width: 60px; }
.xiaoming-story-tip { min-height: 24px; margin: -2px 8px 12px; color: #827579; font-size: 14px; font-weight: 550; text-align: center; }
.xiaoming-story-button { display: inline-flex; min-height: 46px; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border: 1px solid transparent; border-radius: 999px; font: 600 14px/1.3 system-ui, sans-serif; cursor: pointer; transition: background-color .18s ease, border-color .18s ease, opacity .18s ease; }
.xiaoming-story-button:focus-visible { outline: 2px solid rgba(223, 111, 147, .35); outline-offset: 3px; }
.xiaoming-story-button:disabled { cursor: wait; opacity: .78; }
.xiaoming-story-button.is-primary { color: #fff; background: linear-gradient(135deg, #e79d9d, #df6f93); box-shadow: 0 5px 14px rgba(201, 116, 145, .17); }
.xiaoming-story-button.is-primary:hover { background: linear-gradient(135deg, #e58d98, #cf6487); }
.xiaoming-story-button.is-soft { color: #bd7188; border-color: rgba(217, 140, 154, .23); background: var(--story-paper); }
.xiaoming-story-button.is-soft:not(.is-saved):hover { border-color: rgba(217, 140, 154, .4); background: #fff; }
.xiaoming-story-view > [data-shake-button] { display: flex; width: min(100%, 360px); margin: 0 auto; }
.xiaoming-story-loading { display: none; gap: 4px; }
.xiaoming-story-loading i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; animation: story-dot .8s infinite ease-in-out; }
.xiaoming-story-loading i:nth-child(2) { animation-delay: .12s; }
.xiaoming-story-loading i:nth-child(3) { animation-delay: .24s; }
.xiaoming-story-button.is-loading .xiaoming-story-loading { display: inline-flex; }
.xiaoming-story-button.is-saved { color: #fff; border-color: transparent; background: #df6f93; }
.xiaoming-story-stage.is-shaking .xiaoming-story-jar { animation: story-jar-shake .9s cubic-bezier(.36,.07,.19,.97) 1 forwards; }
.xiaoming-story-stage.is-shaking .xiaoming-story-shadow { animation: story-shadow-pulse .9s ease-out 1 forwards; }
.xiaoming-story-stage.is-shaking .xiaoming-story-note { animation-duration: .9s; animation-timing-function: ease-out; animation-iteration-count: 1; animation-fill-mode: forwards; }
.xiaoming-story-stage.is-shaking .note-one { animation-name: story-note-one; }
.xiaoming-story-stage.is-shaking .note-two { animation-name: story-note-two; }
.xiaoming-story-stage.is-shaking .note-three { animation-name: story-note-three; }
.xiaoming-story-card { position: relative; min-height: 210px; overflow: hidden; padding: 28px 22px 23px; border: 1px solid rgba(206, 180, 174, .42); border-radius: 20px; background: repeating-linear-gradient(180deg, #fffdfa 0 30px, #f9f3ef 31px, #fffdfa 32px); box-shadow: 0 8px 20px rgba(87, 68, 72, .07); }
.xiaoming-story-card-tape { position: absolute; top: 0; left: 18px; width: 58px; height: 14px; background: repeating-linear-gradient(135deg, rgba(241, 218, 182, .72) 0 7px, rgba(231, 194, 139, .68) 7px 10px); transform: rotate(-5deg) translateY(-2px); }
.xiaoming-story-number { display: inline-flex; margin: 0 0 11px; padding: 5px 12px; border-radius: 99px; color: #bd7188; background: var(--story-pink-soft); font-size: 12px; font-weight: 700; letter-spacing: .05em; }
.xiaoming-story-copy { position: relative; z-index: 1; margin: 0; color: #604f54; font-family: var(--dream-font, system-ui, sans-serif); font-size: 18px; font-weight: 550; line-height: 1.8; overflow-wrap: anywhere; }
.xiaoming-story-source { display: flex; width: fit-content; justify-content: center; margin: 18px auto 0; color: #b76d82; font-size: 15px; text-decoration: none; }
.xiaoming-story-source::after { margin-left: 4px; content: "↗"; }
.xiaoming-story-source:hover { color: var(--story-pink-deep); text-decoration: underline; }
.xiaoming-story-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 12px; }
.xiaoming-story-actions .xiaoming-story-button { width: 100%; min-width: 0; min-height: 48px; padding: 0 8px; white-space: nowrap; font-size: clamp(11px, 3.3vw, 14px); }
.xiaoming-story-progress { margin-top: 18px; padding: 0 3px; }
.xiaoming-story-progress-copy { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #887b7e; font-size: 12px; }
.xiaoming-story-progress-copy strong { color: #bc7188; font-weight: 700; }
.xiaoming-story-progress-track { height: 8px; overflow: hidden; margin-top: 7px; border-radius: 99px; background: rgba(199, 173, 169, .25); }
.xiaoming-story-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e79d9d, #df6f93); transition: width .3s ease; }
.xiaoming-story-progress > p { min-height: 16px; margin: 7px 0 0; color: var(--story-muted); font-size: 11px; text-align: right; }
.xiaoming-story-credit { margin: 30px 8px 0; color: var(--story-muted); font-size: 13px; line-height: 1.6; text-align: center; }
.xiaoming-story-toast { position: fixed; z-index: 20; right: 18px; bottom: calc(82px + env(safe-area-inset-bottom)); left: 18px; width: fit-content; max-width: min(420px, calc(100% - 36px)); margin: auto; padding: 9px 14px; border-radius: 99px; color: white; background: rgba(78, 63, 69, .92); font-size: 12px; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.xiaoming-story-toast.is-visible { opacity: 1; transform: translateY(0); }

@keyframes story-jar-shake { 0%,100% { transform: translateX(-50%) rotate(0); } 14% { transform: translateX(-50%) rotate(-4deg); } 30% { transform: translateX(-50%) rotate(6deg); } 48% { transform: translateX(-50%) rotate(-3deg); } 64% { transform: translateX(-50%) rotate(2deg); } 80% { transform: translateX(-50%) rotate(-1deg); } }
@keyframes story-shadow-pulse { 0%,100% { transform: translateX(-50%) scaleX(1); opacity: .9; } 25% { transform: translateX(-50%) scaleX(.94); opacity: .8; } 55% { transform: translateX(-50%) scaleX(1.03); opacity: .95; } }
@keyframes story-note-one { 0% { transform: translate(0,18px) rotate(2deg) scale(.86); opacity: 0; } 28% { opacity: 1; } 100% { transform: translate(-45px,-116px) rotate(-18deg); opacity: 0; } }
@keyframes story-note-two { 0% { transform: translate(0,20px) scale(.82); opacity: 0; } 33% { opacity: 1; } 100% { transform: translate(0,-135px) rotate(8deg); opacity: 0; } }
@keyframes story-note-three { 0% { transform: translate(0,18px) rotate(-4deg) scale(.84); opacity: 0; } 23% { opacity: 1; } 100% { transform: translate(50px,-120px) rotate(22deg); opacity: 0; } }
@keyframes story-dot { 0%,100% { opacity: .35; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

@media (max-width: 430px) {
    .xiaoming-story-stage { height: 338px; }
    .xiaoming-story-jar { top: 6px; width: min(64%, 232px); }
    .xiaoming-story-card { padding: 26px 18px 20px; }
    .xiaoming-story-copy { font-size: 17px; }
}

@media (max-width: 360px) {
    .xiaoming-story-shell,.xiaoming-story-header { width: calc(100% - 22px); }
    .xiaoming-story-stage { height: 316px; }
    .xiaoming-story-actions { gap: 7px; }
}

@media (prefers-reduced-motion: reduce) {
    .xiaoming-story-button,.xiaoming-story-progress-track span,.xiaoming-story-toast { transition: none; }
    .xiaoming-story-stage.is-shaking .xiaoming-story-jar,.xiaoming-story-stage.is-shaking .xiaoming-story-shadow,.xiaoming-story-stage.is-shaking .xiaoming-story-note { animation-duration: .01ms; }
}