luce/example/style.css

/* formatting */
* {
	box-sizing: border-box;
}

#container {
	display:  flex;
	gap: 1rem;
}

#content-half {
	display:  flex;
	flex-direction: column;
	flex:  1;
}

#content-half > textarea {
	flex:  1;
}

#markdown-half {
	flex: 1;
}

ul.contains-task-list, ol.contains-task-list {
	margin-left: -1em;
}

.gfm-color_chip span {
  display: inline-block;
  line-height: 1;
  margin: 0 0 2px 4px;
  vertical-align: middle;
  border-radius: 3px;
  width: 0.9em;
  height: 0.9em;
}
code.gfm-color_chip {
  padding: 2px 4px;
  border-radius: 4px;
}
/* colours, fonts, etc. */

html {
  line-height: 1.2;
  font-size: 16px;
}

@media print {
	#content-half {
		display: none;
	}
}

body {
	color: #172b4d;
	font-family: -apple-system, BlinkMacSystemFont, "avenir next", avenir, "helvetica neue", helvetica, ubuntu, roboto, noto, "segoe ui", arial, sans-serif;
}

body > p {
	text-align: center;
}

#markdown-half a {
	color: #0052cc;
	text-decoration: none;
}

#markdown-half a:hover {
	color: #0065ff;
	text-decoration: underline;
}

#markdown-half a:active {
	color:  #0747a6;
}

#markdown-half pre {
	border-radius: 3px;
	font-family: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
	padding: 16px 8px;
	overflow-wrap: normal;
	font-size: 12px;
	overflow-x: auto;
}

#markdown-half p code {
	background-color: #eaeef3;
	border-radius: 3px;
	font-family: "SFMono-Medium", "SF Mono", "Segoe UI Mono", "Roboto Mono", "Ubuntu Mono", Menlo, Consolas, Courier, monospace;
	padding: 2px 4px;
	font-size: 12px;
	overflow-x: auto;
}

ul.contains-task-list, ol.contains-task-list {
	list-style-type: none;
}

.task-list-item {
	list-style-type: none;
}

.gfm-color_chip span {
  background: #fff;
}
code.gfm-color_chip {
  color: #1f1f1f;
  background-color: #f0f0f0;
}