:root{
	--container-spacing:var(--spacing-7);
	--container-spacing-neg:var(--spacing-neg-7);
	--container-width-max:1200px;
	--container-width-text:680px;
	--container-width:clamp(320px, 100%, calc(var(--container-width-max) - calc(var(--container-spacing) * 2)));

	--radius-none:0;
	--radius-xxs:4px;
	--radius-xs:8px;
	--radius-sm:12px;
	--radius-md:24px;
	--radius-lg:32px;
	--radius-xl:64px;
	--radius-rounded:50%;
}
*{
	box-sizing:border-box;
	scroll-margin-top:var(--spacing-10)
}
html{
	-webkit-text-size-adjust:100%
}
body{
	vertical-align:baseline;
	overflow-x:hidden;
	background-color:var(--bg-surface-white);
	margin:0;
	padding:0;
	border:0;
	outline:0 none;
	font:var(--body-m-regular);
	color:var(--text-body-095);
	position:relative;
	-webkit-font-smoothing:antialiased
}
a{
	color:var(--text-link-default);
	text-decoration:none;
	transition:color .4s, background-color .4s
}
a:hover{
	color:var(--text-link-hover)
}
a:active{
	color:var(--text-link-active)
}
a.link{
	color:var(--text-link-default);
	text-decoration:none;
	transition:color .4s, background-color .4s;
	width:fit-content;
	font-weight:var(--font-weight-medium);
	border-bottom:1px solid transparent
}
a.link:hover{
	color:var(--text-link-hover);
	border-color:var(--text-primary-hover)
}
a.link:active{
	color:var(--text-link-active)
}
table{
	border-spacing:0
}
img{
	width:100%;
	max-width:100%;
	height:auto
}
strong,
th{
	font-weight:inherit;
	text-align:inherit
}
address,
var{
	font-size:inherit;
	font-weight:inherit;
	font-style:inherit;
	display:inline
}
p{
	margin:var(--spacing-4) 0
}
button{
	appearance:none;
	border:0;
	padding:0;
	cursor:pointer;
	font-family:var(--font-primary);
	background:inherit;
	font:inherit;
}
::-webkit-scrollbar{
	width:var(--spacing-1);
	height:var(--spacing-2)
}
body::-webkit-scrollbar{
	width:var(--spacing-2);
	height:var(--spacing-2)
}
::-webkit-scrollbar-track{
	background:var(--surface-03);
	border-radius:var(--radius-xs)
}
::-webkit-scrollbar-thumb{
	background:var(--surface-06);
	border-radius:var(--radius-xs);
	cursor:grab
}

.container{
	width:90vw;
	width:var(--container-width);
	max-width:100%;
	margin:0 auto
}
.container-text{
	width:90vw;
	width:var(--container-width-text);
	max-width:100%;
	margin:0 auto
}

.iframe-16-9{
	position:relative;
	overflow:hidden;
	width:100%;
	padding-top:56.25%
}
.responsive-iframe{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%
}

iframe{
	max-width:100%;
	border:0
}
.text-bold{
	font-weight:var(--font-weight-bold)
}
.hide{
	clip:rect(1px,1px,1px,1px);
	height:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
	width:1px!important;
	z-index:-1000;
	-webkit-user-select:none;
	user-select:none
}
.w100{
	width:100%
}
.overflow-hidden{
	overflow:hidden
}
.line-clamp{
	overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical	
}

#header{
	padding:var(--spacing-4) 0;
	border-bottom:1px solid var(--color-surface);
}
#header .logo{
	width:242px
}

.highlight{
	color:var(--primary-default)
}

.header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--color-surface);
    padding: 6px 12px;
    border-radius: 100px;
}

.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-success);
    box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7);
    animation: pulse 2s infinite;
}

.code{
	font:inherit;
	letter-spacing:inherit;
	font-family: var(--font-code);
    background-color: var(--bg-surface-01);
    color: var(--text-body-095);
    padding:var(--spacing-1);
    border-radius:var(--radius-xs)
}

@keyframes pulse {
    0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0.7); }
    70% { transform: scale(1); box-shadow: 0 0 0 6px rgba(5, 150, 105, 0); }
    100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(5, 150, 105, 0); }
}

footer {
    background-color: var(--color-code-bg);
    color: #94A3B8;
    padding: 4rem 0;
    font-size: 0.9rem;
}

footer a {
    color: white;
}

.footer-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
}



#mrlexndr .hero{
	padding:var(--spacing-7) 0 var(--spacing-9);
	display:grid;
	gap:var(--spacing-5)
}
#mrlexndr .hero .hero-tags{
	display:flex;
    gap:var(--spacing-3);
    font:var(--body-s-regular);
    font-family:var(--font-code);
    color: var(--color-text-secondary);
	order:-1
}
#mrlexndr .hero .description{
	font-family:var(--font-code);
	background:var(--bg-surface-01);
	padding:var(--spacing-5);
	border-radius:var(--radius-xxs)
}
#mrlexndr .hero .details{
	display:grid;
	grid-template-columns:204px 1fr;
	gap:var(--spacing-7);
	font:var(--body-xl-medium)
}
#mrlexndr .hero .details .pic{
	border-radius:var(--radius-xxs)
}
#mrlexndr .hero .details ul{
	max-width:var(--container-width-text);
	margin:0;
	padding:0;
	display:grid;
	gap:var(--spacing-3);
	align-content:baseline;
	color:var(--text-body-07)
}

@media(max-width:1279px){
	:root{
		--container-width-max:100%
	}
}

@media(max-width:767px){
	:root{
		--container-spacing:var(--spacing-4);
		--container-spacing-neg:var(--spacing-neg-4);
	}
}

@media(max-width:576px){	
	#mrlexndr .hero .details{
		grid-template-columns:1fr
	}
	#mrlexndr .hero .details .pic{
		max-width:408px;
		justify-self:center
	}
}