@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root,
[data-md-color-scheme="infinitrust"] {
  --md-default-bg-color: #0D0917;
  --md-default-fg-color: #F5F3FA;
  --md-default-fg-color--light: #C9C5D4;
  --md-default-fg-color--lighter: #9892AA;
  --md-primary-fg-color: #171326;
  --md-primary-bg-color: #F5F3FA;
  --md-accent-fg-color: #21D4FF;
  --md-typeset-a-color: #21D4FF;
  --md-code-bg-color: #171326;
  --md-code-fg-color: #F5F3FA;

  --got-rgb-void: 13, 9, 23;

  /* Core surfaces */
  --got-void: #0d0917;
  --got-surface: #171326;
  --got-panel: #201b32;
  --got-elevated: #2a2440;

  /* Core text */
  --got-text-primary: #f5f3fa;
  --got-text-secondary: #c9c5d4;
  --got-text-muted: #9892aa;

  /* Brand and semantic colors */
  /*
  --got-magenta: #c93bce;
  --got-violet: #8a48ff;
  --got-cyan: #21d4ff;
*/
  --got-magenta: #E418EF;
  --got-violet: #8A48FF;
  --got-cyan: #37DCF7;
  --got-neutral: #F5F3FA;

  --got-yellow: #ffd34e;
  --got-red: #ff5577;
  --got-green: #36d97a;

  --got-gradient-brand:
    linear-gradient(135deg,
      var(--got-magenta) 0%,
      var(--got-violet) 48%,
      var(--got-cyan) 100%);

  /* RGB channels for alpha variants */
  --got-rgb-white: 255, 255, 255;
  --got-rgb-black: 0, 0, 0;
  --got-rgb-magenta: 201, 59, 206;
  --got-rgb-violet: 138, 72, 255;
  --got-rgb-cyan: 33, 212, 255;
  --got-rgb-yellow: 255, 211, 78;
  --got-rgb-red: 255, 85, 119;
  --got-rgb-green: 54, 217, 122;
  --got-violet-080: rgba(var(--got-rgb-violet), 0.08);
  --got-violet-240: rgba(var(--got-rgb-violet), 0.24);
  --got-yellow-060: rgba(var(--got-rgb-yellow), 0.06);

  /* Red alpha colors */
  --got-red-080: rgba(var(--got-rgb-red), 0.08);
  --got-red-220: rgba(var(--got-rgb-red), 0.22);
  --got-red-450: rgba(var(--got-rgb-red), 0.45);

  --got-principle-border: var(--got-white-090);
  --got-principle-surface: var(--got-surface);

  /* Chamfers */
  --got-chamfer-xs: 4px;
  --got-chamfer-sm: 6px;
  --got-chamfer-md: 10px;
  --got-chamfer-lg: 14px;
  --got-chamfer-xl: 18px;

  /* Neutral alpha colors */
  --got-white-015: rgba(var(--got-rgb-white), 0.015);
  --got-white-025: rgba(var(--got-rgb-white), 0.025);
  --got-white-035: rgba(var(--got-rgb-white), 0.035);
  --got-white-045: rgba(var(--got-rgb-white), 0.045);
  --got-white-060: rgba(var(--got-rgb-white), 0.06);
  --got-white-080: rgba(var(--got-rgb-white), 0.08);
  --got-white-085: rgba(var(--got-rgb-white), 0.085);
  --got-white-090: rgba(var(--got-rgb-white), 0.09);
  --got-white-100: rgba(var(--got-rgb-white), 0.10);
  --got-white-120: rgba(var(--got-rgb-white), 0.12);
  --got-white-140: rgba(var(--got-rgb-white), 0.14);
  --got-white-160: rgba(var(--got-rgb-white), 0.16);
  --got-white-200: rgba(var(--got-rgb-white), 0.20);
  --got-white-300: rgba(var(--got-rgb-white), 0.30);

  /* Magenta alpha colors */
  --got-magenta-080: rgba(var(--got-rgb-magenta), 0.08);
  --got-magenta-220: rgba(var(--got-rgb-magenta), 0.22);
  --got-magenta-340: rgba(var(--got-rgb-magenta), 0.34);
  --got-magenta-450: rgba(var(--got-rgb-magenta), 0.45);

  /* Cyan alpha colors */
  --got-cyan-040: rgba(var(--got-rgb-cyan), 0.04);
  --got-cyan-080: rgba(var(--got-rgb-cyan), 0.08);
  --got-cyan-220: rgba(var(--got-rgb-cyan), 0.22);
  --got-cyan-260: rgba(var(--got-rgb-cyan), 0.26);
  --got-cyan-450: rgba(var(--got-rgb-cyan), 0.45);
  --got-cyan-700: rgba(var(--got-rgb-cyan), 0.70);

  /* Yellow alpha colors */
  --got-yellow-200: rgba(var(--got-rgb-yellow), 0.20);
  --got-yellow-350: rgba(var(--got-rgb-yellow), 0.35);

  /* Shared borders */
  --got-border-subtle: 1px solid var(--got-white-080);
  --got-border-default: 1px solid var(--got-white-090);
  --got-border-strong: 1px solid var(--got-white-120);

  /* Measurements */
  --got-measure-line: var(--got-violet-240);
  --got-measure-line-strong: var(--got-cyan-450);
  --got-measure-marker: var(--got-cyan);
  --got-measure-surface: var(--got-surface);
  --got-measure-border: var(--got-white-090);
  --got-measure-label: var(--got-text-primary);
  --got-measure-description: var(--got-text-muted);

  /* Shared gradients */
  --got-gradient-surface-soft:
    radial-gradient(circle at 20% 10%,
      var(--got-white-035),
      transparent 36%);

  --got-gradient-state-active:
    linear-gradient(145deg,
      var(--got-magenta-080),
      var(--got-cyan-040));

  --got-gradient-crystal-reflection:
    linear-gradient(145deg,
      var(--got-white-140),
      var(--got-white-015) 46%);

  --got-gradient-crystal-magenta:
    radial-gradient(circle at 24% 24%,
      var(--got-magenta-340),
      transparent 38%);

  --got-gradient-crystal-cyan:
    radial-gradient(circle at 82% 76%,
      var(--got-cyan-260),
      transparent 40%);

  /* Shared glow tokens */
  --got-glow-magenta-sm: 0 0 14px var(--got-magenta-450);
  --got-glow-cyan-sm: 0 0 14px var(--got-cyan-450);
  --got-glow-yellow-sm: 0 0 12px var(--got-yellow-350);

  /* Shared semantic borders */
  --got-border-strong: 1px solid var(--got-white-120);
  --got-border-strong-color: #3b3453;
  --got-border-magenta-state: var(--got-magenta-220);
  --got-border-cyan-state: var(--got-cyan-220);
  --got-border-yellow-state: var(--got-yellow-200);

  /* Geometry */
  --got-master-angle: 24deg;

  /* Knowledge graph */
  --got-knowledge-node-bg: var(--got-surface);
  --got-knowledge-node-border: var(--got-white-090);
  --got-knowledge-node-hover-bg: var(--got-white-025);

  --got-knowledge-magenta-border: var(--got-magenta-220);
  --got-knowledge-magenta-glow: var(--got-magenta-080);

  --got-knowledge-violet-border: rgba(var(--got-rgb-violet), 0.24);
  --got-knowledge-violet-glow: rgba(var(--got-rgb-violet), 0.08);

  --got-knowledge-cyan-border: var(--got-cyan-220);
  --got-knowledge-cyan-glow: var(--got-cyan-080);

  --got-knowledge-yellow-border: var(--got-yellow-200);
  --got-knowledge-yellow-glow: rgba(var(--got-rgb-yellow), 0.06);

  --got-knowledge-violet-border: var(--got-violet-240);
  --got-knowledge-violet-glow: var(--got-violet-080);
  --got-knowledge-yellow-glow: var(--got-yellow-060);

  --got-black-260: rgba(var(--got-rgb-black), 0.26);

  /* Back to top */
  --got-top-bg: var(--got-surface);
  --got-top-border: var(--got-white-120);
  --got-top-border-hover: var(--got-cyan-220);
  --got-top-text: var(--got-text-secondary);
  --got-top-text-hover: var(--got-text-primary);
  --got-top-glow: var(--got-cyan-080);
}

