/* WebPDF docs · MDN style: the layout, tokens and components of developer.mozilla.org's 2025 "Fred" frontend, rebuilt with system-ui and monospace only and oklch colours
   one sheet for every page: the light DOM (articles) uses it as is; .js copies its rules into one constructed sheet for the closed shadow roots (header, sidebars, TOC, footers, samples)
   icons: Lucide (ISC) as CSS masks, as MDN uses them · compat browser marks: MDN's monochrome masks (MPL-2.0) */

/* 🎨 TOKENS ___________________________________________________________________________________________________________ */
:root {
  --color-white:     oklch(100% 0 0);                --color-black:     oklch(0% 0 0);
  --color-gray-90:   oklch(97.64% .0013 286.38);     --color-gray-80:   oklch(94.89% .0029 264.54);   --color-gray-60:   oklch(82.77% .0071 247.91);
  --color-gray-40:   oklch(45.12% .0131 256.75);     --color-gray-20:   oklch(30.78% .0083 255.56);   --color-gray-10:   oklch(25.81% .0058 236.76);   --color-gray-05: oklch(21.32% .0042 264.48);
  --color-red-90:    oklch(94.63% .0278 6.65);       --color-red-80:    oklch(74.03% .1555 11.27);    --color-red-50:    oklch(55.23% .2157 22.1);     --color-red-20:    oklch(49.76% .1931 21.64);  --color-red-10:    oklch(27.35% .0935 16.95);
  --color-orange-90: oklch(97.06% .016 58.64);       --color-orange-80: oklch(84.94% .0961 57.31);    --color-orange-50: oklch(68.13% .1564 51.65);    --color-orange-20: oklch(58.26% .1562 47.56);  --color-orange-10: oklch(28.58% .055 54.26);
  --color-yellow-90: oklch(95.51% .06 92.81);        --color-yellow-80: oklch(92.09% .0915 92.68);    --color-yellow-50: oklch(79.11% .1603 87.68);    --color-yellow-20: oklch(58.4% .1163 89.22);   --color-yellow-10: oklch(39.59% .0781 89.78);
  --color-green-90:  oklch(96.22% .0157 160.62);     --color-green-80:  oklch(85.09% .151 155.56);    --color-green-50:  oklch(57.45% .1574 149.63);   --color-green-20:  oklch(41.32% .1095 150.45); --color-green-10:  oklch(28.02% .0572 154.92);
  --color-blue-90:   oklch(96.4% .0159 253.9);       --color-blue-80:   oklch(83.83% .081 252.13);    --color-blue-50:   oklch(49.19% .1674 256.86);   --color-blue-20:   oklch(42.97% .1492 256.99); --color-blue-10:   oklch(26.06% .0723 254.88);
  --color-purple-90: oklch(96.49% .0212 306.84);     --color-purple-80: oklch(83.44% .1029 304.86);   --color-purple-50: oklch(54.44% .2381 298.3);    --color-purple-20: oklch(42.62% .2033 296.93); --color-purple-10: oklch(23.56% .0943 299.81);

  --color-background-page:      light-dark(var(--color-white),   var(--color-gray-05));
  --color-background-primary:   light-dark(var(--color-gray-90), var(--color-gray-10));
  --color-background-secondary: light-dark(var(--color-gray-80), var(--color-gray-20));
  --color-background-red:       light-dark(var(--color-red-90),    var(--color-red-10));    --color-text-red:    light-dark(var(--color-red-20),    var(--color-red-80));
  --color-background-orange:    light-dark(var(--color-orange-90), var(--color-orange-10)); --color-text-orange: light-dark(var(--color-orange-20), var(--color-orange-80));
  --color-background-yellow:    light-dark(var(--color-yellow-90), var(--color-yellow-10)); --color-text-yellow: light-dark(var(--color-yellow-20), var(--color-yellow-80));
  --color-background-green:     light-dark(var(--color-green-90),  var(--color-green-10));  --color-text-green:  light-dark(var(--color-green-20),  var(--color-green-80));
  --color-background-blue:      light-dark(var(--color-blue-90),   var(--color-blue-10));   --color-text-blue:   light-dark(var(--color-blue-20),   var(--color-blue-80));
  --color-background-purple:    light-dark(var(--color-purple-90), var(--color-purple-10)); --color-text-purple: light-dark(var(--color-purple-20), var(--color-purple-80));
  --color-text-primary:         light-dark(var(--color-black),   var(--color-white));
  --color-text-secondary:       light-dark(var(--color-gray-40), var(--color-gray-60));
  --color-link-normal:          light-dark(var(--color-blue-20),   var(--color-blue-80));
  --color-link-visited:         light-dark(var(--color-purple-20), var(--color-purple-80));
  --color-border-primary:       light-dark(var(--color-gray-60), var(--color-gray-40));
  --color-border-secondary:     light-dark(var(--color-gray-40), var(--color-gray-60));
  --color-border-active:        light-dark(var(--color-blue-50), var(--color-blue-80));
  --color-scrollbar-thumb:      light-dark(oklch(0% 0 0 / .251), oklch(100% 0 0 / .251));
  --color-area-background:      var(--color-background-blue);
  --color-area-highlight-border: var(--color-blue-50);
  --color-area-link:            var(--color-link-normal);

  /* syntax: MDN's Prism theme (code blocks) · CodeMirror's default / One Dark (Try it editors) */
  --tok-com:  light-dark(oklch(45.12% .0131 256.75), oklch(76.68% 0 0));          /* comment, punctuation */
  --tok-name: light-dark(oklch(54.87% .2202 19.49), oklch(78.69% .125 14.78));    /* attribute name, property, function */
  --tok-val:  light-dark(oklch(50.36% .1381 150.18), oklch(74.96% .2063 150.03)); /* tag, attribute value, string, number, at-rule */
  --tok-key:  light-dark(oklch(52.13% .1608 253), oklch(85.49% .0498 267.64));    /* keyword */
  --tok-sel:  light-dark(oklch(55.58% .2769 294.85), oklch(77.75% .1281 296.06)); /* selector, builtin */
  --cm-tag:   light-dark(oklch(53.64% .1158 162.23), oklch(83.14% .1045 79.42));
  --cm-attr:  light-dark(var(--color-black), oklch(67.09% .1448 17));
  --cm-val:   light-dark(oklch(47.01% .1835 28.18), oklch(76.83% .1103 133));
  --cm-key:   light-dark(oklch(41.16% .196 321.48), oklch(69.36% .1635 318.21));
  --cm-com:   light-dark(oklch(48.99% .1314 49.03), oklch(62.14% .0296 262.28));
  --cm-bg:    light-dark(var(--color-white), oklch(29.25% .0157 264.3));         --cm-text:   light-dark(var(--color-black), oklch(76.21% .0202 262.99));
  --cm-gutter-bg: light-dark(oklch(97.02% 0 0), oklch(29.25% .0157 264.3));      --cm-gutter: light-dark(oklch(53.13% 0 0), oklch(62.14% .0296 262.28));
  --cm-gutter-border: light-dark(oklch(89.75% 0 0), oklch(29.25% .0157 264.3));  --cm-active: light-dark(oklch(98.22% .0098 238.64), oklch(30.55% .0189 262.5));

  --font-family-text: system-ui; --font-family-code: monospace, monospace; /* the doubled generic keeps monospace text at the size it inherits */
  --font-line-content: 1.75; --font-line-normal: 1.5; --font-line-header: 1.25; --font-line-ui: 1;
  --font-size-largest: 2.5rem; --font-size-larger: 2rem; --font-size-large: 1.5rem; --font-size-medium: 1.25rem; --font-size-normal: 1rem; --font-size-small: .8rem;
  --font-weight-normal: 400; --font-weight-bold: 600;

  --layout-side-padding-min: 1rem; --layout-side-padding: max(var(--layout-side-padding-min), calc(50vw - 720px + 1rem)); --layout-full-width: calc(100vw - var(--layout-side-padding) * 2);
  --layout-sidebar-min: 15rem; --layout-sidebar-gap: 2rem; --layout-sidebar-padding: 1rem; --layout-content-min: 31rem; --layout-content-max: 48rem;
  --layout-2-sidebars: [full-start left-sidebar-start] minmax(var(--layout-sidebar-min), 1fr) [left-sidebar-end] var(--layout-sidebar-gap) [content-start] minmax(0, var(--layout-content-max)) [content-end] var(--layout-sidebar-gap) [right-sidebar-start] minmax(var(--layout-sidebar-min), 1fr) [full-end right-sidebar-end];
  --layout-1-sidebar-left: [full-start sidebar-start left-sidebar-start] minmax(var(--layout-sidebar-min), 1fr) [sidebar-end left-sidebar-end] var(--layout-sidebar-gap) [content-start] minmax(0, var(--layout-content-max)) [full-end content-end] minmax(0, 1fr);
  --radius-normal: .25rem; --radius-full: 9999px;
  --navigation-height: 4.125rem; --breadcrumbs-bar-height: 2rem; --sticky-header-height: calc(var(--navigation-height) + var(--breadcrumbs-bar-height));
  --z-index-sticky-header: 100; --z-index-sidebar-mobile: 90;

  /* icons (Lucide, ISC) */
  --i-chevron-right: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
  --i-chevron-down:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  --i-external:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h6v6m-11 5L21 3m-3 10v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/></svg>");
  --i-info:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 16v-4m0-4h.01'/></svg>");
  --i-alert:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3M12 9v4m0 4h.01'/></svg>");
  --i-flask:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2v6a2 2 0 0 0 .245.96l5.51 10.08A2 2 0 0 1 18 22H6a2 2 0 0 1-1.755-2.96l5.51-10.08A2 2 0 0 0 10 8V2M6.453 15h11.094M8.5 2h7'/></svg>");
  --i-trash:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 6h18m-2 0v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6m3 0V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2m-6 5v6m4-6v6'/></svg>");
  --i-lock:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='11' x='3' y='11' rx='2' ry='2'/><path d='M7 11V7a5 5 0 0 1 10 0v4'/></svg>");
  --i-bulb:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5m0 4h6m-5 4h4'/></svg>");
  --i-check:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  --i-circle-x:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m15 9-6 6m0-6 6 6'/></svg>");
  --i-circle-check:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 12 2 2 4-4'/></svg>");
  --i-circle-slash:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m9 15 6-6'/></svg>");
  --i-asterisk:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 6v12m5.196-9L6.804 15m0-6 10.392 6'/></svg>");
  --i-monitor:       url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='14' x='2' y='3' rx='2'/><path d='M8 21h8m-4-4v4'/></svg>");
  --i-phone:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='14' height='20' x='5' y='2' rx='2' ry='2'/><path d='M12 18h.01'/></svg>");
  --i-menu:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12h16M4 18h16M4 6h16'/></svg>");
  --i-cancel:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6 6 18M6 6l12 12'/></svg>");
  --i-contrast:      url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='M12 18a6 6 0 0 0 0-12z'/></svg>");
  --i-sun:           url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='4'/><path d='M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32 1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41'/></svg>");
  --i-moon:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9'/></svg>");
  --i-filter:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 20a1 1 0 0 0 .553.895l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .517-1.341L21.74 4.67A1 1 0 0 0 21 3H3a1 1 0 0 0-.742 1.67l7.225 7.989A2 2 0 0 1 10 14z'/></svg>");
  --i-search:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m21 21-4.34-4.34'/><circle cx='11' cy='11' r='8'/></svg>");
  --i-panel:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='M9 3v18'/></svg>");
  --i-play:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><path d='m10 8 6 4-6 4z'/></svg>");
  --i-mail:          url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");

  color-scheme: light dark; scrollbar-gutter: stable; scrollbar-color: var(--color-scrollbar-thumb) transparent;
  @media (width <= 1044px) { --navigation-height: 2.9rem; }
}

