:root {
   --bg: #0b1220;
   --paper: #0f172a;
   --card: #111c34;
   --text: #e5e7eb;
   --muted: #a3a3a3;
   --line: #22304d;
   --accent: #60a5fa;
   --accent2: #34d399;
   --chip: #162544;
   --shadow: 0 10px 30px rgba(0, 0, 0, .35);
   --radius: 16px;
   --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
   --sans: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
 }

 * {
   box-sizing: border-box
 }

 html,
 body {
   height: 100%
 }

 body {
   margin: 0;
   font-family: var(--sans);
   color: var(--text);
   background: radial-gradient(900px 600px at 10% 10%, rgba(96, 165, 250, .18), transparent 55%),
     radial-gradient(900px 600px at 90% 20%, rgba(52, 211, 153, .14), transparent 50%),
     linear-gradient(180deg, var(--bg), #070b14);
   line-height: 1.55;
 }

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

 a:hover {
   color: var(--accent)
 }

 .wrap {
   max-width: 1100px;
   margin: 40px auto;
   padding: 0 18px
 }

 .sheet {
   background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(255, 255, 255, .01));
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--radius);
   box-shadow: var(--shadow);
   overflow: hidden;
 }

 /* Header */
 .hero {
   padding: 28px 28px 18px;
   background:
     radial-gradient(700px 220px at 20% 0%, rgba(96, 165, 250, .20), transparent 60%),
     radial-gradient(700px 220px at 80% 0%, rgba(52, 211, 153, .16), transparent 55%),
     linear-gradient(180deg, rgba(15, 23, 42, .95), rgba(15, 23, 42, .65));
   border-bottom: 1px solid rgba(255, 255, 255, .08);
 }

 .heroTop {
   display: flex;
   gap: 18px;
   align-items: flex-start;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .nameBlock {
   min-width: 260px
 }

 .name {
   font-size: 34px;
   font-weight: 800;
   letter-spacing: .3px;
   margin: 0;
 }

 .role {
   margin: 6px 0 0;
   color: rgba(229, 231, 235, .88);
   font-size: 14px;
 }

 .meta {
   display: flex;
   flex-wrap: wrap;
   gap: 10px 14px;
   align-items: center;
   justify-content: flex-end;
   margin-top: 4px;
 }

 .pill {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 8px 10px;
   border: 1px solid rgba(255, 255, 255, .10);
   background: rgba(17, 28, 52, .55);
   border-radius: 999px;
   color: rgba(229, 231, 235, .90);
   font-size: 13px;
   white-space: nowrap;
 }

 .dot {
   width: 8px;
   height: 8px;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--accent), var(--accent2));
   box-shadow: 0 0 0 3px rgba(96, 165, 250, .12);
 }

 .summary {
   margin-top: 14px;
   color: rgba(229, 231, 235, .88);
   max-width: 880px;
   font-size: 14.5px;
 }

 /* Layout */
 .grid {
   display: grid;
   grid-template-columns: 340px 1fr;
   gap: 18px;
   padding: 18px;
 }

 @media (max-width: 920px) {
   .grid {
     grid-template-columns: 1fr;
   }

   .meta {
     justify-content: flex-start
   }
 }

 /* Cards */
 .card {
   background: rgba(17, 28, 52, .55);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--radius);
   padding: 16px;
 }

 .card h2 {
   margin: 0 0 10px;
   font-size: 13px;
   letter-spacing: .16em;
   text-transform: uppercase;
   color: rgba(229, 231, 235, .82);
 }

 .chips {
   display: flex;
   flex-wrap: wrap;
   gap: 8px
 }

 .chip {
   padding: 7px 10px;
   border-radius: 999px;
   border: 1px solid rgba(255, 255, 255, .10);
   background: rgba(22, 37, 68, .7);
   color: rgba(229, 231, 235, .90);
   font-size: 12.5px;
 }

 .kv {
   display: grid;
   gap: 10px
 }

 .kvRow {
   display: flex;
   justify-content: space-between;
   gap: 10px;
   align-items: flex-start
 }

 .k {
   color: rgba(229, 231, 235, .70);
   font-size: 12.5px
 }

 .v {
   color: rgba(229, 231, 235, .92);
   font-size: 12.8px;
   text-align: right
 }

 .v code {
   font-family: var(--mono);
   font-size: 12px;
   color: rgba(229, 231, 235, .92)
 }

 /* Experience */
 .timeline {
   display: grid;
   gap: 12px
 }

 .item {
   padding: 14px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, .08);
   background: rgba(15, 23, 42, .45);
 }

 .itemHead {
   display: flex;
   gap: 10px;
   align-items: flex-start;
   justify-content: space-between;
   flex-wrap: wrap;
 }

 .itemTitle {
   margin: 0;
   font-size: 15px;
   font-weight: 700
 }

 .itemSub {
   margin: 2px 0 0;
   color: rgba(229, 231, 235, .78);
   font-size: 13px;
 }

 .when {
   color: rgba(229, 231, 235, .70);
   font-size: 12.5px;
   font-family: var(--mono);
   white-space: nowrap;
 }

 .bullets {
   margin: 10px 0 0 18px;
   color: rgba(229, 231, 235, .88)
 }

 .bullets li {
   margin: 6px 0;
   font-size: 13.5px
 }

 .tagRow {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-top: 10px
 }

 .tag {
   font-size: 12px;
   border: 1px solid rgba(96, 165, 250, .28);
   color: rgba(191, 219, 254, .92);
   background: rgba(96, 165, 250, .10);
   padding: 6px 9px;
   border-radius: 999px;
 }

 /* Print */
 @media print {
   body {
     background: #fff;
     color: #111827
   }

   .wrap {
     margin: 0;
     max-width: none;
     padding: 0
   }

   .sheet {
     box-shadow: none;
     border-radius: 0;
     border: none
   }

   .hero {
     background: #fff;
     color: #111827;
     border-bottom: 1px solid #e5e7eb
   }

   .pill,
   .card,
   .item {
     background: #fff;
     border: 1px solid #e5e7eb
   }

   a:hover {
     color: inherit
   }

   .dot {
     box-shadow: none
   }

   .tag {
     border-color: #c7d2fe;
     background: #eef2ff;
     color: #1f2937
   }

   .chip {
     background: #f3f4f6;
     border-color: #e5e7eb;
     color: #111827
   }

   .k {
     color: #374151
   }

   .itemSub,
   .summary,
   .when {
     color: #374151
   }
 }

 .nameRow {
   display: flex;
   align-items: center;
   gap: 14px;
 }

 .avatar {
   width: 58px;
   height: 58px;
   border-radius: 999px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .16);
   background: rgba(17, 28, 52, .65);
   box-shadow: 0 10px 22px rgba(0, 0, 0, .22);
   flex: 0 0 auto;
 }

 .avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
 }

 /* Print tweak */
 @media print {
   .avatar {
     border-color: #e5e7eb;
     box-shadow: none;
   }
 }