* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}
.mouse-disabled,
.mouse-disabled * {
  cursor: none !important;
  /* cursor: var(--cursor-inactive), auto !important; */
  pointer-events: none;
}
:root {
  --cursor-inactive: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.806 9.83906L5.32577 2.09758C3.90581 1.38748 2.13086 2.2751 2.13086 3.69531L2.13086 20.2409C2.13086 22.0419 4.91136 22.8422 6.24435 21.46C8.91706 18.6887 12.3646 15.5483 14.9105 14.762C16.3439 14.3192 18.0631 14.0089 19.7689 13.7914C21.9248 13.5165 22.6932 10.7828 20.806 9.83906Z' fill='%23E76565' fill-opacity='0.33'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.24343 21.46C4.91044 22.8422 2.12994 22.0419 2.12994 20.2409L2.12994 3.6953C2.12994 2.2751 3.90489 1.38747 5.32484 2.09757L20.8051 9.83906C22.6923 10.7828 21.9238 13.5165 19.7679 13.7914C18.0621 14.0089 16.3429 14.3192 14.9096 14.762C12.3637 15.5483 8.91614 18.6887 6.24343 21.46ZM6.38981 0.499844L21.8701 8.24133C23.8324 9.22265 24.2567 11.0791 23.8766 12.4863C23.4995 13.8826 22.2117 15.3446 20.0781 15.6166C18.4372 15.8259 16.8719 16.1145 15.625 16.4997C14.7927 16.7567 13.5642 17.5077 12.0809 18.7124C10.6548 19.8707 9.18654 21.286 7.87807 22.6428C6.55476 24.0149 4.55248 24.2453 3.00449 23.7918C1.44645 23.3355 0 22.0768 0 20.2409L0 3.6953C0 0.85489 3.5499 -0.920359 6.38981 0.499844Z' fill='%23E76565' fill-opacity='0.59'/%3E%3C/svg%3E");
  --cursor-normal: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.806 9.83906L5.32577 2.09758C3.90581 1.38748 2.13086 2.2751 2.13086 3.69531L2.13086 20.2409C2.13086 22.0419 4.91136 22.8422 6.24435 21.46C8.91706 18.6887 12.3646 15.5483 14.9105 14.762C16.3439 14.3192 18.0631 14.0089 19.7689 13.7914C21.9248 13.5165 22.6932 10.7828 20.806 9.83906Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.24343 21.46C4.91044 22.8422 2.12994 22.0419 2.12994 20.2409L2.12994 3.6953C2.12994 2.2751 3.90489 1.38747 5.32484 2.09757L20.8051 9.83906C22.6923 10.7828 21.9238 13.5165 19.7679 13.7914C18.0621 14.0089 16.3429 14.3192 14.9096 14.762C12.3637 15.5483 8.91614 18.6887 6.24343 21.46ZM6.38981 0.499844L21.8701 8.24133C23.8324 9.22265 24.2567 11.0791 23.8766 12.4863C23.4995 13.8826 22.2117 15.3446 20.0781 15.6166C18.4372 15.8259 16.8719 16.1145 15.625 16.4997C14.7927 16.7567 13.5642 17.5077 12.0809 18.7124C10.6548 19.8707 9.18654 21.286 7.87807 22.6428C6.55476 24.0149 4.55248 24.2453 3.00449 23.7918C1.44645 23.3355 0 22.0768 0 20.2409L0 3.6953C0 0.85489 3.5499 -0.920359 6.38981 0.499844Z' fill='%23E76565' fill-opacity='0.59'/%3E%3C/svg%3E");
  --cursor-pointer: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.2007 4.1875V7.58249L12.2634 7.57999C12.6798 7.56499 13.2536 7.55999 13.666 7.63749C14.0397 7.70749 14.3906 7.86249 14.6509 7.99749C15.0152 8.18749 15.2594 8.47874 15.3982 8.79999L15.5744 8.78499C15.9907 8.75499 16.634 8.73749 17.1197 8.91999C17.6135 9.10499 18.0392 9.52874 18.2941 9.81499C18.3942 9.92748 18.4823 10.0337 18.5543 10.125H19.331C19.7039 10.125 20.0727 10.1982 20.4135 10.3399C20.7543 10.4815 21.0597 10.6885 21.3099 10.9475C21.5601 11.2065 21.7496 11.5117 21.8662 11.8435C21.9828 12.1752 22.0238 12.5262 21.9867 12.8737L21.6237 16.2675C21.5586 16.8788 21.3567 17.4704 21.0312 18.0037L19.1695 21.055C18.9945 21.3419 18.7417 21.5805 18.4365 21.7464C18.1314 21.9124 17.7848 21.9999 17.432 22H9.02186C8.64991 21.9999 8.28532 21.9029 7.96898 21.7196C7.65265 21.5364 7.39708 21.2742 7.23094 20.9625L5.6095 17.925L2.28521 12.7362C2.03288 12.3395 1.94381 11.8701 2.03471 11.4162C2.12561 10.9623 2.39023 10.555 2.77892 10.2709C3.1676 9.98677 3.65363 9.84527 4.1458 9.87294C4.63796 9.90062 5.10242 10.0956 5.45202 10.4212L7.52987 12.3662V4.1875C7.52987 3.60734 7.77592 3.05094 8.2139 2.6407C8.65187 2.23047 9.24589 2 9.86528 2C10.4847 2 11.0787 2.23047 11.5167 2.6407C11.9546 3.05094 12.2007 3.60734 12.2007 4.1875V4.1875Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M5.45207 10.4212L7.52991 12.3662V4.18749C7.52991 3.60733 7.77596 3.05093 8.21394 2.6407C8.65191 2.23046 9.24593 2 9.86532 2C10.4847 2 11.0787 2.23046 11.5167 2.6407C11.9547 3.05093 12.2007 3.60733 12.2007 4.18749V7.58249L12.2635 7.57999C12.53 7.57038 12.861 7.56488 13.1729 7.58249C13.3483 7.59238 13.5176 7.60959 13.666 7.63749C14.0397 7.70749 14.3907 7.86248 14.6509 7.99748C15.0152 8.18748 15.2594 8.47873 15.3982 8.79998L15.5744 8.78498C15.9908 8.75498 16.634 8.73748 17.1198 8.91998C17.6135 9.10498 18.0392 9.52873 18.2941 9.81498C18.3942 9.92748 18.4823 10.0337 18.5544 10.125H19.3311C19.704 10.125 20.0727 10.1982 20.4135 10.3399C20.7544 10.4815 21.0598 10.6885 21.31 10.9475C21.5602 11.2065 21.7497 11.5117 21.8662 11.8434C21.9828 12.1752 22.0239 12.5262 21.9868 12.8737L21.6238 16.2675C21.5586 16.8788 21.3567 17.4704 21.0312 18.0037L19.1696 21.055C18.9946 21.3419 18.7417 21.5805 18.4366 21.7464C18.1314 21.9124 17.7849 21.9999 17.432 22H9.0219C8.64995 21.9999 8.28536 21.9029 7.96903 21.7196C7.65269 21.5364 7.39712 21.2742 7.23098 20.9625L5.60954 17.925L2.28525 12.7362C2.03292 12.3395 1.94385 11.8701 2.03475 11.4162C2.12565 10.9623 2.39027 10.555 2.77896 10.2709C3.16765 9.98677 3.65368 9.84526 4.14584 9.87294C4.638 9.90062 5.10247 10.0956 5.45207 10.4212ZM3.88262 18.9369L0.599427 13.8123L0.597636 13.8095C0.0734229 12.9852 -0.120233 11.9918 0.0736896 11.0235C0.26709 10.0577 0.823864 9.22271 1.59867 8.65632C2.37058 8.09203 3.31584 7.82311 4.25813 7.8761C4.69458 7.90064 5.12438 7.99396 5.52992 8.15213V4.18749C5.52992 3.03311 6.0207 1.95471 6.84671 1.18102C7.66828 0.411477 8.75619 0 9.86532 0C10.9745 0 12.0624 0.411477 12.8839 1.18102C13.7099 1.95471 14.2007 3.03311 14.2007 4.18749V5.70612C14.7781 5.8368 15.2638 6.06234 15.5719 6.22216L15.5738 6.22316L15.5757 6.22415C15.8706 6.37795 16.1314 6.5636 16.3584 6.77216C16.8034 6.79213 17.3276 6.86173 17.8223 7.04744C17.8226 7.04754 17.8229 7.04765 17.8232 7.04776C18.5254 7.31127 19.0834 7.77055 19.4472 8.12638C20.0415 8.14063 20.6304 8.2641 21.1812 8.49304C21.768 8.73696 22.3033 9.09725 22.7483 9.55784C23.1937 10.0188 23.5388 10.5704 23.7531 11.1805C23.9677 11.791 24.0443 12.4409 23.9755 13.086L23.9754 13.0864L23.6125 16.4795C23.6125 16.4797 23.6124 16.4799 23.6124 16.4802C23.5153 17.3901 23.2152 18.2642 22.7385 19.0455L20.8771 22.0963C20.877 22.0964 20.877 22.0965 20.8769 22.0966C20.5123 22.6943 19.9956 23.1752 19.3921 23.5034C18.7891 23.8313 18.1136 23.9997 17.4326 24H9.0219C8.30434 23.9999 7.59296 23.8131 6.96649 23.4502C6.33955 23.087 5.81461 22.5566 5.46663 21.9043C5.46655 21.9041 5.46648 21.904 5.46641 21.9039C5.46628 21.9036 5.46615 21.9034 5.46603 21.9032L3.88262 18.9369Z' fill='%23E76565' fill-opacity='0.59'/%3E%3C/svg%3E")
    6 0;
  cursor: var(--cursor-normal), auto;
  --background-lightest: #fff2;
  --background-lighting: #fff2;
  --background-lighter: #fff2;
  --background-light: #fff1;
  --background-default: #0006;
  --background-dim: #000;
  --background-dimmer: #000;
  --background-dimming: #000;
  --background-dimmest: #000;
  /* --background-lightest: hsl(248, 13%, 56%);
  --background-lighting: hsl(248, 13%, 43%);
  --background-lighter: hsl(248, 13%, 34%);
  --background-light: hsl(248, 13%, 20%);
  --background-default: hsl(248, 13%, 12%);
  --background-dim: hsl(248, 13%, 11%);
  --background-dimmer: hsl(248, 13%, 9%);
  --background-dimming: hsl(248, 13%, 8%);
  --background-dimmest: hsl(248, 13%, 6%); */
  --text-lightest: hsl(240, 8%, 95%);
  --text-lighting: hsl(240, 6%, 93%);
  --text-lighter: hsl(240, 5%, 93%);
  --text-light: hsl(240, 4%, 91%);
  --text-default: hsl(240, 6%, 90%);
  --text-dim: hsl(240, 2%, 81%);
  --text-dimmer: hsl(240, 1%, 67%);
  --text-dimming: hsl(240, 1%, 58%);
  --text-dimmest: hsl(240, 1%, 45%);
  --accent-lightest: hsl(248, 65%, 74%);
  --accent-lighting: hsl(249, 66%, 67%);
  --accent-lighter: hsl(249, 65%, 62%);
  --accent-light: hsl(249, 65%, 54%);
  --accent-default: hsl(248, 68%, 49%);
  --accent-dim: hsl(249, 68%, 44%);
  --accent-dimmer: hsl(249, 68%, 37%);
  --accent-dimming: hsl(249, 68%, 32%);
  --accent-dimmest: hsl(248, 68%, 25%);
  --label-lightest: hsl(248, 38%, 92%);
  --label-lighting: hsl(249, 40%, 90%);
  --label-lighter: hsl(248, 40%, 89%);
  --label-light: hsl(251, 40%, 86%);
  --label-default: hsl(250, 40%, 85%);
  --label-dim: hsl(251, 23%, 76%);
  --label-dimmer: hsl(248, 12%, 64%);
  --label-dimming: hsl(249, 9%, 55%);
  --label-dimmest: hsl(248, 7%, 43%);
  --secondary-lightest: hsl(0, 0%, 61%);
  --secondary-lighting: hsl(0, 0%, 50%);
  --secondary-lighter: hsl(0, 0%, 42%);
  --secondary-light: hsl(0, 0%, 30%);
  --secondary-default: hsl(0, 0%, 23%);
  --secondary-dim: hsl(0, 0%, 20%);
  --secondary-dimmer: hsl(0, 0%, 17%);
  --secondary-dimming: hsl(0, 0%, 15%);
  --secondary-dimmest: hsl(0, 0%, 11%);
  --positive-lightest: hsl(144, 35%, 65%);
  --positive-lighting: hsl(144, 35%, 54%);
  --positive-lighter: hsl(144, 39%, 47%);
  --positive-light: hsl(144, 60%, 37%);
  --positive-default: hsl(144, 83%, 30%);
  --positive-dim: hsl(144, 82%, 27%);
  --positive-dimmer: hsl(144, 82%, 22%);
  --positive-dimming: hsl(144, 84%, 19%);
  --positive-dimmest: hsl(144, 82%, 15%);
  --negative-lightest: hsl(0, 35%, 65%);
  --negative-lighting: hsl(0, 35%, 54%);
  --negative-lighter: hsl(0, 39%, 47%);
  --negative-light: hsl(0, 60%, 37%);
  --negative-default: hsl(0, 83%, 30%);
  --negative-dim: hsl(0, 82%, 27%);
  --negative-dimmer: hsl(0, 82%, 22%);
  --negative-dimming: hsl(0, 84%, 19%);
  --negative-dimmest: hsl(0, 82%, 15%);

  --controller-color-0: hsl(248, 65%, 74%);
  --controller-color-1: hsl(218, 65%, 74%);
  --controller-color-2: hsl(190, 65%, 74%);
  --controller-color-3: hsl(147, 65%, 74%);
  --controller-color-4: hsl(0, 65%, 74%);
  --controller-color-5: hsl(147, 65%, 74%);

  --controller-indicator-0: url("data:image/svg+xml,%3Csvg width='21' height='6' viewBox='0 0 21 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='7' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='12' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='17' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect width='6' height='6' rx='1' fill='%239D92E8'/%3E%3C/svg%3E");
  --controller-indicator-1: url("data:image/svg+xml,%3Csvg width='21' height='6' viewBox='0 0 21 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='12' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='17' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='5' width='6' height='6' rx='1' fill='%2392B1E8'/%3E%3C/svg%3E");
  --controller-indicator-2: url("data:image/svg+xml,%3Csvg width='21' height='6' viewBox='0 0 21 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='5' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='17' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='10' width='6' height='6' rx='1' fill='%2392D9E8'/%3E%3C/svg%3E");
  --controller-indicator-3: url("data:image/svg+xml,%3Csvg width='21' height='6' viewBox='0 0 21 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='5' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='10' y='1' width='4' height='4' rx='1' fill='%23686675'/%3E%3Crect x='15' width='6' height='6' rx='1' fill='%2392E8B8'/%3E%3C/svg%3E");
  --controller-indicator-4: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='#e89292' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-mouse-pointer-2'%3E%3Cpath d='m4 4 7.07 17 2.51-7.39L21 11.07z'/%3E%3C/svg%3E");

  --current-player: var(--controller-color-0);
  --current-player-indicator: var(--controller-indicator-0);

  font-size: 16px;

  transition: font-size 0.5s ease;

  --animation-duration: 0.35s;
  --easing-function: cubic-bezier(0.87, 0, 0.13, 1);
}

