:root {

  --paper: #ecf1f8;
  --paper-2: #d8e0e5;
  --brand: #325390;

  --ink: #121d30;
  --ink-soft: #4c648e;

  --hairline: #b3c2cd;
  --brand-line: rgba(50, 83, 144, 0.44);

  --display: 'Unbounded', 'e-Ukraine Head', system-ui, sans-serif;
  --sans: 'e-Ukraine', system-ui, sans-serif;
}

.deck {
  background: var(--paper);
}

.stage {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
}

.display {
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.14;
  letter-spacing: -0.05em;
  margin: 0;
}

.display--xl { font-size: 120px; }
.display--l  { font-size: 104px; }
.display--m  { font-size: 66px; }
.display--s  { font-size: 60px; }

.brandline {
  position: absolute;
  top: 607px;
  left: 132px;
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.6;
  color: var(--brand);
}

.kicker {
  position: absolute;
  top: 88px;
  left: 132px;
  margin: 0;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.display em {
  font-style: normal;
  color: var(--brand);
}

.slide--history .display--m,
.slide--kuznets .display--m,
.slide--youth .display--m,
.slide--years .display--m,
.slide--mobility .display--m,
.slide--ratings .display--m,
.slide--diplomas .display--m,
.slide--today .display--m,
.slide--map .display--m,
.slide--international .display--m,
.slide--checklist .display--m,
.slide--education .display--s,
.slide--career .display--s,
.slide--science .display--s {
  position: absolute;
  top: 152px;
  left: 132px;
}

.seal {
  position: absolute;
  right: 132px;
  top: 88px;
  width: 132px;
  height: 132px;
}

.slide--title .display--xl {
  position: absolute;
  top: 221px;
  left: 132px;
  width: 1400px;
}

.title-rule {
  position: absolute;
  left: 132px;
  top: 573px;
  width: 220px;
  height: 2px;
  background: var(--brand);
  transform-origin: 0 50%;
}

.title-speaker {
  position: absolute;
  left: 132px;
  top: 753px;
  margin: 0;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.title-speaker span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.slide--intro .display--l {
  position: absolute;
  top: 178px;
  left: 132px;
}

.strip {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 452px;
  height: 394px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.strip__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.cards {
  position: absolute;
  left: 132px;
  right: 132px;
  bottom: 108px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
}

.card__photo {
  position: relative;
  height: 320px;
  overflow: hidden;
  background: var(--paper-2);
}

.card__years {
  margin: 28px 0 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.card--now .card__years {
  color: var(--brand);
}

.card__name {
  margin: 12px 0 0;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-soft);
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
}

.disc {
  position: absolute;
  left: 132px;
  top: 392px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--paper-2);
}

.bio {
  position: absolute;
  left: 748px;
  top: 442px;
  width: 860px;
}

.bio__name {
  margin: 0;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--hairline);
  font-family: var(--display);
  font-size: 44px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--brand);
}

.bio__name span {
  display: block;
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.22em;
  color: var(--ink-soft);
}

.facts {
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.facts li + li {
  margin-top: 28px;
}

.facts b {
  display: block;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.facts span {
  display: block;
  margin-top: 6px;
  font-size: 21px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-soft);
}

.today-grid {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 380px;
  height: 540px;
  display: grid;
  grid-template-columns: 460px repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 26px;
}

.today-core {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 34px;
  background: var(--brand);
}

.today-core span {
  font-family: var(--display);
  font-size: 42px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.04em;
  text-align: center;
  color: var(--paper);
}

.tile:nth-child(2) { grid-column: 2; grid-row: 1; }
.tile:nth-child(3) { grid-column: 3; grid-row: 1; }
.tile:nth-child(4) { grid-column: 4; grid-row: 1; }
.tile:nth-child(5) { grid-column: 2; grid-row: 2; }
.tile:nth-child(6) { grid-column: 3; grid-row: 2; }
.tile:nth-child(7) { grid-column: 4; grid-row: 2; }

.tile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  overflow: hidden;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--brand-line);
  border-radius: 34px;
}

