*, :before, :after {
  box-sizing: border-box;
}

:root {
  --dark-fore-color: white;
  --dark-back-color: black;
  --dark-link-color: #c193ff;
  --dark-button-color: #444;
  --dark-accent-color: #ae60e8;
  --dark-subtle-fore-color: #a0a0a0;
  --dark-success-color: #00bc8c;
  --dark-info-color: #3498db;
  --dark-warning-color: #f39c12;
  --dark-danger-color: #e74c3c;
  --dark-body-back-color: #1e1e1e;
  --dark-body-fore-color: #dedede;
  --light-fore-color: black;
  --light-back-color: white;
  --light-link-color: #8f00c9;
  --light-button-color: #444;
  --light-accent-color: #8f00c9;
  --light-subtle-fore-color: #606060;
  --light-success-color: #18bc9c;
  --light-info-color: #3498db;
  --light-warning-color: #f39c12;
  --light-danger-color: #e74c3c;
  --light-body-back-color: white;
  --light-body-fore-color: black;
  --dark-fore-color-l: 100;
  --dark-back-color-l: 0;
  --light-fore-color-l: 0;
  --light-back-color-l: 100;
  --font-family: sans-serif;
  --color-scheme: dark;
  --contrast-color: white;
  --class-text-color: inherit;
  --class-back-color: var(--button-color);
  --class-fore-color: var(--contrast-color);
  --class-accent-color: var(--accent-color);
  --focus-color: rgb(from var(--fore-color) r g b / 30%);
  --code-color: rgb(from var(--body-fore-color) r g b / 70%);
  --gridline-color: rgb(from var(--body-fore-color) r g b / 20%);
  --disabled-color: color-mix(in srgb, gray, var(--back-color) 30%);
  --input-back-color: color-mix(in srgb, gray, var(--back-color) 85%);
  color-scheme: var(--color-scheme);
  color: var(--body-fore-color);
  font-family: var(--font-family);
  font-size: 13.5pt;
  line-height: 1.5;
}

:root.dark {
  --color-scheme: dark;
  --fore-color-l: 100;
  --back-color-l: 0;
  --fore-color: var(--dark-fore-color);
  --back-color: var(--dark-back-color);
  --link-color: var(--dark-link-color);
  --button-color: var(--dark-button-color);
  --accent-color: var(--dark-accent-color);
  --subtle-fore-color: var(--dark-subtle-fore-color);
  --info-color: var(--dark-info-color);
  --warning-color: var(--dark-warning-color);
  --danger-color: var(--dark-danger-color);
  --success-color: var(--dark-success-color);
  --body-back-color: var(--dark-body-back-color);
  --body-fore-color: var(--dark-body-fore-color);
}

:root.light {
  --color-scheme: light;
  --fore-color-l: 0;
  --back-color-l: 100;
  --fore-color: var(--light-fore-color);
  --back-color: var(--light-back-color);
  --link-color: var(--light-link-color);
  --button-color: var(--light-button-color);
  --accent-color: var(--light-accent-color);
  --subtle-fore-color: var(--light-subtle-fore-color);
  --info-color: var(--light-info-color);
  --warning-color: var(--light-warning-color);
  --danger-color: var(--light-danger-color);
  --success-color: var(--light-success-color);
  --body-back-color: var(--light-body-back-color);
  --body-fore-color: var(--light-body-fore-color);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-scheme: dark;
    --fore-color-l: 100;
    --back-color-l: 0;
    --fore-color: var(--dark-fore-color);
    --back-color: var(--dark-back-color);
    --link-color: var(--dark-link-color);
    --button-color: var(--dark-button-color);
    --accent-color: var(--dark-accent-color);
    --subtle-fore-color: var(--dark-subtle-fore-color);
    --info-color: var(--dark-info-color);
    --warning-color: var(--dark-warning-color);
    --danger-color: var(--dark-danger-color);
    --success-color: var(--dark-success-color);
    --body-back-color: var(--dark-body-back-color);
    --body-fore-color: var(--dark-body-fore-color);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-scheme: light;
    --fore-color-l: 0;
    --back-color-l: 100;
    --fore-color: var(--light-fore-color);
    --back-color: var(--light-back-color);
    --link-color: var(--light-link-color);
    --button-color: var(--light-button-color);
    --accent-color: var(--light-accent-color);
    --subtle-fore-color: var(--light-subtle-fore-color);
    --info-color: var(--dark-info-color);
    --warning-color: var(--dark-warning-color);
    --danger-color: var(--dark-danger-color);
    --success-color: var(--light-success-color);
    --body-back-color: var(--light-body-back-color);
    --body-fore-color: var(--light-body-fore-color);
  }
}

