@font-face{
font-family:"Bagnard";
font-style:normal;
font-weight:200 700;
font-display:swap;
src:url("/fonts/Bagnard.woff2") format('woff2');
}
@font-face{
	font-family:"Adwaita Sans";
	font-style:normal;
	font-weight:100 900;
	font-stretch:100%;
	src:url("/fonts/adwaita-sans-custom.woff2") format("woff2");
	unicode-range:U+2190-21FF;
}

@font-face{
    font-family:"Adwaita Sans";
    font-style:normal;
    font-weight:100 900;
    font-display:swap;
    src:url("/fonts/AdwaitaSans-Regular.subset.woff2") format("woff2");
}
*,
*::before,
*::after{
  box-sizing:border-box;
}
html{
  -moz-text-size-adjust:none;
  -webkit-text-size-adjust:none;
  text-size-adjust:none;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd{
  margin-block:0;
}
ul[role='list'],
ol[role='list']{
  list-style:none;
}
body{
  min-height:100vh;
  line-height:1.5;
}
h1,
h2,
h3,
h4,
button,
input,
label{
  line-height:1.1;
}
h1,
h2,
h3,
h4{
  text-wrap:balance;
}
:is(a:not([class]), .link){
  text-decoration-skip-ink:auto;
  color:currentColor;
}
img,
picture{
  max-width:100%;
  display:block;
}
input,
button,
textarea,
select{
  font:inherit;
}
textarea:not([rows]){
  min-height:10em;
}
:target{
  scroll-margin-block:5ex;
}

figure{
  margin-inline:0;
}

figure > :is(picture, img){
  margin-inline:auto;
  width:fit-content;
}

:root{
    --stroke:var(--border-style) var(--border-width-normal) var(--color-border);
    --dividing-line:var(--border-style) var(--space-xs) var(--color-accent);
    --form-control-border:var(--form-control-border-style) var(--form-control-border-width) var(--form-control-border-color);

    --measure:60ch;
    --measurexl:90ch;
    --measure2xl:120ch;

    --ease-out-overshoot:cubic-bezier(0.175, 0.885, 0.32, 1.275);

    --badge-multip:2;
    --badge-width:calc(88px * var(--badge-multip));
    --badge-height:calc(31px * var(--badge-multip))p;

}

@media (prefers-reduced-motion: reduce){
    *,
    :after,
    :before{
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){
        animation:none!important
    }
}

:root{
    @view-transition{
        navigation:auto;
    }
    interpolate-size:allow-keywords;
    color-scheme:light;
}

:root:has(#theme [value='system']:checked){
    color-scheme:light dark;
}

:root:has(#theme [value='dark']:checked){
    color-scheme:dark;
}

html{
    scrollbar-color:var(--color-accent) var(--color-canvas);
    scrollbar-gutter:stable;
}

body{
    display:flex;
    flex-direction:column;
    background-color:var(--color-canvas);
    color:var(--color-text-normal);
    font-size:var(--text-base);
    font-family:var(--font-body), system-ui, sans-serif;
    font-size-adjust:from-font;
    margin:0;
}

main{
    flex:auto;
}

:is(h1,h2,h3,h4){
    line-height:var(--leading-title);
    text-wrap:balance;
}

h1{
    font-size:var(--text-6xl);
    font-family:var(--font-sans);
    max-inline-size:20ch;
}

h2{
    font-size:var(--text-4xl);
    max-inline-size:35ch;
}

h3{
    font-size:var(--text-3xl);
    max-inline-size:35ch;
}

:is(h4, h5, h6){
    font-size:var(--text-2xl);
}

p{
    text-wrap:pretty;
}

:is(p, li, dl, figcaption, blockquote){
    max-width:var(--measure);
}

small{
    font-size:var(--text-sm);
}

ins{
    text-decoration:dashed underline;
    text-underline-offset:0.15em;
    text-decoration-color:var(--color-success-fill-loud);
    text-decoration-thickness:0.15em;
}

:is(code, kbd, samp){
    font-size:1em;
    font-family:var(--font-mono);
    padding:0.2em 0.2em 0.05em 0.2em;
    hyphens:none;
    tab-size:2;
    text-align:left;
    word-spacing:normal;
    word-break:normal;
    word-wrap:normal;
    box-decoration-break:clone;
}

kbd{
    background-color:var(--color-surface-lowered);
    border-radius:var(--radius-lg);
    padding-block-end:0.1em;
}

@supports not (font-size-adjust: from-font){
  :is(code, kbd, samp){
    font-size:0.8em;
  }
}

var{
  font-style:normal;
  font-weight:var(--font-medium);
}

q{
  font-style:italic;
}

:not(pre) > code{
    color:var(--color-accent-loud)
}

pre:has(code){
    border:var(--stroke);
    inline-size:max-content;
    max-inline-size:100%;
    overflow-x:auto;
    padding:1ch;
}

pre code{
    border:none;
    background:none;
    padding:0;
}

:where(ol, ul)[class]{
    list-style:none;
    padding-inline-start:0;
    margin-block-end:0;
    margin-block-start:0;
}


ul:not([class]){
    padding-inline-start:1.7ch;
    list-style-type:disc;
}

ul:not([class]) > li{
    padding-inline-start:var(--space-xs);
}

:is(ol, ul):not([class]) > *{
    --flow-space:var(--space-2xs);
}
    

:is(ol, ul):not([class]) li + *{
    margin-block-start:var(--flow-space, var(--space-2xs));
}

ul ::marker{
    font-size:0.8lh;
}

ol ::marker{
    font-size:1em;
    font-weight:var(--font-weight-semibold);
}


dt{
    font-weight:var(--font-medium);
}

dt + dd{
    margin-block-start:var(--space-xs);
}

dd + dt{
    margin-block-start:var(--space-s);
}

dd{
    margin-inline-start:1.5ch;
}


:is(blockquote){
    margin-inline:0;
    padding-inline:var(--space-sm, 1rem);
    padding-block:var(--space-sm);
    background-color:var(--color-primary);
    border:var(--stroke);
    border-inline-start-width:var(--space-xs);
    border-inline-start-color:var(--color-accent);
    border-inline-start-style:var(--border-style);
}

blockquote footer{

    margin-block-start:var(--space-sm);
    font-size:var(--size-step-0);

}

blockquote q{
    font-style:normal;
}


:is(video, iframe[src*='youtube'], iframe[src*='vimeo']){
    display:block;
    inline-size:100%;
    block-size:auto;
    aspect-ratio:16/9;
}

img, picture{
    block-size:auto;
    inline-size:100%;
}

figcaption{
    padding-block-start:0.5em;
    font-size:var(--text-base);
    font-family:monospace;
}

.responsive-table:has(> table){
    overflow-wrap:normal;
    overflow-x:auto;
}

table{
  border:var(--stroke);
  border-collapse:collapse;
  width:100%;
}

th{
    background-color:var(--color-primary);
    text-align:left;
    font-weight:var(--font-weight-bold);
    line-height:var(--leading-title);
}

thead th{
    padding-block:var(--space-sm);
}

td,
th{
  padding:var(--space-xs) var(--space-sm);
}

th:not(:only-of-type){
  border-block-end:var(--stroke);
}

th:only-of-type{
  border-inline-end:var(--stroke);
}

:is(th, td) ~ :is(th, td){
  border-inline-start:var(--stroke);
}

tr + tr :is(th, td){
  border-block-start:var(--stroke);
}

caption{
  caption-side:bottom;
  margin-block-start:var(--space-sm);
}

:where(a:not([class]), .link){
    color:var(--color-text-normal);
    text-underline-offset:0.05lh;
    text-decoration-color:var(--color-accent);
    transition:text-underline-offset 0.1s ease-out, color 0.1s ease-out;

}


:where(a:not([class]), .link):hover{
    text-underline-offset:0.1lh;
    color:var(--color-accent);
    text-decoration-color:var(--color-accent);
    text-decoration-thickness:0.4ex;
    transition:text-underline-offset 0.1s ease-in, color 0.1s ease-in;
}

:is(h1, h2, h3, h4) :where(a:not([class]), .link){
  text-decoration-thickness:0.1ex;
  text-underline-offset:0.2ex;
}

:is(h1, h2, h3, h4) :where(a:not([class]), .link):hover{
  text-underline-offset:0.3ex;
  text-decoration-thickness:0.3ex;
}


:focus{
    outline:none;
}

:focus-visible{
    outline:0.2rem solid var(--focus-color, currentColor);
    outline-offset:var(--focus-offset, 0.2lh);
}

@supports (-moz-appearance: none){
    :root{
        --focus-offset:0.08em;
    }
}


:target{
    scroll-margin-block:5lh;
}


::selection{
    color:var(--color-selection-text);
    background:var(--color-selection-background);
}


hr{
    border:none;
    border-block-start:var(--stroke);
    margin-block:var(--flow-space, var(--space-xl));
}


svg:not([class]){
    inline-size:auto;
    block-size:1lh;
}

svg{
    flex-shrink:0;
}

svg[role='img'][width][height]{
    inline-size:revert;
    block-size:revert;
    padding:var(--space-xs);
}
form > * + *{
    margin-block-start:var(--flow-space, var(--space-sm));
}

:is(input){
    accent-color:var(--form-control-activated-color);
}

:is(input:not([type='checkbox'], [type='radio'], [type='color']), select, textarea){
    
    padding:0.5em 0.8em;
    border:var(--form-control-border);
    background:var(--form-control-background-color);
    color:var(--form-control-value-color);
    width:100%;

    &::placeholder{
        color:var(--form-control-placeholder-color);
    }
}

label{
    line-height:var(--form-control-label-line-height);
    font-weight:var(--font-weight-medium);
}

label::after{
    content:'\A';
    white-space:pre;
}
label:has(input){
    display:flex;
    align-items:baseline;
    gap:var(--space-sm);
    font-weight:var(--font-weight-medium);
}

label:has(input) + label:has(input){
    --flow-space:var(--space-sm-md);
}
label:has(input) input{
    transform:translateY(-0.1ex);
}


input:disabled{
    background:var(--color-canvas);
}

input:disabled,
label input:disabled + *{
    cursor:not-allowed;
}


fieldset{
    background:var(--form-control-background-color);
    border:var(--form-control-border);
    padding:var(--space-sm);
}

legend{
  font-weight:var(--font-medium);
  padding-inline:var(--space-xs);
}


summary{
    display:block;
    font-weight:var(--font-weight-bold);
    cursor:pointer;
    background-color:var(--color-primary);
}


summary::before{
    display:inline-block;
    content:"→";
    margin-inline-end:0.5ch;
    font-weight:var(--font-weight-semibold);
}

summary::before, summary::after{
    transition:transform var(--transition-normal) var(--ease-out-overshoot);
}

details[open] summary::before, details[open] summary::after{
    transform:rotate(90deg);
}

details{
    border:var(--stroke);
}

details > *{
    padding:var(--space-sm);
}

details > summary + *{
    border-block-start:var(--stroke);
}

details::details-content{
    block-size:0;
    overflow:hidden;
    transition:block-size var(--transition-fast) linear, content-visibility var(--transition-fast) linear;
    transition-behavior:allow-discrete;
}

details[open]::details-content{
    block-size:auto;
    transition:block-size var(--transition-fast) var(--ease-out-overshoot), content-visibility var(--transition-fast) var(--ease-out-overshoot);
}


@media (max-width: 30rem){
 html{
    overflow-wrap:anywhere;
    hyphens:auto;
 }
}


.about .shelf > .content{
    --wrapper-max-width:var(--measure2xl);
    flex-direction:row-reverse;
}

#my-big-logo-container{
    padding-inline:var(--space-2xl);
}

