@charset "UTF-8";

@font-face{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: fallback;
	src: url('fonts/inter-cyrillic.woff2') format('woff2');
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: fallback;
	src: url('fonts/inter-cyrillic-ext.woff2') format('woff2');
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: fallback;
	src: url('fonts/inter-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: fallback;
	src: url('fonts/inter-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root{

	--accent: #007bff;
	--accent-hover: #0069d9;
	--accent-dark: #0056b3;
	--accent-pale: #80bdff;
	--accent-light: #4da3ff;
	--focus-ring: rgba(0, 123, 255, .25);
	--on-accent: #fff;

	--badge-text: var(--on-accent);

	--bg: #fff;
	--bg-gradient: none;
	--surface: #f8f9fa;
	--surface-hover: #e2e6ea;
	--surface-2: #e9ecef;
	--surface-raised: #fff;

	--code-font: 'Courier New', 'SF Mono', SFMono-Regular, Menlo, monospace;

	--text: #555;

	--text-mid: #3b3d3f;
	--text-strong: #212529;
	--muted: #ccc;
	--on-muted: #fff;
	--on-dark: #fff;
	--soft: #eee;
	--shadow: #999;
	--danger: #f55;
	--effect: #4f9c6f;
	--length: #8b74b8;

	--repeat: #4a86d4;

	--field-bg: #fff;
	--field-text: #495057;

	--label-text: #7b848c;

	--faint-text: #5f6873;
	--border: #ced4da;
	--table-border: #dee2e6;
	--row-hover: rgba(0, 0, 0, .075);
	--card-border: rgba(0, 0, 0, .125);
	--card-header-bg: rgba(0, 0, 0, .03);

	--navbar-bg: #343a40;
	--navbar-brand: #fff;
	--navbar-link: rgba(255, 255, 255, .5);
	--navbar-link-hover: rgba(255, 255, 255, .75);
	--navbar-link-active: #fff;
	--navbar-toggler-border: rgba(255, 255, 255, .1);

	--blow: #fbb;
	--draw: #bdf;
	--harp-text: #555;
	--harp-text-outline: #555;
	--harp-frame: #999;
	--comb-bg: #4a4a4a;
	--holenum-bg: #1c1c1c;
	--bend: #fec;
	--overbend: #fcc;

	--current-bg: #007bff;
	--on-chip: #fff;
	--on-current: #fff;

	--key-white: #fff;
	--key-white-edge: #ccc;
	--key-label-signed: #999;
	--key-border: #000;
	--key-black: #000;
	--key-black-edge: #333;
	--stave-line: #000;
	--stave-faint: #d8d8d8;
	--stave-hover: rgba(0, 0, 0, .1);

	--circle-note: #333;
	--accent-tint-1: #edf6ff;
	--accent-tint-2: #cae3ff;
	--accent-tint-3: #a6d1ff;
	--ring-1: #e6f2ff;
	--ring-2: #b3d7ff;
	--circle-pointer: #fff;
	--on-ring: #fff;
	--on-ring-soft: #bdf;
	--callout-bg: rgb(180, 215, 255);

	--beat-main: #fff;
}

*,
*::before,
*::after{
	box-sizing: border-box;
}

html{
	-webkit-text-size-adjust: 100%;

	accent-color: var(--accent);

	scroll-behavior: smooth;

	scrollbar-color: var(--muted) var(--surface);

	overflow-y: scroll;
}

::-webkit-scrollbar{
	width: 12px;
	height: 12px;
}
::-webkit-scrollbar-track{
	background: var(--surface);
}
::-webkit-scrollbar-thumb{
	background: var(--muted);
	border: 3px solid var(--surface);
	border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover{
	background: var(--label-text);
}

::-webkit-scrollbar-corner{
	background: var(--surface);
}

@media (prefers-reduced-motion: reduce){
	html{
		scroll-behavior: auto;
	}
}

html.harp-booting body > *{
	visibility: hidden;
}

body{
	margin: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	text-align: left;

	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--bg);

	background-image: var(--bg-gradient);
	background-attachment: fixed;
}

h1, h2, h3, h4, h5, h6{
	margin-top: 0;
	margin-bottom: .5rem;
	font-weight: 500;
	line-height: 1.2;
}

h1{ font-size: 2rem; letter-spacing: -.01em; }
h2{ font-size: 2rem; letter-spacing: -.01em; }
h3{ font-size: 1.75rem; }
h4{ font-size: 1.5rem; }
h5{ font-size: 1.25rem; }
h6{ font-size: 1rem; }

p{
	margin-top: 0;
	margin-bottom: 1rem;
}

ul{
	margin-top: 0;
	margin-bottom: 1rem;
}

a{
	color: var(--accent);
	text-decoration: none;
	background-color: transparent;
}
a:hover{
	color: var(--accent-dark);
	text-decoration: underline;
}

a:not([href]),
a:not([href]):hover{
	text-decoration: none;
	cursor: default;
}

svg{
	overflow: hidden;
	vertical-align: middle;
}

button,
input,
select,
textarea{
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
}
button{
	text-transform: none;
	-webkit-appearance: button;
	cursor: pointer;
}

.container{
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
@media (min-width: 576px){ .container{ max-width: 540px; } }
@media (min-width: 768px){ .container{ max-width: 720px; } }
@media (min-width: 992px){ .container{ max-width: 960px; } }
@media (min-width: 1200px){ .container{ max-width: 1140px; } }

.row{
	display: flex;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}

.col,
.col-auto,
.col-1, .col-2, .col-5, .col-6, .col-7,
.col-sm-5, .col-sm-6, .col-sm-7,
.col-md-4, .col-md-6,
.col-lg-3, .col-lg-4, .col-lg-6, .col-lg-8, .col-lg-10{
	position: relative;
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
}

.col{
	flex-basis: 0;
	flex-grow: 1;
	max-width: 100%;
}
.col-auto{
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
}

.col-1{ flex: 0 0 8.333333%; max-width: 8.333333%; }
.col-2{ flex: 0 0 16.666667%; max-width: 16.666667%; }
.col-5{ flex: 0 0 41.666667%; max-width: 41.666667%; }
.col-6{ flex: 0 0 50%; max-width: 50%; }
.col-7{ flex: 0 0 58.333333%; max-width: 58.333333%; }

@media (min-width: 576px){
	.col-sm-5{ flex: 0 0 41.666667%; max-width: 41.666667%; }
	.col-sm-6{ flex: 0 0 50%; max-width: 50%; }
	.col-sm-7{ flex: 0 0 58.333333%; max-width: 58.333333%; }
}
@media (min-width: 768px){
	.col-md-4{ flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-md-6{ flex: 0 0 50%; max-width: 50%; }
}
@media (min-width: 992px){
	.col-lg-3{ flex: 0 0 25%; max-width: 25%; }
	.col-lg-4{ flex: 0 0 33.333333%; max-width: 33.333333%; }
	.col-lg-6{ flex: 0 0 50%; max-width: 50%; }
	.col-lg-8{ flex: 0 0 66.666667%; max-width: 66.666667%; }
	.col-lg-10{ flex: 0 0 83.333333%; max-width: 83.333333%; }
}

.d-flex{ display: flex !important; }
.d-none{ display: none !important; }
.flex-row{ flex-direction: row !important; }
.justify-content-center{ justify-content: center !important; }

.align-items-center{ align-items: center !important; }
.w-100{ width: 100% !important; }
.mb-0{ margin-bottom: 0 !important; }

.clearfix::after{
	display: block;
	clear: both;
	content: "";
}

.form-group{
	margin-bottom: 1rem;
}

.form-control{
	display: block;
	width: 100%;
	height: calc(1.5em + .75rem + 2px);
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--field-text);
	background-color: var(--field-bg);
	background-clip: padding-box;
	border: 1px solid var(--border);
	border-radius: .25rem;
}
.form-control:focus{
	color: var(--field-text);
	background-color: var(--field-bg);
	border-color: var(--accent-pale);
	outline: 0;
	box-shadow: 0 0 0 .2rem var(--focus-ring);
}
textarea.form-control{
	height: auto;
}

.col-form-label{
	padding-top: calc(.375rem + 1px);
	padding-bottom: calc(.375rem + 1px);
	margin-bottom: 0;
	font-size: inherit;
	line-height: 1.5;
}

.form-check{
	position: relative;
	display: block;
	padding-left: 1.25rem;
}
.form-check-input{
	position: absolute;
	margin-top: .3rem;
	margin-left: -1.25rem;
}
.form-check-label{
	margin-bottom: 0;
}
.form-check-inline{
	display: inline-flex;
	align-items: center;
	padding-left: 0;
	margin-right: .75rem;
}

.form-check-inline.w-100{
	margin-right: 0;
}

.input-group{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	width: 100%;
}
.input-group > .form-control{
	position: relative;
	flex: 1 1 auto;
	width: 1%;
	margin-bottom: 0;
}
.input-group-prepend{
	display: flex;
	margin-right: -1px;
}
.input-group-append{
	display: flex;
	margin-left: -1px;
}
.input-group-text{
	display: flex;
	align-items: center;
	padding: .375rem .75rem;
	margin-bottom: 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--label-text);
	text-align: center;
	white-space: nowrap;
	background-color: var(--surface-2);
	border: 1px solid var(--border);
	border-radius: .25rem;
}
.input-group > .input-group-prepend > .input-group-text{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group > .input-group-append > .input-group-text{
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.input-group > .form-control:not(:last-child){
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}
.input-group > .form-control:not(:first-child){
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.btn{
	display: inline-block;
	padding: .375rem .75rem;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--text-strong);
	text-align: center;
	vertical-align: middle;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: .25rem;
	-webkit-user-select: none;
	user-select: none;
}
.btn:hover{
	text-decoration: none;
}
.btn:focus{
	outline: 0;
	box-shadow: 0 0 0 .2rem var(--focus-ring);
}
.btn.disabled{
	opacity: .65;
	pointer-events: none;
}

.btn-primary{
	color: var(--on-accent);
	background-color: var(--accent);
	border-color: var(--accent);
}
.btn-primary:hover{
	color: var(--on-accent);
	background-color: var(--accent-hover);
	border-color: var(--accent-hover);
}

.btn-light{
	color: var(--text-strong);
	background-color: var(--surface);
	border-color: var(--surface);
}
.btn-light:hover{
	color: var(--text-strong);
	background-color: var(--surface-hover);
	border-color: var(--border);
}

.btn-link{
	color: var(--accent);
	background-color: transparent;
	border-color: transparent;
}
.btn-link:hover{
	color: var(--accent-dark);
	text-decoration: underline;
}

.btn-sm{
	padding: .25rem .5rem;
	font-size: .875rem;
	border-radius: .2rem;
}
.btn-lg{
	padding: .5rem 1rem;
	font-size: 1.25rem;
	border-radius: 1rem;
}

.btn-group{
	position: relative;
	display: inline-flex;
	vertical-align: middle;
}
.btn-group > .btn{
	position: relative;
	flex: 1 1 auto;
}

.btn-group > .btn:not(.d-none) ~ .btn:not(.d-none){
	margin-left: -1px;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.btn-group > .btn:not(.d-none):has(~ .btn:not(.d-none)){
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.navbar{
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	padding: .5rem 1rem;
}
.navbar > .container{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
}

.navbar-brand{
	display: inline-block;
	padding-top: .3125rem;
	padding-bottom: .3125rem;
	margin-right: 1rem;
	font-size: 1.25rem;
	line-height: inherit;
	white-space: nowrap;
}

.navbar-nav{
	display: flex;
	flex-direction: column;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
}
.nav-link{
	display: block;
	padding: .5rem 1rem;
}
.navbar-nav .nav-link{
	padding-right: 0;
	padding-left: 0;
}

.navbar-nav .dropdown-menu{
	position: static;
	float: none;
	padding: 0 0 .25rem;
	margin: 0 0 .25rem 1rem;
	background-color: transparent;
	border: 0;
	border-left: 1px solid var(--navbar-toggler-border);
	border-radius: 0;
}

.navbar-nav .dropdown-menu .dropdown-item{
	padding: .35rem 1rem .35rem 1.9rem;
	color: var(--navbar-link);
}
.navbar-nav .dropdown-menu .dropdown-item:hover{
	color: var(--navbar-link-active);
	background-color: transparent;
}

.navbar-collapse{
	flex-basis: 100%;
	flex-grow: 1;
	align-items: center;
}

.navbar-toggler{
	padding: .25rem .75rem;
	font-size: 1.25rem;
	line-height: 1;
	background-color: transparent;
	border: 1px solid transparent;
	border-radius: .25rem;
}

.navbar-settings{
	order: 1;
	margin-left: auto;
}
.navbar-toggler{
	order: 2;
	margin-left: .25rem;
}
.navbar-collapse{
	order: 3;
}
@media (min-width: 992px){
	.navbar-settings{
		order: 4;
		margin-left: .5rem;
	}
}

.navbar-settings .nav-link{
	color: var(--navbar-link);
	white-space: nowrap;
}
.navbar-settings .nav-link:hover{
	color: var(--navbar-link-hover);
	text-decoration: none;
}

.navbar-settings .dropdown-menu .dropdown-item{
	color: var(--label-text);
}
.navbar-settings .dropdown-menu .dropdown-item:hover{
	color: var(--text-strong);
	background-color: var(--surface);
}

.navbar-nav .dropdown-menu .dropdown-item.active,
.navbar-settings .dropdown-menu .dropdown-item.active{
	color: var(--accent);
}

.settings-toggle{
	font-size: 1.25rem;
	line-height: 1;
	padding: .5rem .35rem;
}

.navbar-toggler-icon{
	position: relative;
	display: block;
	width: 1.5em;
	height: 2px;
	background-color: currentColor;
}
.navbar-toggler-icon::before,
.navbar-toggler-icon::after{
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	content: "";
	background-color: currentColor;
}
.navbar-toggler-icon::before{ top: -7px; }
.navbar-toggler-icon::after{ top: 7px; }

.bg-dark{
	background-color: var(--navbar-bg) !important;
}

.navbar-dark .navbar-brand{
	color: var(--navbar-brand);
}
.navbar-dark .navbar-nav .nav-link{
	color: var(--navbar-link);
}
.navbar-dark .navbar-nav .nav-link:hover{
	color: var(--navbar-link-hover);
	text-decoration: none;
}
.navbar-dark .navbar-nav .active > .nav-link,
.navbar-dark .navbar-nav .nav-link.active{
	color: var(--navbar-link-active);
}

.navbar-dark .navbar-toggler{
	color: var(--navbar-link);
	border-color: transparent;
}

@media (min-width: 992px){
	.navbar-expand-lg{
		flex-flow: row nowrap;
		justify-content: flex-start;
	}
	.navbar-expand-lg .navbar-nav{
		flex-direction: row;
	}
	.navbar-expand-lg .navbar-nav .nav-link{
		padding-right: .5rem;
		padding-left: .5rem;
	}

	.navbar-expand-lg .navbar-nav .dropdown-menu{
		position: absolute;
		padding: .5rem 0;
		margin: .125rem 0 0;
		background-color: var(--surface-raised);
		border: 1px solid var(--card-border);
		border-radius: .25rem;
	}

	.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item{
		padding: .25rem 1.5rem .25rem 1.9rem;
		color: var(--label-text);
	}
	.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item:hover{
		color: var(--text-strong);
		background-color: var(--surface);
	}

	.navbar-expand-lg .navbar-nav .dropdown-menu .dropdown-item.active,
	.navbar-settings .dropdown-menu .dropdown-item.active{
		color: var(--accent);
	}
	.navbar-expand-lg .navbar-collapse{
		display: flex !important;
		flex-basis: auto;
	}
	.navbar-expand-lg .navbar-toggler{
		display: none;
	}
}

.dropdown{
	position: relative;
}
.dropdown-toggle::after{
	display: inline-block;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}
.dropdown-menu{
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	min-width: 10rem;
	padding: .5rem 0;
	margin: .125rem 0 0;
	font-size: 1rem;
	color: var(--text-strong);
	text-align: left;
	list-style: none;
	background-color: var(--surface-raised);
	background-clip: padding-box;
	border: 1px solid var(--card-border);
	border-radius: .25rem;
}
.dropdown-menu.show{
	display: block;
}

.dropdown-menu-right{
	right: 0;
	left: auto;
}

.dropdown-header{
	display: block;
	padding: .35rem 1.5rem .3rem;
	margin-bottom: .25rem;
	font-size: .85em;
	font-weight: 700;

	color: var(--accent);
	background-color: var(--accent-tint-1);
	border-bottom: 1px solid var(--soft);
	text-transform: uppercase;
	letter-spacing: .04em;
	pointer-events: none;
}

.dropdown-menu > .dropdown-header:first-child{
	margin-top: -.5rem;
}

.dropdown-header + *{
	margin-top: 0;
}
.dropdown-item + .dropdown-header{
	margin-top: .35rem;
}
.dropdown-item{
	position: relative;
	display: block;
	width: 100%;
	padding: .25rem 1.5rem;
	clear: both;
	font-weight: 400;
	color: var(--text-strong);
	text-align: inherit;
	white-space: nowrap;
	background-color: transparent;
	border: 0;
}
.dropdown-item:hover{
	color: var(--text-strong);
	text-decoration: none;
	background-color: var(--surface);
}

.dropdown-item.dropdown-marked{
	background-color: var(--soft);
}
.dropdown-item.dropdown-marked:hover{
	background-color: var(--border);
}

.dropdown-item.active{
	color: var(--accent);
}
.dropdown-item.active::before{
	position: absolute;
	left: .55rem;
	content: "✓";
}

.dropdown-submenu{
	position: relative;
}
.dropdown-submenu > .dropdown-item::after{
	position: absolute;
	right: .75rem;
	content: "‹";
	color: var(--muted);
}
.dropdown-submenu > .dropdown-menu{
	top: 0;
	right: 100%;
	left: auto;
	margin: -.5rem .1rem 0 0;
}

.collapse{
	display: none;
}
.collapse.show{
	display: block;
}

.card{
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
	word-wrap: break-word;
	background-color: var(--surface-raised);
	background-clip: border-box;
	border: 1px solid var(--card-border);
	border-radius: .25rem;
}
.card-header{
	padding: .75rem 1.25rem;
	margin-bottom: 0;
	background-color: var(--card-header-bg);
	border-bottom: 1px solid var(--card-border);
}
.card > .card-header:first-child{
	border-radius: calc(.25rem - 1px) calc(.25rem - 1px) 0 0;
}
.card-body{
	flex: 1 1 auto;
	padding: 1.25rem;
}

.accordion > .card{
	overflow: hidden;
}
.accordion > .card:not(:last-of-type){
	border-bottom: 0;
	border-bottom-right-radius: 0;
	border-bottom-left-radius: 0;
}
.accordion > .card:not(:first-of-type){
	border-top-left-radius: 0;
	border-top-right-radius: 0;
}
.accordion > .card:not(:first-of-type) .card-header:first-child{
	border-radius: 0;
}

.table{
	width: 100%;
	margin-bottom: 1rem;
	color: var(--text-strong);
	border-collapse: collapse;
}
.table th,
.table td{
	padding: .75rem;
	vertical-align: top;
	border-top: 1px solid var(--table-border);
}
.table thead th{
	vertical-align: bottom;
	border-bottom: 2px solid var(--table-border);
}
.table-hover tbody tr:hover{
	background-color: var(--row-hover);
}