body {
  background-color: var(--body-back-color);
}

svg {
  fill: currentColor;
}

.accent {
  --class-text-color: var(--accent-color);
  --class-back-color: var(--accent-color);
  --class-fore-color: var(--contrast-color);
  --class-accent-color: var(--accent-color);
  --focus-color: rgb(from var(--accent-color) r g b / 50%);
}

.success {
  --class-text-color: var(--success-color);
  --class-back-color: var(--success-color);
  --class-fore-color: var(--contrast-color);
  --class-accent-color: var(--success-color);
  --focus-color: rgb(from var(--success-color) r g b / 50%);
}

.info {
  --class-text-color: var(--info-color);
  --class-back-color: var(--info-color);
  --class-fore-color: var(--contrast-color);
  --class-accent-color: var(--info-color);
  --focus-color: rgb(from var(--info-color) r g b / 50%);
}

.warning {
  --class-text-color: var(--warning-color);
  --class-back-color: var(--warning-color);
  --class-fore-color: var(--contrast-color);
  --class-accent-color: var(--warning-color);
  --focus-color: rgb(from var(--warning-color) r g b / 50%);
}

.danger {
  --class-text-color: var(--danger-color);
  --class-back-color: var(--danger-color);
  --class-fore-color: var(--contrast-color);
  --class-accent-color: var(--danger-color);
  --focus-color: rgb(from var(--danger-color) r g b / 50%);
}

p, span, h1, h2, h3, h4, h5, h6 {
  color: var(--class-text-color);
}

blockquote {
  border-left: .2rem solid var(--gridline-color);
  margin-left: .2rem;
  padding-left: .4rem;
}

code {
  color: var(--code-color);
}

pre code {
  font-size: .8em;
}

a {
  & code {
    color: unset;
  }
}

h1 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 2.15rem;
}

h2 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 1.35rem;
}

h3 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 1.2rem;
}

h4 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 1.1rem;
}

h5 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 1.05rem;
}

h6 {
  margin-top: 1.5rem;
  margin-bottom: .5rem;
  font-size: 1rem;
}

.muted {
  opacity: .5;
}

.left {
  text-align: left;
}

.center {
  text-align: center;
}

.right {
  text-align: right;
}

.hidden {
  visibility: hidden;
}

.vcenter {
  align-items: center;
  display: flex;
}

a {
  --link-class-text-color: var(--class-text-color, var(--link-color));
  color: var(--link-class-text-color);
  text-decoration: none;
  transition: color .2s;

  &:hover {
    color: rgb(from var(--link-class-text-color) r g b / 70%);
  }
}

nav {
  --link-color: var(--body-fore-color);

  & ul {
    padding: 0;

    & li {
      margin: 0;
      padding: 0;
      list-style: none;
    }
  }
}

input, button {
  font-family: var(--font-family);
  font-size: 1rem;
}

.button {
  display: inline-block;
}

