debugCSS.css

/***********/
/* LICENSE */
/***********/

/* Copyrights for code authored by Yahoo! Inc. is licensed under the following
 terms:
 MIT License
 Copyright (c) 2011 Yahoo! Inc. All Rights Reserved.
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to
 deal in the Software without restriction, including without limitation the
 rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
 sell copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:
 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.
 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
 IN THE SOFTWARE.
*/

/*****************/
/* WHAT IS THIS? */
/*****************/

/* debugCSS is meant to be loaded on an existing page to highlight malformed,
 inaccessible or legacy HTML that is still worth fixing in modern codebases.
 The goal is signal over nostalgia: prefer checks that are actionable on
 current browser engines and app stacks.

 Error: #ff6b6b
 Warning: #ffd166
 Notice: #8fd694
*/

/************/
/* SETTINGS */
/************/

:root {
 --debugcss-error: #ff6b6b;
 --debugcss-warning: #ffd166;
 --debugcss-notice: #8fd694;
 --debugcss-text: #111111;
 --debugcss-panel: rgba(17, 24, 39, 0.94);
 --debugcss-panel-text: #f9fafb;
 --debugcss-outline-width: 3px;
 --debugcss-font: 600 12px/1.35 ui-sans-serif, system-ui, -apple-system,
 BlinkMacSystemFont, "Segoe UI", sans-serif;
 --debugcss-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
 --debugcss-z: 2147483646;
 --debugcss-chip-opacity: 1;
 --debugcss-chip-transition: opacity 140ms ease, transform 140ms ease;
 --debugcss-alpha-bg: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAgMAAAAOFJJnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRF/+Pj2tra2dnZ4Z9gVgAAAHxJREFUGBkFwUGKxDAQBDB9shqcuw2T/3TAc5+A95UruZv+IoNqvEWCavLFDB2M5vPgGpyFNOcB80cPJMxgHhLkQ4IxuBorpDA3Y+MazEfC2+gwgnOxHnSogb15F1JcGxmkcBb1AwlVqCIHadZGwt+NGmQhD1lIuB+scOUfnCk3BP0u5SsAAAAASUVORK5CYII=);
}

html[data-debugcss-compact] {
 --debugcss-chip-opacity: 0;
}

html[data-debugcss-compact]:is(:not([lang]), [lang=""]) {
 --debugcss-chip-opacity: 1;
}

html {
 counter-reset: debugcss-error debugcss-warning debugcss-notice debugcss-a11y
 debugcss-structure debugcss-legacy debugcss-security;
}

/*****************/
/* SHARED CHROME */
/*****************/

:where(
 html:not([lang]),
 html[lang=""],
 img:not([alt]),
 img:is(:not([src]), [src=""], [src="#"]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 a a,
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i]),
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(h1, h2, h3, h4, h5, h6):empty,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 center,
 font,
 marquee,
 blink,
 table[summary],
 table thead td,
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing],
 [id=""],
 [for=""],
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 [accesskey],
 input[type="radio"]:not([name]),
 form button:not([type]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
) {
 outline: var(--debugcss-outline-width) solid var(--debugcss-tone) !important;
 outline-offset: 2px !important;
 position: relative;
}

:where(
 html:not([lang]),
 html[lang=""],
 img:not([alt]),
 img:is(:not([src]), [src=""], [src="#"]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 a a,
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i]),
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(h1, h2, h3, h4, h5, h6):empty,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 center,
 font,
 marquee,
 blink,
 table[summary],
 table thead td,
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing],
 [id=""],
 [for=""],
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 [accesskey],
 input[type="radio"]:not([name]),
 form button:not([type]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
)::after {
 all: initial !important;
 background: var(--debugcss-tone) !important;
 border: 1px solid rgba(17, 24, 39, 0.8) !important;
 border-radius: 4px !important;
 box-shadow: var(--debugcss-shadow) !important;
 box-sizing: border-box !important;
 color: var(--debugcss-text) !important;
 content: var(--debugcss-message) !important;
 display: block !important;
 font: var(--debugcss-font) !important;
 left: 0 !important;
 max-width: min(28rem, calc(100vw - 1rem)) !important;
 opacity: var(--debugcss-chip-opacity) !important;
 padding: 0.22rem 0.45rem !important;
 pointer-events: none !important;
 position: absolute !important;
 text-transform: none !important;
 top: 0 !important;
 transform: translate(0.25rem, 0.25rem) !important;
 transition: var(--debugcss-chip-transition) !important;
 white-space: normal !important;
 z-index: var(--debugcss-z) !important;
}

