@font-face{font-family:Cascadia;src:url(/CascadiaCode-Regular.woff2) format("woff2");font-display:swap}*,*:before,*:after{margin:0;padding:0;box-sizing:inherit}:root{color-scheme:light dark;--base: hsl(180, 2%, 9%);--base-light: hsl(180, 2%, 78%);--gunmetal: hsla(196, 87%, 12%, 1);--flame: hsla(16, 66%, 53%, 1);--duke-blue: hsla(256, 100%, 32%, 1);--burnt-sienna: hsla(16, 45%, 62%, 1);--gunmetal-2: hsla(197, 66%, 13%, 1);--primary: var(--gunmetal);--accent: var(--flame);--tertiary: var(--duke-blue);--quart: var(--burnt-sienna);--c: color-mix(in oklab, var(--base) 70%, var(--accent));--shadow: 0px 0px 13px var(--c);--fs-xs: clamp(.75rem, .894118vi + .53rem, 1.13rem);--fs-base: clamp(1rem, 1.176471vi + .71rem, 1.5rem);--fs-s: clamp(1.33rem, 1.576471vi + .94rem, 2rem);--fs-m: clamp(1.78rem, 2.094118vi + 1.26rem, 2.67rem);--fs-l: clamp(2.37rem, 2.8vi + 1.67rem, 3.56rem);--line-height: calc(4px + 3ex) ;interpolate-size:allow-keywords}::-webkit-scrollbar{width:.7vw}::-webkit-scrollbar-thumb{border-radius:1rem}html{box-sizing:border-box;--scrollbar-color-thumb: var(--accent);--scrollbar-color-track: var(--primary);--scrollbar-width: thin;scrollbar-color:var(--accent) var(--primary);scrollbar-width:thin}body{scroll-behavior:smooth;font-family:Cascadia Code,Cascadia,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;background-color:var(--base);color:var(--base-light);line-height:var(--line-height)}h1,h2,h3,h4{text-wrap:balance}:where(h1){font-size:calc(var(--fs-base) + .25rem)}a{color:inherit;text-decoration:none}ul{list-style:none}p,li{max-width:80ch;text-wrap:pretty;font-size:var(--fs-xs);line-height:var(--line-height)}li{font-size:var(--fs-base)}hr{border:1px solid var(--accent);border-radius:100% 20%}.layout{height:100dvh;display:grid;grid-template-columns:1.618fr 1fr;position:relative;@media screen and (width<630px){grid-template-columns:1fr min-content}}main{border-right:1px solid;border-color:var(--base-light);scroll-behavior:smooth;overflow-y:auto;--scrollbar-color-thumb: var(--accent);--scrollbar-color-track: var(--primary);--scrollbar-width: thin;scrollbar-color:var(--accent) var(--primary);scrollbar-width:thin;align-content:center}section{align-content:center;width:100%;padding-inline:1rem;background-color:var(--base)}::marker{color:var(--accent);font-size:var(--fs-xs)}.center{margin-inline:auto;max-width:1000px;max-width:80ch}pre:has(code){padding:1rem 1.5rem;margin-block:.5rem;border-radius:.5rem}.expressive-code{margin-block:1rem}.scroll-to-top{position:fixed;bottom:2rem;right:2rem;border:1px solid var(--flame);width:2rem;aspect-ratio:1;display:grid;place-content:center;border-radius:50%;color:var(--flame);opacity:0;animation-name:scroll-to-top;animation-duration:1ms;animation-direction:alternate;animation-timeline:scroll();transition:box-shadow .2s linear;cursor:default;a{cursor:inherit}&:hover{box-shadow:var(--shadow)}}@keyframes scroll-to-top{1%{cursor:pointer}10%{opacity:1}to{opacity:1}}@keyframes scroll-animation{0%{opacity:0;scale:.8;transform:translateZ(-3px) translateY(-50%) translate(-10%)}20%{opacity:0;scale:.8;transform:translateZ(-3px) translateY(-48%) translate(-10%)}50%{opacity:1;scale:1;transform:translateZ(3px) translateY(0) translate(0)}80%{opacity:0;scale:.8;transform:translateZ(-3px) translateY(48%) translate(-10%)}to{opacity:0;scale:.8;transform:translateZ(-3px) translateY(50%) translate(-10%)}}.scroller{height:100dvh;overflow-y:scroll;padding-inline:1rem;scrollbar-width:none;scroll-snap-type:y proximity;scroll-behavior:smooth}.fancy-btn{display:grid;place-content:center;font-size:.75rem;width:1.5rem;aspect-ratio:1;background-color:var(--base);color:var(--accent);border:none;border-radius:2rem;cursor:pointer;&:before{--amount: 50%;content:"";background-image:radial-gradient(var(--base) var(--amount),transparent 90%),linear-gradient(var(--deg, 135deg) in oklch,var(--primary),var(--accent));border-radius:2rem;position:absolute;z-index:-1;inset:-3px;transition:all .3s linear}&:hover{color:color-mix(in oklch,var(--accent),#fff 15%)}&:hover:before{--amount: 40%;transition:all .3s linear}}@property --deg{syntax: "<angle>"; inherits: false; initial-value: 45deg;}.fancy-border{--deg: 25deg;border:.2rem solid transparent;border-image:linear-gradient(var(--deg, 45deg) in oklch,var(--primary),var(--accent)) 1 / 1rem;border-radius:1.2rem;overflow:clip;object-fit:cover;outline:.5rem solid var(--base);outline-offset:.12rem;animation:rotate-border 4s linear infinite alternate}@keyframes rotate-border{0%{--deg: 5deg}to{--deg: 120deg}}.iconlist a:hover{background-color:transparent;color:hsla(from var(--base-light) h s l / 66%);transition:color .1s linear}.iconlist{display:flex}.carousel.carousel img:not(:nth-of-type(2)){visibility:hidden}::selection{background-color:oklch(from var(--accent) l c h / 80%);color:oklch(from var(--gunmetal) l c h / 95%)}