button, .button, input[type="button"], input[type="file"]::file-selector-button {
  cursor: pointer;
  background-color: var(--class-back-color);
  color: var(--class-fore-color);
  white-space: nowrap;
  border-style: solid;
  border-width: 0;
  border-radius: .3rem;
  padding: .475rem .65rem;
  font-size: 1rem;
  line-height: 1rem;
  text-decoration: none;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, opacity .15s ease-in-out, box-shadow .15s ease-in-out;

  &:hover:not(:disabled) {
    background-color: rgb(from var(--class-back-color) r g b / 80%);
    color: var(--class-fore-color);
  }

  &:active:not(:disabled) {
    background-color: rgb(from var(--class-back-color) r g b / 60%);
  }

  &:focus-visible {
    box-shadow: 0 0 0 .2rem var(--focus-color);
    outline: none;
  }

  &:disabled {
    opacity: .5;
  }

  &.subtle {
    color: var(--class-text-color);
    background: none;

    &:hover {
      color: var(--class-fore-color);
    }

    &.muted {
      color: var(--class-text-color);
      opacity: .5;

      &:hover {
        opacity: 1;
        background: none;
      }
    }
  }

  &.dropdown {
    &:after {
      content: "";
      vertical-align: .1em;
      border: .3em solid #0000;
      border-top-color: currentColor;
      border-bottom: 0;
      margin-left: .25em;
      display: inline-block;
    }
  }

  &.dropdown.standalone {
    &:after {
      margin-left: 0;
      transform: translateX(-.15rem);
    }
  }

  &.small {
    padding: .24rem .56rem;
    font-size: .75rem;
  }

  &.large {
    padding: .7rem .9rem;
    font-size: 1.2rem;
  }
}

input.button[type="radio"], input.button[type="checkbox"] {
  clip: rect(0, 0, 0, 0);
  pointer-events: none;
  position: absolute;

  & + label {
    color: var(--fore-color);
    border-width: 1px;
    border-color: var(--class-back-color);
    white-space: nowrap;
    cursor: pointer;
    background-color: #0000;
    border-style: solid;
    border-radius: .3rem;
    margin-right: 0;
    padding: calc(.475rem - 1px) calc(.65rem - 1px);
    font-size: 1rem;
    line-height: 1rem;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;
    display: inline-block;

    &:hover {
      background-color: rgb(from var(--class-back-color) r g b / 30%);
    }
  }

  & + label.subtle {
    border: none;
    padding: .475rem .65rem;

    &:hover {
      background-color: rgb(from var(--class-fore-color) r g b / 10%);
    }
  }

  &:checked {
    & + label {
      background-color: var(--class-back-color);
      color: var(--class-fore-color);

      &:hover {
        background-color: rgb(from var(--class-back-color) r g b / 80%);
      }
    }
  }

  &:active {
    & + label {
      &:hover {
        background-color: rgb(from var(--class-back-color) r g b / 20%);
      }
    }
  }

  &:active:checked {
    & + label {
      &:hover {
        background-color: rgb(from var(--class-back-color) r g b / 40%);
      }
    }
  }

  &:focus-visible {
    & + label {
      box-shadow: 0 0 0 .2rem var(--focus-color);
      outline: none;
    }
  }
}

input[type="file"]::file-selector-button:hover {
  background-color: rgb(from var(--class-back-color) r g b / 80%);
}

input[type="file"]::file-selector-button:active {
  background-color: rgb(from var(--class-back-color) r g b / 60%);
}

input[type="checkbox"], input[type="radio"] {
  appearance: none;
  cursor: pointer;
  border: 1px solid var(--fore-color);
  background: var(--input-back-color);
  outline: none;
  width: 1rem;
  height: 1rem;
  margin: 0 .4rem 0 0;
  transition: background-color .15s ease-in-out, border-color .15s ease-in-out;
  display: inline-block;
  position: relative;
  transform: translateY(.1rem);

  &:checked {
    background-color: var(--class-accent-color);
    border-color: var(--class-accent-color);
  }

  &:focus-visible {
    box-shadow: 0 0 0 .2rem var(--focus-color);
    outline: none;
  }

  &:disabled {
    background-color: var(--disabled-color);
    border-color: var(--disabled-color);
  }

  &:disabled + label {
    color: var(--disabled-color);
  }
}

