/* esm:https://esm.sh/*highlight.js@11.11.1/styles/github-dark.css?target=esnext */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
.hljs {
  color: #c9d1d9;
  background: #0d1117;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #ff7b72;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #d2a8ff;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: #79c0ff;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  color: #a5d6ff;
}
.hljs-built_in,
.hljs-symbol {
  color: #ffa657;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  color: #8b949e;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  color: #7ee787;
}
.hljs-subst {
  color: #c9d1d9;
}
.hljs-section {
  color: #1f6feb;
  font-weight: bold;
}
.hljs-bullet {
  color: #f2cc60;
}
.hljs-emphasis {
  color: #c9d1d9;
  font-style: italic;
}
.hljs-strong {
  color: #c9d1d9;
  font-weight: bold;
}
.hljs-addition {
  color: #aff5b4;
  background-color: #033a16;
}
.hljs-deletion {
  color: #ffdcd7;
  background-color: #67060c;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
}

/* esm:https://esm.sh/*highlight.js@11.11.1/styles/github.css?target=esnext */
pre code.hljs {
  display: block;
  overflow-x: auto;
  padding: 1em;
}
code.hljs {
  padding: 3px 5px;
}
.hljs {
  color: #24292e;
  background: #ffffff;
}
.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  color: #d73a49;
}
.hljs-title,
.hljs-title.class_,
.hljs-title.class_.inherited__,
.hljs-title.function_ {
  color: #6f42c1;
}
.hljs-attr,
.hljs-attribute,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-operator,
.hljs-variable,
.hljs-selector-attr,
.hljs-selector-class,
.hljs-selector-id {
  color: #005cc5;
}
.hljs-regexp,
.hljs-string,
.hljs-meta .hljs-string {
  color: #032f62;
}
.hljs-built_in,
.hljs-symbol {
  color: #e36209;
}
.hljs-comment,
.hljs-code,
.hljs-formula {
  color: #6a737d;
}
.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  color: #22863a;
}
.hljs-subst {
  color: #24292e;
}
.hljs-section {
  color: #005cc5;
  font-weight: bold;
}
.hljs-bullet {
  color: #735c0f;
}
.hljs-emphasis {
  color: #24292e;
  font-style: italic;
}
.hljs-strong {
  color: #24292e;
  font-weight: bold;
}
.hljs-addition {
  color: #22863a;
  background-color: #f0fff4;
}
.hljs-deletion {
  color: #b31d28;
  background-color: #ffeef0;
}
.hljs-char.escape_,
.hljs-link,
.hljs-params,
.hljs-property,
.hljs-punctuation,
.hljs-tag {
}

