/*
 * nebula.css: the redesign's design system.
 *
 * Loaded only on pages with `nebula: true` in front matter, and every class is
 * prefixed `nb-` so it cannot collide with the paper-era rules in main.css
 * while both stylesheets are on the site. When the redesign ships everywhere,
 * this file replaces main.css rather than merging into it.
 *
 * Colour is assigned by role rather than for decoration. The ink pair is the
 * notebook and its primary action. The spectrum belongs to the agent: the run
 * log, the MCP button, the connector lines. Amber and green are status only.
 * Creator hues identify a creator and appear nowhere else.
 */

.nb-wrap { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }

:root {
  --nb-page: #f8f7fb;
  --nb-card: #ffffff;
  --nb-ink: #14151c;
  --nb-ink-2: #4e5163;
  --nb-ink-3: #8b8ea0;
  --nb-line: #e3e2ec;
  --nb-brand: #3f33c7;
  --nb-night: #0e1224;
  --nb-night-2: #171c33;
  --nb-night-line: #262c47;
  --nb-teal: #5bd0b8;
  --nb-violet: #8c7bf0;
  --nb-coral: #ff8a6b;
  --nb-amber: #ffc46b;
  --nb-space: #070a1a;
  --nb-serif: 'Fraunces', Georgia, 'Times New Roman', serif;
}

.dark {
  --nb-page: #0b0d16;
  --nb-card: #141826;
  --nb-ink: #eceaf5;
  --nb-ink-2: #b0b2c6;
  --nb-ink-3: #7f8298;
  --nb-line: #232839;
  --nb-brand: #9d92f5;
}

.nb-hero, .nb-section, .nb-tools { font-family: inherit; }
.nb-section { background: var(--nb-page); color: var(--nb-ink); padding: 96px 0; }

/* ---------------------------------------------------------------- buttons */

