/* scenario.html — page-specific only. Shared system lives in /styles.css */
/* scenario timeline */
  .tl{position:relative;margin-top:32px;padding-left:34px}
.tl::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-step{position:relative;padding-bottom:34px}
.tl-step:last-child{padding-bottom:0}
.tl-step::before{content:"";position:absolute;left:-30px;top:7px;width:11px;height:11px;border-radius:50%;
    background:var(--bg);border:2px solid var(--line)}
.tl-step.key::before{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.tl-time{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--accent)}
.tl-step h3{font-family:var(--sans);font-weight:400;font-size:20px;letter-spacing:-.02em;margin-top:7px;color:var(--ink)}
.tl-step p{color:var(--muted);font-size:14.5px;line-height:1.6;margin-top:9px;max-width:640px}
.tl-rec{display:inline-flex;align-items:center;gap:8px;margin-top:13px;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.06em;color:var(--faint);border:1px solid var(--line-soft);border-radius:100px;padding:6px 13px}
.tl-rec b{color:var(--accent);font-weight:500}