/* BASE (both trees) */
*, ::before, ::after { box-sizing: border-box; }
html { color: var(--color-text-primary); background-color: var(--color-background-page); font-family: var(--font-family-text); font-size: var(--font-size-normal); line-height: var(--font-line-normal); overflow-wrap: break-word; scroll-behavior: smooth;
  @media (prefers-reduced-motion: reduce) { scroll-behavior: auto; } }
body { margin: 0; }
button, input, select, textarea { font: inherit; }
img { height: auto; max-width: 100%; }
a { color: var(--color-link-normal); }
docs-page, :host { display: block; }
.visually-hidden { border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; }
:target, .heading:target { scroll-margin-top: var(--sticky-header-height); }

/* 🧭 PAGE LAYOUT (in <docs-page>'s shadow root) _______________________________________________________________________ */
.page-layout { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: min-content 1fr min-content; min-height: 100svh; margin-inline: auto; }
.page-layout__header { position: sticky; top: 0; z-index: var(--z-index-sticky-header); }
.a11y-menu { list-style: none; margin: 0; padding: 0; position: absolute; z-index: 1000;
  a { background: var(--color-background-page); color: var(--color-text-primary); left: -100vw; padding: .5rem 1rem; position: absolute; top: 0; white-space: nowrap; &:focus { left: 0; } } }

/* NAVIGATION */
.navigation { background-color: var(--color-background-page); }
.logo { align-items: center; color: var(--color-text-primary); column-gap: .375rem; display: flex; padding: .5rem; text-decoration: none; white-space: nowrap;
  img { display: block; height: 1.5rem; width: auto; }
  .logo__text { font-size: 1.2rem; font-weight: 500; letter-spacing: -.01em; line-height: 1; } .logo__text b { font-weight: 700; }
  .logo__cursor { align-self: end; background-color: light-dark(var(--color-blue-50), var(--color-blue-80)); height: 2px; margin-bottom: .1rem; width: .7rem; } }
.menu__tab { --menu-tab-background: var(--color-background-blue); --menu-tab-text: var(--color-text-blue);
  &[data-section=guides] { --menu-tab-background: var(--color-background-orange); --menu-tab-text: var(--color-text-orange); }
  &[data-section=css]    { --menu-tab-background: var(--color-background-purple); --menu-tab-text: var(--color-text-purple); }
  &[data-section=try]    { --menu-tab-background: var(--color-background-green);  --menu-tab-text: var(--color-text-green); } }
.menu__tab-button { align-items: center; background: none; border: 1px solid transparent; border-bottom: none; color: var(--color-text-primary); column-gap: .125rem; cursor: pointer; display: flex; font: inherit; line-height: 1; margin: 0; padding: .5rem .7rem; white-space: nowrap;
  &::after { background-color: currentcolor; content: ""; height: 1.25rem; margin-right: -4px; mask: var(--i-chevron-down) center / cover no-repeat; width: 1.25rem; }
  &[aria-expanded=true]::after { scale: -1; }
  &:is([aria-expanded=true], :hover) { background-color: var(--menu-tab-background); color: var(--menu-tab-text); } }
.menu__tab-link { color: var(--color-text-primary); display: block; line-height: 1.25rem; padding: .5rem .7rem; text-decoration: underline; white-space: nowrap; &:hover { background-color: var(--menu-tab-background); color: var(--menu-tab-text); } }
.menu__panel { background-color: var(--color-background-page); border: 1px solid var(--color-border-primary);
  &[hidden] { display: none; } }
