/* Werkbank: the look of nextdash.cc, shared with the docs at /docs/
   (site/.vitepress/theme/werkbank.css). Change a token in both. */

:root {
  --nd-bg: #f8f9f9;
  --nd-surface: #fefefe;
  --nd-fg: #232a27;
  --nd-muted: #626a67;
  --nd-line: #dfe2e1;
  --nd-code-bg: #f2f3f2;
  --nd-accent: #2f7d55;
  --nd-accent-hover: #276a48;
  --nd-accent-soft: #e4ede9;
  --nd-on-accent: #ffffff;
  --nd-radius: 4px;
  --nd-font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --nd-font-mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, monospace;
  --nd-wrap: 1080px;
  --nd-narrow: 720px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --nd-bg: #151918; --nd-surface: #1d211f; --nd-fg: #e7e9e8; --nd-muted: #a6aba9; --nd-line: #313534;
    --nd-code-bg: #212624; --nd-accent: #72ca9d; --nd-accent-hover: #8dd6b0; --nd-accent-soft: #24352d; --nd-on-accent: #151918;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --nd-bg: #151918; --nd-surface: #1d211f; --nd-fg: #e7e9e8; --nd-muted: #a6aba9; --nd-line: #313534;
  --nd-code-bg: #212624; --nd-accent: #72ca9d; --nd-accent-hover: #8dd6b0; --nd-accent-soft: #24352d; --nd-on-accent: #151918;
  color-scheme: dark;
}

/* Base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--nd-bg); color: var(--nd-fg); font-family: var(--nd-font-body); font-size: 17px; line-height: 1.65; }
img, video { max-width: 100%; height: auto; }
a { color: var(--nd-accent); text-underline-offset: 2px; text-decoration-thickness: 1px; }
a:hover { color: var(--nd-accent-hover); }
:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
h1, h2, h3, h4 { font-weight: 600; line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; margin: 0 0 .5em; }
h1 { font-size: 36px; letter-spacing: -.012em; }
h2 { font-size: 26px; }
h3 { font-size: 19px; }
p { margin: 0 0 1em; }
code, kbd, pre { font-family: var(--nd-font-mono); }
code { font-size: .86em; background: var(--nd-code-bg); padding: 1px 5px; border-radius: 3px; overflow-wrap: anywhere; }
kbd { font-size: .8em; padding: 0 6px; border: 1px solid var(--nd-line); border-bottom-width: 2px; border-radius: 3px; background: var(--nd-surface); color: var(--nd-fg); white-space: nowrap; }
pre { font-size: 14px; line-height: 1.6; background: var(--nd-code-bg); border: 1px solid var(--nd-line); border-radius: var(--nd-radius); padding: 14px 16px; margin: 0 0 1.2em; white-space: pre-wrap; overflow-wrap: anywhere; position: relative; }
pre code { background: none; padding: 0; font-size: inherit; }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nd-skip { position: absolute; left: -9999px; top: 8px; background: var(--nd-surface); padding: 6px 10px; z-index: 100; }
.nd-skip:focus { left: 12px; }

.nd-wrap { max-width: var(--nd-wrap); margin: 0 auto; padding-inline: 24px; }
.nd-narrow { max-width: calc(var(--nd-narrow) + 48px); }
.nd-main { min-height: 60vh; }
.nd-muted { color: var(--nd-muted); }
.nd-label { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--nd-muted); font-weight: 600; margin: 0 0 14px; }
.nd-lead { font-size: 19px; color: var(--nd-muted); }

/* Buttons */
.nd-btns { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.nd-btn { display: inline-block; font-size: 15px; font-weight: 600; padding: 8px 18px; border-radius: var(--nd-radius); border: 1px solid var(--nd-line); background: var(--nd-surface); color: var(--nd-fg); text-decoration: none; }
.nd-btn:hover { border-color: var(--nd-accent); color: var(--nd-fg); }
.nd-btn--primary { background: var(--nd-accent); border-color: var(--nd-accent); color: var(--nd-on-accent); }
.nd-btn--primary:hover { background: var(--nd-accent-hover); border-color: var(--nd-accent-hover); color: var(--nd-on-accent); }

/* Header: the same as the docs header */
.nd-header { border-bottom: 1px solid var(--nd-line); background: var(--nd-bg); position: sticky; top: 0; z-index: 20; }
.admin-bar .nd-header { top: 32px; }
.nd-header-row { display: flex; align-items: center; gap: 12px 26px; min-height: 64px; }
.nd-word { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 18px; color: var(--nd-fg); text-decoration: none; letter-spacing: -.005em; white-space: nowrap; }
.nd-word-mark { flex: none; }
.nd-word-mark rect:first-child { fill: #232a27; }
:root[data-theme="dark"] .nd-word-mark rect:first-child { fill: #24352d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-word-mark rect:first-child { fill: #24352d; } }
.nd-nav ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; }
.nd-nav a { color: var(--nd-muted); text-decoration: none; font-size: 15px; font-weight: 500; }
.nd-nav a:hover, .nd-nav a[aria-current] { color: var(--nd-fg); }
.nd-nav a[aria-current] { color: var(--nd-accent); }
.nd-ext { font-size: 12px; }
.nd-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nd-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--nd-radius); border: 1px solid transparent; background: none; color: var(--nd-muted); cursor: pointer; }
.nd-icon-btn:hover { color: var(--nd-fg); border-color: var(--nd-line); }
.nd-menu-toggle { display: none; font: inherit; font-size: 15px; background: none; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); padding: 4px 12px; color: var(--nd-fg); cursor: pointer; }

/* Search: docs (Pagefind) and site (WordPress) in one list */
.nd-search { position: relative; display: flex; align-items: center; gap: 8px; border: 1px solid var(--nd-line); background: var(--nd-surface); border-radius: var(--nd-radius); padding: 0 8px 0 10px; height: 34px; width: 240px; }
.nd-search:focus-within { border-color: var(--nd-accent); }
.nd-search-icon { color: var(--nd-muted); display: grid; }
.nd-search input { border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: var(--nd-fg); width: 100%; min-width: 0; padding: 0; }
.nd-search input::placeholder { color: var(--nd-muted); }
.nd-search input::-webkit-search-cancel-button { display: none; }
.nd-search-results { position: absolute; top: calc(100% + 6px); right: 0; width: min(520px, 92vw); max-height: 70vh; overflow: auto; background: var(--nd-surface); border: 1px solid var(--nd-line); border-radius: 6px; box-shadow: 0 10px 30px rgb(0 0 0 / .14); padding: 6px 0; z-index: 30; }
.nd-sr-group { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--nd-muted); font-weight: 600; padding: 10px 14px 4px; }
.nd-sr-hit { display: block; padding: 8px 14px; color: var(--nd-fg); text-decoration: none; border-left: 2px solid transparent; }
.nd-sr-hit b { display: block; font-weight: 600; font-size: 14.5px; }
.nd-sr-hit small { display: block; color: var(--nd-muted); font-size: 13px; line-height: 1.45; }
.nd-sr-hit mark { background: none; color: var(--nd-accent); font-weight: 600; }
.nd-sr-hit[aria-selected="true"], .nd-sr-hit:hover { background: var(--nd-accent-soft); border-left-color: var(--nd-accent); color: var(--nd-fg); }
.nd-sr-empty, .nd-sr-more { display: block; padding: 10px 14px; font-size: 13.5px; color: var(--nd-muted); }
.nd-sr-more { border-top: 1px solid var(--nd-line); margin-top: 6px; color: var(--nd-accent); text-decoration: none; }

