* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}
::-webkit-scrollbar {
	width: 10px;
}
::-webkit-scrollbar-track {
	background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
	background: #bcbcbc;
}
body {
	font-family: arial;
	color: #707070;
}
h1 {
	position: relative;
	display: inline-block;
	font-size: 160px;
	font-weight: normal;
	letter-spacing: -0.13em;
	animation: shake;
	animation-duration: 1s;
}
h2 {
	font-size: 28px;
	font-weight: normal;
	margin-bottom: 50px;
}
a {
	color: #707070;
	font-size: 22px;
	text-decoration: underline;
}
a:hover {
	text-decoration: none;
}
.content {
	padding-top: 100px;
	text-align: center;
}
.nospace {
	display: inline-block;
}
.traces {
	display: block;
	position: fixed;
	overflow-y: scroll;
	width: 300px;
	height: 100%;
	background: #e6e6e6;
	list-style: none;
}
.traces li {
	padding: 10px;
	font-size: 15px;
	line-height: 20px;
	cursor: pointer;
}
.traces li.active {
	background: <?=$color?>!important;
	color: #fff;
	cursor: default;
}
.traces li.active * {
	color: #fff!important;
}
.traces li:hover {
	background: rgba(0, 0, 0, 0.05);
}
.traces .color {
	color: <?=$color?>;
}
.traces .color-hover {
	color: <?=$colorHover?>;
}
.stage {
	width: calc(100% - 300px);
	padding: 0 20px;
	position: absolute;
	right: 0;
}
.stage h1 {
	display: block;
	font: 28px/38px arial;
	letter-spacing: normal;
	animation-name: none;
	padding: 10px 0;
}
.stage h1:first-line {
	color: <?=$color?>;
}
.stage .trace {
	display: none;
}
.stage .trace.active {
	display: block;
}
.stage .trace h2 {
	background: <?=$color?>;
	color: #fff;
	margin: 0;
	padding: 10px;
	font-size: 16px;
}
.stage .editor-frame {
	overflow-x: auto;
}
.stage .editor {
	display: table;
	width: 100%;
	background: #262722;
	overflow: hidden;
}
.stage .editor .lines {
	display: table-cell;
	vertical-align: top;
	width: 1px;
	padding: 8px 0;
	cursor: default;
}
.stage .editor .lines .line {
	display: block;
	color: #aaa;
	font: 14px/20px monospace;
	padding: 0 10px;
}
.stage .editor .lines .line.marked {
	background: rgba(255, 255, 255, 0.2);
}
.stage .editor .code  {
	display: table-cell;
	vertical-align: top;
	padding: 10px 30px 10px 0;
	font: 14px/20px monospace;
	color: #f0f0f0;
	cursor: text;
}
.stage .editor .code::selection, .stage .editor .code *::selection {
    background: rgba(255, 255, 255, 0.2);
	color: inherit;
}
.stage .editor .comment, .stage .editor .comment * {
	color: #7c775f!important;
}
.stage .editor .operator {
	color: #ff0d73;
}
.stage .editor .func {
	color: #43b7da;
}
.stage .editor .string, .stage .editor .string * {
	color: #eeb136!important;
}
.stage .editor .func-declaration {
	color: #43c437;
}
.stage .editor .constant {
	color: #ac7ffc;
}
@keyframes shake {
	0%   {left: 0px;}
	20%  {left: 15px;}
	40%  {left: -15px;}
	60%  {left: 10px;}
	80%  {left: -5px;}
	100% {left: 0px;}
}