/* Approved Chom sao ky uc composition; all decoration stays beside the portrait. */
.story-constellation .panel-actions { border-top:0; }
.story-constellation .portrait-stage { position:relative; display:grid; place-items:center; width:100%; height:148px; isolation:isolate; }
.story-constellation .portrait-stage .panel-avatar { z-index:2; grid-area:1/1; }
.story-constellation .side-scene { position:absolute; inset:0; z-index:0; pointer-events:none; display:block; }
.story-constellation .vfx-side { position:absolute; top:0; bottom:0; width:calc((100% - 190px)/2); max-width:410px; }
.story-constellation .vfx-side--left { left:0; }
.story-constellation .vfx-side--right { right:0; transform:scaleX(-1); }
.story-constellation .side-art { display:block; width:100%; height:100%; overflow:visible; }
.story-constellation .side-art--mobile { display:none; }
.story-constellation .side-art path { vector-effect:non-scaling-stroke; }
.story-constellation .side-line-motion { fill:none; stroke-linecap:round; stroke:#c7f4ff; stroke-width:1.2; stroke-dasharray:90 910; animation:side-current 9s linear var(--phase,0s) infinite; }
.story-constellation .star-thread { fill:none; stroke:#60aec7; stroke-width:.8; opacity:.36; }
.story-constellation .star-courier { stroke-width:1.5; stroke-dasharray:14 986; animation-duration:12s; opacity:.85; }
.story-constellation .star-node>circle:first-child { fill:#2ac6e30b; stroke:#6ccee655; stroke-width:.7; }
.story-constellation .star-core { fill:#c7f4ff; }
.story-constellation .star-diamond { fill:none; stroke:#97e7f7; stroke-width:.7; opacity:.6; transform-origin:center; transform-box:fill-box; animation:side-star-turn 24s linear var(--phase,0s) infinite; }
.story-constellation .star-small { fill:none; stroke:#7cbfd6; stroke-width:.8; opacity:.45; }
@keyframes side-current { from {stroke-dashoffset:1000} to {stroke-dashoffset:0} }
@keyframes side-star-turn { to {transform:rotate(360deg)} }
@media(max-width:600px) {
  .story-constellation .portrait-stage { height:126px; }
  .story-constellation .vfx-side { width:calc((100% - 146px)/2); }
  .story-constellation .side-art--desktop { display:none; }
  .story-constellation .side-art--mobile { display:block; }
  .story-constellation .side-line-motion { stroke-width:.8; }
}
.story-constellation[data-motion=reduced] .side-scene * { animation:none!important; }
.story-constellation[data-motion=reduced] .side-line-motion { display:none; }
@media(prefers-reduced-motion:reduce) {
  .story-constellation .side-scene * { animation:none!important; transition:none!important; }
  .story-constellation .side-line-motion { display:none; }
}