/* Homepage */
.nd-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 48px; align-items: center; padding-block: 64px 60px; }
.nd-hero h1 { font-size: 40px; line-height: 1.15; margin-bottom: 16px; }
.nd-sub { font-size: 20px; color: var(--nd-muted); margin-bottom: 26px; }
.nd-hero-shot { margin: 0; }
.nd-hero-shot img { display: block; border: 1px solid var(--nd-line); border-radius: 6px; }
.nd-sec { border-top: 1px solid var(--nd-line); padding-block: 52px; }
.nd-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.nd-split h2 { margin-bottom: 12px; }
.nd-file { font-family: var(--nd-font-mono); font-size: 12px; color: var(--nd-muted); margin: 0 0 6px; }
.nd-code pre { margin: 0; }
.nd-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px; }
.nd-three h3 { margin-bottom: 6px; }
.nd-three p { color: var(--nd-muted); margin-bottom: 8px; font-size: 16px; }
.nd-three a { font-size: 15.5px; }
.nd-also { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 36px; }
.nd-also div { padding: 14px 0; border-top: 1px solid var(--nd-line); min-width: 0; }
.nd-also b { display: block; font-weight: 600; }
.nd-also span { color: var(--nd-muted); font-size: 15.5px; }
.nd-more { margin: 18px 0 0; }
.nd-integr { font-family: var(--nd-font-mono); font-size: 14.5px; color: var(--nd-muted); line-height: 2; margin: 0; }
.nd-integr a { font-family: var(--nd-font-body); }
.nd-release { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; }
.nd-release .nd-label { margin-bottom: 6px; }
.nd-version { font-family: var(--nd-font-mono); font-size: 16px; margin: 0; }
.nd-release-title { font-size: 19px; font-weight: 600; margin-bottom: 6px; }
.nd-release-title a { color: var(--nd-fg); text-decoration: none; }
.nd-release-title a:hover { color: var(--nd-accent); }
.nd-links { margin: 0; }

/* Pages and lists */
.nd-page-head { padding-block: 48px 8px; }
.nd-crumb { font-size: 14px; color: var(--nd-muted); margin-bottom: 8px; }
.nd-crumb a { color: var(--nd-muted); text-decoration: none; }
.nd-crumb a:hover { color: var(--nd-accent); }
.nd-chips { display: flex; gap: 8px; margin-top: 14px; }
.nd-chips a { font-size: 14px; padding: 3px 12px; border: 1px solid var(--nd-line); border-radius: 99px; color: var(--nd-muted); text-decoration: none; }
.nd-chips a[aria-current] { background: var(--nd-accent-soft); border-color: transparent; color: var(--nd-accent); font-weight: 600; }
.nd-rows { margin: 16px 0 32px; }
.nd-row { padding: 22px 0; border-top: 1px solid var(--nd-line); }
.nd-row-meta { font-size: 14px; color: var(--nd-muted); margin: 0 0 4px; display: flex; flex-wrap: wrap; gap: 0 6px; }
.nd-row-meta a { color: var(--nd-muted); }
.nd-row-title { font-size: 22px; margin: 0 0 6px; }
.nd-row-title a { color: var(--nd-fg); text-decoration: none; }
.nd-row-title a:hover { color: var(--nd-accent); }
.nd-row-excerpt { color: var(--nd-muted); margin: 0; }
.nav-links { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; }
.page-numbers { padding: 4px 10px; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); text-decoration: none; color: var(--nd-fg); font-size: 15px; }
.page-numbers.current { background: var(--nd-accent-soft); border-color: transparent; color: var(--nd-accent); font-weight: 600; }

/* Articles */
.nd-article { padding-bottom: 48px; }
.nd-content > * { max-width: 100%; }
.nd-content h2 { margin-top: 1.8em; padding-top: 18px; border-top: 1px solid var(--nd-line); }
.nd-content h3 { margin-top: 1.5em; }
.nd-content ul, .nd-content ol { padding-left: 1.3em; margin: 0 0 1em; }
.nd-content li { margin-bottom: .35em; }
.nd-content blockquote { margin: 0 0 1em; padding: 4px 0 4px 18px; border-left: 3px solid var(--nd-accent); color: var(--nd-muted); }
.nd-content table { width: 100%; border-collapse: collapse; font-size: 15px; margin: 0 0 1.2em; display: block; overflow-x: auto; }
.nd-content th, .nd-content td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--nd-line); vertical-align: top; }
.nd-content th { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--nd-muted); font-weight: 600; }
.nd-content img { border: 1px solid var(--nd-line); border-radius: var(--nd-radius); }
.nd-content figure, .nd-fig { margin: 24px 0 28px; }
.nd-content figcaption, .nd-fig figcaption, .wp-element-caption { font-size: 14px; color: var(--nd-muted); text-align: center; margin-top: 8px; }
.nd-content hr { border: 0; border-top: 1px solid var(--nd-line); margin: 2em 0; }
.nd-content .wp-block-code, .nd-content .wp-block-preformatted { white-space: pre-wrap; }
.nd-content .alignwide { max-width: var(--nd-wrap); }
.nd-article-foot { margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--nd-line); }
.nd-tags a { font-size: 14px; color: var(--nd-muted); margin-right: 10px; }
.nd-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
.nd-prevnext a { display: block; padding: 12px 14px; border: 1px solid var(--nd-line); border-radius: 6px; color: var(--nd-fg); text-decoration: none; font-weight: 600; }
.nd-prevnext a:hover { border-color: var(--nd-accent); }
.nd-prevnext small { display: block; color: var(--nd-muted); font-weight: 400; font-size: 13px; }
.nd-next { text-align: right; grid-column: 2; }

/* Features */
.nd-keys { list-style: none; margin: 0 0 28px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 24px; }
.nd-keys li { display: flex; gap: 10px; align-items: baseline; font-size: 15.5px; }
.nd-keys-combo { display: inline-flex; gap: 3px; flex: 0 0 auto; }
.nd-loop { position: relative; margin: 0 0 28px; }
.nd-loop video { display: block; border: 1px solid var(--nd-line); border-radius: 6px; width: 100%; }
.nd-loop-btn { position: absolute; right: 10px; bottom: 10px; font: inherit; font-size: 13px; padding: 3px 10px; border-radius: var(--nd-radius); border: 1px solid var(--nd-line); background: var(--nd-surface); color: var(--nd-fg); cursor: pointer; }
.nd-group { margin: 32px 0 48px; }
.nd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.nd-card { display: block; padding: 16px 18px; border: 1px solid var(--nd-line); border-radius: 6px; background: var(--nd-surface); color: var(--nd-fg); text-decoration: none; min-width: 0; }
.nd-card:hover { border-color: var(--nd-accent); color: var(--nd-fg); }
.nd-card b { display: block; font-weight: 600; margin-bottom: 4px; }
.nd-card span { display: block; color: var(--nd-muted); font-size: 15px; line-height: 1.5; }
.nd-docs-link { margin-bottom: 14px; }

