.timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin: 1.5rem 0; border: 1px solid var(--line); background: var(--line); }
.moment { position: relative; min-height: 10rem; padding: 1rem; background: var(--surface); }
.moment::before { display: block; width: 1.65rem; height: 1.65rem; margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); content: attr(data-step); font-size: 0.76rem; font-weight: 750; line-height: 1.55rem; text-align: center; }
.moment[data-active="true"]::before { border-color: var(--accent); color: white; background: var(--accent); }
.moment p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.moment strong { display: block; margin-bottom: 0.35rem; color: var(--ink); }
.simulator { max-width: 850px; padding: 1.5rem; border: 1px solid var(--line); background: var(--surface); }
.simulator-head { display: flex; gap: 1rem; align-items: start; justify-content: space-between; }
.simulator-head p { margin: 0; }
.simulator button { flex: 0 0 auto; }
.browser-frame { margin-top: 1rem; border: 1px solid var(--line); background: white; }
.browser-bar { display: flex; gap: 0.35rem; padding: 0.55rem; border-bottom: 1px solid var(--line); background: var(--code); }
.browser-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--line); }
.demo-ui { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: center; min-height: 8rem; padding: 1.25rem; }
.demo-ui p { margin: 0; }
.demo-ui button { min-width: 8rem; }
.demo-ui button[disabled] { border-color: var(--line); color: var(--muted); background: var(--code); cursor: not-allowed; }
.status-line { margin: 0; padding: 0.65rem 1rem; border-top: 1px solid var(--line); color: var(--muted); background: var(--paper); font-size: 0.85rem; }
.status-line strong { color: var(--ink); }
.mechanics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.mechanic { padding: 1rem 1.1rem; border-top: 0.25rem solid var(--accent); background: var(--surface); }
.mechanic p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.code-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.code-card { overflow: hidden; border: 1px solid var(--line); background: var(--surface); }
.code-card h3 { padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); margin: 0; }
.code-card pre { overflow-x: auto; margin: 0; padding: 1rem; background: var(--ink); color: #f3f1e8; font-size: 0.78rem; line-height: 1.55; }
.code-card code { padding: 0; background: transparent; }
.callout { max-width: 850px; padding: 1rem 1.2rem; border: 1px solid var(--warm); background: var(--warm-soft); }
.callout p { margin: 0; }
@media (max-width: 760px) {
  .timeline { grid-template-columns: 1fr 1fr; }
  .mechanics, .code-compare { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .timeline { grid-template-columns: 1fr; }
  .simulator-head { display: block; }
  .simulator-head button { width: 100%; margin-top: 1rem; }
  .demo-ui { grid-template-columns: 1fr; }
}
@media print {
  .mechanic, .code-card { break-inside: avoid; }
}