.menu__panel-title { background-color: var(--menu-tab-background); color: var(--menu-tab-text); margin: 0; padding: .7rem 1.4rem; a { color: inherit; } }
.menu__panel-content { display: grid; gap: 1.4rem; padding: 1.4rem;
  dl { align-content: start; display: grid; margin: 0; row-gap: .8rem; }
  dt { color: var(--color-text-secondary); font-size: .8rem; letter-spacing: .05em; text-transform: uppercase; }
  dd { margin: 0; } ul { display: grid; list-style: none; margin: 0; padding: 0; row-gap: .5rem; }
  a { color: var(--color-text-primary); text-decoration: none; text-decoration-color: var(--color-text-secondary); &:hover { text-decoration: underline; } } }
.mdn-search-button { align-items: center; background-color: var(--color-background-page); border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); color: var(--color-text-primary); cursor: pointer; display: flex; height: 2.125rem; justify-content: space-between; padding: .25rem .25rem .25rem .75rem; width: 5rem;
  &::before { border-bottom: 2px solid light-dark(var(--color-blue-50), var(--color-blue-80)); content: ""; height: 18px; width: 15px; }
  &::after { background-color: currentcolor; content: ""; height: 1.5rem; mask: var(--i-search) center / cover no-repeat; width: 1.5rem; }
  &:hover { background-color: var(--color-background-secondary); } }
.navigation__button { background: none; border: none; color: var(--color-text-primary); cursor: pointer; padding: .7rem;
  &::before { background-color: currentcolor; content: ""; display: block; height: 1.5rem; mask: var(--i-menu) center / cover no-repeat; width: 1.5rem; }
  &[aria-expanded=true]::before { mask-image: var(--i-cancel); } }
@media (width > 1044px) {
  .navigation { align-items: center; column-gap: 1rem; display: grid; grid-template-columns: min-content 1fr min-content; height: var(--navigation-height); justify-items: center; padding-block: .75rem; padding-inline: var(--layout-side-padding); }
  .navigation__logo { justify-self: start; margin-inline-start: -6px; }
  .navigation__popup { display: contents; }
  .navigation__button, .navigation__search[data-view=mobile] { display: none; }
  .menu { align-items: center; display: flex; position: relative; }
  .menu__tab-button[aria-expanded=true] { position: relative; z-index: 2; }
  .menu__panel { left: 0; margin-top: -1px; position: absolute; right: 0; top: 100%; z-index: 1; }
  .menu__panel-content { grid-template-columns: repeat(3, 1fr); } }
@media (width <= 1044px) {
  .navigation { align-items: center; column-gap: .25rem; display: grid; grid-template-columns: 1fr min-content min-content; height: var(--navigation-height); justify-items: start; padding-inline: var(--layout-side-padding); }
  .navigation__popup { display: none; grid-column: 1 / -1; justify-self: stretch; }
  .navigation[data-open=true] { height: auto; inset: 0; overflow-y: auto; position: fixed; z-index: 2; .navigation__popup { display: block; } }
  .navigation__search[data-view=desktop] { display: none; }
  .menu__tab { border-top: 1px solid var(--color-border-primary); display: grid; }
  .menu__tab-button { border: none; column-gap: .25rem; padding: .9rem .7rem; }
  .menu__tab-link { padding: .9rem .7rem; } }

/* BREADCRUMBS BAR */
.breadcrumbs-bar { align-items: center; background-color: var(--color-background-primary); border: 0 solid var(--color-border-primary); border-width: 1px 0; column-gap: 1rem; display: flex; height: var(--breadcrumbs-bar-height); justify-content: end; max-width: 100vw; padding-inline: var(--layout-side-padding); text-wrap: nowrap;
  @media (width < 67rem) { padding-left: 0; }
  @media (width <= 769px) { column-gap: .5rem; padding-left: .5rem; padding-right: 0; } }
.toggle-sidebar { align-items: center; align-self: stretch; background: none; border: none; border-right: 1px solid var(--color-border-primary); color: var(--color-text-primary); cursor: pointer; display: none; padding: 0 .5rem;
  &::before { background-color: currentcolor; content: ""; height: 1.25rem; mask: var(--i-panel) center / cover no-repeat; width: 1.25rem; }
  @media (width < 67rem) { display: flex; } }
.breadcrumbs { align-items: center; display: flex; justify-content: end; list-style: none; margin: 0 auto 0 0; min-width: 0; overflow-x: hidden; padding: 2px;
  li { display: flex; place-items: center; }
  li a { color: var(--color-text-primary); &:not(:hover) { text-decoration: none; } }
  li:not(:last-child)::after { background-color: var(--color-text-secondary); content: ""; height: 1.25rem; margin-inline: .25rem; mask: var(--i-chevron-right) center / cover no-repeat; width: 1.25rem; }
  @media (width <= 769px) and (hover: hover) { li:not(:nth-last-child(-n+2)) { display: none; } } }
.color-theme { display: flex; height: 100%; position: relative; }
.color-theme__button { align-items: center; background: none; border: none; color: inherit; column-gap: .25rem; cursor: pointer; display: flex; padding: 0 .5rem;
  &::before { background-color: currentcolor; content: ""; height: 1.25rem; mask: var(--i-contrast) center / cover no-repeat; width: 1.25rem; }
  &[data-mode=light]::before { mask-image: var(--i-sun); } &[data-mode=dark]::before { mask-image: var(--i-moon); }
  &:is(:hover, :focus-visible, [aria-expanded=true]) { background-color: var(--color-background-secondary); }
  @media (width <= 769px) { .color-theme__text { display: none; } } }
.color-theme__dropdown { background: var(--color-background-primary); border: 1px solid var(--color-border-primary); padding: .75rem; position: absolute; right: 0; top: 100%; width: max-content; z-index: 1; &[hidden] { display: none; } }
.color-theme__list { display: grid; list-style: none; margin: 0; padding: 0; row-gap: .25rem; }
.color-theme__option { align-items: center; background: none; border: none; color: var(--color-text-primary); column-gap: .25rem; cursor: pointer; display: flex; padding: .25rem; width: 100%;
  &::before { background-color: currentcolor; content: ""; height: 1.25rem; mask: var(--i-contrast) center / cover no-repeat; width: 1.25rem; }
  &[data-mode=light]::before { mask-image: var(--i-sun); } &[data-mode=dark]::before { mask-image: var(--i-moon); }
  &:hover, &[data-current] { background-color: var(--color-background-secondary); } }

/* GRID: left sidebar · header + body · TOC */
.layout__2-sidebars-inline { display: grid; grid-template-areas: "left-sidebar . header . right-sidebar" "left-sidebar . body . right-sidebar"; grid-template-columns: var(--layout-2-sidebars); grid-template-rows: min-content 1fr; justify-content: space-between; padding-inline: var(--layout-side-padding);
  .layout__content { display: contents; } }
.layout__header { grid-area: header; }
.layout__body { grid-area: body; min-width: 0; }
.layout__left-sidebar { grid-area: left-sidebar; }
.layout__right-sidebar { grid-area: right-sidebar; }
.layout__left-sidebar, .layout__right-sidebar { max-height: calc(100vh - var(--sticky-header-height)); outline-offset: -2px; overflow-y: auto; position: sticky; top: var(--sticky-header-height); scrollbar-width: thin; }
@media (width >= 67rem) { .layout__left-sidebar { margin-left: -1rem; padding-inline: 1rem; } .layout__right-sidebar { margin-right: -1rem; padding-inline: 1rem; } }
@media (width < 67rem) {
  .layout__2-sidebars-inline { grid-template-areas: "sidebar . header" "sidebar . body"; grid-template-columns: var(--layout-1-sidebar-left); }
  .layout__left-sidebar { background: var(--color-background-page); display: none; z-index: 1; &[data-open] { display: block; } }
  .layout__left-sidebar, .layout__right-sidebar { grid-area: sidebar; margin-left: -1rem; padding-inline: 1rem; } }
