:root {
      color-scheme: light;

      --color-background: 247 245 240;
      --color-surface: 255 253 248;
      --color-surface-container: 239 242 239;
      --color-surface-card: 255 255 252;
      --color-surface-strong: 229 234 231;

      --color-on-surface: 31 38 40;
      --color-on-muted: 89 104 106;

      --color-primary: 0 116 104;
      --color-primary-soft: 218 245 240;
      --color-secondary: 76 96 122;
      --color-outline: 196 207 204;
      --color-on-primary: 237 255 252;
    }

    .dark {
      color-scheme: dark;

      --color-background: 16 20 21;
      --color-surface: 19 24 25;
      --color-surface-container: 29 32 34;
      --color-surface-card: 39 42 44;
      --color-surface-strong: 50 53 55;

      --color-on-surface: 224 227 229;
      --color-on-muted: 186 202 197;

      --color-primary: 87 241 219;
      --color-primary-soft: 13 62 56;
      --color-secondary: 183 200 225;
      --color-outline: 133 148 144;
      --color-on-primary: 0 55 49;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      min-height: 100vh;
      font-family: "Geist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    section {
      scroll-margin-top: 96px;
    }

    .glass-panel {
      background: rgb(var(--color-surface-card) / 0.72);
      border: 1px solid rgb(var(--color-outline) / 0.18);
      box-shadow: 0 24px 70px rgb(0 0 0 / 0.10);
      backdrop-filter: blur(18px);
      -webkit-backdrop-filter: blur(18px);
    }

    .dark .glass-panel {
      background: rgb(var(--color-surface-card) / 0.54);
      box-shadow: 0 24px 70px rgb(0 0 0 / 0.26);
    }

    .glass-card {
      background: rgb(var(--color-surface-card) / 0.74);
      border: 1px solid rgb(var(--color-outline) / 0.14);
      box-shadow: 0 18px 45px rgb(0 0 0 / 0.08);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      transition: transform 220ms ease, background 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
    }

    .dark .glass-card {
      background: rgb(var(--color-surface-card) / 0.50);
      box-shadow: 0 18px 45px rgb(0 0 0 / 0.18);
    }

    .glass-card:hover {
      transform: translateY(-3px);
      border-color: rgb(var(--color-primary) / 0.24);
      box-shadow: 0 22px 55px rgb(0 0 0 / 0.12);
    }

    .dark .glass-card:hover {
      background: rgb(var(--color-surface-strong) / 0.56);
      box-shadow: 0 22px 55px rgb(0 0 0 / 0.24);
    }

    .accent-gradient {
      background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(var(--color-secondary)) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .dark .accent-gradient {
      background: linear-gradient(135deg, rgb(var(--color-primary)) 0%, rgb(183 200 225) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .bg-subtle-pattern {
      background-image: radial-gradient(rgb(var(--color-on-surface) / 0.055) 1px, transparent 1px);
      background-size: 24px 24px;
    }

    .soft-grid {
      background:
        radial-gradient(circle at 12% 18%, rgb(var(--color-primary) / 0.12), transparent 28%),
        radial-gradient(circle at 88% 22%, rgb(var(--color-secondary) / 0.10), transparent 30%),
        radial-gradient(circle at 50% 88%, rgb(var(--color-primary) / 0.07), transparent 34%);
    }

    .hero-card-rotate {
      transform: rotate(2deg);
    }

    .hero-card-rotate:hover {
      transform: rotate(0deg) translateY(-4px);
    }

    .experience-timeline {
      position: relative;
      max-width: 900px;
      margin: 0 auto;
    }

    .experience-timeline::before {
      content: "";
      position: absolute;
      top: 8px;
      bottom: 8px;
      left: 50%;
      width: 1px;
      background: rgb(var(--color-outline) / 0.24);
      transform: translateX(-50%);
    }

    .experience-item {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 48px;
      margin-bottom: 48px;
      align-items: center;
    }

    .experience-item:last-child {
      margin-bottom: 0;
    }

    .experience-dot {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 3;
      display: flex;
      width: 30px;
      height: 30px;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgb(var(--color-primary) / 0.45);
      background: rgb(var(--color-background));
      transform: translate(-50%, -50%);
    }

    .experience-dot::after {
      content: "";
      width: 8px;
      height: 8px;
      border-radius: 999px;
      background: rgb(var(--color-primary));
    }

    .experience-meta {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .experience-item:nth-child(odd) .experience-meta {
      text-align: right;
      align-items: flex-end;
    }

    .experience-item:nth-child(even) .experience-meta {
      grid-column: 2;
      text-align: left;
      align-items: flex-start;
    }

    .experience-item:nth-child(even) .experience-card {
      grid-column: 1;
      grid-row: 1;
    }

    .experience-card {
      display: block;
      text-decoration: none;
      color: inherit;
    }

    .experience-card .read-more {
      color: rgb(var(--color-primary));
      opacity: 0.9;
      transition: opacity 180ms ease, transform 180ms ease;
    }

    .experience-card:hover .read-more {
      opacity: 1;
      transform: translateX(3px);
    }

    @media (max-width: 767px) {
      .experience-timeline::before {
        left: 15px;
      }

      .experience-item {
        display: block;
        padding-left: 48px;
        margin-bottom: 32px;
      }

      .experience-dot {
        top: 16px;
        left: 15px;
        transform: translateX(-50%);
      }

      .experience-item:nth-child(odd) .experience-meta,
      .experience-item:nth-child(even) .experience-meta {
        text-align: left;
        align-items: flex-start;
        margin-bottom: 12px;
      }

      .experience-item:nth-child(even) .experience-card {
        grid-column: auto;
        grid-row: auto;
      }
    }

    .modal-hidden {
      display: none;
    }

    .modal-visible {
      display: flex;
    }

/* Extra reusable components for internal pages */
.document-preview {
  min-height: 360px;
  background:
    linear-gradient(180deg, rgb(var(--color-surface-card) / 0.88), rgb(var(--color-surface-container) / 0.72)),
    radial-gradient(circle at 20% 18%, rgb(var(--color-primary) / 0.12), transparent 34%);
}

.evidence-placeholder {
  min-height: 220px;
  background:
    radial-gradient(circle at 30% 25%, rgb(var(--color-primary) / 0.16), transparent 35%),
    radial-gradient(circle at 82% 75%, rgb(var(--color-secondary) / 0.14), transparent 38%),
    rgb(var(--color-surface-container) / 0.7);
}

.link-card {
  display: block;
  color: inherit;
  text-decoration: none;
}

.link-card .link-card-arrow {
  transition: transform 180ms ease;
}

.link-card:hover .link-card-arrow {
  transform: translateX(4px);
}

.prose-soft p + p {
  margin-top: 1rem;
}