@layer base-config, user-config;/*! modern-normalize v3.0.1 | MIT License | https://github.com/sindresorhus/modern-normalize *//*
Document
========
*//**
Use a better box model (opinionated).
*/*,
::before,
::after {
	box-sizing: border-box;
}html {
	/* Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3) */
	font-family:
		system-ui,
		'Segoe UI',
		Roboto,
		Helvetica,
		Arial,
		sans-serif,
		'Apple Color Emoji',
		'Segoe UI Emoji';
	line-height: 1.15; /* 1. Correct the line height in all browsers. */
	-webkit-text-size-adjust: 100%; /* 2. Prevent adjustments of font size after orientation changes in iOS. */
	tab-size: 4; /* 3. Use a more readable tab size (opinionated). */
}/*
Sections
========
*/body {
	margin: 0; /* Remove the margin in all browsers. */
}/*
Text-level semantics
====================
*//**
Add the correct font weight in Chrome and Safari.
*/b,
strong {
	font-weight: bolder;
}/**
1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
2. Correct the odd 'em' font sizing in all browsers.
*/code,
kbd,
samp,
pre {
	font-family:
		ui-monospace,
		SFMono-Regular,
		Consolas,
		'Liberation Mono',
		Menlo,
		monospace; /* 1 */
	font-size: 1em; /* 2 */
}/**
Add the correct font size in all browsers.
*/small {
	font-size: 80%;
}/**
Prevent 'sub' and 'sup' elements from affecting the line height in all browsers.
*/sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}sub {
	bottom: -0.25em;
}sup {
	top: -0.5em;
}/*
Tabular data
============
*//**
Correct table border color inheritance in Chrome and Safari. (https://issues.chromium.org/issues/40615503, https://bugs.webkit.org/show_bug.cgi?id=195016)
*/table {
	border-color: currentcolor;
}/*
Forms
=====
*//**
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
*/button,
input,
optgroup,
select,
textarea {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}/**
Correct the inability to style clickable types in iOS and Safari.
*/button,
[type='button'],
[type='reset'],
[type='submit'] {
	-webkit-appearance: button;
}/**
Remove the padding so developers are not caught out when they zero out 'fieldset' elements in all browsers.
*/legend {
	padding: 0;
}/**
Add the correct vertical alignment in Chrome and Firefox.
*/progress {
	vertical-align: baseline;
}/**
Correct the cursor style of increment and decrement buttons in Safari.
*/::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
	height: auto;
}/**
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/[type='search'] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}/**
Remove the inner padding in Chrome and Safari on macOS.
*/::-webkit-search-decoration {
	-webkit-appearance: none;
}/**
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to 'inherit' in Safari.
*/::-webkit-file-upload-button {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}/*
Interactive
===========
*//*
Add the correct display in Chrome and Safari.
*/summary {
	display: list-item;
}@layer base-config {
  :root,
  :host {
    --untoast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><path d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"/></svg>');
    --toast-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="28" height="28" fill="none" stroke="%23ac1616" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.25" class="toast-icon" viewBox="0 0 24 24"><path d="m14.479 19.374-.971.939a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5a5.2 5.2 0 0 1-.219 1.49M15 15h6m-3-3v6"/></svg>');
    --body-line-height: 1.3;

    /* 18px at 320px viewport */
    /* 21px at 1920px viewport */
    --font-size: clamp(1.125rem, 1.0875rem + 0.1875vw, 1.3125rem);

    --body-width: min(80ch, calc(70% + 100px));
  }

  @media (prefers-color-scheme: dark) {
    :root,
    :host {
      --csstools-color-scheme--light:  ;
      color-scheme: dark;

      /** Catppuccin blue */
      --color-primary: hsl(217deg 92% 76%);
      --color-hover: lch(from var(--color-primary) calc(l + 20) c h);
      --color-visited: lch(from var(--color-primary) l calc(c + 10) h);

      /** Catppuccin surface 0 */
      --color-bg-alt: hsl(237deg 16% 23%);

      /** Catppuccin base */
      --color-bg: rgb(30, 30, 46);

      /* Catppuccin text */
      --color-text: hsl(226deg 64% 88%);

      /** Catppuccin Rosewater */
      --color-secondary: hsl(267deg 84% 81%);
      --color-headline: var(--color-text);
      --color-h1: var(--color-text);

      /* Catppuccin subtext 1 */
      --color-h2: hsl(227deg 35% 80%);
      --color-h3: var(--color-h2);
      --color-h4: var(--color-h2);

      /* Catppuccin subtext 0 */
      --color-h5: hsl(228deg 24% 72%);
      --color-h6: var(--color-h5);

      /* stylelint-disable-next-line value-keyword-case */
      --font-family-base:
        optima, candara, 'Noto Sans', source-sans-pro, sans-serif;
      --font-family-heading: var(--font-family-base);
      --nav-margin: 4vh;

      --button-color-bg: var(--color-bg-alt);

      /* Color of <code> blocks. Catppuccin green */
      --color-code: hsl(115deg, 54%, 76%);

      /* Catppuccin surface 1 */
      --button-color-hover-bg: hsl(234deg, 13%, 31%);
    }
  }

  @media (prefers-color-scheme: light) {
    :root,
    :host {
      --csstools-color-scheme--light:  ;
      color-scheme: dark;

      /** Catppuccin blue */
      --color-primary: hsl(220deg 91% 54%);
      --color-hover: lch(from var(--color-primary) calc(l + 20) c h);
      --color-visited: lch(from var(--color-primary) l calc(c + 10) h);

      /** Catppuccin surface 0 */
      --color-bg-alt: hsl(223deg 16% 83%);

      /** Catppuccin crust */
      --color-bg: rgb(239, 241, 245);

      /* Catppuccin text */
      --color-text: hsl(234deg 16% 35%);

      /** Catppuccin Rosewater */
      --color-secondary: hsl(266deg 85% 58%);
      --color-headline: var(--color-text);
      --color-h1: var(--color-text);

      /* Catppuccin subtext 1 */
      --color-h2: hsl(233deg 13% 41%);
      --color-h3: var(--color-h2);
      --color-h4: var(--color-h2);

      /* Catppuccin subtext 0 */
      --color-h5: hsl(233deg 10% 47%);
      --color-h6: var(--color-h5);

      /* stylelint-disable-next-line value-keyword-case */
      --font-family-base:
        optima, candara, 'Noto Sans', source-sans-pro, sans-serif;
      --font-family-heading: var(--font-family-base);
      --nav-margin: 4vh;

      --button-color-bg: var(--color-bg-alt);

      /* Color of <code> blocks. Catppuccin green */
      --color-code: hsl(109deg, 58%, 40%);

      /* Catppuccin surface 1 */
      --button-color-hover-bg: hsl(225deg, 14%, 77%);
    }
  }
}nav p {
    margin-bottom: var(--nav-margin);
    font-size: clamp(1.25rem, 0.7794rem + 2.3529vw, 2.25rem);
  }:is(nav p) a {
      font-family: var(--font-family-heading);
      padding-right: 0.3em;
    }.title h1 {
  margin-bottom: 0;
}/* Margin to separate the date from the post title a little bit */li[data-tags] i {
  margin-right: 0.3em;
}/* biome-ignore-all lint/complexity/noImportantStyles: important is important */button.upvote-button {
  --width: 2em;
  --height: 2em;

  margin-bottom: 2em;
}button.upvote-button svg {
    display: none;
  }button.upvote-button .upvote-count {
    color: var(--color-text);
  }/* when your post is untoasted */button.upvote-button .upvote-count::before {
    background: var(--untoast-icon);
    display: block;
    width: var(--width);
    height: var(--height);
    background-size: cover;
    content: '';
  }/* when your post has been toasted */:is(button.upvote-button [disabled]) .upvote-count::before {
      background: var(--toast-icon);
      display: block;
      width: var(--width);
      height: var(--height);
      background-size: cover;
      content: '';
    }pre {
  background-color: var(--color-bg-alt);
  display: block;
  padding: 1em;
  overflow-x: auto;
  margin-top: 0;
  margin-bottom: 2.5rem;
  font-size: 0.9em;
}/** The default highlight.css blue isn't good in dark mode */.highlight pre span {
    font-family:
      ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
      'DejaVu Sans Mono', monospace;
    /* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
    font-weight: 400 !important;
    line-height: var(--body-line-height);
    font-size: var(--font-size);
    /* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
    font-style: normal !important;
  }.nt:is(.highlight pre span) {
      /* biome-ignore lint/complexity/noImportantStyles: We have to override the built-in highlight styles*/
      color: hsl(217deg, 92%, 76%) !important;
    }code {
  font-family:
    ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
    'DejaVu Sans Mono', monospace;

  /** Monospace font looks a little bit bigger inline, so reduce its size a 
      little */
  font-size: clamp(0.9375rem, 0.8493rem + 0.4412vw, 1.125rem);
  line-height: var(--body-line-height);
}code,
kbd,
samp {
  color: var(--color-code);
  hyphens: none;
}pre > code {
  padding: 0;
  background-color: transparent;
  white-space: pre;
}a:has(code) {
  text-decoration-color: var(--color-code);
}div.tags {
  margin-bottom: 0.7rem;
}div.tags a {
    margin-right: 5px;
  }html {
  font-family: var(--font-family-base);
}body {
  line-height: var(--body-line-height);
  margin: auto;
  color: var(--color-text);
  background-color: var(--color-bg);
  padding: 13px;
  font-size: var(--font-size);
  width: var(--body-width);
  text-wrap: pretty;
  hyphens: auto;
}main h1:first-of-type {
  border-top: solid thin var(--color-secondary);
  margin-bottom: 1rem;
  padding-top: 1rem;
}h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-family-heading);
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 1.5rem;
  overflow-wrap: break-word;
  text-wrap: pretty;
  line-height: 1.1;
}a {
  -webkit-text-decoration: underline;
  text-decoration: underline;
  text-underline-offset: auto;
  color: var(--color-primary);
}a:visited {
    color: var(--color-visited);
  }a:hover {
    -webkit-text-decoration: none;
    text-decoration: none;
    color: var(--color-hover);
  }a.title {
  -webkit-text-decoration: none;
  text-decoration: none;
}a.title > h1 {
    color: var(--color-headline);
    font-size: clamp(3.75rem, 1.22vw + 3.46rem, 4.375rem);
    line-height: clamp(5.625rem, 0.122vw + 5.596rem, 5.688rem);
  }a.title:hover {
    -webkit-text-decoration: underline;
    text-decoration: underline;
  }h1 {
  color: var(--color-h1);

  /* 32px at 320px viewport */
  /* 64px at 1920px viewport */
  font-size: clamp(2rem, 1.6rem + 2vw, 4rem);
}h2 {
  color: var(--color-h2);

  /* 24px at 320px viewport */
  /* 48px at 1920px viewport */
  font-size: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
}h3 {
  color: var(--color-h3);

  /* 20px at 320px viewport */
  /* 36px at 1920px viewport */
  font-size: clamp(1.25rem, 1.05rem + 1vw, 2.25rem);
}h4 {
  color: var(--color-h4);

  /* 18px at 320px viewport */
  /* 28px at 1920px viewport */
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
}h5 {
  color: var(--color-h5);

  /* 18px at 320px viewport */
  /* 28px at 1920px viewport */
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
}h6 {
  color: var(--color-h6);

  /* 18px at 320px viewport */
  /* 28px at 1920px viewport */
  font-size: clamp(1.125rem, 1rem + 0.625vw, 1.75rem);
}p {
  margin-top: 0;
  margin-bottom: 2rem;
}small,
sub,
sup {
  /* 16px at 320px viewport */
  /* 19px at 1440px viewport */
  font-size: clamp(1rem, 0.9464rem + 0.2679vw, 1.1875rem);
}hr {
  border-color: var(--color-primary);
}ul {
  padding-left: 1.4em;
  margin-top: 0;
  margin-bottom: 2.5rem;
}li {
  margin-bottom: 0.4em;
}blockquote {
  margin-left: 0;
  margin-right: 0;
  padding: 0.8em 0.8em 0.8em 1em;
  border-left: 5px solid var(--color-primary);
  margin-bottom: 2.5rem;
  background-color: var(--color-bg-alt);
}blockquote p {
  margin-bottom: 0;
}img,
video {
  margin-bottom: 2.5rem;
}/* Bearblog puts img tags that aren't in markdown in p tags, adding extra 
   margin */p:has(img) {
  margin-bottom: 0;
}mark {
  background-color: var(--color-secondary);
}/* Tables */table {
  text-align: justify;
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}td,
th {
  padding: 0.5em;
  border-bottom: 1px solid var(--color-bg-alt);
}/* Buttons, forms and input */input,
textarea {
  border: 1px solid var(--color-text);
}:is(input,textarea):focus {
    border: 1px solid var(--color-primary);
  }textarea {
  width: 100%;
}.button,
button,
input[type='submit'],
input[type='reset'],
input[type='button'],
input[type='file']::file-selector-button {
  display: inline-block;
  padding: 5px 10px;
  text-align: center;
  -webkit-text-decoration: none;
  text-decoration: none;
  white-space: nowrap;
  background-color: var(--button-color-bg);
  color: var(--color-bg);
  border-radius: 5px;
  border: 1px solid var(--color-text);
  cursor: pointer;
  box-sizing: border-box;
}:is(.button,button,input[type='submit'],input[type='reset'],input[type='button'],input[type='file']::file-selector-button):hover {
    background-color: var(--button-color-hover-bg);
    color: var(--color-bg);
    outline: 0;
  }[disabled]:is(.button,button,input[type='submit'],input[type='reset'],input[type='button'],input[type='file']) {
    cursor: default;
  }:is(.button,button,input[type='submit'],input[type='reset'],input[type='button'],input[type='file']):focus-visible {
    outline-style: solid;
    outline-width: 2px;
  }textarea,
select,
input {
  color: var(--color-text);
  padding: 6px 10px; /* The 6px vertically centers text on FF, ignored by Webkit */
  margin-bottom: 10px;
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-bg-alt);
  border-radius: 4px;
  box-shadow: none;
  box-sizing: border-box;
}:is(textarea,select,input):focus {
    border: 1px solid var(--color-primary);
    outline: 0;
  }input[type='checkbox']:focus {
  outline: 1px dotted var(--color-primary);
}label,
legend,
fieldset {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}