:root{ --grad:linear-gradient(92deg, #9100FF 0.0%, #9610FA 2.6%, #9C19F6 5.3%, #A11FF1 7.9%, #A623EC 10.5%, #AC26E7 13.2%, #B229E2 15.8%, #B72BDD 18.4%, #BD2CD9 21.1%, #C32DD4 23.7%, #C92DCF 26.3%, #CF2CCA 28.9%, #D52BC4 31.6%, #DA2ABF 34.2%, #E127BA 36.8%, #E724B5 39.5%, #ED20B0 42.1%, #F31AAA 44.7%, #F910A5 47.4%, #FF009F 50.0%, #FF1E9B 52.6%, #FF2D96 55.3%, #FF3892 57.9%, #FF418D 60.5%, #FF4988 63.2%, #FF5083 65.8%, #FF567E 68.4%, #FF5D79 71.1%, #FF6273 73.7%, #FF686D 76.3%, #FF6D67 78.9%, #FF7261 81.6%, #FF775A 84.2%, #FF7B52 86.8%, #FF8049 89.5%, #FF843F 92.1%, #FF8933 94.7%, #FF8D23 97.4%, #FF9100 100.0%);
 }

:root{--sp-0:0;--sp-1:2px;--sp-2:4px;--sp-3:6px;--sp-4:8px;--sp-5:12px;--sp-6:16px;--sp-7:20px;--sp-8:24px;--sp-9:32px;--sp-10:40px;--sp-11:48px;--sp-12:64px;--stack-tight:6px;--stack-close:12px;--stack-block:24px;--e-low:0 1px 4px -1px var(--shadow);--e-card:0 8px 20px -10px var(--shadow);--e-panel:0 20px 48px -20px var(--shadow);--e-float:0 40px 90px -40px var(--shadow);--measure-head:16ch;--measure-display:24ch;--measure-blurb:32ch;--measure-lede:52ch;--measure-body:68ch;--r-1:4px;--r-2:8px;--r-3:12px;--r-4:16px;--r-5:24px;--r-pill:999px;--fs-hero:clamp(44px,7vw,84px);--fs-pagetitle:clamp(32px,4.5vw,52px);--fs-section:clamp(28px,3.2vw,40px);--fs-subsection:clamp(22px,2.2vw,26px);--fs-xs:12px;--fs-sm:13px;--fs-base:14px;--fs-md:15px;--fs-lg:16px;--fs-xl:18px;--fs-2xl:20px;--fs-3xl:22px;--fs-4xl:26px;--fs-5xl:28px;--lh-solid:1;--lh-tight:1.1;--lh-snug:1.25;--lh-normal:1.5;--lh-relaxed:1.6;--lh-loose:2;--tr-hero:-.035em;--tr-display:-.02em;--tr-text:-.01em;--tr-mono:.05em;--tr-label:.08em;--tr-eyebrow:.12em;--tr-wide:.22em;--fw-regular:400;--fw-medium:500;--fw-semi:600;--fw-bold:700;--fw-heavy:800;--fw-black:900;--op-mute:.6;--op-soft:.75;--op-near:.9;--dur-control:.15s;--dur-panel:.3s;--dur-reveal:.6s;--dur-stagger:.9s;--ease-standard:cubic-bezier(.65,0,.35,1);--ease-decelerate:cubic-bezier(.2,.7,.2,1);--shadow:rgba(0,0,0,.28);}

:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 14' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 7h14M9.5 1.5L15 7l-5.5 5.5'/%3E%3C/svg%3E");--star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23000'%3E%3Cpolygon points='10.00,0.00 12.25,6.91 19.51,6.91 13.63,11.18 15.88,18.09 10.00,13.82 4.12,18.09 6.37,11.18 0.49,6.91 7.75,6.91'/%3E%3C/svg%3E");--copy:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='7' y='7' width='11' height='11' rx='2'/%3E%3Cpath d='M13 4H4a2 2 0 0 0-2 2v9'/%3E%3C/svg%3E");
  --dl:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 2v11M5.5 8.5L10 13l4.5-4.5M2.5 16.5h15'/%3E%3C/svg%3E");--pinterest:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 0C5.373 0 0 5.372 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.631-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z'/%3E%3C/svg%3E");}

/* Anchor text for a link whose visible content is a COLOR, not a word. Visually
   hidden rather than an aria-label: an aria-label would override the text anyway,
   names the link for a screen reader, and says nothing at all to search. Lives in
   the shared block because both the color pages and the marketing pages link
   swatches. */
.vh{position:absolute;width:1px;height:1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;}

/* .pill and .upbtn are the small button under two older names, kept because
   they read well in the markup — declared here so they cannot drift again. */
/* MIN-height and a wrappable label. A fixed height with nowrap cannot fail
   gracefully -- a long label just grows past the viewport and takes the page's
   horizontal scroll with it. Single-line buttons are unchanged. */
.btn,.pill,.upbtn,.p-btn,.p-ghost{display:inline-flex;align-items:center;justify-content:center;
  gap:var(--sp-4);min-height:52px;padding:var(--sp-3) var(--sp-8);border-radius:var(--r-3);
  font-family:"Red Hat Text","Red Hat Text Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;line-height:1.5;letter-spacing:-.01em;font-size:var(--fs-lg);
  background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-line,transparent);
  cursor:pointer;text-decoration:none;text-align:center;text-wrap:balance;
  transition:transform var(--dur-control) ease,background var(--dur-control) ease,
    border-color var(--dur-control) ease;}

/* The border is on the base, not on the outlined variant, so a filled button and
   an outlined one beside it are the same height. */
.pill,.upbtn,.btn.sm{min-height:40px;padding:var(--sp-2) var(--sp-6);font-size:var(--fs-base);}

.btn.lg{min-height:58px;padding:var(--sp-3) var(--sp-9);font-size:var(--fs-lg);}

/* ONE hover for the whole site. The lift works on any ground, including the
   corpus's per-page palettes; the color shift is optional and comes from the
   context that has a second color to shift to. */
.btn:hover,.pill:hover,.upbtn:hover,.p-btn:hover,.p-ghost:hover{transform:translateY(-1px);
  background:var(--btn-bg-hover,var(--btn-bg));}

.btn:active,.pill:active,.upbtn:active,.p-btn:active,.p-ghost:active{transform:none;}

/* Two-tone, so one ring is visible on every ground the site draws — a light
   button on a dark band and a dark button on white both keep a visible edge
   without the ring needing to know the page's palette. */
.btn:focus-visible,.pill:focus-visible,.upbtn:focus-visible,
.p-btn:focus-visible,.p-ghost:focus-visible,
.iconbtn:focus-visible,.tbtn:focus-visible,.navtoggle:focus-visible,
.cchip:focus-visible,.sib:focus-visible{outline:none;
  box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px #101014;}

/* A square control that holds an icon and nothing else. .tbtn and .navtoggle are
   it under their existing names — aliased in the rule rather than added to the
   markup of 4,700 pages, and named here so the geometry has one home. */
.iconbtn,.tbtn,.navtoggle{width:40px;height:40px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-3);border:1px solid var(--btn-line,transparent);
  background:var(--btn-bg);color:var(--btn-ink);cursor:pointer;
  transition:color var(--dur-control) ease,background var(--dur-control) ease;}

.iconbtn:hover,.tbtn:hover,.navtoggle:hover{color:var(--btn-ink-hover,var(--btn-ink));
  background:var(--btn-bg-hover,var(--btn-bg));}

