:root {
  --fg-color: black;
  --bg-color: white;
  --header-color: #dddddd;
  --selected-color: #aaaaaa;
  --error-color: red;
  --disabled-color: #909090;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  font-variant-ligatures: none;
  color: inherit;
  background: inherit;
  border-color: inherit;
  border-radius: 0;
  line-height: inherit;
  touch-action: manipulation;
  appearance: none;
  /* Prevents scrolling from triggering pull-down refresh on mobile */
  overscroll-behavior: none;
}

*:focus {
  outline: none;
}

html,
body {
  font-family: sans-serif;
  color: var(--fg-color);
  accent-color: var(--fg-color);
  caret-color: var(--fg-color);
  background: var(--bg-color);
}

body {
  padding: 0.5em;
  /* Fall back on vh units if svh doesn't work (i.e., not on mobile). */
  height: 100vh;
  min-height: 100vh;
  max-height: 100vh;
  /* Use svh instead of dvh so it doesn't reflow when dynamic parts move. */
  height: 100svh;
  min-height: 100svh;
  max-height: 100svh;
}

button {
  user-select: none;
  -webkit-user-select: none;
}

ul {
  margin-left: 1em;
}

input[type="checkbox"] {
  appearance: auto;
}

textarea,
pre {
  overscroll-behavior: auto;
}

  label.svelte-1jqm2xs {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 1ch;
  }

  textarea.svelte-1jqm2xs {
    flex-grow: 1;
    font-family: monospace, monospace;
    resize: none;
    border: 1px solid var(--fg-color);
    box-shadow: 3px 3px 0 0 var(--fg-color);
    padding: 0.2em 0.5em;
    /* Space for the shadow so it doesn't get cut off */
    margin-right: 3px;
    margin-bottom: 3px;
  }

  textarea.svelte-1jqm2xs:focus {
    box-shadow: 2px 2px 0 0 var(--fg-color);
    outline: 1px solid var(--fg-color);
  }

  textarea.svelte-1jqm2xs:disabled {
    cursor: not-allowed;
    --fg-color: var(--disabled-color);
    color: var(--fg-color);
  }

  /* No scrollbar for text area */
  textarea.svelte-1jqm2xs {
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  textarea.svelte-1jqm2xs::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  button.svelte-1klcfz0 {
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    border: 1px solid var(--fg-color);
    box-shadow: var(--shadow, 3px) var(--shadow, 3px) 0 0 var(--fg-color);
    padding: 0.1em 0.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: max-content;
    /* Space for the shadow so it doesn't get cut off */
    margin-right: var(--shadow, 3px);
    margin-bottom: var(--shadow, 3px);
  }

  button.svelte-1klcfz0:hover {
    outline: 1px solid var(--fg-color);
  }

  button.svelte-1klcfz0:active {
    box-shadow: calc(var(--shadow, 3px) * 2 / 3)
      calc(var(--shadow, 3px) * 2 / 3) 0 0 var(--fg-color);
  }

  button.svelte-1klcfz0:disabled {
    cursor: not-allowed;
    --fg-color: var(--disabled-color);
    color: var(--fg-color);
    outline: none;
  }

  button.svelte-1klcfz0:active:disabled {
    box-shadow: var(--shadow, 3px) var(--shadow, 3px) 0 0 var(--fg-color);
  }

  .square.svelte-1klcfz0 {
    aspect-ratio: 1 / 1;
  }

  .container.svelte-1wnpimk {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: stretch;
    flex-grow: 1;
    overflow: hidden;
  }

  .numbers.svelte-1wnpimk {
    font-family: monospace, monospace;
    padding: calc(0.25em + 1px);
    text-align: right;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
  }

  textarea.svelte-1wnpimk {
    resize: none;
    border: 1px solid var(--fg-color);
    padding: 0.25em;
    font-family: monospace, monospace;
    white-space: pre;
    overflow: auto;
    flex-grow: 1;
  }

  details.svelte-b7z8mu {
    position: relative;
  }

  details[open].svelte-b7z8mu {
    margin-left: 0.25em;
    padding-left: 0.5em;
  }

  details.svelte-b7z8mu > div:where(.svelte-b7z8mu) {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5em;
  }

  summary.svelte-b7z8mu {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
  }

  details[open].svelte-b7z8mu summary:where(.svelte-b7z8mu) {
    margin-bottom: 0.25em;
  }

  /* Cover left details border near summary */
  /*
  details[open] summary::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1.5em;
    position: absolute;
    left: -1px;
    background: var(--bg-color);
    z-index: 1;
  }
  */

  button.svelte-b7z8mu {
    position: absolute;
    top: -0.25em;
    bottom: -0.25em;
    left: -5px;
    width: 10px;
    border: 0;
    cursor: pointer;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: stretch;
    background: none;
  }

  button.svelte-b7z8mu div:where(.svelte-b7z8mu) {
    width: 0;
    border-left: 1px dashed var(--fg-color);
  }

  button.svelte-b7z8mu div:where(.svelte-b7z8mu)::before {
    content: "";
    width: 1em;
    height: 5px;
    border-top: 1px dashed var(--fg-color);
    position: absolute;
    top: 0;
    cursor: pointer;
  }

  button.svelte-b7z8mu div:where(.svelte-b7z8mu)::after {
    content: "";
    width: 1em;
    height: 5px;
    border-bottom: 1px dashed var(--fg-color);
    position: absolute;
    bottom: 0;
    cursor: pointer;
  }

  button.svelte-b7z8mu:hover div:where(.svelte-b7z8mu) {
    border-left: 2px solid var(--fg-color);
  }

  button.svelte-b7z8mu:hover div:where(.svelte-b7z8mu)::before {
    border-top: 2px solid var(--fg-color);
  }

  button.svelte-b7z8mu:hover div:where(.svelte-b7z8mu)::after {
    border-bottom: 2px solid var(--fg-color);
  }

  button.svelte-b7z8mu:active div:where(.svelte-b7z8mu) {
    border-left: 3px solid var(--fg-color);
  }

  button.svelte-b7z8mu:active div:where(.svelte-b7z8mu)::before {
    border-top: 3px solid var(--fg-color);
  }

  button.svelte-b7z8mu:active div:where(.svelte-b7z8mu)::after {
    border-bottom: 3px solid var(--fg-color);
  }

  div.svelte-124sfg {
    flex-grow: 1;
    display: flex;
    position: relative;
    --padding: 0.25em;
  }

  select.svelte-124sfg {
    width: 100%;
    border: 1px solid var(--fg-color);
    padding: var(--padding);
    cursor: pointer;
  }

  div.svelte-124sfg::after {
    content: "▼";
    position: absolute;
    top: var(--padding);
    right: var(--padding);
    transform: scale(0.75);
  }

  div.svelte-c4rrum,
  label.svelte-c4rrum {
    display: flex;
    flex-direction: column;
  }

  pre.svelte-c4rrum,
  textarea.svelte-c4rrum {
    font-family: monospace, monospace;
    border: 1px solid var(--fg-color);
    overflow: auto;
    white-space: pre-line;
    padding: 0.25em;
    min-height: 5em;
    flex-grow: 1;
    flex-shrink: 1;
  }

  textarea.svelte-c4rrum {
    resize: vertical;
    height: 8em;
  }

  input.svelte-c4rrum {
    border: 1px solid var(--fg-color);
    padding: 0.25em;
  }

  hr.svelte-c4rrum {
    border: 0;
    border-top: 1px dashed var(--fg-color);
    margin: 1em 0;
  }

  .row.svelte-c4rrum {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1ch;
  }

  .buttons.svelte-c4rrum {
    flex-shrink: 1;
    flex-grow: 0;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
  }

  label.svelte-1rxiile,
  label.svelte-1rxiile > span:where(.svelte-1rxiile) {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    cursor: pointer;
  }

  label.svelte-1rxiile > span:where(.svelte-1rxiile) {
    flex-direction: row;
    flex-grow: 1;
  }

  input.svelte-1rxiile {
    display: none;
  }

  .boxed.svelte-1rxiile {
    flex-grow: 1;
    border: 1px solid var(--fg-color);
    box-shadow: 3px 3px 0 0 var(--fg-color);
    padding: 0.2em 0.5em;
    /* Space for the shadow so it doesn't get cut off */
    margin-bottom: 3px;
  }

  .filename.svelte-1rxiile {
    margin-left: -4px;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
    white-space: pre;
    user-select: none;
    -webkit-user-select: none;
  }

  .filename.svelte-1rxiile:hover {
    outline: 1px solid var(--fg-color);
  }

  .filename.svelte-1rxiile:active {
    box-shadow: 2px 2px 0 0 var(--fg-color);
  }

  h1.svelte-1tii8uu {
    font-size: x-large;
  }

  img.svelte-1tii8uu {
    border: 1px solid black;
    object-fit: contain;
    image-rendering: pixelated;
    width: 100%;
  }

  label.svelte-1tii8uu,
  label.svelte-1tii8uu span:where(.svelte-1tii8uu) {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
  }

  label.svelte-1tii8uu span:where(.svelte-1tii8uu) {
    flex-direction: row;
    flex-grow: 1;
  }

  input[type="text"].svelte-1tii8uu {
    width: 100%;
    border: 1px solid var(--fg-color);
    box-shadow: 3px 3px 0 0 var(--fg-color);
    padding: 0.2em 0.5em;
    /* Space for the shadow so it doesn't get cut off */
    margin-bottom: 3px;
    margin-right: -1px;
  }

  input[type="text"].svelte-1tii8uu:focus {
    box-shadow: 2px 2px 0 0 var(--fg-color);
    outline: 1px solid var(--fg-color);
  }

  input[type="text"].svelte-1tii8uu:disabled {
    cursor: not-allowed;
    --fg-color: var(--disabled-color);
    color: var(--fg-color);
  }

  input.svelte-tp4yyj {
    padding: 0.1em 0.2em;
    border: 1px solid var(--fg-color);
    box-shadow: 3px 3px 0 0 var(--fg-color);
    /* Space for the shadow so it doesn't get cut off */
    margin-right: 3px;
    margin-bottom: 3px;
  }

  input.svelte-tp4yyj:focus {
    outline: 1px solid var(--fg-color);
    box-shadow: 2px 2px 0 0 var(--fg-color);
  }

  /* Hide arrows */
  input.svelte-tp4yyj::-webkit-outer-spin-button,
  input.svelte-tp4yyj::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
    display: none;
  }

  input[type="number"].svelte-tp4yyj {
    -moz-appearance: textfield;
  }

  input.svelte-tp4yyj:disabled {
    cursor: not-allowed;
    --fg-color: var(--disabled-color);
    color: var(--fg-color);
  }

  .row.svelte-1v8xn86 {
    display: flex;
    align-items: center;
    gap: 1ch;
  }

  td.svelte-kdugxr {
    /* 
      0.5px borders are rounded in many browsers, so instead we do 1px borders
      on two sides. 
    */
    border-bottom: 1px solid var(--fg-color);
    border-right: 1px solid var(--fg-color);
    user-select: none;
    -webkit-user-select: none;
    background: transparent;
  }

  td.svelte-kdugxr,
  td.svelte-kdugxr > :where(.svelte-kdugxr) {
    width: var(--width);
    min-width: var(--width);
    max-width: var(--width);
    height: var(--height);
    min-height: var(--height);
    max-height: var(--height);
  }

  td.svelte-kdugxr .text:where(.svelte-kdugxr),
  td.svelte-kdugxr .element:where(.svelte-kdugxr),
  td.svelte-kdugxr textarea:where(.svelte-kdugxr) {
    padding: 0.1em 0.2em;
  }

  td.svelte-kdugxr .text:where(.svelte-kdugxr) {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
  }

  td.svelte-kdugxr .error:where(.svelte-kdugxr) {
    /* Need to subtract 1 to prevent border overflow */
    width: calc(var(--width) - 1px);
    min-width: calc(var(--width) - 1px);
    max-width: calc(var(--width) - 1px);
    border: 1px solid var(--error-color);
  }

  td.svelte-kdugxr .element:where(.svelte-kdugxr) {
    display: flex;
    overflow: hidden;
  }

  textarea.svelte-kdugxr {
    resize: none;
    border: 0;
    font-family: monospace, monospace;
    line-height: 1;
    white-space: pre;
    /* 
      This is ncessary to prevent the switch to textarea from reflowing the
      table cell (and by extension the row) a few pixels taller.
    */
    display: block;
  }

  /* No scrollbar for text area */
  textarea.svelte-kdugxr {
    overflow: scroll;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  textarea.svelte-kdugxr::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* 
    All these combinations are required to prevent the classes from overwriting
    each other when multiple are set.

    Including the four basic cases, and the case where none are selected at all,
    there should be 2^4 == 16 total cases covered (the size of the power set of
    the four possible classes).
  */
  .left.svelte-kdugxr {
    box-shadow: inset 1px 0 0 0 var(--fg-color);
  }
  .right.svelte-kdugxr {
    box-shadow: inset -1px 0 0 0 var(--fg-color);
  }
  .top.svelte-kdugxr {
    box-shadow: inset 0 1px 0 0 var(--fg-color);
  }
  .bottom.svelte-kdugxr {
    box-shadow: inset 0 -1px 0 0 var(--fg-color);
  }
  .top.left.svelte-kdugxr {
    box-shadow:
      inset 0 1px 0 0 var(--fg-color),
      inset 1px 0 0 0 var(--fg-color);
  }
  .top.right.svelte-kdugxr {
    box-shadow:
      inset 0 1px 0 0 var(--fg-color),
      inset -1px 0 0 0 var(--fg-color);
  }
  .bottom.left.svelte-kdugxr {
    box-shadow:
      inset 0 -1px 0 0 var(--fg-color),
      inset 1px 0 0 0 var(--fg-color);
  }
  .bottom.right.svelte-kdugxr {
    box-shadow:
      inset 0 -1px 0 0 var(--fg-color),
      inset -1px 0 0 0 var(--fg-color);
  }
  .left.right.svelte-kdugxr {
    box-shadow:
      inset 1px 0 0 0 var(--fg-color),
      inset -1px 0 0 0 var(--fg-color);
  }
  .bottom.top.svelte-kdugxr {
    box-shadow:
      inset 0 1px 0 0 var(--fg-color),
      inset 0 -1px 0 0 var(--fg-color);
  }
  .top.left.bottom.svelte-kdugxr {
    box-shadow:
      inset 0 1px 0 0 var(--fg-color),
      inset 1px 0 0 0 var(--fg-color),
      inset 0 -1px 0 0 var(--fg-color);
  }
  .top.right.bottom.svelte-kdugxr {
    box-shadow:
      inset 0 1px 0 0 var(--fg-color),
      inset -1px 0 0 0 var(--fg-color),
      inset 0 -1px 0 0 var(--fg-color);
  }
  .left.bottom.right.svelte-kdugxr {
    box-shadow:
      inset 0 -1px 0 0 var(--fg-color),
      inset 1px 0 0 0 var(--fg-color),
      inset -1px 0 0 0 var(--fg-color);
  }
  .left.top.right.svelte-kdugxr {
    box-shadow:
      inset 0 1px 0 0 var(--fg-color),
      inset 1px 0 0 0 var(--fg-color),
      inset -1px 0 0 0 var(--fg-color);
  }
  .top.left.bottom.right.svelte-kdugxr {
    box-shadow:
      inset -1px -1px 0 0 var(--fg-color),
      inset 1px 1px 0 0 var(--fg-color);
  }

  .container.svelte-j903p3 {
    max-width: max-content;
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(2, auto);
    gap: 0.5em;
  }

  .add.rows.svelte-j903p3 {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .add.columns.svelte-j903p3 {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .numberinput.svelte-j903p3 {
    grid-column: 2;
    grid-row: 2;
    display: flex;
  }

  table.svelte-j903p3 {
    /* 
      Border collapse with box shadows (for showing selected cells) creates a
      small gap between the border and box shadow in Safari. It also makes the
      borders of sticky row and column headers scroll away. As a result we don't
      collapse borders, but set spacing to 0, and only put borders on two sides
      of each cell.
    */
    border-collapse: separate;
    border-spacing: 0;
    box-shadow: 4px 4px 0 0 var(--fg-color);
  }

  th.svelte-j903p3 {
    user-select: none;
    -webkit-user-select: none;
    border-bottom: 1px solid var(--fg-color);
    border-right: 1px solid var(--fg-color);
    background: var(--header-color);
    /* Drag header to highlight instead of scrolling */
    touch-action: none;
  }

  thead.svelte-j903p3 th:where(.svelte-j903p3) {
    border-top: 1px solid var(--fg-color);
  }

  /* This selector includes the first th of the tr in the thead, unlike tbody th. */
  th.svelte-j903p3:first-child {
    border-left: 1px solid var(--fg-color);
  }

  th.svelte-j903p3,
  th.svelte-j903p3 .header:where(.svelte-j903p3) {
    width: var(--width);
    min-width: var(--width);
    max-width: var(--width);
    height: var(--height);
    min-height: var(--height);
    max-height: var(--height);
  }

  th.svelte-j903p3 .header:where(.svelte-j903p3) {
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    background: none;
    display: flex;
    justify-content: center;
    align-items: stretch;
  }

  th.svelte-j903p3 .header:where(.svelte-j903p3) button:where(.svelte-j903p3) {
    padding: 0.1em 0.2em;
    flex-grow: 1;
    background: none;
    border: 0;
  }

  th.selected.svelte-j903p3 .header:where(.svelte-j903p3) button:where(.svelte-j903p3) {
    cursor: grab;
  }

  th.selected.svelte-j903p3 {
    background: var(--selected-color);
  }

  thead.svelte-j903p3 th:where(.svelte-j903p3):first-of-type {
    background: var(--bg-color);
    top: 0;
    left: 0;
    /* 
      The top left header cell should occlude the other row and column headers
      on scroll. 
    */
    z-index: 1;
  }

  thead.svelte-j903p3 th:where(.svelte-j903p3) {
    position: sticky;
    top: 0;
  }

  tbody.svelte-j903p3 th:where(.svelte-j903p3) {
    position: sticky;
    left: 0;
  }

  .handle.svelte-j903p3 {
    display: inline-block;
    background: none;
    border: 0;
    position: absolute;
    z-index: 2;
    /* Prevent mobile browsers from scrolling when trying to resize */
    touch-action: none;
    --handle-width: 10px;
  }

  .left.handle.svelte-j903p3 {
    cursor: ew-resize;
    height: 100%;
    width: var(--handle-width);
    left: calc(-0.5 * var(--handle-width));
    top: 0;
    bottom: 0;
  }

  .top.handle.svelte-j903p3 {
    cursor: ns-resize;
    width: 100%;
    height: var(--handle-width);
    top: calc(-0.5 * var(--handle-width));
    left: 0;
    right: 0;
  }

  .right.handle.svelte-j903p3 {
    cursor: ew-resize;
    height: 100%;
    width: var(--handle-width);
    right: calc(-0.5 * var(--handle-width));
    top: 0;
    bottom: 0;
  }

  .bottom.handle.svelte-j903p3 {
    cursor: ns-resize;
    width: 100%;
    height: var(--handle-width);
    bottom: calc(-0.5 * var(--handle-width));
    left: 0;
    right: 0;
  }

  .menu.svelte-1qo109d {
    background: var(--bg-color);
    border: 1px solid var(--fg-color);
    box-shadow: 4px 4px 0 0 var(--fg-color);
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    /* Space to display shadow. */
    margin-right: 4px;
    margin-bottom: 4px;
  }

  button.svelte-1qo109d {
    border: 0;
    cursor: pointer;
    padding: 0.25em;
    text-align: left;
    white-space: pre;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  button.svelte-1qo109d:not(:last-child) {
    border-bottom: 1px solid var(--fg-color);
  }

  /* 
    TODO: Is inset box shadow the best way to represent? Note that outline
      doesn't work because it overflows the menu container, and gets clipped. 
  */
  button.svelte-1qo109d:hover {
    box-shadow:
      inset 1px 1px 0 0 var(--fg-color),
      inset -1px -1px 0 0 var(--fg-color);
  }
  button.svelte-1qo109d:active {
    box-shadow:
      inset 2px 2px 0 0 var(--fg-color),
      inset -2px -2px 0 0 var(--fg-color);
  }

  .menu.svelte-l8h85k {
    position: absolute;
    background: none;
    /* TODO: Keep? Adjust? */
    width: 300px;
    max-width: calc(100vw - 2em);
  }

  .tabs.svelte-rc9auj {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: calc(0.5em - 1px);
    padding-top: 3px;
    padding-right: 5px;
    gap: 0.5em;
    overflow: auto;
  }

  label.svelte-rc9auj {
    padding: 0.35em;
    text-align: center;
    white-space: pre;
    text-overflow: ellipsis;
    border: 1px solid var(--fg-color);
    border-bottom: 0;
    user-select: none;
    -webkit-user-select: none;
    cursor: pointer;
    box-shadow: 3px 3px 0 0 var(--fg-color);
  }

  label.selected.svelte-rc9auj {
    box-shadow: 4px 4px 0 0 var(--fg-color);
  }

  label.svelte-rc9auj:hover {
    outline: 1px solid var(--fg-color);
  }

  label.svelte-rc9auj:active {
    outline: 1px solid var(--fg-color);
    box-shadow: 2px 2px 0 0 var(--fg-color);
  }

  input[type="text"].svelte-rc9auj {
    border: 0;
  }

  input[type="radio"].svelte-rc9auj {
    display: none;
  }

  button.add.svelte-rc9auj {
    border: 0;
    cursor: pointer;
    min-width: 1.25em;
  }

  /* 
    This ensures the tabs have a border, even when the table is scrolled down
    from the top. 
  */
  .bottom-border.svelte-rc9auj {
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    background: var(--fg-color);
    z-index: 3;
  }

  /*
    This ensures that there is no border under the selected tab so it's clear
    which tab is selected.
  */
  .bottom-border-gap.svelte-rc9auj {
    width: var(--border-cover-width);
    height: 1px;
    position: absolute;
    bottom: -1px;
    left: var(--border-cover-offset);
    right: 0;
    background: var(--bg-color);
    z-index: 3;
  }

  /* 
    The [open] is required for the .close() method to work, otherwise the
    display: flex applies to the closed dialog, which is supposed to have
    display: none. 
  */
  dialog[open].svelte-1kwbck4 {
    border: 1px solid var(--fg-color);
    box-shadow: 4px 4px 0 0 var(--fg-color);
    padding: 0.25em;
    z-index: 10;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.25em;
    width: var(--width);
    min-width: var(--width);
    max-width: var(--width);
    height: var(--height);
    min-height: var(--height);
    max-height: var(--height);
  }

  .small-shadow.svelte-1kwbck4 {
    box-shadow: 2px 2px 0 0 var(--fg-color) !important;
  }

  .top.svelte-1kwbck4 {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.25em;
  }

  .top.svelte-1kwbck4 .drag:where(.svelte-1kwbck4) {
    flex-grow: 1;
    cursor: grab;
    height: 1.5em;
    touch-action: none;
    border: 1px solid var(--fg-color);
  }

  .top.svelte-1kwbck4 .drag:where(.svelte-1kwbck4):active {
    cursor: grabbing;
  }

  .main.svelte-1kwbck4 {
    flex-grow: 1;
    overflow: auto;
  }

  .resize.svelte-1kwbck4 {
    position: absolute;
    width: 16px;
    height: 16px;
    bottom: -8px;
    right: -8px;
    border: 0;
    background: none;
    cursor: nwse-resize;
    touch-action: none;
    z-index: 10;
  }

  /* TODO: Add better indicator for the drag handle. */
  .resize.svelte-1kwbck4::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 7px;
    height: 7px;
    border: 1px solid var(--fg-color);
    background: var(--fg-color);
  }

  .resize.svelte-1kwbck4:hover::after {
    outline: 1px solid var(--fg-color);
  }

  /* Container element for App.svelte */
  body /* (unused) .main*/ {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.5em;
    overflow: hidden;
    max-height: 100%;
    max-width: 100%;
  }

  .scroll.svelte-1n46o8q {
    overflow: auto;
    flex-grow: 1;
    /* Padding so the box shadows do not get cut off */
    padding-bottom: 5px;
    padding-right: 5px;
  }

  .tabs.svelte-1n46o8q {
    margin-bottom: calc(-0.5em);
    max-width: max-content;
    position: relative;
  }

  .keyboardbar.svelte-1n46o8q {
    margin: 0 -0.5em;
    padding: 0.25em;
    border-top: 1px solid var(--fg-color);
    width: 100%;
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: calc(0.25em + 3px);
  }

  .buttonbar.svelte-1n46o8q {
    min-height: max-content;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5ch;
    overflow-x: auto;
    background-color: var(--bg-color);
  }

  .bottombar.svelte-1n46o8q {
    margin: -0.5em;
    padding: 0.25em;
    border-top: 1px solid var(--fg-color);
    border-bottom: 1px solid var(--fg-color);
    min-height: max-content;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 1ch;
    position: relative;
  }

  .startmenu.svelte-1n46o8q {
    background: none;
    position: absolute;
    top: calc(-1 * var(--height));
    width: 300px;
    max-width: 100vw - 2em;
  }

  .status.svelte-1n46o8q {
    display: flex;
    flex-direction: row;
    gap: 1ch;
  }

  kbd.svelte-1n46o8q {
    padding: 0 0.5ch;
    box-shadow: 1px 1px 0 0 var(--fg-color);
    border: 1px solid var(--fg-color);
    margin: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: monospace, monospace;
  }

  pre.svelte-1n46o8q {
    font-family: monospace, monospace;
    white-space: pre;
    margin-bottom: 1em;
    tab-size: 4ch;
  }