/* moonScan logo mark: the Dot (matte violet body with a bite and two eyes) plus
   the orange sphere. One definition for every page and the site header.
   Size it with --mm (default 34px); everything inside scales from that. */
.sf-moon-mark {
  --mm: 34px;
  --mm-orange: radial-gradient(circle at 64% 24%, #FAAE68 0, #F68C47 38%, #EC7A40 66%, #CF5836 100%);
  --mm-violet: radial-gradient(circle at 62% 26%, #8B74F3 0, #765DEC 40%, #6449D8 70%, #4A3496 100%);
  position: relative;
  display: block;
  flex-shrink: 0;
  width: var(--mm);
  height: var(--mm);
}
.sf-moon-mark::before,
.sf-moon-mark::after { content: ""; position: absolute; border-radius: 50%; }
.sf-moon-mark::before {
  left: 0;
  bottom: 0;
  width: calc(var(--mm) * .853);
  height: calc(var(--mm) * .853);
  background:
    radial-gradient(circle at 37% 47%, #1E1430 0 calc(var(--mm) * .044), transparent calc(var(--mm) * .059)),
    radial-gradient(circle at 55% 43%, #1E1430 0 calc(var(--mm) * .044), transparent calc(var(--mm) * .059)),
    var(--mm-violet);
  -webkit-mask-image: radial-gradient(circle at 90% 12%, transparent 0 calc(var(--mm) * .22), #000 calc(var(--mm) * .235));
  mask-image: radial-gradient(circle at 90% 12%, transparent 0 calc(var(--mm) * .22), #000 calc(var(--mm) * .235));
}
.sf-moon-mark::after {
  right: 0;
  top: 0;
  width: calc(var(--mm) * .324);
  height: calc(var(--mm) * .324);
  background: var(--mm-orange);
  box-shadow: 0 calc(var(--mm) * .06) calc(var(--mm) * .12) rgba(90, 30, 8, .25);
}

/* Site header. A plain bar, not a floating capsule: transparent over the top of
   each page, then a quiet translucent surface and a single hairline once the page
   scrolls. Text links in ink, the current page marked by the small orange sphere
   from the logo, one solid ink button. No glows, gradients or tinted pills. */

.hdr {
  --hdr-ink: #221A36;
  --hdr-quiet: rgba(34, 26, 54, .58);
  --hdr-hover: rgba(34, 26, 54, .05);
  --hdr-rule: rgba(34, 26, 54, .09);
  --hdr-surface: rgba(250, 247, 243, .82);
  --hdr-cta-bg: #F68C47;
  --hdr-cta-hover: #FF9A57;
  --hdr-cta-ink: #1E1438;
  --hdr-orange: radial-gradient(circle at 64% 24%, #FAAE68 0, #F68C47 38%, #EC7A40 66%, #CF5836 100%);
  --hdr-violet: radial-gradient(circle at 62% 26%, #8B74F3 0, #765DEC 40%, #6449D8 70%, #4A3496 100%);
  --hdr-focus: #7C5CE0;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color .3s ease, border-color .3s ease, backdrop-filter .3s ease;
}
.dark .hdr:not(.hdr-light) {
  --hdr-ink: #F1EAFF;
  --hdr-quiet: rgba(241, 234, 255, .6);
  --hdr-hover: rgba(241, 234, 255, .07);
  --hdr-rule: rgba(241, 234, 255, .1);
  --hdr-surface: rgba(14, 11, 26, .78);
  --hdr-cta-bg: #F68C47;
  --hdr-cta-hover: #FF9A57;
  --hdr-cta-ink: #1E1438;
  --hdr-focus: #CDB9FF;
}
/* Dark pages vary underneath, so in dark mode the bar always keeps its surface. */
.dark .hdr:not(.hdr-light),
.hdr[data-scrolled="true"] {
  background: var(--hdr-surface);
  border-bottom-color: var(--hdr-rule);
  -webkit-backdrop-filter: saturate(160%) blur(16px);
  backdrop-filter: saturate(160%) blur(16px);
}
.hdr :focus-visible { outline: 2px solid var(--hdr-focus); outline-offset: 3px; border-radius: 999px; }

/* Wordmark. */
.hdr-wordmark { font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; font-size: 18px; font-weight: 600; line-height: 1; letter-spacing: -.035em; color: var(--hdr-ink); }
.hdr-byline { display: flex; align-items: center; gap: 4px; margin-top: 3px; font-size: 7.5px; line-height: 1; letter-spacing: .14em; text-transform: uppercase; color: var(--hdr-quiet); }
.hdr-byline img { opacity: .55; }
.dark .hdr:not(.hdr-light) .hdr-byline img { opacity: .7; filter: brightness(0) invert(1); }

/* Page links. */
.hdr-nav { align-items: center; gap: 30px; }
/* Five links (the shop joined the menu) need a tighter gap on tablets so they clear the actions on the right. */
@media (min-width: 768px) and (max-width: 1023px) { .hdr-nav { gap: 12px; } }
.hdr-link {
  position: relative; display: inline-flex; align-items: center; height: 40px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 500; letter-spacing: -.005em; white-space: nowrap;
  color: var(--hdr-quiet); transition: color .2s ease;
}
.hdr-link:hover, .hdr-link-active { color: var(--hdr-ink); }
.hdr-link-active::after {
  content: ""; position: absolute; left: 50%; bottom: 2px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--hdr-orange);
}
.hdr-nav > a + a { margin-left: 0; }

/* Language: two quiet letters, the active one in ink. */
.hdr-lang { display: inline-flex; align-items: center; gap: 2px; }
.hdr-lang-btn {
  min-width: 28px; height: 32px; padding: 0 5px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 11.5px; font-weight: 600; letter-spacing: .06em;
  color: var(--hdr-quiet); opacity: .75; transition: color .2s ease, opacity .2s ease;
}
.hdr-lang-btn:hover { color: var(--hdr-ink); opacity: 1; }
.hdr-lang-btn[aria-pressed="true"] { color: var(--hdr-ink); opacity: 1; }
.hdr-lang-btn + .hdr-lang-btn { position: relative; }
.hdr-lang-btn + .hdr-lang-btn::before { content: ""; position: absolute; left: -1px; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: var(--hdr-rule); }

/* Icon buttons (theme, admin user switcher, signed-out mobile log in). */
.hdr-icon {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer;
  color: var(--hdr-quiet); transition: color .2s ease, background-color .2s ease;
}
.hdr-icon:hover { color: var(--hdr-ink); background: var(--hdr-hover); }

/* Primary action: one solid ink pill. */
.hdr-cta {
  display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 0; border-radius: 999px; cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 14px; font-weight: 600; letter-spacing: -.005em;
  background: var(--hdr-cta-bg); color: var(--hdr-cta-ink); transition: background-color .2s ease;
}
.hdr-cta:hover { background: var(--hdr-cta-hover); }
.hdr-cta-sm { height: 34px; padding: 0 14px; font-size: 13px; }

/* Admin tools: quiet text with small icons, set apart by a hairline. */
.hdr-admin { display: flex; align-items: center; gap: 2px; }
.hdr-admin-link {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0; border-radius: 999px; background: none; cursor: pointer; white-space: nowrap;
  font-family: 'DM Sans', system-ui, sans-serif; font-size: 12.5px; font-weight: 500; color: var(--hdr-quiet); transition: color .2s ease, background-color .2s ease;
}
.hdr-admin-link:hover, .hdr-admin-link-active { color: var(--hdr-ink); }
.hdr-admin-link-on { background: var(--hdr-ink); color: #FAF4EE; }
.hdr-admin-link-on:hover { color: #FAF4EE; }
.dark .hdr:not(.hdr-light) .hdr-admin-link-on, .dark .hdr:not(.hdr-light) .hdr-admin-link-on:hover { color: #1A1330; }
.hdr-admin .hdr-icon { width: 32px; height: 32px; }
.hdr-rule { display: block; width: 1px; height: 18px; margin: 0 6px; background: var(--hdr-rule); }

/* Account avatar: initials on the matte violet sphere. */
.hdr-avatar-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.hdr-avatar {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; object-fit: cover;
  background: var(--hdr-violet); color: #FFFFFF;
  font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: -.01em;
  transition: transform .2s ease;
}
.hdr-avatar-btn:hover .hdr-avatar { transform: scale(1.05); }

/* Mobile menu button: two thin lines. */
.hdr-burger { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; color: var(--hdr-ink); }
.hdr-burger:hover { background: var(--hdr-hover); }
.hdr-burger-lines { position: relative; display: block; width: 18px; height: 8px; }
.hdr-burger-lines::before, .hdr-burger-lines::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; border-radius: 2px; background: currentColor; }
.hdr-burger-lines::before { top: 0; }
.hdr-burger-lines::after { bottom: 0; left: 6px; }

@media (prefers-reduced-motion: reduce) {
  .hdr, .hdr-avatar { transition: none; }
}

/* Site footer. Plain ivory ground with one hairline above it, the mark and the
   product note on the left, three quiet link columns on the right. Mono eyebrows
   like the rest of the new design; links are text only, no cards or chips. */

.ftr {
  --ftr-bg: #F4EEE7;
  --ftr-ink: #221A36;
  --ftr-quiet: rgba(34, 26, 54, .62);
  --ftr-eyebrow: #6745AA;
  --ftr-rule: rgba(34, 26, 54, .1);
  --ftr-focus: #7C5CE0;
  background: var(--ftr-bg);
  border-top: 1px solid var(--ftr-rule);
  color: var(--ftr-ink);
  font-family: 'DM Sans', system-ui, sans-serif;
}
.dark .ftr:not(.ftr-light) {
  --ftr-bg: #0E0B1A;
  --ftr-ink: #F1EAFF;
  --ftr-quiet: rgba(241, 234, 255, .62);
  --ftr-eyebrow: #CDB9FF;
  --ftr-rule: rgba(241, 234, 255, .1);
  --ftr-focus: #CDB9FF;
}
.ftr-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 32px 56px;
}
.ftr-logo { display: inline-flex; align-items: center; gap: 10px; color: var(--ftr-ink); text-decoration: none; }
.ftr-wordmark { font-family: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; font-size: 22px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.ftr-note { max-width: 360px; margin: 20px 0 0; font-size: 13px; line-height: 1.65; color: var(--ftr-quiet); text-wrap: pretty; }

.ftr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.ftr-eyebrow { margin: 0 0 18px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ftr-eyebrow); }
.ftr-col ul { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.ftr-col a {
  display: inline-block;
  padding: 5px 0;
  font-size: 14px;
  color: var(--ftr-quiet);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: color .2s ease, background-size .25s ease;
}
.ftr-col a:hover { color: var(--ftr-ink); background-size: 100% 1px; }
.ftr a:focus-visible { outline: 2px solid var(--ftr-focus); outline-offset: 3px; border-radius: 4px; }

@media (max-width: 900px) {
  .ftr-inner { grid-template-columns: 1fr; gap: 40px; padding: 48px 24px 40px; }
  .ftr-note { max-width: 520px; }
}
@media (max-width: 560px) {
  .ftr-cols { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
  .ftr-col:first-child { grid-column: 1 / -1; }
}

/* The Cookie settings line under the footer continues the footer's ground. */
body:has(.ftr) .ac-settings-bar { background: #F4EEE7; }
.dark body:has(.ftr:not(.ftr-light)) .ac-settings-bar { background: #0E0B1A; }

.hdr{position:sticky;top:0;z-index:50;font-family:'DM Sans',system-ui,sans-serif}
.hdr a{text-decoration:none}
.hdr-bar{max-width:1280px;margin:0 auto;height:60px;padding:0 8px 0 16px;display:flex;align-items:center;gap:8px}
.hdr .sf-moon-mark{--mm:26px}
.hdr-brand{display:flex;align-items:center;gap:10px;flex-shrink:0;line-height:1;color:var(--hdr-ink)}
.hdr-brand-text{display:flex;flex-direction:column;align-items:flex-start}
.hdr-byline img{height:8px;width:auto;max-width:56px;object-fit:contain;filter:brightness(0)}
.hdr-nav{display:none;flex:1;justify-content:center;min-width:0}
.hdr-right{display:flex;align-items:center;gap:8px;margin-left:auto;flex-shrink:0}
.hdr-right .hdr-account{display:none;align-items:center;gap:8px}
.hdr-lang-btn{display:inline-flex;align-items:center;justify-content:center}
.hdr-lang-btn[aria-current="true"]{color:var(--hdr-ink);opacity:1}
.hdr a.hdr-cta,.hdr a.hdr-cta:hover{color:var(--hdr-cta-ink)}
@media(min-width:640px){.hdr-bar{height:68px;padding:0 32px;gap:16px}.hdr .sf-moon-mark{--mm:28px}.hdr-right .hdr-account{display:flex}}
@media(min-width:768px){.hdr-nav{display:flex}.hdr-right{margin-left:0}}
/* The app's header is transparent at the top and gains its surface once the page scrolls; there is no script here, so scroll-driven animation does the same where supported. */
.hdr{background:var(--hdr-surface);border-bottom-color:var(--hdr-rule);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}
@supports (animation-timeline:scroll()){
.hdr{animation:hdr-scrolled linear both;animation-timeline:scroll(root);animation-range:0 48px}
@keyframes hdr-scrolled{from{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}to{background:var(--hdr-surface);border-bottom-color:var(--hdr-rule);-webkit-backdrop-filter:saturate(160%) blur(16px);backdrop-filter:saturate(160%) blur(16px)}}
}
/* Below the desktop breakpoint the app opens a menu sheet; here a script-free disclosure does the same job. */
.hdr-try{display:inline-flex}
.hdr-menu{position:relative}
.hdr-menu summary{list-style:none}
.hdr-menu summary::-webkit-details-marker{display:none}
.hdr-menu-panel{position:absolute;right:0;top:calc(100% + 8px);min-width:220px;display:flex;flex-direction:column;gap:2px;padding:10px 14px;border-radius:16px;background:rgba(250,247,243,.97);border:1px solid var(--hdr-rule);box-shadow:0 14px 40px rgba(34,26,54,.14)}
.hdr-menu-panel .hdr-link{height:44px;font-size:16px;color:var(--hdr-ink)}
@media(min-width:640px){.hdr-try{display:none}}
@media(min-width:768px){.hdr-menu{display:none}}
.ftr .sf-moon-mark{--mm:30px}
.ftr a.ftr-logo{background:none}
.ftr-col a:hover{color:var(--ftr-ink)}

:root{--ink:#2B2440;--ink-soft:#655E70;--muted:#6E6778;--violet:#7C5CE0;--violet-text:#6745AA;--cream:#FAF9F7;--paper:#FCFBF9;--lilac-soft:#EDE6F5;--lilac:#CDB9FF;--rule:rgba(43,36,64,.12);--display:'Bricolage Grotesque','DM Sans',system-ui,sans-serif;--body:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace}
*{box-sizing:border-box}
body{margin:0;font:17px/1.7 var(--body);color:var(--ink);background:#FAF4EE;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--violet-text);text-underline-offset:3px}
a:hover{color:var(--ink)}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:#fff;padding:8px;z-index:99;border-radius:8px}
main{flex:1;width:100%;max-width:760px;margin:0 auto;padding:40px 20px 72px}
h1{font:600 clamp(2.1rem,5vw,3.1rem)/1.05 var(--display);letter-spacing:-.045em;margin:.3em 0 .35em}
h2{font:600 1.5rem/1.2 var(--display);letter-spacing:-.03em;margin:1.8em 0 .5em}
h3{font:600 1.2rem/1.25 var(--display);letter-spacing:-.02em}
.lede{font-size:1.15rem;color:var(--ink-soft)}
.meta,.tags,.translations{color:var(--muted);font-size:.9rem}
.kicker{margin:14px 0 0;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.breadcrumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:0;font:500 11px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.breadcrumb a{color:var(--muted);text-decoration:none}.breadcrumb a:hover{color:var(--ink)}
.breadcrumb li+li::before{content:"/";margin-right:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.chips a{padding:5px 14px;border-radius:999px;text-decoration:none;background:var(--lilac-soft);color:var(--violet-text);font-size:.9rem;font-weight:500}
.chips a:hover{background:var(--lilac);color:var(--ink)}
.cards{display:grid;gap:20px;margin-top:28px}
.card{display:grid;grid-template-columns:minmax(0,1fr);background:var(--paper);border:1px solid var(--rule);border-radius:24px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.card:hover{box-shadow:0 14px 36px rgba(58,40,112,.10);transform:translateY(-2px)}
.card-media{display:block}.card-img,.cover img,.prose img{display:block;width:100%;height:auto}
.card-body{padding:22px 26px}.card h2{margin:.3em 0;font-size:1.5rem}.card h2 a{text-decoration:none;color:var(--ink)}
.card p{margin:.4em 0}
.cover{margin:24px 0}.cover img{border-radius:24px}
.prose{font-size:1.06rem}
.prose img{border-radius:18px;margin:1.2em 0}
.prose pre{overflow:auto;background:#1C1340;color:#EFE6FF;padding:16px;border-radius:16px;font:.88rem/1.6 var(--mono)}
.prose code{background:var(--lilac-soft);padding:1px 6px;border-radius:6px;font-family:var(--mono);font-size:.9em}.prose pre code{background:none;padding:0}
.prose blockquote{margin:1.2em 0;padding:.2em 1.1em;border-left:3px solid var(--lilac);color:var(--ink-soft)}
.prose table{border-collapse:collapse;width:100%}.prose th,.prose td{border-bottom:1px solid var(--rule);padding:8px;text-align:left}
.evidence,.author-box{background:var(--lilac-soft);border-radius:20px;padding:6px 22px;margin:32px 0}
.author-box h2,.evidence h2{font-size:1.1rem}
.references{font-size:.95rem}.references ol{padding-left:20px}
.notice{margin:14px 0 0;padding:10px 14px;border-radius:14px;background:rgba(43,36,64,.04);color:var(--ink-soft);font-size:.86rem;line-height:1.5}
.takeaways,.toc{background:var(--paper);border:1px solid var(--rule);border-radius:20px;padding:6px 22px 14px;margin:28px 0}
.takeaways h2{font-size:1.1rem}.takeaways ul{margin:.4em 0;padding-left:20px}.takeaways li{margin:.35em 0}
.toc-h{margin:14px 0 6px;font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.toc ol{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-size:.95rem}.toc a{text-decoration:none}.toc a:hover{text-decoration:underline}
.toc-l3{padding-left:18px}
.prose h2,.prose h3,.prose h4{scroll-margin-top:84px}
.section-h{margin-top:2em}
.pagination{display:flex;gap:12px;align-items:center;justify-content:center;margin:36px 0;font-weight:500}
.pagination [aria-current]{font-weight:700;color:var(--ink)}
@media(min-width:700px){.card:has(.card-media){grid-template-columns:260px minmax(0,1fr)}.card-media{height:100%}.card-img{height:100%;object-fit:cover}}