:root {
  --md-primary-fg-color: #6d4aff;
  --md-accent-fg-color: #ff5d8f;
  --learning-concept: #573bd1;
  --learning-action: #006f99;
  --learning-success: #147a4b;
  --learning-caution: #8f5200;
  --learning-danger: #b32646;
  /* 말풍선 바탕. 알파가 섞인 색을 쓰면 뒤 본문 글자가 비쳐 겹쳐 보인다 */
  --learning-tip-surface: #ffffff;
}

[data-md-color-scheme="slate"] {
  --learning-concept: #c0b6ff;
  --learning-action: #79d8ff;
  --learning-success: #79dca9;
  --learning-caution: #ffc46b;
  --learning-danger: #ff8ca0;
  --learning-tip-surface: #2b2e3b;
}

.md-typeset h1 {
  color: var(--learning-concept);
  font-weight: 800;
  letter-spacing: -0.035em;
}

.md-typeset h2 {
  --section-accent: var(--learning-concept);
  border-left: 0.18rem solid var(--section-accent);
  border-bottom: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
  border-radius: 0.2rem;
  padding: 0.32rem 0.55rem 0.38rem;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--section-accent) 10%, transparent),
    transparent 72%
  );
  color: var(--section-accent);
}

.md-typeset h3 {
  --section-accent: var(--learning-action);
  color: var(--section-accent);
}

.md-typeset :is(h2, h3):is(
  [id*="실습"],
  [id*="단계"],
  [id*="설치"],
  [id*="실행"],
  [id*="만들기"],
  [id*="워크플로"],
  [id*="설정"],
  [id*="사용"]
) {
  --section-accent: var(--learning-action);
}

.md-typeset :is(h2, h3):is(
  [id*="완료"],
  [id*="결과"],
  [id*="체크"],
  [id*="확인"],
  [id*="성공"],
  [id*="다음"]
) {
  --section-accent: var(--learning-success);
}

.md-typeset :is(h2, h3):is(
  [id*="주의"],
  [id*="경고"],
  [id*="위험"],
  [id*="한계"]
) {
  --section-accent: var(--learning-caution);
}

.md-typeset :is(h2, h3):is(
  [id*="오류"],
  [id*="실패"],
  [id*="문제"],
  [id*="안-될"]
) {
  --section-accent: var(--learning-danger);
}

.md-typeset :is(p, li, blockquote) > strong {
  color: var(--learning-concept);
}

.md-typeset :not(pre) > code {
  border: 1px solid color-mix(in srgb, var(--learning-action) 22%, transparent);
  background-color: color-mix(in srgb, var(--learning-action) 8%, transparent);
  color: var(--learning-action);
}

.md-typeset blockquote {
  border-left-color: var(--learning-concept);
  border-radius: 0 0.35rem 0.35rem 0;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--learning-concept) 9%, transparent),
    transparent 82%
  );
  color: var(--md-default-fg-color);
}

.md-typeset table:not([class]) th {
  background-color: color-mix(in srgb, var(--learning-concept) 10%, transparent);
  color: var(--learning-concept);
}

.md-typeset .task-list-item:has(input[type="checkbox"]:checked) {
  color: var(--learning-success);
}

.md-typeset mark {
  border-radius: 0.18rem;
  padding-inline: 0.14em;
  background-color: color-mix(in srgb, var(--learning-caution) 22%, transparent);
  color: var(--learning-caution);
}

.md-typeset .admonition,
.md-typeset details {
  border-left: 0.2rem solid var(--learning-action);
}

.md-typeset :is(.admonition, details):is(.tip, .success, .check, .done) {
  border-left-color: var(--learning-success);
}

.md-typeset :is(.admonition, details):is(.warning, .caution, .attention) {
  border-left-color: var(--learning-caution);
}

.md-typeset :is(.admonition, details):is(.failure, .danger, .error, .bug) {
  border-left-color: var(--learning-danger);
}

.md-typeset :is(.admonition, details):is(.question, .example, .quote) {
  border-left-color: var(--learning-concept);
}

.md-typeset .learning-color-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.55rem;
  margin: 1rem 0 1.25rem;
}

.md-typeset .learning-color-key__item {
  --key-color: var(--learning-concept);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border: 1px solid color-mix(in srgb, var(--key-color) 28%, transparent);
  border-radius: 999px;
  padding: 0.18rem 0.48rem;
  background-color: color-mix(in srgb, var(--key-color) 8%, transparent);
  color: var(--key-color);
  font-size: 0.68rem;
  font-weight: 700;
}

