:root{--max-viewport:720px;--background:#0f0f0f;--container:rgba(51,51,51,.25);--container-state:rgba(51,51,51,.5);--stroke:#2e2e2e;--primary:#99cfff;--accent:#7caeda;--accent-foreground:#1e374d;--foreground:#a6a6a6;--foreground-primary:#e6e6e6;--steel-line-height:1.4rem;--steel-desktop-border:1px solid var(--stroke);--steel-default-border:1px solid var(--stroke);--steel-mobile-border:1px solid var(--stroke);--steel-default-padding:1.25rem;--steel-default-lineheight-padding:calc(2.25rem - var(--steel-line-height));color-scheme:dark}html{background:var(--background);color:var(--foreground)}body{margin:0 auto;max-width:var(--max-viewport)}footer a,header a,nav a{color:var(--foreground-primary)}.main-header{padding:1rem}.main-header>a{font-size:1.05rem;font-weight:500}.main-header .subtitle{margin-bottom:.5rem}.main-nav,.subnav{display:flex;flex-wrap:wrap;gap:.4em 1rem}.subnav{border-left:2px solid var(--stroke);margin-left:1rem;padding-inline:1rem}.main-nav a[aria-current=page],.subnav a[aria-current=page]{color:var(--foreground);text-decoration:none}.main-nav:has(a:hover) a:not(:hover),.subnav:has(a:hover) a:not(:hover){opacity:.7}.main-nav :first-child{color:#fe7b7b}.main-nav :nth-child(2){color:#feb367}.main-nav :nth-child(3){color:#fbf074}.main-nav :nth-child(4){color:#95e279}.main-nav :nth-child(5){color:#88f2e0}.main-nav :nth-child(6){color:#77bef8}.main-nav :nth-child(7){color:#9b7bec}#main-content{padding:1rem}.page-header{--spacer:0.75em;justify-items:start;padding:1rem}.page-header .subtitle,.page-header h1{max-width:40ch}.page-header .subtitle{font-size:1.1em}.header-actions{display:flex;gap:1rem}.button{background:var(--container);border:1px solid var(--stroke);color:var(--foreground-primary);padding:.4rem .8rem;text-decoration:none}.button--primary{background:var(--accent-foreground);border-color:var(--accent);color:var(--accent)}.button:active{outline-offset:2px}.button:hover{opacity:.85;outline:1px dashed var(--stroke);outline-offset:-.15em}.button--primary:hover{outline-color:var(--accent)}.card{background:var(--container);border-radius:.25rem;outline:1px solid var(--stroke);padding:1rem}.card :has(.card-container){align-items:center;display:flex;gap:1rem}.card img{display:inline-block;height:48px;width:48px}.card h3{align-items:center;display:flex;gap:.5em}a.card:hover{background:var(--container-state)}a.card{text-decoration:none}a.card p{color:var(--foreground)}.card-actions{display:flex;flex-wrap:wrap;gap:.5rem 1rem}a.card{align-items:center;display:flex;gap:1em}a.card .card-content{--spacer:0.2em}.main-footer{border-top:1px solid var(--stroke);display:flex;gap:1rem;justify-content:space-between;padding:1rem}.main-footer nav{align-items:flex-end;display:flex;flex-direction:column;gap:.25em;text-align:right}.icon-github,.icon-mastodon{fill:currentColor}.old-button{display:block;image-rendering:pixelated}.old-button:hover{opacity:.5}.image-showcase{display:grid;gap:1rem;grid-template-rows:1fr 175px;justify-items:start}.image-showcase-thumbnails{align-items:stretch;display:flex;gap:.5rem}.image-showcase img{transition:all .15s ease-in-out}.image-showcase img:hover{opacity:.8}.auto-grid{--_gap:var(--gap,1rem);--_breakpoint:var(--breakpoint,320px);display:grid;gap:var(--_gap);grid-template-columns:repeat(auto-fit,minmax(var(--_breakpoint),1fr))}@media (max-width:650px){.main-footer{flex-direction:column}.main-footer nav{display:flex;flex-direction:row;gap:1em}}.steel-flex{display:flex;gap:var(--flex-gap,.5em)}.steel__label{border-radius:1.5em;color:var(--foreground);outline:1px solid var(--stroke);padding:.15em .7em;text-decoration:none}.card-content>*+*{margin-top:.75em}.steel__label:hover{background:var(--stroke);color:var(--foreground-primary)}