@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;
  --bg-strong: #efefef;
  --surface: rgba(255, 255, 255, 0.84);
  --surface-strong: rgba(255, 255, 255, 0.95);
  --ink: #2d3130;
  --muted: #6b7075;
  --line: rgba(227, 229, 232, 0.92);
  --line-strong: rgba(126, 28, 126, 0.2);
  --purple: #7e1c7e;
  --purple-strong: #ac48ac;
  --purple-soft: #e8d6e8;
  --green: #58af23;
  --green-strong: #378c04;
  --green-ink: #306f08;
  --green-soft: #eafae0;
  --shadow: 0 20px 56px rgba(45, 49, 48, 0.1);
  --radius-xl: 32px;
  --radius-lg: 24px;
  --radius-md: 18px;
  --content-width: 1120px;
  --reading-measure: 68ch;
  --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);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Inter", sans-serif;
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  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%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  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%);
}

#quarto-header,
#quarto-content,
.quarto-title-block,
main.content,
.page-columns,
.page-rows-contents {
  position: relative;
  z-index: 1;
}

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

a:hover,
a:focus {
  color: var(--green);
}

#quarto-header {
  background: transparent;
  box-shadow: none;
}

#quarto-header .navbar {
  max-width: var(--content-width);
  margin: 16px auto 0;
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow);
}

#quarto-header .navbar-container {
  padding: 0;
}

#quarto-header .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
  color: var(--ink) !important;
}

#quarto-header .navbar-brand::before {
  content: "N";
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--purple-strong), var(--purple));
  color: #ffffff;
  font-family: "Baloo Thambi 2", sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  box-shadow: 0 10px 28px rgba(126, 28, 126, 0.28);
}

#quarto-header .navbar-title {
  font-size: 1rem;
  color: var(--ink);
}

#quarto-header .navbar-nav {
  gap: 12px;
}

#quarto-header .nav-link {
  padding: 12px 16px !important;
  border-radius: 999px;
  color: var(--muted) !important;
  font-size: 0.98rem;
  line-height: 1.45;
  transition:
    transform 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

#quarto-header .nav-link:hover,
#quarto-header .nav-link:focus {
  color: var(--ink) !important;
  transform: translateY(-1px);
}

#quarto-header .nav-link.active {
  color: var(--ink) !important;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: 0 10px 24px rgba(45, 49, 48, 0.08);
}

.quarto-secondary-nav,
#quarto-sidebar,
#quarto-sidebar-glass {
  display: none !important;
}

#quarto-content {
  padding: 32px 24px 72px;
}

.page-columns,
.page-rows-contents,
main.content,
.quarto-title-block {
  background: transparent;
}

main.content,
main.content.column-body {
  max-width: var(--content-width);
  padding: 2.45rem 2.55rem 3.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

#title-block-header {
  margin-bottom: 2rem;
}

.quarto-title-block .title,
h1,
h2,
h3,
h4 {
  font-family: "Baloo Thambi 2", sans-serif;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.quarto-title-block .title {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(2.05rem, 4vw, 3.7rem);
  line-height: 1.03;
}

.quarto-title-block .subtitle {
  max-width: 60ch;
  margin-top: 1rem;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.68;
}

h2 {
  margin-top: 0;
  font-size: clamp(1.72rem, 2.75vw, 2.45rem);
  line-height: 1.08;
}

h3 {
  font-size: 1.18rem;
  line-height: 1.16;
}

section.level2 {
  margin-top: 2.8rem;
}

p,
li {
  color: var(--ink);
}

main.content > p,
main.content > ul,
main.content > ol,
main.content > section > p,
main.content > section > ul,
main.content > section > ol,
main.content > section > .callout p,
main.content > section > .callout ul,
main.content > section > .callout ol {
  max-inline-size: var(--reading-measure);
}

p code,
li code,
td code,
th code {
  padding: 0.14rem 0.42rem;
  border-radius: 999px;
  background: var(--purple-soft);
  color: var(--ink);
}

.callout {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.callout.callout-style-simple,
.callout.callout-style-default {
  border-left: 6px solid var(--green);
}

figure.quarto-float,
.cell-output-display > .quarto-float figure {
  margin-top: 1.5rem;
  margin-bottom: 1.75rem;
}

.quarto-float figure {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  box-shadow: var(--shadow);
}

.quarto-float figcaption,
.figure-caption {
  margin-top: 1rem;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.55;
}

.cell-output-display {
  overflow-x: auto;
}

pre.mermaid {
  margin: 0;
  background: transparent;
}

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

#fig-catalog-sync .mermaid svg,
#fig-catalog-sync svg {
  width: 100% !important;
  max-width: 100% !important;
}

.table,
table {
  background: #ffffff;
  border-color: var(--line);
  border-radius: 18px;
  overflow: hidden;
  font-size: 0.96rem;
}

.table th,
.table td,
table th,
table td {
  border-color: var(--line);
  line-height: 1.55;
}

#quarto-margin-sidebar {
  padding-top: 1rem;
}

#TOC {
  top: 118px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-strong);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

#TOC .nav-link {
  color: var(--muted);
}

#TOC .nav-link.active,
#TOC .nav-link:hover {
  color: var(--purple);
}

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

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

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

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

.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;
}

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

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

@media (max-width: 1200px) {
  #quarto-header .navbar,
  main.content,
  main.content.column-body {
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  #quarto-header .navbar {
    margin: 12px 14px 0;
    border-radius: 28px;
  }

  #quarto-content {
    padding: 22px 14px 52px;
  }

  main.content,
  main.content.column-body {
    padding: 1.7rem 1.35rem 2.6rem;
  }

  .quarto-title-block .title {
    max-width: none;
    font-size: clamp(1.95rem, 9.8vw, 3.15rem);
  }
}