.code-tour .network-app__photo { position: fixed; }
.code-tour.network-app::before { background: linear-gradient(90deg, rgb(8 10 12 / 92%), rgb(8 10 12 / 80%)); }
.code-tour .network-app__main { width: min(100% - 3rem, 66rem); }
.code-tour__heading { padding: 3rem 0 2.5rem; max-width: 43rem; }
.code-tour__heading h1 { font-size: clamp(2.5rem, 5vw, 4.7rem); color: #fff; font-weight: 600; letter-spacing: -.045em; line-height: 1.08; margin: 1rem 0; }
.code-tour p { color: #e1e6eb; line-height: 1.7; }
.code-tour .network-app__primary { width: fit-content; margin-top: 1rem; }
.code-tour__sections { border-top: 1px solid #75808b; }
.code-tour__sections details { border-bottom: 1px solid #75808b; padding: 1rem 0; }
.code-tour__sections summary { cursor: pointer; color: white; font-size: 1.2rem; padding: .5rem 0; line-height: 1.5; }
.code-tour__sections summary span { color: #aab8c6; padding-right: 1rem; font-size: .85rem; }
.code-tour__sections p { max-width: 70ch; margin-left: 2.5rem; }
.code-tour__note { margin-block: 2rem; font-size: .9rem; }
.code-tour a { color: #fff; text-underline-offset: .25em; }
.code-tour :is(a, summary):focus-visible { outline: 2px solid #70b5ff; outline-offset: 5px; }
@media (max-width: 600px) { .code-tour .network-app__main { width: calc(100% - 2rem); } .code-tour__sections p { margin-left: 0; } .code-tour .network-app__primary { width: 100%; } }