@media (width < 50rem) {
  .layout__2-sidebars-inline { display: block; }
  .layout__left-sidebar, .layout__right-sidebar { margin-left: unset; padding-inline: unset; }
  .layout__left-sidebar { inset: 0; padding: 0 1rem; position: fixed; top: var(--sticky-header-height); z-index: var(--z-index-sidebar-mobile); }
  .layout__right-sidebar { max-height: unset; overflow-y: unset; position: unset; top: unset; }
  .reference-layout .reference-layout__toc { --toc-header-font-size: var(--font-size-larger); } }
.reference-layout .reference-layout__body { padding-bottom: 3rem; }
.reference-layout .reference-layout__toc { align-content: start; align-items: start; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; }

/* LEFT SIDEBAR */
.left-sidebar { --sidebar-list-indent: .5rem; overflow-wrap: anywhere; padding-bottom: 3rem;
  ol { list-style: none; margin: 0; padding: 0; }
  ol:not(:has(> li > details)) > li { padding-left: var(--sidebar-list-indent); }
  details { width: 100%; } details[open] > summary { margin-bottom: .5rem; } details[open] > summary::before { rotate: 90deg; }
  summary { align-items: center; cursor: pointer; display: flex; list-style: none; margin-left: -1rem; &::-webkit-details-marker { display: none; }
    &::before { background-color: currentcolor; content: ""; display: inline-block; flex-shrink: 0; height: 1.05rem; margin-left: -.2rem; margin-right: .15rem; mask: var(--i-chevron-right) center / cover no-repeat; width: 1.05rem; }
    &:hover { background-color: var(--color-background-secondary); } &:hover:has(a:hover) { background-color: unset; } }
  li { display: block; padding-left: 1rem; &:not(:last-child) { margin-bottom: .5rem; } }
  li.section { font-weight: var(--font-weight-bold); padding-left: 0; &:not(:first-child) { margin-top: 1em; } }
  a, span:not(.sidebar-filter-mark) { display: inline-block; padding-block: .25rem; vertical-align: middle; }
  a { color: var(--color-text-primary); &:hover { color: var(--color-area-link); } &:not(:hover) { text-decoration: none; } }
  code { font-family: var(--font-family-code); font-size: 1rem; line-height: 1; }
  em { background-color: var(--color-area-background); border-left: 2px solid var(--color-area-highlight-border); display: block; font-style: normal; margin-left: calc((.5rem + 2px) * -1); padding-inline: .5rem; }
  summary > em { margin-left: calc((.5rem + 2px + 1rem) * -1); padding-left: calc(.5rem + 1rem); }
  mark { background-color: var(--color-background-yellow); color: unset; }
  [hidden] { display: none !important; } }
.left-sidebar__header { background: linear-gradient(to bottom, var(--color-background-page) 0 calc(100% - 2rem), transparent 100%); padding: .5rem .5rem 2rem 0; position: sticky; top: 0; z-index: 1; }
.sidebar-filter { align-items: center; display: grid; grid-template-areas: "icon input button"; grid-template-columns: 2.2rem 1fr min-content;
  &::before { background-color: var(--color-text-secondary); content: ""; grid-area: icon; height: 1.25rem; justify-self: center; margin-left: .4rem; mask: var(--i-filter) center / cover no-repeat; position: relative; width: 1.25rem; z-index: 1; }
  input { background: none; border: 1px solid var(--color-border-primary); border-radius: var(--radius-full); color: var(--color-text-primary); grid-area: 1 / 1 / -1 / -1; margin: 0; padding: .3rem 4.2rem .3rem 2.2rem; width: 100%; &::placeholder { color: var(--color-text-secondary); } }
  button { background: none; border: none; color: var(--color-text-secondary); cursor: pointer; grid-area: button; margin-right: .5rem; padding: .25rem; &[hidden] { display: none; } } }

/* TOC */
.reference-toc { width: 100%;
  h2 { font-size: var(--toc-header-font-size, 1.5rem); font-weight: 400; margin: 0; padding: .75em 0; }
  ul { display: grid; list-style: none; margin: 0; padding: 0; } ul ul { padding-left: 1em; }
  a { box-shadow: -2px 0 0 var(--color-border-primary); color: inherit; display: inline-block; margin-left: 2px; padding: .25em .5em;
    &:not(:hover) { text-decoration: none; } &:hover:not([aria-current=true]) { color: var(--color-link-normal); }
    &[aria-current=true] { background-color: var(--color-area-background); box-shadow: -2px 0 0 var(--color-area-highlight-border); } } }

/* 📝 ARTICLE (light DOM; the article footer in the shadow) ______________________________________________________________ */
.reference-layout__header h1 { font-size: var(--font-size-largest); font-weight: 400; line-height: var(--font-line-header); margin: 1rem 0;
  code { font-family: inherit; } code:first-of-type { background-color: var(--color-background-secondary); border-radius: var(--radius-normal); padding: .0625em .125em; } }
.content-section { line-height: var(--font-line-content);
  :is(h2, h3, h4, h5, h6) { font-weight: 400; line-height: var(--font-line-header); margin: 1rem 0 0; }
  h2 { font-size: var(--font-size-larger); } h3 { font-size: var(--font-size-large); } h4 { font-size: var(--font-size-medium); } :is(h5, h6) { font-size: 1rem; font-weight: 600; }
  :is(h2, h3, h4, h5, h6) code { padding: 0 .125em; }
  a:visited { color: var(--color-link-visited); }
  a:not([href^="#"]) { text-decoration: underline; &:hover { text-decoration: none; } }
  a[href^="#"] { text-decoration: none; &:hover { text-decoration: underline; } }
  :is(code, pre) { background-color: var(--color-background-secondary); font-family: var(--font-family-code); }
  code { border-radius: var(--radius-normal); padding: .125em .25em; }
  pre { white-space: pre-wrap; }
  pre:not(.code-example pre) { border: 1px solid var(--color-border-primary); border-radius: var(--radius-normal); overflow: auto; padding: 1rem; }
  kbd { background-color: var(--color-background-primary); border: solid var(--color-border-primary); border-radius: var(--radius-normal); border-width: 1px 1px 2px; color: var(--color-text-secondary); font-family: var(--font-family-code); padding: .0625em .125em; }
  blockquote { border-inline-start: .25rem solid var(--color-border-primary); color: var(--color-text-secondary); margin-inline: 0; > p { padding: 1rem 2rem; } }
  :is(iframe, img) { border: 1px solid var(--color-border-primary); border-radius: var(--radius-normal); }
  :is(.code-example, docs-sample, docs-try, .table-container) { margin: 1rem 0; }
  :is(.code-example, docs-sample) + :is(.code-example, docs-sample) { margin-top: 1.5rem; }
  ul ul, ol ol { margin-block: 0; } }
.heading-anchor { color: inherit !important; &:not(:hover) { text-decoration: none; }
  &::before, &::after { color: var(--color-text-secondary); font-size: .75em; margin-top: .3em; position: absolute; }
  @media not (width <= 769px) { &::before { content: "#"; margin-left: -.8em; padding-right: .8em; } }
  @media (width <= 769px) { padding-right: 1.1ch; &::after { content: "#"; margin-left: .25em; } }
  &:not(:hover, :focus)::before, &:not(:hover, :focus)::after { visibility: hidden; } }
.external { padding-right: 1.125em; position: relative;
  &::after { background-color: currentcolor; content: "\200b" / " (external)"; height: 1em; margin-left: .125em; mask: var(--i-external) center / cover no-repeat; position: absolute; transform: translateY(calc(.5lh - .5em)); width: 1em; } }

