@charset "UTF-8";/* Built around Yohn/PicoCSS 2.2.10 era
https://github.com/Yohn/PicoCSS/discussions/40
https://codepen.io/Yohn/pen/OPLaQdQ
*/
.grid.two {
  grid-template-columns: 50% 50%;
}

.a-error,
.a-warning,
.a-ok,
.a-info {
  position: relative;
  padding-inline-end: 1rem;
}
.a-error:before,
.a-warning:before,
.a-ok:before,
.a-info:before {
  font-family: system-ui;
  font-size: 4.5rem;
  line-height: 4.5rem;
  position: absolute;
  padding-inline-end: 0.5rem;
  margin: 0;
  top: 0.25rem;
  right: 0.75rem;
  opacity: 0.35;
  text-shadow: 0 0 0.45rem #000;
}
.a-error hgroup,
.a-warning hgroup,
.a-ok hgroup,
.a-info hgroup {
  margin: -0.5rem !important;
  padding-inline-start: 0.5rem !important;
  padding-inline-end: 4.9rem !important;
  padding-block-end: 1rem !important;
  border-radius: var(--pico-border-radius);
  height: calc(100% + 1rem);
}
.a-error hgroup h3,
.a-warning hgroup h3,
.a-ok hgroup h3,
.a-info hgroup h3 {
  position: relative;
}
.a-error hgroup p,
.a-warning hgroup p,
.a-ok hgroup p,
.a-info hgroup p {
  line-height: var(--pico-line-height);
}
.a-error hgroup:after,
.a-warning hgroup:after,
.a-ok hgroup:after,
.a-info hgroup:after {
  border-block: 1.5rem solid transparent;
  width: 100%;
  height: calc(100% - 0.5rem);
  position: absolute;
  left: 0;
  bottom: 0.25rem;
  content: "";
  opacity: 0.5;
}
.a-error hgroup:before,
.a-error hgroup h3:before,
.a-warning hgroup:before,
.a-warning hgroup h3:before,
.a-ok hgroup:before,
.a-ok hgroup h3:before,
.a-info hgroup:before,
.a-info hgroup h3:before {
  border-inline: 0.4rem solid transparent;
  width: 55%;
  height: 2px;
  position: absolute;
  content: "";
  bottom: 0.5em;
  left: 0.5rem;
  opacity: 0.75;
}
.a-error hgroup h3:before,
.a-warning hgroup h3:before,
.a-ok hgroup h3:before,
.a-info hgroup h3:before {
  top: 0;
  left: unset;
  border-top-width: 3px;
  right: 0.025rem;
}
.a-error hgroup.border-0:before, .a-error hgroup.border-0:after,
.a-error hgroup.border-0 h3:before,
.a-warning hgroup.border-0:before,
.a-warning hgroup.border-0:after,
.a-warning hgroup.border-0 h3:before,
.a-ok hgroup.border-0:before,
.a-ok hgroup.border-0:after,
.a-ok hgroup.border-0 h3:before,
.a-info hgroup.border-0:before,
.a-info hgroup.border-0:after,
.a-info hgroup.border-0 h3:before {
  border-width: 0 !important;
}
.a-error section,
.a-error hgroup,
.a-error div,
.a-error nav,
.a-error h1,
.a-error h2,
.a-error h3,
.a-error h4,
.a-error h5,
.a-error h6,
.a-error ul,
.a-error ol,
.a-error li,
.a-error p,
.a-warning section,
.a-warning hgroup,
.a-warning div,
.a-warning nav,
.a-warning h1,
.a-warning h2,
.a-warning h3,
.a-warning h4,
.a-warning h5,
.a-warning h6,
.a-warning ul,
.a-warning ol,
.a-warning li,
.a-warning p,
.a-ok section,
.a-ok hgroup,
.a-ok div,
.a-ok nav,
.a-ok h1,
.a-ok h2,
.a-ok h3,
.a-ok h4,
.a-ok h5,
.a-ok h6,
.a-ok ul,
.a-ok ol,
.a-ok li,
.a-ok p,
.a-info section,
.a-info hgroup,
.a-info div,
.a-info nav,
.a-info h1,
.a-info h2,
.a-info h3,
.a-info h4,
.a-info h5,
.a-info h6,
.a-info ul,
.a-info ol,
.a-info li,
.a-info p {
  margin: 0;
  padding: 0;
  line-height: calc(var(--pico-line-height) * 1.25);
  padding-inline-start: 0.5rem;
}

