:root{
	--s:0.3s;
	--font:14px;
	--width:960px;
	--radius:16px;
	--padding:8px;
	--znay:#01f030;
	--color:rgba(0,0,0,0.8);
	--hover:rgba(0,0,0,0.1);
	--active:rgba(0,0,0,0.2);
	--shadow:0px 2px 4px rgba(0,0,0,0.2);
}
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-thumb{background:var(--active); border-radius:var(--radius);}
::-webkit-scrollbar-thumb:hover{background:var(--color);}

/*icon*/
[icon="menu"]{background-image:url("/images/menu.svg");}
[icon="home"]{background-image:url("/images/home.svg");}
[icon="play"]{background-image:url("/images/play.svg");}
[icon="auto"]{background-image:url("/images/auto.svg");}
[icon="login"]{background-image:url("/images/login.svg");}
[icon="language"]{background-image:url("/images/language.svg");}
[icon="favorite"]{background-image:url("/images/favorite.svg");}
[icon="info"]{background-image:url("/images/info.svg");}
[icon="help"]{background-image:url("/images/help.svg");}
[icon="back"]{background-image:url("/images/back.svg");}
[icon="next"]{background-image:url("/images/next.svg");}
[icon="voice"]{background-image:url("/images/voice.svg");}
[icon="muted"]{background-image:url("/images/muted.svg");}
[icon="up"]{background-image:url("/images/up.svg");}
[icon="down"]{background-image:url("/images/down.svg");}
[icon="scroll"]{background-image:url("/images/down.svg");}

/*main*/
*{
	outline-style:none;
	box-sizing:border-box;
	user-select:none;
	-webkit-user-drag:none;
	line-height:normal;
	scroll-margin-top:64px;/*высота #console*/
}
@font-face{
	font-family:"Inter";/*Inter Tight (cyrillic-ext + latin-ext)*/
	font-display:swap;
	font-weight:normal;/*400*/
	src:url("/inter.woff2") format("woff2");/*Inter Tight*/
}
@font-face{
	font-family:"Inter";
	font-display:swap;
	font-weight:bold;/*600*/
	src:url("/inter.bold.woff2") format("woff2");/*Inter Tight*/
}
body,button,input,text{
	font-family:"Inter";
	font-size:var(--font);
}
body{
	padding:0px;
	margin:0px;
	-webkit-tap-highlight-color:transparent;
}
sticky{
	z-index:1;
	display:block;
	position:sticky;
	top:0px;
	height:0px;
}
strong{
	display:block;
	margin-bottom:24px;
	font-weight:bold;
	font-size:24px;
	font-weight:normal;
}

/*button*/
button{
	min-width:48px;
	height:48px;
	color:var(--color);
	padding:0px 24px 0px 48px;
	margin:0px;
	border:none;
	cursor:pointer;
	font-size:18px;
	border-radius:48px;
	font-weight:bold;
	background-repeat:no-repeat;
	background-position:12px 12px;
	background-color:rgba(0,0,0,0.05);
	vertical-align:middle;
	transition:var(--s);
}
button:is(:hover,:focus){background-color:var(--hover);}
button:active{background-color:var(--active);}
button:disabled{
	opacity:0.5;
	cursor:default;
	background-color:transparent;
}

/*console*/
#console{
	height:64px;
	padding:var(--padding);
	text-align:center;
	transition:var(--s);
}
#console[glass]{
	backdrop-filter:blur(6px);
	box-shadow:0px 0px 20px rgba(0,0,0,0.2);
	background:linear-gradient(to top,rgba(1,240,48,0.5),var(--znay));
}
#console > div{
	display:inline-block;
	width:var(--width);
	line-height:0px;
}
#console a{
	cursor:pointer;
	display:inline-block;
	width:48px;
	height:48px;
	border-radius:48px;
	background-position:center;
	background-repeat:no-repeat;
	transition:var(--s);
}
#console a:hover{
	border-radius:var(--radius);
	background-color:var(--hover);
}
#console a:active{background-color:var(--active);}
#console a[icon="menu"]{float:left;}
#console a[icon="play"]{float:right;}
#console a.logo{
	width:144px;
	background-size:96px;
	background-image:url("/images/logo.svg");
}