.iconbtn svg,.tbtn svg,.navtoggle svg{width:18px;height:18px;}

/* THE CHIP: a value you take (.cchip) or a sibling you go to (.sib). Named for
   what they are rather than given a generic .chip, which marketing already uses
   for a non-interactive tag. It hovers like everything
   else — .cchip had no hover at all, so the one control on the page whose whole
   purpose is being clicked gave no sign it could be. */
.cchip,.sib{display:inline-flex;align-items:center;gap:var(--sp-3);
  padding:var(--sp-4) var(--sp-6);border-radius:var(--r-pill);
  font-family:"Red Hat Text","Red Hat Text Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:700;line-height:1.5;letter-spacing:-.01em;font-size:var(--fs-base);
  background:var(--btn-bg);color:var(--btn-ink);
  border:1px solid var(--btn-line,transparent);
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:transform var(--dur-control) ease,background var(--dur-control) ease;}

.cchip:hover,.sib:hover{transform:translateY(-1px);background:var(--btn-bg-hover,var(--btn-bg));}

.cchip:active,.sib:active{transform:none;}

/* The drawn arrow. `.go` is explicit rather than automatic on .btn so a button
   that is not a departure does not grow one.
   Spacing is the arrow's own margin rather than the control's gap, so ONE rule
   serves a flex button and an inline "How ART works" link alike. */
.btn.go,.pill.go,.upbtn.go,.p-btn.go{gap:0;}

/* the pinned step on the tints & shades band */
.pin::after{content:"";display:inline-block;width:.7em;height:.7em;
  margin-left:.3em;vertical-align:-.02em;background:currentColor;
  -webkit-mask:var(--star) center/contain no-repeat;
  mask:var(--star) center/contain no-repeat;}

/* the same arrow, pointing back */
.goback::before{content:"";display:inline-block;width:.9em;height:.8em;flex:none;
  margin-right:.4em;vertical-align:-.02em;background:currentColor;transform:scaleX(-1);
  -webkit-mask:var(--arrow) center/contain no-repeat;
  mask:var(--arrow) center/contain no-repeat;}

/* An icon button whose glyph is a mask rather than an inline svg — the same
   family the arrow and the star come from, so a control's icon takes the
   control's own color and size. */
.iconbtn .i{width:18px;height:18px;background:currentColor;}

.i-dl{-webkit-mask:var(--dl) center/contain no-repeat;
  mask:var(--dl) center/contain no-repeat;}

.i-pinterest{-webkit-mask:var(--pinterest) center/contain no-repeat;
  mask:var(--pinterest) center/contain no-repeat;}

/* the copy affordance */
.copyglyph::after{content:"";display:inline-block;width:.85em;height:.85em;
  margin-left:.35em;vertical-align:-.1em;background:currentColor;
  -webkit-mask:var(--copy) center/contain no-repeat;
  mask:var(--copy) center/contain no-repeat;}

.go::after{content:"";display:inline-block;width:.9em;height:.8em;flex:none;
  margin-left:.4em;vertical-align:-.02em;background:currentColor;
  -webkit-mask:var(--arrow) center/contain no-repeat;
  mask:var(--arrow) center/contain no-repeat;}

@media (prefers-reduced-motion:reduce){
  .btn,.pill,.upbtn,.cchip,.sib,.iconbtn,.tbtn,.navtoggle{transition:none;}
  .btn:hover,.pill:hover,.upbtn:hover,.cchip:hover,.sib:hover{transform:none;}
}

.field,.capture input,.acctform input{height:52px;padding:0 var(--sp-6);
  border-radius:var(--r-3);border:1px solid var(--field-line,var(--line));
  background:var(--field-bg,transparent);color:var(--field-ink,inherit);
  font-family:"Red Hat Text","Red Hat Text Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.6;letter-spacing:-.01em;font-size:var(--fs-lg);
  transition:border-color var(--dur-control) ease;}

.field::placeholder,.capture input::placeholder,.acctform input::placeholder{
  color:var(--field-mut);opacity:1;}

/* A field that WRAPS a button — the two share one edge, so the border is on the
   wrapper and the input inside carries none. */
.fieldset{display:flex;height:52px;border-radius:var(--r-3);overflow:hidden;
  border:1px solid var(--field-line,var(--line));background:var(--field-bg,transparent);}

.fieldset.sm{height:40px;}

/* A field sits BESIDE its button, so it takes that button's height —
   .acctform pairs with .btn.lg, and 52 against 58 left a six-pixel step
   down the shared edge. */
.field.lg,.acctform input,.fieldset.lg{height:58px;}

.fieldset input{flex:1;min-width:0;border:0;outline:0;background:transparent;
  padding:0 var(--sp-6);font-family:"Red Hat Text","Red Hat Text Fallback",-apple-system,BlinkMacSystemFont,sans-serif;font-weight:400;line-height:1.6;letter-spacing:-.01em;font-size:var(--fs-lg);
  color:var(--field-ink,inherit);}

.fieldset input::placeholder{color:var(--field-mut);opacity:1;}

/* The same ring the controls use — a field is a control, and it was the one
   kind that had no focus state at all. */
.field:focus-visible,.capture input:focus-visible,.acctform input:focus-visible,
.fieldset:focus-within{outline:none;box-shadow:0 0 0 2px #FFFFFF,0 0 0 4px #101014;}

/* Forced colors -- Windows High Contrast and any other forced-colors context --
   paints box-shadow as none. Every focus indicator above is a box-shadow drawn
   after outline:none, so in that mode these controls had NO focus indicator at
   all, which is the one state a keyboard user cannot work without. The outline
   comes back in CanvasText, the only ink that mode guarantees is visible
   against whatever it paints behind. Emitted here rather than into
   assets/tokens.css by hand, because this file generates that one AND the
   corpus stylesheet the color pages link -- a hand edit to either output is
   erased by the next build. */
@media (forced-colors: active){
.btn:focus-visible,.pill:focus-visible,.upbtn:focus-visible,
.p-btn:focus-visible,.p-ghost:focus-visible,
.iconbtn:focus-visible,.tbtn:focus-visible,.navtoggle:focus-visible,
.cchip:focus-visible,.sib:focus-visible,
.field:focus-visible,.capture input:focus-visible,.acctform input:focus-visible,
.fieldset:focus-within{outline:2px solid CanvasText;outline-offset:2px;}
}

/* THE PROSE LINK. The underline is drawn at 45% of the ink so it sits under the
   words rather than fighting them, and goes solid on hover — the mark is always
   there, and the response moves nothing on the page. */
p a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),li a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.capsule a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.sub a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.genline a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.artnote a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.mxcap a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.cite a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.cap-cite a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.proflink:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.attr a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.fine a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.toollink a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.simcap a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.crumb a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.toc a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.fjump a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.lnk:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab),.beta-bar a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab){text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:2px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
  transition:text-decoration-color var(--dur-control) ease;}

p a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,li a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.capsule a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.sub a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.genline a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.artnote a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.mxcap a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.cite a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.cap-cite a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.proflink:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.attr a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.fine a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.toollink a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.simcap a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.crumb a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.toc a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.fjump a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.lnk:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover,.beta-bar a:not(.btn):not(.pill):not(.upbtn):not(.cchip):not(.sib):not(.mobcta):not(.p-btn):not(.p-ghost):not(.iconbtn):not(.btab):hover{text-decoration-color:currentColor;}

