/**
 * GUIobjects CSS Framework
 * Version: 1.3.0
 * https://www.guiobjects.com
 *
 * Provides the core utility classes, layout, typography, and component styles
 * for the GUIobjects design system. All styles are configurable via CSS custom
 * properties and are designed for easy integration and extensibility.
 *
 * Copyright 2025 Tellbrite Corporation. All rights reserved.
 */

@import url("https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=MuseoModerno:ital,wght@0,100..900;1,100..900&family=Noto+Serif+Display:ital,wght@0,100..900;1,100..900&family=Rokkitt:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@24,200,0,0");

/**
# Fonts
**/
:root {
  --gui-deco-fonts: "MuseoModerno", fantasy;
  --gui-hand-fonts: "Caveat", cursive;
  --gui-icon-fonts: "Material Symbols Rounded";
  --gui-mono-fonts: "Source Code Pro", monospace;
  --gui-sans-fonts: "Inter", sans-serif;
  --gui-slab-fonts: "Rokkitt", serif;
  --gui-text-fonts: var(--gui-sans-fonts);
  --gui-type-fonts: "Noto Serif Display", serif;
}

/**
# Colors
**/
:root {
  --gui-base-color: snow;
  --gui-code-color: khaki;
  --gui-dark-color: hsl(from var(--gui-base-color) h 80 10);
  --gui-edge-color: color-mix(in srgb, var(--gui-base-color), gray 30%);
  --gui-fail-color: tomato;
  --gui-fill-color: color-mix(in srgb, var(--gui-trim-color), white 90%);
  --gui-gray-color: dimgray;
  --gui-icon-color: color-mix(in srgb, var(--gui-base-color), black 60%);
  --gui-info-color: color-mix(in srgb, var(--gui-trim-color), white 80%);
  --gui-link-color: color-mix(in srgb, var(--gui-trim-color), black 10%);
  --gui-lite-color: hsl(from var(--gui-base-color) h 20 90);
  --gui-mark-color: hsl(from var(--gui-base-color) calc(h + 60) 90 90);
  --gui-pane-color: color-mix(in srgb, var(--gui-base-color), white 90%);
  --gui-pass-color: palegreen;
  --gui-text-color: var(--gui-dark-color);
  --gui-tint-color: color-mix(in srgb, var(--gui-base-color), white 80%);
  --gui-tone-color: color-mix(in srgb, var(--gui-base-color), gray 50%);
  --gui-trim-color: hsl(from var(--gui-base-color) calc(h - 10) 50 40);
}
@media (prefers-color-scheme: dark) {
  :root {
    --gui-edge-color: color-mix(in srgb, var(--gui-base-color), white 50%);
    --gui-fill-color: color-mix(in srgb, var(--gui-trim-color), black 60%);
    --gui-icon-color: color-mix(in srgb, var(--gui-base-color), white 60%);
    --gui-link-color: color-mix(in srgb, var(--gui-trim-color), black 10%);
    --gui-pane-color: color-mix(in srgb, var(--gui-base-color), black 80%);
    --gui-text-color: var(--gui-lite-color);
    --gui-tint-color: color-mix(in srgb, var(--gui-base-color), white 20%);
  }
}

/**
# Widths
**/
:root {
  --gui-blur-width: 6px;
  --gui-edge-width: 2px;
  --gui-icon-width: 24px;
  --gui-item-width: calc(8rem + 5vw);
  --gui-pane-width: 960px;
  --gui-text-width: calc(15px + 0.2vw);
}

/**
# Spacing
**/
:root {
  --gui-edge-space: calc(15px + 0.3vw);
  --gui-pane-space: calc(3rem + 5vw);
  --gui-text-space: 1.25;
}

/**
# Corners
**/
:root {
  --gui-edge-round: 0.5rem;
  --gui-icon-round: 12.5%;
}

/**
# Others
**/
:root {
  --gui-edge-style: solid;
  --gui-safe-inset: 7rem;
}

/**
# Tablet breakpoint.
**/
@media all and (min-width: 768px) {
  :root {
    --gui-safe-inset: 0vh;
  }      
}

:root {
  color: var(--gui-text-color);
  font-size: var(--gui-text-width);
  font-family: var(--gui-text-fonts);
  line-height: var(--gui-text-space);
  background-color: var(--gui-pane-color);
}