.nb-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding-inline: 22px; border-radius: 9px;
  font-weight: 500; font-size: 15px; border: 0; cursor: pointer;
  text-decoration: none; white-space: nowrap;
}
.nb-btn-ink { background: #fff; color: var(--nb-space); }
.nb-btn-brand { background: var(--nb-brand); color: #fff; }
.nb-btn-quiet { background: var(--nb-night-line); color: #eceaf5; }
.nb-btn-spectrum {
  color: #fff;
  background: linear-gradient(100deg, var(--nb-brand) 0%, var(--nb-violet) 45%, var(--nb-coral) 100%);
}
.nb-section .nb-btn-ink { background: var(--nb-ink); color: var(--nb-page); }
.nb-section .nb-btn-quiet { background: var(--nb-line); color: var(--nb-ink); }

.nb-cta { display: flex; justify-content: center; gap: 12px; margin: 32px 0 56px; flex-wrap: wrap; }
.nb-cta-left { justify-content: flex-start; margin: 28px 0 0; }

/* ------------------------------------------------------------------- hero */

.nb-hero {
  position: relative; overflow: hidden;
  padding: 76px 0 0;
  background: var(--nb-space); color: #f3f2fa;
}
.nb-hero::after {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(7, 10, 26, .2) 0%, rgba(7, 10, 26, 0) 35%,
    rgba(7, 10, 26, 0) 62%, var(--nb-page) 100%);
}
.nb-hero > .nb-wrap { position: relative; z-index: 2; }

.nb-stars {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .55;
  animation: nb-twinkle 6s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 33% 8%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 58% 22%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 81% 12%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 92% 33%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 6% 46%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 46% 40%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 70% 48%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 24% 60%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 88% 58%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 40% 74%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 15% 84%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 64% 86%, #fff 60%, transparent 100%),
    radial-gradient(1.5px 1.5px at 76% 70%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 52% 4%, #fff 60%, transparent 100%),
    radial-gradient(1px 1px at 96% 90%, #fff 60%, transparent 100%);
}
@keyframes nb-twinkle { to { opacity: .9; } }

.nb-aurora {
  position: absolute; inset: -20% -10% auto -10%; height: 130%;
  z-index: 0; filter: blur(80px); opacity: .8; pointer-events: none;
}
.nb-aurora span { position: absolute; border-radius: 50%; mix-blend-mode: screen; will-change: transform; }
.nb-aurora .a { width: 56vw; height: 56vw; left: -12vw; top: -8vw;  background: #1d3fb8; animation: nb-drift-a 30s ease-in-out infinite alternate; }
.nb-aurora .b { width: 50vw; height: 50vw; left: 26vw;  top: -14vw; background: #7a3cf0; animation: nb-drift-b 36s ease-in-out infinite alternate; }
.nb-aurora .c { width: 46vw; height: 46vw; right: -8vw; top: -6vw;  background: #d9308f; animation: nb-drift-c 32s ease-in-out infinite alternate; }
.nb-aurora .d { width: 38vw; height: 38vw; right: 18vw; top: 14vw;  background: #19c6c0; opacity: .75; animation: nb-drift-d 40s ease-in-out infinite alternate; }
.nb-aurora .e { width: 34vw; height: 34vw; left: 8vw;   top: 22vw;  background: #ff7a3d; opacity: .5;  animation: nb-drift-c 44s ease-in-out infinite alternate-reverse; }
@keyframes nb-drift-a { to { transform: translate(10vw, 8vw) scale(1.15); } }
@keyframes nb-drift-b { to { transform: translate(-9vw, 7vw) scale(.88); } }
@keyframes nb-drift-c { to { transform: translate(-10vw, 5vw) scale(1.12); } }
@keyframes nb-drift-d { to { transform: translate(7vw, -9vw) scale(1.2); } }

.nb-h1 {
  font-family: var(--nb-serif); font-weight: 400;
  font-size: clamp(46px, 7.2vw, 88px); line-height: 1.02; letter-spacing: -.02em;
  text-align: center; max-width: 14ch; margin: 0 auto; color: #fff;
}
.nb-h1 em {
  font-style: italic;
  background: linear-gradient(95deg, #8fb4ff, #c79bff 40%, #ff8cc8 75%, #ffc46b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nb-lede { text-align: center; max-width: 44ch; margin: 24px auto 0; font-size: 18px; color: #c9cadf; }

.nb-clients { position: relative; z-index: 2; padding: 36px 0 80px; text-align: center; }
.nb-clients p { font-size: 13px; color: #8e90ac; margin: 0 0 22px; }
.nb-rail { display: flex; justify-content: center; gap: 44px; flex-wrap: wrap; font-weight: 500; font-size: 15px; color: #4a4d68; }
.nb-rail em { font-style: normal; color: #6e7090; font-weight: 400; }

/* ------------------------------------------------------------- app window */

.nb-glass {
  padding: 10px; border-radius: 20px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .28);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 40px 120px -30px rgba(60, 40, 160, .6);
}
.nb-app { background: #fff; color: #14151c; border-radius: 12px; border: 1px solid #e3e2ec; overflow: hidden; font-size: 12px; }
.nb-top { display: flex; align-items: center; gap: 14px; height: 44px; padding-inline: 14px; border-bottom: 1px solid #e3e2ec; }
.nb-logo { display: flex; align-items: center; gap: 8px; font-family: var(--nb-serif); font-size: 15px; font-weight: 500; }
.nb-mark { width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: #14151c; color: #fff; font-size: 13px; }
.nb-top nav { display: flex; gap: 6px; margin-left: 8px; }
.nb-top nav span { padding: 5px 10px; border-radius: 6px; color: #4e5163; }
.nb-top nav span.on { background: #f0eefb; color: var(--nb-brand); }
.nb-av { margin-left: auto; width: 24px; height: 24px; border-radius: 50%; background: #14151c; color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 600; }

.nb-body { display: grid; grid-template-columns: 172px 1fr; min-height: 560px; }
.nb-side { border-right: 1px solid #e3e2ec; padding: 12px; background: #fbfafd; }
.nb-new { display: block; background: #14151c; color: #fff; border-radius: 6px; text-align: center; padding: 7px; font-weight: 500; margin-bottom: 14px; }
.nb-side h6 { font-size: 10px; font-weight: 600; color: #8b8ea0; margin: 12px 0 6px; }
.nb-side a { display: block; padding: 5px 8px; border-radius: 5px; color: #4e5163; }
.nb-side a.on { background: #fff; border: 1px solid #e3e2ec; color: #14151c; }

.nb-main { padding: 14px 16px; }
.nb-title { font-size: 17px; font-weight: 600; margin-bottom: 4px; }
.nb-meta { color: #8b8ea0; font-size: 11px; margin-bottom: 12px; }
.nb-cols { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 12px; }
.nb-pane { border: 1px solid #e3e2ec; border-radius: 9px; padding: 12px; background: #fff; }
.nb-pane h5 { font-size: 11px; font-weight: 600; color: #8b8ea0; display: flex; justify-content: space-between; align-items: center; margin: 0 0 10px; }
.nb-src { border: 1px solid #e3e2ec; border-radius: 7px; padding: 9px 10px; margin-bottom: 8px; }
.nb-src b { display: block; font-weight: 500; font-size: 12px; }
.nb-src span { color: #8b8ea0; font-size: 10.5px; }

.nb-q { background: #14151c; color: #fff; border-radius: 7px; padding: 7px 10px; display: inline-block; margin-bottom: 8px; }
.nb-a { background: #f5f4f9; border-radius: 8px; padding: 10px; color: #4e5163; font-size: 11.5px; line-height: 1.5; }
.nb-a small { display: block; color: #8b8ea0; margin-top: 6px; }

.nb-run { margin-top: 10px; border: 1px solid #e3e2ec; border-radius: 8px; overflow: hidden; }
.nb-run h6 { font-size: 10.5px; font-weight: 600; margin: 0; padding: 7px 10px; background: #faf9fd; border-bottom: 1px solid #e3e2ec; display: flex; justify-content: space-between; color: #4e5163; }
.nb-run h6 i { font-style: normal; color: #158f6b; font-weight: 500; }
.nb-step { display: grid; grid-template-columns: 18px 1fr auto; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #e3e2ec; align-items: start; }
.nb-step:last-child { border-bottom: 0; }
.nb-ok { width: 16px; height: 16px; border-radius: 50%; background: #e4f6ee; color: #158f6b; display: grid; place-items: center; font-size: 10px; }
.nb-step code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--nb-brand); font-weight: 600; }
.nb-step small { display: block; color: #8b8ea0; font-size: 10.5px; margin-top: 2px; }
.nb-step time { font-size: 10px; color: #8b8ea0; }
.nb-ask { margin-top: 10px; border: 1px solid #e3e2ec; border-radius: 7px; padding: 8px 10px; color: #8b8ea0; display: flex; justify-content: space-between; }

.nb-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.nb-tile { border: 1px solid #e3e2ec; border-radius: 6px; padding: 8px 9px; font-size: 11.5px; display: flex; align-items: center; gap: 7px; font-weight: 500; }
.nb-tile i { width: 8px; height: 8px; border-radius: 2px; flex: none; background: currentColor; }
.nb-done { margin-top: 10px; border: 1px solid #e3e2ec; border-radius: 8px; padding: 10px; }
.nb-done b { font-weight: 500; display: block; }
.nb-chip { display: inline-block; margin: 6px 0; font-size: 10px; padding: 2px 8px; border-radius: 999px; background: #e4f6ee; color: #0b6e4f; font-weight: 500; }
.nb-acts { display: flex; gap: 6px; }
.nb-acts span { border: 1px solid #e3e2ec; border-radius: 5px; padding: 4px 8px; font-size: 10.5px; }

/* Creator hues. One per creator, used on the sidebar tiles and the preview
   panels below, and nowhere else, so a colour always means the same creator. */
.nb-t-pod    { color: #e0563c; } .nb-t-cards  { color: #b8720e; }
.nb-t-chart  { color: #3f86f0; } .nb-t-mind   { color: #7f77dd; }
.nb-t-info   { color: #d0428b; } .nb-t-book   { color: #159a7a; }
.nb-t-essay  { color: #8b7a3c; } .nb-t-guide  { color: #3f33c7; }
.nb-t-slides { color: #2cb37a; } .nb-t-time   { color: #d84a2a; }
.nb-t-wiki   { color: #5b6270; } .nb-t-soc    { color: #b8590c; }
.nb-t-cp     { color: #0f766e; } .nb-t-web    { color: #7c3aed; }
.nb-t-story  { color: #c4256e; }

/* ------------------------------------------------------- section headings */

.nb-h2 { font-family: var(--nb-serif); font-weight: 400; font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.02em; line-height: 1.08; max-width: 18ch; margin: 0; }
.nb-sub { color: var(--nb-ink-2); font-size: 17px; max-width: 52ch; margin-top: 14px; }
.nb-rule { height: 3px; border-radius: 2px; width: 120px; margin: 22px 0 40px; background: linear-gradient(90deg, var(--nb-teal), var(--nb-violet), var(--nb-coral), var(--nb-amber)); }
.nb-note { margin-top: 26px; font-size: 14px; color: var(--nb-ink-3); }
.nb-note a { color: var(--nb-brand); }

/* --------------------------------------------------------- creator tiles */

.nb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.nb-cr { background: var(--nb-card); border: 1px solid var(--nb-line); border-radius: 14px; overflow: hidden; color: inherit; text-decoration: none; display: block; transition: transform .25s ease, box-shadow .25s ease; }
.nb-cr:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -24px rgba(40, 30, 90, .35); }
.nb-pv { height: 120px; position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; padding: 14px; }
.nb-tx { padding: 14px 16px 16px; }
.nb-tx b { display: block; font-weight: 500; font-size: 15px; }
.nb-tx span { display: block; color: var(--nb-ink-3); font-size: 13px; margin-top: 3px; }

.nb-bars { display: flex; align-items: flex-end; gap: 3px; height: 70px; }
.nb-bars i { width: 5px; border-radius: 3px; background: currentColor; }
.nb-pv-pod { background: #fff0ea; color: #e0563c; }
.nb-pv-pod .nb-bars i { animation: nb-wave 1.6s ease-in-out infinite; }
.nb-pv-pod .nb-bars i:nth-child(odd) { animation-delay: .2s; }
.nb-pv-pod .nb-bars i:nth-child(3n) { animation-delay: .5s; }
@keyframes nb-wave { 0%, 100% { transform: scaleY(.5); } 50% { transform: scaleY(1); } }
.nb-pv-chart { background: #e8f0fe; color: #3f86f0; }
.nb-pv-chart .nb-bars i { width: 16px; border-radius: 4px 4px 0 0; }

.nb-pv-cards { background: #fff6e3; }
.nb-stack { position: relative; width: 120px; height: 74px; }
.nb-stack i { position: absolute; inset: 0; background: #fff; border: 1px solid #f0d9a6; border-radius: 8px; box-shadow: 0 4px 10px -6px rgba(0, 0, 0, .2); }
.nb-stack i:nth-child(2) { transform: translate(8px, -8px) rotate(3deg); }
.nb-stack i:nth-child(3) { transform: translate(16px, -16px) rotate(6deg); }
.nb-stack i::after { content: ''; position: absolute; left: 14px; top: 22px; width: 60%; height: 6px; border-radius: 3px; background: #f3dfb3; }

.nb-pv-mind { background: #eeebfd; color: #7f77dd; }
.nb-pv-mind svg { width: 150px; height: 84px; }
.nb-pv-mind .nb-hole { fill: #eeebfd; }

.nb-pv-info { background: #fdebf3; color: #f07bb5; }
.nb-rows { display: grid; gap: 6px; width: 130px; }
.nb-rows i { height: 10px; border-radius: 5px; background: currentColor; display: block; }
.nb-rows i:nth-child(2) { width: 70%; } .nb-rows i:nth-child(3) { width: 85%; } .nb-rows i:nth-child(4) { width: 55%; }

.nb-pv-book { background: #e3f7f1; }
.nb-bk { width: 110px; height: 78px; background: #fff; border-radius: 6px 10px 10px 6px; border-left: 8px solid #159a7a; box-shadow: 0 8px 16px -10px rgba(0, 0, 0, .3); padding: 10px; }
.nb-bk i { display: block; height: 5px; background: #cfede3; border-radius: 3px; margin-bottom: 6px; }
.nb-bk i:nth-child(2) { width: 70%; } .nb-bk i:nth-child(3) { width: 85%; }

.nb-pv-essay { background: #f5f1e3; }
.nb-ln { width: 130px; }
.nb-ln i { display: block; height: 5px; background: #d8cba0; border-radius: 3px; margin-bottom: 7px; }
.nb-ln i:first-child { height: 9px; width: 60%; background: #8b7a3c; }
.nb-ln i:nth-child(4) { width: 75%; }

.nb-pv-guide { background: #eceafb; }
.nb-chk { display: grid; gap: 8px; }
.nb-chk i { display: flex; align-items: center; gap: 8px; font-size: 11px; color: #2b2290; font-style: normal; }
.nb-chk i::before { content: '\2713'; width: 14px; height: 14px; border-radius: 4px; background: #3f33c7; color: #fff; font-size: 9px; display: grid; place-items: center; flex: none; }

.nb-pv-slides { background: #e5f6ec; }
.nb-dk { position: relative; width: 130px; height: 76px; }
.nb-dk i { position: absolute; inset: 0; background: #fff; border-radius: 6px; border: 1px solid #bfe5cf; }
.nb-dk i:nth-child(2) { transform: translate(-10px, 8px); opacity: .6; }
.nb-dk i:nth-child(3) { transform: translate(-20px, 16px); opacity: .3; }
.nb-dk i:first-child::after { content: ''; position: absolute; left: 12px; top: 12px; width: 50%; height: 8px; background: #2cb37a; border-radius: 4px; }

.nb-pv-time { background: #fdebe7; }
.nb-tl { position: relative; width: 150px; height: 2px; background: #e0563c; margin-bottom: 30px; }
.nb-tl i { position: absolute; top: -5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #e0563c; }

.nb-pv-wiki { background: #eeeff2; }
.nb-nd { display: flex; gap: 6px; flex-wrap: wrap; width: 140px; }
.nb-nd i { padding: 3px 8px; border-radius: 999px; background: #fff; border: 1px solid #cdd0d8; font-size: 10px; color: #3f4453; font-style: normal; }

.nb-pv-soc { background: #fdeee4; }
.nb-bb { display: grid; gap: 6px; width: 140px; }
.nb-bb i { display: block; padding: 5px 9px; border-radius: 10px; font-size: 10px; font-style: normal; background: #fff; color: #9a3f0c; width: 78%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-bb i:nth-child(2) { background: #9a3f0c; color: #fff; justify-self: end; }

.nb-pv-cp { background: #e2f3f1; }
.nb-two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 140px; }
.nb-two i { height: 60px; border-radius: 8px; background: #fff; border-top: 4px solid #0f766e; }
.nb-two i:last-child { border-top-color: #e0563c; }

.nb-pv-web { background: #f0e9fd; }
.nb-br { width: 140px; height: 80px; background: #fff; border-radius: 8px; border: 1px solid #d9ccf7; overflow: hidden; }
.nb-br::before { content: ''; display: block; height: 12px; background: #7c3aed; }
.nb-br i { display: block; margin: 10px; height: 6px; border-radius: 3px; background: #e6ddfb; }
.nb-br i:last-child { width: 50%; }

.nb-pv-story { background: #fce7f1; }
.nb-pg { width: 120px; height: 80px; border-radius: 8px; position: relative; background: linear-gradient(135deg, #f9a8d4, #db2777 60%, #7c3aed); }
.nb-pg::after { content: ''; position: absolute; left: 12px; top: 12px; width: 28px; height: 28px; border-radius: 50%; background: #ffd166; }

/* ---------------------------------------------------------- MCP dark band */

.nb-tools { position: relative; overflow: hidden; background: var(--nb-night); color: #f1f0f8; padding: 104px 0; }
.nb-glow { position: absolute; inset: auto -10% -30% -10%; height: 90%; filter: blur(90px); opacity: .55; pointer-events: none; }
.nb-glow span { position: absolute; border-radius: 50%; }
.nb-glow .a { width: 50vw; height: 50vw; left: 0;  bottom: -10vw; background: var(--nb-violet); animation: nb-drift-b 40s ease-in-out infinite alternate; }
.nb-glow .b { width: 44vw; height: 44vw; right: 0; bottom: -4vw;  background: var(--nb-teal);   animation: nb-drift-a 36s ease-in-out infinite alternate; }
.nb-tools-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px; align-items: center; }
.nb-tools .nb-sub { color: #b9b8cc; }

.nb-code { background: var(--nb-night-2); border: 1px solid var(--nb-night-line); border-radius: 14px; overflow: hidden; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.nb-bar { display: flex; gap: 6px; padding: 12px 14px; border-bottom: 1px solid var(--nb-night-line); }
.nb-bar i { width: 10px; height: 10px; border-radius: 50%; background: #3a4160; }
.nb-url { padding: 12px 16px; color: #b9b8cc; border-bottom: 1px solid var(--nb-night-line); overflow-wrap: anywhere; }
.nb-url b { color: #fff; font-weight: 500; }
.nb-code ul { list-style: none; padding: 8px 0; margin: 0; }
.nb-code li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 16px; color: #dddcec; }
.nb-code li b { color: var(--nb-teal); font-weight: 500; }
.nb-code li span { color: #7b809d; font-family: inherit; font-size: 12px; text-align: right; }

/* -------------------------------------------------------- workflow graphs */

.nb-flows { display: grid; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); gap: 14px; }
.nb-flow {
  background: var(--nb-night); color: #f1f0f8; border-radius: 14px;
  padding: 18px 18px 16px; position: relative; overflow: hidden;
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, .07) 1px, transparent 0);
  background-size: 14px 14px;
}
.nb-hd { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #8e90ac; margin-bottom: 14px; }
.nb-hd b { color: #f1f0f8; font-weight: 500; font-size: 14px; }
.nb-on { display: inline-flex; align-items: center; gap: 6px; }
.nb-on::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3ddc97; box-shadow: 0 0 0 3px rgba(61, 220, 151, .2); }
.nb-node { display: flex; align-items: center; gap: 10px; background: var(--nb-night-2); border: 1px solid var(--nb-night-line); border-radius: 9px; padding: 9px 12px; font-size: 13px; }
.nb-node i { width: 22px; height: 22px; border-radius: 6px; background: #2b3358; flex: none; }
.nb-node small { margin-left: auto; color: #7b809d; font-size: 11px; text-align: right; }
.nb-trig { border-color: var(--nb-coral); background: #2a1a1e; }
.nb-trig i { background: var(--nb-coral); }
.nb-link { height: 22px; width: 2px; margin-left: 22px; animation: nb-flow 1s linear infinite; background: repeating-linear-gradient(to bottom, var(--nb-teal) 0 5px, transparent 5px 10px); }
@keyframes nb-flow { to { background-position: 0 10px; } }

/* --------------------------------------------------------------- own grid */

.nb-own { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px 40px; }
.nb-own b { display: block; font-weight: 500; font-size: 16px; margin-bottom: 6px; }
.nb-own p { color: var(--nb-ink-2); font-size: 14px; margin: 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 900px) {
  .nb-body { grid-template-columns: 1fr; }
  .nb-side { display: none; }
  .nb-cols { grid-template-columns: 1fr; }
  .nb-tools-grid { grid-template-columns: 1fr; gap: 40px; }
  .nb-rail { gap: 24px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .nb-stars, .nb-aurora span, .nb-glow span, .nb-link, .nb-pv-pod .nb-bars i { animation: none; }
  .nb-cr { transition: none; }
}