.story-stage{position:relative;height:250px;max-width:540px;margin:auto;overflow:hidden;background:#f5f4ee;border-radius:18px}
.story-character{position:absolute;width:180px;height:180px;left:8%;bottom:20px;mix-blend-mode:multiply;transition:transform 2s ease}
.story-ground{position:absolute;bottom:24px;left:7%;right:7%;height:2px;background:#d6dfcf}
.story-phone{position:absolute;width:142px;height:196px;right:17%;bottom:24px;padding:12px 9px;border:5px solid #849a88;border-radius:19px;background:#fffef9;transform:rotate(4deg);transition:opacity 1.2s,transform 1.5s}
.phone-speaker{width:30px;height:4px;border-radius:3px;background:#c5cebf;margin:0 auto 12px}
.phone-question{font-size:12px;line-height:1.6;text-align:center}
.phone-option{font-size:8px;border:1px solid #c9d7c6;border-radius:5px;padding:6px 3px;margin-top:9px}
.phone-option b{float:right;opacity:0;color:#32624e}
.story[data-scene="0"] .phone-option b{animation:choose-answer .7s ease-out both}
.phone-option:first-of-type{background:#e4ecdf}
.phone-result{position:absolute;inset:32px 8px 10px;background:#fffef9;text-align:center;padding-top:14px;font-size:13px;opacity:0;transition:opacity 1s}
.story-lines{height:46px;margin:15px 4px;background:repeating-linear-gradient(to bottom,#c8d6c1 0 3px,transparent 3px 13px)}
.story-memo{position:absolute;left:42%;bottom:38px;width:100px;height:140px;background:#fffdf5;border:1px solid #c9d4c1;border-radius:5px;padding:12px;font-size:12px;opacity:0;transform:translateY(24px) rotate(-8deg);transition:opacity 1s,transform 1.8s}
.story-memo span{display:block;text-align:right;color:#638564}
.story-door{position:absolute;right:7%;bottom:25px;width:94px;height:185px;border:5px solid #bccbb5;border-bottom:0;border-radius:36px 36px 0 0;opacity:0;transform:translateX(20px);transition:opacity 1s,transform 1.5s;background:#e8ede1}
.story-door span{position:absolute;top:35px;left:0;right:0;text-align:center;font-size:12px}
.story-door i{position:absolute;right:9px;bottom:60px;width:7px;height:7px;background:#91a483;border-radius:50%}
.story[data-scene="1"] .phone-result{opacity:1}
.story[data-scene="1"] .story-character{transform:translateX(12px) rotate(3deg)}
.story[data-scene="2"] .story-phone{opacity:0;transform:translateY(-12px) rotate(0)}
.story[data-scene="2"] .story-character{transform:translateX(38px)}
.story[data-scene="2"] .story-memo{opacity:1;transform:translateY(0) rotate(-8deg)}
.story[data-scene="2"] .story-door{opacity:1;transform:translateX(0)}
.story-controls{display:flex;justify-content:flex-end;align-items:center}
.story-play{font-size:12px;padding:5px 10px}
.story-paused *{animation-play-state:paused!important}
.story-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:24px 0 12px}
.story-overview button{margin:0;padding:12px 0;background:transparent;color:#49634d;border-radius:0;border-top:3px solid #bfd4c4;font-size:.9rem;text-align:left;line-height:1.8;transition:border-color .6s,background-color .6s}
.story-overview button[aria-pressed="true"]{border-color:#547b5d;background:#edf2e7}
@media(max-width:480px){.story-overview{gap:8px}.story-overview button{font-size:.75rem}}
@keyframes choose-answer{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@media(max-width:480px){.story-stage{height:220px}.story-character{width:145px;height:145px;left:0}.story-phone{right:6%;transform:scale(.85);transform-origin:bottom right}.story-memo{left:38%;width:85px;height:125px}.story-door{right:3%;width:75px;height:160px}}
@media(prefers-reduced-motion:reduce){.story *{transition:none!important;animation:none!important}.phone-option b{opacity:1}}