#my-big-logo{
    max-width:15em;
    max-height:15em;
    transition:transform linear var(--transition-fast), box-shadow linear var(--transition-fast);
}

#my-big-logo img{
    border:var(--stroke);
}

#my-big-logo:hover:not(.spinny){
    transform:scale(1.05);
    cursor:pointer;
}

#my-big-logo:active:not(.spinny){
    transform:scale(0.9);
}

#my-big-logo.spinny{
    animation:spin 1.5s normal;
    &:hover{
        cursor:default;
    }
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg) scale(1);
    }
}

.badgelist{
    --grid-placement:auto-fill;
    --grid-item-min:var(--badge-width);
    --grid-gap:var(--space-sm);
    
}

.badgelist li{
    display:flex;
    justify-content:center;
}

.badge{
    display:block;
    width:100%;
    max-width:var(--badge-width);
    max-height:var(--badge-height);
    transition:transform var(--transition-normal) var(--ease-out-overshoot);
    image-rendering:pixelated;
    image-rendering:-moz-crisp-edges;
    image-rendering:crisp-edges;

}

.badge::after{
    display:none;
    content:none;
}

.badge:is(:hover, :focus-visible){
    transform:scale(1.2);
    outline:0.2rem solid var(--focus-color, currentColor);
}

.bloglist{
    --color-box-list-background:var(--color-primary);
}

.bloglist .post{
    --align:normal;
    --sidebar-wrap-at:55%;
    --flow-space:var(--space-xs);
    height:100%;
}

.bloglist .post:has(.sidebar){
    flex-direction:row-reverse;
}

.bloglist .post .sidebar :is(picture, img){
    max-block-size:14rem;
    inline-size:auto;
}

.boxed-list{
    border:var(--stroke);
    background-color:var(--color-box-list-background, transparent);
}

.boxed-list > * + *{
    border-block-start:var(--stroke);
}

.boxed-list > *{
    padding:var(--space-md);
}

.button-list{
    --button-font-size:var(--size-step-3);
    --button-padding:var(--space-md);
    font-size:var(--button-font-size);
    
}

.button-list :is(a, button){
    padding:var(--button-padding);
    display:flex;
    width:100%;
    align-items:center;
    text-decoration:none;
    transition-property:background-color, color;
    transition-duration:var(--transition-normal);
    transition-timing-function:linear;
    background-color:transparent;
    border:unset;
    background-color:var(--color-button-bg );
    color:var(--color-button-text, var(--color-text-normal));

}


.button-list :is(a:hover, button:hover){
    --color-button-bg:var(--color-selection-background);
    --color-button-text:var(--color-selection-text);
    cursor:pointer;
}

.button-list button[command="close"]{
    --color-button-bg:var(--color-error-fill-normal);
    --color-button-text:var(--color-error-on-normal);
    border-block-end:var(--stroke);
}

.button-list button[command="close"]:hover{
    --color-button-bg:var(--color-error-fill-loud);
    --color-button-text:var(--color-error-on-loud);    
}

.button-list :is(a, button) .large-icon{
    --size-icon:3cap;
}

