html.loading, html.loading body {overflow:hidden;}
html.loading body:after {
	content: url(/img/favicon.svg);
	display: flex;
	position: fixed;
	inset: 0;
	background: #3aa3ac;
	z-index: 1000;
	justify-content: center;
	align-items: center;
}
html.loading.loaded body:after {
	animation: opacity .3s .7s reverse forwards;
}
.logo {
    font-weight: 700;
    color: #2dc08e;
}
body > svg {display: none;}
:has(:not([media="all"])[onload])~body {
  visibility: hidden
}
body {
  background: #F3F3F6;
  display: flex;
  max-width: 660px;
  margin: auto;
  flex-direction: column;
}
button {
  cursor: pointer;
  background: none;
  color: inherit;
  border-radius: 10px;
  min-height: 44px;
  min-width: 44px;
  padding: 0 10px;
  font-size: 15px;
  font-weight: bold;
}

:root:has(#login) {
  app-region: drag;
}
:is(select, textarea, input, button, a) {
  app-region: no-drag;
}
header {
  display: flex;
  width: 100%;
  height: 54px;
  justify-content: space-between;
  z-index: 1;
  align-items: center;
}
body>* {
    animation: opacity .3s;
}

main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* justify-content: center; */
  /* flex: 1; */
  gap: 30px 10px;
  padding: 10px 15px 15px;
}

:is(button, [type="button"], [type="submit"], [type="image"]):hover {
  background-color: rgb(78 104 129 / 10%);
  transition: background-color .3s, scale .3s;
}
:is(button, [type="submit"], [type="button"], [type="image"]):active {
  transition: background-color .3s !important;
  scale: calc((var(--w) - 10) / var(--w) * 100%);
}

#toast {
    position: fixed;
    inset: 10px 0 auto 0;
    margin: auto;
    width: fit-content;
    padding: 10px 20px;
    background: rgb(255 255 255 / 80%);
    border-radius: 20px;
    line-height: 20px;
    font-weight: 500;
    animation: opacity .3s,inDown .3s,  opacity 1s 1s reverse;
    box-shadow: 0 1px 10px 0 rgb(0 0 0 / 10%);
}
#toast:empty {
  display: none;
}

@media (max-width: 400px){
  [type=search]:is(:focus,:not(:placeholder-shown)) {
  right: 0;
  position: absolute;
  width: calc(100% - 30px) !important;
  }
}

#bg {
  position: fixed;
  object-fit: cover;
  height: 100%;
  width: 100%;
  bottom: 0;
  animation: bg 20s forwards;
  animation-timing-function: cubic-bezier(0, 1, 1, 1);
}
#logo {
  margin-top: 170px;
  z-index: 1;
  opacity: 0;
  animation: opacity 1s .5s forwards, inDown 1s .5s;
}

