@font-face {
  font-family: "Manrope";
  src: url("/Manrope.ttf") format("truetype");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}
@property --sky-start { syntax: "<color>"; inherits: true; initial-value: #0a0b0c; }
@property --sky-mid { syntax: "<color>"; inherits: true; initial-value: #17191c; }
@property --sky-end { syntax: "<color>"; inherits: true; initial-value: #26282b; }
:root{color-scheme:dark;
  --paper:#141619;
  --surface:#202328;
  --field:#191c20;
  --ink:#edeef0;
  --muted:#a8acb4;
  --line:#373c44;
  --blue:#a8baff;
  --cover:#232e49;
  --action:#465eab;--font-family:"Manrope",Arial,sans-serif;font-family:var(--font-family);color:var(--ink);min-height:100%;background:radial-gradient(ellipse 90vw 80vh at top right,rgba(138,144,150,.12),transparent 85%) no-repeat, linear-gradient(156deg,var(--sky-start) 0%,var(--sky-mid) 55%,var(--sky-end) 100%) no-repeat var(--paper);scroll-behavior:smooth}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,a{touch-action:manipulation}button{cursor:pointer}.wrap{width:min(1160px,90%);margin-inline:auto}.bar,nav,.brand,.contacts,.sectionhead,footer,.groupname,.coverhead,.coverfoot{display:flex;align-items:center}.bar{height:78px;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{gap:13px;}.brand b span{color:var(--blue)}nav{gap:30px;}nav a:hover,.contacts a:hover,footer a:hover,.ask:hover{color:var(--blue)}.hero{padding:54px 0 56px;display:grid;grid-template-columns:minmax(140px,.72fr) minmax(340px,1.7fr) minmax(210px,.88fr);gap:clamp(24px,3.2vw,56px);align-items:start}.portrait{margin:0}.portrait img{display:block;width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;background:var(--surface)}.portrait figcaption{color:var(--muted);margin-top:12px}.available{display:flex;align-items:center;gap:8px;color:#435147;}.available i{width:7px;height:7px;background:#78ae85;border-radius:50%}h1,h2,h3,p,figure{margin:0}.bio h1,.detail h1{margin:20px 0}.bio p{max-width:480px}.contacts{gap:20px;margin-top:22px;}.contacts a,.ask{border-bottom:1px solid #a2a5a0;padding-bottom:2px}aside{padding-top:2px}aside ol{list-style:none;margin:17px 0 0;padding-left:0}aside li{position:relative;padding:0 0 16px 19px;border-left:1px solid var(--line);margin-left:4px}aside li:last-child{border-color:transparent;padding-bottom:0}aside li:before{content:'';position:absolute;left:-4px;top:5px;background:#afb3ad;width:7px;height:7px;border-radius:50%}aside li:first-child:before{background:var(--ink)}aside small{display:block;color:var(--muted);margin-top:3px}footer{justify-content:space-between;border-top:1px solid var(--line);margin-top:56px;padding:24px 0 35px;color:var(--muted);}dialog{border:0;background:var(--paper);color:var(--ink);border-radius:20px;width:min(440px,calc(100% - 30px));padding:34px;box-shadow:0 20px 100px #0a163528}dialog::backdrop{background:#171b2a70;backdrop-filter:blur(5px)}.close{position:absolute;right:13px;top:10px;border:0;background:transparent;color:var(--muted);padding:4px 9px}dialog .label{color:var(--blue)}dialog h2{margin:15px 0 12px}form{margin:20px 0 16px}form label{display:block;margin-bottom:7px}input{background:var(--surface);width:100%;padding:13px;border:1px solid var(--line);border-radius:8px}.error{color:#ffa7a7;padding-top:7px}.primary{background:var(--action);color:var(--ink);width:100%;margin-top:8px}.detail{padding:40px 0}.detail .back{color:var(--muted)}.detail .eyebrow{margin-top:42px}.detail h1{max-width:980px}.detail .lead{max-width:760px}.story{display:grid;grid-template-columns:170px minmax(0,700px);gap:24px;padding:24px 0;border-top:1px solid var(--line)}.stories{margin-top:42px}.screen{margin:24px 0}.screen img{display:block;max-height:780px;max-width:100%;margin:auto;object-fit:contain}.screen a{display:block;background:var(--surface);padding:clamp(8px,3vw,40px);border-radius:12px}.screen figcaption{color:var(--muted);margin-top:10px}.next{display:inline-block;margin-top:25px;color:var(--blue)}:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
@media(max-width:900px){.hero{grid-template-columns:150px 1fr;gap:25px;padding:45px 0}.hero aside{grid-column:1/-1}aside ol{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}aside li{border:0;padding:0 0 0 12px}}
@media(max-width:600px){.wrap{width:calc(100% - 36px)}.bar{height:61px}.brand{gap:8px}nav{gap:14px;}nav a:last-child{display:none}.hero{grid-template-columns:84px minmax(0,1fr);gap:18px 15px;padding:32px 0}.portrait img{aspect-ratio:1}.bio{display:contents}.available{align-self:start;grid-column:2;grid-row:1;}.bio h1{grid-column:2;grid-row:1;align-self:start;margin:22px 0 0;}.bio p,.contacts{grid-column:1/-1}.contacts{margin:0}.hero aside{padding-top:12px}aside ol{grid-template-columns:1fr 1fr;gap:15px}.sectionhead{align-items:start;margin:24px 0;display:block}.access-state{display:block;margin-top:10px}.cover{height:275px}.coverhead,.coverfoot{left:16px;right:16px;}.covercenter{padding:10px}.story{grid-template-columns:1fr;gap:8px}footer{gap:12px;}dialog{padding:28px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
@media(min-width:601px) and (max-width:900px){aside ol{grid-template-columns:repeat(3,1fr)}}
@media(max-width:600px){aside ol{grid-template-columns:1fr;gap:0}aside li{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:0 0 9px 14px;border-left:1px solid var(--line)}aside li small{margin:0;flex-shrink:0}aside li:before{width:6px;height:6px}.hero aside{padding-top:5px}.hero{gap:16px 15px}.sectionhead sup{margin-left:5px}} 
@media(min-width:760px) and (max-width:900px){.hero{grid-template-columns:128px minmax(0,1fr) 162px;gap:20px;padding:45px 0}.hero aside{grid-column:auto}aside ol{display:block}aside li{padding:0 0 12px 14px;border-left:1px solid var(--line)}aside li:last-child{border-color:transparent}}

#work{scroll-margin-top:16px}
@media (min-width: 601px) {
  .hero {
    grid-template-columns: minmax(0, 1fr) clamp(200px, 27vw, 320px);
    column-gap: clamp(24px, 3vw, 44px);
  }
}
.hero .bio {
  display: grid;
  gap: 20px;
  font: var(--type-caption);
}
@media (min-width: 961px) {
  .hero .bio { margin-inline-end: clamp(16px, 2.5vw, 36px); }
}
.bio-identity { display: grid; gap: 4px; }
.bio-copy { display: grid; gap: 20px; }
.bio-copy p { max-width: none; }
.bio-strengths h2, .performance h2 { font: inherit; font-weight: 600; }
.bio-strengths strong { font-weight: 600; }
.performance-badges { display: flex; gap: 8px; margin-top: 10px; }
.performance-badges svg { width: clamp(28px, 2.6vw, 34px); aspect-ratio: 1; border-radius: 25%; }
.performance-badges use { stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; }
.rating-double { color: #105374; background: #d6effa; }
.rating-triple { color: #403480; background: #e5e1fc; }
.rating-single { color: #235a32; background: #d9efde; }
.bio-strengths ul { margin: 8px 0 0; padding-inline-start: 1em; }
.bio-strengths li + li { margin-top: 8px; }
.bio-strengths li::marker { color: var(--muted); font-size: .75em; }
.hero .bio h1 { margin: 0; font-size: clamp(1.75rem, 3vw, 2.25rem); }
.bio .bio-caption { margin: 0; max-width: none; color: var(--muted); }
.portrait .contacts { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 8px 0 0; }
.portrait .contacts a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0; border: 0; }
.portrait .contacts a + a::before { content: ""; width: 1px; height: 14px; margin-right: 6px; background: var(--line); }
:root { --sky-start: #0a0b0c; --sky-mid: #17191c; --sky-end: #26282b; }
:root[data-theme="light"] {
  color-scheme: light;
  --sky-start: #f1efeb;
  --sky-mid: #f7f6f3;
  --sky-end: #e4e5e7;
  --paper: #f1efeb;
  --surface: #fff;
  --field: #f8f8f7;
  --ink: #242629;
  --muted: #595e66;
  --line: #c7c9cc;
  --blue: #36569b;
  --cover: #dce5fa;
}
[data-theme="light"] .entry-submit { color: white; }
[data-theme="light"] .error { color: #a02939; }
.portrait { position: relative; }
.portrait img { pointer-events: none; }
.theme-cord {
  --pull: 0px;
  position: fixed;
  z-index: 5;
  right: max(0px, calc((100vw - min(90vw, 1160px)) / 2 - 44px));
  top: 0;
  width: 44px;
  height: 92px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--muted);
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.cord-strand, .cord-grip { position: absolute; pointer-events: none; left: 50%; }
.cord-strand {
  top: 0;
  bottom: calc(30px - var(--pull));
  width: 1px;
  background: currentColor;
  transition: bottom 240ms ease-out;
}
.cord-grip {
  top: 60px;
  width: 9px;
  height: 20px;
  margin-left: -4px;
  border-radius: 5px;
  background: #bc976b;
  box-shadow: inset 0 -3px 0 #0002;
  transform: translateY(var(--pull));
  transition: transform 240ms ease-out;
}
.theme-cord:active { cursor: grabbing; }
.theme-cord[data-dragging] span { transition: none; }
@media (prefers-reduced-motion: no-preference) {
  :root { transition: --sky-start 340ms ease, --sky-mid 340ms ease, --sky-end 340ms ease, color 260ms ease; }
  .bio-caption, .career-dates, .portrait figcaption, footer { transition: color 260ms ease; }
}
#experience {
  margin-bottom: clamp(36px, 5vw, 64px);
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line) var(--paper);
}
.career-periods {
  display: grid;
  grid-template-columns: repeat(6, minmax(145px, 1fr));
  margin: 0;
  padding: 4px 0 12px;
  list-style: none;
}
.career-periods li {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 12px 0 0;
}
.career-periods li:not(:last-child)::before {
  content: "";
  position: absolute;
  inset: 3px 0 auto;
  height: 1px;
  background: var(--line);
}
.career-periods li::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.career-periods strong { font: var(--type-caption); font-weight: 600; }
.career-dates { order: -1; color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.career-periods .career-current::after { background: #78ae85; }
@media (max-width: 600px) {
  #experience { overflow-x: visible; }
  .career-periods { grid-template-columns: minmax(0, 1fr); padding: 0; }
  .career-periods li { gap: 2px; padding: 0 0 20px 24px; }
  .career-periods li:last-child { padding-bottom: 0; }
  .career-periods li:not(:last-child)::before {
    inset: 10px auto -10px 3px;
    width: 1px;
    height: auto;
  }
  .career-periods li::after { top: 7px; }
  .career-dates { font-size: 13px; line-height: 20px; }
  .career-periods strong br { display: none; }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .hero .bio { display: contents; }
  .bio-identity { grid-row: 1; }
  .hero .portrait { grid-row: 2; width: min(100%, 220px); justify-self: start; }
  .theme-cord { right: calc(10px + env(safe-area-inset-right, 0px)); }
  .bio-copy { grid-row: 3; }
  .bio-identity > * { grid-column: 1 / -1; }
  .hero .bio h1 { grid-column: 1 / -1; grid-row: auto; font-size: clamp(1.5rem, 8vw, 2rem); }
}
.group{margin-bottom:58px}
.groupname{border-top:1px solid var(--line);padding:23px 0 20px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.group:first-child .groupname{border-top:0}

.groupname p{color:var(--muted);margin-top:6px}
.groupname small{color:var(--muted)}
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 1.5vw, 22px);
}
@media (max-width: 600px) {
  .cards {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}
.card {
  --cover-paper: #e5def3;
  --screen-position: center top;
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 8 / 5;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  background: var(--cover-paper);
  color: #24232b;
}
.card[data-project="search"] { --cover-paper: #e3e5ef; }
.card[data-project="flow"] { --cover-paper: #dce8e4; }
.card[data-project="offers"] { --cover-paper: #eee2d2; --screen-position: left top; }
.card[data-project="candidate"] { --cover-paper: #dce7ee; }
.card[data-project="post"] { --cover-paper: #dce8f4; }
.card[data-project="innopolis"] { --cover-paper: #e1e9dd; }
.card[data-project="education"] { --cover-paper: #e9e4db; }
.card-heading {
  flex: 0 0 auto;
  padding: 5% 6% 4%;
}
.card-company {
  display: block;
  margin-bottom: 5px;
  font-size: 12px;
  line-height: 1.3;
  color: #55515e;
}
.card-title {
  display: block;
  overflow-wrap: anywhere;
}
.card-screen {
  flex: 1 1 0;
  min-height: 0;
  margin: 0 6% -4%;
  overflow: hidden;
  border: 1px solid #25202e12;
  border-radius: 8px 8px 0 0;
  background: #fff;
  box-shadow: 0 8px 24px #29203314, 0 2px 5px #2920330a;
}
.card-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--screen-position);
  pointer-events: none;
}
.card[data-project="offers"] .card-screen {
  container-type: size;
  border-top-left-radius: 14px;
  border-top-right-radius: 14px;
}
/* Match the export's corners at either scale used by object-fit: cover. */
.card[data-project="offers"] .card-screen img {
  clip-path: inset(0 round max(3cqw, 5.87cqh));
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card-screen { transition: transform 260ms cubic-bezier(.23, 1, .32, 1); }
  .card:is(:hover, :focus-visible) .card-screen { transform: translateY(-4px); }
}
@media (max-width: 600px) {
  .card { aspect-ratio: 6 / 5; }
  .card-heading { padding: 6%; }
  .card-screen { margin-inline: 5%; }
}
@media (min-width: 601px) and (max-width: 760px) {
  .card { aspect-ratio: 6 / 5; }
}
.card:focus-visible { outline-offset: 2px; }
.cover{width:100%;overflow:hidden;background:var(--surface)}
.cover img{display:block;width:100%;height:100%;object-fit:cover}
.cover{display:grid;place-items:center;position:relative;height:clamp(200px,23vw,345px)}
.cover img{position:absolute;inset:0;object-position:center;opacity:.8}
.pill,.primary{border:0;border-radius:100px;padding:13px 20px;}
.pill{position:relative;background:#252824;color:white}
.pill:hover{background:#40463f}


.detail .gallery-title{margin:36px 0 12px;}
.stories > .story:first-child { border-top: 0; }
.screen a + a { margin-top: 12px; }
.screen img { height: auto; }
.story p + p { margin-top: 12px; }
.comparison { margin: 32px 0 24px; }
.comparison figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 8px; color: var(--muted); }
.comparison-note { color: var(--muted); }
.gallery-title + .comparison, .comparison-note + .comparison { margin-top: 16px; }
.detail .gallery-title:has(+ .comparison-note) { margin-bottom: 8px; }
.concept-screen { margin: 36px 0 24px; }
.concept-screen figcaption {
  margin: 0 0 12px;
  font: var(--type-subheading);
  letter-spacing: -.018em;
  color: var(--ink);
}
.concept-screen figcaption strong { font-weight: 800; }
.comparison-stage {
  --split: 50%;
  position: relative;
  aspect-ratio: 8 / 5;
  overflow: hidden;
  border-radius: 10px;
  background: #fff;
}
.comparison-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.comparison-before { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.comparison-search .comparison-stage { aspect-ratio: 1440 / 871; }
.comparison-search img { background: #fff; }
.comparison-candidate .comparison-stage { aspect-ratio: 2880 / 3380; }
.comparison-candidate img { background: #fff; }
.comparison-diagrams .comparison-stage { aspect-ratio: 1666 / 1328; }
.comparison-structure .comparison-stage { aspect-ratio: 2880 / 1287; }
.comparison-diagrams img, .comparison-structure img { background: white; }
.comparison-line {
  position: absolute;
  inset: 0 auto 0 var(--split);
  width: 2px;
  transform: translateX(-50%);
  background: #363841;
}
.comparison-line span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 40px; height: 40px;
  border: 1px solid #d9dbe0; border-radius: 50%; background: #272931; color: #fff;
  font-size: 22px; line-height: 1;
}
.comparison-stage input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.comparison-stage:has(input:focus-visible) { outline: 3px solid var(--blue); outline-offset: 3px; }
.screen a{background:var(--surface);padding:0;overflow:hidden;border-radius:8px}
.screen img{max-height:none;width:100%}
.project-navigation {
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.project-navigation .back, .project-navigation .next {
  display: flex;
  align-items: center;
  min-height: 44px;
  margin: 0;
}
.project-navigation .back { flex-shrink: 0; }
.project-navigation .next { justify-content: flex-end; text-align: right; }
@media (max-width: 600px) {
  .project-navigation { flex-direction: column; align-items: stretch; gap: 8px; }
  .project-navigation .next { justify-content: flex-start; text-align: left; }
}
/* These opaque exports include black pixels outside their rounded corners. */
.screen:has(> a[href^="/media/offers-"]) { container-type: inline-size; }
.screen > a[href^="/media/offers-"] {
  border-radius: 3cqw;
  background: transparent;
}
@media(max-width:600px){.group{margin-bottom:36px}.groupname{align-items:start;padding:18px 0 16px}.groupname small{white-space:nowrap;padding-top:3px}}

/* Four roles shared by the profile, catalogue, case pages and access dialog. */
:root {
  --type-title: 700 clamp(2rem, 3.2vw, 2.75rem)/1.08 var(--font-family);
  --type-heading: 600 clamp(1.5rem, 2vw, 1.75rem)/1.2 var(--font-family);
  --type-subheading: 600 clamp(1.125rem, 1.45vw, 1.25rem)/1.3 var(--font-family);
  --type-caption: 400 0.9375rem/1.5 var(--font-family);
}
body, small, input, button, aside li b {
  font: var(--type-caption);
}
.bio h1 {
  font: var(--type-title);
  letter-spacing: -.035em;
}
.groupname h2, .detail h1, dialog h2 {
  font: var(--type-heading);
  letter-spacing: -.03em;
}
.card-title, aside h2, .story h2, .gallery-title, .close {
  font: var(--type-subheading);
  letter-spacing: -.018em;
}
.card-title {
  font-weight: 500;
}

.entry {
  width: min(860px, calc(100% - 48px));
  min-height: 100svh;
  margin-inline: auto;
  padding-block: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: center;
}
.entry-cover, .entry section { min-width: 0; }
.entry-cover {
  position: relative;
  min-height: 394px;
  padding: 22px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--cover);
  color: var(--blue);
  border-radius: 16px 0 0 16px;
}
.cover-index { display: flex; align-items: center; justify-content: space-between; font: var(--type-caption); letter-spacing: .06em; }
.archive-mark { width: 100%; align-self: center; display: block; transform: translateY(6%); }
.entry section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  padding: clamp(26px, 4vw, 46px);
  border-radius: 0 16px 16px 0;
  background: var(--surface);
}
.entry h1 { font: var(--type-heading); letter-spacing: -.035em; }
.entry-note { margin-top: 12px; color: var(--muted); text-wrap: pretty; }
.entry form { margin: 28px 0 16px; }
.entry-field {
  display: flex;
  align-items: center;
  border: 1px solid #565c66;
  background: var(--field);
  border-radius: 8px;
  padding: 2px 3px 2px 14px;
}
.entry-field:focus-within { border-color: var(--ink); }
.entry-field input { flex: 1; min-width: 0; padding: 0; border: 0; outline: 0; background: transparent; font-size: 1rem; }
.entry-field input::-ms-reveal { display: none; }
.entry-field .visibility-toggle {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--muted);
  border-radius: 5px;
}
.entry-field .visibility-toggle:hover { background: var(--line); color: var(--ink); }
.visibility-toggle:not(.revealed) .eye-slash, .entry .error:empty { display: none; }
.entry-submit { width: 100%; min-height: 48px; margin-top: 10px; background: var(--action); color: var(--ink); border: 0; border-radius: 8px; font-weight: 600; }
.entry-submit:hover { background: #506aba; }
.entry-submit:active { background: #384e96; }
.entry-submit:disabled { opacity: .65; }
.entry .ask { align-self: center; color: var(--muted); border: 0; padding: 5px 0; }
.entry .ask:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 680px) {
  .entry { width: min(420px, calc(100% - 32px)); grid-template-columns: 1fr; padding-block: 24px; }
  .entry-cover { min-height: 0; height: 170px; padding: 16px 20px; border-radius: 14px 14px 0 0; }
  .archive-mark { position: absolute; width: 200px; top: 50%; left: 50%; transform: translate(-50%, -44%); }
  .entry-cover .cover-index:last-child { grid-row: 3; }
  .entry section { padding: 28px 24px 24px; border-radius: 0 0 14px 14px; }
  .entry form { margin-top: 22px; }
}