/* NOTECARDS */
.notecard, .callout { background-color: var(--color-background-secondary); border-inline-start: 2px solid var(--accent-color, var(--color-text-secondary)); border-radius: .25em; color: var(--color-text-primary); margin-block: 1em; padding-block: 1px; padding-inline: 3em 1em; position: relative; }
.notecard:is(.note, .experimental, .secure) { --accent-color: var(--color-text-blue); background-color: var(--color-background-blue); }
.notecard:is(.warning, .deprecated, .nonstandard) { --accent-color: var(--color-text-red); background-color: var(--color-background-red); }
.notecard.tip { --accent-color: var(--color-text-green); background-color: var(--color-background-green); }
.notecard:is(.note, .warning, .tip, .experimental, .deprecated, .nonstandard, .secure)::before { background-color: var(--accent-color); content: ""; display: block; height: 1em; left: 1em; mask-size: cover; position: absolute; top: 1.45em; width: 1em; }
.notecard.note::before { mask-image: var(--i-info); } .notecard:is(.warning, .nonstandard)::before { mask-image: var(--i-alert); } .notecard.experimental::before { mask-image: var(--i-flask); }
.notecard.deprecated::before { mask-image: var(--i-trash); } .notecard.secure::before { mask-image: var(--i-lock); } .notecard.tip::before { mask-image: var(--i-bulb); }

/* DEFINITION LISTS · BADGES · ICONS */
.content-section dl { dl { border-left: 1px solid var(--color-border-primary); padding-left: 1rem; }
  dd { margin-left: 1rem; } dd p:first-child { margin-top: .5rem; } ul { margin: 1rem 0 2rem; }
  dt a[href^="#"] { color: inherit; &:hover::before { color: var(--color-text-secondary); content: "#"; font-size: .8rem; margin-left: -.9em; margin-top: .3em; position: absolute; } } }
.badge.inline:is(.optional, .readonly, .secure) { border: 1px solid var(--color-border-primary); border-radius: 1em; color: var(--color-text-secondary); font-family: var(--font-family-text); font-size: .8rem; padding: .25em .5em; vertical-align: text-top; white-space: nowrap; }
.icon { --size: var(--icon-size, 1rem); background-color: var(--color-border-secondary); display: inline-block; flex-shrink: 0; height: var(--size); mask-size: cover; vertical-align: middle; width: var(--size); }
.icon:is(.icon-deprecated, .icon-experimental, .icon-nonstandard) { background-color: var(--color-text-secondary); height: 1em; width: 1em; }
.icon-deprecated { mask-image: var(--i-trash); } .icon-experimental { mask-image: var(--i-flask); } .icon-nonstandard { mask-image: var(--i-alert); }

/* TABLES */
.table-container { margin: 0; overflow-x: auto; }
.content-section table { border-collapse: collapse; width: 100%;
  tr { background-color: var(--color-background-primary); } :is(thead tr, tr:nth-of-type(2n)) { background-color: var(--color-background-page); }
  :is(td, th) { border: 1px solid var(--color-border-primary); padding: .5rem .75rem; } th { font-weight: 600; text-align: left; } thead code { white-space: nowrap; }
  &.properties :is(td, th) { border-width: 1px 0; } &.properties th { background-color: initial; font-weight: 600; min-width: 25%; } }

/* CODE EXAMPLES · SYNTAX (Prism colours through the CSS Custom Highlight API: the DOM stays as written) */
.code-example { --border: 1px solid var(--color-border-primary); border: var(--border); border-radius: var(--radius-normal); overflow: hidden;
  .example-header { align-items: center; border-bottom: var(--border); display: flex; gap: .5rem; line-height: 1; min-height: 3.1rem; padding: .5rem .5rem .5rem 1rem; }
  .language-name { margin-right: auto; text-transform: uppercase; }
  pre { background-color: var(--color-background-secondary); display: flex; margin: 0; white-space: pre-wrap; }
  pre code { background-color: initial; border-radius: 0; flex: 1 1 auto; font-family: var(--font-family-code); overflow: auto; padding: 1rem; }
  &:has(pre.hidden) { display: none; } }
::highlight(tok-com), ::highlight(tok-pun) { color: var(--tok-com); }
::highlight(tok-name) { color: var(--tok-name); }
::highlight(tok-val), ::highlight(tok-tag) { color: var(--tok-val); }
::highlight(tok-key) { color: var(--tok-key); }
::highlight(tok-sel) { color: var(--tok-sel); }
.button { align-items: center; background-color: initial; border: 1px solid transparent; border-radius: var(--radius-normal); color: var(--color-text-primary); column-gap: .3125em; cursor: pointer; display: inline-flex; font-family: var(--font-family-text); font-size: .875em; font-weight: 450; justify-content: center; line-height: 1; margin: 0; padding: .5em; text-decoration: none; vertical-align: middle;
  &[data-variant=secondary] { border-color: currentcolor; }
  &:is([data-variant=secondary], [data-variant=plain]):hover { background-color: light-dark(var(--color-gray-80), var(--color-gray-40)); }
  &[data-copied]::before { background-color: currentcolor; content: ""; height: 1.25em; mask: var(--i-check) center / cover no-repeat; width: 1.25em; } }

/* 🧪 LIVE SAMPLES (<docs-sample>) · ✍️ TRY IT (<docs-try>: MDN's tabbed interactive example) ____________________________ */
.code-example iframe { border: none; box-sizing: content-box; display: block; padding: 1rem; width: calc(100% - 2rem); }
.code-example.sample .example-header { justify-content: end; }
docs-sample, docs-try { display: block; }
.template-tabbed { --border: 1px solid var(--color-border-primary); border: var(--border); border-radius: var(--radius-normal); display: grid; grid-template-areas: "header header" "tabs runner"; grid-template-columns: 6fr 4fr; grid-template-rows: max-content 1fr; height: 421px; line-height: var(--font-line-normal); overflow: hidden;
  header { align-items: center; border-bottom: var(--border); display: flex; grid-area: header; justify-content: space-between; padding: .5rem 1rem;
    h4 { font-size: 1rem; font-weight: 400; line-height: 1.1876; margin: 0; } .button { margin-right: -.5rem; } }
  .ix-tabs { display: grid; grid-area: tabs; grid-template-rows: max-content 1fr; min-height: 0; overflow: hidden; }
  .ix-tablist { background: var(--color-background-secondary); border-bottom: var(--border); display: flex; gap: .5rem; overflow-x: auto; }
  .ix-tab { --ix-tab-background-active: light-dark(var(--color-gray-90), var(--color-gray-10)); background: none; border-color: transparent currentcolor; border-style: solid none; border-width: 3px 0; color: var(--color-text-secondary); cursor: pointer; font-size: .8rem; padding: .5em 30px; transition: color .2s, background-color .2s;
    &:is(:hover, :focus-visible) { background-color: var(--ix-tab-background-active); color: var(--color-text-primary); }
    &[aria-selected=true] { background-color: var(--ix-tab-background-active); border-bottom-color: var(--color-border-active); color: var(--color-border-active); } }
  .ix-panel { background: var(--cm-bg); display: grid; grid-template-columns: max-content 1fr; min-height: 0; overflow: auto; position: relative; &[hidden] { display: none; } }
  .cm-gutter { background: var(--cm-gutter-bg); border-right: 1px solid var(--cm-gutter-border); color: var(--cm-gutter); font: .8125rem/1.4 var(--font-family-code); min-width: 2.2em; padding: .25rem 3px .25rem 5px; text-align: right; user-select: none; }
  .cm-code { background: var(--cm-bg); color: var(--cm-text); font: .8125rem/1.4 var(--font-family-code); margin: 0; min-height: 100%; outline: none; padding: .25rem 2px .25rem 6px; tab-size: 2; white-space: pre-wrap; word-break: break-word; }
  .cm-mirror { font: .8125rem/1.4 var(--font-family-code); left: 0; padding: 0 2px 0 6px; position: absolute; top: 0; visibility: hidden; white-space: pre-wrap; word-break: break-word; }
  .output-wrapper { border-left: var(--border); grid-area: runner; overflow: hidden; position: relative;
    h4 { background-color: var(--color-background-secondary); border-bottom-left-radius: var(--radius-normal); color: var(--color-text-secondary); font: 600 .625rem/1.2 var(--font-family-text); margin: 0; padding: .5rem 1.6rem; position: absolute; right: 0; text-transform: uppercase; top: 0; z-index: 2; }
    iframe { border: none; display: block; height: 100%; width: 100%; } }
  @media (width <= 992px) { grid-template-areas: "header" "tabs" "runner"; grid-template-columns: 1fr; grid-template-rows: max-content 1fr 1fr; .output-wrapper { border-left: 0; border-top: var(--border); } } }
