.dot-background-root {
  --dot-gap: 18px;
  --dot-core: 0.345px;
  --dot-feather: 1.61px;
  --dot-color: color-mix(in srgb, var(--nt-icon-default) 17.5%, transparent);
  --dot-color-bright: color-mix(
    in srgb,
    var(--nt-icon-default) 35%,
    transparent
  );
  --base-opacity: 1;
  --ripple-opacity: 1;
  --ripple-filter: none;
  --label-hole-x: 210px;
  --label-hole-y: 72px;
  --mask-from: 80px;
  --mask-to: 1200px;
  --ripple-duration: 4s;
  --ripple-ease: cubic-bezier(0.33, 0, 0.2, 1);
  --spotlight-radius: 120px;
  --spotlight-opacity: 1;
  --spotlight-fade: 0.22s;
  pointer-events: none;
  contain: paint;
  -webkit-mask-image: radial-gradient(
    ellipse var(--label-hole-x) var(--label-hole-y) at 50% 50%,
    transparent 0%,
    transparent 28%,
    #00000059 55%,
    #000 100%
  );
  -webkit-mask-image: radial-gradient(
    ellipse var(--label-hole-x) var(--label-hole-y) at 50% 50%,
    transparent 0%,
    transparent 28%,
    #00000059 55%,
    #000 100%
  );
  mask-image: radial-gradient(
    ellipse var(--label-hole-x) var(--label-hole-y) at 50% 50%,
    transparent 0%,
    transparent 28%,
    #00000059 55%,
    #000 100%
  );
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
@supports (width: round(down, 100%, 1px)) {
  .dot-background-root {
    width: round(down, 100%, var(--dot-gap));
    height: round(down, 100%, var(--dot-gap));
    inset: 50% auto auto 50%;
    translate: -50% -50%;
  }
}
.dark .dot-background-root {
  --dot-core: 0.3px;
  --dot-feather: 1.4px;
  --dot-color: #ffffff1a;
  --dot-color-bright: #ffffffb3;
  --ripple-filter: none;
}
.dot-background-base,
.dot-background-ripple {
  background-image: radial-gradient(
    circle,
    var(--dot-color) var(--dot-core),
    transparent var(--dot-feather)
  );
  background-position: 0 0;
  background-size: var(--dot-gap) var(--dot-gap);
  position: absolute;
  inset: 0;
}
.dot-background-base {
  opacity: var(--base-opacity);
}
.dot-background-ripple {
  background-image: radial-gradient(
    circle,
    var(--dot-color-bright) var(--dot-core),
    transparent var(--dot-feather)
  );
  filter: var(--ripple-filter);
  opacity: 0;
  -webkit-mask-image: radial-gradient(
    circle,
    #0000 18%,
    #0003 32%,
    #000000d9 50%,
    #0003 68%,
    #0000 82%
  );
  mask-image: radial-gradient(
    circle,
    #0000 18%,
    #0003 32%,
    #000000d9 50%,
    #0003 68%,
    #0000 82%
  );
  -webkit-mask-position: 50%;
  mask-position: 50%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: var(--mask-from) var(--mask-from);
  -webkit-mask-size: var(--mask-from) var(--mask-from);
  mask-size: var(--mask-from) var(--mask-from);
  animation: dot-background-create-dot-ripple-mask var(--ripple-duration)
    var(--ripple-ease) infinite;
}
.dot-background-ripple-delay2 {
  animation-delay: calc(var(--ripple-duration) / -2);
}
.dot-background-spotlight {
  --mx: 50%;
  --my: 50%;
  background-image: radial-gradient(
    circle,
    var(--dot-color-bright) var(--dot-core),
    transparent var(--dot-feather)
  );
  background-position: 0 0;
  background-size: var(--dot-gap) var(--dot-gap);
  filter: var(--ripple-filter);
  opacity: 0;
  transition: opacity var(--spotlight-fade) ease;
  -webkit-mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--mx) var(--my),
    #000 0%,
    #000000d9 28%,
    #00000059 55%,
    transparent 72%
  );
  -webkit-mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--mx) var(--my),
    #000 0%,
    #000000d9 28%,
    #00000059 55%,
    transparent 72%
  );
  mask-image: radial-gradient(
    circle var(--spotlight-radius) at var(--mx) var(--my),
    #000 0%,
    #000000d9 28%,
    #00000059 55%,
    transparent 72%
  );
  position: absolute;
  inset: 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.dot-background-root[data-hover="true"] .dot-background-spotlight {
  opacity: var(--spotlight-opacity);
}
@keyframes dot-background-create-dot-ripple-mask {
  0% {
    -webkit-mask-size: var(--mask-from) var(--mask-from);
    -webkit-mask-size: var(--mask-from) var(--mask-from);
    mask-size: var(--mask-from) var(--mask-from);
    opacity: 0;
  }
  16% {
    opacity: var(--ripple-opacity);
  }
  to {
    -webkit-mask-size: var(--mask-to) var(--mask-to);
    -webkit-mask-size: var(--mask-to) var(--mask-to);
    mask-size: var(--mask-to) var(--mask-to);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .dot-background-ripple {
    opacity: 0.3;
    animation: none;
    -webkit-mask-size: 280px 280px;
    mask-size: 280px 280px;
  }
  .dot-background-ripple-delay2,
  .dot-background-spotlight {
    display: none;
  }
}
@property --feature-grid-fade-start {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --feature-grid-fade-end {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@keyframes scroll-fade-feature-grid-scroll-fade-x {
  0% {
    --feature-grid-fade-start: 0;
  }
  10%,
  to {
    --feature-grid-fade-start: var(--feature-grid-fade-size, 24px);
  }
  0%,
  90% {
    --feature-grid-fade-end: var(--feature-grid-fade-size, 24px);
  }
  to {
    --feature-grid-fade-end: 0;
  }
}
@media (min-width: 768px) {
  .scroll-fade-scroll-area {
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
  }
  .scroll-fade-scroll-area:hover {
    scrollbar-color: color-mix(in srgb, var(--fg-subtle) 55%, transparent)
      transparent;
  }
  @supports selector(::-webkit-scrollbar) {
    .scroll-fade-scroll-area,
    .scroll-fade-scroll-area:hover {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    .scroll-fade-scroll-area::-webkit-scrollbar {
      height: 7px;
    }
    .scroll-fade-scroll-area::-webkit-scrollbar-button {
      width: 0;
      height: 0;
      display: none;
    }
    .scroll-fade-scroll-area::-webkit-scrollbar-track {
      background: 0 0;
    }
    .scroll-fade-scroll-area::-webkit-scrollbar-thumb {
      background-color: #0000;
      background-clip: padding-box;
      border: 2px solid #0000;
      border-radius: 999px;
    }
    .scroll-fade-scroll-area:hover::-webkit-scrollbar-thumb {
      background-color: color-mix(in srgb, var(--fg-subtle) 55%, transparent);
    }
  }
  .scroll-fade-scroll-fade-x {
    --feature-grid-fade-size: 24px;
    -webkit-mask-image: linear-gradient(
      to right,
      #0000,
      #000 var(--feature-grid-fade-start, 0),
      #000 calc(100% - var(--feature-grid-fade-end, 0)),
      #0000
    );
    -webkit-mask-image: linear-gradient(
      to right,
      #0000,
      #000 var(--feature-grid-fade-start, 0),
      #000 calc(100% - var(--feature-grid-fade-end, 0)),
      #0000
    );
    mask-image: linear-gradient(
      to right,
      #0000,
      #000 var(--feature-grid-fade-start, 0),
      #000 calc(100% - var(--feature-grid-fade-end, 0)),
      #0000
    );
  }
  @supports (animation-timeline: scroll()) {
    .scroll-fade-scroll-fade-x {
      animation: linear both scroll-fade-feature-grid-scroll-fade-x;
      animation-timeline: scroll(self inline);
    }
  }
  @supports not (animation-timeline: scroll()) {
    .scroll-fade-scroll-fade-x {
      --feature-grid-fade-start: var(--feature-grid-fade-size, 24px);
      --feature-grid-fade-end: var(--feature-grid-fade-size, 24px);
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .scroll-fade-scroll-fade-x {
      --feature-grid-fade-start: var(--feature-grid-fade-size, 24px);
      --feature-grid-fade-end: var(--feature-grid-fade-size, 24px);
      animation: none;
    }
  }
}
@property --tv-show-guide-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.canvas-guide-guide {
  --tv-show-guide-glint-strong: #00000047;
  --tv-show-guide-glint-soft: #0000001f;
  --tv-show-guide-glass-bg: #ffffffb8;
  isolation: isolate;
  background-color: var(--tv-show-guide-glass-bg);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  backdrop-filter: blur(24px) saturate(140%);
}
.dark .canvas-guide-guide {
  --tv-show-guide-glint-strong: #ffffffb8;
  --tv-show-guide-glint-soft: #ffffff47;
  --tv-show-guide-glass-bg: #1f1f1fad;
}
.canvas-guide-guide:before {
  z-index: 1;
  border-radius: inherit;
  background: conic-gradient(
    from var(--tv-show-guide-angle),
    var(--tv-show-guide-glint-strong) 0deg,
    var(--tv-show-guide-glint-soft) 20deg,
    transparent 58deg,
    transparent 302deg,
    var(--tv-show-guide-glint-soft) 340deg,
    var(--tv-show-guide-glint-strong) 360deg
  );
  pointer-events: none;
  content: "";
  opacity: 0;
  -webkit-mask-composite: xor;
  padding: 1px;
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  mask-image: linear-gradient(#fff 0 0), linear-gradient(#fff 0 0);
  -webkit-mask-position:
    0 0,
    0 0;
  mask-position:
    0 0,
    0 0;
  -webkit-mask-size: auto, auto;
  mask-size: auto, auto;
  -webkit-mask-repeat: repeat, repeat;
  mask-repeat: repeat, repeat;
  -webkit-mask-clip: content-box, border-box;
  mask-clip: content-box, border-box;
  -webkit-mask-origin: content-box, border-box;
  mask-origin: content-box, border-box;
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-mask-source-type: auto, auto;
  mask-mode: match-source, match-source;
}
.canvas-guide-guide:hover:before {
  opacity: 1;
  animation: 3s linear infinite canvas-guide-tv-show-guide-border-orbit;
}
@keyframes canvas-guide-tv-show-guide-border-orbit {
  to {
    --tv-show-guide-angle: 360deg;
  }
}
@media (prefers-reduced-motion: reduce) {
  .canvas-guide-guide:hover:before {
    opacity: 0.72;
    animation: none;
  }
}
.aligned-grid-grid {
  --columns: 2;
  --gap: 8px;
  --card-info-height: 80px;
  grid-template-columns: repeat(var(--columns), minmax(0, 1fr));
  gap: var(--gap);
  display: grid;
}
@supports (width: round(down, 1px, 1px)) {
  .aligned-grid-grid {
    --column-width: round(
      down,
      (100cqw - (var(--columns) - 1) * var(--gap)) / var(--columns),
      1px
    );
    grid-template-columns: repeat(var(--columns), var(--column-width));
  }
  .aligned-grid-aligned-rows {
    grid-auto-rows: round(
      nearest,
      (var(--column-width) - 8px) * 9 / 16 + var(--card-info-height),
      1px
    );
    align-items: start;
  }
}
@media (min-width: 768px) {
  .aligned-grid-grid {
    --gap: 16px;
    --card-info-height: 76px;
  }
}
@container not (max-width:790px) {
  .aligned-grid-grid {
    --columns: 3;
  }
}
@container not (max-width:1059px) {
  .aligned-grid-grid {
    --columns: 4;
  }
}