:root{color-scheme:light dark;scrollbar-gutter:stable both-edges;--bg:light-dark(whitesmoke, #0d1117);--text:light-dark(#1f1f1c, #edf1f7);--muted:light-dark(#73706b, #a5afbf);--accent:light-dark(#508fff, #7aa7ff);--line:color-mix(in srgb, var(--accent) 20%, transparent);--code-line:#465469;--sans:ui-sans-serif, sans-serif;--mono:ui-monospace, monospace}*{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; color:var(--muted); } 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; }:not(pre)>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; } 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; } }}:is(.typo blockquote,.callout,.comments article>section){padding-inline-start:1rem;border-inline-start:2px solid var(--line)}.callout{ :is(strong, summary) { margin-bottom: 0.35rem; color: var(--accent); font-size: 0.82rem; font-weight: 600; line-height: 1.4; } >strong { display: block; } >summary { cursor: pointer; }}.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: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0.35rem 0.75rem; margin-bottom: 0.5rem; color: var(--muted); font-size: 0.85rem; } article>header>p { margin: 0; } article>section { margin-top: 0.75rem; }}