:root{--gray-0: #f8f9fa;--gray-1: #f1f3f5;--gray-2: #e9ecef;--gray-3: #dee2e6;--gray-4: #ced4da;--gray-6: #868e96;--gray-7: #495057;--gray-11: #0d0f12;--gray-12: #030507;--red-6: #fa5252;--font-size-0: .75rem;--font-size-1: 1rem;--font-size-2: 1.1rem;--font-size-3: 1.25rem;--font-size-4: 1.5rem;--font-size-8: 3.5rem;--size-2: .5rem;--size-4: 1.25rem;--size-8: 3rem;--size-12: 10rem;--size-md: 768px;--shadow-4: 0 -2px 5px 0 hsl(220 3% 15% / 3%), 0 1px 1px -2px hsl(220 3% 15% / 4%), 0 2px 2px -2px hsl(220 3% 15% / 4%), 0 5px 5px -2px hsl(220 3% 15% / 5%), 0 9px 9px -2px hsl(220 3% 15% / 6%), 0 16px 16px -2px hsl(220 3% 15% / 7%);--surface-1: var(--gray-0);--surface-2: var(--gray-2);--surface-3: var(--gray-3);--text-1: var(--gray-12);--text-2: var(--gray-7);--aspect-ratio: 4 / 1;--header-scroll: max(100vw / 4, 200px) ;--title-height: 100px;--shared-range: calc((var(--header-scroll) - var(--title-height))) calc((var(--header-scroll) + (var(--title-height) * 2)));--title-range: calc((var(--header-scroll) - (var(--title-height) * 2))) calc((var(--header-scroll) - (var(--title-height) * -.25)));--avatar-range: calc((var(--header-scroll) - (var(--title-height) * 1.5))) calc((var(--header-scroll) + (var(--title-height) * .95))), calc((var(--header-scroll) - (var(--title-height) * 2.5))) calc((var(--header-scroll) + (var(--title-height) * .95)));--shadow-range: calc((var(--header-scroll) + var(--title-height))) calc((var(--header-scroll) + (var(--title-height) * 2)));--cover-range: var(--shadow-range)}*,*:after,*:before{box-sizing:border-box}:where(:not(dialog)){margin:0}html{color-scheme:light;color:var(--text-1);font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;line-height:1.5;-webkit-text-size-adjust:none}:where(img,svg){display:block;block-size:auto;max-inline-size:100%}:where(h1){font-size:var(--font-size-8);font-weight:900;line-height:1.25;max-inline-size:20ch;text-wrap:balance}body{background:var(--gray-2);display:grid;min-height:200vh;justify-items:center;overflow-x:hidden;align-content:start;overflow-y:auto}header{background:var(--surface-2);background-size:cover;max-width:100%;aspect-ratio:var(--aspect-ratio);height:var(--header-scroll);width:100vw;position:sticky;view-timeline-name:--header;top:calc((var(--header-scroll) * -1) + var(--title-height))}header:after{content:"";position:absolute;inset:0;background:#00000040;opacity:0;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:fade-in both linear;animation-timeline:scroll();animation-range:var(--cover-range)}@keyframes fade-in{to{opacity:1}}.backdrop{height:100%;width:100%;-o-object-fit:cover;object-fit:cover;clip-path:inset(0 0 0 0)}.avatar{width:var(--size-12);aspect-ratio:1;border-radius:50%;border:var(--size-2) solid var(--gray-2);position:absolute;top:0%;left:var(--size-4);translate:0 -100%;transform-origin:0% 50%;animation:scale-down both ease-out,look-down both steps(41);animation-timeline:scroll();animation-range:var(--avatar-range);z-index:2;-o-object-position:0 0;object-position:0 0;-o-object-fit:cover;object-fit:cover;background:linear-gradient(#e63b19,#a219e6)}@keyframes scale-down{to{scale:.35;top:50%;translate:0 -50%}}@keyframes look-down{to{-o-object-position:100% 0;object-position:100% 0}}.intro{max-width:100vw;width:var(--size-md);position:sticky;top:0;margin-top:calc(var(--size-12) * .5)}main{width:var(--size-md);max-width:100vw}.title{color:var(--gray-11);width:var(--size-md);max-width:100vw;height:var(--title-height);gap:.125rem;padding:var(--size-4);animation:slide both ease;animation-timeline:scroll();animation-range:var(--title-range)}h1{color:currentColor}@keyframes slide{0%,85%{color:var(--gray-11)}to{color:var(--gray-1);translate:calc(var(--size-12) * .5) 0}}.title-wrapper{position:relative;width:100vw;left:50%;transform:translate(-50%);display:grid;justify-content:center;animation:shadow both;animation-timeline:scroll();animation-range:var(--shadow-range)}@keyframes shadow{to{box-shadow:var(--shadow-4)}}.title h1{margin:0;font-size:2em;line-height:1.1}.title a{color:var(--red-6);font-weight:700;font-size:1rem;line-height:1.1;text-decoration:none}ul{list-style-type:none;padding:0;margin:0;padding-top:var(--size-8);display:grid;gap:var(--size-4)}.skeleton{--surface: var(--gray-4);--block: var(--gray-6);--padding: var(--size-4);padding:var(--padding);gap:var(--padding);width:100%;display:grid;grid-template:1fr 1fr / 25% 1fr;background:var(--surface);max-inline-size:100%}.skeleton__block{background:var(--block)}@keyframes load{to{background-position:200% 0}}.skeleton__block:first-of-type{grid-row:1 / -1;aspect-ratio:1}.skeleton__block:last-of-type{width:65%}