[data-is-debug="true"]::before,
[data-is-debug="true"]::after,
[data-is-debug="classes"]::before,
[data-is-debug="classes"]::after,
[data-is-debug="columns"]::before,
[data-is-debug="columns"]::after,
[data-is-debug="outline"]::before,
[data-is-debug="outline"]::after,
[data-is-debug="max"]::before,
[data-is-debug="max"]::after {
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 1000;
  color: var(--gColWhite);
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 12px;
  line-height: 12px;
  text-align: center;
  margin: 0;
  padding: 1px 0 2px 0;
  background-color: color-mix(in srgb, var(--gColRed) calc(100% * var(--debug-headerOpacity)), transparent);
  content: "mobile (default): up to 879px";
}
@media (min-width: 880px) {
  [data-is-debug="true"]::before,
  [data-is-debug="true"]::after,
  [data-is-debug="classes"]::before,
  [data-is-debug="classes"]::after,
  [data-is-debug="columns"]::before,
  [data-is-debug="columns"]::after,
  [data-is-debug="outline"]::before,
  [data-is-debug="outline"]::after,
  [data-is-debug="max"]::before,
  [data-is-debug="max"]::after {
    background-color: color-mix(
      in srgb,
      var(--gColPurple) calc(100% * var(--debug-headerOpacity)),
      transparent
    );
    content: "tablet: 880px to 1023px";
  }
}
@media (min-width: 1024px) {
  [data-is-debug="true"]::before,
  [data-is-debug="true"]::after,
  [data-is-debug="classes"]::before,
  [data-is-debug="classes"]::after,
  [data-is-debug="columns"]::before,
  [data-is-debug="columns"]::after,
  [data-is-debug="outline"]::before,
  [data-is-debug="outline"]::after,
  [data-is-debug="max"]::before,
  [data-is-debug="max"]::after {
    background-color: color-mix(
      in srgb,
      var(--gColBlue) calc(100% * var(--debug-headerOpacity)),
      transparent
    );
    content: "desktop: 1024px to 1199px";
  }
}
@media (min-width: 1200px) {
  [data-is-debug="true"]::before,
  [data-is-debug="true"]::after,
  [data-is-debug="classes"]::before,
  [data-is-debug="classes"]::after,
  [data-is-debug="columns"]::before,
  [data-is-debug="columns"]::after,
  [data-is-debug="outline"]::before,
  [data-is-debug="outline"]::after,
  [data-is-debug="max"]::before,
  [data-is-debug="max"]::after {
    background-color: color-mix(
      in srgb,
      var(--gColGreen) calc(100% * var(--debug-headerOpacity)),
      transparent
    );
    content: "max: 1200px and more";
  }
}
[data-is-debug="true"]::before,
[data-is-debug="classes"]::before,
[data-is-debug="columns"]::before,
[data-is-debug="outline"]::before,
[data-is-debug="max"]::before {
  top: 0;
}
[data-is-debug="true"]::after,
[data-is-debug="classes"]::after,
[data-is-debug="columns"]::after,
[data-is-debug="outline"]::after,
[data-is-debug="max"]::after {
  bottom: 0;
}