.md-typeset .learning-color-key__item::before {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background-color: var(--key-color);
  content: "";
}

.md-typeset .learning-color-key__item--action {
  --key-color: var(--learning-action);
}

.md-typeset .learning-color-key__item--success {
  --key-color: var(--learning-success);
}

.md-typeset .learning-color-key__item--caution {
  --key-color: var(--learning-caution);
}

.md-typeset .learning-color-key__item--danger {
  --key-color: var(--learning-danger);
}

.md-typeset img {
  border-radius: 0.75rem;
}

.md-typeset .workflow-figure {
  margin-block: 1.25rem 1rem;
}

.md-typeset .workflow-figure > p {
  margin: 0;
}

.md-typeset .workflow-figure a {
  display: block;
  border-radius: 0.75rem;
  outline: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
  transition: outline-color 160ms ease, transform 160ms ease;
}

.md-typeset .workflow-figure a:hover,
.md-typeset .workflow-figure a:focus-visible {
  outline-color: var(--md-accent-fg-color);
}

.md-typeset .workflow-figure img {
  display: block;
  width: 100%;
  height: auto;
}

.md-typeset .workflow-figure__caption {
  padding-top: 0.45rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.68rem;
  text-align: center;
}

/* ============================================================
   결과 비교 이미지

   Seed를 고정하고 값 하나만 바꾼 결과를 나란히 놓을 때 쓴다.
   .workflow-figure 를 그대로 쓰면 안 된다. 그쪽은 가로로 긴 배선도용이라
   넓은 화면에서 본문 폭을 벗어나 70rem까지 늘어나고(작은 렌더 결과가
   뭉개진다), 좁은 화면에서는 min-width 46rem으로 가로 스크롤을 강제한다.
   사진에는 둘 다 맞지 않는다.

   auto-fit 이 장수를 세지 않으므로 2장이든 3장이든 같은 표기를 쓰고,
   화면이 좁아지면 한 열로 접힌다.
   ============================================================ */

.md-typeset .result-compare {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 0.7rem;
  margin-block: 1.25rem 1rem;
}

.md-typeset .result-compare__item {
  margin: 0;
}

.md-typeset .result-compare__item img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  outline: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}

.md-typeset .result-compare__item > p {
  margin: 0.35rem 0 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  line-height: 1.6;
  text-align: center;
}

.md-typeset .result-compare__item > p:has(img) {
  margin: 0;
}

/* ============================================================
   노드 클로즈업

   노드 하나를 설명 바로 옆에서 보여줄 때 쓴다. 이미지 자산이 세 종류로
   나뉘므로 클래스도 셋이다.

     .workflow-figure  전체 배선도. 가로로 길어 본문 폭을 벗어난다
     .result-compare   값 하나만 바꾼 결과를 나란히 놓는다
     .node-shot        노드 한 개. 본문 흐름을 끊지 않게 폭을 제한한다

   폭을 제한하지 않으면 노드 한 개짜리 그림이 본문 폭까지 늘어나
   실제 화면보다 크게 보인다.
   ============================================================ */

.md-typeset .node-shot {
  margin: 0.9rem 0 1.1rem;
  max-width: 26rem;
}

.md-typeset .node-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
  outline: 1px solid color-mix(in srgb, var(--md-default-fg-color) 12%, transparent);
}

.md-typeset .node-shot > p {
  margin: 0.35rem 0 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  line-height: 1.6;
}

.md-typeset .node-shot > p:has(img) {
  margin: 0;
}

/* ============================================================
   폴더 트리

   ├── 같은 문자로 그리면 글꼴에 따라 선이 어긋나고, 화면 낭독기가
   기호를 그대로 읽는다. 테두리 선으로 그려 글자는 폴더 이름만 남긴다.
   목록이라 폴더 이름을 그대로 복사할 수 있고, 항목이 늘면 마크다운에
   줄 하나만 더한다.
   ============================================================ */

.md-typeset .filetree {
  --tree-line: color-mix(in srgb, var(--md-default-fg-color) 26%, transparent);
  margin: 1rem 0 1.2rem;
  font-size: 0.76rem;
}

.md-typeset .filetree ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.md-typeset .filetree li {
  margin: 0;
  padding: 0.12rem 0;
}

