@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&family=Baloo+Thambi+2:wght@600;700;800&display=swap&subset=cyrillic");

:root {
  --bg: #f2f2f2;
  --surface: rgba(255, 255, 255, 0.9);
  --surface-strong: rgba(255, 255, 255, 0.96);
  --ink: #2d3130;
  --muted: #6b7075;
  --line: rgba(227, 229, 232, 0.92);
  --purple: #7e1c7e;
  --purple-strong: #ac48ac;
  --purple-soft: #e8d6e8;
  --green: #58af23;
  --green-strong: #378c04;
  --green-ink: #306f08;
  --shadow: 0 20px 56px rgba(45, 49, 48, 0.1);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --mermaid-bg-color: #ffffff;
  --mermaid-edge-color: #7e1c7e;
  --mermaid-node-fg-color: #2d3130;
  --mermaid-fg-color: #2d3130;
  --mermaid-fg-color--lighter: #c7cfce;
  --mermaid-fg-color--lightest: #eef3f1;
  --mermaid-font-family: "Inter", sans-serif;
  --mermaid-label-bg-color: #ffffff;
  --mermaid-label-fg-color: #2d3130;
  --mermaid-node-bg-color: rgba(88, 175, 35, 0.12);
}

.reveal-viewport,
.reveal {
  background:
    radial-gradient(circle at top left, rgba(88, 175, 35, 0.12), transparent 26%),
    radial-gradient(circle at 82% 12%, rgba(126, 28, 126, 0.12), transparent 24%),
    linear-gradient(180deg, #ffffff 0%, var(--bg) 46%, #fafafa 100%);
}

.reveal-viewport::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(227, 229, 232, 0.8) 1px, transparent 1px),
    linear-gradient(90deg, rgba(227, 229, 232, 0.8) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(circle at center, black 30%, transparent 88%);
}

.reveal {
  font-size: 30px;
  font-family: "Inter", sans-serif;
  color: var(--ink);
}

.reveal h1,
.reveal h2,
.reveal h3 {
  font-family: "Baloo Thambi 2", sans-serif;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.reveal h1 {
  font-size: 1.62em;
  line-height: 1.06;
}

.reveal h2 {
  font-size: 1.08em;
  line-height: 1.1;
}

.reveal h3 {
  font-size: 0.86em;
  line-height: 1.12;
}

.reveal p,
.reveal li {
  max-width: 30em;
  line-height: 1.46;
  color: var(--ink);
}

.reveal a {
  color: var(--purple);
}

.reveal strong {
  color: var(--green-strong);
}

.reveal ul,
.reveal ol {
  display: block;
  margin-top: 0.5em;
}

.reveal section {
  text-align: left;
}

.reveal .slides {
  text-align: left;
}

.reveal .slides section {
  box-sizing: border-box;
  padding: 0.72em 0.84em !important;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.reveal .mermaid svg {
  display: block;
  max-width: 100% !important;
  height: auto !important;
}

.reveal .r-stretch {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.reveal .r-stretch > * {
  flex: 1 1 auto;
}

.reveal .r-stretch .cell-output-display,
.reveal .r-stretch .quarto-figure,
.reveal .r-stretch pre,
.reveal .r-stretch .mermaid {
  height: 100%;
  margin: 0;
}

.reveal .r-stretch .mermaid svg,
.reveal .r-stretch .quarto-figure svg {
  max-height: 100% !important;
  width: auto !important;
  margin: 0 auto;
}

.reveal .slides section.title-slide,
.reveal .slides section.quarto-title-block {
  background:
    radial-gradient(circle at top left, rgba(88, 175, 35, 0.18), transparent 24%),
    radial-gradient(circle at 82% 12%, rgba(126, 28, 126, 0.14), transparent 22%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(242, 242, 242, 0.92));
}

.reveal .controls {
  color: var(--purple);
}

.reveal .progress {
  color: var(--green);
}

.reveal .slide-number {
  font-size: 0.56em;
  color: var(--muted);
}

.reveal blockquote {
  border-left: 6px solid var(--green);
  border-radius: var(--radius-md);
  background: var(--surface-strong);
  padding: 0.7em 0.95em;
}

.reveal pre code {
  border-radius: 18px;
}

.reveal code:not(.sourceCode) {
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--ink);
}

.reveal .mermaid svg .cluster rect {
  fill: #eef3f1 !important;
  stroke: #c7cfce !important;
}

.reveal .mermaid svg .node rect,
.reveal .mermaid svg .node polygon,
.reveal .mermaid svg .node ellipse,
.reveal .mermaid svg .node circle,
.reveal .mermaid svg g.classGroup rect,
.reveal .mermaid svg g.classGroup line,
.reveal .mermaid svg g.stateGroup rect,
.reveal .mermaid svg .labelBox {
  fill: #f7faf4 !important;
  stroke: var(--green) !important;
}

.reveal .mermaid svg text,
.reveal .mermaid svg tspan,
.reveal .mermaid svg .nodeLabel,
.reveal .mermaid svg .label,
.reveal .mermaid svg .cluster span,
.reveal .mermaid svg .edgeLabel,
.reveal .mermaid svg .edgeLabel span {
  fill: var(--ink) !important;
  color: var(--ink) !important;
}

.reveal .mermaid svg .edgeLabel rect,
.reveal .mermaid svg .label foreignObject div {
  background: #ffffff !important;
  fill: #ffffff !important;
}

.reveal .mermaid svg .cluster-label foreignObject div {
  padding: 0.08rem 0.46rem !important;
  border: 1px solid rgba(88, 175, 35, 0.18) !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: 0 6px 16px rgba(45, 49, 48, 0.08) !important;
}

.reveal .mermaid svg .cluster-label .nodeLabel,
.reveal .mermaid svg .cluster-label span,
.reveal .mermaid svg .cluster-label p {
  color: var(--ink) !important;
  fill: var(--ink) !important;
  background: transparent !important;
}

.reveal .mermaid svg .cluster rect[id],
.reveal .mermaid svg g.cluster rect {
  fill: #f7faf4 !important;
  stroke-width: 1.5px !important;
}