.button{
    --focus-color:var(--color-text-normal);
    --button-shadow-size:.375rem;
    --button-shadow-color:var(--color-text-normal);
    display:flex;
    cursor:pointer;
    position:relative;
    text-decoration:none;
    padding:var(--button-padding, var(--space-md));
    background-color:var(--color-button-bg, var(--color-primary));
    color:var(--color-button-text, var(--color-text-normal));
    border:var(--border-button, var(--stroke));
    border-radius:var(--radius-button);
    justify-content:center;
    transition:transform var(--transition-fast) linear, box-shadow var(--transition-fast) linear, background-color var(--transition-normal) linear, font-weight var(--transition-normal) linear, color var(--transition-normal) linear;

    box-shadow:0 var(--button-shadow-size) 0 var(--button-shadow-color);

}

.button:hover, .button:focus, .button:focus-visible{
    transform:translateY(calc(var(--button-shadow-size) * -0.5));
    box-shadow:0 calc(var(--button-shadow-size) * 1.5) 0 var(--button-shadow-color);
}

:where(.button:hover, .button:focus, .button:focus-visible){
    --color-button-text:var(--color-selection-text);
    --color-button-bg:var(--color-selection-background);
}

.button:active{
    transform:translateY(var(--button-shadow-size));
    box-shadow:none;
}

.button-grid .button{
    inline-size:100%;
}

.lg-buttons .button{
    font-size:var(--text-lg);
}

.xl-buttons .button{
    font-size:var(--text-xl);
}

.codeberg-button{
    --color-button-bg:var(--color-cyan-600);
    --color-button-text:var(--color-neutral-100);
}

.github-button{
    --color-button-bg:var(--color-neutral-900);
    --color-button-text:var(--color-neutral-100);    
}

.gitlab-button{
    --color-button-bg:var(--color-orange-600);
    --color-button-text:var(--color-neutral-100);    
}

.mastodon-button{
    --color-button-bg:var(--color-purple-600);
    --color-button-text:var(--color-neutral-100);    
}

.bluesky-button{
    --color-button-bg:var(--color-blue-600);
    --color-button-text:var(--color-neutral-100);    
}

.steam-button{
    --color-button-bg:var(--color-indigo-950);
    --color-button-text:var(--color-neutral-100);    
}

.modrinth-button{
    --color-button-bg:var(--color-green-300);
    --color-button-text:var(--color-neutral-900);    
}

.callout{
    border:var(--stroke);
    inline-size:100%;
}

.callout > *{
    margin:0;
    padding:var(--space-sm);
}

.callout-title{
    display:inline-flex;
    inline-size:100%;
    column-gap:1ch;
    background-color:var(--color-callout-header, var(--color-primary));
    color:var(--color-callout-header-text, var(--color-text-normal));
    font-size:var(--text-2xl);
    font-family:var(--font-sans);
    font-weight:var(--font-weight-bold);
    border-block-end:var(--stroke);
}

.callout[data-callout="success"] > .callout-title{
   --color-callout-header:var(--color-success-fill-loud);
   --color-callout-header-text:var(--color-warning-on-loud);
}

.callout[data-callout="warning"] > .callout-title{
   --color-callout-header:var(--color-warning-fill-loud);
   --color-callout-header-text:var(--color-warning-on-loud);
}

.callout[data-callout="danger"] > .callout-title{
    --color-callout-header:var(--color-error-fill-loud);
    --color-callout-header-text:var(--color-error-on-loud);
}

.callout[data-callout="info"] > .callout-title{
    --color-callout-header:var(--color-info-fill-loud);
    --color-callout-header-text:var(--color-info-on-loud);
}

body > footer{
    view-transition-name:footer;
}

.footer{
    --sidebar-size:20ch;
    --wrapper-max-width:var(--measure2xl);
    background-color:var(--color-primary);
    border-block-start:var(--stroke);
    margin-block-start:var(--space-2xl);
}

.footer > div{
    padding:var(--space-lg);
}

.footer .category{
    font-weight:var(--font-weight-bold);
}

.footer .grid > div li{
    --flow-space:var(--space-2xs);
}

.headline{
    --wrapper-max-width:var(--measure2xl);
    --region-space:var(--space-2xl);
}

.headline > .content{
    --flow-space:var(--space-sm);
    border-bottom:var(--dividing-line);
    padding-block-end:var(--space-md);
}

.headline > .content > .flow{
    align-content:center;
}

.headline :has(.sidebar){
    --align:normal;
    --sidebar-size:15ch;
}

.headline .sidebar :is(picture, img){
    max-inline-size:20ch;
}

.hero{
    --wrapper-max-width:var(--measurexl);
    --wrapper-padding-inline:0;
    --grid-align-items:center;
    --grid-placement:auto-fit;

    padding:var(--space-md);
    background-color:var(--color-primary);
    border-bottom:var(--stroke);
}

.hero .index-logo{
    max-inline-size:25rem;
    justify-self:center;
    padding:var(--space-sm);
}

.hero:has(.index-logo){
    view-transition-name:collapseable-hero-nav;
}

::view-transition-old(collapseable-hero-nav),
::view-transition-new(collapseable-hero-nav){
    height:100%;
}

.home.flow > *{
    --flow-space:var(--space-2xl);
}

.home.flow{
    margin-block-start:var(--space-2xl);
}

:where(.home.flow > * > *){
    --flow-space:var(--space-md);
}
.index-logo{
    aspect-ratio:693 / 591;
    max-width:fit-content;
    transition:transform var(--transition-normal) var(--ease-out-overshoot);
}

.hero .index-logo{
    view-transition-name:index-logo;
}

.index-logo-grid{
    display:grid;
    grid-template-areas:"ear1 . ear2" "eye1 . eye2" "nose nose nose";
    grid-template-columns:auto 15% auto;
}

.index-logo-grid > div:not(.nose){
    aspect-ratio:292 / 183;
    display:grid;
}

.index-logo-grid-grid > div:is(.ear1, .ear2){
    padding-bottom:2%;
}

.index-logo-grid > div.ear1{ grid-area:ear1;}
.ear1 > svg{
  align-self:bottom;
  justify-self:end;
}

.index-logo-grid > div.ear2{ grid-area:ear2; }
.ear2 > svg{
  align-self:bottom;
  justify-self:start;
}

@keyframes spin{
    to{
        transform:rotate(720deg);
    }
}

@keyframes spinopp{
    to{
        transform:rotate(-720deg);
    }
}

:is(.eye1, .eye2) > svg{  
    aspect-ratio:0.9 / 1;
    animation:spin 500ms ease-in-out;
    color:var(--color-accent);
}

.index-logo-grid > div.eye1{ grid-area:eye1 }
.eye1 > svg{
    transition:transform ease-out 500ms;
    align-self:center;
    justify-self:end;
}


.index-logo-grid > div.eye2{ grid-area:eye2; }
.eye2 > svg{
    animation-name:spinopp;
    align-self:center;
    justify-self:start;
}


.index-logo-grid > div.nose{
  display:grid;
  aspect-ratio:692.859 / 190;
  grid-area:nose;
  color:var(--color-accent);

}

.nose > svg{
  align-self:top;
  justify-self:center;
}

.index-logo-grid svg{
    display:block;
    height:100%;
    width:100%;
    max-width:fit-content;
    max-height:fit-content;
}


.index-logo:hover{
    transform:scale(1.1);
}


.library-shelf{
    --grid-placement:auto-fit;
}

.library-shelf > .card > a{
    display:block;
    transition:outline var(--transition-fast) linear;
    padding:var(--space-3xs);
}

.library-shelf > .card p{
    text-align:center;
    text-decoration:none;
}

