/* Isolated copy: English page and its existing cascade stay unchanged. */
:root{--text:704px;--edge:rgba(17,17,17,.07);--shadow:rgba(17,17,17,.16);--ease:cubic-bezier(.4,0,.2,1);--font-mark:"Poppins","Inter",sans-serif;--font-zh:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--edge:rgba(242,242,242,.07);--shadow:rgba(0,0,0,.55);}}
:root[data-theme="dark"]{--edge:rgba(242,242,242,.07);--shadow:rgba(0,0,0,.55);}
/* the header row, as at the top of ashton.is: the "Ashton" wordmark and the light / dark switch */
.head-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; line-height: 1.2; }
.wordmark { font-family: var(--font-mark); font-weight: 800; letter-spacing: -.01em; color: var(--ink); text-decoration: none; white-space: nowrap; }
.theme-toggle {
  display: inline-flex; align-items: center; gap: .35em; padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--ink); white-space: nowrap;
}
.theme-toggle svg { width: .85em; height: .85em; flex: none; }
.theme-toggle[data-mode="dark"] .ti-moon, .theme-toggle:not([data-mode="dark"]) .ti-sun { display: none; }
.theme-toggle::after { content: ""; position: absolute; inset: -12px -10px; }   /* a 44px target round the small word */
/* hover and keyboard focus: the word greys out (staying above 4.5:1) and the four corners of the name motion's frame
   open out of its centre to sit round it, then close back when the pointer leaves */
@property --hb { syntax: '<number>'; inherits: true; initial-value: 0; }
@property --ha { syntax: '<number>'; inherits: true; initial-value: 1; }
@property --ho { syntax: '<number>'; inherits: true; initial-value: 1; }
.corners {
  --hb: 0; --ha: 1; --ho: 1; position: relative;
  transition: color .3s var(--ease), --hb .45s cubic-bezier(.25, .7, .2, 1), --ha .45s cubic-bezier(.25, .7, .2, 1), --ho .3s var(--ease);
}
.corners:focus-visible { --hb: 1; outline: none; }
@media (hover: hover) and (pointer: fine) { .corners:hover { --hb: 1; color: var(--muted); } }
.hb {
  --s: .12em; --L: calc(var(--hb) * var(--ha) * .42em); --k: min(var(--s), var(--L));
  --px: calc(var(--hb) * (50% + .32em)); --py: calc(var(--hb) * (50% + .16em));
  position: absolute; box-sizing: border-box; width: var(--L); height: var(--L);
  border: 0 solid var(--ink); pointer-events: none; opacity: var(--ho);
}
.hb-tl, .hb-bl { left: calc(50% - var(--px)); border-left-width: var(--k); }
.hb-tr, .hb-br { right: calc(50% - var(--px)); border-right-width: var(--k); }
.hb-tl, .hb-tr { top: calc(50% - var(--py)); border-top-width: var(--k); }
.hb-bl, .hb-br { bottom: calc(50% - var(--py)); border-bottom-width: var(--k); }
.hb-tl { border-top-left-radius: min(.14em, var(--L)); }
.hb-tr { border-top-right-radius: min(.14em, var(--L)); }
.hb-bl { border-bottom-left-radius: min(.14em, var(--L)); }
.hb-br { border-bottom-right-radius: min(.14em, var(--L)); }
@media (prefers-reduced-motion: reduce) { .corners { transition: color .3s var(--ease); } }
/* on phones the switch is the icon alone in a ring, as on ashton.is */
@media (max-width: 639px) {
  .theme-toggle { justify-content: center; width: 30px; height: 30px; border: 1px solid color-mix(in srgb, currentColor 35%, transparent); border-radius: 50%; }
  .theme-toggle::after { inset: -7px; }
  .theme-toggle svg { width: 15px; height: 15px; }
  .theme-toggle .tt-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

.reader { min-width: 0; }
.column {
  max-width: calc(var(--text) + 80px); margin: 0 auto; min-width: 0;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  padding-block: 0 5rem;
}
@media (min-width: 640px) {
  .column { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}
/* contents rail (after highagency.com) */
.rail { display: none; }
.rail .head-row { margin-bottom: 56px; }
.rail-label { margin: 0 0 1em; font-size: 15px; color: var(--muted); line-height: 1.35; }
.rail-list { display: grid; gap: 12px; margin: 0 0 1em; }
.card { display: flex; flex-direction: column; background: var(--soft); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--edge); font-size: 15px; line-height: 1.55; }
.card a { color: var(--ink); text-decoration: none; }
.card .t { text-underline-offset: 3px; text-decoration-thickness: 2px; }
.card .h2l { display: flex; gap: .55rem; align-items: baseline; font-weight: 600; padding-bottom: .2em; }
.card .h2l .n { font-weight: 600; color: var(--accent); flex: none; min-width: 1.1ch; font-variant-numeric: tabular-nums; }
.card .h3l { color: var(--ink-2); padding: .25em 0; line-height: 1.45; }
.card a:hover .t { text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 38%, transparent); }
.card a.is-active { color: var(--ink); }
.card a.is-active .t { text-decoration: underline; text-decoration-color: var(--accent); }
.card .zh { font-family: var(--font-zh); }
.toc-inline { margin: 0 0 32px; display: flow-root; }
.toc-inline summary {
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 44px; padding: .5rem 14px; background: var(--soft); box-shadow: inset 0 0 0 1px var(--edge); font-size: 16px; color: var(--ink);
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; font-size: 20px; line-height: 1; color: var(--accent); }
.toc-inline[open] summary::after { content: "\2212"; }
.toc-inline .rail-list { margin-top: 12px; }
.progress { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); z-index: 20; pointer-events: none; }
@media (min-width: 1280px) {
  .rail {
    display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; width: 300px; z-index: 10;
    background: var(--paper); border-right: 1px solid var(--line); overflow-y: auto; overscroll-behavior: contain;
    scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent;
    padding: calc(24px + env(safe-area-inset-top, 0px)) 20px calc(75px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px));
  }
  .reader { margin-left: 300px; }
  .top-row, .toc-inline { display: none; }
  .progress { left: 300px; }
  .column { padding-top: 24px; }
}
/* wide screens: a tab on the rail's right edge folds the contents away to the left and brings them back. Folded, the
   reading column and the figures take the whole width, and the wordmark and the light / dark switch move to the top
   of the column; the tab stays at the left edge with the word "Contents" */