/* THE DESTINATION LINK. */
.mobmenu a,.mnm,.mhex{text-decoration:none;transition:color var(--dur-control) ease,
  background var(--dur-control) ease;}

.mobmenu a:hover,.mnm:hover,.mhex:hover{text-decoration:underline;text-underline-offset:2px;}

.mobmenu a:hover{color:var(--ink);background:var(--bg2);}

.logo:hover{opacity:var(--op-near);}

@font-face{font-family:"Red Hat Display";src:url(/assets/fonts/RedHatDisplay.woff2)format("woff2");font-weight:300 900;font-display:swap;}

@font-face{font-family:"Red Hat Text";src:url(/assets/fonts/RedHatText.woff2)format("woff2");font-weight:300 700;font-display:swap;}

@font-face{font-family:"Red Hat Mono";src:url(/assets/fonts/RedHatMono.woff2)format("woff2");font-weight:300 700;font-display:swap;}

/* Fallback faces: metrics derived by infra/font_fallback_metrics.mjs (#467). */
@font-face{font-family:"Red Hat Display Fallback";src:local("Arial");size-adjust:122.11%;ascent-override:83.37%;descent-override:24.98%;line-gap-override:0%;}

@font-face{font-family:"Red Hat Text Fallback";src:local("Arial");size-adjust:123.02%;ascent-override:82.75%;descent-override:24.79%;line-gap-override:0%;}

@font-face{font-family:"Red Hat Mono Fallback";src:local("Courier New");size-adjust:99.98%;ascent-override:101.82%;descent-override:30.5%;line-gap-override:0%;}

*{box-sizing:border-box;}

:root{--shadow:rgba(0,0,0,.60);}

h1,h2,h3{font-family:"Red Hat Display",sans-serif;letter-spacing:var(--tr-display);margin:0;}

a{color:inherit;text-decoration:none;}

.mono{font-family:"Red Hat Mono",monospace;}

.nb{white-space:nowrap;}

.psw{display:inline-block;width:.72em;height:.72em;border-radius:var(--r-1);margin-right:.32em;vertical-align:-.04em;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--band-ink,#000) 25%, transparent);}

.wrap{max-width:1120px;margin:0 auto;padding:0 var(--sp-8);}

/* ONE measure, matching the marketing site's --maxw. The bands used to narrow
   to 880 while the site ran 1120 and the hub hero overrode back to 1120, so the
   corpus carried three widths (Jeff spotted it in preview). Prose blocks set
   their own ch-based limits, which is what should hold a reading measure --
   not the page frame. */
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:#010400;color:#FCFCFC;
  padding:var(--sp-5) var(--sp-6);border-radius:0 0 10px 0;font-weight:var(--fw-bold);}

.skip:focus{left:0;}

/* Page load-in. The marketing site does this with .reveal + an IntersectionObserver
   in site.js; a color page ships no JavaScript, so the same motion is expressed as a
   CSS animation on #main -- same 18px rise, same .6s, same easing curve, taken from
   site.css rather than newly chosen.

   THE HIDDEN STATE LIVES ONLY IN THE KEYFRAME, deliberately. The obvious spelling is
   `#main{opacity:0}
` plus an animation to 1, and under the reduced-motion rule below
   -- `animation:none!important` -- that leaves every color page permanently blank.
   With the start state inside @keyframes, killing the animation renders #main at its
   natural opacity, so the accessibility rule cannot turn the page off.

   #main is safe to transform: .gauge and #toast are the only position:fixed elements
   and both are emitted after </main>, so nothing inside it gets re-anchored while the
   animation runs. */
@keyframes reveal{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}

#main{animation:reveal .6s cubic-bezier(.22,.61,.36,1) both;}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  a.sw:hover,button.sw:hover{transform:none;}}

a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--band-ink,var(--sub-ink,#000));outline-offset:2px;}


/* ── site chrome — rules transplanted VERBATIM from site.css/brand.css; only the
      token VALUES (set inline on the elements) come from the viewed seed's system ── */
/* STICKY, ON BOTH HALVES. A sticky element can only travel inside its parent's
   box, and chrome_inject mounts the nav into <div id="site-nav"> — 67px tall,
   exactly the nav — so on all fifteen marketing pages the header had nowhere to
   go and did not stick, while the corpus, where the nav is a direct child of
   body, did. Whichever element IS the body's child is the one that sticks.
   The gradient rides along at the top instead of scrolling away above it
   (Jeff 2026-07-28). */
.gradbar{position:sticky;top:0;z-index:41;}

#site-nav{position:sticky;top:6px;z-index:40;}

#site-nav nav.site{position:static;}

.gradbar{height:6px;background:var(--grad);}

/* Chord mark. The colors were inline on every <i> until now, which meant the mark
   was styled from the MARKUP rather than from here -- so this transplanted block set
   the dots' size and nothing could restyle their color without editing the emitted
   HTML. brand.css hit the identical problem on the marketing side and is the surface
   these rules are transplanted from, so the two now agree: primitives bound once,
   positions referencing them. */
:root{--amethyst:#9100FF;--orange:#FF9100;--rose:#FF009F;}

.dots{display:inline-flex; gap:var(--sp-2);}

.dots i{width:11px; height:11px; border-radius:50%; display:block; flex:none;}

.dots i:nth-child(1){background:var(--amethyst);}

.dots i:nth-child(2){background:var(--orange);}

.dots i:nth-child(3){background:var(--rose);}

nav.site{position:sticky;top:6px;z-index:40;background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}

nav.site .inner{display:flex;align-items:center;justify-content:space-between;height:66px;gap:var(--sp-8);}

.logo{display:flex;align-items:center;gap:var(--sp-4);flex:none;color:var(--ink);
  transition:opacity var(--dur-control) ease;}

.word{font-family:"Red Hat Display";font-weight:var(--fw-black);font-size:var(--fs-xl);letter-spacing:var(--tr-display);}

.navlinks{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto;}

.navlinks a{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-2);font-weight:var(--fw-semi);font-size:var(--fs-md);color:var(--ink2);transition:.15s;}

.navlinks a:hover{color:var(--ink);background:var(--bg2);}

.navlinks a.active{color:var(--ink);}

.navdrop{position:relative;}

.navdrop-btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-4) var(--sp-5);border-radius:var(--r-2);font-weight:var(--fw-semi);font-size:var(--fs-md);color:var(--ink2);background:none;border:0;cursor:pointer;font-family:inherit;transition:.15s;}

.navdrop-btn:hover,.navdrop-btn.active{color:var(--ink);background:var(--bg2);}

.navdrop-btn .caret{opacity:var(--op-mute);transition:transform .18s;}

.navdrop-menu{position:absolute;top:calc(100% + 7px);left:0;min-width:176px;display:flex;flex-direction:column;gap:var(--sp-1);padding:var(--sp-3);background:var(--bg);border:1px solid var(--line);border-radius:var(--r-3);box-shadow:var(--e-panel);z-index:50;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s;}

.navdrop-menu::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px;}

.navdrop[data-open="true"] .navdrop-menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .16s ease,transform .16s ease;}

.navdrop[data-open="true"] .navdrop-btn .caret{transform:rotate(180deg);}

