/* Shared art band: the canvas fills its band; the poster covers the band until the renderer
   has painted (.is-rendered is added by art/blackhole.js) and stays as the fallback picture. */
.glyph-art{position:relative;overflow:hidden;background:#111314;isolation:isolate}
.glyph-art>canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.glyph-art-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .6s ease}
.glyph-art.is-rendered .glyph-art-poster{opacity:0;pointer-events:none}
.art-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The Motion control. The BUTTON is 44px tall, so its tap area is its own box
   (a pseudo-element hit area does not count as the control's size); the pill
   the reader sees stays small (28px) and is drawn by ::before inside it.
   Its right edge sits on the page's content edge: a band inside the content
   column ends there already (right:0); a full-bleed band (.art-bleed) puts it
   at the foundation's .sg-wrap edge, so it lines up with the header's Start
   free and the text below. */
.glyph-art-motion{position:absolute;right:0;bottom:4px;z-index:3;display:inline-flex;align-items:center;min-height:44px;padding:0 11px;
  font:500 12px/1 var(--sans,system-ui,sans-serif);color:#dcdcd8;background:none;border:0;cursor:pointer}
.glyph-art-motion::before{content:'';position:absolute;inset:8px 0;z-index:-1;background:rgba(17,19,20,.72);
  border:1px solid rgba(238,238,233,.18);border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.glyph-art.art-bleed .glyph-art-motion{right:calc((100% - min(var(--wrap-max,1280px), 100% - 2 * var(--gutter,48px))) / 2)}
.glyph-art-motion:hover{color:#fff}
.glyph-art-motion:hover::before{border-color:rgba(238,238,233,.45)}
.glyph-art-motion:focus-visible{outline:none}
.glyph-art-motion:focus-visible::before{outline:2px solid #c2b5fa;outline-offset:2px}
/* A band on the page's own ground (Made, Product, Together): the drawing fades
   into that ground top and bottom with the Signal band's mask, so there is no
   hard seam. Only the drawing is masked; the Motion button stays whole. */
.glyph-art.art-fade{background:var(--art-ground,#1b1822)}
.glyph-art.art-fade>canvas{-webkit-mask-image:linear-gradient(transparent,#000 11%,#000 84%,transparent);mask-image:linear-gradient(transparent,#000 11%,#000 84%,transparent)}
@media (prefers-reduced-motion:reduce){.glyph-art-poster{transition:none}}