:root{color-scheme:light;scrollbar-gutter:stable both-edges;--bg:whitesmoke;--text:#1f1f1c;--muted:#73706b;--accent:#508fff;--line:color-mix(in srgb, var(--accent) 20%, transparent);--code-line:#465469;--sans:ui-sans-serif, sans-serif;--mono:ui-monospace, monospace}@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#0d1117;--text:#edf1f7;--muted:#a5afbf;--accent:#7aa7ff}}*{box-sizing:border-box}a{color:inherit;text-decoration:none}a:is(:hover,:active,:focus-visible){color:var(--accent)}img{display:block;max-width:100%;height:auto}body{margin:0;color:var(--text);background:var(--bg);font:18px/1.8 var(--sans);>:is(header,main,footer) { width:min(44rem,100%); margin-inline:auto; padding-inline:1rem; } >header { margin-block:1.25rem; >nav { display:flex; justify-content:space-evenly; a { display:inline-flex; align-items:center; padding:0.28rem 0; color:var(--muted); &.is-active { color:var(--accent); } } } } >footer { padding-block:2rem; color:var(--muted); font-size:0.875rem; text-align:center; }}main{>header, >article>header { margin-bottom: 1.6rem; >p { margin: 0 0 0.35rem; color: var(--accent); font-size: 0.76rem; text-transform: uppercase; } >h1 { margin: 0 0 0.85rem; font: 600 clamp(1.7rem, 4vw, 2.1rem)/1.25 var(--sans); } >div { display: flex; flex-wrap: wrap; gap: 0.8rem; color: var(--muted); font-size: 0.88rem; } +p { margin: 0; color: var(--muted); } } >ul { margin: 0; padding: 0; list-style: none; } >ul>li { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) clamp(6.5rem, 18vw, 7.5rem); column-gap: clamp(0.25rem, 1vw, 1rem); padding-block: 0.44rem; >a { min-width: 0; font-size: 1.05rem; line-height: 1.5; &:hover { text-decoration: underline; } } time { color: var(--muted); font: 0.88rem var(--mono); font-variant-numeric: tabular-nums; text-align: end; } }}.typo{li:has(> input[type="checkbox"]) { list-style:none; } li>input[type="checkbox"] { margin-inline:-1.2rem 0.55rem; vertical-align:middle; }:is(blockquote,pre,table,img,hr) { margin:1.15rem 0; } blockquote { margin-inline:0; padding-inline-start:1rem; color:var(--muted); border-inline-start:2px solid var(--line); } hr { height:1px; border:0; background:linear-gradient(90deg,transparent,var(--line),transparent); } .footnotes { margin-top:2rem; padding-top:0.8rem; color:var(--muted); border-top:1px solid var(--line); hr { display:none; } } a { text-decoration:underline; } code { font:0.92em var(--mono); color:#e6edf3; padding:0.14rem 0.38rem; background:#2b3644; border:1px solid var(--code-line); border-radius:6px; } pre { max-width:100%; font:0.92em/1.65 var(--mono); color:#e6edf3; padding:0.9rem 1rem; overflow-x:auto; background:#222b36; border:1px solid var(--code-line); border-radius:12px; } pre code { padding:0; background:transparent; border:0; } table { width:100%; border-collapse:collapse; table-layout:fixed;:is(th,td) { padding:0.7rem 0.8rem; border:1px solid var(--line); text-align:start; overflow-wrap:anywhere; } }}.callout{padding-left:.9rem;border-inline-start:2px solid var(--line); :is(strong, summary) { display: block; margin-bottom: 0.35rem; color: var(--accent); font-size: 0.82rem; font-weight: 600; line-height: 1.4; } >summary { cursor: pointer; list-style: none; } >summary::-webkit-details-marker { display: none; } >summary::before { content: "▸"; margin-right: 0.38rem; } &[open]>summary::before { content: "▾"; }}.comments{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);article { padding: 1rem 0; border-bottom: 1px solid var(--line); } article>header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.85rem; } article>header>p { flex: 1 1 14rem; margin: 0; } article>section { margin-top: 0.75rem; padding-left: 1rem; border-left: 2px solid var(--line); }}