:root{
  --bg:oklch(0.19 0.018 230);
  --panel:oklch(0.235 0.02 230);
  --ink:oklch(0.93 0.008 190);
  --muted:oklch(0.66 0.015 215);
  --line:oklch(0.32 0.02 230);
  --tq:oklch(0.82 0.13 190);
  --lime:oklch(0.88 0.18 128);
  --orange:oklch(0.78 0.16 56);
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:'JetBrains Mono',ui-monospace,monospace;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  padding:40px 20px;
  display:flex;
  justify-content:center;
}
.card{
  width:100%;
  max-width:1100px;
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 2px 40px rgba(10,25,30,.35);
}
a{ color:inherit; }
.lnk{ transition:opacity .15s ease; }
.lnk:hover{ opacity:.65; }

/* Accessibility helpers */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
:focus-visible{ outline:2px solid var(--tq); outline-offset:3px; border-radius:4px; }
.skip-link{
  position:absolute; left:12px; top:-48px; z-index:10;
  background:var(--tq); color:var(--bg); font-weight:700; font-size:14px;
  padding:10px 16px; border-radius:9px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

/* Header */
.head{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px;
  padding:22px 40px; border-bottom:1px solid var(--line);
}
.head .id{ display:flex; align-items:center; gap:9px; font-size:14px; }
.head .id .dot{ color:var(--lime); }
.head nav{ display:flex; gap:26px; font-size:13px; color:var(--muted); }
.head nav a{ text-decoration:none; color:var(--muted); }
.head nav a.active{ color:var(--tq); }

.prompt{ font-size:14px; color:var(--muted); }
.prompt .u{ color:var(--lime); }
.prompt .c{ color:var(--ink); }

/* Hero */
.hero{ padding:64px 56px 56px; }
.hero h1{
  font-weight:700; font-size:clamp(38px,7vw,60px); line-height:1.05;
  letter-spacing:-.03em; margin:22px 0 22px;
}
.cursor{ color:var(--tq); animation:blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .cursor{ animation:none; } }
.role{ font-size:18px; line-height:1.7; color:var(--muted); max-width:44em; margin:0 0 14px; }
.role .kw{ color:var(--orange); }
.role .str{ color:var(--lime); }
.bio{ font-size:16px; line-height:1.75; color:var(--muted); max-width:48em; margin:0 0 40px; }
.bio .cm{ color:var(--line); user-select:none; }
.actions{ display:flex; flex-wrap:wrap; gap:14px; }
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-weight:500; font-size:14px; padding:14px 22px; border-radius:9px; border:1px solid var(--line);
  color:var(--ink);
}
.btn.primary{ background:var(--tq); color:var(--bg); font-weight:700; border-color:var(--tq); padding:14px 24px; }

/* Generic block */
.block{ padding:0 56px 56px; }
.block.top{ padding-top:0; }

/* stack.config.json */
.file{ background:var(--panel); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.file .bar{
  display:flex; align-items:center; gap:8px; padding:14px 18px;
  border-bottom:1px solid var(--line); font-size:12.5px; color:var(--muted);
}
.file .bar .b{ width:11px; height:11px; border-radius:50%; }
.file .bar .name{ margin-left:10px; }
.file .body{ padding:26px 30px; font-size:15px; line-height:2.05; overflow-x:auto; }
.file .body .ind{ padding-left:26px; }
.k{ color:var(--tq); } .v{ color:var(--lime); } .p{ color:var(--muted); }

/* experience */
.exp{ display:flex; flex-direction:column; }
.exp .row{ display:grid; grid-template-columns:140px 1fr; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.exp .row:last-child{ border-bottom:0; }
.exp .when{ color:var(--tq); font-size:13.5px; }
.exp .what{ font-weight:700; font-size:16px; }
.exp .desc{ color:var(--muted); font-size:14px; margin-top:4px; }

/* contact */
.contact{ padding:48px 56px; border-top:1px solid var(--line); background:var(--panel); }
.contact .links{ display:flex; flex-wrap:wrap; gap:14px 40px; align-items:center; }
.contact .mail{ color:var(--tq); text-decoration:none; font-size:clamp(18px,4vw,22px); font-weight:700; }
.contact .meta{ color:var(--muted); text-decoration:none; font-size:15px; }

@media (max-width:720px){
  body{ padding:16px 12px; }
  .head,.hero,.block,.contact{ padding-left:24px; padding-right:24px; }
  .hero{ padding-top:44px; }
  .exp .row{ grid-template-columns:1fr; gap:6px; }
}