/* Block universe lesson. All rules scoped under .blk-* */
.blk-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.blk-note { font-size: 13px; color: var(--dim); text-align: center; }
.blk-hero img { display: block; width: 290px; max-width: 100%; max-height: 34vh; object-fit: contain; margin: 0 auto; filter: drop-shadow(0 18px 30px rgba(123, 92, 253, .35)); }

/* ---------- the picture ---------- */
.blk-pic { width: 100%; display: flex; justify-content: center; }
.blk-svg { width: 340px; max-width: 100%; height: auto; max-height: 40vh; overflow: visible; }
.blk-row { opacity: 0; transition: opacity .35s; }
.blk-row.blk-in { opacity: 1; }
.blk-band { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; transition: fill .25s, stroke .25s; }
.blk-row.blk-now .blk-band { fill: rgba(252, 192, 80, .16); stroke: var(--gold); }
.blk-row.blk-real .blk-band { fill: rgba(63, 214, 154, .12); stroke: var(--mint); }
.blk-row.blk-now.blk-real .blk-band { fill: rgba(252, 192, 80, .16); stroke: var(--gold); }
.blk-time { fill: var(--dim); font-size: 13px; font-weight: 700; text-anchor: middle; font-family: var(--sans); }
.blk-place { fill: var(--dim); font-size: 13px; text-anchor: middle; font-family: var(--sans); }
.blk-far { fill: var(--dim); font-size: 16px; text-anchor: middle; }
.blk-ico { fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.blk-dot { fill: var(--gold); }
.blk-trail { fill: none; stroke: rgba(252, 192, 80, .45); stroke-width: 2.5; stroke-dasharray: 3 5; stroke-linecap: round; }
.blk-pin { fill: var(--gold); stroke: #0A0E1A; stroke-width: 2; }
.blk-you text { fill: var(--gold); font-size: 13px; font-weight: 700; text-anchor: middle; font-family: var(--sans); }
.blk-hit { fill: transparent; cursor: pointer; }

/* ---------- the far star and the rocket ---------- */
.blk-star { fill: #F4EEE2; }
.blk-burst circle { fill: #FB9679; }
.blk-burst path { stroke: #FB9679; stroke-width: 2.5; stroke-linecap: round; }
.blk-ash { fill: none; stroke: rgba(251, 150, 121, .45); stroke-width: 2; stroke-dasharray: 2 3; }
.blk-you-line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; }
.blk-slice { opacity: 0; transition: opacity .3s; }
.blk-rocketon .blk-slice { opacity: 1; }
.blk-slice line { stroke: var(--violet-bright); stroke-width: 3; stroke-dasharray: 8 5; stroke-linecap: round; }
.blk-rocket path { fill: var(--violet-bright); }
.blk-rocket .blk-flame { fill: var(--gold); }
.blk-read { display: flex; flex-direction: column; gap: 4px; font-size: 15px; color: var(--text); }
.blk-read i { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin-right: 8px; vertical-align: middle; background: var(--gold); }
.blk-read .blk-r-rk { display: none; }
.blk-rocketon .blk-read .blk-r-rk { display: block; }
.blk-read .blk-r-rk i { background: var(--violet-bright); }
.blk-read.blk-boom .blk-r-rk b { color: #FB9679; }

/* ---------- the letter ---------- */
.blk-quote { max-width: 330px; padding: 18px 18px 14px; border-radius: 16px; background: var(--surface); border: 2px solid var(--line-strong); }
.blk-quote p { margin: 0 0 10px; font-family: var(--serif); font-size: 17px; line-height: 1.4; color: var(--text); }
.blk-quote span { font-size: 13px; color: var(--dim); }

@media (max-height: 700px) {
  .blk-svg { max-height: 36vh; }
  .blk-rocketon .blk-svg { max-height: 33vh; }
  .blk-quote p { font-size: 16px; }
}