label:has(input) {
  margin-right: .75rem;
}

label:has(input:disabled) {
  color: var(--disabled-color);
}

input[type="checkbox"] {
  border-radius: 3px;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  }
}

input[type="radio"] {
  border-radius: 10px;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
  }
}

input.switch[type="checkbox"], input.theme-switch[type="checkbox"] {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23888'/%3e%3c/svg%3e");
  background-position: 0;
  background-repeat: no-repeat;
  border-radius: 10px;
  width: 30px;
  transition: background-position .15s ease-in-out, background-color .15s ease-in-out;

  &:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
    background-position: 100%;
  }

  &:disabled {
    background-image: none;
  }
}

input.theme-switch[type="checkbox"] {
  border-color: var(--gridline-color);
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg height='18px' viewBox='0 -960 960 960' width='24px' fill='%23e8eaed' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs8' /%3E%3Ccircle style='fill:%23d0d0d0;stroke:%23222222;stroke-width:0;stop-color:%23000000;fill-opacity:1' id='path847' cx='480' cy='-479.99997' r='480' /%3E%3Cpath d='m 480,-370.90909 q 45.45455,0 77.27273,-31.81818 31.81818,-31.81818 31.81818,-77.27273 0,-45.45455 -31.81818,-77.27273 Q 525.45455,-589.0909 480,-589.0909 q -45.45455,0 -77.27273,31.81817 -31.81817,31.81818 -31.81817,77.27273 0,45.45455 31.81817,77.27273 31.81818,31.81818 77.27273,31.81818 z m 0,72.72727 q -75.45454,0 -128.63636,-53.18182 Q 298.18182,-404.54546 298.18182,-480 q 0,-75.45454 53.18182,-128.63636 53.18182,-53.18182 128.63636,-53.18182 75.45454,0 128.63636,53.18182 53.18182,53.18182 53.18182,128.63636 0,75.45454 -53.18182,128.63636 Q 555.45454,-298.18182 480,-298.18182 Z M 225.45455,-443.63636 H 80.000002 v -72.72728 H 225.45455 Z m 654.54545,0 H 734.54546 v -72.72728 H 880 Z M 443.63636,-734.54545 V -880 h 72.72728 v 145.45455 z m 0,654.54545 v -145.45454 h 72.72728 V -80 Z m -167.27272,-554.54546 -91.81818,-88.18181 51.81818,-53.63637 87.27273,90.9091 z m 447.27273,450.9091 -88.18183,-91.81818 48.18182,-50 91.81818,88.18182 z m -89.09091,-500 88.18182,-91.81818 53.63636,51.81818 -90.90909,87.27273 z m -450.9091,447.27273 91.81819,-88.18183 49.99999,48.18182 -88.18181,91.81818 z M 480,-480 Z' id='path2' style='fill:%23000000;stroke-width:0.909091' /%3E%3C/svg%3E");
  border-radius: 12px;
  width: 40px;
  height: 24px;
  margin: 0;
  padding: 0;

  &:checked {
    background-color: #606060;
    background-image: url("data:image/svg+xml,%3Csvg height='18px' viewBox='0 -960 960 960' width='24px' fill='%23e8eaed' id='svg4' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3E%3Cdefs id='defs8' /%3E%3Ccircle style='fill:%23000000;stroke:%23222222;stroke-width:0;stop-color:%23000000' id='path847' cx='480' cy='-480' r='480' /%3E%3Cpath d='M 480,-160 Q 346.66667,-160 253.33333,-253.33333 160,-346.66667 160,-480 160,-613.33333 253.33333,-706.66667 346.66667,-800 480,-800 q 12.44444,0 24.44444,0.88889 12,0.88889 23.55557,2.66666 -36.44446,25.77778 -58.22223,67.11112 Q 448,-688.00001 448,-640 q 0,79.99999 56,136 56.00001,56 136,56 48.88889,0 89.77778,-21.77778 40.88889,-21.77777 66.66667,-58.22223 1.77777,11.55557 2.66666,23.55557 Q 800,-492.44444 800,-480 800,-346.66667 706.66667,-253.33333 613.33333,-160 480,-160 Z m 0,-71.11111 q 78.22222,0 140.44444,-43.11111 62.22222,-43.11111 90.66667,-112.44445 -17.77777,4.44445 -35.55556,7.11111 -17.77777,2.66667 -35.55555,2.66667 -109.33333,0 -186.22222,-76.88889 Q 376.88889,-530.66667 376.88889,-640 q 0,-17.77778 2.66667,-35.55555 2.66666,-17.77779 7.11111,-35.55556 -69.33334,28.44445 -112.44445,90.66667 -43.11111,62.22222 -43.11111,140.44444 0,103.11111 72.88888,176.00001 72.8889,72.88888 176.00001,72.88888 z m -8.88889,-240 z' id='path2' style='stroke-width:0.888889' /%3E%3C/svg%3E");
  }
}