/*body*/
#body{
	display:flex;
	position:absolute;
	inset:0px;
	min-width:360px;
	overflow-x:auto;
	overflow-y:hidden;
	scroll-snap-type:x mandatory;
	opacity:0;
	transition:opacity var(--s);
}
#body::-webkit-scrollbar{display:none;}
#body > div{
	position:relative;
	flex:0 0 100%;
	height:100%;
	overflow-x:hidden;
	overflow-y:auto;
	scroll-snap-align:start;
	scroll-snap-stop:always;
	scroll-margin-top:100px;
}
#body > div > center{
	position:relative;
	display:block;
	scroll-margin-top:64px;
	width:var(--width);
	margin:0px auto;
}
#body > div > landing{
	display:grid;
	position:relative;
	place-items:center;
	text-align:center;
	height:100svh;
	padding:64px;
	font-size:50px;
	line-height:50px;
	font-weight:bold;
	background:var(--znay);
}
#tile{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
	gap:10px;
	padding:24px 0px;
}
#tile a{
	display:flex;
	aspect-ratio:9/16;
	align-items:flex-end;
	justify-content:center;
	cursor:pointer;
	padding:16px;
	font-weight:bold;
	text-decoration:none;
	background-repeat:no-repeat;
	background-size:contain;
	box-shadow:var(--shadow);
	border-radius:var(--radius);
	transition:var(--s);
}
#tile a:hover{
	background-color:var(--hover);
}

/*menu*/
#menu{
	flex:0 0 250px !important;
	padding:var(--padding);
	background:#f6f6f6;
	font-weight:bold;
}
#menu > a{
	cursor:pointer;
	display:block;
	line-height:48px;
	padding-left:56px;
	border-radius:48px;
	background-position:12px 12px;
	background-repeat:no-repeat;
	transition:var(--s);
}
#menu > a:hover{
	border-radius:var(--radius);
	background-color:var(--hover);
}
#menu > a:active{background-color:var(--active);}

/*play*/
#player{
	height:100%;
	aspect-ratio:9/16;
	position:relative;
	margin:0px auto;
	overflow:hidden;
	border-radius:var(--radius);
}
video{
	width:100%;
	height:100%;
	object-fit:cover;
	margin:0px auto;
}
div.panel{
	position:absolute;
	left:24px;
	right:24px;
	height:64px;
	line-height:48px;
	border-radius:48px;
	padding:var(--padding);

	font-weight:bold;
	font-size:24px;
	text-align:center;

	backdrop-filter:blur(20px);
	box-shadow:0px 0px 20px rgba(0,0,0,0.2);
	background:radial-gradient(rgba(255,255,255,0.8),transparent);
}
div.panel a{
	cursor:pointer;
	display:inline-block;
	width:48px;
	height:48px;
	border-radius:48px;
	background-position:center;
	background-repeat:no-repeat;
	transition:var(--s);
}
div.panel a:hover{background-color:var(--hover);}
div.panel a:active{background-color:var(--active);}
#info{
	position:absolute;
	overflow-y:auto;
	max-height:200px;
	inset:auto 24px -200px 24px;
	border-radius:24px;
	padding:24px;
	backdrop-filter:blur(20px);
	box-shadow:0px 0px 20px rgba(0,0,0,0.2);
	background:radial-gradient(rgba(255,255,255,0.8),transparent);
	transition:var(--s);
}

/*info (https://codepen.io/tutsplus/pen/WROvdG)*/
[info]{
	position:relative;
	overflow:visible !important;
}
[info]::before,[info]::after{
	display:none;
	position:absolute;
	text-transform:none;
	left:50%;
}
[info]::before{
	content:"";
	border:10px solid transparent;
}
[info]::after{
	width:auto;
	z-index:3;
	color:#fff;
	content:attr(info);
	text-align:left;
	overflow:hidden;
	padding:10px;
	background:#333;
	white-space:pre;
	line-height:normal;
	border-radius:var(--radius);
	font-size:var(--font);
	box-shadow:var(--shadow);
	transition:var(--s);
}
[info][up]::before{bottom:100%; border-bottom-width:0; border-top-color:#333; transform:translate(-50%,-10px);}
[info][up]::after{bottom:calc(100% + 5px); transform:translate(-50%,-10px);}
[info]:not([up])::before{top:100%; border-top-width:0; border-bottom-color:#333; transform:translate(-50%,10px);}
[info]:not([up])::after{top:calc(100% + 5px); transform:translate(-50%,10px);}
[info][disabled]::before,[info][disabled]::after{display:none !important;}
[info]:hover::before,[info]:hover::after{display:block; animation:info var(--s) ease-out forwards;}
@keyframes info{to{transform:translate(-50%,0);}}


@media only screen and (max-width:1000px){
	:root{--width:100%;}
	::-webkit-scrollbar{display:none;}
	/*#body > div > p{padding:16px;}*/
	#tile{padding:var(--padding);}
	#play{scroll-snap-type:y mandatory;}
	#play > :is(div,p){
		scroll-snap-align:start;
		scroll-snap-stop:always;
	}
	#player{
		width:100%;
		border-radius:0px;
	}
	[icon="scroll"]{background-image:url("/images/swipe.svg");}
}