@charset "UTF-8";
/* CSS Document */

:root {
  --black: #000;
  --yellow: #ffff00;
  --lightblue: #00eeff;   /* #1BCDFD;*/
  --blue:      #07a;
  --darkblue:  #003366; /*#162852;*/ /* #1b3764; */   /* #000033; */
  --vdarkblue: #000020; /* 000033; */
  --dark: #171717;
  --green: #28a745;
  --white: #fff;
  --orange: orange;
  --grey:  #eee;
  --menu_text: #000;
  --menu_bkcolor: #fff;
  --header: rgba(230, 230, 230, 1);
  --header_fade: rgba(230, 230, 230, 0);
  --maxwidth: 1200px;
  --header_margin:10px;
  --margin: 5px;
  --nmargin: -5px;
  --spacing: 30px;
  --nspacing: -30px;
  --gridspacing: 10px;

  --alert_border: #003366;
  --alert_bkcolor: rgb(1,46,255,0.5);
}

 
body {
  background: #fff; 
  font-family: avenir, sans-serif;
  font-weight: normal;
  font-size: 18px;
  line-height: 28px;
  text-align: left;
  margin: 0;
  padding: 0;
  color: var(--black);
}


.container {
  display: block;
  padding: 0 var(--margin);
  margin: 0 auto;
  position:relative;
  max-width: var(--maxwidth);
}


/* -----------------
   ---- Headers ---- 
   ----------------- */

h1, h2, h3, h4, h5 {
  font-weight: 300;
  margin: 0;
  line-height:normal;
}

h1 {
  font-size: 50px;
  margin-bottom: 15px;
}

h2 {
  font-size: 30px;
  margin-bottom: 1rem;
  margin-top: 30px;
}

h3 {
  padding-top: 0;
  font-size: 1.4rem;
  font-weight: 400;
  margin-bottom: 1rem;
  margin-top:10px;
}

/* A heading that starts a new top-level section reads better with room to breathe and a clear
   line marking the break. Scoped to .doc-main's own direct children so it doesn't reach inside an
   .option-box, where the same paragraph-then-heading shape is a tightly grouped numbered step
   (see access.html's "1. Register / 2. Declare your domains / ..."), and a 50px gap plus a rule
   between them would break that grouping rather than help it. */
.doc-main > p + h3,
.doc-main > div.option-box + h3 {
  margin-top: 50px;
  padding-bottom: .3rem;
  border-bottom: 1px solid #ccc;
}

h4 { 
  font-size: 16px;
}

a, a:visited {
    color: darkgreen;
}


em { 
  color: #28a745;
  font-weight: 400;
}

code {
  font-size: 14px;
  line-height: 16px;
  color: #e83e8c;
  word-wrap: break-word;
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
}

img { 
  vertical-align: middle;
  border-style: none;
}


a, a:visited {
  color:var(--darkblue);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
} 

/* ----- Licence ---- */

ul
{
  list-style: none;
  padding-left: 1em;
}

ul li:before {
  content: "\25aa";
  color: var(--orange);
  font-size: 1.1em;
  font-weight: bold;
  display: inline-block;
  width:1em;
  margin-left: -1em;
  padding-top: 5px;
}

li table { margin-left:30px; }



div.licence {
  display: grid;
  grid-template-columns: 70px 200px;
  font-size: 80%;
  color:#fff;
}

div.licence:hover {
  color:#aaa;
}



/* ----- Code snippet ----- */

.bundle {
  border: 1px solid #ddd;
  border-radius: 5px;
}

.bundle #equation-editor {
  border: unset;
  border-radius: unset;
  padding: 5px;
  background: white;
  color: black;
}

.snippet {
  overflow: auto;
  padding: 10px;
}






.pl-3 {
  padding-left:30px;
}

/* Two-column reference layout. The page holds two kinds of content with opposite width needs:
   prose and option tables want a readable measure (~65-75 characters), while the examples want
   room for their own two-column rows and the JSON block. One 1200px column served neither - it
   put the prose at ~137 characters a line, about twice what the eye tracks comfortably. Splitting
   them also puts the examples in view while the options are being read, which is the point of the
   page. Collapses to a single column before the two halves get too narrow to be worth it. */
.doc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.doc-main { min-width: 0; }

.doc-aside {
  min-width: 0;
  position: sticky;
  top: 84px;        /* clears the sticky site header */
}

.doc-aside .card { margin: 0; }

/* One column inside the narrower panel - the equation and its URL stack rather than sitting
   side by side, which is what the halved width has room for. */
.doc-aside .card-row { grid-template-columns: 1fr; padding: 18px 20px; }
.doc-aside .eqn-badge { width: 64px; font-size: 80%; }