[data-theme=light] .a-error:before,
[data-theme=light] .a-warning:before,
[data-theme=light] .a-ok:before,
[data-theme=light] .a-info:before,
:root:not([data-theme=dark]) .a-error:before,
:root:not([data-theme=dark]) .a-warning:before,
:root:not([data-theme=dark]) .a-ok:before,
:root:not([data-theme=dark]) .a-info:before,
:host(:not([data-theme=dark])) .a-error:before,
:host(:not([data-theme=dark])) .a-warning:before,
:host(:not([data-theme=dark])) .a-ok:before,
:host(:not([data-theme=dark])) .a-info:before {
  text-shadow: 0 0 0.45rem #fff;
}
[data-theme=light] .a-error hgroup,
[data-theme=light] .a-warning hgroup,
[data-theme=light] .a-ok hgroup,
[data-theme=light] .a-info hgroup,
:root:not([data-theme=dark]) .a-error hgroup,
:root:not([data-theme=dark]) .a-warning hgroup,
:root:not([data-theme=dark]) .a-ok hgroup,
:root:not([data-theme=dark]) .a-info hgroup,
:host(:not([data-theme=dark])) .a-error hgroup,
:host(:not([data-theme=dark])) .a-warning hgroup,
:host(:not([data-theme=dark])) .a-ok hgroup,
:host(:not([data-theme=dark])) .a-info hgroup {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.5);
}
[data-theme=light] .a-error,
:root:not([data-theme=dark]) .a-error,
:host(:not([data-theme=dark])) .a-error {
  background-color: var(--pico-color-red-100) !important;
  box-shadow: 0 0 0.15rem var(--pico-color-red-450) !important;
}
[data-theme=light] .a-error:before,
:root:not([data-theme=dark]) .a-error:before,
:host(:not([data-theme=dark])) .a-error:before {
  content: "✗";
  color: var(--pico-color-red-450);
}
[data-theme=light] .a-error hgroup,
:root:not([data-theme=dark]) .a-error hgroup,
:host(:not([data-theme=dark])) .a-error hgroup {
  box-shadow: 0 0 0.5rem var(--pico-color-red-450);
}
[data-theme=light] .a-error hgroup:after,
:root:not([data-theme=dark]) .a-error hgroup:after,
:host(:not([data-theme=dark])) .a-error hgroup:after {
  border-inline: 1rem double var(--pico-color-red-450);
}
[data-theme=light] .a-error hgroup:before,
[data-theme=light] .a-error hgroup h3:before,
:root:not([data-theme=dark]) .a-error hgroup:before,
:root:not([data-theme=dark]) .a-error hgroup h3:before,
:host(:not([data-theme=dark])) .a-error hgroup:before,
:host(:not([data-theme=dark])) .a-error hgroup h3:before {
  border-block-end: 0.25rem ridge var(--pico-color-red-450);
}
[data-theme=light] .a-error hgroup,
[data-theme=light] .a-error hgroup *,
:root:not([data-theme=dark]) .a-error hgroup,
:root:not([data-theme=dark]) .a-error hgroup *,
:host(:not([data-theme=dark])) .a-error hgroup,
:host(:not([data-theme=dark])) .a-error hgroup * {
  color: var(--pico-color-red-550);
}
[data-theme=light] .a-warning,
:root:not([data-theme=dark]) .a-warning,
:host(:not([data-theme=dark])) .a-warning {
  background-color: var(--pico-color-pumpkin-100) !important;
  box-shadow: 0 0 0.15rem var(--pico-color-pumpkin-400) !important;
}
[data-theme=light] .a-warning:before,
:root:not([data-theme=dark]) .a-warning:before,
:host(:not([data-theme=dark])) .a-warning:before {
  content: "⚠";
  color: var(--pico-color-pumpkin-400);
}
[data-theme=light] .a-warning hgroup,
:root:not([data-theme=dark]) .a-warning hgroup,
:host(:not([data-theme=dark])) .a-warning hgroup {
  box-shadow: 0 0 0.5rem var(--pico-color-pumpkin-400);
}
[data-theme=light] .a-warning hgroup:after,
:root:not([data-theme=dark]) .a-warning hgroup:after,
:host(:not([data-theme=dark])) .a-warning hgroup:after {
  border-inline: 1rem double var(--pico-color-pumpkin-400);
}
[data-theme=light] .a-warning hgroup:before,
[data-theme=light] .a-warning hgroup h3:before,
:root:not([data-theme=dark]) .a-warning hgroup:before,
:root:not([data-theme=dark]) .a-warning hgroup h3:before,
:host(:not([data-theme=dark])) .a-warning hgroup:before,
:host(:not([data-theme=dark])) .a-warning hgroup h3:before {
  border-block-end: 0.25rem ridge var(--pico-color-pumpkin-400);
}
[data-theme=light] .a-warning hgroup,
[data-theme=light] .a-warning hgroup *,
:root:not([data-theme=dark]) .a-warning hgroup,
:root:not([data-theme=dark]) .a-warning hgroup *,
:host(:not([data-theme=dark])) .a-warning hgroup,
:host(:not([data-theme=dark])) .a-warning hgroup * {
  color: var(--pico-color-pumpkin-400);
}
[data-theme=light] .a-ok,
:root:not([data-theme=dark]) .a-ok,
:host(:not([data-theme=dark])) .a-ok {
  background-color: var(--pico-color-green-50) !important;
  box-shadow: 0 0 0.15rem var(--pico-color-jade-500) !important;
}
[data-theme=light] .a-ok:before,
:root:not([data-theme=dark]) .a-ok:before,
:host(:not([data-theme=dark])) .a-ok:before {
  content: "✓";
  color: var(--pico-color-jade-500);
}
[data-theme=light] .a-ok hgroup,
:root:not([data-theme=dark]) .a-ok hgroup,
:host(:not([data-theme=dark])) .a-ok hgroup {
  box-shadow: 0 0 0.5rem var(--pico-color-jade-500);
}
[data-theme=light] .a-ok hgroup:after,
:root:not([data-theme=dark]) .a-ok hgroup:after,
:host(:not([data-theme=dark])) .a-ok hgroup:after {
  border-inline: 1rem double var(--pico-color-jade-500);
}
[data-theme=light] .a-ok hgroup:before,
[data-theme=light] .a-ok hgroup h3:before,
:root:not([data-theme=dark]) .a-ok hgroup:before,
:root:not([data-theme=dark]) .a-ok hgroup h3:before,
:host(:not([data-theme=dark])) .a-ok hgroup:before,
:host(:not([data-theme=dark])) .a-ok hgroup h3:before {
  border-block-end: 0.25rem ridge var(--pico-color-jade-500);
}
[data-theme=light] .a-ok hgroup,
[data-theme=light] .a-ok hgroup *,
:root:not([data-theme=dark]) .a-ok hgroup,
:root:not([data-theme=dark]) .a-ok hgroup *,
:host(:not([data-theme=dark])) .a-ok hgroup,
:host(:not([data-theme=dark])) .a-ok hgroup * {
  color: var(--pico-color-jade-500);
}
[data-theme=light] .a-info,
:root:not([data-theme=dark]) .a-info,
:host(:not([data-theme=dark])) .a-info {
  background-color: var(--pico-color-azure-100) !important;
  box-shadow: 0 0 0.15rem var(--pico-color-azure-550) !important;
}
[data-theme=light] .a-info:before,
:root:not([data-theme=dark]) .a-info:before,
:host(:not([data-theme=dark])) .a-info:before {
  content: "ⓘ";
  color: var(--pico-color-azure-550);
}
[data-theme=light] .a-info hgroup,
:root:not([data-theme=dark]) .a-info hgroup,
:host(:not([data-theme=dark])) .a-info hgroup {
  box-shadow: 0 0 0.5rem var(--pico-color-azure-550);
}
[data-theme=light] .a-info hgroup:after,
:root:not([data-theme=dark]) .a-info hgroup:after,
:host(:not([data-theme=dark])) .a-info hgroup:after {
  border-inline: 1rem double var(--pico-color-azure-550);
}
[data-theme=light] .a-info hgroup:before,
[data-theme=light] .a-info hgroup h3:before,
:root:not([data-theme=dark]) .a-info hgroup:before,
:root:not([data-theme=dark]) .a-info hgroup h3:before,
:host(:not([data-theme=dark])) .a-info hgroup:before,
:host(:not([data-theme=dark])) .a-info hgroup h3:before {
  border-block-end: 0.25rem ridge var(--pico-color-azure-550);
}
[data-theme=light] .a-info hgroup,
[data-theme=light] .a-info hgroup *,
:root:not([data-theme=dark]) .a-info hgroup,
:root:not([data-theme=dark]) .a-info hgroup *,
:host(:not([data-theme=dark])) .a-info hgroup,
:host(:not([data-theme=dark])) .a-info hgroup * {
  color: var(--pico-color-azure-550);
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .a-error:before,
:root:not([data-theme=light]) .a-warning:before,
:root:not([data-theme=light]) .a-ok:before,
:root:not([data-theme=light]) .a-info:before,
:host(:not([data-theme=light])) .a-error:before,
:host(:not([data-theme=light])) .a-warning:before,
:host(:not([data-theme=light])) .a-ok:before,
:host(:not([data-theme=light])) .a-info:before {
    text-shadow: 0 0 0.45rem #000;
  }
  :root:not([data-theme=light]) .a-error hgroup,
:root:not([data-theme=light]) .a-warning hgroup,
:root:not([data-theme=light]) .a-ok hgroup,
:root:not([data-theme=light]) .a-info hgroup,
:host(:not([data-theme=light])) .a-error hgroup,
:host(:not([data-theme=light])) .a-warning hgroup,
:host(:not([data-theme=light])) .a-ok hgroup,
:host(:not([data-theme=light])) .a-info hgroup {
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 0.5rem rgba(255, 255, 255, 0.5);
  }
  :root:not([data-theme=light]) .a-error,
:host(:not([data-theme=light])) .a-error {
    background-color: var(--pico-color-red-950) !important;
    box-shadow: 0 0 0.15rem var(--pico-color-red-450) !important;
  }
  :root:not([data-theme=light]) .a-error:before,
:host(:not([data-theme=light])) .a-error:before {
    content: "✗";
    color: var(--pico-color-red-450);
  }
  :root:not([data-theme=light]) .a-error hgroup,
:host(:not([data-theme=light])) .a-error hgroup {
    box-shadow: 0 0 0.5rem var(--pico-color-red-450);
  }
  :root:not([data-theme=light]) .a-error hgroup:after,
:host(:not([data-theme=light])) .a-error hgroup:after {
    border-inline: 1rem double var(--pico-color-red-450);
  }
  :root:not([data-theme=light]) .a-error hgroup:before,
:root:not([data-theme=light]) .a-error hgroup h3:before,
:host(:not([data-theme=light])) .a-error hgroup:before,
:host(:not([data-theme=light])) .a-error hgroup h3:before {
    border-block-end: 0.25rem ridge var(--pico-color-red-450);
  }
  :root:not([data-theme=light]) .a-error hgroup,
:root:not([data-theme=light]) .a-error hgroup *,
:host(:not([data-theme=light])) .a-error hgroup,
:host(:not([data-theme=light])) .a-error hgroup * {
    color: var(--pico-color-red-550);
  }
  :root:not([data-theme=light]) .a-warning,
:host(:not([data-theme=light])) .a-warning {
    background-color: var(--pico-color-pumpkin-950) !important;
    box-shadow: 0 0 0.15rem var(--pico-color-pumpkin-400) !important;
  }
  :root:not([data-theme=light]) .a-warning:before,
:host(:not([data-theme=light])) .a-warning:before {
    content: "⚠";
    color: var(--pico-color-pumpkin-400);
  }
  :root:not([data-theme=light]) .a-warning hgroup,
:host(:not([data-theme=light])) .a-warning hgroup {
    box-shadow: 0 0 0.5rem var(--pico-color-pumpkin-400);
  }
  :root:not([data-theme=light]) .a-warning hgroup:after,
:host(:not([data-theme=light])) .a-warning hgroup:after {
    border-inline: 1rem double var(--pico-color-pumpkin-400);
  }
  :root:not([data-theme=light]) .a-warning hgroup:before,
:root:not([data-theme=light]) .a-warning hgroup h3:before,
:host(:not([data-theme=light])) .a-warning hgroup:before,
:host(:not([data-theme=light])) .a-warning hgroup h3:before {
    border-block-end: 0.25rem ridge var(--pico-color-pumpkin-400);
  }
  :root:not([data-theme=light]) .a-warning hgroup,
:root:not([data-theme=light]) .a-warning hgroup *,
:host(:not([data-theme=light])) .a-warning hgroup,
:host(:not([data-theme=light])) .a-warning hgroup * {
    color: var(--pico-color-pumpkin-400);
  }
  :root:not([data-theme=light]) .a-ok,
:host(:not([data-theme=light])) .a-ok {
    background-color: var(--pico-color-jade-950) !important;
    box-shadow: 0 0 0.15rem var(--pico-color-jade-500) !important;
  }
  :root:not([data-theme=light]) .a-ok:before,
:host(:not([data-theme=light])) .a-ok:before {
    content: "✓";
    color: var(--pico-color-jade-500);
  }
  :root:not([data-theme=light]) .a-ok hgroup,
:host(:not([data-theme=light])) .a-ok hgroup {
    box-shadow: 0 0 0.5rem var(--pico-color-jade-500);
  }
  :root:not([data-theme=light]) .a-ok hgroup:after,
:host(:not([data-theme=light])) .a-ok hgroup:after {
    border-inline: 1rem double var(--pico-color-jade-500);
  }
  :root:not([data-theme=light]) .a-ok hgroup:before,
:root:not([data-theme=light]) .a-ok hgroup h3:before,
:host(:not([data-theme=light])) .a-ok hgroup:before,
:host(:not([data-theme=light])) .a-ok hgroup h3:before {
    border-block-end: 0.25rem ridge var(--pico-color-jade-500);
  }
  :root:not([data-theme=light]) .a-ok hgroup,
:root:not([data-theme=light]) .a-ok hgroup *,
:host(:not([data-theme=light])) .a-ok hgroup,
:host(:not([data-theme=light])) .a-ok hgroup * {
    color: var(--pico-color-jade-300);
  }
  :root:not([data-theme=light]) .a-info,
:host(:not([data-theme=light])) .a-info {
    background-color: var(--pico-color-azure-950) !important;
    box-shadow: 0 0 0.15rem var(--pico-color-azure-550) !important;
  }
  :root:not([data-theme=light]) .a-info:before,
:host(:not([data-theme=light])) .a-info:before {
    content: "ⓘ";
    color: var(--pico-color-azure-550);
  }
  :root:not([data-theme=light]) .a-info hgroup,
:host(:not([data-theme=light])) .a-info hgroup {
    box-shadow: 0 0 0.5rem var(--pico-color-azure-550);
  }
  :root:not([data-theme=light]) .a-info hgroup:after,
:host(:not([data-theme=light])) .a-info hgroup:after {
    border-inline: 1rem double var(--pico-color-azure-550);
  }
  :root:not([data-theme=light]) .a-info hgroup:before,
:root:not([data-theme=light]) .a-info hgroup h3:before,
:host(:not([data-theme=light])) .a-info hgroup:before,
:host(:not([data-theme=light])) .a-info hgroup h3:before {
    border-block-end: 0.25rem ridge var(--pico-color-azure-550);
  }
  :root:not([data-theme=light]) .a-info hgroup,
:root:not([data-theme=light]) .a-info hgroup *,
:host(:not([data-theme=light])) .a-info hgroup,
:host(:not([data-theme=light])) .a-info hgroup * {
    color: var(--pico-color-azure-550);
  }
}