.library-shelf > .card > a:hover{
    outline:.2em solid var(--focus-color, currentColor);
}

.minecraft-showcase{
    --color-box-list-background:var(--color-primary);
    --sidebar-size:fit-content;
}

.minecraft-showcase .item{
    --align:stretch;
    --sidebar-wrap-at:70%;
}

.minecraft-showcase .item .content{
    font-size:var(--text-sm);
}

.minecraft-showcase .item .content h3{
    font-size:var(--text-lg);
}

.minecraft-showcase .item img{
    max-width:var(--space-2xl);
}
.navbar{
    --cluster-gap:var(--space-md);
    background-color:var(--color-primary);
    border-bottom:var(--stroke);
    font-family:var(--font-sans);
    font-size:var(--text-xl);
    padding:var(--space-md);
    view-transition-name:collapseable-hero-nav;
    --size-icon:3cap;
}

.navbar li{
    display:flex;
}


.navbar a[aria-current="page"]{
    text-decoration-color:var(--color-text-normal);
    text-underline-offset:0.1lh;
    text-decoration-thickness:0.4ex;
}


.icon[data-icon-size="logo"]{
    color:var(--color-text-normal);
}

.icon[data-icon-size="logo"]:hover{
    color:var(--color-accent);
}

.navbar .icon[data-icon-size="logo"]{
    width:100%;
    height:auto;
    max-width:5rem;
}

.navbar .site-logo{
    view-transition-name:index-logo;
    transition:transform var(--transition-slow) var(--ease-out-overshoot);
    background-color:transparent;
}

.navbar .site-logo:hover{
    transform:scale(1.2) rotate(2deg);
}

#menu-button{
    padding:var(--space-sm);
}

#menu-dialog{
    box-sizing:border-box;
    background-color:var(--color-primary);
    width:auto;
    padding:0;
    max-width:var(--measure);
    inset-inline:var(--space-xs-sm);
}

@media (width >= 50rem){

    :root:not(:has(#noscript)) div:has(> #menu-button){
        display:none;
    }
}

@media (width < 50rem){
    :root:not(:has(#noscript)) .navbar li:has(a:not(.site-logo)){
        display:none;
        
    }
    :root:not(:has(#noscript)) .navbar ol{
        justify-content:center;
        
    }
}

.post .headline :has(.sidebar){
    flex-direction:row-reverse;
    --sidebar-size:unset;
}

.post #table-of-contents{
    position:static;
    background-color:var(--color-canvas);
    --sidebar-size:25ch;
}

@container (inline-size > 67ch){
    .post #table-of-contents{
        position:sticky;
        top:calc(var(--space-lg)); 
    }
}

.post > .content:has(#table-of-contents){
    --wrapper-max-width:var(--measurexl);
    --sidebar-wrap-at:60%;
    flex-direction:row-reverse;
    container-type:inline-size;
}

.post > .content{
    --wrapper-max-width:var(--measure);
}

code[class*="language-"],
pre[class*="language-"], pre:has(> code){

	background:#2a2d2a;
	color:#ffffff;
}

pre > code[class*="language-"]{
	font-size:1em;
}

pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection{
	text-shadow:none;
	background:#435643;
}

pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection{
	text-shadow:none;
	background:#435643;
}
pre[class*="language-"]{
	padding:1em;
	margin:.5em 0;
	overflow:auto;
}
:not(pre) > code[class*="language-"]{
	padding:.1em;
	border-radius:.3em;
}

.token.comment,
.token.prolog,
.token.doctype,
.token.cdata{
	color:#ffffff;
}

.token.punctuation{
	color:#ffffff;
}

.token.namespace{
	opacity:.7;
}

.token.tag,
.token.operator,
.token.number{
	color:#a2b34d;
}

.token.property,
.token.function{
	color:#fd6f44;
}

.token.tag-id,
.token.selector,
.token.atrule-id{
	color:#f0fff0;
}

code.language-javascript,
.token.attr-name{
	color:#b3d6b3;
}

code.language-css,
code.language-scss,
.token.boolean,
.token.string,
.token.entity,
.token.url,
.language-css .token.string,
.language-scss .token.string,
.style .token.string,
.token.attr-value,
.token.keyword,
.token.control,
.token.directive,
.token.unit,
.token.statement,
.token.regex,
.token.atrule{
	color:#e5fb79;
}

.token.placeholder,
.token.variable{
	color:#e5fb79;
}

.token.deleted{
	background-color:var(--color-red-900)
}

.token.inserted{
    background-color:var(--color-green-800);
	text-decoration:none;
}

.token:is(.inserted, .deleted):not(.prefix){
	display:block;
	width:100%;
	max-width:max-content;
}

.token:is(.inserted, .deleted).prefix{
	user-select:none;
}

.token.italic{
	font-style:italic;
}

.token.important,
.token.bold{
	font-weight:bold;
}

.token.important{
	color:#b3d6b3;
}

.token.entity{
	cursor:help;
}

pre > code.highlight{
	outline:.4em solid #5c705c;
	outline-offset:.4em;
}
.line-numbers.line-numbers .line-numbers-rows{
	border-right-color:#2c302c;
}

.line-numbers .line-numbers-rows > span:before{
	color:#3b423b;
}
.line-highlight.line-highlight{
	background:rgba(162, 179, 77, 0.2);
	background:-webkit-linear-gradient(left, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0));
	background:linear-gradient(to right, rgba(162, 179, 77, 0.2) 70%, rgba(162, 179, 77, 0));
}
.projects{
    --grid-placement:auto-fit;
    --grid-item-min:30ch;
}
.prose{
    --flow-space:var(--space-lg, 2rem);
}
.prose :is(p, li, dl, figcaption, blockquote){
    max-width:70ch;
    text-wrap:pretty;
}

.prose :is(h1, h2, h3){
    overflow-wrap:anywhere;
}
.prose :is(h1, h2, h3, h4):not(.not-prose) + *:not(.not-prose){
    --flow-space:var(--space-md, 1.5rem);
}
.prose :is(figure, table):not(.not-prose),
.prose :is(figure, table):not(.not-prose) + *:not(.not-prose){
    --flow-space:var(--space-2xl, 3rem);
}
.prose *:not(.not-prose) + :is(h1, h2, h3, h4):not(.not-prose){
    --flow-space:var(--space-xl, 2.5rem);
}
.prose :is(ul, ol):not(.not-prose) li + li,
.prose :is(ul, ol):not(.not-prose) li > :is(ol, ul):not(.not-prose){
    margin-block-start:var(--space-2xs, 0.75rem);
}
.prose :is(ul, ol):not(.not-prose) li + li:has(p){
    margin-block-start:var(--flow-space, var(--space-lg, 2rem));
}
.prose :is(ul, ol) li:has(> p) > p{
    margin-block-start:var(--space-2xs, 0.75rem);
}
.prose :is(dl):not(.not-prose) dd + dt{
    margin-block-start:var(--flow-space, var(--space-lg, 2rem));
}
.prose :is(dl):not(.not-prose) dt + dd{
    margin-block-start:var(--space-xs, 0.75rem);
}
.prose :is(hr){
    --flow-space:var(--space-2xl, 3rem);
}
.prose :is(p){
    line-height:2;
}


.prose :is(blockquote) p{
    font-style:italic;
    font-weight:var(--font-weight-medium, 500);
}
.prose :is(code):not(.not-prose):not(pre code){
    font-weight:var(--font-weight-semibold, 600);
    font-size:0.95em;
    background:revert;
}
.prose pre{
    inline-size:100%;
}