/* fs:/projects/nostrhub/src/index.css */
.syntax-highlighter {
  text-shadow: none !important;
  user-select: text;
  -webkit-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  will-change: auto;
  transform: translateZ(0);
}
.syntax-highlighter code {
  text-shadow: none !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  user-select: text;
  -webkit-user-select: text;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: hsl(var(--muted-foreground));
  font-style: italic;
  text-shadow: none !important;
}
.token.punctuation {
  color: hsl(var(--foreground));
  text-shadow: none !important;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
  color: hsl(var(--primary));
  text-shadow: none !important;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
  color: hsl(var(--accent));
  text-shadow: none !important;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
  color: hsl(var(--foreground));
  text-shadow: none !important;
}
.token.atrule,
.token.attr-value,
.token.keyword {
  color: hsl(280 100% 70%);
  text-shadow: none !important;
}
.token.function,
.token.class-name {
  color: hsl(var(--primary));
  font-weight: 600;
  text-shadow: none !important;
}
.token.regex,
.token.important,
.token.variable {
  color: hsl(var(--accent));
  text-shadow: none !important;
}
.token.important,
.token.bold {
  font-weight: bold;
  text-shadow: none !important;
}
.token.italic {
  font-style: italic;
  text-shadow: none !important;
}
.token.entity {
  cursor: help;
  text-shadow: none !important;
}
.dark .token.comment,
.dark .token.prolog,
.dark .token.doctype,
.dark .token.cdata {
  color: hsl(var(--muted-foreground));
  text-shadow: none !important;
}
.dark .token.property,
.dark .token.tag,
.dark .token.boolean,
.dark .token.number,
.dark .token.constant,
.dark .token.symbol,
.dark .token.deleted {
  color: hsl(var(--primary));
  text-shadow: none !important;
}
.dark .token.selector,
.dark .token.attr-name,
.dark .token.string,
.dark .token.char,
.dark .token.builtin,
.dark .token.inserted {
  color: hsl(var(--accent));
  text-shadow: none !important;
}
.dark .token.atrule,
.dark .token.attr-value,
.dark .token.keyword {
  color: hsl(280 100% 80%);
  text-shadow: none !important;
}
.dark .token.function,
.dark .token.class-name {
  color: hsl(var(--primary));
  font-weight: 600;
  text-shadow: none !important;
}
.dark .token.operator,
.dark .token.entity,
.dark .token.url {
  color: hsl(var(--foreground));
  text-shadow: none !important;
}
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 263 70% 50%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 207 97% 43%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 263 70% 50%;
    --radius: 0.75rem;
    --gradient-from: 263 70% 50%;
    --gradient-via: 280 100% 70%;
    --gradient-to: 180 100% 50%;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.9% 10%;
    --sidebar-primary: 263 70% 50%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 240 5.9% 90%;
    --sidebar-ring: 263 70% 50%;
  }
  .dark {
    --background: 240 10% 3.9%;
    --foreground: 0 0% 98%;
    --card: 240 10% 3.9%;
    --card-foreground: 0 0% 98%;
    --popover: 240 10% 3.9%;
    --popover-foreground: 0 0% 98%;
    --primary: 263 70% 50%;
    --primary-foreground: 0 0% 98%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 240 3.7% 15.9%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 180 100% 50%;
    --accent-foreground: 240 10% 3.9%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 263 70% 50%;
    --sidebar-background: 240 10% 3.9%;
    --sidebar-foreground: 0 0% 98%;
    --sidebar-primary: 263 70% 50%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 0 0% 98%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 263 70% 50%;
  }
}
@layer base {
  * {
    @apply border-border;
  }
  html {
    overflow-x: hidden;
  }
  body {
    @apply bg-background text-foreground;
    background-attachment: fixed;
    overflow-x: hidden;
    min-width: 320px;
  }
  body:not(.dark) {
    background-image:
      radial-gradient(
        at 40% 20%,
        hsl(var(--gradient-from) / 0.1) 0px,
        transparent 50%),
      radial-gradient(
        at 80% 0%,
        hsl(var(--gradient-via) / 0.1) 0px,
        transparent 50%),
      radial-gradient(
        at 0% 50%,
        hsl(var(--gradient-to) / 0.1) 0px,
        transparent 50%);
  }
  .dark body {
    background-image:
      radial-gradient(
        at 40% 20%,
        hsl(var(--gradient-from)) 0px,
        transparent 50%),
      radial-gradient(
        at 80% 0%,
        hsl(var(--gradient-via)) 0px,
        transparent 50%),
      radial-gradient(
        at 0% 50%,
        hsl(var(--gradient-to)) 0px,
        transparent 50%);
  }
  .container {
    max-width: 100%;
    overflow-x: hidden;
  }
}
@layer components {
  .gradient-text {
    @apply bg-gradient-to-r from-purple-400 to-pink-500 bg-clip-text text-transparent;
  }
  .neon-glow {
    box-shadow:
      0 0 5px hsl(var(--primary)),
      0 0 10px hsl(var(--primary)),
      0 0 15px hsl(var(--primary)),
      0 0 20px hsl(var(--primary));
  }
  .glass {
    @apply bg-white/5 backdrop-blur-md border border-white/10;
  }
  .gradient-border {
    position: relative;
    background: hsl(var(--card));
    border-radius: var(--radius);
  }
  .gradient-border::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1px;
    background:
      linear-gradient(
        45deg,
        hsl(var(--primary)),
        hsl(var(--accent)),
        hsl(var(--primary)));
    border-radius: inherit;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: xor;
    -webkit-mask-composite: xor;
  }
  .float {
    animation: float 6s ease-in-out infinite;
  }
  @keyframes float {
    0%, 100% {
      transform: translateY(0px);
    }
    50% {
      transform: translateY(-10px);
    }
  }
  .pulse-glow {
    animation: pulse-glow 2s infinite;
  }
  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 5px hsl(var(--primary)), 0 0 10px hsl(var(--primary));
    }
    50% {
      box-shadow:
        0 0 10px hsl(var(--primary)),
        0 0 20px hsl(var(--primary)),
        0 0 30px hsl(var(--primary));
    }
  }
  .cyber-grid {
    background-image:
      linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),
      linear-gradient(
        90deg,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px);
    background-size: 20px 20px;
  }
  .holographic {
    background:
      linear-gradient(
        45deg,
        hsl(var(--primary)) 0%,
        hsl(var(--accent)) 25%,
        hsl(var(--primary)) 50%,
        hsl(var(--accent)) 75%,
        hsl(var(--primary)) 100%);
    background-size: 400% 400%;
    animation: holographic 4s ease-in-out infinite;
  }
  @keyframes holographic {
    0%, 100% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
  }
  @media (max-width: 768px) {
    .container {
      padding-left: 1rem;
      padding-right: 1rem;
    }
    .card-content {
      word-wrap: break-word;
      overflow-wrap: break-word;
      hyphens: auto;
    }
    .mobile-button-stack {
      flex-direction: column;
      width: 100%;
    }
    .mobile-button-stack > * {
      width: 100%;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      line-height: 1.2;
      word-wrap: break-word;
    }
    .mobile-nav-spacing {
      gap: 0.5rem;
    }
    .mobile-safe {
      max-width: calc(100vw - 2rem);
      overflow-x: auto;
    }
  }
  .prose pre {
    border: 1px solid hsl(var(--primary) / 0.2) !important;
    border-radius: calc(var(--radius) - 2px) !important;
    overflow-x: auto;
    max-width: 100%;
  }
  .prose pre code {
    white-space: pre;
    word-wrap: normal;
  }
  .hljs {
    padding: 1rem !important;
    border-radius: calc(var(--radius) - 2px) !important;
    font-family:
      ui-monospace,
      SFMono-Regular,
      "SF Mono",
      Consolas,
      "Liberation Mono",
      Menlo,
      monospace !important;
    font-size: 0.875rem !important;
    line-height: 1.5 !important;
    overflow-x: auto !important;
  }
  .line-numbers {
    position: relative;
    padding-left: 3.8em;
    counter-reset: linenumber;
  }
  .line-numbers > code {
    position: relative;
    white-space: inherit;
  }
  .line-numbers .line-numbers-rows {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: -3.8em;
    width: 3em;
    letter-spacing: -1px;
    border-right: 1px solid hsl(var(--border));
    user-select: none;
    counter-reset: linenumber;
  }
  .line-numbers-rows > span {
    display: block;
    counter-increment: linenumber;
  }
  .line-numbers-rows > span:before {
    content: counter(linenumber);
    color: hsl(var(--muted-foreground));
    display: block;
    padding-right: 0.8em;
    text-align: right;
    font-size: 0.75rem;
    line-height: inherit;
  }
  .syntax-highlighter pre {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--muted-foreground)) hsl(var(--muted));
  }
  .syntax-highlighter pre::-webkit-scrollbar {
    height: 8px;
    width: 8px;
  }
  .syntax-highlighter pre::-webkit-scrollbar-track {
    background: hsl(var(--muted));
    border-radius: 4px;
  }
  .syntax-highlighter pre::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground));
    border-radius: 4px;
  }
  .syntax-highlighter pre::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--foreground));
  }
  .syntax-highlighter ::selection {
    background: hsl(var(--primary) / 0.3);
    color: inherit;
  }
  .syntax-highlighter ::-moz-selection {
    background: hsl(var(--primary) / 0.3);
    color: inherit;
  }
}
/*!
  Theme: GitHub Dark
  Description: Dark theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-dark
  Current colors taken from GitHub's CSS
*/
/*!
  Theme: GitHub
  Description: Light theme as seen on github.com
  Author: github.com
  Maintainer: @Hirse
  Updated: 2021-05-15

  Outdated base version: https://github.com/primer/github-syntax-light
  Current colors taken from GitHub's CSS
*/