:root {
  --webapp-hue-default: 210;
  --webapp-hue-primary: 130;
  --webapp-hue-danger: 360;
  --webapp-default: var(--webapp-hue-default) 0%;
  --webapp-anchor: var(--webapp-hue-default) 100%;
  --webapp-primary: var(--webapp-hue-primary) 50%;
  --webapp-danger: var(--webapp-hue-danger) 70%;
  --webapp-color-background: var(--webapp-default) 100%;
  --webapp-color-foreground: var(--webapp-default) 0%;
  --webapp-color-edge: var(--webapp-default) 60%;
  --webapp-color-hint: var(--webapp-default) 70%;
  --webapp-color-anchor: var(--webapp-anchor) 40%;
  --webapp-color-primary: var(--webapp-primary) 50%;
  --webapp-color-danger: var(--webapp-danger) 50%;
  --webapp-font-default: opensans, verdana, arial, sans-serif;
  --webapp-font-monospace: consolas, monospace;
  --webapp-radius: .2rem;
  --webapp-gaplittle: .2rem;
  --webapp-gapitem: .4rem;
  --webapp-gap: 1rem;
  --webapp-blur: blur(.2rem);
  font: normal 16px var(--webapp-font-default);
  background-color: hsl(var(--webapp-color-background));
}
:root ::selection {
  background-color: hsl(var(--webapp-color-anchor));
  color: hsl(var(--webapp-color-background));
}
:root, :root > body {
  margin: 0;
  padding: 0;
  height: 100%;
}
:root > body > div:first-of-type {
  display: grid;
  grid-template-columns: auto 1fr;
}
:root > body > div:first-of-type > header:first-of-type {
  display: flex;
  grid-column: 1/-1;
}
:root > body > div:first-of-type > header:first-of-type:empty {
  margin-top: var(--webapp-gap);
}
:root > body > div:first-of-type > aside:first-of-type:not(:empty) {
  display: flex;
  gap: var(--webapp-gapitem);
  flex-direction: column;
  padding-left: var(--webapp-gap);
}
:root > body > div:first-of-type > main:first-of-type {
  margin: 0 var(--webapp-gap);
}
:root > body > div:first-of-type > footer:first-of-type {
  grid-column: 1/-1;
  padding: var(--webapp-gap);
}

a {
  color: hsl(var(--webapp-color-anchor));
  text-decoration: none;
  cursor: pointer;
  outline: none;
}
a:hover {
  text-decoration: underline;
}
a.primary {
  color: hsl(var(--webapp-color-primary));
}
a.danger {
  color: hsl(var(--webapp-color-danger));
}

option {
  color: hsl(var(--webapp-color-foreground));
  background-color: hsl(var(--webapp-color-background));
}
option:checked {
  background-color: hsl(var(--webapp-color-hint)/0.2);
}
option:hover {
  color: hsl(var(--webapp-color-background));
  background-color: hsl(var(--webapp-color-anchor));
}

select, ::picker(select) {
  appearance: base-select;
  border: 1px solid hsl(var(--webapp-color-edge));
  border-radius: var(--webapp-radius);
}

select, button, textarea, input,
[class*=webapp-button], [class*=webapp-bar] > a {
  font: 1rem var(--webapp-font-default);
  line-height: 1.44rem;
  padding: var(--webapp-gaplittle);
  outline: none;
}

select, button, textarea, input:not([type=image i], [type=range i], [type=radio i], [type=checkbox i]),
[class*=webapp-button], [class*=webapp-bar] > a {
  border: 1px solid hsl(var(--webapp-color-edge));
  border-radius: var(--webapp-radius);
}
select:hover, button:hover, textarea:hover, input:not([type=image i], [type=range i], [type=radio i], [type=checkbox i]):hover,
[class*=webapp-button]:hover, [class*=webapp-bar] > a:hover {
  border-color: hsl(var(--webapp-color-hint));
}
select:focus, button:focus, textarea:focus, input:not([type=image i], [type=range i], [type=radio i], [type=checkbox i]):focus,
[class*=webapp-button]:focus, [class*=webapp-bar] > a:focus {
  border-color: hsl(var(--webapp-color-anchor));
  box-shadow: 0 0 0 0.2rem hsl(var(--webapp-color-anchor)/0.3);
  z-index: 1;
}