body {
  background-color: var(--background-dimmer);
  color: var(--label-lighter);
  font-family:
    "Radio Canada",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
}

html,
body {
  overflow: hidden;
}

html,
body,
.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  margin: 0;
  gap: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
  margin: 0;
}

.flex-list,
.flex-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1rem;
}

.flex-center {
  justify-content: center;
  align-items: center;
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.flex-list-small,
.flex-row-small {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 0.5rem;
}

.flex-col-small {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.loading {
  animation: load 1s linear infinite;
}
@keyframes load {
  to {
    transform: rotate(360deg);
  }
}

/* @keyframes animateIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes animateOut {
  from {
    transform: scale(1);
    opacity: 1;
  }
  to {
    transform: scale(0.9);
    opacity: 0;
  }
} */

@keyframes st-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes st-pop-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes animateIn {
  from {
    transform: translateY(-5%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes animateOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(5%);
    opacity: 0;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(50%);
    opacity: 0;
  }
}
@keyframes slideUpIn {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideUpOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(-100%);
    opacity: 0;
  }
}
@keyframes slideDownIn {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes slideDownOut {
  from {
    transform: translateY(0);
    opacity: 1;
  }
  to {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes pop {
  from {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
  to {
    transform: scale(1);
  }
}
@keyframes blink {
  20% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  80% {
    opacity: 1;
  }
}
@keyframes float {
  0% {
    transform: translatey(0px);
  }
  50% {
    transform: translatey(-10px);
  }
  100% {
    transform: translatey(0px);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(1.2);
  }
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  /* margin: 0.75rem 0; */
}

.popIn {
  pointer-events: none;
  animation: animateIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.popOut {
  pointer-events: none;
  animation: animateOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.slideIn {
  pointer-events: none;
  animation: slideIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.slideOut {
  pointer-events: none;
  animation: slideOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.slideUpIn {
  pointer-events: none;
  animation: slideUpIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.slideUpOut {
  pointer-events: none;
  animation: slideUpOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.slideDownIn {
  pointer-events: none;
  animation: slideDownIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.slideDownOut {
  pointer-events: none;
  animation: slideDownOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.fadeIn {
  pointer-events: none;
  animation: fadeIn 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.fadeOut {
  pointer-events: none;
  animation: fadeOut 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.pop {
  animation: pop 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.tiles {
  position: absolute;
  height: 100%;
  width: 100%;

  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  grid-template-rows: repeat(var(--rows), 1ft);
}

.tile {
  background-color: rgb(0, 0, 0);
  opacity: 1;
  transition: all;
}

@keyframes logoAnimateIn {
  0% {
    transform: scale(0) translateY(-50%);
  }
  100% {
    transform: scale(1) translateY(0);
  }
}
@keyframes logoAnimateOut {
  0% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
    opacity: 1;
  }

  20% {
    transform: scale(0.75);
    filter: saturate(1) brightness(1);
    opacity: 1;
  }

  40% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
    opacity: 1;
  }

  /* 75% {
    transform: scale(1);
    filter: saturate(1) brightness(1);
    opacity: 1;
  } */

  100% {
    transform: scale(5) translateY(0);
    filter: saturate(0) brightness(0);
    opacity: 0;
  }
}

.logoAnimateIn {
  animation: logoAnimateIn 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.logoAnimateOut {
  animation: logoAnimateOut 1s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

.hv,
button {
  border: 0.125rem solid transparent;
  scroll-margin: 2rem;
  /* backdrop-filter: blur(0.5rem) brightness(0.5) contrast(1.05); */
  /* transition: border-color 0.05s linear; */
}
button svg {
  width: 100%;
  height: 100%;
}
.hv:hover,
button:hover .hv.over,
button.over {
  border: 0.125rem solid var(--current-player) !important;
}

.ui {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: unset;
  /* background-color: var(--background-dimmer); */
  padding: 1rem 2rem;
  max-width: 80rem; /* 1280px */
  margin: 0 auto;
  display: flex;
  overflow: auto;
  flex-direction: column;
  gap: 1rem;
}

.full-ui {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: unset;
  display: flex;
  flex-direction: column;
}

button.small,
button.sm {
  min-width: unset;
  min-width: 3rem;
  width: 3rem;
  height: 3rem;
  padding: 0.75rem;
}
button.sm {
  min-width: 5rem;
}
button.auto {
  min-width: unset !important;
}

button.pressed {
  background-color: var(--background-lightest);
  /* color: var(--accent-default); */
  color: var(--current-player);
}
button.wide {
  flex: 1;
}

button,
.box {
  min-width: 11.25rem;
  padding: 1rem 0.75rem;
  font: inherit;
  background-color: var(--background-light);
  border-radius: 0.5rem;
  font-weight: 550;
  color: var(--text-default);
  cursor: var(--cursor-pointer), auto;
  outline: none;
}

.positive-text {
  color: var(--positive-lighting);
}
.negative-text {
  color: var(--negative-lighting);
}

[part="cue"] {
  border-radius: 10px;
  font-family:
    "Radio Canada",
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Oxygen,
    Ubuntu,
    Cantarell,
    "Open Sans",
    "Helvetica Neue",
    sans-serif;
  background: rgba(0, 0, 0, 0.5);
}

input[type="text"],
.input,
button.input-box {
  white-space: pre-wrap;
  overflow: auto;
  max-width: 100%;
  min-width: 11.25rem;
  height: 3rem;
  display: flex;
  align-items: center;
  width: 100%;
  padding: 1rem 0.75rem;
  font: inherit;
  background-color: var(--background-light);
  border-radius: 0.32rem;
  font-weight: 550;
  color: var(--text-default);
  cursor: var(--cursor-pointer), auto;
  border: 0.125rem solid var(--current-player);
}
.input::after {
  content: "|";
  animation: blink 1.5s linear infinite;
}
button.input-box {
  border-color: var(--background-dimmer);
}
button.input-box.over {
  border-color: var(--current-player);
}

input[type="range"] {
  accent-color: var(--current-player);
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(0.5rem) brightness(0.5) contrast(1.05);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-content {
  /* width: 75%; */
  /* max-width: 50rem; */
  max-width: 90%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 2rem;
  border-radius: 0.8rem;
  background-color: var(--background-default);
  border: 0.1rem solid var(--background-lighter);
  box-shadow: 0 0 0.5rem 0 var(--current-player);
}
.modal-buttons {
  display: flex;
  /* flex-wrap: wrap; */
  overflow-x: auto;
  gap: 0.75rem;
}

.ui-box::-webkit-scrollbar,
.ui::-webkit-scrollbar {
  width: 0.5em;
}

.ui-box::-webkit-scrollbar-track,
.ui::-webkit-scrollbar-track {
  background: transparent; /* Set the background color to transparent */
}

.ui-box::-webkit-scrollbar-thumb,
.ui::-webkit-scrollbar-thumb {
  background: transparent; /* Set the thumb color to transparent */
}

::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-color: rgba(255, 255, 255, 0.01) transparent;
  scrollbar-width: thin;
}

.main-menu-attached {
  width: 100%;
  padding: 0rem 2rem 2.75rem 2rem;
}

.transparent {
  background-color: transparent;
}

.transparent .target {
  border: 0.1rem solid var(--background-lighter);
  border-radius: 0.32rem;
}

.transparent.over .target {
  border-color: var(--current-player);
}

.icon,
.icon svg {
  width: 2rem;
  height: 2rem;
}

.key {
  position: relative;
}
.key-button-prompt {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: var(--text-default);
}

.notify-box {
  display: flex;
  flex-direction: column-reverse;
  position: fixed;
  z-index: 999999;
  top: 1.5rem;
  left: 1.5rem;
  gap: 1rem;
}

.notify-box > .notify {
  background-color: var(--background-default);
  border: 0.125rem solid var(--current-player);
  border-radius: 0.5rem;
  padding: 1rem 1.25rem;
  min-width: 20rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  backdrop-filter: blur(0.5rem) brightness(0.8) contrast(1.2);
  box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.5);
}
.notify-box > .notify .notify-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--current-player);
  letter-spacing: 0.05em;
}
.notify-box > .notify .notify-description {
  font-size: 0.95rem;
  color: var(--text-default);
  opacity: 0.9;
}

.hidden {
  display: none;
}

a.hv {
  text-decoration: none;
  border: 0;
  text-decoration-thickness: 0rem;
}
a.hv.selected {
  text-decoration: none;
}
a.hv.over {
  text-decoration: underline;
  text-decoration-thickness: 0.2rem;
  border: 0 !important;
}

.space {
  transition: opacity 1s linear;
}

.pad-top {
  padding-top: 5rem;
}
.pad-top-sm {
  padding-top: 3rem;
}
.gap {
  gap: 2rem;
}
.home-menu-section {
  overflow: auto;
}
.w-100 .home-menu-section {
  padding: 2.75rem 0;
  gap: 2.5rem;
}

.mouse-disabled,
.mouse-disabled * {
  cursor: var(--cursor-inactive), auto !important;
  pointer-events: none;
}

p + .flex-list button {
  scroll-margin: 10rem;
}

.ui .flex-list:first-of-type button {
  scroll-margin: 999rem;
}
.ui .flex-list:last-of-type button {
  scroll-margin: 9rem;
}

button[disabled] {
  filter: saturate(0);
}

a:not(.btn) {
  color: var(--current-player);
  text-decoration: underline;
}

.title {
  font-size: 1.5rem;
}
label {
  color: var(--label-dim);
  font-weight: 500;
  pointer-events: none;
}

button.negative {
  background-color: var(--negative-light);
}
button.positive {
  background-color: var(--positive-light);
}

kbd {
  border: 0.1rem solid #fff4;
  padding: 0.2rem 0.5rem;
  border-radius: 0.5rem;
  background: #fff2;
  font: inherit;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.controller-status-bar {
  position: fixed;
  bottom: 1rem;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-top: 0.1rem solid var(--background-lighter);
  padding-top: 1rem;
  gap: 2.5rem;
  z-index: 9999999;
}
.controller-status-bar .csb-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
}
.csb-button span {
  display: flex;
  align-items: center;
  width: 2rem;
  height: 2rem;
}
.csb-button svg {
  width: 100%;
  height: 100%;
}
.csb-button kbd {
  border-radius: 999px;
  padding: 0.3rem 0.75rem;
}

.overlay-ui {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 2rem 3rem;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.3) 20%,
    transparent 50%,
    rgba(0, 0, 0, 0.9) 100%
  );
  transition: opacity 0.3s ease-out;
  z-index: 10;
}

.hidden {
  opacity: 0;
  pointer-events: none;
}

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #89cff0;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #010141;
}

input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #89cff0;
  border-radius: 50%;
  cursor: pointer;
  border: 2px solid #010141;
}

:root {
  --encore-blue: #89cff0;
  --encore-gold: #ffd700;
  --encore-orange: #ffa53f;
  --bg-dark: #0a0a14;
  --bg-panel: rgba(20, 20, 30, 0.9);
  --bg-light: rgba(255, 255, 255, 0.05);
  --border-color: rgba(137, 207, 240, 0.3);
}
* {
  box-sizing: border-box;
  user-select: none;
}

.st-wrap {
  background: var(--bg-dark);
  color: #fff;
  font-family: "Radio Canada", sans-serif;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.st-toolbar {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  background: var(--bg-panel);
  border-bottom: 2px solid var(--border-color);
  flex-shrink: 0;
  z-index: 50;
}
.st-toolbar h1 {
  font-family: "Rajdhani", sans-serif;
  font-size: 1.5rem;
  color: var(--encore-blue);
  margin: 0;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-right: 20px;
}

ion-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2em;
  padding: 2.5px;
  vertical-align: middle;
  pointer-events: none; /* Prevents icons from blocking clicks on buttons */
}

.st-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: unset !important;
  height: auto !important;
  line-height: 1.2 !important;
  background: var(--bg-light) !important;
  color: #fff !important;
  border: 1px solid var(--encore-blue) !important;
  padding: 6px 12px !important;
  border-radius: 4px !important;
  cursor: pointer;
  font-weight: 600 !important;
  font-family: "Rajdhani", sans-serif !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  white-space: nowrap !important;
  transition: all 0.15s !important;
}
.st-btn:hover {
  background: var(--encore-blue) !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(137, 207, 240, 0.5) !important;
}
.st-btn:active {
  transform: scale(0.96) !important;
}
.st-btn-small {
  padding: 4px 8px !important;
  font-size: 0.8rem !important;
  flex-shrink: 0 !important;
}
.st-btn.gold {
  border-color: var(--encore-gold) !important;
}
.st-btn.gold:hover {
  background: var(--encore-gold) !important;
  color: #000 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}
.st-btn.play-active {
  background: var(--encore-gold) !important;
  color: #000 !important;
  border-color: var(--encore-gold) !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.4) !important;
}

.st-btn-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px !important;
  height: 22px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.05) !important;
  color: #fff !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  font-weight: bold !important;
  opacity: 0.7;
  transition: 0.15s;
  border-radius: 4px;
  flex-shrink: 0;
  font-family: sans-serif;
  font-size: 12px;
}
.st-btn-delete:hover {
  opacity: 1;
  color: #ff5555 !important;
  background: rgba(255, 85, 85, 0.15) !important;
  border-color: rgba(255, 85, 85, 0.5) !important;
}

.st-select,
.st-input {
  min-width: unset !important;
  height: 28px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  color: #fff !important;
  border: 1px solid var(--border-color) !important;
  padding: 0 6px !important;
  border-radius: 4px !important;
  font-family: inherit !important;
  outline: none !important;
  font-size: 0.9rem !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.st-select:focus,
.st-input:focus {
  border-color: var(--encore-blue) !important;
}
.st-tempo-input {
  width: 50px !important;
  text-align: center !important;
  cursor: ns-resize;
  border-color: var(--encore-gold) !important;
  color: var(--encore-gold) !important;
  font-weight: bold;
}
.st-search-input {
  width: 100% !important;
  max-width: none !important;
  font-size: 1.2rem !important;
  padding: 12px 15px !important;
  height: auto !important;
  margin-bottom: 15px !important;
  background: rgba(0, 0, 0, 0.5) !important;
  border: 2px solid var(--encore-blue) !important;
  border-radius: 6px !important;
}

.st-floating-dropdown {
  position: fixed;
  background: var(--bg-panel);
  border: 1px solid var(--border-color);
  border-radius: 6px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  min-width: 150px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  animation: st-fade-in 0.15s ease-out;
}
.st-floating-dropdown-item {
  padding: 10px 15px;
  color: #fff;
  cursor: pointer;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-weight: 600;
  font-size: 0.95rem;
  font-family: "Rajdhani", sans-serif;
  transition: 0.1s;
}
.st-floating-dropdown-item:hover {
  background: var(--encore-blue);
  color: #000 !important;
}
.st-floating-dropdown-item:last-child {
  border-bottom: none;
}

.st-workspace {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}
.st-pane {
  display: flex;
  flex: 1;
  overflow: hidden;
  position: relative;
}
.st-splitter {
  height: 6px;
  background: rgba(137, 207, 240, 0.1);
  cursor: ns-resize;
  z-index: 100;
  flex-shrink: 0;
  transition: background 0.2s;
  border-top: 1px solid var(--border-color);
  border-bottom: 1px solid var(--border-color);
}
.st-splitter:hover,
.st-splitter.active {
  background: var(--encore-blue);
}

.st-sidebar {
  width: 250px;
  background: #0f0f18;
  border-right: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
}
.st-sidebar-header {
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.05);
  font-weight: bold;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.st-right-sidebar {
  width: 250px;
  background: #0f0f18;
  border-left: 2px solid var(--border-color);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  flex-shrink: 0;
  z-index: 20;
}

.st-lyric-preview {
  padding: 15px;
  font-size: 1.1rem;
  line-height: 1.8;
  color: #fff;
  font-family: "Radio Canada", sans-serif;
  white-space: pre-wrap;
}
.st-lyric-preview-syl {
  cursor: pointer;
  padding: 2px 0;
  transition:
    color 0.15s,
    background 0.15s;
  border-radius: 3px;
}
.st-lyric-preview-syl:hover {
  background: rgba(137, 207, 240, 0.3);
  color: var(--encore-gold);
}
.st-lyric-preview-syl.selected {
  background: var(--encore-blue);
  color: #000;
  box-shadow: 0 0 5px var(--encore-blue);
}
.st-lyric-preview-syl.playing {
  background: var(--encore-blue);
  color: #000;
  box-shadow: 0 0 8px var(--encore-blue);
  border-radius: 3px;
  z-index: 5;
  position: relative;
}

.st-list-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  border-left: 4px solid transparent;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.st-list-item:hover {
  background: rgba(255, 255, 255, 0.05);
}
.st-list-item.active {
  background: rgba(137, 207, 240, 0.15);
  border-left: 4px solid var(--encore-blue);
}
.st-list-item.dragging {
  opacity: 0.5;
  border: 1px dashed var(--encore-blue);
}
.st-list-item.drag-over {
  border-top: 2px solid var(--encore-gold);
  background: rgba(255, 215, 0, 0.1);
}

.st-list-top {
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  pointer-events: none;
}
.st-list-left {
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 0;
  pointer-events: auto;
}
.st-list-name {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: bold;
  outline: none;
  padding: 2px 4px;
  border-radius: 3px;
  border: 1px solid transparent;
  user-select: text;
  cursor: text;
  transition: background 0.2s;
}
.st-list-name[contenteditable="true"] {
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--encore-blue);
}
.st-right-grp {
  display: flex;
  gap: 5px;
  align-items: center;
  flex-shrink: 0;
  pointer-events: auto;
}
.st-color-swatch {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 10px;
  flex-shrink: 0;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.st-vol-slider {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  outline: none;
  margin: 0;
  pointer-events: auto;
  transition: background 0.2s;
}
.st-vol-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--encore-blue);
  cursor: pointer;
  border: 2px solid #000;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  transition:
    background 0.15s,
    transform 0.15s;
}
.st-vol-slider:hover::-webkit-slider-thumb {
  background: var(--encore-gold);
  transform: scale(1.1);
}

.st-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  backdrop-filter: blur(5px);
  animation: st-fade-in 0.2s ease-out;
}
.st-modal-content {
  background: var(--bg-dark);
  border: 1px solid var(--encore-blue);
  border-radius: 8px;
  padding: 25px;
  width: 600px;
  max-width: 90vw;
  height: 70vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  animation: st-pop-in 0.2s;
}
.st-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.st-modal-header h2 {
  margin: 0;
  font-family: "Rajdhani", sans-serif;
  color: var(--encore-blue);
  font-size: 1.8rem;
}
.st-inst-list {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  gap: 6px;
  padding-right: 5px;
}
.st-inst-item {
  padding: 10px;
  background: rgba(255, 255, 255, 0.05);
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.9rem;
  border: 1px solid transparent;
  font-weight: 500;
  transition:
    background 0.1s,
    border-color 0.1s;
}
.st-inst-item:hover {
  background: rgba(137, 207, 240, 0.2);
  border-color: var(--encore-blue);
}

.st-grid-area {
  flex: 1;
  overflow: auto;
  background: #0c0c11;
  position: relative;
  display: flex;
}
.st-grid-scroll {
  flex: 1;
  position: relative;
  overflow: auto;
}
.st-grid {
  position: relative;
  min-height: 100%;
  transform-origin: top left;
}
.st-grid-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.st-col-line {
  position: absolute;
  top: 0;
  bottom: 0;
  border-right: 1px solid rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.st-col-line.beat {
  border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.st-col-line.bar {
  border-right: 2px solid rgba(255, 255, 255, 0.4);
}

.st-timeline {
  position: sticky;
  top: 0;
  height: 24px;
  background: rgba(137, 207, 240, 0.15);
  border-bottom: 1px solid var(--encore-blue);
  z-index: 90;
  pointer-events: auto;
  cursor: ew-resize;
  backdrop-filter: blur(2px);
}
.st-timeline-corner {
  position: sticky;
  top: 0;
  height: 24px;
  background: rgba(137, 207, 240, 0.15);
  border-bottom: 1px solid var(--encore-blue);
  z-index: 95;
  backdrop-filter: blur(2px);
}

.st-track-row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
}
.st-pattern-block {
  position: absolute;
  height: 38px;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  cursor: move;
  overflow: hidden;
  display: block;
  padding: 2px 4px;
  font-weight: bold;
  font-size: 11px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  z-index: 5;
  transition:
    filter 0.15s,
    outline 0.15s;
}
.st-pattern-name {
  position: relative;
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.st-pattern-notes {
  position: absolute;
  inset: 0;
  top: 14px;
  pointer-events: none;
  opacity: 0.6;
}
.st-pattern-note {
  position: absolute;
  background: #000;
  border-radius: 1px;
  box-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
}

.st-pattern-block.selected {
  outline: 2px solid var(--encore-gold);
  outline-offset: -2px;
  filter: brightness(1.3);
  z-index: 10;
}
.st-pattern-block:hover {
  filter: brightness(1.2);
}

.st-keys {
  width: 80px;
  background: #1a1a24;
  flex-shrink: 0;
  overflow-y: hidden;
  position: relative;
  border-right: 2px solid #000;
  z-index: 10;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.5);
}
.st-key {
  position: absolute;
  height: 24px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 5px;
  font-size: 11px;
  font-weight: bold;
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition:
    background 0.1s,
    color 0.1s;
}
.st-key:hover {
  filter: brightness(1.2);
}
.st-key.white {
  background: #e0e0e0;
  color: #333;
  z-index: 1;
}
.st-key.white.is-c {
  background: #b0b0b0;
  color: #000;
}
.st-key.black {
  background: transparent;
  color: #aaa;
  z-index: 2;
  border: none;
}
.st-key.black::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 60%;
  background: #222;
  border: 1px solid #000;
  border-left: none;
  border-radius: 0 3px 3px 0;
  z-index: -1;
}
.st-row {
  position: absolute;
  left: 0;
  right: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.st-row.in-scale {
  background: rgba(255, 255, 255, 0.05);
}
.st-row.root {
  background: rgba(137, 207, 240, 0.15);
}

.st-note {
  position: absolute;
  border: 1px solid #fff;
  border-radius: 3px;
  cursor: move;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
  z-index: 5;
  transition:
    filter 0.15s,
    border-color 0.15s,
    box-shadow 0.15s;
}
.st-note-resize {
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  cursor: ew-resize;
  z-index: 6;
}
.st-note.selected {
  border: 2px solid var(--encore-gold) !important;
  box-shadow: 0 0 10px var(--encore-gold);
  z-index: 10;
  filter: brightness(1.2);
}
.st-note-lyric {
  position: absolute;
  top: -14px;
  left: 0;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-shadow:
    1px 1px 2px #000,
    -1px -1px 2px #000;
  pointer-events: none;
  white-space: pre;
  z-index: 20;
  background: rgba(0, 0, 0, 0.4);
  padding: 0 2px;
  border-radius: 2px;
}
.st-selection-box {
  position: absolute;
  background: rgba(137, 207, 240, 0.3);
  border: 1px solid var(--encore-blue);
  z-index: 50;
  pointer-events: none;
  transition: opacity 0.1s;
}

.st-drum-seq-container {
  padding: 15px;
  overflow-x: auto;
  flex: 1;
  background: #0c0c11;
  min-height: 100%;
}
.st-step-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  width: max-content;
}
.st-step-label {
  width: 120px;
  position: sticky;
  left: 0;
  background: #14141e;
  padding: 10px;
  color: #fff;
  text-align: right;
  margin-right: 20px;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 5;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.st-step-label:hover {
  background: rgba(137, 207, 240, 0.1);
  border-color: var(--encore-blue);
}
.st-step-btn {
  width: 40px;
  height: 40px;
  background: #1a1a24;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  cursor: pointer;
  margin-right: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
  transition:
    background 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
}
.st-step-btn:hover {
  background: #2a2a35;
}
.st-step-btn:active {
  transform: scale(0.95);
}
.st-step-btn.beat {
  background: #222230;
}
.st-step-btn.active {
  background: var(--encore-orange);
  border-color: #fff;
  box-shadow: 0 0 10px rgba(255, 165, 63, 0.5);
  transform: scale(1.05);
  z-index: 2;
}
.st-step-btn.playing::after {
  content: "";
  position: absolute;
  inset: -3px;
  border: 2px solid var(--encore-gold);
  border-radius: 6px;
  pointer-events: none;
}

.st-playhead {
  position: absolute;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--encore-gold);
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 215, 0, 0.5);
}
.st-playhead::before {
  content: "";
  position: sticky;
  top: 0;
  display: block;
  width: 14px;
  height: 14px;
  background: var(--encore-gold);
  transform: translateX(-6px);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 50% 100%, 0 60%);
  z-index: 101;
}

.st-lyric-popup {
  position: absolute;
  background: var(--bg-panel);
  border: 1px solid var(--encore-blue);
  padding: 8px 12px;
  border-radius: 6px;
  z-index: 1000;
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.8);
  animation: st-pop-in 0.1s ease-out;
}
.st-custom-check {
  width: 16px;
  height: 16px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 3px;
  cursor: pointer;
  position: relative;
  transition: 0.15s;
  flex-shrink: 0;
}
.st-custom-check.checked {
  background: var(--encore-blue);
  border-color: var(--encore-blue);
  box-shadow: 0 0 5px var(--encore-blue);
}
.st-custom-check.checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #000;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.st-control-sidebar {
  width: 80px;
  flex-shrink: 0;
  background: #1a1a24;
  border-right: 2px solid #000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 5px;
}
.st-control-dropdown {
  width: 70px;
  font-size: 11px;
  padding: 2px 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  border: 1px solid var(--border-color);
  border-radius: 4px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s;
}
.st-control-dropdown:focus {
  border-color: var(--encore-blue);
}
.st-lollipop {
  position: absolute;
  bottom: 0;
  width: 6px;
  transform: translateX(-3px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  cursor: ns-resize;
  z-index: 5;
}
.st-lollipop-stem {
  width: 2px;
  background: var(--encore-blue);
  flex-shrink: 0;
  box-shadow: 0 0 2px #000;
}
.st-lollipop-head {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--encore-blue);
  flex-shrink: 0;
  margin-bottom: -1px;
  box-shadow: 0 0 3px #000;
  transition: filter 0.15s;
}