/* The Nectar figures ( graphics.js ), styled for this portfolio. The component pictures keep Klue's own look,
   copied unchanged from wearethestill's assets/site/nectar.css. The editorial diagrams read the portfolio's
   tokens through the names below: Fraunces for headings and figures, Inter for text, the rust accent. */
.cs-gallery--gfx {
  --paper: #fff; --paper-2: var(--panel); --paper-3: #e7e3da;
  --hair: var(--line); --hair-2: rgba(20, 20, 20, .07);
  --t-floor: var(--accent); --floor: var(--accent); --on-floor: #fff;
  --disp: var(--serif); --t-ui: 11px; --t-h3: 22px;
}
.cs-gallery--gfx { margin-top: 40px; display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
@media (max-width: 700px) { .cs-gallery--gfx { grid-template-columns: minmax(0, 1fr); } }
.pf-fig { margin: 0; min-width: 0; }
.pf-fig.pf-wide { grid-column: 1 / -1; }
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Figures drawn in code ( graphics.js ). Loaded only on the pages that carry them.
   .ng is an editorial diagram in the site's type and colours, and it follows the page's floor and theme.
   .ng-art is a drawing of Klue's product: it scales with its frame like a picture, keeps Nectar's own
   white surface in both themes, and sets every size in em so 1em is 16 of the drawing's pixels. */


/* ---------- Nectar's components ----------
   Drawn at their real size: 1em is 16px, so a button is 40px tall and a checkbox 20px. A drawing
   shrinks only when its frame is narrower than its canvas ( min() below ), and never grows. */
.ng-art { container-type: inline-size; background: #fff; border: 1px solid var(--hair-2); overflow: hidden; position: relative; }
/* the link that skips a group of working controls shows only while it has focus */
.ng-skip { position: absolute; top: 8px; left: 8px; z-index: 2; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border-radius: 4px; background: #011627; color: #fff; font: 500 14px/1.2 var(--sans); text-decoration: none; }
.ng-skip:focus { width: auto; height: auto; padding: 8px 12px; overflow: visible; clip-path: none; }
.ng-past { display: block; height: 0; }
.ng-past:focus { outline: none; }
.ng-art > .nx { margin-inline: auto; }
.nx { font-family: "proxima-nova", "Proxima Nova", var(--sans); font-size: 16px; color: #011627; line-height: normal; letter-spacing: 0; -webkit-font-smoothing: antialiased; font-synthesis: none; }
.ng-art .tx::before { content: attr(data-t); }
.nx .ic { display: block; flex: none; width: 1.5em; height: 1.5em; fill: var(--ic, currentColor); transition: fill .12s; }
.nx-eye { display: block; font-size: .625em; font-weight: 700; letter-spacing: .16em; line-height: 1.2; text-transform: uppercase; color: #717171; }
.nx-eh { display: flex; flex-direction: column; gap: .25em; }
.nx-h { font-size: 1.25em; font-weight: 600; line-height: 1.2; color: #000; }

/* Button: padding 8, radius 8, 24px icons, Proxima Nova Semibold 16/24, with the library's hover and
   pressed states for every theme and emphasis. Pressed adds the 2px ring the library draws. */
.nx-btn { --bg: transparent; --ring: transparent; appearance: none; border: 0; margin: 0; font-family: inherit; display: inline-flex; align-items: center; padding: .5em; border-radius: .5em; font-size: 1em; font-weight: 600; line-height: 1.5; white-space: nowrap; color: var(--fg); background: var(--bg); box-shadow: inset 0 0 0 .125em var(--ring); cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; transition: background-color .12s, color .12s, box-shadow .12s; }
span.nx-btn { pointer-events: none; cursor: default; }
/* the artboard stays white in both themes, so focus rings there are dark */
.ng-art :focus-visible { outline: 2px solid #011627; outline-offset: 2px; }
.nx-btn__l { padding: 0 .5em; text-decoration-thickness: 1px; text-underline-offset: .15em; }
.nx-btn--minimal { padding: 0; gap: .5em; }
.nx-btn--minimal .nx-btn__l { padding: 0; }
.nx-btn--standard { --fg: #3751ff; --hfg: #1c1ccb; }
.nx-btn--neutral { --fg: #464646; --hfg: #011627; }
.nx-btn--danger { --fg: #eb111c; --hfg: #b11018; }
.nx-btn--high { --fg: #efeded; --ic: #fff; }
.nx-btn--standard.nx-btn--high { --bg: #3751ff; }
.nx-btn--neutral.nx-btn--high { --bg: #464646; }
.nx-btn--danger.nx-btn--high { --bg: #eb111c; }
.nx-btn--standard.nx-btn--medium { --bg: #f2f3ff; }
.nx-btn--neutral.nx-btn--medium { --bg: #fff; --ring: #efeded; --ic: #011627; }
.nx-btn--danger.nx-btn--medium { --bg: #fff2f3; }
@media (hover: hover) {
  .nx-btn--standard.nx-btn--high:hover { --bg: #1c1ccb; }
  .nx-btn--neutral.nx-btn--high:hover { --bg: #011627; }
  .nx-btn--danger.nx-btn--high:hover { --bg: #b11018; }
  .nx-btn--standard.nx-btn--medium:hover { --bg: #d1d9ff; --fg: #1c1ccb; --ic: #1c1ccb; }
  .nx-btn--neutral.nx-btn--medium:hover { --bg: #efeded; --ring: transparent; --fg: #011627; }
  .nx-btn--danger.nx-btn--medium:hover { --bg: #ffbdc3; }
  .nx-btn--standard.nx-btn--low:hover { --bg: #f2f3ff; --fg: #1c1ccb; --ic: #1c1ccb; }
  .nx-btn--neutral.nx-btn--low:hover { --bg: #efeded; --fg: #011627; --ic: #011627; }
  .nx-btn--danger.nx-btn--low:hover { --bg: #fff2f3; }
  .nx-btn--minimal:hover { --fg: var(--hfg); --ic: var(--hfg); }
  .nx-btn--minimal:hover .nx-btn__l { text-decoration-line: underline; }
}
.nx-btn--standard.nx-btn--high:is(:active, .is-pressed) { --bg: #1c1ccb; --ring: #3751ff; --fg: #d1d9ff; --ic: #3751ff; }
.nx-btn--neutral.nx-btn--high:is(:active, .is-pressed) { --bg: #011627; --ring: #464646; --fg: #bdbdbd; --ic: #464646; }
.nx-btn--danger.nx-btn--high:is(:active, .is-pressed) { --bg: #b11018; --ring: #eb111c; --fg: #ffbdc3; --ic: #eb111c; }
.nx-btn--standard.nx-btn--medium:is(:active, .is-pressed), .nx-btn--standard.nx-btn--low:is(:active, .is-pressed) { --bg: #f2f3ff; --ring: #3751ff; --fg: #1c1ccb; --ic: #1c1ccb; }
.nx-btn--neutral.nx-btn--medium:is(:active, .is-pressed), .nx-btn--neutral.nx-btn--low:is(:active, .is-pressed) { --bg: #efeded; --ring: #011627; --fg: #011627; --ic: #011627; }
.nx-btn--danger.nx-btn--medium:is(:active, .is-pressed), .nx-btn--danger.nx-btn--low:is(:active, .is-pressed) { --bg: #fff2f3; --ring: #eb111c; }
.nx-btn--standard.nx-btn--minimal:is(:active, .is-pressed) { --fg: #1c1ccb; --ic: #3751ff; }
.nx-btn--neutral.nx-btn--minimal:is(:active, .is-pressed) { --fg: #011627; --ic: #bdbdbd; }
.nx-btn--danger.nx-btn--minimal:is(:active, .is-pressed) { --fg: #b11018; --ic: #eb111c; }
.nx-btn--minimal:is(:active, .is-pressed) .nx-btn__l { text-decoration-line: none; }

/* Radio 20, Checkbox 20 with a 3px radius, Switch 39 × 24 with an 18px thumb */
.nx-radio, .nx-check { position: relative; flex: none; width: 1.25em; height: 1.25em; background: #fff; box-shadow: inset 0 0 0 .125em #bdbdbd; transition: background-color .12s, box-shadow .12s; }
.nx-radio { border-radius: 50%; }
.nx-radio.is-on, input:checked + .nx-radio { background: #3751ff; box-shadow: none; }
.nx-radio.is-on::after, input:checked + .nx-radio::after { content: ""; position: absolute; inset: .375em; border-radius: 50%; background: #fff; }
.nx-check { display: grid; place-items: center; border-radius: .1875em; color: #fff; }
.nx-check.is-on, input:checked + .nx-check { background: #3751ff; box-shadow: none; }
.nx .nx-check .ic { width: .75em; height: .75em; opacity: 0; }
.nx .nx-check.is-on .ic, .nx input:checked + .nx-check .ic { opacity: 1; }
.nx-switch { position: relative; flex: none; width: 2.4375em; height: 1.5em; border-radius: 1em; background: #bdbdbd; transition: background-color .15s; }
.nx-switch span { position: absolute; top: 50%; left: .1875em; width: 1.125em; height: 1.125em; margin-top: -.5625em; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 .125em #bdbdbd; transition: transform .18s cubic-bezier(.3, .7, .4, 1), box-shadow .15s; }
.nx-switch.is-on, input:checked + .nx-switch { background: #3751ff; }
.nx-switch.is-on span, input:checked + .nx-switch span { transform: translateX(1em); box-shadow: inset 0 0 0 .125em #3751ff; }
@media (prefers-reduced-motion: reduce) { .nx-switch span { transition: none; } }

/* the library's twelve buttons, its theme grid, on an 871px canvas */
.ng-twelve > .nx { width: 54.4375em; font-size: min(16px, calc(100cqw * 16 / 871)); }
.nx-grid12 { box-sizing: border-box; width: 54.4375em; display: grid; grid-template-columns: 8.875em 10.625em 10.625em 10.625em auto; row-gap: 3.5em; align-items: start; padding: 3.5em 2em 3.5em 3.5em; }

/* Radio, Checkbox and Switch, on a 368px canvas; a click turns each one on or off ( nectar.js ) */
.ng-rcs > .nx { width: 23em; font-size: min(16px, calc(100cqw * 16 / 368)); }
.nx-rcs { box-sizing: border-box; width: 23em; display: grid; grid-template-columns: 7.625em 8.25em auto; padding: 2.5em 1em 2.5em 1.75em; }
.nx-rcs__c { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; margin: 0; padding: 0; border: 0; }
.nx-rcs__h { font-size: 1.25em; font-weight: 600; line-height: 1.2; color: #000; margin: .2em 0 .6em; }
.nx-rcs__i { position: relative; display: flex; align-items: center; gap: .5em; margin-top: .75em; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.nx-rcs__c--switch .nx-rcs__i { gap: .75em; }
/* the native input lies over its row, unseen, so a click, a tap or the keyboard works it directly */
.nx-rcs__i input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.nx-rcs__i input:focus-visible + span { outline: 2px solid #011627; outline-offset: 2px; }
.nx-rcs__i > span:last-child { font-size: .875em; font-weight: 500; line-height: 1.4286; color: #464646; transition: color .12s; }
.nx-rcs__c--check input:checked ~ span:last-child { color: #011627; }
@media (hover: hover) {
  .nx-rcs__i:hover .nx-check, .nx-rcs__i:hover .nx-radio { background: #3751ff; box-shadow: none; }
  .nx-rcs__i:hover input:checked + .nx-check, .nx-rcs__i:hover input:checked + .nx-radio { background: #1c1ccb; }
  .nx-rcs__c--check .nx-rcs__i:hover > span:last-child { color: #011627; }
  .nx-rcs__i:hover .nx-switch { background: #464646; }
  .nx-rcs__i:hover .nx-switch span { box-shadow: inset 0 0 0 .125em #464646; }
  .nx-rcs__i:hover input:checked + .nx-switch { background: #1c1ccb; }
  .nx-rcs__i:hover input:checked + .nx-switch span { box-shadow: inset 0 0 0 .125em #1c1ccb; }
}

/* the Button's emphasis guidelines from the library, on a 685px canvas */
.ng-emph > .nx { width: 42.8125em; font-size: min(16px, calc(100cqw * 16 / 685)); }
.nx-doc { box-sizing: border-box; width: 42.8125em; padding: 1.375em 1.25em 1.25em; display: flex; flex-direction: column; align-items: flex-start; }
.nx-doc__h { margin-top: .1667em; font-size: 1.5em; font-weight: 600; line-height: 1.0833; color: #000; }
.nx-doc__p, .nx-doc__d { font-family: "Inter", "proxima-nova", "Proxima Nova", var(--sans); font-weight: 500; }
.nx-doc__p { margin-top: .6667em; font-size: .75em; line-height: 1.6667; color: #717171; max-width: 50em; }
.nx-doc__t { width: 100%; margin-top: 1.5em; display: grid; grid-template-columns: 10.625em 1fr; }
.nx-doc__t > .nx-eye { padding-bottom: .8em; }
.nx-doc__b, .nx-doc__d { display: flex; align-items: center; min-height: 2.5em; padding: .8125em 0; border-top: 1px solid #e5e5e5; }
.nx-doc__d { font-size: .875em; line-height: 1.4286; color: #464646; padding: .9286em 0; }

/* klue-ui against Nectar, both at their real size, on a 1312px canvas; below 1050px the panels stack */
.ng-cmp > .nx { width: 82em; font-size: min(16px, calc(100cqw * 16 / 1312)); }
.nx-cmp { width: 82em; display: grid; grid-template-columns: auto 1fr; }
.nx-cmp__p { padding: 2.5em 2em 3em; }
.nx-cmp__p--n { border-left: 1px solid #e5e5e5; }
.nx-cmp__h { display: block; font-size: 1.5em; font-weight: 600; line-height: 1.2; color: #011627; }
.nx-cmp__m { display: block; margin-top: .55em; font: 400 .8125em/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .2em; text-transform: uppercase; color: #5e5e5e; }
.kui-grid { margin-top: 2em; display: grid; grid-template-columns: 10.5em 10.5em 10.5em 12.25em; column-gap: 1em; grid-auto-rows: 3.3125em; align-items: center; }
.nx-cmp__twelve { margin-top: 2em; display: grid; grid-template-columns: repeat(3, max-content); column-gap: 1.5em; grid-auto-rows: 4.75em; align-items: center; }
@container (max-width: 1050px) {
  .ng-cmp > .nx { width: 50.75em; font-size: min(16px, calc(100cqw * 16 / 812)); }
  .nx-cmp { width: 50.75em; grid-template-columns: 1fr; }
  .nx-cmp__p--n { border-left: 0; border-top: 1px solid #e5e5e5; }
}

/* klue-ui's buttons: Barlow, three sizes, eight colours and their tints */
.kui { display: inline-flex; align-items: center; gap: .44em; height: 2.333em; padding: 0 .78em; border-radius: .22em; font: 500 1.125em/1 "Barlow", "proxima-nova", var(--sans); white-space: nowrap; color: var(--k-t, #001627); background: var(--k-b, transparent); box-shadow: inset 0 0 0 var(--k-w, 0) var(--k-l, transparent); }
.kui .ic { width: 1em; height: 1em; }
.kui .ic:last-child { width: .72em; height: .72em; margin-left: .1em; }
.kui--m { font-size: .9375em; }
.kui--s { font-size: .75em; }
.kui__n { display: inline-grid; place-items: center; min-width: 1.4em; height: 1.4em; padding: 0 .3em; border-radius: .2em; font-size: .9em; background: rgba(0, 0, 0, .08); }
.kui--purple-line { --k-t: #620dec; --k-b: #fff; --k-l: #c8aefa; --k-w: 1px; }
.kui--purple-tint { --k-t: #620dec; --k-b: #f1f0ff; --k-l: #9b68f4; --k-w: 1px; }
.kui--purple { --k-t: #fff; --k-b: #620dec; }
.kui--blue-line { --k-t: #3751ff; --k-b: #fff; --k-l: #c1caff; --k-w: 1px; }
.kui--blue-tint { --k-t: #3751ff; --k-b: #f1f3ff; --k-l: #8192ff; --k-w: 1px; }
.kui--blue { --k-t: #fff; --k-b: #3751ff; }
.kui--ghost { --k-t: #001627; }
.kui--raised { --k-t: #001627; --k-b: #fff; box-shadow: 0 0 0 1px #e9ebec, 0 .1em .3em rgba(0, 22, 39, .12); }
.kui--ink-line { --k-t: #001627; --k-b: #fff; --k-l: #001627; --k-w: .12em; }
.kui--orange { --k-t: #001627; --k-b: #ffb23e; }
.kui--orange-tint { --k-t: #d2733c; --k-b: #fcf8ef; --k-l: #e3a884; --k-w: 1px; }
.kui--red { --k-t: #fff; --k-b: #eb111c; }
.kui--red-line { --k-t: #eb111c; --k-b: #fff; --k-l: #f37077; --k-w: 1px; }
.kui--yellow { --k-t: #001627; --k-b: #fff501; }
.kui--yellow .kui__n { background: #e6dc00; }
.kui--ghost .kui__n { background: #fff; box-shadow: inset 0 0 0 1px #c5cacf; }
.kui--yellow-ink { --k-t: #001627; --k-b: #fff501; --k-l: #001627; --k-w: .15em; }
.kui--green-tint { --k-t: #1f9660; --k-b: #f2fff8; }
.kui--green { --k-t: #fff; --k-b: #00874a; }
.kui--teal-tint { --k-t: #016f7d; --k-b: #edf9fb; --k-l: #5fa6af; --k-w: 1px; }
.kui--teal { --k-t: #fff; --k-b: #016f7d; }
.kui--link { --k-t: #3751ff; padding: 0; }
.kui--link .kui__l { text-decoration: underline; text-underline-offset: .12em; }

/* a drawing with working controls in a wide frame and a picture in a narrow one, so every target keeps
   at least 24px ( WCAG 2.5.8 ); the navigation's items need a frame of about 500px */
.ng-swap { container-type: inline-size; }
.ng-swap > div { display: flex; flex-direction: column; }
.ng-swap > .ng-swap__pic { display: none; }
@container (max-width: 500px) { .ng-swap > .ng-swap__live { display: none; } .ng-swap > .ng-swap__pic { display: flex; } }
.ng-swap .ng-art { flex: 1; display: grid; align-items: center; }

/* the navigation's anatomy at its real size, cropped from a 1200px drawing to an 825 × 640 canvas */
.ng-nav { background: #d7d7d7; }
.ng-nav > .nx { width: 51.5625em; font-size: min(16px, calc(100cqw * 16 / 825)); }
.nx-anat-crop { position: relative; width: 51.5625em; height: 40em; overflow: hidden; }
.nx-anat { position: absolute; left: -9.8125em; top: -2.3125em; width: 75em; height: 42.1875em; }
.nx-anat__title { position: absolute; left: 34.0625em; top: 7.3125em; display: grid; place-items: center; width: 6.875em; height: 2.375em; border-radius: 1.2em; background: #6271f8; color: #fff; font-size: 1em; font-weight: 600; }
.nx-nav { position: absolute; left: 28.5em; top: 11.3125em; width: 18.0625em; height: 36em; box-sizing: border-box; padding: .875em .8125em 0; background: #fff; border: 1px solid #6f8fc8; border-radius: .75em; }
.nx-nav > * { display: flex; align-items: center; gap: .6em; box-sizing: border-box; border: 1px solid #8aa0c8; border-top-width: 0; padding: 0 .875em; }
.nx-nav > *:first-child { border-top-width: 1px; }
.nx-nav__top { height: 2.9375em; justify-content: space-between; }
.nx-nav__logo { display: flex; color: #011627; }
.nx-nav__logo .nx-klue { height: 1.5em; }
.nx-nav__top .ic { width: 1.25em; height: 1.25em; color: #c4c4c4; }
.nx-nav__i { appearance: none; width: 100%; margin: 0; background: transparent; font: inherit; font-weight: 600; text-align: left; height: 2.625em; font-size: 1em; color: #333; cursor: pointer; user-select: none; -webkit-user-select: none; transition: background-color .12s, color .12s; }
.nx-nav__i .ic { width: 1.125em; height: 1.125em; color: #011627; }
@media (hover: hover) { .nx-nav__i:hover { background: #efeded; color: #011627; } }
.nx-nav__i[aria-pressed="true"] { color: #3751ff; }
.nx-nav__i[aria-pressed="true"] .ic { color: #3751ff; }
.ng-nav :focus-visible { outline-offset: -3px; }
.nx-nav > .nx-nav__dash { height: 3.125em; margin-top: 1.6875em; border-top-width: 1px; border-radius: .75em; }
.nx-nav__eye { height: 2.75em; align-items: flex-end !important; padding-bottom: .55em !important; font-size: .75em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #717171; }
.nx-nav > .nx-nav__eye { font-size: .75em; height: 3.6em; margin-top: .9em; border-top-width: 0; }
.nx-nav > .nx-nav__eye--share { border-bottom-width: 0; height: 4em; }
.nx-nav > .nx-nav__ins { position: relative; }
.nx-tag { position: absolute; display: flex; align-items: center; height: 2.375em; pointer-events: none; }
.nx-tag::before { content: ""; position: absolute; left: 1em; right: .3em; top: 50%; height: 2px; margin-top: -1px; background: #8a8a8a; }
.nx-tag__t { position: relative; display: grid; place-items: center; height: 2.375em; padding: 0 1em; border-radius: 1.2em; background: #717171; color: #fff; font-size: .875em; font-weight: 600; }
.nx-tag__dot { position: relative; order: 2; margin-left: auto; width: .75em; height: .75em; margin-right: -.375em; border-radius: 50%; background: #6f6f6f; }
.nx-tag--button, .nx-tag--listitem, .nx-tag--list, .nx-tag--text { flex-direction: row-reverse; }
.nx-tag--button .nx-tag__dot, .nx-tag--listitem .nx-tag__dot, .nx-tag--list .nx-tag__dot, .nx-tag--text .nx-tag__dot { margin: 0 auto 0 -.375em; }
.nx-tag--button::before, .nx-tag--listitem::before, .nx-tag--list::before, .nx-tag--text::before { left: .3em; right: 1em; }
.nx-tag--logo { left: 14.375em; top: 12.5em; width: 14.125em; }
.nx-tag--eyebrow { left: 12.3125em; top: 20.9375em; width: 16.1875em; }
.nx-tag--icon { left: 14.375em; top: 26.1875em; width: 14.875em; }
.nx-tag--button { left: 45.6875em; top: 12.375em; width: 12.8125em; }
.nx-tag--listitem { left: 45.6875em; top: 26.1875em; width: 13.1875em; }
.nx-tag--list { left: 48.1875em; top: 31.125em; width: 8.5625em; }
.nx-tag--text { left: 36.375em; top: 26.1875em; width: 8em; }

/* ---------- the bento ( graphics.js nectar-bento ) ----------
   A ruled grid: one white surface in both themes, 1px rules between the tiles, copy at the top of each
   and its picture under it, cropped by the tile. Every picture keeps Klue's type and tokens and draws its
   component at its real size. Three columns from 1000px of grid, two from 640px, one below. */
.ng-bento { position: relative; container-type: inline-size; border: 1px solid #e5e5e5; background: #e5e5e5; }
.ng-bento .tx::before { content: attr(data-t); }
.nb { display: grid; gap: 1px; grid-template-columns: minmax(0, 1fr); }
/* one column: each tile is as tall as its picture needs, and the tile crops the filler under it */
.nb-t { container-type: inline-size; position: relative; overflow: hidden; display: flex; flex-direction: column; min-width: 0; height: 340px; padding: 28px 28px 0; background: #fff; }
.nb-t--shell { height: 440px; }
.nb-t--ms { height: 380px; }
.nb-t--pw { height: 460px; }
.nb-t--sw { height: 310px; }
.nb-t--bdg { height: 350px; }
@container (min-width: 640px) {
  .nb { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "shell shell" "stat pw" "ms ms" "sw seg" "bdg bdg"; grid-template-rows: 400px 440px 400px 330px 330px; }
  .nb-t { height: auto; }
  .nb-t--shell { grid-area: shell; } .nb-t--stat { grid-area: stat; } .nb-t--pw { grid-area: pw; } .nb-t--ms { grid-area: ms; }
  .nb-t--sw { grid-area: sw; } .nb-t--seg { grid-area: seg; } .nb-t--bdg { grid-area: bdg; }
}
@container (min-width: 1000px) {
  .nb { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-areas: "shell shell stat" "pw ms ms" "sw seg bdg"; grid-template-rows: 400px 440px 340px; }
}
.nb-c { margin: 0; max-width: 26em; font: 400 18px/1.4 var(--sans); color: #5c6670; text-wrap: pretty; }
.nb-c b { font-weight: 500; color: #011627; }
.nb-p { position: relative; flex: 1; min-height: 0; margin-top: 24px; }
.nb-p .nx { position: relative; font-size: 16px; }
.nb-bar { display: block; height: .5em; border-radius: .25em; background: #ebebf0; }
.nb-w1 { width: 22%; } .nb-w2 { width: 34%; } .nb-w3 { width: 46%; } .nb-w4 { width: 58%; } .nb-w5 { width: 70%; } .nb-w6 { width: 82%; }
/* a track that opens to its content's height ( or width ) as something arrives, so neighbours move with it */
.nb-grow { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .5s cubic-bezier(.25, .8, .25, 1); }
.nb-grow > span { display: block; min-height: 0; overflow: hidden; transition: opacity .32s .06s; }
.nb-grow.pre { grid-template-rows: 0fr; }
.nb-grow.pre > span { opacity: 0; transition-delay: 0s; }
.nb-grow-x { display: grid; grid-template-columns: 1fr; padding-left: .5em; transition: grid-template-columns .32s cubic-bezier(.25, .8, .25, 1), padding .32s cubic-bezier(.25, .8, .25, 1); }
/* the pill arrives whole while its space opens, never uncovered by an edge */
.nb-grow-x > span { display: flex; min-width: 0; }
.nb-grow-x .nb-pill { transform-origin: 0 50%; transition: opacity .2s .08s, transform .32s cubic-bezier(.25, .8, .25, 1); }
/* the cursor: nectar.js aims it at what it presses ( --cx, --cy ), and each tile sets where it rests */
.nb-cur { position: absolute; left: 0; top: 0; z-index: 2; width: 1.5em; height: 1.5em; pointer-events: none; transform: translate(var(--cx), var(--cy)) scale(var(--cs, 1)); transform-origin: .47em .35em; transition: transform .72s cubic-bezier(.45, 0, .1, 1); }
.c-press .nb-cur { --cs: .9; transition-duration: .12s; }

/* Shell: App Shell's sidebar and its page, in a window that runs off the tile's edges */
.nb-win { position: relative; display: flex; width: 56em; height: 30em; border: .0625em solid #e5e5e5; border-radius: .75em; background: #fff; box-shadow: 0 .25em 1.5em rgba(1, 22, 39, .06); --cx: 23em; --cy: 1.9em; }
.nb-side { display: flex; flex: none; flex-direction: column; width: 15em; padding: .75em; border-right: .0625em solid #efeded; }
.nb-side__top { display: flex; align-items: center; justify-content: space-between; height: 2.75em; padding: 0 .875em; }
.nb-side__logo { display: flex; color: #011627; }
.nx-klue { display: block; width: auto; height: 1.375em; fill: currentColor; }
.nx .nb-side__top .ic { width: 1.25em; height: 1.25em; fill: #c4c4c4; }
.nb-side__i { --ic: #011627; display: flex; align-items: center; gap: .6em; height: 2.625em; padding: 0 .875em; border-radius: .5em; font-weight: 600; color: #333; transition: background-color .12s, color .12s; }
.nx .nb-side__i .ic { width: 1.125em; height: 1.125em; }
.nb-side__i--0 { margin-top: .5em; }
.nb-side__i.is-hover { background: #efeded; }
.nb-side__i.is-on { --ic: #3751ff; color: #3751ff; }
.nb-side__eye { display: flex; align-items: flex-end; height: 3em; padding: 0 1.1667em .6667em; font-size: .75em; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #717171; }
.nb-main { flex: 1; min-width: 0; padding: 1.25em 1.5em; }
.nb-main__h { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: 1.25em; }
.nb-roll { display: grid; font-size: 1.25em; font-weight: 700; line-height: 1.3; color: #011627; }
.nb-roll > span, .nb-view { grid-area: 1 / 1; opacity: 0; transform: translateY(.5em); transition: opacity .28s, transform .42s cubic-bezier(.45, 0, .1, 1); }
.nb-roll > .is-on, .nb-view.is-on { opacity: 1; transform: none; transition-delay: .06s; }
.nb-roll > .is-up, .nb-view.is-up { transform: translateY(-.5em); }
.nb-main__q { flex: none; width: 13em; height: 2.25em; border: .0625em solid #e5e5e5; border-radius: .5em; }
.nb-views { display: grid; }
.nb-view { display: grid; gap: .75em; align-content: start; }
.nb-view--dash { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-card { display: grid; gap: .6em; padding: 1em; border: .0625em solid #e5e5e5; border-radius: .5em; }
.nb-card__n { display: block; width: 3em; height: 1.25em; border-radius: .25em; background: #e2e5f0; }
.nb-view--ins, .nb-view--mon { gap: 0; }
.nb-mon { display: grid; grid-template-columns: .625em minmax(0, 1fr) 4em; align-items: center; gap: .75em; padding: .9em 0; border-top: .0625em solid #efeded; }
.nb-mon .nb-bar { width: auto; }
.nb-mon__s { display: block; width: .625em; height: .625em; border-radius: 50%; }
.nb-mon__s--on { background: #43d98d; } .nb-mon__s--off { background: #bdbdbd; }
.nb-mon__v { display: block; height: 1.25em; border-radius: .25em; background: #efeded; }

/* Count: the one number, on Nectar's blue */
.nb-t--stat { background: #3751ff; }
.nb-stat { display: flex; flex-direction: column; gap: 10px; margin: 0; font: 400 18px/1.4 var(--sans); color: #fff; }
.nb-stat > span { text-wrap: balance; }
.nb-stat__d { display: block; margin: -.04em 0 -.02em -.04em; font: 400 min(220px, 62cqw)/.86 var(--disp); letter-spacing: -.035em; font-variant-numeric: tabular-nums; }

/* Password: two Password Inputs, the Button with its loading state, and the Alert that confirms */
.nb-p--pw .nx { --cx: 17em; --cy: 16.2em; }
.nb-pw.ra { --cy: 10.4em; }
.nb-f { display: block; margin-bottom: .75em; }
.nb-f__l { display: block; margin-bottom: .3333em; font-size: .75em; font-weight: 500; line-height: 1.3333; color: #717171; }
.nb-in { display: flex; align-items: center; gap: .5em; height: 2.625em; padding: 0 .75em 0 1em; border: .0625em solid #e5e5e5; border-radius: .5em; background: #fff; transition: border-color .15s; }
.nb-in.is-focus { border-color: #3751ff; }
.nb-in__v { display: flex; flex: 1; align-items: center; gap: .25em; min-width: 0; height: 1.5em; }
.nb-dot { display: none; flex: none; width: .375em; height: .375em; border-radius: 50%; background: #011627; }
.nb-dot.on { display: block; }
.nb-caret { display: block; width: 1px; height: 1.125em; margin-left: .125em; background: #011627; opacity: 0; }
.nb-in.is-focus .nb-caret { animation: nb-blink 1s steps(1) infinite; }
@keyframes nb-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.nx .nb-in > .ic { flex: none; width: 1em; height: 1em; fill: #717171; }
.nb-btn { margin-top: .25em; }
.nb-btn .nx-btn__l { padding: 0 .5em; }
.nb-btn__ld { display: grid; grid-template-columns: 0fr; transition: grid-template-columns .25s cubic-bezier(.25, .8, .25, 1); }
.nb-btn__ld > span { display: flex; min-width: 0; overflow: hidden; }
.nb-spin { flex: none; width: 1em; height: 1em; margin: 0 .25em 0 .5em; border: .125em solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%; animation: nb-spin .7s linear infinite; }
@keyframes nb-spin { to { transform: rotate(360deg); } }
.nb-btn.is-loading { --bg: #5f74ff; }
.nb-btn.is-loading .nb-btn__ld { grid-template-columns: 1fr; }
.nb-pw .nb-grow .nb-alert { transition: transform .6s .12s cubic-bezier(.25, .8, .25, 1), opacity .4s .12s; }
.nb-pw .nb-grow.pre .nb-alert { transform: translateY(-.75em); opacity: 0; transition-delay: 0s; }
.nb-alert { display: flex; align-items: flex-start; gap: 1em; margin-bottom: .75em; padding: 1em; border-radius: .5em; background: #bdffdc; }
.nx .nb-alert .ic { width: 1em; height: 1em; margin-top: .125em; fill: #00874a; }
.nb-alert__b { display: flex; flex: 1; flex-direction: column; gap: .5em; min-width: 0; }
.nb-alert__t { font-size: .875em; font-weight: 700; line-height: 1.4286; color: #00874a; }
.nb-alert__m { font-size: .875em; line-height: 1.4286; color: #464646; text-wrap: pretty; }

/* Topics: Multi Select with its Checkbox list open, results beside it from a 600px tile */
.nb-ms__f { position: relative; flex: none; display: block; width: 25.125em; --cx: 7.4em; --cy: 8.15em; }
.nb-ms.c-a .nb-ms__f { --cx: 18.6em; --cy: 11.2em; }
.nb-ms__l { display: block; font-size: .75em; font-weight: 500; line-height: 1.3333; color: #717171; }
.nb-ms__in { display: flex; align-items: center; gap: .5em; margin-top: .25em; padding: .25em .5em; border: .0625em solid #e5e5e5; border-radius: .5em; background: #fff; }
.nb-ms__pills { display: flex; flex: 1; min-width: 0; }
.nb-ms__in > .ic { width: 1.25em; height: 1.25em; fill: #bdbdbd; }
.nb-pill { display: inline-flex; flex: none; align-items: center; gap: .25em; padding: .5em .5em .5em .75em; border-radius: 6.25em; background: #efeded; font-weight: 500; line-height: 1; color: #464646; white-space: nowrap; }
.nx .nb-pill .ic { width: 1em; height: 1em; fill: #464646; }
.nb-ms__dd { display: block; margin-top: .375em; padding: .25em; border: .0625em solid #e5e5e5; border-radius: .25em; background: #fff; box-shadow: 0 .25em .5em rgba(1, 22, 39, .15); }
.nb-ms__o { display: flex; align-items: center; gap: .5em; padding: .5em 1.25em; border-radius: .25em; transition: background-color .12s; }
.nb-ms__o > span:last-child { font-size: .875em; font-weight: 500; line-height: 1.4286; color: #464646; }
.nb-ms__o.is-hover { background: #f1f3f5; }
.nb-res { display: none; position: absolute; top: 1em; left: 26.725em; right: -28px; height: 30em; padding: 1em 0 0 1em; border: .0625em solid #e5e5e5; border-width: .0625em 0 0 .0625em; border-radius: .5em 0 0 0; }
@container (min-width: 600px) { .nb-res { display: block; } }
.nb-res__h { display: flex; align-items: baseline; gap: .3em; margin-bottom: .5em; font-size: .875em; font-weight: 600; line-height: 1.4286; color: #011627; }
.nb-swap { display: inline-grid; justify-items: end; overflow: hidden; }
.nb-swap > span { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.45, 0, .1, 1); }
.nb-swap > span:first-child { transform: translateY(-110%); }
.nb-ms.n-off .nb-swap > span:first-child { transform: none; }
.nb-ms.n-off .nb-swap > span:last-child { transform: translateY(110%); }
.nb-row { display: grid; gap: .5em; padding: .75em 1em .75em 0; border-top: .0625em solid #efeded; }
.nb-row__k { font-size: .75em; font-weight: 600; line-height: 1.3333; color: #3751ff; }
.nb-ms.rows-off .nb-grow { grid-template-rows: 0fr; }
.nb-ms.rows-off .nb-grow > span { opacity: 0; transition-delay: 0s; }
.nb-ms.pill-off .nb-grow-x { grid-template-columns: 0fr; padding-left: 0; }
.nb-ms.pill-off .nb-grow-x .nb-pill { opacity: 0; transform: scale(.88); transition-delay: 0s; }
@container (max-width: 520px) {
  .nb-ms__f { width: 100%; }
  .nb-ms.c-a .nb-ms__f { --cx: 13em; --cy: 11.2em; }
}

/* Switch: a Notifications card of three switches */
.nb-sw__card { display: block; max-width: 18em; padding: 1em 1.25em .5em; border: .0625em solid #e5e5e5; border-radius: .5em; }
.nb-sw__h { display: block; margin-bottom: .25em; font-size: .875em; font-weight: 700; line-height: 1.4286; color: #011627; }
.nb-sw__r { display: flex; align-items: center; gap: .75em; padding: .5em 0; }
.nb-sw__r > span:last-child { font-size: .875em; font-weight: 500; line-height: 1.4286; color: #464646; }

/* View: Segmented Control, the view under it sliding with the highlight */
.nb-seg__c { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; gap: .25em; padding: .25em; border: .0625em solid #e5e5e5; border-radius: .75em; background: #fff; }
.nb-seg__hl { position: absolute; top: .25em; bottom: .25em; left: .25em; width: calc(50% - .375em); border-radius: .5em; background: #f2f3ff; transform: translateX(calc(100% + .25em)); transition: transform .45s cubic-bezier(.45, 0, .1, 1); }
.nb-seg__i { position: relative; padding: .25em 1em; text-align: center; font-weight: 600; line-height: 1.5; color: #464646; transition: color .2s; }
.nb-seg__i:last-child { color: #3751ff; }
.nb-seg.pre .nb-seg__hl { transform: none; }
.nb-seg.pre .nb-seg__i:first-child { color: #3751ff; }
.nb-seg.pre .nb-seg__i:last-child { color: #464646; }
.nb-seg__v { display: block; overflow: hidden; margin-top: 1.25em; }
.nb-seg__tr { display: flex; width: 200%; transform: translateX(-50%); transition: transform .55s cubic-bezier(.45, 0, .1, 1); }
.nb-seg.pre .nb-seg__tr { transform: none; }
.nb-seg__view { display: block; width: 50%; }
.nb-ins, .nb-deal { display: grid; gap: .5em; padding: .9em 0; border-top: .0625em solid #efeded; }
.nb-ins__k { display: block; width: 3.5em; height: .5em; border-radius: .25em; background: #d1d9ff; }
.nb-deal { grid-template-columns: minmax(0, 1fr) 4em 4.5em; align-items: center; gap: 1em; }
.nb-deal .nb-bar { width: 100%; }
.nb-deal__v { display: block; height: .5em; border-radius: .25em; background: #cfd2dc; }
.nb-deal__s { display: block; height: 1.25em; border-radius: .25em; background: #efeded; }

/* Badges: every style in the library's grid of colours and versions */
.nb-p--bdg .nx { display: grid; grid-template-columns: repeat(3, max-content); gap: .625em 1.25em; justify-items: start; }
.nb-b { transition: transform .6s cubic-bezier(.25, .8, .25, 1), opacity .45s; }
.nb-b:nth-child(n+4) { transition-delay: .05s; } .nb-b:nth-child(n+7) { transition-delay: .1s; } .nb-b:nth-child(n+10) { transition-delay: .15s; }
.nb-b:nth-child(n+13) { transition-delay: .2s; } .nb-b:nth-child(n+16) { transition-delay: .25s; } .nb-b:nth-child(n+19) { transition-delay: .3s; }
.nb-bdg.pre .nb-b { transform: translateX(.75em); opacity: 0; }
.nb-b { display: inline-flex; flex: none; align-items: center; box-sizing: border-box; padding: .0833em .3333em; border-radius: .25em; font-size: .75em; font-weight: 600; line-height: 1.3333; letter-spacing: .0083em; color: #fff; background: var(--b); }
.nb-b--outline { background: none; box-shadow: inset 0 0 0 1px var(--o); }
.nb-b--blue { --b: #3751ff; --l: #f2f3ff; --o: #d1d9ff; --t: #3751ff; }
.nb-b--green { --b: #00874a; --l: #bdffdc; --o: #43d98d; --t: #00874a; }
.nb-b--red { --b: #eb111c; --l: #fff2f3; --o: #ffbdc3; --t: #eb111c; }
.nb-b--orange { --b: #ff9d0a; --l: #fff3d7; --o: #ff9d0a; --t: #b11018; }
.nb-b--yellow { --b: #ffe81b; --l: #fffdcb; --o: #ffe81b; --t: #464646; }
.nb-b--grey { --b: #464646; --l: #efeded; --o: #bdbdbd; --t: #464646; }
.nb-b--purple { --b: #7435f8; --l: #f1f0ff; --o: #d6d0ff; --t: #7435f8; }
.nb-b--light { background: var(--l); }
.nb-b--light, .nb-b--outline { color: var(--t); }
.nb-b--light.nb-b--green { color: #00562f; }
.nb-b--filled.nb-b--orange, .nb-b--filled.nb-b--yellow { color: #464646; }

/* the pause button: the loops run longer than five seconds, so WCAG 2.2.2 asks for a way to stop them */
.nb-pause { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%; background: rgba(1, 22, 39, .74); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.nb-pause[hidden] { display: none; }
.nb-pause .ic { display: block; width: 14px; height: 14px; fill: #fff; }
.nb-pause .nb-pause__g, .nb-pause[aria-pressed="true"] .nb-pause__p { display: none; }
.nb-pause[aria-pressed="true"] .nb-pause__g { display: block; }
.nb-pause:focus-visible { outline: 2px solid #3751ff; outline-offset: 2px; }
.ng-bento.nb-paused * { animation-play-state: paused !important; }
/* while nectar.js sets the opening frame, nothing animates */
.nb.nb-set * { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .nb-spin, .nb-in.is-focus .nb-caret { animation: none; } }


/* ---------- editorial diagrams ---------- */
.ng { container-type: inline-size; background: var(--paper-2); padding: clamp(18px, 4.2%, 56px); color: var(--ink); }
.ng p, .ng ul, .ng ol { margin: 0; max-width: none; }
.ng ul, .ng ol { list-style: none; padding: 0; }
.ng code { font: 400 .875em/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0; text-transform: none; }
.ng-head { padding-top: 10px; border-top: 1px solid var(--ink); margin-bottom: clamp(24px, 3.4vw, 52px) !important; font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ng-head code { font-size: 1.05em; }
.ng-eye { font: 500 var(--t-ui)/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--t-floor); }
.ng-fig { font: 400 clamp(3.2rem, 1.4rem + 5.2vw, 7.4rem)/.86 var(--disp); letter-spacing: -.045em; font-variant-numeric: tabular-nums; color: var(--t-floor); }

/* the scan's four findings */
.ng-scan__g { display: grid; gap: clamp(28px, 4vw, 52px) clamp(20px, 4vw, 64px); }
@container (min-width: 600px) { .ng-scan__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ng-scan__g li { border-top: 1px solid var(--hair); padding-top: 16px; }
.ng-scan .ng-fig { margin-bottom: 18px; }
.ng-of { font-size: .3em; letter-spacing: -.01em; color: var(--soft); }
.ng-k { margin-bottom: 10px !important; font: 400 .9375rem/1.45 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--soft); }
.ng-k code { font-size: 1em; color: var(--ink); }
.ng-q { font: 400 clamp(1.35rem, 1.1rem + .9vw, 2rem)/1.15 var(--serif); letter-spacing: -.01em; max-width: 19em !important; }
.ng-q code, .ng-props code { color: var(--t-floor); }
.ng-q code { font-size: .78em; }
.ng-props { margin-top: 12px !important; font: 400 .875rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--soft); }

/* the survey's questions */
.ng-survey__g { display: grid; gap: clamp(28px, 4vw, 48px) clamp(20px, 4vw, 64px); }
@container (min-width: 600px) { .ng-survey__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ng-qs { margin-top: 14px !important; display: grid; gap: .55em; }
.ng-qs li { font: 400 clamp(1.6rem, 1.1rem + 1.6vw, 2.8rem)/1.06 var(--serif); letter-spacing: -.015em; }

/* the audit of the Button's props */
.ng-audit__top { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 24px; border-top: 1px solid var(--ink); padding-top: 10px; margin-bottom: clamp(20px, 3vw, 40px); }
.ng-audit .ng-head { border: 0; padding: 0; margin: 0 !important; }
.ng-key { display: flex; align-items: center; gap: 8px; font: 400 .875rem/1.4 var(--sans); color: var(--soft); }
.ng-key__sw { width: 10px; height: 10px; background: var(--t-floor); }
.ng-audit__g { display: grid; gap: 0 clamp(20px, 4vw, 56px); }
@container (min-width: 640px) { .ng-audit__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ng-bars li { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr) 2.6em; align-items: center; gap: 12px; padding: 3px 0; font: 400 .8125rem/1.35 ui-monospace, SFMono-Regular, Menlo, monospace; }
.ng-bars code { font-size: 1em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ng-bars svg { display: block; width: 100%; height: 6px; }
.ng-bars .trk { fill: var(--hair-2); }
.ng-bars .val { fill: var(--soft); }
.ng-bars__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--soft); }
.ng-bars .is-flag code, .ng-bars .is-flag .ng-bars__n { color: var(--t-floor); font-weight: 600; }
.ng-bars .is-flag .val { fill: var(--t-floor); }

/* the plan: one goal, three figures, a roadmap */
.ng-plan__h { font: 400 clamp(1.9rem, 1.2rem + 2.4vw, 3.6rem)/1 var(--serif); letter-spacing: -.018em; margin-bottom: clamp(24px, 3.4vw, 48px) !important; }
.ng-plan__f { display: grid; gap: 20px clamp(16px, 2.6vw, 40px); }
@container (min-width: 420px) { .ng-plan__f { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ng-plan__f li { border-top: 1px solid var(--ink); padding-top: 14px; }
.ng-plan__f .ng-fig { font-size: clamp(2.8rem, 1.4rem + 3.6vw, 5.4rem); margin-bottom: 12px; }
.ng-plan__f p:last-child { font: 400 1rem/1.4 var(--sans); max-width: 16em; }
.ng-road { margin-top: clamp(32px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ng-road__q { padding-bottom: 8px; border-bottom: 1px solid var(--hair); font: 400 .8125rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--soft); }
.ng-road__r { padding: 10px 12px; background: var(--paper); border: 1px solid var(--hair); font: 500 .9375rem/1.3 var(--sans); }
.ng-road__a { grid-column: 1; grid-row: 2; }
.ng-road__b { grid-column: 2; grid-row: 2; background: var(--floor); border-color: var(--floor); color: var(--on-floor); }
.ng-road__c { grid-column: 3 / span 2; grid-row: 2; }
.ng-road__d { grid-column: 3 / span 2; grid-row: 3; }
@container (max-width: 400px) { .ng-road { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ng-road__q3, .ng-road__q4 { grid-row: 3; } .ng-road__q3 { grid-column: 1; } .ng-road__q4 { grid-column: 2; } .ng-road__c { grid-column: 1 / span 2; grid-row: 4; } .ng-road__d { grid-column: 1 / span 2; grid-row: 5; } }

/* the migration: the old library narrows while Nectar widens */
.ng-mig__art { position: relative; aspect-ratio: 1000 / 560; }
.ng-mig__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.ng-mig__svg .old { fill: var(--paper-3); }
.ng-mig__svg .old-l { fill: none; stroke: var(--soft); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ng-mig__svg .new { fill: color-mix(in srgb, var(--t-floor) 14%, transparent); }
.ng-mig__svg .new-l { fill: none; stroke: var(--t-floor); stroke-width: 2; vector-effect: non-scaling-stroke; }
.ng-mig__svg .arr { fill: none; stroke: var(--soft); stroke-width: 1.5; stroke-dasharray: 4 4; vector-effect: non-scaling-stroke; }
.ng-mig__svg .arr-h { fill: none; stroke: var(--soft); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.ng-mig__old, .ng-mig__new, .ng-mig__arrow { position: absolute; display: flex; flex-direction: column; gap: 4px; font: 400 .9375rem/1.35 var(--sans); max-width: 46% !important; }
.ng-mig__old { left: 3%; top: 14%; }
.ng-mig__new { right: 3%; top: 60%; text-align: right; align-items: flex-end; }
.ng-mig__arrow { right: 0; top: 47.5%; color: var(--soft); text-align: right; }
.ng-mig__n { font: 400 clamp(1.7rem, 1.1rem + 2vw, 3rem)/1 var(--serif); letter-spacing: -.015em; }
.ng-mig__new .ng-mig__n { color: var(--t-floor); }
.ng-mig__t { margin-top: 18px !important; display: grid; grid-template-columns: 4fr 5fr 3fr; font: 500 .9375rem/1.3 var(--sans); }
.ng-mig__t li { border-left: 2px solid var(--t-floor); padding: 2px 0 0 10px; }
.ng-mig__t li:last-child { border-left: 0; border-right: 2px solid var(--t-floor); padding: 2px 10px 0 0; text-align: right; }
@container (max-width: 560px) { .ng-mig__art { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; } .ng-mig__svg { position: static; order: 2; height: auto; aspect-ratio: 1000 / 560; } .ng-mig__old, .ng-mig__arrow, .ng-mig__new { position: static; max-width: none !important; text-align: left; align-items: flex-start; } .ng-mig__old { order: 1; } .ng-mig__arrow { order: 3; } .ng-mig__new { order: 4; } .ng-mig__t { grid-template-columns: 1fr; gap: 10px; } .ng-mig__t li:last-child { border-right: 0; border-left: 2px solid var(--t-floor); padding: 2px 0 0 10px; text-align: left; } }

/* the token chain: five stages from Figma into every component */
.ng-tok__band { display: grid; grid-template-columns: 2fr 3fr; gap: clamp(12px, 1.6vw, 20px); margin-bottom: 14px; }
.ng-tok__band p { border-bottom: 1px solid var(--hair); padding-bottom: 8px; }
.ng-tok__g { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); counter-reset: tok; }
.ng-tok__g li { position: relative; }
.ng-tok__g li + li::before { content: "→"; position: absolute; left: calc(clamp(12px, 1.6vw, 20px) / -2); top: 30%; transform: translate(-50%, -50%); font: 400 1rem/1 var(--sans); color: var(--t-floor); }
.ng-tok__art { display: grid; place-items: center; aspect-ratio: 5 / 6; margin-bottom: 14px; background: var(--paper); border: 1px solid var(--hair); }
.ng-tok__h { font: 400 clamp(1.15rem, .9rem + .7vw, 1.6rem)/1.1 var(--serif); margin-bottom: 6px !important; }
.ng-tok__g p:last-child { font: 400 .875rem/1.4 var(--sans); color: var(--soft); }
.ng-sw { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 62%; }
.ng-sw i { aspect-ratio: 1; border-radius: 3px; }
.ng-sw--d4daff { background: #d4daff; } .ng-sw--6b7cff { background: #6b7cff; } .ng-sw--3751ff { background: #3751ff; }
.ng-sw--ffb23e { background: #ffb23e; } .ng-sw--eb111c { background: #eb111c; } .ng-sw--00874a { background: #00874a; }
.ng-sw--d9d9d9 { background: #d9d9d9; } .ng-sw--717171 { background: #717171; } .ng-sw--011627 { background: #011627; }
.ng-file { display: grid; gap: 7px; width: 52%; aspect-ratio: 4 / 5; align-content: center; padding: 0 12%; background: var(--paper-2); border-radius: 3px; }
.ng-file i { height: 4px; border-radius: 2px; background: var(--hair); }
.ng-file i:nth-child(odd) { width: 60%; background: color-mix(in srgb, var(--t-floor) 45%, transparent); }
.ng-chips { display: grid; gap: 6px; width: 84%; }
.ng-chips code { display: flex; align-items: center; gap: 6px; padding: 6px 8px; background: var(--paper-2); font-size: .75rem; overflow: hidden; white-space: nowrap; }
.ng-chips code::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--t-floor); }
.ng-tok__cmp { display: grid; justify-items: center; gap: .9em; font-size: 16px; }
.ng-tok__row { display: flex; align-items: center; gap: .9em; }
@container (max-width: 680px) {
  .ng-tok__band { display: none; }
  .ng-tok__g { grid-template-columns: 1fr; gap: 14px; }
  .ng-tok__g li { display: grid; grid-template-columns: 34% 1fr; column-gap: 16px; align-items: center; }
  .ng-tok__g li + li::before { display: none; }
  .ng-tok__art { grid-row: span 2; margin: 0; }
  .ng-tok__h { align-self: end; }
  .ng-tok__g p:last-child { align-self: start; }
  .ng-tok__cmp { font-size: 10px; }
}

/* the three token tiers */
.ng-tier__g { display: grid; gap: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 48px); }
@container (min-width: 640px) { .ng-tier__g { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ng-tier__g li { border-top: 1px solid var(--ink); padding-top: 14px; }
.ng-tier__h { font: 400 clamp(1.5rem, 1.1rem + 1.2vw, 2.4rem)/1 var(--serif); letter-spacing: -.015em; }
.ng-tier__s { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 18px !important; font: 500 .9375rem/1.4 var(--sans); }
.ng-tier__s::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-1px); }
.ng-tier__s.is-ok::before { background: #2d6a4f; }
.ng-tier__s.is-bad::before { background: #b26a00; }
.ng-tier__s.is-mid::before { background: #b26a00; }
.ng-tier__g .ng-eye { color: var(--soft); margin: 12px 0 6px; }
.ng-ramp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ng-ramp i { aspect-ratio: 1; border-radius: 3px; }
.ng-r--blue1 { background: #dbe1ff; } .ng-r--blue2 { background: #d1d9ff; } .ng-r--blue3 { background: #acbafe; } .ng-r--blue4 { background: #6276ff; } .ng-r--blue5 { background: #3751ff; }
.ng-r--red1 { background: #ffdde0; } .ng-r--red2 { background: #ffbdc3; } .ng-r--red3 { background: #ff7f89; } .ng-r--red4 { background: #ff4d5a; } .ng-r--red5 { background: #eb111c; }
.ng-r--grey1 { background: #f8f6f7; } .ng-r--grey2 { background: #efeded; } .ng-r--grey3 { background: #e5e5e5; } .ng-r--grey4 { background: #d7d7d7; } .ng-r--grey5 { background: #bdbdbd; }
.ng-steps { display: flex; align-items: flex-end; gap: 6px; }
.ng-steps i { background: var(--t-floor); }
.ng-steps i:nth-child(1) { width: 4px; height: 4px; } .ng-steps i:nth-child(2) { width: 8px; height: 8px; } .ng-steps i:nth-child(3) { width: 12px; height: 12px; } .ng-steps i:nth-child(4) { width: 18px; height: 18px; } .ng-steps i:nth-child(5) { width: 26px; height: 26px; }
.ng-type { display: flex; align-items: baseline; gap: 10px; font-family: "proxima-nova", "Proxima Nova", var(--sans); font-weight: 600; }
.ng-type span:nth-child(1) { font-size: .75rem; } .ng-type span:nth-child(2) { font-size: .9rem; } .ng-type span:nth-child(3) { font-size: 1.1rem; } .ng-type span:nth-child(4) { font-size: 1.45rem; } .ng-type span:nth-child(5) { font-size: 1.9rem; }
.ng-sem { display: grid; gap: 8px; justify-items: start; }
.ng-sem > span { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; background: var(--paper); border: 1px solid var(--hair); }
.ng-sem i { width: 14px; height: 14px; border-radius: 3px; }
.ng-sem code { font-size: .875rem; }
.ng-tier__p { margin-top: 16px !important; font: 400 .9375rem/1.45 var(--sans); color: var(--soft); max-width: 22em !important; }
.ng-tier__btns { display: grid; justify-items: start; gap: .6em; font-size: 16px; padding: 1em; background: #fff; border: 1px solid var(--hair-2); }


/* forced colours keep the drawings legible with the system palette */
@media (forced-colors: active) {
  .ng-art { border-color: CanvasText; }
  .ng-bars .val, .ng-bars .is-flag .val { fill: CanvasText; }
}

/* the portfolio's own finish: rounded panels on its hairline, figures set in Fraunces */
.cs-gallery--gfx .ng, .cs-gallery--gfx .ng-art { border: 1px solid var(--line); border-radius: 9px; }
.cs-gallery--gfx .ng { background: var(--panel); }
.cs-gallery--gfx .ng-fig { font-weight: 400; letter-spacing: -.02em; font-variation-settings: 'opsz' 144; }
.cs-gallery--gfx .ng-head { font-weight: 600; letter-spacing: .13em; color: var(--faint); border-top-color: var(--ink); }
.cs-gallery--gfx .ng-eye { font-weight: 600; letter-spacing: .13em; font-size: 11px; }
.cs-gallery--gfx .ng-q, .cs-gallery--gfx .ng-qs li, .cs-gallery--gfx .ng-plan__h, .cs-gallery--gfx .ng-tok__h, .cs-gallery--gfx .ng-mig__n, .cs-gallery--gfx .ng-tier__h { letter-spacing: -.02em; }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-qs li { font-size: clamp(21px, 2.1vw, 28px); }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-audit__g { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-bars li { grid-template-columns: minmax(0, 8.6em) minmax(0, 1fr) 2.2em; gap: 8px; padding: 1px 0; font-size: 11px; }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-plan__h { font-size: clamp(24px, 2.6vw, 34px); }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-plan__f .ng-fig { font-size: clamp(34px, 4vw, 52px); }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-plan__f p:last-child { font-size: 14px; }
.cs-gallery--gfx .pf-fig:not(.pf-wide) .ng-road__r { font-size: 13px; padding: 8px 10px; }
.cs-gallery--gfx .ng-bento { border-color: var(--line); background: var(--line); border-radius: 9px; overflow: hidden; }
/* Nectar's figures wait for its "Read more" ( render.js holds back every figure not marked preview ) */
.cs-gallery--gfx.cs-more-gfx { display: none; }
.cs-gallery--gfx.cs-more-gfx.open { display: grid; }