select, button, input:is([type=file i], [type=submit i]),
[class*=webapp-button], [class*=webapp-bar] > a {
  white-space: nowrap;
  background-color: hsl(var(--webapp-default) 94%);
  background-image: linear-gradient(transparent, hsl(var(--webapp-default) 90%) 90%);
}
select:hover, button:hover, input:is([type=file i], [type=submit i]):hover,
[class*=webapp-button]:hover, [class*=webapp-bar] > a:hover {
  background-image: linear-gradient(hsl(var(--webapp-default) 98%), hsl(var(--webapp-default) 94%) 90%);
}
select[type=submit i], select.default, select.primary, select.danger, button[type=submit i], button.default, button.primary, button.danger, input:is([type=file i], [type=submit i])[type=submit i], input:is([type=file i], [type=submit i]).default, input:is([type=file i], [type=submit i]).primary, input:is([type=file i], [type=submit i]).danger,
[class*=webapp-button][type=submit i],
[class*=webapp-button].default,
[class*=webapp-button].primary,
[class*=webapp-button].danger, [class*=webapp-bar] > a[type=submit i], [class*=webapp-bar] > a.default, [class*=webapp-bar] > a.primary, [class*=webapp-bar] > a.danger {
  color: hsl(var(--webapp-default) 100%);
  text-shadow: 0 0 0.1rem hsl(var(--webapp-default) 0%);
}
select[type=submit i], select.default, button[type=submit i], button.default, input:is([type=file i], [type=submit i])[type=submit i], input:is([type=file i], [type=submit i]).default,
[class*=webapp-button][type=submit i],
[class*=webapp-button].default, [class*=webapp-bar] > a[type=submit i], [class*=webapp-bar] > a.default {
  border-color: hsl(var(--webapp-anchor) 20%);
  background-color: hsl(var(--webapp-anchor) 50%);
  background-image: linear-gradient(transparent, hsl(var(--webapp-anchor) 40%) 90%);
}
select[type=submit i]:hover, select.default:hover, button[type=submit i]:hover, button.default:hover, input:is([type=file i], [type=submit i])[type=submit i]:hover, input:is([type=file i], [type=submit i]).default:hover,
[class*=webapp-button][type=submit i]:hover,
[class*=webapp-button].default:hover, [class*=webapp-bar] > a[type=submit i]:hover, [class*=webapp-bar] > a.default:hover {
  border-color: hsl(var(--webapp-anchor) 40%);
  background-image: linear-gradient(hsl(var(--webapp-anchor) 60%), hsl(var(--webapp-anchor) 50%) 90%);
}
select.primary, button.primary, input:is([type=file i], [type=submit i]).primary,
[class*=webapp-button].primary, [class*=webapp-bar] > a.primary {
  border-color: hsl(var(--webapp-primary) 20%);
  background-color: hsl(var(--webapp-primary) 50%);
  background-image: linear-gradient(transparent, hsl(var(--webapp-primary) 40%) 90%);
}
select.primary:hover, button.primary:hover, input:is([type=file i], [type=submit i]).primary:hover,
[class*=webapp-button].primary:hover, [class*=webapp-bar] > a.primary:hover {
  border-color: hsl(var(--webapp-primary) 40%);
  background-image: linear-gradient(hsl(var(--webapp-primary) 60%), hsl(var(--webapp-primary) 50%) 90%);
}
select.primary:focus, button.primary:focus, input:is([type=file i], [type=submit i]).primary:focus,
[class*=webapp-button].primary:focus, [class*=webapp-bar] > a.primary:focus {
  box-shadow: 0 0 0 0.2rem hsl(var(--webapp-color-primary)/0.5);
}
select.danger, button.danger, input:is([type=file i], [type=submit i]).danger,
[class*=webapp-button].danger, [class*=webapp-bar] > a.danger {
  border-color: hsl(var(--webapp-danger) 20%);
  background-color: hsl(var(--webapp-danger) 50%);
  background-image: linear-gradient(transparent, hsl(var(--webapp-danger) 40%) 90%);
}
select.danger:hover, button.danger:hover, input:is([type=file i], [type=submit i]).danger:hover,
[class*=webapp-button].danger:hover, [class*=webapp-bar] > a.danger:hover {
  border-color: hsl(var(--webapp-danger) 40%);
  background-image: linear-gradient(hsl(var(--webapp-danger) 60%), hsl(var(--webapp-danger) 50%) 90%);
}
select.danger:focus, button.danger:focus, input:is([type=file i], [type=submit i]).danger:focus,
[class*=webapp-button].danger:focus, [class*=webapp-bar] > a.danger:focus {
  box-shadow: 0 0 0 0.2rem hsl(var(--webapp-color-danger)/0.5);
}
select:active, select:is([type=submit i], [class]):active, button:active, button:is([type=submit i], [class]):active, input:is([type=file i], [type=submit i]):active, input:is([type=file i], [type=submit i]):is([type=submit i], [class]):active,
[class*=webapp-button]:active,
[class*=webapp-button]:is([type=submit i], [class]):active, [class*=webapp-bar] > a:active, [class*=webapp-bar] > a:is([type=submit i], [class]):active {
  background-image: none;
}