/* Screenshots that open larger (same as the docs) */
img.nd-zoomable { cursor: zoom-in; }
.nd-lightbox { border: none; padding: 0; background: transparent; max-width: 94vw; max-height: 94vh; overflow: visible; color: #e7e9e8; }
.nd-lightbox:modal { overscroll-behavior: contain; }
.nd-lightbox::backdrop { background: rgb(12 14 13 / .86); overflow: hidden; overscroll-behavior: contain; }
.nd-lightbox-img { display: block; max-width: 94vw; max-height: 86vh; width: auto; height: auto; border-radius: var(--nd-radius); cursor: zoom-out; }
.nd-lightbox-cap { margin: 12px auto 0; max-width: 70ch; text-align: center; font-size: 14px; color: #c9cecb; }
.nd-lightbox-close { position: fixed; top: 14px; right: 18px; width: 36px; height: 36px; border-radius: 50%; border: 0; font-size: 24px; line-height: 1; color: #e7e9e8; background: rgb(255 255 255 / .08); cursor: pointer; }

/* Footer */
.nd-footer { border-top: 1px solid var(--nd-line); margin-top: 24px; padding-block: 22px 30px; font-size: 14px; color: var(--nd-muted); }
.nd-footer-row { display: flex; flex-wrap: wrap; gap: 16px 28px; justify-content: space-between; align-items: flex-end; }
.nd-footer-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.nd-footer a { color: var(--nd-muted); text-decoration: none; }
.nd-footer a:hover { color: var(--nd-accent); }
.nd-ascii { margin: 0; padding: 0; border: 0; background: none; font-size: 8px; line-height: 1; white-space: pre; color: var(--nd-muted); opacity: .8; }

/* Narrow screens */
@media (max-width: 980px) {
  .nd-search { width: 190px; }
  .nd-nav ul { gap: 16px; }
}
@media (max-width: 860px) {
  .nd-header-row { flex-wrap: wrap; padding-block: 10px; }
  .nd-menu-toggle { display: inline-block; order: 2; }
  .nd-tools { order: 3; }
  .nd-word { order: 1; margin-right: auto; }
  .nd-nav { order: 4; flex-basis: 100%; display: none; }
  .nd-nav.is-open { display: block; }
  .nd-nav ul { flex-direction: column; gap: 0; padding-bottom: 8px; }
  .nd-nav a { display: block; padding: 8px 0; font-size: 16px; }
  .nd-hero-row, .nd-split, .nd-release { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .nd-three, .nd-also, .nd-cards { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .nd-also { gap: 0; }
  .nd-hero-row { padding-block: 40px; }
  .nd-hero h1 { font-size: 30px; }
  h1 { font-size: 30px; }
  .nd-sec { padding-block: 40px; }
}
@media (max-width: 560px) {
  .nd-wrap { padding-inline: 16px; }
  .nd-tools { width: 100%; order: 5; }
  .nd-search { flex: 1; width: auto; }
  .nd-prevnext { grid-template-columns: 1fr; }
  .nd-next { grid-column: auto; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Theme gallery (Theme studio page) */
.nd-gallery { padding-block: 8px 64px; }
.nd-gallery > h2 { margin-bottom: 8px; }
.nd-gal-note { margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--nd-accent); background: var(--nd-accent-soft); border-radius: var(--nd-radius); font-size: 15px; }
.nd-gal-filters { display: grid; gap: 8px; margin: 22px 0 10px; }
.nd-gal-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.nd-gal-row[hidden] { display: none; }
.nd-gal-label { width: 80px; flex: none; font-size: 13px; color: var(--nd-muted); }
.nd-chip { font: inherit; font-size: 14px; padding: 3px 11px; border: 1px solid var(--nd-line); border-radius: 99px; background: var(--nd-surface); color: var(--nd-muted); cursor: pointer; }
.nd-chip:hover { color: var(--nd-fg); border-color: var(--nd-muted); }
.nd-chip[aria-pressed="true"] { background: var(--nd-accent-soft); border-color: transparent; color: var(--nd-accent); font-weight: 600; }
.nd-gal-count { font-size: 14px; margin: 0 0 16px; }
.nd-gal-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.nd-gal-grid > li[hidden] { display: none; }
.nd-gal-item { display: block; width: 100%; padding: 0; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); background: var(--nd-surface); text-align: left; font: inherit; color: var(--nd-fg); cursor: zoom-in; overflow: hidden; }
.nd-gal-item:hover { border-color: var(--nd-accent); }
.nd-gal-item img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
.nd-gal-cap { display: block; padding: 8px 10px 10px; line-height: 1.35; }
.nd-gal-cap b { font-weight: 600; font-size: 15px; }
.nd-gal-cap small { display: block; font-size: 13px; color: var(--nd-muted); }
.nd-gal-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 64px; border: 0; border-radius: var(--nd-radius); font-size: 32px; line-height: 1; color: #e7e9e8; background: rgb(255 255 255 / .08); cursor: pointer; }
.nd-gal-nav:hover { background: rgb(255 255 255 / .16); }
.nd-gal-prev { left: 14px; }
.nd-gal-next { right: 14px; }
@media (max-width: 600px) {
  .nd-gal-label { width: 100%; }
  .nd-gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .nd-gal-nav { top: auto; bottom: 14px; transform: none; }
}

/* Homepage slider */
.nd-slider-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 40px; align-items: center; }
.nd-slider-text h2 { margin-bottom: 12px; }
.nd-slider { position: relative; }
.nd-slider-track { display: grid; border: 1px solid var(--nd-line); border-radius: 6px; overflow: hidden; background: #151918; }
.nd-slide { grid-area: 1 / 1; margin: 0; opacity: 0; transition: opacity .6s ease; position: relative; }
.nd-slide.is-on { opacity: 1; }
.nd-slide img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; }
.nd-slide figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 14px; font-size: 14px; color: #f2f3f2; background: linear-gradient(transparent, rgb(12 14 13 / .78)); }
.nd-slider-bar { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.nd-slider-dots { display: flex; gap: 6px; flex-wrap: wrap; margin-right: auto; }
.nd-slider-dot { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 1px solid var(--nd-muted); background: none; cursor: pointer; }
.nd-slider-dot[aria-current="true"] { background: var(--nd-accent); border-color: var(--nd-accent); }
.nd-slider-bar .nd-icon-btn { font-size: 22px; }
.nd-slider-pause { font: inherit; font-size: 14px; padding: 3px 12px; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); background: var(--nd-surface); color: var(--nd-fg); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .nd-slide { transition: none; } }
@media (max-width: 860px) { .nd-slider-wrap { grid-template-columns: 1fr; gap: 20px; } }
.nd-gal-search { font: inherit; font-size: 15px; flex: 1 1 260px; max-width: 420px; height: 34px; padding: 0 10px; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); background: var(--nd-surface); color: var(--nd-fg); }
.nd-gal-search:focus { outline: 2px solid var(--nd-accent); outline-offset: 1px; border-color: transparent; }
.nd-gallery.is-finding [data-gal-filter="kind"] { opacity: .45; }

/* The gallery's strip on Theme studio, its card on Features, and the pointer on Looks */
.nd-gal-teaser { margin: 0 0 28px; }
.nd-gal-teaser ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.nd-gal-teaser img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); }
.nd-gal-teaser a:hover img { border-color: var(--nd-accent); }
.nd-gal-teaser p { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin: 0; font-size: 15px; }
.nd-gal-card { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 20px; align-items: center; margin: 0 0 36px; padding: 14px; border: 1px solid var(--nd-line); border-radius: 6px; background: var(--nd-surface); color: var(--nd-fg); text-decoration: none; }
.nd-gal-card:hover { border-color: var(--nd-accent); }
.nd-gal-card img { display: block; width: 100%; height: auto; border-radius: var(--nd-radius); }
.nd-gal-card b { display: block; font-size: 19px; margin-bottom: 4px; }
.nd-gal-card .nd-muted { display: block; font-size: 15px; }
.nd-gal-card-go { display: block; margin-top: 8px; color: var(--nd-accent); font-weight: 600; font-size: 15px; }
.nd-gal-pointer { margin: 0 0 24px; font-size: 15px; }
@media (max-width: 700px) {
  .nd-gal-teaser ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .nd-gal-card { grid-template-columns: 1fr; }
}

/* ---------- Motion (homepage and Features) ----------
   Everything here holds still under prefers-reduced-motion; without
   JavaScript the page shows the first look and plain cards. */

/* Hero backdrop: a dot grid in the accent, drifting slowly, and a soft glow */
.nd-hero--live { position: relative; overflow: hidden; }
.nd-hero--live::before { content: ""; position: absolute; inset: -40px; pointer-events: none; background-image: radial-gradient(circle, rgb(47 125 85 / .22) 1.2px, transparent 1.6px); background-size: 22px 22px; animation: nd-drift 40s linear infinite; -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); mask-image: radial-gradient(ellipse at 70% 40%, #000 20%, transparent 70%); }
.nd-hero--live::after { content: ""; position: absolute; width: 620px; height: 620px; right: -120px; top: -160px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgb(47 125 85 / .16), transparent 65%); animation: nd-glow 14s ease-in-out infinite alternate; }
.nd-hero--live > * { position: relative; z-index: 1; }
:root[data-theme="dark"] .nd-hero--live::before { background-image: radial-gradient(circle, rgb(114 202 157 / .18) 1.2px, transparent 1.6px); }
@keyframes nd-drift { to { background-position: 220px 110px; } }
@keyframes nd-glow { to { transform: translate(-120px, 80px) scale(1.15); } }

/* Hero look switcher */
.nd-looks-shot { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--nd-line); box-shadow: 0 24px 60px rgb(35 42 39 / .18); aspect-ratio: 16 / 10; background: #151918; }
.nd-looks-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.02); transition: opacity .9s ease, transform 6s ease; }
.nd-looks-shot img.is-on { opacity: 1; transform: none; }
.nd-looks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; align-items: center; }
.nd-looks-label { font-size: 13px; color: var(--nd-muted); margin-right: 4px; }
.nd-look-chip { font: inherit; font-size: 13px; padding: 3px 11px; border: 1px solid var(--nd-line); border-radius: 99px; background: var(--nd-surface); color: var(--nd-muted); cursor: pointer; position: relative; overflow: hidden; }
.nd-look-chip:hover { color: var(--nd-fg); }
.nd-look-chip[aria-pressed="true"] { color: var(--nd-accent); border-color: var(--nd-accent); font-weight: 600; }
.nd-looks.is-auto .nd-look-chip[aria-pressed="true"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; background: var(--nd-accent); animation: nd-timer 5s linear forwards; }
@keyframes nd-timer { from { width: 0; } to { width: 100%; } }