.prose :is(ol, ul):not(.not-prose){
    padding-inline-start:var(--space-md, 1.5rem);
}

.prose :is(ol, ul):not(.not-prose) li{
    padding-inline-start:var(--space-2xs, 0.5rem);
}

.prose :is(ul > li):not(.not-prose)::marker{
    color:var(--prose-list-marker-color, currentColor);
}

.prose :is(ol > li):not(.not-prose)::marker{
    font-weight:var(--font-weight-normal, 400);
    color:var(--prose-list-marker-color, currentColor);
    font-size:var(--prose-list-marker-size, 1em);
}


.prose > :is(img, picture, video){
    border:var(--stroke);
}

.prose a:not([class]):where([href^="http://"],[href^="https://"])::after{
    content:"↗";
}

.signpost{
    background-color:var(--color-canvas);
    border:var(--stroke);
}

.signpost > .grid{
    --grid-placement:auto-fit;
    --grid-item-min:20rem;
    gap:var(--border-width-normal);
    rule:var(--stroke);
    rule-visibility-items:between;
}

.signpost .button-list.featured{
    font-weight:var(--font-weight-semibold);
}

.signpost .posts .link.jumbo{
    display:flex;
    padding:var(--space-md);
}

.signpost .posts li:nth-child(even){
    background-color:var(--color-primary);
}

.signpost .posts .bloglist > li{
    padding-block:var(--space-xs);
    padding-inline:var(--space-md);
}

@supports not (rule: 2px solid black){
    .signpost > .grid{
        gap:0;
    }

    @media (min-width: 45em){
        .signpost > .grid > * + *{
            border-inline-start:var(--stroke);
        }
    }

    @media (max-width: 45em){
        .signpost > .grid > * + *{
            border-block-start:var(--stroke);
        }
    }
}


.signpost > .other-pages{
    border:0;
    border-block-start:var(--stroke);
}

.signpost > .other-pages summary{
    padding:var(--space-md);
    transition:background-color var(--transition-normal) linear, color var(--transition-normal) linear;
}

.signpost > .other-pages summary:hover{
    color:var(--color-selection-text);
    background-color:var(--color-selection-background);
}

.signpost > .other-pages summary::before{
    display:none;
}

.signpost > .other-pages summary::after{
    font-weight:var(--font-weight-semibold);
    content:"→";
}

.signpost .other-pages > ul{
    padding:0;
}

.signpost .other-pages .button-list a{
    justify-content:center;
    height:100%;
    font-size:var(--text-xl);
}

.signpost .featured > li{
    background-color:var(--color-primary);
}

.signpost .featured > li:nth-child(even){
    background-color:var(--color-canvas);
}

.signpost .featured a{
    --sidebar-wrap-at:75%;
    font-size:var(--text-5xl);
    row-gap:var(--space-2xs);
}

.signpost .featured .sidebar{
    --sidebar-size:1.4ch;
    font-weight:var(--font-weight-semibold);
}

.signpost .other-pages .grid{
    --grid-item-min:20rem;
    gap:0;
}

.signpost :is(.featured, summary) .large-icon{
    --size-icon:2ch;
}

.signpost .other-pages .grid .large-icon{
    --size-icon:5ch;
}

.webring{
    padding:var(--space-md);
    background-color:var(--color-primary);
    border:var(--stroke);
    block-size:100%;
}

.webring .title{
    font-family:var(--font-sans);
    font-size:var(--text-xl);
}

.cluster{
    display:flex;
    flex-wrap:wrap;
    gap:var(--cluster-gap, 0.5rem);
    justify-content:var(--cluster-horizontal-alignment, flex-start);
    align-items:var(--cluster-vertical-alignment, center);
}

.cluster[data-cluster-devided]{
    gap:calc(var(--cluster-gap, 0.5rem)/2);
}

.cluster[data-cluster-devided] > * + *::before{
    margin-inline-end:calc(var(--cluster-gap, 0.5rem)/2);
    content:var(--cluster-devider-style, "//");
}
.flow > * + *{
    margin-block-start:var(--flow-space, 1em);
}

.grid{
    display:grid;
    grid-template-columns:repeat(
            var(--grid-placement, auto-fill),
            minmax(min(100%, var(--grid-item-min, 16rem)), 1fr)
        );
    gap:var(--grid-gap, 1rem);
    align-items:var(--grid-align-items, stretch);
}
.icon{
    width:0.75em;
    height:0.75em;
    width:var(--size-icon, 1cap);
    height:var(--size-icon, 1cap);
}

:has(> .icon){
    display:inline-flex;
    align-items:baseline;
    column-gap:0.5ch;
    flex-wrap:wrap;
}

.icon[data-icon-size="logo"]{
    --size-icon:2cap;
    align-self:center;
    height:100%;
}

.large-icon{
    max-inline-size:var(--size-icon, 2ch);
    max-block-size:var(--size-icon, 2ch);
}

:has(> .large-icon){
    display:inline-flex;
    align-items:center;
    column-gap:0.5ch;
    flex-wrap:wrap;
}
.repel{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    flex-direction:var(--repel-direction, row);
    align-items:var(--repel-vertical-alignment, center);
    gap:var(--repel-gap, 1rem);
}

:has(> .sidebar){
    display:flex;
    flex-wrap:wrap;
    gap:var(--sidebar-gap, 1rem);
    align-items:var(--align, flex-start);
}

.sidebar{
    flex-basis:var(--sidebar-size, 20rem);
    flex-grow:1;
}

:has(> .sidebar) > :not(.sidebar){
    flex-basis:0;
    flex-grow:999;
    min-inline-size:var(--sidebar-wrap-at, 50%);
}
.switcher{
    display:flex;
    flex-wrap:wrap;
    gap:var(--switcher-gap, 1rem);
    align-items:var(--switcher-vertical-alignment, flex-start);
}

.switcher > *{
    flex-grow:1;
    flex-basis:calc((var(--switcher-inline-at, 40rem) - 100%) * 999);
}
.switcher > :nth-child(n + 3){
    flex-basis:100%;
}

.switcher[data-state="reversed"]{
    flex-direction:row-reverse;
}
.wrapper{
    margin-inline:auto;
    max-width:var(--wrapper-max-width, 1360px);
    padding-left:var(--wrapper-padding-inline, 1rem);
    padding-right:var(--wrapper-padding-inline, 1rem);
    position:relative;
}

.center-items{
    display:grid;
    place-items:center;
}

.colored{
    color:var(--color-accent);
}

.dented{
    --dent-value:2deg;
    transform:rotate(var(--dent-value));
    transition:transform var(--transition-normal) var(--ease-out-overshoot);
}

.dented:hover{
    transform:rotate(0);
}

.font-mono{
    font-family:var(--font-mono);
}

:root:has(#noscript) .hide-if-nojs{
    display:none;
}

.pattern-library .example{
    padding:var(--space-md);
    background-color:var(--color-warning-fill-normal);
    border:var(--stroke);
}

.jumbo{
    font-size:var(--text-5xl);
}

.thumbnail{
    border:var(--stroke);
    border-radius:var(--radius-xl);
}

.region.shelf{
    background-color:var(--color-primary);
    border-block:var(--stroke);
    --region-space:var(--space-xl);
}

.flow.uses{
    --flow-space:var(--space-2xl);
}

.flow.uses > * > *{
    --flow-space:var(--space-sm);
}

