/* The Nexus kit: generic .nx-* classes for any HTML. Values from ../tokens/tokens.css; the catalogue is ../components.md;
   the site CSS each class was taken from is evidence only, in ../SOURCES.md "Appendix A". */
@import url('../tokens/tokens.css');
@import url('doc.css');           /* documents on white paper (v1.2) */
@import url('illustration.css');  /* illustration parts (v1.2) */
@import url('charts.css');        /* charts and number callouts (v1.2) */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0}
body{background:var(--nx-page);color:var(--nx-ink);font-family:var(--nx-sans);-webkit-font-smoothing:antialiased}
h1,h2,h3,p{margin:0}
.nx-h{font-family:var(--nx-serif);font-weight:400;letter-spacing:var(--nx-serif-track);text-wrap:balance}
.nx-h .soft{color:var(--nx-ink-2)}
.nx-kicker{font:500 var(--nx-fs-label)/1.2 var(--nx-mono);letter-spacing:var(--nx-tr-label);text-transform:uppercase;color:var(--nx-ink-2)}
.nx-kicker--dot::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--nx-orange);margin-right:12px;vertical-align:middle;transform:translateY(-1px)}
.nx-btn{display:inline-flex;align-items:center;justify-content:center;min-height:var(--nx-h-control);padding:0 22px;border-radius:var(--nx-r-pill);font:450 var(--nx-fs-ui)/1 var(--nx-sans);white-space:nowrap;text-decoration:none;background:var(--nx-ink);color:var(--nx-page);border:1px solid transparent}
.nx-btn--light{background:var(--nx-white);color:var(--nx-pill-ink)}
.nx-btn--ghost{background:transparent;color:var(--nx-ink);border-color:var(--nx-line-2)}
.nx-glass{border-radius:var(--nx-r-glass);background:rgba(255,255,255,.66);border:1px solid rgba(255,255,255,.6);box-shadow:var(--nx-shadow-glass);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);position:relative}
.nx-glass::after{content:"";position:absolute;left:14px;right:14px;top:1px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.95),rgba(255,255,255,0))}
.nx-glass--dark{background:rgba(7,11,20,.38);border-color:rgba(255,255,255,.2);color:var(--nx-on-dark)}
.nx-silk{background:var(--nx-silk-card) center/cover;background-image:url('../assets/silk/finished/silkblue-1920x1080.jpg')}
.nx-stat .n{font-family:var(--nx-serif-text);font-weight:400;letter-spacing:-.01em;line-height:1.05;color:var(--nx-ink);white-space:nowrap}
.nx-stat .l{display:block;border-top:1px solid var(--nx-line);font-family:var(--nx-sans);color:var(--nx-ink)}
.nx-stat .s{display:block;font:400 var(--nx-fs-label)/1.3 var(--nx-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--nx-ink-2)}
.strike{position:relative;display:inline-block;color:var(--nx-ink-3)}
.strike::before{content:"";position:absolute;left:0;width:100%;top:.6em;height:2px;background:var(--nx-orange)}
.on-dark .strike{color:rgba(255,255,255,.66)}

/* ===== v1.1: hero (film) composition. Site values as they resolve on a 1440 x 900 desktop window (components.md
   "Hero (film) composition"). A fixed canvas is laid out at the site's own width (1440 px, or 540 px for the phone
   layout) and scaled to its pixel size with zoom, so every ratio stays the site's. ===== */
