/* Keyboard-accessible command walkthrough. */
.walkthrough { display: grid; grid-template-columns: .75fr 1.25fr; gap: 45px; align-items: start; }
.walkthrough-steps { display: grid; gap: 9px; }
.walkthrough-steps button { display: flex; align-items: center; gap: 20px; text-align: left; padding: 25px 21px; border: 1px solid transparent; border-radius: 6px; color: #555d4f; background: transparent; }
.walkthrough-steps button:hover { background: #e3e7d9; }
.walkthrough-steps button[aria-selected="true"] { border-color: #ccd1c2; background: #f8f7f3; box-shadow: 0 2px 4px #2b391008; color: var(--ink); }
.walkthrough-steps button > span { font: 11px var(--mono); color: #727965; }
.walkthrough-steps button[aria-selected="true"] > span { color: var(--accent); }
.walkthrough-steps strong { font-size: 16px; font-weight: 550; }
.walkthrough-steps small { display: block; font-size: 11px; color: var(--muted); margin-top: 6px; }
.walkthrough-steps b { font-size: 18px; font-weight: 400; margin-left: auto; color: var(--accent); opacity: 0; }
.walkthrough-steps button[aria-selected="true"] b { opacity: 1; }
.walkthrough-panels { min-width: 0; }
.code-panel { background: #222923; color: #dee5d6; border: 1px solid #48503f; border-radius: 7px; overflow: hidden; min-height: 465px; display: flex; flex-direction: column; box-shadow: 0 9px 28px #2a331213; }
.code-heading { padding: 13px 20px; border-bottom: 1px solid #47523d; display: flex; justify-content: space-between; gap: 15px; align-items: center; font: 10px var(--mono); }
.code-heading small { font-size: 8px; color: #b2bf9e; margin-left: 10px; }
.code-heading button { border: 1px solid #62704f; border-radius: 4px; color: #d3e0bc; background: transparent; padding: 6px 9px; font: 9px var(--mono); min-height: 32px; }
.code-heading button:hover { background: #3c4a32; }
.code-heading button span { padding-left: 7px; }
pre { margin: 0; font-family: var(--mono); }
pre code { font-family: inherit; }
.code-panel pre { font-size: 11px; line-height: 1.8; padding: 22px 27px; overflow-x: auto; }
.code-key { color: #bbcc96; }
.code-string { color: #f0bc93; }
.code-comment { color: #a4b398; }
.code-footnote { margin: auto 0 0; padding: 15px 23px; border-top: 1px solid #46503c; font-size: 9px; color: #b7c4a8; line-height: 1.7; }
.code-footnote a { color: #e8d4ba; }
@media (max-width: 1100px) {
  .walkthrough { gap: 25px; }
  .walkthrough-steps button { padding: 24px 14px; gap: 12px; }
  .walkthrough-steps strong { font-size: 14px; }
}
@media (max-width: 820px) {
  .walkthrough { grid-template-columns: 1fr; gap: 20px; }
  .walkthrough-steps { grid-template-columns: 1fr 1fr; gap: 10px; }
  .walkthrough-steps button { padding: 17px 14px; }
  .walkthrough-steps small { font-size: 10px; }
  .code-panel { min-height: 450px; }
}
@media (max-width: 480px) {
  .walkthrough-steps button { padding: 14px 10px; gap: 8px; }
  .walkthrough-steps button > span { font-size: 9px; }
  .walkthrough-steps strong { font-size: 11px; }
  .walkthrough-steps small { font-size: 8px; }
  .walkthrough-steps b { display: none; }
  .code-heading { padding-inline: 15px; font-size: 9px; }
  .code-heading small { font-size: 6px; margin-left: 5px; }
  .code-panel pre { padding: 20px 15px; font-size: 10px; }
}