/* ===========================================================================
   Ember documentation — 2026 theme layer.

   Loaded after ember.css and after Material's own stylesheet, so this file
   only has to state what differs. It works by resetting Material's CSS
   variables rather than fighting its selectors, which is why almost none of
   this is !important and why upgrading Material will not shatter it.

   Three ideas:
     1. A solid dark header in both colour schemes, so the page has a top edge.
     2. Restraint in the body: one accent, hairline rules, real type hierarchy,
        no coloured card furniture.
     3. Code and console blocks stay dark on the light theme. They are the
        densest things on the page and they should read as objects.
   =========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,700;12..96,800&family=Public+Sans:wght@400;500;600&family=JetBrains+Mono:wght@400;500;700&display=swap");

/* --------------------------------------------------------------------------
   1. Palette
   -------------------------------------------------------------------------- */
:root {
  --e-disp: "Bricolage Grotesque", "Public Sans", sans-serif;
  --e-sans: "Public Sans", ui-sans-serif, system-ui, sans-serif;
  --e-mono: "JetBrains Mono", ui-monospace, monospace;

  --e-shell: #17140f;          /* the header bar, both schemes */
  --e-shell-line: #322b23;
  --e-shell-ink: #fbf7f1;
  --e-shell-dim: #b6ac9d;

  --e-code-bg: #0c0b0a;        /* code blocks, both schemes */
  --e-code-line: #241f1a;
  --e-code-ink: #c8bfb2;
}

[data-md-color-scheme="default"] {
  --e-bg: #fffdfa;
  --e-raised: #f8f5f0;
  --e-sunken: #f2ede6;
  --e-line: #e7e0d6;
  --e-line2: #d6cbbb;
  --e-ink: #17130f;
  --e-body: #443c33;
  --e-dim: #6d6357;
  --e-faint: #9c9285;
  --e-accent: #c2410c;
  --e-accent-soft: rgba(194, 65, 12, .07);
  --e-ok: #2f6f3b;
  --e-info: #1f5e96;
  --e-warn: #8a6410;

  --md-default-bg-color: var(--e-bg);
  --md-default-fg-color: var(--e-body);
  --md-default-fg-color--light: var(--e-dim);
  --md-default-fg-color--lighter: var(--e-faint);
  --md-typeset-color: var(--e-body);
  --md-typeset-a-color: var(--e-accent);
  --md-accent-fg-color: var(--e-accent);
  --md-primary-fg-color: var(--e-shell);
  --md-primary-bg-color: var(--e-shell-ink);
  --md-footer-bg-color: var(--e-raised);
  --md-footer-fg-color: var(--e-body);
}

[data-md-color-scheme="slate"] {
  --e-bg: #0d0c0b;
  --e-raised: #161311;
  --e-sunken: #1d1917;
  --e-line: #292320;
  --e-line2: #3a322c;
  --e-ink: #f2ece3;
  --e-body: #c3baae;
  --e-dim: #9a9083;
  --e-faint: #6b6257;
  --e-accent: #ff9e42;
  --e-accent-soft: rgba(255, 158, 66, .10);
  --e-ok: #74c47f;
  --e-info: #68acdf;
  --e-warn: #d7a34a;

  --md-default-bg-color: var(--e-bg);
  --md-default-fg-color: var(--e-body);
  --md-default-fg-color--light: var(--e-dim);
  --md-default-fg-color--lighter: var(--e-faint);
  --md-typeset-color: var(--e-body);
  --md-typeset-a-color: var(--e-accent);
  --md-accent-fg-color: var(--e-accent);
  --md-primary-fg-color: var(--e-shell);
  --md-primary-bg-color: var(--e-shell-ink);
  --md-footer-bg-color: var(--e-raised);
  --md-footer-fg-color: var(--e-body);
}

/* --------------------------------------------------------------------------
   2. Typography
   -------------------------------------------------------------------------- */
