/* ---- css/app.min.css ---- */
body{overflow-x:hidden}h1,h2,ol,p,ul{text-align:left!important}p{text-align:justify!important}.responsive-media{width:100%;margin:0}@media (min-width:768px){dt-article{margin:0 auto}dt-appendix{margin:0 auto 64px;display:block}dt-appendix pre{max-width:100%;overflow-x:auto}.responsive-media{width:95%}}.scroll-down{width:80px;height:40px;right:10px;bottom:10px;position:absolute;font-family:Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-weight:300;color:#fff;opacity:0;transition:opacity 2s ease-in}.transparent{opacity:0}dt-article figcaption,figcaption{padding:.5em;color:rgba(0,0,0,.6);font-size:12px;line-height:1.5em;text-align:left}dt-article figcaption a{color:rgba(0,0,0,.6)}dt-article figcaption b{font-weight:600;color:#000}pre{display:flex;justify-content:center;overflow-x:auto;max-width:100%;padding:0 1rem;box-sizing:border-box}pre code{display:inline-block;text-align:left;padding:16px 20px;border-radius:8px;background:#f7f7f8;border:1px solid #e7e7ea;margin:0;max-width:100%;box-sizing:border-box;white-space:pre-wrap;word-break:break-word;font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:.92em;line-height:1.6;color:#2a2a2e}.katex-display{overflow-x:auto;overflow-y:hidden;white-space:nowrap}.katex{font-size:1em;font-family:Georgia,"Times New Roman",serif;color:inherit}.unselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-o-user-select:none;user-select:none}figure.figure{max-width:1000px;width:100%;margin-left:auto;margin-right:auto}figure.figure img{display:block;max-height:500px;width:auto;max-width:100%;height:auto;margin-left:auto;margin-right:auto}figure.figure figcaption{text-align:center}@media (max-width:1080px){figure.figure{margin-left:72px;margin-right:72px;width:auto}}@media (max-width:768px){figure.figure{margin-left:24px;margin-right:24px;width:auto}}.concept-highlight{background:linear-gradient(135deg,#fff8f0,#fff3e0);border-left:4px solid #ff6c00;border-radius:0 8px 8px 0;padding:16px 20px;margin:20px auto;width:min(100%,700px)}.concept-highlight strong{color:#ff6c00}.db-cover-figure{width:min(100%,880px);margin:0 auto 1.5em}.db-cover-frame{position:relative;width:100%;overflow:hidden;border-radius:16px;box-shadow:0 4px 24px rgba(0,0,0,.12);background:#fff;aspect-ratio:900/420}.db-method-figure{width:min(100%,760px);margin:1.2em auto}.db-method-frame{position:relative;width:100%;overflow:hidden;border-radius:12px;background:#fff;aspect-ratio:680/360;border:0}.db-widget-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:0 0}.db-standard-figure{max-width:240px;width:100%;margin:1em auto}.db-backprop-anim{display:block;max-width:240px;width:100%;height:auto;margin:0 auto;--bp-gray:#6b7d8c;--bp-forward:#37474f;--bp-backward:#1f4e8c}.db-backprop-anim .db-layer{fill:var(--bp-gray)}.db-backprop-anim .db-input{animation:6s ease-in-out infinite db-input-jiggle}@keyframes db-input-jiggle{0%,100%,6%{transform:translateY(0)}1.5%{transform:translateY(-3px)}3%{transform:translateY(2px)}4.5%{transform:translateY(-1px)}}.db-backprop-anim .db-fwd-line{stroke-dasharray:300;stroke-dashoffset:300;animation:6s ease-in-out infinite db-fwd-draw}@keyframes db-fwd-draw{0%,5%{stroke-dashoffset:300;opacity:1}44%,55%{stroke-dashoffset:0;opacity:1}100%,60%{stroke-dashoffset:0;opacity:0}}.db-backprop-anim .db-fwd-head{opacity:0;animation:6s ease-in-out infinite db-fwd-head}@keyframes db-fwd-head{0%,100%,42%,60%{opacity:0}46%,55%{opacity:1}}.db-backprop-anim .db-output{animation:6s ease-in-out infinite db-output-shake}@keyframes db-output-shake{0%,100%,44%,55%{transform:translateX(0)}46%{transform:translateX(-3px)}48%{transform:translateX(3px)}50%{transform:translateX(-2px)}52%{transform:translateX(2px)}}.db-backprop-anim .db-bp-line{stroke-dasharray:255;stroke-dashoffset:255;animation:6s ease-in-out infinite db-bp-draw}@keyframes db-bp-draw{0%,100%,55%,96%{stroke-dashoffset:255}88%,92%{stroke-dashoffset:0}}.db-backprop-anim .db-bp-head{opacity:0;animation:6s ease-in-out infinite db-bp-head}@keyframes db-bp-head{0%,100%,86%,96%{opacity:0}90%,92%{opacity:1}}.db-backprop-anim .db-bp-label{opacity:0;animation:6s ease-in-out infinite db-bp-label}@keyframes db-bp-label{0%,100%,55%,96%{opacity:0}60%,92%{opacity:1}}.db-backprop-anim .db-layer-1{animation:6s ease-in-out infinite db-bp-anim-layer-1}.db-backprop-anim .db-layer-2{animation:6s ease-in-out infinite db-bp-anim-layer-2}.db-backprop-anim .db-layer-3{animation:6s ease-in-out infinite db-bp-anim-layer-3}.db-backprop-anim .db-layer-4{animation:6s ease-in-out infinite db-bp-anim-layer-4}.db-backprop-anim .db-layer-5{animation:6s ease-in-out infinite db-bp-anim-layer-5}.db-backprop-anim .db-layer-6{animation:6s ease-in-out infinite db-bp-anim-layer-6}@keyframes db-bp-anim-layer-1{0%,100%,37%,43%,56%,62%{fill:var(--bp-gray)}39%,41%{fill:var(--bp-forward)}58%,60%{fill:var(--bp-backward)}}@keyframes db-bp-anim-layer-2{0%,100%,31%,37%,61%,67%{fill:var(--bp-gray)}33%,35%{fill:var(--bp-forward)}63%,65%{fill:var(--bp-backward)}}@keyframes db-bp-anim-layer-3{0%,100%,25%,31%,66%,72%{fill:var(--bp-gray)}27%,29%{fill:var(--bp-forward)}68%,70%{fill:var(--bp-backward)}}@keyframes db-bp-anim-layer-4{0%,100%,19%,25%,71%,77%{fill:var(--bp-gray)}21%,23%{fill:var(--bp-forward)}73%,75%{fill:var(--bp-backward)}}@keyframes db-bp-anim-layer-5{0%,100%,13%,19%,76%,82%{fill:var(--bp-gray)}15%,17%{fill:var(--bp-forward)}78%,80%{fill:var(--bp-backward)}}@keyframes db-bp-anim-layer-6{0%,100%,13%,7%,81%,87%{fill:var(--bp-gray)}11%,9%{fill:var(--bp-forward)}83%,85%{fill:var(--bp-backward)}}@media (prefers-reduced-motion:reduce){.db-backprop-anim *{animation:none!important;opacity:1!important;stroke-dashoffset:0!important}}.db-future-item{display:block;margin-block:0 0.2em;color:#17171b;font-weight:550;font-style:normal}dt-article a{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px}.db-steps{list-style:none;padding-left:0;display:flex;flex-direction:column;gap:.9em;margin-block:1.3em}.db-step{display:flex;align-items:flex-start;gap:.75em;line-height:1.55}.db-step-num{flex:0 0 24px;height:24px;border-radius:50%;background:#ff6c00;color:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:.85em;line-height:1;margin-top:.15em}.db-step-text{flex:1}.db-step-text strong{font-weight:600}.db-citation{margin-block:1.4em;border:1px solid #e4e4e7;border-radius:10px;background:#fff;overflow:hidden}.db-citation-header{display:flex;align-items:center;justify-content:space-between;padding:.55rem .95rem;background:#fafafa;border-bottom:1px solid #efeff1;font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif}.db-citation-label{font-size:11px;font-weight:600;color:#71717a;letter-spacing:.07em}.db-citation-copy{display:inline-flex;align-items:center;gap:.35em;padding:.3rem .65rem;background:0 0;border:1px solid #e4e4e7;border-radius:6px;font-size:12px;font-weight:500;color:#52525b;cursor:pointer;transition:background .15s,color .15s,border-color .15s;font-family:inherit}.db-citation-copy:hover{background:#f4f4f5;color:#18181b}.db-citation-copy.copied{background:#fff7ed;color:#c2410c;border-color:#fed7aa}.db-citation-icon-check,.db-citation-icon-copy{flex-shrink:0}.db-citation-copy.copied .db-citation-icon-copy,.db-citation-icon-check{display:none}.db-citation-copy.copied .db-citation-icon-check{display:inline-block}.db-citation-code{display:block;margin:0;padding:1rem 1.1rem;overflow-x:auto;background:0 0;font-family:"Roboto Mono",Menlo,Consolas,monospace;font-size:.88em;line-height:1.65;color:#27272a;white-space:pre;word-break:normal;text-align:left}body dt-appendix h3{font-size:1.3em;font-weight:700;color:inherit;margin-top:.83em;margin-bottom:.83em;line-height:normal}.snippet-box{font-family:Georgia,serif;font-size:1em;line-height:1.6;width:auto;max-width:none;min-width:0;--snippet-admonition-rgb:68,138,255;--snippet-admonition-icon:var(--snippet-admonition-icon--note);border:1px solid rgba(var(--snippet-admonition-rgb),.35);border-left:4px solid rgb(var(--snippet-admonition-rgb));border-radius:8px;background:0 0;box-shadow:none;margin:28px 24px;overflow:hidden}.snippet-box code,.snippet-box pre,.snippet-box tt{font-family:"Roboto Mono",Menlo,monospace}.snippet-box .snippet-title{margin:0;padding:12px;background-color:rgba(var(--snippet-admonition-rgb),.12);border-bottom:1px solid rgba(var(--snippet-admonition-rgb),.18);color:rgba(0,0,0,.85);font-family:Georgia,serif;font-weight:700;font-size:.98em;letter-spacing:0;cursor:pointer;position:relative;user-select:none}.snippet-box .snippet-title::after{content:"\25B8";position:absolute;right:14px;top:50%;transform:translateY(-50%) rotate(0);transform-origin:center;color:rgba(0,0,0,.45);font-size:14px;transition:transform .18s}.snippet-box.is-open .snippet-title::after{transform:translateY(-50%) rotate(90deg)}.snippet-box .snippet-content{max-height:0;overflow:hidden;padding:0 16px;background:0 0;transition:max-height .25s,padding .2s}.snippet-box.is-open .snippet-content{max-height:2000px;padding:14px 16px 16px}.snippet-box .snippet-content ol,.snippet-box .snippet-content p,.snippet-box .snippet-content ul{margin:0 0 12px;font-family:Georgia,serif;font-size:1em;line-height:1.7;color:rgba(0,0,0,.82)}.snippet-box .snippet-content ol:last-child,.snippet-box .snippet-content p:last-child,.snippet-box .snippet-content ul:last-child{margin-bottom:0}@media (min-width:768px){.snippet-box{margin-left:72px;margin-right:72px}}@media (min-width:1080px){.snippet-box{margin-left:15%;margin-right:0;width:70%}}.snippet-box.note{--snippet-admonition-rgb:68,138,255}.snippet-box.info{--snippet-admonition-rgb:0,176,255}.snippet-box.tip{--snippet-admonition-rgb:0,150,136}.snippet-box.warning{--snippet-admonition-rgb:255,152,0}.snippet-box.danger{--snippet-admonition-rgb:244,67,54}
/* ---- css/v2.css ---- */

:root{
  --sa-sans:-apple-system,"system-ui","Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
  --sa-width:940px;
  --sa-rule:rgba(0,0,0,.1);
  --sa-muted:rgba(0,0,0,.55);
}


dt-article, dt-article p, dt-article ul, dt-article ol, dt-article li,
dt-article h1, dt-article h2, dt-article h3, dt-article h4,
dt-article figcaption, dt-appendix{
  font-family:var(--sa-sans) !important;
}
dt-article p, dt-article ul, dt-article ol{
  font-size:17px !important;line-height:1.65 !important;color:rgba(0,0,0,.87) !important;
}


dt-article > p, dt-article > ul, dt-article > ol,
dt-article > h1, dt-article > h2, dt-article > h3, dt-article > h4,
dt-article > .float-host, dt-article > .math-display, dt-article > .algobox{
  width:auto !important;max-width:var(--sa-width) !important;
  margin-left:auto !important;margin-right:auto !important;
  padding-left:24px !important;padding-right:24px !important;box-sizing:border-box !important;
}

dt-article > .algobox{padding-left:24px !important;padding-right:24px !important;
  max-width:min(700px,calc(100% - 48px)) !important}

dt-article > ul, dt-article > ol{padding-left:calc(24px + 1.5em) !important}


dt-article h1{
  font-size:36px !important;line-height:1.18 !important;font-weight:700 !important;letter-spacing:-.015em !important;
}
.sa-subtitle{
  font-size:18px !important;line-height:1.45 !important;font-weight:300 !important;
  color:var(--sa-muted) !important;margin:0 auto 36px !important;
}
.sa-subtitle strong{font-weight:600 !important;color:rgba(0,0,0,.75) !important}


.sa-masthead{
  display:grid;grid-template-columns:minmax(140px,.6fr) minmax(0,2fr) minmax(140px,.6fr);
  gap:32px;border-top:1px solid var(--sa-rule);border-bottom:1px solid var(--sa-rule);
  padding:22px 0 24px;align-items:start;
  max-width:calc(var(--sa-width) - 48px);margin:0 auto 40px;box-sizing:border-box;
  font-family:var(--sa-sans) !important;
}
.sa-meta-label{
  text-transform:uppercase;letter-spacing:.12em !important;font-size:11px !important;
  color:var(--sa-muted) !important;font-weight:600 !important;margin:0 0 10px;
}
.sa-resources{list-style:none;margin:0;padding:0;font-size:14px !important;line-height:1.6 !important}
.sa-resources li{margin:0 0 4px}
.sa-resources a{display:inline-flex;align-items:center;gap:7px;color:var(--accent) !important;text-decoration:none !important;border-bottom:0 !important}
.sa-resources a span{border-bottom:0}
.sa-resources a:hover{color:#c85500 !important}
.res-icon{width:14px;height:14px;flex:0 0 14px;display:block}
.res-icon-arxiv{width:11px;height:14px;flex:0 0 11px}
.sa-authors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 18px}
.sa-author p{margin:0;font-size:13px !important;line-height:1.4 !important}
.sa-author .name{font-weight:600 !important}
.sa-author .name a{color:inherit !important;text-decoration:none}
.sa-author .affiliation{color:var(--sa-muted) !important;font-size:12px !important;margin-top:2px}
.sa-published{text-align:right}
.sa-published .sa-meta-label{text-align:right}
.sa-pub-date{font-size:14px !important;font-weight:500 !important;margin:0}


dt-article h2{
  font-size:28px !important;font-weight:700 !important;letter-spacing:-.01em !important;
  border-bottom:1px solid var(--sa-rule);padding-bottom:12px;margin-top:72px !important;
}
dt-article h3{font-size:24px !important;font-weight:650 !important;font-style:normal !important;margin-top:48px !important}
dt-article h4{font-size:17px !important;font-weight:650 !important;font-style:normal !important;color:rgba(0,0,0,.78) !important}

@media (min-width:1000px){
  dt-article > h2{max-width:calc(var(--sa-width) - 48px) !important;padding-left:0 !important;padding-right:0 !important}
}


dt-article figcaption{
  font-size:13px !important;line-height:1.55 !important;color:var(--sa-muted) !important;text-align:left !important;margin-top:12px;
}
dt-article figcaption b, dt-article figcaption strong{color:rgba(0,0,0,.85) !important;font-weight:600 !important}


dt-article > figure.figure{max-width:var(--sa-width) !important;margin-left:auto !important;margin-right:auto !important;
  padding-left:24px !important;padding-right:24px !important;box-sizing:border-box !important;width:auto !important}
figure.figure.pa-hero{max-width:1128px !important}
/* interactive widget embeds: need >=1000px of inner width or the applets reflow to a
   tall stacked layout (their two-panel grid caps at 980px). 1128 - 48 padding = 1080. */
figure.figure.pa-wide{max-width:1128px !important}


.sa-hide{display:none !important}

/* narrow screens: masthead as compact label | content rows (resources and authors inline) */
@media (max-width:1000px){
  .sa-masthead{grid-template-columns:max-content 1fr;gap:10px 18px;padding:16px 24px 18px;align-items:baseline}
  .sa-masthead > div{display:contents}
  .sa-meta-label{margin:0 !important}
  .sa-resources{display:flex;flex-wrap:wrap;gap:4px 18px}
  .sa-resources li{margin:0}
  .sa-authors{display:flex;flex-wrap:wrap;gap:4px 18px}
  .sa-author{display:flex;align-items:baseline;gap:6px}
  .sa-author .affiliation{margin-top:0 !important}
  .sa-published,.sa-published .sa-meta-label{text-align:left}
}
@media (max-width:720px){
  dt-article h1{font-size:28px !important}
  .sa-subtitle{font-size:16px !important}
  dt-article h2{font-size:23px !important}
  dt-article h3{font-size:20px !important}
  .sa-authors{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:480px){
  .sa-authors{grid-template-columns:1fr}
}

/* Distill's template renders each [n] citation as display:inline-block, and CSS permits a
   line break right after an inline-block even with no whitespace — so a period following a
   citation chain can wrap onto its own line. inline restores normal break rules (breaks
   only at spaces), keeping trailing punctuation glued to the last [n]. */
dt-cite span.citation-number{display:inline}

/* ---- css/toc-sidenotes.css ---- */
/* ---- Margin footnotes (right gutter) + opt-in left-gutter TOC. Math size lives in math-flat.css. ---- */
:root{
  --pa-col:940px;          /* article column (matches --sa-width) */
  --pa-toc-w:190px;        /* inline TOC box width */
  --pa-toc-max-gutter:340px; /* cap on how far left of the column the TOC box may sit */
  --pa-sn-w:200px;         /* margin-note width */
  --pa-sn-gap:32px;        /* from the text edge (24px column padding + 8px) */
  --pa-sn-size:12px;
  --pa-sn-lines:6;         /* lines shown before hover */
  --pa-fixed-inset:16px;   /* collapsed bar / panel corner inset */
}
dt-article{position:relative}

/* ---------------- TOC ---------------- */
.pa-toc{font-family:var(--sa-sans);font-size:12.5px;line-height:1.3;color:rgba(0,0,0,.82);
  -webkit-font-smoothing:antialiased}
.pa-toc > h3{font-family:var(--sa-sans) !important;font-size:14px !important;font-weight:600 !important;
  font-variant-caps:small-caps;letter-spacing:.03em;margin:0 0 .85rem !important;color:rgba(0,0,0,.82) !important}
/* !important: v2.css/Distill size every dt-article ul/li at 17px */
.pa-toc nav ul,.pa-toc nav li,.pa-toc nav a{font-family:var(--sa-sans) !important;font-size:12.5px !important;line-height:1.3 !important;color:inherit}
.pa-toc nav ul{list-style:none !important;padding:0 !important;margin:0 !important;width:auto !important;max-width:none !important}
.pa-toc nav li{padding:0 !important;margin:0 !important}
.pa-toc nav > .pa-toc-scroll > ul > li{margin:0 0 .35rem !important}
.pa-toc nav > .pa-toc-scroll > ul > li > a{font-weight:600;display:block}
.pa-toc nav ul ul{padding-left:.85rem !important;margin:.25rem 0 .2rem !important}
.pa-toc nav ul ul li{margin:0 0 .2rem !important}
.pa-toc nav ul ul a{font-weight:400}
.pa-toc nav a{color:inherit !important;text-decoration:none !important;border-bottom:0 !important}
.pa-toc nav a:hover{text-decoration:underline !important;text-decoration-style:dotted !important;
  text-decoration-thickness:1px !important;text-underline-offset:3px !important}
.pa-toc nav ul.pa-toc-end{margin-top:.7rem !important;padding-top:.7rem !important;border-top:1px solid var(--sa-rule)}
.pa-toc nav ul.pa-toc-end > li > a{font-weight:400;color:var(--sa-muted) !important}
.pa-toc nav ul.pa-toc-end > li > a:hover{color:rgba(0,0,0,.82) !important}
.pa-toc-sentinel{height:0}

/* inline (resting) state: sits in the left gutter, aligned to the first section heading */
.pa-toc{display:none}
@media (min-width:1400px){
  /* hug the left edge of the gutter (24px from the window), but never drift further than
     --pa-toc-max-gutter from the column on very wide screens (the reference caps its gutter at 340px) */
  .pa-toc{display:block;position:absolute;
    left:max(24px, calc(50% - var(--pa-col)/2 - var(--pa-toc-max-gutter)));
    width:var(--pa-toc-w);opacity:.55;transition:opacity .3s ease}
  .pa-toc:hover,.pa-toc:focus-within{opacity:1}
}
/* collapsed bar (fixed, top-left) */
.pa-toc-bar{display:none;align-items:center;gap:.5rem;position:fixed;left:var(--pa-fixed-inset);top:var(--pa-fixed-inset);
  width:fit-content;max-width:min(280px,calc(100vw - 32px));padding:.4rem .65rem;
  background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:4px;
  font:600 12.5px/1.3 var(--sa-sans);color:rgba(0,0,0,.82);cursor:pointer;z-index:40;
  -webkit-font-smoothing:antialiased}
.pa-toc-bar .pa-toc-caret{width:10px;height:10px;flex:0 0 10px;transition:transform .2s}
.pa-toc-bar .pa-toc-label{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.pa-toc[data-toc-state="collapsed"],.pa-toc[data-toc-state="expanded"]{display:block;position:static;width:auto;opacity:1}
.pa-toc[data-toc-state="collapsed"] > h3,.pa-toc[data-toc-state="expanded"] > h3{display:none}
.pa-toc[data-toc-state="collapsed"] .pa-toc-bar,.pa-toc[data-toc-state="expanded"] .pa-toc-bar{display:flex}
.pa-toc[data-toc-state="expanded"] .pa-toc-caret{transform:rotate(180deg)}
.pa-toc[data-toc-state="collapsed"] nav{display:none}
/* expanded panel (fixed, under the bar) */
.pa-toc[data-toc-state="expanded"] nav{display:block;position:fixed;left:var(--pa-fixed-inset);
  top:calc(var(--pa-fixed-inset) + 2.6rem);width:280px;max-width:calc(100vw - 32px);
  background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:6px;z-index:45;
  box-shadow:0 8px 28px rgba(0,0,0,.08)}
.pa-toc[data-toc-state="expanded"] nav > .pa-toc-scroll{max-height:calc(100vh - var(--pa-fixed-inset) - 2.6rem - 2rem);
  overflow-y:auto;padding:.9rem 1rem}

/* ---------------- margin notes (footnotes beside the text) ----------------
   Reference behavior: the note is a fixed-height box (clamp), its body simply grows past it on
   hover with the page background, no card chrome, no shadow; the fade is an overlay that dims out. */
.pa-sidenote{display:none}
@media (min-width:1106px){
  .pa-sidenote{display:block;float:right;clear:right;width:var(--pa-sn-w);
    margin:5px calc(-1 * (var(--pa-sn-w) + var(--pa-sn-gap))) 14px 20px;
    font-family:var(--sa-sans);font-size:var(--pa-sn-size);line-height:1.5;font-style:normal;text-align:left !important;hyphens:none;
    color:#424242;opacity:.5;transition:opacity .3s ease;
    position:relative;max-height:calc(var(--pa-sn-lines) * 1.5 * var(--pa-sn-size));overflow:visible}
  .pa-sidenote:hover, dt-fn:hover + .pa-sidenote{opacity:1;z-index:20}
  .pa-sidenote-body{position:relative;interpolate-size:allow-keywords;
    max-height:calc(var(--pa-sn-lines) * 1.5 * var(--pa-sn-size));overflow:hidden;background:#fff;transition:max-height .3s ease}
  .pa-sidenote-body::after{content:"";position:absolute;left:0;right:0;
    top:calc(var(--pa-sn-lines) * 1.5 * var(--pa-sn-size) - 2.2em);height:2.2em;
    background:linear-gradient(to bottom,rgba(255,255,255,0),#fff);pointer-events:none;transition:opacity .3s ease}
  .pa-sidenote:hover .pa-sidenote-body, dt-fn:hover + .pa-sidenote .pa-sidenote-body{max-height:60em;max-height:max-content}
  .pa-sidenote:hover .pa-sidenote-body::after, dt-fn:hover + .pa-sidenote .pa-sidenote-body::after{opacity:0}
  .pa-sidenote-num{font-family:var(--mono);font-size:.85em;color:#6f6f6f;margin-right:.5em}
  .pa-sidenote p{margin:0 0 .5em;font-size:inherit !important;line-height:inherit !important;color:inherit !important}
  .pa-sidenote p:last-child{margin:0}
  .pa-sidenote dt-cite span{font-size:inherit}
}

/* Distill's footnote hover popup is redundant while the margin note is showing (same rule as
   Simplex's hover-preview.js and LessWrong); it still serves narrower windows. */
@media (min-width:1106px){
  .dt-hover-box[id^="dt-fn-hover-box"]{display:none !important}
}

/* ---- css/math-flat.css ---- */
/* flat math scale: one size for display and inline, 1.08x the surrounding text (MathJax's
   x-height matching baked 118-119% inline; Distill's 20px article base inflated display math).
   Final build: chtml:{matchFontHeight:false, scale:1.08} + .math-display{font-size:17px}.
   Global selectors on purpose: footnote list and hover boxes live outside dt-article. */
dt-article .math-display{font-size:17px}
mjx-container,
dt-article .math-display > mjx-container[display="true"]{font-size:108% !important}