:root {
  --ink:#0b0d12;
  --muted:#525866;
  --line:#e5e7eb;
  --paper:#fafafa;
  --white:#fff;
  --blue:#2563eb;
  --green:#10b981;
  --shadow:0 24px 70px rgba(11,13,18,.08);
  font-synthesis:none
}
* {
  box-sizing:border-box
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:76px;
  overflow-x:hidden;
  scrollbar-color:var(--blue) var(--paper);
  scrollbar-width:thin
}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 16px/1.6 Inter,system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  scrollbar-color:var(--blue) var(--paper)
}
::-webkit-scrollbar {
  width:10px
}
::-webkit-scrollbar-track {
  background:var(--paper)
}
::-webkit-scrollbar-thumb {
  background:var(--ink);
  border:3px solid var(--paper);
  border-radius:999px
}
::-webkit-scrollbar-thumb:hover {
  background:var(--blue)
}
a {
  color:inherit;
  text-decoration:none
}
button {
  font:inherit;
  color:inherit;
  cursor:pointer
}
::selection {
  background:var(--blue);
  color:#fff
}
.mono {
  font:500 10px/1.2 "JetBrains Mono",monospace;
  letter-spacing:.12em;
  text-transform:uppercase
}
.progress {
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  height:3px;
  width:0;
  background:var(--blue)
}
.smart-cursor {
  position:fixed;
  z-index:200;
  top:0;
  left:0;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#000;
  pointer-events:none;
  transform:translate(-50%,-50%);
  transition:opacity .2s
}
.smart-cursor span {
  display:none
}
.smart-cursor.active {
  width:12px;
  height:12px;
  background:#000;
  box-shadow:none
}
.nav {
  position:fixed;
  z-index:90;
  top:0;
  left:0;
  right:0;
  height:76px;
  padding:0 4vw;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fafafacc;
  border-bottom:1px solid #e5e7eb99;
  backdrop-filter:blur(16px);
  transition:transform .4s
}
.nav.hide {
  transform:none
}
.brand {
  font:700 22px "Space Grotesk";
  letter-spacing:-.08em
}
.brand span {
  color:var(--blue)
}
.availability {
  font:500 11px "JetBrains Mono";
  letter-spacing:.02em;
  color:var(--muted);
  padding-left:12px;
  border-left:1px solid var(--line)
}
.availability i,.live-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
  box-shadow:0 0 0 4px #10b98118;
  margin-right:6px
}
.nav-center {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  font:600 12px "Space Grotesk";
  letter-spacing:.08em;
  text-transform:uppercase
}
.menu-toggle {
  display:none;
  border:0;
  background:none;
  font:600 11px "JetBrains Mono";
  letter-spacing:.1em
}
.menu-toggle span {
  color:var(--blue);
  font-size:16px;
  margin-left:7px
}
.nav ul {
  display:flex;
  list-style:none;
  gap:25px;
  margin:0 0 0 auto;
  padding:0
}
.nav li a {
  font-size:12px;
  color:var(--muted);
  transition:color .2s
}
.nav li a:hover {
  color:var(--blue)
}
.hero {
  min-height:100vh;
  padding:100px 4vw 32px;
  position:relative
}
.hero-grid {
  min-height:60vh;
  position:relative;
  display:grid;
  grid-template-columns:1fr 2fr 1fr;
  grid-template-rows:auto 1fr auto;
  align-items:start;
  border-top:1px solid var(--line);
  padding-top:8px
}
.eyebrow {
  font:500 10px "JetBrains Mono";
  letter-spacing:.12em;
  text-transform:uppercase
}
.hero-copy {
  grid-column:2/4;
  position:relative;
  z-index:2;
  margin-top:8vh
}
.hero h1 {
  font:700 clamp(80px,15vw,230px)/.8 "Space Grotesk";
  letter-spacing:-.085em;
  margin:0 0 34px
}
.hero h1 em {
  font-style:normal;
  color:transparent;
  -webkit-text-stroke:1px var(--ink)
}
.hero-tagline {
  font:400 clamp(19px,2.4vw,32px)/1.2 "Space Grotesk";
  margin:0 0 34px;
  max-width:20ch
}
.hero-tagline strong {
  color:var(--blue);
  font-weight:500
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap
}
.button {
  display:inline-flex;
  gap:24px;
  align-items:center;
  border-radius:999px;
  padding:13px 19px;
  font-size:13px;
  transition:transform .25s,background .25s
}
.button span {
  font-size:17px
}
.button:hover {
  transform:translateY(-3px)
}
.button-dark {
  background:var(--ink);
  color:#fff
}
.button-light {
  border:1px solid var(--ink)
}
.button-light:hover {
  background:#fff
}
.text-link {
  font-size:13px;
  border-bottom:1px solid var(--ink);
  padding-bottom:3px
}
.hero-meta {
  grid-column:1/2;
  grid-row:3;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:16px
}
.model-stage {
  position:absolute;
  z-index:1;
  right:5vw;
  bottom:2vh;
  width:min(34vw,470px);
  height:57vh;
  pointer-events:none
}