@media(hover:hover){
  .navdrop:hover .navdrop-menu{opacity:1;visibility:visible;transform:translateY(0);transition:opacity .16s ease,transform .16s ease;}
  .navdrop:hover .navdrop-btn .caret{transform:rotate(180deg);}
}

.navdrop-menu a{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-2);font-weight:var(--fw-semi);font-size:var(--fs-base);color:var(--ink2);white-space:nowrap;transition:.15s;}

.navdrop-menu a:hover,.navdrop-menu a.active{color:var(--ink);background:var(--bg2);}

.nav-actions{display:flex;align-items:center;gap:var(--sp-4);flex:none;}

/* Geometry, hover and focus come from the shared controls block; only the
   COLORS are the corpus's to set. These three rules used to restate the whole
   control and had drifted 4px of radius away from the identical buttons on the
   marketing pages. */
.pill{--btn-bg:var(--brand);--btn-ink:var(--bg);--btn-bg-hover:var(--brand-2);}

.tbtn,.navtoggle{--btn-bg:var(--bg);--btn-ink:var(--ink2);--btn-line:var(--line);--btn-ink-hover:var(--ink);}

svg.ic{display:inline-block;vertical-align:middle;}

.navtoggle{display:none;}

.mobmenu{display:none;flex-direction:column;gap:var(--sp-1);padding:var(--sp-4) var(--sp-7) var(--sp-6);border-top:1px solid var(--line);background:var(--bg);}

.mobmenu a{padding:var(--sp-5) var(--sp-4);border-radius:var(--r-3);font-weight:var(--fw-semi);font-size:var(--fs-lg);color:var(--ink2);}

.mobmenu a.active{color:var(--ink);background:var(--bg2);}

/* A button that happens to sit in the menu list — button radius, not the row's. */
.mobmenu a.mobcta{margin-top:8px;background:var(--ink);color:var(--bg);text-align:center;font-weight:var(--fw-bold);border-radius:var(--r-3);justify-content:center;}

.mobmenu-label{font-size:var(--fs-xs);font-weight:var(--fw-heavy);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--muted);padding:var(--sp-5) var(--sp-4) var(--sp-2);}

.mobmenu-label:first-child{padding-top:2px;}

@media (max-width:920px){ .navlinks{display:none;} .navtoggle{display:inline-flex;} body.menu-open .mobmenu{display:flex;}
  .footgrid{grid-template-columns:1fr 1fr;gap:var(--sp-8);} .footbrand{grid-column:1 / -1;} }

@media (max-width:560px){ nav.site .nav-actions .pill{display:none;} .wrap{padding:0 var(--sp-6);} .footgrid{grid-template-columns:1fr;} }

.subnav{border-bottom:1px solid var(--sub-line);}

.subnav .inner{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);height:52px;}

/* NARROW: the crumb and the field are two rows, not one. Held in a single
   52px row they compete for the same width, and the crumb — which has
   overflow:hidden so it cannot push — gets clipped mid-word: "The Aqu"
   ends where the field begins, which reads as the two overlapping
   (Jeff 2026-07-28). Stacked, each gets the full width and the row grows
   to fit instead of cropping its contents. */
@media (max-width:720px){
  /* the VERTICAL padding only — the shorthand's `0` was overwriting the
     gutter .wrap sets, so the stacked row bled to both screen edges */
  .subnav .inner{flex-direction:column;align-items:stretch;height:auto;
    gap:var(--stack-close);padding-top:var(--stack-close);
    padding-bottom:var(--stack-close);}
  .subnav .hexinput{width:100%;}
  .crumb{overflow:visible;white-space:normal;}
}

.crumb{font-size:var(--fs-base);font-weight:var(--fw-semi);color:var(--sub-ink2);white-space:nowrap;overflow:hidden;}

/* mark and hover come from the shared link block; color is the band's. */
.crumb a{color:var(--sub-ink2);}

.crumb a:hover{color:var(--sub-ink);}

.crumb .sep{color:var(--sub-ink2);margin:0 var(--sp-3);font-weight:var(--fw-regular);}

.crumb .here{color:var(--sub-ink);font-weight:var(--fw-bold);}

.hexinput input{border:0;outline:0;background:transparent;color:var(--sub-ink);font-family:"Red Hat Text";font-size:var(--fs-base);font-weight:var(--fw-regular);padding:0 var(--sp-5);width:170px;}

.hexinput input::placeholder{color:var(--sub-mut);}


/* ── the color, banded ── */
.band{padding:var(--sp-12) 0;}

.blabel{font-family:"Red Hat Mono";font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--band-mut);margin-bottom:var(--stack-tight);}

.band h2{font-size:var(--fs-5xl);font-weight:var(--fw-black);margin-bottom:var(--stack-close);}

.band .sub{font-size:var(--fs-lg);color:var(--band-mut);margin:0 0 var(--stack-block);max-width:var(--measure-body);}

.hero{min-height:56vh;display:flex;flex-direction:column;justify-content:center;position:relative;}

/* The hero DRAWS its bottom edge. A near-white seed meets the near-white 50
   band at about 1.01:1, so on those pages the hero simply had no bottom -- it
   bled into the section below (Jeff 2026-07-27). Depth rather than a rule: a
   line would read as a divider on the 92% of pages that never had the problem,
   while a shadow is only visible where the two surfaces are already close. */
.hero::after{content:"";position:absolute;left:0;right:0;top:100%;height:22px;
  background:linear-gradient(to bottom,rgba(0,0,0,0.07),rgba(0,0,0,0));
  pointer-events:none;z-index:1;}

.hero h1{font-size:clamp(44px,8vw,84px);font-weight:var(--fw-black);line-height:var(--lh-solid);}

.hero .hcard{width:fit-content;max-width:100%;border-radius:var(--r-5);padding:clamp(26px,4.5vw,42px);}

.hero h1 .desc{display:block;font-size:var(--fs-5xl);font-weight:var(--fw-bold);color:var(--band-mut-lg,var(--band-mut));margin-top:10px;letter-spacing:var(--tr-display);}

.hero .capsule{margin-top:26px;max-width:var(--measure-body);font-size:var(--fs-lg);line-height:var(--lh-normal);border-left:3px solid var(--band-ink);padding-left:16px;}

.hero .cap-tag{display:block;font-family:"Red Hat Mono";font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--band-mut);margin-bottom:5px;}

.chips{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-top:24px;}

/* A hex you paste: chip geometry from the shared block, the mono "value" role
   because that is what it is, and colors from the band. */
.cchip{--btn-bg:var(--band-card);--btn-ink:var(--band-card-ink);
  --btn-bg-hover:color-mix(in srgb,var(--band-card-ink) 8%,var(--band-card));
  font-family:"Red Hat Mono",monospace;font-weight:var(--fw-semi);}

.toc{margin-top:30px;font-family:"Red Hat Mono";font-size:var(--fs-xs);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;color:var(--band-mut);}

/* mark and hover come from the shared link block; color is the band's. */
.toc a{color:var(--band-ink);}

.vgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4);}

.v.teach{grid-column:1 / -1;display:flex;justify-content:space-between;gap:var(--sp-5);background:transparent;
  border:1px dashed var(--band-line);border-radius:var(--r-3);padding:var(--sp-5) var(--sp-5);margin-top:9px;color:var(--band-ink);}

.v.teach b{font-weight:var(--fw-semi);font-family:"Red Hat Text";font-size:var(--fs-base);}

.v.teach em{font-style:normal;font-weight:var(--fw-bold);}



