Embedded.css

.Embedded {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100dvh;
	display: flex;
}

[data-iframed="0"].Embedded {
	width: calc(100% - 1rem);
	height: calc(100dvh - 1rem);
}

.Embedded > .bevel {
	flex-grow: 1;
	padding: 0.5rem;
}

@font-face {
    src: url('fsex302-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
	font-family: 'fixedsys';
}

body {
	font-family: 'fixedsys';
	display: flex;
	flex-direction: column;
	align-items: stretch;
	height: 100vh;
	padding: 0px;
	margin: 0px;
	background-color: #aaa;
}

button {
	font-family: fixedsys;
	font-size: 1rem;
}

.output .scroller {
	background-color: #EEE;
}

.output div.scroller {
	white-space: pre;
	padding: 0.25rem;
	box-sizing: border-box;
}

.output .row {
	background-color: #FFF;
	padding: 0.5em 0.5em;
	border-bottom: 1px white solid;
}

.Embedded .row.toolbar {
	margin: 0.5em;
	padding: 0.5em 0em;
	border: 2px solid;
	border-image: url(border-inset.png) 2 2 2 2;
	align-items: center;
}

button {
	border-image: url(border.png) 2 2 2 2;
}

button[data-ui]::after {
	position: absolute;
	top: -2px;
	left:-2px;
	bottom:-2px;
	right:-2px;
	content: '';
	mix-blend-mode: darken;
    opacity: 0.5;
}

body.loading button[data-ui] {
	transition: background-color 0.5s ease-in-out;
}

[data-running="0"] button[data-run]::after {
	background-color: #F00 !important;
	transition: background-color 0s 0.05s ease-out;
}

[data-running="1"] button[data-ui] {
	background-color: #c3c3c3;
	background-color: #505050;

	color: rgba(0,0,0,0.5);

	filter: saturate(0) brightness(1.25) contrast(0.5);
	pointer-events: none;

	background-image: url(loading.svg);
	background-position: center;
	background-repeat: no-repeat;
}

.header button[data-reset-storage] {
	max-width: 6em;
}

.header button[data-ui],
.header button[data-reset-storage],
.header button[data-refresh] {
	position: relative;
	font-weight: bold;
	font-size: 13pt;
	box-sizing: border-box;
}

*:focus {
	outline-style: dotted;
	outline-color: black;
}

.row:focus {
	background-color: #000082;
	border-bottom: 1px #000082 solid;
	color: #FFF;
}

.Embedded .row.toolbar.header {
	background-color: #BBB;
	flex-wrap: wrap;
}

.Embedded .row.toolbar.status {
	padding: 0;
}

.Embedded [data-load-demo] {
	min-width: 4rem;
}

.Embedded .row.toolbar.status > div {
	padding: 0.25em;
}

h1 {
	margin: 0em;
	margin: 0.25em;
	white-space: nowrap;
}

.row {
	display: flex;
	flex-direction: row;
}

.row.wide {
	flex: 1;
}

.row.status {
	display: flex;
}

body > div {
	display: flex;
	flex-direction: row;
}

.row.body {
	flex-grow: 1;
}

.collapse {
	flex-grow: 0;
	flex-shrink: 1;
}

.spread{
	flex-grow: 1;
	justify-content: space-around;
}

div.column {
	display: flex;
	position: relative;
	flex: 1;
}

div.column .scroller {
	position: absolute;
	top: 0px;
	left: 0px;
	bottom: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	overflow-y: auto;
	overflow-x: auto;
	font-size: 0.9rem;
}

div.panel {
    font-family: 'fixedsys';
	display: flex;
	position: relative;
	background-color: #aaa;
	flex-direction: column;
	box-sizing: border-box;
	margin: 0 0.5em;
	flex: 1;
	border-right: 1px solid rgba(0,0,0,0.5);
	border-bottom: 1px solid rgba(0,0,0,0.5);
}

div.panel:last-child {
	margin-left: 0;
}

div.panel div.input {
	background-color: #272822;
}

div.panel > div {
	background-color: white;
	border: 2px solid;
	border-right-width: 0;
	border-image: url(border-inset.png) 2 2 2 2;
	flex-direction: column;
	display: flex;
	flex: 1;
}

.Embedded:not([data-output-mode="single"]) div.panel > div:not(:has(iframe[srcdoc=""])) + div:has(iframe[srcdoc=""]) {
	flex: 0;
	min-height: 5rem;
}

.liquid{
	display: flex;
	flex-direction: column;
	flex: 1;
}

button,
.panel > div label {
	user-select: none;
	border: 2px solid;
	border-image: url(border.png) 2 2 2 2 !important;
	background-color: #c3c3c3;
	padding: 0.25em;
}

.input, .output .scroller, iframe {
	user-select: normal;
}

.panel .cols {
	/* margin-top: -1px; */
}

.panel > div label[tabindex]:first-child {
	/* margin-right: -1px; */
	box-sizing: border-box;
}

.panel > div .cols > label[tabindex]:last-child {
	border-right-width: 2px;
	/* border-right: 1px; */
}

label[tabindex], button {
	position: relative;
}

label[tabindex]:active,
button:active {
	border: 2px solid;
	border-image: url(border-inset.png) 2 2 2 2 !important;
	position: relative;
	z-index: 100;
}

.header label {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.header label p {
	text-align: right;
}

pre {
	flex: 1;
	margin-top: 0px;
	margin-bottom: 0px;
}

.round {
	border-radius: 50%;
	height: 49px;
	margin-right: 5px;
}

.credit{
	padding-right: 0.5em;
	padding-left: 0.5em;
}

.column .row {
	white-space: pre;
}

.cols {
	display: flex;
	flex-direction: row !important;
}

.rows {
	display: flex;
	flex-direction: column !important;
}

.cols label {
	flex: 1;
}

label {
	user-select: none;
}

.collapse {
	flex: 0 !important;
	white-space: nowrap;
}

iframe {
	border: none;
}

.Embedded [type=file] {
	display: none;
}

.header select {
	font-size: 1rem;
}

form {
	display: flex;
	flex-direction: column;
	max-width: 15rem;
}

form label {
	display: flex;
	flex-direction: row;
}

form label > span:first-child{
	flex:1;
}

.loader {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url(loading.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-color: rgba(0,0,0,0.5);
	background-size: 15rem;
}

body:not(.loading) .loader {
	display: none;
}

.Embedded[data-display-mode="html"] .stdout div.scroller ,
.Embedded[data-display-mode="html"] .stderr div.scroller ,
.Embedded[data-display-mode="html"] .stdret div.scroller {
	display: none;
}

.Embedded[data-display-mode="html"] .stdout iframe.scroller,
.Embedded[data-display-mode="html"] .stderr iframe.scroller,
.Embedded[data-display-mode="html"] .stdret iframe.scroller {
	display: initial;
}

.Embedded[data-output-mode="normal"] #ret {
	display: none;
}

#example-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: initial;
}

#example-wrapper #example {
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: initial;
	width: 100%;
}

#example-wrapper p {
	word-break: break-all;
}

#example-wrapper:has( #example:empty ) {
	display: none;
}

.stdout input {
	display: inline;
}