@media (max-width: 980px) {
  .doc-grid { grid-template-columns: 1fr; gap: 0; }
  .doc-aside { position: static; }
}

/* The type/format option lists on the docs page. One box holding both tables, indented to sit
   under the prose, set smaller than body text. table-layout:fixed with a set width on the first
   column is what keeps the option names in one column and, more to the point, keeps the two
   tables lined up with each other rather than each sizing to its own longest word. */
.option-box {
  margin: 10px 0 20px 0px;
  padding: 0 20px;
  border: 1px solid rgba(0, 0, 0, .125);
  border-radius: 5px;
  background-color: #fafafa;
}


table.table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
  font-size: 90%;
}

/* Header row, matching the documentation's tables (body.ui table th there): small, spaced
   capitals in the accent colour over a wash of it. Without a header the first column read as
   part of the prose above it rather than as a column of values. */
table.table th {
  text-align: left;
  vertical-align: bottom;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #1a7a38;
  background: rgba(40, 167, 69, .09);
  padding: 7px 10px;
  white-space: nowrap;
}

table.table td {
  padding: 8px 10px;
  vertical-align: top;
  line-height: 1.5;
}

/* A rule between rows, not around every cell: the documentation's tables are read down a column,
   and a full grid makes six short descriptions look like a spreadsheet. */
table.table tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, .08);
}

/* Wide enough for the longest option name, "mathml_nospeech" - with white-space:nowrap a
   narrower column doesn't wrap it, it spills over the description beside it. */
table.table th:first-child,
table.table td:first-child {
  width: 150px;
  padding-right: 16px;
}

.center { 
  text-align: center;
}

.text-black {
  color: black;
}

.brand-link:hover {
  text-decoration: none;
}

.eqn-badge {
  position: absolute;
  right: 0;
  top: 0;
  padding: 5px;
  color: white;
  border-bottom-left-radius: 5px;
  width: 70px;
  text-align: center;
  background-color: #28a745;
  font-size:90%;
}

.copyright {
  text-align: center;
}

.orange {
  padding:5px;
  border:1px solid orange;
  background-color: orange;
}

.examples {
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

img.examples[src*="svg.image"] {
  height:80px;
}

.mathml-example {
  display: flex;
  align-items: center;
  font-size: 24px;
}

/* The docs page's own MathML example - not a general fxtex.css rule, since a centered display
   equation is the conventional LaTeX/publishing default and other consumers of fxtex.css may
   well want that; here it just fights the card layout, which reads better left-aligned. */
#fxtex-example-mathml math[display="block"] {
  text-align: left;
  font-size: 40px;
}

/* pre-wrap rather than pre: the JSON carries one very long unbroken string (the whole MathML
   document on a single line), which would otherwise scroll sideways forever. No height cap and
   no overflow either - the block grows to its content so the whole response is readable without
   a scrollbar. */
