/* IBM Plex in IBM's Latin1 subset, under the SIL Open Font License in
   fonts/LICENSE.txt. The unicode-range matches IBM's range for the subset, so
   other characters come from the fallback fonts. */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Italic-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/IBMPlexSans-SemiBold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/IBMPlexSans-Bold-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
  unicode-range: U+0000, U+000D, U+0020-007E, U+00A0-00A3, U+00A4-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+2074, U+20AC, U+2122, U+2212, U+FB01-FB02;
}

/* The colour tokens of every eudi-dev page. theme.js sets data-theme="light"
   for the light theme. */
:root {
  color-scheme: dark;
  --bg: #17191e;
  --bg-header: #1a1d22;
  --bg-surface: #21242a;
  --bg-hover: #2c3038;
  --bg-btn: #2c3038;
  --bg-btn-hover: #3a3f48;
  --bg-btn-dialog: #343841;
  --bg-input: #1c1f24;
  --bg-dialog: #24272d;
  --bg-raised: #383d45;
  --bg-track: #15171b;
  --bg-segment: #3a404d;
  --text-segment: #ffffff;
  --shadow-segment: none;
  --scrim: rgba(8, 9, 11, 0.6);
  --shadow-card: 0 6px 14px rgba(0, 0, 0, 0.35);
  --shadow-dialog: 0 24px 60px rgba(0, 0, 0, 0.45);
  --text: #eceef1;
  --text-dim: #a9afb9;
  --border: #383d45;
  --border-subtle: #2a2e35;
  --border-dialog: #3a3f47;
  --border-raised: #24272d;
  --accent: #8fb4ff;
  --on-accent: #17191e;
  --link: #9dbcff;
  --info-bg: #243559;
  --info-fg: #b9cdfa;
  --ok-bg: #1d3a27;
  --ok-fg: #9fdcae;
  --neutral-bg: #2c3038;
  --neutral-fg: #c9ccd2;
  --warn-bg: #33291a;
  --warn-fg: #f3e3bd;
  --danger-bg: #43231f;
  --danger: #ff9b8f;
  --cyan: #8bd3ea;
  --green: #9fdcae;
  --yellow: #f0c674;
  --red: #ff9b8f;
  --orange: #f5a97f;
  --purple: #c4a7f5;
  --pink: #f0a3c6;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

[data-theme="light"] {
  color-scheme: light;
  --bg: #f2f3f5;
  --bg-header: #ffffff;
  --bg-surface: #ffffff;
  --bg-hover: #eceef2;
  --bg-btn: #eceef2;
  --bg-btn-hover: #dde1e7;
  --bg-btn-dialog: #e6e9ee;
  --bg-input: #ffffff;
  --bg-dialog: #ffffff;
  --bg-raised: #f3f4f7;
  --bg-track: #eceef2;
  --bg-segment: #ffffff;
  --text-segment: #15171a;
  --shadow-segment: 0 1px 3px rgba(20, 30, 60, 0.18);
  --scrim: rgba(20, 24, 32, 0.42);
  --shadow-card: 0 4px 10px rgba(20, 30, 60, 0.18);
  --shadow-dialog: 0 24px 60px rgba(20, 30, 60, 0.22);
  --text: #15171a;
  --text-dim: #5a606a;
  --border: #d5d8de;
  --border-subtle: #e4e6ea;
  --border-dialog: #dfe2e7;
  --border-raised: #dde0e6;
  --accent: #1f4fd1;
  --on-accent: #ffffff;
  --link: #1f4fd1;
  --info-bg: #e8eefc;
  --info-fg: #1a3a8f;
  --ok-bg: #e3f4e8;
  --ok-fg: #17602e;
  --neutral-bg: #eef0f3;
  --neutral-fg: #3e434a;
  --warn-bg: #fff3d6;
  --warn-fg: #4a3a10;
  --danger-bg: #fbe9e7;
  --danger: #b3261e;
  --cyan: #0a6a87;
  --green: #17602e;
  --yellow: #7a5600;
  --red: #b3261e;
  --orange: #9a4a12;
  --purple: #6b3fb8;
  --pink: #a3245f;
}

/* Every page draws thin scrollbars in the theme colours. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--text-dim);
}

/* The footer of every eudi-dev page. footer.js fills it. */
.site-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-dim);
  text-align: center;
}
.site-footer a {
  color: var(--text-dim);
  text-decoration: none;
}
.site-footer a:hover {
  color: var(--text);
  text-decoration: underline;
}
.site-footer [hidden] {
  display: none;
}
.footer-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 2px 16px;
}
/* IBM Plex Mono looks larger than IBM Plex Sans at the same size. */
.footer-version {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text);
  overflow-wrap: anywhere;
}
.footer-prerelease {
  padding: 0 8px;
  border-radius: 10px;
  background: var(--info-bg);
  color: var(--info-fg);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
}
/* The text sets the baseline of the link. */
.footer-sponsor {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
}
.footer-sponsor svg {
  align-self: center;
  width: 10px;
  height: 10px;
  flex-shrink: 0;
  color: var(--pink);
}