/* 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: calc(18px * var(--text-factor,var(--text-zoom-scale,1))); 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: calc(15px * var(--text-factor,var(--text-zoom-scale,1))); color: var(--muted); line-height: 1.35; }
/* Chapter and section read apart (11/11, 山山: section titles were easy to misread, everything sat too close): each
   chapter card is one group with more room above it than between its rows; sections step in under the chapter title,
   one size down and in the muted colour (6:1 on the card in both themes). Chapter numbers are unchanged. */
.rail-list { display: grid; gap: 20px; margin: 0 0 1em; }
.card { --toc-step: calc(18px * var(--text-factor,var(--text-zoom-scale,1))); display: flex; flex-direction: column; background: var(--soft); padding: 12px 14px; box-shadow: inset 0 0 0 1px var(--edge); font-size: calc(15px * var(--text-factor,var(--text-zoom-scale,1))); 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: .35em; }
.card .h2l .n { font-weight: 600; color: var(--accent); flex: none; min-width: 1.1ch; font-variant-numeric: tabular-nums; }
.card .h3l { color: var(--muted); font-size: calc(14px * var(--text-factor,var(--text-zoom-scale,1))); padding: .25em 0 .25em var(--toc-step); line-height: 1.45; }
/* The h4 points are written into the contents (class h4l) and shown, one step further in and muted, at the
   small-text floor of 14 px (山山 11/11 10:33 picked contents to the third level). */