.editor{border-radius:var(--r-5);overflow:hidden;box-shadow:var(--e-panel);}

.edbar{display:flex;align-items:center;gap:7px;padding:12px 16px;background:var(--ed-chrome);}

.edbar i{width:11px;height:11px;border-radius:50%;display:block;flex:none;}

.edtitle{margin-left:8px;font-size:13px;font-weight:600;color:var(--ed-prop);}

/* The editor's two controls. Both were declared twice, a dozen lines apart, and
   neither had a hover — the copy button is the whole point of the block. */
.edcopy{font-family:"Red Hat Mono";font-size:var(--fs-xs);font-weight:var(--fw-semi);
  background:transparent;color:var(--ed-prop);border:1px solid var(--ed-pun);
  border-radius:var(--r-2);padding:var(--sp-3) var(--sp-5);margin-left:var(--sp-4);
  cursor:pointer;transition:background var(--dur-control) ease,color var(--dur-control) ease;}

.edcopy:hover,.edmode:hover{background:var(--ed-val);color:var(--ed-bg);border-color:var(--ed-val);}

.edbody{background:var(--ed-bg);padding:16px 8px 14px;font-family:"Red Hat Mono";font-size:14px;line-height:1.5;letter-spacing:0;}

/* 2px of vertical padding, and it is the whole of WCAG 2.2 target size here.
   14px text at line-height 1.5 computes to a 21px row; nine of these rows are
   copy-to-clipboard buttons, they stack flush, and axe measured the undisturbed
   safe circle at 18px against a required 24. 21 + 2 + 2 = 25px clears the
   target and opens the spacing at the same time, because the neighbours move
   apart by the same edit.
   Applied to EVERY .ln rather than only the interactive ones: this is a code
   listing, and a block whose clickable lines are taller than its inert ones
   reads as broken. The rows that are not targets cost nothing by matching
  . */
.ln{display:block;width:100%;text-align:left;background:transparent;border:0;color:var(--ed-pun);
  font:inherit;padding:2px 44px 2px 14px;border-radius:var(--r-2);cursor:default;white-space:pre-wrap;position:relative;}

.ln[data-copy],a.ln{cursor:pointer;}

/* hover = a full recolor in the seed's own value color; the text flips to the
   editor bg — AA is guaranteed by symmetry with the value-as-text gate */
.ln[data-copy]:hover,a.ln:hover{background:var(--ed-val);color:var(--ed-bg);}

.ln[data-copy]:hover span,a.ln:hover span{color:var(--ed-bg);}

/* drawn — no Red Hat face carries U+29C9 */
.ln[data-copy]::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--copy) center/contain no-repeat;mask:var(--copy) center/contain no-repeat;position:absolute;right:14px;top:0;opacity:0;}

.ln[data-copy]:hover::after{opacity:1;}

.tk-sel{color:var(--ed-sel);font-weight:600;}

.tk-prop{color:var(--ed-prop);}

.tk-val{color:var(--ed-val);font-weight:600;}

.tk-com{color:var(--ed-com);}

.edmode{margin-left:auto;width:28px;height:28px;display:inline-flex;align-items:center;
  justify-content:center;background:transparent;color:var(--ed-prop);
  border:1px solid var(--ed-pun);border-radius:var(--r-2);cursor:pointer;padding:0;
  transition:background var(--dur-control) ease,color var(--dur-control) ease;}

.edmode svg{width:15px;height:15px;}


#b-a11y .blabel,#b-a11y .sub,#b-a11y .mxcap{color:var(--band-ink);}

#b-a11y .mxcap a{color:var(--band-ink);font-weight:var(--fw-bold);}

/* STRIPS, one per surface — replacing the desktop lattice and the separate phone
   list (Jeff 2026-07-27). The row IS the surface, so absence is the color
   showing through rather than a grey cell that could mean either thing.
   Gutters are sized to hold a 12px label: the first pass used 8-11px and the
   build's text floor rejected it, correctly. */
.mxwrap{background:#FFFFFF;border-radius:var(--r-5);padding:var(--sp-6) var(--sp-6) var(--sp-6);
  box-shadow:var(--e-card);}

.mxrow{display:grid;grid-template-columns:38px repeat(15,minmax(0,1fr)) 38px;
  align-items:stretch;gap:0;margin-bottom:4px;}

.mxhead{margin-bottom:8px;}

.mxh{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mx-ink);text-align:center;align-self:end;}

.mxlbl{font-size:var(--fs-xs);font-weight:var(--fw-bold);color:var(--mx-ink);display:flex;align-items:center;justify-content:center;}

/* The strip draws its own edge. W and 50 are near-white and the card is white,
   so without this the lightest surfaces simply vanish — the same failure as the
   hero seam and the print swatches, at the same alpha. Top and bottom on every
   cell, sides only on the ends, so the outline is continuous with no internal
   rules cutting the strip into boxes. */
/* SUB-PIXEL SEAMS. The fifteen columns are 1fr of a fluid container, so they
   land on fractional widths (40.797, 40.805...). On a 2x display each cell
   antialiases its own edge, and where two half-covered device pixels meet, the
   white card shows through as a faint vertical line — on some boundaries and
   not others, depending where the fraction falls, which is what read as
   inconsistent (Jeff 2026-07-28). The layout has no gap; the seam is painting,
   not spacing. Each cell bleeds one pixel to the right in its OWN color, under
   its neighbour, so there is nothing for the card to show through. Not the last
   cell, whose right edge is the strip's rounded end. */
.mxc{position:relative;}

.mxc:not(.re)::after{content:"";position:absolute;top:0;bottom:0;right:-1px;width:1px;
  background:inherit;}

.mxc{text-align:center;font-size:var(--fs-sm);font-weight:var(--fw-semi);line-height:40px;height:40px;
  box-shadow:inset 0 1px 0 rgba(0,0,0,0.07),inset 0 -1px 0 rgba(0,0,0,0.07);}

.mxc.le{border-radius:var(--r-2) 0 0 9px;
  box-shadow:inset 1px 0 0 rgba(0,0,0,0.07),inset 0 1px 0 rgba(0,0,0,0.07),inset 0 -1px 0 rgba(0,0,0,0.07);}

.mxc.re{border-radius:0 9px 9px 0;
  box-shadow:inset -1px 0 0 rgba(0,0,0,0.07),inset 0 1px 0 rgba(0,0,0,0.07),inset 0 -1px 0 rgba(0,0,0,0.07);}

.mtable{width:100%;min-width:900px;border-collapse:collapse;table-layout:fixed;}

.mtable .cw-sw{width:66px;}

.mtable .cw-hex{width:106px;}

/* 160, not 132: TEMPERATURE + its sort arrows measure 136px and the cell's
   own padding takes 24 more, so the header
   overflowed its own column and the gutter to READABLE TEXT vanished — the
   padding is the first thing an overflowing cell spends (Jeff 2026-07-28). */
.mtable .cw-temp{width:160px;}

.mtable .cw-aa{width:172px;}

.mtable .cw-press{width:196px;}

.mtable td,.mtable th{overflow:hidden;text-overflow:ellipsis;}

