:root {
      --bg: #07151d;
      --surface: #0d2731;
      --surface-2: #103542;
      --border: #245160;
      --text: #edf8f5;
      --muted: #a9c2c6;
      --accent: #9ef01a;
      --accent-ink: #07151d;
      --cyan: #3ee7d0;
      --shadow: 0 18px 45px rgba(0, 0, 0, .24);
    }

    [data-theme="light"] {
      --bg: #edf6f4;
      --surface: #ffffff;
      --surface-2: #dcefeb;
      --border: #a9cbc5;
      --text: #09202a;
      --muted: #4d6870;
      --accent: #5b9c00;
      --accent-ink: #ffffff;
      --cyan: #057f81;
      --shadow: 0 18px 42px rgba(8, 42, 49, .12);
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: "DM Sans", ui-sans-serif, system-ui, sans-serif;
      transition: background .25s ease, color .25s ease;
    }

    .site-shell {
      width: 100%;
      min-height: calc(100 * min(var(--vh, 1vh), 1vh));
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 8%, rgba(62, 231, 208, .12), transparent 26rem),
        radial-gradient(circle at 8% 32%, rgba(158, 240, 26, .08), transparent 22rem),
        var(--bg);
    }

    .nav-glass {
      background: color-mix(in srgb, var(--bg) 88%, transparent);
      border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
      backdrop-filter: blur(16px);
    }

    .nav-link {
      color: var(--muted);
      font-size: .86rem;
      font-weight: 700;
      letter-spacing: .01em;
      transition: color .2s ease;
    }
    .nav-link:hover, .nav-link:focus-visible { color: var(--accent); }

    .eyebrow {
      color: var(--cyan);
      font-size: .74rem;
      letter-spacing: .14em;
      text-transform: uppercase;
      font-weight: 800;
    }

    .section-wrap { padding: 5.5rem 1.5rem; }
    .section-heading {
      max-width: 47rem;
      font-size: clamp(2rem, 4vw, 3.6rem);
      line-height: 1.04;
      letter-spacing: -.045em;
      font-weight: 800;
    }

    .surface {
      background: color-mix(in srgb, var(--surface) 92%, transparent);
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
    }

    .accent-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      background: var(--accent);
      color: var(--accent-ink);
      border: 1px solid var(--accent);
      border-radius: .65rem;
      padding: .8rem 1rem;
      font-weight: 800;
      font-size: .9rem;
      transition: transform .2s ease, filter .2s ease;
    }
    .accent-button:hover { transform: translateY(-2px); filter: brightness(1.06); }

    .outline-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: .5rem;
      color: var(--text);
      border: 1px solid var(--border);
      border-radius: .65rem;
      padding: .8rem 1rem;
      font-weight: 800;
      font-size: .9rem;
      background: transparent;
      transition: border-color .2s ease, background .2s ease;
    }
    .outline-button:hover { border-color: var(--cyan); background: color-mix(in srgb, var(--surface) 80%, transparent); }

    .terminal {
      position: relative;
      border: 1px solid var(--border);
      border-radius: 1rem;
      overflow: hidden;
      background: #061219;
      box-shadow: 0 28px 65px rgba(0, 0, 0, .38);
    }
    .terminal-top {
      display: flex;
      align-items: center;
      gap: .42rem;
      padding: .9rem 1rem;
      background: #0c2630;
      border-bottom: 1px solid #1b4652;
    }
    .terminal-dot { width: .62rem; height: .62rem; border-radius: 50%; }
    .terminal-code {
      min-height: 21rem;
      padding: 1.4rem;
      color: #cae3e0;
      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
      font-size: clamp(.76rem, 1.7vw, .93rem);
      line-height: 1.9;
    }
    .code-key { color: #9ef01a; }
    .code-value { color: #3ee7d0; }
    .code-comment { color: #71949a; }
    .cursor {
      display: inline-block;
      width: .55rem;
      height: 1.05rem;
      vertical-align: -.15rem;
      background: var(--accent);
      animation: blink 1.1s steps(2, start) infinite;
    }

    .metric {
      border-left: 2px solid var(--accent);
      padding: .2rem 0 .2rem 1rem;
    }
    .metric strong {
      display: block;
      font-size: 1.55rem;
      letter-spacing: -.04em;
      color: var(--text);
    }
    .metric span { color: var(--muted); font-size: .83rem; line-height: 1.35; }

    .profile-photo-wrap { position: relative; overflow: hidden; width: min(100%, 22rem); aspect-ratio: 4 / 5; border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
    .profile-photo-wrap::after { content: ""; position: absolute; inset: 0; background: rgba(7, 21, 29, .16); pointer-events: none; }
    .profile-photo-wrap img { width: 100%; height: 100%; object-fit: cover; object-position: center top; filter: brightness(.96) contrast(1.02); }

    .skill-group { border-top: 1px solid var(--border); padding-top: 1.2rem; }
    .skill-name { color: var(--cyan); font-weight: 800; font-size: .9rem; }
    .chip {
      color: var(--text);
      background: color-mix(in srgb, var(--surface-2) 82%, transparent);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: .38rem .65rem;
      font-size: .77rem;
      font-weight: 700;
    }

    .timeline { position: relative; }
    .timeline::before {
      content: "";
      position: absolute;
      left: .4rem;
      top: .6rem;
      bottom: .6rem;
      width: 1px;
      background: var(--border);
    }
    .timeline-item { position: relative; padding-left: 2.1rem; }
    .timeline-point {
      position: absolute;
      left: 0;
      top: .34rem;
      width: .83rem;
      height: .83rem;
      border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 5px var(--bg);
    }

    .project-card {
      display: flex;
      min-height: 100%;
      flex-direction: column;
      justify-content: space-between;
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 1.35rem;
      background: color-mix(in srgb, var(--surface) 88%, transparent);
      transition: transform .22s ease, border-color .22s ease;
    }
    .project-card:hover { transform: translateY(-4px); border-color: var(--cyan); }

    details summary { cursor: pointer; color: var(--cyan); font-weight: 800; }
    details summary::-webkit-details-marker { display: none; }
    details summary::after { content: "+"; float: right; color: var(--accent); font-size: 1.2rem; }
    details[open] summary::after { content: "−"; }

    .modal-backdrop {
      position: fixed;
      inset: 0;
      z-index: 70;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 1rem;
      background: rgba(1, 10, 14, .78);
    }
    .modal-backdrop.is-open { display: flex; }
    .modal-panel {
      width: min(100%, 41rem);
      max-height: calc(90 * min(var(--vh, 1vh), 1vh));
      overflow-y: auto;
      border: 1px solid var(--border);
      border-radius: 1rem;
      padding: 1.5rem;
      background: var(--surface);
      box-shadow: 0 28px 70px rgba(0, 0, 0, .45);
    }

    .reveal { opacity: 0; transform: translateY(18px); transition: opacity .62s ease, transform .62s ease; }
    .reveal.visible { opacity: 1; transform: translateY(0); }

    :focus-visible {
      outline: 3px solid var(--accent);
      outline-offset: 3px;
    }

    @keyframes blink { 50% { opacity: 0; } }

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
      .reveal { opacity: 1; transform: none; }
    }