@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600&family=Geist+Mono:wght@400;500&display=swap');

:root {
  --background: 0 0% 100%;
  --foreground: 240 10% 3.9%;
  --card: 0 0% 100%;
  --card-foreground: 240 10% 3.9%;
  --muted: 240 4.8% 95.9%;
  --muted-foreground: 240 3.8% 46.1%;
  --border: 240 5.9% 90%;
  --primary: 240 5.9% 10%;
  --primary-foreground: 0 0% 98%;
  --secondary: 240 4.8% 95.9%;
  --secondary-foreground: 240 5.9% 10%;
  --accent: 240 4.8% 95.9%;
  --accent-foreground: 240 5.9% 10%;
  --radius: 0.5rem;
}

.dark {
  --background: 240 10% 3.9%;
  --foreground: 0 0% 98%;
  --card: 240 10% 3.9%;
  --card-foreground: 0 0% 98%;
  --muted: 240 3.7% 15.9%;
  --muted-foreground: 240 5% 64.9%;
  --border: 240 3.7% 15.9%;
  --primary: 0 0% 98%;
  --primary-foreground: 240 5.9% 10%;
  --secondary: 240 3.7% 15.9%;
  --secondary-foreground: 0 0% 98%;
  --accent: 240 3.7% 15.9%;
  --accent-foreground: 0 0% 98%;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-family: 'Geist', sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  min-height: 100vh;
  transition: background-color 0.2s, color 0.2s;
}

a { color: inherit; text-decoration: none; }

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.separator {
  height: 1px;
  background-color: hsl(var(--border));
  margin: 1.5rem 0;
}

.theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 50;
  background-color: hsl(var(--background));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  width: 2.25rem;
  height: 2.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.15s;
  color: hsl(var(--foreground));
}

.theme-toggle:hover { background-color: hsl(var(--accent)); }
.theme-toggle svg { width: 1rem; height: 1rem; }

.icon-sun { display: none; }
.icon-moon { display: block; }
.dark .icon-sun { display: block; }
.dark .icon-moon { display: none; }

.section-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.5rem;
  font-family: 'Geist Mono', monospace;
}

.links-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.link-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: var(--radius);
  border: 1px solid hsl(var(--border));
  background-color: hsl(var(--background));
  transition: background-color 0.15s;
  color: hsl(var(--foreground));
}

.link-item:hover { background-color: hsl(var(--accent)); }

.link-item-icon {
  width: 2rem;
  height: 2rem;
  border-radius: calc(var(--radius) - 2px);
  background-color: hsl(var(--secondary));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.link-item-icon svg { width: 1rem; height: 1rem; }

.link-item-content { flex: 1; min-width: 0; }

.link-item-title {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25;
}

.link-item-subtitle {
  font-size: 0.75rem;
  color: hsl(var(--muted-foreground));
  margin-top: 0.125rem;
  font-family: 'Geist Mono', monospace;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.link-item-arrow { color: hsl(var(--muted-foreground)); flex-shrink: 0; }
.link-item-arrow svg { width: 0.875rem; height: 0.875rem; }

.service-dot {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  background-color: hsl(142 76% 36% / 0.1);
  color: hsl(142 71% 36%);
  border: 1px solid hsl(142 76% 36% / 0.2);
  font-family: 'Geist Mono', monospace;
  font-weight: 500;
}

.dark .service-dot {
  background-color: hsl(142 76% 36% / 0.15);
  color: hsl(142 71% 50%);
  border-color: hsl(142 76% 36% / 0.3);
}

.service-dot::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 9999px;
  background-color: currentColor;
}

@keyframes fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.animate-in { animation: fade-in 0.35s ease both; }
.delay-1 { animation-delay: 0.05s; }
.delay-2 { animation-delay: 0.1s; }
.delay-3 { animation-delay: 0.15s; }
.delay-4 { animation-delay: 0.2s; }
.delay-5 { animation-delay: 0.25s; }
.delay-6 { animation-delay: 0.3s; }
.delay-7 { animation-delay: 0.35s; }