body,
button,
input,
select,
textarea {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

code,
kbd,
pre {
  font-family: "IBM Plex Mono", monospace;
}

.md-header,
.md-tabs {
  background: rgba(13, 9, 23, .94);
  backdrop-filter: blur(16px);
}

.md-main__inner {
  max-width: 1440px;
}

.logo-light-row td {
  background: var(--got-neutral);
  color: #111;
}

.logo-light-row img {
  display: block;
  margin: auto;
}

.md-typeset,
.md-nav,
.md-header,
.md-tabs {
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.md-typeset h1 {
  font-weight: 300;
  letter-spacing: -0.035em;
}

.md-typeset h2 {
  font-weight: 400;
  letter-spacing: -0.025em;
}

.md-typeset h3 {
  font-weight: 400;
  letter-spacing: -0.018em;
}

.md-typeset table:not([class]) {
  background: #171326;
  border: 1px solid rgba(255, 255, 255, .08);
}

.md-typeset table:not([class]) th {
  background: #201B32;
}

.swatch {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  border: 1px solid rgba(255, 255, 255, .25);
  box-shadow: 0 0 12px rgba(255, 255, 255, .05);
}

.gradient-strip {
  height: 52px;
  margin: 14px 0;
  border: 1px solid rgba(255, 255, 255, .12);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}

.gradient-brand {
  background: linear-gradient(135deg, #C93BCE, #8A48FF 48%, #21D4FF);
}

.gradient-cyan {
  background: linear-gradient(135deg, #8A48FF, #21D4FF);
}

.got-hero {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 48px;
  align-items: center;
  min-height: 420px;
  padding: 56px;
  margin: 24px 0 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 28%, rgba(201, 59, 206, .22), transparent 28%),
    radial-gradient(circle at 88% 70%, rgba(33, 212, 255, .14), transparent 28%),
    #171326;
  border: 1px solid rgba(255, 255, 255, .09);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}

.got-hero h2 {
  margin: 8px 0 16px;
  font-size: clamp(42px, 6vw, 74px);
  line-height: .98;
}

.eyebrow {
  color: #21D4FF;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
}

.button-row,
.component-preview,
.chamfer-demo-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.demo-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  font-size: 14px;
  font-weight: 500;
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.demo-button-primary {
  color: white;
  background: linear-gradient(135deg, #C93BCE, #8A48FF 48%, #21D4FF);
  box-shadow: 0 0 28px rgba(138, 72, 255, .22);
}

.demo-button-secondary {
  color: #F5F3FA;
  background: #201B32;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18);
}

.demo-button.is-disabled {
  opacity: .38;
}

.glass-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  max-width: 320px;
  margin: auto;
  color: rgba(255, 255, 255, .9);
  font-size: 170px;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02)),
    radial-gradient(circle at 35% 30%, rgba(201, 59, 206, .6), transparent 38%),
    radial-gradient(circle at 70% 70%, rgba(33, 212, 255, .45), transparent 38%);
  border: 1px solid rgba(255, 255, 255, .28);
  clip-path: polygon(18% 0, 100% 0, 100% 82%, 82% 100%, 0 100%, 0 18%);
  box-shadow: inset 0 0 45px rgba(255, 255, 255, .08), 0 0 80px rgba(138, 72, 255, .2);
}

.type-preview {
  padding: 12px 0;
}

.display-preview {
  font-family: "Geist", sans-serif;
  font-size: 60px;
  line-height: 0.98;
  font-weight: 300;
  letter-spacing: -0.035em;
}

.heading-preview {
  font-family: "Geist", sans-serif;
  font-size: 34px;
  line-height: 1.12;
  font-weight: 400;
  letter-spacing: -0.025em;
}

.body-preview {
  font-family: "Geist", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  color: #C9C5D4;
}

.mono-preview {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: #21D4FF;
}

.chamfer-box {
  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 90px;
  padding: 18px;
  background: #201B32;
  border: 1px solid rgba(255, 255, 255, .1);
}

.chamfer-button {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.chamfer-card {
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.chamfer-panel {
  clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.card-grid-demo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 24px 0;
}

.demo-card {
  padding: 28px;
  background: #171326;
  border: 1px solid rgba(255, 255, 255, .09);
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

.demo-card.active {
  background: linear-gradient(145deg, rgba(201, 59, 206, .09), rgba(33, 212, 255, .05)), #171326;
  box-shadow: inset 0 0 0 1px rgba(33, 212, 255, .22);
}

.light-demo {
  width: 110px;
  height: 42px;
  border-radius: 6px;
  background: #171326;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .08);
}

.light-demo::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .05);
}

.light-magenta::before {
  content: "";
  position: absolute;
  inset: -30%;
  background: radial-gradient(circle, #C93BCE 0%, transparent 65%);
  opacity: .75;
}

.light-cyan::before {
  content: "";
  position: absolute;
  right: -12px;
  top: 0;
  bottom: 0;
  width: 48px;
  background: radial-gradient(circle, #21D4FF 0%, transparent 70%);
}

.light-white::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 45px;
  background: radial-gradient(circle, rgba(255, 255, 255, .95), transparent 70%);
}

.light-violet::before {
  content: "";
  position: absolute;
  inset: -25%;
  background: radial-gradient(circle, #8A48FF 0%, transparent 75%);
  opacity: .35;
}

.light-yellow::before {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFD34E;
  box-shadow: 0 0 18px #FFD34E;
}

/* ============================================================
   PRIMARY DOCUMENTATION NAVIGATION
============================================================ */

.md-sidebar--primary {
  padding-top: 16px;
  padding-right: 18px;
}

.md-sidebar--primary .md-sidebar__scrollwrap {
  padding-right: 8px;
}

.md-sidebar--primary .md-nav--primary {
  font-size: 14px;
}

.md-sidebar--primary .md-nav__title {
  color: var(--got-text-primary);
}

/* Top-level documentation sections */
.md-sidebar--primary .md-nav--primary>.md-nav__list>.md-nav__item {
  margin-bottom: 10px;
}

.md-sidebar--primary .md-nav--primary>.md-nav__list>.md-nav__item--nested>.md-nav__link {
  min-height: 42px;
  margin: 0;
  padding: 10px 12px;
  color: var(--got-text-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid transparent;
}

.md-sidebar--primary .md-nav--primary>.md-nav__list>.md-nav__item--nested>.md-nav__link:hover {
  color: #ffffff;
  background: rgba(138, 72, 255, 0.07);
  border-left-color: var(--got-violet);
}

/* Nested page group */
.md-sidebar--primary .md-nav__item--nested>.md-nav {
  margin: 4px 0 12px 5px;
  padding-left: 5px;
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.md-sidebar--primary .md-nav__link {
  margin: 2px 0;
  padding: 7px 10px;
  color: var(--got-text-muted);
  line-height: 1.35;
  border-left: 2px solid transparent;
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.md-sidebar--primary .md-nav__link:hover {
  color: var(--got-text-primary);
  background: rgba(255, 255, 255, 0.03);
}

.md-sidebar--primary .md-nav__link--active {
  color: var(--got-cyan);
  font-weight: 500;
  background:
    linear-gradient(90deg,
      rgba(33, 212, 255, 0.1),
      rgba(33, 212, 255, 0.01));
  border-left-color: var(--got-cyan);
}

.md-sidebar--primary .md-nav__item--active>.md-nav__link {
  color: var(--got-text-primary);
}

.md-sidebar--primary .md-nav__icon {
  color: var(--got-text-muted);
}

.md-sidebar--primary .md-nav__item--active>.md-nav__link .md-nav__icon,
.md-sidebar--primary .md-nav__link:hover .md-nav__icon {
  color: var(--got-cyan);
}

/* ============================================================
   LOGO
============================================================ */


.got-logo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
  margin: 40px 0;
}

.got-logo-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--got-surface);
  border: 1px solid var(--got-border);
  clip-path: polygon(var(--got-chamfer-lg) 0,
      100% 0,
      100% calc(100% - var(--got-chamfer-lg)),
      calc(100% - var(--got-chamfer-lg)) 100%,
      0 100%,
      0 var(--got-chamfer-lg));
}

.got-logo-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 180px;
  padding: 32px;
  background: var(--got-panel);
}

.got-logo-preview--light {
  background: var(--got-neutral);
}

.got-logo-preview--dark {
  background: var(--got-surface) !important;
}

.got-logo-preview img {
  width: 110px;
  height: auto;
}

.got-logo-info {
  padding: 20px;
}

.got-logo-info h3 {
  margin: 0 0 6px;
}

.got-logo-info p {
  margin: 0;
  color: var(--got-text-secondary);
}


/* ============================================================
   CHAPTER HERO
============================================================ */

.got-chapter-hero {
  position: relative;
  display: grid;
  gap: 24px;
  min-height: 260px;
  margin: 0 0 48px;
  padding: 48px;
  overflow: hidden;
  background:
    radial-gradient(circle at 84% 20%,
      rgba(201, 59, 206, 0.16),
      transparent 28%),
    radial-gradient(circle at 92% 82%,
      rgba(33, 212, 255, 0.1),
      transparent 30%),
    var(--got-surface);
  border: 1px solid rgba(255, 255, 255, 0.09);
  clip-path: polygon(18px 0,
      100% 0,
      100% calc(100% - 18px),
      calc(100% - 18px) 100%,
      0 100%,
      0 18px);
}

.got-chapter-hero::after {
  position: absolute;
  top: 0;
  right: 12%;
  width: 1px;
  height: 100%;
  content: "";
  background:
    linear-gradient(transparent,
      rgba(33, 212, 255, 0.25),
      transparent);
  transform: rotate(24deg);
}

.got-chapter-hero__label {
  color: var(--got-cyan);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.got-chapter-hero__title {
  max-width: 760px;
  margin: 0;
  color: var(--got-text-primary);
  font-size: clamp(42px, 6vw, 70px);
  font-weight: 300;
  line-height: 0.98;
  letter-spacing: -0.04em;
}

.got-chapter-hero__description {
  max-width: 680px;
  margin: 0;
  color: var(--got-text-secondary);
  font-size: 18px;
  line-height: 1.6;
}

/* ============================================================
   PAGE TABLE OF CONTENTS
============================================================ */

.md-sidebar--secondary {
  padding-left: 20px;
  padding-top: 24px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  padding: 8px;
}

/* ============================================================
   BACK TO TOP
============================================================ */

.md-top {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 0 16px;
  color: var(--got-top-text);
  font-family: var(--got-font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  background:
    linear-gradient(145deg,
      var(--got-top-glow),
      transparent 55%),
    var(--got-top-bg);
  border: 1px solid var(--got-top-border);
  border-radius: 0;
  clip-path: polygon(8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px);
  box-shadow:
    inset 0 1px 0 var(--got-white-045),
    0 10px 24px var(--got-black-260);
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.md-top:hover {
  color: var(--got-text-primary) !important;
  background: var(--got-surface) !important;
  border-color: var(--got-cyan-220);
  box-shadow:
    inset 3px 0 0 var(--got-cyan),
    inset 0 1px 0 var(--got-white-060),
    0 14px 30px var(--got-black-260);
}

.md-top:hover svg {
  color: var(--got-cyan) !important;
}

.md-top:focus-visible {
  color: var(--got-text-primary);
  outline: 2px solid var(--got-cyan);
  outline-offset: 3px;
}

.md-top svg {
  width: 16px;
  height: 16px;
  color: var(--got-cyan);
}

.md-top svg {
  width: 16px;
  height: 16px;
  color: var(--got-cyan);
  transition: translate 140ms ease;
}



/* ============================================================
   TABLE OF CONTENTS CARD
============================================================ */

.md-sidebar--secondary {
  padding-top: 24px;
  padding-left: 20px;
}

.md-sidebar--secondary .md-sidebar__scrollwrap {
  padding: 0 8px 24px;
}

.md-sidebar--secondary .md-nav--secondary {
  padding: 18px 16px 20px;
}

.md-sidebar--secondary .md-nav__title {
  margin: 0 0 14px;
  padding: 0 4px 13px;
  color: var(--got-text-primary);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.md-sidebar--secondary .md-nav__title::after {
  display: block;
  width: 28px;
  height: 1px;
  margin-top: 10px;
  content: "";
  background: var(--got-gradient-brand);
}

.md-sidebar--secondary .md-nav__link {
  position: relative;
  margin: 2px 0;
  padding: 7px 8px 7px 14px;
  color: var(--got-text-muted);
  font-size: 13px;
  line-height: 1.4;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    color 140ms ease,
    background-color 140ms ease,
    border-color 140ms ease;
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--got-text-primary);
  background: rgba(255, 255, 255, 0.025);
  border-left-color: var(--got-violet);
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--got-cyan);
  font-weight: 500;
  background:
    linear-gradient(90deg,
      rgba(33, 212, 255, 0.08),
      transparent);
  border-left-color: var(--got-cyan);
}

.md-sidebar--secondary .md-nav .md-nav {
  margin-left: 7px;
}

.md-sidebar--secondary .md-nav .md-nav .md-nav__link {
  padding-left: 12px;
  font-size: 12px;
  color: rgba(201, 197, 212, 0.68);
}

.md-sidebar--secondary .md-nav .md-nav .md-nav__link--active {
  color: var(--got-cyan);
}

/* "Table of contents" title */
.md-sidebar--secondary .md-nav__title {
  margin: 0 0 12px;
  padding: 0 4px 12px;
  color: var(--got-text-primary);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* TOC links */
.md-sidebar--secondary .md-nav__link {
  position: relative;
  margin: 1px 0;
  padding: 6px 8px 6px 14px;
  color: var(--got-text-muted);
  font-size: 13px;
  line-height: 1.35;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background-color 140ms ease;
}

.md-sidebar--secondary .md-nav__link:hover {
  color: var(--got-text-primary);
  background: rgba(255, 255, 255, 0.025);
  border-left-color: var(--got-violet);
}

/* Current heading */
.md-sidebar--secondary .md-nav__link--active {
  color: var(--got-cyan);
  font-weight: 500;
  background: rgba(33, 212, 255, 0.045);
  border-left-color: var(--got-cyan);
}

/* Nested headings */
.md-sidebar--secondary .md-nav .md-nav {
  margin-left: 7px;
}

.md-sidebar--secondary .md-nav .md-nav .md-nav__link {
  padding-left: 12px;
  font-size: 12px;
  color: rgba(201, 197, 212, 0.68);
}

.md-sidebar--secondary .md-nav .md-nav .md-nav__link--active {
  color: var(--got-cyan);
}

/* ============================================================
   DOCUMENTATION COLUMN SEPARATION
============================================================ */

.md-content {
  padding-left: 16px;
  padding-right: 16px;
}

.md-content__inner {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

/* ============================================================
   MEASUREMENT DEMOS
============================================================ */

.got-measure-grid {
  display: grid;
  gap: 16px;
  margin: 28px 0 44px;
}

.got-measure {
  display: grid;
  grid-template-columns: minmax(150px, 220px) minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 22px 24px;
  background: var(--got-measure-surface);
  border: 1px solid var(--got-measure-border);
  clip-path: polygon(10px 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 10px);
}

.got-measure__meta {
  display: grid;
  gap: 4px;
}

.got-measure__value {
  color: var(--got-measure-label);
  font-family: var(--got-font-mono);
  font-size: 18px;
  font-weight: 500;
}

.got-measure__description {
  color: var(--got-measure-description);
  font-size: 13px;
  line-height: 1.45;
}

.got-measure__visual {
  display: flex;
  align-items: center;
  min-width: 0;
}

.got-measure__block {
  flex: 0 0 auto;
  height: 18px;
  background:
    linear-gradient(90deg,
      var(--got-violet),
      var(--got-cyan));
  clip-path: polygon(4px 0,
      100% 0,
      100% calc(100% - 4px),
      calc(100% - 4px) 100%,
      0 100%,
      0 4px);
}

.got-measure__distance {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--got-measure-size);
  min-width: var(--got-measure-size);
  height: 34px;
  color: var(--got-text-muted);
  font-family: var(--got-font-mono);
  font-size: 11px;
}

.got-measure__distance::before {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  content: "";
  background: var(--got-measure-line);
}

.got-measure__distance::after {
  position: absolute;
  top: calc(50% - 4px);
  right: 0;
  left: 0;
  height: 9px;
  content: "";
  border-right: 1px solid var(--got-measure-marker);
  border-left: 1px solid var(--got-measure-marker);
}

.got-measure__distance span {
  position: relative;
  z-index: 1;
  padding: 2px 6px;
  background: var(--got-measure-surface);
}

.got-measure__object {
  display: grid;
  place-items: center;
  width: 86px;
  min-width: 86px;
  height: 54px;
  color: var(--got-text-secondary);
  font-size: 12px;
  background: var(--got-panel);
  border: 1px solid var(--got-white-090);
  clip-path: polygon(7px 0,
      100% 0,
      100% calc(100% - 7px),
      calc(100% - 7px) 100%,
      0 100%,
      0 7px);
}

@media (max-width: 700px) {
  .got-measure {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .got-measure__visual {
    overflow-x: auto;
    padding-bottom: 4px;
  }
}

/* ============================================================
   GEOMETRY OF TRUST SURFACES
============================================================ */

.got-card,
.md-sidebar--secondary .md-nav--secondary {
  position: relative;
  background:
    linear-gradient(145deg,
      rgba(201, 59, 206, 0.045),
      rgba(33, 212, 255, 0.018)),
    var(--got-surface);
  border: 1px solid rgba(255, 255, 255, 0.09);
  clip-path: polygon(12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    0 20px 45px rgba(0, 0, 0, 0.2);
}

/**/
.got-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ============================================================
   CONTENT CARDS
============================================================ */

.got-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 44px;
}

.got-card {
  padding: 28px;
}

.got-card__label {
  display: block;
  margin-bottom: 12px;
  color: var(--got-cyan);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.got-card__title {
  margin: 0 0 10px;
  color: var(--got-text-primary);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.02em;
}

.got-card__body {
  margin: 0;
  color: var(--got-text-secondary);
  line-height: 1.6;
}

/* ============================================================
   MATERIAL AND LIGHTING DEMOS
============================================================ */

.got-card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.got-card__meta {
  margin-top: 18px;
  padding-top: 16px;
  color: var(--got-text-muted);
  font-size: 13px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.got-material-demo {
  position: relative;
  height: 110px;
  margin-top: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  clip-path: polygon(10px 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 10px);
}

.got-material-demo--ceramic {
  background:
    radial-gradient(circle at 25% 20%,
      rgba(255, 255, 255, 0.045),
      transparent 32%),
    #171326;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.045),
    inset 0 -18px 36px rgba(0, 0, 0, 0.16);
}

.got-material-demo--metal {
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.12),
      rgba(255, 255, 255, 0.025) 30%,
      rgba(138, 72, 255, 0.09) 62%,
      rgba(0, 0, 0, 0.14)),
    #201b32;
}

.got-material-demo--metal::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    repeating-linear-gradient(115deg,
      transparent 0,
      transparent 9px,
      rgba(255, 255, 255, 0.025) 10px,
      transparent 11px);
}

.got-material-demo--crystal {
  background:
    linear-gradient(145deg,
      rgba(255, 255, 255, 0.2),
      rgba(255, 255, 255, 0.015) 42%),
    radial-gradient(circle at 25% 30%,
      rgba(201, 59, 206, 0.42),
      transparent 38%),
    radial-gradient(circle at 78% 72%,
      rgba(33, 212, 255, 0.32),
      transparent 38%),
    #171326;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, 0.07),
    0 0 28px rgba(138, 72, 255, 0.08);
}

.got-material-demo--crystal::after {
  position: absolute;
  inset: 18px 34px;
  content: "";
  border: 1px solid rgba(255, 255, 255, 0.34);
  transform: skewX(-24deg);
  background: rgba(255, 255, 255, 0.035);
}

.got-lighting-grid {
  display: grid;
  gap: 18px;
  margin: 28px 0 44px;
}

.got-lighting-card {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  background:
    linear-gradient(145deg,
      rgba(201, 59, 206, 0.03),
      rgba(33, 212, 255, 0.015)),
    var(--got-surface);
  border: 1px solid rgba(255, 255, 255, 0.085);
  clip-path: polygon(12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px);
}

.got-lighting-card .light-demo {
  width: 100%;
  height: 104px;
}

.got-definition-list {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
}

.got-definition-list>div {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
}

.got-definition-list dt {
  color: var(--got-text-muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.got-definition-list dd {
  margin: 0;
  color: var(--got-text-secondary);
}

.got-rule-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 44px;
}

.got-rule-card {
  padding: 28px;
  background: var(--got-surface);
  border: 1px solid rgba(255, 255, 255, 0.085);
  clip-path: polygon(12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px);
}

.got-rule-card__label {
  display: block;
  margin-bottom: 18px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.got-rule-card--do {
  box-shadow: inset 3px 0 0 rgba(33, 212, 255, 0.7);
}

.got-rule-card--do .got-rule-card__label {
  color: var(--got-cyan);
}

.got-rule-card--dont {
  box-shadow: inset 3px 0 0 rgba(255, 85, 119, 0.7);
}

.got-rule-card--dont .got-rule-card__label {
  color: var(--got-red);
}

.got-rule-card ul {
  margin: 0;
}

.got-rule-card li {
  margin-bottom: 10px;
}

.got-elevation-demo {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 16px;
  margin: 28px 0;
  padding: 28px;
  background: var(--got-void);
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(14px 0,
      100% 0,
      100% calc(100% - 14px),
      calc(100% - 14px) 100%,
      0 100%,
      0 14px);
}

.got-elevation-layer {
  display: grid;
  place-items: center;
  min-height: 120px;
  color: var(--got-text-secondary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255, 255, 255, 0.08);
  clip-path: polygon(8px 0,
      100% 0,
      100% calc(100% - 8px),
      calc(100% - 8px) 100%,
      0 100%,
      0 8px);
}

.got-elevation-layer--void {
  background: var(--got-void);
}

.got-elevation-layer--surface {
  background: var(--got-surface);
}

.got-elevation-layer--panel {
  background: var(--got-panel);
}

.got-elevation-layer--elevated {
  background: var(--got-elevated);
}

/* ============================================================
   DESIGN PRINCIPLES
============================================================ */

.got-principle {
  --got-principle-accent: var(--got-cyan);
  --got-principle-accent-soft: var(--got-cyan-080);

  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 28px;
  margin: 28px 0;
  padding: 32px;
  background:
    linear-gradient(145deg,
      var(--got-principle-accent-soft),
      transparent 45%),
    var(--got-principle-surface);
  border: 1px solid var(--got-principle-border);
  clip-path: polygon(14px 0,
      100% 0,
      100% calc(100% - 14px),
      calc(100% - 14px) 100%,
      0 100%,
      0 14px);
}

.got-principle--magenta {
  --got-principle-accent: var(--got-magenta);
  --got-principle-accent-soft: var(--got-magenta-080);
}

.got-principle--cyan {
  --got-principle-accent: var(--got-cyan);
  --got-principle-accent-soft: var(--got-cyan-080);
}

.got-principle--violet {
  --got-principle-accent: var(--got-violet);
  --got-principle-accent-soft: var(--got-violet-080);
}

.got-principle--yellow {
  --got-principle-accent: var(--got-yellow);
  --got-principle-accent-soft: var(--got-yellow-060);
}

.got-principle--split {
  --got-principle-accent: var(--got-cyan);
  --got-principle-accent-soft: var(--got-magenta-080);
}

.got-principle__number {
  color: var(--got-principle-accent);
  font-family: var(--got-font-mono);
  font-size: 30px;
  font-weight: 400;
  line-height: 1;
}

.got-principle__title {
  margin: 0 0 14px;
  color: var(--got-text-primary);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.got-principle__statement {
  max-width: 720px;
  margin: 0;
  color: var(--got-text-secondary);
  font-size: 17px;
  line-height: 1.65;
}

.got-principle__rules {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.got-principle__rules>div {
  padding: 16px;
  background: var(--got-white-025);
  border: 1px solid var(--got-white-060);
}

.got-principle__rules strong,
.got-principle__rules span {
  display: block;
}

.got-principle__rules strong {
  margin-bottom: 6px;
  color: var(--got-text-primary);
  font-size: 14px;
}

.got-principle__rules span {
  color: var(--got-text-muted);
  font-size: 13px;
  line-height: 1.5;
}

.got-light-role-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 44px;
}

.got-light-role {
  padding: 24px;
  background: var(--got-surface);
  border: 1px solid var(--got-white-085);
  clip-path: polygon(10px 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 10px);
}

.got-light-role .light-demo {
  width: 100%;
  height: 84px;
  margin-bottom: 20px;
}

.light-red::before {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 12px;
  height: 12px;
  content: "";
  background: var(--got-red);
  border-radius: 50%;
  box-shadow: 0 0 16px var(--got-red-450);
}

.got-geometry-comparison,
.got-effect-test,
.got-expression-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 44px;
}

.got-geometry-example,
.got-effect-test__item,
.got-expression-card {
  padding: 28px;
  background: var(--got-surface);
  border: 1px solid var(--got-white-085);
  clip-path: polygon(12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px);
}

.got-geometry-example--preferred {
  border-color: var(--got-cyan-220);
}

.got-geometry-example--rejected {
  border-color: var(--got-red-220);
}

.got-rounded-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 22px;
  color: var(--got-text-primary);
  font-size: 14px;
  font-weight: 500;
  background: var(--got-panel);
  border: 1px solid var(--got-white-120);
  border-radius: 9999px;
}

.got-effect-sample {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 4px 14px;
  align-items: center;
  min-height: 110px;
  margin-top: 18px;
  padding: 22px;
  background: var(--got-surface);
  border: 1px solid var(--got-white-090);
}

.got-effect-sample__status {
  grid-row: 1 / span 2;
  width: 8px;
  height: 8px;
  background: var(--got-cyan);
  border-radius: 50%;
}

.got-effect-sample strong,
.got-effect-sample small {
  display: block;
}

.got-effect-sample small {
  color: var(--got-text-muted);
}

.got-effect-sample--enhanced {
  background:
    linear-gradient(145deg,
      var(--got-cyan-080),
      transparent 55%),
    var(--got-surface);
  border-color: var(--got-cyan-220);
}

.got-effect-sample--enhanced .got-effect-sample__status {
  box-shadow: var(--got-glow-cyan-sm);
}

.got-expression-card ul {
  margin-bottom: 0;
}

.got-expression-card--qvtm {
  border-color: var(--got-white-120);
}

.got-expression-card--infinitrust {
  background:
    linear-gradient(145deg,
      var(--got-magenta-080),
      var(--got-cyan-040)),
    var(--got-surface);
  border-color: var(--got-violet-240);
}

@media (max-width: 760px) {
  .got-principle {
    grid-template-columns: 1fr;
  }

  .got-principle__rules,
  .got-light-role-grid,
  .got-geometry-comparison,
  .got-effect-test,
  .got-expression-grid {
    grid-template-columns: 1fr;
  }
}

/** SURFACES **/
.got-surface-grid--simple {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.got-surface-card--void {
  background: var(--got-void);
  border-color: rgba(255, 255, 255, 0.06);
}

.got-surface-card--ceramic {
  background: var(--got-surface);
  border-color: rgba(255, 255, 255, 0.1);
}

.got-state-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 28px 0 44px;
}

.got-state-card {
  position: relative;
  display: grid;
  grid-template-columns: 4px minmax(0, 1fr);
  gap: 20px;
  min-height: 150px;
  padding: 24px;
  background: var(--got-surface);
  border: 1px solid rgba(255, 255, 255, 0.085);
  clip-path: polygon(10px 0,
      100% 0,
      100% calc(100% - 10px),
      calc(100% - 10px) 100%,
      0 100%,
      0 10px);
}

.got-surface-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 28px 0 44px;
}

.got-surface-card {
  position: relative;
  min-height: 190px;
  padding: 28px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.09);
  clip-path: polygon(12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px);
}

.got-surface-card--void {
  background: var(--got-void);
}

.got-surface-card--ceramic {
  background:
    var(--got-gradient-surface-soft),
    var(--got-surface);
}

.got-surface-card--active {
  background:
    var(--got-gradient-state-active),
    var(--got-surface);
  box-shadow:
    inset 3px 0 0 var(--got-cyan-700),
    inset 0 0 0 1px var(--got-cyan-080);
}

.got-surface-card--crystal {
  background:
    var(--got-gradient-crystal-reflection),
    var(--got-gradient-crystal-magenta),
    var(--got-gradient-crystal-cyan),
    var(--got-surface);
}

.got-surface-card--crystal::after {
  position: absolute;
  right: 28px;
  bottom: 24px;
  width: 72px;
  height: 72px;
  content: "";
  background: var(--got-white-035);
  border: 1px solid var(--got-white-300);
  transform: skewX(calc(var(--got-master-angle) * -1));
}

.got-state-card__indicator {
  width: 3px;
  height: 100%;
  min-height: 72px;
  background: var(--got-white-160);
}

.got-state-card__indicator--active {
  background: var(--got-magenta);
  box-shadow: var(--got-glow-magenta-sm);
}

.got-state-card__indicator--verified {
  background: var(--got-cyan);
  box-shadow: var(--got-glow-cyan-sm);
}

.got-state-card__indicator--review {
  background: var(--got-yellow);
  box-shadow: var(--got-glow-yellow-sm);
}

.got-state-card--active {
  border-color: var(--got-border-magenta-state);
}

.got-state-card--verified {
  border-color: var(--got-border-cyan-state);
}

.got-state-card--review {
  border-color: var(--got-border-yellow-state);
}

/* ============================================================
   KNOWLEDGE GRAPH
============================================================ */

.got-knowledge-section {
  margin: 72px 0 24px;
}

.got-section-heading {
  max-width: 680px;
  margin-bottom: 28px;
}

.got-section-heading__label {
  display: block;
  margin-bottom: 10px;
  color: var(--got-cyan);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.got-section-heading__title {
  margin: 0 0 12px;
  color: var(--got-text-primary);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.got-section-heading__description {
  margin: 0;
  color: var(--got-text-secondary);
  font-size: 16px;
  line-height: 1.6;
}

.got-knowledge-graph {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

/* Central connection line */
.got-knowledge-graph::before {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  width: calc(100% - 80px);
  height: 1px;
  content: "";
  background:
    linear-gradient(90deg,
      transparent,
      var(--got-magenta-220),
      var(--got-violet-240),
      var(--got-cyan-220),
      transparent);
  transform: translate(-50%, -50%) rotate(-2deg);
  pointer-events: none;
}

.got-knowledge-node {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 210px;
  padding: 26px;
  color: inherit;
  text-decoration: none;
  background:
    linear-gradient(145deg,
      var(--got-node-glow, transparent),
      transparent 48%),
    var(--got-knowledge-node-bg);
  border: 1px solid var(--got-node-border, var(--got-knowledge-node-border));
  clip-path: polygon(12px 0,
      100% 0,
      100% calc(100% - 12px),
      calc(100% - 12px) 100%,
      0 100%,
      0 12px);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    background-color 180ms ease,
    box-shadow 180ms ease;
}

.got-knowledge-node:hover {
  color: inherit;
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow:
    inset 0 0 0 1px var(--got-node-border),
    0 18px 38px var(--got-black-260);
}

.got-knowledge-node:focus-visible {
  outline: 2px solid var(--got-cyan);
  outline-offset: 4px;
}

.got-knowledge-node--magenta {
  --got-node-accent: var(--got-magenta);
  --got-node-border: var(--got-knowledge-magenta-border);
  --got-node-glow: var(--got-knowledge-magenta-glow);
}

.got-knowledge-node--violet {
  --got-node-accent: var(--got-violet);
  --got-node-border: var(--got-knowledge-violet-border);
  --got-node-glow: var(--got-knowledge-violet-glow);
}

.got-knowledge-node--cyan {
  --got-node-accent: var(--got-cyan);
  --got-node-border: var(--got-knowledge-cyan-border);
  --got-node-glow: var(--got-knowledge-cyan-glow);
}

.got-knowledge-node--yellow {
  --got-node-accent: var(--got-yellow);
  --got-node-border: var(--got-knowledge-yellow-border);
  --got-node-glow: var(--got-knowledge-yellow-glow);
}

.got-knowledge-node__category {
  align-self: start;
  margin-bottom: 18px;
  color: var(--got-node-accent);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.got-knowledge-node__title {
  display: block;
  margin-bottom: 10px;
  color: var(--got-text-primary);
  font-size: 23px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.got-knowledge-node__description {
  max-width: 36rem;
  color: var(--got-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.got-knowledge-node__arrow {
  position: absolute;
  right: 22px;
  bottom: 18px;
  color: var(--got-node-accent);
  font-size: 21px;
  transition: transform 180ms ease;
}

.got-knowledge-node:hover .got-knowledge-node__arrow {
  transform: translate(3px, -3px);
}

.chamfer-box {
  --got-chamfer: var(--got-chamfer-md);

  display: grid;
  place-items: center;
  min-width: 170px;
  min-height: 90px;
  padding: 18px;
  background: var(--got-panel);
  border: 1px solid var(--got-white-100);
  clip-path: polygon(var(--got-chamfer) 0,
      100% 0,
      100% calc(100% - var(--got-chamfer)),
      calc(100% - var(--got-chamfer)) 100%,
      0 100%,
      0 var(--got-chamfer));
}

.chamfer-button {
  --got-chamfer: var(--got-chamfer-md);
}

.chamfer-card {
  --got-chamfer: var(--got-chamfer-lg);
}

.chamfer-panel {
  --got-chamfer: var(--got-chamfer-xl);
}


/* MEDIA QUERIES */
@media (max-width: 960px) {
  .got-card-grid--three {
    grid-template-columns: 1fr;
  }

  .got-lighting-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }

  .got-elevation-demo {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {

  .got-lighting-card,
  .got-definition-list>div {
    grid-template-columns: 1fr;
  }

  .got-rule-grid,
  .got-elevation-demo {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .got-surface-grid {
    grid-template-columns: 1fr;
  }
}


@media (max-width: 700px) {

  .got-surface-grid--simple,
  .got-state-grid {
    grid-template-columns: 1fr;
  }
}



@media (max-width: 760px) {
  .got-hero {
    grid-template-columns: 1fr;
    padding: 32px;
  }

  .glass-mark {
    max-width: 220px;
    font-size: 110px;
  }

  .card-grid-demo {
    grid-template-columns: 1fr;
  }

  .display-preview {
    font-size: 40px;
  }
}

@media (max-width: 960px) {
  .md-content {
    padding-left: 0;
    padding-right: 0;
  }

  .md-sidebar--primary,
  .md-sidebar--secondary {
    padding: 0;
  }

  .md-sidebar--secondary .md-sidebar__inner {
    padding: 0;
    background: transparent;
    border: 0;
    clip-path: none;
  }
}

@media (max-width: 960px) {
  .md-sidebar--secondary {
    padding: 0;
  }

  .md-sidebar--secondary .md-nav--secondary {
    padding: 0;
    background: transparent;
    border: 0;
    clip-path: none;
    box-shadow: none;
  }

  .md-content {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (max-width: 760px) {
  .got-chapter-hero {
    min-height: 0;
    padding: 32px 26px;
  }

  .got-card-grid {
    grid-template-columns: 1fr;
  }

  .got-card {
    padding: 24px;
  }
}

@media (max-width: 760px) {
  .got-knowledge-graph {
    grid-template-columns: 1fr;
  }

  .got-knowledge-graph::before {
    top: 32px;
    left: 18px;
    width: 1px;
    height: calc(100% - 64px);
    background:
      linear-gradient(180deg,
        var(--got-magenta-220),
        var(--got-violet-240),
        var(--got-cyan-220),
        var(--got-yellow-200));
    transform: none;
  }

  .got-knowledge-node {
    min-height: 190px;
  }
}

@media (max-width: 760px) {
  .md-top {
    min-height: 38px;
    padding: 0 13px;
    font-size: 11px;
  }
}