/* First-visit opening shared by every module page. See module-opening.js for the markup contract. */
/* Every page that loads this file takes part in the site's cross-document view transitions, as visual-language.css pages do.
   A page that did not opt in (rocksalt) aborted each arriving transition with an uncaught InvalidStateError. The rule only
   counts once parsed before the page's first frame, so a page that links this file from its body also needs it in <head>. */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}
.fig-opening [data-open]:not(.is-open),
.fig-opening [data-open-line]:not(.is-open){opacity:0;pointer-events:none}
.fig-opening [data-open].is-open:not(.is-title){animation:fig-open-rise .9s cubic-bezier(.2,.7,.2,1) backwards}
.fig-opening [data-open-line].is-open{animation:fig-open-title 1.3s cubic-bezier(.22,.6,.2,1) backwards}
.fig-opening .is-open.is-quick{animation-duration:.4s}
.fig-opening [data-open="title"]{will-change:transform}
@keyframes fig-open-rise{from{opacity:0;translate:0 18px}}
@keyframes fig-open-title{from{opacity:0;filter:blur(14px);translate:0 14px}}

/* Introduction: what the page is about, what the reader is looking at, and how to use it. */
.fig-intro{--fi-ink:var(--fig-ink,#f3f5fc);--fi-muted:var(--fig-muted,#b1bbcf);--fi-accent:var(--fig-intro-accent,#a5beff);--fi-line:var(--fig-intro-line,rgba(165,190,255,.18));
 display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:clamp(28px,3.4vw,56px);row-gap:20px;margin:0;padding:22px 0 0;border-top:1px solid var(--fi-line);color:var(--fi-muted)}
.fig-intro>div{min-width:0}
.fig-intro h2{margin:0 0 9px;font-size:12px;font-weight:500;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--fi-accent)}
.fig-intro p{margin:0;font-size:15px;line-height:1.62;color:var(--fi-muted);max-width:46ch;text-wrap:pretty}
.fig-intro p+p{margin-top:8px}
.fig-intro b,.fig-intro strong{color:var(--fi-ink);font-weight:500}
.fig-intro b:has(.swatch){white-space:nowrap}
.fig-intro .swatch{display:inline-block;width:.62em;height:.62em;border-radius:50%;margin:0 .32em .06em .1em;vertical-align:middle;background:currentColor}
.fig-question{margin:14px 0 0;max-width:34ch;font-size:clamp(19px,1.7vw,24px);line-height:1.38;color:var(--fig-intro-question,#d1defe);font-weight:400;text-wrap:balance}
@media (max-width:900px){.fig-intro{grid-template-columns:minmax(0,1fr);row-gap:18px}.fig-intro p{max-width:62ch}}
@media (max-width:520px){.fig-intro{padding-top:18px}.fig-intro p{font-size:14.5px;line-height:1.6}.fig-question{font-size:18px}}
@media (prefers-reduced-motion:reduce){.fig-opening [data-open],.fig-opening [data-open-line]{animation:none!important;opacity:1!important;transform:none!important}}