.rail-handle { display: none; }
@media (min-width: 1280px) {
  .rail { transition: transform .35s var(--ease), visibility .35s; }
  .reader { transition: margin-left .35s var(--ease); }
  .progress { transition: left .35s var(--ease); }
  .rail-handle {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    position: fixed; z-index: 11; top: calc(14px + env(safe-area-inset-top, 0px)); left: 300px;   /* level with the header row */
    width: 32px; min-height: 44px; padding: 12px 0; border-radius: 0 8px 8px 0; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--ink) 45%, transparent); border-left: 0;   /* 3:1 or more in both themes */
    background: var(--soft); color: var(--ink); font: inherit; font-size: 14px; line-height: 1;
    box-shadow: 0 2px 10px var(--shadow);
    transition: left .35s var(--ease), background-color .2s var(--ease);
  }
  .rail-handle:hover { background: color-mix(in srgb, var(--ink) 10%, var(--soft)); }
  .rail-handle svg { width: 16px; height: 16px; flex: none; transition: transform .35s var(--ease); }
  .rail-handle .rh-label { display: none; writing-mode: vertical-rl; letter-spacing: .04em; color: var(--ink-2); }
  html.rail-closed .rail { transform: translateX(-100%); visibility: hidden; }
  html.rail-closed .reader { margin-left: 0; }
  html.rail-closed .progress { left: 0; }
  html.rail-closed .rail-handle { left: env(safe-area-inset-left, 0px); }
  html.rail-closed .rail-handle svg { transform: rotate(180deg); }
  html.rail-closed .rail-handle .rh-label { display: block; }
  html.rail-closed .top-row { display: block; }

}
@media (min-width: 1280px) and (prefers-reduced-motion: reduce) {
  .rail, .reader, .progress, .rail-handle, .rail-handle svg { transition: none; }
}
/* narrower screens (phones, tablets): a round button at the bottom left stays in reach wherever the page is scrolled;
   the ring round it fills as you read, and it opens the contents as a floating panel over the page (a modal
   <dialog>: Esc, a tap outside or picking a section closes it) */
