:root {
  --norbi-ink: #10211f;
  --norbi-muted: #51615f;
  --norbi-paper: #f6f8f5;
  --norbi-panel: #ffffff;
  --norbi-mint: #55d7b4;
  --norbi-cyan: #48a9c5;
  --norbi-deep: #123b38;
  --norbi-warning: #d88922;
  --norbi-danger: #c94f5d;
  --norbi-link: #087763;
  --norbi-link-hover: #064f46;
  --md-primary-fg-color: var(--norbi-deep);
  --md-accent-fg-color: #208b74;
}

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--norbi-paper);
  --md-default-fg-color: var(--norbi-ink);
  --md-typeset-a-color: #147867;
  --md-code-bg-color: #edf2ef;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: #0d2928;
  --md-accent-fg-color: #68e0bd;
  --md-typeset-a-color: #78ead0;
  --norbi-link: #78ead0;
  --norbi-link-hover: #b8f7e8;
}

html::before {
  background: linear-gradient(90deg, var(--norbi-mint), var(--norbi-cyan));
  content: "";
  height: 3px;
  left: 0;
  position: fixed;
  top: 0;
  width: var(--reading-progress, 0%);
  z-index: 1000;
}

.md-header { backdrop-filter: blur(14px); background: color-mix(in srgb, var(--md-primary-fg-color) 92%, transparent); }

/* `backdrop-filter` tworzy na urządzeniach mobilnych własny układ odniesienia
   dla pełnoekranowej wyszukiwarki Material i ogranicza jej wysokość do 48 px. */
@media screen and (max-width: 59.984375em) {
  .md-header { backdrop-filter: none; }
}

.md-grid { max-width: 92rem; }
.md-typeset { font-size: .82rem; line-height: 1.72; }
.md-typeset h1 { font-weight: 760; letter-spacing: -.035em; color: var(--md-default-fg-color); }
.md-typeset h2 { margin-top: 2.2em; font-weight: 720; letter-spacing: -.02em; }
.md-typeset h3 { font-weight: 680; }
.md-typeset table:not([class]) { display: table; width: 100%; border-radius: .55rem; overflow: hidden; }
.md-typeset table:not([class]) th { background: color-mix(in srgb, var(--md-primary-fg-color) 13%, var(--md-default-bg-color)); }
.md-typeset code { border-radius: .3rem; }
.md-content .md-typeset a:not(.headerlink):not(.md-button):not(.hero-cta) {
  color: var(--norbi-link);
  font-weight: 650;
  text-decoration-color: color-mix(in srgb, var(--norbi-link) 55%, transparent);
  text-decoration-line: underline;
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
  transition: color .15s ease, text-decoration-color .15s ease, background-color .15s ease;
}
.md-content .md-typeset a:not(.headerlink):not(.md-button):not(.hero-cta):hover,
.md-content .md-typeset a:not(.headerlink):not(.md-button):not(.hero-cta):focus-visible {
  color: var(--norbi-link-hover);
  text-decoration-color: currentColor;
}

.hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(72,169,197,.28), transparent 31%),
    radial-gradient(circle at 12% 86%, rgba(85,215,180,.24), transparent 34%),
    linear-gradient(140deg, #102f2d, #0d1f24 72%);
  border: 1px solid rgba(104,224,189,.28);
  border-radius: 1.2rem;
  color: #f5fffc;
  margin: .6rem 0 2rem;
  padding: clamp(1.4rem, 4vw, 3.6rem);
  position: relative;
  overflow: hidden;
}
.hero h1 { color: #fff; font-size: clamp(2.1rem, 6vw, 4.6rem); line-height: .96; margin: 0 0 1rem; }
.hero p { color: #c8dad7; font-size: clamp(1rem, 2vw, 1.25rem); max-width: 54rem; }
.hero .eyebrow { color: var(--norbi-mint); font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero .principle { border-left: 3px solid var(--norbi-mint); color: #fff; font-weight: 650; margin-top: 1.5rem; padding-left: 1rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }
.hero .hero-cta {
  background: var(--norbi-mint);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  color: #092925;
  display: inline-flex;
  font-weight: 780;
  padding: .65rem 1rem;
  text-decoration: none;
}
.hero .hero-cta:hover, .hero .hero-cta:focus-visible { background: #8defd5; color: #061b19; }

.card-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); margin: 1.2rem 0 2rem; }
.card {
  background: color-mix(in srgb, var(--md-default-bg-color) 85%, var(--md-primary-fg-color) 5%);
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 14%, transparent);
  border-radius: .8rem;
  padding: 1rem 1.1rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }
.metric { font-size: 1.55rem; font-weight: 780; color: var(--md-accent-fg-color); }
.module-card { border-left: 4px solid var(--norbi-cyan); padding-left: 1rem; }
.boundary { border: 1px solid color-mix(in srgb, var(--norbi-warning) 65%, transparent); border-radius: .6rem; padding: .9rem 1rem; }
.invariant { border-left: 4px solid var(--norbi-mint); background: color-mix(in srgb, var(--norbi-mint) 9%, transparent); padding: .8rem 1rem; }
.danger { border-left-color: var(--norbi-danger); background: color-mix(in srgb, var(--norbi-danger) 8%, transparent); }

.reading-paths, .toc-hub {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  margin: 1.2rem 0 1.5rem;
}
.reading-path, .toc-group {
  background: color-mix(in srgb, var(--md-default-bg-color) 88%, var(--md-primary-fg-color) 6%);
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 17%, transparent);
  border-radius: .85rem;
  padding: 1rem 1.1rem;
}
.reading-path h3, .toc-group h2 { margin: .3rem 0 .65rem; }
.reading-path ol, .toc-group ul { margin-bottom: 0; }
.reading-path li, .toc-group li { margin-bottom: .36rem; }
.reading-path__number, .toc-group__number {
  color: var(--md-accent-fg-color);
  display: block;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.toc-callout {
  background: color-mix(in srgb, var(--norbi-mint) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--norbi-mint) 42%, transparent);
  border-radius: .7rem;
  padding: .9rem 1rem;
}
.toc-shortcut {
  align-items: center;
  background: var(--norbi-mint);
  border: 1px solid color-mix(in srgb, var(--norbi-mint) 55%, #fff);
  border-radius: 999px;
  bottom: 1rem;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.24);
  color: #092925;
  display: inline-flex;
  font-size: .72rem;
  font-weight: 800;
  left: 1rem;
  padding: .55rem .8rem;
  position: fixed;
  text-decoration: none;
  z-index: 20;
}
.toc-shortcut:hover, .toc-shortcut:focus-visible { background: #8defd5; color: #061b19; transform: translateY(-1px); }

.infra-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  margin: 1.2rem 0 2rem;
}
.infra-card {
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--md-default-bg-color) 92%, var(--norbi-mint) 8%),
    color-mix(in srgb, var(--md-default-bg-color) 94%, var(--norbi-cyan) 6%));
  border: 1px solid color-mix(in srgb, var(--norbi-mint) 34%, var(--md-default-fg-color) 10%);
  border-radius: .85rem;
  box-shadow: 0 .35rem 1rem color-mix(in srgb, var(--md-default-fg-color) 8%, transparent);
  padding: 1rem 1.1rem;
}
.infra-card h3 { margin: .1rem 0 .55rem; }
.infra-card p:last-child { margin-bottom: 0; }
.infra-card a { text-decoration-thickness: .1em !important; }
.infra-badge {
  background: color-mix(in srgb, var(--norbi-mint) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--norbi-mint) 48%, transparent);
  border-radius: 999px;
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  margin: 0 .25rem .25rem 0;
  padding: .2rem .5rem;
}

.cc-wireframe { background: #0c191b; border: 1px solid #285052; border-radius: .75rem; color: #d8ece8; display: grid; gap: .6rem; grid-template-columns: 12rem 1fr; min-height: 26rem; padding: .6rem; }
.cc-wireframe .rail, .cc-wireframe .panel { background: #112629; border: 1px solid #254347; border-radius: .5rem; padding: .8rem; }
.cc-wireframe .main { display: grid; gap: .6rem; grid-template-rows: auto 1fr; }
.cc-wireframe .toolbar { display: flex; flex-wrap: wrap; gap: .4rem; }
.cc-wireframe .pill { background: #1b3a3c; border-radius: 999px; font-size: .7rem; padding: .25rem .55rem; }

@media (max-width: 720px) {
  .md-typeset { font-size: .78rem; }
  .cc-wireframe { grid-template-columns: 1fr; }
  .cc-wireframe .rail { display: none; }
  .md-typeset table:not([class]) { display: block; overflow-x: auto; }
  .toc-shortcut { bottom: .7rem; left: .7rem; }
}