* {
	box-sizing: border-box;
	line-height: 1;
}
body {
	font-size: 16px;
	font-family: Arial;
	margin: 0;
	padding: 0;
	background: #2d2d2d;
	color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100dvh;
	width: 100dvw;
	padding: 15px;
}
input {
	outline: none !important;
	text-align: center;
}
#main {
	display: grid;
	align-items: center;
	grid-template-areas:
		'secret secret secret secret'
		'length-period length-period length-period length-period'
		'pcode code tleft ncode'
		'ppcode code tleft nncode'
		'manipulate-ts manipulate-ts manipulate-ts manipulate-ts';
	--len: 6;
	--side: calc(8px * var(--len));
	grid-template-columns: var(--side) calc(var(--side) * 3) 43px var(--side);
	gap: 2px 10px;
	zoom: 1.5;
}
#length-period {
	grid-area: length-period;
	font-size: .75em;
	white-space: nowrap;
	display: grid;
	grid-template-columns: min-content 3rem min-content 3rem;
	gap: 0;
	justify-content: center;
	align-items: center;
}
#length-period input {
	width: 3rem;
	border: 1px solid #767676;
	border-radius: 0 3px 3px 0;
	font-size: 1em;
}
#length-period input[readonly] {
	user-select: none;
	color: #757575;
	border-right: none;
	border-radius: 3px 0 0 3px;
}
#manipulate-ts {
	grid-area: manipulate-ts;
	font-size: .75em;
	display: grid;
	justify-content: center;
	align-items: center;
	grid-template-areas:
		'prev-ts year sep1 month sep2 day next-ts'
		'prev-ts hour sep3 minutes sep4 seconds next-ts'
		'prev-ts ts ts ts ts ts next-ts'
		'opts opts opts opts opts opts opts';
	gap: 2px;
}
#manipulate-ts input[type=number] {
	font-size: 1em;
	width: 4rem;
	text-align: right;
}
#prev-ts, #next-ts {
	height: 100%;
	width: 3em;
	font-weight: normal;
}
#manipulate-ts-opts {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	gap: 2px;
	height: 1.5rem;
}
#secret {
	grid-area: secret;
	padding: 1px 2px;
	width: 100%;
}
#code { grid-area: code; }
#pcode-cont { grid-area: pcode; }
#ppcode-cont { grid-area: ppcode; }
#ncode-cont { grid-area: ncode; }
#nncode-cont { grid-area: nncode; }
.code, .ocode input {
	font-size: 2.65em;
	width: 100%;
	padding: 0 !important;
	background: none !important;
	color: white !important;
	border: none !important;
	outline: none !important;
	margin: 0 !important;
	text-align: center;
	font-family: Arial;
}
.ocode {
	display: grid;
	grid-template-rows: 1fr min-content;
}
.ocode input {
	grid-area: unset;
	font-size: .75em;
	text-align: center;
}
.ocode input:not([id]) {
	font-size: .45em;
	color: #ccc !important;
}
#tleft {
	grid-area: tleft;
	text-align: right;
	content: "";
	display: block;
	position: relative;
	border-radius: 100%;
	height: 43px;
	width: 43px;
	margin: 2px 0;
	font-size: 1.45em;
	padding: 5px;
	background: conic-gradient(from 0deg, green 0deg, green var(--angle, 0deg), transparent var(--angle, 0deg) 270deg);
}
#tleft:after {
	content: attr(data-tleft);
	background: #2d2d2d;
	border-radius: 50%;
	padding: 5px;
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	align-items: center;
	box-shadow: 0 0 0px 5px #00b90057;
}