/* 두 번째 단부터 꺾은선을 붙인다. 최상위 폴더에는 붙이지 않는다. */
.md-typeset .filetree ul ul {
  padding-left: 0.9rem;
}

.md-typeset .filetree ul ul > li {
  position: relative;
  padding-left: 1.1rem;
}

.md-typeset .filetree ul ul > li::before {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  border-left: 1px solid var(--tree-line);
  content: "";
}

/* 마지막 항목은 세로선을 꺾이는 지점까지만 그린다 */
.md-typeset .filetree ul ul > li:last-child::before {
  bottom: auto;
  height: 0.85rem;
}

.md-typeset .filetree ul ul > li::after {
  position: absolute;
  left: 0;
  top: 0.85rem;
  width: 0.75rem;
  border-top: 1px solid var(--tree-line);
  content: "";
}

.md-typeset .filetree code {
  border: none;
  background: none;
  padding: 0;
  color: var(--learning-action);
  font-weight: 700;
}

.md-typeset .filetree .filetree__note {
  color: var(--md-default-fg-color--light);
}

/* 폴더 아이콘을 붙이는 변형.
   이모지 대신 단색 아이콘을 얹어 색을 --learning-action 으로 맞춘다.
   background-image 로 넣으면 색이 파일 안에 박혀 어두운 화면에서 따라오지 않으므로
   mask 로 모양만 쓰고 색은 CSS 에서 준다.
   아이콘은 가상 요소라 폴더 이름을 복사할 때 딸려오지 않는다. */
.md-typeset .filetree--icon code::before {
  display: inline-block;
  width: 0.92em;
  height: 0.92em;
  margin-right: 0.34em;
  vertical-align: -0.12em;
  background-color: var(--learning-action);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V8c0-1.1-.9-2-2-2h-8l-2-2z%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M10%204H4c-1.1%200-2%20.9-2%202v12c0%201.1.9%202%202%202h16c1.1%200%202-.9%202-2V8c0-1.1-.9-2-2-2h-8l-2-2z%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
  content: "";
}

.md-typeset table:not([class]) {
  font-size: 0.76rem;
}

.md-typeset .guide-meta {
  margin: 1rem 0;
  border-radius: 0.5rem;
  padding: 0.7rem 1rem 0.8rem;
  background-color: color-mix(in srgb, var(--learning-concept) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--learning-concept) 18%, transparent);
}

.md-typeset .guide-meta > ul {
  margin: 0;
  padding-left: 1.1rem;
}

.md-typeset .guide-meta li {
  margin: 0.2rem 0;
}

/* 한 줄로 압축한 메타 정보. 본문이 화면 위쪽에 오도록 높이를 줄인다. */
.md-typeset .guide-meta {
  padding: 0.55rem 0.9rem;
}

.md-typeset .guide-meta > p {
  margin: 0;
  font-size: 0.72rem;
  line-height: 1.65;
  color: var(--md-default-fg-color--light);
}

.md-typeset .guide-meta > p + p {
  margin-top: 0.3rem;
}

.md-typeset .guide-meta > p > strong {
  color: var(--md-default-fg-color);
  font-weight: 700;
}

.md-typeset .guide-meta > p > strong::after {
  content: " ";
}

.md-typeset .grid.cards > ul > li {
  border-radius: 0.75rem;
  transition: border-color 160ms ease, transform 160ms ease;
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  transform: translateY(-2px);
}

.md-typeset .learning-path-cards > ul > li {
  --card-tone: var(--learning-concept);
  border-top: 0.18rem solid var(--card-tone);
}

.md-typeset .learning-path-cards > ul > li:nth-child(1) {
  --card-tone: var(--learning-action);
}

.md-typeset .learning-path-cards > ul > li:nth-child(3) {
  --card-tone: var(--learning-success);
}

.md-typeset .learning-path-cards > ul > li:nth-child(4) {
  --card-tone: var(--learning-danger);
}

.md-typeset .learning-path-cards > ul > li:hover {
  border-color: var(--card-tone);
}

.md-typeset .learning-path-cards > ul > li > :first-child strong {
  color: var(--card-tone);
}

@media (min-width: 76.25em) {
  .md-grid {
    max-width: 84rem;
  }

  .md-typeset .workflow-figure {
    width: min(70rem, calc(100vw - 30rem));
    margin-left: 50%;
    transform: translateX(-50%);
  }
}

