:root {
  --color-surface: #d6d6d6;
  --color-ink: #3a3a3a;
  --color-action: #7f9f7f;
  --color-identity: #d4888d;

  font-family: Hack, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  line-height: 1.5;
}

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

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
}

button,
input,
select,
textarea {
  font: inherit;
}

button,
[role="button"] {
  border: 0;
  border-radius: 0;
  color: inherit;
  background: none;
  cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"] {
  cursor: default;
}

a {
  color: inherit;
}

button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--color-action);
  outline-offset: 2px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

dialog:not([open]) {
  display: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