.tile__name {
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.tile.is-open {
  align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 52px 60px;
  text-align: left;
}

.tile.is-open .tile__name {
  font-size: 34px;
  color: var(--brand);
}

.tile__stats {
  display: none;
  flex: 1;
  align-items: center;
  gap: 92px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tile__stats li {
  flex: 1;
}

.tile__stats b {
  display: block;
  font-family: var(--display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.tile__stats span {
  display: block;
  margin-top: 18px;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-soft);
}

.ranks {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 342px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.rank {
  display: flex;
  flex-direction: column;
  height: 540px;
  margin: 0;
  padding: 40px 36px;
  border: 1px solid var(--hairline);
  border-radius: 34px;
}

.rank__mark {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 96px;
}

.rank__mark img {
  max-width: 100%;
  max-height: 96px;
  width: auto;
  height: auto;
}

.rank__what {
  flex: 1;
  margin: 34px 0 0;
  padding-top: 30px;
  border-top: 1px solid var(--hairline);
  font-size: 21px;
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink);
}

.rank__place {
  margin: 0;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--brand);
}

.rank__place span {
  display: block;
  margin-top: 12px;
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 300;
  line-height: 1.45;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.lede {
  position: absolute;
  top: 244px;
  left: 132px;
  margin: 0;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--brand);
}

.metro {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.metro line {
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
}

.metro circle {
  fill: var(--paper);
  stroke: var(--brand);
  stroke-width: 3;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.stations {
  position: absolute;
  inset: 0;
}

.station {
  position: absolute;
  width: 380px;
  transform: translateX(-50%);
  text-align: center;
}

.station--up   { bottom: 490px; }
.station--down { top: 790px; }

.station h3 {
  margin: 0 0 12px;
  font-family: var(--display);
  font-size: 30px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.station p {
  margin: 0;
  font-size: 20px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-soft);
}

.station__leader {
  position: absolute;
  left: 50%;
  width: 1px;
  height: 80px;
  background: var(--hairline);
}

.station--up .station__leader   { bottom: -80px; transform-origin: 50% 0; }
.station--down .station__leader { top: -80px; transform-origin: 50% 100%; }

.edu-from {
  position: absolute;
  left: 132px;
  top: 340px;
  margin: 0;
  font-size: 26px;
  font-weight: 300;
  color: var(--ink-soft);
}

.edu-arrow {
  position: absolute;
  left: 128px;
  top: 396px;
  width: 34px;
  height: 92px;
}

.edu-arrow path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.edu-to {
  position: absolute;
  left: 132px;
  top: 508px;
  width: 1500px;
  margin: 0;
  font-family: var(--display);
  font-size: 80px;
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.pills {
  position: absolute;
  left: 132px;
  top: 780px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
}

.pills li {
  padding: 17px 30px 18px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  font-size: 22px;
  font-weight: 300;
  color: var(--brand);
}

.ripple {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.ripple path {
  fill: none;
  stroke: var(--brand-line);
  stroke-width: 2;
  stroke-linecap: round;
}

.ripple g {
  transform-box: view-box;
  transform-origin: 960px 900px;
}

.ripple circle {
  fill: var(--brand);
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.ripple__origin {
  position: absolute;
  left: 810px;
  top: 934px;
  width: 300px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--brand);
}

.ripple__stop {
  position: absolute;
  width: 460px;
  margin: 0;
  text-align: center;
  font-size: 22px;
  font-weight: 300;
  line-height: 1.4;
  color: var(--ink-soft);
}

.worldmap-holder {
  position: absolute;
  left: 132px;
  top: 336px;
  width: 1000px;
}

.worldmap {
  display: block;
  width: 100%;
  height: auto;
}

.worldmap .land path {
  fill: var(--paper-2);
  stroke: var(--paper);
  stroke-width: 1.2;
}

.worldmap .home path {
  stroke: var(--ink-soft);
  stroke-width: 2;
}

.worldmap .mark path {
  stroke: var(--ink-soft);
  stroke-width: 1.2;
}

.worldmap .inset-frame {
  fill: none;
  stroke: var(--hairline);
  stroke-width: 1;
}

.countries {
  position: absolute;
  left: 1216px;
  top: 348px;
  width: 572px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(9, auto);
  grid-auto-flow: column;
  column-gap: 44px;
  row-gap: 22px;
}

.countries li {
  display: flex;
  align-items: center;
  gap: 18px;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink);
}

.countries img {
  flex: none;
  width: 36px;
  height: 24px;
  object-fit: cover;
  border: 1px solid var(--hairline);
  border-radius: 3px;
}

.years {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 396px;
  height: 470px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.years li {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 148px;
  height: 100%;
}

.years b {
  margin-bottom: 18px;
  font-family: var(--display);
  font-size: 34px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink);
}

.years__bar {
  width: 100%;
  border-radius: 8px 8px 0 0;
  background: var(--brand);
  transform-origin: 50% 100%;
}

.years i {
  margin-top: 20px;
  padding-top: 22px;
  width: 100%;
  border-top: 1px solid var(--hairline);
  text-align: center;
  font-style: normal;
  font-size: 21px;
  font-weight: 300;
  color: var(--ink-soft);
}

.partners {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 342px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(3, 190px);
  gap: 26px;
}

.partner {
  margin: 0;
}

.partner__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 28px;
  border: 1px solid var(--hairline);
  border-radius: 22px;
}

.partner__mark img {
  height: auto;
}

.partner figcaption {
  display: none;
}

.deck[data-slide='diplomas'] .deck-zoom__flyer {
  object-fit: contain;
}

.deck[data-slide='diplomas'] .deck-zoom__track {
  display: block;
  position: relative;
  width: 100%;
}

.deck[data-slide='diplomas'] .deck-zoom__cell {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.deck[data-slide='diplomas'] .deck-zoom__cell img {
  width: auto;
  height: auto;
}

.deck[data-slide='diplomas'] .deck-zoom__years {
  color: var(--brand);
}

.row4 {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 296px;
  height: 262px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.row4__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.stair {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

.stair polyline {
  fill: none;
  stroke: var(--brand-line);
  stroke-width: 2;
  stroke-linejoin: round;
}

.steps {
  position: absolute;
  inset: 0;
}

.step {
  position: absolute;
  width: 280px;
  margin: 0;
  padding: 16px 0 17px;
  text-align: center;
  background: var(--paper);
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.04em;
  color: var(--ink-soft);
}

.step--last {
  background: var(--brand);
  border-color: var(--brand);
  color: var(--paper);
}

.claim {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 906px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.verbs {
  position: absolute;
  left: 132px;
  top: 356px;
  width: 800px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.verbs li {
  padding-bottom: 8px;
  margin-bottom: -8px;
  font-family: var(--display);
  font-size: 52px;
  font-weight: 400;
  line-height: 1.34;
  letter-spacing: -0.05em;
  color: var(--ink);
}

.verbs li:nth-child(even) {
  color: var(--brand);
}

.quad {
  position: absolute;
  left: 1000px;
  top: 200px;
  width: 788px;
  height: 660px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 24px;
}

.quad__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.youth {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 420px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 24px;
}

.youth li {
  display: flex;
  flex-direction: column;
}

.youth__shot {
  position: relative;
  height: 234px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--paper-2);
}

.youth b {
  margin-top: 26px;
  font-family: var(--display);
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--ink);
}

.youth span:not(.youth__shot) {
  margin-top: 10px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--ink-soft);
}

.banner {
  position: absolute;
  left: 132px;
  top: 284px;
  width: 1656px;
  height: 520px;
  overflow: hidden;
  border-radius: 34px;
  background: var(--paper-2);
}

.trio {
  position: absolute;
  left: 132px;
  top: 838px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.trio li {
  display: flex;
  align-items: center;
  min-height: 148px;
  padding: 34px 40px;
  border: 1px solid var(--brand-line);
  border-radius: 34px;
}

.trio b {
  display: block;
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.05em;
  color: var(--brand);
}

.trio span {
  display: block;
  margin-top: 16px;
  font-size: 22px;
  font-weight: 300;
  color: var(--ink-soft);
}

.checklist {
  position: absolute;
  left: 132px;
  top: 472px;
  width: 1656px;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  column-gap: 56px;
  row-gap: 46px;
}

.checklist li {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 20px 0 21px;
  border-bottom: 1px solid var(--hairline);
  font-size: 26px;
  font-weight: 300;
  color: var(--ink);
}

.checklist .box {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-line);
  border-radius: 13px;
}

.checklist svg {
  width: 26px;
  height: 26px;
  overflow: visible;
}

.checklist path {
  fill: none;
  stroke: var(--brand);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ribbon {
  position: absolute;
  left: calc(-1 * var(--bleed-x));
  right: calc(-1 * var(--bleed-x));
  height: calc(300px + var(--bleed-y));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.ribbon--top    { top: calc(-1 * var(--bleed-y)); }
.ribbon--bottom { bottom: calc(-1 * var(--bleed-y)); }

.ribbon__cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-2);
}

.legacy__lead {
  position: absolute;
  left: 132px;
  top: 414px;
  margin: 0;
  font-size: 44px;
  font-weight: 400;
  color: var(--ink);
}

.legacy__now {
  position: absolute;
  left: 132px;
  top: 492px;
  margin: 0;
  font-family: var(--display);
  font-size: 132px;
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.06em;
  color: var(--brand);
}

.signoff__seal {
  position: absolute;
  left: 885px;
  top: 330px;
  width: 150px;
  height: 150px;
}

.signoff__rule {
  position: absolute;
  left: 760px;
  top: 546px;
  width: 400px;
  height: 2px;
  background: var(--brand);
  transform-origin: 50% 50%;
}

.slide--finale .display--s {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 618px;
  margin: 0;
  font-size: 64px;
  line-height: 1.25;
  text-align: center;
}

.signoff__org {
  position: absolute;
  left: 132px;
  right: 132px;
  top: 838px;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.45;
  color: var(--brand);
}

.stage {
  --zoom-veil: #ecf1f8;
}

.deck-zoom__years {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.deck-progress {
  background: var(--brand);
}

.deck-counter {
  position: absolute;
  right: 132px;
  bottom: 44px;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--ink-soft);
}

.deck-counter i {
  font-style: normal;
  opacity: 0.4;
  margin: 0 6px;
}