@media (min-width:901px) {
  .hero {
    padding-top:76px;
    padding-bottom:24px
  }

  .hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
    max-width:1440px;
    min-height:calc(100vh - 280px);
    padding-top:8px;
    margin:0 auto;
  }

  .hero-copy {
    grid-column:1;
    max-width:760px;
    margin-top:6vh;
  }

  .hero h1 {
    font-size:clamp(72px,11vw,174px);
  }

  .hero-tagline {
    max-width:22ch;
  }

  .model-stage {
    right:2vw;
    bottom:0;
    width:min(42vw,560px);
    height:60vh;
  }

  .model-shadow {
    right:7vw;
  }

  .command-panel {
    max-width:760px;
    margin:18px auto 0;
  }
}
.model-stage:before {
  content:"";
  position:absolute;
  inset:-35%;
  background:radial-gradient(ellipse at center,rgba(219,228,243,.72) 0%,rgba(219,228,243,.38) 42%,rgba(219,228,243,0) 72%);
  filter:blur(38px);
  pointer-events:none
}
.model-stage canvas {
  position:relative;
  width:100%!important;
  height:100%!important
}
.model-shadow {
  position:absolute;
  right:9vw;
  bottom:4%;
  width:260px;
  height:30px;
  background:#0b0d1218;
  border-radius:50%;
  filter:blur(14px)
}
.command-panel {
  max-width:820px;
  margin:40px 0 0 auto;
  padding:18px 22px;
  border:1px solid var(--line);
  background:#fff;
  box-shadow:var(--shadow);
  border-radius:16px;
  position:relative;
  z-index:3
}
.command-top {
  display:flex;
  gap:11px;
  align-items:center;
  color:var(--muted);
  font:500 10px "JetBrains Mono";
  letter-spacing:.1em
}
.command-icon {
  color:var(--blue);
  font-size:17px
}
.command-top kbd {
  margin-left:auto;
  border:1px solid var(--line);
  border-radius:5px;
  padding:3px 6px;
  font-size:9px
}
.command-input {
  margin:17px 0;
  color:var(--ink);
  font:500 18px "Space Grotesk";
  min-height:28px
}
.quick-chips {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.quick-chips button,.skill-filters button {
  border:1px solid var(--line);
  background:var(--paper);
  border-radius:999px;
  padding:7px 12px;
  font-size:11px;
  transition:.2s
}
.quick-chips button:hover,.skill-filters button.active,.skill-filters button:hover {
  border-color:var(--blue);
  color:var(--blue);
  background:#eff6ff
}
.section {
  padding:36px 4vw 130px;
  border-top:1px solid var(--line)
}
.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:58px
}
.section-label {
  display:flex;
  gap:23px;
  font:500 11px "JetBrains Mono";
  letter-spacing:.12em;
  text-transform:uppercase
}
.section-label span:first-child {
  color:var(--blue)
}
.section-note {
  color:var(--muted)
}
.about-layout {
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:11vw
}
.display-copy {
  font:500 clamp(31px,4.2vw,64px)/1.08 "Space Grotesk";
  letter-spacing:-.05em;
  margin:0
}
.about-notes {
  padding-top:12px
}
.about-notes>div {
  border-top:1px solid var(--line);
  padding:19px 0 22px
}
.about-notes p {
  margin:12px 0 0;
  color:var(--muted);
  max-width:30ch
}
.projects {
  background:#f4f6f9
}
.project-grid {
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:20px;
  align-items:start
}
.project-card {
  background:#fff;
  border:1px solid var(--line);
  padding:14px;
  box-shadow:0 16px 50px #0b0d1209;
  transition:transform .25s,box-shadow .25s
}
.project-card:hover {
  box-shadow:var(--shadow)
}
.project-card.featured {
  grid-row:span 2
}
.project-art {
  height:310px;
  position:relative;
  overflow:hidden;
  padding:22px;
  display:flex;
  align-items:flex-end
}
.project-card:not(.featured) .project-art {
  height:210px
}
.project-art span {
  font:600 clamp(35px,5vw,75px)/.8 "Space Grotesk";
  letter-spacing:-.07em;
  position:relative;
  z-index:2
}
.project-art i {
  position:absolute;
  right:20px;
  top:18px;
  font:500 12px "JetBrains Mono";
  font-style:normal
}
.shield-art {
  background:linear-gradient(135deg,#dbeafe,#fff 52%,#bfdbfe)
}
.shield-art:before {
  content:"";
  position:absolute;
  width:60%;
  aspect-ratio:1;
  border:1px solid #2563eb66;
  border-radius:50%;
  left:20%;
  top:5%;
  box-shadow:0 0 0 28px #2563eb0b,0 0 0 55px #2563eb08
}
.shield-art:after {
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(transparent 49%,#2563eb44 50%,transparent 51%);
  background-size:100% 20px;
  opacity:.5
}
.vector-art {
  background:#e8f7f3
}
.vector-art .nodes {
  position:absolute;
  right:15%;
  top:25%;
  font:50px "JetBrains Mono";
  color:var(--green);
  letter-spacing:-.3em
}
.dental-art {
  background:#eef1f5
}
.dental-art .crosshair {
  position:absolute;
  right:18%;
  top:23%;
  font-size:140px;
  color:#cbd5e1
}
.project-info {
  padding:23px 10px 12px
}
.project-number {
  color:var(--blue);
  margin-bottom:13px
}
.project-info h2 {
  font:600 clamp(30px,4vw,54px)/1 "Space Grotesk";
  letter-spacing:-.06em;
  margin:0 0 20px
}
.project-info p {
  color:var(--muted);
  font-size:13px;
  max-width:60ch;
  margin:0 0 8px
}
.project-info p b {
  color:var(--ink);
  font-weight:600
}
.metrics,.tag-row {
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:17px
}
.metrics span,.tag-row span {
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 9px;
  font:500 9px "JetBrains Mono";
  color:var(--muted)
}
.metrics span:first-child {
  color:var(--blue);
  border-color:#2563eb55
}
.card-links {
  display:flex;
  gap:20px;
  align-items:center;
  margin-top:20px
}
.card-links a,.gallery-trigger,.education a {
  font-size:12px;
  border-bottom:1px solid var(--ink);
  padding-bottom:3px;
  background:none;
  border-top:0;
  border-left:0;
  border-right:0
}
.gallery-trigger {
  color:var(--muted);
  border-color:var(--muted)
}
.skills {
  background:#fff
}
.skill-filters {
  display:flex;
  gap:8px;
  margin:-20px 0 28px
}
.bento-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}
.bento-card {
  min-height:240px;
  padding:25px;
  border:1px solid var(--line);
  display:flex;
  flex-direction:column;
  transition:transform .25s,background .25s,opacity .25s
}
.bento-card.large {
  grid-column:span 2;
  min-height:290px
}
.bento-card:hover {
  transform:translateY(-5px);
  background:#f8fbff
}
.bento-card.cobalt {
  background:var(--blue);
  color:#fff;
  border-color:var(--blue)
}
.bento-card.cobalt p,.bento-card.cobalt .mono {
  color:#dbeafe
}
.bento-icon {
  font-size:25px;
  color:var(--blue);
  margin-bottom:25px
}
.cobalt .bento-icon {
  color:#fff
}
.bento-card h3 {
  font:600 clamp(25px,3vw,42px)/.95 "Space Grotesk";
  letter-spacing:-.06em;
  margin:auto 0 14px
}
.bento-card p {
  color:var(--muted);
  font-size:13px;
  margin:0;
  max-width:36ch
}
.bento-card p b {
  color:var(--ink)
}
.cobalt p b {
  color:#fff
}
.lab-card {
  background:#f8fafc
}
.terminal {
  margin:-5px 0 22px;
  padding:13px 15px;
  background:var(--ink);
  color:#a7b3c5;
  font:10px/1.65 "JetBrains Mono";
  box-shadow:0 10px 25px #0b0d1222
}
.terminal p {
  font:inherit;
  color:#a7b3c5
}
.terminal i {
  color:var(--blue)
}
.terminal .green {
  color:var(--green)
}
.terminal-dot {
  display:inline-block;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ef4444;
  margin-right:5px
}
.terminal-dot:nth-child(2) {
  background:#f59e0b
}
.terminal-dot:nth-child(3) {
  background:var(--green)
}
.timeline {
  background:#f4f6f9
}
.timeline-row {
  display:grid;
  grid-template-columns:1fr 1.3fr 1.6fr;
  gap:5vw;
  border-top:1px solid var(--line);
  padding:28px 0
}
.timeline-date {
  color:var(--muted)
}
.timeline h2,.education h2 {
  font:600 clamp(27px,3.8vw,52px)/.95 "Space Grotesk";
  letter-spacing:-.06em;
  margin:0
}
.company {
  color:var(--muted);
  margin:7px 0 22px
}
.project-label {
  color:var(--blue);
  font-size:13px
}
.timeline ul {
  margin:0;
  padding:0;
  list-style:none
}
.timeline li {
  border-bottom:1px solid var(--line);
  padding:0 0 13px;
  margin-bottom:13px;
  color:var(--muted);
  font-size:13px
}
.education-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.education-grid>div {
  padding:25px 0;
  border-top:1px solid var(--line)
}
.education h2 {
  margin:28px 0 15px
}
.education p {
  color:var(--muted);
  margin:0
}
.education a:hover {
  color:var(--blue);
  border-color:var(--blue)
}
.footer {
  width:calc(100vw - 2rem);
  margin:0 0 1rem;
  left:1rem;
  transform:none;
  padding:42px 4vw 25px;
  min-height:650px;
  background:var(--ink);
  color:#fff;
  border-radius:24px;
  position:relative;
  overflow:hidden
}
.footer-watermark {
  position:absolute;
  right:-.04em;
  bottom:.08em;
  color:#ffffff08;
  font:700 30vw/.7 "Space Grotesk";
  letter-spacing:-.1em
}
.footer-top,.footer-bottom {
  display:flex;
  justify-content:space-between;
  position:relative;
  z-index:1;
  color:#9da5b3
}
.footer-content {
  position:absolute;
  left:4vw;
  right:4vw;
  bottom:100px;
  z-index:1;
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:8vw;
  align-items:end
}
.footer h2 {
  font:600 clamp(36px,4.2vw,68px)/.94 "Space Grotesk";
  letter-spacing:-.065em;
  margin:0
}
.footer h2 em {
  font-style:normal;
  color:#7da7ff
}
.footer-cta {
  padding-top:10px
}
.email-label {
  display:block;
  width:max-content;
  margin-left:auto;
  margin-bottom:14px;
  color:#9da5b3;
  font:500 10px/1.2 "JetBrains Mono";
  letter-spacing:.12em;
  text-align:right;
  text-transform:uppercase
}
.email-button {
  display:block;
  margin-left:auto;
  border:0;
  border-bottom:1px solid #fff;
  background:none;
  color:#fff;
  padding:0 0 12px;
  font:500 clamp(20px,2.5vw,34px) "Space Grotesk";
  text-align:left
}
.email-button span {
  color:#7da7ff
}
.socials {
  display:flex;
  justify-content:flex-end;
  gap:24px;
  margin-top:30px
}
.socials a {
  font-size:15px;
  color:#cbd5e1
}
.socials a:hover {
  color:#7da7ff
}
.toast {
  opacity:0;
  color:var(--green);
  font:10px "JetBrains Mono";
  margin-top:10px;
  transition:opacity .2s
}
.toast.show {
  opacity:1
}
.footer-bottom {
  position:absolute;
  bottom:25px;
  left:4vw;
  right:4vw;
  font-size:11px
}
.footer-bottom button {
  border:0;
  background:none;
  color:#fff;
  font-size:12px
}
.gallery {
  position:fixed;
  z-index:150;
  inset:0;
  background:var(--paper);
  padding:25px 4vw;
  visibility:hidden;
  opacity:0;
  transition:.3s
}
.gallery.open {
  visibility:visible;
  opacity:1
}
.gallery-bar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:20px
}
.gallery-bar button {
  border:1px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:9px 16px
}
.gallery-bar span {
  color:var(--muted)
}
#gs {
  display:flex;
  gap:20px;
  overflow-x:auto;
  overscroll-behavior:contain;
  height:calc(100% - 65px);
  align-items:center;
  padding:25px 0;
  cursor:grab
}
#gs:active {
  cursor:grabbing
}
#gs figure {
  margin:0;
  flex:0 0 min(78vw,900px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden
}
#gs img {
  width:100%;
  display:block
}
@media(max-width:900px) {
  html {
    scroll-padding-top:64px
  }

  .nav-center {
    display:none
  }
  .nav ul {
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    margin:0;
    padding:16px 5vw;
    background:#fafafaf2;
    border-bottom:1px solid var(--line);
    flex-direction:column;
    gap:14px
  }
  .nav ul.open {
    display:flex
  }
  .menu-toggle {
    display:block;
    margin-left:auto
  }
  .hero-copy {
    grid-column:1/4
  }
  .model-stage {
    width:45vw;
    right:0;
    opacity:.7
  }
  .about-layout,.timeline-row {
    grid-template-columns:1fr
  }
  .bento-grid {
    grid-template-columns:1fr 1fr
  }
  .bento-card.large {
    grid-column:span 2
  }
  .timeline-row {
    gap:25px
  }
  .timeline ul {
    margin-top:10px
  }
  .footer-content {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    grid-template-columns:1fr;
    margin-top:125px
  }
}
@media(max-width:620px) {
  .nav {
    height:64px;
    padding:0 5vw
  }
  .availability {
    display:none
  }
  .hero {
    padding:104px 5vw 35px
  }
  .hero-grid {
    min-height:72vh;
    grid-template-columns:1fr
  }
  .hero-copy {
    grid-column:1;
    margin-top:13vh
  }
  .hero h1 {
    font-size:clamp(62px,19vw,108px)
  }
  .hero-tagline {
    font-size:22px
  }
  .hero-actions {
    gap:13px
  }
  .hero-actions .text-link {
    font-size:12px
  }
  .model-stage {
    width:58vw;
    height:34vh;
    top:11vh;
    right:-5vw;
    opacity:.45
  }
  .model-shadow {
    right:7vw;
    bottom:7%;
    width:150px
  }
  .command-panel {
    margin-top:30px;
    padding:15px
  }
  .command-input {
    font-size:16px
  }
  .section {
    padding:40px 5vw 90px
  }
  .section-head {
    align-items:flex-start;
    flex-direction:column;
    gap:12px;
    margin-bottom:38px
  }
  .display-copy {
    font-size:34px
  }
  .project-grid {
    grid-template-columns:1fr
  }
  .project-card.featured {
    grid-row:auto
  }
  .project-art,.project-card:not(.featured) .project-art {
    height:220px
  }
  .project-info h2 {
    font-size:42px
  }
  .bento-grid {
    grid-template-columns:1fr
  }
  .bento-card.large {
    grid-column:auto
  }
  .education-grid {
    grid-template-columns:1fr
  }
  .footer {
    width:auto;
    margin:0 2vw 2vw;
    min-height:700px;
    padding:28px 6vw;
    left:auto;
    transform:none
  }
  .footer-content {
    position:relative;
    left:auto;
    right:auto;
    bottom:auto;
    margin-top:115px
  }
  .footer h2 {
    font-size:42px
  }
  .footer-bottom {
    left:6vw;
    right:6vw;
    flex-wrap:wrap;
    gap:10px
  }
  .footer-watermark {
    font-size:47vw
  }
}
@media (hover:hover) and (pointer:fine) {
  html,body,a,button {
    cursor:none
  }
}
@media(prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    scroll-behavior:auto!important;
    transition-duration:.01ms!important;
    animation-duration:.01ms!important
  }
}
.model-stage {
  overflow:visible
}

@media (min-width:901px) {
  .hero-grid {
    grid-template-columns:minmax(0,1fr) minmax(360px,.82fr);
    max-width:1440px;
    min-height:calc(100vh - 280px);
    margin:0 auto;
  }

  .hero-copy {
    grid-column:1;
    max-width:760px;
    margin-top:6vh;
  }

  .hero h1 {
    font-size:clamp(72px,11vw,174px);
  }

  .hero-tagline {
    max-width:22ch;
  }

  .model-stage {
    right:2vw;
    bottom:0;
    width:min(42vw,560px);
    height:60vh;
  }

  .model-shadow {
    right:7vw;
  }

  .command-panel {
    max-width:760px;
    margin:18px auto 0;
  }
}