:root {
	/* Define variables for colors, font stack, sizing */
	--font-main: 'MapleMono', monospace;

	--flexoki-black: #100F0F;
	--flexoki-black-rgb: 16,15,15;
	--flexoki-paper: #FFFCF0;
	--flexoki-paper-rgb: 254,252,240;
	--flexoki-200-rgb: 206,205,195;
	--flexoki-50:              #F2F0E5;
	--flexoki-100:             #E6E4D9;
	--flexoki-150:             #DAD8CE;
	--flexoki-200:             #CECDC3;
	--flexoki-300:             #B7B5AC;
	--flexoki-400:             #9F9D96;
	--flexoki-500:             #878580;
	--flexoki-600:             #6F6E69;
	--flexoki-700:             #575653;
	--flexoki-800:             #403E3C;
	--flexoki-850:             #343331;
	--flexoki-900:             #282726;
	--flexoki-950:             #1C1B1A;
	--flexoki-red-50:          #FFE1D5;
	--flexoki-red-100:         #FFCABB;
	--flexoki-red-150:         #FDB2A2;
	--flexoki-red-200:         #F89A8A;
	--flexoki-red-300:         #E8705F;
	--flexoki-red-400:         #D14D41;
	--flexoki-red-500:         #C03E35;
	--flexoki-red-600:         #AF3029;
	--flexoki-red-700:         #942822;
	--flexoki-red-800:         #6C201C;
	--flexoki-red-850:         #551B18;
	--flexoki-red-900:         #3E1715;
	--flexoki-red-950:         #261312;
	--flexoki-orange-50:       #FFE7CE;
	--flexoki-orange-100:      #FED3AF;
	--flexoki-orange-150:      #FCC192;
	--flexoki-orange-200:      #F9AE77;
	--flexoki-orange-300:      #EC8B49;
	--flexoki-orange-400:      #DA702C;
	--flexoki-orange-500:      #CB6120;
	--flexoki-orange-600:      #BC5215;
	--flexoki-orange-700:      #9D4310;
	--flexoki-orange-800:      #71320D;
	--flexoki-orange-850:      #59290D;
	--flexoki-orange-900:      #40200D;
	--flexoki-orange-950:      #27180E;
	--flexoki-yellow-50:       #FAEEC6;
	--flexoki-yellow-100:      #F6E2A0;
	--flexoki-yellow-150:      #F1D67E;
	--flexoki-yellow-200:      #ECCB60;
	--flexoki-yellow-300:      #DFB431;
	--flexoki-yellow-400:      #D0A215;
	--flexoki-yellow-500:      #BE9207;
	--flexoki-yellow-600:      #AD8301;
	--flexoki-yellow-700:      #8E6B01;
	--flexoki-yellow-800:      #664D01;
	--flexoki-yellow-850:      #503D02;
	--flexoki-yellow-900:      #3A2D04;
	--flexoki-yellow-950:      #241E08;
	--flexoki-green-50:        #EDEECF;
	--flexoki-green-100:       #DDE2B2;
	--flexoki-green-150:       #CDD597;
	--flexoki-green-200:       #BEC97E;
	--flexoki-green-300:       #A0AF54;
	--flexoki-green-400:       #879A39;
	--flexoki-green-500:       #768D21;
	--flexoki-green-600:       #66800B;
	--flexoki-green-700:       #536907;
	--flexoki-green-800:       #3D4C07;
	--flexoki-green-850:       #313D07;
	--flexoki-green-900:       #252D09;
	--flexoki-green-950:       #1A1E0C;
	--flexoki-cyan-50:         #DDF1E4;
	--flexoki-cyan-100:        #BFE8D9;
	--flexoki-cyan-150:        #A2DECE;
	--flexoki-cyan-200:        #87D3C3;
	--flexoki-cyan-300:        #5ABDAC;
	--flexoki-cyan-400:        #3AA99F;
	--flexoki-cyan-500:        #2F968D;
	--flexoki-cyan-600:        #24837B;
	--flexoki-cyan-700:        #1C6C66;
	--flexoki-cyan-800:        #164F4A;
	--flexoki-cyan-850:        #143F3C;
	--flexoki-cyan-900:        #122F2C;
	--flexoki-cyan-950:        #101F1D;
	--flexoki-blue-50:         #E1ECEB;
	--flexoki-blue-100:        #C6DDE8;
	--flexoki-blue-150:        #ABCFE2;
	--flexoki-blue-200:        #92BFDB;
	--flexoki-blue-300:        #66A0C8;
	--flexoki-blue-400:        #4385BE;
	--flexoki-blue-500:        #3171B2;
	--flexoki-blue-600:        #205EA6;
	--flexoki-blue-700:        #1A4F8C;
	--flexoki-blue-800:        #163B66;
	--flexoki-blue-850:        #133051;
	--flexoki-blue-900:        #12253B;
	--flexoki-blue-950:        #101A24;
	--flexoki-purple-50:       #F0EAEC;
	--flexoki-purple-100:      #E2D9E9;
	--flexoki-purple-150:      #D3CAE6;
	--flexoki-purple-200:      #C4B9E0;
	--flexoki-purple-300:      #A699D0;
	--flexoki-purple-400:      #8B7EC8;
	--flexoki-purple-500:      #735EB5;
	--flexoki-purple-600:      #5E409D;
	--flexoki-purple-700:      #4F3685;
	--flexoki-purple-800:      #3C2A62;
	--flexoki-purple-850:      #31234E;
	--flexoki-purple-900:      #261C39;
	--flexoki-purple-950:      #1A1623;
	--flexoki-magenta-50:      #FEE4E5;
	--flexoki-magenta-100:     #FCCFDA;
	--flexoki-magenta-150:     #F9B9CF;
	--flexoki-magenta-200:     #F4A4C2;
	--flexoki-magenta-300:     #E47DA8;
	--flexoki-magenta-400:     #CE5D97;
	--flexoki-magenta-500:     #B74583;
	--flexoki-magenta-600:     #A02F6F;
	--flexoki-magenta-700:     #87285E;
	--flexoki-magenta-800:     #641F46;
	--flexoki-magenta-850:     #4F1B39;
	--flexoki-magenta-900:     #39172B;
	--flexoki-magenta-950:     #24131D
}
:root,
.theme-light {
	--color-bg-primary: var(--flexoki-paper);
	--color-bg-primary-rgb: var(--flexoki-paper-rgb);
	--color-inverted-rgb: var(--flexoki-black-rgb);
	--color-bg-secondary: var(--flexoki-50);
	--color-tx-normal: var(--flexoki-black);
	--color-tx-normal-rgb: var(--flexoki-black-rgb);
	--color-tx-muted: var(--flexoki-600);
	--color-tx-faint: var(--flexoki-300);
	--color-ui-normal: var(--flexoki-100);
	--color-ui-hover: var(--flexoki-150);
	--color-ui-active: var(--flexoki-200);
	--color-highlight: var(--flexoki-yellow-100);
	--color-action: var(--flexoki-cyan-600);
	--color-bg-hover: var(--flexoki-cyan-50);
	--color-selection: rgba(187,220,206,0.3);
	--color-re: var(--flexoki-red-600);
	--color-re-hover: var(--flexoki-red-400);
	--color-or: var(--flexoki-orange-600);
	--color-or-hover: var(--flexoki-orange-400);
	--color-ye: var(--flexoki-yellow-600);
	--color-ye-hover: var(--flexoki-yellow-400);
	--color-gr: var(--flexoki-green-600);
	--color-gr-hover: var(--flexoki-green-400);
	--color-cy: var(--flexoki-cyan-600);
	--color-cy-hover: var(--flexoki-cyan-400);
	--color-bl: var(--flexoki-blue-600);
	--color-bl-hover: var(--flexoki-blue-400);
	--color-pu: var(--flexoki-purple-600);
	--color-pu-hover: var(--flexoki-purple-400);
	--color-ma: var(--flexoki-magenta-600);
	--color-ma-hover: var(--flexoki-magenta-400)
}
.theme-dark {
	--color-bg-primary: var(--flexoki-black);
	--color-bg-primary-rgb: var(--flexoki-black-rgb);
	--color-inverted-rgb: var(--flexoki-paper-rgb);
	--color-bg-secondary: var(--flexoki-950);
	--color-tx-normal: var(--flexoki-200);
	--color-tx-normal-rgb: var(--flexoki-200-rgb);
	--color-tx-muted: var(--flexoki-500);
	--color-tx-faint: var(--flexoki-700);
	--color-ui-normal: var(--flexoki-900);
	--color-ui-hover: var(--flexoki-850);
	--color-ui-active: var(--flexoki-800);
	--color-highlight: var(--flexoki-yellow-900);
	--color-action: var(--flexoki-cyan-400);
	--color-bg-hover: var(--flexoki-cyan-950);
	--color-selection: rgba(30,95,91,0.3);
	--color-re: var(--flexoki-red-400);
	--color-re-hover: var(--flexoki-red-600);
	--color-or: var(--flexoki-orange-400);
	--color-or-hover: var(--flexoki-orange-600);
	--color-ye: var(--flexoki-yellow-400);
	--color-ye-hover: var(--flexoki-yellow-600);
	--color-gr: var(--flexoki-green-400);
	--color-gr-hover: var(--flexoki-green-600);
	--color-cy: var(--flexoki-cyan-400);
	--color-cy-hover: var(--flexoki-cyan-600);
	--color-bl: var(--flexoki-blue-400);
	--color-bl-hover: var(--flexoki-blue-600);
	--color-pu: var(--flexoki-purple-400);
	--color-pu-hover: var(--flexoki-purple-600);
	--color-ma: var(--flexoki-magenta-400);
	--color-ma-hover: var(--flexoki-magenta-600)
}

