/* resset.dev • v5.0.2 */

/* # =================================================================
   # Global selectors
   # ================================================================= */

html {
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%; /* Prevent adjustments of font size after orientation changes in iOS */
  word-break: normal;
  -moz-tab-size: 4;
  tab-size: 4;
}

*,
::before,
::after {
  background-repeat: no-repeat; /* Set `background-repeat: no-repeat` to all elements and pseudo elements */
  box-sizing: inherit;
}

::before,
::after {
  text-decoration: inherit; /* Inherit text-decoration and vertical align to ::before and ::after pseudo elements */
  vertical-align: inherit;
}

* {
  padding: 0; /* Reset `padding` and `margin` of all elements */
  margin: 0;
}

/* # =================================================================
   # General elements
   # ================================================================= */

hr {
  overflow: visible; /* Show the overflow in Edge and IE */
  height: 0; /* Add the correct box sizing in Firefox */
  color: inherit; /* Correct border color in Firefox. */
}

details,
main {
  display: block; /* Render the `main` element consistently in IE. */
}

summary {
  display: list-item; /* Add the correct display in all browsers */
}

small {
  font-size: 80%; /* Set font-size to 80% in `small` elements */
}

[hidden] {
  display: none; /* Add the correct display in IE */
}

abbr[title] {
  border-bottom: none; /* Remove the bottom border in Chrome 57 */
  /* Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari */
  text-decoration: underline;
  text-decoration: underline dotted;
}

a {
  background-color: transparent; /* Remove the gray background on active links in IE 10 */
}

a:active,
a:hover {
  outline-width: 0; /* Remove the outline when hovering in all browsers */
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace; /* Specify the font family of code elements */
}

pre {
  font-size: 1em; /* Correct the odd `em` font sizing in all browsers */
}

b,
strong {
  font-weight: bolder; /* Add the correct font weight in Chrome, Edge, and Safari */
}

/* https://gist.github.com/unruthless/413930 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

table {
  border-color: inherit; /* Correct border color in all Chrome, Edge, and Safari. */
  text-indent: 0; /* Remove text indentation in Chrome, Edge, and Safari */
}

iframe {
  border-style: none;
}

/* # =================================================================
   # Forms
   # ================================================================= */

input {
  border-radius: 0;
}

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto; /* Correct the cursor style of increment and decrement buttons in Chrome */
}

[type='search'] {
  -webkit-appearance: textfield; /* Correct the odd appearance in Chrome and Safari */
  outline-offset: -2px; /* Correct the outline style in Safari */
}

[type='search']::-webkit-search-decoration {
  -webkit-appearance: none; /* Remove the inner padding in Chrome and Safari on macOS */
}

textarea {
  overflow: auto; /* Internet Explorer 11+ */
  resize: vertical; /* Specify textarea resizability */
}

button,
input,
optgroup,
select,
textarea {
  font: inherit; /* Specify font inheritance of form elements */
}

optgroup {
  font-weight: bold; /* Restore the font weight unset by the previous rule */
}

button {
  overflow: visible; /* Address `overflow` set to `hidden` in IE 8/9/10/11 */
}

button,
select {
  text-transform: none; /* Firefox 40+, Internet Explorer 11- */
}

/* Apply cursor pointer to button elements */
button,
[type='button'],
[type='reset'],
[type='submit'],
[role='button'] {
  cursor: pointer;
}

/* Remove inner padding and border in Firefox 4+ */
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/* Replace focus style removed in the border reset above */
button:-moz-focusring,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  outline: 1px dotted ButtonText;
}

button,
html [type='button'], /* Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4 */
[type='reset'],
[type='submit'] {
  -webkit-appearance: button; /* Correct the inability to style clickable types in iOS */
}

/* Remove the default button styling in all browsers */
button,
input,
select,
textarea {
  background-color: transparent;
  border-style: none;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline-width: 0;
}

/* Style select like a standard input */
select {
  -moz-appearance: none; /* Firefox 36+ */
  -webkit-appearance: none; /* Chrome 41+ */
}

select::-ms-expand {
  display: none; /* Internet Explorer 11+ */
}

select::-ms-value {
  color: currentColor; /* Internet Explorer 11+ */
}

legend {
  border: 0; /* Correct `color` not being inherited in IE 8/9/10/11 */
  color: inherit; /* Correct the color inheritance from `fieldset` elements in IE */
  display: table; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge and IE */
  white-space: normal; /* Correct the text wrapping in Edge and IE */
  max-width: 100%; /* Correct the text wrapping in Edge 18- and IE */
}

::-webkit-file-upload-button {
  /* Correct the inability to style clickable types in iOS and Safari */
  -webkit-appearance: button;
  color: inherit;
  font: inherit; /* Change font properties to `inherit` in Chrome and Safari */
}

/* Replace pointer cursor in disabled elements */
[disabled] {
  cursor: default;
}

/* # =================================================================
   # Specify media element style
   # ================================================================= */

img {
  border-style: none; /* Remove border when inside `a` element in IE 8/9/10 */
}

