*{box-sizing:border-box;margin:0;padding:0}
body,html{
	height:100vh;
	width: 100vw;
	display:flex;
	background:#0d1117;
	color:#eee;
	font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
	overflow:hidden;
}
/* правая панель */
.right{
	width:400px;
	flex-shrink:0;
	background:#161b22;
	box-shadow:-4px 0 20px rgb(255 255 255 / 10%);
	padding:2rem 1.8rem;
	display:flex;
	flex-direction:column;
}
.buttons{
	display:flex;
	flex-wrap:wrap;
	gap:1rem;
	margin-bottom:2rem;
	margin-right:20px;
}
button{
	flex:1 1 calc(50% - .5rem);
	min-width:140px;
	padding:.9rem 1.4rem;
	font-size:1rem;
	font-weight:700;
	color:#fff;
	background:linear-gradient(145deg,#3ea6ff,#2c88e3);
	border:none;
	border-radius:7px;
	cursor:pointer;
	/*box-shadow:0 4px 8px rgba(62,166,255,.45);*/
	transition:.25s;
}
button:hover{background:linear-gradient(145deg,#57b4ff,#4094ff)}
button:active{transform:scale(.97)}

.history-title{font-size:1.3rem;font-weight:700;color:#3ea6ff;margin-bottom:.7rem}
.history-list{flex:1;overflow-y:auto;padding-right:.5rem}
.history-item{background:#0f1218;border-radius:8px;color:#cbd5e1;padding:.7rem 1rem;margin-bottom:.6rem}
.history-item:hover{background:#3ea6ff33}

.left{
	flex:1;
	display:flex;
	align-items:center;
	justify-content:center;
}
.timer-wrapper{
	width:320px;height:320px;position:relative;
}
svg{width:100%;height:100%;transform:rotate(-90deg)}
circle{fill:none;stroke-linecap:round}
.circle-bg{stroke:#22272e;stroke-width:1}
.circle-progress{stroke:#3ea6ff;stroke-width:1;transition:stroke-dashoffset 1s linear}
.code{
	position:absolute;top:50%;left:50%;
	transform:translate(-50%,-50%);
	font:4rem 'Courier New',monospace;
	letter-spacing:.10em;color:#fff;user-select:none;
}

@media(max-width:900px){
	body{flex-direction:column}
	.right{width:100%;height:320px;box-shadow:none}
	.timer-wrapper{width:230px;height:230px}
	.code{font-size:3rem}
}