.pixel-perfect{
    image-rendering:pixelated;
    image-rendering:-moz-crisp-edges;
    image-rendering:crisp-edges;
}

.multi-col-list{
    padding-inline-start:0;
    column-width:15ch;
    column-gap:var(--space-md);
}
.region{
    padding-block:var(--region-space, 1rem);
    position:relative;
}
.rounded-2xl{
    border-radius:var(--radius-2xl);
}

.rounded-xl{
    border-radius:var(--radius-xl);
}

.rounded-full{
    border-radius:var(--radius-full);
}

.links a:hover .themed-img, .other-pages summary:hover .themed-img{
    filter:contrast(175%) invert(100%); 
}

.button-list a:hover .themed-img{
    filter:contrast(175%) invert(100%); 
}

@media (prefers-color-scheme: dark){
    :root:has(#theme [value='system']:checked){
        .themed-img{
            filter:contrast(175%) invert(100%);
        }
        .button-list a:hover .themed-img{
            filter:none;
        }
    }
}

:root:has(#theme [value='dark']:checked){
    .themed-img{
        filter:contrast(175%) invert(100%);
    }
    .button-list a:hover .themed-img{
        filter:none;
    }
}


.themed-img{
    transition:filter var(--transition-normal) linear;  
}
.visually-hidden{
    border:0;
    clip:rect(0 0 0 0);
    height:0;
    margin:0;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px;
    white-space:nowrap;
}
.wrapper-measurexl{
    --wrapper-max-width:var(--measurexl);
}

.wrapper-measure2xl{
    --wrapper-max-width:var(--measure2xl);
}