:root {
  --toc-fab-left: max(14px, env(safe-area-inset-left, 0px));
  --toc-fab-bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 10px));
  --toc-fab-size: 48px;
  --to-top-size: 44px;
  --fab-gap: 12px;
}
.toc-fab, .to-top-fab {
  position: fixed; z-index: 12; left: var(--toc-fab-left); bottom: var(--toc-fab-bottom);
  width: var(--toc-fab-size); height: var(--toc-fab-size); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 12px var(--shadow), inset 0 0 0 1px var(--line);
}
.to-top-fab {
  bottom: calc(var(--toc-fab-bottom) + var(--toc-fab-size) + var(--fab-gap));
  width: var(--to-top-size); height: var(--to-top-size);
  font: 22px/1 var(--blog-font);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .18s var(--ease), visibility 0s .18s;
}
.to-top-fab.is-visible {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .18s var(--ease), visibility 0s;
}
.rail-to-top {
  align-self: flex-start; margin: 0 0 12px;
  font-size: 15px; line-height: 1.45; color: var(--ink-2); text-decoration: none;
}
.rail-to-top:hover { text-decoration: underline; }
.toc-fab .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.toc-fab .ring circle { fill: none; stroke-width: 3; }
.toc-fab .ring-track { stroke: var(--line); }
.toc-fab .ring-fill { stroke: var(--accent); stroke-linecap: round; stroke-dasharray: 131.95; stroke-dashoffset: 131.95; }
.toc-fab .list { width: 18px; height: 18px; }
.toc-pop {
  position: fixed; inset: auto auto max(76px, calc(env(safe-area-inset-bottom, 0px) + 70px)) max(14px, env(safe-area-inset-left, 0px));
  margin: 0; padding: 0; border: 0; width: min(360px, calc(100vw - 28px)); max-height: min(70vh, 560px);
  background: var(--paper); color: var(--ink); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 34px var(--shadow), inset 0 0 0 1px var(--line);
}
.toc-pop[open] { display: flex; flex-direction: column; animation: pop-in .22s var(--ease); }
.toc-pop::backdrop { background: rgba(0, 0, 0, .3); }
@keyframes pop-in { from { opacity: 0; transform: translateX(-14px); } }
.pop-inner { display: flex; flex-direction: column; min-height: 0; max-height: inherit; }
.pop-head { display: flex; align-items: center; gap: 10px; padding: 6px 4px 6px 16px; border-bottom: 1px solid var(--line); }
.pop-title { margin: 0; font-size: 16px; font-weight: 600; }
.pop-read { margin-right: auto; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pop-close { width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--ink); font: inherit; font-size: 26px; line-height: 1; cursor: pointer; }
.pop-close:hover { background: var(--soft); }
.toc-pop .rail-list { overflow-y: auto; margin: 0; padding: 12px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--ink) 25%, transparent) transparent; }
@media (min-width: 1280px) { .toc-fab, .to-top-fab { display: none; } }
@media (prefers-reduced-motion: reduce) { .to-top-fab, .to-top-fab.is-visible { transition: none; } }
@media (prefers-reduced-motion: reduce) { .toc-pop[open] { animation: none; } }


/* Mirror the reference rail to the requested right side; retain the same 300px reservation. */
.rail,.toc-fab,.to-top-fab,.toc-pop{--soft:#f2f2f2;--line:#e2e2e2;}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) :is(.rail,.toc-fab,.to-top-fab,.toc-pop){--soft:#1a1a1a;--line:#262626;}}
:root[data-theme="dark"] :is(.rail,.toc-fab,.to-top-fab,.toc-pop){--soft:#1a1a1a;--line:#262626;}
.rail .head-row{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.rail .card,.toc-pop .card,.toc-inline .card{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;}
.post-shell.column{width:100%;margin:62px auto 0;}
.prose h2,.prose h3{scroll-margin-top:24px;}
.prose figure{min-width:0;max-width:100%;margin-inline:0;}


.progress{z-index:40;}
.reader .blog-footer{width:min(calc(100% - 48px),704px);}
@media(min-width:1280px){
  .rail{top:var(--rail-top,105px);}
  .rail-handle{top:calc(var(--rail-top,105px) + 14px + env(safe-area-inset-top,0px));}
  .blog-header{position:relative;z-index:30;background:var(--paper);}
}
@media(min-width:1280px) and (prefers-reduced-motion:reduce){.reader,.progress,.rail-handle{transition:none;}}
@media(max-width:599px){.post-shell.column{margin-top:40px;}}

/* Keep footer links 16px above the entire button stack, including the safe area. */
@media (width < 1280px) {
  .blog-footer { padding-bottom: calc(var(--toc-fab-bottom) + var(--toc-fab-size) + var(--fab-gap) + var(--to-top-size) + 16px); }
}

/* the community cover as the post's banner (10-31) */
.post-cover { margin: 0 0 20px; }
.post-cover img { display: block; width: 100%; height: auto; border-radius: 6px; }
/* Article opening: metadata, title, reading note, then the first body paragraph. */
.post-shell > .post-meta { gap: 8px; align-items: center; margin: 0 0 10px; }
.post-shell > .post-meta .language { padding: 1px 6px; }
.post-shell .post-title { margin: 0 0 12px; }
.post-shell .post-title + .caption { margin: 0 0 24px; }
/* Chinese fills every line edge to edge, so on phones it needs more side room than the English pages to feel as open;
   body text takes the English page's softer body colour (10-31, 山山: 中文版手机上看着没英文版舒服) */
@media (max-width: 639px) { .column { padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); } }
.prose:lang(zh) p, .prose:lang(zh) li, .prose:lang(zh) blockquote { color: var(--ink-2); letter-spacing: .02em; }

/* book rhythm (山山 10-31): the site header and the contents bar are one group, so they sit closer than the gap before
   the article (16 < 32); the page top is no wider than a group gap (desktop 16 + 24 = 40 instead of 86) */
.post-shell.column { margin-top: 16px; }
@media (min-width: 600px) and (max-width: 1279px) { .post-shell.column { margin-top: 24px; } }

/* Native math keeps the surrounding text size and colour in either theme. */
.prose math { font-size: 1em; color: inherit; }