/* HMY Warm Editorial Reader. Token source: supplied v2 reference. */
@font-face {
  font-family: Pretendard;
  src: url("../fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
:root,
[data-theme="light"] {
  color-scheme: light;
  --canvas: #f7f6f2;
  --paper: #fcfbf8;
  --surface: #f0efea;
  --surface-2: #e9ebe5;
  --ink: #282c2a;
  --body: #383e3b;
  --secondary: #56615c;
  --muted: #606a64;
  --border: #dddfd8;
  --strong-line: #c9cdc5;
  --accent: #28646a;
  --accent-bg: #e8f0ed;
  --callout: #f0f3ec;
  --warning: #f8f0e2;
  --danger: #f7ebe8;
  --focus: #207579;
  --code-bg: #192125;
  --code-header: #151d21;
  --code-text: #e0e8e6;
  --code-muted: #b5c1be;
  --code-line: #405159;
  --overlay: rgb(12 15 14 / 0.88);
  --shadow: 0 12px 36px rgb(33 45 37 / 0.12);
  --font-ui: Pretendard, system-ui, -apple-system, "Malgun Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", Consolas, Pretendard, monospace;
  --bg: var(--canvas);
  --text: var(--ink);
  --text-secondary: var(--secondary);
  --text-muted: var(--muted);
  --border-soft: var(--border);
  --body-max: 776px;
  --wide-max: 960px;
}
[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #1c201f;
  --paper: #222724;
  --surface: #292f2b;
  --surface-2: #333b36;
  --ink: #edf0eb;
  --body: #dce2dc;
  --secondary: #bcc8bf;
  --muted: #a8b5aa;
  --border: #414b43;
  --strong-line: #556157;
  --accent: #8dccc5;
  --accent-bg: #263a36;
  --callout: #2a3630;
  --warning: #382f25;
  --danger: #3a2b2a;
  --focus: #9be0d5;
  --code-bg: #131b1e;
  --code-header: #10171a;
  --code-text: #e3eee9;
  --code-muted: #bccbc7;
  --shadow: 0 12px 40px rgb(0 0 0 / 0.35);
}
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  scroll-padding-top: 90px;
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--strong-line) transparent;
}
body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 17px/1.8 var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
button,
input {
  font: inherit;
}
button {
  cursor: pointer;
  color: inherit;
}
button:disabled {
  cursor: default;
}
button,
summary,
a {
  touch-action: manipulation;
}
button {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  min-height: 44px;
}
button:hover {
  background: var(--surface);
}
:where(a, button, input, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
input {
  background: var(--paper);
  color: var(--ink);
}
svg {
  vertical-align: middle;
}
img,
video {
  max-width: 100%;
}
img {
  height: auto;
}
iframe {
  max-width: 100%;
  border: 0;
}
figure {
  margin: 0;
}
h1,
h2,
h3,
h4 {
  color: var(--ink);
  line-height: 1.4;
  word-break: keep-all;
  overflow-wrap: break-word;
  letter-spacing: -0.025em;
}
h1 {
  font-size: 38px;
}
h2 {
  font-size: 26px;
}
h3 {
  font-size: 21px;
}
p {
  margin: 0 0 22px;
}
ul,
ol {
  padding-left: 24px;
}
hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 36px 0;
}
code,
pre,
kbd {
  font-family: var(--font-mono);
}
[hidden] {
  display: none !important;
}
.astra-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.astra-skip {
  position: fixed;
  top: -100px;
  left: 12px;
  padding: 12px;
  background: var(--paper);
  z-index: 100;
}
.astra-skip:focus {
  top: 12px;
}
.astra-icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}
/* Header: one copy of the real navigation, reflowed on phones. */
.editorial-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--canvas);
  border-bottom: 1px solid var(--border);
}
.editorial-header__inner {
  max-width: 1268px;
  margin: auto;
  min-height: 66px;
  padding: 8px 28px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.editorial-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  text-decoration: none;
  color: var(--ink);
  font-size: 19px;
}
.editorial-brand__mark {
  width: 27px;
  height: 27px;
  color: var(--accent);
}
.editorial-brand small {
  font-size: 10px;
  letter-spacing: 0.13em;
  color: var(--muted);
}
.editorial-navigation {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-left: auto;
}
.astra-nav__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.astra-nav--main .astra-nav__list {
  display: flex;
  gap: 20px;
}
.astra-nav__link {
  text-decoration: none;
  color: var(--secondary);
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13.5px;
  min-height: 44px;
}
.astra-nav__link:hover,
.astra-nav__link[aria-current] {
  color: var(--accent);
}
.astra-nav--main .astra-nav__icon,
.astra-nav__dot {
  display: none;
}
.astra-nav__icon {
  width: 18px;
  height: 18px;
  flex: none;
}
.editorial-topics {
  position: relative;
  font-size: 13.5px;
  color: var(--secondary);
}
.editorial-topics > summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 6px;
  list-style: none;
}
.editorial-topics > summary::after {
  content: "⌄";
}
.editorial-topics > summary::-webkit-details-marker {
  display: none;
}
.astra-nav--topics {
  position: absolute;
  right: 0;
  top: 100%;
  width: 280px;
  max-height: min(70vh, 600px);
  overflow: auto;
  padding: 16px 20px;
  background: var(--paper);
  border: 1px solid var(--strong-line);
  border-radius: 8px;
  box-shadow: var(--shadow);
}
.astra-nav__title {
  font-size: 13px;
  margin: 0;
  color: var(--muted);
}
.astra-nav__group-label {
  font-size: 13px;
  margin: 16px 0 4px;
  color: var(--ink);
}
.astra-nav--topics .astra-nav__link {
  font-size: 14px;
  white-space: normal;
}
.editorial-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}
.editorial-control {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 44px;
  padding: 8px 10px;
  font-size: 13px;
  white-space: nowrap;
}
.editorial-control svg,
.editorial-theme__choices svg {
  width: 18px;
  height: 18px;
}
.editorial-control kbd {
  font-size: 10px;
  border: 1px solid var(--strong-line);
  padding: 1px 4px;
  border-radius: 3px;
  color: var(--muted);
}
.editorial-menu {
  display: none;
}
.editorial-theme {
  position: relative;
}
.editorial-theme__choices {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  display: flex;
  gap: 4px;
  padding: 6px;
  background: var(--paper);
  border: 1px solid var(--strong-line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  animation: popover 140ms ease-out;
}
.editorial-theme__choices button {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-width: 62px;
  border-color: transparent;
  font-size: 12px;
}
.editorial-theme__choices button[aria-pressed="true"] {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--border);
}
[data-theme-icon] {
  display: none;
}
[data-theme-choice="system"] [data-theme-icon="system"],
[data-theme-choice="light"] [data-theme-icon="light"],
[data-theme-choice="dark"] [data-theme-icon="dark"] {
  display: block;
}
@keyframes popover {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Shared reading canvas and lists */
.editorial-print-media {
  display: none;
}
.astra-content .kg-bookmark-card a.kg-bookmark-container,
.astra-content .kg-bookmark-card a.kg-bookmark-container:hover {
  background: var(--paper);
  color: var(--body);
  border-color: var(--border);
}
.astra-content .kg-bookmark-description,
.astra-content .kg-bookmark-metadata > *:not(img) {
  opacity: 1;
}
.astra-content .kg-bookmark-content,
.astra-content .kg-audio-card,
.astra-content .kg-file-card a.kg-file-card-container {
  font-family: var(--font-ui);
}
.astra-content .kg-file-card a.kg-file-card-container {
  transition: border-color 140ms;
}
.astra-content .kg-file-card-caption,
.astra-content .kg-file-card-filesize {
  opacity: 1;
  color: var(--secondary);
}
.astra-content .editorial-video-fullscreen {
  color: #fff;
  flex: none;
  font-size: 22px;
  line-height: 1;
}
.astra-content .kg-video-container:fullscreen {
  height: 100dvh !important;
  padding-bottom: 0 !important;
  background: #000;
}
.astra-content .kg-video-container:fullscreen video {
  height: 100%;
  object-fit: contain;
}
.astra-content .kg-video-player-container:focus-within {
  opacity: 1 !important;
}
.astra-content .kg-video-time {
  color: #fff;
}
/* Native card controls retain their handlers and reflow within narrow columns. */
.astra-content .kg-audio-player-container {
  min-width: 0;
  flex: 1;
}
.astra-content .kg-audio-player {
  flex-wrap: wrap;
  row-gap: 4px;
}
.astra-content .kg-audio-title {
  overflow-wrap: anywhere;
  line-height: 1.5;
}
.astra-content .kg-audio-card .kg-audio-thumbnail {
  align-self: flex-start;
}
.astra-content .kg-audio-player input {
  min-width: 0;
}
.astra-content .kg-video-card {
  isolation: isolate;
}
.astra-content .kg-video-player {
  gap: 0;
  flex-wrap: wrap;
  padding: 6px 8px;
}
.astra-content .kg-video-seek-slider {
  min-width: 32px;
}
.astra-content .kg-video-card input:focus-visible,
.astra-content .kg-audio-card input:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
@media (max-width: 600px) {
  .astra-content .kg-audio-card {
    flex-direction: column;
  }
  .astra-content .kg-audio-card .kg-audio-thumbnail {
    display: none;
  }
  .astra-content .kg-audio-player-container {
    width: 100%;
  }
  .astra-content .kg-video-volume-slider {
    display: none;
  }
  .astra-content .kg-video-player-container {
    height: 70px;
  }
}
.astra-shell {
  width: 100%;
  min-width: 0;
}
.astra-main {
  width: calc(100% - 64px);
  max-width: 1051px;
  margin: 0 auto;
  min-height: 60vh;
}
.astra-main > * {
  min-width: 0;
}
.astra-intro,
.astra-page-header {
  padding: 64px 0 32px;
  border-bottom: 1px solid var(--strong-line);
  margin-bottom: 28px;
}
.astra-intro__title,
.astra-page-header__title {
  margin: 0 0 16px;
  font-size: 36px;
  font-weight: 720;
}
.astra-intro__sub,
.astra-page-header__description {
  max-width: 720px;
  color: var(--secondary);
  font-size: 17px;
  margin: 0;
}
.astra-page-header__meta {
  font-size: 13px;
  color: var(--muted);
  margin: 16px 0 0;
}
.astra-section {
  margin: 48px 0;
}
.astra-section__title {
  font-size: 16px;
  margin: 0 0 20px;
}
.astra-section__more {
  font-size: 14px;
  margin: 20px 0;
}
.astra-list {
  display: grid;
}
.astra-item,
.astra-featured__item {
  display: flex;
  gap: 24px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.astra-item__body,
.astra-featured__body {
  min-width: 0;
  flex: 1;
}
.astra-item__media {
  order: 2;
  flex: 0 0 120px;
}
.astra-item__thumb {
  display: block;
  width: 120px;
  height: 80px;
  object-fit: cover;
  border-radius: 6px;
}
.astra-item__title {
  font-size: 21px;
  margin: 0 0 10px;
}
.astra-item__link,
.astra-featured__link {
  color: var(--ink);
  text-decoration: none;
}
.astra-item__link:hover,
.astra-featured__link:hover {
  text-decoration: underline;
}
.astra-item__arrow {
  font-size: 16px;
  color: var(--muted);
  margin-left: 10px;
}
.astra-item__excerpt,
.astra-featured__excerpt {
  font-size: 15px;
  line-height: 1.7;
  color: var(--secondary);
  margin: 0 0 13px;
  overflow-wrap: anywhere;
}
.astra-item__meta,
.astra-featured__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}
.astra-item__meta a {
  text-decoration: none;
}
.astra-featured__title {
  font-size: 27px;
  margin: 10px 0 14px;
}
.astra-featured__media {
  width: 30%;
  flex: none;
}
.astra-featured__image {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  border-radius: 6px;
}
.astra-featured__kicker {
  font-size: 13px;
  margin: 0;
}
.astra-featured__kicker a {
  text-decoration: none;
}
.astra-browse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 40px;
}
.astra-browse__item {
  padding: 15px 0;
  border-bottom: 1px solid var(--border);
}
.astra-browse__link {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
}
.astra-browse__label {
  font-weight: 600;
}
.astra-browse__count {
  font-size: 13px;
  color: var(--muted);
}
.astra-empty {
  padding: 32px 0;
  color: var(--secondary);
}
.astra-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 36px 0;
  font-size: 14px;
}
.astra-pagination a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
.astra-pagination__status {
  color: var(--muted);
}
.astra-tagindex,
.astra-taglist,
.astra-years__list {
  list-style: none;
  padding: 0;
}
.astra-tagindex__row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.astra-tagindex__name {
  text-decoration: none;
}
.astra-tagindex__count {
  color: var(--muted);
  font-size: 14px;
}
.astra-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.astra-category {
  border-top: 1px solid var(--border);
  padding: 24px 0;
}
.astra-category__title {
  font-size: 21px;
}
.astra-category__description {
  font-size: 14px;
  color: var(--secondary);
}
.astra-category__list {
  list-style: none;
  padding: 0;
}
.astra-category__list li {
  margin: 10px 0;
}
.astra-category__list a {
  display: flex;
  justify-content: space-between;
  text-decoration: none;
}
.astra-years__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 32px;
}
.astra-years__item {
  display: flex;
  gap: 12px;
  text-decoration: none;
}
.astra-years__count {
  font-size: 13px;
  color: var(--muted);
}
.astra-archive__list {
  list-style: none;
  padding: 0;
}
.astra-archive__link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  text-decoration: none;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}
.astra-archive__title {
  color: var(--ink);
  flex: 1;
  min-width: 0;
}
.astra-archive__time,
.astra-archive__tag {
  font-size: 13px;
  color: var(--muted);
}
.astra-archive__year {
  margin: 40px 0 24px;
}
.astra-archive__year-count {
  font-size: 13px;
  color: var(--muted);
  margin-left: 16px;
  font-weight: 400;
}
.astra-archive__month {
  font-size: 16px;
}
.astra-archive.is-grouped .astra-archive__date-full,
.astra-archive:not(.is-grouped) .astra-archive__date-day {
  display: none;
}
/* Post header and right-hand TOC share the same grid */
.astra-post {
  display: grid;
  grid-template-columns: minmax(0, 776px) 205px;
  column-gap: 70px;
  padding-top: 64px;
}
.astra-post__header,
.astra-post__body,
.astra-post__footer,
.astra-post__toc-mobile {
  grid-column: 1;
  min-width: 0;
}
.astra-post__header {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--strong-line);
}
.astra-post__grid {
  display: contents;
}
.astra-post__aside {
  grid-column: 2;
  grid-row: 1 / span 4;
  position: relative;
  min-width: 0;
}
.astra-post__kicker {
  font-size: 13px;
  font-weight: 650;
  margin: 0 0 20px;
}
.astra-post__kicker a {
  text-decoration: none;
}
.astra-post__title {
  font-size: 38px;
  font-weight: 730;
  line-height: 1.32;
  margin: 0;
  letter-spacing: -0.04em;
  text-wrap: balance;
}
.astra-post__excerpt {
  font-size: 18px;
  color: var(--secondary);
  line-height: 1.75;
  margin: 22px 0;
}
.astra-post__meta {
  font-size: 13px;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  margin: 22px 0 0;
}
.astra-post__updated {
  display: inline-flex;
  gap: 10px;
}
.editorial-post-tools {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  margin-top: 20px;
}
.editorial-post-tools button {
  font-size: 12px;
  color: var(--secondary);
}
.astra-post__body {
  padding-top: 34px;
}
.astra-page {
  grid-template-columns: minmax(0, 776px);
  justify-content: center;
}
.astra-page__body {
  max-width: 776px;
  margin: auto;
}
.astra-toc {
  position: sticky;
  top: 102px;
  max-height: calc(100dvh - 135px);
  overflow: auto;
  scrollbar-width: thin;
}
.astra-toc__title {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 16px;
}
.astra-toc__list,
.astra-toc__sublist,
.astra-toc-mobile__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.astra-toc__list {
  border-left: 1px solid var(--strong-line);
}
.astra-toc__item a {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--secondary);
  text-decoration: none;
  padding: 8px 0 8px 13px;
  border-left: 2px solid transparent;
  margin-left: -1px;
  overflow-wrap: anywhere;
}
.astra-toc__item a.is-active {
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 650;
}
.astra-toc__item--h3 a {
  padding-left: 24px;
  font-size: 12px;
}
.astra-post__toc-mobile {
  display: none;
}
.astra-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 12px;
  margin-left: 4px;
  border: 0;
  vertical-align: middle;
  opacity: 0;
  color: var(--accent);
}
.astra-anchor svg {
  width: 16px;
  height: 16px;
}
.astra-content :is(h2, h3):hover .astra-anchor,
.astra-anchor:focus-visible {
  opacity: 1;
}
.astra-anchor-feedback {
  position: fixed;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 100;
  background: var(--ink);
  color: var(--canvas);
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
}
/* Content: keep the original Ghost HTML and native card runtime */
.astra-content {
  min-width: 0;
  overflow-wrap: break-word;
  color: var(--body);
}
.astra-content p {
  font-size: 17px;
  line-height: 1.8;
  word-break: keep-all;
  overflow-wrap: break-word;
  margin: 0 0 22px;
}
.astra-content h2 {
  font-size: 26px;
  margin: 60px 0 24px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: 6px;
}
.astra-content h3 {
  font-size: 21px;
  margin: 40px 0 18px;
  scroll-margin-top: 6px;
}
.astra-content h4 {
  font-size: 18px;
  margin: 30px 0 16px;
  scroll-margin-top: 6px;
}
.astra-content strong {
  font-weight: 650;
  color: var(--ink);
}
.astra-content :is(ul, ol) {
  margin: 20px 0 28px;
  padding-left: 25px;
}
.astra-content li {
  margin: 6px 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.astra-content blockquote {
  border-left: 3px solid var(--strong-line);
  padding: 8px 0 8px 20px;
  margin: 28px 0;
  color: var(--secondary);
}
.astra-content blockquote p {
  margin: 0;
}
.astra-content :not(pre) > code {
  background: var(--surface);
  color: var(--ink);
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 0.84em;
  overflow-wrap: anywhere;
}
.astra-content .kg-card,
.astra-content > pre,
.astra-content .astra-code-shell,
.astra-content .astra-table-wrap {
  margin: 30px 0;
  max-width: 100%;
  min-width: 0;
}
.astra-content figure figcaption {
  font-size: 13px;
  line-height: 1.65;
  color: var(--secondary);
  margin: 10px 0 0;
  text-align: center;
}
.astra-content .kg-image {
  width: auto;
  max-width: 100%;
  height: auto;
  display: block;
  margin: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.astra-content .kg-gallery-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.astra-content .kg-gallery-row {
  display: flex;
  align-items: start;
  gap: 12px;
}
.astra-content .kg-gallery-image {
  flex: 1;
  min-width: 0;
}
.astra-content .kg-gallery-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
}
.astra-zoomable {
  cursor: zoom-in;
}
.editorial-image-error,
.editorial-media-error {
  padding: 24px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 14px;
}
.editorial-media-error a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.astra-content .kg-width-wide,
.astra-content .kg-width-full {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}
/* Never assign a generic iframe aspect ratio. Provider wrappers alone own it. */
.astra-content .kg-embed-card {
  width: 100%;
}
.astra-content .kg-embed-card iframe {
  max-width: 100%;
}
.editorial-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: var(--video-ratio, 16 / 9);
  background: var(--code-bg);
  border-radius: 8px;
  overflow: hidden;
}
.astra-content .editorial-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  aspect-ratio: auto;
  border: 0;
}
.editorial-video-fallback {
  font-size: 13px;
  margin-top: 8px;
  display: block;
}
.astra-content .kg-video-card video {
  max-width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 7px;
}
.astra-content .kg-video-card {
  min-width: 0;
}
.astra-content .kg-video-player-container button {
  min-width: 44px;
  min-height: 44px;
  padding: 8px;
}
.astra-content .kg-video-card button:hover {
  background: transparent;
}
.astra-content .kg-audio-card {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--border);
  box-shadow: none;
  border-radius: 8px;
}
.astra-content .kg-audio-card button {
  min-height: 44px;
  min-width: 44px;
  border: 0;
  padding: 8px;
}
.astra-content
  .kg-audio-card
  :is(.kg-audio-title, .kg-audio-current-time, .kg-audio-duration) {
  color: var(--ink);
}
.astra-content .kg-audio-card svg {
  fill: currentColor;
}
.astra-content .kg-file-card a.kg-file-card-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--paper);
  color: var(--body);
  text-decoration: none;
}
.astra-content .kg-file-card-contents {
  min-width: 0;
}
.astra-content .kg-file-card-title {
  font-size: 15px;
  font-weight: 600;
}
.astra-content .kg-file-card-caption,
.astra-content .kg-file-card-metadata {
  font-size: 12px;
  color: var(--secondary);
}
.astra-content .kg-file-card-icon {
  display: none;
}
.editorial-file-cta {
  font-size: 13px;
  flex: none;
  color: var(--accent);
  min-height: 44px;
  display: flex;
  align-items: center;
}
.astra-content .kg-bookmark-container {
  display: flex;
  text-decoration: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--paper);
  color: var(--body);
  overflow: hidden;
  min-height: 130px;
}
.astra-content .kg-bookmark-content {
  flex: 1;
  min-width: 0;
  padding: 20px;
}
.astra-content .kg-bookmark-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
}
.astra-content .kg-bookmark-description {
  font-size: 13px;
  line-height: 1.65;
  color: var(--secondary);
  margin-top: 8px;
}
.astra-content .kg-bookmark-metadata {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
}
.astra-content .kg-bookmark-icon {
  width: 20px;
  height: 20px;
}
.astra-content .kg-bookmark-thumbnail {
  flex: 0 0 25%;
  position: relative;
}
.astra-content .kg-bookmark-thumbnail img {
  position: absolute;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.astra-content .kg-callout-card {
  display: flex;
  gap: 14px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 5px;
  background: var(--callout);
  padding: 17px 20px;
}
.astra-content .kg-callout-card-yellow,
.astra-content .kg-callout-card-orange {
  background: var(--warning);
}
.astra-content .kg-callout-card-red,
.astra-content .kg-callout-card-pink {
  background: var(--danger);
}
.astra-content .kg-callout-text {
  color: var(--body);
  font-size: 15px;
  min-width: 0;
}
.astra-callout__label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 6px;
}
.astra-content .kg-toggle-card {
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--paper);
  box-shadow: none;
  padding: 0;
}
.astra-content .kg-toggle-heading {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
}
.astra-content .kg-toggle-heading-text {
  font-size: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  flex: 1;
}
.astra-content .kg-toggle-card-icon {
  min-width: 44px;
  min-height: 44px;
  padding: 12px;
  border: 0;
}
.astra-content .kg-toggle-card-icon svg {
  width: 16px;
  height: 16px;
  stroke: var(--ink);
}
.astra-content .kg-toggle-content {
  padding: 16px;
  border-top: 1px solid var(--border);
}
.astra-content .kg-toggle-content p:last-child {
  margin-bottom: 0;
}
.astra-content .kg-button-card a.kg-btn {
  background: var(--accent);
  color: var(--canvas);
  min-height: 44px;
  border-radius: 6px;
  padding: 10px 20px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.kg-align-center {
  text-align: center;
}
.kg-align-right {
  text-align: right;
}
/* Code uses exactly one horizontal scroll region. */
.astra-content .kg-code-card {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-line);
  border-radius: 8px;
  overflow: hidden;
}
.astra-code__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 10px;
  background: var(--code-header);
  border-bottom: 1px solid var(--code-line);
  font-size: 12px;
  color: var(--code-muted);
}
.astra-code__actions {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.astra-code__button {
  border-color: var(--code-line);
  color: var(--code-muted);
  min-height: 44px;
  min-width: 44px;
  padding: 6px 9px;
  font-size: 12px;
}
.astra-code__button:hover {
  background: var(--code-bg);
  color: var(--code-text);
}
.astra-content pre {
  font: 400 13.5px/1.75 var(--font-mono);
  white-space: pre;
  overflow-x: auto;
  max-width: 100%;
  margin: 0;
  padding: 18px;
  tab-size: 2;
  scrollbar-width: thin;
}
.astra-content pre code {
  display: block;
  min-width: max-content;
  font: inherit;
  color: inherit;
  white-space: inherit;
}
.astra-content .is-wrapped pre,
.astra-content .is-wrapped pre code {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  min-width: 0;
}
.astra-code__line {
  display: block;
  min-height: 1.75em;
}
.is-numbered .astra-code__line::before {
  content: attr(data-line);
  display: inline-block;
  width: 3em;
  color: var(--code-muted);
}
.token.comment,
.token.prolog,
.token.doctype {
  color: #b5c1be;
}
.token.keyword,
.token.tag,
.token.boolean,
.token.operator {
  color: #a8cae9;
}
.token.string,
.token.attr-value,
.token.inserted {
  color: #a5d2ae;
}
.token.number,
.token.constant {
  color: #f0c292;
}
.token.function,
.token.class-name {
  color: #b7d7e6;
}
.token.deleted {
  color: #e3a6a4;
}
.token.punctuation {
  color: var(--code-text);
}
.astra-tabs {
  margin: 28px 0;
  min-width: 0;
}
.astra-tabs__list {
  display: flex;
  gap: 18px;
  overflow: auto;
  border-bottom: 1px solid var(--border);
}
.astra-tabs__tab {
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  white-space: nowrap;
  font-size: 13px;
  color: var(--muted);
  padding: 9px 4px;
  min-height: 44px;
}
.astra-tabs__tab[aria-selected="true"] {
  color: var(--ink);
  border-color: var(--accent);
  font-weight: 650;
}
.astra-tabs__panel {
  min-width: 0;
}
.astra-tabs__body {
  min-width: 0;
}
.astra-table-scroll {
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: var(--paper);
  max-width: 100%;
}
.astra-content table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 14px;
  line-height: 1.65;
}
.astra-content th,
.astra-content td {
  padding: 13px 15px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border);
  word-break: keep-all;
  min-width: 120px;
}
.astra-content thead th {
  background: var(--surface);
  font-weight: 650;
  color: var(--ink);
}
.astra-content tbody th {
  position: sticky;
  left: 0;
  background: var(--paper);
  box-shadow: 1px 0 var(--border);
  color: var(--ink);
  min-width: 140px;
}
.astra-content tbody tr:nth-child(even) {
  background: var(--surface);
}
.astra-content tbody tr:nth-child(even) th {
  background: var(--surface);
}
.astra-content tr:last-child > * {
  border-bottom: 0;
}
.astra-diagram {
  overflow: auto;
  padding: 18px;
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 28px 0;
}
.astra-diagram svg {
  display: block;
  max-width: none;
  min-width: 450px;
  margin: auto;
  height: auto;
}
.editorial-render-error {
  font-size: 13px;
  color: var(--secondary);
}
.katex-display {
  max-width: 100%;
  overflow: auto;
  padding: 8px 0;
}
/* Post footer and comment exterior */
.astra-post__footer {
  border-top: 1px solid var(--strong-line);
  margin-top: 64px;
  padding-top: 26px;
}
.astra-post__section-title {
  font-size: 14px;
  margin: 0 0 14px;
  color: var(--secondary);
}
.astra-taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  font-size: 14px;
}
.astra-taglist a {
  text-decoration: none;
}
.astra-author {
  margin-top: 28px;
  padding: 24px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.astra-author__row {
  display: flex;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.astra-author__image {
  width: 49px;
  height: 49px;
  border-radius: 10px;
  object-fit: cover;
}
.astra-author__name {
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  margin: 0 0 4px;
}
.astra-author__links {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
}
.astra-author__link {
  text-decoration: none;
}
.astra-author__icon {
  display: none;
}
.astra-postnav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 28px 0;
}
.astra-postnav__link {
  text-decoration: none;
}
.astra-postnav__label {
  font-size: 12px;
  color: var(--muted);
  display: block;
  margin-bottom: 6px;
}
.astra-postnav__title {
  font-size: 15px;
  line-height: 1.6;
  color: var(--secondary);
}
.astra-postnav__link--next {
  text-align: right;
}
.astra-share {
  display: flex;
  gap: 8px;
}
.astra-share__button {
  font-size: 13px;
}
.astra-comments {
  margin-top: 38px;
  border-top: 1px solid var(--border);
  padding-top: 24px;
}
.astra-comments .astra-post__section-title {
  font-size: 20px;
  color: var(--ink);
}
.astra-footer {
  max-width: 1051px;
  width: calc(100% - 64px);
  margin: 70px auto 0;
  border-top: 1px solid var(--border);
  padding: 24px 0 32px;
  font-size: 12px;
  color: var(--muted);
}
.astra-footer__inner,
.astra-footer__brand,
.astra-footer__links {
  display: flex;
  align-items: center;
  gap: 18px;
}
.astra-footer__symbol {
  width: 24px;
  height: 24px;
}
.astra-footer__brand {
  gap: 8px;
  color: var(--ink);
  font-weight: 650;
}
.astra-footer__links a {
  text-decoration: none;
  color: var(--secondary);
}
.astra-footer__copy {
  margin: 0 0 0 auto;
}
.astra-404 {
  padding: 80px 0;
}
.astra-404__symbol {
  width: 34px;
  height: 34px;
  color: var(--accent);
}
.astra-404__code {
  color: var(--muted);
  margin: 20px 0 10px;
}
.astra-404__title {
  font-size: 34px;
}
.astra-hand {
  font-family: var(--font-ui);
  color: var(--muted);
  font-size: 14px;
}
.astra-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 60;
  pointer-events: none;
}
.astra-progress__bar {
  display: block;
  height: 100%;
  background: var(--accent);
  width: 0;
}
/* Search and media dialogs */
.astra-search {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 10vh 16px;
}
.astra-search__backdrop {
  position: absolute;
  inset: 0;
  background: rgb(16 24 20 / 0.55);
}
.astra-search__panel {
  position: relative;
  width: min(600px, 100%);
  max-height: 80dvh;
  overflow: auto;
  background: var(--paper);
  border: 1px solid var(--strong-line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}
.astra-search__field {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid var(--border);
}
.astra-search__field-icon {
  flex: none;
  width: 20px;
}
.astra-search__field-icon svg {
  width: 20px;
}
.astra-search__input {
  border: 0;
  min-width: 0;
  flex: 1;
  min-height: 44px;
  font-size: 16px;
}
.astra-search__close {
  font-size: 12px;
  min-width: 44px;
}
.astra-search__results {
  list-style: none;
  padding: 8px;
  margin: 0;
}
.astra-search__result a {
  display: block;
  padding: 12px;
  text-decoration: none;
  border-radius: 6px;
}
.astra-search__result a:hover,
.astra-search__result a:focus-visible {
  background: var(--surface);
}
.astra-search__result-title {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
.astra-search__result-meta {
  display: flex;
  gap: 8px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}
.astra-search mark {
  color: var(--accent);
  background: var(--accent-bg);
}
.astra-search__hint {
  font-size: 12px;
  color: var(--muted);
  padding: 12px 16px;
  margin: 0;
  border-top: 1px solid var(--border);
}
.astra-search__empty {
  padding: 24px;
  text-align: center;
  font-size: 14px;
  color: var(--secondary);
}
.astra-search__empty-note {
  display: none;
}
.astra-lightbox {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: var(--overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 70px 60px 40px;
  overflow: auto;
  color: #edf0eb;
  touch-action: pan-x pan-y pinch-zoom;
}
.astra-lightbox__controls {
  position: fixed;
  right: 16px;
  top: 14px;
  display: flex;
  gap: 8px;
  z-index: 2;
}
.astra-lightbox__button {
  border: 1px solid #63726b;
  background: #222b28;
  color: #fff;
  min-width: 44px;
  min-height: 44px;
  padding: 10px;
}
.astra-lightbox__button:hover {
  background: #333b36;
}
.astra-lightbox__button svg {
  width: 20px;
  height: 20px;
}
.astra-lightbox__button:disabled {
  opacity: 0.5;
}
.astra-lightbox__nav {
  position: fixed;
  top: 50%;
}
.astra-lightbox__nav--prev {
  left: 10px;
}
.astra-lightbox__nav--next {
  right: 10px;
}
.astra-lightbox__figure {
  margin: auto;
  max-width: 100%;
  text-align: center;
}
.astra-lightbox__image {
  max-width: 100%;
  max-height: 78dvh;
  object-fit: contain;
  display: block;
  margin: auto;
}
.astra-lightbox__caption {
  font-size: 13px;
  margin-top: 12px;
  color: #edf0eb;
}
.astra-lightbox[data-zoomed="true"] {
  align-items: flex-start;
  justify-content: flex-start;
}
.astra-lightbox[data-zoomed="true"] .astra-lightbox__image {
  max-width: none;
  max-height: none;
}
.astra-lightbox__image--diagram {
  background: var(--paper);
  padding: 24px;
  border-radius: 8px;
}
.astra-lightbox__image--diagram svg {
  min-width: 700px;
  max-width: none;
}
@media (max-width: 1100px) {
  .editorial-header__inner {
    gap: 16px;
    padding-inline: 20px;
  }
  .astra-nav--main .astra-nav__list {
    gap: 12px;
  }
  .editorial-control kbd {
    display: none;
  }
  .astra-post {
    column-gap: 40px;
    grid-template-columns: minmax(0, 776px) 190px;
  }
}
@media (max-width: 980px) {
  .astra-main {
    max-width: 776px;
    width: calc(100% - 48px);
  }
  .astra-post {
    display: block;
    padding-top: 46px;
  }
  .astra-post__aside {
    display: none;
  }
  .astra-post__toc-mobile:not([hidden]) {
    display: block;
    margin: 24px 0 0;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--paper);
  }
  .astra-toc-mobile__toggle {
    width: 100%;
    border: 0;
    display: flex;
    justify-content: space-between;
    padding: 14px 16px;
    text-align: left;
    font-size: 14px;
  }
  .astra-toc-mobile__body {
    padding: 0 14px 14px;
  }
  .astra-post__toc-mobile[data-open="false"] .astra-toc-mobile__body {
    display: none;
  }
  .astra-toc-mobile__list a {
    font-size: 14px;
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .astra-post__toc-mobile[data-open="true"] .astra-toc-mobile__chevron {
    transform: rotate(180deg);
  }
  .astra-post__title {
    font-size: 36px;
  }
  .astra-post__grid {
    display: block;
  }
  .astra-page .astra-post__aside {
    display: none;
  }
}
@media (max-width: 800px) {
  .editorial-header__inner {
    min-height: 60px;
    gap: 12px;
    padding: 6px 18px;
  }
  .editorial-actions {
    margin-left: auto;
  }
  .editorial-menu {
    display: flex;
  }
  .editorial-search-label,
  .editorial-control kbd {
    display: none;
  }
  .editorial-navigation {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    max-height: calc(100dvh - 60px);
    overflow: auto;
    padding: 12px 20px 20px;
    background: var(--canvas);
    border-bottom: 1px solid var(--strong-line);
    box-shadow: var(--shadow);
  }
  .editorial-navigation[data-open="true"] {
    display: block;
  }
  .astra-nav--main .astra-nav__list {
    display: block;
  }
  .astra-nav__link {
    font-size: 15px;
    min-height: 44px;
    border-bottom: 1px solid var(--border);
  }
  .editorial-topics > summary {
    font-size: 15px;
  }
  .astra-nav--topics {
    position: static;
    width: 100%;
    max-height: none;
    border: 0;
    box-shadow: none;
    padding: 8px 0;
    background: transparent;
  }
  .astra-categories {
    grid-template-columns: 1fr;
  }
  .astra-archive__tag {
    display: none;
  }
}
@media (max-width: 700px) {
  body {
    font-size: 16px;
  }
  .astra-main,
  .astra-footer {
    width: calc(100% - 36px);
  }
  .astra-post {
    padding-top: 36px;
  }
  .astra-post__title {
    font-size: 30px;
    line-height: 1.35;
  }
  .astra-post__excerpt {
    font-size: 16.5px;
    margin: 18px 0;
  }
  .astra-post__meta {
    font-size: 12px;
  }
  .astra-content p {
    font-size: 16px;
    line-height: 1.8;
  }
  .astra-content h2 {
    font-size: 24px;
    margin-top: 52px;
  }
  .astra-content h3 {
    font-size: 20px;
  }
  .astra-anchor {
    opacity: 1;
  }
  .astra-post__body {
    padding-top: 30px;
  }
  .astra-intro,
  .astra-page-header {
    padding-top: 36px;
  }
  .astra-intro__title,
  .astra-page-header__title {
    font-size: 30px;
  }
  .astra-item {
    gap: 16px;
    padding: 24px 0;
  }
  .astra-item__title {
    font-size: 19px;
  }
  .astra-item__media {
    flex-basis: 84px;
  }
  .astra-item__thumb {
    width: 84px;
    height: 56px;
  }
  .astra-item__excerpt {
    font-size: 14px;
  }
  .astra-item__arrow {
    display: none;
  }
  .astra-featured__title {
    font-size: 23px;
  }
  .astra-featured__item {
    gap: 18px;
  }
  .astra-featured__media {
    width: 27%;
  }
  .astra-browse {
    grid-template-columns: 1fr;
  }
  .astra-postnav {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .astra-postnav__link--next {
    text-align: left;
  }
  .astra-content pre {
    font-size: 12.5px;
    padding: 16px;
  }
  .astra-content .kg-bookmark-thumbnail {
    display: none;
  }
  .astra-content .kg-callout-card {
    padding: 16px;
  }
  .astra-content .kg-file-card a.kg-file-card-container {
    flex-wrap: wrap;
  }
  .astra-footer__inner {
    flex-wrap: wrap;
  }
  .astra-lightbox {
    padding: 74px 12px 70px;
  }
  .astra-lightbox__nav {
    top: auto;
    bottom: 12px;
  }
  .astra-lightbox__controls {
    right: 12px;
  }
  .astra-lightbox__image {
    max-height: 72dvh;
  }
  .astra-archive__link {
    gap: 12px;
  }
  .astra-archive__title {
    font-size: 15px;
  }
}
@media (max-width: 390px) {
  .astra-main,
  .astra-footer {
    width: calc(100% - 32px);
  }
  .editorial-header__inner {
    padding-inline: 12px;
    gap: 8px;
  }
  .editorial-brand {
    gap: 7px;
    font-size: 17px;
  }
  .editorial-brand small {
    font-size: 9px;
  }
  .editorial-brand__mark {
    width: 24px;
    height: 24px;
  }
  .editorial-actions {
    gap: 4px;
  }
  .editorial-control {
    padding: 8px;
    min-width: 44px;
  }
  .astra-post__title {
    font-size: 28px;
  }
  .astra-item__media {
    flex-basis: 64px;
  }
  .astra-item__thumb {
    width: 64px;
    height: 48px;
  }
  .astra-code__header {
    flex-wrap: wrap;
    gap: 4px;
  }
  .astra-code__label {
    overflow-wrap: anywhere;
  }
  .astra-search {
    padding: 16px 10px;
  }
  .astra-search__panel {
    max-height: calc(100dvh - 32px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

.astra-lightbox:not([open]) {
  display: none;
}
.astra-lightbox[open] {
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  border: 0;
}
.astra-lightbox::backdrop {
  background: var(--overlay);
}
.editorial-diagram-source {
  font-size: 13px;
  margin: 12px 0 28px;
}
.editorial-diagram-source summary {
  cursor: pointer;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.editorial-diagram-source pre {
  background: var(--surface);
  color: var(--body);
}
.astra-browse {
  list-style: none;
  padding: 0;
}
.astra-browse__link {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
}
.astra-browse__name {
  font-weight: 650;
  color: var(--ink);
}
.astra-browse__description {
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  color: var(--secondary);
}
.astra-browse__count {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
}
.astra-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 40px;
}
.astra-group {
  border-bottom: 1px solid var(--border);
  padding: 20px 0;
}
.astra-group__title {
  font-size: 22px;
  margin: 0 0 12px;
}
.astra-group__description {
  font-size: 14px;
  color: var(--secondary);
}
.astra-group__tags {
  list-style: none;
  padding: 0;
}
.astra-group__tag {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  gap: 16px;
}
.astra-group__tag-link {
  text-decoration: none;
}
.astra-group__tag-count {
  font-size: 13px;
  color: var(--muted);
}
.astra-group__total {
  font-size: 13px;
  margin: 18px 0 0;
}
.astra-group__total a {
  color: var(--secondary);
}
@media (max-width: 700px) {
  .astra-groups {
    grid-template-columns: 1fr;
  }
}