@font-face{font-family:'PP Neue Montreal';font-style:normal;font-weight:500;font-display:swap;src:url('assets/fonts/PPNeueMontreal-Medium.woff2') format('woff2');}@font-face{font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url('assets/fonts/inter-latin.woff2') format('woff2');}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-font-smoothing: antialiased; }
    h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
    p, li, blockquote { text-wrap: pretty; }
    *:focus { outline: none; }
    *:focus-visible { outline: 1.5px solid #EC4899; outline-offset: 2px; border-radius: 4px; }

    :root {
  --bg:          #fafaf9;
  --text:        #1c1917;
  --text-muted:  #78716c;
  --btn-hover:   #e7e5e4;
  --nav-bg:      #1c1917;
  --nav-text:    #d6d3d1;
  --nav-active:  #44403c;
  --or-line:     #e7e5e4;
  --tooltip-bg:  #1c1917;
  --tooltip-key: #44403c;
}
[data-theme="dark"] {
  --bg:          #1e1e1e;
  --text:        #fafaf9;
  --text-muted:  #a8a29e;
  --btn-hover:   #57534e;
  --nav-bg:      #2a2a2a;
  --nav-text:    #a8a29e;
  --nav-active:  #3a3a3a;
  --or-line:     #44403c;
  --tooltip-bg:  #3a3a3a;
  --tooltip-key: #57534e;
}

    html {
      height: 100%;
      background: #fafaf9;
      transition: background-color 300ms ease-in-out;
    }
    body {
      min-height: 100vh;
      background: transparent;
      color: var(--text);
      transition: color 300ms ease-in-out;
      overflow-x: hidden;
    }

    #site-header {
      position: fixed;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      width: min(430px, calc(100% - 40px));
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 24px;
    }

    #site-logo {
      display: block;
      color: var(--text);
      transition: color 300ms ease-in-out;
    }

    #theme-toggle {
      width: 32px;
      height: 32px;
      background: transparent;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background-color 150ms ease-out, transform 100ms ease-out;
      will-change: transform;
    }
    #theme-toggle:hover { background-color: transparent; }

    .toggle-icon {
      color: #1c1917;
      transform-origin: center;
      transition: transform 350ms ease-in-out, color 350ms ease-in-out;
      will-change: transform, color;
    }
    [data-theme="dark"] .toggle-icon {
      transform: rotate(180deg);
      color: #fafaf9;
    }

    .nav-bar {
      box-shadow:
        inset 0 0 0 1px #1e1e1e,
        0 4px 6px -1px rgb(0 0 0 / 0.25),
        0 2px 4px -2px rgb(0 0 0 / 0.15);
    }
    .nav-item {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 4px;
      color: #a8a29e;
      transition: color 150ms ease-out, background-color 150ms ease-out, transform 100ms ease-out;
      will-change: transform;
      flex-shrink: 0;
    }
    .nav-item:hover { color: #fafaf9; }
    .nav-item.active {
      background: var(--nav-active);
      color: #fafaf9;
    }