:root, html[data-theme="light"] {
  --bg: #f4efe6; --bg-raised: #faf7f0; --text: #2e2a26; --text-muted: #6f6659; --accent: #8a5a3b; --border: #ddd3c2;
}
html[data-theme="dark"] {
  --bg: #1e1d1b; --bg-raised: #272522; --text: #e9e2d5; --text-muted: #a79d8c; --accent: #d0a77c; --border: #3a3833;
}
html, body { min-height: 100%; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
*, *::before, *::after { box-sizing: border-box; }
button, input { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
a:visited { color: var(--text-muted); }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 12px max(16px, calc((100% - 1040px) / 2)); background: var(--bg-raised); border-bottom: 1px solid var(--border); }
.wordmark { color: var(--text); font-weight: 700; text-decoration: none; letter-spacing: -.02em; }
.theme-toggle, .text-button { border: 0; padding: 4px 6px; color: var(--text-muted); background: transparent; cursor: pointer; }
.theme-toggle { width: 30px; height: 30px; font-size: 1rem; line-height: 1; }
.theme-toggle:hover, .text-button:hover { color: var(--text); }
.page { width: min(100% - 32px, 1040px); margin: 0 auto; }
.page-index, .page-centered { display: grid; place-items: center; min-height: calc(100vh - 57px); }
.index-card { width: min(100%, 680px); transform: translateY(-10vh); }
.eyebrow { margin: 0 0 8px; color: var(--text-muted); font-size: .875rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.read-form { display: flex; gap: 8px; }
input { min-width: 0; height: 44px; border: 1px solid var(--border); border-radius: 6px; padding: 0 12px; color: var(--text); background: var(--bg-raised); }
.read-form input { flex: 1; }
button[type="submit"] { height: 44px; border: 1px solid var(--accent); border-radius: 6px; padding: 0 24px; color: var(--bg); background: var(--accent); cursor: pointer; }
.status-card, .message-card, .login-card { width: min(100%, 520px); text-align: center; }
.message-card, .login-card { padding: 40px; background: var(--bg-raised); border: 1px solid var(--border); border-radius: 6px; }
h1 { margin: 0 0 16px; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.15; }
.message-card h1, .login-card h1 { font-size: 1.5rem; }
.muted, .elapsed { color: var(--text-muted); }
.url-wrap, .job-url { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-line { margin: 24px 0 8px; color: var(--text-muted); }
.elapsed { margin: 0 0 16px; font-size: .875rem; }
.progress { height: 3px; overflow: hidden; background: var(--border); }
.progress span { display: block; width: 35%; height: 100%; background: var(--accent); animation: progress 1.6s ease-in-out infinite; }
@keyframes progress { 0% { transform: translateX(-110%); } 100% { transform: translateX(310%); } }
.login-card form { display: grid; gap: 12px; text-align: left; }
.login-card label { color: var(--text-muted); font-size: .875rem; }
.login-card button { width: 100%; margin-top: 4px; }
.page-article { padding: 56px 0 80px; }
.reading-column { max-width: 68ch; margin: 0 auto; }
.article-header { margin-bottom: 40px; }
.article-header h1 { font-size: clamp(2rem, 5vw, 3rem); }
.byline-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.byline { margin: 0; color: var(--text-muted); font-size: .875rem; }
.article-body { font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Charter, Georgia, serif; font-size: 1.125rem; line-height: 1.65; }
.article-body p { margin: 0 0 1.4em; }
.article-body h1, .article-body h2, .article-body h3, .article-body h4, .article-body h5, .article-body h6 { margin: 1.4em 0 .5em; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; line-height: 1.2; }
.article-body img { max-width: 100%; height: auto; }
.article-body blockquote { margin: 1.4em 0; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--text-muted); }
.article-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--border); }
.article-body pre, .article-body code { font-family: ui-monospace, "SF Mono", "Cascadia Code", Menlo, Consolas, monospace; }
.article-body pre { overflow-x: auto; padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg-raised); font-size: .875rem; }
.article-body code { font-size: .9em; }
.article-body table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; }
.article-body th, .article-body td { padding: 8px; border: 1px solid var(--border); }
@media (max-width: 600px) { .read-form { flex-direction: column; } .read-form button { width: 100%; } .index-card { transform: translateY(-5vh); } .message-card, .login-card { padding: 24px; } .page-article { padding-top: 32px; } .byline-row { align-items: flex-start; flex-direction: column; gap: 8px; } }