html[data-debugcss-compact] :where(
 img:not([alt]),
 img:is(:not([src]), [src=""], [src="#"]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 a a,
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i]),
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(h1, h2, h3, h4, h5, h6):empty,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 center,
 font,
 marquee,
 blink,
 table[summary],
 table thead td,
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing],
 [id=""],
 [for=""],
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 [accesskey],
 input[type="radio"]:not([name]),
 form button:not([type]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
 ):is(:hover, :focus, :focus-within) {
 --debugcss-chip-opacity: 1;
}

/********************/
/* SEVERITY BUCKETS */
/********************/

:where(
 table[summary],
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing],
 [id=""],
 [for=""],
 [accesskey],
 form button:not([type]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description])
) {
 --debugcss-tone: var(--debugcss-notice) !important;
 counter-increment: debugcss-notice debugcss-a11y !important;
}

:where(
 [id=""],
 [for=""],
 form button:not([type])
) {
 --debugcss-tone: var(--debugcss-notice) !important;
 counter-increment: debugcss-notice debugcss-structure !important;
}

:where(
 table[summary],
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing]
) {
 --debugcss-tone: var(--debugcss-notice) !important;
 counter-increment: debugcss-notice debugcss-legacy !important;
}

:where(
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
) {
 --debugcss-tone: var(--debugcss-warning) !important;
 counter-increment: debugcss-warning debugcss-a11y !important;
}

:where(
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(h1, h2, h3, h4, h5, h6):empty,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 table thead td
) {
 --debugcss-tone: var(--debugcss-warning) !important;
 counter-increment: debugcss-warning debugcss-structure !important;
}

:where(
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i])
) {
 --debugcss-tone: var(--debugcss-warning) !important;
 counter-increment: debugcss-warning debugcss-security !important;
}

:where(
 center,
 font,
 marquee,
 blink
) {
 --debugcss-tone: var(--debugcss-warning) !important;
 counter-increment: debugcss-warning debugcss-legacy !important;
}

:where(
 html:not([lang]),
 html[lang=""],
 img:not([alt]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 input[type="radio"]:not([name])
) {
 --debugcss-tone: var(--debugcss-error) !important;
 counter-increment: debugcss-error debugcss-a11y !important;
}

:where(
 img:is(:not([src]), [src=""], [src="#"]),
 a a
) {
 --debugcss-tone: var(--debugcss-error) !important;
 counter-increment: debugcss-error debugcss-structure !important;
}

/*******************/
/* ERROR MESSAGES */
/*******************/

html:not([lang]),
html[lang=""] {
 --debugcss-message: "Add a non-empty lang attribute to <html>." !important;
}

img:not([alt]) {
 --debugcss-message: "Image is missing alt text." !important;
}

img:is(:not([src]), [src=""], [src="#"]) {
 --debugcss-message: "Image has a missing or placeholder src." !important;
}

input[type="image"]:is(:not([alt]), [alt=""]) {
 --debugcss-message: "Image button needs meaningful alt text." !important;
}

area[href]:is(:not([alt]), [alt=""]) {
 --debugcss-message: "Image map area needs alt text." !important;
}

a a {
 --debugcss-message: "Nested links are invalid markup." !important;
}

button:empty:not([aria-label]):not([aria-labelledby]) {
 --debugcss-message: "Empty button has no accessible name." !important;
}

a[href]:empty:not([aria-label]):not([aria-labelledby]) {
 --debugcss-message: "Empty link has no accessible name." !important;
}

:is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"] {
 --debugcss-message: "Focusable element is hidden from assistive tech with aria-hidden." !important;
}

[aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ) {
 --debugcss-message: "Focusable content sits inside an aria-hidden subtree." !important;
}

[role="slider"]:not([aria-valuemin]),
[role="slider"]:not([aria-valuemax]),
[role="slider"]:not([aria-valuenow]) {
 --debugcss-message: "Slider role is missing a required aria-value attribute." !important;
}

[role="checkbox"]:not([aria-checked]),
[role="radio"]:not([aria-checked]),
[role="switch"]:not([aria-checked]) {
 --debugcss-message: "Custom checkable control is missing aria-checked." !important;
}

[role="tab"]:not([aria-selected]) {
 --debugcss-message: "Tab role is missing aria-selected." !important;
}

[role="combobox"]:not([aria-expanded]) {
 --debugcss-message: "Combobox role is missing aria-expanded." !important;
}

