.morning-story{max-width:1280px;margin:0 auto;padding:12px 30px 18px;color:#5f513b;font-family:inherit;background:#faf6ec;min-height:100svh;box-sizing:border-box}
body:has(.morning-story){background:#faf6ec}
.morning-bar{height:51px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:0 4px 8px;font-size:12px;letter-spacing:.07em}.morning-back{display:flex;align-items:center;gap:5px;color:#82745d;text-decoration:none}.morning-back>span{font-size:28px;font-family:Georgia,serif;font-weight:400}.morning-bookname{font-size:13px;letter-spacing:.12em;color:#9e8f72}.morning-sound{width:43px;height:43px;border:1px solid #d9cab0;border-radius:50%;background:transparent;display:grid;place-items:center;color:#887859;cursor:pointer}.morning-sound svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.morning-stage{position:relative;height:clamp(390px,calc(100svh - 225px),820px);overflow:hidden;border-radius:18px;background:#f4dfbb;isolation:isolate;box-shadow:0 14px 36px #71512c0c}.morning-canvas{position:absolute;top:50%;left:50%;height:100%;width:calc(100% * var(--art-ratio) / var(--stage-ratio));transform:translate(-50%,-50%)}.morning-backdrop,.morning-pose{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;pointer-events:none}.morning-pose{z-index:1}.morning-pose.is-changing{animation:morning-ink-in .85s ease both}
.morning-scene-title{position:absolute;left:4.6%;top:7%;z-index:4;pointer-events:none;color:#63543c;text-shadow:0 1px 16px #fff7e8}.morning-scene-title>span{font-size:11px;letter-spacing:.19em;opacity:.75}.morning-scene-title h1{font-size:clamp(25px,3.2vw,43px);font-weight:500;letter-spacing:.045em;line-height:1.6;margin:7px 0 0;font-family:inherit}.morning-stage.is-playing .morning-scene-title{opacity:.68}.morning-stage.is-playing .morning-scene-title h1{font-size:clamp(23px,2.7vw,35px)}
.morning-spot{position:absolute;z-index:3;padding:0;min-width:44px;min-height:44px;border:0;border-radius:48%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}.morning-spot:focus-visible{outline:3px solid #fff6ce;outline-offset:-4px;background:#fff6ce12}.morning-spot:hover{background:#fff6ce09}.morning-touch-ring{position:absolute;left:50%;top:50%;width:35px;height:35px;border:1px solid #fff4cf;border-radius:50%;transform:translate(-50%,-50%);opacity:0;box-shadow:0 0 18px #fff5c457;pointer-events:none}.morning-spot.is-target .morning-touch-ring{animation:morning-invitation 4.8s ease-in-out infinite}.morning-spot.is-hinted .morning-touch-ring{width:56px;height:56px;animation:morning-invitation 2.3s ease-in-out infinite}.morning-spot[data-item="clock"] .morning-touch-ring{display:none}.morning-sleepy{position:absolute;left:49%;top:43%;z-index:2;color:#b69869;font:italic 25px Georgia,serif;transform:rotate(-14deg);opacity:.6;pointer-events:none;animation:morning-drift 4s ease-in-out infinite}.morning-sleepy small{display:inline-block;font-size:15px;transform:translate(7px,-15px)}.morning-response{position:absolute;z-index:5;left:48%;top:44%;font-size:37px;color:#fff3d7;text-shadow:0 1px 10px #b78a57;pointer-events:none;animation:morning-heart 2.2s ease both}
.morning-caption{position:relative;text-align:center;min-height:102px;padding:20px 15px 5px;display:flex;flex-direction:column;align-items:center;justify-content:center}.morning-story-line p{margin:0}.morning-english{font-family:Georgia,'Times New Roman',serif;font-size:clamp(20px,2.2vw,27px);color:#766345;line-height:1.45;letter-spacing:.01em}.morning-chinese{font-size:13px;color:#9a8c74;line-height:1.9;margin-top:7px!important}.morning-invite,.morning-replay{border:0;border-bottom:1px solid #cbb692;border-radius:0;background:transparent;font:inherit;font-size:12px;letter-spacing:.08em;color:#90764e;padding:7px 0 5px;margin-top:9px;cursor:pointer;min-height:36px}.morning-invite span{padding-left:5px}.morning-invite:focus-visible,.morning-replay:focus-visible,.morning-sound:focus-visible,.morning-back:focus-visible{outline:2px solid #b7a178;outline-offset:4px}.morning-audio-status{margin:4px 0 0;color:#a1845b;font-size:11px;line-height:1.7}.morning-audio-status:empty{display:none}.morning-endnote{display:flex;justify-content:space-between;align-items:center;padding:5px 4px 0;font-size:10px;letter-spacing:.05em;color:#b4a58a}.morning-endnote a{color:#a59171;text-decoration:none}
@keyframes morning-ink-in{from{opacity:0}to{opacity:1}}@keyframes morning-invitation{0%,55%,100%{opacity:0;transform:translate(-50%,-50%) scale(.85)}68%{opacity:.75}85%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}@keyframes morning-drift{0%,100%{transform:translateY(0) rotate(-14deg);opacity:.5}50%{transform:translateY(-7px) rotate(-10deg);opacity:.2}}@keyframes morning-heart{from{opacity:0;transform:translateY(12px) scale(.7)}30%{opacity:1}to{opacity:0;transform:translateY(-40px) scale(1.1)}}
@media(max-width:650px){.morning-story{padding:4px 0 14px}.morning-bar{padding:0 18px;height:53px;gap:10px}.morning-bookname{font-size:11px;letter-spacing:.08em}.morning-back{font-size:11px}.morning-sound{width:37px;height:37px}.morning-stage{height:calc(100svh - 230px);min-height:390px;max-height:850px;border-radius:0}.morning-scene-title{top:5%;left:6%}.morning-scene-title>span{font-size:10px;letter-spacing:.12em}.morning-scene-title h1{font-size:27px;max-width:220px}.morning-stage.is-playing .morning-scene-title h1{font-size:24px}.morning-caption{padding:16px 22px 3px;min-height:123px}.morning-english{font-size:22px}.morning-chinese{font-size:12px;max-width:310px}.morning-endnote{padding:7px 18px 0;font-size:9px;gap:10px}.morning-spot[data-item="clock"]{display:none}.morning-response{left:51%;top:39%}}
@media(prefers-reduced-motion:reduce){.morning-pose.is-changing,.morning-spot .morning-touch-ring,.morning-sleepy,.morning-response{animation:none}.morning-spot.is-target .morning-touch-ring{opacity:.3}}
@media(max-width:650px){.morning-canvas{transform:translate(-44%,-50%)}}
.morning-canvas{width:max(100%,calc(100% * var(--art-ratio) / var(--stage-ratio)));height:max(100%,calc(100% * var(--stage-ratio) / var(--art-ratio)))}
