/*#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: lime;
  }
  
  /*#region all*/
    * {
      color: white;
      font-family: var(--font);
      font-variant-emoji: text;
      word-break: break-word;
      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: blue;
      color: white;
    }
  /*#endregion asterisk*/
  
  /*#region miscellaneous*/
    :focus-visible {
      outline: 3px solid var(--focus-outline-color);
      outline-offset: 4px;
    }
    [disabled] {
      filter: grayscale(1) brightness(0.5);
      pointer-events: none;
    }
    :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: #3f3f3f;
        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: #0a0a0a;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
      }
      .themed.inset {
        background-color: black;
      }
    /*#endregion themed*/
    
    /*#region issue*/
      div.issue {
        display: inline-block;
        background-color: #8d883f;
        font-style: italic;
        text-align: center;
        padding: 2px 5px;
        border: 2px solid yellow;
        border-radius: 5px;
      }
    /*#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: #0a0a0a;
        color: white;
      }
      input[type="submit"].white:hover,
      input[type="reset"].white:hover {
        background-color: #232323;
      }
      input[type="submit"].white:active,
      input[type="reset"].white:active {
        background-color: #0a0a0a;
      }
      
      input[type="range"].gray {
        background-color: #3f3f3f;
      }
      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: #3f3f3f;
        color: white;
      }
      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: #565656;
      }
      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: #3f3f3f;
      }
      
      input[type="range"].black {
        background-color: #c8c8c8;
      }
      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: #c8c8c8;
        color: black;
      }
      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: #b4b4b4;
      }
      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: #c8c8c8;
      }
      
      input[type="range"].red {
        background-color: #d77d59;
      }
      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: #d77d59;
        color: black;
      }
      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: #d66155;
      }
      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: #d77d59;
      }
      
      input[type="range"].orange {
        background-color: #d1b070;
      }
      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: #d1b070;
        color: black;
      }
      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: #d3a140;
      }
      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: #d1b070;
      }
      
      input[type="range"].yellow {
        background-color: #e2da63;
      }
      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: #e2da63;
        color: black;
      }
      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: #dccf1a;
      }
      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: #e2da63;
      }
      
      input[type="range"].green {
        background-color: #00a900;
      }
      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: #00a900;
        color: black;
      }
      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: #009900;
      }
      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: #00a900;
      }
      
      input[type="range"].blue {
        background-color: #1955c9;
      }
      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: #1955c9;
        color: black;
      }
      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: #0041c9;
      }
      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: #1955c9;
      }
      
      input[type="range"].violet {
        background-color: #ca61cb;
      }
      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: #ca61cb;
        color: black;
      }
      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: #ba52b7;
      }
      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: #ca61cb;
      }
    /*#endregion colors*/
  /*#endregion classes*/
  
  /*#region scrollbar*/
    ::-webkit-scrollbar {
      width: 16px;
      height: 16px;
    }
    
    ::-webkit-scrollbar-track {
      background-color: #3f3f3f;
      cursor: default;
    }
    
    ::-webkit-scrollbar-thumb {
      background-color: #0a0a0a;
      border: 1px solid white;
      border-radius: 2px;
      cursor: default;
    }
    ::-webkit-scrollbar-thumb:hover {
      background-color: #232323;
    }
    ::-webkit-scrollbar-thumb:active {
      background-color: black;
    }
    
    ::-webkit-scrollbar-button {
      width: 16px;
      height: 16px;
      background-color: #0a0a0a;
      border: 1px solid white;
      border-radius: 2px;
      cursor: default;
    }
    ::-webkit-scrollbar-button:hover {
      background-color: #232323;
    }
    ::-webkit-scrollbar-button:active {
      background-color: black;
    }
    
    ::-webkit-scrollbar-corner {
      background-color: #3f3f3f;
    }
  /*#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: black;
    	margin: 0;
    }
    header {
      top: 0;
    	border-bottom: 1px solid white;
    	view-transition-name: ui-topbar;
    }
    main {
    	background-color: black;
    	min-height: 100vh;
    	padding: 0 5px 0 5px;
    }
    footer {
      bottom: 0;
    	border-top: 1px solid white;
    	view-transition-name: ui-bottombar;
    }
    header, footer {
      position: sticky;
      background-color: #3f3f3f;
      max-height: 3.5em;
    	padding: 5px;
    	z-index: 999;
    }
  /*#endregion structure*/
  
  /*#region dialog*/
    dialog {
      background-color: black;
      color: white;
      min-width: 300px;
      max-width: 85vw;
      max-height: 85dvh;
      padding: 20px;
    	border: 1px solid white;
      border-radius: 2px;
      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: yellow;
      cursor: pointer;
    }
    a:hover {
      color: cyan;
    }
    
    ul, ol {
      list-style-type: disc;
      border: 1px solid white;
      border-radius: 2px;
    }
    ul ul,
    ol ol,
    ul ol,
    ol ul {
      margin: 5px;
    }
    
    label {
      cursor: default;
      text-decoration: 1px dotted underline;
    }
    label:hover {
      text-decoration: 1px solid underline;
    }
    
    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: #0a0a0a;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
      }
      button:hover {
        background-color: #232323;
      }
      button:active {
        background-color: #0a0a0a;
      }
    /*#endregion button*/
    
    /*#region select*/
      select {
        appearance: base-select;
        background-color: #0a0a0a;
        font-size: 13px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
      }
      select:hover {
        background-color: #232323;
      }
      select:active {
        background-color: #0a0a0a;
      }
      
      select[multiple] {
        width: 150px;
      }
      
      select[multiple]::-webkit-scrollbar {
        width: 12px;
        height: 12px;
      }
      
      select:open {
        background-color: black;
        color: gray;
      }
      select::picker-icon {
        transition: transform 0.05s ease-in-out;
      }
      select:open::picker-icon {
        color: white;
        transform: scaleY(-1);
      }
      
      ::picker(select) {
        appearance: base-select;
        background-color: black;
        border: 1px solid white;
        border-radius: 2px;
      }
      
      option {
        background-color: #0a0a0a;
        padding-block: 1px;
        padding-inline: 6px;
      }
      option:hover {
        background-color: #232323;
      }
      option:active {
        background-color: #0a0a0a;
      }
      option:checked {
        background-color: #0a0a0a;
      }
      option:checked::checkmark {
        content: '▶';
      }
    /*#endregion select*/
    
    /*#region textarea*/
      textarea {
        min-width: 2in;
        min-height: 3em;
        background-color: black;
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
      }
      textarea.monospace {
        font-family: monospace !important;
      }
    /*#endregion textarea*/
    
    /*#region input*/
      input {
        background-color: black;
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
      }
      
      /*#region checkbox*/
        input[type="checkbox"] {
          appearance: none;
          width: 16px;
          height: 13px;
          background-color: #0a0a0a;
          margin: 1px;
          border: 1px solid white;
          border-radius: 2px;
        }
        input[type="checkbox"]:hover {
          background-color: #232323;
        }
        input[type="checkbox"]:active {
          background-color: cyan;
        }
        
        input[type="checkbox"]:checked {
          background-color: cyan;
        }
        input[type="checkbox"]:checked:hover {
          background-color: #d10000;
        }
        input[type="checkbox"]:checked:active {
          background-color: cyan;
        }
        
        input[type="checkbox"]:indeterminate {
          background-color: yellow;
        }
        input[type="checkbox"]:indeterminate:hover {
          background-color: #d10000;
        }
        input[type="checkbox"]:indeterminate:active {
          background-color: yellow;
        }
      /*#endregion checkbox*/
      
      /*#region radio*/
        input[type="radio"] {
          appearance: none;
          width: 16px;
          height: 13px;
          background-color: #0a0a0a;
          margin: 1px;
          border: 1px solid white;
          border-radius: 20px;
        }
        input[type="radio"]:hover {
          background-color: #232323;
        }
        input[type="radio"]:active {
          background-color: cyan;
        }
        
        input[type="radio"]:checked {
          background-color: cyan;
        }
        input[type="radio"]:checked:hover {
          background-color: #2effff;
        }
        input[type="radio"]:checked:active {
          background-color: cyan;
        }
      /*#endregion radio*/
      
      /*#region text inputs*/
        input[type="text"],
        input[type="password"],
        input[type="search"] {
          min-width: 0.5in;
          max-width: 3in;
          background-color: black;
          font-family: monospace !important;
          margin: 1px;
          border: 1px solid white;
          border-radius: 2px;
          field-sizing: content;
        }
        
        input[type="email"],
        input[type="url"],
        input[type="tel"],
        input[type="number"] {
          min-width: 0.5in;
          max-width: 3in;
          background-color: black;
          font-family: monospace !important;
          margin: 1px;
          border: 1px solid white;
          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="number"] {
          text-align: right;
        }
      /*#endregion text inputs*/
      
      /*#region button inputs*/
        input[type="button"] {
          background-color: #0a0a0a;
          padding-block: 1px;
          padding-inline: 6px;
          margin: 1px;
          border: 1px solid white;
          border-radius: 2px;
        }
        input[type="button"]:hover {
          background-color: #232323;
        }
        input[type="button"]:active {
          background-color: #0a0a0a;
        }
        
        input[type="submit"] {
          background-color: #00a900;
          color: black;
          padding-block: 1px;
          padding-inline: 6px;
          margin: 1px;
          border: 1px solid white;
          border-radius: 2px;
        }
        input[type="submit"]:hover {
          background-color: #009900;
        }
        input[type="submit"]:active {
          background-color: #00a900;
        }
        
        input[type="reset"] {
          background-color: #d77d59;
          color: black;
          padding-block: 1px;
          padding-inline: 6px;
          margin: 1px;
          border: 1px solid white;
          border-radius: 2px;
        }
        input[type="reset"]:hover {
          background-color: #d66155;
        }
        input[type="reset"]:active {
          background-color: #d77d59;
        }
      /*#endregion button inputs*/
      
      /*#region picker inputs*/
        /*#region color*/
          input[type="color"] {
            background-color: #0a0a0a;
            padding-block: 1px;
            padding-inline: 6px;
            margin: 1px;
            border: 1px solid white;
            border-radius: 2px;
          }
          input[type="color"]:hover {
            background-color: #232323;
          }
          input[type="color"]:active {
            background-color: #0a0a0a;
          }
          
          input[type="color"]::-webkit-color-swatch {
            border-radius: 2px;
          }
        /*#endregion color*/
        
        /*#region time*/
          input[type="date"],
          input[type="time"],
          input[type="datetime-local"],
          input[type="month"],
          input[type="week"] {
            background-color: black;
            margin: 1px;
            border: 1px solid white;
            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;
          }
        /*#endregion time*/
        
        /*#region file*/
          input[type="file"] {
            margin: 1px;
            border: none;
            field-sizing: content;
            pointer-events: none;
          }
          
          input[type="file"]::file-selector-button {
            color: white;
            background-color: #0a0a0a;
            font-family: var(--font);
            padding-block: 1px;
            padding-inline: 6px;
            margin: 1px;
            border: 1px solid white;
            border-radius: 2px;
            pointer-events: auto;
          }
          input[type="file"]::file-selector-button:hover {
            background-color: #232323;
          }
          input[type="file"]::file-selector-button:active {
            background-color: #0a0a0a;
          }
          input[type="file"]:invalid::file-selector-button {
            color: red;
            border-color: red;
          }
        /*#endregion file*/
      /*#endregion picker inputs*/
      
      /*#region range*/
        input[type="range"] {
          appearance: none;
          height: 3px;
          background-color: #0a0a0a;
          margin: 1px;
          border: 1px solid white;
          border-radius: 2px;
        }
        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: #0a0a0a;
          border: 1px solid white;
          border-radius: 20px;
          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: #232323;
        }
        input[type="range"]::-webkit-slider-thumb:active {
          width: 30px;
          height: 12px;
          background-color: #0a0a0a;
          corner-shape: superellipse(1.5);
          cursor: grabbing;
        }
        input[type="range"].vertical::-webkit-slider-thumb:active {
          width: 12px;
          height: 30px;
        }
      /*#endregion range*/
    /*#endregion input*/
  /*#endregion input*/
  
  /*#region visual*/
    hr {
      border: none;
      border-bottom: 1px solid white;
    }
    
    /*#region kbd*/
      kbd {
        display: inline-block;
        min-width: 0.75rem;
        background-color: #0a0a0a;
        text-align: center;
        padding-block: 1px;
        padding-inline: 6px;
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
        box-shadow: 0 2px 0 0 white;
        cursor: default;
      }
      kbd:hover {
        background-color: #232323;
        box-shadow: 0 1px 0 0 white;
        transform: translateY(1px);
      }
    /*#endregion kbd*/
    
    /*#region collapsible*/
      details {
        padding-left: 8px;
        border-left: 2px solid white;
      }
      details:open {
        padding-bottom: 8px;
      }
      details:open:has(+ details) {
        border-bottom: 2px solid white;
      }
      
      summary {
        background-color: black;
        padding-inline: 5px;
        cursor: default;
      }
      summary:hover,
      details:open > summary:hover {
        background-color: #232323;
      }
      details:open > summary {
        background-color: #131313;
        margin-bottom: 5px;
      }
    /*#endregion collapsible*/
    
    /*#region fieldset*/
      fieldset {
        border: 1px solid white;
        border-radius: 2px;
      }
    /*#endregion fieldset*/
    
    /*#region table*/
      table {
        border-collapse: collapse;
      }
      table th {
        background-color: #0a0a0a;
        font-style: italic;
        font-weight: normal;
        text-decoration: solid white underline;
      }
      table td {
        background-color: black;
      }
      table th,
      table td {
        padding: 5px;
        margin: 1px;
        border: 1px solid white;
      }
    /*#endregion table*/
    
    /*#region img*/
      img::selection {
        background-color: hotpink;
        color: white;
      }
    /*#endregion img*/
    
    /*#region canvas*/
      canvas.visible {
        margin: 1px;
        border: 1px solid white;
        border-radius: 2px;
      }
    /*#endregion canvas*/
    
    /*#region iframe*/
      iframe {
        background-color: red;
        margin: 1px;
        border: 1px solid black;
        border-radius: 2px;
      }
    /*#endregion iframe*/
    
    /*#region meter*/
      meter::-webkit-meter-bar {
        background-color: black;
        height: 13px;
        border: 1px solid white;
        border-radius: 2px;
      }
      meter::-webkit-meter-optimum-value {
        background-color: lime;
      }
      meter::-webkit-meter-suboptimum-value {
        background-color: gold;
      }
      meter::-webkit-meter-even-less-good-value {
        background-color: red;
      }
    /*#endregion meter*/
  /*#endregion visual*/
/*#endregion all elements*/