@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/archivo-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/archivo-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/archivo-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2'); }
:root {
	--page: #f1f1ef; --surface: #ffffff; --ink: #1b1b1b; --ink-2: #4a4a47; --muted: #6b6b68;
	--line: #d9d9d5; --row-line: #e3e3df; --chip-line: #cfcfca; --accent: #e05a1b; --accent-text: #b44511;
	--updated-bg: #fbe3d3; --updated-ink: #8a3409; --fresh-line: #ebc9b4; --ok-bg: #e6f0df; --ok-ink: #2f5a1c;
	--on-ink: #ffffff; --tag-new-bg: #b44511; --tag-new-ink: #ffffff; --edit-bg: #ecece8; --edit-ink: #3e3e3b; --struct-bg: #e8eef6; --struct-ink: #2c4d73; --scrim: rgba(27, 27, 27, 0.18); --img-dim: 1;
	--fixed-bg: #eef0ec; --fixed-ink: #3e4a3a; --pj-feature-bg: #f7f7f5;
	--act-0: #e3e3df; --act-1: #f6cdb5; --act-2: #ee9f74; --act-3: #e05a1b; --act-4: #a63a0b;
	--head: Archivo, 'Helvetica Neue', Arial, sans-serif; --body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', 'Noto Sans CJK KR', sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) {
	--page: #161615; --surface: #1f1f1d; --ink: #ecece8; --ink-2: #bdbdb7; --muted: #9a9a94;
	--line: #383834; --row-line: #2c2c29; --chip-line: #4a4a45; --accent: #f26b2c; --accent-text: #ff9a66;
	--updated-bg: #3d2316; --updated-ink: #f7b48d; --fresh-line: #6a3d26; --ok-bg: #1f3320; --ok-ink: #9fd18a;
	--on-ink: #161615; --tag-new-bg: #f26b2c; --tag-new-ink: #161615; --edit-bg: #2c2c29; --edit-ink: #d6d6d0; --struct-bg: #1c2633; --struct-ink: #a9c4e6; --scrim: rgba(0, 0, 0, 0.55); --img-dim: 0.92;
	--fixed-bg: #232a22; --fixed-ink: #b9cbb2; --pj-feature-bg: #252523;
	--act-0: #2c2c29; --act-1: #5a2e17; --act-2: #8f4318; --act-3: #e0601f; --act-4: #ff9a66;
	color-scheme: dark;
} }
:root[data-theme='dark'] {
	--page: #161615; --surface: #1f1f1d; --ink: #ecece8; --ink-2: #bdbdb7; --muted: #9a9a94;
	--line: #383834; --row-line: #2c2c29; --chip-line: #4a4a45; --accent: #f26b2c; --accent-text: #ff9a66;
	--updated-bg: #3d2316; --updated-ink: #f7b48d; --fresh-line: #6a3d26; --ok-bg: #1f3320; --ok-ink: #9fd18a;
	--on-ink: #161615; --tag-new-bg: #f26b2c; --tag-new-ink: #161615; --edit-bg: #2c2c29; --edit-ink: #d6d6d0; --struct-bg: #1c2633; --struct-ink: #a9c4e6; --scrim: rgba(0, 0, 0, 0.55); --img-dim: 0.92;
	--fixed-bg: #232a22; --fixed-ink: #b9cbb2; --pj-feature-bg: #252523;
	--act-0: #2c2c29; --act-1: #5a2e17; --act-2: #8f4318; --act-3: #e0601f; --act-4: #ff9a66;
	color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font-family: var(--body); font-size: 16px; line-height: 1.7; }
