/* Controls (keycaps), install steps and code blocks. */
.pads { display: grid; gap: 20px; margin-top: 36px; }
.pad { padding: 22px 20px; border: 2px solid var(--edge); border-radius: 16px; background: var(--panel); }
.pad h3 { margin-bottom: 16px; font-size: 1.25rem; }
.pad dl { display: grid; grid-template-columns: minmax(7.5rem, auto) 1fr; gap: 14px 16px; align-items: center; margin: 0; }
.pad dt { color: var(--muted); }
.pad dd { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0; }
.grp { display: inline-flex; gap: 6px; }
kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #3a4677; border-bottom-width: 4px; border-radius: 8px;
  background: #1a2350; color: var(--ink); font: 700 1rem/1 sans-serif; }
.remote kbd { min-width: 44px; border-radius: 999px; border-color: #4a5690; background: #263063; }

.steps { display: grid; gap: 32px; margin: 36px 0 0; padding: 0; list-style: none; }
.steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 0 18px; }
.n { grid-row: 1 / span 4; display: grid; place-items: center; width: 52px; height: 34px; margin-top: 4px; border-radius: 7px; background: var(--c); color: var(--stage); font: 400 1.375rem/1 var(--display); }
[dir="rtl"] .n { font: 800 1.375rem/1 var(--body); }
.steps li:nth-child(1) { --c: var(--red); }
.steps li:nth-child(2) { --c: var(--orange); }
.steps li:nth-child(3) { --c: var(--green); }
.steps li:nth-child(4) { --c: var(--blue); }
.steps p { margin: 0 0 12px; color: var(--muted); }
pre { margin: 4px 0 0; padding: 16px 18px; border: 2px solid var(--edge); border-radius: 12px; background: #04071a; color: var(--ink);
  font: .9375rem/1.7 ui-monospace, Menlo, Consolas, monospace; direction: ltr; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere; }
[dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
.note { max-width: 40em; margin: 32px 0 0; padding-inline-start: 18px; border-inline-start: 4px solid var(--yellow); }

@media (min-width: 768px) {
  .pads { grid-template-columns: 1fr 1fr; align-items: start; }
  .steps li { grid-template-columns: 64px minmax(0, 1fr); gap: 0 24px; }
  .n { width: 64px; height: 40px; font-size: 1.625rem; }
}