/* ═══════════════════════════════════════════════════════════════════
   THE WALKTHROUGH, AS A STORY — story.css · its player, over trailer.css
   (story.js; Jae, 2026-10-29)

   Over the line, one row that never moves, as a music player's: back,
   play or pause, and next at its left, play in its ring between them, and
   beside them a thin bar for each part, the one playing filling in ink
   (Jae: "the left and right and pause buttons are now moving all the
   time... what if we put it above the words?"; "make it super intuitive")
   ═══════════════════════════════════════════════════════════════════ */

.st .tr-say{padding-top:66px}
/* (the first screen, before the player: its line as close under the room as any line's, the line gliding down to make
   room as the player comes in; Jae, 2026-10-29, "in the beginning there is too much space between see it and the...
   visual section") */
.st .tr-say.st-first{padding-top:24px}
body:not(.tr-staged):not(.tr-playing) .st .tr-say{transition:padding-top .5s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){ body:not(.tr-staged):not(.tr-playing) .st .tr-say{transition:none} }
/* (placed by the panel's own edges, not by its text's column, where trailer.css puts every child of it: an
   absolutely placed child of a grid with no place in it is placed by the grid's padding box) */
.tr-say > .st-strip{grid-column:auto;grid-row:auto}
.st-strip{position:absolute;left:24px;right:30px;top:14px;z-index:4;display:flex;align-items:center;gap:16px}
.st-ctl{flex:none;display:flex;align-items:center;gap:4px}
.st-b{appearance:none;position:relative;flex:none;display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:36px;height:36px;padding:0;
  border:0;border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;transition:background .2s ease,color .2s ease,opacity .2s ease,border-color .2s ease}
.st-b::after{content:"";position:absolute;inset:-4px;border-radius:50%}
.st-b svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.st-b svg .st-fill{fill:currentColor;stroke:none}
.st-b:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.st-b:disabled{opacity:.25;cursor:default}
@media (hover:hover){ .st-b:not(:disabled):hover{background:rgba(38,38,43,.06)} }
/* (play or pause, the one in the middle, in its ring; dark while it waits to be pressed: paused) */
.st-b.st-play{width:42px;height:42px;border:1.5px solid var(--ink)}
.st-b.st-play svg{width:18px;height:18px}
.st-paused .st-b.st-play{background:var(--ink);color:var(--surface)}
/* (play and pause trading places, the new one coming in from a little smaller: story.js) */
@keyframes st-swap{from{opacity:0;transform:scale(.55)}}
.st-b.st-swap svg{animation:st-swap .24s cubic-bezier(.2,.8,.2,1)}
@media (prefers-reduced-motion:reduce){ .st-b.st-swap svg{animation:none} }
/* (paused, or a finger held on the line, the cards over the room held still with the room: story.js) */
.st-paused #tr-math *,.st-held #tr-math *{animation-play-state:paused}
/* (the two orders: the traditional one grey, what's often skipped in it dashed and faint; the arrows along each) */
#tr-math .to-old{filter:saturate(0)}
#tr-math .tm-rep.to-old{fill:var(--muted)}
#tr-math .to-skip{opacity:.45}
#tr-math .to-skip .tm-card{stroke-dasharray:7 7}
#tr-math .to-note{font:italic 500 21px var(--serif);fill:var(--muted)}
#tr-math .tm-nm.to-big{font-size:38px}
#tr-math .to-big + .to-note{font-size:27px}
#tr-math .to-arrow{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round}
#tr-math .to-head{fill:none;stroke:var(--gold);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
#tr-math .to-arrow.to-old,#tr-math .to-head.to-old{stroke:var(--machine-soft)}
@media (hover:hover){ .st-paused .st-b.st-play:hover{background:var(--ink)} }
.st-bars{flex:1 1 auto;min-width:0;display:flex;gap:6px}
.st-seg{appearance:none;position:relative;flex:1 1 0;min-width:0;height:22px;margin:0;padding:0;border:0;background:none;cursor:pointer}
.st-seg::before,.st-seg i{content:'';position:absolute;left:0;top:9.5px;height:3px;border-radius:2px}
.st-seg::before{right:0;background:var(--line)}
.st-seg i{width:calc(var(--p, 0) * 100%);background:var(--ink)}
.st-seg:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-radius:4px}
.tr-staged .st-strip,.tr-playing .st-strip{display:none}
/* (before it's started, no player: Show me the one thing to press, the player's place kept so nothing moves when it
   comes; Jae, 2026-10-29: "someone looking at it might think do i press the play or the show me?") */
.st-waits .st-strip{visibility:hidden}
/* (started, it comes in and stays: the three rising one after another, the bars drawn across from the left; "when it
   appears make sure that it's smooth and nice") */
@keyframes st-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes st-draw{from{opacity:0;transform:scaleX(0)}}
.st-strip.st-come .st-b{animation:st-rise .5s cubic-bezier(.2,.8,.2,1) both}
.st-strip.st-come .st-b:nth-child(2){animation-delay:.07s}
.st-strip.st-come .st-b:nth-child(3){animation-delay:.14s}
.st-strip.st-come .st-seg{transform-origin:0 50%;animation:st-draw .55s cubic-bezier(.2,.8,.2,1) calc(.16s + var(--i, 0) * .05s) both}
@media (prefers-reduced-motion:reduce){ .st-strip.st-come .st-b,.st-strip.st-come .st-seg{animation:none} }
.tr-staged.st .tr-say,.tr-playing.st .tr-say{padding-top:18px}

/* (the line top first, what's spare under it, the panel kept one height so the room never grows or shrinks) */
body:not(.tr-playing):not(.tr-staged) .st .tr-say.tr-steady{align-content:start}

@media (max-width:640px){
  /* (room under the first part's button, inside its highlight: Jae, 2026-10-29, "a little bit of extra space between
     the bottom and the show me") */
  .st .tr-say{padding-top:58px;padding-bottom:18px}
  .st .tr-say.st-first{padding-top:16px}
  .st-strip{left:10px;right:14px;top:10px;gap:10px}
  .st-ctl{gap:2px}
  .st-bars{gap:4px}
}