[role="dialog"]:not([aria-label]):not([aria-labelledby]) {
 --debugcss-message: "Dialog role needs an accessible name." !important;
}

[role="progressbar"]:not([aria-valuenow]) {
 --debugcss-message: "Progressbar role is missing aria-valuenow." !important;
}

input[type="radio"]:not([name]) {
 --debugcss-message: "Radio input needs a name to participate in a group." !important;
}

/*********************/
/* WARNING MESSAGES */
/*********************/

[aria-label=""],
[aria-labelledby=""],
[aria-describedby=""] {
 --debugcss-message: "ARIA naming or description attribute is empty." !important;
}

iframe:not([title]):not([aria-label]):not([aria-labelledby]),
iframe[title=""] {
 --debugcss-message: "Iframe needs a non-empty accessible name." !important;
}

a[href^="javascript:" i] {
 --debugcss-message: "javascript: URLs are fragile and inaccessible." !important;
}

a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i]) {
 --debugcss-message: "target=\"_blank\" should include rel=\"noopener\" or rel=\"noreferrer\"." !important;
}

a:not([href]),
a[href=""],
a[href="#"] {
 --debugcss-message: "Anchor has no real destination." !important;
}

main ~ main {
 --debugcss-message: "Only one <main> landmark should appear per document." !important;
}

:is(h1, h2, h3, h4, h5, h6):empty {
 --debugcss-message: "Heading is empty." !important;
}

:is(ul, ol) > :not(li) {
 --debugcss-message: "Only <li> elements belong directly inside lists." !important;
}

dl > :not(dt):not(dd) {
 --debugcss-message: "Only <dt> and <dd> belong directly inside <dl>." !important;
}

center,
font,
marquee,
blink {
 --debugcss-message: "Deprecated element found." !important;
}

table thead td {
 --debugcss-message: "Header cells in <thead> should usually be <th>." !important;
}

[role="button"]:not(button):not(input):not(a[href]):not([tabindex]) {
 --debugcss-message: "role=\"button\" needs keyboard focus support." !important;
}

[tabindex]:not([tabindex="-1"]):not([tabindex="0"]) {
 --debugcss-message: "Positive tabindex can create a confusing focus order." !important;
}

summary:empty {
 --debugcss-message: "<summary> is empty." !important;
}

caption:empty {
 --debugcss-message: "<caption> is empty." !important;
}

video[autoplay]:not([muted]) {
 --debugcss-message: "Autoplaying video should usually be muted." !important;
}

audio[autoplay] {
 --debugcss-message: "Autoplaying audio is a strong accessibility smell." !important;
}

/********************/
/* NOTICE MESSAGES */
/********************/

table[summary] {
 --debugcss-message: "table[summary] is obsolete in modern HTML." !important;
}

table th:not([scope]):not([headers]):not([id]) {
 --debugcss-message: "Table header is missing scope or an explicit header relationship." !important;
}

img[alt=""] {
 --debugcss-message: "Image has empty alt text. Verify that it is decorative." !important;
}

img[role="presentation"][alt]:not([alt=""]) {
 --debugcss-message: "Presentational images should usually use alt=\"\"." !important;
}

:is(table, td, th, img)[align],
:is(table, td, th)[bgcolor],
:is(table, td, th)[valign],
table[border],
table[cellpadding],
table[cellspacing] {
 --debugcss-message: "Legacy presentational HTML attribute found." !important;
}

[id=""] {
 --debugcss-message: "id attribute is present but empty." !important;
}

[for=""] {
 --debugcss-message: "for attribute is present but empty." !important;
}

[accesskey] {
 --debugcss-message: "accesskey can create hard-to-discover keyboard conflicts." !important;
}

form button:not([type]) {
 --debugcss-message: "Button inside a form should usually declare its type." !important;
}

input[pattern]:not([title]):not([aria-describedby]):not([aria-description]) {
 --debugcss-message: "Pattern-constrained input should explain the expected format." !important;
}

/**************************/
/* MODERN SELECTOR CHECKS */
/**************************/

