.rd-page-how-it-works { background: #060c09; }
.walk-intro, .walkthrough, .walk-guide { max-width: 1280px; margin-inline: auto; padding-inline: 28px; }
.walk-intro { padding-top: 112px; padding-bottom: 28px; position: relative; }
.walk-intro::before { content: ''; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 70% 30%, #15573525, transparent 65%); }
.walk-intro h1 { font: 600 clamp(36px, 4.4vw, 56px)/1.06 var(--font-display); letter-spacing: -.045em; margin: 18px 0; }
.walk-intro h1 em, .walk-guide h2 em { color: #6ee7b7; font-style: normal; }
.walk-intro > p { max-width: 65ch; color: #aebfb5; font-size: 16px; line-height: 1.7; }
.walkthrough { padding-bottom: 32px; }
.walkthrough [hidden] { display: none !important; }
.walk-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-block: 1px solid #293e32; padding-block: 16px; }
.walk-chapters, .walk-playback { display: flex; gap: 8px; flex-wrap: wrap; }
.walkthrough button { appearance: none; cursor: pointer; background: transparent; color: #b9c9c0; border: 1px solid #324a3b; border-radius: 6px; min-height: 44px; padding: 10px 14px; font: 500 13px/1.3 var(--font-body); }
.walk-chapters button { border-color: transparent; }
.walkthrough button:hover { background: #12291d; color: #e4fff1; }
.walk-chapters button[aria-pressed="true"] { color: #9bf4cd; background: #133323; border-color: #2c7852; }
.walkthrough button:focus-visible, .walk-node:focus-visible { outline: 2px solid #9bf4cd; outline-offset: 4px; }
.walkthrough button:disabled { cursor: default; opacity: .45; }
.walk-story { display: grid; grid-template-columns: 170px 1fr; gap: 28px; padding: 24px 0; min-height: 132px; position: relative; scroll-margin-top: 84px; }
.walk-position { display: flex; flex-direction: column; gap: 7px; padding-top: 2px; }
.walk-position > :first-child { font: 500 20px/1.2 var(--font-mono); color: #86e8b8; }
.walk-position > :last-child { color: #a0b5a8; font-size: 12px; }
.walk-story h2 { font: 500 clamp(20px, 2vw, 26px)/1.25 var(--font-display); letter-spacing: -.02em; color: #e5f2eb; margin: 0 0 8px; }
.walk-story p { font-size: 14px; color: #aebfb5; line-height: 1.65; max-width: 84ch; margin: 0; }
.walk-progress { position: absolute; bottom: 0; height: 2px; left: 0; right: 0; background: #193024; }
.walk-progress > span { display: block; height: 100%; background: #58dba0; width: 0; transition: width .3s; }
.walk-announcement { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.walk-map { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 76px 28px; padding: 38px 12px 76px; background: radial-gradient(ellipse at 72% 40%, #0c38224d, transparent 64%); }
.walk-map::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none; opacity: .35; background-image: linear-gradient(#1d38272e 1px, transparent 1px), linear-gradient(90deg, #1d38272e 1px, transparent 1px); background-size: 28px 28px; mask-image: radial-gradient(ellipse, black, transparent 75%); }
.walk-node { min-width: 0; width: 100%; max-width: 176px; justify-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; border: 1px solid transparent; border-radius: 12px; padding: 8px 4px 15px; color: #d6e6dc; text-align: center; text-decoration: none; transition: background .25s, border-color .25s; }
.walk-node[data-node="build"] { grid-area: 1 / 1; }
.walk-node[data-node="source"] { grid-area: 1 / 2; }
.walk-node[data-node="release"] { grid-area: 1 / 3; }
.walk-node[data-node="server"] { grid-area: 1 / 4; }
.walk-node[data-node="visitors"] { grid-area: 1 / 5; }
.walk-node[data-node="monitor"] { grid-area: 2 / 3; }
.walk-node[data-node="data"] { grid-area: 2 / 4; }
.walk-node[data-node="backup"] { grid-area: 2 / 5; }
.walk-node[data-node="recovery"] { grid-area: 2 / 2; }
.walk-node:hover, .walk-node.is-active { background: radial-gradient(ellipse at center, #164f344d, #0b1c1226); border-color: #326b4c; }
.walk-node.is-active strong { color: #aeffda; }
.walk-node__number { position: absolute; top: 10px; left: 10px; font: 10px/1.2 var(--font-mono); color: #80a18b; }
.walk-node strong { font: 500 15px/1.3 var(--font-display); margin-top: 6px; }
.walk-node__label { font-size: 11px; line-height: 1.4; color: #97ac9e; margin-top: 5px; }
.walk-device { width: min(110px, 100%); height: 110px; overflow: visible; }
.walk-device__base { fill: #0e281b; stroke: #316f4d; stroke-width: .8; }
.walk-device__halo { fill: #2ef09b; opacity: .06; }
.walk-device__light { stroke: #53e3a3; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.walk-node.is-active .walk-device__light { stroke: #b3ffdf; filter: drop-shadow(0 0 3px #3afaad); }
.walk-node.is-active .walk-device__halo { opacity: .16; }
.walk-node.is-active .walk-device__base { stroke: #64d69b; }
.is-playing:not(.walk-still) .walk-node.is-active .walk-device__halo { animation: walk-breathe 2.6s ease-in-out infinite alternate; }
@keyframes walk-breathe { from { opacity: .08; } to { opacity: .28; } }
.walk-port { position: absolute; width: 5px; height: 5px; border-radius: 50%; background: #3b7253; box-shadow: 0 0 0 3px #0a170f; }
.walk-port--top { top: -3px; left: calc(50% - 2.5px); }
.walk-port--bottom { bottom: -3px; left: calc(50% - 2.5px); }
.walk-port--left { left: -3px; top: calc(50% - 2.5px); }
.walk-port--right { right: -3px; top: calc(50% - 2.5px); }
.walk-port:not(.is-connected) { visibility: hidden; }
.walk-node.is-active .walk-port { background: #b0ffdc; box-shadow: 0 0 5px #4be49b; }
.walk-wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; overflow: visible; pointer-events: none; }
.walk-wire { fill: none; stroke: #2c513c; stroke-width: 1.5; }
.walk-wire.is-active { stroke: #42a977; }
.walk-wire__arrow { stroke-width: 1.5; }
.walk-wire__packet { stroke: #b3ffdc; stroke-width: 3; stroke-linecap: round; stroke-dasharray: var(--packet-size) var(--packet-gap); filter: drop-shadow(0 0 4px #41ff9d); opacity: 0; animation: walk-packet var(--packet-duration) linear infinite; animation-play-state: paused; }
.is-playing:not(.walk-still) .walk-wire.is-active .walk-wire__packet { opacity: 1; animation-play-state: running; }
.walk-wire.is-reverse .walk-wire__packet { animation-direction: reverse; }
@keyframes walk-packet { to { stroke-dashoffset: var(--packet-end); } }
.walk-map__legend { grid-area: 2 / 1; display: flex; flex-direction: column; justify-content: center; gap: 5px; font: 500 26px/1.1 var(--font-display); color: #789987; padding-left: 20px; }
.walk-map__legend i { margin-top: 14px; width: 34px; height: 1px; background: #4ca877; }
.walk-map-footer { border-top: 1px solid #293e32; padding-top: 18px; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; color: #97b0a1; font-size: 12px; }
.walk-map-footer i { display: inline-block; width: 6px; height: 6px; background: #68e5a7; border-radius: 50%; margin-right: 7px; }
.walk-no-script { margin-top: 18px; color: #aebfb5; }
.walk-guide { padding-top: 70px; padding-bottom: 90px; }
.walk-guide-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 60px; align-items: end; margin-bottom: 42px; }
.walk-guide-heading .eyebrow-mono { grid-column: 1 / -1; }
.walk-guide h2 { font: 500 clamp(30px, 3.5vw, 44px)/1.1 var(--font-display); letter-spacing: -.03em; margin: 0; }
.walk-guide-heading > p { color: #aebfb5; font-size: 15px; line-height: 1.75; max-width: 48ch; }
.walk-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 40px; margin-bottom: 40px; }
.walk-guide article { scroll-margin-top: 95px; padding-top: 20px; border-top: 1px solid #294333; }
.walk-guide article:target { border-color: #82edb7; }
.walk-guide h3 { font: 500 18px/1.3 var(--font-display); color: #d4f0df; margin: 0 0 10px; }
.walk-guide article p { color: #aebfb5; font-size: 14px; line-height: 1.75; margin: 0; }
@media (max-width: 1100px) {
  .walk-toolbar { flex-direction: column; align-items: flex-start; }
  .walk-node strong { font-size: 14px; }
  .walk-map { column-gap: 22px; padding-inline: 0; }
}
@media (max-width: 700px) {
  .walk-intro, .walkthrough, .walk-guide { padding-inline: 20px; }
  .walk-intro { padding-top: 106px; padding-bottom: 28px; }
  .walk-intro > p { font-size: 15px; }
  .walk-chapters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 6px; }
  .walk-chapters button { font-size: 12px; padding-inline: 8px; }
  .walk-playback { width: 100%; justify-content: flex-end; }
  .walk-story { grid-template-columns: 1fr; gap: 12px; min-height: 210px; padding-block: 22px; }
  .walk-position { flex-direction: row; gap: 12px; align-items: center; }
  .walk-position > :first-child { font-size: 15px; }
  .walk-story h2 { font-size: 21px; }
  .walk-map { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 38px 30px; padding: 26px 18px 34px; }
  .walk-node { padding-block: 6px 12px; }
  .walk-device { width: 76px; height: 76px; }
  .walk-node strong { font-size: 14px; }
  .walk-node__label { font-size: 10px; }
  .walk-node[data-node="build"] { grid-area: 1 / 1; }
  .walk-node[data-node="source"] { grid-area: 1 / 2; }
  .walk-node[data-node="release"] { grid-area: 2 / 1; }
  .walk-node[data-node="server"] { grid-area: 2 / 2; }
  .walk-node[data-node="data"] { grid-area: 3 / 1; }
  .walk-node[data-node="visitors"] { grid-area: 3 / 2; }
  .walk-node[data-node="backup"] { grid-area: 4 / 1; }
  .walk-node[data-node="monitor"] { grid-area: 4 / 2; }
  .walk-node[data-node="recovery"] { grid-area: 5 / 1; }
  .walk-map__legend { grid-area: 5 / 2; font-size: 23px; padding-left: 14px; }
  .walk-guide { padding-top: 50px; padding-bottom: 60px; }
  .walk-guide-heading, .walk-guide-grid { grid-template-columns: 1fr; gap: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .walk-node, .walk-progress > span { transition: none; }
  .walk-wire__packet { animation: none; opacity: 0 !important; }
  .walk-device__halo { animation: none !important; }
}