:root {
  --md-primary-fg-color: #24343c;
  --md-primary-bg-color: #fff;
  --md-accent-fg-color: #b32366;
  --md-default-fg-color: #24343c;
  --md-typeset-a-color: #9e235c;
  --mame-muted: #5b6771;
  --mame-border: #e3e7eb;
}
.md-header { border-top: 3px solid #ee7b59; box-shadow: 0 2px 10px #13252f1a; }
.md-header__inner { min-height: 3.5rem; }
.md-header__button.md-logo img { height: 1.8rem; width: 1.8rem; }
.md-header__title { font-size: .85rem; }
.md-search__form { border-radius: .4rem; }
.md-grid { max-width: 72rem; }
.md-main__inner { margin-top: 1.6rem; }
.md-typeset { font-size: .8rem; line-height: 1.65; }
.md-typeset h1 { color: #24343c; font-size: 1.9rem; font-weight: 700; letter-spacing: -.035em; margin-bottom: .65em; }
.md-typeset h2 { font-weight: 650; letter-spacing: -.02em; }
.md-typeset img { max-width: 100%; height: auto; }
.md-typeset video { max-width: 100%; }
.md-typeset pre { overflow-x: auto; }
.md-nav__link { line-height: 1.45; }
.md-nav--primary > .md-nav__list > .md-nav__item { margin-bottom: .3rem; }
.md-nav--primary > .md-nav__list > .md-nav__item--nested > label { font-weight: 600; }
.md-nav__link--active { font-weight: 650; }
.md-footer { background: #24343c; }
.mame-language { position: relative; flex-shrink: 0; margin: 0 .5rem; font-size: .7rem; }
.mame-language summary { display: flex; align-items: center; gap: .4rem; cursor: pointer; padding: .5rem .65rem; border: 1px solid #ffffff45; border-radius: .4rem; list-style: none; font-weight: 650; }
.mame-language summary::-webkit-details-marker { display: none; }
.mame-language summary:hover, .mame-language[open] summary { background: #ffffff15; }
.mame-language ul { position: absolute; right: 0; top: calc(100% + .4rem); min-width: 8rem; margin: 0; padding: .35rem; list-style: none; border-radius: .5rem; border: 1px solid var(--mame-border); background: white; color: #24343c; box-shadow: 0 8px 30px #13252f24; }
.mame-language li { margin: 0; }
.mame-language a { display: flex; justify-content: space-between; padding: .55rem .65rem; border-radius: .25rem; }
.mame-language a:hover, .mame-language a[aria-current] { background: #f8edf2; color: #9e235c; }
.mame-language :focus-visible, .mame-filters :focus-visible, .mame-product a:focus-visible { outline: 3px solid #ee7b59; outline-offset: 3px; }
.md-typeset .mame-intro { max-width: 38rem; color: var(--mame-muted); font-size: .95rem; margin-bottom: 1.5rem; }
.mame-filters { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; padding: 1rem; background: #f5f7f8; border: 1px solid var(--mame-border); border-radius: .6rem; margin: 1rem 0; }
.mame-filters[hidden], .mame-product[hidden], .mame-empty[hidden] { display: none !important; }
.mame-filter { display: flex; flex-direction: column; gap: .3rem; flex: 1 1 8rem; font-weight: 600; font-size: .7rem; }
.mame-filter--query { flex-grow: 1.5; }
.mame-filter select, .mame-filter input { width: 100%; min-height: 2.2rem; padding: .45rem .6rem; border: 1px solid #c6cfd5; border-radius: .3rem; background: white; color: #24343c; font: inherit; font-weight: 400; }
.mame-filters button { min-height: 2.2rem; padding: .45rem .65rem; color: #9e235c; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: .15em; }
.md-typeset .mame-count { font-size: .7rem; color: var(--mame-muted); margin: .6rem 0 1rem; }
.mame-catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.md-typeset .mame-product { padding: 1.2rem; border: 1px solid var(--mame-border); border-radius: .65rem; background: #fff; box-shadow: 0 2px 4px #13252f04; display: flex; flex-direction: column; min-width: 0; transition: border-color .15s, box-shadow .15s; }
.mame-product:hover, .mame-product:focus-within { border-color: #c8a3b3; box-shadow: 0 5px 18px #24343c0c; }
.md-typeset .mame-product > p { margin: .45rem 0; }
.md-typeset .mame-product h3 { font-size: 1.1rem; line-height: 1.25; letter-spacing: -.015em; margin: .65rem 0 .3rem; }
.md-typeset .mame-product h3 a { color: #24343c; }
.md-typeset .mame-product h3 a:hover { color: #9e235c; }
.md-typeset .mame-product .mame-product-icon { width: 3rem; height: 2.6rem; object-fit: contain; object-position: left center; vertical-align: middle; }
.md-typeset .mame-product .mame-product-icon--wide { width: 6.5rem; }
.mame-platform { display: inline-block; font-size: .62rem; font-weight: 600; color: #56616d; padding: .12rem .45rem; background: #f0f3f5; border-radius: .25rem; }
.mame-product-description { color: var(--mame-muted); font-size: .75rem; }
.md-typeset .mame-product ul { margin: .55rem 0 1rem; padding-left: .9rem; font-size: .72rem; }
.md-typeset .mame-product li { margin-left: 0; margin-bottom: .3rem; }
.md-typeset .mame-product > p:last-child { margin-top: auto; padding-top: .7rem; border-top: 1px solid #edf0f2; font-size: .7rem; font-weight: 600; }
.mame-empty { padding: 1rem; border: 1px dashed #c6cfd5; border-radius: .5rem; }
@media (min-width: 80rem) { .mame-catalog { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .mame-catalog { grid-template-columns: 1fr; } .md-typeset h1 { font-size: 1.6rem; } .mame-filters { padding: .75rem; } }
@media (max-width: 30rem) { .md-header__title { margin-left: .25rem; font-size: .68rem; } .mame-language { margin: 0 .1rem; } .mame-language summary { padding: .5rem .4rem; gap: .2rem; } }
@media (prefers-reduced-motion: reduce) { .mame-product { transition: none; } }

.mame-header-short { display: none; }
@media (max-width: 44rem) { .md-header__button.md-logo { display: block; margin-right: 0; padding-right: 0; } .md-header__button.md-logo img { height: 1.5rem; width: 1.5rem; } .mame-header-title { display: none; } .mame-header-short { display: inline; } }

/* Reading layout: keep catalogue space and give guides a comfortable measure. */
.mame-document { max-width: 44rem; margin: .35rem auto 3rem; }
.md-typeset .mame-breadcrumb { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; margin: 0 0 1.3rem; color: var(--mame-muted); font-size: .67rem; line-height: 1.5; }
.mame-breadcrumb a { color: var(--mame-muted); }
.mame-breadcrumb a:hover { color: var(--md-typeset-a-color); }
.md-typeset .mame-document h1 { font-size: clamp(1.6rem, 3.2vw, 2rem); line-height: 1.2; margin: 0 0 1.1rem; text-wrap: balance; }
.md-typeset .mame-document--article { font-size: .84rem; line-height: 1.8; }
.md-typeset .mame-document--article > p { max-width: 78ch; margin: 1rem 0; }
.md-typeset .mame-document--article > h1 + p { color: #53636c; font-size: .93rem; line-height: 1.75; margin-bottom: 1.5rem; }
.md-typeset .mame-document--article h2 { font-size: 1.25rem; line-height: 1.35; margin: 2.6rem 0 1rem; padding-top: 1.25rem; border-top: 1px solid var(--mame-border); }
.md-typeset .mame-document--article h3 { font-size: 1.02rem; line-height: 1.4; font-weight: 650; margin: 1.8rem 0 .7rem; }
.md-typeset .mame-document--article h4 { font-size: .9rem; margin: 1.4rem 0 .6rem; }
.md-typeset .mame-document--article :is(h2,h3,h4) { scroll-margin-top: 5.5rem; }
.md-typeset .mame-document--article :is(ul,ol) { max-width: 76ch; margin: 1rem 0 1.3rem; padding-left: 1.3rem; }
.md-typeset .mame-document--article li { margin-left: 0; margin-bottom: .5rem; padding-left: .2rem; }
.md-typeset .mame-document--article li::marker { color: #71838c; font-weight: 650; }
.md-typeset .mame-document--article li > p { margin: .5rem 0; }
.md-typeset .mame-document--article strong { font-weight: 650; }
.md-typeset .mame-document--article :is(p,li) > a:not(.headerlink) { text-decoration: underline; text-decoration-color: #9e235c50; text-underline-offset: .18em; }
.md-typeset .mame-document--article :is(p,li) > a:hover { text-decoration-color: currentColor; }
.md-typeset .mame-document pre { border: 1px solid var(--mame-border); border-radius: .5rem; margin: 1.25rem 0; }
.md-typeset .mame-document pre > code { padding: 1rem 1.15rem; font-size: .73rem; line-height: 1.7; }
.md-typeset .mame-document :not(pre) > code { padding: .15em .35em; border-radius: .2rem; overflow-wrap: anywhere; }
.md-typeset .mame-document table:not([class]) { border-color: var(--mame-border); border-radius: .4rem; font-size: .74rem; line-height: 1.65; }
.md-typeset .mame-document table:not([class]) th { background: #f2f5f6; color: #33464f; }
.md-typeset .mame-document table:not([class]) :is(th,td) { padding: .7rem .85rem; }
.md-typeset .mame-note { border: 1px solid #dae4e8; border-left: 3px solid #829da9; border-radius: .35rem; background: #f3f7f8; padding: .8rem 1rem; margin: 1.4rem 0; font-size: .77rem; line-height: 1.75; }
.md-typeset .mame-note p { margin: 0; }
.md-typeset .mame-note--example { border-left-color: #c09aab; background: #fbf7f9; border-color: #eadde3; }
.md-typeset .mame-screenshot { max-width: 40rem; margin: 1.5rem 0 1.8rem; padding: .65rem; border: 1px solid #dfe5e8; border-radius: .6rem; background: #f7f9fa; overflow: hidden; }
.md-typeset .mame-image-link { display: block; color: #53636c; text-decoration: none; cursor: zoom-in; }
.md-typeset .mame-image-link img { display: block; max-height: 24rem; max-width: 100%; width: auto; height: auto; margin: 0 auto; border: 1px solid #e5e9ec; border-radius: .25rem; background: white; object-fit: contain; }
.md-typeset .mame-image-hint { display: flex; justify-content: flex-end; align-items: center; gap: .35rem; padding: .6rem .2rem 0; font-size: .63rem; line-height: 1.4; }
.md-typeset .mame-image-link:hover .mame-image-hint { color: #9e235c; }
.md-typeset .mame-screenshot:has([id^="caption-attachment-"]) + p { max-width: 40rem; margin-top: -1.15rem; margin-bottom: 1.6rem; padding: 0 .5rem; font-size: .72rem; line-height: 1.6; color: var(--mame-muted); }
.md-typeset .mame-document--overview > ul { list-style: none; margin: 1.6rem 0; padding: 0; border: 1px solid var(--mame-border); border-radius: .6rem; overflow: hidden; }
.md-typeset .mame-document--overview > ul > li { margin: 0; border-bottom: 1px solid var(--mame-border); }
.md-typeset .mame-document--overview > ul > li:last-child { border-bottom: 0; }
.md-typeset .mame-document--overview > ul > li > a { display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; padding: .9rem 1rem; color: #33464f; }
.md-typeset .mame-document--overview > ul > li > a::after { content: "→"; color: #9e235c; flex-shrink: 0; }
.md-typeset .mame-document--overview > ul > li > a:hover { background: #f8f4f6; color: #9e235c; }
.md-typeset .mame-document-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .8rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--mame-border); font-size: .7rem; }
.mame-image-dialog { width: min(94vw, 72rem); max-width: 94vw; max-height: 94dvh; padding: 0; border: 1px solid #cad4d9; border-radius: .7rem; color: #24343c; background: #fff; box-shadow: 0 24px 80px #0005; }
.mame-image-dialog::backdrop { background: #182830c9; }
.mame-image-dialog [hidden] { display: none; }
.mame-image-status { padding: 2rem 1rem; text-align: center; font-size: .8rem; color: #53636c; }
.mame-image-dialog header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--mame-border); }
.mame-image-dialog h2 { margin: 0; font-size: .85rem; line-height: 1.4; }
.mame-image-dialog button { flex-shrink: 0; min-height: 2.2rem; padding: .4rem .7rem; border: 1px solid #c6cfd5; border-radius: .3rem; font-size: .7rem; cursor: pointer; }
.mame-image-dialog img { display: block; width: auto; height: auto; max-width: calc(100% - 1.5rem); max-height: 74dvh; margin: .75rem auto; object-fit: contain; }
.mame-image-dialog > a { display: block; padding: .3rem 1rem .9rem; text-align: right; color: #9e235c; font-size: .7rem; text-decoration: underline; text-underline-offset: .15em; }
.mame-document :focus-visible, .mame-image-dialog :focus-visible { outline: 3px solid #ee7b59; outline-offset: 3px; }
html:has(.mame-image-dialog[open]) { overflow: hidden; }
@media (max-width: 44rem) {
  .mame-document { margin-top: 0; }
  .md-typeset .mame-document--article { font-size: .8rem; line-height: 1.75; }
  .md-typeset .mame-document h1 { font-size: 1.55rem; }
  .md-typeset .mame-document--article h2 { margin-top: 2rem; font-size: 1.15rem; }
  .md-typeset .mame-screenshot { padding: .4rem; border-radius: .4rem; }
  .md-typeset .mame-image-link img { max-height: 20rem; }
  .mame-image-dialog header { gap: .5rem; padding: .65rem; }
  .mame-image-dialog h2 { font-size: .75rem; }
}