@font-face {
	font-family: '3270';
	src: url('/assets/fonts/3270-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'MapleMono';
	src: url('/assets/fonts/MapleMono-Regular.ttf.woff2') format('woff2');
}

* {
	/* Lazy reset */
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	/* Define root em */
	font-size: 10px;

	height: 100%;
}

body {
	height: 100%;

	font-size: 1.8rem;
	background-color: var(--color-bg-primary);
	color: var(--color-tx-normal);
	font-family: var(--font-main);
}

a, a:active, a:visited {
	color: var(--color-accent);
}

.container {
	max-width: 720px;
	margin: 0 auto;
	padding-top: 10rem;

	height: 100%;
}
.grid-container {
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

/* Controls Panel */
#controlsPanel button {
	background-color: var(--color-ui-normal);
	color: var(--color-tx-normal);
	border: 1px solid var(--color-ui-active);
	border-radius: 4px;
	padding: 0.8rem 1.2rem;
	font-size: 1.6rem;
	cursor: pointer;
}

/* View Panel */
#viewPanel {
    width: 100%;
    max-width: 720px;
    padding: 2rem;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-ui-active);
    border-radius: 4px;
}

#viewPanel h3 {
    margin-bottom: 1rem;
    color: var(--color-tx-normal);
}

#viewPanelContent {
    color: var(--color-tx-muted);
    line-height: 1.6;
	font-size: 1.2rem;;
}

/* Form Panel */


/* Grid rendering */
#grid {
    
	white-space: pre;
	text-align: center;
	line-height: 1.8rem;
	border-collapse: collapse;
	flex-shrink: 0;

	margin-top: 2rem;
}

#grid td {
	vertical-align: middle;
	border: 1px solid var(--color-ui-active);
	font-size: 1.8rem;
	padding: 0.4rem 0.8rem;

	user-select: none;
}


#grid td:hover {
	box-shadow: inset 0 0 0 1px var(--color-tx-faint);
	cursor: pointer;
}
#grid td.active-cell {
	box-shadow: inset 0 0 0 1px var(--color-re);
}




footer {
	position: absolute;
	bottom: 0;
	width: 100%;
	
	text-align: center;
	padding: 1rem 0;
}