::highlight(cm-tag) { color: var(--cm-tag); } ::highlight(cm-attr) { color: var(--cm-attr); } ::highlight(cm-val) { color: var(--cm-val); } ::highlight(cm-key) { color: var(--cm-key); } ::highlight(cm-com) { color: var(--cm-com); }

/* 🌐 SUPPORT BANNER (MDN's baseline-indicator layout; our own wording: WebPDF is a library, not a Baseline web feature) ____ */
.support-indicator { --s-bg: light-dark(oklch(96.99% .032 155.4), oklch(25.02% .0629 154.17)); --s-bg2: light-dark(oklch(0% 0 0 / 6%), oklch(100% 0 0 / 6%)); --s-border: light-dark(oklch(88.91% .0711 154.76), oklch(36.83% .0955 152.69));
  --s-check: light-dark(oklch(47.08% .1276 150.69), oklch(80.78% .1242 155.15)); --s-pill: oklch(50.78% .1388 148.68);
  background: var(--s-bg); border: 1px solid var(--s-border); border-radius: var(--radius-normal); margin: 1rem 0;
  summary { align-items: center; cursor: pointer; display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 1rem calc(.5rem + 1.25rem + 1rem) 1rem 1rem; position: relative; &::-webkit-details-marker { display: none; } }
  .indicator { background-color: var(--s-check); display: block; height: 1.4rem; mask: var(--i-circle-check) center / contain no-repeat; width: 2.5rem; }
  .status-title { font-size: 1rem; line-height: 1.5; margin: 0; padding: .375rem 0; }
  .pill { background: var(--s-pill); border-radius: var(--radius-normal); color: oklch(100% 0 0); font-size: .75rem; font-weight: 500; letter-spacing: .025rem; padding: .15rem .4rem; text-transform: uppercase; }
  .pill:has(+ .browsers) { margin-right: auto; }
  .browsers { display: flex; flex-wrap: wrap; gap: .5rem; }
  .engine { background: var(--s-bg2); border-radius: 2rem; display: flex; gap: .5rem; padding: .5rem .625rem; }
  .browser { display: flex;
    &::before { background-color: var(--color-text-primary); content: ""; display: block; height: 1.25rem; mask: var(--b) center / contain no-repeat; width: 1.25rem; }
    &::after { background-color: var(--s-check); content: ""; display: block; height: 1.25rem; mask: var(--i-check) center / 80% no-repeat; width: 1rem; } }
  .chrome { --b: var(--b-chrome); } .edge { --b: var(--b-edge); } .firefox { --b: var(--b-firefox); } .safari { --b: var(--b-safari); }
  .icon-chevron { background-color: var(--color-text-primary); height: 1.25rem; mask: var(--i-chevron-down) center / contain no-repeat; position: absolute; right: 1rem; width: 1.25rem; }
  &[open] .icon-chevron { rotate: 180deg; }
  .extra { padding: .5rem 1rem 1rem; > p { margin: 0 0 1rem; } a { font-weight: 500; }
    ul { column-gap: 1.5rem; display: flex; flex-wrap: wrap; font-size: .8rem; justify-content: space-between; list-style: none; margin: 0; padding: 0; row-gap: 1rem; } } }