select:invalid, textarea:invalid, input:not([type=image i], [type=range i], [type=radio i], [type=checkbox i]):invalid {
  border-color: hsl(var(--webapp-color-danger));
}
select:invalid:focus, textarea:invalid:focus, input:not([type=image i], [type=range i], [type=radio i], [type=checkbox i]):invalid:focus {
  box-shadow: 0 0 0 0.2rem hsl(var(--webapp-color-danger)/0.3);
}
select:disabled, textarea:disabled, input:not([type=image i], [type=range i], [type=radio i], [type=checkbox i]):disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

textarea, input:not([type=file i], [type=submit i], [type=image i], [type=range i], [type=radio i], [type=checkbox i]) {
  box-shadow: inset 0 0.1rem 0.2rem hsl(var(--webapp-color-edge)/0.2);
}
textarea::placeholder, input:not([type=file i], [type=submit i], [type=image i], [type=range i], [type=radio i], [type=checkbox i])::placeholder {
  color: hsl(var(--webapp-color-hint));
}
textarea:read-only, input:not([type=file i], [type=submit i], [type=image i], [type=range i], [type=radio i], [type=checkbox i]):read-only {
  background-color: hsl(var(--webapp-color-hint)/0.1);
}

textarea, code, pre {
  font: 1rem var(--webapp-font-monospace);
}

input[type=file i] {
  width: 100%;
  min-width: 7rem;
}
input[type=file i]::file-selector-button {
  display: none;
}
input:not([type=file i], [type=submit i], [type=image i], [type=range i], [type=radio i], [type=checkbox i]) {
  text-overflow: ellipsis;
}
input[type=radio i], input[type=checkbox i] {
  appearance: none;
  position: relative;
  margin: 0;
  padding: 0;
  width: 1.8rem;
  height: 1rem;
  border: 1px solid hsl(var(--webapp-color-edge));
  border-radius: 0.5rem;
  background-color: hsl(var(--webapp-color-hint));
}
input[type=radio i]::before, input[type=checkbox i]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 1px;
  width: calc(1rem - 4px);
  height: calc(1rem - 4px);
  border-radius: calc((1rem - 4px) * 0.5);
  background-color: hsl(var(--webapp-color-background));
  box-sizing: border-box;
}
input[type=radio i]:checked, input[type=checkbox i]:checked {
  border: 1px solid hsl(var(--webapp-anchor) 20%);
  background-color: hsl(var(--webapp-color-anchor));
}
input[type=radio i]:checked::before, input[type=checkbox i]:checked::before {
  left: calc(0.8rem + 1px);
}

