:root {
      color-scheme: dark;
      --background: #000;
      --foreground: #f4f8f5;
      --muted: #d1d5db;
      --soft: #9ca3af;
      --line: rgb(255 255 255 / 14%);
      --panel: #080a08;
    }

    * { box-sizing: border-box; }
    html.booting { overflow: hidden; }

    body {
      min-height: 100vh;
      margin: 0;
      background: var(--background);
      color: var(--foreground);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      -webkit-font-smoothing: antialiased;
    }

    .particle-field {
      position: fixed;
      z-index: 0;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      pointer-events: none;
    }

    #cursor-stardust {
      position: fixed;
      z-index: 8;
      inset: 0;
      width: 100%;
      height: 100vh;
      height: 100dvh;
      pointer-events: none;
    }

    @media (max-width: 767px), (hover: none), (pointer: coarse) {
      #cursor-stardust { display: none; }
    }

    .boot-screen {
      position: fixed;
      inset: 0;
      z-index: 20;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: clamp(1rem, 5vw, 4rem);
      overflow: hidden;
      background: #000;
      color: #e5e7eb;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      transition: opacity 500ms ease, visibility 500ms ease;
    }

    .boot-screen.is-done { opacity: 0; visibility: hidden; }

    .boot-console {
      width: min(100%, 48rem);
      overflow: hidden;
      border: 1px solid rgb(74 222 128 / 24%);
      border-radius: .55rem;
      background: #050705;
      box-shadow: 0 0 3.5rem rgb(34 197 94 / 8%);
    }

    .boot-terminal-bar {
      display: flex;
      min-height: 2.35rem;
      align-items: center;
      gap: .55rem;
      padding: 0 1rem;
      border-bottom: 1px solid rgb(74 222 128 / 18%);
      background: #0b100c;
      color: #9ca3af;
      font-size: .68rem;
      letter-spacing: .04em;
    }

    .boot-terminal-mark { color: #4ade80; font-size: .8rem; }
    .boot-kicker { margin: 0 0 1.25rem; color: #4ade80; font-size: .68rem; letter-spacing: .14em; }

    .boot-output {
      height: min(34rem, calc(100vh - 6.5rem));
      height: min(34rem, calc(100dvh - 6.5rem));
      min-height: min(20rem, calc(100vh - 8.5rem));
      min-height: min(20rem, calc(100dvh - 8.5rem));
      padding: clamp(1rem, 4vw, 1.5rem);
      overflow: hidden;
      font-size: clamp(.72rem, 2.4vw, .88rem);
      line-height: 1.65;
    }

    .boot-entry { margin: .35rem 0; overflow-wrap: anywhere; }
    .boot-command { min-height: 1.5em; color: #f3f4f6; font-size: .82rem; }
    .boot-response { margin: -.2rem 0 .45rem .75rem; color: #e5e7eb; }
    .boot-prompt { color: #4ade80; }
    .boot-ok { color: #86efac; }
    .boot-typing::after {
      display: inline-block;
      margin-left: .08em;
      color: #86efac;
      content: "▋";
      animation: boot-blink 800ms steps(2, start) infinite;
    }

    .boot-ready { display: none; margin-top: 1rem; color: #4ade80; }
    .boot-ready.is-visible { display: block; }
    .boot-cursor {
      display: inline-block;
      width: .55rem;
      height: 1em;
      margin-left: .25rem;
      vertical-align: -.12em;
      background: #4ade80;
      animation: boot-blink 800ms steps(2, start) infinite;
    }

    @keyframes boot-blink { to { visibility: hidden; } }

    a { color: inherit; }

    a:focus-visible {
      outline: 2px solid #86efac;
      outline-offset: 4px;
    }

    .page-shell {
      position: relative;
      z-index: 1;
      width: min(100% - 2rem, 64rem);
      margin: 0 auto;
      padding: clamp(1.5rem, 6vw, 4rem) 0 6rem;
    }

    br.nav-content-space {
      display: block;
      height: clamp(1rem, 3vw, 2rem);
      line-height: 0;
    }

    @media (min-width: 761px) {
      br.nav-content-space {
        width: min(100%, 42rem);
        height: clamp(2.5rem, 5vw, 3.5rem);
        margin: 0 auto;
        border-top: 1px solid var(--line);
      }
    }

    .topbar {
      position: fixed;
      z-index: 11;
      top: calc(1rem + env(safe-area-inset-top));
      left: calc(1.25rem + env(safe-area-inset-left));
      right: calc(1.25rem + env(safe-area-inset-right));
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: .75rem;
      margin: 0;
    }

    .topbar a {
      min-height: auto;
      padding: .35rem 0;
      border: 0;
      border-radius: 0;
      background: transparent;
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -.04em;
    }

    .topbar a:hover {
      transform: none;
      border-color: transparent;
      background: transparent;
      color: #86efac;
    }

    .topbar a, .work-link {
      display: inline-flex;
      min-height: 2.75rem;
      align-items: center;
      gap: .5rem;
      padding: .65rem 1rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgb(255 255 255 / 4%);
      color: var(--foreground);
      font-size: .9rem;
      text-decoration: none;
      transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
    }

    .topbar a:hover, .work-link:hover {
      transform: translateY(-2px);
      border-color: rgb(255 255 255 / 34%);
      background: rgb(255 255 255 / 8%);
    }

    .topbar a {
      display: inline-flex;
      min-height: 2.75rem;
      align-items: center;
      padding: .4rem .7rem;
      border: 1px solid transparent;
      border-radius: .25rem;
      background: none;
      color: var(--foreground);
      font-size: 24px;
      font-weight: 600;
      letter-spacing: -.04em;
      transition: color 160ms ease;
    }

    .topbar .home-link {
      font-size: 24px;
      font-weight: 400;
      letter-spacing: 0;
    }

    .topbar a:hover {
      transform: none;
      border-color: var(--line);
      background: rgb(255 255 255 / 7%);
      color: #86efac;
    }

    .eyebrow {
      margin: 0;
      color: #86efac;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .75rem;
      letter-spacing: .14em;
      text-transform: uppercase;
    }

    h1 {
      margin: .8rem 0 0;
      font-size: clamp(2rem, 6vw, 3.25rem);
      letter-spacing: -.07em;
      line-height: 1;
    }

    .page-shell > header {
      width: min(100%, 42rem);
      margin-inline: auto;
      text-align: left;
    }

    .intro {
      max-width: 42rem;
      margin: 1.25rem 0 0;
      color: var(--muted);
      font-size: clamp(1rem, 2.4vw, 1.15rem);
      line-height: 1.8;
    }

    .category-filters {
      display: flex;
      flex-wrap: wrap;
      gap: .55rem;
      margin-top: 2rem;
    }

    .category-filter {
      min-height: 2.5rem;
      padding: .55rem 1rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      background: rgb(255 255 255 / 4%);
      color: var(--muted);
      font: inherit;
      font-size: .85rem;
      cursor: pointer;
    }

    .category-filter[aria-pressed="true"] {
      border-color: rgb(134 239 172 / 42%);
      background: rgb(74 222 128 / 10%);
      color: #bbf7d0;
    }

    .work-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      justify-items: center;
      gap: 1rem;
      margin-top: 3rem;
    }

    .work-grid .note { text-align: center; }

    .work-card {
      min-height: 15rem;
      padding: clamp(1.25rem, 4vw, 2rem);
      border: 1px solid rgb(255 255 255 / 13%);
      border-radius: .8rem;
      background: linear-gradient(145deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 1%));
    }

    .post-content {
      width: min(100%, 56rem);
      min-height: 0;
      padding: clamp(1.5rem, 4vw, 3rem);
      line-height: 1.85;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(13rem, 16rem);
      align-items: start;
      gap: 2rem;
    }

    .article-sidebar {
      position: sticky;
      top: 1.5rem;
      grid-column: 2;
      grid-row: 1;
      display: grid;
      gap: .75rem;
      align-self: start;
    }

    .article-toc {
      width: 100%;
      margin: 0;
      padding: 1rem 1.15rem;
      border: 1px solid var(--line);
      border-radius: .65rem;
      background: rgb(255 255 255 / 3%);
    }

    .article-toc h2 {
      margin: 0;
      font-size: .78rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .article-toc ol {
      display: grid;
      gap: .45rem;
      margin: .75rem 0 0;
      padding-left: 1.15rem;
      color: var(--soft);
      font-size: .82rem;
      line-height: 1.5;
    }

    .article-toc a {
      color: var(--muted);
      text-decoration: none;
    }

    .article-toc a:hover { color: #86efac; }
    .article-share {
      padding: .9rem 1rem;
      border: 1px solid var(--line);
      border-radius: .65rem;
      background: rgb(255 255 255 / 3%);
    }

    .article-share-title {
      margin: 0;
      color: var(--soft);
      font-size: .72rem;
      letter-spacing: .08em;
      text-transform: uppercase;
    }

    .share-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: .4rem;
      margin-top: .65rem;
    }

    .share-buttons a {
      display: inline-flex;
      width: 2.25rem;
      height: 2.25rem;
      align-items: center;
      justify-content: center;
      padding: 0;
      border: 1px solid var(--line);
      border-radius: .3rem;
      color: var(--muted);
      font-size: .75rem;
      text-decoration: none;
      transition: color 150ms ease, border-color 150ms ease, background-color 150ms ease;
    }

    .share-buttons a:focus-visible,
    .article-toc a:focus-visible {
      outline: 2px solid #86efac;
      outline-offset: 3px;
    }

    .share-buttons svg {
      width: 1.1rem;
      height: 1.1rem;
      fill: currentColor;
    }

    .share-buttons .threads-icon {
      fill: currentColor;
    }

    .share-buttons a:hover {
      border-color: rgb(134 239 172 / 45%);
      background: rgb(134 239 172 / 8%);
      color: #bbf7d0;
    }

    .post-article-text { grid-column: 1; grid-row: 1; }
    .post-article-text > h2 { scroll-margin-top: 2rem; }

    .project-card {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      justify-self: stretch;
      border-radius: 0;
    }

    .project-meta {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem 1.5rem;
      margin: 1rem 0 0;
      color: var(--muted);
      font-size: .9rem;
      line-height: 1.6;
    }

    .project-meta strong { color: var(--foreground); font-weight: 550; }

    .project-categories {
      display: flex;
      flex-wrap: wrap;
      gap: .5rem;
      margin-top: 1rem;
    }

    .project-category {
      padding: .4rem .65rem;
      border: 1px solid var(--line);
      color: var(--muted);
      font-size: .8rem;
      line-height: 1.35;
    }

    .video-frame {
      position: relative;
      width: min(100%, 36rem);
      aspect-ratio: 16 / 9;
      margin: 1.5rem 0 0;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: .75rem;
      background: #000;
    }

    .video-frame iframe {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      border: 0;
    }

    .work-number {
      color: var(--soft);
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .75rem;
      letter-spacing: .08em;
    }

    h2 {
      margin: 1.5rem 0 0;
      font-size: 1.2rem;
      font-weight: 600;
      letter-spacing: -.03em;
    }

    .work-card p {
      margin: .75rem 0 0;
      color: var(--muted);
      line-height: 1.75;
    }

    .work-link { margin-top: 1.25rem; font-size: .82rem; }

    .post-back-nav {
      width: min(100%, 42rem);
      margin: 0 auto 2rem;
    }
    .post-back-nav .work-link { margin: 0; }

    .note {
      margin: 2rem 0 0;
      color: var(--soft);
      font-size: .85rem;
      line-height: 1.7;
    }

    .site-footer {
      position: fixed;
      z-index: 10;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      gap: 1rem;
      padding: 1rem 1.5rem calc(1rem + env(safe-area-inset-bottom));
      background: transparent;
      backdrop-filter: none;
      color: #d1d5db;
      font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
      font-size: .75rem;
      animation-delay: 800ms;
    }

    .site-footer p { margin: 0; }
    .footer-details { display: grid; min-width: 0; gap: .3rem; }
    .footer-details p { overflow-wrap: anywhere; }
    .site-clock { display: flex; align-items: center; gap: .55rem; white-space: nowrap; }
    .clock-label { color: var(--soft); opacity: .72; font-size: .68rem; letter-spacing: .08em; }

    @media (max-width: 900px) {
      .site-footer { flex-wrap: wrap; }
    }

    @media (max-width: 760px) {
      .page-shell { width: min(100% - 1.5rem, 64rem); }
      .page-shell { padding-top: 5.5rem; }
      .topbar {
        top: 0;
        right: 0;
        left: 0;
        min-height: 4rem;
        flex-wrap: nowrap;
        align-items: center;
        padding: calc(.45rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) .45rem calc(1rem + env(safe-area-inset-left));
        background: linear-gradient(to bottom, #000 72%, rgb(0 0 0 / 0%));
      }
      .topbar a { padding: .3rem .4rem; font-size: clamp(18px, 5vw, 20px); }
      .topbar .home-link { font-size: inherit; }
      br.nav-content-space { display: none; }
      br.post-header-space { display: none; }
      .work-grid { grid-template-columns: 1fr; gap: .75rem; margin-top: 2rem; }
      .work-card { min-height: 0; }
      .post-content { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
      .article-sidebar { position: static; grid-column: 1; grid-row: 1; }
      .post-article-text { grid-column: 1; grid-row: 2; }
      .share-buttons a { width: 2.75rem; height: 2.75rem; }
      .topbar { margin-bottom: 3.5rem; }
      .site-footer { flex-wrap: wrap; }
      .page-shell { padding-bottom: 8rem; }
    }

    @media (max-width: 420px) {
      .site-footer { align-items: flex-start; flex-direction: column; }
      .site-clock { align-self: flex-end; }
    }

    @media (max-width: 700px) {
      .boot-screen { padding: 1rem; }
      .boot-output { padding: 1rem; font-size: .78rem; line-height: 1.5; }
      .boot-kicker { font-size: .62rem; letter-spacing: .1em; }
      .boot-terminal-bar { min-height: 2.1rem; padding-inline: .8rem; }
    }

    @media (max-width: 420px) {
      .boot-screen { padding: .5rem; }
      .boot-output { height: calc(100vh - 5rem); height: calc(100dvh - 5rem); min-height: 0; padding: .85rem; font-size: .65rem; line-height: 1.35; }
      .boot-command { font-size: .65rem; }
      .boot-kicker { margin-bottom: .65rem; font-size: .58rem; letter-spacing: .06em; }
      .boot-entry { margin: .15rem 0; }
      .boot-response { margin: -.1rem 0 .25rem .4rem; }
      .boot-terminal-bar { min-height: 2rem; font-size: .62rem; }
    }

    @media (max-width: 900px) and (max-height: 550px) {
      .boot-output { height: calc(100vh - 4rem); height: calc(100dvh - 4rem); min-height: 0; padding: .5rem; font-size: .56rem; line-height: 1.15; }
      .boot-kicker { margin-bottom: .35rem; font-size: .52rem; letter-spacing: .04em; }
      .boot-command { font-size: .58rem; }
      .boot-entry { margin: .08rem 0; }
      .boot-response { margin: 0 0 .12rem .25rem; }
      .boot-terminal-bar { min-height: 1.8rem; font-size: .58rem; }
    }

    @media (max-width: 760px) {
      body { display: flex; min-height: 100vh; min-height: 100dvh; flex-direction: column; }
      .page-shell { flex: 1; padding-bottom: 2rem; }
      .site-footer {
        position: static;
        align-items: center;
        flex-direction: column;
        justify-content: center;
        gap: .4rem;
        margin-top: auto;
        padding: .65rem 1rem calc(.65rem + env(safe-area-inset-bottom));
        text-align: center;
      }
      .footer-details { justify-items: center; }
      .site-clock { align-self: center; }
    }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
      .boot-screen { display: none; }
      .particle-field { display: none; }
    }
      /* Let the boot terminal grow to fit its complete command list. */
    .boot-output { box-sizing: border-box; height: auto; min-height: 0; max-height: calc(100vh - 6rem); max-height: calc(100dvh - 6rem); }
    @media (max-height: 550px) { .boot-output { max-height: calc(100vh - 4rem); max-height: calc(100dvh - 4rem); } }