html,body{font-size:16px;background-color:#fafafa;color:#1e2936;line-height:1.5;font-family:Rubik,Noto Sans TC,Arial,Helvetica Neue,Helvetica;margin:0;height:100%}body{display:flex;flex-direction:column;min-height:100dvh}::selection{background-color:#2f8dbd1a;color:#2f8dbd}main,header{width:100%;max-width:960px;margin-left:auto;margin-right:auto}header,footer{padding:2rem 0}header{display:flex;justify-content:space-between;align-items:flex-end}.nav{margin:0}.nav ul{list-style:none;gap:1rem;display:flex;flex-flow:row wrap;justify-content:center;padding:0;margin:0}.nav li{position:relative;color:#227093;padding:.5rem}.nav li:hover{color:#2f8dbd}.nav li:hover .icon{transform:scale(1.15)}.nav a{line-height:1;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-decoration:none}.nav a:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0}.nav a[aria-current=page]{color:#1e2936}main.home{flex:1;display:flex;flex-direction:column;justify-content:center}footer{text-align:center}footer p{color:#677388}footer .footer-separator{margin:0 .5rem}a{color:#227093;text-decoration-style:underline;text-decoration-thickness:.1em;text-underline-offset:.15em}a:hover{color:#2f8dbd;text-decoration:none}.text-grey{color:#677388}.text-body{color:#3e4a59!important}.text-primary{color:#227093!important}.text-purple{color:#7d3fa1!important}.visibility-hidden{position:absolute!important;height:1px!important;width:1px!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important}.logo{width:100%;max-width:420px}h1,h2,h3,h4,h5{margin-top:1lh;margin-bottom:.25lh}h1 a,h2 a,h3 a,h4 a,h5 a{color:#1e2936}h1 a:hover,h2 a:hover,h3 a:hover,h4 a:hover,h5 a:hover{color:#677388}h1{font-size:3rem;color:#227093;text-align:center;font-weight:600}h2{font-size:2rem;font-weight:600}hr~h2{text-align:center;margin:2rem 0 1.5rem}h3{font-size:1.5rem;font-weight:500}h4{font-size:1.25rem;font-weight:500}h4 a{color:#227093}h5{font-weight:500;font-size:1.1rem}p,li{color:#3e4a59}small{transform:scale(.8);line-height:1}blockquote{background:#fff;padding:1rem 2rem .5rem;margin:3rem 2rem;border-left:6px solid #677388}blockquote p{color:#1e2936}blockquote p span{color:#677388;margin-top:12px;font-size:.9rem;display:block;text-align:right}code{background-color:#fff;padding:3px 6px;font-size:.8rem;border-radius:2px;color:#677388}pre{padding:2rem;background-color:#f5f5f5;border-radius:2px}pre code{background-color:inherit;padding:initial;font-size:inherit;color:inherit}figure img{width:100%}p{line-height:1.4;margin-top:.5lh;margin-bottom:.25lh}p:empty{display:none}p.subTitle{color:#677388;font-size:.975rem;margin-top:.5rem}p>strong{font-weight:600;color:#1e2936}p>em{font-weight:500;font-style:normal;background-color:#feca5733;padding:2px 4px}p img{margin:0 auto 20px;max-width:80%;display:block}p~p{margin-bottom:16px}time{margin-left:4px}li{padding-bottom:2px}li>strong{color:#1e2936;font-weight:500;padding:0 2px;border-bottom:2px #2f8dbd solid}li>em{font-weight:500;font-style:normal;background-color:#feca5733;padding:2px 4px}li p{margin-bottom:4px}li ul{margin-bottom:1rem}.task-list{list-style:none}.task-list label{margin-bottom:0}.task-list input{margin-right:6px}table th{font-weight:bolder;text-align:center;background-color:#f5f5f5;padding:6px 12px}table td{border-bottom:1px solid #677388;padding:4px 12px;font-size:.95rem}.callout{font-weight:500;text-align:center;font-size:1.2rem;padding:3rem 0;color:#227093}.landing{display:flex;flex-direction:column;align-items:center;justify-content:center}.landing .nav{margin:2rem 0}.landing .nav li{display:flex;flex-direction:column;align-items:center;gap:.5rem}.landing .nav span{display:block;font-size:14px;line-height:100%;color:#677388}.icon{display:inline-flex;width:48px;height:48px;background-color:currentColor;-webkit-mask-image:var(--icon-url);mask-image:var(--icon-url);-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;transition:transform .3s cubic-bezier(.4,0,.2,1)}header .icon{width:32px;height:32px}.goal{padding:2px 6px;background-color:#7d3fa1;color:#fff}.slogan{margin-top:1rem}.post{margin:5rem 0;display:flex;flex-direction:column;gap:1rem}.post:not(:last-child):after{content:"";display:block;width:30%;height:1px;background:#c8d6e5;margin:5rem auto 0}.meta{display:flex;gap:1.5rem;font-size:.8rem;color:#677388}.meta .meta-date{display:flex;gap:.25em;align-items:center}.meta .meta-date:before{content:"";mask-image:url(/icons/icon-calendar.svg);mask-size:cover;width:1.25em;height:1.25em;background-color:currentColor}.meta .meta-tags{display:flex;gap:.5em;align-items:center;list-style:none;margin:0;padding:0}.meta .meta-tags:before{content:"";mask-image:url(/icons/icon-tag.svg);mask-size:cover;width:1.25em;height:1.25em;background-color:currentColor}.meta .tag{color:inherit;margin-right:.5em}.meta .tag:hover{color:#3e4a59;text-decoration:none}.metadata-wrapper{text-align:center;margin:1rem 0 3rem}.pagination-wrapper{text-align:center;margin-bottom:3rem}.pagination-wrapper a{display:inline-block}.pagination-wrapper .pagination-next{margin-left:.75rem}section.esther{position:relative;margin-left:1rem;margin-bottom:1rem;padding:.5rem 2rem;border-left:3px solid #227093}section.esther:before{content:"";display:block;left:-1.125rem;top:0;background-color:#227093;background-image:url(/icons/icon-bubble.svg);background-size:80%;background-position:center;background-repeat:no-repeat;border-radius:2px;position:absolute;width:32px;height:32px}section.esther h2{display:none}hr{margin:5rem auto;width:30%}hr~p,hr~ul,hr~ol{border:0!important;margin-left:0!important;padding:0 0 .5rem!important}hr~ul,hr~ol{padding-left:2rem!important}hr~ul:before,hr~ol:before{display:none}#timeline{display:none}#experience~p span,#timeline~p span{margin-right:16px}#experience~p span:before,#timeline~p span:before{content:"";display:inline-block;width:16px;height:16px;border-radius:50%;background-color:#227093;vertical-align:text-top;margin-right:4px}#experience~p .study:before,#timeline~p .study:before{background-color:#7d3fa1}#experience~ul,#timeline~ul{margin:10px auto}#experience~ul li,#timeline~ul li{position:relative;padding-left:60px;list-style-type:none;color:#3e4a59;font-size:.8rem;line-height:1.6}#experience~ul li span,#experience~ul li strong,#timeline~ul li span,#timeline~ul li strong{font-size:1rem}#experience~ul li:not(:last-child):before,#timeline~ul li:not(:last-child):before{content:"";position:absolute;background-color:#95a5a6;opacity:.4;height:95%;width:3px;display:block;left:42px;top:25px}#experience~ul li:not(:last-child),#timeline~ul li:not(:last-child){margin-bottom:30px}#experience~ul li strong,#timeline~ul li strong{border-bottom:0;color:#1e2936}#experience~ul li em,#timeline~ul li em{font-weight:500}#experience~ul li span,#timeline~ul li span{text-align:right;position:absolute;left:-30px;font-weight:700;color:#227093;width:80px}#experience~ul li:last-child span,#timeline~ul li:last-child span{color:#3e4a59}#experience~ul li .study,#timeline~ul li .study{color:#7d3fa1}.designProcess{margin:2rem auto 0;display:flex;flex-flow:row wrap;width:100%;justify-content:center}.designProcess-arrow{padding-top:8%}.designProcess-step{width:266.6666666667px;text-align:center}.designProcess-step h3{text-align:center;border-radius:50%;background-color:#fff;border-width:10px;border-style:solid;width:200px;height:200px;font-size:1.3rem;display:flex;flex-direction:column;justify-content:center;align-content:center;box-shadow:0 0 5px 1px;margin:0;padding:0}.designProcess-step p{text-align:center;margin-top:1.5rem;font-size:.9rem;line-height:1.3}.designProcess div:nth-child(1){color:#3e4a59;border-color:#3e4a59}.designProcess div:nth-child(2){color:#3e4a59;border-color:#3e4a59}.designProcess div:nth-child(3){color:#7d3fa1;border-color:#7d3fa1}.designProcess div:nth-child(4){color:#7d3fa1;border-color:#7d3fa1}.designProcess div:nth-child(5){color:#227093;border-color:#227093}.designProcess.for-4 .designProcess-step{width:180px}.designProcess.for-4 .designProcess-step h3{width:160px;height:160px;font-size:1.1rem;border-width:8px}.designProcess.for-4 .designProcess-arrow{padding-top:6%}.playground,.casestudies{display:flex;flex-flow:row wrap;list-style:none;margin:0!important;padding:0;width:100%;justify-content:flex-between;gap:1rem;list-style-type:none}.playground li,.casestudies li{box-sizing:border-box;width:calc((960px - 4rem)/5);height:120px;text-align:center;border-radius:4px;display:flex;flex-flow:row nowrap;align-items:center;justify-content:center;position:relative;overflow:hidden;transition:background-color .3s ease}.playground a,.casestudies a{font-size:1.2rem;color:#fafafa;text-align:center;font-weight:400;padding:0 20px;line-height:1.25;text-decoration:none}.playground a:after,.casestudies a:after{content:"";position:absolute;width:100%;height:100%;top:0;left:0}.playground a img,.casestudies a img{width:100%}.playground a span,.casestudies a span{font-size:.725rem;position:absolute;top:6px;left:6px;color:#7d3fa1;line-height:1.1;background-color:#fff;border-radius:2px;padding:.1em .2em}.playground.js li,.casestudies.js li{background-color:#7d3fa1}.playground.js li:hover,.casestudies.js li:hover{background-color:#6f388f}.playground.wiki li,.casestudies.wiki li{background-color:#227093}.playground.wiki li:hover,.casestudies.wiki li:hover{background-color:#1d607e}.casestudies{justify-content:center}.casestudies li{width:217.5px;height:154px;border:6px solid #677388;padding:0;margin:0}.casestudies a{transition:border-color .3s cubic-bezier(.4,0,.2,1);padding:0;height:100%}.casestudies a:hover{border-color:#7d3fa1}.casestudies a span{font-size:.7rem;padding:4px;color:#677388}.casestudies a img{object-fit:cover}.case{background-color:#fff;padding:1rem;border-radius:2px;box-shadow:0 0 10px 1px #0000001a;margin:1rem 0 2rem}.cover-image img{width:100%}iframe{border:0}.list-column{padding:0;margin-left:1rem}@media screen and (min-width:768px){.list-column{column-count:2}}.content-column{margin-top:2rem;margin-bottom:2rem}h2+.content-column{margin-top:0}@media screen and (min-width:768px){.content-column{display:flex;gap:2rem}.content-column .content-column-item{flex:1}.content-column .content-column-item h3{margin-top:0}}.astro-code{padding:1rem}.cards{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:2rem}.cards .card{display:flex;flex-direction:column;align-items:flex-start}.cards .card h3{margin-bottom:0;margin-top:.5em;color:#677388}.cards .card p{color:#3e4a59;margin-top:.5em}.cards .card img{width:calc(100% - 16px);border-radius:24px;border:8px solid #677388}.cards .card img:hover{border-color:#7d3fa1}.cards .card .card-links{display:flex;gap:1rem;list-style:none;margin:0;padding:0}@media screen and (max-width:960px){body{padding:24px 36px}.playground a{width:calc((100vw - 120px) / 3)}.logo:before{content:"J";position:absolute;display:block;font-size:3rem;font-weight:700;top:-36px;color:#fff;background-color:#227093;opacity:.6;border-radius:2px;padding:6px 16px;line-height:1}.logo:hover:before{opacity:1}.logo img{display:none}}@media screen and (max-width:400px){body{padding:24px;font-size:14px}h1,h2,h3,h4{text-align:center}.playground a{width:calc((100vw - 72px)/2)}}