/* Story-mode visual polish */
.story-progress{position:fixed;z-index:95;top:0;left:0;right:0;height:3px;background:#ffffff55;pointer-events:none}.story-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,#e690b5,#b7a7eb,#f1b8d1);box-shadow:0 0 16px #e39db9;transition:width .5s ease}
.story-route-stamp{position:relative;z-index:3;display:flex;align-items:center;gap:10px;width:min(1180px,calc(100% - 32px));margin:16px auto 0;color:#9a7d8c;font-size:.72rem;letter-spacing:.12em}.story-route-stamp>span{font:700 .9rem var(--display);color:#a05378}.story-route-stamp>i{display:block;height:1px;flex:1;background:linear-gradient(90deg,#caaebe,transparent)}
body[data-story-phase=opening]{--story-glow:#ffd7e6}body[data-story-phase=middle]{--story-glow:#eadcff}body[data-story-phase=deep]{--story-glow:#f6c4d5}body[data-story-phase=ending]{--story-glow:#ffd9c9}body::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'';position:fixed;z-index:-1;inset:auto -15vw -30vh auto;width:60vw;height:60vw;border-radius:50%;background:radial-gradient(circle,var(--story-glow,#ffd7e6) 0,transparent 68%);opacity:.26;pointer-events:none;transition:background .8s ease}
.story-film header{max-width:760px}.story-film-rail{display:flex;gap:10px;margin-top:22px;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}.story-film-frame{position:relative;flex:0 0 clamp(110px,12vw,160px);aspect-ratio:3/4;padding:7px;border:1px solid #d5bdc8;border-radius:11px;background:#fffdf8;box-shadow:0 8px 22px #65495b24;transform:rotate(var(--film-r,0deg));cursor:pointer}.story-film-frame:nth-child(4n+1){--film-r:-1.5deg}.story-film-frame:nth-child(4n+2){--film-r:.8deg}.story-film-frame:nth-child(4n+3){--film-r:-.5deg}.story-film-frame:nth-child(4n){--film-r:1.3deg}.story-film-frame img{width:100%;height:100%;object-fit:cover;border-radius:6px}.story-film-frame[data-type=video]::after{right:12px;bottom:12px;width:30px;height:30px;font-size:.7rem}
.story-credits{text-align:center}.story-credit-rail{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:20px}.story-credit{display:grid;gap:6px;padding:17px 14px;border:1px solid #d8becb;border-radius:18px;background:#fffaf6;cursor:pointer;color:inherit}.story-credit>span{font-size:.67rem;letter-spacing:.13em;color:#a07188}.story-credit strong{font-family:var(--display);font-size:1rem}.story-credit small{color:#907784}
.memory-dock,.music-dock{backdrop-filter:blur(18px) saturate(1.12)}.music-dock{border-color:#d8b9c9;background:linear-gradient(145deg,#fffaf3f2,#fff3f8ee);box-shadow:0 20px 52px #7252652d}.music-dock[open]{min-width:min(410px,calc(100vw - 24px))}.music-dock summary{font-weight:800;color:#8d4f70}.music-dock .music-track{font-family:var(--display);font-size:.92rem;color:#67495a}.music-dock .music-status{color:#8a7180}.music-dock input[type=range]{accent-color:#c9709a}.music-controls button{transition:transform .18s ease,background .18s ease}.music-controls button:hover{transform:translateY(-1px);background:#f8d9e8}
body.music-is-playing .music-dock{box-shadow:0 18px 58px #b7628b3a,0 0 0 1px #efbad1aa}.music-dock summary::before{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'●';display:inline-block;margin-right:7px;color:#c86893;font-size:.7em;opacity:.45}body.music-is-playing .music-dock summary::before{animation:music-pulse 1.6s ease-in-out infinite}@keyframes music-pulse{50%{opacity:1;transform:scale(1.35)}}
[data-story-tilt=true]{transform:perspective(900px) rotateX(var(--story-rx,0deg)) rotateY(var(--story-ry,0deg));transform-style:preserve-3d;transition:transform .2s ease}
@media(max-width:700px){.story-route-stamp{width:calc(100% - 22px)}.story-film-frame{flex-basis:105px}.music-dock[open]{left:8px;right:8px;max-width:none;min-width:0}}
@media(prefers-reduced-motion:reduce){.story-progress i,[data-story-tilt=true],body::after,.music-controls button,body.music-is-playing .music-dock summary::before{transition:none!important;animation:none!important;transform:none!important}}

/* Emotion authoring v2 — page atmosphere */
.story-progress,.story-route-stamp{display:none!important}.page-whisper{position:relative;max-width:min(760px,calc(100% - 36px));margin:clamp(22px,4vw,52px) auto;padding:18px 24px 18px 54px;border:1px solid #dfc8d2;border-radius:22px;background:linear-gradient(135deg,#fffaf6e8,#fff4f8dc);box-shadow:0 14px 38px #6c4d5d18;transform:perspective(900px) rotateX(var(--story-rx,0deg)) rotateY(var(--story-ry,0deg));overflow:hidden}.page-whisper::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--pointer-x,30%) var(--pointer-y,20%),#fff,transparent 35%);opacity:.55}.page-whisper-mark{position:absolute;left:20px;top:17px;font-size:1.45rem;color:#c66d95}.page-whisper p{position:relative;z-index:1;margin:0;font:clamp(1rem,1.5vw,1.16rem)/1.8 var(--note);color:#705465}
.story-film{overflow:hidden}.story-film::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'';position:absolute;pointer-events:none;inset:0;background:linear-gradient(90deg,#fff8f000,transparent 12%,transparent 88%,#fff8f000);border-radius:inherit}.story-film-rail{scroll-snap-type:x proximity;mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);padding:16px 28px 22px;margin-inline:-20px}.story-film-frame{scroll-snap-align:center;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s ease,filter .32s ease}.story-film-frame:hover{transform:translateY(-8px) rotate(0deg) scale(1.04);box-shadow:0 22px 45px #5f40552e;filter:saturate(1.08)}.story-film-frame::before{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'';position:absolute;inset:7px;z-index:1;border-radius:6px;box-shadow:inset 0 0 0 1px #fff5;pointer-events:none}
.story-credits{background:linear-gradient(145deg,#fffaf4f2,#fdf2f8ef 55%,#f3effff1)}.story-credit{position:relative;overflow:hidden;transition:transform .28s ease,box-shadow .28s ease}.story-credit::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'♡';position:absolute;right:12px;bottom:7px;color:#d79ab6;opacity:.45}.story-credit:hover{transform:translateY(-4px);box-shadow:0 15px 34px #6d4c5e20}
body[data-story-phase=deep] .emotional-chapter-bridge,body[data-story-phase=ending] .emotional-chapter-bridge{box-shadow:0 24px 70px #9d607427}.emotional-chapter-bridge{position:relative;overflow:hidden}.emotional-chapter-bridge::after{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'';position:absolute;width:180px;height:180px;border-radius:50%;right:-70px;top:-90px;background:radial-gradient(circle,#f5bfd45c,transparent 70%);animation:memory-breathe 7s ease-in-out infinite}@keyframes memory-breathe{50%{transform:scale(1.25) translate(-8px,8px);opacity:.65}}
.music-dock{overflow:visible}.music-dock::before{/* [CHỮ / BIỂU TƯỢNG CSS] Chuỗi sau content là chữ vẽ thêm bằng ::before/::after của bộ chọn này; không phải nội dung album. Chuỗi rỗng tạo lớp trang trí trống. Chỉ đổi phần trong nháy nếu muốn đổi nhãn / biểu tượng. */content:'';position:absolute;z-index:-1;inset:-5px;border-radius:22px;background:conic-gradient(from 0deg,#e99aba55,#c4b4ee44,#f2d2b855,#e99aba55);filter:blur(10px);opacity:0;transition:opacity .4s ease}body.music-is-playing .music-dock::before{opacity:.7;animation:music-aura 8s linear infinite}@keyframes music-aura{to{transform:rotate(360deg)}}.music-memory-note{margin:5px 0 10px!important;padding:8px 11px;border-left:2px solid #d48aaa;font:14px/1.55 var(--note)!important;color:#7b5b6e!important;background:#fff8fa99;border-radius:0 10px 10px 0;animation:music-note-in .45s ease}@keyframes music-note-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.emotional-chapter-bridge::after,body.music-is-playing .music-dock::before{animation:none!important}.story-film-frame,.story-credit{transition:none!important}}