html {
  scrollbar-gutter: stable;
}

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

code,
kbd,
pre {
  font-family: "Roboto Mono", SFMono-Regular, Consolas, "Courier New", monospace;
}

/*
.md-typeset .admonition,
.md-typeset details {
  border-width: 0;
  border-left-width: 4px;
}

.md-typeset .admonition-title {
  background-color: #14151a;
}

.md-typeset .admonition {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

.failure {
  background-color: #ff52521a;
}
*/

/*
.md-typeset .warning>.admonition-title {
  background-color: transparent;
  color: #ff9100;
}

.md-typeset .tip>.admonition-title {
  background-color: transparent;
  color: #00bfa5;
}
*/

.md-typeset thead {
  background-color: #14151a;
  border-bottom-width: 2px;
  border-color: white;
  color: #dadad5;
}

.ui-image {
  zoom:50%;
}

.screenshot {
  zoom:50%;
  border-radius: 32px;
}

.card-image {
  margin-top: -.8rem;
  margin-left: -.8rem; /* Counteract parent's padding-left */
  margin-right: -.8rem; /* Counteract parent's padding-right */
  margin-bottom: -1rem;
  /*width: calc(100% + 1.6rem); */
  min-width: 111%;
  display: block;
  max-height: 100px;
  object-fit: cover;
  /*filter: grayscale(50%);*/
}

/*
.card-image:hover {
  filter: grayscale(0%);
}*/

.md-typeset .grid.cards>ol>li, .md-typeset .grid.cards>ul>li, .md-typeset .grid>.card{
    border-radius: 16px;
    overflow: hidden;
    background-color: color-mix(in oklab, var(--md-default-bg-color), white 1%);
    padding-bottom: 1rem;
    filter: brightness(115%);
}

.md-typeset .grid.cards>ol>li, .md-typeset .grid.cards>ul>li,.md-typeset .grid>.card > h3{
  margin-top: 0;
}

.md-typeset .grid.cards.showcase-cards > ul > li {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 1.15rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
    rgba(16, 18, 24, 0.88);
  box-shadow:
    0 1.25rem 3rem rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.md-typeset .grid.cards.showcase-cards > ul > li .card-image {
  margin: 0 0 0.75rem;
  min-width: 100%;
  width: 100%;
  max-height: none;
  aspect-ratio: 2 / 1;
  border-radius: 18px;
  object-fit: cover;
}

.md-typeset .grid.cards.showcase-cards > ul > li > :first-child:not(img) {
  margin-top: 0;
}

.md-typeset .md-button.pm-buy-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.85rem 1.5rem;
  border: 2px solid #1976d2 !important;
  border-radius: 999px !important;
  color: #fff !important;
  /*background: #1976d2 !important;
  background-color: #1976d2 !important;*/
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none !important;
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    color 0.18s ease,
    background-color 0.18s ease,
    border-color 0.18s ease;
}