label {
  display: flex;
  gap: var(--webapp-gapitem);
  align-items: center;
  padding: var(--webapp-gaplittle) var(--webapp-gapitem);
  line-height: 1.6rem;
}

details > summary, ul[class|=webapp][class*=-popup] details > summary, ol[class|=webapp][class*=-popup] details > summary {
  cursor: pointer;
  display: flex;
  align-items: center;
}
details > summary::before, ul[class|=webapp][class*=-popup] details > summary::before, ol[class|=webapp][class*=-popup] details > summary::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  display: inline-block;
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m9 18 6-6-6-6"/></svg>');
  background-color: hsl(var(--webapp-color-foreground));
  mask-size: cover;
}
details[open] > summary::before, ul[class|=webapp][class*=-popup] details[open] > summary::before, ol[class|=webapp][class*=-popup] details[open] > summary::before {
  mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><path d="m6 9 6 6 6-6"/></svg>');
}
details.popup, ul[class|=webapp][class*=-popup] details, ol[class|=webapp][class*=-popup] details {
  position: relative;
}
details.popup > :not(summary), ul[class|=webapp][class*=-popup] details > :not(summary), ol[class|=webapp][class*=-popup] details > :not(summary) {
  position: absolute;
  padding: var(--webapp-gaplittle);
  border: 1px solid hsl(var(--webapp-color-edge));
  border-radius: var(--webapp-radius);
  background-color: hsl(var(--webapp-color-background));
  box-shadow: 0 0 0.2rem hsl(var(--webapp-color-edge));
  white-space: nowrap;
  z-index: 2;
}
details.popup > :not(summary) details > :not(summary), ul[class|=webapp][class*=-popup] details > :not(summary) details > :not(summary), ol[class|=webapp][class*=-popup] details > :not(summary) details > :not(summary), details.popup > :not(summary) ul[class|=webapp][class*=-popup] details > :not(summary), details.popup > :not(summary) ol[class|=webapp][class*=-popup] details > :not(summary) {
  left: 100%;
  top: 0;
}

progress {
  appearance: none;
}
progress::-webkit-progress-inner-element {
  padding: 1px;
  border: 1px solid hsl(var(--webapp-color-edge));
  border-radius: var(--webapp-radius);
}
progress::-webkit-progress-bar {
  background-color: hsl(var(--webapp-color-hint));
  border-radius: var(--webapp-radius);
}
progress::-webkit-progress-value {
  transition: width 0.3s ease;
  border-radius: var(--webapp-radius);
  background-image: linear-gradient(-45deg, hsl(var(--webapp-color-background)/0.2) 25%, transparent 25%, transparent 50%, hsl(var(--webapp-color-background)/0.2) 50%, hsl(var(--webapp-color-background)/0.2) 75%, transparent 75%, transparent);
  background-size: 1rem 1rem;
  background-color: hsl(var(--webapp-color-anchor));
}

form[class|=webapp] {
  display: inline-flex;
  flex-direction: column;
}
form[class|=webapp] > fieldset {
  display: flex;
  border: none;
  gap: var(--webapp-gap);
  margin: 0;
  padding: var(--webapp-gapitem);
}
form[class|=webapp] > fieldset:empty {
  display: none;
}
form[class|=webapp] > fieldset > legend:first-of-type {
  padding: var(--webapp-gapitem) 0 0 0;
}
form[class|=webapp] > fieldset > :not(legend) {
  flex-grow: 1;
}

