website

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body { line-height: 1.5; }

img, picture, video, canvas, svg { display: block; max-width: 100%; }

input, button, textarea, select { font: inherit; }

p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; }

table { border-collapse: collapse; }

@view-transition {

  navigation: auto;

}

/* Cross-document view transitions (native browser MPA navigation, no JS).

   Astro's <ClientRouter /> does this via a client-side router; here the

   browser handles it directly off `@view-transition { navigation: auto }`

   above — this block just replaces the default cross-fade with a slightly

   nicer slide+fade, and keeps header/footer stable instead of fading with

   the rest of the page. The named ::view-transition-group(...) pair below

   operates on the browser's top-layer snapshot tree, not the regular DOM,

   so unlike the view-transition-name declarations themselves (nested

   inside header/footer below) it can't be scoped and has to stay global. */

::view-transition-old(root),

::view-transition-new(root) {

  animation-duration: 220ms;

  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

}

::view-transition-old(root) {

  animation-name: view-transition-fade-out, view-transition-slide-out;

}

::view-transition-new(root) {

  animation-name: view-transition-fade-in, view-transition-slide-in;

}

@keyframes view-transition-fade-out {

  to { opacity: 0; }

}

@keyframes view-transition-fade-in {

  from { opacity: 0; }

}

@keyframes view-transition-slide-out {

  to { transform: translateY(-8px); }

}

@keyframes view-transition-slide-in {

  from { transform: translateY(8px); }

}

::view-transition-group(site-header),

::view-transition-group(site-footer) {

  animation: none;

}

@media (prefers-reduced-motion: reduce) {

  ::view-transition-old(root),

  ::view-transition-new(root) {

    animation: none !important;

  }

}

:root {

  --color-black: light-dark(hsl(0, 0%, 0%), hsl(0, 0%, 0%));

  --color-white: light-dark(hsl(0, 0%, 100%), hsl(0, 0%, 100%));

  --color-accent: hsl(57.25deg 100% 70%);

  --color-body-bg: light-dark(hsl(0, 0%, 100%), hsl(210, 13%, 15%));

  --color-box-bg: light-dark(hsl(0, 0%, 95%), hsl(210, 13%, 9%));

  --color-text: light-dark(hsl(0, 0%, 13%), hsl(210, 17%, 98%));

  --color-link: light-dark(hsl(211, 100%, 45%), hsl(211, 100%, 60%));

  --color-post-link: light-dark(hsl(0, 0%, 0%), hsl(211, 100%, 60%));

  --color-highlight-bg: light-dark(hsl(210, 10%, 88%), hsl(210, 10%, 24%));

  --color-code-fg: light-dark(hsl(348, 86%, 43%), hsl(348, 86%, 80%));

  --color-code-bg: light-dark(hsl(0, 0%, 89%), hsl(210, 13%, 6%));

  --color-pre-bg: light-dark(hsl(0, 0%, 89%), hsl(210, 13%, 6%));

  --color-tag: light-dark(hsl(152, 96%, 35%), hsl(152, 96%, 44%));

  --token-comment: light-dark(hsl(220, 10%, 45%), hsl(220, 10%, 60%));

  --token-keyword: light-dark(hsl(310, 60%, 45%), hsl(310, 70%, 72%));

  --token-string: light-dark(hsl(95, 45%, 35%), hsl(95, 55%, 65%));

  --token-function: light-dark(hsl(210, 70%, 45%), hsl(210, 80%, 72%));

  --token-number: light-dark(hsl(25, 80%, 42%), hsl(25, 90%, 65%));

  --token-builtin: light-dark(hsl(175, 55%, 32%), hsl(175, 60%, 60%));

  --token-punctuation: light-dark(hsl(220, 8%, 40%), hsl(220, 8%, 70%));

  --token-tag: light-dark(hsl(0, 60%, 45%), hsl(0, 70%, 72%));

  --token-attr-name: light-dark(hsl(35, 70%, 38%), hsl(35, 80%, 65%));

  color-scheme: light dark;

  --btn-light: none;

  --btn-dark: block;

  /* Fluid type/space scale (utopia.fyi methodology): each token scales

     continuously between its min size at a 320px viewport and its max

     size at a 1280px viewport, replacing what used to be a hard jump at

     a single max-width:720px breakpoint. Structural changes (flex

     direction, grid column counts, sidebar widths) aren't continuous

     properties and stay as ordinary breakpoints elsewhere. */

  --fs-sm: clamp(1rem, calc(0.9667rem + 0.1667vw), 1.1rem);

  --fs-body: clamp(1.1rem, calc(1.05rem + 0.25vw), 1.25rem);

  --fs-md: clamp(1.15rem, calc(1.0667rem + 0.4167vw), 1.4rem);

  --fs-title-lg: clamp(1.6rem, calc(1.5083rem + 0.4583vw), 1.875rem);

  --fs-heading-md: clamp(1.2rem, calc(1.1rem + 0.5vw), 1.5rem);

  --fs-heading-sm: clamp(1rem, calc(0.9167rem + 0.4167vw), 1.25rem);

  --fs-repo-title: clamp(1.7rem, calc(1.6rem + 0.5vw), 2rem);

  --fs-repo-clone: clamp(0.7rem, calc(0.7rem + 0.5vw), 0.9rem);

  --fs-repo-subtitle: clamp(0.9rem, calc(0.9rem + 0.5vw), 1.1rem);

  --fs-hero-xl: clamp(1.65rem, calc(1.5333rem + 0.5833vw), 2rem);

  --fs-features: clamp(0.925rem, calc(0.8583rem + 0.3333vw), 1.125rem);

  --space-gap-fluid: clamp(0rem, calc(-0.6667rem + 3.3333vw), 2rem);

  --space-section-mb: clamp(0rem, calc(-0.3333rem + 1.6667vw), 1rem);

}