.json-example {
  margin: 10px 0 0 0;
  padding: 12px 14px;
  background: var(--dark);
  border-radius: 5px;
  overflow: visible;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.json-example code {
  color: #d4d4d4;
  font-size: 13px;
  line-height: 18px;
  word-wrap: break-word;
}

/* Token colours for the highlighter in partials/eqn-rendering.tpl. Punctuation keeps the
   block's own #d4d4d4; everything else is spanned. */
.json-key     { color: #9cdcfe; }
.json-string  { color: #ce9178; }
.json-number  { color: #b5cea8; }
.json-boolean { color: #569cd6; }
.json-null    { color: #569cd6; }

/* Same palette, for the hand-marked-up Swift/Kotlin/HTML/JS samples elsewhere on this page -
   there is no live text to run a highlighter over, so these are spanned by hand where they are
   written rather than generated. */
.code-kw   { color: #569cd6; }  /* keywords: let, val, var, fetch, function */
.code-str  { color: #ce9178; }  /* string literals */
.code-num  { color: #b5cea8; }  /* numeric literals */
.code-fn   { color: #dcdcaa; }  /* function / method names */
.code-type { color: #4ec9b0; }  /* types */
.code-com  { color: #6a9955; }  /* comments */
.code-tag  { color: #569cd6; }  /* HTML tag names */
.code-attr { color: #9cdcfe; }  /* HTML attribute names */




/* --------------------
   ---- Navigation ----
   -------------------- */

/* ==================== Shared site header ====================
   Identical markup + rules across codecogs.com, fxRender, and Equation
   Editor — same file, pasted into each site's own stylesheet. Only
   --sh-bg/--sh-text/--sh-hover vary, set once here to this site's own
   default page background; every other rule (spacing, icon treatment,
   the active-tab accent, the mobile breakpoint and dropdown behaviour)
   is unchanged between the three copies. */

.site-header {
  --sh-bg: #fff;
  --sh-text: #000;
  --sh-hover: rgba(0, 0, 0, 0.06);
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--sh-bg);
  color: var(--sh-text);
  border-bottom: 1px solid var(--sh-hover);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.site-header-bar {
  position: relative;
  max-width: var(--maxwidth);
  margin: 0 auto;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.site-header-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  font-size: 1.25rem;
  white-space: nowrap;
}
.site-header-brand a,
.site-header-brand a:visited { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.site-header-brand a:hover { opacity: 0.85; }
.site-header-cog { display: block; width: 20px; height: auto; }
.site-header-brand sup { font-size: 0.6em; }

.site-header-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  padding: 6px;
  color: var(--sh-text);
  cursor: pointer;
}
.site-header-toggle svg { width: 22px; height: 22px; display: block; }

.site-header-menu {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.site-header-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin: 0 auto;
}

.site-header-end {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* :visited repeated everywhere below: this site's own global `a:visited {
   color: darkgreen; }` (further up this file) has higher specificity
   than a plain class selector, so every already-clicked nav link would
   otherwise render green instead of the header's own text colour. */
.site-header-link,
.site-header-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 0.3rem;
  color: inherit;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
}
.site-header-link:hover,
.site-header-link:focus-visible { background: var(--sh-hover); text-decoration: none; color: inherit; }

.site-header-icon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; opacity: 0.85; display: block; }

/* Guards against a global `a > span { font-size: 65%; display: block; }`
   rule fxRender's own stylesheet has (for its old two-line buttons) -
   harmless here, but needed there, and kept identical either way. */
.site-header-link span,
.site-header-cta span { display: inline; font-size: 1rem; }

/* Active/current page: a subtle colour tint on the icon only - no
   background pill, no border box. Identical everywhere. */
.site-header-link.is-current .site-header-icon { opacity: 1; color: #6cb33f; }

.site-header-cta,
.site-header-cta:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 0.3rem;
  /* The same green as every other call to action on the site. It was #28a745, which is
     3.1:1 against white text - the identical contrast failure already fixed on the page
     buttons, and the reason this no longer matched them. */
  background: #136b42;
  color: #fff;
  text-decoration: none;
  font-size: 1rem;
  white-space: nowrap;
}
.site-header-cta:hover { background: #0f5836; color: #fff; text-decoration: none; }
.site-header-cta .site-header-icon { opacity: 1; color: #fff; }

.site-header-search { display: flex; }
.site-header-search input[type="search"] {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--sh-hover);
  border-radius: 4px 0 0 4px;
  font-size: 0.95rem;
  background: var(--sh-bg);
  color: var(--sh-text);
}
.site-header-search button {
  border: none;
  background: #ff7700;
  color: #fff;
  padding: 8px 14px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 0.95rem;
}
.site-header-search button:hover { background: #e56a00; }

@media (max-width: 860px) {
  .site-header-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .site-header-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 16px;
    margin-top: 6px;
    flex-direction: column;
    align-items: stretch;
    background: var(--sh-bg);
    border: 1px solid var(--sh-hover);
    border-radius: 8px;
    padding: 10px;
    min-width: 220px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  }
  .site-header-menu.is-open { display: flex; }

  .site-header-nav,
  .site-header-end {
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    gap: 2px;
    width: 100%;
  }
  .site-header-end { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--sh-hover); }

  .site-header-search { order: -1; margin-bottom: 6px; }
}




/* ----------------
   ---- Footer ----
   ---------------- */

footer {
  background-color: #2d2d2d;
  color: var(--white);
  padding: var(--margin);
  clear: both;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
}

footer h1 {
  text-align: center;
  color: #fff;
  padding-top: var(--spacing);
}

footer hr {
  border-bottom: 1px solid var(--white);
  margin-left:auto;
}

footer a, footer a:visited {
  color: var(--white);
  text-decoration: none;
}

footer a:hover {
  color: var(--yellow);
  text-decoration: underline;
}

footer .copyright {
    color: #ffffff;
    padding-top: 10px;
    margin-bottom: 25px;
    text-align: center;
}

footer span { margin: 5px 10px; }

/* Two rows: the links, then one line of company detail. It was a three-column
   grid declared with two columns, so the copyright always wrapped onto a row of
   its own, and the registered office was set as a five-item bulleted list. */
.footer {
  max-width: var(--maxwidth);
  margin: 0 auto;
  padding: 22px var(--margin) 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 26px;
}

.footer-links a {
  font-size: 13px;
  line-height: 1.4;
  color: #e8e8e8;
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
}

.footer-links a:hover {
  color: var(--yellow);
  border-bottom-color: currentColor;
  text-decoration: none;
}

/* The separators are drawn by the gap plus a rule between items rather than
   written into the markup, so the line breaks cleanly on a narrow screen
   instead of stranding a bullet at the start of a row. */
.footer-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 18px;
  margin: 0;
  padding-top: 14px;
  border-top: 1px solid #414141;
  width: 100%;
  color: #a8a8a8;
  font-size: 12px;
  line-height: 1.6;
}

.footer-meta span + span { position: relative; }

.footer-meta span + span::before {
  content: "";
  position: absolute;
  left: -9px;
  top: .15em;
  bottom: .15em;
  border-left: 1px solid #4d4d4d;
}

.footer-meta strong { color: #e8e8e8; font-weight: 600; }

.footer-meta a,
.footer-meta a:visited { color: #a8a8a8; text-decoration: none; }
.footer-meta a:hover { color: var(--yellow); text-decoration: underline; }

@media (max-width: 560px) {
  /* One rule per item reads as clutter once they are stacking; the gap is
     doing the separating by then. */
  .footer-meta span + span::before { content: none; }
  .footer-meta { flex-direction: column; align-items: center; gap: 5px; }
}

/* Use in a section before footer to ensure 
footer gets pushed at least to bottom of page */
.placeholder {
  min-height: calc(100vh - 275px);
}



/* ------------------
   --- Home Page ----
   ------------------ */

/* Header message about the Equation Editor */
.header {
  display: grid;
  grid-template-columns: 1fr;
  grid-column-gap: 10px;
  margin: auto;
  margin-bottom: 10px;
}


.header h1 {
  font-size: 3rem;
  font-weight: 300;
  margin: 0;
  margin-top:10px;
}

.header h1>small {
  font-size: 60%;
  white-space: nowrap;
  font-weight: unset;
}

.header img { 
  width:100px; 
  padding-bottom: 20px;
}

.header div {
  text-align: center;
}

.button-bar {
  text-align: center;
}


/* ----------------- 
   ---- Buttons ---- 
   ----------------- */

[type=button]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
}

button, a.button {
  padding: 8px 14px;

  border-radius: .2rem; 

  font-family: muli, sans-serif;
  font-weight: 400;
  font-size: 14px;
    
  text-align: center;
  text-transform: uppercase;
  vertical-align: middle;

  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  word-wrap: none;
  white-space: nowrap;

  color: var(--green);
  border: 1px solid var(--green);
  background-color: transparent; 
  text-decoration: none;

  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

a.button.large, button.large {
  font-size: 110%;
}

a.button.small, button.small {
  font-size: 80%;
  padding: 4px 7px;
}

p.button {
  text-align: center;
}

a.button:hover, button:hover {
  background-color: var(--darkblue);
  color: var(--white);
  border-color: var(--darkblue);
}

button.green, a.button.green {
  color: var(--white) !important;
  background-color: var(--green);
}

button.blue, a.button.blue {
  color: var(--white) !important;
  border-color: var(--darkblue);
  background-color: var(--darkblue);
}



/* -----------------
   --- Sections ----
   ----------------- */

section { 
  padding: 15px var(--margin);
  margin:auto;
  max-width: var(--maxwidth);
}

section.surround {
  background-color: var(--vdarkblue);
  color: var(--white);
}

section.surround.grey {
  background-color: var(--grey);
  color: var(--black);
  position: relative;
  z-index: 1;
}

section.surround.grey * {
  z-index: 10;
}

section.surround.dark {
  background-color: var(--vdarkblue);
  color: var(--white);
}

section.surround > div {
  max-width: var(--maxwidth);
  margin: auto;
  position: relative;
  padding-left: var(--margin);
}

section.surround:not(.grey) h3, 
section.surround:not(.grey) h4, 
section.surround:not(.grey) h5, 
section.surround:not(.grey) a {
  color: var(--white);
}




/* ---- List Groups ---- */

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  border:1px solid rgba(0,0,0,.125);
  border-radius:.25rem;
  padding: 0;
}

.card-header {
  padding: .75rem 1.25rem;
  margin-bottom: 0;
  background-color: rgba(0,0,0,.03);
  border-bottom: 1px solid rgba(0,0,0,.125);
}

.card-row {
  position: relative;
  display:grid;
  grid-template-columns: 1.5fr 1fr;
  grid-column-gap: var(--gridspacing);
  border-bottom: 1px solid rgba(0,0,0,.125);
  padding:30px;
}


.card-row .examples {
  margin-top: 10px;
}



/* -------------------------- 
   ---- MEDIA VARIATIONS ---- 
   -------------------------- */


/* ------------------------
   ----- Small Screen -----
   ------------------------ */

@media (min-width: 576px) {
  :root {
    --margin: 30px;
    --nmargin: -30px;
  }
}


@media (min-width: 768px) {

  ul { 
    padding-left: var(--margin);
  }

  .tab-bar { 
    text-align: left;
  }

  .tab {
    margin: 0;
  }

  #licence.selected {
    grid-template-columns: repeat(2, 1fr);
  }

  .menu_column > .sticky {
    display: block;
    width: 200px;
    height: 90vh;
    position: sticky;
    top: 100px;
    padding-bottom: 1rem;
  }

}


@media (min-width: 768px) {
  .dropdown-item {
    position: absolute;
    top:45px;
    padding: 10px;
    z-index: 1040; 
    border-radius: 10px;
  }
}

/* -------------------------
   ----- Medium Screen -----
   ------------------------- */



@media (min-width: 768px) {
  .strong { padding: 0; }

  .menu_column {
    display:grid;
    grid-template-columns: 200px 1fr;
    grid-column-gap: var(--spacing);
  }

  .twocolumn {
    display:grid;
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--gridpacing);
  }

  .twocolumn.middle {
      grid-template-columns: 1fr;
      grid-column-gap: var(--spacing);
      grid-row-gap: var(--gridspacing);
  }

  .twocolumn.even {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: var(--spacing);
    grid-row-gap: var(--gridspacing);
  }

  .twocolumn.middle > div {
    max-width:600px;
    margin: 0 auto!important;
  }

  .twocolumn.leftside {
    display: grid;
    flex-direction: unset;
  }

  .twocolumn.right {
    grid-template-columns: 1.5fr 1fr;
  }

  .twocolumn > div {
    margin:0;
  }
}


@media (min-width: 990px) {
  .header { 
    max-width:800px;
    grid-template-columns: 100px 1fr;
  }
}


@media (min-width: 990px) {
  .licence-ops {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 25px;
  }

  .card {
    margin: 0;
  }

  .card-body {
    padding: 0 1.25rem;
  }

  .licence-ops .card-body { 
    min-height: 365px;
  }

  .licence-ops .card-footer {
    min-height: 130px;
  }

  .licence-ops ul {
    padding-left: 1.5rem;
  } 

   #licence.selected {
    grid-template-columns: repeat(3, 1fr);
  }
}






/* --- examples.html: the four-way rendering comparison ------------------------------------ */
/* The table is wider than the column it sits in on a narrow screen, so it scrolls inside its
   own box rather than making the whole page scroll sideways. */
.cmp-wrap { overflow-x: auto; margin: 1.2em 0; }
.cmp { border-collapse: collapse; width: 100%; min-width: 1180px; table-layout: fixed; }
.cmp th {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
    color: #5a6470; font-weight: 600; text-align: center;
    padding: 0.5em 0.6em; border-bottom: 2px solid #d8dde3; vertical-align: bottom;
}
.cmp th small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400;
                color: #8b949e; font-size: 0.9em; }
.cmp td { padding: 0.75em 0.6em; border-bottom: 1px solid #e8ecef; text-align: center;
          vertical-align: middle; }
.cmp tbody tr:hover { background: #fafbfc; }

/* The source column is read, not looked at: left-aligned, wrapping, and narrow enough that the
   four render columns keep the space. */
.cmp-src { text-align: left !important; width: 19%; }
.cmp-src code { font-size: 0.74rem; color: #444; word-break: break-word; white-space: pre-wrap; }

.cmp-render { min-height: 40px; display: flex; align-items: center; justify-content: center;
               overflow-x: auto; }
/* No max-width: the height is set per row in script to put every renderer at one scale, and a
   max-width would override that and squash the wide equations instead of scaling them. A row
   wider than the table scrolls in .cmp-wrap as a whole, which keeps the columns aligned. */
.cmp-render img { max-width: none; }
.cmp-size { font-size: 0.68rem; color: #98a1ab; margin-top: 0.35em; font-variant-numeric: tabular-nums; }
.cmp-fail { font-size: 0.72rem; color: #b04a3f; font-style: italic; }
.cmp-note { font-size: 0.82rem; color: #6b7480; }

/* "Further examples" under the example cards on the home page. */
.examples-more { margin: 14px 20px 4px; text-align: right; font-size: 0.86rem; }
.examples-more a { color: #2f6f4f; text-decoration: none; font-weight: 600; }
.examples-more a:hover { text-decoration: underline; }