/* Original editorial styles from yellowplushq/AirBuild3G, blob a2365fd203cad58d851bdd4f234317e152daa6f5. */

:root {
 color-scheme:light;
 --font-sans:"Helvetica Neue","PingFang SC",sans-serif;
 --font-serif:Charter,"Iowan Old Style","Songti SC",serif;
 --font-mono:Menlo,Consolas,monospace;
 --color-background:#faf9f5; --color-surface:#faf9f5; --color-background-secondary:#f0eee6;
 --color-ink:#191918; --color-primary:#292925; --color-secondary:#77766d;
 --color-tertiary:#c9c6bb; --color-separator:#d8d5cb;
 --color-link:#278eff; --color-accent:#278eff;
}
* { box-sizing:border-box; }
html { scroll-padding-top:40px; }
body { margin:0; background:var(--color-background); color:var(--color-primary); font-family:var(--font-sans); -webkit-font-smoothing:antialiased; }
[hidden] { display:none!important; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:3px; }
a:hover { color:var(--color-link); }
:focus-visible { outline:2px solid var(--color-link); outline-offset:5px; }
::selection { background:#dedbca; }
.original-site-header { max-width:1240px; margin:auto; padding:30px 48px; display:flex; justify-content:space-between; align-items:center; }
.original-site-header a { text-decoration:none; }
.original-brand { display:flex; gap:8px; align-items:center; font-size:21px; font-weight:600; letter-spacing:-.6px; }
.original-brand svg { width:22px; height:22px; }
.back { font-size:13px; }
.page { max-width:1144px; margin:0 auto; padding:0 32px 100px; }
.article-cover { display:grid; grid-template-columns:220px minmax(0,1fr); column-gap:54px; padding:64px 0 74px; }
.cover-category { grid-column:1; grid-row:1; margin:9px 0 0; font-size:14px; font-weight:600; line-height:1.5; }
.page-title { grid-column:2; grid-row:1; color:var(--color-ink); margin:0 0 56px; max-width:790px; font-size:clamp(42px,5vw,64px); font-weight:600; letter-spacing:-.04em; line-height:1.09; text-wrap:balance; }
.page-title:lang(zh) { font-size:clamp(38px,4.6vw,58px); line-height:1.22; letter-spacing:-.045em; }
.cover-divider { grid-column:1/-1; height:1px; background:#8d8b81; margin-bottom:26px; }
.cover-meta { grid-column:1; grid-row:3; font-size:13px; line-height:1.8; }
.lang-switch { display:flex; gap:15px; margin-top:20px; }
.lang-switch button { border:0; border-bottom:1px solid transparent; padding:0 0 2px; background:none; font:inherit; font-size:12px; color:var(--color-secondary); cursor:pointer; }
.lang-switch button[aria-pressed="true"] { border-bottom-color:currentColor; color:var(--color-ink); }
.cover-deck { grid-column:2; grid-row:3; margin:0; max-width:740px; font-size:24px; line-height:1.55; letter-spacing:-.015em; text-wrap:pretty; }
.cover-deck:lang(zh) { font-size:22px; line-height:1.75; }
.reader-layout { display:grid; grid-template-columns:minmax(0,700px) 180px; gap:72px; max-width:952px; margin:12px auto 0; align-items:start; }
.article-content { min-width:0; font-family:var(--font-serif); font-size:20px; line-height:1.6; }
.article-content:lang(zh) { font-size:19px; line-height:1.95; }
.article-content p { margin:0 0 25px; }
.article-content h2,.article-content h3 { font-family:var(--font-sans); color:var(--color-ink); }
.article-content h2 { margin:54px 0 22px; font-size:30px; line-height:1.3; font-weight:600; letter-spacing:-.025em; }
.article-content h3 { margin:32px 0 15px; font-size:21px; font-weight:600; line-height:1.45; letter-spacing:-.015em; }
.chapter { scroll-margin-top:36px; }
.chapter h2:focus { outline:none; }
.article-content ul,.article-content ol { padding-left:25px; }
.article-content li { margin:8px 0; }
.article-content strong { font-weight:600; }
code { font-family:var(--font-mono); font-size:.75em; background:var(--color-background-secondary); border-radius:3px; padding:2px 4px; overflow-wrap:anywhere; }
.reading-sidebar { position:sticky; top:40px; padding-left:18px; border-left:1px solid var(--color-separator); font-size:12px; line-height:1.6; }
.contents-heading { margin:0 0 18px; font-weight:500; color:var(--color-secondary); }
.reading-sidebar ol { padding:0; margin:0; list-style:none; }
.reading-sidebar li { margin:0 0 15px; }
.reading-sidebar a { display:block; text-decoration:none; color:var(--color-secondary); font-weight:400; -webkit-text-stroke:0 currentColor; transition:color .22s ease,-webkit-text-stroke-width .22s ease; }
.reading-sidebar a:hover,.reading-sidebar a[aria-current] { color:var(--color-link); }
.reading-sidebar a[aria-current] { -webkit-text-stroke-width:.45px; }
.reading-progress { position:absolute; top:0; bottom:0; left:-1px; width:2px; background:transparent; overflow:hidden; }
.reading-progress-fill { display:block; height:100%; background:var(--color-link); transform:scaleY(var(--reading-progress,0)); transform-origin:top; transition:transform .18s linear; }
@media(prefers-reduced-motion:reduce) { .reading-sidebar a,.reading-progress-fill { transition:none; } }
.article-end { border-top:1px solid var(--color-separator); margin-top:54px; padding-top:23px; font:14px/1.7 var(--font-sans); }
@media(min-width:1250px) { .reader-layout { margin-left:124px; } }
@media(max-width:950px) {
 .original-site-header { padding:25px 32px; }.article-cover { grid-template-columns:170px minmax(0,1fr); gap:0 32px; padding-top:45px; }
 .reader-layout { display:block; max-width:680px; }.reading-sidebar { display:none; }.cover-deck { font-size:21px; }
}
@media(max-width:600px) {
 .original-site-header { padding:23px 22px; }.original-brand { font-size:19px; }.back { font-size:12px; }.page { padding-inline:22px; }
 .article-cover { display:flex; flex-direction:column; padding:34px 0 46px; }.cover-category { margin:0 0 25px; font-size:12px; }
 .page-title,.page-title:lang(zh) { font-size:39px; line-height:1.2; margin:0 0 28px; }.cover-divider { width:100%; flex:none; margin-bottom:19px; }
 .cover-meta { display:flex; justify-content:space-between; align-items:center; gap:14px; font-size:12px; margin-bottom:26px; }.lang-switch { margin:0; }
 .cover-deck,.cover-deck:lang(zh) { font-size:19px; line-height:1.7; }
 .article-content,.article-content:lang(zh) { font-size:18px; }.article-content h2 { font-size:26px; margin-top:43px; }.article-content h3 { font-size:20px; }
}
@media print { .original-site-header,.reading-sidebar,.lang-switch { display:none; }.reader-layout { display:block; margin:0; max-width:none; }.page { max-width:none; padding:0; }.article-cover { padding-top:0; }.chapter h2 { break-after:avoid; } }
.cover-date { display:block; margin-top:22px; font-size:13px; font-weight:400; line-height:1.8; }
.article-cover { padding-bottom:0; }
.page-title { margin-bottom:40px; }
.cover-divider { margin-bottom:0; }
.reader-layout { margin-top:44px; }
@media(max-width:600px) {
 .article-cover { padding-bottom:0; }
 .cover-date { margin-top:12px; font-size:12px; }
 .page-title { margin-bottom:28px; }
 .reader-layout { margin-top:32px; }
}
/* Monochrome editorial surfaces, with blue reserved for annotations. */
:root {
 --color-background:#fff; --color-surface:#fff; --color-background-secondary:#f4f4f5;
 --color-ink:#101012; --color-primary:#242428; --color-secondary:#74747c;
 --color-tertiary:#c7c7ce; --color-separator:#e5e5e9;
 --color-link:#278eff; --color-accent:#278eff;
 --mark-color:rgba(39,142,255,.8); --diagram-background:#fafafa;
}
:root[data-theme="dark"] {
 color-scheme:dark;
 --color-background:#111113; --color-surface:#17171a; --color-background-secondary:#222226;
 --color-ink:#f4f4f5; --color-primary:#dddde1; --color-secondary:#a0a0aa;
 --color-tertiary:#50505b; --color-separator:#303037;
 --color-link:#58a6ff; --color-accent:#58a6ff;
 --mark-color:rgba(88,166,255,.85); --diagram-background:#17171a;
}
@media(prefers-color-scheme:dark) {
 :root:not([data-theme="light"]) {
  color-scheme:dark;
  --color-background:#111113; --color-surface:#17171a; --color-background-secondary:#222226;
  --color-ink:#f4f4f5; --color-primary:#dddde1; --color-secondary:#a0a0aa;
  --color-tertiary:#50505b; --color-separator:#303037;
  --color-link:#58a6ff; --color-accent:#58a6ff;
  --mark-color:rgba(88,166,255,.85); --diagram-background:#17171a;
 }
}
body { background:var(--color-background); }
::selection { background:rgba(39,142,255,.2); }
.original-site-header { gap:22px; }
.original-site-header .back { margin-left:auto; color:var(--color-secondary); }
.original-brand { color:var(--color-ink); }
.theme-toggle { display:grid; place-items:center; width:36px; height:36px; flex:none; padding:8px; border:1px solid var(--color-separator); border-radius:50%; background:transparent; color:var(--color-ink); cursor:pointer; transition:border-color .2s,background-color .2s; }
.theme-toggle:hover { background:var(--color-background-secondary); border-color:var(--color-tertiary); }
.theme-toggle svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.theme-toggle .theme-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .theme-moon { display:none; }
:root[data-theme="dark"] .theme-toggle .theme-sun { display:block; }
.cover-category { color:var(--color-ink); }
.cover-date { color:var(--color-secondary); }
.cover-divider { background:var(--color-separator); }
.page-title { font-weight:600; letter-spacing:-.055em; line-height:1.13; }
.title-mark { color:inherit; }
.article-content p { text-wrap:pretty; }
.article-content h2 { margin-top:66px; margin-bottom:27px; font-size:31px; letter-spacing:-.035em; }
.editorial-mark {
 color:var(--color-ink);
 background-image:linear-gradient(var(--mark-color),var(--mark-color));
 background-repeat:no-repeat; background-position:left calc(100% - .025em);
 background-size:100% 1.5px;
 -webkit-box-decoration-break:clone; box-decoration-break:clone;
 padding-bottom:.07em;
}
.title-mark { background-size:100% 3px; padding-bottom:.015em; background-position:left 97%; }
.editorial-mark.mark-pending { background-size:0% 1.5px; }
.title-mark.mark-pending { background-size:0% 3px; }
.editorial-mark.mark-visible { background-size:100% 1.5px; transition:background-size .85s cubic-bezier(.22,.61,.36,1); }
.title-mark.mark-visible { background-size:100% 3px; }
.section-title-mark { position:relative; display:inline; padding-bottom:10px; }
.section-title-mark::after { content:""; display:block; width:38px; height:2px; background:var(--color-accent); margin-top:14px; transform-origin:left; }
.section-title-mark.mark-pending::after { transform:scaleX(0); }
.section-title-mark.mark-visible::after { transform:scaleX(1); transition:transform .6s cubic-bezier(.22,.61,.36,1); }
.article-content code { color:var(--color-ink); border:1px solid var(--color-separator); padding:2px 5px; border-radius:4px; }
.reading-sidebar { font-size:12px; }
.reading-sidebar a { color:var(--color-secondary); }
.article-end { display:grid; grid-template-columns:1fr auto; align-items:first baseline; column-gap:24px; margin-top:48px; padding-block:24px; }
.article-end a { justify-self:start; color:var(--color-ink); text-decoration:none; border-bottom:1px solid var(--color-tertiary); padding-bottom:4px; }
.article-end a:hover { border-color:var(--color-link); }
.article-end p { margin:0; color:var(--color-ink); font:italic 15px/1.5 var(--font-serif); text-align:right; }
.article-end time { display:block; margin-top:3px; color:var(--color-secondary); font:12px/1.6 var(--font-sans); }
@media(max-width:600px) {
 .original-site-header { gap:14px; }.theme-toggle { width:32px; height:32px; padding:6px; }
 .page-title { letter-spacing:-.04em; }
 .article-content h2 { font-size:26px; margin-top:48px; }
 .article-end { grid-template-columns:1fr; row-gap:14px; }.article-end p { text-align:left; }
}
@media(prefers-reduced-motion:reduce) {
 .editorial-mark.mark-pending,.editorial-mark.mark-visible { background-size:100% 1.5px; transition:none; }
 .title-mark.mark-pending,.title-mark.mark-visible { background-size:100% 3px; }
 .section-title-mark.mark-pending::after,.section-title-mark.mark-visible::after { transform:none; transition:none; }
 .theme-toggle { transition:none; }
}
@media print {
 :root { --color-background:#fff; --color-primary:#222; --color-ink:#111; --color-surface:#fff; --color-secondary:#666; --color-separator:#ddd; --color-background-secondary:#f4f4f4; --diagram-background:#fff; }
 .editorial-mark.mark-pending { background-size:100% 1.5px; }.section-title-mark.mark-pending::after { transform:none; }
}

/* Hand-drawn annotations on a clean, monochrome page. */
:root {
 --sketch-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C42 3 104 11 196 5' fill='none' stroke='%23278eff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 12C78 7 127 11 184 8' fill='none' stroke='%23278eff' stroke-opacity='.35' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] {
 --sketch-line:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9C42 3 104 11 196 5' fill='none' stroke='%2358a6ff' stroke-width='2.8' stroke-linecap='round'/%3E%3Cpath d='M13 12C78 7 127 11 184 8' fill='none' stroke='%2358a6ff' stroke-opacity='.4' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}
.editorial-mark {
 background-image:var(--sketch-line); background-position:left bottom;
 background-size:100% .42em; padding-bottom:.16em;
}
.editorial-mark.mark-pending { background-size:0% .42em; }
.editorial-mark.mark-visible { background-size:100% .42em; }
.title-mark { background-size:100% .23em; padding-bottom:.08em; }
.title-mark.mark-pending { background-size:0% .23em; }
.title-mark.mark-visible { background-size:100% .23em; }
.section-title-mark::after {
 width:64px; height:9px; margin-top:9px;
 background:var(--sketch-line) left center / 100% 100% no-repeat;
 transform:rotate(-2deg);
}
.section-title-mark.mark-pending::after { transform:rotate(-2deg) scaleX(0); }
.section-title-mark.mark-visible::after { transform:rotate(-2deg) scaleX(1); }
.article-cover { position:relative; }
.article-cover::after {
 content:""; position:absolute; width:55px; height:48px; right:5px; top:10px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 52'%3E%3Cg fill='none' stroke='%23278eff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M29 5C28 20 25 24 9 26C24 28 28 32 30 47C32 33 35 28 51 26C35 24 32 20 29 5Z'/%3E%3Cpath d='M47 4L46 13M42 8L52 9M5 9L10 14'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
 transform:rotate(9deg); pointer-events:none;
}
.cover-category::after {
 content:""; display:block; width:100px; height:48px; margin:18px 0 0 32px;
 background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110 55'%3E%3Cpath d='M7 13C16 44 68 48 72 26C76 7 40 10 46 30C52 48 87 29 101 14M86 13L102 12L97 28' fill='none' stroke='%23278eff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
 opacity:.8; pointer-events:none;
}
/* Figures are sketched in HTML on dotted paper rather than drawn as SVG, so
   their text keeps the page's own sizes at any width, and each one restacks
   by its own width rather than the window's. */
:root {
 --sk-shaft:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 14' preserveAspectRatio='none'%3E%3Cpath d='M1 8.5C28 5.5 62 10 99 7' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
 --sk-head:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 14'%3E%3Cpath d='M2.5 2.5 9 7 3 11.5' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --sk-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 8.8C4 10 5 11 6.4 12.6 8.5 9 10.5 6 13.6 3.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
 --sk-cross:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 3.5C6.5 6.5 9.5 9.8 12.8 12.8M12.6 3.2C9.4 6.4 6.6 9.6 3.4 12.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
 --sk-wash:color-mix(in srgb,var(--color-accent) 16%,transparent);
}
.sk { margin:44px 0 46px; }
.sk-paper { container-type:inline-size; padding:38px 26px 30px; border:1px solid var(--color-separator); border-radius:5px 12px 7px 15px / 12px 5px 14px 6px; background:radial-gradient(circle,color-mix(in srgb,var(--color-tertiary) 45%,transparent) .7px,transparent 1.2px) 0 0 / 18px 18px,var(--diagram-background); color:var(--color-primary); font:14px/1.45 var(--font-sans); }
.sk figcaption { margin-top:14px; color:var(--color-secondary); font:13px/1.65 var(--font-sans); }
.sk p { margin:0; }
.sk code { font-size:11px; }
.sk-steps > li,.sk-card { position:relative; margin:0; padding:17px 13px 14px; border:1.5px solid var(--color-primary); border-radius:255px 15px 225px 15px / 15px 225px 15px 255px; background:var(--color-background); }
.sk-steps > li:nth-child(even),.sk-card:last-child { border-radius:15px 225px 15px 255px / 255px 15px 225px 15px; }
.sk .sk-goal { border-color:var(--color-accent); box-shadow:5px 6px 0 var(--sk-wash); }
.sk-steps strong,.sk-card strong { display:block; color:var(--color-ink); font-size:15px; line-height:1.3; }
.sk-steps li > span,.sk-card > span { display:block; margin-top:3px; color:var(--color-secondary); font-size:12px; line-height:1.45; }
ol.sk-steps { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:32px; margin:0; padding:0; list-style:none; counter-reset:sk-step; }
.sk-steps > li { counter-increment:sk-step; }
.sk-steps > li::before { content:counter(sk-step); position:absolute; top:-14px; left:11px; display:grid; place-items:center; width:25px; height:25px; border:1.5px solid var(--color-accent); border-radius:50% 44% 56% 47% / 55% 49% 51% 45%; background:var(--color-background); color:var(--color-accent); font:600 12px/1 var(--font-sans); }
.sk-steps > li + li::after,.sk-wire p:first-child::after,.sk-wire p:last-child::before { content:""; display:block; height:14px; background:var(--color-secondary); -webkit-mask:var(--sk-head) right center / 10px 14px no-repeat,var(--sk-shaft) left center / calc(100% - 1px) 14px no-repeat; mask:var(--sk-head) right center / 10px 14px no-repeat,var(--sk-shaft) left center / calc(100% - 1px) 14px no-repeat; }
.sk-steps > li + li::after { position:absolute; top:calc(50% - 7px); left:-31px; width:27px; }
.sk-steps dl { display:grid; grid-template-columns:auto 1fr; gap:1px 12px; margin:12px 0 0; font:12px/1.6 var(--font-mono); }
.sk-steps dt { color:var(--color-secondary); }
.sk-steps dd { margin:0; color:var(--color-ink); white-space:nowrap; }
.sk del { color:var(--color-secondary); text-decoration:none; background:var(--sketch-line) 0 58% / 100% .5em no-repeat; }
.sk ins { margin-left:5px; color:var(--color-accent); font-weight:600; text-decoration:none; }
.sk-ok,.sk-bad { display:inline-flex; align-items:center; gap:5px; color:var(--color-ink); font-size:12.5px; font-style:normal; font-weight:600; white-space:nowrap; }
.sk-ok::before,.sk-bad::before { content:""; flex:none; width:14px; height:14px; background:var(--color-accent); -webkit-mask:var(--sk-check) center / contain no-repeat; mask:var(--sk-check) center / contain no-repeat; }
.sk-bad::before { background:var(--color-ink); -webkit-mask-image:var(--sk-cross); mask-image:var(--sk-cross); }
.sk-steps .sk-ok { position:absolute; right:14px; bottom:-14px; padding:3px 10px 3px 8px; border:1.5px solid var(--color-accent); border-radius:12px 4px 10px 5px / 5px 10px 4px 12px; background:var(--color-background); color:var(--color-accent); transform:rotate(-3deg); }
.sk-vm { --limit:calc(768 / 1152 * 100%); position:relative; font-size:13px; line-height:1.4; }
.sk-vm::before { content:""; position:absolute; top:0; bottom:28px; left:var(--limit); right:0; border-left:1.5px solid var(--color-ink); background:color-mix(in srgb,var(--color-secondary) 8%,transparent); }
.sk-vm-top { position:relative; display:grid; grid-template-columns:var(--limit) 1fr; align-items:center; padding:0 0 14px; color:var(--color-secondary); font-size:12px; }
.sk-vm-top span { padding-right:10px; text-align:right; }
.sk-vm-top code { justify-self:start; margin-left:8px; white-space:nowrap; overflow-wrap:normal; }
.sk-vm p { position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding-bottom:25px; color:var(--color-secondary); }
.sk-vm p + p { margin-top:6px; }
.sk-vm p > span { max-width:calc(var(--limit) - 12px); }
.sk-vm strong { color:var(--color-ink); font-weight:600; }
.sk-vm p::after { content:""; position:absolute; left:0; bottom:5px; width:calc(min(var(--end),768) / 1152 * 100%); min-width:5px; height:13px; border:1.5px solid var(--color-accent); border-radius:2px 5px 3px 4px / 4px 3px 5px 2px; background:linear-gradient(var(--sk-wash),var(--sk-wash)),var(--color-background); }
.sk-vm .sk-over::before { content:""; position:absolute; left:var(--limit); bottom:5px; width:calc((var(--end) - 768) / 1152 * 100%); height:13px; border:1.5px dashed var(--color-secondary); border-left:0; border-radius:0 5px 4px 0; background:repeating-linear-gradient(-45deg,var(--color-tertiary) 0 1px,transparent 1px 5px); }
.sk.mark-pending .sk-vm p::after,.sk.mark-pending .sk-vm .sk-over::before { clip-path:inset(-2px 100% -2px -2px); }
.sk.mark-visible .sk-vm p::after { clip-path:inset(-2px); transition:clip-path .8s cubic-bezier(.22,.61,.36,1); }
.sk.mark-visible .sk-vm .sk-over::before { clip-path:inset(-2px); transition:clip-path .5s cubic-bezier(.22,.61,.36,1) .75s; }
@media print { .sk.mark-pending .sk-vm p::after,.sk.mark-pending .sk-vm .sk-over::before { clip-path:none; } }
.sk-vm-axis { position:relative; height:28px; border-top:1px solid var(--color-tertiary); color:var(--color-secondary); font-size:11px; }
.sk-vm-axis span { position:absolute; top:7px; left:calc(var(--at) / 1152 * 100%); transform:translateX(-50%); white-space:nowrap; }
.sk-vm-axis span::before { content:""; position:absolute; top:-7px; left:50%; height:4px; border-left:1px solid var(--color-tertiary); }
.sk-vm-axis span:first-child { transform:none; }
.sk-vm-axis span:first-child::before { left:0; }
.sk-loop { display:grid; grid-template-columns:minmax(0,1fr) minmax(64px,.8fr) minmax(0,1.3fr); align-items:center; }
.sk-card { padding-right:48px; }
.sk-card small { display:block; margin-bottom:5px; color:var(--color-secondary); font-size:10.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; }
.sk-card code { display:inline-block; margin:6px 3px 0 0; }
.sk-icon { position:absolute; top:12px; right:12px; width:30px; height:30px; fill:none; stroke:var(--color-accent); stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-6deg); }
.sk-icon .icon-detail { opacity:.55; }
.sk-wire { position:relative; display:grid; gap:12px; padding:0 8px; color:var(--color-secondary); font-size:12px; line-height:1.3; text-align:center; }
.sk-wire::before,.sk-wire::after { content:""; position:absolute; left:50%; height:26px; border-left:1.5px dashed var(--color-tertiary); }
.sk-wire::before { bottom:100%; }
.sk-wire::after { top:100%; }
.sk-wire p:first-child::after,.sk-wire p:last-child::before { margin:4px 0; background:var(--color-accent); }
.sk-wire p:last-child::before { transform:scaleX(-1); }
.sk .sk-foot { margin-top:24px; color:var(--color-secondary); font-size:12.5px; text-align:center; }
.sk-src { position:relative; padding:24px 16px 18px; border:1.5px solid var(--color-primary); border-radius:160px 8px 150px 8px / 8px 150px 8px 160px; background:var(--color-background); }
.sk-file { position:absolute; top:-13px; left:14px; padding:2px 10px; border:1.5px solid var(--color-primary); border-radius:12px 4px 10px 5px / 5px 10px 4px 12px; background:var(--color-background); color:var(--color-ink); font:11.5px/1.5 var(--font-mono); transform:rotate(-1.5deg); }
.sk-src pre { margin:0; overflow-x:auto; }
.sk-src code { display:block; padding:0; border:0; border-radius:0; background:none; color:var(--color-ink); font:12px/1.75 var(--font-mono); white-space:pre; overflow-wrap:normal; tab-size:4; }
.sk-src i { color:var(--color-secondary); font-style:normal; }
/* Syntax colours pick their theme from color-scheme, which every theme path sets. Blue stays the annotations'. */
.sk-src .k { color:light-dark(#c4265e,#f27fae); }
.sk-src .s { color:light-dark(#2a7336,#86cf94); }
.sk-src .n,.sk-src .v { color:light-dark(#a35300,#eea764); }
.sk-src .t { color:light-dark(#0f7470,#6ccdc2); }
.sk-src .f { color:light-dark(#7445c8,#b9a1f5); }
.sk-src mark { margin:0 -3px; padding:2px 3px; border-radius:3px 8px 4px 7px / 7px 4px 8px 3px; background:var(--sk-wash); color:inherit; }
.sk-src mark[data-n]::after,.sk-notes > li::before { display:inline-grid; place-items:center; width:19px; height:19px; border:1.5px solid var(--color-accent); border-radius:50% 44% 56% 47% / 55% 49% 51% 45%; background:var(--color-background); color:var(--color-accent); font:600 10.5px/1 var(--font-sans); }
.sk-src mark[data-n]::after { content:attr(data-n); margin-left:12px; vertical-align:1px; }
ol.sk-notes { display:grid; gap:8px; margin:18px 0 0; padding:0; list-style:none; counter-reset:sk-note; font-size:13px; line-height:1.55; }
.sk-notes > li { position:relative; margin:0; padding-left:30px; counter-increment:sk-note; }
.sk-notes > li::before { content:counter(sk-note); position:absolute; top:0; left:0; }
@container (max-width:600px) {
 ol.sk-steps { grid-auto-flow:row; gap:26px; }
 .sk-steps > li { display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; padding:13px 14px 12px 50px; }
 .sk-steps > li::before { top:10px; left:12px; }
 .sk-steps li > span { margin:0; }
 .sk-steps dl { flex-basis:100%; }
 .sk-steps > li + li::after { top:-24px; left:13px; width:22px; transform:rotate(90deg); }
}
@container (max-width:380px) {
 .sk-loop { grid-template-columns:minmax(0,1fr); }
 .sk-wire { grid-template-columns:1fr 1fr; gap:0; padding:12px 0; }
 .sk-wire::before,.sk-wire::after { display:none; }
 .sk-wire p { display:flex; align-items:center; gap:4px; }
 .sk-wire p:first-child { justify-content:flex-end; }
 .sk-wire p:first-child::after,.sk-wire p:last-child::before { flex:none; width:30px; margin:8px -8px; transform:rotate(90deg); }
 .sk-wire p:last-child::before { transform:rotate(-90deg); }
}
@media(max-width:600px) { .sk-paper { padding:34px 16px 24px; } .sk-src { padding-inline:12px; } }
@media(max-width:950px) { .cover-category::after { width:76px; margin-left:12px; } }
@media(max-width:600px) {
 .article-cover::after { width:37px; height:34px; top:25px; right:0; }
 .cover-category::after { display:none; }
}
@media(prefers-reduced-motion:reduce) {
 .editorial-mark.mark-pending,.editorial-mark.mark-visible { background-size:100% .42em; transition:none; }
 .title-mark.mark-pending,.title-mark.mark-visible { background-size:100% .23em; }
 .section-title-mark.mark-pending::after,.section-title-mark.mark-visible::after { transform:rotate(-2deg); transition:none; }
}
@media print { .article-cover::after,.cover-category::after { display:none; } }

/* Each chapter gets a small ink drawing in place of the title rule. */
.section-title-mark { padding-bottom:0; }
.section-title-mark::after { display:none; }
.chapter h2 { display:flex; align-items:center; gap:18px; }
.chapter-icon { display:block; flex:none; width:49px; height:49px; overflow:visible; color:var(--color-accent); stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transform:rotate(-4deg); }
.chapter:nth-of-type(even) .chapter-icon { transform:rotate(3deg); }
.chapter-icon .icon-detail { opacity:.55; }
@media(max-width:600px) { .chapter h2 { gap:13px; }.chapter-icon { width:37px; height:37px; } }
