. Design: Uses existing CSS variables; no new fonts/colors introduced. */ /* Primary tutorial content wrapper */ .tutorial-article-page .tutorial-content, .tutorial-article-page .app-card, #main-content.tutorial-page { max-width: 1100px; margin-left: auto; margin-right: auto; } /* Typography: restore site fonts, remove forced typewriter paragraphs */ .tutorial-article-page .tutorial-content, #main-content.tutorial-page { font-family: var(--font-body); color: var(--color-text-light); } .tutorial-article-page .tutorial-content p, #main-content.tutorial-page p { font-family: var(--font-body) !important; color: var(--color-text-secondary) !important; line-height: 1.7; font-size: 1rem; max-width: 78ch; margin-top: 0; margin-bottom: 1rem; } /* Headings: align with homepage heading font */ .tutorial-article-page .tutorial-content h1, .tutorial-article-page .tutorial-content h2, .tutorial-article-page .tutorial-content h3, .tutorial-article-page .tutorial-content h4, #main-content.tutorial-page h1, #main-content.tutorial-page h2, #main-content.tutorial-page h3, #main-content.tutorial-page h4 { font-family: var(--font-heading); color: var(--color-text-light); letter-spacing: -0.01em; line-height: 1.2; margin-top: 1.75rem; margin-bottom: 0.75rem; } /* Title sizing: avoid oversized headline jumps on tutorial pages */ .tutorial-article-page .article-title, #main-content.tutorial-page .article-title, #main-content.tutorial-page h1 { font-size: clamp(1.6rem, 2.2vw, 2.4rem); } /* Lists: consistent spacing */ .tutorial-article-page .tutorial-content ul, .tutorial-article-page .tutorial-content ol, #main-content.tutorial-page ul, #main-content.tutorial-page ol { margin-top: 0.5rem; margin-bottom: 1.25rem; padding-left: 1.25rem; color: var(--color-text-secondary); } /* Code blocks: keep dark theme but remove harsh pure-white text */ .tutorial-article-page pre, .tutorial-article-page pre code, .tutorial-article-page .code-block, #main-content.tutorial-page pre, #main-content.tutorial-page pre code, #main-content.tutorial-page .code-block { background-color: var(--color-primary-dark) !important; color: var(--color-text-light) !important; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 1rem; overflow-x: auto; font-size: 0.95rem; line-height: 1.55; } /* Inline code */ .tutorial-article-page :not(pre) > code, #main-content.tutorial-page :not(pre) > code { color: var(--color-text-light); background-color: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); border-radius: 6px; padding: 0.12rem 0.35rem; } /* Section spacing inside main */ #main-content.tutorial-page .app-card, .tutorial-article-page .tutorial-content { padding: 2rem; } @media (max-width: 700px) { #main-content.tutorial-page .app-card, .tutorial-article-page .tutorial-content { padding: 1.25rem; } #main-content.tutorial-page p { max-width: 100%; } }