hr {
  border-color: var(--gridline-color);
}

.spinner {
  border-width: 2px;
  border-color: var(--class-text-color);
  border-style: solid;
  border-top-color: #0000;
  border-radius: 50%;
  width: 1.5rem;
  height: 1.5rem;
  animation: .75s linear infinite spinner;
  display: inline-block;

  &.xsmall {
    border-width: 2px;
    width: .75rem;
    height: .75rem;
  }

  &.small {
    border-width: 2px;
    width: 1rem;
    height: 1rem;
  }

  &.large {
    border-width: 3.5px;
    width: 2.5rem;
    height: 2.5rem;
  }

  &.xlarge {
    border-width: 5.3px;
    width: 4rem;
    height: 4rem;
  }
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}

span.pill {
  background-color: var(--class-back-color);
  color: var(--class-fore-color);
  border-radius: 1rem;
  padding: .15rem .65rem;
  font-weight: 700;
  display: inline-block;

  &.small {
    font-size: .75em;
  }

  &.large {
    font-size: 1.25em;
  }
}

input[type="date"], input[type="datedatetime-local"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input[type="file"], textarea, select {
  background-color: var(--input-back-color);
  color: var(--body-fore-color);
  border-style: solid;
  border-width: 1px;
  border-color: var(--class-back-color);
  font-family: var(--font-family);
  border-radius: 5px;
  outline: none;
  padding: .475rem .65rem;
  font-size: 1rem;
  line-height: 1rem;
  transition: color .15s ease-in-out, background-color .15s ease-in-out, box-shadow .15s ease-in-out;

  &::selection {
    background-color: var(--accent-color);
    color: var(--class-fore-color);
  }

  &:focus-visible:not(:disabled) {
    box-shadow: 0 0 0 .2rem var(--focus-color);
    outline: none;
  }

  &::placeholder {
    color: rgb(from var(--fore-color) r g b / 33%);
  }
}

select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16px' height='16px' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.1018 8C5.02785 8 4.45387 9.2649 5.16108 10.0731L10.6829 16.3838C11.3801 17.1806 12.6197 17.1806 13.3169 16.3838L18.8388 10.0731C19.5459 9.2649 18.972 8 17.898 8H6.1018Z' fill='%23808080'/%3E%3C/svg%3E");
  background-position: right .5rem center;
  background-repeat: no-repeat;
  border-radius: 2px;
  padding: .25rem 2rem .25rem .75rem;
}

input[type="file"] {
  padding: .3rem;
}

input[type="file"]::file-selector-button {
  padding: .275rem .45rem;
}