/* Figures that count up */
.nd-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; text-align: center; margin: 0; padding: 0; list-style: none; }
.nd-stats b { display: block; font-family: var(--nd-font-mono); font-size: 34px; font-weight: 600; color: var(--nd-fg); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nd-stats span { font-size: 14px; color: var(--nd-muted); }

/* The terminal that types the command */
.nd-term { background: #151918; color: #e7e9e8; border-radius: 8px; font-family: var(--nd-font-mono); font-size: 14px; line-height: 1.7; overflow: hidden; border: 1px solid #313534; }
.nd-term-bar { display: flex; gap: 6px; padding: 9px 12px; background: #1d211f; border-bottom: 1px solid #313534; }
.nd-term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a403d; }
.nd-term pre { margin: 0; padding: 14px 16px; background: none; border: 0; color: inherit; min-height: 176px; white-space: pre-wrap; }
.nd-term .p, .nd-term .ok { color: #72ca9d; }
.nd-term .dim { color: #8b938f; }
.nd-cursor { display: inline-block; width: 8px; height: 1.1em; background: #72ca9d; vertical-align: -3px; animation: nd-blink 1s steps(1) infinite; }
@keyframes nd-blink { 50% { opacity: 0; } }
.nd-compose summary { cursor: pointer; font-size: 15px; color: var(--nd-accent); margin-top: 6px; }
.nd-compose pre { margin-top: 10px; }

/* Cards that play their recording on hover */
.nd-mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.nd-mcard { display: flex; flex-direction: column; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-surface); overflow: hidden; color: var(--nd-fg); text-decoration: none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
.nd-mcard:hover, .nd-mcard:focus-visible { transform: translateY(-4px); box-shadow: 0 14px 34px rgb(35 42 39 / .14); border-color: var(--nd-accent); color: var(--nd-fg); }
.nd-mcard-media { position: relative; aspect-ratio: 16 / 10; background: #151918; }
.nd-mcard-media img, .nd-mcard-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.nd-mcard-media video { opacity: 0; transition: opacity .3s; }
.nd-mcard.is-playing video { opacity: 1; }
.nd-mcard-play { position: absolute; right: 8px; bottom: 8px; font-size: 11px; font-family: var(--nd-font-mono); color: #fff; background: rgb(0 0 0 / .55); padding: 2px 7px; border-radius: 99px; transition: opacity .3s; }
.nd-mcard.is-playing .nd-mcard-play { opacity: 0; }
.nd-mcard-text { padding: 12px 14px 14px; }
.nd-mcard-text b { display: block; font-size: 17px; margin-bottom: 2px; }
.nd-mcard-text span { font-size: 14px; color: var(--nd-muted); }
.nd-mcard-text .nd-mcard-more { display: block; margin-top: 6px; color: var(--nd-accent); font-weight: 600; }

/* Sections that fade in once */
.nd-motion .nd-reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.nd-motion .nd-reveal.is-in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  .nd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nd-stats li:last-child { grid-column: 1 / -1; }
  .nd-mcards { grid-template-columns: 1fr; }
}
@media (min-width: 861px) and (max-width: 1100px) { .nd-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) {
  .nd-hero--live::before, .nd-hero--live::after, .nd-cursor { animation: none; }
  .nd-looks-shot img { transition: none; }
  .nd-mcard, .nd-mcard:hover { transition: none; transform: none; }
}
/* Should the script not run, sections show after a moment anyway. */
.nd-motion .nd-reveal:not(.is-in) { animation: nd-reveal-safety 0s 4s forwards; }
@keyframes nd-reveal-safety { to { opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-hero--live::before { background-image: radial-gradient(circle, rgb(114 202 157 / .18) 1.2px, transparent 1.6px); } }
.nd-looks-more { font-size: 14px; margin-left: 6px; color: var(--nd-accent); }
/* Seven figures: one row on a wide screen, wrapping evenly below that. */
.nd-stats { grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); row-gap: 24px; }
.nd-stats b { font-size: 30px; }
@media (max-width: 860px) { .nd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Only the look on show takes the click, so the large view opens that one
   and not the last picture in the stack. */
.nd-looks-shot img:not(.is-on) { pointer-events: none; }

/* ---------- Compare ---------- */
.nd-compare { padding-block: 40px 64px; }
.nd-cmp-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 0; margin: 8px 0 18px; font-size: 14px; color: var(--nd-muted); }
.nd-cmp-legend li { display: flex; align-items: center; gap: 6px; }
.nd-cmp-scroll { position: relative; overflow-x: auto; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-surface); }
.nd-cmp-scroll:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
.nd-cmp { width: 100%; min-width: 980px; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.nd-cmp th, .nd-cmp td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--nd-line); }
.nd-cmp thead th { background: var(--nd-surface); font-size: 15px; vertical-align: bottom; }
.nd-cmp thead th a { color: var(--nd-fg); text-decoration: none; font-weight: 600; }
.nd-cmp thead th small { display: block; font-weight: 400; font-size: 12px; color: var(--nd-muted); }
.nd-cmp .nd-cmp-feature { position: sticky; left: 0; z-index: 1; background: var(--nd-surface); min-width: 170px; font-weight: 600; color: var(--nd-fg); }
.nd-cmp thead .nd-cmp-feature { z-index: 3; }
.nd-cmp .nd-cmp-us { background: var(--nd-accent-soft); }
.nd-cmp thead .nd-cmp-us a { color: var(--nd-accent); }
.nd-cmp-group th { background: var(--nd-code-bg); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--nd-muted); padding-block: 8px; }
.nd-cmp-group th { text-align: left; }
.nd-cmp tfoot td, .nd-cmp tfoot th { border-bottom: 0; font-size: 13px; color: var(--nd-muted); }
.nd-cmp-text { color: var(--nd-fg); }
.nd-cmp-note { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.4; color: var(--nd-muted); }
.nd-cmp-quiet { opacity: .7; }
.nd-cmp-mark { display: inline-block; width: 12px; height: 12px; border-radius: 50%; vertical-align: -1px; flex: none; }
.nd-cmp-y { background: var(--nd-accent); }
.nd-cmp-p { background: linear-gradient(90deg, var(--nd-accent) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--nd-accent); }
.nd-cmp-n { box-shadow: inset 0 0 0 1.5px var(--nd-muted); }
.nd-cmp-u { box-shadow: inset 0 0 0 1.5px var(--nd-line); background: repeating-linear-gradient(45deg, transparent 0 2px, var(--nd-line) 2px 3px); }
.nd-cmp-x { width: 12px; height: 2px; border-radius: 1px; background: var(--nd-line); vertical-align: 3px; }
.nd-cmp-notes { margin-top: 48px; }
.nd-cmp-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 14px; }
.nd-cmp-card { border: 1px solid var(--nd-line); border-radius: 8px; padding: 16px 18px; background: var(--nd-surface); }
.nd-cmp-card h3 { margin: 0 0 8px; font-size: 18px; }
.nd-cmp-card h3 small { font-size: 13px; font-weight: 400; color: var(--nd-muted); margin-left: 4px; }
.nd-cmp-card p { font-size: 15px; margin: 0 0 8px; }
.nd-cmp-short { margin-top: 48px; }
.nd-cmp-short ul { padding-left: 20px; }
.nd-cmp-short li { margin-bottom: 6px; }
.nd-cmp-pointer { margin: -18px 0 32px; font-size: 15px; }
.nd-cmp-band { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.nd-cmp-band p:last-child { margin: 0; max-width: 60ch; color: var(--nd-muted); }

/* ---- Contact form (WPForms, modern markup) ------------------------------
   WPForms draws from its own variables on :root; set again on the container
   they follow the site's tokens, so light and dark come along. */
.nd-article .wpforms-container {
	--wpforms-field-border-radius: var(--nd-radius);
	--wpforms-field-border-size: 1px;
	--wpforms-field-background-color: var(--nd-surface);
	--wpforms-field-border-color: var(--nd-line);
	--wpforms-field-border-color-spare: var(--nd-line);
	--wpforms-field-text-color: var(--nd-fg);
	--wpforms-field-menu-color: var(--nd-surface);
	--wpforms-label-color: var(--nd-fg);
	--wpforms-label-sublabel-color: var(--nd-muted);
	--wpforms-button-border-radius: var(--nd-radius);
	--wpforms-button-border-size: 1px;
	--wpforms-button-background-color: var(--nd-accent);
	--wpforms-button-border-color: var(--nd-accent);
	--wpforms-button-text-color: var(--nd-on-accent);
	--wpforms-field-size-font-size: 16px;
	--wpforms-label-size-font-size: 15px;
	--wpforms-button-size-font-size: 15px;
	margin-top: 8px;
	font-family: var(--nd-font-body);
}
.nd-article .wpforms-container input,
.nd-article .wpforms-container textarea { font-family: inherit; }
.nd-article .wpforms-container input:focus,
.nd-article .wpforms-container textarea:focus {
	border-color: var(--nd-accent) !important;
	box-shadow: 0 0 0 3px var(--nd-accent-soft) !important;
	outline: none;
}
.nd-article .wpforms-container button[type=submit] { font-weight: 600; box-shadow: none; }
.nd-article .wpforms-container button[type=submit]:hover {
	background: var(--nd-accent-hover) !important;
	border-color: var(--nd-accent-hover) !important;
}
.nd-article .wpforms-container .wpforms-field-row,
.nd-article .wpforms-container .wpforms-field-medium { max-width: 100%; }
.nd-article .wpforms-confirmation-container-full {
	background: var(--nd-accent-soft);
	border: 1px solid var(--nd-accent);
	border-radius: var(--nd-radius);
	color: var(--nd-fg);
}

/* Install page: the link to the Unraid part, in Unraid's own orange */
.nd-unraid-wrap { margin: 0 0 24px; }
.nd-unraid-link { display: inline-block; font-size: 15px; font-weight: 600; padding: 8px 18px; border-radius: var(--nd-radius); background: #ff8c2f; border: 1px solid #ff8c2f; color: #1a1a1a; text-decoration: none; }
.nd-unraid-link:hover, .nd-unraid-link:focus-visible { background: #ffa04f; border-color: #ffa04f; color: #1a1a1a; }
.nd-content :target { scroll-margin-top: 80px; }

/* ---------- New and Recent features ----------
   A pill on the card picture for a feature in its first 14 days (New,
   filled) or up to 42 (Recent, outlined), the "since" line under the card
   title, the New block on top of Features with its All / New chips, the dot
   on Features in the menu and the pointer on the homepage. The windows are
   in inc/features.php; the pill pulses once on load, never with reduced motion. */
.nd-pill { display: inline-flex; align-items: center; font-family: var(--nd-font-body); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: .06em; text-transform: uppercase; padding: 5px 8px 5px; border-radius: var(--nd-radius); white-space: nowrap; vertical-align: 2px; }
.nd-pill--new { background: #2f7d55; color: #fff; box-shadow: 0 0 0 2px rgb(255 255 255 / .92), 0 2px 10px rgb(0 0 0 / .28); }
.nd-pill--recent { background: rgb(254 254 254 / .94); color: #2f7d55; box-shadow: inset 0 0 0 1.5px #2f7d55, 0 1px 6px rgb(0 0 0 / .16); }
:root[data-theme="dark"] .nd-pill--recent { background: rgb(21 25 24 / .9); color: #72ca9d; box-shadow: inset 0 0 0 1.5px #72ca9d, 0 1px 6px rgb(0 0 0 / .3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-pill--recent { background: rgb(21 25 24 / .9); color: #72ca9d; box-shadow: inset 0 0 0 1.5px #72ca9d, 0 1px 6px rgb(0 0 0 / .3); } }
.nd-pill--on-media { position: absolute; top: 10px; left: 10px; z-index: 2; }
.nd-mcard-text b .nd-pill { margin-right: 8px; }
.nd-mcard-text .nd-mcard-since { display: block; margin: 0 0 4px; font-family: var(--nd-font-mono); font-size: 12px; color: var(--nd-muted); letter-spacing: .01em; }
.nd-motion .nd-pill--new { animation: nd-pill-pulse 1.8s ease-out .5s 1 both; }
@keyframes nd-pill-pulse {
  0% { box-shadow: 0 0 0 2px rgb(255 255 255 / .92), 0 2px 10px rgb(0 0 0 / .28), 0 0 0 2px rgb(47 125 85 / .55); }
  100% { box-shadow: 0 0 0 2px rgb(255 255 255 / .92), 0 2px 10px rgb(0 0 0 / .28), 0 0 0 14px rgb(47 125 85 / 0); }
}

/* The New block on Features */
.nd-new-block { margin: 8px 0 44px; padding: 20px 20px 22px; border: 1px solid var(--nd-accent); border-radius: var(--nd-radius); background: var(--nd-accent-soft); scroll-margin-top: 84px; }
.nd-new-block:focus { outline: none; }
/* The way down to the full list: a filled button, not a text link. */
.nd-new-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 16px; flex-wrap: wrap; }
.nd-new-jump { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--nd-radius); background: var(--nd-accent); color: #fff; font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; box-shadow: 0 0 0 2px var(--nd-bg, #fff), 0 0 0 4px var(--nd-accent); }
.nd-new-jump:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.nd-new-jump:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.nd-new-jump--wide { display: flex; justify-content: center; margin-top: 18px; padding: 12px 16px; font-size: 16px; }
.nd-new-title { font-size: 22px; margin: 0 0 2px; }
.nd-new-sub { font-size: 15px; margin: 0 0 16px; }
.nd-mcards--new { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-bottom: 18px; }
.nd-mcards--new .nd-mcard-text { padding: 14px 18px 18px; }
.nd-mcards--new .nd-mcard-text b { font-size: 21px; }
.nd-mcards--new .nd-mcard-text span { font-size: 15.5px; }
.nd-mcards--new .nd-pill--on-media { top: 14px; left: 14px; font-size: 13px; padding: 6px 10px; }
.nd-mcards--new:last-child, .nd-mcards--recent:last-child { margin-bottom: 0; }
.nd-mcards--new .nd-mcard-text .nd-mcard-since { font-size: 12.5px; }
/* A card without a picture carries the pill before its title; keep the card text's colour off it */
.nd-mcard-text .nd-pill { font-size: 12px; }
.nd-mcard-text .nd-pill--new { color: #fff; }
.nd-mcard-text .nd-pill--recent { color: var(--nd-accent); }

/* All / New: both labels are bold all the time, so switching moves nothing */
.nd-feat-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.nd-feat-filter a { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; padding: 3px 12px; border: 1px solid var(--nd-line); border-radius: var(--nd-radius); background: var(--nd-surface); color: var(--nd-muted); text-decoration: none; }
.nd-feat-filter a:hover { color: var(--nd-fg); border-color: var(--nd-muted); }
.nd-feat-filter a[aria-current] { background: var(--nd-accent); border-color: var(--nd-accent); color: var(--nd-on-accent); }
.nd-feat-filter-n { font-family: var(--nd-font-mono); font-size: 12px; font-weight: 500; }
.nd-features-rest[hidden] { display: none; }

/* On a feature page, under the title */
.nd-feat-since { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: -2px 0 12px; font-family: var(--nd-font-mono); font-size: 13px; color: var(--nd-muted); }

/* The dot on Features in the menu, and the homepage pointer */
.nd-nav-dot { display: inline-block; width: 7px; height: 7px; margin-left: 5px; border-radius: 50%; background: var(--nd-accent); vertical-align: 5px; box-shadow: 0 0 0 2px var(--nd-bg); }
.nd-new-note { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 10px 0 0; font-size: 15.5px; }
.nd-new-note .nd-pill { vertical-align: 0; }

@media (max-width: 860px) {
  .nd-mcards--new { grid-template-columns: 1fr; }
  .nd-new-block { padding: 16px 14px 18px; margin-inline: -4px; }
}
@media (prefers-reduced-motion: reduce) { .nd-pill--new, .nd-motion .nd-pill--new { animation: none; } }

.nd-features-rest { scroll-margin-top: 84px; }

/* Integrations page illustrations */
.nd-integ-art { margin: 8px 0 22px; }
.nd-integ-art img { display:block; width:100%; max-width:560px; height:auto; }

/* ---- Compare: bars, jump links, topic sections, drawings ---- */
.nd-compare { --cmp-bad: #c0453a; --cmp-ok: var(--nd-accent); }
:root[data-theme="dark"] .nd-compare { --cmp-bad: #e8837a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-compare { --cmp-bad: #e8837a; } }
.nd-cmp-h { margin: 56px 0 8px; font-size: 28px; }
.nd-cmp-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.nd-cmp-jump a { font-size: 14px; padding: 4px 10px; border: 1px solid var(--nd-line); border-radius: 999px; text-decoration: none; color: var(--nd-fg); background: var(--nd-surface); }
.nd-cmp-jump a:hover { border-color: var(--nd-accent); color: var(--nd-accent); }
.nd-cmp-glance { margin-top: 36px; }
.nd-cmp-glance h2 { margin: 0 0 6px; font-size: 28px; }
.nd-cmp-bars { width: 100%; max-width: 760px; height: auto; display: block; margin-top: 14px; }
.nd-cmp-bar-name { font-size: 15px; fill: var(--nd-fg); }
.nd-cmp-bar-name.nd-cmp-bar-us { font-weight: 700; fill: var(--nd-accent); }
.nd-cmp-bar-track { fill: var(--nd-code-bg); }
.nd-cmp-bar-full { fill: var(--nd-muted); }
.nd-cmp-bar-full.nd-cmp-bar-us { fill: var(--nd-accent); }
.nd-cmp-bar-part { fill: var(--nd-line); }
.nd-cmp-bar-num { font-size: 13px; fill: var(--nd-muted); }
.nd-cmp-bars-key { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--nd-muted); margin: 8px 0 0; }
.nd-cmp-key { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.nd-cmp-key-full { background: var(--nd-accent); }
.nd-cmp-key-part { background: var(--nd-line); margin-left: 12px; }
.nd-motion .nd-cmp-bar { transform-box: fill-box; transform-origin: 0 50%; animation: cmp-grow 1.1s cubic-bezier(.2,.7,.2,1) both; }
@keyframes cmp-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.nd-cmp-topics { margin-top: 24px; }
.nd-cmp-topic { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 48px; align-items: center; margin: 44px 0; padding-top: 36px; border-top: 1px solid var(--nd-line); scroll-margin-top: 80px; }
.nd-cmp-topic.is-flip .nd-cmp-topic-text { order: 2; }
.nd-cmp-topic h3 { margin: 0 0 10px; font-size: 24px; }
.nd-cmp-topic-lead { font-size: 18px; }
.nd-cmp-topic ul { padding-left: 20px; margin: 10px 0 14px; }
.nd-cmp-topic li { margin-bottom: 6px; }
.nd-cmp-others { padding: 12px 14px; border-left: 3px solid var(--nd-line); background: var(--nd-code-bg); border-radius: 0 6px 6px 0; font-size: 15px; }
.nd-cmp-topic-art { display: grid; gap: 14px; }
.nd-cmp-topic-art figure { margin: 0; border: 1px solid var(--nd-line); border-radius: 8px; overflow: hidden; background: var(--nd-surface); }
.nd-cmp-topic-art img { display: block; width: 100%; height: auto; }
.nd-cmp-art { width: 100%; height: auto; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-surface); }
.nd-art-line { stroke: var(--nd-line); stroke-width: 2; fill: none; }
.nd-art-dash { stroke-dasharray: 5 5; }
.nd-art-text { font-size: 12px; fill: var(--nd-muted); font-family: var(--nd-font-body); }
.nd-art-mid { text-anchor: middle; }
.nd-art-onbtn { fill: var(--nd-on-accent); }
.nd-art-bar { fill: var(--nd-accent-soft); stroke: var(--nd-accent); stroke-width: 1.5; }
.nd-art-path { fill: none; stroke: var(--nd-accent); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.nd-art-forecast { fill: none; stroke: var(--cmp-bad); stroke-width: 3; stroke-dasharray: 6 6; stroke-linecap: round; }
.nd-art-ok { fill: var(--nd-accent); opacity: .85; }
.nd-art-bad { fill: var(--cmp-bad); }
.nd-art-dot-ok { fill: var(--nd-accent); }
.nd-art-dot-bad { fill: var(--cmp-bad); }
.nd-art-ring { fill: none; stroke: var(--cmp-bad); stroke-width: 2; }
.nd-art-scan { fill: none; stroke: var(--nd-fg); stroke-width: 2; }
.nd-art-box { fill: var(--nd-code-bg); stroke: var(--nd-line); stroke-width: 1.5; }
.nd-art-box-dash { stroke-dasharray: 5 4; }
.nd-art-link { fill: var(--nd-accent); }
.nd-art-btn { fill: var(--nd-accent); }
.nd-art-skip { fill: none; stroke: var(--nd-line); stroke-width: 1.5; }
.nd-art-bubble-me { fill: var(--nd-accent); }
.nd-art-mute { fill: var(--nd-line); }
.nd-art-update { fill: #d9822b; }
.nd-motion .nd-art-bar { transform-box: fill-box; transform-origin: 50% 100%; animation: cmp-rise 3.6s ease-in-out infinite; }
@keyframes cmp-rise { 0%, 8% { transform: scaleY(.15); } 35%, 85% { transform: scaleY(1); } 100% { transform: scaleY(.15); } }
.nd-motion .nd-art-path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: cmp-draw 3.6s ease-in-out infinite; }
@keyframes cmp-draw { 0% { stroke-dashoffset: 1; } 55%, 90% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 1; } }
.nd-motion .nd-art-forecast { stroke-dashoffset: 0; animation: cmp-dash 1.2s linear infinite; }
@keyframes cmp-dash { to { stroke-dashoffset: -24; } }
.nd-motion .nd-art-scan { animation: cmp-scan 6s steps(30) infinite; }
@keyframes cmp-scan { from { transform: translateX(0); } to { transform: translateX(330px); } }
.nd-motion .nd-art-ring { transform-box: fill-box; transform-origin: center; animation: cmp-pulse 1.8s ease-out infinite; }
@keyframes cmp-pulse { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
.nd-motion .nd-art-go-page { animation: cmp-to-page 4s ease-in-out infinite; }
.nd-motion .nd-art-go-unsorted { animation: cmp-to-unsorted 4s ease-in-out infinite; }
.nd-motion .nd-art-late { animation-delay: 1.4s; }
@keyframes cmp-to-page { 0%, 10% { transform: translate(0, 0); opacity: 1; } 55%, 75% { transform: translate(244px, -34px); opacity: 1; } 100% { transform: translate(244px, -34px); opacity: 0; } }
@keyframes cmp-to-unsorted { 0%, 25% { transform: translate(0, 0); opacity: 1; } 70%, 85% { transform: translate(244px, 22px); opacity: 1; } 100% { transform: translate(244px, 22px); opacity: 0; } }
.nd-motion .nd-art-update { transform-box: fill-box; transform-origin: center; animation: cmp-bob 1.4s ease-in-out infinite; }
@keyframes cmp-bob { 50% { transform: translateY(-3px); } }
.nd-motion .nd-art-flow { stroke: var(--nd-accent); stroke-dasharray: 6 6; animation: cmp-dash 1.2s linear infinite; }
.nd-motion .nd-art-pulse { transform-box: fill-box; transform-origin: center; animation: cmp-btn 2s ease-in-out infinite; }
@keyframes cmp-btn { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.nd-cmp-strengths { list-style: none; padding: 0; margin: 14px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.nd-cmp-strengths li { display: block; margin: 0; padding: 14px 16px; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-surface); }
.nd-cmp-strengths b { display: block; margin-bottom: 4px; }
.nd-cmp-strengths span { color: var(--nd-muted); font-size: 15px; }
.nd-cmp-short { margin-top: 40px; }
@media (max-width: 820px) {
  .nd-cmp-topic { grid-template-columns: minmax(0, 1fr); }
  .nd-cmp-topic.is-flip .nd-cmp-topic-text { order: 0; }
  .nd-cmp-h { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { .nd-cmp-bar, .nd-art-bar, .nd-art-path, .nd-art-forecast, .nd-art-scan, .nd-art-ring, .nd-art-update, .nd-art-flow, .nd-art-pulse, .nd-art-go-page, .nd-art-go-unsorted { animation: none !important; } }

/* ---- Feature pages: drawings, typing line, steps, facts, notes ---- */
.nd-art { margin: 24px 0 28px; max-width: 520px; }
.nd-art .nd-cmp-art { --cmp-bad: #c0453a; }
:root[data-theme="dark"] .nd-art .nd-cmp-art { --cmp-bad: #e8837a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .nd-art .nd-cmp-art { --cmp-bad: #e8837a; } }
.nd-art-big { font-size: 22px; font-weight: 700; fill: var(--nd-fg); }
.nd-art-bar-fill { fill: var(--nd-accent); }
.nd-art-swatch { }
.nd-art-shield { fill: var(--nd-accent-soft); stroke: var(--nd-accent); }
.nd-motion .nd-art-hop { animation: nd-hop 3s ease-in-out infinite; }
@keyframes nd-hop { 0%, 8% { transform: translateX(0); } 45%, 55% { transform: translateX(126px); } 92%, 100% { transform: translateX(252px); opacity: 1; } }
.nd-motion .nd-art-key { transform-box: fill-box; transform-origin: center; animation: nd-press 2.4s ease-in-out infinite; }
@keyframes nd-press { 0%, 60%, 100% { transform: translateY(0); } 25% { transform: translateY(6px); } }
.nd-motion .nd-art-swatch { transform-box: fill-box; transform-origin: 50% 100%; animation: nd-swatch 3s ease-in-out infinite; }
@keyframes nd-swatch { 0%, 100% { transform: scaleY(1); } 40% { transform: scaleY(.55); } }
.nd-motion .nd-art-tile-move { animation: nd-tile 3.6s ease-in-out infinite; }
@keyframes nd-tile { 0%, 15% { transform: translate(0, 0); } 50%, 80% { transform: translate(116px, 0); } 100% { transform: translate(0, 0); } }
.nd-motion .nd-art-typing { transform-box: fill-box; transform-origin: 0 50%; animation: cmp-grow 2.4s steps(14) infinite; }
.nd-motion .nd-art-result { animation: nd-fade 2.4s ease-out infinite both; }
@keyframes nd-fade { 0%, 15% { opacity: 0; transform: translateY(6px); } 40%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nd-motion .nd-art-copy { animation: nd-copy 3s ease-in-out infinite both; }
@keyframes nd-copy { 0%, 10% { opacity: 0; transform: translateY(10px); } 35%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nd-motion .nd-art-slide { animation: nd-slide 3s ease-in-out infinite both; }
@keyframes nd-slide { 0%, 10% { opacity: 0; transform: translateX(-12px); } 35%, 90% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.nd-motion .nd-art-badge { transform-box: fill-box; transform-origin: center; animation: cmp-btn 1.6s ease-in-out infinite; }
.nd-type { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 20px 0 24px; padding: 12px 16px; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-code-bg); font-family: var(--nd-font-mono); font-size: 16px; }
.nd-type-label { font-family: var(--nd-font-body); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--nd-muted); }
.nd-type-line { display: inline-block; }
.nd-type-text { display: inline-block; overflow: hidden; white-space: pre; vertical-align: bottom; width: calc(var(--n) * 1ch); border-right: 2px solid var(--nd-accent); }
.nd-type-result { color: var(--nd-accent); font-weight: 600; }
.nd-type-result::before { content: "= "; color: var(--nd-muted); }
.nd-motion .nd-type-text { width: 0; animation: nd-typing 5s steps(var(--n)) infinite, nd-caret 1s step-end infinite; }
.nd-motion .nd-type-result { animation: nd-result 5s ease infinite; }
@keyframes nd-typing { 0% { width: 0; } 45%, 100% { width: calc(var(--n) * 1ch); } }
@keyframes nd-caret { 50% { border-color: transparent; } }
@keyframes nd-result { 0%, 48% { opacity: 0; } 55%, 92% { opacity: 1; } 100% { opacity: 0; } }
.nd-steps { list-style: none; counter-reset: none; padding: 0 !important; margin: 20px 0 26px; display: grid; gap: 10px; }
.nd-steps li { display: flex; align-items: center; gap: 14px; margin: 0 !important; padding: 10px 14px; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-surface); }
.nd-steps-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 14px; background: var(--nd-accent-soft); color: var(--nd-accent); }
.nd-motion .nd-steps li { animation: nd-step calc(var(--n) * 1.4s) ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s); }
@keyframes nd-step { 0%, 24% { border-color: var(--nd-accent); background: var(--nd-accent-soft); } 30%, 100% { border-color: var(--nd-line); background: var(--nd-surface); } }
.nd-facts { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; padding: 0 !important; margin: 22px 0 26px; }
.nd-facts li { margin: 0 !important; padding: 14px 16px; border: 1px solid var(--nd-line); border-radius: 8px; background: var(--nd-surface); }
.nd-facts b { display: block; font-size: 30px; line-height: 1.1; color: var(--nd-accent); }
.nd-facts span { font-size: 14px; color: var(--nd-muted); }
.nd-motion .nd-facts b { animation: nd-pop .8s ease-out both; }
@keyframes nd-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } }
.nd-note { margin: 22px 0 26px; padding: 12px 16px; border-left: 3px solid var(--nd-accent); background: var(--nd-accent-soft); border-radius: 0 6px 6px 0; }
.nd-note b { display: block; margin-bottom: 2px; }
.nd-note p { margin: 0; font-size: 16px; }
@media (prefers-reduced-motion: reduce) { .nd-art-hop, .nd-art-key, .nd-art-swatch, .nd-art-tile-move, .nd-art-typing, .nd-art-result, .nd-art-copy, .nd-art-slide, .nd-art-badge, .nd-type-text, .nd-type-result, .nd-steps li, .nd-facts b { animation: none !important; } .nd-type-text { width: calc(var(--n) * 1ch) !important; } }

/* ---- Features overview: lead, facts, group intros ---- */
.nd-feat-lead { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 48px; align-items: center; margin: 8px 0 8px; }
.nd-feat-lead h2 { margin: 0 0 4px; font-size: 24px; }
.nd-feat-lead-art .nd-art { margin: 0; max-width: none; }
.nd-group-intro { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px 40px; align-items: center; margin: 4px 0 22px; }
.nd-group-intro p { margin: 0; font-size: 17px; }
.nd-group-intro .nd-art { margin: 0; max-width: none; }
@media (max-width: 820px) { .nd-feat-lead, .nd-group-intro { grid-template-columns: minmax(0, 1fr); } }

/* ---- Compare: menu button and call-to-action band ---- */
.nd-nav a.nd-nav-cta { color: var(--nd-on-accent); background: var(--nd-accent); padding: 5px 13px; border-radius: 999px; font-weight: 600; }
.nd-nav a.nd-nav-cta:hover, .nd-nav a.nd-nav-cta[aria-current] { color: var(--nd-on-accent); background: var(--nd-accent-hover); }
@media (max-width: 820px) { .nd-nav a.nd-nav-cta { display: inline-block; padding: 7px 16px; margin-top: 6px; } }
.nd-btn--lg { font-size: 17px; padding: 12px 24px; }
.nd-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: center; padding: 28px 32px; border: 1px solid var(--nd-accent); border-radius: 12px; background: linear-gradient(135deg, var(--nd-accent-soft), var(--nd-surface) 70%); }
.nd-cta h2 { margin: 2px 0 8px; font-size: 28px; border: 0; padding: 0; }
.nd-cta-text p { margin: 0 0 10px; }
.nd-cta-btns { margin-top: 16px !important; }
.nd-cta-art { display: block; }
.nd-cta-art .nd-cmp-bars { margin: 0; max-width: 100%; }
.nd-feat-cta { margin: 28px 0 8px; }
@media (max-width: 820px) { .nd-cta { grid-template-columns: minmax(0, 1fr); padding: 20px; } .nd-cta h2 { font-size: 24px; } }

/* ---- Front page: the foot of Also on board ---- */
.nd-also-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 32px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--nd-line); }
.nd-also-new { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.nd-also-new-label { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--nd-muted); }
.nd-also-new ul { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.nd-also-new a { display: inline-block; padding: 5px 13px; border: 1px solid var(--nd-line); border-radius: 999px; font-size: 15px; text-decoration: none; color: var(--nd-fg); background: var(--nd-surface); }
.nd-also-new a:hover { border-color: var(--nd-accent); color: var(--nd-accent); }

/* ---- Header: room for the Compare button ---- */
.nd-nav a { white-space: nowrap; }
@media (min-width: 821px) { .nd-nav ul { gap: 18px; } .nd-search { width: 200px; } }

/* ---- Compare: the "i" beside a row label and its popover ---- */
.nd-cmp .nd-cmp-feature .nd-cmp-label { margin-right: 6px; }
.nd-cmp-info { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; padding: 0; margin: 0; border: 1px solid var(--nd-line); border-radius: 50%; background: transparent; color: var(--nd-muted); font: italic 600 11px/1 Georgia, 'Times New Roman', serif; cursor: help; vertical-align: 1px; transition: color .15s, border-color .15s, background .15s; }
.nd-cmp-info:hover, .nd-cmp-info[aria-expanded="true"] { color: var(--nd-accent); border-color: var(--nd-accent); background: var(--nd-accent-soft); }
.nd-cmp-info:focus-visible { outline: 2px solid var(--nd-accent); outline-offset: 2px; }
.nd-cmp-pop { position: fixed; z-index: 1000; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--nd-line); border-radius: 6px; background: var(--nd-surface); color: var(--nd-fg); font-size: 14px; line-height: 1.45; font-weight: 400; box-shadow: 0 8px 24px rgba(0, 0, 0, .25); }
.nd-cmp-pop[hidden] { display: none; }