table[class|=webapp] {
  background-color: hsl(var(--webapp-color-edge));
  border-collapse: separate;
  border-spacing: 1px;
  border-radius: calc(var(--webapp-radius) + 1px);
}
table[class|=webapp] > :first-child > tr:first-of-type > td:first-of-type {
  border-top-left-radius: var(--webapp-radius);
}
table[class|=webapp] > :first-child > tr:first-of-type > td:last-of-type {
  border-top-right-radius: var(--webapp-radius);
}
table[class|=webapp] > :last-child > tr:last-of-type > td:first-of-type {
  border-bottom-left-radius: var(--webapp-radius);
}
table[class|=webapp] > :last-child > tr:last-of-type > td:last-of-type {
  border-bottom-right-radius: var(--webapp-radius);
}
table[class|=webapp] > thead, table[class|=webapp] > tbody, table[class|=webapp] > tfoot {
  background-color: hsl(var(--webapp-color-background));
}
table[class|=webapp] > thead > tr > td, table[class|=webapp] > tbody > tr > td, table[class|=webapp] > tfoot > tr > td {
  padding: var(--webapp-gapitem);
}
table[class|=webapp] > thead > tr:first-of-type > td:first-of-type {
  color: hsl(var(--webapp-default) 100%);
  border: 1px solid hsl(var(--webapp-default) 100%);
  background-color: hsl(var(--webapp-anchor) 50%);
  background-image: linear-gradient(transparent, hsl(var(--webapp-anchor) 40%) 90%);
  text-shadow: 0 0 0.1rem hsl(var(--webapp-default) 0%);
}
table[class|=webapp] > tbody > tr.fieldset:first-of-type {
  background-color: hsl(var(--webapp-default) 90%);
}
table[class|=webapp] > tbody > tr > td[data-null]::before {
  content: "NULL";
  color: hsl(var(--webapp-color-hint));
}
table[class|=webapp] > tfoot {
  background-color: hsl(var(--webapp-anchor) 98%);
}
table[class|=webapp] > tfoot > tr > td > div.webapp-bar-merge:last-of-type > a {
  padding: var(--webapp-gaplittle) var(--webapp-gap);
}