.gui-item {
  padding: 0;
  border: none;
  margin-left: 0;
  margin-right: 0;
  color: inherit;
  appearance: none;
  object-fit: contain;
  box-sizing: border-box;
  background-color: transparent;
  fill: var(--gui-text-color);
  font-family: var(--gui-text-fonts);
}
.gui-item[data-gui~="hide"] {
  width: 1px !important;
  height: 1px;
  border: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  position: absolute;
  clip: rect(0 0 0 0);
}
.gui-item[data-gui~="wide"] {
  flex: none;
  width: 100%;
  max-width: 100%;
}
.gui-item[data-gui~="100w"] {
  flex: none;
  width: 100%;
  max-width: 100px;
}
.gui-item[data-gui~="200w"] {
  flex: none;
  width: 100%;
  max-width: 200px;
}
.gui-item[data-gui~="300w"] {
  flex: none;
  width: 100%;
  max-width: 300px;
}
.gui-item[data-gui~="400w"] {
  flex: none;
  width: 100%;
  max-width: 400px;
}
.gui-item[data-gui~="500w"] {
  flex: none;
  width: 100%;
  max-width: 500px;
}
.gui-item[data-gui~="600w"] {
  flex: none;
  width: 100%;
  max-width: 600px;
}
.gui-item[data-gui~="700w"] {
  flex: none;
  width: 100%;
  max-width: 700px;
}
.gui-item[data-gui~="800w"] {
  flex: none;
  width: 100%;
  max-width: 800px;
}
.gui-item[data-gui~="900w"] {
  flex: none;
  width: 100%;
  max-width: 900px;
}
.gui-item[data-gui~="1000w"] {
  flex: none;
  width: 100%;
  max-width: 1000px;
}
.gui-item[data-gui~="tall"] {
  flex: none;
  height: 100%;
  max-height: 100%;
}
.gui-item[data-gui~="100h"] {
  flex: none;
  height: 100px;
}
.gui-item[data-gui~="200h"] {
  flex: none;
  height: 200px;
}
.gui-item[data-gui~="300h"] {
  flex: none;
  height: 300px;
}
.gui-item[data-gui~="400h"] {
  flex: none;
  height: 400px;
}
.gui-item[data-gui~="500h"] {
  flex: none;
  height: 500px;
}
.gui-item[data-gui~="600h"] {
  flex: none;
  height: 600px;
}
.gui-item[data-gui~="700h"] {
  flex: none;
  height: 700px;
}
.gui-item[data-gui~="800h"] {
  flex: none;
  height: 800px;
}
.gui-item[data-gui~="900h"] {
  flex: none;
  height: 900px;
}
.gui-item[data-gui~="1000h"] {
  flex: none;
  height: 1000px;
}
.gui-item[data-gui~="full"] {
  margin: 0;
  flex: none;
  width: 100vw;
  height: calc(100vh - var(--gui-safe-inset));
}
.gui-item[data-gui~="grow"] {
  flex: 2 1 var(--gui-item-width);
}
.gui-item[data-gui~="grow-"] {
  flex: 1 1 var(--gui-item-width);
}
.gui-item[data-gui~="grow+"] {
  flex: 3 1 var(--gui-item-width);
}
.gui-item[data-gui~="stretch"] {
  align-self: stretch;
}
.gui-item[data-gui~="pane"] {
  width: 100%;
  max-width: calc(var(--gui-pane-width) * 1.00 + 20vw);
  margin: var(--gui-pane-space) auto;
}
.gui-item[data-gui~="pane-"] {
  width: 100%;
  max-width: calc(var(--gui-pane-width) * 0.80 + 10vw);
  margin: var(--gui-pane-space) auto;
}
.gui-item[data-gui~="pane+"] {
  width: 100%;
  max-width: calc(var(--gui-pane-width) * 1.20 + 30vw);
  margin: var(--gui-pane-space) auto;
}
.gui-item[data-gui~="clip"] {
  overflow: hidden;
  text-overflow: ellipsis;
}
.gui-item[data-gui~="nowrap"] {
  text-wrap: nowrap;
}
.gui-item[data-gui~="snap-x"] {
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-type: x mandatory;
}
.gui-item[data-gui~="snap-x"] > * {
  scroll-snap-align: center;
}
.gui-item[data-gui~="snap-y"] {
  scroll-behavior: smooth;
  scroll-snap-stop: always;
  scroll-snap-type: y mandatory;
}
.gui-item[data-gui~="snap-y"] > * {
  scroll-snap-align: center;
}
.gui-item[data-gui~="scroll-x"] {
  overflow-x: scroll;
}
.gui-item[data-gui~="scroll-y"] {
  overflow-y: scroll;
}
.gui-item[data-gui~="layer"] {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 1;
  background-color: var(--gui-pane-color);
}
.gui-item[data-gui~="layer"][data-gui-layer="top"] {
  bottom: auto;
}
.gui-item[data-gui~="layer"][data-gui-layer="left"] {
  right: auto;
}
.gui-item[data-gui~="layer"][data-gui-layer="right"] {
  left: auto;
}
.gui-item[data-gui~="layer"][data-gui-layer="bottom"] {
  top: auto;
}
.gui-item[data-gui~="layer"][data-gui-layer="center"] {
  width: fit-content;
  height: fit-content;
}
.gui-item[data-gui~="popup"] {
  display: none;
}
.gui-item[data-gui~="popup"]:target,
.gui-item[data-gui~="popup"]:popover-open {
  height: auto;
  margin: auto;
  inset: calc(var(--gui-edge-space) / 2);
  position: fixed;
  padding: var(--gui-edge-space);
  background-color: var(--gui-pane-color);
  display: initial;
}
.gui-item[data-gui~="popup"]:target::before {
  content: "";
  width: 100%;
  height: auto;
  margin: auto;
  inset: 0 0 0 0;
  position: fixed;
}
.gui-item[data-gui~="popup"]:popover-open::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}
.gui-item[data-gui~="popup"]:target [data-gui~="popup?"],
.gui-item[data-gui~="popup"]:popover-open [data-gui~="popup?"] {
  display: initial;
}
.gui-item[data-gui~="popup"][data-gui-popup~="top"]:target,
.gui-item[data-gui~="popup"][data-gui-popup~="top"]:popover-open {
  bottom: auto;
}
.gui-item[data-gui~="popup"][data-gui-popup~="left"]:target,
.gui-item[data-gui~="popup"][data-gui-popup~="left"]:popover-open {
  right: auto;
  width: calc(var(--gui-item-width) * 2);
}
.gui-item[data-gui~="popup"][data-gui-popup~="right"]:target,
.gui-item[data-gui~="popup"][data-gui-popup~="right"]:popover-open {
  left: auto;
  width: calc(var(--gui-item-width) * 2);
}
.gui-item[data-gui~="popup"][data-gui-popup~="bottom"]:target,
.gui-item[data-gui~="popup"][data-gui-popup~="bottom"]:popover-open {
  top: auto;
}
.gui-item[data-gui~="popup"][data-gui-popup~="center"]:target,
.gui-item[data-gui~="popup"][data-gui-popup~="center"]:popover-open {
  width: fit-content;
  height: fit-content;
}
.gui-item[data-gui~="flyout"] {
  position: absolute;
  z-index: 1;
  background-color: var(--gui-pane-color);
}
.gui-item[data-gui~="choice"] {
  cursor: pointer;
}
.gui-item[data-gui~="choice"]:focus-within {
  outline: auto;
}
.gui-item[data-gui~="choice"]:has(:checked) > * {
  --gui-icon-color: color-mix(in srgb, var(--gui-mark-color), black 60%);
  background-color: var(--gui-mark-color) !important;
  color: var(--gui-icon-color);
}
.gui-item[data-gui~="raise"] {
  z-index: 100;
}
.gui-item[data-gui~="raise-"] {
  z-index: 50;
}
.gui-item[data-gui~="raise+"] {
  z-index: 150;
}
.gui-item[data-gui~="left"] {
  text-align: left;
}
.gui-item[data-gui~="center"] {
  text-align: center;
}
.gui-item[data-gui~="right"] {
  text-align: right;
}
.gui-item[data-gui~="justify"] {
  text-align: justify;
}
.gui-item[data-gui~="lite"] {
  color: var(--gui-lite-color);
  fill: var(--gui-lite-color);
}
.gui-item[data-gui~="dark"] {
  color: var(--gui-dark-color);
  fill: var(--gui-dark-color);
}
.gui-item[data-gui~="gray"] {
  color: var(--gui-gray-color);
  fill: var(--gui-gray-color);
}
.gui-item[data-gui~="link"] {
  color: var(--gui-link-color);
  fill: var(--gui-link-color);
  text-decoration: none;
}
.gui-item[data-gui~="mark"] {
  color: var(--gui-mark-color);
  fill: var(--gui-mark-color);
}
.gui-item[data-gui~="base"] {
  background-color: var(--gui-base-color);
}
.gui-item[data-gui~="fill"] {
  background-color: var(--gui-fill-color);
}
.gui-item[data-gui~="tint"] {
  background-color: var(--gui-tint-color);
}
.gui-item[data-gui~="tone"] {
  background-color: var(--gui-tone-color);
}
.gui-item[data-gui~="trim"] {
  background-color: var(--gui-trim-color);
}
.gui-item[data-gui~="white"] {
  background-color: white;
}
.gui-item[data-gui~="black"] {
  background-color: black;
}
.gui-item[data-gui~="clear"] {
  background-color: transparent;
}
.gui-item[data-gui~="metal"] {
  background: radial-gradient(circle, white 0%, var(--gui-gray-color) 100%);
}
.gui-item[data-gui~="darken"] {
  background-color: rgba(0, 0, 0, 50%);
}
.gui-item[data-gui~="darken-"] {
  background-color: rgba(0, 0, 0, 25%);
}
.gui-item[data-gui~="darken+"] {
  background-color: rgba(0, 0, 0, 75%);
}
.gui-item[data-gui~="lighten"] {
  background-color: rgba(255, 255, 255, 50%);
}
.gui-item[data-gui~="lighten-"] {
  background-color: rgba(255, 255, 255, 25%);
}
.gui-item[data-gui~="lighten+"] {
  background-color: rgba(255, 255, 255, 75%);
}
.gui-item[data-gui~="info"] {
  color: color-mix(in srgb, var(--gui-info-color), black 70%);
  background-color: color-mix(in srgb, var(--gui-info-color), white 70%);
}
.gui-item[data-gui~="pass"] {
  color: color-mix(in srgb, var(--gui-pass-color), black 70%);
  background-color: color-mix(in srgb, var(--gui-pass-color), white 70%);
}
.gui-item[data-gui~="fail"] {
  color: color-mix(in srgb, var(--gui-fail-color), black 70%);
  background-color: color-mix(in srgb, var(--gui-fail-color), white 70%);
}
.gui-item[data-gui~="code"] {
  color: color-mix(in srgb, var(--gui-code-color), var(--gui-text-color) 80%);
  background-color: color-mix(in srgb, var(--gui-code-color), var(--gui-pane-color) 80%);
}
.gui-item[data-gui~="hover"]:hover {
  color: var(--gui-lite-color);
  background: var(--gui-tone-color);
}
.gui-item[data-gui~="border"] {
  border-width: calc(var(--gui-edge-width) * 1.0);
  border-style: var(--gui-edge-style);
  border-color: var(--gui-edge-color);
}
.gui-item[data-gui~="border-"] {
  border-width: calc(var(--gui-edge-width) * 0.5);
  border-style: var(--gui-edge-style);
  border-color: var(--gui-edge-color);
}
.gui-item[data-gui~="border+"] {
  border-width: calc(var(--gui-edge-width) * 1.5);
  border-style: var(--gui-edge-style);
  border-color: var(--gui-edge-color);
}
.gui-item[data-gui~="round"] {
  border-radius: calc(var(--gui-edge-round) * 1.0);
}
.gui-item[data-gui~="round-"] {
  border-radius: calc(var(--gui-edge-round) * 0.5);
}
.gui-item[data-gui~="round+"] {
  border-radius: calc(var(--gui-edge-round) * 1.5);
}
.gui-item[data-gui~="pill"] {
  border-radius: 2.0rem;
}
.gui-item[data-gui~="pad"] {
  padding: calc(var(--gui-edge-space) * 1.0);
}
.gui-item[data-gui~="pad-"] {
  padding: calc(var(--gui-edge-space) * 0.5);
}
.gui-item[data-gui~="pad+"] {
  padding: calc(var(--gui-edge-space) * 1.5);
}
.gui-item[data-gui~="pack"] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.gui-item[data-gui~="space"] {
  margin-top: calc(var(--gui-edge-space) * 1.0);
  margin-bottom: calc(var(--gui-edge-space) * 1.0);
}
.gui-item[data-gui~="space-"] {
  margin-top: calc(var(--gui-edge-space) * 0.5);
  margin-bottom: calc(var(--gui-edge-space) * 0.5);
}
.gui-item[data-gui~="space+"] {
  margin-top: calc(var(--gui-edge-space) * 1.5);
  margin-bottom: calc(var(--gui-edge-space) * 1.5);
}
.gui-item[data-gui~="indent"] {
  margin-left: calc(var(--gui-edge-space) * 2.0);
}
.gui-item[data-gui~="indent-"] {
  margin-left: calc(var(--gui-edge-space) * 1.0);
}
.gui-item[data-gui~="indent+"] {
  margin-left: calc(var(--gui-edge-space) * 3.0);
}
.gui-item[data-gui~="outdent"] {
  margin-left: calc(var(--gui-edge-space) * -2.0);
}
.gui-item[data-gui~="outdent-"] {
  margin-left: calc(var(--gui-edge-space) * -1.0);
}
.gui-item[data-gui~="outdent+"] {
  margin-left: calc(var(--gui-edge-space) * -3.0);
}
.gui-item[data-gui~="serif"] {
  font-family: var(--gui-type-fonts);
}
.gui-item[data-gui~="sans-serif"] {
  font-family: var(--gui-sans-fonts);
}
.gui-item[data-gui~="monospace"] {
  font-family: var(--gui-mono-fonts);
}
.gui-item[data-gui~="cursive"] {
  font-family: var(--gui-hand-fonts);
}
.gui-item[data-gui~="fantasy"] {
  font-family: var(--gui-deco-fonts);
}
.gui-item[data-gui~="slab"] {
  font-family: var(--gui-slab-fonts);
}
.gui-item[data-gui~="xx-small"] {
  font-size: 60%;
}
.gui-item[data-gui~="x-small"] {
  font-size: 75%;
}
.gui-item[data-gui~="small"] {
  font-size: 87.5%;
}
.gui-item[data-gui~="medium"] {
  font-size: 100%;
}
.gui-item[data-gui~="large"] {
  font-size: 125%;
}
.gui-item[data-gui~="x-large"] {
  font-size: 150%;
}
.gui-item[data-gui~="xx-large"] {
  font-size: 200%;
}
.gui-item[data-gui~="xxx-large"] {
  font-size: 300%;
}
.gui-item[data-gui~="jumbo"] {
  font-size: clamp(3rem, 4vw , 6rem);
}
.gui-item[data-gui~="x-jumbo"] {
  font-size: clamp(3rem, 6vw , 8rem);
}
.gui-item[data-gui~="xx-jumbo"] {
  font-size: clamp(3rem, 8vw , 10rem);
}
.gui-item[data-gui~="xxx-jumbo"] {
  font-size: clamp(3rem, 10vw , 12rem);
}
.gui-item[data-gui~="thin"] {
  font-weight: 200;
}
.gui-item[data-gui~="thin-"] {
  font-weight: 300;
}
.gui-item[data-gui~="thin+"] {
  font-weight: 100;
}
.gui-item[data-gui~="normal"] {
  font-weight: 400;
}
.gui-item[data-gui~="bold"] {
  font-weight: 700;
}
.gui-item[data-gui~="bold-"] {
  font-weight: 600;
}
.gui-item[data-gui~="bold+"] {
  font-weight: 800;
}
.gui-item[data-gui~="italic"] {
  font-style: italic;
}
.gui-item[data-gui~="lowercase"] {
  text-transform: lowercase;
}
.gui-item[data-gui~="uppercase"] {
  text-transform: uppercase;
}
.gui-item[data-gui~="small-caps"] {
  font-variant: small-caps;
}
.gui-item[data-gui~="upright"] {
  writing-mode: vertical-rl;
}
.gui-item[data-gui~="cover"] {
  display: block;
  object-fit: cover;
}
.gui-item[data-gui~="pin-a1"] {
  object-position: left top;
}
.gui-item[data-gui~="pin-a2"] {
  object-position: left center;
}
.gui-item[data-gui~="pin-a3"] {
  object-position: left bottom;
}
.gui-item[data-gui~="pin-b1"] {
  object-position: center top;
}
.gui-item[data-gui~="pin-b2"] {
  object-position: center center;
}
.gui-item[data-gui~="pin-b3"] {
  object-position: center bottom;
}
.gui-item[data-gui~="pin-c1"] {
  object-position: right top;
}
.gui-item[data-gui~="pin-c2"] {
  object-position: right center;
}
.gui-item[data-gui~="pin-c3"] {
  object-position: right bottom;
}
.gui-item[data-gui~="unmark"] {
  list-style-type: none;
}
.gui-item[data-gui~="invert"] {
  filter: invert();
}
.gui-item[data-gui~="sepia"] {
  filter: sepia(0.66);
}
.gui-item[data-gui~="sepia-"] {
  filter: sepia(0.33);
}
.gui-item[data-gui~="sepia+"] {
  filter: sepia(1.0);
}
.gui-item[data-gui~="saturate"] {
  filter: saturate(2.0);
}
.gui-item[data-gui~="saturate-"] {
  filter: saturate(1.5);
}
.gui-item[data-gui~="saturate+"] {
  filter: saturate(2.5);
}
.gui-item[data-gui~="grayscale"] {
  filter: grayscale(0.66);
}
.gui-item[data-gui~="grayscale-"] {
  filter: grayscale(0.33);
}
.gui-item[data-gui~="grayscale+"] {
  filter: grayscale(1.0);
}
.gui-item[data-gui~="blur"] {
  filter: blur(calc(var(--gui-blur-width) * 1.0));
}
.gui-item[data-gui~="blur-"] {
  filter: blur(calc(var(--gui-blur-width) * 0.5));
}
.gui-item[data-gui~="blur+"] {
  filter: blur(calc(var(--gui-blur-width) * 1.5));
}
.gui-item[data-gui~="frost"] {
  backdrop-filter: blur(calc(var(--gui-blur-width) * 1.0));
}
.gui-item[data-gui~="frost-"] {
  backdrop-filter: blur(calc(var(--gui-blur-width) * 0.5));
}
.gui-item[data-gui~="frost+"] {
  backdrop-filter: blur(calc(var(--gui-blur-width) * 1.5));
}
.gui-item[data-gui~="shadow"] {
  filter: drop-shadow(1px 1px calc(var(--gui-blur-width) * 0.50) var(--gui-base-color));
}
.gui-item[data-gui~="shadow-"] {
  filter: drop-shadow(1px 1px calc(var(--gui-blur-width) * 0.25) var(--gui-base-color));
}
.gui-item[data-gui~="shadow+"] {
  filter: drop-shadow(1px 1px calc(var(--gui-blur-width) * 1.00) var(--gui-base-color));
}
.gui-item[data-gui~="circle"] {
  clip-path: circle(closest-side);
}
.gui-item[data-gui~="blend"] {
  mask-size: cover;
  mask-mode: alpha;
  mask-repeat: no-repeat;
  mask-image: 
    linear-gradient(0deg, transparent 0%, white 35%), 
    linear-gradient(15deg, transparent 0%, white 25%), 
    linear-gradient(345deg, transparent 0%, white 15%);
  mask-composite: intersect;
}
.gui-item[data-gui~="blob"] {
  position: relative;
}
.gui-item[data-gui~="blob"]::before {
  inset: 0;
  content: "";
  position: absolute;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  z-index: -1;
}
.gui-item[data-gui~="blob"][data-gui-blob~="base"]::before {
  background-color: var(--gui-base-color);
}
.gui-item[data-gui~="blob"][data-gui-blob~="fill"]::before {
  background-color: var(--gui-fill-color);
}
.gui-item[data-gui~="blob"][data-gui-blob~="tint"]::before {
  background-color: var(--gui-tint-color);
}
.gui-item[data-gui~="blob"][data-gui-blob~="tone"]::before {
  background-color: var(--gui-tone-color);
}
.gui-item[data-gui~="blob"][data-gui-blob~="trim"]::before {
  background-color: var(--gui-trim-color);
}
.gui-item[data-gui~="blob"][data-gui-blob~="dough"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/dough.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="egg"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/egg.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="eggplant"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/eggplant.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="marshmellow"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/marshmellow.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="pear"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/pear.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="ricebowl"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/ricebowl.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="salami"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/salami.svg");
}
.gui-item[data-gui~="blob"][data-gui-blob~="toast"]::before {
  mask-image: url("https://cdn.guiobjects.com/images/blobs/toast.svg");
}
.gui-item[data-gui~="tablet"],
.gui-item[data-gui~="laptop"],
.gui-item[data-gui~="fullhd"],
.gui-item[data-gui~="quadhd"] {
  display: none;
}
.gui-item[data-gui~="phone"] {
  display: initial;
}
@media all and (min-width: 768px) {
  .gui-item[data-gui~="phone"],
  .gui-item[data-gui~="laptop"],
  .gui-item[data-gui~="fullhd"],
  .gui-item[data-gui~="quadhd"] {
    display: none;
  }
  .gui-item[data-gui~="tablet"] {
    display: initial;
  }
}
@media all and (min-width: 1366px) {
  .gui-item[data-gui~="phone"],
  .gui-item[data-gui~="tablet"],
  .gui-item[data-gui~="fullhd"],
  .gui-item[data-gui~="quadhd"] {
    display: none;
  }
  .gui-item[data-gui~="laptop"] {
    display: initial;
  }
}
@media all and (min-width: 1920px) {
  .gui-item[data-gui~="phone"],
  .gui-item[data-gui~="tablet"],
  .gui-item[data-gui~="laptop"],
  .gui-item[data-gui~="quadhd"] {
    display: none;
  }
  .gui-item[data-gui~="fullhd"] {
    display: initial;
  }
}
@media all and (min-width: 2560px) {
  .gui-item[data-gui~="phone"],
  .gui-item[data-gui~="tablet"],
  .gui-item[data-gui~="laptop"],
  .gui-item[data-gui~="fullhd"] {
    display: none;
  }
  .gui-item[data-gui~="quadhd"] {
    display: initial;
  }
}

