/* 烟花 */
	* {
	    position: relative;
	    box-sizing: border-box;
	}

	html,
	body {
	    height: 100%;
	}

	html {
	    background-color: #000;
	}

	body {
	    overflow: hidden;
	    color: rgba(255, 255, 255, 0.5);
	    font-family: "Russo One", arial, sans-serif;
	    line-height: 1.25;
	    letter-spacing: 0.06em;
	}

	.hide {
	    opacity: 0;
	    visibility: hidden;
	}

	.remove {
	    display: none !important;
	}

	.blur {
	    -webkit-filter: blur(12px);
	    filter: blur(12px);
	}

	.container {
	    height: 100%;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	}

	.loading-init {
	    width: 100%;
	    align-self: center;
	    text-align: center;
	    text-transform: uppercase;
	}

	.loading-init__header {
	    font-size: 2.2em;
	}

	.loading-init__status {
	    margin-top: 1em;
	    font-size: 0.8em;
	    opacity: 0.75;
	}

	.stage-container {
	    overflow: hidden;
	    box-sizing: initial;
	    border: 1px solid #222;
	    margin: -1px;
	}

	@media (max-width: 840px) {
	    .stage-container {
	        border: none;
	        margin: 0;
	    }
	}

	.canvas-container {
	    width: 100%;
	    height: 100%;
	    -webkit-transition: -webkit-filter 0.3s;
	    transition: -webkit-filter 0.3s;
	    transition: filter 0.3s;
	    transition: filter 0.3s, -webkit-filter 0.3s;
	}

	.canvas-container canvas {
	    position: absolute;
	    mix-blend-mode: lighten;
	    -webkit-transform: translateZ(0);
	    transform: translateZ(0);
	}

	.controls {
	    position: absolute;
	    top: 0;
	    width: 100%;
	    padding-bottom: 50px;
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-pack: justify;
	    justify-content: space-between;
	    -webkit-transition: opacity 0.3s, visibility 0.3s;
	    transition: opacity 0.3s, visibility 0.3s;
	}

	@media (min-width: 840px) {
	    .controls {
	        visibility: visible;
	    }

	    .controls.hide:hover {
	        opacity: 1;
	    }
	}

	.menu {
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    background-color: rgba(0, 0, 0, 0.42);
	    -webkit-transition: opacity 0.3s, visibility 0.3s;
	    transition: opacity 0.3s, visibility 0.3s;
	}

	.menu__inner-wrap {
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    -webkit-transition: opacity 0.3s;
	    transition: opacity 0.3s;
	}

	.menu__header {
	    margin-top: auto;
	    margin-bottom: 8px;
	    padding-top: 16px;
	    font-size: 2em;
	    text-transform: uppercase;
	}

	.menu__subheader {
	    margin-bottom: auto;
	    padding-bottom: 12px;
	    font-size: 0.86em;
	    opacity: 0.8;
	}

	.menu form {
	    width: 100%;
	    max-width: 400px;
	    padding: 0 10px;
	    overflow: auto;
	    -webkit-overflow-scrolling: touch;
	}

	.menu .form-option {
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-align: center;
	    align-items: center;
	    margin: 16px 0;
	    -webkit-transition: opacity 0.3s;
	    transition: opacity 0.3s;
	}

	.menu .form-option label {
	    display: block;
	    width: 50%;
	    padding-right: 12px;
	    text-align: right;
	    text-transform: uppercase;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	}

	.menu .form-option--select select {
	    display: block;
	    width: 50%;
	    height: 30px;
	    font-size: 1rem;
	    font-family: "Russo One", arial, sans-serif;
	    color: rgba(255, 255, 255, 0.5);
	    letter-spacing: 0.06em;
	    background-color: transparent;
	    border: 1px solid rgba(255, 255, 255, 0.5);
	}

	.menu .form-option--select select option {
	    background-color: black;
	}

	.menu .form-option--checkbox input {
	    display: block;
	    width: 26px;
	    height: 26px;
	    margin: 0;
	    opacity: 0.5;
	}

	@media (max-width: 840px) {

	    .menu .form-option select,
	    .menu .form-option input {
	        outline: none;
	    }
	}

	.close-menu-btn {
	    position: absolute;
	    top: 0;
	    right: 0;
	}

	.btn {
	    opacity: 0.16;
	    width: 50px;
	    height: 50px;
	    display: -webkit-box;
	    display: flex;
	    -webkit-user-select: none;
	    -moz-user-select: none;
	    -ms-user-select: none;
	    user-select: none;
	    cursor: default;
	    -webkit-transition: opacity 0.3s;
	    transition: opacity 0.3s;
	}

	.btn--bright {
	    opacity: 0.5;
	}

	@media (min-width: 840px) {
	    .btn:hover {
	        opacity: 0.32;
	    }

	    .btn--bright:hover {
	        opacity: 0.75;
	    }
	}

	.btn svg {
	    display: block;
	    margin: auto;
	}

	.credits {
	    margin-top: auto;
	    margin-bottom: 10px;
	    padding-top: 6px;
	    font-size: 0.8em;
	    opacity: 0.75;
	}

	.credits a {
	    color: rgba(255, 255, 255, 0.5);
	    text-decoration: none;
	}

	.credits a:hover,
	.credits a:active {
	    color: rgba(255, 255, 255, 0.75);
	    text-decoration: underline;
	}

	.help-modal {
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-pack: center;
	    justify-content: center;
	    -webkit-box-align: center;
	    align-items: center;
	    position: fixed;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    visibility: hidden;
	    -webkit-transition-property: visibility;
	    transition-property: visibility;
	    -webkit-transition-duration: 0.25s;
	    transition-duration: 0.25s;
	}

	.help-modal__overlay {
	    position: absolute;
	    top: 0;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    opacity: 0;
	    -webkit-transition-property: opacity;
	    transition-property: opacity;
	    -webkit-transition-timing-function: ease-in;
	    transition-timing-function: ease-in;
	    -webkit-transition-duration: 0.25s;
	    transition-duration: 0.25s;
	}

	.help-modal__dialog {
	    display: -webkit-box;
	    display: flex;
	    -webkit-box-orient: vertical;
	    -webkit-box-direction: normal;
	    flex-direction: column;
	    -webkit-box-align: center;
	    align-items: center;
	    max-width: 400px;
	    max-height: calc(100vh - 100px);
	    margin: 10px;
	    padding: 20px;
	    border-radius: 0.3em;
	    background-color: rgba(0, 0, 0, 0.4);
	    opacity: 0;
	    -webkit-transform: scale(0.9, 0.9);
	    transform: scale(0.9, 0.9);
	    -webkit-transition-property: opacity, -webkit-transform;
	    transition-property: opacity, -webkit-transform;
	    transition-property: opacity, transform;
	    transition-property: opacity, transform, -webkit-transform;
	    -webkit-transition-timing-function: ease-in;
	    transition-timing-function: ease-in;
	    -webkit-transition-duration: 0.25s;
	    transition-duration: 0.25s;
	}

	@media (min-width: 840px) {
	    .help-modal__dialog {
	        font-size: 1.25rem;
	        max-width: 500px;
	    }
	}

	.help-modal__header {
	    font-size: 1.75em;
	    text-transform: uppercase;
	    text-align: center;
	}

	.help-modal__body {
	    overflow-y: auto;
	    -webkit-overflow-scrolling: touch;
	    margin: 1em 0;
	    padding: 1em 0;
	    border-top: 1px solid rgba(255, 255, 255, 0.25);
	    border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	    line-height: 1.5;
	    color: rgba(255, 255, 255, 0.75);
	}

	.help-modal__close-btn {
	    flex-shrink: 0;
	    outline: none;
	    border: none;
	    border-radius: 2px;
	    padding: 0.25em 0.75em;
	    margin-top: 0.36em;
	    font-family: "Russo One", arial, sans-serif;
	    font-size: 1em;
	    color: rgba(255, 255, 255, 0.5);
	    text-transform: uppercase;
	    letter-spacing: 0.06em;
	    background-color: rgba(255, 255, 255, 0.25);
	    -webkit-transition: color 0.3s, background-color 0.3s;
	    transition: color 0.3s, background-color 0.3s;
	}

	.help-modal__close-btn:hover,
	.help-modal__close-btn:active,
	.help-modal__close-btn:focus {
	    color: #FFF;
	    background-color: #09F;
	}

	.help-modal.active {
	    visibility: visible;
	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.4s;
	}

	.help-modal.active .help-modal__overlay {
	    opacity: 1;
	    -webkit-transition-timing-function: ease-out;
	    transition-timing-function: ease-out;
	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.4s;
	}

	.help-modal.active .help-modal__dialog {
	    opacity: 1;
	    -webkit-transform: scale(1, 1);
	    transform: scale(1, 1);
	    -webkit-transition-timing-function: ease-out;
	    transition-timing-function: ease-out;
	    -webkit-transition-duration: 0.4s;
	    transition-duration: 0.4s;
	}

	/* reset */
	html,
	body,
	div,
	span,
	applet,
	object,
	iframe,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	p,
	blockquote,
	pre,
	a,
	abbr,
	acronym,
	address,
	big,
	cite,
	code,
	del,
	dfn,
	em,
	img,
	ins,
	kbd,
	q,
	s,
	samp,
	small,
	strike,
	strong,
	sub,
	sup,
	tt,
	var,
	b,
	u,
	i,
	center,
	dl,
	dt,
	dd,
	ol,
	ul,
	li,
	fieldset,
	form,
	label,
	legend,
	table,
	caption,
	tbody,
	tfoot,
	thead,
	tr,
	th,
	td,
	article,
	aside,
	canvas,
	details,
	embed,
	figure,
	figcaption,
	footer,
	header,
	hgroup,
	menu,
	nav,
	output,
	ruby,
	section,
	summary,
	time,
	mark,
	audio,
	video {
	    margin: 0;
	    padding: 0;
	    border: 0;
	    font-size: 100%;
	    font: inherit;
	    vertical-align: baseline
	}

	article,
	aside,
	details,
	figcaption,
	figure,
	footer,
	header,
	hgroup,
	menu,
	nav,
	section {
	    display: block
	}

	body {
	    line-height: 1
	}

	ol,
	ul {
	    list-style: none
	}

	blockquote,
	q {
	    quotes: none
	}

	blockquote:before,
	blockquote:after,
	q:before,
	q:after {
	    content: '';
	    content: none
	}

	table {
	    border-collapse: collapse;
	    border-spacing: 0
	}



	/* cyrillic */
	@font-face {
	    font-family: 'Russo One';
	    font-style: normal;
	    font-weight: 400;
	    src: url(../font/Z9XUDmZRWg6M1LvRYsHOy8mJrrg.woff2) format('woff2');
	    unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
	}

	/* latin-ext */
	@font-face {
	    font-family: 'Russo One';
	    font-style: normal;
	    font-weight: 400;
	    src: url(../font/Z9XUDmZRWg6M1LvRYsHOwcmJrrg.woff2) format('woff2');
	    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
	}

	/* latin */
	@font-face {
	    font-family: 'Russo One';
	    font-style: normal;
	    font-weight: 400;
	    src: url(../font/Z9XUDmZRWg6M1LvRYsHOz8mJ.woff2) format('woff2');
	    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
	}