/* NARROW: the table KEEPS every column and scrolls, rather than dropping some.
   It used to hide by POSITION — th:nth-child(3) — and zero the width of two
   named columns. That rule was written against the leaf's five-column table and
   also ran on the family pages, which carry a sixth (Temperature) whenever the
   family spans warm and cool. Measured at 375px on /color/greens: Hex hid
   correctly, but Temperature and Readable-text collapsed to ZERO width with
   their cells still rendering, and Name was crushed to 21px — four of six
   columns unreadable, and the two zero-width ones invisible rather than hidden
   (Jeff 2026-07-28). Six columns of distinct data do not fit a phone; the honest
   answer is to let the reader reach them, not to guess which two to drop. */
.mscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}

@media (max-width:720px){
  .mtable td,.mtable th{padding:var(--sp-4) var(--sp-3);}
}

.mtable th{text-align:left;font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--band-mut);padding:0 var(--sp-6) var(--sp-3) var(--sp-4);border-bottom:1px solid var(--band-line);}

.mtable th.msort button{all:unset;cursor:pointer;display:inline-flex;align-items:center;white-space:nowrap;gap:var(--sp-2);padding:var(--sp-2) var(--sp-3);margin-left:-7px;border-radius:var(--r-2);font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;}

.mtable th.msort button:hover{background:var(--band-card);color:var(--band-ink);}

.mtable th.msort i{font-style:normal;opacity:var(--op-mute);letter-spacing:-1px;}

.mtable th.msort i::before{content:"▲▼";}

.mtable th[aria-sort="ascending"] i::before{content:"▲";}

.mtable th[aria-sort="descending"] i::before{content:"▼";}

.mtable th[aria-sort="ascending"] i,.mtable th[aria-sort="descending"] i{opacity:1;letter-spacing:normal;}

.mtable th[aria-sort="ascending"] button,.mtable th[aria-sort="descending"] button{color:var(--band-ink);}

.mtable td{padding:var(--sp-4) var(--sp-4);border-top:1px solid var(--band-line);vertical-align:middle;font-size:var(--fs-base);}

/* The swatch is the third link in the row, and the only one with no text to
   underline — so it answers with a ring instead, and the row responds
   wherever the pointer lands rather than on two cells of three. */
.msw{display:block;width:48px;height:32px;border-radius:var(--r-2);
  transition:box-shadow var(--dur-control) ease;}

.msw:hover{box-shadow:0 0 0 2px var(--band-card),0 0 0 4px var(--band-ink);}

.mnm{color:var(--band-ink);font-weight:var(--fw-bold);}

/* name and hex are the SAME link twice in one row — the hex used to carry a
   permanent underline the name did not, so a row disagreed with itself. */
/* the hex is DATA, not a third route to the page the row already links twice.
   Three links to one target in one row is dilution with nothing in it for a
   reader, and it is 190 of a family page's 636 links. */
.mhex{color:var(--band-mut);font-size:var(--fs-sm);}

/* .vh (anchor text for a link whose visible content is a color) moved to the
   shared token block — the marketing pages need it too, now that the ART and
   About swatches link, and it was already defined twice here. */
.tpill{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);color:var(--band-mut);border:1px solid var(--band-line);border-radius:var(--r-pill);padding:var(--sp-1) var(--sp-4);white-space:nowrap;}

.pdot{width:11px;height:11px;border-radius:50%;border:1px solid var(--band-line);}