ul[class|=webapp], ul[class|=webapp] ul, ul[class|=webapp] ol, ol[class|=webapp], ol[class|=webapp] ul, ol[class|=webapp] ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul[class|=webapp][class*=-tree], ul[class|=webapp][class*=-tree] ul, ul[class|=webapp][class*=-tree] ol, ol[class|=webapp][class*=-tree], ol[class|=webapp][class*=-tree] ul, ol[class|=webapp][class*=-tree] ol {
  margin-left: calc(var(--webapp-gapitem) + var(--webapp-gaplittle));
}
ul[class|=webapp][class*=-tree] > li, ul[class|=webapp][class*=-tree] ul > li, ul[class|=webapp][class*=-tree] ol > li, ol[class|=webapp][class*=-tree] > li, ol[class|=webapp][class*=-tree] ul > li, ol[class|=webapp][class*=-tree] ol > li {
  border-left: 1px solid hsl(var(--webapp-color-edge));
  padding-left: var(--webapp-gaplittle);
  line-height: 1.4rem;
}
ul[class|=webapp][class*=-tree] > li:before, ul[class|=webapp][class*=-tree] ul > li:before, ul[class|=webapp][class*=-tree] ol > li:before, ol[class|=webapp][class*=-tree] > li:before, ol[class|=webapp][class*=-tree] ul > li:before, ol[class|=webapp][class*=-tree] ol > li:before {
  content: "";
  position: relative;
  top: calc(0rem - var(--webapp-gapitem));
  left: calc(0rem - var(--webapp-gaplittle));
  width: var(--webapp-gapitem);
  height: 1rem;
  display: inline-block;
  border-bottom: 1px solid hsl(var(--webapp-color-edge));
}
ul[class|=webapp][class*=-tree] > li:last-of-type, ul[class|=webapp][class*=-tree] ul > li:last-of-type, ul[class|=webapp][class*=-tree] ol > li:last-of-type, ol[class|=webapp][class*=-tree] > li:last-of-type, ol[class|=webapp][class*=-tree] ul > li:last-of-type, ol[class|=webapp][class*=-tree] ol > li:last-of-type {
  border-left: none;
}
ul[class|=webapp][class*=-tree] > li:last-of-type:before, ul[class|=webapp][class*=-tree] ul > li:last-of-type:before, ul[class|=webapp][class*=-tree] ol > li:last-of-type:before, ol[class|=webapp][class*=-tree] > li:last-of-type:before, ol[class|=webapp][class*=-tree] ul > li:last-of-type:before, ol[class|=webapp][class*=-tree] ol > li:last-of-type:before {
  border-left: 1px solid hsl(var(--webapp-color-edge));
}
ul[class|=webapp][class*=-listmenu], ul[class|=webapp][class*=-listmenu] ul, ul[class|=webapp][class*=-listmenu] ol, ol[class|=webapp][class*=-listmenu], ol[class|=webapp][class*=-listmenu] ul, ol[class|=webapp][class*=-listmenu] ol {
  padding: var(--webapp-gaplittle);
  line-height: 1.6rem;
}
ul[class|=webapp][class*=-listmenu] > li, ul[class|=webapp][class*=-listmenu] ul > li, ul[class|=webapp][class*=-listmenu] ol > li, ol[class|=webapp][class*=-listmenu] > li, ol[class|=webapp][class*=-listmenu] ul > li, ol[class|=webapp][class*=-listmenu] ol > li {
  border-radius: var(--webapp-radius);
}
ul[class|=webapp][class*=-listmenu] > li > details > summary, ul[class|=webapp][class*=-listmenu] > li > a, ul[class|=webapp][class*=-listmenu] ul > li > details > summary, ul[class|=webapp][class*=-listmenu] ul[class|=webapp][class*=-popup] ul > li > details > summary, ul[class|=webapp][class*=-listmenu] ul > li > a, ul[class|=webapp][class*=-listmenu] ol > li > details > summary, ul[class|=webapp][class*=-listmenu] ol[class|=webapp][class*=-popup] ol > li > details > summary, ul[class|=webapp][class*=-listmenu] ol > li > a, ol[class|=webapp][class*=-listmenu] > li > details > summary, ol[class|=webapp][class*=-listmenu] > li > a, ol[class|=webapp][class*=-listmenu] ul > li > details > summary, ol[class|=webapp][class*=-listmenu] ul[class|=webapp][class*=-popup] ul > li > details > summary, ol[class|=webapp][class*=-listmenu] ul > li > a, ol[class|=webapp][class*=-listmenu] ol > li > details > summary, ol[class|=webapp][class*=-listmenu] ol[class|=webapp][class*=-popup] ol > li > details > summary, ol[class|=webapp][class*=-listmenu] ol > li > a {
  display: flex;
  padding: var(--webapp-gaplittle) var(--webapp-gapitem);
  border-radius: var(--webapp-radius);
}
ul[class|=webapp][class*=-listmenu] > li > details > summary:hover, ul[class|=webapp][class*=-listmenu] > li > a:hover, ul[class|=webapp][class*=-listmenu] ul > li > details > summary:hover, ul[class|=webapp][class*=-listmenu] ul[class|=webapp][class*=-popup] ul > li > details > summary:hover, ul[class|=webapp][class*=-listmenu] ul > li > a:hover, ul[class|=webapp][class*=-listmenu] ol > li > details > summary:hover, ul[class|=webapp][class*=-listmenu] ol[class|=webapp][class*=-popup] ol > li > details > summary:hover, ul[class|=webapp][class*=-listmenu] ol > li > a:hover, ol[class|=webapp][class*=-listmenu] > li > details > summary:hover, ol[class|=webapp][class*=-listmenu] > li > a:hover, ol[class|=webapp][class*=-listmenu] ul > li > details > summary:hover, ol[class|=webapp][class*=-listmenu] ul[class|=webapp][class*=-popup] ul > li > details > summary:hover, ol[class|=webapp][class*=-listmenu] ul > li > a:hover, ol[class|=webapp][class*=-listmenu] ol > li > details > summary:hover, ol[class|=webapp][class*=-listmenu] ol[class|=webapp][class*=-popup] ol > li > details > summary:hover, ol[class|=webapp][class*=-listmenu] ol > li > a:hover {
  background-color: hsl(var(--webapp-color-hint)/0.2);
}
ul[class|=webapp][class*=-inline], ol[class|=webapp][class*=-inline] {
  display: flex;
}
ul[class|=webapp][class*=-option] > li, ol[class|=webapp][class*=-option] > li {
  border-radius: var(--webapp-radius);
}
ul[class|=webapp][class*=-option] > li:hover, ol[class|=webapp][class*=-option] > li:hover {
  background-color: hsl(var(--webapp-color-hint)/0.2);
}
ul[class|=webapp][class*=-option] > li > label, ol[class|=webapp][class*=-option] > li > label {
  padding: var(--webapp-gaplittle) var(--webapp-gapitem);
}
ul[class|=webapp] > li.divider, ol[class|=webapp] > li.divider {
  height: 1px;
  margin: var(--webapp-gapitem);
  background-color: hsl(var(--webapp-color-edge));
}