/* data-theme is tri-state: absent = follow OS (color-scheme: light dark

   above already does that), "light"/"dark" = explicit user override that

   must win even against an opposite OS preference. Every color below is

   driven by light-dark() reading this color-scheme value — no need to

   redeclare each variable per theme. */

:root[data-theme="light"] {

  color-scheme: light;

}

:root[data-theme="dark"] {

  color-scheme: dark;

}

@media (prefers-color-scheme: dark) {

  :root:not([data-theme]) {

    --btn-light: block;

    --btn-dark: none;

  }

}

:root[data-theme="dark"] {

  --btn-light: block;

  --btn-dark: none;

}

:root[data-theme="light"] {

  --btn-light: none;

  --btn-dark: block;

}

[data-tooltip] {

  position: relative;

  cursor: help;

}

[data-tooltip]::after {

  position: absolute;

  opacity: 0;

  pointer-events: none;

  content: attr(data-tooltip);

  left: 0;

  top: calc(100% + 10px);

  border-radius: 3px;

  box-shadow: 0 0 1px 1px var(--color-text);

  background-color: var(--color-box-bg);

  z-index: 10;

  padding: 8px;

  width: 300px;

  transform: translateY(-20px);

  transition: all 150ms cubic-bezier(0.25, 0.8, 0.25, 1);

}

[data-tooltip]:hover::after {

  opacity: 1;

  transform: translateY(0);

  transition-duration: 300ms;

}

body {

  display: flex;

  flex-direction: column;

  flex: 1;

  background-color: var(--color-body-bg);

  color: var(--color-text);

  font-family: system-ui;

  text-rendering: optimizeLegibility;

  font-variant-ligatures: common-ligatures;

  font-kerning: normal;

  font-size: var(--fs-body);

  line-height: 1.5;

  min-height: 100vh;

}

main {

  margin-top: 1rem;

  margin-bottom: 1rem;

  padding-bottom: 1em;

}

.wrapper {

  flex: 1;

  width: 100%;

  max-width: 72ch;

  margin-right: auto;

  margin-left: auto;

  padding-left: 1rem;

  padding-right: 1rem;

}

/* site-header.njk/site-footer.njk are plain includes (no wrapping custom

   element), so these are just nested under the real <header>/<footer>

   tag — plain CSS nesting scopes .logo/.links etc to it same as any other

   descendant selector would, no @scope needed since there's only ever

   one header and one footer on the page. */