.pdot.white{background:#FFFFFF;}
.pdot.black{background:#0A0A0A;}

.tpill.ok,.tpill.warn,.tpill.bad{border-color:transparent;background:var(--band-card);font-weight:var(--fw-semi);}

/* NARROW: the axis survives, the glyph does not — fifteen columns cannot hold
   "Ag" on a phone, so a mark takes its place and the strip keeps its shape.
   Labels stay at 12px; the header turns on its side to earn the room. */
@media (max-width:720px){
  .mxwrap{padding:var(--sp-5) var(--sp-4) var(--sp-5);}
  .mxrow{grid-template-columns:26px repeat(15,minmax(0,1fr)) 26px;}
  .mxc{font-size:0;height:32px;line-height:32px;}
  /* ::BEFORE, not ::after. An element has ONE ::after and this cell's is
     already the seam filler above — an absolutely-positioned 1px sliver at
     right:-1px. Declaring the dot on it too did not replace that rule, it
     MERGED with it: the dot kept position:absolute/top:0/right:-1px and came
     out pinned to the cell's top-right corner instead of centred, and the
     seam it displaced stopped being filled. Two defects, one collision
     (Jeff spotted the alignment, 2026-07-28). */
  .mxc:not(:empty)::before{content:"";display:inline-block;width:8px;height:8px;
    border-radius:50%;background:currentColor;vertical-align:middle;}
  .mxh{writing-mode:vertical-rl;transform:rotate(180deg);justify-self:center;height:44px;}
}

.mxcap{font-size:var(--fs-xs);color:var(--band-mut);margin:var(--stack-tight) 0 0;}

/* A note ABOUT the block above it, so it sits close to that block and not
   midway between two. It had no rule at all — four inline margin-tops (16,
   8, 14, 14) and the UA's own 1em below (Jeff 2026-07-28). That pass gave the
   class a margin and stopped there, so it still had no MEASURE while the
   .band .sub it answers has carried one since it was written: every band
   opened at 68ch and closed at the band's full width. A note and the
   paragraph it answers take the same measure (Jeff, 2026-08-27). */
.artnote{margin:var(--stack-close) 0 0;max-width:var(--measure-body);}

/* The audit card is a fixed white surface -- downloaded and printed, so its
   inks are literals rather than theme tokens on purpose. That exemption is
   about theming, not about the contrast bar: one ink for all three, the
   lightest in this card's family clearing WCAG AA and APCA body on white
   with headroom (5.23:1, Lc 76.0). It replaced #8C928C at 3.18:1 and #6B716B
   at Lc 74.6 -- the second a failure nobody had named, because its WCAG
   number looked fine. */
.paper{background:#FFFFFF;color:#1A1D1A;border-radius:var(--r-4);width:344px;max-width:100%;padding:var(--sp-6) var(--sp-6) var(--sp-5);
  box-shadow:var(--e-float);}

.phead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;gap:var(--sp-4);}

.phead b{font-size:var(--fs-sm);font-weight:var(--fw-heavy);letter-spacing:var(--tr-text);}

.phead span{font-size:var(--fs-xs);color:#686E68;}

.pcols,.prow{display:grid;grid-template-columns:22px 1fr 40px 38px 40px;gap:var(--sp-3);align-items:center;}

.pcols{font-size:var(--fs-xs);letter-spacing:var(--tr-label);text-transform:uppercase;color:#686E68;
  padding-bottom:5px;border-bottom:1px solid #E7E9E7;}

.prow{padding:var(--sp-3) 0;border-bottom:1px solid #F0F1F0;font-size:var(--fs-xs);}

/* same problem as the hero seam, at chip scale: a near-white seed sits on the
   audit's white paper with nothing between them. Same answer -- depth at the
   shared alpha, the ring for the edge and the drop for the lift, so the chip
   reads as a sample laid ON the paper rather than a hole cut in it. */
.pspec{width:22px;height:22px;border-radius:var(--r-1);display:flex;align-items:center;justify-content:center;
  font-size:var(--fs-xs);font-style:normal;font-weight:var(--fw-semi);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,0.07),0 1px 4px rgba(0,0,0,0.07);}

.plbl{font-size:var(--fs-xs);color:#43483F;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.pr{font-size:var(--fs-xs);font-weight:var(--fw-semi);}

.pt{font-size:var(--fs-xs);font-weight:var(--fw-bold);}

.pa{font-size:var(--fs-xs);color:#43483F;}

.pfoot{font-size:var(--fs-xs);color:#686E68;padding-top:8px;}

.rowlbl{font-size:var(--fs-md);font-weight:var(--fw-heavy);margin:0 0 var(--sp-4);}

.rowlbl span{font-family:"Red Hat Text";font-weight:var(--fw-semi);font-size:var(--fs-sm);color:var(--band-mut);letter-spacing:var(--tr-text);}

.steprow{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:var(--sp-4);margin-bottom:16px;}

.stepcard{border:0;border-radius:0;padding:0;text-align:left;cursor:pointer;font:inherit;background:transparent;
  display:flex;flex-direction:column;gap:var(--sp-1);min-width:0;position:relative;color:var(--band-ink);}

/* 3:2, the swatch family — it was 112x58 (1.93) beside .msw's 1.44 and
   .mxc's 1.61, three sizings of the same job. aspect-ratio holds the shape
   at any column width, where a fixed height only held it at one. */
.stepcard i{display:block;aspect-ratio:3 / 2;border-radius:var(--r-2);margin-bottom:var(--stack-tight);box-shadow:var(--e-card);}

.stepcard::after{content:"";width:13px;height:13px;background:currentColor;-webkit-mask:var(--copy) center/contain no-repeat;mask:var(--copy) center/contain no-repeat;position:absolute;bottom:16px;right:6px;opacity:0;font-size:var(--fs-sm);color:var(--band-ink);}

.stepcard:hover::after{opacity:var(--op-near);}

.stepcard b{font-size:var(--fs-xs);font-weight:var(--fw-semi);overflow-wrap:anywhere;}

.stepcard span{font-size:var(--fs-xs);color:var(--band-mut);}

.upsell{border-radius:var(--r-5);padding:var(--sp-8) var(--sp-9);margin-top:var(--stack-block);
  display:flex;gap:var(--sp-9);align-items:center;box-shadow:var(--e-panel);}

.upcopy{flex:1;min-width:0;}

.upeyebrow{display:block;font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--up-mut);margin-bottom:10px;}

.uphead{font-size:var(--fs-3xl);font-weight:var(--fw-black);margin:0 0 var(--sp-4);letter-spacing:var(--tr-display);}

.upsell p{margin:0;font-size:var(--fs-base);}

.uplede{max-width:var(--measure-lede);}

.upsell p.upsell-ctas{display:flex;align-items:center;gap:var(--sp-5) 16px;flex-wrap:wrap;margin:var(--sp-6) 0 0;}

.upsell p.upcap{font-size:var(--fs-xs);color:var(--up-mut);margin:var(--sp-5) 0 0;}

.appwrap{flex:none;}

.appbar i{width:8px;height:8px;border-radius:50%;display:block;flex:none;}

.appbody{padding:var(--sp-5) var(--sp-5) var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-4);}

.approw{display:flex;align-items:center;gap:var(--sp-4);}

.sysrow{display:flex;gap:var(--sp-1);}

.sysrow i{width:10px;height:10px;border-radius:var(--r-1);display:block;}

.sysrow.dot i{width:11px;height:11px;border-radius:50%;}

@media (max-width:920px){.upsell{flex-direction:column;align-items:flex-start;gap:var(--sp-7);padding:var(--sp-7);}
  .appwrap{align-self:center;}}

/* .upbtn sets its colors inline, per band. */
.genline{font-size:var(--fs-lg);max-width:var(--measure-body);margin:0 0 var(--sp-8);}

.inlv{background:transparent;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;
  text-decoration:underline;text-decoration-color:var(--band-line);text-underline-offset:3px;}

.inlv:hover{text-decoration-color:var(--band-ink);}

.pressgrid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);}

@media (max-width:720px){.pressgrid{grid-template-columns:1fr;}}

.pcard .proflink{color:inherit;font-weight:var(--fw-semi);display:block;margin-bottom:9px;}

.pcard .pbadge{margin-bottom:13px;}

.pbadge{display:inline-flex;align-items:center;gap:var(--sp-3);font-size:var(--fs-xs);font-weight:var(--fw-bold);
  border-radius:var(--r-pill);padding:var(--sp-2) var(--sp-5);white-space:nowrap;}

.pswap i{flex:1;display:block;height:78px;}

.plbls{display:flex;margin:var(--sp-3) 0 var(--sp-5);}

.ppcard{background:#FFFFFF;color:#43483F;border-radius:var(--r-4);padding:var(--sp-5) var(--sp-6) var(--sp-6);width:280px;
  box-shadow:var(--e-float);}

.pplbl{font-size:var(--fs-xs);font-weight:var(--fw-semi);margin:var(--sp-4) 0 var(--sp-2);}

.pplbl:first-child{margin-top:0;}

.ppstrip i{width:19px;height:27px;display:block;flex:1;}

.note{font-size:var(--fs-lg);margin-top:14px;}

.toollink{font-size:var(--fs-base);margin-top:12px;}

.cite{font-size:var(--fs-xs);color:var(--band-mut);margin-top:14px;}

.cite a,.cap-cite a,.proflink{color:var(--band-ink);font-weight:var(--fw-bold);}

.cap-cite{display:block;font-size:var(--fs-xs);color:var(--band-mut);margin-top:10px;}

.proflink{font-weight:inherit;text-underline-offset:2px;}

.proflink:hover{opacity:var(--op-soft);}

.toollink a{font-weight:var(--fw-bold);color:var(--band-ink);}

.door{cursor:pointer;}

p.door{font-size:var(--fs-base);color:var(--band-mut);margin-top:12px;}

p.door b{color:var(--band-ink);}

.lic{width:12px;height:12px;vertical-align:-1px;margin-right:5px;display:inline-block;}

.vcard{background:var(--band-card);color:var(--band-card-ink);border-radius:var(--r-3);padding:var(--sp-6) var(--sp-6);font-size:var(--fs-lg);max-width:var(--measure-body);margin-bottom:14px;}

.acase{display:flex;align-items:center;gap:var(--sp-5);background:var(--band-card);color:var(--band-card-ink);border-radius:var(--r-3);padding:var(--sp-5) var(--sp-5);flex-wrap:wrap;margin-bottom:10px;}

.acase .demo{border-radius:var(--r-2);padding:var(--sp-4) var(--sp-6);font-weight:var(--fw-bold);font-size:var(--fs-lg);}

.acase .res{font-size:var(--fs-base);}

.swgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-4);}

/* The downloadable chips, on the page as indexable images rather than only as
   an og:image nothing crawls. width/height are stated so the image reserves its
   box and the band does not jump when it loads.
   The chips are 2:3 PORTRAIT — Pinterest's own shape, and the one a landscape
   card cannot be. Three of them stand side by side in the downloads band, which
   is what a specimen SET looks like; each is a vertical figure with its caption
   and its two buttons under it. */
.pins{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--sp-9);margin:var(--stack-block) 0 0;}

.paircard{display:flex;flex-direction:column;gap:var(--stack-close);margin:0;}

.pinwrap{position:relative;display:block;}

.paircard img{display:block;width:100%;height:auto;
  border-radius:var(--r-4);box-shadow:var(--e-card);}

.paircard figcaption{font-size:var(--fs-sm);color:var(--band-mut);}

