/* Article pages under /notes. Colors and base font come from ../style.css. */

:root { --code-bg: #f5f5f5; }
@media (prefers-color-scheme: dark) {
    :root { --code-bg: #1d1d1d; }
}

.note {
    max-width: 720px;
    margin: 0 auto;
    padding: 40px 20px 96px;
}

.back { font-size: 0.9rem; }

.note h1 { font-size: 1.75rem; margin: 28px 0 4px; line-height: 1.25; }
.note .meta { color: var(--muted); margin: 0 0 28px; }

.note h2 {
    font-size: 1.2rem;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    border: 0;
    padding: 0;
    margin: 40px 0 10px;
}
.note h3 { font-size: 1rem; font-weight: 600; margin: 24px 0 6px; }
.note p { margin: 0 0 12px; }

.note ul, .note ol { padding-left: 1.4em; margin: 0 0 12px; }
.note ul { list-style: disc; }
.note ol { list-style: decimal; }
.note li { margin-bottom: 4px; }

.note code {
    font: 0.88em ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 4px;
}
.note pre {
    background: var(--code-bg);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
    margin: 0 0 16px;
    overflow-x: auto;
    line-height: 1.5;
}
.note pre code { background: none; padding: 0; font-size: 13px; }

.note .tip {
    border-left: 3px solid var(--line);
    padding: 2px 0 2px 14px;
    color: var(--muted);
    margin: 0 0 16px;
}

.note figure { margin: 0 0 20px; }
.note figure img { width: 100%; height: auto; border-radius: 6px; display: block; }
.note figcaption { color: var(--muted); font-size: 0.85rem; margin-top: 6px; }

.note details { margin: 0 0 16px; }
.note summary { cursor: pointer; color: var(--link); margin-bottom: 10px; }

@media print {
    .back { display: none; }
    .note { padding: 0; max-width: none; }
    .note pre { white-space: pre-wrap; word-break: break-word; }
    .note details > *:not(summary) { display: block; }
}