@media (max-width: 44.984375em) {
  .md-typeset h2 {
    padding-inline: 0.45rem;
  }

  .md-typeset .learning-color-key {
    gap: 0.35rem;
  }

  .md-typeset .workflow-figure {
    width: calc(100% + 0.8rem);
    margin-right: -0.8rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
  }

  .md-typeset .workflow-figure > p:first-child {
    min-width: 46rem;
  }

  .md-typeset .workflow-figure__caption {
    position: sticky;
    left: 0;
    width: calc(100vw - 2.4rem);
    text-align: left;
  }
}

/* ============================================================
   왼쪽 네비게이션 섹션 색 구분
   00~05 각 장에 고유 색을 부여해 지금 어느 장을 보는지 구분한다.
   ============================================================ */

:root {
  --nav-00: #0e7490;  /* 시작하기 */
  --nav-01: #573bd1;  /* 핵심 개념 */
  --nav-02: #0f766e;  /* 모델 */
  --nav-03: #b45309;  /* 심화 제어 */
  --nav-04: #15803d;  /* 워크플로우 */
  --nav-05: #b32646;  /* 문제 해결 */
}

[data-md-color-scheme="slate"] {
  --nav-00: #67e8f9;
  --nav-01: #c0b6ff;
  --nav-02: #5eead4;
  --nav-03: #fbbf24;
  --nav-04: #86efac;
  --nav-05: #ff8ca0;
}

/* 최상위 섹션 라벨에 색 막대를 붙인다 */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > label.md-nav__link {
  border-left: 0.2rem solid transparent;
  padding-left: 0.5rem;
  border-radius: 0.15rem;
  font-weight: 700;
}

/* 섹션별 색. 순번이 아니라 문서 폴더 이름으로 고른다.
   javascripts/nav-sections.js 가 각 최상위 항목에 data-nav-section 을 붙인다.
   nth-child 로 걸면 nav 최상위 항목을 하나 넣거나 뺄 때 그 뒤 색이 조용히
   밀린다. 폴더 이름을 쓰면 순서를 바꾸거나 섹션을 더해도 어긋나지 않는다.
   새 섹션을 만들 때는 아래에 폴더 이름 한 줄만 추가한다.
   href 를 CSS 선택자로 쓰지 못하는 이유는 MkDocs 가 만드는 nav href 가
   페이지마다 달라지는 상대 경로이기 때문이다(홈에서는 00-getting-started/,
   그 섹션 안에서는 ../). JS 는 절대 경로로 바꿀 수 있어 제약이 없다. */
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="00-getting-started"] { --nav-color: var(--nav-00); }
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="01-core-concepts"] { --nav-color: var(--nav-01); }
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="02-models"] { --nav-color: var(--nav-02); }
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="03-advanced-techniques"] { --nav-color: var(--nav-03); }
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="04-workflows"] { --nav-color: var(--nav-04); }
/* 학습 예제는 04 워크플로우의 연장이라 같은 색을 쓴다 */
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="examples"] { --nav-color: var(--nav-04); }
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section="05-troubleshooting"] { --nav-color: var(--nav-05); }

/* 색이 정해진 섹션에만 막대와 세로선을 붙인다.
   --nav-color 가 없는 항목(문서 지도, 용어 사전)은 기본 모양 그대로다. */
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section] > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section] > label.md-nav__link {
  border-left-color: var(--nav-color, transparent);
  color: var(--nav-color, inherit);
}

.md-nav--primary > .md-nav__list > .md-nav__item[data-nav-section] > .md-nav {
  border-left: 1px solid color-mix(in srgb, var(--nav-color, transparent) 45%, transparent);
}

.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav {
  margin-left: 0.35rem;
  padding-left: 0.35rem;
}

/* ============================================================
   표 폭
   Material 기본값은 display:inline-block 이라 표가 내용 폭만큼만
   차지하고 오른쪽에 공백이 남는다. 열이 3개 이상인 표만 본문 폭을
   채우게 해 가로를 넓히고 세로 줄바꿈을 줄인다.
   2열짜리 짧은 표는 늘어나면 오히려 허전해져 기본값을 유지한다.
   표를 감싸는 .md-typeset__scrollwrap 은 그대로라 좁은 화면의
   가로 스크롤은 유지된다.
   ============================================================ */

.md-typeset table:not([class]):has(th:nth-child(3)) {
  display: table;
  width: 100%;
}