/* THE CONTROLS LIVE ON THE CARD, revealed on hover — the chip is the thing
   being looked at, and a row of labelled buttons under each of three cards was
   more chrome than content (Jeff 2026-07-28). They carry the band's own walked
   button colors plus the card shadow, which is how anything on this site says
   it floats above what is behind it; nothing here is a guessed alpha.
   FOCUS-WITHIN reveals them too, or they would be unreachable by keyboard, and
   a device with no hover shows them always — otherwise the only way to download
   on a phone would be a hover that cannot happen. */
.pcacts{position:absolute;top:var(--sp-5);right:var(--sp-5);
  display:flex;gap:var(--sp-3);opacity:0;
  transition:opacity var(--dur-control) ease;}

.pinwrap:hover .pcacts,.pcacts:focus-within{opacity:1;}

@media (hover:none){.pcacts{opacity:1;}}

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

.swgrid.three{grid-template-columns:repeat(3,1fr);}

.swgrid.four{grid-template-columns:repeat(4,1fr);}

.sw{background:var(--band-card);color:var(--band-card-ink);border-radius:var(--r-4);padding:var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);transition:transform .12s ease;position:relative;}

a.sw:hover,button.sw:hover{transform:translateY(-2px);}

button.sw{border:0;cursor:pointer;font:inherit;text-align:left;padding:var(--sp-4);}

.sw i{display:block;height:48px;border-radius:var(--r-2);}

.sw b{font-size:var(--fs-base);}

.sw .swsub{font-size:var(--fs-xs);color:var(--band-card-mut);}

.sw .swsub{padding-right:52px;}

.sw u{position:absolute;right:10px;bottom:8px;font-size:var(--fs-xs);font-weight:var(--fw-bold);text-decoration:none;color:var(--band-card-ink);opacity:0;transition:.12s;}

a.sw:hover u,a.sw:focus-visible u,button.sw:hover u,button.sw:focus-visible u{opacity:1;}

.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;}

.sw.me{outline:2px solid var(--band-ink);outline-offset:2px;}

.finale{text-align:center;}

.kick{font-size:var(--fs-sm);font-weight:var(--fw-heavy);letter-spacing:var(--tr-wide);text-transform:uppercase;color:var(--band-mut);}

h2.fhead{font-family:"Red Hat Display";font-size:clamp(30px,4.5vw,42px);font-weight:var(--fw-black);
  letter-spacing:var(--tr-display);margin:var(--sp-4) 0 var(--sp-4);}

/* the FINALE's lede — the family hub has a .flede of its own with a
   different size, color and measure, and one name for two designs is a
   trap waiting for whoever edits the wrong one */
.fnlede{font-size:var(--fs-lg);color:var(--band-mut);margin:0 auto var(--sp-10);max-width:var(--measure-lede);}

.sbody{padding:var(--sp-6) var(--sp-7) var(--sp-7);}

.sbody .nm{font-family:"Red Hat Display";font-weight:var(--fw-black);font-size:var(--fs-3xl);letter-spacing:var(--tr-display);}

.sbody .strip i{flex:1;display:block;}

.sdots{display:flex;gap:var(--sp-3);align-items:center;}

.sdots i{width:14px;height:14px;border-radius:50%;display:block;box-shadow:var(--e-low);}

.claim{margin:var(--sp-10) auto var(--sp-8);font-size:var(--fs-md);color:var(--band-mut);max-width:var(--measure-lede);}

.claim b{color:var(--band-ink);}

.claim.c2{margin-top:-16px;}

.trust{font-size:var(--fs-base);font-weight:var(--fw-bold);margin:0 0 var(--sp-6);}

.linkish{background:none;border:0;color:var(--band-ink);font-family:inherit;font-size:var(--fs-base);
  font-weight:var(--fw-bold);text-decoration:underline;text-underline-offset:2px;cursor:pointer;padding:0;}

.finale .magic{display:block;margin-top:14px;font-size:var(--fs-base);color:var(--band-mut);}

.finale .fine{display:block;margin-top:8px;font-size:var(--fs-xs);color:var(--band-mut);}

.finale .fine a{color:var(--band-ink);font-weight:var(--fw-bold);}

/* --stack-close between the field and its button: they are two controls in
   one group, and 8px read as cramped — especially wrapped, where it is the
   whole vertical separation between two 52px controls (Jeff 2026-07-28). */
.acctform{display:flex;gap:var(--stack-close);justify-content:center;flex-wrap:wrap;
  margin-top:var(--stack-close);
  --field-line:var(--band-line);--field-bg:var(--band-card);
  --field-ink:var(--band-card-ink);--field-mut:var(--band-card-mut);}

.acctform input{width:min(300px,80vw);}

.btn.ghost{--btn-bg:transparent;--btn-ink:var(--band-ink);--btn-line:var(--band-line);
  --btn-bg-hover:color-mix(in srgb,var(--band-ink) 10%,transparent);}

.fine{display:block;margin-top:14px;font-size:var(--fs-base);color:var(--band-mut);}

.fine a{font-weight:var(--fw-bold);color:var(--band-ink);}

.ask.pulse .btn{animation:pulse .9s ease 2;}

.gauge{position:fixed;right:12px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:var(--sp-1);z-index:50;background:rgba(10,10,12,.35);backdrop-filter:blur(4px);padding:var(--sp-3) var(--sp-2);border-radius:var(--r-pill);}

.gauge i{width:9px;height:14px;border-radius:var(--r-1);display:block;opacity:var(--op-mute);transition:.2s ease;}

.gauge i.on{opacity:1;width:13px;}

.gauge i.past{opacity:var(--op-soft);}

footer.site{border-top:1px solid var(--line);background:var(--bg2);padding:var(--sp-11) 0 var(--sp-9);color:var(--ink);}

.footgrid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:var(--sp-9);}

.footbrand .word{font-size:var(--fs-xl);}

.footbrand p{font-size:var(--fs-base);color:var(--muted);margin:var(--sp-5) 0 0;max-width:var(--measure-blurb);line-height:var(--lh-normal);}

.footcol .foothead{font-family:"Red Hat Mono";font-size:var(--fs-xs);font-weight:var(--fw-semi);letter-spacing:var(--tr-eyebrow);text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--sp-5);}

.footcol a{display:block;font-size:var(--fs-base);color:var(--ink2);margin-bottom:10px;font-weight:var(--fw-medium);transition:.15s;}

.footcol a:hover{color:var(--ink);}

.attr{font-size:var(--fs-xs);color:var(--muted);margin:var(--sp-10) 0 0;max-width:var(--measure-body);}

.attr a{color:var(--ink2);font-weight:var(--fw-semi);}

.footbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);margin-top:44px;
  padding-top:24px;border-top:1px solid var(--line);font-size:var(--fs-sm);color:var(--muted);flex-wrap:wrap;}

.footbar .hue{font-family:"Red Hat Mono";display:inline-flex;align-items:center;gap:var(--sp-3);}

.footbar .hue i{width:11px;height:11px;border-radius:var(--r-1);display:inline-block;}

#toast.show{opacity:1;}

@media (max-width:720px){
  .vgrid{grid-template-columns:1fr;}
  .swgrid,.swgrid.three,.swgrid.four{grid-template-columns:1fr 1fr;}
  .gauge{display:none;}
  .crumb .mobile-hide{display:none;}
  .hexinput input{width:110px;font-size:var(--fs-lg);}
  .pins{grid-template-columns:minmax(0,1fr);}
  }