/* styles/variables.css */
:root {
  --container-width: 100%;
  --font-family-sans-serif:
    "Segoe UI",
    "-apple-system",
    "BlinkMacSystemFont",
    "Roboto",
    "Helvetica Neue",
    "Arial",
    "Noto Sans",
    sans-serif,
    "Segoe UI Emoji",
    "Segoe UI Symbol",
    "Apple Color Emoji",
    "Noto Color Emoji";
  --font-family-monospace:
    "Iosevka",
    "Iosevka NF",
    "PT Mono",
    "Consolas",
    "SFMono-Regular",
    "Menlo",
    "Monaco",
    "Andale Mono",
    "Ubuntu Mono",
    "Liberation Mono",
    "Courier New",
    monospace;
  --text-color: light-dark(#444, #ccc);
  --background-color: light-dark(#eee, #111);
  --link-color: light-dark(hsl(200, 100%, 27%), hsl(200, 50%, 50%));
  @media screen and (min-width: 768px) {
    --container-width: min(100%, 768px);
  }
}

/* styles/reset.css */
*,
*::before,
*::after {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  font-family: var( --font-family-sans-serif );
  color: black;
  text-align: left;
  background-color: white;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
[tabindex="-1"]:focus:not(:focus-visible) {
  outline: 0 !important;
}
hr {
  margin: 1rem 0;
  color: inherit;
  background-color: currentColor;
  border: 0;
  opacity: 0.25;
  &:not([size]) {
    height: 1px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2rem;
}
h3 {
  font-size: 1.75rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
h6 {
  font-size: 1rem;
}
p,
ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}
ul,
ol {
  padding-left: 2rem;
  ul,
  ol {
    margin-bottom: 0;
  }
}
dt {
  font-weight: bold;
}
dd {
  margin-bottom: .5rem;
  margin-left: 0;
}
blockquote {
  margin: 0 0 1rem;
}
b,
strong {
  font-weight: bolder;
}
small {
  font-size: 0.875em;
}
sub,
sup {
  position: relative;
  font-size: 0.75em;
  line-height: 0;
  vertical-align: baseline;
}
sub {
  bottom: -.25em;
}
sup {
  top: -.5em;
}
a,
a:hover {
  color: blue;
  text-decoration: underline;
  &:not([href]) {
    color: inherit;
    text-decoration: none;
  }
}
pre,
code,
kbd,
samp {
  font-family: var( --font-family-monospace );
  font-size: 1em;
}
pre,
code {
  font-size: 0.875rem;
  color: rgb(17.32%, 54.02%, 4.21%);
}
pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}
code {
  word-wrap: break-word;
  a > & {
    color: inherit;
  }
}
figure {
  margin: 0 0 1rem;
}
img,
svg {
  vertical-align: middle;
}
table {
  caption-side: bottom;
  border-collapse: collapse;
}
caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: #6c757d;
  text-align: left;
}
th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}
label {
  display: inline-block;
}
button {
  border-radius: 0;
}
input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
select {
  word-wrap: normal;
}
textarea {
  resize: vertical;
}
output {
  display: inline-block;
}
summary {
  display: list-item;
  cursor: pointer;
}
progress {
  vertical-align: baseline;
}
[hidden] {
  display: none !important;
}

/* styles/code.css */
:root {
  --dracula-background: light-dark(#fff, #282a36);
  --dracula-foreground: light-dark(#282a36, #f8f8f2);
  --dracula-selection: light-dark(#cbcee5, #44475a);
  --dracula-comment: light-dark(#8393c7, #6272a4);
  --dracula-red: light-dark(#de353d, #ff5555);
  --dracula-orange: light-dark(#a56a20, #ffb86c);
  --dracula-yellow: light-dark(#707e0f, #f1fa8c);
  --dracula-green: light-dark(#008a0d, #50fa7b);
  --dracula-purple: light-dark(#8963c4, #bd93f9);
  --dracula-cyan: light-dark(#048395, #8be9fd);
  --dracula-pink: light-dark(#c74493, #ff79c6);
  --code-background: var(--dracula-background);
  --code-foreground: var(--dracula-foreground);
  --code-selection: var(--dracula-selection);
  --code-comment: var(--dracula-comment);
  --code-red: var(--dracula-red);
  --code-orange: var(--dracula-orange);
  --code-yellow: var(--dracula-yellow);
  --code-green: var(--dracula-green);
  --code-purple: var(--dracula-purple);
  --code-cyan: var(--dracula-cyan);
  --code-pink: var(--dracula-pink);
}
::highlight(code-color-background) {
  color: var(--code-background);
}
::highlight(code-color-foreground) {
  color: var(--code-foreground);
}
::highlight(code-color-selection) {
  color: var(--code-selection);
}
::highlight(code-color-comment) {
  color: var(--code-comment);
}
::highlight(code-color-red) {
  color: var(--code-red);
}
::highlight(code-color-orange) {
  color: var(--code-orange);
}
::highlight(code-color-yellow) {
  color: var(--code-yellow);
}
::highlight(code-color-green) {
  color: var(--code-green);
}
::highlight(code-color-purple) {
  color: var(--code-purple);
}
::highlight(code-color-cyan) {
  color: var(--code-cyan);
}
::highlight(code-color-pink) {
  color: var(--code-pink);
}
::highlight(code-background-color-background) {
  background-color: var(--code-background);
}
::highlight(code-background-color-foreground) {
  background-color: var(--code-foreground);
}
::highlight(code-background-color-selection) {
  background-color: var(--code-selection);
}
::highlight(code-background-color-comment) {
  background-color: var(--code-comment);
}
::highlight(code-background-color-red) {
  background-color: var(--code-red);
}
::highlight(code-background-color-orange) {
  background-color: var(--code-orange);
}
::highlight(code-background-color-yellow) {
  background-color: var(--code-yellow);
}
::highlight(code-background-color-green) {
  background-color: var(--code-green);
}
::highlight(code-background-color-purple) {
  background-color: var(--code-purple);
}
::highlight(code-background-color-cyan) {
  background-color: var(--code-cyan);
}
::highlight(code-background-color-pink) {
  background-color: var(--code-pink);
}
code[class*=language-] {
  color: var(--code-foreground);
  background: var(--code-background);
  text-shadow: none;
  font-family: var(--font-family-monospace);
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
  &::selection {
    background-color: var(--code-selection);
  }
}
pre {
  margin: 1rem 0;
  display: grid;
  grid-template-areas: "code";
  --border-radius: 0.5em;
  > code {
    grid-area: code;
    display: block;
    padding: 1rem;
    overflow: auto;
    border-radius: var(--border-radius);
  }
  &[data-filename][data-linenumbers] {
    grid-template-areas: "filename    filename" "linenumbers code";
    grid-template-columns: min-content 1fr;
  }
  &[data-filename] {
    grid-template-areas: "filename" "code";
  }
  &[data-linenumbers] {
    grid-template-areas: "linenumbers code";
    grid-template-columns: min-content 1fr;
  }
  &[data-filename] {
    &::after {
      grid-area: filename;
      content: attr(data-filename);
      width: max-content;
      padding: 0.5em 1em;
      background: color-mix(in srgb, var(--code-background), transparent 25%);
      color: rgba(115, 138, 148, .8);
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }
    > code {
      margin-top: 0;
      border-top-left-radius: 0;
    }
  }
  &[data-linenumbers] {
    &::before {
      grid-area: linenumbers;
      content: attr(data-linenumbers);
      padding: 1rem 1.5ex 0 1rem;
      text-align: right;
      background: var(--code-background);
      color: rgba(115, 138, 148, .4);
      pointer-events: none;
      border-top-left-radius: var(--border-radius);
      border-bottom-left-radius: var(--border-radius);
    }
    > code {
      padding-left: 0;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }
  &[data-filename][data-linenumbers] {
    &::before {
      border-top-left-radius: 0;
    }
  }
}
:not(pre) > code[class*=language-] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}

/* styles/directives/browser-window.css */
figure.browser-window {
  padding: 4px;
  box-shadow:
    inset -1px -1px #404040,
    inset 1px 1px #d4d0c8,
    inset -2px -2px #808080,
    inset 2px 2px #ffffff,
    inset 0 0 0 4px #d4d0c8;
  > figcaption {
    background:
      linear-gradient(
        to right,
        #0a246a,
        #a6caf0);
    color: white;
    font-family: Verdana;
    position: relative;
    font-weight: bold;
    padding-inline: 4px;
    &::after {
      margin-inline: -4px;
      content: attr(data-url);
      display: block;
      background-color: #ffffff;
      color: #000000;
      font-weight: normal;
      border-top: 2px solid #d4d0c8;
      border-bottom: 4px solid #d4d0c8;
      padding: 2px 4px;
      box-shadow:
        inset -1px -1px #ffffff,
        inset 1px 1px #808080,
        inset -2px -2px #d4d0c8,
        inset 2px 2px #404040;
    }
  }
  > main {
    background-color: white;
    color: black;
    overflow: auto;
    margin: 2px;
    box-shadow:
      -1px -1px #404040,
      0px -1px #404040,
      -1px 0px #404040,
      1px 1px #d4d0c8,
      1px -1px #d4d0c8,
      -1px 1px #d4d0c8,
      -2px -2px #808080,
      1px -2px #808080,
      -2px 1px #808080,
      2px 2px #ffffff,
      2px -2px #ffffff,
      -2px 2px #ffffff;
  }
}

/* styles/site.css */
:root {
  color-scheme: light dark;
}
body {
  color: var( --text-color );
  background-color: var( --background-color );
  > header {
    --logo-size: 100px;
    @media screen and (min-width: 768px) {
      --logo-size: 200px;
    }
    display: grid;
    grid-template-columns: 1fr var(--logo-size) 1fr;
    grid-template-rows: 15vmin var(--logo-size) 15vmin min-content;
    figure {
      grid-area: 1 / 1 / 5 / 4;
      z-index: 1;
      margin: 0;
      display: grid;
      grid-template-columns: subgrid;
      grid-template-rows: subgrid;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        grid-area: 1 / 1 / 4 / 4;
      }
      figcaption {
        grid-column: 1 / 4;
        grid-row: 4 / 5;
        justify-self: end;
        font-size: 0.75rem;
        display: flex;
        flex-direction: column;
        align-items: end;
        margin: 0.5em 1em;
        color: light-dark(#595959, #999999);
      }
    }
    .logo-link {
      display: block;
      color: inherit;
      grid-area: 2/2;
      place-self: center;
      z-index: 2;
      &,
      svg {
        width: 100%;
        height: 100%;
      }
      svg {
        fill: white;
      }
    }
  }
  > main {
    width: var( --container-width );
    margin: 0 auto;
    padding: 5vmin 5vmin 10vmin;
  }
}
a,
a:hover {
  color: var( --link-color );
}
body > main {
  display: flex;
  flex-direction: column;
  gap: 10vmin;
}
body > main > article > main {
  a:is([href^="http://"], [href^="https://"]) {
    &::after {
      content: "\260d";
      vertical-align: super;
      margin-top: -1em;
      display: inline-block;
    }
  }
}
img {
  max-width: 100%;
  height: auto;
}
kbd:not(:has(kbd)),
kbd kbd {
  outline: 1px solid rgb(from currentColor r g b / 50%);
  border-radius: 0.5ex;
  padding-inline: 0.5ex;
}
kbd:has(kbd) {
  margin-inline: 0.5ex;
  kbd:not(:first-child) {
    margin-left: 0.25ex;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
  kbd:not(:last-child) {
    margin-right: 0.25ex;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
}
/*# sourceMappingURL=site-6NVYQ2FC.css.map */