[data-theme="light"] {
    --bg: #f8f9fb;
    --content-bg: #ffffff;
    --nav-hover: #eef1f5;
    --card-bg: #fdfdfe;
    --text: #1a1a1a;
    --text-muted: #666;
    --border: #e0e4e8;
    --accent: #d946ef;
  }
  [data-theme="dark"] {
    --bg: #0e0f12;
    --content-bg: #121418;
    --nav-hover: #1b1e24;
    --card-bg: #161a20;
    --text: #e9ecf1;
    --text-muted: #8a909b;
    --border: #23272f;
    --accent: #d946ef;
  }
  :root {
    --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
    --radius: 6px;
    --radius-sm: 4px;
  }
  *, *::before, *::after { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    font-family: var(--mono);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--text); text-decoration: none; }
  a:hover { color: var(--accent); }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
  ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

  .page {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 18px 22px;
    gap: 24px;
    max-width: 720px;
    margin: 0 auto;
  }

   .feather {
    /*width: 20px;
    height: 20px;
    */
    width: 100%;
    height: 100%;
    stroke: currentColor;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
  }

  .icon-svg {
    stroke: currentColor;
    background-color: var(--accent);
  }

  /* ---- top: just the theme toggle ---- */
  .top { display: flex; justify-content: flex-end; }
  .icon-btn {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
  }
  .icon-btn:hover { background: var(--nav-hover); color: var(--text); }
  .icon-btn svg { width: 14px; height: 14px; }

  /* ---- main ---- */
  main { display: flex; flex-direction: column; gap: 22px; }

  .greeting { margin: 0; font-size: 13px; font-weight: 500; }

  .links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    font-family: var(--sans);
    font-size: 13px;
  }
  .links a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-color: color-mix(in srgb, var(--accent) 50%, transparent);
  }
  .links a:hover { text-decoration-color: var(--accent); }
  .links a span.label { color: var(--text); text-decoration: none; }
  .links svg { width: 14px; height: 14px; color: var(--text); flex-shrink: 0; }

  /* ---- project cards ---- */
  .projects {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .projects-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    margin: 0 0 4px;
  }
  .project {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--content-bg);
    color: var(--text);
    transition: background .12s, border-color .12s, transform .12s;
  }
  .project:hover {
    background: var(--nav-hover);
    border-color: color-mix(in srgb, var(--border) 50%, var(--text-muted));
    color: var(--text);
  }
  .project-icon {
    width: 32px; height: 32px;
    flex-shrink: 0;
    display: grid; place-items: center;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--card-bg);
    color: var(--text);
  }
  .project-icon svg { width: 16px; height: 16px; }
  .project-meta { min-width: 0; flex: 1; }
  .project-title {
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
  }
  .project-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin: 0;
    font-family: var(--sans);
  }
  .project-arrow {
    color: var(--text-muted);
    font-size: 14px;
    transition: transform .15s, color .15s;
  }
  .project:hover .project-arrow { color: var(--accent); transform: translateX(2px); }

  /* ---- bottom ---- */
  .bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 11px;
    color: var(--text-muted);
  }
  .bottom .links-foot {
    display: inline-flex;
    gap: 12px;
    font-family: var(--sans);
  }
  .bottom .links-foot a { color: var(--text-muted); }
  .bottom .links-foot a:hover { color: var(--accent); }

  :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }