.journal-page { background: #191919; color: #e7e9ed; }
.journal-nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; max-width: 1320px; margin: auto; padding: 30px 40px; border-bottom: 1px solid #ffffff16; }
.journal-nav > a:first-child { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; letter-spacing: -.04em; }
.journal-nav > a:last-child { color: #b2bac7; font-size: 13px; }
.journal-header { max-width: 1000px; margin: 0 auto; padding: 105px 40px 65px; text-align: center; }
.journal-eyebrow { display: block; margin-bottom: 30px; color: #919aa9; font: 10px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .14em; }
.journal-header h1 { font-size: clamp(52px, 7vw, 95px); line-height: 1.02; letter-spacing: -.06em; font-weight: 500; }
.journal-lede { max-width: 700px; margin: 35px auto 0; color: #aeb7c4; font-size: 23px; line-height: 1.6; }
.journal-byline { display: flex; justify-content: center; flex-wrap: wrap; gap: 12px 25px; margin-top: 35px; color: #8f99a8; font-size: 12px; }
.journal-prose { width: min(700px, calc(100% - 80px)); margin: 0 auto 80px; font-size: 18px; line-height: 1.85; color: #b7bec9; }
.journal-prose p + p { margin-top: 23px; }
.journal-prose strong { color: #e0e6ef; font-weight: 500; }
.journal-prose em { color: #c4d8f0; }
.journal-prose h2 { color: #e7edf5; font-size: 34px; font-weight: 500; line-height: 1.2; letter-spacing: -.035em; margin: 60px 0 24px; }
.journal-prose a { color: #aecbf0; text-decoration: underline; text-underline-offset: 4px; }
.journal-prose .journal-small { color: #8e98a5; font-size: 13px; line-height: 1.75; }
.journal-demo-intro { color: #d2dce8; }
.journal-skip-demo { display: inline-block; margin-top: 25px; font-size: 13px; }
.journal-prose ul { margin: 25px 0; padding-left: 22px; }
.journal-prose li { margin-block: 12px; padding-left: 5px; }
#practice { padding-top: 70px; scroll-margin-top: 30px; }
.journal-takeaway { margin-top: 70px; padding: 30px; border: 1px solid #9abff633; border-radius: 18px; background: #a3c6ef07; }
.journal-takeaway h2 { margin: 0 0 20px; font-size: 30px; }
.journal-takeaway > a { display: inline-block; margin-top: 25px; font-size: 14px; }
.journal-footer { display: flex; justify-content: space-between; gap: 25px; max-width: 1000px; margin: auto; border-top: 1px solid #ffffff16; padding: 35px 40px; color: #949dac; font-size: 12px; }
.journal-page a:focus-visible { outline: 2px solid #a2c7ef; outline-offset: 5px; }
@media (max-width: 680px) {
  .journal-nav { padding: 23px 24px; }
  .journal-nav > a:first-child { font-size: 16px; }
  .journal-nav > a:last-child { font-size: 11px; }
  .journal-header { padding: 65px 24px 45px; }
  .journal-header h1 { font-size: clamp(45px, 12vw, 65px); }
  .journal-lede { margin-top: 28px; font-size: 19px; }
  .journal-prose { width: calc(100% - 48px); font-size: 16px; line-height: 1.85; }
  .journal-prose h2 { font-size: 29px; }
  .journal-takeaway { padding: 24px; }
  .journal-takeaway h2 { font-size: 28px; }
  .journal-footer { flex-wrap: wrap; padding-inline: 24px; }
}

.journal-page #network-demo { --network-fit-margin: .85; }
.journal-page #network-demo[data-network-guided] .network-layout { top: 0; height: 100svh; min-height: 0; }
@media (max-width: 760px) {
  .journal-page #network-demo { --network-fit-margin: .95; }
}
@media (min-width: 761px) {
  .journal-page #network-demo[data-network-story-beat="cards"] .network-study {
    top: 50%;
    transform: translateY(-50%) translateY(calc((1 - var(--network-card-entry)) * 100svh));
  }
}