:root {
  color-scheme: dark;
  --background: #0d1117;
  --surface: #161c24;
  --border: #303944;
  --text: #e6edf3;
  --muted: #8b98a8;
  --accent: #79b8ff;
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
body {
  display: grid;
  justify-items: center;
  align-content: start;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  padding: clamp(48px, 12vh, 128px) 24px 48px;
  background: var(--background);
  color: var(--text);
}

.hub { width: min(100%, 352px); }
.identity { display: flex; flex-direction: column; align-items: center; margin-bottom: 32px; }
.terminal-mark { width: 48px; height: 48px; margin-bottom: 23px; }
.terminal-mark svg { display: block; width: 100%; height: 100%; stroke-linecap: square; stroke-linejoin: miter; }
.mark-brackets { stroke: #394654; stroke-width: 1.25; }
.mark-prompt { stroke: var(--accent); stroke-width: 2; }
h1 { margin: 0; font-size: 22px; line-height: 1.4; font-weight: 500; letter-spacing: -.5px; }

.projects { display: grid; gap: 12px; }
.project-link {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  padding: 14px 17px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 450;
  letter-spacing: .05px;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .18s ease, background .18s ease;
}
.project-link::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(180px circle at var(--pointer-x, 50%) var(--pointer-y, 50%), #79b8ff0c, transparent 75%);
  opacity: 0;
  transition: opacity .2s ease;
}
.project-link svg { display: block; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.project-icon { width: 20px; height: 20px; color: #9daaba; transition: color .18s ease; }
.link-arrow { width: 16px; height: 16px; margin-left: auto; color: #6d7b8c; transition: color .18s ease, transform .18s ease; }
.project-pending { border-color: #252d37; background: #10161d; color: #98a3b1; }
.project-pending .project-icon { color: #778597; }
.pending-label { margin-left: auto; padding: 2px 6px; border: 1px solid #303944; border-radius: 4px; color: #98a3b1; font-family: Consolas, "Liberation Mono", monospace; font-size: 10px; line-height: 1.4; }

.project-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; background: #1a2430; border-color: #6b9dd5; }
.project-link:focus-visible .project-icon, .project-link:focus-visible .link-arrow { color: var(--accent); }
::selection { background: #264f78; color: #fff; }
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (hover: hover) and (pointer: fine) {
  a.project-link:hover { border-color: #536b85; background: #1a232e; }
  a.project-link:hover::before { opacity: 1; }
  a.project-link:hover .project-icon, a.project-link:hover .link-arrow { color: var(--accent); }
  a.project-link:hover .link-arrow { transform: translate(1px, -1px); }
}

@media (max-width: 380px) {
  body { padding-inline: 20px; }
  .project-link { padding-inline: 14px; gap: 11px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
  a.project-link:hover .link-arrow { transform: none; }
}