/* These silhouettes occupy the existing media stage; they never size it. */
.story-skeleton {
  --skeleton-ink: #dce3d8;
  --skeleton-soft: #e7ebe2;
  --skeleton-line: #d2dbce;
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 260ms ease, visibility 0s 260ms;
}
html.story-enhanced .story-media[data-ready="loading"] > .story-skeleton { opacity: 1; visibility: visible; transition: opacity 260ms ease; }
html.story-enhanced .story-media[data-ready="loading"] > .story-posters { opacity: 0; }
.story-skeleton *, .story-skeleton *::before, .story-skeleton *::after { box-sizing: border-box; }
.story-skeleton__line { display: block; width: 64%; height: 6px; min-height: 4px; border-radius: 3px; background: var(--skeleton-ink); }
.story-skeleton__line--long { width: 84%; }
.story-skeleton__line--short { width: 43%; }
.story-skeleton__screen {
  position: absolute;
  top: 50%; left: 0; width: 100%; aspect-ratio: 16 / 9;
  transform: translateY(-50%);
  border: 1px solid #e0e4da;
  border-radius: 12px;
  overflow: hidden;
  background: #f9f7f1;
}
.story-skeleton__chrome { position: relative; display: flex; align-items: center; gap: 1%; height: 6.5%; min-height: 16px; padding-inline: 1.6%; background: #eeeee6; border-bottom: 1px solid #e2e5dc; }
.story-skeleton__chrome > i { width: 1%; aspect-ratio: 1; border-radius: 50%; background: #d5ddd0; }
.story-skeleton__chrome > span { width: 25%; height: 45%; margin-left: 28%; border-radius: 12px; background: #faf9f5; }
.story-skeleton__workspace { height: 93.5%; display: flex; }
.story-skeleton__sidebar { flex: 0 0 17%; padding: 4% 2%; border-right: 1px solid #e5e7df; display: flex; flex-direction: column; gap: 8%; background: #f5f5ef; }
.story-skeleton__sidebar > b { width: 25%; aspect-ratio: 1; margin-bottom: 8%; border: 1px solid var(--skeleton-line); border-radius: 6px; }
.story-skeleton__content { flex: 1; min-width: 0; padding: 3% 3.5%; display: grid; grid-template-rows: 7% 3% 20% 30% 20% 7%; gap: 2.6%; }
.story-skeleton__heading { display: flex; align-items: center; justify-content: space-between; }
.story-skeleton__heading > .story-skeleton__line { width: 29%; height: 11px; }
.story-skeleton__heading > i { width: 23%; height: 14px; border: 1px solid #dfe5d9; border-radius: 12px; }
.story-skeleton__content > .story-skeleton__line { width: 26%; height: 4px; }
.story-skeleton__member { display: flex; align-items: center; gap: 3%; padding: 2%; background: #f0f2e9; border-radius: 7px; }
.story-skeleton__member > i { width: 8%; aspect-ratio: 1; border-radius: 50%; background: #dce5d4; }
.story-skeleton__member > div { flex: 1; display: grid; gap: 9px; }
.story-skeleton__member > div > .story-skeleton__line--long { width: 42%; }
.story-skeleton__member > div > .story-skeleton__line--short { width: 65%; height: 4px; }
.story-skeleton__member > b { width: 12%; height: 10px; border-radius: 8px; background: #e0e7d9; }
.story-skeleton__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12% 5%; }
.story-skeleton__fields > div { display: grid; grid-template-rows: 4px minmax(0, 1fr); gap: 7px; }
.story-skeleton__fields .story-skeleton__line { height: 4px; width: 35%; }
.story-skeleton__input { min-height: 0; border: 1px solid #e0e5da; border-radius: 5px; background: #fdfbf7; }
.story-skeleton__rows { display: grid; grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 9%; }
.story-skeleton__rows > div { display: flex; gap: 3%; align-items: center; border-bottom: 1px solid #e9ece3; }
.story-skeleton__rows i { width: 10px; aspect-ratio: 1; border-radius: 3px; background: #e0e7d9; }
.story-skeleton__rows .story-skeleton__line { width: 36%; height: 5px; }
.story-skeleton__rows b { width: 15%; height: 5px; margin-left: auto; border-radius: 3px; background: #e4e8de; }
.story-skeleton__action { width: 18%; height: 100%; max-height: 25px; margin-left: auto; border-radius: 5px; background: #d4dfce; }

.story-skeleton__draft { position: absolute; inset: 0; background-image: linear-gradient(#dae2d426 1px, transparent 1px), linear-gradient(90deg, #dae2d426 1px, transparent 1px); background-size: 6% 7.75%; }
.story-skeleton__draft-lines { position: absolute; inset: 0; width: 100%; height: 100%; fill: #e0e7d9; stroke: var(--skeleton-line); stroke-width: 1.5; }
.story-skeleton__draft-lines path { fill: none; }
.story-skeleton__guide { stroke-dasharray: 3 9; opacity: .5; }
.story-skeleton__connector { opacity: .65; }
.story-skeleton__node { position: absolute; display: grid; align-content: center; gap: 12px; padding: 4%; background: #f7f7ef; border: 1px solid #dce4d5; border-radius: 3px; }
.story-skeleton__node > i { width: 28px; height: 28px; border: 1px solid #d4dfce; background: #e8ede2; border-radius: 50%; margin-bottom: 2px; }
.story-skeleton__node--first, .story-skeleton__node--second { top: 10%; width: 31%; height: 25%; }
.story-skeleton__node--first { left: 8%; }
.story-skeleton__node--second { right: 8%; }
.story-skeleton__node--central { left: 31%; top: 55%; width: 38%; height: 15%; display: flex; align-items: center; gap: 12%; padding: 3%; }
.story-skeleton__node--central > i { flex-shrink: 0; border-radius: 5px; }
.story-skeleton__node--central > div { display: grid; gap: 10px; width: 100%; }
.story-skeleton__node--lower-left, .story-skeleton__node--lower-right { top: 79%; height: 12%; width: 29%; padding: 3%; }
.story-skeleton__node--lower-left { left: 12%; }
.story-skeleton__node--lower-right { right: 12%; }

.story-skeleton__lanyard { width: min(100%, 450px); height: 100%; margin-inline: auto; }
.story-skeleton__lanyard svg { display: block; width: 100%; height: 100%; }
.story-skeleton__strap { fill: none; stroke: #d2dfcc; stroke-width: 18px; }
.story-skeleton__clip { fill: #dce1d9; stroke: #d1d9cc; }
.story-skeleton__clip-loop { fill: none; stroke: #d2d9cd; stroke-width: 3px; }
.story-skeleton__card { fill: #faf9f3; stroke: #dce2d5; }
.story-skeleton__card-band { fill: #d2dfcc; }
.story-skeleton__card-badge { fill: #eff2e9; }
.story-skeleton__card-light { fill: #e9eee1; }
.story-skeleton__ink { fill: #dfe5d9; }

/* A single quiet breath, only while an on-screen asset is actually loading. */
.story-skeleton > * { animation: story-skeleton-breathe 1600ms ease-in-out infinite alternate; animation-play-state: paused; }
html.story-enhanced .story-media[data-ready="loading"][data-loading-active="true"] > .story-skeleton > * { animation-play-state: running; }
@keyframes story-skeleton-breathe { from { opacity: .72; } to { opacity: 1; } }

@media (max-width: 760px) {
  .story-skeleton__screen { aspect-ratio: 36 / 41; max-height: 100%; border-radius: 10px; }
  .story-skeleton__chrome { height: 5.5%; }
  .story-skeleton__chrome > i { width: 1.6%; }
  .story-skeleton__workspace { height: 94.5%; }
  .story-skeleton__sidebar { flex-basis: 13%; padding: 7% 3%; gap: 10%; }
  .story-skeleton__sidebar > b { width: 100%; }
  .story-skeleton__sidebar > .story-skeleton__line { width: 75%; aspect-ratio: 1; height: auto; border-radius: 4px; }
  .story-skeleton__content { padding: 6% 4.5%; grid-template-rows: 7% 3% 18% 32% 20% 7%; }
  .story-skeleton__heading > .story-skeleton__line { width: 52%; height: 10px; }
  .story-skeleton__heading > i { width: 17%; height: 12px; }
  .story-skeleton__member { padding: 4%; }
  .story-skeleton__member > i { width: 15%; }
  .story-skeleton__member > div { gap: 7px; }
  .story-skeleton__member > div > .story-skeleton__line--long { width: 75%; }
  .story-skeleton__member > b { display: none; }
  .story-skeleton__fields { gap: 15% 6%; }
  .story-skeleton__fields .story-skeleton__line { width: 55%; }
  .story-skeleton__rows { gap: 11%; }
  .story-skeleton__action { width: 29%; max-height: 28px; }
  .story-skeleton__draft { background-size: 8% 4.5%; }
  .story-skeleton__node { padding: 5%; gap: 11px; }
  .story-skeleton__node--first, .story-skeleton__node--second { top: 12%; height: 23%; width: 38%; }
  .story-skeleton__node--first { left: 6%; }
  .story-skeleton__node--second { right: 6%; }
  .story-skeleton__node--central { left: 23%; width: 54%; top: 55%; height: 14%; padding: 5%; }
  .story-skeleton__node--lower-left, .story-skeleton__node--lower-right { width: 36%; height: 11%; padding: 5%; }
  .story-skeleton__node--lower-left { left: 8%; }
  .story-skeleton__node--lower-right { right: 8%; }
  .story-skeleton__node > i { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .story-skeleton, .story-skeleton > * { animation: none !important; transition: none !important; }
}
html.story-reduced .story-skeleton,
html.story-reduced .story-skeleton > * { animation: none !important; transition: none !important; }