/*! tailwindcss v4.1.4 | MIT License | https://tailwindcss.com */
@import url(https://fonts.bunny.net/css?family=orbitron:400,600,800);
@layer properties;
@layer theme, utilities;
@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
    --color-red-400: oklch(70.4% 0.191 22.216);
    --color-red-500: oklch(63.7% 0.237 25.331);
    --color-red-600: oklch(57.7% 0.245 27.325);
    --color-orange-100: oklch(95.4% 0.038 75.164);
    --color-orange-300: oklch(83.7% 0.128 66.29);
    --color-orange-400: oklch(75% 0.183 55.934);
    --color-orange-500: oklch(70.5% 0.213 47.604);
    --color-amber-100: oklch(96.2% 0.059 95.617);
    --color-amber-300: oklch(87.9% 0.169 91.605);
    --color-amber-400: oklch(82.8% 0.189 84.429);
    --color-amber-500: oklch(76.9% 0.188 70.08);
    --color-lime-400: oklch(84.1% 0.238 128.85);
    --color-lime-600: oklch(64.8% 0.2 131.684);
    --color-sky-100: oklch(95.1% 0.026 236.824);
    --color-sky-300: oklch(82.8% 0.111 230.318);
    --color-sky-400: oklch(74.6% 0.16 232.661);
    --color-sky-500: oklch(68.5% 0.169 237.323);
    --color-sky-600: oklch(58.8% 0.158 241.966);
    --color-sky-900: oklch(39.1% 0.09 240.876);
    --color-rose-100: oklch(94.1% 0.03 12.58);
    --color-rose-300: oklch(81% 0.117 11.638);
    --color-rose-400: oklch(71.2% 0.194 13.428);
    --color-rose-500: oklch(64.5% 0.246 16.439);
    --color-rose-600: oklch(58.6% 0.253 17.585);
    --color-slate-50: oklch(98.4% 0.003 247.858);
    --color-slate-950: oklch(12.9% 0.042 264.695);
    --color-gray-800: oklch(27.8% 0.033 256.848);
    --color-gray-900: oklch(21% 0.034 264.665);
    --color-black: #000;
    --color-white: #fff;
    --spacing: 0.25rem;
    --text-xs: 0.75rem;
    --text-xs--line-height: calc(1 / 0.75);
    --text-sm: 0.875rem;
    --text-sm--line-height: calc(1.25 / 0.875);
    --text-base: 1rem;
    --text-base--line-height: calc(1.5 / 1);
    --text-lg: 1.125rem;
    --text-lg--line-height: calc(1.75 / 1.125);
    --text-3xl: 1.875rem;
    --text-3xl--line-height: calc(2.25 / 1.875);
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --tracking-wide: 0.025em;
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --default-transition-duration: 150ms;
    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  }
}
@layer utilities {
  .absolute {
    position: absolute;
  }
  .relative {
    position: relative;
  }
  .inset-0 {
    inset: calc(var(--spacing) * 0);
  }
  .right-0 {
    right: calc(var(--spacing) * 0);
  }
  .bottom-full {
    bottom: 100%;
  }
  .m-0 {
    margin: calc(var(--spacing) * 0);
  }
  .mt-4 {
    margin-top: calc(var(--spacing) * 4);
  }
  .flex {
    display: flex;
  }
  .grid {
    display: grid;
  }
  .aspect-square {
    aspect-ratio: 1 / 1;
  }
  .size-8 {
    width: calc(var(--spacing) * 8);
    height: calc(var(--spacing) * 8);
  }
  .size-16 {
    width: calc(var(--spacing) * 16);
    height: calc(var(--spacing) * 16);
  }
  .size-full {
    width: 100%;
    height: 100%;
  }
  .h-28 {
    height: calc(var(--spacing) * 28);
  }
  .h-full {
    height: 100%;
  }
  .\!w-fit {
    width: fit-content !important;
  }
  .w-28 {
    width: calc(var(--spacing) * 28);
  }
  .w-fit {
    width: fit-content;
  }
  .w-full {
    width: 100%;
  }
  .grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .grid-cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .grid-cols-\[1fr_2fr\] {
    grid-template-columns: 1fr 2fr;
  }
  .grid-cols-\[1fr_2fr_1fr\] {
    grid-template-columns: 1fr 2fr 1fr;
  }
  .grid-cols-\[2fr_1fr\] {
    grid-template-columns: 2fr 1fr;
  }
  .grid-cols-\[3fr_1fr_1fr\] {
    grid-template-columns: 3fr 1fr 1fr;
  }
  .grid-rows-3 {
    grid-template-rows: repeat(3, minmax(0, 1fr));
  }
  .flex-col {
    flex-direction: column;
  }
  .items-center {
    align-items: center;
  }
  .items-end {
    align-items: flex-end;
  }
  .\!justify-start {
    justify-content: flex-start !important;
  }
  .justify-between {
    justify-content: space-between;
  }
  .justify-center {
    justify-content: center;
  }
  .justify-end {
    justify-content: flex-end;
  }
  .justify-items-center {
    justify-items: center;
  }
  .gap-2 {
    gap: calc(var(--spacing) * 2);
  }
  .divide-x {
    :where(& > :not(:last-child)) {
      --tw-divide-x-reverse: 0;
      border-inline-style: var(--tw-border-style);
      border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
      border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
    }
  }
  .rounded-full {
    border-radius: calc(infinity * 1px);
  }
  .\!rounded-tl-none {
    border-top-left-radius: 0 !important;
  }
  .\!rounded-tr-none {
    border-top-right-radius: 0 !important;
  }
  .\!rounded-b-none {
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
  }
  .border-3 {
    border-style: var(--tw-border-style);
    border-width: 3px;
  }
  .border-lime-600 {
    border-color: var(--color-lime-600);
  }
  .border-red-500 {
    border-color: var(--color-red-500);
  }
  .border-red-600 {
    border-color: var(--color-red-600);
  }
  .border-sky-600 {
    border-color: var(--color-sky-600);
  }
  .border-white {
    border-color: var(--color-white);
  }
  .\!bg-sky-900 {
    background-color: var(--color-sky-900) !important;
  }
  .bg-lime-400 {
    background-color: var(--color-lime-400);
  }
  .bg-lime-400\/30 {
    background-color: color-mix(in srgb, oklch(84.1% 0.238 128.85) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-lime-400) 30%, transparent);
    }
  }
  .bg-red-400 {
    background-color: var(--color-red-400);
  }
  .bg-red-400\/30 {
    background-color: color-mix(in srgb, oklch(70.4% 0.191 22.216) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-400) 30%, transparent);
    }
  }
  .bg-red-500\/80 {
    background-color: color-mix(in srgb, oklch(63.7% 0.237 25.331) 80%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-red-500) 80%, transparent);
    }
  }
  .bg-sky-400 {
    background-color: var(--color-sky-400);
  }
  .bg-sky-400\/30 {
    background-color: color-mix(in srgb, oklch(74.6% 0.16 232.661) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-400) 30%, transparent);
    }
  }
  .bg-slate-950 {
    background-color: var(--color-slate-950);
  }
  .bg-white {
    background-color: var(--color-white);
  }
  .bg-white\/30 {
    background-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
  }
  .\!p-0 {
    padding: calc(var(--spacing) * 0) !important;
  }
  .\!p-4 {
    padding: calc(var(--spacing) * 4) !important;
  }
  .p-2 {
    padding: calc(var(--spacing) * 2);
  }
  .\!px-2 {
    padding-inline: calc(var(--spacing) * 2) !important;
  }
  .\!pt-8 {
    padding-top: calc(var(--spacing) * 8) !important;
  }
  .text-center {
    text-align: center;
  }
  .text-left {
    text-align: left;
  }
  .text-right {
    text-align: right;
  }
  .text-base {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  .text-xs {
    font-size: var(--text-xs);
    line-height: var(--tw-leading, var(--text-xs--line-height));
  }
  .\!text-gray-800 {
    color: var(--color-gray-800) !important;
  }
  .text-red-400 {
    color: var(--color-red-400);
  }
  .text-white {
    color: var(--color-white);
  }
  .opacity-80 {
    opacity: 80%;
  }
  .opacity-90 {
    opacity: 90%;
  }
}
@layer theme;
html, body, #panel-html__body {
  position: relative;
}
#panel-html__body {
  --font-sans: "Orbitron", sans-serif;
  width: 100%;
  height: 100%;
  background-color: var(--color-gray-900);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--tw-leading, var(--text-sm--line-height));
  --tw-font-weight: var(--font-weight-light);
  font-weight: var(--font-weight-light);
  --tw-tracking: var(--tracking-wide);
  letter-spacing: var(--tracking-wide);
  color: var(--color-slate-50);
  * {
    box-sizing: border-box;
  }
}
.group-left, .group-middle, .group-right {
  display: grid;
  height: fit-content;
  gap: calc(var(--spacing) * 2);
}
.ed-panel {
  height: fit-content;
  width: 100%;
  border-bottom-right-radius: var(--radius-xl);
  border-bottom-left-radius: var(--radius-xl);
  border-style: var(--tw-border-style);
  border-width: 1px;
  padding: calc(var(--spacing) * 2);
  h3, h4 {
    margin: calc(var(--spacing) * 0);
    margin-bottom: calc(var(--spacing) * 1);
    --tw-font-weight: var(--font-weight-extralight);
    font-weight: var(--font-weight-extralight);
  }
  h3 {
    font-size: var(--text-base);
    line-height: var(--tw-leading, var(--text-base--line-height));
  }
  h4 {
    font-size: var(--text-sm);
    line-height: var(--tw-leading, var(--text-sm--line-height));
  }
  &.pnl__blue {
    border-color: var(--color-sky-300);
    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-500) 30%, transparent);
    }
    h3, h4 {
      color: var(--color-sky-100);
      text-shadow: 0 0 0.2em var(--color-sky-300);
    }
  }
  &.pnl__yellow {
    border-color: var(--color-amber-300);
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 30%, transparent);
    }
    h3, h4 {
      color: var(--color-amber-100);
      text-shadow: 0 0 0.2em var(--color-amber-300);
    }
  }
  &.pnl__orange {
    border-color: var(--color-orange-300);
    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-500) 30%, transparent);
    }
    h3, h4 {
      color: var(--color-orange-100);
      text-shadow: 0 0 0.2em var(--color-orange-300);
    }
  }
  &.pnl__red {
    border-color: var(--color-rose-300);
    background-color: color-mix(in srgb, oklch(64.5% 0.246 16.439) 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-500) 30%, transparent);
    }
    h3, h4 {
      color: var(--color-rose-100);
      text-shadow: 0 0 0.2em var(--color-rose-400);
    }
  }
  &.pnl__white {
    border-color: var(--color-white);
    background-color: color-mix(in srgb, #fff 20%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
    }
    h3, h4 {
      color: var(--color-white);
      text-shadow: 0 0 0.2em var(--color-white);
    }
  }
}
.ed-button {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-lg);
  border-style: var(--tw-border-style);
  border-width: 3px;
  padding-inline: calc(var(--spacing) * 4);
  padding-block: calc(var(--spacing) * 2);
  text-align: center;
  font-size: var(--text-base);
  line-height: var(--tw-leading, var(--text-base--line-height));
  svg {
    display: block;
    width: calc(var(--spacing) * 5) !important;
    height: calc(var(--spacing) * 5) !important;
  }
  &.btn__vertical {
    flex-direction: column;
  }
  &.btn__filled {
    color: var(--color-gray-900);
  }
  &.btn__orange {
    border-color: var(--color-orange-400);
    background-color: color-mix(in srgb, oklch(70.5% 0.213 47.604) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-orange-500) 50%, transparent);
    }
    color: var(--color-orange-100);
    &.btn__filled {
      background-color: var(--color-orange-400);
    }
  }
  &.btn__yellow {
    border-color: var(--color-amber-400);
    background-color: color-mix(in srgb, oklch(76.9% 0.188 70.08) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-amber-500) 50%, transparent);
    }
    color: var(--color-orange-100);
    &.btn__filled {
      background-color: var(--color-amber-400);
    }
  }
  &.btn__blue {
    border-color: var(--color-sky-400);
    background-color: color-mix(in srgb, oklch(68.5% 0.169 237.323) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-sky-500) 50%, transparent);
    }
    color: var(--color-sky-100);
    &.btn__filled {
      background-color: var(--color-sky-500);
    }
  }
  &.btn__red {
    border-color: var(--color-rose-500);
    background-color: color-mix(in srgb, oklch(58.6% 0.253 17.585) 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-rose-600) 50%, transparent);
    }
    color: var(--color-rose-100);
    &.btn__filled {
      background-color: var(--color-rose-600);
    }
  }
  &.btn__white {
    border-color: var(--color-white);
    background-color: color-mix(in srgb, #fff 30%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-white) 30%, transparent);
    }
    &.btn__filled {
      background-color: var(--color-white);
    }
  }
}
.ed-button-group__horizontal {
  display: grid;
  :where(& > :not(:last-child)) {
    --tw-divide-x-reverse: 0;
    border-inline-style: var(--tw-border-style);
    border-inline-start-width: calc(1px * var(--tw-divide-x-reverse));
    border-inline-end-width: calc(1px * calc(1 - var(--tw-divide-x-reverse)));
  }
  .ed-button {
    border-radius: 0;
    &:first-child {
      border-top-left-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }
    &:last-child {
      border-top-right-radius: var(--radius-lg);
      border-bottom-right-radius: var(--radius-lg);
    }
  }
}
.ed-button-group__vertical {
  display: grid;
  :where(& > :not(:last-child)) {
    --tw-divide-y-reverse: 0;
    border-bottom-style: var(--tw-border-style);
    border-top-style: var(--tw-border-style);
    border-top-width: calc(1px * var(--tw-divide-y-reverse));
    border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  }
  .ed-button {
    border-radius: 0;
    &:first-child {
      border-top-left-radius: var(--radius-lg);
      border-top-right-radius: var(--radius-lg);
    }
    &:last-child {
      border-bottom-right-radius: var(--radius-lg);
      border-bottom-left-radius: var(--radius-lg);
    }
  }
}
.ed-toggle {
  .toggle__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: calc(infinity * 1px);
    border-style: var(--tw-border-style);
    border-width: 2px;
    padding: calc(var(--spacing) * 1.5);
  }
  .toggle__indicator {
    position: absolute;
    aspect-ratio: 1 / 1;
    border-radius: calc(infinity * 1px);
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }
  &.toggle__horizontal {
    height: calc(var(--spacing) * 12);
    width: calc(var(--spacing) * 20);
    .toggle__indicator {
      left: calc(var(--spacing) * 1.5);
      height: calc(100% - .75rem);
      --tw-translate-x: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &[active] .toggle__indicator {
      --tw-translate-x: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
  &.toggle__vertical {
    height: calc(var(--spacing) * 20);
    width: calc(var(--spacing) * 12);
    .toggle__indicator {
      top: calc(var(--spacing) * 1.5);
      width: calc(100% - .75rem);
      --tw-translate-y: calc(var(--spacing) * 0);
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
    &[active] .toggle__indicator {
      --tw-translate-y: 100%;
      translate: var(--tw-translate-x) var(--tw-translate-y);
    }
  }
}
dialog[open] {
  position: absolute;
  top: calc(1/2 * 100%);
  left: calc(1/2 * 100%);
  --tw-translate-x: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: calc(calc(1/2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  border-style: var(--tw-border-style);
  border-width: 0px;
  background-color: transparent;
  outline-style: var(--tw-outline-style);
  outline-width: 0px;
  &::backdrop {
    background-color: color-mix(in srgb, #000 50%, transparent);
    @supports (color: color-mix(in lab, red, red)) {
      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
    }
  }
  .dialog__close {
    position: absolute;
    top: calc(var(--spacing) * 3);
    right: calc(var(--spacing) * 3);
    color: var(--color-white);
  }
}
#clock {
  position: relative;
  display: flex;
  width: fit-content;
  padding-right: calc(var(--spacing) * 16);
  font-size: var(--text-3xl);
  line-height: var(--tw-leading, var(--text-3xl--line-height));
  i {
    padding-left: calc(var(--spacing) * 1);
    font-style: normal;
  }
  .hours-minutes, .seconds {
    display: flex;
    gap: calc(var(--spacing) * 1);
  }
  span {
    display: inline-block;
    width: .75em;
    text-align: center;
  }
  sup {
    position: absolute;
    right: calc(var(--spacing) * 0);
    width: calc(var(--spacing) * 16);
    padding-left: calc(var(--spacing) * 2);
    text-align: left;
    font-size: var(--text-lg);
    line-height: var(--tw-leading, var(--text-lg--line-height));
    opacity: 80%;
  }
}
@property --tw-divide-x-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}
@property --tw-tracking {
  syntax: "*";
  inherits: false;
}
@property --tw-divide-y-reverse {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
    *, ::before, ::after, ::backdrop {
      --tw-divide-x-reverse: 0;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-tracking: initial;
      --tw-divide-y-reverse: 0;
      --tw-translate-x: 0;
      --tw-translate-y: 0;
      --tw-translate-z: 0;
      --tw-outline-style: solid;
    }
  }
}