a { color: inherit; }
button { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 8px; background: var(--surface); padding: 6px 10px; z-index: 30; }
.wrap { max-width: 1180px; margin: 0 auto; padding-left: 32px; padding-right: 32px; }
.site-head { padding-top: 28px; display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-dot { width: 11px; height: 11px; border-radius: 50%; background: var(--accent); }
.brand-name { font-family: var(--head); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 24px; font-size: 14.5px; font-weight: 500; }
.nav a { text-decoration: none; color: var(--ink-2); padding: 4px 0; border-bottom: 2px solid transparent; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current='page'] { color: var(--ink); border-bottom-color: var(--accent); }
.site-foot { padding-bottom: 48px; }
.site-foot div { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; font-size: 13px; color: var(--muted); }
.site-foot a { text-decoration: none; }
.grow { flex: 1; }
.label { font-family: var(--head); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; margin: 0; }
.mono { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.u { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.chip { min-height: 32px; padding: 0 12px; border: 1px solid var(--chip-line); border-radius: 999px; background: transparent; color: var(--ink); font-size: 12.5px; cursor: pointer; }
.chip.dark { border: 0; background: var(--ink); color: var(--on-ink); font-weight: 500; }
.chip[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
/* Every chip takes taps over 44 px (the public site's touch target, 2026-10-22) without looking bigger. */
.chip { position: relative; }
.chip::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.theme { display: inline-flex; align-items: center; gap: 6px; }
.tag { padding: 1px 9px; border-radius: 999px; font-family: var(--head); font-size: 11.5px; font-weight: 600; }
.tag-new { background: var(--tag-new-bg); color: var(--tag-new-ink); }
.tag-updated { background: var(--updated-bg); color: var(--updated-ink); }
.since { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 10px 10px 0; }
.since > span { flex: 1 1 260px; font-size: 14.5px; line-height: 1.5; }
.since a { font-size: 13.5px; font-weight: 600; }
[hidden] { display: none !important; }

/* Wiki page (Post.dc.html) */
.post { padding-top: 36px; padding-bottom: 72px; display: flex; flex-wrap: wrap; gap: 40px 56px; }
.toc { flex: 1 1 200px; max-width: 240px; display: flex; flex-direction: column; gap: 14px; padding-top: 150px; font-size: 13.5px; line-height: 1.45; }
.toc .label { font-size: 12px; letter-spacing: 0.04em; }
.toc-part { display: flex; flex-direction: column; gap: 6px; }
.toc-part > span { font-family: var(--head); font-size: 12.5px; font-weight: 600; }
.toc a { display: flex; gap: 8px; padding-left: 10px; border-left: 2px solid var(--line); color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--ink); }
.toc a.fresh { border-left-color: var(--accent); color: var(--ink); font-weight: 600; }
.toc a .dot { flex: none; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--accent); }
.toc .rss { margin-top: 6px; font-size: 12.5px; color: var(--ink-2); }
.post article { flex: 999 1 560px; min-width: 0; max-width: 700px; }
.post article .since { margin-bottom: 24px; }
.post-head { display: flex; flex-direction: column; gap: 14px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.post-head h1 { margin: 0; font-family: var(--head); font-size: 44px; line-height: 1.08; font-weight: 600; letter-spacing: -0.02em; }
.post-head .summary { margin: 0; font-size: 18px; line-height: 1.6; color: var(--ink-2); }
.facts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.facts .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; background: var(--surface); font-family: var(--body); font-weight: 500; }
.intro { font-size: 14px; color: var(--ink-2); }
.intro p { margin: 0; }
.part { margin-top: 44px; font-family: var(--head); font-size: 13px; font-weight: 600; letter-spacing: 0.06em; color: var(--accent); }
.sec { margin-top: 40px; border-radius: 12px; border: 1px solid transparent; }
.part + .sec { margin-top: 14px; }
.sec.fresh { padding: 18px 20px 20px; background: var(--surface); border-color: var(--fresh-line); }
.sec-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.sec h2 { margin: 0; font-family: var(--head); font-size: 25px; line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; }
.sec .when { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.grid { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 16px; margin-top: 14px; line-height: 1.75; }
.grid > .k { font-family: var(--head); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted); padding-top: 3px; }
.grid > .k.note { color: var(--accent); }
.grid > .v { min-width: 0; }
.grid > .v.note { color: var(--ink-2); }
.md { min-width: 0; overflow-wrap: break-word; }
.md > * { margin: 0; }
.md > * + * { margin-top: 10px; }
.md pre { padding: 11px 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.6; }
.md code { font-family: var(--mono); font-size: 0.88em; }
.md :not(pre) > code { background: var(--surface); border: 1px solid var(--row-line); padding: 0 5px; border-radius: 4px; }
.md a { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.md img { display: block; max-width: 100%; height: auto; border-radius: 6px; opacity: var(--img-dim); }
.md blockquote { padding: 10px 14px; background: var(--surface); border-left: 3px solid var(--accent); border-radius: 0 8px 8px 0; color: var(--ink-2); }
.md table { border-collapse: collapse; display: block; overflow-x: auto; }
.md th, .md td { border-bottom: 1px solid var(--row-line); padding: 6px 12px 6px 0; text-align: left; }
.sec > .md { margin-top: 14px; }
.history { position: fixed; z-index: 21; top: 0; right: 0; width: min(420px, 100%); height: 100%; overflow-y: auto; background: var(--surface); border-left: 1px solid var(--line); padding: 26px 26px 40px; display: flex; flex-direction: column; gap: 16px; }
.history-scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 20; display: none; }
.history:not(:target) { display: none; }
body:has(#history:target) .history-scrim { display: block; }
.history h2 { margin: 0; font-family: var(--head); font-size: 20px; font-weight: 600; }
.history .head { display: flex; align-items: center; gap: 10px; }
.history .close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; color: var(--ink); cursor: pointer; font-size: 22px; line-height: 1; }
.history ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.history li { display: flex; flex-direction: column; gap: 4px; padding-bottom: 14px; border-bottom: 1px solid var(--row-line); }
.history li .meta { display: flex; align-items: baseline; gap: 10px; }
.history li > span:not(.meta) { font-size: 14.5px; line-height: 1.55; }
.history li a { align-self: flex-start; font-size: 13px; }
.history > a { font-size: 13px; color: var(--ink-2); }

/* Home (Home.dc.html) */
.home { padding-top: 44px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 40px; }
.hero { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px 48px; }
.hero > div:first-child { flex: 1 1 520px; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { margin: 0; font-family: var(--head); font-size: 46px; line-height: 1.06; font-weight: 600; letter-spacing: -0.025em; }
.hero p { margin: 0; max-width: 620px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.counts { flex: 0 1 auto; display: flex; gap: 28px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.counts > div { display: flex; flex-direction: column; }
.counts b { font-family: var(--head); font-size: 26px; font-weight: 600; color: var(--ink); }
.recent { display: flex; flex-direction: column; gap: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.card { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; text-decoration: none; min-height: 168px; }
.card.fresh { border-color: var(--fresh-line); }
.card .top { display: flex; align-items: center; gap: 8px; }
.card .t { font-family: var(--head); font-size: 21px; line-height: 1.2; font-weight: 600; }
.card .change { font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.card .meta { margin-top: auto; font-size: 12.5px; color: var(--muted); }
.card .tag { font-size: 10.5px; padding: 0 8px; }
.row-link { text-decoration: none; }
.row-link:hover .t { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.all { display: flex; flex-direction: column; gap: 8px; }
.all-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding-bottom: 10px; }
.all-head input { flex: 0 1 260px; min-width: 180px; min-height: 36px; padding: 0 14px; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: var(--body); font-size: 13.5px; }
.sorts { display: inline-flex; gap: 6px; }
.sorts .chip { min-height: 30px; }
.group h3 { margin: 22px 0 4px; font-family: var(--head); font-size: 15px; font-weight: 600; }
.row { display: grid; grid-template-columns: 14px minmax(0, 1fr) 150px 64px; align-items: baseline; gap: 4px 14px; padding: 13px 0; border-bottom: 1px solid var(--row-line); }
.row .dot { width: 8px; height: 8px; border-radius: 50%; background: transparent; }
.row.fresh .dot { background: var(--accent); }
.row .names { display: flex; flex-direction: column; min-width: 0; }
.row .t { font-size: 16.5px; font-weight: 500; }
.row .sub { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .upd { font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.row.fresh .upd { color: var(--accent-text); }
.row .min { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; }
.hint { margin: 14px 0 0; font-size: 13px; color: var(--muted); }

/* Narrower than the two columns: the contents list goes (the page reads top to bottom). */
@media (max-width: 960px) {
	.toc { display: none; }
}
/* The Publish screen's preview (Publish.dc.html): the page alone, no site frame around it. */
.preview .site-head, .preview .site-foot, .preview .toc, .preview .history, .preview .skip { display: none; }
.preview .post { padding-top: 28px; justify-content: center; }
.preview article { max-width: 640px; }
.preview .sec { cursor: pointer; }
.preview .sec:hover { outline: 1px dashed var(--chip-line); outline-offset: 8px; border-radius: 12px; }
.edit { order: 9; margin-left: auto; padding: 0 10px; min-height: 26px; display: inline-flex; align-items: center; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--surface); color: var(--ink-2); font-size: 12px; text-decoration: none; white-space: nowrap; }
.edit:hover { color: var(--ink); border-color: var(--ink); }
@media (max-width: 640px) {
	.wrap { padding-left: 16px; padding-right: 16px; }
	.nav { gap: 6px 20px; }
	.toc { display: none; }
	.post-head h1, .hero h1 { font-size: 34px; }
	.grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
	.row { grid-template-columns: 14px minmax(0, 1fr) 64px; }
	.row .upd { display: none; }
}

/* About (B16). */
.about { padding-top: 36px; padding-bottom: 72px; display: flex; flex-direction: column; gap: 36px; max-width: 980px; }
.about .post-head { border-bottom: 0; padding-bottom: 0; }
.quote { margin: 4px 0 0; font-size: 19px; line-height: 1.55; color: var(--ink-2); font-style: italic; max-width: 40em; }
.quote cite { display: block; margin-top: 6px; font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.about-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 28px 32px; }
.about-grid section { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.about-grid .wide { grid-column: 1 / -1; }
.facts-card { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 6px 20px; }
.facts-card .fact { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; padding: 12px 0; border-top: 1px solid var(--row-line); }
.facts-card .fact:first-child { border-top: 0; }
.facts-card dt { font-family: var(--head); font-size: 13px; font-weight: 600; color: var(--muted); padding-top: 2px; }
.facts-card dd { margin: 0; font-size: 15px; line-height: 1.6; }
.prose { max-width: 44em; font-size: 16px; }
.prose p { margin: 0 0 14px; }
.prose h3 { margin: 22px 0 8px; font-family: var(--head); font-size: 18px; font-weight: 600; }
@media (max-width: 640px) { .facts-card .fact { grid-template-columns: 1fr; gap: 2px; } .about h1 { font-size: 36px; } }

/* Translations (B16; docs/mockups/Translations.dc.html). Korean text uses the reader's own Korean fonts
   (open decision 11): the body stack falls back to them, nothing is downloaded. */
[lang='ko'] { word-break: keep-all; }
.ko-title { font-size: 17px; color: var(--ink); }
.sync { padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; }
.sync.ok { background: var(--ok-bg); color: var(--ok-ink); }
.sync.changed { background: var(--updated-bg); color: var(--updated-ink); }
.original { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; font-size: 14.5px; color: var(--ink-2); }
.original p { margin: 0; }
.translations { padding-top: 64px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 28px; }
.tr-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 48px; }
.tr-head .lead { flex: 1 1 520px; display: flex; flex-direction: column; gap: 14px; }
.tr-head h1 { margin: 0; font-family: var(--head); font-size: 46px; line-height: 1.06; font-weight: 600; letter-spacing: -0.025em; }
.tr-head p { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.counts { display: flex; gap: 28px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.counts div { display: flex; flex-direction: column; }
.counts b { font-family: var(--head); font-size: 26px; font-weight: 600; color: var(--ink); }
.tr-card { display: flex; flex-wrap: wrap; gap: 24px 40px; padding: 30px 32px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; }
.tr-card .main { flex: 999 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.tr-card .pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tr-card .pill { padding: 2px 10px; border: 1px solid var(--chip-line); border-radius: 999px; font-size: 12px; color: var(--ink-2); }
.tr-card h2 { margin: 0; font-family: var(--head); font-size: 28px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; }
.tr-card .main > p { margin: 0; font-size: 15.5px; line-height: 1.7; color: var(--ink-2); }
.tr-card .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 1px solid var(--chip-line); border-radius: 999px; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; }
.btn::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
.btn.dark { border-color: var(--ink); background: var(--ink); color: var(--on-ink); }
.tr-card .side { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px; padding-left: 24px; border-left: 1px solid var(--row-line); }
.tr-card .side div { display: flex; flex-direction: column; gap: 1px; font-size: 14px; line-height: 1.5; }
.tr-card .side .k { font-family: var(--head); font-size: 11px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); }
.tr-notes { display: flex; flex-wrap: wrap; gap: 20px 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.tr-notes p { margin: 0; flex: 1 1 320px; }
.tr-notes strong { color: var(--ink); }
@media (max-width: 640px) { .translations { padding-top: 36px; } .tr-head h1 { font-size: 36px; } .tr-card { padding: 22px 20px; } .tr-card .side { padding-left: 0; border-left: 0; padding-top: 16px; border-top: 1px solid var(--row-line); } }

/* Changelog (B16; docs/mockups/Changelog.dc.html). Bars use stepped classes: the content policy allows
   no inline styles. */
.changelog { padding-top: 64px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 40px; }
.lived { display: flex; flex-direction: column; gap: 18px; padding: 28px 30px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; }
.lived h2 { margin: 0; }
.hosts-scroll { overflow-x: auto; padding-bottom: 4px; }
.hosts { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; min-width: 980px; }
.hosts li { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; position: relative; }
.hosts .dot { width: 14px; height: 14px; box-sizing: border-box; border-radius: 50%; background: var(--ink); position: relative; z-index: 1; }
.hosts li::before { content: ''; position: absolute; left: 18px; right: 4px; top: 6px; border-top: 2px solid var(--ink); }
.hosts li.current .dot { background: var(--accent); }
.hosts li.current::before { border-top-style: dashed; border-top-color: var(--accent); }
.hosts li.next .dot { border: 2px dashed var(--accent); background: var(--surface); }
.hosts li.next::before { display: none; }
.hosts .mono { font-size: 11.5px; }
.hosts .name { font-family: var(--head); font-size: 15px; font-weight: 600; }
.hosts li.next .name { color: var(--accent-text); }
.domains { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13.5px; }
.domains .label { font-size: 12px; letter-spacing: 0.04em; margin-right: 4px; }
.domain { font-family: var(--mono); font-size: 12.5px; padding: 2px 9px; border-radius: 999px; background: var(--row-line); color: var(--ink-2); text-decoration: line-through; text-decoration-color: var(--muted); }
.domain.current { background: var(--tag-new-bg); color: var(--tag-new-ink); text-decoration: none; }
.domains .arrow { color: var(--muted); }
.cl-body { display: flex; flex-wrap: wrap; gap: 40px 56px; }
.cl-side { flex: 1 1 220px; max-width: 280px; display: flex; flex-direction: column; gap: 22px; }
.cl-side .block { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-2); }
.cl-side .label { font-size: 12px; }
.top { display: flex; flex-direction: column; gap: 4px; }
.top-line { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--ink); }
.top-line .mono { white-space: nowrap; }
.bar { height: 4px; border-radius: 2px; background: var(--row-line); }
.bar span { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.bar .w1 { width: 5%; }
.bar .w2 { width: 10%; }
.bar .w3 { width: 15%; }
.bar .w4 { width: 20%; }
.bar .w5 { width: 25%; }
.bar .w6 { width: 30%; }
.bar .w7 { width: 35%; }
.bar .w8 { width: 40%; }
.bar .w9 { width: 45%; }
.bar .w10 { width: 50%; }
.bar .w11 { width: 55%; }
.bar .w12 { width: 60%; }
.bar .w13 { width: 65%; }
.bar .w14 { width: 70%; }
.bar .w15 { width: 75%; }
.bar .w16 { width: 80%; }
.bar .w17 { width: 85%; }
.bar .w18 { width: 90%; }
.bar .w19 { width: 95%; }
.bar .w20 { width: 100%; }
.ctag { justify-self: start; padding: 1px 9px; border-radius: 999px; font-family: var(--head); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.ctag-new, .ctag-start { background: var(--updated-bg); color: var(--updated-ink); }
.ctag-start { background: var(--tag-new-bg); color: var(--tag-new-ink); }
.ctag-edit { background: var(--edit-bg); color: var(--edit-ink); }
.ctag-structure { background: var(--struct-bg); color: var(--struct-ink); }
.ctag-move { background: var(--ink); color: var(--on-ink); }
.ctag-account { background: var(--ok-bg); color: var(--ok-ink); }
.cl-list { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cl-tools .filters { display: flex; flex-wrap: wrap; gap: 10px; }
.cl-tools .chip { min-height: 34px; }
.cl-tools input { flex: 0 1 230px; min-width: 170px; min-height: 36px; padding: 0 14px; border: 1px solid var(--chip-line); border-radius: 999px; background: var(--surface); color: var(--ink); font-family: var(--body); font-size: 13.5px; }
.year { display: flex; flex-direction: column; margin-top: 26px; }
.year-head { display: flex; align-items: flex-end; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--ink); }
.year-head h3 { margin: 0; font-family: var(--head); font-size: 30px; line-height: 1; font-weight: 600; }
.year-head .n { font-size: 13px; color: var(--muted); }
.months { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.months span { width: 6px; border-radius: 1px; background: var(--row-line); }
.months span.on { background: var(--accent); }
.months .h1 { height: 2px; }
.months .h2 { height: 4px; }
.months .h3 { height: 6px; }
.months .h4 { height: 8px; }
.months .h5 { height: 10px; }
.months .h6 { height: 12px; }
.months .h7 { height: 14px; }
.months .h8 { height: 16px; }
.months .h9 { height: 18px; }
.months .h10 { height: 20px; }
.months .h11 { height: 22px; }
.months .h12 { height: 24px; }
.months .h13 { height: 26px; }
.crow { display: grid; grid-template-columns: 64px 112px minmax(0, 1fr); align-items: baseline; gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--row-line); }
.crow .mono { font-size: 12.5px; }
.crow .what { font-size: 15px; line-height: 1.55; }
.crow .pg { font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.crow span.pg { text-decoration: none; }
.crow .pg.gone { text-decoration: line-through; text-decoration-color: var(--muted); }
.crow .sep { color: var(--muted); }
.crow .note { color: var(--ink-2); }
.cl-list .none { margin: 20px 0; font-size: 14.5px; color: var(--ink-2); }
@media (max-width: 640px) { .changelog { padding-top: 36px; } .crow { grid-template-columns: 56px minmax(0, 1fr); } .crow .what { grid-column: 1 / -1; } .lived { padding: 20px; } }

/* Projects (B16; docs/mockups/Projects.dc.html). Month labels and the graph's colours are classes: the
   content policy allows no inline styles. A product's picture panel keeps the product's own colour. */
.pj-page { padding-top: 64px; padding-bottom: 80px; display: flex; flex-direction: column; gap: 36px; }
.pj-head { display: flex; flex-direction: column; gap: 14px; }
.pj-head h1 { margin: 0; font-family: var(--head); font-size: 46px; line-height: 1.06; font-weight: 600; letter-spacing: -0.025em; }
.pj-head p { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.65; color: var(--ink-2); }
.pj-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; scroll-margin-top: 16px; }
.pj-show { display: flex; flex-wrap: wrap; gap: 28px 40px; padding: 32px 34px; }
.pj-show-text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.pj-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pj-pill { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--chip-line); color: var(--ink-2); font-size: 12px; white-space: nowrap; }
.pj-pill-live { border-color: var(--ok-bg); background: var(--ok-bg); color: var(--ok-ink); font-weight: 600; }
.pj-card h2 { margin: 0; font-family: var(--head); font-size: 38px; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.pj-tagline { margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.pj-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.pj-facts { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 6px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pj-preview { flex: 1 1 340px; min-width: 0; min-height: 260px; display: flex; align-items: center; justify-content: center; padding: 20px; border-radius: 14px; }
.pj-preview img { display: block; max-width: 100%; max-height: 360px; width: auto; height: auto; border-radius: 10px; opacity: var(--img-dim); }
.pj-tone-night { background: #161b29; }
.pj-tone-sky { background: #dceaf7; }
.pj-tone-paper { background: var(--page); }
.pj-sec { padding: 26px 34px; border-top: 1px solid var(--row-line); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pj-label { margin: 0; font-family: var(--head); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); text-transform: uppercase; }
.pj-act-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 14.5px; }
.pj-act-head strong { font-weight: 600; }
.pj-graph-scroll { overflow-x: auto; padding-bottom: 4px; }
.pj-graph { display: inline-flex; flex-direction: column; gap: 4px; }
.pj-months { display: grid; grid-template-columns: repeat(53, 11px); column-gap: 3px; height: 16px; font-size: 10.5px; line-height: 16px; color: var(--muted); }
.pj-months span { white-space: nowrap; overflow: hidden; }
.pj-months .pj-c1 { grid-column: 1 / span 3; }
.pj-months .pj-c2 { grid-column: 2 / span 3; }
.pj-months .pj-c3 { grid-column: 3 / span 3; }
.pj-months .pj-c4 { grid-column: 4 / span 3; }
.pj-months .pj-c5 { grid-column: 5 / span 3; }
.pj-months .pj-c6 { grid-column: 6 / span 3; }
.pj-months .pj-c7 { grid-column: 7 / span 3; }
.pj-months .pj-c8 { grid-column: 8 / span 3; }
.pj-months .pj-c9 { grid-column: 9 / span 3; }
.pj-months .pj-c10 { grid-column: 10 / span 3; }
.pj-months .pj-c11 { grid-column: 11 / span 3; }
.pj-months .pj-c12 { grid-column: 12 / span 3; }
.pj-months .pj-c13 { grid-column: 13 / span 3; }
.pj-months .pj-c14 { grid-column: 14 / span 3; }
.pj-months .pj-c15 { grid-column: 15 / span 3; }
.pj-months .pj-c16 { grid-column: 16 / span 3; }
.pj-months .pj-c17 { grid-column: 17 / span 3; }
.pj-months .pj-c18 { grid-column: 18 / span 3; }
.pj-months .pj-c19 { grid-column: 19 / span 3; }
.pj-months .pj-c20 { grid-column: 20 / span 3; }
.pj-months .pj-c21 { grid-column: 21 / span 3; }
.pj-months .pj-c22 { grid-column: 22 / span 3; }
.pj-months .pj-c23 { grid-column: 23 / span 3; }
.pj-months .pj-c24 { grid-column: 24 / span 3; }
.pj-months .pj-c25 { grid-column: 25 / span 3; }
.pj-months .pj-c26 { grid-column: 26 / span 3; }
.pj-months .pj-c27 { grid-column: 27 / span 3; }
.pj-months .pj-c28 { grid-column: 28 / span 3; }
.pj-months .pj-c29 { grid-column: 29 / span 3; }
.pj-months .pj-c30 { grid-column: 30 / span 3; }
.pj-months .pj-c31 { grid-column: 31 / span 3; }
.pj-months .pj-c32 { grid-column: 32 / span 3; }
.pj-months .pj-c33 { grid-column: 33 / span 3; }
.pj-months .pj-c34 { grid-column: 34 / span 3; }
.pj-months .pj-c35 { grid-column: 35 / span 3; }
.pj-months .pj-c36 { grid-column: 36 / span 3; }
.pj-months .pj-c37 { grid-column: 37 / span 3; }
.pj-months .pj-c38 { grid-column: 38 / span 3; }
.pj-months .pj-c39 { grid-column: 39 / span 3; }
.pj-months .pj-c40 { grid-column: 40 / span 3; }
.pj-months .pj-c41 { grid-column: 41 / span 3; }
.pj-months .pj-c42 { grid-column: 42 / span 3; }
.pj-months .pj-c43 { grid-column: 43 / span 3; }
.pj-months .pj-c44 { grid-column: 44 / span 3; }
.pj-months .pj-c45 { grid-column: 45 / span 3; }
.pj-months .pj-c46 { grid-column: 46 / span 3; }
.pj-months .pj-c47 { grid-column: 47 / span 3; }
.pj-months .pj-c48 { grid-column: 48 / span 3; }
.pj-months .pj-c49 { grid-column: 49 / span 3; }
.pj-months .pj-c50 { grid-column: 50 / span 3; }
.pj-months .pj-c51 { grid-column: 51 / span 3; }
.pj-months .pj-c52 { grid-column: 52 / span 2; }
.pj-months .pj-c53 { grid-column: 53 / span 1; }
.pj-days { display: grid; grid-template-rows: repeat(7, 11px); grid-auto-flow: column; grid-auto-columns: 11px; gap: 3px; }
.pj-days span, .pj-legend .pj-sw { width: 11px; height: 11px; border-radius: 2px; }
.pj-l0 { background: var(--act-0); } .pj-l1 { background: var(--act-1); } .pj-l2 { background: var(--act-2); } .pj-l3 { background: var(--act-3); } .pj-l4 { background: var(--act-4); }
.pj-l-none, .pj-l-future { background: transparent; }
.pj-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11.5px; color: var(--muted); }
.pj-legend span:first-child { margin-right: 4px; }
.pj-legend .pj-l4 + span { margin-left: 4px; }
.pj-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 14px; }
.pj-feature { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; background: var(--pj-feature-bg); border-radius: 12px; }
.pj-n { font-family: var(--mono); font-size: 12px; color: var(--accent-text); }
.pj-ft { font-family: var(--head); font-size: 18px; line-height: 1.25; font-weight: 600; word-break: keep-all; }
.pj-fx { font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.pj-log { gap: 6px; padding-bottom: 30px; }
.pj-log-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.pj-full { font-size: 13px; white-space: nowrap; }
.pj-urow { display: grid; grid-template-columns: 110px 92px minmax(0, 1fr); align-items: baseline; gap: 4px 16px; padding: 11px 0; border-bottom: 1px solid var(--row-line); }
.pj-urow .mono { font-size: 12.5px; }
.pj-type { justify-self: start; padding: 1px 9px; border-radius: 999px; font-family: var(--head); font-size: 12px; font-weight: 600; white-space: nowrap; }
.pj-type-new { background: var(--updated-bg); color: var(--updated-ink); }
.pj-type-improved { background: var(--struct-bg); color: var(--struct-ink); }
.pj-type-fixed { background: var(--fixed-bg); color: var(--fixed-ink); }
.pj-utext { font-size: 15px; line-height: 1.55; }
.pj-note { margin: 0; font-size: 13px; color: var(--muted); }
.pj-os-bar { display: flex; align-items: center; gap: 7px; padding: 12px 18px; background: var(--pj-feature-bg); border-bottom: 1px solid var(--row-line); }
.pj-os-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--chip-line); }
.pj-os-addr { margin-left: 10px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--mono); font-size: 12.5px; color: var(--muted); }
.pj-os-head { padding-bottom: 22px; }
.pj-os-tabs { display: flex; gap: 6px; padding: 0 34px; border-bottom: 1px solid var(--row-line); overflow-x: auto; }
.pj-os-tab { min-height: 44px; padding: 0 16px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--ink-2); font-family: var(--head); font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.pj-os-tab[aria-selected='true'] { border-bottom-color: var(--accent); color: var(--ink); }
.pj-os-tab:focus-visible { outline-offset: -4px; }
.pj-room { border-top: 1px solid var(--row-line); scroll-margin-top: 16px; }
.pj-os-tabs:not([hidden]) ~ .pj-room { border-top: 0; }
.pj-room-name { margin: 0; font-family: var(--head); font-size: 28px; line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; }
.pj-room-features { padding: 0 34px 30px; }
@media (max-width: 640px) {
	.pj-page { padding-top: 36px; }
	.pj-head h1 { font-size: 36px; }
	.pj-show { padding: 22px 20px; }
	.pj-sec { padding: 20px; }
	.pj-os-tabs { padding: 0 12px; }
	.pj-os-tab { padding: 0 12px; }
	.pj-room-features { padding: 0 20px 22px; }
	.pj-room-name { font-size: 24px; }
	.pj-card h2 { font-size: 32px; }
	.pj-urow { grid-template-columns: auto minmax(0, 1fr); }
	.pj-urow .pj-utext { grid-column: 1 / -1; }
	.pj-preview { min-height: 0; }
}