i.gui-item[data-gui~="icon"] {
  line-height: 1;
  font-style: normal;
  display: inline-block;
  vertical-align: middle;
  font-family: var(--gui-icon-fonts);
}
i.gui-item[data-gui~="icon"][data-gui-icon]::before {
  content: attr(data-gui-icon) / " ";
}
img.gui-item[data-gui~="icon"] {
  display: inline-block;
  vertical-align: middle;
  width: var(--gui-icon-width);
  height: var(--gui-icon-width);
  border-radius: var(--gui-icon-round);
}
img.gui-item[data-gui~="icon"][data-gui-icon] {
  mask-size: contain;
  mask-repeat: no-repeat;
  background-color: var(--gui-icon-color);
}
svg.gui-item[data-gui~="icon"] {
  vertical-align: middle;
  fill: var(--gui-icon-color);
  width: var(--gui-icon-width);
  height: var(--gui-icon-width);
}
:is(i, img, svg).gui-item[data-gui~="icon"][data-gui~="circle"] {
  border-radius: 50%;
}

:is(a, button, summary).gui-item {
  cursor: pointer;
}
:is(a, button, summary).gui-item[data-gui~="button"] {
  list-style: none;
  text-decoration: none;
  display: inline-block;
}
:is(a, button, summary).gui-item[data-gui~="button"][data-gui~="pad"] {
  padding-top: calc(var(--gui-edge-space) * 0.50) !important;
  padding-left: calc(var(--gui-edge-space) * 1.00) !important;
  padding-right: calc(var(--gui-edge-space) * 1.00) !important;
  padding-bottom: calc(var(--gui-edge-space) * 0.50) !important;
}
:is(a, button, summary).gui-item[data-gui~="button"][data-gui~="pad-"] {
  padding-top: calc(var(--gui-edge-space) * 0.25) !important;
  padding-left: calc(var(--gui-edge-space) * 0.75) !important;
  padding-right: calc(var(--gui-edge-space) * 0.75) !important;
  padding-bottom: calc(var(--gui-edge-space) * 0.25) !important;
}
:is(a, button, summary).gui-item[data-gui~="button"][data-gui~="pad+"] {
  padding-top: calc(var(--gui-edge-space) * 0.75) !important;
  padding-left: calc(var(--gui-edge-space) * 1.25) !important;
  padding-right: calc(var(--gui-edge-space) * 1.25) !important;
  padding-bottom: calc(var(--gui-edge-space) * 0.75) !important;
}
:is(a, button, summary).gui-item[data-gui~="button"]:disabled {
  color: var(--gui-gray-color);
  background: transparent;
}
summary.gui-item[data-gui~="button"]::-webkit-details-marker {
  display: none;
}

hr.gui-item {
  border-left: none !important;
  border-bottom: none !important;
}

input.gui-item[type="range"] {
  appearance: auto;
}

.gui-flex {
  display: flex;
  flex-flow: column;
  flex-wrap: nowrap;
  position: relative;
  text-align: inherit;
  align-items: start;
  align-content: start;
  justify-content: center;
}
.gui-flex[data-gui~="gap"] {
  gap: calc(var(--gui-edge-space) * 1.0);
}
.gui-flex[data-gui~="gap-"] {
  gap: calc(var(--gui-edge-space) * 0.5);
}
.gui-flex[data-gui~="gap+"] {
  gap: calc(var(--gui-edge-space) * 1.5);
}
.gui-flex[data-gui~="wrap"] {
  flex-wrap: wrap;
}
.gui-flex[data-gui~="left"] {
  align-items: start;
}
.gui-flex[data-gui~="center"] {
  align-items: center;
}
.gui-flex[data-gui~="right"] {
  align-items: end;
}
.gui-flex[data-gui~="top"] {
  justify-content: start;
}
.gui-flex[data-gui~="middle"] {
  justify-content: center;
}
.gui-flex[data-gui~="bottom"] {
  justify-content: end;
}
.gui-flex[data-gui~="spread"] {
  justify-content: space-around;
}
.gui-flex[data-gui~="evenly"] {
  justify-content: space-evenly;
}
.gui-flex[data-gui~="distribute"] {
  justify-content: space-between;
}
.gui-flex[data-gui~="row"] {
  flex-direction: row;
}
.gui-flex[data-gui~="row"][data-gui~="left"] {
  justify-content: start;
}
.gui-flex[data-gui~="row"][data-gui~="center"] {
  justify-content: center;
}
.gui-flex[data-gui~="row"][data-gui~="right"] {
  justify-content: end;
}
.gui-flex[data-gui~="row"][data-gui~="spread"] {
  justify-content: space-around;
}
.gui-flex[data-gui~="row"][data-gui~="evenly"] {
  justify-content: space-evenly;
}
.gui-flex[data-gui~="row"][data-gui~="distribute"] {
  justify-content: space-between;
}
.gui-flex[data-gui~="row"][data-gui~="top"] {
  align-items: start;
}
.gui-flex[data-gui~="row"][data-gui~="middle"] {
  align-items: center;
}
.gui-flex[data-gui~="row"][data-gui~="bottom"] {
  align-items: end;
}
.gui-flex[data-gui~="row"][data-gui~="tidy"] {
  --gui-item-scale: 2;
}
.gui-flex[data-gui~="row"][data-gui~="tidy-"] {
  --gui-item-scale: 1;
}
.gui-flex[data-gui~="row"][data-gui~="tidy+"] {
  --gui-item-scale: 3;
}
.gui-flex[data-gui~="row"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
  --gui-item-count: calc(var(--gui-item-scale, 1) * 1);
}
.gui-flex[data-gui~="row"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) > 
.gui-item:is([data-gui~="grow"], [data-gui~="grow-"], [data-gui~="grow+"]) {
  flex-basis: 100%;
  max-width: calc((100% - var(--gui-item-space, 0px) * (var(--gui-item-count) - 1)) / var(--gui-item-count));
}
.gui-flex[data-gui~="row"][data-gui~="gap"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
  --gui-item-space: calc(var(--gui-edge-space) * 1.0);
  gap: var(--gui-item-space);
}
.gui-flex[data-gui~="row"][data-gui~="gap-"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
  --gui-item-space: calc(var(--gui-edge-space) * 0.5);
  gap: var(--gui-item-space);
}
.gui-flex[data-gui~="row"][data-gui~="gap+"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
  --gui-item-space: calc(var(--gui-edge-space) * 1.5);
  gap: var(--gui-item-space);
}
.gui-flex[data-gui~="popup"]:target,
.gui-flex[data-gui~="popup"]:popover-open {
  display: flex;
}
.gui-flex[data-gui~="popup"]:target [data-gui~="hug-"],
.gui-flex[data-gui~="popup"]:target [data-gui~="hug"],
.gui-flex[data-gui~="popup"]:target [data-gui~="hug+"],
.gui-flex[data-gui~="popup"]:popover-open [data-gui~="hug-"],
.gui-flex[data-gui~="popup"]:popover-open [data-gui~="hug"],
.gui-flex[data-gui~="popup"]:popover-open [data-gui~="hug+"] {
  flex-direction: column;
}
.gui-flex[data-gui~="popup"]:target [data-gui~="popup?"],
.gui-flex[data-gui~="popup"]:popover-open [data-gui~="popup?"] {
  display: flex;
}
.gui-flex[data-gui~="tablet"],
.gui-flex[data-gui~="laptop"],
.gui-flex[data-gui~="fullhd"],
.gui-flex[data-gui~="quadhd"] {
  display: none;
}
.gui-flex[data-gui~="phone"] {
  display: flex;
}
@media all and (min-width: 768px) {
  .gui-flex[data-gui~="phone"],
  .gui-flex[data-gui~="laptop"],
  .gui-flex[data-gui~="fullhd"],
  .gui-flex[data-gui~="quadhd"] {
    display: none;
  }
  .gui-flex[data-gui~="tablet"] {
    display: flex;
  }
  .gui-flex[data-gui~="hug-"] {
    flex-direction: row;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="left"] {
    justify-content: start;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="center"] {
    justify-content: center;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="right"] {
    justify-content: end;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="spread"] {
    justify-content: space-around;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="evenly"] {
    justify-content: space-evenly;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="distribute"] {
    justify-content: space-between;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="top"] {
    align-items: start;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="middle"] {
    align-items: center;
  }
  .gui-flex[data-gui~="hug-"][data-gui~="bottom"] {
    align-items: end;
  }
  .gui-flex[data-gui~="row"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
    --gui-item-count: calc(var(--gui-item-scale, 1) * 2);
  }
}
@media all and (min-width: 1366px) {
  .gui-flex[data-gui~="phone"],
  .gui-flex[data-gui~="tablet"],
  .gui-flex[data-gui~="fullhd"],
  .gui-flex[data-gui~="quadhd"] {
    display: none;
  }
  .gui-flex[data-gui~="laptop"] {
    display: flex;
  }
  .gui-flex[data-gui~="hug"] {
    flex-direction: row;
  }
  .gui-flex[data-gui~="hug"][data-gui~="left"] {
    justify-content: start;
  }
  .gui-flex[data-gui~="hug"][data-gui~="center"] {
    justify-content: center;
  }
  .gui-flex[data-gui~="hug"][data-gui~="right"] {
    justify-content: end;
  }
  .gui-flex[data-gui~="hug"][data-gui~="spread"] {
    justify-content: space-around;
  }
  .gui-flex[data-gui~="hug"][data-gui~="evenly"] {
    justify-content: space-evenly;
  }
  .gui-flex[data-gui~="hug"][data-gui~="distribute"] {
    justify-content: space-between;
  }
  .gui-flex[data-gui~="hug"][data-gui~="top"] {
    align-items: start;
  }
  .gui-flex[data-gui~="hug"][data-gui~="middle"] {
    align-items: center;
  }
  .gui-flex[data-gui~="hug"][data-gui~="bottom"] {
    align-items: end;
  }
  .gui-flex[data-gui~="row"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
    --gui-item-count: calc(var(--gui-item-scale, 1) * 3);
  }
}
@media all and (min-width: 1920px) {
  .gui-flex[data-gui~="phone"],
  .gui-flex[data-gui~="tablet"],
  .gui-flex[data-gui~="laptop"],
  .gui-flex[data-gui~="quadhd"] {
    display: none;
  }
  .gui-flex[data-gui~="fullhd"] {
    display: flex;
  }
  .gui-flex[data-gui~="hug+"] {
    flex-direction: row;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="left"] {
    justify-content: start;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="center"] {
    justify-content: center;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="right"] {
    justify-content: end;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="spread"] {
    justify-content: space-around;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="evenly"] {
    justify-content: space-evenly;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="distribute"] {
    justify-content: space-between;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="top"] {
    align-items: start;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="middle"] {
    align-items: center;
  }
  .gui-flex[data-gui~="hug+"][data-gui~="bottom"] {
    align-items: end;
  }
  .gui-flex[data-gui~="row"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
    --gui-item-count: calc(var(--gui-item-scale, 1) * 4);
  }
}
@media all and (min-width: 2560px) {
  .gui-flex[data-gui~="phone"],
  .gui-flex[data-gui~="tablet"],
  .gui-flex[data-gui~="laptop"],
  .gui-flex[data-gui~="fullhd"] {
    display: none;
  }
  .gui-flex[data-gui~="quadhd"] {
    display: flex;
  }
  .gui-flex[data-gui~="row"]:is([data-gui~="tidy"], [data-gui~="tidy-"], [data-gui~="tidy+"]) {
    --gui-item-count: calc(var(--gui-item-scale, 1) * 5);
  }
}