:root {
  --spacing: 1.75rem;
  --neg-spacing: calc(var(--spacing) * -1);
  --head-bg-color: #fafafa;
  --body-bg-color: #e4e4e4;
  --body-fg-color: #1c1c23;
  --body-fg-color-muted: #666;
  --input-bg-color: #fff;
  --input-fg-color: #000;
  --outline-color: #ccc;
  --separator-color: #8883;
  --focus-ring-color: rgb(6, 180, 224);
  --code-type-color: #71a70d;
  --code-keyword-color: #e25e2e;
  --code-comment-color:#728f6f;
  --code-name-color:#3891a3;
  --code-tag-color: #AE81FF;
  --accent-color: #fc2953;
  --accent-contrast-color: #fff;
  --font-stack: menlo, consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --head-bg-color: #36393d;
    --body-bg-color: #22262d;
    --body-fg-color: #ddd;
    --body-fg-color-muted: #999;
    --input-bg-color: #181b20;
    --input-fg-color: #eee;
    --outline-color: #444;
    --focus-ring-color: rgb(46, 158, 178);
    --code-type-color: #A6E22E;
    --code-keyword-color: #e25e2e;
    --code-comment-color:#75715E;
    --code-name-color:#66D9EF;
    --code-tag-color: #AE81FF;
    --accent-color: #ff5073;
    --accent-contrast-color: #000;

  }
}
html {
  accent-color: var(--accent-color);
  margin: 0;
  padding: 0;
  font: 13px/1.5 Poppins;
  color-scheme: light dark;
  overscroll-behavior: none;
}
body {
  margin: 0;
  gap: var(--spacing);
  padding: var(--spacing);
  box-sizing: border-box;
  background: var(--body-bg-color);
  color: var(--body-fg-color);
  display: grid;
  grid-template-areas: 'title' 'options' 'in' 'out';
  grid-template-rows: auto auto minmax(0px, 70vh) minmax(0px, 70vh);
}
@media (min-width: 35em) {
  body {
    grid-template-areas: 'title title' 'options in' 'options out';
    grid-template-rows: auto minmax(0px, 1fr) minmax(0px, 1fr);
    grid-template-columns: 18em 1fr;
    height: 100vh;
  }
  #options .field:last-child::after {
    display: none;
  }
}
@media (min-width: 56em) {
  body {
    grid-template-areas: 'title title title' 'options in out';
    grid-template-rows: auto minmax(0px, 1fr);
    grid-template-columns: 22em 1fr 1fr;
  }
}
fieldset {
  display: contents;
}
legend {
  display: none
}
button {
  font: inherit;
  background:  var(--accent-color);
  color: var(--accent-contrast-color);
  border: 0;
  border-radius: 5px;
  padding:0 .5em
}
.input {
  border: 1px solid var(--outline-color);
  margin: 0;
  padding: .5rem;
  border-radius: 4px;
  background: var(--input-bg-color);
  color: var(--input-fg-color);
  font: inherit;
  resize: none;
  width: 100%;
  box-sizing: border-box;
}
.input:focus,:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-color);
}
.input:invalid {
  outline: none;
  box-shadow: 0 0 0 3px #c00;
}
.input--text {
  width: 100%;
  box-sizing: border-box;
}
.view {
  overflow: auto;
  white-space: pre;
  font-size: 13px;
  line-height: 1.25;
  font-family: var(--font-stack);
}
input {
  margin: 0;
  user-select: initial
}
#options {
  user-select: none;;
  display: flex;
  flex-direction: column;
  gap: var(--spacing);
  padding: var(--spacing);
  margin: var(--neg-spacing);
  overflow: auto;
  grid-area: options;
}
h1 {
  font-size: 150%;
  line-height: 1;
  margin: 0
}
a {
  color: var(--accent-color);
}
#title {
  background: var(--head-bg-color);
  margin: var(--neg-spacing) var(--neg-spacing) 0 var(--neg-spacing);
  padding: var(--spacing);
  grid-area: title;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

#input {
  grid-area: in;
}
#output {
  grid-area: out;
}
.code--type {
  color: var(--code-type-color);
}
.code--tag {
  color: var(--code-tag-color);
}
.code--name {
  color: var(--code-name-color);
}
.code--keyword {
  color: var(--code-keyword-color);
}
.code--comment {
  color: var(--code-comment-color);
}

.field {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: .5em;
  padding:0 .5rem
}
.field__label {
  font-size:1.1rem
}
.field__info {
  grid-column: 1 / span 2;
  color: var(--body-fg-color-muted);
}
.field--vertical {
  grid-template-columns: auto;
}
.field--vertical .field__info {
  grid-column: 1;
}
.field--vertical  .field__input {
  margin-left:-.5rem;
  width: calc(100% + 1rem);
}

.field__tools {
  grid-column: 2;
}
.field--vertical:has(.field__tools) {
  grid-template-columns: 1fr auto;
}
.field--vertical:has(.field__tools) .field__input {
  grid-column: 1 / span 2;
}




#options .field::after {
  pointer-events: none;
  content: '';
  height: 1px;
  background: var(--separator-color);
  grid-column: 1 / -1;
  margin: 1em 0 -.5em;
}