/* 첫 열은 항목 이름이라 잘 접히지 않게, 나머지는 고르게 나눈다 */
.md-typeset table:not([class]):has(th:nth-child(3)) th:first-child,
.md-typeset table:not([class]):has(th:nth-child(3)) td:first-child {
  white-space: nowrap;
}

/* 좁은 화면에서는 첫 열도 접는다. 첫 열에 노드 이름이 아니라 문장이
   들어가는 표가 있어, nowrap을 유지하면 그런 표에서 가로 스크롤이
   강제된다. */
@media screen and (max-width: 59.9375em) {
  .md-typeset table:not([class]):has(th:nth-child(3)) th:first-child,
  .md-typeset table:not([class]):has(th:nth-child(3)) td:first-child {
    white-space: normal;
  }
}

/* :has()를 지원하지 않는 환경에서는 기본 동작으로 되돌아간다 */
@supports not selector(:has(*)) {
  .md-typeset table:not([class]) {
    min-width: 70%;
  }
}

/* ============================================================
   용어 사전 툴팁 (abbr)

   본문 용어에 마우스를 올리거나(데스크톱) 탭하면(터치) 정의가 뜬다.
   용어 사전 페이지로 이동하지 않으므로 읽던 자리를 잃지 않는다.

   표시는 옅은 배경으로 한다. 표시를 없애면 어떤 단어가 용어인지
   알 수 없어진다. 색은 작성 규약의 '핵심 개념 = 보라'를 쓰고 본문
   글자색은 건드리지 않아, 용어가 1,000곳 넘게 나와도 읽기를 방해하지
   않는다.

   말풍선은 javascripts/glossary-tooltip.js 가 body 에 붙인 요소
   .glossary-tip 하나로 그린다. 용어에 ::after 로 붙이면 표의 가로
   스크롤 컨테이너에 갇혀 잘린다.
   ============================================================ */

.md-typeset abbr[data-tip] {
  border-bottom: none;
  color: inherit;
  font-weight: inherit;
  cursor: help;
  background: color-mix(in srgb, var(--learning-concept) 14%, transparent);
  border-radius: 0.15rem;
  padding: 0.04em 0.2em;
  text-decoration: none;
}

.md-typeset abbr[data-tip]:hover,
.md-typeset abbr[data-tip]:focus-visible,
.md-typeset abbr[data-tip][data-tip-open] {
  background: color-mix(in srgb, var(--learning-concept) 30%, transparent);
  outline: none;
}

/* 제목 안에서는 배경을 빼 제목 모양을 흐리지 않게 한다 */
.md-typeset :is(h1, h2, h3, h4) abbr[data-tip] {
  background: none;
  padding: 0;
}

/* 말풍선 — position: fixed 라 어떤 스크롤 컨테이너에도 갇히지 않는다 */
.glossary-tip {
  position: fixed;
  z-index: 20;
  left: 0;
  top: 0;
  max-width: min(21rem, calc(100vw - 1rem));
  padding: 0.55rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--learning-concept) 30%, transparent);
  border-radius: 0.25rem;
  background: var(--learning-tip-surface);
  box-shadow: var(--md-shadow-z2);
  color: var(--md-default-fg-color);
  font-family: var(--md-text-font-family);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.7;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.15rem);
  transition: opacity 120ms, transform 120ms, visibility 120ms;
}

.glossary-tip--visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* 위가 좁아 아래로 뒤집힌 경우 등장 방향도 뒤집는다 */
.glossary-tip--below {
  transform: translateY(-0.15rem);
}

.glossary-tip--below.glossary-tip--visible {
  transform: translateY(0);
}

[data-md-color-scheme="slate"] .glossary-tip {
  border-color: color-mix(in srgb, var(--learning-concept) 45%, transparent);
}

/* 좁은 화면에서는 글자를 조금 키우고 폭을 넓게 쓴다 */
@media screen and (max-width: 44.9375em) {
  .glossary-tip {
    max-width: calc(100vw - 1rem);
    font-size: 0.75rem;
    line-height: 1.75;
  }
}

/* 움직임을 줄이도록 설정한 사용자에게는 전환을 끈다 */
@media (prefers-reduced-motion: reduce) {
  .glossary-tip {
    transition: none;
  }
}

/* color-mix 미지원 환경 대비 */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
  .md-typeset abbr[data-tip] {
    background: #ece7ff;
  }
}