dialog[class|=webapp] {
  display: flex;
  flex-direction: column;
  padding: 0;
  outline: none;
  border: 1px solid hsl(var(--webapp-color-foreground));
  border-radius: var(--webapp-radius);
  box-shadow: 0 0 0.2rem hsl(var(--webapp-color-foreground));
  max-height: 80%;
}
dialog[class|=webapp]::backdrop {
  background: hsl(var(--webapp-color-foreground)/0.4);
  backdrop-filter: var(--webapp-blur);
}
dialog[class|=webapp] > header:first-of-type {
  padding: var(--webapp-gapitem);
  color: hsl(var(--webapp-color-background));
  background-color: hsl(var(--webapp-color-anchor));
  border: 1px solid hsl(var(--webapp-color-background));
  border-radius: var(--webapp-radius);
}
dialog[class|=webapp] > section:first-of-type {
  padding: var(--webapp-gap);
  white-space: pre-wrap;
  word-break: break-all;
  overflow: auto;
}
dialog[class|=webapp] > footer:first-of-type {
  display: flex;
  gap: var(--webapp-gap);
  justify-content: center;
  padding: var(--webapp-gap);
}
dialog[class|=webapp] > footer:first-of-type > button {
  min-width: 6rem;
}
dialog[class|=webapp][class*=-warning] {
  border: 1px solid hsl(var(--webapp-color-danger));
  box-shadow: 0 0 0 0.2rem hsl(var(--webapp-color-danger)/0.5);
}
dialog[class|=webapp][class*=-warning] > header:first-of-type {
  color: hsl(var(--webapp-color-background));
  background-color: hsl(var(--webapp-color-danger));
  border: 1px solid hsl(var(--webapp-color-background));
}
dialog[class|=webapp][class*=-hint] {
  color: hsl(var(--webapp-color-background));
  border: none;
  box-shadow: none;
  background-color: hsl(var(--webapp-color-foreground)/0.7);
  transition: opacity 0.4s ease-in-out;
}

:is([class|=webapp])[class*=-edge] {
  border: 1px solid hsl(var(--webapp-color-edge));
  border-radius: var(--webapp-radius);
}
:is([class|=webapp])[class*=-bar] {
  display: flex;
  gap: var(--webapp-gapitem);
}
:is([class|=webapp])[class*=-bar][class*=-merge] {
  gap: 0;
}
:is([class|=webapp])[class*=-bar][class*=-merge] > * {
  border-radius: 0;
}
:is([class|=webapp])[class*=-bar][class*=-merge] > :not(:last-child) {
  border-right: none;
}
:is([class|=webapp])[class*=-bar][class*=-merge] > :first-child {
  border-top-left-radius: var(--webapp-radius);
  border-bottom-left-radius: var(--webapp-radius);
}
:is([class|=webapp])[class*=-bar][class*=-merge] > :last-child {
  border-top-right-radius: var(--webapp-radius);
  border-bottom-right-radius: var(--webapp-radius);
}