/*! NS Design System + Tailwind v4
 * Generated by scripts/build-css.mjs from tailwind.entry.css. Do not edit.
 * Layer order: theme, base, ns-components, components, utilities — so a
 * Tailwind utility always beats a .ns-* default without !important.
 * Ghost/Next.js should NOT use this file; they import styles.css +
 * tokens/tailwind.css alongside their own Tailwind. See docs/INTEGRATION.md.
 * MIT © Swarnil Singhai
 */
/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, ns-components, components, utilities;
@layer theme, base, components, utilities;
@layer theme {
  :root, :host {
    --font-sans: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
    --font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    --spacing: 0.25rem;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --tracking-tight: -0.01em;
    --tracking-wide: 0.04em;
    --leading-tight: 1.15;
    --leading-snug: 1.375;
    --leading-normal: 1.5;
    --leading-relaxed: 1.625;
    --radius-sm: 4px;
    --radius-lg: 0.5rem;
    --ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-surface: var(--ns-surface);
    --color-surface-raised: var(--ns-surface-raised);
    --color-surface-sunken: var(--ns-surface-sunken);
    --color-border: var(--ns-border);
    --color-ink: var(--ns-ink);
    --color-muted: var(--ns-muted);
    --color-grid: var(--ns-grid);
    --color-success-ink: var(--ns-success-ink);
    --color-warning-ink: var(--ns-warning-ink);
    --color-error-ink: var(--ns-error-ink);
    --color-info-ink: var(--ns-info-ink);
    --color-brand-50: #eef6ff;
    --color-brand-100: #d8edff;
    --color-brand-200: #b0d7ff;
    --color-brand-300: #7cbeff;
    --color-brand-400: #1b96ff;
    --color-brand-500: #0176d3;
    --color-brand-600: #0b5cab;
    --color-brand-700: #03386b;
    --color-brand-800: #032d60;
    --color-brand-900: #001a3e;
    --color-success: #2e844a;
    --color-warning: #fe9339;
    --color-error: #ea001e;
    --spacing-card: var(--space-5);
    --spacing-card-lg: var(--space-6);
    --spacing-row: var(--space-3);
    --spacing-inline: var(--space-2);
    --spacing-grid: var(--space-6);
    --spacing-field: var(--space-1-5);
    --spacing-section: var(--space-16);
    --spacing-band: var(--space-24);
    --font-heading: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --text-display: clamp(2rem, 1.55rem + 2.2vw, 3.25rem);
    --text-display--line-height: 1.15;
    --text-h1: 2.5rem;
    --text-h1--line-height: 1.15;
    --text-h2: 2rem;
    --text-h2--line-height: 1.3;
    --text-h3: 1.5rem;
    --text-h3--line-height: 1.3;
    --text-h4: 1.25rem;
    --text-h4--line-height: 1.3;
    --text-body-lg: 1.0625rem;
    --text-body-lg--line-height: 1.6;
    --text-body: 0.875rem;
    --text-body--line-height: 1.6;
    --text-small: 0.8125rem;
    --text-small--line-height: 1.6;
    --text-mono: 0.8125rem;
    --text-fine: 0.75rem;
    --text-fine--line-height: 1.6;
    --text-mega: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
    --text-mega--line-height: 0.94;
    --text-mega--letter-spacing: -0.035em;
    --text-label: 0.6875rem;
    --text-label--line-height: 1;
    --text-label--letter-spacing: 0.09em;
    --text-label--font-weight: 700;
    --text-data: 0.6875rem;
    --text-data--line-height: 1.4;
    --font-weight-body: 400;
    --font-weight-body-strong: 600;
    --font-weight-label: 700;
    --font-weight-regular: 400;
    --leading-heading: 1.3;
    --leading-body: 1.6;
    --leading-mega: 0.94;
    --tracking-mega: -0.035em;
    --tracking-label: 0.09em;
    --radius-btn: 4px;
    --radius-card: 6px;
    --radius-pill: 9999px;
    --shadow-card: 0 1px 0 rgb(0 0 0 / 0.02);
    --shadow-raised: 0 4px 16px -8px rgb(0 0 0 / 0.18);
    --shadow-brand: 0 0 0 1px color-mix(in srgb, #0176d3 55%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-brand: 0 0 0 1px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
    }
    --shadow-focus: 0 0 0 3px color-mix(in srgb, #0176d3 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
    }
    --container-prose: 42rem;
    --container-narrow: 56rem;
    --container-page: 72rem;
    --container-wide: 88rem;
  }
}
@layer base {
  *, ::after, ::before, ::backdrop, ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }
  html, :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(--default-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }
  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }
  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }
  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }
  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }
  b, strong {
    font-weight: bolder;
  }
  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }
  small {
    font-size: 80%;
  }
  sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }
  sub {
    bottom: -0.25em;
  }
  sup {
    top: -0.5em;
  }
  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }
  :-moz-focusring:where(:not(iframe)) {
    outline: auto;
  }
  progress {
    vertical-align: baseline;
  }
  summary {
    display: list-item;
  }
  ol, ul, menu {
    list-style: none;
  }
  img, svg, video, canvas, audio, iframe, embed, object {
    display: block;
    vertical-align: middle;
  }
  img, video {
    max-width: 100%;
    height: auto;
  }
  button, input, select, optgroup, textarea, ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }
  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }
  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }
  ::file-selector-button {
    margin-inline-end: 4px;
  }
  ::placeholder {
    opacity: 1;
  }
  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;
      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }
  textarea {
    resize: vertical;
  }
  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }
  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }
  ::-webkit-datetime-edit {
    display: inline-flex;
  }
  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }
  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }
  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }
  :-moz-ui-invalid {
    box-shadow: none;
  }
  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
    appearance: button;
  }
  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
    height: auto;
  }
  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}
@layer utilities {
  .collapse {
    visibility: collapse;
  }
  .invisible {
    visibility: hidden;
  }
  .visible {
    visibility: visible;
  }
  .fixed {
    position: fixed;
  }
  .static {
    position: static;
  }
  .sticky {
    position: sticky;
  }
  .z-base {
    z-index: var(--z-base);
  }
  .z-dropdown {
    z-index: var(--z-dropdown);
  }
  .z-overlay {
    z-index: var(--z-overlay);
  }
  .z-raised {
    z-index: var(--z-raised);
  }
  .z-sticky {
    z-index: var(--z-sticky);
  }
  .z-toast {
    z-index: var(--z-toast);
  }
  .container {
    width: 100%;
    @media (width >= 40rem) {
      max-width: 40rem;
    }
    @media (width >= 48rem) {
      max-width: 48rem;
    }
    @media (width >= 64rem) {
      max-width: 64rem;
    }
    @media (width >= 80rem) {
      max-width: 80rem;
    }
    @media (width >= 96rem) {
      max-width: 96rem;
    }
  }
  .m-0 {
    margin: 0px;
  }
  .m-band {
    margin: var(--spacing-band);
  }
  .m-card {
    margin: var(--spacing-card);
  }
  .m-card-lg {
    margin: var(--spacing-card-lg);
  }
  .m-field {
    margin: var(--spacing-field);
  }
  .m-grid {
    margin: var(--spacing-grid);
  }
  .m-inline {
    margin: var(--spacing-inline);
  }
  .m-row {
    margin: var(--spacing-row);
  }
  .m-section {
    margin: var(--spacing-section);
  }
  .container-page {
    width: 100%;
    max-width: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .mx-band {
    margin-inline: var(--spacing-band);
  }
  .mx-card {
    margin-inline: var(--spacing-card);
  }
  .mx-card-lg {
    margin-inline: var(--spacing-card-lg);
  }
  .mx-field {
    margin-inline: var(--spacing-field);
  }
  .mx-grid {
    margin-inline: var(--spacing-grid);
  }
  .mx-inline {
    margin-inline: var(--spacing-inline);
  }
  .mx-row {
    margin-inline: var(--spacing-row);
  }
  .mx-section {
    margin-inline: var(--spacing-section);
  }
  .my-band {
    margin-block: var(--spacing-band);
  }
  .my-card {
    margin-block: var(--spacing-card);
  }
  .my-card-lg {
    margin-block: var(--spacing-card-lg);
  }
  .my-field {
    margin-block: var(--spacing-field);
  }
  .my-grid {
    margin-block: var(--spacing-grid);
  }
  .my-inline {
    margin-block: var(--spacing-inline);
  }
  .my-row {
    margin-block: var(--spacing-row);
  }
  .my-section {
    margin-block: var(--spacing-section);
  }
  .ms-auto {
    margin-inline-start: auto;
  }
  .mt-0\.5 {
    margin-top: calc(var(--spacing) * 0.5);
  }
  .mt-1\.5 {
    margin-top: calc(var(--spacing) * 1.5);
  }
  .mt-3\.5 {
    margin-top: calc(var(--spacing) * 3.5);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .mt-\[3px\] {
    margin-top: 3px;
  }
  .mt-\[18px\] {
    margin-top: 18px;
  }
  .mb-0 {
    margin-bottom: 0px;
  }
  .mb-0\.5 {
    margin-bottom: calc(var(--spacing) * 0.5);
  }
  .mb-1 {
    margin-bottom: var(--spacing);
  }
  .mb-1\.5 {
    margin-bottom: calc(var(--spacing) * 1.5);
  }
  .mb-2 {
    margin-bottom: calc(var(--spacing) * 2);
  }
  .mb-2\.5 {
    margin-bottom: calc(var(--spacing) * 2.5);
  }
  .mb-4 {
    margin-bottom: calc(var(--spacing) * 4);
  }
  .mb-\[5px\] {
    margin-bottom: 5px;
  }
  .mb-\[18px\] {
    margin-bottom: 18px;
  }
  .mb-\[22px\] {
    margin-bottom: 22px;
  }
  .mb-\[26px\] {
    margin-bottom: 26px;
  }
  .block {
    display: block;
  }
  .contents {
    display: contents;
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .hidden {
    display: none;
  }
  .inline {
    display: inline;
  }
  .table {
    display: table;
  }
  .h-2\.5 {
    height: calc(var(--spacing) * 2.5);
  }
  .h-3 {
    height: calc(var(--spacing) * 3);
  }
  .h-4 {
    height: calc(var(--spacing) * 4);
  }
  .h-8 {
    height: calc(var(--spacing) * 8);
  }
  .h-11 {
    height: calc(var(--spacing) * 11);
  }
  .h-12 {
    height: calc(var(--spacing) * 12);
  }
  .h-14 {
    height: calc(var(--spacing) * 14);
  }
  .h-16 {
    height: calc(var(--spacing) * 16);
  }
  .h-20 {
    height: calc(var(--spacing) * 20);
  }
  .h-40 {
    height: calc(var(--spacing) * 40);
  }
  .h-\[52px\] {
    height: 52px;
  }
  .h-\[70px\] {
    height: 70px;
  }
  .h-\[90px\] {
    height: 90px;
  }
  .h-\[150px\] {
    height: 150px;
  }
  .w-4 {
    width: calc(var(--spacing) * 4);
  }
  .w-8 {
    width: calc(var(--spacing) * 8);
  }
  .w-12 {
    width: calc(var(--spacing) * 12);
  }
  .w-14 {
    width: calc(var(--spacing) * 14);
  }
  .w-16 {
    width: calc(var(--spacing) * 16);
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-\[22px\] {
    width: 22px;
  }
  .w-\[34px\] {
    width: 34px;
  }
  .w-\[52px\] {
    width: 52px;
  }
  .w-\[74px\] {
    width: 74px;
  }
  .w-full {
    width: 100%;
  }
  .max-w-\[56ch\] {
    max-width: 56ch;
  }
  .max-w-\[230px\] {
    max-width: 230px;
  }
  .max-w-page {
    max-width: var(--container-page);
  }
  .flex-1 {
    flex: 1;
  }
  .flex-none {
    flex: none;
  }
  .shrink-0 {
    flex-shrink: 0;
  }
  .grow {
    flex-grow: 1;
  }
  .border-collapse {
    border-collapse: collapse;
  }
  .transform {
    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
  }
  .resize {
    resize: both;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-\[auto_1fr\] {
    grid-template-columns: auto 1fr;
  }
  .flex-col {
    flex-direction: column;
  }
  .flex-wrap {
    flex-wrap: wrap;
  }
  .items-baseline {
    align-items: baseline;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .items-start {
    align-items: flex-start;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .gap-0\.5 {
    gap: calc(var(--spacing) * 0.5);
  }
  .gap-1 {
    gap: var(--spacing);
  }
  .gap-1\.5 {
    gap: calc(var(--spacing) * 1.5);
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .gap-2\.5 {
    gap: calc(var(--spacing) * 2.5);
  }
  .gap-3 {
    gap: calc(var(--spacing) * 3);
  }
  .gap-3\.5 {
    gap: calc(var(--spacing) * 3.5);
  }
  .gap-4 {
    gap: calc(var(--spacing) * 4);
  }
  .gap-6 {
    gap: calc(var(--spacing) * 6);
  }
  .gap-7 {
    gap: calc(var(--spacing) * 7);
  }
  .gap-8 {
    gap: calc(var(--spacing) * 8);
  }
  .gap-\[\.4em\] {
    gap: .4em;
  }
  .gap-\[7px\] {
    gap: 7px;
  }
  .gap-\[18px\] {
    gap: 18px;
  }
  .gap-\[26px\] {
    gap: 26px;
  }
  .gap-band {
    gap: var(--spacing-band);
  }
  .gap-card {
    gap: var(--spacing-card);
  }
  .gap-card-lg {
    gap: var(--spacing-card-lg);
  }
  .gap-field {
    gap: var(--spacing-field);
  }
  .gap-grid {
    gap: var(--spacing-grid);
  }
  .gap-inline {
    gap: var(--spacing-inline);
  }
  .gap-row {
    gap: var(--spacing-row);
  }
  .gap-section {
    gap: var(--spacing-section);
  }
  :where(.space-y-band > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing-band) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing-band) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-card > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing-card) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing-card) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-row > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing-row) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing-row) * calc(1 - var(--tw-space-y-reverse)));
  }
  :where(.space-y-section > :not(:last-child)) {
    --tw-space-y-reverse: 0;
    margin-block-start: calc(var(--spacing-section) * var(--tw-space-y-reverse));
    margin-block-end: calc(var(--spacing-section) * calc(1 - var(--tw-space-y-reverse)));
  }
  .gap-x-band {
    column-gap: var(--spacing-band);
  }
  .gap-x-card {
    column-gap: var(--spacing-card);
  }
  .gap-x-card-lg {
    column-gap: var(--spacing-card-lg);
  }
  .gap-x-field {
    column-gap: var(--spacing-field);
  }
  .gap-x-grid {
    column-gap: var(--spacing-grid);
  }
  .gap-x-inline {
    column-gap: var(--spacing-inline);
  }
  .gap-x-row {
    column-gap: var(--spacing-row);
  }
  .gap-x-section {
    column-gap: var(--spacing-section);
  }
  .gap-y-band {
    row-gap: var(--spacing-band);
  }
  .gap-y-card {
    row-gap: var(--spacing-card);
  }
  .gap-y-card-lg {
    row-gap: var(--spacing-card-lg);
  }
  .gap-y-field {
    row-gap: var(--spacing-field);
  }
  .gap-y-grid {
    row-gap: var(--spacing-grid);
  }
  .gap-y-inline {
    row-gap: var(--spacing-inline);
  }
  .gap-y-row {
    row-gap: var(--spacing-row);
  }
  .gap-y-section {
    row-gap: var(--spacing-section);
  }
  .overflow-hidden {
    overflow: hidden;
  }
  .overflow-x-auto {
    overflow-x: auto;
  }
  .overflow-x-hidden {
    overflow-x: hidden;
  }
  .rounded {
    border-radius: 0.25rem;
  }
  .rounded-btn {
    border-radius: var(--radius-btn);
  }
  .rounded-card {
    border-radius: var(--radius-card);
  }
  .rounded-lg {
    border-radius: var(--radius-lg);
  }
  .rounded-pill {
    border-radius: var(--radius-pill);
  }
  .rounded-sm {
    border-radius: var(--radius-sm);
  }
  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }
  .border-s-\[3px\] {
    border-inline-start-style: var(--tw-border-style);
    border-inline-start-width: 3px;
  }
  .border-t {
    border-top-style: var(--tw-border-style);
    border-top-width: 1px;
  }
  .border-b {
    border-bottom-style: var(--tw-border-style);
    border-bottom-width: 1px;
  }
  .border-border {
    border-color: var(--ns-border);
  }
  .border-brand-50 {
    border-color: var(--color-brand-50);
  }
  .border-brand-100 {
    border-color: var(--color-brand-100);
  }
  .border-brand-200 {
    border-color: var(--color-brand-200);
  }
  .border-brand-300 {
    border-color: var(--color-brand-300);
  }
  .border-brand-400 {
    border-color: var(--color-brand-400);
  }
  .border-brand-500 {
    border-color: var(--color-brand-500);
  }
  .border-brand-600 {
    border-color: var(--color-brand-600);
  }
  .border-brand-700 {
    border-color: var(--color-brand-700);
  }
  .border-brand-800 {
    border-color: var(--color-brand-800);
  }
  .border-brand-900 {
    border-color: var(--color-brand-900);
  }
  .border-error {
    border-color: var(--color-error);
  }
  .border-grid {
    border-color: var(--ns-grid);
  }
  .border-ink {
    border-color: var(--ns-ink);
  }
  .border-label-ink {
    border-color: var(--ns-label);
  }
  .border-muted {
    border-color: var(--ns-muted);
  }
  .border-success {
    border-color: var(--color-success);
  }
  .border-surface {
    border-color: var(--ns-surface);
  }
  .border-surface-raised {
    border-color: var(--ns-surface-raised);
  }
  .border-surface-sunken {
    border-color: var(--ns-surface-sunken);
  }
  .border-warning {
    border-color: var(--color-warning);
  }
  .bg-border {
    background-color: var(--ns-border);
  }
  .bg-brand-50 {
    background-color: var(--color-brand-50);
  }
  .bg-brand-100 {
    background-color: var(--color-brand-100);
  }
  .bg-brand-200 {
    background-color: var(--color-brand-200);
  }
  .bg-brand-300 {
    background-color: var(--color-brand-300);
  }
  .bg-brand-400 {
    background-color: var(--color-brand-400);
  }
  .bg-brand-500 {
    background-color: var(--color-brand-500);
  }
  .bg-brand-600 {
    background-color: var(--color-brand-600);
  }
  .bg-brand-700 {
    background-color: var(--color-brand-700);
  }
  .bg-brand-800 {
    background-color: var(--color-brand-800);
  }
  .bg-brand-900 {
    background-color: var(--color-brand-900);
  }
  .bg-chart-1 {
    background-color: var(--chart-cat-1);
  }
  .bg-chart-2 {
    background-color: var(--chart-cat-2);
  }
  .bg-chart-3 {
    background-color: var(--chart-cat-3);
  }
  .bg-chart-4 {
    background-color: var(--chart-cat-4);
  }
  .bg-chart-5 {
    background-color: var(--chart-cat-5);
  }
  .bg-chart-6 {
    background-color: var(--chart-cat-6);
  }
  .bg-chart-7 {
    background-color: var(--chart-cat-7);
  }
  .bg-error {
    background-color: var(--color-error);
  }
  .bg-grid {
    background-color: var(--ns-grid);
  }
  .bg-ink {
    background-color: var(--ns-ink);
  }
  .bg-label-ink {
    background-color: var(--ns-label);
  }
  .bg-muted {
    background-color: var(--ns-muted);
  }
  .bg-success {
    background-color: var(--color-success);
  }
  .bg-surface {
    background-color: var(--ns-surface);
  }
  .bg-surface-raised {
    background-color: var(--ns-surface-raised);
  }
  .bg-surface-sunken {
    background-color: var(--ns-surface-sunken);
  }
  .bg-warning {
    background-color: var(--color-warning);
  }
  .fill-border {
    fill: var(--ns-border);
  }
  .fill-brand-50 {
    fill: var(--color-brand-50);
  }
  .fill-brand-100 {
    fill: var(--color-brand-100);
  }
  .fill-brand-200 {
    fill: var(--color-brand-200);
  }
  .fill-brand-300 {
    fill: var(--color-brand-300);
  }
  .fill-brand-400 {
    fill: var(--color-brand-400);
  }
  .fill-brand-500 {
    fill: var(--color-brand-500);
  }
  .fill-brand-600 {
    fill: var(--color-brand-600);
  }
  .fill-brand-700 {
    fill: var(--color-brand-700);
  }
  .fill-brand-800 {
    fill: var(--color-brand-800);
  }
  .fill-brand-900 {
    fill: var(--color-brand-900);
  }
  .fill-chart-1 {
    fill: var(--chart-cat-1);
  }
  .fill-chart-2 {
    fill: var(--chart-cat-2);
  }
  .fill-chart-3 {
    fill: var(--chart-cat-3);
  }
  .fill-chart-4 {
    fill: var(--chart-cat-4);
  }
  .fill-chart-5 {
    fill: var(--chart-cat-5);
  }
  .fill-chart-6 {
    fill: var(--chart-cat-6);
  }
  .fill-chart-7 {
    fill: var(--chart-cat-7);
  }
  .fill-error {
    fill: var(--color-error);
  }
  .fill-grid {
    fill: var(--ns-grid);
  }
  .fill-ink {
    fill: var(--ns-ink);
  }
  .fill-label-ink {
    fill: var(--ns-label);
  }
  .fill-muted {
    fill: var(--ns-muted);
  }
  .fill-success {
    fill: var(--color-success);
  }
  .fill-surface {
    fill: var(--ns-surface);
  }
  .fill-surface-raised {
    fill: var(--ns-surface-raised);
  }
  .fill-surface-sunken {
    fill: var(--ns-surface-sunken);
  }
  .fill-warning {
    fill: var(--color-warning);
  }
  .stroke-brand-50 {
    stroke: var(--color-brand-50);
  }
  .stroke-brand-100 {
    stroke: var(--color-brand-100);
  }
  .stroke-brand-200 {
    stroke: var(--color-brand-200);
  }
  .stroke-brand-300 {
    stroke: var(--color-brand-300);
  }
  .stroke-brand-400 {
    stroke: var(--color-brand-400);
  }
  .stroke-brand-500 {
    stroke: var(--color-brand-500);
  }
  .stroke-brand-600 {
    stroke: var(--color-brand-600);
  }
  .stroke-brand-700 {
    stroke: var(--color-brand-700);
  }
  .stroke-brand-800 {
    stroke: var(--color-brand-800);
  }
  .stroke-brand-900 {
    stroke: var(--color-brand-900);
  }
  .stroke-chart-1 {
    stroke: var(--chart-cat-1);
  }
  .stroke-chart-2 {
    stroke: var(--chart-cat-2);
  }
  .stroke-chart-3 {
    stroke: var(--chart-cat-3);
  }
  .stroke-chart-4 {
    stroke: var(--chart-cat-4);
  }
  .stroke-chart-5 {
    stroke: var(--chart-cat-5);
  }
  .stroke-chart-6 {
    stroke: var(--chart-cat-6);
  }
  .stroke-chart-7 {
    stroke: var(--chart-cat-7);
  }
  .p-0 {
    padding: 0px;
  }
  .p-1 {
    padding: var(--spacing);
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .p-3 {
    padding: calc(var(--spacing) * 3);
  }
  .p-3\.5 {
    padding: calc(var(--spacing) * 3.5);
  }
  .p-4 {
    padding: calc(var(--spacing) * 4);
  }
  .p-5 {
    padding: calc(var(--spacing) * 5);
  }
  .p-6 {
    padding: calc(var(--spacing) * 6);
  }
  .p-8 {
    padding: calc(var(--spacing) * 8);
  }
  .p-12 {
    padding: calc(var(--spacing) * 12);
  }
  .p-16 {
    padding: calc(var(--spacing) * 16);
  }
  .p-24 {
    padding: calc(var(--spacing) * 24);
  }
  .p-\[22px\] {
    padding: 22px;
  }
  .p-band {
    padding: var(--spacing-band);
  }
  .p-card {
    padding: var(--spacing-card);
  }
  .p-card-lg {
    padding: var(--spacing-card-lg);
  }
  .p-field {
    padding: var(--spacing-field);
  }
  .p-grid {
    padding: var(--spacing-grid);
  }
  .p-inline {
    padding: var(--spacing-inline);
  }
  .p-row {
    padding: var(--spacing-row);
  }
  .p-section {
    padding: var(--spacing-section);
  }
  .px-2\.5 {
    padding-inline: calc(var(--spacing) * 2.5);
  }
  .px-3 {
    padding-inline: calc(var(--spacing) * 3);
  }
  .px-\[5px\] {
    padding-inline: 5px;
  }
  .px-band {
    padding-inline: var(--spacing-band);
  }
  .px-card {
    padding-inline: var(--spacing-card);
  }
  .px-card-lg {
    padding-inline: var(--spacing-card-lg);
  }
  .px-field {
    padding-inline: var(--spacing-field);
  }
  .px-grid {
    padding-inline: var(--spacing-grid);
  }
  .px-inline {
    padding-inline: var(--spacing-inline);
  }
  .px-row {
    padding-inline: var(--spacing-row);
  }
  .px-section {
    padding-inline: var(--spacing-section);
  }
  .py-1\.5 {
    padding-block: calc(var(--spacing) * 1.5);
  }
  .py-2 {
    padding-block: calc(var(--spacing) * 2);
  }
  .py-2\.5 {
    padding-block: calc(var(--spacing) * 2.5);
  }
  .py-\[5px\] {
    padding-block: 5px;
  }
  .py-\[9px\] {
    padding-block: 9px;
  }
  .py-band {
    padding-block: var(--spacing-band);
  }
  .py-card {
    padding-block: var(--spacing-card);
  }
  .py-card-lg {
    padding-block: var(--spacing-card-lg);
  }
  .py-field {
    padding-block: var(--spacing-field);
  }
  .py-grid {
    padding-block: var(--spacing-grid);
  }
  .py-inline {
    padding-block: var(--spacing-inline);
  }
  .py-px {
    padding-block: 1px;
  }
  .py-row {
    padding-block: var(--spacing-row);
  }
  .py-section {
    padding-block: var(--spacing-section);
  }
  .ps-4 {
    padding-inline-start: calc(var(--spacing) * 4);
  }
  .pt-0\.5 {
    padding-top: calc(var(--spacing) * 0.5);
  }
  .pt-1 {
    padding-top: var(--spacing);
  }
  .pt-2 {
    padding-top: calc(var(--spacing) * 2);
  }
  .pt-band {
    padding-top: var(--spacing-band);
  }
  .pt-card {
    padding-top: var(--spacing-card);
  }
  .pt-card-lg {
    padding-top: var(--spacing-card-lg);
  }
  .pt-field {
    padding-top: var(--spacing-field);
  }
  .pt-grid {
    padding-top: var(--spacing-grid);
  }
  .pt-inline {
    padding-top: var(--spacing-inline);
  }
  .pt-row {
    padding-top: var(--spacing-row);
  }
  .pt-section {
    padding-top: var(--spacing-section);
  }
  .pr-band {
    padding-right: var(--spacing-band);
  }
  .pr-card {
    padding-right: var(--spacing-card);
  }
  .pr-card-lg {
    padding-right: var(--spacing-card-lg);
  }
  .pr-field {
    padding-right: var(--spacing-field);
  }
  .pr-grid {
    padding-right: var(--spacing-grid);
  }
  .pr-inline {
    padding-right: var(--spacing-inline);
  }
  .pr-row {
    padding-right: var(--spacing-row);
  }
  .pr-section {
    padding-right: var(--spacing-section);
  }
  .pb-1 {
    padding-bottom: var(--spacing);
  }
  .pb-3 {
    padding-bottom: calc(var(--spacing) * 3);
  }
  .pb-band {
    padding-bottom: var(--spacing-band);
  }
  .pb-card {
    padding-bottom: var(--spacing-card);
  }
  .pb-card-lg {
    padding-bottom: var(--spacing-card-lg);
  }
  .pb-field {
    padding-bottom: var(--spacing-field);
  }
  .pb-grid {
    padding-bottom: var(--spacing-grid);
  }
  .pb-inline {
    padding-bottom: var(--spacing-inline);
  }
  .pb-row {
    padding-bottom: var(--spacing-row);
  }
  .pb-section {
    padding-bottom: var(--spacing-section);
  }
  .pl-band {
    padding-left: var(--spacing-band);
  }
  .pl-card {
    padding-left: var(--spacing-card);
  }
  .pl-card-lg {
    padding-left: var(--spacing-card-lg);
  }
  .pl-field {
    padding-left: var(--spacing-field);
  }
  .pl-grid {
    padding-left: var(--spacing-grid);
  }
  .pl-inline {
    padding-left: var(--spacing-inline);
  }
  .pl-row {
    padding-left: var(--spacing-row);
  }
  .pl-section {
    padding-left: var(--spacing-section);
  }
  .font-heading {
    font-family: var(--font-heading);
  }
  .font-mono {
    font-family: var(--font-mono);
  }
  .font-sans {
    font-family: var(--font-sans);
  }
  .font-serif {
    font-family: var(--font-serif);
  }
  .text-label {
    font-size: var(--text-label);
    line-height: var(--tw-leading, var(--text-label--line-height));
    letter-spacing: var(--tw-tracking, var(--text-label--letter-spacing));
    font-weight: var(--tw-font-weight, var(--text-label--font-weight));
  }
  .text-mega {
    font-size: var(--text-mega);
    line-height: var(--tw-leading, var(--text-mega--line-height));
    letter-spacing: var(--tw-tracking, var(--text-mega--letter-spacing));
  }
  .text-body {
    font-size: var(--text-body);
    line-height: var(--tw-leading, var(--text-body--line-height));
  }
  .text-body-lg {
    font-size: var(--text-body-lg);
    line-height: var(--tw-leading, var(--text-body-lg--line-height));
  }
  .text-data {
    font-size: var(--text-data);
    line-height: var(--tw-leading, var(--text-data--line-height));
  }
  .text-display {
    font-size: var(--text-display);
    line-height: var(--tw-leading, var(--text-display--line-height));
  }
  .text-fine {
    font-size: var(--text-fine);
    line-height: var(--tw-leading, var(--text-fine--line-height));
  }
  .text-h1 {
    font-size: var(--text-h1);
    line-height: var(--tw-leading, var(--text-h1--line-height));
  }
  .text-h2 {
    font-size: var(--text-h2);
    line-height: var(--tw-leading, var(--text-h2--line-height));
  }
  .text-h3 {
    font-size: var(--text-h3);
    line-height: var(--tw-leading, var(--text-h3--line-height));
  }
  .text-h4 {
    font-size: var(--text-h4);
    line-height: var(--tw-leading, var(--text-h4--line-height));
  }
  .text-small {
    font-size: var(--text-small);
    line-height: var(--tw-leading, var(--text-small--line-height));
  }
  .text-\[9\.5px\] {
    font-size: 9.5px;
  }
  .text-\[9px\] {
    font-size: 9px;
  }
  .text-\[10px\] {
    font-size: 10px;
  }
  .text-\[20px\] {
    font-size: 20px;
  }
  .text-mono {
    font-size: var(--text-mono);
  }
  .leading-body {
    --tw-leading: var(--leading-body);
    line-height: var(--leading-body);
  }
  .leading-heading {
    --tw-leading: var(--leading-heading);
    line-height: var(--leading-heading);
  }
  .leading-mega {
    --tw-leading: var(--leading-mega);
    line-height: var(--leading-mega);
  }
  .leading-normal {
    --tw-leading: var(--leading-normal);
    line-height: var(--leading-normal);
  }
  .leading-relaxed {
    --tw-leading: var(--leading-relaxed);
    line-height: var(--leading-relaxed);
  }
  .leading-tight {
    --tw-leading: var(--leading-tight);
    line-height: var(--leading-tight);
  }
  .font-body {
    --tw-font-weight: var(--font-weight-body);
    font-weight: var(--font-weight-body);
  }
  .font-body-strong {
    --tw-font-weight: var(--font-weight-body-strong);
    font-weight: var(--font-weight-body-strong);
  }
  .font-label {
    --tw-font-weight: var(--font-weight-label);
    font-weight: var(--font-weight-label);
  }
  .font-medium {
    --tw-font-weight: var(--font-weight-medium);
    font-weight: var(--font-weight-medium);
  }
  .font-regular {
    --tw-font-weight: var(--font-weight-regular);
    font-weight: var(--font-weight-regular);
  }
  .font-semibold {
    --tw-font-weight: var(--font-weight-semibold);
    font-weight: var(--font-weight-semibold);
  }
  .tracking-label {
    --tw-tracking: var(--tracking-label);
    letter-spacing: var(--tracking-label);
  }
  .tracking-mega {
    --tw-tracking: var(--tracking-mega);
    letter-spacing: var(--tracking-mega);
  }
  .tracking-tight {
    --tw-tracking: var(--tracking-tight);
    letter-spacing: var(--tracking-tight);
  }
  .tracking-wide {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .text-border {
    color: var(--ns-border);
  }
  .text-brand-50 {
    color: var(--color-brand-50);
  }
  .text-brand-100 {
    color: var(--color-brand-100);
  }
  .text-brand-200 {
    color: var(--color-brand-200);
  }
  .text-brand-300 {
    color: var(--color-brand-300);
  }
  .text-brand-400 {
    color: var(--color-brand-400);
  }
  .text-brand-500 {
    color: var(--color-brand-500);
  }
  .text-brand-600 {
    color: var(--color-brand-600);
  }
  .text-brand-700 {
    color: var(--color-brand-700);
  }
  .text-brand-800 {
    color: var(--color-brand-800);
  }
  .text-brand-900 {
    color: var(--color-brand-900);
  }
  .text-chart-1 {
    color: var(--chart-cat-1);
  }
  .text-chart-2 {
    color: var(--chart-cat-2);
  }
  .text-chart-3 {
    color: var(--chart-cat-3);
  }
  .text-chart-4 {
    color: var(--chart-cat-4);
  }
  .text-chart-5 {
    color: var(--chart-cat-5);
  }
  .text-chart-6 {
    color: var(--chart-cat-6);
  }
  .text-chart-7 {
    color: var(--chart-cat-7);
  }
  .text-error {
    color: var(--color-error);
  }
  .text-error-ink {
    color: var(--ns-error-ink);
  }
  .text-grid {
    color: var(--ns-grid);
  }
  .text-info-ink {
    color: var(--ns-info-ink);
  }
  .text-ink {
    color: var(--ns-ink);
  }
  .text-label-ink {
    color: var(--ns-label);
  }
  .text-muted {
    color: var(--ns-muted);
  }
  .text-success {
    color: var(--color-success);
  }
  .text-success-ink {
    color: var(--ns-success-ink);
  }
  .text-surface {
    color: var(--ns-surface);
  }
  .text-surface-raised {
    color: var(--ns-surface-raised);
  }
  .text-surface-sunken {
    color: var(--ns-surface-sunken);
  }
  .text-warning {
    color: var(--color-warning);
  }
  .text-warning-ink {
    color: var(--ns-warning-ink);
  }
  .uppercase {
    text-transform: uppercase;
  }
  .italic {
    font-style: italic;
  }
  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);
  }
  .underline {
    text-decoration-line: underline;
  }
  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-brand {
    --tw-shadow: 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb, #0176d3 55%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow: 0 0 0 1px var(--tw-shadow-color, color-mix(in srgb, var(--color-brand-500) 55%, transparent));
    }
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-card {
    --tw-shadow: 0 1px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.02));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-focus {
    --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb, #0176d3 25%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      --tw-shadow: 0 0 0 3px var(--tw-shadow-color, color-mix(in srgb, var(--color-brand-500) 25%, transparent));
    }
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .shadow-raised {
    --tw-shadow: 0 4px 16px -8px var(--tw-shadow-color, rgb(0 0 0 / 0.18));
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-1 {
    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }
  .ring-border {
    --tw-ring-color: var(--ns-border);
  }
  .ring-brand-50 {
    --tw-ring-color: var(--color-brand-50);
  }
  .ring-brand-100 {
    --tw-ring-color: var(--color-brand-100);
  }
  .ring-brand-200 {
    --tw-ring-color: var(--color-brand-200);
  }
  .ring-brand-300 {
    --tw-ring-color: var(--color-brand-300);
  }
  .ring-brand-400 {
    --tw-ring-color: var(--color-brand-400);
  }
  .ring-brand-500 {
    --tw-ring-color: var(--color-brand-500);
  }
  .ring-brand-600 {
    --tw-ring-color: var(--color-brand-600);
  }
  .ring-brand-700 {
    --tw-ring-color: var(--color-brand-700);
  }
  .ring-brand-800 {
    --tw-ring-color: var(--color-brand-800);
  }
  .ring-brand-900 {
    --tw-ring-color: var(--color-brand-900);
  }
  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }
  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .grayscale {
    --tw-grayscale: grayscale(100%);
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .filter {
    filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
  }
  .backdrop-filter {
    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
  }
  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }
  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
  .ring-inset {
    --tw-ring-inset: inset;
  }
  .last\:border-0:last-child {
    border-style: var(--tw-border-style);
    border-width: 0px;
  }
  .last\:pb-0:last-child {
    padding-bottom: 0px;
  }
  .first-of-type\:border-t-0:first-of-type {
    border-top-style: var(--tw-border-style);
    border-top-width: 0px;
  }
  @media (hover: hover) {
    .hover\:border-border:hover {
      border-color: var(--ns-border);
    }
    .hover\:border-brand-50:hover {
      border-color: var(--color-brand-50);
    }
    .hover\:border-brand-100:hover {
      border-color: var(--color-brand-100);
    }
    .hover\:border-brand-200:hover {
      border-color: var(--color-brand-200);
    }
    .hover\:border-brand-300:hover {
      border-color: var(--color-brand-300);
    }
    .hover\:border-brand-400:hover {
      border-color: var(--color-brand-400);
    }
    .hover\:border-brand-500:hover {
      border-color: var(--color-brand-500);
    }
    .hover\:border-brand-600:hover {
      border-color: var(--color-brand-600);
    }
    .hover\:border-brand-700:hover {
      border-color: var(--color-brand-700);
    }
    .hover\:border-brand-800:hover {
      border-color: var(--color-brand-800);
    }
    .hover\:border-brand-900:hover {
      border-color: var(--color-brand-900);
    }
    .hover\:border-grid:hover {
      border-color: var(--ns-grid);
    }
    .hover\:border-ink:hover {
      border-color: var(--ns-ink);
    }
    .hover\:border-label-ink:hover {
      border-color: var(--ns-label);
    }
    .hover\:border-muted:hover {
      border-color: var(--ns-muted);
    }
    .hover\:border-surface:hover {
      border-color: var(--ns-surface);
    }
    .hover\:border-surface-raised:hover {
      border-color: var(--ns-surface-raised);
    }
    .hover\:border-surface-sunken:hover {
      border-color: var(--ns-surface-sunken);
    }
    .hover\:bg-border:hover {
      background-color: var(--ns-border);
    }
    .hover\:bg-brand-50:hover {
      background-color: var(--color-brand-50);
    }
    .hover\:bg-brand-100:hover {
      background-color: var(--color-brand-100);
    }
    .hover\:bg-brand-200:hover {
      background-color: var(--color-brand-200);
    }
    .hover\:bg-brand-300:hover {
      background-color: var(--color-brand-300);
    }
    .hover\:bg-brand-400:hover {
      background-color: var(--color-brand-400);
    }
    .hover\:bg-brand-500:hover {
      background-color: var(--color-brand-500);
    }
    .hover\:bg-brand-600:hover {
      background-color: var(--color-brand-600);
    }
    .hover\:bg-brand-700:hover {
      background-color: var(--color-brand-700);
    }
    .hover\:bg-brand-800:hover {
      background-color: var(--color-brand-800);
    }
    .hover\:bg-brand-900:hover {
      background-color: var(--color-brand-900);
    }
    .hover\:bg-grid:hover {
      background-color: var(--ns-grid);
    }
    .hover\:bg-ink:hover {
      background-color: var(--ns-ink);
    }
    .hover\:bg-label-ink:hover {
      background-color: var(--ns-label);
    }
    .hover\:bg-muted:hover {
      background-color: var(--ns-muted);
    }
    .hover\:bg-surface:hover {
      background-color: var(--ns-surface);
    }
    .hover\:bg-surface-raised:hover {
      background-color: var(--ns-surface-raised);
    }
    .hover\:bg-surface-sunken:hover {
      background-color: var(--ns-surface-sunken);
    }
    .hover\:fill-border:hover {
      fill: var(--ns-border);
    }
    .hover\:fill-brand-50:hover {
      fill: var(--color-brand-50);
    }
    .hover\:fill-brand-100:hover {
      fill: var(--color-brand-100);
    }
    .hover\:fill-brand-200:hover {
      fill: var(--color-brand-200);
    }
    .hover\:fill-brand-300:hover {
      fill: var(--color-brand-300);
    }
    .hover\:fill-brand-400:hover {
      fill: var(--color-brand-400);
    }
    .hover\:fill-brand-500:hover {
      fill: var(--color-brand-500);
    }
    .hover\:fill-brand-600:hover {
      fill: var(--color-brand-600);
    }
    .hover\:fill-brand-700:hover {
      fill: var(--color-brand-700);
    }
    .hover\:fill-brand-800:hover {
      fill: var(--color-brand-800);
    }
    .hover\:fill-brand-900:hover {
      fill: var(--color-brand-900);
    }
    .hover\:fill-grid:hover {
      fill: var(--ns-grid);
    }
    .hover\:fill-ink:hover {
      fill: var(--ns-ink);
    }
    .hover\:fill-label-ink:hover {
      fill: var(--ns-label);
    }
    .hover\:fill-muted:hover {
      fill: var(--ns-muted);
    }
    .hover\:fill-surface:hover {
      fill: var(--ns-surface);
    }
    .hover\:fill-surface-raised:hover {
      fill: var(--ns-surface-raised);
    }
    .hover\:fill-surface-sunken:hover {
      fill: var(--ns-surface-sunken);
    }
    .hover\:stroke-brand-50:hover {
      stroke: var(--color-brand-50);
    }
    .hover\:stroke-brand-100:hover {
      stroke: var(--color-brand-100);
    }
    .hover\:stroke-brand-200:hover {
      stroke: var(--color-brand-200);
    }
    .hover\:stroke-brand-300:hover {
      stroke: var(--color-brand-300);
    }
    .hover\:stroke-brand-400:hover {
      stroke: var(--color-brand-400);
    }
    .hover\:stroke-brand-500:hover {
      stroke: var(--color-brand-500);
    }
    .hover\:stroke-brand-600:hover {
      stroke: var(--color-brand-600);
    }
    .hover\:stroke-brand-700:hover {
      stroke: var(--color-brand-700);
    }
    .hover\:stroke-brand-800:hover {
      stroke: var(--color-brand-800);
    }
    .hover\:stroke-brand-900:hover {
      stroke: var(--color-brand-900);
    }
    .hover\:text-border:hover {
      color: var(--ns-border);
    }
    .hover\:text-brand-50:hover {
      color: var(--color-brand-50);
    }
    .hover\:text-brand-100:hover {
      color: var(--color-brand-100);
    }
    .hover\:text-brand-200:hover {
      color: var(--color-brand-200);
    }
    .hover\:text-brand-300:hover {
      color: var(--color-brand-300);
    }
    .hover\:text-brand-400:hover {
      color: var(--color-brand-400);
    }
    .hover\:text-brand-500:hover {
      color: var(--color-brand-500);
    }
    .hover\:text-brand-600:hover {
      color: var(--color-brand-600);
    }
    .hover\:text-brand-700:hover {
      color: var(--color-brand-700);
    }
    .hover\:text-brand-800:hover {
      color: var(--color-brand-800);
    }
    .hover\:text-brand-900:hover {
      color: var(--color-brand-900);
    }
    .hover\:text-grid:hover {
      color: var(--ns-grid);
    }
    .hover\:text-ink:hover {
      color: var(--ns-ink);
    }
    .hover\:text-label-ink:hover {
      color: var(--ns-label);
    }
    .hover\:text-muted:hover {
      color: var(--ns-muted);
    }
    .hover\:text-surface:hover {
      color: var(--ns-surface);
    }
    .hover\:text-surface-raised:hover {
      color: var(--ns-surface-raised);
    }
    .hover\:text-surface-sunken:hover {
      color: var(--ns-surface-sunken);
    }
    .hover\:ring-brand-50:hover {
      --tw-ring-color: var(--color-brand-50);
    }
    .hover\:ring-brand-100:hover {
      --tw-ring-color: var(--color-brand-100);
    }
    .hover\:ring-brand-200:hover {
      --tw-ring-color: var(--color-brand-200);
    }
    .hover\:ring-brand-300:hover {
      --tw-ring-color: var(--color-brand-300);
    }
    .hover\:ring-brand-400:hover {
      --tw-ring-color: var(--color-brand-400);
    }
    .hover\:ring-brand-500:hover {
      --tw-ring-color: var(--color-brand-500);
    }
    .hover\:ring-brand-600:hover {
      --tw-ring-color: var(--color-brand-600);
    }
    .hover\:ring-brand-700:hover {
      --tw-ring-color: var(--color-brand-700);
    }
    .hover\:ring-brand-800:hover {
      --tw-ring-color: var(--color-brand-800);
    }
    .hover\:ring-brand-900:hover {
      --tw-ring-color: var(--color-brand-900);
    }
  }
  .focus-visible\:border-brand-50:focus-visible {
    border-color: var(--color-brand-50);
  }
  .focus-visible\:border-brand-100:focus-visible {
    border-color: var(--color-brand-100);
  }
  .focus-visible\:border-brand-200:focus-visible {
    border-color: var(--color-brand-200);
  }
  .focus-visible\:border-brand-300:focus-visible {
    border-color: var(--color-brand-300);
  }
  .focus-visible\:border-brand-400:focus-visible {
    border-color: var(--color-brand-400);
  }
  .focus-visible\:border-brand-500:focus-visible {
    border-color: var(--color-brand-500);
  }
  .focus-visible\:border-brand-600:focus-visible {
    border-color: var(--color-brand-600);
  }
  .focus-visible\:border-brand-700:focus-visible {
    border-color: var(--color-brand-700);
  }
  .focus-visible\:border-brand-800:focus-visible {
    border-color: var(--color-brand-800);
  }
  .focus-visible\:border-brand-900:focus-visible {
    border-color: var(--color-brand-900);
  }
  .focus-visible\:bg-brand-50:focus-visible {
    background-color: var(--color-brand-50);
  }
  .focus-visible\:bg-brand-100:focus-visible {
    background-color: var(--color-brand-100);
  }
  .focus-visible\:bg-brand-200:focus-visible {
    background-color: var(--color-brand-200);
  }
  .focus-visible\:bg-brand-300:focus-visible {
    background-color: var(--color-brand-300);
  }
  .focus-visible\:bg-brand-400:focus-visible {
    background-color: var(--color-brand-400);
  }
  .focus-visible\:bg-brand-500:focus-visible {
    background-color: var(--color-brand-500);
  }
  .focus-visible\:bg-brand-600:focus-visible {
    background-color: var(--color-brand-600);
  }
  .focus-visible\:bg-brand-700:focus-visible {
    background-color: var(--color-brand-700);
  }
  .focus-visible\:bg-brand-800:focus-visible {
    background-color: var(--color-brand-800);
  }
  .focus-visible\:bg-brand-900:focus-visible {
    background-color: var(--color-brand-900);
  }
  .focus-visible\:fill-brand-50:focus-visible {
    fill: var(--color-brand-50);
  }
  .focus-visible\:fill-brand-100:focus-visible {
    fill: var(--color-brand-100);
  }
  .focus-visible\:fill-brand-200:focus-visible {
    fill: var(--color-brand-200);
  }
  .focus-visible\:fill-brand-300:focus-visible {
    fill: var(--color-brand-300);
  }
  .focus-visible\:fill-brand-400:focus-visible {
    fill: var(--color-brand-400);
  }
  .focus-visible\:fill-brand-500:focus-visible {
    fill: var(--color-brand-500);
  }
  .focus-visible\:fill-brand-600:focus-visible {
    fill: var(--color-brand-600);
  }
  .focus-visible\:fill-brand-700:focus-visible {
    fill: var(--color-brand-700);
  }
  .focus-visible\:fill-brand-800:focus-visible {
    fill: var(--color-brand-800);
  }
  .focus-visible\:fill-brand-900:focus-visible {
    fill: var(--color-brand-900);
  }
  .focus-visible\:stroke-brand-50:focus-visible {
    stroke: var(--color-brand-50);
  }
  .focus-visible\:stroke-brand-100:focus-visible {
    stroke: var(--color-brand-100);
  }
  .focus-visible\:stroke-brand-200:focus-visible {
    stroke: var(--color-brand-200);
  }
  .focus-visible\:stroke-brand-300:focus-visible {
    stroke: var(--color-brand-300);
  }
  .focus-visible\:stroke-brand-400:focus-visible {
    stroke: var(--color-brand-400);
  }
  .focus-visible\:stroke-brand-500:focus-visible {
    stroke: var(--color-brand-500);
  }
  .focus-visible\:stroke-brand-600:focus-visible {
    stroke: var(--color-brand-600);
  }
  .focus-visible\:stroke-brand-700:focus-visible {
    stroke: var(--color-brand-700);
  }
  .focus-visible\:stroke-brand-800:focus-visible {
    stroke: var(--color-brand-800);
  }
  .focus-visible\:stroke-brand-900:focus-visible {
    stroke: var(--color-brand-900);
  }
  .focus-visible\:text-brand-50:focus-visible {
    color: var(--color-brand-50);
  }
  .focus-visible\:text-brand-100:focus-visible {
    color: var(--color-brand-100);
  }
  .focus-visible\:text-brand-200:focus-visible {
    color: var(--color-brand-200);
  }
  .focus-visible\:text-brand-300:focus-visible {
    color: var(--color-brand-300);
  }
  .focus-visible\:text-brand-400:focus-visible {
    color: var(--color-brand-400);
  }
  .focus-visible\:text-brand-500:focus-visible {
    color: var(--color-brand-500);
  }
  .focus-visible\:text-brand-600:focus-visible {
    color: var(--color-brand-600);
  }
  .focus-visible\:text-brand-700:focus-visible {
    color: var(--color-brand-700);
  }
  .focus-visible\:text-brand-800:focus-visible {
    color: var(--color-brand-800);
  }
  .focus-visible\:text-brand-900:focus-visible {
    color: var(--color-brand-900);
  }
  .focus-visible\:ring-brand-50:focus-visible {
    --tw-ring-color: var(--color-brand-50);
  }
  .focus-visible\:ring-brand-100:focus-visible {
    --tw-ring-color: var(--color-brand-100);
  }
  .focus-visible\:ring-brand-200:focus-visible {
    --tw-ring-color: var(--color-brand-200);
  }
  .focus-visible\:ring-brand-300:focus-visible {
    --tw-ring-color: var(--color-brand-300);
  }
  .focus-visible\:ring-brand-400:focus-visible {
    --tw-ring-color: var(--color-brand-400);
  }
  .focus-visible\:ring-brand-500:focus-visible {
    --tw-ring-color: var(--color-brand-500);
  }
  .focus-visible\:ring-brand-600:focus-visible {
    --tw-ring-color: var(--color-brand-600);
  }
  .focus-visible\:ring-brand-700:focus-visible {
    --tw-ring-color: var(--color-brand-700);
  }
  .focus-visible\:ring-brand-800:focus-visible {
    --tw-ring-color: var(--color-brand-800);
  }
  .focus-visible\:ring-brand-900:focus-visible {
    --tw-ring-color: var(--color-brand-900);
  }
  .dark\:border-border:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-border);
  }
  .dark\:border-brand-50:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-50);
  }
  .dark\:border-brand-100:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-100);
  }
  .dark\:border-brand-200:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-200);
  }
  .dark\:border-brand-300:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-300);
  }
  .dark\:border-brand-400:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-400);
  }
  .dark\:border-brand-500:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-500);
  }
  .dark\:border-brand-600:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-600);
  }
  .dark\:border-brand-700:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-700);
  }
  .dark\:border-brand-800:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-800);
  }
  .dark\:border-brand-900:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-brand-900);
  }
  .dark\:border-error:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-error);
  }
  .dark\:border-grid:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-grid);
  }
  .dark\:border-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-ink);
  }
  .dark\:border-label-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-label);
  }
  .dark\:border-muted:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-muted);
  }
  .dark\:border-success:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-success);
  }
  .dark\:border-surface:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-surface);
  }
  .dark\:border-surface-raised:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-surface-raised);
  }
  .dark\:border-surface-sunken:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--ns-surface-sunken);
  }
  .dark\:border-warning:where([data-theme="dark"], [data-theme="dark"] *) {
    border-color: var(--color-warning);
  }
  .dark\:bg-border:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-border);
  }
  .dark\:bg-brand-50:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-50);
  }
  .dark\:bg-brand-100:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-100);
  }
  .dark\:bg-brand-200:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-200);
  }
  .dark\:bg-brand-300:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-300);
  }
  .dark\:bg-brand-400:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-400);
  }
  .dark\:bg-brand-500:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-500);
  }
  .dark\:bg-brand-600:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-600);
  }
  .dark\:bg-brand-700:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-700);
  }
  .dark\:bg-brand-800:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-800);
  }
  .dark\:bg-brand-900:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-brand-900);
  }
  .dark\:bg-chart-1:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-1);
  }
  .dark\:bg-chart-2:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-2);
  }
  .dark\:bg-chart-3:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-3);
  }
  .dark\:bg-chart-4:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-4);
  }
  .dark\:bg-chart-5:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-5);
  }
  .dark\:bg-chart-6:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-6);
  }
  .dark\:bg-chart-7:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--chart-cat-7);
  }
  .dark\:bg-error:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-error);
  }
  .dark\:bg-grid:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-grid);
  }
  .dark\:bg-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-ink);
  }
  .dark\:bg-label-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-label);
  }
  .dark\:bg-muted:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-muted);
  }
  .dark\:bg-success:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-success);
  }
  .dark\:bg-surface:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-surface);
  }
  .dark\:bg-surface-raised:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-surface-raised);
  }
  .dark\:bg-surface-sunken:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--ns-surface-sunken);
  }
  .dark\:bg-warning:where([data-theme="dark"], [data-theme="dark"] *) {
    background-color: var(--color-warning);
  }
  .dark\:fill-border:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-border);
  }
  .dark\:fill-brand-50:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-50);
  }
  .dark\:fill-brand-100:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-100);
  }
  .dark\:fill-brand-200:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-200);
  }
  .dark\:fill-brand-300:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-300);
  }
  .dark\:fill-brand-400:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-400);
  }
  .dark\:fill-brand-500:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-500);
  }
  .dark\:fill-brand-600:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-600);
  }
  .dark\:fill-brand-700:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-700);
  }
  .dark\:fill-brand-800:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-800);
  }
  .dark\:fill-brand-900:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-brand-900);
  }
  .dark\:fill-chart-1:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-1);
  }
  .dark\:fill-chart-2:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-2);
  }
  .dark\:fill-chart-3:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-3);
  }
  .dark\:fill-chart-4:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-4);
  }
  .dark\:fill-chart-5:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-5);
  }
  .dark\:fill-chart-6:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-6);
  }
  .dark\:fill-chart-7:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--chart-cat-7);
  }
  .dark\:fill-error:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-error);
  }
  .dark\:fill-grid:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-grid);
  }
  .dark\:fill-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-ink);
  }
  .dark\:fill-label-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-label);
  }
  .dark\:fill-muted:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-muted);
  }
  .dark\:fill-success:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-success);
  }
  .dark\:fill-surface:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-surface);
  }
  .dark\:fill-surface-raised:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-surface-raised);
  }
  .dark\:fill-surface-sunken:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--ns-surface-sunken);
  }
  .dark\:fill-warning:where([data-theme="dark"], [data-theme="dark"] *) {
    fill: var(--color-warning);
  }
  .dark\:stroke-brand-50:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-50);
  }
  .dark\:stroke-brand-100:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-100);
  }
  .dark\:stroke-brand-200:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-200);
  }
  .dark\:stroke-brand-300:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-300);
  }
  .dark\:stroke-brand-400:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-400);
  }
  .dark\:stroke-brand-500:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-500);
  }
  .dark\:stroke-brand-600:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-600);
  }
  .dark\:stroke-brand-700:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-700);
  }
  .dark\:stroke-brand-800:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-800);
  }
  .dark\:stroke-brand-900:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--color-brand-900);
  }
  .dark\:stroke-chart-1:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-1);
  }
  .dark\:stroke-chart-2:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-2);
  }
  .dark\:stroke-chart-3:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-3);
  }
  .dark\:stroke-chart-4:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-4);
  }
  .dark\:stroke-chart-5:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-5);
  }
  .dark\:stroke-chart-6:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-6);
  }
  .dark\:stroke-chart-7:where([data-theme="dark"], [data-theme="dark"] *) {
    stroke: var(--chart-cat-7);
  }
  .dark\:text-border:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-border);
  }
  .dark\:text-brand-50:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-50);
  }
  .dark\:text-brand-100:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-100);
  }
  .dark\:text-brand-200:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-200);
  }
  .dark\:text-brand-300:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-300);
  }
  .dark\:text-brand-400:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-400);
  }
  .dark\:text-brand-500:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-500);
  }
  .dark\:text-brand-600:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-600);
  }
  .dark\:text-brand-700:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-700);
  }
  .dark\:text-brand-800:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-800);
  }
  .dark\:text-brand-900:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-brand-900);
  }
  .dark\:text-chart-1:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-1);
  }
  .dark\:text-chart-2:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-2);
  }
  .dark\:text-chart-3:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-3);
  }
  .dark\:text-chart-4:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-4);
  }
  .dark\:text-chart-5:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-5);
  }
  .dark\:text-chart-6:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-6);
  }
  .dark\:text-chart-7:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--chart-cat-7);
  }
  .dark\:text-error:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-error);
  }
  .dark\:text-error-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-error-ink);
  }
  .dark\:text-grid:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-grid);
  }
  .dark\:text-info-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-info-ink);
  }
  .dark\:text-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-ink);
  }
  .dark\:text-label-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-label);
  }
  .dark\:text-muted:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-muted);
  }
  .dark\:text-success:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-success);
  }
  .dark\:text-success-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-success-ink);
  }
  .dark\:text-surface:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-surface);
  }
  .dark\:text-surface-raised:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-surface-raised);
  }
  .dark\:text-surface-sunken:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-surface-sunken);
  }
  .dark\:text-warning:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--color-warning);
  }
  .dark\:text-warning-ink:where([data-theme="dark"], [data-theme="dark"] *) {
    color: var(--ns-warning-ink);
  }
  .dark\:ring-brand-50:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-50);
  }
  .dark\:ring-brand-100:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-100);
  }
  .dark\:ring-brand-200:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-200);
  }
  .dark\:ring-brand-300:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-300);
  }
  .dark\:ring-brand-400:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-400);
  }
  .dark\:ring-brand-500:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-500);
  }
  .dark\:ring-brand-600:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-600);
  }
  .dark\:ring-brand-700:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-700);
  }
  .dark\:ring-brand-800:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-800);
  }
  .dark\:ring-brand-900:where([data-theme="dark"], [data-theme="dark"] *) {
    --tw-ring-color: var(--color-brand-900);
  }
  .\[\&\>div\]\:h-\[26px\] > div {
    height: 26px;
  }
  .\[\&\>div\]\:h-full > div {
    height: 100%;
  }
  .\[\&\>div\]\:flex-1 > div {
    flex: 1;
  }
  .\[\&\>span\]\:font-mono > span {
    font-family: var(--font-mono);
  }
  .\[\&\>span\]\:text-\[9px\] > span {
    font-size: 9px;
  }
  .\[\&\>span\]\:tracking-wide > span {
    --tw-tracking: var(--tracking-wide);
    letter-spacing: var(--tracking-wide);
  }
  .\[\&\>span\:last-child\]\:text-muted > span:last-child {
    color: var(--ns-muted);
  }
}
@layer theme, base, ns-components, components, utilities;
:root {
  --ns-brand-50: #eef6ff;
  --ns-brand-100: #d8edff;
  --ns-brand-200: #b0d7ff;
  --ns-brand-300: #7cbeff;
  --ns-brand-400: #1b96ff;
  --ns-brand-500: #0176d3;
  --ns-brand-600: #0b5cab;
  --ns-brand-700: #03386b;
  --ns-brand-800: #032d60;
  --ns-brand-900: #001a3e;
  --color-brand-50: var(--ns-brand-50);
  --color-brand-100: var(--ns-brand-100);
  --color-brand-200: var(--ns-brand-200);
  --color-brand-300: var(--ns-brand-300);
  --color-brand-400: var(--ns-brand-400);
  --color-brand-500: var(--ns-brand-500);
  --color-brand-600: var(--ns-brand-600);
  --color-brand-700: var(--ns-brand-700);
  --color-brand-800: var(--ns-brand-800);
  --color-brand-900: var(--ns-brand-900);
  --color-accent-50: var(--color-brand-50);
  --color-accent-100: var(--color-brand-100);
  --color-accent-200: var(--color-brand-200);
  --color-accent-300: var(--color-brand-300);
  --color-accent-400: var(--color-brand-400);
  --color-accent-500: var(--color-brand-500);
  --color-accent-600: var(--color-brand-600);
  --color-accent-700: var(--color-brand-700);
  --color-accent-800: var(--color-brand-800);
  --color-accent-900: var(--color-brand-900);
  --color-success: #2e844a;
  --color-warning: #fe9339;
  --color-error: #ea001e;
  --ns-success-ink: #1a6b34;
  --ns-warning-ink: #8a4b00;
  --ns-error-ink: #ba0017;
  --ns-info-ink: var(--color-brand-600);
  --color-success-ink: var(--ns-success-ink);
  --color-warning-ink: var(--ns-warning-ink);
  --color-error-ink: var(--ns-error-ink);
  --color-info-ink: var(--ns-info-ink);
  --ns-level-intermediate-ink: #8a5a00;
  --ns-featured-ink: #7c4a03;
  --color-level-intermediate-ink: var(--ns-level-intermediate-ink);
  --color-featured-ink: var(--ns-featured-ink);
  --ns-surface: #ffffff;
  --ns-surface-raised: #ffffff;
  --ns-surface-sunken: #f4f6f8;
  --ns-border: #dddbda;
  --ns-ink: #181818;
  --ns-muted: #5c5a57;
  --ns-label: #45566b;
  --ns-grid: rgba(3, 45, 96, 0.055);
  --ns-on-brand: #ffffff;
  --ns-on-dark: #ffffff;
  --ns-on-dark-border: rgb(255 255 255 / 0.3);
  --ns-on-dark-border-hover: rgb(255 255 255 / 0.5);
  --ns-on-dark-wash: rgb(255 255 255 / 0.1);
  --color-on-brand: var(--ns-on-brand);
  --color-on-dark: var(--ns-on-dark);
  --color-on-dark-border: var(--ns-on-dark-border);
  --color-on-dark-border-hover: var(--ns-on-dark-border-hover);
  --color-on-dark-wash: var(--ns-on-dark-wash);
  --ns-scrim: rgb(3 45 96 / 0.35);
  --color-scrim: var(--ns-scrim);
  --ns-code-keyword: #0b5cab;
  --ns-code-string: #0a6b47;
  --ns-code-comment: #5f6f84;
  --ns-code-number: #a3286b;
  --ns-code-function: #7a4a02;
  --ns-code-type: #4338a8;
  --ns-code-punct: #46546b;
  --ns-code-added: #0a6b47;
  --ns-code-removed: #ba0017;
  --color-code-keyword: var(--ns-code-keyword);
  --color-code-string: var(--ns-code-string);
  --color-code-comment: var(--ns-code-comment);
  --color-code-number: var(--ns-code-number);
  --color-code-function: var(--ns-code-function);
  --color-code-type: var(--ns-code-type);
  --color-code-punct: var(--ns-code-punct);
  --color-code-added: var(--ns-code-added);
  --color-code-removed: var(--ns-code-removed);
  --color-surface: var(--ns-surface);
  --color-surface-raised: var(--ns-surface-raised);
  --color-surface-sunken: var(--ns-surface-sunken);
  --color-border: var(--ns-border);
  --color-ink: var(--ns-ink);
  --color-muted: var(--ns-muted);
  --color-label: var(--ns-label);
  --color-grid: var(--ns-grid);
}
[data-theme="dark"] {
  --ns-surface: #051222;
  --ns-surface-raised: #081a30;
  --ns-surface-sunken: #02080f;
  --ns-border: rgba(124, 190, 255, 0.16);
  --ns-ink: #eaf2fb;
  --ns-muted: #7fa0c2;
  --ns-label: #8fb3d9;
  --ns-grid: rgba(124, 190, 255, 0.09);
  --ns-scrim: rgb(2 8 15 / 0.6);
  --ns-success-ink: #5fca82;
  --ns-warning-ink: #ffb15c;
  --ns-error-ink: #ff7b7b;
  --ns-info-ink: var(--color-brand-300);
  --ns-level-intermediate-ink: #e8c169;
  --ns-featured-ink: #f0cf7a;
  --ns-code-keyword: #7cbeff;
  --ns-code-string: #7ce3b0;
  --ns-code-comment: #7d95b0;
  --ns-code-number: #f9a8c8;
  --ns-code-function: #ffd479;
  --ns-code-type: #c3b2ff;
  --ns-code-punct: #b8c7dc;
  --ns-code-added: #5fca82;
  --ns-code-removed: #ff7b7b;
}
:root {
  --chart-cat-1: #0176d3;
  --chart-cat-2: #d1490d;
  --chart-cat-3: #2e844a;
  --chart-cat-4: #9c3ad9;
  --chart-cat-5: #0f9ba8;
  --chart-cat-6: #a8890a;
  --chart-cat-7: #d6247a;
  --chart-seq-1: #5aa9f7;
  --chart-seq-2: #0176d3;
  --chart-seq-3: #0b5cab;
  --chart-seq-4: #03386b;
  --chart-div-cool-3: #03386b;
  --chart-div-cool-2: #0176d3;
  --chart-div-cool-1: #5aa9f7;
  --chart-div-mid: #c9c7c5;
  --chart-div-warm-1: #e3a06c;
  --chart-div-warm-2: #d1490d;
  --chart-div-warm-3: #7a2a06;
  --chart-surface: var(--color-surface);
  --chart-grid: var(--color-border);
  @supports (color: color-mix(in lab, red, red)) {
    --chart-grid: color-mix(in srgb, var(--color-border) 60%, transparent);
  }
  --chart-axis: var(--color-border);
  --chart-ink: var(--color-ink);
  --chart-muted: var(--color-muted);
  --chart-mark-gap: 2px;
  --chart-line-w: 2px;
  --chart-marker-size: 8px;
  --chart-radius-end: 4px;
}
[data-theme="dark"] {
  --chart-cat-1: #3d9ae8;
  --chart-cat-2: #e05a25;
  --chart-cat-3: #22ab74;
  --chart-cat-4: #b060e0;
  --chart-cat-5: #159aa6;
  --chart-cat-6: #ab8d22;
  --chart-cat-7: #de4f96;
  --chart-seq-1: #cfe6ff;
  --chart-seq-2: #9ccdff;
  --chart-seq-3: #54a9f5;
  --chart-seq-4: #14538c;
  --chart-div-cool-3: #cfe6ff;
  --chart-div-cool-2: #54a9f5;
  --chart-div-cool-1: #1d6fb5;
  --chart-div-mid: #5b6a7d;
  --chart-div-warm-1: #a8542a;
  --chart-div-warm-2: #e05a25;
  --chart-div-warm-3: #f5a97c;
}
:root {
  --space-0: 0rem;
  --space-px: 1px;
  --space-0-5: 0.125rem;
  --space-1: 0.25rem;
  --space-1-5: 0.375rem;
  --space-2: 0.5rem;
  --space-2-5: 0.625rem;
  --space-3: 0.75rem;
  --space-3-5: 0.875rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 1.75rem;
  --space-8: 2rem;
  --space-9: 2.25rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-14: 3.5rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;
  --space-40: 10rem;
  --pad-card: var(--space-5);
  --pad-card-lg: var(--space-6);
  --pad-control: var(--space-2-5);
  --pad-control-x: var(--space-4);
  --pad-row: var(--space-3);
  --gap-inline: var(--space-2);
  --gap-card: var(--space-4);
  --gap-grid: var(--space-6);
  --gap-field: var(--space-1-5);
  --stack-xs: var(--space-2);
  --stack-sm: var(--space-4);
  --stack-md: var(--space-8);
  --stack-lg: var(--space-16);
  --stack-xl: var(--space-24);
  --target-min: 1.5rem;
  --target-comfy: 2.5rem;
  --breakpoint-sm: 40rem;
  --breakpoint-md: 48rem;
  --breakpoint-lg: 64rem;
  --breakpoint-xl: 80rem;
  --breakpoint-2xl: 96rem;
  --container-prose: 42rem;
  --container-narrow: 56rem;
  --container-page: 72rem;
  --container-wide: 88rem;
  --gutter: var(--space-4);
  --gutter-md: var(--space-6);
  --gutter-lg: var(--space-8);
  --navbar-h: 3.5rem;
  --sidebar-w: 16rem;
  --toc-w: 15rem;
  --player-side-w: 21rem;
  --z-base: 0;
  --z-raised: 10;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-toast: 400;
  --z-max: 999;
}
@media (min-width: 48rem) {
  :root {
    --gutter: var(--gutter-md);
  }
}
@media (min-width: 64rem) {
  :root {
    --gutter: var(--gutter-lg);
  }
}
@layer base {
  :target, h1[id], h2[id], h3[id], h4[id] {
    scroll-margin-top: calc(var(--navbar-h) + var(--space-4));
  }
}
@font-face {
  font-family: "Switzer";
  src: url("../fonts/switzer-var-latin.woff2") format("woff2-variations"), url("../fonts/switzer-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Roboto Mono";
  src: url("../fonts/roboto-mono-var-latin.woff2") format("woff2-variations"), url("../fonts/roboto-mono-var-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Switzer Fallback";
  src: local("Helvetica Neue"), local("Arial"), local("Segoe UI"), local("Roboto");
  size-adjust: 99%;
  ascent-override: 97%;
  descent-override: 24%;
  line-gap-override: 0%;
}
:root {
  --ns-font-sans: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ns-font-heading: "Switzer", "Switzer Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --ns-font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --ns-font-serif: Georgia, "Iowan Old Style", "Times New Roman", Times, serif;
  --ns-font-icon: "Phosphor";
  --ns-font-icon-fill: "Phosphor-Fill";
  --font-sans: var(--ns-font-sans);
  --font-heading: var(--ns-font-heading);
  --font-mono: var(--ns-font-mono);
  --font-serif: var(--ns-font-serif);
  --font-icon: var(--ns-font-icon);
  --font-icon-fill: var(--ns-font-icon-fill);
  --size-mega: clamp(2.75rem, 1.9rem + 4.2vw, 5.5rem);
  --size-display: clamp(2rem, 1.55rem + 2.2vw, 3.25rem);
  --size-h1: 2.5rem;
  --size-h2: 2rem;
  --size-h3: 1.5rem;
  --size-h4: 1.25rem;
  --size-body-lg: 1.0625rem;
  --size-body: 0.875rem;
  --size-small: 0.8125rem;
  --size-fine: 0.75rem;
  --size-label: 0.6875rem;
  --size-mono: 0.8125rem;
  --ns-tracking-label: 0.09em;
  --tracking-label: var(--ns-tracking-label);
  --ns-tracking-tight: -0.01em;
  --tracking-tight: var(--ns-tracking-tight);
  --weight-label: 700;
  --ns-tracking-mega: -0.035em;
  --tracking-mega: var(--ns-tracking-mega);
  --ns-tracking-wide: 0.04em;
  --tracking-wide: var(--ns-tracking-wide);
  --ns-leading-tight: 1.15;
  --ns-leading-heading: 1.3;
  --ns-leading-body: 1.6;
  --ns-leading-mega: 0.94;
  --leading-tight: var(--ns-leading-tight);
  --leading-heading: var(--ns-leading-heading);
  --leading-body: var(--ns-leading-body);
  --leading-mega: var(--ns-leading-mega);
  --weight-heading: 700;
  --weight-semibold: 600;
  --weight-medium: 500;
  --weight-body: 400;
  --weight-regular: 400;
  --weight-body-strong: 600;
  --measure-prose: 68ch;
  --measure-narrow: 46ch;
  --ns-radius-card: 6px;
  --ns-radius-btn: 4px;
  --ns-radius-pill: 9999px;
  --ns-radius-sm: 4px;
  --radius-card: var(--ns-radius-card);
  --radius-btn: var(--ns-radius-btn);
  --radius-pill: var(--ns-radius-pill);
  --radius-sm: var(--ns-radius-sm);
  --ns-shadow-card: 0 1px 0 rgb(0 0 0 / 0.02);
  --ns-shadow-raised: 0 4px 16px -8px rgb(0 0 0 / 0.18);
  --shadow-card: var(--ns-shadow-card);
  --shadow-raised: var(--ns-shadow-raised);
  --shadow-brand: 0 0 0 1px color-mix(in srgb, #0176d3 55%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-brand: 0 0 0 1px color-mix(in srgb, var(--color-brand-500) 55%, transparent);
  }
  --shadow-focus: 0 0 0 3px color-mix(in srgb, #0176d3 25%, transparent);
  @supports (color: color-mix(in lab, red, red)) {
    --shadow-focus: 0 0 0 3px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
  }
  --border-hairline: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --opacity-press: 0.85;
  --opacity-disabled: 0.45;
  --opacity-loading: 0.35;
  --ns-ease-out: cubic-bezier(0.2, 0.6, 0.2, 1);
  --ease-out: var(--ns-ease-out);
  --duration-fast: 120ms;
  --duration-base: 180ms;
  --duration-slow: 420ms;
  --duration-draw: 700ms;
  --ns-ease-draw: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-draw: var(--ns-ease-draw);
}
@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes ns-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@layer base {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.001ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.001ms !important;
    }
  }
  :root {
    color-scheme: light;
  }
  [data-theme="dark"] {
    color-scheme: dark;
  }
  html {
    overflow-x: clip;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
  }
  @media (prefers-reduced-motion: reduce) {
    html {
      scroll-behavior: auto;
    }
  }
  body {
    background-color: var(--color-surface);
    color: var(--color-ink);
    font: var(--size-body)/var(--leading-body) var(--font-sans);
    font-weight: var(--weight-body);
    transition: background-color var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
    margin: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    margin: 0;
    text-wrap: balance;
    line-height: var(--leading-heading);
  }
  h1, h2, h3 {
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);
  }
  h4, h5, h6 {
    font-weight: var(--weight-semibold);
  }
  p {
    margin: 0;
    text-wrap: pretty;
  }
  [hidden] {
    display: none !important;
  }
  strong, b {
    font-weight: var(--weight-body-strong);
  }
  time, output, .ns-num, [data-numeric] {
    font-variant-numeric: tabular-nums;
  }
  * {
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted) transparent;
    @supports (color: color-mix(in lab, red, red)) {
      scrollbar-color: color-mix(in srgb, var(--color-muted) 45%, transparent) transparent;
    }
  }
  ::selection {
    background-color: color-mix(in srgb, #0176d3 22%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in srgb, var(--color-brand-500) 22%, transparent);
    }
  }
  :focus-visible {
    outline: 2px solid var(--color-brand-500);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  [data-theme="dark"] :focus-visible {
    outline-color: var(--color-brand-300);
  }
  a {
    color: var(--color-brand-600);
  }
  a:hover {
    color: var(--color-brand-500);
  }
  [data-theme="dark"] a {
    color: var(--color-brand-300);
  }
  code, kbd, .ns-label {
    font-family: var(--font-mono);
  }
}
@layer ns-components {
  @font-face {
    font-family: "Phosphor";
    src: url("../icons/phosphor-subset.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  .ph {
    font-family: "Phosphor";
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
  }
  .ph.ph-arrow-down:before {
    content: "\e03e";
  }
  .ph.ph-arrow-left:before {
    content: "\e058";
  }
  .ph.ph-arrow-right:before {
    content: "\e06c";
  }
  .ph.ph-arrow-up-right:before {
    content: "\e092";
  }
  .ph.ph-arrows-clockwise:before {
    content: "\e094";
  }
  .ph.ph-article:before {
    content: "\e0a8";
  }
  .ph.ph-barbell:before {
    content: "\e0b6";
  }
  .ph.ph-bell-ringing:before {
    content: "\e5e8";
  }
  .ph.ph-book-bookmark:before {
    content: "\e0e4";
  }
  .ph.ph-book-open-text:before {
    content: "\e8f2";
  }
  .ph.ph-bookmark-simple:before {
    content: "\e0ea";
  }
  .ph.ph-books:before {
    content: "\e758";
  }
  .ph.ph-brackets-curly:before {
    content: "\e860";
  }
  .ph.ph-briefcase:before {
    content: "\e0ee";
  }
  .ph.ph-buildings:before {
    content: "\e102";
  }
  .ph.ph-calendar:before {
    content: "\e108";
  }
  .ph.ph-calendar-blank:before {
    content: "\e10a";
  }
  .ph.ph-caret-down:before {
    content: "\e136";
  }
  .ph.ph-caret-right:before {
    content: "\e13a";
  }
  .ph.ph-chart-bar:before {
    content: "\e150";
  }
  .ph.ph-chart-donut:before {
    content: "\eaa6";
  }
  .ph.ph-chart-line:before {
    content: "\e154";
  }
  .ph.ph-chart-line-up:before {
    content: "\e156";
  }
  .ph.ph-chat-circle:before {
    content: "\e168";
  }
  .ph.ph-chat-circle-text:before {
    content: "\e16e";
  }
  .ph.ph-chats-circle:before {
    content: "\e17e";
  }
  .ph.ph-check-circle:before {
    content: "\e184";
  }
  .ph.ph-circle:before {
    content: "\e18a";
  }
  .ph.ph-circle-notch:before {
    content: "\eb44";
  }
  .ph.ph-clock:before {
    content: "\e19a";
  }
  .ph.ph-clock-clockwise:before {
    content: "\e19e";
  }
  .ph.ph-clock-countdown:before {
    content: "\ed2c";
  }
  .ph.ph-cloud:before {
    content: "\e1aa";
  }
  .ph.ph-code:before {
    content: "\e1bc";
  }
  .ph.ph-coffee:before {
    content: "\e1c2";
  }
  .ph.ph-compass:before {
    content: "\e1c8";
  }
  .ph.ph-credit-card:before {
    content: "\e1d2";
  }
  .ph.ph-crosshair:before {
    content: "\e1d6";
  }
  .ph.ph-crown-simple:before {
    content: "\e616";
  }
  .ph.ph-cube:before {
    content: "\e1da";
  }
  .ph.ph-currency-circle-dollar:before {
    content: "\e54c";
  }
  .ph.ph-database:before {
    content: "\e1de";
  }
  .ph.ph-envelope-simple:before {
    content: "\e218";
  }
  .ph.ph-exam:before {
    content: "\e742";
  }
  .ph.ph-eye:before {
    content: "\e220";
  }
  .ph.ph-facebook-logo:before {
    content: "\e226";
  }
  .ph.ph-file-text:before {
    content: "\e23a";
  }
  .ph.ph-film-strip:before {
    content: "\e792";
  }
  .ph.ph-flag:before {
    content: "\e244";
  }
  .ph.ph-flag-banner-fold:before {
    content: "\ecf2";
  }
  .ph.ph-flag-checkered:before {
    content: "\ea38";
  }
  .ph.ph-flask:before {
    content: "\e79e";
  }
  .ph.ph-flow-arrow:before {
    content: "\e6ec";
  }
  .ph.ph-folder-open:before {
    content: "\e256";
  }
  .ph.ph-folders:before {
    content: "\e260";
  }
  .ph.ph-funnel:before {
    content: "\e266";
  }
  .ph.ph-gauge:before {
    content: "\e628";
  }
  .ph.ph-gear-six:before {
    content: "\e272";
  }
  .ph.ph-gift:before {
    content: "\e276";
  }
  .ph.ph-git-branch:before {
    content: "\e278";
  }
  .ph.ph-git-fork:before {
    content: "\e27e";
  }
  .ph.ph-globe:before {
    content: "\e288";
  }
  .ph.ph-globe-hemisphere-east:before {
    content: "\e28a";
  }
  .ph.ph-graduation-cap:before {
    content: "\e62c";
  }
  .ph.ph-handshake:before {
    content: "\e582";
  }
  .ph.ph-hash:before {
    content: "\e2a2";
  }
  .ph.ph-headset:before {
    content: "\e584";
  }
  .ph.ph-heart:before {
    content: "\e2a8";
  }
  .ph.ph-house:before {
    content: "\e2c2";
  }
  .ph.ph-image:before {
    content: "\e2ca";
  }
  .ph.ph-infinity:before {
    content: "\e634";
  }
  .ph.ph-info:before {
    content: "\e2ce";
  }
  .ph.ph-lightbulb:before {
    content: "\e2dc";
  }
  .ph.ph-lightning:before {
    content: "\e2de";
  }
  .ph.ph-link-simple:before {
    content: "\e2e6";
  }
  .ph.ph-linkedin-logo:before {
    content: "\e2ee";
  }
  .ph.ph-list:before {
    content: "\e2f0";
  }
  .ph.ph-list-checks:before {
    content: "\eadc";
  }
  .ph.ph-lock:before {
    content: "\e2fa";
  }
  .ph.ph-lock-open:before {
    content: "\e306";
  }
  .ph.ph-lock-simple:before {
    content: "\e308";
  }
  .ph.ph-lock-simple-open:before {
    content: "\e30a";
  }
  .ph.ph-magnifying-glass:before {
    content: "\e30c";
  }
  .ph.ph-map-pin:before {
    content: "\e316";
  }
  .ph.ph-map-trifold:before {
    content: "\e31a";
  }
  .ph.ph-medal:before {
    content: "\e320";
  }
  .ph.ph-megaphone:before {
    content: "\e324";
  }
  .ph.ph-microphone:before {
    content: "\e326";
  }
  .ph.ph-newspaper:before {
    content: "\e344";
  }
  .ph.ph-note:before {
    content: "\e348";
  }
  .ph.ph-paper-plane-tilt:before {
    content: "\e398";
  }
  .ph.ph-pen-nib:before {
    content: "\e3ac";
  }
  .ph.ph-phone-call:before {
    content: "\e3ba";
  }
  .ph.ph-play:before {
    content: "\e3d0";
  }
  .ph.ph-play-circle:before {
    content: "\e3d2";
  }
  .ph.ph-plugs:before {
    content: "\eb56";
  }
  .ph.ph-presentation-chart:before {
    content: "\e656";
  }
  .ph.ph-projector-screen:before {
    content: "\e658";
  }
  .ph.ph-question:before {
    content: "\e3e8";
  }
  .ph.ph-quotes:before {
    content: "\e660";
  }
  .ph.ph-robot:before {
    content: "\e762";
  }
  .ph.ph-rocket-launch:before {
    content: "\e3fe";
  }
  .ph.ph-rows:before {
    content: "\e5a2";
  }
  .ph.ph-rss-simple:before {
    content: "\e402";
  }
  .ph.ph-seal-check:before {
    content: "\e606";
  }
  .ph.ph-share-network:before {
    content: "\e408";
  }
  .ph.ph-shield-check:before {
    content: "\e40c";
  }
  .ph.ph-sidebar:before {
    content: "\eab6";
  }
  .ph.ph-sparkle:before {
    content: "\e6a2";
  }
  .ph.ph-squares-four:before {
    content: "\e464";
  }
  .ph.ph-stack:before {
    content: "\e466";
  }
  .ph.ph-star:before {
    content: "\e46a";
  }
  .ph.ph-steps:before {
    content: "\ecbe";
  }
  .ph.ph-strategy:before {
    content: "\ea3a";
  }
  .ph.ph-tag:before {
    content: "\e478";
  }
  .ph.ph-target:before {
    content: "\e47c";
  }
  .ph.ph-terminal-window:before {
    content: "\eae8";
  }
  .ph.ph-timer:before {
    content: "\e492";
  }
  .ph.ph-toolbox:before {
    content: "\eca0";
  }
  .ph.ph-twitter-logo:before {
    content: "\e4ba";
  }
  .ph.ph-user:before {
    content: "\e4c2";
  }
  .ph.ph-user-circle:before {
    content: "\e4c4";
  }
  .ph.ph-users-three:before {
    content: "\e68e";
  }
  .ph.ph-video:before {
    content: "\e740";
  }
  .ph.ph-video-camera:before {
    content: "\e4da";
  }
  .ph.ph-warning:before {
    content: "\e4e0";
  }
  .ph.ph-warning-circle:before {
    content: "\e4e2";
  }
  .ph.ph-wrench:before {
    content: "\e5d4";
  }
  .ph.ph-x:before {
    content: "\e4f6";
  }
  .ph.ph-x-circle:before {
    content: "\e4f8";
  }
  .ph.ph-x-logo:before {
    content: "\e4bc";
  }
  @font-face {
    font-family: "Phosphor-Fill";
    src: url("../icons/phosphor-fill-subset.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  .ph-fill {
    font-family: "Phosphor-Fill";
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
  }
  .ph-fill.ph-arrow-down:before {
    content: "\e03e";
  }
  .ph-fill.ph-arrow-left:before {
    content: "\e058";
  }
  .ph-fill.ph-arrow-right:before {
    content: "\e06c";
  }
  .ph-fill.ph-arrow-up-right:before {
    content: "\e092";
  }
  .ph-fill.ph-arrows-clockwise:before {
    content: "\e094";
  }
  .ph-fill.ph-article:before {
    content: "\e0a8";
  }
  .ph-fill.ph-barbell:before {
    content: "\e0b6";
  }
  .ph-fill.ph-bell-ringing:before {
    content: "\e5e8";
  }
  .ph-fill.ph-book-bookmark:before {
    content: "\e0e4";
  }
  .ph-fill.ph-book-open-text:before {
    content: "\e8f2";
  }
  .ph-fill.ph-bookmark-simple:before {
    content: "\e0ea";
  }
  .ph-fill.ph-books:before {
    content: "\e758";
  }
  .ph-fill.ph-brackets-curly:before {
    content: "\e860";
  }
  .ph-fill.ph-briefcase:before {
    content: "\e0ee";
  }
  .ph-fill.ph-buildings:before {
    content: "\e102";
  }
  .ph-fill.ph-calendar:before {
    content: "\e108";
  }
  .ph-fill.ph-calendar-blank:before {
    content: "\e10a";
  }
  .ph-fill.ph-caret-down:before {
    content: "\e136";
  }
  .ph-fill.ph-caret-right:before {
    content: "\e13a";
  }
  .ph-fill.ph-chart-bar:before {
    content: "\e150";
  }
  .ph-fill.ph-chart-donut:before {
    content: "\eaa6";
  }
  .ph-fill.ph-chart-line:before {
    content: "\e154";
  }
  .ph-fill.ph-chart-line-up:before {
    content: "\e156";
  }
  .ph-fill.ph-chat-circle:before {
    content: "\e168";
  }
  .ph-fill.ph-chat-circle-text:before {
    content: "\e16e";
  }
  .ph-fill.ph-chats-circle:before {
    content: "\e17e";
  }
  .ph-fill.ph-check-circle:before {
    content: "\e184";
  }
  .ph-fill.ph-circle:before {
    content: "\e18a";
  }
  .ph-fill.ph-circle-notch:before {
    content: "\eb44";
  }
  .ph-fill.ph-clock:before {
    content: "\e19a";
  }
  .ph-fill.ph-clock-clockwise:before {
    content: "\e19e";
  }
  .ph-fill.ph-clock-countdown:before {
    content: "\ed2c";
  }
  .ph-fill.ph-cloud:before {
    content: "\e1aa";
  }
  .ph-fill.ph-code:before {
    content: "\e1bc";
  }
  .ph-fill.ph-coffee:before {
    content: "\e1c2";
  }
  .ph-fill.ph-compass:before {
    content: "\e1c8";
  }
  .ph-fill.ph-credit-card:before {
    content: "\e1d2";
  }
  .ph-fill.ph-crosshair:before {
    content: "\e1d6";
  }
  .ph-fill.ph-crown-simple:before {
    content: "\e616";
  }
  .ph-fill.ph-cube:before {
    content: "\e1da";
  }
  .ph-fill.ph-currency-circle-dollar:before {
    content: "\e54c";
  }
  .ph-fill.ph-database:before {
    content: "\e1de";
  }
  .ph-fill.ph-envelope-simple:before {
    content: "\e218";
  }
  .ph-fill.ph-exam:before {
    content: "\e742";
  }
  .ph-fill.ph-eye:before {
    content: "\e220";
  }
  .ph-fill.ph-facebook-logo:before {
    content: "\e226";
  }
  .ph-fill.ph-file-text:before {
    content: "\e23a";
  }
  .ph-fill.ph-film-strip:before {
    content: "\e792";
  }
  .ph-fill.ph-flag:before {
    content: "\e244";
  }
  .ph-fill.ph-flag-banner-fold:before {
    content: "\ecf2";
  }
  .ph-fill.ph-flag-checkered:before {
    content: "\ea38";
  }
  .ph-fill.ph-flask:before {
    content: "\e79e";
  }
  .ph-fill.ph-flow-arrow:before {
    content: "\e6ec";
  }
  .ph-fill.ph-folder-open:before {
    content: "\e256";
  }
  .ph-fill.ph-folders:before {
    content: "\e260";
  }
  .ph-fill.ph-funnel:before {
    content: "\e266";
  }
  .ph-fill.ph-gauge:before {
    content: "\e628";
  }
  .ph-fill.ph-gear-six:before {
    content: "\e272";
  }
  .ph-fill.ph-gift:before {
    content: "\e276";
  }
  .ph-fill.ph-git-branch:before {
    content: "\e278";
  }
  .ph-fill.ph-git-fork:before {
    content: "\e27e";
  }
  .ph-fill.ph-globe:before {
    content: "\e288";
  }
  .ph-fill.ph-globe-hemisphere-east:before {
    content: "\e28a";
  }
  .ph-fill.ph-graduation-cap:before {
    content: "\e62c";
  }
  .ph-fill.ph-handshake:before {
    content: "\e582";
  }
  .ph-fill.ph-hash:before {
    content: "\e2a2";
  }
  .ph-fill.ph-headset:before {
    content: "\e584";
  }
  .ph-fill.ph-heart:before {
    content: "\e2a8";
  }
  .ph-fill.ph-house:before {
    content: "\e2c2";
  }
  .ph-fill.ph-image:before {
    content: "\e2ca";
  }
  .ph-fill.ph-infinity:before {
    content: "\e634";
  }
  .ph-fill.ph-info:before {
    content: "\e2ce";
  }
  .ph-fill.ph-lightbulb:before {
    content: "\e2dc";
  }
  .ph-fill.ph-lightning:before {
    content: "\e2de";
  }
  .ph-fill.ph-link-simple:before {
    content: "\e2e6";
  }
  .ph-fill.ph-linkedin-logo:before {
    content: "\e2ee";
  }
  .ph-fill.ph-list:before {
    content: "\e2f0";
  }
  .ph-fill.ph-list-checks:before {
    content: "\eadc";
  }
  .ph-fill.ph-lock:before {
    content: "\e2fa";
  }
  .ph-fill.ph-lock-open:before {
    content: "\e306";
  }
  .ph-fill.ph-lock-simple:before {
    content: "\e308";
  }
  .ph-fill.ph-lock-simple-open:before {
    content: "\e30a";
  }
  .ph-fill.ph-magnifying-glass:before {
    content: "\e30c";
  }
  .ph-fill.ph-map-pin:before {
    content: "\e316";
  }
  .ph-fill.ph-map-trifold:before {
    content: "\e31a";
  }
  .ph-fill.ph-medal:before {
    content: "\e320";
  }
  .ph-fill.ph-megaphone:before {
    content: "\e324";
  }
  .ph-fill.ph-microphone:before {
    content: "\e326";
  }
  .ph-fill.ph-newspaper:before {
    content: "\e344";
  }
  .ph-fill.ph-note:before {
    content: "\e348";
  }
  .ph-fill.ph-paper-plane-tilt:before {
    content: "\e398";
  }
  .ph-fill.ph-pen-nib:before {
    content: "\e3ac";
  }
  .ph-fill.ph-phone-call:before {
    content: "\e3ba";
  }
  .ph-fill.ph-play:before {
    content: "\e3d0";
  }
  .ph-fill.ph-play-circle:before {
    content: "\e3d2";
  }
  .ph-fill.ph-plugs:before {
    content: "\eb56";
  }
  .ph-fill.ph-presentation-chart:before {
    content: "\e656";
  }
  .ph-fill.ph-projector-screen:before {
    content: "\e658";
  }
  .ph-fill.ph-question:before {
    content: "\e3e8";
  }
  .ph-fill.ph-quotes:before {
    content: "\e660";
  }
  .ph-fill.ph-robot:before {
    content: "\e762";
  }
  .ph-fill.ph-rocket-launch:before {
    content: "\e3fe";
  }
  .ph-fill.ph-rows:before {
    content: "\e5a2";
  }
  .ph-fill.ph-rss-simple:before {
    content: "\e402";
  }
  .ph-fill.ph-seal-check:before {
    content: "\e606";
  }
  .ph-fill.ph-share-network:before {
    content: "\e408";
  }
  .ph-fill.ph-shield-check:before {
    content: "\e40c";
  }
  .ph-fill.ph-sidebar:before {
    content: "\eab6";
  }
  .ph-fill.ph-sparkle:before {
    content: "\e6a2";
  }
  .ph-fill.ph-squares-four:before {
    content: "\e464";
  }
  .ph-fill.ph-stack:before {
    content: "\e466";
  }
  .ph-fill.ph-star:before {
    content: "\e46a";
  }
  .ph-fill.ph-steps:before {
    content: "\ecbe";
  }
  .ph-fill.ph-strategy:before {
    content: "\ea3a";
  }
  .ph-fill.ph-tag:before {
    content: "\e478";
  }
  .ph-fill.ph-target:before {
    content: "\e47c";
  }
  .ph-fill.ph-terminal-window:before {
    content: "\eae8";
  }
  .ph-fill.ph-timer:before {
    content: "\e492";
  }
  .ph-fill.ph-toolbox:before {
    content: "\eca0";
  }
  .ph-fill.ph-twitter-logo:before {
    content: "\e4ba";
  }
  .ph-fill.ph-user:before {
    content: "\e4c2";
  }
  .ph-fill.ph-user-circle:before {
    content: "\e4c4";
  }
  .ph-fill.ph-users-three:before {
    content: "\e68e";
  }
  .ph-fill.ph-video:before {
    content: "\e740";
  }
  .ph-fill.ph-video-camera:before {
    content: "\e4da";
  }
  .ph-fill.ph-warning:before {
    content: "\e4e0";
  }
  .ph-fill.ph-warning-circle:before {
    content: "\e4e2";
  }
  .ph-fill.ph-wrench:before {
    content: "\e5d4";
  }
  .ph-fill.ph-x:before {
    content: "\e4f6";
  }
  .ph-fill.ph-x-circle:before {
    content: "\e4f8";
  }
  .ph-fill.ph-x-logo:before {
    content: "\e4bc";
  }
  .ph.ph-arrow-counter-clockwise:before, .ph.ph-arrow-square-out:before, .ph.ph-bell:before, .ph.ph-caret-left:before, .ph.ph-cards:before, .ph.ph-check:before, .ph.ph-dots-six-vertical:before, .ph.ph-download-simple:before, .ph.ph-file:before, .ph.ph-file-video:before, .ph.ph-gear:before, .ph.ph-github-logo:before, .ph.ph-lifebuoy:before, .ph.ph-link:before, .ph.ph-list-bullets:before, .ph.ph-list-numbers:before, .ph.ph-moon:before, .ph.ph-palette:before, .ph.ph-paperclip:before, .ph.ph-pencil-simple:before, .ph.ph-caret-up:before, .ph.ph-copy:before, .ph.ph-plus:before, .ph.ph-sun:before, .ph.ph-text-align-justify:before, .ph.ph-text-b:before, .ph.ph-text-h-three:before, .ph.ph-text-h-two:before, .ph.ph-text-italic:before, .ph.ph-trash:before, .ph.ph-upload-simple:before {
    content: "";
    display: inline-block;
    inline-size: 1em;
    block-size: 1em;
    vertical-align: -0.125em;
    background: currentColor;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }
  .ph.ph-arrow-counter-clockwise:before {
    mask-image: var(--phgap-arrow-counter-clockwise);
    -webkit-mask-image: var(--phgap-arrow-counter-clockwise);
  }
  .ph.ph-arrow-square-out:before {
    mask-image: var(--phgap-arrow-square-out);
    -webkit-mask-image: var(--phgap-arrow-square-out);
  }
  .ph.ph-bell:before {
    mask-image: var(--phgap-bell);
    -webkit-mask-image: var(--phgap-bell);
  }
  .ph.ph-caret-left:before {
    mask-image: var(--phgap-caret-left);
    -webkit-mask-image: var(--phgap-caret-left);
  }
  .ph.ph-caret-up:before {
    mask-image: var(--phgap-caret-up);
    -webkit-mask-image: var(--phgap-caret-up);
  }
  .ph.ph-cards:before {
    mask-image: var(--phgap-cards);
    -webkit-mask-image: var(--phgap-cards);
  }
  .ph.ph-check:before {
    mask-image: var(--phgap-check);
    -webkit-mask-image: var(--phgap-check);
  }
  .ph.ph-copy:before {
    mask-image: var(--phgap-copy);
    -webkit-mask-image: var(--phgap-copy);
  }
  .ph.ph-dots-six-vertical:before {
    mask-image: var(--phgap-dots-six-vertical);
    -webkit-mask-image: var(--phgap-dots-six-vertical);
  }
  .ph.ph-download-simple:before {
    mask-image: var(--phgap-download-simple);
    -webkit-mask-image: var(--phgap-download-simple);
  }
  .ph.ph-file:before {
    mask-image: var(--phgap-file);
    -webkit-mask-image: var(--phgap-file);
  }
  .ph.ph-file-video:before {
    mask-image: var(--phgap-file-video);
    -webkit-mask-image: var(--phgap-file-video);
  }
  .ph.ph-gear:before {
    mask-image: var(--phgap-gear);
    -webkit-mask-image: var(--phgap-gear);
  }
  .ph.ph-github-logo:before {
    mask-image: var(--phgap-github-logo);
    -webkit-mask-image: var(--phgap-github-logo);
  }
  .ph.ph-lifebuoy:before {
    mask-image: var(--phgap-lifebuoy);
    -webkit-mask-image: var(--phgap-lifebuoy);
  }
  .ph.ph-link:before {
    mask-image: var(--phgap-link);
    -webkit-mask-image: var(--phgap-link);
  }
  .ph.ph-list-bullets:before {
    mask-image: var(--phgap-list-bullets);
    -webkit-mask-image: var(--phgap-list-bullets);
  }
  .ph.ph-list-numbers:before {
    mask-image: var(--phgap-list-numbers);
    -webkit-mask-image: var(--phgap-list-numbers);
  }
  .ph.ph-moon:before {
    mask-image: var(--phgap-moon);
    -webkit-mask-image: var(--phgap-moon);
  }
  .ph.ph-palette:before {
    mask-image: var(--phgap-palette);
    -webkit-mask-image: var(--phgap-palette);
  }
  .ph.ph-paperclip:before {
    mask-image: var(--phgap-paperclip);
    -webkit-mask-image: var(--phgap-paperclip);
  }
  .ph.ph-pencil-simple:before {
    mask-image: var(--phgap-pencil-simple);
    -webkit-mask-image: var(--phgap-pencil-simple);
  }
  .ph.ph-plus:before {
    mask-image: var(--phgap-plus);
    -webkit-mask-image: var(--phgap-plus);
  }
  .ph.ph-sun:before {
    mask-image: var(--phgap-sun);
    -webkit-mask-image: var(--phgap-sun);
  }
  .ph.ph-text-align-justify:before {
    mask-image: var(--phgap-text-align-justify);
    -webkit-mask-image: var(--phgap-text-align-justify);
  }
  .ph.ph-text-b:before {
    mask-image: var(--phgap-text-b);
    -webkit-mask-image: var(--phgap-text-b);
  }
  .ph.ph-text-h-three:before {
    mask-image: var(--phgap-text-h-three);
    -webkit-mask-image: var(--phgap-text-h-three);
  }
  .ph.ph-text-h-two:before {
    mask-image: var(--phgap-text-h-two);
    -webkit-mask-image: var(--phgap-text-h-two);
  }
  .ph.ph-text-italic:before {
    mask-image: var(--phgap-text-italic);
    -webkit-mask-image: var(--phgap-text-italic);
  }
  .ph.ph-trash:before {
    mask-image: var(--phgap-trash);
    -webkit-mask-image: var(--phgap-trash);
  }
  .ph.ph-upload-simple:before {
    mask-image: var(--phgap-upload-simple);
    -webkit-mask-image: var(--phgap-upload-simple);
  }
  :root {
    --phgap-arrow-counter-clockwise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 10.5a7 7 0 1 1-.6 5'/%3E%3Cpath d='M5.2 5.5v5h5'/%3E%3C/svg%3E");
    --phgap-arrow-square-out: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 10V4.5H14M19.3 4.7 12 12'/%3E%3Cpath d='M19.5 14v4a1.5 1.5 0 0 1-1.5 1.5H6A1.5 1.5 0 0 1 4.5 18V6A1.5 1.5 0 0 1 6 4.5h4'/%3E%3C/svg%3E");
    --phgap-bell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 10a6 6 0 0 1 12 0c0 4 1.5 5.5 2 6H4c.5-.5 2-2 2-6Z'/%3E%3Cpath d='M9.5 19.5a2.5 2.5 0 0 0 5 0'/%3E%3C/svg%3E");
    --phgap-caret-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 15 12 7.5l7.5 7.5'/%3E%3C/svg%3E");
    --phgap-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.5' y='8.5' width='11.5' height='11.5' rx='1.5'/%3E%3Cpath d='M15.5 8.5v-3a1.5 1.5 0 0 0-1.5-1.5H5.5A1.5 1.5 0 0 0 4 5.5v8.5a1.5 1.5 0 0 0 1.5 1.5h3'/%3E%3C/svg%3E");
    --phgap-text-align-justify: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6h17M3.5 10.5h17M3.5 15h17M3.5 19.5h17'/%3E%3C/svg%3E");
    --phgap-caret-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5 7.5 12l7.5 7.5'/%3E%3C/svg%3E");
    --phgap-cards: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='7.5' width='13' height='12' rx='1.5'/%3E%3Cpath d='M8 4.5h10.5A1.5 1.5 0 0 1 20 6v10'/%3E%3C/svg%3E");
    --phgap-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4.5 13 5 5L19.5 6.5'/%3E%3C/svg%3E");
    --phgap-dots-six-vertical: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Ccircle cx='9.2' cy='5.5' r='1.4'/%3E%3Ccircle cx='14.8' cy='5.5' r='1.4'/%3E%3Ccircle cx='9.2' cy='12' r='1.4'/%3E%3Ccircle cx='14.8' cy='12' r='1.4'/%3E%3Ccircle cx='9.2' cy='18.5' r='1.4'/%3E%3Ccircle cx='14.8' cy='18.5' r='1.4'/%3E%3C/svg%3E");
    --phgap-download-simple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v10M8.2 10.8 12 14.6l3.8-3.8'/%3E%3Cpath d='M4.5 15.5v3A1.5 1.5 0 0 0 6 20h12a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E");
    --phgap-file: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8.5Z'/%3E%3Cpath d='M13.5 3.5v5h5'/%3E%3C/svg%3E");
    --phgap-file-video: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.5 3.5H7A1.5 1.5 0 0 0 5.5 5v14A1.5 1.5 0 0 0 7 20.5h10a1.5 1.5 0 0 0 1.5-1.5V8.5Z'/%3E%3Cpath d='M13.5 3.5v5h5'/%3E%3Cpath d='M10.4 12.4l4 2.3-4 2.3Z'/%3E%3C/svg%3E");
    --phgap-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 2.8v2.4M12 18.8v2.4M2.8 12h2.4M18.8 12h2.4M5.5 5.5l1.7 1.7M16.8 16.8l1.7 1.7M18.5 5.5l-1.7 1.7M7.2 16.8l-1.7 1.7'/%3E%3C/svg%3E");
    --phgap-github-logo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1.2 -1.2 26.4 26.4'%3E%3Cpath fill='black' d='M12 .3a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2c-3.3.7-4-1.6-4-1.6-.6-1.4-1.4-1.8-1.4-1.8-1-.7 0-.7 0-.7 1.2 0 1.9 1.2 1.9 1.2 1 1.8 2.8 1.3 3.5 1 0-.8.4-1.3.7-1.6-2.6-.3-5.4-1.3-5.4-5.9 0-1.3.4-2.4 1.2-3.2-.2-.3-.6-1.5.1-3.2 0 0 1-.3 3.3 1.2a11.5 11.5 0 0 1 6 0C17.2 4.8 18.2 5.1 18.2 5.1c.7 1.7.3 2.9.1 3.2.8.8 1.2 1.9 1.2 3.2 0 4.6-2.8 5.6-5.5 5.9.5.4.8 1.1.8 2.2v3.3c0 .3.2.7.9.6A12 12 0 0 0 12 .3'/%3E%3C/svg%3E");
    --phgap-lifebuoy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Ccircle cx='12' cy='12' r='3.5'/%3E%3Cpath d='M6 6l3.5 3.5M18 6l-3.5 3.5M18 18l-3.5-3.5M6 18l3.5-3.5'/%3E%3C/svg%3E");
    --phgap-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4 4 0 0 0 6 .4l3-3a4 4 0 0 0-5.6-5.6l-1.7 1.7'/%3E%3Cpath d='M14 10a4 4 0 0 0-6-.4l-3 3a4 4 0 0 0 5.6 5.6l1.7-1.7'/%3E%3C/svg%3E");
    --phgap-list-bullets: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6h10M9.5 12h10M9.5 18h10'/%3E%3Ccircle cx='5' cy='6' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='5' cy='12' r='1.2' fill='black' stroke='none'/%3E%3Ccircle cx='5' cy='18' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
    --phgap-list-numbers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.5 6h9M10.5 12h9M10.5 18h9'/%3E%3Cpath d='M4.3 4.8 5.8 4v4M4.2 10.7a1.5 1.5 0 0 1 2.6 1c0 1-1.6 1.6-2.6 2.3h2.9M4.3 16.3h2.2l-1.3 1.6a1.4 1.4 0 1 1-1 2.4'/%3E%3C/svg%3E");
    --phgap-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 14.5A8 8 0 1 1 9.5 4.5a6.5 6.5 0 0 0 10 10Z'/%3E%3C/svg%3E");
    --phgap-palette: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 1 0 0 17c1.4 0 2-.8 2-1.7 0-1.5-1.5-2 0-3.3 1-1 6.5.6 6.5-3.5A8.7 8.7 0 0 0 12 3.5Z'/%3E%3Ccircle cx='8' cy='9' r='.4' fill='black'/%3E%3Ccircle cx='12.5' cy='7' r='.4' fill='black'/%3E%3Ccircle cx='16.5' cy='9.5' r='.4' fill='black'/%3E%3Ccircle cx='7.5' cy='13.5' r='.4' fill='black'/%3E%3C/svg%3E");
    --phgap-paperclip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16.5 8.5-6.8 6.8a1.9 1.9 0 0 0 2.7 2.7l6.8-6.9a3.8 3.8 0 0 0-5.4-5.4l-6.8 6.9a5.7 5.7 0 0 0 8 8l5.5-5.4'/%3E%3C/svg%3E");
    --phgap-pencil-simple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5 4 4L8 20H4v-4Z'/%3E%3Cpath d='M13 7l4 4'/%3E%3C/svg%3E");
    --phgap-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4.5v15M4.5 12h15'/%3E%3C/svg%3E");
    --phgap-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.5v2M12 19.5v2M2.5 12h2M19.5 12h2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M19.1 4.9l-1.4 1.4M6.3 17.7l-1.4 1.4'/%3E%3C/svg%3E");
    --phgap-text-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.5 4.5h6a3.5 3.5 0 0 1 0 7h-6ZM7.5 11.5h7a4 4 0 0 1 0 8h-7Z'/%3E%3C/svg%3E");
    --phgap-text-h-three: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6v12M12 6v12M4 12h8'/%3E%3Cpath d='M16.5 9.5a2.3 2.3 0 1 1 2.3 3 2.5 2.5 0 1 1-2.5 3.2'/%3E%3C/svg%3E");
    --phgap-text-h-two: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6v12M12 6v12M4 12h8'/%3E%3Cpath d='M16 10.3a2.5 2.5 0 0 1 4.4 1.6c0 2.2-4.4 3.4-4.4 6.1h4.5'/%3E%3C/svg%3E");
    --phgap-text-italic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 4.5h9M5 19.5h9M14.5 4.5l-5 15'/%3E%3C/svg%3E");
    --phgap-trash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 6.5h15M9.5 6.5v-2h5v2M6.5 6.5l1 13.5a1 1 0 0 0 1 .9h7a1 1 0 0 0 1-.9l1-13.5'/%3E%3Cpath d='M10 10.5v6M14 10.5v6'/%3E%3C/svg%3E");
    --phgap-upload-simple: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 14.5v-10M8.2 8.2 12 4.4l3.8 3.8'/%3E%3Cpath d='M4.5 15.5v3A1.5 1.5 0 0 0 6 20h12a1.5 1.5 0 0 0 1.5-1.5v-3'/%3E%3C/svg%3E");
  }
  .ns-pattern {
    position: relative;
  }
  .ns-pattern > * {
    position: relative;
  }
  .ns-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: var(--ns-pattern-image, none);
    background-size: var(--ns-pattern-size, auto);
    background-position: var(--ns-pattern-position, 0 0);
    -webkit-mask-image: var(--ns-pattern-mask, none);
    mask-image: var(--ns-pattern-mask, none);
  }
  .ns-pattern {
    --ns-pattern-ink-1: rgb(255 255 255 / 0.08);
    --ns-pattern-ink-2: rgb(255 255 255 / 0.18);
    --ns-pattern-ink-3: rgb(255 255 255 / 0.06);
    --ns-pattern-ink-4: rgb(255 255 255 / 0.10);
    --ns-pattern-ink-5: rgb(255 255 255 / 0.16);
  }
  .ns-pattern--on-light {
    --ns-pattern-ink-1: rgb(0 0 0 / 0.13);
    --ns-pattern-ink-2: rgb(0 0 0 / 0.29);
    --ns-pattern-ink-3: rgb(0 0 0 / 0.10);
    --ns-pattern-ink-4: rgb(0 0 0 / 0.16);
    --ns-pattern-ink-5: rgb(0 0 0 / 0.26);
  }
  .ns-pattern--grid {
    --ns-pattern-image: linear-gradient(to right, var(--ns-pattern-ink-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ns-pattern-ink-1) 1px, transparent 1px);
    --ns-pattern-size: 22px 22px;
    --ns-pattern-mask: radial-gradient(ellipse 100% 100% at 50% 40%, #000 25%, transparent 78%);
  }
  .ns-pattern--dots {
    --ns-pattern-image: radial-gradient(var(--ns-pattern-ink-1) 1px, transparent 1px);
    --ns-pattern-size: 14px 14px;
    --ns-pattern-mask: radial-gradient(ellipse 90% 90% at 50% 50%, #000 20%, transparent 75%);
  }
  .ns-pattern--diagonal {
    --ns-pattern-image: repeating-linear-gradient(45deg, var(--ns-pattern-ink-1) 0 1px, transparent 1px 12px);
  }
  .ns-pattern--hex {
    --ns-pattern-image: linear-gradient(30deg, var(--ns-pattern-ink-1) 1px, transparent 1px),
    linear-gradient(150deg, var(--ns-pattern-ink-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--ns-pattern-ink-1) 1px, transparent 1px);
    --ns-pattern-size: 26px 45px;
  }
  .ns-pattern--concentric {
    --ns-pattern-image: radial-gradient(circle, transparent 0 8px, var(--ns-pattern-ink-1) 9px 10px, transparent 11px),
    radial-gradient(circle, transparent 0 16px, var(--ns-pattern-ink-3) 17px 18px, transparent 19px);
    --ns-pattern-size: 80px 80px;
    --ns-pattern-position: 50% 50%;
  }
  .ns-pattern--chevron-grid {
    --ns-pattern-image: repeating-linear-gradient(90deg, var(--ns-pattern-ink-1) 0 6px, transparent 6px 16px),
    repeating-linear-gradient(0deg, var(--ns-pattern-ink-1) 0 6px, transparent 6px 16px);
  }
  .ns-pattern--blueprint {
    --ns-pattern-image: linear-gradient(to right, var(--ns-pattern-ink-4) 1px, transparent 1px);
    --ns-pattern-size: 12px 100%;
    --ns-pattern-mask: linear-gradient(to bottom, #000, transparent);
  }
  .ns-pattern--topographic {
    --ns-pattern-image: radial-gradient(var(--ns-pattern-ink-5) 1.5px, transparent 1.5px);
    --ns-pattern-size: 9px 9px;
    --ns-pattern-mask: radial-gradient(circle at 30% 30%, #000 0, transparent 60%);
  }
  .ns-pattern--dashed-path::before {
    inset: 8px auto 8px 50%;
    inline-size: 2px;
    background-image: repeating-linear-gradient(to bottom, var(--ns-pattern-ink-2) 0 2px, transparent 2px 9px);
  }
  .ns-pattern--circuit {
    --ns-pattern-image: linear-gradient(to right, var(--ns-pattern-ink-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--ns-pattern-ink-1) 1px, transparent 1px),
    radial-gradient(var(--ns-pattern-ink-2) 1.5px, transparent 1.5px);
    --ns-pattern-size: 48px 48px, 48px 48px, 48px 48px;
    --ns-pattern-position: 0 0, 0 0, 24px 24px;
    --ns-pattern-mask: radial-gradient(ellipse 110% 90% at 50% 45%, #000 30%, transparent 80%);
  }
  .ns-pattern--stagger {
    --ns-pattern-image: repeating-linear-gradient(to right, var(--ns-pattern-ink-1) 0 18px, transparent 18px 34px),
    repeating-linear-gradient(to right, var(--ns-pattern-ink-3) 0 18px, transparent 18px 34px);
    --ns-pattern-size: 34px 5px, 34px 5px;
    --ns-pattern-position: 0 0, 17px 14px;
    --ns-pattern-mask: linear-gradient(to bottom, #000, transparent 85%);
  }
  .ns-pattern--arc {
    --ns-pattern-image: radial-gradient(circle at 0% 0%, transparent 0 118px, var(--ns-pattern-ink-1) 119px 120px, transparent 121px),
    radial-gradient(circle at 0% 0%, transparent 0 198px, var(--ns-pattern-ink-1) 199px 200px, transparent 201px),
    radial-gradient(circle at 0% 0%, transparent 0 278px, var(--ns-pattern-ink-3) 279px 280px, transparent 281px);
    --ns-pattern-size: 100% 100%;
  }
  .ns-pattern--mesh {
    --ns-pattern-image: repeating-linear-gradient(45deg, var(--ns-pattern-ink-1) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-45deg, var(--ns-pattern-ink-1) 0 1px, transparent 1px 9px);
    --ns-pattern-mask: radial-gradient(ellipse 90% 90% at 50% 50%, #000 10%, transparent 70%);
  }
  .ns-shape {
    display: block;
    inline-size: 8rem;
    aspect-ratio: 1;
    background: var(--color-brand-500);
    flex: none;
  }
  .ns-shape--blend {
    mix-blend-mode: soft-light;
    opacity: 0.9;
  }
  .ns-shape--wash {
    opacity: 0.08;
  }
  .ns-shape--cloud {
    aspect-ratio: 1.55;
    --ns-shape-mask: radial-gradient(circle at 30% 62%, #000 22%, transparent 23%),
    radial-gradient(circle at 50% 40%, #000 30%, transparent 31%),
    radial-gradient(circle at 71% 58%, #000 25%, transparent 26%),
    radial-gradient(circle at 45% 72%, #000 26%, transparent 27%),
    radial-gradient(circle at 62% 74%, #000 21%, transparent 22%);
    -webkit-mask-image: var(--ns-shape-mask);
    mask-image: var(--ns-shape-mask);
  }
  .ns-shape--plate {
    clip-path: polygon(50% 0%, 90% 12%, 100% 48%, 88% 84%, 50% 100%, 12% 84%, 0% 48%, 10% 12%);
  }
  .ns-shape--bolt {
    clip-path: polygon(58% 0%, 22% 54%, 46% 54%, 38% 100%, 78% 42%, 52% 42%);
  }
  .ns-shape--orbit {
    --ns-shape-mask: radial-gradient(circle at 50% 50%, transparent 0 41%, #000 42% 46%, transparent 47%),
    radial-gradient(circle at 86% 24%, #000 8%, transparent 9%);
    -webkit-mask-image: var(--ns-shape-mask);
    mask-image: var(--ns-shape-mask);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ns-shape--drift {
      animation: ns-shape-drift 24s linear infinite;
    }
  }
  @keyframes ns-shape-drift {
    from {
      rotate: 0deg;
    }
    to {
      rotate: 360deg;
    }
  }
  .ns-shape--behind {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    inset-block-start: -10%;
    inset-inline-end: -6%;
  }
  .ns-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-inline);
    min-block-size: var(--target-comfy);
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out), opacity var(--duration-fast) linear;
  }
  .ns-btn:active:not(:disabled) {
    opacity: var(--opacity-press);
  }
  .ns-btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-btn:disabled, .ns-btn[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
  }
  .ns-btn--xs {
    min-block-size: var(--space-7);
    padding: var(--space-1) var(--space-2-5);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ns-btn--sm {
    min-block-size: var(--space-8);
    padding: var(--space-1-5) var(--space-3);
    font-size: var(--size-fine);
  }
  .ns-btn--lg {
    min-block-size: 2.75rem;
    padding: var(--space-3) var(--space-5);
    font-size: var(--size-body);
  }
  .ns-btn--xl {
    min-block-size: 3.25rem;
    padding: var(--space-4) var(--space-8);
    font-size: var(--size-body-lg);
  }
  .ns-btn--block {
    inline-size: 100%;
  }
  @media (max-width: 39.999rem) {
    .ns-btn--block-sm {
      inline-size: 100%;
    }
  }
  .ns-btn--pill {
    border-radius: var(--radius-pill);
  }
  .ns-btn--primary {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
    color: var(--color-on-brand);
  }
  .ns-btn--primary:hover:not(:disabled) {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
  }
  .ns-btn--accent {
    background: var(--color-brand-600);
    border-color: var(--color-brand-600);
    color: var(--color-on-brand);
  }
  .ns-btn--accent:hover:not(:disabled) {
    background: var(--color-brand-700);
    border-color: var(--color-brand-700);
  }
  .ns-btn--outline {
    background: transparent;
    border-color: var(--color-border);
    color: var(--color-ink);
  }
  .ns-btn--outline:hover:not(:disabled) {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-btn--soft {
    background: color-mix(in srgb, #0176d3 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
    }
    border-color: transparent;
    color: var(--color-brand-600);
  }
  .ns-btn--soft:hover:not(:disabled) {
    background: color-mix(in srgb, #0176d3 16%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 16%, transparent);
    }
  }
  [data-theme="dark"] .ns-btn--soft {
    color: var(--color-brand-300);
  }
  .ns-btn--quiet {
    background: transparent;
    border-color: transparent;
    color: var(--color-muted);
  }
  .ns-btn--quiet:hover:not(:disabled) {
    color: var(--color-ink);
    background: var(--color-surface-sunken);
  }
  .ns-btn--white {
    background: var(--color-on-dark);
    border-color: var(--color-on-dark);
    color: var(--color-brand-800);
  }
  .ns-btn--white:hover:not(:disabled) {
    background: var(--color-brand-50);
  }
  .ns-btn--ghost {
    background: transparent;
    border-color: var(--color-on-dark-border);
    color: var(--color-on-dark);
  }
  .ns-btn--ghost:hover:not(:disabled) {
    background: var(--color-on-dark-wash);
    border-color: var(--color-on-dark-border-hover);
  }
  .ns-btn--danger {
    background: transparent;
    border-color: var(--color-error);
    color: var(--color-error-ink);
  }
  .ns-btn--danger:hover:not(:disabled) {
    background: color-mix(in srgb, #ea001e 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-error) 8%, transparent);
    }
  }
  .ns-btn--danger-solid {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--color-on-brand);
  }
  .ns-btn--danger-solid:hover:not(:disabled) {
    background: var(--color-error-ink);
    border-color: var(--color-error-ink);
  }
  .ns-btn--icon {
    padding: 0;
    inline-size: var(--target-comfy);
    min-inline-size: var(--target-comfy);
  }
  .ns-btn--icon.ns-btn--xs {
    inline-size: var(--space-7);
    min-inline-size: var(--space-7);
  }
  .ns-btn--icon.ns-btn--sm {
    inline-size: var(--space-8);
    min-inline-size: var(--space-8);
  }
  .ns-btn--icon.ns-btn--lg {
    inline-size: 2.75rem;
    min-inline-size: 2.75rem;
  }
  .ns-btn--icon.ns-btn--pill {
    border-radius: var(--radius-pill);
  }
  .ns-btn[data-loading="true"] {
    position: relative;
    cursor: progress;
    pointer-events: none;
  }
  .ns-btn[data-loading="true"] > * {
    opacity: var(--opacity-loading);
  }
  .ns-btn[data-loading="true"]::after {
    content: "";
    position: absolute;
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-pill);
    animation: ns-spin 700ms linear infinite;
  }
  .ns-btn__arrow {
    transition: translate var(--duration-fast) var(--ease-out);
  }
  .ns-btn:hover:not(:disabled) .ns-btn__arrow {
    translate: 0.15rem 0;
  }
  .ns-btn--back:hover:not(:disabled) .ns-btn__arrow {
    translate: -0.15rem 0;
  }
  .ns-btn__count, .ns-btn__kbd {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-variant-numeric: tabular-nums;
    opacity: 0.7;
  }
  .ns-btn__kbd {
    padding-inline: var(--space-1);
    border: 1px solid currentColor;
    border-radius: var(--radius-sm);
    opacity: 0.5;
  }
  .ns-btn[aria-pressed="true"]:not(.ns-btn--primary) {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
    background: color-mix(in srgb, #0176d3 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 8%, transparent);
    }
  }
  [data-theme="dark"] .ns-btn[aria-pressed="true"]:not(.ns-btn--primary) {
    color: var(--color-brand-300);
  }
  .ns-btn--swap {
    display: inline-grid;
    grid-auto-flow: column;
  }
  .ns-btn--swap > [data-when] {
    grid-area: 1 / 1;
  }
  .ns-btn--swap[aria-pressed="false"] > [data-when="on"], .ns-btn--swap[aria-pressed="true"] > [data-when="off"] {
    visibility: hidden;
  }
  .ns-btn-group {
    display: inline-flex;
  }
  .ns-btn-group > .ns-btn {
    border-radius: 0;
  }
  .ns-btn-group > .ns-btn + .ns-btn {
    margin-inline-start: -1px;
  }
  .ns-btn-group > .ns-btn:first-child {
    border-start-start-radius: var(--radius-btn);
    border-end-start-radius: var(--radius-btn);
  }
  .ns-btn-group > .ns-btn:last-child {
    border-start-end-radius: var(--radius-btn);
    border-end-end-radius: var(--radius-btn);
  }
  .ns-btn-group--pill > .ns-btn:first-child {
    border-start-start-radius: var(--radius-pill);
    border-end-start-radius: var(--radius-pill);
    padding-inline-start: var(--space-4);
  }
  .ns-btn-group--pill > .ns-btn:last-child {
    border-start-end-radius: var(--radius-pill);
    border-end-end-radius: var(--radius-pill);
    padding-inline-end: var(--space-4);
  }
  .ns-btn-group--block {
    display: flex;
    inline-size: 100%;
  }
  .ns-btn-group--block > .ns-btn {
    flex: 1;
  }
  .ns-btn-group > .ns-btn:focus-visible, .ns-btn-group > .ns-btn[aria-pressed="true"] {
    position: relative;
    z-index: var(--z-raised);
  }
  .ns-btn-group > .ns-btn[aria-pressed="true"] {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  @media (forced-colors: active) {
    .ns-btn {
      border-color: ButtonBorder;
    }
    .ns-btn--primary {
      background: Highlight;
      color: HighlightText;
    }
  }
}
@keyframes ns-spin {
  to {
    rotate: 360deg;
  }
}
@layer ns-components {
  .ns-field {
    display: flex;
    flex-direction: column;
    gap: var(--gap-field);
  }
  .ns-field__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-field__required {
    color: var(--color-brand-500);
    margin-inline-start: var(--space-1);
  }
  .ns-field__help {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1-5);
    font-size: var(--size-small);
    color: var(--color-error-ink);
  }
  .ns-field__error::before {
    content: "\e5b4";
    font-family: var(--font-icon);
    flex: none;
    line-height: var(--leading-body);
  }
  .ns-input, .ns-select, .ns-textarea {
    inline-size: 100%;
    box-sizing: border-box;
    min-block-size: var(--target-comfy);
    padding: var(--pad-control) var(--pad-control-x);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface);
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--size-body);
    line-height: var(--leading-heading);
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-textarea {
    min-block-size: 7rem;
    resize: vertical;
    line-height: var(--leading-body);
  }
  .ns-input--mono {
    font-family: var(--font-mono);
    font-size: var(--size-mono);
  }
  .ns-input::placeholder, .ns-textarea::placeholder {
    color: var(--color-muted);
    opacity: 1;
  }
  .ns-input:hover:not(:disabled), .ns-select:hover:not(:disabled), .ns-textarea:hover:not(:disabled) {
    border-color: #0176d3;
    @supports (color: color-mix(in lab, red, red)) {
      border-color: color-mix(in srgb, var(--color-brand-500) 45%, var(--color-border));
    }
  }
  .ns-input:focus-visible, .ns-select:focus-visible, .ns-textarea:focus-visible {
    outline: none;
    border-color: var(--color-brand-500);
    box-shadow: var(--shadow-focus);
  }
  .ns-input:disabled, .ns-select:disabled, .ns-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--color-surface-sunken);
  }
  .ns-input[aria-invalid="true"], .ns-select[aria-invalid="true"], .ns-textarea[aria-invalid="true"] {
    border-color: var(--color-error);
  }
  .ns-input[aria-invalid="true"]:focus-visible, .ns-select[aria-invalid="true"]:focus-visible, .ns-textarea[aria-invalid="true"]:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, #ea001e 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-error) 25%, transparent);
    }
  }
  .ns-input-wrap {
    position: relative;
    display: block;
    inline-size: 100%;
  }
  .ns-input-wrap__icon, .ns-input-wrap__hint {
    position: absolute;
    inset-block-start: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
    pointer-events: none;
  }
  .ns-input-wrap__icon {
    inset-inline-start: var(--space-3);
  }
  .ns-input-wrap__hint {
    inset-inline-end: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: var(--space-0-5) var(--space-1-5);
  }
  .ns-input--has-icon {
    padding-inline-start: var(--space-9);
  }
  .ns-input--has-hint {
    padding-inline-end: var(--space-14);
  }
  .ns-select {
    appearance: none;
    padding-inline-end: var(--space-8);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23706e6b' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 1rem;
  }
  [data-theme="dark"] .ns-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%237fa0c2' stroke-width='1.5'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  }
  .ns-choice {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2-5);
    cursor: pointer;
    padding-block: var(--space-1);
  }
  .ns-choice:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.5;
  }
  .ns-checkbox, .ns-radio {
    appearance: none;
    margin: 0;
    flex: none;
    inline-size: 1.125rem;
    block-size: 1.125rem;
    margin-block-start: calc((1rem * var(--leading-body) - 1.125rem) / 2);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    display: grid;
    place-content: center;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-checkbox {
    border-radius: var(--radius-sm);
  }
  .ns-radio {
    border-radius: var(--radius-pill);
  }
  .ns-checkbox::before {
    content: "";
    inline-size: 0.625rem;
    block-size: 0.625rem;
    box-shadow: inset 1em 1em var(--color-on-brand);
    clip-path: polygon(14% 44%, 0 65%, 14% 44%, 14% 44%, 14% 44%, 14% 44%);
    transition: clip-path var(--duration-base) var(--ease-out);
  }
  .ns-checkbox:checked::before {
    clip-path: polygon(14% 44%, 0 65%, 40% 100%, 100% 16%, 84% 0, 39% 66%);
  }
  .ns-checkbox:indeterminate::before {
    clip-path: polygon(0 40%, 100% 40%, 100% 60%, 0 60%);
  }
  .ns-radio::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-on-brand);
    transform: scale(0);
    transition: transform var(--duration-base) var(--ease-out);
  }
  .ns-radio:checked::before {
    transform: scale(1);
  }
  .ns-checkbox:checked, .ns-checkbox:indeterminate, .ns-radio:checked {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
  }
  .ns-checkbox:focus-visible, .ns-radio:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-choice__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .ns-choice__label {
    color: var(--color-ink);
  }
  .ns-choice__help {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-switch {
    appearance: none;
    margin: 0;
    flex: none;
    cursor: pointer;
    inline-size: 2.25rem;
    block-size: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    position: relative;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-switch::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 0.1875rem;
    translate: 0 -50%;
    inline-size: 0.875rem;
    block-size: 0.875rem;
    border-radius: var(--radius-pill);
    background: var(--color-muted);
    transition: translate var(--duration-base) var(--ease-out), inline-size var(--duration-fast) var(--ease-out), background-color var(--duration-base) var(--ease-out);
  }
  .ns-switch:checked {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
  }
  .ns-switch:checked::before {
    translate: 1rem -50%;
    background: var(--color-on-brand);
  }
  .ns-switch:active::before {
    inline-size: 1.0625rem;
  }
  .ns-switch:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-switch:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  .ns-fieldset {
    border: 0;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-fieldset__legend {
    padding: 0;
    margin-block-end: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  @media (forced-colors: active) {
    .ns-checkbox, .ns-radio, .ns-switch {
      border-color: ButtonBorder;
    }
    .ns-checkbox:checked, .ns-checkbox:indeterminate, .ns-radio:checked, .ns-switch:checked {
      background: Highlight;
      border-color: Highlight;
    }
    .ns-checkbox::before, .ns-radio::before, .ns-switch::before {
      box-shadow: none;
      background: ButtonFace;
    }
    .ns-input, .ns-select, .ns-textarea {
      border-color: ButtonBorder;
    }
  }
  .ns-combobox {
    position: relative;
    display: block;
    inline-size: 100%;
  }
  .ns-combobox__list {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline: 0;
    z-index: var(--z-dropdown);
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    max-block-size: 16rem;
    overflow-y: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
  }
  .ns-combobox__list[hidden] {
    display: none;
  }
  .ns-combobox__option {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-sm);
    font-size: var(--size-small);
    color: var(--color-ink);
    cursor: pointer;
  }
  .ns-combobox__option:hover, .ns-combobox__option[aria-selected="true"] {
    background: var(--color-surface-sunken);
  }
  .ns-combobox__option[aria-selected="true"] {
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-combobox__match {
    font-weight: var(--weight-body-strong);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-combobox__match {
    color: var(--color-brand-300);
  }
  .ns-combobox__meta {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-combobox__empty {
    padding: var(--space-3);
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-segmented {
    display: inline-flex;
    padding: 2px;
    gap: 2px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface-sunken);
  }
  .ns-segmented__option {
    position: relative;
    display: flex;
  }
  .ns-segmented__option input {
    position: absolute;
    inset: 0;
    opacity: 0;
    margin: 0;
    cursor: pointer;
  }
  .ns-segmented__option span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-muted);
    white-space: nowrap;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-segmented__option input:checked + span {
    background: var(--color-surface);
    color: var(--color-brand-600);
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  [data-theme="dark"] .ns-segmented__option input:checked + span {
    color: var(--color-brand-300);
  }
  .ns-segmented__option input:focus-visible + span {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-segmented__option input:disabled + span {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
  }
  .ns-datefield {
    position: relative;
    display: block;
  }
  .ns-datefield input {
    font-family: var(--font-mono);
    font-size: var(--size-mono);
  }
  .ns-datefield input::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.55;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-datefield input::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
  }
  [data-theme="dark"] .ns-datefield input::-webkit-calendar-picker-indicator {
    filter: invert(1);
  }
  .ns-calendar {
    position: absolute;
    inset-block-start: calc(100% + var(--space-1));
    inset-inline-start: 0;
    z-index: var(--z-dropdown);
    inline-size: max-content;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
  }
  .ns-calendar[hidden] {
    display: none;
  }
  .ns-calendar__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-2);
  }
  .ns-calendar__month {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .ns-calendar__nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--color-muted);
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-calendar__nav:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-calendar__grid {
    border-collapse: collapse;
  }
  .ns-calendar__dow {
    inline-size: 2.25rem;
    padding-block-end: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-calendar__day {
    inline-size: 2.25rem;
    block-size: 2.25rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-small);
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-calendar__day:hover {
    background: var(--color-surface-sunken);
  }
  .ns-calendar__day:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-calendar__day[data-today] {
    box-shadow: inset 0 0 0 1px var(--color-brand-500);
  }
  .ns-calendar__day[aria-selected="true"] {
    background: var(--color-brand-500);
    color: var(--color-on-brand);
  }
  .ns-calendar__day[data-outside] {
    color: var(--color-label);
  }
  .ns-calendar__day:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
  }
  .ns-calendar__day:disabled:hover {
    background: none;
  }
  .ns-calendar__foot {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border);
  }
  .ns-modal::backdrop, .ns-drawer::backdrop {
    background: var(--color-scrim);
    animation: ns-fade-in var(--duration-fast) var(--ease-out);
  }
  .ns-modal {
    margin: auto;
    inline-size: min(32rem, calc(100vw - var(--space-8)));
    max-block-size: min(42rem, calc(100dvh - var(--space-16)));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: var(--color-ink);
    box-shadow: var(--shadow-raised);
    animation: ns-fade-up var(--duration-base) var(--ease-out);
  }
  .ns-modal[open] {
    display: flex;
    flex-direction: column;
  }
  .ns-modal--sm {
    inline-size: min(24rem, calc(100vw - var(--space-8)));
  }
  .ns-modal--lg {
    inline-size: min(48rem, calc(100vw - var(--space-8)));
  }
  .ns-modal__header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--pad-card-lg) var(--pad-card-lg) var(--space-3);
  }
  .ns-modal__title {
    font-size: var(--size-h3);
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
  }
  .ns-modal__body {
    padding: 0 var(--pad-card-lg);
    overflow-y: auto;
    flex: 1;
  }
  .ns-modal__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    padding: var(--pad-card-lg);
    margin-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border);
  }
  .ns-modal__close {
    margin-inline-start: auto;
    flex: none;
  }
  .ns-drawer {
    padding: 0;
    border: 0;
    margin: 0;
    max-block-size: none;
    block-size: 100dvh;
    inline-size: min(20rem, 85vw);
    background: var(--color-surface-raised);
    color: var(--color-ink);
    border-inline-end: 1px solid var(--color-border);
  }
  .ns-drawer[open] {
    display: flex;
    flex-direction: column;
  }
  .ns-drawer--start {
    margin-inline-end: auto;
    animation: ns-slide-start var(--duration-base) var(--ease-out);
  }
  .ns-drawer--end {
    margin-inline-start: auto;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--color-border);
    animation: ns-slide-end var(--duration-base) var(--ease-out);
  }
  .ns-drawer__header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--pad-card);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-drawer__body {
    padding: var(--pad-card);
    overflow-y: auto;
    flex: 1;
  }
  .ns-popover {
    margin: 0;
    padding: var(--space-3);
    inline-size: max-content;
    max-inline-size: min(22rem, calc(100vw - var(--space-8)));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: var(--color-ink);
    box-shadow: var(--shadow-raised);
    z-index: var(--z-dropdown);
  }
  .ns-popover:popover-open {
    animation: ns-fade-up var(--duration-fast) var(--ease-out);
  }
  .ns-menu {
    padding: var(--space-1-5);
    min-inline-size: 12rem;
  }
  .ns-menu__item {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    inline-size: 100%;
    min-block-size: var(--target-comfy);
    padding: var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    text-align: start;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .ns-menu__item:hover, .ns-menu__item:focus-visible {
    background: var(--color-surface-sunken);
    outline: none;
  }
  .ns-menu__item:focus-visible {
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-menu__item[aria-current="true"] {
    color: var(--color-brand-600);
  }
  .ns-menu__item--danger {
    color: var(--color-error-ink);
  }
  .ns-menu__sep {
    block-size: 1px;
    background: var(--color-border);
    margin: var(--space-1-5) 0;
    border: 0;
  }
  .ns-menu__label {
    padding: var(--space-2) var(--space-3) var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-tooltip {
    position: absolute;
    z-index: var(--z-dropdown);
    inset-block-end: calc(100% + var(--space-1-5));
    inset-inline-start: 50%;
    translate: -50% 0;
    pointer-events: none;
    padding: var(--space-1-5) var(--space-2-5);
    border-radius: var(--radius-sm);
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    inline-size: max-content;
    max-inline-size: 16rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast);
  }
  [data-theme="dark"] .ns-tooltip {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
  }
  .ns-tooltip--below {
    inset-block-end: auto;
    inset-block-start: calc(100% + var(--space-1-5));
  }
  .ns-tooltip-host {
    position: relative;
    display: inline-flex;
  }
  .ns-tooltip-host:hover > .ns-tooltip, .ns-tooltip-host:focus-within > .ns-tooltip {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes ns-fade-in {
  from {
    opacity: 0;
  }
}
@keyframes ns-fade-up {
  from {
    opacity: 0;
    translate: 0 0.5rem;
  }
}
@keyframes ns-slide-start {
  from {
    translate: -100% 0;
  }
}
@keyframes ns-sheet-in {
  from {
    opacity: 0;
    translate: 0 -1rem;
  }
}
@keyframes ns-sheet-row {
  from {
    opacity: 0;
    translate: 0 0.5rem;
  }
}
@keyframes ns-slide-end {
  from {
    translate: 100% 0;
  }
  .ns-lessonmodal {
    inline-size: min(32rem, 100vw - var(--space-8));
    max-block-size: min(38rem, 100dvh - var(--space-16));
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: var(--color-ink);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
  }
  .ns-lessonmodal::backdrop {
    background: var(--color-scrim);
  }
  .ns-lessonmodal[popover]:not(:popover-open) {
    display: none;
  }
  .ns-lessonmodal__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--pad-card);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-lessonmodal__title {
    font-weight: var(--weight-semibold);
    font-size: var(--size-small);
  }
  .ns-lessonmodal__count {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-lessonmodal:has(> .ns-player__side-search) {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
  }
  .ns-lessonmodal__list {
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ns-lessonmodal__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--pad-card);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  @media (max-width: 39.999rem) {
    .ns-lessonmodal {
      inline-size: 100vw;
      max-inline-size: none;
      max-block-size: 82dvh;
      margin: auto auto 0;
      border-inline: 0;
      border-block-end: 0;
      border-start-start-radius: var(--radius-card);
      border-start-end-radius: var(--radius-card);
      border-end-start-radius: 0;
      border-end-end-radius: 0;
    }
    .ns-lessonmodal__head::before {
      content: "";
      position: absolute;
      inset-block-start: var(--space-2);
      inset-inline: 0;
      inline-size: var(--space-10);
      block-size: var(--space-1);
      margin-inline: auto;
      border-radius: var(--radius-pill);
      background: var(--color-border);
    }
    .ns-lessonmodal__head {
      position: relative;
      padding-block-start: var(--space-6);
    }
  }
}
@layer ns-components {
  .ns-tabs {
    display: flex;
    gap: var(--space-1);
    border-block-end: 1px solid var(--color-border);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ns-tabs::-webkit-scrollbar {
    display: none;
  }
  .ns-tab {
    flex: none;
    padding: var(--space-3) var(--space-4);
    min-block-size: var(--target-comfy);
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--color-muted);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-tab:hover {
    color: var(--color-ink);
  }
  .ns-tab[aria-selected="true"] {
    color: var(--color-brand-600);
    box-shadow: inset 0 -2px 0 var(--color-brand-500);
  }
  .ns-tab:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
    border-radius: var(--radius-sm);
  }
  [data-theme="dark"] .ns-tab[aria-selected="true"] {
    color: var(--color-brand-300);
  }
  .ns-tabpanel {
    padding-block-start: var(--space-5);
  }
  .ns-tabpanel:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: 4px;
  }
  .ns-accordion {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-accordion__item + .ns-accordion__item {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-accordion__summary {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--pad-card);
    cursor: pointer;
    min-block-size: var(--target-comfy);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    list-style: none;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .ns-accordion__summary::-webkit-details-marker {
    display: none;
  }
  .ns-accordion__summary:hover {
    background: var(--color-surface-sunken);
  }
  .ns-accordion__summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-accordion__index {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
  }
  .ns-accordion__summary::after {
    content: "\e136";
    font-family: var(--font-icon);
    margin-inline-start: auto;
    flex: none;
    color: var(--color-muted);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-accordion__item[open] > .ns-accordion__summary::after {
    rotate: 180deg;
  }
  .ns-accordion__content {
    padding: 0 var(--pad-card) var(--pad-card);
    color: var(--color-muted);
  }
  .ns-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-breadcrumb__item + .ns-breadcrumb__item::before {
    content: "/";
    color: var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-small);
  }
  .ns-breadcrumb__link {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    text-decoration: none;
  }
  .ns-breadcrumb__link:hover {
    color: var(--color-brand-600);
  }
  .ns-breadcrumb__link[aria-current="page"] {
    color: var(--color-ink);
    font-weight: var(--weight-label);
  }
  .ns-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--target-comfy);
    min-block-size: var(--target-comfy);
    padding-inline: var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    font-family: var(--font-mono);
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-pagination__link:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-pagination__link[aria-current="page"] {
    border-color: var(--color-border);
    color: var(--color-ink);
    font-weight: var(--weight-label);
  }
  .ns-pagination__ellipsis {
    padding-inline: var(--space-2);
    color: var(--color-muted);
    font-family: var(--font-mono);
  }
  .ns-sidebar {
    position: sticky;
    inset-block-start: var(--navbar-h);
    inline-size: var(--sidebar-w);
    flex: none;
    max-block-size: calc(100dvh - var(--navbar-h));
    overflow-y: auto;
    padding-block: var(--space-6);
    padding-inline-end: var(--space-4);
  }
  .ns-sidebar__group + .ns-sidebar__group {
    margin-block-start: var(--space-6);
  }
  details.ns-sidebar__group > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
    border-radius: var(--radius-sm);
  }
  details.ns-sidebar__group > summary::-webkit-details-marker {
    display: none;
  }
  details.ns-sidebar__group > summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-sidebar__twist {
    flex: none;
    margin-inline-start: auto;
    color: var(--color-label);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  details.ns-sidebar__group[open] > summary .ns-sidebar__twist {
    rotate: 90deg;
  }
  .ns-sidebar__label {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-sidebar__link {
    display: block;
    padding: var(--space-1-5) var(--space-3);
    border-inline-start: 2px solid var(--color-border);
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--size-small);
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-sidebar__link:hover {
    color: var(--color-ink);
    border-inline-start-color: var(--color-brand-300);
  }
  .ns-sidebar__link[aria-current="page"] {
    color: var(--color-brand-600);
    border-inline-start-color: var(--color-brand-500);
    font-weight: var(--weight-medium);
  }
  [data-theme="dark"] .ns-sidebar__link[aria-current="page"] {
    color: var(--color-brand-300);
  }
  @media (max-width: 63.999rem) {
    .ns-sidebar {
      position: static;
      inline-size: 100%;
      max-block-size: none;
    }
  }
  .ns-tree {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: var(--size-small);
  }
  .ns-tree ul {
    list-style: none;
    margin: 0;
    padding-inline-start: var(--space-4);
  }
  .ns-tree__node, .ns-tree__branch > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-tree__branch > summary {
    list-style: none;
  }
  .ns-tree__branch > summary::-webkit-details-marker {
    display: none;
  }
  .ns-tree__node:hover, .ns-tree__branch > summary:hover {
    background: var(--color-surface-sunken);
    color: var(--color-ink);
  }
  .ns-tree__node:focus-visible, .ns-tree__branch > summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-tree__node[aria-current] {
    color: var(--color-brand-600);
    font-weight: var(--weight-medium);
    background: var(--color-surface-sunken);
  }
  [data-theme="dark"] .ns-tree__node[aria-current] {
    color: var(--color-brand-300);
  }
  .ns-tree__twist {
    flex: none;
    color: var(--color-label);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-tree__branch[open] > summary .ns-tree__twist {
    rotate: 90deg;
  }
  .ns-tree__icon {
    flex: none;
    color: var(--color-label);
  }
  .ns-tree__label {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-tree__meta {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-tabs--vertical {
    flex-direction: column;
    gap: 0;
    border-block-end: 0;
    border-inline-end: 1px solid var(--color-border);
    overflow-x: visible;
    min-inline-size: 10rem;
  }
  .ns-tabs--vertical .ns-tab {
    text-align: start;
    box-shadow: none;
    border-inline-end: 2px solid transparent;
    margin-inline-end: -1px;
  }
  .ns-tabs--vertical .ns-tab[aria-selected="true"] {
    border-inline-end-color: var(--color-brand-500);
  }
  .ns-tabs-layout {
    display: flex;
    align-items: flex-start;
    gap: var(--space-6);
  }
  .ns-tabs-layout > [role="tabpanel"] {
    flex: 1;
    min-inline-size: 0;
  }
  .ns-tabs--pill {
    border-block-end: 0;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    display: inline-flex;
  }
  .ns-tabs--pill .ns-tab {
    box-shadow: none;
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-3);
    min-block-size: 0;
  }
  .ns-tabs--pill .ns-tab[aria-selected="true"] {
    background: var(--color-surface);
    color: var(--color-brand-600);
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  [data-theme="dark"] .ns-tabs--pill .ns-tab[aria-selected="true"] {
    color: var(--color-brand-300);
  }
  .ns-tab__icon {
    margin-inline-end: var(--space-2);
  }
  .ns-tab__count {
    margin-inline-start: var(--space-2);
    padding-inline: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-tabs--compact .ns-tab {
    padding: var(--space-2) var(--space-3);
    min-block-size: 0;
  }
  .ns-accordion--flush {
    border: 0;
    border-radius: 0;
  }
  .ns-accordion--flush .ns-accordion__item {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-accordion--flush .ns-accordion__item:last-child {
    border-block-end: 1px solid var(--color-border);
  }
  .ns-accordion--flush .ns-accordion__summary {
    padding-inline: 0;
  }
  .ns-accordion--flush .ns-accordion__content {
    padding-inline: 0;
  }
  .ns-accordion--separated {
    border: 0;
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-accordion--separated .ns-accordion__item {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-accordion__marker {
    flex: none;
    margin-inline-start: auto;
    color: var(--color-label);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-accordion__item[open] > .ns-accordion__summary .ns-accordion__marker {
    rotate: 180deg;
  }
  .ns-accordion--plus .ns-accordion__marker {
    transition: rotate var(--duration-base) var(--ease-out);
  }
  .ns-accordion--plus .ns-accordion__item[open] > .ns-accordion__summary .ns-accordion__marker {
    rotate: 135deg;
  }
  .ns-pagination__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    color: var(--color-ink);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-pagination__step:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-pagination__step[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
  }
  .ns-pagination__spacer {
    flex: 1;
  }
  .ns-pagination--compact {
    justify-content: space-between;
  }
  .ns-pagination__status {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-announce {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-6);
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    font-size: var(--size-small);
  }
  .ns-announce__kicker {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-300);
  }
  .ns-announce__text {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-announce__link {
    flex: none;
    white-space: nowrap;
    color: var(--color-on-brand);
    text-underline-offset: 3px;
  }
  .ns-announce__close {
    flex: none;
    margin-inline-start: var(--space-2);
    inline-size: var(--target-min);
    block-size: var(--target-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-on-dark);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .ns-announce__close:hover {
    background: var(--color-on-dark-wash);
  }
  @media (max-width: 47.999rem) {
    .ns-announce {
      padding-inline: var(--space-4);
    }
    .ns-announce__kicker {
      display: none;
    }
  }
  .ns-announce--quiet {
    background: var(--color-surface-sunken);
    color: var(--color-ink);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-announce--quiet .ns-announce__kicker {
    color: var(--color-brand-600);
  }
  .ns-announce--quiet .ns-announce__link {
    color: var(--color-brand-600);
  }
  .ns-announce--quiet .ns-announce__close {
    color: var(--color-muted);
  }
  .ns-announce--quiet .ns-announce__close:hover {
    background: var(--color-surface);
  }
  .ns-topnav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: var(--navbar-h, 3.5rem);
    padding-inline: var(--space-4);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-topnav__inner {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: 100%;
    inline-size: 100%;
    max-inline-size: var(--container-page);
    margin-inline: auto;
  }
  .ns-topnav--wide .ns-topnav__inner {
    max-inline-size: var(--container-wide);
  }
  .ns-topnav__brand {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-decoration: none;
  }
  .ns-topnav__brand img, .ns-topnav__brand svg {
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
  }
  .ns-topnav__brand:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
  }
  .ns-topnav__brand-name {
    white-space: nowrap;
  }
  .ns-topnav__brand-tag {
    padding-inline-start: var(--space-2);
    margin-inline-start: var(--space-1);
    border-inline-start: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    white-space: nowrap;
  }
  .ns-topnav__links {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-0-5);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ns-topnav__links > li > a, .ns-topnav__link, .ns-topnav__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    block-size: var(--navbar-h, 3.5rem);
    padding-inline: var(--space-2-5);
    border: 0;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: none;
    white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
    transition: color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-topnav__links > li > a:hover, .ns-topnav__link:hover, .ns-topnav__trigger:hover {
    color: var(--color-ink);
  }
  .ns-topnav__links > li > a:focus-visible, .ns-topnav__link:focus-visible, .ns-topnav__trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
    border-radius: var(--radius-sm);
    color: var(--color-ink);
  }
  .ns-topnav__links > li > a[aria-current="page"], .ns-topnav__link[aria-current="page"] {
    color: var(--color-brand-600);
    box-shadow: inset 0 -2px 0 var(--color-brand-500);
  }
  [data-theme="dark"] .ns-topnav__links > li > a[aria-current="page"], [data-theme="dark"] .ns-topnav__link[aria-current="page"] {
    color: var(--color-brand-300);
  }
  .ns-topnav__flag {
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  [data-theme="dark"] .ns-topnav__flag {
    background: var(--color-surface-sunken);
    color: var(--color-brand-300);
  }
  .ns-topnav__links > li > a i, .ns-topnav__link i, .ns-topnav__trigger i:not(.ns-navicon i) {
    font-size: var(--size-body);
    line-height: 1;
    opacity: 0.85;
  }
  .ns-navicon {
    position: relative;
    flex: none;
    inline-size: var(--target-comfy);
    block-size: var(--target-comfy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-navicon:hover {
    color: var(--color-ink);
    border-color: var(--color-border);
  }
  .ns-navicon:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-navicon i {
    font-size: var(--size-body-lg);
  }
  .ns-navicon__badge {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    min-inline-size: var(--space-4);
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background: var(--color-error);
    color: var(--color-on-brand);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    line-height: var(--space-4);
    text-align: center;
  }
  .ns-topnav--dark .ns-navicon, .ns-topnav--transparent .ns-navicon {
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-navicon:hover, .ns-topnav--transparent .ns-navicon:hover {
    color: var(--color-on-brand);
    border-color: var(--color-on-dark-border);
  }
  .ns-navstar {
    flex: none;
    display: inline-flex;
    align-items: center;
    min-block-size: var(--target-comfy);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--size-small);
    overflow: hidden;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-navstar:hover {
    border-color: var(--color-brand-300);
  }
  .ns-navstar:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-navstar__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding-inline: var(--space-2-5);
    align-self: stretch;
  }
  .ns-navstar__count {
    display: inline-flex;
    align-items: center;
    align-self: stretch;
    padding-inline: var(--space-2);
    border-inline-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
  }
  .ns-topnav--dark .ns-navstar, .ns-topnav--transparent .ns-navstar {
    border-color: var(--color-on-dark-border);
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-navstar:hover, .ns-topnav--transparent .ns-navstar:hover {
    border-color: var(--color-on-dark-border-hover);
  }
  .ns-topnav--dark .ns-navstar__count, .ns-topnav--transparent .ns-navstar__count {
    border-inline-start-color: var(--color-on-dark-border);
    background: var(--color-on-dark-wash);
    color: var(--color-on-dark);
  }
  @media (max-width: 63.999rem) {
    .ns-navstar__label span, .ns-navstar__count {
      display: none;
    }
    .ns-navstar__label {
      padding-inline: var(--space-2);
    }
  }
  .ns-topnav__divider {
    flex: none;
    inline-size: 1px;
    block-size: var(--space-6);
    background: var(--color-border);
  }
  .ns-topnav__spacer {
    flex: 1;
  }
  .ns-topnav__actions {
    flex: none;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .ns-topnav__actions .ns-btn {
    flex: none;
    white-space: nowrap;
  }
  .ns-topnav--center .ns-topnav__links {
    margin-inline: auto;
  }
  .ns-topnav__progress {
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    block-size: 2px;
    inline-size: calc(var(--p, 0) * 1%);
    background: var(--color-brand-500);
    transition: inline-size var(--duration-fast) linear;
  }
  .ns-topnav--compact {
    --navbar-h: 3rem;
  }
  .ns-topnav--sunken {
    background: var(--color-surface-sunken);
  }
  .ns-topnav--dark, .ns-topnav--transparent[data-scrolled="true"] {
    background: var(--color-brand-900);
    border-block-end-color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-block-end-color: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    }
  }
  .ns-topnav--transparent {
    background: transparent;
    border-block-end-color: transparent;
  }
  .ns-topnav--dark .ns-topnav__brand, .ns-topnav--transparent .ns-topnav__brand {
    color: var(--color-on-brand);
  }
  .ns-topnav--dark .ns-topnav__brand-tag, .ns-topnav--transparent .ns-topnav__brand-tag {
    border-inline-start-color: var(--color-on-dark-border);
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-topnav__links > li > a, .ns-topnav--dark .ns-topnav__trigger, .ns-topnav--transparent .ns-topnav__links > li > a, .ns-topnav--transparent .ns-topnav__trigger {
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-topnav__links > li > a:hover, .ns-topnav--dark .ns-topnav__links > li > a[aria-current="page"], .ns-topnav--transparent .ns-topnav__links > li > a:hover, .ns-topnav--transparent .ns-topnav__links > li > a[aria-current="page"] {
    color: var(--color-on-brand);
  }
  .ns-topnav--dark .ns-topnav__divider, .ns-topnav--transparent .ns-topnav__divider {
    background: var(--color-on-dark-border);
  }
  .ns-topnav--floating {
    inset-block-start: var(--space-4);
    margin-inline: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-raised);
  }
  .ns-navsearch {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 12rem;
    min-block-size: var(--target-comfy);
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface-sunken);
    color: var(--color-muted);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    text-align: start;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-navsearch:hover {
    border-color: var(--color-brand-300);
    color: var(--color-ink);
  }
  .ns-navsearch:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-navsearch__text {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-navsearch__kbd {
    flex: none;
    padding: var(--space-0-5) var(--space-1-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-navsearch--icon {
    min-inline-size: 0;
    border-color: transparent;
    background: transparent;
  }
  .ns-topnav--dark .ns-navsearch, .ns-topnav--transparent .ns-navsearch {
    border-color: var(--color-on-dark-border);
    background: var(--color-on-dark-wash);
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-navsearch:hover, .ns-topnav--transparent .ns-navsearch:hover {
    border-color: var(--color-on-dark-border-hover);
    color: var(--color-on-brand);
  }
  .ns-topnav--dark .ns-navsearch__kbd, .ns-topnav--transparent .ns-navsearch__kbd {
    border-color: var(--color-on-dark-border);
    background: transparent;
    color: var(--color-on-dark);
  }
  .ns-navitem {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ns-topnav__trigger::after {
    content: "\e136";
    font-family: var(--font-icon);
    font-size: var(--size-label);
    color: currentcolor;
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-navitem:has(> [aria-expanded="true"]) > .ns-topnav__trigger {
    color: var(--color-ink);
  }
  .ns-navitem:has(> [aria-expanded="true"]) > .ns-topnav__trigger::after {
    rotate: 180deg;
  }
  .ns-topnav--dark .ns-navitem:has(> [aria-expanded="true"]) > .ns-topnav__trigger, .ns-topnav--transparent .ns-navitem:has(> [aria-expanded="true"]) > .ns-topnav__trigger {
    color: var(--color-on-brand);
  }
  .ns-navmenu, .ns-megamenu {
    position: absolute;
    inset-block-start: 100%;
    z-index: var(--z-dropdown);
    background: var(--color-surface-raised);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-raised);
    transform-origin: top center;
    opacity: 0;
    visibility: hidden;
    translate: 0 calc(-1 * var(--space-2));
    scale: 0.985;
    transition: opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out), visibility var(--duration-base);
  }
  .ns-navitem:has(> [aria-expanded="true"]) > .ns-navmenu, .ns-navitem:has(> [aria-expanded="true"]) > .ns-megamenu {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
  }
  .ns-navmenu {
    inset-inline-start: var(--space-2);
    inline-size: max-content;
    min-inline-size: 14rem;
    max-inline-size: 21rem;
    margin-block-start: calc(-1 * var(--space-2));
    padding: var(--space-1-5);
    border-radius: var(--radius-card);
  }
  .ns-navmenu--end {
    inset-inline-start: auto;
    inset-inline-end: var(--space-2);
  }
  .ns-navmenu__label {
    display: block;
    padding: var(--space-1-5) var(--space-2) var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-navmenu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-sm);
    color: var(--color-ink);
    text-decoration: none;
    box-shadow: inset 2px 0 0 transparent;
    transition: background-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-navmenu__item:hover, .ns-navmenu__item:focus-visible {
    background: var(--color-surface-sunken);
    outline: none;
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-navmenu__item[aria-current="page"] {
    color: var(--color-brand-600);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-navmenu__icon {
    flex: none;
    inline-size: var(--space-8);
    block-size: var(--space-8);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-navmenu__icon {
    color: var(--color-brand-300);
  }
  .ns-navmenu__title {
    display: block;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
  }
  .ns-navmenu__desc {
    display: block;
    font-size: var(--size-label);
    color: var(--color-muted);
    line-height: var(--leading-heading);
  }
  .ns-navmenu__sep {
    block-size: 1px;
    margin: var(--space-1) 0;
    border: 0;
    background: var(--color-border);
  }
  .ns-navmenu__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: var(--space-1-5) calc(-1 * var(--space-1-5)) calc(-1 * var(--space-1-5));
    padding: var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    border-end-start-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
    font-size: var(--size-small);
  }
  .ns-navitem--mega {
    position: static;
  }
  .ns-megamenu {
    inset-inline: 0;
    border-inline: 0;
    border-end-start-radius: var(--radius-card);
    border-end-end-radius: var(--radius-card);
  }
  .ns-megamenu__inner {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: var(--space-5);
    max-inline-size: var(--container-page);
    margin-inline: auto;
    padding: var(--space-5) var(--space-4);
  }
  .ns-megamenu--wide .ns-megamenu__inner {
    max-inline-size: var(--container-wide);
  }
  .ns-megamenu__col {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
  }
  .ns-megamenu__label {
    margin-block-end: var(--space-1);
    padding-block-end: var(--space-2);
    border-block-end: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-megamenu .ns-navmenu__item {
    padding-inline: var(--space-2);
  }
  .ns-megamenu__feature {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-sunken);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-megamenu__feature-kicker {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-megamenu__feature-kicker {
    color: var(--color-brand-300);
  }
  .ns-megamenu__feature-title {
    font-size: var(--size-h4);
    font-weight: var(--weight-heading);
    line-height: var(--leading-heading);
  }
  .ns-megamenu__feature-text {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-megamenu__feature .ns-btn {
    align-self: start;
  }
  .ns-megamenu__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-5);
    padding: var(--space-2-5) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-size: var(--size-small);
  }
  .ns-megamenu__foot a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    color: var(--color-muted);
    text-decoration: none;
  }
  .ns-megamenu__foot a:hover {
    color: var(--color-brand-600);
  }
  .ns-usermenu {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ns-usermenu__trigger {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-comfy);
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-ink);
    cursor: pointer;
    font-family: var(--font-sans);
    font-size: var(--size-small);
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-usermenu__trigger:hover {
    border-color: var(--color-border);
  }
  .ns-usermenu__trigger[aria-expanded="true"] {
    border-color: var(--color-brand-500);
  }
  .ns-usermenu__trigger:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-usermenu__trigger::after {
    content: "\e136";
    font-family: var(--font-icon);
    font-size: var(--size-label);
    color: var(--color-muted);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-usermenu__trigger[aria-expanded="true"]::after {
    rotate: 180deg;
  }
  .ns-usermenu__name {
    max-inline-size: 9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-topnav--dark .ns-usermenu__trigger, .ns-topnav--transparent .ns-usermenu__trigger {
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-usermenu__trigger:hover, .ns-topnav--transparent .ns-usermenu__trigger:hover {
    border-color: var(--color-on-dark-border);
  }
  .ns-topnav--dark .ns-usermenu__trigger::after, .ns-topnav--transparent .ns-usermenu__trigger::after {
    color: var(--color-on-dark);
  }
  .ns-usermenu__panel {
    position: absolute;
    inset-block-start: 100%;
    inset-inline-end: 0;
    z-index: var(--z-dropdown);
    inline-size: 16rem;
    padding: var(--space-1-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: var(--color-ink);
    box-shadow: var(--shadow-raised);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    translate: 0 calc(-1 * var(--space-2));
    scale: 0.985;
    transition: opacity var(--duration-base) var(--ease-out), translate var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out), visibility var(--duration-base);
  }
  .ns-usermenu:has(> [aria-expanded="true"]) > .ns-usermenu__panel {
    opacity: 1;
    visibility: visible;
    translate: 0 0;
    scale: 1;
  }
  .ns-usermenu__head {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-2) var(--space-2) var(--space-1-5);
  }
  .ns-usermenu__panel .ns-menu__item {
    min-block-size: var(--space-8);
    padding: var(--space-1) var(--space-2);
    gap: var(--space-2-5);
    font-size: var(--size-small);
  }
  .ns-usermenu__panel .ns-menu__item i {
    font-size: var(--size-body);
    color: var(--color-muted);
  }
  .ns-usermenu__panel .ns-menu__sep {
    margin: var(--space-1) 0;
  }
  .ns-usermenu__identity {
    min-inline-size: 0;
  }
  .ns-usermenu__fullname {
    display: block;
    font-weight: var(--weight-medium);
    font-size: var(--size-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-usermenu__email {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-usermenu__progress {
    padding: 0 var(--space-2) var(--space-1-5);
  }
  .ns-usermenu__progress-label {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
    margin-block-end: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-usermenu__plan {
    margin-inline-start: auto;
    flex: none;
    padding: var(--space-0-5) var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-brand-50);
    color: var(--color-brand-600);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  [data-theme="dark"] .ns-usermenu__plan {
    background: var(--color-surface-sunken);
    color: var(--color-brand-300);
  }
  .ns-topnav__auth {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-themetoggle {
    --_opt: var(--space-14);
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-0-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
  }
  .ns-themetoggle::before {
    content: "";
    position: absolute;
    z-index: var(--z-base);
    inset-block: var(--space-0-5);
    inline-size: var(--_opt);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--shadow-card);
    translate: 0 0;
    transition: translate var(--duration-base) var(--ease-out);
  }
  .ns-themetoggle__opt {
    position: relative;
    z-index: var(--z-raised);
    inline-size: var(--_opt);
    min-block-size: calc(var(--target-comfy) - var(--space-2));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-themetoggle__opt:hover {
    color: var(--color-ink);
  }
  .ns-themetoggle__opt[aria-checked="true"] {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-themetoggle__opt[aria-checked="true"] {
    color: var(--color-brand-300);
  }
  .ns-themetoggle__opt:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-themetoggle:has(> .ns-themetoggle__opt:nth-of-type(1)[aria-checked="true"])::before {
    translate: 0 0;
  }
  .ns-themetoggle:has(> .ns-themetoggle__opt:nth-of-type(2)[aria-checked="true"])::before {
    translate: var(--_opt) 0;
  }
  .ns-themetoggle:has(> .ns-themetoggle__opt:nth-of-type(3)[aria-checked="true"])::before {
    translate: calc(2 * var(--_opt)) 0;
  }
  .ns-topnav--dark .ns-themetoggle, .ns-topnav--transparent .ns-themetoggle {
    border-color: var(--color-on-dark-border);
    background: var(--color-on-dark-wash);
  }
  .ns-topnav--dark .ns-themetoggle::before, .ns-topnav--transparent .ns-themetoggle::before {
    background: var(--color-on-dark-wash);
    border-color: var(--color-on-dark-border);
  }
  .ns-topnav--dark .ns-themetoggle__opt, .ns-topnav--transparent .ns-themetoggle__opt {
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-themetoggle__opt[aria-checked="true"], .ns-topnav--transparent .ns-themetoggle__opt[aria-checked="true"] {
    color: var(--color-on-brand);
  }
  .ns-themeswitch {
    position: relative;
    flex: none;
    inline-size: var(--target-comfy);
    block-size: var(--target-comfy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-themeswitch:hover {
    border-color: var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-themeswitch:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-themeswitch__mark {
    position: relative;
    display: block;
    inline-size: var(--space-2-5);
    block-size: var(--space-2-5);
    border-radius: var(--radius-pill);
    background: var(--color-brand-500);
    transition: background-color var(--duration-base) var(--ease-out), rotate var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out);
  }
  .ns-themeswitch__mark::before {
    content: "";
    position: absolute;
    inset: -60%;
    border-radius: var(--radius-pill);
    background: repeating-conic-gradient( from -3.5deg, var(--color-brand-500) 0deg 7deg, transparent 7deg 45deg);
    mask: radial-gradient(circle, transparent 0 56%, #000 57%);
    transition: opacity var(--duration-base) var(--ease-out), rotate var(--duration-base) var(--ease-out), scale var(--duration-base) var(--ease-out);
  }
  .ns-themeswitch__mark::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    translate: -100% -40%;
    transition: translate var(--duration-base) var(--ease-out), background-color var(--duration-base) var(--ease-out);
  }
  .ns-themeswitch:hover .ns-themeswitch__mark::after {
    background: var(--color-surface-sunken);
  }
  [data-theme="dark"] .ns-themeswitch__mark {
    background: var(--color-brand-300);
    rotate: -20deg;
    scale: 1.05;
  }
  [data-theme="dark"] .ns-themeswitch__mark::before {
    opacity: 0;
    scale: 0.5;
    rotate: 45deg;
  }
  [data-theme="dark"] .ns-themeswitch__mark::after {
    translate: 34% -32%;
  }
  .ns-topnav--dark .ns-themeswitch, .ns-topnav--transparent .ns-themeswitch, .ns-coursenav--dark .ns-themeswitch {
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-themeswitch:hover, .ns-topnav--transparent .ns-themeswitch:hover, .ns-coursenav--dark .ns-themeswitch:hover {
    background: var(--color-on-dark-wash);
    border-color: var(--color-on-dark-border);
  }
  .ns-topnav--dark .ns-themeswitch__mark::after, .ns-topnav--transparent .ns-themeswitch__mark::after, .ns-coursenav--dark .ns-themeswitch__mark::after {
    background: var(--color-brand-900);
  }
  .ns-topnav--dark .ns-themeswitch:hover .ns-themeswitch__mark::after, .ns-topnav--transparent .ns-themeswitch:hover .ns-themeswitch__mark::after, .ns-coursenav--dark .ns-themeswitch:hover .ns-themeswitch__mark::after {
    background: var(--color-brand-800);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-themeswitch__mark, .ns-themeswitch__mark::before, .ns-themeswitch__mark::after {
      transition: none;
    }
  }
  .ns-themetoggle-icon {
    position: relative;
    flex: none;
    inline-size: var(--target-comfy);
    block-size: var(--target-comfy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-themetoggle-icon:hover {
    color: var(--color-ink);
    border-color: var(--color-brand-300);
  }
  .ns-themetoggle-icon:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-themetoggle-icon .ns-themeswitch__mark {
    background: currentColor;
  }
  .ns-themetoggle-icon .ns-themeswitch__mark::after {
    background: var(--color-surface);
  }
  [data-theme="dark"] .ns-themetoggle-icon .ns-themeswitch__mark {
    background: var(--color-brand-300);
  }
  .ns-topnav--dark .ns-themetoggle-icon, .ns-topnav--transparent .ns-themetoggle-icon {
    border-color: var(--color-on-dark-border);
    color: var(--color-on-dark);
  }
  .ns-topnav--dark .ns-themetoggle-icon:hover, .ns-topnav--transparent .ns-themetoggle-icon:hover {
    border-color: var(--color-on-dark-border-hover);
    color: var(--color-on-brand);
  }
  .ns-coursenav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    block-size: var(--navbar-h);
    padding-inline: var(--space-4);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-coursenav__back {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: var(--target-comfy);
    padding-inline: var(--space-2);
    border-radius: var(--radius-btn);
    color: var(--color-muted);
    text-decoration: none;
    font-size: var(--size-small);
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-coursenav__back:hover {
    color: var(--color-ink);
    background: var(--color-surface-sunken);
  }
  .ns-coursenav__back:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-coursenav__id {
    min-inline-size: 0;
    flex: 0 1 auto;
    max-inline-size: 24rem;
    display: flex;
    align-items: center;
  }
  .ns-coursenav__title {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-coursenav__progress {
    flex: 1 1 auto;
    min-inline-size: var(--space-16);
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .ns-coursenav__bar {
    flex: 1;
    min-inline-size: 0;
    block-size: 4px;
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .ns-coursenav__bar > span {
    display: block;
    block-size: 100%;
    inline-size: calc(var(--p, 0) * 1%);
    background: var(--color-brand-500);
    transition: inline-size var(--duration-base) var(--ease-out);
  }
  .ns-coursenav__pct {
    flex: none;
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-coursenav__actions {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-coursenav--dark {
    background: var(--color-brand-900);
    border-block-end-color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-block-end-color: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    }
  }
  .ns-coursenav--dark .ns-coursenav__title {
    color: var(--color-on-brand);
  }
  .ns-coursenav--dark .ns-coursenav__back, .ns-coursenav--dark .ns-coursenav__pct {
    color: var(--color-on-dark);
  }
  .ns-coursenav--dark .ns-coursenav__back:hover {
    background: var(--color-on-dark-wash);
    color: var(--color-on-brand);
  }
  .ns-coursenav--dark .ns-coursenav__bar {
    background: var(--color-on-dark-border);
  }
  .ns-coursenav--dark .ns-navicon {
    color: var(--color-on-dark);
  }
  .ns-navstat {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding-inline: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    white-space: nowrap;
  }
  .ns-navstat strong {
    color: var(--color-ink);
    font-weight: var(--weight-label);
  }
  .ns-navstat i {
    color: var(--color-brand-600);
    font-size: var(--size-small);
  }
  [data-theme="dark"] .ns-navstat i {
    color: var(--color-brand-300);
  }
  .ns-burger {
    display: none;
    flex: none;
    inline-size: var(--target-comfy);
    block-size: var(--target-comfy);
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: transparent;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-burger:hover {
    border-color: var(--color-brand-300);
  }
  .ns-burger:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-burger__bar {
    position: absolute;
    inset-inline-start: 50%;
    inline-size: var(--space-5);
    block-size: 2px;
    margin-inline-start: calc(-1 * var(--space-2-5));
    background: var(--color-ink);
    border-radius: var(--radius-pill);
    transition: translate var(--duration-base) var(--ease-out), rotate var(--duration-base) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
  }
  .ns-burger__bar:nth-child(1) {
    inset-block-start: calc(50% - var(--space-2));
  }
  .ns-burger__bar:nth-child(2) {
    inset-block-start: calc(50% - 1px);
  }
  .ns-burger__bar:nth-child(3) {
    inset-block-start: calc(50% + var(--space-1-5));
  }
  .ns-burger[aria-expanded="true"] .ns-burger__bar:nth-child(1) {
    translate: 0 var(--space-2);
    rotate: 45deg;
  }
  .ns-burger[aria-expanded="true"] .ns-burger__bar:nth-child(2) {
    opacity: 0;
  }
  .ns-burger[aria-expanded="true"] .ns-burger__bar:nth-child(3) {
    translate: 0 calc(-1 * var(--space-2));
    rotate: -45deg;
  }
  .ns-topnav--dark .ns-burger, .ns-topnav--transparent .ns-burger {
    border-color: var(--color-on-dark-border);
  }
  .ns-topnav--dark .ns-burger__bar, .ns-topnav--transparent .ns-burger__bar {
    background: var(--color-on-dark);
  }
  .ns-navsheet {
    padding: 0;
    border: 0;
    margin: 0;
    inline-size: 100vw;
    max-inline-size: 100vw;
    block-size: 100dvh;
    max-block-size: 100dvh;
    background: var(--color-surface);
    color: var(--color-ink);
    animation: ns-fade-in var(--duration-fast) var(--ease-out);
  }
  .ns-navsheet[open] {
    display: flex;
    flex-direction: column;
  }
  .ns-navsheet::backdrop {
    background: var(--color-scrim);
  }
  .ns-navsheet__head {
    flex: none;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    block-size: var(--navbar-h, 3.5rem);
    padding-inline: var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-navsheet__close {
    margin-inline-start: auto;
  }
  .ns-navsheet__body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-4) var(--space-6) var(--space-8);
  }
  .ns-navsheet__label {
    display: block;
    margin-block: var(--space-5) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-navsheet__link {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-2);
    border-block-end: 1px solid var(--color-border);
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--size-h4);
    font-weight: var(--weight-medium);
    box-shadow: inset 2px 0 0 transparent;
    transition: box-shadow var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-navsheet__link:active {
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-navsheet__link[aria-current="page"] {
    color: var(--color-brand-600);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  [data-theme="dark"] .ns-navsheet__link[aria-current="page"] {
    color: var(--color-brand-300);
  }
  .ns-navsheet__index {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
  }
  .ns-navsheet__link i {
    margin-inline-start: auto;
    color: var(--color-muted);
    font-size: var(--size-body);
  }
  .ns-navsheet__group > summary {
    list-style: none;
    cursor: pointer;
  }
  .ns-navsheet__group > summary::-webkit-details-marker {
    display: none;
  }
  .ns-navsheet__group[open] > summary i {
    rotate: 180deg;
  }
  .ns-navsheet__group > summary i {
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-navsheet__sub {
    padding-inline-start: var(--space-6);
  }
  .ns-navsheet__sub .ns-navsheet__link {
    font-size: var(--size-body);
    font-weight: var(--weight-regular);
    color: var(--color-muted);
  }
  .ns-navsheet__foot {
    flex: none;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-6);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-navsheet__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  @media (max-width: 63.999rem) {
    .ns-topnav__links, .ns-topnav__divider, .ns-navsearch:not(.ns-navsearch--icon) {
      display: none;
    }
    .ns-topnav .ns-themetoggle, .ns-topnav__auth {
      display: none;
    }
    .ns-burger {
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .ns-topnav__brand-tag {
      display: none;
    }
    .ns-topnav {
      padding-inline: var(--space-4);
    }
    .ns-usermenu__name {
      display: none;
    }
  }
  @media (max-width: 47.999rem) {
    .ns-coursenav__back span, .ns-coursenav__bar {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-navmenu, .ns-megamenu, .ns-usermenu__panel, .ns-burger__bar, .ns-themetoggle::before, .ns-themeswitch__mark, .ns-themeswitch__mark::after, .ns-topnav__progress, .ns-coursenav__bar > span {
      transition-duration: 1ms;
    }
    .ns-navsheet[open], .ns-navsheet[open] .ns-navsheet__body > *, .ns-navsheet::backdrop {
      animation: none;
    }
  }
  .ns-status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .ns-status::before {
    content: "";
    inline-size: 0.5rem;
    block-size: 0.5rem;
    flex: none;
    border-radius: var(--radius-pill);
    background: currentColor;
  }
  .ns-status--success {
    color: var(--color-success-ink);
  }
  .ns-status--warning {
    color: var(--color-warning-ink);
  }
  .ns-status--error {
    color: var(--color-error-ink);
  }
  .ns-status--info {
    color: var(--color-info-ink);
  }
  .ns-status--idle::before {
    background: transparent;
    box-shadow: inset 0 0 0 1px currentColor;
  }
  .ns-alert {
    display: flex;
    gap: var(--space-3);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-muted);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: var(--color-ink);
  }
  .ns-alert__icon {
    flex: none;
    color: var(--color-muted);
    line-height: var(--leading-body);
  }
  .ns-alert__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-inline-size: 0;
  }
  .ns-alert__title {
    font-weight: var(--weight-semibold);
  }
  .ns-alert__text {
    color: var(--color-muted);
    font-size: var(--size-small);
  }
  .ns-alert__actions {
    display: flex;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
  }
  .ns-alert--success {
    border-inline-start-color: var(--color-success);
  }
  .ns-alert--success .ns-alert__icon {
    color: var(--color-success-ink);
  }
  .ns-alert--warning {
    border-inline-start-color: var(--color-warning);
  }
  .ns-alert--warning .ns-alert__icon {
    color: var(--color-warning-ink);
  }
  .ns-alert--error {
    border-inline-start-color: var(--color-error);
  }
  .ns-alert--error .ns-alert__icon {
    color: var(--color-error-ink);
  }
  .ns-alert--info {
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-alert--info .ns-alert__icon {
    color: var(--color-info-ink);
  }
  .ns-toast-region {
    position: fixed;
    z-index: var(--z-toast);
    inset-block-end: var(--space-6);
    inset-inline-end: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    inline-size: min(22rem, calc(100vw - var(--space-8)));
    pointer-events: none;
  }
  .ns-toast {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-brand-500);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
    animation: ns-fade-up var(--duration-base) var(--ease-out);
  }
  .ns-toast--success {
    border-inline-start-color: var(--color-success);
  }
  .ns-toast--error {
    border-inline-start-color: var(--color-error);
  }
  .ns-toast__text {
    font-size: var(--size-small);
    flex: 1;
    min-inline-size: 0;
  }
  .ns-toast__close {
    flex: none;
  }
  @media (max-width: 39.999rem) {
    .ns-toast-region {
      inset-inline: var(--space-4);
      inline-size: auto;
      inset-block-end: var(--space-4);
    }
  }
  .ns-skeleton {
    background: linear-gradient(90deg, var(--color-surface-sunken) 25%, var(--color-border) 37%, var(--color-surface-sunken) 63%);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(90deg, var(--color-surface-sunken) 25%, color-mix(in srgb, var(--color-border) 40%, var(--color-surface-sunken)) 37%, var(--color-surface-sunken) 63%);
    }
    background-size: 400% 100%;
    border-radius: var(--radius-sm);
    animation: ns-shimmer 1.4s linear infinite;
  }
  .ns-skeleton--text {
    block-size: 0.75rem;
    margin-block: var(--space-1-5);
  }
  .ns-skeleton--title {
    block-size: 1.25rem;
    inline-size: 60%;
  }
  .ns-skeleton--card {
    block-size: 10rem;
    border-radius: var(--radius-card);
  }
  .ns-skeleton--avatar {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--radius-pill);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-skeleton {
      background: var(--color-surface-sunken);
    }
  }
  .ns-spinner {
    display: inline-block;
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    animation: ns-spin 700ms linear infinite;
  }
  .ns-spinner--lg {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    border-width: 3px;
  }
  .ns-preloader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-4);
    min-block-size: 8rem;
  }
  .ns-preloader__mark {
    position: relative;
    display: grid;
    place-items: center;
    inline-size: 4.5rem;
    block-size: 4.5rem;
  }
  .ns-preloader__logo {
    inline-size: 2.5rem;
    block-size: 2.5rem;
  }
  .ns-preloader__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-preloader--pulse .ns-preloader__logo {
    animation: ns-preloader-pulse 1.6s var(--ease-out) infinite;
  }
  .ns-preloader--ring .ns-preloader__mark::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-border);
    border-block-start-color: var(--color-brand-500);
    animation: ns-spin 900ms linear infinite;
  }
  .ns-preloader--orbit .ns-preloader__mark::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-pill);
    background: radial-gradient(circle 3px at 50% 3px, var(--color-brand-500) 97%, transparent);
    animation: ns-spin 1.4s linear infinite;
  }
  .ns-preloader--flip .ns-preloader__logo {
    animation: ns-preloader-flip 1.8s var(--ease-out) infinite;
  }
  .ns-preloader__bar {
    inline-size: 6rem;
    block-size: 2px;
    background: var(--color-border);
    overflow: hidden;
  }
  .ns-preloader__bar::before {
    content: "";
    display: block;
    inline-size: 40%;
    block-size: 100%;
    background: var(--color-brand-500);
    animation: ns-preloader-bar 1.2s var(--ease-out) infinite;
  }
  .ns-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-16) var(--space-6);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-muted);
  }
  .ns-empty__icon {
    font-size: 2rem;
    color: var(--color-border);
    line-height: 1;
  }
  .ns-empty__title {
    font-size: var(--size-h4);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-empty__text {
    max-inline-size: 32rem;
    font-size: var(--size-small);
  }
  .ns-empty__action {
    margin-block-start: var(--space-2);
  }
  .ns-error-state {
    border-style: solid;
  }
  .ns-error-state .ns-empty__code {
    font-family: var(--font-mono);
    font-size: var(--size-display);
    font-weight: var(--weight-heading);
    color: var(--color-border);
    line-height: 1;
  }
}
@keyframes ns-shimmer {
  to {
    background-position: -200% 0;
  }
}
@keyframes ns-preloader-pulse {
  0%, 100% {
    opacity: 1;
    transform: none;
  }
  50% {
    opacity: 0.55;
    transform: scale(0.92);
  }
}
@keyframes ns-preloader-flip {
  0% {
    transform: rotateY(0);
  }
  55%, 100% {
    transform: rotateY(360deg);
  }
}
@keyframes ns-preloader-bar {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(260%);
  }
  .ns-banner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--gutter);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-size: var(--size-small);
    color: var(--color-ink);
  }
  .ns-banner__icon {
    flex: none;
    color: var(--color-label);
  }
  .ns-banner__text {
    min-inline-size: 0;
  }
  .ns-banner__action {
    flex: none;
    margin-inline-start: auto;
  }
  .ns-banner__dismiss {
    flex: none;
    display: inline-flex;
    border: 0;
    background: none;
    padding: var(--space-1);
    margin: 0;
    cursor: pointer;
    color: var(--color-label);
    border-radius: var(--radius-sm);
  }
  .ns-banner__dismiss:hover {
    color: var(--color-ink);
    background: var(--color-surface);
  }
  .ns-banner--info {
    box-shadow: inset 3px 0 0 var(--color-brand-500);
  }
  .ns-banner--success {
    box-shadow: inset 3px 0 0 var(--color-success);
  }
  .ns-banner--warning {
    box-shadow: inset 3px 0 0 var(--color-warning);
  }
  .ns-banner--error {
    box-shadow: inset 3px 0 0 var(--color-error);
  }
  .ns-banner--dark {
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    border-block-end-color: transparent;
  }
  .ns-banner--dark .ns-banner__icon, .ns-banner--dark .ns-banner__dismiss {
    color: var(--color-on-dark);
  }
}
@layer ns-components {
  .ns-progress {
    appearance: none;
    inline-size: 100%;
    block-size: 0.375rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    overflow: hidden;
  }
  .ns-progress::-webkit-progress-bar {
    background: var(--color-surface-sunken);
    border-radius: var(--radius-pill);
  }
  .ns-progress::-webkit-progress-value {
    background: var(--color-brand-500);
    border-radius: var(--radius-pill);
    transition: inline-size var(--duration-base) var(--ease-out);
  }
  .ns-progress::-moz-progress-bar {
    background: var(--color-brand-500);
    border-radius: var(--radius-pill);
  }
  .ns-progress--lg {
    block-size: 0.625rem;
  }
  .ns-progress--complete::-webkit-progress-value {
    background: var(--color-success);
  }
  .ns-progress--complete::-moz-progress-bar {
    background: var(--color-success);
  }
  .ns-progress-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .ns-progress-row__value {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-steps {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-steps__tick {
    block-size: 0.25rem;
    flex: 1;
    min-inline-size: 0.5rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
  }
  .ns-steps__tick[data-state="done"] {
    background: var(--color-brand-500);
  }
  .ns-steps__tick[data-state="current"] {
    background: var(--color-brand-500);
    box-shadow: 0 0 0 2px color-mix(in srgb, #0176d3 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
    }
  }
  .ns-stepper {
    --_node: 1.75rem;
    inline-size: 100%;
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-stepper__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 4rem;
  }
  .ns-stepper__node {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_node);
    block-size: var(--_node);
    flex: none;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    box-shadow: inset 0 0 0 1px var(--color-border);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-stepper__step[data-state="done"] .ns-stepper__node, .ns-stepper__step[data-state="current"] .ns-stepper__node {
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-stepper__label {
    font-size: var(--size-label);
    color: var(--color-muted);
    text-align: center;
  }
  .ns-stepper__step[data-state="current"] .ns-stepper__label {
    color: var(--color-ink);
    font-weight: var(--weight-label);
  }
  .ns-stepper__line {
    flex: 1;
    block-size: 2px;
    min-inline-size: var(--space-2);
    margin-block-start: calc((var(--_node) / 2) - 1px);
    background: var(--color-border);
  }
  .ns-stepper__line[data-state="done"] {
    background: var(--color-brand-500);
  }
  .ns-meter {
    inline-size: 100%;
    block-size: 0.5rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
  }
  .ns-meter::-webkit-meter-bar {
    background: var(--color-surface-sunken);
    border: 0;
    border-radius: var(--radius-pill);
  }
  .ns-meter::-webkit-meter-optimum-value {
    background: var(--color-success);
    border-radius: var(--radius-pill);
  }
  .ns-meter::-webkit-meter-suboptimum-value {
    background: var(--color-warning);
    border-radius: var(--radius-pill);
  }
  .ns-meter::-webkit-meter-even-less-good-value {
    background: var(--color-error);
    border-radius: var(--radius-pill);
  }
  .ns-meter:-moz-meter-optimum::-moz-meter-bar {
    background: var(--color-success);
  }
  .ns-meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: var(--color-warning);
  }
  .ns-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: var(--color-error);
  }
  .ns-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-timeline__item {
    position: relative;
    padding-inline-start: var(--space-6);
    padding-block-end: var(--space-5);
  }
  .ns-timeline__item::before {
    content: "";
    position: absolute;
    inset-inline-start: 3px;
    inset-block: var(--space-4) 0;
    inline-size: 1px;
    background: var(--color-border);
  }
  .ns-timeline__item:last-child {
    padding-block-end: 0;
  }
  .ns-timeline__item:last-child::before {
    display: none;
  }
  .ns-timeline__dot {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: var(--space-1-5);
    inline-size: 7px;
    block-size: 7px;
    border-radius: var(--radius-pill);
    background: var(--color-border);
  }
  .ns-timeline__item[data-state="current"] .ns-timeline__dot {
    background: var(--color-brand-500);
  }
  .ns-timeline__item[data-state="done"] .ns-timeline__dot {
    background: var(--color-success);
  }
  .ns-timeline__time {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-timeline__title {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  .ns-timeline__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    margin-block-start: var(--space-1);
  }
  .ns-leaderboard {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-leaderboard__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--size-small);
    color: inherit;
    text-decoration: none;
  }
  .ns-leaderboard__row:last-child {
    border-block-end: 1px solid var(--color-border);
  }
  a.ns-leaderboard__row:hover {
    background: var(--color-surface-sunken);
  }
  .ns-leaderboard__rank {
    flex: none;
    min-inline-size: 2.25rem;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-leaderboard__row[data-rank="1"] .ns-leaderboard__rank, .ns-leaderboard__row[data-rank="2"] .ns-leaderboard__rank, .ns-leaderboard__row[data-rank="3"] .ns-leaderboard__rank {
    color: var(--color-ink);
  }
  .ns-leaderboard__name {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-ink);
  }
  .ns-leaderboard__meta {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-leaderboard__score {
    flex: none;
    margin-inline-start: auto;
    text-align: end;
    font-family: var(--font-mono);
    font-size: var(--size-small);
    font-weight: var(--weight-label);
    color: var(--color-ink);
    font-variant-numeric: tabular-nums;
  }
  .ns-leaderboard__move {
    flex: none;
    min-inline-size: 3rem;
    text-align: end;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-leaderboard__move[data-dir="up"] {
    color: var(--color-success-ink);
  }
  .ns-leaderboard__move[data-dir="down"] {
    color: var(--color-error-ink);
  }
  .ns-leaderboard__row[aria-current="true"] {
    background: var(--color-surface-raised);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-leaderboard__gap {
    padding: var(--space-1) var(--space-3);
    border-block-start: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    text-align: center;
  }
  .ns-progress--indeterminate::-webkit-progress-value {
    animation: ns-progress-slide 1.2s var(--ease-out) infinite;
  }
  .ns-progress--indeterminate::-moz-progress-bar {
    animation: ns-progress-slide 1.2s var(--ease-out) infinite;
  }
  .ns-stepper--vertical {
    flex-direction: column;
    align-items: stretch;
    inline-size: auto;
  }
  .ns-stepper--vertical .ns-stepper__step {
    flex-direction: row;
    align-items: flex-start;
    gap: var(--space-3);
    min-inline-size: 0;
    text-align: start;
  }
  .ns-stepper--vertical .ns-stepper__label {
    text-align: start;
    padding-block: var(--space-1);
  }
  .ns-stepper--vertical .ns-stepper__line {
    inline-size: 2px;
    block-size: auto;
    min-block-size: var(--space-4);
    margin-block-start: 0;
    margin-inline-start: calc((var(--_node) / 2) - 1px);
    flex: none;
  }
  .ns-timeline__icon {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: var(--space-1);
    inline-size: 1.25rem;
    block-size: 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-label);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font-size: var(--size-label);
  }
  .ns-timeline--icons .ns-timeline__item {
    padding-inline-start: var(--space-8);
  }
  .ns-timeline--icons .ns-timeline__item::before {
    inset-inline-start: calc(0.625rem - 1px);
    inset-block-start: var(--space-6);
  }
  .ns-timeline__item[data-state="current"] .ns-timeline__icon {
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-timeline__item[data-state="done"] .ns-timeline__icon {
    background: var(--color-success);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-timeline__media {
    display: block;
    inline-size: 100%;
    margin-block-start: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-timeline--horizontal {
    display: flex;
    overflow-x: auto;
    gap: var(--space-6);
    padding-block-start: var(--space-4);
    scrollbar-width: thin;
  }
  .ns-timeline--horizontal .ns-timeline__item {
    flex: none;
    inline-size: 11rem;
    padding-inline-start: 0;
    padding-block-end: 0;
  }
  .ns-timeline--horizontal .ns-timeline__item::before {
    inset-inline: 0.5rem auto;
    inset-block-start: 3px;
    inset-block-end: auto;
    inline-size: calc(100% + var(--space-6));
    block-size: 1px;
  }
  .ns-timeline--horizontal .ns-timeline__dot {
    inset-block-start: 0;
  }
  .ns-timeline--horizontal .ns-timeline__time {
    margin-block-start: var(--space-3);
  }
}
@keyframes ns-progress-slide {
  from {
    margin-inline-start: -40%;
    inline-size: 40%;
  }
  to {
    margin-inline-start: 100%;
    inline-size: 40%;
  }
}
@layer ns-components {
  .ns-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-table-wrap:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-table-wrap--flush {
    border: 0;
    border-radius: 0;
  }
  .ns-table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--size-small);
  }
  .ns-table th {
    text-align: start;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
    white-space: nowrap;
  }
  .ns-table td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-table tbody tr:last-child td {
    border-block-end: 0;
  }
  .ns-table tbody tr:hover {
    background: var(--color-surface-sunken);
  }
  .ns-table caption {
    caption-side: top;
    text-align: start;
    padding: var(--space-3) var(--space-4);
    color: var(--color-muted);
    font-size: var(--size-small);
  }
  .ns-table__num {
    text-align: end;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .ns-table__center {
    text-align: center;
  }
  .ns-table th.ns-table__num {
    text-align: end;
  }
  .ns-table th.ns-table__center {
    text-align: center;
  }
  .ns-table th code {
    text-transform: none;
  }
  .ns-table__code {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-table__strong {
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  .ns-table__quiet {
    color: var(--color-muted);
  }
  .ns-table__trunc {
    max-inline-size: 18rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-table__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .ns-table__sub {
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-table__lede {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    min-inline-size: 0;
  }
  .ns-table--compact th, .ns-table--compact td {
    padding-block: var(--space-1-5);
  }
  .ns-table--roomy th, .ns-table--roomy td {
    padding-block: var(--space-4);
    padding-inline: var(--space-5);
  }
  .ns-table--bordered th, .ns-table--bordered td {
    border-inline-end: 1px solid var(--color-border);
  }
  .ns-table--bordered th:last-child, .ns-table--bordered td:last-child {
    border-inline-end: 0;
  }
  .ns-table--open tbody td {
    border-block-end: 0;
  }
  .ns-table--fixed {
    table-layout: fixed;
  }
  .ns-table--keyvalue td:first-child, .ns-table--keyvalue th:first-child {
    inline-size: 12rem;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-table--head-filled thead th {
    background: var(--color-surface-sunken);
  }
  .ns-table--head-strong thead th {
    border-block-end: 2px solid var(--color-ink);
  }
  .ns-table--head-plain thead th {
    font-family: var(--font-sans);
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-ink);
  }
  .ns-table--head-brand thead th {
    background: #0176d3;
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 8%, var(--color-surface));
    }
    color: var(--color-info-ink);
    border-block-end: 1px solid color-mix(in srgb, #0176d3 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border-block-end: 1px solid color-mix(in srgb, var(--color-brand-500) 30%, transparent);
    }
  }
  .ns-table__group {
    text-align: center;
    border-inline: 1px solid var(--color-border);
    color: var(--color-muted);
  }
  .ns-table--sticky thead th {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
  }
  .ns-table--stickycol th:first-child, .ns-table--stickycol td:first-child {
    position: sticky;
    inset-inline-start: 0;
    z-index: var(--z-raised);
    background: var(--color-surface);
    border-inline-end: 1px solid var(--color-border);
  }
  .ns-table--stickycol.ns-table--sticky thead th:first-child {
    z-index: var(--z-sticky);
  }
  .ns-table--stickycol tbody tr:hover > :first-child {
    background: var(--color-surface-sunken);
  }
  .ns-table__sort {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    color: inherit;
  }
  .ns-table__sort:hover {
    color: var(--color-brand-600);
  }
  .ns-table__sort::after {
    content: "\e136";
    font-family: var(--font-icon);
    opacity: 0.3;
  }
  [aria-sort="ascending"] .ns-table__sort::after {
    opacity: 1;
    rotate: 180deg;
  }
  [aria-sort="descending"] .ns-table__sort::after {
    opacity: 1;
  }
  .ns-table th[aria-sort]:not([aria-sort="none"]) {
    color: var(--color-ink);
  }
  .ns-table tbody tr[data-state] > :first-child {
    border-inline-start: 3px solid transparent;
  }
  .ns-table tbody tr[data-state="current"] > :first-child {
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-table tbody tr[data-state="current"] {
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
  }
  .ns-table tbody tr[data-state="selected"], .ns-table tbody tr[aria-selected="true"] {
    background: color-mix(in srgb, #0176d3 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 8%, transparent);
    }
  }
  .ns-table tbody tr[data-state="selected"] > :first-child, .ns-table tbody tr[aria-selected="true"] > :first-child {
    border-inline-start-color: var(--color-brand-600);
  }
  .ns-table tbody tr[data-state="success"] {
    background: color-mix(in srgb, #2e844a 7%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-success) 7%, transparent);
    }
  }
  .ns-table tbody tr[data-state="success"] > :first-child {
    border-inline-start-color: var(--color-success);
  }
  .ns-table tbody tr[data-state="warning"] {
    background: color-mix(in srgb, #fe9339 9%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-warning) 9%, transparent);
    }
  }
  .ns-table tbody tr[data-state="warning"] > :first-child {
    border-inline-start-color: var(--color-warning);
  }
  .ns-table tbody tr[data-state="danger"] {
    background: color-mix(in srgb, #ea001e 7%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-error) 7%, transparent);
    }
  }
  .ns-table tbody tr[data-state="danger"] > :first-child {
    border-inline-start-color: var(--color-error);
  }
  .ns-table tbody tr[data-state="muted"] {
    color: var(--color-muted);
  }
  .ns-table tbody tr[data-state="muted"] > :first-child {
    border-inline-start-color: var(--color-border);
  }
  .ns-table--zebra tbody tr:nth-child(even) {
    background: var(--color-surface-sunken);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-surface-sunken) 55%, transparent);
    }
  }
  .ns-table--zebra tbody tr:hover {
    background: var(--color-surface-sunken);
  }
  .ns-table--rowlink tbody tr {
    cursor: pointer;
  }
  .ns-table--rowlink tbody tr td:last-child {
    position: relative;
    padding-inline-end: var(--space-8);
  }
  .ns-table--rowlink tbody tr td:last-child::after {
    content: "\e13a";
    font-family: var(--font-icon);
    position: absolute;
    inset-inline-end: var(--space-4);
    inset-block-start: 50%;
    translate: 0 -50%;
    color: var(--color-muted);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-table--rowlink tbody tr:hover td:last-child::after, .ns-table--rowlink tbody tr:focus-within td:last-child::after {
    opacity: 1;
  }
  .ns-table__link {
    color: inherit;
    text-decoration: none;
  }
  .ns-table__link:hover {
    color: var(--color-brand-600);
  }
  .ns-table__link--stretch::before {
    content: "";
    position: absolute;
    inset: 0;
  }
  .ns-table--rowlink tbody td:first-child {
    position: relative;
  }
  .ns-table td[data-tone] {
    font-variant-numeric: tabular-nums;
  }
  .ns-table td[data-tone="success"] {
    background: color-mix(in srgb, #2e844a 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-success) 8%, transparent);
    }
    color: var(--color-success-ink);
  }
  .ns-table td[data-tone="warning"] {
    background: color-mix(in srgb, #fe9339 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-warning) 12%, transparent);
    }
    color: var(--color-warning-ink);
  }
  .ns-table td[data-tone="danger"] {
    background: color-mix(in srgb, #ea001e 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-error) 8%, transparent);
    }
    color: var(--color-error-ink);
  }
  .ns-table td[data-tone="info"] {
    background: color-mix(in srgb, #0176d3 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 8%, transparent);
    }
    color: var(--color-info-ink);
  }
  .ns-table td[data-tone="neutral"] {
    background: var(--color-surface-sunken);
    color: var(--color-muted);
  }
  .ns-table__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-table__delta::before {
    content: "\2013";
  }
  .ns-table__delta[data-dir="up"], .ns-table__delta[data-dir="down"] {
    color: var(--color-success-ink);
  }
  .ns-table__delta[data-dir="up"]::before, .ns-table__delta[data-dir="down"]::before {
    font-family: var(--font-icon);
    content: "\e136";
  }
  .ns-table__delta[data-dir="up"]::before {
    rotate: 180deg;
  }
  .ns-table__delta[data-dir="down"] {
    color: var(--color-error-ink);
  }
  .ns-table__delta[data-polarity="inverse"][data-dir="up"] {
    color: var(--color-error-ink);
  }
  .ns-table__delta[data-polarity="inverse"][data-dir="down"] {
    color: var(--color-success-ink);
  }
  .ns-table__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-table__bar::before {
    content: "";
    order: -1;
    flex: 1 1 auto;
    min-inline-size: 2.5rem;
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--ns-bar-color, var(--color-brand-500)) var(--ns-bar, 0%), var(--color-surface-sunken) var(--ns-bar, 0%));
  }
  .ns-table__bar[data-tone="success"] {
    --ns-bar-color: var(--color-success);
  }
  .ns-table__bar[data-tone="warning"] {
    --ns-bar-color: var(--color-warning);
  }
  .ns-table__bar[data-tone="danger"] {
    --ns-bar-color: var(--color-error);
  }
  .ns-table td[data-heat] {
    text-align: center;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
  }
  .ns-table td[data-heat="0"] {
    background: var(--color-surface-sunken);
    color: var(--color-muted);
  }
  .ns-table td[data-heat="1"] {
    background: var(--chart-seq-1);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-1) 18%, transparent);
    }
  }
  .ns-table td[data-heat="2"] {
    background: var(--chart-seq-2);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-2) 18%, transparent);
    }
  }
  .ns-table td[data-heat="3"] {
    background: var(--chart-seq-3);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-3) 24%, transparent);
    }
  }
  .ns-table td[data-heat="4"] {
    background: var(--chart-seq-4);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-4) 30%, transparent);
    }
  }
  [data-theme="dark"] .ns-table td[data-heat="1"] {
    background: var(--chart-seq-4);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-4) 26%, transparent);
    }
  }
  [data-theme="dark"] .ns-table td[data-heat="2"] {
    background: var(--chart-seq-3);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-3) 24%, transparent);
    }
  }
  [data-theme="dark"] .ns-table td[data-heat="3"] {
    background: var(--chart-seq-2);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-2) 24%, transparent);
    }
  }
  [data-theme="dark"] .ns-table td[data-heat="4"] {
    background: var(--chart-seq-1);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--chart-seq-1) 28%, transparent);
    }
  }
  .ns-table--matrix th, .ns-table--matrix td {
    padding: var(--space-2);
    text-align: center;
  }
  .ns-table--matrix th:first-child, .ns-table--matrix td:first-child {
    text-align: start;
    white-space: nowrap;
  }
  .ns-table__select {
    inline-size: 1px;
    white-space: nowrap;
    padding-inline-end: var(--space-2);
  }
  .ns-table tbody tr:has(.ns-table__select input:checked) {
    background: color-mix(in srgb, #0176d3 8%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 8%, transparent);
    }
  }
  .ns-table__actions {
    text-align: end;
    white-space: nowrap;
    inline-size: 1px;
  }
  .ns-table__actions > * {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-table tbody tr:hover .ns-table__actions > *, .ns-table tbody tr:focus-within .ns-table__actions > * {
    opacity: 1;
  }
  @media (hover: none) {
    .ns-table__actions > * {
      opacity: 1;
    }
  }
  .ns-table tfoot td, .ns-table tfoot th {
    border-block-start: 1px solid var(--color-ink);
    border-block-end: 0;
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    text-transform: none;
    letter-spacing: normal;
  }
  .ns-table--sticky tfoot td, .ns-table--sticky tfoot th {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-raised);
  }
  .ns-table__toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-table__toolbar-title {
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-table__toolbar-end {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-table__footer {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-table__count {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-table__empty {
    padding-block: var(--space-8);
    text-align: center;
    color: var(--color-muted);
  }
  .ns-table__empty-title {
    display: block;
    color: var(--color-ink);
    font-weight: var(--weight-medium);
    margin-block-end: var(--space-1);
  }
  @media (max-width: 47.999rem) {
    .ns-table--stacked thead {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    .ns-table--stacked, .ns-table--stacked tbody, .ns-table--stacked tr, .ns-table--stacked td {
      display: block;
      inline-size: 100%;
    }
    .ns-table--stacked tbody tr {
      padding: var(--space-2) 0;
      border-block-end: 1px solid var(--color-border);
    }
    .ns-table--stacked tbody tr:last-child {
      border-block-end: 0;
    }
    .ns-table--stacked td {
      display: flex;
      align-items: baseline;
      gap: var(--space-4);
      border-block-end: 0;
      padding-block: var(--space-1);
      text-align: start;
    }
    .ns-table--stacked td::before {
      content: attr(data-label);
      flex: none;
      inline-size: 8rem;
      font-family: var(--font-mono);
      font-size: var(--size-label);
      font-weight: var(--weight-label);
      letter-spacing: var(--tracking-label);
      text-transform: uppercase;
      color: var(--color-label);
    }
    .ns-table--stacked tbody tr[data-state] > :first-child {
      border-inline-start: 0;
    }
    .ns-table--stacked tbody tr[data-state] {
      border-inline-start: 3px solid transparent;
      padding-inline-start: var(--space-3);
    }
    .ns-table--stacked tbody tr[data-state="current"] {
      border-inline-start-color: var(--color-brand-500);
    }
    .ns-table--stacked tbody tr[data-state="success"] {
      border-inline-start-color: var(--color-success);
    }
    .ns-table--stacked tbody tr[data-state="warning"] {
      border-inline-start-color: var(--color-warning);
    }
    .ns-table--stacked tbody tr[data-state="danger"] {
      border-inline-start-color: var(--color-error);
    }
  }
  @media print {
    .ns-table-wrap {
      overflow: visible;
      border-color: currentColor;
    }
    .ns-table td[data-heat], .ns-table td[data-tone], .ns-table tbody tr[data-state], .ns-table--zebra tbody tr:nth-child(even) {
      background: none;
    }
    .ns-table__actions {
      display: none;
    }
    .ns-table thead {
      display: table-header-group;
    }
  }
  @media (forced-colors: active) {
    .ns-table tbody tr[data-state] > :first-child {
      border-inline-start-color: currentColor;
    }
    .ns-table td[data-heat] {
      border: 1px solid currentColor;
    }
  }
  .ns-chart {
    display: block;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
    background: var(--chart-surface);
    margin: 0;
    min-inline-size: 0;
    inline-size: 100%;
  }
  .ns-chart__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    margin-block-end: var(--space-4);
    flex-wrap: wrap;
  }
  .ns-chart__title {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    color: var(--chart-ink);
  }
  .ns-chart__sub {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-chart [data-c="1"] {
    --_c: var(--chart-cat-1);
  }
  .ns-chart [data-c="2"] {
    --_c: var(--chart-cat-2);
  }
  .ns-chart [data-c="3"] {
    --_c: var(--chart-cat-3);
  }
  .ns-chart [data-c="4"] {
    --_c: var(--chart-cat-4);
  }
  .ns-chart [data-c="5"] {
    --_c: var(--chart-cat-5);
  }
  .ns-chart [data-c="6"] {
    --_c: var(--chart-cat-6);
  }
  .ns-chart [data-c="7"] {
    --_c: var(--chart-cat-7);
  }
  .ns-chart [data-seq="1"] {
    --_c: var(--chart-seq-1);
  }
  .ns-chart [data-seq="2"] {
    --_c: var(--chart-seq-2);
  }
  .ns-chart [data-seq="3"] {
    --_c: var(--chart-seq-3);
  }
  .ns-chart [data-seq="4"] {
    --_c: var(--chart-seq-4);
  }
  .ns-chart [data-pole="up"] {
    --_c: var(--chart-div-cool-2);
  }
  .ns-chart [data-pole="down"] {
    --_c: var(--chart-div-warm-2);
  }
  .ns-chart__legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-block-end: var(--space-3);
    padding: 0;
  }
  .ns-chart__key {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--chart-muted);
  }
  .ns-chart__swatch {
    inline-size: 0.625rem;
    block-size: 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--_c, var(--chart-cat-1));
    flex: none;
  }
  .ns-chart__swatch--line {
    block-size: 2px;
    inline-size: 0.875rem;
    border-radius: 0;
  }
  .ns-chart__plot {
    --_h: 10rem;
    position: relative;
    display: flex;
    align-items: stretch;
    gap: var(--space-3);
    block-size: var(--_h);
    background-image: repeating-linear-gradient(to top, var(--chart-grid) 0 1px, transparent 1px calc(var(--_h) / 4));
  }
  .ns-chart--sm .ns-chart__plot {
    --_h: 6rem;
  }
  .ns-chart--lg .ns-chart__plot {
    --_h: 15rem;
  }
  .ns-chart--sm .ns-chart__head {
    margin-block-end: var(--space-2);
  }
  .ns-chart__col {
    flex: 1;
    min-inline-size: 0;
    block-size: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    position: relative;
  }
  .ns-chart__bar {
    inline-size: 100%;
    max-inline-size: 1.5rem;
    block-size: var(--v, 50%);
    background: var(--_c, var(--chart-cat-1));
    border-radius: var(--chart-radius-end) var(--chart-radius-end) 0 0;
    transform-origin: bottom;
    animation: ns-chart-grow 600ms var(--ease-out) both;
    transition: block-size var(--duration-base) var(--ease-out);
  }
  .ns-chart__col--group {
    gap: var(--chart-mark-gap);
  }
  .ns-chart__col--group .ns-chart__bar {
    max-inline-size: 0.75rem;
  }
  .ns-chart__stack {
    inline-size: 100%;
    max-inline-size: 1.5rem;
    block-size: 100%;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-start;
    gap: var(--chart-mark-gap);
  }
  .ns-chart__seg {
    block-size: var(--v, 25%);
    background: var(--_c);
    flex: none;
    transform-origin: bottom;
    animation: ns-chart-grow 600ms var(--ease-out) both;
  }
  .ns-chart__seg:last-child {
    border-radius: var(--chart-radius-end) var(--chart-radius-end) 0 0;
  }
  .ns-chart__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ns-chart__row {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
  }
  .ns-chart__row-label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--chart-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-chart__hbar {
    block-size: 0.75rem;
    inline-size: var(--v, 50%);
    background: var(--_c, var(--chart-cat-1));
    border-radius: 0 var(--chart-radius-end) var(--chart-radius-end) 0;
    transform-origin: left;
    animation: ns-chart-slide 600ms var(--ease-out) both;
  }
  .ns-chart__row-value {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--chart-ink);
  }
  .ns-chart__x {
    display: flex;
    gap: var(--space-3);
    border-block-start: 1px solid var(--chart-axis);
    margin-block-start: var(--space-1);
    padding-block-start: var(--space-1-5);
  }
  .ns-chart__x span {
    flex: 1;
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-chart__frame {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0 var(--space-3);
  }
  .ns-chart__y {
    display: flex;
    flex-direction: column-reverse;
    justify-content: space-between;
    text-align: end;
  }
  .ns-chart__y span {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    line-height: 1;
  }
  .ns-chart__frame .ns-chart__x {
    grid-column: 2;
  }
  .ns-chart__svg {
    display: block;
    inline-size: 100%;
    block-size: auto;
    overflow: visible;
  }
  .ns-chart__gridline {
    stroke: var(--chart-grid);
    stroke-width: 1;
  }
  .ns-chart__baseline {
    stroke: var(--chart-axis);
    stroke-width: 1;
  }
  .ns-chart__line {
    fill: none;
    stroke: var(--_c, var(--chart-cat-1));
    stroke-width: var(--chart-line-w);
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  .ns-chart__line--draw {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: ns-chart-draw 900ms var(--ease-out) forwards;
  }
  .ns-chart__area {
    fill: var(--_c, var(--chart-cat-1));
    opacity: 0.1;
    stroke: none;
  }
  .ns-chart__dot {
    fill: var(--_c, var(--chart-cat-1));
    stroke: var(--chart-surface);
    stroke-width: 2;
  }
  .ns-chart__ref {
    stroke: var(--chart-muted);
    stroke-width: 1;
    stroke-dasharray: 4 3;
  }
  .ns-chart__ref-label {
    font-family: var(--font-mono);
    font-size: 0.6rem;
    fill: var(--chart-muted);
  }
  .ns-chart__donut {
    display: flex;
    align-items: center;
    gap: var(--space-6);
    flex-wrap: wrap;
  }
  .ns-chart__ring {
    inline-size: 9rem;
    flex: none;
    transform: rotate(-90deg);
  }
  .ns-chart--sm .ns-chart__ring {
    inline-size: 6rem;
  }
  .ns-chart--lg .ns-chart__ring {
    inline-size: 12rem;
  }
  .ns-chart__arc {
    fill: none;
    stroke: var(--_c);
    stroke-width: var(--_w, 4);
    stroke-dasharray: calc(var(--seg) - 1.5) 100;
    stroke-dashoffset: calc(-1 * var(--off, 0));
    animation: ns-chart-arc 700ms var(--ease-out) both;
  }
  .ns-chart__arc--thick {
    --_w: 7;
  }
  .ns-chart__arc--thin {
    --_w: 2;
  }
  .ns-chart__track {
    fill: none;
    stroke: var(--chart-grid);
    stroke-width: var(--_w, 4);
  }
  .ns-chart__center {
    text-align: center;
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
  }
  .ns-chart__ring-wrap {
    position: relative;
    flex: none;
  }
  .ns-chart__center strong {
    font-size: var(--size-h3);
    font-weight: var(--weight-semibold);
    color: var(--chart-ink);
    line-height: var(--leading-tight);
  }
  .ns-chart__center span {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-chart__tip {
    position: absolute;
    inset-block-end: calc(var(--v, 50%) + var(--space-2));
    inset-inline-start: 50%;
    transform: translateX(-50%);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-raised);
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--chart-ink);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    z-index: var(--z-raised);
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-chart__col:hover .ns-chart__tip, .ns-chart__col:focus-visible .ns-chart__tip, .ns-chart__row:hover .ns-chart__tip, .ns-chart__row:focus-visible .ns-chart__tip {
    opacity: 1;
  }
  .ns-chart__row {
    position: relative;
  }
  .ns-chart__row .ns-chart__tip {
    inset-block-end: 100%;
    inset-inline-start: var(--v, 50%);
  }
  .ns-chart__col:hover .ns-chart__bar, .ns-chart__row:hover .ns-chart__hbar {
    filter: brightness(1.08);
  }
  .ns-chart__delta {
    font-family: var(--font-mono);
    font-size: var(--size-label);
  }
  .ns-chart__delta[data-dir="up"] {
    color: var(--color-success-ink);
  }
  .ns-chart__delta[data-dir="down"] {
    color: var(--color-error-ink);
  }
  .ns-chart__filters {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-end: var(--space-4);
  }
  .ns-chart__filters > .ns-chart__legend {
    margin-block-end: 0;
    margin-inline-start: auto;
  }
  .ns-chart__key--toggle {
    cursor: pointer;
    border: 0;
    background: none;
    padding: 0;
  }
  .ns-chart__key--toggle[aria-pressed="false"] {
    color: var(--color-label);
  }
  .ns-chart__key--toggle[aria-pressed="false"] .ns-chart__swatch {
    background: transparent;
    box-shadow: inset 0 0 0 1px var(--_c);
  }
  .ns-chart [data-series][hidden] {
    display: none;
  }
  .ns-chart__hover {
    position: absolute;
    inset: 0;
    cursor: crosshair;
  }
  .ns-chart__xhair {
    position: absolute;
    inset-block: 0;
    inline-size: 1px;
    background: var(--chart-axis);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-chart__hover .ns-chart__tip {
    inset-block-end: auto;
    inset-block-start: var(--space-2);
    transform: translateX(-50%);
  }
  .ns-chart__heat {
    display: grid;
    gap: var(--chart-mark-gap);
  }
  .ns-chart__heat-row {
    display: grid;
    grid-template-columns: 3rem repeat(var(--cols, 12), minmax(0, 1fr));
    gap: var(--chart-mark-gap);
    align-items: center;
  }
  .ns-chart__heat-label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-chart__cell {
    aspect-ratio: 1;
    border-radius: var(--radius-sm);
    background: var(--chart-grid);
    position: relative;
  }
  .ns-chart__cell[data-seq] {
    background: var(--_c);
  }
  .ns-chart__cell:hover, .ns-chart__cell:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: 1px;
  }
  .ns-chart__cell .ns-chart__tip {
    inset-block-end: 100%;
    margin-block-end: var(--space-1);
  }
  .ns-chart__cell:hover .ns-chart__tip, .ns-chart__cell:focus-visible .ns-chart__tip {
    opacity: 1;
  }
  .ns-chart__spark {
    display: block;
    inline-size: 100%;
    block-size: 2rem;
    overflow: visible;
  }
  .ns-chart__funnel {
    display: flex;
    flex-direction: column;
    gap: var(--chart-mark-gap);
  }
  .ns-chart__fstage {
    display: grid;
    grid-template-columns: 6rem 1fr auto;
    align-items: center;
    gap: var(--space-3);
    position: relative;
  }
  .ns-chart__ftrack {
    display: flex;
    justify-content: center;
  }
  .ns-chart__fbar {
    block-size: 1.25rem;
    inline-size: var(--v, 50%);
    border-radius: var(--radius-sm);
    background: var(--_c, var(--chart-seq-2));
    animation: ns-chart-grow-x 600ms var(--ease-out) both;
    transform-origin: center;
  }
  .ns-chart__fstage:hover .ns-chart__tip, .ns-chart__fstage:focus-visible .ns-chart__tip {
    opacity: 1;
  }
  .ns-chart__fstage .ns-chart__tip {
    inset-block-end: 100%;
    inset-inline-start: 50%;
  }
  @media (max-width: 40rem) {
    .ns-chart__plot, .ns-chart__x {
      gap: var(--space-1-5);
    }
    .ns-chart__row, .ns-chart__fstage {
      grid-template-columns: 4.5rem 1fr auto;
    }
    .ns-chart__x span:nth-child(2n) {
      visibility: hidden;
    }
    .ns-chart__donut {
      gap: var(--space-4);
    }
    .ns-chart--lg .ns-chart__plot {
      --_h: 10rem;
    }
  }
}
@keyframes ns-chart-grow {
  from {
    transform: scaleY(0);
  }
}
@keyframes ns-chart-grow-x {
  from {
    transform: scaleX(0);
  }
}
@keyframes ns-chart-slide {
  from {
    transform: scaleX(0);
  }
}
@keyframes ns-chart-draw {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes ns-chart-arc {
  from {
    stroke-dasharray: 0 100;
  }
}
@layer ns-components {
  .ns-card {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    overflow: hidden;
    box-shadow: inset 0 2px 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-card:has(.ns-card__link):hover, .ns-card--hover:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--pad-card);
    flex: 1;
  }
  .ns-card__kicker {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-card__title {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-card__text {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-card__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--pad-card);
    border-block-start: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-card__link {
    color: inherit;
    text-decoration: none;
  }
  .ns-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
  }
  .ns-card--sunken {
    background: var(--color-surface-sunken);
  }
  .ns-card--row {
    flex-direction: row;
    align-items: stretch;
  }
  .ns-card--row .ns-card__media {
    inline-size: 9rem;
    aspect-ratio: 4 / 3;
    flex: none;
  }
  .ns-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(14rem, 100%), 1fr);
    gap: var(--gap-card);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-2);
    scrollbar-width: thin;
    min-inline-size: 0;
  }
  .ns-strip > * {
    scroll-snap-align: start;
  }
  .ns-strip--wide {
    grid-auto-columns: minmax(min(20rem, 100%), 1fr);
  }
  .ns-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-0-5, 2px) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    text-decoration: none;
  }
  a.ns-tag, button.ns-tag {
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  a.ns-tag:hover, button.ns-tag:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-tag[aria-pressed="true"] {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
    background: var(--color-surface-raised);
  }
  .ns-tag--pill {
    border-radius: var(--radius-pill);
  }
  .ns-tag__count {
    color: var(--color-label);
  }
  .ns-tag__x {
    display: inline-flex;
    border: 0;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--color-label);
  }
  .ns-tag__x:hover {
    color: var(--color-error-ink);
  }
  .ns-badge {
    --_dot: var(--color-brand-500);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-0-5, 2px) var(--space-2);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .ns-badge--accent {
    --_dot: var(--color-accent-500);
  }
  .ns-badge--success {
    --_dot: var(--color-success);
  }
  .ns-badge--warning {
    --_dot: var(--color-warning);
  }
  .ns-badge--error {
    --_dot: var(--color-error);
  }
  .ns-badge__dot {
    inline-size: 6px;
    block-size: 6px;
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--_dot);
  }
  .ns-badge__icon {
    color: var(--_dot);
    font-size: 0.9rem;
  }
  .ns-chip {
    --_c: var(--color-brand-500);
    --_size: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    flex: none;
    border-radius: var(--radius-sm);
    font-size: calc(var(--_size) * 0.42);
    color: var(--_c);
    background: var(--_c);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--_c) 8%, transparent);
    }
    box-shadow: inset 0 0 0 1px var(--_c);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--_c) 30%, transparent);
    }
  }
  .ns-chip--accent {
    --_c: var(--color-accent-500);
  }
  .ns-chip--sm {
    --_size: 2rem;
  }
  .ns-chip--lg {
    --_size: 3rem;
  }
  .ns-avatar {
    --_size: 2.5rem;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--_size);
    block-size: var(--_size);
    flex: none;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    color: var(--color-muted);
    overflow: hidden;
    font-family: var(--font-mono);
    font-size: calc(var(--_size) * 0.34);
    font-weight: var(--weight-label);
    letter-spacing: 0;
    text-transform: uppercase;
  }
  .ns-avatar img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ns-avatar--sm {
    --_size: 1.75rem;
  }
  .ns-avatar--lg {
    --_size: 3.5rem;
  }
  .ns-avatar--xl {
    --_size: 5rem;
  }
  .ns-avatar-ring {
    --p: 0;
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: var(--radius-pill);
    background: conic-gradient(var(--color-brand-500) calc(var(--p) * 1%), var(--color-border) 0);
  }
  .ns-avatar-ring > .ns-avatar {
    border: 2px solid var(--color-surface);
  }
  .ns-avatar-stack {
    display: inline-flex;
  }
  .ns-avatar-stack .ns-avatar {
    border: 2px solid var(--color-surface);
  }
  .ns-avatar-stack .ns-avatar + .ns-avatar {
    margin-inline-start: calc(-1 * var(--space-2));
  }
  .ns-avatar-stack .ns-avatar--more {
    background: var(--color-surface-raised);
    color: var(--color-label);
    font-size: var(--size-label);
  }
  .ns-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .ns-list__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-block-end: 1px solid var(--color-border);
    box-shadow: inset 2px 0 0 transparent;
    transition: box-shadow var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
  }
  .ns-list__row:first-child {
    border-block-start: 1px solid var(--color-border);
  }
  a.ns-list__row {
    color: inherit;
    text-decoration: none;
  }
  a.ns-list__row:hover {
    box-shadow: inset 2px 0 0 var(--color-brand-500);
    background: var(--color-surface-raised);
  }
  .ns-list__index {
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    color: var(--color-label);
    flex: none;
  }
  .ns-list__title {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    min-inline-size: 0;
  }
  .ns-list__text {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-list__meta {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .ns-list__chev {
    color: var(--color-label);
    flex: none;
  }
  .ns-list--boxed {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-list--boxed .ns-list__row {
    padding-inline: var(--space-4);
  }
  .ns-list--boxed .ns-list__row:first-child {
    border-block-start: 0;
  }
  .ns-list--boxed .ns-list__row:last-child {
    border-block-end: 0;
  }
  .ns-logo {
    --ns-logo-size: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: calc(var(--ns-logo-size) * 0.66);
    color: var(--color-ink);
    white-space: nowrap;
    text-decoration: none;
  }
  .ns-logo__mark {
    inline-size: var(--ns-logo-size);
    block-size: var(--ns-logo-size);
    flex: none;
  }
  .ns-logo--sm {
    --ns-logo-size: 1.25rem;
  }
  .ns-logo--lg {
    --ns-logo-size: 2rem;
  }
  .ns-logo--light {
    color: var(--color-on-dark);
  }
  .ns-logo--compact .ns-logo__text {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ns-divider {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin-block: var(--stack-md);
  }
  .ns-divider--tight {
    margin-block: var(--stack-sm);
  }
  .ns-divider--labelled {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    border-block-start: 0;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-divider--labelled::before, .ns-divider--labelled::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--color-border);
  }
  .ns-kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 1.5rem;
    padding: 0 var(--space-1-5);
    border: 1px solid var(--color-border);
    border-block-end-width: 2px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-raised);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    line-height: 1.6;
    color: var(--color-ink);
    white-space: nowrap;
  }
  .ns-kbd-seq {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .ns-kbd-seq__sep {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-copy {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-0-5, 2px) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-copy:hover {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-copy:hover {
    color: var(--color-brand-300);
  }
  .ns-copy[data-copied] {
    border-color: var(--color-success);
    color: var(--color-success-ink);
  }
  .ns-copy__value {
    color: var(--color-ink);
  }
  .ns-deflist {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: 0;
    margin: 0;
  }
  .ns-deflist dt {
    padding-block: var(--space-2);
    padding-inline-end: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-deflist dd {
    margin: 0;
    padding-block: var(--space-2);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--size-small);
    color: var(--color-ink);
    min-inline-size: 0;
  }
  .ns-deflist > dt:first-of-type, .ns-deflist > dt:first-of-type + dd {
    border-block-start: 0;
  }
  .ns-deflist--stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-deflist--stack dt {
    padding-block-end: 0;
    border-block-start: 0;
    padding-block-start: var(--space-3);
  }
  .ns-deflist--stack dd {
    border-block-start: 0;
    padding-block-start: var(--space-1);
  }
  @media (max-width: 47.999rem) {
    .ns-deflist {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-deflist dt {
      padding-block-end: 0;
      border-block-start: 0;
      padding-block-start: var(--space-3);
    }
    .ns-deflist dd {
      border-block-start: 0;
      padding-block-start: var(--space-1);
    }
  }
  .ns-marquee {
    display: flex;
    overflow: hidden;
    --ns-marquee-speed: 40s;
    --ns-marquee-gap: var(--space-10);
  }
  .ns-marquee__track {
    display: flex;
    flex: none;
    align-items: center;
    gap: var(--ns-marquee-gap);
    padding-inline-end: var(--ns-marquee-gap);
    animation: marquee var(--ns-marquee-speed) linear infinite;
    min-inline-size: 100%;
  }
  .ns-marquee:hover .ns-marquee__track, .ns-marquee:focus-within .ns-marquee__track {
    animation-play-state: paused;
  }
  .ns-marquee--window {
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .ns-marquee--reverse .ns-marquee__track {
    animation-direction: reverse;
  }
  .ns-marquee--slow {
    --ns-marquee-speed: 70s;
  }
  .ns-marquee--fast {
    --ns-marquee-speed: 22s;
  }
  .ns-marquee--tight {
    --ns-marquee-gap: var(--space-6);
  }
  .ns-marquee__item {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
  }
  a.ns-marquee__item:hover {
    color: var(--color-ink);
  }
  .ns-marquee--display .ns-marquee__item {
    font-family: var(--font-heading);
    font-size: var(--size-h2);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-tight);
    text-transform: none;
    color: var(--color-ink);
  }
  .ns-marquee--display .ns-marquee__item--outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-brand-500);
  }
  .ns-marquee__logo {
    block-size: 1.5rem;
    inline-size: auto;
    opacity: 0.65;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  a.ns-marquee__item:hover .ns-marquee__logo {
    opacity: 1;
  }
  .ns-ccard__mediawrap {
    position: relative;
    overflow: hidden;
  }
  .ns-ccard__level {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    background: var(--color-surface);
  }
  .ns-ccard__badge {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: var(--space-0-5, 2px) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ns-ccard__badge--new {
    background: var(--color-success);
  }
  .ns-ccard__badge--updated {
    background: var(--color-warning);
    color: var(--color-brand-900);
  }
  .ns-ccard__dur {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, #001a3e 82%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-900) 82%, transparent);
    }
    color: var(--color-on-dark);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-ccard__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--color-on-dark);
    font-size: var(--size-h1);
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
    background: color-mix(in srgb, #001a3e 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-900) 25%, transparent);
    }
    pointer-events: none;
  }
  .ns-card:hover .ns-ccard__play, .ns-card:focus-within .ns-ccard__play {
    opacity: 1;
  }
  @media (hover: none) {
    .ns-ccard__play {
      opacity: 0.9;
      background: none;
    }
  }
  .ns-ccard__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-ccard__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .ns-ccard__meta i {
    font-size: var(--size-small);
    opacity: 0.8;
  }
  .ns-ccard__progress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--pad-card);
    border-block-start: 1px solid var(--color-border);
  }
  .ns-ccard__progress .ns-progress {
    flex: 1;
  }
  .ns-ccard__pct {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-ccard__peek {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration-base) var(--ease-out);
    border-block-start: 1px solid transparent;
  }
  .ns-ccard__peek > div {
    overflow: hidden;
    min-block-size: 0;
  }
  .ns-card:hover > .ns-ccard__peek, .ns-card:focus-within > .ns-ccard__peek {
    grid-template-rows: 1fr;
    border-block-start-color: var(--color-border);
  }
  .ns-ccard__peek .ns-lesson {
    padding-block: var(--space-1-5);
    min-block-size: 0;
    font-size: var(--size-fine);
  }
  .ns-ccard__peek-more {
    display: block;
    padding: var(--space-2) var(--pad-card) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
  }
  @media (hover: none) {
    .ns-ccard__peek {
      grid-template-rows: 1fr;
      border-block-start-color: var(--color-border);
    }
  }
  .ns-ccard--row {
    flex-direction: row;
    align-items: stretch;
  }
  .ns-ccard--row .ns-ccard__mediawrap {
    flex: none;
    inline-size: 12rem;
  }
  .ns-ccard--row .ns-ccard__mediawrap .ns-card__media {
    block-size: 100%;
    aspect-ratio: auto;
  }
  .ns-ccard--row .ns-ccard__peek {
    display: none;
  }
  .ns-ccard--compact .ns-card__body {
    padding: var(--space-3);
    gap: var(--space-1-5);
  }
  .ns-ccard--compact .ns-card__title {
    font-size: var(--size-small);
  }
  .ns-ccard--compact .ns-ccard__progress {
    padding: var(--space-2) var(--space-3);
  }
  .ns-ccard--featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }
  .ns-ccard--featured .ns-ccard__mediawrap {
    grid-row: 1 / -1;
  }
  .ns-ccard--featured .ns-card__media {
    block-size: 100%;
    aspect-ratio: auto;
    min-block-size: 14rem;
  }
  .ns-ccard--featured .ns-card__title {
    font-size: var(--size-h3);
  }
  .ns-ccard--featured .ns-card__body {
    padding: var(--pad-card-lg);
    gap: var(--space-3);
  }
  .ns-ccard--minimal {
    border-color: transparent;
    background: none;
  }
  .ns-ccard--minimal .ns-card__body {
    padding: var(--space-3) 0;
    border-block-end: 1px solid var(--color-border);
  }
  @media (max-width: 47.999rem) {
    .ns-ccard--featured {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-ccard--featured .ns-card__media {
      min-block-size: 0;
      aspect-ratio: 16 / 9;
    }
    .ns-ccard--row .ns-ccard__mediawrap {
      inline-size: 7.5rem;
    }
  }
  .ns-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-variant-numeric: tabular-nums;
  }
  .ns-rating__value {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    color: var(--color-ink);
  }
  .ns-rating__stars {
    position: relative;
    display: inline-flex;
    color: var(--color-border);
  }
  .ns-rating__stars > span {
    display: inline-flex;
  }
  .ns-rating__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--fx-rating, 100%);
    overflow: hidden;
    color: var(--color-warning);
  }
  .ns-rating__count {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-authors {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .ns-authors__stack {
    display: inline-flex;
  }
  .ns-authors__stack > * {
    margin-inline-start: calc(var(--space-2) * -1);
    border: 2px solid var(--color-surface);
    border-radius: var(--radius-pill);
  }
  .ns-authors__stack > *:first-child {
    margin-inline-start: 0;
  }
  .ns-authors__avatar {
    inline-size: var(--space-7);
    block-size: var(--space-7);
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-authors__more {
    display: inline-grid;
    place-items: center;
    inline-size: var(--space-7);
    block-size: var(--space-7);
    background: var(--color-surface-sunken);
    color: var(--color-label);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
  }
  .ns-authors__names {
    min-inline-size: 0;
    font-size: var(--size-fine);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-authors__names b {
    font-weight: var(--weight-body-strong);
    color: var(--color-ink);
  }
  .ns-authors--sm .ns-authors__avatar, .ns-authors--sm .ns-authors__more {
    inline-size: var(--space-6);
    block-size: var(--space-6);
  }
  .ns-price {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-variant-numeric: tabular-nums;
  }
  .ns-price__now {
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    font-weight: var(--weight-heading);
    color: var(--color-ink);
  }
  .ns-price__was {
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: line-through;
  }
  .ns-price__off {
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, #2e844a 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-success) 14%, transparent);
    }
    color: var(--color-success-ink);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ns-price--free .ns-price__now {
    color: var(--color-success-ink);
  }
  .ns-price--sm .ns-price__now {
    font-size: var(--size-body-lg);
  }
  .ns-ltype {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-ltype i {
    font-size: var(--size-small);
  }
  .ns-ltype--video {
    color: var(--color-brand-600);
  }
  .ns-ltype--article {
    color: var(--color-label);
  }
  .ns-ltype--quiz {
    color: var(--color-warning-ink);
  }
  .ns-ltype--lab {
    color: var(--color-success-ink);
  }
  .ns-ltype--live {
    color: var(--color-error-ink);
  }
  [data-theme="dark"] .ns-ltype--video {
    color: var(--color-brand-300);
  }
  .ns-ltype--icon {
    gap: 0;
  }
  .ns-ltype--icon > i {
    font-size: var(--size-body);
  }
  .ns-ltype--icon.ns-tooltip-host {
    min-inline-size: var(--space-5);
    justify-content: center;
  }
  .ns-ltype--icon.ns-tooltip-host:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
  }
  .ns-ltype--icon > span:not(.ns-tooltip) {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ns-laccess {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-laccess--free {
    color: var(--color-success-ink);
  }
  .ns-laccess--members {
    color: var(--color-label);
  }
  .ns-laccess--soon {
    color: var(--color-warning-ink);
  }
  .ns-laccess--pro {
    color: var(--color-featured-ink);
  }
  .ns-certbadge {
    --_pad: 0.11em;
    position: relative;
    display: inline-grid;
    place-items: center;
    inline-size: 8rem;
    aspect-ratio: 1 / 1.06;
    container-type: inline-size;
    text-align: center;
    color: var(--color-on-dark);
  }
  .ns-certbadge__plate {
    position: absolute;
    inset: 0 0 18% 0;
    background: linear-gradient(150deg, var(--color-brand-500), var(--color-brand-800) 62%);
    clip-path: polygon(50% 0%, 90% 12%, 100% 48%, 88% 84%, 50% 100%, 12% 84%, 0% 48%, 10% 12%);
  }
  .ns-certbadge__plate::after {
    content: "";
    position: absolute;
    inset: 6%;
    background: var(--color-brand-800);
    clip-path: polygon(50% 0%, 90% 12%, 100% 48%, 88% 84%, 50% 100%, 12% 84%, 0% 48%, 10% 12%);
  }
  [data-theme="dark"] .ns-certbadge__plate {
    background: linear-gradient(150deg, var(--color-brand-400), var(--color-brand-700) 62%);
  }
  [data-theme="dark"] .ns-certbadge__plate::after {
    background: var(--color-brand-900);
  }
  .ns-certbadge__ribbon {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 8%;
    block-size: 26%;
    background: linear-gradient(100deg, var(--color-brand-300), var(--color-accent-500));
    clip-path: polygon(0% 0%, 100% 0%, 100% 62%, 50% 100%, 0% 62%);
    border-end-start-radius: var(--radius-sm);
    border-end-end-radius: var(--radius-sm);
  }
  .ns-certbadge__rule {
    inline-size: 40%;
    block-size: 1px;
    background: color-mix(in srgb, #7cbeff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-300) 45%, transparent);
    }
  }
  .ns-certbadge__inner {
    font-size: 11cqi;
    position: relative;
    z-index: var(--z-raised);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25em;
    padding-block-end: 22%;
    inline-size: 74%;
  }
  .ns-certbadge__mark {
    display: grid;
    place-items: center;
    inline-size: 2.5em;
    block-size: 2.5em;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #7cbeff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-300) 45%, transparent);
    }
    font-size: 1.5em;
    color: var(--color-brand-300);
    line-height: 1;
  }
  .ns-certbadge__word {
    font-size: 0.62em;
    letter-spacing: var(--tracking-label);
    font-weight: var(--weight-label);
    text-transform: uppercase;
    line-height: var(--leading-tight);
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 65%, transparent);
    }
  }
  .ns-certbadge__name {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: 0.95em;
    line-height: var(--leading-tight);
    color: var(--color-on-dark);
    text-wrap: balance;
  }
  .ns-certbadge--associate .ns-certbadge__ribbon {
    background: linear-gradient(100deg, var(--color-brand-200), var(--color-brand-400));
  }
  .ns-certbadge--specialist .ns-certbadge__ribbon {
    background: linear-gradient(100deg, var(--color-brand-300), var(--color-accent-500));
  }
  .ns-certbadge--architect .ns-certbadge__ribbon {
    background: linear-gradient(100deg, var(--color-accent-400), var(--color-brand-500));
  }
  .ns-certbadge--locked {
    filter: grayscale(1);
    opacity: var(--opacity-disabled);
  }
  .ns-certbadges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: flex-start;
  }
  .ns-curriculum {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-curriculum__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-curriculum__totals {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-curriculum__bar .ns-btn {
    margin-inline-start: auto;
  }
  .ns-curriculum__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-sunken);
    border-block-start: 1px solid var(--color-border);
    cursor: pointer;
    list-style: none;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .ns-curriculum__head::-webkit-details-marker {
    display: none;
  }
  .ns-curriculum__head:hover {
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
  }
  .ns-curriculum__head:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-curriculum__section:first-child .ns-curriculum__head {
    border-block-start: 0;
  }
  .ns-curriculum__index {
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-curriculum__title {
    font-weight: var(--weight-semibold);
    font-size: var(--size-small);
    color: var(--color-ink);
  }
  .ns-curriculum__meta {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-curriculum__toggle {
    transition: rotate var(--duration-fast) var(--ease-out);
    color: var(--color-muted);
  }
  .ns-curriculum__section[open] .ns-curriculum__toggle {
    rotate: 180deg;
  }
  .ns-curriculum__done {
    color: var(--color-success-ink);
  }
  .ns-curriculum--timeline .ns-curriculum__section {
    position: relative;
  }
  .ns-curriculum--timeline .ns-curriculum__section::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: calc(var(--space-4) + var(--space-2));
    inline-size: 1px;
    background: var(--color-border);
  }
  .ns-curriculum--timeline .ns-curriculum__section:last-child::before {
    inset-block-end: 50%;
  }
  .ns-curriculum--timeline .ns-curriculum__index {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    place-items: center;
    inline-size: var(--space-5);
    block-size: var(--space-5);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: var(--size-label);
  }
  .ns-curriculum--timeline .ns-curriculum__section[data-state="done"] .ns-curriculum__index {
    background: var(--color-success);
    border-color: var(--color-success);
    color: var(--color-on-brand);
  }
  .ns-curriculum--timeline .ns-curriculum__section[data-state="current"] .ns-curriculum__index {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
    color: var(--color-on-brand);
  }
  .ns-curriculum--timeline .ns-lesson {
    padding-inline-start: var(--space-10);
  }
  .ns-curriculum--compact .ns-curriculum__head {
    padding-block: var(--space-2);
  }
  .ns-curriculum--compact .ns-lesson {
    padding-block: var(--space-1-5);
    min-block-size: 0;
    font-size: var(--size-fine);
  }
  .ns-curriculum--flat .ns-lesson + .ns-lesson {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-lesson[data-access="members"] {
    color: var(--color-muted);
  }
  .ns-lesson[data-access="members"] .ns-lesson__index, .ns-lesson[data-access="members"] .ns-lesson__title {
    color: var(--color-muted);
  }
  .ns-lesson[data-access="members"]:hover {
    background: var(--color-surface-sunken);
    border-inline-start-color: var(--color-border);
  }
  .ns-lesson[data-access="free"] .ns-lesson__title {
    color: var(--color-ink);
  }
  .ns-curriculum--modules .ns-curriculum__head {
    align-items: flex-start;
    padding: var(--pad-card);
    gap: var(--pad-card);
  }
  .ns-curriculum__cover {
    inline-size: 5.5rem;
    aspect-ratio: 16 / 10;
    flex: none;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
  }
  .ns-curriculum__headbody {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    flex: 1;
  }
  .ns-curriculum__desc {
    font-family: var(--font-sans);
    font-size: var(--size-small);
    font-weight: var(--weight-body);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-muted);
    line-height: var(--leading-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ns-curriculum--modules .ns-curriculum__meta {
    margin-inline-start: 0;
  }
  @media (max-width: 39.999rem) {
    .ns-curriculum__cover {
      display: none;
    }
  }
  .ns-lesson-nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-lesson-nav .ns-progress-row {
    flex: 1;
    justify-content: center;
  }
  .ns-lesson-nav__up {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    text-decoration: none;
  }
  .ns-lesson-nav__up:hover {
    color: var(--color-brand-600);
  }
  .ns-lesson-nav__btn {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--space-2);
    max-inline-size: 20rem;
    min-inline-size: 0;
    padding: var(--space-1) 0;
    text-decoration: none;
    color: var(--color-ink);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-lesson-nav__btn:hover {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-lesson-nav__btn:hover {
    color: var(--color-brand-300);
  }
  .ns-lesson-nav__btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
  }
  .ns-lesson-nav__btn--next {
    grid-template-columns: minmax(0, 1fr) auto;
    text-align: end;
  }
  .ns-lesson-nav__arrow {
    grid-row: 1 / 3;
    color: var(--color-label);
    font-size: var(--size-body);
    transition: translate var(--duration-fast) var(--ease-out);
  }
  .ns-lesson-nav__btn:hover .ns-lesson-nav__arrow {
    color: currentColor;
    translate: -2px 0;
  }
  .ns-lesson-nav__btn--next:hover .ns-lesson-nav__arrow {
    translate: 2px 0;
  }
  .ns-lesson-nav__btn--next .ns-lesson-nav__arrow {
    grid-column: 2;
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-lesson-nav__arrow {
      transition: none;
    }
  }
  .ns-lesson-nav__dir {
    grid-row: 1;
    grid-column: 2;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-lesson-nav__name {
    grid-row: 2;
    grid-column: 2;
    min-inline-size: 0;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-lesson-nav__btn--next .ns-lesson-nav__dir, .ns-lesson-nav__btn--next .ns-lesson-nav__name {
    grid-column: 1;
  }
  .ns-lesson-nav__btn[data-state="locked"] {
    color: var(--color-muted);
  }
  .ns-lesson-nav__btn[data-state="locked"] .ns-lesson-nav__arrow {
    color: var(--color-warning-ink);
  }
  .ns-lesson-nav--split .ns-lesson-nav__btn--next {
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-btn);
    background: var(--color-brand-500);
    color: var(--color-on-brand);
  }
  .ns-lesson-nav--split .ns-lesson-nav__btn--next:hover {
    color: var(--color-on-brand);
    opacity: var(--opacity-loading);
  }
  .ns-lesson-nav--split .ns-lesson-nav__btn--next .ns-lesson-nav__dir, .ns-lesson-nav--split .ns-lesson-nav__btn--next .ns-lesson-nav__arrow {
    color: var(--color-on-brand);
  }
  .ns-lesson-nav--minimal .ns-lesson-nav__btn {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .ns-lesson-nav--minimal .ns-lesson-nav__dir {
    display: none;
  }
  .ns-lesson-nav--minimal .ns-lesson-nav__name {
    grid-row: 1;
  }
  .ns-lesson-nav--minimal .ns-lesson-nav__arrow {
    grid-row: 1;
  }
  .ns-lesson-nav--minimal {
    padding-block: var(--space-2);
  }
  .ns-lesson-nav--cards .ns-lesson-nav__btn {
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: var(--space-2) var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-lesson-nav--cards .ns-lesson-nav__btn:hover {
    border-color: var(--color-brand-500);
  }
  .ns-lesson-nav--cards .ns-lesson-nav__btn--next {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }
  .ns-lesson-nav--cards .ns-lesson-nav__dir {
    grid-column: 3;
  }
  .ns-lesson-nav--cards .ns-lesson-nav__name {
    grid-column: 3;
  }
  .ns-lesson-nav--cards .ns-lesson-nav__btn--next .ns-lesson-nav__dir, .ns-lesson-nav--cards .ns-lesson-nav__btn--next .ns-lesson-nav__name {
    grid-column: 1;
  }
  .ns-lesson-nav__thumb {
    grid-row: 1 / 3;
    grid-column: 2;
    inline-size: 3.5rem;
    aspect-ratio: 16 / 9;
    flex: none;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    display: grid;
    place-items: center;
    color: var(--color-label);
  }
  .ns-lesson-nav--cards .ns-lesson-nav__btn--next .ns-lesson-nav__thumb {
    grid-column: 2;
  }
  .ns-lesson-nav:not(.ns-lesson-nav--cards):not(.ns-lesson-nav--thumbs) .ns-lesson-nav__thumb {
    display: none;
  }
  .ns-lesson-nav--thumbs {
    justify-content: space-between;
    gap: var(--space-4);
    padding-block: var(--space-2);
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn {
    grid-template-columns: auto auto auto minmax(0, 1fr);
    align-items: center;
    max-inline-size: 18rem;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn--next {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__dir {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn {
    position: relative;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn > .ns-tooltip {
    inset-inline-start: var(--space-6);
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn--next > .ns-tooltip {
    inset-inline-start: auto;
    inset-inline-end: var(--space-6);
    translate: 0 0;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__arrow {
    grid-row: 1;
    grid-column: 1;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn--next .ns-lesson-nav__arrow {
    grid-column: 4;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__thumb {
    grid-row: 1;
    grid-column: 2;
    inline-size: 2.75rem;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn--next .ns-lesson-nav__thumb {
    grid-column: 3;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__index {
    grid-row: 1;
    grid-column: 3;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn--next .ns-lesson-nav__index {
    grid-column: 2;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__name {
    grid-row: 1;
    grid-column: 4;
  }
  .ns-lesson-nav--thumbs .ns-lesson-nav__btn--next .ns-lesson-nav__name {
    grid-column: 1;
  }
  .ns-lesson-nav__index {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-lesson-nav:not(.ns-lesson-nav--thumbs) .ns-lesson-nav__index {
    display: none;
  }
  .ns-lesson-nav--sticky {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
  }
  @media (max-width: 47.999rem) {
    .ns-lesson-nav .ns-progress-row {
      display: none;
    }
    .ns-lesson-nav__btn {
      flex: 1;
      max-inline-size: none;
    }
    .ns-lesson-nav__thumb {
      display: none;
    }
  }
  .ns-panelbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-raised);
  }
  .ns-panelbar--fixed {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
  }
  .ns-panelbar__now {
    min-inline-size: 0;
    flex: 1;
  }
  .ns-panelbar__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-panelbar__title {
    display: block;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-panelbar__line {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 2px;
    background: var(--color-brand-500);
    inline-size: var(--fx-progress, 0%);
    transition: inline-size var(--duration-base) var(--ease-out);
  }
  .ns-panelbar {
    position: relative;
  }
  @media (min-width: 64rem) {
    .ns-panelbar--fixed {
      display: none;
    }
  }
  .ns-course-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 20rem;
    gap: var(--space-10);
    align-items: start;
  }
  .ns-course-detail__rail {
    position: sticky;
    inset-block-start: calc(var(--navbar-h) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    max-block-size: calc(100dvh - var(--navbar-h) - var(--space-8));
    overflow-y: auto;
  }
  @media (max-width: 63.999rem) {
    .ns-course-detail {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }
    .ns-course-detail__rail {
      position: static;
      max-block-size: none;
      overflow: visible;
    }
  }
  .ns-course-detail--wide {
    grid-template-columns: 20rem minmax(0, 1fr);
  }
  .ns-course-detail--wide .ns-course-detail__rail {
    order: -1;
  }
  .ns-course-detail--stacked {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-course-detail--stacked .ns-course-detail__rail {
    position: static;
    max-block-size: none;
    overflow: visible;
    max-inline-size: var(--container-narrow);
  }
  .ns-course-detail--syllabus .ns-course-detail__main {
    display: flex;
    flex-direction: column;
  }
  .ns-course-detail--syllabus .ns-course-detail__curriculum {
    order: -1;
  }
  .ns-course-detail--compact {
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: var(--container-prose);
    margin-inline: auto;
  }
  .ns-course-detail--compact .ns-course-detail__rail {
    position: static;
    max-block-size: none;
    overflow: visible;
  }
  @media (max-width: 63.999rem) {
    .ns-course-detail--wide {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-course-detail--wide .ns-course-detail__rail {
      order: 0;
    }
  }
  .ns-course-listing {
    display: grid;
    grid-template-columns: 16rem minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
  .ns-course-listing__rail {
    position: sticky;
    inset-block-start: calc(var(--navbar-h) + var(--space-4));
  }
  @media (max-width: 63.999rem) {
    .ns-course-listing {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-course-listing__rail {
      position: static;
    }
  }
  .ns-course-filters {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-block-end: var(--space-5);
  }
  .ns-course-filters .ns-select {
    inline-size: auto;
    margin-inline-start: auto;
  }
  .ns-course-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
    gap: var(--gap-grid);
  }
  .ns-course-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
  }
  .ns-course-strip {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(min(14rem, 100%), 1fr);
    gap: var(--gap-card);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-block-end: var(--space-2);
    scrollbar-width: thin;
    min-inline-size: 0;
  }
  .ns-course-strip > * {
    scroll-snap-align: start;
  }
  .ns-certificate {
    position: relative;
    overflow: hidden;
    inline-size: 100%;
    flex: none;
    aspect-ratio: 297 / 210;
    display: flex;
    flex-direction: column;
    padding: clamp(var(--space-5), 4cqi, var(--space-10));
    container-type: inline-size;
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    border-radius: var(--radius-card);
  }
  .ns-certificate::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--color-on-dark-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-on-dark-border) 1px, transparent 1px);
    background-size: var(--space-8) var(--space-8);
    mask-image: radial-gradient(ellipse 80% 80% at 50% 0%, var(--color-ink) 0%, transparent 70%);
  }
  .ns-certificate::after {
    content: "";
    position: absolute;
    inset: var(--space-3);
    pointer-events: none;
    border: 1px solid var(--color-on-dark-border);
    border-radius: var(--radius-sm);
  }
  .ns-certificate__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    block-size: 100%;
    gap: var(--space-4);
  }
  .ns-certificate__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }
  .ns-certificate__mark {
    inline-size: 1.75rem;
    block-size: 1.75rem;
    flex: none;
  }
  .ns-certificate__issuer {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-on-dark-border-hover);
  }
  .ns-certificate__body {
    flex: 1;
    display: flex;
    align-items: center;
    gap: clamp(var(--space-4), 4cqi, var(--space-10));
  }
  .ns-certificate__award {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-certificate__proof {
    flex: none;
    inline-size: clamp(5rem, 22cqi, 9rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    text-align: center;
  }
  .ns-certificate__seal {
    position: relative;
    flex: none;
    inline-size: clamp(3.5rem, 15cqi, 6rem);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border-radius: var(--radius-pill);
    color: var(--color-brand-300);
    font-size: clamp(1.1rem, 5cqi, 1.9rem);
    background: radial-gradient(circle at 38% 32%, color-mix(in srgb, #1b96ff 32%, transparent), color-mix(in srgb, #03386b 55%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--color-brand-400) 32%, transparent), color-mix(in srgb, var(--color-brand-700) 55%, transparent));
    }
    box-shadow: inset 0 0 0 1px color-mix(in srgb, #7cbeff 55%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, #7cbeff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-300) 55%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--color-brand-300) 30%, transparent);
    }
  }
  .ns-certificate__seal::before {
    content: "";
    position: absolute;
    inset: -9%;
    border-radius: var(--radius-pill);
    background: repeating-conic-gradient( from 0deg, color-mix(in srgb, #1b96ff 60%, transparent) 0deg 9deg, transparent 9deg 18deg);
    @supports (color: color-mix(in lab, red, red)) {
      background: repeating-conic-gradient( from 0deg, color-mix(in srgb, var(--color-brand-400) 60%, transparent) 0deg 9deg, transparent 9deg 18deg);
    }
    mask: radial-gradient(circle, transparent 0 63%, #000 64%);
  }
  .ns-certificate__seal::after {
    content: "";
    position: absolute;
    inset-block-start: 88%;
    inset-inline: 22%;
    block-size: 55%;
    z-index: -1;
    background: linear-gradient(100deg, var(--color-brand-400), var(--color-accent-500));
    clip-path: polygon(0 0, 100% 0, 82% 100%, 50% 72%, 18% 100%);
    opacity: 0.85;
  }
  .ns-certificate__verify {
    font-family: var(--font-mono);
    font-size: clamp(0.45rem, 1.5cqi, var(--size-label));
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-on-dark-border-hover);
    line-height: var(--leading-heading);
    overflow-wrap: anywhere;
  }
  .ns-certificate__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
  }
  .ns-certificate__tag {
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-on-dark-border);
    font-family: var(--font-mono);
    font-size: clamp(0.45rem, 1.5cqi, var(--size-label));
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-on-dark-border-hover);
  }
  .ns-certificate__sign {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 9rem;
  }
  .ns-certificate__sign::before {
    content: "";
    display: block;
    inline-size: 100%;
    block-size: 1px;
    background: var(--color-on-dark-border);
    margin-block-end: var(--space-1);
  }
  .ns-certificate__sign b {
    color: var(--color-on-dark);
    font-weight: var(--weight-label);
  }
  .ns-certificate__kicker {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-on-dark-border-hover);
  }
  .ns-certificate__name {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 7cqi, 3rem);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-certificate__course {
    font-size: clamp(var(--size-small), 2.4cqi, var(--size-body-lg));
    color: var(--color-on-dark);
    opacity: 0.8;
    text-wrap: pretty;
  }
  .ns-certificate__foot {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    padding-block-start: var(--space-3);
    border-block-start: 1px solid var(--color-on-dark-border);
    font-family: var(--font-mono);
    font-size: clamp(0.5rem, 1.7cqi, var(--size-label));
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-on-dark-border-hover);
    font-variant-numeric: tabular-nums;
  }
  .ns-certificate__field b {
    display: block;
    color: var(--color-on-dark);
    font-weight: var(--weight-label);
  }
  .ns-certificate__id {
    margin-inline-start: auto;
    text-align: end;
  }
  @media print {
    .ns-certificate {
      background: var(--color-surface);
      color: var(--color-ink);
      aspect-ratio: auto;
      block-size: 100vh;
    }
    .ns-certificate::before {
      display: none;
    }
    .ns-certificate::after {
      border-color: var(--color-border);
    }
    .ns-certificate__issuer, .ns-certificate__kicker, .ns-certificate__foot, .ns-certificate__verify, .ns-certificate__tag {
      color: var(--color-label);
    }
    .ns-certificate__course, .ns-certificate__field b, .ns-certificate__sign b {
      color: var(--color-ink);
      opacity: 1;
    }
    .ns-certificate__foot {
      border-block-start-color: var(--color-border);
    }
    .ns-certificate__seal {
      color: var(--color-brand-700);
      background: radial-gradient(circle at 38% 32%, color-mix(in srgb, #0176d3 14%, transparent), color-mix(in srgb, #0176d3 26%, transparent));
      @supports (color: color-mix(in lab, red, red)) {
        background: radial-gradient(circle at 38% 32%, color-mix(in srgb, var(--color-brand-500) 14%, transparent), color-mix(in srgb, var(--color-brand-500) 26%, transparent));
      }
      box-shadow: inset 0 0 0 1px color-mix(in srgb, #0b5cab 70%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, #0b5cab 40%, transparent);
      @supports (color: color-mix(in lab, red, red)) {
        box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-brand-600) 70%, transparent), inset 0 0 0 4px transparent, inset 0 0 0 5px color-mix(in srgb, var(--color-brand-600) 40%, transparent);
      }
    }
    .ns-certificate__seal::before {
      background: repeating-conic-gradient( from 0deg, color-mix(in srgb, #0b5cab 75%, transparent) 0deg 9deg, transparent 9deg 18deg);
      @supports (color: color-mix(in lab, red, red)) {
        background: repeating-conic-gradient( from 0deg, color-mix(in srgb, var(--color-brand-600) 75%, transparent) 0deg 9deg, transparent 9deg 18deg);
      }
    }
    .ns-certificate__tag {
      box-shadow: inset 0 0 0 1px var(--color-border);
    }
    .ns-certificate__sign::before {
      background: var(--color-border);
    }
  }
  .ns-extcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
  }
  .ns-extcard {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--space-3);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: var(--color-ink);
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-extcard:hover {
    border-color: var(--color-brand-300);
  }
  .ns-extcard:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-extcard__icon {
    display: grid;
    place-items: center;
    flex: none;
    inline-size: var(--space-9);
    block-size: var(--space-9);
    border-radius: var(--radius-card);
    background: color-mix(in srgb, #0176d3 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
    }
    color: var(--color-brand-600);
    font-size: var(--size-body-lg);
  }
  [data-theme="dark"] .ns-extcard__icon {
    background: color-mix(in srgb, #7cbeff 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-300) 14%, transparent);
    }
    color: var(--color-brand-300);
  }
  .ns-extcard__body {
    min-inline-size: 0;
    display: grid;
    gap: var(--space-1);
  }
  .ns-extcard__source {
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-muted);
  }
  .ns-extcard__title {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
  }
  .ns-extcard__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-extcard__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
  }
  .ns-extcard__cue {
    flex: none;
    color: var(--color-label);
    transition: translate var(--duration-fast) var(--ease-out);
  }
  .ns-extcard:hover .ns-extcard__cue {
    color: var(--color-brand-600);
    translate: 2px -2px;
  }
  [data-theme="dark"] .ns-extcard:hover .ns-extcard__cue {
    color: var(--color-brand-300);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-extcard__cue {
      transition: none;
    }
  }
  .ns-extcard--row {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }
  .ns-track {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-6);
    padding-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-track__body {
    flex: 1;
    min-inline-size: 0;
  }
  .ns-track__kicker {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-track__title {
    font-size: var(--size-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-track__lede {
    font-size: var(--size-body-lg);
    color: var(--color-muted);
    margin-block-start: var(--space-2);
    max-inline-size: var(--container-prose);
    text-wrap: pretty;
  }
  .ns-track__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-track__stat {
    flex: none;
    min-inline-size: 7rem;
  }
  .ns-track__stat b {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    font-weight: var(--weight-heading);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-ink);
  }
  .ns-modules {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
  }
  .ns-module {
    position: relative;
    padding-inline-start: var(--space-10);
    padding-block-end: var(--space-5);
  }
  .ns-module::before {
    content: "";
    position: absolute;
    inset-inline-start: 0.6875rem;
    inset-block: var(--space-8) 0;
    inline-size: 2px;
    background: var(--color-border);
  }
  .ns-module:last-child {
    padding-block-end: 0;
  }
  .ns-module:last-child::before {
    display: none;
  }
  .ns-module__node {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: var(--space-3);
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--color-border);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
  }
  .ns-module[data-state="done"] .ns-module__node {
    background: var(--color-success);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-module[data-state="current"] .ns-module__node {
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-module[data-state="done"]::before {
    background: var(--color-success);
  }
  .ns-module[data-state="locked"] {
    opacity: var(--opacity-disabled);
  }
  .ns-module__card {
    display: block;
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 2px 0 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  a.ns-module__card:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-module[data-state="current"] > .ns-module__card {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-module__head {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    flex-wrap: wrap;
  }
  .ns-module__title {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-module__meta {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-module__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    margin-block-start: var(--space-2);
    text-wrap: pretty;
  }
  .ns-module__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-3);
  }
  .ns-units {
    list-style: none;
    margin: var(--space-3) 0 0;
    padding: 0;
  }
  .ns-unit {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-block-start: 1px solid var(--color-border);
    font-size: var(--size-small);
    color: inherit;
    text-decoration: none;
  }
  a.ns-unit:hover .ns-unit__title {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] a.ns-unit:hover .ns-unit__title {
    color: var(--color-brand-300);
  }
  .ns-unit__check {
    flex: none;
    inline-size: 1rem;
    color: var(--color-border);
  }
  .ns-unit[data-state="done"] .ns-unit__check {
    color: var(--color-success);
  }
  .ns-unit__title {
    min-inline-size: 0;
    color: var(--color-ink);
  }
  .ns-unit__type {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-unit__time {
    flex: none;
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-training {
    display: flex;
    align-items: flex-start;
    gap: var(--space-8);
  }
  .ns-training__main {
    flex: 1;
    min-inline-size: 0;
    max-inline-size: var(--container-narrow);
  }
  .ns-trainingnav {
    position: sticky;
    inset-block-start: var(--navbar-h);
    inline-size: var(--sidebar-w);
    flex: none;
    max-block-size: calc(100dvh - var(--navbar-h));
    overflow-y: auto;
    padding-block: var(--space-6);
    padding-inline-end: var(--space-3);
    border-inline-end: 1px solid var(--color-border);
  }
  .ns-trainingnav__track {
    display: block;
    padding-block-end: var(--space-3);
    margin-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    text-decoration: none;
  }
  .ns-trainingnav__module {
    border: 0;
  }
  .ns-trainingnav__module > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1-5) var(--space-2);
    border-radius: var(--radius-sm);
    list-style: none;
    cursor: pointer;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  .ns-trainingnav__module > summary::-webkit-details-marker {
    display: none;
  }
  .ns-trainingnav__module > summary:hover {
    background: var(--color-surface-sunken);
  }
  .ns-trainingnav__module > summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-trainingnav__twist {
    flex: none;
    color: var(--color-label);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-trainingnav__module[open] > summary .ns-trainingnav__twist {
    rotate: 90deg;
  }
  .ns-trainingnav__count {
    margin-inline-start: auto;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-trainingnav__list {
    list-style: none;
    margin: 0 0 var(--space-2);
    padding-inline-start: var(--space-4);
  }
  .ns-trainingnav__link {
    display: block;
    padding: var(--space-1) var(--space-2);
    border-inline-start: 2px solid var(--color-border);
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-trainingnav__link:hover {
    color: var(--color-ink);
    border-inline-start-color: var(--color-brand-300);
  }
  .ns-trainingnav__section {
    display: block;
    padding: var(--space-3) var(--space-2) var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-trainingnav__link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-2);
    align-items: center;
  }
  .ns-trainingnav__icon {
    flex: none;
    color: var(--color-label);
    font-size: var(--size-body);
  }
  .ns-trainingnav__link[aria-current="page"] .ns-trainingnav__icon {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-trainingnav__link[aria-current="page"] .ns-trainingnav__icon {
    color: var(--color-brand-300);
  }
  .ns-trainingnav__link[data-state="done"] .ns-trainingnav__icon {
    color: var(--color-success);
  }
  .ns-trainingnav__time {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-trainingnav__bar {
    margin: var(--space-1) var(--space-2) var(--space-2);
  }
  .ns-trainingnav__bar .ns-progress {
    inline-size: 100%;
  }
  .ns-trainingnav__link[aria-current="page"] {
    color: var(--color-brand-600);
    font-weight: var(--weight-medium);
    border-inline-start-color: var(--color-brand-500);
  }
  [data-theme="dark"] .ns-trainingnav__link[aria-current="page"] {
    color: var(--color-brand-300);
  }
  .ns-trainingnav__link[data-state="done"] {
    color: var(--color-label);
  }
  .ns-modulehead {
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-modulehead__crumb {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-modulehead__title {
    font-size: var(--size-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    margin-block-start: var(--space-1);
  }
  .ns-modulehead__lede {
    font-size: var(--size-body-lg);
    color: var(--color-muted);
    margin-block-start: var(--space-3);
    text-wrap: pretty;
  }
  @media (max-width: 63.999rem) {
    .ns-training {
      display: block;
    }
    .ns-trainingnav {
      position: static;
      inline-size: 100%;
      max-block-size: none;
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-border);
      padding-inline-end: 0;
      margin-block-end: var(--space-5);
    }
    .ns-training__main {
      max-inline-size: none;
    }
  }
  .ns-trackcard {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  a.ns-trackcard:hover {
    border-color: var(--color-brand-500);
  }
  .ns-trackcard__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }
  .ns-trackcard__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    flex: none;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-brand-500);
    font-size: var(--size-h4);
  }
  .ns-trackcard__index {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-trackcard__title {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-trackcard__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    text-wrap: pretty;
  }
  .ns-trackcard__meta {
    display: flex;
    gap: var(--space-4);
    margin-block-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-roadmap {
    max-inline-size: 26rem;
  }
  .ns-roadmap--end {
    margin-inline-start: auto;
  }
  .ns-roadmap__card {
    position: relative;
    display: flex;
    gap: var(--space-4);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 2px 0 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  a.ns-roadmap__card:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-roadmap__rail {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-roadmap__index {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-roadmap__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-brand-500);
    font-size: var(--size-h4);
  }
  .ns-roadmap__body {
    min-inline-size: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .ns-roadmap__title {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-roadmap__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    text-wrap: pretty;
  }
  .ns-roadmap__meta {
    display: flex;
    gap: var(--space-3);
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-gate {
    position: relative;
    display: grid;
    gap: var(--space-5);
  }
  .ns-gate__teaser {
    position: relative;
    max-block-size: 16rem;
    overflow: hidden;
    mask-image: linear-gradient(var(--color-ink) 0%, var(--color-ink) 45%, transparent 100%);
  }
  .ns-gate__panel {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    padding: var(--pad-card-lg);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-sunken);
  }
  .ns-gate__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--color-border);
    background: var(--color-surface);
    color: var(--color-featured-ink);
    font-size: var(--size-h4);
  }
  .ns-gate__title {
    font-size: var(--size-h4);
    font-weight: var(--weight-heading);
    color: var(--color-ink);
    text-wrap: balance;
  }
  .ns-gate__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    max-inline-size: var(--measure-narrow);
    text-wrap: pretty;
  }
  .ns-gate__note {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-gate--inline .ns-gate__panel {
    padding: var(--pad-card);
    gap: var(--space-2);
  }
  .ns-gate--inline .ns-gate__icon {
    inline-size: 2rem;
    block-size: 2rem;
    font-size: var(--size-body);
  }
  .ns-gate--inline .ns-gate__title {
    font-size: var(--size-body);
  }
  .ns-tiers {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  }
  .ns-tier {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--pad-card-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .ns-tier--pro {
    border-inline-start: 3px solid var(--color-featured-ink);
  }
  .ns-tier__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-tier--pro .ns-tier__label {
    color: var(--color-featured-ink);
  }
  .ns-tier__title {
    font-size: var(--size-h4);
    font-weight: var(--weight-heading);
    color: var(--color-ink);
  }
  .ns-tier__price {
    font-family: var(--font-mono);
    font-size: var(--size-body);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-tier__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    font-size: var(--size-small);
  }
  .ns-tier__list li {
    display: flex;
    gap: var(--space-2);
    align-items: flex-start;
    color: var(--color-muted);
  }
  .ns-tier__list i {
    flex: none;
    margin-block-start: 0.15em;
    color: var(--color-success);
  }
  .ns-tier__foot {
    margin-block-start: auto;
    padding-block-start: var(--space-2);
  }
  .ns-path {
    display: grid;
    gap: var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }
  .ns-path__stop {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ns-path__stop:not(:last-child)::after {
    content: "";
    position: absolute;
    inset-block-start: 0.6875rem;
    inset-inline-start: calc(50% + var(--space-6));
    inline-size: calc(100% - var(--space-12));
    block-size: 2px;
    background: var(--color-border);
  }
  .ns-path__stop[data-state="done"]::after {
    background: var(--color-success);
  }
  .ns-path__node {
    position: relative;
    z-index: var(--z-raised);
    align-self: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-pill);
    box-shadow: inset 0 0 0 1px var(--color-border);
    background: var(--color-surface);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
  }
  .ns-path__stop[data-state="done"] .ns-path__node {
    background: var(--color-success);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-path__stop[data-state="current"] .ns-path__node {
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    box-shadow: none;
  }
  .ns-path__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    block-size: 100%;
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 2px 0 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  a.ns-path__card:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-path__stop[data-state="current"] .ns-path__card {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-path__title {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-path__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    text-wrap: pretty;
  }
  .ns-path__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: auto;
    padding-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-tthumb {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .ns-tthumb > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  .ns-tthumb--glyph {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-brand-500);
    font-size: var(--size-h2);
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--space-6) var(--space-6);
  }
  .ns-tthumb__badge {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: var(--space-0-5) var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: inset 0 0 0 1px var(--color-border);
  }
  .ns-people {
    display: grid;
    gap: var(--space-5);
    grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  }
  .ns-person {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  a.ns-person:hover {
    border-color: var(--color-brand-500);
  }
  .ns-person__body {
    min-inline-size: 0;
    display: grid;
    gap: var(--space-0-5);
  }
  .ns-person__name {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-person__role {
    font-size: var(--size-fine);
    color: var(--color-muted);
  }
  .ns-person__count {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-thero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-16) var(--space-12);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-thero__inner {
    position: relative;
    z-index: var(--z-raised);
    max-inline-size: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: grid;
    gap: var(--space-10);
    grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
    align-items: center;
  }
  .ns-thero__body {
    display: grid;
    gap: var(--space-4);
    justify-items: start;
  }
  .ns-thero__title {
    font-size: var(--size-display);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    max-inline-size: 18ch;
  }
  .ns-thero__lede {
    font-size: var(--size-body-lg);
    color: var(--color-muted);
    max-inline-size: var(--container-prose);
    text-wrap: pretty;
  }
  .ns-thero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
  }
  .ns-thero__search {
    inline-size: 100%;
    max-inline-size: 28rem;
  }
  .ns-thero__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-thero__stats b {
    display: block;
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    font-weight: var(--weight-heading);
    letter-spacing: normal;
    text-transform: none;
    color: var(--color-ink);
  }
  .ns-thero__art {
    justify-self: end;
    inline-size: 100%;
    max-inline-size: 22rem;
  }
  .ns-thero__art > img, .ns-thero__art > svg {
    inline-size: 100%;
    block-size: auto;
    display: block;
  }
  .ns-thero::before, .ns-thero::after {
    content: "";
    position: absolute;
    pointer-events: none;
    inline-size: 24rem;
    block-size: 24rem;
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--space-8) var(--space-8);
  }
  .ns-thero::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    mask-image: radial-gradient(100% 100% at 0 0, var(--color-ink) 0%, transparent 75%);
  }
  .ns-thero::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    mask-image: radial-gradient(100% 100% at 100% 100%, var(--color-ink) 0%, transparent 75%);
  }
  @media (max-width: 63.999rem) {
    .ns-thero {
      padding-block: var(--space-12) var(--space-10);
    }
    .ns-thero__inner {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }
    .ns-thero__art {
      justify-self: center;
      max-inline-size: 16rem;
      order: 1;
    }
    .ns-thero::before, .ns-thero::after {
      inline-size: 14rem;
      block-size: 14rem;
    }
  }
  .ns-training--fixed {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ns-trail-w);
    --ns-trail-w: 18rem;
    gap: 0;
    block-size: calc(100dvh - var(--navbar-h));
    overflow: hidden;
  }
  .ns-training--fixed > .ns-training__main {
    grid-column: 1;
    overflow-y: auto;
    max-inline-size: none;
  }
  .ns-training--fixed > .ns-trainingnav {
    grid-column: 2;
  }
  .ns-training--fixed.ns-training--nav-start {
    grid-template-columns: var(--ns-trail-w) minmax(0, 1fr);
  }
  .ns-training--fixed.ns-training--nav-start > .ns-training__main {
    grid-column: 2;
  }
  .ns-training--fixed.ns-training--nav-start > .ns-trainingnav {
    grid-column: 1;
  }
  .ns-training--fixed > .ns-trainingnav {
    position: static;
    inline-size: auto;
    max-block-size: none;
    block-size: 100%;
    overflow-y: auto;
    border-inline-end: 0;
    border-inline-start: 1px solid var(--color-border);
    padding-inline: var(--space-4);
  }
  .ns-training--fixed.ns-training--nav-start > .ns-trainingnav {
    border-inline-start: 0;
    border-inline-end: 1px solid var(--color-border);
  }
  .ns-training__reading {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    padding: var(--space-8) var(--gutter-lg);
  }
  .ns-trainingnav__head {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
    display: grid;
    gap: var(--space-3);
    padding-block: var(--space-4) var(--space-3);
    margin-block-end: var(--space-2);
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-trainingnav__search {
    position: relative;
    display: flex;
    align-items: center;
  }
  .ns-trainingnav__search i {
    position: absolute;
    inset-inline-start: var(--space-2-5);
    color: var(--color-label);
    font-size: var(--size-body);
    pointer-events: none;
  }
  .ns-trainingnav__search .ns-input {
    padding-inline-start: var(--space-8);
    inline-size: 100%;
  }
  .ns-trainingnav__result {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-trainingnav__module[hidden], .ns-trainingnav__list li[hidden] {
    display: none;
  }
  .ns-trainingnav__close {
    display: none;
  }
  @media (max-width: 63.999rem) {
    .ns-training--fixed {
      display: block;
      block-size: auto;
      overflow: visible;
    }
    .ns-training--fixed > .ns-training__main {
      overflow: visible;
    }
    .ns-training--fixed > .ns-trainingnav, .ns-training--fixed.ns-training--nav-start > .ns-trainingnav {
      position: fixed;
      inset-block: 0;
      inset-inline-end: 0;
      inline-size: min(22rem, 88vw);
      z-index: var(--z-overlay);
      background: var(--color-surface);
      border-inline-start: 1px solid var(--color-border);
      border-inline-end: 0;
      translate: 100% 0;
      transition: translate var(--duration-base) var(--ease-out);
    }
    .ns-training--fixed[data-rail="open"] > .ns-trainingnav {
      translate: 0 0;
    }
    .ns-trainingnav__close {
      display: inline-flex;
      margin-inline-start: auto;
    }
    .ns-training__reading {
      padding: var(--space-6) var(--gutter);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-training--fixed > .ns-trainingnav {
      transition: none;
    }
  }
  .ns-training__scrim {
    display: none;
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    background: var(--color-scrim);
  }
  @media (max-width: 63.999rem) {
    .ns-training--fixed[data-rail="open"] .ns-training__scrim {
      display: block;
    }
  }
  .ns-tpager {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-block-start: var(--space-10);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--color-border);
  }
  .ns-tpager__btn {
    display: grid;
    gap: var(--space-1);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    color: inherit;
    text-decoration: none;
    box-shadow: inset 2px 0 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  a.ns-tpager__btn:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-tpager__btn--next {
    text-align: end;
    grid-column: 2;
  }
  .ns-tpager__dir {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-tpager__btn--next .ns-tpager__dir {
    justify-content: flex-end;
  }
  .ns-tpager__where {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-brand-600);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  [data-theme="dark"] .ns-tpager__where {
    color: var(--color-brand-300);
  }
  .ns-tpager__title {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    text-wrap: pretty;
  }
  .ns-tpager__btn[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
    pointer-events: none;
  }
  @media (max-width: 47.999rem) {
    .ns-tpager {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-tpager__btn--next {
      grid-column: 1;
    }
  }
  .ns-tposition {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-tposition b {
    color: var(--color-ink);
    font-weight: var(--weight-semibold);
  }
  .ns-tposition__sep {
    color: var(--color-border);
  }
  .ns-chero {
    position: relative;
    overflow: hidden;
    padding-block: var(--space-12) var(--space-10);
  }
  .ns-chero__inner {
    position: relative;
    z-index: var(--z-raised);
    max-inline-size: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .ns-chero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 24rem;
    gap: var(--space-10);
    align-items: center;
  }
  .ns-chero__body {
    min-inline-size: 0;
  }
  .ns-chero__kicker {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-chero__title {
    font-size: var(--size-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    margin-block-start: var(--space-3);
    text-wrap: balance;
    max-inline-size: 20ch;
  }
  .ns-chero__lede {
    margin-block-start: var(--space-4);
    font-size: var(--size-body-lg);
    color: var(--color-muted);
    max-inline-size: var(--measure-prose);
    text-wrap: pretty;
  }
  .ns-chero__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    margin-block-start: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-chero__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .ns-chero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-block-start: var(--space-6);
  }
  .ns-chero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }
  .ns-chero__media {
    position: relative;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
    background: var(--color-brand-900);
    aspect-ratio: 16 / 9;
  }
  .ns-chero__media > img, .ns-chero__media > video, .ns-chero__media > iframe {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
    border: 0;
  }
  .ns-chero__play {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border: 0;
    background: color-mix(in srgb, #001a3e 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-900) 30%, transparent);
    }
    color: var(--color-on-dark);
    font-size: var(--size-h1);
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out);
  }
  .ns-chero__play:hover {
    background: color-mix(in srgb, #001a3e 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-900) 45%, transparent);
    }
  }
  .ns-chero__caption {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(to top, color-mix(in srgb, #001a3e 88%, transparent), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to top, color-mix(in srgb, var(--color-brand-900) 88%, transparent), transparent);
    }
    color: var(--color-on-dark);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ns-chero__bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
  }
  .ns-chero__bg > img, .ns-chero__bg > video {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  .ns-chero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, color-mix(in srgb, #001a3e 92%, transparent), color-mix(in srgb, #001a3e 62%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to right, color-mix(in srgb, var(--color-brand-900) 92%, transparent), color-mix(in srgb, var(--color-brand-900) 62%, transparent));
    }
  }
  .ns-chero--cover, .ns-chero--video, .ns-chero--console {
    color: var(--color-on-dark);
  }
  .ns-chero--cover .ns-chero__title, .ns-chero--video .ns-chero__title, .ns-chero--console .ns-chero__title {
    color: var(--color-on-dark);
  }
  .ns-chero--cover .ns-chero__lede, .ns-chero--video .ns-chero__lede, .ns-chero--console .ns-chero__lede {
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 78%, transparent);
    }
  }
  .ns-chero--cover .ns-chero__kicker, .ns-chero--video .ns-chero__kicker, .ns-chero--console .ns-chero__kicker, .ns-chero--cover .ns-chero__meta, .ns-chero--video .ns-chero__meta, .ns-chero--console .ns-chero__meta {
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 70%, transparent);
    }
  }
  .ns-chero--cover .ns-chero__grid, .ns-chero--video .ns-chero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-chero--cover .ns-chero__body, .ns-chero--video .ns-chero__body {
    max-inline-size: 46rem;
  }
  .ns-chero--cover, .ns-chero--video {
    padding-block: var(--space-20) var(--space-16);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-chero--video .ns-chero__bg > video {
      display: none;
    }
  }
  .ns-chero--console {
    background: var(--color-brand-900);
  }
  .ns-chero--minimal {
    border-block-end: 1px solid var(--color-border);
    padding-block: var(--space-10) var(--space-8);
  }
  .ns-chero--minimal .ns-chero__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-chero--minimal .ns-chero__title {
    max-inline-size: 24ch;
  }
  @media (max-width: 63.999rem) {
    .ns-chero__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
    }
    .ns-chero {
      padding-block: var(--space-8) var(--space-6);
    }
    .ns-chero--cover, .ns-chero--video {
      padding-block: var(--space-12) var(--space-10);
    }
    .ns-chero__media {
      order: -1;
    }
  }
  .ns-buybox {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    overflow: hidden;
  }
  .ns-buybox__media {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-buybox__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--pad-card);
  }
  .ns-buybox__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-buybox__note {
    font-size: var(--size-fine);
    color: var(--color-muted);
    text-align: center;
  }
  .ns-buybox__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--size-small);
  }
  .ns-buybox__list li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-muted);
  }
  .ns-buybox__list i {
    color: var(--color-brand-500);
    font-size: var(--size-body);
    flex: none;
  }
  .ns-buybox__foot {
    padding: var(--space-3) var(--pad-card);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    text-align: center;
  }
  .ns-buybox--bar {
    position: fixed;
    inset-block-end: 0;
    inset-inline: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-3) var(--gutter);
    border-radius: 0;
    border-block-start: 1px solid var(--color-border);
    box-shadow: var(--shadow-raised);
    padding-block-end: calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  }
  .ns-buybox--bar .ns-price {
    margin-inline-end: auto;
  }
  @media (min-width: 64rem) {
    .ns-buybox--bar {
      display: none;
    }
  }
  .ns-share {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
  }
  .ns-share__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-inline-end: var(--space-1);
  }
  .ns-outcomes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--space-3) var(--space-8);
  }
  .ns-outcomes li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: start;
    font-size: var(--size-small);
  }
  .ns-outcomes i {
    color: var(--color-success-ink);
    font-size: var(--size-body);
    margin-block-start: 0.1em;
  }
  .ns-outcomes--plain i {
    color: var(--color-label);
  }
  .ns-outcomes--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-outcomes--cards {
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--gap-grid, var(--space-4));
  }
  .ns-outcomes--cards li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    font-size: var(--size-small);
    line-height: var(--leading-body);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-outcomes--cards li:hover {
    border-color: var(--color-brand-300);
  }
  .ns-outcomes--cards i {
    display: grid;
    place-items: center;
    inline-size: var(--space-10);
    block-size: var(--space-10);
    margin-block-start: 0;
    border-radius: var(--radius-card);
    background: color-mix(in srgb, #0176d3 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
    }
    color: var(--color-brand-600);
    font-size: var(--size-h3);
  }
  [data-theme="dark"] .ns-outcomes--cards i {
    background: color-mix(in srgb, #7cbeff 14%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-300) 14%, transparent);
    }
    color: var(--color-brand-300);
  }
  .ns-outcomes__title {
    display: block;
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
    margin-block-end: var(--space-1);
  }
  .ns-prereq {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ns-prereq__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: baseline;
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-prereq__item:last-child {
    border-block-end: 0;
    padding-block-end: 0;
  }
  .ns-prereq__icon {
    color: var(--color-label);
    font-size: var(--size-body);
  }
  .ns-prereq__title {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
  }
  .ns-prereq__note {
    font-size: var(--size-label);
    color: var(--color-muted);
    line-height: var(--leading-body);
  }
  .ns-prereq__fix {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
    text-decoration: none;
    white-space: nowrap;
  }
  .ns-prereq__fix:hover {
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  [data-theme="dark"] .ns-prereq__fix {
    color: var(--color-brand-300);
  }
  .ns-prereq__item[data-met="true"] .ns-prereq__icon {
    color: var(--color-success);
  }
  .ns-prereq__item[data-met="false"] .ns-prereq__icon {
    color: var(--color-warning-ink);
  }
  .ns-chero--split .ns-chero__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-10);
  }
  .ns-chero--split .ns-chero__media {
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--color-border);
  }
  @media (max-width: 63.999rem) {
    .ns-chero--split .ns-chero__grid {
      grid-template-columns: minmax(0, 1fr);
    }
  }
  .ns-chero--cert .ns-chero__grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-10);
  }
  .ns-chero--cert .ns-certbadge {
    inline-size: 9rem;
  }
  @media (max-width: 47.999rem) {
    .ns-chero--cert .ns-chero__grid {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-chero--cert .ns-certbadge {
      inline-size: 6.5rem;
    }
  }
  .ns-instructors--pair {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-8);
  }
  .ns-instructors--pair .ns-instructor {
    align-items: start;
  }
  .ns-byline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
  }
  .ns-byline__names {
    min-inline-size: 0;
    font-size: var(--size-label);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-byline__names b {
    color: var(--color-ink);
    font-weight: var(--weight-medium);
  }
  .ns-byline--stack {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-1);
  }
  .ns-instructor {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }
  .ns-instructor__avatar {
    inline-size: 4rem;
    block-size: 4rem;
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-instructor__name {
    font-family: var(--font-heading);
    font-size: var(--size-body-lg);
    font-weight: var(--weight-semibold);
  }
  .ns-instructor__role {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-instructor__stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-block-start: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-instructor__stats > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .ns-instructor__bio {
    margin-block-start: var(--space-3);
    font-size: var(--size-small);
    color: var(--color-muted);
    max-inline-size: var(--measure-prose);
  }
  .ns-instructors {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-8);
  }
  .ns-filters {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
  }
  .ns-filters__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-filters__title {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-filters__clear {
    margin-inline-start: auto;
  }
  .ns-filters__group {
    border-block-end: 1px solid var(--color-border);
  }
  .ns-filters__legend {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding-block: var(--space-3);
    cursor: pointer;
    list-style: none;
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
  }
  .ns-filters__legend::-webkit-details-marker {
    display: none;
  }
  .ns-filters__legend:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: 2px;
  }
  .ns-filters__legend i {
    margin-inline-start: auto;
    color: var(--color-muted);
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-filters__group[open] .ns-filters__legend i {
    rotate: 180deg;
  }
  .ns-filters__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-block-end: var(--space-3);
  }
  .ns-filters__count {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-filters .ns-choice {
    inline-size: 100%;
    font-size: var(--size-small);
  }
  .ns-filters .ns-choice > span:not(.ns-filters__count) {
    flex: 1;
    min-inline-size: 0;
  }
  .ns-filters__applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-block-end: var(--space-4);
  }
  .ns-range {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding-block-end: var(--space-4);
  }
  .ns-range__track {
    position: relative;
    block-size: var(--space-5);
  }
  .ns-range__track::before {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline: 0;
    block-size: 0.25rem;
    translate: 0 -50%;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
  }
  .ns-range__fill {
    position: absolute;
    inset-block-start: 50%;
    block-size: 0.25rem;
    translate: 0 -50%;
    border-radius: var(--radius-pill);
    background: var(--color-brand-500);
    inset-inline-start: var(--fx-from, 0%);
    inset-inline-end: calc(100% - var(--fx-to, 100%));
  }
  .ns-range input[type="range"] {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 0;
    inline-size: 100%;
    block-size: var(--space-5);
    margin: 0;
    background: none;
    appearance: none;
    pointer-events: none;
  }
  .ns-range input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    pointer-events: auto;
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-surface);
    background: var(--color-brand-500);
    cursor: grab;
    box-shadow: var(--shadow-raised);
  }
  .ns-range input[type="range"]::-moz-range-thumb {
    pointer-events: auto;
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border-radius: var(--radius-pill);
    border: 2px solid var(--color-surface);
    background: var(--color-brand-500);
    cursor: grab;
  }
  .ns-range input[type="range"]:focus-visible::-webkit-slider-thumb {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-range__values {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-range__values .ns-input {
    inline-size: 5.5rem;
  }
  .ns-range__sep {
    color: var(--color-label);
  }
  .ns-testimonials {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
    gap: var(--gap-grid);
  }
  .ns-testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .ns-testimonial__quote {
    font-size: var(--size-small);
    line-height: var(--leading-body);
    color: var(--color-ink);
    flex: 1;
  }
  .ns-testimonial__who {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    align-items: center;
  }
  .ns-testimonial__avatar {
    inline-size: var(--space-9);
    block-size: var(--space-9);
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-testimonial__name {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
  }
  .ns-testimonial__role {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-testimonial--featured {
    grid-column: 1 / -1;
  }
  .ns-testimonial__result {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-success-ink);
    margin-block-end: var(--space-3);
  }
  .ns-testimonial--compact .ns-testimonial__quote {
    font-size: var(--size-small);
    font-family: var(--font-sans);
  }
  .ns-testimonial--compact {
    padding: var(--pad-card);
  }
  .ns-testimonial--media {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--pad-card-lg);
    align-items: center;
  }
  .ns-testimonial--media .ns-pframe {
    inline-size: 9rem;
    flex: none;
  }
  @media (max-width: 47.999rem) {
    .ns-testimonial--media {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-testimonial--media .ns-pframe {
      inline-size: 7rem;
    }
  }
  .ns-testimonial--featured .ns-testimonial__quote {
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-band--dark .ns-testimonial {
    background: transparent;
    border-color: var(--color-on-dark-border);
  }
  .ns-band--dark .ns-testimonial__quote, .ns-band--dark .ns-testimonial__name {
    color: var(--color-on-dark);
  }
  .ns-resource {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  a.ns-resource:hover {
    border-color: var(--color-brand-500);
  }
  .ns-resource__icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-brand-500);
    font-size: var(--size-h4);
  }
  .ns-resource__body {
    flex: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
  }
  .ns-resource__title {
    font-weight: var(--weight-body-strong);
    color: var(--color-ink);
  }
  .ns-resource__type {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-resource__cue {
    flex: none;
    color: var(--color-muted);
    transition: color var(--duration-fast) var(--ease-out);
  }
  a.ns-resource:hover .ns-resource__cue {
    color: var(--color-brand-600);
  }
  .ns-adslot {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 7.5rem;
    padding: var(--pad-card);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
  }
  .ns-adslot__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-bcard__cover {
    position: relative;
    overflow: hidden;
    display: block;
  }
  .ns-bcard__cover img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ns-bcard__cat {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    background: var(--color-surface);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-bcard__cat {
    color: var(--color-brand-300);
  }
  .ns-bcard__cover--empty {
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background: var(--color-surface-sunken);
    color: var(--color-brand-300);
    font-size: var(--size-h1);
  }
  .ns-bcard__title {
    font-size: var(--size-body-lg);
    line-height: var(--leading-heading);
    text-wrap: balance;
  }
  .ns-bcard__excerpt {
    font-size: var(--size-small);
    color: var(--color-muted);
    line-height: var(--leading-body);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ns-bcard--row {
    flex-direction: row;
    align-items: stretch;
  }
  .ns-bcard--row .ns-bcard__cover {
    flex: none;
    inline-size: 12rem;
  }
  .ns-bcard--row .ns-bcard__cover img {
    block-size: 100%;
  }
  .ns-bcard--wide {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }
  .ns-bcard--wide .ns-bcard__cover {
    grid-row: 1 / -1;
  }
  .ns-bcard--wide .ns-bcard__cover img {
    block-size: 100%;
    min-block-size: 15rem;
  }
  .ns-bcard--wide .ns-bcard__title {
    font-size: var(--size-h2);
    letter-spacing: var(--tracking-tight);
  }
  .ns-bcard--wide .ns-bcard__excerpt {
    -webkit-line-clamp: 3;
    font-size: var(--size-body);
  }
  .ns-bcard--wide .ns-card__body {
    padding: var(--pad-card-lg);
    gap: var(--space-3);
    justify-content: center;
  }
  .ns-bcard--minimal {
    border-color: transparent;
    background: none;
    border-radius: 0;
  }
  .ns-bcard--minimal .ns-card__body {
    padding: var(--space-4) 0;
    border-block-end: 1px solid var(--color-border);
  }
  .ns-bcard--minimal .ns-bcard__title {
    font-size: var(--size-body);
  }
  .ns-bcard--overlay {
    position: relative;
    min-block-size: 16rem;
  }
  .ns-bcard--overlay .ns-bcard__cover {
    position: absolute;
    inset: 0;
  }
  .ns-bcard--overlay .ns-card__body {
    position: relative;
    margin-block-start: auto;
    color: var(--color-on-dark);
    background: linear-gradient(to top, color-mix(in srgb, #001a3e 92%, transparent), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to top, color-mix(in srgb, var(--color-brand-900) 92%, transparent), transparent);
    }
  }
  .ns-bcard--overlay .ns-bcard__title, .ns-bcard--overlay .ns-card__title {
    color: var(--color-on-dark);
  }
  .ns-bcard--overlay .ns-postmeta {
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 78%, transparent);
    }
  }
  @media (max-width: 47.999rem) {
    .ns-bcard--wide {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-bcard--wide .ns-bcard__cover img {
      min-block-size: 0;
      aspect-ratio: 16 / 9;
    }
    .ns-bcard--wide .ns-bcard__title {
      font-size: var(--size-h3);
    }
    .ns-bcard--row .ns-bcard__cover {
      inline-size: 7.5rem;
    }
  }
  .ns-postmeta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-postmeta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
  }
  .ns-postmeta__avatar {
    inline-size: var(--space-6);
    block-size: var(--space-6);
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-postmeta__author {
    color: var(--color-ink);
  }
  .ns-postmeta a {
    color: inherit;
    text-decoration: none;
  }
  .ns-postmeta a:hover {
    color: var(--color-brand-600);
  }
  .ns-postmeta--dotted > * + *::before {
    content: "·";
    margin-inline-end: var(--space-3);
    color: var(--color-border);
  }
  .ns-posthead {
    position: relative;
    padding-block: var(--space-10) var(--space-8);
    overflow: hidden;
  }
  .ns-posthead__inner {
    position: relative;
    z-index: var(--z-raised);
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .ns-posthead__cat {
    display: inline-flex;
    margin-block-end: var(--space-4);
  }
  .ns-posthead__title {
    font-size: var(--size-display);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-posthead__standfirst {
    margin-block-start: var(--space-4);
    font-size: var(--size-body-lg);
    line-height: var(--leading-body);
    color: var(--color-muted);
    text-wrap: pretty;
    max-inline-size: var(--measure-prose);
  }
  .ns-posthead .ns-postmeta {
    margin-block-start: var(--space-6);
  }
  .ns-posthead__cover {
    display: block;
    inline-size: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-block-start: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-sunken);
  }
  .ns-posthead__credit {
    display: block;
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-posthead--center {
    text-align: center;
  }
  .ns-posthead--center .ns-posthead__standfirst {
    margin-inline: auto;
  }
  .ns-posthead--center .ns-postmeta {
    justify-content: center;
  }
  .ns-posthead--wide .ns-posthead__inner {
    max-inline-size: var(--container-page);
  }
  .ns-posthead--wide .ns-posthead__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-10);
    align-items: center;
  }
  .ns-posthead--wide .ns-posthead__cover {
    margin-block-start: 0;
  }
  .ns-posthead__bg {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
  }
  .ns-posthead__bg > img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    display: block;
  }
  .ns-posthead__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, color-mix(in srgb, #001a3e 94%, transparent), color-mix(in srgb, #001a3e 66%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to top, color-mix(in srgb, var(--color-brand-900) 94%, transparent), color-mix(in srgb, var(--color-brand-900) 66%, transparent));
    }
  }
  .ns-posthead--cover, .ns-posthead--console {
    color: var(--color-on-dark);
  }
  .ns-posthead--cover .ns-posthead__title, .ns-posthead--console .ns-posthead__title {
    color: var(--color-on-dark);
  }
  .ns-posthead--cover .ns-posthead__standfirst, .ns-posthead--console .ns-posthead__standfirst {
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 78%, transparent);
    }
  }
  .ns-posthead--cover .ns-postmeta, .ns-posthead--console .ns-postmeta {
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 72%, transparent);
    }
  }
  .ns-posthead--cover .ns-postmeta__author, .ns-posthead--console .ns-postmeta__author {
    color: var(--color-on-dark);
  }
  .ns-posthead--cover {
    padding-block: var(--space-20) var(--space-12);
  }
  .ns-posthead--console {
    background: var(--color-brand-900);
  }
  .ns-posthead--minimal {
    padding-block: var(--space-8) var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }
  @media (max-width: 63.999rem) {
    .ns-posthead--wide .ns-posthead__grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
    }
    .ns-posthead--cover {
      padding-block: var(--space-12) var(--space-8);
    }
  }
  .ns-post {
    display: grid;
    grid-template-columns: 14rem minmax(0, var(--container-prose)) 3.5rem;
    gap: var(--space-10);
    justify-content: center;
    align-items: start;
    padding-block: var(--space-10) var(--space-16);
    padding-inline: var(--gutter);
  }
  .ns-post__rail, .ns-post__aside {
    position: sticky;
    inset-block-start: calc(var(--navbar-h) + var(--space-6));
    max-block-size: calc(100dvh - var(--navbar-h) - var(--space-10));
    overflow-y: auto;
  }
  .ns-post__body {
    min-inline-size: 0;
  }
  .ns-post__aside {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
  }
  @media (max-width: 79.999rem) {
    .ns-post {
      grid-template-columns: 14rem minmax(0, var(--container-prose));
    }
    .ns-post__aside {
      display: none;
    }
  }
  @media (max-width: 63.999rem) {
    .ns-post {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-6);
      justify-content: stretch;
    }
    .ns-post__rail {
      position: static;
      max-block-size: none;
      overflow: visible;
    }
    .ns-post__body {
      max-inline-size: var(--container-prose);
      margin-inline: auto;
    }
  }
  .ns-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    border-inline-start: 3px solid var(--color-brand-500);
    border-radius: 0 var(--radius-card) var(--radius-card) 0;
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
    font-size: var(--size-small);
    line-height: var(--leading-body);
  }
  .ns-callout > i {
    color: var(--color-brand-500);
    font-size: var(--size-body-lg);
  }
  .ns-callout__label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
    margin-block-end: var(--space-1);
  }
  .ns-callout--tip {
    border-inline-start-color: var(--color-success);
    background: color-mix(in srgb, #2e844a 7%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-success) 7%, transparent);
    }
  }
  .ns-callout--tip > i, .ns-callout--tip .ns-callout__label {
    color: var(--color-success-ink);
  }
  .ns-callout--warn {
    border-inline-start-color: var(--color-warning);
    background: color-mix(in srgb, #fe9339 9%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-warning) 9%, transparent);
    }
  }
  .ns-callout--warn > i, .ns-callout--warn .ns-callout__label {
    color: var(--color-warning-ink);
  }
  .ns-callout--danger {
    border-inline-start-color: var(--color-error);
    background: color-mix(in srgb, #ea001e 7%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-error) 7%, transparent);
    }
  }
  .ns-callout--danger > i, .ns-callout--danger .ns-callout__label {
    color: var(--color-error-ink);
  }
  [data-theme="dark"] .ns-callout__label {
    color: var(--color-brand-300);
  }
  .ns-series {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-sunken);
  }
  .ns-series__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-series__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    counter-reset: ns-series;
  }
  .ns-series__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-2);
    align-items: baseline;
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: none;
  }
  .ns-series__item::before {
    counter-increment: ns-series;
    content: counter(ns-series, decimal-leading-zero);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  a.ns-series__item:hover {
    color: var(--color-brand-600);
  }
  .ns-series__item[aria-current="true"] {
    color: var(--color-ink);
    font-weight: var(--weight-body-strong);
  }
  .ns-series__item[data-state="done"]::before {
    color: var(--color-success-ink);
  }
  .ns-authorbox {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .ns-authorbox__avatar {
    inline-size: 3.5rem;
    block-size: 3.5rem;
    border-radius: var(--radius-pill);
    object-fit: cover;
    background: var(--color-surface-sunken);
  }
  .ns-authorbox__name {
    font-family: var(--font-heading);
    font-size: var(--size-body-lg);
    font-weight: var(--weight-semibold);
  }
  .ns-authorbox__name a {
    color: inherit;
    text-decoration: none;
  }
  .ns-authorbox__name a:hover {
    color: var(--color-brand-600);
  }
  .ns-authorbox__role {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-authorbox__bio {
    margin-block-start: var(--space-2);
    font-size: var(--size-small);
    color: var(--color-muted);
    max-inline-size: var(--measure-prose);
  }
  .ns-authorbox__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-start: var(--space-3);
  }
  .ns-authorbox--stack {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-authorboxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    gap: var(--space-4);
  }
  .ns-postnav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }
  .ns-postnav__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    text-decoration: none;
    color: var(--color-ink);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-postnav__link:hover {
    border-color: var(--color-brand-500);
  }
  .ns-postnav__link--next {
    text-align: end;
  }
  .ns-postnav__dir {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-postnav__link--next .ns-postnav__dir {
    justify-content: end;
  }
  .ns-postnav__title {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
  }
  .ns-postnav__link--empty {
    visibility: hidden;
  }
  @media (max-width: 47.999rem) {
    .ns-postnav {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-postnav__link--empty {
      display: none;
    }
  }
  .ns-share--rail {
    flex-direction: column;
    gap: var(--space-1);
  }
  .ns-share--rail .ns-share__label {
    writing-mode: vertical-rl;
    margin: 0 0 var(--space-2);
  }
  .ns-blog-listing {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-10);
    align-items: start;
  }
  .ns-blog-listing__rail {
    position: sticky;
    inset-block-start: calc(var(--navbar-h) + var(--space-4));
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }
  @media (max-width: 63.999rem) {
    .ns-blog-listing {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }
    .ns-blog-listing__rail {
      position: static;
    }
  }
  .ns-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: var(--gap-grid);
  }
  .ns-blog-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .ns-blog-archive {
    display: flex;
    flex-direction: column;
  }
  .ns-blog-archive__row {
    display: grid;
    grid-template-columns: 6rem minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: baseline;
    padding-block: var(--space-3);
    border-block-end: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-ink);
  }
  .ns-blog-archive__row:hover .ns-blog-archive__title {
    color: var(--color-brand-600);
  }
  .ns-blog-archive__date, .ns-blog-archive__read {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-blog-archive__title {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
  }
  @media (max-width: 47.999rem) {
    .ns-blog-archive__row {
      grid-template-columns: minmax(0, 1fr) auto;
    }
    .ns-blog-archive__date {
      grid-column: 1 / -1;
    }
  }
  .ns-toc {
    display: flex;
    flex-direction: column;
    border-inline-start: 1px solid var(--color-border);
  }
  .ns-toc__title {
    padding: 0 var(--space-3) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-toc__link {
    display: block;
    padding: var(--space-1-5) var(--space-3);
    margin-inline-start: -1px;
    border-inline-start: 2px solid transparent;
    font-size: var(--size-small);
    line-height: var(--leading-heading);
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-toc__link:hover {
    color: var(--color-ink);
  }
  .ns-toc__link[aria-current="true"] {
    border-inline-start-color: var(--color-brand-500);
    color: var(--color-brand-600);
    font-weight: var(--weight-medium);
  }
  [data-theme="dark"] .ns-toc__link[aria-current="true"] {
    color: var(--color-brand-300);
  }
  .ns-toc__link--sub {
    padding-inline-start: var(--space-6);
    font-size: var(--size-fine);
  }
  .ns-toc--collapsible > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-toc--collapsible > summary::-webkit-details-marker {
    display: none;
  }
  .ns-toc--collapsible > summary i {
    margin-inline-start: auto;
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-toc--collapsible[open] > summary i {
    rotate: 180deg;
  }
  .ns-toc__progress {
    block-size: 2px;
    inline-size: 100%;
    margin-block-end: var(--space-3);
    background: var(--color-border);
    border-radius: var(--radius-pill);
    overflow: hidden;
  }
  .ns-toc__progress::after {
    content: "";
    display: block;
    block-size: 100%;
    inline-size: var(--ns-toc-progress, 0%);
    background: var(--color-brand-500);
    transition: inline-size var(--duration-fast) var(--ease-out);
  }
  .ns-toc--card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    background: var(--color-surface);
  }
  .ns-toc--card .ns-toc__link {
    margin-inline-start: 0;
  }
  .ns-toc--numbered {
    counter-reset: ns-toc;
  }
  .ns-toc--numbered .ns-toc__link {
    counter-increment: ns-toc;
  }
  .ns-toc--numbered .ns-toc__link::before {
    content: counter(ns-toc, decimal-leading-zero) "  ";
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-toc--numbered .ns-toc__link--sub {
    counter-increment: none;
  }
  .ns-toc--numbered .ns-toc__link--sub::before {
    content: none;
  }
  .ns-toc--inline {
    flex-direction: row;
    gap: var(--space-2);
    border-inline-start: 0;
    border-block-end: 1px solid var(--color-border);
    padding-block-end: var(--space-2);
    margin-block-end: var(--space-5);
    overflow-x: auto;
    scrollbar-width: thin;
  }
  .ns-toc--inline .ns-toc__link {
    flex: none;
    border-inline-start: 0;
    margin-inline-start: 0;
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .ns-toc--inline .ns-toc__link[aria-current="true"] {
    background: var(--color-surface-sunken);
  }
  .ns-toc--inline .ns-toc__link--sub {
    display: none;
  }
  .ns-toc--float {
    position: fixed;
    inset-block-end: var(--space-5);
    inset-inline-end: var(--space-5);
    z-index: var(--z-dropdown);
    border-inline-start: 0;
  }
  .ns-toc--float > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    box-shadow: var(--shadow-raised);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-ink);
  }
  .ns-toc--float > summary::-webkit-details-marker {
    display: none;
  }
  .ns-toc--float__panel {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-end: 0;
    inline-size: 16rem;
    max-block-size: 60dvh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
  }
  @media (min-width: 64rem) {
    .ns-toc--float {
      display: none;
    }
  }
  .ns-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-figure__frame {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-surface-sunken);
  }
  .ns-figure img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
  }
  .ns-figure--16x9 .ns-figure__frame {
    aspect-ratio: 16 / 9;
  }
  .ns-figure--4x3 .ns-figure__frame {
    aspect-ratio: 4 / 3;
  }
  .ns-figure--square .ns-figure__frame {
    aspect-ratio: 1;
  }
  .ns-figure--plain .ns-figure__frame {
    border: 0;
    border-radius: 0;
    background: none;
  }
  .ns-figure figcaption {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-video {
    position: relative;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-900);
  }
  .ns-video > iframe, .ns-video > video {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
  }
  .ns-video__poster {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    opacity: 0.85;
  }
  .ns-video__play {
    position: absolute;
    inset: 0;
    margin: auto;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    display: grid;
    place-items: center;
    border: 0;
    cursor: pointer;
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-brand-600);
    font-size: var(--size-h4);
    box-shadow: var(--shadow-raised);
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .ns-video__play:hover {
    transform: scale(1.05);
  }
  .ns-video__dur {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-end: var(--space-2);
    padding: var(--space-0-5, 2px) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-scrim);
    color: var(--color-on-dark);
    font-family: var(--font-mono);
    font-size: var(--size-label);
  }
  .ns-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr));
    gap: var(--gap-grid);
  }
  .ns-gallery--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ns-gallery--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  @media (max-width: 40rem) {
    .ns-gallery--three {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }
  }
  .ns-carousel {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }
  .ns-carousel__track {
    display: flex;
    gap: var(--gap-grid);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--space-1);
    padding-block-end: var(--space-2);
  }
  .ns-carousel__slide {
    flex: 0 0 min(16rem, 85%);
    scroll-snap-align: start;
    min-inline-size: 0;
  }
  .ns-carousel__slide--wide {
    flex-basis: min(24rem, 92%);
  }
  .ns-carousel__nav {
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
  }
  .ns-pframe {
    display: inline-block;
    max-inline-size: 100%;
    background: var(--color-surface-raised);
  }
  .ns-pframe img {
    display: block;
    inline-size: 100%;
    block-size: auto;
  }
  .ns-pframe figcaption {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    text-align: center;
  }
  .ns-pframe--photo {
    padding: var(--space-3) var(--space-3) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
  }
  .ns-pframe--photo figcaption {
    margin-block-start: var(--space-2);
  }
  .ns-pframe--polaroid {
    padding: var(--space-3) var(--space-3) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-card);
  }
  .ns-pframe--polaroid figcaption {
    margin-block-start: var(--space-4);
    font-family: var(--font-serif);
    font-size: var(--size-small);
    color: var(--color-ink);
    text-transform: none;
    letter-spacing: normal;
  }
  .ns-pframe--matted {
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
  }
  .ns-pframe--matted img {
    border: 1px solid var(--color-border);
  }
  .ns-pframe--matted figcaption {
    margin-block-start: var(--space-4);
  }
  .ns-pframe--tape {
    position: relative;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    rotate: -1.2deg;
  }
  .ns-pframe--tape::before, .ns-pframe--tape::after {
    content: "";
    position: absolute;
    inset-block-start: calc(-1 * var(--space-2));
    inline-size: var(--space-12);
    block-size: var(--space-5);
    background: color-mix(in srgb, #7cbeff 45%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-300) 45%, transparent);
    }
    border: 1px solid color-mix(in srgb, #0176d3 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      border: 1px solid color-mix(in srgb, var(--color-brand-500) 25%, transparent);
    }
  }
  .ns-pframe--tape::before {
    inset-inline-start: var(--space-4);
    rotate: -6deg;
  }
  .ns-pframe--tape::after {
    inset-inline-end: var(--space-4);
    rotate: 5deg;
  }
  .ns-pframe--tape figcaption {
    margin-block-start: var(--space-2);
  }
  .ns-pframes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-6);
    align-items: flex-start;
  }
  .ns-pframes .ns-pframe--tape:nth-child(even) {
    rotate: 1.4deg;
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-pframe--tape, .ns-pframes .ns-pframe--tape:nth-child(even) {
      rotate: none;
    }
  }
  .ns-ph {
    display: grid;
    place-items: center;
    background: var(--color-surface-sunken);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-label);
    min-block-size: var(--space-12);
  }
  .ns-ph::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, transparent calc(50% - 1px), var(--color-border) 50%, transparent calc(50% + 1px));
    opacity: 0.5;
  }
  .ns-ph {
    position: relative;
    overflow: hidden;
  }
  .ns-ph[data-ph]::after {
    content: attr(data-ph);
    position: relative;
    padding: var(--space-0-5) var(--space-2);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-ph--sm {
    min-block-size: 0;
  }
  .ns-ph--sm::before {
    display: none;
  }
  .ns-prose {
    font-size: var(--size-body);
    line-height: var(--leading-body);
    color: var(--color-ink);
    max-inline-size: var(--container-prose, 42rem);
  }
  .ns-prose > * + * {
    margin-block-start: var(--stack-md);
  }
  .ns-prose h2, .ns-prose h3, .ns-prose h4 {
    line-height: var(--leading-tight);
  }
  .ns-prose h2 {
    font-size: var(--size-h3);
    margin-block-start: var(--stack-xl);
  }
  .ns-prose h3 {
    font-size: var(--size-h4);
    margin-block-start: var(--stack-lg);
  }
  .ns-prose h4 {
    font-size: var(--size-body);
    margin-block-start: var(--stack-lg);
  }
  .ns-prose h2 + *, .ns-prose h3 + *, .ns-prose h4 + * {
    margin-block-start: var(--space-3);
  }
  .ns-prose .ns-lead {
    font-size: var(--size-body-lg);
    color: var(--color-muted);
  }
  .ns-prose a {
    color: var(--color-brand-600);
    text-decoration: underline;
    text-decoration-color: color-mix(in srgb, #0b5cab 35%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      text-decoration-color: color-mix(in srgb, var(--color-brand-600) 35%, transparent);
    }
    text-underline-offset: 0.15em;
    transition: text-decoration-color var(--duration-fast) var(--ease-out);
  }
  .ns-prose a:hover {
    text-decoration-color: currentColor;
  }
  [data-theme="dark"] .ns-prose a {
    color: var(--color-brand-300);
  }
  .ns-prose ul, .ns-prose ol {
    padding-inline-start: var(--space-5);
    margin-block-start: var(--stack-md);
  }
  .ns-prose li {
    margin-block-start: var(--space-2);
  }
  .ns-prose li::marker {
    color: var(--color-label);
  }
  .ns-prose ol {
    list-style: decimal;
  }
  .ns-prose ol > li::marker {
    font-family: var(--font-mono);
    font-size: var(--size-small);
  }
  .ns-prose ul {
    list-style: square;
  }
  .ns-prose ul ul, .ns-prose ol ol, .ns-prose ul ol, .ns-prose ol ul {
    margin-block-start: var(--space-2);
  }
  .ns-prose dt {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-block-start: var(--space-4);
  }
  .ns-prose dd {
    margin: var(--space-1) 0 0 0;
    padding-inline-start: var(--space-4);
    border-inline-start: 2px solid var(--color-border);
  }
  .ns-prose blockquote {
    margin: var(--stack-lg) 0 0 0;
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
    border-inline-start: 2px solid var(--color-brand-500);
    font-size: var(--size-body-lg);
    color: var(--color-ink);
  }
  .ns-prose blockquote p + p {
    margin-block-start: var(--space-3);
  }
  .ns-prose blockquote footer, .ns-prose blockquote cite {
    display: block;
    margin-block-start: var(--space-3);
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-prose code {
    font-size: 0.875em;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1);
  }
  .ns-prose pre {
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--space-4);
    overflow-x: auto;
    font-size: var(--size-small);
    line-height: var(--leading-body);
  }
  .ns-prose pre code {
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
  }
  .ns-prose kbd {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-block-end-width: 2px;
    border-radius: var(--radius-sm);
    padding: 0 var(--space-1-5);
  }
  .ns-prose hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--stack-xl);
  }
  .ns-prose table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--size-small);
  }
  .ns-prose th {
    text-align: start;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-prose td {
    padding: var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
    vertical-align: top;
  }
  .ns-prose img {
    inline-size: 100%;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-prose figure {
    margin: var(--stack-lg) 0 0 0;
  }
  .ns-prose figcaption {
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-prose small {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-prose mark {
    background: color-mix(in srgb, #0176d3 18%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 18%, transparent);
    }
    color: inherit;
    padding: 0 var(--space-0-5, 2px);
  }
  .ns-takeaway {
    border-inline-start: 2px solid var(--color-brand-500);
    padding-inline-start: var(--space-5);
    margin-block: var(--stack-md);
  }
  .ns-takeaway__label {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-takeaway__text {
    font-size: var(--size-body-lg);
    line-height: var(--leading-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }
  .ns-takeaway ul {
    margin-block-start: var(--space-2);
    padding-inline-start: var(--space-5);
  }
  .ns-statblock {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    margin-block: var(--stack-md);
    padding-block: var(--space-4);
    border-block: 1px solid var(--color-border);
  }
  .ns-statblock__figure {
    font-family: var(--font-heading);
    font-size: var(--size-h1);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-tight);
    color: var(--color-brand-600);
    font-variant-numeric: tabular-nums;
    flex: none;
  }
  [data-theme="dark"] .ns-statblock__figure {
    color: var(--color-brand-300);
  }
  .ns-statblock__body {
    flex: 1;
    min-inline-size: 12rem;
  }
  .ns-statblock__label {
    font-size: var(--size-body);
    color: var(--color-ink);
    text-wrap: pretty;
  }
  .ns-statblock__source {
    display: block;
    margin-block-start: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-statblock--stack {
    flex-direction: column;
    gap: var(--space-1);
  }
  .ns-statblock--stack .ns-statblock__figure {
    font-size: var(--size-display);
  }
  .ns-compare {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--space-4);
    margin-block: var(--stack-md);
  }
  .ns-compare__side {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
  }
  .ns-compare__title {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-block-end: var(--space-2);
  }
  .ns-compare__side ul {
    margin: 0;
    padding-inline-start: var(--space-5);
    font-size: var(--size-small);
  }
  .ns-compare__side li {
    margin-block-end: var(--space-1);
  }
  .ns-compare__side--verdict {
    border-color: var(--color-brand-500);
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-compare__side--verdict .ns-compare__title {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-compare__side--verdict .ns-compare__title {
    color: var(--color-brand-300);
  }
  .ns-checklist {
    list-style: none;
    margin-block: var(--stack-md);
    padding: 0;
  }
  .ns-checklist li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding-block: var(--space-2);
    border-block-start: 1px solid var(--color-border);
    font-size: var(--size-small);
  }
  .ns-checklist li:last-child {
    border-block-end: 1px solid var(--color-border);
  }
  .ns-checklist__mark {
    flex: none;
    margin-block-start: 0.15em;
    color: var(--color-border);
  }
  .ns-checklist li[data-state="done"] .ns-checklist__mark {
    color: var(--color-success);
  }
  .ns-checklist li[data-state="done"] .ns-checklist__text {
    color: var(--color-muted);
  }
  .ns-procedure {
    list-style: none;
    counter-reset: ns-proc;
    margin-block: var(--stack-md);
    padding: 0;
  }
  .ns-procedure > li {
    counter-increment: ns-proc;
    position: relative;
    padding-inline-start: var(--space-8);
    padding-block-end: var(--space-5);
  }
  .ns-procedure > li::before {
    content: counter(ns-proc, decimal-leading-zero);
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.1em;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-brand-600);
    font-variant-numeric: tabular-nums;
  }
  [data-theme="dark"] .ns-procedure > li::before {
    color: var(--color-brand-300);
  }
  .ns-procedure > li::after {
    content: "";
    position: absolute;
    inset-inline-start: 0.5rem;
    inset-block: 1.6em var(--space-1);
    inline-size: 1px;
    background: var(--color-border);
  }
  .ns-procedure > li:last-child {
    padding-block-end: 0;
  }
  .ns-procedure > li:last-child::after {
    display: none;
  }
  .ns-procedure__title {
    font-weight: var(--weight-body-strong);
    color: var(--color-ink);
  }
  .ns-terms {
    margin-block: var(--stack-md);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-sunken);
  }
  .ns-terms__label {
    display: block;
    margin-block-end: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-terms dl {
    display: grid;
    grid-template-columns: minmax(0, 10rem) minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    margin: 0;
  }
  .ns-terms dt {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    color: var(--color-ink);
  }
  .ns-terms dd {
    margin: 0;
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  @media (max-width: 47.999rem) {
    .ns-terms dl {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-1);
    }
    .ns-terms dd {
      margin-block-end: var(--space-2);
    }
  }
  .ns-related {
    margin-block: var(--stack-md);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-related__label {
    display: block;
    margin-block-end: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-related ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-related li + li {
    margin-block-start: var(--space-1);
  }
  .ns-related a {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--size-small);
    color: var(--color-brand-600);
    text-decoration: none;
  }
  [data-theme="dark"] .ns-related a {
    color: var(--color-brand-300);
  }
  .ns-related a:hover {
    text-decoration: underline;
  }
  .ns-related__kind {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-code {
    --code-surface: var(--color-surface);
    --code-bar: var(--color-surface-sunken);
    --code-ink: var(--color-ink);
    --code-rule: var(--color-border);
    --code-gutter-ink: var(--color-muted);
    --code-chrome-ink: var(--color-muted);
    --code-leading: 1.7;
    --code-size: var(--size-small);
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 1px solid var(--code-rule);
    border-radius: var(--radius-card);
    background: var(--code-surface);
    color: var(--code-ink);
    overflow: hidden;
    font-family: var(--font-mono);
  }
  .ns-code--dark, [data-theme="dark"] .ns-code {
    --code-surface: var(--color-brand-900);
    --code-bar: color-mix(in srgb, #001a3e 70%, #000);
    @supports (color: color-mix(in lab, red, red)) {
      --code-bar: color-mix(in srgb, var(--color-brand-900) 70%, #000);
    }
    --code-ink: var(--color-on-dark);
    --code-rule: var(--color-on-dark-border);
    --code-gutter-ink: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      --code-gutter-ink: color-mix(in srgb, var(--color-on-dark) 38%, transparent);
    }
    --code-chrome-ink: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      --code-chrome-ink: color-mix(in srgb, var(--color-on-dark) 72%, transparent);
    }
  }
  [data-theme="dark"] .ns-code {
    border-color: var(--color-border);
  }
  .ns-code__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--target-comfy);
    padding: var(--space-2) var(--space-3);
    background: var(--code-bar);
    border-block-end: 1px solid var(--code-rule);
  }
  .ns-code__file {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    min-inline-size: 0;
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--code-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .ns-code__file i {
    font-size: var(--size-body);
    color: var(--color-brand-500);
  }
  .ns-code__lang {
    flex: none;
    padding: 0 var(--space-1-5);
    border: 1px solid var(--code-rule);
    border-radius: var(--radius-sm);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--code-chrome-ink);
  }
  .ns-code__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
  }
  .ns-code__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-block-size: var(--target-min);
    min-inline-size: var(--target-min);
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: transparent;
    color: var(--code-chrome-ink);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-code__btn:hover {
    color: var(--code-ink);
    border-color: var(--code-rule);
  }
  .ns-code__btn[aria-pressed="true"], .ns-code__btn[aria-expanded="true"] {
    color: var(--color-brand-500);
    border-color: var(--code-rule);
  }
  .ns-code__btn i {
    font-size: var(--size-body);
  }
  .ns-code__btn[data-copied="true"] {
    color: var(--color-success-ink);
    border-color: currentColor;
  }
  .ns-code__btn[data-copied="true"] .ns-code__btn-label::after {
    content: "Copied";
  }
  .ns-code__btn[data-copied="true"] .ns-code__btn-label span {
    display: none;
  }
  .ns-code__btn--icon {
    padding-inline: var(--space-1);
  }
  .ns-code--mac .ns-code__bar {
    justify-content: start;
  }
  .ns-code__dots {
    display: inline-flex;
    gap: var(--space-1-5);
    flex: none;
  }
  .ns-code__dots i {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-error);
    opacity: 0.9;
  }
  .ns-code__dots i:nth-child(2) {
    background: var(--color-warning);
  }
  .ns-code__dots i:nth-child(3) {
    background: var(--color-success);
  }
  .ns-code--mac .ns-code__file {
    position: absolute;
    inset-inline: 0;
    justify-content: center;
    pointer-events: none;
  }
  .ns-code--mac .ns-code__bar {
    position: relative;
  }
  .ns-code--mac .ns-code__actions {
    position: relative;
  }
  .ns-code--vscode {
    --code-bar: var(--color-surface-sunken);
    @supports (color: color-mix(in lab, red, red)) {
      --code-bar: color-mix(in srgb, var(--color-surface-sunken) 88%, var(--color-brand-900));
    }
  }
  .ns-code--vscode.ns-code--dark, [data-theme="dark"] .ns-code--vscode {
    --code-bar: color-mix(in srgb, #001a3e 55%, #000);
    @supports (color: color-mix(in lab, red, red)) {
      --code-bar: color-mix(in srgb, var(--color-brand-900) 55%, #000);
    }
  }
  .ns-code__tabs {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: var(--code-bar);
    border-block-end: 1px solid var(--code-rule);
    overflow-x: auto;
    scrollbar-width: none;
  }
  .ns-code__tab {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-inline-end: 1px solid var(--code-rule);
    background: transparent;
    color: var(--code-chrome-ink);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-code__tab:hover {
    color: var(--code-ink);
  }
  .ns-code__tab[aria-selected="true"] {
    background: var(--code-surface);
    color: var(--code-ink);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-code__tab i {
    font-size: var(--size-body);
    color: var(--color-brand-500);
  }
  .ns-code--vscode .ns-code__foot {
    background: var(--color-brand-700);
    color: var(--color-on-brand);
    border-block-start-color: var(--color-brand-700);
  }
  .ns-code--vscode .ns-code__foot .ns-code__btn, .ns-code--vscode .ns-code__foot .ns-code__status, .ns-code--vscode .ns-code__foot .ns-code__status i {
    color: var(--color-on-brand);
  }
  .ns-code--vscode .ns-code__foot .ns-code__btn:hover {
    border-color: var(--color-on-dark-border);
  }
  .ns-code--vscode .ns-code__meta {
    color: var(--color-on-brand);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-brand) 78%, transparent);
    }
  }
  .ns-code__body {
    display: flex;
    align-items: stretch;
    overflow: hidden;
  }
  .ns-code__gutter {
    flex: none;
    margin: 0;
    padding: var(--space-4) var(--space-2) var(--space-4) var(--space-4);
    text-align: end;
    font-size: var(--code-size);
    line-height: var(--code-leading);
    color: var(--code-gutter-ink);
    background: var(--code-bar);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--code-bar) 55%, transparent);
    }
    border-inline-end: 1px solid var(--code-rule);
    user-select: none;
    font-variant-numeric: tabular-nums;
  }
  .ns-code__pre {
    flex: 1;
    min-inline-size: 0;
    margin: 0;
    padding: var(--space-4);
    overflow-x: auto;
    font-size: var(--code-size);
    line-height: var(--code-leading);
    tab-size: 2;
  }
  .ns-code__pre code {
    font-family: inherit;
    font-size: inherit;
    background: none;
    border: 0;
    padding: 0;
  }
  .ns-code__line {
    display: block;
    min-block-size: 1lh;
  }
  .ns-code__line--add {
    background: var(--color-code-added);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-code-added) 14%, transparent);
    }
    box-shadow: inset 2px 0 0 var(--color-code-added);
  }
  .ns-code__line--del {
    background: var(--color-code-removed);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-code-removed) 12%, transparent);
    }
    box-shadow: inset 2px 0 0 var(--color-code-removed);
  }
  .ns-code__line--mark {
    background: color-mix(in srgb, #0176d3 12%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 12%, transparent);
    }
    box-shadow: inset 2px 0 0 var(--color-brand-500);
  }
  .ns-code__line--add, .ns-code__line--del, .ns-code__line--mark {
    margin-inline: calc(var(--space-4) * -1);
    padding-inline: var(--space-4);
  }
  .ns-code[data-wrap="true"] .ns-code__pre {
    overflow-x: visible;
  }
  .ns-code[data-wrap="true"] .ns-code__pre code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
  .ns-code[data-wrap="true"] .ns-code__gutter {
    display: none;
  }
  .ns-code[data-collapsed="true"] .ns-code__body {
    max-block-size: 18rem;
    position: relative;
  }
  .ns-code[data-collapsed="true"] .ns-code__body::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    block-size: var(--space-16);
    background: linear-gradient(to bottom, transparent, var(--code-surface));
    pointer-events: none;
  }
  .ns-tok-kw {
    color: var(--color-code-keyword);
    font-weight: var(--weight-semibold);
  }
  .ns-tok-str {
    color: var(--color-code-string);
  }
  .ns-tok-com {
    color: var(--color-code-comment);
    font-style: italic;
  }
  .ns-tok-num {
    color: var(--color-code-number);
  }
  .ns-tok-fn {
    color: var(--color-code-function);
  }
  .ns-tok-type {
    color: var(--color-code-type);
  }
  .ns-tok-punct {
    color: var(--color-code-punct);
  }
  .ns-code__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-block-size: var(--target-comfy);
    padding: var(--space-2) var(--space-3);
    background: var(--code-bar);
    border-block-start: 1px solid var(--code-rule);
  }
  .ns-code__run {
    display: inline-flex;
    align-items: center;
    gap: var(--gap-inline);
    min-block-size: var(--target-min);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-brand-500);
    border-radius: var(--radius-btn);
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-code__run:hover {
    opacity: var(--opacity-press);
  }
  .ns-code__run[data-state="running"] {
    pointer-events: none;
    opacity: var(--opacity-loading);
  }
  .ns-code__meta {
    margin-inline-start: auto;
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--code-chrome-ink);
    font-variant-numeric: tabular-nums;
  }
  .ns-code__status {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--size-label);
    color: var(--code-chrome-ink);
  }
  .ns-code__status i {
    color: var(--color-success-ink);
  }
  .ns-code__out {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--code-rule);
    background: var(--code-bar);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--code-bar) 60%, transparent);
    }
    font-size: var(--size-fine);
    line-height: var(--code-leading);
    color: var(--code-chrome-ink);
    white-space: pre-wrap;
  }
  .ns-code__out[hidden] {
    display: none;
  }
  .ns-code__out b {
    color: var(--color-code-added);
    font-weight: var(--weight-label);
  }
  .ns-code__menu {
    min-inline-size: 15rem;
    position-area: block-end span-inline-start;
    position-try-fallbacks: block-start span-inline-start, block-end span-inline-end, block-start span-inline-end;
    margin-block: var(--space-1);
    max-block-size: 80vh;
    overflow-y: auto;
  }
  .ns-code__menu .ns-menu__item i {
    font-size: var(--size-body-lg);
    color: var(--color-brand-500);
  }
  .ns-code__menu-note {
    padding: var(--space-2) var(--space-3) 0;
    font-family: var(--font-sans);
    font-size: var(--size-fine);
    line-height: var(--leading-body);
    color: var(--color-muted);
    border-block-start: 1px solid var(--color-border);
    margin-block-start: var(--space-1-5);
  }
  .ns-code-inline {
    font-family: var(--font-mono);
    font-size: 0.875em;
    padding: 0 var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    color: var(--color-ink);
  }
  .ns-code--compact {
    --code-leading: 1.5;
    --code-size: var(--size-fine);
  }
  @media (max-width: 40rem) {
    .ns-code__lang, .ns-code__meta {
      display: none;
    }
    .ns-code__btn-label {
      display: none;
    }
  }
  .ns-mark {
    background-color: transparent;
    background-image: linear-gradient(to right, color-mix(in srgb, #0176d3 26%, transparent), color-mix(in srgb, #0176d3 26%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(to right, color-mix(in srgb, var(--color-brand-500) 26%, transparent), color-mix(in srgb, var(--color-brand-500) 26%, transparent));
    }
    background-repeat: no-repeat;
    background-position: 0 0.12em;
    background-size: 100% 0.72em;
    padding-inline: var(--space-1);
    color: inherit;
    box-decoration-break: clone;
  }
  @media (scripting: enabled) {
    .ns-mark--animate {
      background-size: 0 0.72em;
    }
  }
  .ns-mark--animate[data-fx-in] {
    animation: ns-fx-mark var(--duration-draw) var(--ease-draw) forwards;
  }
  .ns-mark--success {
    background-image: linear-gradient(to right, color-mix(in srgb, #2e844a 26%, transparent), color-mix(in srgb, #2e844a 26%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(to right, color-mix(in srgb, var(--color-success) 26%, transparent), color-mix(in srgb, var(--color-success) 26%, transparent));
    }
  }
  .ns-mark--warning {
    background-image: linear-gradient(to right, color-mix(in srgb, #fe9339 32%, transparent), color-mix(in srgb, #fe9339 32%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(to right, color-mix(in srgb, var(--color-warning) 32%, transparent), color-mix(in srgb, var(--color-warning) 32%, transparent));
    }
  }
  .ns-mark--error {
    background-image: linear-gradient(to right, color-mix(in srgb, #ea001e 22%, transparent), color-mix(in srgb, #ea001e 22%, transparent));
    @supports (color: color-mix(in lab, red, red)) {
      background-image: linear-gradient(to right, color-mix(in srgb, var(--color-error) 22%, transparent), color-mix(in srgb, var(--color-error) 22%, transparent));
    }
  }
  .ns-mark--solid {
    background-image: linear-gradient(to right, var(--color-brand-500), var(--color-brand-500));
    background-position: 0 0;
    background-size: 100% 100%;
    color: var(--color-on-brand);
    border-radius: var(--radius-sm);
  }
  @media (scripting: enabled) {
    .ns-mark--solid.ns-mark--animate {
      background-size: 0 100%;
    }
  }
  @keyframes ns-fx-mark {
    from {
      background-size: 0 var(--fx-mark-h, 0.72em);
    }
    to {
      background-size: 100% var(--fx-mark-h, 0.72em);
    }
  }
  .ns-mark--solid {
    --fx-mark-h: 100%;
  }
  .ns-strike {
    position: relative;
    text-decoration: none;
  }
  .ns-strike::after {
    content: "";
    position: absolute;
    inset-inline: calc(var(--space-1) * -1);
    inset-block-start: 55%;
    block-size: 2px;
    background: currentColor;
    border-radius: var(--radius-pill);
    transform: scaleX(1);
    transform-origin: left center;
  }
  @media (scripting: enabled) {
    .ns-strike--animate::after {
      transform: scaleX(0);
    }
  }
  .ns-strike--animate[data-fx-in]::after {
    animation: ns-fx-strike var(--duration-slow) var(--ease-draw) forwards;
  }
  .ns-strike--muted {
    color: var(--color-muted);
  }
  .ns-strike--error::after {
    background: var(--color-error);
  }
  @keyframes ns-fx-strike {
    from {
      transform: scaleX(0);
    }
    to {
      transform: scaleX(1);
    }
  }
  .ns-circle {
    position: relative;
    display: inline-block;
    padding: var(--space-1) var(--space-3);
  }
  .ns-circle > svg {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    overflow: visible;
    pointer-events: none;
    color: var(--color-brand-500);
  }
  .ns-circle > svg path {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: var(--fx-len, 1000);
    stroke-dashoffset: 0;
  }
  @media (scripting: enabled) {
    .ns-circle--animate > svg path {
      stroke-dashoffset: var(--fx-len, 1000);
    }
  }
  .ns-circle--animate[data-fx-in] > svg path {
    animation: ns-fx-draw var(--duration-draw) var(--ease-draw) forwards;
  }
  .ns-circle--accent > svg {
    color: var(--color-warning);
  }
  @keyframes ns-fx-draw {
    to {
      stroke-dashoffset: 0;
    }
  }
  .ns-frame {
    position: relative;
    display: inline-block;
    padding: var(--space-1-5) var(--space-3);
  }
  .ns-frame::before, .ns-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    border: 2px solid var(--color-brand-500);
  }
  .ns-frame::before {
    border-inline-end-color: transparent;
    border-block-end-color: transparent;
  }
  .ns-frame::after {
    border-inline-start-color: transparent;
    border-block-start-color: transparent;
  }
  @media (scripting: enabled) {
    .ns-frame--animate::before, .ns-frame--animate::after {
      transform: scale(0.94);
      opacity: 0;
    }
  }
  .ns-frame--animate[data-fx-in]::before {
    animation: ns-fx-frame var(--duration-slow) var(--ease-draw) forwards;
  }
  .ns-frame--animate[data-fx-in]::after {
    animation: ns-fx-frame var(--duration-slow) var(--ease-draw) var(--duration-fast) forwards;
  }
  .ns-frame--brackets::before, .ns-frame--brackets::after {
    inset: auto;
    inline-size: 40%;
    block-size: 60%;
    border-radius: 0;
  }
  .ns-frame--brackets::before {
    inset-block-start: 0;
    inset-inline-start: 0;
    border-block-end: 0;
    border-inline-end: 0;
  }
  .ns-frame--brackets::after {
    inset-block-end: 0;
    inset-inline-end: 0;
    border-block-start: 0;
    border-inline-start: 0;
  }
  .ns-frame--quiet::before, .ns-frame--quiet::after {
    border-color: var(--color-border);
    border-width: 1px;
  }
  @keyframes ns-fx-frame {
    to {
      transform: none;
      opacity: 1;
    }
  }
  .ns-scan {
    position: relative;
    display: inline-block;
    overflow: hidden;
  }
  .ns-scan::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    block-size: 28%;
    inset-block-start: -30%;
    background: linear-gradient(to bottom, transparent, color-mix(in srgb, #1b96ff 55%, transparent), transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: linear-gradient(to bottom, transparent, color-mix(in srgb, var(--color-brand-400) 55%, transparent), transparent);
    }
    mix-blend-mode: screen;
    pointer-events: none;
  }
  .ns-scan[data-fx-in]::after {
    animation: ns-fx-scan 2.4s var(--ease-out) 2;
  }
  .ns-scan--lines {
    background-image: repeating-linear-gradient(to bottom, var(--color-ink) 0 1px, transparent 1px 3px);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient(to bottom, color-mix(in srgb, var(--color-ink) 7%, transparent) 0 1px, transparent 1px 3px);
    }
    background-clip: text;
  }
  .ns-scan--loop[data-fx-in]::after {
    animation-iteration-count: infinite;
  }
  @keyframes ns-fx-scan {
    from {
      inset-block-start: -30%;
    }
    to {
      inset-block-start: 110%;
    }
  }
  .ns-reveal {
    display: block;
    overflow: hidden;
  }
  .ns-reveal > span {
    display: block;
  }
  @media (scripting: enabled) {
    .ns-reveal > span {
      transform: translateY(100%);
    }
  }
  .ns-reveal[data-fx-in] > span {
    animation: ns-fx-rise var(--duration-draw) var(--ease-draw) forwards;
  }
  .ns-reveal:nth-of-type(2)[data-fx-in] > span {
    animation-delay: 80ms;
  }
  .ns-reveal:nth-of-type(3)[data-fx-in] > span {
    animation-delay: 160ms;
  }
  @keyframes ns-fx-rise {
    to {
      transform: none;
    }
  }
  .ns-scramble {
    font-variant-ligatures: none;
    font-variant-numeric: tabular-nums;
  }
  .ns-scramble [data-fx-char] {
    color: var(--color-brand-500);
    opacity: 0.75;
  }
  .ns-scramble[data-fx-settled] [data-fx-char] {
    color: inherit;
    opacity: 1;
  }
  .ns-shift {
    view-transition-name: var(--fx-shift-name, none);
  }
  @media (prefers-reduced-motion: no-preference) {
    .ns-shift-group {
      interpolate-size: allow-keywords;
      transition: font-size var(--duration-base) var(--ease-out), line-height var(--duration-base) var(--ease-out), letter-spacing var(--duration-base) var(--ease-out), max-inline-size var(--duration-base) var(--ease-out);
    }
  }
  .ns-curve {
    display: inline-grid;
    place-items: center;
    inline-size: var(--fx-curve-size, 9rem);
    aspect-ratio: 1;
  }
  .ns-curve > svg {
    grid-area: 1 / 1;
    inline-size: 100%;
    block-size: 100%;
  }
  .ns-curve text {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    fill: currentColor;
  }
  .ns-curve__center {
    grid-area: 1 / 1;
    display: grid;
    place-items: center;
  }
  .ns-curve--spin > svg {
    animation: ns-fx-spin 18s linear infinite;
  }
  .ns-curve--spin:hover > svg {
    animation-play-state: paused;
  }
  @keyframes ns-fx-spin {
    to {
      transform: rotate(1turn);
    }
  }
  .ns-link {
    color: var(--color-brand-600);
    text-decoration: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    transition: background-size var(--duration-base) var(--ease-out), color var(--duration-fast) var(--ease-out);
    padding-block-end: 1px;
  }
  .ns-link:hover {
    background-size: 100% 2px;
  }
  [data-theme="dark"] .ns-link {
    color: var(--color-brand-300);
  }
  .ns-link--grow {
    background-size: 0 2px;
  }
  .ns-link--grow:hover, .ns-link--grow:focus-visible {
    background-size: 100% 2px;
  }
  .ns-link--wipe {
    background-position: 100% 100%;
    background-size: 100% 1px;
  }
  .ns-link--wipe:hover {
    background-position: 0 100%;
    background-size: 100% 2px;
  }
  .ns-link--roll {
    display: inline-grid;
    overflow: hidden;
    background: none;
  }
  .ns-link--roll > span {
    grid-area: 1 / 1;
    transition: transform var(--duration-base) var(--ease-out);
  }
  .ns-link--roll > span:last-child {
    transform: translateY(100%);
  }
  .ns-link--roll:hover > span:first-child {
    transform: translateY(-100%);
  }
  .ns-link--roll:hover > span:last-child {
    transform: none;
  }
  .ns-link--fill {
    background-image: linear-gradient(to right, var(--color-brand-500), var(--color-brand-500));
    background-size: 0 100%;
    background-position: 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    transition: background-size var(--duration-slow) var(--ease-out);
  }
  .ns-link--fill:hover {
    background-size: 100% 100%;
  }
  .ns-cite {
    position: relative;
    display: inline;
    font-variant-position: super;
  }
  .ns-cite__ref {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    color: var(--color-brand-600);
    text-decoration: none;
    vertical-align: super;
    line-height: 0;
    padding-inline: 1px;
    border-block-end: 1px dotted currentColor;
  }
  .ns-cite__ref:hover {
    color: var(--color-brand-500);
  }
  [data-theme="dark"] .ns-cite__ref {
    color: var(--color-brand-300);
  }
  .ns-cite__src {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    translate: -50% 0;
    inline-size: max-content;
    max-inline-size: 20rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
    font-family: var(--font-sans);
    font-size: var(--size-fine);
    line-height: var(--leading-body);
    color: var(--color-ink);
    text-align: start;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-fast) var(--ease-out), visibility var(--duration-fast) var(--ease-out);
    z-index: var(--z-dropdown);
  }
  .ns-cite:hover .ns-cite__src, .ns-cite:focus-within .ns-cite__src {
    opacity: 1;
    visibility: visible;
  }
  .ns-cite__src cite {
    display: block;
    font-style: normal;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-notes {
    border-block-start: 1px solid var(--color-border);
    padding-block-start: var(--space-4);
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-notes li {
    scroll-margin-block-start: var(--space-16);
  }
  .ns-notes li:target {
    background: color-mix(in srgb, #0176d3 10%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 10%, transparent);
    }
  }
  .ns-anchor {
    position: relative;
  }
  .ns-anchor__link {
    position: absolute;
    inset-inline-end: 100%;
    padding-inline-end: var(--space-2);
    color: var(--color-brand-500);
    text-decoration: none;
    font-family: var(--font-mono);
    font-weight: var(--weight-regular);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-anchor:hover .ns-anchor__link, .ns-anchor__link:focus-visible {
    opacity: 1;
  }
  .ns-anchor:target {
    scroll-margin-block-start: var(--space-16);
  }
  @media (max-width: 64rem) {
    .ns-anchor__link {
      position: static;
      opacity: 0.6;
      padding-inline: var(--space-2) 0;
    }
  }
  .ns-display {
    font-family: var(--font-heading);
    font-size: var(--size-display);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-display--mega {
    font-size: var(--size-mega);
    line-height: var(--leading-mega);
    letter-spacing: var(--tracking-mega);
  }
  .ns-display--outline {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--color-ink);
  }
  .ns-display--outline-brand {
    -webkit-text-stroke-color: var(--color-brand-500);
  }
  .ns-display--gradient {
    background-image: linear-gradient(120deg, var(--color-brand-500), var(--color-brand-800));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  [data-theme="dark"] .ns-display--gradient {
    background-image: linear-gradient(120deg, var(--color-brand-300), var(--color-brand-500));
  }
  .ns-display--stack {
    display: grid;
    justify-items: start;
    line-height: var(--leading-mega);
  }
  .ns-display--stack > span {
    display: block;
  }
  .ns-display--center {
    text-align: center;
    justify-items: center;
  }
  .ns-dropcap::first-letter {
    initial-letter: 3 3;
    -webkit-initial-letter: 3 3;
    font-family: var(--font-serif);
    font-weight: var(--weight-heading);
    color: var(--color-brand-600);
    margin-inline-end: var(--space-2);
  }
  .ns-pullquote {
    font-family: var(--font-serif);
    font-size: var(--size-h3);
    font-weight: var(--weight-regular);
    line-height: var(--leading-heading);
    max-inline-size: var(--measure-narrow);
    border-inline-start: 2px solid var(--color-brand-500);
    padding-inline-start: var(--space-5);
    text-wrap: balance;
  }
  .ns-kinetic {
    display: flex;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  }
  .ns-kinetic__track {
    display: flex;
    flex: none;
    gap: var(--space-6);
    padding-inline-end: var(--space-6);
    animation: marquee 28s linear infinite;
  }
  .ns-kinetic:hover .ns-kinetic__track {
    animation-play-state: paused;
  }
  .ns-kinetic__item {
    font-family: var(--font-heading);
    font-size: var(--size-h1);
    font-weight: var(--weight-heading);
    letter-spacing: var(--tracking-tight);
    white-space: nowrap;
    color: var(--color-ink);
  }
  .ns-kinetic__item--outline {
    color: transparent;
    -webkit-text-stroke: 1px var(--color-brand-500);
  }
  .ns-measure {
    max-inline-size: var(--measure-prose);
  }
  .ns-measure--narrow {
    max-inline-size: var(--measure-narrow);
  }
  .ns-balance {
    text-wrap: balance;
  }
  .ns-pretty {
    text-wrap: pretty;
  }
  .ns-hanging {
    hanging-punctuation: first last;
  }
  .ns-nums-tabular {
    font-variant-numeric: tabular-nums;
  }
  .ns-nums-old {
    font-variant-numeric: oldstyle-nums;
  }
  .ns-caps {
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    font-weight: var(--weight-medium);
  }
  .ns-label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-anim {
    animation: ns-anim-fade var(--duration-base) var(--ease-out) both;
    animation-delay: var(--_d, 0ms);
  }
  @keyframes ns-anim-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  .ns-anim--rise {
    animation-name: ns-anim-rise;
  }
  @keyframes ns-anim-rise {
    from {
      opacity: 0;
      translate: 0 0.5rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  .ns-anim--fall {
    animation-name: ns-anim-fall;
  }
  @keyframes ns-anim-fall {
    from {
      opacity: 0;
      translate: 0 -0.5rem;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  .ns-anim--enter-start {
    animation-name: ns-anim-enter-start;
  }
  @keyframes ns-anim-enter-start {
    from {
      opacity: 0;
      translate: -0.5rem 0;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  .ns-anim--enter-end {
    animation-name: ns-anim-enter-end;
  }
  @keyframes ns-anim-enter-end {
    from {
      opacity: 0;
      translate: 0.5rem 0;
    }
    to {
      opacity: 1;
      translate: 0 0;
    }
  }
  .ns-anim--expand {
    animation-name: ns-anim-expand;
    animation-duration: var(--duration-slow);
  }
  @keyframes ns-anim-expand {
    from {
      opacity: 0;
      clip-path: inset(0 0 100% 0);
    }
    to {
      opacity: 1;
      clip-path: inset(0 0 0 0);
    }
  }
  .ns-anim--draw {
    animation-name: ns-anim-draw;
    animation-duration: var(--duration-draw);
    animation-timing-function: var(--ease-draw);
  }
  @keyframes ns-anim-draw {
    from {
      clip-path: inset(0 100% 0 0);
    }
    to {
      clip-path: inset(0 0 0 0);
    }
  }
  .ns-anim--settle {
    animation-name: ns-anim-settle;
  }
  @keyframes ns-anim-settle {
    from {
      opacity: 0;
      scale: 1.02;
    }
    to {
      opacity: 1;
      scale: 1;
    }
  }
  .ns-anim-stagger > * {
    animation: ns-anim-rise var(--duration-base) var(--ease-out) both;
  }
  .ns-anim-stagger > :nth-child(1) {
    animation-delay: 0ms;
  }
  .ns-anim-stagger > :nth-child(2) {
    animation-delay: 40ms;
  }
  .ns-anim-stagger > :nth-child(3) {
    animation-delay: 80ms;
  }
  .ns-anim-stagger > :nth-child(4) {
    animation-delay: 120ms;
  }
  .ns-anim-stagger > :nth-child(5) {
    animation-delay: 160ms;
  }
  .ns-anim-stagger > :nth-child(n+6) {
    animation-delay: 200ms;
  }
  @supports (animation-timeline: view()) {
    .ns-anim--onview, .ns-anim-stagger--onview > * {
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
    .ns-anim-stagger--onview > * {
      animation-delay: 0s;
    }
  }
}
@view-transition {
  navigation: auto;
}
@layer ns-components {
  ::view-transition-old(root), ::view-transition-new(root) {
    animation-duration: var(--duration-base);
    animation-timing-function: var(--ease-out);
  }
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) {
      animation: none;
    }
  }
  .ns-auth {
    min-block-size: 100dvh;
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--gutter);
    background: var(--color-surface);
  }
  .ns-auth__card {
    inline-size: 100%;
    max-inline-size: 24rem;
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .ns-auth__brand {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    margin-block-end: var(--space-2);
  }
  .ns-auth__brand img {
    inline-size: 1.75rem;
    block-size: 1.75rem;
  }
  .ns-auth__brand strong {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
  }
  .ns-auth__kicker {
    font-family: var(--font-mono);
    font-size: var(--size-mono);
    color: var(--color-muted);
  }
  .ns-auth__kicker::before {
    content: "// ";
    color: var(--color-label);
  }
  .ns-auth__title {
    font-size: var(--size-h2);
    line-height: var(--leading-tight);
  }
  .ns-auth__sub {
    color: var(--color-muted);
    font-size: var(--size-small);
    line-height: var(--leading-body);
  }
  .ns-auth__form {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .ns-auth__meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--size-small);
  }
  .ns-auth__meta a {
    color: var(--color-brand-600);
    text-decoration: none;
  }
  .ns-auth__meta a:hover {
    text-decoration: underline;
  }
  [data-theme="dark"] .ns-auth__meta a {
    color: var(--color-brand-300);
  }
  .ns-auth__divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-auth__divider::before, .ns-auth__divider::after {
    content: "";
    flex: 1;
    block-size: 1px;
    background: var(--color-border);
  }
  .ns-auth__alt {
    font-size: var(--size-small);
    color: var(--color-muted);
    text-align: center;
    padding-block-start: var(--space-2);
    border-block-start: 1px solid var(--color-border);
  }
  .ns-auth__alt a {
    color: var(--color-brand-600);
    font-weight: var(--weight-medium);
    text-decoration: none;
  }
  .ns-auth__alt a:hover {
    text-decoration: underline;
  }
  [data-theme="dark"] .ns-auth__alt a {
    color: var(--color-brand-300);
  }
  .ns-auth__sent {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--pad-card-lg);
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-success);
    border-radius: var(--radius-card);
  }
  .ns-auth__sent-title {
    display: flex;
    align-items: center;
    gap: var(--gap-inline);
    font-weight: var(--weight-semibold);
  }
  .ns-auth__sent-title i {
    color: var(--color-success-ink);
  }
  .ns-auth__sent p {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-auth__sent code {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    color: var(--color-ink);
  }
  .ns-auth__rules {
    display: flex;
    flex-direction: column;
    gap: var(--gap-field);
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-auth--split {
    place-items: stretch;
    padding: 0;
    grid-template-columns: 1fr 1fr;
  }
  .ns-auth__aside {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-12);
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--space-8) var(--space-8);
  }
  .ns-auth__aside .ns-auth__kicker {
    color: var(--color-brand-300);
  }
  .ns-auth__aside h2 {
    font-size: var(--size-h2);
  }
  .ns-auth__aside p {
    color: var(--color-brand-200);
    font-size: var(--size-small);
    max-inline-size: 26rem;
  }
  .ns-auth--split .ns-auth__pane {
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--gutter);
  }
  @media (max-width: 63.999rem) {
    .ns-auth--split {
      grid-template-columns: 1fr;
    }
    .ns-auth__aside {
      display: none;
    }
  }
  .ns-tickets {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-ticket {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--pad-card);
    text-decoration: none;
    color: var(--color-ink);
    border-inline-start: 2px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-ticket + .ns-ticket {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-ticket:hover {
    background: var(--color-surface-sunken);
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-ticket:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-ticket__id {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    white-space: nowrap;
  }
  .ns-ticket__body {
    min-inline-size: 0;
  }
  .ns-ticket__subject {
    font-weight: var(--weight-medium);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-ticket__excerpt {
    font-size: var(--size-small);
    color: var(--color-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-ticket__when {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ns-ticket--urgent {
    border-inline-start: 3px solid var(--color-error);
  }
  .ns-ticket--urgent:hover {
    border-inline-start-color: var(--color-error);
  }
  @media (max-width: 39.999rem) {
    .ns-ticket {
      grid-template-columns: 1fr auto;
      row-gap: var(--space-1);
    }
    .ns-ticket__body {
      grid-column: 1 / -1;
    }
    .ns-ticket__when {
      display: none;
    }
  }
  .ns-thread {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .ns-msg {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
  }
  .ns-msg__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--pad-card);
    border-block-end: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-msg__head time {
    margin-inline-start: auto;
    color: var(--color-muted);
    text-transform: none;
    letter-spacing: normal;
  }
  .ns-msg__body {
    padding: var(--pad-card);
    font-size: var(--size-small);
    line-height: var(--leading-body);
  }
  .ns-msg__body p + p {
    margin-block-start: var(--space-3);
  }
  .ns-msg--agent {
    border-inline-start: 3px solid var(--color-brand-500);
  }
  .ns-msg--note {
    border-inline-start: 3px solid var(--color-warning);
    background: var(--color-surface-sunken);
  }
  .ns-ticket-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    max-inline-size: var(--container-narrow);
  }
  .ns-priority-row {
    display: flex;
    gap: 0;
  }
  .ns-priority-row .ns-priority {
    flex: 1;
  }
  .ns-priority {
    position: relative;
    display: block;
    cursor: pointer;
  }
  .ns-priority input {
    position: absolute;
    opacity: 0;
    inset: 0;
  }
  .ns-priority span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-inline);
    min-block-size: var(--target-comfy);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-priority + .ns-priority span {
    margin-inline-start: -1px;
  }
  .ns-priority:first-child span {
    border-start-start-radius: var(--radius-btn);
    border-end-start-radius: var(--radius-btn);
  }
  .ns-priority:last-child span {
    border-start-end-radius: var(--radius-btn);
    border-end-end-radius: var(--radius-btn);
  }
  .ns-priority input:checked + span {
    position: relative;
    z-index: var(--z-raised);
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
  }
  [data-theme="dark"] .ns-priority input:checked + span {
    color: var(--color-brand-300);
  }
  .ns-priority input:focus-visible + span {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
    z-index: var(--z-raised);
  }
  .ns-priority--urgent input:checked + span {
    border-color: var(--color-error);
    color: var(--color-error-ink);
    background: color-mix(in srgb, #ea001e 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-error) 6%, transparent);
    }
  }
  .ns-attach {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-inline);
    padding: var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-muted);
    font-size: var(--size-small);
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-attach:hover, .ns-attach:focus-within {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-attach input {
    position: absolute;
    opacity: 0;
    inline-size: 1px;
    block-size: 1px;
  }
  .ns-help-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--pad-card-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    text-decoration: none;
    color: var(--color-ink);
    box-shadow: inset 0 2px 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-help-card:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-help-card:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-help-card i {
    font-size: var(--size-h3);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-help-card i {
    color: var(--color-brand-300);
  }
  .ns-help-card strong {
    font-weight: var(--weight-semibold);
  }
  .ns-help-card p {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-ai {
    display: grid;
    grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
    block-size: 100dvh;
    overflow: hidden;
    background: var(--color-surface);
  }
  .ns-ai--docked {
    block-size: calc(100dvh - var(--navbar-h));
  }
  .ns-ai--embedded {
    block-size: auto;
    min-block-size: 0;
    overflow: visible;
    grid-template-columns: minmax(0, 1fr);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-ai__side {
    display: flex;
    flex-direction: column;
    min-block-size: 0;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-ai[data-collapsed="true"] {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .ns-ai[data-collapsed="true"] .ns-ai__side {
    overflow: hidden;
    border-inline-end-color: transparent;
  }
  .ns-ai__main {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .ns-ai--embedded .ns-ai__main {
    grid-template-rows: auto auto auto;
  }
  .ns-ai__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--gutter);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-ai__bar-title {
    font-weight: var(--weight-medium);
    font-size: var(--size-small);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-ai__bar-meta {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    white-space: nowrap;
  }
  .ns-ai__bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    margin-inline-start: auto;
  }
  .ns-ai__scroll {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-10) var(--gutter);
    scroll-behavior: smooth;
  }
  .ns-ai--embedded .ns-ai__scroll {
    max-block-size: 60vh;
    padding: var(--pad-card);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-ai__scroll {
      scroll-behavior: auto;
    }
  }
  .ns-ai__inner {
    max-inline-size: var(--container-prose);
    margin-inline: auto;
  }
  .ns-ai__foot {
    padding: var(--space-4) var(--gutter) var(--space-3);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-ai__note {
    max-inline-size: var(--container-prose);
    margin-inline: auto;
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    text-align: center;
  }
  @media (max-width: 63.999rem) {
    .ns-ai, .ns-ai[data-collapsed="true"] {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-ai__side {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      inline-size: var(--sidebar-w);
      max-inline-size: 85vw;
      z-index: var(--z-dropdown);
      transform: translateX(-100%);
      transition: transform var(--duration-base) var(--ease-out);
    }
    .ns-ai[data-collapsed="false"] .ns-ai__side {
      transform: translateX(0);
      box-shadow: var(--shadow-raised);
    }
    .ns-ai[data-collapsed="true"] .ns-ai__side {
      overflow: hidden;
    }
    .ns-ai__scroll, .ns-ai__foot {
      padding-inline: var(--gutter-md);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-ai__side {
      transition: none;
    }
  }
  .ns-aiside__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-4) var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-aiside__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aiside__brand .ph-sparkle {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-aiside__brand .ph-sparkle {
    color: var(--color-brand-300);
  }
  .ns-aiside__list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-block: var(--space-2);
  }
  .ns-aiside__group {
    padding-block-start: var(--space-3);
  }
  .ns-aiside__label {
    padding: var(--space-1) var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aiside__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-4);
    border-inline-start: 2px solid transparent;
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--size-small);
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-aiside__item:hover {
    background: var(--color-surface);
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-aiside__item:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-aiside__item[aria-current="true"] {
    background: var(--color-surface);
    border-inline-start-color: var(--color-brand-500);
    font-weight: var(--weight-medium);
  }
  .ns-aiside__title {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-aiside__course {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-aiside__when {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-aiside__foot {
    border-block-start: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
  }
  .ns-aiside__quota {
    display: flex;
    flex-direction: column;
    gap: var(--space-1-5);
  }
  .ns-aiside__quota-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aiside__quota-row b {
    color: var(--color-ink);
    font-weight: var(--weight-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-aiturn {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
  }
  .ns-aiturn + .ns-aiturn {
    margin-block-start: var(--space-10);
  }
  .ns-aiturn__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aiturn__head time {
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-aiturn:hover .ns-aiturn__head time, .ns-aiturn:focus-within .ns-aiturn__head time {
    opacity: 1;
  }
  @media (hover: none) {
    .ns-aiturn__head time {
      opacity: 1;
    }
  }
  .ns-aiturn__head time {
    margin-inline-start: auto;
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-aiturn__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-5);
    block-size: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-brand-600);
    background: var(--color-surface);
    font-size: var(--size-small);
  }
  [data-theme="dark"] .ns-aiturn__mark {
    color: var(--color-brand-300);
  }
  .ns-aiturn__body {
    font-size: var(--size-body);
    line-height: var(--leading-body);
  }
  .ns-aiturn__body > * + * {
    margin-block-start: var(--space-5);
  }
  .ns-aiturn--user .ns-aiturn__body {
    max-inline-size: var(--measure-narrow);
    padding: var(--space-3) var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-sunken);
    font-size: var(--size-small);
  }
  .ns-aiturn--agent .ns-aiturn__body {
    max-inline-size: var(--measure-prose);
  }
  .ns-aiturn__actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-aiturn:hover .ns-aiturn__actions, .ns-aiturn:focus-within .ns-aiturn__actions {
    opacity: 1;
  }
  @media (hover: none) {
    .ns-aiturn__actions {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-aiturn__actions {
      transition: none;
    }
  }
  .ns-aiturn__note {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-aithinking {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aithinking__dots {
    display: inline-flex;
    gap: var(--space-1);
  }
  .ns-aithinking__dots i {
    inline-size: var(--space-1-5);
    block-size: var(--space-1-5);
    background: var(--color-brand-500);
    border-radius: var(--radius-sm);
    opacity: var(--opacity-disabled);
    animation: ns-ai-pulse 1.2s var(--ease-out) infinite;
  }
  .ns-aithinking__dots i:nth-child(2) {
    animation-delay: 0.15s;
  }
  .ns-aithinking__dots i:nth-child(3) {
    animation-delay: 0.3s;
  }
  @keyframes ns-ai-pulse {
    0%, 100% {
      opacity: var(--opacity-disabled);
    }
    50% {
      opacity: 1;
    }
  }
  .ns-aitrace {
    margin-block-start: var(--space-2);
  }
  .ns-aitrace > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    list-style: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-aitrace > summary::-webkit-details-marker {
    display: none;
  }
  .ns-aitrace > summary:hover {
    color: var(--color-brand-600);
  }
  .ns-aitrace > summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-aitrace > summary .ph-caret-right {
    transition: transform var(--duration-fast) var(--ease-out);
  }
  .ns-aitrace[open] > summary .ph-caret-right {
    transform: rotate(90deg);
  }
  [data-theme="dark"] .ns-aitrace > summary:hover {
    color: var(--color-brand-300);
  }
  .ns-aitrace__steps {
    margin-block-start: var(--space-3);
    padding-inline-start: var(--space-4);
    border-inline-start: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-aitrace__step {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
  }
  .ns-aitrace__step > i:first-child {
    color: var(--color-success);
    font-size: var(--size-label);
  }
  .ns-aitrace__step b {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aitool {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    margin-inline-end: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-aitool[data-state="running"] {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-aitool[data-state="running"] {
    color: var(--color-brand-300);
  }
  .ns-aitool[data-state="running"] i:first-child {
    animation: ns-ai-spin var(--duration-slow) linear infinite;
  }
  .ns-aitool[data-state="done"] i:first-child {
    color: var(--color-success);
  }
  .ns-aitool[data-state="failed"] {
    color: var(--color-error-ink);
  }
  .ns-aitool__count {
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  @keyframes ns-ai-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-aithinking__dots i, .ns-aitool[data-state="running"] i:first-child {
      animation: none;
    }
  }
  .ns-aistream {
    display: inline-block;
    inline-size: 0.5em;
    block-size: 1em;
    vertical-align: -0.15em;
    background: var(--color-brand-500);
    animation: ns-ai-caret 1.1s step-end infinite;
  }
  @keyframes ns-ai-caret {
    0%, 50% {
      opacity: 1;
    }
    50.01%, 100% {
      opacity: 0;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-aistream {
      animation: none;
      opacity: 1;
    }
  }
  .ns-aiattach {
    display: grid;
    gap: var(--gap-card);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  }
  .ns-aiattach--single {
    grid-template-columns: minmax(0, 1fr);
  }
  .ns-aiattach__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-block-end: var(--space-2);
  }
  .ns-aisnippet {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--pad-card);
    align-items: start;
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    text-decoration: none;
    color: var(--color-ink);
    box-shadow: inset 0 2px 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-aisnippet:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-aisnippet:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-aisnippet__thumb {
    inline-size: var(--space-20);
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
  }
  .ns-aisnippet__kicker {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    display: block;
  }
  .ns-aisnippet__title {
    display: block;
    font-weight: var(--weight-medium);
    margin-block-start: var(--space-0-5);
  }
  .ns-aisnippet__desc {
    font-size: var(--size-small);
    color: var(--color-muted);
    margin-block-start: var(--space-1);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .ns-aisnippet__meta {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  @media (max-width: 39.999rem) {
    .ns-aisnippet {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-aisnippet__thumb {
      inline-size: 100%;
    }
  }
  .ns-aiimage {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-aiimage img {
    display: block;
    inline-size: 100%;
  }
  .ns-aiimage__cap {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--pad-card);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-aiimage__cap .ns-badge {
    margin-inline-start: auto;
  }
  .ns-aipath {
    border-block: 1px solid var(--color-border);
    background: none;
  }
  .ns-aipath__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) 0;
  }
  .ns-aipath__title {
    font-weight: var(--weight-semibold);
  }
  .ns-aipath__meta {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    white-space: nowrap;
  }
  .ns-aipath__steps {
    display: flex;
    flex-direction: column;
  }
  .ns-aipath__step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--space-2);
    border-inline-start: 2px solid transparent;
    color: var(--color-ink);
    text-decoration: none;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-aipath__step + .ns-aipath__step {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-aipath__step:hover {
    background: var(--color-surface-sunken);
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-aipath__step:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-aipath__index {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-aipath__name {
    display: block;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
  }
  .ns-aipath__sub {
    display: block;
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-aipath__when {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    white-space: nowrap;
  }
  .ns-aipath__step[data-state="done"] .ns-aipath__index {
    color: var(--color-success);
  }
  .ns-aipath__step[data-state="done"] .ns-aipath__name {
    color: var(--color-muted);
  }
  .ns-aipath__foot {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) 0 0;
    border-block-start: 1px solid var(--color-border);
  }
  .ns-aipath__foot .ns-aipath__meta {
    margin-inline-start: 0;
  }
  .ns-aisource {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-aisource__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aisource__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    font-size: var(--size-label);
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-aisource__item + .ns-aisource__item {
    margin-inline-start: var(--space-3);
  }
  .ns-aisource__item:hover {
    color: var(--color-brand-600);
    text-decoration: underline;
    text-underline-offset: 0.2em;
  }
  .ns-aisource__item:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  [data-theme="dark"] .ns-aisource__item:hover {
    color: var(--color-brand-300);
  }
  .ns-aisource__num {
    font-family: var(--font-mono);
    font-weight: var(--weight-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-aicheck {
    border-inline-start: 2px solid var(--color-brand-500);
    padding: var(--space-1) 0 var(--space-1) var(--pad-card);
  }
  .ns-aicheck__kicker {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aicheck__q {
    font-weight: var(--weight-medium);
    margin-block: var(--space-2) var(--space-3);
  }
  .ns-aicheck__options {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-aicheck__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: var(--space-4);
  }
  .ns-aierror {
    border: 1px solid var(--color-border);
    border-inline-start: 3px solid var(--color-error);
    border-radius: var(--radius-card);
    padding: var(--pad-card);
    background: var(--color-surface-raised);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-aierror__head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-error-ink);
  }
  .ns-aierror__text {
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-aierror__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-1);
  }
  .ns-aierror__code {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-aierror--limit {
    border-inline-start-color: var(--color-warning);
  }
  .ns-aierror--limit .ns-aierror__head {
    color: var(--color-warning-ink);
  }
  .ns-aierror--offline {
    border-inline-start-color: var(--color-muted);
  }
  .ns-aierror--offline .ns-aierror__head {
    color: var(--color-muted);
  }
  .ns-aiwelcome {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    padding-block: var(--space-10);
    text-align: center;
  }
  .ns-aiwelcome__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-12);
    block-size: var(--space-12);
    margin-inline: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-brand-600);
    font-size: var(--size-h2);
    background: var(--color-surface-raised);
  }
  [data-theme="dark"] .ns-aiwelcome__mark {
    color: var(--color-brand-300);
  }
  .ns-aiwelcome__title {
    font-family: var(--font-heading);
    font-size: var(--size-h2);
    line-height: var(--leading-heading);
  }
  .ns-aiwelcome__lede {
    color: var(--color-muted);
    max-inline-size: var(--measure-narrow);
    margin-inline: auto;
  }
  .ns-aisuggest {
    display: grid;
    gap: var(--gap-card);
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    text-align: start;
  }
  .ns-aisuggest__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    text-align: start;
    cursor: pointer;
    color: var(--color-ink);
    box-shadow: inset 0 2px 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-aisuggest__item:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-aisuggest__item:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-aisuggest__item:active {
    opacity: var(--opacity-press);
  }
  .ns-aisuggest__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aisuggest__text {
    font-size: var(--size-small);
    line-height: var(--leading-body);
  }
  .ns-aicomposer {
    max-inline-size: var(--container-prose);
    margin-inline: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-aicomposer:focus-within {
    border-color: var(--color-brand-500);
    box-shadow: var(--shadow-focus);
  }
  .ns-aicomposer[aria-disabled="true"] {
    opacity: var(--opacity-disabled);
  }
  .ns-aicomposer__area {
    display: block;
    inline-size: 100%;
    padding: var(--space-3) var(--pad-card) var(--space-2);
    border: 0;
    background: none;
    color: inherit;
    font-family: inherit;
    font-size: var(--size-body);
    line-height: var(--leading-body);
    resize: none;
    field-sizing: content;
    min-block-size: var(--space-10);
    max-block-size: 12rem;
  }
  .ns-aicomposer__area:focus {
    outline: none;
  }
  .ns-aicomposer__area::placeholder {
    color: var(--color-muted);
  }
  .ns-aicomposer__bar {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border-block-start: 1px solid var(--color-border);
  }
  .ns-aicomposer__spacer {
    margin-inline-start: auto;
  }
  .ns-aicomposer__hint {
    margin-inline: var(--space-3) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    white-space: nowrap;
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-aicomposer:focus-within .ns-aicomposer__hint {
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-aicomposer__hint {
      transition: none;
    }
  }
  .ns-aicomposer__count {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-aicomposer__count[data-state="near"] {
    color: var(--color-warning-ink);
  }
  .ns-aicomposer__count[data-state="over"] {
    color: var(--color-error-ink);
  }
  .ns-aifiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) var(--pad-card) 0;
  }
  .ns-aifile {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    max-inline-size: 100%;
  }
  .ns-aifile__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--color-ink);
  }
  .ns-aifile__size {
    font-variant-numeric: tabular-nums;
  }
  .ns-aifile[data-state="uploading"] .ph-circle-notch {
    animation: ns-ai-spin var(--duration-slow) linear infinite;
  }
  .ns-aifile[data-state="failed"] {
    border-color: var(--color-error);
    color: var(--color-error-ink);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-aifile[data-state="uploading"] .ph-circle-notch {
      animation: none;
    }
  }
  .ns-aicontext {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid var(--color-brand-500);
    border-radius: var(--radius-pill);
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-aicontext {
    color: var(--color-brand-300);
  }
  .ns-aicontext__x {
    display: inline-flex;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit;
    opacity: var(--opacity-loading);
  }
  .ns-aicontext__x:hover {
    opacity: 1;
  }
  .ns-aimode {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-aimode:hover {
    border-color: var(--color-border);
    color: var(--color-ink);
  }
  .ns-aimode:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-aimode[aria-expanded="true"] {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-aimode[aria-expanded="true"] {
    color: var(--color-brand-300);
  }
  .ns-aiset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-aiset__legend {
    padding: var(--space-2-5) var(--pad-card);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-aiset__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-4);
    padding: var(--pad-card);
  }
  .ns-aiset__row + .ns-aiset__row {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-aiset__name {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
  }
  .ns-aiset__desc {
    font-size: var(--size-label);
    color: var(--color-muted);
    margin-block-start: var(--space-1);
    line-height: var(--leading-body);
  }
  .ns-aiset__control {
    justify-self: end;
  }
  .ns-aiset__row--danger .ns-aiset__name {
    color: var(--color-error-ink);
  }
  @media (max-width: 39.999rem) {
    .ns-aiset__row {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-aiset__control {
      justify-self: start;
    }
  }
  .ns-aigate {
    max-inline-size: var(--measure-narrow);
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--pad-card-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    text-align: center;
  }
  .ns-aigate__title {
    font-family: var(--font-heading);
    font-size: var(--size-h3);
    line-height: var(--leading-heading);
  }
  .ns-aigate__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    line-height: var(--leading-body);
  }
  .ns-aigate__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    text-align: start;
    font-size: var(--size-small);
  }
  .ns-aigate__list li {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
  }
  .ns-aigate__list i {
    color: var(--color-success);
    font-size: var(--size-label);
  }
  .ns-aigate__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-askai {
    inline-size: min(22rem, 92vw);
    padding: var(--space-3);
    inset-block-start: auto;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 0;
    inset-inline-end: auto;
    transform-origin: bottom left;
    translate: 0 var(--space-2);
  }
  .ns-usermenu:has(> [aria-expanded="true"]) > .ns-askai {
    translate: 0 0;
  }
  .ns-askai__field {
    inline-size: 100%;
    margin-block-end: var(--space-2);
    font-size: var(--size-small);
    resize: vertical;
  }
  .ns-askai__cue {
    margin-inline-start: auto;
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-askai .ns-menu__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-player {
    display: grid;
    grid-template-columns: var(--ns-rail-w) minmax(0, 1fr);
    --ns-rail-w: 17rem;
    --ns-toc-w: clamp(10rem, 15vw, 15rem);
    --ns-read-pad: var(--space-8);
    block-size: calc(100dvh - var(--navbar-h));
    overflow: hidden;
  }
  [data-player="fixed"] {
    overflow: hidden;
  }
  .ns-player__main {
    grid-column: 2;
    grid-row: 1;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .ns-player__stage {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
    max-block-size: 62dvh;
  }
  .ns-player__stage > video, .ns-player__stage > iframe, .ns-player__stage > img {
    object-fit: contain;
  }
  .ns-player__nav {
    margin-block-start: var(--space-6);
  }
  .ns-player--scroll {
    block-size: auto;
    min-block-size: calc(100dvh - var(--navbar-h));
    overflow: visible;
  }
  .ns-player--scroll .ns-player__main {
    overflow: visible;
  }
  .ns-player--scroll .ns-player__stage {
    position: relative;
    max-block-size: none;
  }
  .ns-player--scroll .ns-player__stage > video, .ns-player--scroll .ns-player__stage > iframe, .ns-player--scroll .ns-player__stage > img {
    object-fit: cover;
  }
  .ns-player--fixed {
    block-size: calc(100dvh - var(--navbar-h));
    overflow: hidden;
  }
  .ns-player--article .ns-player__stage {
    display: none;
  }
  .ns-player__reading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--ns-toc-w);
    gap: var(--space-8);
    align-items: start;
    padding-inline: var(--ns-read-pad, var(--pad-card));
  }
  .ns-player__head, .ns-player__nav {
    padding-inline: var(--ns-read-pad);
  }
  .ns-player__main > .ns-breadcrumb {
    padding: var(--space-4) var(--ns-read-pad) var(--space-5);
  }
  .ns-player__main > .ns-breadcrumb + .ns-player__head {
    padding-block-start: 0;
  }
  .ns-player__reading .ns-player__body, .ns-player__reading .ns-player__head {
    max-inline-size: none;
    padding-inline: 0;
  }
  .ns-player__reading .ns-player__body > .ns-prose {
    max-inline-size: none;
  }
  .ns-player__reading .ns-player__body > * + * {
    margin-block-start: var(--stack-xl);
  }
  .ns-player__toc {
    position: sticky;
    inset-block-start: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-player__toc > * + .ns-toc, .ns-player__toc > * + .ns-sponsor, .ns-player__toc > * + .ns-adslot {
    margin-block-start: var(--space-6);
  }
  .ns-player__toc > .ns-toc__title {
    padding-block-end: var(--space-1);
  }
  .ns-player__toc--inline {
    display: none;
  }
  .ns-player--article .ns-player__title {
    font-size: var(--size-h2);
  }
  .ns-player__nav {
    padding-block: var(--space-2);
    justify-content: space-between;
    gap: var(--space-4);
  }
  .ns-player[data-rail="collapsed"] {
    grid-template-columns: 0 minmax(0, 1fr);
  }
  .ns-player[data-rail="collapsed"] .ns-player__side {
    overflow: hidden;
    border-inline-end-color: transparent;
  }
  .ns-player__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-900);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-player__stage > video, .ns-player__stage > iframe, .ns-player__stage > img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
    object-fit: cover;
  }
  .ns-player__stage--player {
    aspect-ratio: auto;
    max-block-size: none;
    background: none;
    border-block-end: 0;
  }
  .ns-player__stage--player > .ns-vplayer {
    border: 0;
    border-radius: 0;
    border-block-end: 1px solid var(--color-border);
  }
  .ns-player__stage--player .ns-vplayer__stage {
    max-block-size: none;
  }
  .ns-player__head {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--pad-card) var(--pad-card) var(--space-3);
  }
  .ns-player__kicker {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-label);
  }
  .ns-player__title {
    font-size: var(--size-h3);
    line-height: var(--leading-heading);
  }
  .ns-player__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-5);
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-player__meta > * {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
  }
  .ns-player__meta i {
    font-size: var(--size-small);
    color: var(--color-label);
  }
  .ns-player__nav {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-start: auto;
    padding: var(--space-2-5) var(--pad-card);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-player__nav .ns-lesson-nav {
    border-block-start: 0;
    padding-block: 0;
    inline-size: 100%;
  }
  @media (max-width: 47.999rem) {
    .ns-player__nav {
      padding-inline: var(--gutter-md);
    }
  }
  .ns-player__body {
    padding: 0 var(--pad-card) var(--pad-card);
    max-inline-size: var(--container-prose);
  }
  .ns-player__body--wide {
    max-inline-size: none;
  }
  .ns-player__body--wide .ns-prose {
    max-inline-size: var(--container-prose);
  }
  .ns-player__body--wide .ns-tabpanel > * + * {
    margin-block-start: var(--space-5);
  }
  .ns-lprogress {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
  }
  .ns-lprogress__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    flex: none;
  }
  .ns-lprogress__time {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    flex: none;
  }
  .ns-lprogress--video .ns-lprogress__track {
    position: relative;
    flex: 1;
    block-size: 0.375rem;
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    overflow: hidden;
  }
  .ns-lprogress--video .ns-lprogress__fill {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    inline-size: var(--fx-progress, 0%);
    background: var(--color-brand-500);
    border-radius: var(--radius-pill);
    transition: inline-size var(--duration-base) linear;
  }
  .ns-lprogress__chapter {
    position: absolute;
    inset-block: 0;
    inline-size: 2px;
    inset-inline-start: var(--fx-at, 0%);
    background: var(--color-surface);
    opacity: 0.9;
  }
  .ns-lprogress--article {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-raised);
    display: block;
    block-size: 2px;
    background: var(--color-surface-sunken);
  }
  .ns-lprogress--article::after {
    content: "";
    display: block;
    block-size: 100%;
    inline-size: var(--fx-progress, 0%);
    background: var(--color-brand-500);
  }
  .ns-lprogress--quiz .ns-lprogress__pips {
    display: flex;
    gap: var(--space-1);
    flex: 1;
    flex-wrap: wrap;
  }
  .ns-lprogress__pip {
    inline-size: var(--space-2-5);
    block-size: var(--space-2-5);
    border-radius: var(--radius-pill);
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
  }
  .ns-lprogress__pip[data-state="correct"] {
    background: var(--color-success);
    border-color: var(--color-success);
  }
  .ns-lprogress__pip[data-state="wrong"] {
    background: var(--color-error);
    border-color: var(--color-error);
  }
  .ns-lprogress__pip[data-state="current"] {
    border-color: var(--color-brand-500);
    box-shadow: 0 0 0 2px color-mix(in srgb, #0176d3 25%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand-500) 25%, transparent);
    }
  }
  .ns-lprogress__score {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    color: var(--color-ink);
    flex: none;
  }
  .ns-player__side {
    grid-column: 1;
    grid-row: 1;
    border-inline-end: 1px solid var(--color-border);
    background: var(--color-surface);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    min-block-size: 0;
  }
  .ns-player--scroll .ns-player__side {
    position: sticky;
    inset-block-start: var(--navbar-h);
    max-block-size: calc(100dvh - var(--navbar-h));
  }
  .ns-player__side-cta {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--pad-card);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-player__side-cta .ns-progress {
    inline-size: 100%;
  }
  .ns-player__side-cta-meta {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-label);
  }
  .ns-player__side-cta-meta b {
    color: var(--color-ink);
    font-weight: var(--weight-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-player__side-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3) var(--space-2) var(--pad-card);
    border-block-end: 1px solid var(--color-border);
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-label);
  }
  .ns-player__side-head span {
    margin-inline-start: auto;
  }
  .ns-player__side-head .ns-navicon {
    flex: none;
    margin-inline-start: 0;
  }
  .ns-player__railopen {
    position: absolute;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-2);
    z-index: var(--z-raised);
    display: none;
  }
  .ns-player[data-rail="collapsed"] .ns-player__railopen {
    display: inline-flex;
  }
  .ns-player[data-rail="collapsed"] .ns-player__main {
    position: relative;
  }
  .ns-player[data-rail="collapsed"] .ns-player__main > .ns-breadcrumb {
    padding-inline-start: calc(var(--ns-read-pad) + var(--space-8));
  }
  .ns-player__side-foot {
    display: flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-player__side-foot .ns-share {
    gap: 0;
    min-inline-size: 0;
  }
  .ns-player__side-foot .ns-share__label {
    display: none;
  }
  .ns-player__side-foot .ns-usermenu {
    margin-inline-start: auto;
    flex: none;
  }
  .ns-player__side-foot .ns-usermenu > .ns-btn {
    padding-inline: var(--space-2);
    gap: var(--space-1-5);
  }
  .ns-player__side-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2-5) var(--space-3);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
    font-size: var(--size-label);
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-player__side-brand:hover {
    color: var(--color-ink);
  }
  .ns-player__side-brand:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-player__side-brand img {
    inline-size: var(--space-5);
    block-size: var(--space-5);
    flex: none;
  }
  .ns-player__side-brand b {
    font-weight: var(--weight-semibold);
    color: var(--color-ink);
  }
  .ns-player__side:has(> .ns-player__side-brand) {
    grid-template-rows: auto minmax(0, 1fr) auto auto;
  }
  .ns-player__side-head strong {
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
  }
  .ns-player__side-back {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    color: var(--color-ink);
    text-decoration: none;
    font-size: var(--size-small);
    font-weight: var(--weight-semibold);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-player__side-back > i {
    flex: none;
    color: var(--color-label);
    font-size: var(--size-body);
    transition: translate var(--duration-fast) var(--ease-out);
  }
  .ns-player__side-back:hover {
    color: var(--color-brand-600);
  }
  .ns-player__side-back:hover > i {
    color: currentColor;
    translate: -2px 0;
  }
  [data-theme="dark"] .ns-player__side-back:hover {
    color: var(--color-brand-300);
  }
  .ns-player__side-back:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-player__side-back > i {
      transition: none;
    }
  }
  .ns-player__side-head span {
    margin-inline-start: auto;
    flex: none;
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-player__side-search {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-3);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-player__side-search .ns-input-wrap {
    flex: 1;
    min-inline-size: 0;
  }
  .ns-player__side-search .ns-navicon {
    flex: none;
  }
  .ns-player__side-search .ns-input {
    min-block-size: var(--space-8);
    padding-block: 0;
    font-size: var(--size-small);
  }
  .ns-player__list {
    overflow-y: auto;
    flex: 1;
    padding-block: 0 var(--space-2);
  }
  .ns-player__list .ns-empty {
    padding: var(--pad-card);
  }
  .ns-player__list--timeline .ns-lesson {
    position: relative;
  }
  .ns-player__list--timeline .ns-lesson::before {
    content: "";
    position: absolute;
    z-index: var(--z-base);
    inset-block: 0;
    inset-inline-start: calc(2px + var(--pad-card) + var(--space-6) / 2);
    inline-size: 1px;
    background: var(--color-border);
  }
  .ns-player__list--timeline .ns-lesson:first-child::before {
    inset-block-start: 50%;
  }
  .ns-player__list--timeline .ns-lesson:last-child::before {
    inset-block-end: 50%;
  }
  .ns-player__list--timeline .ns-lesson__index {
    position: relative;
    z-index: var(--z-raised);
    display: grid;
    place-items: center;
    inline-size: var(--space-6);
    block-size: var(--space-6);
    border-radius: var(--radius-pill);
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    font-size: var(--size-label);
  }
  .ns-player__list--timeline .ns-lesson[aria-current="true"] .ns-lesson__index {
    background: var(--color-brand-500);
    border-color: var(--color-brand-500);
    color: var(--color-on-brand);
  }
  .ns-player__list--timeline .ns-lesson[data-access="members"] .ns-lesson__index {
    border-style: dashed;
    color: var(--color-muted);
  }
  .ns-player__list .ns-lesson {
    position: relative;
  }
  .ns-player__list .ns-lesson > .ns-tooltip {
    inset-block-start: 50%;
    inset-block-end: auto;
    inset-inline-start: calc(2px + var(--pad-card) + var(--space-6) + var(--space-3));
    translate: 0 -50%;
    padding: var(--space-1) var(--space-2);
    inline-size: max-content;
    max-inline-size: 12rem;
  }
  .ns-player__list .ns-lesson:hover > .ns-tooltip, .ns-player__list .ns-lesson:focus-visible > .ns-tooltip {
    opacity: 1;
    visibility: visible;
  }
  .ns-player__section {
    padding: var(--space-4) var(--pad-card) var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-lesson {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--pad-row) var(--pad-card);
    min-block-size: var(--target-comfy);
    border-inline-start: 2px solid transparent;
    text-decoration: none;
    color: var(--color-ink);
    font-size: var(--size-small);
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-lesson:hover {
    background: var(--color-surface-sunken);
    border-inline-start-color: var(--color-brand-300);
  }
  .ns-lesson:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-lesson__index {
    inline-size: var(--space-6);
    text-align: center;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-lesson__title {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-lesson__body {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .ns-lesson__sub {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-lesson__thumb {
    inline-size: 3.25rem;
    aspect-ratio: 16 / 9;
    flex: none;
    object-fit: cover;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    display: grid;
    place-items: center;
    color: var(--color-label);
  }
  .ns-lesson__badge {
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-brand-500);
    color: var(--color-brand-600);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  [data-theme="dark"] .ns-lesson__badge {
    color: var(--color-brand-300);
  }
  .ns-lesson__badge--quiet {
    border-color: var(--color-border);
    color: var(--color-label);
  }
  .ns-lesson--compact {
    padding-block: var(--space-1-5);
    min-block-size: 0;
    font-size: var(--size-fine);
  }
  .ns-lesson--roomy {
    padding-block: var(--space-3-5, var(--space-4));
  }
  .ns-lesson__time {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-lesson[data-state="done"] .ns-lesson__index {
    color: var(--color-success-ink);
  }
  .ns-lesson[data-state="done"] .ns-lesson__title {
    color: var(--color-muted);
  }
  .ns-lesson[aria-current="true"] {
    border-inline-start-color: var(--color-brand-500);
    background: color-mix(in srgb, #0176d3 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 5%, transparent);
    }
  }
  .ns-lesson[aria-current="true"] .ns-lesson__title {
    color: var(--color-brand-600);
    font-weight: var(--weight-medium);
  }
  .ns-lesson[aria-current="true"] .ns-lesson__index {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-lesson[aria-current="true"] .ns-lesson__title, [data-theme="dark"] .ns-lesson[aria-current="true"] .ns-lesson__index {
    color: var(--color-brand-300);
  }
  .ns-lesson[data-state="locked"] {
    opacity: 0.7;
  }
  .ns-lesson[data-state="locked"] .ns-lesson__time {
    color: var(--color-warning-ink);
  }
  .ns-lesson[data-state="locked"]:hover {
    border-inline-start-color: var(--color-warning);
  }
  @media (max-width: 63.999rem) {
    .ns-player {
      grid-template-columns: 1fr;
      min-block-size: 0;
    }
    .ns-player, .ns-player--fixed {
      block-size: auto;
      overflow: visible;
    }
    .ns-player__main, .ns-player--fixed .ns-player__main {
      overflow: visible;
    }
    .ns-player__stage, .ns-player--fixed .ns-player__stage {
      position: static;
      max-block-size: none;
    }
    .ns-player__stage > video, .ns-player__stage > iframe, .ns-player__stage > img {
      object-fit: cover;
    }
    .ns-player[data-rail="collapsed"] {
      grid-template-columns: 1fr;
    }
    .ns-player__main, .ns-player__side {
      grid-column: 1;
      grid-row: auto;
    }
    .ns-player__side {
      display: none;
    }
    .ns-player__nav {
      margin-block-start: 0;
    }
    .ns-player__reading {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-8);
    }
    .ns-player__toc {
      position: static;
    }
    .ns-player__toc > .ns-toc {
      display: none;
    }
    .ns-player__toc--inline {
      display: flex;
    }
    .ns-player {
      --ns-read-pad: var(--gutter-md);
    }
  }
  @media (max-width: 39.999rem) {
    .ns-player__body {
      padding-inline: 0;
    }
    .ns-player {
      --ns-read-pad: var(--gutter);
    }
  }
  .ns-vplayer {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-brand-900);
    overflow: hidden;
  }
  .ns-vplayer__stage {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--color-brand-900);
  }
  .ns-vplayer__stage > video, .ns-vplayer__stage > iframe {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    display: block;
  }
  .ns-vplayer__big {
    z-index: var(--z-raised);
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    translate: -50% -50%;
    inline-size: 3.5rem;
    block-size: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: var(--radius-pill);
    cursor: pointer;
    background: var(--color-on-dark);
    color: var(--color-brand-700);
    font-size: var(--size-h3);
    transition: scale var(--duration-fast) var(--ease-out);
  }
  .ns-vplayer__big:hover {
    scale: 1.04;
  }
  .ns-vplayer[data-state="playing"] .ns-vplayer__big {
    display: none;
  }
  .ns-vplayer__bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    border-block-start: 1px solid var(--color-on-dark-border);
  }
  .ns-vplayer__btn {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2rem;
    block-size: 2rem;
    border: 0;
    border-radius: var(--radius-sm);
    cursor: pointer;
    background: none;
    color: var(--color-on-dark);
    font-size: var(--size-body);
    transition: background var(--duration-fast) var(--ease-out);
  }
  .ns-vplayer__btn:hover {
    background: var(--color-on-dark-wash);
  }
  .ns-vplayer__btn--text {
    inline-size: auto;
    padding-inline: var(--space-2);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
  }
  .ns-vplayer__btn--text[aria-pressed="true"] {
    background: var(--color-on-dark-wash);
    color: var(--color-brand-300);
  }
  .ns-vplayer__btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-300);
    outline-offset: calc(-1 * var(--focus-ring-width));
  }
  .ns-vplayer__seek {
    flex: 1;
    min-inline-size: 0;
    appearance: none;
    block-size: 1.25rem;
    background: none;
    cursor: pointer;
  }
  .ns-vplayer__seek::-webkit-slider-runnable-track {
    block-size: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--color-brand-400) var(--p, 0%), var(--color-on-dark-border) var(--p, 0%));
  }
  .ns-vplayer__seek::-moz-range-track {
    block-size: 3px;
    border-radius: var(--radius-pill);
    background: linear-gradient(to right, var(--color-brand-400) var(--p, 0%), var(--color-on-dark-border) var(--p, 0%));
  }
  .ns-vplayer__seek::-webkit-slider-thumb {
    appearance: none;
    inline-size: 0.75rem;
    block-size: 0.75rem;
    margin-block-start: -0.3rem;
    border-radius: var(--radius-pill);
    background: var(--color-on-dark);
    border: 0;
  }
  .ns-vplayer__seek::-moz-range-thumb {
    inline-size: 0.75rem;
    block-size: 0.75rem;
    border-radius: var(--radius-pill);
    background: var(--color-on-dark);
    border: 0;
  }
  .ns-vplayer__seek:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-300);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-vplayer__time {
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-on-dark-border-hover);
    font-variant-numeric: tabular-nums;
  }
  .ns-vplayer__scrub {
    position: relative;
    flex: 1;
    min-inline-size: 0;
    display: flex;
  }
  .ns-vplayer__scrub .ns-vplayer__seek {
    flex: 1;
  }
  .ns-vplayer__ticks {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 50%;
    block-size: 3px;
    translate: 0 -50%;
    pointer-events: none;
  }
  .ns-vplayer__tick {
    position: absolute;
    inset-block: 0;
    inline-size: 2px;
    inset-inline-start: var(--fx-at, 0%);
    background: var(--color-brand-900);
    opacity: 0.85;
  }
  .ns-vplayer__vol {
    flex: none;
    display: flex;
    align-items: center;
  }
  .ns-vplayer__vol .ns-vplayer__seek {
    inline-size: 0;
    opacity: 0;
    flex: none;
    transition: inline-size var(--duration-fast) var(--ease-out), opacity var(--duration-fast) var(--ease-out);
  }
  .ns-vplayer__vol:hover .ns-vplayer__seek, .ns-vplayer__vol:focus-within .ns-vplayer__seek {
    inline-size: 4.5rem;
    opacity: 1;
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-vplayer__vol .ns-vplayer__seek {
      transition: none;
    }
  }
  @media (max-width: 47.999rem) {
    .ns-vplayer__bar {
      gap: var(--space-1);
      padding-inline: var(--space-2);
    }
    .ns-vplayer__time[data-ns-video-duration] {
      display: none;
    }
  }
  .ns-vplayer__menu {
    position: relative;
    flex: none;
  }
  .ns-vplayer__menu > summary {
    list-style: none;
    cursor: pointer;
  }
  .ns-vplayer__menu > summary::-webkit-details-marker {
    display: none;
  }
  .ns-vplayer__panel {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-end: 0;
    z-index: var(--z-dropdown);
    min-inline-size: 9rem;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: var(--shadow-raised);
  }
  .ns-vplayer__opt {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    padding: var(--space-1-5) var(--space-2);
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    font-size: var(--size-small);
    color: var(--color-ink);
    text-align: start;
  }
  .ns-vplayer__opt:hover {
    background: var(--color-surface-sunken);
  }
  .ns-vplayer__opt[aria-checked="true"] {
    color: var(--color-brand-600);
    font-weight: var(--weight-medium);
  }
  [data-theme="dark"] .ns-vplayer__opt[aria-checked="true"] {
    color: var(--color-brand-300);
  }
  .ns-vchapters {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .ns-vchapters__item + .ns-vchapters__item {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-vchapters__btn {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0 var(--space-3);
    inline-size: 100%;
    padding: var(--space-2) var(--space-3);
    border: 0;
    background: none;
    cursor: pointer;
    text-align: start;
    font-size: var(--size-small);
    color: var(--color-ink);
    border-inline-start: 2px solid transparent;
    transition: background var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-vchapters__btn:hover {
    background: var(--color-surface-sunken);
    border-inline-start-color: var(--color-brand-300);
  }
  .ns-vchapters__btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-vchapters__title {
    min-inline-size: 0;
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
  }
  .ns-vchapters__time {
    grid-column: 2;
    grid-row: 1;
    flex: none;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-vchapters__meta {
    display: none;
  }
  .ns-vchapters--notes .ns-vchapters__meta {
    display: block;
    grid-column: 1 / -1;
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-vchapters__item[data-state="done"] .ns-vchapters__title {
    color: var(--color-muted);
    font-weight: var(--weight-body);
  }
  .ns-vchapters__item[aria-current="true"] .ns-vchapters__btn {
    border-inline-start-color: var(--color-brand-500);
    background: var(--color-surface-sunken);
  }
  .ns-vchapters__item[aria-current="true"] .ns-vchapters__title {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-vchapters__item[aria-current="true"] .ns-vchapters__title {
    color: var(--color-brand-300);
  }
  .ns-vchapters--inline .ns-vchapters__btn {
    grid-template-columns: auto minmax(0, 1fr);
    padding-block: var(--space-1-5);
  }
  .ns-vchapters--inline .ns-vchapters__time {
    grid-column: 1;
    grid-row: 1;
  }
  .ns-vchapters--inline .ns-vchapters__title {
    grid-column: 2;
    grid-row: 1;
    font-weight: var(--weight-body);
  }
  .ns-vchapters--inline .ns-vchapters__meta {
    display: none;
  }
  .ns-deck {
    --slide-w: 16;
    --slide-h: 9;
    position: relative;
    color: var(--color-ink);
    background: var(--color-surface-sunken);
  }
  .ns-deck--4-3 {
    --slide-w: 4;
    --slide-h: 3;
  }
  .ns-deck[data-mode="present"] {
    block-size: 100dvh;
    display: grid;
    grid-template-rows: 1fr auto;
    overflow: hidden;
  }
  html[data-ns-deck-fixed] {
    overflow: hidden;
  }
  .ns-deck__stage {
    position: relative;
  }
  .ns-deck[data-mode="present"] .ns-deck__stage {
    container-type: size;
    display: grid;
    place-items: center;
    min-block-size: 0;
    padding: var(--space-3);
  }
  .ns-deck[data-mode="scroll"] .ns-deck__stage {
    display: grid;
    gap: var(--gap-grid);
    max-inline-size: var(--container-wide);
    margin-inline: auto;
    padding: var(--space-8) var(--gutter);
  }
  .ns-deck[data-mode="present"] .ns-slide {
    display: none;
  }
  .ns-deck[data-mode="present"] .ns-slide[aria-current="true"] {
    display: block;
  }
  .ns-slide {
    container-type: inline-size;
    position: relative;
    inline-size: 100%;
    aspect-ratio: var(--slide-w) / var(--slide-h);
    overflow: hidden;
    background: var(--color-surface);
    color: var(--color-ink);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    border-inline-start: 3px solid var(--color-brand-500);
  }
  .ns-deck[data-mode="present"] .ns-slide {
    inline-size: min(100cqi, 100cqb * var(--slide-w) / var(--slide-h));
    max-block-size: 100cqb;
  }
  .ns-slide {
    --slide-pad: 6.5cqi;
    --slide-gap: 2.4cqi;
    --slide-label: 1.05cqi;
    --slide-text: 1.7cqi;
    --slide-lede: 2.3cqi;
    --slide-title: 4.2cqi;
    --slide-big: 6.5cqi;
    --slide-figure: 11cqi;
  }
  .ns-slide--sunken {
    background: var(--color-surface-sunken);
  }
  .ns-slide--dark {
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    border-color: var(--color-brand-900);
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-slide--brand {
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    border-color: var(--color-brand-500);
    border-inline-start-color: var(--color-on-dark-border);
  }
  .ns-slide--dark .ns-kicker, .ns-slide--dark .ns-slide__foot {
    color: var(--color-on-dark-border-hover);
  }
  .ns-slide--brand .ns-kicker, .ns-slide--brand .ns-slide__foot {
    color: var(--color-on-brand);
    opacity: 0.75;
  }
  .ns-slide--dark .ns-slide__lede {
    color: var(--color-on-dark);
    opacity: 0.75;
  }
  .ns-slide--brand .ns-slide__lede {
    color: var(--color-on-brand);
    opacity: 0.85;
  }
  .ns-slide--dark .ns-slide__rule {
    background: var(--color-on-dark-border);
  }
  .ns-slide--brand .ns-slide__rule {
    background: var(--color-on-dark-border);
  }
  .ns-slide--grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--space-10) var(--space-10);
    mask-image: radial-gradient(120% 100% at 100% 0%, var(--color-ink) 0%, transparent 70%);
  }
  .ns-slide--dark.ns-slide--grid::before, .ns-slide--brand.ns-slide--grid::before {
    background-image: linear-gradient(var(--color-on-dark-wash) 1px, transparent 1px), linear-gradient(90deg, var(--color-on-dark-wash) 1px, transparent 1px);
  }
  .ns-slide__inner {
    position: relative;
    z-index: var(--z-raised);
    block-size: 100%;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    gap: var(--slide-gap);
    padding: var(--slide-pad);
  }
  .ns-slide__head {
    display: grid;
    gap: calc(var(--slide-gap) * 0.4);
  }
  .ns-slide .ns-kicker {
    font-size: var(--slide-label);
    margin-block-end: 0;
  }
  .ns-slide__title {
    font-size: var(--slide-title);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-slide__lede {
    font-size: var(--slide-lede);
    line-height: var(--leading-body);
    color: var(--color-muted);
    text-wrap: pretty;
    max-inline-size: var(--measure-prose);
  }
  .ns-slide__rule {
    inline-size: 4cqi;
    block-size: 2px;
    background: var(--color-brand-500);
    margin-block-start: calc(var(--slide-gap) * 0.3);
  }
  .ns-slide__body {
    min-block-size: 0;
    font-size: var(--slide-text);
    line-height: var(--leading-body);
    align-content: start;
    display: grid;
    gap: var(--slide-gap);
  }
  .ns-slide__body--scroll {
    overflow: auto;
    align-content: start;
  }
  .ns-slide__foot {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: var(--slide-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    border-block-start: 1px solid var(--color-border);
    padding-block-start: calc(var(--slide-gap) * 0.5);
  }
  .ns-slide--dark .ns-slide__foot, .ns-slide--brand .ns-slide__foot {
    border-block-start-color: var(--color-on-dark-border);
  }
  .ns-slide__where {
    color: inherit;
  }
  .ns-slide__num {
    margin-inline-start: auto;
    font-variant-numeric: tabular-nums;
  }
  .ns-slide__badge {
    position: absolute;
    inset-block-start: var(--slide-pad);
    inset-inline-end: var(--slide-pad);
    z-index: var(--z-raised);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1-5);
    padding: var(--space-1) var(--space-2-5);
    border: 1px solid var(--color-brand-500);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--slide-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
    background: var(--color-surface);
  }
  .ns-slide--dark .ns-slide__badge, .ns-slide--brand .ns-slide__badge {
    color: var(--color-on-dark);
    background: var(--color-on-dark-wash);
    border-color: var(--color-on-dark-border);
  }
  .ns-slide--lead .ns-slide__inner {
    grid-template-rows: 1fr auto;
    align-content: center;
  }
  .ns-slide--lead .ns-slide__head {
    align-content: center;
    gap: var(--slide-gap);
  }
  .ns-slide--lead .ns-slide__title {
    font-size: var(--slide-big);
    max-inline-size: 20ch;
  }
  .ns-slide--center .ns-slide__inner {
    grid-template-rows: 1fr auto;
  }
  .ns-slide--center .ns-slide__head {
    justify-items: center;
    text-align: center;
    align-content: center;
  }
  .ns-slide--center .ns-slide__title {
    font-size: var(--slide-big);
    max-inline-size: 22ch;
  }
  .ns-slide--center .ns-slide__lede {
    margin-inline: auto;
  }
  .ns-slide--center .ns-slide__rule {
    margin-inline: auto;
  }
  .ns-slide--center .ns-slide__body {
    justify-items: center;
    text-align: center;
  }
  .ns-slide--split .ns-slide__body {
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--slide-gap) * 1.4);
    align-content: stretch;
    align-items: stretch;
  }
  .ns-slide--split-figure .ns-slide__body {
    grid-template-columns: 5fr 7fr;
  }
  .ns-slide--split-text .ns-slide__body {
    grid-template-columns: 7fr 5fr;
  }
  .ns-slide__col {
    display: grid;
    gap: var(--slide-gap);
    align-content: start;
    min-inline-size: 0;
    min-block-size: 0;
  }
  .ns-slide__col--fill {
    align-content: stretch;
    overflow: hidden;
  }
  .ns-slide--aside .ns-slide__body {
    grid-template-columns: minmax(0, 1fr) 26cqi;
    gap: calc(var(--slide-gap) * 1.4);
  }
  .ns-slide__aside {
    display: grid;
    gap: calc(var(--slide-gap) * 0.35);
    align-content: start;
    padding-inline-start: calc(var(--slide-gap) * 0.8);
    border-inline-start: 1px solid var(--color-border);
    font-size: var(--slide-label);
  }
  .ns-slide--dark .ns-slide__aside, .ns-slide--brand .ns-slide__aside {
    border-inline-start-color: var(--color-on-dark-border);
  }
  .ns-slide--full .ns-slide__inner {
    padding: 0;
    gap: 0;
    grid-template-rows: minmax(0, 1fr);
  }
  .ns-slide--full .ns-slide__head, .ns-slide--full .ns-slide__foot {
    position: absolute;
    inset-inline: 0;
    z-index: var(--z-raised);
    padding: calc(var(--slide-pad) * 0.5) var(--slide-pad);
  }
  .ns-slide--full .ns-slide__head {
    inset-block-start: 0;
  }
  .ns-slide--full .ns-slide__foot {
    inset-block-end: 0;
    border-block-start: 0;
  }
  .ns-slide--full .ns-slide__body {
    block-size: 100%;
    align-content: stretch;
  }
  .ns-slide__points {
    display: grid;
    gap: var(--slide-gap);
    align-content: start;
  }
  .ns-slide__point {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--slide-gap) * 0.5);
    align-items: start;
  }
  .ns-slide__point-index {
    font-family: var(--font-mono);
    font-size: var(--slide-lede);
    font-weight: var(--weight-semibold);
    color: var(--color-brand-500);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-heading);
  }
  .ns-slide--dark .ns-slide__point-index {
    color: var(--color-brand-300);
  }
  .ns-slide--brand .ns-slide__point-index {
    color: var(--color-on-brand);
  }
  .ns-slide__point-index i {
    font-size: 1em;
  }
  .ns-slide__point-title {
    display: block;
    font-size: var(--slide-lede);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    text-wrap: pretty;
  }
  .ns-slide__point-note {
    display: block;
    color: var(--color-muted);
    margin-block-start: calc(var(--slide-gap) * 0.2);
    text-wrap: pretty;
  }
  .ns-slide--dark .ns-slide__point-note {
    color: var(--color-on-dark);
    opacity: 0.7;
  }
  .ns-slide--brand .ns-slide__point-note {
    color: var(--color-on-brand);
    opacity: 0.8;
  }
  .ns-slide__points--tight {
    gap: calc(var(--slide-gap) * 0.55);
  }
  .ns-slide__points--split {
    grid-template-columns: 1fr 1fr;
    column-gap: calc(var(--slide-gap) * 1.4);
  }
  .ns-slide__points--current .ns-slide__point {
    opacity: var(--opacity-press);
  }
  .ns-slide__points--current .ns-slide__point[data-state="done"] {
    opacity: var(--opacity-disabled);
  }
  .ns-slide__points--current .ns-slide__point[aria-current="true"] {
    opacity: 1;
  }
  .ns-slide__point[aria-current="true"] .ns-slide__point-title {
    color: var(--color-brand-600);
  }
  .ns-slide--dark .ns-slide__point[aria-current="true"] .ns-slide__point-title {
    color: var(--color-brand-300);
  }
  .ns-slide__point[data-state="done"] .ns-slide__point-index {
    color: var(--color-success-ink);
  }
  .ns-slide__figure-value {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--slide-figure);
    font-weight: var(--weight-heading);
    line-height: var(--leading-mega);
    letter-spacing: var(--tracking-mega);
    color: var(--color-brand-500);
    font-variant-numeric: tabular-nums;
  }
  .ns-slide--dark .ns-slide__figure-value {
    color: var(--color-brand-300);
  }
  .ns-slide--brand .ns-slide__figure-value {
    color: var(--color-on-brand);
  }
  .ns-slide__grid {
    display: grid;
    gap: calc(var(--slide-gap) * 0.9);
    align-content: start;
  }
  .ns-slide__grid[data-cols="2"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ns-slide__grid[data-cols="3"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .ns-slide__grid[data-cols="4"] {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .ns-slide__grid--fill {
    align-content: stretch;
    block-size: 100%;
  }
  .ns-slide__figure {
    display: grid;
    place-items: center;
    min-block-size: 0;
    block-size: 100%;
    overflow: hidden;
    background: var(--color-surface-sunken);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-slide--dark .ns-slide__figure, .ns-slide--brand .ns-slide__figure {
    background: var(--color-on-dark-wash);
    border-color: var(--color-on-dark-border);
  }
  .ns-slide__figure > img, .ns-slide__figure > video, .ns-slide__figure > svg {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }
  .ns-slide__figure--bleed {
    border: 0;
    border-radius: 0;
    background: var(--color-brand-900);
  }
  .ns-slide__figure--bleed > img {
    object-fit: cover;
  }
  .ns-slide__caption {
    font-family: var(--font-mono);
    font-size: var(--slide-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-slide__flow {
    display: flex;
    align-items: stretch;
    gap: calc(var(--slide-gap) * 0.5);
    flex-wrap: wrap;
    margin-block: auto;
  }
  .ns-slide__node {
    flex: 1 1 0;
    min-inline-size: 0;
    display: grid;
    gap: var(--space-1-5);
    align-content: start;
    padding: calc(var(--slide-gap) * 0.55);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-slide--dark .ns-slide__node, .ns-slide--brand .ns-slide__node {
    background: var(--color-on-dark-wash);
    border-color: var(--color-on-dark-border);
  }
  .ns-slide__node[aria-current="true"] {
    border-color: var(--color-brand-500);
    box-shadow: var(--shadow-brand);
  }
  .ns-slide__node-label {
    font-family: var(--font-mono);
    font-size: var(--slide-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-slide--dark .ns-slide__node-label, .ns-slide--brand .ns-slide__node-label {
    color: var(--color-on-dark-border-hover);
  }
  .ns-slide__node-title {
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
  }
  .ns-slide__node-note {
    color: var(--color-muted);
    font-size: var(--slide-label);
  }
  .ns-slide--dark .ns-slide__node-note {
    color: var(--color-on-dark);
    opacity: 0.7;
  }
  .ns-slide__arrow {
    flex: 0 0 auto;
    align-self: center;
    color: var(--color-border);
    font-size: var(--slide-lede);
  }
  .ns-slide--dark .ns-slide__arrow, .ns-slide--brand .ns-slide__arrow {
    color: var(--color-on-dark-border-hover);
  }
  .ns-slide__flow--stack {
    flex-direction: column;
  }
  .ns-slide__flow--stack .ns-slide__arrow {
    transform: rotate(90deg);
  }
  .ns-slide__timer {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--slide-big);
    font-weight: var(--weight-heading);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
  }
  .ns-slide__timer[data-state="running"] {
    color: var(--color-brand-500);
  }
  .ns-slide__timer[data-state="over"] {
    color: var(--color-error-ink);
  }
  .ns-slide__timer-unit {
    font-size: var(--slide-label);
    color: var(--color-label);
  }
  .ns-slide__options {
    display: grid;
    gap: calc(var(--slide-gap) * 0.35);
  }
  .ns-slide__option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: calc(var(--slide-gap) * 0.4);
    align-items: center;
    padding: calc(var(--slide-gap) * 0.35) calc(var(--slide-gap) * 0.5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    text-align: start;
  }
  .ns-slide--dark .ns-slide__option {
    border-color: var(--color-on-dark-border);
  }
  .ns-slide__option-key {
    display: grid;
    place-items: center;
    inline-size: 2.2em;
    block-size: 2.2em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--slide-label);
    font-weight: var(--weight-label);
    color: var(--color-label);
  }
  .ns-slide--dark .ns-slide__option-key {
    border-color: var(--color-on-dark-border);
    color: var(--color-on-dark);
  }
  .ns-slide__option[data-state="correct"] {
    border-color: var(--color-success);
  }
  .ns-slide__option[data-state="correct"] .ns-slide__option-key {
    border-color: var(--color-success);
    color: var(--color-success-ink);
  }
  .ns-slide__answer {
    font-size: var(--slide-text);
  }
  .ns-slide__answer > summary {
    cursor: pointer;
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--slide-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-brand-600);
  }
  .ns-slide__answer > summary::-webkit-details-marker {
    display: none;
  }
  .ns-slide__answer > summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-slide--dark .ns-slide__answer > summary {
    color: var(--color-brand-300);
  }
  .ns-slide__answer[open] > summary {
    margin-block-end: var(--space-2);
  }
  .ns-slide__note {
    display: none;
  }
  .ns-deck[data-notes="print"] .ns-slide__note {
    display: block;
  }
  .ns-slide .ns-code {
    --code-size: calc(var(--slide-text) * 0.82);
    min-block-size: 0;
    max-block-size: 100%;
  }
  .ns-slide .ns-code__body {
    flex: 1;
    min-block-size: 0;
  }
  .ns-slide .ns-code__pre {
    overflow: auto;
  }
  .ns-slide .ns-quote blockquote {
    font-size: var(--slide-lede);
  }
  .ns-slide .ns-quote figcaption {
    font-size: var(--slide-label);
  }
  .ns-slide .ns-statblock__figure {
    font-size: var(--slide-figure);
  }
  .ns-slide .ns-statblock__label {
    font-size: var(--slide-text);
  }
  .ns-slide .ns-statblock__source {
    font-size: var(--slide-label);
  }
  .ns-slide .ns-card__title {
    font-size: var(--slide-text);
  }
  .ns-slide .ns-card__text, .ns-slide .ns-compare__side ul, .ns-slide .ns-checklist, .ns-slide .ns-timeline__title, .ns-slide .ns-timeline__text {
    font-size: var(--slide-text);
  }
  .ns-slide .ns-takeaway__text {
    font-size: var(--slide-lede);
  }
  .ns-slide .ns-checklist li {
    font-size: var(--slide-text);
  }
  .ns-slide .ns-card__kicker, .ns-slide .ns-compare__title, .ns-slide .ns-takeaway__label, .ns-slide .ns-timeline__time, .ns-slide .ns-chip, .ns-slide .ns-tag, .ns-slide .ns-badge {
    font-size: var(--slide-label);
  }
  .ns-slide .ns-code__file, .ns-slide .ns-code__tab, .ns-slide .ns-code__btn, .ns-slide .ns-code__lang, .ns-slide .ns-code__meta, .ns-slide .ns-code__status {
    font-size: var(--slide-label);
  }
  .ns-slide .ns-code__file i, .ns-slide .ns-code__tab i, .ns-slide .ns-code__btn i {
    font-size: 1em;
  }
  .ns-slide .ns-btn {
    font-size: var(--slide-label);
  }
  .ns-slide__action {
    justify-self: start;
    margin-block-start: auto;
  }
  .ns-slide [data-fragment] {
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-out);
  }
  .ns-slide [data-fragment][data-shown] {
    opacity: 1;
  }
  .ns-deck:not([data-mode="present"]) .ns-slide [data-fragment] {
    opacity: 1;
  }
  .ns-deck__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-deck[data-mode="scroll"] .ns-deck__bar {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
  }
  .ns-deck__deckname {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-deck__count {
    font-variant-numeric: tabular-nums;
    color: var(--color-ink);
  }
  .ns-deck__count b {
    font-weight: var(--weight-semibold);
  }
  .ns-deck__tools {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-inline-start: auto;
  }
  .ns-deck__rail {
    position: relative;
    block-size: 2px;
    inline-size: 100%;
    background: var(--color-border);
    overflow: hidden;
  }
  .ns-deck__rail > span {
    display: block;
    block-size: 100%;
    inline-size: var(--p, 0%);
    background: var(--color-brand-500);
    transition: inline-size var(--duration-base) var(--ease-out);
  }
  .ns-deck__overview {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface);
  }
  .ns-deck__overview[hidden] {
    display: none;
  }
  .ns-deck__overview-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-block-end: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-deck__thumbs {
    overflow: auto;
    padding: var(--space-5);
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--gap-grid);
  }
  .ns-deck__thumb {
    display: grid;
    gap: var(--space-2);
    text-align: start;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
  }
  .ns-deck__thumb-frame {
    position: relative;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
  }
  .ns-deck__thumb[aria-current="true"] .ns-deck__thumb-frame {
    border-color: var(--color-brand-500);
    box-shadow: var(--shadow-brand);
  }
  .ns-deck__thumb:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-deck__thumb:hover .ns-deck__thumb-frame {
    border-color: var(--color-brand-400);
  }
  .ns-deck[data-mode="present"] .ns-deck__thumb-frame .ns-slide, .ns-deck__thumb-frame .ns-slide {
    display: block;
    inline-size: 100%;
    max-block-size: none;
    border: 0;
    border-radius: 0;
    pointer-events: none;
  }
  .ns-deck__thumb-meta {
    display: flex;
    gap: var(--space-2);
    align-items: baseline;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-deck__thumb-title {
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    letter-spacing: normal;
    text-transform: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-deck__notes {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    inline-size: min(26rem, 100%);
    z-index: var(--z-dropdown);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: var(--color-surface-raised);
    border-inline-start: 1px solid var(--color-border);
  }
  .ns-deck__notes[hidden] {
    display: none;
  }
  .ns-deck__notes-head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-deck__notes-body {
    overflow: auto;
    padding: var(--space-4);
    display: grid;
    gap: var(--space-4);
    font-size: var(--size-body);
    line-height: var(--leading-body);
  }
  .ns-deck__notes-next {
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-border);
    color: var(--color-muted);
    font-size: var(--size-small);
  }
  .ns-deck__notes-next b {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-weight: var(--weight-label);
  }
  .ns-deck__help {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--space-6);
    background: var(--color-scrim);
  }
  .ns-deck__help[hidden] {
    display: none;
  }
  .ns-deck__help-card {
    inline-size: min(28rem, 100%);
    display: grid;
    gap: var(--space-3);
    padding: var(--pad-card-lg);
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-deck__help-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    justify-content: space-between;
    font-size: var(--size-small);
  }
  @media (max-width: 47.999rem) {
    .ns-deck[data-mode="present"] {
      block-size: auto;
      overflow: visible;
    }
    .ns-deck[data-mode="present"] .ns-deck__stage {
      container-type: normal;
      display: grid;
      gap: var(--gap-grid);
      padding: var(--space-5) var(--gutter);
    }
    .ns-deck[data-mode="present"] .ns-slide {
      display: block;
      inline-size: 100%;
      max-block-size: none;
    }
    .ns-deck[data-mode="present"] .ns-slide [data-fragment] {
      opacity: 1;
    }
    .ns-slide {
      aspect-ratio: auto;
      min-block-size: 60vh;
      --slide-pad: var(--space-6);
      --slide-gap: var(--space-5);
      --slide-label: var(--size-label);
      --slide-text: var(--size-body);
      --slide-lede: var(--size-body-lg);
      --slide-title: var(--size-h3);
      --slide-big: var(--size-h2);
      --slide-figure: var(--size-display);
    }
    .ns-slide__rule {
      inline-size: var(--space-8);
    }
    .ns-slide__aside {
      inline-size: auto;
    }
    .ns-slide--split .ns-slide__body, .ns-slide--aside .ns-slide__body, .ns-slide__points--split {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-slide__grid[data-cols="2"], .ns-slide__grid[data-cols="3"], .ns-slide__grid[data-cols="4"] {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-slide__flow {
      flex-direction: column;
    }
    .ns-slide__flow .ns-slide__arrow {
      transform: rotate(90deg);
    }
    .ns-slide__aside {
      padding-inline-start: 0;
      border-inline-start: 0;
      padding-block-start: var(--space-4);
      border-block-start: 1px solid var(--color-border);
    }
    .ns-deck__notes {
      inset-block-start: auto;
      inline-size: 100%;
      max-block-size: 60dvh;
      border-inline-start: 0;
      border-block-start: 1px solid var(--color-border);
    }
  }
  @media print {
    .ns-deck__bar, .ns-deck__rail, .ns-deck__overview, .ns-deck__notes, .ns-deck__help {
      display: none;
    }
    .ns-deck, .ns-deck[data-mode="present"] {
      block-size: auto;
      overflow: visible;
      display: block;
      background: none;
    }
    .ns-deck[data-mode="present"] .ns-deck__stage {
      container-type: normal;
      display: block;
      padding: 0;
    }
    .ns-deck[data-mode="present"] .ns-slide, .ns-deck[data-mode="present"] .ns-slide[aria-current="true"] {
      display: block;
    }
    .ns-slide {
      inline-size: 100%;
      max-block-size: none;
      break-after: page;
      border-radius: 0;
      box-shadow: none;
      border: 0;
    }
    .ns-slide [data-fragment] {
      opacity: 1;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-slide [data-fragment], .ns-deck__rail > span {
      transition: none;
    }
  }
  .ns-sponsor {
    display: grid;
    gap: var(--space-2-5);
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  a.ns-sponsor {
    text-decoration: none;
    color: inherit;
    display: grid;
  }
  a.ns-sponsor:hover {
    border-color: var(--color-brand-300);
  }
  a.ns-sponsor:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-sponsor__label {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-label);
  }
  .ns-sponsor__label::before {
    content: "";
    flex: none;
    inline-size: var(--space-1-5);
    block-size: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-label);
  }
  .ns-sponsor__label > i {
    display: none;
  }
  .ns-sponsor__logo {
    display: block;
    block-size: var(--space-7);
    inline-size: auto;
    max-inline-size: 100%;
    object-fit: contain;
    object-position: left center;
    border: 0;
    border-radius: var(--radius-sm);
  }
  .ns-sponsor__body {
    display: grid;
    gap: var(--space-1);
    min-inline-size: 0;
  }
  .ns-sponsor__name {
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-muted);
  }
  .ns-sponsor__tagline {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-heading);
    color: var(--color-ink);
  }
  .ns-sponsor__text {
    font-size: var(--size-small);
    line-height: var(--leading-body);
    color: var(--color-muted);
  }
  .ns-sponsor__cta {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-sponsor__cta {
    color: var(--color-brand-300);
  }
  .ns-sponsor__cta > i {
    transition: translate var(--duration-fast) var(--ease-out);
  }
  a.ns-sponsor:hover .ns-sponsor__cta > i {
    translate: 2px 0;
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-sponsor__cta > i {
      transition: none;
    }
  }
  .ns-sponsor--skyscraper {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  .ns-sponsor--skyscraper .ns-sponsor__logo {
    block-size: var(--space-8);
  }
  .ns-sponsor--square {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
  }
  .ns-sponsor--square .ns-sponsor__text {
    display: none;
  }
  .ns-sponsor--square .ns-sponsor__tagline {
    font-size: var(--size-small);
  }
  .ns-sponsor--leaderboard {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    column-gap: var(--space-5);
  }
  .ns-sponsor--leaderboard .ns-sponsor__label {
    grid-column: 1 / -1;
    grid-row: 1;
  }
  .ns-sponsor--leaderboard .ns-sponsor__logo {
    grid-row: 2;
  }
  .ns-sponsor--leaderboard .ns-sponsor__body {
    grid-row: 2;
  }
  .ns-sponsor--leaderboard .ns-sponsor__cta {
    grid-row: 2;
    justify-self: end;
  }
  @media (max-width: 47.999rem) {
    .ns-sponsor--leaderboard {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-sponsor--leaderboard .ns-sponsor__logo, .ns-sponsor--leaderboard .ns-sponsor__body, .ns-sponsor--leaderboard .ns-sponsor__cta {
      grid-row: auto;
      justify-self: start;
    }
  }
  .ns-sponsor--article {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    column-gap: var(--space-4);
    max-inline-size: var(--container-prose);
    padding: var(--space-1) 0 var(--space-1) var(--space-5);
    border: 0;
    border-radius: 0;
    border-inline-start: 2px solid var(--color-border);
    background: none;
  }
  .ns-sponsor--article .ns-sponsor__label, .ns-sponsor--article .ns-sponsor__body, .ns-sponsor--article .ns-sponsor__cta {
    grid-column: 2;
  }
  .ns-sponsor--article .ns-sponsor__logo {
    grid-row: 1 / span 2;
    grid-column: 1;
    block-size: var(--space-8);
  }
  a.ns-sponsor--article:hover {
    border-color: var(--color-brand-300);
  }
  @media (max-width: 39.999rem) {
    .ns-sponsor--article {
      grid-template-columns: minmax(0, 1fr);
    }
    .ns-sponsor--article .ns-sponsor__label, .ns-sponsor--article .ns-sponsor__body, .ns-sponsor--article .ns-sponsor__cta {
      grid-column: 1;
    }
    .ns-sponsor--article .ns-sponsor__logo {
      grid-row: auto;
      grid-column: 1;
    }
  }
  .ns-ad {
    --ns-ad-w: 300px;
    --ns-ad-h: 250px;
    display: grid;
    justify-items: center;
    gap: var(--space-1-5);
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr);
    max-inline-size: 100%;
  }
  .ns-ad__label {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--size-label);
    font-weight: var(--weight-medium);
    color: var(--color-label);
  }
  .ns-ad__label::before {
    content: "";
    flex: none;
    inline-size: var(--space-1-5);
    block-size: var(--space-1-5);
    border-radius: var(--radius-pill);
    background: var(--color-label);
  }
  .ns-ad__frame {
    position: relative;
    inline-size: var(--ns-ad-w);
    block-size: var(--ns-ad-h);
    max-inline-size: 100%;
    overflow: hidden;
    border-radius: var(--radius-sm);
  }
  .ns-ad__frame > iframe, .ns-ad__frame > ins, .ns-ad__frame > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    border: 0;
    object-fit: contain;
  }
  .ns-ad[data-state="loading"] .ns-ad__frame, .ns-ad[data-state="blocked"] .ns-ad__frame {
    background: var(--color-surface-sunken);
  }
  .ns-ad[data-state="empty"] .ns-ad__frame {
    border: 1px dashed var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-ad[data-state="empty"][data-collapse] {
    display: none;
  }
  .ns-ad[data-state="filled"] .ns-ad__skeleton {
    display: none;
  }
  .ns-ad__skeleton {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-ad[data-state="filled"] .ns-ad__frame > .ns-ad__skeleton {
    display: none;
  }
  .ns-ad__note {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-1);
    padding: var(--pad-card);
    text-align: center;
    font-size: var(--size-small);
    color: var(--color-muted);
  }
  .ns-ad__note-title {
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  .ns-ad__dummy {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    align-content: center;
    gap: var(--space-1);
    text-align: center;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface-sunken);
    background-image: repeating-linear-gradient( 135deg, transparent 0 6px, var(--color-border) 6px 7px);
    @supports (color: color-mix(in lab, red, red)) {
      background-image: repeating-linear-gradient( 135deg, transparent 0 6px, color-mix(in srgb, var(--color-border) 45%, transparent) 6px 7px);
    }
  }
  .ns-ad__dummy-size {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-ad__dummy-name {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    color: var(--color-ink);
  }
  .ns-ad--leaderboard {
    --ns-ad-w: 320px;
    --ns-ad-h: 100px;
  }
  .ns-ad--billboard {
    --ns-ad-w: 300px;
    --ns-ad-h: 250px;
  }
  .ns-ad--rectangle {
    --ns-ad-w: 300px;
    --ns-ad-h: 250px;
  }
  .ns-ad--rectangle-lg {
    --ns-ad-w: 336px;
    --ns-ad-h: 280px;
  }
  .ns-ad--square {
    --ns-ad-w: 250px;
    --ns-ad-h: 250px;
  }
  .ns-ad--halfpage {
    --ns-ad-w: 300px;
    --ns-ad-h: 600px;
  }
  .ns-ad--skyscraper {
    --ns-ad-w: 160px;
    --ns-ad-h: 600px;
  }
  .ns-ad--skyscraper-sm {
    --ns-ad-w: 120px;
    --ns-ad-h: 600px;
  }
  .ns-ad--banner {
    --ns-ad-w: 320px;
    --ns-ad-h: 50px;
  }
  .ns-ad--banner-lg {
    --ns-ad-w: 320px;
    --ns-ad-h: 100px;
  }
  @media (min-width: 48rem) {
    .ns-ad--leaderboard {
      --ns-ad-w: 728px;
      --ns-ad-h: 90px;
    }
    .ns-ad--billboard {
      --ns-ad-w: 728px;
      --ns-ad-h: 90px;
    }
    .ns-ad--square {
      --ns-ad-w: 300px;
      --ns-ad-h: 250px;
    }
  }
  @media (min-width: 64rem) {
    .ns-ad--leaderboard {
      --ns-ad-w: 970px;
      --ns-ad-h: 90px;
    }
    .ns-ad--billboard {
      --ns-ad-w: 970px;
      --ns-ad-h: 250px;
    }
  }
  @media (min-width: 48rem) {
    .ns-ad--banner, .ns-ad--banner-lg {
      display: none;
    }
  }
  .ns-ad--fluid {
    --ns-ad-w: 100%;
    inline-size: 100%;
  }
  .ns-ad--fluid .ns-ad__frame {
    block-size: auto;
    min-block-size: var(--ns-ad-h);
  }
  .ns-ad--article {
    --ns-ad-w: 100%;
    --ns-ad-h: 250px;
    inline-size: 100%;
    max-inline-size: var(--container-prose);
    padding-block: var(--space-5);
    border-block: 1px solid var(--color-border);
    justify-items: stretch;
  }
  .ns-ad--article .ns-ad__frame {
    block-size: auto;
    min-block-size: var(--ns-ad-h);
    inline-size: 100%;
  }
  .ns-ad--feed {
    --ns-ad-w: 100%;
    --ns-ad-h: 250px;
    inline-size: 100%;
    justify-items: stretch;
  }
  .ns-ad--feed .ns-ad__frame {
    inline-size: 100%;
    block-size: auto;
    min-block-size: var(--ns-ad-h);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
  }
  .ns-ad--multiplex {
    --ns-ad-w: 100%;
    --ns-ad-h: auto;
    inline-size: 100%;
    justify-items: stretch;
  }
  .ns-ad--multiplex .ns-ad__frame {
    inline-size: 100%;
    block-size: auto;
  }
  .ns-ad__grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  }
  .ns-ad__tile {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface);
    text-decoration: none;
    color: inherit;
  }
  a.ns-ad__tile:hover {
    border-color: var(--color-brand-300);
  }
  .ns-ad__tile-thumb {
    aspect-ratio: 16 / 9;
    inline-size: 100%;
    border-radius: var(--radius-sm);
    background: var(--color-surface-sunken);
    object-fit: cover;
  }
  .ns-ad__tile-title {
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
    line-height: var(--leading-heading);
    color: var(--color-ink);
  }
  .ns-ad__tile-src {
    font-size: var(--size-label);
    color: var(--color-muted);
  }
  .ns-ad--parallax {
    --ns-ad-w: 100%;
    --ns-ad-h: 320px;
    inline-size: 100%;
    justify-items: stretch;
  }
  .ns-ad--parallax .ns-ad__frame {
    inline-size: 100%;
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    border-radius: var(--radius-card);
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-ad--parallax .ns-ad__frame {
      background-attachment: scroll;
    }
  }
  .ns-ad--anchor {
    --ns-ad-w: 320px;
    --ns-ad-h: 100px;
    position: fixed;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    justify-items: center;
    gap: var(--space-1);
    padding: var(--space-2);
    padding-block-end: max(var(--space-2), env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-ad--anchor .ns-ad__label {
    justify-self: center;
  }
  .ns-ad__dismiss {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    translate: 0 -100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    border: 1px solid var(--color-border);
    border-block-end: 0;
    border-start-start-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-muted);
    cursor: pointer;
  }
  .ns-ad__dismiss:hover {
    color: var(--color-ink);
  }
  .ns-ad__dismiss:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  @media (min-width: 48rem) {
    .ns-ad--anchor {
      --ns-ad-w: 728px;
      --ns-ad-h: 90px;
    }
  }
  .ns-ad-anchored {
    --ns-ad-anchor-h: 128px;
    padding-block-end: calc(var(--ns-ad-anchor-h) + var(--space-4));
  }
  .ns-ad-modal {
    padding: var(--pad-card);
    overflow: auto;
  }
  .ns-ad-modal .ns-ad {
    --ns-ad-w: 336px;
    --ns-ad-h: 280px;
  }
  .ns-ad-modal__close {
    align-self: flex-end;
  }
  @media (min-width: 48rem) and (min-height: 52rem) {
    .ns-ad-modal .ns-ad {
      --ns-ad-w: 300px;
      --ns-ad-h: 600px;
    }
  }
  .ns-ad-rail {
    position: sticky;
    inset-block-start: var(--space-6);
  }
  @media (max-width: 63.999rem) {
    .ns-ad-rail {
      display: none;
    }
  }
  @media print {
    .ns-ad, .ns-ad--anchor, .ns-ad-modal {
      display: none;
    }
    .ns-ad-anchored {
      padding-block-end: 0;
    }
  }
  .ns-icon {
    inline-size: 1em;
    block-size: 1em;
    display: inline-block;
    vertical-align: -0.125em;
    flex: none;
    fill: none;
    stroke: currentColor;
  }
  .ns-icon--sm {
    font-size: var(--size-small);
  }
  .ns-icon--lg {
    font-size: var(--size-h3);
  }
  .ns-icon--xl {
    font-size: var(--size-h2);
  }
  .ns-band {
    padding-block: var(--space-16);
  }
  .ns-band--tight {
    padding-block: var(--space-10);
  }
  .ns-band__inner {
    max-inline-size: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .ns-band--sunken {
    background: var(--color-surface-sunken);
    border-block: 1px solid var(--color-border);
  }
  .ns-band--dark {
    background: var(--color-brand-900);
    color: var(--color-on-dark);
    position: relative;
    overflow: hidden;
  }
  .ns-band__head {
    max-inline-size: var(--container-narrow);
    margin-block-end: var(--space-8);
  }
  .ns-band__head--center {
    margin-inline: auto;
    text-align: center;
  }
  .ns-kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-block-end: var(--space-2);
  }
  .ns-kicker::before {
    content: "// ";
  }
  .ns-band--dark .ns-kicker {
    color: var(--color-on-dark-border-hover);
  }
  .ns-kicker--center {
    text-align: center;
  }
  .ns-kicker--light {
    color: var(--color-on-dark);
  }
  .ns-band__title {
    font-size: var(--size-h2);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }
  .ns-band__lede {
    font-size: var(--size-body-lg);
    line-height: var(--leading-body);
    color: var(--color-muted);
    margin-block-start: var(--space-3);
    text-wrap: pretty;
  }
  .ns-band--dark .ns-band__lede {
    color: var(--color-on-dark);
    opacity: 0.75;
  }
  .ns-band__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .ns-band__head .ns-band__actions {
    margin-block-start: var(--space-5);
  }
  .ns-band__head--center .ns-band__actions {
    justify-content: center;
  }
  .ns-band__head--between {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-6);
    max-inline-size: none;
  }
  .ns-band__head--between .ns-band__actions {
    margin-block-start: 0;
    flex: none;
  }
  @media (max-width: 47.999rem) {
    .ns-band__head--between {
      display: block;
    }
    .ns-band__head--between .ns-band__actions {
      margin-block-start: var(--space-4);
    }
  }
  .ns-band--collapsible > .ns-band__inner > .ns-band__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    inline-size: 100%;
    cursor: pointer;
    list-style: none;
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-band__toggle::-webkit-details-marker {
    display: none;
  }
  .ns-band__toggle:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-band__toggle .ns-band__title {
    font-size: var(--size-h3);
  }
  .ns-band__toggle-hint {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    flex: none;
  }
  .ns-band__toggle-hint i {
    transition: rotate var(--duration-fast) var(--ease-out);
  }
  .ns-band--collapsible[open] .ns-band__toggle-hint i {
    rotate: 180deg;
  }
  .ns-band--collapsible[open] .ns-band__toggle-hint .ns-band__toggle-open {
    display: none;
  }
  .ns-band--collapsible:not([open]) .ns-band__toggle-hint .ns-band__toggle-close {
    display: none;
  }
  .ns-band__panel {
    padding-block-start: var(--space-6);
  }
  .ns-hero {
    padding-block: var(--space-20) var(--space-16);
  }
  .ns-hero__title {
    font-size: var(--size-display);
    line-height: var(--leading-heading);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
    max-inline-size: 22ch;
  }
  .ns-hero__lede {
    font-size: var(--size-body-lg);
    color: var(--color-muted);
    margin-block-start: var(--space-4);
    max-inline-size: var(--container-prose);
    text-wrap: pretty;
  }
  .ns-band--dark .ns-hero__lede {
    color: var(--color-on-dark);
    opacity: 0.75;
  }
  .ns-hero__actions {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-start: var(--space-6);
  }
  .ns-hero__proof {
    display: block;
    margin-block-start: var(--space-5);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-band--dark .ns-hero__proof {
    color: var(--color-on-dark-border-hover);
  }
  .ns-band--grid::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(var(--color-grid) 1px, transparent 1px), linear-gradient(90deg, var(--color-grid) 1px, transparent 1px);
    background-size: var(--space-8) var(--space-8);
    mask-image: radial-gradient(ellipse 70% 90% at 50% 0%, var(--color-ink) 0%, transparent 70%);
  }
  .ns-band--grid > .ns-band__inner {
    position: relative;
  }
  .ns-band--dark.ns-band--grid::before {
    background-image: linear-gradient(var(--color-on-dark-wash) 1px, transparent 1px), linear-gradient(90deg, var(--color-on-dark-wash) 1px, transparent 1px);
  }
  .ns-features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: var(--gap-grid);
  }
  .ns-feature {
    padding: var(--pad-card-lg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    box-shadow: inset 0 2px 0 transparent;
    transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
  }
  .ns-feature:hover {
    border-color: var(--color-brand-500);
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-feature__top {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block-end: var(--space-3);
  }
  .ns-feature__top i, .ns-feature__top .ns-icon {
    font-size: var(--size-h3);
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-feature__top i, [data-theme="dark"] .ns-feature__top .ns-icon {
    color: var(--color-brand-300);
  }
  .ns-feature__num {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-feature__name {
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
  }
  .ns-feature__text {
    font-size: var(--size-small);
    color: var(--color-muted);
    line-height: var(--leading-body);
    margin-block-start: var(--space-1-5);
  }
  .ns-statband {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .ns-statband__cell {
    padding: var(--pad-card-lg);
    text-align: center;
  }
  .ns-statband__cell + .ns-statband__cell {
    border-inline-start: 1px solid var(--color-border);
  }
  .ns-statband__value {
    font-family: var(--font-mono);
    font-size: var(--size-h2);
    font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-tight);
  }
  .ns-statband__label {
    display: block;
    margin-block-start: var(--space-1-5);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  @media (max-width: 39.999rem) {
    .ns-statband {
      grid-template-columns: 1fr 1fr;
    }
    .ns-statband__cell + .ns-statband__cell {
      border-inline-start: 0;
    }
    .ns-statband__cell:nth-child(even) {
      border-inline-start: 1px solid var(--color-border);
    }
    .ns-statband__cell:nth-child(n+3) {
      border-block-start: 1px solid var(--color-border);
    }
  }
  .ns-quote {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    text-align: center;
  }
  .ns-quote blockquote {
    font-family: var(--font-serif);
    font-size: var(--size-h3);
    line-height: var(--leading-heading);
    text-wrap: balance;
  }
  .ns-quote blockquote::before {
    content: "\201C";
    color: var(--color-label);
  }
  .ns-quote blockquote::after {
    content: "\201D";
    color: var(--color-label);
  }
  .ns-quote figcaption {
    margin-block-start: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
  }
  .ns-cta {
    text-align: center;
  }
  .ns-cta .ns-band__title {
    margin-inline: auto;
  }
  .ns-cta__actions {
    display: flex;
    gap: var(--space-3);
    justify-content: center;
    flex-wrap: wrap;
    margin-block-start: var(--space-6);
  }
  .ns-cta__fine {
    display: block;
    margin-block-start: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-on-dark-border-hover);
  }
  .ns-faq {
    max-inline-size: var(--container-narrow);
    margin-inline: auto;
    border-block-start: 1px solid var(--color-border);
  }
  .ns-faq__item {
    border-block-end: 1px solid var(--color-border);
  }
  .ns-faq__item summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-1);
    cursor: pointer;
    list-style: none;
    font-weight: var(--weight-semibold);
    font-size: var(--size-body);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-faq__item summary::-webkit-details-marker {
    display: none;
  }
  .ns-faq__item summary::before {
    content: "+";
    font-family: var(--font-mono);
    color: var(--color-label);
    inline-size: var(--space-4);
    flex: none;
  }
  .ns-faq__item[open] summary::before {
    content: "\2212";
    color: var(--color-brand-600);
  }
  .ns-faq__item summary:hover {
    color: var(--color-brand-600);
  }
  [data-theme="dark"] .ns-faq__item summary:hover, [data-theme="dark"] .ns-faq__item[open] summary::before {
    color: var(--color-brand-300);
  }
  .ns-faq__item summary:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-faq__body {
    padding: 0 var(--space-1) var(--space-4) var(--space-8);
    font-size: var(--size-small);
    color: var(--color-muted);
    line-height: var(--leading-body);
  }
  .ns-faq__body p + p {
    margin-block-start: var(--space-3);
  }
  .ns-logorow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    flex-wrap: wrap;
  }
  .ns-logorow > * {
    color: var(--color-label);
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-logorow > *:hover {
    color: var(--color-ink);
  }
  .ns-logorow__mark {
    font-family: var(--font-mono);
    font-size: var(--size-small);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .ns-footer {
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-footer__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--space-8);
    padding: var(--space-10) var(--space-6);
    max-inline-size: var(--container-page);
    margin-inline: auto;
  }
  .ns-footer__head {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-block-end: var(--space-3);
  }
  .ns-footer__col ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }
  .ns-footer__blurb {
    font-size: var(--size-small);
    color: var(--color-muted);
    line-height: var(--leading-body);
    margin-block: var(--space-3);
    max-inline-size: var(--container-prose);
  }
  ul.ns-footer__social {
    flex-direction: row;
    gap: var(--space-2);
  }
  .ns-footer__social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.875rem;
    block-size: 1.875rem;
    border-radius: var(--radius-sm);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-muted);
  }
  .ns-footer__social a:hover {
    box-shadow: inset 0 0 0 1px var(--color-brand-500);
  }
  .ns-footer__col a {
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-footer__col a:hover {
    color: var(--color-brand-600);
  }
  .ns-footer__bar {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
    border-block-start: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-6);
    max-inline-size: var(--container-page);
    margin-inline: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-footer__bar a {
    color: inherit;
    text-decoration: none;
  }
  .ns-footer__bar a:hover {
    color: var(--color-brand-600);
  }
  .ns-footer__bar .ns-footer__spacer {
    margin-inline-start: auto;
  }
  .ns-footer--dark {
    background: var(--color-brand-900);
    border-block-start-color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-block-start-color: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    }
  }
  .ns-footer--dark .ns-footer__col a, .ns-footer--dark .ns-footer__bar {
    color: var(--color-on-dark);
  }
  .ns-footer--dark .ns-footer__head {
    color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      color: color-mix(in srgb, var(--color-on-dark) 70%, transparent);
    }
  }
  .ns-footer--dark .ns-footer__bar {
    border-block-start-color: var(--color-on-dark);
    @supports (color: color-mix(in lab, red, red)) {
      border-block-start-color: color-mix(in srgb, var(--color-on-dark) 15%, transparent);
    }
  }
  .ns-footer--dark .ns-footer__col a:hover, .ns-footer--dark .ns-footer__bar a:hover {
    color: var(--color-on-brand);
  }
  .ns-admin {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--navbar-h) 1fr;
    grid-template-areas: "topbar topbar" "side main";
    min-block-size: 100dvh;
    background: var(--color-surface);
  }
  .ns-admin__topbar {
    grid-area: topbar;
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-inline: var(--space-4);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface);
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-sticky);
  }
  .ns-admin__side {
    grid-area: side;
    position: sticky;
    inset-block-start: var(--navbar-h);
    block-size: calc(100dvh - var(--navbar-h));
    overflow-y: auto;
    border-inline-end: 1px solid var(--color-border);
    padding: var(--space-4) var(--space-3) var(--space-8);
    background: var(--color-surface);
  }
  .ns-admin__main {
    grid-area: main;
    min-inline-size: 0;
    padding: var(--space-6) var(--gutter-lg) var(--space-24);
  }
  .ns-admin__env {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    padding: var(--space-0-5) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
  }
  .ns-admin__spacer {
    margin-inline-start: auto;
  }
  @media (max-width: 63.999rem) {
    .ns-admin {
      grid-template-columns: 1fr;
      grid-template-areas: "topbar" "side" "main";
      grid-template-rows: var(--navbar-h) auto 1fr;
    }
    .ns-admin__side {
      position: static;
      block-size: auto;
      border-inline-end: 0;
      border-block-end: 1px solid var(--color-border);
    }
    .ns-admin__main {
      padding-inline: var(--gutter);
    }
  }
  .ns-admin-nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-0-5);
  }
  .ns-admin-nav__sep {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin: var(--space-5) 0 var(--space-1);
    padding-inline-start: var(--space-3);
  }
  .ns-admin-nav__sep:first-child {
    margin-block-start: 0;
  }
  .ns-admin-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-2-5);
    padding: var(--space-1-5) var(--space-3);
    min-block-size: var(--target-min);
    font-size: var(--size-small);
    color: var(--color-muted);
    text-decoration: none;
    border-inline-start: 2px solid transparent;
    border-radius: 0;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-admin-nav a:hover {
    color: var(--color-ink);
    border-inline-start-color: var(--color-brand-300);
  }
  .ns-admin-nav a:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-admin-nav a[aria-current="page"] {
    color: var(--color-brand-600);
    border-inline-start-color: var(--color-brand-500);
    font-weight: var(--weight-medium);
    background: color-mix(in srgb, #0176d3 5%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 5%, transparent);
    }
  }
  [data-theme="dark"] .ns-admin-nav a[aria-current="page"] {
    color: var(--color-brand-300);
  }
  .ns-admin-nav__num {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-admin-nav__count {
    margin-inline-start: auto;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-pagehead {
    display: flex;
    align-items: flex-end;
    gap: var(--space-4);
    padding-block-end: var(--space-5);
    margin-block-end: var(--space-6);
    border-block-end: 1px solid var(--color-border);
  }
  .ns-pagehead__kicker {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
    margin-block-end: var(--space-1);
  }
  .ns-pagehead h1 {
    font-size: var(--size-h2);
    line-height: var(--leading-tight);
  }
  .ns-pagehead__meta {
    font-size: var(--size-small);
    color: var(--color-muted);
    margin-block-start: var(--space-1);
  }
  .ns-pagehead__actions {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-2);
    flex: none;
  }
  .ns-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: var(--gap-grid);
  }
  .ns-stat {
    padding: var(--pad-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
  }
  .ns-stat__label {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  .ns-stat__value {
    font-family: var(--font-mono);
    font-size: var(--size-h2);
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    font-variant-numeric: tabular-nums;
    margin-block-start: var(--space-2);
  }
  .ns-stat__delta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-variant-numeric: tabular-nums;
    color: var(--color-muted);
    margin-block-start: var(--space-1-5);
  }
  .ns-stat__delta--up {
    color: var(--color-success-ink);
  }
  .ns-stat__delta--down {
    color: var(--color-error-ink);
  }
  .ns-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin-block-end: var(--space-5);
  }
  .ns-toolbar__search {
    flex: 1 1 14rem;
    max-inline-size: 22rem;
  }
  .ns-toolbar__spacer {
    margin-inline-start: auto;
  }
  .ns-toolbar .ns-select {
    inline-size: auto;
  }
  .ns-toolbar__count {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ns-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--toc-w);
    gap: var(--space-8);
    align-items: start;
  }
  .ns-editor__main {
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--stack-md);
  }
  .ns-editor__rail {
    position: sticky;
    inset-block-start: calc(var(--navbar-h) + var(--space-6));
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .ns-railbox {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    padding: var(--pad-card);
    display: flex;
    flex-direction: column;
    gap: var(--gap-field);
  }
  .ns-railbox__title {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-label);
  }
  @media (max-width: 63.999rem) {
    .ns-editor {
      grid-template-columns: 1fr;
    }
    .ns-editor__rail {
      position: static;
    }
  }
  .ns-publishbar {
    position: sticky;
    inset-block-end: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-inline: calc(-1 * var(--space-4));
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }
  .ns-publishbar__state {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
  }
  .ns-publishbar__actions {
    margin-inline-start: auto;
    display: flex;
    gap: var(--space-2);
  }
  .ns-titlebox {
    inline-size: 100%;
    border: 0;
    border-block-end: 1px solid transparent;
    background: none;
    color: var(--color-ink);
    font-family: var(--font-heading);
    font-size: var(--size-h2);
    font-weight: var(--weight-heading);
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    padding: 0 0 var(--space-2);
    border-radius: 0;
  }
  .ns-titlebox::placeholder {
    color: var(--color-label);
  }
  .ns-titlebox:focus-visible {
    outline: none;
    border-block-end-color: var(--color-brand-500);
  }
  .ns-rte {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-raised);
    overflow: hidden;
  }
  .ns-rte__bar {
    display: flex;
    align-items: center;
    gap: var(--space-0-5);
    flex-wrap: wrap;
    padding: var(--space-1-5) var(--space-2);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-rte__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--target-min);
    block-size: var(--target-min);
    border: 1px solid transparent;
    border-radius: var(--radius-btn);
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
  }
  .ns-rte__btn:hover {
    color: var(--color-ink);
    border-color: var(--color-border);
  }
  .ns-rte__btn:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -2px;
  }
  .ns-rte__btn[aria-pressed="true"] {
    color: var(--color-brand-600);
    border-color: var(--color-brand-500);
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
  }
  [data-theme="dark"] .ns-rte__btn[aria-pressed="true"] {
    color: var(--color-brand-300);
  }
  .ns-rte__gap {
    inline-size: 1px;
    align-self: stretch;
    margin-block: var(--space-1);
    margin-inline: var(--space-1);
    background: var(--color-border);
  }
  .ns-rte__area {
    min-block-size: 14rem;
    padding: var(--pad-card-lg);
    font-size: var(--size-body);
    line-height: var(--leading-body);
    color: var(--color-ink);
  }
  .ns-rte__area:focus-visible {
    outline: none;
    box-shadow: inset 0 2px 0 var(--color-brand-500);
  }
  .ns-rte__area p + p {
    margin-block-start: var(--space-3);
  }
  .ns-builder {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
  }
  .ns-builder__section {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: var(--color-surface-raised);
  }
  .ns-builder__head {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2-5) var(--pad-card);
    border-block-end: 1px solid var(--color-border);
    background: var(--color-surface-sunken);
  }
  .ns-builder__index {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    color: var(--color-label);
    font-variant-numeric: tabular-nums;
  }
  .ns-builder__title {
    flex: 1;
    min-inline-size: 0;
    border: 0;
    background: none;
    color: var(--color-ink);
    font-family: var(--font-sans);
    font-size: var(--size-body);
    font-weight: var(--weight-semibold);
    padding: 0;
    border-radius: 0;
  }
  .ns-builder__title:focus-visible {
    outline: none;
    box-shadow: 0 2px 0 var(--color-brand-500);
  }
  .ns-builder__meta {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ns-builder__row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--pad-card);
    min-block-size: var(--target-comfy);
    border-inline-start: 2px solid transparent;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
  }
  .ns-builder__row + .ns-builder__row {
    border-block-start: 1px solid var(--color-border);
  }
  .ns-builder__row:hover {
    background: var(--color-surface-sunken);
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-builder__row[aria-grabbed="true"] {
    background: color-mix(in srgb, #0176d3 6%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background: color-mix(in srgb, var(--color-brand-500) 6%, transparent);
    }
    border-inline-start-color: var(--color-brand-500);
  }
  .ns-builder__grip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-5);
    flex: none;
    border: 0;
    background: none;
    padding: 0;
    color: var(--color-label);
    cursor: grab;
  }
  .ns-builder__grip:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
    border-radius: var(--radius-sm);
  }
  .ns-builder__row .ns-builder__index {
    inline-size: var(--space-6);
    flex: none;
  }
  .ns-builder__name {
    flex: 1;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--size-small);
    font-weight: var(--weight-medium);
  }
  .ns-builder__type {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    padding: var(--space-0-5) var(--space-1-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    white-space: nowrap;
  }
  .ns-builder__dur {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
  }
  .ns-builder__rowactions {
    display: flex;
    gap: var(--space-1);
    opacity: 0;
    transition: opacity var(--duration-fast) var(--ease-out);
  }
  .ns-builder__row:hover .ns-builder__rowactions, .ns-builder__row:focus-within .ns-builder__rowactions {
    opacity: 1;
  }
  .ns-builder__add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--gap-inline);
    inline-size: 100%;
    min-block-size: var(--target-comfy);
    padding: var(--space-2) var(--space-3);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-btn);
    background: none;
    color: var(--color-muted);
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-builder__add:hover, .ns-builder__add:focus-visible {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-builder__add:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: var(--focus-ring-offset);
  }
  .ns-builder__section .ns-builder__add {
    border-inline: 0;
    border-block-end: 0;
    border-radius: 0;
  }
  .ns-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-card);
    color: var(--color-muted);
    font-size: var(--size-small);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .ns-dropzone:hover, .ns-dropzone:focus-within, .ns-dropzone[data-state="over"] {
    border-color: var(--color-brand-500);
    color: var(--color-brand-600);
  }
  .ns-dropzone input {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
  }
  .ns-dropzone__icon {
    font-size: var(--size-h3);
  }
  .ns-dropzone__hint {
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-label);
  }
  .ns-dropzone--compact {
    padding: var(--space-4) var(--space-5);
    flex-direction: row;
  }
  .ns-file {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    font-family: var(--font-mono);
    font-size: var(--size-label);
  }
  .ns-file__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .ns-file__size {
    color: var(--color-muted);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }
  .ns-file__remove {
    margin-inline-start: auto;
  }
  .ns-file + .ns-file {
    margin-block-start: var(--space-2);
  }
  .ns-taginput {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1-5);
    padding: var(--space-1-5) var(--space-2);
    min-block-size: var(--target-comfy);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-btn);
    background: var(--color-surface-raised);
    cursor: text;
    transition: border-color var(--duration-fast) var(--ease-out);
  }
  .ns-taginput:focus-within {
    border-color: var(--color-brand-500);
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: -1px;
  }
  .ns-taginput__tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-0-5) var(--space-1) var(--space-0-5) var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-muted);
    background: var(--color-surface-sunken);
  }
  .ns-taginput__x {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--space-4);
    block-size: var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: none;
    padding: 0;
    color: var(--color-label);
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-out);
  }
  .ns-taginput__x:hover {
    color: var(--color-error-ink);
  }
  .ns-taginput__x:focus-visible {
    outline: var(--focus-ring-width) solid var(--color-brand-500);
    outline-offset: 1px;
  }
  .ns-taginput input {
    flex: 1;
    min-inline-size: 6rem;
    border: 0;
    background: none;
    padding: var(--space-0-5);
    font-family: var(--font-sans);
    font-size: var(--size-small);
    color: var(--color-ink);
  }
  .ns-taginput input:focus-visible {
    outline: none;
  }
  .ns-slug {
    display: flex;
    align-items: stretch;
  }
  .ns-slug__prefix {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--space-3);
    border: 1px solid var(--color-border);
    border-inline-end: 0;
    border-start-start-radius: var(--radius-btn);
    border-end-start-radius: var(--radius-btn);
    background: var(--color-surface-sunken);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    color: var(--color-muted);
    white-space: nowrap;
  }
  .ns-slug .ns-input {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
  }
  .ns-visually-hidden:not(:focus):not(:active) {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  .ns-skip-link {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-start: var(--space-2);
    z-index: var(--z-max);
    padding: var(--space-2) var(--space-4);
    background: var(--color-brand-500);
    color: var(--color-on-brand);
    border-radius: var(--radius-btn);
    font-family: var(--font-mono);
    font-size: var(--size-label);
    font-weight: var(--weight-label);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    text-decoration: none;
  }
  .ns-skip-link:not(:focus):not(:active) {
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  [tabindex="-1"]:focus {
    outline: none;
  }
  .ns-page {
    inline-size: 100%;
    max-inline-size: var(--container-page);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .ns-page--prose {
    max-inline-size: var(--container-prose);
  }
  .ns-page--narrow {
    max-inline-size: var(--container-narrow);
  }
  .ns-page--wide {
    max-inline-size: var(--container-wide);
  }
  .ns-page--demo {
    padding-block: var(--space-8);
  }
  .ns-stack > * + * {
    margin-block-start: var(--stack-sm);
  }
  .ns-stack--xs > * + * {
    margin-block-start: var(--stack-xs);
  }
  .ns-stack--md > * + * {
    margin-block-start: var(--stack-md);
  }
  .ns-stack--lg > * + * {
    margin-block-start: var(--stack-lg);
  }
  .ns-grid {
    display: grid;
    gap: var(--gap-grid);
    grid-template-columns: repeat(auto-fill, minmax(min(18rem, 100%), 1fr));
  }
  .ns-grid--sm {
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  }
  .ns-docs-layout {
    display: flex;
    gap: var(--space-10);
    align-items: flex-start;
  }
  .ns-docs-layout__main {
    flex: 1;
    min-inline-size: 0;
  }
  .ns-docs-layout__toc {
    position: sticky;
    inset-block-start: var(--navbar-h);
    inline-size: var(--toc-w);
    flex: none;
    max-block-size: calc(100dvh - var(--navbar-h));
    overflow-y: auto;
    padding-block: var(--space-6);
  }
  @media (max-width: 63.999rem) {
    .ns-docs-layout {
      display: block;
    }
    .ns-docs-layout__toc {
      display: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .ns-motion-safe {
      animation: none !important;
    }
  }
}
@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}
@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}
@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}
@property --tw-space-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-leading {
  syntax: "*";
  inherits: false;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-ordinal {
  syntax: "*";
  inherits: false;
}
@property --tw-slashed-zero {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-figure {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false;
}
@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false;
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false;
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}
@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}
@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false;
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false;
}
@property --tw-ease {
  syntax: "*";
  inherits: false;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-space-y-reverse: 0;
      --tw-border-style: solid;
      --tw-leading: initial;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-backdrop-blur: initial;
      --tw-backdrop-brightness: initial;
      --tw-backdrop-contrast: initial;
      --tw-backdrop-grayscale: initial;
      --tw-backdrop-hue-rotate: initial;
      --tw-backdrop-invert: initial;
      --tw-backdrop-opacity: initial;
      --tw-backdrop-saturate: initial;
      --tw-backdrop-sepia: initial;
      --tw-ease: initial;
    }
  }
}