/* Add the correct vertical alignment in Chrome, Firefox, and Opera */
progress {
  vertical-align: baseline;
}

/* # =================================================================
   # Accessibility
   # ================================================================= */

/* Specify the progress cursor of updating elements */
[aria-busy='true'] {
  cursor: progress;
}

/* Specify the pointer cursor of trigger elements */
[aria-controls] {
  cursor: pointer;
}

/* Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements */
[aria-disabled='true'] {
  cursor: default;
}

html{width:100%;height:100%}body{font-family:system-ui;width:100%;height:100%;background-color:#222;color:#eee}.app,.Dialog{height:100%;display:flex;flex-direction:column}.app>.nav,.Dialog>.nav{display:flex;background-color:#333;width:100%;justify-content:center;text-decoration:none;position:fixed;top:0;z-index:1}.app>.nav>div,.Dialog>.nav>div{display:flex;padding:10px 0;justify-content:space-between;gap:10px;flex-wrap:wrap;width:100%;max-width:min(100% - 40px,512px)}.app>.nav>div>div,.Dialog>.nav>div>div{flex:1}.app>.nav>div>div>a,.Dialog>.nav>div>div>a{color:#fff;text-decoration:none;width:100%;text-align:center;display:flex;align-items:center;justify-content:center}.app>.nav>div>div>a svg,.Dialog>.nav>div>div>a svg{transition:stroke .2s;width:20px;height:20px;min-width:20px;min-height:20px}.app>.nav>div>div>a:hover svg,.app>.nav>div>div>a.-active svg,.Dialog>.nav>div>div>a:hover svg,.Dialog>.nav>div>div>a.-active svg{stroke:#222}.app>.main,.Dialog>.main{height:100%;z-index:0;margin-top:47px}.app>.main .page,.Dialog>.main .page{display:flex;gap:20px;flex-direction:column;align-items:center;padding:20px}.app>.main .page>div,.Dialog>.main .page>div{background-color:#333;width:100%;max-width:512px;padding:10px;display:flex;align-items:stretch;justify-content:space-between;gap:20px;flex-wrap:wrap}.app>.main .page>div.status>button,.Dialog>.main .page>div.status>button{color:#eee}.app>.main .page>div.status>button>div,.Dialog>.main .page>div.status>button>div{display:flex;align-items:center;font-size:30px;line-height:1}.app>.main .page>div.status>button>div>div,.Dialog>.main .page>div.status>button>div>div{font-size:30px;margin-right:10px}.app>.main .page>div.status>div,.Dialog>.main .page>div.status>div{display:flex;gap:10px;place-self:stretch}.app>.main .page>div.status>div button.-active,.Dialog>.main .page>div.status>div button.-active{color:#222;font-weight:bolder}.app>.main .page>div.status>div button.-active.-auto,.Dialog>.main .page>div.status>div button.-active.-auto{background-color:#4dcdff}.app>.main .page>div.status>div button.-active.-on,.Dialog>.main .page>div.status>div button.-active.-on{background-color:#9ccc65}.app>.main .page>div.status>div button.-active.-off,.Dialog>.main .page>div.status>div button.-active.-off{background-color:#e57373}.app .btn,.Dialog .btn{border:1px solid;padding:2px 4px;transition:background-color .2s,color .2s;min-width:28px;color:#eee}.app .btn:hover,.app .btn.-active,.Dialog .btn:hover,.Dialog .btn.-active{background-color:#eee;color:#222}.app label,.Dialog label{display:inline-flex;align-items:center;gap:10px}.app input:not([type=range]),.app select,.Dialog input:not([type=range]),.Dialog select{border:1px solid;padding:2px 0px 2px 4px;appearance:auto;background-color:#eee;color:#222}.app input[type=range],.Dialog input[type=range]{appearance:none}.app input[type=range]::-webkit-slider-runnable-track,.Dialog input[type=range]::-webkit-slider-runnable-track{height:6px;background:#eee;border:none;border-radius:3px;margin-top:4px}.app input[type=range]::-webkit-slider-thumb,.Dialog input[type=range]::-webkit-slider-thumb{appearance:none;border:none;height:12px;width:12px;border-radius:50%;background:#4dcdff;margin-top:-3px;transition:.2s ease}.app input[type=range]::-webkit-slider-thumb:hover,.Dialog input[type=range]::-webkit-slider-thumb:hover{background:#00b7ff}.Dialog{position:fixed;left:0;top:0;width:100%;height:100%;display:flex;justify-content:center;align-items:center;pointer-events:none;z-index:999}.Dialog.active{pointer-events:unset}.Dialog .backdrop{position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.4)}.Dialog .backdrop.animate{transition:opacity .3s}.Dialog .backdrop.animate.animate-in{opacity:0}.Dialog .backdrop.animate.animate-out{opacity:0}.Dialog .content{position:relative}.Dialog .content.animate{transition:all .2s}.Dialog .content.animate.animate-in{transform:translateY(-16px);opacity:0}.Dialog .content.animate.animate-out{transform:translateY(16px);opacity:0}