.control-group {
  align-items: baseline;
  line-height: 1rem;
  display: inline-flex;
  position: relative;

  & span {
    z-index: -1;
    background-color: var(--class-back-color);
    color: var(--class-fore-color);
    border-radius: 5px;
    padding: calc(.475rem + 1px) calc(.65rem + 1px);
  }

  & :not(:first-child), & label:not(:first-of-type), & input.button[type="radio"] + label:not(:first-of-type), & input.button[type="checkbox"] + label:not(:first-of-type) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  & :not(:last-child), & label:not(:last-of-type), & input.button[type="radio"] + label:not(:last-of-type), & input.button[type="checkbox"] + label:not(:last-of-type) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  & input[type="date"], & input[type="datedatetime-local"], & input[type="email"], & input[type="month"], & input[type="number"], & input[type="password"], & input[type="search"], & input[type="tel"], & input[type="text"], & input[type="time"], & input[type="url"], & input[type="week"] {
    margin: 0;
  }
}

dialog {
  all: revert;
  border-color: var(--accent-color);
  border-radius: 10px;
  padding: 0;

  & form {
    all: revert;
    margin: 0;
  }

  & header {
    all: revert;
    border-bottom: 1px solid var(--gridline-color);
    align-items: center;
    display: flex;

    & button.close {
      border-radius: 50%;
      width: 2rem;
      height: 2rem;
      margin: .2rem;
      padding: .2rem;

      &:before {
        content: "✖";
      }
    }

    & .title {
      font-weight: bold;
    }
  }

  & main {
    all: revert;
    margin: 1rem;
  }

  & footer {
    all: revert;
    border-top: 1px solid var(--gridline-color);
    justify-content: end;
    gap: 10px;
    padding: 10px;
    display: flex;
  }

  &::backdrop {
    all: revert;
    background-color: #000000bf;
  }
}

.grid {
  grid-row-gap: .5rem;
  grid-column-gap: .5rem;
  grid-template-columns: repeat(12, 1fr);
  align-items: center;
  display: grid;

  & .cell-right {
    text-align: right;
  }

  & .cell-left {
    text-align: left;
  }

  & .cell-center {
    text-align: center;
  }

  & .cell-1-1 {
    grid-column: 1 / -1;
  }

  & .cell-1-2 {
    grid-column: 1 / 7;
  }

  & .cell-2-2 {
    grid-column: 7 / -1;
  }

  & .cell-1-3 {
    grid-column: 1 / 5;
  }

  & .cell-2-3 {
    grid-column: 5 / 9;
  }

  & .cell-3-3 {
    grid-column: 9 / -1;
  }

  & .cell-12-3 {
    grid-column: 1 / 9;
  }

  & .cell-23-3 {
    grid-column: 5 / -1;
  }

  & .cell-1-4 {
    grid-column: 1 / 4;
  }

  & .cell-2-4 {
    grid-column: 4 / 7;
  }

  & .cell-3-4 {
    grid-column: 7 / 10;
  }

  & .cell-4-4 {
    grid-column: 10 / -1;
  }

  & .cell-13-4 {
    grid-column: 1 / 10;
  }

  & .cell-23-4 {
    grid-column: 4 / 10;
  }

  & .cell-24-4 {
    grid-column: 4 / -1;
  }

  & .cell-1-6 {
    grid-column: 1 / 3;
  }

  & .cell-2-6 {
    grid-column: 3 / 5;
  }

  & .cell-3-6 {
    grid-column: 5 / 7;
  }

  & .cell-4-6 {
    grid-column: 7 / 9;
  }

  & .cell-5-6 {
    grid-column: 9 / 11;
  }

  & .cell-6-6 {
    grid-column: 11 / -1;
  }

  & .cell-23-6 {
    grid-column: 3 / 7;
  }

  & .cell-45-6 {
    grid-column: 7 / 11;
  }
}

.cell-x {
  grid-row-gap: .5rem;
  grid-column-gap: .5rem;
  grid-template-columns: 1fr;
  align-items: center;
  display: grid;
}