.beat-more {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 600; color: var(--st-ink); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 4px;
}

@media (max-width: 899px) {

  .story--live .story-stage { padding: 0; }
  .story--live .story-beats { max-width: none; }
  .story--live .beat { gap: 0; }
  .story--live .beat-media { position: absolute; inset: 0; }
  .story--live .story-stage .beat-photo { border-radius: 0; height: 100%; }
  .story--live .story-stage .beat-photo::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,.30) 0, rgba(0,0,0,0) 14%, rgba(0,0,0,0) 44%, rgba(0,0,0,.52) 66%, rgba(0,0,0,.80) 100%);
  }

  .story--live .story-rail {
    position: absolute; top: 12px; left: 0; right: 0; z-index: 40; margin: 0; padding: 0 16px; max-width: none;
  }
  .story--live .rail-segs span { background: rgba(255,255,255,.32); }
  .story--live .rail-meta { justify-content: flex-end; min-height: 0; }
  .story--live .rail-meta > span { display: none; }
  .story--live .rail-skip { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); margin: -6px 0 -14px; }

  .story--live .beat-copy {
    position: absolute; left: 0; right: 0; bottom: 0; z-index: 30; min-height: 0;
    padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)); gap: 8px;
  }
  .story--live .beat-step, .story--live .beat-step .n { color: rgba(255,255,255,.82); }
  .story--live .beat-title { color: #fff; font-size: 27px; }
  .story--live .beat-body { color: rgba(255,255,255,.88); font-size: 15px; line-height: 1.42; }
  .story--live .beat-more { color: #fff; min-height: 36px; font-size: 14px; }

  .story--live .ov-bot { left: 16px; right: 16px; bottom: calc(var(--copy-h, 170px) + 14px); z-index: 2; }
  .story--live .ov-top { display: none; }
  #story.story--live .beat[data-beat="4"] .ov-top {
    display: flex; top: auto; left: 16px; right: 16px; bottom: calc(var(--copy-h, 170px) + 14px); z-index: 2;
  }
  #story.story--live .beat[data-beat="4"] .ov-bot { display: none; }

  .story--live .el { padding: 12px 14px; gap: 10px; }
  .story--live .map { height: 104px; }
  .story--live .kwh b { font-size: 38px; }
  .story--live .story-stage .beat-photo::after { z-index: 3; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .story--live .story-stage { padding-bottom: 0; }
  .story--live .beat-copy { min-height: 0; }
  .story--live .beat-title { font-size: 22px; }
  .story--live .beat-body { font-size: 14px; }
}

.nav { transition: transform 240ms cubic-bezier(.4, 0, 1, 1); }
@media (max-width: 899px) {
  html.story-pinned .nav { transform: translate(-50%, 160%); transition: transform 240ms cubic-bezier(.4, 0, 1, 1); }
  html:not(.story-pinned) .nav { transition: transform 380ms cubic-bezier(.16, 1, .3, 1); }
}

@media (max-width: 899px) {
  .story--live .story-stage { margin: 0 10px; border-radius: 24px; overflow: hidden; isolation: isolate; top: 10px; height: calc(100svh - 20px); }
}

@media (max-width: 899px) {
  .story--live.story--stories .story-track { height: auto; }
  .story--live.story--stories .story-stage {
    position: relative; top: auto; height: calc(100svh - 24px); max-height: 820px; min-height: 540px;
    margin: 0 10px; border-radius: 24px; overflow: hidden; isolation: isolate; background: #1c1c1c;
    touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer;
  }
  .story--stories .beat-media { transform: none !important; opacity: 0; transition: opacity var(--st-dur-base) var(--st-ease-in); }
  .story--stories .beat.is-on .beat-media { opacity: 1; transition: opacity var(--st-dur-slow) var(--st-ease-out); }
  .story--stories .story-stage .beat-photo::after { display: none; }
  .story--stories .story-stage img { -webkit-user-drag: none; pointer-events: none; }
  .story--stories .rail-segs span { background: rgba(255, 255, 255, 0.36); }
  .story--stories .rail-segs i { background: #fff; }
  .story--stories.is-held .story-rail, .story--stories.is-held .beat-copy { opacity: 0.35; transition: opacity var(--st-dur-base) var(--st-ease); }
}

@media (max-width: 899px) {
  .end-media { max-width: min(100%, 320px); }
  .end-media .beat-photo { border-radius: 24px; }
}

@media (max-width: 899px) and (max-height: 700px) {
  .story--live .el-book .el-row, .story--live .el-book .slots { display: flex; }
  .story--live .el-book .slots { display: grid; }
  .story--live .el-book .bar-key { display: flex; }
  .story--live .el-book { gap: 8px; }
  .story--live .el-book .slot { padding: 6px 10px; }
  .story--live .el-book .slot b { font-size: 16px; }
  .story--live .el-book .book-btn { height: 40px; }
}