.nx-hero{position:relative;overflow:hidden;color:#fff;background:#05070F;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;--u:1px}
.nx-hero__film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:-3;transform:scale(1.03);transform-origin:50% 50%}
.nx-hero__scrim{position:absolute;inset:0;z-index:-2;pointer-events:none;background:linear-gradient(180deg,
  rgba(5,7,15,.62) 0%,rgba(5,7,15,.62) max(56px,calc(56 * var(--u))),rgba(5,7,15,.4) max(96px,calc(96 * var(--u))),
  rgba(5,7,15,.1) max(150px,calc(150 * var(--u))),rgba(5,7,15,0) max(210px,calc(210 * var(--u))),rgba(5,7,15,0) 46%,
  rgba(5,7,15,.66) 64%,rgba(5,7,15,.84) 80%,#05070F 89%,#05070F 100%)}
/* phone layout: the film fills the top 78%, the text overlaps its lower part, the logos sit on night */
.nx-hero--phone .nx-hero__film{top:0;bottom:auto;height:78%;transform-origin:50% 0}
.nx-hero--phone .nx-hero__scrim{background:linear-gradient(180deg,rgba(5,7,15,.62) 0%,rgba(5,7,15,.62) 64px,
  rgba(5,7,15,.25) 104px,rgba(5,7,15,.06) 150px,rgba(5,7,15,.06) 36%,rgba(5,7,15,.55) 50%,rgba(5,7,15,.8) 64%,#05070F 77%,#05070F 100%)}
/* nav over the film */
.nx-nav{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:center;gap:48px;height:80px;padding:0 60px;color:#fff}
.nx-nav__logo{width:80px;height:auto;display:block}
.nx-nav__links{display:flex;gap:34px;margin-left:24px;font:450 16px/1 var(--nx-sans)}
.nx-nav__links span{opacity:.9;white-space:nowrap}
.nx-nav__spacer{flex:1}
.nx-nav__actions{display:flex;align-items:center;gap:8px}
.nx-nav .nx-pill{min-height:42px;height:42px;padding:0 19px;font-size:15px}
.nx-nav--phone{height:64px;padding:0 20px}
.nx-nav--phone .nx-nav__logo{width:72px}
/* pills over the film */
.nx-pill{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;height:46px;padding:0 18px;border-radius:999px;font:450 16px/1 var(--nx-sans);white-space:nowrap;border:1px solid transparent;text-decoration:none}
.nx-pill--light{background:#fff;color:#171311}
.nx-pill--ghost{color:#fff;border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* the text block: headline bottom left, sub and pill in a right column */
.nx-hx{position:relative;margin:0 60px 36px;display:grid;grid-template-columns:minmax(0,1fr) 528px;column-gap:53px;row-gap:0;align-items:start}
.nx-hx__eyebrow{grid-column:1;grid-row:1;margin-bottom:5px}
.nx-hx__h1{grid-column:1;grid-row:2;font-family:var(--nx-serif);font-weight:400;letter-spacing:var(--nx-serif-track);line-height:1;color:#fff;font-size:46px}
.nx-hx__h1 .ln{display:block;white-space:nowrap}
.nx-hx__foot{grid-column:2;grid-row:2;position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.nx-hx__foot::before{content:"";position:absolute;inset:-60px -80px -60px -90px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(3,6,13,.62),rgba(3,6,13,.38) 55%,rgba(3,6,13,0))}
.nx-hx__sub{font:400 18px/1.45 var(--nx-sans);color:#fff;text-wrap:pretty}
/* phone layout: one column */
.nx-hx--phone{display:block;margin:0 20px 24px}
.nx-hx--phone .nx-hx__eyebrow{margin-bottom:12px}
.nx-hx--phone .nx-hx__h1{font-size:34px}
.nx-hx--phone .nx-hx__foot{margin-top:24px;gap:24px}
.nx-hx--phone .nx-hx__foot::before{display:none}
.nx-hx--phone .nx-hx__sub{font-size:16px}
.nx-hx--phone .nx-pill{padding:0 16px;font-size:14px;min-height:44px;height:44px}
/* the strike on film: 2 px orange through the dimmed word */
.nx-hero .strike{color:rgba(255,255,255,.66)}
.nx-hero .strike::before{top:.6em;height:2px}
/* eyebrow: "Backed by" and the Y Combinator mark */
.nx-yc{display:inline-flex;align-items:center;gap:12px;font:500 13px/1 var(--nx-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.86)}
.nx-yc img{height:18px;width:auto;display:block}
/* mono callout label over night: "Trusted by world-leading enterprises" */
.nx-callout{display:block;padding:0 60px;margin-bottom:24px;font:500 13px/1 var(--nx-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
/* logo ribbon: the whole set, in the site's order and heights, white on night, faded at both ends */
.nx-logos{position:relative;z-index:2;padding-bottom:32px}
.nx-ribbon{position:relative;width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 94%,transparent 100%)}
.nx-ribbon__track{display:flex;width:max-content;zoom:.75}
.nx-ribbon__group{display:flex;align-items:center;gap:104px;padding-right:104px;padding-left:60px;flex:0 0 auto}
.nx-ribbon__group img{width:auto;display:block;opacity:.82}
.nx-hero--phone .nx-callout{padding:0 20px;margin-bottom:16px}
.nx-hero--phone .nx-logos{padding-bottom:24px}
.nx-hero--phone .nx-ribbon{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 24px,#000 calc(100% - 24px),transparent 100%)}
.nx-hero--phone .nx-ribbon__track{zoom:.7}
.nx-hero--phone .nx-ribbon__group{gap:64px;padding-right:64px;padding-left:20px}

/* ===== v1.2: generic chip and status dot (site evidence: SOURCES.md Appendix A "Chip", "Status dot and chips") ===== */
.nx-chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px;border-radius:var(--nx-r-pill);background:var(--nx-card);color:var(--nx-ink);font:450 14px/1 var(--nx-sans);box-shadow:var(--nx-shadow-chip)}
.nx-chip--ghost{background:rgba(14,17,22,.38);color:#fff;box-shadow:none;border:1px solid rgba(255,255,255,.3)}
.nx-dot{display:inline-flex;align-items:center;gap:6px;font:400 14px/1 var(--nx-sans);color:var(--nx-navy-ink-2);white-space:nowrap}
.nx-dot::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--nx-ok)}
.nx-dot--new::before{background:var(--nx-orange-on-white)} .nx-dot--wait::before{background:var(--nx-wait)} .nx-dot--blue::before{background:var(--nx-blue)}
.nx-done-chip{display:inline-flex;align-items:center;padding:6px 12px;border-radius:var(--nx-r-pill);background:var(--nx-done-bg);color:var(--nx-done-ink);font:500 14px/1 var(--nx-sans)}

/* ===== v1.3: interface components (blog and any web page). Built only from tokens; rules in ../components.md.
   Shared states: hover changes colour or border only (.25 s, --nx-ease); focus is the orange ring; disabled is 50%.
   .is-hover, .is-focus, .is-active force a state for specimens and scripted states. ===== */
.nx-btn,.nx-seg__item,.nx-check,.nx-range,.nx-marker{transition:background-color .25s var(--nx-ease),color .25s var(--nx-ease),border-color .25s var(--nx-ease),box-shadow .25s var(--nx-ease)}
.nx-btn:focus-visible,.nx-seg__item:focus-visible,.nx-check:focus-visible,.nx-marker:focus-visible,
.nx-btn.is-focus,.nx-seg__item.is-focus,.nx-check.is-focus,.nx-marker.is-focus{outline:2px solid var(--nx-orange);outline-offset:2px}
.nx-btn:hover,.nx-btn.is-hover{background:var(--nx-navy-ink)}
.nx-btn--ghost:hover,.nx-btn--ghost.is-hover{background:transparent;border-color:var(--nx-ink)}
.nx-btn--light:hover,.nx-btn--light.is-hover{background:var(--nx-card-2)}
.nx-btn:disabled,.nx-btn[aria-disabled=true],.nx-seg__item:disabled,.nx-check:disabled,.nx-range:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}
/* compact button */
.nx-btn--sm{min-height:36px;padding:0 var(--nx-space-4);font:450 var(--nx-fs-small)/1 var(--nx-sans);gap:var(--nx-space-2)}
.nx-btn--sm svg{width:16px;height:16px;flex:none}
/* segmented switch: one choice out of two to four */
.nx-seg{display:inline-flex;gap:0;padding:var(--nx-space-1);border-radius:var(--nx-r-pill);background:var(--nx-card-2)}
.nx-seg__item{height:40px;padding:0 var(--nx-space-4);border:0;border-radius:var(--nx-r-pill);background:transparent;color:var(--nx-ink-2);font:450 var(--nx-fs-small)/1 var(--nx-sans);cursor:pointer;white-space:nowrap}
.nx-seg__item:hover,.nx-seg__item.is-hover{color:var(--nx-ink)}
.nx-seg__item[aria-checked=true],.nx-seg__item[aria-selected=true]{background:var(--nx-card);color:var(--nx-ink);box-shadow:var(--nx-shadow-chip)}
/* checkbox */
.nx-check{appearance:none;-webkit-appearance:none;display:inline-grid;place-items:center;flex:none;width:20px;height:20px;margin:0;border:1px solid var(--nx-line-2);border-radius:7px;background:var(--nx-card);color:var(--nx-page);cursor:pointer}
.nx-check:hover,.nx-check.is-hover{border-color:var(--nx-ink-3)}
.nx-check:checked{background:var(--nx-ink);border-color:var(--nx-ink)}
.nx-check::after{content:"";width:14px;height:14px;background:currentColor;opacity:0;-webkit-mask:url('../assets/icons/check.svg') center/14px 14px no-repeat;mask:url('../assets/icons/check.svg') center/14px 14px no-repeat}
.nx-check:checked::after{opacity:1}
/* reading progress: 28 cells and one orange caret (desktop); a 4 px bar with an orange head (phone) */
.nx-progress{display:inline-flex;align-items:center;gap:var(--nx-space-3)}
.nx-progress__cells{display:inline-flex;align-items:center;gap:var(--nx-space-1)}
.nx-progress__cells i{display:block;width:4px;height:12px;background:var(--nx-line-2)}
.nx-progress__cells i.is-read{background:var(--nx-ink)}
.nx-progress__caret{display:block;width:2px;height:12px;background:var(--nx-orange)}
.nx-progress__value{font:500 var(--nx-fs-label)/1 var(--nx-mono);letter-spacing:var(--nx-tr-label);color:var(--nx-ink)}
.nx-progress--bar{position:relative;display:block;height:4px;background:var(--nx-line)}
.nx-progress--bar .nx-progress__fill{position:absolute;left:0;top:0;bottom:0;width:var(--p,0%);background:var(--nx-blue);transition:width .25s var(--nx-ease)}
.nx-progress--bar .nx-progress__head{position:absolute;top:50%;left:var(--p,0%);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--nx-orange);box-shadow:0 0 0 2px var(--nx-page)}
/* section map: a vertical path of dots and labels */
.nx-steps{list-style:none;margin:0;padding:0;position:relative}
.nx-steps::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;width:2px;background:var(--nx-ill-edge)}
.nx-steps__item{position:relative;display:grid;grid-template-columns:12px 1fr;column-gap:var(--nx-space-3);align-items:start;padding:var(--nx-space-1) 0;font:400 var(--nx-fs-small)/1.35 var(--nx-sans);color:var(--nx-ink-2)}
.nx-steps__item::before{content:"";position:relative;z-index:1;width:12px;height:12px;margin-top:3px;box-sizing:border-box;border-radius:50%;border:1px solid var(--nx-line-2);background:var(--nx-page)}
.nx-steps__item.is-past::before{border-color:var(--nx-navy-ink);background:var(--nx-navy-ink)}
.nx-steps__item.is-current{color:var(--nx-ink)}
.nx-steps__item.is-current::before{border:2px solid var(--nx-blue);background:var(--nx-card)}
.nx-steps__item.is-past::after{content:"";position:absolute;left:5px;top:calc(var(--nx-space-1) + 15px);bottom:calc(-1 * var(--nx-space-1) - 3px);width:2px;background:var(--nx-blue)}
.nx-steps__sub{grid-column:2;margin-top:var(--nx-space-1);padding-left:var(--nx-space-3);color:var(--nx-ink-2)}
.nx-steps a{color:inherit;text-decoration:none}
.nx-steps a:hover,.nx-steps a.is-hover{color:var(--nx-ink)}
.nx-steps a:focus-visible,.nx-steps a.is-focus{outline:2px solid var(--nx-orange);outline-offset:2px}
/* code: block and inline, light */
.nx-code{display:block;margin:0;padding:var(--nx-space-4) var(--nx-space-5);border-radius:var(--nx-r-small);background:var(--nx-card-2);color:var(--nx-ink);font:400 var(--nx-fs-small)/1.6 var(--nx-mono);white-space:pre;overflow-x:auto;tab-size:2}
.nx-code .k{color:var(--nx-blue)} .nx-code .s{color:var(--nx-navy-ink-2)} .nx-code .c{color:var(--nx-ink-3)}
code.nx-code--inline,.nx-prose code{padding:0 var(--nx-space-1);border-radius:7px;background:var(--nx-card-2);color:var(--nx-ink);font:400 .88em/1 var(--nx-mono)}
/* popover: a white card anchored to a marker */
.nx-popover{position:absolute;z-index:20;width:min(320px,calc(100vw - 32px));padding:var(--nx-space-4);border:1px solid var(--nx-line);border-radius:var(--nx-r-small);background:var(--nx-card);box-shadow:var(--nx-shadow-glass);color:var(--nx-ink);opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .25s var(--nx-ease),transform .25s var(--nx-ease)}
.nx-popover.is-open{opacity:1;transform:none;pointer-events:auto}
.nx-popover .nx-num .n{font-size:30px}
.nx-popover .nx-num .s{font-size:var(--nx-fs-label)}
/* marker: a number or note reference in running text */
.nx-marker{color:inherit;text-decoration:underline 1px dotted var(--nx-ink-3);text-underline-offset:4px;cursor:pointer}
.nx-marker:hover,.nx-marker.is-hover,.nx-marker[aria-expanded=true]{color:var(--nx-navy-ink);text-decoration-color:var(--nx-blue)}
.nx-marker sup{margin-left:2px;font:500 var(--nx-fs-label)/1 var(--nx-mono);letter-spacing:0;color:var(--nx-ink-2)}
/* range slider */
.nx-range{appearance:none;-webkit-appearance:none;width:100%;height:20px;margin:0;background:transparent;cursor:pointer}
.nx-range::-webkit-slider-runnable-track{height:2px;background:var(--nx-line-2);border-radius:var(--nx-r-pill)}
.nx-range::-moz-range-track{height:2px;background:var(--nx-line-2);border-radius:var(--nx-r-pill)}
.nx-range::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;margin-top:-9px;border:1px solid var(--nx-line-2);border-radius:50%;background:var(--nx-card);box-shadow:var(--nx-shadow-chip)}
.nx-range::-moz-range-thumb{width:20px;height:20px;border:1px solid var(--nx-line-2);border-radius:50%;background:var(--nx-card);box-shadow:var(--nx-shadow-chip)}
.nx-range:hover::-webkit-slider-thumb,.nx-range.is-hover::-webkit-slider-thumb{border-color:var(--nx-ink-3)}
.nx-range:active::-webkit-slider-thumb,.nx-range.is-active::-webkit-slider-thumb{border-color:var(--nx-ink)}
.nx-range:focus-visible{outline:none}
.nx-range:focus-visible::-webkit-slider-thumb,.nx-range.is-focus::-webkit-slider-thumb{box-shadow:0 0 0 2px var(--nx-page),0 0 0 4px var(--nx-orange)}
.nx-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px var(--nx-page),0 0 0 4px var(--nx-orange)}
/* bottom sheet (phones) */
.nx-sheet-scrim{position:fixed;inset:0;z-index:40;background:color-mix(in srgb,var(--nx-ink) 28%,transparent);opacity:0;pointer-events:none;transition:opacity .4s var(--nx-ease)}
.nx-sheet{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:85vh;overflow:auto;padding:var(--nx-space-3) var(--nx-space-5) var(--nx-space-6);border-radius:var(--nx-r-card) var(--nx-r-card) 0 0;background:var(--nx-card);box-shadow:var(--nx-shadow-sheet);transform:translateY(100%);transition:transform .4s var(--nx-ease)}
.nx-sheet::before{content:"";display:block;width:40px;height:4px;margin:0 auto var(--nx-space-4);border-radius:var(--nx-r-pill);background:var(--nx-line-2)}
.nx-sheet.is-open{transform:none}
.nx-sheet.is-open~.nx-sheet-scrim,.nx-sheet-scrim.is-open{opacity:1;pointer-events:auto}
/* key cap */
.nx-kbd{display:inline-flex;align-items:center;justify-content:center;min-width:24px;padding:var(--nx-space-1) var(--nx-space-2);border:1px solid var(--nx-line-2);border-radius:7px;background:var(--nx-card);color:var(--nx-ink-2);font:500 var(--nx-fs-label)/1 var(--nx-mono)}
/* draft status dot (hollow) */
.nx-dot--draft::before{background:transparent;border:1px solid var(--nx-ink-3);box-sizing:border-box}
/* note on the web (doc.css .nx-note is the A4 size, in mm) */
.nx-note--web{margin:var(--nx-space-6) 0;padding:var(--nx-space-4) var(--nx-space-5);border-radius:var(--nx-r-small);background:var(--nx-card-2)}
.nx-note--web .nx-kicker{display:block;margin-bottom:var(--nx-space-2)}
.nx-note--web p{margin:0;font:400 var(--nx-fs-small)/1.5 var(--nx-sans);color:var(--nx-ink-2)}

/* ===== v1.3.1: audio player for articles (.nx-audio) and the paragraph being read (.nx-reading).
   Built from tokens and the v1.3 components: .nx-btn--sm, .nx-seg, .nx-progress--bar, .nx-kbd, .nx-kicker.
   State on the root: data-state="rest|playing|paused|loading|error|disabled". Rules in ../components.md. ===== */
.nx-audio{display:grid;gap:var(--nx-space-3);color:var(--nx-ink)}
.nx-audio__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--nx-space-3)}
.nx-audio__controls{display:flex;align-items:center;gap:var(--nx-space-2)}
/* icon buttons: the compact button, square */
.nx-audio__btn{width:36px;padding:0}
.nx-audio__btn svg,.nx-audio__skip svg{width:16px;height:16px}
.nx-audio__skip{padding:0 var(--nx-space-3);gap:var(--nx-space-1);font:500 var(--nx-fs-label)/1 var(--nx-mono);font-variant-numeric:tabular-nums}
.nx-audio__play .i-pause,.nx-audio__play .i-load{display:none}
.nx-audio[data-state=playing] .nx-audio__play .i-play{display:none}
.nx-audio[data-state=playing] .nx-audio__play .i-pause{display:block}
.nx-audio[data-state=loading] .nx-audio__play .i-play{display:none}
.nx-audio[data-state=loading] .nx-audio__play .i-load{display:block;animation:nx-spin 1.2s linear infinite}
@keyframes nx-spin{to{transform:rotate(360deg)}}
/* scrub: the progress bar with a range input over it; the head is ink so the reading caret stays the one orange mark */
.nx-audio__scrub{position:relative;height:20px;display:flex;align-items:center}
.nx-audio__scrub .nx-progress--bar{width:100%}
.nx-audio__scrub .nx-progress__head{background:var(--nx-ink);width:12px;height:12px;margin:-6px 0 0 -6px}
.nx-audio__scrub input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.nx-audio__scrub input:focus-visible+.nx-progress--bar .nx-progress__head,.nx-audio__scrub.is-focus .nx-progress__head{box-shadow:0 0 0 2px var(--nx-page),0 0 0 4px var(--nx-orange)}
.nx-audio__time{display:flex;justify-content:space-between;font:500 var(--nx-fs-label)/1 var(--nx-mono);font-variant-numeric:tabular-nums;color:var(--nx-ink-2)}
.nx-audio__time b{font-weight:500;color:var(--nx-ink)}
.nx-audio__speed{justify-self:start}
.nx-audio__speed .nx-seg__item{height:32px;padding:0 var(--nx-space-3);font-variant-numeric:tabular-nums}
.nx-audio__status{font:400 var(--nx-fs-small)/1.4 var(--nx-sans);color:var(--nx-ink-2)}
.nx-audio:not([data-state=error]):not([data-state=disabled]) .nx-audio__status{display:none}
/* loading: the bar breathes; error and disabled: controls off, the status line explains */
.nx-audio[data-state=loading] .nx-progress--bar{animation:nx-breathe 1.6s var(--nx-ease) infinite alternate}
@keyframes nx-breathe{from{opacity:1}to{opacity:.5}}
.nx-audio[data-state=loading] .nx-audio__skip,.nx-audio[data-state=loading] .nx-audio__scrub,
.nx-audio[data-state=error] .nx-audio__controls,.nx-audio[data-state=error] .nx-audio__scrub,.nx-audio[data-state=error] .nx-audio__time,
.nx-audio[data-state=disabled] .nx-audio__controls,.nx-audio[data-state=disabled] .nx-audio__scrub,.nx-audio[data-state=disabled] .nx-audio__time,.nx-audio[data-state=disabled] .nx-audio__speed{opacity:.5;pointer-events:none}
/* entry: "Listen · 24 min" in the article meta row (a compact ghost button) */
.nx-audio-entry svg{width:16px;height:16px}
.nx-audio-entry[aria-disabled=true],.nx-audio-entry:disabled{opacity:.5;pointer-events:none}
/* layouts */
.nx-audio--rail{padding:var(--nx-space-4);border:1px solid var(--nx-line);border-radius:var(--nx-r-small);background:var(--nx-card)}
.nx-audio--sheet{gap:var(--nx-space-4)}
.nx-audio--sheet .nx-audio__controls{justify-content:center;gap:var(--nx-space-3)}
.nx-audio--sheet .nx-audio__play{width:46px;min-height:46px}
.nx-audio--sheet .nx-audio__speed{justify-self:center}
.nx-audio--pill{display:inline-flex;align-items:center;gap:var(--nx-space-2);min-height:46px;padding:0 var(--nx-space-1) 0 var(--nx-space-4);border:1px solid var(--nx-line);border-radius:var(--nx-r-pill);background:var(--nx-card);box-shadow:var(--nx-shadow-chip)}
.nx-audio--pill .nx-audio__time{gap:var(--nx-space-1)}

/* ===== v1.3.2: fixes from the re-audit (blog-redesign/review/DS-REAUDIT.md). Rules in ../components.md. ===== */
/* table on the web (doc.css .nx-table is the A4 size, in pt and mm) */
.nx-table--web{width:100%;border-collapse:collapse;font:400 var(--nx-fs-small)/1.4 var(--nx-sans);font-variant-numeric:tabular-nums;color:var(--nx-ink)}
.nx-table--web th{font:500 var(--nx-fs-label)/1.2 var(--nx-mono);letter-spacing:var(--nx-tr-label);text-transform:uppercase;color:var(--nx-ink-2);text-align:left;padding:var(--nx-space-4) var(--nx-space-4) var(--nx-space-3);border-bottom:1px solid var(--nx-ink)}
.nx-table--web td{padding:var(--nx-space-3) var(--nx-space-4);border-bottom:1px solid var(--nx-line);vertical-align:top}
.nx-table--web .num{text-align:right}
.nx-table--web tfoot td{font-weight:500;border-top:1px solid var(--nx-ink);border-bottom:0}
.nx-table--flush th:first-child,.nx-table--flush td:first-child{padding-left:0}
.nx-table--flush th:last-child,.nx-table--flush td:last-child{padding-right:0}
/* segmented switch that scrolls: five or more items, or a set that can grow */
.nx-seg--scroll{display:flex;max-width:100%;overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - var(--nx-space-7)),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - var(--nx-space-7)),transparent)}
.nx-seg--scroll::-webkit-scrollbar{display:none}
.nx-seg--scroll .nx-seg__item{flex:none}
.nx-seg--scroll.is-end{-webkit-mask-image:none;mask-image:none}
/* code that wraps inside its box (the choice for code in article prose); one .ln span per line gives a hanging indent */
.nx-code--wrap{white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:visible}
/* --ind = the line's leading spaces, removed from the text: the line starts --ind characters in, its wrapped part 2 more (v1.3.4) */
.nx-code--wrap .ln{display:block;padding-left:calc((var(--ind,0) + 2) * 1ch);text-indent:-2ch}
/* the paragraph being read: the --nx-reading fill spread past the text (the line length never moves), and a 2 px blue rule */
.nx-reading{position:relative;background:var(--nx-reading);box-shadow:0 0 0 var(--nx-space-2) var(--nx-reading);border-radius:var(--nx-r-small);transition:background-color .4s var(--nx-ease),box-shadow .4s var(--nx-ease)}
.nx-reading::before{content:"";position:absolute;left:calc(-1 * var(--nx-space-2));top:0;bottom:0;width:2px;border-radius:var(--nx-r-pill);background:var(--nx-blue)}