:root{--root: #14131e;--surface0: #1f1d2d;--surface1: #242336;--surface2: #353553;--surface3: #494764;--surface4: #555275;--accent-dim: #7e8b5a;--accent: #afc772;--foreground0: #c8d5f1;--foreground1: #949bb9;--foreground2: #747a9c;--blue-bg: #70b6db20;--link: #70b6db;--link-hover: #89dceb;--max-content-width: 1000px;--max-reading-width: 700px;--max-content-height: 800px;--font-size-text: 16px;--font-size-title: 64px;--font-size-heading: 36px}*{box-sizing:border-box;padding:0;margin:0;scroll-behavior:smooth}body,html{font-family:JetBrains Mono,Monaco,monospace;background-color:var(--root);color:var(--foreground0);margin:0;padding:0;overflow:hidden}vim-scroll-container{scroll-snap-type:y mandatory;display:flex;flex-direction:column;height:100vh;overflow:scroll;scrollbar-color:var(--accent-dim) transparent;scrollbar-width:thin}section,showcase-project{min-height:100vh;flex:none;display:flex;justify-content:center;align-items:center}section[snap]>div,showcase-project[snap]>div{max-width:var(--max-content-width)}section:is(showcase-project),showcase-project:is(showcase-project){max-height:100vh}p{font-size:var(--font-size-text);margin:0;padding:0;color:var(--foreground0)}p[dim]{color:var(--foreground1)}p strong{font-weight:900}a{color:var(--link);transition:color .1s ease-in-out;background-color:var(--blue-bg)}a:hover{color:var(--link-hover)}a:focus{outline:solid 2px var(--surface4)}a[_secondary]{color:var(--foreground2);background-color:transparent}ul{list-style:none}ul li:before{content:"- ";color:var(--accent)}nav{display:flex;justify-content:center;background:var(--surface0)}nav>div{display:flex;align-items:center;justify-content:space-between;padding:16px;width:100%;max-width:var(--max-reading-width)}footer{scroll-snap-align:end;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;background:var(--root);gap:16px;padding:16px}footer>div{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:var(--max-reading-width)}hr{border:none;border-top:solid 1px var(--surface2)}@media (max-width: 768px){section>div{padding:16px}:root{--font-size-title: 48px;--font-size-heading: 24px}}[snap]{scroll-snap-align:start end}[_flex]{display:flex}[_flex][_flex~=col]{flex-direction:column}[_flex][_flex~=grow]{flex-grow:1}[_flex][_flex~=center]{align-items:center;justify-content:center}[_flex][_flex~=no-basis]{flex-basis:0}[_flex][_flex~=justify-center]{justify-content:center}[_flex][_flex~=align-center]{align-items:center}[gap="4"]{gap:4px}[gap="8"]{gap:8px}[gap="16"]{gap:16px}[gap="32"]{gap:32px}@view-transition{navigation: auto;}::view-transition-group(root){animation-duration:.25s}@keyframes move-out{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);filter:brightness(1)}to{clip-path:polygon(0 0,0% 0,0% 100%,0 100%);filter:brightness(.5)}}@keyframes move-in{0%{filter:brightness(.5);clip-path:polygon(100% 0,100% 0,100% 100%,100% 100%);translate:0 -10%}to{filter:brightness(1);clip-path:polygon(0% 0,100% 0,100% 100%,0% 100%);translate:0 0}}::view-transition-old(root){animation:.25s ease-out both move-out}::view-transition-new(root){animation:.25s ease-out both move-in}vim-scroll-container{background:var(--surface0)}header{flex:none;display:flex;flex-direction:column;width:100vw;height:100vh;scroll-snap-align:end}header #header-content{display:flex;gap:16px;flex-grow:1;justify-content:center;align-items:center;padding:64px 16px}h1,h2,h3{color:var(--accent)}h3{font-size:20px}section>div{padding-top:64px;padding-bottom:64px}#about,#story{background:var(--root)}.text-content{max-width:var(--max-reading-width);display:flex;flex-direction:column;gap:16px;width:100%}.stat-list li{color:var(--foreground1)}.stat-list li strong{color:var(--foreground0)}.nested{margin-left:2ch}#timeline{display:flex;flex-direction:column}#timeline div{display:flex;gap:1ch;position:relative;padding-bottom:16px}#timeline div:before{content:"●";color:var(--foreground2);z-index:1;padding-top:3px}#timeline div:after{content:"";position:absolute;top:0;left:calc(.5ch - 1px);width:2px;height:100%;background:var(--surface3)}#timeline div:first-of-type:after{top:12px}#timeline div:last-of-type:after{height:12px}#timeline div ul span{color:var(--foreground1)}#tier{display:flex;flex-direction:column;gap:16px}#tier div{display:flex;flex-direction:column}#tier div ul{padding:16px 1ch;background:var(--surface1)}#tier div div{width:100%;padding-left:1ch;padding-right:1ch;color:var(--root)}#tier div div#s-tier{background:#a6d189}#tier div div#a-tier{background:var(--accent)}#tier div div#b-tier{background:#e5c890}#tier div div#c-tier{background:#ef9f76}#tier div div#f-tier{background:#e78284}
