/* ── Theme shared with blog.szczepan.org: white/black with an orange accent ── */
      :root {
        color-scheme: light dark;

        --font-family: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
        --font-family-monospace:
          "SF Mono", "Monaco", "Inconsolata", "Roboto Mono",
          "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;

        /* Brand accent - constant across themes */
        --brand-color: #eb3f00;

        --color-gray-20: rgb(0 0 0 / 0.1);
        --color-gray-90: rgb(5 5 5 / 0.55);

        /* Light theme */
        --background-color: #ffffff;
        --background-color-secondary: #f6f6f6;
        --text-color: rgb(3 9 17 / 0.92);
        --text-color-secondary: rgb(5 5 5 / 0.7);
        /* Links carry the accent in the underline, not the text, so the
           orange stays reserved for the hover affordance. */
        --text-color-link: var(--text-color);
        --text-color-link-active: var(--text-color);
        --text-color-link-visited: var(--text-color);
        --link-underline: color-mix(
          in oklch,
          var(--brand-color) 30%,
          transparent
        );
        --link-underline-active: var(--brand-color);

        --color-accent: var(--brand-color);
        --color-success: oklch(52% 0.14 150);
        --color-warning: oklch(62% 0.14 85);
        --color-error: oklch(53% 0.2 27);

        --color-border: rgb(0 0 0 / 0.1);
        --color-shadow: rgb(3 9 17 / 0.14);
        --color-selection: var(--brand-color);
        --color-selection-text: #ffffff;

        --color-code-bg: #f6f6f6;
        --color-code-border: rgb(0 0 0 / 0.1);
        --color-code-text: rgb(3 9 17 / 0.92);

        --surface-elevated: color-mix(
          in oklch,
          var(--background-color-secondary) 86%,
          var(--background-color)
        );
        --surface-muted: color-mix(
          in oklch,
          var(--background-color-secondary) 72%,
          var(--background-color)
        );
        --surface-accent: color-mix(
          in oklch,
          var(--color-accent) 12%,
          var(--background-color-secondary)
        );
        --focus-ring-color: color-mix(
          in oklch,
          var(--color-accent) 84%,
          var(--background-color)
        );
        --focus-ring-halo: color-mix(
          in oklch,
          var(--background-color) 65%,
          var(--color-accent)
        );
      }

      :root[data-theme="light"] {
        color-scheme: light;
      }

      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) {
          color-scheme: dark;

          --color-gray-20: hsl(0 0% 100% / 0.12);
          --color-gray-90: hsl(0 0% 100% / 0.45);

          --background-color: #17191e;
          --background-color-secondary: #1e2127;
          --text-color: hsl(0 0% 100% / 0.85);
          --text-color-secondary: hsl(0 0% 100% / 0.65);
          --link-underline: color-mix(
            in oklch,
            var(--brand-color) 40%,
            transparent
          );
          --link-underline-active: #ff5a1f;

          --color-success: oklch(76% 0.12 150);
          --color-warning: oklch(82% 0.14 85);
          --color-error: oklch(72% 0.17 27);

          --color-border: hsl(0 0% 100% / 0.12);
          --color-shadow: rgb(0 0 0 / 0.6);

          --color-code-bg: #101216;
          --color-code-border: hsl(0 0% 100% / 0.08);
          --color-code-text: hsl(0 0% 100% / 0.85);
        }
      }

      :root[data-theme="dark"] {
        color-scheme: dark;

        --color-gray-20: hsl(0 0% 100% / 0.12);
        --color-gray-90: hsl(0 0% 100% / 0.45);

        --background-color: #17191e;
        --background-color-secondary: #1e2127;
        --text-color: hsl(0 0% 100% / 0.85);
        --text-color-secondary: hsl(0 0% 100% / 0.65);
        --link-underline: color-mix(
          in oklch,
          var(--brand-color) 40%,
          transparent
        );
        --link-underline-active: #ff5a1f;

        --color-success: oklch(76% 0.12 150);
        --color-warning: oklch(82% 0.14 85);
        --color-error: oklch(72% 0.17 27);

        --color-border: hsl(0 0% 100% / 0.12);
        --color-shadow: rgb(0 0 0 / 0.6);

        --color-code-bg: #101216;
        --color-code-border: hsl(0 0% 100% / 0.08);
        --color-code-text: hsl(0 0% 100% / 0.85);
      }

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

      :focus-visible {
        outline: 2px solid var(--focus-ring-color);
        outline-offset: 3px;
        box-shadow: 0 0 0 3px var(--focus-ring-halo);
      }

      * {
        box-sizing: border-box;
      }

      html {
        overflow-y: scroll;
        font-size: 18px;
        scroll-behavior: smooth;
      }

      html,
      body {
        padding: 0;
        margin: 0 auto;
        font-family: var(--font-family);
        color: var(--text-color);
        background-color: var(--background-color);
        line-height: 1.65;
        font-optical-sizing: auto;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }

      body {
        max-width: 44rem;
      }

      .visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
      }

      p {
        line-height: 1.68;
      }

      p:last-child {
        margin-bottom: 0;
      }

      h1,
      h2,
      h3,
      h4 {
        line-height: 1.2;
        font-weight: 700;
        letter-spacing: -0.018em;
      }

      h1 {
        font-size: 2.2rem;
        font-weight: 800;
        letter-spacing: -0.025em;
      }

      h2 {
        font-size: 1.6rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        margin-top: 2.5rem;
      }

      h3 {
        font-size: 1.25rem;
      }

      a[href] {
        color: var(--text-color-link);
        text-decoration: none;
      }

      a[href]:visited {
        color: var(--text-color-link-visited);
      }

      a[href]:hover,
      a[href]:active {
        color: var(--text-color-link-active);
      }

      /* Sliding underline on prose links: a faint orange rule sits at rest,
         and a solid one slides across it on hover. */
      main a[href] {
        background-image: linear-gradient(
            var(--link-underline-active),
            var(--link-underline-active)
          ),
          linear-gradient(var(--link-underline), var(--link-underline));
        background-position:
          0% 100%,
          0% 100%;
        background-repeat: no-repeat, no-repeat;
        background-size:
          0% 2px,
          100% 2px;
        transition: background-size 0.25s ease;
      }

      main a[href]:hover,
      main a[href]:active {
        background-size:
          100% 2px,
          100% 2px;
      }

      main,
      footer {
        padding: 1rem;
      }

      main :first-child {
        margin-top: 0;
      }

      /* ── Header & nav ─────────────────────────────────────────────── */
      header {
        display: flex;
        gap: 1em;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: center;
        padding: 1em;
        border-bottom: 1px dashed var(--color-border);
      }

      header nav {
        margin-left: auto;
      }

      header .theme-toggle {
        flex-shrink: 0;
      }

      .home-link {
        flex-grow: 1;
        font-size: 1em;
        font-weight: 700;
      }

      .home-link:link:not(:hover) {
        text-decoration: none;
      }

      /* Header links sit in the foreground text colour rather than the link
         colour; the accent is reserved for hover. */
      header a[href],
      header a[href]:visited {
        color: var(--text-color);
      }

      header a[href]:hover,
      header a[href]:active {
        color: var(--color-accent);
      }

      .nav {
        display: flex;
        gap: 0.5em 1em;
        padding: 0;
        margin: 0;
        list-style: none;
        flex-wrap: wrap;
      }

      .nav-item {
        display: inline-block;
      }

      .nav-item a[href] {
        text-decoration: none;
      }

      .theme-toggle {
        border: 1px solid var(--color-border);
        background-color: var(--surface-elevated);
        color: var(--text-color);
        border-radius: 999px;
        width: 2rem;
        height: 2rem;
        padding: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        font: inherit;
        line-height: 0;
        box-shadow: 0 8px 22px -20px var(--color-shadow);
        transition:
          background-color 0.2s ease,
          border-color 0.2s ease,
          box-shadow 0.2s ease;
      }

      .theme-toggle:hover {
        background-color: var(--surface-muted);
        border-color: color-mix(
          in oklch,
          var(--color-accent) 35%,
          var(--color-border)
        );
        box-shadow: 0 12px 28px -20px var(--color-shadow);
      }

      .theme-toggle__icon {
        display: block;
        width: 1rem;
        height: 1rem;
      }

      .theme-toggle__icon--moon {
        display: none;
      }

      :root[data-theme="dark"] .theme-toggle__icon--sun {
        display: none;
      }

      :root[data-theme="dark"] .theme-toggle__icon--moon {
        display: block;
      }

      @media (prefers-color-scheme: dark) {
        :root:not([data-theme="light"]) .theme-toggle__icon--sun {
          display: none;
        }
        :root:not([data-theme="light"]) .theme-toggle__icon--moon {
          display: block;
        }
      }

      /* ── Hero ─────────────────────────────────────────────────────── */
      .hero {
        margin-top: 2rem;
      }

      .lede {
        font-size: 1.15rem;
        color: var(--text-color-secondary);
      }

      /* ── SDF animation ────────────────────────────────────────────── */
      pre {
        font-family: var(--font-family-monospace);
        background-color: var(--color-code-bg);
        border: 1px solid var(--color-code-border);
        border-radius: 8px;
        padding: 1em;
        overflow-x: auto;
        line-height: 1.4;
        color: var(--color-code-text);
      }

      .animation-card {
        background-color: var(--color-code-bg);
        border: 1px solid var(--color-code-border);
        border-radius: 8px;
        padding: 1.25em 1em 0.9em;
        margin: 1.5rem 0;
        box-shadow: 0 20px 36px -34px var(--color-shadow);
        text-align: center;
      }

      .animation-frame {
        display: inline-block;
        margin: 0 auto;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
        color: var(--color-accent);
        line-height: 1;
        letter-spacing: 0;
        font-size: clamp(0.4rem, 1.3vw, 0.55rem);
        white-space: pre;
        overflow: hidden;
        max-width: 100%;
      }

      .shape-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 0.4em;
        justify-content: center;
        margin-top: 0.85em;
      }

      .shape-btn {
        font: inherit;
        font-size: 0.75rem;
        line-height: 1.1;
        padding: 0.2rem 0.6rem;
        border-radius: 999px;
        border: 1px solid
          color-mix(in oklch, var(--color-accent) 30%, var(--color-border));
        background-color: color-mix(
          in oklch,
          var(--color-accent) 8%,
          var(--background-color-secondary)
        );
        color: var(--text-color-secondary);
        cursor: pointer;
        transition:
          background-color 0.2s ease,
          border-color 0.2s ease,
          color 0.2s ease;
      }

      .shape-btn:hover {
        color: var(--text-color);
        border-color: var(--color-accent);
      }

      .shape-btn[aria-pressed="true"] {
        background-color: var(--surface-accent);
        color: var(--color-accent);
        border-color: var(--color-accent);
        font-weight: 600;
      }

      /* ── Projects ─────────────────────────────────────────────────── */
      .projects {
        list-style: none;
        padding: 0;
        margin: 1.5rem 0;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
        gap: 1rem;
      }

      .project-card {
        background-color: var(--surface-elevated);
        border: 1px solid var(--color-border);
        border-radius: 8px;
        padding: 1.1rem 1.2rem;
        box-shadow: 0 12px 28px -24px var(--color-shadow);
      }

      .project-card h3 {
        margin: 0 0 0.4rem;
        font-size: 1.1rem;
      }

      .project-card p {
        margin: 0;
        font-size: 0.9rem;
        color: var(--text-color-secondary);
      }

      /* ── Contact ──────────────────────────────────────────────────── */
      .email-frame {
        display: inline-block;
        margin: 0.75rem 0 0;
        padding: 0.5em 0.75em;
        color: var(--color-accent);
        line-height: 1.2;
        letter-spacing: 0.05em;
        font-size: 0.85rem;
      }

      /* ── Footer ───────────────────────────────────────────────────── */
      footer {
        border-top: 1px dashed var(--color-border);
        text-align: center;
        color: var(--text-color-secondary);
        font-size: 0.9rem;
        margin-top: 2rem;
      }

      footer .colophon {
        font-size: 0.8rem;
        font-style: italic;
      }

      /* ── Reduced motion & small screens ───────────────────────────── */
      @media (prefers-reduced-motion: reduce) {
        html {
          scroll-behavior: auto;
        }

        *,
        *::before,
        *::after {
          animation-duration: 0.01ms !important;
          animation-iteration-count: 1 !important;
          transition-duration: 0.01ms !important;
        }
      }

      @media (max-width: 600px) {
        h1 {
          font-size: 1.8rem;
        }

        .nav {
          gap: 0.4em 0.8em;
        }
      }