:root{
    --color-alpha-black-00:oklch(0 0 0 / 0);
    --color-alpha-black-05:oklch(0 0 0 / 0.05);
    --color-alpha-black-10:oklch(0 0 0 / 0.1);
    --color-alpha-black-12:oklch(0 0 0 / 0.12);
    --color-alpha-black-15:oklch(0 0 0 / 0.15);
    --color-alpha-black-25:oklch(0 0 0 / 0.25);
    --color-alpha-black-50:oklch(0 0 0 / 0.5);
    --color-alpha-black-80:oklch(0 0 0 / 0.8);
    --color-alpha-white-10:oklch(1 0 0 / 0.1);
    --color-alpha-white-15:oklch(1 0 0 / 0.15);
    --color-neutral-50:oklch(0.985 0 0);
    --color-neutral-100:oklch(0.97 0 0);
    --color-neutral-200:oklch(0.922 0 0);
    --color-neutral-300:oklch(0.87 0 0);
    --color-neutral-400:oklch(0.708 0 0);
    --color-neutral-500:oklch(0.556 0 0);
    --color-neutral-600:oklch(0.439 0 0);
    --color-neutral-700:oklch(0.371 0 0);
    --color-neutral-800:oklch(0.269 0 0);
    --color-neutral-900:oklch(0.205 0 0);
    --color-neutral-950:oklch(0.145 0 0);
    --color-slate-50:oklch(0.984 0.003 247.858);
    --color-slate-100:oklch(0.968 0.007 247.896);
    --color-slate-200:oklch(0.929 0.013 255.508);
    --color-slate-300:oklch(0.869 0.022 252.894);
    --color-slate-400:oklch(0.704 0.04 256.788);
    --color-slate-500:oklch(0.554 0.046 257.417);
    --color-slate-600:oklch(0.446 0.043 257.281);
    --color-slate-700:oklch(0.372 0.044 257.287);
    --color-slate-800:oklch(0.279 0.041 260.031);
    --color-slate-900:oklch(0.208 0.042 265.755);
    --color-slate-950:oklch(0.129 0.042 264.695);
    --color-gray-50:oklch(0.985 0.002 247.839);
    --color-gray-100:oklch(0.967 0.003 264.542);
    --color-gray-200:oklch(0.928 0.006 264.531);
    --color-gray-300:oklch(0.872 0.01 258.338);
    --color-gray-400:oklch(0.707 0.022 261.325);
    --color-gray-500:oklch(0.551 0.027 264.364);
    --color-gray-600:oklch(0.446 0.03 256.802);
    --color-gray-700:oklch(0.373 0.034 259.733);
    --color-gray-800:oklch(0.278 0.033 256.848);
    --color-gray-900:oklch(0.21 0.034 264.665);
    --color-gray-950:oklch(0.13 0.028 261.692);
    --color-amber-50:oklch(0.987 0.022 95.277);
    --color-amber-100:oklch(0.962 0.059 95.617);
    --color-amber-200:oklch(0.924 0.12 95.746);
    --color-amber-300:oklch(0.879 0.169 91.605);
    --color-amber-400:oklch(0.828 0.189 84.429);
    --color-amber-500:oklch(0.769 0.188 70.08);
    --color-amber-600:oklch(0.666 0.179 58.318);
    --color-amber-700:oklch(0.555 0.163 48.998);
    --color-amber-800:oklch(0.473 0.137 46.201);
    --color-amber-900:oklch(0.414 0.112 45.904);
    --color-amber-950:oklch(0.279 0.077 45.635);
    --color-emerald-50:oklch(0.979 0.021 166.113);
    --color-emerald-100:oklch(0.95 0.052 163.051);
    --color-emerald-200:oklch(0.905 0.093 164.15);
    --color-emerald-300:oklch(0.845 0.143 164.978);
    --color-emerald-400:oklch(0.765 0.177 163.223);
    --color-emerald-500:oklch(0.696 0.17 162.48);
    --color-emerald-600:oklch(0.596 0.145 163.225);
    --color-emerald-700:oklch(0.508 0.118 165.612);
    --color-emerald-800:oklch(0.432 0.095 166.913);
    --color-emerald-900:oklch(0.378 0.077 168.94);
    --color-emerald-950:oklch(0.262 0.051 172.552);
    --color-blue-50:oklch(0.97 0.014 254.604);
    --color-blue-100:oklch(0.932 0.032 255.585);
    --color-blue-200:oklch(0.882 0.059 254.128);
    --color-blue-300:oklch(0.809 0.105 251.813);
    --color-blue-400:oklch(0.707 0.165 254.624);
    --color-blue-500:oklch(0.623 0.214 259.815);
    --color-blue-600:oklch(0.546 0.245 262.881);
    --color-blue-700:oklch(0.488 0.243 264.376);
    --color-blue-800:oklch(0.424 0.199 265.638);
    --color-blue-900:oklch(0.379 0.146 265.522);
    --color-blue-950:oklch(0.282 0.091 267.935);
    --color-purple-50:oklch(0.977 0.014 308.299);
    --color-purple-100:oklch(0.946 0.033 307.174);
    --color-purple-200:oklch(0.902 0.063 306.703);
    --color-purple-300:oklch(0.827 0.119 306.383);
    --color-purple-400:oklch(0.714 0.203 305.504);
    --color-purple-500:oklch(0.627 0.265 303.9);
    --color-purple-600:oklch(0.558 0.288 302.321);
    --color-purple-700:oklch(0.496 0.265 301.924);
    --color-purple-800:oklch(0.438 0.218 303.724);
    --color-purple-900:oklch(0.381 0.176 304.987);
    --color-purple-950:oklch(0.291 0.149 302.717);
    --color-purple-primary:oklch(0.9026 0.0489 301.04);
    --color-purple-accent:oklch(0.9026 0.0489 301.04);
    --color-pink-50:oklch(0.971 0.014 343.198);
    --color-pink-100:oklch(0.948 0.028 342.258);
    --color-pink-200:oklch(0.899 0.061 343.231);
    --color-pink-300:oklch(0.823 0.12 346.018);
    --color-pink-400:oklch(0.718 0.202 349.761);
    --color-pink-500:oklch(0.656 0.241 354.308);
    --color-pink-600:oklch(0.592 0.249 0.584);
    --color-pink-700:oklch(0.525 0.223 3.958);
    --color-pink-800:oklch(0.459 0.187 3.815);
    --color-pink-900:oklch(0.408 0.153 2.432);
    --color-pink-950:oklch(0.284 0.109 3.907);
    --color-rose-50:oklch(0.969 0.015 12.422);
    --color-rose-100:oklch(0.941 0.03 12.58);
    --color-rose-200:oklch(0.892 0.058 10.001);
    --color-rose-300:oklch(0.81 0.117 11.638);
    --color-rose-400:oklch(0.712 0.194 13.428);
    --color-rose-500:oklch(0.645 0.246 16.439);
    --color-rose-600:oklch(0.586 0.253 17.585);
    --color-rose-700:oklch(0.514 0.222 16.935);
    --color-rose-800:oklch(0.455 0.188 13.697);
    --color-rose-900:oklch(0.41 0.159 10.272);
    --color-rose-950:oklch(0.271 0.105 12.094);
    --color-primary:var(--color-purple-100);
    --color-accent:var(--color-purple-600);
    --color-canvas:var(--color-gray-100);
    --color-border:var(--color-neutral-700);
    --color-light:var(--color-neutral-100);
    --color-dark:var(--color-neutral-900);
    --color-text-normal:var(--color-dark);
    --color-text-quiet:var(--color-neutral-600);
    --color-text-quieter:var(--color-neutral-500);
    --color-text-placeholder:var(--color-neutral-500);
    --color-text-link:var(--color-text-normal);
    --color-success-fill-quiet:var(--color-emerald-50);
    --color-success-fill-normal:var(--color-emerald-100);
    --color-success-fill-loud:var(--color-emerald-600);
    --color-success-on-quiet:var(--color-emerald-700);
    --color-success-on-normal:var(--color-emerald-700);
    --color-success-on-loud:var(--color-emerald-50);
    --color-warning-fill-quiet:var(--color-amber-50);
    --color-warning-fill-normal:var(--color-amber-100);
    --color-warning-fill-loud:var(--color-amber-600);
    --color-warning-on-quiet:var(--color-amber-700);
    --color-warning-on-normal:var(--color-amber-700);
    --color-warning-on-loud:var(--color-amber-50);
    --color-error-fill-quiet:var(--color-rose-50);
    --color-error-fill-normal:var(--color-rose-100);
    --color-error-fill-loud:var(--color-rose-600);
    --color-error-on-quiet:var(--color-rose-700);
    --color-error-on-normal:var(--color-rose-700);
    --color-error-on-loud:var(--color-rose-50);
    --color-info-fill-quiet:var(--color-blue-50);
    --color-info-fill-normal:var(--color-blue-100);
    --color-info-fill-loud:var(--color-blue-600);
    --color-info-on-quiet:var(--color-blue-700);
    --color-info-on-normal:var(--color-blue-700);
    --color-info-on-loud:var(--color-blue-50);
    --color-selection-background:var(--color-accent);
    --color-selection-text:var(--color-light);
    --border-width-hairline:0.75px;
    --border-width-thin:1px;
    --border-width-normal:0.2rem;
    --border-width-thick:0.25rem;
    --border-style:solid;
    --container-xs:320px;
    --container-sm:384px;
    --container-md:448px;
    --container-lg:512px;
    --container-xl:576px;
    --container-2xl:672px;
    --container-3xl:768px;
    --container-4xl:896px;
    --container-5xl:1024px;
    --container-6xl:1152px;
    --container-7xl:1280px;
    --container-8xl:1440px;
    --container-9xl:1600px;
    --radius-button:var(--radius-md);
    --radius-none:0rem;
    --radius-sm:0.125rem;
    --radius-md:0.25rem;
    --radius-lg:0.5rem;
    --radius-xl:0.75rem;
    --radius-2xl:1rem;
    --radius-3xl:1.5rem;
    --radius-4xl:2rem;
    --radius-full:9999px;
    --cluster-gap:var(--space-sm);
    --grid-gap:var(--space-md);
    --repel-gap:var(--space-md);
    --sidebar-gap:var(--space-md);
    --switcher-gap:var(--space-md);
    --flow-space:var(--space-md);
    --region-space:var(--space-xl);
    --wrapper-max-width:var(--container-4xl);
    --wrapper-padding-inline:var(--space-sm);
    --sidebar-content-min-width:37.5rem;
    --z-raised:1;
    --z-dropdown:50;
    --z-modal:100;
    --z-tooltip:150;
    --z-notification:200;
    --focus-ring-color:var(--color-accent);
    --focus-ring-offset:4px;
    --focus-ring-width:2px;
    --focus-ring-style:solid;
    --form-control-activated-color:var(--color-accent);
    --form-control-background-color:var(--color-primary);
    --form-control-border-width:var(--border-width-thick);
    --form-control-border-style:var(--border-style);
    --form-control-border-color:var(--color-border);
    --form-control-border-radius:var(--radius-lg);
    --form-control-line-height:var(--leading-normal);
    --form-control-font-size:var(--text-sm);
    --form-control-placeholder-color:var(--color-text-placeholder);
    --form-control-toggle-size:1.25rem;
    --form-control-value-color:var(--color-text-normal);
    --form-control-label-color:var(--color-text-normal);
    --form-control-label-line-height:var(--leading-tight);
    --transition-fast:75ms;
    --transition-normal:150ms;
    --transition-slow:300ms;
    --ease-in:cubic-bezier(0.4, 0, 1, 1);
    --ease-out:cubic-bezier(0, 0, 0.2, 1);
    --ease-in-out:cubic-bezier(0.4, 0, 0.2, 1);
    --panel-radius:var(--radius-lg);
    --panel-border-style:var(--border-style);
    --panel-border-color:var(--color-border);
    --panel-border-width:var(--border-width-thin);
    --shadow-button:var(--shadow-xs);
    --shadow-card:var(--shadow-xs);
    --shadow-input:var(--shadow-xs);
    --shadow-2xs:0px 1px 0px 0px var(--color-alpha-black-05);
    --shadow-xs:0px 1px 2px 0px var(--color-alpha-black-05);
    --shadow-sm:0px 1px 3px 0px var(--color-alpha-black-10), 0px 1px 2px -1px var(--color-alpha-black-10);
    --shadow-md:0px 4px 6px -1px var(--color-alpha-black-10), 0px 2px 4px -2px var(--color-alpha-black-10);
    --shadow-lg:0px 10px 15px -3px var(--color-alpha-black-10), 0px 4px 6px -4px var(--color-alpha-black-10);
    --shadow-xl:0px 20px 25px -5px var(--color-alpha-black-10), 0px 8px 10px -6px var(--color-alpha-black-10);
    --shadow-2xl:0px 25px 50px -12px var(--color-alpha-black-25);
    --size-step--2:clamp(0.98765625rem, 0.98rem + 0.02vw, 0.9982625rem);
    --size-step--1:clamp(1.1111125rem, 1.08rem + 0.16vw, 1.19791875rem);
    --size-step-0:clamp(1.25rem, 1.17rem + 0.34vw, 1.4375rem);
    --size-step-1:clamp(1.40625rem, 1.28rem + 0.58vw, 1.725rem);
    --size-step-2:clamp(1.58203125rem, 1.38rem + 0.89vw, 2.07rem);
    --size-step-3:clamp(1.7797875rem, 1.49rem + 1.28vw, 2.484rem);
    --size-step-4:clamp(2.00225625rem, 1.60rem + 1.78vw, 2.9808rem);
    --size-step-5:clamp(2.2525375rem, 1.71rem + 2.41vw, 3.5769625rem);
    --size-step-6:clamp(2.53410625rem, 1.81rem + 3.20vw, 4.29235rem);
    --size-step-7:clamp(2.85086875rem, 1.91rem + 4.18vw, 5.150825rem);
    --size-step-8:clamp(3.20723125rem, 1.99rem + 5.41vw, 6.1809875rem);
    --size-step-9:clamp(3.6081375rem, 2.05rem + 6.93vw, 7.41718125rem);
    --size-step-10:clamp(4.05915rem, 2.08rem + 8.80vw, 8.90061875rem);
    --size-step-11:clamp(4.56654375rem, 2.07rem + 11.12vw, 10.68074375rem);
    --space-0:0rem;
    --space-3xs:0.25rem;
    --space-2xs:clamp(0.4375rem, 0.41rem + 0.11vw, 0.5rem);
    --space-xs:clamp(0.6875rem, 0.66rem + 0.11vw, 0.75rem);
    --space-sm:clamp(0.875rem, 0.82rem + 0.23vw, 1rem);
    --space-md:clamp(1.3125rem, 1.24rem + 0.34vw, 1.5rem);
    --space-lg:clamp(1.75rem, 1.65rem + 0.45vw, 2rem);
    --space-xl:clamp(2.625rem, 2.47rem + 0.68vw, 3rem);
    --space-2xl:clamp(3.5rem, 3.30rem + 0.91vw, 4rem);
    --space-3xl:clamp(5.25rem, 4.94rem + 1.36vw, 6rem);
    --space-3xs-2xs:clamp(0.25rem, 0.15rem + 0.45vw, 0.5rem);
    --space-2xs-xs:clamp(0.4375rem, 0.31rem + 0.57vw, 0.75rem);
    --space-xs-sm:clamp(0.6875rem, 0.56rem + 0.57vw, 1rem);
    --space-sm-md:clamp(0.875rem, 0.62rem + 1.14vw, 1.5rem);
    --space-md-lg:clamp(1.3125rem, 1.03rem + 1.25vw, 2rem);
    --space-lg-xl:clamp(1.75rem, 1.24rem + 2.27vw, 3rem);
    --space-xl-2xl:clamp(2.625rem, 2.06rem + 2.50vw, 4rem);
    --space-2xl-3xl:clamp(3.5rem, 2.48rem + 4.55vw, 6rem);
    --font-body:var(--font-sans);
    --font-heading:var(--font-sans);
    --font-sans:"Adwaita Sans", Geist, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
    --font-serif:Georgia, Cambria, "Times New Roman", Times, serif;
    --font-weight-normal:400;
    --font-weight-medium:500;
    --font-weight-semibold:600;
    --font-weight-bold:700;
    --text-xs:var(--size-step--2);
    --text-sm:var(--size-step--1);
    --text-base:var(--size-step-0);
    --text-lg:var(--size-step-1);
    --text-xl:var(--size-step-2);
    --text-2xl:var(--size-step-3);
    --text-3xl:var(--size-step-4);
    --text-4xl:var(--size-step-5);
    --text-5xl:var(--size-step-6);
    --text-6xl:var(--size-step-7);
    --text-7xl:var(--size-step-8);
    --text-8xl:var(--size-step-9);
    --text-9xl:var(--size-step-10);
    --leading-title:var(--leading-tight);
    --leading-none:1;
    --leading-tight:1.1;
    --leading-normal:1.5;
    --leading-relaxed:1.75;
    --tracking-tight:-0.025rem;
    --tracking-normal:0rem;
    --tracking-wide:0.025rem;
}

