HugoBlox-kit/modules/blox/assets/css/components/notebook.css

.hb-notebook {
  --hb-notebook-output-max-height: 26rem;
  @apply relative isolate my-10 rounded-3xl border border-zinc-200/70 bg-white/90 p-6 shadow-xl shadow-primary-500/5 transition-shadow duration-300;
  @apply dark:border-zinc-800/70 dark:bg-zinc-900/70 dark:shadow-black/30 text-zinc-800 dark:text-zinc-50;
}

.hb-notebook::after {
  content: "";
  @apply pointer-events-none absolute inset-0 rounded-3xl bg-gradient-to-r from-primary-500/5 via-transparent to-secondary-500/5 opacity-0 transition-opacity duration-300;
}

.hb-notebook:hover::after {
  @apply opacity-100;
}

.hb-notebook--dense {
  @apply p-4;
}

.hb-notebook-header {
  @apply flex flex-wrap items-start justify-between gap-4 border-b border-zinc-200/70 pb-4 dark:border-zinc-800/70;
}

.hb-notebook-heading {
  @apply space-y-1;
}

.hb-notebook-title {
  @apply text-lg font-semibold text-zinc-900 dark:text-white tracking-tight;
}

.hb-notebook-subtitle {
  @apply text-sm font-medium text-zinc-500 dark:text-zinc-400;
}

.hb-notebook-download {
  @apply inline-flex items-center gap-2 rounded-full border border-primary-500/70 px-4 py-2 text-sm font-medium text-primary-600 no-underline transition-all duration-200;
  @apply hover:-translate-y-0.5 hover:bg-primary-50/60 hover:text-primary-700 dark:text-primary-300 dark:border-primary-400/60 dark:hover:bg-primary-500/10;
}

.hb-notebook-download svg {
  @apply h-4 w-4;
}

.hb-notebook-metadata {
  @apply mt-4 grid gap-3 rounded-2xl border border-dashed border-zinc-200/70 px-4 py-3 text-sm;
  @apply dark:border-zinc-800/70;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.hb-notebook-metadata dt {
  @apply text-xs uppercase tracking-wide text-zinc-500 dark:text-zinc-400;
}

.hb-notebook-metadata dd {
  @apply font-medium text-zinc-800 dark:text-zinc-100;
}

.hb-notebook-body {
  @apply mt-6 flex flex-col gap-5;
}

.hb-notebook-cell {
  @apply rounded-2xl border border-zinc-200/70 bg-white p-4 shadow-sm shadow-zinc-200/60 transition-all duration-200;
  @apply dark:border-zinc-800/60 dark:bg-zinc-900/70 dark:shadow-none;
}

.hb-notebook-cell--markdown {
  @apply bg-gradient-to-br from-white via-white to-primary-50/40 dark:from-zinc-900 dark:via-zinc-900 dark:to-primary-900/10;
}

.hb-notebook-cell-header {
  @apply mb-3 flex flex-wrap items-center gap-3;
}

.hb-notebook-pill {
  @apply inline-flex items-center rounded-full bg-zinc-100 px-3 py-1 text-xs font-semibold uppercase tracking-wide text-zinc-600;
  @apply dark:bg-zinc-800 dark:text-zinc-300;
}

.hb-notebook-tags {
  @apply flex flex-wrap gap-1;
}

.hb-notebook-tags span {
  @apply inline-flex items-center rounded-full bg-primary-100/80 px-2 py-0.5 text-[11px] font-medium text-primary-700;
  @apply dark:bg-primary-400/20 dark:text-primary-200;
}

.hb-notebook-code {
  @apply overflow-hidden rounded-2xl border border-zinc-900/10 bg-zinc-950/95 shadow-inner shadow-black/30;
}

.hb-notebook-code pre {
  @apply m-0 overflow-auto rounded-2xl p-5 text-sm leading-relaxed;
}

.hb-notebook-markdown {
  @apply prose-h1:text-2xl prose-h2:text-xl prose-p:leading-relaxed prose-a:text-primary-600 max-w-none;
}

.hb-notebook-raw {
  @apply rounded-xl border border-dashed border-zinc-300/80 bg-zinc-50 p-4 font-mono text-sm text-zinc-700;
  @apply dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-200 overflow-auto;
}

.hb-notebook-outputs {
  @apply mt-4 space-y-3 rounded-2xl border border-zinc-100/80 bg-zinc-50/80 p-4;
  @apply dark:border-zinc-800/60 dark:bg-zinc-900/50;
}

.hb-notebook-output {
  @apply overflow-auto rounded-xl border border-transparent bg-white/90 p-3 text-sm leading-relaxed text-zinc-700;
  @apply dark:bg-zinc-950/50 dark:text-zinc-100;
  max-height: var(--hb-notebook-output-max-height, 26rem);
}

.hb-notebook-output--stream {
  @apply font-mono bg-zinc-900 text-zinc-100;
}

.hb-notebook-output--error {
  @apply border-red-200 bg-red-50/90 text-red-700 dark:border-red-500/30 dark:bg-red-500/10 dark:text-red-200;
}

.hb-notebook-output--image {
  @apply bg-transparent p-0 border-none;
}

.hb-notebook-output--image img,
.hb-notebook-output--image svg {
  @apply h-auto w-full rounded-xl border border-zinc-100/80 bg-white object-contain dark:border-zinc-800/60 dark:bg-zinc-900;
}

.hb-notebook-output--markdown {
  @apply bg-transparent p-0 border-none;
}

.hb-notebook-output pre {
  @apply m-0;
}

.hb-notebook-output code {
  @apply font-mono text-sm;
}

.hb-notebook-empty {
  @apply mt-4 rounded-2xl border border-dashed border-zinc-300/70 bg-zinc-50/80 px-4 py-3 text-center text-sm text-zinc-500;
  @apply dark:border-zinc-700 dark:bg-zinc-900/40 dark:text-zinc-300;
}