body{
  margin:0;
  font-family: monospace;
  background:snow;
  color:#111;
  overflow:hidden;
}


body.dark{
  background:#121212;
  color:#eee;
}

  h4 { font-family: garamond; display: block;}

  small a {color: #ff6fae;}
  small a:hover {color: #ff6fae; text-decoration: underline dotted 1.5px;}
  
#topbar{
  padding:10px;
  background:snow;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  border-bottom:2px dotted #91ddcf;
}

body.dark #topbar{
  background:#1f1f1f;
  border-bottom:2px dotted #91ddcf;
}


button{
  font-family: basiic;
  background:#fff;
  border:1px dotted #bbb;
  padding:5px 8px;
  cursor:pointer;
  transition:0.15s ease;
}

button:hover{
  transform:translateY(-1px);
  background:#f0f0f0;
}


.export-btn{
  background:#ffd37a;
  border:1px dotted #e0b85f;
}

.export-btn:hover{
  background:#ffbf4d;
}


body.dark button{
  background:#2a2a2a;
  color:#eee;
  border:1px dotted #444;
}

body.dark .export-btn{
  background:#ffb84d;
  color:#111;
}


#palette{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.swatch{
  width:18px;
  height:18px;
  border:1px solid #666;
  cursor:pointer;
  box-sizing:border-box;
}

.swatch.selected{
  border:4px solid #666;
}



#workspace{
  display:flex;
  height:calc(100vh - 60px);
}

#left{
  width:300px;
  padding:10px;
  border-right:2px dotted #91ddcf;
  background:#fafafa;
  overflow:auto;
}

body.dark #left{
  background:#181818;
  border-right:2px dotted #91ddcf;
}

#right{
  flex:1;
  overflow:auto;
  background:#fff;
}

body.dark #right{
  background:#0f0f0f;
}

#grid{
  display:inline-block;
  padding:20px;
  white-space:pre;
  line-height:16px;
  font-size:16px;
  cursor:crosshair;
}

.cell{
  display:inline-block;
  width:10px;
  height:16px;
  user-select:none;
  cursor:crosshair;
}


#output{
  width:100%;
  height:80px;
  box-sizing:border-box;
  resize:vertical;

  font-family:monospace;
  font-size:12px;

  background:#fff;
  padding:8px;
  border:1px solid #ddd;

  white-space:pre;
  overflow:auto;
}

body.dark #output{
  background:#111;
  color:#eee;
  border:1px solid #333;
}


#directions{
  font-size:11px;
  font-family: basiic;
  opacity:0.7;
  margin-top:6px;
  line-height:1.3;
}


.kofi-btn{
  font-family: basiic;
  display:inline-block;
  margin-top:8px;
  padding:6px 8px;
  background:#ff5fa2;
  color:white;
  font-size:12px;
}

.kofi-btn:hover{
  background:#ff3f8f;
  color: white;
  transform:translateY(-1px);
}