/* 🧮 BROWSER COMPATIBILITY (MDN's BCD table) ___________________________________________________________________________ */
:root {
  --b-chrome: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M49.84 5a45 45 0 0 1 40.32 24.7l-37.25-1.95c-10.55-.6-20.59 5.32-24 15.26L15 21.72A45 45 0 0 1 49.85 5zM12.33 25.34l16.93 33.29C34 68 44.12 73.74 54.56 71.78L43 94.43a45 45 0 0 1-30.67-69.09M92 33.82a45 45 0 0 1-44.51 61.11l20.33-31.28c5.78-8.89 5.68-20.49-1.2-28.52zm-42 1A15.17 15.17 0 1 1 34.83 50 15.15 15.15 0 0 1 50 34.83z'/></svg>");
  --b-edge: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M60.81 93.78c-11 .58-21.31-7.29-24.1-18.29a25.74 25.74 0 0 1 3.36-20.91c.25-.37.41-1 1-.89.44.11.35.65.39 1 1.11 8.36 5.88 14.19 13.12 18 10.3 5.39 20.77 5.12 31.18.13 1-.48 2.12-1.51 3.18-.37s0 2.3-.6 3.28c-5.56 8.52-12.71 15-22.94 17.42-1 .23-2 .4-3 .55-.47.05-1.03.08-1.59.08M51.82 42.22c2.29.48-11.15-10.67-27.69-8.16-5.76.87-19 5.86-17.89 23.66C8.23 89.66 34.15 94.33 42.78 95a1 1 0 0 0 1.08-.92 1 1 0 0 0-.3-.8C39 88.87 26.39 81.09 29.22 65.05c2.54-14.49 12.94-24.87 22.6-22.83M62.11 62.19c3.76 1.3 9.77 2 18.76-.24h.06a19.87 19.87 0 0 0 12.61-15.47C96.08 29.11 81.44 5.8 55.82 5 20.3 4 10.55 27.14 8.69 32.85a.39.39 0 0 0 .61.43c4.13-3.3 20.86-14.69 41.62-1.64C62.68 41 61.21 50.39 59.09 55.43a5 5 0 0 0 2.65 6.62z'/></svg>");
  --b-firefox: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 794 794'><path d='M752.7 266.5c-16.7-40.1-50.5-83.3-77-97.1 21.7 42.3 34.2 84.9 38.8 116.5l.2.7C671.2 178.4 597.6 134.8 537.5 39.8c-3-4.8-6-9.6-9-14.7-1.6-2.6-2.9-5.2-4.3-8-2.5-4.8-4.3-9.8-5.6-15.2 0-.5-.4-.9-.9-1h-.8l-.1.1c-.2 0-.3.1-.3.1s0-.1.1-.2c-85.4 50-120.7 137.6-129.8 193.2-26.4 1.6-52.2 8.2-76 19.4a9.9 9.9 0 0 0-5 12.2c2 5.4 8 8 13.2 5.6 20.8-9.7 43.2-15.6 66.2-17.1l2.3-.3c3.1-.1 6.3-.3 9.5-.3 18.6-.1 37.2 2.5 55 7.7l3.2.9c3 .9 5.8 1.9 8.8 3 2.1.8 4.3 1.6 6.4 2.5 1.7.6 3.4 1.4 5.1 2.1 2.6 1.2 5.2 2.5 7.8 3.8l3.5 1.6c2.6 1.4 5.1 2.8 7.6 4.2 1.6.9 3.1 1.8 4.7 2.9 27.7 17.2 50.9 41 67 69.4-20.4-14.3-57.1-28.6-92.4-22.4 138 69 100.9 306.6-90.4 297.6-17-.6-33.8-3.9-49.8-9.6-3.9-1.4-7.7-3-11.4-4.6-2.1-1-4.4-2-6.5-3.1-46.9-24.2-85.5-70-90.3-125.7 0 0 17.7-66 126.8-66 11.8 0 45.6-32.9 46.2-42.4-.3-3.2-67.1-29.7-93.1-55.3-13.9-13.7-20.4-20.3-26.3-25.3a93 93 0 0 0-10-7.5c-8.7-30.6-9.1-63.1-1.1-93.8-39.4 18-70 46.4-92.3 71.4h-.2c-15.2-19.3-14.1-82.9-13.3-96.1-.1-.9-11.3 5.7-12.8 6.7-13.4 9.7-26 20.4-37.5 32.2a332 332 0 0 0-35.9 43 322.4 322.4 0 0 0-51.4 116.1c-.2.5-3.7 16.2-6.3 35.4-.5 3-.9 6-1.3 9-1 7.3-1.8 14.7-2.2 22l-.1 1.2c-.2 4.3-.5 8.5-.8 12.8v1.9c0 212 171.9 383.9 383.9 383.9 189.8 0 347.5-137.9 378.4-318.9.6-4.9 1.1-9.9 1.7-14.8 7.7-65.8-.8-135.1-25-192.9m-553-71.3c.3 0 .2 0 0 0m92.5 46.2c.3 0 .1 0 0 0'/></svg>");
  --b-opera: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M80 16.45a32.35 32.35 0 0 0-18-5.52c-10.69 0-20.14 5.47-26.77 13.71A40.77 40.77 0 0 0 26.75 49v2.1a40.74 40.74 0 0 0 8.43 24.31C41.81 83.6 51.26 89.07 62 89.07a32.4 32.4 0 0 0 18-5.52A44.77 44.77 0 0 1 50 95h-2.16A45 45 0 0 1 50 5h.15A44.92 44.92 0 0 1 80 16.45M95 50a44.87 44.87 0 0 1-14.57 33.1 21.4 21.4 0 0 1-11.15 3.16A22 22 0 0 1 56.48 82c10.19-3.72 17.73-16.62 17.73-32s-7.48-28.28-17.68-32a22.15 22.15 0 0 1 12.76-4.17 21.6 21.6 0 0 1 11.35 3.27A44.87 44.87 0 0 1 95 50'/></svg>");
  --b-safari: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M52.66 49.85a3 3 0 0 1-2.91 3.21 3.06 3.06 0 1 1 2.64-4.37 3 3 0 0 1 .27 1.16m.75 2.91L71 23.58C68.63 25.79 46.63 46 46 47.09L28.5 76.22c2.31-2.16 24.36-22.5 24.91-23.46M85.91 50a35.8 35.8 0 0 1-5.22 18.63 24 24 0 0 0-3-1.75.66.66 0 0 0-.65.65c0 .65 2.36 1.86 3 2.21a36.1 36.1 0 0 1-21.45 15.12l-.8-3.37c-.06-.45-.36-.5-.76-.5s-.55.5-.5.75l.81 3.41c-2.41.5-4.87.76-7.34.76a36.05 36.05 0 0 1-18.68-5.28A29 29 0 0 0 33.53 77a.66.66 0 0 0-.65-.65c-.7 0-2.21 3-2.66 3.62a36.13 36.13 0 0 1-15.17-21.7l3.47-.75a.66.66 0 0 0 .5-.75c0-.35-.5-.56-.81-.5L14.8 57a35.7 35.7 0 0 1 4.77-26c1.05.76 2.15 1.42 3.31 2a.63.63 0 0 0 .66-.6c0-.71-2.66-2.06-3.27-2.46A36.18 36.18 0 0 1 42 15l.75 3.37a.66.66 0 0 0 .75.5c.35 0 .56-.5.5-.81l-.75-3.31q3.345-.645 6.75-.66a36 36 0 0 1 19 5.47 19 19 0 0 0-2 3.27.62.62 0 0 0 .6.65c.71 0 2.06-2.61 2.41-3.22a35.94 35.94 0 0 1 14.9 21.45l-2.82.6c-.45.1-.5.4-.5.8s.5.56.76.51l2.86-.62c.46 2.3.7 4.65.7 7m4.27 0a40.18 40.18 0 1 0-80.36 0 40.18 40.18 0 0 0 80.36 0M95 50a45 45 0 1 1-90 0 45 45 0 0 1 90 0'/></svg>");
  --b-samsung: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M30.84 5A25.93 25.93 0 0 0 5 30.87v38.26A25.93 25.93 0 0 0 30.84 95h38.32A25.91 25.91 0 0 0 95 69.19V30.87A25.93 25.93 0 0 0 69.16 5zm17.78 15.32a29.66 29.66 0 0 1 30.95 27.75c5.08 4 7.72 8.3 6.75 11.9s-5.4 5.9-11.89 6.8a50 50 0 0 1-5.66.46 84 84 0 0 1-22.63-3.09 82.3 82.3 0 0 1-21.08-8.87H25a39 39 0 0 1-4.63-3.2c-5.14-4.050-7.71-8.3-6.75-11.9s5.4-5.91 11.76-6.81a29.66 29.66 0 0 1 23.24-13.04m-.82 4.27A25.5 25.5 0 0 0 24.41 50c5.27 3.54 13.3 7.07 22.63 9.58 9.63 2.56 18.54 3.6 24.96 3.15a25.27 25.27 0 0 0 3.41-12.53V50a25.5 25.5 0 0 0-27.6-25.41ZM23.26 37.14c-3 .71-5 2-5.4 3.73s.51 3.79 2.63 5.92a30.3 30.3 0 0 1 2.58-9.2zm56.13 15.7-.06.38a26.7 26.7 0 0 1-2.2 8.66c2.540-.77 4.13-1.92 4.58-3.51.45-1.6-.39-3.54-2.32-5.53m-58.02 5.07a49.5 49.5 0 0 0 5.79 3.47A25.42 25.42 0 0 0 64 71.28c2.39 0 4.71 0 6.77-.19a29.63 29.63 0 0 1-49.4-13.18'/></svg>");
  --b-webview: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M73.01 63.92a4.16 4.16 0 1 1 4.17-4.16A4.17 4.17 0 0 1 73 63.92m-46.02 0a4.16 4.16 0 1 1 4.16-4.16A4.17 4.17 0 0 1 27 63.92m47.5-25.08 8.32-14.41a1.73 1.73 0 1 0-3-1.74L71.4 37.3A51.4 51.4 0 0 0 50 32.71a51.4 51.4 0 0 0-21.4 4.58l-8.43-14.6a1.73 1.73 0 1 0-3 1.73l8.32 14.42A49.14 49.14 0 0 0 0 78.17h100a49.14 49.14 0 0 0-25.5-39.33'/></svg>");
}
.bc-toolbar { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-bottom: .5rem; a { font-size: .8rem; } }
.bc-table { border: 1px solid var(--color-border-primary); border-collapse: separate; border-radius: var(--radius-normal); border-spacing: 0; margin: 0; table-layout: fixed; width: 100%;
  :is(td, th) { border: 0 solid var(--color-border-primary); border-bottom-width: 1px; border-left-width: 1px; font-size: .8rem; font-weight: 500; padding: .4rem; }
  th { background: var(--color-background-primary); vertical-align: bottom; }
  thead { line-height: 1; white-space: nowrap; }
  tr:last-child > * { border-bottom-width: 0; }
  :is(tr, tbody tr:nth-of-type(2n)) { background: var(--color-background-page); }
  tbody tr { height: 3rem; } tbody th { border-left-width: 0; text-align: left; vertical-align: middle; }
  .bc-platforms td, .bc-browsers td, tbody th, .bc-feature-col { width: 25%; }
  .bc-platform { text-align: center; .icon { --size: 1rem; } }
  .bc-browser { text-align: center; }
  .bc-head-txt-label { display: inline-block; line-height: 1; margin-bottom: .25rem; text-orientation: sideways; transform: rotate(180deg); white-space: nowrap; writing-mode: vertical-rl; }
  .bc-head-icon { --size: 1rem; display: block; margin: 0 auto; mask-image: var(--b); }
  .bc-support { padding: .9rem .25rem .5rem; text-align: center; vertical-align: top;
    &::before { background-color: var(--color-border-secondary); content: ""; display: block; height: calc(1rem + 1px); margin: 0 auto .25rem; mask: var(--i-check) center / cover no-repeat; width: calc(1rem + 1px); }
    .icon-footnote { --size: .8rem; display: block; margin: .2rem auto 0; } }
  .bc-supports-yes     { color: var(--color-text-green); }
  .bc-supports-partial { color: var(--color-text-yellow); &::before { background-color: var(--color-text-yellow); mask-image: var(--i-circle-slash); } }
  .bc-supports-no      { color: var(--color-text-red);    &::before { background-color: var(--color-text-red);    mask-image: var(--i-circle-x); } } }