[data-is-debug="true"] h1,
[data-is-debug="true"] h2,
[data-is-debug="true"] h3,
[data-is-debug="true"] h4,
[data-is-debug="true"] h5,
[data-is-debug="true"] h6,
[data-is-debug="classes"] h1,
[data-is-debug="classes"] h2,
[data-is-debug="classes"] h3,
[data-is-debug="classes"] h4,
[data-is-debug="classes"] h5,
[data-is-debug="classes"] h6,
[data-is-debug="max"] h1,
[data-is-debug="max"] h2,
[data-is-debug="max"] h3,
[data-is-debug="max"] h4,
[data-is-debug="max"] h5,
[data-is-debug="max"] h6 {
  background: color-mix(in srgb, var(--gColBlue) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}
[data-is-debug="true"] ul,
[data-is-debug="true"] ol,
[data-is-debug="true"] li,
[data-is-debug="classes"] ul,
[data-is-debug="classes"] ol,
[data-is-debug="classes"] li,
[data-is-debug="max"] ul,
[data-is-debug="max"] ol,
[data-is-debug="max"] li {
  background: color-mix(in srgb, var(--gColCyan) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}
[data-is-debug="true"] p,
[data-is-debug="classes"] p,
[data-is-debug="max"] p {
  background: color-mix(in srgb, var(--gColGreen) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}
[data-is-debug="true"] div,
[data-is-debug="true"] header,
[data-is-debug="true"] main,
[data-is-debug="true"] footer,
[data-is-debug="true"] nav,
[data-is-debug="classes"] div,
[data-is-debug="classes"] header,
[data-is-debug="classes"] main,
[data-is-debug="classes"] footer,
[data-is-debug="classes"] nav,
[data-is-debug="max"] div,
[data-is-debug="max"] header,
[data-is-debug="max"] main,
[data-is-debug="max"] footer,
[data-is-debug="max"] nav {
  background: color-mix(in srgb, var(--gColRed) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}
[data-is-debug="true"] span,
[data-is-debug="true"] legend,
[data-is-debug="true"] label,
[data-is-debug="classes"] span,
[data-is-debug="classes"] legend,
[data-is-debug="classes"] label,
[data-is-debug="max"] span,
[data-is-debug="max"] legend,
[data-is-debug="max"] label {
  background: color-mix(in srgb, var(--gColBlack) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}
[data-is-debug="true"] table,
[data-is-debug="true"] th,
[data-is-debug="true"] td,
[data-is-debug="classes"] table,
[data-is-debug="classes"] th,
[data-is-debug="classes"] td,
[data-is-debug="max"] table,
[data-is-debug="max"] th,
[data-is-debug="max"] td {
  outline: var(--debug-debugAreaOutline);
  background: color-mix(in srgb, var(--gColPetrol) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}
[data-is-debug="true"] [class*="section"],
[data-is-debug="classes"] [class*="section"],
[data-is-debug="max"] [class*="section"] {
  background: color-mix(in srgb, var(--gColPetrol) calc(100% * var(--debug-debugAreaOpacity)), transparent);
}

[data-is-debug="outline"] h1,
[data-is-debug="outline"] h2,
[data-is-debug="outline"] h3,
[data-is-debug="outline"] h4,
[data-is-debug="outline"] h5,
[data-is-debug="outline"] h6,
[data-is-debug="outline"] ul,
[data-is-debug="outline"] ol,
[data-is-debug="outline"] li,
[data-is-debug="outline"] p,
[data-is-debug="outline"] img,
[data-is-debug="outline"] div,
[data-is-debug="outline"] header,
[data-is-debug="outline"] main,
[data-is-debug="outline"] footer,
[data-is-debug="outline"] nav,
[data-is-debug="columns"] h1,
[data-is-debug="columns"] h2,
[data-is-debug="columns"] h3,
[data-is-debug="columns"] h4,
[data-is-debug="columns"] h5,
[data-is-debug="columns"] h6,
[data-is-debug="columns"] ul,
[data-is-debug="columns"] ol,
[data-is-debug="columns"] li,
[data-is-debug="columns"] p,
[data-is-debug="columns"] img,
[data-is-debug="columns"] div,
[data-is-debug="columns"] header,
[data-is-debug="columns"] main,
[data-is-debug="columns"] footer,
[data-is-debug="columns"] nav,
[data-is-debug="max"] h1,
[data-is-debug="max"] h2,
[data-is-debug="max"] h3,
[data-is-debug="max"] h4,
[data-is-debug="max"] h5,
[data-is-debug="max"] h6,
[data-is-debug="max"] ul,
[data-is-debug="max"] ol,
[data-is-debug="max"] li,
[data-is-debug="max"] p,
[data-is-debug="max"] img,
[data-is-debug="max"] div,
[data-is-debug="max"] header,
[data-is-debug="max"] main,
[data-is-debug="max"] footer,
[data-is-debug="max"] nav {
  outline: var(--debug-debugAreaOutline);
}

[data-is-debug="classes"] *::before,
[data-is-debug="max"] *::before {
  content: attr(class);
  position: absolute;
  left: 1px;
  top: 0;
  font-size: 9px;
  font-weight: bold;
  line-height: 9px;
  font-family: Arial;
  color: color-mix(in srgb, var(--gColRed) calc(100% * var(--debug-headerOpacity)), transparent);
  background: color-mix(in srgb, var(--gColWhite) 50%, transparent);
}

[class^="pocket-"],
[class^="beginnt-mit-xxx"] {
  outline: none !important;
}