@layer base,fonts,variables,components,article,page;@layer base{*,:before,:after{margin:0;padding:0;box-sizing:border-box;border:none;outline:none;color:inherit;fill:currentColor}html{height:100%}body{width:100%;height:100%}ul{list-style:none}}@layer fonts{:root{--family-text: "Roboto__subset";--family-display: "DM Sans__subset";font-family:var(--family-text)}h1,h2,h3,h4,h5,h6{font-family:var(--family-display)}}@layer variables{:root{color-scheme:light dark;--tint-color: #ed872d;--tint-percentage: 15%;--elevation-none: 255, 255, 255;--elevation-low: 236, 236, 236;--elevation-medium: 216, 216, 216;--elevation-high: 196, 196, 196;--elevation-muted: 64, 64, 64;--elevation-max: 16, 16, 16;--elevation-none-rgb: color-mix( in oklab, rgb(var(--elevation-none)), var(--tint-color) var(--tint-percentage) );--elevation-low-rgb: color-mix( in oklab, rgb(var(--elevation-low)), var(--tint-color) var(--tint-percentage) );--elevation-medium-rgb: color-mix( in oklab, rgb(var(--elevation-medium)), var(--tint-color) var(--tint-percentage) );--elevation-high-rgb: color-mix( in oklab, rgb(var(--elevation-high)), var(--tint-color) var(--tint-percentage) );--elevation-muted-rgb: color-mix( in oklab, rgb(var(--elevation-muted)), var(--tint-color) var(--tint-percentage) );--elevation-max-rgb: color-mix( in oklab, rgb(var(--elevation-max)), var(--tint-color) var(--tint-percentage) )}@media(prefers-color-scheme:dark){:root{--elevation-none: 16, 16, 16;--elevation-low: 50, 50, 50;--elevation-medium: 100, 100, 100;--elevation-high: 150, 150, 150;--elevation-max: 255, 255, 255;--elevation-muted: 207, 207, 207}}:root{background:var(--elevation-none-rgb);color:var(--elevation-max-rgb);accent-color:var(--tint-color)}}@layer variables{:root{--size-xs: 6px;--size-sm: 12px;--size-md: 16px;--size-lg: 24px;--size-xl: 32px;--size-xxl: 48px;--article-max-width: 80ch;--font-xs: 75%;--font-sm: 85%;--font-md: 100%;--font-lg: 125%;--font-xl: 150%;--font-xxl: 200%;--font-display: 300%}}@layer variables{:root{--transition-fast: 133ms ease-in-out;--transition-medium: 267ms ease-in-out;--transition-slow: .4s ease-in-out}@media(prefers-reduced-motion){:root{--transition-fast: 0ms;--transition-medium: 0ms;--transition-slow: 0ms}}}@layer article{#article-content-wrapper{width:100%;padding-right:var(--size-lg);padding-left:var(--size-lg);display:flex;flex-direction:column;align-items:center}#article-heading{margin-bottom:var(--size-lg);>.article-title{font-size:var(--font-display);font-weight:700;line-height:1.1;text-wrap:balance;margin-bottom:var(--size-sm);@media(max-width:480px){font-size:var(--font-xxl)}}>.article-sub{font-size:small;color:var(--elevation-muted)}>.article-tags{margin-top:var(--size-sm);display:flex;gap:var(--size-sm);flex-wrap:wrap}}#article,.article{width:100%;&:not(.unlimited-width){max-width:var(--article-max-width)}>:not(.article-title){margin-top:var(--size-md);margin-bottom:var(--size-md)}>hr{margin-top:var(--size-xxl);margin-bottom:var(--size-xxl);color:var(--elevation-low-rgb)}>:is(h1,h2,h3,h4,h5,h6){margin-top:var(--size-lg);margin-bottom:var(--size-lg)}>:is(ul,ol,dl){margin-left:var(--size-md);list-style:revert}>blockquote{padding-left:var(--size-md);border-left:var(--size-xs) solid var(--elevation-max-rgb)}& img{width:100%;height:100%;object-fit:cover;border-radius:var(--size-md);&.halfwidth{max-width:480px}@media(prefers-color-scheme:light){box-shadow:0 0 4px #0000004d}}&:not(.no-link-coloring) a:not(:visited){color:var(--tint-color)}>figure{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:var(--size-xs)}>hr{border:1px solid var(--elevation-low-rgb)}}#article-views{>#article-views-paragraph{transition:opacity var(--transition-medium);&:not(.loaded){visibility:hidden;opacity:0}}>.view-button{margin-top:var(--size-sm);padding:var(--size-sm) var(--size-md) var(--size-sm) var(--size-md);border:none;border-radius:var(--size-sm);background:var(--elevation-low-rgb);color:var(--elevation-max-rgb);transition:background var(--transition-fast);&:not(:disabled){&:hover{background:var(--elevation-medium-rgb)}&:active{background:var(--elevation-high-rgb)}}&:disabled{color:var(--elevation-muted-rgb)}}}}@layer components{#navbar{width:100%;position:relative;padding:var(--size-sm);padding-bottom:calc(var(--size-sm) + var(--size-md));list-style:none;display:flex;justify-content:center;align-items:center;gap:var(--size-sm);flex-wrap:wrap;&:not(.glass){background:var(--elevation-low-rgb)}&:not(.glass)>:is(.title,.links){background:var(--elevation-none-rgb)}&:not(.glass) .current-page{background:var(--elevation-low-rgb)}>.title,>.links{display:flex;align-items:center;height:calc(var(--size-xl) * 2);border-radius:var(--size-xl)}>.title{font-size:var(--font-lg);padding-left:var(--size-lg);padding-right:var(--size-lg)}>.links{display:flex;padding-left:var(--size-sm);padding-right:var(--size-sm)}&:not(.glass):after{content:"";position:absolute;left:0;bottom:0;display:block;width:100%;height:var(--size-md);background:var(--elevation-none-rgb);border-top-left-radius:var(--size-md);border-top-right-radius:var(--size-md)}.current-page{border-radius:9999px}}#navbar.glass{.current-page{--glass-box-shadow: none;--glass-opaque: .6}}#navbar a{display:inline-block;padding:var(--size-sm) var(--size-md) var(--size-sm) var(--size-md);border-radius:var(--size-sm);text-decoration:none}@media(width<=768px){#navbar{justify-content:start}}}@layer components{.article-card{padding:var(--size-md);background:var(--elevation-low-rgb);border-radius:var(--size-sm);>p{margin-top:0;margin-bottom:var(--size-md);font-size:var(--font-sm)}>.title-and-date{display:flex;justify-content:space-between;align-items:end;>a{font-family:var(--family-display);text-decoration:none;font-size:var(--font-xl);font-weight:700}>p{margin:0;font-size:var(--font-sm);font-weight:300}}}}@layer components{.article-tag{border-radius:var(--size-sm);padding:var(--size-xs) var(--size-sm) var(--size-xs) var(--size-sm);background-color:var(--elevation-low-rgb);min-width:var(--size-xl);text-align:center}}@layer components{a{text-decoration:underline;text-decoration-thickness:1px;transition:text-decoration-thickness var(--transition-fast),color var(--transition-fast);&:hover{text-decoration-thickness:3px}}}@layer components{#footer-container{padding:var(--size-lg);display:flex;justify-content:center}#footer{width:100%;max-width:var(--article-max-width);display:flex;justify-content:center;align-items:center;gap:var(--size-xs)}#footer hr{flex:1;max-width:calc(var(--article-max-width) / 2.5);color:var(--elevation-low-rgb)}}@layer components{@property --glass-blur{syntax: "<length>"; inherits: false; initial-value: 6px;}@property --glass-opaque{syntax: "<number>"; inherits: false; initial-value: .25;}.glass-surface{--glass-light-shadow: rgba(255, 255, 255, .7);--glass-dark-shadow: rgba(0, 0, 0, 30%);--glass-box-shadow: 0 0 2px rgba(0, 0, 0, 25%), 0 0 8px rgba(0, 0, 0, 30%), 0 0 4px var(--glass-light-shadow) inset;--glass-tint-color: light-dark(white, black);--glass-background: rgb( from var(--glass-tint-color) r g b / calc(var(--glass-opaque) * 60%) );background:var(--glass-background);&:not(.no-shadows){box-shadow:var(--glass-box-shadow)}&:not(.no-blur){backdrop-filter:blur(var(--glass-blur))}}@media(prefers-color-scheme:dark){.glass-surface{--glass-light-shadow: transparent;--glass-dark-shadow: transparent;border:1px solid rgba(0,0,0,20%)}}}@layer components{.dialog-trigger{will-change:transform,visibility}.dialog-target{will-change:transform}body:has(dialog[open]){overflow-y:hidden}dialog.dialog{outline:none;border:none;margin:auto;max-width:90ch;width:100%;min-height:min(calc(100svh - 48px),256px);height:75%;background:none;border-radius:var(--size-lg);overflow:clip;&[open]{display:flex;flex-direction:column}>.header{border-radius:var(--size-lg) var(--size-lg) 0 0;background:var(--elevation-low-rgb);padding:var(--size-sm) var(--size-md) var(--size-sm) var(--size-md);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--size-sm);>.title{font-size:var(--font-xl)}>.close{>.button{display:block;border:none;background:none;width:var(--size-lg);height:var(--size-lg);fill:var(--elevation-muted-rgb)}}}>.body{height:100%;overflow-y:auto;padding:var(--size-md);padding-top:0;background:var(--elevation-none-rgb)}&::backdrop{background:none}}@media(width<=768px){dialog.dialog{margin:auto 0 0;border-bottom-left-radius:0;border-bottom-right-radius:0}}.dialog-backdrop{position:fixed;inset:0;backdrop-filter:brightness(75%);opacity:0}body:not([data-low-perf=true]) .dialog-backdrop{backdrop-filter:brightness(75%) blur(var(--size-md))}}@layer components;