@supports selector(:has(*)) {
 :where(
 html:not(:has(head > title)),
 html:not(:has(head > meta[charset])),
 html:not(:has(main, [role="main"])),
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 details:not(:has(> summary)),
 fieldset:not(:has(> legend)),
 table:not([role="presentation"]):not(:has(> caption)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"])),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 ) {
 outline: var(--debugcss-outline-width) solid var(--debugcss-tone) !important;
 outline-offset: 2px !important;
 position: relative;
 }

 :where(
 html:not(:has(head > title)),
 html:not(:has(head > meta[charset])),
 html:not(:has(main, [role="main"])),
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 details:not(:has(> summary)),
 fieldset:not(:has(> legend)),
 table:not([role="presentation"]):not(:has(> caption)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"])),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 )::after {
 all: initial !important;
 background: var(--debugcss-tone) !important;
 border: 1px solid rgba(17, 24, 39, 0.8) !important;
 border-radius: 4px !important;
 box-shadow: var(--debugcss-shadow) !important;
 box-sizing: border-box !important;
 color: var(--debugcss-text) !important;
 content: var(--debugcss-message) !important;
 display: block !important;
 font: var(--debugcss-font) !important;
 left: 0 !important;
 max-width: min(28rem, calc(100vw - 1rem)) !important;
 opacity: var(--debugcss-chip-opacity) !important;
 padding: 0.22rem 0.45rem !important;
 pointer-events: none !important;
 position: absolute !important;
 top: 0 !important;
 transform: translate(0.25rem, 0.25rem) !important;
 transition: var(--debugcss-chip-transition) !important;
 white-space: normal !important;
 z-index: var(--debugcss-z) !important;
 }

 html[data-debugcss-compact] :where(
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 details:not(:has(> summary)),
 fieldset:not(:has(> legend)),
 table:not([role="presentation"]):not(:has(> caption)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"])),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 ):is(:hover, :focus, :focus-within) {
 --debugcss-chip-opacity: 1;
 }

 :where(
 table:not([role="presentation"]):not(:has(> caption)),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 ) {
 --debugcss-tone: var(--debugcss-notice) !important;
 counter-increment: debugcss-notice debugcss-a11y !important;
 }

 html:not(:has(head > meta[charset])) {
 --debugcss-tone: var(--debugcss-notice) !important;
 counter-increment: debugcss-notice debugcss-structure !important;
 }

 :where(
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 details:not(:has(> summary)),
 fieldset:not(:has(> legend)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"]))
 ) {
 --debugcss-tone: var(--debugcss-warning) !important;
 counter-increment: debugcss-warning debugcss-a11y !important;
 }

 :where(
 html:not(:has(head > title)),
 html:not(:has(main, [role="main"])),
 details:not(:has(> summary))
 ) {
 --debugcss-tone: var(--debugcss-warning) !important;
 counter-increment: debugcss-warning debugcss-structure !important;
 }

 html:not(:has(head > title)) {
 --debugcss-message: "Document is missing a <title> element." !important;
 }

 html:not(:has(head > meta[charset])) {
 --debugcss-message: "Document is missing a declared character encoding." !important;
 }

 html:not(:has(main, [role="main"])) {
 --debugcss-message: "Document is missing a main landmark." !important;
 }

 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))) {
 --debugcss-message: "Label has no for attribute and does not wrap a control." !important;
 }

 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)) {
 --debugcss-message: "Form control has no id and no obvious built-in label path." !important;
 }

 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]) {
 --debugcss-message: "role=\"img\" element needs an accessible name." !important;
 }

 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)) {
 --debugcss-message: "Inline SVG used as an image needs a name or <title>." !important;
 }

 svg[role="img"]:has(> title:empty) {
 --debugcss-message: "Inline SVG title exists but is empty." !important;
 }

 details:not(:has(> summary)) {
 --debugcss-message: "<details> should contain a <summary>." !important;
 }

 fieldset:not(:has(> legend)) {
 --debugcss-message: "Fieldset is missing a legend." !important;
 }

 table:not([role="presentation"]):not(:has(> caption)) {
 --debugcss-message: "Data table has no caption." !important;
 }

 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"])) {
 --debugcss-message: "Video with controls has no captions or subtitles track." !important;
 }

 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6))) {
 --debugcss-message: "Section has no heading or accessible name." !important;
 }
}

/********************/
/* VISUAL FILTERING */
/********************/