header {

  background: #131618;

  view-transition-name: site-header;

  .logo {

    display: flex;

    font-size: 22px;

    line-height: 56px;

    font-weight: 400;

    margin-bottom: 0;

    float: left;

    color: var(--color-accent);

    margin-right: 8px;

    &.active,

    &:hover {

      color: var(--color-accent);

      text-decoration: underline;

      text-decoration-color: var(--color-accent);

      text-underline-offset: 8px;

    }

  }

  .links {

    display: flex;

    flex-direction: row;

    float: right;

    font-size: 1.4rem;

    line-height: 56px;

    color: white;

    #theme-switch {

      display: flex;

      align-items: center;

      font-size: 1.3rem;

      button {

        background: none;

        border: none;

        padding: 0;

        padding-right: 12px;

        margin-bottom: -2px;

        color: inherit;

        cursor: pointer;

        &:hover,

        &:focus,

        &:active {

          background: none;

          border: none;

          color: inherit;

        }

      }

    }

    a {

      display: inline-block;

      text-decoration: none;

      font-size: 22px;

      line-height: 56px;

      color: white;

      font-weight: 400;

      padding-left: 12px;

      padding-right: 12px;

      &:last-child {

        padding-right: 0px;

      }

      &.active,

      &:hover {

        color: var(--color-gray-200);

        text-decoration: underline;

        text-decoration-color: var(--color-accent);

        text-underline-offset: 8px;

      }

    }

  }

}

footer {

  background: #131618;

  view-transition-name: site-footer;

  .container {

    display: flex;

    flex-direction: row;

    flex: 1;

    padding: 16px 0px;

  }

  .spacer {

    flex: 1;

  }

  .copyright-container {

    display: flex;

    align-items: center;

    justify-content: center;

    margin-left: 0.5rem;

    margin-right: 0.5rem;

    color: var(--color-white);

    font-size: 1rem;

  }

  .link {

    font-size: 1rem;

    line-height: 1.5rem;

    margin-left: 0.5rem;

    color: var(--color-white);

    font-weight: 500;

    text-underline-offset: 2px;

    text-decoration-thickness: 2px;

    text-decoration-line: underline;

    text-decoration-color: white;

    &:hover {

      color: var(--color-gray-200);

      text-decoration-color: var(--color-gray-200);

    }

  }

}

/* Syntax highlighting theme: shared by code-view's own file-viewer pre and

   by fenced code blocks inside markdown-view's article content (both

   Prism-highlighted blog-post code and plain markdown-it README code

   fences). It's genuinely cross-cutting rather than owned by one

   component — scoping it to either would mean duplicating the whole token

   palette in the other — so it stays global.

   Background lives on pre.code-view/.markdown-body pre below, not here:

   code[class*="language-"] is inline and wraps a whole multi-line file, so

   giving IT a background paints one box per line box (only as wide as that

   line's text) instead of one clean rectangle behind the block. */

pre[class*="language-"],

code[class*="language-"] {

  color: var(--color-text);

}

pre[class*="language-"],

pre.code-view,

.markdown-body pre {

  padding: 1rem;

  margin: 1rem 0;

  overflow-x: auto;

  border-radius: 4px;

  line-height: 1.5;

}

/* File-viewer code (pre.code-view) matches the rest of that layout's

   0.9rem scale (see repos.css); blog/README fenced code blocks stay at

   0.8rem — they're a different context and weren't asked to change. */

pre.code-view {

  font-size: 0.9rem;

}

pre[class*="language-"],

.markdown-body pre {

  font-size: 0.8rem;

}

pre.code-view,

.markdown-body pre {

  background: var(--color-pre-bg);

  color: var(--color-text);

}

code[class*="language-"] {

  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

}

.token.comment,

.token.prolog,

.token.doctype,

.token.cdata {

  color: var(--token-comment);

  font-style: italic;

}

.token.keyword,

.token.selector,

.token.important,

.token.atrule {

  color: var(--token-keyword);

}

.token.string,

.token.char,

.token.attr-value,

.token.regex {

  color: var(--token-string);

}

.token.function,

.token.class-name {

  color: var(--token-function);

}

.token.number,

.token.boolean,

.token.constant {

  color: var(--token-number);

}

.token.builtin,

.token.deleted {

  color: var(--token-builtin);

}

.token.punctuation,

.token.operator {

  color: var(--token-punctuation);

}

.token.tag {

  color: var(--token-tag);

}

.token.attr-name,

.token.property {

  color: var(--token-attr-name);

}