.steps { display: grid; grid-template-columns: repeat(4, 1fr); border: 1.5px solid var(--ink); margin: 30px 0 34px; background: var(--panel); }
.steps div { padding: 12px 14px; font: 500 12px var(--m); letter-spacing: .1em; text-transform: uppercase; border-right: 1.5px solid var(--ink); color: var(--mute); }
.steps div:last-child { border-right: 0; } .steps div.on { background: var(--ink); color: var(--paper); } .steps div.done { background: var(--amberSoft); color: var(--ink); }
.s { display: none; } .s.on { display: block; }
.s h3 { margin-bottom: 10px; }
.tg { display: flex; align-items: center; gap: 10px; font: 500 12px var(--m); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; } .tg input { width: 18px; height: 18px; accent-color: var(--amber); }
.s pre { padding-right: 76px; word-break: break-all; white-space: pre-wrap; }
@media (max-width: 700px) { .steps { grid-template-columns: 1fr 1fr; } }