@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;600&display=swap');

body {
    font-family: 'Inter Tight', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    color: #333;
    background-color: #fdfdfd;
    margin: 0;
    padding: 20px;
}
.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #fff;
    padding: 2rem;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.05);
}
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-top: 2rem;
    font-weight: 400;
    font-family: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}
h1 {
    font-size: 2.25rem;
}
h2 {
    font-size: 2.25rem;
}
h3 {
    font-size: 1.35rem;
}
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2rem auto;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
/* Utilities for layouting paired visuals */
.side-by-side { display:flex; align-items:center; justify-content:center; gap:16px; flex-wrap:nowrap; }
.arrow { font-size: 28px; line-height: 1; }
code {
    background-color: #f0f0f0;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
}
ol {
    padding-left: 20px;
}
li {
    margin-bottom: 0.5rem;
}
strong {
    color: #000;
}