.playground {
  display: flex;
  flex-direction: column;
  width: 95%;
  margin: 20px auto;
  padding: 10px;
  background-color: var(--bg);
  color: var(--text);
}

#input {
  width: 100%;
  height: 400px;
  padding: 10px;
  font-family: var(--mono-font);
  font-size: 14px;
  border: 1px solid var(--border);
  resize: vertical;
  outline: none;
  border-color: var(--border);
  box-sizing: border-box;
  background-color: var(--accent-bg);
  color: var(--code);
}

#input:focus {
  border-color: var(--accent);
}

#output {
  width: 100%;
  height: 150px;
  padding: 10px;
  font-family: var(--mono-font);
  font-size: 14px;
  border: 1px solid var(--border);
  resize: none;
  background-color: var(--accent-bg);
  color: var(--code);
  box-sizing: border-box;
}

#output[disabled] {
  cursor: default;
}

#run {
  padding: 10px 20px;
  background-color: var(--accent);
  color: var(--bg);
  border: none;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  font-family: var(--sans-font);
}