html[data-debugcss-mode]:not([data-debugcss-mode~="a11y"]) :where(
 img:not([alt]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 :is(h1, h2, h3, h4, h5, h6):empty,
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 [accesskey],
 input[type="radio"]:not([name]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="a11y"]) :where(
 img:not([alt]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 :is(h1, h2, h3, h4, h5, h6):empty,
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 [accesskey],
 input[type="radio"]:not([name]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
 )::after {
 content: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="structure"]) :where(
 img:is(:not([src]), [src=""], [src="#"]),
 a a,
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 table thead td,
 [id=""],
 [for=""],
 form button:not([type])
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="structure"]) :where(
 img:is(:not([src]), [src=""], [src="#"]),
 a a,
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 table thead td,
 [id=""],
 [for=""],
 form button:not([type])
 )::after {
 content: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="legacy"]) :where(
 center,
 font,
 marquee,
 blink,
 table[summary],
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing]
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="legacy"]) :where(
 center,
 font,
 marquee,
 blink,
 table[summary],
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing]
 )::after {
 content: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="security"]) :where(
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i])
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-mode]:not([data-debugcss-mode~="security"]) :where(
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i])
 )::after {
 content: none !important;
}

html[data-debugcss-level]:not([data-debugcss-level~="error"]) :where(
 img:not([alt]),
 img:is(:not([src]), [src=""], [src="#"]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 a a,
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 input[type="radio"]:not([name])
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-level]:not([data-debugcss-level~="error"]) :where(
 img:not([alt]),
 img:is(:not([src]), [src=""], [src="#"]),
 input[type="image"]:is(:not([alt]), [alt=""]),
 area[href]:is(:not([alt]), [alt=""]),
 a a,
 button:empty:not([aria-label]):not([aria-labelledby]),
 a[href]:empty:not([aria-label]):not([aria-labelledby]),
 :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 )[aria-hidden="true"],
 [aria-hidden="true"] :is(
 a[href],
 button,
 input:not([type="hidden"]),
 select,
 textarea,
 summary,
 iframe,
 [tabindex]:not([tabindex="-1"]),
 audio[controls],
 video[controls],
 [contenteditable="true"],
 [contenteditable="plaintext-only"]
 ),
 [role="slider"]:not([aria-valuemin]),
 [role="slider"]:not([aria-valuemax]),
 [role="slider"]:not([aria-valuenow]),
 [role="checkbox"]:not([aria-checked]),
 [role="radio"]:not([aria-checked]),
 [role="switch"]:not([aria-checked]),
 [role="tab"]:not([aria-selected]),
 [role="combobox"]:not([aria-expanded]),
 [role="dialog"]:not([aria-label]):not([aria-labelledby]),
 [role="progressbar"]:not([aria-valuenow]),
 input[type="radio"]:not([name])
 )::after {
 content: none !important;
}

html[data-debugcss-level]:not([data-debugcss-level~="warning"]) :where(
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i]),
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(h1, h2, h3, h4, h5, h6):empty,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 center,
 font,
 marquee,
 blink,
 table thead td,
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-level]:not([data-debugcss-level~="warning"]) :where(
 [aria-label=""],
 [aria-labelledby=""],
 [aria-describedby=""],
 iframe:not([title]):not([aria-label]):not([aria-labelledby]),
 iframe[title=""],
 a[href^="javascript:" i],
 a[target="_blank"]:not([rel~="noopener" i]):not([rel~="noreferrer" i]),
 a:not([href]),
 a[href=""],
 a[href="#"],
 main ~ main,
 :is(h1, h2, h3, h4, h5, h6):empty,
 :is(ul, ol) > :not(li),
 dl > :not(dt):not(dd),
 center,
 font,
 marquee,
 blink,
 table thead td,
 [role="button"]:not(button):not(input):not(a[href]):not([tabindex]),
 [tabindex]:not([tabindex="-1"]):not([tabindex="0"]),
 summary:empty,
 caption:empty,
 video[autoplay]:not([muted]),
 audio[autoplay]
 )::after {
 content: none !important;
}

html[data-debugcss-level]:not([data-debugcss-level~="notice"]) :where(
 table[summary],
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing],
 [id=""],
 [for=""],
 [accesskey],
 form button:not([type]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description])
 ) {
 counter-increment: none !important;
 outline: none !important;
}

html[data-debugcss-level]:not([data-debugcss-level~="notice"]) :where(
 table[summary],
 table th:not([scope]):not([headers]):not([id]),
 img[alt=""],
 img[role="presentation"][alt]:not([alt=""]),
 :is(table, td, th, img)[align],
 :is(table, td, th)[bgcolor],
 :is(table, td, th)[valign],
 table[border],
 table[cellpadding],
 table[cellspacing],
 [id=""],
 [for=""],
 [accesskey],
 form button:not([type]),
 input[pattern]:not([title]):not([aria-describedby]):not([aria-description])
 )::after {
 content: none !important;
}

