@rynt/sdk 0.9.53

package/src/shared/styles/index.css

@@ -0,0 +1,713 @@
+@import 'tailwindcss';
+@source "../ui/**/*.{vue,ts}";
+
+@custom-variant dark (&:where(.dark, .dark *));
+
+@plugin 'tailwind-scrollbar';
+
+/* Semantic tokens: cool slate / indigo neutrals; :root = light, .dark = dark */
+
+:root {
+  --font-size: 16px;
+  --background: #e9edf6;
+  --foreground: #171a26;
+  --card: #f6f8fd;
+  --card-foreground: #171a26;
+  --popover: #f4f7fc;
+  --popover-foreground: #171a26;
+  --primary: #5865f2;
+  --primary-hover: #4752c4;
+  --primary-foreground: #ffffff;
+  --secondary: #dfe4f0;
+  --secondary-foreground: #171a26;
+  --muted: #dbe0ed;
+  --muted-foreground: #4b5166;
+  --subtle-fg: #5d657d;
+  --accent: #5865f2;
+  --accent-foreground: #ffffff;
+  --destructive: #ed4245;
+  --destructive-foreground: #ffffff;
+  --destructive-soft: #c81e2a;
+  --success: #43b581;
+  --warning: #faa61a;
+  --warning-foreground: #1f1a14;
+  --accent-secondary: #7289da;
+  --border: rgba(88, 101, 242, 0.14);
+  --border-strong: rgba(88, 101, 242, 0.22);
+  --input: rgba(88, 101, 242, 0.1);
+  --input-background: #dee3ef;
+  --surface-raised: #dfe5f1;
+  --surface-overlay: #eef2fa;
+  --surface-solid: #f2f5fb;
+  --surface-list: #e6ebf5;
+  --surface-list-hover: #d7deed;
+  --switch-background: #c7cad8;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-normal: 400;
+  --ring: #5865f2;
+  --radius-ui-sm: 1px;
+  --radius-ui-md: 2px;
+  --radius-ui-lg: 4px;
+  --radius-ui-xl: 6px;
+  --radius: var(--radius-ui-md);
+  --sidebar: #e1e7f5;
+  --sidebar-foreground: #171a26;
+  --sidebar-primary: #5865f2;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #d2d9ea;
+  --sidebar-accent-foreground: #171a26;
+  --sidebar-border: rgba(88, 101, 242, 0.12);
+  --sidebar-ring: #5865f2;
+  --app-grid-line: rgba(88, 101, 242, 0.12);
+  --scrollbar-thumb: rgba(23, 26, 38, 0.22);
+  --scrollbar-thumb-hover: rgba(23, 26, 38, 0.35);
+}
+
+.dark {
+  --background: #141824;
+  --foreground: #f6f7fb;
+  --card: rgba(42, 47, 58, 0.48);
+  --card-foreground: #f6f7fb;
+  --popover: #252a38;
+  --popover-foreground: #f6f7fb;
+  --primary: #5865f2;
+  --primary-hover: #4752c4;
+  --primary-foreground: #ffffff;
+  --secondary: #2d3346;
+  --secondary-foreground: #f6f7fb;
+  --muted: #252a38;
+  --muted-foreground: #b4bacb;
+  --subtle-fg: #858ca3;
+  --accent: #5865f2;
+  --accent-foreground: #ffffff;
+  --destructive: #ed4245;
+  --destructive-foreground: #ffffff;
+  --destructive-soft: #fcb0b1;
+  --success: #43b581;
+  --warning: #faa61a;
+  --warning-foreground: #1a1410;
+  --accent-secondary: #7289da;
+  --border: rgba(88, 101, 242, 0.12);
+  --border-strong: rgba(88, 101, 242, 0.22);
+  --input: rgba(88, 101, 242, 0.12);
+  --input-background: #2d3346;
+  --surface-raised: #242a3a;
+  --surface-overlay: rgba(42, 47, 58, 0.48);
+  --surface-solid: #1a1f2e;
+  --surface-list: #181c29;
+  --surface-list-hover: #222735;
+  --switch-background: #5a6278;
+  --font-weight-medium: 600;
+  --font-weight-semibold: 600;
+  --font-weight-normal: 400;
+  --ring: #5865f2;
+  --sidebar: #252a38;
+  --sidebar-foreground: #f6f7fb;
+  --sidebar-primary: #5865f2;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #2d3346;
+  --sidebar-accent-foreground: #f6f7fb;
+  --sidebar-border: rgba(88, 101, 242, 0.1);
+  --sidebar-ring: #5865f2;
+  --app-grid-line: rgba(108, 116, 142, 0.42);
+  --scrollbar-thumb: rgba(255, 255, 255, 0.14);
+  --scrollbar-thumb-hover: rgba(255, 255, 255, 0.24);
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-hover: var(--primary-hover);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-subtle-fg: var(--subtle-fg);
+  --color-accent: var(--accent);
+  --color-accent-secondary: var(--accent-secondary);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-input-background: var(--input-background);
+  --color-surface-raised: var(--surface-raised);
+  --color-surface-overlay: var(--surface-overlay);
+  --color-surface-solid: var(--surface-solid);
+  --color-surface-list: var(--surface-list);
+  --color-surface-list-hover: var(--surface-list-hover);
+  --color-switch-background: var(--switch-background);
+  --color-ring: var(--ring);
+  --color-border-strong: var(--border-strong);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-destructive-soft: var(--destructive-soft);
+  --color-chart-1: #5865f2;
+  --color-chart-2: #7289da;
+  --color-chart-3: #8a9eb0;
+  --color-chart-4: #43b581;
+  --color-chart-5: #faa61a;
+  --radius-sm: var(--radius-ui-sm);
+  --radius-md: var(--radius-ui-md);
+  --radius-lg: var(--radius-ui-lg);
+  --radius-xl: var(--radius-ui-xl);
+}
+
+@layer base {
+  html {
+    font-size: var(--font-size);
+  }
+
+  body.radius-scale-none {
+    --radius-ui-sm: 0px;
+    --radius-ui-md: 0px;
+    --radius-ui-lg: 0px;
+    --radius-ui-xl: 0px;
+  }
+
+  body.radius-scale-standard {
+    --radius-ui-sm: 1px;
+    --radius-ui-md: 2px;
+    --radius-ui-lg: 4px;
+    --radius-ui-xl: 6px;
+  }
+
+  body.radius-scale-medium {
+    --radius-ui-sm: 2px;
+    --radius-ui-md: 4px;
+    --radius-ui-lg: 8px;
+    --radius-ui-xl: 12px;
+  }
+
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+  }
+
+  /* Кастомные скроллбары (thumb цвет от темы) */
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--scrollbar-thumb) transparent;
+  }
+
+  *::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+
+  *::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  *::-webkit-scrollbar-thumb {
+    background: var(--scrollbar-thumb);
+    border-radius: 0;
+    transition: background 0.2s ease;
+  }
+
+  *::-webkit-scrollbar-thumb:hover {
+    background: var(--scrollbar-thumb-hover);
+  }
+
+  *::-webkit-scrollbar-corner {
+    background: transparent;
+  }
+}
+
+/* Фон как на zaklauncher.xyz: сетка + лёгкий blurple-свет сверху */
+@layer utilities {
+  .rnt-app-grid {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    background-image:
+      linear-gradient(to right, var(--app-grid-line) 1px, transparent 1px),
+      linear-gradient(to bottom, var(--app-grid-line) 1px, transparent 1px);
+    background-size: 4rem 4rem;
+    -webkit-mask-image: radial-gradient(
+      ellipse 72% 58% at 50% -6%,
+      #000 50%,
+      transparent 102%
+    );
+    mask-image: radial-gradient(
+      ellipse 72% 58% at 50% -6%,
+      #000 50%,
+      transparent 102%
+    );
+  }
+
+  .rnt-app-grid-glow {
+    pointer-events: none;
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      to bottom,
+      color-mix(in srgb, var(--primary) 14%, transparent) 0%,
+      transparent 48%
+    );
+  }
+
+  /**
+   * Tabs variant rail: `flex-row lg:flex-col` из SFC `@rynt/sdk` часто не попадает в Tailwind,
+   * тогда rail остаётся горизонтальным на десктопе. Брейкпоинт 1024px = `lg` у Tailwind.
+   */
+  .rnt-rail-tabs {
+    display: flex;
+    width: 100%;
+    flex-shrink: 0;
+    gap: 0.25rem;
+    flex-direction: row;
+    overflow-x: auto;
+    margin-left: -0.25rem;
+    margin-right: -0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-bottom: 0.5rem;
+  }
+
+  @media (min-width: 1024px) {
+    .rnt-rail-tabs {
+      width: auto;
+      flex-direction: column;
+      overflow: visible;
+      margin-left: 0;
+      margin-right: 0;
+      padding-left: 0;
+      padding-right: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  /**
+   * Button / заливки: `bg-destructive`, `bg-primary` из SFC SDK могут отсутствовать в Tailwind — без фона у danger и др.
+   */
+  .rnt-btn-primary {
+    background-color: var(--primary);
+    color: var(--primary-foreground);
+  }
+  .rnt-btn-primary:hover:not(:disabled) {
+    background-color: var(--primary-hover);
+  }
+
+  .rnt-btn-secondary {
+    background-color: var(--surface-overlay);
+    color: var(--muted-foreground);
+  }
+  .rnt-btn-secondary:hover:not(:disabled) {
+    background-color: var(--secondary);
+    color: var(--foreground);
+  }
+
+  .rnt-btn-danger {
+    background-color: var(--destructive);
+    color: var(--destructive-foreground);
+  }
+  .rnt-btn-danger:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  .rnt-btn-ghost {
+    background-color: transparent;
+    color: var(--muted-foreground);
+  }
+  .rnt-btn-ghost:hover:not(:disabled) {
+    background-color: var(--card);
+    color: var(--foreground);
+  }
+
+  .rnt-btn-success {
+    background-color: var(--success);
+    color: #ffffff;
+  }
+  .rnt-btn-success:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  .rnt-btn-warning {
+    background-color: var(--warning);
+    color: var(--warning-foreground);
+  }
+  .rnt-btn-warning:hover:not(:disabled) {
+    opacity: 0.9;
+  }
+
+  .rnt-fill-primary {
+    background-color: var(--primary);
+  }
+  .rnt-fill-success {
+    background-color: var(--success);
+  }
+  .rnt-fill-warning {
+    background-color: var(--warning);
+  }
+  .rnt-fill-danger {
+    background-color: var(--destructive);
+  }
+
+  .rnt-dialog {
+    background-color: var(--surface-solid);
+  }
+
+  /**
+   * Switch / checkbox-toggle из SFC: `sr-only`, `peer-checked:*` не попадают в скан @tailwindcss/vite,
+   * на экране остаётся нативный input. Стили только через классы из этого файла.
+   */
+  .rnt-switch {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .rnt-switch--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .rnt-switch-input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+    opacity: 0;
+  }
+
+  .rnt-switch-track {
+    position: relative;
+    display: inline-block;
+    width: 2.75rem;
+    height: 1.5rem;
+    flex-shrink: 0;
+    background-color: var(--switch-background);
+    border-radius: 9999px;
+    transition:
+      background-color 0.2s ease,
+      box-shadow 0.15s ease;
+  }
+
+  .rnt-switch-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 1.25rem;
+    height: 1.25rem;
+    background-color: #ffffff;
+    border-radius: 9999px;
+    transition: transform 0.2s ease;
+    box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
+  }
+
+  .rnt-switch-input:focus-visible + .rnt-switch-track {
+    box-shadow:
+      0 0 0 2px var(--background, #17191e),
+      0 0 0 4px var(--ring);
+  }
+
+  .rnt-switch-input:checked + .rnt-switch-track {
+    background-color: var(--primary);
+  }
+
+  .rnt-switch-input:checked + .rnt-switch-track .rnt-switch-thumb {
+    transform: translateX(1.25rem);
+  }
+
+  .rnt-switch-input:disabled + .rnt-switch-track {
+    opacity: 0.85;
+  }
+
+  /**
+   * Кнопки микрофона/камеры/сброса в сайдбаре при активном звонке.
+   * Ghost + произвольные hover из Tailwind в SDK часто отсутствуют в CSS; rnt-btn-ghost:hover ломает задуманные цвета.
+   */
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl {
+    color: var(--foreground);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl:not(:last-child) {
+    border-right: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl--muted {
+    background-color: rgba(239, 68, 68, 0.2);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl--muted:hover:not(:disabled) {
+    background-color: rgba(239, 68, 68, 0.32);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl--live {
+    background-color: color-mix(in srgb, var(--muted) 60%, transparent);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl--live:hover:not(:disabled) {
+    background-color: var(--muted);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl--hangup {
+    background-color: rgba(239, 68, 68, 0.2);
+  }
+  .rnt-sidebar-call-strip .rnt-sidebar-callCtl--hangup:hover:not(:disabled) {
+    background-color: rgba(239, 68, 68, 0.34);
+  }
+
+  /**
+   * Card / вертикальный стек секций: строки классов из <script setup> (cn и т.п.) не всегда
+   * попадают в скан @tailwindcss/vite, поэтому тень карточки и space-y-5/8 «исчезали» из бандла.
+   */
+  .rnt-card {
+    background-color: var(--card);
+    border-radius: var(--radius-ui-md);
+    overflow: hidden;
+    transition:
+      background-color 200ms ease,
+      border-color 200ms ease,
+      transform 200ms ease,
+      box-shadow 200ms ease;
+  }
+
+  .rnt-card--raised {
+    border-radius: var(--radius-ui-lg);
+    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
+    box-shadow:
+      0 12px 40px -12px rgb(0 0 0 / 0.16),
+      inset 0 0 0 1px rgb(88 101 242 / 0.06);
+  }
+
+  .rnt-card--interactive {
+    cursor: pointer;
+  }
+
+  .rnt-card--interactive:hover {
+    background-color: color-mix(in srgb, var(--foreground) 7%, var(--card));
+    border-color: color-mix(in srgb, var(--primary) 18%, transparent);
+    transform: translateY(-2px);
+    box-shadow:
+      0 18px 50px -14px rgb(0 0 0 / 0.62),
+      0 0 24px -8px rgb(88 101 242 / 0.14);
+  }
+
+  .rnt-section-stack {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .rnt-section-stack--none {
+    gap: 0;
+  }
+
+  .rnt-section-stack--sm {
+    gap: 0.75rem;
+  }
+
+  .rnt-section-stack--md {
+    gap: 1.25rem;
+  }
+
+  .rnt-section-stack--lg {
+    gap: 2rem;
+  }
+
+  /**
+   * Build editor — blueprint / graph-workshop aesthetic (aligned with rnt-website tokens)
+   */
+  .be-root {
+    background: linear-gradient(
+      165deg,
+      color-mix(in srgb, var(--background) 80%, var(--surface-solid)) 0%,
+      color-mix(in srgb, var(--surface-raised) 62%, var(--surface-solid)) 42%,
+      color-mix(in srgb, var(--background) 72%, var(--surface-solid)) 100%
+    );
+  }
+
+  .be-blueprint-canvas {
+    position: relative;
+    isolation: isolate;
+    background-color: color-mix(
+      in srgb,
+      var(--surface-list) 86%,
+      var(--surface-solid)
+    );
+    background-image:
+      linear-gradient(rgba(88, 101, 242, 0.034) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(88, 101, 242, 0.034) 1px, transparent 1px),
+      linear-gradient(rgba(114, 137, 218, 0.06) 1px, transparent 1px),
+      linear-gradient(90deg, rgba(114, 137, 218, 0.06) 1px, transparent 1px);
+    background-size:
+      16px 16px,
+      16px 16px,
+      128px 128px,
+      128px 128px;
+    background-position:
+      0 0,
+      0 0,
+      -1px -1px,
+      -1px -1px;
+  }
+
+  .be-blueprint-canvas::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+    pointer-events: none;
+    background: radial-gradient(
+      ellipse 95% 65% at 50% -8%,
+      color-mix(in srgb, var(--primary) 16%, transparent),
+      transparent 58%
+    );
+    opacity: 0.35;
+  }
+
+  .be-blueprint-canvas > * {
+    position: relative;
+    z-index: 1;
+  }
+
+  .be-toolbar {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--surface-raised) 30%, var(--surface-solid)) 0%,
+      color-mix(in srgb, var(--surface-solid) 92%, var(--surface-list)) 100%
+    );
+    border-bottom: 1px solid color-mix(in srgb, var(--primary) 12%, transparent);
+    box-shadow:
+      0 1px 0 color-mix(in srgb, var(--accent-secondary) 8%, transparent),
+      inset 0 -1px 0 rgba(0, 0, 0, 0.35);
+  }
+
+  .be-toolbar-accent {
+    height: 2px;
+    background: linear-gradient(
+      90deg,
+      transparent 0%,
+      color-mix(in srgb, var(--primary) 70%, transparent) 18%,
+      color-mix(in srgb, var(--accent-secondary) 55%, transparent) 50%,
+      color-mix(in srgb, var(--primary) 70%, transparent) 82%,
+      transparent 100%
+    );
+    opacity: 0.85;
+  }
+
+  .be-rail {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--surface-solid) 88%, var(--surface-list)) 0%,
+      color-mix(in srgb, var(--surface-list) 88%, var(--surface-solid)) 52%,
+      color-mix(in srgb, var(--surface-solid) 92%, var(--surface-raised)) 100%
+    );
+    border-right: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
+    box-shadow: inset -1px 0 0 rgba(0, 0, 0, 0.45);
+  }
+
+  .be-rail-meta {
+    font-size: 0.5625rem;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: color-mix(
+      in srgb,
+      var(--accent-secondary) 75%,
+      var(--muted-foreground)
+    );
+    opacity: 0.92;
+  }
+
+  .be-node-panel {
+    border: 1px solid color-mix(in srgb, var(--primary) 18%, transparent);
+    background: color-mix(in srgb, var(--surface-overlay) 92%, transparent);
+    box-shadow:
+      inset 0 1px 0 color-mix(in srgb, var(--accent-secondary) 10%, transparent),
+      0 4px 28px rgba(0, 0, 0, 0.42);
+    backdrop-filter: blur(8px);
+  }
+
+  .be-node-panel-header {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding-bottom: 0.75rem;
+    margin-bottom: 0.25rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
+  }
+
+  .be-node-panel-header::before {
+    content: '';
+    width: 3px;
+    align-self: stretch;
+    min-height: 1rem;
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--primary) 85%, transparent),
+      color-mix(in srgb, var(--accent-secondary) 45%, transparent)
+    );
+    border-radius: var(--radius-ui-sm);
+  }
+
+  .be-scroll-well {
+    background: color-mix(in srgb, var(--surface-list) 86%, transparent);
+    border: 1px solid color-mix(in srgb, var(--primary) 8%, transparent);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
+  }
+
+  .be-sub-toolbar {
+    background: linear-gradient(
+      180deg,
+      color-mix(in srgb, var(--surface-raised) 25%, var(--surface-solid)) 0%,
+      color-mix(in srgb, var(--surface-solid) 94%, var(--surface-list)) 100%
+    );
+    border-bottom: 1px solid color-mix(in srgb, var(--primary) 10%, transparent);
+    box-shadow: inset 0 1px 0
+      color-mix(in srgb, var(--accent-secondary) 6%, transparent);
+  }
+
+  .be-section-label {
+    font-size: 0.625rem;
+    font-weight: 600;
+    letter-spacing: 0.14em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+    opacity: 0.92;
+  }
+}
+
+/* .main-background {
+  background:
+    linear-gradient(rgb(0 0 0 / 73%), rgb(0 0 0 / 79%)),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAYdpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0n77u/JyBpZD0nVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkJz8+DQo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIj48cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSJ1dWlkOmZhZjViZGQ1LWJhM2QtMTFkYS1hZDMxLWQzM2Q3NTE4MmYxYiIgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPjx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+PC9yZGY6RGVzY3JpcHRpb24+PC9yZGY6UkRGPjwveDp4bXBtZXRhPg0KPD94cGFja2V0IGVuZD0ndyc/PiyUmAsAAAIuSURBVDhPVZJLbtswEIY/apHUpCO59SOklkF8uJzCuadadxWJgdE2okUqQGBNF7aJZIBZDEDO/C+12+0kxsjnMsawWCwQEZqmYbvdEkJgGAZEBKUUoJibGYWIoLWmrmucc9R1TVVVtG1L27bM53MAyrLEOcc4jhhj0FoTh0hRFAWHw4Gu6/De0zQNbdsiIgBYa/He0/c9IQRWqxVlWYICMzdnBNvtFq01s9mM1WpFjDGjOh6P3N7eklIipcQ4jnjvGdOITIJ6fn6WsiwB6LouXxYRiqLIs3MOpVTWYJqE3/uGIsZI13WEENBao7UGyI+11qSUCCHQ9z3ee7quY7/f82O5onDOYa1lmqaLuufPV0GVUiyXS0QEEcFai3OOh4cH/v35e6bApYZhyJc/o4gxYozJB7hYPU2ns4hlWXJ3d0eMkfv7e5RSmY7WmsfHR+q6xlqbu6oqvi8WFFzE895jjMF7j4gwjiPTNHE4HAghEELAe59bROj7/rxAa421NsNzzuGc4/39HREhpZSDZK3FGEMI4azb09OTrNdriqJgmiZSShhj8rKqqgAIIWRtqqpCRPj1s6HYbDaklIgxMo4jQJ5TSnnRMAwMw0CMkbZt8a+vrNfrr0G61pVfSumLE/P5nNlshlKKsqxQCGq328nVnpRSTtrVd2MMIsJisYALlRjj2anZt3MSryp/fHwQQmCz2eCcwxjD6XRCKcXb2xsvLy8cj0dOpxM3N7eICP8BxDhsd/idP9MAAAAASUVORK5CYII=);
+  background-size: 64px;
+  image-rendering: pixelated;
+}
+
+.sidebar-background {
+  background:
+    linear-gradient(
+      90deg,
+      rgb(0 0 0 / 62%) 0%,
+      rgb(0 0 0 / 50%) 0%,
+      rgb(0 0 0 / 71%) 2%,
+      rgb(0 0 0 / 87%) 100%
+    ),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAYdpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0n77u/JyBpZD0nVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkJz8+DQo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIj48cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSJ1dWlkOmZhZjViZGQ1LWJhM2QtMTFkYS1hZDMxLWQzM2Q3NTE4MmYxYiIgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPjx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+PC9yZGY6RGVzY3JpcHRpb24+PC9yZGY6UkRGPjwveDp4bXBtZXRhPg0KPD94cGFja2V0IGVuZD0ndyc/PiyUmAsAAAMXSURBVDhPLZJJbxtlAEDfN+O0jlNvSjJu0nhJDqVJXIcLbpoFihACKq60CPghHA3iJ1VcuMZNlEoc8NL0QD3jpfF43Hg8drzF830cwu1J7/ie+POPX5RlXyGlotnpA/D53iaW3ceXPs1OH6Wg3nFJGVECus5hNs1JyeTgcRp9y4gWFoMBzioNwot30HUNH+gl8vx9dkr8XpCjbIbw0l2G4xn7uylMu0e51qZk2ohXv/+sTssWc+nTcjx+/CpHsVxHKghogoPdFGfVOr6UoMDquGhC8OJZjtOLOprl9BkaWY5zW2Tux6i1XRp2Dx3FwW6KZtdjNX4PgDUjRjoR5+WXOZrdPnIu0XzfJ9T5h2bX5elumvNqnfxOEgUUSyaT2Zw3b+v4Et6pFCCwbJdiyUTTBFq7O6DRdrmZS6yOS9KIoQlBw3YxbZc3Fw0erETRNXCrJ0gpaTkeSSPGYTaDePXbT6pYNhEChKazlP2aQekv8Occ5TYBKJYtDrNpxP98fyVM++OADSOGnklEC0IpjnIZ0kaUSedfIosLDEZTmk6fOYpqzSYcCtIfTegNxwxHM9ZXIigF2vpKBASclEzeX/Zo2j2kUvhKUbvs0bL75LeTSKVo2C66EAjgtGLxodtH/3QrUVhbCVOt2QjtVlbetxmMZiSNKADj6Q3eaIoCjvc2SSfi9Ecz1pbD6MfZVCESuoMmBMe5TVJGnOF4yjf5hyAEVcvh+ZNHpIwYrysWoeAC3nSOzBzTrV2gv/hit9ByPIQQ+CiGkynZdILzt01CobuMjBwLIxv3eoSSUDVt1pfDXFnvaHauEL/+cKhajkt+J8lld8D6aoSAppFajfK6YnEjASUJaBq+ur0xENA42EmDAE3TBPntDT44HgowuzOsdg/T7pFYjqChuPw44MlOilZ3gACebqdpOB6m7d5WaDkezY7L4U6KBTnGavew7D7nFYujxxlePstxXq3z2ScPQECxbHLjz5G+RP9+/2HhenLDd/uPaF15RJaC6AGdyN63BEeXCAHeeIZ7PWE0nbORiBENL9FyPKqWw39vS5Ei63xEngAAAABJRU5ErkJggg==);
+  background-size:
+    100% 100%,
+    64px;
+  image-rendering: pixelated;
+  border-left: 2px solid #0e0e0e;
+} */
+
+/* .rnt-card {
+  background:
+    linear-gradient(rgba(0, 0, 0, 0.226), rgba(0, 0, 0, 0.253)),
+    url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAOdEVYdFNvZnR3YXJlAEZpZ21hnrGWYwAAAYdpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0n77u/JyBpZD0nVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkJz8+DQo8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIj48cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPjxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSJ1dWlkOmZhZjViZGQ1LWJhM2QtMTFkYS1hZDMxLWQzM2Q3NTE4MmYxYiIgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iPjx0aWZmOk9yaWVudGF0aW9uPjE8L3RpZmY6T3JpZW50YXRpb24+PC9yZGY6RGVzY3JpcHRpb24+PC9yZGY6UkRGPjwveDp4bXBtZXRhPg0KPD94cGFja2V0IGVuZD0ndyc/PiyUmAsAAAMXSURBVDhPLZJJbxtlAEDfN+O0jlNvSjJu0nhJDqVJXIcLbpoFihACKq60CPghHA3iJ1VcuMZNlEoc8NL0QD3jpfF43Hg8drzF830cwu1J7/ie+POPX5RlXyGlotnpA/D53iaW3ceXPs1OH6Wg3nFJGVECus5hNs1JyeTgcRp9y4gWFoMBzioNwot30HUNH+gl8vx9dkr8XpCjbIbw0l2G4xn7uylMu0e51qZk2ohXv/+sTssWc+nTcjx+/CpHsVxHKghogoPdFGfVOr6UoMDquGhC8OJZjtOLOprl9BkaWY5zW2Tux6i1XRp2Dx3FwW6KZtdjNX4PgDUjRjoR5+WXOZrdPnIu0XzfJ9T5h2bX5elumvNqnfxOEgUUSyaT2Zw3b+v4Et6pFCCwbJdiyUTTBFq7O6DRdrmZS6yOS9KIoQlBw3YxbZc3Fw0erETRNXCrJ0gpaTkeSSPGYTaDePXbT6pYNhEChKazlP2aQekv8Occ5TYBKJYtDrNpxP98fyVM++OADSOGnklEC0IpjnIZ0kaUSedfIosLDEZTmk6fOYpqzSYcCtIfTegNxwxHM9ZXIigF2vpKBASclEzeX/Zo2j2kUvhKUbvs0bL75LeTSKVo2C66EAjgtGLxodtH/3QrUVhbCVOt2QjtVlbetxmMZiSNKADj6Q3eaIoCjvc2SSfi9Ecz1pbD6MfZVCESuoMmBMe5TVJGnOF4yjf5hyAEVcvh+ZNHpIwYrysWoeAC3nSOzBzTrV2gv/hit9ByPIQQ+CiGkynZdILzt01CobuMjBwLIxv3eoSSUDVt1pfDXFnvaHauEL/+cKhajkt+J8lld8D6aoSAppFajfK6YnEjASUJaBq+ur0xENA42EmDAE3TBPntDT44HgowuzOsdg/T7pFYjqChuPw44MlOilZ3gACebqdpOB6m7d5WaDkezY7L4U6KBTnGavew7D7nFYujxxlePstxXq3z2ScPQECxbHLjz5G+RP9+/2HhenLDd/uPaF15RJaC6AGdyN63BEeXCAHeeIZ7PWE0nbORiBENL9FyPKqWw39vS5Ei63xEngAAAABJRU5ErkJggg==);
+  background-size:
+    100% 100%,
+    64px;
+  image-rendering: pixelated;
+} */