:root {
  --layer-main: 0;
  --layer-overlay: 100;
  --layer-spinner: 200;
  --layer-panels: 300;
  --layer-nav: 400;
}
/* // themed colors */
/* // Theme: Ides (Ides of Night + Ides of Day) */
:root {
  --color-ui-bg-primary: light-dark(#f8f8f8, #181818);
  --color-ui-bg-content: light-dark(#ffffff, #1f1f1f);
  --color-ui-bg-content-highlight: light-dark(#fafafa, #242424);
  --color-ui-bg-content-secondary: light-dark(#f5f5f5, #282828);
  --color-ui-bg-content-highlight-secondary: light-dark(#f2f0ef, #2b2d2e);
  --color-ui-scroll-bg: light-dark(transparent, transparent);
  --color-ui-scroll-thumb: light-dark(#646464, #646464);
  --color-ui-shadow: light-dark(rgba(0, 0, 0, 0.25), #000000);
  --color-ui-shadow-contrast: light-dark(#ffffff, #000000);
  --color-ui-text-primary: light-dark(#3b3b3b, #cccccc);
  --color-ui-text-secondary: light-dark(#676767, #969696);
  --color-ui-text-accent: light-dark(#ffffff, #ffffff);
  --color-ui-border-primary: light-dark(#e5e5e5, #2b2b2b);
  --color-ui-border-secondary: light-dark(#464646, #464646);
  --color-ui-accent: light-dark(#0078d4, #0078d4);
  --color-ui-accent-secondary: light-dark(#0078d4, #0078d4);
  --color-ui-nav-text: light-dark(color-mix(in srgb, var(--color-ui-text-primary), black 34%), color-mix(in srgb, var(--color-ui-text-primary), black 34%));
  --color-ui-nav-text-hover: light-dark(color-mix(in srgb, var(--color-ui-text-primary), white 22%), color-mix(in srgb, var(--color-ui-text-primary), white 22%));
  --color-ui-input-bg: light-dark(#e5e5e5, #313131);
  --color-ui-input-border: light-dark(color-mix(in srgb, var(--color-ui-input-bg), black 5.5%), color-mix(in srgb, var(--color-ui-input-bg), white 5.5%));
  --color-ui-input-border-active: light-dark(var(--color-ui-accent), var(--color-ui-accent));
  --color-ui-input-text: light-dark(var(--color-ui-text-primary), var(--color-ui-text-primary));
  --color-ui-input-placeholder: light-dark(rgb(from var(--color-ui-input-text) r g b / 68%), rgb(from var(--color-ui-input-text) r g b / 68%));
  --color-ui-btn-primary-bg: light-dark(#4a77cd, #4a77cd);
  --color-ui-btn-primary-bg-hover: light-dark(color-mix(in srgb, var(--color-ui-btn-primary-bg), #141416 20%), color-mix(in srgb, var(--color-ui-btn-primary-bg), #141416 20%));
  --color-ui-btn-primary-border: light-dark(rgba(255, 255, 255, 0.071), rgba(255, 255, 255, 0.071));
  --color-ui-btn-primary-border-hover: light-dark(rgba(255, 255, 255, 0.071), rgba(255, 255, 255, 0.071));
  --color-ui-btn-primary-text: light-dark(#ffffff, #ffffff);
  --color-ui-btn-secondary-bg: light-dark(#e5e5e5, #313131);
  --color-ui-btn-secondary-bg-hover: light-dark(color-mix(in srgb, var(--color-ui-btn-secondary-bg), #141416 20%), color-mix(in srgb, var(--color-ui-btn-secondary-bg), #141416 20%));
  --color-ui-btn-secondary-border: light-dark(color-mix(in srgb, var(--color-ui-btn-secondary-bg), white 5.5%), color-mix(in srgb, var(--color-ui-btn-secondary-bg), white 5.5%));
  --color-ui-btn-secondary-border-hover: light-dark(color-mix(in srgb, var(--color-ui-btn-secondary-bg), white 5.5%), color-mix(in srgb, var(--color-ui-btn-secondary-bg), white 5.5%));
  --color-ui-btn-secondary-text: light-dark(#3b3b3b, #cccccc);
  --color-ui-toast-info: light-dark(#2f96b4, #2f96b4);
  --color-ui-toast-success: light-dark(#51a351, #51a351);
  --color-ui-toast-warning: light-dark(#f89406, #f89406);
  --color-ui-toast-error: light-dark(#bd362f, #bd362f);
  --color-ui-toast-text: light-dark(var(--color-ui-text-primary), var(--color-ui-text-primary));
}
:root {
  color-scheme: dark;
}
:root[data-dark-light="light"] {
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  :root:not([data-dark-light="dark"]) {
    color-scheme: light;
  }
}
:root___x {
  --color-ui-bg-primary: #0c0c12;
  --color-ui-bg-secondary: var(--color-ui-bg-primary);
  --color-ui-bg-content: #131319;
  --color-ui-text-primary: #ccccc4;
  --color-ui-accent: #ae6c16;
  --color-ui-btn-primary-bg: #7b5a2c;
}
:root___x {
  --color-ui-bg-primary: #c8bbae;
  --color-ui-bg-content: #f4f1ea;
  --color-ui-bg-content-highlight: #fafafa;
  --color-ui-shadow: rgba(0, 0, 0, 0.25);
  --color-ui-text-primary: #363433;
  --color-ui-text-secondary: #696969;
  --color-ui-accent: #ff9f1c;
  --color-ui-border-primary: #2b2b2b;
  --color-ui-border-secondary: #464646;
  --color-ui-input-bg: #f0f0f0;
  --color-ui-input-border: color-mix(in srgb, var(--color-ui-input-bg), black 5.5%);
  --color-ui-input-border-active: var(--color-ui-accent);
  --color-ui-input-text: var(--color-ui-text-primary);
  --color-ui-input-placeholder: rgb(from var(--color-ui-input-text) r g b / 68%);
  --color-ui-btn-primary-bg: #f09f64;
  --color-ui-btn-primary-bg: #36b7af;
  --color-ui-btn-primary-bg-hover: color-mix(in srgb, var(--color-ui-btn-primary-bg), #141416 20%);
  --color-ui-btn-primary-border: rgba(255, 255, 255, 0.071);
  --color-ui-btn-primary-border-hover: rgba(255, 255, 255, 0.071);
  --color-ui-btn-primary-text: #363433;
  --color-ui-btn-primary-text: #F4F1EA;
  --color-ui-btn-secondary-bg: #dcdcdc;
  --color-ui-btn-secondary-bg-hover: color-mix(in srgb, var(--color-ui-btn-secondary-bg), #141416 20%);
  --color-ui-btn-secondary-border: color-mix(in srgb, var(--color-ui-btn-secondary-bg), white 5.5%);
  --color-ui-btn-secondary-border-hover: color-mix(in srgb, var(--color-ui-btn-secondary-bg), white 5.5%);
  --color-ui-btn-secondary-text: #363433;
}
/* // sizes */
:root {
  --size-nav: 2.5rem;
  --size-panels-nav: calc(var(--size-nav) * 0.75);
  --size-scroll: 0.75rem;
}
/* // timing */
:root {
  --time-hover: 0.2s;
  --time-crossfade: 0.3s;
  --time-move: 0.4s;
  --time-appear: 0.5s;
  --time-loader: 1s;
}
.reduce-motion {
  --time-crossfade: 0s;
  --time-move: 0s;
  --time-appear: 0s;
  --time-loader: 0s;
}
@media (prefers-reduced-motion: reduce) {
  :root {
    --time-crossfade: 0s;
    --time-move: 0s;
    --time-appear: 0s;
    --time-loader: 0s;
  }
}
button {
  all: unset;
}
*:nth-child(n),
*::before,
*::after {
  box-sizing: border-box;
}
html,
body,
* {
  overscroll-behavior-x: none;
}
html {
  font-size: 16px;
  height: 100dvh;
  margin: 0;
  overflow: hidden;
  padding: 0;
}
body {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  background-color: var(--color-ui-bg-primary);
  color: var(--color-ui-text-primary);
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  height: 100%;
  line-height: 1.5;
  margin: 0;
  overflow: hidden;
  padding: 0;
  user-select: none;
}
.resizeAnimationBlocker * {
  transition: none !important;
}
::-webkit-scrollbar {
  background-color: transparent;
  height: var(--size-scroll);
  width: var(--size-scroll);
}
::-webkit-scrollbar-button {
  height: 0;
  width: 0;
}
::-webkit-scrollbar-thumb {
  background-color: rgb(from var(--color-ui-scroll-thumb) r g b / 0.25);
}
::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-ui-scroll-thumb);
}
::-webkit-scrollbar-track {
  background-color: transparent;
}
::-webkit-scrollbar-track:hover {
  background-color: color-mix(in srgb, var(--color-ui-scroll-thumb), transparent 80%);
}
input,
textarea [contenteditable="true"],
[contenteditable="plaintext-only"] {
  user-select: text;
}
.input {
  background-color: var(--color-ui-input-bg);
  border: 1px solid var(--color-ui-input-border);
  border-radius: 2px;
  color: var(--color-ui-input-text);
  font-family: inherit;
  font-size: inherit;
  line-height: 1.1;
  padding: 0.25em;
  width: 100%;
}
.input:focus-visible {
  border-color: var(--color-ui-input-border-active);
  outline: none;
}
.input[type="number"] {
  text-align: right;
}
.input[type="color"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  aspect-ratio: 1;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 3ch;
  height: 3ch;
}
.input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
.input[type="color"]::-webkit-color-swatch {
  border-radius: 50%;
}
.inputtextarea[data-is-dynamic-height="true"] {
  field-sizing: content;
}
input[type="checkbox"] {
  flex: 0 0 auto;
  appearance: none;
  aspect-ratio: 1;
  background-color: var(--color-ui-input-bg);
  border: 1px solid var(--color-ui-input-border);
  border-radius: 0.125rem;
  cursor: pointer;
  margin: 0;
  overflow: hidden;
  position: relative;
  transform: unset;
  width: 1em;
}
input[type="checkbox"]::before {
  content: '';
  box-shadow: inset 1em 1em var(--color-ui-input-placeholder);
  box-shadow: inset 1em 1em var(--color-ui-text-accent);
  clip-path: polygon(7% 60%, 0% 65%, 50% 100%, 100% 6%, 92% 0%, 47% 87%);
  inset: 1px;
  position: absolute;
  scale: 0;
  transform-origin: center;
  transition: scale var(--time-hover);
  z-index: 1;
}
input[type="checkbox"]::after {
  content: '';
  background-color: var(--color-ui-accent);
  inset: 0;
  position: absolute;
  transition: scale var(--time-hover);
  transform-origin: center;
  scale: 0;
  z-index: -1;
  z-index: 0;
}
input[type="checkbox"]:checked::before,
input[type="checkbox"]:checked::after {
  scale: 1;
}
select,
::picker(select) {
  appearance: base-select;
}
select.input {
  line-height: normal;
}
select.input:open {
  border-color: var(--color-ui-accent);
}
select.input:open::picker-icon {
  rotate: 180deg;
}
select.input:focus-within {
  border-color: var(--color-ui-accent);
}
select.input button {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 1em;
}
select.input::picker-icon {
  align-self: center;
  color: var(--color-ui-input-text);
  transition: rotate var(--time-hover);
}
select.input::picker(select) {
  border: 1px solid var(--color-ui-accent);
}
select.input option {
  background-color: var(--color-ui-input-bg);
  border: 1px solid var(--color-ui-input-border);
  color: var(--color-ui-input-text);
  font-size: inherit;
  line-height: 1.2;
  outline: none;
  padding: 0.25rem;
  white-space: normal;
}
select.input option:checked {
  background-color: color-mix(in srgb, var(--color-ui-bg-content), var(--color-ui-accent) 25%);
}
select.input option:hover,
select.input option:focus-visible {
  background-color: color-mix(in srgb, var(--color-ui-bg-content), var(--color-ui-accent));
}
select.input option::checkmark {
  display: none;
}
.button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: var(--color-ui-btn-primary-bg);
  border: 1px solid var(--color-ui-btn-primary-bg);
  border-radius: 3px;
  color: var(--color-ui-btn-primary-text);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.125rem 1rem;
  transition: background-color var(--time-hover), color var(--time-hover);
}
.button :empty:not(.icon) {
  display: none;
}
.button:hover,
.button:focus {
  background-color: var(--color-ui-btn-primary-bg-hover);
  border-color: var(--color-ui-btn-primary-border-hover);
}
.button:disabled {
  cursor: default;
  opacity: 0.5;
}
.button.secondary {
  background-color: var(--color-ui-btn-secondary-bg);
  border: 1px solid var(--color-ui-btn-secondary-border);
  color: var(--color-ui-btn-secondary-text);
}
.button.secondary:hover,
.button.secondary:focus {
  background-color: var(--color-ui-btn-secondary-bg-hover);
  border-color: var(--color-ui-btn-secondary-border-hover);
}
.button.compact {
  line-height: 1;
  padding: 0.25rem;
}
.icon {
  height: 1lh;
  width: 1em;
  position: relative;
}
.icon::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: currentColor;
  mask-image: var(--mask);
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}
body:not([data-input-mode="touch"]) .whenTouch {
  display: none;
}
@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
.anim-spin {
  animation: spin 1000ms linear infinite;
}
.anim-spin-gravity {
  animation: spin 1000ms linear infinite;
  animation-timing-function: linear(0 0%, 0.16 24.12%, 0.43 46.76%, 0.75 60%, 0.94 85.59%, 1 100%);
}
@keyframes wiggle {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: -5deg;
  }
  75% {
    rotate: 5deg;
  }
  100% {
    rotate: 0deg;
  }
}
.anim-wiggle {
  animation: wiggle 100ms linear infinite;
}
@keyframes wiggle-large {
  0% {
    rotate: 0deg;
  }
  25% {
    rotate: -20deg;
  }
  75% {
    rotate: 20deg;
  }
  100% {
    rotate: 0deg;
  }
}
.anim-wiggle-large {
  animation: wiggle-large 100ms linear infinite;
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
.anim-pulse {
  animation: pulse 1000ms linear infinite;
}
@keyframes bounce {
  0% {
    transform: scale(1) translateY(0);
  }
  10% {
    transform: scale(1.1, 0.9) translateY(0);
  }
  30% {
    transform: scale(0.9, 1.1) translateY(-0.5em);
  }
  50% {
    transform: scale(1.05, 0.95) translateY(0);
  }
  57% {
    transform: scale(1) translateY(-0.125em);
  }
  64% {
    transform: scale(1) translateY(0);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
.anim-bounce {
  animation-name: bounce;
  animation-duration: 1000ms;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-iteration-count: infinite;
}
@keyframes enter-fade-pop {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  70% {
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
.anim-enter-fade-pop {
  animation-duration: 0.5s;
  animation-name: enter-fade-pop;
  animation-delay: 0s;
  animation-fill-mode: backwards;
  animation-timing-function: cubic-bezier(0.26, 0.53, 0.74, 1.48);
}
.anim-enter-fade-pop:nth-child(1) {
  animation-delay: 0.1s;
}
.anim-enter-fade-pop:nth-child(2) {
  animation-delay: 0.2s;
}
.anim-enter-fade-pop:nth-child(3) {
  animation-delay: 0.3s;
}
.anim-enter-fade-pop:nth-child(4) {
  animation-delay: 0.4s;
}
.anim-enter-fade-pop:nth-child(5) {
  animation-delay: 0.5s;
}
.anim-enter-fade-pop:nth-child(6) {
  animation-delay: 0.6s;
}
.anim-enter-fade-pop:nth-child(7) {
  animation-delay: 0.7s;
}
.anim-enter-fade-pop:nth-child(8) {
  animation-delay: 0.8s;
}
.anim-enter-fade-pop:nth-child(9) {
  animation-delay: 0.9s;
}
.anim-enter-fade-pop:nth-child(10) {
  animation-delay: 1s;
}
.anim-enter-fade-pop:nth-child(11) {
  animation-delay: 1.1s;
}
.anim-enter-fade-pop:nth-child(12) {
  animation-delay: 1.2s;
}
.anim-enter-fade-pop:nth-child(13) {
  animation-delay: 1.3s;
}
.anim-enter-fade-pop:nth-child(14) {
  animation-delay: 1.4s;
}
.anim-enter-fade-pop:nth-child(15) {
  animation-delay: 1.5s;
}
.anim-enter-fade-pop:nth-child(16) {
  animation-delay: 1.6s;
}
.anim-enter-fade-pop:nth-child(17) {
  animation-delay: 1.7s;
}
.anim-enter-fade-pop:nth-child(18) {
  animation-delay: 1.8s;
}
.anim-enter-fade-pop:nth-child(19) {
  animation-delay: 1.9s;
}
.anim-enter-fade-pop:nth-child(20) {
  animation-delay: 2s;
}
.anim-enter-fade-pop:nth-child(21) {
  animation-delay: 2.1s;
}
.anim-enter-fade-pop:nth-child(22) {
  animation-delay: 2.2s;
}
.anim-enter-fade-pop:nth-child(23) {
  animation-delay: 2.3s;
}
.anim-enter-fade-pop:nth-child(24) {
  animation-delay: 2.4s;
}
.anim-enter-fade-pop:nth-child(25) {
  animation-delay: 2.5s;
}
.formItem.isDecorated {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  cursor: default;
  padding: 0.5rem;
}
.formItem.isDecorated:hover {
  background-color: var(--color-ui-bg-content-highlight);
}
.formItem.isDecorated .fi-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.formItem.isDecorated .fi-nameParts {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.formItem.isDecorated .fi-nameParts .icon {
  opacity: 0.75;
}
.formItem.isDecorated .fi-name {
  font-weight: bold;
}
.formItem.isDecorated .fi-iconList {
  display: flex;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.formItem.isDecorated .fi-icon {
  height: 1lh;
  width: 1rem;
}
.formItem.isDecorated .fi-icon.hasCallback {
  cursor: pointer;
}
.formItem.isDecorated .fi-body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.formItem.isDecorated .fi-body:has(input[type="checkbox"]) {
  flex-direction: row-reverse;
  align-items: center;
  justify-content: start;
  gap: 0.5rem;
}
.formItem.isDecorated .fi-description {
  font-size: small;
  opacity: 0.75;
}
.formItem.isDecorated .input {
  max-width: 30ch;
}
.formItem.isDecorated .fi-actionList {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  list-style: none;
  margin: 0;
  padding: 0;
}
.formItem.isDecorated .fi-action {
  font-size: inherit;
  line-height: 1;
  padding: 0.25rem;
}
option[data-is-hidden="true"] {
  display: none;
}
#tabler-icons {
  display: none;
}
:root {
  interpolate-size: allow-keywords;
}
.layout {
  display: flex;
  flex-direction: row;
  gap: 2rem;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 600px) {
  .layout {
    flex-direction: column;
  }
}
.login {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
  align-items: center;
  animation: fall-in var(--time-move) ease-in-out 1;
}
.login.disabled {
  opacity: 0.5;
  pointer-events: none;
}
.login.invalid .button {
  /* @apply --anim-wiggle; */
  /* .anim-wiggle; */
  animation: wiggle 100ms linear infinite;
}
.login label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 35ch;
}
.login label:has([data-dom="create"]):has(:checked) + label {
  height: auto;
}
.login label:has([data-dom="create"]):has(:checked) ~ .button::after {
  content: 'Create';
}
.login label:has([data-dom="token"]) {
  height: 0;
  overflow: hidden;
  transition: height var(--time-move);
}
.login .button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.login .button .when-disabled {
  display: none;
  /* .anim-spin; */
  animation: spin 1000ms linear infinite;
}
.login .button:disabled .when-disabled {
  display: inline;
}
.login .button:disabled .when-enabled {
  display: none;
}
.login .button::after {
  content: 'Login';
}
.resume {
  /* // border: 1px solid var(--color-ui-border-primary); */
}
.resume:has(.resumeList:empty) {
  display: none;
}
.resume h2 {
  font-size: 1rem;
  margin: 0;
  padding: 0.5rem;
}
.resume .resumeList {
  list-style: none;
  margin: 0;
  padding: 0;
}
.resume .item {
  display: flex;
  border: 1px solid var(--color-ui-border-secondary);
  background-color: var(--color-ui-bg-content);
  cursor: pointer;
  opacity: 0.75;
  position: relative;
  transition: opacity var(--time-hover) scale var(--time-hover);
}
.resume .item:hover {
  opacity: 1;
  scale: 1.1;
  z-index: 1;
}
.resume .link {
  flex: 1 1 auto;
  color: inherit;
  padding: 0.5rem;
  text-decoration: none;
}
.login,
.resume {
  transition: translate var(--time-move);
  translate: 0 0;
}
.login.fall-away,
.resume.fall-away {
  translate: 100dvw 0;
}
@keyframes fall-in {
  from {
    translate: -100dvw 0;
  }
  to {
    translate: 0 0;
  }
}