@supports selector(:has(*)) {
 html[data-debugcss-compact]:is(
 :not(:has(head > title)),
 :not(:has(head > meta[charset])),
 :not(:has(main, [role="main"]))
 ) {
 --debugcss-chip-opacity: 1;
 }

 html[data-debugcss-mode]:not([data-debugcss-mode~="a11y"]) :where(
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 fieldset:not(:has(> legend)),
 table:not([role="presentation"]):not(:has(> caption)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"])),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 ) {
 counter-increment: none !important;
 outline: none !important;
 }

 html[data-debugcss-mode]:not([data-debugcss-mode~="a11y"]) :where(
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 fieldset:not(:has(> legend)),
 table:not([role="presentation"]):not(:has(> caption)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"])),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 )::after {
 content: none !important;
 }

 html[data-debugcss-mode]:not([data-debugcss-mode~="structure"]) :where(
 details:not(:has(> summary))
 ) {
 counter-increment: none !important;
 outline: none !important;
 }

 html[data-debugcss-mode]:not([data-debugcss-mode~="structure"]) :where(
 details:not(:has(> summary))
 )::after {
 content: none !important;
 }

 html[data-debugcss-level]:not([data-debugcss-level~="warning"]) :where(
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 details:not(:has(> summary)),
 fieldset:not(:has(> legend)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"]))
 ) {
 counter-increment: none !important;
 outline: none !important;
 }

 html[data-debugcss-level]:not([data-debugcss-level~="warning"]) :where(
 label:not([for]):not(:has(:is(input, select, textarea, meter, progress))),
 :is(input:not([type="hidden"]), select, textarea, meter, progress):not([id]):not([aria-label]):not([aria-labelledby]):not(label :is(input, select, textarea, meter, progress)),
 [role="img"]:not(img):not(svg):not([aria-label]):not([aria-labelledby]),
 svg[role="img"]:not([aria-label]):not([aria-labelledby]):not(:has(> title)),
 svg[role="img"]:has(> title:empty),
 details:not(:has(> summary)),
 fieldset:not(:has(> legend)),
 video[controls]:not(:has(track[kind="captions"], track[kind="subtitles"]))
 )::after {
 content: none !important;
 }

 html[data-debugcss-level]:not([data-debugcss-level~="notice"]) :where(
 table:not([role="presentation"]):not(:has(> caption)),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 ) {
 counter-increment: none !important;
 outline: none !important;
 }

 html[data-debugcss-level]:not([data-debugcss-level~="notice"]) :where(
 table:not([role="presentation"]):not(:has(> caption)),
 section:not([aria-label]):not([aria-labelledby]):not(:has(:is(h1, h2, h3, h4, h5, h6)))
 )::after {
 content: none !important;
 }
}

/****************/
/* DEBUG PANEL */
/****************/

body::after {
 all: initial !important;
 background: var(--debugcss-panel) !important;
 border: 1px solid rgba(255, 255, 255, 0.14) !important;
 border-radius: 8px !important;
 box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
 color: var(--debugcss-panel-text) !important;
 content: "Errors " counter(debugcss-error) " | Warnings "
 counter(debugcss-warning) " | Notices " counter(debugcss-notice) "\A"
 "A11y " counter(debugcss-a11y) " | Structure "
 counter(debugcss-structure) " | Legacy " counter(debugcss-legacy)
 " | Security " counter(debugcss-security) !important;
 display: block !important;
 font: 700 13px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
 "Segoe UI", sans-serif !important;
 padding: 0.55rem 0.75rem !important;
 pointer-events: none !important;
 position: fixed !important;
 right: 1rem !important;
 bottom: 1rem !important;
 white-space: pre !important;
 z-index: 2147483647 !important;
}

/*********/
/* EXTRA */
/*********/

:where([data-debugcss-ignore], [data-debugcss-ignore] *) {
 counter-increment: none !important;
 outline: none !important;
}

:where([data-debugcss-ignore], [data-debugcss-ignore] *)::after {
 content: none !important;
}

.debugcss-alpha,
[data-debugcss-alpha] {
 background-color: #ffffff !important;
 background-image: var(--debugcss-alpha-bg) !important;
 background-repeat: repeat !important;
 background-size: 16px 16px !important;
 box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12) !important;
}

body > img:only-child,
body > img.debugcss-alpha:only-child,
body > img[data-debugcss-alpha]:only-child {
 background-image: var(--debugcss-alpha-bg) !important;
 border: 32px solid rgba(0, 0, 0, 0.08) !important;
 box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
 display: block !important;
 margin: 1rem auto !important;
 padding: 0 !important;
}