.card .h4l { display: block; color: var(--muted); font-size: calc(14px * var(--text-factor,var(--text-zoom-scale,1))); padding: .2em 0 .2em calc(2 * var(--toc-step)); 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: calc(16px * var(--text-factor,var(--text-zoom-scale,1))); color: var(--ink);
}
.toc-inline summary::-webkit-details-marker { display: none; }
.toc-inline summary::after { content: "+"; font-size: calc(20px * var(--text-factor,var(--text-zoom-scale,1))); 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: hidden; 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(20px + 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: calc(14px * var(--text-factor,var(--text-zoom-scale,1))); 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: calc(22px * var(--text-factor,var(--text-zoom-scale,1)))/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: calc(15px * var(--text-factor,var(--text-zoom-scale,1))); 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: calc(16px * var(--text-factor,var(--text-zoom-scale,1))); font-weight: 600; }
.pop-read { margin-right: auto; font-size: calc(14px * var(--text-factor,var(--text-zoom-scale,1))); 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: calc(26px * var(--text-factor,var(--text-zoom-scale,1))); 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; }
/* Phones (11/11): the panel is as tall as the screen allows when Previous and Next each take their two lines. It sits
   a small margin above the bottom edge (inside the safe area, over the contents button) and reaches a small margin
   below the top; only the list scrolls, so the close button and Previous / Next stay in view. The list keeps one
   height whatever the neighbours' titles are (11/10); with short titles the panel is that much lower. The heights
   reserved: head 6 + 44 + 6 + 1 px; Previous / Next 1 + 14 + 12 px, an 8 px gap and two links of three 1.4 lines.
   This replaces the 70vh / 560px cap below 700px and the 46dvh / 400px list cap that were in reader-v11.css. */
@media (max-width: 699px) {
  .toc-pop {
    --pop-top: max(12px, calc(env(safe-area-inset-top, 0px) + 8px));
    --pop-bottom: max(14px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    --pop-head: 57px;
    --pop-leave: calc(35px + 6 * 1.4 * 14px * var(--text-factor,var(--text-zoom-scale,1)));
    bottom: var(--pop-bottom);
    max-height: calc(100dvh - var(--pop-top) - var(--pop-bottom));
  }
}
/* a phone held sideways keeps the whole-panel scroll in reader-v11.css (max-height: 480px) */
@media (max-width: 699px) and (min-height: 481px) {
  .toc-pop .pop-inner .rail-list { flex: 0 0 auto; max-height: calc(100dvh - var(--pop-top) - var(--pop-bottom) - var(--pop-head) - var(--pop-leave)); }
  .toc-pop:not(:has(.toc-leave)) .pop-inner .rail-list { max-height: calc(100dvh - var(--pop-top) - var(--pop-bottom) - var(--pop-head)); }
}
/* The rocker (11/11, 山山): one pill in the back-to-top place, on phones above the contents button and on wide screens
   at the foot of the contents rail. The upper half goes back to the top, the lower half to the end of the page (the
   updates, category, tags and footer). Two chevrons, up above down, divided by a thin line; 44px a half. */
:root { --rocker-half: 44px; }
.to-top-fab.jump-rocker, .rail-to-top.jump-rocker {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 0;
  width: var(--toc-fab-size); height: calc(2 * var(--rocker-half)); min-height: 0; border-radius: calc(var(--toc-fab-size) / 2); cursor: default;
}
.jump-rocker > button {
  appearance: none; position: relative; display: grid; place-items: center; flex: none; box-sizing: border-box;
  width: 100%; height: var(--rocker-half); margin: 0; padding: 0; border: 0; background: none; color: var(--ink);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.jump-rocker > .jump-up { border-radius: calc(var(--toc-fab-size) / 2) calc(var(--toc-fab-size) / 2) 0 0; }
.jump-rocker > .jump-down { border-radius: 0 0 calc(var(--toc-fab-size) / 2) calc(var(--toc-fab-size) / 2); }
.jump-rocker > .jump-down::before { content: ""; position: absolute; top: 0; left: 12px; right: 12px; border-top: 1px solid var(--line); }
.jump-rocker > button .ui-icon { width: 20px; height: 20px; }
.jump-rocker > .jump-up .ui-icon { transform: rotate(90deg); }
.jump-rocker > .jump-down .ui-icon { transform: rotate(-90deg); }
.jump-rocker > button:hover { background: var(--soft); }
.rail-to-top.jump-rocker:hover { background: var(--paper); }
.to-top-fab.jump-rocker > button:focus-visible, .rail-to-top.jump-rocker > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
.blog-footer:focus { outline: none; }   /* "Go to the bottom" hands focus to the footer; the next Tab reaches its links */
@media (min-width: 1280px) { .toc-fab, .to-top-fab, .to-top-fab.jump-rocker { 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:#222222;--line:#3b3b3b;}}
:root[data-theme="dark"] :is(.rail,.toc-fab,.to-top-fab,.toc-pop){--soft:#222222;--line:#3b3b3b;}
.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,.prose h4{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) + 2 * var(--rocker-half) + 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; }

/* The four-panel poster stays inside the same figure and article width. */
.video-static { --static-control-bg: rgba(255,255,255,.82); position: relative; width: 100%; max-width: 100%; min-width: 0; margin-inline: auto; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .video-static { --static-control-bg: rgba(13,13,13,.82); }
}
:root[data-theme="dark"] .video-static { --static-control-bg: rgba(13,13,13,.82); }
.video-static-viewport {
  width: 100%; overflow-x: auto; overflow-y: hidden; direction: ltr;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.video-static-viewport::-webkit-scrollbar { display: none; }
.prose .video-static-image {
  display: block; width: calc(100% * var(--static-image-scale, 4)); max-width: none;
  height: auto; margin: 0;
}
.video-static-track { height: 3px; overflow: hidden; background: var(--line); }
.video-static-progress { height: 3px; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }
.video-static-button {
  position: absolute; top: calc((100% - 3px) / 2); transform: translateY(-50%);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid var(--muted); border-radius: 50%;
  background: var(--static-control-bg); background: color-mix(in srgb, var(--paper) 82%, transparent);
  color: var(--ink); box-shadow: 0 1px 6px var(--shadow); cursor: pointer;
  font: calc(30px * var(--text-factor,var(--text-zoom-scale,1)))/1 system-ui, sans-serif;
}
.video-static-left { left: 12px; }
.video-static-right { right: 12px; }
.video-static-button[hidden] { display: none; }
.video-static-button:focus-visible, .video-static-viewport:focus-visible { outline-offset: 2px; }

/* swipe still buttons, round two (山山 10-31): smaller, frosted see-through glass so the picture shows through,
   a drawn chevron dead centre; white glass in light, dark glass in dark */
.video-static-button { width: 32px; height: 32px; border: 1px solid rgba(0, 0, 0, .08); background: rgba(255, 255, 255, .55);
  color: #333; -webkit-backdrop-filter: blur(8px) saturate(1.2); backdrop-filter: blur(8px) saturate(1.2); box-shadow: 0 1px 4px rgba(0, 0, 0, .08); }
.video-static-button svg { display: block; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .video-static-button { background: rgba(28, 28, 28, .55); border-color: rgba(255, 255, 255, .14); color: #eee; } }
:root[data-theme="dark"] .video-static-button { background: rgba(28, 28, 28, .55); border-color: rgba(255, 255, 255, .14); color: #eee; }

/* A separate rule keeps the shared static-image controls unchanged. */
.prose .video-playback {
  display: block; min-width: 44px; min-height: 44px; margin: .5rem auto 0;
  padding: .5rem .8rem; border: 1px solid var(--line); border-radius: 4px;
  background: var(--paper); color: var(--ink); font: inherit; cursor: pointer;
}
.prose .video-playback:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }