/*#region at-rules*/
  @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');
  
  /*#region animations*/
    @keyframes slide-up {
      from {
        transform: translateY(100%);
      }
      to {
        transform: translateY(0);
      }
    }
    @keyframes slide-down {
      from {
        transform: translateY(-100%);
      }
      to {
        transform: translateY(0);
      }
    }
    @keyframes slide-right {
      from {
        transform: translateX(-100%);
      }
      to {
        transform: translateX(0);
      }
    }
    @keyframes slide-left {
      from {
        transform: translateX(100%);
      }
      to {
        transform: translateX(0);
      }
    }
    @keyframes shrink {
      from {
        transform: scale(100%);
      }
      to {
        transform: scale(0);
      }
    }
    @keyframes shrink-half {
      from {
        transform: scale(100%);
      }
      to {
        transform: scale(50%);
      }
    }
    @keyframes shrink-vertical {
      from {
        transform: scaleY(100%);
      }
      to {
        transform: scaleY(0);
      }
    }
    @keyframes shrink-horizontal {
      from {
        transform: scaleX(100%);
      }
      to {
        transform: scaleX(0);
      }
    }
    @keyframes grow {
      from {
        transform: scale(0);
      }
      to {
        transform: scale(100%);
      }
    }
    @keyframes grow-vertical {
      from {
        transform: scaleY(0);
      }
      to {
        transform: scaleY(100%);
      }
    }
    @keyframes grow-horizontal {
      from {
        transform: scaleX(0);
      }
      to {
        transform: scaleX(100%);
      }
    }
    @keyframes fade-in {
      from {
        opacity: 0;
      }
      to {
        opacity: 1;
      }
    }
    @keyframes fade-out {
      from {
        opacity: 1;
      }
      to {
        opacity: 0;
      }
    }
    @keyframes bubbly {
      0%, 100% {
        transform: scale(1);
      }
      50% {
        transform: scale(0.85);
      }
    }
    @keyframes flash {
      from {
        background-color: yellow;
      }
      to {
        background-color: initial;
      }
    }
  /*#endregion animation*/
  
  /*#region view-transition*/
    @view-transition {
      navigation: auto;
    }
    
    ::view-transition-old(root) {
      animation: slide-right 1s ease-in-out reverse;
    }
    ::view-transition-new(root) {
      animation: slide-left 1s ease-in-out;
    }
    
    ::view-transition-old(ui-topbar) {
      animation: slide-down 1s ease-in-out reverse;
    }
    ::view-transition-new(ui-topbar) {
      animation: slide-down 1s ease-in-out;
    }
    
    ::view-transition-old(ui-bottombar) {
      animation: slide-up 1s ease-in-out reverse;
    }
    ::view-transition-new(ui-bottombar) {
      animation: slide-up 1s ease-in-out;
    }
    
    ::view-transition-old(ui-dialog) {
      animation: slide-down 1s ease-in-out reverse;
    }
    ::view-transition-new(ui-dialog) {
      animation: slide-down 1s ease-in-out;
    }
  /*#endregion view-transition*/
/*#endregion at-rules*/

/*#region global*/
  :root {
    --debug-show-scripts: false;
    
    --font: "Noto Sans", sans-serif;
    --focus-outline-color: green;
  }
  
  /*#region all*/
    * {
      font-family: var(--font);
      font-variant-emoji: text;
      word-break: break-word;
      text-overflow: ellipsis;
      hyphens: auto;
      hyphenate-character: "~";
      scroll-behavior: smooth;
      scroll-padding-top: 100px;
      -webkit-tap-highlight-color: red;
    }
    :not(sup, sub) {
      vertical-align: middle;
    }
    ::selection {
      background-color: #3367D1;
      color: white;
    }
  /*#endregion asterisk*/
  
  /*#region miscellaneous*/
    :focus-visible {
      outline: 3px solid var(--focus-outline-color);
      outline-offset: 4px;
    }
    :target {
      animation: flash 5s;
    }
  /*#endregion miscellaneous*/
  
  /*#region classes*/
    /*#region tooltip*/
      .tooltip:not(.no-tooltip):hover {
        anchor-name: --tooltip;
      }
      .tooltip:not(.no-tooltip):hover::before {
        content: attr(title);
        position: absolute;
        position-anchor: --tooltip;
        left: anchor(left);
        bottom: anchor(top);
        background-color: silver;
        font-style: normal;
        font-weight: normal;
        font-size: medium;
      	animation: slide-up 0.1s linear;
      	pointer-events: none;
      }
    /*#endregion tooltip*/
    
    /*#region themed*/
      .themed {
        background-color: whitesmoke;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
      }
      .themed.outset {
        text-shadow: 0 1px 0 white;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      .themed.inset {
        background-color: white;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
      }
    /*#endregion themed*/
    
    /*#region issue*/
      div.issue {
        display: inline-block;
        background-color: khaki;
        font-style: italic;
        text-align: center;
        padding: 2px 5px;
        border: 2px solid gold;
        border-radius: 5px;
        box-shadow: 0 10px 6px -4px lightgoldenrodyellow inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
    /*#endregion issue*/
    
    /*#region no-break*/
      .no-break {
        display: inline;
        white-space: nowrap;
      }
    /*#endregion no-break*/
    
    /*#region colors*/
      input[type="submit"].white,
      input[type="reset"].white {
        background-color: whitesmoke;
        text-shadow: 0 1px 0 white;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      input[type="submit"].white:hover,
      input[type="reset"].white:hover {
        background-color: gainsboro;
      }
      input[type="submit"].white:active,
      input[type="reset"].white:active {
        background-color: whitesmoke;
      }
      
      input[type="range"].gray {
        background-color: silver;
      }
      button.gray,
      input[type="button"].gray,
      input[type="submit"].gray,
      input[type="reset"].gray,
      input[type="color"].gray,
      input[type="file"].gray::file-selector-button,
      input[type="range"].gray::-webkit-slider-thumb,
      select.gray,
      .gray::picker(select),
      option.gray {
        background-color: silver;
        text-shadow: 0 1px 0 whitesmoke;
        box-shadow: 0 10px 6px -4px whitesmoke inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.gray:hover,
      input[type="button"].gray:hover,
      input[type="submit"].gray:hover,
      input[type="reset"].gray:hover,
      input[type="color"].gray:hover,
      input[type="file"].gray::file-selector-button:hover,
      input[type="range"].gray::-webkit-slider-thumb:hover,
      select.gray:hover,
      option.gray:hover {
        background-color: darkgray;
      }
      button.gray:active,
      input[type="button"].gray:active,
      input[type="submit"].gray:active,
      input[type="reset"].gray:active,
      input[type="color"].gray:active,
      input[type="file"].gray::file-selector-button:active,
      input[type="range"].gray::-webkit-slider-thumb:active,
      select.gray:active,
      option.gray:active, option.gray:checked {
        background-color: silver;
      }
      
      input[type="range"].black {
        background-color: dimgray;
      }
      button.black,
      input[type="button"].black,
      input[type="submit"].black,
      input[type="reset"].black,
      input[type="color"].black,
      input[type="file"].black::file-selector-button,
      input[type="range"].black::-webkit-slider-thumb,
      select.black,
      .black::picker(select),
      option.black {
        background-color: dimgray;
        text-shadow: 0 1px 0 darkgray;
        box-shadow: 0 10px 6px -4px darkgray inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.black:hover,
      input[type="button"].black:hover,
      input[type="submit"].black:hover,
      input[type="reset"].black:hover,
      input[type="color"].black:hover,
      input[type="file"].black::file-selector-button:hover,
      input[type="range"].black::-webkit-slider-thumb:hover,
      select.black:hover,
      option.black:hover {
        background-color: #505050;
      }
      button.black:active,
      input[type="button"].black:active,
      input[type="submit"].black:active,
      input[type="reset"].black:active,
      input[type="color"].black:active,
      input[type="file"].black::file-selector-button:active,
      input[type="range"].black::-webkit-slider-thumb:active,
      select.black:active,
      option.black:active, option.black:checked {
        background-color: dimgray;
      }
      
      input[type="range"].red {
        background-color: lightsalmon;
      }
      button.red,
      input[type="button"].red,
      input[type="submit"].red,
      input[type="reset"].red,
      input[type="color"].red,
      input[type="file"].red::file-selector-button,
      input[type="range"].red::-webkit-slider-thumb,
      select.red,
      .red::picker(select),
      option.red {
        background-color: lightsalmon;
        text-shadow: 0 1px 0 #ffe6e6;
        box-shadow: 0 10px 6px -4px #ffe6e6 inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.red:hover,
      input[type="button"].red:hover,
      input[type="submit"].red:hover,
      input[type="reset"].red:hover,
      input[type="color"].red:hover,
      input[type="file"].red::file-selector-button:hover,
      input[type="range"].red::-webkit-slider-thumb:hover,
      select.red:hover,
      option.red:hover {
        background-color: salmon;
      }
      button.red:active,
      input[type="button"].red:active,
      input[type="submit"].red:active,
      input[type="reset"].red:active,
      input[type="color"].red:active,
      input[type="file"].red::file-selector-button:active,
      input[type="range"].red::-webkit-slider-thumb:active,
      select.red:active,
      option.red:active, option.red:checked {
        background-color: lightsalmon;
      }
      
      input[type="range"].orange {
        background-color: #ffdb99;
      }
      button.orange,
      input[type="button"].orange,
      input[type="submit"].orange,
      input[type="reset"].orange,
      input[type="color"].orange,
      input[type="file"].orange::file-selector-button,
      input[type="range"].orange::-webkit-slider-thumb,
      select.orange,
      .orange::picker(select),
      option.orange {
        background-color: #ffdb99;
        text-shadow: 0 1px 0 #fff6e6;
        box-shadow: 0 10px 6px -4px #fff6e6 inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.orange:hover,
      input[type="button"].orange:hover,
      input[type="submit"].orange:hover,
      input[type="reset"].orange:hover,
      input[type="color"].orange:hover,
      input[type="file"].orange::file-selector-button:hover,
      input[type="range"].orange::-webkit-slider-thumb:hover,
      select.orange:hover,
      option.orange:hover {
        background-color: #ffc966;
      }
      button.orange:active,
      input[type="button"].orange:active,
      input[type="submit"].orange:active,
      input[type="reset"].orange:active,
      input[type="color"].orange:active,
      input[type="file"].orange::file-selector-button:active,
      input[type="range"].orange::-webkit-slider-thumb:active,
      select.orange:active,
      option.orange:active, option.orange:checked {
        background-color: #ffdb99;
      }
      
      input[type="range"].yellow {
        background-color: khaki;
      }
      button.yellow,
      input[type="button"].yellow,
      input[type="submit"].yellow,
      input[type="reset"].yellow,
      input[type="color"].yellow,
      input[type="file"].yellow::file-selector-button,
      input[type="range"].yellow::-webkit-slider-thumb,
      select.yellow,
      .yellow::picker(select),
      option.yellow {
        background-color: khaki;
        text-shadow: 0 1px 0 lightgoldenrodyellow;
        box-shadow: 0 10px 6px -4px lightgoldenrodyellow inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.yellow:hover,
      input[type="button"].yellow:hover,
      input[type="submit"].yellow:hover,
      input[type="reset"].yellow:hover,
      input[type="color"].yellow:hover,
      input[type="file"].yellow::file-selector-button:hover,
      input[type="range"].yellow::-webkit-slider-thumb:hover,
      select.yellow:hover,
      option.yellow:hover {
        background-color: #e8d84a;
      }
      button.yellow:active,
      input[type="button"].yellow:active,
      input[type="submit"].yellow:active,
      input[type="reset"].yellow:active,
      input[type="color"].yellow:active,
      input[type="file"].yellow::file-selector-button:active,
      input[type="range"].yellow::-webkit-slider-thumb:active,
      select.yellow:active,
      option.yellow:active, option.yellow:checked {
        background-color: khaki;
      }
      
      input[type="range"].green {
        background-color: limegreen;
      }
      button.green,
      input[type="button"].green,
      input[type="submit"].green,
      input[type="reset"].green,
      input[type="color"].green,
      input[type="file"].green::file-selector-button,
      input[type="range"].green::-webkit-slider-thumb,
      select.green,
      .green::picker(select),
      option.green {
        background-color: limegreen;
        text-shadow: 0 1px 0 #ccffcc;
        box-shadow: 0 10px 6px -4px #ccffcc inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.green:hover,
      input[type="button"].green:hover,
      input[type="submit"].green:hover,
      input[type="reset"].green:hover,
      input[type="color"].green:hover,
      input[type="file"].green::file-selector-button:hover,
      input[type="range"].green::-webkit-slider-thumb:hover,
      select.green:hover,
      option.green:hover {
        background-color: #2db92d;
      }
      button.green:active,
      input[type="button"].green:active,
      input[type="submit"].green:active,
      input[type="reset"].green:active,
      input[type="color"].green:active,
      input[type="file"].green::file-selector-button:active,
      input[type="range"].green::-webkit-slider-thumb:active,
      select.green:active,
      option.green:active, option.green:checked {
        background-color: limegreen;
      }
      
      input[type="range"].blue {
        background-color: royalblue;
      }
      button.blue,
      input[type="button"].blue,
      input[type="submit"].blue,
      input[type="reset"].blue,
      input[type="color"].blue,
      input[type="file"].blue::file-selector-button,
      input[type="range"].blue::-webkit-slider-thumb,
      select.blue,
      .blue::picker(select),
      option.blue {
        background-color: royalblue;
        text-shadow: 0 1px 0 lightblue;
        box-shadow: 0 10px 6px -4px lightblue inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.blue:hover,
      input[type="button"].blue:hover,
      input[type="submit"].blue:hover,
      input[type="reset"].blue:hover,
      input[type="color"].blue:hover,
      input[type="file"].blue::file-selector-button:hover,
      input[type="range"].blue::-webkit-slider-thumb:hover,
      select.blue:hover,
      option.blue:hover {
        background-color: #2251dd;
      }
      button.blue:active,
      input[type="button"].blue:active,
      input[type="submit"].blue:active,
      input[type="reset"].blue:active,
      input[type="color"].blue:active,
      input[type="file"].blue::file-selector-button:active,
      input[type="range"].blue::-webkit-slider-thumb:active,
      select.blue:active,
      option.blue:active, option.blue:checked {
        background-color: royalblue;
      }
      
      input[type="range"].violet {
        background-color: violet;
      }
      button.violet,
      input[type="button"].violet,
      input[type="submit"].violet,
      input[type="reset"].violet,
      input[type="color"].violet,
      input[type="file"].violet::file-selector-button,
      input[type="range"].violet::-webkit-slider-thumb,
      select.violet,
      .violet::picker(select),
      option.violet {
        background-color: violet;
        text-shadow: 0 1px 0 #f9d2f9;
        box-shadow: 0 10px 6px -4px #f9d2f9 inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button.violet:hover,
      input[type="button"].violet:hover,
      input[type="submit"].violet:hover,
      input[type="reset"].violet:hover,
      input[type="color"].violet:hover,
      input[type="file"].violet::file-selector-button:hover,
      input[type="range"].violet::-webkit-slider-thumb:hover,
      select.violet:hover,
      option.violet:hover {
        background-color: orchid;
      }
      button.violet:active,
      input[type="button"].violet:active,
      input[type="submit"].violet:active,
      input[type="reset"].violet:active,
      input[type="color"].violet:active,
      input[type="file"].violet::file-selector-button:active,
      input[type="range"].violet::-webkit-slider-thumb:active,
      select.violet:active,
      option.violet:active, option.violet:checked {
        background-color: violet;
      }
    /*#endregion colors*/
  /*#endregion classes*/
  
  /*#region scrollbar*/
    ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }
    
    ::-webkit-scrollbar-track {
      background-color: silver;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
      cursor: default;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: whitesmoke;
      border: 1px solid black;
      border-radius: 2px;
      box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      cursor: default;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: gainsboro;
    }
    ::-webkit-scrollbar-thumb:active {
      background-color: white;
      box-shadow: none;
    }
    
    ::-webkit-scrollbar-button {
      width: 16px;
      height: 16px;
      background-color: whitesmoke;
      border: 1px solid black;
      border-radius: 2px;
      box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      cursor: default;
    }
    ::-webkit-scrollbar-button:hover {
      background-color: gainsboro;
    }
    ::-webkit-scrollbar-button:active {
      background-color: white;
      box-shadow: none;
    }
    
    ::-webkit-scrollbar-corner {
      background-color: silver;
    }
  /*#endregion scrollbar*/
/*#endregion global*/

/*#region ui*/
  /*#region structure*/
    #ui-overlay {
      display: block;
      position: fixed;
      background-color: black;
      width: 100%;
      height: 100%;
      opacity: 0.9;
      z-index: 99999999;
    }
    #ui-head-dialog-action {
      display: grid;
      grid-auto-flow: column;
      grid-template-columns: auto;
      grid-gap: 8px;
    }
    #ui-foot-status {
      text-align: end;
    }
    
    body {
    	background-color: white;
    	margin: 0;
    }
    header {
      top: 0;
    	border-bottom: 1px solid black;
    	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    	view-transition-name: ui-topbar;
    }
    main {
    	background-color: white;
    	min-height: 100dvh;
    	padding: 0 5px 0 5px;
    }
    footer {
      bottom: 0;
    	border-top: 1px solid black;
    	view-transition-name: ui-bottombar;
    }
    header, footer {
      position: sticky;
      background-color: silver;
      max-height: 3.5em;
    	padding: 5px;
    	z-index: 999;
    }
  /*#endregion structure*/
  
  /*#region dialog*/
    dialog {
      background-color: white;
      color: black;
      min-width: 300px;
      max-width: 85vw;
      max-height: 85dvh;
      padding: 20px;
    	border: 1px solid black;
      border-radius: 2px;
      box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      view-transition-name: ui-dialog;
    }
    dialog:open {
      animation: slide-down 0.1s ease-in-out;
    }
    dialog:modal {
      animation: fade-in 0.2s ease-in-out;
    }
    dialog::backdrop {
      background-color: rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(1px)
    }
  /*#endregion dialog*/
  
  /*#region script*/
    script {
      display: if(style(--debug-show-scripts: true): inline-block; else: none;);
      background-color: if(style(--debug-show-scripts: true): magenta;);
      color: if(style(--debug-show-scripts: true): white;);
    }
  /*#endregion script*/
/*#endregion ui*/

/*#region all elements*/
  /*#region text*/
    span {
      font-family: inherit;
    }
    
    a {
      color: blue;
      cursor: pointer;
    }
    a:hover {
      color: red;
    }
    a[disabled] {
      color: gray;
      text-decoration: line-through;
      cursor: not-allowed;
    }
    
    label {
      cursor: default;
      text-decoration: 1px dotted underline;
    }
    label:hover {
      text-decoration: 1px solid underline;
    }
    
    ul, ol {
      list-style-type: disc;
      border: 1px solid black;
      border-radius: 2px;
    }
    ul ul,
    ol ol,
    ul ol,
    ol ul {
      margin: 5px;
    }
    
    pre,
    code {
      font-family: monospace !important;
    }
    
    abbr {
      font-style: italic;
      text-decoration: 1px wavy underline;
      cursor: help !important;
    }
    
    mark {
      background-color: yellow;
      color: black;
    }
  /*#endregion text*/
  
  /*#region input*/
    /*#region button*/
      button {
        background-color: whitesmoke;
        text-shadow: 0 1px 0 white;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      button:hover {
        background-color: gainsboro;
      }
      button:active {
        background-color: whitesmoke;
        text-shadow: none;
        box-shadow: none;
      }
      button:disabled {
        background-color: whitesmoke;
        color: gray;
        border-color: gray;
        text-shadow: none;
        box-shadow: none;
        cursor: not-allowed;
      }
      button:disabled:hover {
        background-color: gainsboro;
      }
    /*#endregion button*/
    
    /*#region select*/
      select {
        appearance: base-select;
        background-color: whitesmoke;
        text-shadow: 0 1px 0 white;
        font-size: 13px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      select:hover {
        background-color: gainsboro;
      }
      select:active {
        background-color: whitesmoke;
        text-shadow: none;
        box-shadow: none;
      }
      select:disabled {
        background-color: whitesmoke;
        color: gray;
        border-color: gray;
        text-shadow: none;
        box-shadow: none;
        cursor: not-allowed;
      }
      select:disabled:hover {
        background-color: gainsboro;
      }
      
      select[multiple] {
        width: 150px;
      }
      
      select[multiple]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
      }
      
      select:open {
        color: gray;
      }
      select::picker-icon {
        transition: transform 0.05s ease-in-out;
      }
      select:open::picker-icon {
        color: black;
        transform: scaleY(-1);
      }
      
      ::picker(select) {
        appearance: base-select;
        background-color: white;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      ::picker(select)::-webkit-scrollbar {
        width: 16px;
        height: 16px;
      }
      ::picker(select)::-webkit-scrollbar-thumb {
        background-color: whitesmoke;
        border: 1px solid black;
        border-radius: 2px;
        cursor: default;
      }
      ::picker(select)::-webkit-scrollbar-thumb:hover {
        background-color: gainsboro;
      }
      ::picker(select)::-webkit-scrollbar-thumb:active {
        background-color: white;
      }
      
      ::picker(select)::-webkit-scrollbar-button {
        width: 16px;
        height: 16px;
        background-color: whitesmoke;
        border: 1px solid black;
        border-radius: 2px;
        cursor: default;
      }
      ::picker(select)::-webkit-scrollbar-button:hover {
        background-color: gainsboro;
      }
      ::picker(select)::-webkit-scrollbar-button:active {
        background-color: white;
      }
      
      ::picker(select)::-webkit-scrollbar-corner {
        background-color: silver;
      }
      
      option {
        background-color: whitesmoke;
        text-shadow: 0 1px 0 white;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 3px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      option:hover {
        background-color: gainsboro;
      }
      option:active, select option:checked {
        background-color: whitesmoke;
        text-shadow: none;
        box-shadow: none;
      }
      option:checked::checkmark {
        content: '▶';
      }
      option:disabled {
        background-color: whitesmoke;
        color: gray;
        border-color: gray;
        text-shadow: none;
        box-shadow: none;
        cursor: not-allowed;
      }
      option:disabled:hover {
        background-color: gainsboro;
      }
    /*#endregion select*/
    
    /*#region textarea*/
      textarea {
        min-width: 2in;
        min-height: 3em;
        background-color: white;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
      }
      textarea:disabled {
        color: gray;
        border-color: gray;
        box-shadow: none;
        cursor: not-allowed;
      }
      textarea.monospace {
        font-family: monospace !important;
      }
    /*#endregion textarea*/
    
    /*#region input*/
      input {
        background-color: white;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5) inset;
      }
      
      /*#region checkbox*/
        input[type="checkbox"] {
          appearance: none;
          width: 16px;
          height: 13px;
          background-color: whitesmoke;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
          box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        input[type="checkbox"]:hover {
          background-color: gainsboro;
        }
        input[type="checkbox"]:active {
          background-color: limegreen;
          box-shadow: none;
        }
        input[type="checkbox"]:disabled {
          background-color: whitesmoke;
          color: gray;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
        
        input[type="checkbox"]:checked {
          background-color: limegreen;
          box-shadow: 0 10px 6px -4px #ccffcc inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        input[type="checkbox"]:checked:hover {
          background-color: #2db92d;
        }
        input[type="checkbox"]:checked:active {
          background-color: limegreen;
          box-shadow: none;
        }
        input[type="checkbox"]:checked:disabled {
          background-color: limegreen;
          color: gray;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
        
        input[type="checkbox"]:indeterminate {
          background-color: royalblue;
          box-shadow: 0 10px 6px -4px lightblue inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        input[type="checkbox"]:indeterminate:hover {
          background-color: #2251dd;
        }
        input[type="checkbox"]:indeterminate:active {
          background-color: royalblue;
          box-shadow: none;
        }
        input[type="checkbox"]:indeterminate:disabled {
          background-color: royalblue;
          color: gray;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
      /*#endregion checkbox*/
      
      /*#region radio*/
        input[type="radio"] {
          appearance: none;
          width: 16px;
          height: 13px;
          background-color: whitesmoke;
          margin: 1px;
          border: 1px solid black;
          border-radius: 20px;
          box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        input[type="radio"]:hover {
          background-color: gainsboro;
        }
        input[type="radio"]:active {
          background-color: red;
          box-shadow: none;
        }
        input[type="radio"]:disabled {
          background-color: whitesmoke;
          color: gray;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
        
        input[type="radio"]:checked {
          background-color: red;
          box-shadow: 0 10px 6px -4px salmon inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        input[type="radio"]:checked:hover {
          background-color: #d10000;
        }
        input[type="radio"]:checked:active {
          background-color: red;
          box-shadow: none;
        }
        input[type="radio"]:checked:disabled {
          background-color: red;
          color: gray;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
      /*#endregion radio*/
      
      /*#region text inputs*/
        input[type="text"],
        input[type="password"],
        input[type="search"] {
          min-width: 0.5in;
          max-width: 3in;
          background-color: white;
          font-family: monospace !important;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
          field-sizing: content;
        }
        
        input[type="number"] {
          text-align: right;
        }
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="number"] {
          min-width: 0.5in;
          max-width: 3in;
          background-color: white;
          font-family: monospace !important;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
          field-sizing: content;
        }
        input[type="email"]:invalid,
        input[type="url"]:invalid,
        input[type="tel"]:invalid,
        input[type="number"]:invalid {
          color: red;
          border-color: red;
        }
        
        input[type="text"]:disabled,
        input[type="password"]:disabled,
        input[type="search"]:disabled,
        input[type="email"]:disabled,
        input[type="url"]:disabled,
        input[type="tel"]:disabled,
        input[type="number"]:disabled {
          color: gray;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
      /*#endregion text inputs*/
      
      /*#region button inputs*/
        input[type="button"] {
          background-color: whitesmoke;
          text-shadow: 0 1px 0 white;
          padding-block: 1px;
          padding-inline: 6px;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
          box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        input[type="button"]:hover {
          background-color: gainsboro;
        }
        input[type="button"]:active {
          background-color: whitesmoke;
          text-shadow: none;
          box-shadow: none;
        }
        
        button[type="submit"],
        input[type="submit"] {
          background-color: limegreen;
          text-shadow: 0 1px 0 #ccffcc;
          padding-block: 1px;
          padding-inline: 6px;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
          box-shadow: 0 10px 6px -4px #ccffcc inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        button[type="submit"]:hover,
        input[type="submit"]:hover {
          background-color: #2db92d;
        }
        button[type="submit"]:active,
        input[type="submit"]:active {
          background-color: limegreen;
          text-shadow: none;
          box-shadow: none;
        }
        
        button[type="reset"],
        input[type="reset"] {
          background-color: lightsalmon;
          text-shadow: 0 1px 0 #ffe6e6;
          padding-block: 1px;
          padding-inline: 6px;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
          box-shadow: 0 10px 6px -4px #ffe6e6 inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        }
        button[type="reset"]:hover,
        input[type="reset"]:hover {
          background-color: salmon;
        }
        button[type="reset"]:active,
        input[type="reset"]:active {
          background-color: lightsalmon;
          text-shadow: none;
          box-shadow: none;
        }
        
        input[type="button"]:disabled,
        input[type="submit"]:disabled,
        input[type="reset"]:disabled {
          background-color: whitesmoke;
          color: gray;
          border-color: gray;
          text-shadow: none;
          box-shadow: none;
          cursor: not-allowed;
        }
        input[type="button"]:disabled:hover,
        input[type="submit"]:disabled:hover,
        input[type="reset"]:disabled:hover {
          background-color: gainsboro;
        }
      /*#endregion button inputs*/
      
      /*#region picker inputs*/
        /*#region color*/
          input[type="color"] {
            background-color: whitesmoke;
            padding-block: 1px;
            padding-inline: 6px;
            margin: 1px;
            border: 1px solid black;
            border-radius: 2px;
            box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
          }
          input[type="color"]:hover {
            background-color: gainsboro;
          }
          input[type="color"]:active {
            background-color: whitesmoke;
            box-shadow: none;
          }
          input[type="color"]:disabled {
            background-color: whitesmoke;
            color: gray;
            border-color: gray;
            text-shadow: none;
            box-shadow: none;
            cursor: not-allowed;
          }
          input[type="color"]:disabled:hover {
            background-color: gainsboro;
          }
          
          input[type="color"]::-webkit-color-swatch {
            border: none;
            border-radius: 2px;
            box-shadow: 0 1px 0 white, 0 1px 1px rgba(0, 0, 0, 0.5) inset;
          }
          input[type="color"]:active::-webkit-color-swatch {
            box-shadow: none;
          }
          input[type="color"]:disabled::-webkit-color-swatch {
            box-shadow: none;
          }
        /*#endregion color*/
        
        /*#region time*/
          input[type="date"],
          input[type="time"],
          input[type="datetime-local"],
          input[type="month"],
          input[type="week"] {
            background-color: white;
            margin: 1px;
            border: 1px solid black;
            border-radius: 2px;
          }
          input[type="date"]:invalid,
          input[type="time"]:invalid,
          input[type="datetime-local"]:invalid,
          input[type="month"]:invalid,
          input[type="week"]:invalid {
            color: red;
            border-color: red;
          }
          input[type="date"]:disabled,
          input[type="time"]:disabled,
          input[type="datetime-local"]:disabled,
          input[type="month"]:disabled,
          input[type="week"]:disabled {
            color: gray;
            border-color: gray;
            box-shadow: none;
            cursor: not-allowed;
          }
        /*#endregion time*/
        
        /*#region file*/
          input[type="file"] {
            padding-right: 5px;
            margin: 1px;
            border: none;
            field-sizing: content;
            pointer-events: none;
          }
          input[type="file"]:disabled {
            color: black;
          }
          
          input[type="file"]::file-selector-button {
            background-color: whitesmoke;
            font-family: var(--font);
            text-shadow: 0 1px 0 white;
            padding-block: 1px;
            padding-inline: 6px;
            margin: 3px;
            margin-right: 5px;
            border: 1px solid black;
            border-radius: 2px;
            box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
            pointer-events: auto;
          }
          input[type="file"]::file-selector-button:hover {
            background-color: gainsboro;
          }
          input[type="file"]::file-selector-button:active {
            background-color: whitesmoke;
            text-shadow: none;
            box-shadow: none;
          }
          input[type="file"]:invalid::file-selector-button {
            color: red;
            border-color: red;
          }
          input[type="file"]:disabled::file-selector-button {
            background-color: whitesmoke;
            color: gray;
            border-color: gray;
            text-shadow: none;
            box-shadow: none;
            cursor: not-allowed;
          }
          input[type="file"]:disabled::file-selector-button:hover {
            background-color: gainsboro;
          }
        /*#endregion file*/
      /*#endregion picker inputs*/
      
      /*#region range*/
        input[type="range"] {
          appearance: none;
          height: 3px;
          background-color: whitesmoke;
          margin: 1px;
          border: 1px solid black;
          border-radius: 2px;
        }
        input[type="range"]:disabled {
          background-color: whitesmoke;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
        input[type="range"].other-way {
          direction: rtl;
        }
        input[type="range"].vertical {
          width: 3px;
          height: 129px;
          writing-mode: vertical-lr;
          direction: rtl;
          margin-block: 7px;
        }
        input[type="range"].vertical.other-way {
          direction: ltr;
        }
        
        input[type="range"]::-webkit-slider-thumb {
          appearance: none;
          width: 20px;
          height: 20px;
          background-color: whitesmoke;
          border: 1px solid black;
          border-radius: 20px;
          box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
          transition: width 0.05s ease-in-out, height 0.05s ease-in-out, corner-shape 0.05s ease-in-out;
          cursor: grab;
        }
        input[type="range"]::-webkit-slider-thumb:hover {
          background-color: gainsboro;
        }
        input[type="range"]::-webkit-slider-thumb:active {
          width: 30px;
          height: 12px;
          background-color: whitesmoke;
          corner-shape: superellipse(1.5);
          box-shadow: none;
          cursor: grabbing;
        }
        input[type="range"]:disabled::-webkit-slider-thumb {
          background-color: whitesmoke;
          border-color: gray;
          box-shadow: none;
          cursor: not-allowed;
        }
        input[type="range"]:disabled::-webkit-slider-thumb:hover {
          background-color: gainsboro;
        }
        input[type="range"]:disabled::-webkit-slider-thumb:active {
          width: 20px;
          height: 20px;
          background-color: gainsboro;
          corner-shape: unset;
        }
        input[type="range"].vertical::-webkit-slider-thumb:active {
          width: 12px;
          height: 30px;
        }
        input[type="range"].vertical:disabled::-webkit-slider-thumb:hover {
          background-color: gainsboro;
        }
        input[type="range"].vertical:disabled::-webkit-slider-thumb:active {
          width: 20px;
          height: 20px;
          background-color: gainsboro;
          corner-shape: unset;
        }
      /*#endregion range*/
    /*#endregion input*/
  /*#endregion input*/
  
  /*#region visual*/
    hr {
      border: none;
      border-bottom: 1px solid black;
    }
    
    /*#region kbd*/
      kbd {
        display: inline-block;
        min-width: 0.75rem;
        background-color: whitesmoke;
        text-align: center;
        -webkit-text-stroke: 2px white;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 10px 6px -4px white inset, 0 2px 0 0 black;
        paint-order: stroke fill;
        cursor: default;
      }
      kbd:hover {
        background-color: gainsboro;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 0 0 black;
        transform: translateY(1px);
      }
    /*#endregion kbd*/
    
    /*#region collapsible*/
      details {
        padding-left: 8px;
        border-left: 2px solid black;
      }
      details:open {
        padding-bottom: 8px;
      }
      details:open:has(+ details) {
        border-bottom: 2px solid black;
      }
      
      summary {
        background-color: white;
        padding-inline: 5px;
        cursor: default;
      }
      summary:hover,
      details:open > summary:hover {
        background-color: gainsboro;
      }
      details:open > summary {
        background-color: #ececec;
        margin-bottom: 5px;
      }
    /*#endregion collapsible*/
    
    /*#region fieldset*/
      fieldset {
        border: 1px solid black;
        border-radius: 2px;
      }
      fieldset:has(> details) {
        border: 2px solid black;
      }
    /*#endregion fieldset*/
    
    /*#region table*/
      table {
        border-collapse: collapse;
        box-shadow: 0 10px 6px -4px white inset, 0 1px 1px rgba(0, 0, 0, 0.5);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
      }
      table thead tr:first-child th {
        box-shadow: 0 10px 6px -4px white inset;
      }
      table th {
        background-color: whitesmoke;
        text-shadow: 0 1px 0 white;
        font-weight: bold;
        text-decoration: solid underline;
      }
      table td {
        background-color: white;
      }
      table tfoot td {
        background-color: whitesmoke;
      }
      table tbody tr:nth-child(even) td:nth-child(odd),
      table tbody tr:nth-child(odd) td:nth-child(even) {
        background-color: #f8f8f8;
      }
      table th,
      table td {
        padding: 5px;
        margin: 1px;
        border: 1px solid black;
      }
    /*#endregion table*/
    
    /*#region img*/
      img {
        filter: drop-shadow(0 2px 0 #00000033);
      }
      img::selection {
        background-color: #D13367;
        color: white;
      }
    /*#endregion img*/
    
    /*#region canvas*/
      canvas.visible {
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      }
    /*#endregion canvas*/
    
    /*#region iframe*/
      iframe {
        background-color: red;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
      }
    /*#endregion iframe*/
    
    /*#region meter*/
      meter::-webkit-meter-bar {
        background-color: gray;
        height: 13px;
        border: 1px solid black;
        border-radius: 2px;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      meter::-webkit-meter-optimum-value {
        background-color: lightgreen;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      meter::-webkit-meter-suboptimum-value {
        background-color: gold;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
      }
      meter::-webkit-meter-even-less-good-value {
        background-color: red;
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
      }
    /*#endregion meter*/
  /*#endregion visual*/
/*#endregion all elements*/