.md-typeset .md-button.pm-buy-button:hover,
.md-typeset .md-button.pm-buy-button:focus-visible {
  color: #fff !important;
  background: #1565c0 !important;
  background-color: #1565c0 !important;
  border-color: #1565c0 !important;
  text-decoration: none !important;
  box-shadow: 0 0.6rem 1.4rem rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.md-typeset .grid.cards.showcase-cards > ul > li > h3 {
  margin-bottom: 0.5rem;
}

.md-typeset .grid.cards.showcase-cards > ul > li > h3 > a {
  color: inherit;
  text-decoration: none;
}

.md-typeset .grid.cards.showcase-cards > ul > li > h3 > a:hover,
.md-typeset .grid.cards.showcase-cards > ul > li > h3 > a:focus-visible {
  color: var(--md-typeset-a-color);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.md-typeset .grid.cards.showcase-cards > ul > li p strong {
  display: inline-block;
  margin-bottom: 0.55rem;
  font-size: 1rem;
}

.md-typeset .grid.cards.showcase-cards > ul > li .showcase-card__quote {
  font-size: 0.98rem;
  font-style: italic;
  line-height: 1.62;
  margin-bottom: 0.7rem;
  opacity: 0.8;
}

.md-typeset .grid.cards.showcase-cards > ul > li .showcase-card__attribution {
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.72;
  margin-top: 0;
  margin-bottom: 0;
}

.md-typeset .grid.cards.showcase-cards > ul > li .showcase-card__source {
  font-size: 0.87rem;
  line-height: 1.5;
  opacity: 0.58;
  margin-top: 0.5rem;
}

.md-typeset .grid.cards.showcase-cards.showcase-cards--sourced > ul > li {
  padding-top: 1.2rem;
}

.md-typeset .showcase-playlist {
  margin: 1.25rem 0 2rem;
  text-align: left;
}

.md-typeset .showcase-playlist__frame {
  position: relative;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, 0.08), transparent 35%),
    rgba(14, 16, 22, 0.92);
  box-shadow:
    0 1.5rem 3rem rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.md-typeset .showcase-playlist__frame::before {
  content: "";
  display: block;
  padding-top: 56.25%;
}

.md-typeset .showcase-playlist__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.md-typeset .showcase-playlist__footer {
  margin: 0.85rem 0 0;
}

.md-typeset .showcase-playlist__link {
  font-weight: 600;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

@media screen and (max-width: 76.2344em) {
  .md-typeset .showcase-playlist__frame {
    max-width: none;
  }
}

/*
.grid.cards>ul>li:hover .card-image {
  filter: grayscale(0%);
}*/


.md-typeset table:not([class]) {
  border: 0;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 10px, rgba(0, 0, 0, 0.5) 0px 0px 2px;
}

.md-typeset table:not([class]) th {
  min-width: 0;
}

.md-typeset table:not([class]) th:empty {
  min-width: 0;
  padding-bottom: 0;
  padding-top: 1px;
}

.md-typeset table tr:first-child td {
  border-top-color: #14151a;
}

.md-typeset table:not([class]) td:empty {
  line-height: 0.5;
  font-size: 0.5em;
  height: 0.5em;
}

.update-icon {
  width: 32px;
  background-color: #222;
  border-radius: 4px;
  padding: 4px;
}

.number {
  font-size: 1.2em;
  min-width: 1em;
}

td {
  align-content: center;
}

.columns {
  display: grid; 
  grid-template-columns: 1fr 1fr;
  column-gap: 1em;
}

/* Container for the showcase grid */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: 1rem 0;
}

/* Card style */
.showcase-card {
  background: var(--md-default-bg-color);
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.showcase-card:hover {
  transform: translateY(-4px);
}

/* Thumbnail image */
.showcase-card img {
  width: 100%;
  height: 140px;
  object-fit: cover;
  display: block;
}

/* Card content */
.showcase-card .showcase-content {
  padding: 0.75rem 1rem;
}

.showcase-card .showcase-title {
  font-weight: bold;
  margin: 0.5rem 0 0.25rem;
  font-size: 1rem;
}

.showcase-card .showcase-link {
  font-size: 0.9rem;
  color: var(--md-typeset-a-color);
  text-decoration: none;
}

.showcase-card .showcase-link:hover {
  text-decoration: underline;
}

.video-auto {
  position: relative;
  display: inline-block;
}

/* Hide the mouse cursor when controls are hidden for a cleaner look */
.video-auto.controls-hidden {
  cursor: none;
}

/* Card grid rollover effect styles */

/* Default / light scheme */
:root {
  --pm2-row-hover-bg: rgba(0, 0, 0, 0.04);
}

/* Dark scheme override – matches any element with the attribute */
[data-md-color-scheme="slate"] {
  --pm2-row-hover-bg: rgba(255, 255, 255, 0.06);
}

/* Row-style behavior is default; skip grids marked .no-row */

/* 2-column term/definition layout */
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) {
  grid-template-columns: 30% 70%;
  column-gap: 0;
  row-gap: 0.25rem;
}

@media screen and (max-width: 76.2344em) {
  .md-typeset .grid.cards:not(.no-row):not(.regular-grid) {
    grid-template-columns: 1fr;
  }
}

.md-typeset .grid.cards.regular-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

/* Term + definition “cells” */
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) > * {
  margin: 0;
  padding: 0.5rem 0.75rem;
  border-radius: 0;
  transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

/* Keep link/title column aligned with section headings */
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) > :nth-child(odd) {
  padding-left: 0.35rem;
}

/* Hovering the heading: highlight the whole row (h3 + its p) */
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) > :nth-child(odd):hover,
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) > :nth-child(odd):hover + :nth-child(even) {
  background-color: var(--pm2-row-hover-bg);
}

/* Hovering the definition: also highlight heading + definition */
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) > :nth-child(odd):has(+ :nth-child(even):hover),
.md-typeset .grid.cards:not(.no-row):not(.regular-grid) > :nth-child(even):hover {
  background-color: var(--pm2-row-hover-bg);
}