.article-container{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;padding:var(--space-32)}.subject-container-article{flex-direction:column;width:60%;height:auto;background-color:var(--color-4);z-index:1;margin-bottom:var(--space-24);padding:var(--space-40);transition:transform var(--motion-large-1) ease-in-out;color:var(--font-high);font-family:var(--font-body),monospace;margin-top:6%}.article-h1-container,.subject-container-article{display:flex;justify-content:center;border-radius:var(--border-radius-large);box-sizing:border-box}.article-h1-container{position:relative;background-color:var(--color-3);width:100%;margin-left:auto;margin-right:auto;align-items:center;padding:var(--space-24)}.subject-container-article h1{font-size:var(--typo-size-40);font-weight:var(--typo-weight-bold);font-family:var(--font-display),monospace;color:var(--color-2)}.subject-container-article h2{font-size:var(--typo-size-32);color:var(--color-1)}.subject-container-article h2,.subject-container-article h3{font-weight:var(--typo-weight-semi-bold);margin:var(--space-16) 0;margin-bottom:0}.subject-container-article h3{font-size:var(--typo-size-24);color:var(--font-high)}.subject-container-article a{color:var(--color-2);text-decoration:none}.subject-container-article ul{font-size:1.1rem;font-weight:var(--typo-weight-medium);color:var(--color-1)}.subject-container-article p{font-size:1.1rem;color:var(--font-high)}.code-block{font-size:var(--typo-size-14)}.component-container-article{display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:var(--border-radius-large);overflow:hidden;width:100%}.component-container-article canvas{width:100%;height:100%;background-color:var(--color-5)}.component-container-article canvas,.component-container-article svg{border-radius:var(--border-radius-large)}.subject-container-article img{max-width:100%;max-height:60vh;width:auto;height:auto;object-fit:contain;box-shadow:var(--shadow-medium);background:var(--color-4);display:block;margin:0 auto}.code-block,.subject-container-article img{border-radius:var(--border-radius-medium)}.subject-container-article p code{background-color:var(--color-3);padding:0 .3em;margin:0}code,pre{color:var(--font-high);padding:var(--space-8);margin:var(--space-8);font-family:monospace;overflow-x:auto;box-sizing:border-box;line-height:1.5;border-radius:var(--border-radius-small)}p{white-space:normal;word-break:break-word;margin:.5em 0}code{padding:0;margin:0}@media (max-width:1750px){.subject-container-article{margin-right:10%}}@media (max-width:1300px){.subject-container-article{margin-right:20%}}@media (max-width:1000px){.subject-container-article{margin-right:0;width:100%}}.article-nav-Menu{display:flex;flex-direction:column;align-items:center;width:15%;height:85%;background-color:var(--color-4);border-radius:var(--border-radius-large);position:fixed;top:50%;transform:translateY(-50%);right:5vw;z-index:50;overflow:hidden}.article-nav-Menu h2{color:var(--font-middle);font-size:var(--typo-size-20);font-weight:var(--typo-weight-semi-bold);margin:var(--space-8)}.published-time{display:flex;flex-direction:column;align-items:center;background-color:var(--color-3);border-top-left-radius:var(--border-radius-large);border-top-right-radius:var(--border-radius-large);border-bottom-left-radius:var(--border-radius-small);border-bottom-right-radius:var(--border-radius-small);padding:var(--space-8);margin-top:var(--space-16);width:80%}.published-time h3{color:var(--font-high);font-size:var(--typo-size-20);font-weight:var(--typo-weight-semi-bold);margin:var(--space-16)}.published-time p{color:var(--color-1);font-family:var(--font-display),sans-serif;font-size:var(--typo-size-12);font-weight:var(--typo-weight-regular);font-family:var(--font-body)}.article-topic{color:var(--color-1);width:80%;background-color:var(--color-3);padding:0;display:flex;flex-direction:column;align-items:center;border-radius:var(--border-radius-large)}.article-topic h3{font-weight:var(--typo-weight-regular);font-size:var(--typo-size-12);margin:var(--space-8) 0;font-family:var(--font-body)}.table-of-contents{display:flex;flex-direction:column;align-items:center;width:80%;min-height:0;overflow-y:auto;margin-bottom:var(--space-32);scrollbar-width:none}.table-of-contents::-webkit-scrollbar{display:none}.toc-item{color:var(--color-1);width:100%;background-color:var(--color-3);display:flex;flex-direction:column;border-radius:var(--border-radius-large);margin-bottom:var(--space-8);transition:background-color var(--motion-large-2) ease-in-out;cursor:pointer}.toc-item:hover{background-color:var(--color-1);color:var(--font-high)}.toc-item.active,.toc-item.medium.active,.toc-item.small.active{background-color:var(--color-1);color:var(--color-2)}.toc-item h3{font-size:var(--typo-size-12);margin:var(--space-8);font-weight:var(--typo-weight-regular);font-family:var(--font-body)}.toc-item.medium{width:85%;margin-left:auto}.toc-item.small{width:70%;margin-left:auto}@media (max-width:1750px){.article-nav-Menu{width:20%}}@media (max-width:1300px){.article-nav-Menu{width:25%}}