@keyframes bg {
  100% {
    object-position:center bottom;
  }
}
#chart {
    flex: 1;
}
#chart, main > aside {
    background: rgb(23 23 28);
    border-radius: 10px;
}
main > aside {
    width: 250px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
main > aside > div {
    display: flex;
    gap: 10px;
    flex-direction: column;
}
main > aside > div label > input {
    padding: 0;
}
main > aside > div > * {
    padding: 0 10px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    align-items: center;
    gap: 10px;
}
label > :not(input):first-child {
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
label {
  border-radius: 5px;
  padding: 0 8px;
  font-weight: normal;
  display: flex;
  gap: 10px;
  align-items: center;
  width: 100%;
}
label:has(:not([type=radio], [type=checkbox])) {
	cursor: text;
	padding: 0;
	gap: 0;
	width: fit-content;
}

header > a.logo {
    display: flex;
    padding: 15px;
}

main ~ article > * {
    display: flex;
    padding: 10px;
    justify-content: flex-start;
}
@layer layout {
	img {
	    --fit: cover;
	    object-fit: var(--fit);
	    min-width: calc(var(--size) * 1px);
	    width: calc(var(--size) * 1px);
	    aspect-ratio: var(--ratio);
	    border-radius: calc(var(--round) * 1px);
	}
	em {
	    font-size: 15px;
	    color: #90A8AA;
	    font-weight: bold;
	}
	
	button[aria-pressed=true] {
	    background: #000000;
	    pointer-events: none;
	}
	
	input {
	    min-height: 44px;
	}
	
	input[type="search"] {
	    cursor: pointer;
	    background: url('data: image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path stroke="%23000" fill="none" stroke-linecap="round" stroke-width="2.5" d="M11 16c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5Zm7.59 2.59-4.06-4.06"/></svg>') no-repeat 15px center;
	    border-radius: 16px;
	    padding: 0 0 0 54px;
	    /* margin: auto; */
	    height: 54px;
	    width: 54px;
	    font-weight: bold;
	    outline: 0;
	    --focusColor: #fff;
	}
	[type=search]:not(:focus,:placeholder-shown) {
		color:#222;
	}
	[type=search]:is(:focus,:not(:placeholder-shown)) {
		cursor:text;
		height:32px;
		width: calc(100% - 166px);
		font-size:1rem !important;
		border-radius: 15px;
		z-index:1;
		background-position-x: 10px;
		padding-left: 44px;
		transition: background-position-x .2s .3s, padding .4s .3s, border-radius .2s, width .5s;
		background-color:var(--focusColor);
		margin: 4px 15px;
	}
	
	
	@property --loading-opacity {
	    syntax: '<number>';
	    inherits: false;
	    initial-value: 1;
	}
	
	body .loading {
	    overflow: hidden !important;
	    /* background-color: transparent !important; */
	    background-image: 
	        linear-gradient(110deg, 
	            transparent 0%,
	            rgba(243, 243, 246, calc(var(--loading-opacity) * 0.9)) 50%, 
	            transparent 55%
	        ),
	        linear-gradient(
	            rgba(255, 255, 255, var(--loading-opacity)), 
	            rgba(255, 255, 255, var(--loading-opacity))
	        ),
	        var(--src, none) !important;
	    background-size: 300% 100%, cover, var(--fit) !important;
	    background-position: 150% 0, 0 0, center;
	    background-repeat: no-repeat !important;
	    color: transparent !important;
	}
	@keyframes loading {
	    0% { background-position: 150% 0, 0 0, center; }
	    100% { background-position: -150% 0, 0 0, center; }
	}
	body .loading:not(.loaded) {
	    animation: loading 1.5s infinite linear !important;
	}
	body .loaded {
	    transition: --loading-opacity 0.2s ease-in-out !important;
	    --loading-opacity: 0;
	}
	::placeholder {
		font-weight: bold;
	}
}

main > a {
	--w: 310;
	border-radius: 15px;
	min-width: 100%;
}
main > a:has(:hover) {
	padding: 10px;
	margin: -10px;
}
main > a:hover {
	transition: background-color .3s, scale .3s;
	background-color: rgb(78 104 129 / 10%);
}

main > a:active {
	transition: background-color .3s!important;
	scale: calc((var(--w) - 10) / var(--w) * 100%);
}
main > a > section > img {
	--fit: contain;
	border-radius: clamp(5px, 2vw, 15px);
	max-height: clamp(100px, 30vh, 200px);
	background-color: #fff !important;
}
h2 {
	font-weight: 400;
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

section {
	display: flex;
	gap: 10px;
	flex-direction: column;
}
img {
	vertical-align: middle;
}

del {
	color: #90A8AA;
}

header {
	position: sticky;
	top: 0;
	background: rgb(243 243 246 / 80%);
	backdrop-filter: blur(10px);
}

mark {
	position: absolute;
	background: rgb(255 255 255 / 80%);
	backdrop-filter: blur(10px);
	width: clamp(30px, 10vw, 50px);
	height: clamp(30px, 10vw, 50px);
	margin: 5px;
	font-size: clamp(15px, 5vw, 24px);
	color: #3AA4AD;
	font-weight: 900;
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}
mark span {
	font-size: .5em;
}