@media (prefers-color-scheme: dark){
    :root:has(#theme [value='system']:checked){
        --color-primary:var(--color-purple-900);
        --color-accent:var(--color-purple-300);
        --color-canvas:var(--color-neutral-800);
        --color-border:var(--color-neutral-300);
        --color-text-normal:var(--color-light);
        --color-text-quiet:var(--color-neutral-400);
        --color-success-fill-quiet:var(--color-emerald-950);
        --color-success-fill-normal:var(--color-emerald-900);
        --color-success-fill-loud:var(--color-emerald-500);
        --color-success-on-quiet:var(--color-emerald-400);
        --color-success-on-normal:var(--color-emerald-200);
        --color-success-on-loud:var(--color-light);
        --color-warning-fill-quiet:var(--color-amber-950);
        --color-warning-fill-normal:var(--color-amber-900);
        --color-warning-fill-loud:var(--color-amber-500);
        --color-warning-on-quiet:var(--color-amber-400);
        --color-warning-on-normal:var(--color-amber-200);
        --color-warning-on-loud:var(--color-dark);
        --color-error-fill-quiet:var(--color-rose-950);
        --color-error-fill-normal:var(--color-rose-900);
        --color-error-fill-loud:var(--color-rose-500);
        --color-error-on-quiet:var(--color-rose-400);
        --color-error-on-normal:var(--color-rose-200);
        --color-error-on-loud:var(--color-light);
        --color-info-fill-quiet:var(--color-blue-950);
        --color-info-fill-normal:var(--color-blue-900);
        --color-info-fill-loud:var(--color-blue-500);
        --color-info-on-quiet:var(--color-blue-400);
        --color-info-on-normal:var(--color-blue-200);
        --color-info-on-loud:var(--color-light);
        --color-selection-text:var(--color-dark);
    }
}

:root:has(#theme [value='dark']:checked){
    --color-primary:var(--color-purple-900);
    --color-accent:var(--color-purple-300);
    --color-canvas:var(--color-neutral-800);
    --color-border:var(--color-neutral-300);
    --color-text-normal:var(--color-light);
    --color-text-quiet:var(--color-neutral-400);
    --color-success-fill-quiet:var(--color-emerald-950);
    --color-success-fill-normal:var(--color-emerald-900);
    --color-success-fill-loud:var(--color-emerald-500);
    --color-success-on-quiet:var(--color-emerald-400);
    --color-success-on-normal:var(--color-emerald-200);
    --color-success-on-loud:var(--color-light);
    --color-warning-fill-quiet:var(--color-amber-950);
    --color-warning-fill-normal:var(--color-amber-900);
    --color-warning-fill-loud:var(--color-amber-500);
    --color-warning-on-quiet:var(--color-amber-400);
    --color-warning-on-normal:var(--color-amber-200);
    --color-warning-on-loud:var(--color-dark);
    --color-error-fill-quiet:var(--color-rose-950);
    --color-error-fill-normal:var(--color-rose-900);
    --color-error-fill-loud:var(--color-rose-500);
    --color-error-on-quiet:var(--color-rose-400);
    --color-error-on-normal:var(--color-rose-200);
    --color-error-on-loud:var(--color-light);
    --color-info-fill-quiet:var(--color-blue-950);
    --color-info-fill-normal:var(--color-blue-900);
    --color-info-fill-loud:var(--color-blue-500);
    --color-info-on-quiet:var(--color-blue-400);
    --color-info-on-normal:var(--color-blue-200);
    --color-info-on-loud:var(--color-light);
    --color-selection-text:var(--color-dark);
}