:root{
  --font-family:Arial,"Microsoft JhengHei",sans-serif;
  --font-size:16px;
  --brand-color:#223344;
  --brand-light-color:#3399bb;
  --brand-bg-color:#ccddee;
  --brand-hover-bg-color:#bbccdd;
  --brand-highlight-color:#bf9000;
  --brand-highlight-bg-color:#ffeecc;
  --brand-highlight-hover-bg-color:#eeddbb;
  --heart-bg-color:#cc0000;
  --notif-bg-color:#aa0000;
  --text-color:#444444;
  --text-light-color:#666666;
  --text-hover-color:#000000;
  --like-color:#3069cf;
  --link-color:#3399bb;
  --link-hover-color:#117799;
  --success-color:#008800;
  --error-color:#aa0000;
  --active-color:#008800;
  --inactive-color:#aa0000;
  --normal-gray:#888888;
  --light-gray-0:#999999;
  --light-gray-1:#aaaaaa;
  --light-gray-2:#bbbbbb;
  --light-gray-3:#cccccc;
  --light-gray-4:#dddddd;
  --light-gray-5:#eeeeee;
  --light-gray-6:#f8f8f8;
  --text-line-height:1.75rem;

  --input-neuron-fill:#ddffdd;
  --input-neuron-stroke:#aaddaa;
  --output-neuron-fill:#bbddff;
  --output-neuron-stroke:#99bbdd;
  --expect-value-text:#3399bb;
  --loss-neuron-fill:#ffdddd;
  --loss-neuron-stroke:#ddbbbb;
}
@media screen and (min-width:1000px){
	::-webkit-scrollbar{width:10px;height:10px;}
	::-webkit-scrollbar-button{width:0px;height:0px;}
	::-webkit-scrollbar-thumb{background:var(--brand-color);border:0px none var(--brand-color);}
	::-webkit-scrollbar-thumb:hover,
	::-webkit-scrollbar-thumb:active{background:var(--brand-color);}
	::-webkit-scrollbar-track{background:var(--light-gray-4);border:0px none var(--light-gray-4);}
	::-webkit-scrollbar-corner{background:transparent;}
}
input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--brand-color);
  width:var(--font-size);height:var(--font-size);
  border:1px solid var(--light-gray-4);
  margin:3px;
}
input[type="text"],
input[type="date"],
input[type="email"],
input[type="password"],
textarea, select{
  width:180px;
  font-size:0.9rem;font-family:inherit;
  color:var(--text-color);
  border:1px solid var(--light-gray-4);
  padding:6px;
}
input[type="text"]:focus,
input[type="date"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus, select:focus{
  outline:none;
  border:1px solid var(--normal-gray);
}
textarea{
  line-height:1.25rem;
}
textarea.borderless{
  border:none;
}
textarea.extended{
  height:20px;line-height:20px;resize:none;
}
textarea.extended-larger{
  height:60px;
}
button{
  color:var(--text-color);
  font-weight:bold;
  font-family:var(--font-family);
  border:1px solid var(--light-gray-4);
  background-color:var(--light-gray-5);
  font-size:0.8rem;
  padding:8px 10px;
  cursor:pointer;
}
button:disabled{
  opacity:0.6;
}
a{
  color:inherit;text-decoration:none;
}
a.link, a.linkify{
  color:var(--link-color);
  transition:color 0.25s;
}
a.link:hover, a.link:active,
a.linkify:hover, a.linkify:active{
  color:var(--link-hover-color);
}
a.brand-button{
  display:inline-flex;
  color:var(--brand-color);
  border:1px solid var(--brand-color);
  border-radius:20px;
  font-size:0.85rem;
  font-weight:bold;
  background-color:white;
  padding:10px 15px;
  cursor:pointer;
}
a.brand-button:hover,
a.brand-button:active{
  background-color:var(--brand-bg-color)
}
a.brand-button-small{
  font-size:0.8rem;border-radius:15px;padding:6px 10px;
}
a.button, button.primary{
  border-width:0px;
  border-radius:20px;
  background-color:var(--link-color);
  color:white;
  padding:10px 15px;
  cursor:pointer;
  transition:background-color 0.25s;
}
a.button:hover, a.button:active,
button.primary:hover, button.primary:active{
  background-color:var(--link-hover-color);
}
a.passive-button, button.passive{
  border-width:0px;
  border-radius:20px;
  background-color:var(--link-hover-color);
  color:white;
  padding:10px 15px;
  cursor:pointer;
  transition:background-color 0.25s;
}
a.passive-button:hover, a.passive-button:active,
button.passive:hover, button.passive:active{
  background-color:var(--link-hover-color);
}
a.gray-button, button.gray{
  border-width:0px;
  border-radius:20px;
  background-color:var(--light-gray-5);
  color:var(--text-color);
  padding:10px 15px;
  cursor:pointer;
  transition:background-color 0.25s;
}
a.gray-button:hover, a.gray-button:active,
button.gray:hover, button.gray:active{
  background-color:var(--light-gray-4);
}
body{
  margin:0px;
  font-family:var(--font-family);
  font-size:var(--font-size);
  color:var(--text-color);
}
body>*{
  padding:10px;
}
/* views for centering content */
.view{
  display:block;max-width:1200px;
  margin-left:auto;margin-right:auto;
}
.flex-view{
  display:flex;max-width:1200px;
  margin:0px auto;
}
/* header */
header{
  position:sticky;top:0px;z-index:20;background-color:white;
  border-bottom:1px solid var(--light-gray-4);
  height:40px;
}
header .left{
  display:flex;align-items:center;
  flex:none;width:150px;
}
header .left>.logo{
  width:36px;height:36px;margin-right:3px;
}
header .left>.title{
  font-size:1.5rem;font-weight:bold;color:var(--brand-color);
}
header .right{
  display:flex;justify-content:flex-end;align-items:center;
  flex:auto;
}
header .right>.menu-trigger{
  display:none;position:relative;width:40px;height:40px;
  cursor:pointer;z-index:102;
}
header .right>.menu-trigger>.lines{
  position:absolute;top:50%;left:50%;
  width:20px;height:1px;background-color:var(--text-color);
  transform:translate(-50%,-50%);
}
header .right>.menu-trigger>.lines::before,
header .right>.menu-trigger>.lines::after{
  position:absolute;content:'';
  width:20px;height:1px;
  background-color:var(--text-color);
}
header .right>.menu-trigger>.lines::before{
  transform:translateY(-8px);
  animation:menu-trigger-effect-1 250ms linear;
}
@keyframes menu-trigger-effect-1{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(-5px) rotate(0deg); }
}
header .right>.menu-trigger>.lines::after{
  transform:translateY(8px);
  animation:menu-trigger-effect-2 250ms linear;
}
@keyframes menu-trigger-effect-2{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(5px) rotate(0deg); }
}
header .right>.close{
  position:fixed;top:0px;right:0px;
}
header .right>.close>.lines{
  visibility:hidden;
}
header .right>.close>.lines::before,
header .right>.close>.lines::after{
  visibility:visible;
  transform-origin:center center;
  transform:translateY(0);
  transition:all 250ms linear;
}
header .right>.close>.lines::before{
  transform:rotate(-45deg);
  animation:menu-trigger-effect-3 250ms linear;
}
@keyframes menu-trigger-effect-3{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(0) rotate(-45deg); }
}
header .right>.close>.lines::after{
  transform:rotate(45deg);
  animation:menu-trigger-effect-4 250ms linear;
}
@keyframes menu-trigger-effect-4{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(0); }
  100% { transform: translateY(0) rotate(45deg); }
}
header .right>.menu{
  display:flex;align-items:center;
  z-index:101;
}
header .right>.menu>.item{
  padding:8px 10px;cursor:pointer;
  border-bottom:2px solid white;
}
header .right>.menu>.item:hover,
header .right>.menu>.item:active{
  color:var(--text-hover-color);
}
header .right>.menu>.current{
  border-bottom-color:var(--text-color);
  animation:menu-item-effect 1s 1;
}
@keyframes menu-item-effect{
  from{border-bottom-color:white}
  to{border-bottom-color:var(--text-color);}
}
header .right>.menu-backdrop{
  display:none;
  position:fixed;top:0px;left:0px;width:100vw;height:100vh;
  z-index:100;background-color:rgba(0, 0, 0, 0.1);
}
@media (max-width:1000px){
  header .right>.menu{
    display:none;
  }
  header .right>.menu-trigger{
    display:block;
  }
  header .right>.close+.menu{
    display:block;width:100%;padding:10px 0px;background-color:white;
    position:fixed;top:0px;left:0px;box-shadow:0px 0px 3px var(--normal-gray);
  }
  header .right>.close+.menu>.item{
    display:block;
    width:130px;margin:0px auto;text-align:center;
  }
  header .right>.close~.menu-backdrop{
    display:block;
  }
}
header .right>.separator{
  background-color:var(--light-gray-1);
  width:1px;height:30px;margin:0px 12px;
}
header .right>.action{
  position:relative;
  display:flex;align-items:center;
  padding:0px 10px;
}
header .right>.action>.notif-bell{
  width:36px;height:36px;margin-right:12px;
  border-radius:50%;background-color:var(--light-gray-5);
  background-image:url("/images/notification.png");
  background-size:60% 60%;background-repeat:no-repeat;background-position:center center;
  position:relative;cursor:pointer;
}
header .right>.action>.opened{
  background-color:var(--brand-bg-color);transform:rotate(10deg);
}
header .right>.action>.notif-bell>.count{
  position:absolute;top:-6px;right:-6px;
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;border-radius:50%;font-size:0.7rem;font-weight:bold;
  background-color:var(--notif-bg-color);color:white;
  display:none;
}
header .right>.action>.notif-popup{
  position:absolute;z-index:200;font-size:0.9rem;
  width:250px;padding:10px;top:40px;left:-165px;
  background-color:white;box-shadow:0px 0px 10px var(--light-gray-4);
  max-height:350px;overflow-y:auto;
}
@media screen and (min-width:1000px){
  header .right>.action>.notif-popup::-webkit-scrollbar{
    width:4px;height:4px;
  }
}
header .right>.action>.notif-popup>.notif{
  display:flex;align-items:flex-start;
  padding:10px;padding-bottom:15px;
}
header .right>.action>.notif-popup>.notif>.avatar{
  width:36px;height:36px;border-radius:50%;flex:none;
  margin-right:10px;
}
header .right>.action>.notif-popup>.notif>.text{
  flex:auto;line-height:1.3rem;
}
header .right>.action>.notif-popup>.notif>.text>.time{
  color:var(--normal-gray);
}
header .right>.action>.notif-popup>.separator{
  background-color:var(--light-gray-5);height:1px;
  margin-bottom:10px;
}
header .right>.action>.user{
  display:block;width:36px;height:36px;
}
header .right>.action>.user>.avatar{
  visibility:hidden;width:100%;height:100%;
  border-radius:50%;
}
/* nav */
nav{
  position:sticky;top:61px;z-index:10;
  border-bottom:1px solid var(--light-gray-4);
  white-space:nowrap;overflow-x:auto;
  background-color:white;
}
nav .menu{
  display:flex;align-items:center;
}
nav .menu>.item{
  padding:0px 10px;cursor:pointer;
  color:var(--light-gray-0);
}
nav .menu>.item:first-child{
  padding-left:0px;
}
nav .menu>.item:hover,
nav .menu>.item:active{
  color:var(--text-hover-color);
}
nav .menu>.current{
  color:var(--text-color);
}
/* main */
main{
  background-color:var(--light-gray-5);
  border-bottom:1px solid var(--light-gray-4);
  padding:10px 0px;line-height:var(--text-line-height);
  font-size:0.95rem;
}
/* main>section only used in <main> */
section{
  padding:20px;margin:20px;background-color:white;
  box-sizing:border-box;
}
section .headline{
  width:280px;max-width:100%;padding-bottom:5px;border-bottom:1px solid var(--normal-gray);
  font-weight:bold;margin-bottom:20px;
  font-size:1.2rem;
}
section summary{
  margin-bottom:20px;
}
/* section>.part */
section>.part{
  margin-bottom:20px;
}
section>.part>.title{
  font-weight:bold;margin-bottom:10px;
}
section>.part>.content>div{
  margin-bottom:8px;
}
section>.part>.youtube-video{
  position:relative;
  padding-bottom:56.25%;
  padding-top:30px;
  height:0px;margin:20px 0px;
  overflow:hidden;
}
section>.part>.youtube-video iframe,
section>.part>.youtube-video object,
section>.part>.youtube-video embed{
  position:absolute;z-index:0;
  top:0px;left:0px;width:100%;height:100%;
}
/* section>.tags */
section>.tags{
  display:flex;
  white-space:nowrap;overflow-x:auto;
}
section>.tags>.tag{
  padding:5px;margin-right:10px;cursor:pointer;font-weight:bold;
}
section>.tags>.current{
  border-bottom:1px solid var(--normal-gray);
}
/* section>form */
section>form{
	font-size:0.95rem;
}
section>form>.field{
	display:flex;align-items:center;
	margin-bottom:10px;
}
section>form>.field>.field-name{
	margin-right:10px;
}
section>form>.field .error,
section form .error{
	margin:0px 5px;font-size:0.9rem;
	color:var(--error-color);
}
/* section .loadmore, section .createmore */
section .loadmore, section .createmore{
  cursor:pointer;
  text-align:center;padding:8px 10px;border-top:1px solid var(--light-gray-4);
  margin:20px 0px;
}
/* footer */
footer{
  display:flex;flex-wrap:wrap;width:600px;max-width:85%;
  margin:0px auto;padding:30px 0px;
  font-size:0.9rem;
}
footer>.contact{
  flex:auto;text-align:left;
  line-height:1.5rem;margin-bottom:10px;margin-right:15px;
}
footer>.contact>div>img{
  vertical-align:middle;
}
footer>.docs{
  flex:auto;text-align:left;
  line-height:1.5rem;margin-bottom:10px;margin-right:15px;
}
footer>.social{
  flex:none;width:150px;margin-bottom:10px;
}
footer>.social>a{
  margin-right:5px;
}
footer>.social>a>img{
  border-radius:50%;width:40px;height:40px;
  filter:brightness(0) saturate(100%) invert(19%) sepia(20%) saturate(911%) hue-rotate(169deg) brightness(93%) contrast(97%);
}
/* .instant */
.instant{
  position:absolute;z-index:900;font-size:0.8rem;padding:8px;white-space:nowrap;
  background-color:black;color:white;
  animation:fade-out 3s;
}
.instant-longer{
  animation:fade-out 10s;
}
@keyframes fade-out{
  0%{opacity:1}
  100%{opacity:0}
}
/* .popup */
.popup{
  position:absolute;z-index:5;font-size:0.9rem;
  padding:10px;background-color:white;box-shadow:0px 0px 10px var(--light-gray-4);
}
.popup-mask{
	position:fixed;top:0px;left:0px;width:100%;height:100vh;height:100dvh;
	background-color:transparent;padding:0px;border:0px;
	z-index:4;
}
/* .dialog */
.dialog{
  display:flex;flex-direction:column;
	position:fixed;top:50px;left:calc(50% - 320px);
	width:640px;height:75vh;height:75dvh;max-height:600px;padding:0px;
	background-color:white;
	z-index:501;
}
.small-dialog{
  left:calc(50% - 150px);
  width:300px;height:auto;font-size:0.95rem;
}
.dialog-mask{
	position:fixed;top:0px;left:0px;width:100%;height:100vh;height:100dvh;
	background-color:black;opacity:0.5;padding:0px;border:0px;
	z-index:500;
}
@media (max-width:800px){
	.dialog{
		top:0px;left:0px;width:100%;height:100vh;height:100dvh;max-height:none;
	}
}
/* .dialog>.header */
.dialog>.header{
	display:flex;flex:none;
	padding:10px;font-size:1.2em;font-weight:bold;
	border-bottom:1px solid var(--light-gray-4);
}
.dialog>.header>.title{
	flex:auto;
}
.dialog>.header>.close{
  position:absolute;width:40px;height:40px;top:0px;right:0px;cursor:pointer;
  background-color:rgba(255, 255, 255, 0.5);background-image:url("/images/close.svg");background-size:60% 60%;background-repeat:no-repeat;background-position:center center;
}
/* .dialog>.main */
.dialog>.main{
	padding:10px;flex:auto;overflow-y:auto;
}
/* .dialog>.main>.like-users */
.dialog>.main>.like-users{
  line-height:1.75rem;
}
.dialog>.main>.like-users>.like-user{
  display:flex;align-items:center;gap:5px;
  margin:10px 0px;
}
.dialog>.main>.like-users>.like-user:first-child{
  margin-top:5px;
}
.dialog>.main>.like-users>.like-user>a>.avatar{
  visibility:hidden;width:30px;height:30px;
	border-radius:50%;
	vertical-align:middle;
}
.dialog>.main>.like-users>.like-user>.user{
  display:block;
}
.dialog>.main>.like-users>.user:hover,
.dialog>.main>.like-users>.user:active{
  text-decoration:underline;
}
/* .dialog>.footer */
.dialog>.footer{
	flex:none;
	padding:10px;text-align:right;
	border-top:1px solid #dddddd;
}
.dialog>.footer>.error{
	text-align:left;
	color:#aa0000;font-size:0.8em;
}
.dialog>.footer>.buttons{
	display:flex;justify-content:flex-end;align-items:center;
}
.dialog>.footer>.buttons>button{
  margin-left:5px;
}
/* .loading */
.loading{
	position:fixed;top:0px;left:0px;
	width:100%;height:100vh;z-index:1000;padding:0px;
	background-color:rgba(255,255,255,0);
}
.loading>.progress{
	width:0%;height:2px;
	background-color:var(--brand-color);
	animation:progress 3s;
	animation-iteration-count:infinite;
	animation-fill-mode:forwards;
}
@keyframes progress{
	0%{width:0%;}
	100%{width:100%;}
}
/* hide */
.hide{
  display:none !important;
}
/* invisible */
.invisible{
  visibility:hidden !important;
}
/* disable-scroll */
.disable-scroll-y{
  overflow-y:hidden;
}
/* scrollable */
.scrollable{
  overflow:auto !important;
}
.scrollable-x{
  overflow-x:auto !important;
}
.scrollable-y{
  overflow-y:auto !important;
}
/* basic styling */
.pointer{
  cursor:pointer;
}
.bold{
  font-weight:bold;
}
.underline{
  text-decoration:underline;
}