/* Creator reference: midnight canvas, metallic type and restrained 3D accents. */
:root {
  color-scheme: dark;
  --paper: #0c0c0c;
  --ink: #d7e2ea;
  --muted: #a4acb6;
  --line: #303238;
  --green: #c7d2dc;
  --lime: #c9aadf;
  --serif: var(--sans);
}
html, body { background: #0c0c0c; }
body { overflow-x: clip; }
header { background: #0c0c0c; border-bottom-color: #25262a; }
nav a { display: inline-flex; min-height: 44px; align-items: center; transition: opacity .2s; }
nav a:hover, footer>a:last-child:hover { color: #d7e2ea; opacity: .7; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline-color: #ceabed; }
.skip { background: #f3f5f8; color: #0c0c0c; }
.hero { position: relative; isolation: isolate; }
.hero-grid { min-height: 540px; }
.hero-top, .hero-bottom { color: #a4acb6; }
.hero-background { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-background::before {
  content: '';
  position: absolute;
  width: 600px;
  height: 600px;
  right: -170px;
  top: -170px;
  background: radial-gradient(ellipse, #7621b015, transparent 68%);
}
.creator-orbit {
  position: absolute;
  right: 2%;
  top: 48px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 20px solid #53535d;
  border-top-color: #b8c4d1;
  border-right-color: #797384;
  border-bottom-color: #22212a;
  transform: rotate(-24deg) rotateX(58deg) rotateY(-16deg);
  box-shadow: 3px 4px 7px #0009, inset 4px 5px 8px #080809;
  opacity: .65;
}
.creator-sphere {
  position: absolute;
  left: 45%;
  bottom: 64px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: radial-gradient(circle at 29% 24%, #e2dbea 0%, #9e85b0 17%, #48404f 48%, #17151d 76%);
  box-shadow: inset -9px -10px 18px #08080b, 0 18px 22px #0008;
  opacity: .6;
}
.hero-grid h1.masked-heading { font-weight: 800; }
.masked-heading.is-masked .masked-heading__line { background-color: #b8c5d2; }
h2 {
  text-wrap: balance;
  font-weight: 800;
  letter-spacing: -.04em;
  color: #c1cbd5;
  background: linear-gradient(180deg, #89929e, #d7e2ea);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
h3 { font-weight: 650; letter-spacing: -.025em; }
.experience-lead h4 { text-wrap: balance; }
.primary {
  border-radius: 999px;
  background: linear-gradient(123deg, #18011f 7%, #b600a8 37%, #7621b0 72%, #be4c00 100%);
  color: #fff;
  box-shadow: 0 4px 15px #b501a726, inset 4px 4px 12px #7721b1;
  outline: 1px solid #e4c4ec;
  outline-offset: -3px;
  transition: filter .2s;
}
.primary:hover { background: linear-gradient(123deg, #18011f 7%, #b600a8 37%, #7621b0 72%, #be4c00 100%); filter: brightness(1.13); }
.hero-visual {
  background: #131316;
  color: #d7e2ea;
  border: 1px solid #727984;
  border-radius: 30px;
  box-shadow: 12px 16px 0 #19191d;
}
.hero-visual img { border: 1px solid #393a40; border-radius: 14px; }
.visual-footer span { color: #a4acb6; }
.storyline>li>span { color: #b2bac7; }
.storyline a { border-color: #5d5267; }
.storyline a:hover { color: #d5b4ee; }
.journey { padding-bottom: 25px; }
.experience {
  color-scheme: light;
  --paper: #f9f9fb;
  --ink: #17171b;
  --muted: #595e69;
  --line: #d6d6dd;
  --green: #24212a;
  background: #f9f9fb;
  color: var(--ink);
  border-radius: 54px;
}
.experience h2 { background: none; color: #17171b; -webkit-text-fill-color: #17171b; }
.experience h2>span { display: inline-block; white-space: nowrap; }
.featured-experience, .work-evidence, .work-evidence>div, .research-heading, .experience-row, .contribution, .scope-number {
  border-color: #d6d6dd;
}
.work-evidence small { color: #685077; border-color: #d6d6dd; }
.work-evidence>div>span, .experience-index { color: #797280; }
.experience-takeaway { border-color: #9c78ba; }
.experience-takeaway>span, .skill-evidence { color: #685077; }
.workflow li { border-color: #a998b6; }
.workflow li:not(:last-child)::after { color: #786387; }
.company-logo { border-radius: 12px; }
.agibot-logo { padding: 9px; }
.project-index>a:hover { background: #18171c; }
.case-number { color: #9394a4; }
.fitness-main { background: #19181d; border-radius: 28px; }
.fitness-main img, .fitness-pair img { border-radius: 15px; }
.image-notes h4, .mobile-showcase h4, .graph-layout h4 { font-weight: 650; }
.mobile-showcase { background: #17161c; color: #d7e2ea; border: 1px solid #303039; border-radius: 30px; }
.mobile-showcase .eyebrow { color: #bda4d0; }
.mobile-showcase p { color: #a4acb6; }
.phones>a { border-color: #3b3543; box-shadow: 0 8px 25px #0008; }
.metrics strong { color: #d7e2ea; }
.research-images a { border-radius: 22px; }
.research-images img { border-radius: 12px; }
.graph-layout img { border-radius: 22px; }
.skills dd>span { color: #bc9ed4; }
.about { position: relative; }
.about .skills>div { border-color: #36313b; }
dialog { background: #17171b; color: #d7e2ea; border: 1px solid #5c5c67; border-radius: 22px; }
dialog::backdrop { background: #000c; }
dialog>button { border-color: #61616a; color: #d7e2ea; border-radius: 999px; min-height: 38px; }
::selection { background: #7c469d; color: white; }
@media(min-width:1600px) {
  .experience { max-width:1600px; }
}
@media(max-width:1000px) {
  .hero-grid { min-height:0; }
  .creator-orbit { right:5%; top:20px; width:100px; height:100px; border-width:14px; }
  .creator-sphere { left:5%; bottom:125px; width:55px; height:55px; }
}
@media(max-width:600px) {
  header { padding-top:9px; padding-bottom:9px; }
  nav { gap:18px; }
  .hero-visual { border-radius:22px; box-shadow:6px 9px 0 #19191d; }
  .hero-visual img { border-radius:10px; }
  .creator-orbit { top:8px; right:4%; width:72px; height:72px; border-width:10px; opacity:.45; }
  .creator-sphere { display:none; }
  .experience { border-radius:30px; }
  .fitness-main, .mobile-showcase { border-radius:20px; }
  .journey { padding-bottom:0; }
}
@media print {
  :root { --paper:#fff; --ink:#17171b; --muted:#595e69; --line:#d6d6dd; color-scheme:light; }
  html, body, header, .experience { background:#fff; color:#17171b; }
  .hero-background { display:none; }
  h2 { background:none; color:#17171b; -webkit-text-fill-color:#17171b; }
  .hero-visual, .fitness-main, .mobile-showcase, .metrics strong { background:#fff; color:#17171b; }
  .visual-footer span, .mobile-showcase p { color:#595e69; }
  .skills dd>span { color:#685077; }
}