body,
input,
.md-typeset {
  font-family: var(--e-sans);
  font-variant-numeric: tabular-nums;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-nav__title,
.md-header__topic {
  font-family: var(--e-disp);
  color: var(--e-ink);
  text-wrap: balance;
}

.md-typeset h1 {
  font-size: 2.25rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.08;
  margin: 0 0 .4rem;
}

.md-typeset h2 {
  font-size: 1.42rem;
  font-weight: 700;
  letter-spacing: -.025em;
  margin: 2.4rem 0 .7rem;
  padding-top: .9rem;
  border-top: 1px solid var(--e-line);
}

.md-typeset h3 {
  font-size: 1.03rem;
  font-weight: 700;
  letter-spacing: -.012em;
  margin: 1.6rem 0 .4rem;
}

.md-typeset {
  font-size: .78rem;
  line-height: 1.75;
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol {
  max-width: 68ch;
}

/* Material's default is a very wide measure. Long lines are the single
   biggest readability problem on the current site. */
.md-content__inner {
  max-width: 54rem;
  margin: 0 auto;
  padding-top: 1.4rem;
}

/* --------------------------------------------------------------------------
   3. The shell: header and tabs
   -------------------------------------------------------------------------- */
.md-header {
  background: var(--e-shell);
  border-bottom: 1px solid #000;
  box-shadow: none;
}

.md-header__title {
  font-family: var(--e-disp);
  font-weight: 700;
  letter-spacing: -.015em;
}

.md-tabs {
  background: var(--e-shell);
  border-bottom: 1px solid var(--e-shell-line);
}

.md-tabs__link {
  color: var(--e-shell-dim);
  opacity: 1;
  font-size: .74rem;
}

.md-tabs__link:hover {
  color: #fff;
}

.md-tabs__item--active .md-tabs__link,
.md-tabs__link--active {
  color: #fff;
  font-weight: 500;
}

/* The active tab gets an underline rather than Material's faint opacity
   shift, which is invisible on a dark bar. */
.md-tabs__item--active {
  box-shadow: inset 0 -2px 0 var(--e-accent);
}

.md-search__form {
  background: #0f0d0a;
  border: 1px solid var(--e-shell-line);
  border-radius: 7px;
  height: 2rem;
}

.md-search__form:hover {
  background: #0f0d0a;
  border-color: #4b4136;
}

.md-search__input::placeholder {
  color: #7d7466;
}

/* --------------------------------------------------------------------------
   4. Navigation rails
   -------------------------------------------------------------------------- */
.md-sidebar--primary .md-sidebar__scrollwrap {
  margin: .6rem .3rem;
}

.md-nav {
  font-size: .715rem;
}

.md-nav__title {
  font-family: var(--e-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--e-faint);
  padding: 1rem .8rem .35rem;
}

.md-nav__link {
  color: var(--e-dim);
  border-radius: 5px;
  padding: .26rem .5rem;
  margin: 1px 0;
  transition: none;
}

.md-nav__link:hover,
.md-nav__link:focus {
  color: var(--e-ink);
  background: var(--e-raised);
}

.md-nav__link--active,
.md-nav__item .md-nav__link--active {
  color: var(--e-ink);
  font-weight: 600;
  background: var(--e-accent-soft);
  box-shadow: inset 2px 0 0 var(--e-accent);
}

/* Table of contents on the right */
.md-sidebar--secondary .md-nav__link {
  border-left: 0;
  background: none;
  box-shadow: none;
}

.md-sidebar--secondary .md-nav__link--active {
  color: var(--e-ink);
  font-weight: 600;
  background: none;
  box-shadow: none;
}

/* --------------------------------------------------------------------------
   5. Code, the densest thing on the page
   -------------------------------------------------------------------------- */
.md-typeset pre > code,
.md-typeset .highlight pre,
.md-typeset .highlighttable {
  background: var(--e-code-bg);
  color: var(--e-code-ink);
}

.md-typeset .highlight,
.md-typeset pre {
  border: 1px solid var(--e-code-line);
  border-radius: 9px;
  overflow: hidden;
}

.md-typeset code {
  font-family: var(--e-mono);
  font-size: .78em;
}

/* Inline code sits in the body, so it follows the page rather than the block
   style: a quiet chip, not a black slab mid-sentence. */
.md-typeset p > code,
.md-typeset li > code,
.md-typeset td > code {
  background: var(--e-sunken);
  border: 1px solid var(--e-line);
  border-radius: 4px;
  color: var(--e-ink);
  padding: .05em .35em;
}

.md-typeset .filename,
.md-typeset .highlight span.filename {
  background: #141110;
  border-bottom: 1px solid var(--e-code-line);
  color: #8a8073;
  font-family: var(--e-mono);
  font-size: .62rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   6. Tables and admonitions, stripped of their boxes
   -------------------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: .72rem;
}

.md-typeset table:not([class]) th {
  background: none;
  border-bottom: 1px solid var(--e-line2);
  color: var(--e-faint);
  font-family: var(--e-mono);
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .5rem .75rem .5rem 0;
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--e-line);
  border-top: 0;
  color: var(--e-dim);
  padding: .6rem .75rem .6rem 0;
  vertical-align: top;
}

.md-typeset table:not([class]) tr:hover {
  background: var(--e-raised);
}

/* An admonition is a note, not a poster. A rule and a heading carry it. */
.md-typeset .admonition,
.md-typeset details {
  background: none;
  border: 0;
  border-left: 2px solid var(--e-line2);
  border-radius: 0;
  box-shadow: none;
  font-size: .75rem;
  margin: 1.3rem 0;
  padding: .1rem 0 .1rem 1.1rem;
}

.md-typeset .admonition-title,
.md-typeset summary {
  background: none !important;
  border: 0;
  font-family: var(--e-disp);
  font-size: .8rem;
  font-weight: 700;
  color: var(--e-ink);
  margin: 0 0 .25rem;
  padding: 0 0 0 1.5rem;
}

.md-typeset .admonition-title::before,
.md-typeset summary::before {
  left: 0;
  top: .15rem;
}

.md-typeset .note > .admonition-title::before { background-color: var(--e-info); }
.md-typeset .note { border-left-color: var(--e-info); }
.md-typeset .tip > .admonition-title::before,
.md-typeset .info > .admonition-title::before { background-color: var(--e-info); }
.md-typeset .tip, .md-typeset .info { border-left-color: var(--e-info); }
.md-typeset .warning > .admonition-title::before { background-color: var(--e-warn); }
.md-typeset .warning { border-left-color: var(--e-warn); }
.md-typeset .success > .admonition-title::before { background-color: var(--e-ok); }
.md-typeset .success { border-left-color: var(--e-ok); }

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.md-footer-meta {
  background: var(--e-raised);
  border-top: 1px solid var(--e-line);
}

.md-footer__link {
  opacity: 1;
}

.md-footer__title {
  font-family: var(--e-disp);
}

.md-copyright,
.md-copyright__highlight {
  color: var(--e-faint);
  font-size: .65rem;
}

/* --------------------------------------------------------------------------
   8. Small corrections
   -------------------------------------------------------------------------- */
.md-typeset a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.md-typeset hr {
  border-bottom: 1px solid var(--e-line);
}

/* Material draws a heavy focus ring on every clicked link. Keyboard users
   still get one; mouse users no longer see a box appear under the cursor. */
.md-nav__link:focus:not(:focus-visible),
.md-typeset a:focus:not(:focus-visible) {
  outline: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   9. Undoing the previous theme's ornament

   ember.css hangs a glowing gradient bar off every h2 and a ✦ off every h3.
   That was the old visual language. The new one carries hierarchy with a
   hairline rule and type weight, so these have to go rather than sit on top
   of each other.
   -------------------------------------------------------------------------- */
.md-typeset h2 {
  padding-left: 0;
}

.md-typeset h2::before,
.md-typeset h3::before {
  content: none;
}

/* The copy button was inheriting a light chip on a dark block. */
.md-clipboard {
  color: #6f6759;
  transition: none;
}

.md-clipboard:hover,
.md-clipboard:focus {
  color: #e0a94f;
}

.md-typeset .highlight:hover .md-clipboard {
  color: #8a8073;
}

/* The left rail reads as a panel rather than as floating text. */
.md-sidebar--primary:not([hidden]) .md-sidebar__inner {
  background: var(--e-raised);
  border: 1px solid var(--e-line);
  border-radius: 9px;
  padding: .2rem .35rem .6rem;
}

/* The ambient particle field belonged to the old dark identity. On a white
   page it reads as dust on the screen. */
[data-md-color-scheme="default"] #ember-particles {
  display: none;
}

/* Content sits centred in its column, so a short code block does not leave a
   lopsided gap on the right. */
.md-content {
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   10. Corrections found by looking at the built pages
   -------------------------------------------------------------------------- */

/* Plugin names were wrapping onto two lines in the left rail. The rail is
   wide enough once the panel stops eating it with padding. */
@media screen and (min-width: 76.25em) {
  .md-sidebar--primary {
    width: 14.2rem;
  }
  .md-sidebar--secondary {
    width: 11.6rem;
  }
  .md-nav__link {
    padding-inline: .45rem;
  }
}

/* The copy button is a light chip sitting on a dark block. Material draws it
   as a masked background image, so the colour has to be set on the mask,
   not on the text. */
.md-typeset .md-clipboard {
  background: none;
  color: #5d564c;
}

.md-typeset .md-clipboard::after {
  background-color: currentColor;
}

.md-typeset .highlight:hover .md-clipboard,
.md-typeset .md-clipboard:focus,
.md-typeset .md-clipboard:hover {
  color: #b9ae9d;
}

.md-typeset .md-clipboard:hover::after {
  background-color: #e0a94f;
}

/* A code block sitting in a scroll container was overflowing its rounded
   corner on the right. */
.md-typeset .highlight > pre,
.md-typeset pre > code {
  border-radius: 0;
  border: 0;
}

/* Breadcrumbs above the title: quieter, and in the monospace used for every
   other piece of metadata on the page. */
.md-path {
  font-family: var(--e-mono);
  font-size: .58rem;
  letter-spacing: .04em;
}

.md-path__item a {
  color: var(--e-faint);
}

.md-path__item a:hover {
  color: var(--e-ink);
}

/* --------------------------------------------------------------------------
   11. The code block's own controls

   Recent Material renamed .md-clipboard to .md-code__button inside a
   .md-code__nav wrapper. On the light scheme it gives that wrapper a pale
   grey wash and the icon a near-black tint, both of which assume a pale code
   block. Ours is dark in every scheme, so it arrived as a grey square with an
   invisible icon in it.
   -------------------------------------------------------------------------- */
.md-typeset .md-code__nav {
  background: transparent;
}

.md-typeset .md-code__button {
  color: #6a6055;
}

.md-typeset .md-code__button::after,
.md-typeset .md-code__button::before {
  background-color: currentColor;
}

.md-typeset .highlight:hover .md-code__button,
.md-typeset pre:hover .md-code__button {
  color: #a89d8d;
}

.md-typeset .md-code__button:hover,
.md-typeset .md-code__button:focus-visible {
  color: #e0a94f;
}

/* --------------------------------------------------------------------------
   12. Components that were written dark-only

   The hero, the plugin cards and the asset cards all hardcode a near-black
   ground and pale text. On the light scheme they arrived as dark slabs with
   dark text inside them, which is the classic single-theme bug: a colour
   defined once, for one background.

   These give them a light treatment. The dark scheme keeps what it had.
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ember-hero {
  background: var(--e-raised);
  border-bottom: 1px solid var(--e-line);
  border-radius: 0 0 14px 14px;
}

[data-md-color-scheme="default"] .ember-hero::after {
  opacity: .55;
}

[data-md-color-scheme="default"] .ember-hero h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--e-ink);
}

[data-md-color-scheme="default"] .ember-hero p {
  color: var(--e-dim);
}

[data-md-color-scheme="default"] .ember-badge {
  color: #9a4d05;
  background: var(--e-accent-soft);
  border: 1px solid color-mix(in srgb, var(--e-accent) 28%, transparent);
}

/* Material's own card grid, used for the plugin list on the home page. */
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li,
[data-md-color-scheme="default"] .md-typeset .grid > .card,
[data-md-color-scheme="default"] .ember-asset-card {
  background: var(--e-bg);
  border: 1px solid var(--e-line);
  box-shadow: none;
  color: var(--e-body);
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li:hover,
[data-md-color-scheme="default"] .ember-asset-card:hover {
  background: var(--e-raised);
  border-color: var(--e-line2);
  box-shadow: 0 1px 2px rgba(25, 21, 18, .05), 0 10px 30px -18px rgba(25, 21, 18, .22);
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li h3,
[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li strong,
[data-md-color-scheme="default"] .ember-asset-card__body strong {
  color: var(--e-ink);
}

[data-md-color-scheme="default"] .ember-asset-card__body {
  color: var(--e-dim);
}

/* The per-plugin page hero, same problem. */
[data-md-color-scheme="default"] .ember-plugin-hero {
  background: var(--e-raised);
  border: 1px solid var(--e-line);
}

[data-md-color-scheme="default"] .ember-plugin-hero__tagline {
  color: var(--e-dim);
}

[data-md-color-scheme="default"] .ember-plugin-hero__badge {
  color: var(--e-dim);
  background: var(--e-bg);
  border: 1px solid var(--e-line2);
}

[data-md-color-scheme="default"] .ember-plugin-hero__badge--free,
[data-md-color-scheme="default"] .ember-plugin-hero__badge--hot {
  color: #9a4d05;
  background: var(--e-accent-soft);
  border-color: color-mix(in srgb, var(--e-accent) 28%, transparent);
}

[data-md-color-scheme="default"] .ember-features > p,
[data-md-color-scheme="default"] .ember-features {
  color: var(--e-dim);
}

/* The card rule in ember.css is !important, because the old design needed the
   ember particles to pass behind cards rather than through them. There are no
   particles on the light scheme, so the opacity trick is unnecessary and the
   only way past a marked rule is another one. */
[data-md-color-scheme="default"] .md-typeset .grid.cards > :is(ul, ol) > li,
[data-md-color-scheme="default"] .md-typeset .grid > .card {
  background: var(--e-bg) !important;
  border: 1px solid var(--e-line) !important;
  box-shadow: none !important;
  color: var(--e-body) !important;
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > :is(ul, ol) > li:hover {
  background: var(--e-raised) !important;
  border-color: var(--e-line2) !important;
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > :is(ul, ol) > li strong,
[data-md-color-scheme="default"] .md-typeset .grid.cards > :is(ul, ol) > li h3 {
  color: var(--e-ink) !important;
}

/* --------------------------------------------------------------------------
   13. The left rail, corrected

   Two faults were visible once the rail became a panel.

   Material makes section labels sticky by painting them in the PAGE
   background and hanging a matching 8px shadow around them, so scrolling
   content disappears behind them cleanly. Inside a panel that is a different
   colour, that mask reads as a dark band across the top.

   And an item with children renders the link and its expand toggle as two
   separate elements, so a highlight on each drew two boxes with a gap.
   -------------------------------------------------------------------------- */

/* The sticky mask has to match the panel, not the page. */
.md-sidebar--primary .md-nav__title,
.md-sidebar--primary label.md-nav__link {
  background: transparent;
  box-shadow: none;
}

/* One band per row. The link keeps the tint and the marker; the toggle beside
   it stays transparent so the two read as a single row. */
.md-nav__item .md-nav__link--active {
  background: var(--e-accent-soft);
  box-shadow: inset 2px 0 0 var(--e-accent);
  border: 0;
  border-radius: 5px;
}

.md-nav__item .md-nav__link--active ~ .md-nav__link,
.md-nav__item label.md-nav__link--active {
  background: transparent;
  box-shadow: none;
  border: 0;
}

/* ember.css marks every active link and every hover in full orange, which on
   a light page is loud and on either page fights the tinted band. The active
   row is already obvious; the text can stay the reading colour. */
.md-nav__link--active {
  color: var(--e-ink) !important;
  font-weight: 600;
}

.md-nav__link:hover {
  color: var(--e-ink) !important;
}

/* The expand arrow: quiet, and only coloured on the active row. */
.md-nav__icon {
  color: var(--e-faint);
}

.md-nav__item--active > .md-nav__link .md-nav__icon,
.md-nav__link--active .md-nav__icon {
  color: var(--e-accent);
}

/* --------------------------------------------------------------------------
   14. Plugin hero, on a pale ground

   The plugin title is gradient-clipped text. Amber-to-orange reads well on
   near-black and almost disappears on white, so on the light scheme it goes
   back to being ink. The outline button was pale orange on pale ground for
   the same reason.
   -------------------------------------------------------------------------- */
[data-md-color-scheme="default"] .ember-plugin-hero h1,
[data-md-color-scheme="default"] .ember-plugin-hero__body h1 {
  background: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  -webkit-text-fill-color: currentColor;
  color: var(--e-ink);
}

[data-md-color-scheme="default"] .ember-plugin-hero__kicker {
  color: #9a4d05;
}

[data-md-color-scheme="default"] .md-typeset .md-button {
  color: var(--e-ink);
  border: 1px solid var(--e-line2);
  background: var(--e-bg);
}

[data-md-color-scheme="default"] .md-typeset .md-button:hover {
  border-color: var(--e-faint);
  background: var(--e-raised);
  color: var(--e-ink);
}

[data-md-color-scheme="default"] .md-typeset .md-button--primary {
  background: linear-gradient(180deg, #ffa01f, #d97400);
  border-color: #c26a00;
  color: #241202;
}

[data-md-color-scheme="default"] .md-typeset .md-button--primary:hover {
  background: linear-gradient(180deg, #ff9310, #c26a00);
  color: #241202;
}

/* The hero's outline button is scoped to .ember-plugin-hero in ember.css and
   hardcodes white text with a translucent white border, which was correct on
   a near-black hero and invisible on a pale one. Same specificity is needed
   to reach it. */
[data-md-color-scheme="default"] .md-typeset .ember-plugin-hero .md-button:not(.md-button--primary) {
  color: var(--e-ink);
  border-color: var(--e-line2);
  background: var(--e-bg);
}

[data-md-color-scheme="default"] .md-typeset .ember-plugin-hero .md-button:not(.md-button--primary):hover {
  color: var(--e-ink);
  border-color: var(--e-faint);
  background: var(--e-raised);
}

/* Badges inside the hero were pale-on-pale for the same reason. */
[data-md-color-scheme="default"] .ember-plugin-hero__badge {
  color: var(--e-dim);
  border-color: var(--e-line2);
  background: var(--e-bg);
}

[data-md-color-scheme="default"] .ember-plugin-hero__badge--hot {
  color: #9a4d05;
  border-color: color-mix(in srgb, var(--e-accent) 40%, transparent);
  background: var(--e-accent-soft);
}

[data-md-color-scheme="default"] .ember-plugin-hero__badge--free {
  color: #2f6f3b;
  border-color: color-mix(in srgb, #2f6f3b 35%, transparent);
  background: rgba(47, 111, 59, .07);
}

/* ---- 15. Plugin banner image under a hero (EmberMC) ---------------------- */
.md-typeset img.ember-banner{display:block;width:100%;max-width:790px;margin:1.25rem auto 2rem;border-radius:14px;box-shadow:0 12px 40px rgba(0,0,0,.28)}
[data-md-color-scheme="default"] .md-typeset img.ember-banner{box-shadow:0 10px 30px rgba(20,20,20,.14)}

/* ---- 16. Wider content column for reference tables; the tuner preset table ---- */
.md-grid{max-width:74rem}
.md-typeset table.ember-presets-table{display:table;width:100%;table-layout:fixed;border-collapse:collapse;font-size:.74rem;margin:1rem 0 1.25rem;border:none}
.md-typeset table.ember-presets-table th,.md-typeset table.ember-presets-table td{padding:.55rem .6rem;vertical-align:top;text-align:left;border-bottom:1px solid var(--md-default-fg-color--lightest);white-space:normal;word-break:normal;overflow-wrap:normal}
.md-typeset table.ember-presets-table thead th{font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;opacity:.7;font-weight:600;border-bottom:1px solid var(--md-default-fg-color--lighter)}
.md-typeset table.ember-presets-table th:nth-child(1),.md-typeset table.ember-presets-table td:nth-child(1){width:40%}
.md-typeset table.ember-presets-table th:nth-child(n+2),.md-typeset table.ember-presets-table td:nth-child(n+2){width:20%}
.md-typeset table.ember-presets-table tbody th{font-weight:400}
.md-typeset table.ember-presets-table tbody th b{font-weight:600}
.md-typeset table.ember-presets-table small{display:block;margin-top:.15rem;opacity:.72;font-size:.9em;line-height:1.35}
.md-typeset table.ember-presets-table small code{font-size:.92em;white-space:normal;overflow-wrap:anywhere}

/* ---- 17. Benchmark charts ---- */
.md-typeset img.ember-chart{display:block;width:100%;max-width:720px;margin:1.25rem auto 1.5rem;border-radius:12px}