.icon-desktop { mask-image: var(--i-monitor); } .icon-mobile { mask-image: var(--i-phone); }
.icon-yes { mask-image: var(--i-check); } .icon-no { background-color: var(--color-text-red); mask-image: var(--i-circle-x); } .icon-partial { background-color: var(--color-text-yellow); mask-image: var(--i-circle-slash); } .icon-footnote { mask-image: var(--i-asterisk); }
.b-chrome { --b: var(--b-chrome); } .b-edge { --b: var(--b-edge); } .b-firefox { --b: var(--b-firefox); } .b-opera { --b: var(--b-opera); } .b-safari { --b: var(--b-safari); } .b-samsung { --b: var(--b-samsung); } .b-webview { --b: var(--b-webview); }
.bc-notes { color: var(--color-text-secondary); font-size: .8rem; margin: .25rem 0 0; }
.bc-legend { .bc-legend-tip { font-size: .8rem; font-style: italic; margin: 0 0 1rem; }
  dl { display: flex; flex-wrap: wrap; font-size: .8rem; gap: 1.5rem; margin: 1rem 0 2rem; } div { align-items: center; display: flex; gap: .5rem; } dd { margin: 0; } }

/* 🧬 INHERITANCE DIAGRAM (MDN's inline SVG; its light colours, and dark ones of our own) */
.inheritance-diagram { display: block; height: auto; margin: 1rem 0; max-width: 100%;
  rect           { fill: light-dark(oklch(100% 0 0), var(--color-background-primary)); stroke: light-dark(oklch(89.27% .0137 240.97), var(--color-border-primary)); stroke-width: 2px; }
  rect.current   { fill: light-dark(oklch(97.41% .0035 219.53), var(--color-background-secondary)); }
  text           { fill: light-dark(oklch(42.48% .0083 276.98), var(--color-text-secondary)); font: 10px var(--font-family-text); text-anchor: middle; }
  line, polyline { stroke: light-dark(oklch(89.27% .0137 240.97), var(--color-border-primary)); } polyline { fill: light-dark(oklch(100% 0 0), var(--color-background-page)); }
  a              { text-decoration: none; } a:hover rect { stroke: var(--color-border-active); } }

/* 🔎 SEARCH */
.search-modal { background: var(--color-background-page); border: 1px solid var(--color-border-primary); border-radius: var(--radius-normal); box-shadow: 0 8px 24px oklch(0% 0 0 / .2); color: var(--color-text-primary); margin: 4rem auto auto; max-width: 40rem; padding: 0; width: calc(100% - 2rem);
  &::backdrop { background: oklch(0% 0 0 / .4); } }
.search-modal__form { align-items: center; border-bottom: 1px solid var(--color-border-primary); display: flex; gap: .5rem; padding: .75rem 1rem;
  &::before { background-color: var(--color-text-secondary); content: ""; flex: none; height: 1.25rem; mask: var(--i-search) center / cover no-repeat; width: 1.25rem; } }
.search-modal__input { background: none; border: none; color: inherit; flex: 1; font-size: 1.1rem; outline: none; }
.search-modal__close { background: var(--color-background-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-normal); color: var(--color-text-secondary); cursor: pointer; font-size: .75rem; padding: .1rem .4rem; }
.search-modal__results { list-style: none; margin: 0; max-height: 60vh; overflow: auto; padding: .5rem;
  a { align-items: baseline; border-radius: var(--radius-normal); color: var(--color-text-primary); display: flex; gap: .25rem; padding: .5rem .75rem; text-decoration: none;
    &:is(:hover, :focus-visible) { background: var(--color-background-blue); outline: none; }
    span { color: var(--color-text-secondary); font-family: var(--font-family-code); } code { font-family: var(--font-family-code); }
    small { color: var(--color-text-secondary); margin-left: auto; } }
  li:first-child a { background: var(--color-background-secondary); } }

/* 🦶 ARTICLE FOOTER · SITE FOOTER */
.article-footer { background-color: var(--color-background-primary); border: 1px solid var(--color-border-primary); border-radius: var(--radius-normal); padding: 1rem;
  @media (width <= 769px) { margin: 0 3rem 3rem; } @media (width <= 426px) { margin-inline: 1rem; } }
.content-section.article-footer { margin: 2rem 0; }
.article-footer__inner { margin: 0 auto; max-width: 1440px; width: 100%; h2 { margin: 0 0 .5rem; padding: 0; } }
.article-footer__ask { margin: 0; } .article-footer__last-modified { margin: 2rem 0 0; }
.footer { background-color: var(--color-background-primary); border-top: 1px solid var(--color-border-primary); color: var(--color-text-secondary); line-height: var(--font-line-normal); }
.footer__mdn { align-items: start; column-gap: 1rem; display: grid; grid-template-areas: "intro" "socials" "links"; padding-block: 2rem 1.5rem; padding-inline: var(--layout-side-padding); row-gap: 2rem;
  @media (width > 480px)  { grid-template-areas: "intro intro" "socials socials" "links links"; grid-template-columns: 1fr 1fr; }
  @media (width > 640px)  { grid-template-areas: "intro intro intro" "socials socials socials" "links links links"; grid-template-columns: 1fr 1fr 1fr; }
  @media (width > 1000px) { grid-template-areas: "intro links links links" "socials links links links"; grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer__logo { color: var(--color-text-secondary); padding: 0; &:hover { color: var(--color-text-primary); } }
.footer__intro { display: grid; grid-area: intro; justify-items: start; row-gap: 1rem; p { margin: 0; } }
.footer__socials { column-gap: .75rem; display: flex; grid-area: socials; list-style: none; margin: 0; padding: 0;
  a { color: var(--color-text-secondary); display: block; &:hover { color: var(--color-text-primary); }
    &::before { background-color: currentcolor; content: ""; display: block; height: 1.5rem; mask: var(--i-mail) center / cover no-repeat; width: 1.5rem; } } }
.footer__links { display: grid; margin: 0; row-gap: .75rem; dt { font-size: 1.25rem; } dd, ul { display: contents; margin: 0; } ul { list-style: none; padding: 0; } a { color: inherit; &:hover { color: var(--color-text-primary); } }
  @media (width > 840px) { grid-row-end: span 2; } }
.footer__mozilla { align-items: start; border-block-start: 1px solid var(--color-border-primary); column-gap: 1.5rem; display: grid; padding-block: 1.5rem; padding-inline: var(--layout-side-padding); row-gap: 1rem;
  p { line-height: 1.5; margin: 0; } a { color: inherit; } }