.story-hero{background:linear-gradient(165deg,#211a15 0%,#14100d 100%);color:#fff;padding:4rem 0 4.5rem}
.story-hero h1{font-size:clamp(2.2rem,4.6vw,3.5rem);font-weight:900;line-height:1.2}
.story-tag{font-size:1.35rem;font-weight:900;color:#ff9b6a;margin:.7rem 0}
.story-timeline{padding:5.5rem 0;background:#fff}
.st-list{display:grid;gap:2.5rem;position:relative}
.st-chapter{
  background:var(--bg);border:1px solid var(--line);border-radius:32px;
  padding:clamp(1.6rem,3.5vw,2.8rem);
  display:grid;grid-template-columns:auto 1.2fr .8fr;gap:2.2rem;align-items:center;
  box-shadow:0 16px 40px -12px rgba(20,17,15,.07);
}
@media(max-width:860px){.st-chapter{grid-template-columns:1fr;gap:1.4rem}}
.stc-marker span{
  display:grid;place-items:center;width:56px;height:56px;border-radius:18px;
  background:var(--orange);color:#fff;font-weight:900;font-size:1.25rem;
  box-shadow:0 10px 24px rgba(255,85,16,.35);
}
.stc-time{display:inline-block;font-size:.76rem;font-weight:900;letter-spacing:.15em;color:var(--orange);margin-bottom:.5rem}
.stc-content h3{font-size:clamp(1.35rem,2.6vw,1.8rem);font-weight:900;line-height:1.35;margin-bottom:.8rem}
.stc-content p{font-size:1rem;color:var(--muted);line-height:1.8}
.stc-visual{display:flex;flex-direction:column;align-items:center;gap:8px}
.stc-visual .dev-frame{max-width:220px}
.stc-cap{font-size:.74rem;color:var(--muted);font-weight:700;text-align:center}